@charset "utf-8";

/* ========================================
   基本設定
   ======================================== */

/* Safari対応 */
@supports (-webkit-touch-callout: none) {
    /* iOS Safari専用スタイル */
}

/* iPhone Safari対応 */
@media only screen and (max-width: 767px) and (-webkit-min-device-pixel-ratio: 2) {
    /* iPhone Safari専用スタイル */
    .header-section-img3 img {
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
    }
    .reason-wrap {
        display: block !important;
        flex-direction: column !important;
    }
    .reason-wrap .box {
        width: 89% !important;
        margin-bottom: 3rem !important;
    }
    .con2-box {
        display: block !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
    }
    .con2-box-txt {
        width: 100% !important;
        margin-bottom: 2rem !important;
    }
    .con2-box-img {
        width: 100% !important;
        margin: 0 auto !important;
        text-align: center !important;
    }
    .mes-box {
        display: block !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
    }
    .mes-box .img-box {
        width: 100% !important;
        margin: 0 auto 2rem auto !important;
        text-align: center !important;
    }
    .mes-box .txt-box {
        width: 100% !important;
        padding: 0 1rem 1rem 1rem !important;
    }
    .btn-overlay {
        text-align: center !important;
        position: absolute !important;
    }
    .cta-box .btn-overlay {
        text-align: center !important;
        max-width: 328px !important;
    }

}

img {
    max-width: 100%;
}

