body{
	background:#fafafa;
}
body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color:#17387F;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  -webkit-transition: opacity .8s ease;
  transition: opacity .8s ease;
}
body.fadeout::after {
  opacity: 1;
}
#mainseg{
    margin-top:0px;
	margin-bottom:0px;
	border-radius:0px;
}
#headermenu a {
    color: #333333;
    cursor: pointer;
}
#mobilemenu{
    margin-top:0rem;
}
#headermenu{
    background-color: #fff;
    -webkit-box-shadow: 0 1px 2px 0 rgba(34,36,38,.15);
    box-shadow: 0 1px 2px 0 rgba(34,36,38,.15);
    border: 1px solid rgba(34,36,38,.15);
    border-bottom: 0px;
    margin-bottom: 1rem;
}
.slick-slide img {
    width: 100%;
}
.ui.header.topselectbtn {
	cursor: pointer;
    margin-top: 0px;
}
.productimg{
    width:100%;
}
.suit{
    cursor: pointer;
}
.legendcont {
    height: 18%;
    padding: .5rem;
    text-align: center;
}
.legendcont:hover{
        background-color: #efefef;
}
.legendimg {
    height: 100%;
}
#frontlegend{
    height: 100%;
}
#backlegend{
    height: 100%;
}
#legendbox{
	margin-top: -1rem;
}
.colorchoise {
    max-height: 40rem;
    overflow: auto;
}
.colorbtn,.recommendbtn{
    font-size: 0.8rem;
    padding: 0px!important;
    background-position: center!important;
}
.colorbtn:hover,.recommendbtn:hover{
    border: #efefef 1px solid;
}
.colorcont,.recommendcont{
	padding:.5rem!important;
}
#mainbox {
    margin: 0 auto;
}
#materialbox{
	margin-top:0;
}
#colorbox{
	margin-top:0;
}
.ui.segment.productname {
    position: absolute;
    bottom: calc(1rem + 1px);
    background: rgba(0,0,0,.3);
    width: calc(100% - 2rem - 1.5px);
    left: calc(1rem + 0.5px);
    color: #fff;
    height: 5rem;
    margin: 0rem;
    display: flex;
    align-items: center;
    border-radius: 0 0 .28571429rem .28571429rem;
}
img#logo {
    margin-top: 1rem;
    width: 250px;
}
@media only screen and (max-width: 767px){
	img#logo {
  	    margin-top: 1rem;
   		width: 150px;
	}
	#titlecontainer {
        padding: 0em;
    }
	.column.boxtopside{
		width:12.5%!important;
	}
	.column.boxtopcenter{
		width:75%!important;
	}
	#legendbox{
	    width: 25%!important;
	}
	.matdescbox{
	    padding-left: 0rem!important;
	}
	button#line>* {
        margin-top: -0.5em;
    }
    .legendcont.segment.ui{
        padding:0px;
    }
    .colorchoise {
        flex-wrap: nowrap !important;
        overflow-x: scroll !important;
       -webkit-overflow-scrolling: touch !important;
        overflow-scrolling: touch !important;
    }
    .colorchoise > .colorcont {
        flex: 0 0 30% !important;
    }
    .colorchoise > .colorcont.markcont{
        flex: 0 0 60% !important;
    }
    .recommendchoise {
        flex-wrap: nowrap !important;
        overflow-x: scroll !important;
        -webkit-overflow-scrolling: touch !important;
        overflow-scrolling: touch !important;
    }
    .recommendchoise > .recommendcont {
        flex: 0 0 30% !important;
    }
}
@media only screen and (max-width: 991px){
    .ui.segment.productname {
        bottom: calc(2rem + 1px);
    }
}
.ui.grid>.ui.segment.column.marklegendcont {
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}
img.marklegendimg {
    width: 100%;
}
#materialbox .ui.grid+.grid {
    margin-top: 1rem;
}
#frontmarklegend,#backmarklegend{
    margin-top: 0rem;

}
.canvasbox {
    position: relative;
}
.rollingbtn.toolbtn {
    position: absolute;
    bottom: 0px;
    right: 1rem;
}
button#capture,button#dicision,button#line,button#mailmodalopen{
    border-radius: 3rem;
    padding: 1.5rem 0rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
button#dicision {
    background-color: #333;
    color: #fff;
    
}
button#capture {
    background-color: #fff;
    color: #333;
    border: 1px solid #333;
}
button#line{
    background-color: #00B900;
    color: #fff;
    padding: .2rem 0rem;
}
button#mailmodalopen{
    background-color:#024987;
    color: #fff;
}

div#mailmodal {
    border-radius: 2em;
    text-align: center;
}
#mailmodal .header {
    border-top-left-radius: 1em;
    border-top-right-radius: 1em;
    background: #707070;
    color: #fff;
}
#mailmodal .content {
    border-bottom-left-radius: 1em;
    border-bottom-right-radius: 1em;
}
#mailmodal .ui.action.input {
    width: 50%;
}
#emailsuccess .header, #emailfail .header {
    background: inherit;
    color: inherit;
}

.ui.horizontal.divider.result-divider {
    padding: 1em 0;
}

