@charset "UTF-8";

img{ width:100%;}
html { font-size:62.5%;/* 10px */}
body { font-size:1.4rem;line-height:1.5; background:linear-gradient(to bottom, rgba(135,95,56,0.7) 0%,  rgba(123,54,0,0.7) 80%), url(/special/bootcamp2020/_img/bodyBg.jpg);}

/*========================[ common  ]========================*/
/*-----  Font 設定 -------*/
/*
h1{ font-size: 36px; font-size: calc(2.4rem + ((1vw - 0.64rem) * 2));  line-height: 1.3; color:#300;}
h2{ font-size: 24px; font-size: calc(1.8rem + ((1vw - 0.64rem) * 1.2)); font-weight:bold; line-height: 1.3; color:#fff;}
*/
h1,h2{font-size:0;}
h3{ font-size: 22px; font-weight:bold; line-height: 1.3; color:rgba(123,54,0,1)}
h3{ border-bottom:solid 2px #363; border-left:solid 4px #363; margin:3rem 3rem 1rem; padding:1rem;}
h4{ font-size: 16px; font-weight:bold; line-height: 1.3; color:rgba(123,54,0,1); border-bottom:solid 2px #363; margin:1rem; padding:0.5rem;}
/* calc( 基準サイズ ((1vm -  [ビューポートの幅の最小値/100] ) * [100 * フォントサイズの差 / ビューポートの幅の差] ) ) */


ul.dotsterList{ width:90%; margin:0 auto; margin-bottom:3%; background:#e9ddc2; border:dashed 2px #9e0000; border-radius:9px; padding:0.5em 0.5em 0.5em 2em; }
ul.dotsterList li{ position:relative; line-height:1.5; padding:0; }
ul.dotsterList li:after{ display:block; content:'※'; position:absolute; top:0; left:-1em; width:8px; height:3px; }
.f-red{ color:#f00;}
.f-broun{ color:#900;}

/*========================[ seciton  ]========================*/
#content{width:100%; padding:0; background:rgba(255,255,255,0.9) }
#main{ margin:0 auto; padding:4.5rem 0 0; max-width:920px;}
.inner{ padding-top: 4.5rem; margin-top:-4.5rem; }
/*------------------------------------------------*/
/* header{} */
/* #headers{ width:100%; max-width:1000px; height:auto; max-height:593px; margin:0 auto; position:relative; } */
/* #headers:before{ content: ""; display: block; padding-top:59.3%;} */
#headers h1{display:none;}
/* #headers .topImg{ position:absolute; top:0; left:0;} */
#headers .topImg img{ width: 100%;}
#headers .eventLogo{ position:absolute; top: 16vw; left: 51.5%; transform: translateX(-50%); max-width: 542px; width: 40vw;}
#headers .eventDay{ position:absolute; top: 36vw; left: 50%; transform: translateX(-50%); max-width:500px; width: 36vw;}
/* #headers .itemCard{ position:absolute; bottom:10%; left:0; padding:0 0.6% 0 70%;} */

/*------------------------------------------------*/
.event-info { position: absolute; z-index: 10; right: 25px;top: 73px; max-width: 338px;width: 36vw;}
/*------------------------------------------------*/
.event-banner { position: absolute; z-index: 10; right: 21px;top: 40.5vw; max-width: 338px; width: 25vw;}

/*--------------------------------------------*/
nav{ position: sticky; top: 0;  z-index:500;}
nav .navList{ display:flex; justify-content: space-between; align-items: center; padding:1rem; text-decoration:none; background:rgba(51,0,0,1);}
nav .navList li{ height:100%; line-height:1.4rem; border-radius:0.5rem; background:rgba(255,255,255,0.15);}
@media screen and (min-width: 71.42rem) { nav .navList li a{ padding: 1rem; font-size:1.4rem;} }
@media screen and (max-width: 71.42rem) { nav .navList li a{ padding: 1rem; font-size: calc(1rem + ((1vw - 0.64rem) * 0.7));} }
nav .navList li:nth-child(8) a,
nav .navList li:nth-child(9) a{ padding:1.7rem 1rem; }
nav .navList li:nth-child(2) ,
nav .navList li:nth-child(3) ,
nav .navList li:nth-child(4) {background:rgba(153,52,0,1);}
nav .navList li a{ text-decoration:none; display:block; color:#fff;}
nav .navList span::before{ content: "\A"; white-space: pre;}
/*--------------------------------------------*/
/*------------------------------------------------*/
.BeforeAfter{ max-width:773px; margin:0 auto;}
.progrm{ max-width:810px; height:auto; margin:0 9.9% 2rem; position:relative; padding:0; z-index:1;}
.progrm:before{ content: ""; display: block; padding-top:40%;}
.labLeft{ position:absolute; top:0; left:0; padding:0 75.06% 0 0;}
.labRight1{ position:absolute; top:0; left:0; padding:0 0 0 25.92%;}
.labRight2{ position:absolute; top:23%; left:0; padding:0 0 0 25.92%;}
.labRight3{ position:absolute; top:47%; left:0; padding:0 0 0 25.92%;}
.labBar{ position:absolute; bottom:0; left:0; padding:0 18.95%;}
.labPoint{ position:absolute; bottom:0; right:0; padding:0 0 0 50.86%;}
.gimPickup{ width:100%; border-radius:0.8rem; background:#fc6; padding:1rem; margin:2rem 0;}
.itemImg{ max-width:68px;margin:0 auto}
/*------------------------------------------------*/
.bp1{padding-bottom:1rem;}
.bp2{padding-bottom:2rem;}
.bp4{padding-bottom:4rem;}
.bm2{margin-bottom:2rem;}
.w496{ max-width:496px;margin:0 auto}
.w440{ max-width:440px;margin:0 auto}
.w390{ max-width:390px;margin:0 auto}
.w309{ max-width:309px;margin:0 auto}
.w267{ max-width:267px;margin:0 auto}
.w350{ max-width:350px;margin:0 auto}
.barMenuImg{ max-width:789px; margin:0 auto;}
.mLR3{margin:0 3rem;}

/*------------------------------------------------*/
.twoClom { display:flex; justify-content: space-around; align-items: top; }
.picupBox{width:100%; max-width:780px; min-height:100px; margin:0 auto 3rem; border: solid 3px #800000; border-radius:0.8rem; background:url(/special/bootcamp2020/_img/decoImg.png) no-repeat bottom;}
.picupBox h5{width:100%; max-width:540px; margin:2rem auto 1rem;}
.picupBox .bottomBox{width:100%; max-width:540px; margin:2rem auto 1rem;}


.card{ display:flex; flex-wrap:wrap;justify-content: center; align-items:top; padding:1rem 3rem;}
.card li{ flex-basis:30%; border-radius:0.5rem; background:rgba(255,255,255,0.8); padding:1%; margin:0.5%;}
.card li h4{font-size:1.4rem; font-weight:bold;     padding: 2px 6px; background:rgba(135,95,56,0.3);}
table{ width:100%; margin:3rem auto;  border-collapse: separate;  border-top:1px solid #800000;  border-right:1px solid #800000;}
table th{ padding:1rem; border-bottom:1px solid #ccc; border-left:1px solid #ccc; background: #A0522D; color:#fff;}
table th dl{ text-align:left;}
table th dl dl{ font-size:018rem;}
table th dl dd{ background: rgba(255,255,255,0.1); border-radius:0.8rem; padding:0.5rem; margin:0.2rem;}
table th dl.tol{ display:flex; flex-wrap:wrap;}
table th dl.tol dd{ width:40%;}
table td{ padding:1rem; border-bottom:1px solid #800000; border-left:1px solid #800000; vertical-align: top;}
table td img{ max-width:75px;}
caption{font-weight:bold; font-size:1.6rem; border-top:2px solid #800000; padding:1rem 0;color:#800000;}

.card2{ display:flex; justify-content: space-between; align-items:top; padding:1rem 0;}
.card2 li{ flex-basis:32%; border-radius:0.5rem; background:rgba(255,255,255,0.8); padding:1%; margin:0.5%; text-align:center;}
.card2 li h4{font-size:1.5rem; font-weight:bold; padding:0.2rem; background:rgba(135,95,56,0.3);}
.card2 li img{max-width:75px;}

.atendBox{padding:1rem 1rem 2rem;}
.atendBox p{border-bottom:solid 1px rgba(135,95,56,1);}
.atendBox ul li{padding-left:1.5rem;}

/*------------------------------------------------*/
footer{ background: linear-gradient(rgba(81,17,18,1) , rgba(108,32,33,1) );}
footer .copy{ width:100%; max-width:1000px; margin:0 auto; padding:3rem 0; color:#fff;}
footer .o-contents__inner{max-width:1000px; margin:0 auto; }

#page_top{width: 40px; height: 40px; position: fixed; right: 0; bottom: 10px; background: #961818; opacity: 0.6; }
#page_top a{ position: relative; display: block; width: 40px; height: 40px; text-decoration: none; }
#page_top a::after{ content: '▲'; font-size: 14px; font-weight: bold; color: #fff; position: absolute; top: 10px; bottom: 0; right: 0; left: 0; margin: auto; text-align: center; }


@media screen and (max-width: 51rem) {/* 736px以下*/
	nav .navList{ display:flex; flex-wrap: wrap; padding:0.5rem;}
	nav .navList a{ padding:0.5rem;}
	nav .navList li{ width:calc(100%/3);line-height:1rem; border-radius:0; border-bottom:solid 1px #fff;}
	nav .navList li:nth-child(8) a,
	nav .navList li:nth-child(9) a{ padding:1.5rem 1rem; }
	nav .navList li:nth-child(2) ,
	nav .navList li:nth-child(3) ,
	nav .navList li:nth-child(4) { background:rgba(255,255,255,0.15);}
	ul.dotsterList{ width:85%;}
	h2{ font-size: 20px; border-left: solid 5px rgba(135,95,56,1); border-bottom: solid 3px rgba(135,95,56,1);}
	.h2Img{display:none;}
	.twoClom { display:block; margin:0 auto; padding:1rem;}
/*h3{ font-size: 18px;}*/
}
@media screen and (max-width: 26rem) {/* 416px以下*/

}