@charset "utf-8";
/* レイアウトのためのCSS */
html {
    scroll-padding-top: 80px;
}
.wf-sawarabimincho { font-family: "Sawarabi Mincho"; }
body{
    font-family: 'Noto Sans JP', sans-serif;
	color: #190A06;
	font-size:1rem;
	line-height:1.85;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-text-size-adjust: 100%; 
	word-wrap: break-word;
	background:#fff;
	background: linear-gradient(180deg, #0A308E 0%, #0A308E 5%, #fff 5%, #fff 95%);
}

*{box-sizing: border-box;}

ul{
	margin:0;
	padding: 0;
	list-style: none;
}

a{
	color: #333;
	text-decoration: none;
    outline: none;
}

img{
    width: 100%;
    height: auto;
}

/* font-family */

.heading{
    font-size: 58px;
    font-weight: normal;
    color: #00489E;
    animation-delay: 0.3s;
}
.heading .btxt{
	background-color:#fff;
	padding:0 20px 5px 20px;
	font-weight:bold;
}
.heading .stxt{
	font-size:33px;
	display:block;
	background-color:#fff;
	padding:0px 20px 0px 20px;
	display:block;
	width:fit-content;
	margin-top:10px;
}
.heading br{
	display:none;
}
@media screen and (max-width:960px) {
.heading{
    font-size:50px;
}
.heading .stxt{
	font-size:23px;
}
}
@media screen and (max-width:870px) {
.heading{
    font-size:35px;
	letter-spacing:0.1em;
}
.heading .btxt{
	padding:0px 20px 10px 20px;
	text-align:left;
}
.heading .stxt{
	font-size:18px;
	line-height:1.8;
}
.heading br{
	display:block;
}
}

#container{
    overflow-x: hidden;
}

/* header */

#header{
    background:#0A308E;
	 display: flex;
	 justify-content:flex-end ;
	 font-family: 'Lato', sans-serif;
}
#header h1{
    position: absolute;
    top: 0;
    left:0%;
}
#header h1 a{
	height:60px;
	display:flex;
	align-items:center;
	padding:0 30px;
}
#header h1 a:hover{
	opacity:0.6;
}
#g-nav ul{
    display: flex;
    padding: 0 30px 0 0;
}

#g-nav ul li{
  letter-spacing: 0.1em;
    white-space: nowrap;
}
#g-nav ul li a{
    display: block;
    padding:6px 15px;
	color:#fff;
	font-size:18px;
	letter-spacing:0.1em;
	font-weight:normal;
}
#g-nav ul .contact-btn{
	display:none;
}
@media screen and (max-width:1230px) {
#g-nav ul{
    padding: 0 0px 0 0;
}
#g-nav ul li a{
    font-size:16px;
	padding:6px 10px;
}
#header h1 a{
	padding:0 20px;
}
}
@media screen and (max-width:870px) {
#g-nav ul{
    display: block;
    padding: 0;
}
   
#g-nav ul li a{
    padding:6px 15px;
}
}

#header ul#utility-navi{
    position: fixed;
    top:0;
    right:0;
    z-index: 999;
    display: flex;
    font-size: 16px;
	font-family:Arial, Helvetica, sans-serif;
}

#header ul#utility-navi li{
    text-align: center;
	}

#header ul#utility-navi li span{
    display: block;
}

#header ul#utility-navi li a{
    color: #fff;
    padding: 15px 0;
    display:flex;
	align-items:center;
	justify-content:center;
    width:168px;
	height:86px;
    transition: all .5s;
	background:#00AE68;
}
#header ul#utility-navi li a:hover{
     background:#222;
}
@media screen and (max-width:1100px) {
#header ul#utility-navi li a{
     width:100px;
}
#g-nav ul li a{
    font-size:14px;
	padding:6px 6px;
}
#header ul#utility-navi{
    font-size:14px;
}
#header h1 img{
	width:180px;
	height:auto;
}
}
@media screen and (max-width:870px) {
#g-nav ul{
    padding: 0 0px 0 0;
}
#g-nav ul li a{
    font-size:16px;
	padding:12px 6px;
}
#g-nav ul .contact-btn{
	display:block;
}
#header ul#utility-navi li a{
    width: 70px;
    height: 70px;
    padding: 0;
}
    
