﻿@charset "utf-8";
.contents > p, section > p {
    padding: 8px 10px;
}

section img{
	max-width: 100%;
	/*width: auto;*/
	height: auto;
}

section > ul{
	margin: 10px;
}
section > ul li{
	list-style-type: disc;
	list-style-position: inside;
}

.topics h2 {
	font-size: 22px;
	position: relative;
	padding-bottom: 10px;
	color: #2a2a2a!important;
	background: transparent;
    border: none;
	border-bottom: none;
}
.topics h2::after {
	margin-top: 10px;
	display: block;
	content: "";
	height: 5px;
	background: linear-gradient(to right, #94d3fc, #0099ff);
}
.topics  h3 {
	font-size: 20px;
	padding: 10px;
	color: #53c3f1;
	border-top: 3px solid #53c3f1;
	border-bottom: 3px solid #53c3f1;
	font-weight: bold;
	line-height: 26px;
	margin: 30px 0 10px 0;
}
.topics  h4 {
	font-size: 20px;
	font-weight: bold;
	line-height: 26px;
	padding: 5px 0 5px 10px;
	border-left: 5px solid #53c3f1;
	margin: 30px 0;
}
/*---------------
 手順
---------------*/
.box_tips {
	width: 100%;
	position: relative;
	margin: 30px auto 0;
	padding: 0px 0px 7px;
	background: #FFEDBA;
	border: solid 2px #FFC107;
}
@media screen and (max-width: 767px) {
	.box_tips {
		width: 93%;
	}
}

.box_tips .box-title {
	/* position: absolute; */
    display: inline-block;
    /* top: -2px; */
    /* left: -2px; */
    margin: 0px 0px 10px;
    padding: 9px;
    /* height: 30px; */
    max-width: 85%;
    line-height: 22px;
    font-size: 17px;
    background: #FFC107;
    color: #ffffff;
    font-weight: bold;
}
.box_tips p {
	margin: -25px 0!important; 
	padding: -25px 0!important; 
	color: #2a2a2a;
}
/*---------------
 手順・箇条書き・数字ありなし
---------------*/
.box_tips ol li,
.box_tips ul li {
  border-bottom: dashed 1px orange;
  position: relative;
  padding: 0.5em 0.5em 0.5em 30px;
  line-height: 1.5em;
}

/* 手順・箇条書き・数字あり */
.box_tips ol {
	counter-reset:number; /*数字をリセット*/
	list-style-type: none!important; /*数字を一旦消す*/
	padding: 0.3em 1em 1em;
  }
.box_tips ol li:before{
	/* 以下数字をつける */
	position: absolute;
	counter-increment: number;
	content: counter(number);
	/*数字のデザイン変える*/
	display:inline-block;
	background: #ffb107;
	color: white;
	font-family: 'Avenir','Arial Black','Arial',sans-serif;
	font-weight:bold;
	font-size: 15px;
	border-radius: 50%;
	left: 0;
	width: 25px;
	height: 25px;
	line-height: 25px;
	text-align: center;
	/*以下 上下中央寄せのため*/
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}
.box_tips ol li:last-of-type {
	border-bottom: none; /*最後のliの線だけ消す*/
}

/* 手順箇条書き（数字無し） */
.box_tips ul{
	padding: 0.3em 1em 1em;
}
.box_tips ul li{
	list-style-type: none;
    margin: 0;
    padding: 0.5em 0.5em 0.5em 0;
}
.box_tips ul li::before{
	content: "●";
	display: inline-block;
	vertical-align: top;
	color: #ffb107;
	margin-right: 10px;
}

/*---------------
 画像配置
---------------*/
.center400 {
	display: block;
	margin: 0 auto;
	width: 100%;
	max-width: 400px;
}

/*---------------
 商品仕様BOX
---------------*/
.product_info {
	width: 100%;
}
@media screen and (max-width: 768px) {
	.product_info {
		width: 93%;
 		margin: auto;
	}
}
.product_info th,
.product_info td {
	border: solid 2px #53c3f1;
}
.product_info th {
	padding: 2px 0;
	background: #53c3f1;
	color: #FFF;
	font-weight: bold;
}
.product_info td {
	background: #FFF;
}
.product_info td p {
	font-size: 14px;
	margin: 0;
	padding: 0.5em 1em 0.5em 2.3em;
}
/*---------------
 商品仕様・箇条書き・数字
---------------*/
.product_info ol {
	counter-reset:number; /*数字をリセット*/
	list-style-type: none!important; /*数字を一旦消す*/
	padding: 0.3em 0.8em;
}
.product_info ol li {
	font-size: 14px!important;
	border-bottom: dashed 1px #53c3f1;
	position: relative;
	padding: 0.5em 0.5em 0.5em 30px;
	line-height: 1.5em;
}
.product_info ol li:before {
	/* 以下数字をつける */
	position: absolute;
	counter-increment: number;
	content: counter(number);
	/*数字のデザイン変える*/
	display:inline-block;
	background: #53c3f1;
	color: white;
	font-family: 'Avenir','Arial Black','Arial',sans-serif;
	font-weight:bold;
	font-size: 14px;
	border-radius: 50%;
	left: 0;
	width: 25px;
	height: 25px;
	line-height: 25px;
	text-align: center;
	/*以下 上下中央寄せのため*/
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}
.product_info ol li:last-of-type {
	border-bottom: none; /*最後のliの線だけ消す*/
}
/*---------------
 商品仕様・箇条書き
---------------*/
.product_info ul {
	padding: 0.5em 1em 0.5em 2.3em;
	position: relative;
}

.product_info ul li {
	font-size: 14px!important;
	line-height: 1.5;
	padding: 0.5em 0;
	list-style-type: none!important;/*ポチ消す*/
	border-bottom: dashed 1px #53c3f1;
}

.product_info ul li:before {
	font-family: icomoon;
	content: "\f00c";
	font-weight: 400;
	position: absolute;
	left : 1em; /*左端からのアイコンまで*/
	color: #53c3f1; /*アイコン色*/
}

.product_info Ul li:last-of-type {
	border-bottom: none; /*最後のliの線だけ消す*/
}
/*---------------
 商品詳細/参考リンク
---------------*/
.box_reference {
    position: relative;
    margin: 15px;
    padding: 25px 10px;
    background: #f0f0f0;
    border: solid 1px #c0c0c0;
}
.box_reference .box-title {
	position: absolute;
	display: inline-block;
	top: -1px;
	left: -1px;
	padding: 0 9px;
	height: 25px;
	line-height: 25px;
	font-size: 17px;
	background: #c0c0c0;
	color: #2a2a4b;
	font-weight: bold;
}
.box_reference p {
	margin: -25px 0!important; 
	padding: 10px; 
	color: #2a2a4b;
	line-height: 1.5em;
}
/*---------------
 詳細ボタン
---------------*/
.btn_center {
	display: block;
	margin: 0 auto;
	text-align: center;
	margin-bottom: 20px;
}
.btn-square-pop {
	position: relative;
	display: inline-block;
	padding: 0.25em 0.5em;
	text-decoration: none;
	color: #FFF!important;
	background: #fd9535;/*背景色*/
	border-bottom: solid 2px #d27d00;/*少し濃い目の色に*/
	border-radius: 4px;/*角の丸み*/
	box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), 0 2px 2px rgba(0, 0, 0, 0.19);
	font-weight: bold;
}

