@charset "UTF-8";
/* CSS Document */
#stylish-items .mainv {
    margin-bottom: 40px;
}

#stylish-items .rightContents {
    max-width: 100%;
    margin: 0 auto 80px;
}

#stylish-items .lead-txt {
    text-align: left; /* 画像に合わせて左寄せ */
    margin-bottom: 2em;
}

/* =========================================
   sec07
   ========================================= */
#stylish-items .sec01 {
    margin-bottom: 60px;
}


.glay-area {
    background: #F1F1F1;
    width: 84%;
    margin: 0 auto;
    padding: 5% 0 0;
}

.glay-area img {
    margin: 6% 0;
}
#sec07 .special_items_list {
    margin: 2% 0 2%;
}

/* =========================================
   ナビゲーションセクション (sec-nav-area)
   ========================================= */

/* タイトル画像の調整 */
#sec-nav-area .intro-ttl {
    text-align: center;
    margin-bottom: 40px; /* タイトル下の余白 */
}
#sec-nav-area .intro-ttl img {
    max-width: 100%;
    height: auto;
}

/* ナビゲーションリストの調整 */
/* 画像のみボタンにするためのホバーエフェクト */
#sec-nav-area .special_items_list a {
    display: block;
    transition: opacity 0.3s;
}
#sec-nav-area .special_items_list a:hover {
    opacity: 0.7;
}

/* 画像を枠いっぱいに広げる */
#sec-nav-area .special_items_list img {
    width: 100%;
    height: auto;
    vertical-align: bottom; /* 下部の隙間除去 */
}

/* SP調整（既存のメディアクエリ内、またはここに追記） */
@media screen and (max-width: 768px) {
    #sec-nav-area .intro-ttl {
        margin-bottom: 20px;
        padding: 0 5%; /* 画面端にくっつきすぎないように調整 */
    }
}

/* =========================================
   セクション共通：画像重ね合わせレイアウト
   ========================================= */
.sec-intro-visual {
    position: relative;
    width: 100%;
     /* 全体の最大幅制限 */
     /* 下に余白 */
    height: 27rem;
    /* テキスト画像エリアを基準に高さを確保するためflex等は使わず配置 */
    margin-bottom: 2em;
}

/* メイン画像（左上配置） */
.intro-img-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 44%; /* 横幅の55%を占める */
    z-index: 1; /* 下に配置 */
}
.intro-img-box img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px; /* 角丸（必要に応じて） */
}

/* テキスト画像（右下配置・重なりあり） */
.intro-txt-box {
    width: 60%; /* 横幅の60% */
    margin-left: auto; /* 右寄せ */
    bottom: 2em; /* メイン画像との位置関係調整用（上部の空き） */
    right: 0;
    position: absolute;
    z-index: 2; /* 上に配置 */
    height: auto;
}
.intro-txt-box img {
    width: 100%;
    height: auto;
    display: block;
    /* ドロップシャドウをつけて浮き出し感を出す（プロトタイプ参照） */
}


/* =========================================
   帯タイトル (sec-ttl-band)
   ========================================= */
.sec-ttl-band {
    background: #8B7561; /* 茶色背景 */
    border-radius: 0 40px;  /* 丸み */
    padding: 10px 0;
    text-align: center;
    margin-bottom: 30px;
}
.sec-ttl-band img {
    height: 24px; /* タイトル文字画像の高さ調整 */
    width: auto;
    vertical-align: middle;
}


/* =========================================
   画像ボタンエリア
   ========================================= */
.more-btn-img {
    margin-top: 40px;
}
.more-btn-img a {
    display: inline-block;
    transition: opacity 0.3s;
}
.more-btn-img a:hover {
    opacity: 0.7;
}

/* 複数ボタンの並び（PC） */
.btn-row-double-img {
    display: flex;
    justify-content: flex-start;
    gap: 20px;
    margin-top: 30px;
    flex-wrap: wrap;
}
.btn-row-double-img a {
    display: block;
    transition: opacity 0.3s;
    width: 49%; /* PCでは3つ並ぶ想定で幅調整 */
}
.btn-row-double-img a:hover {
    opacity: 0.7;
}
.btn-row-double-img img {
    width: 100%;
    height: auto;
}
.print-area-inner {
    border-radius: 0 120px;
    background: #E1F2F5;
    padding: 3rem 0;
}

.print-area-inner p.text-center.mb30 {
    padding: 3rem 0;
}
.special .special_items_list.-triline .flex {
    width: 73%;
    margin: 0 auto;
}

/* =========================================
   SP対応 (max-width: 768px)
   ========================================= */
@media screen and (max-width: 768px) {
    
    /* 画像重ね合わせ調整 */
    .sec-intro-visual {
        max-width: 100%;
        margin: 4rem 0 1rem;
        height: auto;
        /* position: absolute; */
    }
    
    .intro-img-box {
        width: 100%; /* 画像を少し大きく */
        left: 0%;   /* 少し右へ */
        position: relative;
    }
    
    .intro-txt-box {
        width: 100%; /* テキスト枠を大きく */
        margin-right: 0%; /* 右端の余白 */
        padding-top: 0; /* メイン画像の下に回り込みすぎないよう調整 */
        margin-top: 2em; /* 重なりを強調するために少し上に上げる */
        bottom: 0;
        position: relative;
    }

    /* 帯タイトル調整 */
    .sec-ttl-band {
        padding: 8px 0;
    }
    .sec-ttl-band img {
        height: 18px; /* SPでは少し小さく */
    }

    /* ボタンエリア調整 */
    .btn-row-double-img {
        flex-direction: column;
        align-items: center;
        gap: 0.5em;
    }
    .btn-row-double-img a {
        width: 90%; /* SPでは幅いっぱい */
        max-width: none;
    }
.special .special_items_list p.text-center.mb30 {
    max-width: 100%;
    margin-bottom: 2.4em;
    font-size: 1.2em !important;
    text-align: left;
}

.print-area-inner {
    border-radius: 0 80px;
    padding: 2.5rem;
}

.print-area-inner p.text-center.mb30 {
    padding: 3rem 0;
}

.special .special_items_list.-triline .flex {
    width: 100%;
}
.more-btn-img {
    margin-top: 1rem;
}

}

.sec-ttl-band.-brown2 {
    background: var(--brown2, #D1AB9A);
}
.sec-ttl-band.-red {
    background: var(--red, #AE7061);
}
.sec-ttl-band.-yellow {
    background: var(--yellow, #d4b572);
}
.sec-ttl-band.-purple {
    background: var(--purple, #A48A9D);
}
.sec-ttl-band.-glay {
    background: var(--glay, #757575);
}