@charset "UTF-8";
/* ---------------------------------------------
  変数
--------------------------------------------- */
:root {
  /* カラー変数
  --------------------------------------------- */
  /* 本文のテキスト用 */
  --al-color-body: #333;
  /* 汎用グレースケール */
  --al-color-medium: #92949C;
  --al-color-light: #F4F5F8;
  /* サイト内のメインカラー */
  --al-color-primary: #3880FF;
  --al-color-secondary: #6AA0FF;
  --al-color-accent: #FFC409;
}

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

  ユーティリティクラス

--------------------------------------------- */
/* ---------------------------------------------
  PC or SPでのみ表示させる
--------------------------------------------- */
@media (min-width: 768px) {
  .al-is-hidden_pc {
    display: none;
  }
}
@media (max-width: 767px) {
  .al-is-hidden_sp {
    display: none;
  }
}
/* ---------------------------------------------
  text-align
--------------------------------------------- */
.al-u-txt_left {
  text-align: left !important;
}

.al-u-txt_center {
  text-align: center !important;
}

.al-u-txt_right {
  text-align: right !important;
}

/* ---------------------------------------------
  margin
--------------------------------------------- */
/* margin-bottom */
.al-u-mb5 {
  margin-bottom: 5px;
}

.al-u-mb10 {
  margin-bottom: 10px;
}

.al-u-mb15 {
  margin-bottom: 15px;
}

.al-u-mb20 {
  margin-bottom: 20px;
}

.al-u-mb25 {
  margin-bottom: 25px;
}

.al-u-mb30 {
  margin-bottom: 30px;
}

.al-u-mb35 {
  margin-bottom: 35px;
}

.al-u-mb40 {
  margin-bottom: 40px;
}

.al-u-mb50 {
  margin-bottom: 50px;
}

.al-u-mb60 {
  margin-bottom: 60px;
}

.al-u-mb70 {
  margin-bottom: 70px;
}

.al-u-mb80 {
  margin-bottom: 80px;
}

/* margin-top */
.al-u-mt5 {
  margin-top: 5px;
}

.al-u-mt10 {
  margin-top: 10px;
}

.al-u-mt15 {
  margin-top: 15px;
}

.al-u-mt20 {
  margin-top: 20px;
}

.al-u-mt25 {
  margin-top: 25px;
}

.al-u-mt30 {
  margin-top: 30px;
}

.al-u-mt40 {
  margin-top: 40px;
}

.al-u-mt50 {
  margin-top: 50px;
}

/* 文字色 */
.al-u-color-primary {
  color: var(--al-color-primary);
}

.al-u-color-secondary {
  color: var(--al-color-secondary);
}

.al-u-color-accent {
  color: var(--al-color-accent);
}

.al-u-color-white {
  color: #FFF;
}

/* 背景色 */
.al-u-bg-primary {
  background-color: var(--al-color-primary);
}

.al-u-bg-secondary {
  background-color: var(--al-color-secondary);
}

.al-u-bg-accent {
  background-color: var(--al-color-accent);
}

.al-u-bg-body {
  background-color: var(--al-color-body);
}

.al-u-bg-medium {
  background-color: var(--al-color-medium);
}

.al-u-bg-light {
  background-color: var(--al-color-light);
}

/* フォントスタイル */
.al-u-font-serif {
  font-family: "YuMincho", "Yu Mincho", "Hiragino Mincho ProN", "MS PMincho", "Times New Roman", serif;
}

.al-u-txt-bold {
  font-weight: bold;
}

.al-u-txt-heavy {
  font-weight: 900;
}

/* フォントサイズ */
.al-u-txt-small {
  font-size: 0.8em;
}

.al-u-txt-large {
  font-size: 1.2em;
}

/* シャドウ */
.al-u-shadow {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.16);
}

