@charset "utf-8";
.greeting:after,.news:after,.flow .f2+li ol:after{content:"";display:block;clear:both}
#mv{
position:relative;z-index:100;max-width:1200px;margin:22px auto 2% auto;font-feature-settings: "palt" 1;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
box-sizing: border-box;
padding: 0 10px;
}
#mv .content{
position:relative;
width: 100%;
padding:44% 0 0;
margin-bottom:1%
}

#mv .content .catch{
position: absolute;
top: 0;
left: 0;
display: flex;
flex-wrap: wrap;
box-sizing: border-box;
border: 4px solid #eee;
width: 100%;
height: 100%;
}

#mv .catch img{
max-width: 100%;
vertical-align: top;
}

#mv .catch > div{
box-sizing: border-box;
width: 50%;
padding:1%;
}

#mv .catch > div:last-child{
padding:1% 2% 1% 1%;
}

#mv .catch ul{
color: #036;
line-height: 2;
font-size: min(1.8vw, 1.4rem);
list-style: none;
}

#mv .catch li{
position: relative;
text-align:justify;
}

#mv .catch li::before{
content: "▶";
display: inline-block;
background-color: #036;
color: #fff;
border-radius: 3px;
width: 1em;
height: 1em;
padding: 0.4em 0.7em;
line-height: 1;
margin-right: 0.3em;
font-size: 50%;
transition: all 0.2s ease-in-out;
}

#mv .catch li:nth-child(4)::before,
#mv .catch li:nth-child(5)::before{
background-color: #f11;
}

#mv .catch li:hover::before{
opacity: 0.6;
}

#mv .catch li a{
position: relative;
z-index: 10;
display: inline-block;
transition: all 0.2s ease-in-out;
}

#mv .catch li a:link,
#mv .catch li a:visited{
border-bottom: 1px solid #036;
color: #036;
}

#mv .catch li:nth-child(4) a:link,
#mv .catch li:nth-child(4) a:visited,
#mv .catch li:nth-child(5) a:link,
#mv .catch li:nth-child(5) a:visited{
border-bottom: 1px solid #F11;
color: #F11;
}

#mv .catch li a:hover{
opacity: 0.6;
}

#mv .catch li:nth-child(5) a::after{
content: "NEW";
position: absolute;
z-index: 1;
top: 0.3em;
right: -4.3em;
display: inline-block;
background-color: #e00;
color: #fff;
border-radius: 4px;
padding: 0.4em 0.6em;
line-height: 1;
font-family: Arial, Helvetica, "sans-serif";
font-size: 0.75rem;
font-weight: bold;
animation:new2 1s ease-in-out infinite;
}

@keyframes new2{
	0%{
	background-color: #f99;
	}
	50%{
	background-color: #e00;
	}
	100%{
	background-color: #f99;
	}
}

#mv .catch .r6do{
position: relative;
overflow: hidden;
margin:2% 0 0 0;
line-height: 1.3;
font-size: 1.2rem;
text-align: left;
transition: opacity 0.2s ease-in-out;
}

#mv .catch .r6do::before{
content: "NEW";
position: absolute;
top: 0;
right: -1.5em;
display: inline-block;
background: #fff;
color: #F04649;
transform: rotate(30deg);
padding: 0.2em 2em 0.2em 2.5em;
font-size: 0.7em;
font-weight: bold;
animation:new 1s ease-in-out infinite;
}

@keyframes new{
	0%{
	background-color: #fff;
	}
	50%{
	background-color: #FFFE44;
	}
	100%{
	background-color: #fff;
	}
}

#mv .catch .r6do strong{
font-size: 1.1em;
font-weight: 500;
text-decoration:underline;
text-decoration-thickness:2px;
letter-spacing: 0.07em;
}

#mv .catch .r6do a{
display: block;
background-color: #F04649;
padding: 0.7em 1.4em 0.8em 1.4em;
}

#mv .catch .r6do a:link,
#mv .catch .r6do a:visited{
color: #fff;
}

#mv .catch .up{
color: #036;
margin:1.5% 0 1.5% 0;
font-size: 1.6rem;
letter-spacing: 0.07em;
line-height: 1.2;
text-align: center;
}

#mv .catch .up strong{
letter-spacing: 0.3em;
font-size: 1.3em;
text-decoration:underline;
text-decoration-thickness:3px;
}

#mv .catch .up a{
display: block;
border: 3px solid #036;
padding: 0.35em 1em 0.45em 1em;
transition: all 0.2s ease-in-out;
}

#mv .catch .up a:link,
#mv .catch .up a:visited{
color: #036;
}

#mv .catch .r6do:hover,
#mv .catch .up a:hover{
opacity: 0.6;
}



@media all and (max-width: 1197px) {

#mv{
padding: 0 0.836vw;
}

#mv .catch .r6do{
font-size: 1.61vw;
}

#mv .catch .up{
font-size: 2.14vw;
}


}


#mv .early{
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
box-sizing: border-box;
background-color: #FFF0E0;
margin: 2% 0 0 0;
padding:1% 1.93% 1.5% 1.93%;
line-height: 1.3;
}


