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



#zentai{
    margin: 0px auto;
    padding: 0px;
    width: 100%;
    height: 800px;
    margin-bottom:20px;
    background-color:#eee;
}


#GridItem1{grid-area: A;}/*カラー*/
#GridItem2{grid-area: B;}/*ユニット種類*/
#GridItem3{grid-area: C;}/*オプション*/
#GridItem4{grid-area: D;}/*壁面カラー*/
#GridItem5{grid-area: E;}/*プレビュー*/
#GridItem6{grid-area: F;}/*配置エリア*/
#GridItem7{grid-area: G;}/*完成ボタン*/



#GridItem1,
#GridItem2,
#GridItem3,
#GridItem4,
#GridItem5,
#GridItem6,
#GridItem7{
   display:flex; flex-direction:column;
   background-color:#FFF;
    }


#Gridlayout{
width:100%;
height:100%;

	display:grid;
	grid-template-columns: 7% 10% 15% 35% 28%;
	grid-template-rows: 400px 80px 220px;
	gap: 10px;
	justify-content: space-evenly;
	grid-template-areas: 
	"A C B E E"
	"A C B G D"
	"A C B F F";
	/*margin-bottom: 45px;*/
	
/*---------消えたり出たりする設定---------------*/
	transition: opacity 0.3s, visibility 0.3s;
	opacity: 1;
	visibility: visible;
}

/* --------------------------------------------*/


.select{
	outline: 5px dashed skyblue;
	outline-offset: -5px;
	position: relative;
}

.select::after {
  content: "×";
  position: absolute;
  text-align: center;
  top: -10%;
  left: calc(100% - 12px);
  width: 20px;
  height: 20px;
  background: white;
  border-radius: 50%;
  font-size: 14px;
  font-weight: bold;
  border: 2px solid black;
}


/*アイコンドラッグ禁止*/
.iroSentaku img, 
.asiSentaku img, 
.yukaSentaku img, 
.unitSentaku img, 
.tenbanSentaku img, 
.irokaeSentaku img{
   user-drag: none;
   -webkit-user-drag: none;
   -moz-user-select: none;
}

/*スライドバーだけテキスト選択禁止（）*/
.optionWrap input[type="range" i]{
  -webkit-user-select: none; /* Safari/旧Chrome */
  -ms-user-select: none;     /* 旧IE/Edge */
  user-select: none;         /* 標準 */
}


/*マウスオーバーしたときにBIGになる*/
.irosentaku img:hover ,
.asisentaku img:hover ,
.yukasentaku img:hover,
.unitSentaku img:hover,
.tenbanSentaku img:hover,
.irokaeSentaku img:hover
{transform: scale(1.1, 1.1);}

.icon_wrap{
 width:100%;
 flex:1;
 text-align:center;
 overflow-x: hidden; 
 overflow-y: scroll;
}

.irokaeSentaku,
.iroSentaku{
   display: flex; 
   flex-wrap: wrap; 
   justify-content: center;
}

.irokaeSentaku img,
.iroSentaku img{
   border-radius: 50%;
   display: inline-block;
   margin-bottom: 7px;
   width: 50px;
   height: 50px;
   transition: 0.1s; /*変化があったときにかかる時間*/
}


.unitSentaku div div{margin-bottom: 10px;}

.unitSentaku img{
    margin: 0 auto;
    transition: 0.1s; /*変化があったときにかかる時間*/
}

.idouX {opacity:0.3;}
.idouX img:hover{transform:none;}


.btnstr{font-size: clamp(9px, 1.8vw, 13px);}


#unitSentaku{
   position: relative;
   transition: 0.3s;
}

#StypeGroup,
#TtypeGroup{
position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.dispnone {
  display: none;
}

/* ---------ホバーで吹き出し-----------*/

.tooltip {
  position: absolute;
  background: #333;
  color: #fff;
  padding: 4px 6px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  z-index: 9999;
  pointer-events: none;

  /* 初期状態（非表示） */
  opacity: 0;
  /* transform: translateY(-5px);  少し上にずらす */
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.tooltip.show {
  /* 表示状態 */
  opacity: 1;
  transform: translateY(0); /* 元の位置に戻す */
}

/* ------------------------------------ */

.headline{
text-align: center;
font-family: "游明朝";
font-weight:bold;
font-size: 20px;
width: 100%;
margin-bottom: 5px;
border-top: solid 1px #0d5661;
border-bottom: solid 1px #0d5661;
color: #0d5661;
}

.headline.mini{font-size:15px;}

.headline.mini.sub{
  font-size:13px; 
  border-top: dotted 1px #0d5661;
  border-bottom: dotted 1px #0d5661;
  line-height: 1;
  margin-top: 5px;
  }
  
.headline.mini.borderless{
  border-top: none;
  border-bottom: none;
}



.optionWrap{
   margin-bottom:5px;
}

.optionWrap .sliderWrap,
.optionWrap .radioWrap{
   padding-left:10px;
   padding-right:10px;}

.optionWrap input[type="range" i]{width:100%;}

.scrollwrap{overflow-Y: scroll;}

#PreviewArea,
#PositionArea{
    width:95%;
    display: flex;
    flex-wrap: nowrap;
    flex: 1;
    overflow-x: scroll; 
    overflow-y: hidden;
    margin: 0 auto;
}

