@charset "UTF-8";
/*------------------------------------------ 800px以下スマホ画面 ------------------------------------------*/

input[type="submit"],
input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
  display: none;
}
input[type="submit"]::focus,
input[type="button"]::focus {
  outline-offset: -2px;
}
@media all and (max-width:800px){
    .sp_none{display: none !important;}
    .youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.model{
	position:absolute;
	top:70px;
	left:0px;
	width:100%;
	height:50px;
	z-index:9999;
	background-color: #004097;
	border-top: 2px solid #fff;
	border-bottom: 2px solid #fff;
}
.model p{ font-size: 0.7rem; font-weight: bold}
        .open {
	position: fixed;
	bottom: 140px !important;
	right: 60px !important;
	cursor:pointer;
        background-color: red;color: #fff;
	border-radius: 15px;
        text-align: center;
        width: 30px; height: 30px;
        line-height: 30px;
        z-index: 9998;
}
#pop-up {
	display: none;
}
.overlay {
	display: none;
}
#pop-up:checked + .overlay {
	display: block;
	position: fixed;
	width: 5%;
	height: 5vh;
	top: 0;
	left: 0;
	z-index: 9999;
	background: rgba(0, 0, 0, 0);
}
    
.window {
	position: fixed;
	bottom: 0px !important;
	right: 0px !important;
	width: 90vw;
	max-width: 240px;
    padding: 20px;
	height: 110px;
	background-color: #fff;
	border-radius: 4px;
	align-items: center;
	transform: translate(-50%, -50%);
    margin-right: -100px;
    margin-bottom: -65px;
    text-align: center;
    border: 5px double #004097;
}
    .window h4{line-height: 1.2rem; font-size: 1.0rem; margin-bottom: 20px;}
    .window h5{line-height: 0.8rem; font-size: 0.8rem;}
    .window p{line-height: 1.4rem; font-size: 0.8rem;display: none}
.close {
	position: absolute;
	top: 4px;
	right: 4px;
	cursor:pointer;
}
.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}
    .snsIcon{display: none}
    
    .fvrIcon{position: fixed;right:0px; z-index: 9999; top: 25%; margin-top: -55px; width: 45px;}
	.fvrIcon li{margin-bottom: 10px; list-style: none; writing-mode: vertical-rl;
text-orientation: mixed; font-size: 0.8rem}
    .fvrIcon li a{ color: #fff; text-decoration: none; display: block}
    #fullpage{ width: 100%;}
    section{ width: 100% !important}
/* Centered texts in each section
	* --------------------------------------- */
	.section{
		text-align:center; 
        border-bottom: none !important;
        padding-bottom: 0px !important;
        padding-top:0px  !important;
        margin-top: 0px !important;
	}


	/* Backgrounds will cover all the section
	* --------------------------------------- */
	#section0{
		background-size: cover;
	}   
	#sections0,
	#section1,
	#section2,
	#section3{
		background-size: cover;
        height: 100vh;
        padding: 0px !important;
        margin-top: 0px;
	}   
    
	#section0{
		background-position:center;
		padding: 0 0 0 0;
	}
		
	#section1{
		background-color: #f0f0f0;
		padding: 0 0 0 0;
        background-position:center;
	}
	#section2{
		background-image: url(../slid_img/new_year_sp2026.jpg);
		padding: 0 0 0 0;
        background-position:center;
	}
	#section3{
		background-image: url(../imgs/bg4.jpg);
		padding: 0 0 0 0;
        background-position:center;
	}
	#section3 h1{
		color: #000;
	}
/*------------------------------------------ ヘッダースタイル ------------------------------------------*/
header {
	width:100%;
	height:70px;
    background: rgba(0,64,151,0.9);
    position: fixed;
    z-index: 9999;
    border-bottom: 3px solid #fff;
}
    #top_space{ width: 100%; height: 70px;}
    
    
    #header_logo{
        width: 30%; height: 60px; float: left; margin-left: 20px; margin-top: 10px;
    }
/*------------------------------------------ トップmvスタイル ------------------------------------------*/  
    #mv_area{ width: 100%; height: 560px; background-color: aliceblue; background-image: url("../slid_img/1s.jpg"); background-position: center; background-repeat: no-repeat; background-size:cover}
    #sub_area{ width: 100%; height: 300px; background-color: aliceblue;}
        .aboutus{ background-image: url("../img/f_ask.jpg"); background-position: center; background-repeat: no-repeat;}
        .bells{ background-image: url("../img/bell.jpg"); background-position: center; background-repeat: no-repeat; background-size: auto 100%;}
        .pastel{ background-image: url("../img/pastel_top.jpg"); background-position: center; background-repeat: no-repeat; background-size: auto 100%;}


