@charset "UTF-8";

:root {
  --color-bg: #fbf6e4;
  --color-sky: #e06518;
  --color-blue: #430a01;
  --color-orange: #FF6627;
}

/* ----------------------------------
 LP レイアウト
---------------------------------- */
.pane-main { padding: 1px 0; margin: 0; background: var(--color-bg);}
html[data-browse-mode="P"] .pane-left-menu { display: none;}
html[data-browse-mode="P"] .page-event .pane-contents .container { width: 100% !important; padding: 0; min-width: unset; max-width: unset;}
html[data-browse-mode="P"] .page-event .pane-contents .container .pane-main { width: 100% !important;}
html[data-browse-mode="P"] #header.pane-header { margin: 0;}

html[data-browse-mode="S"] #footer_pagetop { bottom: 70px;}
html[data-browse-mode="S"] #footer_pagetop a { border-radius: 5px 0 0 5px; opacity: 0.7; background-color: var(--color-orange);}

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

/* ----------------------------------
 夏のトラベル特集 2025
---------------------------------- */
/* メイン
---------------------------------- */
#sec_main { margin: 0; position: relative;}
#sec_main h1 { padding: 0; margin: 0;}
#sec_main h1 img { width: 100%; vertical-align: top;}

/* メッセージ・マイルアップ
---------------------------------- */
#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 .top-lead p:before {
	content: '';
	width: 106px;
	height: 180px;
	display: block;
	background: url("ico_pickup01.png") left top no-repeat;
	-webkit-background-size: 106px auto;
	background-size: 106px auto;
	position: absolute;
	left: -126px;
	top: -20px;
}
#sec_message .top-lead p::after {
	content: '';
	width: 150px;
	height: 164px;
	display: block;
	background: url("ico_pickup02.png") left bottom no-repeat;
	-webkit-background-size: 150px auto;
	background-size: 150px auto;
	position: absolute;
	right: -150px;
	bottom: -50px;
}
#sec_message .mile-campaign { padding: 0 15px; margin: 0 auto;}
#sec_message .mile-campaign-date {max-width: 800px;margin: 0 auto;border: var(--color-sky) 1px solid;background: #FFF;}
#sec_message .mile-campaign-date dt { padding: 10px 10px 5px; font-size: 21px; font-weight: 500; text-align: center; color: var(--color-blue);}
#sec_message .mile-campaign-date dd { padding: 0 10px 10px; font-size: 21px; font-weight: 500; text-align: center; color: var(--color-blue);}
#sec_message .mile-campaign .memo { padding-left: 1em; margin: 5px auto 10px; font-size: 18px; font-weight: 500; text-align: center; text-indent: -1em;}
#sec_message .mile-campaign .design-more-button {margin: 20px auto;}

@media (max-width: 1000px) {
	#sec_message .top-lead { margin: 0 0 24px;}
	#sec_message .top-lead p { font-size: 15px;}
	#sec_message .top-lead p:before { width: 53px; height: 90px; -webkit-background-size: 53px auto; background-size: 53px auto; left: 0; top: -30px;}
	#sec_message .top-lead p::after { width: 70px; height: 75px; -webkit-background-size: 70px auto; background-size: 70px auto; right: 0; top: -40px; bottom: auto;}
	
	#sec_message .mile-campaign { padding: 0 15px; margin: 0 auto;}
	#sec_message .mile-campaign-date { max-width: auto; margin: 0 auto; border: var(--color-sky) 1px solid; background: #FFF;}
	#sec_message .mile-campaign-date dt { padding: 7px 10px 2px; font-size: 17px;}
	#sec_message .mile-campaign-date dd { padding: 0 10px 10px; font-size: 17px;}
	#sec_message .mile-campaign .memo { font-size: 14px;}
	#sec_message .mile-campaign .design-more-button { width: 240px;}
	#sec_message .mile-campaign .design-more-button a { font-size: 12px;}
}

/* 旅のおすすめアイテム6選
---------------------------------- */
.event_lp { padding: 0;}
.event_lp .contents-wrapper { padding: 55px 0 100px; position: relative;}
.event_lp .contents-wrapper::before {
  content: '';
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('bg.png');
	background-position: center 100px;
	background-repeat: repeat-y;
	-webkit-background-size: 100% auto;
	background-size: 100% auto;
  opacity: 1.0;
}
.event_lp .contents-wrapper section { position: relative; z-index: 2;}

