/*================================================*/
/*　
　　 個別サイズ指定
*/
/*================================================*/
#wrap1{ width: 60%; float: left; margin: 40px 30% 60px 10%;}
#wrap2{ width: 55%; float: right; margin: 80px 10% 100px 40%;}
#wrap3{ width: 70%; float: left; margin: 20px 10% 80px 20%;}

#wrap4{ width: 60%; float: left; margin: 10px 10% 100px 0%;}
#wrap5{ width: 50%; float: right; margin: 40px 15% 100px 15%;}
#wrap6{ width: 60%; float: left; margin: 20px 20% 80px 0%;}

#wrap7{ width: 50%; float: right; margin: 20px 5% 100px 0%;}
#wrap8{ width: 65%; float: left; margin: 20px 5% 100px 5%;}
#wrap9{ width: 60%; float: right; margin: 20px 0% 60px 15%;}

#wrap10{ width: 70%; float: left; margin: 20px 0% 60px 5%;}


#wrap11{ width: 60%; float: left; margin: 40px 10% 60px 20%;}
#wrap12{ width: 55%; float: right; margin: 80px 10% 100px 40%;}
#wrap13{ width: 70%; float: left; margin: 20px 10% 80px 20%;}

#wrap14{ width: 60%; float: left; margin: 10px 10% 100px 0%;}
#wrap15{ width: 50%; float: right; margin: 40px 15% 100px 15%;}
#wrap16{ width: 60%; float: left; margin: 20px 20% 80px 0%;}

#wrap17{ width: 50%; float: right; margin: 20px 5% 100px 0%;}
#wrap18{ width: 65%; float: left; margin: 20px 5% 100px 5%;}






@media screen and (max-width: 900px) {
#wrap1{ width: 70%; margin: 40px 30% 40px 2%;}
#wrap2{ width: 50%; margin: 60px 15% 100px 20%;}
#wrap3{ width: 70%; margin: 20px 25% 80px 1%;}
#wrap4{ width: 60%; margin: 10px 10% 100px 30%;}
#wrap5{ width: 90%; margin: 40px 5% 100px 5%;}
#wrap6{ width: 70%; margin: 20px 20% 80px 2%;}
#wrap7{ width: 50%; margin: 20px 20% 100px 0%;}
#wrap8{ width: 70%; margin: 20px 5% 100px 5%;}
#wrap9{ width: 70%; margin: 20px 2% 60px 15%;}
#wrap10{ width: 70%; margin: 40px 30% 40px 2%;}
#wrap11{ width: 50%; margin: 60px 15% 100px 20%;}
#wrap12{ width: 70%; margin: 20px 25% 80px 1%;}
#wrap13{ width: 60%; margin: 10px 10% 100px 30%;}
#wrap14{ width: 90%; margin: 40px 5% 100px 5%;}
#wrap15{ width: 70%; margin: 20px 20% 80px 2%;}
#wrap16{ width: 50%; margin: 20px 20% 100px 0%;}
#wrap17{ width: 70%; margin: 20px 5% 100px 5%;}
#wrap18{ width: 70%; margin: 20px 2% 60px 15%;}


}
@media screen and (max-width: 600px) {
#wrap1, 
#wrap2,
#wrap3,
#wrap4,
#wrap5,
#wrap6,
#wrap7,
#wrap8,
#wrap9, 
#wrap10, 
#wrap11, 
#wrap12,
#wrap13,
#wrap14,
#wrap15,
#wrap16,
#wrap17,
#wrap18,
#wrap19{ width: 90%; float: left; margin: 40px 5%;}
}



/*================================================*/
/*　
　　 全体指定
*/
/*================================================*/

/*-- 全体 -----------*/
.mainST .contBox { position: relative;}

/*-- ボックスフェードイン -----------*/
.mainST > .cont{ padding-top: 20px; opacity: 0.6; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s;}
.mainST > .cont.setView{ padding-top: 0px; opacity: 1;}

@media screen and (max-width: 600px) {
.mainST > .cont{ padding-top: 40px;}
}


