@charset "utf-8";

@media screen and (min-width: 768px) {
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}	
body{
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック", YuGothic,"メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
color: #333333;
font-size:1.2em;
}
img{
display: block;
}
li{
list-style-type: none;
}
a{
display: block;
text-decoration: none;
}

.background-gray{
width: 100%;
background-color:#f7f7f7;
}

.txt-green{
color:#66bb6a;
}

.txt-blue{
color:#2196f3;
}

.txt-orange{
color:#ffa726;
}

.txt-lightblue{
color:#57c3ea;
}

.txt-center{
width:60%;
margin:0 auto;
}

.txt-bold{
font-weight:bold;
}

main{
width:100%;
min-width: 1200px;
}

main #mainvisual{
width:100%;
background-color: #f2e75c;
padding: 1%;
}

main #mainvisual h1{
width:99%;
background-color: #88d9ed;
margin:0 auto;
position: relative;
}

main #mainvisual h1::before{
position: absolute;
content: "3roll models";
bottom: 2%;
writing-mode: vertical-lr;
font-size:0.6em;
font-style: italic;
font-weight: lighter;
letter-spacing: 2;
}

main #mainvisual h1 img{
width:80%;
margin:0 auto;
z-index: 2;
}

.sp{
display: none;
}

.header {
  position: fixed;
  z-index: 100;
  width: 100%;
  opacity: 0;
  transition: opacity .2s;
}

.header.show {
  opacity: 1;
}



/*----------------------------------------------*/

header{
padding: 20px 30px;
display: flex;
justify-content: space-between;
position: fixed;
z-index: 100;
background-color: rgba(255,255,255,1);
width: 100%;
min-width: 1000px;
}

header nav ul{
display: flex;
justify-content: center;
align-items: center;
}

header nav ul li {
margin-left: 20px;
}

header nav ul li a {
color: #333;
font-weight: bold;
font-size: 1.0rem;
}

header nav ul li a:hover {
color: #e15d3f;
transition: all ease .3s;
}

header nav ul li:last-child a {
background-color: #ff5a5a;
padding: 5px 28px 4px;
border-radius: 25px;
border: solid #ff5a5a;
color: #fff;
font-weight: bold;
font-size: 1.0rem;
}

header nav ul li:last-child a:hover {
background-color: #fff;
color: #e15d3f;
border: solid #e15d3f;
}

/*-----------------------------------------------*/

main #introduction{
width:60%;
margin:0 auto;
}

main #introduction p:first-child{
margin:50px 0;
}

main #introduction p:nth-child(3){
text-align: center;
display: block;
font-weight:bold;
border-bottom:thick dotted;
width:42%;
margin:0 auto 50px;
font-size:1.2em;
}

main #introduction div{
width:100%;
}

main #introduction div img{
width:3.5%;
margin:50px auto;
}

main #introduction ul{
width:100%;
display: flex;
justify-content: space-around;
margin:30px 0 100px;
}

main #introduction ul li{
font-size:1em;
width:28%;
}

main #introduction ul li:nth-child(2){
margin:0 20px;
}

main #introduction ul li a img{
width:85%;
margin:0 auto;
}

main #introduction ul li a:nth-child(2){
padding:4% 0;
line-height:1.5;
margin-top:20px;
}

main #introduction ul li:first-child a:nth-child(2){
border: 2px solid #66bb6a;
border-radius: 10px;
text-align: center;
color: #66bb6a;
font-weight:bold;
}

main #introduction ul li:first-child a:nth-child(1):hover{
opacity: 0.7;
transition:all ease .3s;
}

main #introduction ul li:first-child a:nth-child(2):hover{
border: 2px solid #66bb6a;
background-color:#66bb6a;
color: #fff;
font-weight:bold;
transition:all ease .3s;
}

main #introduction ul li:nth-child(2) a:nth-child(2){
border: 2px solid #2196f3;
border-radius: 10px;
text-align: center;
color: #2196f3;
font-weight:bold;
}

main #introduction ul li:nth-child(2) a:nth-child(1):hover{
opacity: 0.7;
transition:all ease .3s;
}

main #introduction ul li:nth-child(2) a:nth-child(2):hover{
border: 2px solid #2196f3;
background-color:#2196f3;
color: #fff;
font-weight:bold;
transition:all ease .3s;
}

main #introduction ul li:nth-child(3) a:nth-child(2){
border: 2px solid #ffa726;
border-radius: 10px;
text-align: center;
color: #ffa726;
font-weight:bold;
}

main #introduction ul li:nth-child(3) a:nth-child(1):hover{
opacity: 0.7;
transition:all ease .3s;
}