#mv .early strong{
margin-bottom: 0.7%;
font-size: 1.567rem;
letter-spacing: 0.1em;
font-weight: 700;
text-align: center;
}

#mv .early a{
justify-content: center;
align-items: center;
flex-direction: column;
background: #F70;
border-radius: 0.3em;
padding:0.3em 1em;
line-height: 1.2;
font-size: 1.4rem;
font-weight: 500;
text-align: center;
transition: all 0.2s ease-in-out;
}

#mv .early a strong{
font-size: 1.5em;
}


#mv .early a:link,
#mv .early a:visited{
color: #fff;
text-decoration: underline;
text-decoration-color: #F70;
}

#mv .early a:hover{
opacity: 0.7;
}

#mv .early a:link span,
#mv .early a:visited span{
color: #F00;
}


#mv .r6re{
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
background-color: aliceblue;
border: 2px solid #36C;
width: 39%;
padding:2%;
}

#mv .r6re a{
height: 100%;
letter-spacing: 0.1em;
transition: all 0.3s ease-in-out;
}

#mv .r6re a:hover{
opacity: 0.7;
}

#mv .r6re h2{
margin-bottom: 0.5em;
line-height: 1.3;
text-align: center;
font-size: 1.3rem;
}

#mv .r6re p{
text-align: center;
width: 100%;
line-height: 1.3;
font-size: 1.3rem;
}

#mv .r6re p a{
position: relative;
display: block;
padding: 0.7em 0;
}

#mv .r6re p:nth-child(1){
margin-bottom: 1%;
line-height: 1;
font-size:0.9rem;
}

#mv .r6re p:nth-child(1) a{
line-height:1;
}

#mv .r6re p:nth-child(1) span{
display: inline-block;
}

#mv .r6re p:nth-child(1) span:first-child{
letter-spacing: 0.3em;
}
#mv .r6re p:nth-child(1) span:nth-of-type(2){
margin: 0.2em 0 0.2em 0;
font-size:2.6rem;
font-weight: 700;
letter-spacing: 0.25em;
}
#mv .r6re p:nth-child(1) span:last-child{
font-size:1.2rem;
letter-spacing: 0.4em;
font-weight: 700;
}


#mv .r6re p:nth-child(1) a:link,
#mv .r6re p:nth-child(1) a:visited{
background:#ff6601;
color: #fff;
border: 2px solid #ff6601;
}

#mv .r6re p:nth-child(2) a:link,
#mv .r6re p:nth-child(2) a:visited{
background-color: #36c;
color: #fff;
}
/*
#mv .r6re p:nth-child(1) a::after{
content: "NEW";
position: absolute;
z-index: 1;
top: -0.7em;
right: -0.5em;
display: inline-block;
background-color: #e00;
color: #fff;
border-radius: 4px;
padding: 0.4em 0.6em;
line-height: 1;
font-family: Arial, Helvetica, "sans-serif";
font-size: 0.75rem;
font-weight: bold;
animation:new2 1s ease-in-out infinite;
}
*/

@media all and (max-width: 1197px) {

#mv .early strong{
font-size: 2.1vw;
}

#mv .early a{
font-size: 1.6vw;
}

#mv .r6re h2{
font-size:2vw;
}

#mv .r6re p{
font-size:1.7vw;
}

}




#mv .shikaku{
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
background-color: #FFFAF9;
border:1px solid #ddd;
width:39%;
padding:2%;
}

#mv .shikaku::before,
#mv .shikaku::after{
content: "";
position: absolute;
display: block;
width: 1em;
height: 1em;
}

#mv .shikaku::before{
top:-1px;
left:-1px;
border-top: 3px solid #FCC738;
border-left: 3px solid #FCC738;
}

#mv .shikaku::after{
right:-1px;
bottom:-1px;
border-right: 3px solid #FCC738;
border-bottom: 3px solid #FCC738;
}

#mv .shikaku h2{
color:#C52803;
margin-bottom: 0.4em;
font-size: 1.45rem;
font-weight: 600;
text-align: center;
}

#mv .shikaku h2 span{
font-size: 82%;
}

#mv .shikaku p{
background-color:#C52803;
color: #fff;
border-radius: 5px;
width: 100%;
padding: 0.3em 0 0.4em 0;
line-height: 1;
font-size: 0.95rem;
font-weight: 600;
text-align: center;
}

#mv .shikaku ul{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
font-size: 1rem;
list-style: none;
}

#mv .shikaku li{
width: 31%;
margin-top: 3.5%;
}

#mv .shikaku a{
position: relative;
display: block;
background-color: #fff;
border-radius: 4px;
border-style: solid;
border-width: 3px;
padding: 0.3em 1.5em 0.3em 0;
font-weight: 600;
text-align: center;
}

#mv .shikaku li:nth-child(1) a,
#mv .shikaku li:nth-child(4) a{
border-color:#D95D62;
}
#mv .shikaku li:nth-child(2) a,
#mv .shikaku li:nth-child(5) a{
border-color:#3B893A;
}
#mv .shikaku li:nth-child(3) a,
#mv .shikaku li:nth-child(6) a{
border-color:#F3823C;
}

