@import url("https://fonts.googleapis.com/css2?family=Hina+Mincho&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap");
*,
*::before,
*::after {
  box-sizing: border-box;
  font-size: 100%;
  font-style: normal;
  margin: 0;
  padding: 0;
  vertical-align: baseline; }

:where(body) {
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%; }

:where(ul, ol) {
  list-style: none; }

:where(img, iframe) {
  display: block; }

:where(img) {
  max-inline-size: 100%;
  block-size: auto; }

/* ---------- body ---------- */
html {
  height: 100%; }

body {
  color: #000;
  display: flex;
  flex-direction: column;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  letter-spacing: 0.05rem;
  line-height: 1;
  min-height: 100%;
  position: relative;
  z-index: 0; }
  body::before {
    background-image: url("../img/23171449.jpg");
    background-position: center center;
    background-size: cover;
    content: "";
    height: 100vh;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: -10; }
  body::after {
    background-color: rgba(255, 255, 255, 0.8);
    content: "";
    height: 100vh;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: -1; }

a {
  color: #000; }

/* ---------- keyvisual ---------- */
#keyvisual {
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100vh;
  padding: 0 0 0 5vw;
  position: relative;
  z-index: 0; }
  @media only screen and (max-width: 834px) {
    #keyvisual {
      height: 65vh;
      justify-content: space-between; } }
  #keyvisual h1 {
    font-family: "Hina Mincho", serif;
    font-size: 1.25rem;
    font-weight: 400;
    padding: 10px 0 0;
    order: 2; }
    @media only screen and (max-width: 834px) {
      #keyvisual h1 {
        font-size: 0.9375rem;
        line-height: 1.5;
        padding: 0 0 5vw; } }
    #keyvisual h1 br {
      display: none; }
      @media only screen and (max-width: 834px) {
        #keyvisual h1 br {
          display: block; } }
  #keyvisual p {
    font-family: "Playfair Display", serif;
    font-size: 3rem;
    font-style: italic;
    line-height: 1.2; }
    @media only screen and (max-width: 834px) {
      #keyvisual p {
        color: #333;
        font-size: 1.375rem;
        padding: 5vw 0 0; } }
  #keyvisual img {
    object-fit: cover;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1; }

#campaign {
  margin: 0 auto;
  max-width: 800px;
  padding: 100px 5vw; }
  @media only screen and (max-width: 834px) {
    #campaign {
      padding: 60px 5vw; } }
  #campaign img {
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.3);
    width: 100%; }

.title-l {
  background-position: bottom center;
  background-repeat: no-repeat;
  font-family: "Hina Mincho", serif;
  font-size: 1rem;
  font-weight: 400;
  padding: 0 0 50px;
  text-align: center; }
  @media only screen and (max-width: 834px) {
    .title-l {
      background-image: url("../img/deco1.svg");
      background-size: 200px auto !important;
      font-size: 0.875rem;
      margin: 0 0 35px !important;
      padding: 0 0 40px; } }
  .title-l::before {
    content: attr(data-en);
    display: block;
    font-family: "Playfair Display", serif;
    font-size: 2.5rem;
    font-style: italic;
    font-weight: 400;
    line-height: 1.2;
    padding: 0 0 5px; }
    @media only screen and (max-width: 834px) {
      .title-l::before {
        font-size: 1.75rem;
        padding: 0 0 10px; } }
  .title-l._deco {
    background-image: url("../img/deco1.svg");
    background-size: 300px auto;
    margin: 0 0 40px; }

