@charset "UTF-8";
/* CSS Document */
body,h1,h2,h3,p,a,ul,li{
 margin: 0;
 padding: 0;
 font-family: "Noto Sans JP", sans-serif;
 line-height: 1.8;
}
img{
 vertical-align: bottom;
 max-width: 100%;
}
h3,p,a{
 font-weight: 500;
}
h2{
 font-size: 24px;
 font-weight: bold;
 line-height: 1.8;
 letter-spacing: 0.05rem;
}
h3{
 font-size: 14px;
 letter-spacing: 0.05rem;
 line-height: 2.57;
 margin: 0 0 50px;
}
p{
 font-size: 14px;
}
a{
 text-decoration: none;
}
a:hover{
 opacity: 0.7;
}
ul{
 list-style: none;
}
body{
 background: #eee;
 position: relative;
}
.en{
 font-family: "Montserrat", sans-serif;
}
.serif{
 font-family: "Noto Serif JP", serif;
}
#top{
 width: 100%;
 height: 100vh;
 display: flex;
 justify-content: space-between;
 position: fixed;
}
#top > div{
 position: relative;
 width: 100%;
/* max-width: 470px;*/
 max-width: 710px;
 background-image: url("../images/bg-gray.jpg");
 background-size: contain;
}
#top > .concept .logo,
#top > .menu header{
 width: fit-content;
 height: fit-content;
 position: absolute;
 left: 0;
 right: 0;
 top: 0;
 bottom: 0;
 margin: auto;
}
#top > .concept .logo p{
 color: #fff;
 text-align: center;
 font-size: 14px;
 font-weight: 600;
 letter-spacing: 0.1rem;
 margin: 0 0 25px;
}
#top > .menu header{
 text-align: center;
}
#top > .menu header a{
 color: #fff;
}
#top > .menu header ul li:not(:last-child){
 margin: 0 0 30px;
}
#top > .menu header ul li a{
 font-size: 12px;
 letter-spacing: 0.1rem;
}
#top > .menu header ul li a span{
 display: block;
 font-size: 24px;
 line-height: 1.5;
 margin: 0 0 10px;
}
#top > .menu header ul + a{
 position: relative;
 display: block;
 width: fit-content;
 line-height: 3.4;
 margin: 50px auto 0;
 padding: 0 16px 0 0;
}
#top > .menu header ul + a:after{
 content: "";
 position: absolute;
 background-image: url("../images/other-link.svg");
 background-size: cover;
 width: 8px;
 height: 8px;
 right: 0;
 top: 0;
 bottom: 0;
 margin: auto;
}

#index{
 width: 100%;
 max-width: 500px;
 margin: 0 auto;
 position: relative;
 z-index: 1;
 background: #eee;
}
#index #main{
 position: relative;
 height: 100vh;
 background-image: url("../images/bg-01.jpg");
 background-size: cover;
}
#index #main .message{
 position: absolute;
