@charset "UTF-8";
/*import
------------------------------------------*/
/*reset*/
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Sans+JP:wght@200;300;400&display=swap");
*, *:after, *:before {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box; }

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent; }

html {
  font-size: 100%; }

body {
  line-height: 1; }

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

nav ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  outline: none !important; }

/* change colours to suit your needs */
ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none; }

/* change colours to suit your needs */
mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: 700; }

del {
  text-decoration: line-through; }

abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  cursor: help; }

dfn {
  font-weight: 400;
  font-style: normal; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

input, select {
  vertical-align: middle; }

li {
  list-style: none; }

/*html body and base setting*/
html {
  overflow-y: scroll;
  font-size: 62.5%;
  padding: 0;
  margin: 0;
  width: 100%; }

body {
  position: relative;
  overflow: hidden;
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1.6;
  background: #fff;
  color: #333;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  width: 100%;
  height: 100%;
  margin: auto;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures contextual;
  font-feature-settings: "kern", "liga", "clig", "calt"; }

p {
  font-size: 1.4rem; }

a {
  color: #333; }

sup {
  vertical-align: super;
  font-size: .5em; }

a:link,
a:visited {
  text-decoration: none; }

a:active,
a:hover {
  text-decoration: none; }

figure {
  position: relative; }

img {
  max-width: 100%;
  width: auto;
  height: auto;
  vertical-align: top; }

/*util*/
.ac {
  text-align: center; }

.al {
  text-align: left; }

.ar {
  text-align: right; }

/* visible or hidden
--------------------------------------------------------------------------------*/
@media only screen and (max-width: 991px) {
  .visible-pc {
    display: none !important; } }
@media only screen and (max-width: 767px) {
  .visible-pctb {
    display: none !important; }

  .visible-tb {
    display: none !important; } }
@media only screen and (min-width: 992px) {
  .visible-tbsp {
    display: none !important; }

  .visible-tb {
    display: none !important; } }
@media only screen and (min-width: 768px) {
  .visible-sp {
    display: none !important; } }
/*数値の設定
------------------------------------------*/
/*上記数値の設定を呼び出しているmixin
------------------------------------------*/
/*
よく使用するmixin
------------------------------------------*/
/*base
------------------------------------------*/
body {
  font-family: "Montserrat", sans-serif; }
  body img {
    width: 100%; }

#main {
  padding: 3.75vw 0 0;
  /* addclass-slider */ }
  @media only screen and (max-width: 767px) {
    #main {
      padding: 5.33333335% 0 0; } }
  #main #logo {
    position: fixed;
    top: 0;
    left: 0;
    width: 16.87500vw;
    z-index: 100; }
    @media only screen and (max-width: 767px) {
      #main #logo {
        width: 32vw; } }
  #main .addclass-slider {
    max-width: 92.5%;
    height: 55vw;
    margin: 0 auto;
    position: relative; }
    @media only screen and (max-width: 767px) {
      #main .addclass-slider {
        max-width: 89.3333333%;
        height: 160vw; } }
    #main .addclass-slider li.slide {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 10;
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
      opacity: 0;
      transition: all 1.5s; }
      #main .addclass-slider li.slide.slide1 {
        background-image: url("../img/top/main_pc.png"); }
        @media only screen and (max-width: 767px) {
          #main .addclass-slider li.slide.slide1 {
            background-image: url("../img/top/main_sp.png"); } }
      #main .addclass-slider li.slide.slide2 {
        background-image: url("../img/top/main2_pc.png"); }
        @media only screen and (max-width: 767px) {
          #main .addclass-slider li.slide.slide2 {
            background-image: url("../img/top/main2_sp.png"); } }
      #main .addclass-slider li.slide .line-box {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 100; }
        #main .addclass-slider li.slide .line-box .line {
          position: relative; }
          #main .addclass-slider li.slide .line-box .line::after {
            content: "";
            display: block;
            width: 0;
            height: 5px;
            background: #ff0402; }
            @media only screen and (max-width: 767px) {
              #main .addclass-slider li.slide .line-box .line::after {
                height: 3px; } }
  #main.scene-01 .addclass-slider li.slide:nth-of-type(1), #main.scene-02 .addclass-slider li.slide:nth-of-type(2), #main.scene-03 .addclass-slider li.slide:nth-of-type(3) {
    opacity: 1; }
  #main.scene-01 .addclass-slider li.slide:nth-of-type(1) .line::after, #main.scene-02 .addclass-slider li.slide:nth-of-type(2) .line::after, #main.scene-03 .addclass-slider li.slide:nth-of-type(3) .line::after {
    transition: all 6s;
    width: 100%; }

#intro {
  padding: 80px 40px;
  text-align: center; }
  @media only screen and (max-width: 767px) {
    #intro {
      padding: 60px 40px; } }
  #intro p .en {
    font-size: 4vw;
    letter-spacing: -.05em;
    display: block;
    font-weight: bold; }
    @media only screen and (max-width: 767px) {
      #intro p .en {
        font-size: 36px;
        text-align: left;
        margin-bottom: 20px;
        line-height: 1.4; } }
  #intro p .jp {
    font-size: 21px;
    font-weight: bold; }
    @media only screen and (max-width: 767px) {
      #intro p .jp {
        display: block;
        font-size: 16px;
        text-align: left; } }

