@charset "UTF-8";
/* CSS Document */

/*-------------------------------------------------------------------
 COMMON
---------------------------------------------------------------------*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, 
p, blockquote, pre, a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, 
sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td, input, select, textarea, 
header, footer, menu {border: 0; font-size: 13px; /* ベースのフォントサイズ */ font-size: 1.3rem; font-size: 62.5%; font-size: 1.3vw; font-family: arial, sans-serif; font-style: inherit; font-weight: inherit; margin: 0 auto; padding: 0; text-align: left; color: dimgray; line-height:160%; list-style: none; border-collapse: collapse;
}
*:before, *:after {-webkit-box-sizing: border-box; -moz-box-sizing:    border-box; box-sizing:         border-box;}
a, a:hover, a:focus, a:active{cursor: pointer; text-decoration: none; -webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -o-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out;}
a:hover, a:active {outline: 0;}
a img {border: 0;}
.clearFix:after {clear: both; content: ''; display: block;}

/*---------------------------------------------------
	PAGE COMMON
---------------------------------------------------*/
#Simu {width: 100%; height: 100%; position: fixed; top: 0; right: 0; bottom: 0; left: 0; padding: 0; margin: 0 auto; background-color: rgba(0,0,0,1); z-index: 99;}
#Simu article {width: calc(90% - 2em); position: relative; top: 3%; bottom: 3%; left: 0; right: 0; padding: 1em; margin: 0 auto; max-width: 1000px; background-color: white; border-radius: 10px; overflow: hidden; height: calc(100vh - 2em - 6%);}
#Simu article {bottom: calc(2em + 3%); height: calc(100vh - 2em - 2em - 6%);}

/*---------------------------------------------------
	LEFT
---------------------------------------------------*/
#Simu .leftSide {float: left; width: 60%; height: 100%; box-shadow:none;}
#Simu .leftSide .imgWrap {width: auto; height: 100%; text-align: center; display: block; position: relative; background-color: white; background-repeat: no-repeat; background-size: contain; background-position: center center; background-image: url('../img/mat_base.png');}
#Simu .leftSide .imgWrap .lockWrap {width: auto; height: 100%; position: relative; top: 0; left: 0; background-repeat: no-repeat; background-position: center center; background-size: contain;}
#Simu .leftSide .imgWrap .stitchWrap {width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-repeat: no-repeat; background-position: center center; background-size: contain;}
#Simu .leftSide .imgWrap .padWrap {width: 100%; height: 100%; position: absolute; right: 0; top: 0; background-repeat: no-repeat; background-position: center center; background-size: contain;}

/* SERIES IMG */
/* スタンダード・スクエア */
#Simu .leftSide .imgWrap.seriesImg1, #Simu .leftSide .imgWrap.seriesImg1active {background-image: url('../img/mat-standard_square-gray.png');}
/* スタンダード・エクセレント */
#Simu .leftSide .imgWrap.seriesImg2, #Simu .leftSide .imgWrap.seriesImg2active {background-image: url('../img/mat-standard_excellent-gray.png');}
/* スタンダード・ウェーブ */
#Simu .leftSide .imgWrap.seriesImg3, #Simu .leftSide .imgWrap.seriesImg3active {background-image: url('../img/mat-standard_wave-gray.png');}
/* スタンダード・ループ */
#Simu .leftSide .imgWrap.seriesImg4, #Simu .leftSide .imgWrap.seriesImg4active {background-image: url('../img/mat-standard_loop-black.png');}
/* スタンダード・ドライブ */
#Simu .leftSide .imgWrap.seriesImg5, #Simu .leftSide .imgWrap.seriesImg5active {background-image: url('../img/mat-standard_drive-black.png');}
/* チェック・ポップ */
#Simu .leftSide .imgWrap.seriesImg6, #Simu .leftSide .imgWrap.seriesImg6active {background-image: url('../img/mat-check_pop-gray.png');}
/* チェック・アーバン */
#Simu .leftSide .imgWrap.seriesImg7, #Simu .leftSide .imgWrap.seriesImg7active {background-image: url('../img/mat-check_urban-gray.png');}
/* クロス */
#Simu .leftSide .imgWrap.seriesImg8, #Simu .leftSide .imgWrap.seriesImg8active {background-image: url('../img/mat-cross_blue.png');}
/* プレミアム */
#Simu .leftSide .imgWrap.seriesImg9, #Simu .leftSide .imgWrap.seriesImg9active {background-image: url('../img/mat-premium_mix-gray.png');}
/* ラバー */
#Simu .leftSide .imgWrap.seriesImg10, #Simu .leftSide .imgWrap.seriesImg10active {background-image: url('../img/mat-rubber.png');}