#mv .shikaku a:link,
#mv .shikaku a:visited{
color: #333;
}

#mv .shikaku a::after{
content: "▶";
position: absolute;
right: 0.5em;
top:0;
bottom: 0;
margin: auto 0;
color: #fff;
border-radius: 50%;
width: 1em;
height: 1em;
padding: 0.8em;
font-size: 50%;
line-height: 1;
}

#mv .shikaku li:nth-child(1) a::after,
#mv .shikaku li:nth-child(4) a::after{
background-color:#D95D62;
}
#mv .shikaku li:nth-child(2) a::after,
#mv .shikaku li:nth-child(5) a::after{
background-color:#3B893A;
}
#mv .shikaku li:nth-child(3) a::after,
#mv .shikaku li:nth-child(6) a::after{
background-color:#F3823C;
}

#mv .buttons{
display: flex;
flex-direction: column;
justify-content: space-between;
width: 19%;
}

#mv .buttons p{
display: flex;
height: 31%;
font-size:min(1.6vw, 24px);
}

#mv .buttons a{
display: flex;
justify-content: center;
align-items: center;
border-radius: 3px;
width: 100%;
transition: all 0.2s ease-in-out;
}

#mv .buttons p:nth-child(1) a{
background-color:#d95d62;
color: #fff;
}

#mv .buttons p:nth-child(2) a{
background-color:#3b893a;
color: #fff;
}

#mv .buttons p:nth-child(3) a{
background-color:#449ac2;
color: #fff;
}

#mv .buttons a:hover{
opacity: 0.7;
}


@media all and (max-width: 1197px) {

#mv .shikaku h2{
font-size: 1.9vw;
}

#mv .shikaku p{
font-size: 1.25vw;
}

#mv .shikaku ul{
font-size: 1.4vw;
}

#mv .buttons p{
font-size: 1.6vw;
}

}

@media all and (max-width: 600px) {

#mv{
flex-direction: column;
}

#mv .content{
padding-top: 0;
background-position: -19vw bottom;
background-size:97% auto;
}

#mv .content .catch{
position: static;
display: block;
}

#mv .catch > div{
width: 100%;
}

#mv .catch p{
font-size: 3.7vw
}

#mv .catch .r6do{
line-height: 1.6;
font-size: 3.2vw;
}

#mv .catch .up{
font-size: 5vw;
letter-spacing: 0;
}

#mv .catch .up a{
padding: 0.35em 0 0.45em 0;
}

#mv .catch .up strong{
font-size: 1.5em;
letter-spacing: 0;
}

#mv .catch ul{
padding-right:0;
font-size: 3.7vw;
font-weight: bold;
}

#mv .catch li:nth-child(3)::after{
top: 0;
right: -2.5em;
font-size: 9px;
}

#mv .early strong{
font-size: 4vw;
}

#mv .early a{
font-size: 5vw;
}

#mv .r6re{
display: block;
width: 100%;
margin-bottom: 1%;
padding: 3% 1%;
}

#mv .r6re h2{
width: 100%;
font-size: 4.5vw;
}

#mv .r6re p{
font-size: 4.5vw;
}

#mv .r6re p br{
display: block;
}


#mv .shikaku{
width: 100%;
padding: 3%;
margin-bottom: 1%;
}

#mv .shikaku h2{
font-size: 3.8vw;
}

#mv .shikaku h2 br{
display: none;
}

#mv .shikaku p{
font-size: 3.3vw;
}

#mv .shikaku ul{
font-size: 3.7vw;
}

#mv .shikaku li{
width: 32%;
margin-top: 2%;
}

#mv .buttons{
flex-direction: row;
justify-content: space-between;
box-sizing: border-box;
width: 100%;
padding: 2%;
}

#mv .buttons p{
width: 32%;
font-size: 3.5vw;
}

#mv .buttons a{
padding: 1.5em 0;
}

}




#primary{
width: 100%;
max-width: initial;
}

#primary h2{
position: relative;
color: #222;
border-bottom: 1px solid #ccc;
margin:0 auto 3% auto;
font-size: 2.125rem;
}

#primary h2::after{
content: "";
position: absolute;
bottom: -1px;
left: 0;
display: block;
border-bottom: 1px solid #608cbf;
width: 4em;
}

#primary #course h2,
#primary #superiority h2{
border:none;
margin-bottom: 1.5em;
font-size: 2.5rem;
text-align: center;
}


#course h2::after,
#superiority h2::after{
display: none;
}

#course h2 span,
#superiority h2 span{
position: relative;
display: inline-block;
border-bottom: 1px solid #999;
}

#course h2 span::before,
#superiority h2 span::before{
content: "";
position: absolute;
bottom: -4px;
left: 0;
display: inline-block;
border-bottom: 4px solid #608cbf;
width: 4em;
}


#course{
background-color: #F4F6F8;
padding: 4% 0 4% 0;
}

#course h2{
max-width: 1180px;
margin:0 auto 1% auto;
}



#course .content{
display:flex;
flex-wrap:wrap;
max-width: 1200px;
margin: auto;
padding: 0 10px;
}

