@charset "utf-8";
/* CSS Document */

/*****************************************************
    
    鎌倉スワニー 共通CSS
    
*****************************************************/
/* ================================================= */
/* 変数 */
/* ================================================= */
/* ------------------------------------------------ */
/* スペース */
body {
    /* ブレイクポイント */
    --wsize-sp: 800px; /* スマホ表示切り替え */

    /* メインコンテンツ幅 */
    --contents-width: 1000px;   /* --main-width + --left-menu-width */
    --main-width: 960px;
    --left-menu-width: 140px;

    /* ------------------------------------------------ */
    /* スペース */
    --space: 10px;  /* 通常スペース */
    --space-s: 5px;
    --space-m: 15px;
    --space-l: 20px;
    --space-ll: 30px;
    --space-box: 30px; /* ボックス要素スペース */
    --space-content: 50px; /* コンテンツ間スペース */

    /* ------------------------------------------------ */
    /* サイズ */
    --scroll-thumb-size: 200px; /* 横スクロール用見切れるサムネイルサイズ

    /* ------------------------------------------------ */
    /* カラー */
    --color-swany-green: #39784F; /* スワニーグリーン */

    /*--color-nav-sub-bg: #d6e9ca;     ヘッダーサブメニュー背景色 */
    /*--color-nav-sub-border: #a8bf93;     ヘッダーサブメニュー境界線色 */
    /*--color-nav-sub-bg: #EEE;     ヘッダーサブメニュー背景色：A案 */
    /*--color-nav-sub-border: #CCC;     ヘッダーサブメニュー境界線色：A案 */
    /*--color-nav-sub-bg: #fbf4ee;     ヘッダーサブメニュー背景色：B案 */
    /*--color-nav-sub-border: #bbb4ac;     ヘッダーサブメニュー境界線色：B案 */
    /*--color-nav-sub-bg: #dee8e1;     ヘッダーサブメニュー背景色：C案 */
    --color-nav-sub-bg: #dce3d8;    /* ヘッダーサブメニュー背景色：C案 */
    --color-nav-sub-border: #7c847e;    /* ヘッダーサブメニュー境界線色：C案 */
    
    --color-buying_btn: #698874; /* 購入系ボタンカラー（グレーよりのスワニーグリーン） */

    --color-outlet: #c53d43; /* アウトレット系カラー（くすみレッド） */

    /*--color-footer-bg: #534041;*/   /* フッター背景色（茶） */
    --color-footer-bg: #9ca69e; /* フッター背景色（くすみグリーン） */
    --color-modal-bg: rgba(0, 0, 0, 0.7); /* モーダル背景色（半透明） */

    --txt-color-alert: #993333; /* 注意喚起カラー 赤 */
    --color-alert: #993333; /* 注意喚起カラー 赤 */
    --color-price: #71151a; /* 価格 */
    --color-wishlist: #8b7f7f;  /* お気に入り */
}

/* スマホ */
@media screen and (max-width: 800px) {
    /* 調整前
    body {
        --space: 10px; /* 通常スペース 
        --space-s: 5px; /* 小スペース 
        --space-l: 30px; /* 大スペース 
        --space-box: 20px; /* ボックス要素スペース 
    }*/

    body {
        /* ------------------------------------------------ */
        /* スペース */
        --space-l: 25px; /* 大スペース */
        --space-box: 20px; /* ボックス要素スペース */

        /* サイズ */
        --scroll-thumb-size: 37vw; /* 必ず見切れるようにする */
    }
}

/* ================================================= */
/* 全ページ共通要素 */
/* ================================================= */
html {
    font-size: 10px;    /* 1rem基準 */
}
body {
}

/* PCの時だけの処理 */
@media screen and (min-width: 801px) {
    /* スマホの時だけ改行 */
	.br_sp {
		display: none;
	}
    /* スマホの時だけ表示 */
    .sp_content {
        display: none !important;
    }
}
/* スマホの時だけの処理 */
@media screen and (max-width: 800px) {
    /* PCの時だけ改行 */
	.br_pc {
		display: none;
	}
    /* PCの時だけ表示 */
    .pc_content {
        display: none !important;
    }
}

