@charset "UTF-8";

/**
 * Project: home.css (Top Page)
 * トップページ（HOME）固有のレイアウトおよび要素のスタイルを管理する。
 * * 運用ルール:
 * - 接頭辞「p-」を使用すること。
 * - コンポーネント（c-）を組み合わせた具体的なページ構成を記述する。
 * - 他のページに影響を与えない「ページ固有の微調整」はこのレイヤーで行う。
 * - 複数ページで再利用されるパーツが発生した場合は、Componentレイヤーへ移管を検討すること。
 */

/* ==========================================================================
   Hero (.p-home-hero)
   役割: トップページキービジュアル   ========================================================================== */
   .p-home-hero{
      overflow: hidden;
      margin: 0 0 10px;
      position: relative;
   }
   .p-home-hero:before{      
      background: var(--color-gra-blue);
      content: "";
      display: inline-block;
      height: 100%;
      left: 50%;
      position: absolute;
      top: 0;
      transform: translateX(-50%);
      width: 100%;   
   }

   .p-home-hero__intro{
      margin: 0 auto 1rem;
      padding: 6rem 0 0;
      position: relative;
      max-width: 400px;
   }
   .p-home-hero__intro:before{
      display: none;
   }

   .p-home-hero__label{
      align-items: center;
      background-color: var(--color-orange-500);
      border-radius: var(--border-radius-circle);
      display: flex;
      height: 85px;
      justify-content: center;
      left: 5px;
      position: absolute;
      top: 5.2rem;
      width: 85px;
      z-index: 10;
   }

   .p-home-hero__label-text{
      color: var(--color-white-900);
      font-size: 0.875rem;
      font-weight: var(--font-weight-bold);
      line-height: 1.25;
      text-align: center;
   }

   .p-home-hero__intro-container{
      position: relative;
   }

   .p-home-hero__title{
      font-size: 1.25rem;
      font-weight: var(--font-weight-black);
      margin: 0;
      padding: 0 0.5rem 1rem calc(85px - 5px);
      position: relative;
   }
   .p-home-hero__title:before{
      border: 3px solid var(--color-white-900);
      border-radius: var(--border-radius-xs);
      content: "";
      display: inline-block;
      height: calc(100% + 2em);
      left: -0.3em;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: calc(100% + 0.5em);
   }

   .p-home-hero__title-emphasis{
      color: var(--color-primary);
      font-size: 1.4em;         
   }

   .p-home-hero__point{
      align-items: center;
      display: flex;
      justify-content: center;
      list-style: none;
      margin: 0.5rem 0 0;
      padding: 0;
      position: relative;
   }

   .p-home-hero__point-item{
      align-items: center;
      background-color: var(--color-secondary);
      border-radius: var(--border-radius-xs);
      color: var(--color-white-900);
      display: flex;
      font-size: 0.75rem;
      font-weight: var(--font-weight-bold);
      justify-content: center;
      line-height: var(--line-height-xs);
      padding: 0.5em;
      text-align: center;
      width: 90%;
   }

   .p-home-hero__illust{
      margin: 1rem 0 0;
      position: relative;
   }

   .p-home-hero__figure{
      margin: 0 auto;
      max-width: 240px;
   }

   
      @media screen and (min-width: 768px) {
         .p-home-hero{
            margin: 0;
            padding: 0 0 2rem;
            position: relative;
         }
         .p-home-hero:before{
            display: none;
         }

         .p-home-hero__intro{
            margin: 0 0 1rem;
            padding: 9rem 0 0;
            max-width: inherit;
         }
         .p-home-hero__intro:before{            
            background: var(--color-gra-blue);
            content: "";
            display: inline-block;
            height: calc(100% + 1rem);
            left: 50%;
            position: absolute;
            top: 0;
            transform: translateX(-50%);
            width: 100%;   
         }

         .p-home-hero__label{
            top: 10rem;
         }

         .p-home-hero__label-text{}

         .p-home-hero__intro-container{}

         .p-home-hero__title{
            font-size: 2.5rem;
         }
         .p-home-hero__title:before{
            /* left: 50%;
            transform: translate(-50%,-50%);
            max-width: 650px; */
         }

         .p-home-hero__title-emphasis{}

         .p-home-hero__point{
            margin: 1rem 0 0 clamp(0rem, -21.153rem + 44.07vw, 13rem);/* 768px:0~ 1240px:13rem*/
            max-width: 500px;
         }

         .p-home-hero__point-item{
            font-size: 1.25rem;
            width: 100%;
         }

         .p-home-hero__illust{
            bottom: 1.5rem;
            margin: 0;
            position: absolute;
            right: 1rem;
            width: 180px;
         }

         .p-home-hero__figure{
            margin: 0;
            max-width: inherit;
         }

      } /* min-width: 768px */

      @media screen and (min-width: 1025px) {
         .p-home-hero{}

         .p-home-hero__intro{
            /* padding: 3rem 0 0; */
         }
         .p-home-hero__intro:before{}

         .p-home-hero__label{}

         .p-home-hero__label-text{}

         .p-home-hero__intro-container{}

         .p-home-hero__title{}
         .p-home-hero__title:before{}

         .p-home-hero__title-emphasis{}

         .p-home-hero__point{}

         .p-home-hero__point-item{}

         .p-home-hero__illust{
            bottom: 0;
         }

         .p-home-hero__figure{}

      } /* min-width: 1025px */

      @media screen and (min-width: 1240px) {
         .p-home-hero{
            margin: 0 0 2rem;
            padding: 0;
         }

         .p-home-hero__intro{
            height: 482px;
            margin: 0;
            padding: 10rem 0 2rem;
         }
         .p-home-hero__intro:before{
            height: 100%;
         }
   
         .p-home-hero__label{
            height: clamp(10.625rem, 6.636rem + 5.15vw, 12.813rem);/* 170px~205px */
            left: clamp(0.625rem, -12.824rem + 17.35vw, 8rem);/* 0.625rem~8rem */
            top: 10rem;
            width: clamp(10.625rem, 6.636rem + 5.15vw, 12.813rem);/* 170px~205px */
         }

         .p-home-hero__label-text{
            font-size: clamp(1.75rem, 0.838rem + 1.18vw, 2.25rem);/* 1.75rem~2.25rem */
         }


         .p-home-hero__intro-container{}

         .p-home-hero__title{
            font-size: clamp(3rem, 1.063rem + 2.5vw, 4.063rem);/* 3rem~4.6025rem */
            padding: 0 0 0 clamp(0rem, 39.53rem - 32.94vw, 14rem);/* 14rem~0 */         
         }
         .p-home-hero__title:before{
            border: 7px solid var(--color-white-900);
            border-radius: var(--border-radius-md);
            height: calc(100% + 1.3em);
            left: -2em;
            top: -1.5rem;
            transform: inherit;
            width: calc(100% + 3em);
            max-width: 1050px;
         }

         .p-home-hero__title-emphasis{}

         .p-home-hero__point{
            margin: 2rem 0 0;
            max-width: 750px;
         }

         .p-home-hero__point-item{
            font-size: 1.875rem;
         }

         .p-home-hero__illust{
            bottom: 0;
            right: clamp(0.625rem, -25.588rem + 33.82vw, 15rem);/* 0.625rem~15rem */
            width: clamp(23.125rem, 11.728rem + 14.71vw, 29.375rem);/* 370px~470px */
         }

         .p-home-hero__figure{}

      } /* min-width: 1240px */


