/*
# utility
汎用クラス・基本的には単一のスタイルを定義
*/
mark {
	font-size: .8rem;
	position: absolute;
	border: 1px solid crimson;
	background-color: #fff;
}
/* # u-flx (displey:flex)
横並びにしたい要素の親に指定する

u-flx : 標準<br>u-flxRev : 逆順<br>u-flxSta : 上揃え<br>u-flxCnt : 横中央揃え<br>u-flxMid : 縦中央揃え<br>
u-flxNoWrap : 改行しない（初期値 他のflxは全て改行する）<br>u-flxAro : 両端含め均等配置<br>u-flxBet : 両端に配置して均等配置<br>u-flxEnd : 行末に配置<br>u-flxScr : 横スクロール
*/
.u-flx {
	display: -webkit-flex!important;
	display: flex!important;
	-webkit-flex-wrap: wrap!important;
	flex-wrap: wrap!important;
}
.u-flxRev {
	display: -webkit-flex!important;
	display: flex!important;
	-webkit-flex-wrap: wrap!important;
	flex-wrap: wrap!important;
	-webkit-flex-direction: row-reverse!important;
	flex-direction: row-reverse!important;
}
.u-flxSta {
	display: -webkit-flex!important;
	display: flex!important;
	-webkit-flex-wrap: wrap!important;
	flex-wrap: wrap!important;
	-webkit-align-items: flex-start!important;
	align-items: flex-start!important;
}
.u-flxCnt {
	display: -webkit-flex!important;
	display: flex!important;
	-webkit-flex-wrap: wrap!important;
	flex-wrap: wrap!important;
	-webkit-justify-content: center!important;
	-webkit-box-pack: center!important;
	-ms-flex-pack: center!important;
	justify-content: center!important;
}
.u-flxMid {
	display: -webkit-flex!important;
	display: flex!important;
	-webkit-flex-wrap: wrap!important;
	flex-wrap: wrap!important;
	-webkit-align-items: center!important;
	-webkit-box-align: center!important;
	-ms-flex-align: center!important;
	align-items: center!important;
}
.u-flxCenMid {
	display: -webkit-flex!important;
	display: flex!important;
	-webkit-flex-wrap: wrap!important;
	flex-wrap: wrap!important;
	-webkit-justify-content: center!important;
	-webkit-box-pack: center!important;
	-ms-flex-pack: center!important;
	justify-content: center!important;
	-webkit-align-items: center!important;
	-webkit-box-align: center!important;
	-ms-flex-align: center!important;
	align-items: center!important;
}
.u-flxNoWrap{
	display: -webkit-flex!important;
	display: flex!important;
	-webkit-flex-wrap: nowrap!important;
	flex-wrap: nowrap!important;
}
.u-flxAro {
	display: -webkit-flex!important;
	display: flex!important;
	-webkit-flex-wrap: wrap!important;
	flex-wrap: wrap!important;
	-webkit-justify-content: space-around!important;
	justify-content: space-around!important;
}
.u-flxBet {
	display: -webkit-flex!important;
	display: flex!important;
	-webkit-flex-wrap: wrap!important;
	flex-wrap: wrap!important;
	-webkit-justify-content: space-between!important;
	justify-content: space-between!important;
}
.u-flxEnd {
	display: -webkit-flex!important;
	display: flex!important;
	-webkit-flex-wrap: wrap!important;
	flex-wrap: wrap!important;
	-webkit-justify-content: flex-end!important;
	justify-content: flex-end!important;
}
.u-flxScr {
	display: flex;
	display: -webkit-flex;
	overflow-y: hidden;
	overflow-x: scroll;
	-webkit-overflow-scrolling: touch;
	/* overflow-scrolling: touch; */
}
.u-flxAStr {
	display: -webkit-flex!important;
	display: flex!important;
	-webkit-flex-wrap: wrap!important;
	flex-wrap: wrap!important;
	-webkit-align-items: flex-start!important;
	align-items: flex-start!important;
}
.u-flxAEnd {
	display: -webkit-flex!important;
	display: flex!important;
	-webkit-flex-wrap: wrap!important;
	flex-wrap: wrap!important;
	-webkit-align-items: flex-end!important;
	align-items: flex-end!important;
}
.u-flxDirCol {
	display: -webkit-flex !important;
	display: flex !important;
	-webkit-flex-direction: column !important;
	flex-direction: column !important;
}
.u-flxDirColR {
	-webkit-flex-direction: column-reverse !important;
	flex-direction: column-reverse !important;
}
.u-jusConCen {
	justify-content: center;
}
.u-aConfSta{
	align-content: flex-start;
}
.u-aConCen{
	align-content: center;
}
.u-aItemCen{
	align-items: center;
}
.u-aSelfSta{
	align-self: flex-start;
}
.u-aItemSta{
	align-items: flex-start;
}
.u-aSelfEnd{
	align-self: flex-end;
}
.u-aItemEnd{
	align-items: flex-end;
}
.u-aItemBas{
	align-items: baseline;
}
.u-aItemIni{
	align-items: initial !important;
}
.u-aSelfBas{
	align-self: baseline;
}
.u-aSelfCen{
	align-self: center;
}

/* # flex 子要素 */
.u-flxBasA {
	-webkit-flex-basis: auto!important;
	flex-basis: auto!important;
}
.u-flxGrow1 {
	-webkit-flex-grow: 1;
	flex-grow: 1;
}


/* # display
u-blk : ブロック<br>u-inBlk : インラインブロック<br>u-ini : イニシャル（初期値）
*/
.u-blk {display: block!important;}
.u-inBlk {display: inline-block!important;}
.u-inBlk_1 {display: inline-block;}
.u-ini {display: initial!important;}

