@charset "utf-8";
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
audio,canvas,iframe,img,svg,video{
vertical-align: middle;
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{
display: block;
}
nav ul{
list-style: none;
}
table{
border-collapse: collapse;
border-spacing: 0;
}
/* ------ Font ------ */
@font-face {
font-family: 'icomoon';
src: url('/fonts/icomoon.woff2') format('woff2'),
      url('/fonts/icomoon.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
/* ------ Settings ------ */
html {
scroll-behavior: smooth;
}
body{
position: relative;
margin: 0 auto;
min-width: 360px;
width: 100%;
background-color: #fff;
font-family: "Helvetica Neue", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Arial, "Noto Sans JP", "メイリオ", Meiryo, sans-serif;
color: #000a02; /* 墨 */
font-size: 16px;
line-height: 1.8;
text-align: left;
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
text-size-adjust: 100%;
}
a{
outline: none;
}
a:link, a:visited{
color: #1a34ec;
}
a:hover, a:active{
color: #ea0032; /* 唐紅 */
}
h1,h2,h3,h4,h5{
font-weight: 700;
}
strong{
font-weight: 700;
color: #cdae42; /* 金色 */
}
b{
font-weight: 700;
}
em{
font-weight: 700;
color: #884898; /* 紫 */
font-style: normal;
}
mark{
background: linear-gradient(transparent 58%, #ffff66 98%);
padding: 0.1em 0.2em;
border-radius: 4px;
color: inherit;
}
hr{
margin:0;
}
/* ------ Layout ------ */
.row{
max-width: 1200px;
margin: 0 2%;
}
/* -------------------- ★ Header ★ -------------------- */
header{
width: 100%;
background-color: #222;
}
/* ----- header-top ----- */
#header-top{
position: relative;
background-image: url(/izu-onsen/img/seigaiha-onsen.webp);
color: #f3f3f2; /* 白練 */
font-size: calc(11px + ((1vw - 3.6px) * 0.98));
}
.header-title{
display: flex;
justify-content: space-between;
align-items: flex-start;
}
header h1{
margin: 1px 0 -0.5px 3px;
font-family: "Hiragino Maru Gothic ProN W4", "HG丸ｺﾞｼｯｸM-PRO";
}
header .official-operator{
margin: 1px 3px -0.5px auto;
font-family: "Hiragino Maru Gothic ProN W4", "HG丸ｺﾞｼｯｸM-PRO";
}
header h2{
display:none;
}
/* ----- header-nav ----- */
.header-nav{
display: flex;
flex-direction: column;
align-items: center;
margin: 0 auto;
}
.header-logo p{
position: relative;
margin: 10px;
text-align: center;
}
.header-logo a:hover, .header-logo a:active{
filter: saturate(180%);
}
.header-menu{
width: 100%;
}
.main-navi{
position: relative;
width: 100%;
}
.main-navi ul{
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 0;
padding: 0;
list-style: none;
}
.main-navi li{
width: 20%;
}
.main-navi a{
display: block;
position: relative;
font-size: calc(16px + ((1vw - 3.6px) * 1.71));
height: calc(27px + ((1vw - 3.6px) * 11.4));
padding-top: calc(44px + ((1vw - 3.6px) * 11.4));
text-decoration: none;
color: #f3f3f2;
text-align: center;
}
.main-navi a::before{
display: block;
position: absolute;
width: 100%;
top: calc(0px + ((1vw - 3.6px) * 5.71));
text-align: center;
font-family: 'icomoon';
font-size: 210%;
}
.main-navi a::after{
content: "";
position: absolute;
width: 0;
height: 0;
bottom: -10px;
left: 50%;
margin-left: -10px;
border-left: solid 10px transparent;
border-right: solid 10px transparent;
}
.main-navi li:nth-child(5), .main-navi li:nth-child(7),.main-navi li:nth-child(8){
display:none;
}
.n1 a:hover, .n1 a:active, .n2 a:hover, .n2 a:active, .n3 a:hover, .n3 a:active, .n4 a:hover, .n4 a:active, .n5 a:hover, .n5 a:active, .n6 a:hover, .n6 a:active, .n7 a:hover, .n7 a:active, .n8 a:hover, .n8 a:active, .n9 a:hover, .n9 a:active{
color: #fff;
filter: saturate(180%);
}
.n1 a:link::after, .n1 a:visited::after, .n2 a:link::after, .n2 a:visited::after, .n3 a:link::after, .n3 a:visited::after, .n4 a:link::after, .n4 a:visited::after, .n5 a:link::after, .n5 a:visited::after, .n6 a:link::after, .n6 a:visited::after, .n7 a:link::after, .n7 a:visited::after, .n8 a:link::after, .n8 a:visited::after,.n9 a:link::after, .n9 a:visited::after{
display: none;
}
.n1 a:link, .n1 a:visited{
background-color: hsl(132 100% 1%); /* 墨 */
background: linear-gradient(to bottom, hsl(132 100% 6%), hsl(132 100% 0%));
}
.n1 a::before{
content: "\e900";
}
.n1 a:hover::after, .n1 a:active::after{
display: block;
border-top: solid 10px hsl(193 100% 0%);
}
.n2 a:link, .n2 a:visited{
background-color: hsl(193 100% 33%); /* 縹 */
background: linear-gradient(to bottom, hsl(193 100% 38%), hsl(193 100% 28%));
}
.n2 a::before{
content: "\e90f";
}
.n2 a:hover::after, .n2 a:active::after{
display: block;
border-top: solid 10px hsl(193 100% 28%);
}
.n3 a:link, .n3 a:visited{
background-color: hsl(145 48% 47%); /* 青/緑 */
background: linear-gradient(to bottom, hsl(145 48% 52%), hsl(145 48% 42%));
}
.n3 a::before{
content: "\e9b2";
}
.n3 a:hover::after, .n3 a:active::after{
display: block;
border-top: solid 10px hsl(145 48% 42%);
}
.n4 a:link, .n4 a:visited{
background-color: hsl(45 93% 52%); /* 藤黄 */
background: linear-gradient(to bottom, hsl(45 93% 57%), hsl(45 93% 47%));
}
.n4 a::before{
content: "\e9a3";
}
.n4 a:hover::after, .n4 a:active::after{
display: block;
border-top: solid 10px hsl(45 93% 47%);
}
.n5 a:link, .n5 a:visited{
background-color: hsl(26 92% 55%); /* 黄丹 */
background: linear-gradient(to bottom, hsl(26 92% 60%), hsl(26 92% 50%));
}
.n5 a::before{
content: "\e932";
}
.n5 a:hover::after, .n5 a:active::after{
display: block;
border-top: solid 10px hsl(26 92% 50%);
}
.n6 a:link, .n6 a:visited{
background-color: hsl(348 100% 38%); /* 深緋 */
background: linear-gradient(to bottom, hsl(348 100% 43%), hsl(348 100% 33%));
}
.n6 a::before{
content: "\e928";
}
.n6 a:hover::after, .n6 a:active::after{
display: block;
border-top: solid 10px hsl(348 100% 33%);
}
.n7 a:link, .n7 a:visited{
background-color: hsl(288 35% 43%); /* 紫 */
background: linear-gradient(to bottom, hsl(288 35% 48%), hsl(288 35% 38%));
}
.n7 a::before{
content: "\e92a";
}
.n7 a:hover::after, .n7 a:active::after{
display: block;
border-top: solid 10px hsl(288 35% 38%);
}
.n8 a:link, .n8 a:visited{
background-color: hsl(232 38% 49%); /* 紺桔梗 */
background: linear-gradient(to bottom, hsl(232 38% 54%), hsl(232 38% 44%));
}
.n8 a::before{
content: "\e953";
}
.n8 a:hover::after, .n8 a:active::after{
display: block;
border-top: solid 10px hsl(232 38% 44%);
}
.n9 a:link, .n9 a:visited{
background-color: hsl(188 100% 37%); /* 浅葱 */
background: linear-gradient(to bottom, hsl(188 100% 42%), hsl(188 100% 32%));
}
.n9 a::before{
content: "\e947";
}
.n9 a:hover::after, .n9 a:active::after{
display: block;
border-top: solid 10px hsl(188 100% 32%);
}
/* ----- mainvisual ----- */
#mainvisual{
display:none;
}
/* -------------------- ★ Breadcrumb ★ -------------------- */
.breadcrumb{
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
.breadcrumb-list{
flex: 1;
margin: 10px 0;
font-size: calc(11px + ((1vw - 3.6px) * 0.49));
color: #000a02;
}
.breadcrumb-list li{
display: inline;
list-style: none;
}
.breadcrumb-list li::after{
margin-left: 3px;
content: ">";
}
.breadcrumb-list li:last-child::after{
content: "";
}
.home-icon::before{
margin-right: 1px;
font-family: 'icomoon';
content: "\e900";
}
.home-label{
display:none;
}
.breadcrumb-list a, .breadcrumb-note a{
color: #000a02;
text-decoration:none;
}
.breadcrumb-list a:hover, .breadcrumb-list a:active, .breadcrumb-note a:hover, .breadcrumb-note a:active{
text-decoration: underline;
color: #ea0032; /* 唐紅 */
}
.breadcrumb-note{
margin: 10px 3px 10px auto;
font-size: calc(11px + ((1vw - 3.6px) * 0.49));
color: #000a02;
white-space: nowrap;
}
.breadcrumb-note::before{
content: "※";
}
/* -------------------- ★ View Transitions ★ -------------------- */
/* タブを上に留める */
.onsen-tabs{
display: flex;
position: sticky;
top: 0;
background: #fff;
z-index: 10;
}
.onsen-tabs a{
flex: 1; /* 均等に分割 */
box-sizing: border-box;
margin: clamp(5px, 1.225vw, 10px) 0 clamp(15px, 3.676vw, 30px) 0;
font-size: clamp(14px, 2.108vw + 6.41px, 28px);
color: #8c867b; /* 利休鼠 */
text-align: center;
text-decoration: none;
border-bottom: clamp(6px, 0.9vw + 2.8px, 12px) solid #f3f3f2; /* 白練 */
box-shadow: 0 1px 0px 0 rgba(0, 0, 0, 0.1);
}
.onsen-tabs a span{
margin: 0 0.1em;
font-size: 0.75em;
}
.onsen-tabs a:not(:last-child){
margin-right: 3px; /* 最後以外のリンクに右余白をつける */
}
.onsen-tabs a:first-of-type:hover{
color: #ea930a; /* 琥珀 */
font-weight: 700;
border-color: #ea930a; /* 琥珀 */
}
.onsen-tabs a:nth-of-type(2):hover, .onsen-tabs a:nth-of-type(2).active{
color: #3eb370; /* 青/緑 */
font-weight: 700;
border-color: #3eb370; /* 青/緑 */
}
.onsen-tabs a:last-of-type:hover{
color: #7065a3; /* 菫 */
font-weight: 700;
border-color: #7065a3; /* 菫 */
}
/* -------------------- ★ Main ★ -------------------- */
.container{
display: flex;
flex-direction: column; /* スマホ時：縦並び */
margin-top: 0;
}
.main-column{
width: 100%;
}
main h1 img{
width: 100%;
height:auto;
aspect-ratio: 960 / 150;
border-radius: 8px;
}
/* ------ notice ------ */
.notice{
margin: 0.5em 1em;
font-size: clamp(16px, calc(16px + ((100vw - 360px) * (1 / 420))), 18px);
}
/* ----- 地図検索 ----- */
.imagemap{
width: 100%;
margin-top: 3px;
box-shadow: 0 0 5px 0px rgba(0,0,0,0.6);
}
.imagemap-grid{
position: relative;
width: 100%;
height: auto;
}
.imagemap-grid img{
display: block;
width: 100%;
height: auto;
aspect-ratio: 1200 / 1500;
}
.imagemap-grid a:hover{
background-color: rgba(255,255,255,0.3);
}
.area-link{
position: absolute;
display: block;
text-decoration: none;
color: inherit;
}
.area-link:active {
background-color: rgba(255,255,255,0.3);
}
/* sr-only: 視覚的に完全に隠す（スクリーンリーダーには見える） */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
/* ----- 温泉地 ----- */
.tsukinoyu{ left: 34.0833%; top: 5.7333%; width: 7.5833%; height: 3.8667%; }
.mitohama{ left: 34.0833%; top: 16.3333%; width: 7.5000%; height: 6.0667%; }
.takekura{ left: 41.9167%; top: 1.4667%; width: 15.6667%; height: 4.0000%; }
.hatake{ left: 42.0833%; top: 5.8000%; width: 15.4167%; height: 3.8000%; }
.komanoyu{ left: 50.0833%; top: 10.0667%; width: 15.3333%; height: 3.8000%; }
.nirayama{ left: 42.0000%; top: 10.0667%; width: 7.5833%; height: 3.8000%; }
.yunohana{ left: 34.1667%; top: 10.0000%; width: 7.4167%; height: 6.0667%; }
.izunagaoka{ left: 42.0000%; top: 14.3333%; width: 23.5000%; height: 8.0000%; }
.ohito{ left: 50.0833%; top: 22.8000%; width: 7.4167%; height: 8.0000%; }
.nakaizu{ left: 58.0000%; top: 22.8000%; width: 7.4167%; height: 29.1333%; }

.shuzenji{ left: 26.0833%; top: 22.8000%; width: 23.3333%; height: 12.2000%; }
.aobane{ left: 50.0000%; top: 31.2667%; width: 7.4167%; height: 3.7333%; }
.funabara{ left: 26.0833%; top: 35.5333%; width: 15.4167%; height: 5.8000%; }
.tsukigase{ left: 42.1667%; top: 35.6667%; width: 15.3333%; height: 5.6667%; }
.yoshina{ left: 26.0000%; top: 41.7333%; width: 15.5000%; height: 6.0000%; }
.sagasawa{ left: 42.0000%; top: 41.8000%; width: 15.3333%; height: 5.8667%; }
.yugashima{ left: 26.0833%; top: 48.1333%; width: 31.3333%; height: 7.9333%; }
.heda{ left: 2.2500%; top: 26.9333%; width: 23.2500%; height: 8.1333%; }
.toi{ left: 10.2500%; top: 35.6000%; width: 15.2500%; height: 16.2667%; }
.yagisawa{ left: 2.0833%; top: 43.8667%; width: 7.4167%; height: 8.0000%; }

.ugusu{ left: 10.0833%; top: 52.3333%; width: 15.4167%; height: 3.6667%; }
.neginohata{ left: 26.0000%; top: 56.6000%; width: 7.5833%; height: 8.0000%; }
.dogashima{ left: 2.2500%; top: 56.6000%; width: 23.3333%; height: 7.9333%; }
.matsuzaki{ left: 10.0833%; top: 65.0000%; width: 7.3333%; height: 8.0667%; }
.sakurada{ left: 18.0833%; top: 65.0667%; width: 7.4167%; height: 8.0000%; }
.osawa{ left: 26.0000%; top: 65.1333%; width: 7.5833%; height: 7.9333%; }
.iwachi{ left: 2.2500%; top: 73.4667%; width: 15.1667%; height: 3.7333%; }
.ishibu{ left: 2.1667%; top: 77.8000%; width: 15.3333%; height: 3.5333%; }
.kumomi{ left: 2.1667%; top: 81.8000%; width: 15.3333%; height: 6.1333%; }
.izusan{ left: 66.0000%; top: 6.0000%; width: 16.1667%; height: 3.6667%; }

.atami{ left: 66.0000%; top: 10.1333%; width: 16.0833%; height: 12.1333%; }
.ajiro{ left: 82.6667%; top: 14.3333%; width: 7.5000%; height: 7.9333%; }
.usami{ left: 66.0833%; top: 22.9333%; width: 16.1667%; height: 3.6000%; }
.ito{ left: 66.0000%; top: 26.9333%; width: 24.0833%; height: 8.1333%; }
.izu-kogen{ left: 65.9167%; top: 35.5333%; width: 31.4167%; height: 7.9333%; }
.ukiyama{ left: 66.0833%; top: 43.9333%; width: 24.0000%; height: 3.7333%; }
.akazawa{ left: 65.9167%; top: 48.2000%; width: 24.0833%; height: 3.7333%; }
.okawa{ left: 58.0000%; top: 52.2667%; width: 24.2500%; height: 3.8667%; }
.hokkawa{ left: 57.9167%; top: 56.4667%; width: 24.2500%; height: 3.9333%; }
.atagawa{ left: 58.0000%; top: 60.8667%; width: 24.1667%; height: 3.7333%; }

.katase{ left: 70.3333%; top: 65.1333%; width: 11.8333%; height: 3.6667%; }
.shirata{ left: 58.0000%; top: 65.0667%; width: 11.8333%; height: 3.7333%; }
.inatori{ left: 58.0000%; top: 69.3333%; width: 16.0000%; height: 3.7333%; }
.imaihama{ left: 58.0000%; top: 73.4667%; width: 7.5000%; height: 5.8667%; }
.kawazu{ left: 42.0833%; top: 69.4000%; width: 15.3333%; height: 12.0000%; }
.yugano{ left: 42.0000%; top: 65.0000%; width: 15.4167%; height: 3.8667%; }
.kawazu-nanadaru{ left: 42.0000%; top: 56.5333%; width: 15.4167%; height: 8.1333%; }
.shirahama{ left: 50.0000%; top: 81.8000%; width: 7.5000%; height: 5.8667%; }
.shimoda{ left: 34.1667%; top: 88.2667%; width: 23.3333%; height: 5.8667%; }
.rendaiji{ left: 34.0833%; top: 81.8000%; width: 15.5000%; height: 5.9333%; }
.kochi{ left: 34.0833%; top: 75.5333%; width: 7.4167%; height: 5.8667%; }
.yokokawa{ left: 26.0833%; top: 75.4667%; width: 7.4167%; height: 5.8667%; }
.kannon{ left: 26.0833%; top: 81.7333%; width: 7.5000%; height: 6.0000%; }
.yumigahama{ left: 26.0833%; top: 94.6000%; width: 15.4167%; height: 3.8000%; }
.shimogamo{ left: 18.0000%; top: 90.2667%; width: 15.5000%; height: 3.8667%; }
.yugawara{ left: 65.9167%; top: 0.4667%; width: 24.1667%; height: 4.9333%; }
/* -------------------- ★ Onsen tips ★ -------------------- */
.onsen-tips{
margin: 60px 0;
font-size: clamp(16px, calc(16px + ((100vw - 360px) * (1 / 420))), 18px);
}
.onsen-tips h2 img{
width: 100%;
height:auto;
aspect-ratio: 960 / 150;
border-radius: 8px;
}
.onsen-tips h3{
margin: 3em 1.5em 0 1.5em;
}
.onsen-tips p{
margin: 1.5em 1.5em 0 1.5em;
}
.onsen-tips p img{
display: block;
margin: 0 auto;
width: 97%;
height: auto;
aspect-ratio: 800 / 600;
border-radius: 8px;
}
/* -------------------- ★ Sidebar ★ -------------------- */
.sidebar{
width: 100%;
margin-top: 60px;
padding: 5px 0 ;
background-color: #222;
border-radius: 8px;
}
.sidebar h2{
margin: 20px 0;
font-size: 23px;
color: #f3f3f2; /* 白練 */
text-align: center;
}
.sidebar h2 img{
width: 100%;
height:auto;
aspect-ratio: 640 / 100;
}
/* ------ banner1 ------ */
.side-banner1{
padding: 30px 0;
min-height: 250px;
text-align: center;
}
/* ------ ranking ------ */
.ranking{
margin: 0 35px 35px 35px;
padding: 20px 5px 20px 25px;
text-align:left;
background-color: #fff;
border-radius: 8px;
}
.ranking p{
font-size: 19px;
}
.ranking p::first-letter{
background-color: #8c867b; /* 利休鼠 */
color: #f3f3f2; /* 白練 */
border-radius: 50%;
padding: 0.2em 0.46em;
margin-right: 0.5em;
text-align: center;
line-height: 2em;
}
.ranking p:first-of-type::first-letter,
.ranking p:nth-of-type(2)::first-letter,
.ranking p:nth-of-type(3)::first-letter {
background-color: #884898; /* 紫 */
font-weight: bold;
}
/* ------ Partner ------ */
.partner{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr)); /* 常時2列 */
gap: 15px;
margin: 0 35px 35px 35px;
padding: 0 15px;
box-sizing: border-box;
background-color: #fff;
border-radius: 8px;
}
.partner a{
text-decoration:none;
}
.partner a:hover{
text-decoration: underline;
}
.partner-content{
margin: 20px 0 8px 0;
text-align: center;
}
.partner-content a:first-of-type img{
max-width: 120px;
height: auto;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.partner-content p{
margin-top: 3px;
font-size: 14px;
}
.partner a img:hover{
background: #ff6c00;
box-shadow: 0 3px 10px 3px rgba(0,0,0,0.4);
}
/* ------ banner2 ------ */
.banner-wrapper{
display: grid;
grid-template-columns: 1fr;
justify-content: center;
}
.side-banner2{
padding: 30px 0;
max-width: 300px;
margin: 0 auto;
}
/* -------------------- ★ 検索Btn ★ -------------------- */
#searchBtn{
background-color: hsl(288 35% 43%); /* 紫 */
background: linear-gradient(to bottom, hsl(288 35% 48%), hsl(288 35% 38%));
}
#searchBtn:hover{
background: linear-gradient(to bottom, hsl(288 35% 38%), hsl(288 35% 28%));
}
/* -------------------- ★ Link ★ -------------------- */
.link{
padding: 20px 0x;
text-align: center;
background: hsl(288 35% 43% / 7%); /* 紫 7％ */
}
.link a{
padding: 0 4px 0 8px;
color: #000a02; /* 墨 */
font-size: 12px;
text-decoration: none;
border-left: solid 1px #e3e1eb;
}
.link a:first-child{
padding-left: 0;
border-left: none;
}
.link a:hover, .link a:active{
color: #ea0032; /* 唐紅 */
text-decoration: underline;
}
/* -------------------- ★ Page Top ★ -------------------- */
.page-top{
font-family: "Verdana";
font-weight: 900;
}
.page-top a{
display: block;
padding: 0.2em 0 0.35em 0;
text-align: center;
text-decoration: none;
letter-spacing: 0.3px;
color: #f3f3f2; /* 白練 */
}
.page-top a::before{
font-family: 'icomoon';
content: "\ea25";
margin-right: 0.4em;
}
.page-top a:link, .page-top a:visited{
background-color: hsl(288 35% 43%); /* 紫 */
background: linear-gradient(to bottom, hsl(288 35% 48%), hsl(288 35% 38%));
}
.page-top a:hover, .page-top a:active{
letter-spacing: 0.5px;
color: #f3f3f2; /* 白練 */
background: linear-gradient(to bottom, hsl(288 35% 38%), hsl(288 35% 28%));
}
/* -------------------- ★ Footer ★ -------------------- */
footer{
width: 100%;
margin: 0;
padding-bottom: 20vw;
background-image: url(/izu-onsen/img/seigaiha-onsen.webp);
color: #f3f3f2; /* 白練 */
text-align: center;
}
footer .row{
position: relative;
}
/* ----- sitemap ----- */
.sitemap{
display: none;
}
/* ----- footer link ----- */
footer .link a:link, footer .link a:visited{
color: #f3f3f2; /* 白練 */
}
footer .link a:hover, footer .link a:active{
color: #ea0032; /* 唐紅 */
}
/* ----- logomark ----- */
.logomark{
display:none;
}
footer h2{
display:block;
font-family: "Hiragino Maru Gothic ProN W4", "HG丸ｺﾞｼｯｸM-PRO";
font-size: calc(30px + ((1vw - 3.6px) * 3.57));
text-shadow: 3px 3px 3px #595455;
letter-spacing: 2px;
}
footer h2 span{
margin: 0 0.1em;
font-size: 0.55em;
}
footer .official-operator{
display:block;
font-family: "Hiragino Maru Gothic ProN W4", "HG丸ｺﾞｼｯｸM-PRO";
font-size: calc(14px + ((1vw - 3.6px) * 0.95));
letter-spacing: 2px;
}
footer .official-operator::before{
content: "- ";
}
footer .official-operator::after{
content: " -";
}
footer p{
font-size: 12px;
}
/* ----- bottom-nav ----- */
.bottom-nav{
position: fixed;
bottom: calc(-0.4em - ((1vw - 3.6px) * 4.9)); /* 全体の下の空間 */
width: 100%;
display: flex;
justify-content: space-around;
background-color: #f3f3f2; /* 白練 */
border-top: 1px solid #f3f3f2; /* 白練 */
box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
}
.nav-item{
flex: 1;
text-align: center;
text-decoration: none;
font-size: calc(12px + ((1vw - 3.6px) * 1.05));
}
.nav-item span{
display: block;
color: #8c867b; /* 利休鼠 */
transition: color 0.3s; /* 滑らかに変化 */
}
.nav-item .icon-furusato::before, .nav-item .icon-event::before, .nav-item .icon-access::before, .nav-item .icon-life::before{
font-family: 'icomoon';
font-size: calc(8vw);
display: block;
margin: -0.1em auto -0.3em auto; /* アイコンの上と下文字との空間 */
}
.nav-item .icon-furusato::before{
content: "\e928";
}
.nav-item .icon-event::before{
content: "\e953";
}
.nav-item .icon-access::before{
content: "\e947";
}
.nav-item .icon-life::before{
content: "\e918";
}
.nav-item:hover span{
color: #ea0032; /* 唐紅 */
}
/* 中央ロゴ */
.nav-item.middle{
position: relative;
top: -4vw;
}
.nav-item.middle img{
width: calc(19vw);
height: calc(19vw);
}
.nav-item.middle img:hover{
filter: brightness(1.2);
transition: filter 0.3s ease;
}
/* -------------------- ★★★★★ 768 ★★★★★ -------------------- */
@media (min-width: 768px) {
/* -------------------- ★ Header ★ -------------------- */
/* ----- header-top ----- */
#header-top{
font-size: 15px;
}
header h1{
margin: 0 0 -1px 5px;
}
header .official-operator{
margin: 0 5px -1px auto;
}
header h2{
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -43%);
font-size: 12px;
font-weight: 500;
}
/* ----- header-nav ----- */
.header-nav{
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
}
.header-logo{
width: 36%;
}
.header-logo img{
width:94%;
max-width:336px;
height:auto;
}
.header-logo p{
margin: 17px 0 0 1%;
text-align: left;
}
.header-menu{
width: 64%;
}
.main-navi{
margin: 2% 0;
}
.main-navi ul{
justify-content: flex-end;
}
.main-navi a{
font-size: calc(18px + ((1vw - 7.68px) * 0.78));
height: calc(35.5px + ((1vw - 7.68px) * 4));
padding-top: calc(63.5px + ((1vw - 7.68px) * 4));
}
.main-navi a::before{
top: 12px;
}
/* ----- mainvisual ----- */
#mainvisual{
display:block;
position: relative;
width: 100%;
max-width: 1200px;
aspect-ratio: 1200 / 470;
margin: 0 auto;
overflow: hidden;
}
#mainvisual img{
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
clip-path: circle(0% at 50% 50%);
transition: clip-path 2s ease;
opacity: 0;
}
#mainvisual img.active{
clip-path: circle(150% at 50% 50%);
opacity: 1;
z-index: 1;
}
/* -------------------- ★ Breadcrumb ★ -------------------- */
.breadcrumb-list, .breadcrumb-note{
font-size: 13px;
}
.home-label{
display:inline;
}
/* -------------------- ★ Sidebar ★ -------------------- */
/* ------ Partner ------ */
.partner{
grid-template-columns: repeat(4, minmax(0, 1fr)); /* 3列 */
justify-content: start; /* 左寄せ */
}
/* ------ banner2 ------ */
.banner-wrapper{
grid-template-columns: repeat(2, 1fr);
}
}
/* -------------------- ★★★★★ 1024 ★★★★★ -------------------- */
@media (min-width: 1024px) {
/* -------------------- ★ Header ★ -------------------- */
/* ----- header-nav ----- */
.header-logo{
width: 30%;
}
.header-logo p{
margin: 4% 0 0 1%;
}
.header-menu{
width: 70%;
}
.main-navi li{
width: 12.5%;
}
.main-navi a{
font-size: calc(15.5px + ((1vw - 10.24px) * 0.97));
height: calc(31px + ((1vw - 10.24px) * 3.98));
padding-top: calc(59px + ((1vw - 10.24px) * 3.98));
}
.main-navi li:nth-child(5), .main-navi li:nth-child(7),.main-navi li:nth-child(8){
display:inline;
}
/* -------------------- ★ Main ★ -------------------- */
.container{
display: grid;
grid-template-columns: 1fr auto;
grid-template-rows: auto auto;
column-gap: calc(30px + ((1vw - 10.24px) * 34.1));
align-items: stretch;
}
.container > .main-column:nth-of-type(1) { /* メイン1 → 左上 */
grid-column: 1;
grid-row: 1;
}
.container > .main-column:nth-of-type(3) { /* メイン2 → 左下 */
grid-column: 1;
grid-row: 2;
}
/* ------ notice ------ */
.notice{
margin: 1.5em 1em;
}
/* -------------------- ★ Onsen tips ★ -------------------- */
.onsen-tips{
margin: 90px 0;
}
.onsen-tips p{
margin: 2em 1.5em 0 1.5em;
}
/* -------------------- ★ Sidebar ★ -------------------- */
.sidebar{ /* サイドバー → 右上 */
grid-column: 2;
grid-row: 1 / span 2; /* 上下にまたがるように */
width: calc(330px + ((1vw - 10.24px) * 22.7));
flex-shrink: 0;
margin-top: 0;
background-color: #222;
border-radius: 8px 8px 0 0;
}
/* ------ Partner ------ */
.partner{
grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2列 */
justify-content: center; /* 中央 */
}
/* ------ banner2 ------ */
.banner-wrapper{
grid-template-columns: 1fr;
}
/* -------------------- ★ Link ★ -------------------- */
.link a{
font-size: 13px;
}
/* -------------------- ★ Footer ★ -------------------- */
footer{
padding-bottom: 3px;
text-align:left;
}
footer .row{
padding: 0 15px;
}
/* ----- logomark ----- */
.logomark{
display: block;
position: absolute;
right: 15px; 
top: 4px;
width: 155px;
height: auto;
z-index: 1;
}
footer h2{
display: inline;
letter-spacing: 0;
}
footer .official-operator{
display: inline;
margin-left: 10px;
letter-spacing: 0;
}
footer p{
margin-left: 2px;
font-size: 14px;
letter-spacing: 0.5px;
}
/* ----- bottom-nav ----- */
.bottom-nav{
display: none;
}
}
/* -------------------- ★★★★★ 1200 ★★★★★ -------------------- */
@media (min-width: 1200px) {
/* ------ Layout ------ */
.row{
margin: 0 auto;
}
/* -------------------- ★ Header ★ -------------------- */
/* ----- header-top ----- */
header h1{
margin: 0 0 -1px 0;
}
header .official-operator{
margin: 0 0 -1px auto;
}
/* ----- header-nav ----- */
.main-navi a{
font-size: 17.2px;
height: 38px;
padding-top: 66px;
}
/* -------------------- ★ Breadcrumb ★ -------------------- */
.breadcrumb-list, .breadcrumb-note{
margin: 10px 0.5px;
}
/* -------------------- ★ Main ★ -------------------- */
.container{
grid-template-columns: minmax(0, 1fr) 370px;
column-gap: 90px;
}
/* -------------------- ★ Sidebar ★ -------------------- */
.sidebar{
width: auto;
margin-left: 0;
}
/* -------------------- ★ Footer ★ -------------------- */
footer h2{
font-size: 60px;
letter-spacing: 2px;
}
footer .official-operator{
font-size: 22px;
letter-spacing: 2px;
}
.logomark img{
display: block;
width: 100%;
height: auto;
}
}