/* ==========================================================================
   Intro (.p-home-intro)
   役割: トップページ導入  ========================================================================== */
   .p-home-intro{
      margin: 0 0 1.875rem;
   }

   .p-home-intro__container{
      padding: 0;
   }

   .p-home-intro__button{
      margin: 0 0 1rem;
      padding: 0 10px;
      text-align: center;
   }

   .p-home-intro__button-link{
      align-items: center;
      border: 3px solid var(--color-primary);
      border-radius: var(--border-radius-xs);
      color: var(--color-primary);
      display: inline-flex;
      justify-content: center;      
      padding: 0.8em 1em calc(0.8em + 0.2em);
      text-decoration: none;
      width: 100%;
   }

   .p-home-intro__button-text{
      font-size: 1.1875rem;
      font-weight: var(--font-weight-bold);
      line-height: 1.3;
      margin: 0 0 0 -1em;
      position: relative;
   }
   .p-home-intro__button-text:after{
    background-color: var(--color-primary);
    clip-path: polygon(0 0, 0 100%, 100% 50%);
    content: "";
    display: inline-block;
    height: 20px;
    position: absolute;
    right: calc((15px + 0.5rem) * -1);
    top: 50%;
    transform: translateY(-50%);    
    width: 15px;
   }

   .p-home-intro__description{
      font-size: 0.6875rem;
      font-weight: var(--font-weight-medium);
      line-height: var(--line-height-sm);
      margin: 0;
      padding: 0 20px;
   }

   .p-home-intro__description-attention{
      color: var(--color-attention);
      font-weight: var(--font-weight-bold);
   }

   .p-home-intro__list{
      display: flex;
      flex-wrap: wrap;
      gap: 0.625rem;
      justify-content: center;
      list-style: none;
      margin: 1rem 0 0;
      padding: 0;
   }

   .p-home-intro__item{
      align-items: center;
      border-radius: var(--border-radius-sm);
      color: var(--color-white-900);
      display: flex;
      font-size: 0.9375rem;
      font-weight: var(--font-weight-bold);
      height: 36px;
      justify-content: center;
      width: 100%;
      max-width: 192px;
   }
   .p-home-intro__item--online{
      background-color: var(--color-indigo-400);
   }
   .p-home-intro__item--secret{
      background-color: var(--color-terracotta-500);
   }

      @media screen and (min-width: 768px) {
         .p-home-intro{}

         .p-home-intro__container{
            padding: 0 20px;
         }

         .p-home-intro__button{
            padding: 0;
         }

         .p-home-intro__button-link{
            border-radius: var(--border-radius-sm);
         }

         .p-home-intro__button-text{}

         .p-home-intro__description{
            padding: 0;
         }

         .p-home-intro__list{
            gap: 0 1rem;
         }

         .p-home-intro__item{
            border-radius: calc(55px / 2);
            height: 55px;
            width: calc((100% - calc(1rem * 1)) / 2);
            max-width: 300px;
         }
         .p-home-intro__item--online{}
         .p-home-intro__item--secret{}

      } /* min-width: 768px */

      @media screen and (min-width: 1025px) {
         .p-home-intro{
            margin: 0 0 2.875rem;
         }

         .p-home-intro__container{}

         .p-home-intro__button{}

         .p-home-intro__button-link{}
         @media (hover: hover) {
            .p-home-intro__button-link:hover{
               background-color: var(--color-primary);
               color: var(--color-white-900);
            }
         }

         .p-home-intro__button-text{}
         .p-home-intro__button-text:after{}
         @media (hover: hover) {
            .p-home-intro__button-link:hover .p-home-intro__button-text:after{
               background-color: var(--color-white-900);
            }
         }

         .p-home-intro__description{
            font-size: 1.375rem;
         }

         .p-home-intro__list{}

         .p-home-intro__item{}
         .p-home-intro__item--online{}
         .p-home-intro__item--secret{}

      } /* min-width: 1025px */

      @media screen and (min-width: 1240px) {
         .p-home-intro{}

         .p-home-intro__container{
            padding: 0;
         }

         .p-home-intro__button{}

         .p-home-intro__button-link{
            border: 6px solid var(--color-primary);
            padding: 1.5em 1em calc(1.5em + 0.2em);
         }

         .p-home-intro__button-text{
            font-size: 2.1875rem;
            line-height: 1.2;
         }
         .p-home-intro__button-text:after{
            height: 44px;
            right: calc((35px + 1.5rem) * -1);
            width: 35px;
         }

         .p-home-intro__description{}

         .p-home-intro__list{
            gap: 0 1.8125rem
         }

         .p-home-intro__item{
            border-radius: calc(67px / 2);
            font-size: 1.875rem;
            height: 67px;
            width: calc((100% - calc(1.8125rem * 1)) / 2);
            max-width: 384px;
         }
         .p-home-intro__item--online{}
         .p-home-intro__item--secret{}

      } /* min-width: 1240px */