/*
# u-m* 基本マージン

<table class="u-txtC">
<tr>
	<td class="u-borClr10 u-borA1 u-pW025"></td>
	<td class="u-borClr10 u-borA1 u-pW025">0.25em</td>
	<td class="u-borClr10 u-borA1 u-pW025">0.5em</td>
	<td class="u-borClr10 u-borA1 u-pW025">1em</td>
	<td class="u-borClr10 u-borA1 u-pW025">2em</td>
	<td class="u-borClr10 u-borA1 u-pW025">3em</td>
	<td class="u-borClr10 u-borA1 u-pW025">10px</td>
	<td class="u-borClr10 u-borA1 u-pW025">auto</td>
</tr>
<tr>
	<td class="u-borClr10 u-borA1 u-pW025">全体</td>
	<td class="u-borClr10 u-borA1 u-pW025">u-m025</td>
	<td class="u-borClr10 u-borA1 u-pW025">u-m05</td>
	<td class="u-borClr10 u-borA1 u-pW025">u-m1</td>
	<td class="u-borClr10 u-borA1 u-pW025">u-m2</td>
	<td class="u-borClr10 u-borA1 u-pW025">u-m3</td>
	<td class="u-borClr10 u-borA1 u-pW025">u-m10</td>
	<td class="u-borClr10 u-borA1 u-pW025">u-mA</td>
</tr>
<tr>
	<td class="u-borClr10 u-borA1 u-pW025">上</td>
	<td class="u-borClr10 u-borA1 u-pW025">u-mT025</td>
	<td class="u-borClr10 u-borA1 u-pW025">u-mT05</td>
	<td class="u-borClr10 u-borA1 u-pW025">u-mT1</td>
	<td class="u-borClr10 u-borA1 u-pW025">u-mT2</td>
	<td class="u-borClr10 u-borA1 u-pW025">u-mT3</td>
	<td class="u-borClr10 u-borA1 u-pW025">u-mT10</td>
	<td class="u-borClr10 u-borA1 u-pW025">u-mAT</td>
</tr>
<tr>
	<td class="u-borClr10 u-borA1 u-pW025">下</td>
	<td class="u-borClr10 u-borA1 u-pW025">u-mB025</td>
	<td class="u-borClr10 u-borA1 u-pW025">u-mB05</td>
	<td class="u-borClr10 u-borA1 u-pW025">u-mB1</td>
	<td class="u-borClr10 u-borA1 u-pW025">u-mB2</td>
	<td class="u-borClr10 u-borA1 u-pW025">u-mB3</td>
	<td class="u-borClr10 u-borA1 u-pW025">u-mT10</td>
	<td class="u-borClr10 u-borA1 u-pW025">u-mAB</td>
</tr>
<tr>
	<td class="u-borClr10 u-borA1 u-pW025">左</td>
	<td class="u-borClr10 u-borA1 u-pW025">u-mL025</td>
	<td class="u-borClr10 u-borA1 u-pW025">u-mL05</td>
	<td class="u-borClr10 u-borA1 u-pW025">u-mL1</td>
	<td class="u-borClr10 u-borA1 u-pW025">u-mL2</td>
	<td class="u-borClr10 u-borA1 u-pW025">u-mL3</td>
	<td class="u-borClr10 u-borA1 u-pW025"></td>
	<td class="u-borClr10 u-borA1 u-pW025">u-mAL</td>
</tr>
<tr>
	<td class="u-borClr10 u-borA1 u-pW025">右</td>
	<td class="u-borClr10 u-borA1 u-pW025">u-mR025</td>
	<td class="u-borClr10 u-borA1 u-pW025">u-mR05</td>
	<td class="u-borClr10 u-borA1 u-pW025">u-mR1</td>
	<td class="u-borClr10 u-borA1 u-pW025">u-mR2</td>
	<td class="u-borClr10 u-borA1 u-pW025">u-mR3</td>
	<td class="u-borClr10 u-borA1 u-pW025"></td>
	<td class="u-borClr10 u-borA1 u-pW025">u-mAR</td>
</tr>
<tr>
	<td class="u-borClr10 u-borA1 u-pW025">左右</td>
	<td class="u-borClr10 u-borA1 u-pW025">u-mW025</td>
	<td class="u-borClr10 u-borA1 u-pW025">u-mW05</td>
	<td class="u-borClr10 u-borA1 u-pW025">u-mW1</td>
	<td class="u-borClr10 u-borA1 u-pW025">u-mW2</td>
	<td class="u-borClr10 u-borA1 u-pW025">u-mW3</td>
	<td class="u-borClr10 u-borA1 u-pW025">u-mW10</td>
	<td class="u-borClr10 u-borA1 u-pW025"></td>
</tr>
<tr>
	<td class="u-borClr10 u-borA1 u-pW025">上下</td>
	<td class="u-borClr10 u-borA1 u-pW025">u-mTB025</td>
	<td class="u-borClr10 u-borA1 u-pW025">u-mTB05</td>
	<td class="u-borClr10 u-borA1 u-pW025">u-mTB1</td>
	<td class="u-borClr10 u-borA1 u-pW025">u-mTB2</td>
	<td class="u-borClr10 u-borA1 u-pW025">u-mTB3</td>
	<td class="u-borClr10 u-borA1 u-pW025"></td>
	<td class="u-borClr10 u-borA1 u-pW025"></td>
</tr>
</table>

*/
.u-m025 { margin: .25em!important; }
.u-m05 { margin: .5em!important; }
.u-m075 { margin: .75em!important; }
.u-m1 { margin: 1em!important; }
.u-m2 { margin: 2em!important; }
.u-m3 { margin: 3em!important; }
.u-m10 {margin: 10px !important;}

.u-mT025 { margin-top: 0.25em!important;}
.u-mT05 { margin-top: 0.5em!important;}
.u-mT075 { margin-top: 0.75em!important;}
.u-mT1 { margin-top: 1em!important;}
.u-mT2 { margin-top: 2em!important;}
.u-mT3 { margin-top: 3em!important;}
.u-mT10 {margin-top: 10px !important;}
.u-mT15 {margin-top: 15px !important;}
.u-mT0-imp {margin-top: 0px !important;}
.u-mT-10 {margin-top: -10px;}
.u-mTC-5 { margin-top: calc(-5%) !important; }

.u-mB025 { margin-bottom: 0.25em!important;}
.u-mB05 { margin-bottom: 0.5em!important;}
.u-mB075 { margin-bottom: 0.75em!important;}
.u-mB1 { margin-bottom: 1em!important;}
.u-mB2 { margin-bottom: 2em!important;}
.u-mB3 { margin-bottom: 3em!important;}
.u-mB10 {margin-bottom: 10px !important;}
.u-mB15 {margin-bottom: 15px !important;}

.u-mL025 { margin-left: 0.25em!important;}
.u-mL05 { margin-left: 0.5em!important;}
.u-mL075 { margin-left: 0.75em!important;}
.u-mL1 { margin-left: 1em!important;}
.u-mL2 { margin-left: 2em!important;}
.u-mL3 { margin-left: 3em!important;}
.u-mL15 {margin-left: 15px !important;}
.u-mLC-20 { margin-left: calc(-20%) !important; }

.u-mR025 { margin-right: 0.25em!important;}
.u-mR05 { margin-right: 0.5em!important;}
.u-mR075 { margin-right: 0.75em!important;}
.u-mR1 { margin-right: 1em!important;}
.u-mR15 { margin-right: 1.5em!important;}
.u-mR2 { margin-right: 2em!important;}
.u-mR3 { margin-right: 3em!important;}

.u-mW0 { margin-left:0em!important;margin-right:0em!important; }
.u-mW025 { margin-left:0.25em!important;margin-right:0.25em!important; }
.u-mW05 { margin-left:0.5em!important;margin-right:0.5em!important; }
.u-mW075 { margin-left:0.75em!important;margin-right:0.75em!important; }
.u-mW1 { margin-left: 1em!important;margin-right: 1em!important;}
.u-mW2 { margin-left: 2em!important;margin-right: 2em!important;}
.u-mW3 { margin-left: 3em!important;margin-right: 3em!important;}
.u-mW10 { margin-left: 10px!important;margin-right: 10px!important;}

.u-mTB025 { margin-top:0.25em!important;margin-bottom:0.25em!important; }
.u-mTB05 { margin-top:0.5em!important;margin-bottom:0.5em!important; }
.u-mTB075 { margin-top:0.75em!important;margin-bottom:0.75em!important; }
.u-mTB1 { margin-top: 1em!important;margin-bottom: 1em!important;}
.u-mTB2 { margin-top: 2em!important;margin-bottom: 2em!important;}
.u-mTB3 { margin-top: 3em!important;margin-bottom: 3em!important;}

.u-mA { margin: auto!important;}
.u-mWA { margin-left: auto!important;margin-right: auto!important;}
.u-mAT { margin-top: auto!important;}
.u-mAB { margin-bottom: auto!important;}
.u-mAL { margin-left: auto!important;}
.u-mAR { margin-right: auto!important;}

.u-m05A { margin: 0.5em auto!important;}
.u-m075A { margin: .75em auto!important;}
.u-m1A { margin: 1em auto!important;}
.u-m2A { margin: 2em auto!important;}
.u-m10A { margin: 10px auto!important;}
.u-m0 { margin: 0!important; }


