@charset "UTF-8";

/*
========================================

	icon.css
    
========================================
*/

/*
【 memo-----計算の基準となるfont-sizeとline-height 】

base.css  line128
↓
p, ol, ul , dt, dd, table {
	font-size:0.875rem;
    line-height: 1.75;　★
}

@media (min-width: 992px)
base.css  line128
↓
p, ol, ul , dd, table {font-size :1rem;}

*/
main.icon_sample table th {
	padding: 0;	
}

main.icon_sample table td {
	padding: 0;	
}

main.icon_sample table td img {
	border: 1px solid #ccc;
	background: #e5e5e5;
}

main.icon_sample ul {
	max-width: 600px;
}

main.icon_sample ul.number li {
	height:50px;
	line-height: 50px;
	border-bottom: 1px solid #000;
}

main.icon_sample dl.iconBox {
	padding: 1rem;
	border: 1px dotted #000;/*ガイド*/	
}

main.icon_sample dl.iconBox dd {
	background-color: #e5e5e5;/*ガイド*/	
	margin: 1rem 0;
	padding: 1rem;/*随時設定可能*/
}

.icon {
	position: relative;
	display: block;
	vertical-align: middle;
    background: transparent;
    line-height:1.75 !important;/*上記の★印参照*/
  }

.icon::before {
    position: absolute;
    display: block;
    content: "";
	/*filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.6));*/
    line-height:inherit !important;
  }

/*
.icon-xs {font-size:0.75rem;}
.icon-sm {font-size:0.775rem;}
.icon-md {font-size:1.25rem;}
.icon-lg {font-size:2.5rem;}
.icon-xl {font-size:5rem;}
*/


/*基準の大きさ*/
.icon::before {
    width: 1rem;
    height: 1rem;
	/*border: 1px solid #c33;ガイド*/	
}

/*極小*/
.icon-xs::before {
	width: 0.5rem;
	height: 0.5rem;/*8px*/
}

/*小*/
.icon-sm::before {
	width: 0.75rem;
	height: 0.75rem;/*12px*/
}

/*やや小*/
.icon-md::before {
	width: 0.875rem;
	height: 0.875rem;/*14px*/
}

/*やや大*/
.icon-lgh::before {
    width: 1.5rem;
    height: 1.5rem;/*24px*/
}

/*大*/
.icon-lg::before {
	width: 3rem;
	height: 3rem;/*48px*/
}

/*特大*/
.icon-xl::before {
	width: 5rem;
	height: 5rem;/*80px*/
}

/*余白*/

.icon.top {padding-top: 1rem;}
.icon.bottom {padding-bottom: 1rem;}
.icon.left {padding-left: 1rem;}/*重要‐‐‐改行時などに、他の列の文字と縦位置を合わせるため font-size同じに*/	
.icon.right {padding-right: 1rem;}

.icon.left.center {/*text-align: centerのとき;*/
	padding-right: 1rem;
}
.icon.right.center {/*text-align: centerのとき;*/
	padding-left: 1rem;
}

/*アイコンが大きい場合、上下に余白を増やす（以下同じ）*/

.icon.top.icon-lgh {padding-top: 1.5rem;}
.icon.bottom.icon-lgh { padding-bottom: 1.5rem;}

.icon.top.icon-lg {padding-top: 3rem;}
.icon.bottom.icon-lg { padding-bottom: 3rem;}

.icon.top.icon-xl {padding-top: 5rem;}
.icon.bottom.icon-xl { padding-bottom: 5rem;}


@media (max-width:991.98px) {
	
.icon.left {padding-left: 0.875rem;}/*重要‐‐‐改行時などに、他の列の文字と縦位置を合わせるため font-size同じに*/
.icon.right { padding-right: 0.875rem;}
	
}

/* アイコンの表示位置 */

/*normal*/

.icon.top::before {
    top:0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}

.icon.bottom::before {
    bottom: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);                                                    
    transform: translateX(-50%);
}

