@charset "UTF-8";
html,body{
    font-family: "Sawarabi Mincho";
}
.itemlist li .caption{
  font-size:1.6vw;
  text-align:center;
  line-height: 1.7em;
  color:#fff;
  }
  .itemlist li .caption a{
    font-size:1.6vw;
    text-align:center;
    line-height: 1.7em;
    color:#fff;
    }
  .itemlist li .caption1{
    font-size:1.6vw;
    text-align:center;
    line-height: 1.7em;
    color:#fff;
    }

#smphead {
width:100%;
background:#000;
}

#smphead h1{
display:block;
color:#FFF;
width:100%;
text-align:center;
}

.setumeibox{
display:flex;
flex-direction:row;
}

/*ここからPC（601px以上）環境の設定*/
@media (min-width:601px){
.br-tr{
  display:none;
}
.container{
background:none;
width:100%;
margin:0 auto;
background: #000;
}

.sin_bottle h2,.des_bottle h2{
text-align:center;
font-weight:bold;
font-size:1.2em;
color:#fff;
}

.sin_bottle p,.des_bottle p{
padding:20px 2px;
text-align:justify;
color:#fff;
}

.sin_bottle{
width:48%;
text-align:center;

background:url("../img/SMP_sin_04.jpg")no-repeat top center;
background-size: cover;
/*background-blend-mode:lighten;*/
box-shadow: inset 0 0 15px 15px #000;
}

.des_bottle{
width:48%;
text-align:center;

background:url("../img/SMP_des_04.jpg")no-repeat top center;
background-size: cover;
/*background-blend-mode:lighten;*/
box-shadow: inset 0 0 15px 15px #000;
}

.sin_bottle img,.des_bottle img{
width:23%;
margin:30px 0 30px;

}

.pc_sin_title img,.pc_des_title img{
width:60%;
margin:20px;

}

#smphead h1{
font-size:0.9em;
display:none;
}

.conceptbox_bg{
display:block;
width:100%;
height: 500px;
padding:0;
margin:0 auto;
text-align: center;
background:url("../img/simm_W1920H1193_08.jpg")no-repeat top center #000;
background-size: cover;
background-position: bottom;
}

.conceptbox_bg img{
width:400px;
}

.conceptbox_pc{
display:block;
letter-spacing:0.2em;

}

.conceptbox{
display:none;
}

.concept_kara{
background: #000;
}
    
.concept1{
text-align:center;
font-size:1.2em;
padding:45px 30px;
display:none;
        }

.concept1_pc p{
  font-size:0.9em;
  line-height:3.0em;
  padding:30px 100px;
  margin-left:3px;
  color:#fff;
font-weight:bold;
}

.concept1_smp p{
display:none;
}


.yam_container_2{
background:black;
padding:5px;
color:#fff;
text-align:center;
font-weight:bold;
font-size:2em;
border-top: solid 6px #fff; 
}

.yam_container_2 a{
text-decoration:none;
}

.yam_container_3{
display:flex;
  flex-wrap: wrap;
  background: #fff;
}

.yam_container_4{
width:30%;
margin:10px 20px 0 200px;
}

.yam_container_4 img{
width:90%;
}

.yam_container_5{
font-size:2em;
width:50%;
margin:auto;
text-align: center;
}

.yam_container_6{
width:100%;
margin-top:10px;
padding-top:10px;
padding-bottom:30px;
text-align: center;
line-height: 2.5em;
}

.yam_container_7_pc{
width:100%;
position: relative;
}

.yam_container_7_pc img{
width:100%;
}

.yam_container_7_pc p{
position: absolute;
color: #fff;
top: 50%;
left: 30%;
font-size:1.4em;
}

.yam_container_7_smp{
display:none;
}

.yam_container_8{
width:50%;
}

.yam_container_8 img{
width:100%;
}

#smphead h1{
font-size:0.7em;
}

.logobox{
display:flex;
justify-content: space-between;
align-items: center;
width:100%;
}