#promise {
  display: flex;
  flex-wrap: wrap;
  padding: 0 0 100px; }
  @media only screen and (max-width: 834px) {
    #promise {
      padding: 0 0 60px; } }
  #promise > div {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    order: 3;
    padding: 30px 50px; }
    @media only screen and (max-width: 834px) {
      #promise > div {
        padding: 60px 5vw 0; } }
    #promise > div h2 {
      text-align: left; }
      @media only screen and (max-width: 834px) {
        #promise > div h2 {
          text-align: center; } }
    #promise > div ul {
      display: flex;
      flex-direction: column;
      gap: 30px 0; }
      #promise > div ul li {
        font-family: "Hina Mincho", serif;
        font-size: 1.25rem;
        line-height: 1.7; }
        @media only screen and (max-width: 834px) {
          #promise > div ul li {
            font-size: 1.125rem; } }
        #promise > div ul li::before {
          content: attr(data-en);
          display: block;
          font-family: "Playfair Display", serif;
          font-size: 1.125rem;
          font-style: italic;
          font-weight: 400;
          line-height: 1.2;
          padding: 0 0 5px; }
  #promise > ul {
    width: 50%; }
    @media only screen and (max-width: 834px) {
      #promise > ul {
        width: 100%; } }
    #promise > ul div {
      height: 100%; }
      #promise > ul div li {
        height: 100%; }
    #promise > ul img {
      height: 100%;
      object-fit: cover;
      width: auto; }

#point {
  margin: 0 auto;
  max-width: 1600px;
  padding: 0 5vw 100px; }
  @media only screen and (max-width: 834px) {
    #point {
      padding: 0 5vw 60px; } }
  #point > p {
    font-size: 1.25rem;
    font-weight: 300;
    line-height: 1.8;
    padding: 0 0 55px;
    text-align: center; }
    @media only screen and (max-width: 834px) {
      #point > p {
        font-size: 0.9375rem;
        font-weight: 500;
        padding: 0 0 35px;
        text-align: left; } }
  #point > ul {
    padding: 0 0 40px; }
    @media only screen and (max-width: 834px) {
      #point > ul {
        padding: 0; } }
    #point > ul li {
      align-items: center;
      display: flex;
      padding: 0 0 60px; }
      @media only screen and (max-width: 834px) {
        #point > ul li {
          flex-direction: column;
          padding: 0 0 30px; } }
      #point > ul li div {
        flex: 1;
        padding: 0 50px; }
        @media only screen and (max-width: 834px) {
          #point > ul li div {
            order: 2;
            padding: 0; } }
        #point > ul li div h3 {
          font-family: "Hina Mincho", serif;
          font-size: 1.375rem;
          font-weight: 500;
          line-height: 1.6; }
          @media only screen and (max-width: 834px) {
            #point > ul li div h3 {
              font-size: 1rem;
              text-align: center; } }
        #point > ul li div p {
          font-size: 0.875rem;
          font-weight: 300;
          line-height: 2;
          padding: 20px 0 0; }
          @media only screen and (max-width: 834px) {
            #point > ul li div p {
              padding: 10px 0 0; } }
      #point > ul li img {
        aspect-ratio: 16 / 8;
        object-fit: cover;
        width: 55%; }
        @media only screen and (max-width: 834px) {
          #point > ul li img {
            margin: 0 0 30px;
            width: 100%; } }
      #point > ul li:nth-child(even) div {
        order: 2; }

#more {
  background-color: rgba(255, 255, 255, 0.5);
  border: rgba(0, 0, 0, 0.5) 1px solid;
  margin: 0 auto;
  max-width: 1000px;
  padding: 40px; }
  @media only screen and (max-width: 834px) {
    #more {
      padding: 10vw 5vw 5vw; } }
  #more > p {
    background-image: url("../img/deco2.svg");
    background-position: bottom center;
    background-repeat: no-repeat;
    background-size: 100px auto;
    padding: 0 0 20px;
    font-family: "Hina Mincho", serif;
    font-size: 1.25rem;
    text-align: center; }
  #more ul li {
    padding: 30px 0 0; }
    #more ul li h3 {
      font-family: "Hina Mincho", serif;
      font-size: 1.125rem;
      font-weight: 500;
      line-height: 1.6; }
      @media only screen and (max-width: 834px) {
        #more ul li h3 {
          font-size: 1rem; } }
    #more ul li p {
      font-size: 0.875rem;
      font-weight: 300;
      line-height: 2;
      padding: 5px 0 0; }
      @media only screen and (max-width: 834px) {
        #more ul li p {
          font-size: 0.8135rem; } }

