@charset "utf-8";

.body {
     font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, sans-serif;
}

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


p,
span,
h1,
h2,
h3,
h4,
div,
nav {
     font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, sans-serif;
     font-size: 1.5rem;
     color: #333;
}

@media (min-width: 700px) {

     p,
     span,
     h1,
     h2,
     h3,
     h4,
     div,
     nav {

          font-size: 1.6rem;
     }
}

html {
     scroll-padding-top: 0px;
     /* 固定ヘッダの高さ分 */
     font-size: 62.5%;
     overflow-x: hidden;
}

body {
     line-height: 1.6875;
     background-color: #ffffff;
     overflow: hidden !important;
}

@font-face {
     font-family: 'Yusei Magic';
     src: url('../font/YuseiMagic-Regular.ttf') format('truetype');
     font-weight: normal;
     font-style: normal;
}

.yusei {
     font-family: 'Yusei Magic';
}

.roboto {
     font-family: "Roboto", sans-serif;
     font-optical-sizing: auto;
     font-style: normal;
     font-variation-settings:
          "wdth" 100;
}

.wht_txt {
     color: white !important;
}

/* ======================================== */
/* 共通CSS */
/* ======================================== */
.onlyPC {
     display: none;
}

@media (min-width: 700px) {
     .onlyPC {
          display: block;
     }
}

@media (min-width: 700px) {
     .onlySP {
          display: none;
     }
}

.txt_center {
     text-align: center;
}

.com_ttl_contents {
     text-align: center;
}

.com_ttl {
     font-size: 2.5rem;
}

.com_sub_ttl {
     font-size: 1.6rem;
}

.plan_img_ttl {
     height: 60px;
     width: auto;
}

@media (min-width: 700px) {
     .plan_img_ttl {
          height: 90px;
     }
}

.features_img_ttl {
     height: 44px;
     width: auto;
}

@media (min-width: 700px) {
     .features_img_ttl {
          height: 80px;
     }
}

.work_img_ttl {
     height: 40px;
     width: auto;
}

@media (min-width: 700px) {
     .work_img_ttl {
          height: 57.9px;
     }
}

.features_sub_ttl {
     text-align: center;
     letter-spacing: 0.1rem;
}

@media (min-width: 700px) {
     .features_sub_ttl {
          font-size: 1.8rem;
          letter-spacing: 0.1rem;
     }
}

.features_subtitle {
     letter-spacing: 0.1rem;
     font-size: 1.6rem;
}

@media (min-width: 700px) {
     .features_subtitle {
          font-size: 1.8rem;
     }
}

.application_img_ttl {
     height: 40px;
     width: auto;
}

@media (min-width: 700px) {
     .application_img_ttl {
          height: 57.9px;
     }
}

.faq_ttl {
     height: 40px;
     width: auto;
}

@media (min-width: 700px) {
     .faq_ttl {
          height: 57.9px;
     }
}

@media (min-width: 700px) {
     .faq_subttl {
          font-size: 1.8rem;
          letter-spacing: 0.1rem;
     }
}
@media (min-width: 700px) {
.price_img_ttl {
     padding-bottom: 1rem;
}
}

.contact_img_ttl {
     height: 40px;
}

.contact_img_ttl {
     height: 40px;
     width: auto;
}

@media (min-width: 700px) {
     .contact_img_ttl {
          height: 57.9px;
     }
}

.contact_img {
     width: calc(100% - 40px);
     display: block;
     margin: 0 auto;
     height: 400px;
}

@media (min-width: 700px) {
     .contact_img {
          width: calc(100% - 0px);
          max-width: 700px;
          margin: 5rem auto 0;
          height: 350px;
     }
}

.contact_wrap {
     position: relative;
}

.contact_txt {
     position: absolute;
     right: 0;
     top: 13%;
     left: 0;
     margin: 0 auto;
     z-index: 1;
     right: 0;
     left: 0;
     margin: 0rem auto 0;
     width: calc(100% - 40px);
     color: white;
     font-weight: 900;
     text-align: center;
     line-height: 3rem;
     font-size: 1.7rem;
}

@media (min-width: 700px) {
     .contact_txt {
          position: absolute;
          right: 0;
          top: 10%;
          left: 0;
          margin: 5rem auto 0;
          color: white;
          text-align: center;
          font-weight: bold;
          line-height: 3rem;
     }
}

/* ======================================== */
/* ヘッダー */
/* ======================================== */
.header_wrap {
     position: relative;
}

.header_inner {
     padding-top: 2rem;
     width: calc(100% - 40px);
     margin: 0 auto;
     display: flex;
     justify-content: space-between;
     align-items: center;
}

@media (min-width: 700px) {
     .header_inner {
          max-width: 1000px;
          width: calc(100% - 0px);
     }
}

.header_logo img {
     height: 30px;
     width: auto;
}

@media (min-width: 700px) {
     .header_logo img {
          height: 50px;
     }
}

.header_toggle {
     display: flex;
     flex-direction: column;
     gap: 5px;
     background: none;
     border: none;
     cursor: pointer;
}
@media (min-width: 700px) {
     .header_toggle {
          gap: 10px;
     }
}

