@charset "utf-8";
/* ===================================================================
	style.css
=================================================================== */
/*----------------------------------------------------
	メインビジュアル 
----------------------------------------------------*/
.main_area h1 {
	text-align: center;
}
.main_area .set_area {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	max-width: 1060px;
	margin: -4% auto 0;	
}
.main_area .set_box {
	margin-top: -3%;
	color: #ffffff;
	font-weight: bold;
}
.main_area .set_box .set1 {
	background: url(../img/main_icon_01.png) -4px 10px / auto no-repeat;
	margin: 6% 0 0;
	padding: 0 0 0 32px;
	font-size: clamp(14px, 4vw, 46px);
	line-height: 1;
	text-shadow: 5px 4px 6px rgba(0, 0, 0, 0.4);	
}
.main_area .set_box .set1 span {
	font-size: clamp(13px, 3vw, 35px);
}
.main_area .set_box .total {
	margin-top: -3%;
	font-size: clamp(15px, 6vw, 68px);
	background: linear-gradient(0deg, rgba(240,206,138,1) 0%, rgba(255,232,186,1) 35%, rgba(240,205,136,1) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;	
}
.main_area .set_box .total span {
	margin-right: 7px;
	font-size: clamp(14px, 4vw, 44px);
}
.main_area .set_area .price {
	margin: 0 -20px 0 0;
}
.set_omake {
	margin: 1% 2% 3%;
	text-align: center;
}
@media screen and (max-width:1200px) {
.main_area .set_area .price {
	max-width: 55%;
	margin: 0 0 0 0;
}
.main_area .set_box {
	margin: 0 0 0 2%;
}
}
@media screen and (max-width:768px) {
.main_area .set_box .set1 {
	background: url(../img/main_icon_01.png) 0px 4px / 15px no-repeat;
	padding: 0 0 0 18px;
}
}
/*	見出し・メイン画像・説明文
------------------------------------ */
/* titleBox1 */
/*----------------------------------------------------
	セット内容
----------------------------------------------------*/
.irregular_area {
	margin: 0 0 -3%;
	text-align: center;
}
.irregular_area p {
	max-width: 1050px;
	margin: 0 auto;
}
.irregular_area .text1 {
	margin-bottom: 1%;
	color: #e0d176;
	font-size: clamp(13px, 5.6vw, 62px);
	letter-spacing: -1px;
	font-weight: bold;
}
/*----------------------------------------------------
	セット内容
----------------------------------------------------*/
.matome_omake {
	max-width: 1050px;
	background: #fef9d9;
	border: solid 6px #d9a832;
	border-radius: 12px;
	margin: 3% auto;
	padding: 1% 0 2%;
	color: #460102;	
}
.matome_omake h3 img {
	width: 100%;
	border-radius: 12px 12px 0 0;
}
.matome_image {
	position: relative;
}
.matome_image dl {
	display: flex;
	flex-wrap: nowrap;
	width: 600px;
	position: absolute;
	bottom: 44px;
	right: 20px;
	border: solid 5px #b71000;
	border-radius: 8px;
	font-size: clamp(18px, 3.4vw, 32px);
	font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
	font-weight: bold;
	letter-spacing: -1px;
}
.matome_image dl dt {
	background: #b71000;
	color: #ffffff;
	width: 20%;
	text-align: center;
}
.matome_image dl dd {
	background: #ffffff;
	border-radius: 0 8px 8px 0;
	width: 80%;
}
.matome_buy .looks {
	text-align: center;
	margin: 2% 3% 0;
}
.set_contens {
	position: relative;
	padding: 2% 2% 0;
}
.set_contens ul {
	max-width: 60%;
	margin: 0 0 0;
	font-weight: bold;
	font-size: clamp(13px, 3vw, 36px);
	font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
	line-height: 1.5;
}
.set_contens figure {
	width: 38%;
	position: absolute;
	right: 3%;
	bottom: 0;
}
.matome_omake .capacity {
	margin: 0 2% 0;
	font-size: clamp(16px, 7vw, 84px);
	text-align: center;
	font-weight: bold;
	position: relative;	
	z-index: 2;
}
.matome_omake .capacity span {
	border-bottom: solid 5px #460102;
	padding: 0 0 2%;
}
.matome_omake .value {
	margin: -10px 1% 0;
	position: relative;	
	z-index: 1;
}
.matome_omake .omake_atten {
	margin: 1% 3% 1%;
	text-align: center;
}
.matome_omake .omake_atten2 {
	margin: 1% 0 0%;
	color: #b71000;
	font-size: clamp(13px, 3.6vw, 40px);
	font-weight: bold;
	text-align: center;
	line-height: 1.3;
}
@media screen and (max-width:1100px) {
.matome_omake {
	margin: 3% 2%;
}
}
@media screen and (max-width:768px) {
.matome_omake {
	border: solid 3px #d9a832;
}
.matome_omake .capacity span {
	border-bottom: solid 2px #460102;
}
}
/*----------------------------------------------------
	カートボタン
----------------------------------------------------*/
.cartbtn_area {
	background: url(../img/background_02.jpg) left top repeat;
	text-align: center;
	padding: 3% 3%;
}
.cartbtn_area .text1 {
	font-size: clamp(18px, 5vw, 58px);
	font-weight: bold;
}
.cartbtn_area .text2 {
	color: #b90c03;
	font-size: clamp(15px, 4.8vw, 52px);
	font-weight: bold;
}
.cartbtn_area .btn {
	max-width: 960px;
	margin: auto;
}
.cartbtn_area2 {
	text-align: center;
	padding: 0 3% 3%;
}
.cartbtn_area2 .text1 {	
	color: #e0d176;
	font-size: clamp(14px, 6vw, 64px);
	font-weight: bold;
}
.cartbtn_area2 .btn {
	max-width: 1052px;
	margin: 0 auto 3%;
}
.cartbtn_area2 .attention  {
	max-width: 1040px;
	margin: 0 auto 3%;
}

/*----------------------------------------------------
	食べたことがありますか？
----------------------------------------------------*/
.hope_area h2 {
	background: linear-gradient(0deg, rgba(240,206,138,1) 0%, rgba(255,232,186,1) 35%, rgba(240,205,136,1) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;	
	padding: 2% 3% 2%;
	font-size: clamp(15px, 4.5vw, 50px);
	text-align: center;
	line-height: 1.3;
	font-weight: bold;
}
.hope_area .hope_block {
	background: url(../img/hope_back_01.jpg) center top / cover no-repeat;
	height: 850px;
	padding: 1% 3% 0;
}
.hope_block ul {
	max-width: 1000px;
	margin: 0 auto;
}
.hope_block ul li {
	position: relative;
	max-width: 43%;
	background: url(../img/background_02.jpg) left top repeat;
	box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35);
	border-radius: 6px;
	margin: 3% 0;
	padding: 2%;
	font-size: clamp(15px, 3.4vw, 38px);
	text-align: center;
	line-height: 1.3;
	font-weight: bold;
	letter-spacing: -0.7px;
}
.hope_block ul li::before {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -15px;
	border: 15px solid transparent;
	border-top: 15px solid #f5f5f5;
}
.hope_block ul li span {
	font-size: clamp(15px, 4vw, 42px);
	color: #b10000;
	margin-right: 2px;
}
.hope_block ul li:nth-child(even) {
	max-width: 63%;
	margin-left: auto;
}
@media screen and (max-width:768px) {
.hope_area .hope_block {
	background: url(../img/hope_back_01.jpg) center top / cover no-repeat;
	height: 560px;
	padding: 1% 3% 3%;
}
}
/*----------------------------------------------------
	栄養素
----------------------------------------------------*/
.eiyou_area h3 {
	padding: 2% 3% 2%;
	color: #ffffff;
	font-size: clamp(15px, 4.5vw, 50px);
	text-align: center;
	line-height: 1.3;
	font-weight: bold;
}
.eiyou_area .eiyou_block {
	background-image: url(../img/eiyou_back_01.jpg), url(../img/eiyou_back_01.jpg), url(../img/background_03.jpg);
	background-size: 36% , 36% , auto;
	background-position: -20% 10% , 120% 90% , left top;
	background-repeat: no-repeat , no-repeat , repeat;
	padding: 4% 3% 4%;
	text-align: center;
}
.eiyou_block h4 {
	max-width: 950px;
	margin: 0 auto;
	font-size: clamp(17px, 4.5vw, 53px);
	color: #870e02;
	font-weight: bold;
}
.eiyou_block h4::before,
.eiyou_block h4::after {
	content: "";
	display: block;
	background: url(../img/eiyou_line_01.jpg) center top / 100% auto no-repeat;
	width: 100%;
	height: 7px;
}
.eiyou_block .text1 {
	margin: 2% auto 3%;
	font-size: clamp(13px, 4.5vw, 48px);
	line-height: 1.3;
	font-weight: bold;
}
.eiyou_block .text2 {
	margin: 3% auto 2%;
	font-size: clamp(14px, 4.5vw, 48px);
	line-height: 1.4;
	font-weight: bold;
}
.eiyou_block .text2 span {
	background: linear-gradient(transparent 60%, #f2d166 30%);
	padding: 2px;
}
.eiyou_block .text3 {
	font-size: clamp(13px, 3.4vw, 38px);
	line-height: 1.3;
	font-weight: bold;
}
/*----------------------------------------------------
	お試しセット
----------------------------------------------------*/
.trial_area {
	text-align: center;
}
.trial_area .btn {
	padding: 0 3% 3%;
}
/*----------------------------------------------------
	こだわり
----------------------------------------------------*/
.kodawari_area {
	background-image: url(../img/kodawari_back_01.jpg), url(../img/kodawari_back_02.jpg), url(../img/background_03.jpg);
	background-size: auto , auto , auto;
	background-position: left top , right top , left top;
	background-repeat: repeat-y , repeat-y , repeat;
	padding: 4% 3% 4%;
	text-align: center;
}
.kodawari_block {
	background: url(../img/kodawari_back_03.jpg) left top repeat;
	border: solid 6px #af8e4b;
	max-width: 1000px;
	margin: 3% auto;
	padding: 3% 2%;
}
.kodawari_block .title1 {
	margin: -8% auto 2%;
	max-width: 60%;
	position: relative;
	z-index: 1;
}
.kodawari_block .kodawari_frame {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
}
.kodawari_frame .text_block {
	width: 52%;
	text-align: left;
	position: relative;
	z-index: 1;
}
.kodawari_frame .text_block h3 {
	margin: 0 0 2%;
	font-size: clamp(16px, 4.8vw, 52px);
	line-height: 1.2;
}
.kodawari_frame .text_block .text1 {
	font-size: clamp(14px, 2.6vw, 32px);
	line-height: 1.5;
}
.kodawari_frame figure {
	width: 44%;
	z-index: 0;
}
#kodawari2 {
	background-image: url(../img/kodawari_back_04.jpg) , url(../img/kodawari_back_03.jpg);
	background-size: 100% , auto;
	background-position: left bottom , left top;
	background-repeat: no-repeat , repeat;
}
.kodawari_block .text2 {
	margin: 4% 0 3%;
	font-size: clamp(16px, 2vw, 43px);
	line-height: 1.3;
}
.kodawari_block .safety_block {
	background: #8a6a34;
	padding: 3% 5%;
	color: #ffffff;
	text-align: left;
}
.kodawari_block .safety_block h4 {
	border-bottom: solid 1px #ffffff;
	margin: 1% 0 3%;
	padding-bottom: 3%;
	font-size: clamp(18px, 4.6vw, 48px);
	line-height: 1.3;
}
.kodawari_block .safety_block h4 span {
	display: block;
	font-size: clamp(15px, 2.6vw, 30px);
}
.kodawari_block .safety_block .text3 {
	font-size: clamp(13px, 2.6vw, 28px);
	line-height: 1.7;
}
@media screen and (max-width:768px) {
.kodawari_block {
	border: solid 3px #af8e4b;
	padding: 3% 3%;
}
}
/*----------------------------------------------------
	鮮馬刺しとは
----------------------------------------------------*/
.senbasashi_area {
	background: url(../img/senbasashi_back.jpg) center bottom / cover no-repeat;
	border-top: solid 20px #8d6b0a;
	border-bottom: solid 20px #8d6b0a;
	padding: 3% 1% 0;
	text-align: center;
	height: 1300px;
}
.senbasashi_area h2 {
	max-width: 55%;
	margin: 0 auto 1%;
}
.senbasashi_area p {
	color: #ffffff;
	font-size: clamp(13px, 2vw, 38px);
	text-shadow: 10px 10px 10px rgba(0, 0, 0, 0.2);
}
@media screen and (max-width:768px) {
.senbasashi_area {
	border-top: solid 8px #8d6b0a;
	border-bottom: solid 8px #8d6b0a;
	padding: 3% 1% 0;
	height: 540px;
}
.senbasashi_area p {
	text-shadow: 10px 10px 10px rgba(0, 0, 0, 0.8);
}
}
@media screen and (max-width:540px) {
.senbasashi_area {
	height: 400px;
}
}
/*----------------------------------------------------
	お客様の声
----------------------------------------------------*/
.voice_area {
	background: url(../img/voice_back_01.jpg) left top repeat;
	padding: 0 0 3%;
}
.voice_area h4 {
	background: url(../img/voice_back_03.jpg) center top / auto repeat-x;
	padding: 3% 1% 0;
	height: 280px;
	color: #ffffff;
	font-size: clamp(15px, 7.7vw, 70px);
	font-weight: bold;
	text-align: center;
	line-height: 1.3;
	text-shadow: 5px 6px 6px rgba(155, 6, 0, 0.4);	
}
.voice_block {
	background: url(../img/voice_back_02.jpg) center top / 100% auto no-repeat;
	padding: 0 0 1%;
}
.voice_area ul {
	max-width: 1020px;
	margin: auto;
}
.voice_area ul li {
	margin: 0 3% 3%;
	text-align: center;
}
.voice_area ul li img {
	width: 100%;
	box-shadow: 0px 15px 25px 0px rgba(0, 0, 0, 0.15);
}
@media screen and (max-width:1000px) {
.voice_area h4 {
	background: url(../img/voice_back_03.jpg) center center / auto 100% repeat-x;
	height: auto;
	padding: 3% 1% 3%;
	font-size: clamp(15px, 6vw, 56px);
}
}
/*----------------------------------------------------
	切り落としの良さ
----------------------------------------------------*/
.cut_area {
	background: url(../img/background_02.jpg) left top repeat;
}
.cut_area h4 {
	background: url(../img/cut_back_01.jpg) center top / auto 100% repeat-x;
	padding: 5px 0;
	color: #ffffff;
	font-size: clamp(17px, 5.8vw, 60px);
	font-weight: bold;
	text-align: center;
}
.cut_block {
	background: url(../img/cut_back_02.jpg) center top / 100% auto no-repeat;
	padding: 3% 0 1%;
}
.cut_area ul {
	max-width: 1020px;
	margin: auto;
}
.cut_area ul li {
	background: url(../img/cut_icon_01.jpg) 3% center / 7% auto no-repeat #fff1c8;
	border: solid 5px #cc9e6a;
	margin: 0 3% 3%;
	padding: 1% 1% 1% 10%;
	font-size: clamp(17px, 4.2vw, 47px);
	font-weight: bold;
}
.cut_area ul li span {
	margin-right: 2px;
	color: #a9060b;
}
@media screen and (max-width:768px) {
.cut_area ul li {
	border: solid 3px #cc9e6a;
}
}
/*----------------------------------------------------
	解凍のポイント
----------------------------------------------------*/
.thawing_area {
	background: url(../img/thawing_back_01.jpg) left top repeat;
	padding: 2%  0;
}
.thawing_block {
	max-width: 960px;
	background: url(../img/thawing_back_02.jpg) right bottom / 48% auto no-repeat #fff1d4;
	margin: auto;
	padding: 0 0 7%;
}
.thawing_area h4 {
	padding: 2% 0;
	color: #a9060b;
	font-size: clamp(17px, 5.8vw, 60px);
	font-weight: bold;
	text-align: center;
}
.thawing_frame {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;	
	padding: 0 4% 0;
}
.thawing_frame ol {
	padding: 0 1% 0 5%;
	width: 54%;
}
.thawing_frame ol li {
	margin: 0 3% 5% 0;
	font-size: clamp(13px, 3.2vw, 36px);
	font-weight: bold;
	line-height: 1.4;
}
.thawing_frame ol li::marker {
	color: #a9060b;
	font-size: clamp(13px, 3.8vw, 42px);
}
.thawing_frame ol li .attention1 {
	margin: 2% 0 0;
	font-size: clamp(12px, 2.6vw, 30px);
}
.thawing_frame figure {
	width: 46%;
	max-width: 420px;
}
.thawing_frame figure img {
	width: 100%;
	box-shadow: 0px 15px 15px 0px rgba(0, 0, 0, 0.15);
}
@media screen and (max-width:1000px) {
.thawing_area {
	padding: 0;
}
.thawing_block {
	background: #fff1d4;
	padding: 0 0 3%;
}
}


/*----------------------------------------------------
	仮スタイル
----------------------------------------------------*/
.temp_area {
	text-align: center;
}
.temp_area2 {
	text-align: center;
	padding: 0 3% 3%;
}
.temp_area2 p {
	margin: 1% 0;
}
.temp_area3 {
	text-align: center;
	margin-bottom: -3%;
}

 
/*----------------------------------------------------
	店舗一覧
----------------------------------------------------*/
#shoplist {
	background: url(../img/shoplist_back.jpg) center top / auto repeat-y;
	padding: 2% 1% 5%;
}
#shoplist h2 {
	margin: 3% 0 3%;
	font-size: clamp(15px, 4vw, 46px);
	line-height: 1.3;
	text-align: center;
}
#shoplist h2::before {
	display: block;
	content: "SUGANOYA";
	color: #daaa46;
	font-size: clamp(18px, 4.6vw, 48px);
	font-weight: normal;
	letter-spacing: 1px;
}
#shoplist .shop_kind {
	position: relative;
	max-width: 920px;
	border-bottom: solid 2px #060606;
	margin: 3% auto 1%;
	padding: 0 0 8px 20px;
	font-size: clamp(15px, 3.8vw, 36px);
	font-weight: bold;
}
#shoplist .shop_kind::before {
	display: block;
	content: "";
	width: 6px;
	height: 70%;
	background: #060606;
	position: absolute;
	left: 0;
	bottom: 13px;
}
#shoplist ul {
	display: flex;
	flex-wrap: wrap;
	max-width: 980px;
	margin: 0 auto;
}
#shoplist ul li {
	width: 50%;
	margin: 4% 0 0;
	padding: 0 3%;
}
#shoplist ul li figure {
	width: 100%;
	margin: 0 0 4% -8px;
}
#shoplist ul li h3 {
	color: #83620e;
	font-size: clamp(15px, 3.4vw, 30px);
	font-weight: bold;
	line-height: 1.3;
}
#shoplist ul li h3 span {
	font-size: clamp(13px, 2.4vw, 26px);
}
#shoplist ul li .tel {
	margin: 1% 0 1%;
	font-size: clamp(13px, 3vw, 28px);
	font-weight: bold;
}
#shoplist ul li .address {
	font-size: clamp(13px, 1.8vw, 19px);
	line-height: 1.5;
}
@media screen and (max-width:768px) {
#shoplist ul li {
	width: 100%;
	margin: 4% 0 0;
	padding: 0 3%;
}
#shoplist .shop_kind {
	margin: 5% 2% 1%;
	padding: 0 0 8px 14px;	
}
#shoplist .shop_kind::before {
	width: 4px;
	height: 70%;
	bottom: 10px;
}
}