#dress {
  padding: 0 5vw 100px; }
  @media only screen and (max-width: 834px) {
    #dress {
      padding: 0 5vw 60px; } }
  #dress #dress-list {
    display: grid;
    font-family: "Hina Mincho", serif;
    font-size: 1rem;
    font-weight: 500;
    gap: 0 30px;
    grid-template-columns: repeat(6, 1fr);
    line-height: 1.4;
    margin: 0 0 100px;
    text-align: center; }
    @media only screen and (max-width: 834px) {
      #dress #dress-list {
        font-size: 0.875rem;
        gap: 8vw 5vw;
        grid-template-columns: repeat(2, 1fr); } }
    #dress #dress-list img {
      background-image: url("../img/deco2.svg");
      background-position: top center;
      background-repeat: no-repeat;
      background-size: 100px auto;
      padding: 30px 0 0;
      margin: 10px 0 0; }
      @media only screen and (max-width: 834px) {
        #dress #dress-list img {
          background-size: 70px auto;
          padding: 20px 0 0;
          margin: 5px 0 0; } }
  #dress #dress-link {
    display: flex;
    gap: 8vw 5vw;
    margin: 0 auto;
    max-width: 1200px; }
    @media only screen and (max-width: 834px) {
      #dress #dress-link {
        flex-direction: column; } }
    #dress #dress-link li {
      width: 100%; }
      #dress #dress-link li a {
        background-color: #fff;
        box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.2);
        display: block;
        font-family: "Hina Mincho", serif;
        font-size: 1.25rem;
        padding: 0 0 25px;
        text-align: center;
        text-decoration: none; }
        @media only screen and (max-width: 834px) {
          #dress #dress-link li a {
            font-size: 1rem; } }
        #dress #dress-link li a img {
          aspect-ratio: 4 / 3;
          object-fit: cover;
          margin: 0 0 25px; }
      #dress #dress-link li p {
        font-size: 0.875rem;
        font-weight: 300;
        line-height: 2;
        padding: 15px 10px 0; }

#flow {
  margin: 0 auto;
  max-width: 1200px;
  padding: 0 5vw; }
  #flow ol {
    padding: 0 0 60px; }
    #flow ol li {
      align-items: flex-start;
      display: flex;
      padding: 0 0 40px;
      position: relative; }
      @media only screen and (max-width: 834px) {
        #flow ol li {
          flex-wrap: wrap; } }
      #flow ol li::before {
        align-items: center;
        aspect-ratio: 1 / 1;
        border: #333 1px solid;
        border-radius: 9999px;
        content: attr(data-num);
        display: flex;
        font-family: "Playfair Display", serif;
        font-size: 2rem;
        font-style: italic;
        font-weight: 400;
        justify-content: center;
        padding: 0 0 5px;
        width: 49px; }
      #flow ol li::after {
        background-color: #333;
        content: "";
        left: 24px;
        height: calc(100% - 49px);
        position: absolute;
        top: 49px;
        width: 1px; }
      #flow ol li:last-child::after {
        display: none; }
      #flow ol li div {
        flex: 1;
        padding: 7px 50px 0 20px; }
        @media only screen and (max-width: 834px) {
          #flow ol li div {
            padding: 7px 0 0 20px; } }
        #flow ol li div h3 {
          font-family: "Hina Mincho", serif;
          font-size: 1.375rem;
          font-weight: 500;
          line-height: 1.6; }
          @media only screen and (max-width: 834px) {
            #flow ol li div h3 {
              font-size: 1.125rem; } }
        #flow ol li div p {
          font-size: 0.875rem;
          font-weight: 300;
          line-height: 2;
          padding: 10px 0 0; }
          @media only screen and (max-width: 834px) {
            #flow ol li div p {
              font-size: 0.8135rem;
              line-height: 1.7; } }
      #flow ol li img {
        aspect-ratio: 16 / 9;
        object-fit: cover;
        width: 35%; }
        @media only screen and (max-width: 834px) {
          #flow ol li img {
            margin: 20px 0 0 auto;
            width: calc(100% - 69px); } }

