@charset "utf-8";
@media screen and (max-width: 767px) {

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}	
.pc{
display: none;
}
body{
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック", YuGothic,"メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
color: #333333;
font-size:1.0em;
}

img{
display: block;
width: 100%;
height: auto;
}

li{
list-style-type: none;
}

a,a:active{
text-decoration: none;
display: block;
}

.pc{
display: 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:90%;
margin:0 auto;
}

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

main{
width:100%;
}

main h1 figure{
width:100%;
}

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 img{
width:95%;
margin:0 auto;
z-index: 2;
}

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

.pc{
display: none;
}

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

.header.show {
  opacity: 1;
}


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

header {
width: 100%;
position: relative;
position: fixed;
background-color: rgba(255,255,255,1);
z-index: 10;
}

header div {
float: left;
width: 45%;
padding: 18px 0 10px 10px;
margin-bottom: 5px;
}

header nav ul {
width: 100%;
display: flex;
justify-content: space-around;
padding: 0 10px 10px;
}


header nav ul li:last-of-type {
position: absolute;
left: 68%;
top: 12px;
}

header nav ul li a{
color: #333333;
font-weight:bold;
}

header nav ul li:last-child a {
font-weight: bold;
background-color: #ff5a5a;
border: solid #ff5a5a;
color: #fff;
font-size: 0.9em;
border-radius: 20px;
margin-right: 10px;
padding: 6px 13px;
}

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



main #introduction{
width:90%;
margin:0 auto 50px;
}

main #introduction div{
width:100%;
}

main #introduction div img{
width:5%;
margin:20px auto;
}


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

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

main #introduction ul{
width:95%;
display: flex;
flex-wrap: wrap;
margin:0 auto 0;
font-size: 0.8rem;
}

main #introduction ul li{
width:48%;
}

main #introduction ul li:first-child{
margin-right: 5px;
}

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

main #introduction ul li:last-child{
margin:0 auto;
}

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

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

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

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):active{
opacity: 0.5;
transition:all ease .3s;
}

main #introduction ul li:first-child a:nth-child(2):active{
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):active{
opacity: 0.5;
transition:all ease .3s;
}

main #introduction ul li:nth-child(2) a:nth-child(2):active{
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):active{
opacity: 0.5;
transition:all ease .3s;
}

main #introduction ul li:nth-child(3) a:nth-child(2):active{
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:50px 0 30px;
}

main .case h2{
width:95%;
margin:0 auto 30px;
}

main .case h2 figure img{
width:100%;
}

main .case .before-after{
width:95%;
margin: 0 auto 50px;
}

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

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

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

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

main .face-right div::before{
content: '';
position: absolute;
display: block;
width: 13px;
height: 13px;
right:-4%;
top: 19%;
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: 13px;
height: 13px;
left: -4%;
top: 13%;
margin: 0 auto;
border-top: 2px dashed #57c3ea;
border-right: 2px dashed #57c3ea;
background-color: #fff;
transform: rotate(-135deg);
}


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

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

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

main .face-right div::before{
content: '';
position: absolute;
}

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

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

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

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

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

.course-content ul{
display: flex;
flex-wrap: wrap;
justify-content: space-around;
margin:0 auto;
}

.course-content ul li{
width:48%;
font-size: 0.8rem;
margin:5px 0;
}

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

.course-content ul li .btn-green:active{
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:10px 10px;
}

.course-content ul li .btn-blue:active{
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:10px 10px;
}

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



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

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

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

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

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

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

main .information p span{
font-size:1.5rem;
}


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:-4%;
left:37%;
border-radius:50vh;
border:#d3d3d3 solid thick;
background-color: #d3d3d3;
padding:0 5%;
}

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

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

main .citing{
width: 95%;
margin: 10px auto 0;
font-size: 0.6rem;
color: #888888;
display: flex;
justify-content: center;
}

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

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



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

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

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

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


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

}

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

main #support h2{
text-align:center;
line-height:1.2;
margin-bottom:30px;
font-size: 1.4rem
}

main #support h2 span{
font-weight:normal;
font-size:0.8rem;
}

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

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

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


main #support ul li h3{
position:absolute;
display: inline;
left:0;
bottom:5%;
font-size:0.9rem;
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 img{
width:100%;
margin:0 auto;
}


main #support ul li p{
font-size:0.8em;
width:95%;
margin:5px auto 20px;
}

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

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

main #counseling h2{
text-align:center;
line-height:1.2;
margin-bottom:30px;
font-size: 1.4rem;
}

main #counseling h2 span{
font-weight:normal;
font-size:0.8rem;
}

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

main #counseling li{
width:48.5%;
background: #fff;
padding:4% 2%;
}

main #counseling li:last-child{
margin:10px auto 0;
}

main #counseling li h3{
text-align: center;
font-weight:bold;
line-height: 1.2;
font-size:1rem;
}

main #counseling li img {
    width: 60%;
    margin: 7px auto;
}

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

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

main #application{
width:95%;
margin:0 auto;
padding:50px 0;
}

main #application h4{
text-align: center;
font-size:1.2rem;
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:75%;
text-align: center;
padding:3% 3%;
font-weight:bold;
font-size:1.1rem;
}

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

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



main .case .before-after h3 a:active{
opacity:0.6;
}

/*-----------------------------------*/
	
	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;
}

	
/*-----------------20220318追記----------------------*/
	
	


	main #course-content01 a{
color: #fff;
border: 2px solid #66bb6a;
background-color: #66bb6a;
border-radius: 50vh;
margin: 0 auto;
width: 80%;
text-align: center;
padding: 4% 1%;
font-weight: bold;
font-size: 1.1rem;
	}
	
	main #course-content02 a{
color: #fff;
border: 2px solid #ffa726;
background-color: #ffa726;
border-radius: 50vh;
margin: 0 auto;
width: 80%;
text-align: center;
padding: 4% 1%;
font-weight: bold;
font-size: 1.1rem;
	}
	
	


















































}