#ffect_flower {
  position: relative;
  margin-bottom: 80px; }
  @media only screen and (max-width: 767px) {
    #ffect_flower {
      margin-bottom: 40px; } }
  #ffect_flower div {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: calc(50% - 720px); }
    @media only screen and (max-width: 1600px) {
      #ffect_flower div {
        left: calc(50% - 585px); } }
    @media only screen and (max-width: 1280px) {
      #ffect_flower div {
        left: 80px;
        width: calc(50vw - 80px); } }
    @media only screen and (max-width: 767px) {
      #ffect_flower div {
        position: relative;
        transform: none;
        width: calc(100% - 80px);
        margin: 0 auto;
        left: 0; } }
    #ffect_flower div h3 {
      font-size: 36px;
      font-weight: bold;
      margin-bottom: 30px; }
      @media only screen and (max-width: 767px) {
        #ffect_flower div h3 {
          font-size: 30px;
          margin-bottom: 20px; } }
    #ffect_flower div p {
      font-size: 16px;
      line-height: 2; }
      #ffect_flower div p + p {
        margin-top: 20px; }
  #ffect_flower figure {
    width: 50%;
    margin: 0 0 0 auto; }
    @media only screen and (max-width: 767px) {
      #ffect_flower figure {
        width: calc(100% - 20px);
        margin: 0 0 40px; } }

#line_up {
  width: calc(50% + 720px);
  margin-left: auto;
  margin-bottom: 80px; }
  @media only screen and (max-width: 1600px) {
    #line_up {
      width: calc(50% + 585px); } }
  @media only screen and (max-width: 1280px) {
    #line_up {
      width: calc(100% - 80px); } }
  @media only screen and (max-width: 767px) {
    #line_up {
      width: calc(100% - 40px); } }
  #line_up h2 {
    font-size: 36px;
    font-weight: bold;
    border-bottom: #000 1px solid;
    margin-bottom: 40px; }
    @media only screen and (max-width: 767px) {
      #line_up h2 {
        font-size: 30px; } }
  #line_up .section-slider-inner .section-slider-inner-box {
    position: relative; }
    #line_up .section-slider-inner .section-slider-inner-box li {
      margin-right: 36px; }
      #line_up .section-slider-inner .section-slider-inner-box li figure img {
        display: block;
        width: 100%; }
      #line_up .section-slider-inner .section-slider-inner-box li p {
        font-size: 14px;
        margin-top: 12px;
        line-height: 1.6;
        font-style: italic;
        font-weight: 600; }
  #line_up .slick-list {
    padding-right: 10%; }

#designer {
  width: calc(50% + 720px);
  margin-left: auto;
  margin-bottom: 80px; }
  @media only screen and (max-width: 1600px) {
    #designer {
      width: calc(50% + 585px); } }
  @media only screen and (max-width: 1280px) {
    #designer {
      width: calc(100% - 80px); } }
  @media only screen and (max-width: 767px) {
    #designer {
      width: calc(100% - 40px); } }
  #designer h2 {
    font-size: 36px;
    font-weight: bold;
    border-bottom: #000 1px solid;
    margin-bottom: 40px; }
    @media only screen and (max-width: 767px) {
      #designer h2 {
        font-size: 30px; } }
  #designer ul {
    display: flex;
    align-items: center;
    gap: 40px;
    max-width: 1440px; }
    @media only screen and (max-width: 1600px) {
      #designer ul {
        max-width: 1170px; } }
    @media only screen and (max-width: 1280px) {
      #designer ul {
        width: calc(100% - 80px); } }
    @media only screen and (max-width: 767px) {
      #designer ul {
        width: calc(100% - 40px);
        display: block; } }
    #designer ul li {
      flex: 1; }
      #designer ul li a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 120px;
        background: #efefef;
        border-radius: 10px;
        padding: 0 40px;
        font-size: 21px;
        font-weight: bold; }
        @media only screen and (max-width: 767px) {
          #designer ul li a {
            height: 100px;
            padding: 0 30px;
            font-size: 18px; } }
        #designer ul li a p {
          font-size: 21px; }
          @media only screen and (max-width: 767px) {
            #designer ul li a p {
              font-size: 18px; } }
        #designer ul li a figure {
          display: flex;
          align-items: center;
          gap: 12px; }
          #designer ul li a figure img {
            width: 30px; }
            @media only screen and (max-width: 767px) {
              #designer ul li a figure img {
                width: 20px; } }
      @media only screen and (max-width: 767px) {
        #designer ul li + li {
          margin-top: 20px; } }

#copyright {
  display: block;
  font-weight: bold;
  text-align: center;
  padding-bottom: 30px; }