body {
    font-family: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
    font-feature-settings: "palt";
    letter-spacing: 0.5px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ========================================
   タイポグラフィ
   ======================================== */

p {
    font-size: 18px;
    font-family: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
    font-style: normal;
    font-weight: 500;
    line-height: 1.9;
    color:#303030;
    margin: 1.2rem 0;
    font-feature-settings: "palt";
    letter-spacing: 1px;
}

h2 {
    font-family: "zen-maru-gothic", "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif!important;
    font-style: normal!important;
    font-weight: 700!important;
    margin-bottom: 3rem!important;
    color:#303030!important;
    text-align: center!important;
    padding-top: 4rem!important;
    line-height: 1.35!important;
    font-size: 2.7em!important;
    font-feature-settings: "palt"!important;
}
.center{
    text-align: center;
}
/* ========================================
   共通スタイル
   ======================================== */

.inner{
    max-width:990px;
    margin: 0 auto;
    padding: 0 3rem;
}
.flex{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-evenly;
}

.flex-rv {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    flex-direction: row-reverse;
}
.ft1{
    font-size: 1.1em;
}
.ft2{
    font-size: 1.2em;
}
.bold{
    font-weight: bold;
}

.yellow-line{
    background: linear-gradient(transparent 70%, #ffed50 0%);
    display: inline;
    padding: 0 5px 2px;
    position: relative;
    font-weight: 700;
}
.white-line {
    background: linear-gradient(transparent 70%, #fff 0%);
    display: inline;
    padding: 0 5px 2px;
    position: relative;
    font-weight: 700;
}

.red{
    color: #E94709;
}
.white-bg{
    background: #fffffffa;
}

/* ========================================
   リストスタイル
   ======================================== */

ul {
    list-style: none;
    padding: 0;
    margin: 1rem 0 1rem 0!important;
}

ul li {
    position: relative;
    padding-left: 34px;
    padding-right: 15px;
    font-size: 1.2em;
    padding-top: 8px;
    padding-bottom: 8px;
    margin-bottom: 10px;
    line-height: 1.6;
    font-weight: 700;
    color: #303030;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    font-family: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
}

ul li::before {
    content: '✓';
    position: absolute;
    left: 11px;
    top: 8px;
    color: #4CAF50;
    font-weight: bold;
    font-size: 19px;
}

/* ========================================
   コンテンツエリア
   ======================================== */

.con1 {
    padding-top: 3rem;
    background: url("../images02/bn02/con1_bg.webp") no-repeat bottom center;

}

/* レティーナディスプレイ対応 - con1背景 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .con1 {
        background-image: url("../images02/bn02/con1_bg@2x.webp");
    }
}

.con2 {
    background: url("../images02/bn02/con2_bg.webp") no-repeat top center;
    padding: 32px 0 0 0;
}

/* レティーナディスプレイ対応 - con2背景 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .con2 {
        background-image: url("../images02/bn02/con2_bg@2x.webp");
    }
}

.con2-box-txt{
    width: 50%;
}
.con2-box-img{
    width: 40%;
}
.con2-box{
    padding:  0;
}

.con2-1 {
    background: url("../images02/bn02/con2-bottom_bg.webp") no-repeat top center;
    padding: 0;
}
.con2-1-box{
    background:#003F67;
    border-radius: 20rem;
    width: 96%;
    margin:auto auto 2rem auto;
    padding: 2rem 1rem;
}
.con2-1-box img{
    width: 60%;
}

.con3{
    background: url("../images02/bn02/con3_bg.webp") no-repeat top center;
    padding:0;
}

.con4{
    background: url("../images02/bn02/con4_bg.webp") no-repeat center center fixed;
    background-size: cover;
}


.con4 .img-box{
    margin-top: 3rem;
}
.con4 .img-box .item{
    margin-top: 2rem;
}

.cta-box .btn-overlay{
    position: absolute;

}
.btn2-box{
    position: absolute;
    bottom: 14% !important;
    left: 23% !important;
    transform: translateX(-15%) !important;
    z-index: 10;
}

.con5{
    background: url("../images02/bn02/prof_bg.webp ") no-repeat top center;
    padding: 0 0 2rem 0;
    background-size: cover;
}

.prof-tit{
    padding-top:4rem;
}
.mes-box h3{
    font-family: "zen-maru-gothic", sans-serif;
    font-style: normal;
    font-size: 2em;
    display: table;
    border-radius: 50px;
    font-weight: 700;
    background:#FFC000;
    padding: 2rem;
    margin: 0 auto;
    color:#303030;
    text-align: center;
    position: relative;
    top: -5rem;
    z-index: 10;
}
.mes-box .item{
    margin-top: -3rem;
}
.mes-box .img-box{
    width: 28%;
    margin: 0 auto;
}
.mes-box .txt-box{
    width: 68%;
}
.mes-box{
    background: #fff;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgb(0 0 0 / 27%);
    position: relative;
    margin-top: 3rem;
    margin-bottom: -2rem;
}
.name{
    margin-top: 1rem;
    text-align:right
}
.mes-box h3{}
.cta-block{
    background: url("../images02/bn02/cta_bg.webp") no-repeat center center;
    background-size: cover;
    padding:0 1rem;
    position: relative;
}

.cta-side-image {
    position: absolute;
    bottom: 0;
    z-index: 5;
}

.cta-side-image.cta-left {
    left: 50%;
    transform: translateX(-264%);
}

.cta-side-image.cta-right {
    left: 50%;
    transform: translateX(250%);
}

.cta-side-image img {
    height: auto;
}
.reason-wrap .box {
    width: 27%;
    background: #fff;
    border: 1px solid #fd7619;
    border-radius: 10px;
    padding: 1.2rem;
    box-shadow: 0 4px 6px rgb(0 0 0 / 27%);
    margin-bottom: 2rem;
    position: relative;
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 624px;
}

.reason-wrap .box .icon01 {
    position: absolute;
    top: -2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}
.reason-wrap .box p{
    font-size: 1em;
}
.reason-wrap .box p:last-child{
    margin-top: auto;
}
.reason-wrap .box h3{
    margin-top: 5rem;
    text-align: center;
    font-size: 1.2em;
    font-weight: 700;
    color: #303030;
    font-weight: 700;
    line-height: 1.35;
}
.reason-wrap .box .txt{
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.con6-box-inner{
    margin-top: 5rem;
}

.con6 {
    background: url("../images02/bn02/reason_bg.webp") no-repeat bottom center;
    background-size: cover;
}

.con7 {
    background:#E4EDF3 url("../images02/bn02/list_bg.webp") repeat-x bottom center;
}

.con8 {
    background: url("../images02/bn02/con8_bg.webp") no-repeat bottom center;
    background-size: cover;
    padding-top: 0!important;
}
.con8 .inner{
    padding-bottom: 2rem;
    padding-top: 1rem;
}
.con8 .flex .img-box {
    width: 49%;
}
.con8 .flex .txt-box{
    width: 49%;
    margin-left: 0.5rem;
}

/* QAアコーディオン */
.qa-accordion {
    max-width: 800px;
    margin: 3rem auto 0;
    position: relative;
}

.qa-accordion::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #e0e0e0;
    transform: translateX(-50%);
    z-index: 1;
}

.qa-item {
    border-bottom: 1px solid #e0e0e0;
    position: relative;
    z-index: 2;
    margin-bottom: 1rem;
}

.qa-question {
    background: #f8f9fa;
    padding: 1.5rem 2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    position: relative;
    transition: background-color 0.3s ease;
}

.qa-question:hover {
    background: #e9ecef;
}

.qa-label {
    font-weight: bold;
    margin-right: 1rem;
    flex-shrink: 0;
    font-size: 1.2rem;
}

.qa-label.q {
    color: #007bff;
}

.qa-label.a {
    color: #fd7e14;
}
.qa-question .qa-text{
    color:#303030;
    font-weight: 500;
    font-size: 1.1em;
}

.qa-text {
    color:#303030;
    flex: 1;
    line-height: 1.7;
}

.qa-toggle {
    color: #dc3545;
    font-weight: bold;
    font-size: 1.4rem;
    margin-left: 1rem;
    flex-shrink: 0;
    width: 1.4rem;
    text-align: center;
    line-height: 1;
    position: relative;
}

.toggle-plus,
.toggle-minus {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
    transition: opacity 0.4s ease;
}

.toggle-plus {
    opacity: 1;
}

.toggle-minus {
    opacity: 0;
}

.qa-answer {
    background: #fff9e7;
    height: 0;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    padding: 0;
    opacity: 0;
    transition: height 0.4s ease, padding 0.4s ease, opacity 0.4s ease;
}

.qa-item.active .qa-answer {
    height: auto;
    padding: 1.5rem 2rem;
    opacity: 1;
}

.qa-item.active .toggle-plus {
    opacity: 0;
}

.qa-item.active .toggle-minus {
    opacity: 1;
}

.qa-item:not(.active) .toggle-plus {
    opacity: 1;
}

.qa-item:not(.active) .toggle-minus {
    opacity: 0;
}
.qa-wrap{
background:#EDF5F6;
padding-bottom: 3rem;
}

.con9 {
    padding: 4rem 0 10rem 0;
    background: url("../images02/bn02/footer_bg.webp") no-repeat bottom center;
    background-size: cover;
}

.footer {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
    color: #ecf0f1;
    padding: 2rem 0;
    text-align: center;
    position: relative;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
}



.footer .info {
    margin-bottom: 1rem;
}

.footer .policy a {
    color: #bdc3c7;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s ease;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.1);
    display: inline-block;
}

.footer .policy a:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.footer .copy {
    font-size: 0.85rem;
    color: #95a5a6;
    font-weight: 300;
    letter-spacing: 0.5px;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .qa-question,
    .qa-answer {
        padding: 1rem 1.5rem;
        flex-direction: column;
        align-items: flex-start;
    }
    
    .qa-label {
        margin-right: 0;
        margin-bottom: 0.5rem;
    }
    
    .qa-toggle {
        position: absolute;
        right: 1.5rem;
        top: 1.5rem;
    }
    
    .qa-accordion::before {
        display: none;
    }
    .header-section, .header-section-img2 {
        background: transparent!important;
    }
}

/* ========================================
   スライダー
   ======================================== */

.slider-box {
    position: relative;
    max-width: 970px;
    margin: 0 auto;
}

.slider-container {
    overflow: hidden;
    position: relative;
    border: 2px solid #FFD700;
    border-radius: 10px;
    background: #fff;
    width: stretch;
    height: 620px; /* 高さを調整して4つのカードがきれいに収まるように */
    max-width: 1200px;
    margin: 0 auto;
}

.slider-wrapper {
    display: flex;
    transition: transform 0.5s ease-in-out;
    width: 300%; /* 3ページ分の幅（11スライド ÷ 4スライド/ページ = 3ページ） */
    flex-wrap: wrap;
    height: 100%;
}

.slide {
    width: 16.5%; /* 100% ÷ 2 (1行に2つ表示) */
    flex-shrink: 0;
    box-sizing: border-box;
    min-height: 200px; /* 最小高さを調整 */
}

.testimonial-card {
    background: #fff;
    border-radius: 8px;
    padding: 2rem 1.5rem 0 3rem;
    height: 100%;
}

.testimonial-card img {
    height: auto;
    margin-bottom: 15px;
    border-radius: 8px;
}

.testimonial-content {
    flex: 1;
    width: 100%;
}

.testimonial-text {
    font-family: "a-otf-jun-pro", sans-serif;
    color: #424242;
    font-size: 15px;
    line-height: 1.6;
    font-weight: 500;
    margin: 0;
    text-align: left;
}

/* ナビゲーションボタン */
.slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #FFD700;
    border: none;
    margin-right: 20px;
    margin-left: 23px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 33px;
    padding-left: 1rem;
    padding-bottom: 0.5rem;
    font-weight: bold;
    color: #333;
    cursor: pointer;
    z-index: 10;
    transition: background-color 0.3s;
}

.slider-nav:hover {
    background: #FFC000;
}

.slider-nav.prev {
    left: -50px;
}

.slider-nav.next {
    right: -50px;
}

/* ドットインジケーター */
.slider-dots {
    text-align: center;
    margin-top: 20px;
}

.dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ccc;
    margin: 0 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.dot.active {
    background: #FFD700;
}

.dot:hover {
    background: #FFC000;
}

/* レティーナディスプレイ対応 - con2-1背景 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .con2-1 {
        background-image: url("../images02/bn02/con2-bottom_bg@2x.webp");
    }
}

/* ========================================
   ヘッダーセクション
   ======================================== */

/* ヘッダー背景設定 */
.header-section {
    background: url("../images02/bn02/header1_bg.webp") no-repeat top center;
}

.header-section-img {
    text-align: center;
}

.header-section-img2 {
    background: url("../images02/bn02/header2_bg.webp") no-repeat top center;
    margin-top: -2px;
}

.header-section-img3 {
    background: url("../images02/bn02/header3_bg.webp") no-repeat top center;
    position: relative;
    margin-top: -4px;
}

/* ヘッダー内要素 */
.header-section-img3 img {
    margin: 0 auto;
    display: block;
    max-width: 100%;
}

/* ヘッダー画像のレスポンシブ対応 */
.header-pc {
    display: inline-block !important;
}

.header-sp {
    display: none !important;
}

/* ボタンのレスポンシブ対応 */
.btn-pc {
    display: inline-block !important;
}

.btn-sp {
    display: none !important;
}

/* con1画像のレスポンシブ対応 */
.con1-pc {
    display: inline-block !important;
}

.con1-sp {
    display: none !important;
}

/* jisseki画像のレスポンシブ対応 */
.jisseki-pc {
    display: inline-block !important;
    margin: 0 auto;
}

.jisseki-sp {
    display: none !important;
}

/* img3画像のレスポンシブ対応 */
.img3-pc {
    display: inline-block !important;
}

.img3-sp {
    display: none !important;
}

/* CTAボックスのレスポンシブ対応 */
.cta-wrap-pc {
    display: inline-block !important;
}

.cta-wrap-sp {
    display: none !important;
}

/* prof画像のレスポンシブ対応 */
.prof-pc {
    display: inline-block !important;
}

.prof-sp {
    display: none !important;
}

/* list画像のレスポンシブ対応 */
.list-pc {
    display: inline-block !important;
}

.list-sp {
    display: none !important;
    margin-top: -4rem;
}

/* tit-txt画像のレスポンシブ対応 */
.tit-txt-pc {
    display: inline-block !important;
}

.tit-txt-sp {
    display: none !important;
}
.sp{
    display: none !important;
}

.pc-only{
    display: inline-block !important;
}

/* ========================================
   ボタン・アニメーション
   ======================================== */

/* CTAボックス */
.cta-box {
    position: relative;
    padding: 3rem 0;
}

.cta-box-inner {
    position: relative;
    text-align: center;
}


/* ボタンオーバーレイ */
.btn-overlay {
    position: absolute;
    bottom: 14%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

.btn-overlay img {
    height: auto;
    width: auto;
    animation: float 3s ease-in-out infinite;
}

.btn-overlay .btn-pc,
.btn-overlay .btn-sp {
    height: auto;
    width: auto;
    animation: float 3s ease-in-out infinite;
}

/* ボタンリンク */
.btn-link {
    display: block;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.btn-link:hover {
    transform: scale(1.05);
}

/* ふわふわアニメーション */
@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}



/* ========================================
   レティーナディスプレイ対応
   ======================================== */

/* ヘッダー背景 - レティーナ対応 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .header-section {
        background-image: url("../images02/bn02/header1_bg@2x.webp");
    }
    
    .header-section-img2 {
        background-image: url("../images02/bn02/header2_bg@2x.webp");
    }
    
    .header-section-img3 {
        background-image: url("../images02/bn02/header3_bg@2x.webp");
    }
}

/* ========================================
   書籍スライダー
   ======================================== */

.book-slider {
    position: relative;
    max-width: 860px;
    margin: 3rem auto;
}

.book-slider-inner {
    overflow-x: auto;
    overflow-y: hidden;
    position: relative;
    border: 2px solid #FFD700;
    border-radius: 10px;
    background: #fff;
    width: 100%;
    height:415px;
    margin: 0 auto;
    -webkit-overflow-scrolling: touch;
    cursor: grab;
    user-select: none;
}

.book-slider-inner:active {
    cursor: grabbing;
}

.book-slider-inner::-webkit-scrollbar {
    height: 8px;
}

.book-slider-inner::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.book-slider-inner::-webkit-scrollbar-thumb {
    background: #FFD700;
    border-radius: 4px;
}

.book-slider-inner::-webkit-scrollbar-thumb:hover {
    background: #FFC000;
}

.book-slider-wrapper {
    display: flex;
    height: 100%;
    align-items: center;
    padding: 0.1rem 2rem;
    width: 900px; /* 3冊の本が表示される幅 */
}

.book-item {
    padding-right:1.2rem;
    flex: 0 0 auto;
    transition: transform 0.3s ease;
}

.book-item img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    pointer-events: none;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
}



/* 書籍スライダーナビゲーションボタン */
.book-slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #FFD700;
    border: none;
    margin-right: 20px;
    margin-left: 20px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 41px;
    font-weight: bold;
    padding-bottom: 1.5rem;
    padding-left: 1rem;
    color: #333;
    cursor: pointer;
    z-index: 10;
    transition: background-color 0.3s;
}