/* SERIES1 スタンダード・スクエア */
#Simu .leftSide .imgWrap.seriesImg1active.seriesColor1, #Simu .leftSide .imgWrap.seriesImg1active.seriesColor1active {background-image: url('../img/mat-standard_square-black.png');}
#Simu .leftSide .imgWrap.seriesImg1active.seriesColor2, #Simu .leftSide .imgWrap.seriesImg1active.seriesColor2active {background-image: url('../img/mat-standard_square-gray.png');}

/* SERIES2 スタンダード・エクセレント */
#Simu .leftSide .imgWrap.seriesImg2active.seriesColor1, #Simu .leftSide .imgWrap.seriesImg2active.seriesColor1active {background-image: url('../img/mat-standard_excellent-black.png');}
#Simu .leftSide .imgWrap.seriesImg2active.seriesColor2, #Simu .leftSide .imgWrap.seriesImg2active.seriesColor2active {background-image: url('../img/mat-standard_excellent-gray.png');}
#Simu .leftSide .imgWrap.seriesImg2active.seriesColor3, #Simu .leftSide .imgWrap.seriesImg2active.seriesColor3active {background-image: url('../img/mat-standard_excellent-beige.png');}

/* SERIES3 スタンダード・ウェーブ */
#Simu .leftSide .imgWrap.seriesImg3active.seriesColor1, #Simu .leftSide .imgWrap.seriesImg3active.seriesColor1active {background-image: url('../img/mat-standard_wave-black.png');}
#Simu .leftSide .imgWrap.seriesImg3active.seriesColor2, #Simu .leftSide .imgWrap.seriesImg3active.seriesColor2active {background-image: url('../img/mat-standard_wave-gray.png');}
#Simu .leftSide .imgWrap.seriesImg3active.seriesColor3, #Simu .leftSide .imgWrap.seriesImg3active.seriesColor3active {background-image: url('../img/mat-standard_wave-beige.png');}

/* SERIES4 スタンダード・ループ */
#Simu .leftSide .imgWrap.seriesImg4active.seriesColor1, #Simu .leftSide .imgWrap.seriesImg4active.seriesColor1active {background-image: url('../img/mat-standard_loop-black.png');}
#Simu .leftSide .imgWrap.seriesImg4active.seriesColor2, #Simu .leftSide .imgWrap.seriesImg4active.seriesColor2active {background-image: url('../img/mat-standard_loop-brown.png');}
#Simu .leftSide .imgWrap.seriesImg4active.seriesColor3, #Simu .leftSide .imgWrap.seriesImg4active.seriesColor3active {background-image: url('../img/mat-standard_loop-beige.png');}
#Simu .leftSide .imgWrap.seriesImg4active.seriesColor4, #Simu .leftSide .imgWrap.seriesImg4active.seriesColor4active {background-image: url('../img/mat-standard_loop-pink.png');}

/* SERIES5 スタンダード・ドライブ */
#Simu .leftSide .imgWrap.seriesImg5active.seriesColor1, #Simu .leftSide .imgWrap.seriesImg5active.seriesColor1active {background-image: url('../img/mat-standard_drive-black.png');}
#Simu .leftSide .imgWrap.seriesImg5active.seriesColor2, #Simu .leftSide .imgWrap.seriesImg5active.seriesColor2active {background-image: url('../img/mat-standard_drive-red.png');}

/* SERIES6 チェック・ポップ */
#Simu .leftSide .imgWrap.seriesImg6active.seriesColor1, #Simu .leftSide .imgWrap.seriesImg6active.seriesColor1active {background-image: url('../img/mat-check_pop-rose.png');}
#Simu .leftSide .imgWrap.seriesImg6active.seriesColor2, #Simu .leftSide .imgWrap.seriesImg6active.seriesColor2active {background-image: url('../img/mat-check_pop-white.png');}
#Simu .leftSide .imgWrap.seriesImg6active.seriesColor3, #Simu .leftSide .imgWrap.seriesImg6active.seriesColor3active {background-image: url('../img/mat-check_pop-gray.png');}
#Simu .leftSide .imgWrap.seriesImg6active.seriesColor4, #Simu .leftSide .imgWrap.seriesImg6active.seriesColor4active {background-image: url('../img/mat-check_pop-blue.png');}
#Simu .leftSide .imgWrap.seriesImg6active.seriesColor5, #Simu .leftSide .imgWrap.seriesImg6active.seriesColor5active {background-image: url('../img/mat-check_pop-red.png');}
#Simu .leftSide .imgWrap.seriesImg6active.seriesColor6, #Simu .leftSide .imgWrap.seriesImg6active.seriesColor6active {background-image: url('../img/mat-check_pop-yellow.png');}

