@charset "utf-8";



/*====================================================================
hikaku_thumbnail
====================================================================*/
.hikaku_thumbnail_top { 
margin-top: 80px;
}

.hikaku_thumbnail_back { 
position: relative;
background: url(../../renew2024/images-page/hikaku/hikaku_thumbnail_back_01.jpg);
background-position: top center;
background-repeat: no-repeat;
background-size: cover;
}
.hikaku_thumbnail_back .white-space { 
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 10px;
background: #fff;
}

.hikaku_thumbnail { 
max-width: 1200px;
margin: 0 auto;
padding: 60px 0;
}
.hikaku_thumbnail .thumbnail { 
width: 100%;
}
.hikaku_thumbnail .thumbnail img { 
position: relative;
-webkit-user-drag: none;
}
.hikaku_thumbnail .thumbnail .sp-img { 
display: none;
}

@media screen and (max-width: 767px) { 
.hikaku_thumbnail .thumbnail .pc-img { display: none; }
.hikaku_thumbnail .thumbnail .sp-img { display: block; }
}
@media screen and (max-width: 640px) { 
.hikaku_thumbnail_top { margin-top: 60px; }
}



/*====================================================================
進路のお悩み解決ナビ
====================================================================*/
.course-navi_back { 
background: #d0e8ff;
padding: 60px 0 0 0;
}
.course-navi_wrap { 
padding: 0 15px;
}



.course-navi_list { 
max-width: 800px;
margin: 0 auto 60px auto;
}
.course-navi_list h2 { 
margin-bottom: 40px;
}
.course-navi_list ul { 
margin: 0;
padding: 0;
}
.course-navi_list ul li { 
padding-bottom: 15px;
}
.course-navi_list ul li:last-child  { 
padding-bottom: 0;
}
.course-navi_list ul li a { 
position: relative;
display: table;
width: 100%;
text-align: center;
background: #fff;
border: 2px solid #1f90ff;
border-radius: 40px;
margin-bottom: 40px;
padding: 15px 30px 15px 15px;
}
.course-navi_list ul li a:last-child { 
margin-bottom: 0;
}
.course-navi_list ul li a { 
font-size: 24px;
font-weight: bold;
color:  #111;
}
.course-navi_list ul li a .arrow-bottom { 
position: absolute;
top: 35%;
transform: translateY(-50%);
right: 15px;
display: table;
width: 10px;
height: 10px;
margin: 0 auto;
border-bottom: 2px solid #1f90ff;
border-right: 2px solid #1f90ff;
transform: rotate(45deg);
}
.course-navi_list ul li a br {
display: none;
}

@media screen and (max-width: 767px) { 
.course-navi_list ul li a { font-size: 20px; }
}
@media screen and (max-width: 640px) { 
.course-navi_list ul li a { margin-bottom: 30px; }
.course-navi_list ul li a { font-size: 18px; }
}
@media screen and (max-width: 500px) { 
.course-navi_list h2 { margin-bottom: 30px; }
.course-navi_list ul li a br { display: block; }
}



/*====================================================================
共通
====================================================================*/
@media screen and (max-width: 640px) { 
.page p { font-size: 16px; }
}

.common-title_01 h2 { 
display: block;
font-size: 50px;
font-weight: bold;
line-height: 1.2em;
text-align: center;
color: #fff;
background: #00348C;
padding: 15px;
}
.common-title_01 h2 span { 
color: #F0B402;
}

.common-title_01 .sub-title_box { 
position: relative;
display: table;
margin: 0 auto -15px auto;
padding: 40px 40px 0 40px;
}
.common-title_01 .sub-title_box img { 
position: absolute;
top: 10px;
left: 15px;
width: 40px;
}
.common-title_01 .sub-title_box .delta { 
display: table;
width: 20px;
height: 12px;
background: #1f90ff;
clip-path: polygon(50% 100%, 0 0, 100% 0);
margin: -2px auto 0 auto;
}
.common-title_01 .sub-title_box .title_box { 
display: table;
text-align: center;
color: #fff;
background: #1f90ff;
margin: 0 auto;
padding: 15px 15px;
border-radius: 10px;
}
.common-title_01 .sub-title_box .title_box h3 {
font-size: 30px;
font-weight: bold;
}

@media screen and (max-width: 767px) { 
.common-title_01 h2 { font-size: 40px; }
.common-title_01 .sub-title_box .title_box h3 { font-size: 24px; }
}
@media screen and (max-width: 500px) { 
.common-title_01 h2 { font-size: 30px; }
.common-title_01 .sub-title_box .title_box h3 { font-size: 20px; }
}



.navi_link-btn a { 
position: relative;
display: table;
width: 100%;
max-width: 600px;
font-size: 24px;
font-weight: bold;
color:  #1f90ff;
text-align: center;
background: #fff;
border: 2px solid #1f90ff;
border-radius: 40px;
margin: 0 auto;
padding: 20px 30px 20px 15px;
}
.navi_link-btn a .arrow-top { 
position: absolute;
top: 40%;
transform: translateY(-50%);
right: 15px;
display: table;
width: 10px;
height: 10px;
margin: 0 auto;
border-bottom: 2px solid #1f90ff;
border-right: 2px solid #1f90ff;
transform: rotate(-135deg);
}

