@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,500,700&display=swap&subset=japanese');

/**
 * サイト共通定義
 *
 * CSS versions	3
 *
 * @category   Web Application
 * @package    Argus
 * @copyright  Polaris, Inc.
 *
 */

/*==========================================
 リセット定義
===========================================*/
h1, h2, h3, h4, h5, h6, p, ul, li, dl, dt, dd,
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section
{
	margin:0;
	padding:0;
}
ul
{
	list-style-type:none;
}
input, select
{
    vertical-align:middle;
}
img
{
	border-style:none;
}
a
{
	color:#424242;
	text-decoration:none;
}
input, button, a
{
	outline:0px;
}
input::-moz-focus-inner,
button::-moz-focus-inner
{
	border:0;
}
pre,
.pre
{
    font-family:'Noto Sans JP' , 'Helvetica Neue', Helvetica, Arial, Roboto, 'Droid Sans', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic ProN', sans-serif;
	white-space:pre;			/* CSS 2.0 */
	white-space:pre-wrap;		/* CSS 2.1 */
	white-space:pre-line;		/* CSS 3.0 */
	white-space:-pre-wrap;		/* Opera 4-6 */
	white-space:-o-pre-wrap;	/* Opera 7 */
	white-space:-moz-pre-wrap;	/* Mozilla */
	white-space:-hp-pre-wrap;	/* HP Printers */
	word-wrap:break-word;		/* IE 5+ */
}
*, *:before, *:after
{
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-o-box-sizing:border-box;
	-ms-box-sizing:border-box;
	box-sizing:border-box;
}
table
{
    border-collapse:collapse;
    border-spacing:0;
}
label
{
	margin-left:0.3rem;
}

/*==========================================
 基本フレーム定義
===========================================*/
html
{
    font-size:14px;
}
@media screen and (min-width:480px) and (max-width:960px)
{
    html
    {
        font-size:13px;
    }
}
@media screen and (min-width:0px) and (max-width:479px)
{
    html
    {
        font-size:12px;
    }
}
h1, h2, h3, h4, h5, h6
{
	font-size:1rem;
}
body
{
	color:#333;
    line-height:1.8;
    letter-spacing:0rem;
    font-family:'Noto Sans JP' , 'Helvetica Neue', Helvetica, Arial, Roboto, 'Droid Sans', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic ProN', sans-serif;
	background-color:#f2f2f2;
}
#headerbox
{
	clear:both;
	margin:0 auto;
	width:100%;
	background-color:#fff;
}
#wrapper
{
    margin:0rem auto 0rem;
    min-width:320px;
}
#content
{
	float:left;
    width:100%;
}
#mainbox
{
    clear:both;
	margin:0 auto;
    min-height:300px;
	background-color:#f2f2f2;
}
#leftbox
{
    min-height:300px;
	background-color:#fff;
}
#rightbox
{
    min-height:300px;
	background-color:#fff;
}
#footerbox
{
	clear:both;
	margin:0 auto;
	width:100%;
}