.header_toggle span {
     width: 25px;
     height: 2px;
     background: #333;
}
@media (min-width: 700px) {
     .header_toggle span {
     width: 40px;
     height: 3px;
     }
}

/* メニュー開閉 */
.menu_logo {
     height: 20px;
     width: auto;
}

@media (min-width: 700px) {
     .menu_logo {
          height: 35px;
     }
}

.header_menu {
     display: none;
     position: fixed;
     top: 0;
     right: 0;
     bottom: 0;
     background: #fdfaf4;
     z-index: 2000;
     overflow-y: auto;
     padding: 20px;
     width: 80%;
}

@media (min-width: 700px) {
     .header_menu {
          width: 40%;
     }
}

.header_menu.active {
     display: block;
}

.header_menu_logo {
     display: flex;
     justify-content: space-between;
     align-items: center;
}


.header_close {
     background: #333;
     border-radius: 20px;
     padding: 4px 12px;
     font-weight: bold;
     display: flex;
     align-items: center;
     gap: 8px;
     color: white;
}

.header_close span {
     color: white;
}

.header_menu_list {
     list-style: none;
     padding: 50px 0;
}

.header_menu_list a {
     text-decoration: none;
     color: #333;
     font-size: 1.5rem;
}

@media (min-width: 700px) {
     .header_menu_list a {
          font-size: 1.8rem;
     }
}

.header_menu_list li:hover {
     opacity: 0.8;
}

.header_menu_list li {
     font-size: 18px;
     font-weight: bold;
     margin-bottom: 16px;
     text-align: center;
}

.header_contact {
     background: #fff;
     padding: 20px;
     border-radius: 10px;
     margin-top: 30px;
     text-align: center;
}

.header_contact_label {
     font-weight: bold;
     font-size: 20px;
}

.header_contact_sub {
     margin-top: 5px;
}

.header_contact_btn {
     display: inline-block;
     margin-top: 10px;
     background: #333;
     color: #fff;
     padding: 10px;
     border-radius: 6px;
     text-decoration: none;
}

.header_bg_left {
     left: 0;
     width: 45%;
     position: absolute;
     top: 0;
     z-index: -1;
}

@media (min-width: 700px) {
     .header_bg_left {
          width: 32%;
     }
}

.header_bg_right {
     right: 0;
     width: 45%;
     position: absolute;
     top: 0;
     z-index: -1;
}

@media (min-width: 700px) {
     .header_bg_right {
          width: 32%;
     }
}

/* ======================================== */
/* Kv */
/* ======================================== */
.kv_ttl {
     margin: 6rem 0 6rem;
     width: calc(100% - 40px);
     margin: 5rem auto 5rem;
     display: block;
}

@media (min-width: 700px) {
     .kv_ttl {
          width: calc(100% - 0px);
          max-width: 785px;
          display: block;
          margin: 10rem auto 10rem;
     }
}

/* ======================================== */
/* KVスライダー */
/* ======================================== */
.kv_swiper {
     width: 100%;
     max-width: 900px;
     margin: auto;
     padding: 40px 0;
     overflow: visible;

     background-image: url(../img/kv_bg_top_sp.svg);
     background-position: bottom;
     background-size: 100%;
}

.kv_wrapper {
     display: flex;
}

@media (min-width: 700px) {
     .kv_swiper {
          width: 100%;
          max-width: 100%;
     }
}

.kv_slide {
     display: flex;
     justify-content: center;
     align-items: center;
}

.kv_slide img {
     width: 100%;
     height: auto;
     border-radius: 10px;
     object-fit: cover;
     max-height: 100%;

     border: 3px solid #333;
     box-shadow: 5px 5px 0px #FF9C26;
}

@media (min-width: 700px) {
     .kv_slide img {
          border: 5px solid #333;
          box-shadow: 10px 10px 0px #ffd140;
     }
}

/* 初期設定：中央以外に余白を出す */
.kv_slide:not(.swiper-slide-active) {
  margin-top: 30px;
}

@media (min-width: 700px) {
  .kv_slide:not(.swiper-slide-active) {
    margin-top: 60px;
  }
}

/* 1350px以上では「奇数番目＆非アクティブ」のみに余白をつける */
@media (min-width: 1350px) {
.kv_slide:not(.swiper-slide-active) {
    margin-top: 0;
  }
  
  .kv_slide.kv_top {
    margin-top: 60px !important;
  }
}

.kv_bottom {
     padding-top: 3rem;
}

.service_img {
     width: calc(100% - 40px);
     margin: 0 auto;
     display: block;
}

.service_main_txt {
     color: white;
     padding-bottom: 5rem;
     font-weight: 800;
     font-size: 1.8rem;
     line-height: 3.5rem;
}

@media (min-width: 700px) {
     .service_main_txt {
          font-size: 2.3rem;
     }
}

.service_btn_wrapper {
     margin-top: 20px;
     margin-bottom: 5rem;
}

.service_text {
     font-style: italic;
     color: #FF9C26;
     font-size: 1.8rem;
}

