@charset "UTF-8";

#page_header{background-image: url("../img/page_header_bg_pc.svg");background-position: top center;background-size: contain;padding: 3em 0 0em;}
.right_text{position: absolute;right:30px;top:110px;width:150px;z-index: 5;}
.bg_green{position: relative; background-color: #ebf5f0;}
.header_img{margin-top: 3em;height: 280px;object-fit: cover;object-position: top;width: 100vw; /* 親を無視して画面幅いっぱいに */margin-right: calc(50% - 50vw); /* 右側だけはみ出す */}

.page_en_ttl{font-size: 3.4em;margin-bottom: 0.6em;line-height: 1.4em}


.section_01{background-image: url("../img/sec01_img_01.webp");background-position: center;background-size: contain;background-repeat: no-repeat;margin: 5em 0;}
.w40per_center{width: 40%;margin: 0 auto;}
/*　コアサービスのCSS */
.services {
      padding: 2em 20px;
    }

    .services__inner {
      max-width: 1000px;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      gap: 0;
    }

    .service-circle {
      width: 300px;
      height: 300px;
      border: 2px solid #aaa;
      border-radius: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
    }

    .service-circle + .service-circle {
      margin-left: -20px;
    }

    .service-circle__en {
      margin: 0;
      font-size: 1.4em;
      line-height: 1.14;
      font-weight: 800;
		color: #000000;
    }

    .service-circle__ja {
      margin-top: 10px;
      font-size: 1.4em;
      line-height: 1.3;
      font-weight: 700;
      color: #008d8b;
    }

    .service-circle__arrow {
      margin-top: 8px;
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-top: 17px solid #008d8b;
    }

    @media (max-width: 640px) {
      .services {
        padding: 10px 0px;
      }
.services__inner {
      max-width: 100%;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      gap: 0;
    }

    .service-circle {
      width: 150px;
      height: 150px;
      border: 1px solid #aaa;
      border-radius: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
    }
      

      .service-circle + .service-circle {
        margin-left: -10px;
      }

      .service-circle__en {
        font-size: 0.8em;
      }

      .service-circle__ja {
        margin-top: 10px;
        font-size: 0.7em;
      }

      .service-circle__arrow {
        margin-top: 5px;
        border-left-width: 10px;
        border-right-width: 10px;
        border-top-width: 12px;
      }
    }

/*　セクションサービスのCSS */
.sec_service {
      position: relative;
      overflow: hidden;
      padding: 70px 0px 80px;
    }

    .sec_service__side {
      position: absolute;
      top: 10px;
      left: 0;
      writing-mode: vertical-rl;
      text-orientation: mixed;
      font-size: 3.64em;
		font-family: Arial, Helvetica, "sans-serif";
      line-height: 1;
      font-weight: bold;
      letter-spacing: 0.06em;
      color: #bae1df;
    }

    .sec_service__inner {
      max-width: 1000px;
      margin: 0 auto;
      padding-left: 70px;
    }

    .sec_service__block {
      display: grid;
      grid-template-columns: 1.15fr 0.85fr;
      align-items: start;
      gap: 64px;
    }

    .sec_service__block + .sec_service__block {
      margin-top: 80px;
      grid-template-columns: 0.85fr 1.15fr;
    }

    .sec_service__block + .sec_service__block .sec_service__text {
      order: 2;
    }

    .sec_service__block + .sec_service__block .sec_service__image {
      order: 1;
    }

    .sec_service__label {
      margin: 0 0 10px;
      font-size: 2.2em;
      font-weight: 800;
    }

    .sec_service__title {
      margin: 22px 0 10px;
      font-size: 1.6em;
      line-height: 1.45;
      font-weight: 800;
    }

    .sec_service__body {
      font-size: 1.04em;
      line-height: 1.4;
      color: #333;
    }

    .sec_service__body h3 {
      margin: 20px 0 6px;
      font-size: 1.14em;
      color: #111;
    }
.sec_service__body h3.mt_0{margin-top: 0;}

    .sec_service__body p {
      margin: 0;
    }

    .sec_service__image img {
		width: 360px;
      aspect-ratio: 360 / 430;
      object-fit: cover;
    }

    .feature {
      position: relative;
      max-width: 960px;
      margin: 200px auto 0;
      padding: 62px 64px 72px;
      background: #fff;
      border-radius: 15px;
		box-sizing: border-box;
		filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.32));
    }

    .feature__en {
      position: absolute;
      top: -36px;
      left: 50%;
      transform: translateX(-50%);
      margin: 0;
      font-size: 3.4em;
      line-height: 1;
      font-weight: 800;
      color: #111;
      white-space: nowrap;
    }

    .feature__label {
      position: absolute;
      top: -60px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 1em;
      font-weight: normal;
      color: #008d8b;
    }

    .feature__lead {
      margin: 0 0 48px;
      font-size: 1.6em;
      line-height: 1.5;
      font-weight: 800;
      text-align: center;
    }

    .feature__grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 40px;
    }

    .feature__circle {
      width: 180px;
      height: 180px;
      margin: 0 auto 24px;
      border: 2px solid #aaa;
      border-radius: 50%;
      display: grid;
      place-items: center;
      font-size: 1.14em;
		line-height: 1.2em;
      font-weight: 800;
      text-align: center;
      background: #fff;
    }

    .feature__item:not(:last-child) .feature__circle {
      position: relative;
    }

    .feature__item:not(:last-child) .feature__circle::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 100%;
      width: 110px;
      border-top: 3px dotted #aaa;
      transform: translateY(-50%);
    }

    .feature__text {
      margin: 0;
      font-size: 1em;
      line-height: 1.6;
      color: #333;
    }

    @media (max-width: 640px) {
      .sec_service {
        padding: 44px 20px 44px 20px;
		  box-sizing: border-box;
      }

      .sec_service__side {
        font-size: 2em;
      }

      .sec_service__inner {
		  position: relative;
		  box-sizing: border-box;
        padding-left: 0;
		  z-index: 1;
      }

      .sec_service__block,
      .sec_service__block + .sec_service__block {
        grid-template-columns: 1fr;
        gap: 00px;
      }

      .sec_service__block + .sec_service__block {
        margin-top: 30px;
      }

      .sec_service__block .sec_service__image {
        order: 1;
      }
	.sec_service__block .sec_service__text{
        order: 2;
      }

      .sec_service__label {
        font-size: 1.4em;
      }

      .sec_service__title {
        font-size: 1.2em;
      }

      .sec_service__body {
        font-size: 0.84em;
      }

      .sec_service__body h3 {
        font-size: 1.2em;
      }
.sec_service__body h3.mt_0{margin-top: 20px;}
      .sec_service__image img {
		  width: 100%;
        aspect-ratio: 4 / 3;
      }
      /* --- feature SPレイアウト変更 --- */
      .feature {
        margin-top: 60px;
        padding: 40px 20px 32px;
        border-radius: 10px;
      }

      .feature__label {
        position: static;
        transform: none;
        margin-bottom: 6px;
        text-align: left;
      }

      .feature__en {
        position: static;
        transform: none;
        font-size: 1.8em;
        margin-bottom: 5px;
      }

      .feature__lead {
        text-align: left;
        font-size: 0.84em;
        margin-bottom: 20px;
      }

      .feature__grid {
        display: flex;
        flex-direction: column;
        gap: 26px;
      }

      .feature__item {
        display: grid;
        grid-template-columns: 100px 1fr;
        gap: 10px;
        align-items: center;
      }

      .feature__circle {
        width: 100px;
        height: 100px;
        margin: 0;
        font-size: 0.84em;
      }

      .feature__item:not(:last-child) .feature__circle::after {
        display: block;
        top: 100%;
        left: 50%;
        width: 0;
        height: 30px;
        border-top: none;
        border-left: 2px dotted #aaa;
        transform: translateX(-50%);
      }

      .feature__text {
        font-size: 0.7em;
        line-height: 1.4;
      }
    }