/*
 top: 15%;
 left: 10%;
*/
 top: 100px;
 left: 50px;
 color: #fff;
}
#index #main .message h2,
#index #main .message p{
 letter-spacing: 0.1rem;
 line-height: 2;
}
#index #main .message h2{
 font-size: 24px;
 margin: 0 0 30px;
}
#index #concept{
 color: #0A0A0A;
 padding: 50px 0;
}
#index #concept h2,
#index #concept p{
 padding: 0 50px;
}
#index #concept h2{
 margin: 0 0 25px;
}
#index #concept h3{
 padding: 0 0 0 30px;
}
#index #concept p{
 margin-bottom: 50px;
 line-height: 2;
 letter-spacing: 0.05rem;
}
#index #concept img{
 margin: 0 auto 30px;
}
#index #thema{
 padding: 75px 50px 162px;
 background-image: url("../images/bg-02.jpg");
 background-size: cover;
 color: #fff;
}
#index #thema h3 + p{
 line-height: 3.42;
 letter-spacing: 0.05rem;
}
#index #thema .serif{
 font-size: 70px;
 font-weight: 400;
 line-height: 1;
 letter-spacing: 0.05rem;
 margin: 0 0 30px;
}
#index #thema .serif + p{
 line-height: 2;
}
#index #products{
 padding: 50px 0;
}
#index #products h3{
 padding: 0 0 0 30px;
}
#index #products .item .about{
 width: 100%;
 display: flex;
 align-items: end;
 gap: 30px;
}
#index #products .item .about > div{
 width: 100%;
}
#index #products .item .about .txt{
 padding: 0 0 0 30px;
}
#index #products .item .about .txt h2{
 line-height: 1.5;
}
#index #products .item .about .txt h2 span{
 font-size: 16px;
 display: block;
 margin: 0 0 15px;
}
#index #products .item .about .txt h2 + p{
 line-height: 2;
 margin: 30px 0;
}
#index #products .item .about .image{
 width: 50%;
}
#index #products .item .about .txt > a{
 position: relative;
 display: block;
 width: fit-content;
 line-height: 1;
 color: #0A0A0A;
 border: solid 1px;
 border-radius: 35px;
 padding: 18px 34px 18px 60px;
}
#index #products .item .about .txt > a:before{
 content: "";
 position: absolute;
 background-image: url("../images/icon-cart.svg");
 background-size: cover;
 width: 18px;
 height: 18px;
 left: 34px;
 top: 0;
 bottom: 0;
 margin: auto;
}
#index #products .item .about .txt > a:hover{
 opacity: 1;
 color: #fff;
 border: solid 1px #0A0A0A;
 background: #0A0A0A;
 transition: .1s;
}
#index #products .item .about .txt > a:hover:before{
 background-image: url("../images/icon-cart-white.svg");
}
#index #products .item .profile{
 display: flex;
 background: #fff;
 padding: 20px;
 margin: 30px 30px 50px;
 gap: 20px;
 align-items: flex-start;
}
.scroll_up, .scroll_up.on, ul, li{
 position: static;
 overflow: visible;
}
#index #products .item .products ul{
 display: flex;
 gap: 20px;
 margin: 54px 23px 50px;
}
#index #products .item .products ul li{
 max-width: 140px;
}
#index #products .item .products ul li p.en{
 line-height: 1;
 letter-spacing: 0.05rem;
 margin: 11px 0 12px;
}
#index #products .item .products ul li p.en + p{
 line-height: 1.57;
 margin: 0 0 12px;
}
#index #products .item .products .modal-open-button{
 display: block;
 text-align: center;
 padding: 11px 0 10px;
 color: #0A0A0A;
 border: solid 1px;
 border-radius: 25px;
}
#index #products .item .products .modal-open-button:hover{
 color: #fff;
 border: solid 1px;
 background-color: #0A0A0A;
 opacity: 1;
 transition: .3s;
}
#index #products .item .products .modal {
 position: fixed;
 top: 0;
 left: 0;
 z-index: 1;
 display: flex;
 align-items: center;
 justify-content: center;
 width: 100vw;
 height: 100vh;
 background-color: rgb(0 0 0 / 60%);
 transition: opacity 0.5s, scale 0s 0.5s;
 scale: 0;
 opacity: 0;
 transform: scale(0.9);
 pointer-events: none;
 visibility: hidden;
 transition: opacity 0.5s ease, transform 0.3s ease;
 z-index: 1000;
}
/*
#index #products .item .products .modal:target {
 opacity: 1;
 transition: opacity 0.5s;
 scale: 1;
 z-index: 10;
}
*/
#index #products .item .products .modal.active {
 transition: opacity 0.5s;
 scale: 1;
 opacity: 1;
 transform: scale(1);
 pointer-events: auto;
 visibility: visible;
}
#index #products .item .products .close {
 position: absolute;
 font-size: 44px;
 font-weight: 100;
 color: #fff;
 top: 26px;
 right: 32px;
 line-height: 1;
 text-decoration: none;
 cursor: pointer;
 transform: translate(50%, -50%);
}
#index #products .item .products .modal-wrapper {
 position: relative;
 width: 100%;
 max-width: 500px;
 padding: 48px 67px 102px;
 background: #707070;
 color: #fff;
}
#index #products .item .products .modal-content img{
 display: block;
 max-width: 367px;
 margin: 0 auto;
}
#index #products .item .products .modal-content p.en{
 font-size: 14px;
 letter-spacing: 0.05rem;
 line-height: 2.57;
}
#index #products .item .products .modal-content h2{
 font-weight: 500;
 line-height: 1.75;
 margin: 9px 0 30px;
}
#index #products .item .products .modal-content p:last-child{
 line-height: 2;
}
#index #products .item .profile img{
 width: auto;
 max-width: 100px;
 height: auto;
 object-fit: contain;
}
#index #products .item .profile .txt p:first-child{
 font-size: 16px;
 font-weight: bold;
 letter-spacing: 0.05rem;
 line-height: 1.68;
 margin: 0 0 7px;
}
#index #products .item .profile .txt p:last-child{
 line-height: 1.5;
}
#index #ingredients{
 background: #444;
 padding: 43px 0 0;
 color: #fff;
}
#index #ingredients > h3{
 margin: 0 0 42px;
 padding: 0 0 0 31px;
}
#index #ingredients .about-title{
 position: relative;
}
#index #ingredients .about-title > div{
 width: 100%;
 position: absolute;
 bottom: 0;
 background: #00000080;
 padding: 23px 20px 22px;
 box-sizing: border-box;
}
#index #ingredients .about-title > div p.en{
 line-height: 2.57;
 letter-spacing: 0.05rem;
}
#index #ingredients .about-title > div p.serif{
 font-size: 55px;
 letter-spacing: 0.05rem;
}
#index #ingredients .about-title > div p.serif span{
 font-size: 30px;
 padding: 0 0 0 10px;
}
#index #ingredients .about-title > div p.serif + p{
 font-weight: 400;
 line-height: 2.57;
 letter-spacing: 0.05rem;
}
#index #ingredients .about-text{
 padding: 28px 20px 59px;
}
#index #ingredients .about-text ul li:not(:last-child){
 margin: 0 0 22px;
}
#index #ingredients .about-text ul li p:first-child{
 width: 85px;
 background: #adadaf;
 text-align: center;
 border-radius: 28px;
 line-height: 2;
 margin: 0 0 15px;
 font-weight: 400;
}
#index #ingredients .about-text ul li p:last-child{
 font-weight: 400;
 line-height: 1.78;
 letter-spacing: 0.05rem;
}
#index #project{
 background-image: url("../images/bg-03.jpg");
 background-size: cover;
 background-position: 0px -1px;
 padding: 50px 0 150px;
 text-align: center;
 color: #fff;
}
#index #project p{
 margin: 50px 0 0;
 font-size: 16px;
 line-height: 2;
 letter-spacing: 0.05rem;
}
footer{
 background: #444;
 padding: 50px 0 30px;
 text-align: center;
 color: #fff;
}
footer p{
 letter-spacing: 0.1rem;
}
footer img{
 display: block;
 margin: 30px auto 100px;
}
footer copylight{
 font-size: 14px;
 font-weight: 500;
 line-height: 3.42;
}
.pc{
 display: block;
}
.sp{
 display: none;
}
@media screen and (max-width:1300px) {
 body{
  background-image: url("../images/bg-gray.jpg");
 }
 .pc{
  display: none;
 }
 .sp{
  display: block;
 }
 h2{
  font-size: 22px;
 }
 h3{
  margin: 0 0 25px;
 }
 #top{
  position: absolute;
 }
 #top > div{
  position: absolute;
  max-width: unset;
  z-index: 10;
  height: unset;
 }
 #top .concept{
  width: 100vw;
  height: 100vh;
  opacity: 1;
  transition: opacity 1s ease;
  z-index: 10000;
 }
 #top .concept.hidden {
  opacity: 0;
  transition: opacity 1s ease-out;
  z-index: 1000;
 }
 #top .concept .logo img{
  display: block;
  width: 80%;
  margin: 0 auto;
 }
 #top > div.menu{
  z-index: 1000;
  background-image: none;
 }
