@charset "utf-8";

/*============
 0 common setting
 1 breadcrumb
 2 main content
 3 link
 4 top button
============*/


/*--
 0 common setting
--*/
html,body{overflow-x:hidden; box-sizing: border-box;}
*{box-sizing: border-box;}
html {
font-size: 62.5%;
line-height: 1.15; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
-webkit-tap-highlight-color: transparent; /* 3*/
}
/*dl,dt,dd,ul,li,ol,li {
margin:0;
padding:0;
text-decoration:none;
}*/

.mb0 {margin-bottom: 0 !important;}
.mb10 {margin-bottom: 1rem !important;}
.mb20 {margin-bottom: 2rem !important;}
.mb40 {margin-bottom: 4rem !important;}
.mt10 {margin-top: 1rem !important;}
.align-c {text-align: center;}
.att{color: #c33;}
hr.line{
border: 1px dashed #ccc;
margin-bottom: 2rem;
}

@media screen and (max-width:736px) {
/*PCのみ適用*/
.pc_only{
display: none;
}
}/*@media screen and (max-width:736px)*/

@media screen and (min-width:737px) {
/*spのみ適用*/
.sp_only{
display: none;
}
}/*@media screen and (min-width:737px)*/



/*--
 1 breadcrumb
--*/
#breadcrumb{
display: none;
}

@media screen and (min-width:737px) {
#breadcrumb {
display: block;
width: 1000px;
margin: 10px auto 15px;
}
}/*@media screen and (min-width:737px) */



/*--
 2 main content
--*/
/*メイン画像*/
#title_lead{
background: url("../img/location_main.webp") no-repeat 80px bottom;
/*background: url("../img/location_main.jpg") no-repeat 80px bottom;*/
background-size: cover;
padding-bottom: 1px;
position: relative;
height: 250px;
}
.fullsize{
margin-left: -25%;
margin-right: -2.1%;
padding-left: 25%;
padding-right: 2.1%;
}
#title_lead h1{
font-size: 4.0rem;
font-family: 'Noto Serif JP', serif;
color: #fff;
padding: 2rem 0 0 3rem;
text-shadow: 2px 2px 3px #333;
}
#title_lead h1::before{
content: "PREMIUM HOKKAIDO";
font-size: 1.2rem;
font-family: 'Noto Serif JP', serif;
color: #fff;
display: block;
}
#title_lead h1::after{
content: "TV DRAMAS & MOVIES LOCATION TOUR";
font-size: 1.2rem;
font-family: 'Noto Serif JP', serif;
color: #fff;
display: block;
}
#title_lead p{
display: none;
}

@media screen and (max-width:350px) {
/*メイン画像*/
#title_lead h1{
font-size: 4.0rem;
padding: 2rem 0 0 2rem;
}
}/*@media screen and (max-width:350px) */

@media screen and (min-width:737px) and ( max-width:1000px){
/*メイン画像*/
#title_lead{
background: url("../img/location_main.webp") no-repeat 100px bottom;
/*background: url("../img/location_main.jpg") no-repeat 100px bottom;
backgroun*/d-size: cover;
padding-top: 1px;
padding-bottom: 1px;
position: relative;
height: 300px;
}
#title_lead h1{
padding: 3rem 0 0 3rem;
}
}/*@media screen and (min-width:737px) and ( max-width:1000px)*/

@media screen and (min-width:1001px) {
/*メイン画像*/
#title_lead{
background: url("../img/location_main.webp") no-repeat center bottom;
/*background: url("../img/location_main.jpg") no-repeat center bottom;*/
padding-top: 1px;
padding-bottom: 1px;
position: relative;
height: 435px;
}
.fullsize{
margin-left:-200%;
margin-right: -200%;
padding-left:200%;
padding-right: 200%;
position: relative;
}
#title_lead h1{
font-size: 6.0rem;
padding: 5rem 0 0 3rem;
}
#title_lead h1::before{
font-size: 2.0rem;
}
#title_lead h1::after{
font-size: 2.0rem;
}
#title_lead div.lead{
width: 1000px;
margin: 0 auto;
}
#title_lead p{
display: block;
position: absolute;
font-size: 3rem;
font-family: 'Noto Serif CJK', serif;
font-weight: 500;
color: #fff;
bottom: 1rem;
left: 48%;
text-shadow: 2px 2px 3px #333;
}
}/*@media screen and (min-width:1001px) */


