:root {
    font-size: 10px;
    font-family: "Noto Serif JP", serif;
    color: #2e2e2e;
}
html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent
}

html, body {
    width: 100%;
    min-height: 100vh;
    margin: 0;
    padding: 0;
}

/****************************************
  TOPへ戻るボタン（Go to top）
*****************************************/
/***追従するトップへ戻るボタン***/
#scrollTopButton {
    display: none;
    position: fixed;
    left: 10px;
    bottom: 10px;
    font-size: 1.2rem;
    line-height: 1.2rem;
    background: #2e2e2e;
    padding: 10px;
    border: solid 1px;
    border-radius: 50%;
    box-shadow: 0 2px 10px -6px rgba(255, 255, 255, 0.5), 0 3px 10px -4px rgba(255, 255, 255,.2);
    cursor: pointer;
    opacity: 0; /* 初期状態で透明 */
    text-decoration:none;
    display:block;
    cursor:pointer;
    text-align:center;
    line-height:100%;
    width: 5rem;
    height: 5rem;
}
#scrollTopButton::before {
  content: "";
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  border-left: 2px solid #fff;
  border-top: 2px solid #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -25%) rotate(45deg);
}
#scrollTopButton.show {
    display: block;
    opacity: 1; /* 表示時の不透明度 */
    z-index: 9999;
    -webkit-transition:all 0.3s;
    -moz-transition:all 0.3s;
    transition:all 0.3s;
}

#scrollTopButton a:hover{
    -webkit-transition:all 0.3s;
    -moz-transition:all 0.3s;
    transition:all 0.3s;
    opacity: 0.8;
}

/****************************************
  追従バナー
*****************************************/



/* 固定位置の土台 */
.sticky-gif {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
  background: transparent;

}

/* ▼ リンクは操作可能＆重なり安定化 */
.sticky-gif a {
  position: relative;        /* 重要：absolute配置の基準点 */
  display: inline-block;
  overflow: visible;
}

.sticky-gif img {
  display: block;            /* 余計な隙間防止 */
  width: 40rem;              /* GIFサイズ調整（PC） */
  height: auto;
  cursor: pointer;
}

/* --- PC（769px〜） --- */
@media (min-width: 769px) {
  .close-btn {
    position: absolute;
    top: -1.5rem;            /* -2rem → 少し内側へ */
    right: -0.5rem;          /* -1rem → 少し内側へ */
    width: 3.4rem;
    height: 3.4rem;
    border: none;
    border-radius: 50%;
    background: #000;
    cursor: pointer;
    padding: 0;

    display: grid;
    place-items: center;

    z-index: 10000;          /* 前面に強めに */
    pointer-events: auto;    /* 操作を許可 */

    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
  }

  .close-btn::before,
  .close-btn::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 2rem;
    height: 0.2rem;
    background: #fff;
    transform-origin: center;
    transform: translate(-50%, -50%) rotate(45deg);
    border-radius: 0.1rem;
    pointer-events: none;     /* 擬似要素はイベントを拾わない */
  }
}

/* --- スマホ（〜768px） --- */
@media (max-width: 768px) {
  .sticky-gif img {
    width: 20rem;            /* GIFサイズ（SP） */
  }

  .close-btn {
    position: absolute;
    top: -3rem;              /* -4.5rem → 端との競合回避で内側へ */
    right: -0.6rem;          /* -1rem → 内側へ */
    width: 4.4rem;           /* 44px相当のヒット領域 */
    height: 4.4rem;
    border: none;
    border-radius: 50%;
    background: #000;
    cursor: pointer;
    padding: 0;

    display: grid;
    place-items: center;

    z-index: 10000;
    pointer-events: auto;

    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
  }

  .close-btn::before,
  .close-btn::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 3rem;
    height: 0.3rem;
    background: #fff;
    transform-origin: center;
    transform: translate(-50%, -50%) rotate(45deg);
    border-radius: 0.1rem;
    pointer-events: none;
  }
}

/* ×のもう一方（共通） */
.close-btn::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* ホバー・フォーカスのアクセシビリティ */
.close-btn:hover { background: #111; }
.close-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* iPhone セーフエリア対応 */
.sticky-gif {
  bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
  right: calc(env(safe-area-inset-right, 0px) + 16px);
}

/* OSの「動きを減らす」に配慮（GIFは画像だが念のため） */
@media (prefers-reduced-motion: reduce) {
  .sticky-gif { animation: none !important; }
}

/* 非表示用のクラス（安全策） */
.sticky-gif.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .15s ease;
}

