@charset "utf-8";

/* Hacobune専用の共通設定
 * ======================================== ======================================== */

/* レイアウト
 * ---------- ---------- ---------- ---------- ---------- */
html {
  font-size: 16px;
}

.hacobune_contents * {
  border: 0;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  color: #0b2430;
  font-family:
    'ヒラギノ角ゴ ProN',
    'Hiragino Kaku Gothic ProN',
    'メイリオ',
    Meiryo,
    'Yu Gothic',
    YuGothic,
    Verdana,
    Helvetica,
    'ＭＳ Ｐゴシック',
    sans-serif;
}

.hacobune_contents .inner {
  max-width: 960px;
  margin: auto;
}

/* 見出し・本文
 * ---------- ---------- ---------- ---------- ---------- */
.hacobune_contents h1 {
  font-size: 2.5rem;
  font-family: "Haru TP B";
  line-height: 1.2;
}

.hacobune_contents h2 {
  margin-bottom: 40px;
  font-family: "Haru TP B";
  font-size: 2rem;
  line-height: 1.25;
  text-align: center;
}

.hacobune_contents h3 {
  margin: 48px 0 24px;
  font-family: "Haru TP B";
  font-size: 1.5rem;
  line-height: 1.25;
}

.hacobune_contents h4 {
  font-family: "Haru TP B";
  font-size: 1.25rem;
  line-height: 1.3;
}

.hacobune_contents p,
.hacobune_contents li {
  line-height: 1.75;
}

/* 共通ボタン
 * ---------- ---------- ---------- ---------- ---------- */
.hacobune_contents .btn_list {
  display: flex;
  list-style: none;
  align-items: center;
}

.hacobune_contents .btn_cta,
.hacobune_contents .btn {
  display: inline-block;
  min-width: 156px;
  height: 40px;
  padding: 0 8px;
  border-radius: 4px;
  text-decoration: none;
  font-size: 1rem;
  font-weight: bold;
  text-align: center;
  line-height: 40px;
}

.hacobune_contents .btn_cta {
  background-color: #51a8dd;
  color: #fff;
}

.hacobune_contents .btn_cta:hover {
  background-color: #74bbde;
}

.hacobune_contents .btn_cta:active,
.hacobune_contents .btn_cta:focus {
  background-color: #2d8fc0;
}

.hacobune_contents .btn {
  background-color: #fff;
  color: #404046;
  border: 1px solid #ccc;
}

.hacobune_contents .btn:hover {
  background-color: #f9f9fa;
}

.hacobune_contents .btn:active,
.hacobune_contents .btn:focus {
  background-color: #f2f2f5;
}

/* nav
 * ======================================== ======================================== */
.layout-nav {
  position: sticky;
  top: 0;
  z-index: 1;
  background: rgba(255, 255, 255, 0.9);
  border-bottom: 1px solid #e1e1e4;
}

.layout-nav .inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
}

.layout-nav .logo a {
  color: #0b2430;
}

.layout-nav .text_link {
  margin-right: 24px;
  color: #0b2430;
  font-size: 1rem;
}

.layout-nav .btn_cta {
  display: block;
}

/* main配下
 * ======================================== ======================================== */

/* ヒーローエリア
 * ---------- ---------- ---------- ---------- ---------- */
.hero_area {
  position: relative;
  height: 448px;
  min-height: 448px;
  background-color: #dceef7;
  background-image: url(/lab/hacobune/images/wave_sec-hero-w.png);
  background-position: bottom;
  background-repeat: repeat-x;
  background-size: 184px;
  margin-bottom: 16px;
}

.hero_area::before {
  content: "";
  display: block;
  width: calc(50% - 590px);
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #fff;
}