@media (min-width: 700px) {
     .service_text {
          font-size: 2.8rem;
     }
}

.service_text span {
     color: #FF9C26;
     font-size: 2.3rem;
}

@media (min-width: 700px) {
     .service_text span {
          font-size: 3.3rem;
     }
}

.service_deco_left {
     width: 40px;
}

@media (min-width: 700px) {
     .service_deco_left {
          width: 80px;
     }
}

.service_deco_right {
     width: 40px;
}

@media (min-width: 700px) {
     .service_deco_right {
          width: 80px;
     }
}

.service_attention {
     width: calc(100% - 40px);
     margin: 3rem auto 5rem;
     gap: 2rem;
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
}

.service_btn {
     background-color: #fea929;
     color: #fff;
     padding: 12px 30px;
     border-radius: 30px;
     font-weight: bold;
     text-decoration: none;
     transition: background-color 0.3s;
     width: calc(100% - 40px);
     margin: 0 auto;
     justify-content: space-between;
     display: flex;
     align-items: center;
     max-width: 350px;
}

.service_btn:hover {
     opacity: 0.8;
}

.service_btn img {
     width: 10px;
}

.service_btn_text {
     flex: 1;
     text-align: center;
     color: white;
}

@media (min-width: 700px) {
     .service_btn_text {
          font-size: 1.8rem;
     }
}

.service_inner_sp {
     width: calc(100% - 40px);
     margin: 0 auto;
}

.service_bg {
     background: linear-gradient(to bottom, #ffd140, #ff9020);
}

.service_inner {
     background-image: url(../img/kv_bg_bottom_sp.svg);
     background-size: contain;
}

.service_flex img {
     width: 100%;
     border: 3px solid #333;
     box-shadow: 3px 3px 0 #FDCF35;
     border-radius: 5px;
}

@media (min-width: 700px) {
     .service_flex img {
          box-shadow: 8px 8px 0 #FDCF35;
     }
}

.service_flex {
     display: flex;
     width: calc(100% - 40px);
     margin: 0 auto;
     gap: 1rem;

}

@media (min-width: 700px) {
     .service_flex {
          max-width: 1000px;
          width: calc(100% - 0px);
          gap: 5rem;
     }
}

.service_bg2 {
     padding-top: 5rem;
     background-image: url(../img/kv_bg_bottom_sp.svg);
     background-repeat: no-repeat;
     width: 100%;
     background-size: contain;
     background-position: center;
}

@media (min-width: 700px) {
     .service_bg2 {
          background-position: top;
     }
}

@media (min-width: 1550px) {
     .service_bg2 {
          background-position: top;
          background-size: contain;
          background-image: url(../img/kv_bg_bottom_pc_big3.svg);
     }
}
/* @media (min-width: 700px) {
     .service_bg2{
     padding-top: 5rem;
     background-image: url(../img/kv_bg_bottom_pc.svg);
     }
} */

.service_txt {
     width: calc(100% - 40px);
     margin: 0 auto;
     display: block;
}

@media (min-width: 700px) {
     .service_txt {
          max-width: 926px;
          width: calc(100% - 0px);
          margin-top: 3rem;
     }
}

/* -------------------------- */
/* 撮影実績 */
/* -------------------------- */
.work_deco {
     width: 15px;
}

@media (min-width: 700px) {
     .work_deco {
          width: 22px;
     }
}

.works_section {
     background: #fdf7ec;
     position: relative;
}

.works_section::before,
.works_section::after {
     content: "";
     display: block;
     height: 30px;
     background-image: repeating-linear-gradient(-45deg,
               #F9E876,
               #F9E876 10px,
               transparent 10px,
               transparent 20px);
}

.work_ttl {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 2rem;
}

@media (min-width: 700px) {
     .work_ttl {
          gap: 5rem;
          max-width: 600px;
          margin: 0 auto;
     }
}

.works_inner {
     max-width: 1200px;
     margin: 0 auto;
     text-align: center;
     padding: 5rem 0;
}
@media (min-width: 1350px) {
     .works_inner {
     max-width: 1350px;
     }
}
@media (min-width: 1500px) {
     .works_inner {
     max-width: 1500px;
     }
}
@media (min-width: 1600px) {
     .works_inner {
     max-width: 1600px;
     }
}
@media (min-width: 1700px) {
     .works_inner {
     max-width: 1700px;
     }
}
@media (min-width: 1800px) {
     .works_inner {
     max-width: 1800px;
     }
}
@media (min-width: 1900px) {
     .works_inner {
     max-width: 1900px;
     }
}
@media (min-width: 2000px) {
     .works_inner {
     max-width: 2000px;
     }
}
@media (min-width: 2100px) {
     .works_inner {
     max-width: 2100px;
     }
}
@media (min-width: 2200px) {
     .works_inner {
     max-width: 2200px;
     }
}
@media (min-width: 2300px) {
     .works_inner {
     max-width: 2300px;
     }
}
.works_heading {
     margin-bottom: 40px;
}

.works_icon {
     width: 50px;
     padding-bottom: 1rem;
}

@media (min-width: 700px) {
     .works_icon {
          width: 68.71px;
          padding-bottom: 2rem;
     }
}

.works_title {
     font-size: 3.2rem;
     color: #f1b302;
     font-weight: bold;
     margin: 0;
}

@media (min-width: 700px) {
     .works_title {
          font-size: 6rem;
          letter-spacing: 0.8rem;
          font-weight: 900;
     }
}

.works_subtitle {
     font-size: 1.5rem;
     color: #f1b302;
     letter-spacing: 0.1rem;
}

@media (min-width: 700px) {
     .works_subtitle {
          font-size: 1.8rem;
          letter-spacing: 0.1rem;
          margin-top: 1rem;
     }
}

.works_card1 {
     margin-left: 2rem;
}

.works_slider_wrap {
     width: calc(100% - 40px);
     margin: 0 auto;
}

.works_slider {
     display: flex;
     justify-content: flex-start;
     flex-wrap: nowrap;
     overflow-x: auto;
     gap: 20px;
     margin-bottom: 30px;
     scroll-behavior: smooth;
     scrollbar-width: none;
     /* Firefox用 */
     -ms-overflow-style: none;
     /* IE・Edge旧用 */
     /* margin-right: calc(50vw - 100%); */
}

@media (min-width: 700px) {
     .works_slider {
          margin-right: calc(50vw - 100%);
     }
}

.works_card {
     overflow: hidden;
     width: 240px;
     flex-shrink: 0;
}

.works_card img {
     border: 3px solid #333333;
     box-sizing: border-box;
     border-radius: 10px;
}

.works_img {
     width: 100%;
     display: block;
}

.works_tag {
     background: #333333;
     color: #fff;
     font-size: 1.3rem;
     display: inline-block;
     padding: 1px 12px;
     margin-top: 8px;
     border-radius: 3px;
}

.works_text {
     font-size: 14px;
     color: #333;
     margin: 10px 0 16px;
     line-height: 1.4;
}

.works_nav {
     display: flex;
     justify-content: center;
     gap: 20px;
}

.works_prev,
.works_next {
     border: 2px solid #333333;
     width: 40px;
     height: 40px;
     border-radius: 50%;
     font-size: 18px;
     cursor: pointer;
     background-color: #33333300;
}

.works_prev img {
     width: 10px;
}

.works_next img {
     width: 8px;
     height: 38px;
}

.works_prev img {
     width: 8px;
     height: 40px;
}

/* モーダル全体 */
.works_modal {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     display: none;
     justify-content: center;
     align-items: center;
     z-index: 9999;
}

/* モーダルの背景 */
.works_modal_overlay {
     position: absolute;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.6);
     top: 0;
     left: 0;
}

