@charset "UTF-8";

html{
    scroll-behavior: smooth;
width: 100%;
 font-size: 100%; /* 16px */
 font-family: serif;
}

body {
    min-height: 100vh;
    max-width: 1920px;
    margin: 0 auto;
    background-color: #ffffff;
    vertical-align: baseline;
}

a {
    text-decoration: none;
    font-family: serif;

}

a:hover {
    transition-duration: 2s;
    opacity: 0.2;
}


p {
    font-family: serif;
    color: #393E41;
    font-size: 1.3rem;/* 16pxの1.3倍 */
    text-align:center; 

}


#header li {
    list-style: none;
    font-family: serif;
    color: #037171;
}

.site_title {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: serif;
    color: #037171;
    font-size: 1.2rem;/* 16pxの1.3倍 */
}

.logo {
    margin-right: 16px;

}

img{
    max-width: 100%;
    height: auto;
    animation: fadeIn 0.7s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
 
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

figure img {
    max-width: 240px;
    margin: 0 0 0 0;
    animation: fadeIn 0.7s cubic-bezier(0.33, 1, 0.68, 1) forwards;
    }

    @keyframes fadeIn {
        0% {
          opacity: 0;
        }
        100% {
          opacity: 1;
        }
      }

 figure {
    
    text-align:center;

}


/* header */

.header {
    background-color: #E7E5DF;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 auto;
    padding: 2%;
    height: 96px;
    z-index: 10; /* 追加 */

    }

.header ul {
    display: flex;
    padding: 16px;
    align-items: center;


}

.header ul li {
    font-size: 1.5rem;
    margin-top: 16px;
    margin-left: 36px;


}

.header-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  opacity: 1;
  visibility: visible;
  animation: slide 0.5s ease-in-out;
}

/* headerここまで */




/* メインコンテンツ */

#main {
    width: 100vw;
 
} 

.main_view {
    background-image: url(../img/main.jpg);
    background-size: cover;
    text-align: center;
    font-family: serif;
    color: #ffffff;
}


.page-title {
    font-size: 3rem;
    margin-top: 11px;
}
.page-copy {
    font-size: 1rem;
    margin-top: 10px;
}

.page-shop-title {
    font-size: 1.2rem;
    margin-top: 8px;
    padding-bottom: 300px;
}

.logo_main{
    width: 100px;
    margin: 20px 0 0 0;
}


/* お問い合わせボタン */

h2 {
    font-size: 1.3rem;
    text-align: center;
    font-family: serif;
    color: #ffffff;
    padding: 20px;


}

.main-contact{
    background-color: #037171;
    padding: 1rem;
}

.btn{
    width: 200px;
    height: 40px;
    text-align: center;
    padding: 8px 60px;
    color: #ffffff;
    background-color: #037171;
    border: solid 1px #ffffff;
    border-radius: 10px;
}
/* お問い合わせボタンここまで */


/* 会社情報 */
.contents-about {
    background-color: #E7E5DF;
    margin-top: 0%;
    padding-top: 36px;
    padding-bottom: 36px;
    width: 100%;
    height: auto;
    text-transform: uppercase;
    justify-content: space-between;
}

.about_photo
{      
    min-width: 320px;
    height: auto;
    display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
    margin-top: 5%;
    justify-content:space-around;
    padding: 24px;
    
}


/* 商品紹介 */

.contents-introduction {
    background-color: #ffffff;
    margin-top: 0%;
    padding-top: 36px;
    margin-bottom: 5%;
    width: auto;
    height: auto;
    text-transform: uppercase;
    justify-content: space-between;
}

.introduction_photo { 
    max-width: 100%;     
    width: 100%;
    min-width: 320px;
    height: auto;
    display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
    margin-top: 5%;
    justify-content:space-around;
    padding: 24px;
    
}



h3 {
    font-size: 1.3rem;
    text-align: center;
    font-family: serif;
    color: #037171;
    padding: 20px;


}

/* description */

.description {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
    padding-top: 36px;
    height: auto;
}

h4 {
    margin-top: 24px;  
    font-size: 1.5rem;
    font-weight:  bold;
    text-align: center;
    font-family: serif;
    color: #393E41;
    padding: 16px;


}


.description h4 {
    position: relative;
    display: inline-block;
    margin-top: 2em auto;  
    font-size: 1.5rem;
    font-weight:  bold;
    text-align: center;
    font-family: serif;
    color: #393E41;
    padding: 3%;


}

.description h4:before {
    content: '';
    position: absolute;
    margin: auto;
    left: 50%;
    top: -15px;/*線の上下位置*/
    display: inline-block;
    width: 600px;/*線の長さ*/
    height: 1px;/*線の太さ*/
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);/*位置調整*/
    background-color: grey;/*線の色*/
  }

