/**********************
- ROOT
- BASE
- GENERAL
  -- FONT
  -- ALIGN
  -- FLEX
  -- LIST
  -- OTHER
- HEADER
- BREADCRUMB
- CONTAINER
- HEADING
- BUTTON
- FOOTER
- ARCHIVE
- SINGLE
- CONTACT
- FRONT
- PAGE PARTS
- LOADING
- COLOR
- MARGIN
- ANIMATION
- RESPONSIVE
***********************/

/**********************
* ブレイクポイント
* 560px/960px
**********************/


/*********************
ROOT
**********************/
:root {
  --base: #FFF;
  --bg-1: #F9FAF5;
  --bg-2: #ECEAE1;
  --text-main: #2E0F0A;

  --accent-color-1: #CEA704;
  --accent-color-2: #2E0F0A;
  --gradient: linear-gradient(70deg, #5DC5F7, #FA966B);

  --font-min: "Shippori Mincho", serif;
  --font-default: "Lato", sans-serif;
  --font-material: 'Material Icons Round';
  --light: 300;
  --normal: 400;
  --bold: 700;
  --spacing-wide: 0.1em;
  --spacing-medium: 0.05em;

  --container: calc(1920px + 6%);
  --container-side: 3%;
  --container-ll: 1600px;
  --container-l: 1400px;
  --container-lm: 1200px;
  --container-m: 960px;
  --container-s: 660px;
  --container-ss: 480px;

}

#breadcrumb.border-bottom {
  padding-bottom: 1.6rem;
  border-bottom: 1px solid #ccc;
}

h2.page-about-title {
  font-size: 2.4rem;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  text-orientation: upright;
  margin: 60px auto 0;
  letter-spacing: .25em;
}

.about-top-img {
  padding-top: 4rem;
}

.about-top-img img {
  width: 100%;
  height: 100%;
  min-height: 300px;
  object-fit: cover;
}

/*********************
SECTION ABOUT 
*********************/
#about-page-about .container-l {
  padding: 224px 0 315px;
  position: relative;
}

#about-page-about .about-wrap {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 6.25vw;
}

#about-page-about .about-text {
  position: relative;
}

#about-page-about .about-text::before {
  position: absolute;
  top: 8%;
  left: -6%;
  transform: translateY(-100%);
  content: "about";
  text-transform: capitalize;
  font-family: var(--font-min);
  color: var(--accent-color-2);
  opacity: .04;
  font-size: 12rem;
  line-height: 1em;
}

#about-page-about .about-text p {
  letter-spacing: var(--spacing-wide);
  line-height: 2em;
}

#about-page-about .about-img01 {
  width: clamp(260px,50.95vw,460px);
}

#about-page-about .about-img02 {
  position: absolute;
  top: 100px;
  right: 20px;
  width: 14.1%;
}

#about-page-about .about-img03 {
  position: absolute;
  bottom: 80px;
  right: 192px;
  width: clamp(200px,24vw,320px);
}

#about-page-about .about-img01 img,
#about-page-about .about-img02 img,
#about-page-about .about-img03 img {
  width: 100%;
  height: 100%;
  object-fit: cover; 
}

@media screen and (max-width: 960px) {
  #about-page-about .container-l {
    padding: 224px 0 260px;
  
}

#about-page-about .about-img01 {
    aspect-ratio: 2/3;
}

#about-page-about .about-img01 img {
  object-position: right;
}

  #about-page-about .about-img02 {
    top: 60px;
}

#about-page-about .about-img03 {
    bottom: 40px;
    right: 80px;
    width: clamp(200px,27vw,320px);
}
}
@media screen and (max-width: 768px) {
  #about-page-about .container-l {
    padding: 100px 0 320px;
}

h2.page-about-title {
    font-size: 1.8rem;
}

  #about-page-about .about-wrap {
    flex-direction: column;
    align-items: start;
    gap: 60px;
  }

  #about-page-about .about-img01 {
    width: clamp(260px,52.95vw,460px);
    aspect-ratio: 460/560;
}

#about-page-about .about-text::before {
    left: 0;
    font-size: 9rem;
}

#about-page-about .about-img02 {
    top: 240px;
    width: 35.1%;
}

#about-page-about .about-img03 {
    bottom: 40px;
    right: 40px;
    width: clamp(280px,42vw,320px);
}
}