/* モーダル内の画像 */
.works_modal_content {
     position: relative;
     z-index: 1;
     background: #fff;
     padding: 20px;
     border-radius: 10px;
     max-width: 90%;
     max-height: 90%;
}

.works_modal_content img {
     max-width: 100%;
     height: auto;
     display: block;
     border-radius: 8px;
}

/* 閉じるボタン */
.works_modal_close {
     position: absolute;
     top: -10px;
     right: -10px;
     background: #fff;
     border: 2px solid #333;
     border-radius: 50%;
     width: 30px;
     height: 30px;
     font-size: 20px;
     cursor: pointer;
}

/* -------------------------- */
/* サービスの特徴 */
/* -------------------------- */
@media (min-width: 700px) {
     .features_illust01 {
          position: absolute;
          width: 130px;
          top: -110px;
          z-index: 100;
          right: 50px;
     }
}

@media (min-width: 700px) {
     .features_illust02 {
          position: absolute;
          width: 170px;
          top: -110px;
          z-index: 100;
          right: 20px;
     }
}

@media (min-width: 700px) {
     .features_illust03 {
          position: absolute;
          width: 170px;
          top: -110px;
          z-index: 100;
          right: 20px;
     }
}

.features_heading {
     text-align: center;
     padding: 6rem 0;
}

.features_ttl {
     display: flex;
     justify-content: center;
     align-items: flex-end;
     gap: 16px;
     position: relative;
     align-items: center;
     width: calc(100% - 20px);
     margin: 0 auto;
}

@media (min-width: 700px) {
     .features_ttl {
          gap: 5rem;
     }
}

.features_deco {
     width: 15px;
}

@media (min-width: 700px) {
     .features_deco {
          width: 22px;
     }
}

.features_title_wrap {
     position: relative;
     display: inline-block;
     padding-bottom: 6px;
     /* 下に少し余白 */
}


/* -------------------------- */
/* ポイント */
/* -------------------------- */
.point_wrap {
     width: calc(100% - 40px);
     margin: 0 auto;
     padding: 3rem 0;
     position: relative;
}

@media (min-width: 700px) {
     .point_wrap {
          padding: 3rem 4rem;
     }
}

.features_item {
     width: calc(100% - 40px);
     margin: 5rem auto 0;
     box-shadow: 8px 8px 0px #FDD035;
     border-radius: 10px 10px 10px 10px;
     border: 3px solid #333;
}

