@charset "UTF-8";
/* CSS Document */
html{
  	font-size: clamp(14px, 3.7vw, 16px); 
	letter-spacing: 0;
}

body{
	font-family: YakuHanJP,'Noto Sans JP', 'Noto Serif JP',sans-serif;
	color:#1F3383;
	font-weight: 700;
    line-height:1.5;
    text-align: justify;
}

a{
	color:#1F3383;
}


img{
  max-width: 100%;
  height: auto;
}


.yh-non{
	font-family: 'Noto Sans JP','Noto Serif JP', sans-serif;
}

.tb,.tbpc,.pc{
	display:none;
}

.fadein {
    opacity: 0; 
    transition: all 1s ease; 
    transform: translate(0, 50px);
    transition-delay: 0s; 
}

.fadein.scrollin {
	transform: translate(0, 0px);
    opacity: 1;
}

.serif{
	font-family:'Noto Serif JP';
	font-weight:500;
	letter-spacing: .1em;
    line-height: 1.5;
}

.red{
	background:#AF1C3B;
}

.blue{
	background:#1F3383;
}

.font_white{
	color:#fff;
}



.flexBox{
	display:flex;
	justify-content: space-between;
}

/*bg*/
#wrapper{ 
	background:#CBE6F5; 
	position:relative;    
	overflow-x: hidden;
}


#wrapper::before{
	content:"";
	width: 100%;
    height: 2000px; 
  	background: #CBE6F5;  
  	clip-path: polygon(0% 29%,  100% 0%, 100% 100%, 100% 100%, 0% 83%);
	position: absolute;  
  	right: 0;
    top: 1040px;
    mix-blend-mode: multiply;
    opacity: .4;
    z-index: 0;
} 

#wrapper::after{
	content: "";
	width: 100%;
    height: 820px;
    background: #CBE6F5;
    clip-path:polygon( 0 0,100% 52%,100% 88%, 0% 75%, 0% 75% );
    position: absolute;
    left: 0;
    top: 1020px;
    mix-blend-mode: multiply;
    opacity: .2;
    z-index: 0;
} 

#wrapper span.bg_triangle{
	position:relative;
	display: block;
}

#wrapper span.bg_triangle::before{
	content:"";
	width: 100%;
    height: 1500px;
  	background: #CBE6F5;  
  	clip-path: polygon(  0 9%, 100% 0, 100% 63%, 0% 100%,  0 60% ); 
	position: absolute;  
  	left: 0;
    top: 3900px;
    mix-blend-mode: multiply;
    opacity: .4;
    z-index: 0;
    display:block;
} 


#wrapper span.bg_triangle::after{
    content: "";
	width: 100%;
    height: 1110px;
    background: #CBE6F5;
    clip-path:polygon(  0 0,  100% 11%, 100% 60%, 100% 100%,  0 70% );
    position: absolute;
    right: 0;
    top: 5367px;
    mix-blend-mode: multiply;
    opacity: .15;
    z-index: 0;
}

#wrapper span.bg_triangle.tri2::before{
	width: 100%;
    height: 1300px;
    clip-path: polygon(0 0%, 100% 37%, 100% 80%, 0% 100%, 0 60%);    
    left: 0;
    top: 7150px;
    opacity: .4;
}

#wrapper span.bg_triangle.tri2::after{
	height: 624px;
    clip-path: polygon(0 52%, 100% 0%, 100% 60%, 100% 64%, 0% 70%);
    right: 0;
    top:7199px;
    opacity: .4;  
}


#wrapper span.bg_triangle.tri3::before{
	height: 950px;
    clip-path: polygon(0 0%, 100% 19%, 100% 100%, 0% 52%, 0 60%);
    right: 0;
    top: 8570px;
    left: auto;
    opacity: .4;
}

#wrapper span.bg_triangle.tri3::after{
	width: 362vw;
    height: 255vw;
    clip-path: polygon(0 36%, 100% 0%, 0% 99%);
    left: 0;
    top: 2517vw;
    opacity: .4;
    right: auto;
}

#wrapper span.bg_triangle.tri4::before{
    width: 100%;
    height: 1000px;
    clip-path: polygon(0 41%, 100% 0, 100% 100%, 0% 80%, 0 60%);
    right: 0;
    top: 10900px;
    left: auto;
    opacity: .4;
}

#wrapper span.bg_triangle.tri4::after{
	width: 100%;
    height: 730px;
    clip-path: polygon(0 17%, 100% 0%, 100% 60%, 100% 41%, 0 100%);
    left: 0;
    top: 11800px;
    opacity: .4;
    right: auto;
}

#wrapper span.bg_triangle.tri5::before{
 	width: 180vw;
    height: 211vw;
    clip-path: polygon(0% 0%, 100% 16%, 100% 58%);
    right: 0;
    top: 3329vw;
    left: auto;
    opacity: .4;
}
}

#wrapper span.bg_triangle.tri5::after{
    display: none;
}



/*bg-end*/






a.apply.fixed{
	position:fixed;
	bottom: 0;
	left:0;
	right:0;
	background:#FFFAB9;
	z-index: 20;
	width:100%;
	display: block;
	padding-block: 2vw;
}

a.apply.fixed div{
	align-items: center;
	justify-content: center;
	display:grid;
	grid-template-columns: auto auto auto auto;
}


a.apply.fixed div p.f21{
	font-size:clamp(18px, 5.6vw, 22px);
	letter-spacing: .09em;
	padding-bottom: .15em;
}

a.apply.fixed div p.f13{
	font-size:clamp(10px, 3.4vw, 16px);
	letter-spacing: .05em;
}

a.apply.fixed img.sticker{
	width: clamp(52px,16.6vw,70px);
    height: auto;
	display: block;
	margin-inline: .4em;
}

a.apply.fixed img.arrow{
	width:clamp(19px,5.84vw,30px);
	height:auto;
	margin-left: .4em;
	padding-top: .2em;
}


/*header*/
header{
	width:100%;
	display: flex;
  	justify-content: center; /* 水平方向中央 */
  	align-items: center;     /* 垂直方向中央 */
  	height: clamp(50px, 13vw, 70px); 
  	position: relative;
    z-index: 10;
}

header .logo{
	text-align: center;
}

