body {
     font-family: "Segoe UI", sans-serif;
     margin: 0;
     padding: 0;
     line-height: 1.6;
     background: #f8f8f8;
     font-weight: 500;
 }

 .container {
     max-width: 800px;
     margin: auto;
     color: #464646;
     background: #fff;

 }

 .img-bg {
     width: 100%;
 }


 h2 {
     font-size: 1.8rem;
     white-space: nowrap;
 }

 /* 背景画像のど真ん中に配置 */
 .center-forbg {
     position: absolute;
     top: 50%;
     left: 50%;
     /* https://yoncoichi.com/text-on-the-image/ */
     transform: translate(-50%, -50%);
 }

 /* 子要素を中央に配置 */
 .parent {
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .yokonarabi {
     display: flex;
     align-items: center;
 }

 .w80per {
     width: 80%;
 }

 .underLine {
     background: linear-gradient(transparent 70%, #ffffb6 70%);
 }

 .redLetter {
     color: rgb(255 23 23);
     font-weight: 600;
 }

 .weight900Letter {
     font-weight: 900;
 }

 /*==========================================
        個人向けLP誘導画像エリア 
==========================================*/
 .personal-adv-erea {
     width: 80%;
     margin: 16px 24px;
 }

 .personal-adv-erea img {
     width: 100%;
 }


 /*==========================================
        ファーストビュー 
==========================================*/
 .fv-erea {
     background-image: url(../img/fv.png);
     height: 0;
     /* calc(高さ / 幅 * 100%) */
     padding-top: calc(3334 / 5856 * 100%);
     background-repeat: no-repeat;
     background-size: contain;
     position: relative;
 }

 .logo-erea {
     width: 100%;
 }

 .logo-erea img {
     width: 100%;
 }



 /*==========================================
        問い合わせエリア 
==========================================*/


 .toiawase-erea01 {
     background-image: url(../img/toiawase.jpg);
     height: 0;
     /* calc(高さ / 幅 * 100%) */
     padding-top: calc(639 / 1000 * 100%);
     background-repeat: no-repeat;
     background-size: contain;
     position: relative;
 }

 .toiawase-erea01 a {
     position: absolute;
     top: 82%;
     left: 50%;
     transform: translate(-50%, -50%);
 }



 .toiawase-erea02 {
     display: flex;
     align-items: center;
     justify-content: center;
     background-color: #00ff9c;
     height: 70px;
 }


 .bt-toiawase {
     padding: 0.4em 1.6em;
     margin: 0px 20px;
     font-size: 0.8em;
     color: #464646;
     background-color: #ffffff;
     text-decoration: none;
     user-select: none;
     border: 1px #ffffff solid;
     border-radius: 3px;
 }

 .bt-toiawase:hover {
     color: #fff;
     background: #00b5ad;
 }





 /*==========================================
        無料体験エリア 
==========================================*/

 .taiken01-erea {
     background-image: url(../img/taiken01.jpg);
     height: 0;
     /* calc(高さ / 幅 * 100%) */
     padding-top: calc(856 / 1000 * 100%);
     background-size: contain;
     position: relative;
 }

 .taiken02-erea {
     background-image: url(../img/taiken02.jpg);
     height: 0;
     /* calc(高さ / 幅 * 100%) */
     padding-top: calc(856 / 1000 * 100%);
     background-repeat: no-repeat;
     background-size: contain;
     position: relative;
 }

 .taiken-title {
     position: absolute;
     top: 17%;
     left: 55%;
     transform: translate(-50%, -50%);
     font-size: 2rem;
     white-space: nowrap;
     color: #494949;
 }



 /*==========================================
        簡易的メリットエリア 
==========================================*/

 .meritEasy-erea {
     padding: 80px;
     background-image: url(../img/colorful.png);
     height: 0;
     /* calc(高さ / 幅 * 100%) */
     padding-top: calc(800 / 1000 * 100%);
     background-size: contain;
     position: relative;
 }

 .meritEasy-erea .img-bg {
     margin: 24px 0px;
 }

 .meritEasy-contents {
     padding: 16px;
     color: #494949;
     font-size: 1.3rem;
     border: #00ff9c solid 3px;
     background-color: #ffffffa6;
 }

 .meritEasy-contents .img-check {
     width: 32px;
 }

 .meritEasy-contents p {
     margin-left: 14px;
     margin-top: 14px;
     margin-bottom: 14px;
 }



 /*==========================================
        悩み・問題エリア 
==========================================*/
 .problem01-erea .img-bg {
     /* 上の画像との間を埋めるため */
     vertical-align: bottom;
 }

 .problem02-erea {
     background-image: url(../img/problem02.jpg);
     height: 0;
     /* calc(高さ / 幅 * 100%) */
     padding-top: calc(570 / 1000 * 100%);
     background-repeat: no-repeat;
     background-size: contain;
     position: relative;

 }

 .problem02-erea p {
     background-color: #00000096;
     padding: 0px 16px;
     white-space: nowrap;
     color: #ffffff;
     font-size: 1.3rem;
     width: fit-content;
     margin: 32px auto;
 }


 /*==========================================
        8メリットエリア 
==========================================*/

 .merit8-erea {
     padding: 80px;
     background-image: url(../img/bg-point.png);
     height: 0;
     /* calc(高さ / 幅 * 100%) */
     padding-top: calc(2500 / 1000 * 100%);
     background-size: contain;
     position: relative;
     color: #494949;
 }

 .merit8-erea h2 {
     text-align: center;
     font-size: 3rem;
     align-items: center;
     display: flex;
     justify-content: center;
 }

 .merit8-erea h2 img {
     max-width: 90px;
     margin: 0px 16px;
 }

 .merit8-contents .content {
     margin: 56px 0px;
 }

 .merit8-contents img {
     width: 64px;
 }

 .merit8-contents h3 {
     margin-left: 14px;
     margin-top: 14px;
     margin-bottom: 14px;
     font-size: 1.5rem;
     background: linear-gradient(transparent 70%, #ffffb6 70%);
 }

 .merit8-contents .detail-erea {
     margin: 16px 0px;
 }

 .merit8-contents .index-gray {
     height: 50px;
     width: 10px;
     background-color: #e0e0e0;
     border-radius: 5px;
     margin-left: 45px;
 }

 .merit8-contents .detail-content {
     margin: 0px 0px 0px 16px;
 }


 /*==========================================
        質疑応答可能icon
==========================================*/

 .icons-erea {
     margin: 32px 16px;
     padding: 16px 4px;
     border: 3px pink solid;
     border-radius: 10px;
     text-align: center;
 }

 .icons {
     padding: 24px 8px;
 }

 .icons img {
     width: 50px;
     height: 50px;
     padding: 5px;
     object-fit: contain;
 }

 .icons a {
     width: fit-content;
     align-items: center;
     justify-content: center;
 }


 /*==========================================
        概要
==========================================*/

 .gaiyou-title-erea {
     margin: 64px 0px;
 }


 .gaiyou-title {
     background-image: url(../img/gaiyou-title-bg.png);
     height: 0;
     /* calc(高さ / 幅 * 100%) */
     padding-top: calc(86 / 961 * 100%);
     background-repeat: no-repeat;
     background-size: contain;
     position: relative;
 }

 .gaiyou-title h1 {
     text-align: right;
     margin: 0px 32px;
     color: #ffffff;
     white-space: nowrap;
 }

 .gaiyou-erea {
     padding: 40px 80px;
 }

 .gaiyou-taiken-contnts-erea {
     margin: 80px 40px;
     border: 1px solid #71ff92;
     padding: 20px 36px;
     border-radius: 15px;
     background-color: #f7fff9;
 }

 .gaiyou-hon-contnts-erea {
     margin: 80px 40px;
     border: 1px solid #ffc5f1;
     padding: 20px 36px;
     border-radius: 15px;
     background-color: #fff8fd;
 }

 .gaiyou-contents-erea .title {
     display: flex;
     align-items: center;
     justify-content: left;
     padding-left: 40px;
 }

 .gaiyou-contents-erea .title h2 {
     padding-left: 16px;
 }

 .gaiyou-contents-erea .title img {
     width: 50px;
 }

 .gaiyou-contents-erea .index {
     margin: 24px 0px;
     padding: 0px 60px;
 }

 .gaiyou-contents-erea .index-title01 {
     font-size: 1.2rem;
 }

 .gaiyou-contents-erea .index-title02 {
     font-size: 1.2rem;
     margin-left: 24px;
     margin-top: 0px;
     position: relative;
     padding-left: 50px;
     padding-bottom: 20px;
 }

 .gaiyou-contents-erea .index-title02::before {
     content: '';
     position: absolute;
     left: 5%;
     transform: translateX(-50%);
     transform: translateY(200%);
     width: 7px;
     height: 7px;
     border-radius: 7px;
 }

 .gaiyou-taiken-contnts-erea .index-title02::before {
     background-color: #b3ffc5;
 }

 .gaiyou-hon-contnts-erea .index-title02::before {
     background-color: #ffc5f1;
 }


 .gaiyou-contents-erea .index-content {
     font-size: 0.8rem;
     margin-left: 24px;
     padding-left: 50px;
 }


 /*==========================================
        フッター
==========================================*/

 footer {
     margin-top: 64px;
     text-align: center;
     background-color: #f9f9f9;
 }

 footer a {
     text-decoration: none;
     color: #b7b7b7;
     font-weight: 300;
 }