/* SERIES7 チェック・アーバン */
#Simu .leftSide .imgWrap.seriesImg7active.seriesColor1, #Simu .leftSide .imgWrap.seriesImg7active.seriesColor1active {background-image: url('../img/mat-check_urban-rose.png');}
#Simu .leftSide .imgWrap.seriesImg7active.seriesColor2, #Simu .leftSide .imgWrap.seriesImg7active.seriesColor2active {background-image: url('../img/mat-check_urban-white.png');}
#Simu .leftSide .imgWrap.seriesImg7active.seriesColor3, #Simu .leftSide .imgWrap.seriesImg7active.seriesColor3active {background-image: url('../img/mat-check_urban-gray.png');}
#Simu .leftSide .imgWrap.seriesImg7active.seriesColor4, #Simu .leftSide .imgWrap.seriesImg7active.seriesColor4active {background-image: url('../img/mat-check_urban-blue.png');}
#Simu .leftSide .imgWrap.seriesImg7active.seriesColor5, #Simu .leftSide .imgWrap.seriesImg7active.seriesColor5active {background-image: url('../img/mat-check_urban-red.png');}
#Simu .leftSide .imgWrap.seriesImg7active.seriesColor6, #Simu .leftSide .imgWrap.seriesImg7active.seriesColor6active {background-image: url('../img/mat-check_urban-orange.png');}
#Simu .leftSide .imgWrap.seriesImg7active.seriesColor7, #Simu .leftSide .imgWrap.seriesImg7active.seriesColor7active {background-image: url('../img/mat-check_urban-pink.png');}
#Simu .leftSide .imgWrap.seriesImg7active.seriesColor8, #Simu .leftSide .imgWrap.seriesImg7active.seriesColor8active {background-image: url('../img/mat-check_urban-brown.png');}
#Simu .leftSide .imgWrap.seriesImg7active.seriesColor9, #Simu .leftSide .imgWrap.seriesImg7active.seriesColor9active {background-image: url('../img/mat-check_urban-beige.png');}

/* SERIES8 クロス */
#Simu .leftSide .imgWrap.seriesImg8active.seriesColor1, #Simu .leftSide .imgWrap.seriesImg8active.seriesColor1active {background-image: url('../img/mat-cross_black.png');}
#Simu .leftSide .imgWrap.seriesImg8active.seriesColor2, #Simu .leftSide .imgWrap.seriesImg8active.seriesColor2active {background-image: url('../img/mat-cross_blue.png');}
#Simu .leftSide .imgWrap.seriesImg8active.seriesColor3, #Simu .leftSide .imgWrap.seriesImg8active.seriesColor3active {background-image: url('../img/mat-cross_red.png');}
#Simu .leftSide .imgWrap.seriesImg8active.seriesColor4, #Simu .leftSide .imgWrap.seriesImg8active.seriesColor4active {background-image: url('../img/mat-cross_rose.png');}
#Simu .leftSide .imgWrap.seriesImg8active.seriesColor5, #Simu .leftSide .imgWrap.seriesImg8active.seriesColor5active {background-image: url('../img/mat-cross_silver.png');}
#Simu .leftSide .imgWrap.seriesImg8active.seriesColor6, #Simu .leftSide .imgWrap.seriesImg8active.seriesColor6active {background-image: url('../img/mat-cross_yellow.png');}

/* SERIES9 プレミアム */
#Simu .leftSide .imgWrap.seriesImg9active.seriesColor1, #Simu .leftSide .imgWrap.seriesImg9active.seriesColor1active {background-image: url('../img/mat-premium_black.png');}
#Simu .leftSide .imgWrap.seriesImg9active.seriesColor2, #Simu .leftSide .imgWrap.seriesImg9active.seriesColor2active {background-image: url('../img/mat-premium_dark-red.png');}
#Simu .leftSide .imgWrap.seriesImg9active.seriesColor3, #Simu .leftSide .imgWrap.seriesImg9active.seriesColor3active {background-image: url('../img/mat-premium_gray.png');}
#Simu .leftSide .imgWrap.seriesImg9active.seriesColor4, #Simu .leftSide .imgWrap.seriesImg9active.seriesColor4active {background-image: url('../img/mat-premium_beige.png');}
#Simu .leftSide .imgWrap.seriesImg9active.seriesColor5, #Simu .leftSide .imgWrap.seriesImg9active.seriesColor5active {background-image: url('../img/mat-premium_mix-gray.png');}
#Simu .leftSide .imgWrap.seriesImg9active.seriesColor6, #Simu .leftSide .imgWrap.seriesImg9active.seriesColor6active {background-image: url('../img/mat-premium_mix-beige.png');}

/* SERIES10 ラバー */
#Simu .leftSide .imgWrap.seriesImg10active.seriesColor1, #Simu .leftSide .imgWrap.seriesImg10active.seriesColor1active {background-image: url('../img/mat-rubber.png');}