/* # u-p* パディング

<table class="u-txtC">
<tr>
	<td class="u-borClr10 u-borA1 u-pW025"></td>
	<td class="u-borClr10 u-borA1 u-pW025">0.25em</td>
	<td class="u-borClr10 u-borA1 u-pW025">0.5em</td>
	<td class="u-borClr10 u-borA1 u-pW025">1em</td>
	<td class="u-borClr10 u-borA1 u-pW025">2em</td>
	<td class="u-borClr10 u-borA1 u-pW025">3em</td>
	<td class="u-borClr10 u-borA1 u-pW025">10px</td>
</tr>
<tr>
	<td class="u-borClr10 u-borA1 u-pW025">全体</td>
	<td class="u-borClr10 u-borA1 u-pW025">u-p025</td>
	<td class="u-borClr10 u-borA1 u-pW025">u-p05</td>
	<td class="u-borClr10 u-borA1 u-pW025">u-p1</td>
	<td class="u-borClr10 u-borA1 u-pW025">u-p2</td>
	<td class="u-borClr10 u-borA1 u-pW025">u-p3</td>
	<td class="u-borClr10 u-borA1 u-pW025">u-p10</td>
</tr>
<tr>
	<td class="u-borClr10 u-borA1 u-pW025">全体</td>
	<td class="u-borClr10 u-borA1 u-pW025">u-pT025</td>
	<td class="u-borClr10 u-borA1 u-pW025">u-pT05</td>
	<td class="u-borClr10 u-borA1 u-pW025">u-pT1</td>
	<td class="u-borClr10 u-borA1 u-pW025">u-pT2</td>
	<td class="u-borClr10 u-borA1 u-pW025">u-pT3</td>
	<td class="u-borClr10 u-borA1 u-pW025">u-pT10</td>
</tr>
<tr>
	<td class="u-borClr10 u-borA1 u-pW025">全体</td>
	<td class="u-borClr10 u-borA1 u-pW025">u-pB025</td>
	<td class="u-borClr10 u-borA1 u-pW025">u-pB05</td>
	<td class="u-borClr10 u-borA1 u-pW025">u-pB1</td>
	<td class="u-borClr10 u-borA1 u-pW025">u-pB2</td>
	<td class="u-borClr10 u-borA1 u-pW025">u-pB3</td>
	<td class="u-borClr10 u-borA1 u-pW025">u-pB10</td>
</tr>
<tr>
	<td class="u-borClr10 u-borA1 u-pW025">全体</td>
	<td class="u-borClr10 u-borA1 u-pW025">u-pL025</td>
	<td class="u-borClr10 u-borA1 u-pW025">u-pL05</td>
	<td class="u-borClr10 u-borA1 u-pW025">u-pL1</td>
	<td class="u-borClr10 u-borA1 u-pW025">u-pL2</td>
	<td class="u-borClr10 u-borA1 u-pW025">u-pL3</td>
	<td class="u-borClr10 u-borA1 u-pW025">u-pL10</td>
</tr>
<tr>
	<td class="u-borClr10 u-borA1 u-pW025">全体</td>
	<td class="u-borClr10 u-borA1 u-pW025">u-pR025</td>
	<td class="u-borClr10 u-borA1 u-pW025">u-pR05</td>
	<td class="u-borClr10 u-borA1 u-pW025">u-pR1</td>
	<td class="u-borClr10 u-borA1 u-pW025">u-pR2</td>
	<td class="u-borClr10 u-borA1 u-pW025">u-pR3</td>
	<td class="u-borClr10 u-borA1 u-pW025">u-pR10</td>
</tr>
<tr>
	<td class="u-borClr10 u-borA1 u-pW025">全体</td>
	<td class="u-borClr10 u-borA1 u-pW025">u-pW025</td>
	<td class="u-borClr10 u-borA1 u-pW025">u-pW05</td>
	<td class="u-borClr10 u-borA1 u-pW025">u-pW1</td>
	<td class="u-borClr10 u-borA1 u-pW025">u-pW2</td>
	<td class="u-borClr10 u-borA1 u-pW025">u-pW3</td>
	<td class="u-borClr10 u-borA1 u-pW025">u-pW10</td>
</tr>
<tr>
	<td class="u-borClr10 u-borA1 u-pW025">全体</td>
	<td class="u-borClr10 u-borA1 u-pW025">u-pTB025</td>
	<td class="u-borClr10 u-borA1 u-pW025">u-pTB05</td>
	<td class="u-borClr10 u-borA1 u-pW025">u-pTB1</td>
	<td class="u-borClr10 u-borA1 u-pW025">u-pTB2</td>
	<td class="u-borClr10 u-borA1 u-pW025">u-pTB3</td>
	<td class="u-borClr10 u-borA1 u-pW025">u-pTB10</td>
</tr>
</table>
*/
.u-p0 { padding: 0!important; }
.u-p025 { padding: 0.25em!important; }
.u-p05 { padding: 0.5em!important; }
.u-p075 { padding: 0.75em!important; }
.u-p1 { padding: 1em!important; }
.u-p2 { padding: 2em!important; }
.u-p3 { padding: 3em!important; }
.u-p10 {padding: 10px !important;}

.u-pT0 { padding-top: 0!important; }
.u-pT025 { padding-top: 0.25em!important; }
.u-pT05 { padding-top: 0.5em!important; }
.u-pT075 { padding-top: 0.75em!important; }
.u-pT1 { padding-top: 1em!important; }
.u-pT2 { padding-top: 2em!important; }
.u-pT3 { padding-top: 3em!important; }
.u-pT10 { padding-top: 10px!important; }

.u-pB0 { padding-bottom: 0!important; }
.u-pB025 { padding-bottom: 0.25em!important; }
.u-pB05 { padding-bottom: 0.5em!important; }
.u-pB075 { padding-bottom: 0.75em!important; }
.u-pB1 { padding-bottom: 1em!important; }
.u-pB2 { padding-bottom: 2em!important; }
.u-pB3 { padding-bottom: 3em!important; }
.u-pB10 { padding-bottom: 10px!important; }

.u-pL0 { padding-left: 0!important; }
.u-pL025 { padding-left: 0.25em!important; }
.u-pL05 { padding-left: 0.5em!important; }
.u-pL075 { padding-left: 0.75em!important; }
.u-pL1 { padding-left: 1em!important; }
.u-pL2 { padding-left: 2em!important; }
.u-pL3 { padding-left: 3em!important; }
.u-pL4 { padding-left: 4em!important; }
.u-pL5 { padding-left: 5em!important; }
.u-pL6 { padding-left: 6em!important; }
.u-pL7 { padding-left: 7em!important; }
.u-pL8 { padding-left: 8em!important; }
.u-pL9 { padding-left: 9em!important; }
.u-pL45 { padding-left: 4.5em!important; }
.u-pL10 { padding-left: 10px!important; }

.u-pR0 { padding-right: 0!important; }
.u-pR025 { padding-right: 0.25em!important; }
.u-pR05 { padding-right: 0.5em!important; }
.u-pR075 { padding-right: 0.75em!important; }
.u-pR1 { padding-right: 1em!important; }
.u-pR2 { padding-right: 2em!important; }
.u-pR3 { padding-right: 3em!important; }
.u-pR4 { padding-right: 4em!important; }
.u-pR5 { padding-right: 5em!important; }
.u-pR6 { padding-right: 6em!important; }
.u-pR7 { padding-right: 7em!important; }
.u-pR8 { padding-right: 8em!important; }
.u-pR9 { padding-right: 9em!important; }
.u-pR10 {padding-right: 10px !important;}

.u-pW0 { padding-left: 0!important;padding-right: 0!important;}
.u-pW025 { padding-left: 0.25em!important;padding-right: 0.25em!important;}
.u-pW05 { padding-left: 0.5em!important;padding-right: 0.5em!important;}
.u-pW075 { padding-left: 0.75em!important;padding-right: 0.75em!important;}
.u-pW1 { padding-left: 1em!important;padding-right: 1em!important; }
.u-pW2 { padding-left: 2em!important;padding-right: 2em!important; }
.u-pW3 { padding-left: 3em!important;padding-right: 3em!important; }
.u-pW10 { padding-left: 10px!important;padding-right: 10px!important; }

