@charset "UTF-8";

body{
   font-size: 62.5%;
   font-family: 'Noto Sans JP', sans-serif;
   background-color: var(--primary-color);
}

a{
   display: inline-block;
   text-decoration: none;
   color: black;
}

*{
   box-sizing: border-box;
}

.inner{
   width: 1200px;
   margin: 0 auto;
   text-align: center;
}

:root {
   --primary-color: #f6efe1;
 }

 /* 電話リンク750px以下の時、有効 */
 @media (min-width: 751px) {
   a[href*="tel:"] {
   pointer-events: none;
   cursor: default;
   text-decoration: none;
   }
}

 /* -------------------------------
    メインコンテンツ
    -------------------------------
 */

/* =============== トップコンテンツ =============== */
.top-visual-wrap{
   background-color: white;
   padding-bottom: 100px;
}
.top-visual-img-container{
   position: relative;
   overflow: hidden;
   width: 100%;
   height: 45vw;
}
.top-visual-img{
   position: absolute;
   top: -25%;
   left: 50%;
   transform: translate(-50%, 0%);
   height: auto;
   width: 100%;
}


.top-visual-title{
   font-size: 2.5rem;
   text-align: center;
}
.top-visual-title-br{
   display: none;
}

.top-visual-text{
   margin-top: 60px;
   font-size: 1.5rem;
   line-height: 3em;
   text-align: center;
}
.top-visual-text-red{
   color: red;
   font-weight: 700;
}
/* =============== トップコンテンツここまで =============== */

/* =============== 支援コンテンツ =============== */
.assist-wrap{
   padding-top: 100px;
   text-align: center;
   margin: 0 auto;
}
.assist-heading-img{
   width: 75%;
   display: inline-block;
}
.assist-title{
   font-size: 3rem;
   text-align: center;
   margin:60px 0 ;
}

/*  支援コンテンツブロック -------------- */
.assist-contents-box{
   position: relative;
   width: 50%;
   height: 280px;
   margin: 0 auto 50px;
   padding-top: 40px;
}

.assist-contents-img{
   display: inline-block;
   position: absolute;
   top: 0;
   left: 0;
   width: 40%;
}
.assist-contents-img-step{
   display: inline-block;
   position: absolute;
   top: 10%;
   left: 40%;
   width: 12%;
}

.assist-contents-text-area{
   background: white;
   border-radius: 10px;
   padding-right: 38px;
   padding-bottom: 30px;
}
.assist-contents-text-wrap{
   width: 43%;
   margin-left: auto;
}

.assist-contents-title{
   font-size: 2rem;
   color:deepskyblue;
   text-align: center;
   padding: 20px 0;
}

.assist-contents-text{
   font-size: 1rem;
   line-height: 1.5em;
}
/*  支援コンテンツブロックここまで -------------- */

/* 支援ビジュアル */
.assist-visual-img{
   width: 100%;
   height: 500px;
   object-fit: cover;
}

/* =============== 支援コンテンツここまで =============== */

/* =============== 事業コンテンツ =============== */

.about-wrap{
   padding-top: 100px;
   text-align: center;
   margin: 0 auto ;
}
.about-heading-img{
   width: 75%;
   display: inline-block;
}
.about-title{
   font-size: 3rem;
   text-align: center;
   margin:60px 0 ;
}

