@charset "utf-8";

#og-print .full-bg {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding: 60px 0;
}
#og-print .full-bg .inner {
    max-width: 1184px; /* common.cssのmain幅に合わせる */
    margin: 0 auto;
    padding: 0 15px; /* SPでの余白確保 */
}

.bg-gray { background-color: #f9f9f9; }
.bg-white { background-color: #ffffff; }

/* -------------------------------------------------------------------
   Intro & Features
   ------------------------------------------------------------------- */
#og-print .intro-features ul {
    display: flex;
    justify-content: space-between;
    margin: 0 8% 6em;
}
#og-print .intro-features li {
    width: 20%;
    text-align: center;
}
#og-print .intro-features .img-box {
    align-items: center;
    justify-content: center;
    margin-bottom: -10px;
}
#og-print .intro-features .feature-ttl {
    font-weight: bold;
    color: #6C2F12; /* Gold */
    font-size: 16px;
    margin-bottom: 12px;
    border-bottom: 2px solid #6C2F12;
    display: inline-block;
}
#og-print .intro-features .feature-txt {
    font-size: 13px;
    line-height: 1.5;
    text-align: left;
    width: 182px;
    margin: 0 auto;
}
#og-print .intro-features .img-box img {
}
/* -------------------------------------------------------------------
   Intro Section Layout Fix (Overlapping Style)
   ------------------------------------------------------------------- */
/* コンテナ全体 */
#og-print .intro-sec .imgleft_container {
    display: flex;
    justify-content: center; /* 中央寄せ */
    align-items: center;     /* 垂直方向中央 */
    flex-direction: row-reverse; /* HTML順序(画像→テキスト)を逆転させて、テキスト(左)・画像(右)にする */
    margin: 100px 0 60px;
    padding: 0;
    background: transparent;
    position: relative; /* 重なり制御のため */
}

/* テキストエリア (左側・背景あり) */
#og-print .intro-sec .txt-right {
    width: 56%; /* 幅を広めに */
    background-color: #f9f5eb; /* 薄い茶色の背景 */
    padding: 3em 4em; /* 右側のパディングを多めにして、画像との干渉を防ぐ */
    border-radius: 30px; /* 角丸 */
    box-sizing: border-box;
    position: relative;
    z-index: 0; /* 背面に配置 */
    margin-top: 5%; /* 画像を重ねるためにマイナスマージンを設定 */
    margin-right: -5%;
}

/* リード文 */
#og-print .intro-sec .lead-txt {
    font-size: 15px;
    line-height: 2.2;
    text-align: justify;
    margin-bottom: 0;
    color: #594228; /* 文字色を濃い茶色に */
    font-weight: 500;
}

#og-print .intro-features .img-box img {
    max-width: 100%;
}

#og-print .special_items_list .items li a img {
    max-width: 100%;
    margin: 1em auto;
}

/* 画像エリア (右側・重ねる) */
#og-print .intro-sec .img_left {
    width: 45%;
    position: relative;
    z-index: 1; /* 前面に配置 */
    margin-top: -10%;
    right: -2vw;
}

#og-print .intro-sec .img_left img {
    max-width: 100%;
    height: auto;
    border-radius: 20px; /* 角丸 */
     /* 白いフチ */
     /* 影をつけて浮き上がらせる */
    display: block;
}
section.flow-sec {
    padding-top: 5em;
}
.special .special_items_list.-triline .flex {
    gap: 2%;
    margin: 0 auto;
    justify-content: flex-start;
    width: 76%;
}
.special .special_items_list {
    text-align: center;
    border-radius: 10px;
    margin: 0;
}
.special_items_list.-fourline.nav-cards ul li {
    padding: 0 4.5% !important;
    width: 23.85% !important;
}
/* --- SP (スマホ) 対応 --- */
@media screen and (max-width: 768px) {
    #og-print .intro-sec .imgleft_container {
        flex-direction: column; /* 縦積み (画像が上、テキストが下) */
        align-items: center;
        margin: -40px 0 40px;
    }
    
    /* SPでの画像 */
    #og-print .intro-sec .img_left {
        width: 90%;
        margin: 0; /* 下のテキストボックスに少し乗せる */
        z-index: 2; /* 最前面 */
    }
    
    /* SPでのテキスト */
    #og-print .intro-sec .txt-right {
        width: 100%;
        margin-right: 0;
        padding: 50px 20px 30px; /* 上部を画像が乗る分空ける */
        border-radius: 20px;
        z-index: 1;
    }
    
    #og-print .intro-sec .lead-txt {
        font-size: 14px;
        line-height: 1.8;
        margin-top: 1em;
    }
