@charset "UTF-8";
*, ::before, ::after {
  box-sizing: border-box;
  /* ↓↓debug code↓↓ */
  /* outline: 1px solid red; */
}
:root {
  --text-color: #555;
  --main-color: #70b0ef; /*メイン色*/
  --sub-color: #a6de63; /*サブ色*/
  --bg-color: #e8f7f9; /*サイドメニュー・レイアウト類の背景色*/
  --border-color: #78ced9; /*境界線色*/
  --btn-color: #f5af08; /*ボタンなどの色*/
  --font-type: "m-plus-rounded-2p", sans-serif; /*見出し用フォント*/
  --font-type-en: "finalsix", sans-serif;
}
body {
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "游ゴシック体", "Yu Gothic", YuGothic, "Helvetica Neue", Arial, Meiryo, sans-serif;
  color: var(--text-color);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0.05em;
  text-align: justify;
}
a {
  color: #1F2774;
  text-decoration: none;
}
a:hover {
  color: #C0AB9A;
}
img {
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}
/*tel*/
[href^=tel]:hover {
  cursor: default;
}
a[href="tel:準備中"] {
  pointer-events: none;
}
::selection {
  background-color: #99C1DA;
}
::-moz-selection {
  background-color: #99C1DA;
}
body, .nav_wrap.fixed, #mainvisual .inner, header, footer {
  min-width: 1300px;
}
@media print {
  html {
    -webkit-print-color-adjust: exact;
  }
  body {
    zoom: 80%;
  }
  .fixed {
    position: inherit !important;
  }
}
section .inner {
  max-width: 1200px;
  margin: 0 auto;
}
/* カラー */
.green {
  color: #63cea7;
}
.yellow {
  color: #ffba42;
}
/* 画像のにじみ（大きい画像を小さく表示した時等）対策 */
.visibility {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
/*============================================================================

  header

============================================================================*/
header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px; /* navのtopと同じ値にする */
  margin-bottom: 80px; /* navのheightと同じ値にする */
}
header .inner {
  position: relative;
  max-width: 1200px;
  height: inherit;
  margin: auto;
  padding: 0 0 0 40px;
}
/* ロゴ */
header .header_logo {
  position: absolute;
  top: 61px;
  z-index: 11;
  width: 462px;
  text-align: center;
}
header .header_logo a {
  display: block;
}
header .header_logo span {
  font-family: var(--font-type);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1;
  text-align: center;
  display: block;
  color: var(--main-color);
  border: 1px solid var(--border-color);
  background: var(--bg-color);
  border-radius: 60px;
  margin-top: 20px;
  padding: 20px 0;
}
/* 住所 */
.header_info {
  float: right;
  margin-right: 40px;
  text-align: right;
}
/* ご予約・お問合せ */
.header_tel {
  float: right;
  text-align: right;
  line-height: 1.4;
}
.header_tel a {
  color: #1F2774;
  position: relative;
  padding-left: 25px;
  font-size: 24.7px;
  letter-spacing: 0.1em;
}
.header_tel a:before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 15px;
  height: 21.8px;
  margin: auto;
  background-image: url(../images/header_tel.svg);
  background-repeat: no-repeat;
  content: "";
}
.header_mpcloud_links {
  display: flex;
  float: right;
  margin-left: 20px;
  width: 200px;
}
.header_mpcloud_links a {
  display: block;
  padding: 10px;
  min-width: 100px;
  background-color: #1F2774;
  color: #fff;
  text-align: center;
  border: 1px solid #fff;
  transition: background-color 0.5s ease;
}
.header_mpcloud_links a:hover {
  background-color: rgba(31, 39, 116, 0.8);
}
.fixed_web_yoyaku_btn {
  position: fixed;
  right: 0;
  top: 0;
  z-index: 11;
  width: 60px;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
}
.fixed_web_yoyaku_btn a {
  display: flex;
  background: #1F2774;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  color: #fff;
  width: 100%;
  padding: 15px 10px;
  letter-spacing: 4px;
  font-size: 1.2em;
  font-weight: 600;
  margin-bottom: 10px;
  line-height: 1;
  align-items: center;
  justify-content: center;
  transition: 0.2s ease;
}
.fixed_web_yoyaku_btn a:hover {
  background: #C0AB9A;
}
.fixed_web_yoyaku_btn a i {
  margin-bottom: 5px;
}
.fixed_web_yoyaku_btn a:last-child {
  margin-bottom: 0;
}
.fixed_web_yoyaku_btn a.sns {
  padding: 18px 10px 14px;
  font-weight: 500;
  font-size: 24px;
}
.fixed_web_yoyaku_btn a.sns i {
  margin-bottom: 0;
}
/*============================================================================

  nav

============================================================================*/
@media print, screen and (min-width: 641px) {
  /* PC用メニュー */
  .nav_pc {
    position: absolute;
    width: 100%;
    min-width: 1200px;
    padding: 35px 0;
    background: #fff;
  }
  .nav_pc.nav_pc_fixed {
    position: fixed;
    z-index: 3;
    top: 0;
    left: 0;
    width: 100%;
    min-width: 1300px;
    background: rgb(255 255 255 / 0.9);
}
  .nav_pc .nav_list {
    display: flex;
    justify-content: space-between;
    width: 1200px;
    margin: 0 auto;
  }
  .nav_list .nav_item a {
    display: block;
    color: var(--text-color);
    text-align: center;
    letter-spacing: .05em;
    line-height: 1.44;
    font-size: 18px;
    font-family: var(--font-type);
    font-weight: 700;
    transition: .3s ease;
  }
  .nav_list .nav_item a:hover {
    color: #45aed5;
    opacity: .9
  }
  .nav_list .nav_item a span {
    display: block;
    margin-top: 6px;
    color: #45aed5;
    line-height: 1;
    letter-spacing: .05em;
    font-size: 10px;
    font-family: var(--font-type-en);
    font-weight: 700;
  }
  .nav_wrap {
    display: none;
    position: absolute;
    z-index: 10;
    top: 100px;
    width: 100%;
    background: rgba(255, 255, 255, 0.8);
  }
  .tgl_menu_list {
    width: 1200px;
    margin: 0 auto;
  }
  .tgl_menu_list ul {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .tgl_menu_list ul li {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* リンクテキスト */
  .tgl_menu_list ul li a, .tgl_menu_list ul li p {
    position: relative;
    color: #1F2774;
    line-height: 1;
    text-align: center;
    padding: 22px 26px;
    font-weight: 700;
  }
  /* 英語 */
  .tgl_menu_list ul li a span, .tgl_menu_list ul li p span {
    display: block;
    line-height: 1;
    letter-spacing: 0.15em;
    font-size: 12px;
    margin-top: 9px;
  }
  /* リストのボーダー */
  .tgl_menu_list ul li a::before, .tgl_menu_list ul li p::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 1px;
    height: 20px;
    border-right: 1px dotted #1F2774;
  }
  .tgl_menu_list ul li:last-child a::before, .tgl_menu_list ul li:last-child p::before {
    display: none;
  }
  /* ホバーエフェクト */
  .tgl_menu_list ul li a:hover {
    color: #1F2774;
  }
  /* ホバー時に出る下線 */
  .tgl_menu_list ul li a::after, .tgl_menu_list ul li p::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 10px;
    left: 0;
    margin: auto;
    width: 30px;
    height: 1px;
    background: #1F2774;
    transition: 0.2s ease-in-out;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
  }
  .tgl_menu_list ul li a:hover::after, .tgl_menu_list ul li.active a::after, .tgl_menu_list ul li p:hover::after, .tgl_menu_list ul li.active p::after {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
  /* ------- スライドメニュー シングル------- */
  /* ドロップダウン */
  .tgl_menu_list ul li.nav_single_menu div {
    position: absolute;
    z-index: 1;
    top: 95%;
    left: 0;
    width: 160%;
    opacity: 0;
    visibility: hidden;
    transition: 0.2s ease-in-out;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
  }
  .tgl_menu_list ul li.nav_single_menu:hover div {
    top: 100%;
    opacity: 1;
    visibility: visible;
  }
  .tgl_menu_list ul li.nav_single_menu div a {
    position: relative;
    display: block;
    text-align: left;
    line-height: 1.75;
    padding: 9px 20px 9px 10px;
    background: rgba(255, 255, 255, 0.6);
    border-bottom: 1px solid #fff;
  }
  .tgl_menu_list ul li.nav_single_menu div a::before, .tgl_menu_list ul li.nav_single_menu div a::after {
    display: none;
  }
  .tgl_menu_list ul li.nav_single_menu div a:last-child {
    border-bottom: none;
  }
  .tgl_menu_list ul li.nav_single_menu div a i.nav_arrow {
    position: absolute;
    top: 0;
    right: 10px;
    bottom: 0;
    display: flex;
    align-items: center;
    transition: 0.2s ease-in-out;
  }
  /* ホバーエフェクト */
  .tgl_menu_list ul li.nav_single_menu div a:hover {
    color: #1F2774;
    background: #fcfcfc;
  }
  .tgl_menu_list ul li.nav_single_menu div a:hover i.nav_arrow {
    right: 7px;
  }
  /* ------- スライドメニュー メガ------- */
  .tgl_menu_list .nav_mega_menu {
    position: static;
  }
  /* ドロップダウン */
  .tgl_menu_list .nav_mega_menu .mega_menu_wrap {
    position: absolute;
    z-index: 1;
    top: 95%;
    left: 0%;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transition: 0.2s ease-in-out;
    background: rgba(255, 255, 255, 0.6);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 9px 12px -10px;
  }
  .tgl_menu_list .nav_mega_menu:hover .mega_menu_wrap {
    top: 100%;
    opacity: 1;
    visibility: visible;
  }
  .tgl_menu_list .mega_menu_inner {
    padding: 32px 0;
    width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
  }
  .tgl_menu_list .menu_list {
    width: 100%;
    margin-left: 3%;
  }
  .tgl_menu_list .menu_list:first-child {
    margin-left: 0;
  }
  .tgl_menu_list ul li.nav_mega_menu .menu_list p::before, .tgl_menu_list ul li.nav_mega_menu .menu_list p::after {
    display: none;
  }
  .tgl_menu_list .menu_list p {
    text-align: left;
    padding: 12px 0;
    font-weight: bold;
    border-bottom: 2px solid;
  }
  .tgl_menu_list .menu_list ul {
    display: block;
  }
  .tgl_menu_list .menu_list ul li {
    display: block;
  }
  .tgl_menu_list .menu_list ul li a {
    position: relative;
    display: block;
    text-align: left;
    padding: 12px 12px 12px 0;
    transition: 0.2s ease-in-out;
  }
  .tgl_menu_list .menu_list ul li a:hover {
    color: #5c8fce;
  }
  .tgl_menu_list .menu_list ul li a::before {
    position: static;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f105";
    border: none;
    margin-right: 10px;
  }
  .tgl_menu_list .menu_list ul li:last-child a::before {
    display: inline;
  }
  .tgl_menu_list ul li.nav_mega_menu div a::after {
    display: none;
  }
  /* ------- スライドメニュー tabindex対応------- */
  /* シングル */
  .tgl_menu_list ul li.nav_single_menu:focus-within > div {
    top: 100%;
    opacity: 1;
    visibility: visible;
  }
  /* メガ */
  .tgl_menu_list ul li.nav_mega_menu:focus-within > .mega_menu_wrap {
    top: 100%;
    opacity: 1;
    visibility: visible;
  }
  /* 追従時の設定 */
  .nav_wrap.fixed {
    z-index: 10000;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
  }
}
/* 下部固定ボタン */
.fixed_btn_link {
  position: fixed;
  z-index: 10000;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  gap: 0 10px;
}
.fixed_btn_link .btn a {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #7bced9;
  font-size: 26px;
  font-family: var(--font-type);
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.1em;
  text-align: center;
  padding: 22px 20px 23px;
  min-width: 100px;
  min-height: 240px;
  border: 2px solid #fff;
  border-radius: 10px 0 0 10px;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  overflow: hidden;
  transition: .3s ease;
}

@supports (font: -apple-system-body) {
  .fixed_btn_link .btn a {
    font-family: inherit;
  }
}
.fixed_btn_link .btn a:hover {
  background: #fff;
  border-color: #7bced9;
  color: #7bced9;
}
.fixed_btn_link .btn a::before {
  position: absolute;
  content: "";
  bottom: -9px;
  right: -9px;
  width: 49px;
  height: auto;
  aspect-ratio: 1;
  background: #fff;
  border-radius: 50%;
  transition: .3s ease
}
.fixed_btn_link .btn a:hover::before {
  background: #7bced9;
}
.fixed_btn_link .btn a::after {
  position: absolute;
  content: " \f061";
  bottom: 8px;
  right: 4px;
  transform: rotate(45deg);
  color: #7bced9;
  font-size: 16px;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  transition: .3s ease
}
.fixed_btn_link .btn a:hover::after {
  color: #fff;
}
.fixed_btn_link .btn a span {
  margin-top: 3px;
  display: block;
  font-size: 22px;
  line-height: 1;
}
.fixed_btn_link .btn a span i {
  margin-right: 9px;
}
.fixed_btn_link .btn.yoyaku {
  position: relative;
}
.fixed_btn_link .btn.yoyaku::before {
  position: absolute;
  z-index: 1;
  top: -62px;
  left: -53px;
  content: "";
  width: 133px;
  height: auto;
  aspect-ratio: 133/107;
  background: url("../images/side_btn_microcopy.png") no-repeat center/cover;
  transition: .3s ease
}
.fixed_btn_link .btn.yoyaku:hover::before {
  top: -80px;
}
/*============================================================================

  #mainvisual

============================================================================*/
/* TOP下層共通 */
#mainvisual {
  display: block;
  position: relative;
}
#mainvisual .inner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  display: table;
  height: inherit;
  width: 1200px;
}
.mainvisual_wrap {
  height: 820px;
  background: url("../images/mv_img02.png") no-repeat left top 87px/23.17% auto, url("../images/mv_bg.jpg") no-repeat center/cover;
}
.mainvisual_img {
  position: absolute;
  top: 0;
  right: 0;
  max-width: 1173px;
  width: 61.09375%;
  height: 820px;
  margin: 0 auto;
}
.mainvisual_img picture {
  display: block;
  width: 100%;
  height: 100%;
  mask: url("../images/mv_main_img_mask.png") no-repeat center/100% auto;
}
.mainvisual_img picture source, .mainvisual_img picture img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
}
.mainvisual_title {
  position: absolute;
  z-index: 1;
  left: 93px;
  top: 240px;
  text-align: center;
  font-family: var(--font-type);
  font-weight: 700;
}
.mv_title_wrap {
  position: relative;
  max-width: 530px;
  min-height: 508px;
  padding-top: 164px;
}
.mv_title_wrap::before {
  position: absolute;
  z-index: -1;
  content: "";
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 535px;
  height: auto;
  aspect-ratio: 535 / 508;
  background: url(../images/mv_catch_bg.png) no-repeat center top / cover;
}
.mv_tit_microcopy {
  position: absolute;
}
.mv_tit_microcopy:first-of-type {
  top: 70px;
  left: -44px;
  max-width: 139px
}
.mv_tit_microcopy:nth-of-type(2) {
  top: 18px;
  left: 110px;
  max-width: 142px
}
.mv_tit_microcopy:nth-of-type(3) {
  top: 35px;
  right: 124px;
  max-width: 142px
}
.mv_tit_microcopy:nth-of-type(4) {
  top: 70px;
  right: -36px;
  max-width: 139px
}
.mainvisual_title .pop {
  position: relative;
  display: block;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  font-size: 24px;
  margin: 0 auto 14px;
  letter-spacing: 0.015em;
  line-height: 1.31;
}
.mainvisual_title .pop span {
  font-size: 120%;
}
.mv_catch {
  max-width: 570px;
  margin-bottom: 24px;
}
.mv_catch_en {
  position: relative;
  width: fit-content;
  margin: 0 auto;
  padding-bottom: 16px;
  color: #9e9e9e;
  line-height: 1;
  letter-spacing: .05em;
  font-size: 20px;
  font-family: var(--font-type-en);
  font-weight: 700;
}
.mv_catch_en::before {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  content: "";
  width: 100%;
  max-width: 237px;
  height: 6px;
  background: url(../images/line_shape.png) repeat-x left bottom;
}
.mainvisual_title .radius {
  display: block;
  max-width: 322px;
  width: 100%;
  font-size: 26px;
  margin: 0 auto 45px;
  letter-spacing: 0.12em;
  line-height: 1;
  border-radius: 60px;
  color: #fff;
  border: 3px solid #fff;
  background: var(--sub-color);
  padding: 15px 10px;
}
.mainvisual_title .blur {
  color: #fff;
  font-size: 80px;
  line-height: 1;
  letter-spacing: 0.12em;
  margin-bottom: 53px;
  -webkit-filter: drop-shadow(0 0 30px rgba(42, 165, 181, 0.5)) drop-shadow(0 0 30px var(--main-color)) drop-shadow(0 0 10px var(--main-color));
  filter: drop-shadow(0 0 30px rgba(42, 165, 181, 0.5)) drop-shadow(0 0 30px var(--main-color)) drop-shadow(0 0 10px var(--main-color));
}
/*ヘッダーボタンエリア*/
.head_btn_area {
  position: absolute;
  top: 45px;
  right: 0;
  display: flex;
  gap: 16px;
}
.head_btn_area .head_btn a {
  position: relative;
  display: flex;
  gap: 9px;
  align-items: center;
  height: 84px;
  padding: 10px 10px 10px 22px;
  background: #7bced9;
  border: 2px #fff solid;
  border-radius: 10px;
  color: #fff;
  transition: .3s ease;
}
.head_btn_area .head_btn.tel a {
  width: 284px;
  font-size: 26px;
  letter-spacing: .025em;
  font-family: var(--font-type-en);
  font-weight: 700;
}
.head_btn_area .head_btn.tel a:hover {
  background: #fff;
  border-color: #7bced9;
  color: #7bced9;
}
.head_btn_area .head_btn.tel a::before {
  display: inline-block;
  content: "";
  width: 23px;
  height: 29px;
  background: url("../images/tel_icon.png") no-repeat center/cover
}
.head_btn_area .head_btn.reserve a {
  gap: 12px;
  width: 189px;
  padding: 10px 10px 10px 14px;
  background: #a6de63;
  text-align: center;
  line-height: 1.4;
  letter-spacing: .06em;
  font-size: 24px;
  font-family: var(--font-type);
  font-weight: 700;
}
.head_btn_area .head_btn.reserve a:hover:hover {
  background: #fff;
  border-color: #a6de63;
  color: #a6de63;
}
.head_btn_area .head_btn.reserve a::before {
  display: inline-block;
  content: "";
  width: 42px;
  height: 40px;
  background: url("../images/contact_icon.png") no-repeat center/cover
}
.head_btn_area .head_btn.reserve a span span {
  position: relative;
  display: block;
  font-size: 75%;
}
.head_btn_area .head_btn.reserve a span span::before, .head_btn_area .head_btn.reserve a span span::after {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 13px;
  height: auto;
  aspect-ratio: 13 / 24;
  mask: url(../images/dot_line01.png) no-repeat center / cover;
  background: #fff;
}
.head_btn_area .head_btn.reserve a span span::after {
  left: auto;
  right: 0;
  mask: url("../images/dot_line02.png") no-repeat center/cover;
  background: #fff;
}
.head_btn_area .head_btn.reserve a:hover span span::before, .head_btn_area .head_btn.reserve a span span::after {
  background: #a6de63;
}
/*MVバナー*/
.mv_bnr_list {
  position: absolute;
  bottom: 13px;
  right: 0;
  display: flex;
  gap: 21px;
}
.mv_bnr_item {
  display: flex;
  justify-content: center;
  width: 193px;
  height: auto;
  aspect-ratio: 1;
  background: rgb(255 186 66/.85);
  border: 4px solid rgb(255 255 255 / .7);
  border-radius: 50%;
}
.mv_bnr_item:nth-of-type(2) {
  background: rgb(112 176 239/.85);
}
.mv_bnr_item p {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 19px;
  color: #fff;
  text-align: center;
  font-size: 20px;
  letter-spacing: .015em;
  line-height: 1;
  font-family: var(--font-type);
  font-weight: 700;
}
.mv_bnr_item:nth-of-type(2) p {
  padding-top: 24px;
}
.mv_bnr_item p::before {
  display: inline-block;
  content: "";
  width: 42px;
  height: 39px;
  margin-bottom: 13px;
  background: url("../images/mv_icon01.png") no-repeat center/cover
}
.mv_bnr_item:nth-of-type(2) p::before {
  display: inline-block;
  content: "";
  width: 41px;
  height: 30px;
  margin-bottom: 13px;
  background: url("../images/mv_icon02.png") no-repeat center/cover
}
.mv_bnr_item .large {
  font-size: 160%;
  line-height: 1.6;
}
/*==================================================================

  #contents

==================================================================*/
main {
  display: block;
  padding-top: 111px;
}
/*============================================================================

  $footer

============================================================================*/
footer {
  padding-top: 87px;
  background: url("../images/footer_bg.jpg") no-repeat left top/cover;
}
footer .inner {
  max-width: 1200px;
  margin: 0 auto;
}
.footer_flex {
  display: flex;
  gap: 73px;
}
.info_left {
  width: 100%;
}
.footer_logo {
  max-width: 462px;
  margin: 0 auto 16px;
}
.footer_address {
  margin-bottom: 16px;
  text-align: center;
  letter-spacing: .05em;
  line-height: 1.33;
}
.footer_address i {
  color: #69c2d4;
}
.footer_tel {
  margin-bottom: 26px;
}
.footer_tel a {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  color: var(--text-color);
  text-align: center;
  line-height: 1;
  letter-spacing: .025em;
  font-size: 40px;
  font-family: var(--font-type-en);
  font-weight: 700;
}
.footer_tel a i {
  display: grid;
  place-items: center;
  width: 32px;
  height: auto;
  aspect-ratio: 1;
  background: #70b0ef;
  border-radius: 50%;
  color: #fff;
  font-size: 15px;
}
.footer_bnr {
  margin-top: 36px;
}
.footer_bnr a {
  display: block;
  transition: .3s ease;
}
.footer_bnr a:hover {
  opacity: .8;
}
.info_right {
  flex-shrink: 0;
  width: 560px;
}
.info_map iframe {
  height: 390px;
  border-radius: 15px;
}
.info_access {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin-top: 28px;
}
.info_access li {
  padding: 18px 22px 17px;
  background: #dcedfe;
  border-radius: 10px;
  line-height: 1.44;
  letter-spacing: .08em;
  font-size: 18px;
}
.access_btn {
  margin-top: 27px;
}
.access_btn a {
  position: relative;
  display: flex;
  align-items: center;
  width: fit-content;
  margin-left: auto;
  padding: 11px 19px 11px 62px;
  background: #70b0ef;
  border: 1px solid #70b0ef;
  border-radius: 23px;
  transition: .3s ease;
  color: #fff;
  line-height: 1.6;
  letter-spacing: .05em;
  font-size: 16px;
  font-family: var(--font-type);
  font-weight: 700;
}
.access_btn a:hover {
  background: #fff;
  color: #70b0ef;
}
.access_btn a::after {
  content: " \f061";
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: auto;
  aspect-ratio: 1;
  margin-left: 19px;
  background: #fff;
  border-radius: 50%;
  transition: .3s ease;
  color: #7bced9;
  line-height: 1;
  font-size: 14px;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}
