@charset "utf-8";

/* CSS Document */

* { margin:0; padding:0; font-size:100%;}
*, *:before, *:after { box-sizing:border-box;}

html { overflow-y:scroll; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;}

body {
 margin:0; padding:0; color:#444;
 font-size:16px/1.8;
font-family: 'Lato', 'Noto Sans JP', '游ゴシック Medium', '游ゴシック体', 'Yu Gothic Medium', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}

body:has(> iframe) {
	position: relative;
	top: 57px;
}

@media only screen and (max-width: 768px) {
body { font-size:14px;}
}



/*------------------------------------------------------------------------------
　Common
-------------------------------------------------------------------------------*/

header, main, nav, section, footer,
div, pre, form, input, textarea, blockquote { margin:0; padding:0; display:block;}
address, caption, cite, code, dfn, em, var { font-style:normal;}

h1, h2, h3, h4, h5, h6 { margin:0; padding:0; font-size:100%; line-height:1.2;}

table { font-size:100%; border-collapse:collapse; border-spacing:0;}
td, th { margin:0; padding:0; text-align:left; font-style:normal;}

dl, dt, dd { margin:0; padding:0;}
ul, ol, li { margin:0; padding:0; list-style:none;}

img { max-width:100%; height:auto; vertical-align:top; border:none;}