.text_sub {
  position: absolute;
  width: 300px;
  left: 50%;
  margin-left: -150px;
  height: 40px;
  top: 200px;
  margin-top: -20px;
}
    .text_sub h2{ text-align: center;font-size: 1.5rem;line-height: 1.8rem; color: #fff; border-bottom: 2px solid #fff;
    text-shadow: 1px 2px 3px #333;}
    .text_sub span{ text-align: center;font-size: 1.0rem;line-height: 1.5rem; color: #fff;
    text-shadow: 1px 2px 3px #333;}

.text {
  position: absolute;
  width: 200px;
  left: 50%;
  margin-left: -100px;
  height: 40px;
  top: 300px;
  margin-top: -20px;
}
    .text h2{ text-align: center;font-size: 1.5rem;line-height: 2.0rem; color: #333; border-bottom: 2px solid #000;
    text-shadow: 1px 2px 3px #fff;}

.text p {
  display: inline-block;
  vertical-align: top;
  margin: 0;
    font-size: 1.5rem;
    line-height: 2.0rem;
        font-family: SourceHanSerifJP-Regular;
    text-shadow: 1px 2px 3px #fff;
    animation: fadeIn 5.0s ease 0.0s 1 normal !important;
    animation-delay:0.0s;
}
@keyframes fadeIn { /*animation-nameで設定した値を書く*/

  0% {opacity: 0} /*アニメーション開始時は不透明度0%*/

  100% {opacity: 1} /*アニメーション終了時は不透明度100%*/

}
.word {
  position: absolute;
  width: 220px;
  opacity: 0;
}

.letter {
  display: inline-block;
  position: relative;
  float: left;
  transform: translateZ(25px);
  transform-origin: 50% 50% 25px;
}

.letter.out {
  transform: rotateX(90deg);
  transition: transform 0.32s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.letter.behind {
  transform: rotateX(-90deg);
}

.letter.in {
  transform: rotateX(0deg);
  transition: transform 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.wisteria {
  color: #f90;
}

.belize {
  color: #ee848c;
}

.pomegranate {
  color: #c0392b;
}

.green {
  color: #16a085;
}

.midnight {
  color: #2c3e50;
}
#main_body_in{
		width:100%;
		height:auto;
		background:rgba(0,0,0,0.5);
	}    
#main_body_inp{
		width:100%;
		height:auto;
		
		top:100px;
		left:0px;
		padding-top:200px;
		font-family: 'Noto Sans Japanese', serif;
	}
    #main_body_inp_in{
			width:90%;
			height:auto;
			margin:0px auto;
		}
    #main_body_inp_ins{
			width:80%;
			height:auto;
			background:rgba(255,255,255,0.7);
			padding: 10px; 5%;
            margin: 0px auto;
		}
    #main_body_inp_ins .date{
			text-align:right !important;
			font-size:12px;
			color:#741a3d;
		}
    #main_body_inp_ins p{ text-align: left !important}
		#main_body_inp_ins p a:link {color:#000 !important;border-style:none !important; text-decoration:none !important;text-align: left !important}
		#main_body_inp_ins p a:hover {color:#666 !important;border-style:none !important; text-decoration:none !important;text-align: left !important}
		#main_body_inp_ins p a:visited {color:#000 !important;border-style:none !important; text-decoration:none !important;text-align: left !important}
    
    #important_message{ width: 100%; background-color: rgba(0,77,160,0.1); border-bottom: 1px solid #ccc;}
    #important_message_in{ width: 90%; margin: 0px auto; line-height: 50px; font-size: 0.8rem; color: #333;}
    #important_message_in a{ color: red; text-decoration: none}
    
    #contents{ width: 100%; margin: 20px auto; background-color: #fff;}
    
    #contents_in{ width: 94%; margin: 50px auto;}
    #contents_in h1{ font-size: 1.5rem; text-align: left; color: #666; font-weight:bold; border-left: 5px solid #0b8c43; padding-left: 10px; border-bottom: dotted 1px #666; margin-bottom: 30px;}
    #contents_in h2{ font-size: 1.2rem; text-align: center; color: #004097; font-weight:bold; margin: 30px auto; line-height: 1.8rem;}
    #contents_in h2.subtitle{ font-size: 1.1rem; text-align: center; color: #fff; font-weight:lighter; margin: 30px auto; background-color: #004097; line-height: 1.4rem; padding: 10px;}
    #contents_in h2.subtitleb{ font-size: 1.1rem; text-align: center; color: #333; font-weight:lighter; margin: 30px auto; background-color: #8de1ff; line-height: 1.4rem; padding: 10px 0px;}
    #contents_in h2.subtitleg{ font-size: 1.1rem; text-align: center; color: #333; font-weight:lighter; margin: 30px auto; background-color: #ffc0da; line-height: 1.4rem; padding: 10px 0px;}
        #con_in_messege{ width: 90%; margin: 50px auto;}
        #con_in_messege p{font-size: 1.1rem !important; line-height: 1.8rem !important; text-align: left; }
        #con_in_messege p span{ color: #ee848c; font-weight: bold;}
    #con_in_messege img{ float: left; margin-right: 30px;}
        #con_in_messege p.message{font-size: 1.1rem !important; line-height: 1.8rem !important; }
        #con_in_messege ul{width: 96%; margin: 0px auto; padding: 0px;}
    #boxarea{ width: 100%; margin: 0px auto; margin-bottom: 8px !important; background-color: #ee848c;}
    #boxarea_l{padding: 10px 3%; line-height: 2.0rem; width: 94%; color: #fff}
    #boxarea_r{padding: 10px 3%; line-height: 2.0rem; background-color: #fff; width: 94%;}
    #boxareasw{ width: 100%; margin: 0px auto; margin-bottom: 8px !important; background-color: #fff;}
    #boxareas{ width: 100%; margin: 0px auto; margin-bottom: 8px !important; background-color: #f0f0f0;}
    #boxareas_l{padding: 10px 3%; line-height: 2.0rem; width: 94%;}
    #boxareas_r{padding: 10px 3%; line-height: 2.0rem; background-color: #fff; width: 90%; margin: 0px 2%}
    
    #contents_in p{color: #333; font-size: 1.0rem; margin: 20px auto; font-weight: normal;}
    #contents_in p.sign{color: #000; font-size: 1.0rem;font-weight: bold; text-align: right}
    #contents_in p.sign span{color: #000; font-size: 1.5rem; font-weight: bold;}
    #contents_in ul.cnt{padding-left: 15px; list-style-type: none; color: #333;}
    .ul-align-center{display: flex;align-items: center;flex-direction: column; color: #333;}
    #contents_in li.fltl{float: left; margin: 20px;}
    
    #contents_in table,td,th{
	border-collapse: collapse;
    border:1px solid #333;
	line-height:1.5rem;
        padding: 5px;
        font-size: 1.0rem;
    }
    
    #contents_sepa{ width: 40%; height: auto; float: left; margin: 1% 5%;position:sticky;}
    #contents_sepa.waku{ border: 1px solid #e3d588; padding: 0% 5%;  width: 80% }
    
    #contents_sepa_r{ width: 100%; height: auto; margin: 10px 0%;position:sticky;}
    #contents_sepa_l{ width: 100%; height: auto; margin: 0% 0%;position:sticky;}
    #contents_sepa_l h2{font-size: 1.2rem; text-align: left; color: #42210b; font-weight:bold; margin: 0px auto}
    #contents_sepa_l p{font-size: 1.1rem !important; line-height: 1.8rem !important; text-align: left;}
    
    
    #mixbox{ width: 100%; position: relative; height: auto; margin: 0px auto;}
    #mixbox_l{ display: none;}
    #mixbox_r{ width: 100%; height: auto;}
    #mixbox_ttl{ width: 200px; height: 200px; position: absolute; top: 25%; left: 50%; margin-left: -100px; background-color: #ee848c}
    #mixbox_ttl h2{ color: #fff;
    text-align: center; font-size: 1.2rem;}
    #mixbox_ttl p{ color: #fff;
    text-align: center; font-size: 0.8rem; width: 90%; margin: 0px auto;}
    #mixbox_pict_a{ display: none;}
    #mixbox_pict_b{ width: 50%; height: auto; float: left; }
    #mixbox_pict_c{ width: 50%; height: auto; float: left;}
    #mixbox_pict_d{ display: none;}
    #mixbox_pict_e{ width: 50%; height: auto; float: left;}
    #mixbox_pict_f{ width: 50%; height: auto; float: left;}
    
    .map {
	position: relative;
	width: 86%;
	max-width: 1000px;
	margin: 0px auto;
	border: 1px solid #85afcc;
	background-color: #ffffff;
	box-shadow: 2px 2px 10px -1px #dedede;
}
.midashi_map {
	width: 70%;
	max-width: 598px;
	position: absolute;
	transform: translate(-50%, -50%);
	top: 0%;
	left: 50%;
	z-index: 2;
}
.googlemap_sp {
	width: 100%;
	margin: calc(20px + 4.0vw) auto calc(40px + 1.0vw);
}
.googlemap_pc {
	display: none;
}
    
    #information{width: 100%; padding-top: 10px;}
    #information h3{color:#ee848c }
    #impnewsbox{width: 98%; border-top: 1px solid #999; box-sizing:border-box;}
    #newsday{width: 20%; 
        text-align: center; color: #333; font-size: 12px; margin: 0px 0px;line-height: 20px;}
    #newscat{ float: left; width: 20%; 
        text-align: center; color: #333; font-size: 12px; margin: 5px auto;line-height: 40px;}
        .impred{width: 80%; margin: 5px auto; background-color: red;line-height: 30px; color: #fff; font-size: 0.5rem;}
        .impexam{width: 80%; margin: 5px auto; background-color: #7d0f40;line-height: 30px; color: #fff; font-size: 0.5rem;}
        .impgreen{width: 80%; margin: 5px auto; background-color: green;line-height: 30px; color: #fff; font-size: 0.5rem;}
        .imporange{width: 80%; margin: 5px auto; background-color: orange;line-height: 30px; color: #fff; font-size: 0.5rem;}
        .impblue{width: 80%; margin: 5px auto; background-color: blue;line-height: 30px; color: #fff; font-size: 0.5rem;}
        .impaward{width: 80%; margin: 5px auto; background-color: black;line-height: 30px; color: #fff; font-size: 0.5rem;}
    p.imp { margin: 5px auto; background-color: red; line-height: 30px; color: #fff !important; font-size: 10px; width: auto; padding: 5px; text-align: center;float: right}
    p.cat { margin: 5px auto; background-color: blue; line-height: 30px; color: #fff !important; font-size: 10px; width: auto; padding: 5px; text-align: center ;float: right}
    p.impg { margin: 5px auto; background-color: green; line-height: 30px; color: #fff !important; font-size: 10px; width: auto; padding: 5px; text-align: center ;float: right}
    p.award { margin: 5px auto; background-color: #000; line-height: 30px; color: #fff !important; font-size: 10px; width: auto; padding: 5px; text-align: center ;float: right}
    p.exam { margin: 5px auto; background-color: #7d0f40; line-height: 30px; color: #fff !important; font-size: 10px; width: auto; padding: 5px; text-align: center ;float: right}
    p.edu { margin: 5px auto; background-color: orange; line-height: 30px; color: #000 !important; font-size: 10px; width: auto; padding: 5px; text-align: center ;float: right}
    .subject{ font-size: 1.2rem; text-align: center; text-decoration: underline; color: #000}
    #newstit{ float: left; width: 80%;border-bottom: 1px dotted #7d0f40; 
        text-align: left; color: #333; font-size: 0.8rem; margin: 5px auto;line-height: 40px;}
    #catcharea{ width: 100%; height: 240px; margin: 0px auto; background: url("../img/catcharea.jpg") center; background-size:cover;padding-top: 50px;}
    #campagin{width: 100%; height: auto;}
    p.mgc{text-align: center}
    #trio_area_l{ width: 100%; margin-bottom: 10px; display: block; background-image: url("../img/life_meal1.jpeg"); background-repeat: no-repeat; background-size: cover}
    #trio_area_l a{ text-decoration: none;}
    #trio_area_c{ width: 100%; margin-bottom: 10px; display: block; background-image: url("../img/life_meal2.jpeg"); background-repeat: no-repeat; background-size: cover}
    #trio_area_c a{ text-decoration: none;}
    #trio_area_r{ width: 100%; margin-bottom: 10px; display: block; background-image: url("../img/okome.jpg"); background-repeat: no-repeat; background-size: cover}
    #trio_area_r a{ text-decoration: none;}
    
    #trio_area_in_up{ width: 100%; height: 230px;}
    #trio_area_in_down{ width: 98%;height: 60px; text-align: center; color: #333; font-size: 1.0rem; line-height: 15px;}
    
    
    .trio_bg_line_orange{background-color: rgba(255,255,255,0.7); z-index: 999; line-height: 30px !important; text-align: left !important; padding: 1%;}
    .trio_bg_line_green{background-color:rgba(255,255,255,0.7); z-index: 999; line-height: 30px !important; text-align: left !important; padding: 1%;}
    .trio_bg_line_blue{background-color: rgba(255,255,255,0.7); z-index: 999; line-height: 30px !important; text-align: left !important; padding: 1%;}
    #boys{ padding: 10px 10px 5px; border-bottom: double 5px black; width: 30%; position: absolute; top: 170px; left: 0px;}
    #boys:after {

position: absolute;

content: "▼";

top: 20%;

right: 10px;

width: 12px;

height: 24px;
    font-size: 0.7rem


}
    #girls{padding: 10px 10px 5px; border-bottom: double 5px red; width: 30%; margin-left: 10%; position: absolute; top: 170px; left: 40%; color: red}
    #girls:after {

position: absolute;

content: "▼";

top: 20%;

right: 10px;

width: 12px;

height: 24px;
    font-size: 0.7rem


}
    #aboutus_text{
	width:94%;
	height:250px;
        margin: 0px auto;
	background:rgba(255,255,255,0.0);
	z-index:201;
}
    #aboutus_text h2{ font-size: 1.5rem; color: #fff; font-weight: bold; text-align: center;line-height: 2.0rem;
    text-shadow: 1px 1px 1px #999,
    -1px 1px 1px #999,
    1px -1px 1px #999,
    -1px -1px 1px #999;}
    #aboutus_text p{ font-size: 1.0rem; color: #fff; text-align: center;line-height: 1.5rem;}
    #abus_wordback_thum{
	width:48%;
	height:150px;
	float:left;
	margin:1%;
         overflow: hidden !important;
    }
    #abus_wordback_thum img{width: 100%; height: auto;}
    #more_box{
    width: 100px;
    height: 30px;
    margin: 20px auto;
    text-align: center;
    border-bottom: 1px solid #fff !important;
    border-left: 1px solid #fff !important;
    border-right: 1px solid #fff !important;
    border-top: 1px solid #fff !important;
    border-radius: 15px;
    background-color: none !important;
    color: #fff;
    line-height: 30px;
    font-size: 0.8rem;
}
#more_box a{color: #fff; text-decoration: none;}
#more_box_blue{
    width: 200px;
    height: 30px;
    margin: 20px auto;
    text-align: center;
    border-bottom: 1px solid #004DA0 !important;
    border-left: 1px solid #004DA0 !important;
    border-right: 1px solid #004DA0 !important;
    border-top: 1px solid #004DA0 !important;
    border-radius: 15px;
    background-color: #004DA0 !important;
    color: #fff;
    line-height: 30px;
    font-size: 0.8rem;
}
#more_box_blue a{color: #fff; text-decoration: none;}
#outline{　width: 94%; margin:0px auto; background-color: #fff;}
#suq_area{　width: 100%; margin:40px auto}
    #suq_box{ width: 100%; height: 140px;  padding-top:5px; }
    #suq_box.spieng{ background: url("../img/ieng.png") center; background-size: cover;}
    #suq_box.spcampusasia{ background: url("../img/campusasia.jpg") center; background-size: cover;}
    #suq_box.spevergreen{ background: url("../img/evergreen.jpg") center; background-size: cover;}
    #suq_box.spieices{ background: url("../img/ieices.jpg") center; background-size: cover;}
    #suq_box_in{ width: 90%; height: 90px; margin: 0px auto;}
        #suq_box_in h2{ font-size: 1.5rem; color: #000; font-weight: bold; text-align: center;
    line-height: 3.5rem;
    text-shadow: 1px 1px 1px #fff,
    -1px 1px 1px #fff,
    1px -1px 1px #fff,
    -1px -1px 1px #fff;}
    #suq_box_in p{ color: #fff; text-align: center;}
    #footer_logo{margin-left:0px;}
    
    #search{ width: 100%; color: #333; font-size: 0.9rem; height: 1.5rem}
    #searchsbmt{ color: #fff;font-size: 0.9rem; padding: 5px 10px; background-color: #333; margin-top: 15px;}
/*------------------------------------------ コンテンツスタイル ------------------------------------------*/
    pg_top{width: 100%; height: 120px; background-color: #f0f0f0; padding-top: 80px;}
    pg_top h1{ color: #fff; text-align: center; font-size: 38px; line-height: 50px; font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif" ; border: none;text-shadow:2px 2px 3px #333;}
    #pg_top{width: 100%; height: 70px; background-color: #f0f0f0; padding-top:30px;}
    #pg_top h1{ color: #fff; text-align: center; font-size: 18px; line-height: 24px; font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif" ; border: none;text-shadow:2px 2px 3px #333;}
    #pg_top_labo{width: 100%; height: 70px; background-color: #f0f0f0; padding-top:30px;}
    #pg_top_labo h1{ color: #fff; text-align: center; font-size: 18px; line-height: 24px; font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif" ; border: none;text-shadow:2px 2px 3px #333;}
    .labo_top{ background: url("../pagetop_img/labo_top.jpg"); background-position: center top; background-repeat: no-repeat; background-size: auto 100%;}
    .about_top{ background: url("../pagetop_img/about_top.jpg"); background-position: center; background-repeat: no-repeat; background-size: auto 100%;}
    .learn_top{ background: url("../pagetop_img/about_top.jpg"); background-position: center; background-repeat: no-repeat; background-size: auto 100%;}
    .environment_top{ background: url("../pagetop_img/about_top.jpg"); background-position: center; background-repeat: no-repeat; background-size: auto 100%;}
    .message_top{ background: url("../pagetop_img/about_top.jpg"); background-position: center; background-repeat: no-repeat; background-size: auto 100%;}
    .public_top{ background: url("../pagetop_img/public_top.jpg"); background-position: center; background-repeat: no-repeat; background-size: auto 100%;}
    .alumni_top{ background: url("../pagetop_img/alumni_top.jpg"); background-position: center; background-repeat: no-repeat; background-size: auto 100%;}
    .students_top{ background: url("../pagetop_img/alumni_top.jpg"); background-position: center; background-repeat: no-repeat; background-size: auto 100%;}
    .online_top{ background: url("../pagetop_img/online2_top.jpg"); background-position: center; background-repeat: no-repeat; background-size: auto 100%;}
    .visit_top{ background: url("../pagetop_img/visit2_top.jpg"); background-position: center; background-repeat: no-repeat; background-size: auto 100%;}
    .exam_top{ background: url("../pagetop_img/exam_top.jpg"); background-position: center; background-repeat: no-repeat; background-size: auto 100%;}
    #pan{ width: 100%; margin: 10px auto; text-align: left; font-size: 0.8rem;}
    #pan a{ color: #7d0f40;}
    #pan a:hover{ text-decoration: underline}
    #contents_title{ font-size: 1.5rem; text-align: center; color: #666; font-weight: lighter; margin: 30px;}
    #contents_subtitle{ font-size: 1.2rem; text-align: center; color: #333; font-weight: lighter; margin-top: 30px; text-decoration: underline;}
    #contents_out{ width: 100%; margin: 10px auto; padding-bottom: 20px; padding-top: 20px;}
    #contents_area{ width: 98%; margin: 10px auto;}
    #contents_area p{color: #333; font-size: 0.9rem; margin: 10px auto;}
    #contents_area ul.cnt{padding-left: 15px; list-style-type: none; color: #333;}
    .ul-align-center{display: flex;align-items: center;flex-direction: column;}
     .pictimg{float:right;margin:5px;padding:5px;box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.1); width: 33%;}
     .pictimgs{float:right;margin:10px 50px;padding:10px;box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.1); width: 20%;}
    #contents_sepa{ width: 90%; height: auto; margin: 1% 5%;position:sticky;}
    #gotomap{ width: 100%; height: 80px; margin: 20px auto; border: 1px solid #ccc; text-align: center; line-height: 80px;}
    ul.master_boxs{ font-size: 14px; list-style: none; margin: 0px; padding: 0px;}
    #contents_area table,td,th{
	border-collapse: collapse;
    border:1px solid #333;
	line-height:1.5rem;
        padding: 5px;
        font-size: 1.0rem;
    }
    ol.asterisk {
    width:90%;
    margin:20px auto !important;
    counter-reset: number;
    list-style: none;
    color:#000;
    list-style-position:outside;
    padding-left:0px;
    }
    ol.asterisk li:before {
    counter-increment: number;
    content: "※"counter(number)" ";
    }
    ol.asterisk li{
    margin:5px 0px;}
    .hinichi{
	width:75%; float:left
    }
    .koumoku_box{
        width:25%; float:left
    }
    #contents_area table{ margin-top: 30px;}
    #thum_boxs{ width: 23%; margin: 1%; float: left; background-color: #f0f0f0; max-height: 60px; overflow: hidden;}
    #indent_box_labo{ width: 85%; margin: 5px auto;padding: 2%; border: 1px solid #ccc}
    #indent_box{ width: 90%; margin: 5px auto;}#member_list{ border-bottom: 1px dotted #ccc; width: 100%; padding-bottom: 10px;}
    #gaku{padding: 0px 10%; font-size: 1.0rem; border: 2px solid #333; width: 80%; float: left;}
    #gaku h2{ text-align: center; font-size: 1.0rem}
    #gaku_req{padding: 0px 30px; font-size: 1.0rem; border: 2px solid #333;}
    #kei{padding: 0px 5px; font-size: 0.5rem !important; border: 1px solid #ccc; float: right; color: #333; margin-top: 15px; margin-bottom: 15px}
    #kei_link{padding: 0px 5px !important; font-size: 0.5rem !important; float: right; color: #fff; margin-top: 15px; margin-bottom: 15px}
    span > h2{ font-size: 0.5rem; line-height: 1.5rem;}
    #keyword{ border-top: 1px dotted #ccc; width: 100%; padding-top: 10px;}
    #labo_link{float: right; text-align: center; padding-top: 10px;}
    #request{padding: 10px; font-size: 1.0rem; border: 1px solid #ccc; color: #fff; background-color: #006837}
    #release{padding: 5px; font-size: 0.5rem; border: 1px solid #ccc; color: #fff; background-color: red}
    #bookmark{padding: 5px; font-size: 0.5rem; border: 1px solid #ccc; color: #fff; background-color: orange}
    #indent_box{ width: 80%; margin: 5px auto;}
    .flt{ text-align: center; font-size: 1.2rem; color: #333;}
    #indent_box dl{ width: 100% ;margin: 0px auto;}
    #indent_box dt{ float: left; width: 37%; font-size: 1.0rem}
    #indent_box dd{ float: left; width: 53%; font-size: 1.0rem}
    #indent_box li{ margin-bottom: 10px;}
    #pi_box{ width: 90%; margin: 5px auto;}
    #pi_boxs{ width: 48%; float: left; margin: 1%; }
#boxareas_r input{ padding: 10px; color: #333}
    #boxareas_r textarea{ color: #333}    
/* == シンプルパターン：typeA == */
#type-A label{
	margin-bottom:5px;
	padding-left:30px;
	display:block;
	font-size:18px;
	cursor:pointer;
	position:relative;
}
#type-A input{
	position:absolute;
	z-index:-1;
	opacity:0;
}
#type-A .indicator{
	width:20px;
	height:20px;
	background:#e6e6e6;
	position:absolute;
	top:12px;
	left:0;
}
#type-A .typeA-radio .indicator{
	border-radius:50%;
}
#type-A label:hover input ~ .indicator,
#type-A label input:focus ~ .indicator{
	background:#ccc;
}
#type-A label input:checked ~ .indicator{
	background:rgba(0,154,219,1);
}
#type-A label:hover input:not([disabled]):checked ~ .indicator{
	background:rgba(0,154,219,.7);
}
#type-A .typeA-radio input:checked ~ .indicator{
	background: #666666;
}
#type-A .typeA-radio:hover input:not([disabled]):checked ~ .indicator{
	background:rgba(102,102,102,.7);
}
#type-A label input:disabled ~ .indicator,
#type-A .typeA-radio input:disabled ~ .indicator{
	background:#e6e6e6;
	opacity:0.6;
	pointer-events:none;
}
#type-A .indicator::after{
	content:'';
	display:none;
	position:absolute;
}
#type-A label input:checked ~ .indicator::after{
	display:block;
}
#type-A .typeA-checkbox .indicator::after{
	width:5px;
	height:8px;
	border:solid #fff;
	border-width:0 2px 2px 0;
	left:8px;
	top:4px;
	transform:rotate(45deg);
}
#type-A .typeA-checkbox input:disabled ~ .indicator::after{
	border-color:#7b7b7b;
}
#type-A .typeA-radio .indicator::after{
	width:6px;
	height:6px;
	border-radius:50%;
	background:#fff;
	top:7px;
	left:7px;
}
#type-A .typeA-radio input:disabled ~ .indicator::after{
	background:#7b7b7b;
}
    
 /*------------------------------------------ マップリンクスタイル ------------------------------------------*/   