@media screen and (max-width: 560px) {
  #breadcrumb.border-bottom {
    padding-bottom: 1rem;
}

h2.page-about-title {
    font-size: 1.6rem;
    margin: 40px auto 0;
}

.about-top-img {
    padding-top: 2rem;
}

  #about-page-about .container-l {
    padding: 60px 0 200px;
  }

  #about-page-about .about-img01 {
    width: clamp(180px,58.95vw,460px);
  }

  #about-page-about .about-text::before {
    top: 5%;
    font-size: 8rem;
}

#about-page-about .about-img02 {
    top: 190px;
    right: 0;
    width: 32.1%;
}

#about-page-about .about-img03 {
  right: 20px;
  bottom: 20px;
    width: clamp(200px,35vw,320px);
}
}

/*********************
SECTION MESSAGE
*********************/
section#about-message {
  padding: 160px 0;
}

section#about-message .container-l {
  background: url(/Contents/ImagesPkg/common/common/bg_accent.webp),
  var(--bg-2);
  background-size: 60%;
  padding: 60px clamp(15px,7.1%,100px);
  position: relative;
}

section#about-message .container-l::after {
  position: absolute;
  content: "";
  background-image: url(/Contents/ImagesPkg/common/about/about-message-accent.webp);
  background-repeat: no-repeat;
  background-size: cover;
  width: 34.6%;
  height: auto;
  aspect-ratio: 415.49/92.2;
  top: 0;
  right: 0;

}

section#about-message .wrap {
  display: flex;
  align-items: center;
  gap: 20px 5%;
}

section#about-message .image-wrap {
  width: clamp(200px,25%,300px);
}

section#about-message .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

section#about-message .image-wrap p {
  padding-top: 10px;
}

section#about-message .image-wrap p span {
  font-size: clamp(1.8rem,1.26vw,2.4rem);
}

section#about-message .about-message-text {
  flex: 1;
}

section#about-message h2 {
  font-size: 4rem;
  width: fit-content;
  border-bottom: 1px solid var(--accent-color-1);
}

section#about-message .about-message-text p {
  padding-top: 6rem;
  line-height: 2em;
}

@media screen and (max-width: 1200px) {
  section#about-message .wrap {
    align-items: flex-start;
  }
}

@media screen and (max-width: 768px) {
  section#about-message {
    padding: 60px 0;
}

  section#about-message .container-l {
    padding: 80px clamp(15px,7.1%,100px) 60px;
}

section#about-message .container-l::after {
  width: 43.6%;
  min-width: 260px;
}

  section#about-message .wrap {
    flex-direction: column;
}

section#about-message .image-wrap {
  width: 100%;
  max-width: 320px;
  margin: auto;
}

section#about-message .image-wrap p {
  text-align: center;
}

section#about-message h2 {
  font-size: 2.4rem;
}

section#about-message .about-message-text p {
  padding-top: 2rem;
}
}

@media screen and (max-width: 560px) {
  section#about-message .container-l {
    padding: 60px clamp(15px,4.1%,20px) 30px;
    background-size: 340%;
}

section#about-message .container-l::after {
    min-width: 230px;
}

  section#about-message .image-wrap {
    width: clamp(200px,61%,260px);
    max-width: none;
}
}

/*********************
SECTION SOY INGREDIENTS
*********************/
section#about-soy-Ingredients {
  padding: 160px 0;
  background-image: url(/Contents/ImagesPkg/common/common/bg_accent.webp),
  url(/Contents/ImagesPkg/common/about/about-soy-Ingredients-bg.webp);
  background-size: 60%, cover;
  background-repeat: repeat no-repeat;
}

section#about-soy-Ingredients h2 {
  width: fit-content;
  font-size: 1.8rem;
  border: 1px solid var(--accent-color-2);
  border-radius: 999px;
  padding: .6rem 2rem;
  line-height: 1em;
}

section#about-soy-Ingredients h3 {
  font-size: 4rem;
  padding-top: 2rem;
  letter-spacing: var(--spacing-wide);
}

section#about-soy-Ingredients .main-text {
  padding-top: 4rem;
  line-height: 2em;
  letter-spacing: var(--spacing-wide);
}

section#about-soy-Ingredients .soy-kinds {
  width: 100%;
  max-width: 840px;
  padding: 40px;
  background: linear-gradient(110deg, rgba(255,255,255,.6), rgba(255,255,255,.6));
  margin-top: 6rem;
}

