@charset "UTF-8";

/*----------------------------
  brand top
----------------------------*/
/* mainvisual */
#mainvisual .img_area { width: 100%; position: relative; }
#mainvisual .main_ttl { width: 28%; position: absolute; top: 20%; left: 0; right: 0; margin: 0 auto; z-index: 5; }
#mainvisual .main_img { width: 100%; position: absolute; top: 0; left: 0; z-index: 4; }

/* project */
#project {
  padding: 12rem 0;
  /*padding: 12rem 0 24rem;*/
  background: url(../img/project_bg.jpg) no-repeat center top / cover;
}
#project .project_wrap { position: relative; }
#project .project_wrap::before,
#project .project_wrap::after { content: ''; width: 100%; height: 4px; background-color: #575f6b; position: absolute; left: 0; right: 0; margin: 0 auto; }
#project .project_wrap::before { top: 0; }
#project .project_wrap::after { bottom: 0; }
#project .project_inner { position: relative; padding: 0 6rem 6rem; }
/*#project .project_inner::before,
#project .project_inner::after { content: ''; width: 1px; height: calc(100% - 22px); background-color: #575f6b; position: absolute; top: 11px; }
#project .project_inner::before { left: 0; }
#project .project_inner::after { right: 0; }*/
#project .project_ttl_area { width: fit-content; margin: 0 auto; padding: 3.5rem 7rem 3rem; background-color: #575f6b; position: relative; transform: translateY(-50%); }
#project .project_ttl_area::before { content: ''; width: 30%; height: auto; aspect-ratio: 220 / 162; background: url(../img/project_txt.png) no-repeat center / 100%; transform: translate(60%, -40%); position: absolute; top: 0; right: 0; }
#project .project_ttl { max-width: 468px; }
#project .project_txt { font-size: 2rem; font-weight: bold; text-align: center; line-height: 2; }
#project .project_btn { margin-top: 4rem; text-align: center; }
#project .project_btn a { background-color: #d6a516; }
#project .project_btn a:hover { background-color: #2e5988; }

/* concept */
#concept {
  padding: 12rem 0 20rem;
  /*padding: 12rem 0 24rem;*/
  /*background: url(../img/concept_bg.jpg) no-repeat bottom right / 60%;*/
}
#concept .concept_wrap { display: flex; justify-content: center; align-items: center; }
#concept .concept_txt_area { margin-left: 7rem; padding: 1rem 7rem 2rem; border-left: 3px solid #000; }
#concept .concept_ttl { max-width: 179px; }
#concept .concept_ttl_sub { font-size: 3.8rem; line-height: 1.4; font-weight: bold;}
#concept .concept_txt { font-size: 1.8rem; line-height: 2.5; margin-top: 2rem; }
#concept .concept_img { margin-top: 10rem; width: calc(((100vw - 100%) / 2) + 100%); transform: translateX(calc((100vw - 100%) * -1)); }
#concept .concept_btn { margin: 1rem 19rem 0; text-align: right; }

/* products */
#products {
  padding-bottom: 12rem;
  background-color: #e7ebf0;
  position: relative;
}
#products::before { content: ''; width: 8%; height: 100%; background-color: #fff; position: absolute; top: 0; left: 0; }
#products::after { content: ''; width: 1%; height: auto; aspect-ratio: 36 / 592; background: url(../img/products_ttl_v.png) no-repeat center / contain; position: absolute; top: 0; left: 3%; }
#products .products_top .products_ttl { max-width: 277px; margin: 0 auto; transform: translateY(-50%); }
#products .products_top .products_txt { margin-top: 2rem; font-size: 2rem; text-align: center; }
#products .products_inner { width: 84%; background-color: #fff; margin: 5rem 0 0 auto; padding-bottom: 6rem; }
#products .products_wrap { display: flex; flex-direction: row-reverse; align-items: center; }
#products .products_img { width: 65%; }
#products .products_txt_area { width: 35%; padding-left: 5%; }
#products .products_ttl_sub { font-size: 3rem; font-weight: bold; margin-bottom: 3rem; padding-bottom: 3rem; width: fit-content; position: relative; line-height: 1.6;}
#products .products_ttl_sub::before { content: ''; width: 8rem; height: 1px; background-color: #bebdc2; position: absolute; bottom: 0; left: 0; right: 0; margin: 0 auto; }
#products .products_ttl_item { font-size: 2.2rem; line-height: 1.6;}
#products .products_txt { font-size: 1.8rem; line-height: 1.8; margin-top: 1rem; }
#products .products_list { margin-top: 6rem; display: flex; flex-wrap: wrap; }
#products .products_list li { width: 50%; padding-left: 10%; }
#products .products_list li:not(:last-child) { margin-bottom: 6rem; }
#products .products_list .list_ttl { font-size: 2rem; font-weight: bold; text-align: left; margin-bottom: 3rem; padding: 1.5rem 0; border-bottom: 2px solid #000; line-height: 1.6;}
#products .products_list .products_ttl_item { font-size: 2rem; }
#products .products_list .products_btn { text-align: center; }
#products .products_btn { margin-top: 3rem; }

