@import url(components.css);



/* wrapper */
.page-aboutus {
	&:has(> .content-footer:last-child){
		margin-bottom: 0;
	}
}



/* philosophy */
.box-philosophy{
	--padding: 2.25em;
	font-family: "Klee One", serif, cursive;
	background: #edf3f0;
	border-radius: 20px;
}



/* about description */
.aboutus-desc{
    max-width: 1680px;
    margin-inline: auto;
}
.aboutus-desc__notes{
    margin-inline: var(--container-side);
}
:is(.aboutus-desc-grid__ph1, .aboutus-desc-grid__ph3) > img{
    border-radius: 0 1em 1em 0 !important;
}
.aboutus-desc-grid__ph2 > img{
    border-radius: 1em 0 0 1em !important;
}
.ttl-section--aboutus-desc{
    text-align: left !important;
    font-size: clamp(19.2px, 2.038vw, 30px);
}



/* aboutus description grid */
.aboutus-desc-grid{
    display: grid;
    grid-template-areas: "p m s" "t m s";
    gap: 1em;
    
    @media screen and (min-width: 1024px){
        grid-template-columns: auto minmax(min(500px, 100%), 500px) auto;
        align-items: center;
        justify-content: space-between;
    }
    
    @media screen and (max-width: 1023px){
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto repeat(2, 1fr);
        grid-template-areas: "m m" "p s" "t s";
        
        & :where(img){
            height: 100%;
            width: 100%;
            object-fit: cover;
            border-radius: 16px;
			
			/* border: 3px solid red; */
        }
    }
}

.aboutus-desc-grid__main{
    grid-area: m;
	@media screen and (max-width: 1024px){
		margin-bottom: 38.4px;
	}
}
.aboutus-desc-grid__ph1{
    grid-area: p;
}
.aboutus-desc-grid__ph2{
    grid-area: s;
}
.aboutus-desc-grid__ph3{
    grid-area: t;
}



/* mission */
.mission{
    background: url(../images/aboutus/mission.jpg) no-repeat center / cover;
	
	@media screen and (max-width: 1023px) {
		padding-block: 51.2px;
	}
}
.ttl-mission{
    font-size: clamp(1.4rem, 2.25cqw, 36px);
    
    &:where([data-ruby])::before{
        content: attr(data-ruby);
        
        line-height: 1;
        font-size: 5.555em;
		color: var(--main-color);
		
        /* text-indent: 0; */
		margin-top: calc(3em * -0.18);
    }
}
@media screen and (min-width: 1024px){
    .ttl-mission{
        writing-mode: vertical-lr;
		
		/* text-indent: 3em; */
		margin-top: 3em;
		
        display: flex;
        flex-direction: column;
    }
}


/* mission grid */
@media screen and (min-width: 1024px){
    .mission-grid{
        --gutter: minmax(var(--container-side), 1fr);
        --content: ;
        
        display: grid;
        grid-template-columns: minmax(var(--container-side), 1fr) minmax(0px, var(--site-width)) minmax(var(--container-side), 1fr);
		
        & > *{
            grid-column: 2;
        }
        
        & > :where(.mission-grid__header){
            grid-column: 1;
        }
    }

    .mission-grid__body{
        margin-left: 20%;
        margin-block: 90px;
    }
}

@media screen and (max-width: 1023px) {
	.mission-grid{
		margin-inline: var(--container-side);
	}
	.mission-grid__header{
		margin-bottom: 60px;
	}
	.ttl-mission{
		display: grid;
	}
}



/* mission list */
.missionlist{
    counter-reset: i;
}
.missionlist > *{
    counter-increment: i;
    border-bottom: 1px solid;
    border-image: linear-gradient(var(--main-color) 0 0) 1 / 1 / 0 80px 0 0;
    padding-block: 1.875em;
    
    display: grid;
    gap: 1em;
	
	@media screen and (max-width: 1023px) {
		border-image-outset: 0;
	}
    
    &:first-child{
        border-top: 1px solid;
    }
    
    &::before{
        content: counter(i, decimal-leading-zero);
        font-weight: bold;
        color: var(--main-color);
    }
}

.ttl-section--mission{
    text-align: left !important;
    font-size: clamp(20.48px, 2.172vw, 32px);
}

.ttl-content--mission{
    font-size: clamp(15.36px, 1.629vw, 24px);
}



/* contact footer */
.content-footer--aboutus:where(.stack > *){
    --stack: 0;
    
    & .other{
        margin-top: 0;
    }
}



/* value list */
.valuelist{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
	gap: clamp(51.2px, 5.434vw, 80px);
}
.ttl-section--values{
	font-size: clamp(23.04px, 2.445vw, 36px);
}
.ttl-content--values{
	font-size: clamp(19.2px, 2.038vw, 30px);
}





/* production */
.split--production{
	--align-items: center;
	--gap: 1.25em 5em;
}
.split--production > :where(img){
	border: 1px solid var(--sub6-color);
	border-radius: 20px;
}
.ttl-section--production{
	font-size: 2.25em;
}
.ttl-content--production{
	line-height: 1.5;
	font-size: 1.5em;
	border-bottom: 2px solid;
	border-image: linear-gradient(90deg, var(--main-color) 2em, transparent 0) 1;
	padding-bottom: .75em;
	display: grid;
	gap: .5em;
	
	& > :where(small){
		font-size: .666em;
		color: var(--main-color);
	}
}



/* business list */
.businesslist{
	& > * + *{
		margin-top: clamp(51.2px, 5.434vw, 80px);
	}
	
	& > :where(:nth-child(odd)){
		@media screen and (min-width: 1024px){
			flex-direction: row-reverse;
		}
	}
}


.split-businesslist{
    --gap: 1.875em clamp(var(--container-side), 10.869vw, 160px);
}
@media screen and (min-width: 1024px){
    .split-businesslist > :not(.split-businesslist__photo){
        align-self: center;
        margin-block: 80px;
    }
    .split-businesslist__photo{
        position: relative;
        z-index: 0;
        
        & > :where(img){
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
}
.ttl-section--businesslist{
	font-size: clamp(1.8em, 2.445vw, 2.25em);
    text-align: left;
	justify-content: start;
    
    &::before{
        margin-inline: 0 !important;
    }
}





















/* @move to components */
.ttl-section{
	text-align: center;
	
	&:where([data-ruby]){
		display: grid;
		gap: .125em;
	}
	&:where([data-ruby])::before{
		content: attr(data-ruby);
		font-size: .444em;
		background: url(../images/common/icon_title_bg.svg) no-repeat left center / 1em 1em;
		max-width: fit-content;
		margin-inline: auto;
		padding-left: 1.5em;
	}
}



/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* workspace */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */




/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */