@charset "utf-8";
/*フワッとエフェクト*/
.effect {
    animation: fadein 2s ease-in-out 0s normal forwards;
  }
  @keyframes fadein {
    0% {
      opacity: 0;
      transform: translateY(20px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);      
    }
  }
/*スクロールするとフワッとエフェクト*/
.scroll_up {
    transition: 0.8s ease-in-out;
    transform: translateY(30px);
    opacity: 0;
  }
  .scroll_up.on {
    transform: translateY(0);
    opacity: 1.0;
  }
  .timing02 {transition-delay: .6s;}
  .timing03 {transition-delay: 1.2s;}
/*グレーの背景*/
.content1 {
    background-color: #f5f6f7;
}
.content2 {
    background-color: #f2e0d5;
}
.content3 {
    background-color: #f5edf3;
}
.content5 {
    background-color: #fff5ea;
}
a {
    text-decoration: none;
}
/*タイトルと説明*/
.cb-logo {
    font-weight: 500;
    font-size: 2.3em;
    letter-spacing: 0.1em;
}
.cb-text {
    font-size: clamp(11px,1.43vw, 15px);
}
/*ノートパソコンの画像*/
.np-img {
    width: clamp(170px, 36.5vw, 400px);
    height: auto;
}
/*完全初心者向け*/
.m-t-text {
    font-size: clamp(34px, 3.6vw, 56px);
    letter-spacing: 0.17em;
}
.m-b-text {
    font-size: clamp(22px, 2vw, 40px);
    letter-spacing: clamp(0.7px, 0.1vw, 0.9px);
}
.sub-text {
    font-size: clamp(14px, 1.6vw, 23px);
    letter-spacing: 0.13em;
}
/*グリーンのリンク*/
.green-link {
    background-color: #3dcfd4;
    width: clamp(260px, 22vw, 280px);
    height: auto;
    line-height: 60px;
}
.l-green-link {
    background-color: #3dcfd4;
    width: clamp(300px, 28.8vw, 345px);
    height: auto;
    line-height: 60px;
}
.green-link-sp {
    background-color: #3dcfd4;
    width: clamp(316px, 51vw, 620px);
    height: auto;
    font-size: clamp(14px, 2.5vw, 20px);
}
/*デスクトップPCのとこ*/
.blue-bar {
    color: #3dcfd4;
}
.ac {
    font-size: clamp(12px, 1.4vw, 21px);
}
.ac-tt {
    font-size: clamp(16px, 2.1vw, 35px);
    letter-spacing: 0.15em;
}
.ac-bt {
    font-size: clamp(32px, 4vw, 48px);
}
/*ポイント1〜３*/
.point {
    font-weight: 500;
    background: linear-gradient(transparent 55%, yellow 45%);
}
.p-text {
    font-size: clamp(13.5px, 1.6vw, 14.5px);
    line-height: 2.3em;
}
/*教科書の画像*/
.t-img {
    width: 70%;
    height: auto;
}
/*教科書のとこの説明*/
.c2-main-text {
    font-size: clamp(24px, 2.1vw, 26px);
    font-weight: 700;
}
.c2-sub-text {
    font-size: clamp(13.5px, 1.34vw, 19px);
    line-height: 2.5em;
}
/*3つのメリット*/
.tb {
    font-size: clamp(12px, 2.5vw, 20px);
}
.tb-tt {
    font-size: clamp(18px, 3.5vw, 30px);
    letter-spacing: 0.1em;
}
.tb-bt {
    font-size: clamp(30px, 5.4vw, 42px);
    letter-spacing: 0.1em;
}
/*自走力*/
.c-p {
    background-color: #e0eaff;
    border-radius: 5%;
    height: clamp(360px, 45vw, 500px);
}
/*仲間たち*/
.c-g {
    background-color: #f4f8d8;
    border-radius: 5%;
    height: clamp(360px, 45vw, 500px);
}
/*キャリア*/
.c-b {
    background-color: #faf3eb;
    border-radius: 5%;
    height: clamp(360px, 45vw, 500px);
}
.c-text {
    font-size: 0.95em;
    line-height: 2.0em;
}
/*二人でバンザイ*/
.price {
    font-size: clamp(44px, 6.5vw, 56px);
    color: #e51642;
}
.yen {
    color: #e51642;
}
.monthe {
    color: #e51642;
}
.kakeru {
    font-size: clamp(30px, 4.1vw, 38px);
    color: #e51642;
}
.c-p3 {
    font-size: clamp(11.8px, 2vw, 17px);
    line-height: 2.5em;
}
.c-p4 {
    color: #278f84;
}
/*創業者の思い*/
.ph {
    font-size: clamp(12px, 2.5vw, 20px);
}
.ph-tt {
    font-size: clamp(16px, 3.5vw, 30px);
    letter-spacing: 0.1em;
}
.ph-bt {
    font-size: clamp(28px, 4.8vw, 48px);
}
.cm {
    font-size: clamp(11px, 2.3vw, 18px);
}
.cm-tt {
    font-size: clamp(16px, 3vw, 26px);
}
.cm-bt {
    font-size: clamp(28px, 5vw, 46px);
}
.cm, .cm-tt, .cm-bt {
    letter-spacing: 0.1em;
}
.code-life-start, .code-life-start:hover, .code-life-start:active {
    color: #a9eaec;
}
/*レスポンシブ*/
@media (max-width: 768px) {
    /*二人でバンザイ、スマホ*/
    .bg-img-purple {
        width: 100%;
        height: auto;
        padding-top: 170%;
        background-image: url("images-bootstrap/images/banner02-bg-sp.jpeg");
        background-repeat: no-repeat;
        background-size: contain;
        margin-top: 20%;
        margin-bottom: -50%;
        }
    .bg-img-purple-text {
        margin-top: -190%;
        }   
    /*創業者のお思いの画像とテキストの重なり*/  
    .content4 {
        background-image: url("images-bootstrap/images/bg_color-sp.jpeg");
        background-size: 130%;
        background-repeat: no-repeat;
        position: relative;
        height: 800px;
        }
    .box {
        width: 345px;
        height: 300px;
        font-size: 14px;
        background-color: white;
        box-shadow: 15px -15px rgba(255,255,255,0.5);
        left: 1.5%;
        top: 100%;
        }
        .box-p {
            font-size: 13px;
        }
        /*マナブさん紹介*/
        .manabu-info {
            background-color: #dffdff;
            margin-top: 20%;
            border-radius: 5%;
        }
        .m-text-box {
            position: relative;  
            padding: 30% 9% 15%;
        }
        .m-text {
            font-size: 14px;
        }
        .m-img {
            width: 50%;
            border-radius: 50%;
            position: absolute;
            left: 25%;
            top: -28%;
        }
        /*みったにさん照会*/
        .mittani-info {
            background-color: #f4fcd2;
            margin-top: 40%;
            border-radius: 5%;
        }
        .mi-text-box {
            position: relative;  
            padding: 30% 9% 15%;
        }
        .mi-text {
            font-size: 14px;
        }
        .mi-img {
            width: 50%;
            border-radius: 50%;
            position: absolute;
            left: 25%;
            top: -28%;
        }
        /*スライド前のテキスト*/
        .cb-com-text  {
            font-size: 20px;
        }
        /*メンバー紹介のスライドショー*/
        .swiper-container {
            position: relative;
            margin-bottom: 50px;
        }
        .swiper {
            max-width: 100%;
            margin: 0 42px;
            overflow: hidden;
          }
        :root {
            --swiper-navigation-color: black;  
            --swiper-pagination-color: #a9eaec;
            --swiper-pagination-bullet-size: 12px;
            --swiper-pagination-bullet-width: 12px;
            --swiper-pagination-bullet-height: 12px;
        }
        /* スライド */
        .swiper-slide {
        flex-shrink: 0;
        width: 100%;
        height: 100%;
        transition-property: transform;
        }
        /*メンバーの写真*/
        .swiper-slide img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        }
        /*メンバーの名前*/
        .swiper-slide span {
        font-size: 12px;
        font-weight: 900;
        }
        /*メンバーのニックネーム*/
        .swiper-slide p {
        width: 100%;
        font-size: 10px;
        }
        .swiper-pagination {
        padding: 50px 0;
        }
        /* ページネーション */
        .swiper-pagination-fraction,
        .swiper-pagination-custom,
        .swiper-horizontal > .swiper-pagination-bullets,
        .swiper-pagination-bullets.swiper-pagination-horizontal {
        top: 40%;
        left: 0%;
        width: 100%;        
        }
        .swiper-button-prev:after {
        position: absolute;
        top: 0%;
        left: -70%;
        font-size: 20px;
        font-weight: 900;
        color: black;
        margin-left: 20px; /* マージンを追加 */
        }
        .swiper-button-next:after {
        position: absolute;
        left: 60%;
        top: 0;
        font-size: 20px;
        font-weight: 900;
        color: black;
        margin-right: 20px;
        }
        .swiper-button-prev, .swiper-button-next {
        padding: 50px 0;
        }
        /*みんなでばんざい*/
        .wait-box {
            background-image: url("images-bootstrap/images/banner03-bg-top-sp.jpeg"), url("images-bootstrap/images/banner03-bg-top-sp2.jpeg"), url("images-bootstrap/images/banner03-bg-top-sp2.jpeg"), url("images-bootstrap/images/banner03-bg-under.jpeg");
            background-position: left top, left 106px, left 172px, left 239px;
            background-repeat: no-repeat;
            background-size: contain ;
            width: 100%;
            height: 317px;
          }
          .wait-text1 {
            font-size: 20px;
            color: #e51642;
        }
          .wait-text2 {
              font-size: 12px;
          }
          .wait-text3 {
              color: #278f84;
          }
          .green-link-wait {
              background-color: #3dcfd4;
              width: 300px;
              height: 50px;
              font-size: 18px;
              padding-top: 12px;
          }
        /*よくある質問*/
        /*アコーディオン*/
        #accordion {
            background: white;
            border-radius: 15px;
        }
        .accordion-container {
            position: relative;
            width: 100%;
            outline: 0;
            cursor: pointer;    
        }
        .accordion-container .accordion-title {
            display: block;
            position: relative;
            margin: 0;
            padding: 1.5em 2em 1.5em 3.5em;
            font-size: 0.85em;
            line-height: 1.7em;
            font-weight: bold;
            background: white;
            cursor: pointer;
            border-radius: 15px;
        }
        .accordion-container .accordion-title:hover,
        .accordion-container .accordion-title:active,
        .accordion-container .content-entry.open .accordion-title {
            background: white;
            border-radius: 15px;
        }
        .accordion-title{
            position: relative;
        }
        .accordion-title:after {
            content: "";
            position: absolute;
            right: 25px;
            top: 41%;
            transition: all 0.2s ease-in-out;
            display: block;
            width: 10px;
            height: 10px;
            border-top: solid 2px black;
            border-right: solid 2px black;
            -webkit-transform: rotate(135deg);
            transform: rotate(135deg);
        }
        .accordion-title::before {
            content: "Q";
            color: #cc3499;
            font-size: 1.5em;
            font-weight: bold;
            position: absolute;
            top: 28%;
            left: 5%;
        }
        /*Q&AのAの部分*/
        /*A4タイプ*/
        .accordion-content-A4 p::before {
            content: "A";
            color: #778295;
            font-size: 1.5em;
            font-weight: bold;
            position: absolute;
            top: 64%;
            left: 6%;
        }
        .accordion-title.open:after {
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
            top: 45%;
        }
        .accordion-content-A4 {
            display: none;
            padding: 2.3125em 0.75em 0.5em 3.5em;
            font-size: 0.85em;
            background-color: white;
            line-height: 1.7em;
            margin-bottom: 2em;
            border-radius: 0 0 15px 15px;
        }
        .accordion-content-A4:hover {
            border-radius: 0 0 15px 15px;
        }
        /*A5タイプ*/
        .accordion-content-A5 p::before {
            content: "A";
            color: #778295;
            font-size: 1.5em;
            font-weight: bold;
            position: absolute;
            top: 60.5%;
            left: 6%;
        }
        .accordion-title.open:after {
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
            top: 45%;
        }
        .accordion-content-A5 {
            display: none;
            padding: 2.3125em 0.5em 0.5em 3.5em;
            font-size: 0.85em;
            background-color: white;
            line-height: 1.7em;
            margin-bottom: 2em;
            border-radius: 0 0 15px 15px;
        }
        .accordion-content-A5:hover {
            border-radius: 0 0 15px 15px;
        }
        /*A9タイプ*/
        .accordion-content-A9 p::before {
            content: "A";
            color: #778295;
            font-size: 1.5em;
            font-weight: bold;
            position: absolute;
            top: 59.5%;
            left: 6%;
        }
        .accordion-title.open:after {
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
            top: 45%;
        }
        .accordion-content-A9 {
            display: none;
            padding: 2.3125em 0.5em 0.5em 3.5em;
            font-size: 0.85em;
            background-color: white;
            line-height: 1.7em;
            margin-bottom: 2em;
            border-radius: 0 0 15px 15px;
        }
        .accordion-content-A9:hover {
            border-radius: 0 0 15px 15px;
        }
        /*A2タイプ*/
        .accordion-content-A2 p::before {
            content: "A";
            color: #778295;
            font-size: 1.5em;
            font-weight: bold;
            position: absolute;
            top: 63%;
            left: 6%;
        }
        .accordion-title.open:after {
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
            top: 45%;
        }
        .accordion-content-A2 {
            display: none;
            padding: 2.3125em 0.5em 0.5em 3.5em;
            font-size: 0.85em;
            background-color: white;
            line-height: 1.7em;
            margin-bottom: 2em;
            border-radius: 0 0 15px 15px;
        }
        .accordion-content-A2:hover {
            border-radius: 0 0 15px 15px;
        }
        /*A3タイプ*/
        .accordion-content-A3 p::before {
            content: "A";
            color: #778295;
            font-size: 1.5em;
            font-weight: bold;
            position: absolute;
            top: 62%;
            left: 6%;
        }
        .accordion-title.open:after {
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
            top: 45%;
        }
        .accordion-content-A3 {
            display: none;
            padding: 2.3125em 0.5em 0.5em 3.5em;
            font-size: 0.85em;
            background-color: white;
            line-height: 1.7em;
            margin-bottom: 2em;
            border-radius: 0 0 15px 15px;
        }
        .accordion-content-A3:hover {
            border-radius: 0 0 15px 15px;
        }
        /* CSS for CodePen */
        .accordion-container {
            width: 330px;
            margin: 1.875em auto;
        }
        /*フッター*/
        .f-logo {
            font-size: 20px;
            font-weight: 500;
            letter-spacing: 0.1em;
        }
        .f-text {
            font-size: 12px;
            letter-spacing: 0.08em;
        }
    }