header .logo a img{
	width: clamp(214px,57vw,246px);
    max-width:100%;
	margin:0 auto;
}

/*main*/
main{
	max-width:100%;
	z-index: 9;
    position: relative;
}


.inner{
	width: min(88.9vw, 880px);
	max-width:100%;
  	margin-inline: auto;
}

main #mv{
	position:relative;
	margin-top: -9vw;
    z-index: 5;
}


main #mv h1 .pins img{
	position:absolute;
	top:20%;
	width:10.6%;
}

.animate {
  position: absolute;
  animation:
    drop 0.5s ease-out forwards,
    snap 0.5s cubic-bezier(0.34, 1.1, 0.64, 1) forwards;
  animation-delay: var(--delay, 0s), 0.8s;
}

/* 落下フェーズ（方向から中央へ） */
@keyframes drop {
  0%   { opacity: 0; transform: translate(var(--start-x, 0), var(--start-y, 0)); }
  100% { opacity: 1; transform: translate(var(--overshoot-x, 0), var(--overshoot-y, 0)); }
}

/* スナップフェーズ（通り過ぎた位置 → 中央） */
@keyframes snap {
  0%   { transform: translate(var(--overshoot-x, 0), var(--overshoot-y, 0)); }
  100% { transform: translate(0, 0); }
}

.from-top {
  --start-x: 0;     --start-y: -200px;
  --overshoot-x: 0; --overshoot-y: 5px;   /* 下に通り過ぎ */
}

.from-left {
  --start-x: -200px; --start-y: 0;
  --overshoot-x: 5px; --overshoot-y: 0;   /* 右に通り過ぎ */
}

.from-right {
  --start-x: 200px;  --start-y: 0;
  --overshoot-x: -5px; --overshoot-y: 0;  /* 左に通り過ぎ */
}

.from-top-left {
  --start-x: -200px; --start-y: -200px;
  --overshoot-x: 5px; --overshoot-y: 5px;   /* 右下に通り過ぎ */
}

.from-bottom-left {
  --start-x: -200px; --start-y: 200px;
  --overshoot-x: 5px; --overshoot-y: -5px;
}

.from-top-right {
  --start-x: 200px; --start-y: -200px;
  --overshoot-x: -5px; --overshoot-y: 5px;
}

.from-bottom-right {
  --start-x: 200px; --start-y: 200px;
  --overshoot-x: -5px; --overshoot-y: -5px;
}





main #mv h1 .pins img.pin1{
	left: .5%;
}

main #mv h1 .pins img.pin2{
	left: 13.5%;
}

main #mv h1 .pins img.pin3{
	left: 26.5%;
}

main #mv h1 .pins img.pin4{
	left: 39.5%;
}


main #mv h1 img.mcopy{
	position:static;
	margin:0 auto;
	width:100%;
	height:auto;
}

main #mv h2{
	text-align: center;
}

main #mv h2 img{
	position: absolute;
    top: 65%;
    left: 50%;
    width: 55%;
    transform: translate(-50%);
    height: auto;
}

main #mv .girl img,
main #mv .boy img{
	position:absolute;
 }

main #mv .girl img.snapg{
	top: 53%;
    left: 0;
	width: 21%;
}



main #mv .girl img.flag{
	top: 61%;
    left: 18%;
  	width: 7%;
}

main #mv .girl img.note{
	top: 50%;
    left: 0;
	width: 9%;
}

main #mv .girl img.light{
	bottom: 1.1rem;
    left: -3%;
	width: 6%;
}

main #mv .girl img.check{
	bottom: .5rem;
    left: 14%;
    width: 11%;
}



main #mv .boy img.snapb{
	top: 59%;
    right: 0;
	width: 20%;
}

main #mv .boy img.up{
	top: 52%;
    right: 15%;
    width: 7%;
}

main #mv .boy img.tools{
	top:52%;
    right: -3%;
	width: 9%;
}


main #mv .boy img.books{
	bottom: .5rem;
    right: 0;
	width: 9%;
}


main #mv .boy img.pc_i{
	bottom: 0rem;
    right: 18%;
	width: 9%;
}



#index p{
	font-size: 1.15rem;
    text-align: left;
    margin-top: 1rem;
    margin-bottom: 1rem;
    letter-spacing: .15rem;
}


#index div a{
	display:block;
	padding-block: .55em;
    padding-left: 6%;
    padding-right: 4%;
	background:#fff;
	border-radius:10px;
	position:relative;
	margin-bottom: 4vw;
}

#index div a::before{
	content:"";
	position:absolute;
	background:url(../img/ribbon.svg) no-repeat center center;
	width: 2.6%;
	aspect-ratio: 8 / 15;
    top: -1px;
    left: 3.36%;
	background-size: contain;
}

#index div a div{
	margin-right:2.4%;
	justify-content: space-around;
}

#index div a div img.icon{
	width:16.5%;
	aspect-ratio: 1 / 1;
}

#index div a div h3{
	font-size:clamp(12px, 3.7vw, 24px);
	line-height: 3.94;
	letter-spacing: .07em;
}



/*section contents1*/
#contents1{
	margin:0 auto;
	padding-top: 7vw;
}

#contents1 inner{
	margin:0 auto;
}


section .title{
    width: clamp(284px, 88.9vw, 688px);
    height: auto;
    background: none;
}

#contents1 .title h3 span{
	margin-left:10.4%;
	position:relative;
}

#contents1 .title h3 span::after{
	content:"";
	background:url(../img/sticker.png)no-repeat center center;
	background-size:contain;
    width: 3em;
    height: 1.1em;
    bottom: .1em;
    left: 6em;
	position:absolute;

}


#contents1 h4{
	font-size:1rem;
	text-align: center;
    margin-inline: auto;
    line-height: 2.5;
    margin-top: 7vw;
    letter-spacing: .12em;
}

#contents1 h4 span{
	background:#E90000;
	color:#fff;
	margin-right:1.6%;
	border-radius: 8px;
	padding-block: 0.32em;
    padding-inline: 3.6%;	
}


#contents1 .clouds{
	display:grid;
	gap:2%;
	grid-template-columns:repeat(2, 1fr);
    text-align:center;
	margin-block: 5vw 16vw;
 }
 