/* ------------------------------------------------ */
/* テキスト装飾 */
/* ------------------------------------------------ */
.t_size50 { font-size: 0.4em; }
.t_size60 { font-size: 0.5em; }
.t_size70 { font-size: 0.6em; }
.t_size80 { font-size: 0.8em; }
.t_size90 { font-size: 0.9em; }
.t_size110 { font-size: 1.1em; }
.t_size120 { font-size: 1.2em; }
.t_size130 { font-size: 1.3em; }
.t_size140 { font-size: 1.4em; }
.t_size150 { font-size: 1.5em; }
/* ------------------------------------------------ */
/* 右詰め */
.t_right { text-align: right !important; }
/* 左詰め */
.t_left { text-align: left !important;; }
/* 中央 */
.t_center { text-align: center !important;; }

/* ------------------------------------------------ */
/* 共通装飾 */
/* ------------------------------------------------ */
/* 角丸 */
.b_radius {
    border-radius: 1rem;
}

/* ================================================= */
/* Font Awesome */
/* ================================================= */
/* ------------------------------------------------ */
/* 汎用リンクボタン 末尾に丸矢印・角丸枠*/
/* ------------------------------------------------ */
.a_btn {
    display: inline-block;
    width: auto;
    height: auto;
    border-radius: 10px;
    padding: var(--space-s) var(--space);
    margin: 0;
    border: 1px #666 solid;
    background-color: #FFF;
}
.a_btn span:after {
    font-family: "Font Awesome 5 Free";
    content: "\f138";
    font-weight: bold;
    margin-left: var(--space-s);
}
.a_btn:link,
.a_btn:visited,
.a_btn:hover,
.a_btn:active {
    text-decoration: none;
}

/* ------------------------------------------------ */
/* アイコン付きテキスト */
/* ------------------------------------------------ */
/* ------------------------------------------------ */
/* ！ */

/* ------------------------------------------------ */
/* ？ */
.i_question:before,
.i_question_end:after {
    font-family: "Font Awesome 5 Free";
    content: "\f059";
    font-weight: bold;
    font-size: 1.2em;
    font-weight: 400; /* 白抜き */
}
/* ？（先頭） */
.i_question:before {
    margin-right: var(--space-s);
}
/* ？（末尾） */
.i_question_end:after {
    margin-left: var(--space-s);
}

/* ------------------------------------------------ */
/* ｉ */
.i_info:before,
.i_info_end:after {
    font-family: "Font Awesome 5 Free";
    content: "\f05a";
    font-weight: bold;
    font-size: 1.2em;
}
/* ｉ（先頭） */
.i_info:before {
    margin-right: var(--space-s);
}
/* ｉ（末尾） */
.i_info_end:after {
    margin-left: var(--space-s);
}

/* ------------------------------------------------ */
/* 丸右矢印（リンク） */
.i_link:before,
.i_link_end:after {
    font-family: "Font Awesome 5 Free";
    content: "\f138";
    font-weight: bold;
    font-size: 1.2em;
    display: inline-block;  /* リンクのデコレーションを反映させないようにするため設定 */
}
/* 丸右矢印（先頭） */
.i_link:before {
    margin-right: var(--space-s);
}
/* 丸右矢印（末尾） */
.i_link_end:after {
    margin-left: var(--space-s);
}

/* ------------------------------------------------ */
/* 丸下矢印（ページ内リンク） */
.i_link_internal:before,
.i_link_internal_end:after {
    font-family: "Font Awesome 5 Free";
    content: "\f13a";
    font-weight: bold;
    font-size: 1.2em;
    display: inline-block;  /* リンクのデコレーションを反映させないようにするため設定 */
}
/* 丸右矢印（先頭） */
.i_link_internal:before {
    margin-right: var(--space-s);
}
/* 丸右矢印（末尾） */
.i_link_internal_end:after {
    margin-left: var(--space-s);
}

/* ------------------------------------------------ */
/* 外部リンク */
.i_link_external:before,
.i_link_external_end:after {
    font-family: "Font Awesome 5 Free";
    content: "\f35d";
    font-weight: bold;
    font-size: 1.2em;
    display: inline-block;  /* リンクのデコレーションを反映させないようにするため設定 */
}
/* 丸右矢印（先頭） */
.i_link_external:before {
    margin-right: var(--space-s);
}
/* 丸右矢印（末尾） */
.i_link_external_end:after {
    margin-left: var(--space-s);
}