.icon.left::before {
    top:0;
	left:-0.25rem;/*重要‐‐‐改行時などに、他の列の文字と縦位置を合わせつつ、アイコンとの間隔を開けるため（目分量）*/	
}
.icon.right::before {
    top:0;
	right: -0.25rem;/*重要*/
}
.icon.left::before,
.icon.right::before {
	-webkit-transform: translateY(0.375rem); /* ( line-height 1.75rem - icon-size 1rem ) / 2 */
	-ms-transform: translateY(0.375rem); 
	transform: translateY(0.375rem);
}
.large .icon.left::before,
.large .icon.right::before,/*上の階層に.large(font-size:125%)指定がある場合*/
.icon.left.large::before,
.icon.right.large::before/*.iconと同じセレクタに.large(font-size:125%)指定がある場合*/ {
	-webkit-transform: translateY(0.59375rem); /* ( line-height 1.75rem * 1.25 - icon-size 1rem ) / 2 */
	-ms-transform: translateY(0.59375rem); 
	transform: translateY(0.59375rem);
}

/*xs*/

.icon-xs.left::before {left:0.25rem;}
.icon-xs.right::before {right:0.25rem;}
.icon-xs.left::before,
.icon-xs.right::before {
	-webkit-transform: translateY(0.625rem); /* ( line-height 1.75rem - icon-size 0.5rem ) / 2 */
	-ms-transform: translateY(0.625rem); 
	transform: translateY(0.625rem);
}

/*sm*/

.icon-sm.left::before {left:0;}
.icon-sm.right::before {right:0;}
.icon-sm.left::before,
.icon-sm.right::before {
	-webkit-transform: translateY(0.5rem); /* ( line-height 1.75rem - icon-size 0.75rem ) / 2 */
	-ms-transform: translateY(0.5rem); 
	transform: translateY(0.5rem);
}

/*md*/

.icon-md.left::before {left:-0.125rem;}
.icon-md.right::before {right:-0.125rem;}
.icon-md.left::before,
.icon-md.right::before {
	-webkit-transform: translateY(0.4375rem); /* ( line-height 1.75rem - icon-size 0.875rem ) / 2 */
	-ms-transform: translateY(0.4375rem); 
	transform: translateY(0.4375rem);
}

/*lgh*/

.icon-lgh.left::before {left:-0.75rem;}
.icon-lgh.right::before {right:-0.75rem;}
.icon-lgh.left::before,
.icon-lgh.right::before {
	-webkit-transform: translateY(0.125rem); /* ( line-height 1.75rem - icon-size 1.5rem ) / 2 */
	-ms-transform: translateY(0.125rem); 
	transform: translateY(0.125rem);
}
.large .icon-lgh.left::before,
.large .icon-lgh.right::before,/*上の階層に.large(font-size: 125%)指定がある場合*/
.icon-lgh.left.large::before,
.icon-lgh.right.large::before/*.iconと同じセレクタに.large(font-size: 125%)指定がある場合*/ {
	-webkit-transform: translateY(0.34375rem); /* ( line-height 1.75rem * 1.25 - icon-size 1.5rem ) / 2 */
	-ms-transform: translateY(0.34375rem); 
	transform: translateY(0.34375rem);
}

/*lg*/

.icon-lg.left::before {left:-2rem;}
.icon-lg.right::before {right:-2rem;}
.icon-lg.left::before,
.icon-lg.right::before {
	-webkit-transform: translateY(-0.625rem); /* ( line-height 1.75rem - icon-size 3rem ) / 2 */
	-ms-transform: translateY(-0.625rem); 
	transform: translateY(-0.625rem);
}

/*xl*/

.icon-xl.left::before {left:-4.5rem;}
.icon-xl.right::before {right:-4.5rem;}
.icon-xl.left::before,
.icon-xl.right::before {
	-webkit-transform: translateY(-1.625rem); /* ( line-height 1.75rem - icon-size 5rem ) / 2 */
	-ms-transform: translateY(-1.625rem); 
	transform: translateY(-1.625rem);
}


