@charset "UTF-8";
@import url("global.css");
.introduction {
  margin-bottom: 50px; }
  .introduction .wrapper {
    display: flex;
    align-items: center;
    position: relative;
    padding-bottom: 200px; }
  .introduction .image1 {
    display: flex;
    width: 48.75%;
    height: 100%; }
    .introduction .image1 figure {
      width: 100%;
      height: 100%;
      border-radius: 5px;
      overflow: hidden; }
  .introduction .text {
    width: 50%;
    padding-left: 5.1vw; }
    .introduction .text .catch {
      font-size: clamp(24px, 4.2vw, 50px);
      line-height: 1; }
      .introduction .text .catch span {
        display: inline-block;
        position: relative;
        letter-spacing: .05em; }
        .introduction .text .catch span::before {
          content: "";
          background-color: #fff;
          position: absolute;
          inset: .2em .8em .1em .1em;
          z-index: -1; }
    .introduction .text .title {
      margin-top: 10px;
      font-size: clamp(14px, 1.9vw, 27px); }
    .introduction .text p:not([class]) {
      margin-top: 20px; }
  .introduction .image2 {
    position: absolute;
    right: 0;
    bottom: 0;
    max-width: 25%; }
    .introduction .image2 figure {
      width: 100%;
      height: 100%;
      border-radius: 5px;
      overflow: hidden; }

.block_title {
  text-align: center;
  margin-bottom: 40px; }
  .block_title span {
    display: block; }
  .block_title .en {
    font-size: clamp(32px, 5vw, 64px);
    line-height: 1; }
  .block_title .ja {
    font-size: clamp(10px, 1.2vw, 14px); }