/*
 ハンバーガー
*/
 #top .menu header.sp,
 #top .menu header.sp nav{
  position: fixed;
  width: 100vw;
  height: fit-content;
  top: 0;
  bottom: unset;
  right: 0;
  left: unset;
 }
 #top .menu header.sp{
  height: 30px;
 }
 #top .menu ul {
  display: none;
  list-style:none;
  background-image: url("../images/bg-gray.jpg");
  height: 100vh;
  padding: 25% 0;
 }
 #top .menu .hamburger {
  position: absolute;
  top: 50%;
  right: 12%;
  cursor: pointer;
  width: 50px;
  height: 50px;
  z-index: 10;
 }
 #top .menu .hamburger span {
  transition: all .3s;
  position: absolute;
  height: 3px;
  background-color: #fff;
  width: 100%;
  z-index: 10;
  border-radius: 5px;
 }
 #top .menu .hamburger.open span{
  background-color: #fff!important;
 }
 #top .menu .hamburger span:nth-of-type(1) {
  top: 0;
 }
 #top .menu .hamburger span:nth-of-type(2) {
  top: 10px;
 }
 #top .menu .hamburger span:nth-of-type(3) {
  top: 20px;
 }
#top .menu .hamburger.open span:nth-of-type(1) {
 top: 10px;
 transform: translateY(6px) rotate(-33deg);
 }
 #top .menu .hamburger.open span:nth-of-type(2) {
  opacity: 0;
 }
 #top .menu .hamburger.open span:nth-of-type(3) {
  top: 22px;
  transform: translateY(-6px) rotate(33deg);
 }
 #top > .menu header ul li a span{
  margin: 0;
 }
 #top > .menu header ul li:not(:last-child){
  margin: 0 0 40px;
 }
 #top > .menu header ul li:last-child a{
  position: relative;
  width: fit-content;
  display: block;
  margin: auto;
  padding: 0 20px 0 0;
 }
 #top > .menu header ul li:last-child a:after{
  position: absolute;
  content: "";
  background-image: url("../images/other-link.svg");
  width: 12px;
  height: 12px;
  background-size: cover;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
 }
 #index{
  z-index: 100;
 }
 #index #main .message{
  top: 15%;
 }
 #index #main .message{
  width: 85%;
  left: 0;
  right: 0;
  margin: auto;
 }
 #index #concept{
  padding: 50px 0 0;
 }
 #index #concept h2, #index #concept p{
  padding: 0 25px;
 }
 #index #concept p{
  letter-spacing: 0.01rem;
 }
 #index #thema{
  padding: 37px 25px 81px;
 }
 #index #products{
  padding: 50px 0 25px;
 }
 #index #products .item .about{
  gap: 20px;
 }
 #index #products .item .about .txt{
  padding: 0 0 0 25px;
 }
 #index #products .item .about .txt > a{
  padding: 18px 24px 18px 55px;
 }
 #index #products .item .about .txt > a:before{
  left: 24px;
 }
 #index #products .item .profile{
  margin: 30px 25px 50px;
 }
 #index #products .item .products .modal-wrapper{
  width: 80%;
  padding: 50px 20px 40px;
 }
 #index #products .item .products .modal-content img{
  max-width: 100%;
 }
 #index #products .item .products .modal-content h2{
  margin: 9px 0 15px;
 }
 #index #project{
  padding: 50px 0 100px;
 }
 #index #project img{
  width: 70%;
 }
 #index #project p{
  font-size: 14px;
  margin: 25px 0 0;
 }
 footer copylight{
  font-size: 12px;
 }
}
/*スライダー*/
.slider-thumbnail .swiper-slide {
 opacity: .5;
 transition: opacity .5s;
 width: calc(100% / 3);
}
.slider-thumbnail .swiper-slide.swiper-slide-thumb-active {
 opacity: 1;
}
.swiper {
 max-width: 500px;
 width: 100%;
}
.swiper-slide img {
 height: auto;
 width: 100%;
}
/*スクロールエフェクト*/
.scroll_up {
 transition: 0.8s ease-in-out;
 transform: translateY(30px);
 opacity: 0;
}
.scroll_up.on {
 transform: translateY(0);
 opacity: 1.0;
}