@media (max-width:991.98px) {
	
/*normal*/

.icon.left::before,
.icon.right::before {
	-webkit-transform: translateY(0.328125rem); /* ( line-height 1.75rem - font-size 1rem ) / 2 * 0.875 */
	-ms-transform: translateY(0.328125rem); 
	transform: translateY(0.328125rem);
}
.large .icon.left::before,
.large .icon.right::before,/*上の階層に.large(font-size: 125%)指定がある場合*/
.icon.left.large::before,
.icon.right.large::before/*.iconと同じセレクタに.large(font-size: 125%)指定がある場合*/ {
	-webkit-transform: translateY(0.45703125rem);/* ( line-height 1.75rem - font-size 1rem ) / 2 * 0.875 * 1.25 */
	-ms-transform: translateY(0.45703125rem); 
	transform: translateY(0.45703125rem);
}

/*xs*/

.icon-xs.left::before,
.icon-xs.right::before {
    top:0;
	-webkit-transform: translateY(0.515625rem); /* ( line-height 1.75rem * 0.875 - font-size 0.5rem ) / 2  */
	-ms-transform: translateY(0.515625rem); 
	transform: translateY(0.515625rem);
}
	
/*sm*/

.icon-sm.left::before,
.icon-sm.right::before {
    top:0;
	-webkit-transform: translateY(0.390625rem); /* ( line-height 1.75rem * 0.875 - font-size 0.75rem ) / 2  */
	-ms-transform: translateY(0.390625rem); 
	transform: translateY(0.390625rem);
}

/*md*/
	
.icon-md.left::before,
.icon-md.right::before {
    top:0;
	-webkit-transform: translateY(0.328125rem); /* ( line-height 1.75rem * 0.875 - font-size 0.875rem ) / 2  */
	-ms-transform: translateY(0.328125rem); 
	transform: translateY(0.328125rem);
}

/*lg*/

.icon-lgh.left::before,
.icon-lgh.right::before {
    top:0;
	-webkit-transform: translateY(0.015625rem); /* ( line-height 1.75rem * 0.875 - font-size 1.5rem ) / 2  */
	-ms-transform: translateY(0.015625rem); 
	transform: translateY(0.015625rem);
}
	
.icon-lg.left::before,
.icon-lg.right::before {
    top:0;
	-webkit-transform: translateY(-0.734375rem); /* ( line-height 1.75rem * 0.875 - font-size 3rem ) / 2  */
	-ms-transform: translateY(-0.734375rem); 
	transform: translateY(-0.734375rem);
}
.large .icon-lgh.left::before,
.large .icon-lgh.right::before,/*上の階層に.large(font-size: 125%)指定がある場合*/
.icon-lgh.left.large::before,
.icon-lgh.right.large::before/*.iconと同じセレクタに.large(font-size: 125%)指定がある場合*/ {
	-webkit-transform: translateY(0.20703125rem); /* ( line-height 1.75rem * 0.875 * 1.25 - icon-size 1.5rem ) / 2 */
	-ms-transform: translateY(0.20703125rem); 
	transform: translateY(0.20703125rem);
}

/*xl*/

.icon-xl.left::before,
.icon-xl.right::before {
    top:0;
	-webkit-transform: translateY(-1.734375rem); /* ( line-height 1.75rem * 0.875 - font-size 5rem ) / 2  */
	-ms-transform: translateY(-1.734375rem); 
	transform: translateY(-1.734375rem);
}

}

/*.left  または .rightで、アイコンの位置の高さを中央にする・全サイズ共通*/

.icon.middle {
	/*background-color: #fc3;ガイド*/
}

.icon.middle::before {
    top: 50%;
    -webkit-transform: translateY(-50%); 
    -ms-transform: translateY(-50%); 
    transform: translateY(-50%);
}

/*.left  または .rightで、アイコンをブロック内に収める・全サイズ共通*/

.icon.left.inner::before {
    left:0 !important;
	right:inherit !important;
}

.icon.right.inner::before {
    left:inherit !important;
	right: 0 !important; 
}

/* アイコンの絵柄 */
/*Copyright (c) 2017 by TAKESHI YAMANAKA (https://codepen.io/takeshi_ymnk/pen/PmNdpq)*/
 
.icon::before {
    background-image: url(/common/cmn_img/icon_jc.svg);/*アイコン画像*/
    background-repeat: no-repeat;
	background-size: calc(1200 / 100 * 100%) calc(1200 / 100 * 100%);
  }