.hero_area .inner {
  max-width: 100%;
  height: 100%;
  background-image: url(/lab/hacobune/images/hero.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: calc(50% - 320px) 0;
}

.hero_area .hero_text {
  width: 50%;
  position: relative;
  left: 50%;
}

.hero_area .catch_copy {
  padding-top: 80px;
}

.hero_area .lead_text {
  margin: 24px 0;
}

.hero_area .btn_cta {
  margin-right: 24px;
}

/* おしらせ
 * ---------- ---------- ---------- ---------- ---------- */
.news_area {
  display: flex;
  background-color: #FFAE1E;
  position: relative;
  top: -48px;
}

.news_area a {
  display: block;
  margin: 24px 0;
  color: #fff;
  font-weight: bold;
}

/* ３つの特徴的機能
 * ---------- ---------- ---------- ---------- ---------- */
.function_area {
  padding: 56px 0;
}

.function_list {
  display: flex;
  justify-content: center;
  gap: 24px;
}

.function_list li {
  width: 304px;
  padding: 24px;
}

.function_list figure {
  display: flex;
  width: 164px;
  height: 164px;
  margin: 0 auto 24px;
  background-color: #eee;
  justify-content: center;
}

.function_list figure img {
  width: 100%;
}

.function_frase {
  margin: 24px 0 16px;
  font-family: "Haru TP B";
  font-size: 1.25rem;
}

/* 使い方ガイド
 * ---------- ---------- ---------- ---------- ---------- */
.guide_area {
  padding: 48px 0;
  background-color: #f2f2f5;
  background-image: url(/lab/hacobune/images/wave_sec-movie.png);
  background-repeat: repeat-x;
  background-position: bottom;
  background-size: 184px;
}

.guide_area .video_area {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 800px;
  max-height: 450px;
  margin: 0 auto;
  position: relative;
  z-index: 0;
}

.guide_area .video_area::before {
  content: "";
  display: block;
  width: 100%;
  height: auto;
  padding-top: 56.25%;
  position: relative;
  top: 0;
  z-index: 1;
}

.guide_area .video_area iframe {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: 2;
}

.guide_area .btn_list {
  margin-top: 32px;
  justify-content: center;
}

/* フィードバック
 * ---------- ---------- ---------- ---------- ---------- */
.feedback_area {
  padding: 80px 0;
  text-align: center;
}

.feedback_area .btn_list {
  margin-top: 24px;
  justify-content: center;
}

/* ご利用にあたって
 * ---------- ---------- ---------- ---------- ---------- */
.howto_area {
  max-width: 800px;
  margin: 0 auto;
  padding: 48px 80px 48px 164px;
  border-radius: 8px;
  background-color: #f2f2f5;
}

.howto_area h4 {
  margin: 24px 0 16px;
  font-size: 1rem;
}

.howto_area h4 small {
  display: block;
  margin-bottom: 8px;
  color: #6b6b71;
  font-size: 0.75rem;
  line-height: 1.5;
}

.howto_area ol li {
  position: relative;
}

.howto_area ol .howto1 h3 {
  margin-top: 0;
}

.howto_area ol .howto1::before,
.howto_area ol .howto2::before {
  content: "";
  display: block;
  width: 0;
  border: 2px solid #e1e1e4;
  border-radius: 3px;
  position: absolute;
  left: -54px;
  top: 56px;
  bottom: -16px;
}

.howto_area ol .howto2::before {
  top: 45px;
}

.numbering_title {
  position: relative;
}

.numbering_title .number {
  display: flex;
  width: 40px;
  height: 40px;
  position: absolute;
  left: -72px;
  top: -8px;
  background-color: #e1e1e4;
  border-radius: 40px;
  justify-content: center;
  align-items: center;
}

.howto_area .btn {
  margin: 16px 0;
}

/* Labプロダクト概要
 * ---------- ---------- ---------- ---------- ---------- */
.product_area {
  width: 100%;
  max-width: 624px;
  margin: 0 auto;
  padding: 80px 0;
}

.product_area .text_link {
  margin-top: 48px;
}

.attention_list {
  margin-left: 24px;
}

.attention_list li {
  list-style: disc;
  margin: 16px 0;
}

/* cta
 * ---------- ---------- ---------- ---------- ---------- */
.footer_cta_area {
  padding: 48px 0 56px;
  background-color: #0e1b37;
  background-image: url(/lab/hacobune/images/wave_sec-cta.png);
  background-repeat: repeat-x;
  background-position: bottom;
  background-size: 184px;
}

.footer_cta_area p {
  color: #fff;
  font-family: "Haru TP B";
  font-size: 20px;
  text-align: center;
}

.footer_cta_area .btn_list {
  margin-top: 32px;
  justify-content: center;
}

/* レスポンシブ
 * ======================================== ======================================== */
@media (min-width: 961px) {
  .show_mobile {
    display: none;
  }

  .hacobune_contents {
    min-height: calc(100vh - 375px);
  }
}

@media (max-width: 960px) {
  .inner {
    padding: 0 16px;
  }

  .hide_mobile {
    display: none;
  }

  /* ---------- ---------- ---------- ---------- ---------- */

  .layout-nav .inner {
    height: 48px;
  }

  .layout-nav .logo::after {
    content: '\f107';
    position: absolute;
    height: 2rem;
    line-height: 2rem;
    top: 0;
    right: 20px;
    bottom: 0;
    margin: auto;
    color: #0b2430;
    font-family: FontAwesome, sans-serif;
    font-size: 2rem;
  }

  .layout-nav.is-open .logo::after {
    transform: rotate(180deg);
  }

  .layout-nav .btn_list {
    display: block;
    position: absolute;
    top: 48px;
    left: 0;
    width: 100%;
    max-height: 0;
    background: #fff;
    box-shadow: 0 10px 15px -10px rgb(0 0 0 / 30%);
    transition: all 0.2s 0s linear;
    overflow-y: hidden;
  }

  .layout-nav.is-open .btn_list {
    max-height: 241px;
  }

  .layout-nav .btn_list::after {
    content: '閉じる';
    display: block;
    height: 50px;
    line-height: 50px;
    background: #434349;
    color: #fff;
    font-size: 0.9rem;
    text-align: center;
  }

  .layout-nav .btn_list li a {
    display: block;
    padding: 0 5%;
    line-height: 48px;
    height: 48px;
    width: 100%;
  }

  .layout-nav .btn_list li .btn_cta {
    width: 90%;
    height: 40px;
    line-height: 40px;
    margin: 16px auto;
  }

  /* ---------- ---------- ---------- ---------- ---------- */

  .hacobune_contents h1 {
    font-size: 2rem;
    line-height: 1.25;
  }

  .hacobune_contents h2 {
    margin-bottom: 32px;
    font-size: 1.5rem;
    line-height: 1.25;
  }

  .hacobune_contents h3 {
    font-size: 1.25rem;
    line-height: 1.3;
  }

  /* ---------- ---------- ---------- ---------- ---------- */

  .function_list {
    gap: 0;
  }

  .function_list li {
    padding: 24px 12px;
  }
}

@media (max-width: 600px) {

  .hero_area {
    height: 704px;
  }

  .hero_area .inner {
    background-size: cover;
    background-position: top -30% right 10%;
    background-size: 130%;
  }

  .hero_area .catch_copy {
    padding-top: 296px;
  }

  .hero_area .hero_text {
    width: 100%;
    position: static;
  }

  /* ---------- ---------- ---------- ---------- ---------- */

  .function_area {
    padding: 56px 0;
  }

  .function_list {
    flex-direction: column;
    gap: 8px;
  }

  .function_list li {
    width: 100%;
    padding: 24px;
  }

  /* ---------- ---------- ---------- ---------- ---------- */
  .guide_area {
    background-position: 10% calc(100% + 70px);
  }

  /* ---------- ---------- ---------- ---------- ---------- */
  .feedback_area {
    text-align: left;
  }

  /* ---------- ---------- ---------- ---------- ---------- */
  .howto_area {
    padding: 48px 0 64px 72px;
  }

  .howto_area h3 {
    margin: 48px 0 16px;
  }

  .howto_area h4 {
    margin: 16px 0;
  }

  .howto_area .btn {
    margin-bottom: 0;
  }

  /* ---------- ---------- ---------- ---------- ---------- */
  .product_area h3 {
    text-align: center;
  }

  .footer_cta_area {
    padding: 40px 0;
  }

  /* ---------- ---------- ---------- ---------- ---------- */
  .footer_cta_area .btn_list {
    margin-top: 16px;
  }
}

@media (max-width: 600px) and (min-width: 380px) {
  .hero_area .mobile_highlight {
    display: inline-block;
    background-color: #fff;
    padding: 0 4px;
    margin: 2px 0;
  }
}