@charset "UTF-8";
*{
    margin: 0;
    padding: 0;
}
/* 共通 */
html {
  scroll-behavior: smooth;
}
body {
  font-family: 'Noto Serif JP', serif;
  font-weight: 200;
  color: #f9f6f5;
  background: #000;
  font-size: 15px;
}
.en_page{
  font-family: 'Cormorant Infant', serif;
  background: #1a1a1a;
}
a{
  text-decoration: none;
  color: #fcfcfc;
}
/* fadein */
#splash {
/*fixedで全面に固定*/
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 999;
  background:#000;
  text-align:center;
  color:#fff;
}
#splash_logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/* Loading アイコンの大きさ設定　*/
#splash_logo img {
  width:260px;
}
.fadeUp{
animation-name: fadeUpAnime;
animation-duration:2s;
animation-fill-mode:forwards;
opacity: 0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}
.js-scroll {
  position: relative;
  opacity: 0;
}

.js-scroll::after {
  content: "";
  background-color: #0f131e;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  -webkit-transition: width 1.4s cubic-bezier(0.16, 1, 0.3, 1) 300ms;
  transition: width 1.4s cubic-bezier(0.16, 1, 0.3, 1) 300ms;
}

.js-scroll.on {
  opacity: 1;
  -webkit-animation: fadeIn 1.4s cubic-bezier(0.16, 1, 0.3, 1);
          animation: fadeIn 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@-webkit-keyframes fadeIn {
  from {
    -webkit-transform: translate(0, 30px);
            transform: translate(0, 30px);
    opacity: 0;
  }
  to {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    -webkit-transform: translate(0, 30px);
            transform: translate(0, 30px);
    opacity: 0;
  }
  to {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
    opacity: 1;
  }
}

.js-scroll.on::after {
  width: 0;
}
.fadein {
  opacity: 0;
  -webkit-transform: translateY(10px);
          transform: translateY(10px);
  -webkit-transition: all 1.5s;
  transition: all 1.5s;
}
.fadein.scrollin {
  opacity: 1;
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
}
.br-sp{
  display: none;
}
/* header */
header{
  display: none;
  position: fixed;
  top: 30px;
  right:20px;
  z-index: 5;
}
header.post{
  display: block;
  /*background: rgb(0, 0, 0,0.5);*/
}
.en{
  margin-right: 20px;
}
.en:hover{
  transition: all .4s;
  opacity: 0.6;
}
.ja{
  margin-right: 20px;
}
.ja:hover{
  transition: all .4s;
  opacity: 0.6;
}
.header_cvr_btn{
  padding: 10px 60px;
  border: 1px solid  #aaa;
  text-align: center;
  font-size: 13px;
  background: rgb(0, 0, 0,0.5);
  transition: all .4s;
}
.en_page .header_cvr_btn{
  letter-spacing: 1px;
}
.header_cvr_btn:hover{
  transition: all .4s;
  opacity: 0.6;
}
/* main visual */
.mainImg{
  width:100vw;
  height: 100vh;
  padding: 50px;
  box-sizing: border-box;
  position: relative;
}
#slider {
  width: calc(100% - 300px);
  height: calc(100vh - 100px);
}
.top_txt{
  position: absolute;
  right:160px;
  top:50%;
}
.top_logo{
  width:350px;
  text-align: center;
}
.en_page .top_logo p{
  letter-spacing: 1px;
}
.top_logo img{
  width:100%;
}
.top_cvr_btn{
  display: block;
  text-align: center;
}
.top_cvr_btn_re{
  display: inline-block;
  margin: 40px auto 0;
  width: 320px;
  height: 40px;
  border: 1px solid  #aaa;
  text-align: center;
  line-height: 40px;
  background: rgb(0, 0, 0,0.8);
  transition: all .4s;
}
.top_cvr_btn_re:hover{
  transition: all .4s;
  opacity: 0.6;
}
.en_page .top_cvr_btn_re{
  letter-spacing: 1px;
}
.top_cvr_btn_enbox{
  margin-top: 20px;
}
/* origin */
.content_wrapper{
  max-width: 900px;
  margin: 300px auto;
}
.name_origin{
  width:100%;
  position: relative;
}
.name-origin-en{
  color: #8a6921;
  font-size: 20px;
  padding-bottom: 15px;
  display: inline-block;
}
.name_origin h2{
  font-size: 36px;
  letter-spacing: 3px;
}
.en_page .name_origin h2{
  font-size: 30px;
  font-weight: 300;
  letter-spacing: 1px;
}
.origin_txt{
  padding: 60px 0 30px;
}
.origin_txt p{
  font-size: 15px;
  letter-spacing: 1.5px;
  line-height: 1.7;
  padding-bottom: 25px;
}
.en_page .origin_txt p{
  font-size: 16px;
  letter-spacing: 1px;
}
.orogin_bottom_txt p{
  text-align: right;
}
.orogin_bottom_txt p{
  font-size: 16px;
  letter-spacing: 1.5px;
  line-height: 1.8;
}
.profile_img{
  width:500px;
  position: absolute;
  top:-240px;
  right:-180px;
  z-index: -1;
}
.profile_img img{
  width:100%;
}
.img_area{
  max-width: 2000px;
  width:100%;
  margin: 0px auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.en_page .img_area{
  align-items: flex-start;
}
.img_contents{
  width:50%;
  box-sizing: border-box;
}
.img_contents_img{
  overflow: hidden;
  box-sizing: border-box;
}
 .img_contents_img img{
   width:100%;
   height: 100%;
   object-fit: cover;
 }
.img_contents_txt{
  padding: 40px 60px;
}
.img_contents_txt h2{
  font-size: 24px;
  letter-spacing: 3px;
  line-height: 2;
  padding-bottom: 30px;
}
.en_page .img_contents_txt h2{
  letter-spacing: 1px;
}
.img_contents_txt p{
  font-size: 15px;
  letter-spacing: 1.5px;
  line-height: 1.7;
  padding-bottom: 25px;
}
.img_area02{
  flex-direction: row-reverse;
}
.img_area_bottom{
  margin-bottom: 80px;
}
.award{
  width:100%;
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}
.award p{
  padding-bottom: 12px;
  letter-spacing: 1px;
  line-height: 1.4;
}
.award a{
  padding-bottom: 2px;
  border-bottom: 1px solid #fff;
  transition: all .4s;
}
.award a:hover{
  transition: all .4s;
  opacity: 0.6;
}
.store_section{
  margin: 80px auto 120px;
  width:100%;
  max-width: 1200px;
}
.store_info{
  display: flex;
  justify-content: space-between;
  align-items:flex-end;
  margin-bottom: 80px;
}
.store_info_img,.store_info_txt{
  width: calc(100% / 2);
}
.store_info_txt{
  box-sizing: border-box;
  padding-left: 60px;
}
.store_info_txt_top{
  display: flex;
  align-items:center;
}
.insta{
  margin-left: 20px;;
  width:20px;
}
.store_info_txt p{
  line-height: 2;
  font-size: 14px;
  letter-spacing: 1px;
}
.store_info_img img{
  width:100%;
}
.store_logo{
  width:180px;
  padding-bottom: 20px;
  text-align: center;
}
.store_logo img{
  width:100%;
}
.map{
  margin-top: 20px;
  display: inline-block;
  position: relative;
}
.map a{
  padding: 20px 50px;
  font-size: 13px;
  border: 1px solid  #aaa;
  display: inline-block;
  letter-spacing: 1.5px;
  transition: all .4s;
}
.map a:hover{
  transition: all .4s;
  opacity: 0.6;
}
.browser{
  position: absolute;
  top:8px;
  right: 8px;
  width:15px;
}
footer{
  text-align: center;
  border-top: 1px solid #333333;
}
footer p{
  font-size: 13px;
  padding: 20px 0;
  letter-spacing: 1px;
  color: #aaa;
}

@media screen and (max-width: 1180px) {
  #slider{
    width: calc(100% - 200px);
  }
  .content_wrapper{
    margin-bottom: 100px;
  }
  .img_contents_txt p{
    font-size: 14px;
  }
  .profile_img{
    width:450px;
    right: -80px;
  }
  .store_section{
    width:90%;
  }
}
@media screen and (max-width: 820px) {
  .mainImg{
    padding: 0;
    height: 100vh;
  }
  #slider{
    width: 100%;
    height: 100vh;
  }
  .top_txt{
    top: 50%;
    right: 50%;
    transform: translate(50%, -50%);
  }
  .top_logo{
    width:300px;
  }
  .content_wrapper{
    width:85%;
  }
  .profile_img{
    width:400px;
    right: 0px;
  }
  .img_area,.store_info{
    display: block;
  }
  .img_area_bottom{
    margin-bottom: 80px;
  }
  .img_contents{
    width:100%;
  }
  .store_info_img, .store_info_txt{
    width:90%;
    margin: 0 auto;
  }
  .store_info_txt{
    margin-top: 40px;
    padding-left: 0;
  }
}
@media screen and (max-width: 420px) {
  .br-sp{
    display: block;
  }
  #splash_logo img{
    width:200px;
  }
  .header_cvr_btn{
    padding: 10px 40px;
  }
  .top_logo{
    width:200px;
    margin: 0 auto;
  }
  .top_cvr_btn a{
    width:260px;
  }
  .profile_img{
    width:280px;
    top:-250px;
  }
  .name_origin h2{
    font-size: 28px;
  }
  .name-origin-en{
    font-size: 18px;
  }
  .origin_txt p{
    font-size: 14px;
  }
  .img_contents_txt{
    padding: 25px;
  }
  .img_contents_txt h2{
    font-size: 4.6vw;
  }
  .img_area02{
    margin-bottom: 0;
  }
  .award{
  padding: 0 20px;
  box-sizing: border-box;
}
  .store_logo{
    width:120px;
  }
  .insta{
    width:16px;
  }
  .store_section{
    margin: 60px auto 40px;
  }
}