.u-pTB0 { padding-top: 0!important;padding-bottom: 0!important; }
.u-pTB025 { padding-top: 0.25em!important;padding-bottom: 0.25em!important; }
.u-pTB05 { padding-top: 0.5em!important;padding-bottom: 0.5em!important; }
.u-pTB075 { padding-top: 0.75em!important;padding-bottom: 0.75em!important; }
.u-pTB1 { padding-top: 1em!important;padding-bottom: 1em!important; }
.u-pTB2 { padding-top: 2em!important;padding-bottom: 2em!important; }
.u-pTB3 { padding-top: 3em!important;padding-bottom: 3em!important; }
.u-pTB10 { padding-top: 10px!important;padding-bottom: 10px!important; }


/* # u-bor* ボーダー

<div class="u-flx u-fsM">
<ul class="u-pR10">
<li>u-borClr`*` とu-bor`*`1 はセットで使用する
<li>u-borT--n -> border-top : none(削除予定：使用不可)
<li>u-borRad -> 角丸5px
<li>u-borRadT -> 上部角丸5px
<li>u-borRadB -> 下部角丸5px
</ul>
<ul class="u-pR10">
<li>u-borClr01 <span style="background-color:#f7931e;width:50px;height:12px;display:inline-block;"></span>
<li>u-borClr02 <span style="background-color:#999999;width:50px;height:12px;display:inline-block;"></span>
<li>u-borClr03 <span style="background-color:#C9C9C9;width:50px;height:12px;display:inline-block;"></span>
<li>u-borClr04 <span style="background-color:#e6e6e6;width:50px;height:12px;display:inline-block;"></span>
<li>u-borClr06 <span style="background-color:#ff0000;width:50px;height:12px;display:inline-block;"></span>
<li>u-borClr07 <span style="background-color:#F99D8C;width:50px;height:12px;display:inline-block;"></span>
<li>u-borClr08 <span style="background-color:#7FB9BF;width:50px;height:12px;display:inline-block;"></span>
<li>u-borClr09 <span style="background-color:#AA937B;width:50px;height:12px;display:inline-block;"></span>
<li>u-borClr10 <span style="background-color:#AAAAAA;width:50px;height:12px;display:inline-block;"></span>
<li>u-borClr11 <span style="background-color:#CCCCCC;width:50px;height:12px;display:inline-block;"></span>
<li>u-borGradi01 <span class="u-fs5L" style="background:linear-gradient(90deg,#ff7951,#ffc35d);width:50px;height:12px;display:inline-block;"></span>
</ul>
<ul>
<li>u-borA1 : 全体1px
<li>u-borT1 : 上1px
<li>u-borB1 : 下1px
<li>u-borTB1 : 上下1px
<li>u-borL1 : 左1px
<li>u-borR1 : 右1px
<li>u-borA2 : 全体2px
<li>u-borT2 : 上2px
<li>u-borB2 : 下2px
<li>u-borTB2 : 上下2px
<li>u-borL2 : 左2px
<li>u-borR2 : 右2px
</ul>
</div>
*/
.u-borT--n{border-top: none!important;}
.u-borB--n{border-bottom: none!important;}
.u-borL--n{border-left: none!important;}
.u-borR--n{border-right: none!important;}
.u-bor--n {border: none!important;}

.u-borRad {border-radius: 5px;}
.u-borRad10 {border-radius: 10px;}
.u-borRadT {border-radius: 5px 5px 0 0;}
.u-borRadB {border-radius: 0 0 5px 5px;}
.u-borRad50 {border-radius: 50%;}