.cloud{
 	position:relative;	
 	display: inline-block;
  	animation: float 4s ease-in-out infinite;
 }
 
 @keyframes float {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}
 
.cloud:nth-child(1) { animation-delay: 0s; }
.cloud:nth-child(2) { animation-delay: 2s; }
.cloud:nth-child(3) { animation-delay: 1s; }
.cloud:nth-child(4) { animation-delay: 4s; }
.cloud:nth-child(5) { animation-delay: 3s; }
 
.cloud p{
  	position:absolute;
	top: 50%;
    left: 50%;
    transform: translate(-23%, -42%);
    font-size:clamp(0.72rem ,2.6vw ,1rem);
    line-height: 1.8;
    letter-spacing: 0.1em;
  }
 
.cloud.a { 
	grid-column: 1; 
	padding-top: 2vw;

}

.cloud.b { 
	grid-column: 2;
}

.cloud.b p{ 
	top: 50%;
    left: 50%;
    transform:translate(-62%, -68%);
	font-size: clamp(0.64rem, 2.6vw, 1rem);
}

.cloud.c { 
	grid-column: 1 / span 2; /* 2列分に広げる */
	justify-self: center;     /* 中央揃え */
	width: 100%;              /* 両列分を使う */
	max-width: calc( (100% - 2.4%)/2 ); /* a/b/d/e と同じ幅 */

}

.cloud.c p{ 
	top: 50%;
    left: 50%;
	transform: translate(-65%, -49%);
    letter-spacing: 0;   
    font-size: clamp(0.61rem, 2.6vw, 1rem);
}

.cloud.d { 
	grid-column: 1; 

}

.cloud.d p{ 
	top: 50%;
    left: 50%;
    transform: translate(-31%, -62%);
	letter-spacing: 0;	
    font-size: clamp(0.61rem, 2.6vw, 1rem);
}

.cloud.d p span{
	font-size: clamp(0.58rem, 2.1vw, 0.8rem);
} 


.cloud.e { 
	grid-column: 2; 
	padding-top: 5vw;
}

.cloud.e p{ 
    top: 50%;
    left: 50%;
    transform:translate(-63%, -37%);
}





#points{
	height:auto;
	position:relative;
	background: #fff;
}

#points h4{
    color: #fff;
    font-size: clamp(17px , 5vw , 20px);
	align-content: center;
}

#points h4 p{
	display:inline;
	position: relative;	
    letter-spacing: .08em;
    vertical-align: .1em;

}

#points h4 p span{
	font-size:clamp(12px ,3.7vw,14px);
	background: #9FC238;
    color: #1F3383;
    margin-left: .4em;
    border-radius: 3px;
    padding-bottom: 0.35em;
    display: inline-block;
    line-height: 1;
	vertical-align: .15em;
    padding-inline: .5em;
}


#points h4 img{
    width: 16.3%;
    height: auto;
    top: 5vw;
    left: 37.5vw;
}

#points .p_contents p{
	position:relative;
	display:block;
	width:79%;
	padding-block: 3.5vw;
	padding-left:9.86%;
	border-bottom:1px solid #1F3383;
	margin-inline: auto;
	font-size: clamp(13px ,4vw,18px);
    letter-spacing: .09em;
    line-height: 1.7;
}

#points .p_contents p::before{
	content:"";
	background:url(../img/check_y.svg) no-repeat center center;
    width: 8%;
    aspect-ratio: 34 / 36;
    background-size: contain;
    position: absolute;
    top: 3.5vw;
    left: 0;
}

#points .ex {
	width: 88%;
    margin: 6vw auto;;
	height:auto;
}

#points .ex h5{
	font-size: 1rem;
    margin-bottom: 4vw;
    letter-spacing:.12em;
}

#points .ex p{
	font-size: .75rem;
	line-height: 1.57;
    letter-spacing: .15em;
    width: 68.7%;
    font-weight: 500;
    padding-bottom: 7vw;
}

#points img{
	position:absolute;
    width: 23%;
    bottom: -5vw;
    right: 5%;
}


#contents1 h4.subtitle,
#contents2 h4.subtitle,
#contents3 h5.subtitle{
	font-size: clamp(14px,4.2vw,18px);
    text-align: left;
    padding-bottom: .9vw;
    border-bottom: 2px solid #1F3383;
    margin-bottom: 6vw;
	line-height: 2.5;
    letter-spacing: .1em;
}


#exam img{
	margin:0 auto;
	height:auto;
	position: relative;
    z-index: 9;
}

.fontbig{
	margin-block: 12vw;
    text-align: center;
    font-size: clamp(18px,5.3vw,21px);
    letter-spacing: 0.12em;
    line-height: 1.6;
}

.fontbig span{
	background-color:#F0F04B;
	display: inline-block;
    line-height: 1.1;
    padding-left: .15em;
    padding-bottom: .15em;
}

.attentionBox{
	height:auto;
    font-size: 1rem;
	border-radius: 36px;
	background:#fff;
	line-height: 1.8;
    letter-spacing: .099em;
    font-weight: 500;
    color: #262626;
    padding-block: 8.3vw;
	position: relative;
    z-index: 9;
}

.attentionBox img{
	width: 10.5%;
    display: block;
	padding-bottom: 5vw;
}

.attentionBox p {
	width:85.1%;
	display:block;
	margin-inline: auto;
}


.attentionBox p span{
	color:#E90000;
	text-decoration:underline;
}


#contents1 #selection .fomula{
	text-align:center;
	margin-bottom:3.6rem;
	position: relative;
    z-index: 9;
}

#contents1 #selection .fomula p.item{
	display:block;
	letter-spacing: 0.15em;
    line-height: 3.6;
	background:#fff;
	font-size:1.22rem;
}

#contents1 #selection .fomula span.plus{
	font-size: 1.5rem;
}


#contents1 #selection .points p.item{
	font-size:clamp(13px ,3.7vw,18px);
	text-align:center;
	display:block;
	border-radius: 9999px;
	background:#fff;
	margin-bottom: 4vw;
    letter-spacing: .1em;
    line-height: 1.7;
    aspect-ratio: 67 / 21;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}



