@charset "utf-8";
/* ------ Settings ------ */
:root {
--base-color: 198 100% 32%; /* 藍 */
--base-pale-color: 198 100% 37%;
--base-light-color: 198 100% 27%;
--base-dark-color: 198 100% 17%;
--seigaiha: url(/img/seigaiha-policy.webp); /* policy */
}
/* ------ Settings ------ */
/*
body{
background: #fff;
}
/* -------------------- ★ 最終更新日 visually-hidden ★ -------------------- */
.visually-hidden{
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
/* -------------------- ★ Seasonal Feature ★ -------------------- */
.seasonal-feature{
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
position: relative;
width: 100%;
margin-top: 20px;
padding: 0;
}
.seasonal-feature ul{
display: contents;
}
.seasonal-feature li{
flex: 0 0 calc(33.333% - 1%);
box-sizing: border-box;
margin: 0.5%;
list-style: none;
border-radius: 8px;
}
.seasonal-feature a{
display: block;
position: relative;
color: #f3f3f2;
text-align: center;
}
.seasonal-feature img{
width: 99%;
height: auto;
aspect-ratio: 360 / 360;
border-radius: 8px;
box-shadow: 0 0 8px #fff, 0 0 8px #fff, 0 0 8px #fff, 0 0 8px #fff, 0 0 8px #ddd, 0 0 15px #aaa;
}
.seasonal-feature a img:hover {
filter: brightness(125%);
transform: scale(1.02);
}
/* 中央の画像サイズを80%にして枠内の中央に配置 */
.seasonal-feature li:nth-child(5) {
display: flex;
justify-content: center;
align-items: center;
}
.seasonal-feature li:nth-child(5) img {
width: 80%;
box-shadow: none;
}
/* ------ search-box ------ */
.search-box{
display: flex;
justify-content: center;
margin: -20px 0 30px 0;
}
/* -------------------- ★ Shizuoka Map Search ★ -------------------- */
/* ----- 地図検索 ----- */
.shizuoka-map-search h2{
margin: 0 0 6px 0;
width: 100%;
height: auto;
aspect-ratio: 960 / 150;
background-size: contain;
background-repeat: no-repeat;
border-radius: 8px;
 /* 文字隠しの処理（これで文字は画面から隠れます） */
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
.imagemap{
width: 100%;
margin-top: 3px;
box-shadow: 0 0 4px 0 rgba(0,0,0,0.6);
}
.imagemap-grid{
position: relative;
width: 100%;
height: auto;
}
.imagemap-grid a:hover{
background-color: rgba(255,255,255,0.3);
}
.imagemap-grid img{
width: 100%;
height: auto;
}
/* ----- 市町 ----- */
.area-link {
position: absolute;
display: block;
text-indent: -9999px; /* テキストを隠す */
}
.sumpu { left:22.2667%; top:39.1%; width:12.6%; height:12.3%; }
.okushizu {
  inset: 0;
  pointer-events: auto;
  clip-path: polygon( 13.5000% 26.4545%, 44.8333% 26.3636%, 44.9167% 38.5455%, 22.0000% 38.5455%, 22.0000% 47.1818%, 13.5000% 47.0909%, 13.5000% 26.5455%, 13.5000% 26.4545%);
}
.utogi { left:22.6667%; top:18.0000%; width:12.4%; height:7.9%; }
.umegashima { left:22.5833%; top:9.2727%; width:12.3333%; height:7.8182%; }
.ikawa { left:13.5%; top:0.7%; width:8.8%; height:24.9%; }
.suruga { left:22.7500%; top:52.1%; width:12.2%; height:11.9%; }
.shimizu-ku { left:35.5833%; top:39.3%; width:9.4%; height:20.6%; }
.yui-kambara { left:45.5833%; top:35.0%; width:10.4%; height:7.7%; }
.yaizu { left:22.6667%; top:65.0%; width:6.1%; height:13.6%; }
.fujieda { left:13.5833%; top:47.8%; width:8.5%; height:25.9%; }
.shimada { left:6.3333%; top:55.6%; width:6.6%; height:18.0%; }
.kanaya { left:0.6%; top:55.6%; width:5.2%; height:18.0%; }
.kawane {
  inset: 0;
  pointer-events: auto;
  clip-path: polygon( 0.58% 35.0%, 5.9% 35.0%, 5.9% 42.6%, 12.8333% 42.6%, 12.9167% 55.1000%, 0.5000% 54.9091%, 0.5000% 35.1818%, 0.5833% 35.0000%);
}
.yoshida { left:15.8%; top:74.2%; width:6.1%; height:9.0%; }
.makinohara { left:6.3333%; top:74.4%; width:8.9%; height:16.6%; }
.omaezaki {
  inset: 0;
  pointer-events: auto;
  clip-path: polygon( 0.6% 91.9%, 15.3% 91.9%, 15.3% 96.5%, 18.4167% 96.5%, 18.5000% 99.18%, 0.6% 99.18%, 0.6% 91.9%, 7.5833% 97.5455%);
}
.tokuyama { left:6.2%; top:35.1%; width:6.7%; height:7.2%; }
.okuoi { left:0.6%; top:0.7%; width:12.2%; height:33.6%; }
.fuji { left:56.5%; top:17.8%; width:10.2%; height:16.3%; }
.fujikawa { left:45.5%; top:26.4%; width:10.3%; height:7.8%; }
.fujinomiya { left:45.5%; top:0.6%; width:21.3%; height:16.4%; }
.shibakawa { left:45.5%; top:17.8%; width:10.3%; height:7.8%; }
.numazu {
  inset: 0;
  pointer-events: auto;
  clip-path: polygon( 67.4167% 26.5455%, 75.0833% 26.5455%, 75.0833% 42.8182%, 73.5833% 43.0000%, 73.5000% 34.3636%, 67.5833% 34.1818%, 67.4167% 26.4545%, 67.4167% 26.5455%);
}
.uchiura-nishiura { left:67.4%; top:43.4%; width:7.6%; height:8.1%; }
.heda { left:64.8%; top:52.0%; width:10.2%; height:7.9%; }
.shimizu { left:75.5%; top:35.0%; width:6.1%; height:7.8%; }
.nagaizumi { left:75.5%; top:26.3%; width:6.1%; height:7.8%; }
.susono { left:67.4%; top:17.7%; width:23.9%; height:7.8%; }
.gotemba { left:67.4%; top:9.2%; width:23.9%; height:7.8%; }
.oyama { left:67.4%; top:0.7%; width:23.9%; height:7.8%; }
.mishima { left:82.2%; top:26.3%; width:9.1%; height:7.8%; }
.kannami { left:82.2%; top:34.9%; width:9.1%; height:7.8%; }
.izunokuni { left:75.6%; top:43.6%; width:15.7%; height:7.8%; }
.shuzenji { left:75.6%; top:52.0%; width:10.3%; height:7.9%; }
.nakaizu { left:86.5%; top:52.0%; width:4.9%; height:16.3%; }
.amagi { left:75.5%; top:60.6%; width:10.4%; height:7.9%; }
.toi { left:64.8%; top:60.6%; width:10.2%; height:7.9%; }
.nishiizu { left:63.5%; top:69.2%; width:14.9%; height:8.3%; }
.matsuzaki { left:63.5%; top:78.1%; width:14.9%; height:8.3%; }
.atami { left:92.0%; top:34.9%; width:6.2%; height:16.6%; }
.ito { left:92.0%; top:52.0%; width:7.5%; height:16.6%; }
.atagawa { left:89.3%; top:69.2%; width:7.8%; height:6.2%; }
.inatori { left:89.3%; top:75.9%; width:7.8%; height:6.2%; }
.kawazu { left:78.9%; top:69.2%; width:9.8%; height:12.9%; }
.shimoda {
  inset: 0;
  pointer-events: auto;
  clip-path: polygon( 78.9% 82.7273%, 88.6667% 82.7273%, 88.6667% 94.5455%, 86.6667% 94.5455%, 86.5000% 93.0000%, 81.6667% 92.9091%, 81.5833% 95.8182%, 78.9167% 95.7273%, 78.9167% 82.8182%, 78.8333% 82.7273%);
}
.minamiizu {
  inset: 0;
  pointer-events: auto;
  clip-path: polygon( 65.0% 87.2727%, 78.2500% 87.2727%, 78.4167% 99.5455%, 71.8333% 99.4182%, 71.6667% 96.1818%, 64.9167% 96.0000%, 64.9167% 87.0909%, 65.0000% 87.2727%);
}
/* -------------------- ★ Event / News ★ -------------------- */
#event, #news{
margin-bottom: 50px;
padding: 15px 8px 20px 8px;
font-size: 15px;
background-image: url(/img/paper.jpg); /* paper */
border-radius: 30px;
color: #000a02; /* 墨 */
}
#event h2, #news h2{
padding-bottom: 5px;
font-size: 30px;
border-bottom: 2px solid #8c867b; /* 利休鼠 */
}
#event ul, #news ul{
list-style: none;
padding: 0;
}
/* ----- Event ----- */
#event li{
display: flex;
align-items: center;
gap: 10px;
padding: 2px 0 2px 0;
border-bottom: 1px dashed #8c867b; /* 利休鼠 */
}
#event time{
display: flex;
flex-direction: column;
align-items: flex-start;
width: 110px;
flex-shrink: 0; /* 画面が狭くなっても潰れない設定 */
}
#event .year{
margin: 0 0 0 1px;
font-size: 11px;
color: #8c867b; /* 利休鼠 */
}
#event .month-day{
font-size: 27px;
font-weight: 700;
position:relative;
margin: -15px 0 -10px 0;
}
#event .duration{
min-width: 38px;
margin: 9px 0 -10px -48px;
font-size: 16px;
font-weight: 700;
}
#event .label{
display: inline-block;
width: 75px;
padding: 3px 0;
flex-shrink: 0; /* 画面が狭くなっても潰れない設定 */
text-align:center;
font-size: 15px;
font-weight: 700;
color: #f3f3f2; /* 白練 */
background-color: #ff6f00; /* お祭り */
border-radius: 3px;
}
#event .info-event{
background-color: #4d5aaf; /* イベント */
}
#event .info-seasonal{
background-color: #f83929; /* 祭事・風物詩 */
}
#event p{
flex-grow: 1; /* 残りの幅をすべて引き受ける */
min-width: 0; /* 文字溢れ・折り返しを正常に機能させる */
margin: 0 0 -2px 0;
font-size: 17px;
line-height: 1.3;
display: inline-flex; /* 中のテキストと画像をフレックス配置にする */
align-items: center; /* 縦方向を完全に中央揃えにする */
flex-wrap: wrap; /* スマホ画面で文字が溢れたら画像が下に回り込む設定 */
word-break: break-all; /* 文字の折り返しを自然にする設定 */
}
#event a{
margin-right: 0.3em;
font-weight: 700;
color: #1a34ec;
transition: color 0.2s;
}
#event a:hover{
color: #ff9100; /* 蘇比の彩度アップ */
}
#event img{
margin-left: 1px;
display: block;
}
.event-more {
padding-top: 1em;
}
.event-more::before {
margin-right: 3px;
content: "≫";
}