/* PAD IMG ヒールパッド形状　*/
#Simu .leftSide .padWrap.padImg1, #Simu .leftSide .padWrap.padImg1active {background-image: url('../img/pad-normal.png');}
#Simu .leftSide .padWrap.padImg2, #Simu .leftSide .padWrap.padImg2active {background-image: url('../img/pad-wide.png');}
#Simu .leftSide .padWrap.padImg3, #Simu .leftSide .padWrap.padImg3active {background-image: url('../img/pad-manual.png');}
#Simu .leftSide .padWrap.padImg4, #Simu .leftSide .padWrap.padImg4active {background-image: url('../img/pad-organ.png');}


/* PAD COLOR */
/* ノーマル */
#Simu .leftSide .padWrap.padImg1active.padColor1, #Simu .leftSide .padWrap.padImg1active.padColor1active  {background-image: url('../img/pad-normal_darkgray.png');}
#Simu .leftSide .padWrap.padImg1active.padColor2, #Simu .leftSide .padWrap.padImg1active.padColor2active  {background-image: url('../img/pad-normal_gray.png');}
#Simu .leftSide .padWrap.padImg1active.padColor3, #Simu .leftSide .padWrap.padImg1active.padColor3active  {background-image: url('../img/pad-normal_black.png');}
#Simu .leftSide .padWrap.padImg1active.padColor4, #Simu .leftSide .padWrap.padImg1active.padColor4active  {background-image: url('../img/pad-normal_beige.png');}
#Simu .leftSide .padWrap.padImg1active.padColor5, #Simu .leftSide .padWrap.padImg1active.padColor5active  {background-image: url('../img/pad-normal_brown.png');}
#Simu .leftSide .padWrap.padImg1active.padColor6, #Simu .leftSide .padWrap.padImg1active.padColor6active  {background-image: url('../img/pad-normal_pink.png');}
#Simu .leftSide .padWrap.padImg1active.padColor7, #Simu .leftSide .padWrap.padImg1active.padColor7active  {background-image: url('../img/pad-normal_red.png');}

/* ワイド */
#Simu .leftSide .padWrap.padImg2active.padColor1, #Simu .leftSide .padWrap.padImg2active.padColor1active  {background-image: url('../img/pad-wide_darkgray.png');}
#Simu .leftSide .padWrap.padImg2active.padColor2, #Simu .leftSide .padWrap.padImg2active.padColor2active  {background-image: url('../img/pad-wide_gray.png');}
#Simu .leftSide .padWrap.padImg2active.padColor3, #Simu .leftSide .padWrap.padImg2active.padColor3active  {background-image: url('../img/pad-wide_black.png');}
#Simu .leftSide .padWrap.padImg2active.padColor4, #Simu .leftSide .padWrap.padImg2active.padColor4active  {background-image: url('../img/pad-wide_beige.png');}
#Simu .leftSide .padWrap.padImg2active.padColor5, #Simu .leftSide .padWrap.padImg2active.padColor5active  {background-image: url('../img/pad-wide_brown.png');}
#Simu .leftSide .padWrap.padImg2active.padColor6, #Simu .leftSide .padWrap.padImg2active.padColor6active  {background-image: url('../img/pad-wide_pink.png');}
#Simu .leftSide .padWrap.padImg2active.padColor7, #Simu .leftSide .padWrap.padImg2active.padColor7active  {background-image: url('../img/pad-wide_red.png');}

/* マニュアル */
#Simu .leftSide .padWrap.padImg3active.padColor1, #Simu .leftSide .padWrap.padImg3active.padColor1active  {background-image: url('../img/pad-manual_darkgray.png');}
#Simu .leftSide .padWrap.padImg3active.padColor2, #Simu .leftSide .padWrap.padImg3active.padColor2active  {background-image: url('../img/pad-manual_gray.png');}
#Simu .leftSide .padWrap.padImg3active.padColor3, #Simu .leftSide .padWrap.padImg3active.padColor3active  {background-image: url('../img/pad-manual_black.png');}
#Simu .leftSide .padWrap.padImg3active.padColor4, #Simu .leftSide .padWrap.padImg3active.padColor4active  {background-image: url('../img/pad-manual_beige.png');}
#Simu .leftSide .padWrap.padImg3active.padColor5, #Simu .leftSide .padWrap.padImg3active.padColor5active  {background-image: url('../img/pad-manual_brown.png');}
#Simu .leftSide .padWrap.padImg3active.padColor6, #Simu .leftSide .padWrap.padImg3active.padColor6active  {background-image: url('../img/pad-manual_pink.png');}
#Simu .leftSide .padWrap.padImg3active.padColor7, #Simu .leftSide .padWrap.padImg3active.padColor7active  {background-image: url('../img/pad-manual_red.png');}

