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

/**/
*,
::before,
::after {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

body{
    margin: 0;
    padding: 0;
    width:auto;
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-fs_collarf";
}

/* ヘッダー */
#os-headder{
    background-color: #50AE30;
}

.container{
    padding: 3px 10px;
    margin: 0 auto;
    max-width: 500px;
}

#os-headder .container{
   
    
    font-size: 50%;
    color: #ffffff;
    
    
}


/*  */
#oshime_simulation{
    padding: 10px;
    margin: 0 auto;
    position: relative;
    
    max-width: 500px;
    height: 95dvh;
    
    /* background-color: antiquewhite; */
}

#design-check{
    position: relative;
    /* background-color: #D1D1D1; */
    margin: 0;
    border: solid 1px #666666;
}


#design-check img{
    position: absolute;
    top: 0px;
    left: 0pix;
}

/* background-color: aqua; */
#p-frame{
    
}

#p-frame img{
    position: static;
}



/* パーツのベース：塗りしろ、縁あり */
.p_grd{
    filter: brightness(0) invert(100%) drop-shadow(0px 0px 1px rgba(0,0,0,1));
}

/**/
.p_con{
    filter: opacity(0.5);
}

.p_con_w{
    filter: opacity(0);
}

.p_line{
    filter: brightness(0) saturate(100%)
    /* 
    filter: brightness(0) saturate(100%) invert(64%) sepia(5%) saturate(15%) hue-rotate(9deg) brightness(99%) contrast(92%);
     */
}

.p_black{
    filter: brightness(0);
}


/* ◼️ */


/* 形の変更全体 */
#pattern_frame{
    border-bottom: solid 1px #666666;
    padding-bottom: 10px;
}
#reset_frame{
    margin: 0;
    padding: 10px 0;
    display: flex;
    border-bottom: solid 1px #666666;
}

#reset_frame input[type="text"]{
    width: 3.5em;
    text-align: right;
}

.pat_sf{
    padding: 5px 0;
}

/* パターン変更　ベース */
#fs_base_frame{
    border-bottom: dotted 1px #666666;
}

/* ◼️パターン選択 */
#pat_f{
    
}

.pat_subtitle{
    display: inline-block;
    width: 6em;
    text-align: right;
}



/* ◼️カラー調整 */
/* スライダー */

#filter-t{
    position: absolute;
    top: 0px;
    right: 0px;
    background-color: rgba(220, 220, 220, 1);
    padding: 5px 10px;
    width: 240px;
    border-bottom: solid 1px #ffffff;
    
    z-index: 3;
}

#color_frame{
    background-color: rgba(220, 220, 220, 0.8);
    position: absolute;
    top: 0px;
    right: 0px;
    
    width: 240px;
    height: 100%;
    
    padding: 30px 10px 10px;
    
    overflow-y: scroll;
}

/* 見出し */
.f_subtitle{
    background-color: #ffffff;
    border-top: dotted 1px #666666;
    padding: 2px 5px;
    margin: 10px 0 5px;
    display: flex;
}


.ul_slider_frame li{
    margin: 0;
    padding: 0;
    list-style: none;
    background-image: url("img/color_11.png");
    background-size: 150px;
    background-position: 3.3em 0;
    background-repeat: no-repeat;
    margin: 2px 0;
    padding: 2px 0 0px;
}

.ul_slider_frame li:nth-child(2){
    background-image: url("img/color_12.svg");
}
.ul_slider_frame li:nth-child(3){
    background-image: url("img/color_13.svg");
}
.ul_slider_frame li:nth-child(4){
    background-image: url("img/color_14.svg");
}


.filter-type {
    display: inline-block;
    width: 3em;
}

.ul_slider_frame input[type = "range"] {
    cursor: pointer;
    width:150px;
}

.ul_slider_frame img{
    width: 150px;
    margin: -2px 0 5px 54px;
}

/* ■PC用 */
/* 「screen and」は省略可 */
@media screen and (min-width:501px) {
    #os-headder .container{
        /* width: 500px; */
    }
    #oshime_simulation{
        /* width: 500px; */
    }
}



/* ■スマホ用 */
@media screen and (max-width:500px) {
    body{
        font-size: 80%;
    }
    
    #oshime_simulation{
        
    }
    
    #design-check{
        padding-right: 80px;
    }
    
    #design-check img{
        max-width: 70vw;
    }
    
    #filter-t{
        position: absolute;
        top: 0px;
        right: 0px;
        background-color: rgba(220, 220, 220, 1);
        padding: 5px 10px;
        width: 170px;
        border-bottom: solid 1px #ffffff;

        z-index: 3;
    }
    
    
    
    #color_frame{
        width: 170px;
    }
    
    .ul_slider_frame input[type = "range"] {
        width:100px;
    }
    
    .ul_slider_frame li{
        background-size: 100px;
    }
    
    .ul_slider_frame li:nth-child(1){
        background-position: 3.3em 2px;
}