@charset "utf-8";

/* ---------------------------------------------
	common
--------------------------------------------- */
/*
*{margin:0;padding:0;}
body{font-family:"Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;height:100%;font-size:16px;line-height:1.6;color:#333;}
*/
img{border:none;max-width:100%;width: auto;height:auto;vertical-align: bottom}
li{list-style:none;}

.mt_05em{margin-top: 0.5em !important;}
.mt_1em{margin-top: 1em !important;}
.mt_15em{margin-top: 1.5em !important;}
.mt_2em{margin-top: 2em !important;}
.mt_3em{margin-top: 3em !important;}
.mt_4em{margin-top: 4em !important;}
.mt_5em{margin-top: 5em !important;}

.mb_05em{margin-bottom: 0.5em !important;}
.mb_1em{margin-bottom: 1em !important;}
.mb_15em{margin-bottom: 1.5em !important;}
.mb_2em{margin-bottom: 2em !important;}
.mb_3em{margin-bottom: 3em !important;}
.mb_4em{margin-bottom: 4em !important;}
.mb_5em{margin-bottom: 5em !important;}

.inlineB{display: inline-block;text-align: left;}
.inlineL{text-align: left;}
.inlineC{text-align: center;}
.inlineR{text-align: right;}

.indent{padding-left: 1em;text-indent: -1em;}