@media (min-width: 700px) {
     .features_item {
          display: flex;
          align-items: center;
          flex-direction: row-reverse;
          max-width: 1000px;
          width: calc(100% - 0px);
          position: relative;
          margin: 10rem auto 0;
     }
}

.features_item2 {
     flex-direction: row;
}

.features_item img {
     border-radius: 6px 6px 0 0;
}

@media (min-width: 700px) {
     .features_item img {
          border-radius: 0px 7px 7px 0;
     }
}

@media (min-width: 700px) {
     .features_item2 img {
          border-radius: 7px 0px 0px 7px;
     }
}

.point_img {
     width: 100%;
}

@media (min-width: 700px) {
     .point_img {
          width: 50%;
     }
}

.poit_txt {
     color: #FF9824;
}

.poit_txt span {
     color: #FF9020;
}

.poit_txt span {
     font-size: 2rem;
}

@media (min-width: 700px) {
     .poit_txt span {
          font-size: 2.1rem;
     }
}

.poit_ttl {
     font-size: 2.5rem;
     color: #FF9020;
     font-weight: 900;
     padding-bottom: 1rem;
}

@media (min-width: 700px) {
     .poit_ttl {
          font-size: 3.5rem;
          font-weight: bold;
          padding-bottom: 2rem;
          line-height: 4.5rem;
     }
}

.point_btn {
     background: linear-gradient(to right, #ffd140, #ff9020);
     color: #fff;
     padding: 12px 30px;
     border-radius: 30px;
     font-weight: bold;
     text-decoration: none;
     transition: background-color 0.3s;
     width: calc(100% - 40px);
     margin: 3rem auto 0;
     justify-content: space-between;
     display: flex;
     align-items: center;
     max-width: 350px;
}

@media (min-width: 700px) {
     .point_btn {
          width: 100%;
          max-width: 450px;
     }
}

.point_btn:hover {
     background-color: #e69e1b;
}

.point_btn img {
     width: 10px;
}

.point_btn_text {
     flex: 1;
     text-align: center;
     color: white;
}

@media (min-width: 700px) {
     .point_btn_text {
          font-size: 1.8rem;
     }
}

/* loop */

.loop_inner {
     display: flex;
     overflow: hidden;
     z-index: 500;
}

.loop_inner3 {
     position: relative;
     margin: 8rem 0 8rem;
}

.loop_inner2 {
     position: relative;
}

.loop_inner::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 50%;
     /* ← 上半分を白くする */
     background-color: white;
     z-index: -1;
     /* 背景になるように */
}

.loop_inner2::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 50%;
     /* ← 上半分を白くする */
     background-color: white;
     z-index: -1;
     /* 背景になるように */
}

.loop_inner3::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 50%;
     /* ← 上半分を白くする */
     background-color: white;
     z-index: -1;
     /* 背景になるように */
}

.loop_list {
     display: flex;
     animation: loop-list 100s linear infinite;
     gap: 20px;
     margin: 0px 10px;
}

.loop_item {
     width: calc(100vw / 1.8);
     display: block;
}

@media (min-width: 700px) {
     .loop_item {
          width: calc(100vw / 4.2);
     }
}

.loop_item img {
     width: 100%;
     border-radius: 10px;
}

.loop_img_bottom {
     margin-top: 40px;
}


@keyframes loop-list {
     from {
          transform: translateX(0);
     }

     to {
          transform: translateX(-100%);
     }
}

/* -------------------------- */
/* 3つのプラン */
/* -------------------------- */
.plan_attention {
     margin-top: 2rem;
     text-align: center;
}

@media (min-width: 700px) {
     .plan_attention {
          margin-top: 3rem;
     }
}

.plan_heading {
     text-align: center;
     margin: 60px 0 40px;
}

.plan_ttl {
     display: flex;
     justify-content: center;
     align-items: flex-end;
     gap: 16px;
     position: relative;
     align-items: center;
     width: 100%;
     overflow: hidden;
}

@media (min-width: 700px) {
     .plan_ttl {
          gap: 4rem;
          align-items: center;
     }
}

@media (min-width: 1000px) {
     .plan_ttl {
          gap: 5rem;
     }
}

.plan_deco {
     width: 180px;
}

@media (min-width: 700px) {
     .plan_deco {
          width: 380px;
     }
}

.plan_title_wrap {
     position: relative;
     display: inline-block;
     padding-bottom: 6px;
     /* 下に少し余白 */
}

.plan_title {
     font-size: 3.2rem;
     white-space: nowrap;
}

/* -------------------------- */
/* 表 */
/* -------------------------- */
.highlight_column {
     border-right: 3px solid #ff9020 !important;
     background-color: #fffbe9; /* 少し黄色っぽくするなども可能 */
     border-top: 1px solid #ff8f2000 !important;
     border-left: 3px solid #ff9020 !important;
}


.plan_table th {
     width: 220px;
}

.grey_color {
     background-color: #F5F3E7 !important;
}

.plan_table td {
     width: 245px;
}

