@charset "UTF-8";

:root {
  --color-main: #a10129;
}

/* ----------------------------------
LP レイアウト
---------------------------------- */
.pane-main { margin: 0;}
.block-event-page--goods { display: none;}
html[data-browse-mode="P"] .pane-left-menu { display: none;}
html[data-browse-mode="P"] .pane-right-menu { display: none;}
html[data-browse-mode="P"] .page-event .pane-contents .container { width: 100%; margin: 0; padding: 0; min-width: unset; max-width: unset;}
html[data-browse-mode="P"] .page-event .pane-contents .container .pane-main { width: 100%; margin: 0;}
html[data-browse-mode="P"] #header.pane-header { margin: 0;}

.event_lp {padding: 0;background: #fdedf2;}
.event_lp img { vertical-align: bottom;}
.event_lp .contents-wrapper { padding: 33px 0 50px; position: relative;}
.event_lp .contents-wrapper section { position: relative; z-index: 2;}

@media (min-width: 999px) {
	.event_lp .for-sp { display: none !important;}
}
@media (max-width: 1000px) {
	.event_lp .for-pc { display: none !important;}
	.event_lp .contents-wrapper { padding: 25px 0 50px;}
}

/* ----------------------------------
メイン
---------------------------------- */
#sec_main h1 { padding: 0; margin: 0;}
#sec_main h1 img { width: 100%;}

/* ----------------------------------
メッセージ・マイルアップ
---------------------------------- */
#sec_message .top-lead { margin: 0 0 46px 0; line-height: 1.8; display: flex; justify-content: center; align-items: center;}
#sec_message .top-lead p { font-size: 21px; font-weight: 500; text-align: center; color: var(--color-blue); position: relative;}
#sec_message .mile-campaign-date { max-width: 800px; margin: 0 auto; padding: 6px 10px; font-size: 22px; font-weight: 600; text-align: center; border: var(--color-main) 1px solid; background: #FFF;}
#sec_message .mile-campaign-date dt { color: var(--color-main);}
#sec_message .mile-campaign .memo { margin: 14px 0 0; font-size: 13px; text-align: center;}
#sec_message h2 {color:var(--color-main);text-align: center;font-weight: bold;margin-bottom: 60px;}

@media (max-width: 1000px) {
	#sec_message .top-lead { margin: 0 0 24px;}
	#sec_message .top-lead p { font-size: 15px;}
	#sec_message .mile-campaign { padding: 0 10px; margin: 0 auto;}
	#sec_message .mile-campaign-date { padding: 12px 10px; font-size: 17px;}
	#sec_message .mile-campaign .memo { margin: 8px 0 0; font-size: 11px; text-align: left;}
	#sec_message h2{margin-bottom:20px;font-size:20px;}
}

/* ----------------------------------
カテゴリー
---------------------------------- */
#sec_category { margin: 22px 0 40px 0;}
#sec_category .section-inner {max-width: 1200px;margin: 0 auto;}
#sec_category h2.design-category-title { padding: 0 0 15px 0; margin: 0 0 22px 0; text-align: center; position: relative;}
#sec_category h2.design-category-title span { font-size: 32px; font-weight: 600;}
#sec_category h2.design-category-title::after { content: ''; width: 50px; border-top: var(--color-main) 5px solid; display: block; position: absolute; bottom: 0; left: 50%; translate: -50%;}
#sec_category .sec-cate-list {margin: 0;display: flex;flex-wrap: wrap;justify-content: center;gap: 10px;}
#sec_category .sec-cate-list .sec-cate-box {width: calc((100% - (-64px * 3))/6);}
#sec_category .sec-cate-list .sec-cate-box .name {width: 100%;height: 48px;font-size: 16px;font-weight: 500;color: #fff;display: flex;justify-content: center;align-items: center;background: var(--color-main);transition: 0.5s;}

@media (max-width: 1000px) {
	#sec_category { margin: 22px 0 50px 0;}
	#sec_category h2.design-category-title { margin: 0 0 30px 0; padding: 0 0 10px;}
	#sec_category h2.design-category-title span { font-size: 27px;}
	#sec_category .sec-cate-list { padding: 0 10px; gap: 8px;}
	#sec_category .sec-cate-list .sec-cate-box { width: calc((100% - 8px)/2);}
	#sec_category .sec-cate-list .sec-cate-box .name { height: 40px; font-size: 14px;}
}

/* ----------------------------------
関連イベント
---------------------------------- */
#sec_event_frame {padding: 38px 0 70px;/* background: #f7f0f3; */}
.event_pick_frame .block-top-event--header{ display:none;}
#sec_event_frame .event_pick_frame { max-width: 1200px; margin: 0 auto; }
#sec_event_frame h2.block-top-event--header { padding: 0 0 15px 0; margin: 0 0 40px 0; font-size: 32px; font-weight: bold; text-align: center; line-height: 1.267; position: relative;}
#sec_event_frame h2.block-top-event--header::after { content: ''; width: 50px; border-top: var(--color-main) 5px solid; display: block; position: absolute; bottom: 0; left: 50%; translate: -50%;}
#sec_event_frame .design-more-button:not(:last-child) { margin-bottom: 70px;}

/* もっと見るボタン */
.design-more-button { width: 400px; margin: 50px auto 0;}
.design-more-button a { width: 100%; height: 60px; border: var(--color-main) 2px solid; border-radius: 60px; font-size: 20px; font-weight: 500; color: #fff; display: flex; justify-content: center; align-items: center; background: var(--color-main); transition: 0.5s;}
.design-more-button a:hover { color: var(--color-main); background: #fff;}

@media (max-width: 1000px) {
	#sec_event_frame h2.block-top-event--header { margin: 0 0 30px 0; padding: 0 0 12px; font-size: 27px;}
	#sec_event_frame h2.block-top-event--header span { font-size: 27px;}
	#sec_event_frame .design-more-button:not(:last-child) { margin-bottom: 60px;}
	.design-more-button { width: 200px; margin: 20px auto 0;}
	.design-more-button a { height: 45px; font-size: 17px;}
}

html[data-browse-mode="P"] #sec_event_frame .block-thumbnail-t,
html[data-browse-mode="P"] #sec_event_frame .block-pickup-list-p--items { margin: 0; gap: 30px;}
html[data-browse-mode="P"] #sec_event_frame .block-thumbnail-t > li,
html[data-browse-mode="P"] #sec_event_frame .block-pickup-list-p--items > li { width: calc((100% - 120px) / 5); margin: 0;}

html[data-browse-mode="S"] #sec_event_frame .block-thumbnail-t--items { padding: 0 20px 10px 20px; flex-wrap: nowrap; justify-content: flex-start; align-items: flex-start; overflow-x: scroll; -webkit-overflow-scrolling: touch; gap: 0 20px;}
html[data-browse-mode="S"] #sec_event_frame .block-thumbnail-t--items li { width: 150px; min-width: 150px; padding: 0; margin: 0; vertical-align: top; font-size: 14px;;}

@media (max-width: 1000px) {
	html[data-browse-mode="P"] #sec_event_frame .block-thumbnail-t,
	html[data-browse-mode="P"] #sec_event_frame .block-pickup-list-p--items { padding: 0 15px; margin: 0; gap: 15px;}
	html[data-browse-mode="P"] #sec_event_frame .block-thumbnail-t > li,
	html[data-browse-mode="P"] #sec_event_frame .block-pickup-list-p--items > li { width: calc((100% - 15px) / 2); margin: 0;}
}

/* ----------------------------------
開催中のキャンペーン・おすすめ特集
---------------------------------- */
.event_lp h2.design-shine { padding: 0; margin: 0 0 40px; border: none; display: flex; justify-content: center; align-items: center;}
.event_lp h2.design-shine span { font-size: 32px; font-weight: 600;}

#sec_campaign { max-width: 1200px; padding: 0; margin: 40px auto 80px;}
#sec_campaign .campaign_list { display: flex; justify-content: center; flex-wrap: wrap; gap: 15px;}
#sec_campaign .campaign_list > li { width: calc((100% - 15px * 3)/4); align-self: stretch; background-color: #fff;}
#sec_campaign .campaign_list .list_item_detail { padding: 5%; border: none; word-break: break-all;}
#sec_campaign .campaign_list .list_item_detail .text-period{color:#cc0000;}
#sec_campaign .campaign_list .list_item_detail_comment1 { margin-bottom: 10px; font-size: 16px; font-weight: bold; color: #000000;}
#sec_campaign .campaign_list .list_item_detail_comment2 { font-size: 13px;}

#sec_recommend { max-width: 1200px; padding: 0; margin: 0 auto 0;}
#sec_recommend .js-main-slider { display: flex; justify-content: center; flex-wrap: wrap; gap: 15px;}
#sec_recommend .js-main-slider > li { width: calc((100% - 15px * 3)/4); align-self: stretch; background-color: #fff;}
#sec_recommend .js-main-slider .list_item_detail { padding: 5%; border: none; word-break: break-all;}
#sec_recommend .js-main-slider .list_item_detail_comment1 { margin-bottom: 10px; font-size: 16px; font-weight: bold; color: #000000;}
#sec_recommend .js-main-slider .list_item_detail_comment2 { font-size: 13px;}

.design-more-button.for-page-top { margin: 26px auto 0;}
.design-more-button.for-page-top a { color: var(--color-main); background: #fff;}
.design-more-button.for-page-top a:hover { color: #fff; background: var(--color-main);}

@media (max-width: 1000px) {
	.event_lp h2.design-shine span { font-size: 27px;}
	#sec_campaign .campaign_list { margin: 40px auto 60px; padding: 0 10px; justify-content: flex-start; flex-wrap: nowrap; overflow-x: scroll;}
	#sec_campaign .campaign_list > li { width: 300px; min-width: 300px;}
	#sec_recommend .js-main-slider { padding: 0 15px; justify-content: flex-start; flex-wrap: nowrap; overflow-x: scroll;}
	#sec_recommend .js-main-slider > li { width: 300px; min-width: 300px;}
	#sec_recommend .design-more-button { width: 260px; margin-top: 32px;}
	.design-more-button.for-page-top { width: 260px;}
}