/* 背景パターン */
.al-u-bg-boxes {
  background-image: linear-gradient(var(--al-color-light) 1px, transparent 1px), linear-gradient(to right, var(--al-color-light) 1px, #FFF 1px);
  background-size: 20px 20px;
}

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

  初期スタイル調整

--------------------------------------------- */
a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.2s;
}
a:hover {
  opacity: 0.8;
}

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

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

  汎用パーツ

--------------------------------------------- */
/* 見出し */
.al-ttl-shortline {
  width: max-content;
  padding-inline: 2em;
  margin: 0 auto 40px;
  font-size: min(3rem, 6vw);
  font-weight: bold;
  text-align: center;
  border: solid;
  border-width: 0 1px;
}

/* 角丸ボタン */
.al-btn {
  box-sizing: border-box;
  display: inline-block;
  padding: 20px;
  font-weight: bold;
  background: var(--al-color-accent);
  border-radius: 5px;
}

/* ---------------------------------------------
  スタイリングのベース
--------------------------------------------- */
html {
  font-size: 62.5%;
}

body {
  font-family: "Noto Sans JP", sans-serif;
  font-size: min(1.6rem, 4vw);
  line-height: 1.6;
  color: var(--al-color-body);
}

.al-wrap {
  margin: auto;
}
.al-wrap ul li,
.al-wrap ol li {
  list-style: none;
}
@media (max-width: 767px) {
  .al-wrap {
    width: 100%;
    min-width: auto;
  }
}

.al-container {
  box-sizing: border-box;
  width: min(1020px, 100%);
  padding: 0 10px;
  margin: auto;
}

.al-section {
  padding: 80px 0;
}

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

  ヘッダー関連 al-header