#header ul#utility-navi li img {
    margin: 10px 0 0 0px;
}
#header h1 a{
	display:flex;
	align-items:center;
	padding:15px 0px 10px 10px;
	height:auto;
} 
#header h1 img{
	width:230px;
	height:auto;
}
#header ul#utility-navi li{
    display: none;    
}
}
/* lead */

#lead{
    position: relative;
    padding: 0px 0 0 0;
	top: 60px;
    left:0;
    
}


#lead h2.heading{
     position: absolute;
    top:300px;
     left:5%;
}

#lead .lead{
     position: absolute;
    top:320px;
     right:4%;
    font-size: 2rem;
    letter-spacing: 0.2em;
    line-height: 1.6;
    -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    white-space: nowrap;
}

#lead .lead span{
     display: block; 
    padding: 100px 0 0 0;
}
@media screen and (max-width:960px) {
#lead h2.heading{
    top:250px;
}
}
@media screen and (max-width:769px) {
#lead h2.heading{
    top:200px;
}
}


/* 共通 */
h2{
	color:#221814;
	text-align:center;
	font-size:40px;
	margin:0;
	font-weight:normal;
	padding:20px 0px 20px 0px;
	font-family:"Sawarabi Mincho","ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
}
@media screen and (max-width:769px) {
h2{
	font-size:36px;
}
}
@media screen and (max-width:400px) {
h2{
	font-size:32px;
}
}
p{
	color:#221814;
	text-align:center;
	font-size:16px;
	margin:0;
	font-weight:normal;
	padding:0px 0px 20px 0px;
	line-height:2.32;
}
.inner{
	max-width:1080px;
	display:block;
	margin:auto;
	padding-left:20px;
	padding-right:20px;
}
.gmap {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    /* 16:9のアスペクト比 */
    height: 0;
}

.gmap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}




/* about_kougei */
#about_kougei{
    text-align: center;
    padding: 80px 0 30px 0;
	background-color:#E3F2FD;
}

/* event_kougei */
#event_kougei{
    text-align: center;
    padding: 40px 0 40px 0;
	background-color:#fff;
}
#event_kougei h3{
	background-color:#221814;
	padding:8px;
	color:#fff;
	text-align:center;
	font-size:16px;
	font-weight:normal;
	margin-bottom:20px;
}
#event_kougei h3 span{
	font-size:12px;
	padding-left:15px;
}
#event_kougei h4{
	font-size:18px;
	text-align:left;
	font-weight:normal;
	padding:5px 0px 10px 0px;
}
#event_kougei .box-item p{
	text-align:left;
	font-size:14px;
	line-height:1.6;
	padding-bottom:5px;
}
.box-event1{
	display:flex;
	padding-bottom:50px;
}
.box-item{
	width:50%;
	padding:25px;
}
.box-event2{
	display:flex;
	border-bottom:1px solid #777777;
	margin-bottom:20px;
}
.box-event2.noborder{
	border-bottom:0px;
}
.box-event2 .box-item{
	display:flex;
}
.box-event2 .box-item figure{
	padding-right:30px;
	width:45%;
}
.box-event2 .box-item .conts{
	width:55%;
}
#event_kougei .box-event2  h4{
	font-size:22px;
	padding:0px 0px 0px 0px;
}
.day{
	font-size:24px;
	text-align:left;
}
.day2{
	font-size:39px;
	text-align:center;
	font-weight:normal;
}
.time{
	font-size:18px;
	text-align:left;
}
.time img{
	width:172px;
	height:auto;
	display:inline-block;
}
.name{
	font-size:20px;
	text-align:left;
	font-weight:normal;
	padding:0px 0px 10px 0px;
}
.red{
	color:#D80000;
}
.btn-event a{
	display:block;
	margin:auto;
	width:128px;
	padding:7px;
	color:#fff;
	font-size:16px;
	margin-top:30px;
	background-color:#B20000;
	transition: all .3s;
}
.btn-event a:hover{
	opacity:0.7;
}
@media screen and (max-width:769px) {
.box-event1,
.box-event2{
	flex-wrap:wrap;
}
.box-item{
	width:100%;
	padding:25px 0px;
}
.day .time{
	display:block;
}
.time img{
	width:150px;
	display:block;
	margin-top:3px;
	margin-bottom:7px;
}

}




/* kougeihin */
#kougeihin{
    text-align: center;
    padding: 60px 0 80px 0;
	background-color:#BFE8F3;
	position:relative;
}
#kougeihin h2{
	position:relative;
	}