.gotomap {
  position: relative;
  display: inline-block;
  width: 80%; height: 80px; margin: 20px auto 20px 10%;
  border: 1px solid #e3d588;
 line-height: 80px;
  color: #004097;
  font-size: 18px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  text-align: center;
  text-decoration: none;
  transition: .3s;
}
.gotomap::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  content: '';
  background: #e3d588;
  transition: transform .3s;
}
.gotomap:hover {
  color: #fff; background-color: #e3d588;
}


.gotomap01::before {
  transform-origin: right top;
  transform: scale(0, 1);
}
.gotomap01:hover::before {
  transform-origin: left top;
  transform: scale(1, 1);
}
/*------------------------------------------ マルマップリンクスタイル ------------------------------------------*/   
.gotomaps {
  position: relative;
  display: inline-block;
  width: 80%; height: 60px; margin: 20px auto 20px 10%;
 line-height: 60px;
  color: #fff;
  font-size: 18px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  text-align: center;
  text-decoration: none;
  transition: .3s;
    background-color: #42210b;border-radius: 30px;
}
.gotomaps::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  content: '';
  background: #fff;
  transition: transform .3s;border-radius: 30px;
}
.gotomaps:hover {
  color: #42210b; background-color: #fff;border-radius: 30px;
}


.gotomaps01::before {
  transform-origin: right top;
  transform: scale(0, 1);border-radius: 30px;
}
.gotomaps01:hover::before {
  transform-origin: left top;
  transform: scale(1, 1);border-radius: 30px;
}

