@charset "utf-8";
/*ALL*/
html{
	width: 100%;
}

body{
	/*グリッドデザイン*/
	/*width: 100%;
	background-color: #ffffff;
	background-image: repeating-linear-gradient( 0deg, #ffffff00, #ffffff00 30px, #fffaea 30px, #fffaea 32px),
	repeating-linear-gradient( 90deg, #ffffff00, #ffffff00 30px, #fffaea 30px, #fffaea 32px);*/
	
	/*水玉デザイン*/
	width: 100%;
    background-color: #f0f0f0; /*#ffffff*/
    background-image: radial-gradient(#eaeaea 2px, transparent 3px);
    background-size: 20px 20px;
}
/*フッター下部固定用調整*/
body{
	display:flex;
	 flex-direction:column;
	min-height: 100vh;
}
#main_block{
		flex: 1;
}

.inner{
	width: 100%;
	max-width: 1200px;
	min-width: 320px;
	height: 100%;
	margin: 0 auto;
}

a{
	width: 100%;
	height: 100%;
}

/*---------------↓header関係↓--------------*/
header{
	display: block;
	height: 80px;
	background-color: #ff9000;
}

#header_inner{
	
	display: flex;
}

#logo_container{
	height: 100%;
	width: 30%;
	padding-left: max(min(100px, calc(5% - 20px)), 5px);
	display: flex;
	align-items: center;
}

#h_nav{
	display: flex;
	align-items: center;
	width: 70%;
}

#LOGO{
	height: 70px;
	position: relative;
	z-index: 101;
}

.menu{
	width: 100%;
	display: flex;
	margin-top: 3px;
	justify-content: right;
}

.h_top_li{
	color: #ffffff;
	white-space: nowrap;
	font-size: 1.0rem;
	/*font-family: 'Zen Maru Gothic', sans-serif;*/
	font-family: 'Noto Sans Japanese', sans-serif;
}

#contact_li{
	margin-left: 15px;
	margin-right: 15px;
}

#contact_box{
	margin-top: 9px;
}

#contact{
	background-color: #ffffff;
	border-radius: 20px;
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 3px;
	padding-bottom: 3px;
	color: #ff9000;
	white-space: nowrap;
	font-weight: bold;
	box-shadow: 0 3px 0 0 #ad7758;
	font-size: 1rem;
	/*font-family: 'Zen Maru Gothic', sans-serif;*/
	font-family: 'Noto Sans Japanese', sans-serif;
}

#contact:hover{
	color: #ff9100a8;
}


/*---------------プルダウン用-----------------*/
.menu {
	list-style-type:none;
}
.menu > li:not(:last-child) {
	display:inline-block;
	position:relative;
}
.menu > li > ul {
	display:none;
}

.menu p{
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	padding-right: 10px;
	text-align: center;
}
.h_top_li:nth-child(3){
	margin-right: 13px;
}

.h_top_li:nth-child(2){
	margin-right: -5px;
}
.h_top_li:nth-child(1){
	margin-right: -25px;
}

.h_top_li:nth-child( -n + 2 ) p{
	padding-left: 30px;
	padding-right: 30px;
}

.h_top_li:hover ul {
	display:block;
	position:absolute; 
	padding-top: 21px; /*30px*/
	z-index: 49;
	top: 2.3em;
	list-style-type:none;
	background-color: #ff9000;
}

.child_li a{
	display: block;
}

.child_li:hover{
	background-color: #ffbb00;
}

.htop_p::after {
	background-color: #ff9000; /* 線の色 */
	border-radius: 5px; /* 線の両端を丸く */
	bottom: 0px; /* 線の位置 */
	content: "";
	height: 3px; /* 線の高さ */
	left: 50%; /* 線の中央寄せ */
	position: absolute;
	transform: translateX(-50%); /* 線の中央寄せ */
	width: 30px; /* 線の長さ */
}

