/*
CSS ordering rules :
FLOCSS / f- Foundation (Reset / Base) / l- Layout / c- Component / p- Project / u- Utility
font-size rules :
PC / width:1440px = font-size:Maximum value (standard value) / width:768px = font-size:80% reduction
SP / width:390px Standard value / width:+100px = font-size:+25% / width:-100px = font-size:-25% 
*/

/* ==========================================================================
1. Foundation (Reset / Base)
========================================================================== */
*, *::before, *::after{
box-sizing:border-box;
}
html{
font-size:16px;
scroll-behavior:smooth;
}
body{
margin:0;
background:#f3f3f3;
color:#333333;
font-family:"Zen Kaku Gothic New", sans-serif;
font-size:16px;
font-size:clamp(12.8px,calc(12.8px + 3.2 * ((100vw - 768px) / 672)),16px);
font-weight:400;
line-height:1.8;
}
@media screen and (max-width:767px){
body{
background-color:#f3f3f3;
font-size:16px;
font-size:clamp(12px,calc(12px + 8 * ((100vw - 290px) / 200)),20px);
line-height:1.7;
}
body.is-drawer-open{
overflow:hidden;
}
}
img{
display:block;
width:100%;
max-width:100%;
height:auto;
}
a{
color:inherit;
text-decoration:none;
}
ul{
margin:0;
padding:0;
list-style:none;
}
/* ==========================================================================
2. Layout
========================================================================== */
/* --- l bg canvas --- */
#l-memphisCanvas{
position:fixed;
inset:0;
z-index:-1;
width:100%;
height:100%;
opacity:0.3;
}
/* --- l container --- */
.l-container{
width:100%;
max-width:1280px;
margin-right:auto;
margin-left:auto;
margin-inline:auto;
padding-right:24px;
padding-left:24px;
padding-inline:24px;
}
@media screen and (max-width:767px){
.l-container{
max-width:100%;
padding-right:5%;
padding-left:5%;
padding-inline:5%;
}
}
/* --- l header --- */
.l-header{
position:sticky;
top:0;
z-index:100;
width:100%;
background:#f3f3f3;
}
.l-header .l-container{
display:flex;
align-items:center;
justify-content:space-between;
width:100%;
max-width:1440px;
min-height:80px;
}
@media screen and (max-width:767px){
.l-header .l-container{
position:relative;
height:60px;
min-height:60px;
padding-left:20px;
background-color:#f3f3f3;
transition:background-color 0.4s ease;
}
body.is-drawer-open .l-header .l-container{
background-color:#164877;
}
body.is-drawer-open .c-site-logo img{
display:none;
opacity:0;
}
}
/* --- l footer --- */
.l-footer{
padding:96px 0 24px 0;
background:#164877;
color:#ffffff;
}
.l-footer__inner{
display:flex;
align-items:flex-start;
justify-content:space-between;
width:100%;
}
.l-footer__info{
width:29%;
max-width:328px;
}
.l-footer__logo{
padding:21px 24px 21px 24px;
background:#ffffff;
}
.l-footer__company-name{
margin:24px 0 20px 0;
font-size:18px;
font-size:clamp(14.4px,calc(14.4px + 3.6 * ((100vw - 768px) / 672)),18px);
}
.l-footer__nav{
width:69%;
max-width:704px;
padding:24px 24px 24px 24px;
background:#ffffff;
color:#164877;
}
.l-footer-nav__inner{
display:flex;
justify-content:space-between;
width:100%;
}
.l-footer-nav__group{
width:33%;
max-width:100%;
}
.l-footer-nav__item{
display:flex;
align-items:center;
gap:6px;
margin-bottom:12px;
}
.l-footer-nav__item::before{
flex-shrink:0;
width:8px;
height:8px;
background:#6F94BB;
content:"";
}
.l-footer-nav__link{
color:#164877;
}
.l-footer-nav__sub-list{
margin-top:12px;
padding-left:16px;
}
.l-footer-nav__sub-item{
display:flex;
align-items:center;
gap:6px;
margin-bottom:8px;
}
.l-footer-nav__sub-item::before{
flex-shrink:0;
width:8px;
height:8px;
content:"";
}
.l-footer-nav__sub-item:nth-child(1)::before{background:#A8A8A8;}
.l-footer-nav__sub-item:nth-child(2)::before{background:#98C890;}
.l-footer-nav__sub-item:nth-child(3)::before{background:#F3B75F;}
.l-footer-nav__sub-item:nth-child(4)::before{background:#8CC3E5;}
.l-footer-nav__sub-item:nth-child(5)::before{background:#8EA8B5;}
.l-footer-nav__item--button::before{
display:none;
}
.l-footer-nav__item--button .c-button{
width:100%;
padding:12px 16px 12px 16px;
}
.l-footer__copyright{
margin-top:48px;
font-size:12px;
font-size:clamp(9.6px, calc(9.6px + 2.4 * ((100vw - 768px) / 672)), 12px);
text-align:center;
}
@media screen and (max-width:767px){
.l-footer{
padding:8% 0 4% 0;
}
.l-footer__logo{
margin:4.5% 0 0 0;
padding:6% 8% 6.5% 8%;
background:#ffffff;
text-align:center;
}
.l-footer__company-name{
margin:7% 0 3% 0;
font-size:18px;
font-size:clamp(13.5px,calc(13.5px + 9 * ((100vw - 290px) / 200)),22.5px);
text-align:center;
}
.l-footer__address{
text-align:center;
}
.l-footer__nav{
display:none;
}
.l-footer__copyright{
margin:3% 0 9% 0;
font-size:14px;
font-size:clamp(10.5px,calc(10.5px + 7 * ((100vw - 290px) / 200)),17.5px);
}
}
/* --- l flex group --- */
.l-flex-group{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:40px;
padding:0 0 60px 0;
}
.l-flex-group__content{
width:50%;
}
.l-flex-group__image{
width:50%;
}
.l-flex-group__image img{
display:block;
width:100%;
height:auto;
}
.l-flex-group__text{
margin:10px 0 20px 0;
}
.l-flex-group__subtitle{
margin:0 0 20px 0;
font-size:34px;
}
@media screen and (max-width:767px){
.l-flex-group{
flex-direction:column;
gap:24px;
padding:0 0 12% 0;
}
.l-flex-group__content, .l-flex-group__image{
width:100%;
}
.l-flex-group__text{
margin:3% 0 6% 0;
}
}
/* ==========================================================================
3. Component
========================================================================== */
/* --- c site logo --- */
.c-site-logo{
width:30%;
max-width:320px;
margin:0;
}
@media screen and (max-width:767px){
.c-site-logo{
width:140%;
max-width:260px;
}
}
/* --- c section --- */
.c-section-heading{
margin:0 auto 60px auto;
text-align:center;
}
.c-section-heading__title{
margin:0 0 0 0;
font-size:36px;
font-size:clamp(28.8px,calc(28.8px + 7.2 * ((100vw - 768px) / 672)),36px);
font-weight:700;
}
.c-section-heading__sub{
display:block;
padding-bottom:32px;
background-image:url("../images/parts/icon--colorline.png");
background-repeat:no-repeat;
background-position:center bottom;
background-size:70px 8px;
color:#164877;
font-size:16px;
font-size:clamp(12.8px,calc(12.8px + 3.2 * ((100vw - 768px) / 672)),16px);
font-weight:700;
}
@media screen and (max-width:767px){
.c-section-heading{
margin:0 auto 10.5% auto;
}
.c-section-heading__title{
font-size:32px;
font-size:clamp(24px,calc(24px + 16 * ((100vw - 290px) / 200)),40px);
}
.c-section-heading__sub{
margin-top:3%;
padding-bottom:9%;
font-size:16px;
font-size:clamp(12px,calc(12px + 8 * ((100vw - 290px) / 200)),20px);
}
}
/* --- c button --- */
.c-button{
position:relative;
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
border:none;
border-radius:100px;
transition:opacity 0.3s;
appearance:none;
-webkit-appearance:none;
}
.c-button:hover{
opacity:0.7;
}
.c-button--arrow{
background:#164877;
color:#ffffff;
}
.c-button--arrow::after{
position:absolute;
right:7%;
width:11px;
height:11px;
background-image:url("../images/parts/icon--arrow.png");
background-repeat:no-repeat;
background-position:center;
background-size:contain;
content:"";
}
@media screen and (max-width:767px){
.c-button--arrow::after{
right:5%;
width:12px;
height:12px;
}
}
/* --- c SP hamburger --- */
.c-hamburger{
display:none;
}
@media screen and (max-width:767px){
.c-hamburger{
position:absolute;
top:0;
right:0;
z-index:102;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:6px;
width:60px;
height:60px;
padding:0;
border:none;
background-color:#164877;
cursor:pointer;
transition:background-color 0.4s ease;
}
body.is-drawer-open .c-hamburger{
background-color:transparent;
}
.c-hamburger span{
display:block;
width:30px;
height:2px;
background-color:#ffffff;
transition:transform 0.3s ease, opacity 0.3s ease;
}
.c-hamburger.is-active span:nth-child(1){
transform:translateY(8px) rotate(45deg);
}
.c-hamburger.is-active span:nth-child(2){
opacity:0;
}
.c-hamburger.is-active span:nth-child(3){
transform:translateY(-8px) rotate(-45deg);
}
}
@media screen and (max-width:767px){
.c-btn-outline{
position:relative;
display:flex;
align-items:center;
justify-content:center;
width:100%;
max-width:300px;
padding:14px;
border:2px solid #ffffff;
border-radius:100px;
color:#ffffff;
font-size:26.64px;
font-size:clamp(18px,calc(18px + 8.64 * ((100vw - 390px) / 377)),26.64px);
font-weight:700;
text-align:center;
}
.c-btn-outline::after{
position:absolute;
right:24px;
font-size:26.64px;
font-size:clamp(18px,calc(18px + 8.64 * ((100vw - 390px) / 377)),26.64px);
content:"→";
}
}
/* --- c Lightbox --- */
.c-js-lightbox img{
opacity:1;
cursor:pointer;
transition:opacity 0.3s;
}
.c-js-lightbox:hover img{
opacity:0.7;
}
.c-lightbox{
position:fixed;
inset:0;
z-index:9999;
display:flex;
align-items:center;
justify-content:center;
padding:20px;
background:rgba(0, 0, 0, 0.85);
opacity:0;
visibility:hidden;
transition:0.3s;
}
.c-lightbox.is-show{
opacity:1;
visibility:visible;
}
.c-lightbox img{
max-width:90%;
max-height:90%;
object-fit:contain;
}
/* ==========================================================================
3. Component - pages only
========================================================================== */
/* --- c pages heading --- */
.c-pages-heading{
display:flex;
flex-direction:column;
align-items:flex-start;
justify-content:center;
margin:60px auto 30px auto;
}
.c-pages-heading__title{
margin:10px 0 0 0;
font-size:64px;
font-size:clamp(51.2px,calc(51.2px + 12.8 * ((100vw - 768px) / 672)),64px);
font-weight:700;
}
.c-pages-heading__sub{
display:block;
padding-bottom:32px;
color:#164877;
font-size:32px;
font-size:clamp(25.6px,calc(25.6px + 6.4 * ((100vw - 768px) / 672)),32px);
font-weight:700;
}
.c-pages-heading__sub span{
padding-left:40px;
font-size:24px;
font-size:clamp(19.2px,calc(19.2px + 4.8 * ((100vw - 768px) / 672)),24px);
}
@media screen and (max-width:767px){
.c-pages-heading{
margin:9% auto 9% auto;
margin-inline:auto;
}
.c-pages-heading__title{
margin:0;
font-size:32px;
font-size:clamp(24px,calc(24px + 16 * ((100vw - 290px) / 200)),40px);
}
.c-pages-heading__sub{
margin-top:3%;
padding-bottom:6%;
font-size:16px;
font-size:clamp(12px,calc(12px + 8 * ((100vw - 290px) / 200)),20px);
}
.c-pages-heading__sub span{
display:block;
padding-left:0;
font-size:14px;
font-size:clamp(10.5px,calc(10.5px + 7 * ((100vw - 290px) / 200)),17.5px);
}
}
/* ==========================================================================
4. Project
========================================================================== */
/* --- p header nav --- */
.p-header-nav{
width:60%;
max-width:656px;
}
.p-header-nav__list{
display:flex;
align-items:center;
justify-content:space-between;
gap:3%;
line-height:1.6;
text-align:center;
}
.p-header-nav__link{
font-size:16px;
font-size:clamp(12.8px,calc(12.8px + 3.2 * ((100vw - 768px) / 672)),16px);
font-weight:700;
transition:opacity 0.3s;
}
.p-header-nav__link:hover{
opacity:0.7;
}
.p-header-nav__link img{
width:100%;
max-width:48px;
}
@media screen and (max-width:767px){
.p-header-nav__list{
display:none !important;
}
}
/* --- p SP drawer nav --- */
.p-drawer-nav{
display:none;
}
@media screen and (max-width:767px){
.p-drawer-nav{
position:fixed;
top:60px;
left:0;
z-index:101;
display:block;
width:100%;
height:calc(100vh - 60px);
overflow-y:auto;
background-color:#244775;
opacity:0;
visibility:hidden;
transform:translateY(-100%);
transition:transform 0.4s ease, opacity 0.4s ease, visibility 0.4s ease;
}
.p-drawer-nav.is-open{
opacity:1;
visibility:visible;
transform:translateY(0);
}
.p-drawer-nav__inner{
display:flex;
flex-direction:column;
justify-content:flex-start;
width:100%;
min-height:100%;
padding:0 12% 0 12%;
}
.p-drawer-nav__list{
display:flex;
flex-direction:column;
gap:10px;
width:100%;
}
.p-drawer-nav__item > a{
position:relative;
display:block;
padding-left:20px;
color:#ffffff;
font-size:16px;
font-size:clamp(12px,calc(12px + 8 * ((100vw - 290px) / 200)),20px);
font-weight:700;
}
.p-drawer-nav__item > a::before{
position:absolute;
top:50%;
left:0;
width:8px;
height:8px;
background-color:#6f94bb;
transform:translateY(-50%);
content:"";
}
.p-drawer-nav__child-list{
display:flex;
flex-direction:column;
gap:10px;
margin-top:10px;
padding-left:32px;
}
.p-drawer-nav__child-item a{
position:relative;
display:block;
padding-left:20px;
color:#ffffff;
font-size:23.68px;
font-size:clamp(16px,calc(16px + 7.68 * ((100vw - 390px) / 377)),23.68px);
font-weight:700;
}
.p-drawer-nav__child-item a::before{
position:absolute;
top:50%;
left:0;
width:8px;
height:8px;
transform:translateY(-50%);
content:"";
}
.p-drawer-nav__child-item--white a::before{background-color:#a8a8a8;}
.p-drawer-nav__child-item--green a::before{background-color:#98c890;}
.p-drawer-nav__child-item--orange a::before{background-color:#f3b75f;}
.p-drawer-nav__child-item--blue a::before{background-color:#8cc3e5;}
.p-drawer-nav__child-item--platina a::before{background-color:#8ea8b5;}
.p-drawer-nav__bottom{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:10px;
margin-top:16%;
width:100%;
}
.p-drawer-nav__bottom .c-btn-outline{
width:70%;
padding:6px;
font-size:16px;
font-size:clamp(12px,calc(12px + 8 * ((100vw - 290px) / 200)),20px);
}
.p-drawer-nav__bottom .c-btn-outline::after{
position:absolute;
right:9px;
}
.p-drawer-nav__privacy{
color:#ffffff;
font-size:20.72px;
font-size:clamp(14px,calc(14px + 6.72 * ((100vw - 390px) / 377)),20.72px);
text-decoration:none;
opacity:0.8;
}
}
/* ==========================================================================
Project - TOP only
========================================================================== */
/* --- p MV --- */
.p-mv{
display:flex;
align-items:center;
min-height:auto;
padding:40px 0 40px 0;
}
.p-mv__inner{
display:flex;
align-items:center;
justify-content:space-between;
width:100%;
max-width:1080px;
margin:auto;
}
.p-mv__content{width:48%;}
.p-mv__visual{width:52%;}
.p-mv__image img{
width:100%;
max-width:560px;
}
.p-mv__text{
margin:11% 0 4% 0;
font-size:34px;
font-size:clamp(27.2px,calc(27.2px + 6.8 * ((100vw - 768px) / 672)),34px);
font-weight:700;
}
.p-mv__title{
display:flex;
flex-direction:column;
align-items:flex-start;
margin:0 0 7% 0;
font-size:48px;
font-size:clamp(38.4px,calc(38.4px + 9.6 * ((100vw - 768px) / 672)),48px);
}
.p-mv__title-accent{
color:#fff3a9;
}
@media screen and (max-width:767px){
.p-mv{
padding:13% 0 11% 0;
}
.p-mv__text{
margin:0 0 4% 0;
font-size:24px;
font-size:clamp(18px,calc(18px + 12 * ((100vw - 290px) / 200)),30px);
}
.p-mv__title{
margin:0;
font-size:36px;
font-size:clamp(27px,calc(27px + 18 * ((100vw - 290px) / 200)),45px);
}
.p-mv__image{
margin:4% 4.5% 4% 4.5%;
}
}
/* --- p MV Animation --- */
.p-reveal__bg{
position:relative;
display:inline-block;
vertical-align:bottom;
overflow:hidden;
margin-bottom:5%;
padding:0 16px 0 16px;
background-color:#164877;
transform:scaleX(0);
transform-origin:left;
animation:revealBg 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
.p-reveal__text{
display:inline-block;
color:#ffffff;
opacity:0;
transform:translateX(-20px);
animation:revealText 0.5s cubic-bezier(0.25, 1, 0.5, 1) 0.35s forwards;
}
@media screen and (max-width:767px){
.p-reveal__bg{
margin-right:-15%;
margin-bottom:4%;
padding:0 5% 0 6%;
}
}
.p-mv__lead-catch:nth-of-type(1) .p-reveal__bg{animation-delay:0.2s;}
.p-mv__lead-catch:nth-of-type(1) .p-reveal__text{animation-delay:0.55s;}
.p-mv__lead-catch:nth-of-type(2) .p-reveal__bg{animation-delay:0.5s;}
.p-mv__lead-catch:nth-of-type(2) .p-reveal__text{animation-delay:0.85s;}
.p-mv__lead-catch:nth-of-type(3) .p-reveal__bg{animation-delay:0.8s;}
.p-mv__lead-catch:nth-of-type(3) .p-reveal__text{animation-delay:1.15s;}
@keyframes revealBg{
0%{transform:scaleX(0);}
100%{transform:scaleX(1);}
}
@keyframes revealText{
0%{opacity:0; transform:translateX(-20px);}
100%{opacity:1; transform:translateX(0);}
}
/* --- p section --- */
.p-section{
padding:94px 0 40px 0;
}
.p-section--contact{
padding:94px 0 94px 0;
background:#dae2eb;
}
.p-section__inner{
max-width:1080px;
margin-right:auto;
margin-left:auto;
margin-inline:auto;
}
@media screen and (max-width:767px){
.p-section{
padding:7.5% 0 2.5% 0;
}
.p-section--contact{
padding:12% 0 12% 0;
}
.p-section__inner{
max-width:100%;
}
}
/* --- p card --- */
.p-card-grid{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:4.25%;
}
.p-card{
padding-bottom:24px;
background:#ffffff;
}
.p-card__image-wrapper{
overflow:hidden;
}
.p-card__image{
transition:transform 0.4s ease;
}
.p-card__image:hover{
transform:scale(1.1);
}
.p-card__title{
position:relative;
margin:20px 0 0 0;
padding:0 24px 16px 24px;
font-size:24px;
font-size:clamp(19.2px,calc(19.2px + 4.8 * ((100vw - 768px) / 672)),24px);
font-weight:700;
text-align:center;
}
.p-card__title::after{
position:absolute;
left:50%;
bottom:0;
width:60px;
height:4px;
transform:translateX(-50%);
content:"";
}
.p-card__text{
padding:0 24px 0 24px;
}
.p-card .c-button{
float:right;
min-width:50%;
margin-right:22px;
margin-left:22px;
margin-inline:22px;
padding:6px 7% 6px 7%;
font-size:14px;
font-size:clamp(11.2px,calc(11.2px + 2.8 * ((100vw - 768px) / 672)),14px);
}
.p-card:nth-child(1) .p-card__title::after, .p-card:nth-child(1) .c-button{background:#a8a8a8;}
.p-card:nth-child(2) .p-card__title::after, .p-card:nth-child(2) .c-button{background:#98c890;}
.p-card:nth-child(3) .p-card__title::after, .p-card:nth-child(3) .c-button{background:#f3b75f;}
.p-card:nth-child(4) .p-card__title::after, .p-card:nth-child(4) .c-button{background:#8cc3e5;}
.p-card:nth-child(5) .p-card__title::after, .p-card:nth-child(5) .c-button{background:#8ea8b5;}
@media screen and (max-width:767px){
.p-card{
margin:0 0 7% 0;
padding:0 0 7% 0;
}
.p-card__title{
margin:2%;
padding:3% 3% 6.5% 3%;
font-size:24px;
font-size:clamp(18px,calc(18px + 12 * ((100vw - 290px) / 200)),30px);
}
.p-card__text{
padding:0 7% 0.5% 7%;
}
.p-card .c-button{
min-width:auto;
padding:4px 30px 4px 16px;
font-size:14px;
font-size:clamp(10.5px,calc(10.5px + 7 * ((100vw - 290px) / 200)),17.5px);
}
}
/* --- p news --- */
.p-news-item{
display:flex;
align-items:center;
overflow:hidden;
border-radius:100px;
background:#ffffff;
}
.p-news-item__date{
width:160px;
padding:16px 24px 16px 24px;
background:#6f94bb;
color:#ffffff;
text-align:center;
}
.p-news-item__text{
padding:0 24px 0 24px;
}
@media screen and (max-width:767px){
.p-news-item__date{
width:34%;
padding:11% 6% 11% 6%;
}
.p-news-item__text{
padding:0 6% 0 6%;
}
}
/* --- p topic --- */
.p-topic{
margin:50px 0 60px 0;
}
.p-topic__inner{
display:flex;
align-items:center;
padding:24px;
background:#ffffff;
}
.p-topic__image{
width:35%;
max-width:352px;
}
.p-topic__content{
width:65%;
padding-left:48px;
}
.p-topic__title{
margin:0;
font-size:32px;
font-size:clamp(25.6px,calc(25.6px + 6.4 * ((100vw - 768px) / 672)),32px);
font-weight:700;
}
@media screen and (max-width:767px){
.p-topic{
margin:6% 0 6% 0;
}
.p-topic__inner{
margin:0 0 12% 0;
padding:6.5%;
}
.p-topic__content{
margin-top:8%;
padding-left:0;
}
.p-topic__title{
font-size:28px;
font-size:clamp(21px,calc(21px + 14 * ((100vw - 290px) / 200)),35px);
}
.p-topic__text{
margin-top:9%;
}
}
/* --- p channels --- */
.p-channels{
margin:20px 0 0 0;
}
.p-channels__inner{
display:flex;
justify-content:space-between;
gap:4%;
width:100%;
}
.p-channels__web, .p-channels__tel{
display:flex;
flex-direction:column;
justify-content:space-between;
width:50%;
background:#ffffff;
text-align:center;
}
.p-channels__title{
display:flex;
align-items:center;
justify-content:center;
margin:0;
padding:8px 16px 8px 16px;
background:#6f94bb;
color:#ffffff;
font-size:24px;
font-size:clamp(19.2px,calc(19.2px + 4.8 * ((100vw - 768px) / 672)),24px);
}
.p-channels__button-wrapper{
display:flex;
align-items:center;
justify-content:center;
height:100%;
}
.p-channels .c-button{
width:calc(100% - 48px);
max-width:356px;
padding:4%;
font-size:20px;
font-size:clamp(16px,calc(16px + 4 * ((100vw - 768px) / 672)),20px);
}
.p-channels__tel-number{
display:inline-flex;
align-items:center;
gap:8px;
position:relative;
margin:20px 0 0 0;
padding:0;
font-size:36px;
font-size:clamp(28.8px,calc(28.8px + 7.2 * ((100vw - 768px) / 672)),36px);
font-weight:700;
}
.p-channels__tel-number::before{
display:inline-block;
flex-shrink:0;
width:20px;
height:30px;
background:url(../images/parts/icon--tel.png) no-repeat center / contain;
content:"";
}
.p-channels__time{
margin-bottom:24px;
}
@media screen and (max-width:767px){
.p-channels__inner{
gap:1px;
}
.p-channels__web{margin-top:8%;}
.p-channels__tel{margin-top:6%;}
.p-channels__title{
padding:3%;
font-size:18px;
font-size:clamp(13.5px,calc(13.5px + 9 * ((100vw - 290px) / 200)),22.5px);
}
.p-channels__button-wrapper{
padding:7% 0 7% 0;
}
.p-channels .c-button{
padding:16px;
font-size:16px;
font-size:clamp(12px,calc(12px + 8 * ((100vw - 290px) / 200)),20px);
}
.p-channels__tel-number{
display:flex;
justify-content: center;
gap:2vw;
margin-top:2.5%;
font-size:36px;
font-size:clamp(27px, calc(27px + 18 * ((100vw - 290px) / 200)), 45px);
}
.p-channels__tel-number::before{
width:4.25vw;
height:6.5vw;
background-image:url("../images/parts/icon--tel.png");
transform:translateY(2px);
}
.p-channels__time{
margin:2% 0 7% 0;
}
}
/* --- p sp top reset --- */
@media screen and (max-width:767px){
.p-mv__inner, .p-topic__inner, .p-channels__inner, .l-footer__inner, .l-footer-nav__inner{
flex-direction:column;
}
.p-mv__content, .p-mv__visual, .p-topic__image, .p-topic__content, .p-channels__web, .p-channels__tel, .l-footer__info, .l-footer__nav, .l-footer-nav__group{
width:100%;
max-width:100%;
}
.p-card-grid{
grid-template-columns:1fr;
gap:0;
}
}
/* ==========================================================================
Project - pages only
========================================================================== */
.p-pages-title{
box-sizing:content-box;
max-width:1080px;
margin-right:auto;
margin-left:auto;
margin-inline:auto;
padding:0 24px 0 24px;
}
.p-pages-section{
padding:0 0 100px 0;
}
.p-pages-section .p-section:first-child{
padding:20px 0 40px 0;
}
@media screen and (max-width:767px){
.p-pages-title{
max-width:100%;
padding:0 5% 0 5%;
}
.p-pages-section{
padding:0 0 6% 0;
}
.p-pages-section .p-section:first-child{
padding:3% 0 4% 0;
}
}
/* --- p detail flex --- */
.p-detail{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:40px;
padding:0 0 100px 0;
}
.p-detail__content{
width:50%;
}
.p-detail__image{
width:50%;
}
.p-detail__image img{
display:block;
width:100%;
height:auto;
}
.p-detail__title{
margin:10px 0 20px 0;
font-size:20px;
font-size:clamp(16px,calc(16px + 4 * ((100vw - 768px) / 672)),20px);
}
.p-detail__text{
margin:10px 0 20px 0;
}
@media screen and (max-width:767px){
.p-detail{
flex-direction:column;
gap:0;
padding:0 0 12% 0;
}
.p-detail__content, .p-detail__image{
width:100%;
}
.p-detail__title{
margin:3% 0 6% 0;
font-size:clamp(13.5px,calc(13.5px + 9 * ((100vw - 290px) / 200)),22.5px);
}
.p-detail__text{
margin:3% 0 6% 0;
}
}
/* --- p two-column-list --- */
.p-two-column-list{
display:flex;
flex-direction:column;
gap:32px;
padding:0 0 100px 0;
}
.p-two-column-list__item{
display:flex;
background-color:#ffffff;
}
.p-two-column-list__heading{
display:flex;
align-items:center;
justify-content:center;
width:30%;
padding:16px 16px 16px 16px;
text-align:center;
}
.pages-white .p-two-column-list__heading{
background-color:#b3b3b3;
}
.pages-green .p-two-column-list__heading{
background-color:#98C890;
}
.pages-orange .p-two-column-list__heading{
background-color:#F3B75F;
}
.pages-platinum .p-two-column-list__heading{
background-color:#8EA8B5;
}
.pages-blue .p-two-column-list__heading{
background-color:#8CC3E5;
}
.pages-company .p-two-column-list__heading{
background-color:#6f94bb;
}
.pages-contact .p-two-column-list__heading{
background-color:#6f94bb;
}
.p-two-column-list__title{
color:#ffffff;
font-size:20px;
font-size:clamp(16px,calc(16px + 4 * ((100vw - 768px) / 672)),20px);
font-weight:700;
text-align:center;
}
.p-two-column-list__content{
display:flex;
flex-direction:column;
align-items:flex-start;
justify-content:center;
width:70%;
padding:24px 24px 24px 24px;
}
.p-two-column-list__list{
display:flex;
flex-direction:column;
margin-bottom:26px;
}
.p-two-column-list__list-item{
margin:0;
font-size:16px;
font-size:clamp(12.8px,calc(12.8px + 3.2 * ((100vw - 768px) / 672)),16px);
}
.pages-company .p-two-column-list__list{
margin-bottom:0;
}
.p-two-column-list__sub-title{
margin:0;
font-size:16px;
font-size:clamp(12.8px,calc(12.8px + 3.2 * ((100vw - 768px) / 672)),16px);
font-weight:700;
}
.p-two-column-list__text{
margin:0;
}
input.p-two-column-list__text{
padding:10px;
}
.p-two-column-list__text + .p-two-column-list__text{
margin-top:8px;
}
@media screen and (max-width:768px){
.p-two-column-list{
padding:0 0 12% 0;
}
.p-two-column-list__item{
flex-direction:column;
}
.p-two-column-list__heading{
width:100%;
padding:2.5% 5% 2.5% 5%;
}
.p-two-column-list__content{
width:100%;
padding:5% 5% 5% 5%;
}
.p-two-column-list__title{
font-size:20px;
font-size:clamp(15px,calc(15px + 10 * ((100vw - 290px) / 200)),25px);
}
.p-two-column-list__sub-title{
font-size:16px;
font-size:clamp(12px,calc(12px + 8 * ((100vw - 290px) / 200)),20px);
}
.p-two-column-list__list{
margin-bottom:6%;
}
.p-two-column-list__list-item, .p-two-column-list__text{
font-size:16px;
font-size:clamp(12px,calc(12px + 8 * ((100vw - 290px) / 200)),20px);
}
}
/* --- p case flex --- */
.p-case{
padding:0 0 24px 0;
background-color:#f3f3f3;
border-radius:24px;
}
.p-case__head{
display:flex;
align-items:center;
gap:2%;
margin-bottom:40px;
}
.pages-flow .p-case__head{
margin-bottom:20px;
}
.p-case__label{
display:flex;
align-items:center;
justify-content:center;
width:auto;
min-width:80px;
height:auto;
padding:1% 1% 1% 1%;
border-radius:10px;
background-color:#164877;
color:#ffffff;
font-size:20px;
font-size:clamp(16px, calc(16px + 4 * ((100vw - 768px) / 672)), 20px);
font-weight:700;
line-height:1;
}
.pages-white .p-case__label{
background-color:#b3b3b3;
}
.pages-green .p-case__label{
background-color:#98C890;
}
.pages-orange .p-case__label{
background-color:#F3B75F;
}
.pages-platinum .p-case__label{
background-color:#8EA8B5;
}
.pages-blue .p-case__label{
background-color:#8CC3E5;
}
.p-case__title{
margin:0;
font-size:24px;
font-size:clamp(19.2px, calc(19.2px + 4.8 * ((100vw - 768px) / 672)), 24px);
font-weight:700;
}
.p-case__list{
position:relative;
display:flex;
flex-direction:column;
gap:12px;
margin-bottom:38px;
}
.p-case__list-item{
position:relative;
padding-left:16px;
font-size:16px;
font-size:clamp(12.8px,calc(12.8px + 3.2 * ((100vw - 768px) / 672)),16px);
}
.p-case__list-item::before{
position:absolute;
top:1em;
left:0;
width:8px;
height:8px;
border-radius:50%;
transform:translateY(-50%);
content:"";
}
.p-case__list-line2{
flex-direction:row;
flex-wrap:wrap;
}
.p-case__list-line2 li{
width:47%;
}
.pages-white .p-case__list-item::before{
background-color:#b3b3b3;
}
.pages-green .p-case__list-item::before{
background-color:#98C890;
}
.pages-orange .p-case__list-item::before{
background-color:#F3B75F;
}
.pages-platinum .p-case__list-item::before{
background-color:#8EA8B5;
}
.pages-blue .p-case__list-item::before{
background-color:#8CC3E5;
}
.p-case__box{
margin:0 0 56px 0;
padding:12px 24px 8px 24px;
background-color:#ffffff;
border-radius:20px;
}
.p-case__text{
color:#555555;
font-size:16px;
font-size:clamp(12.8px,calc(12.8px + 3.2 * ((100vw - 768px) / 672)),16px);
}
.p-case__arrow{
position:relative;
padding-bottom:48px;
}
.p-case__arrow::after{
position:absolute;
bottom:16px;
left:50%;
margin-bottom:24px;
border-style:solid;
border-width:24px 20px 0 20px;
border-color:#164877 transparent transparent transparent;
transform:translateX(-50%);
content:"";
}
.p-case__set-inner{
display:flex;
align-items:center;
gap:2%;
margin-bottom:10px;
}
.p-case__label-set{
display:flex;
align-items:center;
justify-content:center;
width:auto;
min-width:80px;
height:auto;
padding:1% 1% 1% 1%;
border-radius:10px;
background-color:#164877;
color:#ffffff;
font-size:20px;
font-size:clamp(16px, calc(16px + 4 * ((100vw - 768px) / 672)), 20px);
font-weight:700;
line-height:1;
}
.p-case__set-inner_under{
align-items:flex-start;
margin-bottom:60px;
}
.p-case__set-inner_under .p-case__label-set{
margin:1.4rem 0 0 0;
background-color:#6F94BB;
}
@media screen and (max-width:767px){
.p-case__text{
font-size:16px;
font-size:clamp(12px, calc(12px + 8 * ((100vw - 290px) / 200)), 20px);
}
.p-case__list-item{
font-size:16px;
font-size:clamp(12px, calc(12px + 8 * ((100vw - 290px) / 200)), 20px);
}
.p-case__head{
gap:4%;
}
.p-case__label{
padding:6% 1% 6% 1%;
}
.p-case__set-inner{
gap:4%;
}
.p-case__label-set{
padding:6% 1% 6% 1%;
}
}
/* ==========================================================================
5. Utility 
========================================================================== */
.nobr{
white-space:nowrap;
}
/* --- fade in --- */
body{
animation:fadeIn 1.5s ease-out forwards;
}
@keyframes fadeIn{
0%{opacity:0;}
100%{opacity:1;}
}
.fade-target{
opacity:0;
transform:translateY(20px);
transition:opacity 0.8s ease, transform 0.8s ease;
}
.fade-target.is-loaded{
opacity:1;
transform:translateY(0);
}
/* --- CF7 Submit --- */
.pages-contact .p-two-column-list__title{
display:flex;
align-items:center;
justify-content:center;
}
.p-two-column-list__title .p-form-required{
background:#e34949;
padding:6px 5px 7px 5px;
font-size:0.7em;
line-height:0.7em;
border-radius:2px;
font-weight:normal;
margin-left:4px;
margin-top:2px;
}
.p-channels__button-wrapper{
position:relative;
display:flex;
overflow:hidden;
}
.p-form-submit-btn{
display:inline-flex;
align-items:center;
justify-content:center;
line-height:1;
}
.wpcf7-spinner{
position:absolute;
top:50%;
left:calc(100% + 12px);
transform:translateY(-50%);
margin:0 !important;
visibility:hidden;
opacity:0;
transition:opacity .3s;
}
.wpcf7 form.submitting .wpcf7-spinner{
visibility:visible;
opacity:1;
}
@media screen and (max-width:767px){
.wpcf7 input{
width:100%;
}
.p-form-submit-btn{
height:64px !important;
}
}
.wpcf7-not-valid-tip{
display:inline;
margin-top:8px;
margin-left:0;
font-size:1.2rem;
}
textarea.p-two-column-list__text{
width:100%;
}
textarea[placeholder*="お問い合わせ内容"], textarea{
width:100%;
height:200px !important;
min-height:100px;
}
.wpcf7-form p{
margin:0 0 0 0;
width:100%;
}
.wpcf7-form-control-wrap{
display:block;
width:100%;
}
.form-table th label{
display:inline-flex;
align-items:center;
gap:8px;
}