@charset "UTF-8";

/******************************************

faqにインクルードで使うための共通設定用

*******************************************/


img.icon_bumon {
	height:1.3em;
	vertical-align:-0.2em;
	margin:0 0.2em;
}

/*========================================
表組系
========================================*/
table { margin:0.2em auto; }

table[class^="table_"] {
margin:1em auto;
}

.table_tokuten {
	border-collapse: separate;
	border-spacing: 0.2em;
}

 table[class^="table_"] th, table[class^="table_"] td {
 text-align:center;
 font-weight:normal;
}

.table_tokuten.table_normal { border:0; }

.table_tokuten th { background-color:#f0f0f0; }

.table_tokuten td {
	background-color:#f60;
	color:#fff;
}
 table[class^="table_"] strong {
 font-size:2em;
 margin:0 0.1em;
}
 table[class^="table_"] th strong {
font-weight:normal;
}

table[class^="table_"] p {
text-align:left;
margin-bottom:0;
}
table[class^="table_"] p strong {
font-size:1.2em;
border-bottom:0.2em solid #fac23b;
}

.table_tokuten .start {
	vertical-align:bottom;
	color:#f30;
}

/*----------------------------------------
お好みセレクト割独自指定
----------------------------------------*/
#preselect strong { font-weight:normal; }

/*========================================
クレジットカード
========================================*/
.credit img { margin:0.5em 2% 0.7em; }


/*========================================
凡例
========================================*/
.equation {
	margin:1em 4%;
	text-align:center;
	padding:1em 0.7em;
	border:3px double #ccc;
	font-size:1em;
	font-weight:bold;
	position:relative;
	background-color:#fff;
	box-shadow: rgba(0, 0, 0, 0.3) 0.1em 0.1em 0.3em 0;
	-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0.1em 0.1em 0.3em 0;
	-moz-box-shadow: rgba(0, 0, 0, 0.3) 0.1em 0.1em 0.3em 0;
}

.equation span { display:inline-block; }



/*========================================
キャプチャ解説
========================================*/
.explan_box { margin-bottom:1em; }

.explan_box dt img {
	height:1.4em;
	vertical-align:middle;
	margin-right:0.3em;
}

.explan_box dd dl dd:before { content:"…"; }

.explan_box dd dl dt,
.explan_box dd dl dd { display:inline; }
.explan_box dt span[class^="icon-"] {
font-size:1.2em;
vertical-align:-0.1em;
margin-right:0.3em;
font-weight:normal;
}


/*========================================
手順
========================================*/
.step_box h3 {
	border:none;
	background:#004098;
	color:#fff!important;
	border-radius: 1.5em;
	-webkit-border-radius: 1.5em;
	-moz-border-radius: 1.5em;
	padding:0.5em;
	font-size:1em!important;
	line-height:1.4;
}
 .step_box h3 span[class^="icon-"] {
 font-size:1.5em;
 font-family:icomoon;
 vertical-align:-0.15em;
 margin-left:0;
 margin-right:0.2em;
 font-weight:normal;
}

/*========================================
ページ別　送料・配送について
========================================*/

#carriage_water { border:0.2em solid #999; }

#carriage_water th,
#carriage_water td {
	border:0.1em solid #ccc;
	padding:0.2em 0.5em;
}

#carriage_water .price_box strong {
	font-size:1.5em;
	font-weight:normal;
}

#carriage_water th {
	background:#f0f0f0;
	text-align:center;
}

.red {
    color: #f00 !important;
}

.mimiyori_box .pict img {
    max-width: 95%;
}

.pict {
    margin: 1em 0;
    text-align: center;
}

.mimiyori_box h2 {
    font-size: 1.5em;
    margin-top: 2em;
    margin-bottom: 0.7em;
    border-bottom: 0.1em solid #000;
    padding-bottom: 0.2em;
}

.navi_btn {
    text-align: center;
    margin-bottom: 1em;
}

.navi_btn a {
    display: inline-block;
    margin: 0.5em 1em;
    border: 2px solid #ccc;
    padding: 0.5em 1em;
    text-decoration: none;
    font-weight: bold;
    background-color: #fff;
    border-radius: 0.5em;
    -webkit-border-radius: 0.5em;
    -moz-border-radius: 0.5em;
    overflow: hidden;
    color: #333;
}

.navi_btn a:after {
    content: "\e96a";
    font-family: "icomoon";
    font-weight: normal;
    margin-left: 0.15em;
    font-size: 1.4em;
    vertical-align: -0.15em;
}

.navi_btn a:hover {
    opacity: 0.7;
    color: #333;
}

.navi_btn a:visited {
    color: #333;
    text-decoration: none;
}

ul.attention li {
    text-align: left;
    text-indent: -1em;
    padding-left: 1em;
    line-height: 1.5;
    filter: alpha(opacity=70);
    -moz-opacity: 0.7;
    opacity: 0.7;
    font-size: 0.88em;
}