.section {
  border-bottom: #B09F94 1px solid;
  padding-block: 80px;
  margin-bottom: 100px; }
  .block_title + .section {
    border-top: #B09F94 1px solid;
    margin-bottom: 0; }
  .section .sec_intro {
    display: flex;
    align-items: center;
    flex-direction: row-reverse; }
    .section .sec_intro .intro_ph {
      max-width: 60%;
      flex-shrink: 0; }
      .section .sec_intro .intro_ph figure {
        width: 100%;
        height: 100%;
        border-radius: 3px;
        overflow: hidden; }
    .section .sec_intro .intro_text {
      flex-grow: 1;
      padding-right: 50px; }
      .section .sec_intro .intro_text .num {
        margin-bottom: 25px; }
        .section .sec_intro .intro_text .num > p {
          display: inline-block;
          position: relative;
          letter-spacing: .05em;
          font-size: clamp(15px, 1.9vw, 24px); }
          .section .sec_intro .intro_text .num > p::before {
            content: "";
            background-color: #fff;
            position: absolute;
            inset: .8em .3em .4em .2em;
            z-index: -1; }
          .section .sec_intro .intro_text .num > p em {
            display: inline-block;
            vertical-align: -3px;
            margin-left: 5px;
            line-height: 1;
            font-size: clamp(30px, 4.6vw, 63px);
            font-family: "Vollkorn", "Zen Old Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
            font-style: italic; }
      .section .sec_intro .intro_text .logotype {
        margin-bottom: 40px;
        width: 100%;
        display: flex;
        align-items: flex-end; }
        .section .sec_intro .intro_text .logotype i {
          display: block;
          line-height: 0; }
          .section .sec_intro .intro_text .logotype i svg {
            width: auto;
            height: auto;
            max-height: 62px;
            max-width: 360px; }
            .section .sec_intro .intro_text .logotype i svg * {
              fill: #362929; }
        .section .sec_intro .intro_text .logotype small {
          display: block;
          margin-left: 7px;
          font-size: 1.06em;
          line-height: 1;
          white-space: nowrap; }
      .section .sec_intro .intro_text .title {
        margin-bottom: 40px;
        font-size: clamp(16px, 2.1vw, 30px);
        font-weight: 700; }
      .section .sec_intro .intro_text .text {
        text-align: justify; }
  .section .sec_body {
    margin-top: 70px;
    display: flex; }
    .section .sec_body .image img {
      -webkit-border-radius: 5px;
      border-radius: 5px;
      overflow: hidden; }
    .section .sec_body .caption {
      text-align: justify;
      font-size: 1em; }
    .section .sec_body .image_main {
      max-width: 56%;
      flex-shrink: 0; }
      .section .sec_body .image_main .image {
        width: 100%; }
      .section .sec_body .image_main .caption {
        margin-top: 15px; }
    .section .sec_body .image_sub {
      flex-grow: 1;
      padding-left: 50px; }
      .section .sec_body .image_sub ul {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        height: 100%; }
        .section .sec_body .image_sub ul li {
          display: flex;
          align-items: center;
          justify-content: space-between; }
          .section .sec_body .image_sub ul li:nth-child(odd) {
            flex-direction: row-reverse; }
          .section .sec_body .image_sub ul li:last-child {
            margin-top: auto; }
          .section .sec_body .image_sub ul li .image {
            width: 48%;
            flex-shrink: 0; }
          .section .sec_body .image_sub ul li .caption {
            width: 49%; }
  .section .worksbtn {
    margin-top: 80px; }
    .section .worksbtn a {
      display: flex;
      justify-content: center;
      height: 60px;
      line-height: 1; }
      .section .worksbtn a:hover {
        opacity: .7; }
      .section .worksbtn a .en {
        background-color: #362929;
        display: flex;
        align-items: center;
        padding: 0 30px; }
        .section .worksbtn a .en i svg {
          width: auto;
          height: auto;
          max-width: 124px;
          max-height: 24px; }
          .section .worksbtn a .en i svg * {
            fill: #FFF; }
      .section .worksbtn a .ja {
        background-color: #FFF;
        padding: 0 15px 0 30px;
        font-weight: 600;
        font-size: clamp(11px, 1.6vw, 18px);
        display: flex;
        align-items: center; }
        .section .worksbtn a .ja::after {
          text-align: center;
          content: "\f061";
          display: block;
          margin-left: 60px;
          font-family: 'Font Awesome 6 free','Font Awesome 6 Brands';
          font-weight: 900;
          font-size: .75em;
          background-color: #CFB29D;
          color: #FFF;
          width: 26px;
          line-height: 26px; }

#process {
  margin: 80px 0 120px; }
  #process .process {
    display: flex;
    justify-content: space-between;
    margin: 0 -2.9vw; }
    #process .process li {
      width: calc(100% / 3);
      padding: 0 2.9vw;
      -webkit-box-sizing: border-box;
      box-sizing: border-box; }
      #process .process li + li .item_inner .image {
        position: relative; }
        #process .process li + li .item_inner .image::before {
          content: "";
          position: absolute;
          z-index: 2;
          left: -6.3vw;
          top: 50%;
          -webkit-transform: translateY(-50%) rotate(270deg);
          transform: translateY(-50%) rotate(270deg);
          width: 80px;
          aspect-ratio: 2 / 3;
          background: url("../cordinate/img/next.png") no-repeat center center;
          background-size: contain; }
      #process .process li .item_inner .image {
        padding: 10px;
        -webkit-border-radius: 6px;
        border-radius: 6px;
        background-color: #FFF;
        margin-bottom: 20px; }
        #process .process li .item_inner .image img {
          -webkit-border-radius: 3px;
          border-radius: 3px;
          overflow: hidden; }
      #process .process li .item_inner .text .en {
        font-size: clamp(16px, 1.8vw, 26px);
        line-height: 1;
        color: #B09F94; }
      #process .process li .item_inner .text > dl dt {
        display: flex;
        align-items: baseline;
        margin-bottom: 10px; }
        #process .process li .item_inner .text > dl dt span {
          display: block; }
        #process .process li .item_inner .text > dl dt .num {
          line-height: 1;
          font-family: "Vollkorn", "Zen Old Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
          font-style: italic;
          font-size: clamp(30px, 4.5vw, 63px);
          margin-right: 10px; }
        #process .process li .item_inner .text > dl dt .ja {
          font-size: clamp(18px, 2.2vw, 30px); }