--------------------------------------------- */
.al-header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 99;
  background-color: #FFF;
}
@media (min-width: 768px) {
  .al-header .al-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

@media (max-width: 767px) {
  .al-header__logo {
    padding: 20px 0;
  }
}

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

  グローバルナビゲーション関連 al-gnav

--------------------------------------------- */
/* ナビゲーション本体 */
.al-gnav {
  display: block;
  flex-grow: 1;
}
.al-gnav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
.al-gnav a {
  display: block;
  padding: 20px 0;
}
@media (min-width: 768px) {
  .al-gnav {
    max-width: 75%;
  }
}
@media (max-width: 767px) {
  .al-gnav {
    display: none;
  }
  .al-gnav ul {
    display: block;
    padding-bottom: 15px;
    text-align: center;
  }
  .al-gnav a {
    display: block;
    padding: 10px 0;
  }
}

.al-gnav__contact a {
  padding: 10px 20px;
  font-weight: bold;
  background-color: var(--al-color-accent);
  border-radius: 50px;
}
@media (max-width: 767px) {
  .al-gnav__contact {
    padding: 10px 0;
  }
}

/* ハンバーガーボタン */
.al-gnav_btn {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 100;
  display: block;
  width: 44px;
  height: 44px;
  cursor: pointer;
  background: var(--al-color-primary);
  border: solid 2px #FFF;
}
.al-gnav_btn span {
  position: absolute;
  left: 15%;
  display: block;
  width: 70%;
  height: 3px;
  background: #FFF;
  transition: 0.3s;
}
.al-gnav_btn span:first-child {
  top: 23%;
}
.al-gnav_btn span:nth-child(2) {
  top: 48%;
  opacity: 1;
}
.al-gnav_btn span:last-child {
  top: 72%;
}
.al-gnav_btn.al-open span {
  transition: 0.2s;
}
.al-gnav_btn.al-open span:first-child {
  top: 48%;
  transform: rotate(45deg);
}
.al-gnav_btn.al-open span:nth-child(2) {
  display: none;
  opacity: 0;
}
.al-gnav_btn.al-open span:last-child {
  top: 48%;
  transform: rotate(-45deg);
}
@media (min-width: 768px) {
  .al-gnav_btn {
    display: none;
  }
}

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

  フッター関連 al-footer

--------------------------------------------- */
.al-footer {
  padding: 20px;
  text-align: center;
}
.al-footer__copy {
  margin-top: 10px;
  font-size: min(1.2rem, 3vw);
  line-height: 1;
}

/* ページトップに戻るボタン */
.al-totop {
  position: fixed;
  right: 10px;
  bottom: 10px;
  cursor: pointer;
  border-radius: 50%;
}
@media (max-width: 767px) {
  .al-totop {
    width: 45px;
    height: 45px;
  }
}

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

  メインビジュアル al-mv

--------------------------------------------- */
.al-mv {
  margin-top: 65px;
}

.al-mv__img {
  width: 100%;
}

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

  お悩みブロック al-worries

--------------------------------------------- */
.al-worries {
  margin-bottom: 40px;
  background: var(--al-color-light);
}

.al-worries-ttl {
  padding: 15px 0 10px;
  font-size: min(3rem, 6vw);
  font-weight: bold;
  color: #FFF;
  text-align: center;
  letter-spacing: 0.05em;
  background: var(--al-color-primary);
}

.al-worries-list {
  box-sizing: border-box;
  width: max-content;
  padding: 35px 0;
  margin: auto;
  background: var(--al-color-light);
}
.al-worries-list li {
  padding-left: 1em;
  margin-bottom: 30px;
  font-size: min(2rem, 5vw);
  text-indent: -1.2em;
}
.al-worries-list li::before {
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  margin-right: 0.5em;
  vertical-align: middle;
  content: "";
  background: var(--al-color-primary);
  border-radius: 50%;
}
.al-worries-list li:last-child {
  margin-bottom: 0;
}
.al-worries-list span {
  background: linear-gradient(transparent 55%, var(--al-color-accent) 55%);
}
@media (max-width: 767px) {
  .al-worries-list {
    width: 100%;
    padding: 20px;
  }
}

.al-worries__solution {
  font-size: min(2rem, 5vw);
  text-align: center;
}
.al-worries__solution em {
  font-size: min(4rem, 7vw);
  font-weight: bold;
}

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

  ○○とは？ブロック al-about

--------------------------------------------- */
.al-about__block {
  display: grid;
  gap: 30px;
}
.al-about__block .al-btn {
  position: relative;
}
.al-about__block .al-btn::after {
  position: absolute;
  top: 50%;
  right: 20px;
  width: 10px;
  height: 10px;
  content: "";
  border-top: solid 2px;
  border-right: solid 2px;
  transform: rotate(45deg) translateY(-50%);
}
@media (min-width: 768px) {
  .al-about__block {
    grid-template: 1fr auto/1fr 1fr;
    grid-template-areas: "txt img" "btn img";
    padding: 40px;
    background: #FFF;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.16);
  }
}
@media (max-width: 767px) {
  .al-about__block {
    grid-template-areas: "txt" "img" "btn";
  }
}

.al-about__txt {
  grid-area: txt;
  line-height: 2.2;
}

.al-about__img {
  grid-area: img;
}

.al-about__btn {
  grid-area: btn;
}

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

  特徴ブロック al-feature

--------------------------------------------- */
.al-feature-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 767px) {
  .al-feature-list {
    grid-template-columns: 1fr;
  }
}
.al-feature-list li {
  position: relative;
  padding: 30px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.16);
}
.al-feature-list h3 {
  margin-bottom: 0.5em;
  font-size: min(2.5rem, 5.5vw);
  font-weight: bold;
}
.al-feature-list dt {
  margin-bottom: 0.5em;
  font-weight: bold;
}

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

  サービスの流れブロック al-flow