/*
1200---画像の大きさ
100---1コマの大きさ
以下、(1200-100)を1100にして表示(W3C対応)
*/

 
/*
1段目
*/
.icon.one01 { background-position: 0 0;}
.icon.one02::before { background-position: calc(100 / 1100 * 100%) 0;}
.icon.one03::before  { background-position: calc(200 / 1100 * 100%) 0;}
.icon.one04::before  { background-position: calc(300 / 1100 * 100%) 0;}
.icon.one05::before { background-position: calc(400 / 1100 * 100%) 0;}
.icon.one06::before { background-position: calc(500 / 1100 * 100%) 0;}
.icon.one07::before  { background-position: calc(600 / 1100 * 100%) 0;}
.icon.one08::before  { background-position: calc(700 / 1100 * 100%) 0;}
.icon.one09::before { background-position: calc(800 / 1100 * 100%) 0;}
.icon.one10::before { background-position: calc(900 / 1100 * 100%) 0;}
.icon.one11::before  { background-position: calc(1000 / 1100 * 100%) 0;}
.icon.one12::before  { background-position: calc(1100 / 1100 * 100%) 0;}

/*
2段目
*/
.icon.two01::before { background-position: 0 calc(100 / 1100 * 100%);}
.icon.two02::before { background-position: calc(100 / 1100 * 100%) calc(100 / 1100 * 100%);}
.icon.two03::before  { background-position: calc(200 / 1100 * 100%) calc(100 / 1100 * 100%) ;}
.icon.two04::before  { background-position: calc(300 / 1100 * 100%) calc(100 / 1100 * 100%);}
.icon.two05::before { background-position: calc(400 / 1100 * 100%) calc(100 / 1100 * 100%);}
.icon.two06::before { background-position: calc(500 / 1100 * 100%) calc(100 / 1100 * 100%);}
.icon.two07::before  { background-position: calc(600 / 1100 * 100%) calc(100 / 1100 * 100%);}
.icon.two08::before  { background-position: calc(700 / 1100 * 100%) calc(100 / 1100 * 100%);}
.icon.two09::before { background-position: calc(800 / 1100 * 100%) calc(100 / 1100 * 100%);}
.icon.two10::before { background-position: calc(900 / 1100 * 100%) calc(100 / 1100 * 100%);}
.icon.two11::before  { background-position: calc(1000 / 1100 * 100%) calc(100 / 1100 * 100%);}
.icon.two12::before  { background-position: calc(1100 / 1100 * 100%) calc(100 / 1100 * 100%);}

/*
3段目
*/
.icon.three01::before { background-position: 0 calc(200 / 1100 * 100%);}
.icon.three02::before { background-position: calc(100 / 1100 * 100%) calc(200 / 1100 * 100%);}
.icon.three03::before  { background-position: calc(200 / 1100 * 100%) calc(200 / 1100 * 100%);}
.icon.three04::before  { background-position: calc(300 / 1100 * 100%) calc(200 / 1100 * 100%);}
.icon.three05::before { background-position: calc(400 / 1100 * 100%) calc(200 / 1100 * 100%);}
.icon.three06::before { background-position: calc(500 / 1100 * 100%) calc(200 / 1100 * 100%);}
.icon.three07::before  { background-position: calc(600 / 1100 * 100%) calc(200 / 1100 * 100%);}
.icon.three08::before  { background-position: calc(700 / 1100 * 100%) calc(200 / 1100 * 100%);}
.icon.three09::before { background-position: calc(800 / 1100 * 100%) calc(200 / 1100 * 100%);}
.icon.three10::before { background-position: calc(900 / 1100 * 100%) calc(200 / 1100 * 100%);}
.icon.three11::before  { background-position: calc(1000 / 1100 * 100%) calc(200 / 1100 * 100%);}
.icon.three12::before  { background-position: calc(1100 / 1100 * 100%) calc(200 / 1100 * 100%);}

/*
4段目
*/
.icon.four01::before { background-position: 0 calc(300 / 1100 * 100%);}
.icon.four02::before { background-position: calc(100 / 1100 * 100%) calc(300 / 1100 * 100%);}
.icon.four03::before  { background-position: calc(200 / 1100 * 100%) calc(300 / 1100 * 100%);}
.icon.four04::before  { background-position: calc(300 / 1100 * 100%) calc(300 / 1100 * 100%);}
.icon.four05::before { background-position: calc(400 / 1100 * 100%) calc(300 / 1100 * 100%);}
.icon.four06::before { background-position: calc(500 / 1100 * 100%) calc(300 / 1100 * 100%);}
.icon.four07::before  { background-position: calc(600 / 1100 * 100%) calc(300 / 1100 * 100%);}
.icon.four08::before  { background-position: calc(700 / 1100 * 100%) calc(300 / 1100 * 100%);}
.icon.four09::before { background-position: calc(800 / 1100 * 100%) calc(300 / 1100 * 100%);}
.icon.four10::before { background-position: calc(900 / 1100 * 100%) calc(300 / 1100 * 100%);}
.icon.four11::before  { background-position: calc(1000 / 1100 * 100%) calc(300 / 1100 * 100%);}
.icon.four12::before  { background-position: calc(1100 / 1100 * 100%) calc(300 / 1100 * 100%);}