.htop_p:hover::after {
	background-color: #ffffff; /* 線の色 */
	border-radius: 5px; /* 線の両端を丸く */
	bottom: 0px; /* 線の位置 */
	content: "";
	height: 3px; /* 線の高さ */
	left: 50%; /* 線の中央寄せ */
	position: absolute;
	z-index: 50;
	transform: translateX(-50%); /* 線の中央寄せ */
	width: 30px; /* 線の長さ */
}

/*------------共通メニュー設定項-----------*/
@media screen and (max-width: 830px) {
	#h_nav{
		display: none;
	}
}

@media screen and (min-width: 831px) {
	#hamburger_box{
		display: none;
	}
}

/*---------------ハンバーガーメニュー-----------------*/
#hamburger_box{
	justify-content: right;
	margin-left: calc( calc( 100% - 80px ) - 30%);
}

/* チェックボックスを非表示にする */
.drawer_hidden {
	display: none;
}
  
  /* ハンバーガーアイコンの設置スペース */
.drawer_open {
	display: flex;
	height: 80px;
	width: 80px; 
	justify-content: center;
	align-items: center;
	position: relative;
	z-index: 100;/* 重なり順を一番上にする */
	cursor: pointer;
}
  
  /* ハンバーガーメニューのアイコン */
.drawer_open span,
.drawer_open span:before,
.drawer_open span:after {
	content: '';
	display: block;
	height: 4px; /*6px*/
	width: 30px; /*50px*/
	border-radius: 3px;
	background: #ffffff;
	transition: 0.5s;
	position: absolute;
}
  
  /* 三本線の一番上の棒の位置調整 */
.drawer_open span:before {
	bottom: 15px;
}
  
  /* 三本線の一番下の棒の位置調整 */
.drawer_open span:after {
	top: 15px;
}
  
  /* アイコンがクリックされたら真ん中の線を透明にする */
#hamburger_checkbox:checked ~ .drawer_open span {
	background: rgba(255, 255, 255, 0);
}

  /* アイコンがクリックされたらアイコンが×印になるように上下の線を回転 */
#hamburger_checkbox:checked ~ .drawer_open span::before {
	bottom: 0;
	transform: rotate(45deg);
}
  
#hamburger_checkbox:checked ~ .drawer_open span::after {
	top: 0;
	transform: rotate(-45deg);
}

  /* メニューのデザイン*/
.nav_content {
	width: 100%;
	min-width: 320px;
	height: 100%;
	position: fixed;
	top: calc(-100% - 800px);
	left: 0; /* メニューを画面の外に飛ばす */
	z-index: 99;
	background: #fff;
	transition: .5s;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
}
@media screen and (max-width: 830px) {
	.fixed {
		width: 100%;
		height: 100%;
		position: fixed;
	}
}

@media screen and (min-width: 831px) {
	.fixed {
		width: 100%;
	}
}


  
/* アイコンがクリックされたらメニューを表示 */
#hamburger_checkbox:checked ~ .nav_content {
	top: 0;/* メニューを画面に入れる */
}

/*ハンバーガーメニュー用アコーディオンメニュー*/
.nav_content{
	background-color: #ff9100e7;
}
.aco_sum{
	padding-top: 15px;
	padding-bottom: 15px;
	margin-left: 30px;
	margin-right: 30px;
	font-size: 1.3rem; /*2.0rem*/
	user-select: none;
	cursor: pointer;
	list-style: none;
	display: flex;
	white-space: nowrap;
}
.aco_sum p{
	height: 100%;
	/*font-family: 'Zen Maru Gothic', sans-serif;*/
	font-family: 'Noto Sans Japanese', sans-serif;
}
.aco_sum:hover{
	background-color: #ffffff36;
}
details{
	list-style: none;
}
summary {
	list-style: none;
}
summary::-webkit-details-marker {/*これでsafari版のリストスタイル消えてくれるか？*/
	display: none;
}

.nav_content summary::after{
	margin: 0 auto;
	content: url(../img/plus2.png);
	width: 30px;
	height: 30px;
	margin-left: max(5px, calc(100vw - 230px));
	display: inline-block;
}
.nav_content details[open] summary::after{
	content: url(../img/minus2.png);
	margin-left: max(5px, calc(100vw - 230px));
}