/*コンテンツ背景*/
div#containbox{
background: url("../img/bg_Contents_Wrap.jpg") repeat-x top;
width: 100%;
padding-top: 2rem;
}

/*コンテンツ枠*/
div#container{
width: 100%;
position: relative;
font-family:'メイリオ', 'Meiryo', 'Helvetica', 'ヒラギノ角ゴシック ProN', 'Arial', 'ＭＳ Ｐゴシック',sans-serif;
font-size: 1.5rem;
line-height: 1.6;
font-feature-settings: "palt";
word-wrap: break-word;
overflow-wrap: break-word;
box-sizing: border-box;
}

@media screen and (min-width:1001px){
/*コンテンツ枠*/
div#container{
width: 1000px;
margin: 0 auto;
}
}/*@media screen and (min-width:1001px)*/


/*おすすめツアー*/
h2.recommend{
font-size: 1.8rem;
font-family: 'Noto Serif JP', serif;
color: #fff;
margin: 0 1rem 1rem;
line-height: 1.3;
background-color: #449944;
border-radius: 5px;
padding: 0.5rem 1rem;
text-align: left;
}
#recommend-tour{
background: url("../img/bg_travel_link.jpg") no-repeat left top;
margin-bottom: 4rem;
}
#recommend-tour div{
padding: 0 1rem;
width: 100%;
margin-bottom: 2rem;
}
#recommend-tour div.tour-lead{
padding-top: 140px;
}
#recommend-tour div.tour{
background-color: #eee;
padding: 1rem;
margin: 0 0 1rem;
width: auto;
}
#recommend-tour div ul{
display: flex;
margin-top: 0.5rem;
}
#recommend-tour div.tour img{
margin-right: 1rem;
}
#recommend-tour p.tour-txt{
margin: 7rem 1rem 2rem;
}
#recommend-tour div.tour h3{
margin-bottom: 0.5rem;
color: #449444;
}

@media screen and (min-width:737px) {
/*おすすめツアー*/
h2.recommend{
font-size: 2.3rem;
}
#recommend-tour{
background-size: contain;
padding: 0;
border: 1px solid #5e5e5e;
border-radius: 5px;
}
#recommend-tour div{
margin-bottom: 3rem;
}
#recommend-tour div.tour-lead{
width: 100%;
height: 210px;
padding-top: 0;
margin-bottom: 1rem;
position: relative;
}
#recommend-tour p.tour-txt{
background-color: rgba(250,252,247,0.7);
padding: 1rem;
margin: 3rem 0 1rem;
position: absolute;
display: block;
width: 65%;
top: 3rem;
right: 1rem;
}
#recommend-tour div.tour-box{
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-bottom: 0;
width: 100%;
}
#recommend-tour div.tour{
width: calc((100% - 30px)/2);
margin: 0 3rem 1rem 0;
background-color: #f4f9fb;
box-shadow: 1px 1px 2px #aaa;
}
#recommend-tour div.tour img{
margin-right: 2rem;
}
#recommend-tour div:nth-of-type(even){
margin-right: 0;
}
}/*@media screen and (min-width:737px)*/

@media screen and (min-width:737px) and ( max-width:1000px){
/*おすすめツアー*/
#recommend-tour{
width: calc(100% - 2rem);
margin: 0 1rem 4rem 1rem;
}
#recommend-tour div.tour{
width: calc((100% - 15px)/2);
margin: 0 1.5rem 1rem 0;
}
#recommend-tour div:nth-of-type(even){
margin-right: 0;
}
}/*@media screen and (min-width:737px) and ( max-width:1000px)*/

@media screen and (min-width:1001px) {
/*おすすめツアー*/
h2.recommend{
margin: 0 0 1rem;
}
#recommend-tour{
width: 100%;
margin-bottom:4rem;
}
}/*@media screen and (min-width:1001px)*/



/* TVドラマ・映画ロケ地ダイジェスト */
section#location{
margin-bottom: 2rem;
padding: 0 1rem;
background: url("../img/bg_location.jpg") no-repeat left top;
background-size: 100%;
}
div.location-box{
margin-bottom: 2rem;
}
div.location-box div.lead{
padding: 1rem;
}

