@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: #00a5bf; /* 浅葱 */
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(/shizuoka-access/img/seigaiha-shizuoka-access.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 ★ -------------------- */
/* タブを上に留める */
.shizuoka-access-tabs{
display: flex;
position: sticky;
top: 0;
background: #fff;
z-index: 10;
}
.shizuoka-access-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);
line-height: 1.2;
}
.shizuoka-access-tabs a span{
margin: 0 0.1em;
font-size: 0.75em;
}
.shizuoka-access-tabs a:not(:last-child){
margin-right: 3px; /* 最後以外のリンクに右余白をつける */
}
.shizuoka-access-tabs a:first-of-type:hover, .shizuoka-access-tabs a:first-of-type.active{
color: #ea930a; /* 琥珀 */
font-weight: 700;
border-color: #ea930a; /* 琥珀 */
}
.shizuoka-access-tabs a:nth-of-type(2):hover, .shizuoka-access-tabs a:nth-of-type(2).active{
color: #318baf; /* 千草 */
font-weight: 700;
border-color: #318baf; /* 千草 */
}
.shizuoka-access-tabs a:nth-of-type(3):hover, .shizuoka-access-tabs a:nth-of-type(3).active{
color: #3eb370; /* 青/緑 */
font-weight: 700;
border-color: #3eb370; /* 青/緑 */
}
.shizuoka-access-tabs a:last-of-type:hover, .shizuoka-access-tabs a:last-of-type.active{
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;
}
#shizuoka-transit, #shizuoka-travel-options{
margin-bottom: 15px;
}
#shizuoka-travel-options{
margin-top: 15px;
}
/* ----- 地図検索 ----- */
.imagemap{
width: 100%;
margin-top: 10px;
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;
}
.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{
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;
}
/* ----- 日本地図 ----- */
.hokkaido {top: 2.6%;left: 83.9%;width: 14.27%;height: 17.7%;}
.aomori {top: 21.3%;left: 84.1%;width: 14%;height: 7.6%;}
.iwate {top: 29.5%;left: 91.4%;width: 6.8%;height: 7.6%;}
.miyagi {top: 37.7%;left: 91.4%;width: 6.9%;height: 7.7%;}
.akita {top: 29.5%;left: 84.1%;width: 6.9%;height: 7.6%;}
.yamagata {top: 37.7%;left: 84%;width: 6.9%;height: 7.7%;}
.fukushima {top: 46%;left: 84%;width: 14.2%;height: 7.6%;}
.ibaraki {top: 62.4%;left: 91.4%;width: 6.9%;height: 7.6%;}
.tochigi {top: 54.2%;left: 91.4%;width: 6.9%;height: 7.6%;}
.gunma {top: 54.2%;left: 84%;width: 6.9%;height: 7.6%;}
.saitama {top: 62.4%;left: 84%;width: 6.9%;height: 7.6%;}
.chiba {top: 70.5%;left: 91.4%;width: 6.9%;height: 15.9%;}
.tokyo {top: 70.5%;left: 84%;width: 6.9%;height: 7.6%;}
.kanagawa {top: 78.8%;left: 84%;width: 6.9%;height: 7.6%;}
.niigata {top: 46%;left: 76.8%;width: 6.9%;height: 7.6%;}
.toyama {top: 46%;left: 69.5%;width: 6.9%;height: 7.6%;}
.ishikawa {top: 46%;left: 62.2%;width: 6.9%;height: 7.6%;}
.fukui {top: 54.2%;left: 62.2%;width: 6.9%;height: 7.6%;}
.yamanashi {top: 70.5%;left: 76.8%;width: 6.9%;height: 7.6%;}
.nagano {top: 54.2%;left: 76.8%;width: 6.9%;height: 15.9%;}
.gifu {top: 54.2%;left: 69.5%;width: 6.9%;height: 15.9%;}
.shizuoka {top: 78.8%;left: 76.8%;width: 6.9%;height: 7.6%;}
.aichi {top: 70.5%;left: 69.5%;width: 6.9%;height: 7.6%;}
.mie {top: 70.5%;left: 62.2%;width: 6.9%;height: 7.6%;}
.shiga {top: 62.2%;left: 62.2%;width: 6.9%;height: 7.6%;}
.kyoto {top: 62.2%;left: 54.9%;width: 6.9%;height: 7.6%;}
.osaka {top: 70.5%;left: 47.6%;width: 6.9%;height: 7.6%;}
.hyogo {top: 62.2%;left: 47.6%;width: 6.9%;height: 7.6%;}
.nara {top: 70.5%;left: 54.9%;width: 6.9%;height: 7.6%;}
.wakayama {top: 78.8%;left: 47.6%;width: 14.2%;height: 7.6%;}
.tottori {top: 62.2%;left: 40.3%;width: 6.9%;height: 7.6%;}
.shimane {top: 62.2%;left: 33.1%;width: 6.9%;height: 7.6%;}
.okayama {top: 70.5%;left: 40.3%;width: 6.9%;height: 7.6%;}
.hiroshima {top: 70.5%;left: 33.1%;width: 6.9%;height: 7.6%;}
.yamaguchi {top: 62.2%;left: 25.7%;width: 6.9%;height: 15.9%;}
.tokushima {top: 89.8%;left: 35.6%;width: 6.9%;height: 7.6%;}
.kagawa {top: 81.6%;left: 35.6%;width: 6.9%;height: 7.6%;}
.ehime {top: 81.6%;left: 28.4%;width: 6.9%;height: 7.6%;}
.kochi {top: 89.8%;left: 28.4%;width: 6.9%;height: 7.6%;}
.fukuoka {top: 62.2%;left: 9%;width: 6.9%;height: 7.6%;}
.saga {top: 62.2%;left: 1.8%;width: 6.9%;height: 7.6%;}
.nagasaki {top: 70.5%;left: 1.8%;width: 6.9%;height: 7.6%;}
.kumamoto {top: 70.5%;left: 9%;width: 6.9%;height: 7.6%;}
.oita {top: 62.2%;left: 16.4%;width: 6.9%;height: 7.6%;}
.miyazaki {top: 70.5%;left: 16.4%;width: 6.9%;height: 15.9%;}
.kagoshima {top: 78.7%;left: 1.8%;width: 14.2%;height: 7.6%;}
.okinawa {top: 89.8%;left: 1.8%;width: 6.9%;height: 7.6%;}
/* ----- ルート案内地図 ----- */
.shizuoka-city {top: 45.063%; left: 23.750%; width: 12.5%; height: 12.5%; border-radius: 50%;}
.yaizu {top: 60.188%; left: 11.688%; width: 12.5%; height: 12.5%; border-radius: 50%;}
.shimada {top: 67.500%; left: 0.313%; width: 12.5%; height: 12.5%; border-radius: 50%;}
.omaezaki {top: 86.438%; left: 0.875%; width: 12.5%; height: 12.5%; border-radius: 50%;}
.kawane {top: 36.625%; left: 0.250%; width: 12.5%; height: 12.5%; border-radius: 50%;}
.fuji {top: 27.188%; left: 50.000%; width: 12.5%; height: 12.5%; border-radius: 50%;}
.fujinomiya {top: 16.063%; left: 43.125%; width: 12.5%; height: 12.5%; border-radius: 50%;}
.gotemba {top: 10.375%; left: 71.313%; width: 12.5%; height: 12.5%; border-radius: 50%;}
.mishima {top: 32.000%; left: 69.938%; width: 12.5%; height: 12.5%; border-radius: 50%;}
.shuzenji {top: 51.125%; left: 70.000%; width: 12.5%; height: 12.5%; border-radius: 50%;}
.nishiizu {top: 68.125%; left: 60.563%; width: 12.5%; height: 12.5%; border-radius: 50%;}
.atami {top: 37.000%; left: 83.500%; width: 12.5%; height: 12.5%; border-radius: 50%;}
.ito {top: 53.625%; left: 86.000%; width: 12.5%; height: 12.5%; border-radius: 50%;}
.atagawa {top: 67.313%; left: 79.875%; width: 12.5%; height: 12.5%; border-radius: 50%;}
.shimoda {top: 79.688%; left: 72.313%; width: 12.5%; height: 12.5%; border-radius: 50%;}
/* ----- 鉄道地図 ----- */
.tokaido-shinkansen {top: 51.33%; left: 8.67%; width: 14.92%; height: 2.42%;}
.tokaido-line {top: 35.92%; left: 11.58%; width: 15.08%; height: 2.5%;}
.minobu-line {top: 11.42%; left: 50.58%; width: 10.42%; height: 2.58%;}
.gotemba-line {top: 11.58%; left: 66.08%; width: 12.83%; height: 2.33%;}
.ito-line {top: 56.08%; left: 78.83%; width: 10.33%; height: 2.58%;}
.chuo-line {top: 1%; left: 65.92%; width: 13.08%; height: 2.58%;}
.odakyu-line {top: 7.75%; left: 80.42%; width: 12.75%; height: 2.83%;}
.izu-kyuko {top: 66.25%; left: 83%; width: 12.42%; height: 3.17%;}
.izuhakone-railway {top: 65.42%; left: 44.67%; width: 19.25%; height: 3.17%;}
.gakunan-railway {top: 26.25%; left: 51.92%; width: 12.42%; height: 3.25%;}
.shizuoka-railway {top: 26.33%; left: 27.42%; width: 12.67%; height: 3.25%;}
.oigawa-railway {top: 13.67%; left: 12.58%; width: 15.75%; height: 3.25%;}
.ikawa-line {top: 2.17%; left: 20.58%; width: 21.25%; height: 5.58%;}
.tokyo-station {top: 39.17%; left: 94.58%; width: 4.92%; height: 14.42%;}
.odawara-station {top: 39.17%; left: 82.25%; width: 4.75%; height: 14.42%;}
.atami-station {top: 39.25%; left: 74.92%; width: 4.67%; height: 14.42%;}
.mishima-station {top: 39.17%; left: 64.83%; width: 4.67%; height: 14.42%;}
.shinfuji-station {top: 46.75%; left: 47.33%; width: 4.5%; height: 6.83%;}
.shizuoka-station {top: 39.08%; left: 27.25%; width: 4.75%; height: 14.42%;}
.kakegawa-station {top: 39.08%; left: 0.42%; width: 4.67%; height: 14.67%;}
.kozu-station {top: 39.08%; left: 87.33%; width: 4.58%; height: 7.42%;}
.matsuda-station {top: 14.75%; left: 82.33%; width: 4.67%; height: 7.25%;}
.ashigara-station {top: 14.92%; left: 69.5%; width: 4.58%; height: 7.25%;}
.gotemba-station {top: 24.33%; left: 64.83%; width: 4.58%; height: 7.58%;}
.numazu-station {top: 39.25%; left: 59.33%; width: 4.5%; height: 7.42%;}
.yoshiwara-station {top: 39.42%; left: 52.92%; width: 4.33%; height: 7.08%;}
.fuji-station {top: 39.25%; left: 46.75%; width: 4.33%; height: 7.08%;}
.shimizu-station {top: 39.17%; left: 39.75%; width: 4.42%; height: 7.25%;}
.kusanagi-station { top: 39.08%; left: 32.92%; width: 4.58%; height: 7.58%; }
.yaizu-station {top: 39.17%; left: 19.92%; width: 4.58%; height: 7.25%;}
.fujieda-station {top: 39.08%; left: 14.75%; width: 4.58%; height: 7.33%;}
.kanaya-station {top: 39.33%; left: 7.17%; width: 4.58%; height: 7.17%;}
.ito-station {top: 61.58%; left: 75%; width: 4.42%; height: 7.17%;}
.fujinomiya-station {top: 26.5%; left: 46.67%; width: 4.58%; height: 7.08%;}
.kofu-station {top: 1.83%; left: 46.67%; width: 4.5%; height: 7.17%;}
.shinjuku-station {top: 1.67%; left: 94.83%; width: 4.58%; height: 14.42%;}
.izu-kogen-station {top: 73.58%; left: 80.42%; width: 9.75%; height: 2.42%;}
.izu-atagawa-station {top: 78.42%; left: 78.17%; width: 9.67%; height: 2.42%;}
.izu-inatori-station {top: 83%; left: 75.75%; width: 9.83%; height: 2.17%;}
.kawazu-station {top: 86%; left: 72.17%; width: 5.08%; height: 2.42%;}
.izukyu-shimoda-station {top: 90.17%; left: 65.5%; width: 4.58%; height: 7.5%;}
.izu-nagaoka-station {top: 57.58%; left: 56.08%; width: 9.58%; height: 2.17%;}
.shuzenji-station {top: 63.25%; left: 64.67%; width: 4.83%; height: 7.5%;}
.gakunan-enoo-station {top: 30.5%; left: 55.92%; width: 4.58%; height: 7.67%;}
.shin-shizuoka-station {top: 30.5%; left: 27.33%; width: 4.67%; height: 7.67%;}
.shin-shimizu-station {top: 51.92%; left: 39.67%; width: 4.67%; height: 7.67%;}
.ieyama-station {top: 27.33%; left: 11.17%; width: 4.67%; height: 2.42%;}
.shiogo-station {top: 22.75%; left: 11%; width: 4.83%; height: 2.42%;}
.senzu-station {top: 10.33%; left: 7.17%; width: 4.75%; height: 7.5%;}
.okuoikojyo-station {top: 9.33%; left: 12.58%; width: 12.17%; height: 2.5%;}
.ikawa-station {top: 1.5%; left: 15%; width: 4.83%; height: 7.5%;}
.shin-matsuda-station {top: 22.25%; left: 76%; width: 7.42%; height: 2.42%;}
/* ----- 路線バス地図 ----- */
.daitetsu-adv {top: 19.5%; left: 1.25%; width: 21.67%; height: 8.8%;}
.shizutetsu-bus {top: 53.6%; left: 14.5%; width: 34.25%; height: 9.4%;}
.fujikyu-shizuoka {top: 16.9%; left: 48.83%; width: 13.33%; height: 9.7%;}
.fujikyu-mobility {top: 3.17%; left: 67.92%; width: 15.67%; height: 9.4%;}
.fujikyu-city {top: 26.1%; left: 67.25%; width: 25%; height: 4.7%;}
.izuhakone-bus {top: 39%; left: 73.17%; width: 19.42%; height: 4.8%;}
.tokai-bus {top: 63.5%; left: 70%; width: 13.42%; height: 4.8%;}
/* ----- 鋼索交通地図 ----- */
.nihondaira-ropeway {top: 41.6%; left: 3.5%; width: 27.75%; height: 3.9%;}
.jukkokutoge-cablecar {top: 3.9%; left: 63%; width: 27.92%; height: 4.3%;}
.atami-ropeway {top: 22.4%; left: 67.58%; width: 28.17%; height: 3.8%;}
.izu-panoramapark {top: 27.7%; left: 32.58%; width: 28.58%; height: 4.1%;}
.komuroyama {top: 40.2%; left: 59.42%; width: 24.83%; height: 3.9%;}
.omuroyama {top: 46.6%; left: 56.83%; width: 24.83%; height: 3.9%;}
.shimoda-ropeway {top: 78.8%; left: 57.25%; width: 24.83%; height: 3.9%;}
/* ----- フェリー・遊覧船地図 ----- */
.surugawan-ferry {top: 37.6%; left: 4.5%; width: 21.83%; height: 4%;}
.hatsushima-resortline {top: 16.7%; left: 71.58%; width: 28.17%; height: 4.2%;}
.tokaikisen {top: 37.2%; left: 82.75%; width: 12.58%; height: 3.8%;}
.tokaikisen2 {top: 90.8%; left: 56%; width: 12.83%; height: 3.9%;}
.shimizu-cruise {top: 16.8%; left: 0.58%; width: 22% ; height: 4%;}
.tagonoura-cruise {top: 4.4%; left: 15.33%; width: 18.92%; height: 4%;}
.numazu-cruise {top: 9.7%; left: 35%; width: 15.83%; height: 3.8%;}
.mitohama-cruise {top: 21.8%; left: 44.42%; width: 15.75%; height: 3.8%;}
.shizuura-cruise {top: 27.6%; left: 22.42%; width: 21.58%; height: 3.7%;}
.dogashima-marine {top: 61%; left: 6.5%; width: 18.83%; height: 3.8%;}
.atami-cruise {top: 10.4%; left: 66%; width: 16.17%; height: 4.3%;}
.ito-cruise {top: 33.6%; left: 54.75%; width: 15.83%; height: 4.2%;}
.inatori-cruise {top: 68.7%; left: 57.67%; width: 25.33%; height: 3.9%;}
.shimoda-cruise {top: 81.2%; left: 53.58%; width: 21.42%; height: 3.8%;}
.irozaki-cruise {top: 94.9%; left: 28.75%; width: 21.25%; height: 3.7%;}
.ganyudo-ferryboat {top: 15.7%; left: 42.67%; width: 18.42%; height: 3.7%;}
/* ----- 航空拠点地図 ----- */
.shizuoka-airport {top: 79.3%; left: 1.25%; width: 22.17%; height: 3.8%;}
.shizuhama-airbase {top: 72.2%; left: 23.83%; width: 12.67%; height: 4.0%;}
.miho-airfield {top: 54.2%; left: 32.58%; width: 15.58%; height: 3.8%;}
.fujikawa-glider {top: 41.1%; left: 37.33%; width: 18.83%; height: 3.9%;}
.sumatakyo-heliport {top: 31.0%; left: 9.42%; width: 16.42%; height: 2.9%;}
.fujieda-pa-heliport {top: 61.2%; left: 18.5%; width: 17.17%; height: 2.5%;}
.shizuoka-pa-heliport {top: 54.8%; left: 2.33%; width: 17.25%; height: 2.5%;}
.shizuoka-heliport {top: 47.4%; left: 13.75%; width: 14.17%; height: 2.7%;}
.shimizu-pa-heliport {top: 35.8%; left: 21.92%; width: 17.17%; height: 2.6%;}
.asagiri-plateau-heliport {top: 2.3%; left: 44.67%; width: 18.42%; height: 2.6%;}
.fuji-speedway-heliport {top: 6.6%; left: 73.08%; width: 18.25%; height: 5.6%;}
.gotemba-outlets-heliport {top: 15.2%; left: 74.83%; width: 22.67%; height: 5.8%;}
.ashinoko-heliport {top: 26.4%; left: 76.67%; width: 17.0%; height: 2.6%;}
.suruga-numazu-sa-heliport {top: 35.7%; left: 65.17%; width: 23.5%; height: 2.7%;}
.shuzenji-heliport {top: 52.5%; left: 70.67%; width: 16.5%; height: 2.6%;}
.toi-heliport {top: 60.2%; left: 63.08%; width: 14.17%; height: 2.6%;}
.nishi-izu-heliport {top: 75.5%; left: 60.67%; width: 16.33%; height: 2.4%;}
.hatsushima-heliport {top: 45.5%; left: 74.33%; width: 14.58%; height: 2.7%;}
.kawana-hotel-heliport {top: 57.0%; left: 89.5%; width: 10.5%; height: 5.7%;}
.shirata-heliport {top: 73.4%; left: 83.58%; width: 14.17%; height: 2.5%;}
.shimoda-prince-heliport {top: 85.2%; left: 76.92%; width: 22.75%; height: 2.5%;}
.shimoda-rendezvous {top: 89.0%; left: 75.58%; width: 24.17%; height: 2.3%;}
/* ----- アクセスルート詳細 ----- */
.route{
display: none;
scroll-margin-top: calc(8.333vw + 38.75px);
}
.route:target{
display: block;
}
.route h2{
margin-bottom: 5px;
font-size: clamp(23px, calc(5.208vw + 4.25px), 36px);
}
.route h2 span{
font-size: 66.666%;
}
.route h2::before{
font-family: 'icomoon';
content: "\e913";
margin-right: 0.4em;
}
.shizuoka-route{
margin-bottom: 30px;
padding: 10px;
text-align: left;
background: linear-gradient(to top, rgba(0, 153, 114, 0.1) 0%, rgba(0, 153, 114, 1) 100%);
border-radius: 10px;
box-shadow: 0px 1px 3px 0px;
}
.airplane{
background: linear-gradient(to top, rgba(220, 0, 18, 0.1) 0%, rgba(220, 0, 18, 1) 100%);
}
.airplane-shinkansen{
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 100%), linear-gradient(135deg, #dc0012 50%, #007ac9 50%);
}
.airplane-bus{
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 100%), linear-gradient(135deg, #dc0012 50%, #f36c21 50%);
}
.shinkansen{
background: linear-gradient(to top, rgba(0, 122, 201, 0.1) 0%, rgba(0, 122, 201, 1) 100%);	
}
.shinkansen-bus{
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 100%), linear-gradient(135deg, #007ac9 50%, #f36c21 50%);
}
.railway{
background: linear-gradient(to top, rgba(110, 110, 110, 0.1) 0%, rgba(110, 110, 110, 1) 100%);	
}
.railway-airplane{
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 100%), linear-gradient(135deg, #6e6e6e 50%, #dc0012 50%);
}
.railway-shinkansen{
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 100%), linear-gradient(135deg, #6e6e6e 50%, #007ac9 50%);
}
.railway-bus{
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 100%), linear-gradient(135deg, #6e6e6e 50%, #f36c21 50%);
}
.bus{
background: linear-gradient(to top, rgba(243, 108, 33, 0.1) 0%, rgba(243, 108, 33, 1) 100%);
}
.bus-airplane{
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 100%), linear-gradient(135deg, #f36c21 50%, #dc0012 50%);
}
.bus-shinkansen{
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 100%), linear-gradient(135deg, #f36c21 50%, #007ac9 50%);
}
.bus-railway{
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 100%), linear-gradient(135deg, #f36c21 50%, #6e6e6e 50%);
}
.ferry-shinkansen{
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 100%), linear-gradient(135deg, #314ea2 50%, #007ac9 50%);
}
.ferry-bus{
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 100%), linear-gradient(135deg, #314ea2 50%, #f36c21 50%);
}
.ferry-car{
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 100%), linear-gradient(135deg, #314ea2 50%, #009972 50%);
}
.shizuoka-route h3{
font-size: clamp(18px, calc(2.2059vw + 10.059px), 28px);
color: #f1f7fa;
}
.shizuoka-route h3 span{
font-size: 66.666%;
}
.shizuoka-route p:nth-of-type(1){
margin: 0;
padding: 5px 10px 4px 10px;
font-size: clamp(18px, calc(1.9608vw + 10.941px), 26px);
color: yellow;
border-radius: 6px;
background : #222;
}
.route p{
margin: 8px 12px 0 12px;
font-size: 16px;
}
.main-column h4{
font-size: 18px;
}
/* ----- 静岡県の交通機関 ----- */
.transit h2{
margin-bottom: 5px;
font-size: clamp(23px, calc(5.208vw + 4.25px), 36px);
}
.transit h2 span{
font-size: 66.666%;
}
/* ------ notice ------ */
.notice{
margin: 1.5em 1px;
font-size: clamp(16px, calc(16px + ((100vw - 360px) * (1 / 420))), 18px);
}
/* ------ point ------ */
.point{
position: relative;
margin: 70px 0;
padding: 72px 18px 20px 18px;
width: 100%;
background: #00a5bf;
border-radius: 10px;
box-shadow: 0px 1px 3px 0px;
box-sizing: border-box;
}
.point-catch{
position: absolute;
top: -65px; /* 枠から上に飛び出す */
left: 25px; /* 枠の左から少し外へ */
width: 200px;
height: auto;
}
.point p{
position: relative;
margin: 18px 0 0 0;
padding: 4px 20px 2px 20px;
font-size: 18px;
letter-spacing: 1px;
border-radius: 6px;
background: #fff;
box-shadow: 0px 0px 5px #222, 0px 0px 2px #f1c114;
}
/* -------------------- ★ shizuoka-access tips ★ -------------------- */
.shizuoka-access-tips{
margin: 60px 0;
font-size: clamp(16px, calc(16px + ((100vw - 360px) * (1 / 420))), 18px);
}
.shizuoka-access-tips h2 img{
width: 100%;
height:auto;
aspect-ratio: 960 / 150;
border-radius: 8px;
}
.shizuoka-access-tips p{
margin: 1.5em 1.2em 0 1.2em;
}
/* -------------------- ★ 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: #00a5bf; /* 浅葱 */
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(188 100% 37%); /* 浅葱 */
background: linear-gradient(to bottom, hsl(188 100% 42%), hsl(188 100% 32%));
}
#searchBtn:hover{
background: linear-gradient(to bottom, hsl(188 100% 32%), hsl(188 100% 22%));
}
/* -------------------- ★ Link ★ -------------------- */
.link{
padding: 20px 0x;
text-align: center;
background: hsl(188 100% 37% / 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(188 100% 37%); /* 浅葱 */
background: linear-gradient(to bottom, hsl(188 100% 42%), hsl(188 100% 32%));
}
.page-top a:hover, .page-top a:active{
letter-spacing: 0.5px;
color: #f3f3f2; /* 白練 */
background: linear-gradient(to bottom, hsl(188 100% 32%), hsl(188 100% 22%));
}
/* -------------------- ★ Footer ★ -------------------- */
footer{
width: 100%;
margin: 0;
padding-bottom: 20vw;
background-image: url(/shizuoka-access/img/seigaiha-shizuoka-access.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;
}
/* -------------------- ★★★★★ 640 ★★★★★ -------------------- */
@media screen and (max-width: 640px) {
.point-catch{
left: 50%;
transform: translateX(-50%);
width: 180px;
}
.point p{
margin: 10px 0 0 0;
font-size: 16px;
}
.point p:first-of-type{
margin-top: 3px;
}
}
/* -------------------- ★★★★★ 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;
}
/* ----- ルート詳細 ----- */
.route{
scroll-margin-top: 124px;
}
/* ------ notice ------ */
.notice{
margin: 2em 5px;
}
/* -------------------- ★ shizuoka-access tips ★ -------------------- */
.shizuoka-access-tips{
margin: 90px 0;
}
.shizuoka-access-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;
}
}