small{
    font-size: 0.86rem;
    text-align: left;
    color: #262626;
    font-weight: 500;
    letter-spacing: .1em;
    line-height: 1.9;
	margin-left: 1em;
    text-indent: -1em;
    display: block;
    width: 98%;;
}

a.redbtn{
    border-radius: 11px;
    color: #fff;
    font-size: 1.15rem;
    text-align: center;
    position: relative;
    background: #AF1C3B;
    height: 67px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
	margin-top: 8vw;
    letter-spacing: .15em;
    font-weight: 500;
	position: relative;
}

a.redbtn::after{
	position:absolute;
	content:"";
	background:url(../img/arrow_w.svg) no-repeat center center;
	top: calc(50% - 1.7vw);
    right: 6%;
    width: 1.8vw;
    height: 3.5vw;
    background-size: contain;
}

#contents1 #access{
    letter-spacing: .12em;
    margin-bottom: 8vw;
}

#contents1 #access .maps{
	display:grid;
	gap: 2rem;
	grid-template-columns: 1fr;
}

#contents1 #access .maps .card{
	width:100%;

}

#contents1 #access .maps .card h5{
    font-size: 1.43rem;
    display: block;
    background: #1F3383;
    color: #fff;
    padding-block: .5em;
    padding-left: 4.2%;
    font-weight: 500;
	letter-spacing: .1em;
}

#contents1 #access .maps .card h6{
    font-size: 1.3rem;
	font-weight: 500;
    padding-block: 4.6vw;
}

#contents1 #access .maps .card p{
    font-size: 0.93rem;
    line-height: 1.6;
	font-weight: 500;
	    color: #262626;
}

#contents1 #access .maps .card a{
  	display: inline-block;
    font-size: 1.08rem;
    padding: 0.78em 2.32em 0.78em 4em;
  	border-radius: 24px;	
  	background:#fff;
 	border:1px solid #1F3383;
  	position:relative;
	font-weight: 500;
	margin-block: 5vw;
}

#contents1 #access .maps .card a::before{
	position:absolute;
	content:"";
	background:url(../img/googlepin.svg)no-repeat center center;
	width: 1.6em;
	height: 1.7em;
    top: 0.7em;
    left: 1.5em;
    background-size: contain;
}

#contents1 #access .maps .card iframe{
	width:100%;
	aspect-ratio: 335 / 189;
}

#contents1 #access .maps .card.illust img{
    margin: 4vw auto;
    width: 70.8%;
    display: block;
}


#contents1 .BGmap{
	width:100%;
	background:url(../img/mapBG_sp.svg)no-repeat center center;
	text-align:center;
	color:#fff;
	padding-block: 5vw;
	background-size: cover;
}



#contents1 .BGmap h4{
	font-size:1.45rem;
	margin:0 auto;
	line-height: 2;
    letter-spacing: .1em;
}

#contents1 .BGmap p{
    font-size: 1.08rem;
    margin: 5vw auto;
    letter-spacing: .3em;
    line-height: 1.8;
}

#contents1 .BGmap a.redbtn{
	width: 88.9%;
	margin-inline: auto;
	margin-bottom: 3vw;
	margin-top: 6vw;
}

/*section contents2*/
section#contents2{
	padding-top:7vw;
}

section#contents2 .title img.t_illust {
	width: 33.1%;
    left: 3%;
}


#contents2 .achievements{
	display:grid;
	gap: 10vw; 
	grid-template-columns: 1fr;
    margin-block: 12vw;
}

#contents2 .achievements a img{
	height:auto;
	margin:0 auto;	
}


#contents2 #youtube{
	max-width:100%;
	padding:3rem 1rem 4rem;
	background:#95223D;
	text-align:center;
    margin-block: 15vw 10vw;
    color: #fff;
}


#contents2 #youtube h4{
    font-size: 1.58rem;
    margin-bottom: 10vw;
	font-weight: 500;
	line-height: 1.6;
}

#contents2 #youtube h4 span{
	font-size:1.08rem;
}

#contents2 #youtube iframe{
	width:95%;
	aspect-ratio:335 / 188;
}

#contents2 #youtube a{
	display:inline-block;
    font-size: 1.08rem;
    padding:.74em 2.71em;
	border-radius: 9999px;
	border: 1px solid #FFFFFF;
	color: #fff;
    margin-top: 9vw;
}


/*section #contents3*/

section#contents3{
	padding-top:7vw;
}


#contents3 img.cost{
	margin-bottom:9vw;
}

#contents3 small.rent{
    text-indent:0;
}

#contents3 small.tuition{
	text-align:center;
}

#contents3 div.inner{
	position: relative;
}

#contents3 div.inner img.jump{
	position:absolute;
	width:33.4%;
	height:auto;
	bottom: -26vw;
    left: 0;
    z-index: 10;
}



#contents3 #bluebox{
	background: #1F3383;
  	color: #fff;
	margin-top: 13vw;
  	text-align: center;
  	padding: 4.3rem 5%;
  	clip-path: polygon(
    0 0,        /* 左端 = 左の尖り */
    50% 6.4vw,     /* 谷底 */
    100% 0,     /* 右端 = 右の尖り */
    100% 100%,  /* 右下 */
    0 100%      /* 左下 */
  )
}


#contents3 #bluebox h4{
	font-size:1.72rem;
	letter-spacing: 0.08em;
    line-height: 1.5;
    margin-block: 3vw 9vw;
}


#contents3 #bluebox .jobs{
	display:grid;
	grid-template-columns:1fr;
	margin-bottom:.6rem;
	letter-spacing: 0.15em;
}

#contents3 #bluebox .jobs .card{
	position:relative;
	margin-bottom: 5vw;
}

#contents3 #bluebox .jobs .card::before{
	content:"";
	background:url(../img/triangle.svg)no-repeat center center ;
	width: 1em;
    height: 1em;
    top: .7em;
    left: .7em;
	position:absolute;
	background-size: contain;
}


#contents3 #bluebox .jobs .card div.flexBox{
	padding-block:5.87vw;
	border:1px solid #fff;
	text-align:center;
	justify-content: center;
}



#contents3 #bluebox .jobs .card div.flexBox h5{ 
	font-size: 1.22rem;
    padding-block: 6.1vw;
	border-right:1px solid #fff;
	flex: 1;
}