/* ダイジェスト タイトル */
section#location h2{
font-size: 4rem;
font-family: 'Noto Serif JP', serif;
color: #074197;
margin: 0;
line-height: 1.3;
text-shadow: 2px 2px 3px #9eb2bb;
}
section#location h2::before{
content: "TVドラマ・映画ロケ地";
font-size: 2.0rem;
font-family: 'Noto Serif JP', serif;
color: #074197;
display: block;
}
p.leadtxt{
color: #074197;
font-weight: bold;
margin-bottom: 1rem;
}

/*エリアマップ*/
div.location-box div#map-box{
position: relative;
width: 350px;
margin: 0 auto;
}
div.location-box div#map-box img{
width: auto;
}
ul.spot-btn li{
position: absolute;
}
ul.spot-txt li{
position: absolute;
}

/*マップ ナンバーボタン*/
ul.spot-btn li a{
background-color: #aa3e3e;
border-radius: 50%;
font-size: 1.3rem;
width: 2rem;
height: 2rem;
display: block;
font-weight: bold;
line-height: 1.3;
border: 2px solid #e98686;
text-align: center;
}
ul.spot-btn li a.active{
background-color: #fff;
border: 2px solid #e98686;
}
ul.spot-btn li:hover a{
background-color: #fff;
border: 2px solid #e98686;
}
ul.spot-btn li a:link{
color: #fff;
}
ul.spot-btn li a.active:link{
color: #aa3e3e;
}
ul.spot-btn li:hover a:link{
color: #aa3e3e;
}
ul.spot-btn li.mark-a{
top:49%;
left:47.8%;
}
ul.spot-btn li.mark-b{
top:55%;
left:41%;
}
ul.spot-btn li.mark-c{
top:7%;
left:41%;
}
ul.spot-btn li.mark-d{
top:41%;
left:75%;
}
ul.spot-btn li.mark-e{
top:58%;
left:47.5%;
}
ul.spot-btn li.mark-f{
top:52%;
left:22%;
}
ul.spot-btn li.mark-g{
top:82%;
left:17%;
}

/*マップ スポット名*/
ul.spot-txt li a{
color: #457ca1;
background-color: #fff;
border: 1px solid #aa3e3e;
font-size: 1.1rem;
padding: 0.4rem 0.6rem;
line-height: 1.0;
text-align: center;
display: block;
}
ul.spot-txt li a.active{
background-color: #aa3e3e;
color: #fff;
}
ul.spot-txt li:hover a{
background-color: #aa3e3e;
color: #fff;
}
ul.spot-txt li a:link{
color: #aa3e3e;
}
ul.spot-txt li a.active:link{
color: #fff;
}
ul.spot-txt li:hover a:link{
color: #fff;
}
ul.spot-txt li.name-a{
top:49%;
left:54.5%;
}
ul.spot-txt li.name-b{
top:62.5%;
left:25%;
}
ul.spot-txt li.name-c{
top:15%;
left:33%;
}
ul.spot-txt li.name-d{
top:33%;
left:65%;
}
ul.spot-txt li.name-e{
top:58%;
left:54.5%;
}
ul.spot-txt li.name-f{
top:44%;
left:10%;
}
ul.spot-txt li.name-g{
top:74%;
left:3%;
}

/*富良野エリア タイトル*/
div.location-box div.arealead{
margin-top: 2rem;
}
div.location-box div.arealead h3{
font-family: 'Noto Serif JP', serif;
font-size: 2.5rem;
border: 1px solid #efb6b6;
border-radius: 2rem;
margin-bottom: 1.5rem;
padding: 0.5rem 1rem;
width: 29rem;
}
div.location-box div.arealead h3 span{
background-color: #aa3e3e;
border-radius: 50%;
font-size: 2.0rem;
color: #fff;
width: 3rem;
height: 3rem;
display: inline-block;
margin-right: 0.8rem;
line-height: 1.4;
border: 2px solid #e98686;
text-align: center;
}

/*エリア ロケ地データ*/
div.location-box dl.data{
width: 100%;
display: flex;
flex-wrap: wrap;
margin-bottom: 1rem;
}
div.location-box dl.data dt{
width: 6.5rem;
margin-right: 1.5rem;
font-weight: bold;
color: #19739a;
}
div.location-box dl.data dd{
width: calc(100% - 8rem);
position: relative;
padding-left: 1.5rem;
}
div.location-box dl.data dd::before{
content: "";
position: absolute;
top: 0.3rem;
bottom: 0.3rem;
left: 0;
/*border-left: 0.2rem #ccc solid;*/
border-left: 0.3rem #19739a double;
}