/* ==========================================================================
      App (.p-home-app) 表示・切り替え制御の最適化
      ========================================================================== */
   
   /* 初期状態：中身はすべて非表示 */
   .p-home-app__item {
      display: none;
   }
   
   /* 親の data-step の値に応じて、表示するステップとナビのアクティブ色を切り替える */
   [data-step="1"] .p-home-app__item--step1,
   [data-step="2"] .p-home-app__item--step2,
   [data-step="3"] .p-home-app__item--step3 {
      display: block;
   }

   [data-step="1"] .p-home-app__flow-item--step1,
   [data-step="2"] .p-home-app__flow-item--step2,
   [data-step="3"] .p-home-app__flow-item--step3 {
      background-color: var(--color-warm-beige-100);
      color: var(--color-secondary);
   }

   [data-step="1"] .p-home-app__flow-item--step1:after,
   [data-step="2"] .p-home-app__flow-item--step2:after {
      background-color: var(--color-warm-beige-100);
   }

   /* ==========================================================================
      以下、既存の装飾スタイル（変更なし・そのまま維持）
      ========================================================================== */
   .p-home-app{
      background-color: var(--color-white-900);
      border: 3px solid var(--color-secondary);
      margin: 0 auto;
      padding: 0 0 1.875rem;
   }

   .p-home-app__lead{
      background-color: var(--color-secondary);
      color: var(--color-white-900);
      font-size: 0.875rem;
      font-weight: var(--font-weight-bold);
      line-height: var(--line-height-xs);
      margin: 0;
      padding: 0.3em 0.5em calc(0.3em + 0.2em);
      text-align: center;
   }

   .p-home-app__body{
      margin: 0 0 1.25rem;
      padding: 1rem 1.25rem 0;
   }

   .p-home-app__flow{
      display: flex;
      gap: 0 10px;
      justify-content: center;
      list-style: none;
      margin: 0 0 0.625rem;
      padding: 0;
   }

   .p-home-app__flow-item{
      align-items: center;
      background-color: var(--color-gray-290);
      color: var(--color-gray-600);
      display: flex;
      font-size: 0.875rem;
      font-weight: var(--font-weight-bold);
      height: 30px;
      justify-content: center;
      line-height: var(--line-height-one-line);
      margin: 0 1.25rem 0 0;
      padding: 0 0 0.1em;      
      position: relative;
      width: 80px;
   }
   .p-home-app__flow-item:after{
      background-color: var(--color-gray-290);
      clip-path: polygon(0 0, 0 100%, 100% 50%);
      content: "";
      display: inline-block;
      height: 100%;
      position: absolute;
      right: calc((1.25rem - 1px) * -1);
      top: 50%;
      transform: translateY(-50%);
      width: 1.25rem;
   }

   .p-home-app__flow-item--step3{
      margin: 0;
      width: 110px;
   }
   .p-home-app__flow-item--step3:after{
      display: none;
   }

   .p-home-app__content{
      background-color: var(--color-warm-beige-100);
      margin: 0 1.5rem 0 0;
      padding: 2.5rem 1.25rem;
      position: relative;
      text-align: center;  
   }
   .p-home-app__item--step3 .p-home-app__content{
      margin: 0;
   }
   .p-home-app__content:after{
      background-color: var(--color-warm-beige-100);
      clip-path: polygon(0 0, 0 100%, 100% 50%);
      content: "";
      display: inline-block;
      height: 100%;
      position: absolute;
      right: calc((1.5rem - 1px) * -1);
      top: 50%;
      transform: translateY(-50%);
      width: 1.5rem;
   }
   .p-home-app__item--step3 .p-home-app__content:after{
      display: none;
   }

   .p-home-app__content-title{
      color: var(--color-secondary);
      display: block;
      font-size: 1rem;
      font-weight: var(--font-weight-bold);
      margin: 0 0 0.5em;
   }

   .p-home-app__content-link{
      color: var(--color-primary);
      display: inline-block;
      font-size: 0.875rem;
      font-weight: var(--font-weight-medium);
      line-height: var(--line-height-xs);
   }

   .p-home-app__content-note{
      font-size: 0.875rem;
      font-weight: var(--font-weight-medium);
      line-height: var(--line-height-xs);
   }

   .p-home-app__button{
      display: flex;
      gap: 0 1rem;
      justify-content: center;
      margin: 1.25rem 0 0;
   }

   .p-home-app__button-link{
      align-items: center;
      background-color: var(--color-gray-290);
      border: none;
      border-radius: calc(50px / 2);
      color: var(--color-gray-600);
      display: flex;
      font-size: 0.875rem;
      font-weight: var(--font-weight-bold);
      height: 50px;
      justify-content: center;
      line-height: var(--line-height-one-line);
      margin: 0 auto;
      padding: 0 0 0.1em;
      width: 100%;
      max-width: 193px;
   }
   .p-home-app__button-link.is-active{
      background-color: var(--color-white-900);
      color: var(--color-black-900);
      cursor: pointer;
   }

   .p-home-app__content-consent{
      background-color: var(--color-gray-290);
      pointer-events: none;
      margin: 1.25rem 0 0;
      padding: 0.5em 0;
   }
   .p-home-app__content-consent.is-active{
      background-color: var(--color-white-900);
      cursor: pointer;
      pointer-events: visible;
   }

   .p-home-app__content-consent .c-input-check{
      background-color: var(--color-gray-290);
   }
   .p-home-app__content-consent.is-active .c-input-check{
      background-color: var(--color-white-900);
   }

   .p-home-app__author{
      padding: 0 1.25rem;
   }

   .p-home-app__author-lead{
      font-size: 0.875rem;
      font-weight: var(--font-weight-medium);
      line-height: var(--line-height-xs);
      margin: 0 0 0.5rem;
   }

   .p-home-app__author-highlight{
      display: block;
      font-weight: var(--font-weight-bold);
   }

   .p-home-app__author-list{
      border-top: 1px solid var(--color-black-900);
      list-style: none;
      margin: 0;
      padding: 0.5rem 0 0;
   }

   .p-home-app__author-item{
      font-size: 0.875rem;
      font-weight: var(--font-weight-medium);
      line-height: var(--line-height-xs);
   }

   /* ==========================================================================
      メディアクエリ：1240px〜 の数値最適化（既存部）
      ========================================================================== */
   @media screen and (min-width: 1240px) {
      .p-home-app{
         border: 6px solid var(--color-secondary);
         max-width: 1265px;
      }
      .p-home-app__lead{
         font-size: 1.75rem;
         padding: 0.3em 0 calc(0.3em + 0.2em);
      }
      .p-home-app__body{
         padding: 1.25rem 1.875rem;
      }
      .p-home-app__flow{
         margin: 0 0 1.375rem;
      }
      .p-home-app__flow-item{
         font-size: 1.75rem;
         height: 67px;
         margin: 0 3.125rem 0 0;
         width: 150px;
      }
      .p-home-app__flow-item:after{
         right: calc((3.125rem - 1px) * -1);
         width: 3.125rem;
      }
      .p-home-app__flow-item--step3{
         margin: 0;
         width: 204px;
      }
      .p-home-app__content{
         margin: 0 5rem 0 0;
         padding: 5rem 2.5rem;
      }
      .p-home-app__content:after{
         right: calc((5rem - 1px) * -1);
         width: 5rem;
      }
      .p-home-app__content-title{
         font-size: 2rem;
      }
      .p-home-app__content-link{
         font-size: 1.5rem;
      }
      .p-home-app__content-note{
         font-size: 1.5rem;
      }
      .p-home-app__button-link{
         border-radius: calc(60px / 2);
         font-size: 1.5rem;
         height: 60px;
      }
      @media (hover: hover) {
         .p-home-app__button-link.is-active:hover{
            background-color: var(--color-secondary);
            color: var(--color-white-900);
         }
      }
      
      @media (hover: hover) {
         .p-home-app__content-consent.is-active:hover{}
      }
      .p-home-app__author-lead{
         font-size: 1.5rem;
      }
      .p-home-app__author-item{
         font-size: 1.5rem;
      }
   }