.aco_li{
	font-size: 1.1rem; /*1.5rem*/
	color: #ffffff;
	padding-top:5px;
	padding-bottom:5px;
	padding-left: 40px;
	user-select: none;
	white-space: nowrap;
	/*font-family: 'Zen Maru Gothic', sans-serif;*/
	font-family: 'Noto Sans Japanese', sans-serif;
}
.aco_li:hover{
	background-color: #ffbb00; /*ffffff36*/
}

#det_1{
	margin-top: 100px;
}

.aco_sum{
	border-top: 2px solid #ffffff;
	color: #ffffff;
	/*font-family: 'Zen Maru Gothic', sans-serif;*/
	font-family: 'Noto Sans Japanese', sans-serif;
}

#last_sum{
	border-bottom: 2px solid #ffffff;
	margin-bottom: 30px;
	font-size: 1.3rem; /*2.0rem*/
}

#det_1,
#det_2{
	height: 60px; /*70px*/
	transition: .6s;
}
#det_1[open] {
	height: 220px;
}
#det_2[open]{
	height: 145px;
}
details{
	overflow: hidden;
}

@keyframes fadeIn {
	0% {
	  opacity: 0;
	  transform: translateY(-10px);
	}
	100% {
	  opacity: 1;
	  transform: none;
	 }
}


/*-------------↓メイン関係↓-------------------*/
#main_block{
	padding-top: 50px;
	display: block;
}

/*---マップ---*/
@media screen and (max-width: 499px) {
	#gmap_box{
		width: 100%;
		margin: 0 auto;
	}
}
@media screen and (min-width: 500px) {
	#gmap_box{
		width: 90%;
		margin: 0 auto;
	}
}

#gmap_title{
	display: flex;
	position: relative;
}

#gmap_title::after{
	width: 70%;
	content: '';
	border-top: 2px dotted #000;
	top: 35px;
	position: absolute;
}

#gmap_tit_mark{
	margin-top: 5px;
	width:	25px;
	height:	25px;
	border-radius: 50%;
	background-color: #ff9000;
}

#gmap_title{
	font-size: 1.8rem;
	font-weight: bold;
	margin-left: 5%;
}

#gmap_title p{
	margin-left: 20px;
	/*font-family: 'Marcellus SC', serif;*/
	font-family: 'Noto Sans Japanese', sans-serif;
}
@media screen and (max-width: 499px) {
	#gmap_contents{
		width:96%;
		/* margin-left: 10%;
		margin-right: 10%; */
		margin: 0 auto;
		margin-top: 3%;
		margin-bottom: 80px;
		border: 1px solid #868686;
		border-radius: 10px; /*20px*/
		background-color: #ffffff;
		padding-left: 4%;
		padding-right: 4%;
		padding-top: 20px;
		padding-bottom: 20px;
	}
}
@media screen and (min-width: 500px) {
	#gmap_contents{
		width:80%;
		/* margin-left: 10%;
		margin-right: 10%; */
		margin: 0 auto;
		margin-top: 3%;
		border: 1px solid #868686;
		border-radius: 10px; /*20px*/
		background-color: #ffffff;
		padding-left: 2%;
		padding-right: 2%;
		padding-top: 20px;
		padding-bottom: 20px;
	}
}

#gmap_contents iframe{
	width: 100%;
	height: 400px;
}
/*==location==*/

@media screen and (max-width: 499px) {
	#location_box{
		width: 100%;
		margin: 0 auto;
	}
}
@media screen and (min-width: 500px) {
	#location_box{
		width: 90%;
		margin: 0 auto;
	}
}