main #introduction ul li:nth-child(3) a:nth-child(2):hover{
border: 2px solid #ffa726;
background-color:#ffa726;
color: #fff;
font-weight:bold;
transition:all ease .3s;
}





/*----------------------------------------------*/


main .case{
width:100%;
}

main .case .background-gray{
padding:100px 0 60px;
}

main .case h2{
width:60%;
margin:0 auto 50px;

}

main .case img{
width:100%;
}

main .case .before-after{
width:40%;
margin: 0 auto;
}

main .face-right{
width:60%;
margin:0 auto;
display: flex;
justify-content: space-between;
align-items: center;
padding: 60px 0;
}

main .face-left{
width:60%;
margin:0 auto;
display: flex;
flex-flow: row-reverse;
justify-content: space-between;
align-items: center;
padding:60px 0;
}

main .face-right div{
width:70%;
position: relative;
padding: 3% 4%;
border: 2px dashed;
background-color: #fff;
border-radius: 20px;
}

main .face-left div{
width:70%;
position: relative;
padding: 3% 4%;
border: 2px dashed #57c3ea;
background-color: #fff;
border-radius: 20px;
}

#problem01 div{
border-color:#66bb6a;
}

#problem02 div{
border-color:#2196f3;
}

#problem03 div{
border-color:#ffa726;
}

main .face-right div::before{
content: '';
position: absolute;
display: block;
width: 18px;
height: 18px;
right:-2%;
top: 44%;
margin: 0 auto;
border-top: 2px dashed #ffa726;
border-right: 2px dashed #ffa726;
background-color: #fff;
transform: rotate(45deg);
}

main #problem01 div::before{
border-color:#66bb6a;
}

main #problem02 div::before{
border-color:#2196f3;
}

main .face-left div::before{
content: '';
position: absolute;
display: block;
width: 18px;
height: 18px;
left: -2%;
top: 44%;
margin: 0 auto;
border-top: 2px dashed #57c3ea;
border-right: 2px dashed #57c3ea;
background-color: #fff;
transform: rotate(-135deg);
}

main .face-right figure{
width:25%;
}

main .face-left figure{
width:25%;
}

main .face-left,.face-right p{
font-size: 1.2em;
}

/*----------------------------------------------*/

.course-content{
width:100%;
margin:80px auto 100px;
text-align: center;
padding: 60px 0;
background-color: #fff;
}

.course-content h3{
margin-bottom:20px;
}

.course-content ul{
display: flex;
justify-content: center;
margin:0 auto;
}

.course-content ul li{
font-size: 0.8em;
margin:0 5px;
}

.course-content ul li .btn-green{
border-radius: 50vh;
border:solid 2px #66bb6a;
color:#66bb6a;
background-color: #fff;
font-weight:bold;
padding:5px 10px;
}

.course-content ul li .btn-green:hover{
transition:all ease .3s;
color:#fff;
border:solid 2px #66bb6a;
background-color: #66bb6a;
}

.course-content ul li .btn-blue{
border-radius: 50vh;
border:solid 2px #2196f3;
color:#2196f3;
background-color: #fff;
font-weight:bold;
padding:5px 10px;
}

.course-content ul li .btn-blue:hover{
transition:all ease .3s;
color:#fff;
border:solid 2px #2196f3;
background-color: #2196f3;
}

.course-content ul li .btn-orange{
border-radius: 50vh;
border:solid 2px #ffa726;
color:#ffa726;
background-color: #fff;
font-weight:bold;
padding:5px 10px;
}

.course-content ul li .btn-orange:hover{
transition:all ease .3s;
color:#fff;
border:solid 2px #ffa726;
background-color: #ffa726;
}



/*-----------------------------------------------*/


main .information{
width:40%;
margin:0 auto;
position:relative;
text-align: center;
border:#d3d3d3 2px dashed; 
border-radius: 20px;
background-color: #fff;
}

main .information h4{
position: absolute;
top:-15%;
left:40%;
border-radius:50vh;
border:#d3d3d3 solid thick;
background-color: #d3d3d3;
padding:0 5%;
}

main .information p{
padding:7% 6% 4%;
}

main #information03 p{
text-align: left;
}

main .citing{
font-size:0.7em;
margin:20px auto 0;
color: #888888;
display: flex;
justify-content: center;
}

main .citing a{
text-decoration:underline;
}

main .citing a:hover{
color:#57c3ea;
}

main #information03 p span{
font-size:1em;
}

main .information p span{
font-size:1.7em;
}


main .information h5{
background-color: #a0eae3;
display: inline-block;
padding: 1% 0 1% 2%;
margin: 10px 0;
color:#fff;
}


main #information03 h4{
position: absolute;
top:-3%;
left:40%;
border-radius:50vh;
border:#d3d3d3 solid thick;
background-color: #d3d3d3;
padding:0 5%;
}