h3 span:not([class$="_none"]) {
    font-weight: normal;
    display: inline-block;
    margin-left: 1em;
    vertical-align: middle;
    text-transform: uppercase;
}

[class^="icon-"], [class*=" icon-"] {
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    margin: 0 0.1em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.mimiyori_box h3 {
    font-size: 1.4em;
    margin-top: 2em;
    margin-bottom: 0.7em;
    border-left: 0.2em solid #42a5ea;
    padding-left: 0.5em;
}

h3 {
    font-family: /*"icomoon", */ "Yu Gothic", YuGothic, "メイリオ", Meiryo, Arial, sans-serif;
    margin: 0;
}

.mimiyori_box p {
    font-size: 1.1em;
    margin-bottom: 1em;
}

p.attention {
    text-indent: -1em;
    padding-left: 1em;
    line-height: 1.5;
    opacity: 0.7;
}

.attention {
    text-align: right;
    font-size: 0.85em !important;
}

.global_h3 {
    font-size: 1.3em !important;
    border: 0.1em solid #999;
    padding: 0.5em 0.5em 0.3em;
    font-weight: normal;
}

.icon-warning:before {
    content: "\e954";
}

li {
    letter-spacing: normal;
    list-style: none;
    margin: 0;
    padding: 0;
}

ul.list_circle li {
    text-align: left;
}

.list_circle > li {
    text-indent: -1.2em;
    padding-left: 1.2em;
    line-height: 1.5;
}

ul.list_circle > li:before {
    content: "●";
    color: #fc6;
    margin-right: 0.2em;
}

div.display_hybrid .display_matrix li {
    width: 25%;
    text-align: center;
}

.display_hybrid {
    min-height: 1px;
}

.display_matrix {
    min-height: 1px;
}

.display_matrix .goods_set {
    margin-bottom: 1.5em;
}


/* テンプレート ------------------- */

 /* 商品名、受取方法、価格 */
.tate .c-panel__body {
    place-content: center; /*真ん中寄*/
    place-items: start; /*真ん中寄*/
}

/*商品画像*/
.tate .c-panel__header {
    flex: 0.8;
    padding-right: 3%; /*画像右の余白*/
}
.tate .c-panel__header img {
    margin-bottom: auto;
}

/*商品名*/
.tate .c-panel__name {
    margin: auto;
    font-size: 0.88em; /*商品名の文字サイズ*/
    height: 30px; /*商品名の上の余白*/
    font-weight: normal;
}
.tate .c-panel__name:hover {
    text-decoration: underline;
}

.tate .c-panel__action {
    margin-top: 15px; /*カートボタン上の余白*/
}

.tate .c-panel__desc {
    display: none;
}

.tate .c-panel__badge {
    margin-bottom: 0.2em;
}

/*値段*/
.tate .c-price {
    display: none;
}

@media print, screen and (min-width: 768px) {
    .top_img,
    .mimiyori_box {
        width: 720px;
        margin: 0 auto;
    }

    .table_tokuten th,
    .table_tokuten td { padding:0.5em 0.8em; }

    .credit img {
        width:45%;
        vertical-align:top;
    }

    .explan_box {
        display:table;
        table-layout:fixed;
    }
    
    .explan_box > dl { display:table-row; }
    
    .explan_box > dl > dt,
    .explan_box > dl > dd {
        display:table-cell;
        padding:0.2em 0;
    }
    
    .explan_box > dl > dt {
        padding-right:1em;
        white-space:nowrap;
    }
}

@media print, screen and (max-width: 768px) {
    table { font-size:0.85em; }

    .table_tokuten { width:100%; }

    .table_tokuten th,
    .table_tokuten td { padding:0.4em; }

    table[class^="table_"] strong {
        font-size:1.5em;
    }

    table[class^="table_"] span {
        display:inline-block;
    }

    .credit img { display:block; }

    .explan_box > dl { margin:0.4em 0; }

    .explan_box > dl > dt { font-weight:bold; }

    .explan_box > dl > dd { margin-left:1.5em; }

    .top_img,
    .mimiyori_box {
        margin: 0 0.5em 0.5em;
        width: auto;
        float: none;
        padding: 0;
    }

    div {
        font-size: 4.3vw;
    }

    .mimiyori_box h2 {
        font-size: 1.4em;
        margin: 2em 2% 0.7em 2%;
    }

    .mimiyori_box h3 {
        font-size: 1.2em !important;
        margin-top: 1.5em;
        margin-bottom: 2%;
        width: 98%;
    }

    .mimiyori_box p {
        margin: auto 2% 1.5em;
        line-height: 170%;
        font-size: 0.95em;
    }

    .navi_btn {
        font-size: 0.8em;
    }

    div.display_hybrid .display_matrix li {
        width: 33%;
    }

    .tate .c-panel__name {
        font-size: 0.75em;
        width: 90%;
    }

    .tate .c-panel__header img {
        width: 85%;
    }

    .attention > li {
        font-size: 0.75em !important;
    }

    .goods_set {
        line-height: 1.25;
    }
}