@charset "utf-8";

:root{
--base-color:#fafdff;/*スノーホワイト*/
--main-color:rgba(253, 154, 22, 0.54);/*濃オレンジ*/
--sub-color:rgba(253, 154, 22, 0.19);/*薄オレンジ*/
--key-color:#0054A6;/*想大の誕生石　サファイヤカラー*/
}

body{
background-color:var(--base-color);
color:#333;
}

header{
width:100%;
height: 100%;
display: flex;
justify-content: space-between;
position: relative;
}
h1{
padding-left:3%;
font-size:5.0vw;
letter-spacing: 0.22em;
position: absolute;
top:5%;
left:5%;
z-index: 100;
border-bottom: 10px solid var(--key-color);
border-left: 30px solid rgba(0, 84, 166, 0.58);
}
.h-left{
width:30%;
height: 100vh;
}
header h2{
position: absolute;
left:5%;
bottom:2%;
font-size:2vw;
letter-spacing: 0.13em;
}
.g-nav>ul{
width:50%;
margin: 50% 0  0 30% ;
font-size:1.5vw;
font-family: 'Mukta', sans-serif;
text-align: center;
letter-spacing: 0.1em;
}

.g-nav>ul li{
padding:8% 0;
width:50%;

}
.g-nav a{
color:#333;
display:block;
border-bottom: 2px solid var(--key-color);
}
.g-nav a:hover{
color:var(--key-color);

}
.h-right{
width:70%;
background:url(../img/takaiwa.jpg)no-repeat top right/contain;
clip-path: polygon(0 0, 80% 0, 100% 15%, 100% 100%, 50% 100%, 0 55%);
background-color:var(--sub-color);
position:relative;
}

/*scrollボタン
-------------------------*/
.scroll-btn{
padding-top: 20px;
position: absolute;
left: 50%;
bottom:20px;
color:var(--key-color);
transition: 0.3s;
}
.scroll-btn span {
position: absolute;
left: 50%;
bottom:50px;
width: 30px;
height: 30px;
margin-left: -12px;
border-left: 1px solid var(--key-color);
border-bottom: 1px solid var(--key-color);
transform: rotate(-45deg);
animation: scr 2s infinite;
opacity: 0;
}

.scroll-btn span:nth-of-type(1) {
animation-delay: 0s;
transition: all 0.5s;

}
.scroll-btn span:nth-of-type(2) {
bottom: 66px;
animation-delay: 0.12s;
}
.scroll-btn span:nth-of-typee(3) {
bottom: 82px;
animation-delay: 0.24s;
}