main #information03 figure{
padding: 5% 6%;
}

main .case .counseling-btn{
color:#fff;
border:2px solid #ff5a5a;
background-color: #ff5a5a;
border-radius: 50vh;
margin:0 auto 100px;
width:30%;
text-align: center;
padding:1% 1%;
font-weight:bold;
font-size: 1.2em;
}

main .case .counseling-btn:hover{
border:2px solid #ff5a5a;
background-color:#fff;
transition:all ease .3s;
color: #ff5a5a;
font-weight:bold;
}

/*----------------------------------------------*/


main #support,#counseling{
width:60%;
margin:0 auto;

}

main #support{
padding:100px 0 50px;
}

main #support h2{
text-align:center;
line-height:1.2;
margin-bottom:50px;

}

main #support h2 span{
font-weight:normal;
font-size:0.7em;
}

main #support ul{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

main #support ul li{
width:30%;
}

main #support ul li div{
position: relative;
width: 100%;
}

main #support ul li img{
width:100%;
margin:0 auto;
}

main #support ul li h3{
position:absolute;
display: inline;
left:0;
bottom:4%;
font-size:1em;
line-height:1;
}

main #support h3 span{
font-weight: bold;
background: linear-gradient(to right, #fff 50%, transparent 50%);
background-size: auto;
background-size: 200% auto;
line-height: 170%;
letter-spacing: 0.03em;
color: #333;
padding:1% 0;
}


main #support ul li p {
    font-size: 0.85em;
    width: 98%;
    margin: 5px auto 22px;
}
/*----------------------------------------------------*/


main #counseling{
padding:50px 0 100px;
}

main #counseling h2{
text-align:center;
line-height:1.2;
margin-bottom:50px;

}

main #counseling h2 span{
font-weight:normal;
font-size:0.7em;
}

main #counseling ul{
width:100%;
display: flex;
flex-direction:row;
justify-content:space-between;
}

main #counseling li{
width:30%;
background: #fff;
box-shadow: 6px 6px #d8d8d8;
padding:2% 2%;
}

main #counseling li h3{
display: block;
text-align: center;
font-size:1em;
border-bottom: dotted 2px #57c3ea;
}

main #counseling li img {
    width: 50%;
    margin: 10px auto;
}

main #counseling li p:last-child{
width:88%;
margin:0 auto;
font-size:0.9em;
}

main #application{
width:60%;
margin:0 auto;
padding:100px 0;
}

main #application h4{
text-align: center;
font-size:1.2em;
line-height: 1.5;
margin-bottom:20px;
}

main #application a{
color:#fff;
border:2px solid #ff5a5a;
background-color: #ff5a5a;
border-radius: 50vh;
margin:0 auto;
width:60%;
text-align: center;
padding:2% 3%;
font-weight:bold;
font-size:1.5em;
}

main #application a:hover{
border:2px solid #ff5a5a;
background-color:#fff;
transition:all ease .3s;
color: #ff5a5a;
font-weight:bold;
}

footer p{
text-align: center;
font-size:0.5em;
padding: 2% 0;
}




main .case .before-after h3 a:hover{
transition: all ease .3s;
opacity:0.8;
}



/*-----------------20220318追記----------------------*/
	
	
	main #introduction ul{
		justify-content: center;
	}
	
	main #introduction ul li:nth-child(2){
		margin-left: 30px;
	}
	
	main #introduction ul li:nth-child(2) a:nth-child(2){
		border: 2px solid #ffa726;
border-radius: 10px;
text-align: center;
color: #ffa726;
font-weight: bold;
	}


	main #introduction ul li:nth-child(2) a:nth-child(2):hover{
		border: 2px solid #ffa726;
background-color: #ffa726;
color: #fff;
font-weight: bold;
transition: all ease .3s;
	}
	
	main #course-content01 a{
color: #fff;
border: 2px solid #66bb6a;
background-color: #66bb6a;
border-radius: 50vh;
margin: 0 auto;
width: 30%;
text-align: center;
padding: 1% 1%;
font-weight: bold;
font-size: 1.2em;
	}
	
	main #course-content01 a:hover{
		border: 2px solid #66bb6a;
background-color: #fff;
transition: all ease .3s;
color: #66bb6a;
font-weight: bold;
	}

	main #course-content02 a{
color: #fff;
border: 2px solid #ffa726;
background-color: #ffa726;
border-radius: 50vh;
margin: 0 auto;
width: 30%;
text-align: center;
padding: 1% 1%;
font-weight: bold;
font-size: 1.2em;
	}
	
	main #course-content02 a:hover{
		border: 2px solid #ffa726;
background-color: #fff;
transition: all ease .3s;
color: #ffa726;
font-weight: bold;
	}







}