@import url('https://fonts.googleapis.com/css2?family=Kaisei+Opti&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Kaisei+Opti&family=Yuji+Boku&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&display=swap');

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

 main {
     margin-bottom: 80px;
 }

 a {
     text-decoration-line: none;
 }

 .NOTPC {
     display: none;
 }


 .container {
     margin: auto;
     background: #fff;
 }

 .logo-erea {
     z-index: 2;
     position: absolute;
     width: auto;
     padding: 8px;
 }

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

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

 /* ==================================
    画像
=================================== */
 img {
     width: 100%;
 }

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


 /* 真下の要素との隙間を無くす。 直前のimgタグに付与 */
 .sukima0 {
     vertical-align: bottom;
 }

 .w-100 {
     width: 100%;
 }


 .img-60per img {
     width: 60%;
 }

 .sideLetters {
     margin-top: -80px;
     margin-right: 30px;
 }


 /* ==================================
    フォント
 ======================================= */
 .font-KaiseiOpti {
     font-family: "Kaisei Opti", serif;
     font-weight: 600;
     font-style: normal;
 }

 .font-YujiBoku {
     font-family: "Yuji Boku", serif;
     font-weight: 400;
     font-style: normal;
 }

 .font-NonSerif {
     font-family: "Noto Serif JP", serif;
 }

 .refference-erea {
     text-align: end;
     font-size: 0.8rem;
     color: #6a6a6a99;
     position: absolute;
     right: 5px;
     margin-top: 16px;
 }

 .section-titles-erea {
     margin: 32px 0 56px 0;
 }

 .section-title {
     margin: 8px 0 56px 0;
     text-align: center;
     justify-content: center;
     display: flex;
 }

 .section-title h2 {
     font-size: 2.0rem;
     margin: 0px;
     text-align: center;
 }

 .section-subtitle h3 {
     font-size: 2rem;
     text-align: center;
 }

 /* ==================================
    強調
 ======================================= */
 .under-line {
     background: linear-gradient(transparent 70%, #ffffb6 70%);
 }

 .font-Weight700 {
     font-weight: 700;
 }



 /* ==================================
    配置
=================================== */

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

 .justifyContent-Left {
     justify-content: left;
 }





 /* ==================================
    レイアウトデザイン
=================================== */

 .articles-block-erea {
     justify-content: center;
     display: grid;
 }

 .articles-block {
     width: 70vw;
 }

 .article {
     margin-bottom: 16px;
     padding: 16px;
     background-color: #fffef9;
 }

 .article .detail {
     text-align: left;
     padding-left: 56px;
     color: #6c6c6c;
 }

 /* チェック付箇条書 左寄せ */
 .kajyougakiCheck-erea {
     margin-top: 160px;
     margin-bottom: 160px;
 }


 .kajyougakiCheck-erea .parent {
     margin: 16px 0px;
     justify-content: left;
 }


 .kajyougakiCheck-erea .parent img {
     width: auto;
     height: 40px;
     padding-right: 16px;
 }

 .kajyougakiCheck-erea .letter {
     font-size: 1.3rem;
     line-height: 3rem;
     margin-top: 56px;
     background-color: #72727233;
     padding: 16px;
 }

 .section-title .midashi-tensen {
     background: #fffec4;
     box-shadow: 0px 0px 0px 5px #fffec4;
     border: dashed 3px #2fdd00;
     padding: 0.2em 0.5em;
     color: #454545;
     font-size: 2.2rem;
     font-weight: 700;
     text-align: center;
 }




 /* ==================================
    憧れ・悩みエリア
=================================== */

 .mondaiteiki-erea {
     margin: 160px 0px 40px 0px;
     text-align: center;
 }

 .mondaiteikis {
     font-size: 2rem;
 }

 .mondaiteiki-erea span {
     font-weight: bolder;
     font-size: 3.5rem;
     padding: 0 8px;
     margin: 0 8px;
 }

 /* -----憧れ----------------------------------------- */
 .akogare-erea {
     background-image: url(../img/bg-akogare.jpg);
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center;
     /* 高さを自動で子に合わせる */
     display: inline-block;
     /* または display: block; でもOK */
     width: 100%;
     font-size: 2rem;
     padding-top: 56px;
     padding-bottom: 56px;
 }

 .akogare-erea .parent {
     justify-content: left;
     margin: 15px;
 }

 .akogare-erea .parent img {
     height: 60px;
     margin: 8px;
     z-index: 2;
     left: 30px;
     top: -10px;
     position: relative;
     width: auto;
 }


 .akonayamigare-erea .parent {
     justify-content: left;
     margin: 15px;
 }

 .hukidasi-pink {
     background-image: linear-gradient(rgb(243 47 94 / 52%), rgb(240 137 229 / 30%));
     padding: 8px 24px 8px 56px;
     border-radius: 20px;
     /* white-space: nowrap; */
     color: white;
     display: table-cell;
 }

 /* -----悩み----------------------------------------- */


 .nayami-erea {
     background-image: url(../img/bg-nayami.png);
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center;
     /* 高さを自動で子に合わせる */
     display: inline-block;
     width: 100%;
     font-size: 2rem;
     padding-top: 56px;
     padding-bottom: 56px;
 }

 .nayami-erea .parent {
     justify-content: left;
     margin: 15px;
 }

 .nayami-erea .parent img {
     height: 60px;
     margin: 8px;
     z-index: 2;
     left: 30px;
     top: -10px;
     position: relative;
     width: auto;
 }

 .hukidasi-gray {
     background-color: rgba(0, 0, 0, 0.508);
     padding: 8px 24px 8px 56px;
     border-radius: 20px;
     color: white;
     display: table-cell;
 }


 /*=========================================
    　　　情報エリア
============================================*/
 .info-erea {
     margin-top: 160px;
     margin-bottom: 80px;

 }

 .bg-sakura {
     background-image: url(../img/bg-sakura.jpg);
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center;
     /* 高さを自動で子に合わせる */
     display: inline-block;
     width: 100%;
     /* max-width: 1000px; */
     font-size: 2rem;
 }

 .bg-sakura .contents-erea {
     margin: 80px 16px;
     text-align: center;
     line-height: 5rem;

 }


 /*=========================================
    　　　マイナスポイントエリア
============================================*/
 .yami-erea {
     background-image: url(../img/bg-kiri.png);
     background-size: cover;
     background-repeat: no-repeat;
     background-position: top;
     /* 高さを自動で子に合わせる */
     display: inline-block;
     width: 100%;
     /* max-width: 1000px; */
     padding-top: 160px;
 }

 .yami-erea .broken-paper {
     margin-top: 180px;
 }

 .yami-erea .broken-paper img {
     width: 100%;

 }


 .yami-erea .question {
     width: 50%;
     text-align: center;
     margin-top: 180px;
 }

 .yami-erea .graph {
     width: 50%;
     text-align: center;
 }

 .question-erea {
     text-align: center;
 }

 /* ----つまづきやすいPointエリア------------ */

 .zasetuPoint-erea {
     color: white;
     text-align: center;
 }

 .zasetuPoint-bg {
     background-image: url(../img/bg-clea-uzu.png);
     background-size: cover;
     background-repeat: repeat;
     background-position: top;
     /* 高さを自動で子に合わせる */
     display: inline-block;
     padding: 160px 80px;
     text-align: center;
 }

 .zasetuPoint-erea .section-title {
     font-size: 1.6rem;
 }

 .zasetuPoint-erea .parent div {
     font-size: 1.2rem;
 }


 .zasetuPoint-erea .cost-point {
     font-size: 1.3rem;
     line-height: 3rem;
     margin-top: 56px;
     background-color: #72727233;
     padding: 16px;
 }



 /*=========================================
    　　　HTML・CSS入門講座紹介エリア
============================================*/

 .introduction-nekonote .font-NonSerif {
     font-weight: 800;
     font-size: 1.5rem;
 }

 .introduction-nekonote .section-title {
     margin: 0;
 }

 .introduction-nekonote .section-subtitle {
     font-size: 1.2rem;
     text-align: center;
 }

 .introduction-nekonote .article .detail {
     text-align: left;
     padding-left: 56px;
     color: #515151;
     font-weight: 400;
 }

 .introduction-nekonote .kajyougakiCheck-erea .parent img {
     height: 60px;
 }



 /* =======================================
        　概要
 ==========================================*/
 .gaiyou-bg {
     background-image: url(../img/bg-gaiyou-blue.png);
     background-size: cover;
     background-repeat: no-repeat;
     background-position: top;
     display: inline-block;
     width: 100%;
     /* max-width: 1000px; */
     font-size: 2rem;
 }

 .gaiyou-contnts-erea {
     padding: 56px;
 }

 .midashi-hisigata-erea {
     display: flex;
     align-items: center;
 }

 .midashi-hisigata {
     clip-path: polygon(40% 1%, 100% 0%, 60% 100%, 0% 100%);
     background-color: #05b800;
     height: 30px;
     width: 60px;
     margin-right: 15px
 }

 .gaiyou-contents {
     justify-content: center;
     display: flex;
 }

 .gaiyou-contents div {
     width: fit-content;
 }

 .gaiyou-contents li {
     font-size: 1.5rem;
     margin-bottom: 40px;
     font-weight: 500;
 }

 .gaiyou-contents div {
     padding-left: 40px;
     font-weight: 400;
 }

 .list-lists-erea li {
     margin-bottom: 0px;
     font-weight: 400;
 }

 /*=========================================
    　　　footer
============================================*/
 footer {
     position: fixed;
     bottom: 10px;
     left: 50%;
     transform: translateX(-50%);
     z-index: 5;
     background-color: rgb(255 255 236 / 55%);
     ;
     width: 100%;
     bottom: 0;
 }

 .bt-otoiawase {
     text-align: center;
     height: 80px;
     background-color: rgba(240, 248, 255, 0);
     align-items: center;
     justify-content: center;
     display: flex;
 }

 .bt-otoiawase a {
     border: 1px solid #219102;
     background-color: #05b800;
     border-radius: 20px;
     padding: 8px 24px;
     color: #fff;
     font-size: 1.1rem;
 }

 .bt-otoiawase a:hover {
     background-color: #c7ffc5;
     color: #ff5900;
     border: 1px solid #219102;
     font-weight: 800;
 }

 .contacts-erea {
     margin: 0 16px;
 }

 .contact {
     margin: 0 16px;
 }

 .contacts-erea img {
     width: 40px;
     margin: 0 8px;
 }





 /*=========================================
    　　　タブレット用
============================================*/
 @media screen and (min-width: 768px) and (max-width: 1024px) {


     .PC {
         display: none;
     }

     .NOTPC {
         display: grid;
     }

     .articles-block-erea {
         margin: 40px 28px;
     }

     .yami-erea .question-erea {
         text-align: center;
     }

     .yami-erea .question-erea img {
         width: 60%;
         margin: 0 auto;
     }

     .zasetuPoint-erea .cost-point {
         margin-top: 80px;
     }


     .img-supportYou {
         width: 80vw;
         margin: 0 auto;
         padding-top: 40px;
         padding-bottom: 40px;
     }


     .bt-otoiawase a {
         border-radius: 15px;
         padding: 8px 12px;
     }

     .contacts-erea {
         display: grid;
         margin: 0 16px 0 32px;
     }

     .contact {
         justify-content: left;
         margin: 8px 0;
     }

     .contacts-erea a {
         font-size: 0.8rem;
     }

 }

 /*=========================================
    　　　767px以下はレスポンシブ
============================================*/

 @media screen and (max-width: 767px) {


     .PC {
         display: none;
     }

     .NOTPC {
         display: grid;
     }

     .mondaiteiki-erea {
         margin: 80px 0px 40px 0px;
     }

     .refference-erea {
         text-align: end;
         font-size: 0.5rem;
     }

     .kajyougakiCheck-erea {
         margin-top: 80px;
         margin-bottom: 80px;
     }

     .kajyougakiCheck-erea .parent {
         margin: 8px 0px;
         justify-content: left;
     }

     .section-title {
         font-size: 1.5rem;
         text-align: center;
         margin-bottom: 4px;
     }


     .section-title .midashi-tensen {
         width: 80vw;
         font-size: 1.4rem;
     }

     .section-title h2 {
         font-size: 1.8rem;
         margin: 0px;
         text-align: center;
     }

     .mondaiteikis {
         font-size: 1rem;
     }

     .mondaiteiki-erea span {
         font-size: 2rem;
     }

     .articles-block-erea {
         margin: 32px 0px;
         justify-content: center;
     }

     .articles-block-erea .hukidasi-pink {
         font-size: 1.2rem;
     }


     .articles-block-erea .hukidasi-gray {
         font-size: 1.2rem;
     }


     .akogare-erea .parent {
         margin: 4px 15px 0px -10px;
     }

     .nayami-erea .parent {
         margin: 16px 15px 0px -10px;
     }

     .articles-block {
         width: 90vw;
     }

     .info-erea {
         margin-top: 0px;
     }

     .info-erea img {
         display: none;
     }


     .bg-sakura .contents-erea {
         line-height: 2rem;
         font-size: 1rem;
     }



     .yami-erea {
         padding-top: 0px;
         padding-bottom: 80px;
     }

     .yami-erea .broken-paper {
         margin-top: 64px;
     }

     .yami-erea .question-erea {
         text-align: center;
     }

     .yami-erea .question-erea img {
         width: 80%;
         margin: 0 auto;
     }


     .zasetuPoint-erea {
         margin-top: 0px;
         margin-bottom: 0px;

     }

     .zasetuPoint-bg {
         margin-top: 80px;
         padding: 16px;
         text-align: left;
     }

     .zasetuPoint-erea .parent div {
         font-size: 1rem;
     }

     .zasetuPoint-erea .cost-point {
         margin-top: 80px;
         font-size: 1rem;
         line-height: 1.5rem;
         text-align: center;
     }


     .img-supportYou {
         width: 80vw;
         margin: 0 auto;
         padding-top: 40px;
         padding-bottom: 40px;
     }

     .introduction-nekonote .font-NonSerif {
         font-weight: 800;
         font-size: 1.2rem;
     }


     .introduction-nekonote .article .detail {
         padding-left: 0px;
         padding-top: 20px;
     }

     .gaiyou-contnts-erea {
         padding: 56px 8px;
     }

     .gaiyou-contents li {
         font-size: 1.2rem;
     }

     .gaiyou-contents div {
         padding-left: 10px;
     }

     .section-subtitle h3 {
         font-size: 1.35rem;
     }

     .bt-otoiawase a {
         border-radius: 15px;
         padding: 8px 12px;
     }

     .contacts-erea {
         display: grid;
         margin: 0 4px;
     }

     .contact {
         justify-content: left;
         margin: 8px 0;
     }

     .contacts-erea a {
         font-size: 0.8rem;
     }

 }