#contact {
  margin: 0 auto;
  max-width: 1200px;
  padding: 0 5vw 100px; }
  @media only screen and (max-width: 834px) {
    #contact {
      padding: 0 5vw 60px; } }
  #contact > ul {
    display: flex;
    gap: 10vw 4vw; }
    @media only screen and (max-width: 834px) {
      #contact > ul {
        flex-direction: column; } }
    #contact > ul li {
      width: 100%; }
      #contact > ul li h3 {
        border-bottom: #333 1px dotted;
        font-family: "Hina Mincho", serif;
        font-size: 1rem;
        font-weight: 500;
        line-height: 1.4;
        margin: 0 0 5px;
        padding: 20px 0 15px;
        text-align: center; }
        #contact > ul li h3 em {
          display: block;
          font-size: 1.375rem; }
          @media only screen and (max-width: 834px) {
            #contact > ul li h3 em {
              font-size: 1.25rem; } }
      #contact > ul li p {
        line-height: 1.4;
        padding: 15px 0 0;
        text-align: center; }
        @media only screen and (max-width: 834px) {
          #contact > ul li p {
            font-size: 0.875rem; } }
        #contact > ul li p span {
          display: block;
          font-size: 0.875rem;
          padding: 5px 0 0; }
        #contact > ul li p > a {
          background-image: url("../img/phone.svg");
          background-position: 0 center;
          background-repeat: no-repeat;
          font-family: "Hina Mincho", serif;
          font-size: 1.75rem;
          display: inline-block;
          padding: 0 0 0 30px;
          text-decoration: none; }

#contact-line {
  padding: 0 0 25px; }
  #contact-line p {
    font-size: 1rem;
    line-height: 1.8;
    padding: 0 0 25px;
    text-align: center; }
    #contact-line p a {
      background-color: #06c755;
      background-image: url("../img/line.svg");
      background-position: 15px center;
      background-repeat: no-repeat;
      background-size: 30px auto;
      border-radius: 3px;
      color: #fff;
      display: inline-block;
      font-size: 1.125rem;
      font-weight: 700;
      padding: 10px 15px 10px 55px;
      text-decoration: none; }
      @media only screen and (max-width: 834px) {
        #contact-line p a {
          font-size: 1rem;
          line-height: 1.6; } }

#contact section > p {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.8;
  padding: 0 0 15px;
  text-align: center; }
  @media only screen and (max-width: 834px) {
    #contact section > p {
      font-size: 0.9375rem; } }
#contact section ul {
  background-color: rgba(255, 255, 255, 0.5);
  border: #06c755 5px solid;
  margin: 0 auto 80px;
  max-width: 640px;
  padding: 40px 40px 0; }
  @media only screen and (max-width: 834px) {
    #contact section ul {
      margin: 0 auto 60px;
      padding: 7vw 5vw 0; } }
  #contact section ul li {
    padding: 0 0 40px; }
    @media only screen and (max-width: 834px) {
      #contact section ul li {
        padding: 0 0 7vw; } }
    #contact section ul li h3 {
      font-weight: 500;
      font-size: 1.25rem;
      line-height: 1.6; }
      @media only screen and (max-width: 834px) {
        #contact section ul li h3 {
          font-size: 1.125rem; } }
      #contact section ul li h3 em {
        color: #06c755;
        padding: 0 5px 0 0; }
    #contact section ul li p {
      font-size: 0.875rem;
      line-height: 1.7;
      padding: 10px 0 0; }

#footer p.logo {
  margin: 0 auto;
  width: 100px; }
#footer p.copyright {
  font-size: 0.75rem;
  padding: 30px 0 50px;
  text-align: center; }