@charset "utf-8";
/* ------ Settings ------ */
:root {
--base-color: 188 100% 37%; /* 浅葱 */
--base-pale-color: 188 100% 42%;
--base-light-color: 188 100% 32%;
--base-dark-color: 188 100% 22%;
--seigaiha: url(/img/seigaiha-shizuoka-access.webp); /* shizuoka-access */
}
/* -------------------- ★ Link Tabs ★ -------------------- */
.link-tabs a:first-of-type:hover, .link-tabs a:first-of-type.active{
color: #ea930a; /* 琥珀 */
font-weight: 700;
border-color: #ea930a; /* 琥珀 */
}
.link-tabs a:nth-of-type(2):hover, .link-tabs a:nth-of-type(2).active{
color: #318baf; /* 千草 */
font-weight: 700;
border-color: #318baf; /* 千草 */
}
.link-tabs a:nth-of-type(3):hover, .link-tabs a:nth-of-type(3).active{
color: #3eb370; /* 青/緑 */
font-weight: 700;
border-color: #3eb370; /* 青/緑 */
}
.link-tabs a:last-of-type:hover, .link-tabs a:last-of-type.active{
color: #7065a3; /* 菫 */
font-weight: 700;
border-color: #7065a3; /* 菫 */
}
/* -------------------- ★ Main ★ -------------------- */
#shizuoka-transit, #shizuoka-travel-options{
margin-bottom: 15px;
}
#shizuoka-travel-options{
margin-top: 15px;
}
/* ------ notice ------ */
.notice{
margin: 1.5em 1px;
}
/* ----- 地図検索 ----- */
.imagemap{
width: 100%;
margin-top: 10px;
box-shadow: 0 0 5px 0 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%;
}
/* ------ 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;
}
/* -------------------- ★ Tips ★ -------------------- */
.tips p img {
display: inline;
margin: 0;
width: auto;
height: auto;
aspect-ratio: auto;
}
/* -------------------- ★★★★★ 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 ★★★★★ -------------------- */
/* -------------------- ★★★★★ 1024 ★★★★★ -------------------- */
@media (min-width: 1024px) {
/* -------------------- ★ Main ★ -------------------- */
/* ----- ルート詳細 ----- */
.route{
scroll-margin-top: 124px;
}
/* ------ notice ------ */
.notice{
margin: 2em 5px;
}
}
/* -------------------- ★★★★★ 1200 ★★★★★ -------------------- */