/* ---------------------------------------------
	form
--------------------------------------------- */
/* formリセット */
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="phone"],
input[type="text"]{
    padding: 0.5em;max-width: 100%;width: 100%;box-sizing: border-box;border: 1px solid #ccc;border-radius: 0;background: #fff;-webkit-appearance: none;}
select{padding: 0.3em 0.5em;vertical-align: bottom;}
input[type="submit"],
input[type="button"],
input[type="reset"]{padding: 0.5em 2em;border: none;-webkit-appearance: none;border-radius: 0;background-color: #ccc;cursor: pointer;line-height: 1.6;}
textarea{padding: 0.5em;max-width: 100%;border: 1px solid #ccc;width: 100%;box-sizing: border-box;height: 10em;resize: vertical;}

/* 基本スタイル */
input,select,textarea{font-size: 16px}
select{height: 2.2em;}
label{cursor: pointer;}
input.short{width: 50%;}
input.middle{width: 70%;}
@media (max-width:480px){
    input.short{width: 70%;}
    input.middle{width: 100%;}
}

/* チェックボックス */
.c_box input[type="checkbox"]{display: none;}
.c_box label{display:inline-block;line-height: 2;}
.c_box label span{padding-left: 20px;position:relative;margin-right: 0.5px;}
.c_box label span::before{content: "";display: block;position: absolute;top: 2px;left: 0;width: 15px;height: 15px;border: 1px solid #999;border-radius: 4px;}
.c_box input[type="checkbox"]:checked + span{color: #0171bd;}
.c_box input[type="checkbox"]:checked + span::after{
    content: "";display: block;position: absolute;top: -3px;left: 5px;
    width: 7px;height: 14px;transform: rotate(40deg);border-bottom: 3px solid #0171bd;border-right: 3px solid #0171bd;}

/* ラジオボックス */
.r_box input[type="radio"]{display: none;}
.r_box label{display:inline-block;line-height: 2;}
.r_box label span{padding-left: 20px;position:relative;margin-right: 0.5px;}
.r_box label span::before{content: "";display: block;position: absolute;top: 2px;left: 0;width: 15px;height: 15px;border: 1px solid #999;border-radius: 50%;}
.r_box input[type="radio"]:checked + span{color: #0171bd;}
.r_box input[type="radio"]:checked + span::after{content: "";display: block;position: absolute;top: 5px;left: 3px;width: 11px;height: 11px;background: #0171bd;border-radius: 50%;}

/* チェック・ラジオ横並び */
.cr_row label{margin-right: 1em;}

/* チェック・ラジオ縦並び */
.cr_column p{margin-bottom: 0.5em;}
.cr_column label{margin-right: 1em;}


/* ---------------------------------------------
	共通
--------------------------------------------- */
/* エラーテキスト */
.error{padding-top: 5px;color: #F00;}

/* ボタンデザイン */
.cart_button,input.cart_button{display: block;width: 100%;padding: 0.7em;color: #fff;text-decoration: none;transition: .2s;box-shadow: 3px 3px 4px rgba(0,0,0,0.2);text-align: center;background: #c1272d;font-weight: bold;font-size: 16px;box-sizing: border-box;}
.cart_button:hover,a.cart_button:hover{opacity: 0.8;box-shadow: none;cursor: pointer;}

.cart_button.gray,input.cart_button.gray{background: #888;}
.cart_button.orange,input.cart_button.orange{background: #f7931e;}
.cart_button.green,input.cart_button.green{background: #189d3f;}
.cart_button.red,input.cart_button.red{background: #ea2626;}
.cart_button.red.short,input.cart_button.red.short{background: #ea2626; width:60%}

/* ボタン横並びレイアウト */
.cart_button_row{display: flex;justify-content: center;flex-direction: row-reverse;margin: 1em 0;}
.cart_button_row .cbr_inner{margin: 0.5em;flex-basis: 30%;}
@media (max-width:767px){
    .cart_button_row{display: block;}
    .cart_button_row .cbr_inner{width: 100%;margin: 0 0 0.5em 0;}
}

/* ボタン幅100％縦並び */
.cart_button_column .cart_button,.cart_button_column input.cart_button{width: 100%;box-sizing: border-box;margin: 0 0 0.8em 0;}

/* 基本テーブルデザイン */
.cart_table{width: 100%;margin: 0 auto;border-collapse: collapse;}
.cart_table th,.cart_table td{border: solid 1px #ccc;padding: 0.8em;box-sizing: border-box;}
.cart_table th{text-align: center;background: #f2f2f2;font-weight: normal;}

/* 見出し */
.cart_h1{background: #009844;color: #fff;font-weight: bold;font-size: 1.25em;padding: 0.3em;margin: 1em 0;text-align: center;border-radius: 10px;}
.cart_h2{color: #666;font-weight: bold;border-left: 5px solid #666;padding-left: 0.2em;margin: 1.5em 0 0.5em;}

/* ---------------------------------------------
	製品ページ - サイドボタン
--------------------------------------------- */
#side_icon{position: fixed;z-index: 1000;}

#side_icon .side_inner a{display: block;transition-duration: 0.4s;text-decoration: none;color:#666;font-weight: bold;}
#side_icon .cart_btn{background: #fff;}
#side_icon .cart_btn>p{position: relative;margin-bottom: 0.2em;padding-right: 8px;}
#side_icon .cart_btn>p span{position: absolute;top: -8px;right: 2px;background: #f15a24;color: #fff;font-weight: normal;border-radius: 50px;width: 2em;height: 2em;line-height: 2em;}
#side_icon .contact_btn{background:#E7F5E7;}

@media (min-width:768px){
    #side_icon{top: 240px;right: 0;}
    #side_icon .side_inner a{border-width:6px 0 6px 6px;border-radius: 20px 0 0 20px;margin-bottom: 1em;}
    #side_icon .cart_btn{text-align: center;border:10px solid #f7931e;background:#fff;padding: 16px 10px 10px;}
    #side_icon .contact_btn{border:10px solid #5AC05A;padding: 20px 10px;line-height: 1.8;}
    #side_icon .contact_btn img{width:auto;margin-left: 5px;vertical-align:middle;}  
}
@media (max-width:767px){
    #foot{padding-bottom: 76px;}
    
    #side_icon{bottom: 0;left: 0;width: 100%;box-shadow: 0 0 5px rgba(0,0,0,0.3);}
    #side_icon .side_inner{display: flex;}
    #side_icon .side_inner a{flex-basis: 50%;padding: 0.3em;text-align: center;}
    #side_icon .cart_btn>p span{top: 4px;}
    #side_icon .side_inner a.contact_btn{padding-top: 0.8em;background: #e7f5e7 url(../img/contact_icon.png) no-repeat center right 6px;}
    #side_icon .contact_btn img{display: none;}
}

/* ---------------------------------------------
	製品ページ - カートに入れる
--------------------------------------------- */
/* カートに入れるコンテンツ */
.cart_in{border-bottom: 1px solid #ccc;}
.cart_in .cart_in_box{padding: 1em 0;border-top: 1px solid #ccc;}
.cart_in .cart_in_box .imgwrap{text-align: center;}
.cart_in .cart_in_box .txtwrap{text-align: right;}
.cart_in .title{text-align: left;font-size: 0.9em;margin-bottom: 20px;}
.cart_in .price strong{font-size: 2.25em;margin-left: 0.5em;}
.cart_in .select p{padding: 0.5em 0;}
@media (min-width:768px){
    .cart_in .cart_in_box{justify-content: space-between;}
    .cart_in .cart_in_box .imgwrap{flex-basis: 41%;flex-shrink: 0;}
    .cart_in .cart_in_box .txtwrap{flex-basis: 56%;flex-shrink: 0;}
}
@media (max-width:767px){
    .cart_in .cart_in_box .imgwrap{margin-bottom: 1em;}
}

/* 商品に関するお問い合わせ */
a.cart_contact{display: block;background: #e7f5e7 url(../img/contact_icon.png) no-repeat center right 6px;border: 3px solid #5ac05a;color: #666;font-weight: bold;text-align: center;text-decoration: none;border-radius: 10px; padding: 0.5em 30px 0.5em 0.5em;margin-top: 1em;}

/* ---------------------------------------------
	商品カート
--------------------------------------------- */
/* ナビゲーション */
.cart_flow{display: flex;margin: 1em 0 2em;}
.cart_flow li{text-align: center;flex-basis: 25%;position: relative;}
.cart_flow li::before{content: "";display: inline-block;box-sizing: border-box;border-radius: 50px;width: 21px;height: 21px;border: 5px solid #999;background: #fff;position: relative;z-index: 3;}
.cart_flow li::after{content: "";display: block;width: 100%;height: 5px;background: #999;position: absolute;top: 8px;right: 50%;}
.cart_flow li:first-child::after{content: none;}

.cart_flow li.check{color: #009245;}
.cart_flow li.check::before{background: #009245;border: none;}
.cart_flow li.check::after{background: #009245;}

@media (max-width:767px){
    .cart_flow{font-size: 0.75em;}
}

/* テーブル - アイテム */
.cart_item thead{background: #f2f2f2;}
.cart_item .t_c{border-bottom: none;border-right: none;text-align: center;width: 70px;}
.cart_item .t_c input[name="del"]{background: #fff url(../img/cart_img2.png) no-repeat top 4px center / 21px;padding: 28px 0 0 0;min-width: 21px;color: #666;cursor: pointer;}
.cart_item .t_f_wrap{border-bottom: none;}
.cart_item .ti_data p:first-child{text-align: center;}
@media (min-width:768px){
    .cart_item .t_f_wrap{padding: 0;}
    .cart_item .t_f{display: flex;}
    .cart_item thead .t_f p.sp{display: none;}
    .cart_item .t_f>div{padding: 0.8em;border-left:solid 1px #ccc;display: flex;justify-content: center;align-items: center;}
    .cart_item .t_f>div:nth-of-type(1){flex-grow: 1;border: none;}
    .cart_item .t_f>div:nth-of-type(2){flex-basis: 12%;flex-shrink: 0;}
    .cart_item .t_f>div:nth-of-type(3){flex-basis: 12%;flex-shrink: 0;}
    .cart_item .t_f>div:nth-of-type(4){flex-basis: calc(190px - 0.8em - 0.8em - 1px);flex-shrink: 0;}
    .cart_item tbody .t_f>div:nth-of-type(1){justify-content: flex-start;}
    .cart_item tbody .t_f>div:nth-of-type(2),.cart_item tbody .t_f>div:nth-of-type(4){justify-content: flex-end;}
    .cart_item .ti_data p:first-child{margin-right: 0.5em;flex-shrink: 0;}
    .cart_item .ti_data p:first-child img{max-width: 100px;}
}
@media (max-width:767px){
    .cart_item thead .t_f p.sp{text-align: center;}
    .cart_item thead .t_f>div{display: none;}
    .cart_item tbody .t_f>div{margin-bottom: 0.5em;}
    .cart_item tbody .t_f>div:last-child{margin: 0;}
    .cart_item tbody .t_f>div[data-text]::before{content: attr(data-text);}
    .cart_item .ti_data p:first-child{margin-bottom: 0.5em;}
    .cart_item .ti_data p:first-child img{max-width: 200px;}
}
/* テーブル - 合計 */
.cart_price th,.cart_price td{text-align: right;}
@media (min-width:768px){
    .cart_price td{width: 190px;}
}
@media (max-width:767px){
    .cart_price td{width: 50%;}
}
/* カートに商品が無い時 */
.cart_none{text-align: center;margin-bottom: 3em;}

/* テーブル - 入力フォーム */
.cart_form th{width: 30%;text-align: left;}
.cart_form th p{position: relative;}
.cart_form th span{display: inline-block;background: #c1272d;color: #fff;padding: 0.2em 0.3em;margin-left: 0.5em;font-size: 0.8em;position: absolute;right: 0;top: auto;}
@media (max-width:767px){
    .cart_form{border: solid 1px #ccc;}
    .cart_form th{font-weight: bold;}
    .cart_form th,.cart_form td{display: block;width: 100% !important;text-align: left;border: none;}
}