section#about-soy-Ingredients .soy-kinds p {
  font-size: 2.4rem;
}

section#about-soy-Ingredients ul.soy-kinds-list {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  padding-top: 2rem;
}

section#about-soy-Ingredients li.soy-kinds-item {
  width: calc((100% - 120px)/4);
}

section#about-soy-Ingredients li.soy-kinds-item .image {
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
}

section#about-soy-Ingredients li.soy-kinds-item figcaption {
  background-color: var(--accent-color-2);
  color: #fff;
  position: relative;
  border-radius: 999px;
  text-align: center;
  margin-top: 1.2rem;
  padding: 2px 0;
}

section#about-soy-Ingredients li.soy-kinds-item figcaption::after {
  position: absolute;
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  top: 50%;
  right: 10px;
  transform: translateY(-50%) rotate(45deg);
}

@media screen and (max-width: 768px) {
  section#about-soy-Ingredients {
    padding: 60px 0;
    background-image: url(/Contents/ImagesPkg/common/common/bg_accent.webp),
    url(/Contents/ImagesPkg/common/about/about-soy-Ingredients-bg-sp.webp);
    background-position: 75% 0;

}

section#about-soy-Ingredients h2 {
  font-size: 1.6rem;
}

section#about-soy-Ingredients h3 {
  font-size: 2.4rem;
  padding-top: 1rem;
}

section#about-soy-Ingredients .main-text {
  padding-top: 2rem;
}

section#about-soy-Ingredients .soy-kinds {
  padding: 20px;
  margin-top: 4rem;
}

section#about-soy-Ingredients .soy-kinds p {
  font-size: 1.8rem;
}

section#about-soy-Ingredients ul.soy-kinds-list {
  max-width: 560px;
  margin: auto;
}

section#about-soy-Ingredients li.soy-kinds-item {
  width: calc((100% - 80px)/3);
}
}

@media screen and (max-width: 560px) {
  section#about-soy-Ingredients {
    background-size: 300%, cover;
}
  section#about-soy-Ingredients .soy-kinds {
    padding: 15px;
}

section#about-soy-Ingredients h2 {
  font-size: 1.4rem;
}

section#about-soy-Ingredients h3 {
  font-size: 2rem;
}

  section#about-soy-Ingredients ul.soy-kinds-list {
    gap: 30px 15px;
    max-width: 360px;
}

section#about-soy-Ingredients li.soy-kinds-item {
  width: calc((100% - 15px)/2);
}

section#about-soy-Ingredients li.soy-kinds-item figcaption::after {
  width: 8px;
  height: 8px;
}
}

/*********************
SECTION COMMITMENT PRODUCTION
*********************/
section#about-commitment-production {
  padding: 160px 0;
  background: url(/Contents/ImagesPkg/common/common/bg_accent.webp),
  var(--bg-2);
  background-size: 60%;
}

section#about-commitment-production li.commitment-production-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-min);
  position: relative;
}

section#about-commitment-production .commitment-production-accent01 {
  position: absolute;
  bottom: 40px;
  left: 7.1%;
  width: clamp(300px,31vw,400px);
}

section#about-commitment-production .commitment-production-accent02 {
  position: absolute;
  bottom: 100px;
  left: 44.3%;
  width: clamp(140px,14vw,240px);
}

section#about-commitment-production .commitment-production-accent03 {
  position: absolute;
  bottom: 0;
  left: 33.4%;
  width: clamp(280px,29vw,353px);
}

section#about-commitment-production li.commitment-production-item .text h2 {
  width: fit-content;
  border: 1px solid var(--accent-color-2);
  border-radius: 999px;
  padding: 0 20px;
}

section#about-commitment-production li.commitment-production-item .text h3 {
  font-size: 3.2rem;
  letter-spacing: var(--spacing-wide);
  padding-top: 1rem;
}

section#about-commitment-production li.commitment-production-item .text p {
  padding-top: 4rem;
  line-height: 2em;
  letter-spacing: var(--spacing-wide);
}

section#about-commitment-production li.commitment-production-item:nth-child(1) {
  padding-bottom: clamp(320px,33vw,488px);
}

section#about-commitment-production li.commitment-production-item:nth-child(1) .main-image {
  width: 50%;
  height: clamp(460px,48vw,525px);
}

section#about-commitment-production li.commitment-production-item:nth-child(1)  .text {
  width: 45.7%;
}

