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

/*-----------------------------------------------------------------*/
/*初期設定*/
/*-----------------------------------------------------------------*/
a {
  color: inherit;
}
a[href^=tel] {
  color: inherit;
  text-decoration: none;
}
img {
  border-style: none;
}
.imgonly {
  font-size: 0px;
  line-height: 0px;
}
address {
  font-style: normal;
}
nav {
  display: block;
}
small {
  font-size: 80%;
}
.cf::after {
  display: block;
  clear: both;
  content: "";
}
.css-att {
  display: none;
}
.row, .rows > * {
  display: flex;
  justify-content: space-around;
  align-items: center;
  align-content: center;
}
.row > *, .rows > * > * {
  flex: 1 0 0%;
}
.col, .cols > * {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
  align-content: center;
}
.row.fixedrow {
  align-items: flex-start;
}
.row.fixedrow > * {
  flex: 1 0 0%;
}
.row.fixedrow > * + * {
  margin-left: 15px;
}
@media (max-device-width: 500px) and (orientation : landscape),(min-device-width: 501px) and (max-device-width: 900px) and (min-width: 401px),(min-device-width: 901px) and (min-width: 501px) {
  * {
    max-width: 100%;
  }
  .only-m {
    display: none;
  }
  .pc-row, .pc-rows > * {
    display: flex;
    justify-content: space-around;
    align-items: center;
    align-content: center;
  }
  .pc-row > *, .pc-rows > * > * {
    flex: 1 0 0%;
  }
  .pc-col, .pc-cols > * {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: stretch;
    align-content: center;
  }
}
@media (max-device-width: 500px) and (orientation : portrait),(min-device-width: 501px) and (max-device-width: 900px) and (max-width: 400px),(min-device-width: 901px) and (max-width: 500px) {
  .only-pc {
    display: none;
  }
  main * {
    max-width: 100%;
  }
  .m-row, .m-rows > * {
    display: flex;
    justify-content: space-around;
    align-items: center;
    align-content: center;
  }
  .m-row > *, .m-rows > * > * {
    flex: 1 1 auto;
  }
  .m-col, .m-cols > * {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: stretch;
    align-content: center;
  }
}
.fit {
  flex: 0 0 auto !important;
}