#course .content > div{
position:relative;
background-color:#FFF;
box-shadow:0 0 8px rgba(0,0,0,0.1);
border: 1px solid #ddd;
width:32.222%;
margin:0 1.667% 0 0;
padding:1.3em;
}

#course .content > div::before,
#course .content > div::after{
content:"";
position: absolute;
width: 1em;
height: 1em;
}



#course .content > div::before{
top:-1px;
left: -1px;
display: block;
border-top:4px solid;
border-right: none;
border-left:4px solid;
border-bottom: none;
}

#course .content > div::after{
right:-1px;
bottom: -1px;
display: block;
border-top: none;
border-right:4px solid;
border-bottom:4px solid;
border-left: none;
}

#course .content .kenchiku{
border-color:#f99ea2;
}
#course .content .kenchiku::before,
#course .content .kenchiku::after{
border-color:#d95e62;
}

#course .content .doboku{
border-color:#7bc97a;
}
#course .content .doboku::before,
#course .content .doboku::after{
border-color:#3b893a;
}

#course .content .kankouji{
border-color:#fbc29d;
}
#course .content .kankouji::before,
#course .content .kankouji::after{
border-color:#f3823d;
}


#course .content > div:nth-child(3){
margin:0
}

#course h3{
color:#FFF;
line-height:2;
text-align:center;
font-size: 2rem;
}

#course p{
font-size: 1.5rem;
text-align:center;
}

#course h3 + p{
padding:13px 0;
}

#course .content div p:nth-child(3){
margin-bottom: 1em;
line-height:1.2;
font-size:1rem;
}

#course .content div p:nth-child(3) a{
position: relative;
box-sizing: border-box;
border-radius:4px;
width: 100%;
text-align: center;
transition: all 0.2s ease-in-out;
}

#course .content div p:nth-child(3) a small{
font-size: 0.9em;
}

#course .content div p:nth-child(3) a span{
letter-spacing: 0.1em;
}

#course .content div p:nth-child(3) a{position:relative;display:block;padding:0.9em 1.3em 1em 0}
#course .content div p:nth-child(3) a:link,#course .content div p:nth-child(3) a:visited{color:#004F7C;border:2px solid #004F7C;}
#course .content div p:nth-child(3) a:hover{
background-color: #004F7C;
color: #fff;
}

#course .content div p:nth-child(3) a:before,
#course .content div p:nth-child(3) a:after{
content:"";
position: absolute;
top: 50%;
transition: all 0.2s ease-in-out;
}

#course .content div p:nth-child(3) a:before{
right:0.5em;
display:block;
transform: translateY(-50%);
background-color:#004F7C;
border-radius:50%;width:1em;height:1em;}

#course .content div p:nth-child(3) a:after{
right:0.85em;
display:block;
transform:translateY(-50%) rotate(45deg);
border-top:2px solid #fff;border-right:2px solid #fff;
width:.3em;height:.3em;
}

#course .content div p:nth-child(4){
line-height:2.42;
font-size:1rem;
text-align:center
}

#course .content div p:nth-child(3) a:hover::before{
background-color:#fff;
}

#course .content div p:nth-child(3) a:hover::after{
border-color: #004F7C;
}

#course .content div p:nth-child(4) label{
position:relative;display:inline-block;background-color:#EFEFEF;color:#555555;border-radius:7px;padding:0 3.2em;
width: 100%;
box-sizing: border-box;
}
#course .content div p:nth-child(4) label:before{content:"";position:absolute;top:50%;left:16px;display:inline-block;border-style:solid;border-width:6px 7px 0;border-color:#555555 transparent transparent;width:0;height:0;margin-top:-3px}

#course .kenchiku h3{background-color:#d95e62}
#course .kenchiku h3 + p{color:#d95e62}
#course .doboku h3{background-color:#3b893a}
#course .doboku h3 + p{color:#3b893a}
#course .kankouji h3{background-color:#f3823d}
#course .kankouji h3 + p{color:#f3823d}

#course h2 + p{text-align:center;margin:-1% 0 3%;font-size:150%}
#course h2 + p span{color:#06C;font-size:130%;font-weight:bold}
#course .wi{border:1px solid #EEE;background-color:#FFF;padding:2% 0;text-align:center;margin-bottom:3%;font-size:125%}
#course .wi a{display:inline-block;background-color:#D95E62;padding:1% 2%;margin-top:.3em;margin-left:.5em;font-size:80%}
#course .wi a:nth-child(2){background-color:#3B893A}
#course .wi a:last-child{background-color:#F3A24D}
#course .wi a:link,#course .wi a:visited{color:#FFF}
#course .wi a:hover{text-decoration:underline}
#course > p:last-child{color:#990}
#course > p:last-child a{display:block;overflow:hidden;background:url(../_190108.images/home/course-banner-03.gif) no-repeat;background-size:contain;width:100%;height:0;padding:18.888% 0 0;text-indent:-9999px}
#course .content div input[type=checkbox]{display:none}
#course .content div div{overflow:hidden;width:100%;max-height:0;transition:all .2s ease-out;opacity:0}
#course .content div input[type=checkbox]:checked + div{max-height:10em;opacity:1}