button#line a{
    color: #fff;
}
button#optionbtn {
    background-color: #333;
    color: #fff;
    border-radius: 3rem;
    padding: 1.5rem 0rem;
}
img.ui.middle.aligned.tiny.image.line {
    height: 4rem;
    width: 4rem;
}
.backarrow,.backarrow:hover{
    color: inherit;
    cursor: pointer;
}
#productname{
    font-size:2.5rem;
}
#backarrow{
    cursor: pointer;
}
.palet{
	border-radius: 50%;
	border:1px solid #999;
	margin: 1rem auto;
	background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.column.colorcont {
    text-align: center;
}
.ui.segment.colorbtn,.ui.segment.recommendbtn  {
    background: #ededed;
}
.ui.segment.colorbtn:hover,.ui.segment.recommendbtn:hover {
    background: #ccc;
}
.markpalet{
	background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.paletres{
	border-radius: 50%;
	border:1px solid #999;
	width:50px;
	height:50px;
	background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.markpaletres{
    height: 50px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.optionbox .meta {
    margin-top: 1rem;
/*    font-size: 0.8rem;*/
    color: rgba(0,0,0,.6);
    font-weight: bold;
}
.ui.bulleted.list .list>.item:before, .ui.bulleted.list>.item:before, ul.ui.list li:before {
    content: '\2022';
}
button#randombtn {
    border-radius: 3rem;
    padding: 1.5rem 3rem;
    background-color: #e0e0e0;
    color: #333;
    border: 1px solid #333;
}
.ui.pointing.secondary.menu::-webkit-scrollbar {
    display: none;
}
.ui.secondary.pointing.menu {
    overflow-x: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
    cursor: pointer;
}

/** Common **/

/* for Microsoft Edge */
@supports (-ms-ime-align:auto) {
  .circular.ui.icon.grey.basic.button {
    margin-right:17px;
	margin-left:15px;
  }
	.ui.grid.row{
	margin-top:5px;
	}
}

.ui.container{
	width:100% !important;
}

#headermenu{
    padding-left: 20px;
    padding-right: 20px;
}

#mainseg{
	padding: 1em 2em;
	max-width: 1300px;
	margin: 0 auto;
}

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

#mainseg {
    padding: 1em;
	}

.ui.container{
	margin-left: 0 !important;
    margin-right: 0 !important;
	}
#titlecontainer {
	    padding: 10px 20px !important;
	}

#productname {
    font-size: 1.5rem;
	}
}

/** TOP **/

.ui.column.suit:hover{
    opacity:0.7;	
}

.ui.grid>.column:only-child, .ui.grid>.row>.column:only-child {
    padding: 10px;
}




#middle-menu{
    margin-top: 5rem !important;
}

.ui.segment,.ui.segment.productname{
    border-radius: 0 !important;
}
.ui.grid>.row>.column{
	margin-bottom: 20px !important;
}

.ui.dimmer{
    background-color: rgba(0,0,0,.50);
}

/** Goods **/

.ui.grid.row .ui.fluid.image{
	margin-bottom:-40px;
	height: 100%;

	}

#titlecontainer{   
    background: #d4d4d517;
    margin: -15px -30px !important;
	padding: 50px 70px;
}

.sixteen .ui.menu{
	font-size: 1.3rem;
}

@media only screen and (max-width: 991px){
	.ui.grid.row .ui.fluid.image{
	margin-bottom:10px;

	}
	.canvas.frontside .productimg{
    margin-bottom:-20px;
    transform: scale(1.3);
    margin-top: 80px;
    }

}


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

	.ui.grid>.column:only-child, .ui.grid>.row>.column:only-child {
    	padding: 5px !important;
        /* margin-bottom: 10px; */
        margin-top: 10px;
        
	}
	.ui.grid>.row>.column {
    	margin-bottom: 0 !important;;
	}
	#mainbox{
	width: 75% !important;
	}


}

/** Simulator **/

@media only screen and (max-width: 767px){
    .ui.hidden.divider{
        display: none;
    }
    #legendbox {
	margin-top: 0rem;
	}
}

@media only screen and (min-width: 992px){
	.ui.divider{
   		 margin-bottom: 50px;
	}
    .rollingbtn.toolbtn {
        bottom: 80px;
        right: 6rem;
    }
	button#backside,button#frontside{
		font-size: 1.4rem;
	}
}

/*add 20240412*/
.topselectbtn.selectedCat span {
    color: #000;
}
.topselectbtn.selectedCat {
    border-bottom: solid 3px #8b0000;
}
.ui.medium.header.topselectbtn:hover {
    color: #000;
}
/*by HOSOYA　0212*/
.ui.medium.header.topselectbtn {
    padding: 0px 1.5rem 10px;
    margin: calc(2rem - .14285714em) 0 1rem;
    color: #767676;
    font-size: 170%
}
#controlbox .ui.basic.button {
    padding: 1.5em .78571429em;
}
#stylebox .sub.header{
	margin-bottom: 15px;
}
#controlbox .circular.ui.icon.grey.basic.button {
    padding: 1em 1em;
}
#controlbox .ui.midium.header {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
}
#databox .circular.ui.icon.grey.basic.button {
    padding: 1em 1em;
}
#databox .ui.midium.header {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
}
/*by HOSOYA　0213*/
#mobile-menu {
    margin-top: 1rem;
}
#mainbox .ui.divider{
	margin:0px
}
.matdescbox {
    right: .5rem;
}
.rectext {
    margin: 0;
}
/*by HOSOYA　0223*/
#icon_color {
    position: absolute;
    left: 18.75%;
    width: 60px;
}
#icon_markpad{
	top:-0.5em;
}
@media only screen and (max-width: 767px){
	#icon_color{
		left: 25%;
		padding-top: 1rem;
	}
	/*#icon_markpad {
    	width: 25%!important;
    }*/
    .ui.segment.legendcont {
        height: 17%;
        margin: .5rem 0;
    }
}
#mainseg{
	padding-bottom: 3em;
}
.optionbox {
    margin-top: 2rem;
}

.lang-on{
    font-weight: bold;
}
.lang-off{
    color:#aaa;
}