.logo{
width:15%;
padding:15px;
}

.logo img{
width:100%;
height:auto;
}

.logo2{
width:15%;
margin-right:0;
padding:13px;
}

.logo2 img{
width:100%;
height:auto;
}

.simm_logo{
background:#000;
width:100%;
padding:15px 0;
text-align:center;
margin:0 0 20px;
}

.simm_logo img{
width:20%;
}

.bottleimagebox{
display:flex;
justify-content: space-around;
margin-top:10px;
background: #000;
}

.bottleimagebox p{
line-height:1.3em;
}
.setumeibox{

}

.sin_box{
background:url("../img/des_smp.jpg")no-repeat top center;
background-size: cover;
}
.pc_text_sin,.pc_text_des{
display:block;
width:90%;
margin:0 auto;
}

.des_box{
background:url("../img/sin_smp.jpg")no-repeat top center;
background-size: cover;
}

.sin_title,.des_title{
width:80%;
margin:30px auto;
}

.sin_item,.des_item{
width:60%;
margin:30px auto;
background:#fff;
text-align:center;
}

.sin_item img,.des_item img{
width:30%;
padding:10px;
}

.setumeibox h2{
text-align:center;
font-weight:bold;
font-size:1.5em;
}

.setumeibox p{
padding:20px 50px;
text-align:justify;
}

.content {position:relative; z-index:1; padding-top:45%; width:90%; margin:0 auto;}

@media only screen and (min-width:36.250em) {
  .content {width:60%; padding-top:35% }
}

.example::-webkit-scrollbar{ 
    width: 15px;
}
.example::-webkit-scrollbar-thumb{ 
    background: #c1c1c1;
}
.example::-webkit-scrollbar-track-piece:start{
    background: #f1f1f1;
}
.example::-webkit-scrollbar-track-piece:end{
    background: #f1f1f1;
}

.itemlist,.itemlist ul{
display:flex;
justify-content:space-around;
background: #000;
}

.itemlist li{
width:100%;
height:90%;
overflow:hidden;
margin:10px 8px 10px 16px;
overflow:hidden;
position:relative;
}

.itemlist li .caption{
font-size:1.6vw;
text-align:center;
line-height: 1.7em;
color:#fff;
}
.itemlist li .caption1{
  font-size:1.6vw;
  text-align:center;
  line-height: 1.7em;
  color:#fff;
  }

.itemlist li .mask{
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
opacity:0;	/* マスクを表示しない */
background-color:rgba(0,0,0,0.4);
-webkit-transition:	all 0.6s ease;
transition:all 0.6s ease;
}

.itemlist li:hover .mask{
opacity:1;	/* マスクを表示する */
padding-top:21%;	/* ホバーで下にずらす */
}

.itemlist li img{
width:100%;
}

.shosai{
background:#7b68ee;
padding:30px;
border-top: solid 6px #fff;

}

.shosai p{
text-align:center;
font-weight:bold;
font-size:2.5em;
margin-bottom: 2px;
font-style: italic;
}

.shosai a{
color:#fff;
text-decoration:none;
}

.shosai2{

}

.shosai2 p{
text-align:center;
font-weight:bold;
font-size:1em;
font-style: italic;
}

.shosai2 a{
color:#fff;
text-decoration:none;
}

.fan{
width:100%;
height:auto;
}

.fan img{
text-align: center;
width:100%;
}

footer{
background:#000;
color:#fff;
text-align:center;
font-size:0.7em;
padding:20px;
margin-top:20px;
}
}