/*
5段目
*/
.icon.five01::before { background-position: 0 calc(400 / 1100 * 100%);}
.icon.five02::before { background-position: calc(100 / 1100 * 100%) calc(400 / 1100 * 100%);}
.icon.five03::before  { background-position: calc(200 / 1100 * 100%) calc(400 / 1100 * 100%);}
.icon.five04::before  { background-position: calc(300 / 1100 * 100%) calc(400 / 1100 * 100%);}
.icon.five05::before { background-position: calc(400 / 1100 * 100%) calc(400 / 1100 * 100%);}
.icon.five06::before { background-position: calc(500 / 1100 * 100%) calc(400 / 1100 * 100%);}
.icon.five07::before  { background-position: calc(600 / 1100 * 100%) calc(400 / 1100 * 100%);}
.icon.five08::before  { background-position: calc(700 / 1100 * 100%) calc(400 / 1100 * 100%);}
.icon.five09::before { background-position: calc(800 / 1100 * 100%) calc(400 / 1100 * 100%);}
.icon.five10::before { background-position: calc(900 / 1100 * 100%) calc(400 / 1100 * 100%);}
.icon.five11::before  { background-position: calc(1000 / 1100 * 100%) calc(400 / 1100 * 100%);}
.icon.five12::before  { background-position: calc(1100 / 1100 * 100%) calc(400 / 1100 * 100%);}

/*---------------------------（！注意）必要があれば12段まで増やせるので、以下の設定は消さない*/
/*
6段目
*/
.icon.six01::before { background-position: 0 calc(500 / 1100 * 100%);}
.icon.six02::before { background-position: calc(100 / 1100 * 100%) calc(500 / 1100 * 100%);}
.icon.six03::before  { background-position: calc(200 / 1100 * 100%) calc(500 / 1100 * 100%) ;}
.icon.six04::before  { background-position: calc(300 / 1100 * 100%) calc(500 / 1100 * 100%);}
.icon.six05::before { background-position: calc(400 / 1100 * 100%) calc(500 / 1100 * 100%);}
.icon.six06::before { background-position: calc(500 / 1100 * 100%) calc(500 / 1100 * 100%);}
.icon.six07::before  { background-position: calc(600 / 1100 * 100%) calc(500 / 1100 * 100%);}
.icon.six08::before  { background-position: calc(700 / 1100 * 100%) calc(500 / 1100 * 100%);}
.icon.six09::before { background-position: calc(800 / 1100 * 100%) calc(500 / 1100 * 100%);}
.icon.six10::before { background-position: calc(900 / 1100 * 100%) calc(500 / 1100 * 100%);}
.icon.six11::before  { background-position: calc(1000 / 1100 * 100%) calc(500 / 1100 * 100%);}
.icon.six12::before  { background-position: calc(1100 / 1100 * 100%) calc(500 / 1100 * 100%);}

/*
7段目
*/
.icon.seven01::before { background-position: 0 calc(600 / 1100 * 100%);}
.icon.seven02::before { background-position: calc(100 / 1100 * 100%) calc(600 / 1100 * 100%);}
.icon.seven03::before  { background-position: calc(200 / 1100 * 100%) calc(600 / 1100 * 100%);}
.icon.seven04::before  { background-position: calc(300 / 1100 * 100%) calc(600 / 1100 * 100%);}
.icon.seven05::before { background-position: calc(400 / 1100 * 100%) calc(600 / 1100 * 100%);}
.icon.seven06::before { background-position: calc(500 / 1100 * 100%) calc(600 / 1100 * 100%);}
.icon.seven07::before  { background-position: calc(600 / 1100 * 100%) calc(600 / 1100 * 100%);}
.icon.seven08::before  { background-position: calc(700 / 1100 * 100%) calc(600 / 1100 * 100%);}
.icon.seven09::before { background-position: calc(800 / 1100 * 100%) calc(600 / 1100 * 100%);}
.icon.seven10::before { background-position: calc(900 / 1100 * 100%) calc(600 / 1100 * 100%);}
.icon.seven11::before  { background-position: calc(1000 / 1100 * 100%) calc(600 / 1100 * 100%);}
.icon.seven12::before  { background-position: calc(1100 / 1100 * 100%) calc(600 / 1100 * 100%);}