/* オルガンペダル */
#Simu .leftSide .padWrap.padImg4active.padColor1, #Simu .leftSide .padWrap.padImg4active.padColor1active  {background-image: url('../img/pad-organ_darkgray.png');}
#Simu .leftSide .padWrap.padImg4active.padColor2, #Simu .leftSide .padWrap.padImg4active.padColor2active  {background-image: url('../img/pad-organ_gray.png');}
#Simu .leftSide .padWrap.padImg4active.padColor3, #Simu .leftSide .padWrap.padImg4active.padColor3active  {background-image: url('../img/pad-organ_black.png');}
#Simu .leftSide .padWrap.padImg4active.padColor4, #Simu .leftSide .padWrap.padImg4active.padColor4active  {background-image: url('../img/pad-organ_beige.png');}
#Simu .leftSide .padWrap.padImg4active.padColor5, #Simu .leftSide .padWrap.padImg4active.padColor5active  {background-image: url('../img/pad-organ_brown.png');}
#Simu .leftSide .padWrap.padImg4active.padColor6, #Simu .leftSide .padWrap.padImg4active.padColor6active  {background-image: url('../img/pad-organ_pink.png');}
#Simu .leftSide .padWrap.padImg4active.padColor7, #Simu .leftSide .padWrap.padImg4active.padColor7active  {background-image: url('../img/pad-organ_red.png');}

/* LOCK IMG */
#Simu .leftSide .lockWrap.lockImg1, #Simu .leftSide .lockWrap.lockImg1active {background-image: url('../img/lock-yellow.png');}
#Simu .leftSide .lockWrap.lockImg2, #Simu .leftSide .lockWrap.lockImg2active {background-image: url('../img/lock-orange.png');}
#Simu .leftSide .lockWrap.lockImg3, #Simu .leftSide .lockWrap.lockImg3active {background-image: url('../img/lock-red.png');}
#Simu .leftSide .lockWrap.lockImg4, #Simu .leftSide .lockWrap.lockImg4active {background-image: url('../img/lock-gray.png');}
#Simu .leftSide .lockWrap.lockImg5, #Simu .leftSide .lockWrap.lockImg5active {background-image: url('../img/lock-sky-blue.png');}
#Simu .leftSide .lockWrap.lockImg6, #Simu .leftSide .lockWrap.lockImg6active {background-image: url('../img/lock-dark-blue.png');}
#Simu .leftSide .lockWrap.lockImg7, #Simu .leftSide .lockWrap.lockImg7active {background-image: url('../img/lock-pink.png');}
#Simu .leftSide .lockWrap.lockImg8, #Simu .leftSide .lockWrap.lockImg8active {background-image: url('../img/lock-rose.png');}
#Simu .leftSide .lockWrap.lockImg9, #Simu .leftSide .lockWrap.lockImg9active {background-image: url('../img/lock-brown.png');}
#Simu .leftSide .lockWrap.lockImg10, #Simu .leftSide .lockWrap.lockImg10active {background-image: url('../img/lock-white.png');}
#Simu .leftSide .lockWrap.lockImg11, #Simu .leftSide .lockWrap.lockImg11active {background-image: url('../img/lock-beige.png');}
#Simu .leftSide .lockWrap.lockImg12, #Simu .leftSide .lockWrap.lockImg12active {background-image: url('../img/lock-black.png');}

/* STITCH IMG */
#Simu .leftSide .stitchWrap.stitchImg1, #Simu .leftSide .stitchWrap.stitchImg1active {background-image: url('../img/stitch-yellow.png');}
#Simu .leftSide .stitchWrap.stitchImg2, #Simu .leftSide .stitchWrap.stitchImg2active {background-image: url('../img/stitch-orange.png');}
#Simu .leftSide .stitchWrap.stitchImg3, #Simu .leftSide .stitchWrap.stitchImg3active {background-image: url('../img/stitch-red.png');}
#Simu .leftSide .stitchWrap.stitchImg4, #Simu .leftSide .stitchWrap.stitchImg4active {background-image: url('../img/stitch-pink.png');}
#Simu .leftSide .stitchWrap.stitchImg5, #Simu .leftSide .stitchWrap.stitchImg5active {background-image: url('../img/stitch-rose.png');}
#Simu .leftSide .stitchWrap.stitchImg6, #Simu .leftSide .stitchWrap.stitchImg6active {background-image: url('../img/stitch-white.png');}
#Simu .leftSide .stitchWrap.stitchImg7, #Simu .leftSide .stitchWrap.stitchImg7active {background-image: url('../img/stitch-brown.png');}
#Simu .leftSide .stitchWrap.stitchImg8, #Simu .leftSide .stitchWrap.stitchImg8active {background-image: url('../img/stitch-blue.png');}
#Simu .leftSide .stitchWrap.stitchImg9, #Simu .leftSide .stitchWrap.stitchImg9active {background-image: url('../img/stitch-black.png');}