.inr {
    width: 1000px !important;
    margin: auto !important;
}
@media screen and (min-width: 501px) {
  .canvas-ctn {
    width: 1000px;
    margin: 60px 0 30px;
    display: grid;
    grid-template-columns: 175px 175px 175px 175px 175px 175px;
    grid-template-rows: 100px 70px 70px 70px 70px 70px 70px 70px 70px 70px 70px 100px;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
      "l10a l000 l001 l002 l003 l10b"
      "l100 canvas canvas canvas canvas l200"
      "l101 canvas canvas canvas canvas l201"
      "l102 canvas canvas canvas canvas l202"
      "l103 canvas canvas canvas canvas l203"
      "l104 canvas canvas canvas canvas l204"
      "l105 canvas canvas canvas canvas l205"
      "l106 canvas canvas canvas canvas l206"
      "l107 canvas canvas canvas canvas l207"
      "l108 canvas canvas canvas canvas l208"
      "l109 canvas canvas canvas canvas l209"
      "l30a l300 l301 l302 l303 l30b";
    aspect-ratio: 105 / 90;
  }
  .canvas { grid-area: canvas; }
  .title { grid-area: title; }
  .l000 { grid-area: l000; }
  .l001 { grid-area: l001; }
  .l002 { grid-area: l002; }
  .l003 { grid-area: l003; }
  .l100 { grid-area: l100; }
  .l101 { grid-area: l101; }
  .l102 { grid-area: l102; }
  .l103 { grid-area: l103; }
  .l104 { grid-area: l104; }
  .l105 { grid-area: l105; }
  .l106 { grid-area: l106; }
  .l107 { grid-area: l107; }
  .l108 { grid-area: l108; }
  .l109 { grid-area: l109; }
  .l200 { grid-area: l200; }
  .l201 { grid-area: l201; }
  .l202 { grid-area: l202; }
  .l203 { grid-area: l203; }
  .l204 { grid-area: l204; }
  .l205 { grid-area: l205; }
  .l206 { grid-area: l206; }
  .l207 { grid-area: l207; }
  .l208 { grid-area: l208; }
  .l209 { grid-area: l209; }
  .l300 { grid-area: l300; }
  .l301 { grid-area: l301; }
  .l302 { grid-area: l302; }
  .l303 { grid-area: l303; }
  .colorchg,.colorchg ul {
    display: contents;
  }
  .canvas {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
  }
}
@media screen and (max-width: 500px) {
  .canvas-ctn {
    display: grid; 
    grid-template-columns: 1fr 1fr 1fr 1fr; 
    grid-template-rows: clamp(360px,100vw,500px) auto; 
    gap: 0px 0px; 
    grid-template-areas: 
      "canvas canvas canvas canvas"
      "l0 l1 l2 l3"; 
    margin-bottom: 30px;
  }
  .canvas { grid-area: canvas; }
  #l0 { grid-area: l0; }
  #l1 { grid-area: l1; }
  #l2 { grid-area: l2; }
  #l3 { grid-area: l3; }
  .canvas {
    width: 100%;
    height: clamp(360px,100vw,500px);
    position: relative;
    overflow: hidden;
  }
}
.canvas img {
  position: absolute;
	width: 100%;
	height: 100%;
	object-fit: contain;
	transform: scale(var(--scale));
  transition: all .8s ease-in-out;
}
.canvas img#layer3[src$="2.png"] {
  mix-blend-mode: multiply;
}
.canvas .scales {
  position: absolute;
  bottom: 10px;
  right: 10px;
}
#layer1,#layer1n, #layer2,#layer2n {
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
}
.colorchg li {
	text-align:center;
	padding: 5px;
}
.colorchg li[data-color-group]~li a {
	display: none;
}
.colorchg li[data-color-group="0"]~li a[data-color^="0"],
.colorchg li[data-color-group="1"]~li a[data-color^="1"],
.colorchg li[data-color-group="2"]~li a[data-color^="2"],
.colorchg li[data-color-group="3"]~li a[data-color^="3"],
.colorchg li[data-color-group="4"]~li a[data-color^="4"],
.colorchg li[data-color-group="5"]~li a[data-color^="5"],
.colorchg li[data-color-group="6"]~li a[data-color^="6"],
.colorchg li[data-color-group="7"]~li a[data-color^="7"],
.colorchg li[data-color-group="8"]~li a[data-color^="8"],
.colorchg li[data-color-group="9"]~li a[data-color^="9"]{
	display: flex !important;
}
.colorchg a {
	appearance: none;
	box-sizing:border-box;
	border: 1px solid #ddd;
	border-radius: 4px;
	padding: 2px 10px;
	text-decoration: none;
	font-size: 12px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 100%;
	text-align: center;
}
@media screen and (min-width: 501px) {
  .colorchg a {
	  width: calc(100% - 22px);
    margin: 0 10px;
  }
}
@media screen and (max-width: 500px) {
  .colorchg a {
    font-size: 7px;
  }
}
.colorchg a span {
    display: block;
    border-radius: 999px;
    background-color: #ddd;
    width: 24px;
    height: 24px;
	  margin-bottom: 10px;
    border: 1px solid #ddd;
}
.colorchg a br {
	display: none;
}
.colorchg a:hover,
.colorchg a.current {
    background: #eee;
}


.old-select{
    position: absolute;
    top: -9999px;
    left: -9999px;
}

/* New-Select */

