@charset "UTF-8";
/* 
CSS Document 
ページ共通CSS
ヘッダ, フッタ, サイド
*/

#in_contents {
	font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HiraKakuPro-W3","ＭＳ Ｐゴシック","MS PGothic",Arial, Helvetica,sans-serif;
	color:#402000;
	font-size:15px;
	line-height:1.8;
	-webkit-text-size-adjust: 100%;
	}
	
.pc {display:block;}
.sp {display:none;}
	
/*テキストリンク*/
a {
	}
	
a:hover {
	}
	
.fontYuGothic {
	font-family:"游ゴシック", "YuGothic", "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HiraKakuPro-W3","ＭＳ Ｐゴシック","MS PGothic",Arial, Helvetica,sans-serif;
	font-weight:500;
	}
	
/*ボタン*/
.btn {
	font-family:"游ゴシック", "YuGothic", "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HiraKakuPro-W3","ＭＳ Ｐゴシック","MS PGothic",Arial, Helvetica,sans-serif;
	text-decoration:none;
	display:inline-block;
	line-height:1em;
	background:#EF7600 url(../img/icon_arrow.png) no-repeat 1em center;
	text-align:center;
	padding:0.8em 3em;
	color:#fff;
	border-radius:50px;
	font-size:113%;
	}

.btn, .hover {transition:0.3s opacity linear;}
.btn:hover, .hover:hover {text-decoration:none;opacity:0.7;}

#pagetopButton {position:fixed;bottom:20px;right:20px;display:none;}
	
/*ボックス*/
.constBox {width:1100px;margin-left:auto;margin-right:auto;height:100%;}
.bgOrange {background:url(../img/bg_pattern.png);}

/*詳細情報テーブル*/
#detail {position:absolute;z-index:10000;display:none;overflow:auto;padding:20px 0;width:1100px;}
#detail .inner {width:1100px;}
#detail h2 {font-size:133%;margin-bottom:0.5em;line-height:1em;}
#detail h2:nth-of-type(n+2) {margin-top:1em;}
#detail table {
	width:100%;
	background:#fff;
	table-layout:fixed;
	}
#detail table th, #detail table td {border:1px solid #DCC893;font-size:80%;color:#666666;font-weight:normal;text-align:left;padding:0.3em 10px;vertical-align:top;}
#detail table td span:first-child {display:inline-block;width:4em;text-align:right;}
#detail table td span:last-child {display:inline-block;width:4em;text-align:left;}
#detail table#materials tr:first-child th {font-size:86%;font-weight:bold;text-align:center;}
#detail table tr th:first-child {width:70px;}

#detail table#nutritional th, #detail table#nutritional td {font-size:73%;}
#detail table#nutritional td {text-align:center;}

/*コンテナ*/
#wrapper {min-width:1100px;}

section .inner, #contents .inner {
    margin: 0 auto;
    width: auto;
}

	
/*ヘッダ*/
#in_header {
	background:url(../img/mvis.jpg) no-repeat center top #2E0000;
	height:1066px;
	text-align:center;
	}
#in_header .constBox {
	position:relative;
	}
#in_header #mark {
	position:absolute;
	left:4%;
	top:4.9%;
	width:31.8%;
	max-width:350px;
	}
#in_header #ctch {
	position:absolute;
	right:0;
	top:1.4%;
	width:36%;
	max-width:396px;
	}
#in_header .txtArea {
	position:absolute;
	bottom:210px;
	font-size:146%;
	color:#fff;
	width:100%;
	}
#in_header .txtArea p {margin-top:40px;}

/*
* タイプ紹介
*/
#typeArea {
	padding:120px 0;
	text-align:center;
	position:relative;
	}
#typeArea figure {padding-bottom:0.5em;position:absolute;top:-140px;}

/*
* セクション
*/
section.sec {
	position:relative;
	}
section.sec > .constBox {padding-top:50px;padding-bottom:100px;}
section.sec .tit {text-align:center;position:absolute;top:-43px;width:100%;left:0;}
section.sec .btnArea {padding-top:20px;}
	
/*ラインナップ*/
#lineup {background:#E0CC85;text-align:center;}

#lineup li {
	font-size:95%;
	text-align:left;
	border-radius:8px;
	background:#fff;
	width:336px;
	padding:10px;
	display:inline-block;
	margin-left:11px;
	margin-bottom:1em;
	}
#lineup li:nth-of-type(3n-2) {margin-left:0;}
#lineup li > .inner {
	border-radius:8px;
	padding:1em 10px;
	border:5px solid #FF5C00;
	}
#lineup li:nth-of-type(2) > .inner {border-color:#008CE4;}
#lineup li:nth-of-type(3) > .inner {border-color:#61CE38;}
#lineup li:nth-of-type(4) > .inner {border-color:#FF54AA;}
#lineup li:nth-of-type(5) > .inner {border-color:#FF3C4D;}
#lineup li > .inner h3 {
	text-align:center;
	}