/* lineup */
#lineup {
  padding: 10rem 0;
  background-image: url(../img/lineup_bg_mask.png), url(../img/lineup_bg.jpg);
  background-position: bottom center, top center;
  background-size: 100% auto;
  background-repeat: no-repeat;
}
#lineup .lineup_ttl { max-width: 191px; }
#lineup .headline { margin-top: 3rem; padding-bottom: .5rem; font-size: 1.4rem; font-weight: bold; border-bottom: 2px solid #a7a6a6; }
#lineup .list_ttl { margin-top: 2.5rem; font-size: 2.2rem; font-weight: bold; line-height: 1.4; }
#lineup .list_ttl.fs_min { margin-top: 3rem; font-size: 2rem; }
#lineup .list_ttl.f_mask { margin-top: 2.65rem; }
#lineup .list_ttl span { font-size: 70%; font-weight: normal; }
#lineup .list_ttl span.line2 { font-size: 80%; font-weight: bold; display: inline-block; transform: translateY(-0.2em); }
#lineup .list_ttl.fs_min span { font-weight: bold; }
#lineup .lineup_txt { margin-top: 1rem; font-size: 1.8rem; }
#lineup .lineup_txt span { font-size: 80%; }
#lineup .lineup_btn { margin-top: 2rem; text-align: center; }
#lineup .lineup_list { margin-top: 7rem; display: flex; align-items: flex-end; }
#lineup .lineup_wrap { position: relative; }
#lineup .swiper-button-prev,
#lineup .swiper-button-next { width: 4rem; height: auto; aspect-ratio: 40 / 10; top: 40%; }
#lineup .swiper-button-prev { background: url(../img/sl_prev.png) no-repeat center / 100%; left: -4rem; }
#lineup .swiper-button-next { background: url(../img/sl_next.png) no-repeat center / 100%; right: -4rem; }
#lineup .swiper-button-prev::after,
#lineup .swiper-button-next::after { content: none; }
#lineup .line2 .list_ttl { margin-top: .5rem; }
#lineup .line2 .lineup_txt { margin-top: 0; }
@media screen and (min-width: 768px) {
  #lineup .btn_more_b::before { width: 30%; aspect-ratio: 63 / 6; background-image: url(../../common/img/arrow_br02.png); right: 4rem; }
}

/* series */
#series {
  padding: 12rem 0 15rem;
  background: url(../img/series_bg.jpg) no-repeat bottom right / 100%;
}
#series .series_ttl { max-width: 429px; margin: 0 auto; }
#series .list_ttl { margin-top: 2rem; font-size: 2.4rem; font-weight: bold; text-align: center; }
#series .series_txt { margin-top: 1rem; padding: 0 1rem; font-size: 1.8rem; line-height: 1.8; }
#series .series_btn { margin-top: 3rem; text-align: center; }
#series .series_list { margin-top: 6rem; display: flex; justify-content: space-between; }
#series .series_list li { width: 32%; }

/* trialset */
#trialset { margin-top: 16rem; }
#trialset .trialset_wrap { display: flex; position: relative; }
#trialset .trialset_txt_area { width: 30%; }
#trialset .trialset_img { width: 70%; transform: translateX(120px); }
#trialset .trialset_ttl { max-width: 213px; }
#trialset .trialset_txt { margin-top: 4rem; padding-top: 4rem; font-size: 1.8rem; border-top: 1px solid #000; }
#trialset .concept_btn { position: absolute; bottom: 0; left: 0; }