--------------------------------------------- */
.al-flow-list {
  width: max-content;
  min-width: 50%;
  margin: auto;
}
.al-flow-list li {
  position: relative;
  padding: 20px;
  font-size: min(2rem, 5vw);
  text-align: center;
  background-color: var(--al-color-light);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.16);
}
.al-flow-list li:first-child {
  color: #FFF;
  background-color: var(--al-color-medium);
}
.al-flow-list li:last-child {
  font-weight: bold;
  color: #FFF;
  background-color: var(--al-color-primary);
}
.al-flow-list li + li {
  margin-top: 40px;
}
.al-flow-list li + li::before {
  position: absolute;
  top: -25px;
  left: 50%;
  width: 0;
  height: 0;
  content: "";
  border-color: var(--al-color-secondary) transparent transparent transparent;
  border-style: solid;
  border-width: 10px 10px 0;
  transform: translateX(-50%);
}

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

  料金ブロック al-price

--------------------------------------------- */
.al-price {
  background-color: var(--al-color-primary);
}

@media (min-width: 768px) {
  .al-price-list {
    display: flex;
  }
}

.al-price-list__item {
  flex-grow: 1;
  padding: 20px;
  margin: 0 10px;
  background-color: #FFF;
  border-radius: 5px;
}
@media (max-width: 767px) {
  .al-price-list__item {
    margin-bottom: 20px;
  }
}

.al-price-list__ttl {
  padding: 5px;
  font-weight: bold;
  background-color: var(--al-color-accent);
}

.al-price-list__ttl--sub {
  display: inline-block;
  padding: 2px 10px;
  font-size: min(1.2rem, 3vw);
}

.al-price-list__price {
  padding: 20px 0;
  font-size: min(3rem, 6vw);
  font-weight: bold;
}
.al-price-list__price em {
  font-size: 1.5em;
  color: var(--al-color-primary);
}
.al-price-list__price span {
  font-size: 0.5em;
  font-weight: normal;
}

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

  お客様の声ブロック al-voice

--------------------------------------------- */
.al-voice-list li {
  display: flex;
  align-items: center;
  padding: 40px;
  margin-bottom: 20px;
  line-height: 2.2;
  background: #FFF;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.16);
}
@media (max-width: 767px) {
  .al-voice-list li {
    flex-direction: column;
    padding: 20px;
  }
}

.al-voice-list__lead {
  margin-bottom: 20px;
  font-size: min(2rem, 5vw);
  font-weight: bold;
  color: var(--al-color-primary);
  border-bottom: 1px solid;
}

.al-voice-list__img {
  flex-shrink: 0;
  margin: 0 20px;
  border-radius: 50%;
}
@media (max-width: 767px) {
  .al-voice-list__img {
    margin-top: 20px;
  }
}

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

  よくある質問ブロック al-faq

--------------------------------------------- */
.al-faq-list__item {
  padding: 30px min(40px, 10vw);
  margin-bottom: 20px;
  background: #FFF;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.16);
}

.al-faq-list__question,
.al-faq-list__answer {
  position: relative;
  padding-left: min(50px, 10vw);
}
.al-faq-list__question::before,
.al-faq-list__answer::before {
  position: absolute;
  top: -0.2em;
  left: 0;
  font-size: min(2rem, 5vw);
  font-weight: bold;
}

.al-faq-list__question {
  margin-bottom: 20px;
  font-size: 1.2em;
  font-weight: bold;
}
.al-faq-list__question::before {
  color: var(--al-color-primary);
  content: "Q.";
}

.al-faq-list__answer::before {
  color: var(--al-color-accent);
  content: "A.";
}

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

  お問い合わせブロック al-contact

--------------------------------------------- */
.al-contact {
  text-align: center;
  background: linear-gradient(to right bottom, var(--al-color-primary) 0%, var(--al-color-secondary) 100%);
}

.al-contact__btn {
  display: inline-block;
  padding: 0.5em 2em;
  margin-bottom: 10px;
  font-size: min(3rem, 6vw);
  font-weight: bold;
  background-color: var(--al-color-accent);
  border: 5px solid #FFF;
  border-radius: 100px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}