/* ==========================================================================
   About (.p-home-about)
   役割: トップページアバウト   ========================================================================== */
   .p-home-about{}

   .p-home-about__body{
      background-color: var(--color-gray-100);
      margin: calc((50px / 2) * -1) 0 0;
      padding: 2rem 0;
   }

   .p-home-about__title{
      border-bottom: 1px solid var(--color-gray-500);
      font-size: 1.45rem;
      font-weight: var(--font-weight-black);
      line-height: 1.3;
      margin: 0;
      padding: 0 1.25rem 0.3em;
   }

   .p-home-about__title-emphasis{
      color: var(--color-attention);
   }

   .p-home-about__description{
      font-size: 1rem;
      font-weight: var(--font-weight-bold);
      line-height: var(--line-height-xs);
      margin: 0.5em 0 1em;
      padding: 0 1.25rem;
      text-align: center;
   }

   .p-home-about__case{
      display: flex;
      flex-wrap: wrap;
      gap: 1rem 0;
      list-style: none;
      margin: 0;
      padding: 0;
   }

   .p-home-about__case-item{
      background-color: var(--color-white-900);
      border-radius: var(--border-radius-sm);
      width: 100%;
   }

   .p-home-about__case-lead{
      align-items: center;
      border-bottom: 3px solid var(--color-gray-100);
      display: flex;
      font-size: 1rem;
      justify-content: center;
      line-height: 1.3;
      margin: 0;
      padding: 0.8rem;
      text-align: center;
   }

   .p-home-about__case-list{
      list-style: none;
      margin: 0;  
      padding: 1rem;
   }

   .p-home-about__case-unit{
      font-size: 1rem;
      font-weight: var(--font-weight-bold);
      line-height: var(--line-height-xs);
      margin: 0 0 0.3em;
   }
   .p-home-about__case-unit:last-of-type{
      margin: 0;
   }

   .p-home-about__summary{
      margin: 1.5rem 0 0;
   }

   .p-home-about__summary-lead{
      border: 1px solid var(--color-black-900);
      display: block;
      font-size: 1.125rem;
      font-weight: var(--font-weight-bold);
      line-height: var(--line-height-xs);
      padding: 0.8em 0.5em;
   }

   .p-home-about__summary-note{
      font-size: 1rem;
      font-weight: var(--font-weight-bold);
      line-height: var(--line-height-xs);
      margin: 1em 0 0; 
   }

   .p-home-about__summary-emphasis{
      color: var(--color-attention);
   }

      @media screen and (min-width: 768px) {
         .p-home-about{}

         .p-home-about__body{}

         .p-home-about__title{}

         .p-home-about__title-emphasis{}

         .p-home-about__description{}

         .p-home-about__case{
            gap: 0 1rem;
         }

         .p-home-about__case-item{
            width: calc((100% - calc(1rem * 2)) / 3);
         }

         .p-home-about__case-lead{
            height: 75px;
         }

         .p-home-about__case-list{}

         .p-home-about__case-unit{}

         .p-home-about__summary{}

         .p-home-about__summary-lead{}

         .p-home-about__summary-note{}

         .p-home-about__summary-emphasis{}

      } /* min-width: 768px */

      @media screen and (min-width: 1025px) {
         .p-home-about{}

         .p-home-about__body{
            padding: 4.5rem 0 4rem;
         }

         .p-home-about__title{
            padding: 0 0 0.3em;
         }

         .p-home-about__title-emphasis{}

         .p-home-about__description{
            padding: 0;
         }

         .p-home-about__case{}

         .p-home-about__case-item{}

         .p-home-about__case-lead{
            border-bottom: 6px solid var(--color-gray-100);
         }

         .p-home-about__case-list{}

         .p-home-about__case-unit{}

         .p-home-about__summary{
            margin: 2.5rem 0 0;
         }

         .p-home-about__summary-lead{
            font-size: 1.625rem;
         }

         .p-home-about__summary-note{
            font-size: 1.25rem;
         }

         .p-home-about__summary-emphasis{}

      } /* min-width: 1025px */

      @media screen and (min-width: 1240px) {
         .p-home-about{}

         .p-home-about__body{}

         .p-home-about__title{
            font-size: 3.125rem;
         }

         .p-home-about__title-emphasis{}

         .p-home-about__description{
            font-size: 1.875rem;
         }

         .p-home-about__case{
            gap: 0 3.125rem;
         }

         .p-home-about__case-item{
            width: calc((100% - calc(3.125rem * 2)) / 3);
         }

         .p-home-about__case-lead{
            font-size: 1.5rem;
            height: 80px;
            padding: 0;
         }

         .p-home-about__case-list{
            padding: 1rem 1.5rem;
         }

         .p-home-about__case-unit{
            font-size: 1.5rem;
         }

         .p-home-about__summary{}

         .p-home-about__summary-lead{}

         .p-home-about__summary-note{}

         .p-home-about__summary-emphasis{}

      } /* min-width: 1240px */