#og-print .intro-features .feature-txt {
    width: 100%;
}
p.lead-txt {
    border-radius: 60px;
    background: #F5F1EB;
    padding: 2rem;
    top: -3em;
    position: relative;
}
}
/* -------------------------------------------------------------------
   Anchor Nav (Sec01) - Special Style Overrides
   ------------------------------------------------------------------- */
/* カードの影や背景を消してシンプルに */
#og-print .nav-cards .items li {
    background: none;
    box-shadow: none;
    padding: 0;
}
#og-print .nav-cards .list-bg-card {
    background: none;
    color: #6b3906; /* Brown */
    padding: 0;
    margin: 0 auto 5px;
    height: auto;
    font-size: 1.1em;
    text-align: center;
}
#og-print .nav-cards img {
}
.special_items_list.-fourline.nav-cards ul li a img {
    max-width: 100%;
    margin: 1em 13% !important;
}
#og-print .nav-cards .item-desc {
    font-size: 0.85em;
    color: #666;
    margin-bottom: 5px;
    text-align: center;
    font-weight: 400;
}
#og-print .nav-cards .arrow-icon {
    position: relative;
}
#og-print .nav-cards .arrow-icon:after {
    content: "";
    display: block;
    position: absolute;
    height: 8px;
    width: 13px;
    background: url(https://gigaplus.makeshop.jp/ecafesp/img/special/common/arr-u.svg) no-repeat;
    background-size: contain;
    left: 56%;
    transform: translateX(-50%);
    bottom: -1.5em;
}
/* -------------------------------------------------------------------
   Card Button (.card-btn) Styling
   common.css の .more_btn a を模倣してspanに適用
   ------------------------------------------------------------------- */
#og-print .card-btn {
    display: block; /* リンク内なのでblock要素として配置 */
    width: 90%;
    margin: 10px auto 0;
    padding: 0.5em 0;
    border-radius: 900px;
    color: #ffffff;
    font-size: 1.1em;
    font-weight: bold;
    text-align: center;
    position: relative;
    text-decoration: none;
}

/* 矢印アイコン (common.cssのSVGを使用) */
#og-print .card-btn::after {
    content: "";
    display: inline-block;
    height: 10px;
    width: 6px;
    background: url(https://gigaplus.makeshop.jp/ecafesp/img/special/common/arr.svg) no-repeat;
    background-size: auto;
    margin-left: 1em;
}

/* Colors (common.cssの変数カラーに準拠) */
#og-print .card-btn.-brown {
    background: #6C2F12; /* var(--brown) */
}
#og-print .card-btn.-y-brown {
    background: #C2A857; /* var(--y-brown) */
}
#og-print .card-btn.-gold {
    background: #C09544; /* var(--y-brown)と同じゴールド系 */
}

/* -------------------------------------------------------------------
   Item List Adjustments
   ------------------------------------------------------------------- */
#og-print .special_items_list .items li {
    display: flex;
    flex-direction: column;
    align-content: center;
    text-align: center;
    margin-bottom: 3em;
    width: 32%;
}
#og-print .special_items_list .items li a {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
}
#og-print .special_items_list .desc {
    flex-grow: 1;
    text-align: left;
}

/* -------------------------------------------------------------------
   Flow, Notes, FAQ
   ------------------------------------------------------------------- */
#og-print .flow-img-box img {
    max-width: 100%;
}