@media (min-width: 769px) and (max-width: 820px) {
    /*二人でバンザイ、タブレット縦*/
    .bg-img-purple {
        width: 100%;
        height: 0;
        padding-top: 61%;
        background-image: url("images-bootstrap/images/banner02-bg-pc.jpeg");
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center bottom;
        }
    .bg-img-purple-text {
        margin-top: -55%;
        }
    /*創業者の想いの画像とテキストの重なり*/
    .content4 {
        background-image: url("images-bootstrap/images/bg_color-pc.jpeg");
        background-size: cover;
        background-position: bottom;
        position: relative;
        height: 800px;
    }
    .manabu-img {
        position: absolute;
        left: 48%; top: 20%;
        z-index: 10;
    }
    .box {
        width: 450px;
        height: 450px;
        padding: 30px;
        font-size: 18px;
        background-color: white;
        box-shadow: 15px -15px rgba(255,255,255,0.5);
        position: absolute;
        left: 2%;
        top: 30%;
        z-index: 20;
        }
        /*マナブさん紹介*/
        .manabu-info {
            background-color: #dffdff;
            margin-top: 50%;
            border-radius: 5%;
        }
        .m-text-box {
            position: relative;  
            padding: 30% 9% 15%;
        }
        .m-text {
            font-size: 16px;
        }
        .m-img {
            width: 50%;
            border-radius: 50%;
            position: absolute;
            left: 25%;
            top: -28%;
        }
        /*みったにさん照会*/
        .mittani-info {
            background-color: #f4fcd2;
            margin-top: 50%;
            border-radius: 5%;
        }
        .mi-text-box {
            position: relative;  
            padding: 30% 9% 15%;
        }
        .mi-text {
            font-size: 16px;
        }
        .mi-img {
            width: 50%;
            border-radius: 50%;
            position: absolute;
            left: 25%;
            top: -28%;
        }
        /*スライド前のテキスト*/
        .cb-com-text  {
            font-size: 38px;
        }
        /*メンバー紹介のスライドショー*/
        /* スライド */
        .swiper-container {
            position: relative;
            margin-bottom: 175px;
        }
        .swiper {
            max-width: 100%;
            margin: 0 42px;
            overflow: hidden;
            }
        :root {
            --swiper-navigation-color: black;  
            --swiper-pagination-color: #a9eaec;
            --swiper-pagination-bullet-size: 12px;
            --swiper-pagination-bullet-width: 12px;
            --swiper-pagination-bullet-height: 12px;
        }        
        .swiper-slide {
            flex-shrink: 0;
            width: 100%;
            height: 100%;
            transition-property: transform;
        }
        /*メンバーの写真*/
        .swiper-slide img {
            width: 100px;
            height: 100px;
            border-radius: 50%;
        }
        /*メンバーの名前*/
        .swiper-slide span {
            font-size: 20px;
            font-weight: 900;
        }
        /*メンバーのニックネーム*/
        .swiper-slide p {
            width: 100%;
            font-size: 16px;
        }
        /* ページネーション */
        .swiper-pagination {
            padding: 50px 0;
          }
        .swiper-pagination-fraction,
        .swiper-pagination-custom,
        .swiper-horizontal > .swiper-pagination-bullets,
        .swiper-pagination-bullets.swiper-pagination-horizontal {
            top: 90%;
            left: 0%;
            width: 100%;
        }
        .swiper-button-prev:after {
            position: absolute;
            top: 0;
            left: -70%;
            font-size: 20px;
            font-weight: 900;
            color: black;
            margin-left: 20px; /* マージンを追加 */
        }
        .swiper-button-next:after {
            position: absolute;
            left: 60%;
            top: 0;
            font-size: 20px;
            font-weight: 900;
            color: black;
            margin-right: 20px;
        }
        .swiper-button-prev, .swiper-button-next {
            padding: 50px 0;
        }
        /*みんなでばんざい*/
        .wait-box {
            background-image: url("images-bootstrap/images/banner03-bg-top-sp.jpeg"), url("images-bootstrap/images/banner03-bg-top-sp2.jpeg"), url("images-bootstrap/images/banner03-bg-top-sp2.jpeg"), url("images-bootstrap/images/banner03-bg-under.jpeg");
            background-position: left top, left 106px, left 172px, left 324px;
            background-repeat: no-repeat;
            background-size: contain ;
            width: 100%;
            height: 501px;
          }
          .wait-text1 {
            font-size: 28px;
            color: #e51642;
        }
          .wait-text2 {
              font-size: 18px;
          }
          .wait-text3 {
              color: #278f84;
              font-size: 16px;
          }
          .green-link-wait {
              background-color: #3dcfd4;
              width: 380px;
              height: 70px;
              font-size: 26px;
              padding-top: 12px;
          }
        /*よくある質問*/
        /*アコーディオン*/
        #accordion {
            background: white;
            border-radius: 15px;
        }
        .accordion-container {
            position: relative;
            width: 100%;
            outline: 0;
            cursor: pointer;    
        }
        .accordion-container .accordion-title {
            display: block;
            position: relative;
            margin: 0;
            padding: 1.5em 2em 1.5em 3.5em;
            font-size: 1.48em;
            line-height: 1.7em;
            font-weight: bold;
            background: white;
            cursor: pointer;
            border-radius: 15px;
        }
        .accordion-container .accordion-title:hover,
        .accordion-container .accordion-title:active,
        .accordion-container .content-entry.open .accordion-title {
            background: white;
            border-radius: 15px;
        }
        .accordion-title{
            position: relative;
        }
        .accordion-title:after {
            content: "";
            position: absolute;
            right: 25px;
            top: 41%;
            transition: all 0.2s ease-in-out;
            display: block;
            width: 10px;
            height: 10px;
            border-top: solid 2px black;
            border-right: solid 2px black;
            -webkit-transform: rotate(135deg);
            transform: rotate(135deg);
        }
        .accordion-title::before {
            content: "Q";
            color: #cc3499;
            font-size: 1.5em;
            font-weight: bold;
            position: absolute;
            top: 28%;
            left: 4%;
        }
        /*Q&AのAの部分*/
        /*A4タイプ*/
        .accordion-content-A4 p::before {
            content: "A";
            color: #778295;
            font-size: 1.5em;
            font-weight: bold;
            position: absolute;
            top: 70%;
            left: 4%;
        }
        .accordion-title.open:after {
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
            top: 45%;
        }
        .accordion-content-A4 {
            display: none;
            padding: 2.3125em 0.75em 0.5em 3.5em;
            font-size: 1.3em;
            background-color: white;
            line-height: 1.7em;
            margin-bottom: 2em;
            border-radius: 0 0 15px 15px;
        }
        .accordion-content-A4:hover {
            border-radius: 0 0 15px 15px;
        }
        /*A5タイプ*/
        .accordion-content-A5 p::before {
            content: "A";
            color: #778295;
            font-size: 1.5em;
            font-weight: bold;
            position: absolute;
            top: 66%;
            left: 4%;
        }
        .accordion-title.open:after {
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
            top: 45%;
        }
        .accordion-content-A5 {
            display: none;
            padding: 2.3125em 0.5em 0.5em 3.5em;
            font-size: 1.3em;
            background-color: white;
            line-height: 1.7em;
            margin-bottom: 2em;
            border-radius: 0 0 15px 15px;
        }
        .accordion-content-A5:hover {
            border-radius: 0 0 15px 15px;
        }
        /*A9タイプ*/
        .accordion-content-A9 p::before {
            content: "A";
            color: #778295;
            font-size: 1.5em;
            font-weight: bold;
            position: absolute;
            top: 62.5%;
            left: 4%;
        }
        .accordion-title.open:after {
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
            top: 45%;
        }
        .accordion-content-A9 {
            display: none;
            padding: 2.3125em 0.5em 0.5em 3.5em;
            font-size: 1.3em;
            background-color: white;
            line-height: 1.7em;
            margin-bottom: 2em;
            border-radius: 0 0 15px 15px;
        }
        .accordion-content-A9:hover {
            border-radius: 0 0 15px 15px;
        }
        /*A2タイプ*/
        .accordion-content-A2 p::before {
            content: "A";
            color: #778295;
            font-size: 1.7em;
            font-weight: bold;
            position: absolute;
            top: 67%;
            left: 4%;
        }
        .accordion-title.open:after {
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
            top: 45%;
        }
        .accordion-content-A2 {
            display: none;
            padding: 2.3125em 0.5em 0.5em 3.5em;
            font-size: 1.3em;
            background-color: white;
            line-height: 1.7em;
            margin-bottom: 2em;
            border-radius: 0 0 15px 15px;
        }
        .accordion-content-A2:hover {
            border-radius: 0 0 15px 15px;
        }
        /*A3タイプ*/
        .accordion-content-A3 p::before {
            content: "A";
            color: #778295;
            font-size: 1.5em;
            font-weight: bold;
            position: absolute;
            top: 66%;
            left: 4%;
        }
        .accordion-title.open:after {
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
            top: 45%;
        }
        .accordion-content-A3 {
            display: none;
            padding: 2.3125em 0.5em 0.5em 3.5em;
            font-size: 1.3em;
            background-color: white;
            line-height: 1.7em;
            margin-bottom: 2em;
            border-radius: 0 0 15px 15px;
        }
        .accordion-content-A3:hover {
            border-radius: 0 0 15px 15px;
        }
        /* CSS for CodePen */
        .accordion-container {
            width: 770px;
            margin: 1.875em auto;
        }
        /*フッター*/
        .f-logo {
            font-size: 28px;
            font-weight: 500;
            letter-spacing: 0.1em;
        }
        .f-text {
            font-size: 16px;
            letter-spacing: 0.08em;
        }
    }