/* ==========================================================================
   Catch (.p-home-catch)
   役割: トップページキャッチコピー   ========================================================================== */
   .p-home-catch{
      padding: 1.5rem 0 3rem;
      position: relative;
   }
   .p-home-catch:after{
      background-image: url(/src/images/project/home/catch_bg.png);
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
      bottom: 0;
      content: "";
      display: inline-block;
      height: 100px;
      position: absolute;
      right: 0;      
      width: 250px;
   }

   .p-home-catch__container{
      position: relative;
      z-index: var(--zindex-normal);
   }

   .p-home-catch__lead{
      margin: 0 0 0.5rem;
      width: 100%;
   }

   .p-home-catch__lead-item{
      border-bottom: 1px dashed var(--color-black-900);
      display: block;
      font-size: 1rem;
      font-weight: var(--font-weight-bold);
      line-height: var(--line-height-sm);
   }
   .p-home-catch__lead-item:last-of-type{
      border-bottom: none;
   }

   .p-home-catch__text{
      font-size: 1.25rem;
      font-weight: var(--font-weight-bold);
      line-height: var(--line-height-xs);
      margin: 0;
   }

      @media screen and (min-width: 768px) {
         .p-home-catch{}
         .p-home-catch:after{
            height: 20vw;
            width: 50vw;
         }

         .p-home-catch__container{}

         .p-home-catch__lead{
            margin: 0 0 1rem;
            width: 80%;
         }

         .p-home-catch__lead-item{
            font-size: 1.5rem;
         }

         .p-home-catch__text{
            font-size: 2rem;
            line-height: 1.3;
            width: 80%;
         }

      } /* min-width: 768px */

      @media screen and (min-width: 1025px) {
         .p-home-catch{}
         .p-home-catch:after{}

         .p-home-catch__container{}

         .p-home-catch__lead{}

         .p-home-catch__lead-item{
            font-size: 2.375rem;
         }

         .p-home-catch__text{
            font-size: 3rem;
         }

      } /* min-width: 1025px */

      @media screen and (min-width: 1240px) {
         .p-home-catch{
            padding: 2rem 0 3rem;
         }
         .p-home-catch:after{
            height: 424px;
            width: 1047px;
         }

         .p-home-catch__container{}

         .p-home-catch__lead{
            max-width: 900px;
            width: 100%;
         }

         .p-home-catch__lead-item{}

         .p-home-catch__text{
            max-width: 1100px;
            width: 100%;
         }

      } /* min-width: 1240px */