#contents3 #bluebox .jobs .card div.flexBox div{
	flex: 1;
	align-content: center;
} 

#contents3 #bluebox .jobs .card div.flexBox div p.yellow{
	color:#F0F04B;
	font-size:1.72rem;
}


#contents3 #bluebox .jobs .card div.flexBox div p.subtitle{
    margin-bottom: .4em;
    font-size:1rem;
}

#contents3 #bluebox .jobs .card div.flexBox div p.yellow.small{
	font-size:1rem;
}


#contents3 #bluebox .jobs .card div.flexBox div p.subtitle.small,
#contents3 #bluebox .jobs .card div.flexBox div p.yellow.small span.msmall{
	font-size:clamp(10px,2.9vw,14px);
	padding-bottom: .7em;
}


#contents3 #bluebox .jobs .card div.flexBox div p.yellow.small span{
 	font-size:1.22rem;
}

#contents3 #bluebox .jobs .card small{
	color: #fff;
    font-size: 0.8rem;
    text-indent: 0;
    margin-left: 0;
    letter-spacing: .12em;
    line-height: 1.5;
    margin-top: .5em;
}


#contents3 #bluebox .banners div{
	margin-bottom:2.7rem;
}


#contents3 #bluebox .banners div h4{
	font-size:clamp(12px,3.7vw,15px);
	position:relative;
	margin-bottom: 3vw;
    letter-spacing: .2em;
    line-height: 1.8;
	display: inline-block;
}


#contents3 #bluebox .banners div h4::before,
#contents3 #bluebox .banners div h4::after{
	content:"";
	background:url(../img/sla_f.svg)no-repeat center center;
	position:absolute;
	background-size:contain;
	width: 1.2em;
    height: 3em;
    top: .6em;
    left: -2em;
}


#contents3 #bluebox .banners div h4::after{
	background:url(../img/sla_b.svg)no-repeat center center;
 	background-size: contain;
    right: -1.6em;
	left:auto;
}


#contents3 #bluebox a{
    display: block;
}

#contents3 #bluebox .banners div a img{
	max-width: 100%;
    width: 99.4%;
	height:auto;
	margin:0 auto;
}

#contents3 #bluebox .banners div.banner2 a img{
	width:60.6%;
}

#pagetopbtn{
	width:auto;
	margin: 13vw auto 0vw;
}

#pagetopbtn a{
  display: inline-block;
  border-radius: 50%;  /* 円形に */
  overflow: hidden;    /* はみ出し防止 */
  background: #1F3383; /* 通常時の背景色 */     /* はみ出し防止 */
}


#pagetopbtn a img{
    width: 19.7%;
    height: auto;
    transition: .1s ease-out;
    position:relative;
}






/*footer_area*/

footer{
	text-align:center;
	width:100%;
	background:#95223D;
    padding-block: 12vw;
}

footer div a{
	display:inline-block;
    width: 65.8%;
	margin: 0em auto 1.2em;
    font-size: 1rem;
    line-height: 3;
    border:1px solid #fff;
	color:#FFF;
	font-weight: 500;
    letter-spacing: .1em;
}

footer a img{
	width: 42.8%;
    margin: 5vw auto;
}

footer address{
	font-size:0.79rem;
	text-align:center;
    margin-block: 2.2em;
	font-style: normal;
	color: #fff;
    letter-spacing: .06em;
    font-weight: 500;
}

@media (min-width: 768px) {

html {
    font-size: clamp(14px, 1.8vw, 18px);
}



.sp{
	display:none;
}

.tb,.tbpc{
	display:block;
}

.inner{
    width: min(89.6vw, 980px);
}


/*bg*/

#wrapper::before {
	width: 81%;
    height: 1340px;
	clip-path: polygon(0% 61%, 100% 0%, 100% 100%);
	top: 1283px;
}

#wrapper::after{
    height: clamp(943px, 122vw,4500px);
    clip-path: polygon( 0 0,100% 83%,100% 87%, 0% 78%, 0% 75% );
	top: 1020px;
}

#wrapper span.bg_triangle::before{
    height: 1350px;
	clip-path: polygon(0 24%, 100% 0, 100% 27%, 0% 100%,  0 60%);
	top: 2473px;
}

#wrapper span.bg_triangle::after{
    height: 800px;
	clip-path: polygon(0 0, 100% 24%, 100% 60%, 100% 100%, 0 13%);
	top: 3160px;
}

#wrapper span.bg_triangle.tri2::before{
  	width: 80%;
	height: 514px;
	clip-path: polygon(0 0, 100% 15%, 0 100%);
	top: 4118px;
	opacity: .4;
}

#wrapper span.bg_triangle.tri2::after{
    height: 1370px;
	clip-path: polygon(0 0%, 100% 35%, 100% 100%, 100% 100%, 0% 25%);
	top: 4500px;
	opacity: .2;
}


#wrapper span.bg_triangle.tri3::after{
    width: 117vw;
    height: 103vw;
    clip-path: polygon(0 26%, 100% 0%, 0% 99%);
	top: 667vw;
}


#wrapper span.bg_triangle.tri3::before{
	height: 850px;
	clip-path: polygon(0% 0%, 100% 0%, 100% 49%);
	top: 6160px;
	width: 80%;
}

#wrapper span.bg_triangle.tri4::after{
	height: 1300px;
	clip-path: polygon(0 23%, 100% 0%, 100% 60%, 100% 25%, 0 100%);
	top: 6400px;
	opacity: .2;
}

#wrapper span.bg_triangle.tri4::before{
	height: 800px;
	clip-path: polygon(0 0%, 100% 21%, 100% 100%, 0% 15%, 0 60%);
	top: 7065px;
}


#wrapper span.bg_triangle.tri5::before{
    display: none;
}

/*bg-end*/



a.apply.fixed{
	bottom: auto;
	top:0;
	left:auto;
	width:auto;
	padding:1vw 2.1vw;
	border-left: 2px solid #1F3383;
	border-bottom: 2px solid #1F3383;
	border-radius: 0px 0px 0px 20px;
}

a.apply.fixed div.inner{
	grid-template-columns: auto auto;
	grid-template-rows: auto auto;  
	width:auto;
	justify-content: left;
}


a.apply.fixed div p.f21{
	font-size:clamp(19px, 2.4vw, 21px);
	padding-bottom:0;
}