.book-slider-nav:hover {
    background: #FFC000;
}

.book-slider-nav.prev {
    left: -50px;
}

.book-slider-nav.next {
    right: -50px;
}
.con2-box-txt h3{
    margin: 1rem auto;
}



/* ========================================
   レスポンシブ対応
   ======================================== */

/* タブレット用 */
@media screen and (max-width: 900px) {
    .btn-overlay {
        bottom: 15%;
        left: 22%;
        transform: translateX(-17%);
    }
    
    .btn-overlay img {
        max-width: 650px;
    }
    
    .cta-box .btn-overlay {
        bottom: 20%;
    }
}

/* スマホ用 */
@media screen and (max-width: 767px), (max-device-width: 767px), only screen and (max-width: 767px) {
    p{
        font-size: 16px;
        font-family: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
    }
    /* ヘッダー画像のスマートフォン対応 */
    .header-pc {
        display: none !important;
    }

    .header-sp {
        display: inline-block !important;
    }

    /* ヘッダー画像のサイズ制限 */
    .header-section-img3 img {
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
    }

    /* ボタンのスマートフォン対応 */
    .btn-overlay .btn-pc {
        display: none !important;
    }

    .btn-overlay .btn-sp {
        display: inline-block !important;
    }

    /* con1画像のスマートフォン対応 */
    .con1-pc {
        display: none !important;
    }
    .con1 .inner{
        padding: 0;
    }
    .con1{
        background:transparent;
        padding-top: 0;
    }

    .con2 {
        background: url("../images02/bn02/con2_bg-sp.webp") no-repeat top center;
        background-size: 100%;
    }
    .con2-box{
        display: block !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        padding: 10px 0;
    }
    .con2-box-txt{
        width: 100% !important;
        margin-bottom: 2rem;
    }
    .con2-box-txt h3{
        margin-bottom: 2rem;
    }
    .con2-1-box img{
        width:stretch;
        padding:0 1rem; 
    }
    .con2-1-box{
        width:stretch;
        padding:1rem 0;
    }
    .con2-1{
        background:transparent;
        margin-top: -1rem;
    }
    ul li{
        font-size: 1.1em;
        font-family: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
    }
    .con2-box-img{
        width: 60% !important;
        margin: 0 auto;
        text-align: center;
    }

    .con1-sp {
        vertical-align: top;
        display: inline-block !important;
    }

    /* jisseki画像のスマートフォン対応 */
    .jisseki-pc {
        display: none !important;
    }

    .jisseki-sp {
        display: inline-block !important;
    }

    /* img3画像のスマートフォン対応 */
    .img3-pc {
        display: none !important;
    }

    .img3-sp {
        display: inline-block !important;
    }

    /* CTAボックスのスマートフォン対応 */
    .cta-wrap-pc {
        display: none !important;
    }

    .cta-wrap-sp {
        display: inline-block !important;
    }

    /* prof画像のスマートフォン対応 */
    .prof-pc {
        display: none !important;
    }

    .prof-sp {
        display: inline-block !important;
    }

    /* list画像のスマートフォン対応 */
    .list-pc {
        display: none !important;
    }

    .list-sp {
        display: inline-block !important;
    }

    /* tit-txt画像のスマートフォン対応 */
    .tit-txt-pc {
        display: none !important;
    }

    .tit-txt-sp {
        display: inline-block !important;
    }

    .btn-overlay {
        text-align: center;
        position: absolute;
    }
    
    .btn-overlay img {
        max-width: 100%;
    }
    
    .cta-box .btn-overlay {
        text-align: center;
        max-width: 328px;
    }
    .cta-block{
        padding:0;
    }
    
    .cta-box-inner {
        flex-direction: column;
        gap: 1rem;
    }
    .cta-box{
        padding: 0;
    }
    .cta-side-image img{
        display: none;
    }
    
    .cta-side-image.cta-left {
        left: 44%!important;
        transform: translateX(-85%)!important;
    }
    .reason-wrap .box h3{
        font-size: 1.4rem;
    }
    
    .cta-side-image.cta-right {
        left: 57%!important;
        transform: translateX(59%)!important;
    }
    .con7 .inner{
        padding:0;
    }
    .reason-wrap .box .icon01 {
        top: -1.5rem;
        width: 97px;
    }
    .flex{
        display: block !important;
        flex-wrap: nowrap !important;
    }
    .reason-wrap{
        display: block !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
    }
    .reason-wrap .box{
        width:90%;
        margin-bottom: 3rem;
    }
    .mes-box h3{
        font-size: 1.6em;
        padding:1rem 3rem;
        line-height: 1.5;
    }
    .mes-box{
        text-align: center;
        padding:0;
        display: block !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
    }
    .mes-box .img-box{
        width: 100% !important;
        margin: 0 auto 2rem auto;
        text-align: center;
    }
    .mes-box .txt-box{
        text-align: left;
        width: 92% !important;
        padding: 0 1rem 1rem 1rem;
    }
    .name{
        padding: 1rem;
    }
 
 
    .con5{
        background:transparent;
    }
    
    .inner{
        padding: 0 1rem;
    }
    
    .book-item {
        padding-right: 0.5rem;
        width: 160px;
    }
    .book-slider-inner{
        height: 280px;
    }
    .book-slider-nav.prev{
        left: -34px;
    }
    .book-slider-nav.next{
        right: -34px;
    }
    .con5{
        padding-bottom: 0;
    }
    .con6{
        padding-bottom: 3rem;
    }
    .con8-tit{
        margin-top: 1rem;
    }
    .con8 .flex .img-box{
        width:100%;
        margin-top: 1rem;
    }
    .con8 .flex .txt-box{
        width:100%;
    }
    
    .book-slider-wrapper {
        gap: 0;
        width: 100%;
        max-width: 100%;
    }
    h2{
        font-size: 1.7em!important;
        margin-bottom: 2rem!important;
        font-family: "zen-maru-gothic", "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
    }

    /* スマートフォン用スライダー設定 */
    .slider-container {
        height: auto;
        padding: 1rem 0;
    }

    .slider-wrapper {
        width: 600%; /* 6ページ分の幅（12スライド ÷ 2スライド/ページ = 6ページ） */
        flex-wrap: wrap;
    }

    .slide {
        width: 16.5%;
        height: 50%;
    }
    .slider-nav{
        margin-right: 36px;
        margin-left: 36px; 
        top: 46%;
    }

    .testimonial-card {
        padding: 1rem 0.8rem 0 1.5rem;
        font-size: 14px;
    }

    .testimonial-card img {
        height: auto;
        margin-bottom: 10px;
    }

    .testimonial-text {
        font-size: 13px;
        line-height: 1.4;
    }
    .sp{
        display: block !important;
    }

    .pc-only{
        display: none !important;
    }
}