@charset "Shift_JIS";

/*----------------------------------------------------------------*/
/* 全体・モバイル用共通 */
/*----------------------------------------------------------------*/

body	{background-color: #fff;
	margin: 0 auto;
	padding: 0;
	font-family:"メイリオ","Hiragino Kaku Gothic Pro","sans-serif";
	font-size: 16px;
	line-height:1.5;
	-webkit-text-size-adjust: 100%;}

a	{text-decoration: none;}


/* 左右の余白 */
/*----------------------------------------------------------------*/
.cols-inner	{max-width: 980px;
		margin-left: auto;
		margin-right: auto;
		padding-left: 5px;
		padding-right: 5px;}


/* ヘッダー */
/*----------------------------------------------------------------*/
.bg-img	{position: relative;}

.img	{max-width: 100%;}

.bg-img p	{position: absolute;
		margin: 0;
		padding: 0;
		top: 0;
		left: 0;}

.bg-img p	{font-size: 0.875rem;}
 
			@media (min-width: 767px) {
			.bg-img p {font-size: calc( 0.823vw + 0.625rem );}
			}
 
			@media (min-width: 1010px) {
			.bg-img p {font-size: 1.125rem;}
			}

.logo h1	{margin: 0;
		padding: 0;
		height: 60px;}

.logo	{position: absolute;
	margin: 0;
	padding: 0;
	top: 25px;
	left: 30px;
	border: none;}

.logo img	{width: 75%;}

.call	{position: absolute;
	margin: 0;
	padding: 0;
	top: 20px;
	left: -130px;}


/* 電話・ＦＡＸ番号 */
/*----------------------------------------------------------------*/
.tel	{position: absolute;
	top: 70px;
	right: 0;
	color: #be0000;
	line-height: 1.2;
	text-align: right;}

.tel	{font-size: 3.793vw;
	text-shadow: 1px 1px 2px #ffffff;}
 
		@media (min-width: 767px) {
		.tel {font-size: calc( 2.469vw + 0.625rem );}
		}
 
		@media (min-width: 1010px) {
		.tel {font-size: 2.25rem;}
		}


/* メニュー */
/*----------------------------------------------------------------*/
.menubtn	{padding: 6px 12px;
		border: solid 1px #aaaaaa;
		border-radius: 5px;
		background-color: #ffffff;
		position: absolute;
		top: 20px;
		right: 10px;
		cursor: pointer;}

.menubtn:hover	{background-color: #ddd;}

.menubtn:focus	{outline: none;}

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

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

.menu ul	{margin: 0;
		padding: 0;
		font-size: 16px;
		line-height: 1.5;
		list-style: none;}

.menu li a	{display: block;
		margin-top: 5px;
		padding: 10px 16px;
		color: #000;
		text-align: center;}

.menu li a:hover	{background-color: rgba( 111, 183, 255, 0.50 );}

.menu	{display: none;}


/* メニューアイコン */
/*----------------------------------------------------------------*/
.bars	{display: inline-block;
	width:20px;
	height:3px;
	background-color: gray;
	box-shadow: 0px -6px gray, 0px 6px gray;
	border-radius: 0.1px;
	margin: 8px 0 5px}


/* パンくずリスト */
/*----------------------------------------------------------------*/
.breadcrumb	{padding: 0;
		margin: 0 0 0px 0;
		font-size: 14px;}

.breadcrumb li	{display:inline;
		list-style: none;}

.breadcrumb li:after	{content: '>';
			padding: 0 3px;
			color: #555;}

.breadcrumb li:last-child:after	{content: '';}

.breadcrumb li a	{text-decoration: none;}


/* サイト内検索 */
/*----------------------------------------------------------------*/
#search-form	{padding: 12px;
		margin: 0 auto;}

#search-form form	{width: 100%;
			display: table;
			table-layout: fixed;}

#search-form input[type=text]	{display: table-cell;
				width: 100%;
				height: 38px;
				padding: 10px;
				box-sizing: border-box;
				border-radius: 0;
				-webkit-appearance: none;}

#search-form .search-button	{display: table-cell;
				vertical-align: top;
				width: 35%;}

#search-form .search-button input[type="submit"]	{width: 100%;
							height: 38px;
							color: #444;
							border: none;
							background: #ddd;
							padding: 0;
							border-radius: 0;
							-webkit-appearance: none;}