/* 以下、スクロールバーを追加 */
.table-scroll::-webkit-scrollbar{　　
 height: 5px;
}
.table-scroll::-webkit-scrollbar-track{
 background: #333;
}
.table-scroll::-webkit-scrollbar-thumb {
 background: #999;
}

/* 以下、tableの指定 */
.table-scroll table{
  border-collapse:collapse;
  border-spacing:0;
  border-top:#ccc solid 1px;
  border-left:#ccc solid 1px;
}
.table-scroll table th,
.table-scroll table td{
  padding:3px 5px;
  font-weight:normal;
  border-right:#ccc solid 1px;
  border-bottom:#ccc solid 1px;
  font-size:12px;
}
.table-scroll table th{
  background:#eee;
  width:auto;
}




.fixed01,
.fixed02{
  position: sticky;
    position: -webkit-sticky;
  top: 0;
  left: 0;
  color: #fff;
  background: #333;
  &:before{
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    width: 100%;
    height: 100%;
    border: 1px solid #ccc;
  }
}
.fixed01{
  z-index: 2;
     color: #fff !important;
}
.fixed02{
  z-index: 1;
     color: #fff !important;
}
    .chu-moku{ width: 90%; margin: 0px auto; background-color:#bfe8f7; padding: 0px 10px 10px; font-size: 12px;}
    .chu-moku a{ color: blue;}
    .chu-moku span.keytitle{padding: 5px; margin-top: 10px; background-color:#88bcd3; display: inline-block !important; color: #fff}
    .chu-moku span.keytext{padding: 5px; margin-left: 10px; margin-top: 10px; background-color:#e6f9ff; display: inline-block !important; color: blue;border-radius: 3px; display: block}
    .chu-moku span.view_list{padding: 5px; margin-left: 10px; margin-top: 10px; background-color:#333; display: inline-block !important; color: blue;border-radius: 3px; display: block}.chu-moku span.view_list a{color: #fff}
 
/*------------------------------------------ フッタースタイル ------------------------------------------*/      
 footer{ width: 100%; margin: 0px; padding-top: 30px; padding-bottom: 30px; background-color: #f0f0f0;border-top: 3px solid #004097; }   
    
    #footer_area_in a{ color: #333;}
#f_ask{ width: 100%;
    height: auto;
        background-image: url("../img/f_ask.jpg");
        background-position: center center;
        background-repeat: no-repeat;
        padding-top: 50px;
        padding-bottom: 50px;
    }
    #f_ask h2{ color: #fff; margin-top: 50px;text-shadow: 1px 2px 3px #000;}
    #f_ask h2 span{font-size: 1.3rem; line-height: 3.0rem}
#footer_area_bottom a{
	color:#000 !important;
	text-decoration:none;
}
#footer_area_bottom a:hover{
	color:#000 !important;
	text-decoration:none;
}
#footer_area_bottom a:visited{
	color:#000 !important;
	text-decoration:none;
}
#footer_area_bottom a:hover{
	color:#FFF;
	text-decoration:none;
}