.btn-square-pop:active {
	border-bottom: solid 2px #fd9535;
	box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);
}


/*---------------
 商品詳細/サイズ表
---------------*/
table.sizechart {
	width: 440px;
	margin: 0 0 30px 0!important;
	border: solid 1px #c0c0c0;
}
table.sizechart tr {
	border: solid 1px #c0c0c0;
}
table.sizechart th,td {
	text-align: left;
	border: solid 1px #c0c0c0;
}
table.sizechart th {
	width: 200px;
	padding: 10px;
	background: #f0f0f0;
}
table.sizechart td {
	width: 200px;
	padding: 10px;
}

/*---------------
 商品詳細2/サイズ表2
---------------*/
table.sizechart2 {
	width: 440px;
	margin: 0 0 30px 0!important;
	border: solid 1px #c0c0c0;
}
table.sizechart2 tr {
	border: solid 1px #c0c0c0;
}
table.sizechart2 th,td {
	text-align: left;
	border: solid 1px #c0c0c0;
}
table.sizechart2 th {
	width: 200px;
	padding: 10px;
	background: #f0f0f0;
	text-align: center;
	font-weight: bold;
}
table.sizechart2 td {
	width: 200px;
	padding: 10px;
}

/*---------------
 目次/ブログと同じやつ
---------------*/
div#toc_container {
	width: 80%;
	max-width: 560px;
	margin: 30px auto;
	padding: 20px 0 30px 40px;
}
#toc_container li,
#toc_container ul {
	margin: 0;
	padding: 5px 10px;
}
#toc_container.no_bullets li,
#toc_container.no_bullets ul,
#toc_container.no_bullets ul li,
.toc_widget_list.no_bullets,
.toc_widget_list.no_bullets li {
	background: 0 0;
	list-style-type: none;
	list-style: none
}
#toc_container.have_bullets li {
	padding-left: 12px
}
#toc_container ul ul {
	margin-left: 1.5em
}
#toc_container {
	background: #f9f9f9;
	border: 1px solid #aaa;
	padding: 10px;
	margin-bottom: 1em;
	width: auto;
	display: table;
	font-size: 95%
}
#toc_container.toc_light_blue {
	background: #edf6ff
}
#toc_container.toc_white {
	background: #fff
}
#toc_container.toc_black {
	background: #000
}
#toc_container.toc_transparent {
	background: none transparent
}
#toc_container p.toc_title {
	text-align: center;
	font-weight: 700;
	margin: 0;
	padding: 0
}
#toc_container.toc_black p.toc_title {
	color: #aaa
}
#toc_container span.toc_toggle {
	font-weight: 400;
	font-size: 90%
}
#toc_container p.toc_title+ul.toc_list {
	margin-top: 1em
}
.toc_wrap_left {
	float: left;
	margin-right: 10px
}
.toc_wrap_right {
	float: right;
	margin-left: 10px
}
#toc_container a {
	text-decoration: none;
	text-shadow: none
}
#toc_container a:hover {
	text-decoration: underline
}
.toc_sitemap_posts_letter {
	font-size: 1.5em;
	font-style: italic
}
/*---------------
 表/横スクロール対応
---------------*/



