@charset 'UTF-8';
/* ========================================================================
/*
/* Foundation
/*
========================================================================= */
/* Bootstrap Customize
--------------------------------------------------------- */
h1 {
float: none;
margin: 0;
padding: 0;
}
h2 {
margin: 0;
padding: 0;
}
h3 {
margin: 0;
padding: 0;
}
h4,
h5,
h6,
.h4,
.h5,
.h6 {
margin-top: 0;
margin-bottom: 0;
}
img {
border: 0;
vertical-align: top;
}
p {
margin: 0;
}
ol,
ul {
margin: 0;
padding: 0;
list-style: none;
}
dl {
margin: 0;
padding: 0;
line-height: 1.9;
}
dt {
font-weight: normal;
line-height: 1.9;
}
dd {
line-height: 1.9;
}
address {
margin-bottom: auto;
}
@media (min-width: 1400px) {
.d-xxl-block {
display: block !important;
}
.d-xxl-none {
display: none !important;
}
}
@media screen and (min-width: 1200px) {
.container {
max-width: 1260px;
}
}
[class*=col-]:not(:last-child) {
margin-bottom: 2em;
}
@media print, screen and (min-width: 768px) {
[class*=col-]:not(:last-child) {
margin-bottom: 0;
}
}
.modal {
z-index: 9999;
}
@media print {
.modal {
display: none !important;
}
}
@media print, screen and (min-width: 768px) {
.modal-body img {
max-height: 700px;
}
}
.thumb {
position: relative;
width: auto;
height: 300px;
border: solid 1px #e5e5e5;
background: #f8f8f8;
}
.thumb img {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: auto;
max-width: 100%;
max-height: 100%;
margin: auto;
}
.thumb a {
display: block;
width: 100%;
height: 100%;
outline: none;
cursor: pointer;
}
.thumb a:is(:hover, :active, :focus) img {
opacity: .7;
transition: .3s;
}
@media only screen and (max-width: 767.98px) {
.form-inline select {
display: inline-block;
width: auto;
padding-right: 2px;
padding-left: 2px;
}
}
input[type=file].form-control {
height: 0;
}
@media only screen and (max-width: 575.98px) {
.form-check-inline {
display: block;
}
}
@media print, screen and (min-width: 576px) {
.form-check-inline:not(:last-of-type) {
margin-right: 1.4em;
}
}
.form-control {
height: auto;
border-radius: 3px;
}
@media only screen and (max-width: 767.98px) {
.form-control {
font-size: 1rem;
}
}
@media print, screen and (min-width: 768px) {
.form-control {
font-size: clamp(.938rem, .158vw + .862rem, 1rem);
}
}
.form-control::placeholder {
color: #b3b3b3;
font-weight: 350;
}
@media only screen and (max-width: 767.98px) {
.form-control::placeholder {
font-size: .875rem;
}
}
@media print, screen and (min-width: 768px) {
.form-control::placeholder {
font-size: clamp(.875rem, .158vw + .799rem, .938rem);
}
}
/* Base
--------------------------------------------------------- */
:root {
--color-main: #2a3f79;
--color-main-hover: #4060b6;
--color-sub: #1b191e;
--color-txt: #000;
--color-base: #e9eaee;
--color-base2: #c1cbe7;
--color-base3: #d9e0f4;
--color-red: #ce1717;
--color-white: #fff;
--color-black: #000;
--color-link-hover: #5e84ea;
--font-family-primary: 'Noto Sans JP', sans-serif;
--font-family-secondary: 'Libre Baskerville', serif;
--font-family-tertiary: 'Cabin', sans-serif;
--font-family-awesome: 'Font Awesome 6 Free';
--header-height-mobile: clamp(45px, 6.7vw, 60px);
--header-height-desktop: clamp(90px, 6.7vw, 120px);
--google-translate-height: 56px;
--icon-external: url('data:image/svg+xml;utf-8,');
--icon-book: url('data:image/svg+xml;utf-8,');
--icon-book2: url('data:image/svg+xml;utf-8,');
}
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
color: var(--color-txt);
letter-spacing: .1em;
font-weight: 400;
font-family: var(--font-family-primary);
line-height: 2;
font-optical-sizing: auto;
}
a {
color: var(--color-main);
text-decoration: none;
transition: color .3s;
text-underline-offset: .5em;
}
a:is(:hover, :active, :focus) {
color: var(--color-link-hover);
text-decoration: none;
}
a:has([data-action=call]) {
color: inherit;
text-decoration: none;
}
em,
strong {
font-weight: bold;
font-style: normal;
}
button,
input[type=submit],
input[type=button] {
padding: 0;
border: 0;
}
img {
-webkit-backface-visibility: hidden;
}
/* ========================================================================
/*
/* Layout
/*
========================================================================= */
/* 全体
--------------------------------------------------------- */
.l-page-wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
}
@media screen and (max-width: 1199.98px) {
.l-page-wrapper {
padding-top: var(--header-height-mobile);
}
}
@media screen and (min-width: 1200px) {
.l-page-wrapper {
padding-top: var(--header-height-desktop);
}
}
@media print {
.l-page-wrapper {
padding-top: 0;
}
}
/* ヘッダー
--------------------------------------------------------- */
.l-header {
position: fixed;
top: 0;
z-index: 100;
width: 100%;
background-color: var(--color-base);
}
@media screen and (max-width: 1199.98px) {
.l-header {
display: flex;
height: var(--header-height-mobile);
padding-left: 1.5vw;
align-items: center;
}
}
@media screen and (min-width: 1200px) {
.l-header {
display: grid;
height: var(--header-height-desktop);
padding-top: clamp(15px, 1.1vw, 20px);
padding-right: clamp(15px, 1.8vw, 40px);
padding-bottom: clamp(15px, 1.1vw, 20px);
padding-left: clamp(15px, 2vw, 46px);
column-gap: 4%;
grid-template: 'logo util'/auto 1fr;
align-items: center;
}
}
@media print {
.l-header {
position: static;
}
}
.is-google-translated .l-header {
top: var(--google-translate-height);
}
.l-header__logo {
font-size: 0;
grid-area: logo;
}
.l-header__logo a {
color: var(--color-txt);
text-decoration: none;
}
.l-header__logo img {
width: auto;
}
@media screen and (max-width: 1199.98px) {
.l-header__logo img {
height: clamp(28px, 4vw, 34px);
}
}
@media screen and (min-width: 1200px) {
.l-header__logo img {
height: clamp(30px, 2.7vw, 55px);
}
}
.l-header__util {
grid-area: util;
}
@media screen and (min-width: 1200px) {
.l-header__util {
align-self: stretch;
}
}
@media screen and (min-width: 1200px) {
.l-header__block {
display: grid;
height: 100%;
column-gap: clamp(18px, 1.3vw, 24px);
grid-template: 'nav lang'/1fr auto;
align-items: center;
}
}
.l-header__nav {
grid-area: nav;
}
@media screen and (min-width: 1200px) {
.l-header__nav {
height: 100%;
}
}
.l-header__lang {
grid-area: lang;
}
@media screen and (max-width: 1199.98px) {
.l-header__lang {
margin-top: 40px;
margin-right: 10px;
margin-left: 10px;
}
}
@media screen and (min-width: 1200px) {
.l-header__lang {
position: relative;
width: clamp(90px, 6.1vw, 100px);
height: 100%;
}
}
@media screen and (min-width: 1200px) {
.l-header__lang .c-lang-switch {
position: absolute;
top: 28%;
right: 0;
left: 0;
}
}
/* コンテンツ
--------------------------------------------------------- */
.l-contents {
flex: 1 0 auto;
overflow: hidden;
padding-bottom: clamp(70px, 10.1vw, 160px);
}
.l-contents.--no-space-bottom {
padding-bottom: 0;
}
/* フッター
--------------------------------------------------------- */
.l-footer {
padding-top: clamp(50px, 7.5vw, 120px);
padding-bottom: clamp(50px, 6.6vw, 100px);
background-color: var(--color-base);
color: var(--color-main);
font-weight: 500;
font-size: clamp(.938rem, .064vw + .923rem, 1rem);
}
@media print, screen and (min-width: 768px) {
.l-footer {
letter-spacing: 0;
line-height: 1.5;
font-feature-settings: 'palt';
}
}
@media print {
.l-footer {
page-break-inside: avoid;
}
}
.l-footer__inner {
max-width: min(92vw, 1230px);
margin-right: auto;
margin-left: auto;
}
@media print, screen and (min-width: 768px) {
.l-footer__inner {
display: grid;
column-gap: 4%;
grid-template-columns: 1fr auto;
grid-template-areas: 'info util';
}
}
.l-footer__info {
grid-area: info;
}
.l-footer__logo {
margin-bottom: 1.5em;
}
.l-footer__logo img {
width: clamp(250px, 27.9vw, 385px);
height: auto;
}
.l-footer__name {
font-size: clamp(1.125rem, .128vw + 1.096rem, 1.25rem);
}
.l-footer__address .map-icon {
position: relative;
top: -.1em;
margin-left: .05em;
}
.l-footer__address .map-icon svg {
width: auto;
height: 1.2em;
}
.l-footer__address .map-icon svg .st0 {
transition: fill .3s;
fill: var(--color-main);
}
@media print, screen and (min-width: 768px) {
.l-footer__address .map-icon:hover svg .st0 {
fill: var(--color-main-hover);
}
}
.l-footer__eu {
margin-top: 1.6em;
}
.l-footer__eu a {
display: inline-block;
padding: .4em 1.2em .5em;
background-color: var(--color-main);
color: #fff;
letter-spacing: .07em;
font-size: clamp(.938rem, .064vw + .923rem, 1rem);
line-height: 1.5;
transition: background-color .3s, color .3s;
}
.l-footer__eu a::before {
position: relative;
top: -.1em;
margin-right: .5em;
color: inherit;
content: '\f054';
font-weight: 900;
font-size: 70%;
font-family: 'Font Awesome 6 Free';
line-height: 1;
}
.l-footer__eu a:is(:hover, :active, :focus) {
background-color: var(--color-main-hover);
}
.l-footer__util {
grid-area: util;
}
@media only screen and (max-width: 767.98px) {
.l-footer__nav {
margin-top: 50px;
}
}
.l-footer__lang {
position: relative;
min-height: 30px;
margin-top: clamp(22px, 2.2vw, 28px);
}
.l-footer__lang .c-lang-switch {
position: absolute;
top: 0;
left: 0;
}
.l-footer__copyright {
margin-top: clamp(50px, 5.6vw, 77px);
background-color: var(--color-base);
letter-spacing: 0;
font-weight: 500;
font-size: .75rem;
}
@media only screen and (max-width: 767.98px) {
.l-footer__copyright {
padding-right: 4vw;
padding-left: 4vw;
}
}
@media print, screen and (min-width: 768px) {
.l-footer__copyright {
text-align: center;
}
}
/* ========================================================================
/*
/* Component
/*
========================================================================= */
/* ドロワー
--------------------------------------------------------- */
.drawer__btn {
position: absolute;
top: 0;
right: 0;
z-index: 1000;
width: clamp(45px, 7.8vw, 60px);
width: var(--header-height-mobile);
height: var(--header-height-mobile);
outline: none !important;
background: var(--color-main);
transition: background-color .5s;
-webkit-user-select: none;
user-select: none;
}
@media screen and (min-width: 1200px) {
.drawer__btn {
display: none;
}
}
.is-drawer-open .drawer__btn {
background-color: #fff;
}
.drawer__btn-line {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 10;
display: block;
width: clamp(24px, 4vw, 30px);
height: 1px;
margin: auto;
background: #fff;
transition: .5s cubic-bezier(.645, .045, .355, 1);
pointer-events: none;
}
.is-drawer-open .drawer__btn-line {
background-color: #5f5f5f;
}
.drawer__btn-line:nth-child(1) {
transform: translateY(-6px);
}
.is-drawer-open .drawer__btn-line:nth-child(1) {
transform: rotate(45deg);
}
.is-drawer-open .drawer__btn-line:nth-child(2) {
opacity: 0;
}
.drawer__btn-line:nth-child(3) {
transform: translateY(6px);
}
.is-drawer-open .drawer__btn-line:nth-child(3) {
transform: rotate(-45deg);
}
@media screen and (max-width: 1199.98px) {
.drawer__bg {
position: fixed;
top: 0;
left: 100%;
z-index: 500;
overflow-x: hidden;
width: min(80vw, 450px);
height: 100vh;
background-color: #fff;
transition: transform .5s cubic-bezier(.645, .045, .355, 1);
pointer-events: none;
}
}
@media screen and (min-width: 1200px) {
.drawer__bg {
height: 100%;
}
}
@media screen and (max-width: 1199.98px) {
.drawer__bg::-webkit-scrollbar {
display: none;
}
}
@media screen and (max-width: 1199.98px) {
.is-drawer-open .drawer__bg {
overflow-y: auto;
transform: translateX(-100%);
pointer-events: auto;
-ms-overflow-style: none;
scrollbar-width: none;
}
}
@media screen and (max-width: 1199.98px) {
.drawer__inner {
visibility: hidden;
padding: 90px 4vw 140px;
opacity: 0;
transition: opacity .5s cubic-bezier(.645, .045, .355, 1) .25s, visibility .5s cubic-bezier(.645, .045, .355, 1) .25s, transform .5s cubic-bezier(.645, .045, .355, 1) .25s;
transform: translateX(30px);
}
}
@media screen and (min-width: 1200px) {
.drawer__inner {
height: 100%;
}
}
@media screen and (max-width: 1199.98px) {
.is-drawer-open .drawer__inner {
visibility: visible;
opacity: 1;
transform: none;
}
}
@media screen and (max-width: 1199.98px) {
.is-google-translated .drawer__inner {
padding-top: calc(90px + var(--google-translate-height));
}
}
@media screen and (max-width: 1199.98px) {
.drawer__overlay {
position: fixed;
top: 0;
left: 0;
z-index: 400;
visibility: hidden;
width: 100%;
height: 100vh;
opacity: 0;
transition: .5s cubic-bezier(.645, .045, .355, 1);
pointer-events: none;
-webkit-backdrop-filter: blur(1px);
backdrop-filter: blur(1px);
}
}
@media screen and (max-width: 1199.98px) {
.is-drawer-open .drawer__overlay {
visibility: visible;
background: rgba(0, 0, 0, .3);
opacity: 1;
pointer-events: auto;
}
}
/* グローバルナビ
--------------------------------------------------------- */
@media screen and (min-width: 1200px) {
.c-global-nav__items {
display: flex;
height: 100%;
justify-content: flex-end;
}
}
@media screen and (max-width: 1199.98px) {
.c-global-nav__item + .c-global-nav__item {
margin-top: 10px;
}
}
@media screen and (min-width: 1200px) {
.c-global-nav__item + .c-global-nav__item a {
border-left: 1px solid var(--color-main);
}
}
@media screen and (min-width: 1200px) {
.c-global-nav__item:last-of-type a {
border-right: 1px solid var(--color-main);
}
}
@media screen and (min-width: 1200px) {
.c-global-nav__item.--only-sp {
display: none;
}
}
.c-global-nav__item > a {
position: relative;
display: block;
color: var(--color-main);
text-decoration: none;
letter-spacing: .05em;
transition: background-color .3s, color .3s;
}
@media screen and (max-width: 1199.98px) {
.c-global-nav__item > a {
padding: .7em 1em;
text-align: left;
}
}
@media screen and (min-width: 1200px) {
.c-global-nav__item > a {
display: flex;
flex-direction: column;
height: 100%;
padding: .4em 1.45em;
text-align: center;
justify-content: center;
}
}
@media screen and (max-width: 1199.98px) {
.c-global-nav__item > a::before {
left: clamp(3px, .4vw, 4px);
height: clamp(13px, 1.9vw, 16px);
aspect-ratio: 1/2;
-webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
clip-path: polygon(0 0, 100% 50%, 0 100%);
}
}
@media screen and (min-width: 1200px) {
.c-global-nav__item > a::before {
top: clamp(2px, .2vw, 3px);
width: clamp(12px, .8vw, 13px);
aspect-ratio: 2/1;
-webkit-clip-path: polygon(0 0, 100% 0, 50% 100%);
clip-path: polygon(0 0, 100% 0, 50% 100%);
}
}
@media screen and (max-width: 1199.98px) {
.c-global-nav__item > a::after {
left: 0;
width: clamp(4px, .6vw, 5px);
}
}
@media screen and (min-width: 1200px) {
.c-global-nav__item > a::after {
top: 0;
height: clamp(3px, .2vw, 4px);
}
}
.is-google-translated .c-global-nav__item > a {
white-space: nowrap;
}
@media screen and (min-width: 1200px) {
.is-google-translated .c-global-nav__item > a {
padding-right: .8em;
padding-left: .8em;
}
}
.c-global-nav__item > a .txt-en {
display: block;
font-weight: 700;
font-family: var(--font-family-tertiary);
line-height: 1.4;
}
@media screen and (max-width: 1199.98px) {
.c-global-nav__item > a .txt-en {
font-size: clamp(1.688rem, .357vw + 1.607rem, 1.875rem);
}
}
@media screen and (min-width: 1200px) {
.c-global-nav__item > a .txt-en {
font-size: clamp(1.125rem, .833vw + .5rem, 1.5rem);
}
}
.c-global-nav__item > a .txt-jp {
display: block;
letter-spacing: .04em;
font-weight: 600;
line-height: 1.5;
}
@media screen and (max-width: 1199.98px) {
.c-global-nav__item > a .txt-jp {
font-size: clamp(.875rem, .119vw + .848rem, .938rem);
}
}
@media screen and (min-width: 1200px) {
.c-global-nav__item > a .txt-jp {
font-size: clamp(.75rem, .278vw + .542rem, .875rem);
}
}
@media screen and (min-width: 1200px) {
.c-global-nav__item > a:hover,
.c-global-nav__item > a:focus {
background-color: #d5d8e3;
}
}
.c-global-nav__item.is-current > a {
background-color: #d5d8e3;
}
/* フッターナビ
--------------------------------------------------------- */
.c-footer-nav {
display: flex;
gap: clamp(20px, 3.9vw, 68px);
}
@media print, screen and (min-width: 768px) {
.c-footer-nav {
justify-content: flex-end;
}
}
@media print, screen and (min-width: 768px) {
.c-footer-nav__items {
justify-content: flex-end;
}
}
.c-footer-nav__item {
position: relative;
line-height: 1.6;
}
@media only screen and (max-width: 767.98px) {
.c-footer-nav__item {
font-size: .9375rem;
}
}
@media print, screen and (min-width: 768px) {
.c-footer-nav__item {
letter-spacing: 0;
font-size: clamp(1rem, .174vw + .917rem, 1.125rem);
}
}
.c-footer-nav__item + .c-footer-nav__item {
margin-top: clamp(15px, 1.6vw, 22px);
}
.c-footer-nav__item a {
color: var(--color-main);
}
/* ライブモデルを楽しもう メニュー
--------------------------------------------------------- */
.c-menu {
padding-top: clamp(50px, 6.1vw, 90px);
padding-bottom: clamp(50px, 6.1vw, 90px);
background-color: var(--color-sub);
color: #fff;
}
.c-menu__items {
width: min(92%, 1230px);
margin-right: auto;
margin-left: auto;
}
@media print, screen and (min-width: 768px) {
.c-menu__items {
display: grid;
column-gap: 4%;
grid-template-columns: repeat(3, 1fr);
}
}
@media only screen and (max-width: 767.98px) {
.c-menu__item + .c-menu__item {
margin-top: 20px;
}
}
.c-menu__item a {
position: relative;
z-index: 1;
display: flex;
background-size: cover;
background-repeat: no-repeat;
color: #a8a8a8;
text-align: center;
font-weight: 500;
transition: color .3s;
justify-content: center;
align-items: center;
}
@media only screen and (max-width: 767.98px) {
.c-menu__item a {
padding: 7vw 4vw;
font-size: clamp(1.25rem, .49vw + 1.14rem, 1.375rem);
}
}
@media print, screen and (min-width: 768px) {
.c-menu__item a {
height: 100%;
padding-top: clamp(50px, 4.5vw, 70px);
padding-right: clamp(15px, 1.3vw, 20px);
padding-bottom: clamp(50px, 4.5vw, 70px);
padding-left: clamp(15px, 1.3vw, 20px);
font-size: clamp(1.125rem, .781vw + .75rem, 1.688rem);
}
}
.c-menu__item a::before {
position: absolute;
z-index: -1;
background-color: #000;
content: '';
opacity: .5;
transition: opacity .3s;
inset: 0;
}
.c-menu__item a:is(:hover, :active, :focus) {
color: #fff;
}
.c-menu__item a:is(:hover, :active, :focus)::before {
opacity: .3;
}
.c-menu__item.--necessary a {
background-image: url('../images/common/bg-menu-necessary.jpg');
background-position: right center;
}
.c-menu__item.--drive a {
background-image: url('../images/common/bg-menu-drive.jpg');
background-position: right 20%;
}
.c-menu__item.--faq a {
background-image: url('../images/common/bg-menu-faq.jpg');
background-position: right 80%;
}
.c-menu__item.is-current a {
box-shadow: 0 0 0 clamp(4px, .6vw, 10px) var(--color-main);
color: #fff;
}
.c-menu__item.is-current a::before {
opacity: .3;
}
/* コンテナ
--------------------------------------------------------- */
.c-container {
max-width: min(92vw, 1230px);
margin-right: auto;
margin-left: auto;
}
/* セクション
--------------------------------------------------------- */
.c-section {
margin-top: clamp(70px, 9.2vw, 140px);
}
.c-section:first-child {
margin-top: 0;
}
/* ページタイトル
--------------------------------------------------------- */
.c-page-header {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
overflow: hidden;
margin-bottom: clamp(50px, 5.7vw, 80px);
padding-bottom: .5em;
background-color: var(--color-main);
text-align: center;
align-items: center;
justify-content: center;
}
@media only screen and (max-width: 767.98px) {
.c-page-header {
height: clamp(100px, 21.3vw, 140px);
}
}
@media print, screen and (min-width: 768px) {
.c-page-header {
height: clamp(180px, 14.1vw, 200px);
}
}
.c-page-header::after {
position: absolute;
top: .3em;
right: 0;
bottom: .3em;
z-index: -1;
background: url('../images/common/bg-page-header.png') center 10%/contain no-repeat;
content: '';
opacity: .6;
aspect-ratio: 1231/946;
mix-blend-mode: soft-light;
}
.c-page-header.--history,
.c-page-header.--live01,
.c-page-header.--live02,
.c-page-header.--live03,
.c-page-header.--company {
margin-bottom: 0;
}
.c-page-header__inner {
padding-top: .3em;
}
.c-page-header__en,
.c-page-header__title {
color: #fff;
}
.c-page-header__en {
position: relative;
padding-right: .5em;
padding-left: .5em;
letter-spacing: .05em;
font-weight: 700;
font-size: clamp(1.625rem, 1.41vw + 1.308rem, 3rem);
font-family: var(--font-family-secondary);
line-height: 1.6;
}
.c-page-header__en::before,
.c-page-header__en::after {
position: absolute;
top: 0;
bottom: 0;
width: .8em;
height: 1px;
margin: auto;
background-color: #fff;
content: '';
}
.c-page-header__en::before {
right: 100%;
}
.c-page-header__en::after {
left: 100%;
}
.c-page-header__title {
font-weight: 500;
font-size: clamp(.938rem, .321vw + .865rem, 1.25rem);
}
/* キャッチコピー
--------------------------------------------------------- */
.c-copy {
margin-bottom: 1.2em;
font-weight: 500;
font-size: clamp(1.063rem, .641vw + .918rem, 1.688rem);
line-height: 1.5;
}
/* リスト
--------------------------------------------------------- */
.c-list > li {
position: relative;
}
.c-list > li::before {
position: absolute;
left: 0;
}
.c-list.--dot > li {
padding-left: 1.2em;
}
.c-list.--dot > li::before {
content: '・';
}
.c-list.--num > li {
margin-left: 1.5em;
list-style-type: decimal;
}
.c-list.--diamond > li {
padding-left: 1.3em;
}
.c-list.--diamond > li::before {
content: '◆';
}
.c-list.--star > li {
padding-left: 1.3em;
}
.c-list.--star > li::before {
content: '☆';
}
.c-list.--book > li {
padding-left: 2.3em;
}
.c-list.--book > li + li {
margin-top: 1.2em;
}
.c-list.--book > li::before {
position: absolute;
top: .4em;
left: 0;
height: 1.2em;
margin: auto;
background-color: var(--color-main);
content: '';
transition: background-color .2s;
-webkit-mask-image: var(--icon-book2);
mask-image: var(--icon-book2);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
aspect-ratio: 34/25;
}
@media print {
.c-list.--book > li::before {
-webkit-print-color-adjust: exact;
}
}
.c-list.--book > li > ol {
margin-top: .5em;
}
.c-list.--book > li > ol > li {
margin-left: 1.8em;
list-style-type: decimal;
}
.c-list.--book > li > ol > li + li {
margin-top: .5em;
}
.c-list.--book > li strong {
color: var(--color-red);
font-weight: 500;
}
.c-list.--book > li em {
font-weight: 500;
}
.c-list.--book > li a {
text-decoration: underline;
}
.c-list.--inline {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(6em, 1fr));
gap: 4%;
}
/* テーブル
--------------------------------------------------------- */
.c-table {
width: 100%;
font-size: clamp(.938rem, .096vw + .916rem, 1rem);
line-height: 1.7;
}
@media only screen and (max-width: 767.98px) {
.c-table {
font-size: 1rem;
}
}
@media print {
.c-table {
page-break-inside: avoid;
}
}
@media only screen and (max-width: 767.98px) {
.c-table tbody th,
.c-table tbody td {
display: block;
width: 100%;
}
}
.c-table th,
.c-table td {
overflow-wrap: break-word;
}
.c-table.--style-a thead {
border-top: 1px solid var(--color-sub);
border-right: 1px solid var(--color-sub);
border-left: 1px solid var(--color-sub);
}
.c-table.--style-a thead th {
padding: 1em .8em;
border-bottom: 1px solid var(--color-sub);
background-color: var(--color-sub);
color: #fff;
text-align: center;
font-weight: 500;
line-height: 1.3;
}
.c-table.--style-a thead th:not(:last-of-type) {
border-right: 1px solid #333;
}
.c-table.--style-a tbody {
border-top: 1px solid #e1e2e3;
border-right: 1px solid #e1e2e3;
border-left: 1px solid #e1e2e3;
}
.c-table.--style-a tbody th {
border-bottom: 1px solid #e1e2e3;
}
@media print, screen and (min-width: 768px) {
.c-table.--style-a tbody th {
border-right: 1px solid #e1e2e3;
}
}
.c-table.--style-a tbody td {
border-right: 1px solid #e1e2e3;
border-bottom: 1px solid #e1e2e3;
}
@media print, screen and (min-width: 768px) {
.c-table.--style-a th,
.c-table.--style-a td {
padding: .8em 1.4em;
}
}
.c-table.--style-a th {
background-color: var(--color-base);
font-weight: 500;
}
@media only screen and (max-width: 767.98px) {
.c-table.--style-a th {
padding: .3em 1.4em;
text-align: center;
}
}
.c-table.--style-a td {
background-color: #fff;
}
@media only screen and (max-width: 767.98px) {
.c-table.--style-a td {
padding: 1em 1.4em;
}
}
@media only screen and (max-width: 767.98px) {
.c-table.--style-a.--lineup tbody th,
.c-table.--style-a.--lineup tbody td {
display: table-cell;
}
}
.c-table.--style-a.--lineup tbody th {
border-right: 1px solid #e1e2e3;
}
@media only screen and (max-width: 767.98px) {
.c-table.--style-a.--lineup tbody th {
width: 30%;
text-align: left;
}
}
@media only screen and (max-width: 767.98px) {
.c-table.--style-b {
border: 1px solid #e1e2e3;
}
}
@media only screen and (max-width: 767.98px) {
.c-table.--style-b tr:not(:last-child) td {
border-bottom: 1px solid #e1e2e3;
}
}
@media print, screen and (min-width: 768px) {
.c-table.--style-b th,
.c-table.--style-b td {
padding: 1.7em .4em;
}
}
.c-table.--style-b th {
font-weight: normal;
font-weight: 500;
}
@media only screen and (max-width: 767.98px) {
.c-table.--style-b th {
padding: .3em 1.4em;
border-bottom: 1px solid #e1e2e3;
background-color: var(--color-base2);
text-align: center;
}
}
@media print, screen and (min-width: 768px) {
.c-table.--style-b th {
border-bottom: 1px solid var(--color-main);
}
}
@media only screen and (max-width: 767.98px) {
.c-table.--style-b td {
padding: 1em 1.4em;
background-color: #fff;
}
}
@media print, screen and (min-width: 768px) {
.c-table.--style-b td {
padding-left: 2em;
border-bottom: 1px solid #cdced2;
}
}
@media print, screen and (min-width: 768px) {
.c-table.--spec tbody th {
width: 25%;
}
}
.c-table.--railway th,
.c-table.--railway td {
text-align: center;
}
@media print, screen and (min-width: 768px) {
.c-table.--railway th,
.c-table.--railway td {
font-size: clamp(.813rem, .174vw + .729rem, .938rem);
}
}
.c-table.--railway tbody td {
letter-spacing: 0;
line-height: 1.5;
}
@media only screen and (max-width: 767.98px) {
.c-table.--railway tbody td {
padding: .4em .5em;
}
}
@media print, screen and (min-width: 768px) {
.c-table.--railway tbody td {
padding: .4em .2em;
}
}
.c-table.--railway tbody td a {
text-decoration: underline;
text-underline-offset: .3em;
}
@media print, screen and (min-width: 768px) {
.c-table.--outline tbody th {
width: 25%;
}
}
/* バッジ
--------------------------------------------------------- */
.c-badge {
display: inline-block;
padding: .2em .6em;
background-color: var(--color-red);
color: #fff;
font-weight: normal;
font-size: .625rem;
line-height: 1.4;
}
.c-heading-basic {
position: relative;
z-index: 1;
margin-bottom: 1.5em;
padding-bottom: .5em;
text-align: center;
font-weight: 600;
line-height: 1.5;
}
@media only screen and (max-width: 767.98px) {
.c-heading-basic {
font-size: clamp(1.188rem, 1.225vw + .912rem, 1.5rem);
}
}
@media print, screen and (min-width: 768px) {
.c-heading-basic {
font-size: clamp(1.5rem, .868vw + 1.083rem, 2.125rem);
}
}
.c-heading-basic::before {
position: absolute;
right: 0;
bottom: 0;
left: 0;
width: clamp(20px, 2.6vw, 40px);
height: 2px;
margin: auto;
background-color: var(--color-main);
content: '';
}
@media only screen and (max-width: 767.98px) {
.c-heading {
margin-bottom: 1.8em;
}
}
@media print, screen and (min-width: 768px) {
.c-heading {
margin-bottom: 3.2em;
}
}
.c-heading + * {
margin-top: 0 !important;
}
.c-heading__en {
position: relative;
left: -.02em;
letter-spacing: .0019555556em;
font-weight: 700;
font-size: clamp(1.875rem, 3.846vw + 1.01rem, 5.625rem);
font-family: var(--font-family-secondary);
}
@media only screen and (max-width: 767.98px) {
.c-heading__en {
line-height: 1.1;
}
}
@media print, screen and (min-width: 768px) {
.c-heading__en {
line-height: 1.03;
}
}
.c-heading__title {
letter-spacing: .0078333333em;
font-weight: 500;
font-size: clamp(.938rem, .577vw + .808rem, 1.5rem);
font-feature-settings: 'palt';
}
@media only screen and (max-width: 767.98px) {
.c-heading__title {
line-height: 1.2;
}
}
@media print, screen and (min-width: 768px) {
.c-heading__title {
line-height: 1;
}
}
.c-heading.--center {
text-align: center;
}
.c-heading-bar {
position: relative;
margin-bottom: 1.1em;
padding-left: 1.7em;
font-weight: 500;
font-size: clamp(1.063rem, .128vw + 1.034rem, 1.188rem);
line-height: 1.5;
}
.c-heading-bar::before {
position: absolute;
top: .3em;
left: 0;
color: var(--color-link-hover);
content: '\f219';
font-weight: 900;
font-size: inherit;
font-family: 'Font Awesome 6 Free';
line-height: 1;
}
.c-heading-bg {
position: relative;
padding: .8em 1.5em;
background-color: var(--color-main);
color: var(--color-white);
font-weight: 600;
font-size: clamp(1rem, .385vw + .913rem, 1.25rem);
line-height: 1.5;
}
@media only screen and (max-width: 767.98px) {
.c-heading-bg {
margin-bottom: 1.8em;
}
}
@media print, screen and (min-width: 768px) {
.c-heading-bg {
margin-bottom: 2.3em;
text-align: center;
}
}
.c-heading-bg::before,
.c-heading-bg::after {
position: absolute;
width: clamp(15px, 1.8vw, 25px);
height: clamp(15px, 1.8vw, 25px);
background-color: #4060b6;
content: '';
}
.c-heading-bg::before {
top: 3px;
left: 3px;
-webkit-clip-path: polygon(0 0, 100% 0, 0 100%);
clip-path: polygon(0 0, 100% 0, 0 100%);
}
.c-heading-bg::after {
right: 3px;
bottom: 3px;
-webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%);
clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.c-heading-bg.--secondary {
background-color: var(--color-sub);
}
.c-heading-border {
margin-bottom: 1.7em;
padding-bottom: .4em;
border-bottom: 2px solid var(--color-main);
font-weight: 500;
font-size: clamp(1.125rem, .385vw + 1.038rem, 1.5rem);
line-height: 1.5;
}
@media print, screen and (min-width: 768px) {
.c-heading-border {
margin-bottom: 2em;
}
}
.c-heading-border strong {
color: var(--color-main-hover);
font-weight: 700;
}
.c-heading-overlap {
border-bottom: 3px solid var(--color-base);
line-height: 0;
}
@media only screen and (max-width: 767.98px) {
.c-heading-overlap {
margin-bottom: 1.8em;
}
}
@media print, screen and (min-width: 768px) {
.c-heading-overlap {
margin-bottom: 2.5em;
}
}
.c-heading-overlap__txt {
display: inline-block;
margin-bottom: .6em;
color: var(--color-txt);
font-weight: 500;
font-size: clamp(1.125rem, .385vw + 1.038rem, 1.5rem);
line-height: 1.2;
}
.c-heading-overlap__txt::after {
position: relative;
top: calc(3px + .6em);
display: block;
border-top: 3px solid var(--color-main);
content: '';
}
.c-heading-overlap__txt :lang(en) {
margin-right: .5em;
letter-spacing: 0;
font-weight: 700;
font-size: clamp(1.875rem, .769vw + 1.702rem, 2.625rem);
}
.c-heading-overlap--static {
position: relative;
padding-bottom: 3px;
border-bottom: 3px solid var(--color-base);
color: var(--color-txt);
font-weight: bold;
font-size: 1.8rem;
line-height: 1.5;
}
.c-heading-overlap--static::after {
position: absolute;
bottom: -3px;
display: block;
width: 20%;
border-bottom: 3px solid var(--color-main);
content: ' ';
}
.c-heading-3Dbox {
position: relative;
display: inline-block;
padding: .5em 1.5em .7em;
background-color: #2a3f79;
color: var(--color-white);
font-weight: 600;
font-size: clamp(1.188rem, .192vw + 1.144rem, 1.375rem);
line-height: 1.5;
}
@media only screen and (max-width: 767.98px) {
.c-heading-3Dbox {
margin-bottom: 1.7em;
}
}
@media print, screen and (min-width: 768px) {
.c-heading-3Dbox {
margin-bottom: 2.5em;
}
}
.c-heading-3Dbox::after {
position: absolute;
top: -20px;
left: 0;
width: 100%;
height: 0;
border: 10px solid transparent;
border-bottom-color: rgb(28.8588957055, 43.2883435583, 83.1411042945);
content: '';
}
/* メインビジュアル
--------------------------------------------------------- */
.c-hero {
position: relative;
z-index: 1;
overflow: hidden;
}
.c-hero::before {
position: absolute;
z-index: 2;
background-color: rgba(27, 25, 30, .23);
content: '';
inset: 0;
}
.c-hero__content {
position: absolute;
right: clamp(15px, 2.4vw, 40px);
z-index: 3;
display: flex;
flex-direction: column;
margin: auto;
text-align: right;
justify-content: center;
}
@media screen and (max-width: 991.98px) {
.c-hero__content {
bottom: 15vw;
}
}
@media print, screen and (min-width: 992px) {
.c-hero__content {
bottom: 12%;
}
}
.c-hero__en {
color: #fff;
letter-spacing: 0;
font-weight: 400;
font-family: var(--font-family-secondary);
line-height: 1.25;
}
@media screen and (max-width: 991.98px) {
.c-hero__en {
font-size: 7vw;
}
}
@media print, screen and (min-width: 768px) {
.c-hero__en {
font-size: clamp(3.75rem, 3.165vw + 2.231rem, 5rem);
}
}
@media screen and (min-width: 1400px) {
.c-hero__en {
font-size: clamp(5rem, 7.692vw - 1.731rem, 7.5rem);
}
}
.c-hero__copy {
margin-top: .5em;
color: #fff;
letter-spacing: 0;
font-weight: 400;
}
@media screen and (max-width: 991.98px) {
.c-hero__copy {
font-size: 4vw;
}
}
@media print, screen and (min-width: 992px) {
.c-hero__copy {
font-size: clamp(1.375rem, 1.509vw + .44rem, 2.25rem);
}
}
.c-hero .slick-slider {
margin-bottom: 0;
}
.c-hero .slick-slide div {
font-size: 0;
}
.c-hero .slick-dots {
bottom: clamp(12px, 2.3vw, 40px);
z-index: 4;
font-size: 0;
}
.c-hero .slick-dots li {
width: clamp(9px, .9vw, 12px);
height: clamp(9px, .9vw, 12px);
margin: 0;
border-radius: 50%;
background-color: #e9eaee;
transition: background-color .3s;
}
.c-hero .slick-dots li:is(:hover, :active, :focus) {
background-color: var(--color-main);
}
.c-hero .slick-dots li.slick-active {
background-color: var(--color-main);
}
.c-hero .slick-dots li + li {
margin-left: clamp(10px, 1.3vw, 20px);
}
.c-hero .slick-dots button {
display: none;
}
.c-hero img {
width: 100%;
font-size: 0;
object-fit: cover;
}
@media only screen and (max-width: 767.98px) {
.c-hero img {
height: 80vw !important;
}
}
@media print, screen and (min-width: 768px) {
.c-hero img {
height: clamp(500px, 58.4vw, 650px);
}
}
@media screen and (min-width: 1200px) {
.c-hero img {
height: calc(100vh - var(--header-height-desktop));
}
}
.c-hero img.img1 {
object-position: 10% top;
}
.c-hero img.img2 {
object-position: left 70%;
}
.c-hero img.img3 {
object-position: left center;
}
.c-hero img.img4 {
object-position: left center;
}
/* ボタン
--------------------------------------------------------- */
.c-btn {
position: relative;
z-index: 1;
display: inline-block;
outline: none !important;
color: inherit;
text-align: center;
text-decoration: none;
font-size: inherit;
line-height: 1.5;
cursor: pointer;
transition: background-color .3s, color .3s;
-webkit-appearance: none;
appearance: none;
}
.c-btn.--primary,
.c-btn.--secondary,
.c-btn.--tertiary {
padding-right: clamp(20px, 3.2vw, 52px);
}
.c-btn.--primary::before,
.c-btn.--primary::after,
.c-btn.--secondary::before,
.c-btn.--secondary::after,
.c-btn.--tertiary::before,
.c-btn.--tertiary::after {
position: absolute;
bottom: clamp(7px, .7vw, 8px);
z-index: 1;
content: '';
}
.c-btn.--primary::before,
.c-btn.--secondary::before,
.c-btn.--tertiary::before {
right: 0;
left: clamp(9px, .9vw, 12px);
height: 1px;
background-color: currentColor;
}
.c-btn.--primary::after,
.c-btn.--secondary::after,
.c-btn.--tertiary::after {
right: -1px;
display: inline-block;
width: 1px;
height: clamp(5px, .7vw, 10px);
border-color: currentColor;
border-right-width: 2px;
border-right-style: solid;
transform: skewX(60deg);
transform-origin: left bottom;
}
.c-btn.--primary span,
.c-btn.--secondary span,
.c-btn.--tertiary span {
position: relative;
z-index: -1;
display: inline-block;
border: 1px solid var(--color-main);
font-weight: 500;
transition: transform .3s ease;
}
@media only screen and (max-width: 767.98px) {
.c-btn.--primary span,
.c-btn.--secondary span,
.c-btn.--tertiary span {
padding: .8em 1.7em;
font-size: 1rem;
}
}
@media print, screen and (min-width: 768px) {
.c-btn.--primary span,
.c-btn.--secondary span,
.c-btn.--tertiary span {
padding: .7em 1.1em .9em;
font-size: clamp(1.063rem, .174vw + .979rem, 1.188rem);
}
}
.c-btn.--primary span:lang(en),
.c-btn.--secondary span:lang(en),
.c-btn.--tertiary span:lang(en) {
font-weight: 700;
font-family: var(--font-family-secondary);
}
@media print, screen and (min-width: 768px) {
.c-btn.--primary span:lang(en),
.c-btn.--secondary span:lang(en),
.c-btn.--tertiary span:lang(en) {
padding-bottom: .7em;
letter-spacing: 0;
font-size: clamp(1.125rem, .174vw + 1.042rem, 1.25rem);
}
}
.c-btn.--primary:hover span,
.c-btn.--secondary:hover span,
.c-btn.--tertiary:hover span {
transform: translateX(clamp(20px, 3.2vw, 52px));
}
.c-btn.--primary {
color: #fff;
}
.c-btn.--primary span {
background-color: var(--color-main);
}
.c-btn.--secondary {
color: var(--color-main);
}
.c-btn.--secondary span {
background-color: transparent;
}
.c-btn.--tertiary {
color: #fff;
}
.c-btn.--tertiary span {
border-color: #fff;
background-color: transparent;
}
.c-btn.--back {
background-color: #aaa;
}
.c-btn.--back:hover {
background-color: #858585;
}
/* ページトップ
--------------------------------------------------------- */
.c-pagetop {
position: fixed;
z-index: 50;
font-size: 0;
opacity: 0;
cursor: pointer;
transition: transform .3s;
transition: opacity .5s;
}
@media only screen and (max-width: 767.98px) {
.c-pagetop {
right: 10px;
bottom: 10px;
}
}
@media print, screen and (min-width: 768px) {
.c-pagetop {
right: 20px;
bottom: 20px;
}
}
@media print {
.c-pagetop {
display: none;
}
}
.c-pagetop.is-show {
opacity: 1;
}
@media only screen and (max-width: 767.98px) {
.c-pagetop img {
width: 44px;
}
}
@media print, screen and (min-width: 768px) {
.c-pagetop img {
width: clamp(44px, 4.1vw, 50px);
}
}
/* 言語切替ドロップダウン
--------------------------------------------------------- */
.c-lang-switch {
position: relative;
display: inline-block;
overflow: hidden;
border: 1px solid var(--color-main);
border-radius: 9999px;
background-color: #fff;
}
.c-lang-switch.is-open {
border-radius: clamp(9px, .9vw, 12px);
}
.c-lang-switch__btn {
display: flex;
padding-top: 9px;
padding-bottom: 9px;
outline: none !important;
letter-spacing: .06em;
font-weight: 600;
font-family: var(--font-family-tertiary);
line-height: 1.1;
cursor: pointer;
transition: background-color .3s, color .3s;
align-items: center;
justify-content: center;
gap: clamp(9px, 1vw, 13px);
-webkit-user-select: none;
user-select: none;
}
@media screen and (max-width: 1199.98px) {
.c-lang-switch__btn {
font-size: 1rem;
}
}
@media screen and (min-width: 1200px) {
.c-lang-switch__btn {
font-size: clamp(.875rem, .278vw + .667rem, 1rem);
}
}
@media screen and (min-width: 1200px) {
.c-lang-switch:not(.is-open) .c-lang-switch__btn:hover {
background-color: var(--color-main);
color: #fff;
}
}
.c-lang-switch__btn::after {
width: 9px;
background-color: currentColor;
content: '';
transform-origin: center center;
aspect-ratio: 9/7;
-webkit-clip-path: polygon(0 0, 100% 0, 50% 100%);
clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.c-lang-switch.is-open .c-lang-switch__btn::after {
transform: rotate(180deg);
}
.c-lang-switch__menu {
position: static;
top: auto;
right: auto;
left: auto;
visibility: hidden;
max-height: 0;
opacity: 0;
transition: opacity .3s, visibility .3s;
}
.c-lang-switch.is-open .c-lang-switch__menu {
visibility: visible;
max-height: 200px;
padding-top: 5px;
padding-bottom: 11px;
opacity: 1;
}
.c-lang-switch__menu li {
overflow: hidden;
margin-right: 11px;
margin-left: 11px;
border: 1px solid var(--color-main);
border-radius: 8px;
}
.c-lang-switch__menu li + li {
margin-top: 8px;
}
.c-lang-switch__menu li.is-selected a {
background-color: var(--color-main);
color: #fff;
pointer-events: none;
}
.c-lang-switch__menu a {
display: block;
width: 100%;
padding: .15em .2em;
color: inherit;
text-align: center;
text-decoration: none;
letter-spacing: .1em;
line-height: 1.4;
cursor: pointer;
transition: background-color .3s, color .3s;
}
@media screen and (max-width: 1199.98px) {
.c-lang-switch__menu a {
font-size: 1rem;
}
}
@media screen and (min-width: 1200px) {
.c-lang-switch__menu a {
font-size: clamp(.875rem, .278vw + .667rem, 1rem);
}
}
.is-google-translated .c-lang-switch__menu a {
letter-spacing: 0;
}
@media screen and (min-width: 1200px) {
.is-google-translated .c-lang-switch__menu a {
font-size: clamp(.875rem, .139vw + .771rem, .938rem);
}
}
.c-lang-switch__menu a[data-lang=EN] {
padding-top: .05em;
padding-bottom: .2em;
letter-spacing: .06em;
}
.c-lang-switch__menu a:hover {
background-color: var(--color-main);
color: #fff;
}
/* アコーディオン
--------------------------------------------------------- */
.c-accordion__header {
position: relative;
cursor: pointer;
-webkit-user-select: none;
user-select: none;
}
.c-accordion__header::after {
position: absolute;
top: 0;
right: clamp(8px, 1.4vw, 16px);
bottom: 0;
display: flex;
margin-top: auto;
margin-bottom: auto;
color: var(--color-main);
content: '\f00e';
font-weight: 900;
font-size: clamp(16px, 1.7vw, 22px);
font-family: var(--font-family-awesome);
line-height: 1;
align-items: center;
}
.c-accordion__header.is-open::after {
content: '\f010';
}
.c-accordion__body {
display: none;
}
/* スクロールアニメーション
--------------------------------------------------------- */
.animate-mask {
transition: -webkit-clip-path 1.2s cubic-bezier(.9, 0, .1, 1);
transition: clip-path 1.2s cubic-bezier(.9, 0, .1, 1);
transition: clip-path 1.2s cubic-bezier(.9, 0, .1, 1), -webkit-clip-path 1.2s cubic-bezier(.9, 0, .1, 1);
}
.animate-mask.--center {
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
}
.animate-mask.--center.is-appear {
-webkit-clip-path: inset(0);
clip-path: inset(0);
}
.animate-mask.--left,
.animate-mask.--right,
.animate-mask.--bottom,
.animate-mask.--top {
--inset-top: 0;
--inset-right: 0;
--inset-bottom: 0;
--inset-left: 0;
-webkit-clip-path: inset(var(--inset-top) var(--inset-right) var(--inset-bottom) var(--inset-left));
clip-path: inset(var(--inset-top) var(--inset-right) var(--inset-bottom) var(--inset-left));
}
.animate-mask.--left {
--inset-left: 100%;
}
.animate-mask.--left.is-appear {
--inset-left: 0;
}
.animate-mask.--right {
--inset-right: 100%;
}
.animate-mask.--right.is-appear {
--inset-right: 0;
}
.animate-mask.--bottom {
--inset-bottom: 100%;
}
.animate-mask.--bottom.is-appear {
--inset-bottom: 0;
}
.animate-mask.--top {
--inset-top: 100%;
}
.animate-mask.--top.is-appear {
--inset-top: 0;
}
.animate-cover {
position: relative;
display: inline-block;
overflow: hidden;
}
.animate-cover::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: linear-gradient(45deg, #0070c0, #00c09b);
content: '';
animation-duration: 1.2s;
animation-timing-function: cubic-bezier(.9, 0, .1, 1);
animation-fill-mode: forwards;
}
.animate-cover.is-wh::after {
background-color: #fff;
}
.animate-cover[data-delay='1000']::after {
animation-delay: 1s;
}
.animate-cover[data-delay='1300']::after {
animation-delay: 1.3s;
}
.animate-cover[data-delay='1600']::after {
animation-delay: 1.6s;
}
.animate-cover.--left::after {
transform: translateX(-100%);
}
.animate-cover.--left.is-appear::after {
animation-name: cover-left;
}
@keyframes cover-left {
40%,
60% {
transform: translateX(0);
}
100% {
transform: translateX(100%);
}
}
.animate-cover.--right::after {
transform: translateX(100%);
}
.animate-cover.--right.is-appear::after {
animation-name: cover-right;
}
@keyframes cover-right {
40%,
60% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
.animate-cover.--top::after {
transform: translateY(-100%);
}
.animate-cover.--top.is-appear::after {
animation-name: cover-top;
}
@keyframes cover-top {
40%,
60% {
transform: translateY(0);
}
100% {
transform: translateY(100%);
}
}
.animate-cover.--bottom::after {
transform: translateY(100%);
}
.animate-cover.--bottom.is-appear::after {
animation-name: cover-bottom;
}
@keyframes cover-bottom {
40%,
60% {
transform: translateY(0);
}
100% {
transform: translateY(-100%);
}
}
.animate-cover__content {
opacity: 0;
}
.animate-cover.is-appear .animate-cover__content {
animation-name: content;
animation-duration: .6s;
animation-fill-mode: forwards;
}
@keyframes content {
99% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.animate-fade-in {
opacity: 0;
}
.animate-fade-in.is-appear {
animation-name: fade-in;
animation-duration: .7s;
animation-timing-function: cubic-bezier(.33, 1, .68, 1);
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@media print {
.animate-fade-in {
opacity: 1;
transform: none;
}
}
.animate-zoom-in {
opacity: 0;
}
.animate-zoom-in.is-appear {
animation-name: zoom-in;
animation-duration: .8s;
animation-timing-function: cubic-bezier(.25, 1, .5, 1);
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
@keyframes zoom-in {
0% {
opacity: 0;
transform: scale(.8);
}
100% {
opacity: 1;
transform: scale(1);
}
}
@media print {
.animate-zoom-in {
opacity: 1;
transform: none;
}
}
.animate-slide-in-left,
.animate-slide-in-right,
.animate-slide-in-top,
.animate-slide-in-bottom {
opacity: 0;
transition: opacity .9s, transform .9s;
}
.animate-slide-in-left.is-appear,
.animate-slide-in-right.is-appear,
.animate-slide-in-top.is-appear,
.animate-slide-in-bottom.is-appear {
opacity: 1;
transform: none;
}
.animate-slide-in-left[data-delay='500'],
.animate-slide-in-right[data-delay='500'],
.animate-slide-in-top[data-delay='500'],
.animate-slide-in-bottom[data-delay='500'] {
transition-delay: .5s;
}
.animate-slide-in-left[data-delay='1000'],
.animate-slide-in-right[data-delay='1000'],
.animate-slide-in-top[data-delay='1000'],
.animate-slide-in-bottom[data-delay='1000'] {
transition-delay: 1s;
}
.animate-slide-in-left[data-delay='1500'],
.animate-slide-in-right[data-delay='1500'],
.animate-slide-in-top[data-delay='1500'],
.animate-slide-in-bottom[data-delay='1500'] {
transition-delay: 1.5s;
}
@media print {
.animate-slide-in-left,
.animate-slide-in-right,
.animate-slide-in-top,
.animate-slide-in-bottom {
opacity: 1;
transform: none;
}
}
.animate-slide-in-left {
transform: translateX(-60px);
}
.animate-slide-in-right {
transform: translateX(60px);
}
.animate-slide-in-top {
transform: translateY(-60px);
}
.animate-slide-in-bottom {
transform: translateY(60px);
}
.animate-slide-up {
display: block;
overflow: hidden;
}
.animate-slide-up.is-appear .animate-slide-up__inner {
transform: translateX(0);
}
.animate-slide-up[data-delay='400'] .animate-slide-up__inner {
transition-delay: .4s;
}
.animate-slide-up[data-delay='500'] .animate-slide-up__inner {
transition-delay: .5s;
}
.animate-slide-up[data-delay='600'] .animate-slide-up__inner {
transition-delay: .6s;
}
.animate-slide-up__inner {
display: inline-block;
transition: transform .8s cubic-bezier(.5, .2, 0, 1) .3s;
transform: translateY(105%);
}
/* ローディング
--------------------------------------------------------- */
.c-loading {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999;
margin: auto;
background-color: #fff;
}
.is-hero-ready .c-loading {
animation: fadeOut .8s linear forwards;
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
pointer-events: none;
}
}
/* 埋め込みコンポーネント
--------------------------------------------------------- */
.c-embed {
font-size: 0;
}
.c-embed iframe,
.c-embed video {
width: 100% !important;
height: 100% !important;
}
@media only screen and (max-width: 767.98px) {
.c-embed.--gmap iframe {
aspect-ratio: 1;
}
}
@media print, screen and (min-width: 768px) {
.c-embed.--gmap iframe {
aspect-ratio: 16/9;
}
}
.c-embed.--youtube iframe {
aspect-ratio: 16/9;
}
/* GSAP
--------------------------------------------------------- */
.js-scroll-show {
opacity: 0;
}
/* ページング
--------------------------------------------------------- */
.paging {
display: flex;
margin-top: clamp(70px, 8.3vw, 120px);
flex-wrap: wrap;
justify-content: center;
gap: 4px;
}
.paging .current {
padding: .6em 1em;
border-color: var(--color-main);
background-color: var(--color-main);
color: #fff;
}
.paging-text {
display: block;
border: 1px solid #f0f0f0;
background-color: var(--color-base);
letter-spacing: 0;
font-size: clamp(.813rem, .256vw + .755rem, 1.063rem);
font-family: var(--font-family-tertiary);
line-height: 1.4;
cursor: pointer;
}
.paging-text a {
display: block;
padding: .6em 1em;
color: var(--color-txt);
text-decoration: none;
transition: background-color .3s, color .3s;
}
.paging-text a:is(:hover, :active, :focus) {
background-color: #f5f5f5;
}
/* slick
--------------------------------------------------------- */
.c-slick__item {
background-color: var(--color-base);
}
.c-slick__item img {
width: 100%;
cursor: zoom-in;
object-fit: contain;
}
@media only screen and (max-width: 767.98px) {
.c-slick__item img {
height: 60vw;
}
}
@media print, screen and (min-width: 768px) {
.c-slick__item img {
height: clamp(200px, 18.6vw, 300px);
}
}
@media print {
.c-slick__item img {
height: 300px;
}
}
.slick-slider {
margin-bottom: 0 !important;
}
.slick-slide div {
font-size: 0;
}
.c-slick-thumb__item {
cursor: pointer;
}
.c-slick-thumb__item img {
width: 100%;
object-fit: cover;
}
@media only screen and (max-width: 767.98px) {
.c-slick-thumb__item img {
height: clamp(100px, 21.3vw, 140px);
}
}
@media print, screen and (min-width: 768px) {
.c-slick-thumb__item img {
height: clamp(70px, 6.3vw, 100px);
}
}
.c-slick-thumb .slick-list {
padding-right: 0 !important;
padding-left: 0 !important;
}
.c-slick-thumb .slick-current {
opacity: .7;
}
/* ========================================================================
/*
/* Project
/*
========================================================================= */
/* TOP Company
--------------------------------------------------------- */
.p-top-company {
position: relative;
z-index: 1;
background-color: var(--color-sub);
color: #fff;
}
@media screen and (max-width: 991.98px) {
.p-top-company {
padding-bottom: 45vw;
}
}
.p-top-company::before {
position: absolute;
z-index: -1;
background-image: url('../images/top/img-company.png');
background-repeat: no-repeat;
content: '';
}
@media screen and (max-width: 991.98px) {
.p-top-company::before {
right: 0;
bottom: 0;
width: 100%;
height: 50vw;
background-position: bottom right;
background-size: auto 100%;
}
}
@media print, screen and (min-width: 992px) {
.p-top-company::before {
top: clamp(50px, 5.1vw, 98px);
right: 0;
bottom: 0;
width: calc(min(92%, 1230px) * .657 + (100% - min(92%, 1230px)) / 2);
background-position: top left;
background-size: cover;
}
}
@media screen and (max-width: 991.98px) {
.p-top-company__inner {
padding: 50px 4vw;
}
}
@media print, screen and (min-width: 992px) {
.p-top-company__inner {
max-width: min(92%, 1230px);
margin-right: auto;
margin-left: auto;
padding-top: clamp(150px, 12.9vw, 225px);
padding-bottom: clamp(150px, 12.9vw, 227px);
}
}
@media print, screen and (min-width: 992px) {
.p-top-company__content {
width: 60%;
}
}
@media print, screen and (min-width: 992px) {
.p-top-company .c-heading {
margin-bottom: 3.4em;
}
}
.p-top-company .c-heading__title {
position: relative;
}
@media print, screen and (min-width: 992px) {
.p-top-company .c-heading__title {
top: .2em;
}
}
@media print, screen and (min-width: 992px) {
.p-top-company__txt {
line-height: 1.75;
font-feature-settings: 'palt';
}
}
.p-top-company__btn {
margin-top: clamp(40px, 4.2vw, 55px);
}
/* TOP Product
--------------------------------------------------------- */
.p-top-product {
position: relative;
z-index: 2;
padding-top: clamp(50px, 11vw, 200px);
padding-bottom: clamp(70px, 11.8vw, 200px);
}
.p-top-product__inner {
width: min(92%, 1230px);
margin-right: auto;
margin-left: auto;
}
@media print, screen and (min-width: 768px) {
.p-top-product__media {
display: grid;
column-gap: clamp(40px, 4.3vw, 76px);
grid-template: 'img content'/57.7% 1fr;
}
}
.p-top-product__content {
grid-area: content;
}
.p-top-product__img {
text-align: center;
grid-area: img;
}
@media only screen and (max-width: 767.98px) {
.p-top-product__img {
margin-top: 50px;
}
}
.p-top-product__img img {
height: auto;
max-width: 100%;
}
@media print, screen and (min-width: 768px) {
.p-top-product__txt {
letter-spacing: .09em;
line-height: 1.75;
font-feature-settings: 'palt';
}
}
.p-top-product__btn {
margin-top: clamp(40px, 4.2vw, 55px);
}
.p-top-product__deco {
position: absolute;
animation: txtCircle 60s linear infinite;
pointer-events: none;
}
@keyframes txtCircle {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@media only screen and (max-width: 767.98px) {
.p-top-product__deco {
z-index: -1;
}
}
@media print, screen and (min-width: 768px) {
.p-top-product__deco {
z-index: 1;
}
}
.p-top-product__deco.--deco1 {
top: calc(clamp(120px, 14.3vw, 205px) * -1);
left: calc(clamp(60px, 13vw, 236px) * -1);
width: clamp(250px, 43.2vw, 734px);
}
.p-top-product__deco.--deco2 {
right: calc(clamp(80px, 11.5vw, 182px) * -1);
bottom: calc(clamp(100px, 10.8vw, 146px) * -1);
width: clamp(250px, 41.1vw, 688px);
}
/* TOP history
--------------------------------------------------------- */
.p-top-history {
position: relative;
z-index: 1;
overflow: hidden;
background-color: var(--color-sub);
color: #fff;
text-align: center;
}
@media screen and (max-width: 991.98px) {
.p-top-history {
padding-top: clamp(70px, 12.6vw, 100px);
padding-bottom: clamp(120px, 22.2vw, 180px);
}
}
@media print, screen and (min-width: 768px) {
.p-top-history {
padding-top: clamp(120px, 11.3vw, 210px);
padding-bottom: clamp(220px, 19.6vw, 350px);
}
}
.p-top-history__inner {
position: relative;
width: min(92%, 1230px);
margin-right: auto;
margin-left: auto;
}
@media only screen and (max-width: 767.98px) {
.p-top-history__txt {
text-align: left;
}
}
@media print, screen and (min-width: 992px) {
.p-top-history__txt {
line-height: 1.75;
font-feature-settings: 'palt';
}
}
.p-top-history__btn {
margin-top: clamp(40px, 4.2vw, 55px);
}
.p-top-history__pics {
position: absolute;
z-index: -1;
inset: 0;
}
@media screen and (min-width: 1400px) {
.p-top-history__pics {
width: min(92%, 1230px);
margin-right: auto;
margin-left: auto;
}
}
.p-top-history__pic {
position: absolute;
}
.p-top-history__pic.--pic01 {
aspect-ratio: 3/4;
}
@media screen and (max-width: 991.98px) {
.p-top-history__pic.--pic01 {
top: clamp(10px, 2.2vw, 20px);
left: clamp(30px, 8.1vw, 80px);
width: clamp(100px, 17.8vw, 140px);
}
}
@media print, screen and (min-width: 992px) {
.p-top-history__pic.--pic01 {
top: clamp(10px, 1.5vw, 35px);
left: clamp(50px, 5.4vw, 80px);
width: clamp(180px, 16.5vw, 300px);
}
}
@media screen and (min-width: 1400px) {
.p-top-history__pic.--pic01 {
left: calc(clamp(90px, 6.4vw, 122px) * -1);
}
}
.p-top-history__pic.--pic02 {
aspect-ratio: 1;
}
@media screen and (max-width: 991.98px) {
.p-top-history__pic.--pic02 {
top: clamp(130px, 22.9vw, 180px);
left: clamp(10px, 3.7vw, 40px);
width: clamp(60px, 10.4vw, 80px);
}
}
@media print, screen and (min-width: 992px) {
.p-top-history__pic.--pic02 {
top: clamp(210px, 19.7vw, 365px);
left: clamp(0px, .8vw, 20px);
width: clamp(100px, 10.9vw, 160px);
}
}
@media screen and (min-width: 1400px) {
.p-top-history__pic.--pic02 {
left: calc(clamp(140px, 10.7vw, 214px) * -1);
}
}
.p-top-history__pic.--pic03 {
aspect-ratio: 333/249;
}
@media screen and (max-width: 991.98px) {
.p-top-history__pic.--pic03 {
top: clamp(300px, 48.1vw, 350px);
left: clamp(20px, 4.4vw, 40px);
width: clamp(160px, 26.6vw, 200px);
}
}
@media print, screen and (min-width: 992px) {
.p-top-history__pic.--pic03 {
top: clamp(450px, 36.3vw, 606px);
left: clamp(50px, 6.3vw, 100px);
width: clamp(260px, 20.4vw, 333px);
}
}
@media screen and (min-width: 1400px) {
.p-top-history__pic.--pic03 {
left: clamp(20px, 1.6vw, 32px);
}
}
.p-top-history__pic.--pic04 {
aspect-ratio: 4/3;
}
@media screen and (max-width: 991.98px) {
.p-top-history__pic.--pic04 {
top: clamp(30px, 5.2vw, 40px);
right: clamp(20px, 4.4vw, 40px);
width: clamp(130px, 22.9vw, 180px);
}
}
@media print, screen and (min-width: 992px) {
.p-top-history__pic.--pic04 {
top: 0;
right: clamp(10px, 1.3vw, 20px);
width: clamp(220px, 21.3vw, 400px);
}
}
@media screen and (min-width: 1400px) {
.p-top-history__pic.--pic04 {
right: calc(clamp(180px, 12vw, 219px) * -1);
}
}
.p-top-history__pic.--pic05 {
aspect-ratio: 260/347;
}
@media screen and (max-width: 991.98px) {
.p-top-history__pic.--pic05 {
top: clamp(330px, 54vw, 400px);
right: clamp(20px, 4.4vw, 40px);
width: clamp(130px, 22.9vw, 180px);
}
}
@media print, screen and (min-width: 992px) {
.p-top-history__pic.--pic05 {
top: clamp(450px, 36.3vw, 606px);
right: clamp(40px, 5vw, 80px);
width: clamp(200px, 15.8vw, 260px);
}
}
@media screen and (min-width: 1400px) {
.p-top-history__pic.--pic05 {
right: calc(clamp(20px, 1.6vw, 32px) * -1);
}
}
.p-top-history__pic.--pic06 {
aspect-ratio: 1;
}
@media screen and (max-width: 991.98px) {
.p-top-history__pic.--pic06 {
top: clamp(300px, 48.1vw, 350px);
right: clamp(120px, 21.4vw, 170px);
width: clamp(80px, 14.1vw, 110px);
}
}
@media print, screen and (min-width: 992px) {
.p-top-history__pic.--pic06 {
top: clamp(390px, 31.4vw, 525px);
right: clamp(200px, 15.1vw, 240px);
width: clamp(100px, 8.9vw, 160px);
}
}
@media screen and (min-width: 1400px) {
.p-top-history__pic.--pic06 {
right: 157px;
}
}
.p-top-history__pic img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* TOP livemodel
--------------------------------------------------------- */
.p-top-livemodel {
position: relative;
z-index: 1;
background-color: var(--color-sub);
color: #fff;
}
.p-top-livemodel::after {
position: absolute;
top: 0;
right: 0;
z-index: -1;
background-image: url('../images/top/bg-live-model.jpg');
background-size: cover;
background-repeat: no-repeat;
content: '';
}
@media only screen and (max-width: 767.98px) {
.p-top-livemodel::after {
width: 100%;
height: 50vw;
background-position: left center;
}
}
@media print, screen and (min-width: 768px) {
.p-top-livemodel::after {
top: 0;
bottom: 0;
width: calc(min(92%, 1230px) * .488 + (100% - min(92%, 1230px)) / 2);
background-position: left center;
}
}
.p-top-livemodel__inner {
position: relative;
z-index: 1;
}
@media only screen and (max-width: 767.98px) {
.p-top-livemodel__inner {
width: 100%;
padding-top: 50vw;
}
}
@media print, screen and (min-width: 768px) {
.p-top-livemodel__inner {
margin-right: auto;
margin-right: calc(min(92%, 1230px) * .488 + (100% - min(92%, 1230px)) / 2);
margin-left: calc((100% - min(92%, 1230px)) / 2);
}
}
@media print, screen and (min-width: 768px) {
.p-top-livemodel__inner::before {
position: absolute;
top: -1px;
bottom: -1px;
left: calc(100% - 1px);
z-index: -1;
width: clamp(150px, 16.3vw, 287px);
background-color: var(--color-sub);
content: '';
-webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);
clip-path: polygon(0 0, 100% 100%, 0 100%);
}
}
@media only screen and (max-width: 767.98px) {
.p-top-livemodel__content {
position: relative;
z-index: 1;
padding: 7vw 4vw 9vw;
}
}
@media print, screen and (min-width: 768px) {
.p-top-livemodel__content {
padding-top: clamp(100px, 9.7vw, 160px);
padding-right: clamp(20px, 1.9vw, 30px);
padding-bottom: clamp(140px, 12.6vw, 200px);
}
}
.p-top-livemodel__content::before {
background-color: #fcc;
}
@media only screen and (max-width: 767.98px) {
.p-top-livemodel__content::before {
position: absolute;
right: 0;
bottom: calc(100% - 1px);
left: 0;
z-index: -1;
height: 10%;
background-color: var(--color-sub);
content: '';
-webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);
clip-path: polygon(0 0, 100% 100%, 0 100%);
}
}
@media print, screen and (min-width: 768px) {
.p-top-livemodel__txt {
line-height: 1.75;
font-feature-settings: 'palt';
}
}
.p-top-livemodel__btn {
margin-top: clamp(45px, 4.4vw, 55px);
}
/* TOP railway
--------------------------------------------------------- */
.p-top-railway {
position: relative;
z-index: 1;
background-color: var(--color-sub);
color: #fff;
}
@media screen and (max-width: 991.98px) {
.p-top-railway {
padding-top: 70vw;
}
}
.p-top-railway::before {
position: absolute;
left: 0;
z-index: -1;
background-image: url('../images/top/img-history.png');
background-size: contain;
background-repeat: no-repeat;
content: '';
}
@media screen and (max-width: 991.98px) {
.p-top-railway::before {
top: 0;
right: 0;
left: 0;
width: auto;
height: 70vw;
background-position: top left;
}
}
@media print, screen and (min-width: 992px) {
.p-top-railway::before {
top: 0;
width: calc(min(92%, 1230px) * .6 + (100% - min(92%, 1230px)) / 2);
height: 100%;
background-position: top right;
}
}
@media screen and (max-width: 991.98px) {
.p-top-railway__inner {
padding: 50px 4vw;
}
}
@media print, screen and (min-width: 992px) {
.p-top-railway__inner {
max-width: min(92%, 1230px);
margin-right: auto;
margin-left: auto;
padding-top: clamp(120px, 10.8vw, 195px);
padding-bottom: clamp(120px, 10.3vw, 180px);
}
}
@media screen and (min-width: 1400px) {
.p-top-railway__inner {
padding-bottom: clamp(180px, 13vw, 250px);
}
}
@media print, screen and (min-width: 992px) {
.p-top-railway__content {
width: 50%;
margin-left: auto;
text-align: right;
}
}
@media screen and (max-width: 991.98px) {
.p-top-railway__heading {
margin-bottom: 1.8em;
}
}
@media print, screen and (min-width: 992px) {
.p-top-railway__heading {
margin-bottom: 3.4em;
}
}
.p-top-railway__heading-en {
position: relative;
left: -.02em;
letter-spacing: .0019555556em;
font-weight: 700;
font-size: clamp(1.875rem, 3.846vw + 1.01rem, 5.625rem);
font-family: var(--font-family-secondary);
line-height: 1.14;
}
@media screen and (max-width: 991.98px) {
.p-top-railway__heading-en em {
padding-left: 2em;
}
}
.p-top-railway__heading-title {
position: relative;
top: .35em;
display: inline-block;
padding-right: 3.2em;
padding-left: .2em;
letter-spacing: .0078333333em;
font-weight: 500;
font-size: clamp(1.063rem, .449vw + .962rem, 1.5rem);
font-family: var(--font-family-primary);
line-height: 1;
font-feature-settings: 'palt';
}
@media print, screen and (min-width: 992px) {
.p-top-railway__txt {
font-size: clamp(.938rem, .108vw + .871rem, 1rem);
line-height: 1.75;
font-feature-settings: 'palt';
}
}
.p-top-railway__btn {
margin-top: clamp(45px, 4.4vw, 55px);
}
@media screen and (max-width: 991.98px) {
.p-top-railway__btn {
text-align: right;
}
}
/* TOP Information
--------------------------------------------------------- */
.p-top-info {
padding-top: clamp(70px, 10.1vw, 160px);
}
.p-top-info__inner {
width: min(92%, 1230px);
margin-right: auto;
margin-left: auto;
}
.p-top-info .c-heading__title {
position: relative;
top: -.3em;
}
.p-top-info__items {
overflow-y: auto;
width: 100%;
max-height: clamp(350px, 35.5vw, 460px);
}
@media print {
.p-top-info__items {
max-height: 100%;
}
}
.p-top-info__items::-webkit-scrollbar {
width: 10px;
}
.p-top-info__items::-webkit-scrollbar-track {
background-color: var(--color-base);
}
.p-top-info__items::-webkit-scrollbar-thumb {
background-color: var(--color-main);
}
.p-top-info__item {
position: relative;
background-color: var(--color-base2);
color: #000;
font-weight: 500;
}
@media print, screen and (min-width: 768px) {
.p-top-info__item {
letter-spacing: 0;
font-feature-settings: 'palt';
}
}
.p-top-info__item:nth-of-type(even) {
background-color: var(--color-base3);
}
.p-top-info__item:has(a:hover) {
background-color: #e7edfc;
}
.p-top-info__item:nth-of-type(even):has(a:hover) {
background-color: #e7edfc;
}
.p-top-info__item a {
position: relative;
display: block;
background-color: inherit;
color: currentColor;
transition: background-color .3s, color .3s;
}
.p-top-info__item a::before {
position: absolute;
top: 0;
bottom: 0;
margin: auto;
background-color: currentColor;
content: '';
transition: background-color .3s;
-webkit-mask-image: var(--icon-external);
mask-image: var(--icon-external);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
aspect-ratio: 1;
}
@media print {
.p-top-info__item a::before {
-webkit-print-color-adjust: exact;
}
}
@media only screen and (max-width: 767.98px) {
.p-top-info__item a::before {
right: 15px;
height: 12px;
}
}
@media print, screen and (min-width: 768px) {
.p-top-info__item a::before {
right: clamp(15px, 4.8vw, 95px);
height: 1em;
}
}
@media only screen and (max-width: 767.98px) {
.p-top-info__item-in {
padding: 1.2em 3vw;
}
}
@media print, screen and (min-width: 768px) {
.p-top-info__item-in {
display: grid;
padding-top: 1.9em;
padding-right: clamp(40px, 5.4vw, 105px);
padding-bottom: 1.9em;
padding-left: clamp(40px, 5.4vw, 105px);
column-gap: 4%;
justify-content: space-between;
align-items: flex-start;
grid-template: 'date txt'/clamp(140px, 11.5vw, 170px) 1fr;
}
}
@media only screen and (max-width: 767.98px) {
a .p-top-info__item-in {
padding-right: 40px;
}
}
@media print, screen and (min-width: 768px) {
a .p-top-info__item-in {
padding-right: clamp(100px, 11.2vw, 200px);
}
}
.p-top-info__date {
grid-area: date;
}
.p-top-info__date .icon-new {
margin-left: 1em;
color: var(--color-red);
}
.p-top-info__txt {
grid-area: txt;
}
a .p-top-info__txt {
text-decoration: underline;
text-underline-offset: .5em;
}
/* 製品一覧
--------------------------------------------------------- */
.p-product {
width: min(92%, 1600px);
margin-right: auto;
margin-left: auto;
}
@media print, screen and (min-width: 992px) {
.p-product__container {
display: grid;
grid-template: 'sub main'/25% 70%;
justify-content: space-between;
}
}
.p-product__sub {
grid-area: sub;
}
.p-product__main {
grid-area: main;
}
.p-product__nav {
margin-bottom: clamp(40px, 5.3vw, 80px);
border: 1px solid var(--color-main);
}
.p-product__nav-header {
position: relative;
padding: .2em 1em;
background-color: var(--color-sub);
color: #fff;
text-align: center;
font-weight: 600;
font-size: clamp(1.125rem, .192vw + 1.082rem, 1.313rem);
font-family: var(--font-family-tertiary);
cursor: pointer;
-webkit-user-select: none;
user-select: none;
}
@media screen and (max-width: 991.98px) {
.p-product__nav-header::before {
margin-right: .5em;
color: inherit;
content: '\f0c9';
font-weight: 900;
font-size: 90%;
font-family: 'Font Awesome 6 Free';
line-height: 1;
}
}
@media screen and (max-width: 991.98px) {
.p-product__nav-header::after {
position: absolute;
top: 0;
right: .7em;
bottom: 0;
display: flex;
color: #fff;
content: '\f067';
font-weight: 900;
font-size: 80%;
font-family: 'Font Awesome 6 Free';
line-height: 1;
align-items: center;
}
}
@media screen and (max-width: 991.98px) {
.p-product__nav-header.is-open::after {
content: '\f068';
}
}
@media screen and (max-width: 991.98px) {
.p-product__nav-box {
display: none;
}
}
@media print, screen and (min-width: 992px) {
.p-product__nav-box {
display: block !important;
}
}
.p-product__nav li a {
position: relative;
display: block;
overflow: hidden;
height: 100%;
background-color: #fff;
color: var(--color-main);
text-decoration: none;
letter-spacing: .05em;
font-weight: 500;
line-height: 1.5;
transition: .3s;
}
@media screen and (max-width: 991.98px) {
.p-product__nav li a {
padding: .9em 1.8em .9em 1.2em;
font-size: clamp(14px, 2.1vw, 15px);
}
}
@media print, screen and (min-width: 992px) {
.p-product__nav li a {
padding: .9em 2.6em .9em 1.2em;
font-size: clamp(.875rem, .108vw + .808rem, .938rem);
}
}
.p-product__nav li a::after {
position: absolute;
top: 0;
right: clamp(10px, 1.1vw, 15px);
bottom: 0;
display: flex;
content: '\f054';
font-weight: 900;
font-family: 'Font Awesome 6 Free';
align-items: center;
}
@media screen and (max-width: 991.98px) {
.p-product__nav li a::after {
font-size: 82%;
}
}
@media print, screen and (min-width: 992px) {
.p-product__nav li a::after {
font-size: 84%;
}
}
@media print, screen and (min-width: 992px) {
.p-product__nav li a:hover,
.p-product__nav li a:active {
background-color: var(--color-base3);
color: var(--color-main);
}
}
.p-product__nav li.is-current a {
background-color: var(--color-base3);
color: var(--color-main);
}
.p-product__item + .p-product__item {
margin-top: clamp(60px, 7.9vw, 120px);
}
@media print, screen and (min-width: 992px) {
.p-product__item-in {
display: grid;
column-gap: 4%;
grid-template: 'gallery content'/1fr clamp(420px, 38.5vw, 700px);
justify-content: space-between;
}
}
@media print, screen and (min-width: 992px) {
.p-product__item-in:not(:has(.p-product__item-gallery)) {
column-gap: 0;
grid-template: 'content'/1fr;
}
}
.p-product__item-gallery {
overflow: hidden;
grid-area: gallery;
}
.p-product__item-gallery [class*=swiper]:focus {
outline: none;
}
.p-product__item-gallery .swiper {
overflow: visible;
}
.p-product__item-gallery .swiper-fade .swiper-slide {
transition-property: opacity, transform !important;
pointer-events: none;
}
.p-product__item-gallery .swiper-fade .swiper-slide-active {
pointer-events: auto;
}
.p-product__item-gallery .swiper-controller {
position: absolute;
top: 0;
left: 0;
width: 100%;
aspect-ratio: 4/3;
}
.p-product__item-gallery .swiper-button-prev,
.p-product__item-gallery .swiper-button-next {
position: absolute;
top: 0;
bottom: 0;
z-index: 10;
margin: auto;
cursor: pointer;
transition: .7s cubic-bezier(.2, 1, .2, 1);
}
.p-product__item-gallery .swiper-button-prev:hover::after,
.p-product__item-gallery .swiper-button-next:hover::after {
color: var(--color-main-hover);
}
.p-product__item-gallery .swiper-button-prev::after,
.p-product__item-gallery .swiper-button-next::after {
color: rgba(42, 63, 121, .2);
font-weight: 900;
font-size: inherit;
font-family: 'Font Awesome 6 Free';
line-height: 1;
transition: color .3s;
}
@media screen and (max-width: 991.98px) {
.p-product__item-gallery .swiper-button-prev::after,
.p-product__item-gallery .swiper-button-next::after {
font-size: clamp(24px, 3.8vw, 28px);
}
}
@media print, screen and (min-width: 992px) {
.p-product__item-gallery .swiper-button-prev::after,
.p-product__item-gallery .swiper-button-next::after {
font-size: clamp(21px, 1.5vw, 24px);
}
}
.p-product__item-gallery .swiper-button-prev {
left: 1%;
}
.p-product__item-gallery .swiper-button-prev::after {
content: '\f104';
}
.p-product__item-gallery .swiper-button-next {
right: 1%;
}
.p-product__item-gallery .swiper-button-next::after {
content: '\f105';
}
.p-product__item-gallery .swiper-button-disabled {
opacity: 0;
pointer-events: none;
}
.p-product__item-gallery .slide {
display: block;
overflow: hidden;
margin-bottom: 0;
}
.p-product__item-gallery .slide-img,
.p-product__item-gallery .thumb-img {
position: relative;
overflow: hidden;
}
.p-product__item-gallery .slide-img img,
.p-product__item-gallery .thumb-img img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.p-product__item-gallery .slide-img {
display: block;
border: 1px solid #e6e6e6;
background-color: #f7f7f7;
aspect-ratio: 4/3;
}
.p-product__item-gallery .slide-img img {
object-fit: contain;
}
.p-product__item-gallery .slide-img img:hover {
cursor: zoom-in;
}
.p-product__item-gallery .slide-title {
margin-top: clamp(15px, 1.5vw, 20px);
padding: 1.1em 1.5em;
background-color: var(--color-base);
font-weight: bold;
line-height: 1.6;
}
.p-product__item-gallery .thumb-wrapper {
display: grid;
margin-top: clamp(8px, .9vw, 12px);
grid-template-columns: repeat(3, 1fr);
gap: clamp(8px, .9vw, 12px);
}
.p-product__item-gallery .thumb-img {
position: relative;
z-index: 1;
cursor: pointer;
transition: .7s cubic-bezier(.2, 1, .2, 1);
aspect-ratio: 4/3;
}
.p-product__item-gallery .thumb-img::before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
margin: auto;
background-color: #000;
content: '';
opacity: .4;
transition: .7s cubic-bezier(.2, 1, .2, 1);
}
@media print, screen and (min-width: 768px) {
.p-product__item-gallery .thumb-img:hover::before {
opacity: 0;
}
}
.p-product__item-gallery .thumb-img.is-current::before {
opacity: 0;
}
.p-product__item-gallery .thumb-img img {
transition: .7s cubic-bezier(.2, 1, .2, 1);
object-fit: cover;
}
.p-product__item-content {
grid-area: content;
}
@media screen and (max-width: 991.98px) {
.p-product__item-content {
margin-top: 40px;
}
}
@media print, screen and (min-width: 992px) {
.p-product__txt {
letter-spacing: .07em;
font-size: .9375rem;
}
}
.p-product__videos {
margin-top: clamp(40px, 3.9vw, 50px);
}
.p-product__video + .p-product__video {
margin-top: clamp(40px, 3.9vw, 50px);
}
.p-product__video-content {
font-size: 0;
}
.p-product__video-content iframe,
.p-product__video-content video {
width: 100% !important;
height: 100% !important;
aspect-ratio: 16/9;
}
.p-product__video-label {
margin-top: .7em;
color: #6a6c71;
text-align: center;
font-weight: 500;
font-size: clamp(.875rem, .064vw + .861rem, .938rem);
line-height: 1.6;
}
.p-product__files {
margin-top: clamp(40px, 3.9vw, 50px);
}
.p-product__file + .p-product__file {
margin-top: .5em;
}
.p-product__file a {
text-decoration: underline;
font-weight: 500;
line-height: 1.5;
}
@media screen and (max-width: 991.98px) {
.p-product__file a {
font-size: 1rem;
}
}
@media print, screen and (min-width: 992px) {
.p-product__file a {
font-size: .9375rem;
}
}
.p-product__btns {
margin-top: clamp(50px, 5.3vw, 70px);
}
@media print, screen and (min-width: 992px) {
.p-product__btns {
display: flex;
width: clamp(420px, 38.5vw, 700px);
margin-left: auto;
gap: 4%;
}
}
@media print, screen and (min-width: 992px) {
.p-product__btn {
width: 48%;
}
}
@media print, screen and (min-width: 992px) {
.p-product__btn:last-child {
margin-left: auto;
}
}
.p-product__btn .c-btn {
display: block;
}
@media print, screen and (min-width: 992px) {
.p-product__btn .c-btn {
padding-right: clamp(20px, 1.7vw, 30px);
}
}
.p-product__btn .c-btn::before {
right: 0;
left: clamp(9px, .9vw, 12px);
height: 1px;
background-color: currentColor;
}
.p-product__btn .c-btn span {
display: block;
}
@media print, screen and (min-width: 992px) {
.p-product__btn .c-btn span {
font-size: clamp(.813rem, .216vw + .679rem, .938rem);
}
}
.p-product__btn .c-btn:hover span {
transform: translateX(clamp(20px, 1.6vw, 30px));
}
@media screen and (max-width: 991.98px) {
.p-product__btn + .p-product__btn {
margin-top: 20px;
}
}
/* 詳細ページ
--------------------------------------------------------- */
.p-detail__inner {
max-width: min(92%, 940px);
margin-right: auto;
margin-left: auto;
}
.p-detail__gallery [class*=swiper]:focus {
outline: none;
}
.p-detail__gallery .swiper {
overflow: visible;
}
.p-detail__gallery .swiper-fade .swiper-slide {
transition-property: opacity, transform !important;
pointer-events: none;
}
.p-detail__gallery .swiper-fade .swiper-slide-active {
pointer-events: auto;
}
.p-detail__gallery .swiper-controller {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
@media only screen and (max-width: 767.98px) {
.p-detail__gallery .swiper-controller {
aspect-ratio: 4/3;
}
}
@media print, screen and (min-width: 768px) {
.p-detail__gallery .swiper-controller {
aspect-ratio: 16/9;
}
}
.p-detail__gallery .swiper-button-prev,
.p-detail__gallery .swiper-button-next {
position: absolute;
top: 0;
bottom: 0;
z-index: 10;
margin: auto;
cursor: pointer;
transition: .7s cubic-bezier(.2, 1, .2, 1);
}
.p-detail__gallery .swiper-button-prev:hover::after,
.p-detail__gallery .swiper-button-next:hover::after {
color: var(--color-main-hover);
}
.p-detail__gallery .swiper-button-prev::after,
.p-detail__gallery .swiper-button-next::after {
color: rgba(42, 63, 121, .2);
font-weight: 900;
font-size: inherit;
font-size: clamp(24px, 2.8vw, 40px);
font-family: 'Font Awesome 6 Free';
line-height: 1;
transition: color .3s;
}
.p-detail__gallery .swiper-button-prev {
left: 1%;
}
.p-detail__gallery .swiper-button-prev::after {
content: '\f104';
}
.p-detail__gallery .swiper-button-next {
right: 1%;
}
.p-detail__gallery .swiper-button-next::after {
content: '\f105';
}
.p-detail__gallery .swiper-button-disabled {
opacity: 0;
pointer-events: none;
}
.p-detail__gallery .slide {
display: block;
overflow: hidden;
margin-bottom: 0;
}
.p-detail__gallery .slide-img,
.p-detail__gallery .thumb-img {
position: relative;
overflow: hidden;
}
.p-detail__gallery .slide-img img,
.p-detail__gallery .thumb-img img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.p-detail__gallery .slide-img {
display: block;
border: 1px solid #e6e6e6;
background-color: #f7f7f7;
}
@media only screen and (max-width: 767.98px) {
.p-detail__gallery .slide-img {
aspect-ratio: 4/3;
}
}
@media print, screen and (min-width: 768px) {
.p-detail__gallery .slide-img {
aspect-ratio: 16/9;
}
}
.p-detail__gallery .slide-img img {
object-fit: contain;
}
.p-detail__gallery .thumb-wrapper {
display: grid;
margin-top: clamp(15px, 1.5vw, 20px);
grid-template-columns: repeat(5, 1fr);
gap: clamp(7px, .8vw, 12px);
}
.p-detail__gallery .thumb-img {
cursor: pointer;
transition: .7s cubic-bezier(.2, 1, .2, 1);
aspect-ratio: 4/3;
}
.p-detail__gallery .thumb-img::before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
margin: auto;
background-color: #000;
content: '';
opacity: .4;
transition: .7s cubic-bezier(.2, 1, .2, 1);
}
@media print, screen and (min-width: 768px) {
.p-detail__gallery .thumb-img:hover::before {
opacity: 0;
}
}
.p-detail__gallery .thumb-img.is-current::before {
opacity: 0;
}
.p-detail__gallery .thumb-img img {
transition: .7s cubic-bezier(.2, 1, .2, 1);
object-fit: cover;
}
.p-detail__txt::after {
display: block;
clear: both;
content: '';
}
.p-detail__txt {
margin-top: clamp(60px, 7vw, 100px);
}
.p-detail__txt iframe {
max-width: 100%;
}
.p-detail__spec {
margin-top: clamp(50px, 6.6vw, 100px);
}
.p-detail__spec-txt a {
text-decoration: underline;
}
.p-detail__btns {
margin-top: clamp(50px, 5.3vw, 70px);
}
@media print, screen and (min-width: 768px) {
.p-detail__btns {
display: flex;
column-gap: 4%;
justify-content: center;
}
}
.p-detail__btn .c-btn {
display: block;
}
@media print, screen and (min-width: 768px) {
.p-detail__btn .c-btn {
min-width: clamp(250px, 20.5vw, 300px);
padding-right: clamp(20px, 1.9vw, 30px);
}
}
.p-detail__btn .c-btn::before {
right: 0;
left: clamp(9px, .9vw, 12px);
height: 1px;
background-color: currentColor;
}
.p-detail__btn .c-btn span {
display: block;
}
@media print, screen and (min-width: 768px) {
.p-detail__btn .c-btn span {
font-size: clamp(.813rem, .174vw + .729rem, .938rem);
}
}
.p-detail__btn .c-btn:is(:hover, :active, :focus) span {
transform: translateX(clamp(20px, 1.9vw, 30px));
}
@media only screen and (max-width: 767.98px) {
.p-detail__btn + .p-detail__btn {
margin-top: 20px;
}
}
/* 中古品について
--------------------------------------------------------- */
.p-used__inner {
width: min(92%, 1110px);
margin-right: auto;
margin-left: auto;
}
.p-used__license {
margin-bottom: clamp(30px, 3.5vw, 50px);
font-size: clamp(12px, 1.1vw, 14px);
}
@media print, screen and (min-width: 768px) {
.p-used__license {
text-align: right;
}
}
.p-used__lead {
margin-bottom: clamp(60px, 7vw, 100px);
font-size: clamp(1rem, .064vw + .986rem, 1.063rem);
}
.p-used__lead strong {
color: var(--color-red);
}
.p-used__item + .p-used__item {
margin-top: clamp(40px, 5.7vw, 90px);
}
/* 鉄道の歴史
--------------------------------------------------------- */
.p-history__main {
position: relative;
z-index: 1;
margin-bottom: clamp(60px, 7.9vw, 120px);
padding-top: clamp(60px, 8.8vw, 140px);
padding-bottom: clamp(50px, 6.6vw, 100px);
background: url('../images/history/bg-main.jpg') center center/cover no-repeat;
}
.p-history__main::before {
position: absolute;
z-index: -1;
background-color: rgba(0, 0, 0, .5);
content: '';
inset: 0;
}
.p-history__main-inner {
width: min(92%, 1230px);
margin-right: auto;
margin-left: auto;
}
.p-history__lead {
color: #fff;
}
@media print, screen and (min-width: 768px) {
.p-history__lead {
line-height: 2.2;
}
}
@media print, screen and (min-width: 992px) {
.p-history__lead {
text-align: center;
}
}
.p-history__category {
display: grid;
margin-top: clamp(50px, 6.1vw, 90px);
row-gap: clamp(20px, 2.6vw, 40px);
}
@media only screen and (max-width: 767.98px) {
.p-history__category {
column-gap: 2%;
grid-template-columns: repeat(3, 1fr);
}
}
@media print, screen and (min-width: 768px) {
.p-history__category {
column-gap: 3%;
grid-template-columns: repeat(4, 1fr);
}
}
@media screen and (min-width: 1200px) {
.p-history__category {
column-gap: 4%;
grid-template-columns: repeat(5, 1fr);
}
}
.p-history__category-item {
display: flex;
flex-direction: column;
}
.p-history__category-item a {
display: flex;
flex-direction: column;
padding: clamp(10px, 1.1vw, 15px);
transition: background-color .3s, color .3s;
flex-grow: 1;
}
.p-history__category-item a:is(:hover, :active, :focus) {
background-color: rgba(64, 96, 182, .7);
}
.p-history__category-item.is-current a {
background-color: rgba(64, 96, 182, .7);
}
.p-history__category-flag img {
width: 100%;
object-fit: contain;
aspect-ratio: 16/9;
}
.p-history__category-cap {
margin-top: .8em;
color: #fff;
text-align: center;
line-height: 1.5;
flex-grow: 1;
}
@media only screen and (max-width: 767.98px) {
.p-history__category-cap {
letter-spacing: 0;
font-size: clamp(.75rem, .245vw + .695rem, .813rem);
}
}
@media print, screen and (min-width: 768px) {
.p-history__category-cap {
letter-spacing: .05em;
font-size: clamp(.813rem, .26vw + .688rem, 1rem);
}
}
.p-history__item {
width: min(92%, 1110px);
margin-right: auto;
margin-left: auto;
}
.p-history__item + .p-history__item {
margin-top: clamp(70px, 10.1vw, 160px);
}
.p-history__heading {
position: relative;
display: grid;
margin-bottom: clamp(40px, 4.4vw, 60px);
padding-bottom: clamp(16px, 1.8vw, 25px);
column-gap: 3%;
align-items: center;
}
@media only screen and (max-width: 767.98px) {
.p-history__heading {
grid-template: 'img title'/auto 1fr;
}
}
@media print, screen and (min-width: 768px) {
.p-history__heading {
grid-template: 'img title'/auto auto;
justify-content: center;
}
}
.p-history__heading::before,
.p-history__heading::after {
position: absolute;
bottom: 0;
height: 3px;
content: '';
}
.p-history__heading::before {
right: 0;
left: 0;
background-color: var(--color-base);
}
.p-history__heading::after {
left: 0;
width: 3em;
background-color: var(--color-main);
}
.p-history__heading-img img {
height: clamp(50px, 5.7vw, 80px);
max-width: clamp(150px, 15.4vw, 200px);
object-fit: contain;
}
.p-history__heading-title {
font-weight: 600;
line-height: 1.5;
}
@media only screen and (max-width: 767.98px) {
.p-history__heading-title {
font-size: clamp(1.25rem, .98vw + 1.029rem, 1.5rem);
}
}
@media print, screen and (min-width: 768px) {
.p-history__heading-title {
font-size: clamp(1.5rem, 1.128vw + .958rem, 2.313rem);
}
}
.p-history__txt::after {
display: block;
clear: both;
content: '';
}
.p-history__txt iframe {
max-width: 100%;
}
.p-history__img {
margin-top: clamp(50px, 6.6vw, 100px);
text-align: center;
}
.p-history__img img {
width: 100%;
height: auto;
max-width: 800px;
}
.p-history__txt2 {
margin-top: clamp(50px, 6.6vw, 100px);
}
.p-history__txt2::after {
display: block;
clear: both;
content: '';
}
.p-history__txt2 iframe {
max-width: 100%;
}
/* 組むのに何が必要？
--------------------------------------------------------- */
.p-necessary {
width: min(92%, 1230px);
margin-top: clamp(60px, 7.9vw, 120px);
margin-right: auto;
margin-left: auto;
}
.p-necessary__lead {
margin-bottom: clamp(50px, 6.6vw, 100px);
}
@media print, screen and (min-width: 768px) {
.p-necessary__lead {
line-height: 2.2;
}
}
@media print, screen and (min-width: 992px) {
.p-necessary__lead {
text-align: center;
}
}
.p-necessary__lead strong {
color: #e23a3a;
font-weight: 500;
}
@media print, screen and (min-width: 768px) {
.p-necessary__item {
display: grid;
column-gap: clamp(50px, 5.6vw, 100px);
grid-template: 'img content'/40% 1fr;
}
}
@media print, screen and (min-width: 768px) {
.p-necessary__item:nth-of-type(even) {
grid-template: 'content img'/1fr 40%;
}
}
.p-necessary__item + .p-necessary__item {
margin-top: clamp(60px, 8.8vw, 140px);
}
.p-necessary__content {
grid-area: content;
}
@media print, screen and (min-width: 768px) {
.p-necessary__content {
padding-top: 10px;
}
}
@media print, screen and (min-width: 768px) {
.p-necessary__txt li {
font-feature-settings: 'palt';
}
}
.p-necessary__txt li + li {
margin-top: .5em;
}
.p-necessary__img {
text-align: center;
grid-area: img;
}
@media only screen and (max-width: 767.98px) {
.p-necessary__img {
margin-top: 50px;
}
}
.p-necessary__img img {
border: 1px solid var(--color-base);
}
@media only screen and (max-width: 767.98px) {
.p-necessary__img img {
width: 100%;
object-fit: cover;
aspect-ratio: 5/3;
}
}
@media print, screen and (min-width: 768px) {
.p-necessary__img img {
width: 100%;
height: auto;
}
}
.p-necessary__btn {
margin-top: clamp(30px, 3.5vw, 50px);
text-align: right;
}
/* 運転の仕方
--------------------------------------------------------- */
.p-drive__bg {
padding-top: clamp(50px, 6.6vw, 100px);
padding-bottom: clamp(50px, 6.6vw, 100px);
background-color: var(--color-base);
}
.p-drive__inner {
width: min(92%, 1000px);
margin-right: auto;
margin-left: auto;
}
.p-drive__lead {
margin-bottom: clamp(50px, 6.6vw, 100px);
}
@media print, screen and (min-width: 768px) {
.p-drive__lead {
line-height: 2.2;
}
}
@media print, screen and (min-width: 992px) {
.p-drive__lead {
text-align: center;
}
}
.p-drive__lead strong {
color: #e23a3a;
font-weight: 500;
}
.p-drive__video-summary {
margin-top: clamp(35px, 3.7vw, 50px);
}
.p-drive__video-chapter {
margin-top: clamp(50px, 5.7vw, 80px);
counter-reset: my-counter;
}
.p-drive__video-chapter > li {
position: relative;
}
@media print, screen and (min-width: 768px) {
.p-drive__video-chapter > li {
padding-left: 2.8em;
}
}
.p-drive__video-chapter > li::before {
color: inherit;
content: counter(my-counter, decimal-leading-zero) '. ';
counter-increment: my-counter;
font-size: 120%;
font-family: var(--font-family-secondary);
line-height: 1.5;
}
@media only screen and (max-width: 767.98px) {
.p-drive__video-chapter > li::before {
display: block;
}
}
@media print, screen and (min-width: 768px) {
.p-drive__video-chapter > li::before {
position: absolute;
top: .2em;
left: 0;
}
}
.p-drive__video-chapter > li + li {
margin-top: 1.5em;
}
.p-drive__video-chapter a {
text-decoration: underline;
}
.p-drive__video-chapter a:is(:hover, :active, :focus) {
color: var(--color-link-hover);
}
.p-drive__item + .p-drive__item {
margin-top: clamp(40px, 4.8vw, 70px);
}
.p-drive__notice + .p-drive__notice {
margin-top: clamp(30px, 3.5vw, 50px);
}
.p-drive__notice-title {
margin-bottom: .8em;
color: var(--color-txt);
font-weight: 500;
font-size: clamp(1.125rem, .128vw + 1.096rem, 1.25rem);
line-height: 1.6;
}
/* FAQ
--------------------------------------------------------- */
.p-faq {
margin-top: clamp(60px, 7.9vw, 120px);
}
.p-faq__inner {
width: min(92%, 1230px);
margin-right: auto;
margin-left: auto;
}
.p-faq__lead {
margin-bottom: clamp(50px, 6.6vw, 100px);
}
@media print, screen and (min-width: 768px) {
.p-faq__lead {
line-height: 2.2;
}
}
@media print, screen and (min-width: 992px) {
.p-faq__lead {
text-align: center;
}
}
.p-faq__lead strong {
color: #e23a3a;
font-weight: 500;
}
.p-faq__item {
background-color: var(--color-base2);
}
.p-faq__item:nth-of-type(even) {
background-color: var(--color-base3);
}
.p-faq__question,
.p-faq__answer {
position: relative;
}
.p-faq__question::before,
.p-faq__answer::before {
display: flex;
width: clamp(27px, 3.4vw, 50px);
height: clamp(27px, 3.4vw, 50px);
color: #fff;
font-weight: 500;
font-size: clamp(.875rem, .513vw + .76rem, 1.375rem);
font-family: var(--font-family-secondary);
align-items: center;
justify-content: center;
}
.p-faq__question {
padding-top: 1.5em;
padding-right: 1.8em;
padding-bottom: 1.5em;
padding-left: clamp(48px, 5.8vw, 85px);
}
.p-faq__question::before {
position: absolute;
top: 0;
bottom: 0;
left: clamp(14px, 1.5vw, 20px);
margin: auto;
background-color: var(--color-main);
content: 'Q';
}
.p-faq__title {
font-size: clamp(1rem, .256vw + .942rem, 1.25rem);
line-height: 1.5;
}
.p-faq__answer {
padding-right: clamp(14px, 1.5vw, 20px);
padding-bottom: clamp(40px, 3.9vw, 50px);
padding-left: clamp(14px, 1.5vw, 20px);
font-size: clamp(.938rem, .064vw + .923rem, 1rem);
}
.p-faq__answer::before {
margin-bottom: 15px;
background-color: var(--color-link-hover);
content: 'A';
}
@media print, screen and (min-width: 768px) {
.p-faq__media {
padding-right: 1.5em;
padding-left: 1.5em;
}
}
@media print, screen and (min-width: 992px) {
.p-faq__media {
display: grid;
column-gap: 5%;
grid-template: 'content images'/1fr auto;
}
}
@media print, screen and (min-width: 992px) {
.p-faq__media:not(:has(.p-faq__images)) {
column-gap: 0;
grid-template: 'content'/auto;
}
}
@media print, screen and (min-width: 992px) {
.p-faq__media:not(:has(.p-faq__content)) {
column-gap: 0;
grid-template: 'images'/auto;
}
}
.p-faq__content {
grid-area: content;
}
.p-faq__content > * {
margin-bottom: 1.5em;
}
.p-faq__content > *:last-child {
margin-bottom: 0;
}
.p-faq__images {
grid-area: images;
}
@media screen and (max-width: 991.98px) {
.p-faq__images {
margin-top: clamp(40px, 6.7vw, 50px);
}
}
@media print, screen and (min-width: 992px) {
.p-faq__images {
width: clamp(200px, 20.6vw, 270px);
}
}
.p-faq__img {
text-align: center;
}
.p-faq__img + .p-faq__img {
margin-top: clamp(15px, 2vw, 30px);
}
.p-faq__img img {
width: 100%;
height: auto;
cursor: zoom-in;
transition: opacity .3s;
}
@media screen and (max-width: 991.98px) {
.p-faq__img img {
max-width: 600px;
}
}
.p-faq__img img:hover {
opacity: .7;
}
.p-faq__notice-title {
margin-bottom: 1.2em;
color: var(--color-main-hover);
text-align: center;
letter-spacing: .05em;
font-weight: 500;
font-size: clamp(1.063rem, .192vw + 1.019rem, 1.25rem);
line-height: 1.6;
}
.p-faq__notice-txt strong {
color: var(--color-red);
font-weight: 400;
}
/* Railway history
--------------------------------------------------------- */
.p-railway__inner {
width: min(92%, 1230px);
margin-right: auto;
margin-left: auto;
}
/* 私たちについて
--------------------------------------------------------- */
.p-company {
position: relative;
z-index: 1;
margin-bottom: clamp(40px, 5.7vw, 90px);
padding-top: clamp(50px, 6.1vw, 90px);
padding-bottom: min(40vw, 550px);
}
.p-company::after {
position: absolute;
right: 0;
bottom: 0;
left: 0;
width: min(96vw, 1300px);
margin: auto;
background: url('../images/company/bg-company.png') center/100% 100% no-repeat;
content: '';
aspect-ratio: 1774/679;
}
.p-company__inner {
width: min(92%, 1230px);
margin-right: auto;
margin-left: auto;
}
@media print, screen and (min-width: 768px) {
.p-company .c-heading {
margin-bottom: 4em;
}
}
.p-company .c-heading__title {
margin-top: .4em;
}
.p-company__copy {
margin-bottom: 1.2em;
color: var(--color-txt);
font-weight: 500;
font-size: clamp(1.063rem, .449vw + .962rem, 1.5rem);
font-family: var(--font-family-secondary);
line-height: 1.6;
}
@media print, screen and (min-width: 768px) {
.p-company__copy {
text-align: center;
}
}
.p-company__txt {
font-size: clamp(1rem, .128vw + .971rem, 1.125rem);
}
@media print, screen and (min-width: 992px) {
.p-company__txt {
text-align: center;
}
}
.p-company__txt p + p {
margin-top: 1.5em;
}
/* 会社概要
--------------------------------------------------------- */
.p-outline {
padding-top: clamp(50px, 6.6vw, 100px);
padding-bottom: clamp(50px, 6.6vw, 100px);
background-color: var(--color-base);
}
.p-outline__inner {
width: min(92%, 1230px);
margin-right: auto;
margin-left: auto;
}
/* アクセス
--------------------------------------------------------- */
.p-access {
margin-top: clamp(70px, 9.2vw, 140px);
}
.p-access__inner {
width: min(92%, 1230px);
margin-right: auto;
margin-left: auto;
}
.p-access__info {
margin-bottom: 1.5em;
}
/* ========================================================================
/*
/* Utility
/*
========================================================================= */
/* typography
--------------------------------------------------------- */
.u-kome {
position: relative;
padding-left: 1.2em;
}
.u-kome.--inline {
display: inline-block;
}
.u-kome.--red::before {
color: var(--color-red);
}
.u-kome::before {
position: absolute;
left: 0;
content: '※';
}
.u-text-center {
text-align: center;
}
.u-important {
color: var(--color-red);
}
.u-palt {
font-feature-settings: 'palt';
}
@media print, screen and (min-width: 768px) {
.u-split {
display: flex;
}
}
@media print, screen and (min-width: 768px) {
.u-split__item + .u-split__item::before {
margin-right: .5em;
margin-left: .5em;
content: '/';
}
}
/* ------------------------------------------------------------------------
/* 印刷用
------------------------------------------------------------------------- */
@media print {
html {
font-size: 10px !important;
}
}
@page {
margin: 8mm;
size: A4 portrait;
}