@charset "utf-8";

/*================================

intro

================================*/

.intro {
                display: flex;
                height: calc((100svh - 90px)/2);
                width: 100%;
	align-items: center;
	justify-content: center;
                flex-direction: column;
                }
@media (max-width: 768px) {
.intro {
                height: calc((100svh - 60px)/2);
                }
                }

.intro h2 {
                font-size: 3.5em;
                line-height: 1em;
                letter-spacing: .05em;
                }
@media (max-width: 768px) {
.intro h2 {
                font-size: 3em;
                }
                }

.intro p {
                margin-top: calc(((100svh - 60px)/2)*0.2);
                font-size: .9em;
                line-height: 1em;
                }

.intro h3 {
                margin-top: 10px;
                font-size: 1.5em;
                line-height: 1em;
                }


/*================================

facade

================================*/

.facade {
                display: flex;
                width: 100%;
	aspect-ratio: 5 / 3;
	align-items: center;
	justify-content: center;
                overflow:hidden;
                }
@media (max-width: 768px) {
.facade {
	aspect-ratio: 1;
                }
                }

.facade img{
                width: 100vw !important;
                }
@media (max-width: 768px) {
.facade img{
                width: calc(100vw * 1.2);
                }
                }


/*================================

lead

================================*/

.lead {
                display: flex;
                width: 100%;
	align-items: center;
	justify-content: center;
                padding: 150px 0 50px;
                }
@media (max-width: 768px) {
.lead {
                padding: 150px 0 0;
                }
                }

.lead h4 {
                font-size: 1.5em;
                line-height: 1em;
                }
@media (max-width: 768px) {
.lead h4 {
                font-size: 1.3em;
                }
                }


/*================================

philosophy

================================*/

.philosophy {
                display: flex;
                width: 100%;
	align-items: center;
	justify-content: center;
	flex-direction: column;
                padding: 120px 0 100px;
                background: #f3f3f3;
                margin-top: -40px;
                }
@media (max-width: 768px) {
.philosophy {
                padding: 80px 0 60px;
                margin-top: -20px;
                }
                }

.philosophy .thumb{
                width: 12%;
                min-width: 200px;
                }
@media (max-width: 768px) {
.philosophy .thumb{
                width: 130px;
                min-width: 130px;
                }
                }

.philosophy .thumb img{
                width: 100%;
                mix-blend-mode: multiply;
                }

.philosophy ._link-center{
                margin-top: 50px;
                cursor: pointer;
                }


/*================================

modal調整

================================*/


.vbox-container {
                padding: 0 0;
                }

.vbox-content {
                padding: 0 10px;
                }

.vbox-close {
                padding: 30px 30px;
                color: #000;
                font-size: 30px;
                }

.venoratio-full {
                --vb-aspect-ratio: calc(100svh - 20px) ;
                }

.venoratio{
	background-color: #f3f3f3 !important;
                }

/* 既定のクローズボタンを隠す（デザインを自前にする場合） */
.vbox-close{ 
                display:none; 
                }

.vbox-overlay.vb-slow-close,
.vbox-overlay.vb-slow-close .vbox-content {
                transition-duration: 700ms !important; /* 好みの遅さに */
                }



/*================================

design

================================*/

.design {
                width: 100%;
                padding: 100px 0 60px;
                }
@media (max-width: 768px) {
.design {
                padding: 60px 0 60px;
                }
                }

.design h4{
                font-size: 1.3em;
                line-height: 1em;
                text-align: center;
                }

.design > section{
                margin-top: 100px;
                width: 100%;
                }
@media (max-width: 768px) {
.design > section{
                margin-top: 60px;
                }
                }

.design > section > div{
	display: flex;
	align-items: center;
	justify-content: center;
                }
@media (max-width: 768px) {
.design > section > div{
	flex-direction: column;
                }
                }

.design > section > div > div{
	display: flex;
	align-items: center;
	justify-content: center;
                }

.design > section > div > div > div.box{
	display: flex;
	align-items: center;
	justify-content: center;
                overflow: hidden;
                }

.design > section > div > div > div.box img{
                width: 100%;
                }

/*１列目*/

.design > section > div:first-child{
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	flex-wrap: nowrap;
	flex-direction: row;
                }
@media (max-width: 768px) {
.design > section > div:first-child{
	align-items: flex-end;
	justify-content: flex-end;
	flex-direction: column;
                }
                }

.design > section > div:first-child > div{
                width: 50%;
                }

.design > section > div:first-child > div img{
                width: 100%;
                }