/*
8段目
*/
.icon.eight01::before { background-position: 0 calc(700 / 1100 * 100%);}
.icon.eight02::before { background-position: calc(100 / 1100 * 100%) calc(700 / 1100 * 100%);}
.icon.eight03::before  { background-position: calc(200 / 1100 * 100%) calc(700 / 1100 * 100%);}
.icon.eight04::before  { background-position: calc(300 / 1100 * 100%) calc(700 / 1100 * 100%);}
.icon.eight05::before { background-position: calc(400 / 1100 * 100%) calc(700 / 1100 * 100%);}
.icon.eight06::before { background-position: calc(500 / 1100 * 100%) calc(700 / 1100 * 100%);}
.icon.eight07::before  { background-position: calc(600 / 1100 * 100%) calc(700 / 1100 * 100%);}
.icon.eight08::before  { background-position: calc(700 / 1100 * 100%) calc(700 / 1100 * 100%);}
.icon.eight09::before { background-position: calc(800 / 1100 * 100%) calc(700 / 1100 * 100%);}
.icon.eight10::before { background-position: calc(900 / 1100 * 100%) calc(700 / 1100 * 100%);}
.icon.eight11::before  { background-position: calc(1000 / 1100 * 100%) calc(700 / 1100 * 100%);}
.icon.eight12::before  { background-position: calc(1100 / 1100 * 100%) calc(700 / 1100 * 100%);}

/*
9段目
*/
.icon.nine01::before { background-position: 0 calc(800 / 1100 * 100%);}
.icon.nine02::before { background-position: calc(100 / 1100 * 100%) calc(800 / 1100 * 100%);}
.icon.nine03::before  { background-position: calc(200 / 1100 * 100%) calc(800 / 1100 * 100%);}
.icon.nine04::before  { background-position: calc(300 / 1100 * 100%) calc(800 / 1100 * 100%);}
.icon.nine05::before { background-position: calc(400 / 1100 * 100%) calc(800 / 1100 * 100%);}
.icon.nine06::before { background-position: calc(500 / 1100 * 100%) calc(800 / 1100 * 100%);}
.icon.nine07::before  { background-position: calc(600 / 1100 * 100%) calc(800 / 1100 * 100%);}
.icon.nine08::before  { background-position: calc(700 / 1100 * 100%) calc(800 / 1100 * 100%);}
.icon.nine09::before { background-position: calc(800 / 1100 * 100%) calc(800 / 1100 * 100%);}
.icon.nine10::before { background-position: calc(900 / 1100 * 100%) calc(800 / 1100 * 100%);}
.icon.nine11::before  { background-position: calc(1000 / 1100 * 100%) calc(800 / 1100 * 100%);}
.icon.nine12::before  { background-position: calc(1100 / 1100 * 100%) calc(800 / 1100 * 100%);}

/*
10段目
*/
.icon.ten01::before { background-position: 0 calc(900 / 1100 * 100%);}
.icon.ten02::before { background-position: calc(100 / 1100 * 100%) calc(900 / 1100 * 100%);}
.icon.ten03::before  { background-position: calc(200 / 1100 * 100%) calc(900 / 1100 * 100%);}
.icon.ten04::before  { background-position: calc(300 / 1100 * 100%) calc(900 / 1100 * 100%);}
.icon.ten05::before { background-position: calc(400 / 1100 * 100%) calc(900 / 1100 * 100%);}
.icon.ten06::before { background-position: calc(500 / 1100 * 100%) calc(900 / 1100 * 100%);}
.icon.ten07::before  { background-position: calc(600 / 1100 * 100%) calc(900 / 1100 * 100%);}
.icon.ten08::before  { background-position: calc(700 / 1100 * 100%) calc(900 / 1100 * 100%);}
.icon.ten09::before { background-position: calc(800 / 1100 * 100%) calc(900 / 1100 * 100%);}
.icon.ten10::before { background-position: calc(900 / 1100 * 100%) calc(900 / 1100 * 100%);}
.icon.ten11::before  { background-position: calc(1000 / 1100 * 100%) calc(900 / 1100 * 100%);}
.icon.ten12::before  { background-position: calc(1100 / 1100 * 100%) calc(900 / 1100 * 100%);}