/*-----背景色設定-----*/

#colorPanel{
    position:absolute;
    width:180px;
    padding:10px;
    background:rgba(255,255,255,.95);
    border:1px solid gray;
    border-radius:8px;
    display:none;
    z-index:100;
}

#colorPanel input[type="range"]{
    width:100%;
}


/*--------------------*/


#PreviewArea{
    justify-content: center;
    perspective: 1000px; /* 奥行きを設定 */
    align-items: center;
    }

#PreviewArea #rotate_control,
#PreviewArea #groupA,
#PreviewArea #groupIN,
#PreviewArea #groupB{
display: flex;
align-items: flex-end;
transform-style: preserve-3d;
}

#PreviewArea #groupA div,
#PreviewArea #groupIN div,
#PreviewArea #groupB div{
    transform-style: preserve-3d;
    position: relative;
    }


#PreviewArea #rotate_control{transition: 0.3s; scale:1.5;}

#PreviewArea #rotate_control.rotate25{transform: rotateX(-25deg);}
#PreviewArea #rotate_control.rotate50{transform: rotateX(-50deg);}
#PreviewArea #rotate_control.rotate90{transform: rotateX(-90deg);}

#PreviewArea .tenban{
   display:block;
   position: absolute;
   transform: rotateX(-90deg);
   transform-origin: top;
   }

/*ｴﾝﾄﾞｺｰﾅｰ用の丸い天板*/
#PreviewArea .endcorner .tenban{
   clip-path: ellipse(99% 100% at 100% 100%);
   }

/*インコーナー用の5角形天板*/
#PreviewArea #groupIN .tenban{
  /*width: calc(50px * 100 / 30);
  height: calc(50px * 100 / 30);
  clip-path: polygon(35% 0%, 65% 0%, 85% 20%, 50% 55%, 15% 20%);*/
}
  
#PreviewArea #groupIN .tenban25{
  width: calc(38.9px * 100 / 30);
  height: calc(38.9px * 100 / 30);
  clip-path: polygon(35% 0%, 65% 0%, 78% 13%, 50% 42%, 22% 13%);
  left: -117%;
}

#PreviewArea #groupIN .tenban30{
  width: calc(38.9px * 100 / 30);
  height: calc(38.9px * 100 / 30);
  clip-path: polygon(35% 0%, 65% 0%, 82% 16%, 50% 47%, 19% 16%);
  left: -117%;
}

#PreviewArea #groupIN .tenban35{
  width: calc(38.9px * 100 / 30);
  height: calc(38.9px * 100 / 30);
  clip-path: polygon(35% 0%, 65% 0%, 85% 19%, 50% 55%, 16% 19%);
  left: -117%;
}

/*インコーナー用*/
#PreviewArea #groupIN .sokumenL{
    position: absolute;
    transform-origin: top left;
    transform: rotateY(-45deg) rotateZ(90deg);
    width: 100px;
    height: 48px;
}

#PreviewArea #groupIN .sokumenR{
    position: absolute;
    transform-origin: top left;
    transform: rotateY(225deg) rotateZ(90deg);
    width: 100px;
    height: 48px;
}

/*その他ユニット*/
#PreviewArea #groupA .sokumen{
    position: absolute;
    transform-origin: top left;
    transform: rotateY(-90deg) rotateZ(90deg);
    width: 100px;
    height: 48px;
}

#PreviewArea #groupB .sokumen{
    position: absolute;
    transform-origin: top left;
    transform: rotateY(270deg) rotateZ(90deg);
    width: 48px;
    height: 100px;
}

/*ｴﾝﾄﾞｺｰﾅｰ用*/
#PreviewArea .endcorner .unit{opacity:0;}
#PreviewArea #groupA .endcorner .syoumen,
#PreviewArea #groupB .endcorner .syoumen{transform: rotateY(-225deg) rotateZ(0deg);}
#PreviewArea .endcorner.hanten {transform: scaleX(-1);}

/*これがないと天板が消える*/
#groupA,
#groupIN,
#groupB{
  transform: translateZ(0);
}

#groupA.rotateL{
  transform: rotateY(45deg);
  transform-Origin: right;
  }
#groupB.rotateR{
  transform-style: preserve-3d;
  transform: rotateY(-45deg);
  transform-Origin: left;
  }



#PositionArea{
    align-items: flex-end;
    gap: 20px;
    padding-bottom: 20px;
    }
