@charset "utf-8";

#wrapper {padding: 0;}

#container_title {display: none;}

.about {background: var(--white); position: relative;}

.contents-wrap>section {width: 100%; padding: clamp(100px, calc( 200 / var(--inner) * 100vw ), 200px) var(--inner-padding-l);}

.about-intro {text-align: center; background: var(--white);}

.about-intro .tit {color: var(--primary); margin-bottom: 40px;}
.about-intro .txt {color: var(--gray700);}

.ul-problems {width: 100%; max-width: 1110px; position: relative; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; margin: clamp(120px, calc( 150 / var(--inner) * 100vw ), 150px) auto 0;}

.ul-problems>li {margin: -15px;}
.ul-problems>li:nth-child(odd) {background: var(--light-yellow);}
.ul-problems>li:nth-child(even) {background: var(--latte);}
.problem-item {width: clamp(300px, 20.3125vw, 390px); max-width: 100%; height: auto; aspect-ratio: 1/1; padding: clamp(16px, calc( 30 / var(--inner) * 100vw ), 30px); border-radius: 50%; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--gray900);}
.problem-item1, .problem-item3 {padding: clamp(16px, calc( 30 / var(--inner) * 100vw ), 30px) clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px);}


.about-story {width: 100%; background: url(../img/about/story-bg.png) var(--gray50); background-size: 100%; background-repeat: no-repeat; background-position: center bottom; padding: clamp(120px, calc( 150 / var(--inner) * 100vw ), 150px) var(--inner-padding-l) 250px; text-align: center; line-height: 1.8;}
.about-story p {max-width: 800px; font-family: inherit; font-weight: inherit; font-size: inherit; line-height: inherit; letter-spacing: inherit; line-height: 1.8; color: var(--gray900); white-space: pre-line; margin: 0 auto;}
.about-story p+p {margin-top: calc(1.875rem*1.8);}
.about-story .logo {width: auto; height: 5rem; aspect-ratio: 85/34; display: block; margin: 3.125rem auto 0;}


.ul-factory>li + li {margin-top: clamp(50px, 4.6875vw, 90px);}
.factory-item {width: 100%; height: auto; aspect-ratio: 1740/800; border-radius: clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px); position: relative; overflow: hidden; box-shadow: 0 0 clamp(30px, calc( 50 / var(--inner) * 100vw ), 50px) 10px rgba(34, 31, 31, .1);}
.factory-item img {width: 100%; height: 100%; object-fit: cover; display: block;}

.factory-name {padding: 10px 24px; position: absolute; bottom: 0; left: 0; background: rgba(255, 255, 255, 0.6); border-radius: 0 20px 0 0; color: var(--gray900); white-space: nowrap;}