/*=================================================================================
===================================================================================
		  ●style.css  全共通
===================================================================================
=================================================================================*/

* {
	margin: 0;
	padding: 0;
}

html{
	scroll-behavior: smooth; /* スムーススクロール */
}

body {
	margin: 0;
	padding: 0;
	font-size: 10.5pt;
	line-height:180%;
	letter-spacing:0.05em;
	font-family: 'Lato', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
	background: #fff;
	-webkit-text-size-adjust: 100%;
}

/* ====================レイアウト==================== */
		   /* PC スマホ　それぞれの項目で設定 */

/* ====================h1・ヘッダー==================== */

/* .h1_visual */
.h1_visual {
	border-bottom: 1px solid #000;
	width: 100%;
	padding: 5px 0 5px 0;
}
.h1_visual h1 {
	font-size: 180%;
	letter-spacing: 0.2em;
	color: #333;
	padding: 10px 30px 10px 10px;
	text-align: center;
}
.h1_visual h1 a{
	color: #333;
	text-decoration: none;
}


/* ====================見出し==================== */

.maincontent h2{
	font-size: 1.4em;
	color: #531685;/*文字色*/
	margin-top: 20px;
	padding: 0.5em 0 0.5em 0.5em;/*上下の余白*/
	border-top: solid 3px #531685;/*上線*/
	border-bottom: solid 3px #531685;/*下線*/
  
}

.maincontent h3 {
	font-size: 1.3em;
	padding: 0.4em;/*文字周りの余白*/
	margin: 2em 1em 1em 0.5em;
	color: #494949;/*文字色*/
	background: #fff;/*背景色*/
	border-left: solid 5px #a74163;/*左線（実線 太さ 色）*/  
	border-bottom: solid 1px #214dac;/*下線（実線 太さ 色）*/  
}

.maincontent h4{
	font-size: 1.2em;
	padding: 0.6em;/*文字周りの余白*/
	margin: 3em 1em 1em 0.5em;
	color: #494949;/*文字色*/
	background: #f5f5f5;/*背景色*/
	border-left: solid 7px #333333;/*左線（実線 太さ 色）*/  
}

/* ====================メイン==================== */

.maincontent p{
	padding: 0.5em 0 0.5em 2em;
}

.h4content{
	margin: 1em 1em 1em 1em;
}

.maincontent a:link{
	color:#0088bb;
	font-weight: bold;
	text-decoration:underline;
}
.maincontent a:visited{
	color:#0088bb;
}
.maincontent a:hover{
	color:#00aadd;
	text-decoration:none;
}

/* 小さい説明文 */
.middle_expl{
	font-size: 80%;
	padding: 2px 10px 2px 10px;
}

/* ページ下部の空きを作る */
.mainshitaspace{
	padding-bottom:300px
}

/* ページTOPへ戻るボタン*/
.pagetop {
	height: 45px;
	width: 45px;
	position: fixed;
	right: 10px;
	top: 60%;
	color: #fff;
	text-align: center;
	text-decoration: none;
	line-height: 15px;
	background: #000;
	border-radius: 10px;
	opacity: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 2;
}
.pagetop:hover{
	opacity: 35%;
}

/* 見出し開閉ボタン*/
.m_openclose {
	height: 45px;
	width: 45px;
	position: fixed;
	right: 10px;
	top: 70%;
	color: #fff;
	text-align: center;
	text-decoration: none;
	line-height: 15px;
	background: #000;
	border-radius: 10px;
	opacity: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 2;
}
.m_openclosep:hover{
	opacity: 35%;
}


/* ====================メニュー用リンク==================== */

.coxd_list{
	margin: 0.5em 2.5em; /* 外側余白 */
	padding: 0.3em 1em; /* 内側余白 */
	border: 2px solid #eee; /* ベース枠線 */
	position: relative; /* 配置の基準 */
	z-index: 0; /* 重なり順 */
	max-width: 800px; /* 最大幅 */
}

.coxd_list::before {
	border-top: 3px solid #999; /* 上辺アクセント */
	border-left: 3px solid #999; /* 左辺アクセント */
	content: ''; /* 擬似要素 */
	display: block; /* ブロック表示 */
	position: absolute; /* 位置指定 */
	top: -3px; /* 上にずらす */
	left: -3px; /* 左にずらす */
	width: 20px; /* 幅 */
	height: 20px; /* 高さ */
	z-index: 1; /* 前面表示 */
}