.design > section > div:first-child > div:first-child{
                width: 50%;
                }
@media (max-width: 768px) {
.design > section > div:first-child > div:first-child{
                width: 90%;
                margin-right: 10%;
                }
                }

.design > section > div:first-child > div:first-child > div.box{
                aspect-ratio: 3 / 2;
                }

.design > section > div:first-child > div:last-child{
                width: 20%;
	align-items: flex-end;
                margin-bottom: -200px;
                }
@media (max-width: 768px) {
.design > section > div:first-child > div:last-child{
                width: 35%;
	justify-content: flex-end;
                margin-bottom: 0;
                margin-top: 30px;
                }
                }

.design > section > div:first-child > div:last-child > div.box{
                aspect-ratio: 2 / 3;
                }

/*１列目 tx*/

.design.saibitx > section > div:first-child{
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	flex-wrap: nowrap;
	flex-direction: row-reverse;
                }
@media (max-width: 768px) {
.design.saibitx > section > div:first-child{
	align-items: flex-end;
	justify-content: flex-end;
	flex-direction: column;
                }
                }

.design.saibitx > section > div:first-child > div{
                width: 50%;
                }

.design.saibitx > section > div:first-child > div img{
                width: 100%;
                }

.design.saibitx > section > div:first-child > div:first-child{
                width: 50%;
                }
@media (max-width: 768px) {
.design.saibitx > section > div:first-child > div:first-child{
                width: 90%;
                margin-right: 10%;
                }
                }

.design.saibitx > section > div:first-child > div:first-child > div.box{
                aspect-ratio: 3 / 2;
                }

.design.saibitx > section > div:first-child > div:last-child{
                width: 20%;
	align-items: flex-end;
                margin-bottom: -200px;
                }
@media (max-width: 768px) {
.design.saibitx > section > div:first-child > div:last-child{
                width: 35%;
	justify-content: flex-end;
                margin-bottom: 0;
                margin-top: 30px;
                }
                }

.design.saibitx > section > div:first-child > div:last-child > div.box{
                aspect-ratio: 2 / 3;
                }

/*2列目*/

.design > section > div:nth-child(2){
	display: flex;
	align-items: center;
	justify-content: center;
                margin-top: 200px;
                padding-bottom: 200px;
                }
@media (max-width: 768px) {
.design > section > div:nth-child(2){
                margin-top: 120px;
                padding-bottom: 120px;
                }
                }

.design > section > div:nth-child(2) > p{
                font-size: 1em;
                line-height: 2em;
                text-align: left;
                }
@media (max-width: 768px) {
.design > section > div:nth-child(2) > p{
                width: auto;
                }
                }

/*3列目*/

.design > section > div:nth-child(3){
                width: 50%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
                }
@media (max-width: 768px) {
.design > section > div:nth-child(3){
                width: 60%;
                }
                }

.design > section > div:nth-child(3) > div{
                width: 60%;
                }
@media (max-width: 768px) {
.design > section > div:nth-child(3) > div{
                width: 100%;
                }
                }

.design > section > div:nth-child(3) > div:first-child > div.box{
                aspect-ratio: 2 / 3;
                }

.design > section > div:nth-child(3) > div img{
                width: 100%;
                }


/*3列目 tx*/

.design.saibitx > section > div:nth-child(3){
                width: 100%;
	display: flex;
	align-items: flex-start;
	justify-content: center;
                }
@media (max-width: 768px) {
.design.saibitx > section > div:nth-child(3){
	align-items: flex-end;
	justify-content: flex-start;
                width: 100%;
	flex-wrap: nowrap;
	flex-direction: row;
                }
                }

.design.saibitx > section > div:nth-child(3) > div{
                width: 100%;
                }
@media (max-width: 768px) {
.design.saibitx > section > div:nth-child(3) > div{
                width: 100%;
	justify-content: flex-start;
                }
                }

.design.saibitx > section > div:nth-child(3) > div:first-child > div.box{
                aspect-ratio: 2 / 3;
                width: 30%;
                margin-left: 30%;
                }
@media (max-width: 768px) {
.design.saibitx > section > div:nth-child(3) > div:first-child > div.box{
                aspect-ratio: 2 / 3;
                width: 50%;
                margin-left: 0;
                }
                }

.design.saibitx > section > div:nth-child(3) > div:last-child > div.box{
                aspect-ratio: 2 / 3;
                width: 70%;
                margin-left: 30%;
                }