.new-select{
    height: 50px;
    margin: auto;
    text-align: center;
    color: #444;
    line-height: 50px;
    position: relative;
}
@media screen and (min-width: 501px) {
  .new-select{
      width: 300px;
  }
}
@media screen and (max-width: 500px) {
  .new-select{
    margin-bottom: 5px;
  }
}
.new-select .selection:active{
    transform:         rotateX(42deg);
    -o-transform:      rotateX(42deg);
    -ms-transform:     rotateX(42deg);
    -moz-transform:    rotateX(42deg);
    -webkit-transform: rotateX(42deg);
    transform-style:         preserve-3d;
    -o-transform-style:      preserve-3d;
    -ms-transform-style:     preserve-3d;
    -moz-transform-style:    preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform-origin:         top;
    -o-transform-origin:      top;
    -ms-transform-origin:     top;
    -moz-transform-origin:    top;
    -webkit-transform-origin: top;
    transition:         transform         200ms ease-in-out;
    -o-transition:      -o-transform      200ms ease-in-out;
    -ms-transition:     -ms-transform     200ms ease-in-out;
    -moz-transition:    -moz-transform    200ms ease-in-out;
    -webkit-transition: -webkit-transform 200ms ease-in-out;
}

.new-select .selection{
    width: 100%;
    height: 100%;
    background-color: #fff;
    box-shadow: 0 1px 1px rgba(0,0,0,0.1);
    
    cursor: pointer;
    position: relative;
    z-index: 20; /* Doit être supérieur au nombre d'option */

    border-top: 1px solid #eee;
    
    transform:         rotateX(0deg);
    -o-transform:      rotateX(0deg);
    -ms-transform:     rotateX(0deg);
    -moz-transform:    rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    transform-style:         preserve-3d;
    -o-transform-style:      preserve-3d;
    -ms-transform-style:     preserve-3d;
    -moz-transform-style:    preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform-origin:         top;
    -o-transform-origin:      top;
    -ms-transform-origin:     top;
    -moz-transform-origin:    top;
    -webkit-transform-origin: top;
    transition:         transform         200ms ease-in-out;
    -o-transition:      -o-transform      200ms ease-in-out;
    -ms-transition:     -ms-transform     200ms ease-in-out;
    -moz-transition:    -moz-transform    200ms ease-in-out;
    -webkit-transition: -webkit-transform 200ms ease-in-out;
}

.new-select .selection p{
    width: calc(100% - 60px);
    position: relative;
    
    transition:         all 200ms ease-in-out;
    -o-transition:      all 200ms ease-in-out;
    -ms-transition:     all 200ms ease-in-out;
    -moz-transition:    all 200ms ease-in-out;
    -webkit-transition: all 200ms ease-in-out;
}


.new-select .selection:hover p, .new-select .selection.open p{
    color: #bdc3c7;
}

.new-select .selection i{
    display: block;
    width: 1px;
    height: 70%;
    position: absolute;
    right: -1px; top: 15%; bottom: 15%;
    border: none;
    background-color: #bbb;
}

.new-select .selection > span{
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 14px 8px 0 8px; /* Height: 14px / Width: 16px */
    border-color: #bbb transparent transparent transparent;
    
    position: absolute;
    top: 18px; /* 50 / 2 - 14 / 2 */
    right: 22px; /* 60 / 2 - 16 / 2 */
}
@media screen and (min-width: 501px) {
}
@media screen and (max-width: 500px) {
  .new-select .selection p{
      width: calc(100% - 20px);
  }
  .new-select .selection > span{
    right: 2px; /* 60 / 2 - 16 / 2 */
    transform: scale(0.6);
  }
}

.new-select .selection.open > span{
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 8px 14px 8px;
    border-color: transparent transparent #bbb transparent;
}

.new-option{
    text-align: center;
    background-color: #fff;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    position: relative;
    margin-top: 1px;
    
    position: absolute;
    left: 0; right: 0;
    
    transition:         all 300ms ease-in-out;
    -o-transition:      all 300ms ease-in-out;
    -ms-transition:     all 300ms ease-in-out;
    -moz-transition:    all 300ms ease-in-out;
    -webkit-transition: all 300ms ease-in-out;
}

.new-option p{
    width: calc(100% - 60px);
}

.new-option.reveal:hover{
    background-color: #444;
    color: #f5f5f5;
}





@media
(max-device-width: 500px) and (orientation : portrait),
(min-device-width: 501px) and (max-device-width: 900px) and (max-width: 400px),
(min-device-width: 901px) and (max-width: 700px)
{


}

@media
(min-device-width: 901px) and (max-width: 700px)
{
    
    

}