/* ----- News ----- */
#news{
font-size: 13px;
}
#news li{
display: flex;
align-items: center;
gap: 10px;
padding: 6px 0 2px 0;
border-bottom: 1px dashed #8c867b; /* 利休鼠 */
}
#news time{
display: flex;
flex-direction: column;
align-items: flex-start;
width: 45px;
flex-shrink: 0; /* 画面が狭くなっても潰れない設定 */
}
#news .year{
margin-left: 1px;
font-size: 11px;
color: #8c867b; /* 利休鼠 */
}
#news .month-day {
font-size: 17px;
font-weight: 700;
position:relative;
margin-top: -7px;
}
#news .label{
display: inline-block;
width: 70px;
padding: 3px 0;
flex-shrink: 0; /* 画面が狭くなっても潰れない設定 */
text-align:center;
font-weight: 700;
color: #f3f3f2; /* 白練 */
background-color: #43a047; /* お知らせ */
border-radius: 3px;
}
#news .info-seasonal{
background-color: #e91e63; /* 開花・紅葉情報 */
}
#news .info-new{
background-color: #007bff; /* 新規 */
}
#news .info-update{
background-color: #4c6c83; /* 更新 */
}
#news p {
flex-grow: 1; /* 残りの幅をすべて引き受ける */
min-width: 0; /* 文字溢れ・折り返しを正常に機能させる */
margin: 0; /* デフォルトの余白をリセット */
font-size: 17px;
display: inline-flex; /* 中のテキストと画像をフレックス配置にする */
align-items: center; /* 縦方向を完全に中央揃えにする */
flex-wrap: wrap; /* スマホ画面で文字が溢れたら画像が下に回り込む設定 */
word-break: break-all; /* 追加：文字の折り返しを自然にする設定 */
}
#news a{
margin-right: 0.3em;
font-weight: 700;
color: #1a34ec;
transition: color 0.2s;
}
#news a:hover{
color: #ff9100; /* 蘇比の彩度アップ */
}
#news img{
margin-left: 1px;
display: block;
}





