/*****全体ページ共通CSS*****
 * 全体ページ共通CSS
***************************/
/*----------全体----------
*１．不要項目の非表示
-------------------------*
//*ヘッダー*/
#header-container{
	display:none;
}
/*サイトタイトル*/
span.site-name-text{
	display:none;
}
/*メインコンテンツ背景*/
main.main{
	background-color:transparent;
	border:none;
}
.article-footer, .entry-footer{
	background-color:transparent;
}
div.author-info{
	display:none;
}
div.breadcrumb{
	display:none;
}
/***********************************/
/*----------全体----------
*１．全体の余白を調整
*２．高さを調整
-------------------------*/
*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body {
	min-height: 100vh;
}
/*----------ヘッダー----------
*１．ヘッダー開始位置の調整
*２．幅、高さを調整
*３．デザインを調整
-------------------------*/
/*div#appeal {
position:absolute;
z-index:100;
top:0;
left:0;
bottom:0;
width:100%;
height:4.375rem;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
}*/
div#appeal {
	/*categoryに影響
	position:relative;*/
	z-index:100;
	width:100%;
	height:4.375rem;
	box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
}
div#appeal-in {
	padding:0;
	min-height:0;
	width:100%;
	height:100%;
}
div.appeal-content {
	margin:0;
	padding:0;
	max-width:100%;
	width:100%;
	height:100%;
}
div.appeal-message {
	margin:0;
	height:100%;
}
div#appeal-header-container{
	height:100%;
}
div#appeal-header-container-in{
	margin:0;
	width:100%;
	height:100%;
}

/*-----ナビゲーションメニュー-----
*１．全体背景色、透過の調整
*２．不要エリアの非表示
*３．画面に応じたタブ並びの可変を固定化
*４．文字色の指定
-----ナビホバー時アニメーション-----
*１．ホバー時アニメーション擬似初期化
*２．ホバー時アニメーションの表示に関する設定
-------------------------*/
nav#navi{
	height:100%;
	background-color:rgba(255,255,255,0.1);
}
nav#navi > p{
	display:none;
}
div#navi-in{
	height:100%;
}
div.navi-in > ul{
	flex-wrap:nowrap;
}
div.navi-in a:hover{
	background-color:rgba(0,0,0,0.0);
	color:rgba(0,0,0,0.7);
}
div.navi-in a:before{
	background:rgba(0,0,0,0.6);
	content:"";
	width:40%;
	height:1px;
	position:absolute;
	left:0;
	right:0;
	bottom:0;
	margin:auto;
	transform-origin:center bottom;
	transform:scale(0,2);
	transition:transform .5s;
}
div.navi-in a:hover:before{
	transform-origin: center bottom;
	transform: scale(1,1);
}

/*-----メニューバー-----
*１．高さを調整
*２．ロゴを調整
*３．文字を調整
-------------------------*/
ul#menu-bar-pc{
	height:100%;
}
li.menu-item{
	margin:auto;
}
img.igalogo{
	max-width:10em;
}
div.item-label{
	font-weight:bold;
	font-size:1rem;
}

/*-----メニュー下-----
-------------------------*/
div#content-top{
	margin:0;
}
div#content-top-in{
	width:100%;
	margin:0;
}
div#custom_html-12{
	width:100%;
}

.second-header-contents{
	position:relative;
	height:35vh;
	overflow:hidden;
}

.list-back{
	margin:1.5vh;
	text-align:right;
}
.list-back > a{
	color:#000;
	text-decoration:none;
}
.list-back > a:hover{
	color:#999;
}

/*480px以下*/
@media screen and (max-width: 480px){
	div#appeal {
		position:fixed;
		width:100%;
		height:3.534rem;
	}
	ul#menu-bar-mobile{
		pointer-events: none;
		height:100%;
	}
	details#mobile-menu{
		width:100%;
	}
	summary {
		height:100%;
		display:flex;
	}
	div.logo-area{
		width:50%;
		height:100%;
	}
	img.igalogo{
		width:70%;
		transform: translate(-12.5%, 3.48%);
	}
	div.menu-area{
		width:50%;
		height:100%;
	}
	img.menupic{
		width:40%;
		transform: translate(80%, -12.5%);
		pointer-events: auto;
	}
	/* Chrome、Safari */
	summary::-webkit-details-marker {
		display: none;
	}

	/*メニューバー開いた後のサイズ*/
	h1[open] {
		/*min-height:25em;*/
	}

	details > li{
		pointer-events: auto;
		min-width:100%;
		min-height:100%;

		background-color:rgba(255,255,255,0.9);
		border-top:1px solid;
		border-top-color:rgba(0,0,0,0.22);
		box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
	}
	div.caption-wrap{
		background-color:rgba(255,255,255,0);
	}

	/* オープン時にアニメーションを設定 */
	img.menupic[open] .details-content {
		animation: menuopen 0.5s ease;
	}
	@keyframes menuopen {
		0% {
			opacity: 0; /* 透明 */
			transform: translateY(0px); /* 上から表示 */
		}
		50% {
			opacity: 0.5;
			transform: none;
		}
		100% {
			opacity: 1;
			transform: none;
		}
	}

	div.navi-in a:before{
		width:25%;
	}
}