.section_05{background-image: url("../img/sec05_bg_01_pc.svg");background-position: top;background-size: contain;background-repeat: no-repeat;margin: 0;}
    .scheme {
      padding: 40px 0px 70px;
    }

    .scheme__inner {
      width: 1000px;
      margin: 0 auto;
    }

    .scheme__main {
      width: 480px;
      height: 480px;
      margin: 0 auto -120px;
      border: 28px solid rgba(123, 195, 189, 0.75);
      border-radius: 50%;
      background: #e9fbfb;
      display: grid;
      place-items: center;
      text-align: center;
      color: #008d86;
      position: relative;
      z-index: 1;
    }

    .scheme__main-title {
      margin: 0;
      font-size: 3.0em;
      line-height: 1.1;
      font-weight: 800;
    }

    .scheme__main-sub {
      margin-top: 18px;
      font-size: 1.6em;
      line-height: 1.4;
    }

    .scheme__grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
      position: relative;
      z-index: 2;
    }

    .scheme__item {
      text-align: center;
    }

    .scheme__circle {
      width: 220px;
      height: 220px;
      margin: 0 auto;
      border: 2px solid #008d86;
      border-radius: 50%;
      background: rgba(233, 251, 251, 0.9);
      display: grid;
      place-items: center;
      color: #008d86;
      font-weight: 800;
      line-height: 1.35;
    }

    .scheme__num {
      display: block;
      font-size: 1.8em;
      line-height: 1;
    }

    .scheme__label {
      display: block;
      margin-top: 0px;
      font-size: 1.2em;
    }

    .scheme__line {
      width: 0;
      height: 58px;
      margin: -4px auto 12px;
      border-left: 4px dotted #9fd5d0;
    }

    .scheme__text {
      margin: 0;
		padding: 0 1em;
      font-size: 1.0em;
      line-height: 1.4;
      font-weight: normal;
      text-align: justify;
    }

    @media (max-width: 640px) {
      .scheme {
        padding: 24px 0px 48px;
		  
      }
.scheme__inner {
      width: 100%;
	box-sizing: border-box;
      margin: 0 auto;
    }
      .scheme__main {
        width: 80%;
        height: auto;
        aspect-ratio: 1 / 1;
        margin-bottom: -42px;
        border-width: 15px;
      }

      .scheme__main-title {
        font-size: 1.8em;
      }

      .scheme__main-sub {
		  margin-top: 8px;
        font-size: 1.2em;
      }

      .scheme__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px 20px;
      }

      .scheme__circle {
        width: 100%;
        aspect-ratio: 1 / 1;
        height: auto;
        border-width: 2px;
      }

      .scheme__num {
        font-size: 1.4em;
      }

      .scheme__label {
        font-size: 1em;
      }

      .scheme__line {
        height: 30px;
        border-left-width: 2px;
      }

      .scheme__text {
        font-size: 0.84em;
        line-height: 1.4;
		  padding: 0 0.6em;
      }
    }
/*
===================================================
 tb タブレット解像度
===================================================
*/
@media screen and (max-width:1000px) {





	}
/*
===================================================
 sp スマホ解像度
===================================================
*/
@media screen and (max-width:640px) {
#page_header{background-image: url("../img/page_header_bg_sp.svg");}
.right_text{position: absolute;right:0px;top:100px;width:70px;z-index: 0;}
p{font-size: 0.84em;}
.page_en_ttl{font-size: 2.4em;margin-bottom: 0.3em;line-height: 1.14em}
.section_01{background-image: none;background-position: center;background-size: contain;background-repeat: no-repeat;margin: 0em 0;}
.w40per_center{width: 100%;margin: 0 auto;}
.section_05{background-image: url("../img/sec05_bg_01_sp.svg");background-position: top;background-size: contain;background-repeat: no-repeat;margin: 0;}
}