a.apply.fixed div p.f13{
	font-size:clamp(13px, 1.6vw, 15px);
	grid-column: 1 / 3;
}

a.apply.fixed img.sticker{
	width: clamp(55.6px,7.2vw, 60px);
}

a.apply.fixed img.arrow.tbpc{
	width:clamp(172px, 22.3vw,200px);
	margin-left: 0;
    padding-top: 0;
    padding-bottom:.5vw;
}

a.apply.fixed p.tbpc{
	font-size:clamp(9px, 1.1vw, 12px);
	color:#000000;
	font-weight:500;
	letter-spacing: .1em;
	line-height: 1.5;
}

/*header*/
header{
  	justify-content: start;
  	height: clamp(70px, 9.1vw, 80px); 
}

header .logo a img{
	width: clamp(246px,32vw,337px);
  	margin-left:clamp(40.8px, 5.3vw,51px)
}

/*main*/
main #mv{
    width: clamp(428px,55vw,593.5px);
    margin-top: 0;
}

main #mv h1 .pins img{
    width: clamp(50.76px,6.6vw,70.36px);
}

main #mv h1 img.mcopy{
    width: clamp(428px,55vw,593.5px);
    display: block;
	margin-top: .6vw;
}


main #mv h2 img {
	width: 99.6%;
}

main #mv .girl img.snapg {
    top: 30%;
    left: -35%;
    width: 33%;
}

main #mv .girl img.flag {
    top: 5%;
	left: -19%;
    width: 11.2%;
}

main #mv .girl img.note {
    top: 22%;
	left: -37%;
    width: 16%;
}

main #mv .girl img.light {
	bottom: 0.3rem;
	left: -30%;
	width: 10.47%;
}

main #mv .girl img.check {
 	bottom: 0.5rem;
	left: -9%;
	width: 17.9%;
}

main #mv .boy img.snapb {
    top: 39%;
    right: -32.5%;
    width: 28.6%;
}

main #mv .boy img.up {
    top: 10%;
    right: -18%;
    width: 13.69%;
}

main #mv .boy img.tools {
    top: 22.5%;
    right: -35%;
    width: 14.94%;
}

main #mv .boy img.books {
    bottom: 0.5rem;
    right: -33%;
    width: 14.35%;
}


main #mv .boy img.pc_i {
    bottom: -.5rem;
    right: -11%;
    width: 16.66%;
}

#index p{
	font-size:clamp(18px,2.3vw,26px);
}

.flexBox_tb{
	display: flex;
}

#index .flexBox_tb{
    gap: clamp(13px, 1.6vw, 20px);
}

#index.inner{
	width:clamp(623px,81.1vw,880px)
}

#index div a{
	flex-basis: 33.333%;
	text-align: center;
	padding-left: 4%;
	transition: .2s;
}


#index div a::before {
    width:5.3%;
	left: 7.36%;
	aspect-ratio: 1 / 2;
}



#index div a div {
    margin-right: 0;
    display: block;
}

#index div a div img.icon {
    width: clamp(71px,9.2vw,100px);
	margin: 1vw auto 1.83vw;
    display: block;
}

#index div a div h3 {
    font-size: clamp(13px, 1.6vw, 19px);
    line-height: 1.7;
}

#index div a img.tbpc {
	width:clamp(12.75px , 1.6vw , 18px);
	margin:1.6vw auto;
}


/*section contents1*/

section#contents1,
section#contents2,
section#contents3{
	padding-top:0;
}

section .title {
	width:clamp(688px,89.5vw,980px)
}


#contents1 {
	margin: 0vw auto  5vw;
}

#contents1 h4 {
    font-size: clamp(15px,1.9vw,23px);
}

#contents1 h4 span{
	padding-inline: .97em;
	margin-right: .5em;
}

#contents1 .clouds {
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
	gap: 1.8vw;
	padding-top: 1vw;
	margin-block: 5vw 8vw;
}

.cloud p,
.cloud.b p,
.cloud.c p,
.cloud.d p,
.cloud.e p{
    font-size: clamp(11px, 1.4vw, 15px);
}


.cloud.b p{
    transform:translate(-62%, -89%);
}

.cloud.c p{
    transform: translate(-65%, -17%);
}


.cloud.d p{
    transform: translate(-31%, -54%);
}


.cloud.d p span {
    font-size: clamp(9px, 1.1vw, 11px);
}


.cloud.e p{
    transform: translate(-71%, -55%);
}



.cloud.a {
    grid-column: 1 / span 2;
	padding-top: 3vw;
	padding-inline: 1.55vw;
}

.cloud.b {
    grid-column: 3 / span 2;
    padding-inline: .27vw;
}


.cloud.c {
    grid-column: 5 / span 2;
	max-width:100%;
	padding-top: 5vw;
	width: auto;
	padding-inline: 1.03vw;
}

.cloud.d {
    grid-column: 2 / span 2;
}

.cloud.e {
    grid-column: 4 / span 2;
	padding-left: 1.58vw;
	padding-top: 0;
}




#points h4 {
    font-size: clamp(19px, 2.4vw, 29px);
	margin-bottom: 3vw;
	height: clamp(50px, 6.5vw, 71px);
}

#points h4 p span {
    font-size: clamp(13px, 1.6vw, 18px);   
   }

#points .p_contents p{
	width: 74.1%;
	font-size: clamp(17px, 2.2vw, 26px);
	padding-block: 1.5vw;
	padding-left: 2.2em;
}

#points .p_contents p::before{
	top: .8em;
	width: clamp(24px, 3vw, 34px);

}

#points .ex {
    width: 79%;
    margin: 3vw auto;
}
   
#points .ex h5 {
    font-size: clamp(14px, 1.8vw, 17px);
    margin-bottom: 2vw;
}   
   
   
#points .ex p {
    font-size: clamp(12px, 1.5vw, 14px);
	width: 87.4%;
	padding-bottom: 5.5vw;
}

#points img {
    width: 13.2%;
    bottom: -4vw;
    right: 3%;
}


#contents1 h4.subtitle,
#contents2 h4.subtitle,
#contents3 h5.subtitle {
    font-size: clamp(16px, 2vw, 24px);
    padding-bottom: 0;
    border-bottom: 3px solid #1F3383;
	margin-bottom: 3vw;
   }
    
    