@media (max-width: 640px) {
  /* 縦並び */
/* ----- Event ----- */
/*
#event li{
flex-wrap: wrap;
gap: 1px 5px;
}
#event p{
width: 100%;
}


#event .label{
width: 20px;
padding: 1px 0 0 0;
font-size: 11px;
line-height: 1.2;
}
*/






  #event .label {
    writing-mode: vertical-rl;
    text-orientation: upright;
    display: flex;              /* ← 縦書きの中央寄せに必須 */
    justify-content: center;    /* ← 縦方向の中央寄せ */
    align-items: center;        /* ← 横方向の中央寄せ */
    width: auto;                /* ← PC の 75px を無効化 */
    height: 4.1ch;              /* ← 4行分の高さを確保 */
    padding: 0 3px 0 0;           /* ← 縦書き用に調整 */
    font-size: 11px;
    line-height: 1.2;
    flex-shrink: 0;
  }







/* ----- News ----- */
#news li {
flex-wrap: wrap;
gap: 1px 5px;
}
#news p {
width: 100%;
}
#news .label{
width: 60px;
padding: 1px 0 0 0;
font-size: 12px;
}
#news p {
margin-top: -8px;
}
#news a{
font-size: 15px;
}
#news .month-day {
font-size: 15px;
margin-top: -10px;
}
}



