@charset "UTF-8";
/* CSS Document */
@media (min-width: 641px) and (max-width: 1024px) {
  body, .nav_wrap.fixed, .mainvisual_wrap, #mainvisual, header, footer {
    min-width: 1300px;
  }
  .tgl_menu_list ul li.nav_mega_menu .mega_menu_wrap {
    width: 1300px;
  }
}
@media screen and (max-width: 640px) {
  body {
    letter-spacing: .08em;
    line-height: 2;
    font-size: 15px;
  }
  body, .nav_wrap.fixed, #mainvisual .inner, header, footer {
    min-width: 100%;
  }
  /* ナビ展開時スクロール禁止処理 */
  body.nav-open {
    overflow: hidden !important;
  }
  main {
    padding-top: 0;
  }
  section .inner, footer .inner {
    padding: 0 20px;
  }
  /*============================================================================

    header

  ============================================================================*/
  header {
    display: none;
  }
  .fixed_btn_link {
    display: none;
  }
  /*============================================================================

    nav

  ============================================================================*/
  .nav_wrap {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    background: #fff;
  }
  .nav_wrap .header_logo {
    width: calc(100% - 56px);
  }
  .nav_wrap .header_logo a {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    text-align: center;
  }
  .nav_wrap .header_logo img {
    width: auto;
    height: 55px;
  }
  /* ハンバーガーボタン */
  .btn_tgl_menu {
    position: relative;
    right: 0;
    color: #fff;
    width: 55px;
    background: var(--main-color);
    border: none;
    padding: 0;
    margin: 0;
    text-align: center;
    transition: right 0.6s cubic-bezier(0.19, 1, 0.22, 1);
  }
  .btn_tgl_menu i {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 3px;
    margin: auto;
    font-family: var(--font-type-en);
    font-style: normal;
    font-weight: 700;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 0.1em;
  }
  .btn_tgl_menu span {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    display: block;
    width: 35px;
    height: 2px;
    background: #fff;
    transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
    opacity: 1;
  }
  .btn_tgl_menu span:nth-of-type(1) {
    top: 10px;
  }
  .btn_tgl_menu span:nth-of-type(2) {
    top: 20px;
  }
  .btn_tgl_menu span:nth-of-type(3) {
    top: 30px;
  }
  /* MENUボタン押下時 */
  .btn_tgl_menu.active {
    right: 16.25rem;
  }
  .btn_tgl_menu.active span:nth-of-type(1) {
    top: 20px;
    -webkit-transform: rotate(225deg);
    transform: rotate(225deg);
  }
  .btn_tgl_menu.active span:nth-of-type(2) {
    opacity: 0;
  }
  .btn_tgl_menu.active span:nth-of-type(3) {
    top: 20px;
    -webkit-transform: rotate(-225deg);
    transform: rotate(-225deg);
  }
  /* ドロップダウンメニュー */
  .tgl_menu_list {
    position: fixed;
    top: 0;
    right: -16.25rem;
    z-index: 2;
    overflow: hidden;
    width: 16.25rem;
    height: 100%;
    transition: right 0.6s cubic-bezier(0.19, 1, 0.22, 1);
    background: var(--main-color);
    padding: 15px;
  }
  .tgl_menu_list ul {
    flex-flow: column wrap;
  }
  .tgl_menu_list ul li {
    display: block;
    border-bottom: 1px solid #fff;
    width: 100%;
  }
  .tgl_menu_list ul li:first-child {
    border-top: 1px solid #fff;
  }
  .tgl_menu_list ul li::after {
    display: none;
  }
  .tgl_menu_list ul li a, .tgl_menu_list ul li p {
    position: relative;
    display: block;
    padding: 15px 10px;
    width: auto;
    color: #fff;
    font-family: var(--font-type);
    font-emphasize: 700px;
  }
  .tgl_menu_list ul li a span, .tgl_menu_list ul li p span {
    display: none;
  }
  .tgl_menu_list ul li a:hover {
    color: #fff;
  }
  body.nav-open .tgl_menu_list {
    overflow-y: scroll;
    overscroll-behavior-y: none;
    right: 0;
  }
  /* ------- スライドメニュー シングル------- */
  .tgl_menu_list ul li.nav_single_menu div {
    position: static;
    padding-bottom: 10px;
  }
  .tgl_menu_list ul li.nav_single_menu div a {
    margin-left: 15px;
    background: none;
    padding: 3px 3px 3px 1.2em;
    line-height: 2;
    text-indent: -1.2em;
  }
  .tgl_menu_list ul li.nav_single_menu div a::before {
    position: static;
    display: inline;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f105";
    margin-right: 10px;
  }
  .tgl_menu_list ul li.nav_single_menu div a i.nav_arrow {
    display: none;
  }
  .tgl_menu_list ul li.nav_single_menu div a:hover {
    color: #fff;
    background: none;
  }
  /* ------- スライドメニュー メガ------- */
  .tgl_menu_list .nav_mega_menu {
    position: relative;
  }
  .tgl_menu_list .nav_mega_menu p::before {
    position: absolute;
    display: flex;
    align-items: center;
    width: auto;
    height: auto;
    border: none;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f067";
  }
  .tgl_menu_list .nav_mega_menu .mega_menu_wrap {
    display: none;
    position: static;
    opacity: 0;
    visibility: hidden;
    background: none;
    box-shadow: none;
    transition: height 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  }
  .tgl_menu_list .nav_mega_menu.active .mega_menu_wrap {
    opacity: 1;
    visibility: visible;
  }
  .tgl_menu_list .mega_menu_inner {
    display: block;
    padding: 0 0 10px 0;
    width: 100%;
  }
  .tgl_menu_list .mega_menu_top a {
    padding: 12px 12px 12px 0;
  }
  .tgl_menu_list .mega_menu_top a::before {
    position: static;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f105";
    border: none;
    margin-right: 10px;
  }
  .tgl_menu_list .menu_list {
    margin-left: 0;
  }
  .tgl_menu_list .nav_mega_menu .mega_menu_inner .menu_list p {
    display: none;
  }
  .tgl_menu_list .nav_mega_menu .mega_menu_inner .menu_list li {
    border: none !important;
  }
  .tgl_menu_list .nav_mega_menu .mega_menu_inner .menu_list li a {
    padding: 3px 3px 3px 1.2em;
  }
  .tgl_menu_list .nav_mega_menu .mega_menu_inner .menu_list li a::before {
    position: static;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f105";
    border: none;
    margin-right: 10px;
  }
  .tgl_menu_list .nav_mega_menu div a {
    margin-left: 15px;
    background: none;
    padding: 3px;
    line-height: 2;
    text-indent: -1.2em;
    padding-left: 1.2em;
  }
  /* メガメニュー展開時 */
  .tgl_menu_list .nav_mega_menu.active p::before {
    content: "\f068";
  }
  /* ナビ展開時の後ろの背景 */
  .nav_overlay {
    display: none;
    opacity: 0;
    visibility: hidden;
    z-index: 10;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
  }
  body.nav-open .nav_overlay {
    display: block;
    opacity: 1;
    visibility: visible;
  }
  /* ヘッダー固定ボタンエリア */
  .btn_area {
    width: 100%;
  }
  .btn_area ul {
    display: flex;
    background: #fff;
    padding: 5px 2.5px;
  }
  .btn_area li.btn {
    width: 100%;
    margin: 0 2.5px;
  }
  .btn_area li.btn a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 100%;
    color: #fff;
    text-align: center;
    font-size: 16px;
    font-family: var(--font-type);
    font-weight: 700;
    padding: 10px 2%;
    border-radius: 5px;
  }
  .btn_area li.btn a i {
    width: 15px;
    margin-right: 3px;
  }
  .btn_area li.btn_tel a {
    background: #7bced9;
  }
  .btn_area li.btn_tel a::before {
    display: inline-block;
    content: "";
    width: 23px;
    height: auto;
    aspect-ratio: 23 / 29;
    background: url(../images/tel_icon.png) no-repeat center / cover;
  }
  .btn_area li.btn_yoyaku a {
    background: #a6de63;
  }
  .btn_area li.btn_yoyaku a::before {
    display: inline-block;
    content: "";
    width: 32px;
    height: auto;
    aspect-ratio: 42/40;
    background: url(../images/contact_icon.png) no-repeat center / cover;
  }
  .btn_area li.btn_monshin a {
    background: var(--sub-color);
  }
  .btn_area li.btn_access a {
    background: #00C7A3;
  }
  /* 準備中用のクラス */
  .btn_area li.btn.coming a {
    background: #aaa !important;
  }
  .btn_area li.btn.coming a {
    pointer-events: none;
    padding: 2px 2% 18px;
  }
  .btn_area li.btn.coming a::before {
    content: "（準備中）";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
    font-size: 90%;
  }
  .btn_area li.btn a[href="tel:準備中"] {
    pointer-events: none;
    padding: 2px 2% 18px;
    background: #aaa;
  }
  .btn_area li.btn a[href="tel:準備中"]::after {
    content: "（準備中）";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
    font-size: 90%;
  }
  .nav_list {
    display: none;
  }
  /*============================================================================

  #mainvisual

  ============================================================================*/
  /* 共通 */
  #mainvisual {
    background-attachment: scroll;
    margin-top: 118px;
  }
  .mainvisual_wrap {
    height: 208vw;
    background: url(../images/mv_img02.png) no-repeat left top 27px / 35% auto, url(../images/mv_bg_sp.jpg) no-repeat left top / cover;
  }
  .mainvisual_img {
    top: 40px;
    right: 0px;
    width: 80%;
    height: auto;
  }
  #mainvisual .inner {
    width: auto;
    height: inherit;
  }
  .mainvisual_title {
    width: 100%;
    top: 78vw;
    left: 0;
  }
  .mv_title_wrap {
    width: 90%;
    min-height: auto;
    margin: 0 auto;
    padding-top: 10vw;
  }
  .mv_title_wrap::before {
    width: 100%;
  }
  .mv_tit_microcopy:first-of-type {
    top: -6vw;
    left: 0;
    max-width: 22%;
  }
  .mv_tit_microcopy:nth-of-type(2) {
    top: -11vw;
    left: 26%;
    max-width: 22%;
  }
  .mv_tit_microcopy:nth-of-type(3) {
    top: -11vw;
    right: 26%;
    max-width: 22%;
  }
  .mv_tit_microcopy:nth-of-type(4) {
    top: -6vw;
    right: 0;
    max-width: 22%;
  }
  .mainvisual_title .pop {
    font-size: min(4.5vw, 24px);
  }
  .mv_catch {
    margin-bottom: 16px;
  }
  .mv_catch_en {
    padding-bottom: 12px;
    font-size: min(4vw, 20px);
  }
  .mv_bnr_list {
    gap: 16px;
    bottom: 10vw;
    left: 0;
    width: 90%;
    margin: 0 auto;
  }
  .mv_bnr_item {
    width: calc(50% - 8px);
  }
  .mv_bnr_item p {
    padding-top: 4vw;
    font-size: min(4vw, 20px);
  }
  .mv_bnr_item .large {
    font-size: 150%;
  }
  /*============================================================================

  #contents

  ============================================================================*/
  .box1 {
    width: auto;
    margin: 0 5%;
  }
  /*============================================================================

  footer

  ============================================================================*/
  .footer_flex {
    flex-wrap: wrap;
    gap: 54px;
  }
  .info_left, .info_right {
    width: 100%;
  }
  .footer_tel a {
    font-size: min(8vw, 32px);
  }
  .schedule_note {
    font-size: 100%;
  }
  .info_map iframe {
    width: 100%;
    height: 300px;
  }
  .info_access li {
    padding: 13px 16px 12px;
    font-size: 100%;
  }
  .access_btn a {
    margin: 0 auto;
  }
  /*============================================================================

  $見出し

  ============================================================================*/
  h1 {
    font-size: 12px;
    width: auto;
    padding: 5px 15px;
    text-align: center;
    position: static;
    margin-top: 0 !important;
    background: var(--bg-color);
  }
  .title01 {
    padding-top: 16vw;
    background: url(../images/title_illust_trouble.png) no-repeat center top / 50% auto;
  }
  .title01 h2 {
    margin-bottom: 12px;
  }
  .title02 {
    min-height: auto;
    margin-bottom: 60px;
    background: transparent;
  }
  .title02::before {
    z-index: 2;
    top: -14vw;
    left: -10px;
    width: 20%;
  }
  .title02 h2 {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 0 20px 4px 10vw !important;
    margin: 0 auto;
  }
  .title02 h2::after {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    content: "";
    z-index: -1;
    width: 100%;
    height: auto;
    aspect-ratio: 2364/358;
    background: url(../images/title_bg_blue.png) no-repeat center / cover;
  }
  .sec_merit .title02 h2::after, .sec_reason .title02 h2::after, .sec_faq .title02 h2::after {
    background: url("../images/title_bg_green.png") no-repeat center/cover;
  }
  .nowrap {
    white-space: normal;
  }
  /* テーブル */
  .tb01 {
    white-space: inherit;
  }
  .tb01 th {
    width: 30%;
    font-size: 14px;
  }
  .tb01 td {
    font-size: 14px;
    text-align: center;
  }
  /* ボタン */
  .btn01 a {
    display: block;
    background-position: left 20px center;
    padding: 12px 25px 13px 45px;
  }
  /*common*/
  .pc {
    display: none !important
  }
  .sp {
    display: block !important
  }
  .pc_inline {
    display: none !important
  }
  .sp_inline {
    display: inline !important
  }
  .pc_table {
    display: table !important
  }
  .sp_table {
    display: table !important
  }
  img {
    max-width: 100%;
    height: auto
  }
  .sp_mb00 {
    margin-bottom: 0 !important
  }
  .sp_mr00 {
    margin-right: 0 !important
  }
  .sp_ml00 {
    margin-left: 0 !important
  }
  .sp_mt00 {
    margin-top: 0 !important
  }
  .sp_pb00 {
    padding-bottom: 0 !important
  }
  .sp_pr00 {
    padding-right: 0 !important
  }
  .sp_pl00 {
    padding-left: 0 !important
  }
  .sp_pt00 {
    padding-top: 0 !important
  }
  .sp_center {
    text-align: center
  }
  /*============================================================================

  trouble

  ============================================================================*/
  .trouble_item_wrap {
    padding-top: 24px;
    padding-bottom: 0;
  }
  .trouble_case {
    position: relative;
    padding: 54px 0;
    background: transparent;
    border-radius: 0;
  }
  .trouble_case::before {
    position: absolute;
    content: "";
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% + 40px);
    height: 100%;
    background: rgb(174 206 137 /.75);
    border-radius: 20px;
  }
  .trouble_text {
    margin-bottom: 30px;
    padding: 20px 14px;
    font-size: min(4.3vw, 24px);
  }
  .trouble_text::after {
    width: 15%;
    top: -18px;
    right: 0;
  }
  .trouble_case_wrap {
    padding-top: 60px;
    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_sp.jpg) no-repeat left top / cover;
  }
  .trouble_case_list {
    gap: 14px;
  }
  .trouble_case_list li {
    width: calc((100% / 2) - (14px / 2));
  }
  .trouble_case_wrap::before {
    bottom: -4px;
    width: 40px;
  }
  .trouble_answer_wrap {
    padding-top: 120px;
    padding-bottom: 120px;
  }
  .trouble_answer_wrap::before {
    mask: url(../images/trouble_solution_bg_mask_sp.png) no-repeat left top / 100% auto;
    background: #a6de63 url(../images/trouble_solution_pattern.png) repeat left top 40px;
  }
  .answer_text_wrap::before {
    bottom: -66px;
    left: -10px;
    width: 60px;
  }
  .answer_text {
    padding: 32px 20px;
  }
  .answer_text::before {
    top: -18vw;
    left: -10px;
    width: 74%;
  }
  .answer_text::after {
    top: -90px;
    right: -10px;
    width: 30%;
  }
  .answer_text p {
    font-size: min(4.5vw, 24px);
  }
  /*============================================================================

  treatment

  ============================================================================*/
  .sec_treatment {
    padding: 80px 0;
  }
  .sec_treatment::before {
    mask: url(../images/trouble_solution_bg_mask_sp.png) no-repeat left top / 100% auto;
    background: url(../images/orthodontics_bg_wave_sp.png) repeat-x left bottom -2px / 100% auto, url(../images/orthodontics_bg_sp.jpg) repeat-y top / 100% auto;
  }
  .sec_treatment .title02 h2::before {
    top: 0;
    width: 15%;
    transform: translateY(-103%);
  }
  .sec_treatment .title02::after {
    z-index: 2;
    top: 0;
    width: 20%;
    left: 28%;
    transform: translateY(-100%);
  }
  .sec_treatment .title02 {
    margin-bottom: 32px;
  }
  .sec_treatment .title02 h2 {
    padding: 0 20px 4px !important;
  }
  .treatment_content {
    padding: 100px 0px 80px;
  }
  .treatment_content::before {
    width: calc(100% + 40px);
    border-radius: 30px;
  }
  .treatment_content .title02::before {
    z-index: 2;
    top: -18vw;
    left: -10px;
    width: 28%;
  }
  .treatment_flex {
    flex-flow: column-reverse;
    gap: 44px;
  }
  .treatment_text h3 {
    padding-left: 17vw;
    background: url(../images/logo_mark.png) no-repeat left center / 16% auto;
    font-size: min(6vw, 32px);
  }
  .treatment_text p {
    font-size: 100%;
  }
  .treatment_img {
    width: 100%;
  }
  .treatment_img > div::before {
    bottom: 0;
    right: 0;
    width: 35%;
  }
  .treatment_about {
    margin-top: 24px;
    padding: 25px 20px;
    border-radius: 16px;
  }
  .treatment_about h4 {
    width: 100%;
    margin: 0 auto 16px;
    padding: 11px 20px 12px;
  }
  .treatment_about h4 img {
    max-width: 70%;
  }
  .treatment_about h4::before {
    top: 0;
    right: -7px;
    width: 20%;
  }
  /*============================================================================

  merit

  ============================================================================*/
  .sec_merit {
    padding: 80px 0 60vw;
    background: url(../images/merit_bg_img.png) no-repeat left bottom 32px / 80% auto, url(../images/merit_illust01.png) no-repeat left top 11% / 12% auto, url(../images/merit_illust02.png) no-repeat top 50% right / 13% auto, url(../images/merit_illust03.png) no-repeat bottom 5% right / 20% auto, url(../images/merit_bg_pattern_sp.jpg) repeat-y top left / 100% auto;
  }
  .sec_merit .title02::after {
    z-index: 2;
    right: 0;
    width: 15%;
    transform: translateY(-90%);
  }
  .merit_flex {
    grid-template-columns: repeat(1, 1fr);
    gap: 64px;
  }
  .merit_item:nth-of-type(2n) {
    top: 0;
  }
  .merit_img::after {
    width: 30%;
    font-size: min(9vw, 54px);
  }
  .merit_title h3 {
    padding-bottom: 19px;
    background: url(../images/merit_line.png) no-repeat center bottom / auto 9px;
    font-size: min(6vw, 32px);
  }
  .merit_text {
    padding: 0;
  }
  .merit_text p {
    font-size: 100%;
  }
  /*============================================================================

  training

  ============================================================================*/
  .sec_training {
    padding-top: 60px;
    background: url("../images/training_bg_sp.jpg") repeat-y left top/100% auto;
  }
  .sec_training .title02 {
    margin-bottom: 40px;
  }
  .sec_training .title02 h2 img {
    top: auto;
    bottom: 2.5vw;
  }
  .sec_training .title02::before {
    top: -8vw;
  }
  .sec_training .title02::after {
    z-index: 2;
    right: 0;
    top: 0;
    width: 18%;
    transform: translateY(-70%);
  }
  .training_flex {
    flex-wrap: wrap;
    gap: 32px;
  }
  .training_item {
    width: 100%;
  }
  .training_item:first-of-type .training_img::before {
    width: 30%;
  }
  .training_img {
    max-width: unset;
    width: 80%;
    margin: 0 auto 40px;
  }
  .training_title h3 {
    font-size: min(7vw, 32px);
  }
  .training_num span::before {
    font-size: 240%;
  }
  .training_text p {
    font-size: 100%;
  }
  /*============================================================================

  cta

  ============================================================================*/
  .sec_cta {
    padding: 94px 0 !important;
  }
  .sec_cta::before {
    mask: url(../images/trouble_solution_bg_mask_sp.png) no-repeat left top / 100% auto;
    background: url(../images/cta_bg_img01.png) no-repeat left top 20px / 78% auto, url(../images/cta_bg_img02.png) no-repeat right bottom / 67% auto, url(../images/cta_bg.jpg) no-repeat left top / cover;
  }
  .cta_content {
    border-radius: 30px;
  }
  .cta_text {
    padding: 48px 20px 40px !important;
  }
  .cta_text::before {
    top: 0 !important;
    left: -20px !important;
    width: 21%;
    transform: translateY(-50%);
  }
  .cta_text::after {
    top: 0 !important;
    right: -20px !important;
    width: 18%;
    transform: translateY(-50%);
  }
  .cta_text p {
    margin-bottom: 16px;
    padding: 0;
    font-size: 115%;
  }
  .cta_btn a {
    padding: 16px 4vw 14px 4vw;
    font-size: min(4vw, 20px);
    letter-spacing: 0;
    line-height: 1.4;
  }
  .cta_btn a::before {
    width: 10vw;
    margin-right: 10px;
  }
  .cta_btn a::after {
    margin-left: 12px;
    width: 8vw;
    font-size: 11px;
  }
  /* cta02 */
  .sec_cta#cta02::before {
    mask: url(../images/trouble_solution_bg_mask_sp.png) no-repeat left top / 100% auto;
    background: url(../images/cta_bg_img01.png) no-repeat left top 20px / 78% auto, url(../images/cta_bg_img02.png) no-repeat right bottom / 67% auto, url(../images/cta_bg.jpg) no-repeat left top / cover;
  }
  /* cta03 */
  .sec_cta#cta03 {
    margin-top: -40px;
  }
  .sec_cta#cta03 .cta_text::after {
    right: 0;
  }
  /*============================================================================

  reason

  ============================================================================*/
  .sec_reason {
    background: url("../images/reason_bg01.png") no-repeat left top/60% auto, url("../images/reason_bg02.png") no-repeat top 10% right/40% auto, url("../images/reason_bg01.png") no-repeat left top 40px/30% auto, url("../images/reason_bg02.png") no-repeat bottom 50% right/42% auto, url("../images/reason_bg01.png") no-repeat left bottom 15%/42% auto
  }
  .sec_reason .title02 {
    margin-bottom: 32px;
  }
  .sec_reason .title02::before {
    top: -10vw;
  }
  .sec_reason .title02::after {
    z-index: 2;
    top: 0;
    right: 0;
    width: 22%;
    transform: translateY(-102%);
  }
  .reason_flex {
    gap: 64px;
  }
  .reason_item, .reason_item:nth-of-type(2n) {
    flex-wrap: wrap;
    gap: 0;
  }
  .reason_item::before {
    content: none;
  }
  .reason_img {
    width: 100%;
  }
  .reason_img::before {
    bottom: 0;
    right: 0;
    font-size: 360%;
  }
  .reason_title h3 {
    min-height: 20vw;
    padding-left: 18vw;
    padding-bottom: 4px;
    background: url(../images/reason_title_illust01.png) no-repeat left center / 14vw auto;
    font-size: min(6vw, 24px);
  }
  .reason_item:nth-of-type(2n) .reason_title h3 {
    background: url(../images/reason_title_illust02.png) no-repeat left center / 14vw auto;
  }
  .reason_text p {
    font-size: 100%;
  }
  /*============================================================================

  flow

  ============================================================================*/
  .sec_flow::before {
    mask: url(../images/trouble_solution_bg_mask_sp.png) no-repeat left top / 100% auto;
    background: url(../images/flow_bg_circle_left.png) repeat-y left bottom / 12% auto, url(../images/flow_bg_circle_center.png) repeat-y center bottom / 70% auto, url(../images/flow_bg_circle_right.png) repeat-y right bottom / 12% auto, url(../images/flow_bg_pattern.png);
  }
  .sec_flow::after {
    position: absolute;
    z-index: -1;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    content: "";
    width: 100%;
    height: 93%;
    background: rgb(255 255 255 / .75);
  }
  .flow_bg::before {
    mask: url(../images/trouble_solution_bg_mask_sp.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: 28px;
    padding-top: 16vw;
    background: url(../images/title_en_illust.png) no-repeat center top / 40% auto;
  }
  .sec_flow .title01 h2 img {
    max-width: 65%;
  }
  .flow_flex {
    flex-wrap: wrap;
    gap: 72px;
  }
  .flow_item {
    width: 100%;
  }
  .flow_sentence {
    margin-bottom: 40px;
  }
  .flow_sentence p {
    letter-spacing: .1em;
    line-height: 1.7;
    text-align: left;
    font-size: 100%;
  }
  .flow_num {
    width: 25%;
    font-size: min(2.5vw, 20px);
  }
  .flow_title h3 {
    font-size: min(6.5vw, 32px);
  }
  .flow_text p {
    font-size: 100%;
  }
  /*============================================================================

  price

  ============================================================================*/
  .sec_price {
    padding-top: 180px;
    padding-bottom: 120px;
  }
  .sec_price::before {
    height: 200px;
  }
  .sec_price::after {
    height: 15%;
  }
  .sec_price .title02::before {
    top: -10vw;
    left: 0;
    width: 26%;
  }
  .sec_price .title02::after {
    z-index: 2;
    top: 0;
    right: -10px;
    width: 40%;
    transform: translateY(-86%);
  }
  .sec_price .title02 h2 img {
    width: 60%;
  }
  .price_table {
    margin-bottom: 40px;
  }
  .price_table th, .price_table td {
    display: block;
    width: 100%;
    padding: 12px 10px;
    font-size: 18px;
  }
  .price_table tr:first-of-type td {
    border-top-right-radius: 0;
  }
  .price_table tr:last-of-type th {
    border-bottom-left-radius: 0;
  }
  .payment {
    margin-bottom: 40px;
    padding-bottom: 46px;
  }
  .payment_title h3 {
    font-size: min(5vw, 24px);
  }
  .payment_title {
    margin-bottom: 32px;
    padding: 12px 14px;
  }
  .payment_list {
    flex-wrap: wrap;
    gap: 16px 14px;
  }
  .payment_list li {
    width: 20%;
  }
  .expense_title {
    margin-bottom: 32px;
    padding: 26px 14px;
  }
  .expense_title h3 {
    font-size: min(5vw, 24px);
  }
  .expense_text {
    margin-bottom: 40px;
    padding: 0 20px;
  }
  .expense_text p {
    font-size: 100%;
  }
  .expense_flex {
    flex-flow: column-reverse;
    gap: 20px;
    padding: 0 20px;
  }
  .expense_img {
    width: 70%;
    margin: 0 auto;
  }
  .expense_need {
    padding: 20px 10px;
    border-radius: 10px;
  }
  .expense_need h4 {
    margin-bottom: 16px;
    padding: 12px 10px;
    line-height: 1.4;
    font-size: 100%;
  }
  .expense_list {
    gap: 10px 23px;
  }
  .expense_list li {
    padding-left: 20px;
    font-size: 90%;
  }
  .expense_list li::before {
    width: 16px;
  }
  .expense_precaution li {
    font-size: 14px;
  }
  /*============================================================================

  faq

  ============================================================================*/
  .sec_faq .title02::before {
    top: -8vw;
  }
  .sec_faq .title02 h2 img {
    max-width: 80%;
  }
  .faq_list dl:not(:last-of-type) {
    margin-bottom: 10px;
  }
  .faq_list dt {
    padding: 16px 48px 14px 16px;
  }
  .faq_list dt::before {
    right: 14px;
    width: 16px;
  }
  .faq_list dt::after {
    right: 20px;
    height: 16px;
  }
  .faq_list dt .list_question {
    gap: 8px;
    line-height: 1.4;
    font-size: 90%;
  }
  .faq_list dt .list_question::before {
    font-size: 90%;
  }
  .faq_list dd {
    gap: 8px;
    padding: 20px 16px;
  }
  .list_answer {
    font-size: 90%;
  }
  .faq_list dd::before {
    font-size: 90%;
  }
}
@media screen and (max-width: 320px) {
  .main_open {
    position: absolute;
    top: auto;
    bottom: 50px;
    right: 0;
    left: 0;
    width: 50%;
    margin: auto;
  }
  .sp_inline_iP {
    display: inline !important;
  }
}