@media screen and (max-width: 499px) {
	#location_contents{
		width:96%;
		margin: 0 auto;
		margin-bottom: 80px;
		border: 1px solid #868686;
		border-radius: 10px; /*20px*/
		background-color: #ffffff;
		padding-left: 4%;
		padding-right: 4%;
		padding-top: 20px;
		padding-bottom: 20px;
	}
}
@media screen and (min-width: 500px) {
	#location_contents{
		width:80%;
		/* margin-left: 10%;
		margin-right: 10%; */
		margin: 0 auto;
		margin-top: 3%;
		margin-bottom: 80px;
		border: 1px solid #868686;
		border-radius: 10px; /*20px*/
		background-color: #ffffff;
		padding-left: 2%;
		padding-right: 2%;
		padding-top: 20px;
		padding-bottom: 20px;
	}
}

#txt_box{
	display: flex;
	margin: 0 auto;
	/*font-family: 'M PLUS Rounded 1c', sans-serif;*/
	font-family: 'Noto Sans Japanese', sans-serif;
}

#address_txt{
	width: 50%;
	/*padding-left: 2%;
	padding-right: 2%;*/
	padding: 1%;
	text-align: right;
	display: flex;
	align-items: center;
	/*住所と最寄り駅を分ける　縦ライン線*/
	border-right: 2px solid #000;
	justify-content: flex-end; /* 右寄せテキスト維持 */
}

#route_time_txt{
	width: 50%;
	padding-left: 2%;
	padding-right: 2%;
}

.buttons{
	width: 50%;
	padding-left: 2%;
	padding-right: 2%;
}

button{
	width: 100%;
	padding: 1%;
	text-decoration:underline;
	/*cursor: pointer;*/
}

.buttons p{
	color:#ff0055;
}

/*==route==*/
#infoText
{
	width: 90%; /*100%でもいいかも*/
	text-align: center;
	padding-left: 10%;
	font-size: 1.4rem;
}

@media screen and (max-width: 499px) {
	#route_box{
		width: 100%;
		margin: 0 auto;
	}
	
	#infoText
	{
		width: 90%; /*100%でもいいかも*/
		text-align: center;
		padding-bottom: 20px;
		font-size: 1.0rem;
	}
}
@media screen and (min-width: 500px) {
	#route_box{
		width: 90%;
		margin: 0 auto;
	}
}

@media screen and (max-width: 499px) {
	#route_contents
	{
		width:96%;
		margin: 0 auto;
		margin-bottom: 80px;
		border: 1px solid #868686;
		border-radius: 10px; /*20px*/
		background-color: #ffffff;
		padding-left: 4%;
		padding-right: 4%;
		padding-top: 20px;
		padding-bottom: 20px;
	}
}
@media screen and (min-width: 500px) {
	#route_contents
	{
		width:80%;
		/* margin-left: 10%;
		margin-right: 10%; */
		margin: 0 auto;
		margin-top: 3%;
		margin-bottom: 80px;
		border: 1px solid #868686;
		border-radius: 10px; /*20px*/
		background-color: #ffffff;
		padding-left: 2%;
		padding-right: 2%;
		padding-top: 20px;
		padding-bottom: 20px;
	}
}

#videoFrame{
	width: 100%;
	height: auto;
	aspect-ratio: 16/9;
	max-width: 750px;
	display: block;
	margin: auto;
	align-self: center;
}

/*======フッター関係======*/
footer{
	height: 150px;
	display: block;
	background-color: #ff9000;
}


#footer_inner{
	padding-top: 20px;
	padding-bottom: 20px;
}

#footer_contents{
	margin: 0 auto;
}

#footer_contents #company_name{
	margin: 5px;
	font-size: 1.5rem;
	font-weight: bold;
	white-space: nowrap;
}

#footer_contents p{
	/*font-family: 'Zen Maru Gothic', sans-serif;*/
	font-family: 'Noto Sans Japanese', sans-serif;
	text-align: center;
	color: #ffffff;
}

/*---------------↓デバック用↓-----------------*/
/*全体ゾーン確認用枠
*:not(html){
outline: 2px solid red ;outline-offset: -2px;
}
/**/

/*個別ゾーン確認用枠
.overview_li{
outline: 5px solid #000000; ;outline-offset: -2px;;
}
/**/

/*個別ゾーン確認用カラー
.inner{
background: #000000;
}
*/