@media (max-width: 768px) {
.design.saibitx > section > div:nth-child(3) > div:last-child > div.box{
                aspect-ratio: 2 / 3;
                width: 100%;
                margin-left: 0;
                }
                }

.design.saibitx > section > div:nth-child(3) > div img{
                width: 100%;
                }


/*3列目 lx*/

.design.saibilx > section > div:nth-child(3){
                width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
                }
@media (max-width: 768px) {
.design.saibilx > section > div:nth-child(3){
	align-items: center;
	justify-content: center;
                width: 100%;
	flex-wrap: nowrap;
	flex-direction: row;
                }
                }

.design.saibilx > section > div:nth-child(3) > div{
                width: 100%;
                margin-bottom: 150px;
                }
@media (max-width: 768px) {
.design.saibilx > section > div:nth-child(3) > div{
                width: 100%;
                margin-bottom: 100px;
                }
                }

.design.saibilx > section > div:nth-child(3) > div:first-child > div.box{
                aspect-ratio: 2 / 3;
                width: 50%;
                margin-left: 20%;
                }
@media (max-width: 768px) {
.design.saibilx > section > div:nth-child(3) > div:first-child > div.box{
                aspect-ratio: 2 / 3;
                width: 70%;
                margin-left: 10%;
                margin-right: 10%;
                }
                }

.design.saibilx > section > div:nth-child(3) > div:last-child > div.box{
                aspect-ratio: 2 / 3;
                width: 50%;
                margin-right: 20%;
                }
@media (max-width: 768px) {
.design.saibilx > section > div:nth-child(3) > div:last-child > div.box{
                aspect-ratio: 2 / 3;
                width: 70%;
                margin-left: 10%;
                margin-right: 10%;
                transform: translateY(100px);
                }
                }

.design.saibilx > section > div:nth-child(3) > div img{
                width: 100%;
                }


/*4列目*/

.design > section > div:nth-child(4){
	display: flex;
	align-items: stretch;
	justify-content: flex-end;
	flex-wrap: nowrap;
	flex-direction: row;
                }
@media (max-width: 768px) {
.design > section > div:nth-child(4){
                margin-top: 120px;
	align-items: flex-end;
	flex-direction: column;
                }
                }

.design > section > div:nth-child(4) > div{
                width: 50%;
                }

.design > section > div:nth-child(4) > div img{
                width: 100%;
                }

.design > section > div:nth-child(4) > div:first-child{
	justify-content: flex-start;
                width: 41%;
                }
@media (max-width: 768px) {
.design > section > div:nth-child(4) > div:first-child{
	justify-content: center;
                width: 100%;
                }
                }

.design > section > div:nth-child(4) > div:first-child p{
                font-size: 1em;
                line-height: 2em;
                text-align: left;
                }

.design > section > div:nth-child(4) > div:last-child{
                width: 38%;
	align-items: flex-end;
                }
@media (max-width: 768px) {
.design > section > div:nth-child(4) > div:last-child{
                margin-top: 120px;
                width: 70%;
                }
                }

.design > section > div:nth-child(4) > div:last-child > div.box{
                aspect-ratio: 2 / 3;
                }

/*4列目 tx*/

.design.saibitx > section > div:nth-child(4){
	display: flex;
	align-items: stretch;
	justify-content: flex-end;
	flex-wrap: nowrap;
	flex-direction: row-reverse;
                }
@media (max-width: 768px) {
.design.saibitx > section > div:nth-child(4){
                margin-top: 120px;
	align-items: flex-start;
	flex-direction: column;
                }
                }

.design.saibitx > section > div:nth-child(4) > div{
                width: 50%;
                }

.design.saibitx > section > div:nth-child(4) > div img{
                width: 100%;
                }

.design.saibitx > section > div:nth-child(4) > div:first-child{
	justify-content: center;
                width: 41%;
                }
@media (max-width: 768px) {
.design.saibitx > section > div:nth-child(4) > div:first-child{
	justify-content: center;
                width: 100%;
                }
                }

.design.saibitx > section > div:nth-child(4) > div:first-child p{
                font-size: 1em;
                line-height: 2em;
                text-align: left;
                }

.design.saibitx > section > div:nth-child(4) > div:last-child{
                width: 38%;
	align-items: flex-end;
                }
@media (max-width: 768px) {
.design.saibitx > section > div:nth-child(4) > div:last-child{
                margin-top: 120px;
                width: 70%;
                }
                }

.design.saibitx > section > div:nth-child(4) > div:last-child > div.box{
                aspect-ratio: 2 / 3;
                }