#footer_area a{
	color:#333;
	text-decoration:none;
}
#footer_area a:hover{
	color:#ccc;
	text-decoration:none;
}

#footer_boxb{
	width:80%;
	height:auto;
	margin:10px auto;
	padding:0px;
	float:none;
}
#footer_boxb .date{
	font-size:12px;
	margin:0px;
	padding:0px;
	color:#000;
}
#footer_boxb .dates{
	font-size:12px;
	margin:0px;
	padding:0px;
	color:#000;
	text-align:right;
}
#footer_boxb span{
	font-size:11px;
	font-weight:bold;
	color:#999;
}
#footer_boxb dl{
	width:100%;
	margin:0px;
	padding:0px;
}
#footer_boxb dt{
	width:100%;
	margin:0px;
	padding:0px;
	color:#000;
	 border-bottom:1px solid #fff;
	 font-weight:bold;
}
#footer_boxb dd{
	margin:0px !important;
	padding:0px !important;
}
#footer_boxb ul{
	margin:0px auto !important;
	padding:0px !important;
	list-style:none;
}

#footer_boxs{
	width:80%;
	height:auto;
	margin:10px auto;
	padding:0px;
	float:none;
}
#footer_boxs span{
	font-size:11px;
	font-weight:bold;
	color:#999;
}
#footer_boxs dl{
	width:100%;
	margin:0px;
	padding:0px;
}
#footer_boxs dt{
	width:100%;
	margin:0px;
	padding:0px;
	color:#000;
	 border-bottom:1px solid #000;
	 font-weight:bold;
}
#footer_boxs dd{
	margin:0px !important;
	padding:0px !important;
}
#footer_boxs dd ul{
	width:100%;
	margin:0px auto !important;
	padding:0px !important;
	list-style:none;
}
#footer_boxs dd ul li{
	width:100%;
}
    
    #footer_area_bottom{
		width:100%;
		height:auto;
		margin:0px auto;
        text-align:center;
        background-color: #004097;
	}
	#footer_area_bottom_in{
		width:100%;
		height:auto;
		margin:0px auto;
        text-align:center;
        color: #fff;
	}
    #footer_area_bottom_in span a{ color: #fff !important; font-size: 0.8rem; line-height: 50px;}