.description ul {
    width: auto;
    margin: 0 10%;
    box-shadow :0px 0px 3px silver;
    border: solid 1px whitesmoke;
    padding: 0.5em 1em 0.5em 2.5em;
    position: relative;
    background: #fafafa;
  }

  .description ul li {
    color: #037171;
    list-style: square;
    position: relative;
    padding: 0px 0px 0px 1em;
  }

 
.description li span {

    font-size: 1.3rem;
    text-align: left;
    font-family: serif;
    color: #393E41;
    


}

.description p {

    font-size: 1.3rem;
    text-align: center;
    font-family: serif;
    color: #393E41;
    margin: 24px 36px;
    


}

p.footer{
    text-align:center;
    font-size: 12px;
  }

/* contact */

.contact {
    background-color: #E7E5DF;
    margin-top: 0%;
    padding: 36px;
    width: 100%;
    height: auto;
    justify-content: space-between;
}

 /* 右下に画像バナーを配置 */
 .floating-banner {
    position: fixed;
    bottom: 20px; /* 画面下から20pxの距離 */
    right: 20px;  /* 画面右から20pxの距離 */
    width: 300px;  /* バナーの幅を指定 */
    height: auto;  /* 高さを自動調整 */
    z-index: 9999;  /* 他の要素よりも前面に表示 */
  }
  
  .floating-banner img {
    width: 100%;  /* バナー内で画像の幅を100%にする */
    height: auto; /* 画像の比率を保ちながら自動調整 */
  }

/* sp */

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

    .main_view {
        height: 500px;
        background-position: 30% 40%;
        background-image: url(../img/main_s.jpg);
        background-size: cover;
    }


/* header */
.header {
flex-direction: column;
height: auto;
text-align: center;
z-index: 10; /* 追加 */

}

.header ul li {
font-size: 0.8rem;
text-align: center;
justify-content: space-between;
}

.header-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  opacity: 1;
  visibility: visible;
  animation: slide 0.5s ease-in-out;
}

.site_title {
display: none;
}

.logo_main {
width: 80px;
text-align: center;
}

/* contents */

.contents-about{
padding: 16px;
padding-bottom: 36px;
height: auto;
}



.about_photo
{      
display: flex;
flex-direction: column;
padding: 24px;
margin-top: 24px;
margin-bottom: 24px;

}

figure img {
width: 90%;
margin: 0 0 0 0;
padding-top: 24px;
}

.contents-introduction{
background-color: #ffffff;
width: auto;
padding: 16px;
margin-top: 24px;
}

.introduction_photo {   
width: auto;
display: flex;
flex-direction: column;
padding: 24px;
margin: 24px 0;  


}


.introduction_photo_box{
width: auto;
margin-bottom: 40px;
}



.page-title {
display: none;
}
.page-copy {
display: none;
}

.page-shop-title {
display: frex;
flex-direction: row;
}

.contents-about p {
font-size: 16px;
text-align: center;
}


.contents-introduction p {
font-size: 16px;
text-align: center;

}

.description {
margin-top: 24px;  
margin-bottom: 10%;
}

.description h4 {
    position: relative;
    display: inline-block;
    margin-top: 2em auto;  
    font-size: 1.5rem;
    font-weight:  bold;
    text-align: center;
    font-family: serif;
    color: #393E41;
    padding: 3%;


}

.description h4:before {
    content: '';
    position: absolute;
    margin: auto;
    left: 50%;
    top: -15px;/*線の上下位置*/
    display: inline-block;
    width: 250px;/*線の長さ*/
    height: 1px;/*線の太さ*/
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);/*位置調整*/
    background-color: grey;/*線の色*/
  }


.description p {
    margin: 16px 16px;  
    margin-bottom: 10%;
    }

.description ul {
width: auto;
margin: 0 0;
box-shadow :0px 0px 3px silver;
border: solid 1px whitesmoke;
position: relative;
background: #fafafa;
}

.description ul li {
font-size: 16px;
padding: 0 0;
list-style: square silver;
position: relative;
text-align: left;
}

.description ul li {
    font-size: 16px;
    padding: 0 0;
    list-style: square silver;
    position: relative;
    text-align: left;
    }

.contact p {
padding: 0 16px;
font-size: 16px;
text-align: center;
}

.contact {
background-color: #E7E5DF;
margin-top: 0%;
padding-top: 36px;
padding-bottom: 48px;
width: auto;
justify-content: space-between;
}


}


/* spここまで */