/*-- 枠 -----------*/
.mainST .itemBox{ display: block; float: left; position: relative; cursor: pointer;}
@media screen and (min-width: 801px){
.mainST .itemBox:hover{ box-shadow: 0 2px 40px #ccc;}
}

@media screen and (max-width: 800px) {
.mainST .itemBox{ box-shadow: 0 2px 20px #ddd;}
}

.mainST .itemBox::after{ width: 100%; height: 3px; content: ""; position: absolute; bottom: 0; left: 0; 1; -webkit-transition: 0.4s; -moz-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; animation: STitem_line 6s ease-in normal infinite;}

@keyframes STitem_line {
0% { width: 0%;}
40%{ width: 100%;}
49%{ width: 100%; left: auto; right: 0;}
50%{ width: 100%; left: auto; right: 0;}
90%{ width: 0%;}
99%{ width: 0%; left: 0; right: auto;}
100%{ width: 0%; left: 0; right: auto;}
}








/*================================================*/
/*　
　　 個別
*/
/*================================================*/
/*-- タイトル -----------*/
#stTit { width:70%; float:left; margin: 50px 15%;}
#stTit > *{ width: 100%; float:left;}
#stTit h2{ text-align: center; position: relative;}
#stTit h2 span{ display: inline-block; font-size: 20px; padding: 4px 30px; border-radius: 50px; border:solid 1px #000; background: #fff;}
#stTit h2::after{content: ""; width: 0%; height: 2px; background: #000; position: absolute; left: 50%; top: 50%; z-index: -1; transition: 1.2s;}
#stTit.setView h2::after{ width: 100%; left: 0;}

#stTit ul{ margin: 80px 0 50px;}
#stTit ul li{ width: 33%; float: left; display: inline-block;}
#stTit ul li a{ display: block; text-align: center; position: relative;}
#stTit ul li a img{ width: 50%; height: auto; margin: 0 25%; animation: margarine linear 3s normal infinite; margin: 0px 0 0; padding-top: 30px;}
@keyframes margarine {
0% {transform: rotate(0deg);}
10% {transform: rotate(0deg);}
23% {transform: rotate(-20deg);}
25% {transform: rotate(-20deg);}
45% {transform: rotate(0deg);}
55% {transform: rotate(0deg);}
75% {transform: rotate(20deg);}
77% {transform: rotate(20deg);}
90% {transform: rotate(0deg);}
100% {transform: rotate(0deg);}
}
#stTit ul li a:hover img{ margin: -30px 0 0;}
#stTit ul li a::before{ width: 40px; height: 40px; position: absolute; left: 50%; bottom: 20px; margin-left: -20px; border-radius: 100%; border: solid 1px #000; content: "VIEW"; z-index: 10; font-size: 12px; line-height: 40px; opacity: 0; transition: 0.4s;}
#stTit ul li a:hover::before{ color: #000; opacity: 1; bottom: -30px;}
#stTit p{ font-size: 18px; line-height: 2.0em; margin: 20px 0; text-align: center;}


@media screen and (max-width: 1000px) {
#stTit { width:90%; float:left; margin: 50px 5%;}
}
@media screen and (max-width: 600px) {
#stTit h2 span{ font-size: 3.4vw; padding: 4px 20px;}
#stTit ul{ margin: 30px 0 50px;}
#stTit ul li a img{ width: 90%; margin: 0 5%; padding-top: 0px;}
#stTit p{ font-size: 14px; line-height: 1.6em; margin: 0px 0;}
#stTit p img{ margin-bottom: 0px !important;}

}


/*-- 画像 -----------*/
.mainST .STitem{ position: relative;}


.mainST .STitem .left{ width: 100%; float: left; margin-bottom: 15px;}
.mainST .STitem .left span{ display: block; overflow: hidden; border:solid 1px #ccc;}
.mainST .STitem .left span img{ width: 100%; height: auto; -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition:0.6s; transition: 0.6s;}
@media screen and (min-width: 601px) {
.mainST .STitem:hover .left span img{transform:scale(1.1, 1.1); -webkit-transition: 1.1s; -moz-transition:1.1s; -o-transition:1.1s; transition:1.1s;}
}
@media screen and (max-width: 600px) {
}
/*-- 文字 -----------*/
.mainST .STitem .right{ width: 100%; float:left; padding: 0px 20px 40px;}
.mainST .STitem .right > *{ width: 100%; float:left;}
.mainST .STitem .right h3{ font-size: 24px; margin: 15px 0 4px; padding-left: 10px; font-weight: bold;}
.mainST .STitem .right h3 span{ display: inline-block; padding: 0 15px; font-size: 17px;}
.mainST .STitem .right h3 span::before{ content: "(";}
.mainST .STitem .right h3 span::after{ content: ")";}
.mainST .STitem .right .spr{ width: auto; font-size: 14px; border-radius: 20px; background: #000; color: #fff; padding-left: 15px;}
.mainST .STitem .right .spr span{ color: #ccc; display: inline; font-size: 14px; line-height: 1em; vertical-align: baseline; padding-right: 10px;}

.mainST .STitem .right .spr.s{ background: #276483}
.mainST .STitem .right .spr.f{ background:#7a6005;}
.mainST .STitem .right .spr a{color: #fff; text-decoration: none; padding: 4px 20px 4px 5px; display: inline-block;}
.mainST .STitem .right .spr a:hover{ text-decoration: underline;}
.mainST .STitem .right .spr img{ width: 40px; height: auto; display: inline-block; padding-right:6px; margin-top: -8px;}
.mainST .STitem .right .txt{ font-size: 14px; line-height: 2em; padding-left: 10px;}

@media screen and (max-width: 800px) {
.mainST .STitem .right{ padding: 0px 10px 40px;}
.mainST .STitem .right .spr{ font-size: 12px;}
.mainST .STitem .right .spr img{ width: 30px; margin-top: -8px;}
.mainST .STitem .right h3{ font-size: 20px;}
.mainST .STitem .right h3 span{ display: block; padding: 0 0; font-size: 15px; color: #777;}

.mainST .STitem .right .txt{ line-height: 1.8em;}

}

@media screen and (max-width: 600px) {
.mainST .STitem .right{ padding: 0px 6px 110px;}
.mainST .STitem .right .spr{ font-size: 11px; margin-left: 10px;}
.mainST .STitem .right .spr img{ width: 24px;}
.mainST .STitem .right h3{ font-size: 18px; margin:25px 0px 15px;}
.mainST .STitem .right .txt{ line-height: 1.6em; color: #666;}

}

/*-- LEARN MOREのSVG -----------*/
/*枠指定と回転*/
.mainST .STitem .svg{ opacity:0; width: 140px; height: 140px; position: absolute; right: -60px; bottom: 10px; -webkit-transition: 0.2s; -moz-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s;}

.mainST .STitem:hover .svg{ opacity: 1; -webkit-transition: 0.4s; -moz-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; animation: svgmore_waku 20s ease-in normal infinite;}

@keyframes svgmore_waku {
0% {transform: rotate(0deg);}
100%{transform: rotate(360deg);}
}
/*SVGとアニメーション*/
.mainST .STitem .svg svg{ width: 100%; height: auto;}
@media screen and (min-width: 601px) {
.mainST .STitem:hover .svg{ opacity: 1; -webkit-transition: 0.4s; -moz-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; animation: svgmore_waku 20s ease-in normal infinite;}

@keyframes svgmore_waku {
0% {transform: rotate(0deg);}
100%{transform: rotate(360deg);}
}

.mainST .STitem:hover .svg svg{ stroke: #111; stroke-width: 2px; animation: svgmore 8s ease-in normal infinite; stroke-dashoffset: 2000px; stroke-dashoffset: 2000px;}
@keyframes svgmore {
0% { stroke-dasharray: 2000px; stroke-dashoffset: 2000px;}
30%{ stroke-dashoffset: 0;}
40%{ stroke-dashoffset: 0;}
90%{stroke-dashoffset: -2000px; stroke-dashoffset: -2000px;}
100%{stroke-dashoffset: -2000px; stroke-dashoffset: -2000px;}
}

}
@media screen and (max-width: 600px) {
.mainST .STitem .svg{ width: 80px; height: 80px; right: 50%; bottom: 15px; margin-right: -40px; opacity:1; animation: svgmore_waku 20s ease-in normal infinite;}}
@keyframes svgmore_waku {
0% {transform: rotate(0deg);}
100%{transform: rotate(360deg);}
}


.mainST .STitem .svg svg{ stroke: #111; stroke-width: 2px; animation: svgmore 8s ease-in normal infinite; stroke-dashoffset: 2000px; stroke-dashoffset: 2000px;}

@keyframes svgmore {
0% { stroke-dasharray: 2000px; stroke-dashoffset: 2000px;}
30%{ stroke-dashoffset: 0;}
40%{ stroke-dashoffset: 0;}
90%{stroke-dashoffset: -2000px; stroke-dashoffset: -2000px;}
100%{stroke-dashoffset: -2000px; stroke-dashoffset: -2000px;}
}


}


/*================================================*/
/*　
　　 モーダル
*/
/*================================================*/
.setbox {}


.setbox .head{ text-align: center;}
.setbox .head img{ width: 100%; height: auto; max-width: 900px;}

.setbox .info { margin: 50px 0 80px;}
.setbox .info h3 { width: 100%; float: left; text-align: center;}
.setbox .info h3 br { display: none;}
.setbox .info h3 > span{ display: inline-block; position: relative;}
.setbox .info h3 > span b{ display: block; font-size: 36px; letter-spacing: 8px; position: relative; padding: 10px 30px 20px; margin-bottom: 15px; line-height: 1.4em;}
.setbox .info h3 > span b::after{ width: 100%; height: 1px; position: absolute; left: 0%; bottom: 0; background: #000; content:"";}

.setbox .info h3 > span > span{ display: inline-block; padding: 2px 20px; border-radius: 50px; background: #444; color: #fff; line-height: 30px; padding: 5px 30px;}
.setbox .info h3 > span > span img{ width: 30px; height: auto; display: inline-block; margin-right: 10px; margin-top: -5px;}

.setbox .info .zairyou { width: 80%; float:left; margin: 60px 10%; padding: 30px; border-radius: 20px; background: #fff; box-shadow: 0 4px 12px #aaa;}
.setbox .info .zairyou .i{ width: 35%; display: inline-block; float:left;}
.setbox .info .zairyou .i img{border-radius: 8px;}
.setbox .info .zairyou .t{ width: 60%; display: inline-block; float: right;}
.setbox .info .zairyou .t b{ display: block; font-size: 20px; padding: 0px 0 10px;}
.setbox .info .zairyou .t, 
.setbox .info .zairyou .t a{ font-size: 18px;}

.setbox .info ul { width: 80%; float: right; margin: 50px 10%;}
.setbox .info ul li { width: 100%; float: left; margin: 25px 0;}

.setbox .info ul li > span{ display: inline-block;}
.setbox .info ul li .img{ width: 60%; float: left;}
.setbox .info ul li .img img{ width: 100%; height: auto;}
.setbox .info ul li .txt { width: 35%; float: right; margin-top: 50px; font-size: 18px;}
.setbox .info ul li .txt b{ width: auto; font-size: 22px; padding-bottom: 10px; margin-bottom: 10px; display: inline-block; border-bottom: dotted 1px #333;}

.boxClose{ width: 200px; height: 200px; padding-right: 50px; position: fixed; top: 50%; right: -400px; margin-top: -100px; background: #111; text-align: center; line-height: 200px; border-radius: 100%; box-shadow: 0 2px 6px #777; z-index: 10000000;  transition: 0.6s; cursor:pointer; font-size: 20px;}
.boxClose::before{ content: "→とじる"; color: #fff;}
.onTab .boxClose{right: -40px;}
.view .boxClose:hover{right: -20px;}




@media screen and (max-width: 1350px) {
.setbox .info h3 br { display: block;}
}
@media screen and (max-width: 1300px) {
.boxClose{ width: 150px; height: 150px; padding-right: 50px; line-height: 150px; font-size: 14px;}
}
@media screen and (max-width: 1000px) {
.setbox .head{ padding-top: 50px;}

.boxClose{ width: 80px; height: 100vh; padding-right: 0; line-height: 100vh; font-size: 14px; top: auto; bottom: 0; right:-200px;  border-radius: 0; margin-top: 0;}
.onTab .boxClose{right:0;}
.view .boxClose:hover{right:0;}

.setbox .info ul li .img{ width: 45%; float: left;}

.setbox .info ul li .txt { width: 50%; margin-top:0px; font-size: 16px;}
.setbox .info ul li .txt b{ font-size: 20px;}
}

@media screen and (min-width: 801px) and (max-width: 1000px) {
.boxClose::before{ display: block; content: "↓close"; color: #fff; -moz-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); -o-transform: rotate(-90deg); -ms-transform: rotate(-90deg); font-size: 20px; margin-left:-15px; }
}

@media screen and (max-width: 800px) {
.boxClose{ width: 100%; height: 80px; line-height: 40px; padding-bottom: 40px; right:0px; top: auto; bottom: 0;}
.boxClose::before{ content:"× とじる";}
.setbox .info { margin: 20px 0 120px;}
.setbox .info h3 > span b{ font-size: 32px;}

.setbox .info .zairyou { width:94%; margin: 40px 3%; padding: 15px; border-radius: 15px; box-shadow: 0 4px 8px #aaa;}
.setbox .info ul { width: 98%; float: right; margin: 50px 1%;}
}

@media screen and (max-width: 600px) {
.setbox .info h3 > span b{ font-size: 26px; padding: 0px 30px 10px;}
.setbox .info h3 > span > span{ font-size: 13px; padding: 0px 30px;}
.setbox .info h3 > span > span img{ width: 24px;}

.setbox .info .zairyou .t a{ font-size: 16px;}

.setbox .info ul li .img{ width: 100%; margin-bottom: 20px;}
.setbox .info ul li .img img{ border-radius: 4px;}
.setbox .info ul li .txt { width: 100%; font-size: 16px; line-height: 1.4em;}
.setbox .info ul li .txt b{ width: 100%; padding-bottom: 10px; margin-bottom: 10px;}

}



/*================================================*/
/*　
　　 2.html
*/
/*================================================*/
#draft.tab-btn{ position: static !important; height: auto !important;}
#draft h1{ margin: 30px 0 ; text-align: center; font-size: 30px;}
#draft h1 a{ font-size: 20px;}
#draft .tab-btn{}
#draft .tab-btn li{ width: 21%; float: left; line-height: 30px; padding: 0 20px; border-radius: 30px; border:solid 1px #ccc; margin: 5px 2%;}
#draft .tab-btn li.view{ background: #000; color: #fff;}

#draft .box{ display: none;}
#draft .box.view{ display: block;}

@media screen and (max-width: 900px) {
#draft .tab-btn li{ width: 31%; font-size: 2.4vw; padding: 0 5%; margin: 5px 1%;}
}