@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;500;700&display=swap");
@layer foundation, vendor, layout, component, project, page, utilities;
:root {
  --sans-serif: sans-serif;
  --serif: "Shippori Mincho", serif;
  --en-sans: "", sans-serif;
  --en-serif: "", serif;
  --base: #fff;
  --black01: #333;
  --main: #000;
}

/*========================================
  ブラウザごとのデフォルトスタイルの初期化
========================================*/
@layer foundation {
  body,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  dl,
  dt,
  dd,
  ol,
  ul,
  figure {
    all: unset;
    display: revert;
  }
  body {
    line-height: 1;
  }
  ol,
  ul {
    list-style: none;
  }
  table {
    border-collapse: collapse;
    border-spacing: 0;
  }
  img {
    vertical-align: middle;
  }
}
@layer foundation {
  /*========================================
  	要素の基本的なスタイル
  ========================================*/
  html {
    height: 100%;
    scroll-behavior: smooth;
  }
  body {
    text-size-adjust: 100%;
    font-family: var(--serif);
    line-height: 1.8;
    min-width: 320px;
    color: var(--base);
    background: var(--main);
  }
  body.is-main-nav-expanded {
    overflow: hidden;
  }
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  :focus-visible {
    outline: 2px solid blue;
  }
  img,
  svg,
  iframe,
  video,
  picture {
    max-width: 100%;
  }
  img {
    letter-spacing: 0;
    font-size: 12px;
    height: auto;
  }
  a {
    word-break: break-all;
  }
  @media screen and (min-width: 768px) {
    a[href^="tel:"] {
      display: inline-block;
      pointer-events: none;
    }
  }
  small {
    font-size: 80%;
  }
  button,
  input[type=button],
  input[type=submit] {
    cursor: pointer;
    font: inherit;
  }
  button,
  input,
  select,
  textarea {
    font: inherit;
    color: inherit;
  }
  label {
    cursor: pointer;
    display: inline-block;
  }
}
/*========================================
  サイト共通のフッター
========================================*/
@layer layout {
  .l-footer {
    padding: 10px 10px 20px;
  }
  .l-footer__copyright {
    font-size: 0.875rem;
    text-align: center;
    display: block;
  }
}
/*========================================
  メインコンテンツ
========================================*/
@layer layout {
  .l-main {
    height: 100%;
    position: relative;
  }
}
/*========================================
  ページ全体のレイアウト
========================================*/
@layer layout {
  .l-page {
    width: 100%;
    min-height: 100vh;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: auto 56px;
  }
  @media screen and (max-width: 767px) {
    .l-page {
      min-height: 100svh;
    }
  }
}
/*========================================
  ボタン
========================================*/
@layer component {}
/*========================================
  container
========================================*/
@layer component {
  .c-container, .c-container--full {
    width: 100%;
    max-width: 1200px;
    margin-right: auto;
    margin-left: auto;
  }
  @media screen and (max-width: 767px) {
    .c-container, .c-container--full {
      padding-right: 20px;
      padding-left: 20px;
    }
  }
  .c-container--full {
    height: 100%;
  }
}
/*========================================
  アイコン
========================================*/
@layer component {}
/*========================================
  animation
========================================*/
@layer project {
  .p-anime-01 {
    opacity: 1;
    animation: fade-01 2s ease 1s 1 forwards;
  }
  @keyframes fade-01 {
    0% {
      opacity: 1;
    }
    75% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  .p-anime-02 {
    opacity: 0;
    animation: fade-02 5s ease 2.5s 1 forwards;
  }
  .p-anime-03 {
    opacity: 0;
    animation: fade-02 16s ease 6.5s 1 forwards;
  }
  @keyframes fade-02 {
    0% {
      opacity: 0;
    }
    25% {
      opacity: 1;
    }
    75% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  .p-anime-04 {
    opacity: 0;
    animation: fade-03 3s ease 22s 1 forwards;
  }
  @keyframes fade-03 {
    0% {
      opacity: 0;
    }
    25% {
      opacity: 1;
    }
    100% {
      opacity: 1;
    }
  }
  .p-anime-typing .active {
    opacity: 0;
    animation: typing 0.05s ease 1 forwards;
  }
  @keyframes typing {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
}
/*========================================
  text
========================================*/
@layer project {
  .p-text-br {
    display: block;
  }
  @media screen and (min-width: 768px) {
    .p-text-br-pc {
      display: block;
    }
  }
  @media screen and (max-width: 767px) {
    .p-text-br-sp {
      display: block;
    }
  }
}
/*========================================
  title
========================================*/
@layer project {
  .p-ttl__ahq {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 0.3s ease;
  }
  .p-ttl__ahq.js-show {
    clip-path: inset(0);
  }
  @media screen and (max-width: 767px) {
    .p-ttl__ahq {
      width: 53.3333333333vw;
    }
  }
}
/*========================================
  トップページ
========================================*/
@layer page {
  .page-home__contents {
    min-height: 700px;
    padding: 110px 20px 80px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  @media screen and (max-width: 767px) {
    .page-home__contents {
      min-height: 0;
      padding: 80px 20px 60px;
    }
  }
  .page-home__contents:not(.contents-01) {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .page-home__contents.contents-04 {
    pointer-events: none;
  }
  .page-home__contents.contents-04.js-click {
    pointer-events: all;
  }
  .page-home__text-01 {
    max-width: 660px;
    font-size: 4rem;
    line-height: 1.9;
  }
  @media screen and (max-width: 767px) {
    .page-home__text-01 {
      font-size: 7.7333333333vw;
    }
  }
  .page-home__text-02 {
    width: 100%;
    max-width: 690px;
    font-size: 2.3125rem;
    line-height: 1.9;
    text-align: justify;
  }
  @media screen and (max-width: 767px) {
    .page-home__text-02 {
      font-size: 4.5333333333vw;
    }
  }
  .page-home__text-03 {
    width: 100%;
    max-width: 1200px;
    max-height: 540px;
    display: flex;
    flex-wrap: wrap;
    gap: 20.7792207792vh 0;
  }
  @media (height >= 770px) {
    .page-home__text-03 {
      gap: 160px 0;
    }
  }
  @media screen and (max-width: 767px) {
    .page-home__text-03 {
      gap: 24vw 0;
    }
  }
  .page-home__text-03 .page-home__logo {
    width: 100%;
  }
  .page-home__text-03 .page-home__logo a {
    display: block;
  }
  @media (hover: hover) {
    .page-home__text-03 .page-home__logo a:hover img {
      transform: scale(1.03);
      transition: 0.3s;
    }
  }
  .page-home__text-03 .page-home__logo img {
    display: block;
    transition: 0.3s;
  }
  .page-home__text-03 .logo-analogue {
    width: 498px;
    margin: 0 auto 0 0;
  }
  @media screen and (max-width: 767px) {
    .page-home__text-03 .logo-analogue {
      width: 56vw;
    }
  }
  .page-home__text-03 .logo-honikaze {
    width: 490px;
    margin: 0 auto;
  }
  @media screen and (max-width: 767px) {
    .page-home__text-03 .logo-honikaze {
      width: 52vw;
    }
  }
  .page-home__text-03 .logo-quwadate {
    width: 490px;
    margin: 0 0 0 auto;
  }
  @media screen and (max-width: 767px) {
    .page-home__text-03 .logo-quwadate {
      width: 52vw;
    }
  }
}
/******************************
* font size
******************************/
@layer utilities {
  .u-fs-11 {
    font-size: 1.1rem;
  }
  .u-fs-12 {
    font-size: 1.2rem;
  }
  .u-fs-13 {
    font-size: 1.3rem;
  }
  .u-fs-14 {
    font-size: 1.4rem;
  }
  .u-fs-15 {
    font-size: 1.5rem;
  }
  .u-fs-16 {
    font-size: 1.6rem;
  }
  .u-fs-17 {
    font-size: 1.7rem;
  }
  .u-fs-18 {
    font-size: 1.8rem;
  }
  .u-fs-19 {
    font-size: 1.9rem;
  }
  .u-fs-20 {
    font-size: 2rem;
  }
  .u-fs-21 {
    font-size: 2.1rem;
  }
  .u-fs-22 {
    font-size: 2.2rem;
  }
  .u-fs-23 {
    font-size: 2.3rem;
  }
  .u-fs-24 {
    font-size: 2.4rem;
  }
  .u-fs-25 {
    font-size: 2.5rem;
  }
  .u-fs-26 {
    font-size: 2.6rem;
  }
  .u-fs-27 {
    font-size: 2.7rem;
  }
  .u-fs-28 {
    font-size: 2.8rem;
  }
  .u-fs-29 {
    font-size: 2.9rem;
  }
  .u-fs-30 {
    font-size: 3rem;
  }
  @media screen and (max-width: 767px) {
    .u-SP-fs-1 {
      font-size: 1vw;
    }
    .u-SP-fs-2 {
      font-size: 2vw;
    }
    .u-SP-fs-3 {
      font-size: 3vw;
    }
    .u-SP-fs-4 {
      font-size: 4vw;
    }
    .u-SP-fs-5 {
      font-size: 5vw;
    }
    .u-SP-fs-6 {
      font-size: 6vw;
    }
    .u-SP-fs-7 {
      font-size: 7vw;
    }
    .u-SP-fs-8 {
      font-size: 8vw;
    }
    .u-SP-fs-9 {
      font-size: 9vw;
    }
    .u-SP-fs-10 {
      font-size: 10vw;
    }
    .u-SP-fs-11 {
      font-size: 11vw;
    }
    .u-SP-fs-12 {
      font-size: 12vw;
    }
    .u-SP-fs-13 {
      font-size: 13vw;
    }
    .u-SP-fs-14 {
      font-size: 14vw;
    }
    .u-SP-fs-15 {
      font-size: 15vw;
    }
    .u-SP-fs-16 {
      font-size: 16vw;
    }
    .u-SP-fs-17 {
      font-size: 17vw;
    }
    .u-SP-fs-18 {
      font-size: 18vw;
    }
    .u-SP-fs-19 {
      font-size: 19vw;
    }
    .u-SP-fs-20 {
      font-size: 20vw;
    }
    .u-SP-fs-21 {
      font-size: 21vw;
    }
    .u-SP-fs-22 {
      font-size: 22vw;
    }
    .u-SP-fs-23 {
      font-size: 23vw;
    }
    .u-SP-fs-24 {
      font-size: 24vw;
    }
    .u-SP-fs-25 {
      font-size: 25vw;
    }
    .u-SP-fs-26 {
      font-size: 26vw;
    }
    .u-SP-fs-27 {
      font-size: 27vw;
    }
    .u-SP-fs-28 {
      font-size: 28vw;
    }
    .u-SP-fs-29 {
      font-size: 29vw;
    }
    .u-SP-fs-30 {
      font-size: 30vw;
    }
  }
}
/*========================================
 * hidden
 *
 * クラス : u-hidden-{MQ}
========================================*/
@layer utilities {
  @media screen and (max-width: 767px) {
    .u-hidden-ltSP {
      display: none;
    }
  }
  @media screen and (max-width: 991px) {
    .u-hidden-ltTAB {
      display: none;
    }
  }
  @media screen and (min-width: 768px) {
    .u-hidden-gtTAB {
      display: none;
    }
  }
  @media screen and (min-width: 992px) {
    .u-hidden-gtPC {
      display: none;
    }
  }
}
/*========================================
 * スクリーンリーダーテキスト
========================================*/
@layer utilities {
  .screen-reader-text,
  .u-screen-reader {
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    overflow: hidden;
    position: absolute;
    width: 1px;
    word-wrap: normal;
  }
}
/*========================================
 * text-align
========================================*/
@layer utilities {
  .u-ta-left {
    text-align: left;
  }
  .u-ta-center {
    text-align: center;
  }
  .u-ta-right {
    text-align: right;
  }
  @media screen and (max-width: 767px) {
    .u-SP-ta-left {
      text-align: left;
    }
    .u-SP-ta-center {
      text-align: center;
    }
    .u-SP-ta-right {
      text-align: right;
    }
  }
}