@charset "utf-8";


/*--------------------------------------------------------------------
 * ベース設定
 *------------------------------------------------------------------*/

* {
    font-family: "Hiragino Kaku Gothic Pro", "Yu Gothic", sans-serif;
    font-weight: normal;
}

/* iPhoneの自動フォント調整機能を無効化 */
html{ -webkit-text-size-adjust: none; }


/* 上部の隙間を無効化 */
* {
    margin: 0;
    padding: 0;
}
/* clearfix */
.cf:after {
    content: '';
    display: block;
    clear: both;
    height: 0;
}

body {
    background-color: #efede9;
    line-height:1;
}

#base_wrap {
    margin: 0 auto;
    max-width: 540px;
    background-color: #fff;
}

h3 {
    width: 100%;
    background-color: #f1f8e7;
}

h3 p{
    display:inline;
}

.flexiblebox {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
    align-items: center; /* 縦方向中央揃え */
}

.nonflex {
    display: block !important;
}

.textcenter {
    text-align: center;
}

/*--------------------------------------------------------------------
 * 表示領域が641px以上の場合に適用するスタイル
 *------------------------------------------------------------------*/

/*--------------------------------------------------------------------
 * フォントサイズ
 *------------------------------------------------------------------*/

.fs1 {font-size: 50%;}
.fs2 {font-size: 90%;}
.fs3 {font-size: 100%;}
.fs4 {font-size: 125%;}
.fs5 {font-size: 150%;}
.fs6 {font-size: 175%;}
.fs7 {font-size: 200%;}
.fs8 {font-size: 225%;}
.fs9 {font-size: 250%;}
.fs10 {font-size: 275%;}
.fs11 {font-size: 300%;}

/*--------------------------------------------------------------------
 * フォント太さ
 *------------------------------------------------------------------*/

.fw1 {font-weight: lighter;}
.fw2 {font-weight: normal;}
.fw3 {font-weight: bold;}
.fw4 {font-weight: bolder;}

/*--------------------------------------------------------------------
* 文字つめ
*------------------------------------------------------------------*/

.selector {
    font-feature-settings: "palt";
}

/*--------------------------------------------------------------------
* フォントカラー
*------------------------------------------------------------------*/

.fc_w {
    color: #fff;
}

.fc_g {
    color: #666666;
}

.fc_r {
    color: #b9152a;
}

.text-danger {
    color: #b9152a;
}

.text-error {
    color: #39b34a;
}

/*--------------------------------------------------------------------
 * マージン
 *------------------------------------------------------------------*/

.mt5 {margin-top:5px;}
.mt10 {margin-top:10px;}
.mt15 {margin-top:15px;}
.mt20 {margin-top:20px;}
.mt25 {margin-top:25px;}
.mt30 {margin-top:30px;}
.mt35 {margin-top:35px;}

.mb5 {margin-bottom:5px;}
.mb10 {margin-bottom:10px;}
.mb15 {margin-bottom:15px;}
.mb20 {margin-bottom:20px;}
.mb25 {margin-bottom:25px;}
.mb30 {margin-bottom:30px;}
.mb35 {margin-bottom:35px;}


/*--------------------------------------------------------------------
 * パディング
 *------------------------------------------------------------------*/

.pt5 {padding-top:5px;}
.pt10 {padding-top:10px;}
.pt15 {padding-top:15px;}
.pt20 {padding-top:20px;}
.pt25 {padding-top:25px;}
.pt30 {padding-top:30px;}
.pt35 {padding-top:35px;}

.pb5 {padding-bottom:5px;}
.pb10 {padding-bottom:10px;}
.pb15 {padding-bottom:15px;}
.pb20 {padding-bottom:20px;}
.pb25 {padding-bottom:25px;}
.pb30 {padding-bottom:30px;}
.pb35 {padding-bottom:35px;}

.pr5 {padding-right:5px;}
.pr10 {padding-right:10px;}
.pr15 {padding-right:15px;}
.pr20 {padding-right:20px;}
.pr25 {padding-right:25px;}
.pr30 {padding-right:30px;}

.pl5 {padding-left:5px;}
.pl10 {padding-left:10px;}
.pl15 {padding-left:15px;}
.pl20 {padding-left:20px;}
.pl25 {padding-left:25px;}
.pl30 {padding-left:30px;}


/*--------------------------------------------------------------------
 * 横並び
 *------------------------------------------------------------------*/
.flex {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
}

/*--------------------------------------------------------------------
 * 各Box設定
 *------------------------------------------------------------------*/
/* タイトル */
.title_box {
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    margin-top: 20px;
}

/* 90%縮小 Box */
.box90 {
    width: 90%;
    margin: 0 auto;
}

/* 80%縮小 Box */
.box80 {
    width: 80%;
    margin:0 auto;
}

/* 75%縮小 Box */
.box75 {
    width: 75%;
    margin:0 auto;
}

/* 25%縮小 Box */
.box25 {
    width: 25%;
    margin:0 auto;
}

/* サブメニュー */
.sub_menu{
    width:90%;
    margin: 0 auto;
}

/* オペレーター画像 */
.op_box{
    width: 20%;
}

/* footer ghロゴ */
.logo_box{
    width: 35%;
}

/* footer shop 住所 */
.address_box{
    width: 65%;
}

/* footer jadmaロゴ */
.jadma_logo_box{
    width: 20%;
}

/* footer jadmaテキスト */
.jadma_txt_box{
    width: 80%;
}

/* footer セキュリティテキスト */
.ssl_txt_box{
    width: 75%;
}

/* footer セキュリティロゴ */
.ssl_logo_box{
    width: 25%;
}

