@charset "UTF-8";

/**
 * プロトタイプ
----------------------------------------------------------------*/
/* 初期設定 */
body{
	font-family: "Hiragino Kaku Gothic ProN", Meiryo, Helvetica, sans-serif;
	font-size:14px;
	line-height:1.6;
	color:rgb(35,24,21);
}
a{
	color:rgb(240,90,35);
	transition:color .2s;
}
a.hover{ color:rgb(227,137,132); }
p{ text-align:justify; }
img{ max-width:100%; }
.spacer{ margin-bottom:40px; }
.c{ text-align:center; }
.r{ text-align:right; }
.l{ text-align:left; }
.bmargin{ padding-bottom:80px !important; }
.bmargin10{ padding-bottom:10px !important; }
.caution{ color:rgb(200,20,10); }
.hr{
	border-bottom:1px solid black;
	max-width:60px;
}
.yt{
	position:relative;
	width:100%;
	height:0;
	padding-bottom:56.25%;
	overflow:hidden;
	margin-bottom:50px;
}
.yt > iframe{
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
}
.fb{
	max-width:100%;
	text-align:center;
}
.gm > iframe{
	display:block;
	height:512px;
}

/* スマホ分岐 */
.sp{ display:none; }
@media screen and (max-width: 768px){
	.pc{ display:none; }
	.sp{ display:block; }
}

/* レイアウト */
.base{
	max-width:1024px;
	margin:0 auto;
}
.narrow{
	max-width:768px;
	margin:0 auto;
}
.wide{
	max-width:1536px;
	margin:0 auto;
}
@media screen and (max-width: 768px){
	.base,
	.wide{ max-width:none; }
	.smart{ max-width:540px; }
}

/* 余白 */
.bmargin{ padding-bottom:80px; }
.tmargin{ padding-top:80px; }

/**
 * ヘッダー
----------------------------------------------------------------*/
/* ヘッドカード */
#hcard{ background:url("https://168168168.jp/wp-content/themes/iroha/image/interface/bg/header.png") scroll no-repeat center bottom / cover; }
#hcard > div{ display:flex; }

/* ロゴ */
#logo{ height:100%; }
#logo > a{
	display:block;
	transition:opacity .2s;
	height:100%;
}
#logo > a.hover{ opacity:.6; }
#logo > a > img{
	display:block;
	max-width:none;
	max-height:100%;
}

/* LINE・電話 */
#contact{
	text-align:right;
	padding:14px 20px;
}
#reservation{
	background:rgb(21,175,167);
	display:inline-block;
	border-radius:6px;
	transition:background .2s;
}
#reservation.hover{ background:rgb(-96,135,123); }
#line{
	background:rgb(130,200,50);
	display:inline-block;
	border-radius:6px;
	transition:background .2s;
}
#line.hover{ background:rgb(67,172,-53); }
#tel{
	display:inline-block;
	transition:opacity .2s;
}
#tel.hover{ opacity:.6; }

@media screen and (max-width: 768px){

	/* ヘッドカード */
	#hcard{
		background-image:url("https://168168168.jp/wp-content/themes/iroha/image/interface/bg/header_sp.png");
		background-position:center center;
		border-bottom:20px solid rgb(240,90,35);
	}
	#hcard > div{
		display:block;
		height:167px;
	}
	
	/* ロゴ */
	#logo > a > img{ margin:0 auto; }
	
	/* LINE・電話 */
	#contact{
		position:fixed;
		bottom:0;
		left:0;
		right:0;
		display:flex;
		padding:0;
		text-align:left;
		z-index:1000;
	}
	#line{
		width:50%;
		border-radius:0;
	}
	#reservation{
		display:none;
		width:50%;
		background:rgb(21,175,167);
		transition:background .2s;
		border-radius:0;
	}
	#reservation.hover{
		background:rgb(-96,135,123);
		opacity:1;
	}
	#tel{
		width:25%;
		background:rgb(21,175,167);
		transition:background .2s;
	}
	#tel.hover{
		background:rgb(-96,135,123);
		opacity:1;
	}
	#instagram{
		width:25%;
		background:rgb(35,24,21);
		transition:background .2s;
	}
	#instagram.hover{
		background:rgb(-75,-92,-96);
		opacity:1;
	}
}
@media screen and (max-width: 640px){
	#hcard > div{ height:84px; }
}