.coxd_list:hover{
	background-color: #f8efff ;
}

/* ====================セリフ表示==================== */

.main_midashi{/* メインの開閉見出しに色をつける */
	background-color:#e8ffc9;
}

.town{ /* 本筋の街移動 */
	border:3px double #000;
	color:#ffffff;
	background-color:#000;
	text-align:center;
	letter-spacing:4px;
	font-size:115%;
	font-weight:bold;
	margin:35px 0 10px 0;
	padding: 5px;
	/* widthを指定すると右にはみ出す */
}

.stown{ /* 本筋以外の街移動 */
	border:3px double #555;
	background-color:#eee;
	text-align:center;
	letter-spacing:4px;
	font-weight:bold;
	margin:16px 0 8px 0;
	padding: 5px;
	/* widthを指定すると右にはみ出す */
}

.shise{ /* 街の施設 */
	border:1px dotted #777;
	margin:8px 0;
	padding:2px 5px;
	/* widthを指定すると右にはみ出す */
}

.text{ /* セリフの体裁 */
	color:#444444;
	padding: 0;
	margin:3px 10px 3px 10px;
	/* widthを指定すると右にはみ出す */
}

.hon_story{ /* 本筋周辺のセリフ */
	background-color:#e8ffc9;
	padding:18px 8px;
	margin:0px;
	/* widthを指定すると右にはみ出す */
}

.sub_story{ /* 本筋以外のセリフ */
	padding:18px 8px;
	margin:0px;
	/* widthを指定すると右にはみ出す */
}

/* ====================アコーディオン==================== */

details{
	margin: 0;
	padding: 0;
}

summary{
	cursor: pointer;
	border: 1px solid #999;
	margin: 5px 10px;
	padding: 3px 10px;
	/* widthを指定すると右にはみ出す */
}
summary:hover{
	background-color: #ffefeb;
}

.subtitletop{
	text-align: right;
	font-size: 120%;
	margin: 10px;
}

/* ====================メニュー==================== */

iframe {
width: 100%;
height:90vh;
border: none;
}

#main {
	background: #fff;
}
#main p {
	margin-bottom: 1em;
	line-height: 1.9;
}
#main .inner {
	padding: 60px;
}

.mini_expl{
	font-size: 70%;
	letter-spacing:0;
}

.menuspace{
	padding-bottom:200px
}

/* ====================Drawer.jsスクロール修正==================== */

.drawer--top.drawer-open .drawer-nav {
	top: 0;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}

.drawer--left.drawer-open .drawer-nav,
.drawer--left .drawer-hamburger,
.drawer--left.drawer-open .drawer-navbar .drawer-hamburger {
	left: 0;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}

.drawer--right.drawer-open .drawer-nav,
.drawer--right .drawer-hamburger,
.drawer--right.drawer-open .drawer-navbar .drawer-hamburger {
	right: 0;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}


/*=================================================================================
===================================================================================
		  ●pc.css  画面の横幅が767pxから（Bootstrap準拠）
===================================================================================
=================================================================================*/
@media screen and (min-width:767px){

/* ====================レイアウト==================== */
.allbox_top{
	width:850px;
	margin: 0 auto; /*本体の位置・外余白*/
	padding: 5px; /*本体の位置・内余白*/
}
.maincontent_top{
	margin: 0;
	padding: 0;
}

.maincontent{
	margin: 0 20px;
	padding: 0;
}

}/* @media終了 */

/*=================================================================================
===================================================================================
		  ●smart.css  画面の横幅が767pxまで（Bootstrap準拠）
===================================================================================
=================================================================================*/
@media screen and (max-width:767px){


body,p,table,tr,td,th,div{
	font-size:10pt;
	letter-spacing:0;
}


/* ====================レイアウト==================== */
.allbox_top{
	margin: 0;
	padding: 2px; /*本体の位置*/
}
.maincontent_top{
	margin: 0;
	padding: 0;
}

.maincontent{
	margin: 0 2px;
	padding: 0;
}
/* ====================サイトタイトル・見出し==================== */

h1{
	font-size:85%;
}


}/* @media終了 */










/*

・drawer.js元サイト
https://git.blivesta.com/drawer/

・drawer.js解説サイト
https://misallychan.hateblo.jp/entry/2017/07/27/070000

・drawer.jsスクロール修正
https://highneeds.jp/jquery/464/

・リンククリックで閉じる解説
https://asairo.com/drawer-jsでページ内リンク時をクリック時にメニューを/



*/