@charset "UTF-8";
/* ===================================
	File Name   : style.css
	Description : Base Layout CSS
	
	Update Description :
	[2024/06/01] 新規作成

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

/*===== ■0. Reset =====*/
/* * {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	box-sizing: border-box;
}

html {
	font-size: 62.5%;
}*/

/*========== Style Contents ==========

	1. Form / Common Items Setting
		- 3D View

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

/*===== ■1. Form / Common Items Setting =====*/

/* 3D View */
.main_3dView {
    position: relative;
    width: 100%;
    height: 600px;
    padding: 2em 0 0;
}
/* 3D View model-viewer */
.main_3dView model-viewer  {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    height: 500px;
    border-radius: 10px;
    /* border: 1px solid rgba(0, 0, 0, .26); */
    /* box-shadow: 4px 4px 0.4em 0.1em rgba(0, 0, 0, .5), -0.4em 0 1em rgba(0, 0, 0, .3);*/
    background-color: #fff;
}
.slot.poster button {
    opacity: 1;
}
.slot.poster.show button {
    opacity: 0.5;
}

/* 3D View model-viewer color select */
.main_3dView .select_color {
    position: absolute;
    bottom: 20px;
    right: 20px;
}
.main_3dView .select_color li {
    display: block;
    width: 24px;
    height: 24px;
    margin: 10px 22px;
    font-size: 1.6rem;
    font-weight: normal;
    line-height: 50px;
    text-align: center;
    color: #333;
    border-radius: 50%;
    border: 1px solid rgba(51, 51, 51, .3);
    cursor: pointer;
}
.main_3dView .select_color li span {
    color: transparent;
    font-size: 0.5em;
}
.main_3dView .select_color li.active {
    width: 48px;
    height: 48px;
    margin: 10px;
    pointer-events: none;
    box-shadow: none;
}
.main_3dView .select_color li:hover {
    width: 50px;
    height: 50px;
    margin: 10px;
    opacity: 0.5;
}
.main_3dView .select_color li.active span,
.main_3dView .select_color li:hover span {
    display: block;
    color: #333;
}
.main_3dView .select_color li.btn_gray {
    background: gray;
    span{
        color: #fff;
    }
}
.main_3dView .select_color li.btn_ivory {
    color: #333;
    background: ivory;
}
.main_3dView .select_color li.btn_white {
    color: #333;
    background: #fff;
}

@media only screen and (max-width: 768px){
    .main_3dView {
	width: 100%;
	max-height: max-content;
	padding: 30px 12px;
    }

    .main_3dView > .select_color {
	position: absolute;
	top: calc(50px + 10px);
	left: calc(20px + 10px);
    }
}