.acroll_tbl th, .acroll_tbl td{
	font-size: 13px;
	padding: 10px;
	border: 1px solid #53c3f1;
/*	position: relative;*/
}
.acroll_tbl th{
	font-weight: bold;
	background: #e1f5fd;
	line-height: 1.1;
	vertical-align: middle;
/*
	min-width: auto;
*/
	text-align: center;
	font-size: 13px;
}
.acroll_tbl td{
/*
	width: calc(100%/2.5);
	min-width: auto;
*/
	vertical-align: top;
}

/* スクロール時のth,td幅 */



.scrollarea .acroll_tbl th{

}

.scrollarea .acroll_tbl th.th01 {
	min-width: 200px!important;
}
.scrollarea .acroll_tbl th.th02 {
	min-width: 200px!important;
}
.scrollarea .acroll_tbl th.th03 {
	min-width: 150px!important;
}
.scrollarea .acroll_tbl th.th04 {
	min-width: 150px!important;
}

.acroll_tbl th.border,.acroll_tbl td.border{
	border-left-width: 4px;
	border-right-width: 4px;
}
.acroll_tbl th.border-f,.acroll_tbl td.border-f{
/*	position: relative;*/
	border-top-width: 4px;
	border-left-width: 4px;
	border-right-width: 4px;
}
.acroll_tbl th.border-l,.acroll_tbl td.border-l{
	border-bottom-width: 4px;
	border-left-width: 4px;
	border-right-width: 4px;
}
.acroll_tbl th .bf-tag,.acroll_tbl td .bf-tag{
	display: block;
	position: relative;
	min-width: 70%;
	max-width: 90%;
	background: #ff8000;
	color: #fff;
	text-align: center;
	font-size: 13px;
	padding:2px 5px;
	top: -33px;
	left: 50%;
	transform: translateX(-50%);
	border-radius: 10px;
	z-index: 1;
}
.acroll_tbl th .bf-tag::before,.acroll_tbl td .bf-tag::before{
	content: "\f0a7";
	font-family: icomoon;
	padding-right: 5px;
	font-size: 20px;
}

/*---------------
 表/横スクロール対応（表3列）
---------------*/


.line_wrap {
	border: 1px solid #53c3f1;
}

.acroll_tbl_row3 th, .acroll_tbl_row3 td {
	font-size: 13px;
	padding: 10px;
	border: 1px solid #53c3f1;
/*	position: relative;*/
}
.acroll_tbl_row3 th{
	font-weight: bold;
	background: #e1f5fd;
	line-height: 1.1;
	vertical-align: middle;
/*
	min-width: auto;
*/
	text-align: center;
	font-size: 13px;
}
.acroll_tbl_row3 td{
/*
	width: calc(100%/2.5);
	min-width: auto;
*/
	vertical-align: top;
}

.acroll_tbl_row3 th.th01 {
	min-width: 25%!important;

}
.acroll_tbl_row3 th.th02 {
	min-width: 50%!important;
}
.acroll_tbl_row3 th.th03 {
	min-width: 25%!important;
}


/* スクロール時のth,td幅 */
.scrollarea{
	width: auto;
	margin: 0 auto 10px;
	/*white-space: nowrap;*/
	overflow-x: scroll;
	/*position: relative;*/
	border-left: 2px solid #53c3f1;
	border-right: 2px solid #53c3f1;
}