#sec_pickup { margin: 0 0 80px 0;}
#sec_pickup h2.design-pickup-title { padding: 20px 0 0; margin: 0 0 40px 0; text-align: center;}
#sec_pickup h2.design-pickup-title span { font-size: 55px; font-weight: 500; position: relative;}
#sec_pickup h2.design-pickup-title span strong { margin: 0 10px; font-size: 75px; font-weight: 500; color: var(--color-orange);}
#sec_pickup h2.design-pickup-title span::before {
	content: '';
	width: 103px;
	height: 87px;
	display: block;
	background: url("ico_pickup03.png") left top no-repeat;
	-webkit-background-size: 103px auto;
	background-size: 103px auto;
	position: absolute;
	left: -120px;
	top: -30px;
}
#sec_pickup h2.design-pickup-title span::after {
	content: '';
	width: 35px;
	height: 67px;
	display: block;
	background: url("ico_pickup04.png") left bottom no-repeat;
	-webkit-background-size: 35px auto;
	background-size: 35px auto;
	position: absolute;
	right: -65px;
	top: calc(50% - 33px);	
}
#sec_pickup .pickup-list { max-width: 1200px; padding: 0; margin: 0 auto; display: flex; justify-content: space-between; flex-wrap: wrap; position: relative;}
#sec_pickup .pickup-list .pickup-item { 
	width: calc(50% - 5px);
	padding: 15px;
	margin: 0 0 15px 0;
	border: var(--color-sky) 1px solid;
	background: #FFF;
	box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.3);
	position: relative;
}
#sec_pickup .pickup-list .pickup-item .lead { padding: 0 0 0 55px; margin: 0 0 25px 0; font-size: 24px; font-weight: 700; text-align: center; letter-spacing: -1px; color: var(--color-sky);}
#sec_pickup .pickup-list .pickup-item .head { display: flex; justify-content: space-between; align-items: flex-start;}
#sec_pickup .pickup-list .pickup-item .head .image { width: 45%; display: flex; justify-content: center; align-items: center; position: relative;}
#sec_pickup .pickup-list .pickup-item .head .image .icon { width: auto; height: 20px; position: absolute; top: 0; left: 0;}
#sec_pickup .pickup-list .pickup-item .head .desc { width: calc(55% - 15px); min-height: 100%; display: flex; flex-direction: column;}
#sec_pickup .pickup-list .pickup-item .number { width: 57px; position: absolute; top: -1px; left: 10px;}
#sec_pickup .pickup-list .pickup-item .number img { width: 100%; vertical-align: top;}
#sec_pickup .pickup-list .pickup-item .catch { font-size: 20px; font-weight: 700; letter-spacing: -1px; word-break: keep-all;}
#sec_pickup .pickup-list .pickup-item .price-box { margin: auto 0 0 0; padding: 10px 0; text-align: right; line-height: 1.0; display: flex; justify-content: flex-end;}
#sec_pickup .pickup-list .pickup-item .price-txt {margin: 0 0 7px 0;font-size: 16px;font-weight: 700;}
#sec_pickup .pickup-list .pickup-item .price-txt .yen { font-size: 12px; font-weight: 400;}
#sec_pickup .pickup-list .pickup-item .mile-txt {margin: 0 0 0 20px;font-size: 16px;font-weight: 700;}
#sec_pickup .pickup-list .pickup-item .mile-txt .sekisan { font-size: 12px; font-weight: 400;}
#sec_pickup .pickup-list .pickup-item .mile-txt .mile { font-size: 12px; font-weight: 400;}
#sec_pickup .pickup-list .pickup-item .cart a {
	width: 232px;
	height: 35px;
	margin: 0 0 0 auto;
	border: var(--color-sky) 2px solid;
	font-size: 14px;
	color: #FFF;
	display: flex;
	justify-content: center;
	align-items: center;
	background: var(--color-sky);
	transition: 0.5s;
}
#sec_pickup .pickup-list .pickup-item .cart a:hover { color: var(--color-sky); background: #FFF;}
#sec_pickup .pickup-list .pickup-item .info { margin: 15px 0 0 0;}
#sec_pickup .pickup-list .pickup-item .info h3 {
	padding: 0 0 8px 0;
	margin: 0 0 10px 0;
	border-bottom: #D2CDC1 1px solid;
	font-size: 18px;
	font-weight: 500;
	text-align: center;
	line-height: 1.2;
	color: #514B3A;
}
#sec_pickup .pickup-list .pickup-item .info p { font-size: 14px; color: #514B3A;}