/* -------------------- ★ Sidebar ★ -------------------- */
.sidebar{
background-color: transparent;
}
/* ------ menu-list ------ */
.side-menu{
padding: 30px 2% 0 2%;
}
.menu-list h2{
margin: 0 0 6px 0;
width: 100%;
height: auto;
aspect-ratio: 768 / 120;
background-size: contain;
background-repeat: no-repeat;
border-radius: 8px;
 /* 文字隠しの処理（これで文字は画面から隠れます） */
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
#sightseeing-menu a{
background-image: url(/img/washi-sightseeing.webp);
}
#play-menu a{
background-image: url(/img/washi-play.webp);
}
#eat-menu a{
background-image: url(/img/washi-eat.webp);
}
#shopping-menu a{
background-image: url(/img/washi-shopping.webp);
}
#shizuoka-onsen-menu a{
background-image: url(/img/washi-onsen.webp);
}
#life-menu a{
background-image: url(/img/washi-life.webp);
}
#sightseeing-menu a:hover, #play-menu a:hover, #eat-menu a:hover, #shopping-menu a:hover, #shizuoka-onsen-menu a:hover, #life-menu a:hover{
background-image: url(/img/washi-red.webp); /* 深緋 */
}



/* -------------------- ★ Tips ★ -------------------- */
.tips h2{
margin: 0 0 6px 0;
width: 100%;
height: auto;
aspect-ratio: 960 / 150;
background-size: contain;
background-repeat: no-repeat;
border-radius: 8px;
 /* 文字隠しの処理（これで文字は画面から隠れます） */
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
.tips h3::before{
margin-right: 5px;
content: "Q:";
color: #0074ab;
}
.answer::before{
margin-right: 5px;
font-size: 125%;
font-weight: 700;
content: "A:";
color: #f83929;
}
.tips p img {
display: inline;
margin: 0;
width: auto;
height: auto;
aspect-ratio: auto;
}
/* -------------------- ★★★★★ 768 ★★★★★ -------------------- */
@media (min-width: 768px) {
/* -------------------- ★ Seasonal Feature ★ -------------------- */
/* -------------------- ★ Sidebar ★ -------------------- */
/* ------ menu-list ------ */
.side-menu{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr)); /* 重要 */
gap: 12px;
margin: 0;
box-sizing: border-box;
}
.menu-list{
min-width: 0; /* 重要：子要素が列を押し広げるのを防ぐ */
box-sizing: border-box;
}
}
/* -------------------- ★★★★★ 1024 ★★★★★ -------------------- */
@media (min-width: 1024px) {
/* -------------------- ★ Seasonal Feature ★ -------------------- */
.seasonal-feature{
margin-top: 40px;
}
/* ------ search-box ------ */
.search-box{
margin: -20px 60px 60px 60px;
}
/* -------------------- ★ Sidebar ★ -------------------- */
.sidebar{
margin-top: 40px;
}
/* ------ banner1 ------ */
.side-banner1{
height: 676px;
}
/* ------ menu-list ------ */
.side-menu{
display: block;
padding: 7px 0 1px 0;
background: color-mix(in srgb, hsl(var(--base-color)) 7%, #ffffff); /* ベースカラー 7％ */
}
.menu-list:nth-child(2){
margin-top: 40px;
}
/* -------------------- ★ Event ★ -------------------- */
#event{
padding: 15px 25px 25px 25px;
box-shadow:
inset 4px 4px 5px rgba(0, 0, 0, 0.15),      /* 内側：深い影 */
inset 1px 1px 2px rgba(0, 0, 0, 0.25),       /* 内側：エッジの影 */
1px 1px 4px hsl(198, 60%, 90%),             /* 外側：背景の薄青に溶け込む影*/
-1px -1px 4px hsl(198, 100%, 99%);           /* 外側：背景よりごくわずかに明るい光 */
}
/* -------------------- ★ News ★ -------------------- */
#news{
padding: 15px 25px 25px 25px;
box-shadow:
inset 4px 4px 5px rgba(0, 0, 0, 0.15),      /* 内側：深い影 */
inset 1px 1px 2px rgba(0, 0, 0, 0.25),       /* 内側：エッジの影 */
1px 1px 4px hsl(198, 60%, 90%),             /* 外側：背景の薄青に溶け込む影*/
-1px -1px 4px hsl(198, 100%, 99%);           /* 外側：背景よりごくわずかに明るい光 */
}
}
/* -------------------- ★★★★★ 1200 ★★★★★ -------------------- */
@media (min-width: 1200px) {
/* -------------------- ★ Seasonal Feature ★ -------------------- */
/* -------------------- ★ Footer ★ -------------------- */
}