section#about-commitment-production li.commitment-production-item:nth-child(2) {
  flex-direction: row-reverse;
  padding-bottom: clamp(218px,22vw,248px);
}

section#about-commitment-production li.commitment-production-item:nth-child(2) .main-image {
  width: 35.7%;
  height: clamp(500px,52vw,600px);
}

section#about-commitment-production li.commitment-production-item:nth-child(2) .text {
  width: 52.8%;
}

@media screen and (max-width: 1200px) {
  section#about-commitment-production .commitment-production-accent02 {
    left: 47.3%;
  }
}

@media screen and (max-width: 960px) {
  section#about-commitment-production li.commitment-production-item:nth-child(1) {
    flex-direction: column;
    align-items: flex-start;
    padding-bottom: 60px;
  }

  section#about-commitment-production li.commitment-production-item:nth-child(2) {
    flex-direction: column;
    align-items: flex-end;
    padding-bottom: 0;
  }

  section#about-commitment-production li.commitment-production-item:nth-child(1) .main-image {
    width: 76%;
    height: auto;
}

  section#about-commitment-production li.commitment-production-item:nth-child(2) .main-image {
    width: 60%;
    height: clamp(300px,42vw,400px);
  }

  section#about-commitment-production li.commitment-production-item:nth-child(1) .text,
  section#about-commitment-production li.commitment-production-item:nth-child(2) .text {
    width: 100%;
    padding-top: 40px;
  }

  section#about-commitment-production .commitment-production-accent01 {
    display: none;
}

  section#about-commitment-production .commitment-production-accent02 {
    left: auto;
    right: 0;
    bottom: auto;
    top: 200px;
    width: clamp(140px,18vw,240px);
}

section#about-commitment-production .commitment-production-accent03 {
  bottom: auto;
  top: 120px;
  left: 0;
  width: clamp(180px,34vw,320px);
}

}

@media screen and (max-width: 768px) {
  section#about-commitment-production {
    padding: 60px 0;
  }

  section#about-commitment-production li.commitment-production-item:nth-child(1) .main-image {
    width: 100%;
}

section#about-commitment-production .commitment-production-accent02 {
  left: auto;
  right: 5%;
  bottom: auto;
  top: clamp(280px,75vw,580px);
  width: clamp(100px,18vw,140px);
}

section#about-commitment-production li.commitment-production-item:nth-child(1) .text {
  padding-top: clamp(240px,43vw,300px);
}

section#about-commitment-production li.commitment-production-item:nth-child(2) .text {
  padding-top: 40px;
}

section#about-commitment-production .commitment-production-accent01 {
  display: block;
  bottom: auto;
  top: clamp(300px,80vw,610px);
  left: 53%;
  transform: translateX(-50%);
  width: clamp(180px,34vw,260px);
}

  section#about-commitment-production .commitment-production-accent02 {
    left: auto;
    right: 5%;
    bottom: auto;
    top: clamp(280px,75vw,580px);
    width: clamp(100px,18vw,140px);
}
}

@media screen and (max-width: 560px) {
  section#about-commitment,
  section#about-commitment-production {
    background-size: 300%;
}
  section#about-commitment-production li.commitment-production-item .text h3 {
    font-size: 2rem;
}

section#about-commitment-production li.commitment-production-item:nth-child(1) .text {
  padding-top: clamp(220px,58vw,260px);
}

section#about-commitment-production li.commitment-production-item:nth-child(1) .main-image {
  width: 100%;
}

section#about-commitment-production .commitment-production-accent01 {
  display: block;
  top: clamp(280px,80vw,610px);
  left: auto;
  right: 14%;
  width: clamp(160px,49vw,240px);
}

section#about-commitment-production .commitment-production-accent02 {
  top: clamp(240px,75vw,410px);
  width: clamp(100px,25vw,140px);
}

section#about-commitment-production .commitment-production-accent03 {
  bottom: auto;
  top: clamp(260px,73vw,400px);
  left: auto;
  right: 6%;
  width: clamp(120px,36vw,200px);
}

section#about-commitment-production li.commitment-production-item:nth-child(2) .text {
  padding-top: clamp(120px,37vw,180px);
}

section#about-commitment-production li.commitment-production-item:nth-child(2) .main-image {
  width: 100%;
  height: clamp(240px,68vw,380px);
}
}