/* ---------------------------------------------------- */
/* 1. ベースレイアウト (デスクトップ優先) */
/* ---------------------------------------------------- */
@media (min-width: 769px) {
    html,body {
    min-width: 128rem;
    }

    header{
        background-color: #fff;
        display: block;
        width: 100%;
        margin: 0 auto;
        position: fixed;
        top: 0;
        z-index: 999;
    }
    .header_menu{
        max-width: 110rem;
        margin: 0.5rem auto;
    }
    .header_menu ul{
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }
    .header_menu li{
        padding: 0 0.5em;
        list-style: none;
        display: flex;
        align-items: center;
        font-size: 1.5rem;
    }
    .header_menu a{
        text-decoration: none;
        color: #2e2e2e;
        
    }
    .header_menu a:hover{
        opacity: 0.8;
        transition: 0.8;
    }
    .sp_head{
        display: none !important;
    }
    .head_icon{
        width: 30px;
        height: 30px;
    }
    /* ハンバーガーメニュー */
    .hamburger {
        display: none;
    }

    .container {
        display: block;
        min-height: 100vh;
        position: static;
        margin-top:4rem;
    }
    .content-wrap{
        /*width: 128rem;*/
        margin: 0 auto;
    }
    .top_image_wrap{
        /*width: 110rem;*/
        width: 100%;
        margin: 0 auto;
        position: relative;
        aspect-ratio: 16 / 9;

    }
    .top_image{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url(../img/top.jpg);
        background-size:contain;
        background-repeat: no-repeat;
        background-position: center;
    }
    .top_image video{
        width: 100%;
        height: auto;
    }

/*     .top_image{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url(../img/top_img.jpg);
        background-size:contain;
        background-repeat: no-repeat;
        background-position: center;
    }
 */    .top_image h1{
        writing-mode: vertical-rl;
        display: inline-block;
        line-height: 2.5em;
        position: absolute;
        top: 45%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 4.2em;
        white-space: nowrap;
    }
    .top_image h1 span{
        background-color: #fff;
    }
    .hint_wrap{
        display: block;
        width: 128rem;
        margin: 12rem auto 20rem;
        padding: 7rem 0;
        position: relative;
    }
    .hint_wrap .left_img{
        display: block;
        position: absolute;
        width: 30%;
        top: 0;
        left: 0;
    }
    .hint_wrap .left_img .left01{
        position: absolute;
        top:0;
        right: 0;
        width: 23rem;
    }
    .hint_wrap .left_img .left02{
        position: absolute;
        top:15rem;
        left: 0rem;
        width: 23rem;
    }
    .hint_wrap .left_img .left03{
        position: absolute;
        top:29rem;
        left: 19rem;
        width: 19rem;
    }
    .hint_wrap .right_img{
        display: block;
        position: absolute;
        width: 25%;
        top: 0;
        right: 0;
    }
    .hint_wrap .right_img .right01{
        position: absolute;
        top: 0;
        right: 0;
        width: 30rem;
    }
    .hint_wrap .right_img .right02{
        position: absolute;
        top: 24rem;
        right:13rem;
        width: 26rem;
    }
    .hint_wrap .sentence{
        display: flex;
        flex-wrap: wrap;
        margin: 0 auto;
        align-content: center;
        justify-content: center;
    }
    .hint_wrap .sentence h2{
        font-size: 2.8rem;
        line-height: 3.5rem;
        writing-mode: vertical-rl;
        order: 2;
        margin-left: 3rem;
    }
    .hint_wrap .sentence p{
        font-size: 1.8rem;
        line-height: 3.6rem;
        writing-mode: vertical-rl;
    }

    /* --- くう・すむ・おこす --- */

    .slide_con_back{
        /* 1. フォールバック値（IEなどが認識する値） */
        /* IEではこの margin が適用 */
        margin-left: 0; 
        margin-right: 0;

        /* 2. モダンブラウザ向けの値 */
        /* モダンブラウザはこれを上書きして適用 */
        margin-left: calc(max(0px, (100% - 100%) / 2) * -1);
        margin-right: calc(max(0px, (100% - 100%) / 2) * -1);
        
        /* paddingはcalc()を使っているため、フォールバックが必要な場合あり */
        padding-left: 0; 
        padding-right: 0;
        padding-left: calc((100% - 100%) / 2);
        padding-right: calc((100% - 100%) / 2);
        
        margin-bottom: 20rem;
        position: relative;
    }
    #eat.slide_con_back{
        padding-bottom: 57rem;
    }
    #live.slide_con_back{
        padding-bottom: 45rem;
    }
    #business.slide_con_back{
        padding-bottom: 48rem;
        margin-bottom: 10rem;
    }
    .slide_con_wrap{
        width: 128rem;
        margin: 0 auto;
        position: relative;
    }
    .slide_wrap{
        display: block;
        width: 128rem;
        height: 47.1rem;
        margin: 0 auto;
        position: absolute;
        top: -2rem;
    }
    .slide_con_wrap h2{
        writing-mode: vertical-rl;
        display: inline-block;
        line-height: 10.5em;
        position: absolute;
        top: 5rem;
        right: 10rem;
        z-index: 10;
    }
    .slide_con_wrap h2 span.slide_first_f{
        font-size: 4.7em;
        background-color: #fff;
        padding: 0.1em 0em;
    }
    .slide_con_wrap h2 span.slide_second_f{
        font-size: 6.1em;
        background-color: #fff;
        padding: 0.1em 0em;
        margin-top: 15rem;
        white-space: nowrap;
        -webkit-font-feature-settings: "palt";
        -moz-font-feature-settings: "palt";
        font-feature-settings: "palt";
    }
    .swiper-slide img {
    height: auto;
    width: 100%;
    }
    .con_wrap {
        width: 110rem;
        padding-top: 47.1rem;
        margin: 0 auto;
        position: relative;
    }
    .con_column_wrap {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
    }
    .people_con{
        display: flex;
        width: 40.8rem;
        height: 10rem;
        padding: 0 2rem;
        position: absolute;
        bottom: 5rem;
        left: 0;
        right: 0;
        margin: 0 auto;
        border-right: 1px solid #2e2e2e;
        border-left: 1px solid #2e2e2e;
    }
    .people_con .profile_wrap{
        margin-left: 2rem;
        display: flex;
        flex-wrap: wrap;
        width: 24.8rem;
    }
    .people_con .profile_wrap img.icon_img {
        width: 10rem;
        height: 10rem;
    }
    .people_con .profile_wrap .job{
        font-size: 1.6rem;
        display: block;
        width: 100%;
    }
    .people_con .profile_wrap .name{
        font-size: 2.2rem;
        display: block;
        width: 100%;
    }

    .people_con .profile_wrap .sns img{
        height: 3.25rem;
        margin-right:0.5rem;
    }
    .left_con{
        display: block;
        width: 27rem;
        min-height: 80rem;
    }
    .left_con .left_img{
        display: block;
        position:relative;
    }
    .info_wrap {
        margin: 0 auto;
    }
    .info_con{
        margin: 2rem 0 5rem;
    }
    .info_con .b_box{
        display: block;
        width: 8rem;
        font-size: 1.6rem;
        text-align: center;
        padding: 0.5rem 1rem;
        background-color: #2e2e2e;
        color: #fff;
    }
    .info_con p{
        font-size: 1.2rem;
        margin-top: 1rem;
    }
    .center_con{
        display: block;
        position: absolute;
        width: 55rem;
        padding: 3rem 7rem;
        background-color: #fff;
        border: #2e2e2e 1px solid;
        z-index: 1;
        top: 37rem;
        right: 0;
        left: 0;
        margin: 0 auto;
    }
    .center_con::after{
        clear: both;
    }
    .center_con .center_con_title{
        margin: 0.5rem auto 3rem;
        font-size: 10rem;
    }
    .center_con .center_con_title h3{
        font-size: 10rem;
        text-align: center;
    }
    .center_con .center_con_title h4{
        font-size: 3rem;
        text-align: right;
        position: relative;
        line-height: 3rem;
        width: 50%;
        margin: 0 auto;
        left: 3rem;
    }
    /* 疑似要素で線を作成 */
    .center_con .center_con_title h4::before {
        content: "";
        position: absolute;
        /* 線の位置を微調整 */
        bottom: 0.25em; /* ベースラインから少し下げるなどして調整 */
        left: 0;
        right: 5rem; /* 右側のスペースを考慮して線の長さを調整 */
        height: 1.5px;
        background-color: #333;
    }
    .center_con p{
        font-size: 1.6rem;
        line-height: 3.4rem;
        text-align: justify;
        word-wrap: break-word;
    }
    .center_con p:not(:last-child){
        margin-bottom:2rem;
    }
    .right_con{
        display: block;
        width: 27rem;
        min-height: 80rem;

        margin: 0 0 0 auto;
    }
    .right_con .right_img{
        display: block;
        position:relative;
    }

    #eat{
        background-color: #a0c364;
    }
    #eat .center_con::before{
        width: 120px;
        content: url('../img/eat_head_icon.png');
        position: absolute;
        top: -60px;
        right: 0;
        left: 0;
        margin: 0 auto;
    }
    #eat .left_con .left01{
        position: absolute;
        top: 0;
        left: 7rem;
        height: 23rem;
        z-index: 1;
    }
    #eat .left_con .left02{
        position: absolute;
        top: 20rem;
        right: 7rem;
        height: 34.6rem;
    }
    #eat .left_con .left03{
        position: absolute;
        top: 51rem;
        right: 1rem;
        height: 27rem;
    }

    #eat .right_con .right01{
        position: absolute;
        top: 25rem;
        left: 0;
        height: 29.2rem;
    }
    #eat .right_con .right02{
        position: absolute;
        top: 58rem;
        height: 21rem;
        right: -5rem;
    }

    #live{
        background-color: #f8e67f;
    }
    #live .center_con::before{
        width: 11rem;
        content: url('../img/live_head_icon.png');
        position: absolute;
        top: -70px;
        right: 0;
        left: 0;
        margin: 0 auto;
    }
    #live .left_con .left01{
        position: absolute;
        top: 7rem;
        left: 7rem;
        height: 22rem;
        z-index: 1;
    }
    #live .left_con .left02{
        position: absolute;
        top: 27rem;
        right: 7rem;
        height: 34.6rem;
    }
    #live .left_con .left03{
        position: absolute;
        top: 58rem;
        right: 5rem;
        height: 22rem;
    }

    #live .right_con .right01{
        position: absolute;
        top: 38rem;
        right: -6rem;
        height: 20rem;
    }
    #live .right_con .right02{
        position: absolute;
        top: 59rem;
        right: -5rem;
        height: 21rem;
    }
    #business{
        background-color: #c7baad;
    }
    #business .center_con::before{
        width: 100px;
        content: url('../img/business_head_icon.png');
        position: absolute;
        top: -60px;
        right: 0;
        left: -4rem;
        margin: 0 auto;
    }
    #business .left_con .left01{
        position: absolute;
        top: 9rem;
        left: 5rem;
        height: 20rem;
        z-index: 1;
    }
    #business .left_con .left02{
        position: absolute;
        top: 27rem;
        right: 9rem;
        height: 34.6rem;
    }
    #business .left_con .left03{
        position: absolute;
        top: 58.5rem;
        right: 2rem;
        height: 22.5rem;
    }
    #business .right_con .right01{
        position: absolute;
        top: 20rem;
        right: -2rem;
        height: 18rem;
    }
    #business .right_con .right02{
        position: absolute;
        top: 48rem;
        right: -5rem;
        height: 21rem;
    }
    #business .center_con .center_con_title h4{
        font-size: 3rem;
        text-align: right;
        position: relative;
        line-height: 3rem;
        width: 70%;
        margin: 0 auto;
        left: 3rem;
    }
    /* 疑似要素で線を作成 */
    #business .center_con .center_con_title h4::before {
        content: "";
        position: absolute;
        /* 線の位置を微調整 */
        bottom: 0.25em; /* ベースラインから少し下げるなどして調整 */
        left: 0;
        right: 24rem; /* 右側のスペースを考慮して線の長さを調整 */
        height: 1.5px;
        background-color: #333;
    }

    /* --- ブック --- */

    .book_list{
        /* 1. フォールバック値（IEなどが認識する値） */
        /* IEではこの margin が適用 */
        margin-left: 0; 
        margin-right: 0;

        /* 2. モダンブラウザ向けの値 */
        /* モダンブラウザはこれを上書きして適用 */
        margin-left: calc(max(0px, (100% - 100%) / 2) * -1);
        margin-right: calc(max(0px, (100% - 100%) / 2) * -1);
        
        /* paddingはcalc()を使っているため、フォールバックが必要な場合あり */
        padding-left: 0; 
        padding-right: 0;
        padding-left: calc((100% - 100%) / 2);
        padding-right: calc((100% - 100%) / 2);
        
        padding-bottom: 7rem;
        background-color: #eaeaea;
    }
    .new_book{
        display: flex;
        flex-wrap: wrap;
        width: 110rem;
        margin: 0 auto;
        padding: 5rem 0;
    }
    /* ブック 最新が出るまで？*/
    .new_book h3.book_title{
        font-size: 4.7rem;
        line-height: 4.7rem;
        margin: 0 auto 3rem;
    }
    .new_book p{
        font-size: 1.9rem;
        line-height: 3.4rem;
        text-align: justify;
        margin: 0 auto;
        display: block;
    }
    .new_book small{
        font-size: 1.2rem;
    }
    /*ここまで*/


    .new_book .book_info{
        width: 52rem;
        height: 33rem;
        margin-right: 4rem;
    }
    .new_book .book_info h3{
        font-size: 4.7rem;
        line-height: 4.7rem;
        margin-bottom: 2rem;
    }
    .new_book .book_info h4{
        font-size: 4.3rem;
        line-height: 4.3rem;
    }
    .new_book .book_info .book_title_sub{
        display: flex;
        align-items: end;
        margin-bottom: 5rem;
    }
    .new_book .book_info span.new_box{
        font-size: 2.1rem;
        color: #fff;
        background-color: #2e2e2e;
        order: 0;
        width: 15.05rem;
        height: 3.15rem;
        line-height: 2.7rem;
        text-align: center;
        margin-right: 1rem;
    }
    .new_book .book_info p{
        font-size: 1.9rem;
        line-height: 3.4rem;
        text-align: justify;
    }
    .new_book .new_book_img{
        width: 52rem;
        height: 38rem;
        background-color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .new_book .new_book_img .pickup_img,
    .new_book .new_book_img .comingsoon_img{
        width: 19.7rem;
        height: 30.2rem;
        position: relative;
    }
    .new_book .new_book_img img{
        width: 19.7rem;
        height: 30.2rem;
    }
    .new_book .new_book_img .pickup_img::before{
        content: '';
        display: inline-block;
        width: 8.3rem;
        height: 8.3rem;
        background-image: url(../img/pickup.png);
        background-size: contain;
        vertical-align: middle;
        position: absolute;
        top: -2rem;
        left: -4rem;
    }
    .new_book .new_book_img .comingsoon_img::before{
        content: '';
        display: inline-block;
        width: 8.3rem;
        height: 8.3rem;
        background-image: url(../img/comingsoon_img.png);
        background-size: contain;
        vertical-align: middle;
        position: absolute;
        top: -2rem;
        left: -4rem;
    }
    .new_book .book_button{
        width: 52rem;
        order: 1;
        height: 4.25rem;
        margin-top: -4.25rem;
        display: flex;
    }
    .new_book .book_button .pdf_view{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 21.3rem;
        height: 4.25rem;
        line-height: 4.25rem;
        font-size: 1.6rem;
        text-align: center;
        background-color: #8ab4cb;
        color: #fff;
        border: #8ab4cb 1px solid;
        margin-right: 3rem;
        position: relative;
    }

    /* SVGの中の線の初期設定 */
    .new_book .book_button .pdf_view .icon-svg {
        width: 4rem;
        height: 4rem;
    }
    .new_book .book_button .pdf_view .icon-svg .b {
        fill: none;
        stroke: #fff;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 2px;
        transition: stroke 0.3s ease;
    }
    .new_book .book_button .pdf_view:hover .icon-svg .b {
        stroke: #8ab4cb;
    }

    .new_book .book_button .pdf_view::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        right: 2rem;
        margin: auto;
        transform: rotate(45deg);
        border-top: 2px solid #fff;
        border-right: 2px solid #fff;
        box-sizing: border-box;
        width: 1.4rem;
        height: 1.4rem;
        transition: 0.3s;
    }
    .new_book .book_button .view_small_box small{
        font-size: 1.2rem;
        padding-left:1.2rem;
		text-indent:-1.2rem;
        width: 21.5rem;
        display: block;
        margin: 0.5rem 0 2rem;
    }
    .new_book .book_button .pdf_dl{
        display: block;
        width: 21.3rem;
        height: 4.25rem;
        line-height: 4.25rem;
        font-size: 1.6rem;
        text-align: center;
        background-color: #fff;
        color: #000;
        border: #000 1px solid;
        position: relative;
    }
    .new_book .book_button .pdf_dl::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 2rem;
    margin: auto;
    transform: rotate(45deg);
    border-top: 2px solid #000;
    border-right: 2px solid #000;
    box-sizing: border-box;
    width: 1.4rem;
    height: 1.4rem;
    transition: 0.3s;
    }

    .book_list h5{
    align-items: center;
    display: flex;
    font-size: 3.1rem;
    width: 110rem;
    margin: 0 auto 2rem;
    }
    .book_list h5::before,
    .book_list h5::after {
    background-color: #000; /* 横線の色 */
    content: "";
    flex-grow: 1; /* 横幅いっぱい */
    height: 1px; /* 横線の高さ */
    }
    .book_list h5::before {
    margin-right: 0.5rem; /* 文字との余白 */
    }
    .book_list h5::after {
    margin-left: 0.5rem; /* 文字との余白 */
    }
    .book_list .archive_list{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    width: 110rem;
    margin: 0 auto;
    }
    .archive_book{
        display: block;
        width: 19rem;
        margin: 3rem 3.6rem;
    }
    .archive_list::after,
    .more::after {
        content: "";
        display: block;
        width: 19rem;
        margin: 3rem 3.6rem;
    }

    .archive_book img{
        display: block;
        width: 18.6rem;
        height: 29rem;
        margin: 0 auto;
    }
    .archive_book h6{
        font-size: 1.9rem;
        text-align: center;
        margin: 1rem auto;
    }
    .archive_book .pdf_view{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 19rem;
        height: 3.8rem;
        line-height: 3.8rem;
        font-size: 1.5rem;
        text-align: center;
        background-color: #8ab4cb;
        color: #fff;
        border: #8ab4cb 1px solid;
        margin-bottom: 1rem;
        position: relative;
    }
    .archive_book .pdf_dl{
        display: block;
        width: 19rem;
        height: 3.8rem;
        line-height: 3.8rem;
        font-size: 1.5rem;
        text-align: center;
        background-color: #fff;
        color: #000;
        border: #000 1px solid;
        position: relative;
    }
    .archive_book .pdf_view::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        right: 2rem;
        margin: auto;
        transform: rotate(45deg);
        border-top: 2px solid #fff;
        border-right: 2px solid #fff;
        box-sizing: border-box;
        width: 1.3rem;
        height: 1.3rem;
        transition: 0.3s;
    }
    /* SVGの中の線の初期設定 */
    .archive_book .pdf_view .icon-svg {
        width: 4rem;
        height: 4rem;
    }

    .archive_book .pdf_view .icon-svg .b {
        fill: none;
        stroke: #fff;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 2px;
        transition: stroke 0.3s ease;
    }

    .archive_book .pdf_view:hover .icon-svg .b {
        stroke: #8ab4cb;
    }

    
    .archive_book .pdf_dl::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        right: 2rem;
        margin: auto;
        transform: rotate(45deg);
        border-top: 2px solid #000;
        border-right: 2px solid #000;
        box-sizing: border-box;
        width: 1.3rem;
        height: 1.3rem;
        transition: 0.3s;
    }
    .new_book .book_button .pdf_view:hover,
    .pdf_view:hover{
        background-color: #fff;
        color: #8ab4cb;
        border-color: #fff;
        transition: 0.3s;
    }
    .new_book .book_button .pdf_view:hover::after,
    .pdf_view:hover::after{
        border-color: #8ab4cb;
    }
    .new_book .book_button .pdf_dl:hover,
    .pdf_dl:hover{
        background-color: #8ab4cb;
        color: #fff;
        border-color: #fff;
        transition: 0.3s;
    }
    .new_book .book_button .pdf_dl:hover::after,
    .pdf_dl:hover::after{
        border-color: #fff;
    }
    /* --- moreボタン--- */

    .book_list .btn-box {
    width: 100%;
    margin: 1rem auto;
    text-align: center;
    }
    .book_list .btn-box button {
    width: 34.8rem;
    height: 3.3rem;
    padding: 8px;
    font-size: 1.2rem;
    color: #000;
    border: #000 1px solid;
    user-select: none;
    cursor: pointer;
    text-align: center;
    }

    .book_list .btn-box button:hover {
    opacity: .6;
    }

    .more {
    display: none;
    }

    .more div {
    padding: 0;
    list-style: none;
    }

    .more.appear {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    animation: .5s fadeIn;
    }

    @keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }
    100% {
        opacity: 1;
        transform: none;
    }
    }

    /* --- アクション委員会 --- */
    #action_committee{
        display: block;
        /* width: 128rem;
        margin: 0 auto; */
        /* 1. フォールバック値（IEなどが認識する値） */
        /* IEではこの margin が適用 */
        margin-left: 0; 
        margin-right: 0;

        /* 2. モダンブラウザ向けの値 */
        /* モダンブラウザはこれを上書きして適用 */
        margin-left: calc(max(0px, (100% - 100%) / 2) * -1);
        margin-right: calc(max(0px, (100% - 100%) / 2) * -1);
        
        /* paddingはcalc()を使っているため、フォールバックが必要な場合あり */
        padding-left: 0; 
        padding-right: 0;
        padding-left: calc((100% - 100%) / 2);
        padding-right: calc((100% - 100%) / 2);
    }
    /* スライドの動き等速 */
    #action_committee .swiper-wrapper {
        transition-timing-function: linear;
    }
    #action_committee .swiper-slide {
        display: flex;
        height: auto;
        font-size: 2.5rem;
        align-items: center;
        padding: 2rem 0;
        width: 40rem;
    }
    .action_committee_swiper{
        border-bottom: #000 1px solid;
    }
    #action_committee .swiper-slide img {
        height: auto;
        width: 7rem;
    }

    .action_committee_info {
    margin: 5rem auto;
    padding: 3em;
    background: #fff;
    border: 1px solid #000;
    position: relative;
    width: 88.5rem;
    }

    .action_committee_info:after {
    background-color: #8ab4cb; /* ずらしたボックスの背景色 */
    border: 1px solid #000;
    content: ''; /* 擬似要素にコンテンツなし */
    position: absolute; /* 配置（ここを動かす） */
    top: 7px; /* 上から7pxずらす */
    left: 7px; /* 左から7pxずらす */
    width: 100%; /* 幅100%（親要素に合わせる） */
    height: 100%; /* 高さ100%（親要素に合わせる） */
    z-index: -1; /* 背景として後ろに表示 */
    }
    .action_committee_info h6 { 
        font-size:2.6rem;
        text-align: center;
        margin: 2rem auto;
    }
    .action_committee_info p { 
        font-size:1.9rem;
        line-height: 3.4rem;
        text-align: justify;
        margin: 1rem auto;
    }

    .action_committee_people{
        width: 108rem;
        display: flex;
        flex-wrap: wrap;
        margin: 3rem auto;
        justify-content: space-between;
    }

    .person_box{
        width: 51.5rem;
        opacity: 0;
        transition: 0.5s;
    }
    .person_box.show {
        transform: translateY(0);
        opacity: 1;
    }

    .person_img{
        position: relative;
        width: 51.5rem;
        height: 29.4rem;
    }
    .name_box{
        display: block;
        padding: 1rem;
        position: absolute;
        bottom: 4rem;
        right: 0;
        background-color: #2e2e2e;
        color: #fff;
    }
    .name_box .action_job{
        font-size: 1.2rem;
        font-weight: 600;
        display: block;
        margin-bottom: 0.5rem;
    }
    .name_box .action_name{
        font-size: 1.6rem;
        font-weight: 600;
        display: block;
        text-align: right;
    }
    .person_box .person_sentence{
        display: block;
        position: relative;
        width: 47rem;
        min-height: 24rem;
        background-color: #fff;
        padding: 2rem 1.5rem;
        margin: -4rem 0 5rem auto;
        box-shadow: 0 0 8px gray;
    }
    .person_box .person_sentence h6{
        font-size: 2.2rem;
        margin-bottom: 2rem;
        line-height: 3.6rem;
        text-align: justify;
    }
    .person_box .person_sentence p{
        font-size: 1.4rem;
        line-height: 2.4rem;
        text-align: justify;
        font-kerning: none;
    }

    /* --- リンク --- */
    .link{
        display: block;
        width: 89rem;
        margin: 3.5rem auto;
        text-align: center;
    }
    .link h7{
        font-size: 7.8rem;
    }
    .banner_wrap{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        width: 89rem;
        margin: 5rem auto;
    }
    .banner_wrap::after {
        content: "";
        display: block;
        width: 27rem;
    }

    .banner_wrap img{
        width: 27rem;
        margin: 1.5rem 0;
    }

    /* --- フッター --- */
    footer{
        /* 1. フォールバック値（IEなどが認識する値） */
        /* IEではこの margin が適用 */
        margin-left: 0; 
        margin-right: 0;

        /* 2. モダンブラウザ向けの値 */
        /* モダンブラウザはこれを上書きして適用 */
        margin-left: calc(max(0px, (100% - 100%) / 2) * -1);
        margin-right: calc(max(0px, (100% - 100%) / 2) * -1);
        
        /* paddingはcalc()を使っているため、フォールバックが必要な場合あり */
        padding-left: 0; 
        padding-right: 0;
        padding-left: calc((100% - 100%) / 2);
        padding-right: calc((100% - 100%) / 2);
        
        padding-bottom: 7rem;
        background-color: #2e2e2e;
        color: #fff;
        text-align: center;
    }
    footer{
        padding: 4rem 0;
    }
    footer .foot_t{
        display: block;
        font-size: 3.6rem;
        margin: 4rem auto;
    }
    footer nav ul{
        display: flex;
        justify-content: center;
        font-size: 1.6rem;
        width: 40rem;
        margin: 0 auto;
    }
    footer nav ul li{
        padding: 0 2rem;
        display: block;
    }
    footer nav ul li:first-of-type {
        border-right: 1px #fff solid;
    }
    footer .sns_footer{
        display: flex;
        width: 10rem;
        justify-content: space-around;
        margin: 3rem auto 9rem;
    }

    footer .sns_footer img{
        width: 3rem;
    }
    /*------ プライバシーポリシー -------*/
    .privacy_policy{
        /* 1. フォールバック値（IEなどが認識する値） */
        /* IEではこの margin が適用 */
        margin-left: 0; 
        margin-right: 0;
        /* 2. モダンブラウザ向けの値 */
        /* モダンブラウザはこれを上書きして適用 */
        margin-left: calc(max(0px, (100% - 100%) / 2) * -1);
        margin-right: calc(max(0px, (100% - 100%) / 2) * -1);
        
        /* paddingはcalc()を使っているため、フォールバックが必要な場合あり */
        padding-left: 0; 
        padding-right: 0;
        padding-left: calc((100% - 100%) / 2);
        padding-right: calc((100% - 100%) / 2);
        padding-top: 5rem;
        padding-bottom: 5rem;

        background-color: #c7baad;
    }

    .privacy_policy .policy_sentence{
        width: 110rem;
        display: block;
        margin: 0 auto;
        padding: 3rem;
        background-color: #fff;
    }
    .privacy_policy h1{
        font-size: 3rem;
        font-weight: bold;
        margin: 1.5rem 0;
        line-height: 4rem;
    }
    .privacy_policy h2{
        font-size: 2rem;
        font-weight: bold;
        margin: 1.5rem 0;
        line-height: 4rem;
    }
    .privacy_policy p{
        font-size: 1.6rem;
        text-align: justify;
        line-height: 3rem;
    }
}
/* ---------------------------------------------------- */
/* 3. レスポンシブ対応 (768px以下) */
/* ---------------------------------------------------- */

