@charset "UTF-8";
/* --------------------------------------------------------------------
 Copyright (c) 2018 plusi
 -------------------------------------------------------------------- */
/* ====================================
 ブラウザ デフォルト値のリセット
 ====================================== */
*{ margin: 0; padding: 0; box-sizing: border-box; }

/* block */
address,blockquote,dl,fieldset,h1,h2,h3,h4,h5,h6,ol,p,pre,table,ul,object{
font-size: 100%;
}
div, mg, p, a, ul, form, input, label, h1, h2, h3, table,object{
padding:0; margin:0;
}
/* inline */
button,cite{
font-size: 100%;
}

/* other */
caption,dd,dt,li,td,th,tr{
font-size: 100%;
}

/* form */
form,input,option,select,textarea{
}

/* style */
div,span{  }

/* img */
img { vertical-align: top; }

/* link */
a {
	text-decoration: none;
}
a:link{ color: #0d0d0d; }
a:visited{ color: #0d0d0d; }
a:hover{ color: #da3a20; text-decoration: underline;}
a:active{ color: #666666; }

a img{ border-style: none; }

/* iframe */
object { overflow: auto; border: none; background-color: #d8caa8;}

/* ====================================
 基本タグ
 ====================================== */
body{
	position: relative;
	margin: 0;
	font-family: 'メイリオ', 'Hiragino Kaku Gothic Pro', sans-serif;
	line-height: 200%;
	color: #404040;
}


/* --------------------------------
	HEADER_AREA
   -------------------------------- */
#header_area{
	position: fixed;

	padding: 30px 0px 30px 0px;
	margin: 0 auto;
	z-index: 99;

	width: 100%;
	background-color: #f2f2f2;
	background-image: url("../images/otis-redding.png");
	border-bottom: solid 1px #dddddd;
}
#header_box{
	position: relative;

}

/* LOGO(サイト名) */
#logo{
}
.site h1{
	width: 100%;
	color: #333;
	font-weight: normal;
	text-align: left;
}
.site h1 a{
	color: #000000;
	text-decoration: none;
}

.site h1{
	padding: 0 15px;
	margin: 0;
	font-size: 15px;
}

.site img{
	width: auto;
	height: 50px;
	border: none;
}


/* --------------------------------
	HEADER IMAGE [TOP]
   -------------------------------- */
/* TOP メイン領域 */
#top_title_area{
	padding-top: 144px;
	position: relative;
}
.top{
	height: auto;
}
/* MENU LOGO画像 */
#header_area img.bungu_logo{
	height: 26px;
}

/* --------------------------------
	CONTENTS_AREA
   -------------------------------- */
.contents_area{
	clear: left;
	clear: both;
	width: 100%;
	margin: 0 auto;
	padding: 0;
}
/* --------------------------------
	CONTENTS_BOX
   -------------------------------- */
.contents_box{		/* h1の単位 */
	clear: left;
	clear: both;
	position: relative;
	width: 100%;
	margin: auto;
}
.contents_box h1 {
	clear: both;
	clear: left!important;
	clear: right!important;

	/*background-color: #AB2317!important;*/
	/* h1 assert/cssの上書き */
	background-color: transparent!important;
	color: #AB2317!important;
	border-bottom: 2px dashed #AB2317;
	border-radius: 0px!important;
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
	padding: 30px 14px 10px 14px!important;
	margin-bottom: 50px!important;

	text-align: center;
	font-weight: normal;
}

.contents_box h2{
	clear: both;
	clear: left!important;
	clear: right!important;
	margin: 10px 0 10px 0px;
	border-bottom: solid 1px #dddddd;
	font-size: 21px;
	font-weight: bold;
}
.contents_box h3{
	clear: all;
	clear: left;
	clear: right;
	font-size: 18px;
	color: #54bce8;
}
.contents_box h3:before{ content:'【'; }
.contents_box h3:after{ content:'】'; }
.contents_box .noSPtop{
	margin-top: 30px!important;
}
.contents_box .SPtop{
	margin-top: 100px!important;
}

.contents_box h2 i{
	margin-right: 7px;
	color: #b62317;
}
.contents_box h1 span{ font-size: 80%; padding-right: 20px;}
.contents_box h2 span{ font-size: 80%;}
/* 2024/11/21 add */
span.mini{ font-size: 80%!important; }

.contents_box p{
	font-size: 18px;
	clear: left;
	max-width: 98%;
	margin: auto;
	margin-top: 0;
	margin-bottom: 20px;
	line-height: 180%;
}
.contents_box p.indent{
	text-indent: 1em;
}
.contents_box .borderHR{
	clear: both;
	padding: 30px 0;;
	border-bottom: 2px dashed #AB2317;
}


