@charset "UTF-8";

* {margin: 0px;padding: 0px;}
html {scroll-behavior: smooth;}
body{font-family:'Zen Kaku Gothic New', "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;font-weight: 500;font-size:16px;line-height:1.8;color:#000;background:#fff;padding:0;}

a{color:#00a0e9;text-decoration: underline;}
a:hover{text-decoration: none;}

ul li{list-style:none;}

.pcimg{ display:block !important;}
.spimg{display: none !important;}

.pcimg02{ display:block !important;}
.spimg02{display: none !important;}

.txt-c{ text-align:center;}
.mb10{margin-bottom:10px;}
.mb20{margin-bottom:20px;}
.mb30{margin-bottom:30px;}
.f12{font-size:12px;}


/*========= ナビゲーションのためのCSS ===============*/

#g-nav{
    /*position:fixed;にし、z-indexの数値を小さくして最背面へ*/
    position:fixed;
	z-index: -1;
	opacity: 0;/*はじめは透過0*/
    /*ナビの位置と形状*/
	top:0;
	width:100%;
    height: 100vh;/*ナビの高さ*/
	background:#ffff00;
    /*動き*/
	transition: all 0.3s;
}

/*アクティブクラスがついたら透過なしにして最前面へ*/
#g-nav.panelactive{
	opacity: 1;
	z-index:999;
}

/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list{
    /*ナビの数が増えた場合縦スクロール*/
    position: fixed;
    z-index: 999; 
    width: 100%;
    height: 100vh;/*表示する高さ*/
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/*ナビゲーション*/
#g-nav ul {
    display: none;
    /*ナビゲーション天地中央揃え*/
    position: absolute;
    z-index: 999;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}

#g-nav.panelactive ul {
    display: block;
}

/*リストのレイアウト設定*/

#g-nav li{
	list-style: none;
    text-align: center; 
}

#g-nav li a{
	color: #000;
	text-decoration: none;
	padding:10px;
	display: block;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: bold;
}

/*========= ボタンのためのCSS ===============*/
.openbtn{
	position:fixed;
    z-index: 9999;/*ボタンを最前面に*/
	top:20px;
	right: 10px;
	cursor: pointer;
    width: 60px;
    height:60px;
}
	
/*×に変化*/	
.openbtn span{
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 14px;
    height: 3px;
    border-radius: 2px;
	background-color: #000;
  	width: 45%;
  }

.openbtn span:nth-of-type(1) {
	top:15px;	
}

.openbtn span:nth-of-type(2) {
	top:23px;
}

.openbtn span:nth-of-type(3) {
	top:31px;
}

.openbtn.active span:nth-of-type(1) {
    top: 18px;
    left: 18px;
    transform: translateY(6px) rotate(-45deg);
    width: 30%;
}

.openbtn.active span:nth-of-type(2) {
	opacity: 0;
}

.openbtn.active span:nth-of-type(3){
    top: 30px;
    left: 18px;
    transform: translateY(-6px) rotate(45deg);
    width: 30%;
}



header{
	width: 100%;
	background: #fff;
	padding: 20px 0;
	position: fixed;
	top: 0;
	left: 0;
	z-index:10;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
}

header .inner{
}

header .inner img{
	width:155px;
	text-align: left;
	display: block;
	padding-left: 20px;
}

#container{
	width: 100%;
	padding:88px 0px 0px;
}

.main .inner{
	width:900px;
	margin: 0 auto;
	padding:50px;
}

.main .inner{
	vertical-align:bottom;
	background: url(../img/main_img.jpg) ;
	background-size:cover;
}

.main p img{
	width: 100%;
}


footer{
	width: 100%;
	padding: 0;
	margin: 0;
	font-size: 14px;
	background: #ffff00;
}

footer .inner{
	width:1000px;
	padding:50px 0;
	margin: 0 auto;
	text-align:center;
}

footer .inner a{
	color: #000 !important;
	text-decoration: none;
}

footer .inner a:hover{
	text-decoration: underline;
}

.icon_insta img{width:60px;margin:0 auto 30px;}
.icon_insta a:hover img{opacity:60%; }

#container, #footer {
    position: relative;
    z-index: 3;
    background: #f8f9fa;
}