@media (max-width: 768px) {
    header{
        position: fixed;
        display: block;
        width: 100%;
        margin: 0 auto;
        top: 0;
        left: 0;
        right: 0;
        z-index: 999;
    }
    .header_menu{
        position: absolute;
        right: 0;
        left: 6rem;
        top: 0;
        width: 100%;
        height: 100vh;
        transform: translateX(100%);
        background-color: #fff;
        transition: ease .4s;
        display: flex;
        align-items: center;
    }
    .header_menu ul{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        padding: 2rem 2rem;
        position: relative;
        width: 100%;
    }
    .header_menu li{
        padding: 0rem 1rem;
        list-style: none;
        display: block;
        width: 90%;
        height: 4rem;
        line-height: 4rem;
    }
    .header_menu a{
        text-decoration: none;
        color: #2e2e2e;
        font-size: 1.5rem;
        font-weight: bold;
    }
    .index_head.header_menu li.sp_head:nth-of-type(6),
    .privacy_head.header_menu li.sp_head:nth-of-type(7) {
        border-top: 1px solid #737373;
        padding-top: 1.5rem !important;
        padding-bottom: 0.75rem !important;
        margin: 0.5rem 10% 0 0;
        line-height: 2rem;
    }
    .index_head.header_menu li.sp_head:nth-of-type(7),
    .privacy_head.header_menu li.sp_head:nth-of-type(8) {
        border-bottom: 1px solid #737373;
        padding-top: 0.75rem !important;
        padding-bottom: 1.5rem !important;
        margin: 0 10% 0.5rem 0;
        line-height: 2rem;
    }
    .header_menu li.sp_head a{
        font-size: 1.3rem;
        color: #737373;
    }

    .header_menu a:hover{
        opacity: 0.8;
        transition: 0.8;
    }
    .header_menu li.sp_head_sns{
        width: 5rem !important;
        height: 5rem;
        margin-right: 1rem !important;
        margin-top: 0.5rem;
    } 
    .head_icon{
        width: 5rem;
        height: 5rem;
    }
    /* ハンバーガーメニュー */
    .header__hamburger {
    width: 3rem;
    height: 4.8rem;
    }
    .hamburger {
    background-color: transparent;
    border-color: transparent;
    z-index: 9999;
    position: absolute;
    right: 2rem;
    top: 2rem;
    }
    /* ハンバーガーメニューの線 */
    .hamburger span {
    width: 100%;
    height: 1px;
    background-color: #000;
    position: relative;
    transition: ease .4s;
    display: block;
    }
    .hamburger span:nth-child(1) {
    top: 0;
    }
    .hamburger span:nth-child(2) {
    margin: 8px 0;
    }
    .hamburger span:nth-child(3) {
    top: 0;
    }
    /* ハンバーガーメニュークリック後のスタイル */
    .header_menu.active {
    transform: translateX(0);
    }
    .hamburger.active span:nth-child(1) {
    top: 5px;
    transform: rotate(45deg);
    }
    .hamburger.active span:nth-child(2) {
    opacity: 0;

    }
    .hamburger.active span:nth-child(3) {
    top: -13px;
    transform: rotate(-45deg);
    }

    .container {
        display: block;
        min-height: 100vh;
    }
    .content-wrap{
        margin: 0 auto;
    }
    .top_image_wrap{
        width: 100%;
        margin: 0 auto;
        position: relative;
        min-height: 100vh;
        overflow: hidden;
        background: #eaeaea;
    }

    /* iOS/Androidのアドレスバー対策：あれば100svhを優先 */
    @supports (height: 100svh) {
    .top_image_wrap { min-height: 100svh; }
    }

    .top_image{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url(../img/top_img_sp.jpg);
        background-size:cover;
        background-repeat: no-repeat;
        background-position: center;
    }
    .top_image video{
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
        object-position: center;
        display: block;
        z-index: 1;
        background-color: #eaeaea;
    }
    .container {
        position: static;
    }
    .hint_wrap{
        display: block;
        width: 100%;
        max-width: 60rem;
        margin: 5rem auto 50rem;
        padding: 0;
        position: relative;
    }
    .hint_wrap .left_img{
        display: block;
        position: absolute;
        width: 48%;
        height: 40rem;
        left: 0;
    }
    .hint_wrap .left_img .left01{
        position: absolute;
        bottom: 0;
        right: 1rem;
        width: 16.2rem;
        z-index: 1;
    }
    .hint_wrap .left_img .left02{
        position: absolute;
        top:5rem;
        left: 0;
        width: 16rem;
    }
    .hint_wrap .left_img .left03{
        position: absolute;
        top:0;
        left: 12rem;
        width: 8rem;
        z-index: 1;
    }
    .hint_wrap .right_img{
        display: block;
        position: absolute;
        width:48%;
        height: 40rem;
        right: 0;
    }
    .hint_wrap .right_img .right01{
        position: absolute;
        top: 23rem;
        right:0;
        width: 20rem;
    }
    .hint_wrap .right_img .right02{
        position: absolute;
        top: 0;
        right: 2rem;
        width: 19rem;
        z-index: 1;
    }
    .hint_wrap .sentence{
        display: flex;
        flex-wrap: nowrap;
        margin: 0 auto 2rem;
        align-content: center;
        justify-content: center;
    }
    .hint_wrap .sentence h2{
        font-size: 1.85rem;
        line-height: 2.6rem;
        writing-mode: vertical-rl;
        order: 2;
        margin-left: 1.5rem;
        white-space: nowrap;
    }
    .hint_wrap .sentence p{
        font-size: 1.5rem;
        line-height: 2.7rem;
        writing-mode: vertical-rl;
        white-space: nowrap;
    }

    /* --- くう・すむ・おこす --- */
    .slide_con_back{
        /* 1. フォールバック値（IEなどが認識する値） */
        /* IEではこの margin が適用 */
        margin-left: 0; 
        margin-right: 0;
        /* 2. モダンブラウザ向けの値 */
        /* モダンブラウザはこれを上書きして適用 */
        margin-left: calc(max(0px, (100% - 100%) / 2) * -1);
        margin-right: calc(max(0px, (100% - 100%) / 2) * -1);
        
        /* paddingはcalc()を使っているため、フォールバックが必要な場合あり */
        padding-left: 0; 
        padding-right: 0;
        padding-left: calc((100% - 100%) / 2);
        padding-right: calc((100% - 100%) / 2);

        margin-top: 8rem;
        margin-bottom: 4rem;
        padding-bottom:65rem;
        position: relative;
    }
    #business.slide_con_back{
        margin-bottom: 8rem;
    }
    .slide_con_wrap{
        width: 100%;
        margin: 0 auto;
        position: relative;
    }
    .slide_wrap{
        display: block;
        width: 100%;
        height: 48.7rem;
        margin: 0 auto;
    }
    .slide_con_wrap h2{
        writing-mode: vertical-rl;
        display: inline-block;
        line-height: 4rem;
        position: absolute;
        top:2rem;
        right: 1rem;
        z-index: 10;
    }
    .slide_con_wrap h2 span.slide_first_f{
        font-size: 1.9em;
        background-color: #fff;
        padding: 0.1em 0em;
    }
    .slide_con_wrap h2 span.slide_second_f{
        font-size: 2.45em;
        background-color: #fff;
        padding: 0.1em 0em;
        margin-top: 3rem;
        white-space: nowrap;
    }
    .swiper-slide img {
        height: 48.7rem;
        width: 100%;
        object-fit: cover;
    }
    .con_wrap {
        display: flex;
        width: 100%;
        margin: 0 auto;
        flex-wrap: wrap;
        position: relative;
    }
    .con_column_wrap {
        width: 100%;
        max-width: 50rem;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
    }
    .people_con{
        display: flex;
        width: 30rem;
        height: 10rem;
        padding: 0 1.5rem;
        position: absolute;
        bottom: 6rem;
        left: 0;
        right: 0;
        margin: 0 auto;
        border-right: 1px solid #2e2e2e;
        border-left: 1px solid #2e2e2e;
    }
    .people_con .profile_wrap{
        margin-left: 2rem;
        display: flex;
        flex-wrap: wrap;
        width: 14.8rem;
    }
    .people_con img.icon_img {
        width: 10rem;
        height: 10rem;
    }
    .people_con .profile_wrap .job{
        font-size: 1.4rem;
        display: block;
        width: 100%;
    }
    .people_con .profile_wrap .name{
        font-size: 1.6rem;
        display: block;
        width: 100%;
    }

    .people_con .profile_wrap .sns img{
        height: 5rem;
        margin-top:0.5rem;
        margin-right:0.5rem;
    }
    .left_con{
        display: block;
        width: 90%;
        margin: 0 auto;
        order: 1;
    }
    .left_con .left_img{
        display: block;
        position:relative;
    }
    .info_wrap {
        margin: 0 auto;
    }
    .info_con{
        margin: 2rem 0 5rem;
    }
    .info_con .b_box{
        display: block;
        width: 8rem;
        font-size: 1.6rem;
        text-align: center;
        padding: 0.5rem 1rem;
        background-color: #2e2e2e;
        color: #fff;
    }
    .info_con p{
        font-size: 1.6rem;
        margin-top: 1rem;
    }
    .center_con{
        display: block;
        position:relative;
        width: 90%;
        padding: 3rem 2rem;
        background-color: #fff;
        border: #2e2e2e 1px solid;
        z-index: 1;
        order: 0;
        margin: -8rem auto 0;
    }
    .center_con::after{
        clear: both;
    }
    .center_con .center_con_title{
        margin: 0.5rem auto 3rem;
        font-size: 10rem;
    }
    .center_con .center_con_title h3{
        font-size: 6.65rem;
        text-align: center;
    }
    .center_con .center_con_title h4{
        font-size: 2rem;
        text-align: right;
        position: relative;
        line-height: 3rem;
        width: 50%;
        margin: 0 auto;
        left: 3rem;
    }
    /* 疑似要素で線を作成 */
    .center_con .center_con_title h4::before {
        content: "";
        position: absolute;
        /* 線の位置を微調整 */
        bottom: 0.5em; /* ベースラインから少し下げるなどして調整 */
        left: 0;
        right: 5rem; /* 右側のスペースを考慮して線の長さを調整 */
        height: 1.5px;
        background-color: #333;
    }
    .center_con p{
        font-size: 1.6rem;
        line-height: 2.8rem;
        text-align: justify;
        word-wrap: break-word;
    }
    .center_con p:not(:last-child){
        margin-bottom:1rem;
    }
    .right_con{
        display: block;
        width: 90%;
        margin: 0 auto;
    }
    .right_con .right_img{
        display: block;
        position:relative;
    }

    #eat{
        background-color: #a0c364;
    }
    #eat .center_con::before{
        width: 120px;
        content: url('../img/eat_head_icon.png');
        position: absolute;
        top: -60px;
        right: 0;
        left: 0;
        margin: 0 auto;
    }
    #eat .left_con .left01{
        position: absolute;
        top: 4rem;
        right: 4rem;
        height: 12.2rem;
        z-index: 1;
    }
    #eat .left_con .left02{
        position: absolute;
        top: 20rem;
        right: 0rem;
        height: 23.3rem;
    }
    #eat .left_con .left03{
        position: absolute;
        top: 15rem;
        left: 3rem;
        height: 15rem;
        z-index: 2;
    }

    #eat .right_con .right01{
        position: absolute;
        top: 43rem;
        left: 5rem;
        height: 15rem;
    }
    #eat .right_con .right02{
        position: absolute;
        top: 15rem;
        height: 14.07rem;
        left: 0rem;
    }

    #live{
        background-color: #f8e67f;
    }
    #live .center_con::before{
        width: 100px;
        content: url('../img/live_head_icon.png');
        position: absolute;
        top: -70px;
        right: 0;
        left: 0;
        margin: 0 auto;
    }
    #live .left_con .left01{
        position: absolute;
        top: 3rem;
        right: 3rem;
        height: 11.8rem;
        z-index: 1;
    }
    #live .left_con .left02{
        position: absolute;
        top: 20rem;
        right: 0;
        height: 23.2rem;
    }
    #live .left_con .left03{
        position: absolute;
        top: 13rem;
        left: 4rem;
        height: 12rem;
        z-index: 1;
    }

    #live .right_con .right01{
        position: absolute;
        top: 44rem;
        left: 1rem;
        height: 12rem;
    }
    #live .right_con .right02{
        position: absolute;
        top: 14rem;
        left: 0;
        height: 14.07rem;
    }
    #business{
        background-color: #c7baad;
    }
    #business .center_con::before{
        width: 100px;
        content: url('../img/business_head_icon.png');
        position: absolute;
        top: -55px;
        right: 0;
        left: -4rem;
        margin: 0 auto;
    }
    #business .left_con .left01{
        position: absolute;
        top: 8rem;
        right: 4rem;
        height: 11.3rem;
    }
    #business .left_con .left02{
        position: absolute;
        top: 21rem;
        right: 0;
        height: 23.4rem;
    }
    #business .left_con .left03{
        position: absolute;
        top: 17.5rem;
        left: 2rem;
        height: 12.2rem;
        z-index: 1;
    }
    #business .right_con .right01{
        position: absolute;
        top: 44rem;
        left: 3rem;
        height: 9.7rem;
    }
    #business .right_con .right02{
        position: absolute;
        top: 17rem;
        left: 0;
        height: 14.175rem;
    }
    #business .center_con .center_con_title h4{
        font-size: 2rem;
        text-align: right;
        position: relative;
        line-height: 3rem;
        width: 70%;
        margin: 0 auto;
        left: 3rem;
    }
    /* 疑似要素で線を作成 */
    #business .center_con .center_con_title h4::before {
        content: "";
        position: absolute;
        /* 線の位置を微調整 */
        bottom: 0.5em; /* ベースラインから少し下げるなどして調整 */
        left: 0;
        right: 16rem; /* 右側のスペースを考慮して線の長さを調整 */
        height: 1.5px;
        background-color: #333;
    }

    /* --- ブック --- */

    .book_list{
        /* 1. フォールバック値（IEなどが認識する値） */
        /* IEではこの margin が適用 */
        margin-left: 0; 
        margin-right: 0;

        /* 2. モダンブラウザ向けの値 */
        /* モダンブラウザはこれを上書きして適用 */
        margin-left: calc(max(0px, (100% - 100%) / 2) * -1);
        margin-right: calc(max(0px, (100% - 100%) / 2) * -1);
        
        /* paddingはcalc()を使っているため、フォールバックが必要な場合あり */
        padding-left: 0; 
        padding-right: 0;
        padding-left: calc((100% - 100%) / 2);
        padding-right: calc((100% - 100%) / 2);
        
        padding-bottom: 7rem;
        background-color: #eaeaea;
    }
    .new_book{
        display: flex;
        flex-wrap: wrap;
        width: 90%;
        margin: 0 auto;
        /* padding: 5rem 0; 最新が出るたらこちらにする */
        padding: 5rem 0 1rem;
    }

    /* ブック 最新が出るまで？*/
    .new_book h3.book_title{
        font-size: 3rem;
        line-height: 4rem;
        margin: 0 auto 2rem;
    }
    .new_book p{
        font-size: 1.5rem;
        line-height: 2.7rem;
        text-align: justify;
        margin-bottom: 3rem;
    }
    .new_book .view_small_box small{
        font-size: 1.2rem;
        padding-left:1.2rem;
		text-indent:-1.2rem;
        margin: 0.5rem auto 2rem;
    }
    /*ここまで*/

    .new_book .book_info{
        width: 100%;
        margin: 0 auto;
    }
    .new_book .book_br_sp{
        display: none;
    }
    .new_book .book_info h3{
        font-size: 3rem;
        line-height: 4rem;
        margin-bottom: 1rem;
    }
    .new_book .book_info h4{
        font-size: 2.5rem;
        line-height: 4rem;
    }
    .new_book .book_info .book_title_sub{
        display: flex;
        align-items: end;
        margin-bottom: 3rem;
    }
    .new_book .book_info span.new_box{
        font-size: 1.2rem;
        color: #fff;
        background-color: #2e2e2e;
        order: 0;
        /*width: 5.4rem; new*/
        width: 9rem;
        height: 2.1rem;
        line-height: 1.9rem;
        text-align: center;
        margin-right: 1rem;
        margin-bottom:0.5rem;
    }
    .new_book .book_info p{
        font-size: 1.5rem;
        line-height: 2.7rem;
        text-align: justify;
        margin-bottom: 3rem;
    }
    .new_book .new_book_img{
        width: 35rem;
        height: 38rem;
        background-color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
    }
    .new_book .new_book_img .pickup_img,
    .new_book .new_book_img .comingsoon_img{
        width: 19.7rem;
        height: 30.2rem;
        position: relative;
    }
    .new_book .new_book_img img{
        width: 19.7rem;
        height: 30.2rem;
    }
    .new_book .new_book_img .pickup_img::before{
        content: '';
        display: inline-block;
        width: 8.3rem;
        height: 8.3rem;
        background-image: url(../img/pickup.png);
        background-size: contain;
        vertical-align: middle;
        position: absolute;
        top: -2rem;
        left: -4rem;
    }
    .new_book .new_book_img .comingsoon_img::before{
        content: '';
        display: inline-block;
        width: 8.3rem;
        height: 8.3rem;
        background-image: url(../img/comingsoon_img.png);
        background-size: contain;
        vertical-align: middle;
        position: absolute;
        top: -2rem;
        left: -4rem;
    }
    .new_book .book_button{
        width: 52rem;
        order: 1;
        margin: 2rem auto 0;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: center;
    }
    .new_book .book_button .pdf_view{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 21.3rem;
        height: 4.25rem;
        line-height: 4.25rem;
        font-size: 1.6rem;
        text-align: center;
        background-color: #8ab4cb;
        color: #fff;
        border: #8ab4cb 1px solid;
        margin:0 auto 1rem;
        position: relative;
    }
    .new_book .book_button .pdf_view::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        right: 2rem;
        margin: auto;
        transform: rotate(45deg);
        border-top: 2px solid #fff;
        border-right: 2px solid #fff;
        box-sizing: border-box;
        width: 1.4rem;
        height: 1.4rem;
        transition: 0.3s;
    }
    .new_book .book_button .view_small_box small{
        font-size: 1.2rem;
        padding-left:1.2rem;
		text-indent:-1.2rem;
        width: 21.5rem;
        display: block;
        margin: 0.5rem auto 2rem;
    }

    .new_book .book_button .pdf_dl{
        display: block;
        width: 21.3rem;
        height: 4.25rem;
        line-height: 4.25rem;
        font-size: 1.6rem;
        text-align: center;
        background-color: #fff;
        color: #000;
        border: #000 1px solid;
        margin:0 auto;
        position: relative;
    }
    .new_book .book_button .pdf_dl::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 2rem;
    margin: auto;
    transform: rotate(45deg);
    border-top: 2px solid #000;
    border-right: 2px solid #000;
    box-sizing: border-box;
    width: 1.4rem;
    height: 1.4rem;
    transition: 0.3s;
    }
    /* SVGの中の線の初期設定 */
    .new_book .book_button .pdf_view .icon-svg {
        width: 3.5rem;
        height: 3.5rem;
    }
    .new_book .book_button .pdf_view .icon-svg .b {
        fill: none;
        stroke: #fff;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 2px;
        transition: stroke 0.3s ease;
    }
    .new_book .book_button .pdf_view:hover .icon-svg .b {
        stroke: #8ab4cb;
    }

    .book_list h5{
    align-items: center;
    display: flex;
    font-size: 3.1rem;
    width: 90%;
    margin: 0 auto 2rem;
    }
    .book_list h5::before,
    .book_list h5::after {
    background-color: #000; /* 横線の色 */
    content: "";
    flex-grow: 1; /* 横幅いっぱい */
    height: 1px; /* 横線の高さ */
    }
    .book_list h5::before {
    margin-right: 0.5rem; /* 文字との余白 */
    }
    .book_list h5::after {
    margin-left: 0.5rem; /* 文字との余白 */
    }
    .book_list .archive_list{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    width: 100%;
    margin: 0 auto;
    }
    .archive_book{
        display: block;
        width: 14rem;
        margin: 1.5rem;
    }
    .archive_list::after,
    .more::after {
        content: "";
        display: block;
        width: 14rem;
        margin: 1.5rem;
    }

    .archive_book img{
        display: block;
        width: 14rem;
        height: 22rem;
        margin: 0 auto;
    }
    .archive_book h6{
        font-size: 1.4rem;
        text-align: center;
        margin: 1rem auto;
    }
    .archive_book .pdf_view{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 14rem;
        height: 2.8rem;
        line-height: 2.8rem;
        font-size: 1.5rem;
        text-align: center;
        background-color: #8ab4cb;
        color: #fff;
        border: #8ab4cb 1px solid;
        margin-bottom: 1rem;
        position: relative;
    }
    .archive_book .pdf_dl{
        display: block;
        width: 14rem;
        height: 2.8rem;
        line-height: 2.8rem;
        font-size: 1.5rem;
        text-align: center;
        background-color: #fff;
        color: #000;
        border: #000 1px solid;
        position: relative;
    }
    .archive_book .pdf_view::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 1rem;
    margin: auto;
    transform: rotate(45deg);
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    box-sizing: border-box;
    width: 1.3rem;
    height: 1.3rem;
    transition: 0.3s;
    }
    .archive_book .pdf_dl::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 1rem;
    margin: auto;
    transform: rotate(45deg);
    border-top: 2px solid #000;
    border-right: 2px solid #000;
    box-sizing: border-box;
    width: 1.3rem;
    height: 1.3rem;
    transition: 0.3s;
    }
    .new_book .book_button .pdf_view:hover,
    .pdf_view:hover{
        background-color: #fff;
        color: #8ab4cb;
        border-color: #fff;
        transition: 0.3s;
    }
    .new_book .book_button .pdf_view:hover::after,
    .pdf_view:hover::after{
        border-color: #8ab4cb;
    }
    .new_book .book_button .pdf_dl:hover,
    .pdf_dl:hover{
        background-color: #8ab4cb;
        color: #fff;
        border-color: #fff;
        transition: 0.3s;
    }
    .new_book .book_button .pdf_dl:hover::after,
    .pdf_dl:hover::after{
        border-color: #fff;
    }
        /* SVGの中の線の初期設定 */
    .archive_book .pdf_view .icon-svg {
        width: 3rem;
        height: 3rem;
    }
    .archive_book .pdf_view .icon-svg .b {
        fill: none;
        stroke: #fff;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 2px;
        transition: stroke 0.3s ease;
    }
    .archive_book .pdf_view:hover .icon-svg .b {
        stroke: #8ab4cb;
    }

    /* --- moreボタン--- */

    .book_list .btn-box {
    width: 90%;
    margin: 1rem auto;
    text-align: center;
    }
    .book_list .btn-box button {
    width: 33rem;
    height: 3.3rem;
    padding: 8px;
    font-size: 1.2rem;
    color: #000;
    border: #000 1px solid;
    user-select: none;
    cursor: pointer;
    text-align: center;
    }

    .book_list .btn-box button:hover {
    opacity: .6;
    }

    .more {
    display: none;
    }

    .more div {
    padding: 0;
    list-style: none;
    }

    .more.appear {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    animation: .5s fadeIn;
    }

    @keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }
    100% {
        opacity: 1;
        transform: none;
    }
    }

    /* --- アクション委員会 --- */
    #action_committee{
        display: block;
        /* width: 128rem;
        margin: 0 auto; */
        /* 1. フォールバック値（IEなどが認識する値） */
        /* IEではこの margin が適用 */
        margin-left: 0; 
        margin-right: 0;

        /* 2. モダンブラウザ向けの値 */
        /* モダンブラウザはこれを上書きして適用 */
        margin-left: calc(max(0px, (100% - 100%) / 2) * -1);
        margin-right: calc(max(0px, (100% - 100%) / 2) * -1);
        
        /* paddingはcalc()を使っているため、フォールバックが必要な場合あり */
        padding-left: 0; 
        padding-right: 0;
        padding-left: calc((100% - 100%) / 2);
        padding-right: calc((100% - 100%) / 2);
    }
    /* スライドの動き等速 */
    #action_committee .swiper-wrapper {
        transition-timing-function: linear;
    }
    #action_committee .swiper-slide {
        display: flex;
        height: auto;
        font-size: 2.5rem;
        align-items: center;
        padding: 2rem 0;
        width: 40rem;
    }
    .action_committee_swiper{
        border-bottom: #000 1px solid;
    }
    #action_committee .swiper-slide img {
        height: auto;
        width: 7rem;
    }

    .action_committee_info {
    margin: 5rem auto;
    padding: 3em;
    background: #fff;
    border: 1px solid #000;
    position: relative;
    width: 33.7rem;
    }

    .action_committee_info:after {
    background-color: #8ab4cb; /* ずらしたボックスの背景色 */
    border: 1px solid #000;
    content: ''; /* 擬似要素にコンテンツなし */
    position: absolute; /* 配置（ここを動かす） */
    top: 7px; /* 上から7pxずらす */
    left: 7px; /* 左から7pxずらす */
    width: 100%; /* 幅100%（親要素に合わせる） */
    height: 100%; /* 高さ100%（親要素に合わせる） */
    z-index: -1; /* 背景として後ろに表示 */
    }
    .action_committee_info h6 { 
        font-size:1.9rem;
        text-align: center;
        margin: 2rem auto;
    }
    .action_committee_info p { 
        font-size: 1.5rem;
        line-height: 2.7rem;
        text-align: justify;
        margin: 1rem auto;
    }

    .action_committee_people{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        margin: 3rem auto;
        justify-content: center;
    }
    .person_box{
        width: 33rem;
        margin: 0 0.5rem;
    }
    .person_img{
        position: relative;
        width: 33rem;
    }
    .person_img img{
        width: 33rem;
    }
    .name_box{
        display: block;
        padding: 1rem;
        position: absolute;
        bottom: 3rem;
        right: 0;
        background-color: #2e2e2e;
        color: #fff;
    }
    .name_box .action_job{
        font-size: 1.1rem;
        font-weight: 600;
        display: block;
        margin-bottom: 0.5rem;
    }
    .name_box .action_name{
        font-size: 1.5rem;
        font-weight: 600;
        display: block;
        text-align: right;
    }
    .person_box .person_sentence{
        display: block;
        position: relative;
        width: 31.7rem;
        min-height: 16.3rem;
        background-color: #fff;
        padding: 2rem 1.5rem;
        margin: -3rem 0 5rem auto;
        box-shadow: 0 0 8px gray;
    }
    .person_box .person_sentence h6{
        font-size: 1.85rem;
        margin-bottom: 1.5rem;
        line-height: 3rem;
        text-align: justify;
    }
    .person_box .person_sentence p{
        font-size: 1.5rem;
        line-height: 2.75rem;
        text-align: justify;
        font-kerning: none;
    }

    /* --- リンク --- */
    .link{
        display: block;
        width: 100%;
        margin: 3.5rem auto;
        text-align: center;
    }
    .link h7{
        font-size: 3rem;
    }
    .banner_wrap{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        width: 90%;
        margin: 3rem auto 5rem;
    }
    .banner_wrap::after {
        content: "";
        display: block;
        width: 33rem;
    }

    .banner_wrap img{
        width: 33rem;
        margin: 1.5rem 0;
    }

    /* --- フッター --- */
    footer{
        /* 1. フォールバック値（IEなどが認識する値） */
        /* IEではこの margin が適用 */
        margin-left: 0; 
        margin-right: 0;

        /* 2. モダンブラウザ向けの値 */
        /* モダンブラウザはこれを上書きして適用 */
        margin-left: calc(max(0px, (100% - 100%) / 2) * -1);
        margin-right: calc(max(0px, (100% - 100%) / 2) * -1);
        
        /* paddingはcalc()を使っているため、フォールバックが必要な場合あり */
        padding-left: 0; 
        padding-right: 0;
        padding-left: calc((100% - 100%) / 2);
        padding-right: calc((100% - 100%) / 2);
        
        padding-bottom: 7rem;
        background-color: #2e2e2e;
        color: #fff;
        text-align: center;
    }
    footer{
        padding: 4rem 0;
    }
    footer .foot_t{
        display: block;
        font-size: 3.6rem;
        margin: 4rem auto;
    }
    footer nav ul{
        display: flex;
        justify-content: center;
        font-size: 1.6rem;
        /*width: 40rem;*/
        margin: 0 auto;
    }
    footer nav ul li{
        padding: 0 2rem;
        display: block;
    }
    footer nav ul li:first-of-type {
        border-right: 1px #fff solid;
    }
    footer .sns_footer{
        display: flex;
        width: 10rem;
        justify-content: space-around;
        margin: 3rem auto 9rem;
    }

    footer .sns_footer img{
        width: 3rem;
    }
    /*------ プライバシーポリシー -------*/
        .privacy_policy{
        /* 1. フォールバック値（IEなどが認識する値） */
        /* IEではこの margin が適用 */
        margin-left: 0; 
        margin-right: 0;
        /* 2. モダンブラウザ向けの値 */
        /* モダンブラウザはこれを上書きして適用 */
        margin-left: calc(max(0px, (100% - 100%) / 2) * -1);
        margin-right: calc(max(0px, (100% - 100%) / 2) * -1);
        
        /* paddingはcalc()を使っているため、フォールバックが必要な場合あり */
        padding-left: 0; 
        padding-right: 0;
        padding-left: calc((100% - 100%) / 2);
        padding-right: calc((100% - 100%) / 2);
        padding-top: 5rem;
        padding-bottom: 5rem;

        background-color: #c7baad;
    }
    .privacy_policy .policy_sentence{
        width: 95%;
        display: block;
        margin: 0 auto;
        padding: 3rem;
        background-color: #fff;
    }
    .privacy_policy h1{
        font-size: 2.3rem;
        font-weight: bold;
        margin: 1.5rem 0;
        line-height: 4rem;
    }
    .privacy_policy h2{
        font-size: 1.8rem;
        font-weight: bold;
        margin: 1.5rem 0;
        line-height: 3rem;
    }
    .privacy_policy p{
        font-size: 1.5rem;
        text-align: justify;
        line-height: 2.5rem;
    }
}