@charset "utf-8";

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

_facade

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

.split {
                display: flex;
                height: calc(100svh - 60px); /* 可変全画面 */
                width: 100%;
                overflow: hidden;
                background: #222;
                flex-direction: row;
                }
@media (max-width: 768px) {
.split {
                flex-direction: column-reverse;
                }
                }

.pane {
                flex: 1 1 50%;
                position: relative;
                background: #222;
                }

.pane img {
                position: absolute;
                inset: 0;
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: left; 
                opacity: 0;
                transition: opacity 3000ms ease;
                background: #222;
                }
.pane:first-child img {
                object-position: right; 
                }

@media (max-width: 768px) {
.pane img {
                object-position: bottom center;
                }
.pane:first-child img {
                object-position: top center;
                }
                }


.pane img.active {
                opacity: 1;
                }


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

philosohy

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

.philosohy{
                width: 100%;
                padding: 200px 0 0;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
                }
@media (max-width: 768px) {
.philosohy{
                padding: 100px 0;
                }
                }

.philosohy h2{
                width: 300px;
                height: auto;
                }
@media (max-width: 768px) {
.philosohy h2{
                width: 200px;
                }
                }

.philosohy h2 img{
                width: 100%;
                height: auto;
                }

.philosohy > .image{
                width: 15%;
                min-width:200px;
                max-width: 400px;
                display: block;
                margin-top: 120px;
                }
@media (max-width: 768px) {
.philosohy > .image{
                margin-top: 80px;
                }
                }

.philosohy > .image img{
                width: 100%;
                }

.philosohy ._link-center{
                margin-top: 10px;
                }

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

concept

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

.concept{
                width: 70%;
                margin: auto;
                padding: 300px 0 0;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: row;
                column-gap: 10%;
                }
@media (max-width: 768px) {
.concept{
                width: 90%;
                padding: 30px 0 0;
	flex-direction: column;
                }
                }

.concept > div{
                width: 40%;
                margin: auto;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	flex-direction: column;
                row-gap: 50px;
                }
@media (max-width: 768px) {
.concept > div{
                width: auto;
                row-gap: 50px;
                }
                }

.concept > div img{
                width: 100%;
                }

.concept > div h3{
                font-size: 1.8em;
                font-family: "FOT-筑紫ゴシック Pr5 R", sans-serif;
                }
@media (max-width: 768px) {
.concept > div h3{
                margin-top: 40px;
                font-size: 1.6em;
                }
                }


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

product

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

.product{
                width: 100%;
                margin: auto;
                padding: 120px 0 0;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: row;
                }
@media (max-width: 768px) {
.product{
                width: 95%;
                margin-left: 5%;
                padding: 90px 0 0;
	flex-direction: column-reverse;
                }
                }

.product > div:first-child{
                width: 40%;
                margin-left: 5%;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	flex-direction: column;
                }
@media (max-width: 768px) {
.product > div:first-child{
                width: 90%;
                margin-left: 5%;
                margin-top: 25px;
                }
                }

.product > div:last-child{
                width: 60%;
	display: flex;
	align-items: center;
	justify-content: center;
                overflow:hidden;
	aspect-ratio: 3 / 2;
                }
@media (max-width: 768px) {
.product > div:last-child{
                width: 100%;
	aspect-ratio: 5 / 4;
                }
                }

.product > div > div > img{
                width: 100%;
                }

.product > div > div > img.jsp{
                padding: 10% 10%;
                }

.product > div > h3{
                font-size: 3.2em;
                line-height: 1em;
                letter-spacing: .05em;
                }
@media (max-width: 768px) {
.product > div > h3{
                font-size: 3em;
                }
                }

.product > div > p{
                margin-top: 20px;
                font-size: 1.2em;
                line-height: 1em;
                }
@media (max-width: 768px) {
.product > div > p{
                margin-top: 10px;
                font-size: 1.1em;
                }
                }

.product ._link-left{
                margin-top: 60px;
                }
@media (max-width: 768px) {
.product ._link-left{
                margin-top: 30px;
                }
                }

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

ending

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

.ending{
                width: 100%;
                margin: auto;
                padding: 300px 0 300px;
	display: flex;
	align-items: center;
	justify-content: center;
                }
@media (max-width: 768px) {
.ending{
                padding: 240px 0 200px;
                }
                }

.ending p{
                width: auto;
                font-size: 1.2em;
                line-height: 2em;
                }
@media (max-width: 768px) {
.ending p{
                font-size: 1em;
                }
                }