@media (min-width: 821px) and (max-width: 1180px) {
    /*二人でバンザイ、タブレット横*/
    .bg-img-purple {
        width: 100%;
        height: 0;
        padding-top: 40%;
        background-image: url("images-bootstrap/images/banner02-bg-pc.jpeg");
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center bottom;
        }
    .bg-img-purple-text {
        margin-top: -40%;
        }   
        /*創業者のお思いの画像とテキストの重なり*/
        .content4 {
            background-image: url("images-bootstrap/images/bg_color-pc.jpeg");
            background-size: cover;
            background-position: top;
            position: relative;
            height: 1000px;
        }
        .manabu-img {
            position: absolute;
            left: 48%; top: 18%;
            z-index: 10;
        }
        .box {
            width: 600px;
            height: 400px;
            padding: 40px;
            font-size: 18.5px;
            background-color: white;
            box-shadow: 15px -15px rgba(255,255,255,0.5);
            position: absolute;
            left: 2%;
            top: 30%;
            z-index: 20;
            }   
        /*マナブさん紹介*/
        .manabu-info {
            background-color: #dffdff;
            margin-top: 50%;
            border-radius: 5%;
        }
        .m-text-box {
            position: relative;  
            padding: 30% 16% 15%;
        }
        .m-text {
            font-size: 16px;
        }
        .m-img {
            width: 50%;
            border-radius: 50%;
            position: absolute;
            left: 25%;
            top: -28%;
        }
        /*みったにさん照会*/
        .mittani-info {
            background-color: #f4fcd2;
            margin-top: 50%;
            border-radius: 5%;
        }
        .mi-text-box {
            position: relative;  
            padding: 30% 16% 15%;
        }
        .mi-text {
            font-size: 16px;
        }
        .mi-img {
            width: 50%;
            border-radius: 50%;
            position: absolute;
            left: 25%;
            top: -28%;
        }
        /*スライド前のテキスト*/
        .cb-com-text  {
            font-size: 38px;
        }
        /*メンバー紹介のスライドショー*/
        .swiper-container {
            position: relative;
            margin-bottom: 150px;
        }
        .swiper {
            max-width: 100%;
            margin: 0 42px;
            overflow: hidden;
            position: relative;
            }
        :root {
            --swiper-navigation-color: black;  
            --swiper-pagination-color: #a9eaec;
            --swiper-pagination-bullet-size: 12px;
            --swiper-pagination-bullet-width: 12px;
            --swiper-pagination-bullet-height: 12px;
        }        
        /* スライド */
        .swiper-slide {
            flex-shrink: 0;
            width: 100%;
            height: 100%;
            transition-property: transform;
        }
        /*メンバーの写真*/
        .swiper-slide img {
            width: 160px;
            height: 160px;
            border-radius: 50%;
        }
        /*メンバーの名前*/
        .swiper-slide span {
            font-size: 22px;
            font-weight: 900;
        }
        /*メンバーのニックネーム*/
        .swiper-slide p {
            width: 100%;
            font-size: 15px;
        }
        .swiper-pagination {
            padding: 50px 0;
        }
        /* ページネーション */
        .swiper-pagination-fraction,
        .swiper-pagination-custom,
        .swiper-horizontal > .swiper-pagination-bullets,
        .swiper-pagination-bullets.swiper-pagination-horizontal {
            top: 60%;
            left: 0%;
            width: 100%;
            margin-top: 60px;
        }
        .swiper-button-prev:after {
            position: absolute;
            top: 20%;
            left: 0%;
            font-size: 20px;
            font-weight: 900;
            color: black;
            margin-left: 20px; /* マージンを追加 */
        }
        .swiper-button-next:after {
            position: absolute;
            top: 20%;
            left: 60%;
            font-size: 20px;
            font-weight: 900;
            color: black;
            margin-right: 20px;
        }
        .swiper-button-prev, .swiper-button-next {
            padding: 50px 0;
        }
        /*みんなでばんざい*/
        .wait-box {
            background-image: url("images-bootstrap/images/banner03-bg-top-sp.jpeg"), url("images-bootstrap/images/banner03-bg-top-sp2.jpeg"), url("images-bootstrap/images/banner03-bg-top-sp2.jpeg"), url("images-bootstrap/images/banner03-bg-under.jpeg");
            background-position: left top, left 106px, left 172px, left 429px;
            background-repeat: no-repeat;
            background-size: contain ;
            width: 100%;
            height: 686px;
          }
          .wait-text1 {
            font-size: 28px;
            color: #e51642;
            padding-top: 70px;
        }
          .wait-text2 {
              font-size: 18px;
          }
          .wait-text3 {
              color: #278f84;
              font-size: 16px;
          }
          .green-link-wait {
              background-color: #3dcfd4;
              width: 380px;
              height: 70px;
              font-size: 26px;
              padding-top: 12px;
          }
        /*よくある質問*/
        /*アコーディオン*/
        #accordion {
            background: white;
            border-radius: 15px;
        }
        .accordion-container {
            position: relative;
            width: 100%;
            outline: 0;
            cursor: pointer;    
        }
        .accordion-container .accordion-title {
            display: block;
            position: relative;
            margin: 0;
            padding: 1.5em 2em 1.5em 3.5em;
            font-size: 1.48em;
            line-height: 1.7em;
            font-weight: bold;
            background: white;
            cursor: pointer;
            border-radius: 15px;
        }
        .accordion-container .accordion-title:hover,
        .accordion-container .accordion-title:active,
        .accordion-container .content-entry.open .accordion-title {
            background: white;
            border-radius: 15px;
        }
        .accordion-title{
            position: relative;
        }
        .accordion-title:after {
            content: "";
            position: absolute;
            right: 25px;
            top: 41%;
            transition: all 0.2s ease-in-out;
            display: block;
            width: 10px;
            height: 10px;
            border-top: solid 2px black;
            border-right: solid 2px black;
            -webkit-transform: rotate(135deg);
            transform: rotate(135deg);
        }
        .accordion-title::before {
            content: "Q";
            color: #cc3499;
            font-size: 1.5em;
            font-weight: bold;
            position: absolute;
            top: 28%;
            left: 3%;
        }
        /*Q&AのAの部分*/
        /*A4タイプ*/
        .accordion-content-A4 p::before {
            content: "A";
            color: #778295;
            font-size: 1.5em;
            font-weight: bold;
            position: absolute;
            top: 66%;
            left: 3%;
        }
        .accordion-title.open:after {
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
            top: 45%;
        }
        .accordion-content-A4 {
            display: none;
            padding: 2.3125em 0.75em 0.5em 3.5em;
            font-size: 1.3em;
            background-color: white;
            line-height: 1.7em;
            margin-bottom: 2em;
            border-radius: 0 0 15px 15px;
        }
        .accordion-content-A4:hover {
            border-radius: 0 0 15px 15px;
        }
        /*A5タイプ*/
        .accordion-content-A5 p::before {
            content: "A";
            color: #778295;
            font-size: 1.5em;
            font-weight: bold;
            position: absolute;
            top: 66%;
            left: 3%;
        }
        .accordion-title.open:after {
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
            top: 45%;
        }
        .accordion-content-A5 {
            display: none;
            padding: 2.3125em 0.5em 0.5em 3.5em;
            font-size: 1.3em;
            background-color: white;
            line-height: 1.7em;
            margin-bottom: 2em;
            border-radius: 0 0 15px 15px;
        }
        .accordion-content-A5:hover {
            border-radius: 0 0 15px 15px;
        }
        /*A9タイプ*/
        .accordion-content-A9 p::before {
            content: "A";
            color: #778295;
            font-size: 1.5em;
            font-weight: bold;
            position: absolute;
            top: 62.5%;
            left: 3%;
        }
        .accordion-title.open:after {
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
            top: 45%;
        }
        .accordion-content-A9 {
            display: none;
            padding: 2.3125em 0.5em 0.5em 3.5em;
            font-size: 1.3em;
            background-color: white;
            line-height: 1.7em;
            margin-bottom: 2em;
            border-radius: 0 0 15px 15px;
        }
        .accordion-content-A9:hover {
            border-radius: 0 0 15px 15px;
        }
        /*A2タイプ*/
        .accordion-content-A2 p::before {
            content: "A";
            color: #778295;
            font-size: 1.7em;
            font-weight: bold;
            position: absolute;
            top: 67%;
            left: 3%;
        }
        .accordion-title.open:after {
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
            top: 45%;
        }
        .accordion-content-A2 {
            display: none;
            padding: 2.3125em 0.5em 0.5em 3.5em;
            font-size: 1.3em;
            background-color: white;
            line-height: 1.7em;
            margin-bottom: 2em;
            border-radius: 0 0 15px 15px;
        }
        .accordion-content-A2:hover {
            border-radius: 0 0 15px 15px;
        }
        /*A3タイプ*/
        .accordion-content-A3 p::before {
            content: "A";
            color: #778295;
            font-size: 1.5em;
            font-weight: bold;
            position: absolute;
            top: 66%;
            left: 4%;
        }
        .accordion-title.open:after {
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
            top: 45%;
        }
        .accordion-content-A3 {
            display: none;
            padding: 2.3125em 0.5em 0.5em 3.5em;
            font-size: 1.3em;
            background-color: white;
            line-height: 1.7em;
            margin-bottom: 2em;
            border-radius: 0 0 15px 15px;
        }
        .accordion-content-A3:hover {
            border-radius: 0 0 15px 15px;
        }
        /* CSS for CodePen */
        .accordion-container {
            width: 1100px;
            margin: 1.875em auto;
        }
        /*フッター*/
        .f-logo {
            font-size: 28px;
            font-weight: 500;
            letter-spacing: 0.1em;
        }
        .f-text {
            font-size: 16px;
            letter-spacing: 0.08em;
        }
    }