/**
 * グローバルナビゲーション
----------------------------------------------------------------*/
@media screen and (min-width: 768px){
	#gnav{ background:rgb(240,90,35); }
	#gnav > ul{
		display:flex;
		justify-content:center;
	}
	#gnav > ul > li{
		background:white;
		position:relative;
	}
	#gnav > ul > li:not(:last-child)::before{
		content:'';
		display:block;
		position:absolute;
		background:rgb(240,90,35);
		width:1px;
		top:5px;
		bottom:5px;
		right:0;
	}
	#gnav > ul > li > a{
		display:block;
		padding:5px 0;
		transition:background .2s;
	}
	#gnav > ul > li > a.hover{ background:rgb(254,246,244); }
	#gnav > ul > li > a::before,
	#gnav > ul > li > a::after{
		content:'';
		display:block;
		position:absolute;
		background:rgb(240,90,35);
		height:5px;
		left:3px;
		right:3px;
		transition:height .2s;
	}
	#gnav > ul > li > a.hover::before,
	#gnav > ul > li > a.hover::after{ height:3px; }
	#gnav > ul > li > a::before{ top:0; }
	#gnav > ul > li > a::after{ bottom:0; }
}
@media screen and (max-width: 768px){
	#gnav{ padding-top:100px; }
	#gnav > ul > li > a{
		display:block;
		font-weight:bold;
		font-size:180%;
		color:white;
		text-align:center;
		padding:10px 20px;
		transition:background .2s, color .2s;
	}
	#gnav > ul > li > a.hover{
		background:white;
		color:rgb(240,90,35);
	}
}

/**
 * メニュー
----------------------------------------------------------------*/
#menu,
#close{
	position:fixed;
	display:block;
	background:none;
	border:none;
	top:0;
	right:0;
	width:100px;
	height:100px;
	transition:background .2s;
	display:none;
	z-index:2000;
}
#menu{ background:white; }
#menu > img:last-child{ display:none; }
#menu.hover{ background:rgb(240,90,35); }
#menu.hover > img:first-child{ display:none; }
#menu.hover > img:last-child{ display:block; }
#close.hover{ background:rgb(243,123,79); }
@media screen and (max-width: 768px){
	#menu{ display:block; }
	#sparea{
		position:fixed;
		top:-100%;
		bottom:100%;
		left:0;
		right:0;
		z-index:10000;
		overflow-y:scroll;
		-webkit-overflow-scrolling:touch;
		opacity:1;
		transition:top .2s, bottom .2s;
		background:rgba(240,90,35,0.9);
	}
	body.clicked #sparea{
		top:0;
		bottom:0;
	}
	body.clicked #close{ display:block; }
}
@media screen and (max-width: 640px){
	#menu,
	#close{
		width:50px;
		height:50px;
	}
}

/**
 * 画面固定ナビゲーション
----------------------------------------------------------------*/
@media screen and (min-width: 768px){
	#fnav{
		position:fixed;
		right:0;
		top:300px;
		z-index:1000;
		transition:top .2s;
	}
	body.scrolldown #fnav{ top:20px; }
	#fnav > ul > li > a{
		display:block;
		background:red;
		border-radius:10px 0 0 10px;
		margin:10px 0;
	}
	#fnav > ul > li > a.hover{ transition:background .2s; }
	#fnav > ul > li[name="fee"] > a{ background:rgb(240,90,35); }
	#fnav > ul > li[name="blog"] > a{ background:rgb(200,20,10); }
	#fnav > ul > li[name="reservation"] > a{ background:rgb(21,175,167); }
	#fnav > ul > li[name="line"] > a{ background:rgb(21,175,167); }
	#fnav > ul > li[name="fee"] > a.hover{ background:rgb(243,123,79); }
	#fnav > ul > li[name="blog"] > a.hover{ background:rgb(211,67,59); }
	#fnav > ul > li[name="reservation"] > a.hover{ background:rgb(155,211,91); }
	#fnav > ul > li[name="line"] > a.hover{ background:rgb(155,211,91); }
}
@media screen and (max-width: 1024px){
	#fnav > ul > li > a{ max-width:100px; }
}
@media screen and (max-width: 768px){
	#fnav > ul{
		display:flex;
		justify-content:center;
		padding:40px 10px 100px;
	}
	#fnav > ul > li > a{
		display:block;
		padding:10px;
		transition:opacity .2s;
		max-width:none;
	}
	#fnav > ul > li > a.hover{ opacity:.7; }
}

/**
 * フッター
----------------------------------------------------------------*/
body > footer{
	color:white;
	background:rgb(240,90,35);
	padding-top:10px;
}
@media screen and (max-width: 640px){
	body > footer{ padding-top:0; }
}

/* フッターラベル */
#flabels{
	text-align:center;
	padding:40px 20px;
}
#flabels > img{
	background:white;
	border-radius:4px;
	display:inline-block;
	margin:10px 2px;
	max-width:none;
	max-height:34px;
}

