@charset 'utf-8';
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;700;900&display=swap');
@import url('https://fonts.googleapis.com/earlyaccess/cwtexyen.css&display=swap');
@import url(../fonts/style.css);
/*
  danny 240328
  1. $Reset
  2. $font
  3. $body,html
  4. $共用
  5. $Mobile
  6. $Pad
  7. $橫的版型
  8. $Pc
  9. $1025~1279
*/

/* $Reset
--------------------------------------------------------------------------------------*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote{margin:0;padding:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,var{font-style:normal;font-weight:400}ol,ul{list-style:none}q:before,q:after{content:''}abbr,acronym{border:0}a{background:transparent;text-decoration:none;color:inherit;cursor:pointer;line-height:1em;display:inline-block}a:active{outline:0}input,textarea,button,select,option{border:0;margin:0;outline:none;padding:0;font-size:1.6rem;font-family:'Noto Sans TC','Microsoft JhengHei','PingFang TC','Helvetica','Arial',sans-serif;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none}select::-ms-expand{display:none}input::-moz-placeholder,textarea::-moz-placeholder{color:#ccc}input:-ms-input-placeholder,textarea:-ms-input-placeholder{color:#ccc}input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{color:#ccc}





/* $font
--------------------------------------------------------------------------------------*/
:before ,:after{ font-family:'icomoon','Noto Sans TC','Microsoft JhengHei','PingFang TC','Helvetica','Arial',sans-serif;}





/* $body,html
--------------------------------------------------------------------------------------*/
html,body{ width: 100%; font-family:'Noto Sans TC','Microsoft JhengHei','PingFang TC','Helvetica','Arial',sans-serif; font-size:10px; }





/* $共用
--------------------------------------------------------------------------------------*/
/*----清除浮動技巧----*/
.clearfix:before,.clearfix:after {content: ' ';display: table;}
.clearfix:after {clear: both;}
.clearfix {*zoom: 1;}
/*----清除浮動技巧----*/

/* IMAGE REPLACE */
.imageReplace{ text-indent: 100%; white-space: nowrap; overflow: hidden;}

/* float */
.floatL{ float: left;}
.floatR{ float: right;}

/* button reset、input reset、select reset */
button, input, select{ font-family:'Noto Sans TC','Microsoft JhengHei','PingFang TC','Helvetica','Arial',sans-serif; border: none; }




