@charset "utf-8";


/* reset
---------------------------------------------------- */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video {
margin:0; padding:0; border:0; outline:0; font-size:100%; font-weight:normal; font-style:normal; background:transparent; }
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display:block; }
blockquote:before,blockquote:after,q:before,q:after { content:''; content:none; }
ol,ul { list-style:none;}
table { border-collapse:collapse; border-spacing:0; width:100%; }
caption,th { text-align:left; }
a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }
input,select,textarea { font-family:inherit; vertical-align:middle; font-size:100%; font-weight:normal; box-sizing:border-box; }
label { white-space:nowrap; }
img	{ vertical-align:middle; font-size:0; line-height:0; max-width:100%; height: auto; }
iframe { max-width:100%; }
strong { font-weight:bold; }
body { -webkit-text-size-adjust:100%; }



/* baseSet
-------------------------------------------------------------------------------------------------------- */


/* unique class */
body	{ color:#333; font:100%/1.6 "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif; }
a			{ color:#333; outline:none; text-decoration:none; }
a:hover	{ text-decoration:none; }

#header .pcview { display: block; }
#header .spview { display: none; }
#header							{ position: fixed; z-index: 0; top: 0; left: 0; width: 100%; height: 100%; background: no-repeat center center; background-size: cover; }
#header .inBox				{ margin-left: 7%; /*width: 280px;*/ padding: 40px 0 10px 0; }
#header #logoMark			{ padding-top:10px; width:180px; }
#header #logoTxt			{  width:180px; }
#header #philosophy		{ /*width:240px;*/ width: 62%; font-size:12px; margin-left:7px; font-weight:bold; line-height:2; color:#eee; text-shadow:1px 1px 3px #000; }
#header #sclNav ul				{ width: 35rem; margin-top: 1.75rem; margin-bottom: 1.25rem; }
#header #sclNav ul li			{ position:relative; display: inline-table; width: 17.5rem; }
#header #sclNav ul li a					{ display: block; padding: 0.875rem 0 0.875rem 1.625rem; color:#fff; font-size: 1.125rem; font-weight: bold; }
#header #sclNav ul li a span			{ margin-right: 2px; font-size: 1rem; font-weight: bold; color: rgb(94, 94, 94);}
#header #sclNav ul li a span.arrow_right { width: 15.5rem; position: relative; display: inline-block; vertical-align: middle; text-decoration: none; }
/* くの字の表示設定 */
#header #sclNav ul li a span.arrow_right::after { position: absolute; top: 0; bottom: 0; right: 0; margin: auto; content: ""; vertical-align: middle; width: 0.5rem; height: 0.5rem; border-top: 1px solid #808080; border-right: 1px solid #808080; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
#header #sclNav ul li a span.sns			{ color: rgb(255, 255, 255); }
#header #sclNav ul li.high a			{ width: 17.5rem; height: 3.125rem; background-color:rgba(255, 251, 251, 0.85); border-left: #3E65A1 solid 0.3125rem; }
#header #sclNav ul li.panorama			{ width: 13.75rem; vertical-align: top; }
#header #sclNav ul li.panorama a			{ width: 13.75rem; height: 3.125rem; background-color:rgb(255, 0, 0); }
#header #sclNav ul li.panorama a img			{ width: 15%; position: absolute; top: 50%; transform: translate(50%, -50%); right: 12%; }
#header #sclNav ul li.junior a			{ width: 17.5rem; height: 3.125rem; background-color:rgba(255, 251, 251, 0.85); border-left: #C87F8E solid 0.3125rem; }
#header #sclNav ul li.x			{ width: 13.75rem; vertical-align: top; }
#header #sclNav ul li.x a			{ width: 13.75rem; height: 3.125rem; background-color:rgb(0, 0, 0); }
#header #sclNav ul li.x a img			{ width: 15%; position: absolute; top: 50%; transform: translate(50%, -50%); right: 12%; }
#header #sclNav ul li.overall a			{ width: 17.5rem; height: 3.125rem; background-color:rgba(255, 251, 251, 0.85); border-left: #50B58F solid 0.3125rem; }
#header #sclNav ul li.instagram			{ width: 13.75rem; vertical-align: top; }
#header #sclNav ul li.instagram a			{ width: 13.75rem; height: 3.125rem; background: linear-gradient(to right top, #FCA61D 0%, #F1040B 50%, #C20098 100%); }
#header #sclNav ul li.instagram a img			{ width: 15%; position: absolute; top: 50%; transform: translate(50%, -50%); right: 12%; }
#header #sclNav ul li.ibdp a			{ width: 17.5rem; height: 3.125rem; background-color:rgba(255, 251, 251, 0.85); border-left: #B06F2A solid 0.3125rem; }
#header #sclNav ul li.line			{ width: 13.75rem; vertical-align: top; }
#header #sclNav ul li.line a			{ width: 13.75rem; height: 3.125rem; background-color:rgb(6, 199, 85); }
#header #sclNav ul li.line a img			{ width: 20%; position: absolute; top: 50%; transform: translate(50%, -50%); right: 12%; }
#header #sclNav ul li.logoMark2:before			{ content: none;}
#header #sclNav ul li.high,
#header #sclNav ul li.junior,
#header #sclNav ul li.overall           { margin-right: 1.875rem; margin-bottom: 1.5625rem; }
#header #sclNav ul li.ibdp              { margin-right: 1.875rem; }

/* PC版IB-logoの表示位置 */
.IB-logo { position: absolute; width: 6.25rem; }
/* PC版ではlogoMark2は非表示 */
#header #logoMark2			{ display: none; }


/* PC版学校案内ヘッダー */
    header { width: 100%; height: 35px; background-color: rgba(0, 178, 45, 0.7); position: fixed; z-index: 5; }
    a { color: rgb(255, 255, 255); }
    header .school_guidance { font-weight: bold; background-color: rgba(255, 255, 255, 0.1); font-size: 14px; width: 100%; padding: 9px 10px; position: relative; top: 3.5px; margin-right: -3px; color: rgb(255, 255, 255); }
    header .pamphlet_pdf { font-weight: bold; display: inline; color: rgb(255, 255, 255); background-color: rgba(255, 255, 255, 0.2); font-size: 14px; padding: 9px 10px; width: 100%; height: 100%; margin-right: 2px; position: relative; top: 3.5px; }
    header .introductory_movie { font-weight: bold; display: inline; color: rgb(255, 255, 255); background-color: rgba(255, 255, 255, 0.2); font-size: 14px; padding: 9px 10px; width: 100%; height: 100%; position: relative; top: 3.5px; }
    header .arrow{ border-style: none; }
    /* マウスを乗せたときの動き */
    header .arrow img{ width: 10px; /* 14px */ height: 13px; /* 18px */ margin-bottom: 2px}
    header .spview { display: none; }

@media screen and (max-width: 1028px) {
    #header .inBox							{ margin-left:2%; }
    #header #philosophy		{ width: 53%; }
}

@media screen and (max-width: 768px) {
    #header .pcview { display: none; }
    #header .spview { display: block; }
    #header							{ position:static; height:auto; padding-bottom:30px; background-position:center top; }
    #header .inBox				{ margin-left:0; width:auto; }
    #header #logoMark			{ padding-top:120px; width:180px; margin:0 auto; }
    #header #logoTxt			{ width:180px; margin:0 auto 20px; }
    #header #philosophy		    { /*width:240px; margin:0 auto 30px;*/ width: fit-content; margin:0 1rem 4.2rem; text-align:center; }
    #header #sclNavSP				{ margin:0 auto; padding: 0 12px; width: auto; }
    #header #sclNavSP ul			{ margin-bottom: 1.4rem; }
    #header #sclNavSP ul li			{ position:relative; display: inline-table; width: 47%; }
    #header #sclNavSP ul li a		{ display:table-cell; padding: 0; vertical-align: middle; height: 5rem; text-align: center; box-sizing: border-box; }
    #header #sclNavSP ul li a span			{ display:block; margin-left: 0.625rem; font-size: 1.2rem; font-weight: bold; color: rgb(94, 94, 94); text-align: left; }
    /* くの字の表示設定 */
    #header #sclNavSP ul li a span.arrow_right::after { position: absolute; top: 0; bottom: 0; right: 1.5rem; margin: auto; content: ""; vertical-align: middle; width: 0.8rem; height: 0.8rem; border-top: 1px solid #808080; border-right: 1px solid #808080; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
    #header #sclNavSP ul li a span.spTxt			{ font-size: 1.2rem; }
    #header #sclNavSP ul li a span.sns			{ color: rgb(255, 255, 255); }
    #header #sclNavSP ul li a span.ibdp:before			{ content: '国際バカロレア\A'; white-space: pre; font-size: 0.8rem; }
    #header #sclNavSP ul li:before { display:none; }
    #header #sclNavSP ul li.high a			{ width: 16.8rem; height: 5rem; background-color:rgba(255, 251, 251, 0.85); border-left: #3E65A1 solid 0.3125rem; }
    #header #sclNavSP ul li.junior a			{ width: 16.8rem; height: 5rem; background-color:rgba(255, 251, 251, 0.85); border-left: #C87F8E solid 0.3125rem; }
    #header #sclNavSP ul li.overall a			{ width: 16.8rem; height: 5rem; background-color:rgba(255, 251, 251, 0.85); border-left: #50B58F solid 0.3125rem; }
    #header #sclNavSP ul li.ibdp 			{ vertical-align: top; }
    #header #sclNavSP ul li.ibdp a			{ width: 16.8rem; height: 5rem; background-color:rgba(255, 251, 251, 0.85); border-left: #B06F2A solid 0.3125rem; }
    #header #sclNavSP ul li.panorama a			{ width: 16.8rem; height: 5rem; background-color:rgb(255, 0, 0); }
    #header #sclNavSP ul li.panorama a img			{ width: 10%; position: absolute; top: 50%; transform: translate(50%, -50%); right: 9%; }
    #header #sclNavSP ul li.x a			{ width: 16.8rem; height: 5rem; background-color:rgb(0, 0, 0); }
    #header #sclNavSP ul li.x a img			{ width: 10%; position: absolute; top: 50%; transform: translate(50%, -50%); right: 9%; }
    #header #sclNavSP ul li.instagram a			{ width: 16.8rem; height: 5rem; background: linear-gradient(to right top, #FCA61D 0%, #F1040B 50%, #C20098 100%); }
    #header #sclNavSP ul li.instagram a img			{ width: 10%; position: absolute; top: 50%; transform: translate(50%, -50%); right: 9%; }
    #header #sclNavSP ul li.line a			{ width: 16.8rem; height: 5rem; background-color:rgb(6, 199, 85); }
    #header #sclNavSP ul li.line a img			{ width: 15%; position: absolute; top: 50%; transform: translate(50%, -50%); right: 9%; }
    #header #sclNavSP ul li.high,
    #header #sclNavSP ul li.overall,
    #header #sclNavSP ul li.panorama        { margin-right: 2.5rem; margin-bottom: 3rem; }
    #header #sclNavSP ul li.junior,
    #header #sclNavSP ul li.ibdp,
    #header #sclNavSP ul li.x         { margin-bottom: 3rem; }
    #header #sclNavSP ul li.instagram       { margin-right: 2.5rem; margin-bottom: 1.4rem; }


    /* スマホ版学校案内ヘッダー */
    html { font-size: 62.5%; }
    header { width: 100%; height: 120px; background-color: rgba(0, 70, 140, 0.7); position: fixed; z-index: 5; }
    a { color: rgb(255, 255, 255); }
    .school_guidance_sp { font-size: 1.8rem; line-height: 120px; text-align: center; background-color: rgba(0, 70, 140, 0.3); color: rgb(255, 255, 255); width: 30%; height: 120px; float: left; }
    .pdf_and_movie_table { position: relative; width: 70%; height: 120px; float: right; }
    .pamphlet_pdf_sp { font-size: 1.8rem; padding-top: 5px; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; color: rgb(255, 255, 255); height: 30px; border-bottom: 1px solid rgba(255, 255, 255, 0.2);}
    .pamphlet_pdf_sp a{ display: block; }
    .introductory_movie_sp { font-size: 1.8rem; padding-top: 5px; padding-bottom: 5px; padding-left: 10px; color: rgb(255, 255, 255); height: 30px; }
    .introductory_movie_sp a{ display: block; }
    .arrow{ border-style: none; }
    /* マウスを乗せたときの動き */
    .arrow img{ width: 14px; height: 18px; }
    header .pcview { display: none; }
    header .spview { display: block; }
}

@media screen and (max-width: 502px) {
    #header #sclNavSP ul li			{ width: 46%; }
    #header #sclNavSP ul li.panorama a img,
    #header #sclNavSP ul li.x a img,
    #header #sclNavSP ul li.instagram a img     { width: 15%; position: absolute; top: 50%; transform: translate(50%, -50%); right: 12%; }
    #header #sclNavSP ul li.line a img			{ width: 20%; position: absolute; top: 50%; transform: translate(50%, -50%); right: 13%; }
}

@media screen and (max-width: 414px) {
    .school_guidance_sp { font-size: 1.4rem; }
    .pamphlet_pdf_sp { font-size: 1.4rem; padding-top: 8px; padding-bottom: 2px; }
    .introductory_movie_sp { font-size: 1.4rem; padding-top: 7px; padding-bottom: 2px; }

    #header #sclNavSP ul li			{ width: 45%; }
    #header #sclNavSP ul li.panorama a img,
    #header #sclNavSP ul li.x a img,
    #header #sclNavSP ul li.instagram a img			{ position: absolute; top: 50%; transform: translate(50%, -50%); right: 12%; }
    #header #sclNavSP ul li.line a img			{ position: absolute; top: 50%; transform: translate(50%, -50%); right: 13%; }
}



/* #newsListBox */
#newsListBox						{ position: absolute; top:0; right:0; width:34%; height:100%; overflow:hidden; color:#fff; box-sizing:border-box; background-color: rgba(0,0,0,0.6); }
#newsListBox .inBox			{ padding:0; height:100%; margin-top: 35px; overflow-y:scroll; }
#newsListBox .title				{ padding:50px 20px 10px; font-weight:bold; }
#newsListBox .title span		{ font-size:12px; }
#newsListBox .newsList		{ margin:20px; padding:10px 0; font-size:12px; }
#newsListBox .newsList#pickup 		{ border-bottom:#666 1px solid; box-sizing:border-box }
#newsListBox .newsList#usually		{ margin-bottom:80px;  }
#newsListBox .newsList li			{ display:table; margin-bottom:14px; width:100%; }
#newsListBox .newsList li > div	{ display:table-cell; }
#newsListBox .newsList li .newsInfo							{ width:170px; }
#newsListBox .newsList li .newsInfo .newsCat			{ display:inline-block; padding-left:10px; font-size:12px; text-align:center; }
#newsListBox .newsList li .newsInfo .newsCat a			{ display:block; width:80px; color:#fff; border-radius:4px; background-color:#023A9B; pointer-events: none;}
#newsListBox .newsList li .newsInfo .newsCat a span:first-child	{ margin-right:1rem;}
#newsListBox .newsList li .newsInfo .newsCat.overall a	{ border:#fff 1px solid; background:none; }
#newsListBox .newsList li .newsInfo .newsCat.high a		{ background-color:#023A9B; }
#newsListBox .newsList li .newsInfo .newsCat.junior a	{ background-color:#eb667d; }
#newsListBox .newsList li .newsInfo .newsCat.applicant a{ background-color:#00A364; }
#newsListBox .newsList li .newsInfo .newsCat.high-junior a	{ background: linear-gradient(120deg, #023A9B 0%,#023A9B 50%,#eb667d 50%,#eb667d 100%); }
#newsListBox .newsList li .newsTxt								{ max-width:270px; line-height:1.3; }
#newsListBox .newsList li .newsTxt a							{ color:#fff; }
@media screen and (max-width: 1028px) {
#newsListBox						{ width:42%; }

}
@media screen and (max-width: 768px) {
#newsListBox						{ position:static; width:auto; height:auto; }
#newsListBox .title				{ padding:30px 10px 10px; }
#newsListBox .newsList		{ margin:0 10px; padding:0; }
#newsListBox .newsList#pickup 		{ border-bottom:#ccc 1px solid; margin-bottom:40px; }
#newsListBox .newsList#pickup li:last-child	{ border-bottom:none; }
#newsListBox .newsList#usually		{ margin-bottom:40px;  }
#newsListBox .newsList li			{ display:block; margin:0; padding:14px 0; border-bottom:#999 1px dotted; }
#newsListBox .newsList li > div	{ display:block; padding-bottom:6px; }
#newsListBox .newsList li .newsInfo							{ width:auto; }
#newsListBox .newsList li .newsTxt								{ max-width:100%;  }

}



/* #footer */
#footer		{ position:fixed; bottom:0; left:0; width:100%; padding-left:7%; background-color:rgba(255,255,255,0.7); box-sizing:border-box; }
#footer #copyRight		{ padding:10px 0 8px; font-size:10px; font-weight:bold; }
@media screen and (max-width: 1028px) {


}
@media screen and (max-width: 768px) {
#footer		{ position:static; padding:0; text-align:center; }
}


/* clearfix
---------------------------------------------------- */
section:after,
.inner:after,
.inBox:after,
.clearfix:after { visibility:hidden; display:block; font-size:0; content:" "; clear:both; height:0; }

.toppage-desc-header{ color:#fff; background-color: rgba(0,0,0,0.6); padding: 15px; font-size: 12px; z-index: 1; position: relative; padding-top: 50px; }
#header .inBox { padding-top: 170px; }
#newsListBox { padding-top: 106px; }
@media screen and (max-width: 1028px) {
    #header .inBox { padding-top: 200px; }
    #newsListBox { padding-top: 120px; }
}
@media screen and (max-width: 768px) {
    .toppage-desc-header{ margin-top: 120px; position: absolute; padding-top: 15px;}
    #header .inBox { padding-top: 250px; }
    #newsListBox { padding-top: 0px; }
}
@media screen and (max-width: 414px) {
    #header .inBox { padding-top: 350px; }
}



/* Uchikawa 2022-03-18 clearfix */

#header .inBox { padding-top: 30px; }
#newsListBox { padding-top: 0; }
@media screen and (max-width: 1028px) {
    #header .inBox { padding-top: 30px; }
    #newsListBox { padding-top: 0px; }
}
@media screen and (max-width: 768px) {
    #header .inBox { padding-top: 30px; }
    #newsListBox { padding-top: 0px; }
}
@media screen and (max-width: 414px) {
    #header .inBox { padding-top: 30px; }
}


@media screen and (max-width: 769px){
    .ib-br { display:none; }
}

#header #sclNav ul li a					{ display:table-cell; vertical-align: middle; padding: 0 0 0 0.625rem; }

@media screen and (min-width: 769px){
    .d-flex{
        display: flex;
    }
    

}

@media screen and (max-width: 768px) {
    #header #logoMark2 {
        display: block;
        margin: auto;
        width:130px;
    }

    /* IB-logoはスマホ版では非表示 */
    .IB-logo { display: none; }

    #header #sclNavSP ul li a {
        display: table-cell;
        vertical-align: middle;
        padding: 0 0 0 0.625rem;
    }

    .d-flex {
        display: block;
    }
}

@media screen and (max-width: 390px) {
    #header #sclNavSP ul li a					{ padding: 0; }
    /* くの字の表示設定 */
    #header #sclNavSP ul li a span.arrow_right::after { right: 0.7rem; }
    #header #sclNavSP ul li.panorama a img,
    #header #sclNavSP ul li.x a img,
    #header #sclNavSP ul li.instagram a img			{ width: 15%; position: absolute; top: 50%; transform: translate(50%, -50%); right: 12%; }
    #header #sclNavSP ul li.line a img			{ width: 20%; position: absolute; top: 50%; transform: translate(50%, -50%); right: 13%; }
}

@media screen and (max-width: 320px) {
    #header #sclNavSP ul li a span.spTxt			{ font-size: 0.8rem; }
    #header #sclNavSP ul li a span.ibdp:before			{ display: block; content: '国際バカロレア\A'; white-space: pre; font-size: 1rem; transform: scale(0.8); transform-origin:0 0; }
    #header #sclNavSP ul li			{ width: 45%; }
    #header #sclNavSP ul li.panorama a img,
    #header #sclNavSP ul li.x a img,
    #header #sclNavSP ul li.instagram a img			{ width: 12%; position: absolute; top: 50%; transform: translate(50%, -50%); right: 12%; }
    #header #sclNavSP ul li.line a img			{ width: 15%; position: absolute; top: 50%; transform: translate(50%, -50%); right: 13%; }
}


.ib-link{
    margin: auto;
    height: 50px;
}

.txt-panorama {
    position: relative;
    top: -12px;
    font-size: 18px;
    font-weight: bold;
}