#search-form	{list-style: none;
		padding: 0;
		margin: 12px auto 0;}

#search-form	{display: inline-block;
		margin: 8px;
		font-size: 12px;}

#search-form.design-1 form	{font-size: 14px;}

#search-form.design-1 input[type=text]	{border: 1px solid #ccc;
					border-top-left-radius: 4px;
					border-bottom-left-radius: 4px;
					border-right: none;}

#search-form.design-1 .search-button input	{border-top-right-radius: 4px;
						border-bottom-right-radius: 4px;}

#search-form.design-1	{color: #555;}


/* コンテンツ */
/*----------------------------------------------------------------*/
.container	{position: relative;
		top: 0px;
		padding-top: 15px;
		padding-bottom: 15px;
		margin-bottom: 15px;
		background-color: #002a51;}

.heading	{margin: 0;
		font-size: 3.673vw;
		text-align: center;}

.heading a	{color: #fff;}

.msg	{margin-top: 20px;
	margin-bottom: 20px;
	font-size: 3.513vw;
	text-align: center;}

span.b	{font-size: 5.6vw;}


/* 呉市紹介リンク */
/*----------------------------------------------------------------*/
.kure, .kure1, .kure2, .kure3	{display: inline-block;
			line-height: 1.5;
			color: #fff;}

.kure, .kure1, .kure2, .kure3	{background-color: #002a51;
			margin: 0 auto 0 auto;
			padding: 15px 15px 15px 15px;
			border-radius: 50% / 50%;
			text-align: right;
			box-sizing: border-box;}

.kure, .kure1, .kure2, .kure3	{font-size: 3.793vw;}
 
					@media (min-width: 767px) {
					.kure, .kure1, .kure2, .kure3 {font-size: calc( 2.057vw + 0.625rem );}
					}
 
					@media (min-width: 1010px) {
					.kure, .kure1, .kure2, .kure3 {font-size: 2rem;}
					}

.kure-ic	{position: absolute;
		margin-right: 2px;
		bottom: -9%;
		right: 3px;}


/* 動画 */
/*----------------------------------------------------------------*/
.youtube	{position: relative;
		display: block;
		width: 100%;
		padding: 0;
		overflow: hidden;
		padding-top: 56.25%;
		margin-bottom: 3em;}

.youtube iframe,
.youtube img{position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border: 0;}


/* 広島かきのご注文 */
/*----------------------------------------------------------------*/
.bg-color	{position: relative;
		padding: 10px;
		background-color: #dceeff;}

h2	{font-size: 5.333vw;
	color: #002a51;
	text-align: center;
	margin: 0;}

h2 span	{font-size: 3.265vw;}

.k-img, .m-img, .s-img	{max-width: 100%;
			margin: 0;
			padding: 0;
			border: none;}

.kure	{margin-top: 50px;}

.top-k, .top-m, .top-s	{list-style-type: none;
			padding: 0;
			margin: 0;}

.top-k li	{float: left;
		width: 50%;
		display: inline-block;}

.top-k:after	{content: "";
		display: block;
		clear: both;}

.top-m	{text-align: right;}

.top-m li	{float: left;
		width: 50%;
		display: inline-block;}

.kure2	{margin-right: 20px;}

.m-img	{margin-left: 10%;}

.top-m:after	{content: "";
		display: block;
		clear: both;}

.top-s li	{float: left;
		width: 50%;
		display: inline-block;}

.top-s:after	{content: "";
		display: block;
		clear: both;}

span.c	{font-size: 4.4vw;
	color: blue;
	display: inline-block;
	padding: 0;
	margin: 25px 0 10px 0;}

.tel-bottom	{list-style-type: none;
		padding: 0;
		margin: 0;
		text-align: center;}

.tel-bottom li a	{color: red;
			font-size: 4.4vw;
			line-height: 1.5;
			display: block;}

.fax-aside	{padding: 0;
		margin: 5px 0 0 0;
		text-align: center;
		font-size: 16px;
		font-size: 3.2vw;}


/* トップへ戻るボタン */
/*----------------------------------------------------------------*/
.topBtn {
  position:fixed; /*固定*/
  bottom:20px; /*場所を右下に移動*/
  right:20px; /*場所を右下に移動*/
  display:block; /*aタグをblock要素に変更*/
  background-color:rgba(0,0,0,0.5); /*以下、デザインはご自由に！！*/
  color:#fff;
  text-decoration:none;
  font-weight:bold;
  font-size:11px;
  width:60px;
  height:60px;
  text-align:center;
  line-height:22px;
  border-radius:30px;
  padding-top:30px;
  box-sizing:border-box;
}
.topBtn:before {
  content:'\25B2';
  position:absolute;
  top:10px;
  left:0;
  width:100%;
  text-align:center;
  font-size:20px;
}
.topBtn:hover {
  opacity:0.7;
}



/* フッター */
/*----------------------------------------------------------------*/
.accbox	{margin: 0;
	padding: 0;}

.accbox label	{display: block;
		margin: 0 0;
		padding: 15px 12px;
		cursor: pointer;
		transition: all 0.5s;
		border-bottom: thin solid #002a51;}

.accbox label {font-size: 3.620vw;}
 
@media (min-width: 767px) {
  .accbox label {font-size: calc( 0.740vw + 0.625rem );}
}
 
@media (min-width: 1010px) {
  .accbox label {font-size: 2.25rem;}
}

.accbox label:before	{content: '\f054';
			font-family: 'FontAwesome';
			padding-right: 8px;}

.accbox label:hover	{background: #ddd;}

.accbox input	{display: none;}

.accbox .accshow	{height: 0;
			padding: 0;
			overflow: hidden;
			opacity: 0;
			transition: 0.8s;}

.cssacc:checked + label + .accshow	{height: auto;
					padding: 5px;
					opacity: 1;}

.accbox .accshow p	{margin: 15px 10px;}

.cssacc:checked + label:before	{content: '\f078';}

span.d	{font-size: 14px;}

.cost	{border-collapse: collapse;
	font-size: 14px;
	margin-top: 10px;}

.cost th, .cost td	{border: solid 1px black;
			padding: 10px;
			text-align: center;}

.cost th	{background: #c7e8ff;}

span.e	{color: red;}

span.f	{color: blue;
	display: inline-block;
	margin-top: 5%;}

.calendar img	{max-width: 100%;
		margin: 0;
		padding: 0;}

.calendar .open	{float: left;
		width: 50%;
		margin-left: 0;}

.calendar .open + .open	{float: right;
			width: 50%;
			margin-left: 0;}

.calendar .open:first-child	{margin-left: 0;}


.calendar ul	{list-style-type: none;
		padding: 0;
		margin: 0;}

.calendar li	{float: left;
		margin-right: 2px;}

.f-c	{display: flex;
	justify-content: center;
	flex-wrap: wrap;}

.calendar	{content: "";
		clear: both;}

.open p	{padding: 0;
	margin: 0;}

.open p	{font-size: 2.758vw;}
 
		@media (min-width: 767px) {
		.open p {font-size: calc( 0.617vw + 0.625rem );}
		}
 
		@media (min-width: 1010px) {
		.open p {font-size: 1rem;}
		}

.f-l	{text-indent: -9999px;
	margin: -10px;
	padding: -10px;}

.copy	{text-align: center;}

small	{display: inline-block;}


/* ｐｒｏｄｕｃｅ＿ｐｌａｃｅ用 */
/*----------------------------------------------------------------*/
h3	{font-size: 4vw;
	color: #002a51;
	text-align: center;
	margin: 15px 0 15px 0;
	padding: 3px;
	background-color: #dceeff;}

.img-left	{max-width: 100%;
		float: left;
		margin: 0 10px 10px 0;
		padding: 0;}

.img-right	{max-width: 100%;
		float: right;
		margin: 0 0 10px 10px;
		padding: 0;}

dd	{margin-bottom: 15px;}


/* ｓｃｅｎｅｒｙ用 */
/*----------------------------------------------------------------*/
h4	{font-size: 20px;
	margin: 0 0 -10px 0;
	padding: 0;}

hr	{clear: both;
	margin: 30px 0;
	padding: 0;}

strong	{color: red;}

aside	{text-align: right;
	margin: -10px 0 30px 0;}


/* ｒｅｃｉｐｅ用 */
/*----------------------------------------------------------------*/
h2 + .msg	{margin-top: -4px;
		margin-bottom: -30px;}

.recipe-h	{color: #511d00;
		text-align: center;
		margin: 50px 0 10px 0;
		padding: 3px;
		background-color: #ffefc7;}

.box-3	{text-align: center;}

.t-line	{margin-left: auto;
	margin-right: auto;
	width: 95%;}

.t-line, .t-line td, .t-line th	{border-collapse: collapse;
				border: 1px solid #333;
				padding: 10px;}

.t-line th	{background-color: #ffefc7;
		font-weight: normal;}

.r-clear	{clear: both;}


/* Ｃｏｍｐａｎｙ用 */
/*----------------------------------------------------------------*/
span.g	{font-size: 20px;}

iframe	{margin-bottom: 30px;}

.site-a	{text-align: center;}

.site-l	{display: inline-block;
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: center;}

.site-l li	{display: inline-block;
		margin: 0 5px 20px 5px;}


/* ｃｏｎｔａｃｔ用 */
/*----------------------------------------------------------------*/
dl.form, .form dt, .form dd	{margin: 0;
				padding: 0;}

dl.form	{background-color: #ffefc7;
	border: 1px solid #333;
	border-top: 0;
	width: 100%;}

.form dt	{width: 100%;
		border-top: 1px solid #333;
		text-indent: 5px;}

.form dd	{background-color: #ffffff;
		border-top: 1px solid #333;
		padding: 10px;}

.img-mail	{max-width: 100%;
		margin-bottom: -5px;}

input[type=text], input[type=email]	{height: 30px;
					margin-bottom: 10px;}

input[type=checkbox]	{width: 15px;
			height: 15px;
			vertical-align: middle;}

input[type=radio]	{width: 15px;
			height: 15px;
			vertical-align: middle;}

select	{font-size: 16px;
	margin-bottom: 2px;
	padding: 5px 0 5px 0;
	vertical-align: middle;}

input[type=submit]	{background-color: #ff9600;
			color: #fff;
			padding: 10px 0;
			margin-bottom: 30px;
			border-radius: 10px;
			font-size: 1.1em;
			font-weight: bold;
			width: 80%;
			border-style: none;}

input[type=submit]:hover	{background-color: #ffcb67;
				color: #ff9000;}

.required:after	{content: " *";
		color: red;}



/* ｐａｙｍｅｎｔ用 */
/*----------------------------------------------------------------*/
.cost td	{font-size: 16px;}


/* ｋａｋｉ＿ｍｕｋｉｍｉ用 */
/*----------------------------------------------------------------*/
.nail	{display: flex;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 30px;}

.thumbnail img	{margin-bottom: 20px;}


.cart dt	{float: left;}

.thumb	{width: 100%;
	padding: 0 20px;
	margin: 0 0 10px 0;
	background-color: #dceeff;}

span.net	{font-size: 20px;}

span.price	{color: red;
		font-size: 22px;}

.cart dt	{font-weight: bold;
		font-size: 18px;}

.button	{background-color: #f90;
	color: #fff;
	padding: 15px 15px;
	margin: 0 0 20px -20px;
	border-radius: 10px;
	font-weight: bold;
	text-align: center;
	font-size: 3.6vw;
	width: 100%;
	border-style: none;}

input[type=hidden] + input[type=submit]	{margin-bottom: 20px;}

.kaki-color	{padding: 0 10px 10px;
		margin-bottom: 30px;
		background-color: #dceeff;}

.thumbnail + hr	{margin-top: 10px;}

h5	{font-size: 4.0vw;
	color: red;
	text-align: center;
	margin-top: 10px;
	margin-bottom: 0;}


/* ｋａｋｉ＿ｋａｋｏｕ用 */
/*----------------------------------------------------------------*/

h6	{font-size: 2.8vw;
	color: #ff9600;
	text-align: center;
	margin-top: 10px;
	margin-bottom: 0;}


/*----------------------------------------------------------------*/
/* ＰＣ（ブレークポイント幅767px以上）用 */
/*----------------------------------------------------------------*/

@media all and (min-width: 767px){

body	{background-color: #fff;}


/* ヘッダー */
/*----------------------------------------------------------------*/
.logo img	{width: 100%;}

.call	{position: absolute;
	margin: 0;
	padding: 0;
	top: 20px;
	left: -130px;}


/* 電話・ＦＡＸ番号 */
/*----------------------------------------------------------------*/
.tel	{position: absolute;
	top: 30px;
	right: 0;
	color: #be0000;
	line-height: 1.2;
	text-align: right;}


/* メニュー */
/*----------------------------------------------------------------*/
.menubtn	{display: none;}

.menu	{display: block !important;}

.menu ul	{position: absolute;
		top: 80px;
		right: 0;}

.menu li	{position: relative;
		float: left;
		font-size: 18px}

.menu ul#menu-pc	{position: absolute;
			top: 125px;
			right: 0;}

.menu ul#menu-pc li	{position: relative;
			float: left;
			font-size: 25px;
			font-weight: 600;
			text-shadow: 2px 1px 1px #ffffff;}

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


/* サイト内検索 */
/*----------------------------------------------------------------*/
#search-form	{position: absolute;
		top: 83%;}

#search-form form	{width: 30%;
			display: table;
			table-layout: fixed;}


/* コンテンツ */
/*----------------------------------------------------------------*/
.container	{top: -10px;}

.heading	{font-size: 30px;}

.msg	{font-size: 26px;}

span.b	{font-size: 46px;}


/* 呉市紹介リンク */
/*----------------------------------------------------------------*/
.kure, .kure1, .kure2, .kure3	{padding: 30px 20px 30px 25px;}

.kure-ic	{position: absolute;
		margin-right: 25px;
		top: 65%;
		right: 5px;}


/* 広島かきのご注文 */
/*----------------------------------------------------------------*/
h2	{font-size: 40px;}

h2 span	{font-size: 28px;}

.post ul	{float: left;
		margin: 0;
		padding: 0;
		width: 33%;}

.top-k li	{clear: both;
		margin: 0;
		padding: 0;
		width: 100%;
		text-align: left;}

.top-m li	{clear: both;
		margin: 0;
		padding: 0;
		width: 100%;
		text-align: center;}

.top-s li	{clear: both;
		margin: 15px 0 0 0;
		padding: 0;
		width: 100%;
		text-align: right;}

.kure2	{margin-right: 0;}

.m-img	{margin-left: 0;}

span.c	{font-size: 38px;}

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

.tel-bottom li a	{font-size: 36px;}

.fax-aside	{font-size: 16px;}


/* フッター */
/*----------------------------------------------------------------*/
.accbox label	{display: none;}

.accbox .accshow	{height: auto;
			overflow: visible;
			opacity: 1;
			padding: 0;
			margin: 0;}

.f-l 	{text-indent: 0;
	margin: 0;
	margin-bottom: 5px;
	padding: 3px;
	background-color: #ccc;
	font-size: 24px;}

.cost	{font-size: 14px;}

.box-1	{float: left;
	width: 49%;}

.box-2	{float: right;
	width: 49%;
	margin-top: 0.5;}

.copy	{clear: both;}


/* ｐｒｏｄｕｃｅ＿ｐｌａｃｅ用 */
/*----------------------------------------------------------------*/
h3	{font-size: 30px;}


/* ｒｅｃｉｐｅ用 */
/*----------------------------------------------------------------*/
.box-3	{float: left;
	width: 40%;
	margin-bottom: 10px;}

.box-4	{float: right;
	width: 60%;}

.t-line	{font-size: 16px;}


/* ｑｕｏｔａｔｉｏｎ用 */
/*----------------------------------------------------------------*/
.form dt	{float: left;
		clear: both;
		width: 35%;
		padding: 0;
		padding-top: 20px;
		text-align: center;
		text-indent: -5px;}

.form dd	{margin-left: 35%;
		border-left: 1px solid #333;}


/* ｐａｙｍｅｎｔ用 */
/*----------------------------------------------------------------*/
.pay-l	{float: left;
	margin: 0 30px 0 0;}


/* ｋａｋｉ＿ｍｕｋｉｍｉ用 */
/*----------------------------------------------------------------*/
.thumbnail .nail	{float: left;
			width: 48%;
			margin-left: 4%;}

.thumbnail .nail:first-child + .nail + .nail	{clear: both;
						margin-left: 0;}

.thumbnail .nail:first-child	{margin-left: 0;}

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

.thumbnail img	{margin-right: 20px;}

.button	{font-size: 26px;}

h5	{font-size: 32px;}


/* ｋａｋｉ＿ｋａｋｏｕ用 */
/*----------------------------------------------------------------*/

h6	{font-size: 20px;}


}