/* ==========================================================================
   News (.p-home-news)
   役割: トップページお知らせ   ========================================================================== */
   .p-home-news{
      margin: 0 0 2.375rem;
   }

   .p-home-news__title{
      align-items: center;
      background-color: var(--color-gray-100);
      display: flex;
      font-size: 1.25rem;
      font-weight: var(--font-weight-bold);
      height: 60px;
      justify-content: center;
      margin: 0 0 0.8em;
   }

   .p-home-news__body{}

   .p-home-news__container{}

   .p-home-news__list{
      margin: 0;
   }

   .p-home-news__item{
      border-bottom: 1px solid var(--color-black-900);
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem 0;
      margin: 0;
      padding: 1em 0;
   }
   .p-home-news__item:first-of-type{
      padding: 0 0 1em;
   }

   .p-home-news__term{
      font-size: 1rem;
      font-weight: var(--font-weight-bold);
      width: 100%;
   }

   .p-home-news__detail{
      font-size: 1rem;
      font-weight: var(--font-weight-bold);
      margin: 0;
      width: 100%;
   }

      @media screen and (min-width: 768px) {
         .p-home-news{}

         .p-home-news__title{}

         .p-home-news__body{}

         .p-home-news__container{}

         .p-home-news__list{}

         .p-home-news__item{
            gap: 0 4rem;
            padding: 0.75em 0;
         }
         .p-home-news__item:first-of-type{
            padding: 0 0 0.75em;
         }
         .p-home-news__item:last-of-type{}

         .p-home-news__term{
            font-size: 1.125rem;
            width: 9em;
         }

         .p-home-news__detail{
            font-size: 1.125rem;
            width: calc((100% - 4rem) - 9em);
         }

      } /* min-width: 768px */

      @media screen and (min-width: 1025px) {
         .p-home-news{
            margin: 0 0 4.375rem;
         }

         .p-home-news__title{
            font-size: 1.875rem;
            height: 65px;
         }

         .p-home-news__body{}

         .p-home-news__container{}

         .p-home-news__list{}

         .p-home-news__item{}

         .p-home-news__term{}

         .p-home-news__detail{}

      } /* min-width: 1025px */

      @media screen and (min-width: 1240px) {
         .p-home-news{}

         .p-home-news__title{}

         .p-home-news__body{}

         .p-home-news__container{}

         .p-home-news__list{}

         .p-home-news__item{
            gap: 0 10rem;
         }

         .p-home-news__term{
            width: 9em;
         }

         .p-home-news__detail{
            width: calc((100% - 10rem) - 9em);
         }

      } /* min-width: 1240px */

