@charset "UTF-8";
@import url("smoothness/jquery-ui-1.8.4.custom.css");
@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');

/* =======================================
共通指定
==========================================*/

html {
    scroll-behavior: smooth;
}

body{
	width: 100%; max-width: 640px;   
	margin: 0;
	margin-left: auto;
    margin-right: auto;
    font-size:15px;
    	font-family: "Helvetica" , Helvetica , Arial , Verdana , Roboto , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
font-weight: 600;
}

header {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
}


nav {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
}


nav > ul {
    margin: 0;
    padding: 0; 
    width: 100%;
    display: flex; 
    justify-content: center;
    align-items: center;
    list-style: none;
    background-color: transparent;
    transition: all 0.4s ease;
    height: auto; 
}


nav > ul.is-scrolled {
    background-color: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
   
}


nav > ul > li {

    text-align: center;
    list-style: none;
    position: relative;
    padding: 2px 2%; 
}


nav ul.is-scrolled li a,
nav ul.is-scrolled li p {
    color: #333 !important;
}

/* --- プルダウン（縦のアコーディオン） --- */
.drop-menu-list {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    background-color: rgba(255, 255, 255, 0.95);
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
}

.drop-menu-item {
    display: block !important;
    width: 100%;


}

.drop-menu-item a {
    display: block;
    padding: 0px 0 1.3em 0;
    color: #333 !important;
    text-decoration: none;
    font-size: 16px;
    text-align: center;
}


.menu-item:hover .drop-menu-list {
    opacity: 1;
    visibility: visible;
}

@media screen and (max-width: 640px) {
    nav > ul > li { font-size: 14px; }
}




li{list-style-type: none;}
table{border-collapse: collapse; border-spacing: 0;}
img{ width:100%; height:auto; border:0; vertical-align:bottom; }

.clear{clear: both;}
.clearfloat{clear: both; height: 0; font-size: 1px; line-height: 0;}
.clearfix{zoom: 1;}
.clearfix:after{content: ""; display: block; clear: both;}
*:first-child+html .clearfix {zoom: 1; } /* IE7 */


a{ color:#fff;　text-decoration:none ; }
a:link,
a:visited,
a:hover,
a:active{ text-decoration:none; }
a:hover,
a,
input[type="submit"],
input[type="button"]{
    -webkit-transition:0.2s ease-in-out;
    -moz-transition:0.2s ease-in-out;
    -o-transition:0.2s ease-in-out;
    transition:0.2s ease-in-out;
}

a:hover{ opacity:0.6; }

hr {
  border-top: 1px solid #000;
	padding: 0em;
    margin: 0em;
	width: 100%;
}




/* =======================================
BOXの子たち
==========================================*/

.main {
  position: relative;
  overflow: hidden;
}

.bg-layer {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -1;
}

.product-container {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    position: relative; 
    line-height: 0;    
}


.main-img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
}


.sub-images {
    position: absolute;
    bottom: 6%;        
    left: 0;
    width: 100%;
    display: flex;     
    justify-content: space-around; 
    padding: 0 10px;  
    box-sizing: border-box;
}

.sub-images a {
    display: block;    
    width: 22%;        
    height: auto;
    line-height: 0;    
    text-decoration: none;
}

.sub-images a img {
    width: 100%;      
    height: auto;
    vertical-align: bottom;
}

.product1 {
    width:100%; max-width: 640px; height:auto; border:0; vertical-align:bottom;　
	padding: 0em;
    margin: 4em 0em 0em 0em;
	margin-left: auto;
    margin-right: auto;
	
}

.product2 {
    width:100%; max-width: 640px; height:auto; border:0; vertical-align:bottom;　
	padding: 0em;
    margin: 2em 0em 0em 0em;
	margin-left: auto;
    margin-right: auto;
}

.product3 {
    width:100%; max-width: 640px; height:auto; border:0; vertical-align:bottom;　
	padding: 0em;
    margin: 5em 0em 0em 0em;
	margin-left: auto;
    margin-right: auto;
}

.product4 {
    width:100%; max-width: 640px; height:auto; border:0; vertical-align:bottom;　
	padding: 0em;
    margin: 2em 0em 0em 0em;
	margin-left: auto;
    margin-right: auto;
}

.product5 {
    width:100%; max-width: 640px; height:auto; border:0; vertical-align:bottom;　
	padding: 0em;
    margin: 8em 0em 0em 0em;
	margin-left: auto;
    margin-right: auto;
}

.product6 {
    width:100%; max-width: 640px; height:auto; border:0; vertical-align:bottom;　
	padding: 0em;
    margin: 0em;
	margin-left: auto;
    margin-right: auto;
}

.product7 {
    width:100%; max-width: 640px; height:auto; border:0; vertical-align:bottom;　
	padding: 0em;
   margin: 1.5em 0em 0em 0em;
	margin-left: auto;
    margin-right: auto;
}

.product8 {
    width:100%; max-width: 640px; height:auto; border:0; vertical-align:bottom;　
	padding: 0em;
    margin: 9em 0em 0em 0em;
	margin-left: auto;
    margin-right: auto;
}

.product9 {
    width:100%; max-width: 640px; height:auto; border:0; vertical-align:bottom;　
	padding: 0em;
   margin: 8em 0em 0em 0em;
	margin-left: auto;
    margin-right: auto;
}

.product10 {
    width:100%; max-width: 640px; height:auto; border:0; vertical-align:bottom;　
	padding: 0em;
    margin: 0em;
	margin-left: auto;
    margin-right: auto;
}

.product11 {
    width:100%; max-width: 640px; height:auto; border:0; vertical-align:bottom;　
	padding: 0em;
    margin: 0em;
	margin-left: auto;
    margin-right: auto;
}

.product12 {
    width:100%; max-width: 640px; height:auto; border:0; vertical-align:bottom;　
	padding: 0em;
   margin: 8em 0em 0em 0em;
	margin-left: auto;
    margin-right: auto;
}

.product13 {
    width:100%; max-width: 640px; height:auto; border:0; vertical-align:bottom;　
	padding: 0em;
    margin: 8em 0em 0em 0em;
	margin-left: auto;
    margin-right: auto;
}

.product14 {
    width:50%; max-width: 640px; height:auto; border:0; vertical-align:bottom;　
	padding: 0em;
    margin: 0em;
	margin-left: auto;
    margin-right: auto;
	margin: -2em auto 0 auto;
	position: relative; 
    z-index: 1;
	margin-bottom:  6em;
}


/* =======================================
SNS
==========================================*/

.sns {
    width: 100%; 
    max-width: 640px; 
    height: auto; 
    border: 0; 
    vertical-align: bottom;
    padding: 0;
    margin: 0 ; 
    display: flex;        
    justify-content: center; 
    align-items: center;    
    gap: 1%;              
}

.sns a {
    width: 16%;      
    height: auto;     
    flex-shrink: 0;   
}

.sns a img {
    width: 100%;
    height: auto;
    vertical-align: bottom; /* 画像下の謎の隙間を消す */
}

/* ホバー演出 */
.sns a:hover {
    opacity: 0.7;
}


/* =======================================
footer
==========================================*/



.footer {
    width: 100%;
    max-width: 640px;
    margin: 4em auto 1em auto; 
    text-align: center;         
}

.footer p {
    font-size: 15px;           
    color: #000;                
    font-family: "Helvetica", Arial, sans-serif; 
    margin: 0;
}