@media screen and (min-width:737px) {
/* TVドラマ・映画ロケ地ダイジェスト */
section#location{
border: 1px solid #5e5e5e;
border-radius: 5px;
margin-bottom: 4rem;
background-position: right top;
background-size: auto;
}
div.location-box{
position: relative;
}
div.location-box div.lead{
padding: 2rem 6rem 0 2rem;
width: 60%;
}

/* ダイジェスト タイトル */
section#location h2{
font-size: 6rem;
text-shadow: 2px 2px 3px #c9d8df;
}
section#location h2::before{
font-size: 2.4rem;
}

/*エリアマップ*/
div.location-box div.arealink{
position: absolute;
width: 35rem;
margin: 2.5rem 1rem 0 0;
top: 0;
right: 0;
}
div.location-box div#map-box{
width: 35rem;
}
div.location-box div#map-box img{
width: auto;
}

/*富良野エリア タイトル*/
div.location-box div.arealead{
width: 60%;
}
}/*@media screen and (min-width:737px)*/

@media screen and (min-width:737px) and ( max-width:1000px){
/* TVドラマ・映画ロケ地ダイジェスト */
section#location{
margin: 0 1rem 4rem;
}
div.location-box div.lead{
padding: 4rem 2rem 0 2rem;
width: 50%;
}

/*富良野エリア タイトル*/
div.location-box div.arealead{
width: 50%;
}
}/*@media screen and (min-width:737px) and ( max-width:1000px)*/



/*富良野・麓郷エリア*/
div.area-highlights div.sec-map{
width: 100%;
margin-bottom: 2rem;
}
div.area-highlights div.sec-map img{
width: 100%;
}
div.area-highlights div.sec-spot{
margin-bottom: 4rem;
}
div#mapfurano{
font-size: 0;
position: relative;
}
ul.spot-furano li{
position: absolute;
}
div.area-highlights ul.spot-furano img{
opacity: 0;
}
ul.spot-furano li.map-1{
top:24.6%;
left:74.5%;
}
ul.spot-furano li.map-2{
top:22.9%;
left:63.8%;
}
ul.spot-furano li.map-3{
top:19%;
left:45.1%;
}
ul.spot-furano li.map-4{
top:26.2%;
left:67%;
}
ul.spot-furano li.map-5{
top:11%;
left:21%;
}
ul.spot-furano li.map-6{
top:24.9%;
left:15%;
}
ul.spot-furano li.map-7{
top:73.2%;
left:39.7%;
}



/*見どころitem*/
section.area{
counter-reset: marker;
}
div.spot-item1 dd{
background: url("../img/furano_img_05.png") no-repeat right top;
}
dl.hl-item{
margin-bottom: 2rem;
}
dl.hl-item dt{
background-color: #19739a;
padding: 0.2rem 0.2rem 0.2rem 0.5rem;
margin-bottom: 0.5rem;
font-weight: bold;
color: #fff;
}
dl.hl-item.ft dt{
background-color: #ca7978;
}
dl.hl-item.ks dt{
background-color: #449944;
}
dl.hl-item dd.align-c{
font-size: 0;
margin-bottom: 1rem;
}
dl.hl-item dd p{
margin: 0 0.8rem 1rem;
}
dl.hl-item dd p.farmtomita{
padding-top: 27rem;
width: 100%;
}
dl.hl-item dd p span{
color: #0488cc;
}
dl.hl-item img{
width: auto;
}


/*スポット 連番*/
dt .order::before {
content: counter(marker/*, upper-alpha*/);
counter-increment: marker;
font-size: 1.3rem;
background-color: #fff;
color: #19739a;
padding: 0 0.5rem;
border-radius: 5px;
margin-right: 0.5rem;
border: 1px solid #19739a;
}
dl.ft dt .order::before {
color: #ca7978;
border: 1px solid #ca7978;
}
dl.ks dt .order::before {
color: #449944;
border: 1px solid #449944;
}


