@charset "UTF-8";

/*
 * 花書院 フォームCMS 公開画面（仕様書§15、要確認事項B7）。
 *
 * 既存サイトのロゴ、ヘッダー画像、配色、幅（1000px）、サイドバー（240px）に
 * 合わせるが、BootstrapやEC-CUBEのCSSは読み込まず本ファイルで完結させる。
 * 参照するのは既存サイトの画像アセットのみ。
 *
 * PCは左サイドバーとメインの2カラム、767px以下は1カラムとする。
 * PCサイドバーの特設バナーは、767px以下では本文とフッターの間へ移す。
 */

:root {
    --accent: #425ba8;
    --link: #337ab7;
    --border: #ddd;
    --muted: #666;
}

* {
    box-sizing: border-box;
}

/*
 * 本文の書体は既存サイト（Bootstrapの既定）と同一にする。
 * 和文フォントを明示すると既存ページと字面が変わるため、指定せず
 * sans-serif のフォールバックへ委ねる。
 */
body {
    margin: 0;
    color: #333;
    background: #fff;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
}

/* リンクは既存サイト（Bootstrapの既定）と同じく、通常時は下線なし */
a {
    color: #337ab7;
    text-decoration: none;
}

a:hover,
a:focus {
    color: #23527c;
    text-decoration: underline;
}

/*
 * ヘッダー・2カラムの寸法は、既存サイトの画像に合わせて固定する。
 *
 *   header.png   1000 x 222  ヘッダー背景
 *   subtitle.png 1000 x  57  本文上部の帯（MENUタグを含む）
 *   sidebar.png   208 x 735  サイドバーの背景（縦にリピート）
 *
 * 既存はBootstrapのグリッドで組まれており、1000px幅のコンテナ内で
 * サイドバーの内側が 0〜210px、本文が 240〜982px に位置する。
 * 帯とMENUタグの絵柄がこの座標前提のため、同じ数値で組む。
 */

.site-container {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}

/* ヘッダー・ナビゲーション */

.site-header {
    position: relative;
    width: 100%;
    max-width: 1000px;
    height: 222px;
    margin: 0 auto;
}

.site-header-visual {
    width: 100%;
    height: 222px;
    background: #fff url(/user_data/packages/New/img/header.png) no-repeat top center;
    background-size: 100% 100%;
}

/* ロゴとタブの基準。1000pxコンテナの座標で配置する */
.site-header-inner {
    position: relative;
    height: 222px;
}

/*
 * ロゴ。既存は container(padding 15) > row(margin -15) > col(padding 15)
 * > .navbar-brand(margin-left -15, padding 15) の入れ子で、
 * 結果としてコンテナ左端から15px、上から15pxの位置になる。
 */
.site-brand {
    position: absolute;
    top: 6.76%;
    left: 1.5%;
    height: 72.97%;
}

.site-logo {
    display: block;
    width: auto;
    height: 100%;
    border: 0;
}

/*
 * タブは既存と同じ画像・同じ位置へ絶対配置する。
 *
 * 既存は .container（padding 0 15px）内の ul（padding-left 100px）に対し、
 * 各タブを position:relative の left で 8 / 153 / 296 / 439 / 582px ずらしている。
 * コンテナ左端からの実座標はこれらに 115px（15 + 100）を足した値になる。
 *
 * .navbar-nav の margin 7.5px は 768px以上で 0 へ上書きされるため、
 * タブの下端はヘッダーの下端とそろう。
 */