@media (min-width: 999px) {
	#sec_pickup .pickup-list .pickup-item .head .desc .catch { display: none !important;}
	#sec_pickup .pickup-list .pickup-item .head + .info { display: none !important;}
}
@media (max-width: 1000px) {
	.event_lp .contents-wrapper::before { background-position: center -100px;}
	#sec_pickup { margin: 0 0 60px 0;}
	#sec_pickup h2.design-pickup-title { margin: 0 0 10px 0;}
	#sec_pickup h2.design-pickup-title span { font-size: 28px;}
	#sec_pickup h2.design-pickup-title span strong { margin: 0 5px; font-size: 40px;}
	#sec_pickup h2.design-pickup-title span::before { width: 60px; height: 54px; -webkit-background-size: 60px auto; background-size: 60px auto; left: -15px; top: -50px; transform: rotate(27deg);}
	#sec_pickup h2.design-pickup-title span::after  { width: 20px; height: 40px; -webkit-background-size: 20px auto; background-size: 20px auto; right: -20px; top: calc(50% - 45px);}
	#sec_pickup .pickup-list { padding: 0 10px; display: block;}
	#sec_pickup .pickup-list .pickup-item { width: 100%; margin: 0 0 20px 0;}
	#sec_pickup .pickup-list .pickup-item .lead { display: none !important;}
	#sec_pickup .pickup-list .pickup-item .number {width: 32px;margin: 0 auto 5px;position: relative;top: auto;left: auto;}
	#sec_pickup .pickup-list .pickup-item .head .image {width: 56%;}
	#sec_pickup .pickup-list .pickup-item .head .desc {width: calc(45% - 10px);}
	#sec_pickup .pickup-list .pickup-item .head .desc .catch { color: var(--color-sky);}
	#sec_pickup .pickup-list .pickup-item .head .desc .info { display: none !important;}
	#sec_pickup .pickup-list .pickup-item .catch {font-size: 16px;word-break: break-all;}
	#sec_pickup .pickup-list .pickup-item .info h3 {font-size: 15px;text-align: center;}
	#sec_pickup .pickup-list .pickup-item .cart a {width: 100%;margin: 0 auto;}
	#sec_pickup .pickup-list .pickup-item .price-box { padding: 10px 0 0 0; display: block;}
	#sec_pickup .pickup-list .pickup-item .mile-txt { margin: 0 0 10px 0;}
}

/* カテゴリー
---------------------------------- */
#sec_category {
	padding: 100px 0 70px;
	margin: 0 0 100px 0;
	background: url("category_bg.png") center center no-repeat; 
	-webkit-background-size: cover;
	background-size: cover;
	position: relative;
}
#sec_category .section-inner { max-width: 1200px; margin: 0 auto;}
#sec_category h2.design-category-title { padding: 0; margin: 0 0 50px 0; text-align: center;}
#sec_category h2.design-category-title span { font-size: 55px; font-weight: 500; position: relative;}
#sec_category h2.design-category-title span::before {
	content: '';
	width: 96px;
	height: 173px;
	display: block;
	background: url("ico_category01.png") left top no-repeat;
	-webkit-background-size: 96px auto;
	background-size: 96px auto;
	position: absolute;
	left: -140px;
	top: -70px;
}
#sec_category h2.design-category-title span::after {
	content: '';
	width: 122px;
	height: 124px;
	display: block;
	background: url("ico_category02.png") left bottom no-repeat;
	-webkit-background-size: 122px auto;
	background-size: 122px auto;
	position: absolute;
	right: -160px;
	top: calc(50% - 64px);	
}
#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% - (10px * 5)) / 5);}
#sec_category .sec-cate-list .sec-cate-box .image { width: 100%;}
#sec_category .sec-cate-list .sec-cate-box .image img { width: 100%; vertical-align: top;}
#sec_category .sec-cate-list .sec-cate-box .name { 
	width: 100%;
	height: 46px;
	border: #FFF 2px solid;
	font-size: 17px;
	font-weight: 500;
	color: #111;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #FFF;
	transition: 0.5s;
}

@media (max-width: 1000px) {
	#sec_category { padding: 50px 0 30px; margin: 0 0 50px 0; -webkit-background-size: auto 100%; background-size: auto 100%;}
	#sec_category .section-inner { max-width: 1200px; margin: 0 auto;}
	#sec_category h2.design-category-title span { font-size: 28px;}
	#sec_category h2.design-category-title span::before {width: 57px;height: 102px;-webkit-background-size: 57px auto;background-size: 57px auto;left: -72px;top: -30px;}
	#sec_category h2.design-category-title span::after  { width: 72px; height: 74px; -webkit-background-size: 72px auto; background-size: 72px auto; right: -80px; top: calc(50% - 34px);}
	#sec_category .sec-cate-list { padding: 0 10px; margin: 0; flex-wrap: wrap; justify-content: space-between; gap: 0;}
	#sec_category .sec-cate-list .sec-cate-box { width: calc(50% - 5px); margin: 0 0 20px 0;}
	#sec_category .sec-cate-list .sec-cate-box .name { height: 40px; font-size: 15px;}
}