/* brandstory */
#brandstory {
  margin-top: 10rem;
  padding: 10rem 0 14rem;
  background: url(../img/brandstory_bg.jpg) no-repeat bottom center / 100%;
  border-top: 1px solid #ece9e7;
}
#brandstory .inner { max-width: 100%; padding: 0; }
#brandstory .story_wrap { display: flex; align-items: flex-end; }
#brandstory .story_txt_area { max-width: 540px; padding: 0 4rem 0 8rem; position: relative; transform: translateY(8rem); }
#brandstory .story_txt_area::before { content: ''; width: 80%; height: auto; aspect-ratio: 451 / 432; background: url(../img/brandstory_img02.png) no-repeat center / contain; transform: translate(35%, -75%); position: absolute; top: 0; right: 0; }
#brandstory .story_img { width: 50%; }
#brandstory .story_ttl { font-size: 2.4rem; line-height: 1.6;}
#brandstory .story_ttl span { display: inline-block; padding-left: 1.5em; position: relative; }
#brandstory .story_ttl span::before { content: ''; width: 1.2em; height: 1px; background-color: #000; position: absolute; top: 50%; left: 0; }
#brandstory .story_txt { margin-top: 2rem; font-size: 1.8rem; line-height: 1.8; }
#brandstory .story_btn { margin-top: 3rem; }
#brandstory .story_btn .btn_more_w { padding: 1rem 6.2rem 1rem 3rem; }

/* column */
#column { margin-top: 12rem; }
#column .inner { max-width: 100%; padding: 0; }
#column .column_wrap { margin-top: 4rem; padding-right: 4%; display: flex; justify-content: space-between; align-items: center; }
#column .column_img_area { width: 68%; }
#column .column_txt_area { width: 28%; }
#column .column_ttl { max-width: 187px; margin: 0 auto; }
#column .column_ttl_sub { font-size: 4rem; line-height: 1.4; }
#column .column_ttl_sub span { font-size: 80%; }
#column .column_txt { margin-top: 4rem; padding-top: 4rem; font-size: 1.8rem; border-top: 1px solid #000; }
#column .column_img { width: 100%; }
#column .column_btn { margin-top: 3rem; }

#top .btn_store { margin: 6rem 0 9rem; text-align: center; }
#top .btn_store a { padding: 1.5rem 5rem 1.5rem 3rem; background-position: top 45% right 1.5rem; }
#top .btn_store a span {
  display: inline-block;
  padding-left: 3rem;
  background: url(../../common/img/onlinestore_icon_w.png) no-repeat top 2% left / 1rem;
  background-size: auto 70%;
}

/* instagram */
#instagram { margin: 0 0 9rem; }
/* #instagram .instagram_wrap a { display: flex; align-items: center; } */
#instagram .instagram_wrap a { display: block; }
#instagram .instagram_icon { max-width: 41px; margin-right: 1.5rem; margin: 0 auto; }
#instagram .instagram_txt { font-size: 1.6rem; font-weight: bold; text-align: center; margin-top: 1rem; }
#instagram .instagram_list { margin-top: 2rem; display: flex; justify-content: space-between; flex-wrap: wrap; }
#instagram .instagram_list li { width: 33%; margin-bottom: .5%; }


@media screen and (min-width: 768px) and (max-width: 1200px) {
  #project .project_ttl { max-width: 39vw; }
  #project .project_txt { font-size: 1.6vw; }
  #concept .concept_ttl { max-width: 14.9vw; }
  #concept .concept_ttl_sub { font-size: 3.16vw; }
  #concept .concept_txt { font-size: 1.5vw; }
  #concept .concept_btn { margin: 1rem 15.8vw 0; }

  #products .products_top .products_ttl { max-width: 23vw; }
  #products .products_top .products_txt { font-size: 1.6vw; }
  #products .products_ttl_sub { font-size: 2.5vw; }
  #products .products_ttl_item { font-size: 1.8vw; }
  #products .products_txt { font-size: 1.4vw; }
  #products .products_list .list_ttl { font-size: 1.6vw; }
  #products .products_list .products_ttl_item { font-size: 1.6vw; }

  #lineup { background-position: top 35vw center, top center; }
  #lineup .lineup_ttl { max-width: 15.9vw; }
  #lineup .headline { font-size: 1.16vw; }
  #lineup .list_ttl { font-size: 1.8vw; }
  #lineup .lineup_txt { font-size: 1.5vw; }

  #series .series_ttl { max-width: 35.75vw; }
  #series .list_ttl { font-size: 2vw; }
  #series .series_txt { font-size: 1.5vw; }

  #trialset .trialset_ttl { max-width: 17.75vw; }
  #trialset .trialset_txt { font-size: 1.5vw; }

  #brandstory .story_ttl { font-size: 2vw; }
  #brandstory .story_txt { font-size: 1.5vw; }
  #container .btn_blank { font-size: 1.5vw; }

  #column .column_ttl { max-width: 15.58vw; }
  #column .column_ttl_sub { font-size: 3.3vw; }
  #column .column_txt { font-size: 1.5vw; }

  #instagram .instagram_icon { max-width: 3.4vw; }
}