/* ==========================================================================
   Flow (.p-home-flow)
   役割: トップページ支援進行詳細
   ========================================================================== */
   .p-home-flow{
      padding: 2rem 0 3rem;
   }

   .p-home-flow__container{}

   .p-home-flow__title{
      border-bottom: 1px solid var(--color-primary);
      font-size: 1.25rem;
      font-weight: var(--font-weight-bold);
      line-height: 1.3;
      margin: 0 0 1.25em;
      padding: 0 0 0.5em;
   }

   .p-home-flow__body{}

   .p-home-flow__list{
      display: flex;
      flex-wrap: wrap;
      gap: 2rem 0;
      list-style: none;
      margin: 0;
      padding: 0;
   }

   .p-home-flow__item{
      background-color: var(--color-white-900);
      border: 1px solid var(--color-primary);
      border-radius: var(--border-radius-sm);
      padding: 1.25rem 1.5rem;
      position: relative;
      width: 100%;
   }
   .p-home-flow__item:after{
      background-color: var(--color-primary);
      bottom: calc((18px + 0.5rem) * -1);
      clip-path: polygon(0 0, 100% 0%, 50% 100%);
      content: "";
      display: inline-block;
      height: 18px;
      left: 50%;
      position: absolute;
      transform: translateX(-50%);    
      width: 20px;
   }
   .p-home-flow__item:last-of-type:after{
      display: none;
   }

   .p-home-flow__item-lead{
      color: var(--color-primary);
      font-size: 1.125rem;
      font-weight: var(--font-weight-bold);
      line-height: 1.3;
      margin: 0 0 0.5rem;
      text-align: center;
   }

   .p-home-flow__item-illust{
      align-self: center;
      display: flex;
      justify-content: center;
      margin: 0 0 1rem;
   }

   .p-home-flow__item-image{
      display: flex;
      height: 100%;
      margin: 0 auto;
      width: 100%;
   }
   .p-home-flow__item-image--discussion{
      max-width: 120px;
   }
   .p-home-flow__item-image--hand{
      max-width: 120px;
   }
   .p-home-flow__item-image--advice{
      max-width: 120px;
   }

   .p-home-flow__item-description{
      font-size: 1rem;
      font-weight: var(--font-weight-medium);
      line-height: var(--line-height-xs);
      margin: 0;
   }

   .p-home-flow__menu{
      list-style: none;
      margin: 0;
      padding: 0;
   }

   .p-home-flow__menu-unit{
      font-size: 1rem;
      font-weight: var(--font-weight-medium);
      line-height: var(--line-height-xs);
      padding: 0 0 0 1em;
      text-indent: -1em;
   }

   .p-home-flow__item-times{
      border: 2px solid var(--color-primary);
      border-radius: var(--border-radius-xs);
      margin: 1.5rem 0 0;
      padding: 0.5em 0 calc(0.5em + 0.1em);
      text-align: center;
   }

   .p-home-flow__item-timestext{
      color: var(--color-primary);
      display: inline-block;
      font-size: 1.125rem;
      font-weight: var(--font-weight-bold);
   }

      @media screen and (min-width: 768px) {
         .p-home-flow{}

         .p-home-flow__container{}

         .p-home-flow__title{}

         .p-home-flow__body{}

         .p-home-flow__list{
            gap: 0 2rem;
         }

         .p-home-flow__item{
            display: flex;
            flex-wrap: wrap;
            flex-direction: column;
            padding: 1.25rem 1rem;
            width: calc((100% - calc(2rem * 2)) / 3);
         }
         .p-home-flow__item:after{
            bottom: inherit;
            clip-path: polygon(0 0, 0 100%, 100% 50%);
            height: 25px;
            left: inherit;
            right: calc((20px + 0.5rem) * -1);
            top: 50%;
            transform: translateY(-50%);
            width: 20px;
         }

         .p-home-flow__item-lead{
            align-items: center;
            display: flex;
            justify-content: center;
            height: 3em;
            width: 100%;
         }

         .p-home-flow__item-illust{
            height: 100px;
            width: 100%;
         }

         .p-home-flow__item-image{}
         .p-home-flow__item-image--discussion{}
         .p-home-flow__item-image--hand{}
         .p-home-flow__item-image--advice{}

         .p-home-flow__item-description{}

         .p-home-flow__menu{
            margin: 0 0 1rem;
            width: 100%;
         }

         .p-home-flow__menu-unit{}

         .p-home-flow__item-times{
            margin: auto 0 0;
            width: 100%;
         }

         .p-home-flow__item-timestext{}

      } /* min-width: 768px */

      @media screen and (min-width: 1025px) {
         .p-home-flow{
            padding: 1.875rem 0 5rem;
         }

         .p-home-flow__container{}

         .p-home-flow__title{
            font-size: 2.5rem;
         }

         .p-home-flow__body{}

         .p-home-flow__list{}

         .p-home-flow__item{
            min-height: 550px;
            padding: 0.9375rem 1.875rem;
         }
         .p-home-flow__item:after{}

         .p-home-flow__item-lead{
            font-size: 1.75rem;
         }

         .p-home-flow__item-illust{
            margin: 0;
         }

         .p-home-flow__item-image{}
         .p-home-flow__item-image--discussion{}
         .p-home-flow__item-image--hand{}
         .p-home-flow__item-image--advice{}

         .p-home-flow__item-description{
            font-size: 1.375rem;
         }

         .p-home-flow__menu{}

         .p-home-flow__menu-unit{
            font-size: 1.25rem;
         }

         .p-home-flow__item-times{
            border: 3px solid var(--color-primary);
            border-radius: var(--border-radius-sm);
         }

         .p-home-flow__item-timestext{
            font-size: 1.75rem;
         }

      } /* min-width: 1025px */

      @media screen and (min-width: 1240px) {
         .p-home-flow{}

         .p-home-flow__container{}

         .p-home-flow__title{}

         .p-home-flow__body{}

         .p-home-flow__list{
            gap: 0 3.625rem;
         }

         .p-home-flow__item{
            width: calc((100% - calc(3.625rem * 2)) / 3);
         }
         .p-home-flow__item:after{
            height: 44px;
            right: calc((35px + 0.8rem) * -1);
            width: 35px;
         }

         .p-home-flow__item-lead{}

         .p-home-flow__item-illust{
            height: 159px;
         }

         .p-home-flow__item-image{}
         .p-home-flow__item-image--discussion{
            max-width: 160px;
         }
         .p-home-flow__item-image--hand{
            max-width: 170px
         }
         .p-home-flow__item-image--advice{
            max-width: 160px
         }

         .p-home-flow__item-description{}

         .p-home-flow__menu{}

         .p-home-flow__menu-unit{}

         .p-home-flow__item-times{}

         .p-home-flow__item-timestext{}

      } /* min-width: 1240px */