.grouphome-wrap{
   margin: 0 auto 100px;
   text-align: center;
}
/* グループホーム見出しテキスト ---------------*/
.grouphome-text-wrap{
   width: 50%;
   margin: 0 auto 50px;
}
.grouphome-heading{
   display: inline-block;
   font-size: 2rem;
   color: deepskyblue;
   background:linear-gradient(transparent 70%, #FFF 0%);
   margin-bottom: 30px;
}
.grouphome-heading-text{
   font-size: 1.5rem;
   line-height: 1.5em;
}
/* グループホーム見出しテキストここまで ----------------*/

/* グループホームリンク画像 -------------*/
.grouphome-img-wrap{
   width: 50%;
   margin: 0 auto 100px;
   position: relative;
}
.grouphome-img{
   display: inline-block;
   width: 100%;
}

.grouphome-img-text{
   background-color: skyblue;
   color: white;
   font-size: 1.5rem;
   padding-left: 20px;
   padding-top: 10px;
   padding-bottom: 10px;
   position: absolute;
   transform: translate(200%,-120%);
}

/* 右三角 */
.grouphome-img-text::after{
   top: 0;
   content: "";
   position: absolute;
   width: 0;
  height: 0;
  border-left: 28px solid skyblue;
  border-top: 28px solid transparent;
  border-bottom: 28px solid transparent;
}
/* グループホーム画像リンクここまで ---------------*/

/*  利用対象者 -------------- */

.client-wrap{
   width: 50%;
   height: 340px;
   position: relative;
   margin: 0 auto;
   text-align: center;
}
.client-heading{
   display: inline-block;
   font-size: 2.2rem;
   color: white;
   background-color: deepskyblue;
   border-radius: 50px;
   padding: 10px 80px;
}

.client-text-wrap{
   background-color: white;
   border-radius: 20px;
   padding: 90px 40px 40px;
   position: absolute;
   transform: translateY(-12%);
   z-index: -1;
}
.client-text{
   font-size: 1.1rem;
   color: dodgerblue;
   padding-left: 1em;
   text-indent: -1em;
}
/*  利用対象者ここまで -------------- */

/* =============== 就労支援 =============== */

.job-wrap{
   margin: 0 auto;
}

/* 就労支援見出しテキスト ---------------*/
.job-text-wrap{
   width: 50%;
   margin: 0 auto 50px;
}
.job-heading{
   display: inline-block;
   font-size: 2rem;
   color: deepskyblue;
   background:linear-gradient(transparent 70%, #FFF 0%);
   margin-bottom: 30px;
}
.job-heading-text{
   font-size: 1.5rem;
   line-height: 1.5em;
}
/* 就労支援見出しテキストここまで ----------------*/

/*  事業所リンク -------------- */

.office-wrap{
   display: flex;
   justify-content: space-around;
   width: 60%;
   margin: 0 auto 70px;
}
.office-link{
   width: 40%;
   height: 300px;
   position: relative;
}
.office-img{
   display: inline-block;
   width: 100%;
}
.office-img-name{
   font-size: 1.5rem;
   color: white;
   text-shadow: 1px 2px 0px #808080;
   position: absolute;
   top: 2%;
   left: 10%;
}
.office-img-text{
   background-color: skyblue;
   color: white;
   font-size: 1.2rem;
   padding-left: 20px;
   padding-top: 10px;
   padding-bottom: 10px;
   position: absolute;
   transform: translate(65%,-120%);
}

/* 右三角 */
.office-img-text::after{
   top: 0;
   content: "";
   position: absolute;
   width: 0;
  height: 0;
  border-left: 24px solid skyblue;
  border-top: 24px solid transparent;
  border-bottom: 24px solid transparent;
}


/*  事業所リンクここまで -------------- */

/*  就労支援対象者 -------------- */

.job_client-wrap{
   width: 50%;
   height: 450px;
   position: relative;
   margin: 0 auto 50px;
   text-align: center;
}
.job_client-heading{
   display: inline-block;
   font-size: 2.2rem;
   color: white;
   background-color: deepskyblue;
   border-radius: 50px;
   padding: 10px 80px;
}

.job_client-text-wrap{
   background-color: white;
   border-radius: 20px;
   padding: 90px 40px 20px;
   position: absolute;
   transform: translateY(-10%);
   z-index: -1;
}
.job_client-text{
   font-size: 1.1rem;
   color: dodgerblue;
   padding-left: 1em;
   text-indent: -1em;
   padding-bottom: 25px;
}
   
/*  就労支援対象者ここまで -------------- */

/* 就労支援ビジュアル  */
.job_visual-img{
   width: 100%;
   height: 500px;
   object-fit: cover;
}

/* =============== 就労支援ここまで =============== */

/* =============== ご利用の流れ =============== */
.flow-wrap{
   padding-top: 80px;
   margin: 0 auto 50px;
   text-align: center;
}

/*  タイトル -------------- */
.flow-heading-img{
   width: 75%;
   display: inline-block;
}
.flow-title{
   font-size: 3rem;
   text-align: center;
   margin:60px 0  40px;
}
.flow-title-text{
   font-size: 1.2rem;
   text-align: center;
   margin-bottom: 80px;
}

/*  タイトルここまで -------------- */

/*  流れの図 -------------- */
.flow-chart-container{
   display: flex;
   justify-content: center;
   width: 70%;
   column-gap: 20px;
   margin: 0 auto 100px;
}

.chart-unit{
   text-align: center;
   margin: 0 auto;
   padding: 20px 40px;
   border-radius: 20px;
   background-color: white;
   width: 30%;
   position: relative;
}

/* 右矢印 */
.chart-unit::after{
   top: 50%;
   left: 102%;
   content: "";
   position: absolute;
   transform: translateY(-50%);
   width: 0;
  height: 0;
  border-left: 15px solid #666;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}
/* 最後の図の右矢印非表示 */
.chart-unit:last-of-type::after{
   display: none;
}
.chart-unit-img{
   width: 50px;
   height: 50px;
}
.chart-unit-heading{
   font-size: 1rem;
   border-bottom: 2px solid black;
   margin-top: 10px;
   margin-bottom: 10px;
   padding-bottom: 10px;
   text-align: center;
}
.chart-unit-text{
   font-size: 0.8rem;
   line-height: 1.5em;
}

/*  流れの図ここまで -------------- */

/*  受給者証 -------------- */
.notebook-container{
   margin-bottom: 80px;
}
.notebook-block{
   display: flex;
   justify-content: center;
   align-items: center;
   margin: 0 auto;
}
.notebook-box{
   position: relative;
   width: 40%;
   height: 250px;
}
.notebook-heading{
   position: absolute;
   font-size: 2.2rem;
   text-shadow: 4px 3px 3px #808080;
   transform:translate(18%,100%) rotate(-10deg);
}
.notebook-text-br{
   display: none;
}
.notebook-words-img{
   position: absolute;
   width: 200px;
   left: 50%;
   bottom: 5%;
}
.notebook-img{
   width: 20%;
}

.notebook-text{
   font-size: 1.1rem;
   width: 50%;
   line-height: 1.5em;
   margin: 0 auto;
}
/*  受給者証ここまで -------------- */

/* 流れビジュアル */
.flow-visual-img{
   width: 100%;
   height: 500px;
   object-fit: cover;
}
/* =============== ご利用の流れここまで =============== */

/* =============== お問い合わせ =============== */

.contact-body{
   background-color: #EAF7FD;
   padding: 100px 0;
}
.contact-wrap{
   display: flex;
   justify-content: center;
   align-items: center;
}
.contact-container_2{
   margin-left: 100px;
}

.contact-logo{
   width: 150px;
   height: 150px;
}

.shea-company-block{
   font-size: 1rem;
   margin-top: 20px;
}

/*  お問い合わせ見出し -------------- */

.contact-heading{
   font-size: 2.2rem;
   color: deepskyblue;
   margin-bottom: 5px;
}
.contact-reception_time{
   font-size: 1.1rem;
   line-height: 1.5em;
   padding-left: 5px;
}
.contact-top_text{
   font-size: 0.9rem;
   padding-left: 5px;
}
/*  お問い合わせ見出しここまで -------------- */

/*  お問い合わせ事業所案内 -------------- */

.contact-office-block{
   margin-top: 40px;
}

.contact-office-name{
   font-size: 1.2rem;
}
.contact-office-subtext{
   font-size: 0.8rem;
   margin-left: 1em;
}
.contact-office-address{
   font-size: 1rem;
}
.contact-office_tel{
   font-size: 2rem;
   font-weight: 700;
}

/*  お問い合わせ事業所案内ここまで -------------- */

/* =============== お問い合わせここまで =============== */

/* -------------------------------
   タブレットコンテンツ
   -------------------------------
*/
@media screen and (min-width:751px) and (max-width:1280px) {
   .inner{
      width: 100%;
      text-align: center;
      margin: 0 auto;
   }
   
   /* =============== タブレットトップコンテンツ =============== */

   .top-visual-wrap{
      padding-bottom: 40px;
   }

   .top-visual-img-container{
      height: auto;
      top: 0%;
      aspect-ratio: 11/5;
   }

   .top-visual-title{
      font-size: 2.2rem;
      text-align: center;
      margin-top: 1vh;
   }
   .top-visual-title-br{
      display: block;
   }

   .top-visual-text{
      margin: 50px auto 0;
      font-size: 1.4rem;
      line-height: 1.5em;
      text-align: center;
      width: 80%;

   }
   
   /* =============== タブレットトップコンテンツここまで =============== */
   
   
   /* =============== タブレット支援コンテンツ =============== */

   .assist-wrap{
      padding-top: 50px;
   }

   .assist-heading-img{
      width: 90%;
   }

   .assist-title{
      font-size: 2rem;
      margin: 50px 0;
   }
   
   /*  タブレット支援コンテンツブロック -------------- */
   .assist-contents-box{
      width: 85%;
      padding-top: 0;
      height: 290px;
   }
   .assist-contents-img{
      width: 40%;
   }
   .assist-contents-img-step{
      top: 5%;
      left: 30%;
      width: 15%;
   }
   .assist-contents-text-wrap{
      width: 50%;
   }

   .assist-contents-text-area{
      padding-right: 10px;
      padding-bottom: 10px;
   }

   .assist-contents-title{
      font-size: 2rem;
   }
   .assist-contents-text{
      font-size: 1.4rem;
   }
   
   /*  タブレット支援コンテンツブロックここまで -------------- */

   /* タブレット支援ビジュアル */
   .assist-visual-img{
      height: 400px;
   }
   
   /* =============== タブレット支援コンテンツここまで =============== */

   /* =============== タブレット事業コンテンツ =============== */

   .about-wrap{
      padding-top: 50px;
   }
   .about-heading-img{
      width: 90%;
   }
   .about-title{
      font-size: 2.2rem;
      margin: 50px 0;
   }
   .grouphome-wrap{
      margin: 0 auto 60px;
   }

   /*  タブレットグループホーム見出しテキスト -------------- */

   .grouphome-text-wrap{
      width: 90%;
      text-align: center;
   }
   .grouphome-heading{
      font-size: 2.2rem;
   }
   .grouphome-heading-text{
      font-size: 1.4rem;
   }
   /*  タブレットグループホーム見出しテキストここまで -------------- */

   /* タブレットグループホームリンク画像 -------------*/
   .grouphome-img-wrap{
      width: 90%;
      margin: 0 auto 50px;
   }

   .grouphome-img-text{
      font-size: 1.4rem;
      transform: translate(0%,-110%);
      right: 5%;
   }
   /* タブレット右三角 */
   .grouphome-img-text::after{
      border-left: 26px solid skyblue;
      border-top: 26px solid transparent;
      border-bottom: 26px solid transparent;
   }
   
   /* タブレットグループホームリンク画像ここまで -------------*/
   
   /*  タブレット利用対象者 -------------- */
   .client-wrap{
      width: 70%;
      height: 400px;
   }
   .client-text{
      font-size: 1.4rem;
   }
   /*  タブレット利用対象者ここまで -------------- */
   
   /* =============== タブレット事業コンテンツここまで =============== */

   /* =============== タブレット就労支援 =============== */

   /* タブレット就労支援見出しテキスト ---------------*/

   .job-text-wrap{
      width: 90%;
      text-align: center;
   }

   .job-heading{
      font-size: 2.2rem;
   }

   .job-heading-text{
      font-size: 1.4rem;
   }
   
   /* タブレット就労支援見出しテキストここまで ---------------*/

   /*  タブレット事業所リンク -------------- */

   .office-wrap{
      width: 90%;
   }

   .office-link{
      width: 50%;
      height: 400px;
      position: relative;
   }
   .office-img-name{
      font-size: 1.8rem;
      top: 5%;
   }

   .office-img-text{
      font-size: 1.4rem;
      padding-left: 15px;
      padding-top: 8px;
      padding-bottom: 8px;
      right: 10%;
      transform: translate(0%,-120%);
   }
   /* タブレット右三角 */
   .office-img-text::after{
      border-left: 26px solid skyblue;
      border-top: 26px solid transparent;
      border-bottom: 26px solid transparent;
   }
   
   /*  タブレット事業所リンクここまで -------------- */

   /*  タブレット就労支援対象者 -------------- */

   .job_client-wrap{
      width: 90%;
      height: 540px;
   }
   .job_client-text{
      font-size: 1.4rem;
   }   
   
   /*  タブレット就労支援対象者ここまで -------------- */   

   /* タブレット就労支援ビジュアル */
   .job_visual-img{
      height: 400px;
   }
   
   /* =============== タブレット就労支援ここまで =============== */

   /* =============== タブレットご利用の流れ =============== */
   .flow-wrap{
      margin: 0 auto 25px;
   }
   
   /*  タイトル -------------- */
   .flow-heading-img{
      width: 90%;
   }
   .flow-title{
      font-size: 2.2rem;
      margin: 30px 0 30px;
   }
   .flow-title-text{
      margin-bottom: 40px;
      font-size: 1.4rem;
   }
   /*  タイトルここまで -------------- */

   /*  タブレット流れの図 -------------- */

   .flow-chart-container{
      display: flex;
      flex-direction: column;
      width: 70%;
      column-gap: 0;
      row-gap: 20px;
      margin: 0 auto 50px;
   }
   .chart-unit{
      width: 100%;
   }
   /* 下矢印 */
   .chart-unit::after{
      top: 102%;
      left: 50%;
      content: "";
      position: absolute;
      transform: translate(-50%,0);
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-top: 15px solid black;
   }

   .chart-unit-heading{
      font-size: 1.4rem;
   }
   
   .chart-unit-text{
      font-size: 1.2rem;
   }
   
   /*  タブレット流れの図ここまで -------------- */

   /*  タブレット受給者証 -------------- */
   .notebook-container{
      margin-bottom: 50px;
   }
   .notebook-box{
      width: 40%;
      height: 150px;
   }

   .notebook-heading{
      position: absolute;
      font-size: 2.5rem;
      transform: translate(5%,20%) rotate(-10deg);
   }

   .notebook-text-br{
      display: block;
   }
   .notebook-words-img{
      position: absolute;
      width: 160px;
      left: 50%;
      bottom: -5%;
   }
   .notebook-img{
      width: 30%;
   }

   .notebook-text{
      font-size: 1.4rem;
      width: 80%;
   }
   /*  タブレット受給者証ここまで -------------- */

   /* タブレット流れビジュアル */
   .flow-visual-img{
      height: 400px;
   }
   
   
   /* =============== タブレットご利用の流れここまで =============== */

   /* =============== タブレットお問い合わせ =============== */
   .contact-body{
      padding: 50px 0;
   }
   .contact-wrap{
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      margin: 0 auto;
   }
   .contact-container_1{
      margin-bottom: 30px;
      text-align: center;
   }
   .contact-container_2{
      margin: 0 auto;
   }

   .contact-logo{
      display: inline-block;
   }
   
   .shea-company-block{
      font-size: 1.5rem;
   }

   /*  タブレットお問い合わせ見出し -------------- */
   .contact-heading-block{
      margin: 0 auto;
   }

   .contact-heading{
      text-align: center;
      margin-bottom: 20px;
   }
   .contact-reception_time{
      width: 90%;
      margin: 0 auto;
      font-size: 1.4rem;
   }
   .contact-top_text{
      width: 90%;
      margin: 0 auto;
      font-size:1.4rem;
   }
   
   /*  タブレットお問い合わせ見出しここまで -------------- */

   /*  タブレットお問い合わせ事業所案内 -------------- */
   .contact-office-block{
      width: 57%;
      margin: 40px auto 0;
   }
   .contact-office-name{
      font-size: 1.4rem;
   }
   .contact-office-subtext{
      font-size: 1.2rem;
   }
   .contact-office-address{
      font-size: 1.4rem;
   }
   .contact-office_tel{
      font-size: 2.5rem;
   }
   /*  タブレットお問い合わせ事業所案内ここまで   -------------- */
   
   /* =============== タブレットお問い合わせここまで =============== */
}



/* -------------------------------
   スマホメインコンテンツ
   -------------------------------
*/
@media screen and (max-width:750px) {

   .inner{
      width: 100%;
      text-align: center;
      margin: 0 auto;
   }
   
   /* =============== スマホトップコンテンツ =============== */

   .top-visual-wrap{
      padding-bottom: 40px;
   }

   .top-visual-img-container{
      height: 180px;
      top: -10%;
   }

   .top-visual-title{
      font-size: 2rem;
      text-align: center;
      margin-top: 5vh;
   }
   .top-visual-title-br{
      display: block;
   }

   .top-visual-text{
      margin: 50px auto 0;
      font-size: 1.1rem;
      line-height: 1.5em;
      text-align: center;
      width: 80%;

   }
   
   /* =============== スマホトップコンテンツここまで =============== */
   
   
   /* =============== スマホ支援コンテンツ =============== */

   .assist-wrap{
      padding-top: 50px;
   }

   .assist-heading-img{
      width: 90%;
   }

   .assist-title{
      font-size: 2rem;
      margin: 50px 0;
   }
   
   /*  スマホ支援コンテンツブロック -------------- */
   .assist-contents-box{
      width: 95%;
      padding-top: 0;
      height: 250px;
   }
   .assist-contents-img{
      width: 40%;
   }
   .assist-contents-img-step{
      top: 5%;
      left: 30%;
      width: 15%;
   }
   .assist-contents-text-wrap{
      width: 50%;
   }

   .assist-contents-text-area{
      padding-right: 10px;
      padding-bottom: 10px;
   }

   .assist-contents-title{
      font-size: 1.5rem;
   }
   
   /*  スマホ支援コンテンツブロックここまで -------------- */

   /* スマホ支援ビジュアル */
   .assist-visual-img{
      height: 250px;
   }
   
   /* =============== スマホ支援コンテンツここまで =============== */

   /* =============== スマホ事業コンテンツ =============== */

   .about-wrap{
      padding-top: 50px;
   }
   .about-heading-img{
      width: 90%;
   }
   .about-title{
      font-size: 2rem;
      margin: 50px 0;
   }
   .grouphome-wrap{
      margin: 0 auto 100px;
   }

   /*  スマホグループホーム見出しテキスト -------------- */

   .grouphome-text-wrap{
      width: 90%;
      text-align: center;
   }
   .grouphome-heading-text{
      font-size: 1.1rem;
   }
   /*  スマホグループホーム見出しテキストここまで -------------- */

   /* スマホグループホームリンク画像 -------------*/
   .grouphome-img-wrap{
      width: 90%;
      margin: 0 auto 50px;
   }

   .grouphome-img-text{
      font-size: 1.1rem;
      transform: translate(128%,-110%);
   }
   /* スマホ右三角 */
   .grouphome-img-text::after{
      border-left: 23px solid skyblue;
      border-top: 23px solid transparent;
      border-bottom: 23px solid transparent;
   }
   
   /* スマホグループホームリンク画像ここまで -------------*/
   
   /*  スマホ利用対象者 -------------- */
   .client-wrap{
      width: 90%;
      height: 400px;
   }
   .client-text{
      font-size: 1rem;
   }
   /*  スマホ利用対象者ここまで -------------- */
   
   /* =============== スマホ事業コンテンツここまで =============== */

   /* =============== スマホ就労支援 =============== */

   /* スマホ就労支援見出しテキスト ---------------*/

   .job-text-wrap{
      width: 90%;
      text-align: center;
   }

   .job-heading{
      font-size: 1.5rem;
   }

   .job-heading-text{
      font-size: 1.1rem;
   }
   
   /* スマホ就労支援見出しテキストここまで ---------------*/

   /*  スマホ事業所リンク -------------- */

   .office-wrap{
      width: 95%;
   }

   .office-link{
      width: 50%;
      height: 200px;
      position: relative;
   }
   .office-img-name{
      font-size: 1.1rem;
      top: 5%;
   }

   .office-img-text{
      font-size: 1rem;
      padding-left: 15px;
      padding-top: 8px;
      padding-bottom: 8px;
      transform: translate(25%,-120%);
   }
   /* スマホ右三角 */
   .office-img-text::after{
      border-left: 20px solid skyblue;
      border-top: 20px solid transparent;
      border-bottom: 20px solid transparent;
   }
   
   /*  スマホ事業所リンクここまで -------------- */

   /*  スマホ就労支援対象者 -------------- */

   .job_client-wrap{
      width: 90%;
      height: 540px;
   }
   .job_client-text{
      font-size: 1rem;
   }   
   
   /*  スマホ就労支援対象者ここまで -------------- */   

   /* スマホ就労支援ビジュアル */
   .job_visual-img{
      height: 250px;
   }
   
   /* =============== スマホ就労支援ここまで =============== */

   /* =============== スマホご利用の流れ =============== */
   .flow-wrap{
      margin: 0 auto 25px;
   }
   
   /*  タイトル -------------- */
   .flow-heading-img{
      width: 90%;
   }
   .flow-title{
      font-size: 2.2rem;
      margin: 30px 0 30px;
   }
   .flow-title-text{
      margin-bottom: 40px;
   }
   /*  タイトルここまで -------------- */

   /*  スマホ流れの図 -------------- */

   .flow-chart-container{
      display: flex;
      flex-direction: column;
      width: 80%;
      column-gap: 0;
      row-gap: 20px;
      margin: 0 auto 50px;
   }
   .chart-unit{
      width: 100%;
   }
   /* 下矢印 */
   .chart-unit::after{
      top: 102%;
      left: 50%;
      content: "";
      position: absolute;
      transform: translate(-50%,0);
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-top: 15px solid black;
   }

   .chart-unit-heading{
      font-size: 1.1rem;
   }
   
   .chart-unit-text{
      font-size: 0.9rem;
   }
   
   /*  スマホ流れの図ここまで -------------- */

   /*  スマホ受給者証 -------------- */
   .notebook-container{
      margin-bottom: 50px;
   }
   .notebook-box{
      width: 40%;
      height: 150px;
   }

   .notebook-heading{
      position: absolute;
      font-size: 1.5rem;
      transform: translate(5%,50%) rotate(-10deg);
   }

   .notebook-text-br{
      display: block;
   }
   .notebook-words-img{
      position: absolute;
      width: 100px;
      left: 40%;
      bottom: 2%;
   }
   .notebook-img{
      width: 30%;
   }

   .notebook-text{
      width: 80%;
   }
   /*  スマホ受給者証ここまで -------------- */

   /* スマホ流れビジュアル */
   .flow-visual-img{
      height: 250px;
   }
   
   
   /* =============== スマホご利用の流れここまで =============== */

   /* =============== スマホお問い合わせ =============== */
   .contact-body{
      padding: 50px 0;
   }
   .contact-wrap{
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      margin: 0 auto;
   }
   .contact-container_1{
      margin-bottom: 30px;
      text-align: center;
   }
   .contact-container_2{
      margin: 0 auto;
   }

   .contact-logo{
      display: inline-block;
   }
   
   .shea-company-block{
      font-size: 1.5rem;
   }

   /*  スマホお問い合わせ見出し -------------- */
   .contact-heading-block{
      margin: 0 auto;
   }

   .contact-heading{
      text-align: center;
      margin-bottom: 20px;
   }
   .contact-reception_time{
      width: 90%;
      margin: 0 auto;
   }
   .contact-top_text{
      width: 90%;
      margin: 0 auto;
   }
   
   /*  スマホお問い合わせ見出しここまで -------------- */

   /*  スマホお問い合わせ事業所案内 -------------- */
   .contact-office-block{
      width: 75%;
      margin: 40px auto 0;
   }
   /*  スマホお問い合わせ事業所案内ここまで   -------------- */
   
   /* =============== スマホお問い合わせここまで =============== */

   
}