/*エリア 見どころ その他のスポット*/
h4.other-spot{
font-size: 2.4rem;
font-family: 'Noto Serif JP', serif;
margin: 1.5rem 0 1rem 0;
color: #074197;
position: relative;
padding-left: 1.5rem;
line-height: 1.4;
}
h4.other-spot::before{
content: "";
background-color:#074197;
width: 5px;
position: absolute;
top: 0;
left: 0;
height: 95%;
}
dl.ot-item{
margin-bottom: 2rem;
}
dl.ot-item dt{
background-color: #19739a;
padding: 0.5rem 1rem;
margin-bottom: 0.5rem;
font-weight: bold;
color: #fff;
}
dl.ot-item img{
width: auto;
}
dl.ot-item dd{
font-size: 0;
}
dl.ot-item dd.align-c{
margin-bottom: 1rem;
}
dl.ot-item dd p{
margin: 0 0.8rem;
font-size: 1.5rem;
}
dl.ot-item dd p span{
color: #0488cc;
}
div.area-highlights2{
margin-bottom: 2rem;
}
div.area-highlights3{
position: relative;
margin-bottom: 2rem;
}
div.area-highlights3 .txt{
margin-bottom: 2rem; 
}
div.area-highlights3 .txt h4{
position: absolute;
top: 2rem;
left: 1rem;
color: #fff;
font-size: 1.9rem;
font-family: 'Noto Serif JP', serif;
margin-bottom: 1rem;
line-height: 1.3;
text-shadow: 2px 2px 3px #43424e;
}
div.area-highlights3 img{
width: 100%;
}

/*北海道の四季 リンクボタン*/
div.flower-link{
background-color: #0058b2;
position: relative;
overflow: hidden;
}
div.flower-link:hover{
background-color: #0080d4;
transition: all 0.5s ease;
}
div.flower-link ul{
display: flex;
width: 100%;
border: 4px double #fff;
padding: 1rem;
color: #fff;
align-items: center;
justify-content: space-between;
}
div.flower-link ul li{
font-family: 'Noto Serif JP', serif;
}
div.flower-link ul li.flower{
font-size: 2.2rem;
line-height: 1.3;
}
div.flower-link ul li.flower::before{
content: "四季の花";
font-family:'メイリオ', 'Meiryo', 'Helvetica', 'ヒラギノ角ゴシック ProN', 'Arial', 'ＭＳ Ｐゴシック',sans-serif;
font-size: 1.5rem;
color: #ffe699;
display: block;
line-height: 1.5;
}
div.flower-link ul li.flower::after{
content: "FLOWER SPECIAL IN FOUR SEASONS";
font-size: 1.0rem;
color: #ffe699;
display: block;
line-height: 1.8;
}
div.flower-link ul li.arrow img{
margin-left: 1.5rem;
margin-right: 0.5rem;
width: 3rem;
filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7457%) hue-rotate(58deg) brightness(98%) contrast(98%);
position: static;
transform: none;
opacity: 0.8;
}
div.flower-link img{
position: absolute;
opacity: 0.25;
top: 2rem;
right: -2rem;
width: auto;
transform: rotate(-10deg);
}



/*その他のエリア*/
div.spot-item{
background-color: #fff;
margin-bottom: 2rem;
padding: 1rem;
border: 1px solid #ccc;
display: flex;
flex-direction: column;
}
div.spot-item h3{
font-family: 'Noto Serif JP', serif;
font-size: 2.5rem;
border: 1px solid #efb6b6;
border-radius: 2rem;
margin-bottom: 1.5rem;
padding: 0.5rem 1rem;
}
div.spot-item h3 span{
background-color: #aa3e3e;
border-radius: 50%;
font-size: 2.0rem;
color: #fff;
width: 3rem;
height: 3rem;
display: inline-block;
margin-right: 0.8rem;
line-height: 1.4;
border: 2px solid #e98686;
text-align: center;
}
div.spot-databox{
flex-grow: 1;
}
div.spot-databox dl.data{
width: 100%;
display: flex;
flex-wrap: wrap;
margin-bottom: 1rem;
}
div.spot-databox dl.data dt{
width: 6.5rem;
margin-right: 1.5rem;
font-weight: bold;
color: #187497;
}
div.spot-databox dl.data dd{
width: calc(100% - 8rem);
position: relative;
padding-left: 1.5rem;
}
div.spot-databox dl.data dd::before{
content: "";
position: absolute;
top: 0.3rem;
bottom: 0.3rem;
left: 0;
/*border-left: 0.2rem #ccc solid;*/
border-left: 0.3rem #187497 double;
}

