@charset "utf-8";

/* CSS Document */

/*------------------------------------------------------------------------------
　Top Page
-------------------------------------------------------------------------------*/

#main .innerBlock { max-width:1200px; padding-top:60px;}

@media only screen and (max-width: 768px) {
#main .innerBlock { padding-top:35px;}
}

/* Visual
----------------------------------------------- */
#visualTop {
 clear:both; width:100%; margin:0; padding:0;
 background:url(../images/top/visual_bg_pc.png) no-repeat center top; background-color: #77CDD3;}

#visualTop .blockL { float:left; width:68.33%; margin:0; padding:0; text-align:center;}
#visualTop .blockL h2 { clear:both; margin:15px 0 38px 0; padding:0;}

#visualTop .blockR { float:right; width:29.16%; margin:0; padding:0; text-align:center;}

@media only screen and (max-width: 1200px) {
#visualTop {
 background:#77CDD3 url(../images/top/visual_bg_sp.png) no-repeat center top; background-color: #77CDD3;}
#visualTop .blockL { clear:both; float:none; width:calc(100% - 20px); margin-bottom:30px;}
#visualTop .blockL h2 { margin-bottom:30px;}
#visualTop .blockR { clear:both; float:none; width:100%;}
}

@media only screen and (max-width: 768px) {
#visualTop .blockL { width:100%;}
#visualTop .blockL h2 { margin-bottom:20px;}
}

/* News
----------------------------------------------- */
#newsTop {
 clear:both; width:100%; margin:0; padding:0; overflow:hidden; background:#2F4546;}

#newsTop .innerBlock { padding-top:30px; padding-bottom:32px;}

#newsTop h2 {
 clear:none; float:left; width:140px; margin:-2px 0 0 0; padding:0 0 0 10px; text-align:left; color:#FBC51B; font-size:34px; font-weight:normal;}

#newsTop dl {
 float:right; width:calc(100% - 140px); margin:0; padding:8px 0 0 20px; color:#FFF;}
#newsTop dl dt { clear:left; float:left; width:120px; margin:0; padding:3px 0 0 0;}
#newsTop dl dd { margin:0 0 0 135px; padding:0;}
#newsTop dl dd a { color:#FFF;}

@media only screen and (max-width: 768px) {
#newsTop .innerBlock { padding-top:20px; padding-bottom:25px;}
#newsTop h2 { width:90px; padding-left:0; font-size:30px;}
#newsTop dl { width:calc(100% - 90px); padding-top:7px; padding-left:10px;}
#newsTop dl dt { clear:both; float:none; width:100%; margin:0;}
#newsTop dl dd { margin-left:0;}
}

/* School
----------------------------------------------- */
#schoolTop {
 clear:both; width:100%; margin:0; padding:0; overflow:hidden;
 background:url(../images/top/bg_school.jpg) no-repeat center center;}

#schoolTop h2 {
 clear:both; min-height:160px; margin:0 0 30px 0; padding:65px 0 0 0; font-size:40px; color:#333; font-weight:normal;
 background:url(../images/top/school_title.png) no-repeat center top;}

#schoolTop p { clear:both; margin:0 0 90px 0; padding:0; text-align:center; font-size:17px; line-height:2;}

#schoolTop .pageList {
 clear:both; width:100%; margin:0; padding:0 20px; overflow:hidden;
 display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex;
 -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap;
 -webkit-box-pack:justify; -webkit-justify-content:space-between; -ms-flex-pack:justify; justify-content:space-between;}

#schoolTop .pageList .pageBox {
 width:30.17%; max-width:350px; margin:0; padding:0; text-align:center;}
#schoolTop .pageList .pageBox .pagePhoto { clear:both; margin:0 0 15px 0; padding:6px; background:#FFF;}
#schoolTop .pageList .pageBox a { display:block; color:#333; text-decoration:none;}
#schoolTop .pageList .pageBox h3 {
 clear:both; max-width:180px; margin:0 auto; padding:0 0 12px 0; font-size:20px; font-weight:normal;}
#schoolTop .pageList .pageBox:first-of-type h3 { border-bottom:1px solid #F4A55E;}
#schoolTop .pageList .pageBox:nth-of-type(2) h3 { border-bottom:1px solid #FBC51B;}
#schoolTop .pageList .pageBox:last-of-type h3 { border-bottom:1px solid #A0CD50;}
#schoolTop .pageList .pageBox h3:before {
 height:30px; margin:0 auto 10px auto; padding:0; display:block; content:""; vertical-align:middle;}