/*5列目*/

.design > section > div:last-child{
                width: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-start;
                }
@media (max-width: 768px) {
.design > section > div:last-child{
	align-items: flex-start;
                }
                }

.design > section > div:last-child > div{
                width: 20%;
                }
@media (max-width: 768px) {
.design > section > div:last-child > div{
                width: 35%;
                margin-top: 80px;
                }
                }

.design > section > div:last-child > div:first-child > div.box{
                aspect-ratio: 2 / 3;
                }

/*5列目 tx*/

.design.saibitx > section > div:last-child{
                width: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
                }
@media (max-width: 768px) {
.design.saibitx > section > div:last-child{
	align-items: flex-end;
                }
                }

.design.saibitx > section > div:last-child > div{
                width: 30%;
                }
@media (max-width: 768px) {
.design.saibitx > section > div:last-child > div{
                width: 60%;
                margin-top: 80px;
                }
                }

.design.saibitx > section > div:last-child > div:first-child > div.box{
                aspect-ratio: 3/2;
                }



/*================================

usability

================================*/

.usability {
                width: 100%;
                margin: auto;
                padding: 100px 0 100px;
                }
@media (max-width: 768px) {
.usability {
                padding: 60px 0 60px;
                }
                }

.usability h4{
                font-size: 1.3em;
                line-height: 1em;
                text-align: center;
                }

.usability > div{
                width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
                }

.usability > div.view{
                margin-top: 100px;
                width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
                overflow: hidden;
	aspect-ratio: 2 / 1;
                }
@media (max-width: 768px) {
.usability > div.view{
                margin-top: 60px;
	aspect-ratio: 3 / 2;
                }
                }

.usability > div.view img{
                width: 100vw !important;
                }

.usability > div.under{
                width: 100%;
	display: flex;
	align-items: stretch;
	justify-content: center;
                }
@media (max-width: 768px) {
.usability > div.under{
	flex-direction: column;
                }
                }

.usability > div.under > div{
                width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
                column-gap: 1px;
                margin-top: 100px;
                }
@media (max-width: 768px) {
.usability > div.under > div{
                column-gap: 5%;
                margin-top: 60px;
                }
                }

.usability > div.under > div p{
                font-size: 1em;
                line-height: 1.8em;
                }

.usability > div.under > div > div{
                width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
                overflow:hidden;
                }

.usability > div.under > div > div img{
                width: 100%;
                }

/*================================

lineup

================================*/

.lineup {
                width: 100%;
                margin: auto;
                padding: 100px 0 100px;
                border-top: 1px solid #ccc;
                }
@media (max-width: 768px) {
.lineup {
                padding: 60px 0 60px;
                }
                }

.lineup h4{
                font-size: 1.3em;
                line-height: 1em;
                text-align: center;
                }

.lineup div.list{
                width: 75%;
                margin: auto;
                margin-top: 100px;
	display: flex;
	align-items: stretch;
	justify-content: flex-start;
	column-gap: 7%;
	row-gap: 40px;
	flex-wrap: wrap;
                }
@media (max-width: 768px) {
.lineup div.list{
                width: 90%;
                margin-top: 60px;
	column-gap: 5%;
	row-gap: 40px;
                }
                }

.lineup div.list div{
                width: calc(86% / 3);
                }
@media (max-width: 768px) {
.lineup div.list div{
                width: calc(95% / 2);
                }
                }

.lineup div.list div a{
                width: 100%;
	display: flex;
	align-items: stretch;
	justify-content: flex-start;
	flex-direction: column;
                }

.lineup div.list div a div:first-child{
                width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
                overflow: hidden;
	aspect-ratio: 1;
                }

.lineup div.list div a div:first-child img{
                width: 100%;
	-webkit-transition: all .6s;
	-ms-transition: all .6s;
	transition: all .6s;
                }

.lineup div.list div a:hover div:first-child img{
                width: 106%;
                }

.lineup div.list div a div:last-child{
                width: 100%;
                margin-top:20px;
                }
@media (max-width: 768px) {
.lineup div.list div a div:last-child{
                margin-top: 10px;
                }
                }

.lineup div.list div a div:last-child p{
                font-size: .8em;
                line-height: 1.5em;
                text-align: left;
                }

.lineup div.list div a div:last-child p:last-child{
                margin-top:10px;
                }
@media (max-width: 768px) {
.lineup div.list div a div:last-child p:last-child{
                margin-top: 5px;
                }
                }