@media screen and (max-width: 767px) { 
.navi_link-btn { padding: 0 15px; }
.navi_link-btn a { font-size: 20px; }
}
@media screen and (max-width: 500px) { 
.navi_link-btn a { font-size: 18px; }
}



/*====================================================================
JSCってどんなところ？
====================================================================*/
.qa_wrap { 
padding: 40px 15px 60px 15px;
}
.qa_content { 
max-width: 800px;
margin: 0 auto;
}

.qa_content ul { 
margin: 0;
padding: 0;
}

.qa_content .qa-list { 
margin-bottom: 60px;
}
.qa_content .qa-list ul li { 
padding-bottom: 30px;
}
.qa_content .qa-list ul li:last-child { 
padding-bottom: 0;
}



.qa_content .qa-banner { 
max-width: 600px;
margin: 0 auto 60px auto;
}
.qa_content .qa-banner h3 {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
font-size: 30px;
font-weight: bold;
text-align: center;
margin: 0 auto 20px auto;
}
.qa_content .qa-banner h3::before,
.qa_content .qa-banner h3::after {
display: inline-block;
content: '';
width: 3px;
height: 30px;
background-color: #111;
}
.qa_content .qa-banner h3::before {
margin-right: 15px;
transform: rotate(-25deg)
}
.qa_content .qa-banner h3::after {
margin-left: 15px;
transform: rotate(25deg)
}
.qa_content .qa-banner h3 span { color: #1e90ff; }

@media screen and (max-width: 767px) { 
.qa_content { max-width: 600px; }
}
@media screen and (max-width: 500px) { 
.qa_content .qa-banner h3 { font-size: 5.5vw; }
}



/*====================================================================
大学とココが違うJSC
====================================================================*/
.difference_wrap { 
padding: 60px 15px 60px 15px;
}
.difference_content { 
max-width: 800px;
margin: 0 auto;
}

.difference_content .difference_list { 
margin-bottom: 60px;
}
.difference_content .difference_list ul { 
margin: 0;
padding: 0;
}
.difference_content .difference_list ul li { 
padding-bottom: 60px;
}
.difference_content .difference_list ul li:last-child { 
padding-bottom: 0;
}

.difference_content .difference_list ul li h3 { 
font-size: 40px;
font-weight: bold;
text-align: center;
color: #fff;
background: #00348C;
clip-path: polygon(2% 0, 100% 0%, 98% 100%, 0% 100%);
margin-bottom: 40px;
padding: 10px 15px;
}
.difference_content .difference_list ul li h3 span { 
color: #F0B402;
}

.difference_content .difference_list ul li p { 
line-height: 2em;
margin: 0;
}
.difference_content .difference_list ul li p strong { 
display: block;
font-size: 30px;
font-weight: bold;
text-align: center;
color: #1E90FF;
margin-bottom: 15px;
}
.difference_content .difference_list ul li p strong .small { 
font-size: 14px;
color: #111;
}

.difference_content .difference_list ul li p .c_yellow { 
font-weight: bold;
background: linear-gradient(transparent 50%, #fbee01 30%);
}

.difference_content .difference_list ul li .photo { 
max-width: 500px;
margin: 0 auto 40px auto;
}

@media screen and (max-width: 767px) { 
.difference_wrap { padding: 40px 15px 40px 15px; }
.difference_content { max-width: 600px; }
.difference_content .difference_list ul li { padding-bottom: 40px; }
.difference_content .difference_list ul li h3 { font-size: 30px; margin-bottom: 30px; }
.difference_content .difference_list ul li p strong { font-size: 24px; margin-bottom: 10px; }
.difference_content .difference_list ul li .photo { max-width: 400px; margin-bottom: 30px; }
}
@media screen and (max-width: 500px) { 
.difference_content .difference_list ul li h3 { font-size: 24px; }
.difference_content .difference_list ul li p strong { font-size: 20px; }
.difference_content .difference_list ul li p strong .small { font-size: 12px; }
.difference_content .difference_list ul li p { font-size: 14px; }
.difference_content .difference_list ul li .photo { max-width: 300px; }
}



/*====================================================================
在校生インタビュー
====================================================================*/
.y-movie-wrap { 
padding: 60px 15px; 
}
.y-movie-box { 
max-width: 800px; 
margin: 0 auto; 
z-index: 2; 
}
.y-movie-content-wrap { 
position: relative; 
width: 100%; 
padding-top: 56.25%;
margin-bottom: 60px;
}
.y-movie-content-wrap iframe { 
position: absolute; 
top: 0; 
left: 0; 
width: 100%; 
height: 100%; 
}
.y-movie-content-wrap img { 
position: absolute; 
top: 0; 
left: 0; 
cursor: pointer; 
width: 100%; 
}	

@media screen and (max-width: 767px) { 
.y-movie-wrap { padding: 40px 15px 60px 15px; }
.y-movie-box { max-width: 600px; }
.y-movie-content-wrap { margin-bottom: 40px; }
}



/*====================================================================
進路に悩んだ先輩からのメッセージ
====================================================================*/
.message_wrap { 
padding: 60px 15px 120px 15px;
}
.message_content { 
max-width: 800px;
margin: 0 auto;
}

@media screen and (max-width: 767px) { 
.message_wrap { padding: 40px 15px 100px 15px; }
.message_content { max-width: 600px; }
}



.message_content .message_person { 
margin-bottom: 20px;
}
.message_content .message_person h3 { 
font-size: 24px;
font-weight: bold;
line-height: 1.5em!important;
color: #00348C;
text-align: center;
margin-bottom: 10px;
}
.message_content .message_person h3 .name { 
font-size: 30px;
}
.message_content .message_person p { 
text-align: center;
color: #00348C;
margin: 0;
}
.message_content .message_person .photo { 
max-width: 500px;
margin: 0 auto 20px auto;
}



.message_box {
position: relative;
margin-bottom: 60px;
}
.message_box input {
display: none;
}
/*開くためのボタンとテキストを隠すグラデーションの設定*/
.message_box label {
position: absolute;
display: flex;
flex-direction: column;
align-items: center;
z-index: 1;
bottom: -10px;
width: 100%;
height: 140px; /* グラデーションの高さ */
cursor: pointer;
text-align: center;
background: rgb(255,255,255);
background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
}
/* 開いた時にグラデーションを消す */
.message_box input:checked + label {
background: inherit;
}
.message_box input:checked + label {
/* display: none ; 閉じるボタンを消す場合コメントアウトを外す */
}
.message_box .ma_container {
overflow: hidden;
height: 150px; /* 開く前に見えている部分の高さ */
transition: all 0.5s;
}
.message_box .ma_container p { 
line-height: 2em;
margin: 0; 
}
.message_box .ma_container p .c_yellow { 
font-weight: bold;
background: linear-gradient(transparent 50%, #fbee01 30%);
}
/*続きをよむボタン*/
.message_box label:after,
.message_box label::before {
content: '';
position: absolute;
line-height: 2.5rem;
}
.message_box label:after {
font-size: 20px;
font-weight: bold;
z-index: 2;
bottom: 20px;
width: 200px;
content: 'MORE';
color: #1f90ff;
background: #fff;
border: 2px solid #1f90ff;
border-radius: 40px;
padding: 10px 10px 30px 10px;
}
.message_box label::before {
position: absolute;
bottom: 35px;
left: 50%;
z-index: 3;
width: 10px;
height: 10px;
border-bottom: 2px solid #1f90ff;
border-right: 2px solid #1f90ff;
transform: rotate(45deg);
}
/*閉じるボタン*/
.message_box input:checked + label:after {
content: '閉じる';
}
.message_box input:checked + label:before {
bottom: 30px;
transform: rotate(-135deg);
}
.message_box input:checked ~ .ma_container {
height: auto;
padding-bottom: 100px; /* 閉じるボタンのbottomからの位置 */
transition: all 0.5s;
}

@media screen and (max-width: 500px) { 
.message_content .message_person h3 { font-size: 20px; }
.message_content .message_person p { font-size: 14px; }
.message_box .ma_container p { font-size: 14px; }
}



/*====================================================================
さらに詳しくJSCを知る！
====================================================================*/
.more_back { 
position: relative;
background: url(../../renew2024/images-top/parts/background_lightblue.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding: 0 15px 60px 15px;
}
.more_content { 
max-width: 800px;
margin: 0 auto;
}



.more_content .more-title { 
width: 100%;
position: absolute;
top: -1em;
left: 50%;
transform: translateX(-50%);
}
.more_content .more-title h3 {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
font-size: 30px;
font-weight: bold;
text-align: center;
margin: 0 auto;
}
.more_content .more-title h3::before,
.more_content .more-title h3::after {
display: inline-block;
content: '';
width: 3px;
height: 30px;
background-color: #111;
}
.more_content .more-title h3::before {
margin-right: 15px;
transform: rotate(-25deg)
}
.more_content .more-title h3::after {
margin-left: 15px;
transform: rotate(25deg)
}
.more_content .more-title h3 span { 
color: #1e90ff; 
}

.more_content .banner_box { 
padding-top: 3em;
}
.more_content .banner_box ul { 
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto 20px auto;
padding: 0;
}
.more_content .banner_box ul:last-child { 
margin: 0 auto;
}
.more_content .banner_box ul li { 
width: 49%;
}
.more_content .banner_box ul li:last-child { 
margin-left: 2%;
}

@media screen and (max-width: 500px) { 
.more_content .more-title h3 { font-size: 6vw; }
}



/*====================================================================

====================================================================*/