/*---------------------------------------------------
	RIGHT
---------------------------------------------------*/
#Simu .rightSide {float: right; padding: 1em; width: calc(40% - 3em); height: calc(100% - 2em); box-shadow:none;}
#Simu .rightSide h2 {color: dimgray; font-weight: bold; padding: 0; margin-bottom: 1em;}
#Simu .rightSide h2:after {content:''; clear: both; display: block;}
#Simu .rightSide h2 i {color: white; background-color: dimgray; padding: .5em; border-radius: .5em; font-style: normal;}
#Simu .rightSide h2 i.back:hover {background-color: crimson; cursor: pointer;}
#Simu .rightSide ul {width: calc(100% - 1em); height: calc(100% - 4em); padding: .5em .5em 0 .5em; margin: 0; overflow-y: scroll; background-color: whitesmoke; position: relative;}
#Simu .rightSide ul li {width: calc(100% - 2px); padding: 0; margin: 0; font-weight: bold; border-bottom: 1px solid gainsboro; position: relative; -webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -o-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out;}
#Simu .rightSide ul li img {width: 3.5em; max-width: 35px; display: inline-block; vertical-align: middle; padding: .5em; margin: 0;}
#Simu .rightSide ul li:after {display: inline-block; position: absolute; right: 1em; top: 1.2em; content: '\f054'; font-family: 'Font Awesome 5 Free';}
#Simu .rightSide ul li:hover {cursor: pointer; background-color: gainsboro;}
#zerSimu .rightSide .txtWrap dl dt, #zerSimu .rightSide .txtWrap dl dd {padding: .5em; margin: 0; vertical-align: bottom; border-bottom: 1px solid gainsboro;}

#Simu .rightSide .txtWrap dl {display: flex; flex-wrap: wrap; align-items: flex-end;}
#Simu .rightSide .txtWrap dl dt {float: left; width: 35%; position: relative;}
#Simu .rightSide .txtWrap dl dt:after {content:'：　'; position: absolute; right: 0;}
#Simu .rightSide .txtWrap dl dd {float: right; width: 65%; font-weight: bold;}
#Simu .matSeries:not('.active'), #Simu .matColor ul:not('.active') {display: none;}

#Simu .rightSide h2 {color: #fff;  margin-bottom: 0; background: #000; border-top: 3px solid #d70028; padding: 0.7em 0.7em 0.7em 1.5em; position: relative;}

#Simu .rightSide h2 i {position: absolute; right: calc(0.5em); top: calc(0.7em - 0.5em + 4px);}
#Simu .rightSide h2 i.refresh {right: calc(6em + 0.5em + 0.5em + 0.5em);}
#Simu .rightSide.padShape h2 i.refresh {right: calc(0.5em);}
#Simu .rightSide h2 i.refresh:hover {background-color: #1281ce; cursor: pointer;}

#Simu .rightSide .txtWrap {margin-top: 20px; background: #ffffffab; padding: 20px; box-sizing: border-box; overflow-y: scroll; z-index: 1000; position: relative; height: calc(100% - 4em);}
#Simu .rightSide .txtWrap dl dt {margin-bottom: 0.5em;}
#Simu .rightSide .txtWrap dl dd {margin-bottom: 0.5em;}

#Simu article {background-color: transparent;}
#Simu article::before {content: ""; position: absolute; width: 100%; height: 100%; right: 0; top: 0; background-position: 0 0; background-size: cover; z-index: 0; background: #ffffffab;}
#Simu article::after {content: ""; position: absolute; width: 100%; height: 100%; right: 0; top: 0; background-image: url("../img/simu_contents_back.png"); background-repeat: no-repeat; background-position: 250px 0; background-size: cover; z-index: -1;}

#Simu .rightSide ul {background-color: #f5f5f594;}
#Simu {background-color: rgb(89 62 6 / 75%);}
#Simu::after {content: ""; position: absolute; width: 100%; height: 100%; right: 0; top: 0; background-image: url("../img/simu_back.png"); background-repeat: no-repeat; background-position: 225px 0; background-size: cover; z-index: -2;}

#Simu .rightSide .txtWrap dl {justify-content: flex-start; flex-direction: row; position: relative; margin-bottom: 20px;}
#Simu .rightSide .txtWrap dl dt {flex-basis: 10em; color: #555;}
#Simu .rightSide .txtWrap dl dd {flex-basis: calc(100% - 10em);}
#Simu .rightSide .txtWrap dl dt:after {content: '：';}

#Simu .rightSide.complete .txtWrap a img {width: 100%; z-index: 200; position: relative;}
#Simu .rightSide.complete .txtWrap a:hover img {opacity: 0.6;}


