@charset "utf-8";

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
【 リセット 】
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

*, *:before, *:after { box-sizing: border-box; }

h1, h2, h3, h4, h5, h6 { font-weight: inherit; margin-top: 0; margin-bottom: 0; }

ol, ul { list-style: none; padding-left: 0; margin-top: 0; margin-bottom: 0; }
dl { margin-top: 0; margin-bottom: 0; }
dd { margin-left: 0; }

p { margin-top: 0; margin-bottom: 0; }
img { width: 100%; height: auto; vertical-align: top; }
a:link { outline: 0; }

table { border-collapse: collapse; }
table tr th { text-align: left; vertical-align: top; padding: 0; }
table tr td { vertical-align: top; padding: 0; }





/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
【 フォームリセット 】
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

select { cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
textarea { padding: 0; resize: vertical; }
input[type="text"] { vertical-align: top; padding: 0; }
input[type="radio"] { vertical-align: top; }
input[type="checkbox"] { vertical-align: top; }
input[type="submit"] { border: none; }
label { display: inline-block; }

/* webkit */
::-webkit-input-placeholder { color: #333333; }
:focus::-webkit-input-placeholder { color: transparent; }

/* FireFox */
:-moz-placeholder { opacity: 1; color: #333333; }
:focus:-moz-placeholder { color: transparent; }
::-moz-placeholder { opacity: 1; color: #333333; }
:focus::-moz-placeholder { color: transparent; }

/* Chorome */
input[type="text"],
input[type="password"],
textarea,
select { outline: none; }

/* Android iOS */
select { background-color: #ffffff; }

/* iOS */
input,
select,
textarea { -webkit-appearance: none; border-radius: 0; }
select,
button { color: #333333; }





/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
【 基礎スタイル 】
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

html { position: relative; overflow: hidden; overflow-y: scroll; font-family: "Poppins","Noto Sans JP","Helvetica","Arial","Doroid Sans","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,sans-serif; font-size: 62.5%; line-height: 1; color: #333333; font-weight: 500; }
a { color: #333333; text-decoration: underline; }

@media screen and (min-width: 821px) {
	a:hover { text-decoration: none; }
}





/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
【 汎用フォント関連 】
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

.fwN { font-weight: 500; }
.fwB { font-weight: 700; }
.fcR { color: #ff0000; }
.tdL { text-decoration: line-through; }
.tdU { text-decoration: underline; }
.wsN { white-space: nowrap; }
.vaM { vertical-align: middle; }
.ffsP { font-feature-settings: "palt"; }
.taR,
.taRL,
.taRC { text-align: right; }
.taC,
.taCL { text-align: center; }
.font10 { font-size: 1rem; line-height: 1.6rem; }
.font12 { font-size: 1.2rem; line-height: 2.2rem; }
.font14 { font-size: 1.4rem; line-height: 2.4rem; }
.font16 { font-size: 1.6rem; line-height: 2.6rem; }
.font18 { font-size: 1.8rem; line-height: 2.8rem; }
.font20 { font-size: 2rem; line-height: 3rem; }

@media screen and (max-width: 767px) {
	.taRL,
	.taCL { text-align: left; }
	.taRC,
	.taLC { text-align: center; }
	.font10 { font-size: 0.8rem; line-height: 1.2rem; }
	.font12 { font-size: 1rem; line-height: 1.8rem; }
	.font14 { font-size: 1.2rem; line-height: 2rem; }
	.font16 { font-size: 1.4rem; line-height: 2.2rem; }
	.font18 { font-size: 1.6rem; line-height: 2.4rem; }
	.font20 { font-size: 1.8rem; line-height: 2.6rem; }
}


/* フォントカラー オリジナルキープ */
.black { color: #000000; }
.white { color: #FFFFFF; }
.red { color: #FF0000; }
.radiocolor { color: #E8490C; }
.watchcolor { color: #D39009; }
.timecolor { color: #336600; }
.lifecolor { color: #6095E2; }





/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
【 汎用レイアウト関連 】
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

/* ――――――――――――――――――――――――――――――
［ 汎用左右レイアウト ］
―――――――――――――――――――――――――――――― */

.flL { float: left; }
.flR { float: right; }

.ofHR300 { overflow: hidden; }
.ofHR300 .flL { width: calc( 100% - 300px ); }
.ofHR300 .flR { width: 300px; }

.ofHR350 { overflow: hidden; }
.ofHR350 .flL { width: calc( 100% - 350px ); }
.ofHR350 .flR { width: 350px; }

.ofHL250300 { overflow: hidden; }
.ofHL250300 .flL { width: 250px; }
.ofHL250300 .flR { width: calc( 100% - 300px ); }

.ofHR250300 { overflow: hidden; }
.ofHR250300 .flL { width: calc( 100% - 300px ); }
.ofHR250300 .flR { width: 250px; }

.ofHR300350 { overflow: hidden; }
.ofHR300350 .flL { width: calc( 100% - 350px ); }
.ofHR300350 .flR { width: 300px; }

.ofHR400420 { overflow: hidden; }
.ofHR400420 .flL { width: calc( 100% - 420px ); }
.ofHR400420 .flR { width: 400px; }

@media screen and (max-width: 1000px) {
	.ofHR400420 .flL,
	.ofHR400420 .flR { width: 100%; }
	.ofHR400420 .flL:not(:last-child),
	.ofHR400420 .flR:not(:last-child) { margin-bottom: 40px; }
}

@media screen and (max-width: 767px) {
	.flL { float: none; }
	.flR { float: none; }
	.ofHR300 .flL,
	.ofHR300 .flR,
	.ofHR350 .flL,
	.ofHR350 .flR,
	.ofHL250300 .flL,
	.ofHL250300 .flR,
	.ofHR250300 .flL,
	.ofHR250300 .flR,
	.ofHR300350 .flL,
	.ofHR300350 .flR { width: 100%; }
	.ofHR300 .flL:not(:last-child),
	.ofHR300 .flR:not(:last-child),
	.ofHR350 .flL:not(:last-child),
	.ofHR350 .flR:not(:last-child),
	.ofHL250300 .flL:not(:last-child),
	.ofHL250300 .flR:not(:last-child),
	.ofHR250300 .flL:not(:last-child),
	.ofHR250300 .flR:not(:last-child),
	.ofHR300350 .flL:not(:last-child),
	.ofHR300350 .flR:not(:last-child),
	.ofHR400420 .flL:not(:last-child),
	.ofHR400420 .flR:not(:last-child) { margin-bottom: 20px; }
	.ofHR250300 .flR.max250 { max-width: 250px; margin-right: auto; margin-left: auto; }
	.ofHR300350 .flR.max300 { max-width: 300px; margin-right: auto; margin-left: auto; }
}



/* ――――――――――――――――――――――――――――――
［ 汎用2カラムレイアウト ］
―――――――――――――――――――――――――――――― */

.ofH2C { overflow: hidden; max-width: 620px; margin-right: auto; margin-left: auto; }
.ofH2C .fl2C1,
.ofH2C .fl2C2 { width: calc( 280 / 620 * 100% ); }
.ofH2C .fl2C1 { float: left; }
.ofH2C .fl2C2 { float: right; }

@media screen and (max-width: 767px) {
	.ofH2C { max-width: 300px; }
	.ofH2C .fl2C1,
	.ofH2C .fl2C2 { float: none; width: 100%; }
	.ofH2C .fl2C1 { margin-bottom: 20px; }
}



/* ――――――――――――――――――――――――――――――
［ 汎用3カラムレイアウト ］
―――――――――――――――――――――――――――――― */

.ofH3C { overflow: hidden; }
.ofH3C .fl3C1,
.ofH3C .fl3C2,
.ofH3C .fl3C3 { width: calc( 280 / 900 * 100% ); }
.ofH3C .fl3C1 { float: left; }
.ofH3C .fl3C2 { float: left; margin-left: calc( 30 / 900 * 100% ); }
.ofH3C .fl3C3 { float: right; }

@media screen and (max-width: 767px) {
	.ofH3C { max-width: 300px; margin-right: auto; margin-left: auto; }
	.ofH3C .fl3C1,
	.ofH3C .fl3C2,
	.ofH3C .fl3C3 { float: none; width: 100%; }
	.ofH3C .fl3C1 { margin-bottom: 20px; }
	.ofH3C .fl3C2 { margin-bottom: 20px; margin-left: 0; }
}



/* ――――――――――――――――――――――――――――――
［ maxW：max-width指定かつセンタリング ］
―――――――――――――――――――――――――――――― */

.maxWC250 { max-width: 250px; margin-right: auto; margin-left: auto; }
.maxWC300 { max-width: 300px; margin-right: auto; margin-left: auto; }
.maxWC350 { max-width: 350px; margin-right: auto; margin-left: auto; }
.maxWC400 { max-width: 400px; margin-right: auto; margin-left: auto; }
.maxWC500 { max-width: 500px; margin-right: auto; margin-left: auto; }
.maxWC550 { max-width: 550px; margin-right: auto; margin-left: auto; }
.maxWC570 { max-width: 570px; margin-right: auto; margin-left: auto; }
.maxWC600 { max-width: 600px; margin-right: auto; margin-left: auto; }
.maxWC700 { max-width: 700px; margin-right: auto; margin-left: auto; }
.maxWC750 { max-width: 750px; margin-right: auto; margin-left: auto; }
.maxWC800 { max-width: 800px; margin-right: auto; margin-left: auto; }



/* ――――――――――――――――――――――――――――――
［ maxW：max-width指定 ］
―――――――――――――――――――――――――――――― */

.maxW250 { max-width: 250px; }
.maxW300 { max-width: 300px; }
.maxW400 { max-width: 400px; }
.maxW500 { max-width: 500px; }
.maxW550 { max-width: 550px; }
.maxW600 { max-width: 600px; }
.maxW700 { max-width: 700px; }
.maxW800 { max-width: 800px; }



/* ――――――――――――――――――――――――――――――
［ width：width指定 ］
―――――――――――――――――――――――――――――― */

.width300 { width: 300px; }
.width400 { width: 400px; }
.width500 { width: 500px; }

@media screen and (max-width: 767px) {
	.width300,
	.width400,
	.width500 { width: 100%; }
}



/* ――――――――――――――――――――――――――――――
［ diB：各種 display inline-block ］
―――――――――――――――――――――――――――――― */

.diB,
.diBI,
.diBB { display: inline-block; }
.dbIB { display: block; }

@media screen and (max-width: 767px) {
	.diBI { display: inline; }
	.diBB { display: block; }
	.dbIB { display: inline-block; }
}



/* ――――――――――――――――――――――――――――――
［ commonPara：段落行間 ］
―――――――――――――――――――――――――――――― */

.commonPara20 p:not(:last-child) { margin-bottom: 20px; }
.commonPara25 p:not(:last-child) { margin-bottom: 25px; }
.commonPara30 p:not(:last-child) { margin-bottom: 30px; }
.commonPara35 p:not(:last-child) { margin-bottom: 35px; }
.commonPara40 p:not(:last-child) { margin-bottom: 40px; }

@media screen and (max-width: 767px) {
	.commonPara20 p:not(:last-child) { margin-bottom: 10px; }
	.commonPara25 p:not(:last-child) { margin-bottom: 12px; }
	.commonPara30 p:not(:last-child) { margin-bottom: 15px; }
	.commonPara35 p:not(:last-child) { margin-bottom: 18px; }
	.commonPara40 p:not(:last-child) { margin-bottom: 20px; }
}



/* ――――――――――――――――――――――――――――――
［ commonAnn：注釈 ］
―――――――――――――――――――――――――――――― */

.commonAnn { display: table; line-height: 2.4rem; }
.commonAnn.font12 { line-height: 1.8rem; }
.commonAnn.font14 { line-height: 2rem; }
.commonAnn.font16 { line-height: 2.2rem; }
.commonAnn.font18 { line-height: 2.8rem; }
.commonAnn dt,
.commonAnn dd { display: table-cell; }
.commonAnn dt { white-space: nowrap; padding-right: 2px; }

/* 複数 */
.commonAnn dl { display: table-row; }
.commonAnn dl:not(:last-child) dt,
.commonAnn dl:not(:last-child) dd { padding-bottom: 8px; }
.commonAnn.font12 dl:not(:last-child) dt,
.commonAnn.font12 dl:not(:last-child) dd,
.commonAnn.font14 dl:not(:last-child) dt,
.commonAnn.font14 dl:not(:last-child) dd { padding-bottom: 4px; }

@media screen and (max-width: 767px) {
	.commonAnn { line-height: 2.2rem; }
	.commonAnn.font12 { line-height: 1.6rem; }
	.commonAnn.font14 { line-height: 1.8rem; }
	.commonAnn.font16 { line-height: 2rem; }
	.commonAnn.font18 { line-height: 2.4rem; }
	
	/* 複数 */
	.commonAnn dl:not(:last-child) dt,
	.commonAnn dl:not(:last-child) dd { padding-bottom: 6px; }
}





/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
【 汎用画像処理関連 】
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

/* ――――――――――――――――――――――――――――――
［ autoImg：原寸表示 ］
―――――――――――――――――――――――――――――― */

.autoImg img { max-width: 100%; width: auto; }



/* ――――――――――――――――――――――――――――――
［ changeImg：2点の画像入れ替え ］
―――――――――――――――――――――――――――――― */

.changeImg div:nth-child(2) { display: none; }

@media screen and (max-width: 767px) {
	.changeImg div:nth-child(1) { display: none; }
	.changeImg div:nth-child(2) { display: block; }
}






/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
【 汎用パーツ 】
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

/* ――――――――――――――――――――――――――――――
［ dotPoint ］
―――――――――――――――――――――――――――――― */

.dotPoint { position: relative; display: inline-block; padding-left: 16px; }
.dotPoint::before { position: absolute; top: 10px; left: 4px; display: block; width: 4px; height: 4px; background-color: #333333; border-radius: 50%; content: ""; }



/* ――――――――――――――――――――――――――――――
［ listPoint ］
―――――――――――――――――――――――――――――― */

.listPoint { font-size: 0; line-height: 0; }
.listPoint li { position: relative; font-size: 1.8rem; line-height: 2.4rem; padding-left: 20px; }
.listPoint li:not(:last-child) { padding-bottom: 16px; }
.listPoint li::before { position: absolute; top: 8px; left: 6px; display: block; width: 8px; height: 8px; background-color: #333333; border-radius: 50%; content: ""; }
.listPoint.pointLine2 li,
.listPoint.pointLine3 li,
.listPoint.pointLine4 li { display: inline-block; vertical-align: top; padding-right: 5px; }
.listPoint.pointLine2 li { width: 50%; }
.listPoint.pointLine3 li { width: 33.3%; }
.listPoint.pointLine4 li { width: 25%; }

@media screen and (max-width: 767px) {
	.listPoint li { font-size: 1.4rem; line-height: 2rem; padding-left: 14px; }
	.listPoint li:not(:last-child) { padding-bottom: 8px; }
	.listPoint li::before { top: 7px; width: 4px; height: 4px; }
	.listPoint.pointLine2 li,
	.listPoint.pointLine3 li,
	.listPoint.pointLine4 li { display: block; width: 100%; padding-right: 0; }
}



/* ――――――――――――――――――――――――――――――
［ listLine ］
―――――――――――――――――――――――――――――― */

.listLine { font-weight: 700; }
.listLine .lineTitle { border-bottom: solid 3px #000000; font-size: 2.6rem; line-height: 4rem; text-align: center; padding-bottom: 5px; }
.listLine ul li { position: relative; border-bottom: solid 1px #bfbfbf; line-height: 2.4rem; padding: 11px 11px 11px 34px; }
.listLine ul li::before { position: absolute; top: 15px; left: 10px; display: block; width: 14px; height: 14px; content: ""; }
	body#colorCategory0 .listLine ul li::before { background-color: #3970b3; }
	body#colorCategory1 .listLine ul li::before { background-color: #abdbf1; }
	body#colorCategory2 .listLine ul li::before { background-color: #ddada1; }
	body#colorCategory3 .listLine ul li::before { background-color: #ffd03a; }
	body#colorCategory4 .listLine ul li::before { background-color: #a7e568; }
	body#colorCategory5 .listLine ul li::before { background-color: #66cead; }
	body#colorCategory6 .listLine ul li::before { background-color: #ff87e0; }

@media screen and (max-width: 767px) {
	.listLine .lineTitle { border-bottom-width: 2px; font-size: 1.8rem; line-height: 3rem; }
	.listLine ul li { line-height: 2rem; padding: 9px 9px 9px 28px; }
	.listLine ul li::before { top: 13px; left: 9px; width: 10px; height: 10px; }
}





/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
【 コンテンツ間隔 】
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

/* mb
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ */

.mb05 { margin-bottom: 5px; }
.mb06 { margin-bottom: 6px; }
.mb10 { margin-bottom: 10px; }
.mb15 { margin-bottom: 15px; }
.mb20 { margin-bottom: 20px; }
.mb30 { margin-bottom: 30px; }
.mb40 { margin-bottom: 40px; }
.mb50 { margin-bottom: 50px; }
.mb60 { margin-bottom: 60px; }
.mb70 { margin-bottom: 70px; }
.mb80 { margin-bottom: 80px; }
.mb90 { margin-bottom: 90px; }
.mb100 { margin-bottom: 100px; }
.mb120 { margin-bottom: 120px; }
.mb140 { margin-bottom: 140px; }
.mb160 { margin-bottom: 160px; }
.mb180 { margin-bottom: 180px; }
.mb200 { margin-bottom: 200px; }

@media screen and (max-width: 767px) {
	.mb10 { margin-bottom: 5px; }
	.mb20 { margin-bottom: 10px; }
	.mb30 { margin-bottom: 15px; }
	.mb40 { margin-bottom: 20px; }
	.mb50 { margin-bottom: 25px; }
	.mb60 { margin-bottom: 30px; }
	.mb70 { margin-bottom: 35px; }
	.mb80 { margin-bottom: 40px; }
	.mb90 { margin-bottom: 45px; }
	.mb100 { margin-bottom: 50px; }
	.mb120 { margin-bottom: 60px; }
	.mb140 { margin-bottom: 70px; }
	.mb160 { margin-bottom: 80px; }
	.mb180 { margin-bottom: 90px; }
	.mb200 { margin-bottom: 100px; }
}



/* sectionMargin
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ */

.sectionMargin30 section:not(:last-child) { margin-bottom: 30px; }
.sectionMargin40 section:not(:last-child) { margin-bottom: 40px; }
.sectionMargin50 section:not(:last-child) { margin-bottom: 50px; }
.sectionMargin60 section:not(:last-child) { margin-bottom: 60px; }
.sectionMargin70 section:not(:last-child) { margin-bottom: 70px; }
.sectionMargin80 section:not(:last-child) { margin-bottom: 80px; }
.sectionMargin90 section:not(:last-child) { margin-bottom: 90px; }
.sectionMargin100 section:not(:last-child) { margin-bottom: 100px; }

@media screen and (max-width: 767px) {
	.sectionMargin30 section:not(:last-child) { margin-bottom: 20px; }
	.sectionMargin40 section:not(:last-child) { margin-bottom: 20px; }
	.sectionMargin50 section:not(:last-child) { margin-bottom: 25px; }
	.sectionMargin60 section:not(:last-child) { margin-bottom: 30px; }
	.sectionMargin70 section:not(:last-child) { margin-bottom: 35px; }
	.sectionMargin80 section:not(:last-child) { margin-bottom: 40px; }
	.sectionMargin90 section:not(:last-child) { margin-bottom: 45px; }
	.sectionMargin100 section:not(:last-child) { margin-bottom: 50px; }
}