/*ここからスマートフォン（600px以下）環境の設定
---------------------------------------------------------------------------*/
/*表示を切り替えるウィンドウサイズの指定*/
@media (max-width : 733px){


.conceptbox_bg{
display:block;
width:100%;
height: 500px;
padding:0;
margin:0 auto;
text-align: center;
background:url("../img/simm_W1920H1193_08.jpg")no-repeat top center #000;
background-size: cover;
background-position: bottom;
}

.conceptbox_bg img{
width:360px;
}

.conceptbox_pc{
display:block;
letter-spacing:0.2em;

}
.conceptbox{
display:none;
}
    .concept_kara{
background: #000;
        
    }
    
.concept1{
text-align:center;
font-size:1.2em;
padding:45px 30px;
display:none;
        
}

.conceptbox_bg img{
width:80%;

    }

.concept1_pc p{
  font-size:1em;
  line-height:2.0em;
  padding:10px 30px;
  margin-left:3px;
  color:#fff;
font-weight:bold;

}

.concept1_pc p{
display:none;
}

.concept1_smp p{
  font-size:0.7em;
  line-height:2.0em;
  padding:10px 30px;
  margin-left:3px;
  color:#fff;
font-weight:bold;
}
    
.itemlist,.itemlist ul{
display:flex;
justify-content:space-around;
background:#000;
}

.itemlist li{
width:100%;
height:80%;
overflow:hidden;
margin:10px 2px 10px 4px;
overflow:hidden;
position:relative;
}

.itemlist li .caption{
margin:10px;
font-size:0.6em;
text-align:center;
line-height: 1.1em;
color:#fff;
padding-top:10px;
}
.itemlist li .caption1{
  margin:10px;
  font-size:0.6em;
  text-align:center;
  line-height: 1.1em;
  color:#fff;
  padding-top:3px;
  }


.itemlist li .mask{
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
opacity:1;	/* マスクを表示しない */
background-color:rgba(0,0,0,0.4);
-webkit-transition:	all 0.6s ease;
transition:all 0.6s ease;
}

.itemlist li:hover .mask{
opacity:1;	/* マスクを表示する */

}

.itemlist li img{
width:100%;
}

img { max-width: 100%; }

.container{
width:100%;
background: #000;

}

#smphead h1{
font-size:0.7em;
}




.logobox{
display:flex;
justify-content: space-between;
align-items: center;
width:100%;
}

.logo{
width:30%;
padding:15px;
}

.logo img{
width:100%;
height:auto;
}

.logo2{
width:30%;
margin-right:0;
padding:13px;
}

.logo2 img{
width:100%;
height:auto;
}
.simm_logo{
background:#000;
width:100%;
padding:20px 10px;
text-align:center;
margin:20px 0;
}

.simm_logo img{
width:60%;
}

.bottleimagebox{
display:block;
width:330px;
height:1200px;
color:#fff;
margin:0;
}
.pc_sin_title,.pc_des_title{
  display:inline-block;
  width:330px;
  height:50px;
  text-align:center;
  }
  .pc_text_sin,.pc_text_des{
    display:inline-block;
    width:330px;
    height:120px;
    font-size:0.7em;
    margin:0 20px;
    }
    .pc_text_des h2{
     
      font-size:1.5em;
      padding:20px 0;
      }
      .pc_text_sin h2{
        font-size:1.5em;
        padding:20px 0;
        }
      .pc_text_sin p,.pc_text_des p{
     
        margin:0 20px;
        padding-bottom:20px;
        }

.sin_bottle,.des_bottle{
width:120%;
height:600px;
text-align:center;

}
.sin_bottle{
  
  text-align:center;
  
  background:url("../img/SMP_sin_04.jpg")no-repeat top center black;
  background-size: cover;
  /*background-blend-mode:lighten;*/
  box-shadow: inset 5px 5px 5px 5px #000;
  }
  
  .des_bottle{
 
  text-align:center;
  
  background:url("../img/SMP_des_04.jpg")no-repeat top center black;
  background-size: cover;
  /*background-blend-mode:lighten;*/
  box-shadow: inset 5px 5px 5px 5px #000;
  }

.sin_bottle img,.des_bottle img{
width:20%;
margin:70px 0 30px;
}
.pc_sin_title img,.pc_des_title img{
 width:60%;
 margin:20px;
  }



.bottleimagebox p{
line-height:1.4em;
}