.fontbig {     
	font-size: clamp(18px, 2.3vw, 26px);
	margin-block: 4vw;
}    

.attentionBox {
    border-radius: 9999px;
    font-size: clamp(11px, 1.4vw, 15px);
    display: flex;
	padding-block: 0;
	align-items: center;
	height: clamp(68px, 8.8vw, 85px);
}

#exam .attentionBox img {
	width: clamp(33px, 4.2vw, 47px);
    padding-bottom: 0;
	margin-left: auto;
	margin-right: 2em;
}

.attentionBox p {
	margin-inline: 0;
}


#contents1 #selection .fomula{
    margin-bottom: 0;
}

#contents1 #selection .fomula p.item {
    font-size: clamp(13px, 1.6vw, 19px);
    aspect-ratio: 28 / 15;
    align-content: center;
	display: flex;
	justify-content: center;
	align-items: center;
}

#contents1 #selection .fomula span.plus {
    font-size: clamp(28px, 3.6vw, 40px);
    align-content: center;
}


#selection .flexBox_tb {
	gap: clamp(14px, 1.8vw, 20px);
}

#contents1 #selection .points p.item {
    font-size: clamp(11px, 1.4vw, 17px);
	border-radius: 9999px;
	height: clamp(82px, 10.6vw, 118px);	
	margin-bottom: 3vw;
}


small {
    font-size: clamp(10px, 1.3vw, 14px);
    text-align: center;
    
   }

a.redbtn{
	font-size: clamp(13px, 1.6vw, 19px);
	width: clamp(397px, 51.6vw, 566px);
	height: clamp(54px, 7vw, 77px);
	margin-top: 4vw;
}

a.redbtn::after{
	top: calc(50% - .7vw);
    right: 5%;
    width: 1vw;
    height: 1.6vw;
}

#contents1 #access {
    margin-bottom: 8vw;
}

#contents1 #access .maps{
	grid-template-columns: auto auto;
	gap:clamp(14px,1.8vw,20px);

}

#contents1 #access .maps .card{    
	margin-bottom: 1em;
}

#contents1 #access .maps .card h5{
    font-size: clamp(16px, 2vw, 24px);
	padding-block: .32em;
}

#contents1 #access .maps .card h6 {
    font-size: clamp(14px,1.8vw,18px);
    padding-block: 1.6vw 1vw;
}

#contents1 #access .maps .card p {
    font-size: 0.8rem;
}

#contents1 #access .maps .card a{
	font-size: 0.72rem;
	padding: 0.8em 1.32em 0.78em 3.5em;
	margin-block: 2em;
}

#contents1 #access .maps .card a.okayama{
	margin-block:5.6em 2em;
}

#contents1 #access .maps .card iframe {
    aspect-ratio: 8 / 3;
}

#contents1 #access .maps .card.illust img {
    margin: 6em auto 0 5vw;
    width: 82.5%;
}
   
#contents1 .BGmap {
    background: url(../img/mapBG_tbpc.svg) no-repeat center center;
    padding-block:4vw;
	background-size: cover;
} 

#contents1 .BGmap h4 {   
	font-size:clamp(18px,2.3vw,30px);
 }
   
#contents1 .BGmap p {
    font-size: .93rem;
	margin: 0.9em auto;
}
   
#contents1 .BGmap a.redbtn {
    width: clamp(397px, 51.6vw, 566px);
	margin-bottom: 0;
    margin-top:1.7em;
}  
   


/*section contents2*/

section#contents2 .title img.t_illust {
    width: 21%;
    left: 7%;
}

#contents2 .achievements {
	column-gap: 3.5vw;
	row-gap: 5.2vw;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    margin:8vw auto 6vw;
    text-align: center;
	width: clamp(643.9px, 83.8vw, 980px);
}

#contents2 .achievements a.a{
	grid-column: 1 / span 2;
}

#contents2 .achievements a.b{
	grid-column: 3 / span 2;
}

#contents2 .achievements a.c{
	grid-column: 5 / span 2;
}

#contents2 .achievements a.d{
 	grid-column: 2 / span 2;
}

#contents2 .achievements a.e{
 	grid-column: 4 / span 2;
}


#contents2 small {
	text-align: left;
	text-indent: 0;
}
  
#contents2 #youtube{
	padding: 3.4rem 1rem 4rem;
	margin-block: 15vw 4vw;
}  
   
#contents2 #youtube h4 {
    font-size: 1.79rem;
    margin-bottom: 5vw; 
}

#contents2 #youtube h4 span {
    font-size: 1.22rem;
}

#contents2 #youtube iframe {
    width: clamp(688px, 89.5vw, 780px);
    height: clamp(386px, 50.2vw, 438px);
}

#contents2 #youtube a {
	margin-top: 6.5vw;
	margin-inline: 10vw;
}



/*section #contents3*/
    

#contents3 .fontbig {        
	margin-block: 7vw;
}

#contents3 h5.subtitle{
	margin-bottom: 4vw;
}


#contents3 h5.subtitle span{
	font-size:clamp(11px,1.4vw,18px);
	
}

#contents3 img.cost {
    margin-bottom: 6vw;
}

#contents3 img.cost.rent,
#contents3 img.cost.tuition {
    margin-bottom: 3vw;
}


#contents3 small.rent {
    text-align: left;
}

#contents3 small.tuition {
    text-align: right;
}

#contents3 div.inner img.jump {
    width: 27%;
    bottom: -19vw;
}

#contents3 #bluebox {
	margin-top: 6vw;
	padding: 9vw 5% 4vw;
}


#contents3 #bluebox h4 {
    font-size: 1.93rem;
	margin-block: 6vw 5vw;
}

#contents3 #bluebox .jobs {
	grid-template-columns: 1fr 1fr;
    gap: 1.6vw;
    width:clamp(608px, 79.1vw, 980px);
}

#contents3 #bluebox .jobs .card {
    position: relative;
    margin-bottom: 1.5vw;
}
   
#contents3 #bluebox .jobs .card::before {
    width: 4%;
    height: 6.7%;
    top: .5em;
    left: .5em;
    background-size: contain;
}