@keyframes scr {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.scroll-btn:hover{
color:rgba(255, 0, 0, 0.5);

}

/*自分について
-------------------------------*/
.about{
width:100%;
height:200vh;
position:relative;
}
.about-bg1{
width:100%;
height:100vh;
background-color:var(--main-color);
clip-path: polygon(65% 0, 100% 0, 100% 54%, 0 100%, 0 21%);
position: absolute;
top:0;
}
.about-bg2{
width:100%;
height:100vh;
background-color:var(--sub-color);
clip-path: polygon(0 90%, 0 0, 100% 100%, 10% 100%);
position:absolute;
top:100vh;
}
.bg2-inner{
padding:17% 0 0 20px;
position: absolute;
}

.bg2-inner>h3{
font-size:2.4vw;
margin-bottom: 1%;
border-bottom: 10px solid var(--key-color);
}
.bg2-inner>p{
width:55%;
padding:4px;
font-size:14px;
line-height: 2.4;
}
.bg2-inner>p>span{
font-size:16px;
font-weight: bold;
background:linear-gradient(transparent 80%, rgba(255, 0, 0, 0.5) 5%);

}
.tv{
width:250px;
height:220px;
position:absolute;
bottom:-35px;
right:55px;
background: url(../img/barcelona.jpg)no-repeat center center/contain;
}

.about-bg3{
width:35%;
height:50vh;
position:absolute;
top:80vh;
right:10%;
text-align: center;
}
.barce{
font-size:12px;
}

.about-bg3 img{
width:90%;
border-radius: 50%;
margin-bottom: 10px;
}
.about-bg3 a{
display:block;
}
.about-bg3 img:hover{
width:80%;
border-radius: 50%;
padding:5px;
box-shadow: 0 5px 5px 5px rgba(0,0,0,0.4);
}

.inner{
padding:4% 0;
max-width:960px;
height:200vh;
margin: 0 auto;
display:flex;
flex-direction: row-reverse;
justify-content: space-between;

}

.content{
width:48%;
height:53vh;
background:var(--base-color);
padding:1%;
clip-path: polygon(15% 0%, 100% 0, 100% 90%, 85% 100%, 0 100%, 0 10%);
}
.content h2{
padding:2% 8%;
font-size:32px;
letter-spacing: 0.2em;
}
.content>p{
padding:0 8%;
font-size:13px;
}
.photo{
padding:7% 1%;
width:48%;
height:50vh;

}
.photo>img{
clip-path: polygon(15% 0%, 100% 0, 100% 90%, 85% 100%, 0 100%, 0 10%);
}

.works{
width:100%;
height:200vh;
position:relative;
}
.works>p{
font-size:1.2vw;
padding-left:2%;
font-weight: bold;
letter-spacing: 0.2em;
}
.works-bg1{
width:100%;
height:100vh;
background-color:var(--main-color);
clip-path: polygon(100% 0%, 90% 50%, 100% 100%, 10% 100%, 0 50%, 10% 0);
position:absolute;
top:0;
z-index: -1;
}
.works-bg2{
width:100%;
height:100vh;
background-color:var(--sub-color);
clip-path: polygon(10% 0, 100% 0, 100% 100%, 30% 100%);
position:absolute;
top:100vh;
z-index:-1 ;
}
.works-inner{
max-width:960px;
height:93.4vh;
margin: 0 auto ;
}
.works-inner>h2{
font-size:2.5vw;
margin-bottom:4%;
text-align: center;
letter-spacing: 0.2em;
}
.works-inner>p{
width:90px;
height: auto;
margin: 0 auto;

}
.works-inner>p>a{
display:block;
text-align: center;
font-size: 1.4vw;
font-weight:bold;
color:#333;
transition:0.3s;
border-bottom: 3px solid var(--key-color);
}
.works-inner>p>a:hover{
letter-spacing: 0.3em;

}
.works-wrapper{
width:960px;
overflow: hidden;
background-color:var(--base-color);
padding:10px;
margin-bottom: 4%;
}
.box{
float:left;
 transition: 1s;
}
.works-box1{
width:545px;
height:500px;
background: rgba(255, 0, 0, 0.1);
/*background: rgba(68, 68, 68, 0.10);*/
margin-right:10px;
}


.works-box1-txt-box{
width:365px;
height:500px;
padding:20px;
margin-left:10px;
 border:1px solid #ddd;
float:left;
}
.works-box1-txt-box-title{
font-size:28px;
text-align: center;
margin-bottom: 20px;
border-bottom: 5px solid #aaa;
 letter-spacing: 0.1em;
}
.works-box1-txt-box-des{
line-height: 1.6;
 font-size:14px;
}


/*.works-box2{
width:400px;
height:200px;
margin-bottom: 5px;
background: rgba(255, 245, 124, 0.22);
}
.works-box3{
width:400px;
height:290px;
background: rgba(255, 0, 0, 0.1);
}*/


.box:hover{
background:rgba(0, 84, 166, 0.4);
}
/*そのほか
------------------------------------*/
.other{
margin: 0 auto;
width:960px;
height:100vh;
position:relative;
}
.other-txt {
display: flex;
padding:50px 50px 0 50px;
}
.other-txt>h3{
padding-right:60px;
font-size:2.3vw;
letter-spacing: 0.2em;
}
.other-txt>p{
padding-top:10px;
font-size:1.0vw;
font-weight: bold;

}

.other-box1{
width:350px;
height:350px;
background-color:#e2eaf7;
position:absolute;
top:130px;
left:120px;
z-index:1;
border:5px solid var(--base-color);
}
.other-box1>img{
display: none; 
}
.other-box1:hover{
}
.square{
width:50%;
height:50%;
float:left;
}
.music-txt{
font-size:12px;
padding: 35px 10px;
line-height: 1.8;
}
.other-box1-anime{
width:350px;
height:350px;
background:url(../img/logic-anime.gif)no-repeat center center /cover;
position:absolute;
top:130px;
left:120px;
z-index:3;
border:5px solid var(--base-color);
opacity: 0;
}
.other-box1-anime:hover{
opacity: 1;
}

.sound{
position: absolute;
top:120px;
left:520px;

}
.sound>p{
width:100%;
font-size: 14px;
margin-bottom: 5px;
}
.sound>p:nth-of-type(2){
margin-left: 30px;
}
.sound>p:nth-of-type(3){
margin-left: 60px;
}
audio{
width:80%;
height:20px;
margin-top:5px;
}

.insta-vinpen{
width:520px;
height:412px;
background-color:url(../img/insta02.6.jpg)center center /cover;
opacity: 0;
position:absolute;
bottom:100px;
left:300px;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
z-index:3;
transition: 0.6s;
}
.insta-vinpen:hover{
background: url(../img/insta02.6.jpg)center center /cover;
z-index: 100;
opacity: 1;

}
.other-box2{
width:520px;
height:412px;
background-color:var(--base-color);
position:absolute;
bottom:100px;
left:300px;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
z-index:2;
}
.other-box2-inner{
width:500px;
height:400px;
background-color:green;
position:absolute;
top:0;
right:0;
left:0;
bottom:0;
margin: auto;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
z-index:2.5;
}
.triangle{
position:absolute;
background-color:var(--base-color);
}
.triangle>li:nth-of-type(1){
width:100%;
height:200px;
background-color:var(--base-color);
float:left;
position:relative;
}
.insta>img{
width:80%;
margin: -70px 100px 0 50px  ;
}
.triangle>li:nth-of-type(2){
width:50%;
height:200px;
float:left;
border-right:5px solid var(--base-color);
}
.triangle>li:nth-of-type(2)> img{
width:100%;
height:100%;
}
.triangle>li:nth-of-type(3){
position: absolute;
bottom:0;
right:0;
background-color:var(--main-color);
width:50%;
height:200px;
font-size:10px;
padding:10px;
letter-spacing: 0.1em;
line-height: 1.8;
}
.triangle>li:nth-of-type(3)>a{
color:var(--key-color);
transition:0.4s;
}
.triangle>li:nth-of-type(3)>a:hover{
opacity: 0.6;
letter-spacing: 0.1em;

}
.other-box3{
width:480px;
height:480px;
background-color:rgb(230, 181, 248);
position:absolute;
bottom:20px;
right:-200px;
border-radius: 50%;
z-index:3;
border:5px solid var(--base-color);
}
.premier img{
width:55%;
position:absolute;
top:15px;
left:100px;
}
#bgvid{
width:100%;
height:100%;
object-fit:contain;
object-position::center;
border-radius: 50%;
overflow: hidden;
}
.movie-txt{
width:80%;
font-size:12px;
text-align: center;
position: absolute;
bottom:50px;
left:50px;
}