.setumeibox{
flex-direction:column;
}

.sin_box{
background:url("../img/sin_smp_03.jpg")no-repeat top center;
background-size: cover;
    min-height: 700px;
    line-height: 2em;
    font-size: 1em;
    margin-left:10px;
    margin-right:10px;
    border-top: solid 3px #fff; 
border-bottom: solid 3px #fff; 
}

.des_box{
background:url("../img/des_smp_03.jpg")no-repeat top center;
background-size: cover;
    min-height: 700px;
    line-height: 2em;
    font-size: 1em;
    margin-left:10px;
    margin-right:10px;
}

.sin_title,.des_title{
width:80%;
margin:30px auto;
}

.sin_item,.des_item{
width:60%;
margin:30px auto;
text-align:center;

}
.sin_item img,.des_item img{
width:40%;
padding:0 10px;
}

.setumeibox h2{
text-align:center;
font-weight:bold;
font-size:1.3em;
color:#fff;
}
.setumeibox p
{
  font-size:0.8em;
  line-height:2.0em;

font-weight:bold;
padding:20px 50px;
text-align:justify;
color:#fff;
}

.concept1{
text-align:center;
font-size:1.2em;
padding:50px 30px;
display:block;
}
.conceptbox_pc{
display:block;
}
.conceptbox{
display:block;
letter-spacing:0.2em;
line-height:1.4em;
}



.pc_concept{
background:#fff;
}

.pc_concept_setumei_waku{
display:flex;
flex-direction: column-reverse;
align-items: top;
}

.pc_concept_setumei_waku_left{
width:90%;
margin:0 auto;
}

.pc_concept_setumei_waku_right{
width:40%;
margin:0 auto;
}

.pc_concept_setumei_waku_left img{
width:100%;
}

.pc_conceptartwork{
width:80%;
margin:0 auto 20px;
text-align:center;
}

.yam_container_2{
background:black;
padding:5px;
color:#fff;
text-align:center;
font-weight:bold;
font-size:1.5em;
border-top: solid 3px #fff; 
border-bottom: solid 3px #fff; 
}

.yam_container_2 a{
text-decoration:none;
}


.yam_container_3{
display:flex;
flex-wrap: wrap;
  background: #fff;
    
}

.yam_container_4{
width:50%;
background: #fff;
}

.yam_container_4 img{
width:70%;
text-align: right;
padding-top: 40px;
padding-left: 40px;
}

.yam_container_5{
font-size:1em;
width:50%;
margin:auto;
text-align: center;
}

.yam_container_6{
width:100%;
margin-top:10px;
padding-top:10px;
padding-bottom:30px;
text-align: center;
}

.yam_container_6 p{
text-align: left;
line-height: 1.5em;
margin:30px;
}


.yam_container_7_smp{
width:100%;
}

.yam_container_7_smp img{
width:100%;
}

.yam_container_7_smp p{
position: absolute;
color: #fff;
top: 8%;
left: 10%;
line-height: 1.4em;
font-size:1.0em;
text-align: left;
}

.yam_container_7_pc{
display:none;
}

.yam_container_8{
width:50%;
}

.yam_container_8 img{
width:100%;
}



.shosai{
background:#7b68ee;
padding:20px;
border-top: solid 6px #fff;

}

.shosai p{
text-align:center;
font-weight:bold;
font-size:2.5em;
margin-bottom: 2px;
font-style: italic;
}

.shosai a{
color:#fff;
text-decoration:none;
}

.shosai2{
}

.shosai2 p{
text-align:center;
font-weight:bold;
font-size:1em;
font-style: italic;
}

.shosai2 a{
color:#fff;
text-decoration:none;
}


.fan{
width:100%;
}

.fan img{
margin-top:100px;
padding-top:10px;
padding-bottom:100px;
text-align: center;

}

footer{
background:#000;
color:#fff;
text-align:center;
font-size:0.7em;
padding:20px;
}
}