#kougeihin .k-back{
	position:absolute;
	top: 50%;
	right:0;
  transform: translateY(-50%);
}

#kougeihin .k-back img{
	max-width:619px;
	height:auto;
}
#kougeihin .k-back2{
	position:absolute;
	top: 50%;
  transform: translateY(-50%);
}

#kougeihin .k-back2 img{
	max-width:447px;
	height:auto;
}
#kougeihin .inner{
	max-width:1400px;
}
#kougeihin .box-kougeihin{
	margin-top:-300px;
	position:relative;
	display:flex;
	flex-wrap:wrap;
	align-items:flex-end;
}
#kougeihin .box-kougeihin figure{
	width:20%;
	padding:15px;
}
@media screen and (max-width:1100px) {
#kougeihin .box-kougeihin{
	margin-top:-250px;
}
#kougeihin .k-back img{
	max-width:300px;
	height:auto;
}
#kougeihin .k-back2 img{
	max-width:250px;
	height:auto;
}
}
@media screen and (max-width:1000px) {
#kougeihin .box-kougeihin{
	margin-top:-220px;
}
}
@media screen and (max-width:900px) {
#kougeihin .box-kougeihin{
	margin-top:-200px;
}
}
@media screen and (max-width:768px) {
#kougeihin .box-kougeihin{
	margin-top:-250px;
}
#kougeihin .box-kougeihin figure{
	width:33%;
	padding:15px;
}
#kougeihin .k-back{
	position:absolute;
	top: 30%;
	right:0;
  transform: translateY(-20%);
}
#kougeihin .k-back img{
	max-width:260px;
	height:auto;
}
#kougeihin .k-back2{
	position:absolute;
	top: 80%;
  transform: translateY(-80%);
}
#kougeihin .k-back2 img{
	max-width:250px;
	height:auto;
}
}
@media screen and (max-width:600px) {
#kougeihin .box-kougeihin{
	margin-top:-200px;
}
}
@media screen and (max-width:500px) {
#kougeihin .box-kougeihin{
	margin-top:-160px;
}
}
@media screen and (max-width:450px) {
#kougeihin .box-kougeihin{
	margin-top:-200px;
}
#kougeihin .box-kougeihin figure{
	width:50%;
	padding:15px;
}
}
@media screen and (max-width:380px) {
#kougeihin .box-kougeihin{
	margin-top:-180px;
}
}








/* access_kougei */
#access_kougei{
    text-align: center;
    padding: 40px 0 80px 0;
	background-color:#0A308E;
	position:relative;
}
#access_kougei h2{
	color:#fff;
}
#access_kougei .a-back{
	position:absolute;
	top: 100px;
	right:0;
}
#access_kougei .a-back img{
	max-width:344px;
	height:auto;
}
@media screen and (max-width:450px) {
#access_kougei .a-back img{
	max-width:300px;
	height:auto;
}
}







/* footer */

#footer{
    position: relative;
	background:#fff;
}
#footer .contact-area{
    max-width:1260px;
	display:block;
	margin:auto;
    padding: 40px 20px;
}
#footer h3{
	width:262px;
	height:auto;
	display:block;
	margin:auto;
	margin-bottom:40px;
}
#footer h4{
	border:1px solid #555555;
	width:115px;
	text-align:center;
	font-family:"Sawarabi Mincho","ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
	margin:auto;
	display:block;
	padding:5px;
	font-size:30px;
	font-weight:normal;
	line-height:1.0;
	margin-bottom:10px;
}
#footer p{
	font-size:14px;
}


#footer #page-top{
    position: absolute;
    bottom:0;
    right: 0;
    width:80px;
    height:80px;
    background:rgba(0,0,0,0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

#footer #page-top span{
    display: inline-block;
  width: 13px;
  height: 13px;
  border-top:2px solid #fff;
  border-left: 2px solid #fff;
  transform: rotate(45deg);
}
#footer #page-top a:visited span{
	color:#fff;
}
#footer #page-top a:hover span{
	display: inline-block;
  width: 13px;
  height: 13px;
	 border-top:2px solid #00499E;
  border-left: 2px solid #00499E;
  transform: rotate(45deg);
}

@media screen and (max-width:768px) {
#footer #page-top{
        width:60px;
        height: 60px;
}
#footer h3{
	width:160px;
	margin-bottom:30px;
}
#footer h4{
	width:90px;
	font-size:26px;
}
}