.plan_table_section {
     padding: 6rem 20px 4rem;
     overflow-x: auto;
     /* 横スクロールを可能に */
     -webkit-overflow-scrolling: touch;
     /* iOSの慣性スクロール対応 */
     margin-bottom: 8rem;

     margin-right: 1.5rem;
}
@media (min-width: 700px) {
     .plan_table_section {

     margin-right: 0rem;
     }
}
.plan_table {
     min-width: 700px;
     /* 表が折り返されないように最小幅を指定 */
     width: 100%;
     /* border-collapse: collapse; */
     border-collapse: separate;
  border-spacing: 0;
     text-align: center;
     margin-right: 3rem;
}

@media (min-width: 700px) {
     .plan_table {
          max-width: 950px;
          margin-right: 0rem;
          margin: 0 auto;
     }
}

.none {
     background-color: #33333300 !important;
     border: none !important;
}

.plan_table th,
.plan_table td {
     border: 1px solid #ddd;
     padding: 16px 12px;
     font-size: 1.5rem;
     background-color: white;
}

@media (min-width: 700px) {

     .plan_table th,
     .plan_table td {
          font-size: 1.6rem;
     }
}

.plan_table thead th {
     font-weight: bold;
     font-size: 15px;
     vertical-align: bottom;
}

.plan_label {
     font-weight: bold;
     padding: 16px 8px;
     font-size: 14px;
     line-height: 1.4;
}

.plan_label-yellow {
     background-color: #ffde3b !important;
     border-radius: 10px 10px 0 0;
     border: none !important;
     border-right: 1px solid rgb(255, 255, 255) !important;
}

