@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;
}
}
[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:hover img,
.thumb a:active img,
.thumb a:focus img {
opacity: .7;
transition: .2s;
}
@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 {
box-sizing: border-box;
touch-action: manipulation;
--corner: url('data:image/svg+xml;utf-8,');
--icon-phone: url('data:image/svg+xml;utf-8,');
--icon-fax: url('data:image/svg+xml;utf-8,');
--icon-mail: url('data:image/svg+xml;utf-8,');
--icon-map: url('data:image/svg+xml;utf-8,');
--arrow: url('data:image/svg+xml;utf-8,');
}
body {
color: #1a1a1a;
letter-spacing: .075em;
font-weight: 400;
font-family: 'Noto Sans JP', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
line-height: 2;
font-optical-sizing: auto;
}
a {
color: #175cc3;
text-decoration: none;
transition: color .2s;
}
a img {
transition: opacity .2s;
}
a:hover,
a:active,
a:focus {
color: #0a2958;
text-decoration: none;
}
@media print, screen and (min-width: 992px) {
a:hover img,
a:active img,
a:focus img {
opacity: .7;
}
}
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;
overflow-x: hidden;
min-height: 100vh;
}
@media screen and (max-width: 991.98px) {
.l-page-wrapper {
padding-top: clamp(45px, 7.8vw, 60px);
}
}
@media print, screen and (min-width: 992px) {
.l-page-wrapper {
padding-top: clamp(80px, 6vw, 100px);
}
}
@media print {
.l-page-wrapper {
padding-top: 0;
}
}
/* ヘッダー
--------------------------------------------------------- */
.l-header {
position: fixed;
top: 0;
z-index: 100;
width: 100%;
background-color: #fff;
opacity: 0;
transition: transform .5s, opacity .7s;
transform: translateY(-100%);
}
@media screen and (max-width: 991.98px) {
.l-header {
display: flex;
height: clamp(45px, 7.8vw, 60px);
padding-left: 2vw;
align-items: center;
}
}
@media print, screen and (min-width: 992px) {
.l-header {
display: grid;
height: clamp(80px, 6vw, 100px);
padding-left: clamp(5px, 1.3vw, 35px);
grid-template-columns: 1fr auto;
grid-template-areas: 'logo util';
align-items: center;
}
}
@media print {
.l-header {
position: static;
}
}
.l-header.is-show {
opacity: 1;
transform: translateY(0);
}
.l-header__logo {
font-size: 0;
}
@media print, screen and (min-width: 992px) {
.l-header__logo {
grid-area: logo;
}
}
.l-header__logo a {
text-decoration: none;
}
.l-header__logo a:hover img,
.l-header__logo a:active img,
.l-header__logo a:focus img {
opacity: 1;
}
.l-header__logo img {
width: auto;
height: clamp(32px, 3.5vw, 50px);
}
@media print, screen and (min-width: 992px) {
.l-header__util {
display: grid;
padding: 10px 15px 10px 10px;
border-top-left-radius: 3em;
border-bottom-left-radius: 3em;
background-color: #f7f8fa;
grid-area: util;
grid-template-columns: 1fr auto;
grid-template-areas: 'nav contact';
}
}
@media print, screen and (min-width: 992px) {
.l-header__nav {
grid-area: nav;
}
}
@media screen and (max-width: 991.98px) {
.l-header__contact {
display: none;
}
}
@media print, screen and (min-width: 992px) {
.l-header__contact {
position: relative;
display: flex;
margin-left: clamp(15px, 1.5vw, 30px);
grid-area: contact;
justify-content: flex-end;
align-items: center;
gap: clamp(15px, 1.3vw, 25px);
}
}
.l-header__tel {
position: relative;
font-family: 'Roboto', sans-serif;
}
@media print, screen and (min-width: 992px) {
.l-header__tel {
font-size: clamp(.875rem, .198vw + .752rem, 1rem);
}
}
.l-header__tel::before {
position: relative;
top: -.1em;
display: inline-block;
height: .9em;
margin-right: .3em;
background-color: #1a1a1a;
content: '';
vertical-align: middle;
aspect-ratio: 1;
-webkit-mask-image: var(--icon-phone);
mask-image: var(--icon-phone);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
@media print {
.l-header__tel::before {
-webkit-print-color-adjust: exact;
}
}
.l-header__btn a {
position: relative;
display: block;
padding: .5em clamp(15px, 1.2vw, 20px);
border-radius: 3em;
background-color: #175cc3;
color: #fff;
text-align: center;
font-weight: 400;
line-height: 1.2;
transition: background-color .2s, color .2s;
}
@media print, screen and (min-width: 992px) {
.l-header__btn a {
font-size: clamp(.75rem, .198vw + .627rem, .875rem);
}
}
.l-header__btn a::before {
position: relative;
top: -.1em;
display: inline-block;
height: .75em;
margin-right: .5em;
background-color: #fff;
content: '';
vertical-align: middle;
aspect-ratio: 35.5/25.5;
-webkit-mask-image: var(--icon-mail);
mask-image: var(--icon-mail);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
@media print {
.l-header__btn a::before {
-webkit-print-color-adjust: exact;
}
}
.l-header__btn a:hover,
.l-header__btn a:active,
.l-header__btn a:focus {
background-color: #0a2958;
}
/* コンテンツ
--------------------------------------------------------- */
.l-contents {
flex: 1 0 auto;
overflow: hidden;
padding-bottom: clamp(80px, 13.6vw, 160px);
}
.l-contents.--no-space-bottom {
padding-bottom: 0;
}
/* フッター
--------------------------------------------------------- */
.l-footer {
position: relative;
z-index: 1;
}
@media print {
.l-footer {
page-break-inside: avoid;
}
}
.l-footer__inner {
max-width: min(92vw, 1200px);
margin-right: auto;
margin-left: auto;
}
@media only screen and (max-width: 767.98px) {
.l-footer__inner {
padding-top: 50px;
padding-bottom: 10px;
}
}
@media print, screen and (min-width: 768px) {
.l-footer__inner {
display: grid;
padding-top: clamp(60px, 7.4vw, 100px);
padding-bottom: clamp(60px, 7.4vw, 100px);
column-gap: 4%;
grid-template-columns: 40% 1fr;
grid-template-areas: 'info util';
}
}
@media only screen and (max-width: 767.98px) {
.l-footer__info {
font-size: .9375rem;
}
}
@media print, screen and (min-width: 768px) {
.l-footer__info {
font-size: clamp(.75rem, .475vw + .522rem, .938rem);
grid-area: info;
}
}
.l-footer__logo {
margin-bottom: clamp(20px, 2.8vw, 30px);
letter-spacing: .1em;
font-weight: 500;
line-height: 1.4;
font-feature-settings: 'palt';
}
@media screen and (max-width: 991.98px) {
.l-footer__logo {
font-size: 1.5rem;
}
}
@media print, screen and (min-width: 992px) {
.l-footer__logo {
font-size: clamp(1.375rem, .794vw + .883rem, 1.875rem);
}
}
.l-footer__logo small {
display: block;
margin-left: .05em;
color: #979797;
font-weight: 400;
}
@media screen and (max-width: 991.98px) {
.l-footer__logo small {
font-size: .625rem;
}
}
@media print, screen and (min-width: 992px) {
.l-footer__logo small {
font-size: clamp(.75rem, .099vw + .688rem, .813rem);
}
}
.l-footer__address-map-icon {
position: relative;
top: -.2em;
margin-left: 5px;
}
.l-footer__address-map-icon a {
display: inline-block;
}
@media print, screen and (min-width: 768px) {
.l-footer__address-map-icon a:hover svg .st0 {
fill: #0a2958;
}
}
.l-footer__address-map-icon svg {
width: clamp(15px, 1.8vw, 16px);
height: auto;
}
.l-footer__address-map-icon svg .st0 {
transition: fill .3s;
fill: #175cc3;
}
@media print, screen and (min-width: 992px) {
.l-footer__contact {
display: flex;
}
}
@media print, screen and (min-width: 992px) {
.l-footer__num + .l-footer__num::before {
margin-right: .5em;
margin-left: .5em;
content: '/';
}
}
.l-footer__num a {
text-decoration: none;
}
.l-footer__num a [data-action=call] {
color: #1a1a1a;
}
@media print, screen and (min-width: 768px) {
.l-footer__util {
display: flex;
flex-direction: column;
grid-area: util;
}
}
@media only screen and (max-width: 767.98px) {
.l-footer__nav {
margin-top: 50px;
}
}
.l-footer__copyright {
color: #727b7d;
letter-spacing: .05em;
font-size: .75rem;
}
@media only screen and (max-width: 767.98px) {
.l-footer__copyright {
margin-top: 60px;
text-align: center;
}
}
@media print, screen and (min-width: 768px) {
.l-footer__copyright {
margin-top: auto;
text-align: right;
}
}
/* ========================================================================
/*
/* Component
/*
========================================================================= */
/* ドロワー
--------------------------------------------------------- */
.drawer__btn {
position: absolute;
top: 0;
right: 0;
z-index: 1000;
width: clamp(45px, 7.8vw, 60px);
height: clamp(45px, 7.8vw, 60px);
outline: none !important;
background: #175cc3;
transition: background-color .5s;
-webkit-user-select: none;
user-select: none;
}
@media print, screen and (min-width: 992px) {
.drawer__btn {
display: none;
}
}
.is-drawer-open .drawer__btn {
background-color: transparent;
}
.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: 991.98px) {
.drawer__bg {
position: fixed;
top: 0;
left: 100%;
z-index: 500;
overflow-x: hidden;
width: min(80vw, 450px);
height: 100vh;
background-color: #f7f8fa;
transition: .5s cubic-bezier(.645, .045, .355, 1);
pointer-events: none;
}
}
@media screen and (max-width: 991.98px) {
.drawer__bg::-webkit-scrollbar {
display: none;
}
}
@media screen and (max-width: 991.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: 991.98px) {
.drawer__inner {
visibility: hidden;
padding: 90px 4vw 140px;
opacity: 0;
transition: .5s cubic-bezier(.645, .045, .355, 1) .25s;
transform: translateX(30px);
}
}
@media screen and (max-width: 991.98px) {
.is-drawer-open .drawer__inner {
visibility: visible;
opacity: 1;
transform: none;
}
}
@media screen and (max-width: 991.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: 991.98px) {
.is-drawer-open .drawer__overlay {
visibility: visible;
background: rgba(0, 0, 0, .3);
opacity: 1;
pointer-events: auto;
}
}
@media print, screen and (min-width: 992px) {
.drawer__contact {
display: none;
}
}
.drawer__contact-tel {
position: relative;
margin-top: 40px;
text-align: center;
font-weight: 350;
font-size: 1.75rem;
font-family: 'Roboto', sans-serif;
}
.drawer__contact-tel::before {
position: relative;
top: -.1em;
display: inline-block;
height: .8em;
margin-right: .3em;
background-color: #1a1a1a;
content: '';
vertical-align: middle;
aspect-ratio: 1;
-webkit-mask-image: var(--icon-phone);
mask-image: var(--icon-phone);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
@media print {
.drawer__contact-tel::before {
-webkit-print-color-adjust: exact;
}
}
.drawer__contact-tel a {
text-decoration: none;
}
.drawer__contact-tel a [data-action=call] {
color: #1a1a1a;
}
.drawer__contact-btn {
margin-top: .5em;
}
.drawer__contact-btn a {
position: relative;
display: block;
padding: .9em .5em;
border-radius: 3em;
background-color: #175cc3;
color: #fff;
text-align: center;
font-weight: 350;
font-size: 1.0625rem;
line-height: 1.2;
}
.drawer__contact-btn a::before {
position: relative;
top: -.1em;
display: inline-block;
height: .8em;
margin-right: .5em;
background-color: #fff;
content: '';
vertical-align: middle;
aspect-ratio: 35.5/25.5;
-webkit-mask-image: var(--icon-mail);
mask-image: var(--icon-mail);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
/* グローバルナビ
--------------------------------------------------------- */
@media print, screen and (min-width: 992px) {
.c-global-nav__items {
display: flex;
justify-content: flex-end;
gap: clamp(7px, .6vw, 10px);
}
}
@media screen and (max-width: 991.98px) {
.c-global-nav__item + .c-global-nav__item {
margin-top: 15px;
}
}
.c-global-nav__item > a {
position: relative;
border-radius: 3em;
background-color: #fff;
color: #1a1a1a;
text-decoration: none;
transition: background-color .2s;
}
@media screen and (max-width: 991.98px) {
.c-global-nav__item > a {
display: flex;
flex-direction: row-reverse;
padding: .8em 1.2em;
justify-content: space-between;
align-items: flex-end;
}
}
@media print, screen and (min-width: 992px) {
.c-global-nav__item > a {
display: block;
overflow: hidden;
width: clamp(107px, 8.6vw, 150px);
height: 2em;
text-align: center;
font-size: clamp(.75rem, .298vw + .565rem, .938rem);
}
}
@media print, screen and (min-width: 992px) {
.c-global-nav__item > a:hover,
.c-global-nav__item > a:focus {
background-color: #0a2958;
}
}
@media print, screen and (min-width: 992px) {
.c-global-nav__item > a:hover .c-global-nav__txt.--en,
.c-global-nav__item > a:focus .c-global-nav__txt.--en {
top: 100%;
}
}
@media print, screen and (min-width: 992px) {
.c-global-nav__item > a:hover .c-global-nav__txt.--jp,
.c-global-nav__item > a:focus .c-global-nav__txt.--jp {
top: 0;
}
}
.c-global-nav__item.is-current > a {
background-color: #0a2958;
}
@media screen and (max-width: 991.98px) {
.c-global-nav__item.is-current > a {
color: #fff;
}
}
@media only screen and (max-width: 767.98px) {
.c-global-nav__item.is-current .c-global-nav__txt.--en {
color: #6b8cbf;
}
}
@media print, screen and (min-width: 992px) {
.c-global-nav__item.is-current .c-global-nav__txt.--en {
top: 100%;
}
}
@media print, screen and (min-width: 992px) {
.c-global-nav__item.is-current .c-global-nav__txt.--jp {
top: 0;
}
}
.c-global-nav__txt {
letter-spacing: .05em;
line-height: 1.5;
}
@media print, screen and (min-width: 992px) {
.c-global-nav__txt {
position: absolute;
left: 0;
display: flex;
width: 100%;
height: 100%;
transition: all .3s;
align-items: center;
justify-content: center;
}
}
.c-global-nav__txt.--en {
font-weight: 400;
font-family: 'Roboto', sans-serif;
}
@media screen and (max-width: 991.98px) {
.c-global-nav__txt.--en {
color: #d5d5d6;
font-size: .6875rem;
}
}
@media print, screen and (min-width: 992px) {
.c-global-nav__txt.--en {
top: 0;
}
}
.c-global-nav__txt.--jp {
font-weight: 350;
}
@media screen and (max-width: 991.98px) {
.c-global-nav__txt.--jp {
font-size: 1rem;
}
}
@media print, screen and (min-width: 992px) {
.c-global-nav__txt.--jp {
top: -100%;
color: #fff;
}
}
/* フッターナビ
--------------------------------------------------------- */
@media only screen and (max-width: 767.98px) {
.c-footer-nav__items {
overflow: hidden;
border: 1px solid #e3e5ea;
border-radius: 6px;
}
}
@media print, screen and (min-width: 768px) {
.c-footer-nav__items {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: clamp(20px, 2.2vw, 40px);
}
}
@media only screen and (max-width: 767.98px) {
.c-footer-nav__item + .c-footer-nav__item a {
border-top: 1px solid #e3e5ea;
}
}
.c-footer-nav__item a {
position: relative;
color: #1a1a1a;
line-height: 1.6;
}
@media only screen and (max-width: 767.98px) {
.c-footer-nav__item a {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
padding: .7em 1.8em .7em 1em;
background-color: #f7f8fa;
text-decoration: none;
font-size: .9375rem;
justify-content: center;
}
}
@media print, screen and (min-width: 768px) {
.c-footer-nav__item a {
font-size: clamp(.75rem, .288vw + .685rem, .938rem);
}
}
@media only screen and (max-width: 767.98px) {
.c-footer-nav__item a::before {
position: absolute;
top: 0;
right: .8em;
bottom: 0;
display: flex;
color: #d5d5d6;
content: '\f054';
font-weight: 900;
font-size: 80%;
font-family: 'Font Awesome 6 Free';
line-height: 1;
align-items: center;
}
}
/* コンテナ
--------------------------------------------------------- */
.c-container {
max-width: min(92vw, 1200px);
margin-right: auto;
margin-left: auto;
}
/* セクション
--------------------------------------------------------- */
.c-section {
margin-top: clamp(80px, 9.7vw, 150px);
}
.c-section:first-child {
margin-top: 0;
}
.bg-01__item,
.bg-01__item .bg-01__inner {
position: relative;
}
.bg-01__item::before,
.bg-01__item .bg-01__inner::before {
position: absolute;
top: 0;
z-index: -1;
height: 100%;
background-color: #fcc;
content: '';
}
@media print, screen and (min-width: 768px) {
.bg-01__item::before {
width: 50vw;
}
}
.bg-01__item + .bg-01__item {
margin-top: clamp(50px, 7.4vw, 80px);
}
.bg-01__item:nth-of-type(odd)::before,
.bg-01__item:nth-of-type(odd) .bg-01__inner::before {
left: 0;
}
@media print, screen and (min-width: 768px) {
.bg-01__item:nth-of-type(odd) .bg-01__inner {
grid-template-columns: 1fr auto;
}
}
@media print, screen and (min-width: 768px) {
.bg-01__item:nth-of-type(odd) .bg-01__content {
grid-column: 1;
}
}
@media print, screen and (min-width: 768px) {
.bg-01__item:nth-of-type(odd) .bg-01__img {
grid-column: 2;
}
}
.bg-01__item:nth-of-type(even)::before,
.bg-01__item:nth-of-type(even) .bg-01__inner::before {
right: 0;
}
@media print, screen and (min-width: 768px) {
.bg-01__item:nth-of-type(even) .bg-01__inner {
grid-template-columns: auto 1fr;
}
}
@media print, screen and (min-width: 768px) {
.bg-01__item:nth-of-type(even) .bg-01__content {
margin-left: auto;
grid-column: 2;
}
}
@media print, screen and (min-width: 768px) {
.bg-01__item:nth-of-type(even) .bg-01__img {
grid-column: 1;
}
}
@media only screen and (max-width: 767.98px) {
.bg-01__inner {
padding: 30px 15px;
}
}
@media print, screen and (min-width: 768px) {
.bg-01__inner {
display: grid;
width: min(92%, 1200px);
margin-right: auto;
margin-left: auto;
padding-top: clamp(40px, 4.6vw, 60px);
padding-bottom: clamp(40px, 4.6vw, 60px);
}
}
@media only screen and (max-width: 767.98px) {
.bg-01__inner::before {
width: 70%;
}
}
@media print, screen and (min-width: 768px) {
.bg-01__inner::before {
width: 95%;
}
}
@media print, screen and (min-width: 768px) {
.bg-01__content {
width: 100%;
max-width: 90%;
line-height: 2.2;
grid-row: 1;
}
}
.bg-01__img {
text-align: center;
}
@media only screen and (max-width: 767.98px) {
.bg-01__img {
margin-top: 30px;
}
}
@media print, screen and (min-width: 768px) {
.bg-01__img {
grid-row: 1;
}
}
.bg-01__img img {
width: 100%;
object-fit: cover;
}
@media only screen and (max-width: 767.98px) {
.bg-01__img img {
height: 70vw;
}
}
@media print, screen and (min-width: 768px) {
.bg-01__img img {
width: 250px;
height: 200px;
}
}
@media print, screen and (min-width: 992px) {
.bg-01__img img {
width: 300px;
height: 250px;
}
}
@media screen and (min-width: 1200px) {
.bg-01__img img {
width: 350px;
height: 300px;
}
}
@media screen and (min-width: 1400px) {
.bg-01__img img {
width: 430px;
height: 350px;
}
}
.bg-02 {
position: relative;
z-index: 1;
}
@media only screen and (max-width: 767.98px) {
.bg-02 {
padding-top: 40px;
}
}
@media print, screen and (min-width: 768px) {
.bg-02 {
padding-bottom: clamp(40px, 5.7vw, 60px);
}
}
.bg-02::before {
position: absolute;
top: 0;
left: 0;
z-index: -1;
background: url(../images/common/sample.jpg) right center/cover no-repeat;
content: '';
}
@media only screen and (max-width: 767.98px) {
.bg-02::before {
width: 100%;
height: 80%;
}
}
@media print, screen and (min-width: 768px) {
.bg-02::before {
width: 70%;
height: clamp(400px, 46.1vw, 600px);
}
}
.bg-02__inner {
position: relative;
}
@media only screen and (max-width: 767.98px) {
.bg-02__inner {
padding-right: 4vw;
padding-left: 4vw;
}
}
@media print, screen and (min-width: 768px) {
.bg-02__inner {
display: flex;
width: min(92%, 1200px);
min-height: clamp(400px, 46.1vw, 600px);
margin-right: auto;
margin-left: auto;
align-items: center;
}
}
@media print, screen and (min-width: 768px) {
.bg-02__content {
width: 48%;
}
}
.bg-02__copy {
color: #fff;
text-shadow: rgba(0, 2, 7, .1) 1px 1px 10px, rgba(0, 2, 7, .1) -1px 1px 10px, rgba(0, 2, 7, .1) 1px -1px 10px, rgba(0, 2, 7, .1) -1px -1px 10px;
font-weight: bold;
line-height: 1.5;
}
@media only screen and (max-width: 767.98px) {
.bg-02__copy {
font-size: 1.25rem;
}
}
@media print, screen and (min-width: 768px) {
.bg-02__copy {
font-size: clamp(1.5rem, 2.057vw + .513rem, 2.313rem);
}
}
@media only screen and (max-width: 767.98px) {
.bg-02__img {
margin-top: 50px;
}
}
@media print, screen and (min-width: 768px) {
.bg-02__img {
position: absolute;
right: 0;
bottom: -40px;
width: 45%;
}
}
.bg-02__img img {
height: auto;
max-width: 100%;
}
.bg-04 {
position: relative;
z-index: 1;
}
@media only screen and (max-width: 767.98px) {
.bg-04 {
padding-top: 45vw;
}
}
.bg-04::before {
position: absolute;
top: 0;
z-index: -1;
background-image: url(../images/common/sample.jpg);
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
content: '';
}
@media only screen and (max-width: 767.98px) {
.bg-04::before {
left: 0;
width: 90%;
height: 50vw;
}
}
@media print, screen and (min-width: 768px) {
.bg-04::before {
right: 0;
width: 70%;
height: 100%;
}
}
.bg-04__inner {
width: min(92%, 1200px);
margin-right: auto;
margin-left: auto;
}
.bg-04__content {
background-color: #f7f7f7;
}
@media only screen and (max-width: 767.98px) {
.bg-04__content {
width: 95%;
margin-left: auto;
padding: 20px;
}
}
@media print, screen and (min-width: 768px) {
.bg-04__content {
position: relative;
top: clamp(30px, 4.2vw, 60px);
width: 60%;
margin-right: auto;
padding: clamp(30px, 3.7vw, 50px);
}
}
.bg-05 {
position: relative;
z-index: 1;
}
@media only screen and (max-width: 767.98px) {
.bg-05 {
padding-top: 45vw;
}
}
@media print, screen and (min-width: 768px) {
.bg-05 {
min-height: 40vw;
}
}
.bg-05::before {
position: absolute;
top: 0;
z-index: -1;
background-image: url(../images/common/sample.jpg);
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
content: '';
}
@media only screen and (max-width: 767.98px) {
.bg-05::before {
left: 0;
width: 90%;
height: 50vw;
}
}
@media print, screen and (min-width: 768px) {
.bg-05::before {
right: 0;
width: 70%;
height: 100%;
}
}
.bg-05__inner {
width: min(92%, 1200px);
margin-right: auto;
margin-left: auto;
}
.bg-05__content {
padding: clamp(20px, 4vw, 50px);
background-color: #f7f7f7;
}
@media only screen and (max-width: 767.98px) {
.bg-05__content {
width: 95%;
margin-left: auto;
}
}
@media print, screen and (min-width: 768px) {
.bg-05__content {
position: relative;
top: clamp(30px, 4.2vw, 60px);
width: 60%;
margin-right: auto;
}
}
@media print, screen and (min-width: 768px) {
.bg-06 {
display: flex;
justify-content: space-between;
}
}
@media print, screen and (min-width: 2000px) {
.bg-06 {
width: 2000px;
margin-right: auto;
margin-left: auto;
}
}
@media only screen and (max-width: 767.98px) {
.bg-06__img {
margin-top: 40px;
}
}
@media print, screen and (min-width: 768px) {
.bg-06__img {
width: 37%;
}
}
.bg-06__img img {
width: auto;
height: auto;
max-width: 100%;
}
.bg-06__content {
padding: clamp(20px, 4vw, 50px);
background-color: #f7f7f7;
}
@media print, screen and (min-width: 768px) {
.bg-06__content {
width: 60%;
}
}
.bg-07,
.bg-07b {
position: relative;
z-index: 1;
}
.bg-07::before,
.bg-07b::before {
position: absolute;
top: 0;
right: 0;
z-index: -1;
height: 100%;
background-color: #023972;
content: '';
}
@media only screen and (max-width: 767.98px) {
.bg-07::before,
.bg-07b::before {
width: 70%;
}
}
@media print, screen and (min-width: 768px) {
.bg-07::before,
.bg-07b::before {
width: calc(min(92%, 1200px) * .7 + (100% - min(92%, 1200px)) / 2);
}
}
@media only screen and (max-width: 767.98px) {
.bg-07__inner,
.bg-07b__inner {
padding: 50px 4vw;
}
}
@media print, screen and (min-width: 768px) {
.bg-07__inner,
.bg-07b__inner {
max-width: min(92%, 1200px);
margin-right: auto;
margin-left: auto;
padding-top: clamp(40px, 4.6vw, 60px);
padding-bottom: clamp(40px, 4.6vw, 60px);
}
}
.bg-07__content,
.bg-07b__content {
background-color: #f7f7f7;
}
@media only screen and (max-width: 767.98px) {
.bg-07__content,
.bg-07b__content {
padding: 7vw 4vw 9vw;
}
}
@media print, screen and (min-width: 768px) {
.bg-07__content,
.bg-07b__content {
width: 60%;
padding: clamp(40px, 4.6vw, 60px) clamp(50px, 6.5vw, 90px);
}
}
.bg-07b::before {
background-image: url(../images/common/sample.jpg);
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}
.bg-08 {
position: relative;
}
@media only screen and (max-width: 767.98px) {
.bg-08 {
padding-bottom: 80vw;
}
}
.bg-08::after {
position: absolute;
background-image: url(../images/common/sample.jpg);
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
content: '';
}
@media only screen and (max-width: 767.98px) {
.bg-08::after {
bottom: 0;
left: 0;
width: 100%;
height: 70vw;
}
}
@media print, screen and (min-width: 768px) {
.bg-08::after {
top: 0;
left: 0;
width: 32%;
height: 100%;
}
}
.bg-08__inner {
width: min(92%, 1200px);
margin-right: auto;
margin-left: auto;
}
.bg-08__content {
background-color: #fcc;
}
@media print, screen and (min-width: 768px) {
.bg-08__content {
margin-left: 34%;
padding-top: 15%;
padding-bottom: 15%;
}
}
.bg-09 {
position: relative;
z-index: 1;
}
@media only screen and (max-width: 767.98px) {
.bg-09 {
padding-top: 45vw;
}
}
@media print, screen and (min-width: 768px) {
.bg-09 {
padding-top: clamp(150px, 18.5vw, 250px);
}
}
.bg-09::before {
position: absolute;
top: 0;
left: 0;
z-index: -1;
background-image: url(../images/common/sample.jpg);
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
content: '';
}
@media only screen and (max-width: 767.98px) {
.bg-09::before {
width: 90%;
height: 50vw;
}
}
@media print, screen and (min-width: 768px) {
.bg-09::before {
width: 55%;
height: 70%;
}
}
.bg-09__inner {
margin-left: auto;
background-color: #175cc3;
color: #fff;
}
@media only screen and (max-width: 767.98px) {
.bg-09__inner {
width: 95%;
padding: 7vw 4vw 9vw;
}
}
@media print, screen and (min-width: 768px) {
.bg-09__inner {
position: relative;
width: 60%;
padding: clamp(30px, 3.2vw, 40px);
}
}
@media print, screen and (min-width: 768px) {
.bg-09__content {
max-width: 700px;
margin-right: auto;
padding: 30px;
background-color: rgba(255, 255, 255, .3);
}
}
.bg-10__item {
position: relative;
z-index: 1;
}
@media only screen and (max-width: 767.98px) {
.bg-10__item {
padding-top: 45vw;
}
}
@media print, screen and (min-width: 768px) {
.bg-10__item {
padding-top: clamp(150px, 18.5vw, 250px);
}
}
.bg-10__item::before {
position: absolute;
top: 0;
z-index: 1;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
content: '';
}
@media only screen and (max-width: 767.98px) {
.bg-10__item::before {
width: 90%;
height: 50vw;
}
}
@media print, screen and (min-width: 768px) {
.bg-10__item::before {
width: calc(min(92%, 1200px) * .5 + (100% - min(92%, 1200px)) / 2);
height: 90%;
}
}
.bg-10__item + .bg-10__item {
margin-top: clamp(60px, 9.1vw, 100px);
}
.bg-10__item.--primary::before {
left: 0;
border-top-right-radius: 1em;
border-bottom-right-radius: 1em;
background-image: url(../images/common/sample.jpg);
}
.bg-10__item.--primary .bg-10__inner {
margin-left: auto;
border-top-left-radius: 1em;
border-bottom-left-radius: 1em;
background-color: #f6fcd7;
}
@media print, screen and (min-width: 768px) {
.bg-10__item.--primary .bg-10__inner {
padding-right: calc((100% - min(92%, 1200px)) / 2);
padding-left: calc(min(92%, 1200px) * .5 + (100% - min(92%, 1200px)) / 2 - 40%);
}
}
@media print, screen and (min-width: 768px) {
.bg-10__item.--primary .bg-10__content {
padding-left: clamp(40px, 5.1vw, 70px);
}
}
.bg-10__item.--secondary::before {
right: 0;
border-top-left-radius: 1em;
border-bottom-left-radius: 1em;
background-image: url(../images/common/sample.jpg);
}
.bg-10__item.--secondary .bg-10__inner {
border-top-right-radius: 1em;
border-bottom-right-radius: 1em;
background-color: #fffad5;
}
@media print, screen and (min-width: 768px) {
.bg-10__item.--secondary .bg-10__inner {
padding-right: calc(min(92%, 1200px) * .5 + (100% - min(92%, 1200px)) / 2 - 40%);
padding-left: calc((100% - min(92%, 1200px)) / 2);
}
}
@media print, screen and (min-width: 768px) {
.bg-10__item.--secondary .bg-10__content {
padding-right: clamp(40px, 5.1vw, 70px);
}
}
.bg-10__inner {
position: relative;
z-index: -1;
}
@media only screen and (max-width: 767.98px) {
.bg-10__inner {
width: 95%;
padding-top: 7vw;
padding-right: 4vw;
padding-left: 4vw;
}
}
@media print, screen and (min-width: 768px) {
.bg-10__inner {
width: 60%;
}
}
@media only screen and (max-width: 767.98px) {
.bg-10__content {
padding: 7vw 4vw 9vw;
}
}
@media print, screen and (min-width: 768px) {
.bg-10__content {
padding-top: clamp(50px, 6.5vw, 90px);
padding-bottom: clamp(50px, 6.5vw, 90px);
}
}
.bg-11 {
position: relative;
z-index: 1;
}
.bg-11::before {
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: 1;
width: 50vw;
height: 50vw;
background-color: rgba(0, 0, 0, .3);
content: '';
-webkit-clip-path: polygon(0 0, 100% 0, 0 100%);
clip-path: polygon(0 0, 100% 0, 0 100%);
}
.bg-11 .block01 {
position: relative;
z-index: 1;
overflow: hidden;
background: url(../images/common/sample.jpg) center/cover no-repeat;
}
.bg-11 .block01::before {
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: -1;
width: 50vw;
height: 50vw;
background-color: #175cc3;
content: '';
-webkit-clip-path: polygon(0 0, 100% 0, 0 100%);
clip-path: polygon(0 0, 100% 0, 0 100%);
}
.bg-11 .block02 {
background: url(../images/common/sample.jpg) center/cover no-repeat;
}
@media print, screen and (min-width: 992px) {
.bg-12 {
position: relative;
z-index: 1;
}
}
.bg-12__header {
background-color: #175cc3;
}
@media print, screen and (min-width: 992px) {
.bg-12__header {
position: absolute;
top: 0;
left: 0;
z-index: 2;
display: flex;
flex-direction: column;
width: calc(min(92%, 1200px) * .2 + (100% - min(92%, 1200px)) / 2);
height: 100%;
padding-top: 100px;
padding-right: clamp(40px, 3.7vw, 70px);
align-items: flex-end;
}
}
.bg-12__title {
color: #fff;
}
@media screen and (max-width: 991.98px) {
.bg-12__title {
text-align: center;
font-size: clamp(1.25rem, .633vw + 1.108rem, 1.5rem);
}
}
@media print, screen and (min-width: 992px) {
.bg-12__title {
font-size: clamp(1.625rem, 1.389vw + .764rem, 2.5rem);
}
}
.bg-12__inner {
position: relative;
z-index: 1;
margin-left: auto;
}
@media print, screen and (min-width: 992px) {
.bg-12__inner {
width: calc(min(92%, 1200px) * .8 + (100% - min(92%, 1200px)) / 2);
padding-right: calc((100% - min(92%, 1200px)) / 2);
padding-left: clamp(40px, 4.6vw, 60px);
}
}
.bg-12__content {
background-color: #f7f8fa;
}
@media only screen and (max-width: 767.98px) {
.bg-12__content {
padding: 5vw 4vw 6vw;
}
}
@media print, screen and (min-width: 768px) {
.bg-12__content {
padding: clamp(40px, 4.6vw, 60px) clamp(50px, 6.5vw, 90px);
}
}
.bg-13 {
position: relative;
z-index: 1;
}
@media print, screen and (min-width: 768px) {
.bg-13::before {
position: absolute;
right: 0;
bottom: 0;
z-index: -1;
width: calc(100% - min(92%, 1200px) * .4 - (100% - min(92%, 1200px)) / 2);
height: 100%;
background-color: #1a1a1a;
content: '';
}
}
@media print, screen and (min-width: 768px) {
.bg-13__inner {
display: grid;
width: min(92%, 1200px);
margin-right: auto;
margin-left: auto;
grid-template-columns: 40% 1fr;
grid-template-areas: 'main sub';
}
}
@media only screen and (max-width: 767.98px) {
.bg-13__main {
padding-right: 4vw;
padding-left: 4vw;
}
}
@media print, screen and (min-width: 768px) {
.bg-13__main {
padding-top: 40px;
padding-right: 40px;
padding-bottom: 40px;
grid-area: main;
}
}
.bg-13__sub {
color: #fff;
}
@media only screen and (max-width: 767.98px) {
.bg-13__sub {
margin-top: 40px;
padding: 5vw 4vw 6vw;
background-color: #1a1a1a;
}
}
@media print, screen and (min-width: 768px) {
.bg-13__sub {
padding: 40px;
grid-area: sub;
}
}
/* ページタイトル
--------------------------------------------------------- */
.c-page-heading {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
height: clamp(120px, 18.2vw, 200px);
margin-bottom: clamp(40px, 6.8vw, 80px);
background-image: linear-gradient(-90deg, #77d2d5, #95acec, #b5a5e8);
text-align: center;
align-items: center;
justify-content: center;
}
@media screen and (max-width: 1199.98px) {
.c-page-heading {
padding: 8vw 4vw 7vw;
}
}
@media screen and (min-width: 1200px) {
.c-page-heading {
padding: clamp(50px, 4.4vw, 90px);
}
}
.c-page-heading.--contact {
margin-bottom: 0;
}
.c-page-heading__en,
.c-page-heading__title {
color: #fff;
}
.c-page-heading__en {
font-weight: 300;
font-size: clamp(2.25rem, 1.707vw + 1.866rem, 4rem);
font-family: 'Roboto', sans-serif;
line-height: 1.3;
}
.c-page-heading__title {
letter-spacing: .1em;
font-weight: 300;
font-size: clamp(.875rem, .385vw + .788rem, 1.125rem);
line-height: 1.5;
}
/* キャッチコピー
--------------------------------------------------------- */
.c-copy {
margin-bottom: 1.2em;
font-weight: 500;
font-size: clamp(1.063rem, .61vw + .925rem, 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.3em;
list-style-type: decimal;
}
.c-list.--inline {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(6em, 1fr));
gap: 4%;
}
/* テーブル
--------------------------------------------------------- */
.c-table {
width: 100%;
font-size: .9375rem;
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;
}
}
.c-table th,
.c-table td {
font-weight: 400;
}
.c-table thead th,
.c-table thead td {
padding: .4em 1.4em;
text-align: center;
}
.c-table tbody th,
.c-table tbody td {
padding: 1em 1.4em;
word-break: break-all;
}
@media only screen and (max-width: 767.98px) {
.c-table tbody th,
.c-table tbody td {
display: block;
width: 100%;
}
}
.c-table.--style-a thead {
border: 1px solid #175cc3;
}
.c-table.--style-a thead th {
background-color: #175cc3;
color: #fff;
}
.c-table.--style-a thead th:not(:last-of-type) {
border-right: 1px solid #124695;
}
.c-table.--style-a tbody {
border: 1px solid #e8eaeb;
}
.c-table.--style-a tbody tr {
border-bottom: 1px solid #e8eaeb;
}
@media print, screen and (min-width: 768px) {
.c-table.--style-a tbody th,
.c-table.--style-a tbody td {
padding: .8em 1.4em;
}
}
.c-table.--style-a tbody th {
background-color: #f7f8fa;
}
@media only screen and (max-width: 767.98px) {
.c-table.--style-a tbody th {
padding-top: .3em;
padding-bottom: .3em;
border-bottom: 1px solid #e8eaeb;
text-align: center;
}
}
@media print, screen and (min-width: 768px) {
.c-table.--style-a tbody th {
border-right: 1px solid #e8eaeb;
}
}
.c-table.--style-a tbody td {
background-color: #fff;
}
@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 #e8eaeb;
}
@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;
}
@media only screen and (max-width: 767.98px) {
.c-table.--style-b th {
padding-top: .4em;
padding-bottom: .4em;
border-bottom: 1px solid #e1e2e3;
background-color: #f7f8fa;
text-align: center;
}
}
@media print, screen and (min-width: 768px) {
.c-table.--style-b th {
border-bottom: 1px solid #0a2958;
}
}
@media only screen and (max-width: 767.98px) {
.c-table.--style-b td {
padding-top: 1.2em;
padding-bottom: 1.6em;
}
}
@media print, screen and (min-width: 768px) {
.c-table.--style-b td {
padding-left: 2em;
border-bottom: 1px solid #e3e5ea;
}
}
@media print, screen and (min-width: 768px) {
.c-table.--company tbody th {
width: 25%;
}
}
.c-table.--contact {
margin-top: clamp(30px, 4vw, 40px);
}
.c-table.--contact th,
.c-table.--contact td {
position: relative;
background-clip: padding-box;
}
@media only screen and (max-width: 767.98px) {
.c-table.--contact th,
.c-table.--contact td {
padding-right: .8em;
padding-left: .8em;
}
}
@media print, screen and (min-width: 768px) {
.c-table.--contact th,
.c-table.--contact td {
padding: 1.2em 1em;
}
}
.c-table.--contact th .c-badge,
.c-table.--contact td .c-badge {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
}
@media only screen and (max-width: 767.98px) {
.c-table.--contact th {
text-align: left;
}
}
@media print, screen and (min-width: 768px) {
.c-table.--contact th {
width: clamp(220px, 22.6vw, 270px);
}
}
@media only screen and (max-width: 767.98px) {
.c-table.--contact td {
display: block;
}
}
.c-table.--contact .head {
background-color: #fafafa;
font-weight: 400;
}
@media only screen and (max-width: 767.98px) {
.c-table.--contact .head {
padding-top: .3em;
padding-bottom: .3em;
}
}
@media print, screen and (min-width: 768px) {
.c-table.--contact .head {
width: clamp(160px, 16.6vw, 200px);
}
}
/* バッジ
--------------------------------------------------------- */
.c-badge {
padding: .1em .6em;
background-color: #db1515;
color: #fff;
font-weight: normal;
font-size: .625rem;
line-height: 1.4;
}
/* 主要な見出し
--------------------------------------------------------- */
.c-heading {
margin-bottom: clamp(25px, 3.6vw, 60px);
padding-bottom: clamp(10px, 2.1vw, 40px);
border-bottom: 1px solid #e3e5ea;
}
@media print, screen and (min-width: 768px) {
.c-heading {
display: flex;
align-items: flex-end;
gap: clamp(25px, 2.3vw, 40px);
}
}
.c-heading + * {
margin-top: 0 !important;
}
.c-heading__en {
color: #0a2958;
word-break: break-all;
font-weight: 100;
font-family: 'Roboto', sans-serif;
line-height: 1;
}
@media only screen and (max-width: 767.98px) {
.c-heading__en {
font-size: clamp(2.188rem, 8.578vw + .257rem, 4.375rem);
}
}
@media print, screen and (min-width: 768px) {
.c-heading__en {
font-size: clamp(4.375rem, 4.058vw + 2.427rem, 7.5rem);
}
}
.c-heading__title {
padding-bottom: .8em;
font-weight: 300;
font-size: clamp(.938rem, .305vw + .869rem, 1.25rem);
line-height: 1.4;
}
@media only screen and (max-width: 767.98px) {
.c-heading__title {
margin-top: .5em;
}
}
@media print, screen and (min-width: 992px) {
.c-heading.--achievement {
display: block;
padding-bottom: clamp(15px, 1.5vw, 30px);
}
}
@media print, screen and (min-width: 992px) {
.c-heading.--achievement .c-heading__en {
font-size: clamp(3.75rem, 5.655vw + .244rem, 7.313rem);
}
}
@media print, screen and (min-width: 992px) {
.c-heading.--achievement .c-heading__title {
margin-top: 1em;
}
}
/* バー
--------------------------------------------------------- */
.c-heading-bar {
margin-bottom: 1.6em;
padding-left: .8em;
border-left: clamp(3px, .4vw, 4px) solid #0a2958;
font-weight: bold;
font-size: clamp(1.063rem, .192vw + 1.019rem, 1.188rem);
line-height: 1.5;
}
@media only screen and (max-width: 767.98px) {
.c-heading-bar {
font-size: 1rem;
}
}
.c-heading-bar--half {
position: relative;
}
.c-heading-bar--half::before {
position: absolute;
left: -6px;
width: 6px;
height: 50%;
background-color: #3e82e8;
content: '';
}
/* 背景付
--------------------------------------------------------- */
.c-heading-bg {
position: relative;
margin-bottom: 1.8em;
padding: .6em 1.5em .6em 1.8em;
background-color: #175cc3;
color: #fff;
letter-spacing: 1px;
font-weight: 400;
font-size: clamp(1rem, .385vw + .913rem, 1.25rem);
line-height: 1.5;
}
.c-heading-bg::before {
position: absolute;
top: clamp(8px, 1.1vw, 12px);
bottom: clamp(8px, 1.1vw, 12px);
left: clamp(8px, 1.1vw, 12px);
width: clamp(3px, .5vw, 5px);
max-width: 100%;
max-height: 100%;
margin: auto;
background-color: #0a2958;
content: '';
}
/* ボーダー
--------------------------------------------------------- */
.c-heading-border {
margin-bottom: 1.2em;
padding-bottom: .5em;
border-bottom: 1px solid #e3e5ea;
font-weight: 300;
font-size: clamp(1.125rem, .854vw + .933rem, 2rem);
line-height: 1.4;
}
/* キービジュアル
--------------------------------------------------------- */
.c-key-visual {
position: relative;
z-index: 1;
overflow: hidden;
margin-bottom: clamp(40px, 6.4vw, 110px);
}
.c-key-visual.is-ready .c-key-visual__loading {
opacity: 0;
}
.c-key-visual__loading {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 4;
margin: auto;
background-color: #f7f8fa;
transition: opacity 2s;
}
.c-key-visual__loading-in {
position: absolute;
top: 50%;
left: 50%;
display: block;
width: 30px;
height: 30px;
transform: translate(-50%, -50%);
}
.c-key-visual__loading-in::after,
.c-key-visual__loading-in::before {
position: absolute;
top: 40%;
left: 50%;
display: block;
width: 100%;
height: 100%;
margin-left: -50%;
border-radius: 110%;
content: '';
}
.c-key-visual__loading-in::after {
border: 1px solid transparent;
border-top-color: #175cc3;
animation: loading .75s linear infinite;
}
.c-key-visual__loading-in::before {
border: 1px solid #d6d6d6;
}
@keyframes loading {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.c-key-visual__content {
position: absolute;
bottom: -1px;
left: 0;
z-index: 3;
display: flex;
margin: auto;
border-top-right-radius: clamp(10px, 1.3vw, 20px);
background-color: #fff;
align-items: center;
}
@media only screen and (max-width: 767.98px) {
.c-key-visual__content {
padding: 3vw 4vw 1vw;
}
}
@media print, screen and (min-width: 768px) {
.c-key-visual__content {
padding: clamp(30px, 3.3vw, 60px) clamp(50px, 5.1vw, 90px);
}
}
.c-key-visual__content::before {
position: absolute;
bottom: 1px;
left: 100%;
height: clamp(10px, 1.3vw, 20px);
background-color: #fff;
content: '';
aspect-ratio: 1;
-webkit-mask-image: var(--corner);
mask-image: var(--corner);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
@media print {
.c-key-visual__content::before {
-webkit-print-color-adjust: exact;
}
}
.c-key-visual__copy {
color: transparent;
font-weight: 300;
line-height: 1.5;
}
@media only screen and (max-width: 767.98px) {
.c-key-visual__copy {
font-size: 6vw;
}
}
@media print, screen and (min-width: 768px) {
.c-key-visual__copy {
font-size: clamp(2.188rem, 2.029vw + 1.213rem, 3.75rem);
}
}
.c-key-visual__copy span {
display: inline-block;
background-image: linear-gradient(90deg, #81a0f8, #73ced6, #81a0f8, #73ced6);
-webkit-background-clip: text;
background-clip: text;
background-size: 200% auto;
animation: bg-gradient 15s infinite;
}
@keyframes bg-gradient {
0% {
background-position: left center;
}
50% {
background-position: right center;
}
100% {
background-position: left center;
}
}
.c-key-visual .swiper-slide img {
width: 100%;
height: auto;
height: clamp(300px, 51.1vw, 600px);
font-size: 0;
object-fit: cover;
}
@media screen and (min-width: 1200px) {
.c-key-visual .swiper-slide img {
height: calc(100vh - clamp(80px, 6vw, 100px));
}
}
.c-key-visual .swiper-fade .swiper-slide {
transition-property: opacity, transform !important;
pointer-events: none;
}
.c-key-visual .swiper-fade .swiper-slide-active {
pointer-events: auto;
}
/* メディア
--------------------------------------------------------- */
.c-media {
background-color: #f7f8fa;
}
@media screen and (max-width: 1199.98px) {
.c-media {
padding: 8vw 4vw 9vw;
}
}
@media screen and (min-width: 1200px) {
.c-media {
display: grid;
margin-right: 30px;
margin-left: 30px;
padding: clamp(50px, 4.4vw, 90px);
border-radius: clamp(6px, .9vw, 10px);
column-gap: 5%;
grid-template-areas: 'img content';
grid-template-columns: 46% 1fr;
}
}
@media screen and (min-width: 1200px) {
.c-media.--rev {
grid-template-areas: 'content img';
grid-template-columns: 1fr 50%;
}
}
@media screen and (min-width: 1200px) {
.c-media__content {
padding-top: clamp(10px, 1.5vw, 30px);
grid-area: content;
}
}
.c-media__btn {
margin-top: clamp(50px, 5.1vw, 70px);
text-align: right;
}
@media screen and (max-width: 1199.98px) {
.c-media__img {
margin-top: clamp(50px, 8.3vw, 80px);
text-align: center;
}
}
@media screen and (min-width: 1200px) {
.c-media__img {
grid-area: img;
}
}
.c-media__img img {
border-radius: clamp(10px, 1.3vw, 20px);
}
@media screen and (max-width: 1199.98px) {
.c-media__img img {
width: 100%;
object-fit: cover;
aspect-ratio: 2/1;
}
}
@media screen and (min-width: 1200px) {
.c-media__img img {
height: auto;
max-width: 100%;
}
}
/* ボタン
--------------------------------------------------------- */
.c-btn {
position: relative;
z-index: 1;
display: inline-flex;
overflow: hidden;
outline: none !important;
border-radius: 3em;
background-color: #f5f5f5;
color: inherit;
text-align: center;
text-decoration: none;
font-size: inherit;
line-height: 1.5;
cursor: pointer;
transition: background-color .2s, color .2s;
justify-content: center;
align-items: center;
-webkit-appearance: none;
appearance: none;
}
.c-btn.--primary,
.c-btn.--secondary {
font-weight: 350;
}
@media only screen and (max-width: 767.98px) {
.c-btn.--primary,
.c-btn.--secondary {
padding: .7em 3em .7em 2em;
font-size: 1rem;
}
}
@media print, screen and (min-width: 768px) {
.c-btn.--primary,
.c-btn.--secondary {
padding: 1em 5em 1em 4.5em;
font-size: clamp(1rem, .081vw + .961rem, 1.063rem);
}
}
.c-btn.--primary::before,
.c-btn.--secondary::before {
position: absolute;
top: 0;
right: 1em;
bottom: 0;
height: .24em;
margin: auto;
content: '';
transition: .3s;
aspect-ratio: 38/7.68;
-webkit-mask-image: var(--arrow);
mask-image: var(--arrow);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
@media print {
.c-btn.--primary::before,
.c-btn.--secondary::before {
-webkit-print-color-adjust: exact;
}
}
.c-btn.--primary.--primary,
.c-btn.--secondary.--primary {
background-color: #175cc3;
color: #fff;
}
.c-btn.--primary.--primary::before,
.c-btn.--secondary.--primary::before {
background-color: #fff;
}
.c-btn.--primary.--primary:hover,
.c-btn.--primary.--primary:active,
.c-btn.--primary.--primary:focus,
.c-btn.--secondary.--primary:hover,
.c-btn.--secondary.--primary:active,
.c-btn.--secondary.--primary:focus {
background-color: #0a2958;
color: #fff;
}
.c-btn.--primary.--secondary,
.c-btn.--secondary.--secondary {
border: 1px solid #175cc3;
background-color: transparent;
color: #175cc3;
}
.c-btn.--primary.--secondary::before,
.c-btn.--secondary.--secondary::before {
background-color: #175cc3;
}
.c-btn.--primary.--secondary:hover,
.c-btn.--primary.--secondary:active,
.c-btn.--primary.--secondary:focus,
.c-btn.--secondary.--secondary:hover,
.c-btn.--secondary.--secondary:active,
.c-btn.--secondary.--secondary:focus {
background-color: #175cc3;
color: #fff;
}
.c-btn.--primary.--secondary:hover::before,
.c-btn.--primary.--secondary:active::before,
.c-btn.--primary.--secondary:focus::before,
.c-btn.--secondary.--secondary:hover::before,
.c-btn.--secondary.--secondary:active::before,
.c-btn.--secondary.--secondary:focus::before {
background-color: #fff;
}
.c-btn.--primary i,
.c-btn.--secondary i {
margin-right: .5em;
}
.c-btn.--primary:hover,
.c-btn.--primary:active,
.c-btn.--primary:focus,
.c-btn.--secondary:hover,
.c-btn.--secondary:active,
.c-btn.--secondary:focus {
text-decoration: none;
}
.c-btn.--primary:hover::before,
.c-btn.--primary:active::before,
.c-btn.--primary:focus::before,
.c-btn.--secondary:hover::before,
.c-btn.--secondary:active::before,
.c-btn.--secondary:focus::before {
transform: translateX(4px);
}
.c-btn.--back {
background-color: #aaa;
}
.c-btn.--back:hover,
.c-btn.--back:active,
.c-btn.--back:focus {
background-color: #858585;
}
.c-btn.--external::before {
display: none;
}
.c-btn.--external::after {
position: absolute;
top: 0;
right: 1em;
bottom: 0;
display: flex;
color: inherit;
content: '\f08e';
font-weight: 900;
font-size: 75%;
font-family: 'Font Awesome 6 Free';
line-height: 1;
align-items: center;
}
/* 電話番号リンク
--------------------------------------------------------- */
.c-tel-link a {
text-decoration: none;
}
.c-tel-link a [data-action=call] {
color: #1a1a1a;
}
/* ページトップ
--------------------------------------------------------- */
.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: 30px;
}
}
@media print, screen and (min-width: 768px) {
.c-pagetop img {
width: clamp(30px, 4.5vw, 50px);
}
}
@media only screen and (max-width: 767.98px) {
.c-form select,
.c-form input[type=file] {
width: 100%;
}
}
.c-form .required input[type=text],
.c-form .required input[type=email],
.c-form .required input[type=password],
.c-form .required select,
.c-form .required textarea {
background-color: #fef1f1;
}
.c-form .item-xs {
display: inline-block;
width: 75px;
}
.c-form .item-ss {
display: inline-block;
width: 110px;
}
.c-form .item-s {
display: inline-block;
width: 130px;
}
@media print, screen and (min-width: 768px) {
.c-form .item-m {
display: inline-block;
width: 250px;
}
}
@media print, screen and (min-width: 992px) {
.c-form .item-m {
width: 300px;
}
}
@media print, screen and (min-width: 992px) {
.c-form .item-l {
display: inline-block;
width: 450px;
}
}
.c-form__word {
color: #989898;
font-size: clamp(.75rem, .192vw + .707rem, .875rem);
}
:has(+ .c-form__word) {
margin-right: .5em;
}
.c-form__word + * {
margin-left: .5em;
}
.c-form__btn {
display: flex;
margin-top: clamp(45px, 6.5vw, 70px);
justify-content: center;
gap: clamp(15px, 2.3vw, 25px);
}
/* 埋め込みコンポーネント
--------------------------------------------------------- */
.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: 4/3;
}
}
@media print, screen and (min-width: 768px) {
.c-embed.--gmap iframe {
aspect-ratio: 16/9;
}
}
.c-embed.--youtube iframe {
aspect-ratio: 16/9;
}
.c-embed.--video01 {
max-width: 360px;
margin-right: auto;
margin-left: auto;
}
.c-embed.--video01 video {
aspect-ratio: 9/16;
}
/* ラインアニメーション
--------------------------------------------------------- */
.c-line-anime {
width: 100%;
fill: none;
stroke: #e4eaf3;
stroke-dashoffset: 1000px;
stroke-dasharray: 1000px;
stroke-width: .3px;
}
.c-line-anime.is-active {
animation: svg-anime 10s .7s linear forwards;
}
@keyframes svg-anime {
100% {
stroke-dashoffset: 0;
}
}
/* GSAP
--------------------------------------------------------- */
.js-scroll-show {
opacity: 0;
}
/* ページング
--------------------------------------------------------- */
.paging {
display: flex;
margin-top: clamp(70px, 10.8vw, 120px);
flex-wrap: wrap;
justify-content: center;
gap: 4px;
}
.paging .current {
padding: .6em 1em;
border-color: #175cc3;
background-color: #175cc3;
color: #fff;
}
.paging-text {
display: block;
border: 1px solid #f0f0f0;
letter-spacing: 0;
font-size: clamp(.813rem, .385vw + .726rem, 1.063rem);
font-family: Arial, Helvetica, sans-serif;
line-height: 1.4;
cursor: pointer;
}
.paging-text a {
display: block;
padding: .6em 1em;
color: #1a1a1a;
text-decoration: none;
transition: background-color .2s, color .2s;
}
.paging-text a:hover,
.paging-text a:active,
.paging-text a:focus {
background-color: #f5f5f5;
}
/* ========================================================================
/*
/* Project
/*
========================================================================= */
/* TOP ABOUT
--------------------------------------------------------- */
.p-top-about {
position: relative;
z-index: 1;
}
.p-top-about__summary {
width: min(92%, 1200px);
margin-top: clamp(50px, 7.2vw, 120px);
margin-right: auto;
margin-left: auto;
border-radius: clamp(10px, 1.3vw, 20px);
background-image: linear-gradient(-90deg, #77d2d5, #95acec, #b5a5e8);
color: #fff;
}
@media only screen and (max-width: 767.98px) {
.p-top-about__summary {
padding: 7vw 4vw 9vw;
}
}
@media print, screen and (min-width: 768px) {
.p-top-about__summary {
padding: clamp(30px, 2.9vw, 50px) clamp(50px, 4.3vw, 70px);
}
}
.p-top-about__deco {
position: absolute;
top: 100%;
z-index: -1;
}
@media only screen and (max-width: 767.98px) {
.p-top-about__deco {
right: 1vw;
width: 28vw;
}
}
@media print, screen and (min-width: 768px) {
.p-top-about__deco {
right: 3vw;
width: clamp(120px, 15.2vw, 300px);
}
}
/* TOP NEWS
--------------------------------------------------------- */
.p-top-news {
margin-top: clamp(80px, 11vw, 180px);
}
.p-top-news__inner {
width: min(92%, 1200px);
margin-right: auto;
margin-left: auto;
}
.p-top-news__nav {
margin-bottom: clamp(30px, 4.5vw, 50px);
}
.p-top-news__nav-header {
position: relative;
padding: .6em 1em;
background-color: #175cc3;
color: #fff;
text-align: center;
-webkit-user-select: none;
user-select: none;
}
@media screen and (max-width: 991.98px) {
.p-top-news__nav-header {
margin-bottom: 10px;
font-size: 1rem;
cursor: pointer;
}
}
@media print, screen and (min-width: 992px) {
.p-top-news__nav-header {
display: none;
}
}
@media screen and (max-width: 991.98px) {
.p-top-news__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-top-news__nav-header::after {
position: absolute;
top: 0;
right: .7em;
bottom: 0;
display: flex;
color: rgba(255, 255, 255, .5);
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-top-news__nav-header.is-open::after {
content: '\f068';
}
}
@media screen and (max-width: 991.98px) {
.p-top-news__nav-inner {
display: none;
}
}
@media print, screen and (min-width: 992px) {
.p-top-news__nav-inner {
display: block !important;
}
}
.p-top-news__nav-lists {
display: grid;
}
@media screen and (max-width: 991.98px) {
.p-top-news__nav-lists {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
}
@media print, screen and (min-width: 992px) {
.p-top-news__nav-lists {
grid-template-columns: repeat(4, 1fr);
gap: clamp(10px, 1.1vw, 20px) clamp(10px, 1.1vw, 20px);
}
}
@media screen and (min-width: 1400px) {
.p-top-news__nav-lists {
grid-template-columns: repeat(5, 1fr);
}
}
.p-top-news__nav li {
position: relative;
}
.p-top-news__nav li a {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
padding: .8em 1em;
background-color: #0a2958;
color: #fff;
text-decoration: none;
font-weight: 400;
line-height: 1.4;
filter: drop-shadow(0 5px 0 transparent);
transition: .3s;
justify-content: center;
align-items: center;
}
@media screen and (max-width: 991.98px) {
.p-top-news__nav li a {
font-size: .875rem;
}
}
@media print, screen and (min-width: 992px) {
.p-top-news__nav li a {
font-size: clamp(.875rem, .397vw + .629rem, 1.125rem);
}
}
.p-top-news__nav li a:hover {
filter: drop-shadow(0 5px 0 #cad0d7);
}
.p-top-news__nav li a.is-active {
filter: drop-shadow(0 5px 0 #cad0d7);
}
.p-top-news__item {
overflow-y: auto;
width: 100%;
max-height: 360px;
padding-right: 10px;
}
.p-top-news__item::-webkit-scrollbar {
width: 10px;
}
.p-top-news__item::-webkit-scrollbar-track {
border-radius: 10px;
background-color: #f2f3f5;
}
.p-top-news__item::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: #0a2958;
}
.p-top-news__table {
width: 100%;
}
.p-top-news__table tr {
border-bottom: 1px solid #eeeff1;
}
@media screen and (max-width: 991.98px) {
.p-top-news__table tr:first-of-type th {
padding-top: 0;
}
}
.p-top-news__table th,
.p-top-news__table td {
position: relative;
vertical-align: top;
font-weight: 400;
line-height: 1.7;
}
@media screen and (max-width: 991.98px) {
.p-top-news__table th,
.p-top-news__table td {
display: block;
width: 100%;
font-size: 1rem;
}
}
@media print, screen and (min-width: 992px) {
.p-top-news__table th,
.p-top-news__table td {
padding-top: 1.5em;
padding-bottom: 1.5em;
}
}
@media screen and (max-width: 991.98px) {
.p-top-news__table th {
padding-top: 1.5em;
padding-bottom: .6em;
font-weight: 600;
}
}
@media print, screen and (min-width: 992px) {
.p-top-news__table th {
width: 25%;
padding-right: 20px;
}
}
.p-top-news__table td {
width: 100%;
}
@media screen and (max-width: 991.98px) {
.p-top-news__table td {
padding-bottom: 1.5em;
}
}
.p-top-news__table td a {
text-decoration: underline;
}
.p-top-news__head {
display: flex;
align-items: center;
}
@media screen and (max-width: 991.98px) {
.p-top-news__head {
gap: 15px;
}
}
@media print, screen and (min-width: 992px) {
.p-top-news__head {
justify-content: space-between;
}
}
.p-top-news__head .icon-new {
color: #db1515;
font-weight: 300;
font-family: 'Roboto', sans-serif;
line-height: 1.5;
}
@media screen and (max-width: 991.98px) {
.p-top-news__head .icon-new {
margin-right: 1em;
font-size: .75rem;
}
}
@media print, screen and (min-width: 992px) {
.p-top-news__head .icon-new {
font-size: clamp(.875rem, .5vw + .5rem, .938rem);
}
}
.p-top-news__icon-file {
margin-left: .5em;
}
.p-top-news__icon-file a {
color: #db1515;
}
.p-top-news__btn {
margin-top: clamp(40px, 5.7vw, 60px);
text-align: center;
}
/* TOP WORKS
--------------------------------------------------------- */
.p-top-works {
position: relative;
z-index: 1;
margin-top: clamp(80px, 11vw, 180px);
}
.p-top-works__bnrs {
width: min(92%, 1800px);
margin-top: clamp(60px, 8.5vw, 140px);
margin-right: auto;
margin-left: auto;
}
@media print, screen and (min-width: 768px) {
.p-top-works__bnrs {
display: grid;
column-gap: clamp(20px, 2.5vw, 50px);
grid-template-columns: repeat(3, 1fr);
}
}
.p-top-works__bnr {
position: relative;
color: #fff;
}
@media only screen and (max-width: 767.98px) {
.p-top-works__bnr + .p-top-works__bnr {
margin-top: 80px;
}
}
.p-top-works__bnr-img {
position: relative;
overflow: hidden;
opacity: 1;
transition: transform .3s;
}
@media only screen and (max-width: 767.98px) {
.p-top-works__bnr-img {
text-align: center;
}
}
.p-top-works__bnr-img::before {
position: absolute;
top: -100px;
left: 0;
display: block;
width: 30px;
height: 100%;
background-color: #fff;
content: '';
opacity: 0;
transition: cubic-bezier(.32, 0, .67, 0);
}
.p-top-works__bnr-img img {
width: 100%;
height: auto;
border-radius: clamp(10px, 1.3vw, 20px);
}
.p-top-works__bnr-label {
position: absolute;
right: 0;
bottom: 0;
left: 0;
}
.p-top-works__bnr-label span {
position: relative;
z-index: 1;
display: block;
overflow: hidden;
width: 80%;
margin-right: auto;
margin-left: auto;
padding: 1em .8em;
border-radius: clamp(6px, .7vw, 10px);
background-image: linear-gradient(-90deg, #77d2d5, #95acec, #b5a5e8);
text-align: center;
line-height: 1.5;
transform: translateY(50%);
}
@media only screen and (max-width: 767.98px) {
.p-top-works__bnr-label span {
font-size: 1rem;
}
}
@media print, screen and (min-width: 768px) {
.p-top-works__bnr-label span {
font-size: clamp(.813rem, .406vw + .618rem, 1.125rem);
}
}
.p-top-works__btn {
margin-top: clamp(80px, 9.3vw, 140px);
text-align: center;
}
.p-top-works__deco {
position: absolute;
z-index: -1;
}
@media only screen and (max-width: 767.98px) {
.p-top-works__deco {
top: calc(100% - 15vw);
left: 1vw;
width: 30vw;
}
}
@media print, screen and (min-width: 768px) {
.p-top-works__deco {
top: calc(100% - clamp(90px, 7.9vw, 130px));
left: 3vw;
width: clamp(160px, 15.2vw, 260px);
}
}
/* TOP ACHIEVEMENT
--------------------------------------------------------- */
.p-top-achievement {
position: relative;
z-index: 1;
margin-top: clamp(80px, 11vw, 180px);
}
/* WORKS
--------------------------------------------------------- */
.p-works__lead {
width: min(92%, 1200px);
margin-right: auto;
margin-left: auto;
}
.p-works__items {
margin-top: clamp(50px, 6.4vw, 100px);
padding-top: clamp(50px, 7.2vw, 120px);
padding-bottom: clamp(50px, 7.2vw, 120px);
background-color: #f7f8fa;
}
.p-works__item {
overflow: hidden;
width: min(92%, 1200px);
margin-right: auto;
margin-left: auto;
border-radius: clamp(10px, 1.3vw, 20px);
background-color: #fff;
}
@media print, screen and (min-width: 992px) {
.p-works__item {
display: grid;
grid-template-columns: 40% 1fr;
grid-template-areas: 'img content';
}
}
.p-works__item + .p-works__item {
margin-top: clamp(50px, 6.4vw, 100px);
}
@media print, screen and (min-width: 992px) {
.p-works__img {
grid-area: img;
}
}
.p-works__img img {
width: 100%;
height: 100%;
object-fit: cover;
}
@media screen and (max-width: 991.98px) {
.p-works__content {
padding: 8vw 4vw 9vw;
}
}
@media print, screen and (min-width: 992px) {
.p-works__content {
padding: clamp(50px, 4.4vw, 90px);
grid-area: content;
}
}
/* 施工実績
--------------------------------------------------------- */
.p-achievements__inner {
width: min(92%, 1200px);
margin-right: auto;
margin-left: auto;
}
.p-achievements__lead {
margin-bottom: clamp(50px, 6.8vw, 110px);
}
.p-achievements__nav {
margin-bottom: clamp(60px, 8.9vw, 150px);
}
.p-achievements__nav-header {
position: relative;
padding: .2em 1em;
border-radius: .3em;
background-color: #0a2958;
color: #fff;
text-align: center;
font-size: 1rem;
cursor: pointer;
-webkit-user-select: none;
user-select: none;
}
@media print, screen and (min-width: 992px) {
.p-achievements__nav-header {
display: none;
}
}
@media screen and (max-width: 991.98px) {
.p-achievements__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-achievements__nav-header::after {
position: absolute;
top: 0;
right: .7em;
bottom: 0;
display: flex;
color: rgba(255, 255, 255, .5);
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-achievements__nav-header.is-open::after {
content: '\f068';
}
}
@media screen and (max-width: 991.98px) {
.p-achievements__nav-inner {
display: none;
padding-top: clamp(14px, 3vw, 20px);
}
}
@media print, screen and (min-width: 992px) {
.p-achievements__nav-inner {
display: block !important;
}
}
.p-achievements__nav-lists {
display: grid;
}
@media screen and (max-width: 991.98px) {
.p-achievements__nav-lists {
grid-template-columns: repeat(2, 1fr);
gap: clamp(8px, 1.7vw, 15px);
}
}
@media print, screen and (min-width: 992px) {
.p-achievements__nav-lists {
grid-template-columns: repeat(3, 1fr);
gap: clamp(15px, 1.4vw, 24px) clamp(15px, 1.4vw, 24px);
}
}
@media screen and (min-width: 1200px) {
.p-achievements__nav-lists {
grid-template-columns: repeat(4, 1fr);
}
}
.p-achievements__nav li {
position: relative;
}
.p-achievements__nav li.is-current a {
background-color: #175cc3;
color: #fff;
}
.p-achievements__nav li.is-current a::before {
background-color: #175cc3;
}
.p-achievements__nav li a {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
padding: .7em 1.2em;
background-color: #f7f8fa;
color: #1a1a1a;
text-decoration: none;
letter-spacing: .05em;
font-weight: 400;
line-height: 1.4;
transition: .3s;
justify-content: center;
align-items: center;
}
@media screen and (max-width: 991.98px) {
.p-achievements__nav li a {
border-radius: .3em;
font-size: 1rem;
}
}
@media only screen and (max-width: 767.98px) {
.p-achievements__nav li a {
font-size: .9375rem;
}
}
@media print, screen and (min-width: 992px) {
.p-achievements__nav li a {
border-radius: 3em;
font-size: 1rem;
}
}
@media screen and (min-width: 1200px) {
.p-achievements__nav li a {
font-size: 15px;
}
}
@media print, screen and (min-width: 768px) {
.p-achievements__nav li a:hover,
.p-achievements__nav li a:active {
background-color: #175cc3;
color: #fff;
}
}
@media print, screen and (min-width: 768px) {
.p-achievements__items {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(40px, 5.7vw, 60px) 4%;
}
}
@media only screen and (max-width: 767.98px) {
.p-achievements__item + .p-achievements__item {
margin-top: 50px;
}
}
.p-achievements__pic {
position: relative;
margin-bottom: .8em;
border-radius: clamp(6px, .7vw, 10px);
background-color: #f7f8fa;
aspect-ratio: 4/3;
}
.p-achievements__pic img {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
max-width: 100%;
max-height: 100%;
margin: auto;
border-radius: 6px;
}
.p-achievements__cap {
display: flex;
line-height: 1.6;
justify-content: center;
}
/* 採用情報
--------------------------------------------------------- */
.p-recruit__lead {
margin-bottom: clamp(50px, 7.2vw, 120px);
border-radius: clamp(10px, 1.3vw, 20px);
background-color: #f7f8fa;
}
@media only screen and (max-width: 767.98px) {
.p-recruit__lead {
padding: 7vw 4vw 9vw;
}
}
@media print, screen and (min-width: 768px) {
.p-recruit__lead {
padding: clamp(30px, 2.9vw, 50px) clamp(50px, 4.3vw, 70px);
}
}
.p-recruit__media {
position: relative;
z-index: 1;
}
@media screen and (max-width: 991.98px) {
.p-recruit__media {
padding-top: 45vw;
}
}
@media print, screen and (min-width: 992px) {
.p-recruit__media {
padding-top: clamp(70px, 7.4vw, 150px);
}
}
.p-recruit__media::before {
position: absolute;
top: 0;
left: 0;
z-index: 1;
border-top-right-radius: clamp(10px, 1.3vw, 20px);
border-bottom-right-radius: clamp(10px, 1.3vw, 20px);
background-image: url(../images/company/bg-recruit.jpg);
background-position: 25% center;
background-size: cover;
background-repeat: no-repeat;
content: '';
}
@media screen and (max-width: 991.98px) {
.p-recruit__media::before {
width: 90%;
height: 50vw;
}
}
@media print, screen and (min-width: 992px) {
.p-recruit__media::before {
width: calc(min(92%, 1200px) * .35 + (100% - min(92%, 1200px)) / 2);
height: 90%;
}
}
.p-recruit__media + .p-recruit__media {
margin-top: clamp(60px, 9.1vw, 100px);
}
.p-recruit__media-inner {
position: relative;
z-index: -1;
margin-left: auto;
border-top-left-radius: clamp(10px, 1.3vw, 20px);
border-bottom-left-radius: clamp(10px, 1.3vw, 20px);
background-color: #f7f8fa;
}
@media screen and (max-width: 991.98px) {
.p-recruit__media-inner {
width: 95%;
padding-top: 7vw;
}
}
@media print, screen and (min-width: 992px) {
.p-recruit__media-inner {
width: 70%;
padding-right: calc((100% - min(92%, 1200px)) / 2);
padding-left: calc(min(92%, 1200px) * .35 + (100% - min(92%, 1200px)) / 2 - 30%);
}
}
@media screen and (max-width: 991.98px) {
.p-recruit__media-content {
padding: 7vw 4vw 9vw;
}
}
@media print, screen and (min-width: 992px) {
.p-recruit__media-content {
padding-top: clamp(50px, 5.9vw, 90px);
padding-bottom: clamp(50px, 5.9vw, 90px);
padding-left: clamp(40px, 4.6vw, 70px);
}
}
.p-recruit__media-lists {
margin-top: clamp(30px, 4.5vw, 50px);
}
.p-recruit__media-lists li {
position: relative;
border-radius: .6em;
background-color: #fff;
font-weight: 400;
line-height: 1.7;
}
@media screen and (max-width: 991.98px) {
.p-recruit__media-lists li {
padding: 13px 1.5em 13px 3.2em;
font-size: 1rem;
}
}
@media print, screen and (min-width: 992px) {
.p-recruit__media-lists li {
padding: 15px 1.5em 15px 3.2em;
font-size: clamp(1rem, .245vw + .848rem, 1.063rem);
}
}
.p-recruit__media-lists li:not(:last-of-type) {
margin-bottom: 15px;
}
.p-recruit__media-lists li::before {
position: absolute;
display: flex;
padding-right: .3em;
padding-left: .4em;
border-radius: .2em;
background-image: linear-gradient(-140deg, #77d2d5, #95acec, #b5a5e8);
color: #fff;
content: '\f00c';
font-weight: 900;
font-size: 105%;
font-family: 'Font Awesome 6 Free';
line-height: 1;
align-items: center;
justify-content: center;
aspect-ratio: 1;
}
@media screen and (max-width: 991.98px) {
.p-recruit__media-lists li::before {
left: 13px;
}
}
@media print, screen and (min-width: 992px) {
.p-recruit__media-lists li::before {
left: 15px;
}
}
.p-recruit__txt {
margin-top: clamp(50px, 6.4vw, 100px);
}
@media print, screen and (min-width: 768px) {
.p-recruit__txt {
text-align: center;
}
}
.p-recruit__contact {
margin-top: clamp(50px, 6.4vw, 100px);
text-align: center;
}
@media print, screen and (min-width: 768px) {
.p-recruit__contact {
display: flex;
column-gap: 3%;
justify-content: center;
align-items: center;
}
}
.p-recruit__contact-tel {
border-radius: 3em;
background-color: #0a2958;
color: #fff;
font-weight: 300;
font-family: 'Roboto', sans-serif;
line-height: 1.5;
}
@media only screen and (max-width: 767.98px) {
.p-recruit__contact-tel {
display: inline-block;
min-width: 280px;
padding: .4em 1.5em;
font-size: 1.25rem;
}
}
@media print, screen and (min-width: 768px) {
.p-recruit__contact-tel {
display: flex;
padding-right: 2em;
padding-left: 2em;
font-size: clamp(1.375rem, .487vw + 1.141rem, 1.75rem);
align-self: stretch;
align-items: center;
}
}
.p-recruit__contact-tel::before {
position: relative;
top: -.05em;
display: inline-block;
height: .8em;
margin: auto;
margin-right: .3em;
background-color: currentColor;
content: '';
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-image: var(--icon-phone);
mask-image: var(--icon-phone);
aspect-ratio: 1;
}
.p-recruit__contact-tel a {
text-decoration: none;
}
.p-recruit__contact-tel a [data-action=call] {
color: #fff;
}
@media only screen and (max-width: 767.98px) {
.p-recruit__contact-btn {
margin-top: 15px;
}
}
@media only screen and (max-width: 767.98px) {
.p-recruit__contact-btn .c-btn {
min-width: 280px;
}
}
/* アクセス
--------------------------------------------------------- */
.p-access {
margin-top: clamp(80px, 11vw, 180px);
}
@media print, screen and (min-width: 992px) {
.p-access__items {
display: grid;
column-gap: 5%;
grid-template-columns: repeat(2, 1fr);
}
}
.p-access__item {
text-align: center;
}
@media screen and (max-width: 991.98px) {
.p-access__item + .p-access__item {
margin-top: clamp(70px, 14.1vw, 120px);
}
}
.p-access__title {
margin-bottom: 1.2em;
color: #1a1a1a;
letter-spacing: .03em;
font-weight: 500;
font-size: clamp(1.063rem, .288vw + .998rem, 1.25rem);
line-height: 1.6;
}
.p-access__btn {
margin-top: clamp(30px, 4vw, 40px);
}
@media only screen and (max-width: 767.98px) {
.p-access__btn {
text-align: center;
}
}
@media print, screen and (min-width: 768px) {
.p-access__btn {
text-align: right;
}
}
@media only screen and (max-width: 767.98px) {
.p-access__btn .c-btn {
font-size: 1rem;
}
}
@media print, screen and (min-width: 768px) {
.p-access__btn .c-btn {
padding: .9em 2.5em;
font-size: clamp(.875rem, .162vw + .797rem, 1rem);
}
}
/* お問い合わせエリア
--------------------------------------------------------- */
.p-inquiry__catch {
display: flex;
overflow: clip;
}
.p-inquiry__catch-txt {
padding-right: .125em;
padding-left: .125em;
color: #edf2f9;
white-space: nowrap;
letter-spacing: -.01em;
font-weight: 100;
font-family: 'Roboto', sans-serif;
line-height: 1;
animation: marquee 100s 0s linear infinite;
}
@media only screen and (max-width: 767.98px) {
.p-inquiry__catch-txt {
font-size: 20vw;
}
}
@media print, screen and (min-width: 768px) {
.p-inquiry__catch-txt {
font-size: clamp(10rem, 6.494vw + 6.883rem, 15rem);
}
}
@keyframes marquee {
to {
transform: translate(-100%);
}
}
.p-inquiry__lead {
margin-top: clamp(30px, 4.2vw, 70px);
}
@media screen and (max-width: 991.98px) {
.p-inquiry__lead {
padding-right: 4vw;
padding-left: 4vw;
}
}
@media print, screen and (min-width: 992px) {
.p-inquiry__lead {
text-align: center;
font-size: clamp(1rem, .316vw + .848rem, 1.125rem);
line-height: 2.67;
}
}
.p-inquiry__bg {
margin-top: clamp(50px, 5.9vw, 90px);
padding-top: clamp(50px, 7.6vw, 130px);
padding-bottom: clamp(50px, 7.6vw, 130px);
background-size: cover;
background-repeat: no-repeat;
}
@media only screen and (max-width: 767.98px) {
.p-inquiry__bg {
background-image: url(../images/common/bg-inquiry-sp.jpg);
background-position: 40% 10%;
}
}
@media print, screen and (min-width: 768px) {
.p-inquiry__bg {
background-image: url(../images/common/bg-inquiry.jpg);
background-position: center top;
}
}
.p-inquiry__items {
position: relative;
z-index: 1;
overflow: hidden;
width: min(92%, 1220px);
margin-right: auto;
margin-left: auto;
border: 1px solid rgba(255, 255, 255, .4);
border-radius: clamp(6px, .9vw, 10px);
box-shadow: 0 0 10px 5px rgba(10, 41, 88, .05);
}
@media only screen and (max-width: 767.98px) {
.p-inquiry__items {
padding: 60px 4vw 50px;
}
}
@media print, screen and (min-width: 768px) {
.p-inquiry__items {
display: grid;
padding-top: clamp(50px, 5.1vw, 90px);
padding-right: clamp(20px, 2.2vw, 40px);
padding-bottom: clamp(40px, 4.3vw, 80px);
padding-left: clamp(20px, 2.2vw, 40px);
column-gap: clamp(20px, 1.8vw, 30px);
grid-template-columns: repeat(3, auto);
}
}
@media print, screen and (min-width: 992px) {
.p-inquiry__items {
grid-template-columns: repeat(3, 1fr);
}
}
.p-inquiry__items::before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
content: '';
-webkit-backdrop-filter: blur(15px);
backdrop-filter: blur(15px);
}
.p-inquiry__item {
position: relative;
border-radius: clamp(6px, .9vw, 10px);
background-color: rgba(255, 255, 255, .65);
box-shadow: 0 0 24px 0 rgba(10, 41, 88, .04);
text-align: center;
letter-spacing: .07em;
font-weight: 500;
line-height: 1.5;
}
@media only screen and (max-width: 767.98px) {
.p-inquiry__item {
padding-top: 50px;
padding-bottom: 30px;
}
}
@media print, screen and (min-width: 768px) {
.p-inquiry__item {
padding: clamp(50px, 4.3vw, 70px) clamp(20px, 1.8vw, 30px) clamp(25px, 2.2vw, 35px);
}
}
@media only screen and (max-width: 767.98px) {
.p-inquiry__item + .p-inquiry__item {
margin-top: 70px;
}
}
.p-inquiry__icon {
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: 1;
width: clamp(60px, 7.8vw, 78px);
height: clamp(60px, 7.8vw, 78px);
margin-right: auto;
margin-left: auto;
border-radius: 50%;
background-image: linear-gradient(52deg, #a0aeee, #b1f9f0);
transform: translateY(-50%);
}
.p-inquiry__icon::before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
margin: auto;
background-color: #fff;
content: '';
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
.p-inquiry__icon::after {
position: absolute;
top: 3px;
right: 3px;
bottom: 3px;
left: 3px;
z-index: -1;
border: 1px solid rgba(255, 255, 255, .7);
border-radius: 50%;
background-color: #175cc3;
content: '';
}
.p-inquiry__icon.--phone::before {
top: 1%;
height: 44%;
aspect-ratio: 1;
-webkit-mask-image: var(--icon-phone);
mask-image: var(--icon-phone);
}
.p-inquiry__icon.--fax::before {
right: 3%;
bottom: 1%;
height: 44%;
aspect-ratio: 35.5/33.5;
-webkit-mask-image: var(--icon-fax);
mask-image: var(--icon-fax);
}
.p-inquiry__icon.--mail::before {
height: 33%;
aspect-ratio: 35.5/25.5;
-webkit-mask-image: var(--icon-mail);
mask-image: var(--icon-mail);
}
.p-inquiry__title {
position: relative;
margin-bottom: 1.3em;
letter-spacing: .02em;
font-weight: 400;
line-height: 1.5;
}
@media only screen and (max-width: 767.98px) {
.p-inquiry__title {
padding-bottom: .8em;
font-size: 1.0625rem;
}
}
@media print, screen and (min-width: 768px) {
.p-inquiry__title {
padding-bottom: 1.2em;
font-size: clamp(.813rem, .316vw + .661rem, .938rem);
}
}
@media screen and (min-width: 1400px) {
.p-inquiry__title {
font-size: clamp(.938rem, .333vw + .646rem, 1.063rem);
}
}
.p-inquiry__title::before {
position: absolute;
right: 0;
bottom: 0;
left: 0;
width: 15px;
height: 1px;
margin: auto;
background-color: #1a1a1a;
content: '';
}
.p-inquiry__num {
letter-spacing: .015em;
font-weight: 300;
font-family: 'Roboto', sans-serif;
line-height: 1.2;
}
@media only screen and (max-width: 767.98px) {
.p-inquiry__num {
font-size: 2.0625rem;
}
}
@media print, screen and (min-width: 768px) {
.p-inquiry__num {
font-size: clamp(1.563rem, 1.218vw + .978rem, 2.5rem);
}
}
.p-inquiry__num a {
text-decoration: none;
}
.p-inquiry__num a [data-action=call] {
color: #1a1a1a;
}
.p-inquiry__time {
margin-top: .1em;
margin-left: .5em;
letter-spacing: 0;
font-weight: 400;
}
@media only screen and (max-width: 767.98px) {
.p-inquiry__time {
font-size: .75rem;
}
}
@media print, screen and (min-width: 768px) {
.p-inquiry__time {
font-size: clamp(.625rem, .096vw + .603rem, .688rem);
}
}
.p-inquiry__btn {
margin-top: clamp(15px, 2.1vw, 22px);
}
@media only screen and (max-width: 767.98px) {
.p-inquiry__btn .c-btn {
font-size: 1rem;
}
}
@media print, screen and (min-width: 768px) {
.p-inquiry__btn .c-btn {
display: flex;
padding: .7em 3em .7em 1em;
letter-spacing: .015em;
font-size: clamp(.75rem, .475vw + .522rem, .938rem);
}
}
@media screen and (min-width: 1400px) {
.p-inquiry__btn .c-btn {
font-size: clamp(.938rem, .333vw + .646rem, 1.063rem);
}
}
/* お電話でのお問い合わせ
--------------------------------------------------------- */
.p-enquire {
padding-top: clamp(40px, 6.3vw, 70px);
padding-bottom: clamp(50px, 7.4vw, 80px);
background-color: #f7f8fa;
}
.p-enquire__inner {
max-width: min(92%, 1110px);
margin-right: auto;
margin-left: auto;
}
.p-enquire__txt {
margin-bottom: clamp(40px, 5.7vw, 60px);
font-size: clamp(1rem, .122vw + .973rem, 1.125rem);
}
@media print, screen and (min-width: 768px) {
.p-enquire__txt {
text-align: center;
line-height: 2.2;
}
}
@media print, screen and (min-width: 768px) {
.p-enquire__items {
display: grid;
grid-template-columns: repeat(2, 48%);
justify-content: space-between;
}
}
.p-enquire__item {
border-radius: clamp(6px, .9vw, 10px);
background-color: #fff;
text-align: center;
}
@media only screen and (max-width: 767.98px) {
.p-enquire__item {
padding: 4vw 4vw 6vw;
}
}
@media print, screen and (min-width: 768px) {
.p-enquire__item {
padding: 2.3em 1.5em 2.5em;
}
}
@media only screen and (max-width: 767.98px) {
.p-enquire__item + .p-enquire__item {
margin-top: 30px;
}
}
.p-enquire__item.--tel .p-enquire__num::before {
aspect-ratio: 1;
-webkit-mask-image: var(--icon-phone);
mask-image: var(--icon-phone);
}
.p-enquire__item.--fax .p-enquire__num::before {
aspect-ratio: 35.5/33.5;
-webkit-mask-image: var(--icon-fax);
mask-image: var(--icon-fax);
}
.p-enquire__title {
margin-bottom: 1.1em;
font-weight: 400;
font-size: clamp(1rem, .192vw + .957rem, 1.125rem);
}
.p-enquire__num {
white-space: nowrap;
font-weight: 300;
font-size: clamp(1.75rem, 1.154vw + 1.49rem, 2.5rem);
font-family: 'Roboto', sans-serif;
line-height: 1.1;
}
.p-enquire__num::before {
display: inline-block;
height: .8em;
margin-right: .4em;
background-color: #175cc3;
content: '';
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
.p-enquire__num a {
text-decoration: none;
}
.p-enquire__num a [data-action=call] {
color: #1a1a1a;
}
.p-enquire__time {
margin-top: 1em;
font-size: clamp(.938rem, .096vw + .916rem, 1rem);
line-height: 1.5;
}
/* メールでのお問い合わせ
--------------------------------------------------------- */
.p-contact__txt p + p {
margin-top: 1em;
}
.p-contact__txt .c-badge {
position: relative;
top: -.2em;
}
/* プライバシーポリシー
--------------------------------------------------------- */
.p-policy {
margin-top: clamp(30px, 4.5vw, 50px);
}
.p-policy__scroll-box {
overflow-y: auto;
border: 1px solid #e8eaeb;
background-color: #fff;
font-size: .875rem;
}
@media only screen and (max-width: 767.98px) {
.p-policy__scroll-box {
max-height: 190px;
padding: 1.4em;
}
}
@media print, screen and (min-width: 768px) {
.p-policy__scroll-box {
max-height: 310px;
padding: 2.3em;
}
}
@media print {
.p-policy__scroll-box {
max-height: 100%;
}
}
.p-policy__item {
margin-top: clamp(30px, 4vw, 40px);
}
.p-policy__item-title {
margin-bottom: 1.2em;
font-weight: 500;
font-size: 1rem;
line-height: 1.5;
}
.p-policy__item p,
.p-policy__item ul {
margin-bottom: 1.5em;
}
.p-policy__item a {
word-wrap: break-word;
}
.p-policy__agree {
border-right: 1px solid #e8eaeb;
border-bottom: 1px solid #e8eaeb;
border-left: 1px solid #e8eaeb;
background-color: #f7f8fa;
font-size: clamp(.938rem, .096vw + .916rem, 1rem);
line-height: 1.6;
-webkit-user-select: none;
user-select: none;
}
@media only screen and (max-width: 767.98px) {
.p-policy__agree {
display: flex;
padding: .6em 1.5em;
font-size: .875rem;
justify-content: center;
}
}
@media print, screen and (min-width: 768px) {
.p-policy__agree {
padding: .6em .3em;
text-align: center;
}
}
.p-policy__agree [type=checkbox] {
width: 1.2em;
height: 1.2em;
margin-right: .5em;
}
/* ========================================================================
/*
/* Utility
/*
========================================================================= */
/* typography
--------------------------------------------------------- */
.u-kome {
position: relative;
padding-left: 1.2em;
}
.u-kome.--inline {
display: inline-block;
}
.u-kome.--red::before {
color: #db1515;
}
.u-kome::before {
position: absolute;
left: 0;
content: '※';
}
.u-text-center {
text-align: center;
}
.u-important {
color: #db1515;
}
.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;
}