.u-borClr01 {border-color: #f7931e !important;}
.u-borClr02 {border-color: #999999 !important;}
.u-borClr03 {border-color: #C9C9C9 !important;}
.u-borClr04 {border-color: #e6e6e6 !important;}
.u-borClr06 {border-color: #ff0000 !important;}
.u-borClr07 {border-color: #F99D8C!important;}
.u-borClr08 {border-color: #7FB9BF!important;}
.u-borClr09 {border-color: #AA937B!important;}
.u-borClr10 {border-color: #AAAAAA!important;}
.u-borClr11 {border-color: #CCCCCC !important;}
.u-borClr12 {border-color: #ffffff !important;}
.u-borClr13 {border-color: #F99D8C !important;}

.u-borGradi01 {
	border-image: linear-gradient(90deg,#ff7951,#ffc35d) 1 !important;
	border: 0;
}
.u-borA1 {border: 1px solid;}
.u-borT1 {border-top: 1px solid;}
.u-borB1 {border-bottom: 1px solid;}
.u-borTB1 {border-top: 1px solid;border-bottom: 1px solid;}
.u-borL1 {border-left: 1px solid;}
.u-borR1 {border-right: 1px solid;}
.u-borLR1 {border-left: 1px solid;border-right: 1px solid;}
.u-borA2 {border: 2px solid;}
.u-borT2 {border-top: 2px solid;}
.u-borB2 {border-bottom: 2px solid;}
.u-borTB2 {border-top: 2px solid;border-bottom: 2px solid;}
.u-borL2 {border-left: 2px solid;}
.u-borR2 {border-right: 2px solid;}
.u-borLR2 {border-left: 2px solid;border-right: 2px solid;}
.u-borStDa {border-style: dashed;}
.u-borStDo {border-style: dotted;}

/* # u-h* 高さ
<ul class="u-flx" style="width:200px;">
<li class="u-w50">u-h35<li class="u-w50">35px
<li class="u-w50">u-h100<li class="u-w50">100px
<li class="u-w50">u-h200<li class="u-w50">200px
<li class="u-w50">u-h300<li class="u-w50">300px
<li class="u-w50">u-h100per<li class="u-w50">100%
<li class="u-w50">u-h100vh<li class="u-w50">100vh
</ul>
*/
.u-h10{height: 10px!important;}
.u-h35{height: 35px!important;}
.u-h50{height: 50px!important;}
.u-h65{height: 65px!important;}
.u-h80{height: 80px!important;}
.u-h100{height: 100px!important;}
.u-h160{height: 160px!important;}
.u-h200{height: 200px!important;}
.u-h300{height: 300px!important;}
.u-h50per{height: 50%!important;}
.u-h90per{height: 90%!important;}
.u-h100per{height: 100%!important;}
.u-100vh {height: 100vh !important;}

/* # u-w* 幅
2018.03.13 u-wide → u-wに略す
<div class="u-flx u-fsS">
<ul class="u-flx" style="width:200px;">
<li class="u-w30">u-w10<li class="u-w70">10%
<li class="u-w30">u-w15<li class="u-w70">15%
<li class="u-w30">u-w20<li class="u-w70">20%
<li class="u-w30">u-w25<li class="u-w70">25%
<li class="u-w30">u-w30<li class="u-w70">30%
<li class="u-w30">u-w33<li class="u-w70">33.33%
<li class="u-w30">u-w35<li class="u-w70">35%
<li class="u-w30">u-w40<li class="u-w70">40%
<li class="u-w30">u-w45<li class="u-w70">45%
<li class="u-w30">u-w50<li class="u-w70">50%
</ul>
<ul class="u-flx" style="width:200px;">
<li class="u-w30">u-w55<li class="u-w70">55%
<li class="u-w30">u-w60<li class="u-w70">60%
<li class="u-w30">u-w65<li class="u-w70">65%
<li class="u-w30">u-w70<li class="u-w70">70%
<li class="u-w30">u-w75<li class="u-w70">75%
<li class="u-w30">u-w80<li class="u-w70">80%
<li class="u-w30">u-w85<li class="u-w70">85%
<li class="u-w30">u-w90<li class="u-w70">90%
<li class="u-w30">u-w95<li class="u-w70">95%
<li class="u-w30">u-w100<li class="u-w70">100%
</ul>
<ul class="u-flx" style="width:200px;">
<li class="u-w30">u-w100vw<li class="u-w70">100vw
<li class="u-w30">u-wC20<li class="u-w70">calc(100% - 20px)
<li class="u-w30"><li class="u-w70">
<li class="u-w30"><li class="u-w70">
<li class="u-w30"><li class="u-w70">
<li class="u-w30"><li class="u-w70">
<li class="u-w30"><li class="u-w70">
<li class="u-w30"><li class="u-w70">
<li class="u-w30"><li class="u-w70">
<li class="u-w30"><li class="u-w70">
</ul>
</div>
*/

.u-tfSca08{
	-moz-transform: scale(0.8)!important;
	-webkit-transform: scale(0.8)!important;
	-o-transform: scale(0.8)!important;
	-ms-transform: scale(0.8)!important;
	transform: scale(0.8)!important;
}

/* 反転 */
.u-tfSca-1_1 {
	-moz-transform: scale(-1, 1)!important;
	-webkit-transform: scale(-1, 1)!important;
	-o-transform: scale(-1, 1)!important;
	-ms-transform: scale(-1, 1)!important;
	transform: scale(-1, 1)!important;
}

.u-w5{width: 5%!important;}
.u-w10{width: 10%!important;}
.u-w15{width: 15%!important;}
.u-w20{width: 20%!important;}
.u-w25{width: 25%!important;}
.u-w30{width: 30%!important;}
.u-w33{width: 33.33%!important;}
.u-w35{width: 35%!important;}
.u-w40{width: 40%!important;}
.u-w45{width: 45%!important;}
.u-w50{width: 50%!important;}
.u-w55{width: 55%!important;}
.u-w60{width: 60%!important;}
.u-w65{width: 65%!important;}
.u-w70{width: 70%!important;}
.u-w75{width: 75%!important;}
.u-w80{width: 80%!important;}
.u-w85{width: 85%!important;}
.u-w90{width: 90%!important;}
.u-w95{width: 95%!important;}
.u-w100{width: 100%!important;}
.u-w100vw {width:100vw !important;}
.u-wA {width: auto!important;}

.u-wC20 {width: calc(100% - 20px);}
.u-wC70 {width: calc(100% - 70px);}
.u-wC90 {width: calc(100% - 90px);}

/* # u-mxW* max-width

<ul class="u-flx" style="width:200px;">
<li class="u-w30">u-mxW10<li class="u-w70">10%
<li class="u-w30">u-mxW20<li class="u-w70">20%
<li class="u-w30">u-mxW30<li class="u-w70">30%
<li class="u-w30">u-mxW40<li class="u-w70">40%
<li class="u-w30">u-mxW50<li class="u-w70">50%
<li class="u-w30">u-mxW60<li class="u-w70">60%
<li class="u-w30">u-mxW70<li class="u-w70">70%
<li class="u-w30">u-mxW80<li class="u-w70">80%
<li class="u-w30">u-mxW90<li class="u-w70">90%
<li class="u-w30">u-mxW100<li class="u-w70">100%
</ul>
*/
.u-mxW10{max-width: 10%!important;}
.u-mxW20{max-width: 20%!important;}
.u-mxW30{max-width: 30%!important;}
.u-mxW40{max-width: 40%!important;}
.u-mxW50{max-width: 50%!important;}
.u-mxW60{max-width: 60%!important;}
.u-mxW70{max-width: 70%!important;}
.u-mxW80{max-width: 80%!important;}
.u-mxW90{max-width: 90%!important;}
.u-mxW100{max-width: 100%!important;}


/* # u-fs* フォントサイズ
1.0rem = 10px<br>
--s : スマホのみ<br>
--p : PCのみ

<div class="u-flx u-fsS">
<ul class="u-flx" style="width:200px;">
<li class="u-w30">u-fs5L<li class="u-w70">1.8rem
<li class="u-w30">u-fs4L<li class="u-w70">1.7rem
<li class="u-w30">u-fs3L<li class="u-w70">1.6rem
<li class="u-w30">u-fs2L<li class="u-w70">1.5rem
<li class="u-w30">u-fsL<li class="u-w70">1.4rem
<li class="u-w30">u-fsM<li class="u-w70">1.3rem
<li class="u-w30">u-fsS<li class="u-w70">1.2rem
<li class="u-w30">u-fs2S<li class="u-w70">1.1rem
<li class="u-w30">u-fs3S<li class="u-w70">1.0rem
</ul>
<ul class="u-flx" style="width:200px;">
<li class="u-w30">個別指定<li class="u-w70">
<li class="u-w30">u-fs18-20<li class="u-w70">sp 18 : pc 20;
<li class="u-w30"><li class="u-w70">
<li class="u-w30"><li class="u-w70">
<li class="u-w30"><li class="u-w70">
<li class="u-w30"><li class="u-w70">
<li class="u-w30"><li class="u-w70">
<li class="u-w30"><li class="u-w70">
<li class="u-w30"><li class="u-w70">
</ul>
</div>
*/
.u-fs12L {font-size: 2.6rem!important;}
.u-fs6L {font-size: 1.9rem!important;}
.u-fs5L {font-size: 1.8rem!important;}
.u-fs4L {font-size: 1.7rem!important;}
.u-fs3L {font-size: 1.6rem!important;}
.u-fs2L {font-size: 1.5rem!important;}
.u-fsL {font-size: 1.4rem!important;}
.u-fsM {font-size: 1.3rem!important;}
.u-fsS {font-size: 1.2rem!important;}
.u-fs2S {font-size: 1.1rem!important;}
.u-fs3S {font-size: 1.0rem!important;}
.u-fs4S {font-size: 0.9rem!important;}
.u-fs5S {font-size: 0.8rem!important;}

/* overflow */
.u-of_x-h {
	overflow-x: hidden;
}

.u-of_y-h {
	overflow-y: hidden;
}

.u-of--auto {
	overflow: auto;
}

@media screen and (max-width: 779px) {
	.u-fs5L--s {font-size: 1.8rem!important;}
	.u-fs4L--s {font-size: 1.7rem!important;}
	.u-fs3L--s {font-size: 1.6rem!important;}
	.u-fs2L--s {font-size: 1.5rem!important;}
	.u-fsL--s {font-size: 1.4rem!important;}
	.u-fsM--s {font-size: 1.3rem!important;}
	.u-fsS--s {font-size: 1.2rem!important;}
	.u-fs2S--s {font-size: 1.1rem!important;}
	.u-fs3S--s {font-size: 1.0rem!important;}

	.u-fs18-20 {font-size: 1.8rem!important;}
}
@media screen and (min-width: 780px) {
	.u-fs5L--p {font-size: 1.8rem!important;}
	.u-fs4L--p {font-size: 1.7rem!important;}
	.u-fs3L--p {font-size: 1.6rem!important;}
	.u-fs2L--p {font-size: 1.5rem!important;}
	.u-fsL--p {font-size: 1.4rem!important;}
	.u-fsM--p {font-size: 1.3rem!important;}
	.u-fsS--p {font-size: 1.2rem!important;}
	.u-fs2S--p {font-size: 1.1rem!important;}
	.u-fs3S--p {font-size: 1.0rem!important;}

	.u-fs18-20 {font-size: 2.0rem!important;}
}

/* # u-txt* テキストアライン
u-txtC<br>
u-txtR<br>
u-txtL<br>
*/
.u-txtC {text-align: center!important;}
.u-txtR {text-align: right!important;}
.u-txtL {text-align: left!important;}

/* # u-lineH ラインヘイト
*/
.u-lineH3S {line-height: 1em;}
.u-lineH2S {line-height: 1.2em;}
.u-lineHS {line-height: 1.4em;}

.u-lineH17 {line-height: 1.7em;}

/* # u-clr* テキストカラー
<ul class="u-fsS" style="width: 200px;">
<li class="u-clr01">u-clr01 #f7931e
<li class="u-clr02 u-bgClr06">u-clr02 #fff
<li class="u-clr03">u-clr03 #54311B
<li class="u-clr04">u-clr04 #666
<li class="u-clr05">u-clr05 #000
<li class="u-clr06">u-clr06 #e50013
<li class="u-clr07">u-clr07 #ccc
<li class="u-clr08">u-clr08 #999
<li class="u-clr09">u-clr09 #222
<li class="u-clr10">u-clr10 #F4901E
<li class="u-clr11">u-clr11 #F99D8C
<li class="u-clr12">u-clr12 #7FB9BF
<li class="u-clr13">u-clr13 #AA937B
<li class="u-clr14">u-clr14 #969696
</ul>
*/
.u-clr01 {color: #f7931e!important;}
.u-clr02 {color: #fff!important;}
.u-clr03 {color: #54311B!important;}
.u-clr04 {color: #666!important;}
.u-clr05 {color: #000!important;}
.u-clr06 {color: #e50013!important;}
.u-clr07 {color: #CCC!important;}
.u-clr08 {color: #999!important;}
.u-clr09 {color: #222!important;}
.u-clr10 {color: #F4901E!important;}
.u-clr11 {color: #F99D8C!important;}
.u-clr12 {color: #7FB9BF!important;}
.u-clr13 {color: #AA937B!important;}
.u-clr14 {color: #969696!important;}
.u-clr15 {color: #808080!important;}
.u-clr16 {color: #ff0000!important;}
.u-clr17 {color: #AAA!important;}

/* # u-bold 太文字
*/
.u-bold {font-weight: bold!important;}
/* #u-family 明朝
u-family1<br>
`"游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif`
*/
.u-family1 {
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

/* # u-ind インデント
<ul class="u-fsS u-borClr11 u-borA1 u-p1" style="width: 200px;">
<li class="u-ind u-ind--01">[u-ind u-ind--01]<br>○○○○○○○○○○○○○○○○○○○○○○
<li class="u-ind u-ind--02">[u-ind u-ind--02]<br>○○○○○○○○○○○○○○○○○○○○○○
<li class="u-ind u-ind--03">[u-ind u-ind--03]<br>○○○○○○○○○○○○○○○○○○○○○○
</ul>
*/
.u-ind {
	padding-left: 1em!important;
	text-indent: -1em!important;
}
.u-ind--01:before {content: "※";}
.u-ind--02:before {content: "●";}
.u-ind--03:before {content: "■";}

/* #u-bgClr
2018.03.13 u-bgColor → u-bgClr に略す
<ul class="u-flx u-fsS">
	<li class="u-w50"><span class="u-inBlk u-w50 u-bgClr01">|</span>u-bgClr01 #ebebeb
	<li class="u-w50"><span class="u-inBlk u-w50 u-bgClr02">|</span>u-bgClr02 #4d788e
	<li class="u-w50"><span class="u-inBlk u-w50 u-bgClr03">|</span>u-bgClr03 #005932
	<li class="u-w50"><span class="u-inBlk u-w50 u-bgClr04">|</span>u-bgClr04 #F5EDE6
	<li class="u-w50"><span class="u-inBlk u-w50 u-bgClr05">|</span>u-bgClr05 #B8B6B8
	<li class="u-w50"><span class="u-inBlk u-w50 u-bgClr06">|</span>u-bgClr06 #000000
	<li class="u-w50"><span class="u-inBlk u-w50 u-bgClr07">|</span>u-bgClr07 #625D61
	<li class="u-w50"><span class="u-inBlk u-w50 u-bgClr08">|</span>u-bgClr08 #D6EEF1
	<li class="u-w50"><span class="u-inBlk u-w50 u-bgClr09">|</span>u-bgClr09 #E6F6F7
	<li class="u-w50"><span class="u-inBlk u-w50 u-bgClr10">|</span>u-bgClr10 #820B19
	<li class="u-w50"><span class="u-inBlk u-w50 u-bgClr11">|</span>u-bgClr11 #E1F0f4
	<li class="u-w50"><span class="u-inBlk u-w50 u-bgClr12">|</span>u-bgClr12 #C52F30
	<li class="u-w50"><span class="u-inBlk u-w50 u-bgClr13">|</span>u-bgClr13 #F18096
	<li class="u-w50"><span class="u-inBlk u-w50 u-bgClr14">|</span>u-bgClr14 #F2F2F2
	<li class="u-w50"><span class="u-inBlk u-w50 u-bgClr15">|</span>u-bgClr15 #CCC
	<li class="u-w50"><span class="u-inBlk u-w50 u-bgClr16">|</span>u-bgClr16 #F7931E
	<li class="u-w50"><span class="u-inBlk u-w50 u-bgClr17">|</span>u-bgClr17 #F4F4F4
	<li class="u-w50"><span class="u-inBlk u-w50 u-bgClr18">|</span>u-bgClr18 #999
</ul>
*/
.u-bgClr00 {background-color: #FFF!important;}
.u-bgClr01 {background-color: #ebebeb!important;}
.u-bgClr02 {background-color: #4d788e!important;}
.u-bgClr03 {background-color: #005932!important;}
.u-bgClr04 {background-color: #F5EDE6!important;}
.u-bgClr05 {background-color: #B8B6B8!important;}
.u-bgClr06 {background-color: #000000!important;}
.u-bgClr07 {background-color: #625D61!important;}
.u-bgClr08 {background-color: #D6EEF1!important;}
.u-bgClr09 {background-color: #E6F6F7!important;}
.u-bgClr10 {background-color: #820B19!important;}
.u-bgClr11 {background-color: #E1F0f4!important;}
.u-bgClr12 {background-color: #C52F30!important;}
.u-bgClr13 {background-color: #F18096!important;}
.u-bgClr14 {background-color: #F2F2F2!important;}
.u-bgClr15 {background-color: #CCC!important;}
.u-bgClr16 {background-color: #F7931E!important;}
.u-bgClr17 {background-color: #F4F4F4!important;}
.u-bgClr18 {background-color: #999!important;}
.u-bgClr19 {background-color: #FBEEE8!important;}
.u-bgClr20 {background-color: #DFEEEF!important;}
.u-bgClr21 {background-color: #C1AC93!important;}
.u-bgClr22 {background-color: rgba(0,0,0,.5)!important;}
.u-bgClr23 {background-color: #F00!important;}
.u-bgClr24 {background-color: #FCC!important;}
/*背景グラデーション（PIARYカラー）*/
.u-bgGrad {background: linear-gradient(90deg,#ff7951,#ffc35d);}

/*テキストのグラデーション（PIARYカラー）*/
.u-gradText {
	color: #f7931e;
	background-image: linear-gradient(90deg,#ff7951,#ffc35d);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	/* text-fill-color: transparent; */
}
@media all and (-ms-high-contrast: none){
	.u-gradText {
		background-image: none;
	}
}

/* # u-br* 画面サイズ別表示
u-br1 : 960px以上で表示
u-br2 : 780px以上で表示
u-br3 : 480px以上で表示
u-br4 : 479px以下で表示
u-br5 : 959px以下で表示
*/
@media screen and (min-width: 959px) {
	.u-br5 {display: none;}
}
@media screen and (min-width: 479px) {
	.u-br4 {display: none;}
}
@media screen and (max-width: 479px) {
	.u-br3 {display: none;}
}
@media screen and (max-width: 779px) {
	.u-br2 {display: none;}
}
@media screen and (max-width: 959px) {
	.u-br1 {display: none;}
}

/* #改行しない
*/
.u-NoWrap {
	white-space: nowrap !important;
}


/* # u-hidden 非表示
*/
.u-hidden {
	display: none!important;
}
.u-vHidden {
	visibility: hidden!important;
}

/* # u-noScroll 画面固定（スクロール不可）
*/
.u-noScroll {
	position: fixed;
	max-width: 100vw;
	overflow: hidden!important;
}

/* # u-pos* position
u-posIni : 初期化<br>
u-posAbs : absolute<br>
u-posRel : relative<br>
*/
.u-posIni {position: initial!important;}
.u-posAbs {position: absolute!important;}
.u-posRel {position: relative!important;}
.u-posFix {position: fixed!important;}

.u-lef1 {left: 1em!important;}
.u-lef05 {left: 0.5em!important;}
.u-lef025 {left: 0.25em!important;}
.u-lef0 {left: 0!important;}
.u-lef-025 {left: -0.25em!important;}
.u-lef-05 {left: -0.5em!important;}
.u-lef-1 {left: -1em!important;}

.u-top1 {top: 1em!important;}
.u-top05 {top: 0.5em!important;}
.u-top025 {top: 0.25em!important;}
.u-top0 {top: 0!important;}
.u-top-025 {top: -0.25em!important;}
.u-top-05 {top: -0.5em!important;}
.u-top-1 {top: -1em!important;}

.u-rig0 {right: 0!important;}
.u-rig1 {right: 1em!important;}
.u-rig1 {right: 1em!important;}
.u-btm0 {bottom: 0em!important;}

/* #u-cur* カーソル
u-curPo : ポインター<br>
*/
.u-curPo {
	cursor: pointer!important;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.u-curDe {cursor: default!important;}

/* # u-ver* 高さ中央
u-verM : 無理やり高さ中央<br>
u-verAM : テーブルセルしか効かない高さ中央
*/
.u-verM {
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	top: 50%;
	position: relative;
}
.u-verAM {
	vertical-align: middle !important;
}

/* #u-txtDec*
u-txtDec : デコレーション無し<br>
u-textDecUL : 下線
*/
.u-txtDec,
.u-txtDec:hover {text-decoration: none !important;}
.u-txtDecUL{text-decoration: underline !important;}

/* #u-noEvent クリックしても無反応
u-noEvent
*/
.u-noEvent {
	pointer-events: none !important;
}

/* #u-zIdx z-index微調整用
u-zIdx
*/
.u-zIdx50 {z-index: 50 !important}

.u-zIdx300 {z-index: 300 !important}

.u-zIdx800 {z-index: 800 !important}

.u-zIdx900 {z-index: 900 !important}

/* animation none */
.u-anime--none {
	animation: none!important;
}

/* wordbreak */
.u-wordbreak {
	word-break: break-all!important;
	word-wrap: break-word!important;
}

/* #js- ここより下はJSで使用
*/

/*js-toggle*/
.js-toggle__tit {
	cursor: pointer;
}
.js-toggle__det {
	display: none;
}

/* #js-modalWin */
.js-modalWin {
	background-color: -webkit-rgba(0,0,0,.8);
	background-color: rgba(0,0,0,.8);
	height: 100%;
	left: 0;
	padding: 0 10% 1%;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 110;
}

/* #js-modalContents */
.js-modalContents {
	background: #fff;
	opacity: 1;
	overflow: auto;
	height: 90%;
	padding: 10px 3%;
	width: 100%;
	display: block;
}


/* #js-hidden 非表示
*/
.js-hidden {display: none !important;}


/* #モーダル関連
*/
/* #基本(base)
*/
/*.js-modalIframeWrap {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 120%;
	background-color: rgba(0,0,0, .7);
	z-index: 8000;
}
.js-modalIframeWrap .c-button--close {
	position: absolute;
	top: 1rem;
	right: 0.5rem;
}*/
/*.js-modalIframe {
	background-color: #fff;
	overflow-y: hidden;
	overflow-x: auto;
}*/

/* #js-modalIframeWrap.js-modalMove--zoom
入力がない場合はこれ
*/
/*.js-modalIframeWrap.js-modalMove--zoom {
	left: 100%;
	background-color: rgba(0,0,0,0);
	transition: background-color .2s;
}
.js-modalIframeWrap.js-modalMove--zoom.js-active {
	left: 0;
	background-color: rgba(0,0,0, .7);
}*/
/*.js-modalMove--zoom .js-modalIframe {
	position: fixed;
	top: 5rem;
	left: calc(50% - (100% - 4rem) / 2);
	transform: scale(0);
	transition: transform .2s;
	width: calc(100% - 4rem);
	max-width: 820px;
}
@media screen and (orientation: landscape) {
	.js-modalMove--zoom .js-modalIframe {
		height: 80vh;
		min-height: calc(100vh - 7rem);
	}
}
@media screen and (orientation: portrait) {
	.js-modalMove--zoom .js-modalIframe {
		height: 70vh;
		min-height: calc(100vw - 0rem);
	}
}
.js-modalMove--zoom.js-active .js-modalIframe {
	transform: scale(1);
}*/

/*.js-modalIframeWrap.js-modalMove--slideRight {
	left: 100%;
	background-color: rgba(0,0,0,0);
	transition: background-color .2s;
}
.js-modalIframeWrap.js-modalMove--slideRight.js-active {
	left: 0;
	background-color: rgba(0,0,0, .7);
}*/
/*.js-modalMove--slideRight .js-modalIframe {
	position: fixed;
	top: 0;
	left: 100%;
	transition: left .2s;
	width: calc(100% - 4rem);
	max-width: 820px;
	height: 100%;
}
@media screen and ( max-width: 959px ) {
	.js-modalMove--slideRight.js-active .js-modalIframe {
		left: 0;
	}
}
@media screen and ( min-width: 960px ) {
	.js-modalMove--slideRight.js-active .js-modalIframe {
		left: calc(50% - 480px);
	}
}*/

/* modal load*/
.js-editorDisable {
	background-color: #aaa;
	width: 100%;
	height: 100%;
	opacity: 0.5;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 9999;
}
.js-modalWrap {
	position: fixed;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 100;
	opacity:0;
	background-color: rgba(0,0,0,.5);
	transition: opacity .5s;
	overflow: auto;
	pointer-events: none;
}
.js-modalWrap.js-active {
	opacity:1;
	pointer-events: auto;
}
.js-modalInWrap {
	position: relative;
	left: 5%;
	width: 90%;
	padding: 2%;
	border-radius: 3px;
	margin-top: 4rem;
	margin-bottom: 4rem;
	background-color: #fff;
	transition-property: top;
}
.js-modalWrap.js-active .js-modalInWrap {
	top: 0;
}
.js-modalWrap .js-modalClose {
	opacity: 0;
	transition: opacity .5s;
}
.js-modalWrap.js-active .js-modalClose {
	opacity: 1;
	background-color: #fff;
	color: #666;
	border-radius: 100%;
	width: 20px;
	height: 20px;
	border: 1px solid;
	box-sizing: border-box;
	top: -10px;
	right: -10px;
}
.js-modalWrap.js-active .js-modalClose::before,
.js-modalWrap.js-active .js-modalClose::after{
	content: '';
	display: block;
	position: absolute;
	width: 12px;
	border-top: 1px solid;
	top: 9px;
	left: 3px;
}
.js-modalWrap.js-active .js-modalClose::before{
	transform: rotate(45deg);
}
.js-modalWrap.js-active .js-modalClose::after{
	transform: rotate(-45deg);
}

/* # 連続モーダル（商品ページ購入OP）
*/
.js-chainModalBack {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #000;
	opacity: 0;
	transition: opacity;
	transition-duration: 300ms;
	pointer-events: none;
	z-index: 95;
}
.js-chainModalBack.js-active {
	opacity: .5;
}



/* #オリジナルスライド
*/
.c-itemSlide {
	overflow: hidden;
	margin-top: 2%;
	margin-bottom: 2%;
}
/*.js-slideWrap {
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
	-webkit-touch-action: pan-y;
	touch-action: pan-y;
}*/

.u-scrollnobar::-webkit-scrollbar {
	display: none;
}
.u-disabled{
	background-color: #CCC;
}
.u-chekboxUI{
	height: 2em;
	width: 2em;
}


/* tapHighlight none */
.u-tapHighLight{
	/* tap-highlight-color:rgba(0,0,0,0); */
	-webkit-tap-highlight-color:rgba(0,0,0,0);
}
.js-noScroll {
	height: 100%;
}
.js-noScroll body {
	height: 100%;
	overflow: hidden;
	min-height: 100.1%;
}
.js-noScroll main {
	position: relative;
	height: 100%;
}

/* 慣性スクロール */
.u-smoothScroll,
.js-itemOptionModal,
.js-itemOptionModalWin{
	-webkit-overflow-scrolling: touch;
	/* overflow-scrolling: touch; */
}


/* #js-modalAction--
*/
/*[class*="js-modalAction--"],
.js-modalAction__inner {
	transform: translateZ(0);
}*/
[class*="js-modalAction--"]:not(.js-active) {
	pointer-events: none;
}
[class*="js-modalAction--"].js-active {
	pointer-events: auto;
}
/* # zoom
*/
.js-modalAction--zoom {
	opacity:0;
	transition: opacity;
}
.js-modalAction--zoom.js-active {
	opacity:1;
}
.js-modalAction--zoom > .js-modalAction__inner {
	transform: scale3d(.5,.5,1);
	transition-property: transform,opacity;
}
.js-modalAction--zoom.js-active > .js-modalAction__inner {
	transform: scale3d(1,1,1);
}
/* # globalNav
*/
.js-modalAction--globalNav {
	transition-property: opacity;
	left: -100%;
}
.js-modalAction--globalNav.js-active {
	opacity: 1;
	left: 0;
}
.js-modalAction--globalNav > .js-modalAction__inner {
	transition-property: left;
	left: -100%;
}
.js-modalAction--globalNav.js-active > .js-modalAction__inner {
	left: 0;
}
/* # globalSearch
*/
.js-modalAction--globalSearch {
	transition-property: opacity;
	opacity: 0;
	left: 100%;
	z-index: 50;
}
.js-modalAction--globalSearch.js-active {
	opacity: 1;
	left: 0;
}
.js-modalAction--globalSearch > .js-modalAction__inner {
	transition-property: left;
	left: 100%;
}
.js-modalAction--globalSearch.js-active > .js-modalAction__inner {
	left: 0;
}
/* # bound
*/
.js-modalAction--bound {
	transition-property: opacity;
	opacity: 0;
}
.js-modalAction--bound.js-active {
	opacity: 1;
}
.js-modalAction--bound > .js-modalAction__inner {
	transition-property: top;
	top: -5vh;
	border-radius: 3px;
}
.js-modalAction--bound.js-active > .js-modalAction__inner {
	top: 0;
}
/* # slideRightT
*/
@media screen and (max-width: 779px){
	.js-modalAction--slideRightT {
		transition-property: opacity;
		opacity: 0;
		right: 0;
	}
	.js-modalAction--slideRightT.js-active {
		opacity: 1;
	}
	.js-modalAction--slideRightT > .js-modalAction__inner {
		position: absolute;
		transition-property: right;
		right: -100%;
		width: 100%;
	}
	.js-modalAction--slideRightT.js-active > .js-modalAction__inner{
		right: 0;
	}
}

/* # slide-image */
.js-imgModalSlide__item {
	padding: .5em;
	background-color: #fff;
	border-radius: 5px;
	margin: 1em;
}
.js-modalClose--add {
	background-color: #fff;
	width: 19px;
	height: 19px;
	display: block;
	position: absolute;
	top: .5em;
	right: .5em;
	border-radius: 50%;
	transform: rotate(45deg);
	border: 1px solid #ccc;
	box-sizing: content-box;
}
.js-modalClose--add::before {
	content: '';
	display: block;
	position: absolute;
	height: 0;
	width: 15px;
	border-top: 1px solid #000;
	top: 9px;
	left: 2px;
}
.js-modalClose--add::after {
	content: '';
	display: block;
	position: absolute;
	height: 15px;
	width: 0;
	border-left: 1px solid #000;
	left: 9px;
	top: 2px;
}
/*slick-prev slick-arrow*/
.js-imgModalSlide .slick-arrow {
	position: absolute;
	top: 50%;
	z-index: 1;
	border: none;
	background-color: rgba(0,0,0,.5);
	width: 20px;
	height: 80px;
	font-size: 0;
	transform: translateY(-50%);
}
.js-imgModalSlide .slick-prev {
	left: 0;
}
.js-imgModalSlide .slick-next {
	right: 0;
}
.js-imgModalSlide .slick-track {
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
}


/* # トグル関連（setToggle）
*/
.js-slideTarget,
.js-slideTarget__1,
.js-slideTarget__2,
.js-slideTarget__3,
.js-togTag,.js-togTag__1 {
	display: none;
}

/* # 後光
 */
.u-anime--bxShadow01 {
	border: 2px solid rgba(229, 87, 76, .8);
	-webkit-animation-name: anime--bxShadow01; /* Safari 4.0 - 8.0 */
	-webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */
	-webkit-animation-iteration-count: infinite; /* Safari 4.0 - 8.0 */
	animation-name: anime--bxShadow01;
	animation-duration: 2s;
	animation-iteration-count: infinite;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes anime--bxShadow01 {
	50% { border: 2px solid rgba(255,255,255,1); }
}
/* Standard syntax */
@keyframes anime--bxShadow01 {
	50% { border: 2px solid rgba(255,255,255,1); }
}

/*
.u-anime--bxShadow01{
	animation: bxShadow01 1.3s ease 0s infinite normal;
	z-index: 1;
}
@keyframes bxShadow01{
	0%{ box-shadow: 0px 0px 3px 2px rgba(249, 157, 140, 0.6); }
	50%{ box-shadow: 0px 0px 9px 2px rgba(249, 157, 140, 1); }
	100%{ box-shadow: 0px 0px 3px 2px rgba(249, 157, 140, 0.6); }
}*/

/* 2019/03/13 meicom add PIARY-1034*/
.u-prewrap {
	white-space: pre-wrap;
}

.u-noSelect {
	-moz-user-select: -moz-none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	user-select: none;
}

/* PIARY_PIAPRI-294の対応 2023/05/23 K.Okui start edit */
.u-tagInfoOrange {
    font-size: 1.1rem!important;
    margin-right: 1em!important;
    padding: .1rem .35rem .05rem;
	border: 1px solid #F7851E;
	background-color: #fff;
	color: #F7851E;
    display: inline-block;
}
/* PIARY_PIAPRI-294の対応 2023/05/23 K.Okui end edit */

/* PIARY_PIAPRI-472の対応 2025/04/09 K.Okui start edit */
.u-tagInfoRed {
    padding: .1rem .35rem .05rem;
    text-decoration: underline;
    color: #FF0000;
    display: inline-block;
}
/* PIARY_PIAPRI-472の対応 2025/04/09 K.Okui end edit */