@charset "utf-8";
/* Scss Document */
/* 横幅415px以上の場合(PC・タブレット向け) */
@media only screen and (min-width: 415px){
	*{
		/* 文字関連 */
		font-style: normal;
		font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
		font-size: 16px;
		line-height: 26px;
		font-weight: normal;
		vertical-align: baseline;
		text-decoration: none;
		text-align: left;
		text-transform: capitalize;
		letter-spacing: normal;
		word-spacing: normal;
		color: #000000;
		/* 余白 */
		margin: 0;
		padding: 0;
		/* 背景 */
		background: none;
		/* その他 */
		list-style: none;
		border: none;
		box-sizing: content-box;
	}
	img{
		vertical-align: bottom;
	}
	p{
		margin-bottom: 0.7em;
	}
	.fbb{
		font-size: 110%;
		line-height: 110%;
		font-weight: bold;
	}
	.page{
		width: 468px;
		text-align: center;
		margin-top: 10px;
		margin-bottom: 10px;
	}
	header{
		width: 100%;
	}
	header img{
		display: block;
		margin: 0 auto 0 auto;
	}
	header div#header{
		overflow: hidden;
		width: 100%;
		background-color: #000000;
		margin-bottom: 52px;
	}
	div#header div{
		width: 960px;
		margin: 0 auto 0 auto;
	}
	header h1 a{
		color: #FFFFFF;
		font-size: 42px;
		font-weight: bold;
		line-height: 64px;
		vertical-align: middle;
		float: left;
		margin-left: 40px;
	}
	header h1 span.title{
		color: #FFFFFF;
		font-size: 16px;
		font-weight: normal;
		line-height: 64px;
		vertical-align: middle;
		margin-left: 30px;
	}
	header nav{
		overflow: hidden;
		float: left;
		margin-left: 99px;
	}
	header nav ul{
		display: flex;
		height: 24px;
		margin: 20px 0;
	}
	header nav ul li{
		border-right: 1px solid #FFFFFF;
	}
	header nav ul li:last-child{
		border-right: none;
		margin-right: 16px;
	}
	header nav ul li a{
		color: #FFFFFF;
		padding: 24px;
	}
	header nav ul li a:hover{
		opacity: 0.7;
	}
	#wrap{
		width: 880px;
		margin: 0 auto;
	}
	article{
		width: 468px;
		margin: 0 52px 50px auto;
		float: left;
	}
	h2.titleH2{
		font-weight: bold;
		font-size: 18px;
		line-height: 20px;
		border-left: 3px solid #c86320;
		padding-left: 5px;
		margin-bottom: 20px;
	}
	div#recommendList{
		overflow: hidden;
	}
	section.recommend{
		overflow: hidden;
		width: 225px;
		float: left;
		margin-right: 18px;
	}
	section.recommend+section.recommend{
		margin-right: 0;
	}
	section.recommend img{
	}
	section.recommend date{
		font-weight: bold;
	}
	section.recommend p{
		font-weight: bold;
	}
	div.asp{
		clear: both;
		float: none;
		margin: 50px 0;
	}
	div#greeting{
		padding: 10px;
		background-color: #F2F2F2;
		margin: 30px 0 20px 0;
	}
	div.new{
		overflow: hidden;
		width: 468px;
		padding-bottom: 20px;
		border-bottom: 1px solid #CCCCCC;
	}
	div.new+div.new{
		padding-top: 20px;
	}
	div.new img{
		display: block;
		float: left;
		margin-right: 13px;
	}
	div.detail{
		float: left;
		width: 230px;
	}
	div.detail date{
		font-size: 12px;
		line-height: 22px;
	}
	div.detail p{
		font-size: 18px;
		line-height: 28px;
		font-weight: bold;
	}
	/* サイドバー */
	aside{
		overflow: hidden;
		width: 360px;
		float: left;
	}
	aside div#selfintro{
		overflow: hidden;
		width: 340px;
		padding: 10px;
		float: left;
		background-color: #F2F2F2;
		margin-bottom: 40px;
	}
	aside div#selfintro div{
		float: left;
		width: 235px;
	}
	aside h5{
		font-weight: bold;
		font-size: 18px;
	}
	aside p{
		margin-bottom: 0.3em!important;
	}
	aside img{
		float: left;
	}
	aside h6{
		color: #C86320;
		font-size: 18px;
		font-weight: bold;
	}
	aside ul{
		clear: both;
		width: 360px;
	}
	aside ul li{
		height: 35px;
		line-height: 35px;
		padding: 10px 0;
		border-bottom: 1px solid #C86320;
	}
	aside ul li a{
		display: block;
		position: relative;
		line-height: 35px;
		color: #C86320;
	}
	aside ul li a::after{
		display: block;
		content: "";
		position: absolute;
		top: 50%;
		right: 10px;
		width: 6px;
		height: 6px;
		margin: -4px 0 0 0;
		border-top: solid 2px #C86320;
		border-right: solid 2px #C86320;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	aside ul li a img{
		padding-right: 20px;
	}
	/* パンくず */
	p#bc{
		overflow: hidden;
		clear: both;
		float: none;
		width: 960px;
		margin: 50px auto 0 auto;
	}
	/* フッター */
	footer{
		overflow: hidden;
		clear: both;
		float: none;
		width: 100%;
		margin: 50px auto 0 auto;
		padding: 8px;
		background-color: #000000;
	}
	footer p{
		text-align: center;
		color: #FFFFFF;
	}
	section+footer{
		margin-top: 0;
	}
	/* 記事ページ用 */
	.column article div#title{
		overflow: hidden;
		width: 446px;
		border: 1px solid #C86320;
		padding: 10px;
		margin-bottom: 30px;
	}
	.column article div#title img{
		display: block;
		float: left;
	}
	.column article div#title h1{
		color: #C86320;
		font-size: 24px;
		line-height: 30px;
		font-weight: bold;
	}
	.column article div#title date{
		float: right;
		margin-top: 10px;
	}
	.column section{
		width: 468px;
	}
	.column h2,.column h3{
		font-size: 24px;
		line-height: 30px;
		font-weight: bold;
		margin-top: 30px;
		margin-bottom: 7px;
		border-bottom: 1px solid #000000;
	}
	#toc{
		border-bottom: 1px solid #CCCCCC;
	}
	#toc p{
		border-bottom: 1px solid #CCCCCC;
	}
	#toc p img{
		vertical-align: middle;
		margin-right: 0.3em;
	}
	#toc ol{
		margin-left: 25px;
		margin-bottom: 30px;
	}
	#toc ol li{
		list-style-type:decimal;
		color: #C86320;
		padding: 0.5em 0;
	}
	#toc ol li a{
		color: #C86320;
		border-bottom: 1px solid #C86320;
	}
	#toc ul li{
		list-style-type: disc;
		margin-left: 1em;
		margin-top: 0.5em;
	}
	h4{
		border-left:3px solid #C86320;
		padding-left: 7px;
		font-weight: bold;
		margin-top: 20px;
		margin-bottom: 7px;
	}
	.outsidelink{
		border-bottom: 1px solid #000000;
		font-weight: bold;
	}
	.outsidelink:hover{
		color: #666666;
		border-bottom: 1px solid #666666;
	}
	.l_img{
		display: block;
		float: left;
		margin-right: 7px;
		margin-bottom: 7px;
	}
	.b_img{
		display: block;
		margin: 10px 0;
	}
	a.btn_back{
		color: #000000;
		font-weight: bold;
		float: right;
		border-bottom: 1px solid #000000;
		margin-top: 30px;
	}
	a.btn_back:hover{
		color: #666666;
		border-bottom: 1px solid #666666;
	}
	/* 店舗情報など住所 */
	div.address{
		margin: 20px 0;
	}
	/* 楽天アフィリエイト */
	section.raffili{
		clear: both;
		margin: 10px 0 20px 0;
	}
}
/* 横幅414px以下の場合(スマホ向け) */
@media only screen and (max-width: 414px){
	*{
		/* 文字関連 */
		font-style: normal;
		font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
		font-size: 16px;
		line-height: 26px;
		font-weight: normal;
		vertical-align: baseline;
		text-decoration: none;
		text-align: left;
		text-transform: capitalize;
		letter-spacing: normal;
		word-spacing: normal;
		color: #000000;
		/* 余白 */
		margin: 0;
		padding: 0;
		/* 背景 */
		background: none;
		/* その他 */
		list-style: none;
		border: none;
		box-sizing: content-box;
	}
	img{
		vertical-align: bottom;
	}
	p{
		margin-bottom: 0.4em;
	}
	.fbb{
		font-size: 110%;
		line-height: 110%;
		font-weight: bold;
	}
	.page{
		max-width: 100%;
		text-align: center;
		margin-top: 10px;
		margin-bottom: 10px;
	}
	header{
		width: 100%;
		overflow: hidden;
		margin-bottom: 20px;
	}
	header img{
		max-width: 160%;
		height: auto;
	}
	header div#header{
		overflow: hidden;
		background-color: #000000;
	}
	header h1{
		margin-left: 7px;
	}
	header h1 a{
		color: #FFFFFF;
		font-size: 24px;
		font-weight: bold;
		line-height: 64px;
		vertical-align: middle;
		text-align: center;
	}
	header h1 span.title{
		color: #FFFFFF;
		font-size: 16px;
		font-weight: normal;
		line-height: 64px;
		vertical-align: middle;
		margin-left: 15px;
	}
	#wrap {
		width: 100%;
		overflow: hidden;
	}
	article{
		overflow: hidden;
		width: 96%;
		margin: 0 auto;
	}
	h2.titleH2{
		font-weight: bold;
		font-size: 18px;
		line-height: 20px;
		border-left: 3px solid #c86320;
		padding-left: 5px;
		margin-bottom: 20px;
	}
	div#recommendList{
		overflow: hidden;
	}
	section.recommend{
		width: 46%;
		float: left;
		margin-left: 2%;
		margin-right: 2%;
	}
	section.recommend+section.recommend{
	}
	section.recommend img{
		max-width: 100%;
		height: auto;
	}
	section.recommend date{
		font-weight: bold;
	}
	section.recommend p{
		font-weight: bold;
	}
	div.asp{
		clear: both;
		float: none;
		margin: 20px 0;
	}
	div.asp img{
		max-width: 100%;
		height: auto;
		}
	div.new{
		overflow: hidden;
		width: 100%;
		padding-bottom: 30px;
	}
	div.new img{
		display: block;
		max-width: 50%;
		height: auto;
		float: left;
	}
	div.detail{
		float: left;
		width: 48%;
		margin-left: 2%;
	}
	div.detail date{
		font-size: 12px;
		line-height: 20px;
	}
	div.detail p{
		font-size: 18px;
		line-height: 26px;
		font-weight: bold;
	}
	div#greeting{
		padding: 10px;
		background-color: #F2F2F2;
		margin-bottom: 30px;
	}
	/* サイドバー */
	aside{
		overflow: hidden;
		width: 100%;
	}
	aside div#selfintro{
		overflow: hidden;
		width: 100%;
		padding: 10px;
		background-color: #F2F2F2;
		margin-bottom: 30px;
	}
	aside div#selfintro div{
		float: left;
		width: 60%;
	}
	aside h5{
		font-weight: bold;
		font-size: 18px;
		line-height: 26px;
	}
	aside p{
		margin-bottom: 0.3em;
	}
	aside img{
		max-width: 38%;
		height: auto;
		float: left;
		margin-left: 2%;
	}
	aside h6{
		color: #C86320;
		font-size: 18px;
		font-weight: bold;
		margin-left: 0.5em;
	}
	aside ul{
		clear: both;
		width: 100%;
	}
	aside ul li{
		height: 35px;
		line-height: 35px;
		padding: 10px 0;
		border-bottom: 1px solid #C86320;
	}
	aside ul li a{
		display: block;
		position: relative;
		line-height: 35px;
		color: #C86320;
	}
	aside ul li a::after{
		display: block;
		content: "";
		position: absolute;
		top: 50%;
		right: 10px;
		width: 6px;
		height: 6px;
		margin: -4px 0 0 0;
		border-top: solid 2px #C86320;
		border-right: solid 2px #C86320;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	aside ul li a img{
		padding-right: 20px;
	}
	/* パンくず */
	p#bc{
		width: 98%;
		overflow: hidden;
		clear: both;
		float: none;
		margin-top: 50px;
		margin-left: 2%;
	}
	/* フッター */
	footer{
		overflow: hidden;
		clear: both;
		float: none;
		width: 100%;
		margin: 50px auto 0 auto;
		padding: 8px 0;
		background-color: #000000;
	}
	section+footer{
		margin-top: 0;
	}
	footer p{
		font-size: 12px;
		text-align: center;
		color: #FFFFFF;
	}
	/* 記事ページ用 */
	.column article div#title{
		overflow: hidden;
		max-width: 100%;
		border: 1px solid #C86320;
		padding: 10px;
		margin-bottom: 15px;
	}
	.column article div#title img{
		display: block;
		float: left;
		margin-right: 10px;
	}
	.column article div#title h1{
		color: #C86320;
		font-size: 20px;
		line-height: 24px;
		font-weight: bold;
	}
	.column article div#title date{
		float: right;
		margin-top: 10px;
	}
	.column section{
		max-width: 100%;
	}
	.column h2,.column h3{
		font-size: 24px;
		line-height: 30px;
		font-weight: bold;
		margin-top: 30px;
		margin-bottom: 7px;
		border-bottom: 1px solid #000000;
	}
	#toc{
		border-bottom: 1px solid #CCCCCC;
	}
	#toc p{
		border-bottom: 1px solid #CCCCCC;
	}
	#toc p img{
		vertical-align: middle;
		margin-right: 0.3em;
	}
	#toc ol{
		margin-left: 25px;
		margin-bottom: 30px;
	}
	#toc ol li{
		list-style-type:decimal;
		color: #C86320;
		padding: 0.5em 0;
	}
	#toc ol li a{
		color: #C86320;
		border-bottom: 1px solid #C86320;
	}
	#toc ul li{
		list-style-type: disc;
		margin-left: 1em;
		margin-top: 0.5em;
	}
	h4{
		border-left:3px solid #C86320;
		padding-left: 7px;
		font-weight: bold;
		margin-top: 20px;
		margin-bottom: 7px;
	}
	.outsidelink{
		font-size: 110%;
		font-weight: bold;
	}
	.l_img{
		display: block;
		float: left;
		margin-right: 7px;
		margin-bottom: 7px;
	}
	.b_img{
		display: block;
		margin: 10px 0;
	}
	a.btn_back{
		color: #FFFFFF;
		display: block;
		background-color: #000000;
		padding: 0.5em;
		width: 10em;
		margin: 70px auto;
		text-align: center;
		border: 1px solid #582B0E;
	}
	/* 楽天アフィリエイト */
	section.raffili{
		width: 96% !important;
		padding: 5px !important;
		margin: 20px auto !important;
	}
	section.raffili table div{
		width: 100% !important;
	}
	section.raffili table div p+div{
		width: 80% !important;
		margin-top: 10px !important;
		border: none !important;
	}	
	section.raffili table div p+div a div{
		width: 80% !important;
		margin-top: 20px !important;
	}
}