i, em { color:#F00; font-weight:bold; font-style:normal;}
.fontL { font-size:18px;}

/* Link
----------------------------------------------- */
a:link, a:visited { color:#19ADB2; text-decoration:underline;}
a:hover { text-decoration:none;}

@media screen and (min-width:769px) {
a[href^="tel:"] { pointer-events:none; color:#333; text-decoration:none;}
}

/* Place
----------------------------------------------- */
.clear { clear:both;}

.alignL { text-align:left;}
.alignR { text-align:right;}
.alignC { text-align:center;}

.floatL { float:left; margin:0; padding:0;}
.floatR { float:right; margin:0; padding:0;}

/*------------------------------------------------------------------------------
　Layout
-------------------------------------------------------------------------------*/

/* Header
----------------------------------------------- */
#head { position:fixed; width:100%; min-height:95px; margin:-95px 0 0 0; padding:0 0 0 20px; overflow:hidden; z-index:10; background-color:rgba(255,255,255,0.85);}
#head h1 { float:left; width:400px; margin:0; padding:20px 0 0 0;}

#head .headBlockR { float:right; width:calc(100% - 400px); margin:0; padding:20px 0 0 0;}

#navBar { float:left; width:calc(100% - 140px); margin:0; padding:0;}
#navMenu { clear:both; width:100%; margin:0; padding:0; text-align:center;}
#navMenu ul { clear:both; margin:0 auto; padding:0; display:inline-block; overflow:hidden;}
#navMenu ul li {
 float:left; min-width:100px; min-height:60px; max-width:110px; margin:0; padding:0 10px; text-align:center; border-right:1px solid #999;}
#navMenu ul li:first-child { border-left:1px solid #999;}
#navMenu ul li a {
 min-height:60px; margin:0; padding:30px 0 0 0; position:relative; display:block;
 color:#333; font-size:14px; text-decoration:none;}
#navMenu ul li a:hover { color:#333; text-decoration:none;}
#navMenu ul li:first-child a { background:url(../images/share/navi_icon_home.png) no-repeat center 6px;}
#navMenu ul li:nth-child(2) a { background:url(../images/share/navi_icon_about.png) no-repeat center 8px;}
#navMenu ul li:nth-child(3) a { background:url(../images/share/navi_icon_campuslife.png) no-repeat center 7px;}
#navMenu ul li:nth-child(4) a { background:url(../images/share/navi_icon_japaneselife.png) no-repeat center 9px;}
#navMenu ul li:nth-child(5) a { background:url(../images/share/navi_icon_entry.png) no-repeat center 6px;}
#navMenu ul li:nth-child(6) a { background:url(../images/share/navi_icon_access.png) no-repeat center 6px;}
#navMenu ul li:nth-child(7) a { background:url(../images/share/navi_icon_recruit.png) no-repeat center 7px;}
#navMenu ul li.translationSP { display:none;}

.translationPC { float:right; margin:0 20px 0 0; padding:18px 0 0 0;}
.translationPC ul { clear:both; margin:0; padding:0;}
.translationPC ul li { float:left; width:100px; margin:0; text-align:center; font-size:12px;}
.translationPC ul li a {
 clear:both; width:100%; margin:0; padding:6px 0 7px 0; display:block;
 color:#FFF; text-decoration:none; background:#444;}
 .translationPC ul li a:hover { color:#333; background:#FFF; border:1px solid #333;}
#navMenu * { transition:0.5s;}
#navMenu ul li a:before, #navMenu ul li a:after {
 width:0; bottom:0; position:absolute; display:block; content:"";
 transition:all .3s ease; border-bottom:2px solid #77CDD3;}
#navMenu ul li a:before { left:50%;}
#navMenu ul li a:after { right:50%;}
#navMenu ul li a:hover:before, #navMenu ul li a:hover:after,
#navMenu ul li a.active:before, #navMenu ul li a.active:after { width:50%;}
}

@media only screen and (min-width: 769px) {
#head { padding-right:20px; padding-left:20px;}
}

@media only screen and (max-width: 1385px) {
#head { min-height:90px;}
#head h1 { padding-top:17px;}
.translationPC { display:none;}
}

@media only screen and (max-width: 768px) {
#head { padding-right:15px; padding-left:15px;}
}

@media only screen and (max-width: 568px) {
#head { min-height:95px;}
#head h1 { width:330px; padding-top:32px;}
}

@media only screen and (max-width: 468px) {
#head { min-height:60px; margin:-75px 0 0 0; padding-right:10px; padding-left:10px;}
#head h1 { width:280px; padding-top:17px;}
}

@media only screen and (max-width: 368px) {
#head h1 { min-height:70px; width:250px; padding-top:20px;}
}

/* Container
----------------------------------------------- */
#container { clear:both; width:100%; margin:95px 0 0 0; padding:0; overflow:hidden;}
@media only screen and (max-width: 568px) {
#container { margin:75px 0 0 0;}
}

/* Main
----------------------------------------------- */
#main { clear:both; margin:0; padding:0; text-align:left;}
#main a:hover img, #main a[href]:hover img { opacity:0.7;}
#main h2 { clear:both; margin:0; padding:0; text-align:center; font-weight:normal;}

#main .innerBlock { clear:both; max-width:1120px; margin:0 auto; padding:0 0 80px 0; overflow:hidden;}

@media only screen and (max-width: 1140px) {
#main .innerBlock { padding:0 0 40px 20px; padding-left:20px;}
}

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

@media only screen and (max-width: 468px) {
#main .innerBlock { padding-right:10px; padding-left:10px;}
}

/* Footer
----------------------------------------------- */
#foot { clear:both; width:100%; margin:0; padding:0; text-align:center; color:#FFF;
background:url(../images/share/bg_footer.png) no-repeat center top; background-color: #77CDD3;}

#foot a { color:#FFF; text-decoration:none;}
#foot a:hover { color:#FFF; text-decoration:underline;}

#foot .footInner { clear:both; max-width:1200px; min-height:300px; margin:0 auto; padding:35px 0 0 0; overflow:hidden;}
#foot .footInner h3 { clear:both; margin:0 auto 20px auto; padding:0 5px 20px 5px; display:inline-block; border-bottom:1px solid #FFF;}
#foot .footInner h3 img { width:300px;}
#foot .footInner .add { clear:both; margin:0 0 10px 0; padding:0; line-height:1.6;}
#foot .footInner .tel { clear:both; margin:0 0 7px 0; padding:0; font-size:22px; font-weight:normal;}
#foot .footInner .fax { margin-left:18px;}
#foot .footInner .mail { clear:both; margin:0; padding:0; font-size:16px; font-weight:normal;}

#foot .copyright {
 clear:both; width:100%; min-height:100px; margin:0; padding:46px 0 0 0;
 font-size:12px; line-height:1.3; background:rgba(51, 51, 51, 0.85);}

@media only screen and (max-width: 1385px) {
#foot .copyright { min-height:90px; padding-top:40px;}
}

@media only screen and (min-width: 769px) {
#foot .footInner { padding-right:20px; padding-left:20px;}
#foot .copyright { padding-right:20px; padding-left:20px;}
}

@media only screen and (max-width: 768px) {
#foot .footInner { min-height:initial; min-height:auto; padding:30px 15px 30px 15px;}
#foot .footInner h3 { margin-bottom:25px; padding-bottom:20px;}
#foot .footInner .tel { margin-bottom:5px; font-size:23px;}
#foot .footInner .fax { margin-left:15px;}
#foot .footInner .mail { font-size:17px;}
#foot .copyright { padding-right:15px; padding-left:15px;}
}

@media only screen and (max-width: 568px) {
#foot .footInner h3 { max-width:85%; margin-bottom:20px;}
#foot .footInner .tel { line-height:1.5;}
#foot .footInner .fax { margin:0; padding:0; display:block;}
#foot .copyright { min-height:initial; min-height:auto; padding:25px 80px 25px 15px; text-align:left;}
}

@media only screen and (max-width: 468px) {
#foot .footInner { padding-right:10px; padding-left:10px;}
#foot .copyright { padding-left:10px;}
}

/* Pagetop
----------------------------------------------- */
#pagetop { position:fixed; bottom:15px; right:15px; z-index:9999;}
#pagetop a { width:70px; height:70px; display:block;}
#pagetop a:hover { opacity:0.7;}

@media only screen and (max-width: 1385px) {
#pagetop { bottom:10px;}
}

@media only screen and (max-width: 768px) {
#pagetop { bottom:14px;}
#pagetop a { width:60px; height:60px;}
}

@media only screen and (max-width: 568px) {
#pagetop { bottom:10px; right:10px;}
}

@media only screen and (max-width: 468px) {
#pagetop { bottom:10px;}
}