#PositionArea img{}

#PositionArea .habainfo{
    text-align:center;
    }

#PositionArea img{
    margin: 0 10px;
    }

#GridItem4,
#GridItem7{justify-content: center;}

.buttonFlex{display:flex; justify-content: space-evenly;}



/*--------------ガイドオーバーレイ---------------*/

/* お手 */
#hand {
  position: fixed;
  width: 50px;
  height: 50px;
  pointer-events: none;
  z-index: 9999;
  display: none;
  transform: translate(-50%, -50%);
}

#hand img {
    overflow: hidden;
    width: 50px;
    transform: rotate(-20deg);
}


/* hand の往復アニメーション */
@keyframes hand-move {
  0%   { transform: translate(-50%, -50%) translate(0); }
  10%  { transform: translate(-50%, -50%) translate(0); }
  40%  { transform: translate(-50%, -50%) translate(var(--move-x), var(--move-y)); }
  60%  { transform: translate(-50%, -50%) translate(var(--move-x), var(--move-y)); }
  90%  { transform: translate(-50%, -50%) translate(0); }
  100% { transform: translate(-50%, -50%) translate(0); }
}

#hand.animate {
  animation: hand-move 5s ease-in-out infinite;
}


/* 画面全体を暗くする */
#guide-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  z-index: 9997;
}

/* ハイライト枠 */
.guide-highlight {
  position: absolute;
  border: 3px solid #ffcc00;
  border-radius: 8px;
  box-shadow: 0 0 15px #ffcc00;
  display: none;
  z-index: 9998;
}

.hukidasi {
  position: fixed;
  max-width: 260px;
  padding: 12px 16px;
  color: #333333;
  background-color: #f2f6ff;
  border-radius: 8px;
  box-shadow: 6px 6px 10px rgba(160, 160, 160, 0.4);
  z-index: 99999;
  display: none;
  transform: translate(-50%, -50%);
  white-space: pre-line;
}


/*----------------アイテム一覧-----------------*/

#Itemlist {
    margin:10px;
}

#ItemListPreviewArea{
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
    margin: 10px 10px 30px 10px;
    justify-content: center;
}

a.ItemListlink{
  width:calc(100%/4);
  display: block;
  text-decoration: none;
  color: inherit;
  margin:5px;
}

.ItemListwrap{
  padding:10px 10px 20px 10px;
  border:solid 1px black;
  border-radius:10px;
  text-align: center;
  display:grid;
  align-items: center;
  justify-content: space-evenly;
  grid-template-areas:
        "A A"
        "B C"
        "D D"
}

.ItemListGridItem4.price{
  font-weight: bold;
  color: red;
}

.ItemListGridItem1{grid-area: A;}/*商品名*/
.ItemListGridItem2{grid-area: B;}/*画像*/
.ItemListGridItem3{grid-area: C;}/*オプション*/
.ItemListGridItem4{grid-area: D;}/*値段*/

.ItemListGridItem3 ul{
  list-style: none;
  text-align: left;
  padding-left:20px;
}


/*------------------------------------------------*/
/*                    SP                          */
/*------------------------------------------------*/

@media screen and (max-width: 768px) {

#zentai{width:100%; height:auto;}

#Gridlayout {
    height: auto;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 300px 60px auto 60px auto;
    grid-template-areas:
             "E"
             "G"
             "F"
             "D"
             "B"
             "A"
             "C";
   }

#GridItem6{border: 3px solid #0d5661;}

#PreviewArea #rotate_control{scale:1.5;}

.icon_wrap{
 overflow-x: scroll; 
 overflow-y: hidden;
 flex-direction: row;
}

.unitSentaku{height: 160px; margin: 0 5px 0 5px;}

#StypeGroup,#TtypeGroup,
.irokaeSentaku, .iroSentaku {
    display: flex;
    justify-content: flex-start;
    flex-wrap: nowrap;
}

#StypeGroup,#TtypeGroup{
    gap:20px;
    flex-wrap:wrap;
    }

.ItemListGridItem1{height:80px; align-content: center;}

#GridItem3 .scrollwrap{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap:10px;
    justify-content: center;
    overflow-Y: visible;
}

.optionWrap {
  width: 45%;
}

.unitSentaku.range-active img{
  transition: none !important;
}

.habainfo{font-size:0.8rem;}


#ItemListPreviewArea {
  align-items: center;
}

a.ItemListlink{
  width:45%;
}

.ItemListwrap{
  height: 330px;
  grid-template-areas:
        "A"
        "B"
        "C"
        "D"
}

a.ItemListlink.width160px{width:90%;}
a.ItemListlink.width160px .ItemListwrap ul{width: 100%; padding:0;}
a.ItemListlink.width160px .ItemListwrap li{
    width: 50%;
    margin: 0 auto;

}

} /*SP終*/