/* 商品情報 */
.product_info{
	border-top: solid 1px #dddddd;
	padding: 10px 0;
	font-size: 94%;
}
.product_info p{
	margin-bottom: 0!important;
	padding-bottom: 0!important;
}

.product_info span.price{
	margin-left: 10px;
}
.product_info span.maker{
	margin-left: 10px;
	padding: 1px 8px;
	border-radius: 5px;
	background-color: #555;
	color: #fff;
}



.product_info i.youtube{
	vertical-align: middle;
	color: #b62317;
}
/* --------------------------------
 nyusyo_box
   -------------------------------- */
.nyusyo_box{
	width: 100%;
	margin: 40px 0 auto;
}
.nyusyo_box img{
	margin: 0 5px;
	border: 1px solid #ccc;
	width: 100px;
	height: auto;
}

img a,
a:link,
.nyusyo_box a:hover{text-decoration: none!important; cursor: pointer!important;}

/* --------------------------------
 CONTENTS_BOXの二分
   -------------------------------- */
.box{		/* h2 の単位*/
	clear: left;
	clear: both;
	width: 100%;
	padding: 0;
	margin: 0;
	line-height: 240%;
}

/* 説明 */
.box_det{
	float: left;
	width: 50%;
	display: block;
	text-align: left;
	text-decoration: none;
	padding: 0;
	line-height: 240%;
}
.box_det p{
	padding: 5px;
	margin: 0 0 10px 0 !important;
}
.box_det img{
	width:auto;
	height:auto;
	max-width:100%;
	max-height:100%;
}
.box_det img.pc_layout{
	padding-top: 80px;
}
/* 写真 */
.box_photo{
	width: 50%;
	height: auto;
}
.box_photo img{
	max-width: 100%;
	height: auto;
	border: none;
	margin-bottom: 5px;
	vertical-align: bottom;

}

.box p{
	margin: 0 0 20px 0;
	padding: 5px;
	/*font-size: 18px;*/
}
.box p.name{
	padding: 0px 10px 10px 10px;
	font-size: 24px;
	text-align: right;
}
.box p.name span{
	font-size: 16px;
}

/* --------------------------------
	footer_area
   -------------------------------- */
/*
footer{
	background: url("../images/layout/footer.png") top center repeat-x;
	height: 280px;
}
#footer_area{
	background: url("../images/layout/footer_main.png") top center no-repeat;
	height: 280px;
}

.footer_box{
	padding-top: 120px;
	padding-left: 20px;

}
.footer_info{
	float: left;
}
*/
/* コピーライト */
/*
.copyright p{
	float: right;
	margin: 0;
	padding-top: 120px;

	color: #666666;
	font-size: 14px;
}
*/
/* --------------------------------
 more
   -------------------------------- */
/* 続きを読む */
.more{
	padding: 5px 15px!important;
	margin: 0;

	font-size: 12px;
	line-height: auto;
	color: #ffffff;

	display: inline-block;
	background-color: #3077be;
}

.more i{ margin-left: 10px; }

/* --------------------------------
	スクロール
   -------------------------------- */
#page-top {
	position: fixed;
	bottom: 20px;
	right: 20px;
	font-size: 77%;
	z-index: 9999;
}
#page-top a {
	background: #aaa;
	text-decoration: none;
	color: #fff;
	width: 80px;
	padding: 20px 0;
	text-align: center;
	display: block;
	border-radius: 5px;
}
#page-top a:hover {
	text-decoration: none;
	background: #666;
}


/* ================================
			359px以下
   ================================ */
@media (max-width: 359px) {

}

/* ================================
			599px以下
   ================================ */
@media (max-width: 599px) {
	/* FIXの解除 */
	#header_area{
		margin: 0;
		padding: 10px 0px 10px 0px!important;
		position: fixed;
	}
	header{
		margin: 0!important;
		padding: 0!important;
		border: 1px solid white;
	}
	/* サイト名 */
	.site img{
		font-size: 12px;
		height: 40px;
		width: auto;
	}
	.site h1{
		font-size: 12px;
	}

	/* ナビゲーション */
	.menu li a{
		padding: 10px 7px;
		font-size: 11px;
	}

	#top_title_area{
		padding-top: 90px;
		position: relative;
	}

	.contents_box h1	{font-size: 28px; padding-left: 5px; margin-top: 20px; clear: right; clear: left;}

	.contents_box h1 span{ padding-right: 5px;}

	.contents_box h2	{font-size: 18px; margin: 10px 0 0 0;}

	.contents_box .lead	{font-size: 16px}

	.contents_box .SPtop{
		margin-top: 40px!important;
	}
	.contents_box p{
		margin-bottom: 10px!important;
		padding: 5px;
		font-size: 14px;
	}
	.box_det img.pc_layout{
		padding-top: 0px;
	}

	.nyusyo_box{
		/*
		width: 98%;
		margin: 10px 1% auto;
		*/
	}
	.nyusyo_box img{
		width: 50px;
		height: auto;
	}

}


