@charset "utf-8";

/* サッカー専攻科 */

/* 共通
-------------------------------------------------------------- */
.c_white { color: #fff!important; }
.c_black { color: #111!important; }

.c_gakka_01 { color: #00348c!important; }
.b_gakka_01 { background: #00348c!important; }
.b_gakka_02 { background: #d9e1ee!important; }

#container P { font-size: 16px; line-height: 1.7em; margin-top: 0; font-feature-settings: "palt"; text-align: justify; text-justify: inter-ideograph; }
#container a { font-size: 16px; line-height: 1.5em; margin-top: 0; }
#container a:hover { opacity: 0.8; }
#container img { vertical-align: bottom; }

.wrap { padding: 0 15px; }
.content { max-width: 1200px; margin: 0 auto; }

.mbt10 { margin-top: 10px; }
.mgb15 { margin-bottom: 15px; }
.mgb30 { margin-bottom: 30px; }
.mgb50 { margin-bottom: 50px; }
.pb0 { padding-bottom: 0!important; }

/* 共通アンカーリンク */
#field { display: block; height: 80px; }
#license { display: block; height: 80px; }
#feature { display: block; height: 80px; }
#graduates { display: block; height: 80px; }
#students { display: block; height: 80px; }
#informal { display: block; height: 80px; }



/* main
-------------------------------------------------------------- */
.main { max-width: 1200px; margin: 0 auto 60px auto; }
.main h2 { font-family: 'Noto Serif JP', serif; font-size: 30px; text-align: center; padding: 10px 15px; }

.main_box {
position: relative;
width: 100%;
max-width: 1200px;
height: 640px;
background-image: url('../../images-renewal/gakka/soccer/main_p02.jpg');
background-position: center top;
background-repeat: no-repeat;
}

.main_box .text_box {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
max-width: 1200px;
padding: 10px 15px;
}

.main_box .text_box h2 { 
font-family: "Noto Sans JP","ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
font-weight: 900;
font-size: 80px;
color: #00348c!important;
text-align: left;
margin-bottom: 10px;
padding: 0;
text-shadow: -2px -2px 0 #fff, -2px 0 0 #fff, -2px 2px 0 #fff,0 -2px 0 #fff,0 2px 0 #fff, 2px -2px 0 #fff,2px 0 0 #fff,2px 2px 0 #fff;
}

.main_box .text_box p { font-weight: bold; }
.main_box .text_box p span { font-size: 20px; margin-right: 20px; }
.main_box .text_box p br { display: none; }

.main_box .link { float: right; }
.main_box .link a { color: #111!important; }
.main_box .link p { color: #111!important; margin: 0; }

.main_box .mb { display: none; }

.main_box .delta_title { width: 100%; max-width: 250px; font-size: 24px; font-weight: bold; color: #fff; padding: 10px 15px; clip-path: polygon(0 0, 100% 0%, 90% 100%, 0% 100%); }

@media screen and ( max-width: 1000px ) {
.main_box { background-image: none; height: auto; }
.main_box .text_box { position: static; background: #00348c; overflow: auto; }
.main_box .text_box h2 { font-size: 60px; color: #fff!important; text-shadow: none; }
.main_box .text_box p { color: #fff!important; }
.main_box .link a { color: #fff!important; }
.main_box .mb { display: block; position: relative; }
.main_box .delta_title { position: absolute; top: 0; left: 0; z-index: 1; }
}
@media screen and ( max-width: 767px ) {
.main h2 { font-size: 24px; }
.main_box .text_box h2 { font-size: 50px; }
.main_box .delta_title { max-width: 200px; font-size: 16px; }
}
@media screen and ( max-width: 600px ) {
.main h2 { font-size: 18px; }
.main_box .text_box h2 { font-size: 40px; }
.main_box .text_box p { font-size: 14px!important; }
.main_box .text_box p span { font-size: 16px!important; }
.main_box .link a { font-size: 14px!important; }
.main_box .link p { font-size: 14px!important; }
}
@media screen and ( max-width: 500px ) {
.main h2 { font-size: 16px; }
.main_box .text_box h2 { font-size: 30px; }
.main_box .text_box p span { margin-right: 0; }
.main_box .text_box p br { display: block; }
.main_box .link a { font-size: 12px!important; }
.main_box .link p { font-size: 12px!important; }
.main_box .delta_title { position: inherit; max-width: 100%; clip-path: none; }
}



/* about
-------------------------------------------------------------- */
.about_title h3 { font-size: 30px; font-weight: bold; line-height: 1.5em; text-align: center; margin-bottom: 40px; }
.about_text { max-width: 700px; margin: 0 auto 60px auto; }
.about_text p { margin-bottom: 0; }

@media screen and ( max-width: 767px ) {
.about_title h3 { font-size: 24px; margin-bottom: 20px; }
}



/* anchor
-------------------------------------------------------------- */
.anchor_back {
background: url(../../renew-images/amikake01_008.png);
background-color: #005bab;
background-repeat: repeat,no-repeat;
}

.anchor_box { max-width: 730px; margin: 0 auto; padding: 30px 15px; }

.anchor_box ul { display: flex; margin: 0 auto 10px auto; padding: 0; }
.anchor_box ul:last-child { margin: 0 auto; }
.anchor_box li { width: 100%; padding-right: 10px; }
.anchor_box li:last-child { padding-right: 0; }

.anchor a {
display: flex;
align-items: center;
justify-content: space-between;
color: #111;
background: #fff;
padding: 10px;
font-size: 14px!important;
}
.anchor img { width: 30px; }

@media screen and ( max-width: 767px ) {
.anchor a { font-size: 12px!important; }
}
@media screen and ( max-width: 650px ) {
.anchor_box ul { display: block; }
.anchor_box li { padding-right: 0; margin-bottom: 10px; }
.anchor_box li:last-child { margin-bottom: 0; }
.anchor a { font-size: 16px!important; }
}



/* field
-------------------------------------------------------------- */
.field { max-width: 700px; margin: 0 auto; padding: 20px; }
.field h3 { font-size: 24px; font-weight: bold; text-align: center; line-height: 1.5em; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid #fff; color: #fff; }
.field .box { display: flex; }
.field ul { width: 50%; margin: 0; padding: 0; }
.field li { font-size: 16px; line-height: 1.5em; margin-bottom: 7px; color: #fff; padding-left: 0.9em; text-indent: -0.9em;}
.field li:before { content: ''; display: inline-block; width: 0.8em; height: 0.8em; background: #FFF; border-radius: 50%; margin-right: 0.2em; }

.field a {
display: flex;
align-items: center;
justify-content: space-between;
color: #111;
background: #fff;
padding: 10px;
font-size: 16px;
}
.field img { width: 30px; }

@media screen and ( max-width: 650px ) {
.field .box { display: block; }
.field ul { width: 100%; }
}



/* shikaku
-------------------------------------------------------------- */
.shikaku { max-width: 700px; margin: 0 auto; padding: 20px; }
.shikaku h3 { font-size: 24px; font-weight: bold; text-align: center; line-height: 1.5em; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid #111; color: #111; }
.shikaku .box { display: flex; }
.shikaku ul { width: 50%; margin: 0; padding: 0; }
.shikaku li { font-size: 16px; line-height: 1.5em; margin-bottom: 7px; color: #111; padding-left: 0.9em; text-indent: -0.9em;}
.shikaku li:before { content: ''; display: inline-block; width: 0.8em; height: 0.8em; background: #111; border-radius: 50%; margin-right: 0.2em; }

@media screen and ( max-width: 650px ) {
.shikaku .box { display: block; }
.shikaku ul { width: 100%; }
}



/* work
-------------------------------------------------------------- */
.work { max-width: 700px; margin: 0 auto; border-top: 1px solid #111; }
.work h3 { font-size: 24px; line-height: 1.5em!important; color: #fff; background: #111; margin-top: 0; margin-bottom: 30px; display: inline-block; padding: 5px 10px; }
.work .title {font-size: 38px; font-weight: bold; line-height: 1.25em; margin-bottom: 20px;}

.work .one { display: flex; align-items: flex-start; margin-bottom: 30px; }
.work .one img { width: 60%; }
.work .one p { width: 40%; margin-bottom: 0; margin-left: 10px; }

.work .two { display: flex; margin-bottom: 30px; position: relative; }
.work .two:last-child { margin-bottom: 0; }
.work .two .box { width: 50%; }
.work .two .box:first-child { margin-right: 15px; }
.work .two .box:last-child { margin-left: 15px; }
.work .two .box img { margin-bottom: 10px; }
.work .two .box p { margin-bottom: 0; }
.work .facilities{margin: 10px 0 0;}
.work .facilities a {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    color: #FFF!important;
    background: #00348c;
    padding: 10px;
    font-size: 16px;
    margin-top: 10px;
}

@media screen and ( max-width: 650px ) {
.work h3 { font-size: 20px; }
.work .title {font-size: 30px;}
.work .one { display: block; }
.work .one img { width: 100%; }
.work .one p { width: 100%; margin-left: 0; }
.work .two { display: block; }
.work .two .box { width: 100%; }
.work .two .box:first-child { margin-right: 0; margin-bottom: 30px; }
.work .two .box:last-child { margin-left: 0; }
}
@media screen and ( max-width: 500px ) {
.work h3 { font-size: 16px; }
.work .title {font-size: 24px;}
}



/* topic
-------------------------------------------------------------- */
.topic_delta img { display: block; width: 100%; height: auto; }
.delta_angle01 { z-index: -1; margin-top: -100px; }

.topic { max-width: 1230px; margin: 0 auto; padding: 100px 15px; display: flex; justify-content: center; }

.topic_box { max-width: 350px; margin: 0 15px; }
.topic_box .title { font-size: 24px; font-weight: bold; line-height: 1.5em; margin-bottom: 40px; }
.topic_box .title img { display: block; margin-bottom: 30px; }

.topic_box .two_phot { display: flex; align-items: flex-start; width: 100%; max-width: 350px; }
.topic_box .two_phot img { width: 49%; height: auto!important; }
.topic_box .two_phot img:last-child { margin-left: 2%; }

.topic_box strong p { border-top: 1px solid #111; margin-bottom: 30px; padding-top: 15px; }

.topic_box .message { border-top: 1px solid #111; padding-top: 30px; }
.topic_box .message .p01 img { width: 170px; margin-bottom: 15px; }
.topic_box .message h3 { font-size: 24px; font-weight: bold; line-height: 1.5em; margin-top: 0; margin-bottom: 15px; }

.name_pc {display: block;}
.name_mb {display: none;}



/* folding */
.folding { display: none; }
.folding label img { display: block; margin: 0 auto; }
.folding label:hover { cursor: pointer; opacity: 0.8; }
.folding input { display: none; }
.folding .folding_box {
height: 0px;
padding: 0px;
overflow: hidden;
-webkit-transition: 0.6s;
transition: 0.6s;
opacity: 0;
}
.folding input:checked ~ div {
height: auto;
padding: 30px 5px 5px 5px;
opacity: 1;
}



@media screen and ( max-width: 1200px ) {
.topic_box { max-width: 300px; }
.topic_box .title { font-size: 20px; }
}
@media screen and ( max-width: 1000px ) {
.topic_box { max-width: 250px; }
.topic_box .title { font-size: 18px; }
}
@media screen and ( max-width: 850px ) {
.topic { display: block; }
.topic_box { max-width: 640px; margin: 0 auto 100px auto; }
.topic_box:last-child { margin: 0 auto; }
.topic_box .title { font-size: 24px; text-align: center; }
.topic_box .title img { margin: 0 auto 20px auto; }
.topic_box .two_phot { max-width: 640px; }
.normal { display: none; }
.folding { display: block; }
}
@media screen and ( max-width: 650px ) {
.delta_angle01 { margin-top: 50px; }
}
@media screen and ( max-width: 500px ) {
.topic_box .title { font-size: 20px; }
.topic_box .message h3 { font-size: 20px; }
.name_pc {display: none;}
.name_mb {display: flex; justify-content: center; margin-top: 15px;}
}
@media screen and ( max-width: 400px ) {
.topic_box .title { font-size: 18px; }
}



/* youtube
-------------------------------------------------------------- */
.youtube { max-width: 700px; margin: 0 auto 140px auto; position: relative; }
.youtube h3 { font-size: 24px; font-weight: bold; line-height: 1.5em; text-align: center; color: #fff; padding: 10px; margin-top: 0; margin-bottom: 20px; }

.youtube_box {
position: relative;
width: 100%;
height: 0;
padding-top: 56.25%;
}

.youtube_box iframe{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

@media screen and ( max-width: 500px ) {
.youtube h3 { font-size: 20px; }
}
@media screen and ( max-width: 400px ) {
.youtube h3 { font-size: 18px; }
}



/* voice_01
-------------------------------------------------------------- */
.voice_01 { max-width: 700px; margin: -80px auto 60px auto; }
.voice_01 h3 { font-size: 24px; font-weight: bold; line-height: 1.5em; text-align: center; color: #fff; padding: 10px; margin-top: 0; margin-bottom: 20px; }
.voice_01 .link img { display: block; margin: 0 auto 60px auto; }

@media screen and ( max-width: 500px ) {
.voice_01 h3 { font-size: 20px; }
}



/* voice_02
-------------------------------------------------------------- */
.voice_02 { max-width: 700px; margin: 0 auto 140px auto; }
.voice_02 h3 { font-size: 24px; font-weight: bold; line-height: 1.5em; text-align: center; color: #fff; padding: 10px; margin-top: 0; margin-bottom: 20px; }

.voice_02 .interview_box { 
position: relative;
border: 2px solid #00348c;
padding: 20px 15px;
}
.voice_02 .interview_box .delta { 
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50px;
background: #00348c;
clip-path: polygon(100% 0, 0 0, 0 100%);
}

.voice_02 .interview_box .photo { 
display: flex;
justify-content: flex-start;
align-items: flex-end;
max-width: 500px;
margin: 0 auto 20px auto;
position: relative;
z-index: 1;
}
.voice_02 .interview_box .photo .p01 { width: 43%; }
.voice_02 .interview_box .photo .p02 { width: 55%; margin-left: 2%; }

.voice_02 .interview_box .name p { font-size: 20px!important; }

.voice_02 .interview_box .text_box p:last-child { margin-bottom: 0; }
.voice_02 .interview_box .text_box p span { background: linear-gradient(transparent 0%, #fff000 0%); }

@media screen and ( max-width: 500px ) {
.voice_02 h3 { font-size: 20px; }
}



/* banner
-------------------------------------------------------------- */
.banner { max-width: 1000px; margin: 0 auto 20px auto; display: flex; }
.banner02 { max-width: 1000px; margin: 0 auto 80px auto; display: flex; }
.banner .box:nth-child(2) { margin-left: 10px; }
.banner02 .box:nth-child(2) { margin-left: 10px; }

@media screen and ( max-width: 767px ) {
.banner { display: block; }
.banner02 { display: block; }
.banner .box { max-width: 500px; margin: 0 auto; }
.banner .box:nth-child(2) { max-width: 500px; margin: 20px auto 0 auto; }
.banner02 .box { max-width: 500px; margin: 0 auto; }
.banner02 .box:nth-child(2) { max-width: 500px; margin: 20px auto 0 auto; }
}



/* 追加
-------------------------------------------------------------- */
/* バナーここから */
.banner_box { 
max-width: 730px;
margin: 0 auto;
padding: 0 15px 100px 15px;   
}
.selection_banner { 
background: rgba(6, 71, 146, 0.8);
margin-top: 40px;
}
.selection_banner h3 { 
font-size: 35px;
font-weight: bold;
line-height: 1.4em!important;
text-align: center;
color: #fff;
background: none;
margin: 0;
padding: 10px;
}
.selection_banner h3 .large { display: block; font-size: 45px; font-weight: bold; color: #fff000; }
.selection_banner .delta01 {
height: 50px; 
background: rgb(6,71,146);
background: linear-gradient(90deg, rgba(6,71,146,1) 0%, rgba(6,71,146,1) 20%, rgba(255,255,255,1) 100%);
clip-path: polygon(0 0, 0 100%, 100% 0); 
}
.selection_banner .delta02 {
height: 50px; 
background: rgb(6,71,146);
background: linear-gradient(270deg, rgba(6,71,146,1) 0%, rgba(6,71,146,1) 20%, rgba(255,255,255,1) 100%);
clip-path: polygon(100% 0, 0 100%, 100% 100%); 
}
@media (max-width: 767px){
.selection_banner h3 { font-size: 5vw }
.selection_banner h3 .large { font-size: 6vw }
.selection_banner .delta01 { height: 25px; }
.selection_banner .delta02 { height: 25px; }
}
/* バナーここまで */


.topic_02 { 
max-width: 1230px;
margin: 0 auto;
padding: 100px 15px 50px 15px;    
}
.topic_02 .line { margin-bottom: 100px; }
.topic_02 .back_01 { background: #eaf4f9; padding: 15px; }
.topic_02 .back_02 { background: #fff; padding: 15px; }


.topic_02 .point_title {
position: relative;
margin-bottom: 15px;
padding: 0.75em 0.5em 0.5em 0.5em;
border: solid 3px #00348c;
border-radius: 8px;
}
.topic_02 .point_title .box-title {
position: absolute;
display: inline-block;
top: -13px;
left: 10px;
padding: 0 9px;
line-height: 1;
font-size: 18px;
color: #00348c;
background: #d9e1ee;
font-weight: bold;
}
.topic_02 .point_title h3 { margin: 0!important; }


/* 1ブロックここから */
.topic_02 .one_box .flex_box { 
display: flex;
justify-content: flex-start;
align-items: flex-start;
}
.topic_02 .one_box .flex_box h3 { font-size: 24px; font-weight: bold; color: #00348c; margin-bottom: 10px; }
.topic_02 .one_box .flex_box .text { width: 49%; }
.topic_02 .one_box .flex_box .photo { width: 49%; margin-left: 2%; }
.topic_02 .one_box .flex_box .photo .sp-img { display: none; }
/* 1ブロックここまで */


/* 2ブロックここから */
.topic_02 .two_box { 
display: flex;
justify-content: flex-start;
align-items: flex-start;   
}
.topic_02 .two_box .flex_box { 
width: 49%;
display: flex;
justify-content: flex-start;
align-items: flex-start;
}
.topic_02 .two_box .flex_box:last-child { 
width: 49%;
margin-left: 2%;
}
.topic_02 .two_box .flex_box h3 { font-size: 20px; font-weight: bold; color: #00348c; margin-bottom: 10px; }
.topic_02 .two_box .flex_box .text { width: 49%; }
.topic_02 .two_box .flex_box .photo { width: 49%; margin-left: 2%; }
/* 2ブロックここまで */


/* カリキュラムここから */
.topic_02 .curriculum h3 { 
font-size: 30px;
font-weight: bold;
text-align: center;
color: #fff;
background: #00348c;
padding: 10px;
}
.topic_02 .curriculum .process { width: 100%; background: #fff; margin: 0 auto 30px auto; padding: 15px; }
.topic_02 .curriculum .process .sp-img { display: none; }
.topic_02 .curriculum .timetable  { width: 700px; margin: 0 auto; background: #fff; padding: 15px; }
.topic_02 .curriculum .timetable img { width: 100%; }
/* カリキュラムここまで */


/* 動画ここから */
.topic_02 .movie_content { background: #eaf4f9; padding: 40px 15px; }
.topic_02 .movie_title { 
display: flex;
justify-content: flex-start;
align-items: center;
margin-bottom: 40px;
}
.topic_02 .movie_title h3 { font-size: 24px; font-weight: bold; color: #00348c; margin-bottom: 10px; }
.topic_02 .movie_title p:last-child { margin-bottom: 0; }
.topic_02 .movie_title .photo { width: 100%; max-width: 100px; margin-right: 20px; }
.topic_02 .movie_title .photo img { width: 100%; }

.topic_02 .movie_content .movie_box:last-child { margin-bottom: 0; }
.topic_02 .movie_box { 
background: #fff;
filter: drop-shadow(5px 5px 5px #ccc);
border-radius: 15px;
margin-bottom: 40px;
padding: 15px;
}
.topic_02 .movie_box .flex_box { 
display: flex;
justify-content: flex-start;
align-items: center; 
}
.topic_02 .movie_box .flex_box .box { width: 49%; }
.topic_02 .movie_box .flex_box .box:last-child { width: 49%; margin-left: 2%; }
.topic_02 .movie_box h3 { 
display: flex;
justify-content: flex-start;
align-items: center;
font-size: 24px;
font-weight: bold;
color: #00348c;
margin-bottom: 10px;
}
.topic_02 .movie_box h3 .no {
font-size: 16px;
color: #fff;
background: #00348c;
border-radius: 50%;
margin-right: 10px;
padding: 5px 10px;
}
.topic_02 .movie_box p { font-size: 20px!important; }
.topic_02 .movie_box p strong { background: linear-gradient(transparent 20%, #fff000 20%); }
.topic_02 .movie_box iframe { max-width: 100%; }
.topic_02 .movie_box img { width: 100%; }
.topic_02 .movie_box .youtube_box { position: relative; width: 100%; padding-top: 56.25%; }
.topic_02 .movie_box .youtube_box iframe { position: absolute; top: 0; right: 0; width: 100%; height: 100%; }
/* 動画ここまで */



@media (max-width: 767px){
.banner_box { padding: 0 15px 50px 15px; }
.topic_02 .one_box .flex_box h3 { font-size: 20px; }
.topic_02 .two_box { display: block; }
.topic_02 .two_box .flex_box { width: 100%; }
.topic_02 .two_box .flex_box:last-child { width: 100%; margin-left: 0; margin-top: 40px; }
.topic_02 .movie_box h3 { font-size: 20px; }
.topic_02 .movie_title h3 { font-size: 20px; }
.topic_02 .movie_box .flex_box { display: block; }
.topic_02 .movie_box .flex_box .box { width: 100%; }
.topic_02 .movie_box .flex_box .box:last-child { width: 100%; margin-left: 0; margin-top: 15px; }
.topic_02 .curriculum { max-width: 700px; margin: 0 auto; }
.topic_02 .curriculum .process .pc-img { display: none; }
.topic_02 .curriculum .process .sp-img { display: block; width: 100%; }
}
@media (max-width: 650px){
.topic_02 .one_box .flex_box { display: block; }
.topic_02 .one_box .flex_box .text { width: 100%; }
.topic_02 .one_box .flex_box .photo { width: 100%; margin-left: 0; margin-top: 20px; }
.topic_02 .one_box .flex_box .photo .pc-img { display: none; }
.topic_02 .one_box .flex_box .photo .sp-img { display: block; }
.topic_02 .two_box .flex_box { display: block; }
.topic_02 .two_box .flex_box .text { width: 100%; }
.topic_02 .two_box .flex_box .photo { width: 100%; margin-left: 0; margin-top: 20px; }
}
@media (max-width: 500px){
.topic_02 .curriculum h3 { font-size: 24px; }
}



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