@media screen and (max-width: 767px) {
  
  /* mainvisual */
  #mainvisual .main_ttl { width: 58%; top: 14%; }

  /* project */
  #project { padding: 9rem 0 7rem; background-image: url(../img/project_bg_sp.jpg); background-size: cover; }
  #project .project_wrap::before,
  #project .project_wrap::after { height: 2px; }
  #project .project_inner { padding: 0 1.5rem 4rem; }
  /*#project .project_inner::before,
  #project .project_inner::after { height: calc(100% - 10px); top: 5px; }*/
  #project .project_ttl_area { padding: 2.5rem 3rem 2rem; }
  #project .project_ttl_area::before { width: 50%; transform: translate(50%, 25%); }
  #project .project_ttl { max-width: 167.5px; }
  #project .project_txt { font-size: 1.6rem; }
  #project .project_btn { margin-top: 2rem; }

  /* concept */
  #concept { /*padding: 8rem 0 16rem;*/ padding: 8rem 0; background-size: 80% auto; }
  #concept .concept_wrap { display: block; padding: 2rem 0 2rem 2rem; border-left: 3px solid #000; }
  #concept .concept_txt_area { margin-left: 0; padding: 0; border-left: none; }
  #concept .concept_ttl { max-width: 127.5px; }
  #concept .concept_ttl_sub { font-size: 2rem; margin-top: 3rem; }
  #concept .concept_txt { font-size: 1.5rem; line-height: 2; }
  #concept .concept_img { margin-top: 6rem; }
  #concept .concept_btn { margin: 2rem 0 0; text-align: right; }

  /* products */
  #products { padding-bottom: 5rem; }
  #products::before { content: none; }
  #products::after { content: none; }
  #products .products_top .products_ttl { max-width: 220px; }
  #products .products_top .products_txt { margin-top: 1rem; font-size: 1.5rem; }
  #products .products_inner { width: calc(100% - 3rem); background-color: #fff; margin: 3rem auto 0; padding-bottom: 6rem; }
  #products .products_wrap { display: block; }
  #products .products_img { width: 100%; }
  #products .products_txt_area { width: 100%; padding: 4rem; }
  #products .products_ttl_sub { font-size: 2.5rem; margin: 0 auto 2rem; padding-bottom: 2rem; }
  #products .products_ttl_item { font-size: 2rem; }
  #products .products_txt { font-size: 1.4rem; }
  #products .products_list { margin-top: 3rem; display: block; }
  #products .products_list li { width: 100%; padding-left: 0; }
  #products .products_list .list_ttl { font-size: 1.8rem; margin-bottom: 2rem; padding: 1rem 0; }
  #products .products_list .products_ttl_item { font-size: 1.6rem; }
  #products .products_btn { margin-top: 2rem; text-align: center; }

  /* lineup */
  #lineup {
    padding: 10rem 0;
    background-image: url(../img/lineup_bg_mask.png), url(../img/lineup_bg_sp.jpg);
    background-position: bottom 25% center, top center;
    background-size: 200% auto, 100% auto;
  }
  #lineup .lineup_ttl { max-width: 95.5px; margin: 0 auto; }
  #lineup .headline { margin-top: 3rem; }
  #lineup .list_ttl { margin-top: 1.5rem; font-size: 2rem; }
  #lineup .list_ttl.fs_min { margin-top: 1.5rem; }
  #lineup .list_ttl.f_mask { margin-top: 2.1rem; }
  #lineup .lineup_txt { margin-top: .5rem; font-size: 1.4rem; }
  #lineup .lineup_btn { margin-top: 3rem; }
  #lineup .lineup_list { margin-top: 7rem; display: flex; align-items: flex-end; }
  #lineup .lineup_list .img { width: 60%; margin: 0 auto; }
  #lineup .swiper-button-prev { left: -1rem; }
  #lineup .swiper-button-next { right: -1rem; }
  #lineup .list_ttl span.line2 { transform: translateY(0); }
  #lineup .list_ttl.fs_min span { font-size: 80%; }
  #lineup .line2 .list_ttl { margin-top: 1.5rem; }
  #lineup .line2 .lineup_txt { margin-top: .5rem; }

  /* series */
  #series { padding: 8rem 0 1rem; background-image: url(../img/series_bg_sp.jpg); }
  #series .series_ttl { max-width: 264px; }
  #series .list_ttl { font-size: 2rem; }
  #series .series_txt { font-size: 1.4rem; }
  #series .series_btn { margin-top: 2rem; }
  #series .series_list { margin-top: 4rem; display: block; }
  #series .series_list li { width: 100%; margin-bottom: 6rem; }

  /* trialset */
  #trialset { margin-top: 6rem; }
  #trialset .trialset_wrap { display: block; }
  #trialset .trialset_txt_area { width: 100%; }
  #trialset .trialset_img { width: 100%; margin-top: 2rem; transform: translateX(0); }
  #trialset .trialset_ttl { max-width: 121px; margin: 0 auto; }
  #trialset .trialset_txt { margin-top: 3rem; padding-top: 3rem; font-size: 1.4rem; }
  #trialset .concept_btn { margin-top: 2rem; text-align: center; position: static; }

  /* brandstory */
  #brandstory { margin-top: 5rem; padding: 5rem 0 6rem; background-image: url(../img/brandstory_bg_sp.jpg); }
  #brandstory .story_wrap { display: block; }
  #brandstory .story_txt_area { max-width: 100%; margin-top: 8rem; padding: 0 2.5rem; transform: translateY(0); }
  #brandstory .story_txt_area::before { width: 60%; aspect-ratio: 431 / 432; background-image: url(../img/brandstory_img02_sp.png); transform: translate(0, -80%); }
  #brandstory .story_img { width: 80%; }
  #brandstory .story_ttl { font-size: 1.8rem; }
  #brandstory .story_txt { font-size: 1.4rem; padding: 0 3rem; }
  #brandstory .story_btn { text-align: center; }
  #brandstory .story_btn:last-child { margin-top: 1rem; }

  /* column */
  #column { margin-top: 6rem; }
  #column .column_wrap { margin-top: 3rem; padding-right:0; display: block; }
  #column .column_img_area { width: 100%; padding-right: 2.5rem; }
  #column .column_txt_area { width: 100%; padding: 0 2.5rem; margin-top: 2rem; }
  #column .column_ttl { max-width: 105.5px; }
  #column .column_ttl_sub { font-size: 2rem; }
  #column .column_ttl_sub span { font-size: 100%; }
  #column .column_txt { margin-top: 2rem; padding-top: 2rem; font-size: 1.4rem; }
  #column .column_img { width: 100%; }
  #column .column_btn { margin-top: 2.5rem; text-align: center; }

  #top .btn_store { margin: 6rem 0 0; }
  #top .btn_store a { width: 100%; font-size: 1.7rem; text-align: center; padding: 1.8rem 0 1.2rem 0; background: #2a518e; }
  #top .btn_store a span {
    padding: 0 3rem;
    background-image: url(../../common/img/onlinestore_icon_w.png), url(../../common/img/blank_icon.png);
    background-position: top 2% left, top 10% right;
    background-size: 1.5rem auto, 2rem auto;
    background-repeat: no-repeat;
  }

  /* instagram */
  #instagram { margin: 6rem 0; }
  #instagram .inner { padding: 0; }
  #instagram .instagram_wrap { padding: 0 1.5rem; }
  #instagram .instagram_icon { max-width: 20.5px; /*margin-right: .7rem;*/ }
  #instagram .instagram_txt { font-size: 1.1rem; }

}



/*----------------------------
  animation
----------------------------*/
#top .js-fade { transform: translateY(50px); transition-duration: .8s; opacity: 0; }
#top .js-fade.show { transform: translateY(0); opacity: 1; }

#mainvisual .main_ttl,
#mainvisual .main_img,
#mainvisual .main_bg { transition-duration: 1.6s; opacity: 0; }
#mainvisual .main_ttl.show,
#mainvisual .main_img.show,
#mainvisual .main_bg.show { opacity: 1; }