div.spot-item p.align-c{
font-size: 0;
margin: 1rem 0;
}
div.spot-item img{
width: auto;
}
dl.spot-data dt{
font-weight: bold;
color: #187497;
}
dl.spot-data dd{
margin-bottom: 1rem;
}
dl.spot-data dd:last-child{
margin-bottom: 0;
}



@media screen and (min-width:737px) {
/*富良野・麓郷エリア*/
div.area-highlights{
display: flex;
flex-wrap: wrap;
}
div.area-highlights div.sec-map{
width: 414px;
margin-right: 2rem
}
div.area-highlights div.sec-spot{
flex: 1;
margin-bottom: 0;
}
div.area-highlights div.sec-spot img{
width: 100%;
}
div.area-highlights ul.spot-furano img{
width: auto;
opacity: 1;
}
div.area-highlights ul.spot-furano a.active img{
opacity: 0;
}
ul.spot-furano li.map-1{
background-image: url("../img/furano_spot01_on.png");
}
ul.spot-furano li.map-2{
background-image: url("../img/furano_spot02_on.png");
}
ul.spot-furano li.map-3{
background-image: url("../img/furano_spot03_on.png");
}
ul.spot-furano li.map-4{
background-image: url("../img/furano_spot04_on.png");
}
ul.spot-furano li.map-5{
background-image: url("../img/furano_spot05_on.png");
}
ul.spot-furano li.map-6{
background-image: url("../img/furano_spot06_on.png");
}
ul.spot-furano li.map-7{
background-image: url("../img/furano_spot07_on.png");
}

/*見どころitem*/
div.spot-item1{
margin-bottom: 2rem;
}
div.spot-item2{
display: flex;
margin-bottom: 1rem;
flex-wrap: wrap;
}
div.spot-item2 dl{
width: calc((100% - 2rem)/2);
margin-right: 2rem
}
div.spot-item2 dl:nth-child(2){
margin-right: 0
}
dl.hl-item{
margin-bottom: 1rem;
}
dl.hl-item dt.active{
background-color: #b53030;
}
dl.hl-item dt:hover{
background-color: #b53030;
}
dl.hl-item dd p{
margin: 0 0.5rem;
}
dl.hl-item dd p.farmtomita{
padding-top: 20.5rem;
width: 54%;
}

/*スポット 連番*/
dt.active .order::before {
color: #aa3e3e;
border: 1px solid #aa3e3e;
}
dt:hover .order::before {
color: #aa3e3e;
border: 1px solid #aa3e3e;
}
dl.ft dt.active .order::before {
color: #aa3e3e;
border: 1px solid #aa3e3e;
}
dl.ft dt:hover .order::before {
color: #aa3e3e;
border: 1px solid #aa3e3e;
}
dl.ks dt.active .order::before {
color: #aa3e3e;
border: 1px solid #aa3e3e;
}
dl.ks dt:hover .order::before {
color: #aa3e3e;
border: 1px solid #aa3e3e;
}

/*エリア 見どころ その他のスポット*/
h4.other-spot{
line-height: 1.8;
margin-bottom: 0.5rem;
}
h4.other-spot::before{
height: 90%;
}
div.area-highlights2{
display: flex;
flex-wrap: nowrap;
margin-bottom: 0;
}
dl.ot-item{
width: calc((100% - 4rem)/5);
margin-right: 1rem;
display: flex;
flex-direction: column;
}
dl.ot-item:last-child{
margin-right: 0;
}
dl.ot-item dt{
height: 6rem;
display: flex;
align-items: center;
justify-content: center;
padding: 0.5rem;
text-align: center;
}
dl.ot-item img{
width: 100%;
}
dl.ot-item dd:last-child{
flex-grow: 1;
}
div.area-highlights3 .txt{
position: absolute;
top: 2rem;
left: 1rem;
color: #fff;
margin-bottom: 0;
}
div.area-highlights3 .txt h4{
position: initial;
font-size: 2.5rem;
font-family: 'Noto Serif JP', serif;
margin-bottom: 1rem;
line-height: 1.3;
}

/*北海道の四季 リンクボタン*/
a.flower-link-box{
position: absolute;
bottom: 2rem;
left: 0;
right: 0;
margin: auto;
width:-moz-fit-content; /* Firefox */
width: fit-content;
}
div.flower-link img{
top: 0.5rem;
}


/*その他のエリア*/
div.other-areas{
display: flex;
flex-wrap: wrap;
}
div.other-areas div.spot-item{
width: calc((100% - 20px)/3);
margin-right: 1rem;
}
div.other-areas div:nth-child(3n){
margin-right: 0;
}
div.other-areas div:nth-child(4),
div.other-areas div:nth-child(5),
div.other-areas div:nth-child(6){
margin-bottom: 1rem;
}
div.spot-item img{
width: auto;
}
dl.spot-data.upper{
height: 16rem;
}
dl.spot-data.lower{
height: 11rem;
}
}/*@media screen and (min-width:737px)*/


