@charset "UTF-8";
/*---------------------------------------------------------
ALL
---------------------------------------------------------*/
#todai-area p,#todai-area li ,#todai-area span{
font-size: clamp(1rem, 1.2vw, 1.3rem);
line-height: 1.4;
}
section{
padding:0 0 6vh;
}
.top-ttl{
font-size: clamp(1.3rem, 4vw, 3rem)!important;
font-weight: 600;
line-height: 1.4;
}
.semi-ttl{
font-size: clamp(1.1rem, 3vw, 2rem)!important;
font-weight: 600;
line-height: 1.3;
}
.third-ttl{
font-size: clamp(1rem, 3.25vw, 1.8rem)!important;
font-weight: 600;
line-height: 1.3;
}
.fourth-ttl{
font-size: clamp(.9rem, 3vw, 1.6rem)!important;
font-weight: 600;
line-height: 1.3;
}
[class*="waku-white-3"] {
--x: 0 0 var(--text-outline--width, 3px) var(--text-outline--color, #fff);
--y: var(--x), var(--x), var(--x), var(--x), var(--x), var(--x) /* 6 */;
text-shadow: var(--y), var(--y), var(--y), var(--y), var(--y), var(--y) /* 6 * 6 = 36 */;
}
[class*="waku-white-6"] {
--x: 0 0 var(--text-outline--width, 6px) var(--text-outline--color, #fff);
--y: var(--x), var(--x), var(--x), var(--x), var(--x), var(--x) /* 6 */;
text-shadow: var(--y), var(--y), var(--y), var(--y), var(--y), var(--y) /* 6 * 6 = 36 */;
}
.line-mark{
background: linear-gradient(transparent 50%, #ffff00 50%);
}
.cb {
clear: both;
}
.bg-wam-green{
background:#007240;
}
.img-circle{
width: 100px;
height: 100px;
border-radius: 50%;
object-fit: cover;
}
/*---------------------------------------------------------
CTA-中学受験/中高一貫サポート/大学受験
---------------------------------------------------------*/
.cta-todaijigakuen-area{
background: #542a0e;
width:100%;
padding:6vh 0;
}
.cta-todaijigakuen-box{
background: #fff;
padding:2vh 2vw;
width: 90%;
margin: 0 auto;
max-width: 700px;
}
.cta-todaijigakuen-ttl{
display: flex;
align-items: center;
justify-content: center;
}
.cta-todaijigakuen-ttl > span{
background: #827100;
font-size: clamp(2.5rem, 6vw, 4rem)!important;
color: #fff;
padding:1%;
width: 14%;
margin: 0 .5%;
text-align: center;
font-family: 'Noto Serif JP', serif;
font-weight:700;
}
.cta-todaijigakuen-list{
margin: 0 2vw;
}
.cta-todaijigakuen-list >li{
position: relative;
padding: 0 1rem 0 0;
}
.cta-todaijigakuen-list >li,
.cta-todaijigakuen-list >li >span{
font-size: clamp(1.4rem, 3vw, 2rem);
}
.cta-todaijigakuen-list >li:before{
font-family: "FontAwesome";
font-weight: 700;
content: '\f14a';
color: #d80720;
margin: 0 5px 0 0;
}
.cta-todaijigakuen-list >li >span{
color: #d80720;
font-weight:700;
}
.cta-btnbox{
margin: 2vh auto 0;
width: 100%;
max-width: 600px;
text-align:center;
}
.cv-btn{
display: block;
font-size: clamp(1.8rem, 2.5vw, 3rem)!important;
background: #d80720;
color: #fff;
text-align: center;
text-decoration: none;
border: 1px solid #d80720;
border-bottom: 5px solid #9f000c;
padding:1rem 2rem 0 1rem;
border-radius: 50vh;
position: relative;
}
.cv-btn > img{
width: 90%;
}
.cv-btn::after {
font-family: "FontAwesome";
content: "\f054";
position: absolute;
right: 15px;
font-size: 1.5rem !important;
color: #fff;
bottom: 0;
font-weight: 700;
top: 51%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
}
@media screen and (max-width: 640px) {
/* 640pxまでの幅の場合に適応される */
.cta-todaijigakuen-ttl > span {
width: 16%;
margin: 0 .5%;
}
.cta-todaijigakuen-list{
margin: 0;
}
}
/*---------------------------------------------------------
btn-共通
---------------------------------------------------------*/
.link-about01{
background: #fff;
border: 1px solid #007240;
color: #007240;
text-decoration: none;
}
.link-about01{
position: relative;
padding: 1.5vh 3.5vw 1.5vh 2vw;
border-radius: 50vh;
font-size: clamp(1rem, 2.5vw, 1.1rem)!important;
width: 80%;
max-width: 300px;
font-weight: 700;
display: inline-block;
text-align: center;
}
.link-about01::after{
font-family: "FontAwesome";
content: "\f054";
position: absolute;
right: 10px;
bottom: 0;
font-weight: 900;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
}
.link-about01::after{
color: #007240;
}
.link-about01:hover{
background: #007240;
color: #fff;
text-decoration: none;
border: 1px solid #007240;
}
.link-about01:hover:after{
color: #fff;
}
/*---------------------------------------------------------
共通見出し
---------------------------------------------------------*/
.todaijigakuen-ttl-box{
position:relative;
background:#fff;
padding:1vh 1vw;
text-align:center;
border:2px solid #333;
color:#333;
margin: 0 0 2vh;
}
.todaijigakuen-ttl-box:after,.todaijigakuen-ttl-box:before{
border: solid transparent;
content:'';
height:0;
width:0;
pointer-events:none;
position:absolute;
top:100%;
left:50%;
}
.todaijigakuen-ttl-box:after{
border-color: rgba(255, 255, 255, 0);
border-top-width:17px;
border-bottom-width:17px;
border-left-width:10px;
border-right-width:10px;
margin-left: -10px;
border-top-color:#FFFFFF;
}
.todaijigakuen-ttl-box:before{
border-color: rgba(51, 51, 51, 0);
border-top-width:20px;
border-bottom-width:20px;
border-left-width:12px;
border-right-width:12px;
margin-left: -12px;
margin-top: 2px;
border-top-color:#333333;
}
.naname {
font-style: oblique 90deg;
}
/*---------------------------------------------------------
メインビュー
---------------------------------------------------------*/
#TopMain img{
width: 100%;
max-width: 1920px;
display: block;
margin-left: auto;
margin-right: auto;
}
#TopMain{
background: #F9F9F3;
padding:0;
}
@media screen and (min-width:768px) and ( max-width:1024px) {
/* 画面サイズが768pxから820pxまではここを読み込む */
#gNavi > .inner > .inner > ul > li > a,
#gNavi > .inner > .inner > ul > li > span {
font-size: 1.35vw !important;
line-height: 1.2 !important;
}
}
@media screen and (max-width: 640px) {
/* 640pxまでの幅の場合に適応される */
}
/*---------------------------------------------------------
SV-中学受験/中高一貫サポート/大学受験
---------------------------------------------------------*/
.bg-l-yellow{
background: #ffffeb;
}
.border-t-brown{
border-top: solid 5px #827100;
}
.sv-area{
padding:4vh 0 0;
}
/*---------------------------------------------------------
WAMの東大式個別指導とは?
---------------------------------------------------------*/
.about-todaijigakuen-area{
padding:6vh 0;
}
/*---------------------------------------------------------
お子さんの苦手や目標に合わせ
最適な東大生教師が徹底指導!
---------------------------------------------------------*/
.shido-todaijigakuen-area{
padding:6vh 0;
}
.bg-l-green{
background: #f2fce6;
}
.shido-box{
position: relative;
margin: 2vh 0;
padding: 3vh 2vw;
border:dotted #542a0e 2px;
border-radius: 4px;
background: #fff;
}
.shido-box-ttl{
position: absolute;
display: inline-block;
top: -11px;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
color:#542a0e;
font-size: clamp(1rem, 3vw, 1.5rem)!important;
font-weight:700;
white-space: nowrap;
}
.shido-voice-box{
display: flex;
justify-content: center;
}
.shido-voice-box > div{
margin: 2vh 1vw;
}
.shido-voice{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.shido-voice > li{
padding:1%;
}
.shido-voiceboxA{
}
.shido-voiceboxB{
}
.shido-voiceboxC{
}
.shido-voiceboxC-ttl{
font-size: clamp(1rem, 4vw, 1.1rem)!important;
font-weight:700;
text-align:center;
color:#e01c24;
line-height: 1.3;
}
.triangle-pc,.triangle-sp {
width: 0;
height: 0;
border-style: solid;
}
.triangle-pc{
border-right: 30px solid transparent;
border-left: 30px solid transparent;
border-top: 30px solid #007240;
border-bottom: 0;
}
.triangle-sp {
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 15px solid #007240;
border-right: 0;
}
.shido-voiceTeacher{
padding: 1vh 1vw;
background: #fff;
border: solid 2px #007240;
border-left: 10px solid #007240;
margin:1%;
}
.shido-voiceTeacher > li > p{
font-size:1rem !important;
line-height:1.6;
}
.shido-voiceTeacherPct{
display: flex;
align-items: center;
}
.shido-voiceTeacherPct > li{
margin: 1%;
}
.shido-voiceTeacherPctA{
width: 30%;
}
.shido-voiceTeacherPct > li > p{
margin: 0 0 1vh;
}
.shido-voiceTeacherPct > li > p,
.shido-voiceTeacherPct > li > p >span{
font-size: .9rem !important;
}
.shido-voiceTeacherPct > li > p >span{
color: #007240;
border: 1px solid #007240;
padding: 3px 5px;
margin-right: 5px;
}
.shido-voiceTeacher-ttl > span{
font-size: clamp(1.1rem, 2vw, 1.2rem) !important;
}
@media screen and (max-width: 820px) {
/* 640pxまでの幅の場合に適応される */
.shido-voice-box {
flex-direction: column;
}
.shido-voice {
flex-direction: row;
}
}
@media screen and (max-width: 640px) {
/* 640pxまでの幅の場合に適応される */
.shido-voiceboxC-ttl{
font-size: .85rem!important;
}
}
/*---------------------------------------------------------
2023年度合格者の声
---------------------------------------------------------*/
.gokaku-voice-area{
background: repeating-linear-gradient(-45deg, #ffe6e6, #ffe6e6 10px, #ffeaea 0, #ffeaea 20px);
padding:0 0 6vh;
}
.gokaku-voice-area-ttl-box{
padding: 2vh 1vw;
text-align: center;
}
.gokaku-voice-box{
background: #fff;
padding: 2vh 1vw;
border-radius: 1vh;
box-shadow: 0px 1px 7px 0px rgba(0, 0, 0, 0.25);
margin: 1%;
}
.shido-voice-box02 .slick-next{
left: 10px;
}
.shido-voice-box02 .slick-prev{
right: 10px;
}
.gokaku-voice-box > p,
.gokaku-voice-box > p > span{
font-size:1.4rem !important;
}
.gokaku-voice-boxPctBg{
position: relative;
}
.gokaku-voice-boxPct{
position: absolute;
top: 5%;
left: 5%;
}
.gokaku-voice-boxPct > h3{
font-size: clamp(1.4rem, 1.5vw, 2rem)!important;
font-weight:700;
line-height: 1.2;
}
.gokaku-voice-boxPct > p > span{
font-size: 1rem !important;
padding: 5px 10px;
}
.gokaku-voice-boxPct > p,.gokaku-voice-box > p,.gokaku-voice-box > p >span{
font-size: 1rem !important;
}
.fc-gokaku{
color:#fc4242;
}
.bg-gokaku{
background: #fc4242;
}
@media screen and (max-width: 640px) {
/* 640pxまでの幅の場合に適応される */
.gokaku-voice-box{
padding: 2vh 2vw;
}
}
/*---------------------------------------------------------
WAM東大式個別指導が必要か?
---------------------------------------------------------*/
.seiseki-up-area{
padding:6vh 0;
}
.seiseki-up-area-box > img{
width:35%;
float:right;
}
.seiseki-up-area-box-listBox{
background: #eeeae7;
border: 2px solid #542a0e;
margin: 4vh 0 0;
}
.seiseki-up-area-box-list-ttl{
background: #542a0e;
}
.seiseki-up-area-box-list{
margin: 2vh 2vw;
}
.seiseki-up-area-box-list > li{
position: relative;
padding: 0 1rem 0 0;
}
.seiseki-up-area-box-list >li,
.seiseki-up-area-box-list >li >span{
font-size: clamp(1rem, 3vw, 1.6rem)!important;
font-weight:700;
}
.seiseki-up-area-box-list >li:before{
font-family: "FontAwesome";
font-weight: 900;
content: '\f14a';
color: #d80720;
margin: 0 5px 0 0;
}
.seiseki-up-area-box-list >li >span{
color: #d80720;
font-weight:700;
}
/*---------------------------------------------------------
ポイント
---------------------------------------------------------*/
.todaijigakuen-point-area{
position: relative;
}
.arrow-box {
display: inline-block;
width: 127.3px;
height: 100px;
background: #e01c24;
clip-path: polygon(0 36.4%, 18.6% 36.4%, 18.6% 0, 81.4% 0, 81.4% 36.4%, 100% 36.4%, 50% 100%);
}
.arrow-box > span{
text-align: center;
display: block;
margin: 2rem 0 0;
font-weight: 700;
font-size: 1.5rem !important;
}
.arrow-box-area{
position: absolute;
top: -20px;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
}
.arrow-box-mt{
padding: 90px 0 0;
}
.method-box{
display: flex;
justify-content: center;
align-items: center;
}
.method-box > li{
border-radius: 1vh;
padding: 1vh 1vw;
display: flex;
align-items: center;
justify-content: center;
}
.method-boxA{
background: #007bc5;
}
.method-boxA,.method-boxC{
width:44%;
}
.method-boxB{
width:6%;
}
.method-boxC{
background: #fe6041;
}
.point-number-area{
display: flex;
}
.point-number-area > div{
display: flex;
flex-direction: column;
justify-content: center;
}
.point-ttl-main{
font-size: clamp(1.6rem, 5vw, 2.1rem)!important;
margin: .5vh 0 0;
}
.point-ttl-sub{
}
.point-number-box{
width: 20%;
max-width: 80px;
background: #fff;
border: 2px solid #007240;
border-radius: 1vh;
margin-right: 2%;
aspect-ratio: 1;
align-items: center;
}
.point-number-box-txt,.point-number-box-txt > span,.point-number-box-txt02,.point-number-box-txt02 > span{
text-align: center;
font-family: "din-condensed", sans-serif;
}
.ff-din2014{
font-family: "din-2014", sans-serif !important;
}
.point-number-box-txt,.point-number-box-txt > span{
color:#007240;
line-height: 1;
}
.point-number-box-txt{
font-size: clamp(1.6rem, 4vw, 2rem)!important;
font-weight: 700;
}
.point-number-box-txt > span{
display: block;
font-size: 1rem !important;
}
.point-number-box-txt02{
font-size: clamp(2rem, 5vw, 4rem)!important;
line-height: 1;
border-radius: 1vh;
margin: 0 0 2vh;
}
.point-number-box-txt02 > span{
font-size: clamp(1.6rem, 3vw, 2.5rem)!important;
}
.point-box{
background: #fff;
padding: 3vh 3vw;
border-radius: 1vh;
box-shadow: 0px 1px 7px 0px rgba(0, 0, 0, 0.25);
}
@media screen and (max-width: 640px) {
/* 640pxまでの幅の場合に適応される */
.point-number-box{
max-width: 55px;
}
.point-number-box-txt > span{
font-size: .7rem !important;
}
}
/*---------------------------------------------------------
WAM東大式個別指導と
他予備校・塾との違い
---------------------------------------------------------*/
.difference-area{
padding:6vh 0;
}
.midashi-ttl {
position: relative;
display: inline-block;
}
.midashi-ttl:before {
content: '';
position: absolute;
bottom: -15px;
display: inline-block;
width: 100px;
height: 4px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
background-color: #542a0e;
border-radius: 1px;
}
/*---------------------------------------------------------
受講の流れ
---------------------------------------------------------*/
ul.stepflow-todai {
border: none;
margin: 1em 0.5em;
padding: 0;
list-style: none;
}
ul.stepflow-todai > li:before, ol.stepflow-todai > li:before {
background-color:#542a0e!important;
}
.stepflow-todai>li {
position: relative;
padding: 0 0 1.5em 1.8em;
}
.stepflow-todai>li:before {
content: "";
width: 2px;
background: #542a0e;
display: block;
position: absolute;
top: 28px;
bottom: 0;
left: 11px;
}
.stepflow-white {
content: '';
display: inline-block;
position: absolute;
top: 5px;
left: 0;
width: 14px;
height: 14px;
border-radius: 50%;
border: solid 3px #98C757;
}
.stepflow-black {
content: '';
display: inline-block;
position: absolute;
top: 5px;
left: 5px;
width: 14px;
height: 14px;
border-radius: 50%;
border: solid 1px #542a0e;
background-color: #542a0e;
outline: #542a0e solid 2px;
outline-offset: 2px;
}
.stepflow_label-todai {
padding: 0px 0px 8px 0px;
margin-bottom:8px;
color: #542a0e;
font-family: "din-condensed", sans-serif;
font-size: clamp(.9rem, 2vw, 1.6rem);
font-weight: bold;
line-height: 1;
}
.stepflow_title {
font-size: clamp(1.6rem, 3vw, 2.25rem)!important;
font-weight: 700;
line-height: 1.5;
margin-bottom:15px;
color: #ee4d47;
}
.stepflow_content {
line-height: 1.5;
margin-top: .5em;
padding: 0 0 1.5em;
border-bottom: dashed 1px #cccccc;
}
/*ステップフローのCSSここまで*/
.f-box-flow{
display: flex;
}
.f-box-flow > li{
}
.text-box-flow{
padding-right:1%;
width:58%;
}
.pct-box-flow{
padding-left:1%;
width:38%;
}
@media screen and (max-width: 640px) {
/* 640pxまでの幅の場合に適応される */
.f-box-flow{
flex-direction: column;
}
.text-box-flow,.pct-box-flow{
width:100%;
padding:0;
}
}