/* ================================
			767px以下 --> 800
   ================================ */
@media (max-width: 800px) {

	.contents_box{
		width: 96%;
		margin: 0 2% auto;
	}
	.contents_box p{
		/*max-width: 96%;*/
		margin: auto;
		margin-top: 0;
		margin-bottom: 20px;
	}

	/* トグルボタン */
	button, html input[type="button"], input[type="reset"], input[type="submit"] {
		-webkit-appearance: none!important;
	}
	#menubtn{
		display: block;
		padding: 8px 12px!important;
		border: solid 1px #aaaaaa;
		border-radius: 5px!important;
		background-color: #ffffff;
		position: absolute;
		top: 15px;
		right: 15px;
		cursor: pointer;
	}

	#menubtn:hover {background-color: #dddddd}

	#menubtn:focus {outline: none}

	#menubtn i{
		color: #888888;
		font-size: 18px;
	}

	#menubtn span{
		display: inline-block;
		text-indent: -9999px;
	}

	/* ナビゲーションメニュー（縦並び） */
	.menu{ display: none }

	.menu ul{
		margin: 20px 0 0 0;
		padding: 10px;
		list-style: none;
		border-top: 1px solid #fff;
		border-bottom: 1px solid #fff;
		background-color: #f2f2f2
	}

	.menu li a	{
		display: block;
		padding: 5px;
		color: #000000;
		font-size: 14px;
		text-decoration: none;
		border-bottom: 1px dotted #fff;
	}

	.menu li a:hover	{background-color: #fff; color: #54bce8;}


	/* 1行配置の場合の調整 */
	.box_det{
		width: 96%;
		margin: 0 2% auto;
	}


	.photo_box{
		margin-bottom: 10px;
	}
	.photo_box:after{
		margin-bottom: 10px;
	}

	#menu_area{
		margin-top: 0px;
	}

}
/* ================================
			768px以上
   ================================ */
@media (min-width: 801px) {
	.contents_area{
		float: none;
		width: 100%;
		margin: 0 auto;
	}

	#menu_area{
		float: left;
		width: 20%;
	}

	/* トグルボタン */
	#menubtn{ display: none; }

	/* ナビゲーション */
	#menu {display: block !important}

	.menu ul {
		margin: 25px 10px 0 0;
		padding: 0;
		list-style: none;
	}

	.menu li a	{
		display: block;
		padding: 10px 15px;
		color: #000000;
		font-size: 16px;
		text-decoration: none;
		/*text-decoration: none;*/
	}

	.menu li a:hover{ text-decoration: underline!important; text-underline-position: under; color: #54bce8; }
	.menu li a.current{ background-color: #f2f2f2; color: #54bce8; }

	.menu ul:after{
		content: "";
		display: block;
		clear: both;
	}

	.menu li{
		float: left;
		width: auto
	}

	/* LOGOとmenu_areaを横に並べる設定 */
	#header_area:after{
		content: "";
		display: block;
		clear: both;
	}

	#logo{
		float: left;
		width: auto;
	}

	#menu_area{
		float: right;
		width: auto;
	}

}
/* ================================
			1190px以上
@media (min-width: 1190px) {
   ================================ */
/*@media (min-width: 1090px) {*/
@media screen and (min-width: 992px) {

	/* 全体の横幅を固定 */
	#header_box,
	.topic_area,
	.footer_box{
		width: 1200px;
		/*width: 1060px;*/
		/*width: 1140px;*/
		margin-left: auto;
		margin-right: auto;
	}

	/* 全体の横幅を固定 */
	.contents_box{
		width: 1060px;
		/*width: 1140px;*/
		margin-left: auto;
		margin-right: auto;
	}

	/* 罫線を挿入 */
	#header_area{
		margin-bottom: 20px;
		border-bottom: solid 1px #dddddd;
	}

	/* 全体の横幅を固定 */
	#top_title_area{
		width: 1060px;
		/*width: 1140px;*/
		margin-left: auto;
		margin-right: auto;
	}

}