#lineup li > .inner p {padding:1em 0;}
#lineup li > .inner figure {text-align:center;}
#lineup li > .inner table {margin-top:1em;width:100%;}
#lineup li > .inner table * {vertical-align:baseline;}
#lineup li > .inner table th {width:45%;text-align:right;}
#lineup li > .inner table th span.num {font-size:140%;}
#lineup li > .inner table th span.fontYuGothic {font-weight:bold;}

/*ギフト*/
#gift .tableLayout {text-align:center;}
#gift .giftdata {
	background:#fff;
	border-radius:8px;
	padding:10px;
	display:inline-block;
	width:365px;
	margin-top:2em;
	}
#gift .giftdata > .inner {
	border:5px solid #00007B;
	border-radius:8px;
	padding:5px;
	}
#gift .giftdata > .inner h3 {color:#00007B;font-size:160%;}
#gift .giftdata > .inner p {font-size:86%;}
#gift .giftdata > .inner p span {font-size:146%;}

#gift .constBox {position:relative;padding-top:80px;}
#gift #giftboxArea {padding:0 40px;}
#gift #fukidashi {
	position:absolute;
	top:-50px;
	left:0;
	}


/*ショップ*/
#shop {background:#000077;padding:30px 0;}
#shop .tit {position:static;margin-bottom:2em;}
#shop .constBox {padding-bottom:50px;}
#shop .constBox > .inner {
	padding:30px 55px;
	background:#fff;
	border-radius:8px;
	}
#shop .constBox .tableLayout figcaption {
	font-size:80%;
	margin-top:0.5em;
	line-height:1.4em;
	}
#shop .constBox .tableLayout > div {
	width:320px;
	padding-left:1em;
	text-align:center;
	font-size:93%;
	}
#shop .constBox .tableLayout > div figure {margin-bottom:1em;}
#shop .constBox .tableLayout > div .btn {margin-top:2em;}

@media (max-width:640px){
.pc {display:none;}
.sp {display:block;}

.fit_img {
	width: 100%;
	height: auto;
}

body {font-size:14px;}

.btn {font-size:90%;background-size:0.4em auto;}

#pagetopButton {width:30px;height:30px;}

/*詳細情報テーブル*/
#detail {width:96%;padding-left:2%;padding-right:2%;}

/*ボックス*/
.constBox {width:auto;padding-left:4%;padding-right:4%;}

/*コンテナ*/
#wrapper {width:auto;min-width:0;}

/*ヘッダ*/
#in_header {
	background-size:cover;
	height:auto;
	padding-bottom:30px;
	}
#in_header #mark {top:1.4%;width:130px;}
#in_header #ctch {top:5%;right:4%;width:150px;}
#in_header .txtArea {position:static;padding-top:160px;font-size:125%;}

/*
* タイプ紹介
*/
#typeArea {padding:30px 0 80px;}
#typeArea figure {position:static;}
#typeArea .txtArea {
	font-size:120%;
	color:#fff;
	}
#typeArea .txtArea p {margin-top:0.5em;}
#typeArea .txtArea p span {
	font-size:100%;
	font-weight:bold;
	}

/*
* セクション
*/
section.sec .tit {padding-left:2%;padding-right:2%;width:96%;top:-30px;}
section.sec > .constBox {padding-bottom:80px;}

/*ラインナップ*/
#lineup {background:#E0CC85;text-align:center;}

#lineup li {
	display:block;
	float:left;
	margin-left:0;
	width:45%;
	padding-right:2%;
	padding-left:2%;
	}
#lineup li:nth-of-type(2n) {
	float:right;
	}
#lineup li:nth-of-type(3n-2) {margin-left:0;}
#lineup li > .inner table {display:block;}
#lineup li > .inner table td, #lineup li > .inner table th, #lineup li > .inner table tbody, #lineup li > .inner table tr {display:block;text-align:center;width:auto;}

/*ギフト*/
#gift #giftboxArea {padding:0;}
#gift .giftdata {width:auto;}
#gift .giftdata > .inner h3 {font-size:110%;line-height:1.2em;margin-top:0.3em;}
#gift .tableLayout > li:first-child {padding-right:1%;}
#gift .tableLayout > li:last-child {padding-left:1%;}
#gift #fukidashi {width:90px;height:90px;top:-30px;left:10%;}

/*ショップ*/
#shop {padding:0;}
#shop .constBox .tableLayout, #shop .constBox .tableLayout > * {display:block;width:auto !important;}
#shop .constBox .tableLayout figure {text-align:center;}
#shop .constBox .tableLayout figure figcaption {text-align:left;}
#shop .constBox .tableLayout > div {padding:0;margin-top:2em;}
#shop .constBox .tableLayout > div figure img {max-width:50%;}
#shop .constBox > .inner {padding:1em 2%;}
#shop .constBox .tit {padding:0;width:100%;}
#shop .constBox {padding-top:30px;}
}