/*
11段目
*/
.icon.eleven01::before { background-position: 0 calc(1000 / 1100 * 100%);}
.icon.eleven02::before { background-position: calc(100 / 1100 * 100%) calc(1000 / 1100 * 100%);}
.icon.eleven03::before  { background-position: calc(200 / 1100 * 100%) calc(1000 / 1100 * 100%);}
.icon.eleven04::before  { background-position: calc(300 / 1100 * 100%) calc(1000 / 1100 * 100%);}
.icon.eleven05::before { background-position: calc(400 / 1100 * 100%) calc(1000 / 1100 * 100%);}
.icon.eleven06::before { background-position: calc(500 / 1100 * 100%) calc(1000 / 1100 * 100%);}
.icon.eleven07::before  { background-position: calc(600 / 1100 * 100%) calc(1000 / 1100 * 100%);}
.icon.eleven08::before  { background-position: calc(700 / 1100 * 100%) calc(1000 / 1100 * 100%);}
.icon.eleven09::before { background-position: calc(800 / 1100 * 100%) calc(1000 / 1100 * 100%);}
.icon.eleven10::before { background-position: calc(900 / 1100 * 100%) calc(1000 / 1100 * 100%);}
.icon.eleven11::before  { background-position: calc(1000 / 1100 * 100%) calc(1000 / 1100 * 100%);}
.icon.eleven12::before  { background-position: calc(1100 / 1100 * 100%) calc(1000 / 1100 * 100%);}

/*
12段目
*/
.icon.twelve01::before { background-position: 0 calc(1100 / 1100 * 100%);}
.icon.twelve02::before { background-position: calc(100 / 1100 * 100%) calc(1100 / 1100 * 100%);}
.icon.twelve03::before  { background-position: calc(200 / 1100 * 100%) calc(1100 / 1100 * 100%);}
.icon.twelve04::before  { background-position: calc(300 / 1100 * 100%) calc(1100 / 1100 * 100%);}
.icon.twelve05::before { background-position: calc(400 / 1100 * 100%) calc(1100 / 1100 * 100%);}
.icon.twelve06::before { background-position: calc(500 / 1100 * 100%) calc(1100 / 1100 * 100%);}
.icon.twelve07::before  { background-position: calc(600 / 1100 * 100%) calc(1100 / 1100 * 100%);}
.icon.twelve08::before  { background-position: calc(700 / 1100 * 100%) calc(1100 / 1100 * 100%);}
.icon.twelve09::before { background-position: calc(800 / 1100 * 100%) calc(1100 / 1100 * 100%);}
.icon.twelve10::before { background-position: calc(900 / 1100 * 100%) calc(1100 / 1100 * 100%);}
.icon.twelve11::before  { background-position: calc(1000 / 1100 * 100%) calc(1100 / 1100 * 100%);}
.icon.twelve12::before  { background-position: calc(1100 / 1100 * 100%) calc(1100 / 1100 * 100%);}

/*---------------------------（！注意）必要があれば12段まで増やせるので、以上の設定は消さない*/

.carousel-control-prev,
.carousel-control-next {/*bootstrap.theme.css line5412*/
	width:3rem;
	border:1px dotted #fff;/*ガイド*/
}

.carousel-control-prev-icon {
    width: 3rem;
    height: 3rem;
    background-image: url(/common/cmn_img/icon_jc.svg);/*アイコン画像*/
    background-repeat: no-repeat;
    background-size: calc(1200 / 100 * 100%) calc(1200 / 100 * 100%);
   	/*background-position: calc(100 / 1100 * 100%) 0;*/
	background-position: calc(200 / 1100 * 100%) calc(800 / 1100 * 100%);
}

.carousel-control-next-icon {
    width: 3rem;
    height: 3rem;
    background-image: url(/common/cmn_img/icon_jc.svg);/*アイコン画像*/
    background-repeat: no-repeat;
    background-size: calc(1200 / 100 * 100%) calc(1200 / 100 * 100%);
    /*background-position:0 0;*/
	background-position: calc(300 / 1100 * 100%) calc(800 / 1100 * 100%);
}