.other-box3-movie{
width:480px;
height:480px;
background-color:rgb(230, 181, 248);
position:absolute;
bottom:20px;
right:-200px;
border-radius: 50%;
z-index:3;
border:5px solid var(--base-color);
opacity: 0;
}
.movie-txt-change{
width:80%;
font-size:16px;
text-align: center;
position: absolute;
bottom:50px;
left:50px;
}
.other-box3-movie:hover{
opacity: 1;
transition: 1s;
}

/*言問散歩
----------------------*/
.kototoi{
width:250px;
position:absolute;
bottom:-100px;
left:50px;
text-align: center;
font-size:10px;
}
.kototoi a{
display:block;
width:100%;
color:#333;
}
.kototoi img{
width:100%;
height:100%;
border-radius: 40px;
padding:5px;
margin-bottom: 10px;
}
.kototoi img:hover{
width:90%;
border-radius: 40px;
padding:5px;
box-shadow: 0 2px 2px 2px rgba(0,0,0,0.4);
}


/*お問い合わせ
--------------------------------*/
.contact{
width:100%;
height:100vh;
position:relative;
}
.contact-inner{
max-width:960px;
height:100%;
margin: 0 auto;
padding:1% 0 5% 10%;
}
.contact-inner>h3{
padding:2.6% 0 4% 32%;
font-size:2.5vw;
letter-spacing: 0.2em;
}