#course .content div div table{
background-color:#FFF;
border:1px solid #FFF;
border-radius:5px;
color:#3C3C3C;
width: 100%;
margin:0 auto;
font-size:1rem;
}

#course .content div div th,#course .content div div td{border:1px solid #FFF;padding:4px 11px}
#course .content div div td{background-color:#F8F8F8;text-align: center}
#course .content div div th{background-color:#EFEFEF;text-align:center}
#course .content .kenchiku div th{}




#course .kakomon{
margin-bottom:3.677%;}

#course .kakomon table{
background-color: #FFF;box-shadow:0 0 8px rgba(0,0,0,0.03);width: 100%;font-weight: normal;}

#course .kakomon th{
padding: 0.4em 0.4em;}

#course .kakomon th,
#course .kakomon td{
border-bottom: 1px solid #CCC;border-right: 1px dotted #CCC;line-height: 1.3;}

#course .kakomon td a{
position: relative;display: inline-block;padding: 0.4em 0.4em;cursor: pointer;}

#course .kakomon .zk a{
padding: 0.4em 0.2em;}

#course .kakomon td a:link,
#course .kakomon td a:visited{
color: #303080;}

#course .kakomon td a:hover{
color: #333;text-decoration: underline;}

#course .kakomon .jnb a:after{
content: "準備中";position: absolute;bottom: 0;right: -1em;display: inline-block;background: #FD0;color: #000;border-radius: 3px;padding: 3px 5px;opacity: 0;transition: all 0.2s ease-out;font-size: 12px;}

#course .kakomon .jnb a:hover:after{
bottom:2em;opacity: 1;}

#course .kakomon th:last-child,
#course .kakomon td:last-child{
border-right: none;}

#course .kakomon tr:nth-child(6) th:first-child,
#course .kakomon tr:last-child th,
#course .kakomon tr:last-child td{
border-bottom: none;}

#course .kakomon tr:first-child th:nth-child(2),
#course .kakomon tr:nth-child(even) td:nth-child(7),
#course .kakomon tr:nth-child(odd) td:nth-child(6){
border-right: 3px solid #CCC;}

#course .kakomon tr:first-child th{
background-color: #307CAF;color: #FFF;}

#course .kakomon tr:first-child th:first-child{
position: relative;overflow: hidden;background: #FFF;border-right: none;}

#course .kakomon tr:first-child th:first-child:after{
content:"";}

#course .kakomon tr:first-child th,
#course .kakomon th:nth-child(2),
#course .kakomon tr:nth-child(3) th:first-child,
#course .kakomon tr:nth-child(5) th:first-child,
#course .kakomon tr:nth-child(7) th:first-child{
width: auto;}

#course .kakomon th,
#course .kakomon td{
text-align: center;}

#course .kakomon tr:nth-child(2) th:first-child,
#course .kakomon tr:nth-child(4) th:first-child,
#course .kakomon tr:nth-child(6) th:first-child{
color: #FFF;width: 1em;}

#course .kakomon tr:nth-child(2) th:first-child{
background-color: #D95E62;}
#course .kakomon tr:nth-child(2) th:nth-child(2){
background-color: #F9DEE2;}
#course .kakomon tr:nth-child(3) th{
background-color: #F9EEF2;}

#course .kakomon tr:nth-child(4) th:first-child{
background-color: #3B893A;}
#course .kakomon tr:nth-child(4) th:nth-child(2){
background-color: #DBF9DA;}
#course .kakomon tr:nth-child(5) th{
background-color: #EBF9EA;}

#course .kakomon tr:nth-child(6) th:first-child{
background-color: #F3A24D;}
#course .kakomon tr:nth-child(6) th:nth-child(2){
background-color: #FEE2CD;}
#course .kakomon tr:nth-child(7) th{
background-color: #FEF2ED;}

#course .kakomon tr:nth-child(2) td,
#course .kakomon tr:nth-child(4) td,
#course .kakomon tr:nth-child(6) td{
background-color: #F2F2F2;}

@media all and (max-width: 1197px) {

#course .content{
padding: 0 0.836vw;
}

#primary #course h2,
#primary #superiority h2{
font-size: 3.35vw;
}

#course h3 + p{
font-size:2vw;
}

}

@media all and (max-width: 1120px) {
#course h3,#course .content div:nth-child(n + 4) h3{font-size:2vw}
#course h3 + p{font-size:1.5vw}
#course .content div p:nth-child(3),#course .content div p:nth-child(4),#course .content div:nth-child(n + 4) p:nth-child(3){font-size:1.2vw;margin-right:5px;margin-left:5px}
}
@media all and (max-width: 640px) {
#course .wi{font-size:2.5vw}
}


@media all and (max-width: 600px) {

#primary section{
margin-bottom: 0;
padding-bottom: 8%;
}

#primary #course h2, #primary #superiority h2{
font-size: 6vw;
}

#course .content{
flex-direction: column;
padding: 0 3vw;
}

#course .content > div{
width: auto;
margin:0 0 3% 0; 
}

#course .content h3{
font-size: 5vw;
}

#course .content h3 + p{
font-size: 4.8vw;
}