.site-nav-list {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 16.2%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-nav-list li {
    position: absolute;
    bottom: 0;
}

/* 既存はタブへfont-sizeを指定しておらず、bodyの14pxを継承する */
.site-nav-list a {
    display: block;
    height: 100%;
    color: #777;
    line-height: 36px;
    text-decoration: none;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.site-nav-list a:hover {
    color: #333;
}

.site-nav-home    { left: 12.3%; width: 15.8%; }
.site-nav-aisatu  { left: 26.8%; width: 15.8%; }
.site-nav-jihi    { left: 41.1%; width: 15.8%; }
.site-nav-syoseki { left: 55.4%; width: 15.8%; }
.site-nav-access  { left: 69.7%; width: 15.8%; }

.site-nav-home a {
    padding-left: 60px;
    background-image: url(/user_data/packages/New/img/tab_normal2.png);
}

.site-nav-aisatu a {
    padding-left: 45px;
    background-image: url(/user_data/packages/New/img/tab_normal.png);
}
.site-nav-jihi a,
.site-nav-syoseki a,
.site-nav-access a {
    padding-left: 50px;
    background-image: url(/user_data/packages/New/img/tab_normal.png);
}

/*
 * アクティブなタブ。左側にマスコットが入った専用画像へ差し替える。
 * 旧フォームはHomeをアクティブとして静的に出力していたため、同じ見え方にする。
 * 座標は非アクティブと同様に、既存の left 値へ 115px を足した値。
 */
.site-nav-list .is-active a {
    color: #fff;
    z-index: 1;
}

.site-nav-home.is-active {
    left: 8.4%;
    width: 19.7%;
}

.site-nav-home.is-active a {
    padding-left: 100px;
    background-image: url(/user_data/packages/New/img/tab_home.png);
}

/* 2カラム */

.site-body {
    display: grid;
    grid-template-columns: 210px 1fr;
    column-gap: 10px;
    align-items: flex-start;
    padding-top: 57px;
    background: url(/user_data/packages/New/img/subtitle.png) no-repeat top left;
}

.site-sidebar {
    flex: none;
    width: 210px;
}

.site-sidebar-inner {
    min-height: 600px;
    padding-bottom: 20px;
    color: #fff;
    background: url(/user_data/packages/New/img/sidebar.png) repeat-y;
}

.site-sidebar-item {
    padding: 10px;
    margin-top: 1em;
    border-top: 1px dotted #fff;
}
.site-sidebar-item:first-child {
    margin-top: 0em;
}
.site-sidebar-item img {
    display: block;
    width: 85%;
    margin: 1.5em auto;
    border: 1px solid #9ca2ad;
    transition: all .5s;
}

.site-sidebar-item img:hover {
    border: 1px solid #425ba8;
    opacity: .9;
}

.publication-main {
    min-width: 0;
    padding: 0 10px 48px;
}

.error-box {
    max-width: 760px;
    margin: 0 auto;
    padding: 40px 20px;
}

/* フッター。既存の #footer_wrap / .footer-navi / #copyright に合わせる */

.site-footer {
    padding: 15px 0;
    color: #fff;
    background: #425ba8;
}

.site-footer a {
    color: #fff;
}

/*
 * 既存は .footer-navi へ list-style と text-align しか指定しておらず、
 * Bootstrapの ul（margin-bottom:10px）とブラウザ既定の padding-left:40px が
 * そのまま効いている。高さと中央位置を合わせるため同じ値を明示する。
 */
.footer-navi {
    margin: 0 0 10px;
    padding-left: 40px;
    list-style: none;
    text-align: center;
}

.footer-navi li {
    display: inline-block;
    padding: 10px;
}

.site-copyright {
    margin: 0;
    text-align: center;
}

/* SP用特設エリア。PCでは同じ内容をサイドバーへ表示する */
.special-area-sp {
    display: none;
}

/* スマートフォン。EC側と同じ767px以下で1カラムへ切り替える */
@media (max-width: 767px) {
    .site-header {
        height: auto;
    }

    .site-header-visual {
        height: auto;
        aspect-ratio: 1000 / 222;
    }

    .site-header-inner {
        height: 100%;
    }

    .site-nav-list {
        position: static;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        width: 100%;
        height: auto;
        background: #425ba8;
    }

    .site-nav-list li {
        position: static;
        width: auto;
    }

    .site-nav-list li.site-nav-home.is-active {
        width: auto;
    }

    .site-nav-list a,
    .site-nav-list .is-active a {
        display: block;
        width: 100%;
        height: 40px;
        padding: 0 !important;
        color: #fff;
        line-height: 40px;
        text-align: center;
        background: #425ba8;
        border-right: 1px dotted #fff;
        border-bottom: 1px dotted #fff;
    }

    .site-nav-list a:hover,
    .site-nav-list a:focus {
        color: #fff;
        text-decoration: none;
        opacity: .7;
    }

    .site-body {
        display: block;
        padding: 24px 10px 0;
        background: none;
    }

    .site-sidebar {
        display: none;
    }

    .publication-main {
        padding: 0 0 48px;
    }

    .special-area-sp {
        display: block;
        border-top: 1px dotted #fff;
        background: #425ba8;
    }

    .special-area-sp-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 15px;
        padding: 20px 15px;
    }

    .special-area-sp .site-sidebar-item {
        margin: 0;
        padding: 0;
        border: 0;
    }

    .special-area-sp .site-sidebar-item img {
        width: 100%;
        max-width: 220px;
        margin: 0 auto;
    }

    /* 商品ページの2カラムは縦積みにし、サムネイルを中央へ置く */
    .publication-main .publication-intro {
        display: block;
    }

    .publication-main .publication-intro-thumb {
        width: auto;
        max-width: 240px;
        margin: 0 auto 16px;
    }
}

.publication-title {
    font-size: 22px;
    margin: 0 0 16px;
}

.note {
    padding: 12px 16px;
    background: #f4f5f7;
    border-left: 4px solid #8aa4bd;
}

.error-status {
    margin: 0;
    color: #8a8f96;
    font-size: 40px;
    font-weight: bold;
    line-height: 1.2;
}

.error-title {
    margin: 8px 0 16px;
    font-size: 20px;
}

.error-contact,
.publication-contact {
    margin-top: 24px;
    color: #555;
    font-size: 14px;
}

/*
 * 書影。書籍一覧ページ・書籍ページは240pxの左カラム（.publication-intro-thumb）に入るが、
 * 申込フォームと確認画面は _publication_header.tpl を直接使い、幅を絞る親が無い。
 * 100%だと主カラム幅（760px）まで引き伸ばされるため、上限を左カラムと同じ240pxに揃える。
 */
.publication-thumbnail img {
    max-width: 240px;
    width: 100%;
    height: auto;
}

/* 商品ページ。サムネイルと、概要・商品選択・ボタンの2カラムにする。
   サムネイルが無い出版物では右カラムが主カラム幅いっぱいに広がる */

.publication-intro {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}

.publication-intro-thumb {
    flex: none;
    width: 240px;
}

.publication-intro-thumb .publication-thumbnail {
    margin: 0;
}

.publication-intro-main {
    /* テーブルがはみ出さないよう、フレックス要素の最小幅を解除する */
    flex: 1;
    min-width: 0;
}

/* 2カラムの先頭では見出しの上余白を詰める */
.publication-intro-main > .publication-summary,
.publication-intro-main > .sale-notice {
    margin-top: 0;
}

.publication-intro-main .publication-items .section-title {
    margin-top: 24px;
}

.publication-summary {
    color: #444;
}

.publication-body {
    margin: 24px 0;
}

.publication-body img {
    max-width: 100%;
    height: auto;
}

/*
 * 本文はリッチエディタの編集領域と同じ suneditor-contents.css を当てて、
 * 管理画面で見えたとおりに公開する（読み込みは本文のある画面のみ）。
 * 本文そのものの装飾は管理画面と共通の publication-body.css 側にあり、
 * ここへ書くのは公開画面だけに要る調整に限る。
 */
.publication-body.sun-editor-editable {
    /* 編集領域には内側の余白と背景があるが、公開画面ではページ側の余白に任せる */
    padding: 0;
    background-color: transparent;
}

.section-title {
    margin: 32px 0 12px;
    padding-bottom: 6px;
    border-bottom: 2px solid #d8dde2;
    font-size: 17px;
}

.item-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

/* 書籍が多いシリーズだけ一覧部分をスクロールさせ、見出し行は表示したままにする */
.item-table-scroll {
    max-height: 600px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.item-table-scroll .item-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
}

.item-table th,
.item-table td {
    padding: 10px 8px;
    border-bottom: 1px solid #e3e6ea;
    text-align: left;
}

.item-table thead th {
    background: #f4f5f7;
    white-space: nowrap;
}

.item-table .numeric {
    text-align: right;
    white-space: nowrap;
}

.volume-label {
    display: inline-block;
    margin-right: 6px;
    padding: 1px 8px;
    background: #eef1f4;
    border-radius: 10px;
    font-size: 12px;
}

.item-isbn {
    display: block;
    color: #777;
    font-size: 12px;
}

.item-table .state {
    width: 6em;
    text-align: center;
    white-space: nowrap;
}

.item-unavailable td {
    color: #8a8f96;
}

.badge {
    display: inline-block;
    padding: 1px 10px;
    background: #eef1f4;
    border-radius: 10px;
    color: #4a5560;
    font-size: 12px;
    white-space: nowrap;
}

.badge-available {
    background: #e9f5ec;
    color: #1d5c31;
}

.badge-soldout {
    background: #f6ecec;
    color: #7a3b3b;
}

.sale-notice {
    padding: 12px 16px;
    background: #fdf3e3;
    border-left: 4px solid #d9a84e;
}

/* 注文フォーム */

.item-table .quantity {
    width: 6em;
    text-align: center;
}

.quantity-input {
    width: 4.5em;
    padding: 5px 6px;
    border: 1px solid #c3c9d0;
    border-radius: 3px;
    font-size: 14px;
    text-align: right;
}

.order-form .field {
    margin-bottom: 16px;
}

.order-form .field-row {
    display: flex;
    gap: 16px;
}

.order-form .field-row .field {
    flex: 1;
}

.order-form label {
    display: block;
    margin-bottom: 4px;
    font-weight: bold;
}

.order-form input[type="text"],
.order-form input[type="tel"],
.order-form input[type="email"],
.order-form select,
.order-form textarea {
    width: 100%;
    padding: 9px 10px;
    border: 1px solid #c3c9d0;
    border-radius: 3px;
    font-size: 16px;
    box-sizing: border-box;
}

.required {
    display: inline-block;
    margin-left: 6px;
    padding: 0 6px;
    background: #8b2019;
    border-radius: 2px;
    color: #fff;
    font-size: 11px;
    font-weight: normal;
    vertical-align: middle;
}

/* honeypot。利用者には見せないが display:none にはしない */
.hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.button {
    display: inline-block;
    padding: 12px 28px;
    border: 0;
    border-radius: 3px;
    background: #e3e6ea;
    color: #333;
    font-size: 15px;
    text-decoration: none;
    cursor: pointer;
}

.button-primary {
    background: #2f6fb0;
    color: #fff;
}

.form-actions {
    margin: 24px 0;
    text-align: center;
}

.alert {
    margin: 0 0 20px;
    padding: 12px 16px;
    border-radius: 3px;
}

.alert-error {
    background: #fdecea;
    border: 1px solid #f0b3ae;
    color: #8b2019;
}

.alert p {
    margin: 0 0 6px;
}

.error-list {
    margin: 0;
    padding-left: 1.2em;
}

/* 確認・完了画面 */

.total-table {
    width: 100%;
    margin-bottom: 20px;
    border-collapse: collapse;
    font-size: 14px;
}

.total-table th,
.total-table td {
    padding: 9px 10px;
    border-bottom: 1px solid #e3e6ea;
    text-align: left;
    vertical-align: top;
}

.total-table th {
    width: 34%;
    background: #f4f5f7;
    font-weight: normal;
}

.total-table .numeric {
    text-align: right;
}

.total-table .tax-row th,
.total-table .tax-row td {
    color: #666;
    font-size: 12px;
}

.total-table .grand-total th,
.total-table .grand-total td {
    font-size: 16px;
    font-weight: bold;
}

.completed-notice {
    padding: 14px 16px;
    background: #e9f5ec;
    border-left: 4px solid #5aa06f;
}

/* お支払い方法の選択（仕様書§9.2） */

.payment-choice {
    margin: 0 0 20px;
    padding: 12px 16px;
    border: 1px solid #ddd;
    border-radius: 3px;
}

.payment-choice legend {
    padding: 0 6px;
    font-weight: bold;
}

.payment-option {
    display: block;
    padding: 8px 0;
    border-bottom: 1px dotted #ddd;
    cursor: pointer;
}

.payment-option:last-child {
    border-bottom: 0;
}

.payment-option-name {
    font-weight: bold;
}

.payment-option-note {
    display: block;
    padding-left: 1.6em;
    color: #666;
    font-size: 13px;
}

/*
 * 右下のページ先頭へ。
 * JSが動く場合はhtmlへ .js-to-top が付き、スクロール量に応じて .is-visible を付け外しする。
 * JSが無い環境では .js-to-top が付かないので出したままになり、#top へのリンクとして機能する。
 */
.to-top {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: 14px;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
}

.to-top:hover,
.to-top:focus {
    background: #33488a;
    color: #fff;
    text-decoration: none;
}

/* JSが読み込めた場合だけ、スクロールするまで隠す */
.js-to-top .to-top {
    visibility: hidden;
    opacity: 0;
    transition: opacity .2s;
}

.js-to-top .to-top.is-visible {
    visibility: visible;
    opacity: 1;
}

@media (max-width: 999px) {
    .to-top {
        right: 12px;
        bottom: 12px;
    }
}