.access_btn a:hover::after {
  transform: translateX(10px);
  background: #70b0ef;
  color: #fff;
}
.access_btn a i {
  margin-right: 8px;
  font-size: 18px;
}
p.copy {
  margin-top: 86px;
  padding: 20px 0;
  background: #46bbbe;
  text-align: center;
  line-height: 1;
  letter-spacing: .1em;
  font-size: 14px;
  color: #fff;
}
/*==================================================================

  タイトル

==================================================================*/
h1 {
  color: #666;
  font-size: 13px;
  letter-spacing: 0.12em;
  position: absolute;
  width: 100%;
  max-width: 1200px;
  top: 10px;
  right: 0;
  left: 0;
  padding-left: 40px !important;
  margin: auto !important;
}
.title01 {
  position: relative;
  padding-top: 110px;
  background: url("../images/title_illust_trouble.png") no-repeat center top/355px auto;
}
.title01 h2 {
  margin: 0 auto 26px;
}
.title01 h2 img, .title01 .title_en {
  display: block;
  margin: 0 auto;
}
.title02 {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 179px;
  margin-bottom: 52px;
  background: url(../images/title_bg_blue.png) no-repeat center / auto 100%;
}
.title02::before {
  position: absolute;
  top: -30px;
  left: 17px;
  content: "";
  width: 202px;
  height: auto;
  aspect-ratio: 202/164;
  background: url("../images/orthodontics_sub_title.png") no-repeat center/cover
}
.title02 h2 {
  position: relative;
  width: 100%;
  padding-left: 90px;
  text-align: center;
}
.title02 h2 img {
  max-width: 805px;
}
/*==================================================================

  .btn
  共通CSSなので使っていないものも消さずに残してください

==================================================================*/
.btn01 a {
  position: relative;
  display: inline-block;
  color: #fff;
  font-family: var(--font-type);
  font-size: 18px;
  letter-spacing: 0.12em;
  background: var(--btn-color) url(../images/icon_arrow.svg) no-repeat left 40px center;
  border-radius: 16px;
  padding: 12px 35px 13px 65px;
  transition: opacity 0.2s ease, background-position 0.2s ease;
}
.btn01 a:hover {
  opacity: 0.8;
  background-position: left 45px center;
}
/*==================================================================

  $table
  共通CSSなので使っていないものも消さずに残してください

==================================================================*/
/* 診療時間（医院案内、アクセス共通） */
.footer_info_sche {
  width: 506px;
}
.schedule table {
  width: 100%;
}
.schedule p {
  margin-left: 22px;
  margin-bottom: 2px;
}
.schedule p strong {
  color: #1F2774;
}
.schedule p:last-child {
  margin-bottom: 0;
}
.schedule_note li {
  display: block;
}
/*フッターの診療時間*/
.tb01 {
  margin-bottom: 10px;
  border-spacing: 0;
  border-collapse: collapse;
  white-space: nowrap;
  color: var(--text-color);
}
.tb01 td, .tb01 th {
  vertical-align: middle;
  background: #fff;
  letter-spacing: 0.1em;
  font-size: 17px;
}
.tb01 th {
  width: 36.3%;
  height: 45px;
  line-height: 1;
  white-space: nowrap;
  text-align: center;
}
.tb01 tr:first-of-type th {
  height: 35px;
}
.tb01 td {
  width: 8.4%;
  text-align: center;
}
.tb01 tr:first-of-type th, .tb01 tr:first-of-type td {
  color: #fff;
  background: #70b0ef;
}
.tb01 tr:first-of-type th {
  border-radius: 5px 0 0 5px;
}
.tb01 tr:first-of-type td:last-of-type {
  border-radius: 0 5px 5px 0;
}
.tb01 tr:not(:first-of-type) th, .tb01 tr:not(:first-of-type) td {
  border-bottom: 1px solid #999;
}
.schedule_note {
  gap: 0 17px;
  margin-top: 14px;
  letter-spacing: .025em;
  font-size: 17px;
}
.schedule_note .close {
  color: #63cea7;
  font-weight: bold;
}
.sche_color01 {
  color: #70b0ef;
}
.sche_color02 {
  color: #63cea7;
}
/*==================================================================

  $box
  共通CSSなので使っていないものも消さずに残してください

==================================================================*/
.box1 {
  position: relative;
  width: 1200px;
  margin: 0 auto;
}
/*==================================================================

  trouble

==================================================================*/
.trouble_case_wrap {
  position: relative;
  padding-top: 30px;
  padding-bottom: 80px;
  background: url(../images/ttl_bg_sky_blue.png) no-repeat left top / 100% auto, url(../images/trouble_bg_pattern.png), url(../images/trouble_bg_dummy.jpg) no-repeat left top / cover;
}
.trouble_case_wrap::before {
  position: absolute;
  z-index: 2;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  content: "";
  width: 69px;
  height: auto;
  aspect-ratio: 69/161;
  background: url("../images/trouble_arrow.png") no-repeat center/cover;
}
.sec_trouble .title01 h2 img {
  max-width: 1107px;
}
.sec_trouble .title01 .title_en {
  max-width: 593px;
}
.trouble_item_wrap {
  padding: 0 0 43px;
}
.sec_trouble h3 {
  max-width: 744px;
  margin: 0 auto;
}
.trouble_case {
  padding: 65px 66px 41px;
  background: rgb(174 206 137 /.75);
  border-radius: 30px;
}
.trouble_text {
  position: relative;
  margin-bottom: 37px;
  padding: 20px 60px;
  background: #fff;
  border: #99bc71 6px solid;
  border-radius: 65px;
  letter-spacing: .015em;
  line-height: 1.4;
  text-align: center;
  font-size: 30px;
  font-family: var(--font-type);
  font-weight: 700;
}
.trouble_text::after {
  position: absolute;
  content: "";
  top: calc(50% - 10px);
  right: -38px;
  transform: translateY(-50%);
  width: 86px;
  height: auto;
  aspect-ratio: 86/112;
  background: url("../images/trouble_sign_illust.png") no-repeat center/cover;
}
.trouble_text .orange {
  color: #ff8c1b;
  font-size: 126%;
}
.trouble_text .dotted {
  background-image: radial-gradient(circle at center, #ffba42 20%, transparent 20%);
  background-position: top right;
  background-repeat: repeat-x;
  background-size: 1em 0.3em;
  padding-top: .18em;
}
.trouble_case_list {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 11px 47px;
}
.trouble_case_list li {
  width: calc((100% / 4) - (47px * 3 / 4));
}
.trouble_answer_wrap {
  position: relative;
  margin-top: -50px;
  padding-top: 173px;
  padding-bottom: 100px;
}
.trouble_answer_wrap::before {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 100%;
  mask: url(../images/trouble_solution_bg_mask.png) no-repeat left top / 100% auto;
  background: #a6de63 url(../images/trouble_solution_pattern.png) repeat left top 40px;
}
.answer_text_wrap {
  position: relative;
  max-width: 1115px;
  margin: 0 auto;
}
.answer_text_wrap::before {
  position: absolute;
  z-index: 2;
  bottom: -27px;
  left: -84px;
  content: "";
  width: 138px;
  aspect-ratio: 138 / 219;
  background: url(../images/trouble_solution_illust.png) no-repeat center / cover;
}
@media screen and (min-width: 641px) {
  .answer_text_wrap::after {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    content: "";
    width: calc(100% + 20px);
    height: calc(100% + 20px);
    background: rgb(255 255 255/.4);
    border-radius: 40px;
  }
}
.answer_text {
  position: relative;
  z-index: 1;
  padding: 59px 60px 43px;
  margin: 0 auto;
  background: #fff;
  border-radius: 40px;
}
.answer_text::before {
  position: absolute;
  top: -108px;
  left: 70px;
  content: "";
  width: 571px;
  height: auto;
  aspect-ratio: 571/170;
  background: url("../images/trouble_solution_sub_title.png") no-repeat center/cover;
}
.answer_text::after {
  position: absolute;
  top: -129px;
  right: -50px;
  content: "";
  width: 270px;
  height: auto;
  aspect-ratio: 1;
  background: url("../images/trouble_solution_img.jpg") no-repeat center/cover;
  border-radius: 50%;
}
.answer_text p {
  text-align: center;
  letter-spacing: .015em;
  line-height: 1.38;
  font-size: 32px;
  font-family: var(--font-type);
  font-weight: 700;
}
.answer_text p:not(:last-of-type) {
  margin-bottom: 26px;
}
.answer_text p .orange {
  color: #ff8c1b;
  font-size: 137.5%;
}
.answer_text p .standout {
  padding: 0 6px 4px;
  background: linear-gradient(transparent 60%, #ffed45 60%);
  color: #ff8c1b;
  line-height: 1.5;
  -webkit-text-stroke: 6px #fff;
  paint-order: stroke;
}
/*==================================================================

  treatment

==================================================================*/
.sec_treatment {
  position: relative;
  margin-top: -50px;
  padding: 68px 0 100px;
}
.sec_treatment::before {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 100%;
  mask: url(../images/trouble_solution_bg_mask.png) no-repeat left top / 100% auto;
  background: url(../images/orthodontics_bg_wave.png) repeat-x left bottom -2px/100% auto, url("../images/orthodontics_bg.jpg") no-repeat top/cover;
}
.treatment_content {
  position: relative;
  padding: 57px 0 97px;
}
.treatment_content::before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  content: "";
  width: calc(100% + 300px);
  height: 100%;
  background: #fff;
  border: 8px solid rgb(112 196 255/.8);
  border-radius: 60px;
}
@media screen and (min-width: 641px) and (max-width: 1500px) {
  .treatment_content::before {
    width: calc(100% + 100px);
  }
}
.sec_treatment .title02::after {
  position: absolute;
  top: -39px;
  left: 224px;
  content: "";
  width: 148px;
  height: auto;
  aspect-ratio: 148/96;
  background: url("../images/orthodontics_title_illust01.png") no-repeat center/cover;
}
.sec_treatment .title02 h2::before {
  position: absolute;
  top: -120px;
  right: 9px;
  content: "";
  width: 109px;
  height: auto;
  aspect-ratio: 109/112;
  background: url("../images/orthodontics_title_illust02.png") no-repeat center/cover;
}
.treatment_flex {
  position: relative;
  display: flex;
  gap: 67px;
}
.treatment_img {
  flex-shrink: 0;
  width: 572px;
}
.treatment_img > div {
  position: relative;
}
.treatment_img > div::before {
  position: absolute;
  bottom: -90px;
  right: 26px;
  content: "";
  width: 178px;
  height: auto;
  aspect-ratio: 178/147;
  background: url("../images/orthodontics_img_illust.png") no-repeat center/cover;
}
.treatment_img img {
  border: 6px solid rgb(162 212 250 /.4);
  border-radius: 20px;
}
.treatment_text h3 {
  margin-bottom: 20px;
  padding-left: 110px;
  background: url(../images/logo_mark.png) no-repeat left center / 94px auto;
  color: #409ff4;
  letter-spacing: .03em;
  line-height: 1.25;
  font-size: 32px;
  font-family: var(--font-type);
  font-weight: 700;
}
.treatment_text p {
  letter-spacing: .01em;
  line-height: 1.7;
  font-size: 20px;
}
.treatment_about {
  margin-top: 23px;
  padding: 36px 40px 34px;
  background: #70c4ff;
  border-radius: 20px;
}
.treatment_about h4 {
  position: relative;
  width: 100%;
  margin-bottom: 22px;
  padding: 11px 10px 12px;
  background: #fff;
  border-radius: 25px;
  text-align: center;
}
.treatment_about h4::before{
	position: absolute;
	top: -21px;
	right: 16px;
	content: "";
	width: 97px;
	height: auto;
	aspect-ratio: 97 / 80;
	background: url("../images/orthodontics_about_title_illust.png") no-repeat center/cover;
}
.treatment_about h4 img {
  max-width: 241px;
}
.treatment_about p {
  color: #fff;
}
/*==================================================================

  merit

==================================================================*/
.sec_merit {
  position: relative;
  padding-top: 60px;
  padding-bottom: 463px;
  background: url("../images/merit_bg_img.png") no-repeat left bottom 32px/48.54% auto, url("../images/merit_illust01.png") no-repeat left 5.3125% top 209px/7.187% auto, url("../images/merit_illust02.png") no-repeat top 50% right 33px/13.593% auto, url("../images/merit_illust03.png") no-repeat bottom 810px left 4.166%/12.916% auto, url("../images/merit_bg_pattern.jpg") no-repeat top left /cover;
  counter-reset: number;
}
@media screen and (min-width: 1921px) {
  .sec_merit {
    background: url("../images/merit_bg_img.png") no-repeat left bottom 32px/932px auto, url("../images/merit_illust01.png") no-repeat left 102px top 209px/138px auto, url("../images/merit_illust02.png") no-repeat top 50% right 33px/261px auto, url("../images/merit_illust03.png") no-repeat bottom 810px left 80px/248px auto, url("../images/merit_bg_pattern.jpg") no-repeat top left /cover;
    counter-reset: number;
  }
}
.sec_merit .title02 {
  background: url("../images/title_bg_green.png") no-repeat center/100% auto
}
.sec_merit .title02::before {
  background: url(../images/title_en_merit.png) no-repeat center / cover;
}
.sec_merit .title02::after {
  position: absolute;
  content: "";
  top: 0;
  right: 35px;
  width: 139px;
  height: auto;
  aspect-ratio: 139/147;
  background: url("../images/merit_title_illust01.png") no-repeat center/cover;
}
.sec_merit .title02 h2 {
  padding-left: 40px;
}
.sec_merit .title02 h2 img {
  max-width: 759px;
}
.merit_flex {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 107px 75px;
}
.merit_item:nth-of-type(2n) {
  position: relative;
  top: 108px;
}
.merit_img {
  position: relative;
  margin-bottom: 21px;
}
.merit_img::before {
  position: absolute;
  top: 50%;
  left: 50%;
  content: "";
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  mask: url(../images/meirt_img_mask.png) no-repeat center / cover;
  background: url(../images/merit_img_pattern.png) no-repeat center / cover;
  background-color: #aae1f9;
}
.merit_item:nth-of-type(2n) .merit_img::before {
  background-color: #fdd896;
}
.merit_item:nth-of-type(3n) .merit_img::before {
  background-color: #ffcbcb;
}
.merit_item:nth-of-type(4n) .merit_img::before {
  background-color: #c1e892;
}
.merit_img::after {
  position: absolute;
  top: -26px;
  left: 0;
  counter-increment: number 1;
  content: "0"counter(number);
  display: grid;
  place-items: center;
  width: 170px;
  height: auto;
  aspect-ratio: 170/168;
  mask: url(../images/merit_num_bg_mask.png) no-repeat center / cover;
  background: #55c3f2;
  color: #fff;
  line-height: 1;
  letter-spacing: .07em;
  font-size: 60px;
  font-family: var(--font-type-en);
  font-weight: 700;
}
.merit_item:nth-of-type(2n) .merit_img::after {
  background: #fcb22d;
}
.merit_item:nth-of-type(3n) .merit_img::after {
  background: #ff9797;
}
.merit_item:nth-of-type(4n) .merit_img::after {
  background: #a6de63;
}
.merit_img_mask {
  mask: url("../images/merit_main_img_mask.png") no-repeat center/cover;
}
.merit_title h3 {
  margin-bottom: 18px;
  padding-bottom: 27px;
  background: url(../images/merit_line.png) no-repeat center bottom / auto 13px;
  color: #55c3f2;
  text-align: center;
  line-height: 1.38;
  letter-spacing: .02em;
  font-size: 32px;
  font-family: var(--font-type);
  font-weight: 700;
}
.merit_item:nth-of-type(2n) .merit_title h3 {
  color: #fcb22d;
}
.merit_item:nth-of-type(3n) .merit_title h3 {
  color: #ff9797;
}
.merit_item:nth-of-type(4n) .merit_title h3 {
  color: #a6de63;
}
.merit_text {
  padding: 0 25px;
}
.merit_text p {
  line-height: 1.7;
  letter-spacing: .01em;
  font-size: 20px;
}
/*==================================================================

  training

==================================================================*/
.sec_training {
  padding-top: 98px;
  padding-bottom: 90px;
  background: url("../images/training_bg.jpg") no-repeat center/cover;
  counter-reset: train-number;
}
.sec_training .title02::before {
  background: url(../images/training_sub_title.png) no-repeat center / cover;
}
.sec_training .title02::after {
  position: absolute;
  content: "";
  top: -5px;
  right: 18px;
  width: 214px;
  height: auto;
  aspect-ratio: 214 / 133;
  background: url(../images/training_title_illust.png) no-repeat center / cover;
}
.sec_training .title02 h2 {
  padding-left: 0;
}
.sec_training .title02 h2 img {
  position: relative;
  top: -33px;
  max-width: 686px;
}
.training_flex {
  display: flex;
  justify-content: center;
  gap: 76px;
}
.training_item {
  width: 340px;
}
.training_img {
  position: relative;
  max-width: 327px;
  margin-bottom: 43px;
  padding: 12px 13px 11px;
  background: url("../images/training_img_bg.png") no-repeat center/cover;
}
.training_img::before {
  position: absolute;
  z-index: 1;
  content: "";
  height: auto;
}
.training_item:first-of-type .training_img::before {
  left: -10px;
  bottom: -9px;
  width: 107px;
  aspect-ratio: 107/115;
  background: url("../images/training_img_illust01.png") no-repeat center/cover;
}
.training_item:nth-of-type(2) .training_img::before {
  right: -13px;
  bottom: -6px;
  width: 94px;
  aspect-ratio: 94/100;
  background: url("../images/training_img_illust02.png") no-repeat center/cover;
}
.training_item:nth-of-type(3) .training_img::before {
  left: -8px;
  top: -11px;
  width: 91px;
  aspect-ratio: 91/130;
  background: url("../images/training_img_illust03.png") no-repeat center/cover;
}
.training_img_mask {
  mask: url("../images/training_img_mask.png") no-repeat center / cover;
}
.training_num {
  position: absolute;
  bottom: -21px;
  left: 50%;
  transform: translateX(-50%);
  color: #409ff4;
  text-align: center;
  letter-spacing: .05em;
  line-height: 1;
  font-size: 22px;
  font-family: var(--font-type-en);
  font-weight: 700;
  -webkit-text-stroke: 6px #fff;
  paint-order: stroke;
}
.training_num span {
  display: block;
  line-height: 1;
}
.training_num span::before {
  counter-increment: train-number 1;
  content: "0"counter(train-number);
  color: #5ac912;
  font-size: 318%;
  -webkit-text-stroke: 9px #fff;
  paint-order: stroke;
}
.training_title h3 {
  margin-bottom: 14px;
  color: #409ff4;
  text-align: center;
  letter-spacing: .03em;
  line-height: 1.4;
  font-size: 30px;
  font-family: var(--font-type);
  font-weight: 700;
}
.training_text {
  padding: 0 10px;
}
.training_text p {
  line-height: 1.7;
  letter-spacing: .01em;
  font-size: 20px;
}
/*==================================================================

  cta

==================================================================*/
.sec_cta {
  position: relative;
  padding: 110px 0 120px;
}
.sec_cta::before {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 100%;
  mask: url(../images/trouble_solution_bg_mask.png) no-repeat left top / 100% auto;
  background: url("../images/cta_wave01.png") repeat-x left bottom/100% auto, url("../images/cta_bg_img01.png") no-repeat left -128px top -41px /48% auto, url("../images/cta_bg_img02.png") no-repeat right -135px bottom -92px /51% auto, url("../images/cta_bg.jpg") no-repeat left top/cover;
}
.cta_content {
  max-width: 800px;
  margin: 0 auto;
  background: rgb(255 255 255 /.85);
  border-radius: 40px;
  border: 6px solid rgb(170 194 255 /.5);
}
.cta_text {
  position: relative;
  margin: 0 auto;
  padding: 66px 104px 48px;
}
.cta_text::before {
  position: absolute;
  top: 11px;
  left: 33px;
  content: "";
  width: 148px;
  height: auto;
  aspect-ratio: 148/218;
  background: url("../images/cta_illust01.png") no-repeat center/cover;
}
.cta_text::after {
  position: absolute;
  top: 15px;
  right: 43px;
  content: "";
  width: 118px;
  height: auto;
  aspect-ratio: 118/217;
  background: url("../images/cta_illust02.png") no-repeat center/cover;
}
.cta_text p {
  position: relative;
  z-index: 1;
  margin-bottom: 41px;
  padding: 0 74px;
  text-align: center;
  letter-spacing: .01em;
  line-height: 1.64;
  font-size: 28px;
  font-family: var(--font-type);
  font-weight: 700;
  -webkit-text-stroke: 6px #fff;
  paint-order: stroke;
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
}
.cta_text .standout {
  padding: 0 6px 4px;
  background: linear-gradient(transparent 60%, #ffed45 60%);
  color: #51a3f4;
}
.cta_btn a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px 48px 20px 39px;
  background: #51a3f4;
  border-radius: 45px;
  transition: .3s ease;
  color: #fff;
  line-height: 1.6;
  letter-spacing: 0;
  font-size: 26px;
  font-family: var(--font-type);
  font-weight: 700;
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
}
.cta_btn a:hover {
  background: var(--sub-color);
}
.cta_btn a::before {
  display: inline-block;
  content: "";
  width: 51px;
  height: auto;
  margin-right: 18px;
  aspect-ratio: 51/48;
  background: url("../images/cta_btn_icon.png") no-repeat center/cover;
}
.cta_btn a::after {
  content: " \f061";
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: auto;
  aspect-ratio: 1;
  margin-left: 30px;
  background: #fff;
  border-radius: 50%;
  transition: .3s ease;
  color: #7bced9;
  line-height: 1;
  font-size: 16px;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}
.cta_btn a:hover::after {
  transform: translateX(10px);
  color: var(--sub-color);
}
/* cta02 */
.sec_cta#cta02::before {
  background: url("../images/cta_bg_img01.png") no-repeat left -128px top -41px /48% auto, url("../images/cta_bg_img02.png") no-repeat right -135px bottom -92px /51% auto, url("../images/cta_bg.jpg") no-repeat left top/cover;
}
.sec_cta#cta02 .cta_text::before {
  top: -29px;
  left: 19px;
}
.sec_cta#cta02 .cta_text::after {
  top: 58px;
  right: 35px;
}
/* cta03 */
.sec_cta#cta03 {
  position: relative;
  z-index: 1;
  margin-top: -102px;
  padding-top: 124px;
  padding-bottom: 96px;
}
.sec_cta#cta03 .cta_text {
  position: relative;
  margin: 0 auto;
  padding: 66px 104px 64px;
}
.sec_cta#cta03 .cta_text::before {
  top: -19px;
  left: -62px;
}
.sec_cta#cta03 .cta_text::after {
  top: -21px;
  right: -73px;
}
/*==================================================================

  reason

==================================================================*/
.sec_reason {
  padding-top: 98px;
  padding-bottom: 90px;
  background: url("../images/reason_bg01.png") no-repeat left top/28.90625% auto, url("../images/reason_bg02.png") no-repeat top 500px right/29.895% auto, url("../images/reason_bg01.png") no-repeat left top 1500px/28.90625% auto, url("../images/reason_bg02.png") no-repeat bottom 882px right/29.895% auto, url("../images/reason_bg01.png") no-repeat left bottom 180px/28.90625% auto;
  counter-reset: reason-number;
}
.sec_reason .title02 {
  margin-bottom: 96px;
  background: url(../images/title_bg_green.png) no-repeat center / auto 100%;
}
.sec_reason .title02::before {
  background: url("../images/title_en_reason.png") no-repeat center/cover
}
.sec_reason .title02::after {
  position: absolute;
  content: "";
  top: 16px;
  right: -3px;
  width: 225px;
  height: auto;
  aspect-ratio: 225 / 124;
  background: url(../images/title_illust_reason.png) no-repeat center / cover;
}
.sec_reason .title02 h2 {
  padding-left: 3px;
}
.sec_reason .title02 h2 img {
  max-width: 703px;
}
.reason_flex {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 110px;
}
.reason_item {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 53px;
}
.reason_item:nth-of-type(2n) {
  flex-flow: row-reverse;
}
.reason_item::before {
  position: absolute;
  z-index: -1;
  content: "";
  top: -38px;
  right: -75px;
  width: 855px;
  height: auto;
  aspect-ratio: 855/496;
  background: url("../images/reason_text_bg01.png") no-repeat center/cover;
}
.reason_item:nth-of-type(2n)::before {
  left: -75px;
  right: auto;
  background: url("../images/reason_text_bg02.png") no-repeat center/cover;
}
@media screen and (min-width: 641px) and (max-width: 1450px) {
  .reason_item::before {
    right: -50px;
  }
  .reason_item:nth-of-type(2n)::before {
    left: -50px;
  }
}
.reason_img {
  position: relative;
  flex-shrink: 0;
  width: 620px;
  padding: 15px;
  background: url("../images/reason_img_bg01.png") no-repeat center/cover;
  border-radius: 30px;
}
.reason_item:nth-of-type(2n) .reason_img {
  background: url("../images/reason_img_bg02.png") no-repeat center/cover;
}
.reason_img::before {
  position: absolute;
  bottom: -30px;
  right: 38px;
  counter-increment: reason-number 1;
  content: "0"counter(reason-number);
  color: #409ff4;
  letter-spacing: .05em;
  line-height: 1;
  font-size: 110px;
  font-family: var(--font-type-en);
  font-weight: 700;
  -webkit-text-stroke: 9px #fff;
  paint-order: stroke;
}
.reason_item:nth-of-type(2n) .reason_img::before {
  color: #6fca8d;
}
.reason_img img {
  border-radius: 30px;
}
.reason_content {
  padding-top: 24px;
}
.reason_title h3 {
  display: flex;
  align-items: center;
  min-height: 120px;
  margin-bottom: 15px;
  padding-left: 102px;
  background: url(../images/reason_title_illust01.png) no-repeat left center / 85px auto;
  border-bottom: 4px dotted #409ff4;
  color: #409ff4;
  line-height: 1.47;
  letter-spacing: .03em;
  font-size: 34px;
  font-family: var(--font-type);
  font-weight: 700;
}
.reason_item:nth-of-type(2n) .reason_title h3 {
  background: url(../images/reason_title_illust02.png) no-repeat left center / 85px auto;
  border-bottom: 4px dotted #6fca8d;
  color: #6fca8d;
}
.reason_text p {
  line-height: 1.7;
  letter-spacing: .01em;
  font-size: 20px;
}
.reason_text p span {
  color: #409ff4;
}
.reason_item:nth-of-type(2n) .reason_text p span {
  color: #6fca8d;
}
/*==================================================================

  flow

==================================================================*/
.sec_flow {
  position: relative;
  margin-top: -50px;
  padding-bottom: 80px;
  counter-reset: flow-number;
}
.sec_flow::before {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 100%;
  mask: url(../images/trouble_solution_bg_mask.png) no-repeat left top / 100% auto;
  background: url("../images/flow_bg_circle_left.png") no-repeat left bottom /17.447% auto, url("../images/flow_bg_circle_center.png") no-repeat center bottom/50% auto, url("../images/flow_bg_circle_right.png") no-repeat right bottom/16.71875% auto, url("../images/flow_bg_pattern.png");
}
.sec_flow::after {
  position: absolute;
  z-index: -1;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  content: "";
  width: 70.3125%;
  height: 80%;
  background: rgb(255 255 255/ .7);
}
.flow_bg {
  position: relative;
  z-index: 1;
  padding-top: 80px;
}
.flow_bg::before {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 100%;
  mask: url(../images/trouble_solution_bg_mask.png) no-repeat left top / 100% auto;
  background: url("../images/flow_bg_top.png") no-repeat center top/100% auto;
}
.sec_flow .title01 {
  margin-bottom: 88px;
  padding-top: 130px;
  background: url("../images/title_en_illust.png") no-repeat center top/296px auto
}
.sec_flow .title01 h2 img {
  max-width: 438px;
}
.sec_flow .title01 .title_en {
  max-width: 593px;
}
.flow_sentence {
  margin-bottom: 102px;
}
.flow_sentence p {
  letter-spacing: .03em;
  line-height: 1.58;
  text-align: center;
  font-size: 24px;
}
.flow_sentence p span {
  color: #55c3f2;
}
.flow_flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 58px;
}
.flow_item {
  position: relative;
  width: calc((100% / 3) - (58px * 2 / 3));
}
@media screen and (min-width: 641px) {
  .flow_item:not(:nth-of-type(3n)):not(:nth-of-type(5))::before {
    position: absolute;
    z-index: 1;
    top: 125px;
    right: -75px;
    content: "";
    width: 104px;
    height: auto;
    aspect-ratio: 104/40;
    background: url("../images/flow_arrow.png") no-repeat center/cover;
  }
}
.flow_num {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  width: 110px;
  height: auto;
  aspect-ratio: 1;
  background: #55c3f2 url(../images/flow_num_line.png) no-repeat center / 88% auto;
  border-radius: 50%;
  color: #fff;
  letter-spacing: .05em;
  line-height: 1;
  font-size: 16px;
  font-family: var(--font-type-en);
  font-weight: 700;
}
.flow_item:nth-last-of-type(2n) .flow_num {
  background: #a6de63 url(../images/flow_num_line.png) no-repeat center / 88% auto;
}
.flow_num span {
  position: relative;
}
.flow_num span::before {
  display: block;
  margin-top: 4px;
  counter-increment: flow-number 1;
  content: "0"counter(flow-number);
  font-size: 281.25%;
}
.flow_img {
  margin-bottom: 19px;
  background: #55c3f2;
  border-radius: 25px;
}
.flow_item:nth-last-of-type(2n) .flow_img {
  background: #a6de63;
}
.flow_img img {
  border-radius: 50px;
}
.flow_title h3 {
  margin-bottom: 14px;
  color: #55c3f2;
  text-align: center;
  letter-spacing: .015em;
  line-height: 1.29;
  font-size: 34px;
  font-family: var(--font-type);
  font-weight: 700;
}
.flow_item:nth-last-of-type(2n) .flow_title h3 {
  color: #a6de63;
}
.flow_text p {
  line-height: 1.7;
  letter-spacing: .01em;
  font-size: 20px;
}
/*==================================================================

  price

==================================================================*/
.sec_price {
  position: relative;
  padding-top: 539px;
  padding-bottom: 204px;
  background: url("../images/reason_bg01.png") no-repeat left top 833px/28.3854% auto, url("../images/reason_bg02.png") no-repeat top 520px right/20.78125% auto;
}
.sec_price::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 600px;
  background: url("../images/price_bg_img_top.jpg") no-repeat center/cover;
}
.sec_price::after {
  position: absolute;
  bottom: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 802px;
  mask: url(../images/trouble_solution_bg_mask.png) no-repeat left top / 100% auto;
  background: linear-gradient(rgb(255 255 255 / .4), rgb(255 255 255 / .4)), url("../images/expense_bg.jpg") no-repeat left top/cover;
}
.sec_price .title02 {
  margin-bottom: 47px;
}
.sec_price .title02::before {
  left: 137px;
  background: url("../images/title_en_price.png") no-repeat center/cover
}
.sec_price .title02::after {
  position: absolute;
  content: "";
  top: -8px;
  right: 59px;
  width: 299px;
  height: auto;
  aspect-ratio: 299 / 156;
  background: url("../images/title_illust_price.png") no-repeat center / cover;
}
.sec_price .title02 h2 {
  padding-left: 20px;
}
.sec_price .title02 h2 img {
  max-width: 385px;
}
.price_table {
  position: relative;
  z-index: 1;
  margin-bottom: 58px;
}
.price_table table {
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
}
.price_table th, .price_table td {
  width: 50%;
  padding: 21px 10px;
  border-bottom: 2px solid #fff;
  text-align: center;
  letter-spacing: .05em;
  font-size: 22px;
  font-weight: bold;
}
.price_table th {
  background: #70b0ef;
  color: #fff;
}
.price_table tr:nth-of-type(2n) th {
  background: #46bbbe;
}
.price_table tr:first-of-type th {
  border-top-left-radius: 20px;
}
.price_table tr:last-of-type th {
  border-bottom-left-radius: 20px;
}
.price_table td {
  background: #dfefff;
}
.price_table tr:nth-of-type(2n) td {
  background: #e6f9f9;
}
.price_table tr:first-of-type td {
  border-top-right-radius: 20px;
}
.price_table tr:last-of-type td {
  border-bottom-right-radius: 20px;
}
.payment {
  position: relative;
  z-index: 1;
  margin-bottom: 60px;
  padding-bottom: 60px;
  background: #fff;
  border-radius: 20px;
  border: 5px solid #46bbbe;
}
.payment_title {
  margin-bottom: 52px;
  padding: 27px 20px;
  background: #46bbbe;
  border-radius: 10px 10px 0 0;
}
.payment_title h3 {
  color: #fff;
  text-align: center;
  letter-spacing: .08em;
  line-height: 1.38;
  font-size: 26px;
  font-family: var(--font-type);
  font-weight: 700;
}
.payment_list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 31px;
  max-width: 850px;
  margin: 0 auto;
}
.expense {
  position: relative;
  z-index: 1;
  padding: 0 0 47px;
  background: #fff;
  border-radius: 20px;
  border: 5px solid #409ff4;
  border-top: none;
}
.expense_title {
  margin-bottom: 52px;
  padding: 27px 20px;
  background: #409ff4;
  border-radius: 10px 10px 0 0;
}
.expense_title h3 {
  color: #fff;
  text-align: center;
  letter-spacing: .08em;
  line-height: 1.38;
  font-size: 26px;
  font-family: var(--font-type);
  font-weight: 700;
}
.expense_text {
  margin-bottom: 27px;
  padding: 0 84px;
}
.expense_text p {
  line-height: 1.7;
  letter-spacing: .01em;
  font-size: 20px;
}
.expense_flex {
  display: flex;
  gap: 60px;
  padding: 0 84px;
}
.expense_need {
  width: 100%;
  margin-bottom: 14px;
}
.expense_img {
  flex-shrink: 0;
  width: 330px;
}
.expense_img img {
  border-radius: 50%;
}
.expense_need {
  padding: 40px;
  background: #fef2d4;
  border-radius: 15px;
}
.expense_need h4 {
  margin-bottom: 28px;
  padding: 3px 10px;
  background: #409ff4;
  border-radius: 25px;
  color: #fff;
  text-align: center;
  letter-spacing: .08em;
  line-height: 2;
  font-size: 22px;
  font-weight: bold;
}
.expense_list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 48px;
}
.expense_list li {
  position: relative;
  padding-left: 39px;
  letter-spacing: .05em;
  line-height: 1.7;
  font-size: 22px;
  font-weight: bold;
}
.expense_list li::before {
  position: absolute;
  top: 5px;
  left: 0;
  content: "";
  width: 29px;
  height: auto;
  aspect-ratio: 29 / 25;
  background: url("../images/list_check_mark.png") no-repeat center/cover;
}
.expense_precaution li {
  display: flex;
  line-height: 1.7;
  letter-spacing: .015em;
  font-size: 20px;
}
.expense_precaution li::before {
  display: inline-block;
  content: "※";
}
/*==================================================================

  faq

==================================================================*/
.sec_faq {
  padding-top: 80px;
  background: url("../images/faq_bg.jpg") no-repeat left top/100% auto;
}
.sec_faq .title02 {
  margin-bottom: 40px;
  background: url(../images/title_bg_green.png) no-repeat center / auto 100%
}
.sec_faq .title02::before {
  background: url(../images/title_en_faq.png) no-repeat center / cover;
}
.sec_fa1 .title02::after {
  position: absolute;
  content: "";
  top: -44px;
  right: 57px;
  width: 176px;
  height: auto;
  aspect-ratio: 176 / 196;
  background: url(../images/title_illust_faq.png) no-repeat center / cover;
}
.sec_faq .title02 h2 {
  padding-left: 15px;
}
.sec_faq .title02 h2 img {
  max-width: 639px;
}
.faq_list dl:not(:last-of-type) {
  margin-bottom: 14px;
}
.faq_list dt {
  position: relative;
  padding: 23px 65px 22px 42px;
  background: #409ff4;
  border-radius: 15px;
  transition: 0.3s ease;
  cursor: pointer;
}
.faq_list dt:hover {
  background: #107bdb;
}
.faq_list dt.active {
  background: #107bdb;
  border-radius: 15px 15px 0 0;
}
.faq_list dt::before, .faq_list dt::after {
  position: absolute;
  content: "";
  top: 50%;
  right: 35px;
  background: #fff;
  transition: transform 0.3s ease;
}
.faq_list dt::before {
  transform: translateY(-50%);
  width: 28px;
  height: 2px;
}
.faq_list dt::after {
  right: 47px;
  transform: translate(-50%, -50%);
  width: 2px;
  height: 28px;
}
.faq_list dt.active::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.faq_list dt .list_question {
  position: relative;
  display: flex;
  gap: 15px;
  color: #fff;
  letter-spacing: .08em;
  line-height: 1.75;
  font-size: 24px;
  font-weight: 700;
}
.faq_list dt .list_question::before {
  display: inline-block;
  content: "Q.";
  font-size: 26px;
  font-family: var(--font-type-en);
  font-weight: 700;
}
.faq_list dd {
  position: relative;
  display: flex;
  gap: 15px;
  padding: 23px 42px 22px;
  background: #cbe6fe;
  border-radius: 0 0 15px 15px;
}
.faq_list dd::before {
  display: inline-block;
  content: "A.";
  color: #409ff4;
  font-size: 24px;
  font-family: var(--font-type-en);
  font-weight: 700;
}
.list_answer {
  position: relative;
  line-height: 1.7;
  letter-spacing: .02em;
  font-size: 20px;
}
/*==================================================================

  CSSアニメーション

==================================================================*/
/* フェードイン */
.fadeIn {
  opacity: 0;
  visibility: visible;
}
.is-visible.fadeIn {
  -webkit-animation: fadeIn 1s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
  animation: fadeIn 1s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/* フェードイン（下→上） */
.fadeInUp {
  opacity: 0;
  visibility: visible;
}
.is-visible.fadeInUp {
  -webkit-animation: fadeInUp 1s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
  animation: fadeInUp 1s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
}
@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
/* フェードイン（右→左） */
.fadeInRight {
  opacity: 0;
  visibility: visible;
}
.is-visible.fadeInRight {
  -webkit-animation: fadeInRight 1s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
  animation: fadeInRight 1s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
}
@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
/* フェードイン（左→右） */
.fadeInLeft {
  opacity: 0;
  visibility: visible;
}
.is-visible.fadeInLeft {
  -webkit-animation: fadeInLeft 1s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
  animation: fadeInLeft 1s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
}
@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
/* フリップ（右回転） */
.flipRight {
  opacity: 0;
  visibility: visible;
}
.is-visible.flipRight {
  -webkit-animation: flipRight 1s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
  animation: flipRight 1s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
  -webkit-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
}
@-webkit-keyframes flipRight {
  0% {
    opacity: 0;
    -webkit-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
}
@keyframes flipRight {
  0% {
    opacity: 0;
    -webkit-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
}
/* フリップ（左回転） */
.flipLeft {
  opacity: 0;
  visibility: visible;
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
.is-visible.flipLeft {
  -webkit-animation: flipLeft 1s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
  animation: flipLeft 1s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
}
@-webkit-keyframes flipLeft {
  0% {
    opacity: 0;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
}
@keyframes flipLeft {
  0% {
    opacity: 0;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
}
/* 恒常的に動くアニメーション */
/* ゆっくり回転（右回転） */
.rotateRight {
  -webkit-animation: rotateRight 20s linear infinite;
  animation: rotateRight 20s linear infinite;
}
@-webkit-keyframes rotateRight {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotateRight {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
/* ゆっくり回転（左回転） */
.rotateLeft {
  -webkit-animation: rotateLeft 20s linear infinite;
  animation: rotateLeft 20s linear infinite;
}
@-webkit-keyframes rotateLeft {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}
@keyframes rotateLeft {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}
/* 浮遊（基準点から上） */
.floatingUp {
  -webkit-animation: floatingUp 10s ease-in-out infinite;
  animation: floatingUp 10s ease-in-out infinite;
}
@-webkit-keyframes floatingUp {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes floatingUp {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
/* 浮遊（基準点から下） */
.floatingDown {
  -webkit-animation: floatingDown 10s ease-in-out infinite;
  animation: floatingDown 10s ease-in-out infinite;
}
@-webkit-keyframes floatingDown {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes floatingDown {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
/* 生き物が跳ねる（鳥、リスなど） */
.jumping {
  position: relative;
  -webkit-animation: jumping 1s ease-in-out infinite;
  animation: jumping 1s ease-in-out infinite;
}
@-webkit-keyframes jumping {
  0% {
    top: 0;
  }
  10% {
    top: -5px;
  }
  20% {
    top: 0px;
  }
  30% {
    top: -5px;
  }
  40% {
    top: 0px;
  }
  100% {
    top: 0px;
  }
}
@keyframes jumping {
  0% {
    top: 0;
  }
  10% {
    top: -5px;
  }
  20% {
    top: 0px;
  }
  30% {
    top: -5px;
  }
  40% {
    top: 0px;
  }
  100% {
    top: 0px;
  }
}
/*common*/
.pc_inline {
  display: inline !important
}
.sp_inline {
  display: none !important
}
.sp_inline_ip {
  display: none !important
}
.pc_table {
  display: none !important
}
.sp_table {
  display: none !important
}
address, body, dd, dl, dt, form, h1, h2, h3, h4, h5, h6, option, p, pre, select {
  margin: 0;
  padding: 0;
  -webkit-text-size-adjust: 100%
}
img {
  vertical-align: middle;
}
iframe {
  vertical-align: middle;
}
li, ul {
  list-style: none;
  margin: 0;
  padding: 0
}
a img {
  border: none
}
.w010par {
  width: 10%
}
.w020par {
  width: 20%
}
.w025par {
  width: 25%
}
.w050par {
  width: 50%
}
.w075par {
  width: 75%
}
.w100par {
  width: 100%
}
.w010 {
  width: 10px
}
.w020 {
  width: 20px
}
.w030 {
  width: 30px
}
.w040 {
  width: 40px
}
.w050 {
  width: 50px
}
.w060 {
  width: 60px
}
.w070 {
  width: 70px
}
.w080 {
  width: 80px
}
.w090 {
  width: 90px
}
.w100 {
  width: 100px
}
.w110 {
  width: 110px
}
.w120 {
  width: 120px
}
.w130 {
  width: 130px
}
.w140 {
  width: 140px
}
.w150 {
  width: 150px
}
.w160 {
  width: 160px
}
.w170 {
  width: 170px
}
.w180 {
  width: 180px
}
.w190 {
  width: 190px
}
.w200 {
  width: 200px
}
.w210 {
  width: 210px
}
.w220 {
  width: 220px
}
.w230 {
  width: 230px
}
.w240 {
  width: 240px
}
.w250 {
  width: 250px
}
.w255 {
  width: 255px
}
.w260 {
  width: 260px
}
.w270 {
  width: 270px
}
.w280 {
  width: 280px
}
.w290 {
  width: 290px
}
.w300 {
  width: 300px
}
.w305 {
  width: 305px
}
.w310 {
  width: 310px
}
.w320 {
  width: 320px
}
.w330 {
  width: 330px
}
.w340 {
  width: 340px
}
.w350 {
  width: 350px
}
.w360 {
  width: 360px
}
.w365 {
  width: 365px
}
.w370 {
  width: 370px
}
.w380 {
  width: 380px
}
.w390 {
  width: 390px
}
.w400 {
  width: 400px
}
.w410 {
  width: 400px
}
.w415 {
  width: 415px
}
.w420 {
  width: 420px
}
.w430 {
  width: 430px
}
.w435 {
  width: 435px
}
.w440 {
  width: 440px
}
.w450 {
  width: 450px
}
.w460 {
  width: 460px
}
.w470 {
  width: 470px
}
.w480 {
  width: 480px
}
.w490 {
  width: 490px
}
.w500 {
  width: 500px
}
.w510 {
  width: 510px
}
.w520 {
  width: 520px
}
.w530 {
  width: 530px
}
.w540 {
  width: 540px
}
.w550 {
  width: 550px
}
.w560 {
  width: 560px
}
.w570 {
  width: 570px
}
.w580 {
  width: 580px
}
.w590 {
  width: 590px
}
.w600 {
  width: 600px
}
.w610 {
  width: 610px
}
.w620 {
  width: 620px
}
.w630 {
  width: 630px
}
.w640 {
  width: 640px
}
.w650 {
  width: 650px
}
.w660 {
  width: 660px
}
.w670 {
  width: 670px
}
.w680 {
  width: 680px
}
.w690 {
  width: 690px
}
.w700 {
  width: 700px
}
.w710 {
  width: 710px
}
.w720 {
  width: 720px
}
.w730 {
  width: 730px
}
.w740 {
  width: 740px
}
.w750 {
  width: 750px
}
.w760 {
  width: 760px
}
.w765 {
  width: 765px
}
.w960 {
  width: 960px
}
.w980 {
  width: 980px
}
.h030 {
  height: 30px
}
.h180 {
  height: 180px
}
.h190 {
  height: 190px
}
.h200 {
  height: 200px
}
.h240 {
  height: 240px
}
.h250 {
  height: 250px
}
.h280 {
  height: 280px
}
.h300 {
  height: 300px
}
.h350 {
  height: 350px
}
.mt00 {
  margin-top: 0 !important
}
.mt01 {
  margin-top: 1px
}
.mt02 {
  margin-top: 2px
}
.mt03 {
  margin-top: 3px
}
.mt04 {
  margin-top: 4px
}
.mt05 {
  margin-top: 5px
}
.mt06 {
  margin-top: 6px
}
.mt07 {
  margin-top: 7px
}
.mt08 {
  margin-top: 8px
}
.mt09 {
  margin-top: 9px
}
.mt10 {
  margin-top: 10px
}
.mt15 {
  margin-top: 15px
}
.mt20 {
  margin-top: 20px
}
.mt25 {
  margin-top: 25px
}
.mt30 {
  margin-top: 30px
}
.mt35 {
  margin-top: 35px
}
.mt40 {
  margin-top: 40px
}
.mt45 {
  margin-top: 45px
}
.mt50 {
  margin-top: 50px
}
.mt60 {
  margin-top: 60px
}
.mt70 {
  margin-top: 70px
}
.mt80 {
  margin-top: 80px
}
.mt90 {
  margin-top: 90px
}
.mt100 {
  margin-top: 100px
}
.mt110 {
  margin-top: 110px
}
.mt120 {
  margin-top: 120px
}
.mr00 {
  margin-right: 0 !important
}
.mr01 {
  margin-right: 1px
}
.mr02 {
  margin-right: 2px
}
.mr03 {
  margin-right: 3px
}
.mr04 {
  margin-right: 4px
}
.mr05 {
  margin-right: 5px
}
.mr06 {
  margin-right: 6px
}
.mr07 {
  margin-right: 7px
}
.mr08 {
  margin-right: 8px
}
.mr09 {
  margin-right: 9px
}
.mr10 {
  margin-right: 10px
}
.mr15 {
  margin-right: 15px
}
.mr20 {
  margin-right: 20px
}
.mr25 {
  margin-right: 25px
}
.mr30 {
  margin-right: 30px
}
.mr35 {
  margin-right: 35px
}
.mr40 {
  margin-right: 40px
}
.mr45 {
  margin-right: 45px
}
.mr50 {
  margin-right: 50px
}
.mr60 {
  margin-right: 60px
}
.mr70 {
  margin-right: 70px
}
.mr80 {
  margin-right: 80px
}
.mr90 {
  margin-right: 90px
}
.mr100 {
  margin-right: 100px
}
.mb00 {
  margin-bottom: 0 !important
}
.mb01 {
  margin-bottom: 1px
}
.mb02 {
  margin-bottom: 2px
}
.mb03 {
  margin-bottom: 3px
}
.mb04 {
  margin-bottom: 4px
}
.mb05 {
  margin-bottom: 5px
}
.mb06 {
  margin-bottom: 6px
}
.mb07 {
  margin-bottom: 7px
}
.mb08 {
  margin-bottom: 8px
}
.mb09 {
  margin-bottom: 9px
}
.mb10 {
  margin-bottom: 10px
}
.mb15 {
  margin-bottom: 15px
}
.mb20 {
  margin-bottom: 20px
}
.mb25 {
  margin-bottom: 25px
}
.mb30 {
  margin-bottom: 30px
}
.mb35 {
  margin-bottom: 35px
}
.mb40 {
  margin-bottom: 40px
}
.mb45 {
  margin-bottom: 45px
}
.mb50 {
  margin-bottom: 50px
}
.mb60 {
  margin-bottom: 60px
}
.mb70 {
  margin-bottom: 70px
}
.mb80 {
  margin-bottom: 80px
}
.mb90 {
  margin-bottom: 90px
}
.mb100 {
  margin-bottom: 100px
}
.ml00 {
  margin-left: 0 !important
}
.ml01 {
  margin-left: 1px
}
.ml02 {
  margin-left: 2px
}
.ml03 {
  margin-left: 3px
}
.ml04 {
  margin-left: 4px
}
.ml05 {
  margin-left: 5px
}
.ml06 {
  margin-left: 6px
}
.ml07 {
  margin-left: 7px
}
.ml08 {
  margin-left: 8px
}
.ml09 {
  margin-left: 9px
}
.ml10 {
  margin-left: 10px
}
.ml12 {
  margin-left: 12px
}
.ml15 {
  margin-left: 15px
}
.ml20 {
  margin-left: 20px
}
.ml25 {
  margin-left: 25px
}
.ml30 {
  margin-left: 30px
}
.ml35 {
  margin-left: 35px
}
.ml40 {
  margin-left: 40px
}
.ml45 {
  margin-left: 45px
}
.ml50 {
  margin-left: 50px
}
.ml60 {
  margin-left: 60px
}
.ml70 {
  margin-left: 70px
}
.ml80 {
  margin-left: 80px
}
.ml90 {
  margin-left: 90px
}
.ml100 {
  margin-left: 100px
}
.ml140 {
  margin-left: 140px
}
.ml160 {
  margin-left: 160px
}
.ma10 {
  margin: 10px
}
.ma15 {
  margin: 15px
}
.ma_auto {
  margin-left: auto;
  margin-right: auto
}
.pt00 {
  padding-top: 0 !important
}
.pt01 {
  padding-top: 1px
}
.pt02 {
  padding-top: 2px
}
.pt03 {
  padding-top: 3px
}
.pt04 {
  padding-top: 4px
}
.pt05 {
  padding-top: 5px
}
.pt06 {
  padding-top: 6px
}
.pt07 {
  padding-top: 7px
}
.pt08 {
  padding-top: 8px
}
.pt09 {
  padding-top: 9px
}
.pt10 {
  padding-top: 10px
}
.pt15 {
  padding-top: 15px
}
.pt20 {
  padding-top: 20px
}
.pt25 {
  padding-top: 25px
}
.pt30 {
  padding-top: 30px
}
.pt35 {
  padding-top: 35px
}
.pt40 {
  padding-top: 40px
}
.pt45 {
  padding-top: 45px
}
.pt50 {
  padding-top: 50px
}
.pt60 {
  padding-top: 60px
}
.pt70 {
  padding-top: 70px
}
.pt80 {
  padding-top: 80px
}
.pt90 {
  padding-top: 90px
}
.pt100 {
  padding-top: 100px
}
.pt120 {
  padding-top: 120px
}
.pr00 {
  padding-right: 0 !important
}
.pr01 {
  padding-right: 1px
}
.pr02 {
  padding-right: 2px
}
.pr03 {
  padding-right: 3px
}
.pr04 {
  padding-right: 4px
}
.pr05 {
  padding-right: 5px
}
.pr06 {
  padding-right: 6px
}
.pr07 {
  padding-right: 7px
}
.pr08 {
  padding-right: 8px
}
.pr09 {
  padding-right: 9px
}
.pr10 {
  padding-right: 10px
}
.pr15 {
  padding-right: 15px
}
.pr20 {
  padding-right: 20px
}
.pr25 {
  padding-right: 25px
}
.pr30 {
  padding-right: 30px
}
.pr35 {
  padding-right: 35px
}
.pr40 {
  padding-right: 40px !important
}
.pr45 {
  padding-right: 45px
}
.pr50 {
  padding-right: 50px
}
.pr60 {
  padding-right: 60px
}
.pr70 {
  padding-right: 70px
}
.pr80 {
  padding-right: 80px
}
.pr90 {
  padding-right: 90px
}
.pr100 {
  padding-right: 100px
}
.pb00 {
  padding-bottom: 0 !important
}
.pb01 {
  padding-bottom: 1px
}
.pb02 {
  padding-bottom: 2px
}
.pb03 {
  padding-bottom: 3px
}
.pb04 {
  padding-bottom: 4px
}
.pb05 {
  padding-bottom: 5px
}
.pb06 {
  padding-bottom: 6px
}
.pb07 {
  padding-bottom: 7px
}
.pb08 {
  padding-bottom: 8px
}
.pb09 {
  padding-bottom: 9px
}
.pb10 {
  padding-bottom: 10px
}
.pb15 {
  padding-bottom: 15px
}
.pb20 {
  padding-bottom: 20px
}
.pb25 {
  padding-bottom: 25px
}
.pb30 {
  padding-bottom: 30px
}
.pb35 {
  padding-bottom: 35px
}
.pb40 {
  padding-bottom: 40px
}
.pb45 {
  padding-bottom: 45px
}
.pb50 {
  padding-bottom: 50px
}
.pb60 {
  padding-bottom: 60px
}
.pb70 {
  padding-bottom: 70px
}
.pb80 {
  padding-bottom: 80px
}
.pb90 {
  padding-bottom: 90px
}
.pb100 {
  padding-bottom: 100px
}
.pl00 {
  padding-left: 0 !important
}
.pl01 {
  padding-left: 1px
}
.pl02 {
  padding-left: 2px
}
.pl03 {
  padding-left: 3px
}
.pl04 {
  padding-left: 4px
}
.pl05 {
  padding-left: 5px
}
.pl06 {
  padding-left: 6px
}
.pl07 {
  padding-left: 7px
}
.pl08 {
  padding-left: 8px
}
.pl09 {
  padding-left: 9px
}
.pl10 {
  padding-left: 10px
}
.pl15 {
  padding-left: 15px
}
.pl20 {
  padding-left: 20px
}
.pl25 {
  padding-left: 25px
}
.pl30 {
  padding-left: 30px
}
.pl35 {
  padding-left: 35px
}
.pl40 {
  padding-left: 40px
}
.pl45 {
  padding-left: 45px
}
.pl50 {
  padding-left: 50px
}
.pl60 {
  padding-left: 60px
}
.pl70 {
  padding-left: 70px
}
.pl80 {
  padding-left: 80px
}
.pl90 {
  padding-left: 90px
}
.pl100 {
  padding-left: 100px
}
.pa01 {
  padding: 1px
}
.pa02 {
  padding: 2px
}
.pa03 {
  padding: 3px
}
.pa04 {
  padding: 4px
}
.pa05 {
  padding: 5px
}
.pa10 {
  padding: 10px
}
.pa15 {
  padding: 15px
}
.fr {
  float: right
}
.fl {
  float: left
}
.fr10 {
  float: right;
  margin-left: 10px
}
.fr15 {
  float: right;
  margin-left: 15px
}
.fr30 {
  float: right;
  margin-left: 15px
}
.fl10 {
  float: left;
  margin-right: 10px
}
.fl15 {
  float: left;
  margin-right: 15px
}
.fl30 {
  float: left;
  margin-right: 30px
}
.txt10 {
  font-size: 10px
}
.txt11 {
  font-size: 11px
}
.txt12 {
  font-size: 12px
}
.txt13 {
  font-size: 13px
}
.txt14 {
  font-size: 14px
}
.txt15 {
  font-size: 15px
}
.txt16 {
  font-size: 16px
}
.txt17 {
  font-size: 17px
}
.txt18 {
  font-size: 18px
}
.txt19 {
  font-size: 19px
}
.txt20 {
  font-size: 20px
}
.txt21 {
  font-size: 21px
}
.txt22 {
  font-size: 22px
}
.txt23 {
  font-size: 23px
}
.txt24 {
  font-size: 24px
}
.txt25 {
  font-size: 25px
}
.txt26 {
  font-size: 26px
}
.txt27 {
  font-size: 27px
}
.txt28 {
  font-size: 28px
}
.txt29 {
  font-size: 29px
}
.txt30 {
  font-size: 30px
}
.txt31 {
  font-size: 31px
}
.txt32 {
  font-size: 32px
}
.txt33 {
  font-size: 33px
}
.txt34 {
  font-size: 34px
}
.txt35 {
  font-size: 35px
}
.txt36 {
  font-size: 36px
}
.txt37 {
  font-size: 37px
}
.txt38 {
  font-size: 38px
}
.txt39 {
  font-size: 39px
}
.txt40 {
  font-size: 40px
}
.bold {
  font-weight: 700
}
.left {
  text-align: left !important
}
.center {
  text-align: center !important
}
.right {
  text-align: right
}
.clear {
  clear: both
}
.v_top {
  vertical-align: top
}
.v_mid {
  vertical-align: middle
}
.v_btm {
  vertical-align: bottom
}
.color_red {
  color: #f33
}
.color_pink {
  color: #ed8c96
}
.color_blue {
  color: #00408f
}
.color_green {
  color: #479f9d
}
.color_ore {
  color: #ff8327
}
.color_yellow {
  color: #ffeb8b
}
.color_beige {
  color: #dac58b
}
.color_brown {
  color: #9b8052
}
.color_navy {
  color: #1f2774
}
.color_black {
  color: #3e3a39
}
.ls_0 {
  letter-spacing: 0
}
.ls_1 {
  letter-spacing: 1px
}
.indent {
  margin-left: 1em !important;
  text-indent: -1em
}
.line_h_2 {
  line-height: 2 !important
}
.clearfix:after {
  display: block;
  clear: both;
  content: ""
}
.sp {
  display: none !important
}