.clearfix::after {
   content: "";
   display: block;
   clear: both;
}


/***** ABOUT ACCESS MENU *****/
.main_about,.main_access,.main_menu{
	background: #ffff00;
}

.main_about .inner,.main_access .inner,.main_menu .inner{
	width:700px;
	margin: 0 auto;
	padding:50px;
	text-align: center;
}

.main_about .inner h2,.main_access .inner h2,.main_menu .inner h2{
	font-size: 32px;
	font-weight: bold;
	text-align: center;
	margin-bottom: 20px;
}


.main_about .inner img,.main_access .inner img{
	width:100%;
	display: block;
	margin: 0 auto 30px;
	border-radius:10px;
}

.main_about .inner p,.main_access .inner p{
	margin-bottom: 10px;
	text-align: left;
}

.main_about .inner p:last-child,.main_access .inner p:last-child{
	margin-bottom: 0px;
}

.main_access .inner h3{
	font-size: 26px;
	font-weight: bold;
	text-align: left;
	margin-bottom: 20px;
}

.accessmapbox{
	margin-top:40px;
}

.menubox{border:2px solid #000;padding: 20px 15px;margin-bottom: 20px;}
.menubox02{border:2px solid #000;padding: 20px 15px;margin-bottom: 30px;}
.menubox03{padding: 20px 15px;margin-bottom: 20px; background: #fff;}
.main_menu .inner p.menuch{margin-bottom:20px;font-size: 14px;}

.main_menu .inner p.stepimg01 img{
	width: 94%;
	margin: 0 auto 30px;
}

.main_menu .inner p.stepimg02 img{
	width: 60%;
	margin: 0 auto;
}


.main_menu .inner p.stepimg03 img{
	width: 90%;
	margin: 0 auto 10px;
}

.main_menu .inner p.stepimg04 img{
	width: 100px;
	margin: 0 auto 20px;
}


iframe {
  width: 100%;
  aspect-ratio: 16/9; //アスペクト比（縦横比）を指定
}


.map{
	width: 100%;
	padding: 0;
	margin: 0;
}

.map .inner{
	width:auto;
	margin: 0 auto;
	padding:0;
}

.gmap {
    position: relative;
    width: 100%;    /* 左右に余白が必要なら値を変更してもOK */
    height: 0;
  padding-top: 75%; /* 比率を4:3に固定 */
}

.gmap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;    /* 必要であれば!importantを付けてください */
    height: 100%;    /* 必要であれば!importantを付けてください */
}


.main_menu table th,.main_menu table td {
    border:none;
    padding: 10px;
}

.main_menu table th{
	text-align: left;
	font-weight: bold;
}

.main_menu table td {
	text-align: right;
}

.main_menu table {
    border-collapse:  collapse;
	width: 100%;
}


@media (max-width: 1010px) {
.main .inner,footer .inner,.main_about .inner,.main_access .inner,.main_menu .inner{ width:auto;}
}



@media (max-width: 600px) {
.main_about .inner{padding:30px 20px;}
.main_access .inner{padding:30px 20px;}
.main_menu .inner{padding:30px 15px;}
.menubox,.menubox02,.menubox03{padding: 20px 10px;}
.main_menu .inner p.menuch{font-size: 12px;}
}

@media (max-width: 480px) {
.main_menu table th,.main_menu table td {
	font-size: 14px;
    padding: 5px;
}
.main_menu .inner p.stepimg04 img{
	width: 90px;
}

}

@media (max-width: 360px) {
footer .inner{padding:50px 20px;}
.txt-copy{ font-size:12px;}
.main_about{font-size:14px;line-height: 1.6;}
.main_about .inner h2,.main_access .inner h2,.main_menu .inner h2{font-size: 28px;}

.main_menu .inner p.stepimg04 img{
	width: 80px;
}

}

@media (max-width: 320px) {
.main_menu table th,.main_menu table td {
	display: block;
	text-align: left;
}

.main_menu .inner p.stepimg04 img{
	width: 60px;
}
	
}


@media (max-width: 280px) {
#container{padding:70px 0px 0px;}
header .inner img { width: 100px;}
.openbtn {top: 10px;}
}