/* フッターカード */
#fcard > div{ display:flex; }
#fcard > div > *{
	width:50%;
	padding:20px;
	box-sizing:border-box;
}
#comcard{ text-align:right; }
#comcard > .tel{
	display:inline-block;
	margin-bottom:10px;
	transition:opacity .2s;
}
#comcard > .tel.hover{ opacity:.7; }
@media screen and (max-width: 768px){
	#fcard > div{ display:block; }
	#fcard > div > *{ width:100%; }
	#fcard,
	#comcard{ text-align:center; }
}

/* 著作権表記 */
#cr{ text-align:center; }
@media screen and (max-width: 768px){
	#cr{ padding-bottom:120px; }
}

/**
 * フッターナビゲーション
----------------------------------------------------------------*/
#ftnav{
	color:rgb(35,24,21);
	background:rgb(250,245,225);
}
#ftnav > div{
	display:flex;
	padding:40px 20px;
	box-sizing:border-box;
	max-width:760px;
}
#ftnav > div > section{ width:33.3333%; }
#ftnav > div > section > h3:not(:first-of-type){ margin-top:16px; }
#ftnav > div > section > h3{
	font-size:120%;
	font-weight:bold;
}
#ftnav > div > section a{
	color:rgb(35,24,21);
	transition:color .2s;
}
#ftnav > div > section a.hover{ color:rgb(240,90,35); }
@media screen and (max-width: 640px){
	#ftnav > div{
		display:block;
		padding:0;
		max-width:none;
	}
	#ftnav > div > section{ width:auto; }
	#ftnav > div > section > h3 > *{
		padding:4px 10px;
		background:rgb(240,90,35);
		color:white;
		display:block;
		transition:background .2s;
	}
	#ftnav > div > section > h3 > a.hover{
		color:white;
		background:rgb(130,200,50);
	}
	#ftnav > div > section > h3:not(:first-of-type){ margin:0; }
	#ftnav > div > section > ul{
		display:flex;
		flex-wrap:wrap;
	}
	#ftnav > div > section > ul > li{ width:50%; }
	#ftnav > div > section > ul > li > a{
		border-bottom:1px solid rgb(240,90,35);
		display:block;
		padding:10px;
		transition:background .2s;
	}
	#ftnav > div > section > ul > li > a.hover{
		background:rgb(245,235,195);
		color:rgb(35,24,21);
	}
	#ftnav > div > section > ul > li:nth-child(odd) > a{ border-right:1px solid rgb(240,90,35); }
}

/**
 * コンテンツ
----------------------------------------------------------------*/
/* カテゴリビジュアル */
#cvis{
	background:url("https://168168168.jp/wp-content/themes/iroha/image/interface/bg/cvis.png") scroll no-repeat center center / cover;
	box-sizing:border-box;
	padding:60px 20px;
}
#cvis > *{
	font-size:300%;
	text-align:center;
	padding:0 20px;
	letter-spacing:.1em;
	font-weight:bold;
	text-shadow:
		+2px +2px 0 white,
		-2px -2px 0 white,
		-2px +2px 0 white,
		+2px -2px 0 white,
		+0px +2px 0 white,
		+0px -2px 0 white,
		-2px +0px 0 white,
		+2px +0px 0 white;
}
@media screen and (max-width: 768px){
	#cvis{
		background-image:url("https://168168168.jp/wp-content/themes/iroha/image/interface/bg/cvis_sp.png");
		padding:20px;
	}
	#cvis > *{ font-size:150%; }
}

/* パン屑リスト */
#pan{ padding:20px; }
#pan > ol > li,
#pan > ol > li > a{ display:inline; }
#pan > ol > li > a{ color:rgb(35,24,21); }
#pan > ol > li > a.hover{ color:rgb(240,90,35); }
#pan > ol > li:not(:first-child)::before{ content:'>'; }
@media screen and (max-width: 768px){
	#pan{ padding:10px; }
	#pan > ol{ margin:0; }
}

/* コンテンツフッター */
#cont > footer{ padding-top:80px; }
@media screen and (max-width: 768px){
	#cont > footer{ padding-top:20px; }
}

/* 投稿タイトル */
#posttitle{
	font-size:240%;
	font-weight:bold;
	padding:10px 20px;
	border-bottom:2px solid rgb(35,24,21);
	text-align:justify;
	box-sizing:border-box;
}
@media screen and (max-width: 768px){
	#posttitle{ font-size:180%; }
}

/* 投稿更新日 */
#postdate{
	color:rgb(145,139,138);
	padding:20px;
	margin-bottom:40px;
	display:block;
}