@charset "utf-8";
/* ===================================================
	Base CSS
====================================================== */
body {
	min-width: 1100px; min-height: 100vh; background: #fff; color: #000;
	font-size: 16px; font-weight: bold; line-height: 1.8;
	font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3","Hiragino Kaku GothicPro","Osaka","Verdana","Helvetica","Arial","ＭＳ Ｐゴシック", sans-serif;
	-webkit-text-size-adjust: 100%; position: relative;

	font-feature-settings: "palt"; letter-spacing: 0.08em;
	/* font-feature-settings: "palt"; こちらの指定をすると文字が詰まりすぎてしまう場合があるので、letter-spaceingの記述が必要です。デザイン上不要であれば削除してください。
	縦書きテキストだと崩れる可能性があります。縦書きの項目は下記のようにしてください。
	.v_rl{ writing-mode: vertical-rl; font-feature-settings: "palt" 0;}*/
}


input,
select,
textarea { font-size: 13px;}

div { box-sizing: border-box;}

a { color: #555; text-decoration: none; transition: all 0.5s;}
a:hover { color: #555; text-decoration: none;}
a:hover img { opacity: 0.75;}

#lineup-font-size-sampler { bottom: 0; left: 0;}
.fixed { width: 100%; min-width: 1100px; position: fixed; top:0; left: 0; z-index: 999;}
iframe[name="google_conversion_frame"] { position: absolute; bottom: 0; left: 0;}

.ofi { object-fit: cover; width: 100%; height: 100%;}
.view_sp { display: none;}

a.buy_btn { display: table; background-color: #d75a3e; color: #fff; font-size: 15px; border-radius: 25px; padding: 12px 0; width: 200px; text-align: center;}
a.buy_btn span { padding: 2px 0 2px 30px; background: url(../../img/icon_cart.svg)no-repeat left center;}

@media (hover: hover) {
	a.buy_btn:hover { background-color: #ce4020;}
}

@media screen and (max-width: 600px) {
	body,
	input,
	select,
	textarea { font-size: 14px;}

	body { min-width: 0;}
	.view_sp { display: block;}
	.view_pc { display: none !important;}

	a.buy_btn { font-size: 13px;}
}


/* ---------------------------------------------------
	top
------------------------------------------------------ */
.top_fixed { position:fixed; top: 15px; right: 15px; z-index:90; opacity: 0;}
#main_img * { min-width: 0; min-height: 0;}
#main_img { display: flex; background-color: #f6f0e1; align-items: center;}
#main_img .main_slide { width: 66%; margin: 0; line-height: 0; font-size: 0;}
#main_img .main_slide .slick-slide img { width: 100%;}
#main_img .slick-dots { margin: 0 0 0 20px; bottom: 25px; text-align: left;}
#main_img .slick-dots li,
#main_img .slick-dots li button { width: 50px; height: 5px;}
#main_img .slick-dots li button:before { content: ""; background-color: #fff; width: 50px; height: 5px; opacity: 1;}
#main_img .slick-dots li.slick-active button:before { opacity: 1; background-color: #d75a3e;}
#main_img #main_txt { width: 34%; text-align: center;}
#main_img #main_txt >span { display: table; margin: 0 auto; background-color: #fff; color: #d75a3e; padding: 6px 22px; font-size: 18px;}
#main_img h1 { font-size: 50px; font-weight: bold;}
#main_img h1 span { display: block; font-size: 70px;}
#main_img [data-ruby] { position: relative;}
#main_img [data-ruby]::before { content: attr(data-ruby); position: absolute; bottom: -.5em; left: 0; right: 0; margin: auto; font-size: 13px;}
#main_img h1+p { padding: 40px 0; color: #a27939; font-size: 18px; line-height: 1.8;}
#main_img h1+p span { display: block; font-size: 24px;}
#main_img a { margin: 0 auto;}

@media screen and (max-width: 600px) {
	a.buy_btn.top_fixed { display: none;}
	#main_img { display: block;}
	#main_img h1 { font-size: 30px;}
	#main_img h1 span { display: inline-block; font-size: 44px;}
	#main_img [data-ruby]::before { bottom: -.3em; font-size: 11px;}
	#main_img .main_slide { width: 100%;}
	#main_img .slick-dots { margin: 0; text-align: center;}
	#main_img #main_txt { width: 100%; padding: 60px 0;}
	#main_img #main_txt >span { font-size: 13px;}
	#main_img h1+p { padding: 20px 0; font-size: 14px;}
	#main_img h1+p span { font-size: 20px;}
}


/* ---------------------------------------------------
	Base Layout
------------------------------------------------------ */
/* コンテンツ幅 */
.inner_lg {
	width: 1400px;
	max-width: 96%;
	margin: 0 auto;
}
.inner_md {
	width: 1200px;
	max-width: 94%;
	margin: 0 auto;
}
.inner_sm {
	width: 1000px;
	max-width: 92%;
	margin: 0 auto;
}

@media screen and (max-width: 600px) {
	.inner_lg,
	.inner_md,
	.inner_sm {
		max-width: 90%;
	}
}



/* ---------------------------------------------------
 section
------------------------------------------------------ */
#sec1 { padding: 140px 0 170px;}
#sec1 .inner_md { display: flex; justify-content: space-between;}
#sec1 h2 { color: #a27939; font-size: 30px; font-weight: bold; line-height: 1.8; text-decoration: underline; text-underline-offset: 15px; text-decoration-thickness: 2px;}
#sec1 h2 span { display: table; /* border-bottom: 2px solid #a27939;*/}
#sec1 h2+p { padding: 50px 0 0;}
#sec1_1 { padding: 0 0 130px;}
#sec1_1 >div { width: 52%;}
#sec1_1 img { width: 39%;}
#sec1_2 { flex-direction: row-reverse;}
#sec1_2 >div { width: 33%;}
#sec1_2 .sec_img { width: 60%;}
#sec1_2 .sec_img p { margin: 15px 0 0; font-size: 14px; line-height: 1.5; color: #8d8d8d; font-weight: normal;}

#sec2 { padding: 160px 0 140px; background-color: #f7f2e4;}
#sec2 h2 { margin: 0 0 30px; text-align: center; font-size: 30px; color: #a27939; font-weight: bold;}
#sec2 h2 span { position: relative; display: table; margin: 0 auto 20px; font-size: 16px;}
#sec2 h2 span::after { position: absolute; bottom: 0; display: block; content: ""; width: 100%; height: 1px; background: #a27939;}
#sec2 h2 span::before { position: absolute; bottom: -4px; display: block; content: ""; width: 100%; height: 1px; background: #a27939;}
#sec2 ul { width: 900px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between;}
#sec2 li { display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #fff; width: 260px; height: 260px; border-radius: 50%; border: 1px solid #d75a3e; box-shadow: 8px 8px 0px 0px #d75a3e;}
#sec2 li p { margin: 10px 0 0; text-align: center; font-weight: bold; color: #a27939; font-size: 18px;}
#sec2 li:nth-of-type(-n+3) { margin: 0 0 40px;}

#sec3 { padding: 130px 0 0;}
#sec3 h2 { margin: 0 0 30px; text-align: center; font-size: 30px; color: #a27939; font-weight: bold;}
#sec3 h2 span { position: relative; display: table; margin: 0 auto 20px; font-size: 16px;}
#sec3 h2 span::after { position: absolute; bottom: 0; display: block; content: ""; width: 100%; height: 1px; background: #a27939;}
#sec3 h2 span::before { position: absolute; bottom: -4px; display: block; content: ""; width: 100%; height: 1px; background: #a27939;}
#sec3 .inner_md { display: flex; align-items: flex-start; justify-content: space-between; margin: 0 auto 40px; padding: 50px; background-color: #f5f5f5; border-radius: 20px;}
#sec3 .inner_md img { width: 76px;}
#sec3 .inner_md dl { width: calc(100% - 100px);}
#sec3 .inner_md dt { margin: 0 0 20px; font-size: 22px; color: #a27939;}
#sec3 .inner_md:last-of-type { margin: 0 auto 130px;}

#sec4 { padding: 110px 0 100px; background-color: #f7f2e4;}
#sec4 h2 { margin: 0 0 30px; text-align: center; font-size: 30px; color: #a27939; font-weight: bold;}
#sec4 h2 span { position: relative; display: table; margin: 0 auto 20px; font-size: 16px;}
#sec4 h2 span::after { position: absolute; bottom: 0; display: block; content: ""; width: 100%; height: 1px; background: #a27939;}
#sec4 h2 span::before { position: absolute; bottom: -4px; display: block; content: ""; width: 100%; height: 1px; background: #a27939;}

#sec4 >div { display: flex; justify-content: space-between; padding: 60px 6% 60px 4%; background-color: #fff; border-radius: 20px;}
#sec4 >div img { width: 47%;}
#sec4 >div .sec_txt { width: 44%;}
#sec4 >div .sec_txt h3 { padding: 0 0 30px; font-size: 30px; color: #a27939; font-weight: bold;}
#sec4 >div .sec_txt h3 span { font-size: 13px;}
#sec4 >div .sec_txt dl { margin: 0 0 25px;}
#sec4 >div .sec_txt dd { font-size: 14px; font-weight: normal;}
#sec4 >div .sec_txt .price { padding: 20px 0; border-top: 1px solid #ddd; color: #a27939;}
#sec4 >div .sec_txt .price span { font-size: 26px;}
#sec4 >div+h3 { padding: 90px 0 30px; font-size: 26px; text-align: center; color: #a27939; font-weight: bold;}
#sec4 >ul { display: flex; justify-content: center;}
#sec4 >ul li { width: calc(100% / 4); border-left: 1px dotted #a27939; text-align: center; padding: 30px 0 0;}
#sec4 >ul li:last-of-type { border-right: 1px dotted #a27939;}
#sec4 >ul li p:not(.price) > span { display: block; font-weight: normal; font-size: 14px;}
#sec4 >ul li p.price { color: #a27939;}
#sec4 >ul li p.price span { font-size: 26px;}
#sec4 >ul li a { margin: 20px auto 40px; padding: 7px 0;}
#sec4 >ul+p { margin: 30px 0 0; font-size: 14px; line-height: 1.5; color: #8d8d8d; font-weight: normal; text-align: center;}

@media screen and (max-width: 600px) {

	#sec1 { padding: 50px 0;}
	#sec1 .inner_md { display: block;}
	#sec1 h2 { font-size: 20px; text-underline-offset: 10px;}
	#sec1 h2+p { padding: 30px 0;}
	#sec1_1 >div { width: 100%;}
	#sec1_1 { padding: 0 0 50px;}
	#sec1_1 img { width: 100%; height: 80vw;}
	#sec1_2 >div,#sec1_2 .sec_img { width: 100%;}

	#sec2 { padding: 50px 5%;}
	#sec2 h2 { font-size: 24px;}
	#sec2 h2 span { margin: 0 auto 5px;}
	#sec2 ul { width: 100%;}
	#sec2 ul li, #sec2 li:nth-of-type(-n+3) { margin: 0 auto 20px; padding: 20px 5%; box-sizing: border-box; width: 100%; height: inherit; border-radius: 20px; flex-direction: initial; justify-content: initial;}
	#sec2 li p { margin: 0 0 0 20px; font-size: 16px; text-align: left;}
	#sec2 li img { width: 40px;}

	#sec3 { padding: 50px 0 0;}
	#sec3 h2 { font-size: 24px;}
	#sec3 h2 span { margin: 0 auto 5px;}
	#sec3 .inner_md { padding: 30px 5%;}
	#sec3 .inner_md img { width: 50px;}
	#sec3 .inner_md dl { width: calc(100% - 70px);}
	#sec3 .inner_md dt { font-size: 18px; margin: 0 0 10px;}
	#sec3 .inner_md:last-of-type { margin: 0 auto 50px;}
	#sec3 >img { height: 60vw; object-position: 70% center;}
	
	#sec4 { padding: 50px 0;}
	#sec4 h2 { font-size: 24px;}
	#sec4 h2 span { margin: 0 auto 5px;}
	#sec4 >div { display: block; padding: 30px 5%;}
	#sec4 >div img { width: 100%;}
	#sec4 >div .sec_txt { width: 100%;}
	#sec4 >div .sec_txt h3 { padding: 10px 0 0; font-size: 28px;}
	#sec4 >div .sec_txt dl { margin: 0 0 10px;}
	#sec4 >div .sec_txt .price { text-align: center; font-size: 11px;}
	#sec4 >div .sec_txt .price span { font-size: 20px;}
	#sec4 >div .sec_txt .price+a { margin: 0 auto;}
	#sec4 >ul li p:not(.price) > span { font-size: 12px;}
	#sec4 >div+h3 { padding: 30px 0 20px; font-size: 22px;}
	#sec4 >ul { flex-wrap: wrap;}
	#sec4 >ul li { padding: 20px 4%; width: 50%; box-sizing: border-box;}
	#sec4 >ul li a { width: 100%; margin: 10px auto 0;}
	#sec4 >ul li:nth-of-type(2) { border-right: 1px dotted #a27939;}
	#sec4 >ul li:nth-of-type(1),
	#sec4 >ul li:nth-of-type(2) { margin: 0 0 20px;}
	#sec4 >ul li p.price { font-size: 11px;}
	#sec4 >ul li p.price span { font-size: 20px;}
}


@media screen and (max-width: 430px) {

	#sec2 ul { display: block;}

}

/* ---------------------------------------------------
	Footer
------------------------------------------------------ */
.f_link { position: relative; overflow: hidden; display: block; text-align: center; color: #fff; background-color: #000; transition: transform .5s, opacity .5s; padding: 100px 0;}
.f_link_txt { position: relative; z-index: 2; text-align: center;}
.f_link_txt p { margin: 0 0 10px; font-size: 30px; padding: 50px 0 0; background: url(../../img/icon_cart.svg)no-repeat top center; background-size: 30px;}
.f_link_txt p span { display: block; font-size: 15px;}
.f_link div:not(.f_link_txt) { position: absolute; top: 0; width: 100%; height: 100%; transition: transform .5s, opacity .5s;}
.f_link div:not(.f_link_txt) img { transition: transform .5s, opacity .5s;}

.f_line { display: flex; justify-content: center; align-items: center; padding: 70px 0; background: #f5f5f5;}
.f_line > div a { display: block; margin: 10px 0 0; padding: 6px 0; color: #fff; background-color: #39c053; border-radius: 5px; text-align: center; transition: all .5s;}
.f_line > dl { margin: 0 0 0 60px;}
.f_line > dl dt { margin: 0 0 15px; font-size: 26px; color: #a27939;}

footer { margin: 80px 0 100px; text-align: center;}
footer address { margin: 25px 0 50px;}
footer address+a { display: table; margin: 0 auto 25px; padding: 17px 0; width: 370px; border: 1px solid #d2d2d2; transition: transform .5s, opacity .5s;}
footer address+a span { display: block; background: url(../../img/f_icon.svg)no-repeat right 24px center; background-size: 18px;}
footer .copy { font-size: 13px; color: #8d8d8d;}

@media (hover: hover) {
	.f_link:hover { color: #fff;}
	.f_link:hover div:not(.f_link_txt) { transform: scale(1.05); opacity: .75;}
	.f_line > div a:hover { background-color: #2b913e;}
	footer address+a:hover { opacity: .75;}
}

@media screen and (max-width: 600px) {
	.f_link { padding: 50px 0;}
	.f_link_txt p { padding: 40px 0 0; font-size: 26px;}
	.f_line { padding: 50px 5%; justify-content: space-between;}
	.f_line > dl { margin: 0; width: calc(100% - 150px);}
	.f_line > dl dt { margin: 0 0 5px; font-size: 20px;}
	.f_line > div { width: 120px;}

	footer { width: 90%; margin: 50px auto;}
	footer >img { width: 188px;}
	footer address+a { width: 100%;}
}



/* ---------------------------------------------------
	clear
------------------------------------------------------ */


/* ---------------------------------------------------
	更新履歴
------------------------------------------------------

180228_〇〇_cssを更新したらここに更新履歴を追加していきます。多くなったら上の方は削除。
180205_kamiguchi_更新履歴コメントひな形追加
200828_akimoto_IEで游ゴシック体を使用すると謎の余白ができるバグがあるため、IEでのみfont-familyを変更する記述を追記
201029_maehata_bodyタグにfont-feature-settings: "palt";追加
201223_akimito_下記内容の修正
　・bodyのdisplay:flex;の削除。
　・iPhoneセーフエリアの対応記述。
　・object-fitのIE対応の記述およびjs追加。

------------------------------------------------------ */