@media screen and (min-width:506px) and ( max-width:736px){
/*富良野・麓郷エリア*/
div.spot-item1 dd{
background-position: top center;
}
}/*@media screen and (min-width:506px) and ( max-width:736px)*/

@media screen and (min-width:737px) and ( max-width:840px){
/*エリア 見どころ その他のスポット*/
dl.ot-item dt{
height: 8rem;
}
}/*@media screen and (min-width:737px) and ( max-width:840px)*/

@media screen and (min-width:737px) and ( max-width:950px){
/*見どころitem*/
dl.hl-item dd p.farmtomita{
padding-top: 27rem;
width: 100%;
}
}/*@media screen and (min-width:737px) and ( max-width:950px)*/

@media screen and (min-width:737px) and ( max-width:1000px){
/*その他のエリア*/
div.spot-item img{
width: 100%;
}
dl.spot-data.upper{
height: 19rem;
}
dl.spot-data.lower{
height: 13rem;
}
}/*@media screen and (min-width:737px) and ( max-width:1000px)*/




@media screen and (min-width:1001px) {
/*富良野・麓郷エリア*/
div.spot-item1 dd{
background-position: top center;
/*background-size: cover;*/
}
}/*@media screen and (min-width:1001px)*/



@media all and (-ms-high-contrast:none){
  *::-ms-backdrop, a.flower-link-box{ width: 430px; } /* IE11 */
}

@media screen and (min-width:500px) {
/*北海道の四季 リンクボタン*/
a.flower-link-box br{
display: none;
}
}/*@media screen and (min-width:506px)*/



/*--
 3 link
--*/
/*リンク*/
section#link{
padding: 0 1rem;
margin-bottom: 4rem;
}
section#link ul li{
text-align: center;
font-size: 0;
margin-bottom: 1.5rem;
}
section#link ul li img{
width: auto;
}
section#link a:hover{
opacity: 0.7;
}

@media screen and (min-width:737px) {
/*リンク*/
section#link{
padding: 0;
}
section#link ul{
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
}
section#link ul li{
width: calc((100% - 20px) /3);
text-align: center;
margin-right: 1rem;
margin-bottom: 0;
}
section#link ul li:nth-child(3){
margin-right: 0;
}
section#link ul li img{
width: 100%;
}
}/*@media screen and (min-width:737px)*/

@media screen and (max-width:330px){
/*リンク*/
section#link ul li img{
width: 100%;
}
}/*@media screen and (max-width:330px)*/

@media screen and (min-width:737px) and ( max-width:1000px){
/*リンク*/
section#link{
padding: 0 1rem;
}
}/*@media screen and (min-width:737px) and ( max-width:1000px)*/




/*--
 4 top button
--*/
/*pagetop*/
#pagetop {
	position: fixed;
	bottom: 1em;
	right: 1em;
	z-index:50;
	width:4em;
	height:4em;
	border-radius:50%;
	overflow:hidden;
	text-align: center;
}
#pagetop a {
	position: relative;
	display:block;
	width:100%;
	height:100%;
	padding:0;
	background-image: none;
	background-color:rgba(119,119,119,0.4);
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}
#pagetop a:before{
	content: "▲";
	display: block;
	position: absolute;
	color: #FFF;
	font-size: 2em;
    text-indent: 0;
	left: 50%;
	top: 50%;
	transform: translateY(-50%) translateX(-50%);
}
#pagetop a:hover {
	text-decoration: none;
	background-color: #a5a5a5;
}