.page-header {
z-index: 0;
position: relative;
height: var(--px-350);
}
.page-header > .media {
z-index: -1;
position: absolute;
inset: 0;
}
.page-header > .media::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 100%;
background: #191817B2;
}
.page-header > .media .image {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.page-header > .content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: var(--px-40);
height: 100%;
margin-inline: auto;
padding: var(--px-100) var(--content-gutter) var(--px-50);
}
@media (min-width: 960px) {
.page-header > .content {
padding: calc(var(--site-header-height) + var(--px-80)) var(--content-gutter) var(--px-90);
}
}
.page-header > .content > .catchphrase {
display: none;
}
@media (min-width: 560px) {
.page-header > .content > .catchphrase {
display: block;
font-weight: 500;
font-size: var(--font-24);
line-height: 1.6;
letter-spacing: -0.01em;
}
}
@media (min-width: 960px) {
.page-header > .content > .catchphrase {
font-size: var(--font-30);
}
}
.page-header > .content > .catchphrase > span {
padding: 0.1em 0.4em;
background: rgba(0, 0, 0, 0.5);
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
line-height: 2;
color: var(--color-white);
}
.page-header.-narrow {
height: calc(var(--px-400) * 0.6666666667);
}
@media (min-width: 960px) {
.page-header.-narrow {
height: calc(var(--px-650) * 0.6666666667);
}
}
.page-header.-narrow > .content {
padding: var(--px-40) var(--content-gutter) var(--px-40);
}
@media (min-width: 960px) {
.page-header.-narrow > .content {
padding: calc(var(--site-header-height) + var(--px-30)) var(--content-gutter) var(--px-50);
}
}
.page-header > .content.-top {
justify-content: flex-start;
}
.page-header > .content > .catchphrase.-noHide {
display: block;
}
.lower{
background-color: var(--color-white);
}
.lower > .inner > .section{
margin-bottom: var(--px-120);
}
.lower > .inner > .section:last-child{
margin-bottom: 0;
} .section.-bnr > .inner > .bnr > .flx{
margin-top: clamp(15px, 2.7083333333vw, 52px);
display: flex;
gap: clamp(15px, 2.7083333333vw, 52px);
}
@media (hover : hover) {
.section.-bnr > .inner > .bnr > .flx > .list > a:hover{
opacity: var(--transition-opacity);
}
}
@media (max-width:560px) {
.section.-bnr > .inner > .bnr > .flx{
flex-direction: column;
align-items: center;
}
}
.bnr{
width: min(90vw,1000px);
margin: 0 auto;
}
.arie > .inner > .section.-bnr > .inner > .bnr{
width: min(90vw,960px);
margin-inline: auto;
}
@media (hover : hover) { 
.bnr > a:hover{
opacity: var(--transition-opacity);
}
} .company > .inner{
width: var(--content-width-small);
margin-inline: auto;
padding-block: var(--px-150) var(--px-200);
} .section > .inner{
position: relative;
z-index: 1;
}
.section > .inner > .deco{
position: absolute;
line-height: 1;
z-index: -1;
font-family: var(--font-Quicksand);
font-weight: 700;
}
.section.-message > .inner > .deco{
top: 0;
right: 0;
font-size: var(--font-60);
color: var(--color-offwhite);
writing-mode: vertical-rl;
-webkit-writing-mode: vertical-rl;
}
.message > .flx{
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: clamp(15px, 5.2083333333vw, 100px);
}
.message > .flx > .list.-left{
width: min(100%,440px);
}
.message > .flx > .list.-right{
width: min(100%,560px);
}
.message > .flx > .list.-left > img{
border: 4px solid var(--color-black);
margin-bottom: 32px;
}
.message > .flx > .list.-left > .content > .data{
border-bottom: 1px solid var(--color-black);
padding-bottom: 20px;
}
.message > .flx > .list.-left > .content > .data > p{
font-size: var(--font-13);
}
.message > .flx > .list.-left > .content > .data > .flx{
display: flex;
flex-direction: row;
align-items: center;
gap: 18px;
}
.message > .flx > .list.-left > .content > .data > .flx > .name{
font-size: var(--font-18);
font-weight: 500;
}
.message > .flx > .list.-left > .content > .data > .flx > .en{
font-weight: 700;
font-size: var(--font-14);
color: #918D8C;
font-family: var(--font-Quicksand);
}
.message > .flx > .list.-left > .content > .txt{
width: calc(100% - 7vw);
margin-top: 23px;
}
.message > .flx > .list.-left > .content > .txt > p{
font-size: var(--font-13);
line-height: 1.8;
}
.message > .flx > .list.-right > .ttl > h2{
font-weight: 600;
font-size: var(--font-38);
font-family: var(--font-serifJP);
text-decoration: underline;
text-underline-offset: 36%;
text-decoration-thickness: 6%;
text-decoration-skip-ink: auto;
line-height: 1.8;
margin-bottom: clamp(30px, 4.1666666667vw, 80px);
}
.message > .flx > .list.-right > .txt > p{
font-size: var(--font-16);
font-weight: 400;
margin-bottom: 1.5em;
line-height: 2;
}
.message > .flx > .list.-right > .txt > p:last-child{
margin-bottom: 0;
}
@media (max-width:767px) {
.message > .flx{
flex-direction: column;
align-items: center;
}
.section.-message > .inner > .deco{
top: unset;
bottom: 0;
}
.message > .flx > .list.-left{
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.message > .flx > .list.-right{
width: 100%;
}
.message > .flx > .list.-left > .content > .txt{
width: 100%;
}
}
.other-container {
padding: var(--px-80) 0 var(--px-140);
} .section.-policy > .inner > .deco{
bottom: 0;
left: 0;
font-size: clamp(100px, 6.6666666667vw, 128px);
color: var(--color-white);
letter-spacing: 5px;
}
.policy {
border: 4px solid var(--color-red)
}
.policy > .inner{
position: relative;
padding-block: 38px 60px;
margin: 1em;
}
.policy > .inner::after{
content: '';
position: absolute;
top: 0;
width: 100%;
height: 100%;
background-color: var(--color-orange-light);
opacity: 0.1;
z-index: -2;
}
.policy > .inner > .flx{
display: flex;
flex-direction: column;
align-items: center;
}
.policy > .inner > .flx > .ttl > h2{
font-size:var(--font-20);
font-weight: 400;
line-height: 2;
border-bottom: 1px solid var(--color-black);
margin-bottom: 28px;
}
.policy > .inner > .flx > .txt > p{
font-family: var(--font-serifJP);
font-weight: 500;
font-size: var(--font-40);
text-align: center;
color: var(--color-red)
}
@media (max-width:960px) {
.section.-policy > .inner > .deco{
font-size: 80px;
bottom: 10px;
left: 13px;
}
}
@media (max-width:767px) {
.policy > .inner > .flx > .txt > p{
font-size: 25px;
}
.section.-policy > .inner > .deco{
font-size: 45px;
bottom: 15px;
left: 17px;
}
}
@media (max-width:560px) {
.policy > .inner{
margin: 0.5em;
}
.policy > .inner > .flx > .txt > p{
font-size: 20px;
}
.section.-policy > .inner > .deco{
bottom: 5px;
left: 8px;
}
}
@media (max-width:460px) {
.policy > .inner > .flx > .txt > p{
font-size: 18px;
}
.section.-policy > .inner > .deco{
font-size: 35px;
}
} .section.-overview{
padding-top: var(--px-120);
}
.overview > .inner > .map{
border: 4px solid var(--color-black);
margin-bottom: 24px;
}
.table > table {
width: 100%;
border-collapse: collapse;
font-family: sans-serif;
}
.table > table > tbody > tr {
border-bottom: 1px solid #E0DEDE;
}
.table > table > tbody > tr > th {
width: 25%;
font-weight: normal;
vertical-align: top;
padding: 20px 16px;
font-size: var(--font-16);
font-weight: 600;
}
.table > table > tbody > tr > td {
width: 75%;
padding: 20px 16px;
font-size: var(--font-16);
font-weight: 400;
letter-spacing: .5px;
}
.table > table > tbody > tr > td  > span{
font-weight: 500;
}
.table > table > tbody > tr > td  > a{
text-underline-offset: 15%;
font-weight: 400;
}
.table > table > tbody > tr > td > .slash {
margin: 0 10px;
}
.table > table > tbody > tr > td > .txt{
font-size: var(--font-14);
color: #726C6B;
}
@media (max-width:767px) {
.table > table > tbody > tr{
display: flex;
flex-direction: column;
align-items: flex-start;
}
.table > table > tbody > tr > th{
width: 100%;
padding-bottom: 0;
padding-left: 0;
}
.table > table > tbody > tr > td{
width: 100%;
padding-left: 0;
}
.table > table > tbody > tr > td > .slash{
display: none;
}
}
@media (max-width:560px) {
.overview > .inner > .c-heading.-typeA > .en-ttl{
font-size: 30px;
}
.overview > .inner > .map > iframe{
width: 100%;
height: 350px;
}
} .creation > .inner{
padding-bottom: var(--px-120);
}
.creation > .inner > .section.-bnr{
width: var(--content-width-small);
margin-inline: auto;
} .section.-concept > .inner{
width: min(90vw, 960px);
margin-inline: auto;
padding-block: 150px 0;
}
.concept > .body > .list{
position: relative;
padding-top: 32px;
}
.concept > .body > .list.-right{
padding-left: 32px;
}
.concept > .body > .list.-left{
padding-right: 32px;
}
.concept > .body > .list + .list{
margin-top: 32px;
}
.concept > .body > .list > .img{
position: absolute;
top: 0;
}
.concept > .body > .list.-right > .img{
left: 0;
}
.concept > .body > .list.-left > .img{
right: 0;
}
.concept > .body > .list > .img > img{
width: 385px;
height: 288px;
object-fit: cover;
}
.concept > .body > .list > .number{
position: absolute;
top: 0;
font-family: var(--font-Quicksand);
font-size: var(--font-80);
font-weight: 500;
line-height: 0.8;
color: var(--color-blue);
}
.concept > .body > .list.-right > .number{
right: 45px;
}
.concept > .body > .list.-left > .number{
left: 40px;
}
.concept > .body > .list > .container{
background: #F8F8F7;
width: 100%;
}
.concept > .body > .list > .container > .content{
width: min(100%,580px);
padding-block: 2.5em 3.5em;
padding-inline: 3em;
}
.concept > .body > .list.-right > .container > .content{
margin-left: auto;
}
.concept > .body > .list.-left > .container > .content{
margin-right: auto;
}
.concept > .body > .list > .container > .content > h3{
font-size: var(--font-23);
font-weight: 700;
text-decoration: underline;
text-underline-offset: 10%;
text-decoration-thickness: 6%;
margin-bottom: 1em;
}
.concept > .body > .list > .container > .content > .number{
font-family: var(--font-Quicksand);
font-size: var(--font-80);
font-weight: 500;
line-height: 0.8;
color: var(--color-blue);
text-decoration: none;
}
.concept > .body > .list > .container > .content > p{
font-size: var(--font-16);
font-weight: 400;
}
@media (max-width:1120px) {
.concept > .body > .list > .img > img{
width: 280px;
}
.concept > .body > .list > .container > .content{
width: min(100%,600px);
}
}
@media (max-width:960px) {
.concept > .body > .list{
padding: 0;
}
.concept > .body > .list.-right{
padding-left: 0;
}
.concept > .body > .list.-left{
padding-right: 0;
}
.concept > .body > .list > .img{
position: unset;
}
.concept > .body > .list > .img > img{
width: 100%;
height: 100%;
}
.concept > .body > .list > .container > .content{
width: 100%;
padding-block: 1.5em;
padding-inline: 1em;
}
.concept > .body > .list > .container > .content > .number{
padding-bottom: 5px;
}
} .section.-style{
background-color: #F8F8F7;
}
.section.-style > .inner{
width: var(--content-width-small);
margin-inline: auto;
padding-block: 90px var(--px-120);
}
.style > .body > .list{
padding-block: var(--px-50) var(--px-60);
}
.style > .body > .list > .container{
background: var(--color-white);
padding-bottom: 40px;
}
.style > .body > .list > .container + .container{
margin-top: 90px;
}
.style > .body > .list > .container > .inner{
width: min(85vw,960px);
margin-inline: auto;
}
.style > .body > .list > .container > .inner > .flx{
display: flex;
align-items: center;
gap: clamp(25px, 3.3854166667vw, 65px);
}
.style > .body > .list > .container > .inner > .flx > .media{
position: relative;
top: -28px;
left: 0;
}
.style > .body > .list > .container > .inner > .flx > .media > img{
width: 520px;
border: 4px solid var(--color-black);
}
.style > .body > .list > .container > .inner > .flx > .content{
display: flex;
flex-direction: column;
align-items: center;
width: min(100%,376px);
margin-bottom: 20px;
}
.style > .body > .list > .container > .inner > .flx > .content.-only{
width: 100%;
position: relative;
top: -28px;
left: 0;
}
.style > .body > .list > .container > .inner > .flx > .content > h3{
font-size: var(--font-60);
font-weight: 500;
font-family: var(--font-Quicksand);
margin-bottom: 32px;
padding-block: 8px 12px;
position: relative;
width: 200px;
text-align: center;
}
.style > .body > .list > .container > .inner > .flx > .content.-only > h3{
font-size: var(--font-24);
width: 372px;
font-weight: 700;
}
.style > .body > .list > .container > .inner > .flx > .content > h3::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 16px 16px 0 0;
border-color: var(--color-red) transparent transparent transparent;
}
.style > .body > .list > .container > .inner > .flx > .content > h3::after{
content: "";
position: absolute;
bottom: 0;
right: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 16px 16px;
border-color: transparent transparent var(--color-red) transparent; 
}
.style > .body > .list > .container > .inner > .flx > .content > .txt{
font-size: var(--font-24);
font-weight: 700;
color: var(--color-red);
margin-bottom: 20px;
text-align: center;
}
.style > .body > .list > .container > .inner > .flx > .content > .price{
font-size: var(--font-16);
font-weight: 700;
font-family: var(--font-sansJP);
letter-spacing: 1px;
}
.style > .body > .list > .container > .inner > .flx > .content > .price > span{
font-size: var(--font-32);
margin-inline: 5px;
}
.style > .body > .list > .container > .inner > .warp > p{
text-align: center;
background-color: var(--color-black);
color: var(--color-white);
font-size: var(--font-15);
font-weight: 700;
font-family: var(--font-sansJP);
padding: 8px 1em;
margin-bottom: 20px;
}
.style > .body > .list > .container > .inner > .warp > .grid > .list{
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 1fr;
gap: 8px;
}
.style > .body > .list > .container > .inner > .warp > .grid > .list > .item{
text-align: center;
font-size: var(--font-16);
font-weight: 500;
font-family: var(--font-sansJP);
border: 1px solid var(--color-gray-black);
padding: 12px 1em;
display: flex;
justify-content: center;
align-items: center;
}
@media (max-width:960px) {
.style > .body > .list > .container > .inner > .flx{
flex-direction: column;
gap: 0;
}
.style > .body > .list > .container > .inner > .warp > .grid > .list{
grid-template-columns: repeat(2,1fr);
}
}
@media (max-width:767px) {
.style > .body > .list > .container > .inner > .warp > .grid > .list{
grid-template-columns: repeat(1,1fr);
}
}
@media (max-width:560px) {
.style > .body > .list > .container > .inner > .warp > p{
margin-bottom: 10px;
}
.style > .body > .list > .container > .inner > .flx > .content > h3{
margin-bottom: 10px;
width: 100%;
}
.style > .body > .list > .container > .inner > .flx > .content.-only > h3{
width: 100%;
}
.style > .body > .list > .container > .inner > .flx > .content > .txt{
margin-bottom: 10px;
}
.style > .body > .list > .container > .inner > .flx > .content.-only{
margin-bottom: 0;
}
} .lineup > .inner{
padding-block: var(--px-120);
}
.lineup > .inner > .section.-bnr{
width: var(--content-width-small);
margin-inline: auto;
}
.section.-lineup > .inner{
width: min(90vw,1280px);
margin-inline: auto;
}
.lineup > .body > .list{
padding-block: var(--px-50) 0;
}
.lineup > .body > .list > .container{
background: #F8F8F7;
padding-bottom: 40px;
}
.lineup > .body > .list > .container + .container{
margin-top: 90px;
}
.lineup > .body > .list > .container > .inner{
width: min(85vw,1120px);
margin-inline: auto;
}
.lineup > .body > .list > .container > .inner > .flx{
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: clamp(25px, 3.3854166667vw, 65px);
margin-bottom: 20px;
position: relative;
top: -28px;
left: 0;
}
.lineup > .body > .list > .container > .inner > .flx.-right{
flex-direction: row-reverse;
}
.lineup > .body > .list > .container > .inner > .flx > .media > img{
width: 520px;
height: 368px;
object-fit: cover;
border: 4px solid var(--color-black);
}
.lineup > .body > .list > .container > .inner > .flx > .content{
display: flex;
flex-direction: column;
align-items: center;
width: min(100%,504px);
}
.lineup > .body > .list > .container > .inner > .flx > .content.-only{
width: 100%;
}
.lineup > .body > .list > .container > .inner > .flx > .content > .ttl{
margin-bottom: var(--px-40);
position: relative;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.lineup > .body > .list > .container > .inner > .flx > .content > .ttl::after{
content: "";
position: absolute;
bottom: 0;
right: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 16px 16px;
border-color: transparent transparent var(--color-red) transparent; 
}
.lineup > .body > .list > .container > .inner > .flx > .content > .ttl > h3{
font-size: var(--font-30);
font-family: var(--font-sansJP);
font-weight: 700;
text-align: center;
width: min(100%,372px);
}
.lineup > .body > .list > .container > .inner > .flx > .content.-only > .ttl > h3{
font-size: var(--font-24);
font-weight: 700;
width: 100%;
}
.lineup > .body > .list > .container > .inner > .flx > .content > .ttl > p{
font-size: var(--font-16);
font-weight: 700;
color: var(--color-red);
text-align: center;
}
.lineup > .body > .list > .container > .inner > .flx > .content > .ttl::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 16px 16px 0 0;
border-color: var(--color-red) transparent transparent transparent;
}
.lineup > .body > .list > .container > .inner > .flx > .content > .txt{
font-size: var(--font-16);
font-weight: 400;
margin-bottom: 20px;
}
.lineup > .body > .list > .container > .inner > .flx > .content > .price{
font-size: var(--font-16);
font-weight: 700;
font-family: var(--font-sansJP);
letter-spacing: 1px;
text-decoration: underline;
text-underline-offset: 8px;
text-decoration-thickness: 1px;
display: inline-flex; 
align-items: baseline;
}
.lineup > .body > .list > .container > .inner > .flx > .content > .price > span{
font-size: var(--font-32);
margin-inline: 5px;
display: contents;
}
.lineup > .body > .list > .container > .inner > .action > .c-btn{
width: 100%;
position: relative;
}
.lineup > .body > .list > .container > .inner > .action > .c-btn > .c-icon{
position: absolute;
right: 25px;
top: 50%;
transform: translateY(-50%);
}
.lineup > .body > .list > .container > .inner > .action + .action{
margin-top: var(--px-10);
}
@media (max-width:960px) {
.lineup > .body > .list > .container > .inner > .flx{
flex-direction: column;
align-items: center;
}
.lineup > .body > .list > .container > .inner > .flx.-right{
flex-direction: column;
}
.lineup > .body > .list > .container > .inner > .flx > .content{
width: 100%;
}
.lineup > .body > .list > .container > .inner > .flx > .media > img{
width: 100%;
height: 100%;
}
.lineup > .body > .list > .container > .inner > .action > .c-btn{
padding-inline: 1em;
}
} .arie > .inner{
padding-block: var(--px-120);
}
.section.-hero > .inner{
width: min(90vw,960px);
margin-inline: auto;
}
.hero > .body > .media > img{
object-fit: cover;
border: 4px solid var(--color-black);
}
.hero > .body > .media{
margin-bottom: var(--px-50);
}
.hero > .body > .flx{
display: flex;
justify-content: space-between;
margin-right: 1em;
gap: var(--px-30);
}
.hero > .body > .flx > .ttl > h2{
font-size: var(--font-30);
font-weight: 600;
font-family: var(--font-serifJP);
text-decoration: underline;
text-underline-offset: 36%;
text-decoration-thickness: 6%;
transform: translateY(-10px); 
}
.hero > .body > .flx > .txt{
width: min(100%,445px);
}
.hero > .body > .flx > .txt > p{
font-size: var(--font-16);
font-weight: 400;
line-height: 2.2;
}
@media (max-width:960px) {
.hero > .body > .flx{
flex-direction: column;
margin-right: 0;
}
.hero > .body > .flx > .txt{
width: 95%;
}
}
@media (max-width:767px) {
.hero > .body > .flx > .txt{
width: 100%;
}
} .section.-gallery {
overflow: hidden;
width: 100%;
margin: 0 auto;
}
.section.-gallery .inner {
max-width: 100%;
padding: 0;
}
.gallery{
width: min(90vw, 960px);
margin: 0 auto;
}
.gallery > .deco{
padding-bottom: 30px;
position: relative;
display: inline-block;
}
.gallery > .deco::after{
content: "";
position: absolute;
top: 60%;
left: 50%;
z-index: 1;
width: 24px;
height: 31px;
background-color: var(--color-blue);
-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);
-webkit-mask-image: url(//kaitekihomes.com/wp-content/themes/akari/assets/img/gallery-line.svg);
mask-image: url(//kaitekihomes.com/wp-content/themes/akari/assets/img/gallery-line.svg);
}
.gallery > .deco > p{
font-size: var(--font-28);
font-weight: 700;
font-family: var(--font-Quicksand);
color: var(--color-blue);
text-decoration: underline;
text-underline-offset: 25%;
text-decoration-thickness: 6.5%;
}
.splide.-gallery {
margin: 0 auto;
padding: 0;
}
.splide.-gallery .splide__track {
overflow: visible;
}
.splide.-gallery .splide__list {
align-items: center;
}
.splide.-gallery .splide__slide {
opacity: 1;
width: auto;
}
.splide.-gallery .slide-image {
height: 280px;
width: 400px;
object-fit: cover;
box-shadow: var(--shadow-opacity25);
}
@media (max-width:767px) {
.splide.-gallery .slide-image{
width: 350px;
}
} .section.-concept.-series{
background: #F8F8F7;
padding-bottom: var(--px-120);
}
.section.-concept.-series > .inner{
padding-block: 90px 0;
}
.concept.-series > .body > .list > .container{
background: var(--color-white);
} .section.-plan{
background: #F8F8F7;
}
.section.-plan.-series{
margin-bottom: 90px;
}
.section.-plan > .inner{
width: var(--content-width-small);
margin-inline: auto;
padding-block: 90px var(--px-120);
}
.plan > .grid{
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
}
.plan > .grid > .list{
background: var(--color-white);
padding-block: 1.5em 2em;
padding-inline: 1.5em;
}
.plan > .grid > .list > .media{
background: #F8F8F7;
margin-bottom: 1em;
}
.plan > .grid > .list > .media.-slider{
width: 90%;
margin-inline: auto;
border: 2px solid var(--color-black);
margin-bottom: 3em;
}
.-series-theme-media .splide__slide img{
width: 100%;
}
.-series-theme-media .splide__pagination{
bottom: -2em;
}
.-series-theme-media .splide__arrow--prev {
left: -2.5em;
}
.-series-theme-media .splide__arrow--next{
right: -2.5em;
}
.-series-theme-media .splide__pagination__page{
background-color: var(--color-black);
}
.-series-theme-media .splide__pagination__page.is-active{
background-color: var(--color-black);
}
.plan > .grid > .list > .media > img{
border: 2px solid var(--color-black);
width: 100%;
}
.plan > .grid > .list > .ttl{
font-size: var(--font-17);
font-weight: 600;
margin-bottom: 1em;
text-decoration: underline;
text-underline-offset: 20%;
text-decoration-thickness: 8%;
}
.plan > .grid > .list > .content > .txt{
font-size: var(--font-16);
margin-top: 1em;
}
.table.-plan{
margin-top: 1.5em;
}
.table.-plan > table > tbody > tr{
border-top: 1px solid #918D8C;
border-bottom: 1px solid #918D8C;
}
.table.-plan > table > tbody > tr > th{
background: #F8F8F7;
width: 35%;
vertical-align: middle;
}
.table.-plan > table > tbody > tr > td{
width: 65%;
}
@media (max-width:960px) {
.table.-plan > table > tbody > tr:first-child{
border-top: 1px solid #918D8C;
}
.table.-plan > table > tbody > tr{
display: flex;
flex-direction: column;
align-items: flex-start;
border-top: none;
}
.table.-plan > table > tbody > tr > th{
width: 100%;
padding: 10px 1em;
}
.table.-plan > table > tbody > tr > td{
width: 100%;
padding: 10px 1em;
}
}
@media (max-width:767px) {
.plan > .grid{
grid-template-columns: repeat(1, 1fr);
}  
.plan > .grid > .list{
padding-inline: 1em;
}
} .section.-voice > .inner{
width: min(90vw,1280px);
margin-inline: auto;
}
.voice > .body{
background: #F8F8F7;
margin-top: var(--px-140);
padding-bottom: var(--px-50);
}
.c-archive.-series{
width: var(--content-width-small);
margin-inline: auto;
transform: translateY(-100px);
margin-bottom: -100px;
padding-bottom: var(--px-40);
gap: 2em;
}
.c-archive.-series > .item > .article{
padding: 0;
}
.c-archive.-series > .item > .article > .media{
aspect-ratio: 320 / 248;
}
.c-archive.-series > .item > .article > .media > .image{
transform: scale(1.0);
transition: transform var(--transition-duration);
}
@media (hover : hover) {
.c-archive.-series > .item > .article:hover > .media > .image{
transform: scale(1.08);
}
}
.c-archive.-series > .item > .article > .content > .ttl{
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
margin-bottom: 1em;
font-size: var(--font-18);
font-weight: 700;
text-decoration: underline;
}
.c-archive.-series > .item > .article > .content > .txt{
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
font-size: var(--font-13);
line-height: 1.8;
color: var(--color-black-light);
}
@media (max-width:767px) {
.plan > .flx{
flex-direction: column;
gap: 50px;
}
.voice > .body{
background: transparent;
}
} .c-termList {
display: flex;
justify-content: center;
align-items: center;
gap: 2.8em;
font-size: var(--font-14);
line-height: 1.4;
}
.c-termList > .header {
flex: 0 0 auto;
font-size: var(--font-26);
line-height: 1;
color: var(--color-red);
font-family: var(--font-Quicksand);
font-weight: 600;
}
.c-termList > .body {
flex: 0 1 auto;
}
.c-termList > .body > .list {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.8em 0;
min-height: 4em;
padding: 1em 2.6em;
background: var(--color-orange);
color: var(--color-white);
border-radius: 0 10px 10px 0;
}
.c-termList > .body > .list > .item:not(:last-child)::after {
opacity: 0.3;
margin-inline: 1.2em;
content: "|";
}
.c-termList > .body > .list > .item > .link {
transition: color var(--transition-duration) ease;
}
.c-termList.-gradient > .body > .list {
background: var(--color-red);
}
.c-termList > .body > .list.-child {
position: relative;
padding-left: 6em;
background: var(--color-yellow-light);
color: var(--color-red);
}
.c-termList > .body > .list.-child::before {
content: "";
position: absolute;
inset: 50% auto auto 2.8em;
width: 1em;
aspect-ratio: 1/1;
background: currentColor;
-webkit-mask: var(--icon-arrow-d-right) no-repeat 50%/contain;
mask: var(--icon-arrow-d-right) no-repeat 50%/contain;
transform: translateY(-50%);
}
.c-termList > .body > .list > .item > .link:is(:hover, .-current) {
color: var(--color-black);
}
.c-termList > .body > .list.-child > .item > .link:is(:hover, .-current) {
color: var(--color-black);
}
.c-formControl {
box-sizing: border-box;
display: block;
width: 100%;
margin: 0;
padding: 0;
background: transparent;
border: none;
border-radius: 0;
font: inherit;
line-height: inherit;
color: inherit;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.c-formControl:disabled {
cursor: not-allowed;
}
.c-formControl::-moz-placeholder {
opacity: 0.25;
}
.c-formControl::placeholder {
opacity: 0.25;
}
textarea.c-formControl {
resize: vertical;
}
select.c-formControl {
padding-right: 2em;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='22' viewBox='0 0 30 22'%3e%3cpath fill='%23343a40' d='M15 22L0 0h30z'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: calc(100% - 0.75em) 50%;
background-size: 0.5em auto;
}
select.c-formControl[multiple], select.c-formControl[size]:not([size="1"]) {
background-image: none;
}
.c-formControl.-auto {
display: inline-block;
width: auto;
}
.c-formControl {
padding: 0.8em 1em;
background: var(--color-white);
border: 1px dotted #E0DEDE;
border-radius: 4px;
font-size: 16px;
line-height: 1.6;
}
@media (min-width: 960px) {
.c-formControl {
font-size: var(--font-15);
}
}
.c-formControl.-typeArchive {
width: 15em;
} .other-container.-works{
width: min(90vw,960px);
margin-inline: auto;
}
.other-container.-works > .section + .section {
margin-top: var(--px-80);
}
.section.-archive > .grid{
display: grid;
grid-template-columns: repeat(3,1fr);
gap: 20px;
}
.section.-archive > .grid > .item > .card > .media{
aspect-ratio: 320 / 248;
overflow: hidden;
position: relative;
flex: 0 0 auto;
margin: 0;
width: 100%;
}
.section.-archive > .grid > .item > .card > .media > .image{
transform: scale(1.0);
transition: transform var(--transition-duration);
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
@media (hover : hover) {
.section.-archive > .grid > .item > .card:hover > .media > .image{
transform: scale(1.08);
}
}
.section.-archive > .grid > .item > .card > .body {
background: var(--color-white);
padding-block: 24px;
padding-inline: 1em;
}
.section.-archive > .grid > .item > .card > .body > .date{
font-size: var(--font-15);
}
.section.-archive > .grid > .item > .card > .body > .ttl{
font-size: var(--font-16);
height: 3em; 
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
margin-top: 8px;
line-height: 1.6;
}
.section.-archive > .grid > .item > .card > .body > .category{
font-size: var(--font-15);
margin-top: 10px;
background: var(--color-orange);
padding: 5px 1em;
display: inline-flex;
border-radius: 0 10px 10px 0;
}
@media (max-width:960px) {
.section.-archive > .grid{
grid-template-columns: repeat(2,1fr);
}
}
@media (max-width:560px) {
.section.-archive > .grid{
grid-template-columns: repeat(1,1fr);
}
.section.-archive > .grid > .item > .card > .body > .ttl{
height: auto;
}
} .info-contact{
padding-block-end: var(--px-120);
background: #F8F8F7;
}
.section.-present {
background: var(--color-white);
margin-bottom: 0 !important;
padding-block: var(--px-120);
}
.section.-present > .inner{
width: min(90vw,960px);
margin-inline: auto;
}
.present{
text-align: center;
}
.present > .ttl{
text-align: center;
font-size: var(--font-32);
font-weight: 700;
position: relative;
display: inline-block;
margin-bottom: var(--px-60);
}
.present > .ttl::before{
content: "";
position: absolute;
top: 50%;
left: -40px;
transform: translateY(-50%) rotate(-15deg);
width: 1px;
height: 64px;
background: var(--color-black);
}
.present > .ttl::after{
content: "";
position: absolute;
top: 50%;
right: -40px;
transform: translateY(-50%) rotate(15deg);
width: 1px;
height: 64px;
background: var(--color-black);
}
.present > .img{
position: relative;
}
.present > .img::before {
content: "";
position: absolute;
width: 100%;
height: 440px;
max-height: 100%;
border-image: linear-gradient(0deg, #F8F8F7 440px, rgba(0, 0, 0, 0) 0) 0 fill / auto / 0 1vw 0 1vw;
z-index: -1;
top: 85px;
left: 50%;
transform: translateX(-50%);
}
.present > .img > .-diagnosis{
box-shadow: 0px 4px 20px 0px #0000001A;
}
.present > .sub-ttl{
font-weight: 600;
font-size: var(--font-32);
font-family: var(--font-serifJP);
text-decoration: underline;
text-decoration-style: solid;
text-underline-offset: 36%;
text-decoration-thickness: 8%;
margin-top: var(--px-60);
}
.present > .txt{
font-size: var(--font-16);
text-align: left;
margin-top: var(--px-50);
}
@media (max-width:767px) {
.present > .img::before{
border-image: linear-gradient(0deg, #F8F8F7 440px, rgba(0, 0, 0, 0) 0) 0 fill / auto / 0 100vw 0 100vw;
top: 0px;
height: 100%;
}
}
@media (max-width:560px) {
.present > .ttl{
font-size: 20px;
}
.present > .ttl::before{
left: -10px;
}
.present > .ttl::after{
right: -10px;
}
.present > .img > img{
width: 80%
}
.present > .sub-ttl{
font-size: 20px;
}
} .section.-form{
background: #F8F8F7;
padding-top: 90px;
}
.section.-form > .inner{
width: min(85vw,960px);
margin-inline: auto;
}
.section.-form.-lower > .inner{
width: min(85vw,960px);
margin-inline: auto;
padding-block: 0 var(--px-120);
}
.section.-form.-lower > .inner > .c-typography{
margin-bottom: var(--px-30);
text-align: center;
}
.section.-form.-lower > .inner > .c-typography > h2{
color: var(--color-red);
}
.section.-form.-lower > .inner > .c-typography > h2.-complete{
text-align: center;
}
@media (max-width:560px) {
.section.-form.-lower > .inner > .c-typography{
text-align: left;
}
} .section.-contact{
width: min(85vw, 960px);
margin-inline: auto;
padding-block: var(--px-120);
}
.section.-contact > .inner > .content{
margin-bottom: var(--px-50);
}
.section.-contact > .inner > .content > .ttl{
font-weight: 600;
font-size: var(--font-32);
font-family: var(--font-serifJP);
text-decoration: underline;
text-decoration-style: solid;
text-underline-offset: 36%;
text-decoration-thickness: 8%;
text-align: center;
}
.section.-contact > .inner > .content > .txt{
font-size: var(--font-16);
text-align: left;
margin-top: var(--px-50);
text-align: center;
}
.section.-contact > .inner > .content > .txt + .txt{
margin-top: var(--px-10);
}
.section.-contact > .inner > .content > .img{
text-align: center;
margin-top: var(--px-60);
}
.section.-contact > .inner > .content > .img > .-diagnosis{
box-shadow: 0px 4px 20px 0px #0000001A;
}
@media (max-width:560px) {
.section.-contact > .inner > .content > .txt{
text-align: left;
}
.section.-contact > .inner > .content > .ttl{
text-align: left;
font-size: 20px;
}
} .privacy{
max-width: var(--content-width-medium);
margin: 0 auto;
line-height: 2.2;
}
.privacy_wrap > h2{
position: relative;
font-size: var(--font-28);
font-weight: bold;
border-bottom: 1px solid #CECACA;
margin-bottom: 0.5em;
}
.privacy_wrap > h2::after{
content: "";
position: absolute;
bottom: -1%;
left: 0;
width: 20%;
border-top: 2px solid var(--color-red);
}
.privacy_wrap{
margin: 2em 0;
}
.privacy_wrap > p{
font-size: var(--font-16);
} .feature > .inner{
padding-block: var(--px-150) var(--px-200);
}
.section.-feature01{
overflow: hidden;
width: 100%;
}
.section.-feature01 > .inner{
width: var(--content-width-small);
margin-inline: auto;
}
.section.-feature01 > .inner > .content,
.section.-feature01 > .inner > .content.-reverse{
position: relative;
}
.section.-feature01 > .inner > .content::before{
content: "";
position: absolute;
left: -340px;
right: -35px;
top: 0%;
bottom: 0%;
background: #F8F8F7;
border-radius: 0px 80px 80px 0px;
z-index: -1;
}
.section.-feature01 > .inner > .content.-reverse::before{
content: "";
position: absolute;
right: -340px;
left: -35px;
top: 0%;
bottom: 0%;
background: #F8F8F7;
border-radius: 80px 0px 0px 80px;
z-index: -1;
}
.section.-feature01 > .inner > .content > .flx{
display: flex;
justify-content: space-between;
padding-block: var(--px-80);
}
.section.-feature01 > .inner > .content > .flx > .item > .flx{
display: flex;
align-items: center;
}
.section.-feature01 > .inner > .content > .flx > .item > .flx.-img{
gap: var(--px-30);
}
.section.-feature01 > .inner > .content > .flx > .item.-left{
padding-right: 1em;
}
.section.-feature01 > .inner > .content > .flx > .ite.-left > .flx{
gap: var(--px-30);
}
.section.-feature01 > .inner > .content > .flx > .item.-left > .flx > .number{
font-size: var(--font-40);
font-weight: bold;
color: var(--color-blue);
line-height: 1;
font-family: var(--font-Quicksand);
}
.section.-feature01 > .inner > .content > .flx > .item.-left > .flx > .txt{
font-size: var(--font-13);
color: var(--color-gray-black);
line-height: 1.6;
}
.section.-feature01 > .inner > .content > .flx > .item.-left > .flx > .txt > span{
font-size: var(--font-16);
font-weight: 400;
}
.section.-feature01 > .inner > .content > .flx > .item > .ttl{
font-size: var(--font-48);
font-weight: bold;
line-height: 1.4;
margin-top: 8px;
}
.section.-feature01 > .inner > .content > .flx > .item > .sub-ttl{
font-size: var(--font-22);
line-height: 1.8;
font-weight: bold;
margin-top: var(--px-40);
}
.section.-feature01 > .inner > .content > .flx > .item.-right{
width: min(100%,720px);
border-left: 1px solid var(--color-gray);
padding-left: clamp(10px, 4.1666666667vw, 80px);
}
.section.-feature01 > .inner > .content > .flx > .item > .flx > .txt{
font-size: var(--font-18);
line-height: 1.5;
color: var(--color-red);
font-weight: bold;
margin-top: 1em;
}
.section.-feature01 > .inner > .content > .flx > .item > h3{
margin-top: var(--px-30);
font-size: var(--font-17);
font-weight: bold;
}
.section.-feature01 > .inner > .content > .flx > .item > p{
font-size: var(--font-15);
margin-top: 16px;
}
.section.-feature01 > .inner > .content > .flx > .item > p.marg-top{
margin-top: var(--px-30);
}
.section.-feature01 > .inner > .content > .flx > .item > .media{
margin-top: var(--px-30);
border: 1px dashed var(--color-black-light);
border-radius: 8px;
background: var(--color-white);
padding-block: var(--px-50) var(--px-30);
padding-inline: var(--px-40);
position: relative;
text-align: center;
}
.section.-feature01 > .inner > .content > .flx > .item > .media > .deco{
padding: 7px 24px 8px;
position: absolute;
left: -1px;
top: -1px;
background: var(--color-black);
border-radius: 8px 0px 16px;
color: var(--color-white);
font-size: var(--font-15);
}
.section.-feature01 > .inner > .content > .flx > .item > .media > .txt{
font-size: var(--font-14);
line-height: 1.8;
margin-top: 16px;
text-align: left;
}
.section.-feature01 > .inner > .content > .flx > .item > .media > .txt.-marg-no{
margin-top: 0;
}
.section.-feature01 > .inner > .content > .flx > .item > .media > .txt.-marg-no > span{
color: #CC3D3D;
}
.section.-feature01 > .inner > .content > .flx > .item > .media > h4{
font-weight: bold;
text-align: left;
margin-top: 16px;
}
.section.-feature01 > .inner > .content > .flx > .item > .media > h4.underline{
text-decoration: underline;
text-underline-offset: 15%;
font-size: var(--font-18);
text-align: center;
}
.section.-feature01 > .inner > .content > .flx > .item > .grid{
display: grid;
grid-template-columns: repeat(2, 1fr);
font-size: var(--font-15);
margin-top: 16px;
}
.section.-feature01 > .inner > .content > .flx > .item.-right > .image{
margin-top: var(--px-30);
text-align: center;
}
.section.-feature01 > .inner > .content > .flx > .item.-right > .image.-border{
border: 1px solid var(--color-black-light);
}
.section.-feature01 > .inner > .content > .flx > .item.-right > .txt-small{
margin-top: 8px;
font-size: var(--font-12);
}
@media (max-width:1240px) {
.section.-feature01 > .inner > .content > .flx{
flex-direction: column;
gap: var(--px-30);
}
.section.-feature01 > .inner > .content > .flx > .item.-right{
border-left: none;
border-top: 1px solid var(--color-gray);
padding-left: 0;
padding-top: var(--px-30);
}
.section.-feature01 > .inner > .content::before{
right: 0;
}
.section.-feature01 > .inner > .content.-reverse::before{
left: 0;
}
.section.-feature01 > .inner > .content.-reverse > .flx{
padding-left: 2em;
}
.section.-feature01 > .inner > .content > .flx > .item.-right{
width: 95%;
}
.section.-feature01 > .inner > .content.-reverse > .flx > .item.-right{
width: 100%;
}
}
@media (max-width:560px) {
.section.-feature01 > .inner > .content > .flx > .item > .flx.-img {
flex-direction: column;
align-items: center;
gap: 0;
}
.section.-feature01 > .inner > .content > .flx > .item > .media{
padding-block: 30px var(--px-30);
padding-inline: 1em;
}
.section.-feature01 > .inner > .content > .flx > .item > .grid{
grid-template-columns: repeat(1, 1fr);
}
.section.-feature01 > .inner > .content.-reverse > .flx{
padding-left: 1em;
}
} .section.-feature01 > .inner > .content.-others{
padding-block: var(--px-60) var(--px-80);
}
.section.-feature01 > .inner > .content > .item {
padding-block: var(--px-30) var(--px-40);
border-bottom: 1px dotted var(--color-black-light);
}
.section.-feature01 > .inner > .content > .item > .flx {
display: flex;
align-items: center;
}
.section.-feature01 > .inner > .content > .item > .flx > .number{
font-size: var(--font-40);
font-weight: bold;
color: var(--color-blue);
line-height: 1;
font-family: var(--font-Quicksand);
}
.section.-feature01 > .inner > .content > .item > .flx > .txt{
font-size: var(--font-13);
color: var(--color-gray-black);
line-height: 1.6;
margin-top: 1em;
font-weight: bold;
}
.section.-feature01 > .inner > .content > .item > .flx > .txt > span{
font-size: var(--font-16);
font-weight: 400;
}
.section.-feature01 > .inner > .content > .item > .ttl{
font-size: var(--font-32);
font-weight: bold;
line-height: 1.4;
}
.section.-feature01 > .inner > .content > .item > .sub-ttl{
font-size: var(--font-15);
margin-top: 8px;
}
.section.-feature01 > .inner > .content > .item > .group{
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--px-10);
margin-top: var(--px-20);
}
.section.-feature01 > .inner > .content > .item > .group.-margT{
margin-top: var(--px-10);
}
.section.-feature01 > .inner > .content > .item > .group > .logo{
height: 100%;
}
@media (max-width:1240px) {
.section.-feature01 > .inner > .content.-others {
padding-left: 2em;
}
}
@media (max-width:560px) {
.section.-feature01 > .inner > .content.-others{
padding-left: 1em;
}
}