/* footer コピーライト */
.copy_box{
    width: 100%;
    text-align: center;
}

/* エラーメッセージ（全体） */
.attentionP {
    background: #d00;
    color: #fff;
    padding: 1em;
    font-weight: bold;
    margin: 0 auto 1.5em;
}

/* エラーメッセージ */
.error2 {
    width: 90%;
    margin: 5px auto;
    font-weight: bold;
}

/* 商品名 */
.item_text {
    color: #0092d3;
}

/* 白背景インプット */
.white_input input,
.white_input select,
.white_input textarea {
    background: #fff !important;
}

/* グレー背景インプット */
.gray_input input,
.gray_input select,
.gray_input textarea {
    background: #eee !important;
}


/*--------------------------------------------------------------------
 * 横並び
 *------------------------------------------------------------------*/

.box_a{
    width: 50%;
    float:right;/* 横並びにする */

}
.box_b{
    width: 50%;
    float:left;/* 横並びにする */

}

/* float left解除 */
.clear{
    clear:both;
}

/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }


/*--------------------------------------------------------------------
 * 商品合計表示関係
 *------------------------------------------------------------------*/

/* 小計行 */
.subtotal_row {
    justify-content: space-between;
}

/* 小計部分ラベル */
.subtotal_label {
    display: block;
    width: 60%;
}

/* 小計部分値 */
.subtotal_value {
    display: block;
    width: 40%;
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-weight: 500;
    font-size: 24px;
    text-align: right;
}

/* item　合計金額 */
.total_box {
    background-color: #f2f8e8;
}

/* 合計行 */
.total_row {
    justify-content: space-between;
}

/* 合計部分ラベル */
.total_label {
    display: block;
    width: 60%;
    line-height: 36px;
}

/* 合計部分値 */
.total_value {
    display: block;
    width: 40%;
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-weight: 500;
    font-size: 24px;
    padding-right: 5%;
    text-align: right;
    color: #c00;
}

/*--------------------------------------------------------------------
 * ボタン関係
 *------------------------------------------------------------------*/

/* Telボタン */
.tel_btn{
    width: 80%;
}


/*--------------------------------------------------------------------
 * フォーム全般
 *------------------------------------------------------------------*/
input[type=tel], input[type=text], input[type=password], input[type=email], textarea {
    font-size: 16px;
}

/*--------------------------------------------------------------------
 * チェックボックス
 *------------------------------------------------------------------*/

.chkbox {
    margin:0 auto;
}
/* ラベルのスタイル　*/
.chkbox label {
    padding-left:		25px;/* ラベルの位置 */
    display:		inline-block;
    cursor:			pointer;
    position:		relative;
}

/* ボックスのスタイル */
.chkbox label:before {
    content:		'';
    width:			24px;			/* ボックスの横幅 */
    height:			24px;			/* ボックスの縦幅 */
    display:		inline-block;
    position:		absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left:			0;
    background-color:	#ffdddd;
    border: 1px solid #999;
}
/* 元のチェックボックスを表示しない */
.chkbox input[type=checkbox] {
    display:		none;
}
/* チェックした時のスタイル */
.chkbox input[type=checkbox]:checked + label:before {
    content:		'\2713';		/* チェックの文字 */
    font-size:		24px;			/* チェックのサイズ */
    color:			#b9152a;			/* チェックの色 */
    background-color:	#fff;			/* チェックした時の色 */
}

.closed {
    display: none;
}

/*--------------------------------------------------------------------
 * キャッシュレス
 *------------------------------------------------------------------*/
.cashless {
    box-sizing: border-box;
    justify-content: space-between;
}
.cashless_banner {
    width: 35%;
    box-sizing: border-box;
    padding-right: 10px;
}
.cashless_banner img {
    max-width: 100%;
}
.cashless_text {
    width: 64%;
    font-size: .9em;
    line-height: 1.4em;
}

.overlay {
    display: none;
    background: rgba(0, 0, 0, 0.3);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999999;
}

/*--------------------------------------------------------------------
 * 表示領域が640px以下の場合に適用するスタイル
 *------------------------------------------------------------------*/

@media screen and (max-width: 640px) {

    /*--------------------------------------------------------------------
     * フォントサイズ
     *------------------------------------------------------------------*/

    .fs1 {font-size: 30%;}
    .fs2 {font-size: 54%;}
    .fs3 {font-size: 63%;}
    .fs4 {font-size: 75%;}
    .fs5 {font-size: 90%;}
    .fs6 {font-size: 105%;}
    .fs7 {font-size: 120%;}
    .fs8 {font-size: 135%;}
    .fs9 {font-size: 150%;}
    .fs10 {font-size: 165%;}
    .fs11 {font-size: 180%;}


    /* 数量セレクト */
    .select_box{
        width: 100%;
        height: 50px;
        border: 1px solid #666666;
        border-radius: 5px;
    }

    /*--------------------------------------------------------------------
     * 縦並び
     *------------------------------------------------------------------*/

    .box_a{
        width: 100%;
        padding-bottom: 10px;
    }
    .box_b{
        width: 100%;
    }
    /* float解除 */
    .clear{
        display:none;
    }

    /* スマホで見たときは"sp"のclassがついた画像が表示される */
    .pc { display: none !important; }
    .sp { display: block !important; }

    /* エラーメッセージ */
    .attentionP {
        line-height: 1.4em;
    }

    /* キャッシュレスバナー */
    .cashless_banner {
        width: 40%;
    }
    .cashless_text {
        width: 58%;
        font-size: .7em;
        line-height: 1.5em;
    }
}