.scrollarea .acroll_tbl_row3 th{

}
.scrollarea table.acroll_tbl_row3 th.th01 {
	min-width: 150px!important;
}
.scrollarea table.acroll_tbl_row3 th.th02 {
	min-width: 400px!important;
}
.scrollarea table.acroll_tbl_row3 th.th03 {
	min-width: 150px!important;
}

/*---------------------------------- 
続きを読むパーツ（アコーディオン）
---------------------------------- */
.acroll_tbl_row3 th.border,.acroll_tbl_row3 td.border{
	border-left-width: 4px;
	border-right-width: 4px;
}
.acroll_tbl_row3 th.border-f,.acroll_tbl_row3 td.border-f{
/*	position: relative;*/
	border-top-width: 4px;
	border-left-width: 4px;
	border-right-width: 4px;
}
.acroll_tbl_row3 th.border-l,.acroll_tbl_row3 td.border-l{
	border-bottom-width: 4px;
	border-left-width: 4px;
	border-right-width: 4px;
}
.acroll_tbl_row3 th .bf-tag,.acroll_tbl_row3 td .bf-tag{
	display: block;
	position: relative;
	min-width: 70%;
	max-width: 90%;
	background: #ff8000;
	color: #fff;
	text-align: center;
	font-size: 13px;
	padding:2px 5px;
	top: -33px;
	left: 50%;
	transform: translateX(-50%);
	border-radius: 10px;
	z-index: 1;
}
.acroll_tbl_row3 th .bf-tag::before,.acroll_tbl_row3 td .bf-tag::before{
	content: "\f0a7";
	font-family: icomoon;
	padding-right: 5px;
	font-size: 20px;
}


.cp_box *, .cp_box *:before, .cp_box *:after {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.cp_box {
	width: auto;
	margin: 2em auto;
}
.cp_box label {
	font-weight: bold;
	position: relative;
	display: block;
	width: 80%;
	margin: auto;
	padding: 0.3em 1em;
	cursor: pointer;
	transition: all 0.3s;
	text-align: center;
	color: #da3c41;
	border: 2px solid #da3c41;
	border-radius: 3px;
}
.cp_box label:hover {
	transition: all 0.3s;
	color: #ffffff;
	background: #da3c41;
}
.cp_box label::after {
	font-family: 'icomoon';
	content: ' \f067';
	color: #da3c41;
}
.cp_box label:hover::after {
	color: #ffffff;
}
.cp_box input:checked ~ label::after {
	font-family: 'icomoon';
	content: ' \f068';
	color: #da3c41;
}
.cp_box input:checked ~ label:hover::after {
	color: #ffffff;
}
.cp_box input {
	display: none;
}
.cp_box .cp_container {
	position: relative;
	z-index: 10;
	overflow: hidden;
	height: 0;
	margin-top: -1px;
	transition: height 0.3s ease-in-out,box-shadow 0.6s linear;
	background: rgba(255, 255, 255, 0.5);
}
.cp_box input:checked ~ div {
	transition: height 0.5s ease-in-out,box-shadow 0.1s linear;
}
/* 続きを読むを押すと表示されるテキストの高さ */
.cp_box input:checked ~ div.cp_container {
	height: 300px;
} 

/* リンクカード */
.blog-card{
	border: 1px solid #ccc;
    background: #FAFAFA;
    margin: 55px 20px 20px;
    padding: 15px;
	position: relative;
}
.blog-card::before{
	content: "関連記事";
    position: absolute;
    top: -33px;
    left: -1px;
    color: #fff;
    background-color: #2a2a2a;
    padding: 5px 15px;
    font-size: 14px;
}
.blog-card .bc-img{
	display: inline-block;
    vertical-align: top;
    /* background: #fff; */
    margin-right: 15px;
}
.blog-card .bc-detail{
    display: inline-block;
    vertical-align: top;
    font-size: 14px;
}
@media screen and (min-width: 768px) {
	.blog-card .bc-img{
		width: 180px;
	}
	.blog-card .bc-detail{
		width: calc(100% - 203px);
	}
}
@media screen and (max-width: 767px) {
	.blog-card .bc-img{
		width: 105px;
	}
	.blog-card .bc-detail{
		width: calc(100% - 130px);
	}
}
.blog-card .bc-img img{
	width: 100%;
	height: auto;
}

.blog-card .bc-detail a{
	text-decoration: none;
}
.blog-card .bc-detail a:hover{
	color: #888;
	text-decoration: underline;
}
.blog-card .bc-detail .bc-dt-title{
	display: block;
    font-weight: bold;
    color: #4ECCE9;
    margin-bottom: 10px;
}
.blog-card .bc-detail .bc-dt-description{
	color: #555;
    font-size: 13px;
    line-height: 22px;
    display: block;
}