/* ボタン(内部リンク) 
a.a_btn_content {
    display: inline-block;
    width: auto;
    height: auto;
    padding: 10px;
    margin: 0;
    border: 1px #666 solid;
    background-color: #FFF;
}
a.a_btn_content span:after {
    font-family: "Font Awesome 5 Free";
    content: "\f13a";
    font-weight: bold;
    margin-left: 5px;
}*/

/* ================================================= */
/* 国旗 */
/* ================================================= */
.icon_flag {
    display: inline-block;
    width: 30px;
    height: 20px;
    text-indent:-9999px; /* テキスト非表示 */
    margin: 0;
    padding: 0;

    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}

/* イギリス */
.flag_uk,   /* 旧クラス名 */
.icon_flag._uk {
    background-image: url(https://www.swany-kamakura.co.jp/onlineshop/img/item_page/flags/uk.svg);
}
/* イタリア */
.icon_flag._it {
    background-image: url(https://www.swany-kamakura.co.jp/onlineshop/img/item_page/flags/it.svg);
}
/* フランス */
.icon_flag._fr {
    background-image: url(https://www.swany-kamakura.co.jp/onlineshop/img/item_page/flags/fr.svg);
}
/* スペイン */
.icon_flag._es {
    background-image: url(https://www.swany-kamakura.co.jp/onlineshop/img/item_page/flags/es.svg);
}
/* トルコ */
.icon_flag._tr {
    background-image: url(https://www.swany-kamakura.co.jp/onlineshop/img/item_page/flags/tr.svg);
}
/* オランダ */
.icon_flag._nl {
    background-image: url(https://www.swany-kamakura.co.jp/onlineshop/img/item_page/flags/nl.svg);
}
/* ベルギー */
.icon_flag._be {
    background-image: url(https://www.swany-kamakura.co.jp/onlineshop/img/item_page/flags/be.svg);
}
/* リトアニア */
.icon_flag._lt {
    background-image: url(https://www.swany-kamakura.co.jp/onlineshop/img/item_page/flags/lt.svg);
}


/* ================================================= */
/* 動画 */
/* .movie_wrap：新クラス名（リニューアルページで使用）*/
/* .movie_youtube：旧クラス（クリーム色の背景の商品ページで使用） */
/* ================================================= */
.movie_youtube,
.movie_wrap {
    display: block;
    position: relative;
    width: 100%;
    max-width: 560px;
    max-height: 315px;
    text-align: center;
    margin: 0 auto;
}
.movie_wrap {
    display: block;
}
.movie_youtube:before,
.movie_wrap:before {
    content:"";
    display: block;
    padding-top: 56.25%;
}
.movie_youtube iframe,
.movie_wrap iframe {
    position: absolute;
    top: 0;
    right: 0;
    width: 100% !important;
    height: 100% !important;
    margin: 0 auto;
}

/* ================================================= */
/* 入力系 */
/* ================================================= */
/* iOS用デザインリセット */
main#main_wrap input[type="text"],
main#main_wrap select
 {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
}

/* ------------------------------------------------ */
/* 入力欄 */
main#main_wrap input[type="text"] {
    padding: var(--space);
    font-size: 16px;  /* iPhoneの画面が寄らないように16px以上 */
    border: 1px solid #ccc;
    text-align:center;
}
main#main_wrap input[name="amount"] {
    width: 6rem; 
    font-size: 1.8rem;
}

/* ------------------------------------------------ */
/* プルダウン */
main#main_wrap select {
    display:block;
    width: 100%;
    height: 5rem;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    border:1px solid #ccc;
    padding: var(--space-s);
    /*margin-top: var(--space-s);*/

    font-size: 16px;  /* iPhoneの画面が寄らないように16px以上 */

    /* プルダウン矢印 */
    background-image: url(https://www.swany-kamakura.co.jp/onlineshop/img/icon/select_666666.svg);
    background-repeat: no-repeat;
    background-size: 12px auto;
    background-position: right 1rem center;
}

/* ================================================= */
/* 注意情報BOX */
/* ================================================= */
.info_box {
    margin: 0;
    width: 100%;
    text-align: left;
    border: 1px #666 solid;
    padding: 0;
    font-size: 1.2rem;
    background-color: #FFF;
}
/* タイトル */
.info_box h4 {
    width: 100%;
    display: inline-block;
    color: #FFF;
    font-size: 1.8rem !important;
    text-align: center !important;
    padding: var(--space-s) !important;
    background: #666;
    margin: 0;
}
/* 中身 */
.info_box > div {
    width: 100%;
    padding: var(--space-box);
}
/* 見出しテキスト */
.info_box > div .info_h {
    display: block;
    font-size: 1.4rem;
    color: #F33;
    margin-bottom: var(--space);
}
.info_box > div .info_h:before {
    font-family: "Font Awesome 5 Free";
    content: "\f06a"; /* ! */
    font-weight: bold;
}
.info_box > div em {
    font-weight: bold;
}
/* リンク */
.info_box > div a:link,
.info_box > div a:visited,
.info_box > div a:active {
    text-decoration: underline;
}
.info_box > div a:hover {
    text-decoration: none;
}
/* 画像 */
.info_box > div img {
    width: 100%;
    height: auto;
}
/* カートエリア注意アイコン用タグ */
/* このタグが設定されている場合は、このテキストを優先表示 */
.info_box .info_alert {
    display: none;
}

/* ================================================= */
/* 数字バー（生地の厚み・伸縮性） */
/* ================================================= */
main#main_wrap .num_bar {
    display: flex;
    position: relative;
    width: 20rem;
    height: auto;
    justify-content: space-between;
    font-weight: bold;
}
main#main_wrap .num_bar:before { /* 横線 */
    position: absolute;
    top: calc(50% - 1px);
    left: 0;
    width: 100%;
    height: 2px;
    content: '';
    background: #CCC;
}
main#main_wrap .num_bar span { /* 丸部分 */
    display: inline-flex;
    z-index: 1;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    flex-flow: column; 
    vertical-align: top;
    /*border: 4px solid #CCC;*/
    color: #FFF;
    background-color: #CCC;
    font-size: 1em;
    width: 2.6em;
    height: 2.6em;
}
/* アクティブ設定 */
main#main_wrap .num_bar._1 span:nth-child(1) {
    background-color: #333;
}
main#main_wrap .num_bar._2 span:nth-child(2) {
    background-color: #333;
}
main#main_wrap .num_bar._3 span:nth-child(3) {
    background-color: #333;
}
main#main_wrap .num_bar._4 span:nth-child(4) {
    background-color: #333;
}
main#main_wrap .num_bar._5 span:nth-child(5) {
    background-color: #333;
}
main#main_wrap .num_bar._6 span:nth-child(6) {
    background-color: #333;
}
main#main_wrap .num_bar._7 span:nth-child(7) {
    background-color: #333;
}
main#main_wrap .num_bar._8 span:nth-child(8) {
    background-color: #333;
}
main#main_wrap .num_bar._9 span:nth-child(9) {
    background-color: #333;
}
main#main_wrap .num_bar._10 span:nth-child(10) {
    background-color: #333;
}