/*==========================================
 クリアフィックス
===========================================*/
div,
dl, dt, dd,
header, footer
{
	/*zoom: 1;*/
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
div:before, div:after,
header:before, header:after,
footer:before, footer:after
{
	content:"";
	display:table;
}
div:after,
header:after,
footer:after
{
	clear:both;
}
.cf:before,
.cf:after
{
	content:"";
	display:table;
}
.cf:after
{
	clear:both;
}

/*==========================================
 共通定義
===========================================*/
/* エラー */
.err
{
    clear:both;
    margin-top:0.5rem;
    color:#f00;
    font-size:0.9rem;
}

/* 必須 */
.required
{
	position:relative;
    font-size:0.8rem;
    font-weight:400;
}
.required::before
{
	position: absolute;
	padding:0.0rem 0.1rem 0.1rem;
	content:'必須';
	left:0.5rem;
	top:-0.2rem;
	width:3.0rem;
	text-align:center;
	color:#fff;
	background-color:#17a481;
	border-radius: 0.6rem;
	-moz-border-radius: 0.6rem;
	-webkit-border-radius: 0.6rem;

}

/* 注意 */
.caution
{
    color:#f00;
}

/* 警告 */
.warning
{
	position:relative;
	margin-top:1rem;
	padding-left:2rem;
	font-weight:bold;
}
.warning::before
{
	position:absolute;
	top:0.2rem;
	left:0;
	content: '';
	display: block;
	width:1.5rem;
	height:1.5rem;
	background-image:url("/contents/block/warning.png");
	background-size: contain;
	background-repeat: no-repeat;
}

/*==========================================
 ページレイアウト操作
===========================================*/
/* ヘッダ操作パネル */
#builder_cmd
{
	background-color:#aaa;
	padding-bottom:0.5em;
}
#builder_cmd p.builder_page_name
{
	clear:both;
	padding-top:0.5em;
	padding-bottom:0.5em;
	width:100%;
	color:#fff;
	font-weight:bold;
	text-align:center;
}
#builder_cmd p.builder_view_mode
{
	float:left;
	margin-left:0.5em;
	padding-top:0.3em;
	padding-bottom:0.3em;
	width:5em;
	color:#f00;
	font-weight:bold;
	text-align:center;
	vertical-align:middle;
	background-color:#fff;
}
#builder_cmd [class^='builder_cmd_']
{
	float:right;
	margin-right:0.5em;
	padding-top:0.3em;
	padding-bottom:0.3em;
	width:5em;
	color:#fff;
	text-align:center;
	vertical-align:middle;
}
#builder_cmd .builder_cmd_0
{
	background-color:#00f;
}
#builder_cmd .builder_cmd_1
{
	background-color:#f00;
}

/* カラムタイトル */
p.builder_column_title
{
	color:#fff;
	text-align:center;
	border:1px dashed #fff;
	background-color:#aaa;
}

/* ブロック操作パネル０ */
[id^='builder_child_cmd']
{
	clear:both;
	text-align:center;
	background-color:#aaa;
}
[id^='builder_child_cmd'] > div
{
	clear:both;
	padding-top:0.2em;
	padding-bottom:0.2em;
	width:100%;
	background-color:#ccc;
}
[id^='builder_child_cmd'] a
{
	display:inline-block;
	color:#fff;
	padding-top:0.5em;
	padding-bottom:0.5em;
	font-size:0.8em;
	text-align:center;
	background-color:#888;
}
[id^='builder_child_cmd'] ul
{
	list-style:none;
}
[id^='builder_child_cmd'] li
{
}
[id^='builder_child_cmd'] li:first-child
{
	float:left;
	width:50%;
}
[id^='builder_child_cmd'] li:not(:first-child)
{
	float:right;
	width:50%;
	background-color:#ccc;
}
[id^='builder_child_cmd'] a[class^='builder_child_cmd_']
{
	border: 1px solid #777;
}

[id^='builder_child_cmd'] a.builder_child_cmd_new,
[id^='builder_child_cmd'] a.builder_child_cmd_sel
{
	float:left;
	width:3em;
}
[id^='builder_child_cmd'] a.builder_child_cmd_up,
[id^='builder_child_cmd'] a.builder_child_cmd_down
{
	float:right;
	width:1.5em;
}
[id^='builder_child_cmd'] a.builder_child_cmd_edit
{
	float:right;
	width:3em;
}
[id^='builder_child_cmd'] a.builder_child_cmd_del
{
	float:left;
	background-color:#f00;
	width:3em;
}


/*==========================================
 エラーページ
===========================================*/
.BLK_ERR
{
    margin:0 auto;
    padding:3em 3em 5em 3em;
    width:960px;
}
.BLK_ERR h1
{
    font-size:1.5rem;
    font-weight:bold;
}
.BLK_ERR p
{
    font-size:1.2rem;
    font-weight:bold;
}
.message
{
    margin:0 auto;
    max-width:960px;
}


/*==========================================
 コラム・記事セクション
===========================================*/
/* 共通 */
#section_list
{
	margin:0 auto;
	width:98%;
}
#section_list .section
{
	padding:0.5rem 0;
}

/* 大見出し */
#section_list .a_ttl0
{
	clear:both;
	padding:0.5rem 1rem;
	display:block;
	width:auto;
	color:#fff;
	font-weight:bold;
	font-size:1.5rem;
	background-color:#ec0714;
	word-wrap: break-word;

	/*	角丸 */
	border-radius:6px;
	-webkit-border-radius:6px;
	-moz-border-radius:6px;
}
/* 中見出し */
#section_list .a_ttl1
{
	clear:both;
	padding:0.4rem 1rem;
	display:block;
	width:auto;
	color:#333;
	font-weight:bold;
	font-size:1.3rem;
	border-left:4px solid #ec0714;
	border-bottom:4px solid #ec0714;
	word-wrap: break-word;
}
/* 小見出し */
#section_list .a_ttl2
{
	clear:both;
	padding:0.5rem 1.5rem;
	display:block;
	width:auto;
	color:#333;
	font-size:1.3rem;
	background-color:#fff0f5;
	word-wrap: break-word;
}
/* 極小見出し */
#section_list .a_ttl3
{
	clear:both;
	padding:0.5rem 1.5rem;
	display:block;
	width:auto;
	color:#333;
	font-size:1.3rem;
	background-color:#f0f0f0;
	border-bottom:1px solid #333;
	word-wrap: break-word;
}
@media screen and (min-width:480px) and (max-width:960px)
{
	#section_list			{	width:97%}
	#section_list .a_ttl0	{	font-size:1.4rem;}
	#section_list .a_ttl1	{	font-size:1.2rem;}
	#section_list .a_ttl2	{	font-size:1.2rem;}
	#section_list .a_ttl3	{	font-size:1.2rem;}
	#section_list .section	{	padding:0.5rem 0;}
}
@media screen and (min-width:0px) and (max-width:479px)
{
	#section_list			{	width:96%}
	#section_list .a_ttl0	{	font-size:1.3rem;}
	#section_list .a_ttl1	{	font-size:1.1rem;}
	#section_list .a_ttl2	{	font-size:1.1rem;}
	#section_list .a_ttl3	{	font-size:1.1rem;}
}

/* 目次 */
#section_list .index
{
	margin:2rem auto;
	padding:3.4rem 2.4rem;
	border-top:2px solid #ec0714;
	border-bottom:2px solid #ec0714;
	background-color:#f6f6f6;
	word-wrap: break-word;
}
#section_list .index > div
{
	position:relative;
	padding-left:2rem;
	font-size:1.4rem;
	font-weight:bold;
	color:#ec0714;
}
#section_list .index > div::before
{
	position:absolute;
	top:0.5rem;
	left:0;
	width:16px;
	height:16px;
	background-size:contain;
	background-repeat:no-repeat;
}
#section_list .index ul li
{
	padding:0.6rem 0;	
}
#section_list .index ul li:first-of-type
{
	margin-top:1.4rem;
}
#section_list .index ul li.lv_h2 {	padding-left:1rem;}
#section_list .index ul li.lv_h3 {	padding-left:4rem;}
#section_list .index ul li.lv_h4 {	padding-left:6rem;}
#section_list .index ul li a
{
	font-size:1.4rem;
	font-weight:bold;
	text-decoration:underline;
	color:#ec0714;
}
@media screen and (min-width:0px) and (max-width:479px)
{
	#section_list .index ul li.lv_h2 {	padding-left:1rem;}
	#section_list .index ul li.lv_h3 {	padding-left:2rem;}
	#section_list .index ul li.lv_h4 {	padding-left:3rem;}
	#section_list .index ul li a
	{
		font-size:1.2rem;
	}
}

/*==========================================
 商品
===========================================*/
/* デッキ形式 */
#section_list .product_deck
{
	padding: 0.1rem 0.3rem;
	background-color:#f6f6f6;
	display:flex;
	flex-wrap:wrap;
}
#section_list .product_deck > div
{
	margin-bottom:0.5rem;
	padding:0.4rem 0.2rem 0 0.3rem;
	text-align:center;
	width:12.5%;
	background-color:#fff;
	border:3px solid #f6f6f6;
}
#section_list .product_deck > div > div:first-of-type
{
	height:calc(100% - 10px);
}
#section_list .product_deck > div a.thumb img
{
	height:100%;
	width:100%;
}
#section_list .product_deck div.count
{
	position: relative;
}
#section_list .product_deck div.count p
{
	position: absolute;
	bottom:0.2rem;
	left:0;
	right:0;
	margin: auto;
	line-height: 1.5rem;
	width:2rem;
	color:#fff;
	background-color: #000;
	opacity: 0.8;

	/*	角丸 */
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;

	/* 影（外側） */
	box-shadow:0 0 3px #fff;
	-moz-box-shadow:0 0 3px #fff;
	-webkit-box-shadow:0 0 3px #fff;

}
div.large_image
{
	position: absolute;
	z-index: 999;
	display: none;
	margin: 0 auto;
    padding: 8px 8px 2px 8px;
    width: 80%;
    max-width: 350px;
    background-color: #fff;

	/* 影（外側） */
	box-shadow:0 0 10px #ccc;
	-moz-box-shadow:0 0 10px #ccc;
	-webkit-box-shadow:0 0 10px #ccc;

}
div.large_image img
{
    width: 100%;
}
@media screen and (min-width:481px) and (max-width:1030px)
{
	#section_list .product_deck > div
	{
		width:25%;
	}
}
@media screen and (min-width:0px) and (max-width:480px)
{
	#section_list .product_deck > div
	{
		width:33%;
	}
}

/* コンテンツ形式 */
#section_list .product_content
{
	width:100%;
	background-color:#f6f6f6;
}
#section_list .product_content > div
{
	padding:0 1rem;
	display:table;
}
#section_list .product_content div.image
{
	display:table-cell;
	padding:1rem 0;
	width:30%;
	text-align:center;
}
#section_list .product_content div.image a img.card
{
	width:100%;
}
#section_list .product_content div.detail
{
	display:table-cell;
	vertical-align:top;
	padding:0 0.5rem;
	width:70%;
	height:100%;
}
@media screen and (min-width:481px) and (max-width:1030px)
{
	#section_list .product_content div.detail > a
	{
		left:15%;
	}
	#section_list .product_content div.detail
	{
		font-size:0.9rem;
	}
}
@media screen and (min-width:0px) and (max-width:480px)
{
	#section_list .product_content div.detail > a
	{
		left:15%;
	}
}

/* リスト形式 */
#section_list .product_list
{
	display:flex;
	flex-wrap:wrap;
	margin:0 auto;
	width:auto;
}
#section_list .product_list > div
{
	padding:0.1rem;
	text-align:center;
	border:4px solid #fff;
	width:19.5%;
}
#section_list .product_list.center > div
{
	margin:0 auto;
}
#section_list .product_list > div > div:first-of-type
{
	height:calc(100% - 10px);
}
#section_list .product_list > div a.thumb img
{
	height:100%;
	width:100%;
}
@media screen and (min-width:0px) and (max-width:479px)
{
	#section_list .product_list > div
	{
		border:2px solid #fff;
	}
}

/* 中央1枚形式 */
#section_list .product_step
{
	display:flex;
}
#section_list .product_step > div
{
	float:left;
	margin:0 auto;
	padding:1rem 0.4rem;
	width:25%;
	max-width:198px;
}
#section_list .product_step > div a.thumb img
{
	width:100%;
}
@media screen and (min-width:0px) and (max-width:800px)
{
	#section_list .product_step
	{
		display:block;
	}
		#section_list .product_step > div
	{
		clear:both;
		float:none;
		width:230px;
		max-width:230px;
	}
}

/*==========================================
 入力候補 Suggest
===========================================*/
div.suggest
{
	position:absolute;
	display:none;
	top:calc(100% - 0.2rem);
	left:1rem;
	width:100%;
	border:solid 2px #1191e6;
	background-color: #fff;

	/* 影（外側） */
	box-shadow:0 0 10px #aaa;
	-moz-box-shadow:0 0 10px #aaa;
	-webkit-box-shadow:0 0 10px #aaa;
	
}
div.suggest ul
{
	max-height:390px;
}
div.suggest ul li
{
	padding:0 0.5rem;
	height:30px;
}
div.suggest ul li.selected
{
	background-color:#aedaf7;
}
div.suggest p
{
	padding:0.2rem 1rem;
	text-align:right;
	color:#555;
	background-color:#eee;
}