.contact-bg{
width:100%;
height:100vh;
background-color:var(--main-color);
position:absolute;
top:0;
z-index:-1 ;
clip-path: polygon(30% 0, 100% 0, 100% 80%, 95% 100%, 0 100%);
}
dl{
display: flex;
flex-wrap:wrap;
}
dt{
width:20%;
padding: 3% 5% 0 0;
font-size:1.1vw;
font-weight: bold;
text-align: center;
}
dd{
width:80%;
padding: 3% 0;
}
input[type="text"],input[type="email"]{/*typeの指定がこれでできる*/
border: 1px solid #333;
padding:1%;
width: 80%;
background:var(--base-color);
}
textarea{
border: 1px solid #333;
width:80%;
height:40vh;
padding:1%;
background:var(--base-color);
}
input[type="submit"]{
width:20%;
font-size:1.6vw;
font-weight:bold;
margin: 0 35% 1%;
border-bottom: 3px solid var(--key-color);
}
input[type="submit"]:hover{
letter-spacing: 0.3em;
transition: 0.3s;
}
.hotei{
width:120px;
position:absolute;
bottom:20px;
right:200px;
}
/*フッター
-------------------------------------*/
footer{
width:100%;
height:10vh;
background-color:var(--sub-color);
clip-path: polygon(0 0, 95% 0, 100% 100%, 0 100%);
}
footer p{
padding-left:5%;
text-align: center;
line-height: 10vh;
}
/*トップページに戻る
--------------------------------------*/
#to-top{
width:50px;
height:50px;
position:fixed;/*ポジションを使って画面の右下に位置させる。*/
right:10px;
bottom:60px;
display:none;
z-index:10;
background:rgba(0, 84, 166, 0.8);
border-radius: 40px;

}
#to-top img{
width:100%;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin: auto;
}
#to-top.scroll{
display:block;
}


/*お問い合わせ完了ページ + 制作ページのヘッダー・フッター
---------------------------------------------------*/