#schoolTop .pageList .pageBox:first-of-type h3:before {
 width:29px; background:url(../images/top/school_icon_about.png) no-repeat center 2px;
 background-size:29px 26px;}
#schoolTop .pageList .pageBox:nth-of-type(2) h3:before {
 width:30px; background:url(../images/top/school_icon_campuslife.png) no-repeat center top;
 background-size:30px 30px;}
#schoolTop .pageList .pageBox:last-of-type h3:before {
 width:36px; background:url(../images/top/school_icon_japaneselife.png) no-repeat center 3px;
 background-size:36px 25px;}

@media only screen and (min-width: 1921px) {
#schoolTop { background-size:100% auto;}
}

@media only screen and (max-width: 1200px) {
#schoolTop .pageList { padding-right:0; padding-left:0;}
#schoolTop .pageList .pageBox { width:31.47%;}
}

@media only screen and (max-width: 768px) {
#schoolTop h2 {
 min-height:138px; margin-bottom:20px; font-size:32px; background-size:180px auto;}
#schoolTop p { margin-bottom:40px; font-size:16px;}
#schoolTop .pageList .pageBox h3 { padding-bottom:10px; font-size:18px;}
}

@media only screen and (max-width: 468px) {
#schoolTop .pageList .pageBox { width:100%; max-width:350px; margin:0 auto 30px auto;}
#schoolTop .pageList .pageBox:last-of-type { margin-bottom:0;}
}

/* Message
----------------------------------------------- */
#messageTop {
 clear:both; width:100%; margin:0; padding:0; overflow:hidden;
 background:url(../images/top/message_bg_pc.png) no-repeat center top;}

#messageTop .innerBlock { max-width:1328px; padding-top:30px;}

#messageTop h2 {
 clear:both; width:100%; margin:0 0 110px 0; padding:0; color:#F4A55E; font-size:40px; font-weight:normal;}

#messageTop .messageList {
 clear:both; width:100%; margin:0; padding:0; overflow:hidden;
 display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex;
 -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap;
 -webkit-box-pack:justify; -webkit-justify-content:space-between; -ms-flex-pack:justify; justify-content:space-between;}
#messageTop .messageList .messageBox {
 width:13.90%; max-width:160px; margin:0 10px; padding:0; text-align:center;}
#messageTop .messageList .messageBox:nth-of-type(even) { margin-top:100px;}
#messageTop .messageList .messageBox.empty { display:none;}
#messageTop .messageList .messageBox .scaleBox {
 width:100%; height:auto; margin:0 0 5px 0; padding:0; overflow:hidden; border-radius:50%;}
#messageTop .messageList .messageBox .scaleBox .scaleImage {
 width:100%; height:auto; transition-duration:0.5s;}
#messageTop .messageList .messageBox .scaleBox .scaleImage:hover {
 cursor:pointer; opacity:1; transform:scale(1.2, 1.2);}
#messageTop .messageList .messageBox a { display:block; color:#333; text-decoration:none;}
#messageTop .messageList .messageBox .name {
 clear:both; margin:0 0 10px 0; padding:8px 0 12px 0; font-size:18px; border-bottom:1px solid #F2A522;}
#messageTop .messageList .messageBox .country { clear:both; margin:0; padding:0; font-size:14px;}
#messageTop .messageList .messageBox .country img { clear:both; margin:0 0 3px 0; padding:0;}

@media only screen and (max-width: 838px) {
#messageTop .messageList .messageBox { width:28.99%; max-width:180px; margin-bottom:30px;}
#messageTop .messageList .messageBox:nth-of-type(even) { margin-top:0;}
#messageTop .messageList .messageBox.empty { height:0; margin-top:0; margin-bottom:0; padding:0; display:block;}
}

@media only screen and (max-width: 768px) {
#messageTop .innerBlock { padding-bottom:15px;}
#messageTop {
 background:#FAD360 url(../images/top/message_bg_sp.png) no-repeat center top;}
#messageTop h2 { margin:0 0 100px 0; font-size:32px;}
#messageTop .messageList .messageBox .name { margin:0 0 15px 0; font-size:16px;}
#messageTop .messageList .messageBox .country { font-size:12px;}
}

@media only screen and (max-width: 568px) {
#messageTop .messageList { padding-right:0; padding-left:0;}
#messageTop .messageList .messageBox {
 width:42.71%; max-width:100%; margin-right:10px; margin-left:10px;}
}

/* Access
----------------------------------------------- */

#map-canvas { clear:both; width:100%; height:400px; margin:0; padding: 0; position:relative; overflow:hidden;}
#map-canvas iframe { position: absolute; top: 0; left: 0; width: 100%; }