img {
    width: 100%;      /* 親要素いっぱいに広げる */
    display: block;   /* これで画像の下にできる数ピクセルの隙間が消える */
    height: auto;     /* 比率を維持 */
}

section {
    width: 100%;
    max-width: 750px; /* LPの画像サイズに合わせる */
    margin: 0 auto;    /* 中央寄せ */
    position: relative;
}

.cta{
    z-index: 99;
}


html{
    background: #FFF4EE;
}

body{
    margin: 0;
}

section.fv{
    z-index: 98;
}

section.fv .fv_cta{
    position: absolute;
    bottom: -80px;
}
@media (max-width: 750px) {
    section.fv .fv_cta{
        position: absolute;
        left: 0;
        width: 100%;
        bottom: -9vw;
    }
}

section.worry{
    position: relative;
    z-index: 97;
}

section.support{
    position: relative;
    z-index: 96;
}

section.support .support_cta{
    position: absolute;
    bottom: -64px;
}

@media (max-width: 750px) {
    section.support .support_cta{
        position: absolute;
        left: 0;
        width: 100%;
        bottom: -20vw;
    }
}

section.about{
    position: relative;
    z-index: 97;
}

section.about .about_cta{
    position: absolute;
    bottom: -58px;
}

@media (max-width: 750px) {
    section.about .about_cta{
        position: absolute;
        left: 0;
        width: 100%;
        bottom: 4vw;
    }
}

section.staff{
    position: relative;
}

section.staff .staff_cta{
    position: absolute;
    bottom: -60px;
}

@media (max-width: 750px) {
    section.staff .staff_cta{
        position: absolute;
        left: 0;
        width: 100%;
        bottom: -12vw;
    }
}

section.voice{
    position: relative;
    z-index: 97;
    
}

section.voice .voice_cta{
    position: absolute;
    bottom: -70px;
}

@media (max-width: 750px) {
    section.voice .voice_cta{
        position: absolute;
        left: 0;
        width: 100%;
        bottom: -19vw;
    }
}

section.flow{
    position: relative;
    z-index: 95;
    
}

section.flow .flow_cta{
    position: absolute;
    bottom: -70px;
}

@media (max-width: 750px) {
    section.flow .flow_cta{
        position: absolute;
        left: 0;
        width: 100%;
        bottom: -19vw;
    }
}

section.table{
    position: relative;
    z-index: 94;
}

/* =================================================
   スタッフ紹介スライダー集約版
   ================================================= */

/* 1. スライダーの外枠 */
.staff_slider {
    position: relative;
    width: 100%;
    background: url(./img/staff_02.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
@media (max-width: 750px) {
    .staff_slider {
        background: url(./img/staff_02_sp.webp);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
}


.slide-items {
    position: relative; /* absoluteから変更して配置を安定化 */
    width: 668px;       /* PC時の固定幅 */
    margin: 0 auto; /* 中央寄せ */
    padding: 40px 0;
}

@media (max-width: 750px) {
    .slide-items {
        width: 83% !important; /* スマホ時に全体の幅を83%に絞る */
        margin: 0 auto 0;   /* これで83%の箱が中央に寄る */
        padding: 40px 0 10px;
    }
}

/* 2. Slick内部構造のリセット（ズレ防止） */
.slick-slider,
.slick-list {
    /* width: 100% !important; */
    position: relative !important;
    left: 0 !important;
}

/* 各スライドの設定 */
.slide-items .slick-slide {
    display: flex !important;
    justify-content: center;
    align-items: center;
    padding: 0 9px; /* スライド間の隙間 */
    box-sizing: border-box;
    height: auto;
}

.slide-items img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    object-fit: cover;
}

/* 3. 矢印ボタンの設定 */
.slick-prev, 
.slick-next {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 100;
    cursor: pointer;
    border: none;
    outline: none;
    background: transparent;
}

/* 矢印の位置（83%の箱の端に配置） */
.slick-prev {
    left: 10px !important;
}
.slick-next {
    right: 10px !important;
}

/* 矢印の見た目 */
.slick-prev:before, .slick-next:before {
    font-family: 'slick';
    font-size: 20px;
    color: #663A22;
    opacity: .75;
}

/* 4. CTA共通設定 */
.cta img {
    transition: all 0.3s ease;
}

.cta img:hover {
    filter: brightness(1.1) saturate(0.8);
    cursor: pointer;
}


/* 1. Slickのデフォルト記号を徹底的に消す */
.slick-prev:before, 
.slick-next:before {
    display: none !important;
    content: "" !important;
}

/* 2. 矢印ボタンのベース設定 */
.slick-prev, 
.slick-next {
    width: 20px !important;
    height: 20px !important;
    background-color: transparent !important; /* Slickの透明指定をここで上書き固定 */
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    /* font-size: 0 を入れると、残存するテキストによるズレを防げます */
    font-size: 0 !important;
    color: transparent !important;
}

/* 3. 左矢印：background-imageとして個別に指定 */
.slick-prev {
    background-image: url('./img/arrow.png') !important;
    left: -20px !important;
    /* 左向きにするために反転させる必要がある場合は以下を追加 */
    /* transform: translateY(-50%) scaleX(-1) !important; */
}

/* 4. 右矢印 */
.slick-next {
    background-image: url('./img/arrow_right.png') !important;
    /* 前の画像で右に寄りすぎていたので調整（83%の箱の内側に置くならプラス値） */
    right: -20px !important; 
}

/* 5. ホバー・フォーカス時にSlickが背景を白くしたりするのを防ぐ */
.slick-prev:hover, .slick-prev:focus{
    background-color: transparent !important;
    background-image: url('./img/arrow.png') !important;
}

.slick-next:hover, .slick-next:focus {
    background-color: transparent !important;
    background-image: url('./img/arrow_right.png') !important;
}

footer .footer_link{
    display: block;
    margin-right: 10px;
    margin: 0 auto;
    text-align: center;
}

footer .footer_link a{
    color: #663A22;
    text-decoration: none;
    font-size: 14px;
    line-height: 1.2;
    letter-spacing: 0.05em;
    text-align: center;
    text-transform: uppercase;
    text-decoration: underline;
    text-decoration-color: #663A22;
    text-decoration-thickness: 1px;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    padding: 0 20px;
}

footer .copylight{
    font-size: 10px;
    text-align: center;
}

.layout-nocover .nocover-body {
    background-color: #FFF4EE !important;
}

.table_bg{
    background-color:#FFF4EE; 
    padding: 40px 280px;
    width: 750px;
    margin: 0 auto;
}

@media (max-width: 1310px) {
    .table_bg{
        padding: 40px 0px;
    }
}

@media (max-width: 750px) {
    .table_bg{
        width: 90%;
        padding: 40px 0;
    }
}