@charset "utf-8";

:root {
	
	--color-text: #333;
	--color-text-rgb: 51,51,51;
	
	--color-primary: #006;
	--color-primary-rgb: 0,0,102;

	--color-comp01: #ddd;
	--color-comp01-rgb: 221,221,221;

	--color-juniorhighschool: #00ada9;
	--color-juniorhighschool-rgb: 0,173,169;
    --color-juniorhighschool-hover: #33bdba;
    --color-juniorhighschool-hover-rgb: 51,189,186;

	--color-highschool: #005194;
	--color-highschool-rgb: 0,81,148;
    --color-highschool-hover: #3374a9;
    --color-highschool-hover-rgb: 51,116,169;

}

html, body {
	margin: 0;
	padding: 0;
	overflow-x: hidden;
	font-family: "Noto Sans JP", "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
	-webkit-text-size-adjust: none;
	-moz-text-size-adjust: none;
	text-size-adjust: none;
	font-size: 16px;
	color: var(--color-text, #000);
    scroll-behavior: smooth;
}

/* reset */
em { display: inline-block; font-style: normal; }
dl.dlReset { margin: 0; }
dl.dlReset dt { margin: 0; }
dl.dlReset dd { margin: 0; }

@media print {
    html, body { overflow-x: visible; }
}

@media only screen and (max-width: 1023px){
	.pcOnly { display: none; }
	.inner,
    .inner-sp { padding-right: 1rem; padding-left: 1rem; }
}
@media print, screen and (min-width: 1024px){
	.spOnly { display: none; }
	.inner,
    .inner-pc { margin-right: auto; margin-left: auto; padding-right: 10px; padding-left: 10px; width: 100%; max-width: 1200px; box-sizing: border-box; }
    .inner .inner { max-width: 800px; margin-right: auto; margin-left: auto; }
    .col { float: left; box-sizing: border-box; }
    .col.col-right { float: right; }
    .col.pad { padding-right: 1rem; padding-left: 1rem; }
    .col2wrap .col { width: 50%; }
}

/* image */
img.imageFull { width: 100% !important; height: auto !important; }
img.imageMax { max-width: 100% !important; height: auto !important; }

/* header */
header #header .sitename { margin: 0; padding: 0; line-height: 0; }
header #header { background-color: rgba(255,255,255,0.8); box-shadow: 0px 10px 10px 0px rgba(9,9,9,0.1); }
header #header.headerScroll { background-color: #fff; transition: background .5s; }
@media only screen and (max-width: 1023px){
    header #header { padding: 1rem 0; }
    header #header .sitename img { max-width: calc(100% - 5rem) !important; height: auto; }
    /*hamburgerMenu*/
    header #header #hamburgerMenu button { position: fixed; top: calc(1rem - 2px); right: 15px; z-index: 100; width: 3rem; height: 3rem; background-color: var(--color-primary, #000); border: 2px solid #fff; cursor: pointer; }
    header #header #hamburgerMenu button .hamburger__line { position: absolute; left: 10px; width: 25px; height: 3px; background-color: #fff; transition: all .5s; }
    header #header #hamburgerMenu button .hamburger__line:nth-of-type(1) { top: 10px; }
    header #header #hamburgerMenu button .hamburger__line:nth-of-type(2) { top: 20px; }
    header #header #hamburgerMenu button .hamburger__line:nth-of-type(3) { top: 30px; }
    header #header #hamburgerMenu button.active .hamburger__line:nth-of-type(1) { transform: translateY(10px) rotate(-45deg); }
    header #header #hamburgerMenu button.active .hamburger__line:nth-of-type(2) { opacity: 0; }
    header #header #hamburgerMenu button.active .hamburger__line:nth-of-type(3) { transform: translateY(-10px) rotate(45deg); }
    header #header #menuBody { position: fixed; top: 0; left: 0; z-index: 90; padding: 1rem; width: 100%; height: 100vh; background-color: var(--color-primary, #000); box-sizing: border-box; transform: translateX(200%); transition: transform .5s; }
    header #header #menuBody > div { padding-bottom: 10rem; height: calc(100vh - 2rem); box-sizing: border-box; overflow-y: scroll; -ms-overflow-style: none; scrollbar-width: none; }
    header #header #menuBody > div::-webkit-scrollbar { display: none; }
    header #header #menuBody.active { transform: translateX(0); }
    header #header #menuBody ul { list-style: none; margin: 0; padding: 0; }
    header #header #menuBody ul.globalNavi { margin-top: 2rem; }
    header #header #menuBody ul li { position: relative; border-bottom: 1px solid #fff; }
    header #header #menuBody ul li:first-child { border-top: 1px solid #fff; }
    header #header #menuBody ul li::after { letter-spacing: 0; font-family: "Font Awesome 7 Free"; content: "\f061"; position: absolute; right: 1.5rem; top: calc(50% - 0.5em); color: #fff; font-size: 0.6rem; font-weight: 900; }
    header #header #menuBody ul li a { display: block; padding: 1rem 2rem 1rem 1rem; box-sizing: border-box; width: 100%; color: #fff; text-decoration: none; position: relative; cursor: pointer; }
    header #header #menuBody ul.globalNavi li.linkButton a { font-weight: normal; text-align: left; background-color: transparent; }
    header #header #menuBody ul.globalNavi li.linkButton a::after { content: ""; }
}
@media print, screen and (min-width: 1024px){
    header #header #menuBody .sitename { display: none; }
    header #header { position: fixed; top: 0; z-index: 99; width: 100%; min-height: 75px; padding: 0.8rem 0; font-size: 0.9rem; box-sizing: border-box; }
    header #header h1 { float: left; }
    header #header nav { float: right; padding-top: 0.5rem; }
    header #header #hamburgerMenu button { display: none; }
    header #header ul.globalNavi { display: flex; justify-content: space-between; list-style: none; margin: 0 0 0 -2rem; }
    header #header ul.globalNavi li { margin-left: 2rem; }
    header #header ul.globalNavi li a { color: var(--color-text, #000); text-decoration: none; }
    header #header ul.globalNavi li:not(.linkButton) a:hover { text-decoration: underline; }
    header #header ul.globalNavi li:not(.linkButton) { margin-top: 0.5rem; }
    header #header ul.globalNavi li.linkButton { font-size: 0.8rem; }
    header #header ul.globalNavi li.linkButton a { position: relative; display: inline-block; padding: 1em 3rem; font-weight: normal; line-height: 1; box-sizing: border-box; min-width: 180px; text-align: center; color: #fff !important; background-color: var(--color-primary); border-radius: 8px; }
    header #header ul.globalNavi li.linkButton a:hover { background-color: var(--color-text); }
    header #header ul.globalNavi li.linkButton a::after { font-family: "Font Awesome 7 Free"; content: "\f061"; position: absolute; right: 20px; top: calc(50% - 0.5em); font-size: 0.6rem; font-weight: 900; }
}

/* footer */
footer { padding: 3rem 0 0; color: #fff; background-color: var(--color-primary, #000); }
footer dl { margin-top: 2rem !important; margin-bottom: 4rem !important; }
footer dl dt { font-size: 1.2rem; }
footer dl dd.hours p { margin: 0 auto; padding: 0.8rem 2rem 1rem; width: 90%; font-size: 0.8rem; border: 1px solid #b3b3b3; box-sizing: border-box; }
footer dl dd.tel-fax p { margin: 0; font-size: 1.25rem; }
footer dl dd.tel-fax p a { color: #fff; text-decoration: none; }
footer dl dd .linkButton a { padding: 1.5rem 2rem; min-width: 90%; width: 90%; color: var(--color-text); font-weight: normal; border: none; background-color: #fff; }
footer dl dd .linkButton a:hover { color: #000; background-color: rgba(255,255,255,0.8); }
footer #copyright { margin: 0; padding: 1.5rem 0; font-size: 0.85rem; border-top: 1px solid #b3b3b3; }
@media only screen and (max-width: 1023px){
    footer dl dd { margin: 0.5rem 0 !important; }
    footer #address span { display: block; }
}
@media print, screen and (min-width: 1024px){
    footer #address span { display: inline-block; margin-left: 1rem; }
    footer .inner .inner { max-width: 960px; }
    footer dl dd { margin: 0.5rem 1rem !important; }
}

#turnUp { display: none; }
#turnUp a { display: block; position: fixed; right: 10px; bottom: 10px; z-index: 80; padding: 1em 2em; width: 2rem; height: 2rem; color: #fff; text-decoration: none; font-size: 0.9em; text-align: center; line-height: 1; background-color: var(--color-primary, #000); border: 2px solid #fff; }
#turnUp a:hover { background-color: var(--color-text); }

/* text */
.textStyle01 { margin: 1rem 0 0.5rem; font-size: 2rem; text-align: center; }
.textStyle02 { display: inline-block; padding: 10px 2rem; font-size: 1rem; text-align: center; background-color: var(--color-comp01); border-radius: 20px; }
.fontMin { font-family: 'Noto Serif JP', YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif"; font-weight: 500; }
.wordBreak { word-break: auto-phrase; }
.lineHeight { line-height: 1.7; }
.title-obi { padding: 1rem; background-color: var(--color-primary, #000); }
.title-obi .textStyle01 { color: #fff; }
.title-obi.title-obi01 .textStyle01 { font-size: clamp(20px,3vw,25px); }
.title-obi .textStyle01 span { font-size: 0.8em; }
@media only screen and (max-width: 1023px){}
@media print, screen and (min-width: 1024px){}

/* link */
a:hover { transition: all .4s; }
a img:hover { opacity: 0.9; transition: opacity .4s; }
.linkButton { text-align: center; }
.linkButton a { position: relative; display: inline-block; padding: 2rem; color: #fff; font-weight: bold; text-align: center; text-decoration: none; background-color: var(--color-primary); border-radius: 3px; box-sizing: border-box; }
.linkButton a:hover { background-color: var(--color-text); }
.linkButton a::after { font-family: "Font Awesome 7 Free"; content: "\f061"; position: absolute; right: 2rem; top: calc(50% - 0.5em); font-size: 0.8rem; font-weight: 900; }
.linkButton.newTab a::after { content: "\f35d"; }
.linkButton.linkButton01 a { background-color: var(--color-juniorhighschool); }
.linkButton.linkButton01 a:hover { background-color: var(--color-juniorhighschool-hover); }
.linkButton.linkButton02 a { color: var(--color-juniorhighschool); border: 2px solid var(--color-juniorhighschool); background-color: #fff; }
.linkButton.linkButton02 a:hover { color: #fff; border: 2px solid var(--color-juniorhighschool-hover); background-color: var(--color-juniorhighschool-hover); }
.linkButton.linkButton03 a { background-color: var(--color-highschool); }
.linkButton.linkButton03 a:hover { background-color: var(--color-highschool-hover); }
.linkButton.linkButton04 a { color: var(--color-highschool); border: 2px solid var(--color-highschool); background-color: #fff; }
.linkButton.linkButton04 a:hover { color: #fff; border: 2px solid var(--color-highschool-hover); background-color: var(--color-highschool-hover); }
.linkButton.linkButton05 a { background-color: var(--color-primary); }
.linkButton.linkButton05 a:hover { background-color: var(--color-text); }
@media only screen and (max-width: 1023px){
    .linkButton a { width: 90%; }
}
@media print, screen and (min-width: 1024px){
    .linkButton a { min-width: 480px; }
}

/***** secondPage *****/
#historyWrap { margin-top: 3rem; }
@media only screen and (max-width: 1023px){}
@media print, screen and (min-width: 1024px){
    .secondPage main { padding-top: 75px; }
}

/***** mainvisual *****/
#mainvisual > div { background-size: cover; background-position: center center; background-repeat: no-repeat; }
@media only screen and (max-width: 1023px){
    #mainvisual > div { height: 100vh; max-height: calc(100svh - 5rem + 10px); }
    #mainvisual > div#mainvisual01 { background-image: url("images/main_image01-sp.jpg?ver=001"); }
}
@media print, screen and (min-width: 1024px){
    #mainvisual > div { height: 100vh; }
    #mainvisual > div#mainvisual01 { background-image: url("images/main_image01-pc.jpg?ver=001"); }
}

/***** floating *****/
#floating01 { position: absolute; bottom: 10px; right: 10px; z-index: 77; }
@media only screen and (max-width: 1023px){
    #floating01 { max-width: 40%; }
}
@media print, screen and (min-width: 1024px){}

/***** principle *****/
#principle > .inner { padding: 3rem 0;}
@media only screen and (max-width: 1023px){}
@media print, screen and (min-width: 1024px){
    #principle { margin-top: -75px; padding-top: 75px; }
}

/***** affiliated *****/
@media only screen and (max-width: 1023px){}
@media print, screen and (min-width: 1024px){
    #affiliated { margin-top: -75px; padding-top: 75px; }
}

/***** tsushin *****/
#tsushinArea { margin-top: 30px; margin-bottom: 30px; }
.tsushinBanner-text > div .textStyle02 { min-width: 80%; box-sizing: border-box; }
.tsushinBanner-text > div .textStyle02 + p { margin: 0; }
.tsushinBanner-text > div .textStyle02 + p strong { display: block; font-size: 1.5em; color: var(--color-primary); }
.tsushinBanner-text > div .linkButton a { padding-top: 1rem; padding-bottom: 1rem; }
@media only screen and (max-width: 1023px){
    .tsushinBanner-image { position: relative; }
    .tsushinBanner-text { position: relative; margin-top: -4.5rem; }
    .tsushinBanner-text > div { margin: 0 auto; padding: 1rem 2rem; width: 70%; text-align: center; border: 1px solid var(--color-primary); background-color: #fff; }
    .tsushinBanner-text > div .linkButton a { width: 100%; }
}
@media print, screen and (min-width: 1024px){
    .tsushinBanner { position: relative; }
    .tsushinBanner-text { display: table; position: absolute; z-index: 2; top: 0; right: 80px; padding: 0 8rem 0 7rem; text-align: center; background-color: #fff; clip-path:polygon(3rem 0, 100% 0, calc(100% - 3rem) 100%, 0 100%); }
    .tsushinBanner-text > div { display: table-cell; vertical-align: middle; }
    .tsushinBanner-text > div .linkButton a { min-width: 300px; }
}

/***** facility *****/
#facility { padding-bottom: 3rem; }
#facility .textStyle01 { color: var(--color-primary); }
@media only screen and (max-width: 1023px){}
@media print, screen and (min-width: 1024px){
    #facility { margin-top: -75px; padding-top: 75px; }
}

/***** history *****/
#history { padding-bottom: 3rem; }
#history .title-obi { margin-bottom: 2rem; }
#history .bx-controls.bx-has-controls-direction { padding: 1rem; text-align: center; }
#history .bx-wrapper .bx-controls-direction a { position: static; display: inline-block; margin: 0; width: 32px; height: 32px; text-indent: -9999px; outline: 0; }
#history .bx-wrapper .bx-prev { padding: 5px; background: url(https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.17/images/controls.png) 0 -32px no-repeat; }
#history .bx-wrapper .bx-next { padding: 5px; background: url(https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.17/images/controls.png) -43px -32px no-repeat; }
ul.historyWrap > li .history-content p { word-break: keep-all; overflow-wrap: break-word; }
@media only screen and (max-width: 590px){ /***** SP（沿革表示のみ） *****/
    ul.historyWrap { list-style: none; margin: 0; padding: 0; }
    ul.historyWrap > li { position: relative; padding: 0.5rem 0 0.5rem 1rem; border-left: 1px solid #333; }
    ul.historyWrap > li:before { content: ''; width: 11px; height: 11px; background: var(--color-primary, #000); position: absolute; left: -6px; top: 18px; border-radius: 100%; }
    ul.historyWrap > li p { margin: 0; }
    ul.historyWrap > li p.history-date { margin-bottom: 5px !important; color: var(--color-primary); font-size: 1.15em; font-family: 'Noto Serif JP', serif; }
    ul.historyWrap > li .history-content > p + p { margin-top: 5px; }
    ul.historyWrap > li img { margin-top: 5px; }
}
@media print, screen and (min-width: 591px){ /***** PC & Tablet（沿革表示のみ） *****/
    ul.historyWrap { list-style: none; margin: 0; padding: 0; }
    ul.historyWrap > li { overflow: hidden; margin: 0; position: relative; }
    ul.historyWrap > li .history-date { float: left; width: 9rem; text-align: right; }
    ul.historyWrap > li .history-content { float: left; margin-left: 1rem; padding-left: 1rem; width: calc(100% - 13rem - 1px); border-left: 1px solid #333; }
    ul.historyWrap > li .history-content:before { content: ''; width: 11px; height: 11px; background: var(--color-primary, #000); position: absolute; left: calc(9rem + 11px); top: 25px; border-radius: 100%; }
}
@media only screen and (max-width: 1023px){}
@media print, screen and (min-width: 1024px){
    #history { margin-top: -75px; padding-top: 75px; }
}

/***** recruit *****/
#recruit { padding-bottom: 3rem; }
#recruitArea { position: relative; }
#recruitArea-title { position: absolute; left: 0; width: 100%; }
#recruitArea-title dl { color: #fff; line-height: 1; font-size: 3rem; text-shadow: 0px 2px 15px #666; }
#recruitArea-title dl dt { margin-bottom: 5px; font-family: "Montserrat", sans-serif; font-weight: 600; }
#recruitArea-title dl dd { font-size: 0.6em; }
@media only screen and (max-width: 1023px){
    #recruitArea-title { top: 1.5rem; }
    #recruitArea-title dl { text-align: center; }
}
@media print, screen and (min-width: 1024px){
    #recruit { margin-top: -75px; padding-top: 75px; }
    #recruitArea-title { top: calc(50% - 3rem); }
    #recruitArea-title dl { padding: 0 0 10px 10px; border-left: 5px solid var(--color-primary); }
}

/***** relation *****/
#relation ul { list-style: none; margin: 1rem 0 0; padding: 0; }
#relation ul li { position: relative; }
#relation ul li:hover { background-color: rgba(var(--color-comp01-rgb), 0.5); }
#relation ul li a { display: block; color: var(--color-text); text-decoration: none; }
#relation ul li a::after { font-family: "Font Awesome 7 Free"; content: "\f35d"; position: absolute; font-size: 0.8rem; font-weight: 900; color: var(--color-primary); }
@media only screen and (max-width: 1023px){
    #relation ul li { border-bottom: 1px solid var(--color-comp01); }
    #relation ul li:first-child { border-top: 1px solid var(--color-comp01); }
    #relation ul li a { padding: 1rem 1rem 1rem 2rem; }
    #relation ul li a::after { right: 2rem; top: calc(50% - 0.25rem); }
}
@media print, screen and (min-width: 1024px){
    #relation { margin-bottom: 3rem; }
    #relation ul { display: table; width: 100%; text-align: center; }
    #relation ul li { display: table-cell; width: 20%; vertical-align: middle; border-left: 1px solid var(--color-comp01); box-sizing: border-box; }
    #relation ul li:first-child { border-left: none; }
    #relation ul li a { padding: 2rem 1rem 5rem; }
    #relation ul li span { display: block; }
    #relation ul li a::after { left: calc(50% - 0.5rem); bottom: 2rem; font-size: 1.2rem; }
    
}

/* reuse */
dl.dlBox dd { margin-top: -4.5em; }

/* align */
.left { text-align: left !important; }
.center { text-align: center !important; }
.right { text-align: right !important; }
.centerBox { display: table; margin-right: auto; margin-left: auto; }
@media only screen and (max-width: 1023px){
	.left-sp { text-align: left !important; }
	.center-sp { text-align: center !important; }
	.right-sp { text-align: right !important; }
	.centerBox-sp { display: table; margin-right: auto; margin-left: auto; }
}
@media print, screen and (min-width: 1024px){
	.left-pc { text-align: left !important; }
	.center-pc { text-align: center !important; }
	.right-pc { text-align: right !important; }
	.centerBox-pc { display: table; margin-right: auto; margin-left: auto; }
}

/* margin */
.margin00 { margin: 0; }
.mb00 { margin-bottom: 0; }
.mb1r { margin-bottom: 1rem; }
@media only screen and (max-width: 1023px){}
@media print, screen and (min-width: 1024px){}

/* clearfix */
.clearfix { zoom: 1; overflow: hidden; }
.clearfix:after { content: ""; display: block; clear: both; }