.plan_label-orange {
     background-color: linear-gradient(to right, #ffa726, #ffca28);
     border: none !important;
}

.plan_label-orange {
     background: linear-gradient(to top, #ffd93b, #ff9020) !important;
     position: relative;
     border-right: 4px solid #ff9020;
     border-radius: 10px 10px 0 0;
}
.plan_label span{
     font-size: 2rem;
}
.plan_recommend span{
     font-size: 2rem;
}

.plan_recommend img {
     position: absolute;
     top: -60px;
     width: 180px;
     right: 0;
     left: 0;
     margin: 0 auto;
}

@media (min-width: 700px) {
     .plan_recommend img {
          width: 210px;
     }
}

.plan_highlight {
     color: #e45a00;
     font-weight: bold;
     font-size: 2rem;
}

.radius_left_bottom {
     /* border-radius: 0 0 0px 10px !important; */
}

.radius_right_bottom {
     border-radius: 0 0 10px 0px !important;
     background-color: #ffffff !important;
     border-bottom: 4px solid #ff9020 !important;
}

.highlight_column_bottom{
         border-bottom: 3px solid #ff9020 !important;
}

.highlight_column_top{
     border-top: 3px solid #ff9020 !important;
     border-top-left-radius: 10px !important;

     border-right: 3px solid #ff9020 !important;
     border-left: 3px solid #ff9020 !important;
}

/* -------------------------- */
/* 料金 */
/* -------------------------- */
.bg_top_sp {
     width: 100%;
     vertical-align: bottom;
}

.bg_bottom_sp {
     width: 100%;
     vertical-align: bottom;
}

.price_bg {
     background: linear-gradient(to top, #FDCF36, #FF9A21);
     background-size: cover;
     padding: 5rem 0 8rem;
}

@media (min-width: 700px) {
     .price_list {
          display: flex;
          max-width: 1000px;
          gap: 3rem;
          margin: 0 auto;
     }
}

.price_heading {
     margin-bottom: 40px;
}

.price_heading img {
     display: block;
     margin: 0 auto;
}

.price_icon {
     width: 60px;
     padding-bottom: 1.5rem;
}

@media (min-width: 700px) {
     .price_icon {
          width: 110px;
          padding-bottom: 2rem;
     }
}

.price_subtitle {
     font-size: 1.5rem;
     color: #333;
     text-align: center;
     letter-spacing: 0.1rem;
}


@media (min-width: 700px) {
     .price_subtitle {
          font-size: 1.8rem;
          letter-spacing: 0.1rem;
     }
}

/* 料金 */
.plan_card {
     background: #fff;
     border-radius: 10px;
     width: calc(100% - 40px);
     margin: 5rem auto 0;
     box-shadow: 6px 6px 0 #333;
     border: 2px solid #333;
     font-family: sans-serif;
}

@media (min-width: 700px) {
     .plan_card {
          box-shadow: 8px 8px 0 #333;
     }
}

.plan_header img {
     height: 25px;
}

.plan_header {
     background: #ffd54c;
     font-weight: bold;
     text-align: center;
     padding: 12px 8px;
     font-size: 1.8rem;
     border-bottom: 2px solid #333;
     border-top: 2px solid #333;
     margin-top: 2rem;
}

@media (min-width: 700px) {
     .plan_header {
          padding: 17px 8px 17px;
     }
}

.plan_header_orange {
     background-color: #FF9020;
}

.plan_body {
     text-align: center;
     padding: 30px 16px 32px;
}

.plan_price {
     font-size: 3.2rem;
     font-weight: bold;
     margin: 0;
}

@media (min-width: 700px) {
     .plan_price {
          font-size: 4rem;
     }
}

.plan_tax {
     font-size: 14px;
     margin-left: 4px;
}

@media (min-width: 700px) {
     .plan_tax {
          font-size: 18px;
     }
}

.plan_note {
     margin-top: 12px;
     font-size: 14px;
     font-weight: bold;
}

@media (min-width: 700px) {
     .plan_note {
          font-size: 1.8rem;
     }
}

.plan_note_none {
     color: #00000000;
}

.orange {
     color: #FF9020;
}

.plan_unit {
     font-size: 1.4rem;
     margin: 4px 0 24px;
     font-weight: 800;
}

@media (min-width: 700px) {
     .plan_unit {
          font-size: 1.8rem;
     }
}

@media (min-width: 700px) {
     .plan_unit2 {
          padding-top: 2.6rem;
     }
}

.plan_unit span {
     font-size: 2.5rem;
     font-weight: bold;
     color: #FF9020;
}

@media (min-width: 700px) {
     .plan_unit span {
          font-size: 3rem;
     }
}

.plan_btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     padding: 14px 24px;
     font-weight: bold;
     color: #fff;
     text-decoration: none;
     border-radius: 999px;
     background-color: #FF9020;
     transition: opacity 0.3s ease;
     width: 100%;
}

.plan_btn:hover {
     opacity: 0.8;
}

.plan_btn img {
     width: 10px;
     height: auto;
}



.plan_btn {
     background-color: #FF9020;
     color: #fff;
     padding: 12px 30px;
     border-radius: 30px;
     font-weight: bold;
     text-decoration: none;
     transition: background-color 0.3s;
     width: calc(100% - 40px);
     margin: 3rem auto 0;
     justify-content: space-between;
     display: flex;
     align-items: center;
     max-width: 350px;
}

.plan_btn:hover {
     opacity: 0.8;
}

.plan_btn img {
     width: 10px;
}

.plan_btn_text {
     flex: 1;
     text-align: center;
     color: white;
}

@media (min-width: 700px) {
     .plan_btn_text {
          font-size: 1.6rem;
     }
}

.plan_card_parent {
     position: relative;
     margin-top: 10rem;
}

@media (min-width: 700px) {
     .plan_card_parent {
          margin-top: 5rem;
     }
}

.osusume {
     position: absolute;
     top: -60px;
     width: 210px;
     display: block;
     right: 0;
     left: 0;
     margin: 0 auto;
     z-index: 100;
}

/* ---------------------- */
/* フロー */
/* ---------------------- */
@media (min-width: 700px) {
     .onlinekaigi {
          position: absolute;
          width: 97px;
          top: -50px;
          right: 20px;
     }
}

@media (min-width: 700px) {
     .camera {
          position: absolute;
          width: 97px;
          top: -50px;
          right: 20px;
     }
}

@media (min-width: 700px) {
     .pc {
          position: absolute;
          width: 97px;
          top: -50px;
          right: -30px;
     }
}

@media (min-width: 700px) {
     .flow_contents {
          display: grid;
          grid-template-columns: 1fr 10px 1fr 10px 1fr 10px;
          max-width: 1000px;
          align-items: center;
          margin: 0 auto;
     }
}

@media (min-width: 700px) {
     .flow_contents2 {
          display: grid;
          grid-template-columns: auto 10px auto;
          max-width: 1000px;
          align-items: center;
          justify-content: center;
          margin: 0 auto 5rem;
          gap: 2rem;
     }
}

.flow_box {
     position: relative;
     background: #fff7dc;
     border: 2px solid #333;
     border-radius: 10px;
     padding: 3rem 1.5rem;
     width: calc(100% - 40px);
     box-shadow: 6px 6px 0 #f89e3d;
     margin: 40px auto;
     text-align: center;
     font-family: sans-serif;
}

@media (min-width: 700px) {
     .flow_box {
          height: 230px;
          width: 240px;
     }
}

@media (min-width: 1000px) {
     .flow_box {
          width: 280px;
     }
}

/* ステップの丸 */
.flow_step_circle {
     position: absolute;
     top: -30px;
     left: 15%;
     transform: translateX(-50%);
     width: 60px;
     height: 60px;
     border-radius: 50%;
     color: #fff;
     font-weight: bold;
     font-size: 12px;
     line-height: 1.1;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     box-shadow: 0 0 0 2px #333;
}


/* タイトル */
.flow_title {
     font-size: 2rem;
     font-weight: bold;
     margin-bottom: 2rem;
}

/* タイトル下の線 */
.flow_line {
     width: 100%;
     height: 1.5px;
     border-radius: 999px;
     background: #333;
     margin: 0 auto 2rem;
}

/* 説明文 */
.flow_text {
     font-size: 1.5rem;
     color: #333;
     line-height: 1.6;
     font-weight: 600;
     text-align: left;
}

.arrow_bottom {
     width: 20px;
     display: block;
     margin: 0 auto;
}

@media (min-width: 700px) {
     .arrow_bottom {
          width: 10px;
     }
}

/* ------------------- */
/* FAQ */
/* ------------------- */
.inquiry_subtitle {
     text-align: center;
}

@media (min-width: 700px) {
     .inquiry_subtitle {
          font-size: 1.8rem;
          letter-spacing: 0.1rem;
     }
}

.light {
     width: 60px;
     display: block;
     margin: 0 auto;
     padding-bottom: 1rem;
}

@media (min-width: 700px) {
     .light {
          width: 110px;
     }
}

.dot_bg {
     background-image: radial-gradient(#ffe6a0 2px, transparent 2px);
     background-size: 30px 30px;
     background-repeat: repeat;
}
.dot_bg_plan{
     background-image: radial-gradient(#FFFFFF 2px, transparent 2px);
     background-size: 30px 30px;
     background-repeat: repeat;   
     background-color: #FFF1C3;
}
.faq_container {
     max-width: 800px;
     margin: 0 auto;
     display: block;
     width: calc(100% - 40px);
     margin: 0 auto;
     padding-bottom: 5rem;
}

@media (min-width: 700px) {
     .faq_container {
          padding-bottom: 8rem;
     }
}

.faq_item {
     border-bottom: 2px solid #333;
     font-family: sans-serif;
}

.faq_question {
     width: 100%;
     padding: 1.5rem;
     font-weight: 600;
     background: none;
     border: none;
     font-size: 1.5rem;
     display: flex;
     justify-content: space-between;
     /* Qテキストとアイコンの左右配置 */
     align-items: center;
     cursor: pointer;
     text-align: left;
}

.faq_left {
     display: flex;
     align-items: center;
     gap: 1rem;

}

.faq_q {
     color: #f7b622;
     font-weight: bold;
     font-size: 3rem;
     font-weight: bold;
}

.faq_icon {
     font-size: 14px;
     transition: transform 0.3s ease;
     margin-left: 1rem;
}

.faq_icon img {
     width: 12px;
}

/* 開いているときに矢印を回転 */
.faq_item.active .faq_icon {
     transform: rotate(180deg);
}

.faq_answer {
     display: none;
     padding: 12px 16px 12px;
     font-size: 15px;
     line-height: 1.6;
     background: #fff7dc;
     color: #333;
     margin-bottom: 5px;
     border-radius: 5px;
}

.faq_item.active .faq_answer {
     display: block;
}

.faq_a {
     color: #FF9020;
     font-weight: bold;
     font-size: 3rem;
     margin-right: 8px;
}

.roboto {
     font-family: 'Roboto', sans-serif;
}

.fotter_logo {
     width: 200px;
     display: block;
     margin: 5rem auto 0;
}

.fotter_txt {
     text-align: center;
     padding: 2rem 0 4rem 0;
     font-family: 'Noto Serif JP', sans-serif;
}

.fotter_bg_top {
     width: 100%;
}

.fotter_bg {
     background: linear-gradient(to bottom, #ffd140, #ff9020);
     padding: 5rem 0 8rem;
}

/* ----------------------- */
/* 動き */
/* ----------------------- */
.fade-in {
     opacity: 0;
     transform: scale(0.95);
}

.fade-in.active {
     animation: fadeIn 0.6s ease forwards;
}

@keyframes fadeIn {
     0% {
          opacity: 0;
          transform: scale(0.95);
     }

     100% {
          opacity: 1;
          transform: scale(1);
     }
}






.plan_btn2 {
     position: absolute;
     bottom: 15%;
     right: 0;
     left: 0;
     margin: 0 auto;
     background-color: #FFF5D7;
     color: #e69e1b;
     padding: 12px 30px;
     border-radius: 30px;
     font-weight: bold;
     text-decoration: none;
     transition: background-color 0.3s;
     width: calc(100% - 40px);
     margin: 3rem auto 0;
     justify-content: space-between;
     display: flex;
     align-items: center;
     max-width: 300px;
}

@media (min-width: 700px) {
     .plan_btn2 {
          width: 100%;
          max-width: 450px;
          bottom: 22%;
     }
}

.plan_btn2:hover {
     opacity: 0.8;
}

.plan_btn2 img {
     width: 10px;
}

.plan_btn_text2 {
     flex: 1;
     text-align: center;
     color: #e69e1b;
}

@media (min-width: 700px) {
     .plan_btn_text2 {
          font-size: 1.8rem;
     }
}


/* FIXEDボタン */
.fixed_btn_wrap {
     position: fixed;
     bottom: 0px;
     right: 0;
     left: 0;
     margin: 0 auto;
     display: none;
     /* 初期は非表示 */
     z-index: 999;
     background-color: #33333366;
     width: 100%;
     padding: 4px 0;
}

.fixed_btn_wrap img {
     max-width: 250px;
     margin: 0 auto;
     display: block;
}

@media (min-width: 700px) {
     .fixed_btn_wrap img {
          max-width: 380px;
     }
}

.fixed_btn_wrap a:hover {
     opacity: 0.8;
}

.fixed_btn_contents {
     background-color: #333333;
     width: 100%;
     height: 50px;
}

.fixed_btn_wrap.show {
     display: block;
}