/* ================================================= */
/* 全ページ共通要素 */
/* ================================================= */

/* 左右のスペース（PC） */
/* 背景色があるコンテンツなどで、sp_side_spaceと併用する場合など */
.side_space {
    padding-left: var(--space-box) !important;
    padding-right: var(--space-box) !important;
}

/* 左右のスペース（コンテンツ最大幅になったら出す） */
/*@media screen and (max-width: 599px) {*/
@media screen and (max-width: 1010px) {
    /* 両脇にスペース */
    .side_space,
    .sp_side,
    .sp_side_space {
        padding-left: var(--space) !important;
        padding-right: var(--space) !important;
    }
}

/* ------------------------------------------------ */
/* スクロールエフェクト（スクロールすると要素がふわっと出てくる） */
/* ------------------------------------------------ */
.scroll_fx {
    transition: 0.8s ease-in-out;
    transform: translateY(30px);
    opacity: 0;
}
.scroll_fx.in {
    transform: translateY(0);
    opacity: 1.0;
}


/* ------------------------------------------------ */
/* content クラス */
/* ------------------------------------------------ */
/* ------------------------------------------------ */
/*  */
main#main_wrap .content {
    margin-bottom: var(--space-box) !important;    /* レコメンドとの堺 */
}

main#main_wrap .content .content_page_h {
    text-align: left;
    font-size: 2.6rem;
    padding: 0;
    margin: 0;
    margin-top: var(--space-box) !important;
    margin-bottom: var(--space-ll) !important;
}

/* スマホ 
@media screen and (max-width: 800px) {
    main#main_wrap .content {
        margin-bottom: 0 !important;
    }
}*/