#produce .wrapper {
  position: relative; }
#produce .text {
  padding: 7.3vw 35% 7.3vw 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-align: justify;
  font-size: clamp(15px, 1.7vw, 21px);
  position: relative; }
  #produce .text::before {
    content: "";
    position: absolute;
    z-index: -1;
    right: 20vw;
    top: 0;
    bottom: 0;
    left: calc( ( 100vw - 1600px ) / 2 * -1 );
    background-color: #FFF;
    -webkit-border-top-right-radius: 30px;
    border-top-right-radius: 30px; }
#produce .img {
  position: absolute;
  z-index: 1;
  right: 50px;
  bottom: -40px;
  max-width: 30%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }
  #produce .img img {
    -webkit-border-radius: 5px;
    border-radius: 5px;
    overflow: hidden; }

/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-ex ( 1760px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 1760px) {
  .introduction .image1 {
    -webkit-transform: translateX(-50px);
    transform: translateX(-50px); }
    .introduction .image1 figure {
      -webkit-border-top-left-radius: 0;
      border-top-left-radius: 0;
      -webkit-border-bottom-left-radius: 0;
      border-bottom-left-radius: 0; }
  .introduction .text {
    padding-left: 0; }
  .introduction .image2 {
    right: 50px; }

  .section .sec_intro .intro_ph {
    max-width: 56%; }
  .section .sec_intro .intro_text .num {
    margin-bottom: 20px; }
  .section .sec_intro .intro_text .logotype {
    margin-bottom: 30px; }
    .section .sec_intro .intro_text .logotype i svg {
      max-height: 38px;
      max-width: 240px; }
  .section .sec_intro .intro_text .title {
    margin-bottom: 30px; }
  .section .sec_body .image_main {
    max-width: 54%; }

  #produce .text::before {
    left: -50px; } }
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-1 ( 1300px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 1300px) {
  .introduction {
    margin-bottom: 40px; }
    .introduction .wrapper {
      padding-bottom: 180px; }
    .introduction .image1 {
      width: 47%; }
    .introduction .text {
      width: 52%;
      padding-left: 4vw; }
      .introduction .text p:not([class]) {
        margin-top: 15px; }

  .block_title {
    margin-bottom: 35px; }

  .section {
    padding-block: 65px;
    margin-bottom: 80px; }
    .section .sec_intro .intro_ph {
      max-width: 52%; }
    .section .sec_intro .intro_text {
      padding-right: 40px; }
      .section .sec_intro .intro_text .num {
        margin-bottom: 15px; }
      .section .sec_intro .intro_text .logotype {
        margin-bottom: 20px; }
        .section .sec_intro .intro_text .logotype i svg {
          max-height: 34px;
          max-width: 200px; }
      .section .sec_intro .intro_text .title {
        margin-bottom: 10px; }
    .section .sec_body {
      margin-top: 50px; }
      .section .sec_body .caption {
        font-size: inherit; }
      .section .sec_body .image_main {
        max-width: 50%; }
        .section .sec_body .image_main .caption {
          margin-top: 10px; }
    .section .worksbtn {
      margin-top: 65px; }
      .section .worksbtn a {
        height: 56px; }
        .section .worksbtn a .en {
          padding: 0 25px; }
          .section .worksbtn a .en i svg {
            max-width: 120px;
            max-height: 20px; }
        .section .worksbtn a .ja {
          padding: 0 15px 0 25px; }
          .section .worksbtn a .ja::after {
            margin-left: 50px; }

  #process {
    margin: 60px 0 90px; }
    #process .process {
      margin: 0 -20px; }
      #process .process li {
        padding: 0 20px; }
        #process .process li + li .item_inner .image::before {
          left: -60px;
          width: 50px; }
        #process .process li .item_inner .image {
          padding: 7px;
          margin-bottom: 15px; }
        #process .process li .item_inner .text > dl dt {
          margin-bottom: 5px; }

  #produce .text {
    padding: 6.5vw 37% 6.5vw 0; } }
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-2 ( 959px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 959px) {
  .introduction .wrapper {
    align-items: stretch;
    flex-wrap: wrap;
    position: static;
    padding-bottom: 0; }
  .introduction .image1 {
    width: 50%;
    height: auto;
    -webkit-transform: translateX(-6vw);
    transform: translateX(-6vw); }
  .introduction .text {
    padding: 1em 0;
    width: 50%; }
    .introduction .text .title {
      margin-top: 5px; }
    .introduction .text p:not([class]) {
      margin-top: 10px; }
  .introduction .image2 {
    position: static;
    max-width: 30%;
    margin: 30px 0 0 auto; }
    .introduction .image2 figure {
      border-radius: 3px; }

  .block_title {
    margin-bottom: 30px; }

  .section {
    padding-block: 50px;
    margin-bottom: 65px; }
    .section .sec_intro {
      align-items: stretch; }
      .section .sec_intro .intro_ph {
        max-width: 54%; }
      .section .sec_intro .intro_text {
        padding: 10px 20px 10px 0; }
        .section .sec_intro .intro_text .num {
          margin-bottom: 5px; }
          .section .sec_intro .intro_text .num > p::before {
            inset: .5em .4em .6em .2em; }
        .section .sec_intro .intro_text .logotype {
          margin-bottom: 10px; }
          .section .sec_intro .intro_text .logotype i svg {
            max-width: 160px;
            max-height: 26px; }
        .section .sec_intro .intro_text .text {
          line-height: 1.5; }
    .section .sec_body {
      margin-top: 35px; }
      .section .sec_body .image img {
        -webkit-border-radius: 3px;
        border-radius: 3px; }
      .section .sec_body .caption {
        line-height: 1.5; }
      .section .sec_body .image_sub {
        padding-left: 30px; }
        .section .sec_body .image_sub ul li .image {
          width: 46%; }
        .section .sec_body .image_sub ul li .caption {
          width: 48%; }
    .section .worksbtn {
      margin-top: 50px; }
      .section .worksbtn a {
        height: 52px; }
        .section .worksbtn a .en {
          padding: 0 20px; }
          .section .worksbtn a .en i svg {
            max-width: 94px;
            max-height: 18px; }
        .section .worksbtn a .ja {
          padding: 0 15px 0 20px; }
          .section .worksbtn a .ja::after {
            margin-left: 40px;
            width: 24px;
            line-height: 24px; }

  #process {
    margin: 50px 0 60px; }
    #process .process {
      margin: 0 -15px; }
      #process .process li {
        padding: 0 15px; }
        #process .process li + li .item_inner .image::before {
          left: -40px;
          width: 36px; }
        #process .process li .item_inner .image {
          padding: 5px;
          -webkit-border-radius: 3px;
          border-radius: 3px; }
          #process .process li .item_inner .image img {
            -webkit-border-radius: 2px;
            border-radius: 2px; }
        #process .process li .item_inner .text .en {
          font-size: clamp(16px, 1.8vw, 26px);
          line-height: 1;
          color: #B09F94; }
        #process .process li .item_inner .text > dl dt {
          margin-bottom: 7px; }
          #process .process li .item_inner .text > dl dt .num {
            margin-right: 7px; }

  #produce .text {
    padding: 5vw 38% 5vw 0; }
    #produce .text::before {
      left: -6vw; }
    #produce .text br {
      display: none; }
  #produce .img {
    bottom: -25px; } }
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-3 ( 644px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 644px) {
  .introduction .wrapper {
    display: block; }
  .introduction .image1 {
    width: auto;
    margin-left: -5vw; }
  .introduction .text {
    width: 100%;
    padding: 30px 0 0; }
    .introduction .text .catch {
      text-align: center; }
    .introduction .text .title {
      text-align: center; }
  .introduction .image2 {
    margin-top: 15px;
    max-width: 43%; }
    .introduction .image2 figure {
      border-radius: 2px; }

  .block_title {
    margin-bottom: 25px; }

  .section {
    border: none;
    padding-block: 0;
    margin-bottom: 60px; }
    .block_title + .section {
      border: none;
      margin-bottom: 60px; }
    .section .sec_intro {
      display: block; }
      .section .sec_intro .intro_ph {
        max-width: none;
        margin: 0 -5vw; }
        .section .sec_intro .intro_ph figure {
          height: auto;
          border-radius: 2px; }
      .section .sec_intro .intro_text {
        padding: 15px 0 0; }
        .section .sec_intro .intro_text .num {
          text-align: center; }
          .section .sec_intro .intro_text .num > p::before {
            inset: .5em .3em .6em .2em; }
        .section .sec_intro .intro_text .logotype {
          margin-bottom: 25px;
          display: block;
          text-align: center; }
          .section .sec_intro .intro_text .logotype i svg {
            max-height: 26px;
            max-width: 140px; }
          .section .sec_intro .intro_text .logotype small {
            margin: 3px 0 0; }
        .section .sec_intro .intro_text .title {
          text-align: center; }
    .section .sec_body {
      margin-top: 25px;
      display: block; }
      .section .sec_body .image img {
        -webkit-border-radius: 2px;
        border-radius: 2px; }
      .section .sec_body .image_main {
        max-width: 100%; }
      .section .sec_body .image_sub {
        padding: 0; }
        .section .sec_body .image_sub ul {
          height: auto; }
          .section .sec_body .image_sub ul li {
            margin-top: 25px; }
            .section .sec_body .image_sub ul li:last-child {
              margin-top: 25px; }
            .section .sec_body .image_sub ul li .image {
              width: 50%; }
            .section .sec_body .image_sub ul li .caption {
              width: 45%; }
    .section .worksbtn {
      margin-top: 35px; }
      .section .worksbtn a {
        height: 40px; }
        .section .worksbtn a .en {
          padding: 0 10px; }
          .section .worksbtn a .en i svg {
            max-width: 80px;
            max-height: 16px; }
        .section .worksbtn a .ja {
          padding: 0 15px; }
          .section .worksbtn a .ja::after {
            margin-left: 20px;
            width: 16px;
            line-height: 16px; }

  #process {
    margin: 0 0 40px; }
    #process .process {
      display: block;
      margin: 0; }
      #process .process li {
        width: 100%;
        padding: 0; }
        #process .process li + li {
          padding-top: 50px; }
          #process .process li + li .item_inner .image::before {
            left: 50%;
            top: -45px;
            -webkit-transform: translate(-50%, 0) rotate(0);
            transform: translate(-50%, 0) rotate(0); }
        #process .process li .item_inner .image {
          padding: 3px; }
        #process .process li .item_inner .text .en {
          text-align: center; }
        #process .process li .item_inner .text > dl dt {
          text-align: center;
          justify-content: center; }

  #produce {
    margin-bottom: 50px; }
    #produce .wrapper {
      position: static; }
    #produce .text {
      padding: 30px 13vw 35px 0; }
      #produce .text::before {
        right: 5vw;
        left: -5vw;
        -webkit-border-top-right-radius: 5px;
        border-top-right-radius: 5px; }
    #produce .img {
      position: static;
      max-width: 54%;
      margin: -25px 0 0 auto; }
      #produce .img img {
        -webkit-border-radius: 2px;
        border-radius: 2px; } }