@media (min-width: 1181px) and (max-width: 1280px) {
    /*二人でバンザイ、PC*/
    .bg-img-purple {
        width: 100%;
        height: 0;
        padding-top: 39%;
        background-image: url("images-bootstrap/images/banner02-bg-pc.jpeg");
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center bottom;
        }
    .bg-img-purple-text {
        margin-top: -35%;
        }   
    /*創業者のお思いの画像とテキストの重なり*/
    .content4 {
    background-image: url("images-bootstrap/images/bg_color-pc.jpeg");
    background-size: cover;
    position: relative;
    padding-bottom: 550px;
        }
        .manabu-img {
        position: absolute;
        left: 47%; top: 27%;
        z-index: 10;
        }
    .box {
        width: 600px;
        height: 400px;
        padding: 40px;
        font-size: 18.5px;
        background-color: white;
        box-shadow: 30px -30px rgba(255,255,255,0.5);
        position: absolute;
        left: 6%;
        top: 40%;
        z-index: 20;
        }  
    /*マナブさん紹介*/
    .manabu-info {
        background-color: #dffdff;
        margin-top: 50%;
        border-radius: 5%;
        }
    .m-text-box {
        position: relative;  
        padding: 30% 16% 11%;
        }
    .m-text {
        font-size: 17px;
        }
    .m-img {
        width: 50%;
        border-radius: 50%;
        position: absolute;
        left: 25%;
        top: -28%;
        }
    /*みったにさん照会*/
    .mittani-info {
        background-color: #f4fcd2;
        margin-top: 50%;
        border-radius: 5%;
        }
    .mi-text-box {
        position: relative;  
        padding: 30% 16% 11%;
        }
    .mi-text {
        font-size: 17px;
        }
    .mi-img {
        width: 50%;
        border-radius: 50%;
        position: absolute;
        left: 25%;
        top: -28%;
        }
    /*スライド前のテキスト*/
    .cb-com-text  {
        font-size: 38px;
    }
    /*メンバー紹介のスライドショー*/
    /* スライド */
    .swiper-container {
        position: relative;
        margin-bottom: 140px;
    }
    .swiper {
        max-width: 100%;
        margin: 0 42px;
        overflow: hidden;
        position: relative;
        }
    :root {
        --swiper-navigation-color: black;  
        --swiper-pagination-color: #a9eaec;
        --swiper-pagination-bullet-size: 12px;
        --swiper-pagination-bullet-width: 12px;
        --swiper-pagination-bullet-height: 12px;
    }        
    .swiper-slide {
        flex-shrink: 0;
        width: 100%;
        height: 100%;
        transition-property: transform;
    }
    /*メンバーの写真*/
    .swiper-slide img {
        width: 160px;
        height: 160px;
        border-radius: 50%;
    }
    /*メンバーの名前*/
    .swiper-slide span {
        font-size: 22px;
        font-weight: 900;
    }
    /*メンバーのニックネーム*/
    .swiper-slide p {
        width: 100%;
        font-size: 15px;
    }
    .swiper-pagination {
        padding: 50px 0;
    }
    /* ページネーション */
    .swiper-pagination-fraction,
    .swiper-pagination-custom,
    .swiper-horizontal > .swiper-pagination-bullets,
    .swiper-pagination-bullets.swiper-pagination-horizontal {
        top: 60%;
        left: 0%;
        width: 100%;
        margin-top: 60px;
    }
    .swiper-button-prev:after {
        position: absolute;
        top: 0%;
        left: 0%;
        font-size: 20px;
        font-weight: 900;
        color: black;
        margin-left: 20px; /* マージンを追加 */
    }
    .swiper-button-next:after {
        position: absolute;
        top: 0%;
        left: 0%;
        font-size: 20px;
        font-weight: 900;
        color: black;
        margin-right: 20px;
    }
    .swiper-button-prev, .swiper-button-next {
        padding: 50px 0;
    }
    /*みんなでばんざい*/
    .wait-box {
        background-image: url("images-bootstrap/images/banner03-bg-top-sp.jpeg"), url("images-bootstrap/images/banner03-bg-top-sp2.jpeg"), url("images-bootstrap/images/banner03-bg-top-sp2.jpeg"), url("images-bootstrap/images/banner03-bg-under.jpeg");
        background-position: left top, left 106px, left 172px, left 429px;
        background-repeat: no-repeat;
        background-size: contain ;
        width: 100%;
        height: 686px;
      }
      .wait-text1 {
        font-size: 28px;
        color: #e51642;
        padding-top: 70px;
    }
      .wait-text2 {
          font-size: 18px;
      }
      .wait-text3 {
          color: #278f84;
          font-size: 16px;
      }
      .green-link-wait {
          background-color: #3dcfd4;
          width: 380px;
          height: 70px;
          font-size: 26px;
          padding-top: 12px;
      }
        /*よくある質問*/
        /*アコーディオン*/
        #accordion {
            background: white;
            border-radius: 15px;
        }
        .accordion-container {
            position: relative;
            width: 100%;
            outline: 0;
            cursor: pointer;    
        }
        .accordion-container .accordion-title {
            display: block;
            position: relative;
            margin: 0;
            padding: 1.5em 2em 1.5em 3.5em;
            font-size: 1.48em;
            line-height: 1.7em;
            font-weight: bold;
            background: white;
            cursor: pointer;
            border-radius: 15px;
        }
        .accordion-container .accordion-title:hover,
        .accordion-container .accordion-title:active,
        .accordion-container .content-entry.open .accordion-title {
            background: white;
            border-radius: 15px;
        }
        .accordion-title{
            position: relative;
        }
        .accordion-title:after {
            content: "";
            position: absolute;
            right: 25px;
            top: 41%;
            transition: all 0.2s ease-in-out;
            display: block;
            width: 10px;
            height: 10px;
            border-top: solid 2px black;
            border-right: solid 2px black;
            -webkit-transform: rotate(135deg);
            transform: rotate(135deg);
        }
        .accordion-title::before {
            content: "Q";
            color: #cc3499;
            font-size: 1.5em;
            font-weight: bold;
            position: absolute;
            top: 28%;
            left: 3%;
        }
        /*Q&AのAの部分*/
        /*A4タイプ*/
        .accordion-content-A4 p::before {
            content: "A";
            color: #778295;
            font-size: 1.5em;
            font-weight: bold;
            position: absolute;
            top: 66%;
            left: 3%;
        }
        .accordion-title.open:after {
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
            top: 45%;
        }
        .accordion-content-A4 {
            display: none;
            padding: 2.3125em 0.75em 0.5em 3.5em;
            font-size: 1.3em;
            background-color: white;
            line-height: 1.7em;
            margin-bottom: 2em;
            border-radius: 0 0 15px 15px;
        }
        .accordion-content-A4:hover {
            border-radius: 0 0 15px 15px;
        }
        /*A5タイプ*/
        .accordion-content-A5 p::before {
            content: "A";
            color: #778295;
            font-size: 1.5em;
            font-weight: bold;
            position: absolute;
            top: 66%;
            left: 3%;
        }
        .accordion-title.open:after {
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
            top: 45%;
        }
        .accordion-content-A5 {
            display: none;
            padding: 2.3125em 0.5em 0.5em 3.5em;
            font-size: 1.3em;
            background-color: white;
            line-height: 1.7em;
            margin-bottom: 2em;
            border-radius: 0 0 15px 15px;
        }
        .accordion-content-A5:hover {
            border-radius: 0 0 15px 15px;
        }
        /*A9タイプ*/
        .accordion-content-A9 p::before {
            content: "A";
            color: #778295;
            font-size: 1.5em;
            font-weight: bold;
            position: absolute;
            top: 62.5%;
            left: 3%;
        }
        .accordion-title.open:after {
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
            top: 45%;
        }
        .accordion-content-A9 {
            display: none;
            padding: 2.3125em 0.5em 0.5em 3.5em;
            font-size: 1.3em;
            background-color: white;
            line-height: 1.7em;
            margin-bottom: 2em;
            border-radius: 0 0 15px 15px;
        }
        .accordion-content-A9:hover {
            border-radius: 0 0 15px 15px;
        }
        /*A2タイプ*/
        .accordion-content-A2 p::before {
            content: "A";
            color: #778295;
            font-size: 1.7em;
            font-weight: bold;
            position: absolute;
            top: 67%;
            left: 3%;
        }
        .accordion-title.open:after {
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
            top: 45%;
        }
        .accordion-content-A2 {
            display: none;
            padding: 2.3125em 0.5em 0.5em 3.5em;
            font-size: 1.3em;
            background-color: white;
            line-height: 1.7em;
            margin-bottom: 2em;
            border-radius: 0 0 15px 15px;
        }
        .accordion-content-A2:hover {
            border-radius: 0 0 15px 15px;
        }
        /*A3タイプ*/
        .accordion-content-A3 p::before {
            content: "A";
            color: #778295;
            font-size: 1.5em;
            font-weight: bold;
            position: absolute;
            top: 66%;
            left: 3%;
        }
        .accordion-title.open:after {
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
            top: 45%;
        }
        .accordion-content-A3 {
            display: none;
            padding: 2.3125em 0.5em 0.5em 3.5em;
            font-size: 1.3em;
            background-color: white;
            line-height: 1.7em;
            margin-bottom: 2em;
            border-radius: 0 0 15px 15px;
        }
        .accordion-content-A3:hover {
            border-radius: 0 0 15px 15px;
        }
        /* CSS for CodePen */
        .accordion-container {
            width: 1100px;
            margin: 1.875em auto;
        }
        /*フッター*/
        .f-logo {
            font-size: 28px;
            font-weight: 500;
            letter-spacing: 0.1em;
        }
        .f-text {
            font-size: 16px;
            letter-spacing: 0.08em;
        }
}
@media (min-width: 1281px) and (max-width: 1980px) {
    /*二人でバンザイ、ワイドPC*/    
    .bg-img-purple {
        width: 100%;
        height: 0;
        padding-top: 39%;
        background-image: url("images-bootstrap/images/banner02-bg-pc.jpeg");
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center bottom;
        }
    .bg-img-purple-text {
        margin-top: -35%;
        }   
    /*創業者のお思いの画像とテキストの重なり*/
    .content4 {
        background-image: url("images-bootstrap/images/bg_color-sp.jpeg");
        background-size: cover;
        background-position: top;
        position: relative;
        height: 800px;
        }
    .manabu-img {
        position: absolute;
        left: 50%; top: 25%;
        z-index: 10;
        }
    .box {
        width: 600px;
        height: 430px;
        padding: 40px;
        font-size: 18.5px;
        background-color: white;
        box-shadow: 30px -30px rgba(255,255,255,0.5);
        position: absolute;
        left: 23%;
        top: 40%;
        z-index: 20;
        }  
    /*マナブさん紹介*/
    .manabu-info {
        background-color: #dffdff;
        margin-top: 50%;
        border-radius: 5%;
        }
    .m-text-box {
        position: relative;  
        padding: 30% 16% 11%;
        }
    .m-text {
        font-size: 17px;
        }
    .m-img {
        width: 50%;
        border-radius: 50%;
        position: absolute;
        left: 25%;
        top: -28%;
        }
    /*みったにさん照会*/
    .mittani-info {
        background-color: #f4fcd2;
        margin-top: 50%;
        border-radius: 5%;
        }
    .mi-text-box {
        position: relative;  
        padding: 30% 16% 11%;
        }
    .mi-text {
        font-size: 17px;
        }
    .mi-img {
        width: 50%;
        border-radius: 50%;
        position: absolute;
        left: 25%;
        top: -28%;
        }
    /*スライド前のテキスト*/
    .cb-com-text  {
        font-size: 38px;
    }
    /* スライド */
    .swiper-container {
        position: relative;
    }
    .swiper {
        max-width: 68%;
        margin: 200px auto;
        overflow: hidden;
      }
      :root {
        --swiper-navigation-color: black;  
        --swiper-pagination-color: #a9eaec;
        --swiper-pagination-bullet-size: 12px;
        --swiper-pagination-bullet-width: 12px;
        --swiper-pagination-bullet-height: 12px;
      }
      /* スライド */
      .swiper-slide {
        flex-shrink: 0;
        width: 100%;
        height: 100%;
        position: relative;
        transition-property: transform;
      }
      /*メンバーの写真*/
      .swiper-slide img {
        width: 175px;
        height: 175px;
        border-radius: 50%;
        margin-bottom: 20px;
      }
       /*メンバーの名前*/
       .swiper-slide span {
        font-size: 24px;
        font-weight: 900;
      }
      /*メンバーのニックネーム*/
      .swiper-slide p {
        width: 100%;
        font-size: 16px;
      }
      .swiper-pagination {
        margin-top: 15px;
        padding: 50px 0;
      }
        /* Common Styles */
      .swiper-pagination-fraction,
      .swiper-pagination-custom,
      .swiper-horizontal > .swiper-pagination-bullets,
      .swiper-pagination-bullets.swiper-pagination-horizontal {
        top: 60%;
        left: 0;
        width: 100%;
        margin-top: 50px;
      }
      .swiper-button-prev:after {
        position: absolute;
        top: -80%;
        left: 1000%;
        font-size: 20px;
        font-weight: 900;
        color: black;
        margin-left: 20px; /* マージンを追加 */
      }
      .swiper-button-next:after {
        position: absolute;
        right: 1000%;
        top: -80%;
        font-size: 20px;
        font-weight: 900;
        color: black;
        margin-right: 20px;
      }
      .swiper-button-prev, .swiper-button-next {
        padding: 50px 0;
      }
    /*みんなでばんざい*/
    .wait-box {
        background-image: url("images-bootstrap/images/banner03-bg-top-sp.jpeg"),url("images-bootstrap/images/banner03-bg-under.jpeg");
        background-position: left top,left 580px;
        background-repeat: no-repeat;
        background-size: contain ;
        width: 100%;
        height: 859px;
      }
      .wait-text1 {
        font-size: 28px;
        color: #e51642;
        padding-top: 250px;
    }
      .wait-text2 {
          font-size: 18px;
      }
      .wait-text3 {
          color: #278f84;
          font-size: 16px;
      }
      .green-link-wait {
          background-color: #3dcfd4;
          width: 380px;
          height: 70px;
          font-size: 26px;
          padding-top: 12px;
      }
        /*よくある質問*/
        /*アコーディオン*/
        #accordion {
            background: white;
            border-radius: 15px;
        }
        .accordion-container {
            position: relative;
            width: 100%;
            outline: 0;
            cursor: pointer;    
        }
        .accordion-container .accordion-title {
            display: block;
            position: relative;
            margin: 0;
            padding: 1.5em 2em 1.5em 3.5em;
            font-size: 1.48em;
            line-height: 1.7em;
            font-weight: bold;
            background: white;
            cursor: pointer;
            border-radius: 15px;
        }
        .accordion-container .accordion-title:hover,
        .accordion-container .accordion-title:active,
        .accordion-container .content-entry.open .accordion-title {
            background: white;
            border-radius: 15px;
        }
        .accordion-title{
            position: relative;
        }
        .accordion-title:after {
            content: "";
            position: absolute;
            right: 25px;
            top: 41%;
            transition: all 0.2s ease-in-out;
            display: block;
            width: 10px;
            height: 10px;
            border-top: solid 2px black;
            border-right: solid 2px black;
            -webkit-transform: rotate(135deg);
            transform: rotate(135deg);
        }
        .accordion-title::before {
            content: "Q";
            color: #cc3499;
            font-size: 1.5em;
            font-weight: bold;
            position: absolute;
            top: 28%;
            left: 3%;
        }
        /*Q&AのAの部分*/
        /*A4タイプ*/
        .accordion-content-A4 p::before {
            content: "A";
            color: #778295;
            font-size: 1.5em;
            font-weight: bold;
            position: absolute;
            top: 66%;
            left: 3%;
        }
        .accordion-title.open:after {
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
            top: 45%;
        }
        .accordion-content-A4 {
            display: none;
            padding: 2.3125em 0.75em 0.5em 3.5em;
            font-size: 1.3em;
            background-color: white;
            line-height: 1.7em;
            margin-bottom: 2em;
            border-radius: 0 0 15px 15px;
        }
        .accordion-content-A4:hover {
            border-radius: 0 0 15px 15px;
        }
        /*A5タイプ*/
        .accordion-content-A5 p::before {
            content: "A";
            color: #778295;
            font-size: 1.5em;
            font-weight: bold;
            position: absolute;
            top: 66%;
            left: 3%;
        }
        .accordion-title.open:after {
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
            top: 45%;
        }
        .accordion-content-A5 {
            display: none;
            padding: 2.3125em 0.5em 0.5em 3.5em;
            font-size: 1.3em;
            background-color: white;
            line-height: 1.7em;
            margin-bottom: 2em;
            border-radius: 0 0 15px 15px;
        }
        .accordion-content-A5:hover {
            border-radius: 0 0 15px 15px;
        }
        /*A9タイプ*/
        .accordion-content-A9 p::before {
            content: "A";
            color: #778295;
            font-size: 1.5em;
            font-weight: bold;
            position: absolute;
            top: 62.5%;
            left: 3%;
        }
        .accordion-title.open:after {
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
            top: 45%;
        }
        .accordion-content-A9 {
            display: none;
            padding: 2.3125em 0.5em 0.5em 3.5em;
            font-size: 1.3em;
            background-color: white;
            line-height: 1.7em;
            margin-bottom: 2em;
            border-radius: 0 0 15px 15px;
        }
        .accordion-content-A9:hover {
            border-radius: 0 0 15px 15px;
        }
        /*A2タイプ*/
        .accordion-content-A2 p::before {
            content: "A";
            color: #778295;
            font-size: 1.7em;
            font-weight: bold;
            position: absolute;
            top: 67%;
            left: 3%;
        }
        .accordion-title.open:after {
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
            top: 45%;
        }
        .accordion-content-A2 {
            display: none;
            padding: 2.3125em 0.5em 0.5em 3.5em;
            font-size: 1.3em;
            background-color: white;
            line-height: 1.7em;
            margin-bottom: 2em;
            border-radius: 0 0 15px 15px;
        }
        .accordion-content-A2:hover {
            border-radius: 0 0 15px 15px;
        }
        /*A3タイプ*/
        .accordion-content-A3 p::before {
            content: "A";
            color: #778295;
            font-size: 1.5em;
            font-weight: bold;
            position: absolute;
            top: 66%;
            left: 3%;
        }
        .accordion-title.open:after {
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
            top: 45%;
        }
        .accordion-content-A3 {
            display: none;
            padding: 2.3125em 0.5em 0.5em 3.5em;
            font-size: 1.3em;
            background-color: white;
            line-height: 1.7em;
            margin-bottom: 2em;
            border-radius: 0 0 15px 15px;
        }
        .accordion-content-A3:hover {
            border-radius: 0 0 15px 15px;
        }
        /* CSS for CodePen */
        .accordion-container {
            width: 1125px;
            margin: 1.875em auto;
        }
        /*フッター*/
        .f-logo {
            font-size: 28px;
            font-weight: 500;
            letter-spacing: 0.1em;
        }
        .f-text {
            font-size: 16px;
            letter-spacing: 0.08em;
        }
}