#contents3 #bluebox .jobs .card div.flexBox {
    padding-block: 2.5vw;
}

#contents3 #bluebox .jobs .card div.flexBox h5 {
    font-size: clamp(16px,2vw,25px);
    padding-block: 2.5vw;
}

#contents3 #bluebox .jobs .card div.flexBox div p.subtitle {
    font-size: clamp(11px,1.4vw,19px);
}

#contents3 #bluebox .jobs .card div.flexBox div p.yellow {
	font-size:clamp(20px,2.6vw,34px);
}

#contents3 #bluebox .jobs .card div.flexBox div p.subtitle.small, #contents3 #bluebox .jobs .card div.flexBox div p.yellow.small span.msmall {
    font-size: clamp(10px,1.3vw,16px);
}

#contents3 #bluebox .jobs .card div.flexBox div p.yellow.small {
    font-size: clamp(13px,1.69vw,24px);
	line-height: 1.4;
}

#contents3 #bluebox .jobs .card div.flexBox div p.yellow.small span {
    font-size: clamp(15px,1.9vw,28px);
}

#contents3 #bluebox .jobs .card small {
    font-size: clamp(9px,1.1vw,14px);
    line-height: 1.7;
	text-align: left;
}

#contents3 #bluebox .banners{
	justify-content: center;
	gap: 6vw;
}

#contents3 #bluebox .banners div h4 {
    font-size: clamp(11px,1.4vw,19px);
	margin-bottom: 2vw;
}

#contents3 #bluebox .banners div h4::before{
    left: -2.8em;
}

#contents3 #bluebox .banners div h4::after{
	right: -2.5em;
}

#contents3 #bluebox .banners div a img{
    width: clamp(297.85px, 38.7vw, 480px);
}

#contents3 #bluebox .banners div.banner2 a img {
    width: clamp(181px,23.5vw,292px);
}

#pagetopbtn {
    width: clamp(44px, 5.7vw, 74px);
    margin: -5vw -2.5vw 0vw auto;
}

#pagetopbtn a img {
    width: clamp(44px, 5.7vw, 74px);
}

footer {
    padding-block: 6vw;
}

footer .flexBox_tb{
	justify-content: center;
	gap: 3.2vw;
}

footer div a{
	font-size: clamp(11px,1.4vw,19px);
	width: clamp(calc(228px - 2px), 29.4vw, calc(380px - 2px));
    height: clamp(calc(45px - 2px), 5.5vw, calc(75px - 2px));
    align-content: center;
	line-height: clamp(calc(45px - 2px), 5.5vw, calc(75px - 2px));
	margin: 0;
	text-align: center;
	vertical-align: middle;
}


footer a img {
    width: 18.6%;
    margin: 6vw auto 2vw;
}


footer address {
    font-size: clamp(7px,0.9vw,13px);   
}




}


@media (min-width: 1280px) {

.pc{
	display:block;
}

.tb,
.sptb{
	display:none;
}


#wrapper::before {
	width: 77%;
	height: 2250px;
	clip-path: polygon(0% 63%, 100% 0%, 100% 100%);
	top: 1515px;
}

#wrapper::after{
	top: 1622px;
}

#wrapper span.bg_triangle::before {
	height: 2100px;
	clip-path: polygon(0 28%, 100% 0, 100% 27%, 0% 100%,  0 60%);
	top: 3500px;
}

#wrapper span.bg_triangle::after {
	height: 1140px;
	top: 4580px;
}


#wrapper span.bg_triangle.tri2::before {
	height: 704px;
	top: 6016px;
}

#wrapper span.bg_triangle.tri2::after{
	top: 6600px;
	height: 2070px;
	clip-path: polygon(0 0%, 100% 21%, 100% 100%, 100% 100%, 0% 25%);
}


#wrapper span.bg_triangle.tri3::after{
	display: none;
}

#wrapper span.bg_triangle.tri3::before {
	height: 1600px;
	clip-path: polygon(0% 9%, 100% 0%, 100% 49%);
	top: 8700px;
}

#wrapper span.bg_triangle.tri4::after{
	top: 9150px;
	clip-path: polygon(0% 30%, /* 左上 */ 101% 4%, /* 右上 */ 100% 30%, /* 右下のちょい上 */ 0% 100%, /* 下の中央を尖らせる */ 0% 0% /* 左下のちょい上 */);
	height: 2024px;
}


#wrapper span.bg_triangle.tri4::before {        
	top: 10180px;
	clip-path: polygon(0% 0%, 100% 12%, 100% 46%, 0% 4%, 0% 60%);
	height: 2500px;
}


#contents1 h4 span {
	padding-block: 0.32em .4em;
}

#points .p_contents p {
	padding-block: 1.2vw 1.5vw;
}       

#contents2 #youtube a.sptb{
	display:none;
} 

#contents2 #youtube {
	padding: 3rem 2rem 6.3rem;
}

#contents2 #youtube h4 {
    margin-bottom: 3vw;
}


}




/* hover をサポートするデバイス（PCマウスなど）だけ */
@media (hover: hover) and (pointer: fine) {


a:hover{
	opacity:.7;
}

a.apply.fixed:hover{
	opacity:1;
	background:#F0F04A;
}

#index div a:hover{
	opacity:1;
	box-shadow: 0 0 0 2px #1F3383

}

a.redbtn:hover,
footer div a:hover {
	opacity:1;
 	background:#000000;
}


#contents1 #access .maps .card a:hover{
	opacity:1;
	background:#E8E8E8;
}


#contents2 .achievements a {
  position: relative;
  display: inline-block; /* 念のため */
  overflow: hidden;      /* はみ出し防止 */
}

#contents2 .achievements a::after {
  content: "";
  position: absolute;
  inset: 0; /* top, right, bottom, left:0 */
  background: rgba(0,0,0,0.6); 
  opacity: 0;
  transition: opacity 0.2s;
}

#contents2 .achievements a:hover,
#contents2 .achievements a:hover::after {
  opacity: 1; /* ホバー時に黒幕を表示 */
}



#pagetopbtn a:hover{
	opacity: 1;
    background: #14266C; /* hover時に背景色だけ変わる */
}

#pagetopbtn a img {
  display: block; /* 画像の下の余白防止 */
}


}