#addressWrap {
	width: 100%;
	margin: 0 auto;
}
.map {
	width: 90%;
	margin: auto;
}
.map img {
	width: 100%;
}
.address {
	width: 100%;
	text-align: center;
	margin: 10px auto 0;
}
.logo-img {
	width: 80%;
	margin: 20px auto 0;
}
.address p {
	font-size: 14px;
	font-family:"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ",'Nunito Sans',sans-serif;
	margin: 30px auto 30px;
}
.tel-img {
	width: 70%;
	max-width: 360px;
}
.mail-img {
	width: 70%;
	max-width: 360px;
	margin: 28px auto 0px;
	vertical-align: bottom;
}
}
@media all and (max-width:321px){
        .open {
	position: fixed;
	bottom: 140px !important;
	right: 20px !important;
	cursor:pointer;
        background-color: red;color: #fff;
	border-radius: 15px;
        text-align: center;
        width: 30px; height: 30px;
        line-height: 30px;
        z-index: 9998;
}
#pop-up {
	display: none;
}
.overlay {
	display: none;
}
#pop-up:checked + .overlay {
	display: block;
	position: fixed;
	width: 5%;
	height: 5vh;
	top: 0;
	left: 0;
	z-index: 9999;
	background: rgba(0, 0, 0, 0);
}
    
.window {
	position: fixed;
	bottom: 0px !important;
	right: 0px !important;
	width: 90vw;
	max-width: 240px;
    padding: 20px;
	height: 110px;
	background-color: #fff;
	border-radius: 4px;
	align-items: center;
	transform: translate(-50%, -50%);
    margin-right: -130px;
    margin-bottom: -65px;
    text-align: center;
    border: 5px double #004097;
}
    .window h4{line-height: 0.8rem; font-size: 0.8rem; margin-bottom: 20px;}
    .window p{line-height: 1.4rem; font-size: 0.8rem}
.close {
	position: absolute;
	top: 4px;
	right: 4px;
	cursor:pointer;
}
    .scroll{ display: none}
}