/* SERIES TEXT */
/*
#Simu .complete .series1:before {content:'スタンダード・スクエア';}
#Simu .complete .series2:before {content:'スタンダード・エクセレント';}
#Simu .complete .series3:before {content:'スタンダード・ウェーブ';}
#Simu .complete .series4:before {content:'スタンダード・ループ';}
#Simu .complete .series5:before {content:'スタンダード・ドライブ';}
#Simu .complete .series6:before {content:'チェック・ポップ';}
#Simu .complete .series7:before {content:'チェック・アーバン';}
#Simu .complete .series8:before {content:'クロス';}
#Simu .complete .series9:before {content:'プレミアム';}
#Simu .complete .series10:before {content:'ラバー';}
*/
/* COLOR NAME - スタンダード・スクエア */
/*
#Simu .complete .series1.color1:before {content:'ブラック';}
#Simu .complete .series1.color2:before {content:'グレー';}
*/
/* COLOR NAME - スタンダード・エクセレント */
/*
#Simu .complete .series2.color1::before {content:'ブラック';}
#Simu .complete .series2.color2::before {content:'グレー';}
#Simu .complete .series2.color3::before {content:'ベージュ';}
*/
/* COLOR NAME - スタンダード・ウェーブ */
/*
#Simu .complete .series3.color1::before {content:'ブラック';}
#Simu .complete .series3.color2::before {content:'グレー';}
#Simu .complete .series3.color3::before {content:'ベージュ';}

/* COLOR NAME - スタンダード・ループ */
/*
#Simu .complete .series4.color1::before {content:'ブラック';}
#Simu .complete .series4.color2::before {content:'ブラウン';}
#Simu .complete .series4.color3::before {content:'ベージュ';}
#Simu .complete .series4.color4::before {content:'ピンク';}
*/
/* COLOR NAME - スタンダード・ドライブ */
/*
#Simu .complete .series5.color1::before {content:'ブラック';}
#Simu .complete .series5.color2::before {content:'レッド';}
*/
/* COLOR NAME - チェック・ポップ */
/*
#Simu .complete .series6.color1::before {content:'ローズ';}
#Simu .complete .series6.color2::before {content:'ホワイト';}
#Simu .complete .series6.color3::before {content:'グレー';}
#Simu .complete .series6.color4::before {content:'ブルー';}
#Simu .complete .series6.color5::before {content:'レッド';}
#Simu .complete .series6.color6::before {content:'イエロー';}
*/
/* COLOR NAME - チェック・アーバン */
/*
#Simu .complete .series7.color1::before {content:'ローズ';}
#Simu .complete .series7.color2::before {content:'ホワイト';}
#Simu .complete .series7.color3::before {content:'グレー';}
#Simu .complete .series7.color4::before {content:'ブルー';}
#Simu .complete .series7.color5::before {content:'レッド';}
#Simu .complete .series7.color6::before {content:'オレンジ';}
#Simu .complete .series7.color7::before {content:'ピンク';}
#Simu .complete .series7.color8::before {content:'ブラウン';}
#Simu .complete .series7.color9::before {content:'ベージュ';}

/* COLOR NAME - クロス */
/*#Simu .complete .series8.color1::before {content:'ブラック';}
#Simu .complete .series8.color2::before {content:'ブルー';}
#Simu .complete .series8.color3::before {content:'レッド';}
#Simu .complete .series8.color4::before {content:'ローズ';}
#Simu .complete .series8.color5::before {content:'シルバー';}
#Simu .complete .series8.color6::before {content:'レッド';}

/* COLOR NAME - プレミアム */
/*
#Simu .complete .series9.color1::before {content:'ブラック';}
#Simu .complete .series9.color2::before {content:'ダークレッド';}
#Simu .complete .series9.color3::before {content:'グレー';}
#Simu .complete .series9.color3::before {content:'ベージュ';}
#Simu .complete .series9.color3::before {content:'ミックスグレー';}
#Simu .complete .series9.color3::before {content:'ミックスベージュ';}
*/
/* COLOR NAME - ラバー */
/*
#Simu .complete .series10.color1::before {content:'ラジアルブラック';}
*/
/* PAD shape */
/*
#Simu .complete .shape.pad1::before {content:'ノーマル';}
#Simu .complete .shape.pad2::before {content:'ワイド';}
#Simu .complete .shape.pad3::before {content:'マニュアル';}
#Simu .complete .shape.pad4::before {content:'オルガンペダル';}
*/
/* PAD COLOR */
/*
#Simu .complete .pad.pad1::before {content:'ダークグレー';}
#Simu .complete .pad.pad2::before {content:'グレー';}
#Simu .complete .pad.pad3::before {content:'ブラック';}
#Simu .complete .pad.pad4::before {content:'ベージュ';}
#Simu .complete .pad.pad5::before {content:'ブラウン';}
#Simu .complete .pad.pad6::before {content:'ピンク';}
#Simu .complete .pad.pad7::before {content:'レッド';}
*/
/* LOCK COLOR */
/*
#Simu .complete .lock.lock1::before {content:'イエロー';}
#Simu .complete .lock.lock2::before {content:'オレンジ';}
#Simu .complete .lock.lock3::before {content:'レッド';}
#Simu .complete .lock.lock4::before {content:'グレー';}
#Simu .complete .lock.lock5::before {content:'スカイブルー';}
#Simu .complete .lock.lock6::before {content:'ダークブルー';}
#Simu .complete .lock.lock7::before {content:'ピンク';}
#Simu .complete .lock.lock8::before {content:'ローズ';}
#Simu .complete .lock.lock9::before {content:'ブラウン';}
#Simu .complete .lock.lock10::before {content:'ホワイト';}
#Simu .complete .lock.lock11::before {content:'ベージュ';}
#Simu .complete .lock.lock12::before {content:'ブラック';}
*/
/* stitch COLOR */
/*
#Simu .complete .stitch.stitch1::before {content:'イエロー';}
#Simu .complete .stitch.stitch2::before {content:'オレンジ';}
#Simu .complete .stitch.stitch3::before {content:'レッド';}
#Simu .complete .stitch.stitch4::before {content:'ピンク';}
#Simu .complete .stitch.stitch5::before {content:'ローズ';}
#Simu .complete .stitch.stitch6::before {content:'ホワイト';}
#Simu .complete .stitch.stitch7::before {content:'ブラウン';}
#Simu .complete .stitch.stitch8::before {content:'ブルー';}
#Simu .complete .stitch.stitch9::before {content:'ブラック';}
*/