#course .content div p:nth-child(3),
#course .content div p:nth-child(4){
font-size: 4vw;
}

}


#topics{
padding:4% 0;
}

#topics > div{
display: flex;
max-width: 1180px;
margin: auto;
}

#topics h2{
border-right: 1px solid #999;
border-bottom: none;
margin: 0 0.7em 0 0;
padding-right: 0.7em;
line-height:1.2;
writing-mode: vertical-rl;
}
#topics h2 span{
font-size:38.5%;
}

#topics h2::after{
top: 0;
right: -4px;
border-right: 4px solid #608cbf;
border-bottom: none;
width: 0;
height: 4em;
}




#topics dl{overflow:auto;color:#3C3C3C;height:398px;margin:0 1%;padding:0 6px 0 0;font-size:112.5%;}
#topics dt{border-top:1px solid #CFCFCF;padding:10px 0 10px 5px;margin:8px 0 0;line-height:1.1}
#topics dt:first-child{margin:0}
#topics dt span{display:inline-block;color:#004F7C;margin:6px 0 0;line-height:1.5;font-weight:bold}
#topics dt label span{text-decoration: underline;}
#topics dt label:hover span{color:#000;}
#topics dd{padding:0 0 0 5px;overflow: hidden;max-height:0;transition: all 0.2s;word-break: break-all;}
#topics a:link,#topics a:visited{color:#004F7C;text-decoration:underline}
#topics input{display: none;}
#topics input:checked + dd{max-height:200%;}
#topics .close{display: block;text-align: center}
#topics .close span{display: inline-block;background-color: #1261B4;color: #FFF;padding: 1px 3px;border-radius: 3px;}
#topics em{
font-weight: bold;
text-decoration: underline;
font-style: normal;
}

@media all and (max-width: 860px) {
#topics h2{font-size:137.5%;}
#topics{padding-bottom:5%}
#topics dl{height:360px;font-size: 75%;padding-right:2%}
#topics input:checked + dd{max-height:200%;}
}

@media all and (max-width: 600px) {

#topics{
padding:8vw 3vw;
}

}



#superiority{
background-color: #F4F6F8;
padding: 0 0 4% 0;
}

#superiority h2{
max-width: 1180px;
margin: 0 auto 1.4% auto;
}

#superiority > div{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
max-width: 1200px;
margin: auto;
padding: 0 10px;
counter-reset:number 0;
}

#superiority > div > div{
position: relative;
box-sizing: border-box;
background-color: #fff;
box-shadow: 0 0 8px rgba(0,0,0,0.1);
border:1px solid;
width: 32%;
margin-bottom: 2%;
padding: 1.3em;
}

#superiority > div div div{
position: relative;
display: flex;
flex-wrap: wrap;
}

#superiority > div > div:last-child{
visibility: hidden;
}

#superiority > div > div::before,
#superiority > div > div::after{
content:"";
position: absolute;
width: 1em;
height: 1em;
}

#superiority > div > div::before{
top:-1px;
left: -1px;
display: block;
border-top:4px solid;
border-right: none;
border-left:4px solid;
border-bottom: none;
}

#superiority > div > div::after{
right:-1px;
bottom: -1px;
display: block;
border-top: none;
border-right:4px solid;
border-bottom:4px solid;
border-left: none;
}

#superiority a:link,
#superiority a:visited{
color: #333;
}

#superiority a:hover{
text-decoration: underline;
}

#superiority h3{
margin-bottom: 0.7em;
line-height: 1.3;
font-size: 1rem;
font-weight: 500;
}

#superiority h3 strong{
position: relative;
display: inline-block;
font-size: 1.25em;
}

#superiority h3 strong span{
position: relative;
z-index: 10;
}

@media all and (max-width: 1210px) {

#superiority h3{
font-size: 1.3vw;
}

}

@media all and (max-width: 1197px) {

#superiority .content{
padding: 0 0.836vw;
}

}

@media all and (max-width: 1089px) {

#superiority h3{
font-size: 1.25vw;
}

#superiority p{
font-size: 1.3vw;
}

}



#superiority h3 strong::after{
content:"";
position: absolute;
top: 0;
left: 0;
z-index: 5;
display: block;
width: 100%;
height: 100%;
opacity: 0.4;
transform: skewX(-10deg);
}


#superiority h3::after{
content:"";
display: block;
clear: both;
}

#superiority h3::before{
display: block;
float: left;
color: #fff;
width: 1em;
height: 1em;
padding: 0.3em;
margin-right: 0.5em;
line-height: 1;
font-size: 2em;
text-align: center;
counter-increment: number 1;
content: counter(number) "";
}

#superiority > div div:nth-child(1){
border-color:#e3bbed;
}
#superiority > div div:nth-child(1)::before,
#superiority > div div:nth-child(1)::after{
border-color:mediumorchid;
}
#superiority > div div:nth-child(1) h3::before{
background-color:mediumorchid;
}

#superiority > div div:nth-child(2){
border-color:#ffccbb;
}
#superiority > div div:nth-child(2)::before,
#superiority > div div:nth-child(2)::after{
border-color:coral;
}
#superiority > div div:nth-child(2) h3::before{
background-color:coral;
}