/* 関連イベント
---------------------------------- */
#sec_event_frame { max-width: 1200px; padding: 0 0 1px 0; margin: 0 auto;}
.event_pick_frame .block-top-event--header{display:none;}
#sec_event_frame h2.block-top-event--header {
  padding: 0 0 24px 0;
  margin: 0 0 40px 0;
  font-size: 40px;
  font-weight: bold;
	text-align: center;
  letter-spacing: .13em;
  line-height: 1.267;
  position: relative;
}
#sec_event_frame h2.block-top-event--header span {
  font-size: 40px;
  font-weight: bold;
}
#sec_event_frame h2.block-top-event--header::after {
  content: '';
  width: 70px;
	border-top: var(--color-orange) 5px solid;
	display: block;
  position: absolute;
  bottom: 0;
  left: 50%;
  translate: -50%;
}
#sec_event_frame .design-more-button { margin: 0 auto 100px;}

/* JALオリジナル用 */
html[data-browse-mode="P"] #E_00020079 .block-thumbnail-t{
	gap: 15px;
}
html[data-browse-mode="P"] #E_00020079 .block-thumbnail-t li{
     width: calc((100% - 120px) / 6);
}


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

@media (max-width: 1000px) {
	#sec_event_frame h2.block-top-event--header { margin: 0 0 20px 0; font-size: 27px;}
	#sec_event_frame h2.block-top-event--header span { font-size: 27px;}
	#sec_event_frame .design-more-button { margin: 0 auto 50px;}
	.design-more-button { width: 200px; margin: 20px auto 60px;}
	.design-more-button a { height: 45px; border-radius: 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: 40px;}
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) / 4); margin: 0;}

html[data-browse-mode="S"] #sec_event_frame .block-thumbnail-t--items {
  padding: 0 0 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: 55px; font-weight: 500; position: relative;}
.event_lp h2.design-shine span::before {
	content: '';
	width: 35px;
	height: 67px;
	display: block;
	background: url("ico_shine01.png") left bottom no-repeat;
	-webkit-background-size: 35px auto;
	background-size: 35px auto;
	position: absolute;
	left: -65px;
	top: calc(50% - 33px);	
}
.event_lp h2.design-shine span::after {
	content: '';
	width: 35px;
	height: 67px;
	display: block;
	background: url("ico_shine02.png") left bottom no-repeat;
	-webkit-background-size: 35px auto;
	background-size: 35px auto;
	position: absolute;
	right: -65px;
	top: calc(50% - 33px);	
}

#sec_campaign { max-width: 1200px; padding: 0; margin: 0 auto 70px;}
#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 70px;}
#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-top: 0; position: relative; top: -40px;}

@media (max-width: 1000px) {
	.event_lp h2.design-shine span { font-size: 28px;}
	.event_lp h2.design-shine span::before { width: 20px; height: 40px; -webkit-background-size: 20px auto; background-size: 20px auto; left: -30px; top: calc(50% - 20px);}
	.event_lp h2.design-shine span::after  { width: 20px; height: 40px; -webkit-background-size: 20px auto; background-size: 20px auto; right: -30px; top: calc(50% - 20px);}
	#sec_campaign .campaign_list { padding: 0 15px; 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_fixed_navi { display: none;}
#sec_fixed_navi .navi {
  width: 270px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  position: fixed;
  right: 0;
  bottom: 140px;
  z-index: 9999;
}
#sec_fixed_navi .navi li { width: 100%; height: 45px;}
#sec_fixed_navi .navi li a { 
	width: 100%;
	height: 100%;
	padding: 0 0 0 20px;
	border: var(--color-sky) 2px solid;
	border-right: none;
	border-radius: 0;
	font-size: 16px;
	text-align: left;
	line-height: 1.4;
	color: #FFF;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	background: var(--color-sky);
	box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.3);
	transition: 0.5s;
}
#sec_fixed_navi .navi li a:hover { color: var(--color-sky); background: #FFF;}

@media (max-width: 1000px) {
	#sec_fixed_navi .navi { width: 100%; flex-direction: row; justify-content: space-between; gap: 2px; left: 0; right: 0; bottom: 0;}
	#sec_fixed_navi .navi li { width: calc((100% - 2px)) / 2); height: 46px;}
	#sec_fixed_navi .navi li a { padding: 5px; border-radius: 0; font-size: 12px; text-align: center; justify-content: center; align-items: center; box-shadow: none;}
}