@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: #ff9100; /* 蘇比の彩度アップ */
}
h1,h2,h3,h4,h5{
font-weight: 700;
}
strong, 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;
color: #f3f3f2; /* 白練 */
font-size: calc(11px + ((1vw - 3.6px) * 0.98));
background-image: var(--seigaiha);
}
.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;
}
/* ------ main-header（拡大スクロール） ------ */
#main-header{
overflow: hidden; /* 拡大してもはみ出さないように */
}
#main-header img{
width: 100%;
height: auto;
transform: scale(1);
opacity: 1;
transition: transform 0.1s ease-out, opacity 0.1s ease-out;
will-change: transform, opacity;
}
/* ------ backBtn（＜ボタン） ------ */
#backBtn{
position: fixed;
top: 24px;
left: -4px;
z-index: 50;
cursor: pointer;
text-decoration: none;
}
#backBtn .icon{
font-family: "icomoon";
font-size: 45px;
color: #f3f3f2; /* 白練 */
line-height: 1;
text-shadow: 0 1px 1px rgb(140, 134, 132); /* 利休鼠 */
transition: color 0.3s ease; /* なめらかに変化 */
}
#backBtn:hover .icon{
color: hsl(347 100% 82%); /* 唐紅 */
}
#backBtn .icon:active{
color: #ea0032; /* 唐紅 */
}
/* -------------------- ★ 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: #ff9100; /* 蘇比の彩度アップ */
}
.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: "※";
}
/* -------------------- ★ 検索Btn ★ -------------------- */
#searchBtn{
background-color: hsl(198 100% 32%); /* 藍 */
background: linear-gradient(to bottom, hsl(198 100% 37%), hsl(198 100% 27%));
}
#searchBtn:hover{
background: linear-gradient(to bottom, hsl(198 100% 27%), hsl(198 100% 17%));
}
/* -------------------- ★ Link ★ -------------------- */
.link{
padding: 20px 0;
text-align: center;
background: hsl(var(--base-color) / 7%); /* ベースカラー 7％ */
}
.link a{
padding: 0 4px 0 8px;
font-size: 12px;
color: #000a02; /* 墨 */
text-decoration: none;
border-left: solid 1px #e3e1eb;
}
.link a:first-child{
padding-left: 0;
border-left: none;
}
.link a:hover{
color: #ff9100; /* 蘇比の彩度アップ */
text-decoration: underline;
}
/* -------------------- ★ Page Top ★ -------------------- */
.page-top{
font-family: "Verdana";
font-weight: 900;
}
.page-top a{
display: block;
padding: 0.3em 0 0.45em 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(var(--base-color)); /* べースカラー */
background: linear-gradient(to bottom,  hsl(var(--base-pale-color)),  hsl(var(--base-light-color)));
}
.page-top a:hover{
letter-spacing: 0.5px;
color: #f3f3f2; /* 白練 */
background: linear-gradient(to bottom,  hsl(var(--base-light-color)),  hsl(var(--base-dark-color)));
}
/* -------------------- ★ Footer ★ -------------------- */
footer{
width: 100%;
margin: 0;
padding-bottom: 20vw;
background-image: var(--seigaiha);
color: #f3f3f2; /* 白練 */
text-align: center;
}
footer .row{
position: relative;
}
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-left::before, .nav-item .icon-right::before{ /* ★★★ 必ず追記すること！★★★ ----- */
font-family: 'icomoon';
font-size: calc(8vw);
display: block;
margin: -0.1em auto -0.3em auto; /* アイコンの上と下文字との空間 */
}
.nav-item .icon-left::before{
content: "\ea44";
}
.nav-item .icon-right::before{
content: "\ea42";
}
/*
.nav-item .icon-shop::before{
content: "\e932";
}
.nav-item .icon-jr::before{
content: "\e90e";
}
.nav-item .icon-shinkansen::before{
content: "\e909";
}
.nav-item .icon-railway::before{
content: "\e90a";
}
.nav-item .icon-bus::before{
content: "\e903";
}
.nav-item .icon-ropeway::before{
content: "\e906";
}
.nav-item .icon-car::before{
content: "\908";
}
.nav-item .icon-ship::before{
content: "\e905";
}
.nav-item .icon-airplane::before{
content: "\e9af";
}
.nav-item .icon-fujisan::before{
content: "\e933";
}
.nav-item .icon-torii::before{
content: "\e902";
}
.nav-item .icon-tulip::before{
content: "\e91c";
}
.nav-item .icon-web::before{
content: "\e92e";
}
*/
.nav-item:hover span{
color: #ff9100; /* 蘇比の彩度アップ */
}
/* 中央ロゴ */
.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;
}
/* ------ backBtn（＜ボタン） ------ */
#backBtn{
position: fixed;
top: 40px;
left: 5px;
}
#backBtn .icon{
font-size: 60px;
}
/* -------------------- ★ Breadcrumb ★ -------------------- */
.breadcrumb-list, .breadcrumb-note{
font-size: 13px;
}
.home-label{
display:inline;
}
}
/* -------------------- ★★★★★ 1024 ★★★★★ -------------------- */
@media (min-width: 1024px) {
/* -------------------- ★ Link ★ -------------------- */
.link{
padding: 5px 0;
}
.link a{
font-size: 13px;
}
/* -------------------- ★ Footer ★ -------------------- */
footer{
padding-bottom: 20px;
}
/* ----- bottom-nav ----- */
.bottom-nav{
position: static;
bottom: 0;
background-color: transparent;
border-top: none;
box-shadow: none;
}
.nav-item{
font-size: 18px;
}
.nav-item span{
color: #f3f3f2; /* 白練 */
}
.nav-item .icon-left::before, .nav-item .icon-right::before{ /* ★★★ 必ず追記すること！★★★ ----- */
font-size: 82px;
}
/* 中央ロゴ */
.nav-item.middle{
top: 5px;
}
.nav-item.middle img{
width: 143px;
height: 143px;
}
}
/* -------------------- ★★★★★ 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;
}
/* -------------------- ★ Breadcrumb ★ -------------------- */
.breadcrumb-list, .breadcrumb-note{
margin: 10px 0.5px;
}
/* -------------------- ★ Footer ★ -------------------- */
footer h2{
font-size: 60px;
letter-spacing: 2px;
}
footer .official-operator{
font-size: 22px;
letter-spacing: 2px;
}
}