.tw-header{
width:100%;
height:10vh;
background-color:var(--main-color);
}
.tw-header-outer{
width:960px;
display: flex;
justify-content: space-around;
margin:0 auto;
}
.tw-header-inner{
padding-left:20px;
width:50%;
}
.tw-header-inner>h1{
font-size:24px;
letter-spacing: 0.22em;
position: static;
border-bottom: 0;
border-left:0;
margin: 5px 0 0 0;
padding:0;
font-weight:400;
}
.tw-header-inner>p{
font-size:20px;
letter-spacing: 0.22em;
padding:0 60px;
color:var(--key-color);
font-weight:bold;
}
.tw-nav{
width:50%;
}
.tw-nav>ul{
display: flex;
justify-content: space-around;
line-height:10vh;
}
.tw-nav a{
color:#333;
font-weight: bold;

letter-spacing: 0.22em;
}
.tw-nav a:hover{
color:#333;
font-weight: bold;
border-bottom: 2px solid var(--key-color);
}
.tw-footer p{
padding-left:0;
}
/*お問い合わせ完了ページのメイン
---------------------------------------------------*/
.thanks-main{
width:100%;
height:80vh;
background-color:var(--sub-color);
clip-path: polygon(100% 0%, 90% 50%, 100% 100%, 0 100%, 10% 50%, 0 0);
padding-top:8%;
z-index: 100;
}
.thanks-inner{
margin: 0 auto;
max-width:700px;
height:50vh;
background-color:rgba(255,255,255,0.7);
padding:10% 8%;

clip-path: polygon(10% 0, 100% 0, 100% 90%, 90% 100%, 0 100%, 0 10%);
}
.thanks-inner>h2{
font-size:32px;
margin-bottom: 40px;
border-left:20px solid rgba(0, 84, 166, 0.58);
border-bottom: 5px solid var(--key-color);
padding-left:10px;
padding-bottom:10px;
}
.thanks-inner p{
font-size:15px;
padding-left:20px;
}
.tw-footer{
clip-path: polygon(100% 0%, 100% 100%, 0 100%, 0 0);
background-color:var(--main-color);
}

.odoriko{
width:142px;
height:142px;
position:absolute;
top:40%;
right:0;
clip-path: polygon(100% 0%, 100% 55%, 100% 100%, 24% 100%, 0% 55%, 24% 0%);
z-index:-1;
}
.odoriko2{
width:142px;
height:142px;
position:absolute;
top:40%;
left:0;
clip-path: polygon(80% 0, 100% 55%, 80% 100%, 0 100%, 0% 55%, 0 0);
}

/*制作ページメイン
-----------------------------------------------*/
.ws-main{
width:100%;
height:auto;
position:relative;
z-index:10;
}
.ws-shape{
width:100%;
height:107.1%;
clip-path: polygon(0% 0%, 0% 100%, 5% 100%, 5% 8%, 100% 0, 100% 100%, 5% 97%, 5% 100%, 100% 100%, 100% 0%);
background-color:var(--sub-color);
position:absolute;
top:-100px;
z-index:-10;
}

.ws{
max-width:960px;
height:100%;
margin:100px auto;
}
.ws>h2{
font-size:42px;
text-align: center;
letter-spacing:0.5em;
margin-bottom:100px;
}
.sub-title{
font-size:18px;
letter-spacing:0.2em;
text-align: center;
text-decoration: underline #a4d1fd;
text-decoration-thickness:7px;
text-decoration-offset:10px;
border-bottom: 1px dashed var(--key-color);
margin:0 60px 80px;
}
.ws-wrapper{
display:grid;
grid-template-columns:repeat(3,1fr);
grid-gap:40px;
}
.ws-box{
margin:10px 10px 40px;
padding:10px;
transition: 0.3s;
border-radius: 5px;
transition: 0.3s;
}
.ws-box:nth-of-type(odd){
background-color:var(--sub-color);
}
.ws-box>h3{

}
.ws-txt{
font-size:12px;
padding:5px;
text-align: center;
line-height: 3;
}
.ws-txt a{
color:var(--key-color);
}
.ws-fancy{
margin-bottom: 10px;
}
.ws-box:hover{
box-shadow: 0 0 3px var(--key-color);
transform: scale(1.3, 1.3);
}
.ws h3{
font-size:15px;
text-align: center;
}

/*サイズを変更する際の指定*/
.fancybox-slide--iframe .fancybox-content {
width  : 960px;
height : 600px;
max-width  : 100%;
max-height : 100%;
margin: 0;
}

/*.banner{
height:100vh;
background-color:var(--main-color);
}*/

.certi{
height:100vh;
background-color:var(--sub-color);
text-align: center;
}