/*------------------------------------------------------------------

季節ごと変更必要箇所

------------------------------------------------------------------*/
/*-- root-color --*/
:root{
    --base-color01: #018DCB;
    --base-color02: #01154D;
    --en-color: linear-gradient(to bottom, #03A6D6 10%, #4CE8FC 100%);
    --en-color-webkit: -webkit-gradient(linear, left top, left bottom, color-stop(10%, #03A6D6), to(#4CE8FC));
    
    /*-- 営業時間＆season-eventリンクボタン（背景） --*/
    --todayTime-bg: url("../images/summer/today-bg-pc-summer.png") no-repeat center center; 
    --season-event-btn-bg: url("../images/summer/today-pc-howto.png") no-repeat center center; 
    --today-hours-bg-sp: url("../images/summer/today-watch-bg-summer.jpg") repeat-x 0 0;
    --season-event-btn-bg-sp: url("../images/summer/today-bg-summer.jpg") repeat 0 0;
    
    /*-- メインビジュアル下スライド（アイコン） --*/
    --article-category-race: url(/top/assets/images/summer/category-bg-race.png);
    --article-category-event: url(/top/assets/images/summer/category-bg-event.png);
    --article-category-topics: url(/top/assets/images/summer/category-bg-topics.png);
    
    /*-- パークマップ --*/
    --parkmap-link-bg: url(/top/assets/images/summer/number-bg.png) no-repeat;
    --parkmap-image-item-bg: url(/top/assets/images/summer/number-bg-border.png) no-repeat;
    
    --design-parkmap-before:url(/top/assets/images/design-leaves2.png);
    --design-parkmap-before-sp:url(/top/assets/images/design-leaves1-sp.png);
    --design-parkmap-after:url(/top/assets/images/design-leaves3.png);
    --design-parkmap-after-sp:url(/top/assets/images/design-leaves2-sp.png);
    --design-parkmap-inner-before:url(/top/assets/images/design-leaves4.png);
    --design-parkmap-inner-after: url(/top/assets/images/design-leaves5.png);
}

/*------------------------------------------------------------------

季節ごと変更必要箇所ここまで

------------------------------------------------------------------*/
.mv::after{ background: url("../images/common/mv-curve.png") no-repeat center top; background-size: cover; height: 198px;}

/*-- 営業時間＆season-eventリンクボタン --*/
main{ position: relative; width: 100%;}
#todayTime{ position: absolute; width: 482px; height: 218px; right: 0; top: -100px; z-index: 10; background: var(--todayTime-bg); line-height: 1;}
#today-hours{ height: 34px; box-sizing: border-box; padding: 15px 0 0 15px; display: flex; justify-content: flex-start; color: #fff; font-size: 13px; font-weight: bold; align-items: center;  width: 265px; margin: 0 0 0 auto; }
#today-hours::before{ content: ""; display: block; height: 15px; width: 15px; background: url("../images/common/today-icon-watch.svg") no-repeat center center; background-size: 100%; margin-right: 5px; }
#today-hours .hours_ttl{ margin-right: 10px; line-height: 1; letter-spacing: 0.05em; padding-top: 2px;}
#today-hours .hour{ line-height: 1; letter-spacing: 0.05em; padding-top: 2px;}
#today-hours .txt{ line-height: 1; letter-spacing: 0.05em; padding-top: 2px;}
#todayTime .season-event-btn a{ position: relative; display: block; background: var(--season-event-btn-bg);}
#todayTime .season-event-btn a img{ display: block; transition: opacity 0.7s;}
#todayTime .season-event-btn a img:first-child{ position: absolute; z-index: 2; top: 0; left: 0; opacity: 0;}
#todayTime .season-event-btn a img:last-child{ position: relative; z-index: 1; top: 0; left: 0; }

/*-- メインビジュアル下スライド --*/
.swiper-pagination-feature .swiper-pagination-bullet.swiper-pagination-bullet-active, .swiper-pagination-section .swiper-pagination-bullet.swiper-pagination-bullet-active{ background-color: var(--base-color01);}
.article-image-wrap::before, .article-image-wrap::after{ content: none;}
.article-category{ color: var(--base-color02);}
.article-category.article-category-race{ background-image: var(--article-category-race);}
.article-category.article-category-event{ background-image: var(--article-category-event);}
.article-category.article-category-topics{ background-image: var(--article-category-topics);}

.design-parkmap::before{ background-image: var(--design-parkmap-before);}
.design-parkmap::after{ background-image: var(--design-parkmap-after);}
.design-parkmap-inner::before{ background-image: var(--design-parkmap-inner-before);}
.design-parkmap-inner::after{ background-image: var(--design-parkmap-inner-after);}

/*-- パークマップ --*/
.parkmap-container .heading .heading-text{ background: var(--en-color-webkit); background: var(--en-color); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.parkmap-container .heading .heading-subtext{ width: 668px; }
.parkmap-image{ background: url("/top/assets/images/common/map-pc-summer.jpg") no-repeat center top; background-size: contain; left: -480px;}
.parkmap-image-item::before{ font-weight: bold;}
.parkmap-link::before{ font-weight: bold; background: var(--parkmap-link-bg); background-size: contain;}
.parkmap-image-item::before{ background: var(--parkmap-image-item-bg); background-size: contain;}
.parkmap-image-item:first-child{ left: 365px; top: 425px;}
.parkmap-image-item:nth-of-type(2){ left: 558px; top: 205px;}
.parkmap-image-item:nth-of-type(3){ left: 794px; top: 336px;}
.parkmap-image-item:nth-of-type(4){ left: 540px; top: 505px;}
.parkmap-image-item:nth-of-type(5){ left: 250px; top: 613px;}
.parkmap-image-item:nth-of-type(6){ left: 175px; top: 360px;}
.parkmap-image-item:nth-of-type(7){ left: 678px; top: 578px;}

/*-- エリア別紹介 --*/
.area-introduction{ padding-bottom: 50px;}
.area-introduction .heading{ margin-bottom: 0;}
.area-introduction .heading .heading-text{ background: var(--en-color-webkit); background: var(--en-color); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.area-introduction .heading .heading-subtext{ width: 776px;}

.l-section.l-section-hotel-twin{ padding-bottom: 95px;}

@media screen and (min-width: 750px) and (max-width: 1560px){
#todayTime{ top: -200px; }
}

@media screen and (min-width: 750px){
#todayTime .season-event-btn a:hover img:first-child{ opacity: 1;}
#todayTime .season-event-btn a:hover img:last-child{ opacity: 0;}
}
/* SP
-----------------------------------------------------------------*/
@media screen and (max-width: 749px){
.mv::after{ background: url("../images/common/mv-curve.png") no-repeat center top; background-size: 150% 100%; height: 99px;}
    
/*-- 営業時間＆season-eventリンクボタン --*/
main.top{ padding-top: 150px;}
    
#todayTime{ position: relative; width: 100%; height: auto; right: auto; top: auto; z-index: 10; background: none;}
#today-hours{ height: 30px; box-sizing: border-box; padding: 15px 30px 0 15px; display: inline-block; line-height: 1; justify-content: flex-start; color: #fff; font-size: 11px; font-weight: bold; align-items: center; background: var(--today-hours-bg-sp); background-size: auto 100%; border-radius: 0 20px 0 0; white-space: nowrap; width: auto; vertical-align: middle;}
#today-hours::before{ content: ""; display: inline-block; height: 10px; width: 10px; background: url("../images/common/today-icon-watch.svg") no-repeat center center; background-size: 100%; margin-right: 5px; line-height: 1;}
#today-hours .hours_ttl{ margin-right: 10px; line-height: 1; letter-spacing: 0.05em; white-space: nowrap; display: inline-block; padding-top: 2px;}
#today-hours .hour{ line-height: 1; letter-spacing: 0.05em; white-space: nowrap; display: inline-block; padding-top: 2px;}
#today-hours .txt{ line-height: 1; letter-spacing: 0.05em; white-space: nowrap; display: inline-block; padding-top: 2px;}
#todayTime .season-event-btn{ margin-top: -1px;}
#todayTime .season-event-btn a{ position: relative; display: block; background: var(--season-event-btn-bg-sp); background-size: auto 234px;}
#todayTime .season-event-btn a img{ display: block; transition: opacity 0.7s; margin: 0 auto;}
#todayTime .season-event-btn a img:first-child{ position: relative; z-index: 2; top: 0; left: 0; opacity: 1;}
    
/*-- メインビジュアル下スライド --*/
.swiper-pagination-feature .swiper-pagination-bullet.swiper-pagination-bullet-active, .swiper-pagination-section .swiper-pagination-bullet.swiper-pagination-bullet-active{ background-color: var(--base-color01);}
.article-image-wrap::before, .article-image-wrap::after{ content: none;}
.article-category{ color: var(--base-color02);}
.article-category.article-category-race{ background-image: var(--article-category-race);}
.article-category.article-category-event{ background-image: var(--article-category-event);}
.article-category.article-category-topics{ background-image: var(--article-category-topics);}


.design-parkmap::before{ background-image: var(--design-parkmap-before-sp);}
.design-parkmap::after{ background-image: var(--design-parkmap-after-sp);}
.design-parkmap-inner::before{ background-image: var(--design-parkmap-inner-before);}
.design-parkmap-inner::after{ background-image: var(--design-parkmap-inner-after);}
    
/*-- パークマップ --*/
.parkmap-inner{ margin-top: 30px;}
.parkmap-container .heading .heading-text{ background: var(--en-color-webkit); background: var(--en-color); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.parkmap-container .heading .heading-subtext{ width: 300px; }
.parkmap-image{ width: 530px; height: 400px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); background: url("../images/common/map-sp-summer.png") no-repeat center top; background-size: contain;}
.parkmap-image-item::before{ font-weight: bold;}
.parkmap-link::before{ font-weight: bold; background: var(--parkmap-link-bg); background-size: contain;}
.parkmap-image-item::before{ background: var(--parkmap-image-item-bg); background-size: contain;}
.parkmap-image-item:first-child{ left: 214px; top: 183px;}
.parkmap-image-item:nth-of-type(2){ left: 299px; top: 81px;}
.parkmap-image-item:nth-of-type(3){ left: 407px; top: 151px;}
.parkmap-image-item:nth-of-type(4){ left: 292px; top: 215px;}
.parkmap-image-item:nth-of-type(5){ left: 173px; top: 264px;}
.parkmap-image-item:nth-of-type(6){ left: 136px; top: 162px;}
.parkmap-image-item:nth-of-type(7){ left: 352px; top: 246px;}
    
 
/*-- エリア別紹介 --*/
.area-introduction{ padding-bottom: 50px;}
.area-introduction .heading{ margin-bottom: 0;}
.area-introduction .heading .heading-text{ background: var(--en-color-webkit); background: var(--en-color); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.area-introduction .heading .heading-subtext{ height: auto; width: 350px;}

.l-section.l-section-hotel-twin{ padding-bottom: 55px;}
    
.heading-wrap.heading-wrap-how-to .heading-subtext{ width: 330px; height: 65px;}
}