@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{
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: #c20024; /* 深緋 */
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(/img/seigaiha-furusato-nozei.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{
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, .n2 a:hover, .n3 a:hover, .n4 a:hover, .n5 a:hover, .n6 a:hover, .n7 a:hover, .n8 a:hover, .n9 a:hover{
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{
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{
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{
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{
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{
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{
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{
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{
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{
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-note a:hover{
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: "※";
}
/* -------------------- ★ 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: 1.5em;
font-size: clamp(16px, calc(16px + ((100vw - 360px) * (1 / 420))), 18px);
}
/* ----- タブ切替 ----- */
.tabs{
display:flex;
width:100%;
}
.tab-panels .panel{
display:none;
}
.tab-panels .panel.active{
display:block;
}
.tab-btn{
flex:1;
min-width:0;
margin: 0 1px;
padding: 15px 3px;
cursor:pointer;
font-size: clamp(14px, calc(14px + 3 * ((100vw - 375px) / 825)), 17px);
padding: 15px 1px;
text-align:center;
background:#f3f3f3;
border:0;
box-shadow: 0 0 5px 0px rgba(0,0,0,0.6);
border-radius: 8px 8px 0 0;
}
.tab-btn.active{
background-color: hsl(348 100% 38%); /* 深緋 */
background: linear-gradient(to bottom, hsl(348 100% 43%), hsl(348 100% 33%));
color: #fff;
}
/* ----- 地図検索 ----- */
.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{
width: 100%;
height: auto;
}
.imagemap-grid a:hover{
background-color: rgba(255,255,255,0.3);
}
.area-link {
position: absolute;
display: block;
text-indent: -9999px; /* テキストを隠す */
}
.area-link:active {
background-color: rgba(255,255,255,0.3);
}
/* ----- 市町 ----- */
.shizuoka{
inset: 0; /* 親に合わせる */
pointer-events: auto;
clip-path: polygon(
    13.5833% 0.9091%,
    21.7500% 1.0000%,
    21.9167% 9.4545%,
    34.7500% 9.3636%,
    34.8333% 26.5455%,
    44.8333% 26.5455%,
    44.8333% 35.0000%,
    55.7500% 35.0000%,
    55.7500% 42.8182%,
    44.9167% 42.8182%,
    44.8333% 47.1818%,
    41.6667% 47.0909%,
    41.6667% 50.5%,
    44.9167% 50.5%,
    44.8333% 60.3636%,
    34.7500% 59.8182%,
    34.7500% 64.2727%,
    22.6667% 64.8182%,
    22.5833% 47.7273%,
    13.6667% 47.3636%,
    13.6667% 1.1818%,
    13.7500% 1.1818%,
    13.7500% 1.1818%,
    13.7500% 1.1818%,
    13.7500% 1.0000%,
    13.6667% 0.8182%,
    30.2500% 41.0000%
  );
}
.yaizu{
left: 22.6667%;
top: 65.0909%;
width: 6.1667%;
height: 13.6364%;
}
.fujieda{
left: 13.6667%;
top: 47.95%;
width: 8.35%;
height: 25.7%;
}
.shimada{
left: 0.6%;
top: 47.95%;
width: 12.55%;
height: 25.7%;
}
.yoshida{
left: 15.8%;
top: 74.4545%;
width: 6.0833%;
height: 8.8182%;
}
.makinohara{
left: 6.8333%;
top: 74.4%;
width: 8.5%;
height: 16.6364%;
}
.omaezaki{
inset: 0;
pointer-events: auto;
clip-path: polygon(
    0.5833% 92.0000%,
    0.5833% 99.1818%,
    18.5000% 99.2727%,
    18.3333% 96.6364%,
    15.0833% 96.6364%,
    15.1667% 92.0000%,
    0.6667% 92.0000%,
    0.6667% 91.7273%
);
}
.kawane{
left: 0.6%;
top: 0.75%;
width: 12.55%;
height: 46.2727%;
}
.fuji{
left: 45.6%;
top: 17.8%;
width: 21.2%;
height: 16.5%;
}
.fujinomiya{
left: 45.6%;
top: 0.78%;
width: 21.2%;
height: 16.5%;
}
.numazu{
inset: 0;
pointer-events: auto;
clip-path: polygon(
    67.4167% 26.6364%,
    67.5000% 34.2727%,
    73.4167% 34.3636%,
    73.4167% 44.0000%,
    67.4167% 43.8182%,
    67.5000% 51.1818%,
    74.9167% 51.1818%,
    74.8333% 26.4545%,
    67.5000% 26.4545%,
    67.5000% 26.2727%
  );
}
.shimizu{
left: 75.6667%;
top: 35.0909%;
width: 5.8333%;
height: 7.7273%;
}
.nagaizumi{
left: 75.5833%;
top: 26.4545%;
width: 5.8333%;
height: 8.0000%;
}
.susono{
left: 67.41%;
top: 18.0000%;
width: 23.92%;
height: 7.55%;
}
.gotemba{
left: 67.41%;
top: 9.3636%;
width: 23.92%;
height: 7.55%;
}
.oyama{
left: 67.41%;
top: 0.78%;
width: 23.92%;
height: 7.7273%;
}
.mishima{
left: 82.2%;
top: 26.4545%;
width: 9.1%;
height: 7.5455%;
}
.kannami{
left: 82.2%;
top: 34.8%;
width: 9.1%;
height: 7.9%;
}
.izunokuni{
left: 75.6667%;
top: 43.6364%;
width: 15.5833%;
height: 7.6364%;
}
.izu{
left: 64.9%;
top: 52.1818%;
width: 26.4%;
height: 16.1818%;
}
.nishiizu{
left: 63.5%;
top: 69.2727%;
width: 14.8%;
height: 8.25%;
}
.matsuzaki{
left: 63.5%;
top: 78.2%;
width: 14.8%;
height: 8.25%;
}
.atami{
left: 92.0833%;
top: 34.8%;
width: 6.1667%;
height: 16.5%;
}
.ito{
left: 92.0000%;
top: 52.1818%;
width: 7.3333%;
height: 16.1818%;
}
.higashiizu{
left: 89.3%;
top: 69.2727%;
width: 7.68%;
height: 12.6%;
}
.kawazu{
left: 78.9%;
top: 69.2727%;
width: 9.7%;
height: 12.6%;
}
.shimoda{
inset: 0;
pointer-events: auto;
clip-path: polygon(
    78.9000% 82.9091%,
    78.9000% 95.9091%,
    81.5000% 95.7273%,
    81.5000% 92.9091%,
    86.5833% 92.7273%,
    86.6667% 94.1818%,
    88.5833% 94.1818%,
    88.5833% 82.7273%,
    78.9167% 82.7273%,
    85.0000% 88.0000%
  );
}
.minamiizu{
inset: 0;
pointer-events: auto;
clip-path: polygon(
    64.8333% 87.4545%,
    64.8333% 96.0000%,
    71.6667% 96.1818%,
    71.6667% 99.4545%,
    78.1667% 99.3636%,
    78.1667% 87.2727%,
    64.8333% 87.4545%,
    69.5000% 91.7273%
  );
}
/* -------------------- ★ Furusato-nozei tips ★ -------------------- */
.furusato-nozei-tips{
margin: 60px 0;
font-size: clamp(16px, calc(16px + ((100vw - 360px) * (1 / 420))), 18px);
}
.furusato-nozei-tips h2 img{
width: 100%;
height:auto;
aspect-ratio: 960 / 150;
border-radius: 8px;
}
.furusato-nozei-tips p{
margin: 1.5em 1.5em 0 1.5em;
}
.furusato-nozei-tips p img{
display: block;
margin: 0 auto;
width: 97%;
height: auto;
aspect-ratio: 800 / 600;
}
/* -------------------- ★ 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: #c20024; /* 深緋 */
font-weight: bold;
}
/* ------ 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(348 100% 38%); /* 深緋 */
background: linear-gradient(to bottom, hsl(348 100% 43%), hsl(348 100% 33%));
}
#searchBtn:hover{
background: linear-gradient(to bottom, hsl(348 100% 33%), hsl(348 100% 23%));
}
/* -------------------- ★ Link ★ -------------------- */
.link{
padding: 20px 0x;
text-align: center;
background: hsl(348 100% 38% / 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{
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(348 100% 38%); /* 深緋 */
background: linear-gradient(to bottom, hsl(348 100% 43%), hsl(348 100% 33%));
}
.page-top a:hover{
letter-spacing: 0.5px;
color: #f3f3f2; /* 白練 */
background: linear-gradient(to bottom, hsl(348 100% 33%), hsl(348 100% 23%));
}
/* -------------------- ★ Footer ★ -------------------- */
footer{
width: 100%;
margin: 0;
padding-bottom: 20vw;
background-image: url(/img/seigaiha-furusato-nozei.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{
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 ★ -------------------- */
/* ------ 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: 2em 1.5em;
}
/* -------------------- ★ Furusato-nozei tips ★ -------------------- */
.furusato-nozei-tips{
margin: 90px 0;
}
.furusato-nozei-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;
}
/* ------ 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;
}
}