/* Notes */
#og-print .notes-box {
    text-align: left;
}
#og-print .notes-sub-ttl {
    font-size: 18px;
    font-weight: bold;
    color: #594228;
    border-bottom: 1px solid #333333;
    margin-bottom: 20px;
    display: inline-block;
}
#og-print .notes-list {
    padding-left: 20px;
    list-style: disc;
}
#og-print .notes-list li {
    margin-bottom: 8px;
    font-size: 14px;
}
#og-print .note-small {
    font-size: 0.85em;
    color: #666;
}
#og-print .notes-list li::marker {
    color: #6B3906;
}

/* -------------------------------------------------------------------
   FAQ
   ------------------------------------------------------------------- */
#og-print .accordion-container {
    max-width: 1000px;
    margin: 0 auto 3em;
    border-top: 1px solid #eee;
}
#og-print .accordion-header {
    padding: 20px 50px 20px 20px;
    background: #E7E7E7;
    cursor: pointer;
    display: flex;
    align-items: center;
    position: relative;
    font-weight: bold;
    border-radius: 10px;
}
.flow-img-box.text-center, section.sec11.notes-sec, section.flow-sec {
    padding: 2em 0 4em;
}

.accordion-item {
    margin-bottom: 1em;
    border-radius: 10px;
    font-size: 14px;
}

#og-print .accordion-header.open {
    border-radius: 10px 10px 0 0;
}
#og-print .q-icon {
    font-size: 20px;
    color: #fff;
    margin-right: 15px;
    font-weight: 200;
    height: 2em;
    width: 2em;
    background: #6C2F12;
    text-align: center;
    border-radius: 30px;
    /* フレックスボックスでQを中心に配置 */
    display: flex;
    align-items: center;
    justify-content: center;
}
#og-print .q-text { flex: 1; }

/* トグルアイコン (SVG画像に変更) */
#og-print .toggle-icon {
    width: 16px;
    height: 10px; /* 矢印の比率に合わせて調整 */
    position: absolute; /* 絶対配置で右側に固定 */
    right: 20px;
    top: 50%;
    /* 初期状態：閉じた時 
       arr-u.svg(上向き)を180度回転させて「下向き(開く)」に見せる
       translateY(-50%)は上下中央寄せ用
    */
    background: url(https://gigaplus.makeshop.jp/ecafesp/img/special/common/arr-u.svg) no-repeat center center;
    background-size: contain;
    transition: transform 0.3s;
}

/* 以前の＋ーの線を消す */
#og-print .toggle-icon::before,
#og-print .toggle-icon::after {
    content: none;
    display: none;
}

/* 開いた状態：上向きに戻す */
#og-print .accordion-header.open .toggle-icon {
    transform: translateY(-50%) rotate(180deg);
}

#og-print .accordion-body {
    display: none;
    padding: 20px 20px 20px 55px;
    background: #fff;
    line-height: 1.6;
    border-radius: 0 0 10px 10px;
}

/* -------------------------------------------------------------------
   Responsive (SP)
   ------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
    .special .special_items_list.-triline .flex {
    width: 100%;
}
    /* Full BG Reset */
    #og-print .full-bg {
        width: 100%;
        margin: 0;
        padding: 40px 0;
    }
    #og-print .full-bg .inner { padding: 0 15px; }

    /* Features */
    #og-print .intro-features ul {flex-wrap: wrap;margin: 0 0% 5em;}
    #og-print .intro-features li {width: 47%;margin-bottom: 10px;}

    /* Item Lists */
    .special .special_items_list .flex {
        justify-content: flex-start;
    }
    #og-print .special_items_list .items li {
        width: 47.5% !important; /* common.cssを上書きして1列に */
    }
    /* Anchor Nav Cards (2列) */
    #og-print .nav-cards .items li {
        width: 47% !important;
    }
    
    #og-print .accordion-body {
        padding-left: 20px;
    }
    #og-print .flow-img-box img{
        width: 70%;    
    }
#og-print .intro-features li img {
    width: 80%;
}
    
.special_items_list.-fourline.nav-cards ul li a img {
    max-width: 100%;
    margin: 1em auto;
}
}