/* $Mobile
--------------------------------------------------------------------------------------*/
html,body{ width: 100%; -webkit-text-size-adjust:none; background: #f7f7f7; position: relative; }

/* header */
header{ display: flex; justify-content: space-between; align-items: center; width: 100%; height: 60px; background: rgba(255,255,255,1); position: fixed; left: 0; top: 0; box-sizing: border-box; padding: 0 5vw; box-shadow: 0 3px 8px rgba(0, 0, 0, .1); z-index: 999; }
header h3{ width: 30vw; position: relative; }
header h3 img{ width: 100%; }
header h3 a{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; }
header .nav-box{ display: flex; display: none;  }
header .nav-box.active{ display: flex; width: 100%; height:calc(100vh - 61px); position: fixed; left: 0; top: 60px; background: #fff; }
header nav>ul{ display: flex;  }
header .nav-box.active nav{ width: 100%;  }
header .nav-box.active nav>ul{ width: 100%; flex-direction: column;  }
header .nav-box.active nav>ul>li:nth-child(odd){ background: #fef7e0;  }
header .nav-box.active nav>ul>li:nth-child(even){ background: #F1F1F1;  }
header nav>ul>li{ display: flex; justify-content: center; align-items: center; flex-wrap: wrap; box-sizing: border-box; padding: 0 clamp(2vw,3vw,60px); font-size: 2rem; color: #000; white-space:nowrap; height: 60px;  }
header nav>ul>li>a{ position: relative; transition: all .4s cubic-bezier(.4,0,.2,1); }
header nav>ul>li>a:hover:after{ width: 100%; }
header .header-search{ width: clamp(120px,10vw,150px); height: 35px; border-radius: 35px; border: 1px solid #CECECE; display: flex; align-items: center; position: absolute; right: 60px; }
header .header-search input[type='text']{ width: calc( 100% - 35px); height: 100%; box-sizing: border-box; padding: 0 10px 0 10px; font-size: clamp(1.3rem,1.5vw,1.5rem); color: #575757; background: transparent;  }
header .header-search button{ display: flex; justify-content: center; align-items: center; width: 35px; height: 35px; border-radius: 100%; background: #ffc300; }
header .header-search button:after{ content: '\e926'; font-size: 2rem; color: #fff; }
/* hamburger-box */
.hamburger-box{ width: 24px; height: 20px; position: relative; cursor: pointer; right: auto; top: auto;  }
.hamburger-box li{ width: 100%; height: 2px; background: #FCCF00; position: absolute; transition:all .3s cubic-bezier(0.39, 0.575, 0.565, 1); }
.hamburger-box li:nth-child(1){ top: 0; }
.hamburger-box li:nth-child(2){ top: 8.5px;  }
.hamburger-box li:nth-child(3){ bottom: 0; }
.hamburger-box.active>li:nth-child(1){ transform:rotate(45deg); top:50%; }
.hamburger-box.active>li:nth-child(2){ opacity:0; }
.hamburger-box.active>li:nth-child(3){ transform:rotate(-45deg); top:50%; }

/* idx kv */
.idx-kv{ width: 100%; margin: 0 auto; position: relative; box-sizing: border-box; padding: 100px 0 0 0; }
.idx-kv .tit .pc{ display: none; }
.idx-kv .tit .mobile{ display: block; width: 85vw; margin: 0 auto 20px; }
.idx-kv .kv-slide_01{ width: auto; margin: 0 auto; }
.idx-kv .kv-slide_02{ width: 35.5vw; max-width: 550px; position: absolute; left: 31%; top: 0; display: none; }
.idx-kv .kv-slide_03{ width: 29vw; max-width: 450px; position: absolute; right: 0; top: 0; display: none; }
/* .idx-kv .img-box{ border-radius: 50px; overflow: hidden; width: 100%; height: 0; padding-bottom: 78.125%; } */
.idx-kv .img-box{ border-radius: 50px; overflow: hidden; width: 100%; aspect-ratio: 1/1; }
.idx-kv .kv-slide_01 .img-box{ width: 85vw;  }
/* .idx-kv .kv-slide_03 .img-box{ width: 29vw; max-width: 450px; height: 29vw; max-height: 450px; } */
.idx-kv .kv-slide_03 .img-box{ width: 29vw; max-width: 450px;  }
.idx-kv .img-box img{ width: 100%; aspect-ratio: 1/1; object-fit: cover;  }
.idx-kv .txt-box{ font-size: 1.6rem; color: #3e3a39; text-align: center; margin: 10px 0 0 0; }
.idx-kv .txt-box:before{ content:'\e97b'; font-size: 110%; color: #4aa899; margin: 0 5px 0 0; }
.idx-kv .kv-slide li{ position: relative; margin: 0 5px; }
.idx-kv .kv-slide li a{ width: 100%; height: 100%; line-height: 0; position: absolute; left: 0; top: 0; }

/* idx search */
.idx-search{ display: flex; justify-content: end; margin: 30px 0 40px 0; position: relative; }
.idx-search .search-wrap{ display: flex; align-items: center; width: 100vw; height: 80px;  border-radius: 60px 0 0 60px; background: #ffc300; box-sizing: border-box; padding: 0 0 0 10px; }
.idx-search .search-box{ display: flex; flex-direction: column; align-items: center; margin: 0 0 0 10px; }
.idx-search .search-box>span{ font-size: 1.4rem; }
.idx-search .catfoot{ width: 40px; }
.idx-search .searchcat{ align-self: end; width: 100px; }
.idx-search .search-bar{ width: 100%; height: 40px; border-radius: 18px; background: #fff; display: flex; align-items: center; margin: 5px 0 0 0;  }
.idx-search .search-bar input[type='text']{ width: calc( 100% - 50px); height: 100%; box-sizing: border-box; padding: 0 0 0 20px; font-size: 1.5em; color: #575757; background: transparent;  }
.idx-search .search-bar button{ display: flex; justify-content: center; align-items: center; width: 70px; height: 45px; background: transparent;  }
.idx-search .search-bar button:after{ content: '\e926'; font-size: 3rem; color: #000;  }

.tit-box{ display: flex; flex-direction: column; justify-content: center; align-items: center; box-sizing: border-box; padding: 0 5vw; }
.tit-txt{ display: inline-flex; align-items: center; font-size: 2.6rem; color: #3e3a39; position: relative; margin: 0 0 20px 0; }
.tit-txt>span:nth-child(1){ font-size: 3.2rem; font-family:'Helvetica','Arial',sans-serif; font-weight: 300; z-index: 1; }
.tit-txt>span:nth-child(2){ display: block; width: 40px; height: 1px; border-bottom:1px solid #575757; transform:rotate(-50deg); margin: 0 -10px; z-index: 1;  }
.tit-txt>span:nth-child(3){ z-index: 1; }
.tit-txt:after{ content: ''; width: 110%; height: 25px; border-radius: 20px; background: #e6e6e6; position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%);   }
.tit-info{ font-size: 1.4rem; color: #3e3a39; }

/* idx taste  */
.idx-taste{  }
.idx-taste .taste-list{ display: flex; flex-wrap: wrap; justify-content: center; width: 96vw; margin: 20px auto 0; }
.idx-taste .taste-list>li{ width: 45vw; border-radius: 30px; background: #fff; box-sizing: border-box; margin: 0 1vw 3vw; padding: 0 0 20px 0; overflow: hidden; position: relative; transition: all .4s cubic-bezier(.4,0,.2,1); }
.idx-taste .taste-list>li a{ width: 100%; height: 100%; line-height: 0; position: absolute; left: 0; top: 0; }
.idx-taste .taste-list .img-box{ width: 100%; height:0; padding-bottom: 78.125%; overflow: hidden; }
.idx-taste .taste-list .img-box img{ width: 100%; height: auto; }
.idx-taste .taste-list .txt-box{ font-size: 1.3rem; line-height: 1.58; color: #3e3a39; text-align: center; box-sizing: border-box; padding: 10px 15px 0 15px; }
.idx-taste .taste-list .tit{ font-size: 1.5rem; color: #20846d;  margin: 0 0 5px 0; }

/* idx theme */
.idx-theme{ margin: 40px 0 0 0; }
.idx-theme .theme-slide{ width: 96vw; margin: 20px auto 0; position: relative; }
.idx-theme .theme-slick{ width: 90vw; margin: 0 auto; }
.idx-theme .theme-slick li.slick-slide{ border-radius: 50px; background: #fff; box-sizing: border-box; padding: 30px 20px 60px 20px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; margin: 0 auto; position: relative; }
.idx-theme .theme-slick .img-box{ width: 80vw; height: 56vw; overflow: hidden; flex-shrink: 0; }
.idx-theme .theme-slick .img-box img{ width: 100%; height: 100%; object-fit: cover; }
.idx-theme .theme-slick .txt-box{ width: 100%; box-sizing: border-box; padding: 10px 0 0 0; font-size: 1.4rem; line-height: 1.58; color: #3e3a39; }
.idx-theme .theme-slick .txt-box .tit{ font-size: 2rem; line-height: 1.58; color: #20846d; }
.idx-theme .theme-slick .txt-box .tit:after{ content: ''; display: block; width: 100%; height: 1px; background: #e6e6e6; margin: 10px 0 10px 0; }
.idx-theme .theme-slick .info{ display: flex; justify-content: space-between; align-items: center; margin: 0 0 20px 0; }
.idx-theme .theme-slick .info .col-1{ font-size: 1.2rem; color: #9a9a9a; font-weight: bold; }
.idx-theme .theme-slick .info .tag-list{ display: flex; font-size: 1.3rem; color: #575757; }
.idx-theme .theme-slick .info .tag-list li+li{ margin: 0 0 0 5px; }
.idx-theme .theme-slick li.slick-slide a.btn_more{ position: absolute; right: 30px; bottom: 20px;  font-size: 1.5rem; color: #20846d; display: flex; align-items: center; }
.idx-theme .theme-slick li.slick-slide a.btn_more:after{ content: '\e95d'; width: 25px; height: 25px; border-radius: 100%; background: #20846d; display: flex; justify-content: center; align-items: center; color: #fff; margin: 0 0 0 5px; }
.idx-theme .theme-slide .slide-arrowL{ position: absolute; width: 30px; height: 16px; left: -5px; top: 25%; cursor: pointer; }
.idx-theme .theme-slide .slide-arrowL:before{ content: ''; display: block; width: 100%; height: 2px; background: #9a9a9a; position: absolute; left: 0; bottom: 0; }
.idx-theme .theme-slide .slide-arrowL:after{ content: ''; display: block; width: 18px; height: 2px; border-bottom:2px solid #9a9a9a; transform:rotate(-45deg); position: absolute; left: -2px; bottom: 6px; }
.idx-theme .theme-slide .slide-arrowR{ position: absolute; width: 30px; height: 16px; right: -5px; top: 26%; cursor: pointer; }
.idx-theme .theme-slide .slide-arrowR:before{ content: ''; display: block; width: 100%; height: 2px; background: #9a9a9a; position: absolute; left: 0; bottom: 0; }
.idx-theme .theme-slide .slide-arrowR:after{ content: ''; display: block; width: 18px; height: 2px; border-bottom:2px solid #9a9a9a; transform:rotate(45deg); position: absolute; right: -2px; bottom: 6px; }
.idx-theme .theme-slide .slide-arrowL:hover:before{ background:#20846d; }
.idx-theme .theme-slide .slide-arrowL:hover:after{ border-bottom:2px solid#20846d; }
.idx-theme .theme-slide .slide-arrowR:hover:before{ background:#20846d; }
.idx-theme .theme-slide .slide-arrowR:hover:after{ border-bottom:2px solid#20846d; }

/* common */
.common-wrap{ width: 100%; box-sizing: border-box; padding: 80px 0 0 0; }

/* map */
.common-wrap.map{  }
.map-box{ width: 100%; display: flex; flex-direction: column; align-items: center; background: #fff; overflow-x: hidden; }
.map-box .pc{ display: none; }
.map-box .mobile{ display: block; }
.map-box>.col-1{ display: flex; justify-content: center;  box-sizing: border-box; padding: 30px 2vw 0 2vw;}
.map-box>.col-1 img{  width: 90%; margin: 0 auto; }
.map-box>.col-2{ width: 100%; position: relative; }
.map-box>.col-2::-webkit-scrollbar{ display: none; }
.map-box .map_bg{ height: 780px; position: absolute; left: -30%; top: -6%; transform: translate(0,0); }
.map-box .map-taiwan{ width: 96%; margin: 0 auto; position: relative  }
.map-box .map-taiwan .map_taiwan{ width: 100%; }
.map-box .maphover{ position: absolute; transition: all .4s cubic-bezier(0,0,.04,.91); }
.map-box .maphover.active{ transform: translateY(-10px); z-index: 9; }
.map-box .map-taiwan .map_t1{ width: 40.81%; max-width: 278.05px; left:59% ; top: 0.8%; z-index: 1; }
.map-box .map-taiwan .map_t2{ width: 44.91%; max-width: 302.71px; left: 26.4%; top: 10%; z-index: 2; }
.map-box .map-taiwan .map_t3{ width: 59.84%; max-width: 403.3px; left: 10.23%; top: 27.47%; z-index: 3;}
.map-box .map-taiwan .map_t4{ width: 48.65%; max-width: 327.9px; left: 0; top: 45.3%; z-index: 6; }
.map-box .map-taiwan .map_t5{ width: 47.34%; max-width: 319.09px; left: 7.56%; top: 54.03%; z-index: 5; }
.map-box .map-taiwan .map_t6{ width: 49.49%; max-width: 335.56px; left: 42.5%; top: 17.9%; z-index: 1; }
.map-box .city_out{ width: 20%; max-width: 130px; position: absolute; left: 15%; top: 10%; }

/* hometown detail */
.hometown-box{ width: 96vw; display: flex; flex-direction: column-reverse; align-items: center; margin: 0 auto;  }
.hometown-box>.col-1{ width: 100%; margin: 0 0 0 0; overflow-x: hidden; overflow-y: scroll;  position: relative;box-sizing: border-box; padding: 0px 0 60px 0;}
.hometown-box>.col-1::-webkit-scrollbar{ display: none; }
.hometown-box>.col-1 .header-tit{ font-size: 3rem; color: #20846d; display: flex; align-items: center; position: relative; margin: 0 0 10px 0; }
.hometown-box>.col-1 .header-tit .header-txt{ margin: 0 0 20px 10px; }
.hometown-box>.col-1 .header-txt span{ font-size: 1.6rem; color: #575757; margin: 0 0 0 10px; }
.hometown-box>.col-1 .header-tit:after{ content: ''; width: 100%; height: 1px; background: #4aa899; position: absolute; left: 2.4%; top: 72%; transform: translateY(-50%); }
.hometown-list{ display: flex; flex-wrap: wrap; box-sizing: border-box; padding: 0 0 30px 0; margin: 20px 0 0 0; }
.hometown-list>li{ width: 48%; border-radius: 30px 30px 30px 30px; background: #fff; margin: 5px 1% 5px 1%; position: relative;  }
.hometown-list>li>a{ width: 100%; height: 100%; line-height: 0; position: absolute; left: 0; top: 0; }
.hometown-list .img-box{ width: 100%; }
.hometown-list .img-box img{ width: 100%; border-radius: 30px 30px 0 0; aspect-ratio:4/3; object-fit: cover; }
.hometown-list .txt-box{ font-size: 1.3rem; line-height: 1.58; color: #3e3a39; box-sizing: border-box; padding: 10px 10px 60px 10px; }
.hometown-list .txt-box .tit{ font-size: 1.5rem; font-weight: bold; color: #575757; margin: 0 0 5px 0; }
.hometown-list .more{ font-size: 1.3rem; color: #20846d; position: absolute; right: 20px; bottom: 20px; display: flex; align-items: center; }
.hometown-list .more:after{ content: '\e90e'; font-size: 2rem; margin: 0 0 0 5px;}
.hometown-box .more-btn{ width: 50px; height: 50px; border-radius: 100%; display: flex; justify-content: center; align-items: center; font-size: 1.4rem; font-weight: bold; color: #20846d; border: 2px solid #02846D; margin: 0 auto; }

.hometown-list>li.type2 .txt-box{ box-sizing:border-box; padding: 15px 15px 15px 15px; }
.hometown-list>li.type2 .txt-box>p{ font-size: 1.5rem; color: #02846D; width: 100%; display: -webkit-box; -webkit-line-clamp: 2;-webkit-box-orient: vertical; white-space: normal; overflow:hidden; }
.hometown-list>li.type2 .info-box{ margin: 30px 0 0 0; }
.hometown-list>li.type2 .date{ font-size: 1.4rem; color: #9a9a9a; }
.hometown-list>li.type2 .tag-list{ display: flex; font-size: 1.2rem; color: #575757; margin: 3px 0 0 0; }
.hometown-list>li.type2 .tag-list li+li{ margin: 0 0 0 10px; }

.hometown-box>.col-2{ width: 100%; flex-shrink: 0; position: relative; box-sizing: border-box; padding: 30px 0 25px 0;  }
.hometown-box>.col-2 .hdbg{ display: none; }
.hometown-box>.col-2 .city-list{ display: flex; align-items: center; white-space: nowrap; position: relative;}
.hometown-box>.col-2 .city-list>li{ cursor: pointer; z-index: 1; }
.hometown-box>.col-2 .city-list>li:nth-child(1){ color: #ffc300; font-size: 2rem; margin: 0 3px 0 5px; }
.hometown-box>.col-2 .city-list>li:nth-child(2){ font-size: 1.6rem; font-weight: bold; color: #02846D; margin: 0 10px 0 10px;  }
.hometown-box>.col-2 .city-list>li:nth-child(n+3){ font-size: 1.4rem; color: #575757;  border-radius: 30px; height: 35px; border: 3px solid #9A9A9A; display: flex; justify-content: center; align-items: center; flex-shrink: 0; margin: 0 2px 0 2px; box-sizing: border-box; padding: 0 10px;  }
.hometown-box>.col-2 .city-list>li:nth-child(n+3):hover,.hometown-box>.col-2 .city-list>li:nth-child(n+3).active{ border: 3px solid #02846D; box-sizing: border-box; }
.hometown-box>.col-2 .city-list:before{ content:''; width: 100%; height: 100%; border-radius: 30px; background: #fff; border: 3px solid #FFC300; position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 0; box-sizing: border-box;  }

/* taste */
.taste-box{ width: 100%; margin: 0 auto; box-sizing: border-box; padding: 0 0 0 0; }
.taste-box .taste-recommend{ width: 100%; display: flex; flex-direction: column; margin: 0 0 10px 0;  }
.taste-box .taste-recommend .slick-slider{ width: 100vw; }
.taste-box .taste-recommend .recommend-list{ margin: 0 auto; }
.taste-box .taste-recommend .recommend-list li{ width: 80vw;  margin: 0 5px 0 5px; position: relative; opacity: 0.5;  }
.taste-box .taste-recommend .recommend-list li.slick-active { opacity: 1; }
/* .taste-box .taste-recommend .recommend-list .img-box{ width: 100%; height: 0; padding-bottom: 78.125%;  border-radius: 30px; overflow: hidden; } */
.taste-box .taste-recommend .recommend-list .img-box{ width: 100%; aspect-ratio: 4000/3125;  border-radius: 30px; overflow: hidden; }
.taste-box .taste-recommend .recommend-list li img{ width: 100%; aspect-ratio: 4000/3125; object-fit: cover; }
.taste-box .taste-recommend .recommend-list li a{ width: 100%; height: 0; padding-bottom: 90.625%; line-height: 0; position: absolute; left: 0; top: 0; }
.taste-box .taste-recommend .recommend-list .txt-box{ min-height: 50px; font-size: 2rem; color: #575757; text-align: center; box-sizing:border-box; padding: 10px 10px 15px 10px; }
.taste-box .taste-recommend .recommend-list .txt-box:before{ content: '\e97b'; font-size: 2rem; color: #4aa899; margin: 0 5px 0 0; }
.taste-box .recommend-tit{ font-family: 'cwtexyen',serif; width: 90vw;  margin: 10px auto 30px auto; display: flex; justify-content: center;  }
.taste-box .recommend-tit .subtit{ font-size: 1.8rem; letter-spacing: 1px; font-weight: bold; color: #575757; margin: 10px 0 5px 0; }
.taste-box .recommend-tit .subtit.fruit{ letter-spacing: -1px; }
.taste-box .recommend-tit .note{ font-size: 1.6rem; color: #9A9A9A; }
.taste-box .recommend-tit .tit{ font-size: 2.3rem; font-weight: bold; color: #02846D; margin: 3vw 0 0 0; }
.taste-box .recommend-tit img{ width: 30vw; display: block; margin: 0 0 0 10px; }
.taste-box .taste-header{ height: 60px; display: flex; justify-content:center; align-items: center; position: relative; margin: 30px 0 30px 0; }
.taste-box .taste-header:before{ content: ''; display: block; width: calc(100% - 55px); height: 2px; background: #e6e6e6; position: absolute; left: 0; top: 50%; transform: translate(0, -50%); }
.taste-box .taste-header span{ font-size: 2rem; color: #fff; height: 60px; border-radius: 20px; background: #4aa899; display: inline-flex; justify-content: center; align-items: center; box-sizing: border-box; padding: 0 30px 0 30px; position: relative; }
.taste-box .taste-header .more-btn{  width: 50px; height: 50px; border-radius: 100%; display: flex; justify-content: center; align-items: center; font-size: 1.4rem; font-weight: bold; color: #20846d; border: 2px solid #02846D; position: absolute; right: 5px; top: 50%; transform: translate(0,-50%); }
.taste-box .taste-list{ display: flex; flex-wrap: wrap; box-sizing: border-box; padding: 0 2vw 0 2vw; }
.taste-box .taste-list>li{ width: 48%; border-radius: 30px; background: #fff; margin: 0 1% 10px 1%; overflow: hidden; position: relative; }
.taste-box .taste-list>li .img-box img{ width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.taste-box .taste-list>li .txt-box{ min-height: 50px; font-size: 1.6rem; color: #575757; text-align: center; box-sizing:border-box; padding: 10px 10px 15px 10px; }
.taste-box .taste-list>li a{ width: 100%; height: 100%; line-height: 0; position: absolute; left: 0; top: 0; }
.taste-box .taste-nav{ display: flex; align-items: center; position: relative; display: none;  }
.taste-box .taste-nav>li{ z-index: 1; text-align: center; position: relative; }
.taste-box .taste-nav>li:nth-child(1){ font-size: 1.8rem; font-weight: bold; color: #02846D; margin: 0 20px 0 30px;  }
.taste-box .taste-nav>li:nth-child(n+2){ font-size: clamp(12px,1vw,16px); color: #575757; width: 5.8vw; max-width: 85px; height: 5.8vw; max-height: 85px; border-radius: 100%; background: #fff; border: 3px solid #9A9A9A; display: flex; justify-content: center; align-items: center; flex-shrink: 0; margin: 0 2px 0 2px; box-sizing: border-box; transition: all .4s cubic-bezier(.4,0,.2,1); box-sizing: border-box; padding: 0 4px; }
.taste-box .taste-nav>li:nth-child(n+2):hover,.taste-box .taste-nav>li:nth-child(n+2).active{ border: 6px solid #02846D; box-sizing: border-box; }
.taste-box .taste-nav:before{ content:''; width: 100%; height: 50px; border-radius: 30px; box-sizing: border-box; background: #fff; border: 6px solid #FFC300; position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 0;  }
.taste-box .taste-nav>li a{ width: 100%; height: 100%; line-height: 0; position: absolute; left: 0; top: 0; }
.taste-box .taste-nav_m{ width: 96vw; height: 60px; border-radius: 25px; border: 3px solid #FFC300; background: #fff; display: flex; justify-content: start; align-items: center; margin: 0 auto; box-sizing: border-box; padding: 0 10px 0 15px; display: flex; justify-content: space-between; }
.taste-box .taste-nav_m .select-box{ display: inline-block; width: 80%; height: 38px; overflow: hidden;  position: relative; vertical-align: middle; }
.taste-box .taste-nav_m .select-box:before{ display: inline-block; content: "\e916";  font-size: 2rem; position: absolute; right: 10px; top: 50%; transform: translateY(-50%);  }
.taste-box .taste-nav_m select{ background: transparent; width: 100%; padding: 0px 40px 0 0; font-size: 2rem; color: #575757; text-align: left; text-align-last: left; line-height: 1; border: 0; border-radius: 0; height: 100%; -webkit-appearance: none; box-sizing: border-box; position: absolute;}
.taste-box .taste-nav_m select option{ text-align: right; }
.taste-box .taste-nav_m span{ font-size: 2rem; font-weight: bold; color: #20846d; margin: 0 20px 0 0; white-space: nowrap; }

/* shop */
.shop-box{ width: 96vw; margin: 0 auto;  box-sizing: border-box; padding: 10px 15px 30px 15px;  }
.shop-box .header-tit{ display: flex; justify-content: space-between; align-items: center; position: relative; margin: 0 0 20px 0; }
.shop-box .header-tit .col-1{ font-size: 2rem; color: #575757; display: flex; align-items: center; box-sizing: border-box; }
.shop-box .header-tit .col-1 span{ margin: 0 0 15px 15px; }
.shop-box .header-tit .col-2{ font-size: 3.5rem; color: #02846D; margin: 0 0 30px 0; }
.shop-box .header-tit:after{ content: ''; width: 97%; height: 2px; background: #4aa899; position: absolute; left: 2.4%; top: 72%; transform: translateY(-50%); }
.shop-box .shop-content{ display: flex; flex-direction: column; }
.shop-box .shop-content .col-1{ width: 100%; font-size: 1.8rem; line-height: 1.78; color: #3e3a39; box-sizing: border-box; padding: 0 0 0 0; order: 2; }
.shop-box .shop-content .tit{ font-size: 2.4rem; color: #575757; margin: 0 0 10px 0; }
.shop-box .shop-content .shop-btn{ font-size: 2rem; color: #20846d; display: flex; align-items: center; margin: 30px 0 0 0; }
.shop-box .shop-content .shop-btn:after{ content: '\e90e'; font-size: 3rem; margin: 0 0 0 5px; }
.shop-box .shop-content .col-2{ width: 100%; order: 1; margin: 0 0 10px 0; }
.shop-box .shop-content .col-2 .img-box img{ width: 100%; }

/* theme */
.theme-box{ width: 96vw; margin: 0 auto; box-sizing: border-box; padding: 0 10px 0 10px; }
.theme-recommend{ border-radius: 50px; background: #fff; box-sizing: border-box; padding: 30px 20px 30px 20px; margin: 20px auto 30px; display: flex; flex-direction: column; position: relative; }
.theme-recommend .img-box{ width: 100%; flex-shrink: 0;  margin: 0 0 10px 0;}
.theme-recommend .img-box img{ width: 100%; }
.theme-recommend .txt-box{ width: 100%; box-sizing: border-box; padding: 0 0 10px 0; font-size: 1.6rem; line-height: 1.58; color: #3e3a39; }
.theme-recommend .txt-box .tit{ font-size: 2rem; line-height: 1.58; color: #20846d; }
.theme-recommend .txt-box .tit:after{ content: ''; display: block; width: 100%; height: 1px; background: #e6e6e6; margin: 10px 0 10px 0; }
.theme-recommend .info{ display: flex; flex-direction: column; margin: 0 0 10px 0; }
.theme-recommend .info .col-1{ font-size: 1.2rem; color: #9a9a9a; font-weight: bold; }
.theme-recommend .info .tag-list{ display: flex; font-size: 1.3rem; color: #575757; }
.theme-recommend .info .tag-list li+li{ margin: 0 0 0 10px; }
.theme-recommend .btn_hidden{ width: 100%; height: 100%; line-height: 0; position: absolute; left: 0; top: 0; }
.theme-recommend a.btn_more{ font-size: 1.5rem; color: #20846d; display: flex; justify-content: end; align-items: center; }
.theme-recommend a.btn_more:after{ content: '\e95d'; width: 25px; height: 25px; border-radius: 100%; background: #20846d; display: flex; justify-content: center; align-items: center; color: #fff; margin: 0 0 0 5px; }
.theme-list{ display: flex; flex-wrap: wrap; padding: 0 0 0 0; }
.theme-list>li{ width: 100%; border-radius: 30px; background: #fff; margin: 0 0 20px 0; overflow: hidden; position: relative; opacity: 1; }
.theme-list>li .img-box img{ width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.theme-list>li .txt-box{ box-sizing:border-box; padding: 15px 15px 20px 15px; margin: 0 0 0 0; }
.theme-list>li .txt-box>p{ font-size: 2rem; color: #02846D; }
.theme-list>li .info-box{ margin: 10px 0 0 0; }
.theme-list>li .date{ font-size: 1.2rem; color: #9a9a9a; }
.theme-list>li .tag-list{ display: flex; font-size: 1.3rem; color: #575757; margin: 0px 0 0 0; }
.theme-list>li .tag-list li+li{ margin: 0 0 0 10px; }
.theme-list>li>a{ width: 100%; height: 100%; line-height: 0; position: absolute; left: 0; top: 0; }
.theme-box .page-list{ display: flex; justify-content: center; align-items: center; font-size: 1.4rem; color: #9a9a9a; margin: 10px 0 0 0; }
.theme-box .page-list>li{ margin: 0 15px 0 15px; position: relative; }
.theme-box .page-list>li:first-child{  margin: -15px 10px 0 0; }
.theme-box .page-list>li:last-child{  margin: -15px 0 0 10px; }
.theme-box .arrowL{ display: block; width: 30px; height: 16px; }
.theme-box .arrowL:before{ content: ''; display: block; width: 30px; height: 2px; background: #9a9a9a; position: absolute; left: 0; bottom: 0; }
.theme-box .arrowL:after{ content: ''; display: block; width: 18px; height: 2px; border-bottom:2px solid #9a9a9a; transform:rotate(-45deg); position: absolute; left: -2px; bottom: 6px; }
.theme-box .arrowR{ display: block; width: 30px; height: 16px; margin: 0 0 0 0;   }
.theme-box .arrowR:before{ content: ''; display: block; width: 30px; height: 2px; background: #9a9a9a; position: absolute; left: 0; bottom: 0; }
.theme-box .arrowR:after{ content: ''; display: block; width: 18px; height: 2px; border-bottom:2px solid #9a9a9a; transform:rotate(45deg); position: absolute; right: -2px; bottom: 6px; }
.theme-box .arrowL:hover:before{ background:#20846d; }
.theme-box .arrowL:hover:after{ border-bottom:2px solid#20846d; }
.theme-box .arrowR:hover:before{ background:#20846d; }
.theme-box .arrowR:hover:after{ border-bottom:2px solid#20846d; }
/* theme detail */
.theme-detail{ display: flex; flex-direction: column; align-items: center; }
.theme-detail>.col-1{  }
.theme-detail>.col-1 .detail-main{  border-radius: 25px 25px 25px 25px; background: #fff; box-sizing: border-box; padding: 20px 15px 30px 15px; font-size: 1.5rem; line-height: 1.68; color: #3e3a39; }
.theme-detail>.col-1 img{ width: 100%; height: auto; display: block; margin: 0 auto; }
.theme-detail>.col-2{ width: 100%; display: flex; flex-direction: column; align-items: center;  }
.theme-detail>.col-2:before{ content: '主題商家'; display: block; width: 100%; height: 60px; border-radius: 20px; background: #4aa899; font-size: 2.6rem; color: #fff; display: flex; justify-content: center; align-items: center; }
.theme-hot .subtit{ font-size: 2.6rem; color: #3e3a39; text-align: center; margin: 50px 0 20px 0; }
.pc .theme-list.hot>li{ width: 32%; border-radius: 30px; background: #fff; margin: 0 0.5% 20px 0.5%; overflow: hidden; position: relative; opacity: 1; }
.mobile .theme-list.hot li.slick-slide{ width: 80vw; border-radius: 30px; background: #fff; margin: 0 10px 0 10px; overflow: hidden; position: relative; opacity: 1; }
.mobile .theme-list.hot li.slick-slide .img-box img{ width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.mobile .theme-list.hot li.slick-slide .txt-box{ box-sizing:border-box; padding: 15px 15px 20px 15px; margin: 0 0 0 0; }
.mobile .theme-list.hot li.slick-slide .txt-box>p{ font-size: 1.6rem; color: #02846D; }
.mobile .theme-list.hot li.slick-slide .info-box{ margin: 10px 0 0 0; }
.mobile .theme-list.hot li.slick-slide .date{ font-size: 1.2rem; color: #9a9a9a; }
.mobile .theme-list.hot li.slick-slide .tag-list{ display: flex; font-size: 1.3rem; color: #575757; margin: 0 0 0 0; }
.mobile .theme-list.hot li.slick-slide .tag-list li+li{ margin: 0 0 0 10px; }
.theme-hot.pc{ display: none; }
.theme-detail .detail-main .tit{ font-size: 2rem; line-height: 1.58; color: #20846d; }
.theme-detail .detail-main .tit:after{ content: ''; display: block; width: 100%; height: 1px; background: #e6e6e6; margin: 10px 0 10px 0; }
.theme-detail .detail-main .info{ display: flex; flex-direction: column; margin: 0 0 10px 0; }
.theme-detail .detail-main .info .col-1{ font-size: 1.2rem; color: #9a9a9a; font-weight: bold; }
.theme-detail .detail-main .info .tag-list{ display: flex; font-size: 1.3rem; color: #575757; }
.theme-detail .detail-main .info .tag-list li+li{ margin: 0 0 0 10px; }
.theme-detail .ad-list{ width: 100%; margin: 10px 0 0 0; display: flex; flex-wrap: wrap;  }
.theme-detail .ad-list>li{ border-radius: 30px; background: #fff; overflow: hidden; box-sizing: border-box; padding: 0 0 10px 0; width: 49%; margin: 0 0.5% 10px 0.5%; display: flex; flex-direction: column; justify-content: space-between;  }
.theme-detail .ad-list .img-box>img{ width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.theme-detail .ad-list .txt-box{ font-size: 1.4rem; line-height: 1.58; color: #3e3a39; box-sizing: border-box; padding: 10px 15px 20px 15px; }
.theme-detail .ad-list .txt-box .tit{ font-size: 1.6rem; color: #575757; margin: 0 0 5px 0; }
.theme-detail .ad-list a.btn_more{ font-size: 1.5rem; color: #20846d; display: flex; justify-content: end; align-items: center; box-sizing: border-box; padding: 0 15px 0 0; }
.theme-detail .ad-list a.btn_more:after{ content: '\e95d'; width: 25px; height: 25px; border-radius: 100%; background: #20846d; display: flex; justify-content: center; align-items: center; color: #fff; margin: 0 0 0 5px; }

/* footer */
footer{ height: auto; background: #fff; font-size: 1.2rem; color: #575757;  margin: 80px 0 0 0;  display: flex; flex-direction: column; align-items: center; box-sizing: border-box; padding: 20px 5vw; position: relative; z-index: 1; }
footer.map-footer{ width: 100%; height: auto; margin: 0 0 0 0;  box-sizing: border-box; padding: 20px 5vw; box-shadow: 0 3px 8px rgba(0, 0, 0, .1); z-index: 1;  }
footer .company-info{ display: flex; flex-direction: column; font-size: 1.3rem; margin: 0 0 0 0; text-align: center; }
footer.map-footer .company-info{  }
footer .company-info>li+li{ margin: 5px 0 0 0; }
footer.map-footer .company-info>li+li{ margin: 5px 0 0 0; }
footer .col-2{ display: flex; flex-direction: column; align-items: center; margin: 20px 0 0 0; }
footer .footer-socialmedia{ display: flex; font-size: 2.2rem; margin: 10px 0 10px 0; }
footer .footer-socialmedia>li+li{ margin: 0 0 0 20px; }
.footer-nav{ display: flex; font-size: 1.4rem; }
.footer-nav>li a{ display: flex; align-items: center; transition: all .4s cubic-bezier(.4,0,.2,1); }
.footer-nav>li a:hover{ color: #00846d; }
.footer-nav>li+li>a:before{ content: ''; display: inline-block; width: 1px; height: 16px; background: #707070; margin: 0 15px; }
.footer-copyright{ order: 3; font-size: 1.2rem; }
.gototop{ position: absolute; right: 2vw; bottom: 150px; z-index: 0; }
.gototop.map{ bottom: 150px; z-index: 0;  }





/* $Pad
--------------------------------------------------------------------------------------*/
@media screen and (min-width:600px) and (max-width:1024px){

/* header */
header h3{ width: 20vw; }
header .header-search{ width: clamp(150px,10vw,180px); right: 80px; }

/* common */
.common-wrap{ width: 100%; background: #F7F7F7; box-sizing: border-box; padding: 80px 0 0 0; }
.common-wrap.map{  }
.map-box{ width: 100%; display: flex; flex-direction: column; align-items: center; background: #fff; overflow-x: hidden; }
.map-box .pc{ display: none; }
.map-box .mobile{ display: block; }
.map-box>.col-1{ display: flex; justify-content: center;  box-sizing: border-box; padding: 30px 2vw 0 2vw;}
.map-box>.col-1 img{  width: 90%; margin: 0 auto; }
.map-box>.col-2{ width: 100%; position: relative; }
.map-box>.col-2::-webkit-scrollbar{ display: none; }
.map-box .map_bg{ height: 880px; position: absolute; left: -0%; top: -6%; transform: translate(0,0); }
.map-box .map-taiwan{ width: 70%; margin: 0 auto; position: relative  }
.map-box .map-taiwan .map_taiwan{ width: 100%; }
.map-box .maphover{ position: absolute; transition: all .4s cubic-bezier(0,0,.04,.91); }
.map-box .maphover.active{ transform: translateY(-10px); z-index: 9; }
.map-box .map-taiwan .map_t1{ width: 40.81%; max-width: 278.05px; left:59% ; top: 0.8%; z-index: 1; }
.map-box .map-taiwan .map_t2{ width: 44.91%; max-width: 302.71px; left: 26.4%; top: 10%; z-index: 2; }
.map-box .map-taiwan .map_t3{ width: 59.84%; max-width: 403.3px; left: 10.23%; top: 27.47%; z-index: 3;}
.map-box .map-taiwan .map_t4{ width: 48.65%; max-width: 327.9px; left: 0; top: 45.3%; z-index: 6; }
.map-box .map-taiwan .map_t5{ width: 47.34%; max-width: 319.09px; left: 7.56%; top: 54.03%; z-index: 5; }
.map-box .map-taiwan .map_t6{ width: 49.49%; max-width: 335.56px; left: 42.5%; top: 17.9%; z-index: 1; }
.map-box .city_out{ width: 20%; max-width: 130px; position: absolute; left: 15%; top: 10%; }

/* hometown detail */
.hometown-list>li{ width: 32%;  margin: 5px 0.6% 5px 0.6%; position: relative;  }

/* taste */
.taste-box{ width: 100%; margin: 0 auto; box-sizing: border-box; padding: 0 20px 0 20px; }
.taste-box .taste-recommend{ width: 100%; height: 0; border-radius: 50px; border: 8px solid #FFC300; background: #fff; box-sizing: border-box; padding: 15px 20px 23% 10px; display: flex; flex-direction: row; justify-content: space-between; margin: 0 0 40px 0;  }
.taste-box .taste-recommend .recommend-list{ display: flex; }
.taste-box .taste-recommend .recommend-list li{ width: 20vw; max-width: 305px; margin: 0 0.5vw 0 0.5vw; position: relative; opacity: 1; }
/* .taste-box .taste-recommend .recommend-list .img-box{ width: 100%; height: 0; padding-bottom: 78.125%;  border-radius: 30px; overflow: hidden; } */
.taste-box .taste-recommend .recommend-list .img-box{ width: 100%; aspect-ratio: 4000/3125;  border-radius: 30px; overflow: hidden; }
.taste-box .taste-recommend .recommend-list li img{ width: 100%; aspect-ratio: 4000/3125; object-fit: cover; }
.taste-box .taste-recommend .recommend-list li a{ width: 100%; height: 0; padding-bottom: 90.625%; line-height: 0; position: absolute; left: 0; top: 0; }
.taste-box .taste-recommend .recommend-list .txt-box{ min-height: 50px; font-size: 1.5rem; color: #575757; text-align: center; box-sizing:border-box; padding: 10px 10px 15px 10px; }
.taste-box .taste-recommend .recommend-list .txt-box:before{ content: '\e97b'; font-size: 2rem; color: #4aa899; margin: 0 5px 0 0; }
.taste-box .recommend-tit{ font-family: 'cwtexyen',serif; width: 24vw; max-width: 305px; margin: 0 0 0 15px; display: flex; flex-direction: column; }
.taste-box .recommend-tit .subtit{ font-size: clamp(1.8rem,1.6vw,2.4rem); font-weight: bold; color: #575757; margin: 10px 0 5px 0; }
.taste-box .recommend-tit .note{ font-size: clamp(1.3rem,1.5vw,2rem); color: #9A9A9A; }
.taste-box .recommend-tit .tit{ font-size: clamp(2rem,2vw,3rem); font-weight: bold; color: #02846D; margin: 3vw 0 0 0; }
.taste-box .recommend-tit img{ width: clamp(100px,13vw,200px); display: block; margin: 0 auto 0; }
.taste-box .taste-header{ height: 50px; display: flex; justify-content:center; align-items: center; position: relative; margin: 30px 0 30px 0; }
.taste-box .taste-header:before{ content: ''; display: block; width: calc(100% - 50px); height: 2px; background: #e6e6e6; position: absolute; left: 0; top: 50%; transform: translate(0, -50%); }
.taste-box .taste-header span{ font-size: 2.2rem; color: #fff; height: 40px; border-radius: 20px; background: #4aa899; display: inline-flex; justify-content: center; align-items: center; box-sizing: border-box; padding: 0 30px 0 30px; position: relative; }
.taste-box .taste-header .more-btn{  width: 50px; height: 50px; border-radius: 100%; display: flex; justify-content: center; align-items: center; font-size: 1.4rem; font-weight: bold; color: #20846d; border: 2px solid #02846D; position: absolute; right: 0; top: 50%; transform: translate(0,-50%); }
.taste-box .taste-list{ display: flex; flex-wrap: wrap; }
.taste-box .taste-list>li{ width: 22.5%; max-width: 300px; border-radius: 30px; background: #fff; margin: 0 1.25% 20px 1.25%; overflow: hidden; position: relative; opacity: 1; }
.taste-box .taste-list>li .img-box img{ width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.taste-box .taste-list>li .txt-box{ min-height: 50px; font-size: 1.5rem; color: #575757; text-align: center; box-sizing:border-box; padding: 10px 10px 15px 10px; }
.taste-box .taste-list>li a{ width: 100%; height: 100%; line-height: 0; position: absolute; left: 0; top: 0; }
.taste-box .taste-nav{ display: none; }
.taste-box .taste-nav_m{ width: 50vw; height: 60px; border-radius: 25px; border: 3px solid #FFC300; background: #fff; display: flex; justify-content: start; align-items: center; margin: 0 auto; box-sizing: border-box; padding: 0 10px 0 15px; display: flex; justify-content: space-between; margin: 0 auto; }
.taste-box .taste-nav_m .select-box{ display: inline-block; width: 80%; height: 38px; overflow: hidden;  position: relative; vertical-align: middle; }
.taste-box .taste-nav_m .select-box:before{ display: inline-block; content: "\e916";  font-size: 2rem; position: absolute; right: 10px; top: 50%; transform: translateY(-50%);  }
.taste-box .taste-nav_m select{ background: transparent; width: 100%; padding: 0px 40px 0 0; font-size: 2rem; color: #575757; text-align: right; line-height: 1; border: 0; border-radius: 0; height: 100%; -webkit-appearance: none; box-sizing: border-box; position: absolute;}
.taste-box .taste-nav_m span{ font-size: 2rem; font-weight: bold; color: #20846d; }

/* shop */
.shop-box{ width: 96%; max-width: 1100px; margin: 0 auto;  box-sizing: border-box; padding: 10px 30px 30px 30px;  }
.shop-box .header-tit{ display: flex; justify-content: space-between; align-items: center; position: relative; margin: 0 0 20px 0; }
.shop-box .header-tit .col-1{ font-size: 2rem; color: #575757; display: flex; align-items: center; box-sizing: border-box; }
.shop-box .header-tit .col-1 span{ margin: 0 0 15px 15px; }
.shop-box .header-tit .col-2{ font-size: 4rem; color: #02846D; margin: 0 0 20px 0; }
.shop-box .header-tit:after{ content: ''; width: 97%; height: 2px; background: #4aa899; position: absolute; left: 2.4%; top: 72%; transform: translateY(-50%); }
.shop-box .shop-content{ display: flex; flex-direction: row; justify-content: space-between; }
.shop-box .shop-content .col-1{ width: 40%; max-width: 400px; font-size: 1.8rem; line-height: 1.78; color: #3e3a39; box-sizing: border-box; padding: 0 0 0 60px; order: 1; }
.shop-box .shop-content .tit{ font-size: 3rem; color: #575757; margin: 0 0 10px 0; }
.shop-box .shop-content .shop-btn{ font-size: 1.5rem; color: #20846d; display: flex; align-items: center; margin: 40px 0 0 0; }
.shop-box .shop-content .shop-btn:after{ content: '\e90e'; font-size: 3rem; margin: 0 0 0 5px; }
.shop-box .shop-content .col-2{ width: 54%; max-width: 540px; flex-shrink: 0; order: 2; margin: 0 0 0 0; }
.shop-box .shop-content .col-2 .img-box img{ width: 100%; }

/* theme */
.theme-box{ width: 100%; margin: 0 auto; box-sizing: border-box; padding: 0 20px 0 20px; }
.theme-recommend{ border-radius: 50px; background: #fff; box-sizing: border-box; padding: 30px 40px 30px 40px; margin: 30px auto 50px; display: flex; flex-direction: row; justify-content: start; align-items: center; position: relative; }
.theme-recommend .img-box{ width: 340px; flex-shrink: 0;  margin: 0 20px 0 0;}
.theme-recommend .img-box img{ width: 100%; }
.theme-recommend .txt-box{ align-self: start; box-sizing: border-box; padding: 20px 0 50px 0; font-size: 1.6rem; line-height: 1.58; color: #3e3a39; }
.theme-recommend .txt-box .tit{ font-size: 2.4rem; line-height: 1.58; color: #20846d; }
.theme-recommend .txt-box .tit:after{ content: ''; display: block; width: 100%; height: 1px; background: #e6e6e6; margin: 10px 0 10px 0; }
.theme-recommend .info{ display: flex; flex-direction: row; justify-content: space-between; align-items: center; margin: 0 0 20px 0; }
.theme-recommend .info .col-1{ font-size: 1.3rem; color: #9a9a9a; font-weight: bold; }
.theme-recommend .info .tag-list{ display: flex; font-size: 1.4rem; color: #575757; }
.theme-recommend .info .tag-list li+li{ margin: 0 0 0 20px; }
.theme-recommend a.btn_more{ position: absolute; right: 40px; bottom: 30px;  font-size: 1.5rem; color: #20846d; display: flex; align-items: center; }
.theme-recommend a.btn_more:after{ content: '\e95d'; width: 25px; height: 25px; border-radius: 100%; background: #20846d; display: flex; justify-content: center; align-items: center; color: #fff; margin: 0 0 0 5px; }
.theme-list{ display: flex; flex-wrap: wrap; padding: 0 0 0 0; }
.theme-list>li{ width: 32%; border-radius: 30px; background: #fff; margin: 0 0.5% 20px 0.5%; overflow: hidden; position: relative; opacity: 1; }
.theme-list>li .img-box img{ width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.theme-list>li .txt-box{ box-sizing:border-box; padding: 15px 15px 15px 15px; }
.theme-list>li .txt-box>p{ font-size: 1.5rem; color: #02846D; }
.theme-list>li .info-box{ margin: 30px 0 0 0; }
.theme-list>li .date{ font-size: 1.3rem; color: #9a9a9a; }
.theme-list>li .tag-list{ display: flex; font-size: 1.4rem; color: #575757; margin: 3px 0 0 0; }
.theme-list>li .tag-list li+li{ margin: 0 0 0 10px; }
.theme-list>li>a{ width: 100%; height: 100%; line-height: 0; position: absolute; left: 0; top: 0; }
.theme-box .page-list{ display: flex; justify-content: center; align-items: center; font-size: 1.6rem; color: #9a9a9a; margin: 30px 0 0 0; }
.theme-box .page-list>li{ margin: 0 15px 0 15px; position: relative; transition: all .4s cubic-bezier(.4,0,.2,1); }
.theme-box .page-list>li:hover,.theme-box .page-list>li.active{ color: #20846d; font-weight: bold; }
.theme-box .page-list>li:first-child{  margin: -15px 100px 0 0; }
.theme-box .page-list>li:last-child{  margin: -15px 0 0 100px; }
.theme-box .arrowL{ display: block; width: 44px; height: 16px; }
.theme-box .arrowL:before{ content: ''; display: block; width: 44px; height: 2px; background: #9a9a9a; position: absolute; left: 0; bottom: 0; }
.theme-box .arrowL:after{ content: ''; display: block; width: 18px; height: 2px; border-bottom:2px solid #9a9a9a; transform:rotate(-45deg); position: absolute; left: -2px; bottom: 6px; }
.theme-box .arrowR{ display: block; width: 44px; height: 16px; margin: 0 0 0 0;   }
.theme-box .arrowR:before{ content: ''; display: block; width: 44px; height: 2px; background: #9a9a9a; position: absolute; left: 0; bottom: 0; }
.theme-box .arrowR:after{ content: ''; display: block; width: 18px; height: 2px; border-bottom:2px solid #9a9a9a; transform:rotate(45deg); position: absolute; right: -2px; bottom: 6px; }
.theme-box .arrowL:hover:before{ background:#20846d; }
.theme-box .arrowL:hover:after{ border-bottom:2px solid#20846d; }
.theme-box .arrowR:hover:before{ background:#20846d; }
.theme-box .arrowR:hover:after{ border-bottom:2px solid#20846d; }
/* theme detail */
.theme-detail{ display: flex; flex-direction: row; align-items: start; }
.theme-detail>.col-1{ width: 76%; max-width: 1000px; }
.theme-detail>.col-1 .detail-main{  border-radius: 25px 0 25px 25px; background: #fff; box-sizing: border-box; padding: 30px 50px 30px 50px; font-size: 1.8rem; line-height: 1.68; color: #3e3a39; }
.theme-detail>.col-1 img{ width: 76%; max-width: 760px; height: auto; display: block; margin: 0 auto; }
.theme-detail>.col-2{ width: 24%; max-width: 360px; display: flex; flex-direction: column; align-items: center;  }
.theme-detail>.col-2:before{ content: '主題商家'; display: flex; justify-content: center; align-items: start; width: 100%; height: 140px; border-radius: 0 20px 20px  0; background: #4aa899;  box-sizing: border-box; padding: 10px 0 0 0;}
.theme-hot .subtit{ font-size: 2.6rem; color: #3e3a39; text-align: center; margin: 50px 0 20px 0; }
.theme-list.hot>li{ width: 32%; border-radius: 30px; background: #fff; margin: 0 0.5% 20px 0.5%; overflow: hidden; position: relative; opacity: 1; }
.theme-hot.mobile{ display: none; }
.theme-hot.pc{ display: block; }
.theme-detail .detail-main .tit{ font-size: 2.4rem; line-height: 1.58; color: #20846d; }
.theme-detail .detail-main .tit:after{ content: ''; display: block; width: 100%; height: 1px; background: #e6e6e6; margin: 10px 0 10px 0; }
.theme-detail .detail-main .info{ display: flex; flex-direction: row; justify-content: space-between; align-items: center; margin: 0 0 30px 0; }
.theme-detail .detail-main .info .col-1{ font-size: 1.4rem; color: #9a9a9a; font-weight: bold; }
.theme-detail .detail-main .info .tag-list{ display: flex; font-size: 1.8rem; color: #575757; }
.theme-detail .detail-main .info .tag-list li+li{ margin: 0 0 0 20px; }
.theme-detail .ad-list{ width: 90%; max-width: 320px; margin: -80px 0 0 0; display: flex;   }
.theme-detail .ad-list>li{ width: 100%; border-radius: 30px; background: #fff; overflow: hidden; margin: 0 0 20px 0; box-sizing: border-box; padding: 0 0 10px 0; }
.theme-detail .ad-list .img-box>img{ width: 100%; }
.theme-detail .ad-list .txt-box{ font-size: 1.4rem; line-height: 1.58; color: #3e3a39; box-sizing: border-box; padding: 10px 15px 10px 15px; }
.theme-detail .ad-list .txt-box .tit{ font-size: 1.8rem; color: #575757; margin: 0 0 5px 0; }
.theme-detail .ad-list a.btn_more{ font-size: 1.5rem; color: #20846d; display: flex; justify-content: end; align-items: center; box-sizing: border-box; padding: 0 15px 0 0; }
.theme-detail .ad-list a.btn_more:after{ content: '\e95d'; width: 25px; height: 25px; border-radius: 100%; background: #20846d; display: flex; justify-content: center; align-items: center; color: #fff; margin: 0 0 0 5px; }



/* footer */
footer{ height: auto; background: #fff; font-size: 1.2rem; color: #575757;  margin: 80px 0 0 0;  display: flex; flex-direction: column; align-items: center; box-sizing: border-box; padding: 20px 5vw; position: relative; }
footer.map-footer{ width: 100%; height: auto; margin: 0 0 0 0;  box-sizing: border-box; padding: 20px 5vw; box-shadow: 0 3px 8px rgba(0, 0, 0, .1); z-index: 1;  }
footer .company-info{ display: flex; flex-direction: column; font-size: 1.3rem; margin: 0 0 0 0; text-align: center; }
footer.map-footer .company-info{  }
footer .company-info>li+li{ margin: 5px 0 0 0; }
footer.map-footer .company-info>li+li{ margin: 5px 0 0 0; }
footer .col-2{ display: flex; flex-direction: column; align-items: center; margin: 20px 0 0 0; }
footer .footer-socialmedia{ display: flex; font-size: 2.2rem; margin: 20px 0 10px 0; }
footer .footer-socialmedia>li+li{ margin: 0 0 0 20px; }
.footer-nav{ display: flex; font-size: 1.4rem; }
.footer-nav>li a{ display: flex; align-items: center; transition: all .4s cubic-bezier(.4,0,.2,1); }
.footer-nav>li a:hover{ color: #00846d; }
.footer-nav>li+li>a:before{ content: ''; display: inline-block; width: 1px; height: 16px; background: #707070; margin: 0 15px; }
.footer-copyright{ order: 3; font-size: 1.2rem; }
.gototop{ position: absolute; right: 2vw; bottom: 70px; z-index: -1; }
.gototop.map{ bottom: 150px; z-index: 0;  }


}





/* $橫的版型 */
@media screen and (orientation:landscape){ 


}





/* $Pc
--------------------------------------------------------------------------------------*/
@media screen and (min-width: 1025px){

/* html,body{ min-width: 100%; background: #f7f7f7; padding: 100px 0 0 0; } */
body{ min-width: 100%; background: #f7f7f7; padding: 80px 0 0 0; }
body.idx{ padding: 0 0 0 0; }

/* header */
header{ display: flex; justify-content: space-between; align-items: center; width: 100%; height: 80px; background: rgba(255,255,255,1); position: fixed; left: 0; top: 0; box-sizing: border-box; padding: 0 2vw; box-shadow: 0 3px 8px rgba(0, 0, 0, .1); }
header h3{ width: auto; position: relative; }
header h3 img{ width: 100%; }
header h3 a{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; }
header .nav-box { display: flex; align-items: center;  }
header nav>ul{ display: flex;   }
header nav>ul>li{ display: flex; justify-content: center; align-items: center; flex-wrap: wrap; box-sizing: border-box; padding: 0 clamp(2vw,3vw,60px); font-size: clamp(1.6rem,1.5vw,2.2rem); font-weight: 300; color: #000; white-space:nowrap; height: auto; }
header nav>ul>li>a{ position: relative; transition: all .4s cubic-bezier(.4,0,.2,1); }
header nav>ul>li>a:after{ content: ''; display: block; width: 0; height: 2px; background:  #f6c900; margin: 10px 0 0 0; position: absolute; left: 0; top: 100%; transition: all .4s cubic-bezier(.4,0,.2,1); }
header nav>ul>li>a:hover:after{ width: 100%; }
header nav>ul>li+li{ border-left: 2px solid #e7e7e7; }
header .header-search{ width: clamp(150px,10vw,200px); height: 45px; border-radius: 45px; border: 1px solid #CECECE; display: flex; align-items: center; position: static; }
header .header-search input[type='text']{ width: calc( 100% - 45px); height: 100%; box-sizing: border-box; padding: 0 10px 0 20px; font-size: clamp(1.6rem,1.5vw,2rem); color: #575757; background: transparent;  }
header .header-search button{ display: flex; justify-content: center; align-items: center; width: 45px; height: 45px; border-radius: 100%; background: #ffc300; }
header .header-search button:after{ content: '\e926'; font-size: 2.5rem; color: #fff;  }
header .hamburger-box{ display: none; }

/* idx kv */
.idx-kv{ width: 100%; max-width: 1550px; height: 740px; margin: 0 auto; position: relative; box-sizing: border-box; padding: 100px 0 0 0; }
.idx-kv::-webkit-scrollbar{ display: none; }
.idx-kv .tit{ width: 30%; max-width: 430px; }
.idx-kv .tit .pc{ display: block; margin: 0 0 0 20px; width: 100%; }
.idx-kv .tit .mobile{ display: none; }
.idx-kv .kv-slide_01{ width: 29%; max-width: 450px; position: absolute; left: 20px; top: 280px; }
.idx-kv .kv-slide_02{ width: 35.5%; max-width: 550px; position: absolute; left: 32.3%; top: 110px; display: block; }
.idx-kv .kv-slide_03{ width: 29%; max-width: 450px; position: absolute; right: 20px; top: 90px; display: block; }
.idx-kv .img-box{ border-radius: 50px; overflow: hidden; }
/* .idx-kv .kv-slide .img-box{ width: 100%; height: 0; padding-bottom: 78.125%; } */
.idx-kv .kv-slide .img-box{ width: 100%; height: auto; aspect-ratio: 4000/3125; }
.idx-kv .img-box img{ width: 100%; aspect-ratio: 4000/3125; object-fit: cover; }
.idx-kv .txt-box{ font-size: 2rem; color: #3e3a39; text-align: center; margin: 10px 0 0 0; }
.idx-kv .txt-box:before{ content:'\e97b'; font-size: 110%; color: #4aa899; margin: 0 5px 0 0; }
.idx-kv .kv-slide li{ position: relative; margin: 0 0 0 0; }
.idx-kv .kv-slide li a{ width: 100%; height: 100%; line-height: 0; position: absolute; left: 0; top: 0; }

/* idx search */
.idx-search{ display: flex; justify-content: end; margin: -130px 0 0 0; position: relative; }
.idx-search .search-wrap{ display: flex; align-items: center; width: 66vw; max-width: 1235px; height: 100px; border-radius: 60px 0 0 60px; background: #ffc300; box-sizing: border-box; padding: 0 30px 0 30px; }
.idx-search .search-box{ display: flex; flex-direction: row; align-items: center; margin: 0 0 0 10px; }
.idx-search .search-box>span{ font-size: 2.3rem; }
.idx-search .catfoot{ width: auto; }
.idx-search .searchcat{ align-self: end; width: auto; display: block; }
.idx-search .search-bar{ width: 280px; height: 50px; border-radius: 21px; background: #fff; display: flex; align-items: center; margin: 0 0 0 20px;  }
.idx-search .search-bar input[type='text']{ width: calc( 100% - 50px); height: 100%; box-sizing: border-box; padding: 0 0 0 20px; font-size: 2rem; color: #575757; background: transparent;  }
.idx-search .search-bar button{ display: flex; justify-content: center; align-items: center; width: 70px; height: 45px; background: transparent;  }
.idx-search .search-bar button:after{ content: '\e926'; font-size: 3rem; color: #000;  }

/* idx tit-box */
.tit-box{ display: flex; flex-direction: column; justify-content: center; align-items: center; }
.tit-txt{ display: inline-flex; align-items: center; font-size: 4rem; color: #3e3a39; position: relative; margin: 0 0 20px 0; }
.tit-txt>span:nth-child(1){ font-size: 5rem; font-family:'Helvetica','Arial',sans-serif; font-weight: 300; z-index: 1; }
.tit-txt>span:nth-child(2){ display: block; width: 60px; height: 1px; border-bottom:1px solid #575757; transform:rotate(-50deg); margin: 0 -10px; z-index: 1;  }
.tit-txt>span:nth-child(3){ z-index: 1; }
.tit-txt:after{ content: ''; width: 110%; height: 37px; border-radius: 20px; background: #e6e6e6; position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%);   }
.tit-info{ font-size: 2rem; color: #3e3a39; }

/* idx taste  */
.idx-taste{ margin: 80px 0 0 0; }
.idx-taste .taste-list{ display: flex; justify-content: center; width: 100%; max-width: 1340px; margin: 20px auto 0; }
.idx-taste .taste-list>li{ width: clamp(250px,24%,320px); border-radius: 30px; background: #fff; box-sizing: border-box; margin: 0 0.5%; padding: 0 0 20px 0; overflow: hidden; position: relative; transition: all .4s cubic-bezier(.4,0,.2,1); }
.idx-taste .taste-list>li:hover{ box-shadow: 5px 10px 10px rgba(87, 87, 87, .2);  }
.idx-taste .taste-list>li a{ width: 100%; height: 100%; line-height: 0; position: absolute; left: 0; top: 0; }
.idx-taste .taste-list .img-box{ width: 100%; height:0; padding-bottom: 78.125%; overflow: hidden; }
.idx-taste .taste-list .img-box img{ width: 100%; height: auto; }
.idx-taste .taste-list .txt-box{ font-size: 2rem; line-height: 1.58; color: #3e3a39; text-align: center; box-sizing: border-box; padding: 10px 25px 0 25px; }
.idx-taste .taste-list .tit{ font-size: 2.4rem; color: #20846d; text-align: center; margin: 0 0 5px 0; }

/* idx theme */
.idx-theme{ margin: 80px 0 0 0; }
.idx-theme .theme-slide{ width: 100%; max-width: 1340px; margin: 20px auto 80px; position: relative; }
.idx-theme .theme-slick{ width: calc(100% - 64px); margin: 0 auto; }
.idx-theme .theme-slick li.slick-slide{ min-height: 450px; border-radius: 50px; background: #fff; box-sizing: border-box; padding: 40px 40px 40px 40px; display: flex; flex-direction: row; justify-content: space-between; align-items: center; margin: 0 auto; position: relative; }
.idx-theme .theme-slick .img-box{ width: 550px; height: 385px; overflow: hidden; flex-shrink: 0;  margin: 0 10px 0 0;}
.idx-theme .theme-slick .img-box img{ width: 100%; height: 100%; object-fit: cover; }
.idx-theme .theme-slick .txt-box{ width: 48.5%; max-width: 650px; align-self: start; box-sizing: border-box; padding: 30px 0 0 0; font-size: 2rem; line-height: 1.58; color: #3e3a39; }
.idx-theme .theme-slick .txt-box .tit{ font-size: 3rem; line-height: 1.58; color: #20846d; }
.idx-theme .theme-slick .txt-box .tit:after{ content: ''; display: block; width: 100%; height: 1px; background: #e6e6e6; margin: 10px 0 10px 0; }
.idx-theme .theme-slick .info{ display: flex; justify-content: space-between; align-items: center; margin: 0 0 30px 0; }
.idx-theme .theme-slick .info .col-1{ font-size: 1.4rem; color: #9a9a9a; font-weight: bold; }
.idx-theme .theme-slick .info .tag-list{ display: flex; font-size: 1.8rem; color: #575757; }
.idx-theme .theme-slick .info .tag-list li+li{ margin: 0 0 0 20px; }
.idx-theme .theme-slick li.slick-slide a.btn_more{ position: absolute; right: 50px; bottom: 40px;  font-size: 1.5rem; color: #20846d; display: flex; align-items: center; }
.idx-theme .theme-slick li.slick-slide a.btn_more:after{ content: '\e95d'; width: 25px; height: 25px; border-radius: 100%; background: #20846d; display: flex; justify-content: center; align-items: center; color: #fff; margin: 0 0 0 5px; }
.idx-theme .theme-slide .slide-arrowL{ position: absolute; width: 44px; height: 16px; left: 0; top: 50%; }
.idx-theme .theme-slide .slide-arrowL:before{ content: ''; display: block; width: 44px; height: 2px; background: #9a9a9a; position: absolute; left: 0; bottom: 0; }
.idx-theme .theme-slide .slide-arrowL:after{ content: ''; display: block; width: 18px; height: 2px; border-bottom:2px solid #9a9a9a; transform:rotate(-45deg); position: absolute; left: -2px; bottom: 6px; }
.idx-theme .theme-slide .slide-arrowR{ position: absolute; width: 44px; height: 16px; right: 0.5px; top: 50%; }
.idx-theme .theme-slide .slide-arrowR:before{ content: ''; display: block; width: 44px; height: 2px; background: #9a9a9a; position: absolute; left: 0; bottom: 0; }
.idx-theme .theme-slide .slide-arrowR:after{ content: ''; display: block; width: 18px; height: 2px; border-bottom:2px solid #9a9a9a; transform:rotate(45deg); position: absolute; right: -2px; bottom: 6px; }
.idx-theme .theme-slide .slide-arrowL:hover:before{ background:#20846d; }
.idx-theme .theme-slide .slide-arrowL:hover:after{ border-bottom:2px solid#20846d; }
.idx-theme .theme-slide .slide-arrowR:hover:before{ background:#20846d; }
.idx-theme .theme-slide .slide-arrowR:hover:after{ border-bottom:2px solid#20846d; }

/* common */
.common-wrap{ width: 100%; height: 100%; box-sizing: border-box; padding: 60px 0 80px 0; min-height: calc(100vh - 120px); }

/* map */
.common-wrap.map{ height: calc(100% - 80px); position: fixed; left: 0; top: 80px; padding: 0 0 0 0; overflow: hidden; }
.map-box{ width: 100%; height: 100%; display: flex; flex-direction: row; justify-content: center; align-items: stretch; background: #fff; overflow: hidden; }
.map-box .pc{ display: block; }
.map-box .mobile{ display: none; }
.map-box>.col-1{ display: flex; justify-content: center; align-items: start; box-sizing: border-box; padding: 80px 0 0 0;}
.map-box>.col-1 img.pc{  display: block; width: 88%; max-width: 774px;  }
.map-box>.col-2{ width: 54%; max-width: 1040px; flex-shrink: 0; overflow: scroll; position: relative; }
.map-box>.col-2::-webkit-scrollbar{ display: none; }
.map-box .map_bg{ width: 100%; position: static; height: auto; }
.map-box .map-taiwan{ width: 60%; max-width: 629px; position: absolute; left: 25%; top: 2%;  }
.map-box .map-taiwan .map_taiwan{ width: 100%; opacity: 0; }
.map-box .maphover{ position: absolute; transition: all .4s cubic-bezier(0,0,.04,.91); }
.map-box .maphover.active{ transform: translateY(-10px); z-index: 9; }
.map-box .map-taiwan .map_t1{ width: 40.81%; max-width: 278.05px; left:59% ; top: 0.8%; z-index: 1; }
.map-box .map-taiwan .map_t2{ width: 44.91%; max-width: 302.71px; left: 26.4%; top: 10%; z-index: 2; }
.map-box .map-taiwan .map_t3{ width: 59.84%; max-width: 403.3px; left: 10.23%; top: 27.47%; z-index: 3;}
.map-box .map-taiwan .map_t4{ width: 48.65%; max-width: 327.9px; left: 0; top: 45.3%; z-index: 6; }
.map-box .map-taiwan .map_t5{ width: 47.34%; max-width: 319.09px; left: 7.56%; top: 54.03%; z-index: 5; }
.map-box .map-taiwan .map_t6{ width: 49.49%; max-width: 335.56px; left: 42.5%; top: 17.9%; z-index: 1; }
.map-box .city_out{ width: 20%; max-width: 130px; position: absolute; left: -30%; top: 15%; }

/* hometown detail */
.hometown-box{ width: 100%; height: 100%; display: flex; flex-direction: row; justify-content: center; align-items: stretch; overflow: hidden; }
.hometown-box>.col-1{ width: 57%; max-width: 1040px; margin: 0 50px 0 0;overflow-x: hidden; overflow-y: scroll;  position: relative; box-sizing: border-box; padding: 30px 0 60px 0; }
.hometown-box>.col-1::-webkit-scrollbar{ display: none; }
.hometown-box>.col-1 .header-tit{ font-size: 3.6rem; color: #20846d; display: flex; align-items: center; position: relative; margin: 0 0 20px 0; }
.hometown-box>.col-1 .header-tit .header-txt{ margin: 0 0 20px 10px; }
.hometown-box>.col-1 .header-txt span{ font-size: 2rem; color: #575757; margin: 0 0 0 10px; }
.hometown-box>.col-1 .header-tit:after{ content: ''; width: 100%; height: 1px; background: #4aa899; position: absolute; left: 2.4%; top: 72%; transform: translateY(-50%); }
.hometown-list{ display: flex; flex-wrap: wrap; box-sizing: border-box; padding: 0 0 30px 0; }
.hometown-list>li{ width: 320px; border-radius: 30px 30px 30px 30px; background: #fff; margin: 10px 10px 10px 10px; position: relative; transition: all .4s cubic-bezier(.4,0,.2,1);   }
.hometown-list>li:hover{ box-shadow: 5px 10px 10px rgba(87, 87, 87, .2); }
.hometown-list.search{ margin: 20px 0 0 0;  }
.hometown-list.search>li{ width: 23.8%; max-width: 320px; border-radius: 30px 30px 30px 30px; background: #fff; margin: 10px 0.6% 10px 0.6%; position: relative;  }
.hometown-list>li>a{ width: 100%; height: 100%; line-height: 0; position: absolute; left: 0; top: 0; }
.hometown-list .img-box{ width: 100%; }
.hometown-list .img-box img{ width: 100%; border-radius: 30px 30px 0 0; aspect-ratio:4/3; object-fit: cover;  }
.hometown-list .txt-box{ font-size: 1.6rem; line-height: 1.58; color: #3e3a39; box-sizing: border-box; padding: 20px 20px 60px 20px; }
.hometown-list .txt-box .tit{ font-size: 2rem; font-weight: bold; color: #575757; margin: 0 0 5px 0; }
.hometown-list .more{ font-size: 1.5rem; color: #20846d; position: absolute; right: 20px; bottom: 20px; display: flex; align-items: center; }
.hometown-list .more:after{ content: '\e90e'; font-size: 2.8rem; margin: 0 0 0 5px;}
.hometown-list>li.type2 .txt-box{ box-sizing:border-box; padding: 15px 15px 15px 15px; }
.hometown-list>li.type2 .txt-box>p{ font-size: 2rem; color: #02846D; width: 100%; display: -webkit-box; -webkit-line-clamp: 2;-webkit-box-orient: vertical; white-space: normal; overflow:hidden; }
.hometown-list>li.type2 .info-box{ margin: 30px 0 0 0; }
.hometown-list>li.type2 .date{ font-size: 1.4rem; color: #9a9a9a; }
.hometown-list>li.type2 .tag-list{ display: flex; font-size: 1.6rem; color: #575757; margin: 3px 0 0 0; }
.hometown-list>li.type2 .tag-list li+li{ margin: 0 0 0 10px; }
.hometown-box .more-btn{ width: 50px; height: 50px; border-radius: 100%; display: flex; justify-content: center; align-items: center; font-size: 1.4rem; font-weight: bold; color: #20846d; border: 2px solid #02846D; margin: 0 auto; }
.hometown-box>.col-2{ width: 40%; max-width: 700px; height: 100%; flex-shrink: 0; position: relative; overflow: hidden; padding: 0 0 0 0; }
.hometown-box>.col-2 .hdbg{ width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.hometown-box>.col-2 .city-list{ display: flex; align-items: center; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); white-space: nowrap; }
.hometown-box>.col-2 .city-list>li{ cursor: pointer; }
.hometown-box>.col-2 .city-list>li:nth-child(1){ color: #ffc300; font-size: 3.2rem; margin: 0 5px 3px 8px; }
.hometown-box>.col-2 .city-list>li:nth-child(2){ font-size: 2rem; font-weight: bold; color: #02846D; margin: 0 20px 0 20px;  }
.hometown-box>.col-2 .city-list>li:nth-child(n+3){ font-size: 2rem; color: #575757; width: 90px; height: 90px; border-radius: 100%; background: #fff; border: 4px solid #9A9A9A; display: flex; justify-content: center; align-items: center; flex-shrink: 0; margin: 0 2px 0 2px; box-sizing: border-box; transition: all .4s cubic-bezier(.4,0,.2,1); }
.hometown-box>.col-2 .city-list>li:nth-child(n+3):hover,.hometown-box>.col-2 .city-list>li:nth-child(n+3).active{ border: 6px solid #02846D; box-sizing: border-box; }
.hometown-box>.col-2 .city-list:before{ content:''; width: 95%; height: 50px; border-radius: 30px; background: #fff; border: 6px solid #FFC300; position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: -1;  }

/* taste */
.taste-box{ width: 100%; max-width: 1340px; margin: 0 auto; box-sizing: border-box; padding: 0 20px 0 20px; }
.taste-box .taste-recommend{ width: 100%; height: 0; border-radius: 50px; border: 15px solid #FFC300; background: #fff; box-sizing: border-box; padding: 25px 20px 23% 10px; display: flex; flex-direction: row; justify-content: space-between; margin: 0 0 60px 0;  }
.taste-box .taste-recommend .recommend-list{ display: flex; }
.taste-box .taste-recommend .recommend-list li{ width: 23vw; max-width: 300px; margin: 0 0.5vw 0 0.5vw; position: relative; opacity: 1; }
/* .taste-box .taste-recommend .recommend-list .img-box{ width: 100%; height: 0; padding-bottom: 78.125%;  border-radius: 30px; overflow: hidden; } */
.taste-box .taste-recommend .recommend-list .img-box{ width: 100%; aspect-ratio: 4000/3125;  border-radius: 30px; overflow: hidden; }
.taste-box .taste-recommend .recommend-list li img{ width: 100%; aspect-ratio: 4000/3125; object-fit: cover; }
.taste-box .taste-recommend .recommend-list li a{ width: 100%; height: 0; padding-bottom: 90.625%; line-height: 0; position: absolute; left: 0; top: 0; }
.taste-box .taste-recommend .recommend-list .txt-box{ min-height: 50px; font-size: 2rem; color: #575757; text-align: center; box-sizing:border-box; padding: 10px 10px 15px 10px; }
.taste-box .taste-recommend .recommend-list .txt-box:before{ content: '\e97b'; font-size: 2rem; color: #4aa899; margin: 0 5px 0 0; }
.taste-box .recommend-tit{ font-family: 'cwtexyen',serif; width: 25vw; max-width: 305px; margin: 0 0 0 15px; display: flex; flex-direction: column; justify-content: start; }
.taste-box .recommend-tit .subtit{ font-size: clamp(1.8rem,1.6vw,2.2rem); font-weight: bold; color: #575757; margin: 10px 0 5px 0; white-space: nowrap; letter-spacing: 2.2px; }
.taste-box .recommend-tit .subtit.fruit{ letter-spacing: -1px; }
.taste-box .recommend-tit .note{ font-size: clamp(1.3rem,1.5vw,2rem); color: #9A9A9A; white-space: nowrap; }
.taste-box .recommend-tit .tit{ font-size: clamp(2rem,2vw,3rem); font-weight: bold; color: #02846D; margin: 40px 0 0 0; white-space: nowrap; }
.taste-box .recommend-tit img{ width: clamp(100px,13vw,200px); display: block; margin: 0 auto 0; }
.taste-box .taste-header{ height: 50px; display: flex; justify-content:center; align-items: center; position: relative; margin: 30px 0 30px 0; }
.taste-box .taste-header:before{ content: ''; display: block; width: calc(100% - 50px); height: 2px; background: #e6e6e6; position: absolute; left: 0; top: 50%; transform: translate(0, -50%); }
.taste-box .taste-header span{ font-size: 2.2rem; color: #fff; height: 40px; border-radius: 20px; background: #4aa899; display: inline-flex; justify-content: center; align-items: center; box-sizing: border-box; padding: 0 30px 0 30px; position: relative; }
.taste-box .taste-header .more-btn{  width: 50px; height: 50px; border-radius: 100%; display: flex; justify-content: center; align-items: center; font-size: 1.4rem; font-weight: bold; color: #20846d; border: 2px solid #02846D; position: absolute; right: 0; top: 50%; transform: translate(0,-50%); }
.taste-box .taste-list{ display: flex; flex-wrap: wrap; padding: 0 0 0 0; }
.taste-box .taste-list>li{ width: 22.5%; max-width: 300px; border-radius: 30px; background: #fff; margin: 0 1.25% 20px 1.25%; overflow: hidden; position: relative; opacity: 1; }
.taste-box .taste-list>li .img-box img{ width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.taste-box .taste-list>li .txt-box{ min-height: 50px; font-size: 2rem; color: #575757; text-align: center; box-sizing:border-box; padding: 10px 10px 15px 10px; }
.taste-box .taste-list>li a{ width: 100%; height: 100%; line-height: 0; position: absolute; left: 0; top: 0; }
.taste-box .taste-nav{ display: flex; align-items: center; position: relative;  }
.taste-box .taste-nav>li{ z-index: 1; text-align: center; position: relative; }
.taste-box .taste-nav>li:nth-child(1){ font-size: 1.8rem; font-weight: bold; color: #02846D; margin: 0 20px 0 30px;  }
.taste-box .taste-nav>li:nth-child(n+2){ font-size: clamp(12px,1vw,16px); color: #575757; width: 5.8vw; max-width: 85px; height: 5.8vw; max-height: 85px; border-radius: 100%; background: #fff; border: 3px solid #9A9A9A; display: flex; justify-content: center; align-items: center; flex-shrink: 0; margin: 0 2px 0 2px; box-sizing: border-box; transition: all .4s cubic-bezier(.4,0,.2,1); box-sizing: border-box; padding: 0 4px; }
.taste-box .taste-nav>li:nth-child(n+2):hover,.taste-box .taste-nav>li:nth-child(n+2).active{ border: 6px solid #02846D; box-sizing: border-box; }
.taste-box .taste-nav:before{ content:''; width: 100%; height: 50px; border-radius: 30px; box-sizing: border-box; background: #fff; border: 6px solid #FFC300; position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 0;  }
.taste-box .taste-nav>li a{ width: 100%; height: 100%; line-height: 0; position: absolute; left: 0; top: 0; }
.taste-box .taste-nav_m{ display: none; }
.taste-box .detail-nav{ display: flex; justify-content: center; align-items: center; }
.taste-box .detail-nav .taste-nav{ display: inline-flex; box-sizing: border-box; padding: 0 30px 0 0; }

/* shop */
.common-wrap.shop{ background: url(../images/shop_bg.svg) no-repeat 10% 20%; }
.shop-box{ width: 96%; max-width: 1100px; margin: 0 auto;  box-sizing: border-box; padding: 10px 30px 30px 30px; }
.shop-box .header-tit{ display: flex; justify-content: space-between; align-items: center; position: relative; margin: 0 0 20px 0; }
.shop-box .header-tit .col-1{ font-size: 2rem; color: #575757; display: flex; align-items: center; box-sizing: border-box; }
.shop-box .header-tit .col-1 span{ margin: 0 0 15px 15px; }
.shop-box .header-tit .col-2{ font-size: 4rem; color: #02846D; margin: 0 0 20px 0; }
.shop-box .header-tit:after{ content: ''; width: 97%; height: 2px; background: #4aa899; position: absolute; left: 2.4%; top: 72%; transform: translateY(-50%); }
.shop-box .shop-content{ display: flex; flex-direction: row; justify-content: space-between; }
.shop-box .shop-content .col-1{ width: 40%; max-width: 400px; font-size: 1.8rem; line-height: 1.78; color: #3e3a39; box-sizing: border-box; padding: 0 0 0 60px; order: 1; }
.shop-box .shop-content .tit{ font-size: 3rem; color: #575757; margin: 0 0 10px 0; }
.shop-box .shop-content .shop-btn{ font-size: 2rem; color: #20846d; display: flex; align-items: center; margin: 40px 0 0 0; }
.shop-box .shop-content .shop-btn:after{ content: '\e90e'; font-size: 3rem; margin: 0 0 0 5px; }
.shop-box .shop-content .col-2{ width: 54%; max-width: 540px; flex-shrink: 0; order: 2; margin: 0 0 0 0; }
.shop-box .shop-content .col-2 .img-box img{ width: 100%; }

/* theme */
.theme-box{ width: 100%; max-width: 1340px; margin: 0 auto; box-sizing: border-box; padding: 0 20px 0 20px; }
.theme-recommend{ border-radius: 50px; background: #fff; box-sizing: border-box; padding: 30px 40px 30px 40px; margin: 30px auto 50px; display: flex; flex-direction: row; justify-content: start; align-items: center; position: relative; }
.theme-recommend .img-box{ width: 550px; flex-shrink: 0;  margin: 0 40px 0 0;}
.theme-recommend .img-box img{ width: 100%; }
.theme-recommend .txt-box{ width: 48.5%; max-width: 650px; align-self: start; box-sizing: border-box; padding: 30px 0 0 0; font-size: 2rem; line-height: 1.58; color: #3e3a39; }
.theme-recommend .txt-box .tit{ font-size: 3rem; line-height: 1.58; color: #20846d; }
.theme-recommend .txt-box .tit:after{ content: ''; display: block; width: 100%; height: 1px; background: #e6e6e6; margin: 10px 0 10px 0; }
.theme-recommend .info{ display: flex; flex-direction: row; justify-content: space-between; align-items: center; margin: 0 0 30px 0; }
.theme-recommend .info .col-1{ font-size: 1.4rem; color: #9a9a9a; font-weight: bold; }
.theme-recommend .info .tag-list{ display: flex; font-size: 1.8rem; color: #575757; }
.theme-recommend .info .tag-list li+li{ margin: 0 0 0 20px; }
.theme-recommend .btn_hidden{ width: 100%; height: 100%; line-height: 0; position: absolute; left: 0; top: 0; }
.theme-recommend a.btn_more{ position: absolute; right: 50px; bottom: 40px;  font-size: 1.5rem; color: #20846d; display: flex; align-items: center; }
.theme-recommend a.btn_more:after{ content: '\e95d'; width: 25px; height: 25px; border-radius: 100%; background: #20846d; display: flex; justify-content: center; align-items: center; color: #fff; margin: 0 0 0 5px; }
.theme-list{ display: flex; flex-wrap: wrap; padding: 0 0 0 0; }
.theme-list>li{ width: 24%; max-width: 320px; border-radius: 30px; background: #fff; margin: 0 0.5% 20px 0.5%; overflow: hidden; position: relative; opacity: 1; transition: all .4s cubic-bezier(.4,0,.2,1); }
.theme-list>li:hover{ box-shadow: 5px 10px 10px rgba(87, 87, 87, .2); }
.theme-list>li .img-box img{ width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.theme-list>li .txt-box{ box-sizing:border-box; padding: 15px 15px 15px 15px; }
.theme-list>li .txt-box>p{ font-size: 2rem; color: #02846D; }
.theme-list>li .info-box{ margin: 30px 0 0 0; }
.theme-list>li .date{ font-size: 1.4rem; color: #9a9a9a; }
.theme-list>li .tag-list{ display: flex; font-size: 1.6rem; color: #575757; margin: 3px 0 0 0; }
.theme-list>li .tag-list li+li{ margin: 0 0 0 10px; }
.theme-list>li>a{ width: 100%; height: 100%; line-height: 0; position: absolute; left: 0; top: 0; }
.theme-box .page-list{ display: flex; justify-content: center; align-items: center; font-size: 1.6rem; color: #9a9a9a; margin: 30px 0 0 0; }
.theme-box .page-list>li{ margin: 0 15px 0 15px; position: relative; transition: all .4s cubic-bezier(.4,0,.2,1); }
.theme-box .page-list>li:hover,.theme-box .page-list>li.active{ color: #20846d; font-weight: bold; }
.theme-box .page-list>li:first-child{  margin: -15px 100px 0 0; }
.theme-box .page-list>li:last-child{  margin: -15px 0 0 100px; }
.theme-box .arrowL{ display: block; width: 44px; height: 16px; }
.theme-box .arrowL:before{ content: ''; display: block; width: 44px; height: 2px; background: #9a9a9a; position: absolute; left: 0; bottom: 0; }
.theme-box .arrowL:after{ content: ''; display: block; width: 18px; height: 2px; border-bottom:2px solid #9a9a9a; transform:rotate(-45deg); position: absolute; left: -2px; bottom: 6px; }
.theme-box .arrowR{ display: block; width: 44px; height: 16px; margin: 0 0 0 0;   }
.theme-box .arrowR:before{ content: ''; display: block; width: 44px; height: 2px; background: #9a9a9a; position: absolute; left: 0; bottom: 0; }
.theme-box .arrowR:after{ content: ''; display: block; width: 18px; height: 2px; border-bottom:2px solid #9a9a9a; transform:rotate(45deg); position: absolute; right: -2px; bottom: 6px; }
.theme-box .arrowL:hover:before{ background:#20846d; }
.theme-box .arrowL:hover:after{ border-bottom:2px solid#20846d; }
.theme-box .arrowR:hover:before{ background:#20846d; }
.theme-box .arrowR:hover:after{ border-bottom:2px solid#20846d; }
/* theme detail */
.theme-detail{ display: flex; flex-direction: row; align-items: start; }
.theme-detail>.col-1{ width: 76%; max-width: 1000px; }
.theme-detail>.col-1 .detail-main{  border-radius: 25px 0 25px 25px; background: #fff; box-sizing: border-box; padding: 30px 50px 30px 50px; font-size: 1.8rem; line-height: 1.68; color: #3e3a39; }
.theme-detail>.col-1 img{ width: 76%; max-width: 760px; height: auto; display: block; margin: 0 auto; }
.theme-detail>.col-2{ width: 24%; max-width: 360px; display: flex; flex-direction: column; align-items: center;  }
.theme-detail>.col-2:before{ content: '主題商家'; display: flex; justify-content: center; align-items: start; width: 100%; height: 140px; border-radius: 0 20px 20px  0; background: #4aa899; box-sizing: border-box; padding: 10px 0 0 0;}
.theme-hot .subtit{ font-size: 2.6rem; color: #3e3a39; text-align: center; margin: 50px 0 20px 0; }
.theme-list.hot>li{ width: 32%; border-radius: 30px; background: #fff; margin: 0 0.5% 20px 0.5%; overflow: hidden; position: relative; opacity: 1; }
.theme-hot.mobile{ display: none; }
.theme-hot.pc{ display: block; }
.theme-detail .detail-main .tit{ font-size: 3rem; line-height: 1.58; color: #20846d; }
.theme-detail .detail-main .tit:after{ content: ''; display: block; width: 100%; height: 1px; background: #e6e6e6; margin: 10px 0 10px 0; }
.theme-detail .detail-main .info{ display: flex; flex-direction: row; justify-content: space-between; align-items: center; margin: 0 0 30px 0; }
.theme-detail .detail-main .info .col-1{ font-size: 1.4rem; color: #9a9a9a; font-weight: bold; }
.theme-detail .detail-main .info .tag-list{ display: flex; font-size: 1.8rem; color: #575757; }
.theme-detail .detail-main .info .tag-list li+li{ margin: 0 0 0 20px; }
.theme-detail .ad-list{ width: 88%; max-width: 320px; margin: -80px 0 0 0; display: flex;   }
.theme-detail .ad-list>li{ width: 100%; border-radius: 30px; background: #fff; overflow: hidden; margin: 0 0 20px 0; box-sizing: border-box; padding: 0 0 10px 0; }
.theme-detail .ad-list .img-box>img{ width: 100%; }
.theme-detail .ad-list .txt-box{ font-size: 1.6rem; line-height: 1.58; color: #3e3a39; box-sizing: border-box; padding: 10px 15px 10px 15px; }
.theme-detail .ad-list .txt-box .tit{ font-size: 2rem; color: #575757; margin: 0 0 5px 0; }
.theme-detail .ad-list a.btn_more{ font-size: 1.5rem; color: #20846d; display: flex; justify-content: end; align-items: center; box-sizing: border-box; padding: 0 15px 0 0; }
.theme-detail .ad-list a.btn_more:after{ content: '\e95d'; width: 25px; height: 25px; border-radius: 100%; background: #20846d; display: flex; justify-content: center; align-items: center; color: #fff; margin: 0 0 0 5px; }

/* search */


/* footer */
footer{ height: 40px; background: #fff; font-size: 1.4rem; color: #575757;  margin: 0 0 0 0;  display: flex; flex-direction: row; justify-content: space-between; align-items: center; box-sizing: border-box; padding: 0 2vw; position: relative; box-shadow: 0 3px 8px rgba(0, 0, 0, .1); z-index: 1;  }
footer.map-footer{ width: 100%; height: 40px; margin: 0 0 0 0;  position: fixed; left: 0; bottom: 0; box-sizing: border-box; padding: 0 2vw; box-shadow: 0 3px 8px rgba(0, 0, 0, .2); z-index: 1;  }
footer .company-info{ display: flex; flex-direction: row; align-items: center; font-size: 100%; margin: 0 0 0 0;  text-align:left;}
footer .company-info>li+li{  margin: 0 0 0 20px; }
footer.map-footer .company-info>li+li{  margin: 0 0 0 20px; }
footer .col-2{ display: flex; flex-direction: row; align-items: center; margin: 0 0 0 0; }
footer .footer-socialmedia{ display: flex; font-size: 1.8rem; margin: 0 0 0 20px; }
footer .footer-socialmedia>li{ transition: all .4s cubic-bezier(.4,0,.2,1); }
footer .footer-socialmedia>li:hover{ color: #00846d; }
footer .footer-socialmedia>li+li{ margin: 0 0 0 15px; }
.footer-nav{ display: flex; font-size: 100%; }
.footer-nav>li a{ display: flex; align-items: center; transition: all .4s cubic-bezier(.4,0,.2,1); }
.footer-nav>li a:hover{ color: #00846d; }
.footer-nav>li+li>a:before{ content: ''; display: inline-block; width: 1px; height: 16px; background: #707070; margin: 0 15px; }
.footer-copyright{ order: 2; font-size: 100%; }
.gototop{ bottom: 10px; z-index: 0;  }
.gototop.map{ bottom: 10px; z-index: 0;  }

}





/* $1025~1279
--------------------------------------------------------------------------------------*/
@media screen and (min-width:1025px) and (max-width:1279px){


}