:root{
--icon-arrow-right: url("data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20id%3D%22_%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_2%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2021.78%208.2%22%3E%3Cg%20id%3D%22_%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1-2%22%3E%3Cpolyline%20points%3D%220%207.2%2019.46%207.2%2013.33%20.69%22%20style%3D%22fill%3Anone%3B%20fill-rule%3Aevenodd%3B%20stroke%3A%23fff%3B%20stroke-miterlimit%3A10%3B%20stroke-width%3A2px%3B%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
--icon-arrow-bottom: url("data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20id%3D%22_%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_2%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2027.12%2013.56%22%3E%3Cg%20id%3D%22_%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1-2%22%3E%3Cpolygon%20points%3D%2227.12%200%2013.59%2013.56%200%200%2027.12%200%22%20style%3D%22fill%3A%23666%3B%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
--font-tsuku: "fot-tsukuardgothic-std", sans-serif;
--font-Poppins: "Poppins", sans-serif;
--font-sans: "Noto Sans JP", sans-serif;
--color_black: #333;
--color_white: #fff;
--color_gray: #666;
--color_beige-a: #efefeb;
--color_beige-b: #f1ebe6;
--color_brown: #b2a39a;
--color-mosGreen: #9cb28e;
--transition-duration: 0.3s;
--transition-opacity: 0.65;
--transition-timing-function: ease;
--z-index-c-loader: 1000;
--px-10: calc(10px * .65);
--px-13: calc(13px * .65);
--px-15: calc(15px * .65);
--px-20: calc(20px * .65);
--px-24: calc(24px * .65);
--px-25: calc(25px * .65);
--px-28: calc(28px * .65);
--px-30: calc(30px * .65);
--px-32: calc(32px * .65);
--px-35: calc(35px * .65);
--px-40: calc(40px * .65);
--px-45: calc(45px * .65);
--px-48: calc(48px * .65);
--px-50: calc(50px * .65);
--px-55: calc(55px * .65);
--px-60: calc(60px * .65);
--px-65: calc(65px * .65);
--px-70: calc(70px * .65);
--px-75: calc(75px * .65);
--px-80: calc(80px * .65);
--px-85: calc(85px * .65);
--px-90: calc(90px * .65);
--px-95: calc(95px * .65);
--px-100: calc(100px * .65);
--px-110: calc(110px * .65);
--px-120: calc(120px * .65);
--px-130: calc(130px * .65);
--px-132: calc(132px * .65);
--px-135: calc(135px * .65);
--px-140: calc(140px * .65);
--px-150: calc(150px * .65);
--px-160: calc(160px * .65);
--px-180: calc(180px * .65);
--px-200: calc(200px * .65);
--px-250: calc(250px * .65);
--px-240: calc(240px * .65);
--px-300: calc(300px * .65);
--px-321: calc(321px * .65);
--px-350: calc(350px * .65);
--px-400: calc(400px * .65);
--px-450: calc(450px * .65);
--px-500: calc(500px * .65);
--px-550: calc(550px * .65);
--px-600: calc(600px * .65);
--px-650: calc(650px * .65);
--px-700: calc(700px * .65);
--px-750: calc(750px * .65);
--px-800: calc(800px * .65);
--font-10: 10px;
--font-11: 11px;
--font-12: 11px;
--font-13: 12px;
--font-14: 13px;
--font-15: 13px;
--font-16: 15px;
--font-17: 15px;
--font-18: 16px;
--font-19: 16px;
--font-20: 16px;
--font-21: 17px;
--font-22: 18px;
--font-23: 18px;
--font-24: 19px;
--font-25: 19px;
--font-26: 20px;
--font-27: 21px;
--font-28: 21px;
--font-29: 22px;
--font-30: 23px;
--font-31: 23px;
--font-32: 24px;
--font-33: 24px;
--font-34: 25px;
--font-35: 26px;
--font-36: 26px;
--font-37: 27px;
--font-38: 28px;
--font-39: 28px;
--font-40: 29px;
--font-41: 29px;
--font-42: 30px;
--font-43: 31px;
--font-44: 31px;
--font-45: 32px;
--font-46: 33px;
--font-47: 33px;
--font-48: 34px;
--font-49: 34px;
--font-50: 35px;
--font-56: 38px;
--font-60: 41px;
--font-70: 48px;
--font-80: 54px;
--font-90: 60px;
--font-120: 90px;
--font-160: calc(160px * .65);
}
@media (min-width: 960px) {
:root {
--px-13: 13px;
--px-10: 10px;
--px-15: 15px;
--px-20: 20px;
--px-24: 24px;
--px-25: 25px;
--px-28: 28px;
--px-30: 30px;
--px-32: 32px;
--px-35: 35px;
--px-40: 40px;
--px-45: 45px;
--px-48: 48px;
--px-50: 50px;
--px-55: 55px;
--px-60: 60px;
--px-65: 65px;
--px-70: 70px;
--px-75: 75px;
--px-80: 80px;
--px-85: 85px;
--px-90: 90px;
--px-95: 95px;
--px-100: 100px;
--px-110: 110px;
--px-120: 120px;
--px-130: 130px;
--px-132: 132px;
--px-135: 135px;
--px-140: 140px;
--px-150: 150px;
--px-160: 160px;
--px-180: 180px;
--px-200: 200px;
--px-250: 250px;
--px-240: 240px;
--px-300: 300px;
--px-321: 321px;
--px-350: 350px;
--px-400: 400px;
--px-450: 450px;
--px-500: 500px;
--px-550: 550px;
--px-600: 600px;
--px-650: 650px;
--px-700: 700px;
--px-750: 750px;
--px-800: 800px;
}
}
@media (min-width: 960px) {
:root {
--font-10: 10px;
--font-11: 11px;
--font-12: 12px;
--font-13: 13px;
--font-14: 14px;
--font-15: 15px;
--font-16: 16px;
--font-17: 17px;
--font-18: 18px;
--font-19: 19px;
--font-20: 20px;
--font-21: 21px;
--font-22: 22px;
--font-23: 23px;
--font-24: 24px;
--font-25: 25px;
--font-26: 26px;
--font-27: 27px;
--font-28: 28px;
--font-29: 29px;
--font-30: 30px;
--font-31: 31px;
--font-32: 32px;
--font-33: 33px;
--font-34: 34px;
--font-35: 35px;
--font-36: 36px;
--font-37: 37px;
--font-38: 38px;
--font-39: 39px;
--font-40: 40px;
--font-41: 41px;
--font-43: 43px;
--font-44: 44px;
--font-45: 45px;
--font-46: 46px;
--font-47: 47px;
--font-48: 48px;
--font-49: 49px;
--font-50: 50px;
--font-56: 56px;
--font-60: 60px;
--font-70: 70px;
--font-80: 80px;
--font-90: 90px;
--font-120: 120px;
--font-160: 160px;
}
}
._d-none {
display: none !important;
}
._d-block {
display: block !important;
}
@media (min-width: 461px) {
._d-ssm-none {
display: none !important;
}
._d-ssm-block {
display: block !important;
}
}
@media (min-width: 561px) {
._d-sm-none {
display: none !important;
}
._d-sm-block {
display: block !important;
}
}
@media (min-width: 768px) {
._d-md-none {
display: none !important;
}
._d-md-block {
display: block !important;
}
}
@media (min-width: 961px) {
._d-lg-none {
display: none !important;
}
._d-lg-block {
display: block !important;
}
}
@media (min-width: 1001px) {
._d-llg-none {
display: none !important;
}
._d-llg-block {
display: block !important;
}
}
@media (min-width: 1201px) {
._d-xl-none {
display: none !important;
}
._d-xl-block {
display: block !important;
}
}
body{
font-family: var(--font-sans) !important;
color: var(--color_black) !important;
font-size: var(--font-18) !important;
} .hero {
height: max(85vh, 650px);
min-height: 650px;
position: relative;
overflow: hidden;
}
.hero>img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
}
.hero>.wrap{
width: min(1180px,95vw);
margin-inline: auto;
height: max(70svh, 500px);
min-height: 500px;
position: relative;
}
.hero>.wrap>.copy{
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
display: flex;
gap: 5px;
flex-direction: row-reverse;
}
.hero>.wrap>.copy>.copy-ttl{
color: var(--color_white);
writing-mode: vertical-rl;
-webkit-writing-mode: vertical-rl;
white-space: nowrap;
line-height: 2;
padding-inline: 1em;
position: relative;
font-family: var(--font-tsuku);
font-weight: 600;
font-size: 35px;
margin-block: 0;
}
.hero>.wrap>.copy>.copy-ttl.-second{
transform: translateY(1.5em);
}
.hero>.wrap>.copy>.copy-ttl::before{
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
background-color: var(--color_gray);
width: 100%;
height: 100%;
z-index: -1;
}
@media (max-width:767px) {
.hero{
height: 80svh;
}
.hero>.wrap{
height: 70svh;
}
.hero>.wrap>.copy>.copy-ttl{
font-size: 28px;
}
} .flx{
display: flex;
}
a{
transition: var(--transition-duration) var(--transition-timing-function);
}
.action{
margin-inline: auto;
width: min(767px,100%);
}
.action>.link{
background-color: var(--color-mosGreen);
padding: var(--px-15) 1em var(--px-15) 3em;
color: var(--color_white);
font-size: var(--font-28);
font-weight: 600;
font-family: var(--font-tsuku);
position: relative;
border-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
}
.action>.link>span{
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
width: 350px;
max-width: 100%;
}
.action>.link>.check{
position: absolute;
top: 50%;
left: 10%;
transform: translateY(-50%);
transition: var(--transition-duration) var(--transition-timing-function);
}
@media (hover : hover) { 
.action>.link:hover>span>.c-icon.-arrow::before{
transform: translateX(10px);
}
}
@media (max-width:767px) {
.action{
margin-block: 5em 2em;
}
.action>.link>.check{
width: 100px;
}
}
@media (max-width:560px) {
.action>.link>.check{
left: 0;
}
.action>.link>.check{
width: 25%;
}
} .c-icon {
display: inline-grid;
place-items: center;
padding: 0;
vertical-align: bottom;
font-style: normal;
position: relative;
}
.c-icon::before {
content: "";
display: block;
width: 1em;
aspect-ratio: 1/1;
background-color: inherit;
-webkit-mask-position: 50% 50%;
mask-position: 50% 50%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
transition: var(--transition-duration) var(--transition-timing-function);
}
.c-icon.-arrow::before{
-webkit-mask-image: var(--icon-arrow-right);
mask-image: var(--icon-arrow-right);
background-color: var(--color_white);
}
.c-icon.-arrow-bottom::before{
-webkit-mask-image: var(--icon-arrow-bottom);
mask-image: var(--icon-arrow-bottom);
background-color: var(--color_gray);
} .c-loader {
--c-loader-z-index: var(--z-index-c-loader);
--c-loader-background: var(--color_beige-a);
}
.c-loader {
z-index: var(--c-loader-z-index);
opacity: 1;
visibility: visible;
position: fixed;
inset: 0;
display: grid;
place-items: center;
margin: 0;
padding: 0;
background: var(--c-loader-background);
line-height: 1.4;
}
.c-loader {
background: rgba(255, 255, 255, 0.6);
}
.c-loader::after {
z-index: -1;
content: "";
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: var(--c-loader-background);
}
.c-loader.-is-loaded {
animation: c-loader-curtain 1s cubic-bezier(0.77, 0, 0.175, 1) 0.2s 1 both;
}
.c-loader.-is-loaded::after {
animation: c-loader-curtain 1s cubic-bezier(0.77, 0, 0.175, 1) 0s 1 both;
}
@keyframes c-loader-curtain {
0% {
clip-path: inset(0 0 0 0);
}
100% {
clip-path: inset(0 0 0 100%);
}
} .fade-in-hero {
opacity: 0;
}
.fade-in-hero.active {
animation: fadeIn 1s ease-in-out forwards;
}
.fade-in {
opacity: 0;
}
.fade-in.active {
animation: fadeIn 1s ease-in-out forwards;
}
@keyframes fadeIn {
to {
opacity: 1;
}
}
.slide-in-up {
transform: translateY(50px);
opacity: 0;
}
.slide-in-up.active {
animation: slideInUp 1s ease-out forwards;
}
@keyframes slideInUp {
to {
transform: translateY(0);
opacity: 1;
}
} .float {
opacity: 0;
}
.float.active {
opacity: 1;
transform: translateY(-50%);
animation: float 2s ease-in-out infinite;
transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
@keyframes float {
0%, 100% {
transform: translateY(-50%);
}
50% {
transform: translateY(-60%);
}
} .slide-in-left{
position: relative;
overflow: hidden;
}
.slide-in-left::after{
content: "";
display: block;
width: calc(100% + 1px);
height: 100%;
background: var(--color-mosGreen);
position: absolute;
top: 0;
left: -1px;
transform: translateX(0);
transition-property: transform;
transition-duration: 1s;
transition-timing-function: ease-in-out;
transition-delay: var(.6s, 0);
}
.slide-in-left.active::after {
transform: translateX(100%);
}
.animation-delay-1{
animation-delay: .25s !important;
}
.animation-delay-2{
animation-delay: .5s !important;
}
.animation-delay-3{
animation-delay: .75s !important;
}
.animation-delay-4{
animation-delay: 1s !important;
}
.animation-delay-5{
animation-delay: 1.25s !important;
}
.animation-delay-6{
animation-delay: 1.5s !important;
}
.animation-delay-7{
animation-delay: 1.75s !important;
} .about{
background-color: var(--color_beige-a);
padding-bottom: var(--px-200);
margin-top: -100px;
padding-top: 100px;
}
.about>.inner{
width: min(1400px,95vw);
margin-inline: auto;
position: relative;
}
.about>.inner>.wrap{
transform: translateY(-100px);
position: relative;
z-index: 2;
}
.about>.inner>.wrap>.copy{
background: linear-gradient(180deg,rgba(255, 255, 255, 1) 90%, rgba(255, 255, 255, 0) 100%);
padding: var(--px-60) var(--px-80);
}
.about>.inner>.wrap>.copy>.flx{
align-items: flex-end;
gap: var(--px-80);
}
.about>.inner>.wrap>.copy>.flx>.item{
flex: 1;
max-width: 50%;
}
.about>.inner>.wrap>.copy>.flx>.item>.deco{
color: var(--color_beige-a);
font-size: var(--font-120);
font-family: var(--font-Poppins);
font-weight: 600;
letter-spacing: 1px;
line-height: 1;
}
.about>.inner>.wrap>.copy>.flx>.item>.copy{
font-size: var(--font-35);
font-family: var(--font-tsuku);
font-weight: 700;
line-height: 1.6;
margin-top: .5em;
}
.about>.inner>.wrap>.copy>.flx>.item>.txt{
font-size: var(--font-18);
margin-top: 1.5em;
line-height: 1.8;
font-weight: 500;
}
.about>.inner>.wrap>.content>.flx{
position: relative;
}
.about>.inner>.wrap>.content>.flx>.item{
flex: 1;
max-width: 40%;
}
.about>.inner>.wrap>.content>.flx>.item.-txt{
padding: var(--px-65);
background-color: rgba(255, 255, 255, .9);
width: 800px;
max-width: 100%;
position: absolute;
bottom: -10%;
right: 0;
}
.about>.inner>.wrap>.content>.flx>.item.-txt>.ttl{
font-size: var(--font-30);
font-family: var(--font-tsuku);
font-weight: 700;
line-height: 1.6;
color: var(--color_white);
background-color: var(--color_gray);
padding-inline: .5em;
padding-block: .3em;
}
.about>.inner>.wrap>.content>.flx>.item.-txt>.txt{
font-size: var(--font-18);
margin-top: 1.5em;
line-height: 1.8;
font-weight: 500;
}
.about>.inner>.wrap>.content>.flx>.item.-media{
flex: 1;
max-width: 60%;
}
.about>.inner>.wrap>.content>.flx>.item>.media>img{
aspect-ratio: 8 / 5;
object-fit: cover;
width: 800px;
max-width: 100%;
display: block;
}
@media (max-width:1100px) {
.about>.inner>.wrap>.copy>.flx{
flex-direction: column;
gap: 20px;
}
.about>.inner>.wrap>.copy>.flx>.item{
max-width: 100%;
}
.about>.inner>.wrap>.copy>.flx>.item>.media>img{
width: 100%;
}
.about>.inner>.wrap>.content>.flx{
flex-direction: column;
}
.about>.inner>.wrap>.content>.flx>.item.-txt{
position: unset;
width: 100%;
}
.about>.inner>.wrap>.content>.flx>.item{
max-width: 100%;
}
.about>.inner>.wrap>.content>.flx>.item.-media{
max-width: 100%;
}
.about>.inner>.wrap>.content>.flx>.item>.media>img{
width: 100%;
}
}
@media (max-width:767px) {
.about>.inner>.wrap>.copy{
padding-inline: 1em;
}
}
@media (max-width:560px) {
.about{
padding-bottom: 200px;
}
.about>.inner>.wrap>.copy>.flx>.item>.deco{
font-size: 80px;
}
.about>.inner>.wrap>.content>.flx>.item.-txt{
padding: 1em;
}
.about>.inner>.wrap>.copy>.flx>.item>.logo>img{
width: 265px;
}
} .product>.inner{
width: min(1200px,95vw);
margin-inline: auto;
position: relative;
padding-block: var(--px-80) var(--px-140);
}
.product>.inner>.head{
align-items: flex-end;
position: absolute;
top: -75px;
left: 0;
width: 100%;
}
.product>.inner>.head>.ttl{
background-color: var(--color_gray);
color: var(--color_white);
font-size: var(--font-28);
flex: 1;
height: fit-content;
padding-block: .5em;
margin: 0;
margin-left: -46px;
padding-inline: 46px .5em;
}
.product>.inner>.txt{
font-size: var(--font-18);
font-weight: 500;
margin-bottom: var(--px-30);
}
.product>.inner>.head.flx{
gap: 0;
flex-direction: row;
}
.product>.inner>.flx{
gap: clamp(30px, 4.4444444444vw, 80px);
margin-bottom: var(--px-100);
}
.product>.inner>.flx>.item{
flex: 1;
}
.product>.inner>.flx>.item>.media>.txt{
text-align: right;
margin-top: .5em;
font-weight: 500;
}
.product>.inner>.flx>.item>.action>.full-link {
display: block;
text-decoration: none;
position: relative;
}
.product>.inner>.flx>.item>.action>.full-link>.image-wrapper {
position: relative;
display: block;
}
.product>.inner>.flx>.item>.action>.full-link>.image-wrapper::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #4d4d4d;
opacity: 0.8;
z-index: 1;
transition: opacity 0.3s ease;
}
@media (hover : hover) { 
.product>.inner>.flx>.item>.action>.full-link:hover>.image-wrapper::before {
opacity: 0.7;
}
}
.product>.inner>.flx>.item>.action>.full-link>.image-wrapper>img {
width: 100%;
display: block;
}
.product>.inner>.flx>.item>.action>.full-link>.text-wrapper{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
color: var(--color_white);
font-family: var(--font-tsuku);
font-weight: 700;
display: flex;
align-items: center;
gap: 10px;
}
.product>.inner>.flx>.item>.action>.full-link:hover>.text-wrapper>.c-icon::before{
transform: translateX(10px);
}
.product>.inner>.flx>.item>.list{
margin-bottom: var(--px-50);
}
.product>.inner>.flx>.item>.list>.item{
display: flex;
align-items: center;
gap: 4px;
}
.product>.inner>.flx>.item>.list>.item+.item{
margin-top: 8px;
}
.product>.inner>.flx>.item>.list>.item>dt{
width: 20%;
background-color: var(--color_gray);
color: var(--color_white);
font-weight: 700;
text-align: center;
padding: 10px 5px;
}
.product>.inner>.flx>.item>.list>.item>dd{
flex: 1;
margin: 0;
background-color: var(--color_beige-a);
padding: 10px 5px;
}
.product>.inner>.bnr{
text-align: center;
}
@media (hover : hover) { 
.product>.inner>.bnr>.link:hover{
opacity: 0.8;
}
}
@media (max-width:1100px) {
.product>.inner>.flx{
flex-direction: column;
margin-bottom: 50px;
}
.product>.inner>.flx>.item.-flx{
display: flex;
gap: 20px;
align-items: flex-end;
}
.product>.inner>.flx>.item>.action{
width: 100%;
margin-block: 0;
}
.product>.inner>.flx>.item>.action>.full-link>.image-wrapper>img{
height: 250px;
object-fit: cover;
}
}
@media (max-width:767px) {
.product>.inner{
padding-block: 30px 50px;
}
.product>.inner>.flx{
margin-bottom: 30px;
}
.product>.inner>.flx>.item.-flx{
flex-direction: column;
align-items: center;
}
.product>.inner>.head.flx>img{
width: 120px;
}
.product>.inner>.head>.ttl{
margin-left: -33px;
padding-block: .3em;
}
.product>.inner>.flx>.item>.list>.item{
flex-direction: column;
align-items: flex-start;
gap: 0;
}
.product>.inner>.flx>.item>.list>.item>dt,
.product>.inner>.flx>.item>.list>.item>dd{
width: 100%;
}
.product>.inner>.flx>.item>.list>.item>dd{
padding-block: 15px;
}
.product>.inner>.flx>.item>.list>.item+.item{
margin-top: 20px;
}
.product>.inner>.flx>.item>.media>.txt{
text-align: center;
}
.product>.inner>.flx>.item>.action>.full-link>.image-wrapper>img{
height: 130px;
}
} .flow{
background-color: var(--color_beige-b);
position: relative;
padding-bottom: var(--px-100);
}
.flow>.deco01{
position: absolute;
top: 15%;
right: 1%;
}
.flow>.deco02{
position: absolute;
top: 38%;
left: 5%;
transform: translateY(-50%);
}
.flow>.inner{
width: min(900px,95vw);
margin-inline: auto;
padding-block: var(--px-80) 0;
position: relative;
}
.flow>.inner::before{
content: attr(date-text);
position: absolute;
top: -.5%;
left: -20%;
line-height: 1;
font-size: var(--font-120);
font-family: var(--font-Poppins);
font-weight: 700;
color: var(--color_white);
writing-mode: vertical-rl;
-webkit-writing-mode: vertical-rl;
white-space: nowrap;
}
.flow>.inner>.head{
text-align: center;
position: relative;
}
.flow>.inner>.head>.ttl{
font-size: var(--font-28);
font-family: var(--font-tsuku);
font-weight: 700;
position: relative;
margin-bottom: var(--px-60);
}
.flow>.inner>.head::before{
content: "";
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
width: 300px;
height: 2px;
background-color: var(--color_brown);
}
.flow>.inner>.head::after{
content: "";
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
width: 300px;
height: 2px;
background-color: var(--color_brown);
}
.flow>.inner>.item{
background-color: var(--color_white);
display: flex;
align-items: center;
position: relative;
}
.flow>.inner>.item.deco-01>.deco{
position: absolute;
bottom: 0;
right: 0;
}
.flow>.inner>.item.-reverse{
flex-direction: row-reverse;
}
.flow>.inner>.item.-reverse>.content{
flex: 1;
height: 470px;
display: flex;
flex-direction: column;
justify-content: center;
}
.flow>.inner>.item>.content{
flex: 1;
padding-inline: var(--px-60);
height: 350px;
display: flex;
flex-direction: column;
justify-content: center;
}
.flow>.inner>.item>.content>.txt-large{
font-size: var(--font-18);
font-weight: 600;
}
.flow>.inner>.item>.content>.ttl{
font-size: var(--font-25);
font-weight: 600;
padding-bottom: var(--px-30);
margin-bottom: var(--px-30);
border-bottom: 1px solid var(--color_gray);
}
.flow>.inner>.item>.content>.ttl>span{
font-family: var(--font-Poppins);
font-weight: 600;
font-size: var(--font-25);
}
.flow>.inner>.item>.content>.txt{
font-size: var(--font-18);
line-height: 2;
}
.flow>.inner>.item>.content>.note{
font-size: var(--font-15);
}
.flow>.inner>.item>.media{
flex-shrink: 0;
}
.flow>.inner>.item>.media img{
width: 200px;
height: 100%;
object-fit: cover;
display: block;
}
.flow>.inner>.c-icon{
padding-block: var(--px-60);
display: block;
}
.flow>.inner>.c-icon.-arrow-bottom::before{
width: 27px;
margin-inline: auto;
}
.flow>.media{
padding-inline: 5%;
text-align: center;
position: relative;
z-index: 0;
margin-bottom: var(--px-100);
}
.flow>.media>img{
width: clamp(300px, 66.6666666667vw, 1200px);
}
.flow>.media>.deco03{
position: absolute;
bottom: 0;
right: 3%;
z-index: -1;
}
@media (max-width:1560px) {
.flow>.deco01{
right: 0;
}
.flow>.deco02{
left: 0;
top: 45%;
}
.flow>.media>.deco03{
right: 0;
}
}
@media (max-width:1240px) {
.flow>.inner::before{
content: none;
}
}
@media (max-width:1200px) {
.flow>.inner>.item>.content{
position: relative;
}
.flow>.inner>.item>.content>.deco01{
position: absolute;
bottom: 0;
right: 0;
}
.flow>.inner>.item>.content>.deco01>img{
width: 200px;
}
.flow>.inner>.item>.content>.deco02{
position: absolute;
bottom: 0;
left: 0;
}
.flow>.inner>.item>.content>.deco02>img{
width: 150px;
}
}
@media (max-width:960px) {
.flow>.inner>.head::before,
.flow>.inner>.head::after{
width: 30%;
}
}
@media (max-width:767px) {
.flow{
z-index: 1;
}
.flow>.deco03{
position: absolute;
bottom: 0;
right: 0;
z-index: -1;
}
.flow>.deco03>img{
width: 100px;
}
.flow>.inner>.item{
flex-direction: column;
}
.flow>.inner>.item.-reverse{
flex-direction: column;
}
.flow>.inner>.item>.content{
padding-inline: 1em;
padding-block: 30px;
}
.flow>.inner>.item>.content>.deco02{
left: unset;
right: 0;
bottom: -5px;
}
.flow>.inner>.item>.media{
width: 100%;
}
.flow>.inner>.item>.media img{
width: 100%;
height: 400px;
}
.flow>.inner>.c-icon{
padding-block: 30px;
}
.flow>.media{
margin-bottom: 30px;
}
.flow>.media>img{
width: 100%;
}
.flow>.action{
width: 95%;
}
}
@media (max-width:560px) {
.flow>.inner>.item>.media img{
height: 270px;
}
} .feature>.inner{
width: min(850px,95vw);
margin-inline: auto;
padding-block: var(--px-80) var(--px-120);
position: relative;
}
.feature>.inner::before{
content: attr(date-text);
position: absolute;
top: -1%;
left: -20%;
line-height: 1;
font-size: var(--font-120);
font-family: var(--font-Poppins);
font-weight: 700;
color: var(--color_beige-b);
writing-mode: vertical-rl;
-webkit-writing-mode: vertical-rl;
white-space: nowrap;
}
.feature>.inner>.head{
margin-bottom: var(--px-60);
}
.feature>.inner>.head>.ttl{
text-align: center;
font-size: var(--font-28);
font-family: var(--font-tsuku);
font-weight: 700;
}
.feature>.inner>.item+.item{
margin-top: var(--px-100);
}
.feature>.inner>.item:last-of-type{
margin-bottom: var(--px-120);
}
.feature>.inner>.item>.wrap{
background-color: var(--color_beige-a);
padding-inline: var(--px-60) 0;
position: relative;
}
.feature>.inner>.item>.wrap>.number{
position: absolute;
top: -12%;
left: 3%;
}
.feature>.inner>.item>.wrap>.flx>.content{
margin-top: 80px;
z-index: 2;
width: 540px;
max-width: 100%;
margin-bottom: 30px;
}
.feature>.inner>.item>.wrap>.flx>.content>.ttl{
font-size: var(--font-28);
line-height: 1.6;
font-weight: 500;
}
.feature>.inner>.item>.wrap>.flx>.content>.txt{
font-size: var(--font-18);
line-height: 1.8;
margin-bottom: 0;
font-weight: 500;
}
.feature>.inner>.item>.wrap>.flx>.image{
position: absolute;
right: 0;
bottom: 0;
width: 300px;
max-width: 100%;
height: 100%;
object-position: center;
z-index: 1;
}
@media (max-width:1240px) {
.feature>.inner::before{
content: none;
}
}
@media (max-width:960px) {
.feature>.inner>.item>.wrap>.flx>.image{
opacity: 0.4;
}
.feature>.inner>.item>.wrap{
padding-inline: 1em;
}
.feature>.inner>.item>.wrap>.flx>.content{
width: 100%;
}
}
@media (max-width:767px) {
.feature>.inner{
padding-bottom: 50px;
}
.feature>.inner>.head>.ttl{
margin-bottom: 3em;
}
.feature>.inner>.item:last-of-type{
margin-bottom: 50px;
}
} .tsunagaru-footer{
background-color: #b4ada9;
padding-block: var(--px-60);
}
.tsunagaru-footer>.inner{
width: 95vw;
margin-inline: auto;
}
.tsunagaru-footer>.inner>.flx{
justify-content: center;
align-items: center;
gap: clamp(30px, 6.6666666667vw, 120px);
padding-bottom: var(--px-50);
border-bottom: 1px solid var(--color_black);
}
.tsunagaru-footer>.inner>.flx>.brand>.flx{
gap: var(--px-40);
align-items: center;
}
.kuroda-logo>.txt{
font-size: var(--font-13);
}
.kuroda-content>.txt{
margin: 0;
line-height: 1.5;
}
.kuroda-content>.txt>.link{
color: var(--color_black);
text-decoration: underline;
}
.tsunagaru-footer>.inner>.flx>.btn{
display: flex;
flex-direction: column;
gap: 10px;
}
.tsunagaru-footer>.inner>.flx>.btn>.contact>.action{
width: 100%;
margin-block: 0;
}
.tsunagaru-footer>.inner>.flx>.btn>.contact>.action>.link{
background-color: var(--color_gray);
padding-inline: 1em;
padding-block: var(--px-25);
border-radius: 0;
font-size: var(--font-20);
max-width: 400px;
width: 100%;
}
.tsunagaru-footer>.inner>.nav{
width: min(1200px,100%);
margin-inline: auto;
}
.tsunagaru-footer>.inner>.nav>.item{
justify-content: flex-end;
margin-top: var(--px-30);
gap: clamp(20px, 3.6111111111vw, 65px);
}
.tsunagaru-footer>.inner>.nav>.item{
padding: 0;
}
.tsunagaru-footer>.inner>.nav>.item>.list{
list-style-type: none;
}
.tsunagaru-footer>.inner>.nav>.item>.list>.link{
color: var(--color_black);
text-decoration: underline;
}
@media (hover : hover) {
.tsunagaru-footer>.inner>.nav>.item>.list>.link:hover{
opacity: 0.65;
}
}
@media (max-width:1280px) {
.tsunagaru-footer>.inner>.flx>.brand>.flx{
gap: 0;
flex-direction: column;
align-items: flex-start;
}
.tsunagaru-footer>.inner>.flx{
justify-content: space-between;
align-items: flex-end;
}
}
@media (max-width:767px) {
.tsunagaru-footer>.inner>.flx{
flex-direction: column;
align-items: center;
}
.tsunagaru-footer>.inner>.flx>.brand>.logo{
text-align: center;
}
.tsunagaru-footer>.inner>.flx>.brand>.logo>.link>img{
width: 300px;
}
.kuroda-logo>img{
width: 300px;
}
.tsunagaru-footer>.inner>.flx>.brand>.flx{
gap: 25px;
}
.tsunagaru-footer>.inner>.flx>.btn>.contact>.action>.link{
max-width: 100%;
}
}
@media (max-width:560px) {
.tsunagaru-footer>.inner>.nav>.item{
flex-direction: column;
}
.tsunagaru-footer>.inner>.flx>.btn{
width: 100%;
}
}