.caption {position: fixed; bottom: 0; text-align: center; width: 100%; line-height: 1.2em; color: #fff; z-index: 100; text-shadow: 0 0 7px #000, 0 0 1px #000, 0 0 3px #000;}
.caption a {color: #fff; cursor: pointer;}
.caption a:hover {font-weight: bold; color: #0e3463; cursor: pointer; text-shadow: 0 0 7px #fff, 0 0 1px #fff, 0 0 3px #fff;}

/*-------------------------------------------------------------------
 OVER WIDTH 1080px for DESKTOP
---------------------------------------------------------------------*/
@media screen and (min-width:1080px) {
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, 
p, blockquote, pre, a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, 
sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td, input, select, textarea, 
header, footer, menu {font-size: 13px;}
}

@media screen and (max-width:900px) {
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, 
p, blockquote, pre, a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, 
sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td, input, select, textarea, 
header, footer, menu {font-size: 13px;}
#Simu .leftSide .imgWrap .padWrap {width: 100%; height: 100%; position: absolute; right: 0; top: 0;}
}

/*-------------------------------------------------------------------
 UNDER WIDTH 680px for TABLET & SMARTPHONE
---------------------------------------------------------------------*/
@media screen and (max-width:665px) {
/* COMMON -----------------------------*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, 
p, blockquote, pre, a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, 
sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td, input, select, textarea, 
header, footer, menu {font-size: 13px;}

#Simu article {width: calc(100% - 2em); height: calc(100% - 7em); position: relative; top: 1em; bottom: 0; left: 0; right: 0; padding: .5em; margin: 0 auto; max-width: 800px; background-color: white; border-radius: 10px; box-sizing: border-box;}
#Simu section.leftSide, #Simu section.rightSide {float: none;}

#Simu .leftSide {width: 100%; height: 65%!important; background-color: pink;}
#Simu .leftSide .imgWrap {background-size: auto 100%;}

#Simu .leftSide .imgWrap .lockWrap {background-size: auto 100%;}
#Simu .leftSide .imgWrap .stitchWrap {background-size: auto 100%;}

#Simu .rightSide {width: 100%; height: calc(35%); padding: .5em .5em 1em .5em; box-sizing: border-box; overflow: hidden;}
#Simu .rightSide ul {width: calc(100%); box-sizing: border-box; z-index: 300; position: relative;}
#Simu .rightSide ul li {float: left; width: calc(100% / 5); text-align: center; border-bottom: none;}
#Simu .rightSide.complete h2 {padding: 0.7em 0.7em 2.7em 1.5em;}
#Simu .rightSide.complete h2 i {top: unset; bottom: 6px;}
#Simu .rightSide .txtWrap {overflow-y: scroll; z-index: 300; position: relative; height: 100%;}


#Simu .rightSide ul li:after {display: none;}
#Simu .rightSide ul li span {display: none;}
#Simu .rightSide ul li img {width: calc(100% - 1em); padding: .5em; max-width: none;}
.caption {width: 95%; left: 50%; transform: translate(-50%, 0);}
    
/* 202308スマートフォンでの表示改変 */
#Simu .rightSide ul li {display: flex; width: calc(100%); align-items: center;}
#Simu .rightSide ul li img {width: calc(15% - 1em);}
#Simu .rightSide ul li span {display:block; flex-basis: 85%;}
}
/* 202308組み合わせ内容の表示の改修 */
#Simu .rightSide .txtWrap dl {align-items: flex-start;}