@charset "utf-8";
/* CSS Document */
body{font-family:'微軟正黑體';}
img{ max-width:100%; height:auto;}
.right{ float:right;}
.left{ float:left;}
/*四季*/
.hokkaido-top{ background:url(../images/intro/season-bg.jpg) no-repeat; background-size:cover; padding:3% 5%; box-sizing:border-box; position:relative;}
.petal-1, .petal-2{ position:absolute;left:32%;}
.petal-1{ top:4%; }
.petal-2{ bottom:4%;}
.season{ width:30%;}
.season li span img{ width:7%; padding-right:5px;}
.season li{ color:#fff; font-size:20px; letter-spacing:0.1rem; padding-left:20px}
.hokkaido-top .title{position:absolute; top:27%; left:32%; width:35%;}
.hokkaido-top .title-m{ display:none;}
.season{ box-sizing:border-box; margin-bottom:40px;}
.right ul{ margin-left:60px;}

/*區域*/
.hokkaido-area{background:url(../images/intro/area-bg.jpg) no-repeat; background-size:cover; padding:0 5% 8%; box-sizing:border-box;}
.area-title{ position:relative; padding:25px 0;}
.area-title p{ font-size:30px; color:#fff;letter-spacing:0.4rem;}
.area-title p:first-child{ padding-bottom:10px;}
.area-title strong{ font-size:70px;display: inline-block;border-bottom: 15px solid #fb969b;line-height:0.7; letter-spacing:0.8rem;}
.area-title p small{ line-height:2em; font-family:'Arial'; font-size:28px; font-style:italic;letter-spacing:0.3rem;}
.area-title p span img{ width:4%; padding:0 10px;}
.area-title .title-text{ text-align:center;}
.petal-3{ position:absolute; top:24%; left:19%;}
.petal-4{ position:absolute; top:20%; right:20%;}
.area-list{ display:flex; flex-wrap:wrap; justify-content:space-between;}
.area-list ul{ border-radius:25px; border:1px #fff solid; width:48%; display: inline-block; vertical-align:top; margin-right:15px; padding:15px; box-sizing:border-box; margin-bottom:20px;}
.area-list ul:nth-child(even){ margin-right:0;}
.area-list ul li{display: inline-block;width:48%;}
.area-list dl dt{ font-size:60px; color:#ffec47; font-weight:bold; letter-spacing:0.1em;}
.area-list dl dt span img{ width:14%; padding-right:6px;}
.area-list dl dd{ color:#fff; font-size:1.2em; letter-spacing:0.1rem; padding-left:1em;}
.area-list dl dd:before, .fastival-article li:before{ content:'•'; padding-right:5px; margin-left:-1em; }

/*夜景祭典*/
.hokkaido-bottom{background:url(../images/intro/season-bg.jpg) no-repeat; background-size:cover; padding:3% 5%; position:relative;}
.fire-bg{position: absolute; top:0; left:0; z-index:2;}
.activity-title p{font-family: 'Noto Sans TC', sans-serif;color:#fff; text-align:center; letter-spacing:0.8em; }
.activity-title strong{font-size:60px;}
.activity-title small{font-size:20px;letter-spacing:0.2em; font-weight:600;}
.fastival-article{ background:url(../images/intro/festival-bg.jpg) no-repeat; background-size:100% auto; width:72%; margin:30px auto;}
.fastival-article .text{ background: rgba(255,255,255,0.3); width:50%; padding:4%; float:right; box-sizing:border-box;}
.fastival-article .text img{ width:90%;}
.fastival-article li{ padding-left:1em; color:#fff; text-shadow:5px 3px 5px #4d4d4d; font-size:20px; margin-left:1em; letter-spacing:0.1em; font-weight:bold;}
.nightview{ width:72%; margin:auto;}
.nightview .text li{ color:#113c87; font-size:22px; letter-spacing:0.1em;}
.nightview .text li i{ color:#f8ff8f; font-size:16px;letter-spacing:0.1em;}
.night-left{ width:50%;}
.night-left ul, .nightview div{ display:inline-block; vertical-align:top;}
.night-left ul:first-child{ width:54%;}
.night-left ul:last-child{width:44%;}
.night-left ul:first-child li:last-child{ line-height:24px;}
.night-left ul:last-child li{ position:relative;}
.night-left li p small{ display:block;font-family: 'Noto Sans TC', sans-serif; color:#76fff3; font-size:20px; letter-spacing:0.3em; font-weight:600;}
.night-left li p{ position:absolute; top:27%; left:14%; text-align:center; color:#fff; font-size:21px;font-family: 'arno';letter-spacing:0.1em;}
.night-left ul:last-child li:before{ content:'夜景';position: absolute; top:-5%; left:-20%; font-size:56px; color:#fff;font-family: 'Noto Sans TC', sans-serif; font-weight:bold; letter-spacing:0.25em;}
.activity-title span img{ width:4%; padding:0 5px;}
.nightview div{ width:49.5%;}


@media only screen and (max-width:1200px)
{
.hokkaido-area{padding:3%;}
.area-list ul{ width:49%;}
.area-title .petal-3{ left:12%;}
.area-title .petal-4{ right:12%;}
.nightview .text li{ line-height:26px; font-size:20px;}
.night-left ul:first-child li:last-child{ line-height:20px;}
.fastival-article .text{ padding:3%;}
.fastival-article li{font-size:18px;}
}

@media only screen and (max-width:1024px)
{
.hokkaido-area{ background-position:center;}
.area-list ul{ padding:10px;}
.area-list dl dt span img{ width:20%;}
.nightview .text li, .night-left li p small{ font-size:18px;}
.nightview .text li i{ font-size:15px;}
.night-left li p{font-size:17px; top:23%;}
.night-left ul:last-child li:before{ top:-15%; left:-20%;}
}

@media only screen and (max-width:980px)
{
.area-list{ display:flex; flex-wrap:wrap;}
.area-list ul{ width:48%;display:flex; justify-content:space-between; align-items:center;}
.area-title .petal-3{ left:4%;}
.area-title .petal-4{ right:4%;}
.area-list dl dt{ font-size:50px;}
.area-list dl dd{font-size:15px;}
.petal-1{ width:30%; top:5%; left:35%;}
.petal-2{ width:35%; bottom:8%; left:32%;}
.season{width:35%;}
.season li{ font-size:18px;}
.season li span img{width:9%;}
.fastival-article, .nightview{width:95%;}
}
 
@media only screen and (max-width:768px)
{
.hokkaido-area{ padding:10px; overflow:hidden;}
.area-title p span img{width:8%;}
.area-title .petal-3{ left:0;}
.area-title .petal-4{ right:0;}
.area-list dl dt{ font-size:42px;}
.nightview .text li i{font-size:13.5px;}
.night-left ul:last-child li:before{font-size:50px; letter-spacing:0.15em;}
.night-left li p{ font-size:16px;}
.nightview .text li, .fastival-article li{ font-size:16px; line-height:22px;}
.activity-title span img{width:7%;}
.night-left ul:first-child{width:54%;}
.right ul{ margin:0;}
.petal-1, .petal-2{ display:none;}
}

@media only screen and (max-width:640px)
{
.hokkaido-top{ padding:0 0 30px 0;}
.hokkaido-top .title, .petal-3, .petal-4{ display:none;}
.hokkaido-top .title-m{ display:block; padding:30px 0 10px; background-size:cover;color:#fff; width:100%; text-align: center; box-sizing:border-box;}
.hokkaido-top .title-m p strong{ font-size:70px; letter-spacing:0.1em; font-weight:bold;display: inline-block;border-bottom: 12px solid #87d1cb;line-height:0.7;}
.hokkaido-top .title-m p span{ font-size:45px; font-weight:normal;}
.hokkaido-top .title-m p small{ font-size:26px; letter-spacing:0.4em; line-height:45px;}
.season{width:45%; margin:10px;}
.hokkaido-area{ background-position: inherit;}
.area-list ul li{ vertical-align:-webkit-baseline-middle;}
.area-list dl dt{font-size:50px;}
.area-list dl dd{font-size:18px;}
.area-list ul{width:100%;margin-right:0;}
.area-list ul li{ box-sizing:border-box; padding-left:10px;}
.fastival-article{ margin:20px auto;}
.fastival-article, .nightview{width:100%;}
.fastival-article .text{width:100%; float:none;}
.fastival-article .text img{ width:55%; display:inline-block; vertical-align:top;}
.fastival-article .text ul{ width:40%; display:inline-block; vertical-align:top;}
.night-left ul:first-child li:last-child, .night-left li p small{display:none;}
.night-left ul:last-child li:before{font-size:44px;top:-10%;}
.night-left li p{font-size:18px; line-height:20px; top:30%; left:7%}
.fastival-article .text{ background:none;}
.activity-title span img{ width:9%;}
.fire-bg{ bottom:0; top:inherit;}
.area-title{ padding:0;}
}

@media only screen and (max-width:480px)
{
.season{ float:none; width:100%; margin:0; padding:20px 0 0; display:flex; flex-wrap:wrap; justify-content:center;}	
.season:last-of-type{ padding-bottom:20px;}
.season li{font-size:18px;}
.season li span img{ width:6%;}
.area-title strong{font-size:50px; letter-spacing:0.5rem;}
.activity-title strong{font-size:50px; letter-spacing:0.2em;}
.activity-title span img{width:10%;}
.fastival-article{ background-size:auto;}
.fastival-article .text img{width:80%; padding:10px 0;}
.fastival-article li{ text-shadow:none;font-size:18px; line-height:25px;}
.fastival-article .text ul{ padding:10px; box-sizing:border-box; width:100%; background:rgba(0,0,0,0.4);}
.nightview div{ width:100%;display:flex; flex-wrap:wrap;}
.night-left ul:first-child{ order:2; padding:0 0 10px 20px;box-sizing:border-box; }
.night-left ul:first-child li:last-child, .night-left li p small{ display:block;}
.night-left ul:last-child{ order:1}
.night-left ul:last-child li:before{ top:-3%; left:2%;}
.nightview .text li i, .nightview .night-right{display:none;}
.night-left li p{ top:26%;font-size:18px; line-height:24px;}
.nightview .text li{ font-size:20px; line-height:24px;}
}

@media only screen and (max-width:420px)
{
.area-list ul{flex-wrap:wrap; padding:15px;}
.area-list ul li{ width:100%;}
.area-list dl dt span img{ width:15%;}
.area-list ul:nth-child(even){ display:flex; flex-wrap:wrap;}
.area-list ul:nth-child(even) li:nth-child(odd){ text-align:center;order:2}
.area-list ul:nth-child(even) li:nth-child(even){ order:1}
.area-list ul:nth-child(odd) li:nth-child(even){ text-align:center;}
.area-list ul li:last-child{ padding:10px 0;}
.nightview .text li{font-size:18px;}
.nightview .text li i{font-size:15px;}
}

 @media only screen and (max-width:360px)
 {
.activity-title strong, .area-title strong{font-size:45px;}
.activity-title small{font-size:18px;}
.activity-title span img{ width:12%;}
.hokkaido-top .title-m span{font-size:35px; }
.hokkaido-top .title-m p{font-size:55px;}
.area-title p span img{ padding:0 5px;width:14%;}
.night-left li p{ top:30%;}
.nightview .text li{font-size:17px;}
 }