#superiority > div div:nth-child(3){
border-color:#f2a4b3;
}
#superiority > div div:nth-child(3)::before,
#superiority > div div:nth-child(3)::after{
border-color:crimson;
}
#superiority > div div:nth-child(3) h3::before{
background-color:crimson;
}

#superiority > div div:nth-child(4){
border-color:#d6aeec;
}
#superiority > div div:nth-child(4)::before,
#superiority > div div:nth-child(4)::after{
border-color:indigo;
}
#superiority > div div:nth-child(4) h3::before{
background-color:indigo;
}

#superiority > div div:nth-child(5){
border-color:#bfd8d8;
}
#superiority > div div:nth-child(5)::before,
#superiority > div div:nth-child(5)::after{
border-color:cadetblue;
}
#superiority > div div:nth-child(5) h3::before{
background-color:cadetblue;
}

#superiority > div div:nth-child(6){
border-color:#cc9a9c;
}
#superiority > div div:nth-child(6)::before,
#superiority > div div:nth-child(6)::after{
border-color:maroon;
}
#superiority > div div:nth-child(6) h3::before{
background-color:maroon;
}

#superiority > div div:nth-child(7){
border-color:#fff0ab;
}
#superiority > div div:nth-child(7)::before,
#superiority > div div:nth-child(7)::after{
border-color:gold;
}
#superiority > div div:nth-child(7) h3::before{
background-color:gold;
}

#superiority > div div:nth-child(8){
border-color:#d3e4d2;
}
#superiority > div div:nth-child(8)::before,
#superiority > div div:nth-child(8)::after{
border-color:darkseagreen;
}
#superiority > div div:nth-child(8) h3::before{
background-color:darkseagreen;
}

#superiority > div div:nth-child(1) h3 strong::after{
background: linear-gradient(transparent 60%, mediumorchid 60%);
}
#superiority > div div:nth-child(2) h3 strong::after{
background: linear-gradient(transparent 60%, coral 60%);
}
#superiority > div div:nth-child(3) h3 strong::after{
background: linear-gradient(transparent 60%, crimson 60%);
}
#superiority > div div:nth-child(4) h3 strong::after{
background: linear-gradient(transparent 60%, darkorchid 60%);
}
#superiority > div div:nth-child(5) h3 strong::after{
background: linear-gradient(transparent 60%, cadetblue 60%);
}
#superiority > div div:nth-child(6) h3 strong::after{
background: linear-gradient(transparent 60%, maroon 60%);
}
#superiority > div div:nth-child(7) h3 strong::after{
background: linear-gradient(transparent 60%, gold 60%);
}
#superiority > div div:nth-child(8) h3 strong::after{
background: linear-gradient(transparent 60%, darkseagreen 60%);
}

#superiority .thumb{
width: 30%;
margin-right: 1em;
}

#superiority .thumb img{
background: #eee;
width: 100%;
}

#superiority p:not(.thumb){
width: calc(100% - 30% - 1em);
text-align: justify;
}

@media all and (max-width: 600px) {

#superiority > div > div{
width: 49%;
padding: 3vw;
}

#superiority > div > div:last-child{
display: none;
}

#superiority h3{
font-size: 3vw;
}

#superiority h3::before{
margin-bottom: 0.3em;
font-size: 1.5em;
}

#superiority h3 strong{
margin-top: 0.2em;
font-size: 1em;
}

#superiority > div div div{
display: block;
}


#superiority .thumb{
float: right;
margin: 0 0 1em 1em;
}

#superiority p:not(.thumb){
width: auto;
font-size: 3.1vw;
}


}


/* 各セクションを全体にまとめ */
#right-contents #top-page-section-wrap {
	text-align: left;
	margin-bottom: 50px;
	display: block;
}
/* 各セクションそれぞれのまとめ */
#right-contents #top-page-section {
	text-align: left;
	margin-bottom: 50px;
	overflow-y: hidden;
	display: block;
	padding-bottom: 10px;
	clear: both;
}

/* 各セクションのタイトル */
#top-page-section-wrap .top-page-section .top-page-section-ttl {
	font-size: 2.3em;
	margin-bottom: 10px;
	border-bottom: thin solid #000000;
	margin-top: 20px;
}
/* 各セクションのイメージ画像 */
#top-page-section-wrap .top-page-section .top-page-img {
	float: left;
}
/* 各セクションの説明 */
#top-page-section-wrap .top-page-section .top-page-ex {
	margin-left: 20px;
	margin-bottom: 10px;
	margin-top: 0px;
}
/* 各セクションの結論 */
#top-page-section-wrap .top-page-section .top-page-Conclusion {
	font-size: 1.3em;
	font-weight: bold;
}
#right-contents .goaisatsu-text {
	margin-left: 20px;
	margin-right: 20px;
}

.top-sekou-ex dl {
	margin-bottom: 20px;
}
.top-sekou-ex dl dt {
	font-size: 1.2em;
	font-weight: bold;
	color: #FFFFFF;
	padding: 5px;
	background-color: #3E7CFF;
	margin-bottom: 10px;
}
.top-sekou-ex dl dd {
	margin-bottom: 20px;
	margin-left: auto;
	margin-right: auto;
	width: 90%;
}
.top-sekou-ex dl dd ul li {
	list-style-type: circle;
	margin-left: 10px;
	margin-bottom: 5px;
}

#right-contents p {
	margin-bottom: 15px;
}
.message a .remark p {
	margin-bottom: 20px;
}
a .remark .baloon-ttl {
	color: #FFFFFF;
	padding: 5px;
	background-color: #0043D1;
	font-size: 1.3em;
}
#right-contents .link-btn-wrap {
	margin-left: 30px;
}
.link-btn-wrap a img {
	margin-right: 30px;
	margin-bottom: 10px;
	border: 1px solid #BBBBBB;
	box-shadow: 10px 9px 7px -3px rgba(0,0,0,0.5);
	border-radius: 10px;
}
.link-btn-wrap a img a:hover{
	background-color: #0043D1;
}
#right-contents .order-box {
	text-align: center;
	margin-bottom: 20px;
}

/* スマートフォン w600 より小さい場合に適用 */
@media only screen and (max-width:760px){
/* spNoneクラスのものを表示しない */
	.spNone { display: none;}

}
* {
  box-sizing: border-box;

}

.column3 {
  float: left;
  width: 33.33%;
  padding: 5px;
}

/* Clearfix (clear floats) */
.rowt::after {
  content: "";
  clear: both;
  display: table;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 500px) {
  .column3 {
    width: 100%;
  }
}
* {
  box-sizing: border-box;
}

.column4 {
  float: left;
  width: 50%;
  padding: 5px;
}

/* Clearfix (clear floats) */
.rows::after {
  content: "";
  clear: both;
  display: table;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 500px) {
  .column4 {
    width: 100%;
  }
}
div.example {
  background-color: transparent;
  padding: 20px;
}

@media screen and (min-width: 601px) {
  div.example {
    font-size: 36px;
    font-weight: bold;
    border-bottom: thin solid #000000;
  }
}

@media screen and (max-width: 600px) {
  div.example {
    font-size: 24px;
  }
}
 @keyframes fa-blink {
     0% { opacity: 1; }
     50% { opacity: 0.5; }
     100% { opacity: 0; }
 }
.fa-blink {
   -webkit-animation: fa-blink 1s linear infinite;
   -moz-animation: fa-blink 1s linear infinite;
   -ms-animation: fa-blink 1s linear infinite;
   -o-animation: fa-blink 1s linear infinite;
   animation: fa-blink 1s linear infinite;
}


/* 追加 */
#mv img {
	width: 100%;
	height: auto;
	vertical-align: bottom;
}

#banner01 {
	padding-top: 3%;
}

#banner01 img {
	width: 100%;
	height: auto;
}

#course .br {
	display: none;
}

#course .banner02 img {
	width: 100%;
	height: auto;
	vertical-align: bottom;
	margin-bottom: 2%;
}

#course .banner04 img {
	width: 100%;
	height: auto;
	vertical-align: bottom;
	margin-bottom: 2%;
}

#course .banner03 {
	border: 2px solid #253E76;
	margin-bottom: 2%;
}

#course .banner03 img {
	width: 100%;
	height: auto;
	vertical-align: bottom;
}

/* ボタン */
#prm-contact2 {
    display: none;
    margin-bottom: 5%;
}

#prm-contact2 p {
    font-size: 81.25%;
}

#prm-contact2 p:last-child {
    display: flex;
    justify-content: center;
}

#prm-contact2 p:last-child a:first-child {
    background-color: #E83828;
		color: #fff;
}

#prm-contact2 p:last-child a:last-child {
    background-color: #009944;
		color: #fff;
}

#prm-contact2 p:last-child a {
    display: block;
    background: url(../_190108.images/common/secondary-inquiry-bg.png) no-repeat 14px center;
    color: #FFF;
    border-radius: 5px;
    width: 48%;
    padding: 4% 5% 4% 40px;
    margin: 0 1%;
    text-align: center;
}



@media all and (max-width: 480px) {
	#course .br {
		display: block;
	}

/* メニュー */
#contents ul {
	display: flex;
}

#contents ul li {
  width: 49%;
	margin: 0 0 2% 2%;
	height: 4.125em;
	display: flex;
	align-items: center;
	background: #fff;
}

#contents li:nth-child(even) {
  width: 49%;
	margin: 0 0 2% 2%;
	height: 4.125em;
}

#contents ul li:nth-child(2n-1) {
	margin-left: 0;
}

#contents li > a, #contents li label {
	line-height: 4.125;
	padding-right: 4%;
	padding-left: 33%;
	width: 100%;
	background: none;
}

#contents li > a:before, #contents li label:before {
  height: 100%;
}

#contents ul {
font-size:3.5vw;
}

}

@media all and (max-width: 414px) {
#contents ul {
font-size:3.3vw;
}

	#course .content div p:nth-child(3) a {
		line-height: 1.3;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 20px;
	}

	#prm-contact2 {
    display: block;
	}
}
/* 追加 */
