html, body {
    overflow-x: hidden;
    scroll-behavior: smooth;
}

main{
    width: 100%;
    /* height: 100%; */
}

:root{
    --text_color: #483b33;
    --text_linear :linear-gradient(to bottom right, #69564A, #483B33);
    --base_color: #FDFCFA;
    --main_color: #FB863D;
    --main_linear :linear-gradient(to bottom right, #FF9857, #F07020);
    --accent_color: #539B00;
    --accent_linear: linear-gradient(to bottom right, #6FB41F, #539B00);
    font-size: 16px;
    letter-spacing: 0.05em;
    font-weight: 500;
    background-color: var(--base_color);
    color: var(--text_color);
}


/* ホバーアニメーション */
.hover_scale {
  transition: transform 0.3s ease;
}

.hover_scale_big,
.hover_scale_small {
  transition: transform 0.3s ease;
  white-space: nowrap;
}

.hover_scale_big:hover {
  transform: scale(1.1);
}

.hover_scale_small:hover {
  transform: scale(1.05);
}


/* フォント変更用 */

/* ベースフォント（日本語） */
body {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  /* overflow: hidden; */
}

/* すべての要素に継承させる（reset.cssの影響対策） */
*, *::before, *::after {
  font-family: inherit;
}

/* 英語にだけ Nunito Sans を適用 */
.en {
  font-family: 'Nunito Sans', sans-serif;
}

/* 数字にだけ Lato を適用 */
.num {
  font-family: 'Lato', sans-serif;
  /* font-size: 1.08em; */
}


/* 色変更用 */
.main_color{
    color: var(--main_color);
}

.accent_color{
    color: var(--accent_color);
}

.base_color{
    color: var(--base_color);
}

/* 文字サイズ用 */
.kana{
    font-size: 0.9em;
}

.font_300{
    font-weight: 300;
}

.font_400{
    font-weight: 400;
    line-height: 1.4;
}

.font_500{
    font-weight: 500;
    line-height: 1.6;
}

.font_700{
    font-weight: 700;
    line-height: 1.6;
}

.font_900{
    font-weight: 900;
    line-height: 1.3;
}

.br_440{
    display: none;
}

.br_460 {
  display: none;
}

.br_640{
    display: none;
}

.br_1000{
    display: none;
}

.br_1080{
    display: none;
}



.wrapper{
    padding: 0 50px;
    overflow: visible;
}

@media screen and (max-width: 640px) {
    .wrapper{
        padding: 0 20px;
    }
}

/* グローバルメニュー */

.menu_button {
    position: fixed;
    top: 60px;
    right: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    row-gap: 10px;
    width: 80px;
    height: 80px;
    border-radius: 12px;
    background-color: var(--text_color);
    z-index: 10001;
    border: none;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.menu_button__line,
.menu_button::before,
.menu_button::after {
    content: "";
    width: 40px;
    height: 3px;
    background-color: var(--base_color);
    transition: transform 0.3s, opacity 0.3s;
}

.menu_button.is_opened .menu_button__line {
    opacity: 0;
}

.menu_button.is_opened::before {
    transform: translateY(13px) rotate(-45deg);
}

.menu_button.is_opened::after {
    transform: translateY(-13px) rotate(45deg);
}

#hamburger_menu{
    /* display: none; */
    position: fixed;
    top: 0;
    right: 0;
    width: 50vw;
    height: 100vh;
    background-image: url(../img/hamburger_background.webp);
    background-repeat: no-repeat;
    background-size: cover; /* ← 追加ポイント */
    background-position: center; /* ← 画像を中央に */
    z-index: 10000;
    border: solid 6px var(--text_color);
    display: flex;
    justify-content: center;
    align-items: center;

    /* アニメーション用 */
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.8s ease, opacity 0.6s ease;
}

#hamburger_menu.is_open {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

#hamburger_menu .sns_button{
    position: absolute;
    right: 180px;
    top: 75px;
    color: var(--base_color);
}

.insta_circle_btn:hover {
  background-color: var(--base_color);
  border: 1px solid var(--accent_color);
}

.insta_circle_btn:hover svg{
    color: var(--accent_color);
}

.hamburger_contents{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

      /* レスポンシブ対応 */
    width: 100%;
    max-width: 960px;
    padding: 0 16px;
    margin: 0 auto;
    box-sizing: border-box;
}

.hamburger_logo{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 65px;
}

.insta_circle_btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 45px;
  height: 45px;
  background-color: var(--accent_color);
  color: white;
  border-radius: 50%;
  text-decoration: none;
  font-size: 36px;
  transition: background-color 0.3s ease;
}

.hamburger_contents ul {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 30px;
  margin: 0 auto; /* 中央に配置 */
  padding-bottom: 64px;
}

.hamburger_contents ul li{
    width: 220px;
    height: 60px;
    color: var(--text_color);
    border: 2px solid rgba(72, 59, 51, 0.7);
    background-color: var(--base_color);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
}

.hamburger_contents ul li a{
    color: var(--text_color);
    font-size: 1.25rem;
    display: block;
    width: 100%;
    height: 100%;
    display:flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
}

.hamburger_contents ul li:hover a{
    color: var(--main_color);
}

#hamburger_menu .contact_form{
    background-image: url(../img/hamburger_menu_contact.png);
}

.contact_form{
    width: 490px;
    height: 109px;
    border-radius: 12px;
    border: none;
    color: var(--base_color);
    position: relative;
    cursor: pointer;
    transition: transform 0.3s ease, letter-spacing 0.3s ease;
}

#hamburger_menu .contact_form p:nth-of-type(1){
    font-size: 1.75rem;
    font-weight: 500;
}

#hamburger_menu .contact_form::before{
    content: "";
    position: absolute;
    left: -25px;
    top: -10px;
    width: 50px;
    height: 54px;
    background-image: url(../img/hamburger_leaf.svg);
    background-size: contain;
    background-repeat: no-repeat;
}

#hamburger_menu .contact_form::after{
    content: "";
    position: absolute;
    right: -25px;
    bottom: -10px;
    width: 50px;
    height: 54px;
    background-image: url(../img/hamburger_leaf.svg);
    background-size: contain;
    background-repeat: no-repeat;
    transform: scaleX(-1);
}

.contact_form:hover{
    transform: translateY(-3px);
    letter-spacing: 0.1em;
}

/* ハンバーガーメニューのレイアウト調整 */
@media screen and (max-width: 1590px) {
    :root { --scale: 0.8; }
    #hamburger_menu .contact_form p:nth-of-type(1) {
        font-size: calc(1.75rem * var(--scale));
    }

    #hamburger_menu .contact_form::after {
        right: -15px;
        bottom: -25px;
        width: 40px;
    }

    #hamburger_menu .contact_form::before {
        left: -25px;
        top: -10px;
        width: 40px;
    }
}

@media screen and (max-width: 1320px) {
    /* :root { --scale: 0.64; } */
    .hamburger_contents ul li {
        width: 200px;
    }

    #hamburger_menu .contact_form{
        transform: scale(1.3);
    }

    #hamburger_menu .contact_form::after {
        right: -15px;
        bottom: -25px;
        width: 30px;
    }

    #hamburger_menu .contact_form::before {
        left: -15px;
        top: -10px;
        width: 30px;
    }
}

@media screen and (max-width: 1105px) {
    #hamburger_menu .contact_form {
        transform: scale(1.7);
    }
}

@media screen and (max-width: 1000px) {
    #hamburger_menu {
        width: 100vw;
    }

    #hamburger_menu .contact_form {
        transform: scale(1.7);
    }
}

@media screen and (max-width: 840px) {

    #hamburger_menu .contact_form {
        transform: scale(1.2);
    }

    #hamburger_menu .sns_button{
        top: 54px;
        right: 150px;
    }
}

@media screen and (max-width: 700px) {
    #hamburger_menu .sns_button{
        top: 55px;
        right: 140px;
    }
}

@media screen and (max-width: 670px) {
    #hamburger_menu .contact_form::before {
        left: -15px;
        width: 30px;
        height: 54px;
    }

    #hamburger_menu .contact_form::after {
        right: -15px;
        bottom: -25px;
        width: 30px;
        height: 54px;
    }
}

@media screen and (max-width: 560px) {
    .hamburger_logo{
        transform: scale(0.8);    
    }

    #hamburger_menu .sns_button{
        top: 32px;
        right: 90px;
        transform: scale(0.8);
    }

    .hamburger_contents ul{
        gap: 20px;
    }

    .hamburger_contents ul li{
        width: 140px;
        height: 45px;
    }

    .hamburger_contents ul li a {
        font-size: 1rem;
    }

    #hamburger_menu .contact_form::before {
        left: -10px;
        top: -5px;
        width: 23px;
    }

    #hamburger_menu .contact_form::after {
        right: -10px;
        bottom: -35px;
        width: 23px;
        height: 54px;
    }

}

@media screen and (max-height: 850px) {

    #hamburger_menu .sns_button{
        top: 75px;
    }

    .hamburger_logo{
        display: none;
    }

    .hamburger_contents{
        margin-top: 100px;
    }
    
}



/* メインビジュアル */

:root {
  --scale: 1;
}

/* メインビジュアルのラインと装飾 */
#mainvisual_line {
  display: block;
  width: 100vw;
  height: 15px;
  background-color: var(--text_color);
  position: relative;
  z-index: 1;
}

#mainvisual_line::after {
  content: "";
  display: inline-block;
  width: 135px;
  height: 367px;
  position: absolute;
  right: 55%;
  top: -156px;
  background-image: url(../img/leaf_big.svg);
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 0;
}

/* メインビジュアル全体レイアウト */
#mainvisual {
  display: flex;
  width: 100vw;
  height: 100vh;
}

#mainvisual .mainvisual_left {
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
}

#mainvisual .mainvisual_left::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url(../img/watercolor.webp);
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.3;
  z-index: -1;
}

.mainvisual_left_contents {
  max-width: 705px;
  margin: 100px 50px 50px 50px;
  transform: scale(1);
  transform-origin: top left;
  transition: transform 0.3s ease, width 0.3s ease;
}

/* ロゴとキャッチコピー（共通スケーリング） */
.mainvisual_logo {
  height: calc(65px * var(--scale));
}

.catchphrase {
  padding: calc(35px * var(--scale)) 0 calc(80px * var(--scale));
}

.catchphrase_1 {
  display: block;
  padding: -10px;
}

.catchphrase p:nth-of-type(1) {
  font-size: calc(4.75rem * var(--scale));
  padding-bottom: calc(30px * var(--scale));
}

.catchphrase p:nth-of-type(2) {
  font-size: calc(1.5rem * var(--scale));
}

/* お問い合わせボタン（共通スケーリング） */
.contact_form {
  background-image: url(../img/contact.png);
  background-repeat: no-repeat;
  background-size: cover;
  width: calc(490px * var(--scale));
  height: calc(109px * var(--scale));
  border: none;
  border-radius: 12px;
  color: var(--base_color);
  position: relative;
  padding: calc(16px * var(--scale));
  box-sizing: border-box;
}

.contact_form p:nth-of-type(1) {
  font-size: calc(1.75rem * var(--scale));
}

.contact_form p:nth-of-type(2) {
  font-size: calc(0.875rem * var(--scale));
  opacity: 0.85;
}

.contact_form::before,
.contact_form::after {
  content: "";
  position: absolute;
  width: calc(50px * var(--scale));
  height: calc(54px * var(--scale));
  background-image: url(../img/hamburger_leaf.svg);
  background-size: contain;
  background-repeat: no-repeat;
}

.contact_form::before {
  left: -15px;
  top: -8px;
}

.contact_form::after {
  right: -15px;
  bottom: -8px;
  transform: scaleX(-1);
}

.mainvisual_right {
  height: 100vh;
  width: 50%;
  overflow: hidden;
  position: relative;
}

.mainvisual_scroller {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    transform: rotate(12deg) translateY(0);
    position: absolute;
    top: -20%;
    left: -50%;
    will-change: transform;
}

.mainvisual_scroller img {
  width: 517px;
  height: auto;
  display: block;
}



@media screen and (max-width: 1590px) {
    :root { --scale: 0.8; }
}

@media screen and (max-width: 1320px) {
    :root { --scale: 0.64; }
}

@media screen and (max-width: 1105px) {
    :root { --scale: 0.5}
}

@media screen and (max-width: 840px) {
  :root { --scale: 0.8; }
}

@media screen and (max-width: 670px) {
  :root { --scale: 0.64; }
}

@media screen and (max-width: 560px) {
  :root { --scale: 0.49; }
}


/* ===============================
   タブレット・モバイル固有レイアウト
   =============================== */

@media screen and (min-width: 2200px) {
    .mainvisual_scroller img {
        width: 700px;
    }
}


@media screen and (max-width: 840px) {
    .menu_button {
        width: 60px;
        height: 60px;
        border-radius: 10px;
        right: 40px;
        top: 50px;
    }

    .menu_button__line, 
    .menu_button::before, 
    .menu_button::after {
        width: 30px;
        height: 2.25px;
    }

    .menu_button::before{
        position: absolute;
        top: 20px;
    }

    .menu_button::after{
        position: absolute;
        bottom: 20px;
    }

    .menu_button.is_opened::after {
        transform: translateY(-9px) rotate(45deg);
    }

    .menu_button.is_opened::before {
        transform: translateY(9px) rotate(-45deg);
    }

    #mainvisual {
        flex-direction: column;
    }

    #mainvisual .mainvisual_left {
        width: 100%;
        height: 67vh;
        align-items: start;
    }

    #mainvisual .mainvisual_right {
        width: 100%;
        height: 33vh;
    }

    .mainvisual_scroller{
        justify-content: center;
        align-items: center;
        top: -30%;
        left: -25%;
    }

    .mainvisual_scroller img{
        width: 300px;
    }

    #mainvisual_line::after {
        content: "";
        display: inline-block;
        width: 135px;
        height: 367px;
        position: absolute;
        right: -100px;
        top: 50px;
        background-image: url(../img/leaf_big.svg);
        background-repeat: no-repeat;
        background-size: contain;
        z-index: 0;
        transform: rotate(90deg) scaleX(-1);
    }

}

@media screen and (max-width: 670px) {
    #mainvisual_line::after {
        width: 80px;
        height: 216px;
        right: -50px;
        top: 100px;
        transform: rotate(90deg) scaleX(1);
    }
}

@media screen and (max-width: 560px) {
    .menu_button {
        right: 30px;
        top: 40px;
        width: 36px;
        height: 36px;
        border-radius: 6px;
    }

    .menu_button__line, 
    .menu_button::before, 
    .menu_button::after {
        width: 18px;
        height: 2px;
    }

    .menu_button::before{
        top: 10px;
    }

    .menu_button::after{
        bottom: 10px;
    }

    .menu_button.is_opened::after {
        transform: translateY(-7px) rotate(45deg);
    }

    .menu_button.is_opened::before {
        transform: translateY(7px) rotate(-45deg);
    }

    #mainvisual .contact_form{
        transform: scale(1.2) translateX(7%);
    }

    #mainvisual .mainvisual_left{
        height: 60%;
    }

    #mainvisual .mainvisual_right{
        height: 40%;
    }

    .mainvisual_scroller{
        gap: 20px;
        left: -18%;
    }

    .mainvisual_scroller img{
        width: 200px;
    }
}

/* 670px以下では表示 */
@media screen and (max-width: 460px) {
    .br_460 {
        display: inline;
    }

    .mainvisual_left_contents{
        margin: 40px;
    }

    #mainvisual_line::after {
        right: -60px;
        top: 180px;
    }

    .mainvisual_scroller{
        left: -40%;
    }
}

@media screen and (max-width: 370px) {
    .catchphrase p:nth-of-type(1){
        font-size: 2.2rem;
    }
}

@media screen and (max-height: 730px) {
    .catchphrase {
        padding: 15px 0 30px;
    }
}



/* promrem */

.probrem{
    padding-top: 130px;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position:relative;
    width: 100%;
}

.probrem::after{
    content: "";
    position: absolute;
    background-image: url(../img/watercolor.webp);
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0.3;
    z-index: -1;
    inset: 0px;
}

.contact_flex_btn {
    width: 200px;
    height: 200px;
    background-image: url('../img/works_background_orange.webp');
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 50%;
    color: var(--base_color);
    font-size: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    line-height: 1.5;
    border: 3px solid var(--accent_color);
    position: fixed;
    bottom: 100px;
    right: -200px; /* ← 左から出てくる→右から出てくる */
    z-index: 1000;
    transition: right 0.3s ease, transform 0.3s ease, letter-spacing 0.3s ease;
}

.contact_flex_btn_open {
    right: 50px; /* ← 表示状態で右から50pxに */
}

.contact_flex_btn:hover {
    letter-spacing: 0.1em;
}

.contact_flex_btn::before {
    content: "";
    display: inline-block;
    width: 23px;
    height: 24px;
    position: absolute;
    right: 23px;
    bottom: 40px;
    background-image: url(../img/leaf_small.svg);
    background-repeat: no-repeat;
    background-size: contain;
}

.contact_flex_btn::after {
    content: "";
    display: inline-block;
    width: 23px;
    height: 24px;
    position: absolute;
    left: 23px;
    top: 50px;
    background-image: url(../img/leaf_small.svg);
    background-repeat: no-repeat;
    background-size: contain;
    transform: scale(0.8) rotate(90deg);
}


.probrem_wrapper{
    /* padding: 0 50px; */
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position:relative;
}

#probrem_line{
    display: block;
    width: 100vw;
    height: 10px;
    background-color: var(--main_color);
    position:absolute;
    top: 0;
}

#probrem_line::after{
    content: "";
    display: inline-block;
    width: 135px;
    height: 367px;
    position: absolute;
    left: -100px;
    top: -250px;
    background-image: url(../img/leaf_big.svg);
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 0;
    transform: rotate(-90deg) scaleX(-1);
}

.title_1{
    position:relative;
    padding-bottom: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.title_1 img:nth-of-type(1){
    position:absolute;
    right: calc(50% - 50px);
    top:-60px;
}

.title_1 img:nth-of-type(2){
    position:absolute;
    left:50%;
    top:-15px;
    transform: translateX(-50%);
}

h2{
    text-align: center;
    font-size: 3rem;
    line-height: 1.45;
    padding-bottom: 22px;
}

.section_copy{
    text-align: center;
    font-size: 3rem;
    line-height: 1.45;
    padding-bottom: 22px;
    color: var(--text_color);
}

.section_subcopy{
    text-align: center;
    line-height: 1.6;
    padding-bottom: 40px;
}

.probrem{
    position: relative;
}

.probrem::before{
    content: "";
    display: block;
    width: 100vw;
    height: 800px;
    background-image: url(../img/probrem_dotted_line.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: absolute;
    top: 300px;
    z-index: -1;
}

.probrem_contents{
    width: 100%;
    display: grid;
    /* grid-template-columns: repeat(2, 1fr); */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
    padding-top: 70px;
    max-width: 940px;
    margin: 0 auto;
}

.probrem_content{
    aspect-ratio: 1.6 / 1;
    width: 100%;
    border:solid 1px var(--main_color);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 1.25rem;
    line-height: 1.4;
    background-color: #fff;
    padding: 10px;
}

.probrem_content p{
    padding-bottom: 10px;
}

.probrem_content img{
    display:block;
    width: 160px;
}

.probrem_content p{
    text-align:center;
}

.solution{
    width: 100%;
    height: auto;
    padding-top: 68px;
    padding-bottom: 60px;
    background-image: url('../img/works_background_orange.webp');
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: 100px;
    clip-path: ellipse(1920px 100% at 50% 100%);
    display: flex;
    justify-content: center;
    overflow: hidden;
    position: relative;
    left: 0;         /* .wrapper の padding と同じ値をマイナスに */
    width: calc(100vw); 
}

.solution_contents{
    max-width: 1350px;
}

.solution_title{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.solution_title p:nth-of-type(1){
    display: inline-block;
    color: var(--base_color);
    background-color: var(--accent_color);
    padding: 7px 25px;
    border-radius: 12px;
}

.solution h3{
    color:#FDFCFA;
    padding: 20px 0 45px;
}

.solution_myhomepage{
    background-color: #FDFCFA;
    border-radius: 12px;
    padding: 60px 55px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.solution_myhomepage::before{
    content: "";
    position: absolute;
    left: -30px;
    top: -10px;
    width: 92px;
    height: 72px;
    background-image: url(../img/hamburger_leaf.svg);
    background-size: contain;
    background-repeat: no-repeat;
}

.solution_myhomepage::after{
    content: "";
    position: absolute;
    right: -30px;
    bottom: -10px;
    width: 92px;
    height: 72px;
    background-image: url(../img/hamburger_leaf.svg);
    background-size: contain;
    background-repeat: no-repeat;
    transform: scaleX(-1);
}

.solution_myhomepage_left_title img:nth-of-type(1){
    width: 356px;
    height: auto;
}

.solution_myhomepage_left_title p:nth-of-type(1){
    font-size: 2.5rem;
    margin-top: -17px;
    /* text-align: center; */
}

.solution_myhomepage_left_content{
    font-size: 1.25rem;
    padding-top: 20px;
    line-height: 1.4;
    padding-right: 27px;
}

.solution_myhomepage_right {
  width: 100%;
  max-width: 450px; /* ← お好みの最大サイズに */
}

.solution_myhomepage_right img {
  width: 100%;
  height: auto;
  display: block;
  max-width: 450px; /* ← 必要に応じて調整（最大サイズ） */
}

@media (max-width: 1250px) {
    .section_copy{
        /* font-size: 2.5rem; */
        font-size: clamp(2rem, 1.2vw, 3rem);
        line-height: 1.45;
        padding-bottom: 22px;
    }

    .solution_myhomepage_left_title img:nth-of-type(1){
        width: 313px;
    }

    .solution_myhomepage_left_title  p:nth-of-type(1){
        font-size: 2.2rem;
    }

    .solution_myhomepage_left_content{
        font-size: 1rem;
    }

    .solution_myhomepage_right {
        width: 100%;
        max-width: 350px; /* ← お好みの最大サイズに */
    }   
}

@media (max-width: 1050px){
    .solution_myhomepage_left_title img:nth-of-type(1){
        width: 284px;
    }

    .solution_myhomepage_left_title p:nth-of-type(1){
        font-size: 2rem;
    }
}

@media (max-width: 1000px){
    .br_1000{
        display: inline;
    }

    .probrem_content{
        font-size: 1rem;
    }

    .solution_myhomepage{
        flex-direction: column;
    }

    .solution_myhomepage_left_title{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .solution_myhomepage_left_content{
        text-align: center;
        padding-right: 0;
        line-height: 1.4;
        padding-bottom: 30px;
    }

    .solution_myhomepage_left_title p:nth-of-type(1){
        line-height: 2;
    }
}

@media screen and (max-width: 840px) {
    #probrem_line::after{
        display: none;
    }
    
    .probrem_content p{
        font-size: 1rem;
    }

    .probrem_content img{
        max-width: 87px;
    }

    .contact_flex_btn{
        transform: scale(0.8);
    }

    .contact_flex_btn_open{
        right: 30px;
    }
}

@media screen and (max-width: 640px){
    .probrem_contents{
        gap: 20px;
    }

    .solution_title{
        line-height: 1.4;
        text-align: center;
    }

    .br_640{
        display: inline;
    }

    .solution_myhomepage{
        padding: 30px 20px;
    }
}

@media screen and (max-width: 560px) {
    .solution{
        margin-top: 80px;
    }

    .section_copy{
        font-size: 1.5rem;
    }

    .section_subcopy{
        font-size: 0.875rem;
    }

    .probrem_contents{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding-top: 35px;
    }

    .probrem_content{
        max-width: 345px;
    }

    .solution_myhomepage_left_title img:nth-of-type(1){
        width: 230px;
    }

    .solution_myhomepage_left_title p:nth-of-type(1) {
        font-size: 1.375rem;
    }

    .solution_myhomepage_left_content{
        padding-top: 10px;
        font-size: 0.875rem;
    }
}

@media screen and (max-width: 380px) {
    .solution_title .section_copy br{
        display: none;
    }

    .solution_myhomepage_left_title img:nth-of-type(1){
        width: 210px;
    }

    .solution_myhomepage_left_title p:nth-of-type(1) {
        font-size: 1.2rem;
    }
}

@media screen and (max-width: 345px) {
    .solution_myhomepage_left_title img:nth-of-type(1){
        width: 200px;
    }

    .solution_myhomepage_left_title p:nth-of-type(1) {
        font-size: 1.1rem;
    }
}


/* benefit */
.benefit{
    padding-top: 180px;
    position: relative;
    overflow: hidden;
}

.benefit::after{
    content: "";
    position: absolute;
    background-image: url(../img/watercolor.webp);
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0.3;
    z-index: -1;
    inset: 0px;
}

.benefit::before{
    content: '';
    display: block;
    width: 120vw;
    height: 1250px;
    position: absolute;
    top: 380px;
    left: 50%;
    transform: translateX(-52%);
    background-image: url(../img/benefit_dotted_line.svg);
    background-repeat: no-repeat;
    background-position: center center;
}

.benefit .section_top{
    position: relative;
}

.benefit .section_top::before{
    content: "";
    display: inline-block;
    width: 22px;
    height: 13px;
    background-image: url(../img/leaf_small.svg);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    left: 50%;
    top: 25px;
    transform: translateX(-230px);
}

.benefit .section_top::after{
    content: "";
    display: inline-block;
    width: 50px;
    height: 20px;
    background-image: url(../img/leaf_small.svg);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    left: 50%;
    top: 100px;
    transform: translateX(-450px) rotate(90deg);
}

.benefit .section_copy{
    position: relative;
}

.benefit .section_copy::before{
    content: "";
    display: inline-block;
    width: 30px;
    height: 20px;
    background-image: url(../img/leaf_small.svg);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    left: 50%;
    top: 25px;
    transform: translateX(260px) rotate(80deg);
}

.benefit .section_copy::after{
    content: "";
    display: inline-block;
    width: 60px;
    height: 30px;
    background-image: url(../img/leaf_small.svg);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    left: 50%;
    top: 40px;
    transform: translateX(400px);
}

.benefit h2{
    padding-bottom: 120px;
}

.title_2{
    position:relative;
    padding-bottom: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.title_2 img:nth-of-type(1){
    position:absolute;
    left:50%;
    top: -10px;
    transform: translate(-50%, -100%);
}

.title_2 img:nth-of-type(2){
    position: absolute;
    left: 50%;
    top: -60px;
    transform: translateX(-70px);
}

.benefit_contents{
    display: flex;
    flex-direction: column;
    justify-content: left;
    align-items: center;
    width: 100%;
    padding-bottom: 120px;
}

.benefit_content{
    max-width: 1400px;
    width: 100%;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3%;
    padding: 42px 60px;
    border: solid 2px var(--main_color);
    border-radius: 12px;
    margin-bottom: 50px;
    position: relative;
}

.benefit_content_2{
    flex-direction: row-reverse;
}

.benefit_content_1::before {
    content: '';
    position: absolute;
    top: -60px;
    left: 60%;
    width: 50vw; /* 画面の右半分 */
    height: 298px;
    background-image: url('../img/works_background_orange.webp');
    background-repeat: no-repeat;
    background-size: cover;
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
    z-index: -1;
}
.benefit_content_2::before {
    content: '';
    position: absolute;
    top: -60px;
    right: 60%;
    width: 50vw; /* 画面の右半分 */
    height: 298px;
    background-image: url('../img/works_background_orange.webp');
    background-repeat: no-repeat;
    background-size: cover;
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
    z-index: -1;
    transform: scale(-1);
}
.benefit_content_3::before {
    content: '';
    position: absolute;
    top: -60px;
    left: 60%;
    width: 50vw; /* 画面の右半分 */
    height: 298px;
    background-image: url('../img/works_background_orange.webp');
    background-repeat: no-repeat;
    background-size: cover;
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
    z-index: -1;
}

.benefit_content_left{
    max-width: 530px;
    min-width: 400px;
    flex:1;
}

.benefit_content_left img{
    width: 100%;
}

.benefit_content_right{
    min-width: 532px;
    width: 48%;
    flex:1;
    padding: 20px 0;
}

.benefit_content_title{
    display: flex;
    align-items: end;
    position: relative;
}

.benefit_content_title img:nth-of-type(1){
    position: absolute;
    bottom: 5px;
}

.benefit_content_title img:nth-of-type(2){
    position: absolute;
    bottom: 5px;
    left: 23px;
}

.benefit_content_title img:nth-of-type(3){
    position: absolute;
    bottom: 5px;
    left: 46px;
}

.benefit_content_title .en{
    font-size: 1.25rem;
    border-bottom: solid 3px var(--text_color);
    padding: 0 5px 0 27px;
    line-height: 1.3;
    margin-bottom: 5px;
}

.benefit_content_2 .benefit_content_title .en{
    padding: 0 5px 0 50px;
}

.benefit_content_3 .benefit_content_title .en{
    padding: 0 5px 0 73px;
}


.benefit_content_title .num{
    font-size: 3.75rem;
    line-height: 1;
    padding-left: 3px;
}

.benefit h3{
    color: #483b33;
    font-size: 2.5rem;
    padding: 40px 0 25px 0;
}

.benefit_text{
    font-size: 1.25rem;
    line-height: 1.5;
}

.illustration_wrapper {
  position: relative;
  left: -50px;               /* wrapperのpadding分を相殺 */
  width: calc(100vw + 100px); /* 全画面 + 左右padding分 */
  display: flex;
  justify-content: center;
  overflow-x: auto;
  border-bottom: 15px solid var(--text_color);
  z-index: 2;
}


.illustration {
  width: 100%;
  max-width: 100%;
  min-height: 380px;
  height: auto;
  display: block;
  object-fit: cover;
}

@media (max-width: 1250px) {

    .benefit .section_top::before{
        top: 25px;
        transform: translateX(-150px);
    }

    .benefit .section_top::after{
        top: 90px;
        transform: translateX(-300px) rotate(90deg) scale(0.9);
    }

    .benefit .section_copy::before{
        top: 15px;
        transform: translateX(180px) rotate(80deg) scale(0.9);
    }

    .benefit .section_copy::after{
        content: "";
        display: inline-block;
        width: 60px;
        height: 30px;
        background-image: url(../img/leaf_small.svg);
        background-repeat: no-repeat;
        background-size: contain;
        position: absolute;
        left: 50%;
        top: 20px;
        transform: translateX(260px) scale(0.8);
    }

    .benefit_content{
        padding: 30px;
    }

    .benefit_content_left{
        min-width: auto;
    }

  .benefit_content_right{
    width: 90%;
    min-width: 430px; /* 必要なら解除 */
    font-size: 0.95rem; /* 全体の文字サイズを一段階小さく */
    transform-origin: top left;
  }

  .benefit_content_right h3{
    font-size: 2rem;
  }

  .benefit_text{
    font-size: 1rem;
  }

  .benefit_content_title{
    transform: scale(0.9);
    transform-origin: left bottom;
  }

  .benefit_contents{
    padding-bottom: 50px;
  }

}

@media screen and (max-width: 900px){
    .benefit{
        padding-top: 120px;
    }

    .benefit h2{
        padding-bottom: 60px;
    }

    .benefit_content{
        flex-direction: column;
        padding:50px;
    }

    .benefit_content_3{
        margin-bottom: 80px;
    }

    .benefit_content_left{
        width: 100%;
        max-width: initial;
    }

    .benefit_content_right{
        width: 100%;
        padding-top: 30px;
        padding-bottom: 0;
    }

    .benefit h3{
        padding: 30px 0 25px 0;
    }
}

@media screen and (max-width: 640px) {
    .benefit_content_right {
        width: 100%; /* 幅はキープ */
        font-size: 0.8rem; /* テキストを小さく見せる */
        /* padding: 10px 0; */
        padding-top: 25px;
        padding-bottom: 0;
        min-width: initial;
    }

    .benefit_content_right h3 {
        font-size: 1.6rem; /* 必要に応じてさらに縮小 */
    }

    .benefit_content_title {
        transform: scale(0.8);
        transform-origin: left bottom;
    }

    .benefit_text {
        font-size: 0.9rem;
    }
}

@media screen and (max-width: 560px) {
    .benefit .section_copy::before{
        width: 15px;
        top: -15px;
        transform: translateX(115px) rotate(80deg) scale(0.9);
    }

    .benefit .section_copy::after {
        content: "";
        display: inline-block;
        width: 20px;
        left: 50%;
        top: 10px;
        transform: translateX(200px) scale(0.8);
    }

    .benefit .section_top::before {
        top: 30px;
        transform: translateX(-120px);
    }

    .benefit .section_top::after {
        top: 70px;
        transform: translateX(-250px) rotate(90deg) scale(0.9);
    }
}

@media screen and (max-width: 550px) {

    .benefit_content_right{
        padding-top: 10px;
    }

    .benefit_content_right h3 {
        font-size: 1.375rem; /* 必要に応じてさらに縮小 */
    }

    .benefit_content_title {
        transform: scale(0.6);
        transform-origin: left bottom;
    }

    .benefit_text {
        font-size: 0.875rem;
    }

    .benefit h3{
        padding: 25px 0 20px 0;
    }

    .benefit_contents{
        padding-bottom: 0;
    }
}

@media screen and (max-width: 450px) {
    .benefit_content{
        padding: 20px;
        margin-bottom: 25px;
    }

    .benefit_content_3{
        margin-bottom: 50px;
    }
    
    .benefit_content_right {
        padding-top: 0;
    }

    .benefit h3 {
        padding: 15px 0 10px 0;
    }
}

@media screen and (max-width: 390px) {
    .benefit h3{
        font-size: 1.2rem;
    }
}

/* feature */

.feature {
    padding-top: 140px;
    position: relative;
    width: 100vw;
    overflow: visible;
}

.flow_back{
    position: absolute;
    background-image: url(../img/watercolor.webp);
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0.3;
    z-index: -1;
    inset: 0px;
    height: 2000px;
}

.feature::before,
.feature::after {
    content: '';
    position: absolute;
    width: 150px;
    height: 367px;
    background-image: url(../img/leaf_big.svg);
    background-repeat: no-repeat;
    background-size: contain;
}

.feature::before {
    top: -10px;
    left: 50%; /* 中央起点 */
    transform: translateX(500px); /* →右に350px寄せたいなら半分 */
}

.feature::after {
    top: -240px;
    left: 50%; /* 中央起点 */
    transform: translateX(-600px) scale(-1, 1);
    z-index: -1;
}

.feature .section_top{
    position: relative;
}

.feature .section_top::before{
    content: "";
    display: block;
    width: 120%;
    height: 667px;
    position: absolute;
    top: 120px;
    left: -50px;
    background-image: url(../img/feature_dotted_line.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    z-index: -1;
}

.feature_contents {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: clamp(30px, 5vw, 110px);
    position: relative;
    padding-top: 100px;
    width: 100%;
    overflow: visible;
}

.feature_content {
    width: 30%;
    max-width: 396px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    padding-top: var(--feature-offset, 0); /* 個別の段差調整に使える */
    overflow: visible;
}

.feature_content img {
  width: 100%;
  height: auto;
  max-width: 100%;
  display: block;
  border-radius: 12px;
  object-fit: cover;
}


.feature_content:nth-child(2) {
    padding-top: 100px;
}

.feature_content:nth-child(3) {
    padding-top: 200px;
}

.feature_content .feature_num {
    font-size: 10rem;
    position: absolute;
    right: -60px;
    z-index: -1;
    opacity: 0.8;
}

.feature_content:nth-child(1) .feature_num {
    top: -130px;
}

.feature_content:nth-child(2) .feature_num {
    top: -30px;
}

.feature_content:nth-child(3) .feature_num {
    top: 70px;
}

.feature_content h3 {
    font-size: 1.75rem;
    padding: 30px 0 18px;
}

.feature_content_text {
    font-size: 1.25rem;
    line-height: 1.4;
}


@media (max-width: 1380px) {
    .feature_contents{
        gap: 35px;
    }

    .feature_content h3{
        font-size: 1.5rem;
    }

    .feature_content_text{
        font-size: 1rem;
    }
}


@media screen and (max-width:1250px) {
    .feature::before {
        top: -200px;
        left: 50%;
        transform: translateX(300px);
        z-index: 1;
    }

    .feature::after {
        top: -240px;
        left: 50%;
        transform: translateX(-400px) scale(-1, 1);
        z-index: -1;
    }

    .feature .section_top::before{
        top: 40px;
    }

    .feature_content:nth-child(1) .feature_num {
        top: -110px;
    }

    .feature_content:nth-child(2) .feature_num {
        top: -10px;
    }

    .feature_content:nth-child(3) .feature_num {
        top: 90px;
    }

    .feature_content .feature_num {
        font-size: 8rem;
        position: absolute;
        right: -60px;
        z-index: -1;
        opacity: 0.8;
    }
}

@media screen and (max-width: 1180px) {
    .feature{
        padding-top: 120px;
    }

    .feature_contents{
        flex-direction: column;
        align-items: center;
        padding-top: 50px;
        gap: 25px;
    }

    .feature_content{
        max-width: 480px;
        width: 100%;
    }

    .feature_content:nth-child(2),
    .feature_content:nth-child(3){
        padding-top: 60px;
    }

    .feature_content:nth-child(2) .feature_num,
    .feature_content:nth-child(3) .feature_num  {
        top: -50px;
    }
}

@media screen and (max-width: 640px) {
    .feature::before {
        top: -150px;
        left: 50%;
        transform: translateX(150px);
        z-index: 1;
        width: 100px;
    }

    .feature .section_top::before{
        top: -100px;
    }

    .feature_content:nth-child(1) .feature_num,
    .feature_content:nth-child(2) .feature_num,
    .feature_content:nth-child(3) .feature_num  {
        right: -40px;
    }
}

@media screen and (max-width: 370px) {
    .feature_content h3 {
        font-size: 1.3rem;
        padding: 30px 0 18px;
    }

    .feature_content_text{
        font-size: 0.875rem;
    }
}

/* flow */
.flow{
    background-image: url('../img/flow_background_orange.svg');
    background-repeat: no-repeat; 
    background-position: center top; 
    background-size: cover;
    width: 100vw;
    padding-top: 420px;
    padding-bottom: 160px;
    position: relative;
    /* z-index: -2; */
    /* transform: translateY(-130px); */
}

.flow::after{
    content: "";
    display: block;
    width: 2104px;
    height: 2650px;
    position: absolute;
    top: 270px;
    left: 50%;
    transform: translateX(-50%);
    background-image: url(../img/flow_background.svg);
    z-index: -1;
}

.flow .flow_title_top{
    position: relative;
}

.flow .flow_title_top::before{
    content: "";
    display: block;
    height: 367px;
    width: 144px;
    background-image: url(../img/leaf_big.svg);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    transform: rotate(-90deg);
    left: calc(-50vw + 50%);
    top: 1200px;
}

.flow .flow_title_top::after{
    content: "";
    display: block;
    height: 367px;
    width: 144px;
    background-image: url(../img/leaf_big.svg);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    transform: rotate(90deg);
    right: calc(-50vw + 50%);
    top: 1800px;
}



.flow .flow_title_top .flow_title{
    position: relative;
}

.flow .flow_title_top .flow_title::before{
    content: "";
    display: inline-block;
    width: 22px;
    height: 13px;
    background-image: url(../img/leaf_small.svg);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    left: 50%;
    top: 50px;
    transform: translateX(-260px);
}

.flow .section_copy{
    color: var(--base_color);
}

.flow .section_top .flow_title::after{
    content: "";
    display: inline-block;
    width: 60px;
    height: 25px;
    background-image: url(../img/leaf_small.svg);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    left: 50%;
    top: 160px;
    transform: translateX(-400px) rotate(90deg);
}

.flow h2{
    position: relative;
}

.flow h2::before{
    content: "";
    display: inline-block;
    width: 30px;
    height: 20px;
    background-image: url(../img/leaf_small.svg);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    left: 50%;
    top: -20px;
    transform: translateX(200px) rotate(80deg);
}

.flow h2::after{
    content: "";
    display: inline-block;
    width: 40px;
    height: 25px;
    background-image: url(../img/leaf_small.svg);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    left: 50%;
    top: 40px;
    transform: translateX(340px);
}




.flow_making{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 40px;
    column-gap: 40px;
    margin: 0 auto;
    container-type: inline-size;
    padding-top: 50px;
}



.flow_content{
    position: relative;
    width: 300px;
    height: 300px;
    z-index: 3;
}

.flow_content_2,
.flow_content_4{
    top: 70px;
}

.flow_content_left {
    width: 140px;
    height: 140px;
    background: var(--accent_linear);
    border: 2px solid var(--accent_color);
    border-radius: 12px;
    position: absolute;
    top: 0;
    left: 0;
    color: var(--base_color);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.flow_content_left .en{
    font-size: 2.25rem;
    line-height: 1;
}

.flow_content_left .num{
    font-size: 4.375rem;
    line-height: 0.9;
}

.flow_content_right {
    position: relative;
    width: 300px;
    height: 300px;
    background-color: #539B00; /* ← borderとしたい色 */
    clip-path: path('M162 1H288C294.075 1 299 5.92487 299 12V288C299 294.075 294.075 299 288 299H12C5.92487 299 1 294.075 1 288V162C1 155.925 5.92487 151 12 151H138C145.18 151 151 145.18 151 138V12C151 5.92487 155.925 1 162 1Z');
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
}

.flow_content_right::after {
    content: "";
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 296px;
    height: 296px;
    background-color: #FDFCFA; /* 中の色 */
    clip-path: path('M146.167 145.667C150.167 141.5 150 136 150 136L150.079 10.9931C150.083 4.92063 155.006 0 161.079 0H285C291.075 0 296 4.92487 296 11V285C296 291.075 291.075 296 285 296H11C4.92487 296 0 291.075 0 285V161C0 154.925 4.92487 150 11 150H136C136 150 142.167 149.833 146.167 145.667Z');
    z-index: 1;
}

.flow_content_right_top{
    width: 150px;
    height: 150px;
    position: absolute;
    right: 0;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
}

.flow_content_right_bottom{
    width: 100%;
    height: 50%;
    text-align: center;
    position: absolute;
    bottom: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 0 15px;
}

.flow_content_right_bottom span{
    font-size: 1.5rem;
}

.flow_connect{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.flow_compleate {
    display: inline-block;
    background: var(--accent_linear);
    text-align: center;
    border-radius: 100px;
    color: var(--base_color);
    padding: 11px 45px 15px;
    margin-bottom: 30px;
    margin-top: 120px;
    font-size: 2rem;
    min-width: 300px;
}

.flow_oparation {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: center;
  max-width: 1100px;
  margin: 0 auto;
  padding-top: 70px;
  padding-bottom: 100px;
}

.flow_oparation > .flow_content {
  width: 488px;
  height: 450px;
  order: 0; /* 基本は順番通り */
}

/* 下段の入れ替え */
.flow_oparation > .flow_content:nth-of-type(3) {
  order: 4; /* 後に移動 */
}

.flow_oparation > .flow_content:nth-of-type(4) {
  order: 3; /* 先に移動 */
}

.flow_oparation .flow_content{
    width: 450px;
    height: 450px;
}

.flow_oparation .flow_content:nth-of-type(1),
.flow_oparation .flow_content:nth-of-type(3) {
  width: 488px;
  height: 450px;
}

.flow_oparation .flow_content:nth-of-type(2),
.flow_oparation .flow_content:nth-of-type(4) {
  width: 450px;
  height: 488px;
}

.flow_oparation .flow_content_left {
  width: 210px;
  height: 210px;
}

.flow_oparation .flow_content_left .en {
  font-size: 3.375rem; /* 2.25 × 1.5 */
  line-height: 1;
}

.flow_oparation .flow_content_left .num {
  font-size: 6.5625rem; /* 4.375 × 1.5 */
  line-height: 0.9;
}

.flow_oparation .flow_content:nth-of-type(1) .flow_content_right {
  width: 488px;
  height: 450px;
  clip-path: path('M243 1.5H432C441.113 1.5 448.5 8.8873 448.5 18V136.159C448.5 138.731 449.008 141.275 449.994 143.646L450.198 144.118L483.347 218.266C485.203 222.417 485.26 227.144 483.521 231.331L483.347 231.734L450.198 305.882C449.079 308.386 448.5 311.098 448.5 313.841V432C448.5 441.113 441.113 448.5 432 448.5H18C8.88731 448.5 1.5 441.113 1.5 432V243C1.5 233.887 8.8873 226.5 18 226.5H207C217.77 226.5 226.5 217.77 226.5 207V18C226.5 8.8873 233.887 1.5 243 1.5Z');
}

.flow_oparation .flow_content:nth-of-type(1) .flow_content_right::after {
  width: 488px;  /* 元296 × 約1.63 */
  height: 450px; /* 元296 × 約1.5 */
  bottom: -3px;
  right: -3px;
  clip-path: path('M223.5 211.75C225.25 205.75 225 202 225 202V15C225 6.71573 231.716 0 240 0H429.467C437.751 0 444.467 6.71573 444.467 15V134.93C444.467 137.042 444.913 139.13 445.776 141.057L479.258 215.873C481.003 219.771 481.003 224.229 479.258 228.127L445.776 302.943C444.913 304.87 444.467 306.958 444.467 309.07V429C444.467 437.284 437.751 444 429.467 444H15C6.71575 444 0 437.284 0 429V240.015C0 231.731 6.71573 225.015 15 225.015H202C202 225.015 208.25 225.015 213.75 222.5C217.5 220.785 222.188 216.25 223.5 211.75Z');
}

.flow_oparation .flow_content:nth-of-type(1) .flow_content_right_top {
  width: 225px;   /* 元150 × 約1.63 */
  height: 225px;  /* 高さだけ1.5倍で調整（画像用） */
  right: 38px;
}

.flow_oparation .flow_content_right_top img{
    width: 180px;
    height: 180px;
}

.flow_oparation .flow_content:nth-of-type(1) .flow_content_right_bottom{
    width: calc(100% - 38px);
}

.flow_oparation .flow_content_right_bottom{
    padding: 0 40px;
}

.flow_oparation .flow_content:nth-of-type(2) .flow_content_right {
  width: 450px;
  height: 488px;
  clip-path: path('M448.5 243V432C448.5 441.113 441.113 448.5 432 448.5H313.841C311.269 448.5 308.725 449.008 306.354 449.994L305.882 450.198L231.734 483.347C227.583 485.203 222.856 485.26 218.669 483.521L218.266 483.347L144.118 450.198C141.614 449.079 138.902 448.5 136.159 448.5H18C8.8873 448.5 1.5 441.113 1.5 432V18C1.50001 8.88731 8.88731 1.5 18 1.5H207C216.113 1.5 223.5 8.8873 223.5 18V207C223.5 217.77 232.23 226.5 243 226.5H432C441.113 226.5 448.5 233.887 448.5 243Z');
}

.flow_oparation .flow_content:nth-of-type(2) .flow_content_left{
    right: 0;
    left: auto;
}

.flow_oparation .flow_content:nth-of-type(2) .flow_content_right::after {
  width: 450px;  /* 元296 × 約1.63 */
  height: 488px; /* 元296 × 約1.5 */
  top: 3px;
  left: 3px;
  clip-path: path('M232.25 223.5C238.25 225.25 242 225 242 225H429C437.284 225 444 231.716 444 240V429.467C444 437.751 437.284 444.467 429 444.467H309.07C306.958 444.467 304.87 444.913 302.943 445.776L228.127 479.258C224.229 481.003 219.771 481.003 215.873 479.258L141.057 445.776C139.13 444.913 137.042 444.467 134.93 444.467H15C6.71573 444.467 0 437.751 0 429.467V15C0 6.71575 6.71573 0 15 0H203.985C212.269 0 218.985 6.71573 218.985 15V202C218.985 202 218.985 208.25 221.5 213.75C223.215 217.5 227.75 222.188 232.25 223.5Z');
}

.flow_oparation .flow_content:nth-of-type(2) .flow_content_right_top {
  width: 225px;   /* 元150 × 約1.63 */
  height: 225px;  /* 高さだけ1.5倍で調整（画像用） */
  left: 0;
}

.flow_oparation .flow_content:nth-of-type(2) .flow_content_right_bottom{
    height: calc((100% - 38px) / 2);
    bottom: 38px;
}

.flow_oparation .flow_content:nth-of-type(3) .flow_content_right {
  width: 488px;
  height: 450px;
  clip-path: path('M244 448.5H55C45.8873 448.5 38.5 441.113 38.5 432V313.841C38.5 311.269 37.9918 308.725 37.0059 306.354L36.8018 305.882L3.65332 231.734C1.79746 227.583 1.73955 222.856 3.47949 218.669L3.65332 218.266L36.8018 144.118C37.9212 141.614 38.5 138.902 38.5 136.159V18C38.5 8.8873 45.8873 1.5 55 1.5H469C478.113 1.50001 485.5 8.88731 485.5 18V207C485.5 216.113 478.113 223.5 469 223.5H280C269.23 223.5 260.5 232.23 260.5 243V432C260.5 441.113 253.113 448.5 244 448.5Z');
}

.flow_oparation .flow_content:nth-of-type(3) .flow_content_right::after {
  width: 488px;  /* 元296 × 約1.63 */
  height: 450px; /* 元296 × 約1.5 */
  bottom: -3px;
  right: -3px;
  clip-path: path('M257.5 232.25C255.75 238.25 256 242 256 242V429C256 437.284 249.284 444 241 444H51.5328C43.2485 444 36.5328 437.284 36.5328 429V309.07C36.5328 306.958 36.0869 304.87 35.2242 302.943L1.74216 228.127C-0.00257127 224.229 -0.00257267 219.771 1.74216 215.873L35.2242 141.057C36.0869 139.13 36.5328 137.042 36.5328 134.93V15C36.5328 6.71573 43.2485 0 51.5328 0H466C474.284 0 481 6.71573 481 15V203.985C481 212.269 474.284 218.985 466 218.985H279C279 218.985 272.75 218.985 267.25 221.5C263.5 223.215 258.812 227.75 257.5 232.25Z');
}

.flow_oparation .flow_content:nth-of-type(3) .flow_content_left{
    right: 0;
    left: auto;
    bottom: 0;
    top: auto;
}

.flow_oparation .flow_content:nth-of-type(3) .flow_content_right_top {
  width: 225px;   /* 元150 × 約1.63 */
  height: 225px;  /* 高さだけ1.5倍で調整（画像用） */
  left: 38px;
  bottom:0;
}

.flow_oparation .flow_content:nth-of-type(3) .flow_content_right_bottom{
    width: calc(100% - 38px);
    top:0;
    right: 0;
}

.flow_oparation .flow_content:nth-of-type(4) .flow_content_right {
  width: 450px;
  height: 488px;
  clip-path: path('M1.5 244V55C1.5 45.8873 8.8873 38.5 18 38.5H136.159C138.731 38.5 141.275 37.9918 143.646 37.0059L144.118 36.8018L218.266 3.65332C222.417 1.79746 227.144 1.73955 231.331 3.47949L231.734 3.65332L305.882 36.8018C308.386 37.9212 311.098 38.5 313.841 38.5H432C441.113 38.5 448.5 45.8873 448.5 55V469C448.5 478.113 441.113 485.5 432 485.5H243C233.887 485.5 226.5 478.113 226.5 469V280C226.5 269.23 217.77 260.5 207 260.5H18C8.8873 260.5 1.5 253.113 1.5 244Z');
}

.flow_oparation .flow_content:nth-of-type(4) .flow_content_left{
    bottom: 0;
    top: auto;
}

.flow_oparation .flow_content:nth-of-type(4) .flow_content_right::after {
  width: 450px;  /* 元296 × 約1.63 */
  height: 488px; /* 元296 × 約1.5 */
  top: 3px;
  left: 3px;
  clip-path: path('M211.75 257.5C205.75 255.75 202 256 202 256H15C6.71573 256 0 249.284 0 241V51.5328C0 43.2485 6.71573 36.5328 15 36.5328H134.93C137.042 36.5328 139.13 36.0869 141.057 35.2242L215.873 1.74216C219.771 -0.00257127 224.229 -0.00257267 228.127 1.74216L302.943 35.2242C304.87 36.0869 306.958 36.5328 309.07 36.5328H429C437.284 36.5328 444 43.2485 444 51.5328V466C444 474.284 437.284 481 429 481H240.015C231.731 481 225.015 474.284 225.015 466V279C225.015 279 225.015 272.75 222.5 267.25C220.785 263.5 216.25 258.812 211.75 257.5Z');
}

.flow_oparation .flow_content:nth-of-type(4) .flow_content_right_top {
  width: 225px;   /* 元150 × 約1.63 */
  height: 225px;  /* 高さだけ1.5倍で調整（画像用） */
  right: 0;
  bottom:0;
}

.flow_oparation .flow_content:nth-of-type(4) .flow_content_right_bottom{
    height: calc((100% - 38px) / 2);
    top: 38px;
}

.flow_oparation .flow_content:nth-of-type(4){
    transform: translateY(-40px);
}

.flow_oparation .flow_content_right_bottom {
  gap: 16px;
  height: 50%;
}

.flow_oparation .flow_content_right_bottom p:nth-of-type(2){
    display: none;
}

.flow_oparation .flow_content_right_bottom span {
  font-size: 2.45rem;
}

/* .flow_oparation::after{
    content: "";
    display: block;
    width: 60px;
    height: 60px;
    background-image: url(../img/flow_point.svg);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-40%);
    z-index: 1;
} */

.flow_point{
    background: var(--accent_linear);
    border: 2px solid var(--base_color);
    border-radius: 12px;
    max-width: 1320px;
    margin: 0 auto;
    padding: 70px 30px 45px;
    position: relative;
    z-index: 1;
    isolation: isolate;
}

.flow_point::before{
    content: "";
    display: block;
    width: 60px;
    height: 60px;
    background-image: url(../img/flow_point.svg);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: -51.5px;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
}

.flow_point .title_2{
    position: relative;
    padding-bottom: 20px;
}

.flow_point .title_2::before{
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    background-color: var(--base_color);
    border-radius: 50%;
    opacity: 0.4;
    position: absolute;
    top: -20px;
}

.flow_point .title_2::after{
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: var(--base_color);
    border-radius: 50%;
    position: absolute;
    top: -17px;
}

.flow_point .section_copy{
    color: var(--base_color);
    font-size: 2.5rem;
}


.flow_point_content{
    text-align: center;
    font-size: 1.25rem;
    line-height: 1.4;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.flow_oparation_sp{
    display: none;
}


@media screen and (max-width: 1765px) {
    .flow{
        padding-top: 350px;
    }

    .flow_making{
        max-width: 1000px;
    }

    .flow_content_2,
    .flow_content_4{
        top: 0;
    }

    .flow_connect{
        transform: translateY(-70px);
        top: 70px;
    }

    .flow_oparation{
    padding-top: 0;
    }
}

@media screen and (max-width: 1600px) {
    /* .flow{
        transform: translateY(-100px);
    } */
}

@media screen and (max-width: 1250px) {
    .flow{
        padding-bottom: 0;
        /* transform: translateY(-50px); */
    }

    .flow h2::before{
        width: 18px;
        top: -15px;
        transform: translateX(130px) rotate(80deg);
    }

    .flow h2::after {
        width: 20px;
        top: 20px;
        transform: translateX(230px);
    }

    .flow .section_top .flow_title::after {
        width: 50px;
        top: 120px;
        transform: translateX(-300px) rotate(90deg);
    }

    .flow .flow_title_top .flow_title::before {
        top: 50px;
        transform: translateX(-190px);
    }

    .flow_contents{
        transform: translateY(-50px);
    }

    .flow_making{
        transform: scale(0.8);
        /* padding-top: 0; */
    }

    .flow_oparation .flow_content_right_bottom p:nth-of-type(1){
        display: none;
    }

    .flow_oparation .flow_content_right_bottom p:nth-of-type(2){
        display: block;
        font-size: 1.2rem;
    }

    .flow_compleate{
        font-size: 1.5rem;
        margin-top: 80px;
    }

    .flow_connect img{
        width: 60px;
    }

    .flow_oparation{
        transform: scale(0.8) translateY(-100px);
        width: 100%;
    }

    .flow_point{
        transform: translateY(-200px);
    }

    .flow_point .section_copy{
        font-size: 2rem;
    }

    .flow_point_content{
        font-size: 1rem;
    }

    .flow .flow_title_top::before {
        top: 700px;
    }

    .flow .flow_title_top::after {
        top: 1500px;
    }
}

@media screen and (max-width: 1180px) {
    .flow{
        transform: translateY(0);
    }    
}

@media screen and (max-width: 1080px) {
    .flow{
        padding-top: 300px;
        max-height: 3000px;
    }

    .flow_contents {
        transform: translateY(0);
    }

    .flow_making{
        transform: scale(1);
        padding-top: 30px;
        row-gap: 30px;
    }

    .flow_making .flow_content{
        width: 100%;
        height: 100%;
        display: flex;
        position: static;
    }

    .flow_making .flow_content_left{
        position: static;
    }

    .flow_making .flow_content_right {
        all: unset; /* 一度すべて解除 */
        flex: 1;
        height: 140px;
        background: #FDFCFA;
        border: 2px solid var(--accent_color);
        border-radius: 12px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 20px;
        box-sizing: border-box;
    }

    .flow_making .flow_content_right::after{
        content: none;
    }

    .flow_making .flow_content_right_top {
        position: static;
        width: 100px;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        /* margin-right: 20px; */
    }

    .flow_making .flow_content_right_top img {
        width: 100%;
        height: auto;
        max-width: 160px;
    }

    .flow_making .flow_content_right_bottom {
        position: static;
        width: 100%;
        text-align: left;
        padding: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 12px;
        height: auto;
        padding-left: 20px;
    }

    .flow_making .flow_content_right_bottom span {
        font-size: 1.75rem;
    }

    .flow_making .flow_content_right_bottom p {
        font-size: 1rem;
        line-height: 1.6;
    }

    .br_1080{
        display: inline;
    }

    .flow_connect {
        transform: translateY(0);
        top: 70px;
    }

    .flow_compleate{
        line-height: 1.4;
    }

    .flow_oparation {
        transform: scale(0.7) translateY(-120px);
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        max-width: initial;
        row-gap: 25px;
        column-gap: 0;
    }

    .flow_oparation .flow_content_right_bottom p:nth-of-type(2){
        font-size: 1.3rem;
    }

    .flow_oparation .flow_content:nth-of-type(2){
        right: -35px;
    }

    .flow_point{
        transform: translateY(-200px);
    }

}

@media screen and (max-width: 800px) {
    .flow{
        padding-top: 250px;
    }

    .flow_making .flow_content_right_bottom span{
        font-size: 1.5rem;
    }

    .flow_making .flow_content_right_bottom p{
        font-size: 0.875rem;
    }

    .flow_oparation {
        transform: scale(0.6) translateY(-230px);
    }

    .flow_oparation .flow_content_right_bottom p:nth-of-type(2){
        font-size: 1.4rem;
    }

    .flow_point{
        transform: translateY(-280px);
    }

    .flow .flow_title_top::before {
        top: 700px;
    }

    .flow .flow_title_top::after {
        top: 1500px;
    }

}

@media screen and (max-width: 700px) {
    /* .flow_oparation {
        transform: scale(0.5);
    }

    .flow_oparation .flow_content_right_bottom p:nth-of-type(2){
        font-size: 1.5rem;
    }

    .flow_point{
        transform: translateY(-230px);
    } */

    .flow_point .section_copy{
        font-size: 1.375rem;
    }
}

@media screen and (max-width: 640px) {

    .flow{
        padding-top: 280px;
        padding-bottom: 60px;
        max-height: initial;
        transform: translateY(50px);
    }

    .flow_making {
        transform: none;
        padding-top: 30px;
        row-gap: 25px;
    }

  .flow_oparation {
    transform: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 100%;
  }

  .flow_oparation .flow_content:nth-of-type(2) {
    right: 0;
  }

  .flow_oparation .flow_content_right_bottom p:nth-of-type(2) {
    font-size: 1rem;
  }

  .flow_making .flow_content_left,
  .flow_oparation .flow_content_left{
    position: absolute;
    top: 0;
    left: 0;
    width: 140px;
    height: 140px;
  }

  .flow_oparation .flow_content_left .en{
    font-size: 2.25rem;
    line-height: 1;
  }

    .flow_oparation .flow_content_left .num {
        font-size: 4.375rem;
        line-height: 0.9;
    }

    .flow_making .flow_content,
    .flow_oparation .flow_content:nth-of-type(1),
    .flow_oparation .flow_content:nth-of-type(2),
    .flow_oparation .flow_content:nth-of-type(3),
    .flow_oparation .flow_content:nth-of-type(4){
        width: 300px;
        height: 300px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
    }

    .flow_oparation .flow_content:nth-of-type(4) {
        transform: translateY(0);
    }

    .flow_oparation .flow_content:nth-of-type(2) .flow_content_left,
    .flow_oparation .flow_content:nth-of-type(3) .flow_content_left,
    .flow_oparation .flow_content:nth-of-type(4) .flow_content_left {
        left: 0;
        right: auto;
        top: 0;
        bottom: auto;
    }

    .flow_making .flow_content_right,
    .flow_oparation .flow_content:nth-of-type(1) .flow_content_right,
    .flow_oparation .flow_content:nth-of-type(2) .flow_content_right,
    .flow_oparation .flow_content:nth-of-type(3) .flow_content_right,
    .flow_oparation .flow_content:nth-of-type(4) .flow_content_right  {
        width: 300px;
        height: 300px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: absolute;
        clip-path: path('M162 1H288C294.075 1 299 5.92487 299 12V288C299 294.075 294.075 299 288 299H12C5.92487 299 1 294.075 1 288V162C1 155.925 5.92487 151 12 151H138C145.18 151 151 145.18 151 138V12C151 5.92487 155.925 1 162 1Z');
        background-color: var(--base_color);    
        }

    .flow_making .flow_content_right_top,
    .flow_oparation .flow_content:nth-of-type(1) .flow_content_right_top,
    .flow_oparation .flow_content:nth-of-type(2) .flow_content_right_top,
    .flow_oparation .flow_content:nth-of-type(3) .flow_content_right_top,
    .flow_oparation .flow_content:nth-of-type(4) .flow_content_right_top{
        width: 150px;
        height: 150px;
        position: absolute;
        right: 0;
        left: auto;
        top: 0;
        bottom: auto;
    }

    .flow_making .flow_content_right_top img,
    .flow_oparation .flow_content_right_top img{
        width: 120px;
        height: 120px;
    }

    .flow_making .flow_content_right_bottom,
    .flow_oparation .flow_content:nth-of-type(1) .flow_content_right_bottom,
    .flow_oparation .flow_content:nth-of-type(2) .flow_content_right_bottom,
    .flow_oparation .flow_content:nth-of-type(3) .flow_content_right_bottom,
    .flow_oparation .flow_content:nth-of-type(4) .flow_content_right_bottom{
        width: 100%;
        position: absolute;
        top: auto;
        bottom: 0;
        height: calc(100% / 2);
        align-items: center;
        text-align: center;
    }

    .flow_making .flow_content_right_bottom,
    .flow_oparation .flow_content_right_bottom{
        padding: 0 15px;
    }

    .flow_making .flow_content_right_bottom span,
    .flow_oparation .flow_content_right_bottom span {
        font-size: 1.375rem;
    }

    .flow_oparation .flow_content_right_bottom p:nth-of-type(2) {
        font-size: 1rem;   
    }

    .flow_oparation .flow_content:nth-of-type(1) .flow_content_right::after,
    .flow_oparation .flow_content:nth-of-type(2) .flow_content_right::after,
    .flow_oparation .flow_content:nth-of-type(3) .flow_content_right::after,
    .flow_oparation .flow_content:nth-of-type(4) .flow_content_right::after {
        content: none;
    }

    .flow_oparation > .flow_content:nth-of-type(3) {
        order: 3; /* 後に移動 */
    }


    .flow_connect {
        transform: none;
        top: auto;
        padding: 40px 0 35px;
    }

    .flow_connect img{
        width: 80px;
    }

    .flow_point {
        transform: none;
    }

    .flow_compleate {
        font-size: 1.25rem;
        margin-top: 0;
        padding: 13px 20px;
    }

    .flow_oparation_sp{
        display: block;
        color: var(--base_color);
        text-align: center;
        font-size: 1.5rem;
        line-height: 1.4;
        -webkit-text-stroke: 0.5px #A7704F;
        padding-top: 45px;
    }

    .flow_making .flow_content_right_bottom p {
        font-size: 1rem;
        line-height: 1.4;
    }

    .flow .flow_title_top::after {
        content: "";
        display: block;
        height: 367px;
        width: 144px;
        background-image: url(../img/leaf_big.svg);
        background-repeat: no-repeat;
        background-size: contain;
        position: absolute;
        transform: rotate(90deg);
        right: calc(-50vw + 50%);
        top: 2500px;
    }
}

@media screen and (max-width:560px) {
    .flow{
        padding-top: 200px;
    }
}

@media screen and (max-width:390px) {
    .flow{
        padding-top: 180px;
    }
}

/* plan */
.plan{
    padding-top: 160px;
    padding-bottom: 120px;
    position: relative;
}

.plan::after{
    content: "";
    position: absolute;
    background-image: url(../img/watercolor.webp);
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0.3;
    z-index: -1;
    inset: 0px;
}

.plan::before{
    content: "";
    display: block;
    position: absolute;
    top: 150px;
    left: 50%;
    transform: translateX(-50%);
    width: 1980px;
    height: 1700px;
    background-image: url(../img/plan_background.svg);
    background-repeat: no-repeat;
    background-size: cover;
    z-index: -1;
}

.plan_list{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    padding: 50px;
    width: 100%;
}

.plan_contents_wrapper{
    padding-bottom: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


.plan_content{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: solid 2px var(--main_color);
    border-radius: 12px;
    max-width: 420px;
    height: 520px;
    width: 30%;
    text-align: center;
    background-color: #fff;
    padding: 50px 30px;
    position: relative;
}

.plan_content .hidden{
    display: none;
}

.plan_content:nth-of-type(1)::before {
    content: "";
    display: inline-block;
    width: 88px;
    height: 105px;
    background-image: url('../img/hamburger_leaf.svg');
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: -10px;
    left: -40px;
}

.plan_content:nth-of-type(3)::after {
    content: "";
    display: inline-block;
    width: 88px;
    height: 105px;
    background-image: url('../img/hamburger_leaf.svg');
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    bottom: -20px;
    right: -40px;
    transform:scaleX(-1);
}

.plan_content_2{
    position: relative;
}

.plan_recommend{
    position: absolute;
    top: 0;
    width: 100%;
    background: var(--main_linear);
    color: var(--base_color);
    padding: 10px 0;
    font-size: 1.5rem;
}

.plan_content_title{
    padding-bottom: 22px;
}

.plan_content_title p:nth-of-type(1){
    font-size: 1.25rem;
}

.plan_content_title p:nth-of-type(2){
    font-size: 2.5rem;
    line-height: 1;
}

.plan_content_text{
    line-height: 1.4;
}

.price{
    padding: 6px 0 4px;
}

.price span:nth-of-type(1){
    font-size: 1.75rem;
    padding-right: 3px;
}

.price_num{
    font-size: 3.75rem;
}

.price_yen{
    font-size: 1.5rem;
}

.page{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 210px;
    height: 43px;
    background: var(--accent_linear);
    border-radius: 30px;
    color: var(--base_color);
    font-size: 1.25rem;
    margin-bottom: 10px;
}

.page span:nth-of-type(2){
    padding: 0 5px 3px;
}

.page span:nth-of-type(3){
    font-size: 1.625rem;
}

#discount{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding-bottom: 10px;
    position: relative;
}

#discount::before{
    content: "";
    display: inline-block;
    width: 52px;
    height: 2px;
    background-color: var(--accent_color);
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(100px) rotate(135deg);
}

#discount::after{
    content: "";
    display: inline-block;
    width: 52px;
    height: 2px;
    background-color: var(--accent_color);
    position: absolute;
    bottom: 40px;
    right: 50%;
    transform: translateX(-100px) rotate(45deg);
}

#discount.hidden{
    display: none;
}

#discount .accent_color{
    font-size: 2rem;
    line-height: 1.4;
}

#discount .num{
    font-size: 2.875rem;
}

#discount .en{
    font-size: 2.375rem;
}

.plan_button {
  width: 460px;
  height: 85px;
  border: solid 2px var(--main_color);
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
  background-color: var(--base_color);
}

.plan_button button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 230px;
  height: 85px;
  border-radius: 12px;
  border: none;
  background: none;
  font-size: 1.5rem;
  color: var(--text_color);
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
}

.plan_button button.selected {
  background: var(--main_linear);
  color: var(--base_color);
  height: 100%;
}

.support h3{
    text-align: center;
    font-size: 2.25rem;
    position: relative;
}

.support h3::before{
    content: "";
    display: inline-block;
    width: 100px;
    height: 2px;
    background-color: var(--main_color);
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
}

.support_list_wrapper{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-top: 70px;
    padding-left: 50px;
    padding-right: 50px;
}


.support_list_pickup{
    display: flex;
    justify-content: center;
    align-items: start;
    gap: 30px;
    height: 100%;
}

.support_list_pickup_contents{
    border: solid 2px var(--main_color);
    border-radius: 12px;
    width: 100%;
    height: 100%;
    max-width: 400px;
    background-color: #fff;
}

.support_list_title{
    display: inline-block;
    background: var(--main_linear);
    color: var(--base_color);
    border-radius: 10px 10px 0 0;
    width: 100%;
    padding: 12px 0;
    font-size: 1.5rem;
}

.support_list_content{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15px;
    text-align: center;
    padding: 40px 20px;
    /* background-color: #fff; */
}

.support_list_content_text{
    line-height: 1.4;
}

.support_list_content_text p:nth-of-type(1){
    padding-bottom: 10px;
}

.support_list {
    display: grid;
    grid-template-columns: repeat(auto-fill, 200px);
    gap: 30px;
    justify-content: center;
    align-items: center;
    padding-top: 45px;
    max-width: 1120px;
    width: 100%;
    margin: 0 auto;
}


.support_list li {
  border: solid 2px var(--main_color);
  border-radius: 12px;
  aspect-ratio: 1 / 1;  /* ← ここで正方形 */
  width: 200px;
  height: 200px;          /* もしくは適当な幅 */
  padding-top: 28px;
  padding-bottom: 22px;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.support_list li:nth-of-type(1),
.support_list li:nth-of-type(2),
.support_list li:nth-of-type(3) {
    display: none;
}

.support_list li p{
    padding-top: 10px;
    line-height: 1.3;
}

@media screen and (max-width: 1550px) {
    .plan_list{
        transform: scale(0.8);
        width: 120%;
        gap: 30px;
        padding: 0;
    }
    .plan_content{
        padding: 30px 15px;
    }
}


@media screen and (max-width: 1280px) {
    .price_num{
        font-size: 3rem;
    }

    .plan_content{
        height: 460px;
    }

    .plan_button{
        width: 370px;
        height: 68px;
    }

    .plan_button button.selected{
        border-radius: 10px;
    }

    .support_list_pickup_contents {
        border: solid 2px var(--main_color);
        border-radius: 12px;
        width: 100%;
        height: 100%;
        max-width: 400px;
        background-color: #fff;
    }
    .support_list_title{
        font-size: 1.2rem;
    }
}

@media screen and (max-width: 1050px) {
    .plan_list{
        transform: scale(1);
        width: 100%;
        gap: 40px;
        padding-bottom: 30px;
    }

    .plan_content{
        padding: 42px 10px 35px;
        height: auto;
        width: 100%;
        max-width: 250px;
    }

    .plan_recommend{
        font-size: 0.75rem;
        padding: 4px 0;
    }

    .plan_content_title p:nth-of-type(1) {
        font-size: 0.75rem;
    }

    .plan_content_title p:nth-of-type(2) {
        font-size: 1.5rem;
    }

    .plan_content_text{
        font-size: 0.75rem;
    }

    .price span:nth-of-type(1) {
        font-size: 1rem;
        padding-right: 3px;
    }

    .price_num {
        font-size: 2rem;
    }

    .price_yen {
        font-size: 0.75rem;
    }

    .page{
        font-size: 1rem;
        width: auto;
        height: auto;
        padding: 0 25px;
    }

    .making_span{
        font-size: 0.75rem;
    }

    .support h3{
        font-size: 1.5rem;
    }

    .support_list {
        padding-top: 0;
    }

    .support_list_pickup{
        display: none;
    }

    .support_list li:nth-of-type(1),
    .support_list li:nth-of-type(2),
    .support_list li:nth-of-type(3)  {
        display: flex;
    }

    .support_list li:nth-of-type(1) img,
    .support_list li:nth-of-type(2) img,
    .support_list li:nth-of-type(3) img {
        width: 100px;
        height: 100px;
    }

    .support_list_pickup_contents:nth-of-type(1),
    .support_list_pickup_contents:nth-of-type(2),
    .support_list_pickup_contents:nth-of-type(3){
        display: none;
    }
}

@media screen and (max-width: 840px) {
    .plan{
        padding-bottom: 100px;
    }

    .plan_list{
        flex-direction: column;
        padding-top: 40px;
    }

    .plan_content {
        padding: 63px 23px 50px;
        height: 520px;
        width: 100%;
        max-width: 340px;
        max-height: 400px;
    }

    .plan_recommend {
        font-size: 1rem;
        padding: 5px 0;
    }

    .plan_content_title p:nth-of-type(1) {
        font-size: 1.25rem;
    }

    .plan_content_title p:nth-of-type(2) {
        font-size: 2.5rem;
        line-height: 1;
    }

    .plan_content_text {
        font-size: 1rem;
        line-height: 1.4;
    }

    .price span:nth-of-type(1) {
        font-size: 1.75rem;
        padding-right: 3px;
    }

    .price_num {
        font-size: 3.75rem;
    }

    .price_yen {
        font-size: 1.5rem;
    }

    .page {
        font-size: 1.25rem;
        width: 210px;
        height: 43px;
        padding: 0;
    }

    .making_span {
        font-size: 1rem;
    }

    .plan_button{
        width: 350px;
    }

    .plan_button button{
        font-size: 1.2rem;
    }

    .support_list_wrapper{
        padding-right: 0;
        padding-left: 0;
    }

    .support_list{
        gap: 10px;
        grid-template-columns: repeat(auto-fill, 170px);
    }

    .support_list li{
        width: 170px;
        height: 170px;
    }

    .support_list li:nth-of-type(1) img,
    .support_list li:nth-of-type(2) img,
    .support_list li:nth-of-type(3) img,
    .support_list li img{
        width: 85px;
        height: 85px;
    }

}

@media screen and (max-width: 640px) {
    .plan{
        padding-top: 200px;
    }

}

@media screen and (max-width: 390px) {
    .support_list{
        grid-template-columns: repeat(auto-fill, 150px);
    }

    .support_list li{
        width: 150px;
        height: 150px;
    }

    .support_list li p{
        font-size: 0.75rem;
    }

    .plan_button {
        width: 300px;
    }
}

@media screen and (max-width: 380px) {
    .price_num{
        font-size: 3rem;
    }

    .plan_content {
        padding: 63px 20px 50px;
        height: 520px;
        width: 100%;
        max-width: 340px;
        max-height: 400px;
    }
}


/* works */

.works{
    background-image: url('../img/works_background_orange.webp');
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 160px;
    padding-bottom: 160px;
    overflow: hidden;
    border-top: 15px solid var(--text_color);
}

.works .section_top{
    padding-bottom: 80px;
    position: relative;
}

.works .section_top::before{
    content: "";
    position: absolute;
    right: 0;
    top: -10px;
    width: 144px;
    height: 367px;
    background-image: url(../img/leaf_big.svg);
    background-size: contain;
    background-repeat: no-repeat;
    transform: rotate(90deg);
}

.works .section_top::after{
    content: "";
    position: absolute;
    left: 200px;
    top: -350px;
    width: 144px;
    height: 367px;
    background-image: url(../img/leaf_big.svg);
    background-size: contain;
    background-repeat: no-repeat;
    transform: scaleX(-1);
}

.works .section_copy{
    color: var(--base_color);
}

.works_wrapper{
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;
}

.works_wrapper::before{
    content: "";
    display: block;
    position: absolute;
    top: -200px;
    width: 1950px;
    height: 1400px;
    background-image: url(../img/works_dotted_line.svg);
    background-repeat: no-repeat;
    background-size: cover;
    z-index: -1;
}

.works_contents{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap:50px;
}

.works_contents .works_content{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 35px;
}

.works_contents{
    max-width: 1500px;
}

.works_content_left {
  flex-basis: 41%;
  max-width: 100%;
}

.works_content_right {
  flex-basis: 53%;
  max-width: 100%;
}

.works_content_left img:nth-of-type(1){
    width: 100%;
}

.works_content_left img:nth-of-type(2){
    width: 100%;
    display: none;
}

.works_content_right_title{
    padding: 0 10px;
    border-bottom: 2px solid rgba(253, 252, 250, 0.5);  /* ← #FDFCFA の 50%透過 */
}

.works_content_right_title span{
    background: var(--accent_linear);
    color: var(--base_color);
    border-radius: 12px;
    font-size: 0.75rem;
    padding: 3px 25px;
}

.works_content_right_title p{
    font-size: 2.5rem;
    padding-bottom: 25px;
    padding-top: 15px;
    color: var(--base_color);
}

.works_content_right_copy{
    font-size: 1.75rem;
    color: var(--text_color);
    padding-top: 45px;
    padding: 45px 10px 25px;
    line-height: 1.4;
}

.works_content_details {
  display: flex;
  align-items: stretch; /* ✅ 高さを揃えるカギ */
  justify-content: space-between;
  gap: 3%;
  padding-bottom: 10px;
}

.works_content_detail {
  display: flex;
  flex-direction: column;
  padding: 20px;
  background-color: #FCD6BE;
  border-radius: 12px;
  /* ✅ height: auto（省略でもOK） */
}

.works_target{
    flex-basis: 40%;
    min-width: 236px;
}

.works_target ul{
    text-align: left;
    display: flex;
    flex-direction: column;
    gap:8px;
    padding-top: 18px;
}

.works_target ul li {
  position: relative;
  padding: 0 5px;
}

.works_target ul li span {
  display: inline-block;
  position: relative;  /* ✅ relativeに変更 */
  width: 11px;
  height: 11px;
  z-index: 0;        /* ✅ デフォルトに戻す */
  margin-right: 6px;
  margin-bottom: 1px;
}

.works_target ul li span::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 11px;
  height: 11px;
  background: var(--accent_linear);
  border-radius: 50%;
  z-index: 0;
}

.works_target ul li span::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 2px;
  width: 6px;
  height: 3px;
  border-left: 1px solid var(--base_color);
  border-bottom: 1px solid var(--base_color);
  transform: rotate(-45deg);
  z-index: 1;
}

.works_comment{
    flex-basis: 57%;
}

.works_comment_content{
    line-height: 1.4;
    padding: 18px 5px 0;
}

.works_comment_content p:nth-of-type(1){
    padding-bottom: 5px;
}

.works_item_title{
    font-size: 1.25rem;
    display: flex;
    justify-content: left;
    align-items: center;
    border-bottom: 1px solid #977F70;
    padding-left: 2px;
    padding-bottom: 6px;
}

.works_content_2{
    flex-direction: row-reverse;
}

@media screen and (max-width: 1250px) {
    .works .section_top::before {
        content: "";
        position: absolute;
        right: -150px;
        top: -30px;
    }

    .works .section_top::after {
        left: 0;
        top: -400px;
    }

    .works_contents .works_content{
        flex-direction: column;
    }

    .works_content_left,
    .works_content_right{
        max-width: 670px;
    }

    .works_content_2 .works_content_left img:nth-of-type(1){
        display: none;
    }

    .works_content_left img:nth-of-type(2){
        display: block;
    }

    .works_content_right_copy{
        padding: 25px 10px 15px;
    }

    .works_content_right:nth-last-child(1){
        font-size: 0.75rem;
    }
}

@media screen and (max-width: 800px) {
    .works .section_top::before {
        width: 100px;
        right: -50px;
        top: -200px;
    }

    .works .section_top::after {
        width: 100px;
        left: 10px;
        top: -300px;
    }
}

@media screen and (max-width: 640px) {
    .works{
        padding-bottom: 80px;
    }

    .works_wrapper::before{
        top: -300px;
    }

    .works_content_right_title p{
        font-size: 1.5rem;
    }

    .works_content_right_copy{
        font-size: 1.25rem;
    }

    .works_content_details{
        flex-direction: column;
    }

    .works_target{
        margin-bottom: 15px;
    }
}

@media screen and (max-width: 400px) {
    .works .section_top::after {
        width: 100px;
        left: 10px;
        top: -350px;
    }
}

/* option */

.option{
    padding-top: 150px;
    position: relative;
}

.option::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url(../img/watercolor.webp);
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.3;
  z-index: -1;
}

.option .section_top{
    position: relative;
}

.option .section_top::before{
    content: "";
    position: absolute;
    right: 50%;
    top: 110px;
    width: 66px;
    height: 80px;
    background-image: url(../img/hamburger_leaf.svg);
    background-size: contain;
    background-repeat: no-repeat;
    transform: scaleX(-1) translateX(-400px);
}

.option .section_top::after{
    content: "";
    position: absolute;
    left: 50%;
    top: 110px;
    width: 66px;
    height: 80px;
    background-image: url(../img/hamburger_leaf.svg);
    background-size: contain;
    background-repeat: no-repeat;
    transform: translateX(-400px);
}

.option_wrapper ul {
  display: grid;
  grid-template-columns: repeat(3, 300px);
  gap:50px;
  justify-content: center;
  align-items: center;
  padding: 60px 0 60px;
}

.option_wrapper ul li{
    width: 300px;
    height: 300px;
    border: 2px solid var(--main_color);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 1.75rem;
    background-color: var(--base_color);
}

.option_text{
    font-size: 1.75rem;
    text-align: center;
}

.option_bottom{
    overflow: hidden;
    display: flex;
    justify-content: center;
    position: relative;
    padding-top: 100px;
    left: -50px;
    width: calc(100vw + 100px);
}

.option_bottom::before{
    content:"";
    display: inline-block;
    width: 74px;
    height: 40px;
    background-image: url(../img/plan_leaf.svg);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    bottom: 95px;
    left: 50%;
    transform: translateX(-700px);
}

.option_bottom::after{
    content:"";
    display: inline-block;
    width: 122px;
    height: 83px;
    background-image: url(../img/plan_car.svg);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    bottom: 95px;
    right: 50%;
    transform: translateX(700px);
}

@media screen and (max-width: 1590px) {
    .option .contact_form{
        transform: scale(1.2);
    }
}

@media screen and (max-width: 1250px) {
    .option .section_top::before {
        top: 100px;
        width: 40px;
        transform: scaleX(-1) translateX(-260px);
    }

    .option .section_top::after {
        top: 100px;
        width: 40px;
        transform: translateX(-260px);
    }

    .option_wrapper{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .option_wrapper ul{
        width: 100%; 
        grid-template-columns: repeat(3, 200px);
        gap: 30px;
    }

    .option_wrapper ul li {
    width: 200px;
    height: 200px;
    border: 2px solid var(--main_color);
    border-radius: 12px;
    font-size: 1.75rem;
    }

    .option_wrapper ul li img{
        width: 100px;
        height: 100px;
        padding-top: 10px;
        line-height: 1.3;
        font-size: 16px;
    }

    .option_text{
        font-size: 1.5rem;
    }

    .option_bottom::before {
        transform: translateX(-350px);
    }

    .option_bottom::after {
        transform: translateX(500px);
    }
}

@media screen and (max-width: 1105px) {
    .option .contact_form{
        transform: scale(1.5);
    }
}

@media  screen and (max-width: 900px) {
    .option_wrapper ul{
        grid-template-columns: repeat(auto-fill, 200px);
    }

}

@media screen and (max-width: 840px) {
        .option .contact_form{
        transform: scale(1);
    }
}

@media screen and (max-width: 670px) {
    .contact_form::before {
        left: -10px;
        top: -10px;
    }

    .contact_form::after {
        right: -10px;
    }

    .option_bottom img{
        height: 50px;
    }

    .option_bottom::before {
        transform: translateX(-150px);
        bottom: 40px;
    }

    .option_bottom::after {
        transform: translateX(300px);
        width: 90px;
        bottom: 20px;
    }
}

@media screen and (max-width: 560px) {
    .option{
        padding-top: 120px;
    }

    .option_wrapper ul{
        padding: 20px 0 40px;
    }

    .option .section_top::before {
        top: 80px;
        width: 40px;
        transform: scaleX(-1) translateX(-200px);
    }

    .option .section_top::after {
        top: 80px;
        width: 40px;
        transform: translateX(-200px);
    }

    .option_wrapper ul{
        grid-template-columns: repeat(auto-fill, 170px);
    }

    .option_wrapper ul li{
        width: 170px;
        height: 170px;
    }

    .option_wrapper ul li img{
        padding-top: 0;
    }

    .option_wrapper ul li p{
        font-size: 1.25rem;
        padding-top: 10px;
    }

    .option_text{
        font-size: 1.25rem;
    }

    .option .contact_form_wrapper{
        transform: scale(1.3);
    }

    .option .contact_form::before {
        left: -10px;
        top: -5px;
    }

    .option .contact_form::after {
        right: -10px;
        bottom: -5px;
    }
}

@media screen and (max-width: 450px) {
    .option_wrapper ul {
        gap: 10px;
    }

    .contact .contact_form p:nth-of-type(2) {
        opacity: 0.85;
    }

    .option_bottom::before {
        transform: translateX(-120px);
    }

    .option_bottom::after {
        transform: translateX(230px);
    }
}

@media screen and (max-width: 390px) {
    .option_wrapper ul {
        grid-template-columns: repeat(auto-fill, 150px);
    }

    .option_wrapper ul li {
        width: 150px;
        height: 150px;
    }

    .option_wrapper ul li img {
        width: 85px;
        height: 85px;
    }

    .option_wrapper .contact_form_wrapper{
        transform: scale(1);
    }
}

/* FAQ */

.faq{
    height: 100%;
    padding-top: 150px;
    padding-bottom: 150px;
    display: flex;
    flex-direction: column;
    position: relative;
}

.faq::after{
    content: "";
    position: absolute;
    background-image: url(../img/watercolor.webp);
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0.3;
    z-index: -1;
    inset: 0px;
    height: calc(100% + 200px);
}

.faq::before{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 500px;
    left: 0;
    background-image: url('../img/faq_dotted_line.svg');
    background-repeat: no-repeat;
    background-position: top center;
    z-index: -1;
}

.decorated_span_1{
    content: "";
    position: absolute;
    right: 0;
    top: -10px;
    width: 144px;
    height: 367px;
    background-image: url(../img/leaf_big.svg);
    background-size: contain;
    background-repeat: no-repeat;
    transform: rotate(90deg);
    z-index: -1;
}

.decorated_span_2{
    content: "";
    position: absolute;
    left: 0;
    top: 1000px;
    width: 144px;
    height: 367px;
    background-image: url(../img/leaf_big.svg);
    background-size: contain;
    background-repeat: no-repeat;
    transform: rotate(-90deg) scaleX(-1);
    z-index: -1;
}

.decorated_span_3{
    content: "";
    position: absolute;
    right: 250px;
    top: 1500px;
    width: 144px;
    height: 367px;
    background-image: url(../img/hamburger_leaf.svg);
    background-size: contain;
    background-repeat: no-repeat;
    transform: scaleX(-1);
    z-index: -1;
}

.faq .section_top{
    padding-bottom: 90px;
}

.faq_wrapper{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.faq_btn ul{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
}

.faq_btn ul li:hover button{
    background: var(--accent_linear);
    color: var(--base_color);
}

.faq_btn ul li button{
    width: 100%;
    height:100%;
    border: 1px solid var(--accent_color);
    border-radius: 12px;
    background-color: var(--base_color);
    padding: 7px 20px;
    cursor: pointer;
    transition: all 0.5s ease;
}

.faq_contents{
    height: 100%;
    width: min(1200px, 100%);
    display: none;
}

.faq .faqOpen{
    display: block;
}

.faq h3{
    font-size: 2.25rem;
    text-align: center;
    padding-top: 70px;
    position: relative;
    margin-bottom: 77px;
}

.faq h3::before{
    content: "";
    display: inline-block;
    width: 100px;
    height: 2px;
    background-color: var(--main_color);
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
}

.faq_question {
    display: flex;
    justify-content: left;
    align-items: center;
    border: 2px solid var(--main_color);
    border-radius: 12px;
    background: var(--main_linear);
    background-size: 0% 100%;
    background-repeat: no-repeat;
    background-position: left center;
    transition: background-size 0.4s ease, color 0.4s ease;
    color: inherit;
}

/* .faq_question {
  background-image: url('../img/works_background_orange.webp');
  background-repeat: no-repeat;
  background-size: 0% 100%;            
  background-position: left center;    
  background-color: var(--main_linear); 
  transition: background-size 0.4s ease, color 0.4s ease;
  color: inherit;
} */


.faq_question .faq_question_text{
    font-size: 1.5rem;
    background-color: var(--base_color);
}

.faq_open .faq_question .faq_question_text{
    background-color: transparent;
}

.faq_open .faq_answer .faq_question_text{
    border-left: 2px solid var(--main_color);
    padding: 25px 40px;
    color:var(--text_color);
    line-height: 1.4;
}

/* 共通設定 */
.faq_contents ul li {
    margin-bottom: 30px;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.faq_question {
    height: 100%;
    display: flex;
    align-items: stretch;
    border: 2px solid var(--main_color);
    border-radius: 12px;
    overflow: hidden;
}

.faq_question_qa {
  width: 100px;
  background: var(--main_linear);
  font-size: 2.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px 0 0 10px;
}

.faq_question_text {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 32px 40px;
  /* font-size: 1.5rem; */
}

/* プラスボタン */
.faq_btn_plus button {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: var(--accent_linear);
  position: relative;
  cursor: pointer;
}

.faq_btn_plus .bar {
  position: absolute;
  background-color: white;
  border-radius: 2px;
}

.faq_btn_plus .horizontal {
  width: 20px;
  height: 3px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.3s ease;
}

.faq_btn_plus .vertical {
  width: 3px;
  height: 20px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.3s ease;
}

/* 回答部分（初期状態は非表示） */
.faq_answer {
  display: none;
  border: 2px solid var(--main_color);
  border-radius: 0 0 12px 12px;
  margin-top: -2px;
  /* padding: 20px 40px; */
  line-height: 1.5;
  background: #fff;
}

/* 表示時 */
.faq_open .faq_answer {
  display: flex;
  flex-direction: row;
  align-items: center;
  /* gap: 16px; */
}

.faq_open .faq_question {
  background-size: 100% 100%;
  color: var(--base_color);
  border-radius: 12px 12px 0 0;
  border-bottom: none;
}

.faq_open .faq_question_qa {
  background: none;
}

.faq_open .faq_question_text {
  border-left: 2px solid #FCD9C1;
  padding: 32px 40px;
  color: var(--base_color);
}

.faq_open .faq_btn_plus .horizontal{
    transform: translate(-50%, -50%) rotate(-180deg);
}

.faq_open .faq_btn_plus .vertical {
  opacity: 0; /* マイナス記号にする */
  transform: translate(-50%, -50%) rotate(450deg);
}

.faq_open .faq_btn_plus button {
  background: #A56238;
}


@media screen and (max-width: 1250px) {
    .decorated_span_1,
    .decorated_span_2{
        width: 100px;
    }

    .decorated_span_1{
        transform: rotate(90deg) scaleX(-1);
        top: -100px;;
    }

    .decorated_span_3{
        right: 0;
        width: 70px;
    }
}

@media screen and (max-width: 1050px) {
    .faq{
        padding-bottom: 100px;
    }

    .faq .section_top{
        padding-bottom: 70px;
    }

    .faq h3{
        padding-top: 60px;
    }

    .faq_btn ul{
        display: grid;
        grid-template-columns: repeat(2, 232px);
        gap: 15px;
    }
}

@media screen and (max-width: 840px) {
    .faq h3{
        font-size: 2rem;
    }

    .faq_question_qa{
        font-size: 2.125rem;
    }

    .faq_question_text{
        padding: 25px 30px;
    }

    .faq_question .faq_question_text{
        font-size: 1.25rem;
    }

    .faq_open .faq_question_text {
        padding: 25px 30px;
    }
}

@media screen and (max-width: 670px) {
    .faq{
        padding-top: 140px;
        padding-bottom: 60px;
    }

    .faq .section_top{
        padding-bottom: 30px;
    }

    .faq h3{
        margin-bottom: 60px;
    }
}

@media screen and (max-width: 640px) {
    .faq h3{
        font-size: 1.5rem;
    }

    .faq_question_qa{
        width: 50px;
        border-radius: 8px 0 0 8px;
    }

    .faq_question .faq_question_text,
    .faq_open .faq_answer .faq_question_text {
        font-size: 1rem;
        padding: 15px;
    }

    .faq_open .faq_answer .faq_question_text {
        border-left: 1px solid var(--main_color)
    }

    .faq_btn_plus button {
        width: 25px;
        height: 25px;
    }

    .faq_btn_plus .vertical {
        width: 2px;
        height: 12px;
    }

    .faq_btn_plus .horizontal {
        width: 12px;
        height: 2px;
    }
}

@media screen and (max-width: 600px) {
    .faq_btn ul{
        display: flex;
        flex-direction: column;
    }

    .faq_btn ul li button{
        width: 232px;
    }
}


/* contact */
.contact{
    background-image: url('../img/works_background_orange.webp');
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 140px;
    padding-bottom: 140px;
    border-radius: 120px 120px 0 0;
}

.contact_form_wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 40px;
    position: relative;
    z-index: 0;
}

.contact .contact_form_wrapper::before{
    content: "";
    position: absolute;
    right: 0;
    top: -10px;
    width: 144px;
    height: 367px;
    background-image: url(../img/leaf_big.svg);
    background-size: contain;
    background-repeat: no-repeat;
    transform: rotate(90deg);
    z-index: -1;
}

.contact .contact_form_wrapper::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 144px;
    height: 367px;
    background-image: url(../img/leaf_big.svg);
    background-size: contain;
    background-repeat: no-repeat;
    transform: rotate(-90deg);
    z-index: -1;
}

.contact_form_form{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: min(1100px, 100%);
    background-color: var(--base_color);
    border-radius: 12px;
    padding: 100px 160px;
    margin: 0 auto;
}

.contact_form_form .label_title{
    display: flex;
    align-items: center;
}

.contact_form_form label{
    width: 100%;
    font-size: 1.25rem;
}

.contact_form_form .required{
    background: var(--accent_linear);
    color: var(--base_color);
    font-size: 0.75rem;
    padding: 4px 9px 5px;
    border-radius: 12px;
    margin-top: 3px;
    margin-left: 20px;
}

.contact_form_form input,
.contact_form_form textarea{
    width: 100%;
    margin: 15px 0 30px;
    padding: 20px 40px 14px;
    border-radius: 12px;
    border: 2px solid var(--main_color);
    background-color: #F9F6F2;
}

.contact_form_form textarea{
    margin-bottom: 0;
    height: 250px;
}

input::placeholder,
textarea::placeholder {
  color: var(--text_color);
  font-size: 1rem;
  opacity: 0.4; 
}

.contact_checkboxes {
  display: flex;
  flex-direction: column;
  align-items: flex-start; 
  font-size: 1.25rem;
  padding-bottom: 35px;
}

.contact_checkboxes label {
  display: flex;
  /* align-items: center; */
  justify-content: left;
  gap: 12px;
  cursor: pointer;
  padding-top: 12px;
  line-height: 1.4;
}

.contact_checkboxes label:nth-of-type(1){
    padding-top: 15px;
}

.contact_checkboxes .label_title .multiple{
    font-size: 16px;
}

.contact_checkboxes_text{
    font-size: 1rem;
}

.contact_checkboxes input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 14px;
  height: 14px;
  min-width: 14px;
  min-height: 14px;
  max-width: 14px;
  max-height: 14px;
  border: 2px solid #F5953B;
  border-radius: 50%;
  background-color: #fff;
  cursor: pointer;
  display: inline-block;
  box-sizing: border-box;
  vertical-align: middle;
  margin: 0;
  padding: 0;
  transform: translateY(4px);
}


.contact_checkboxes input[type="checkbox"]:checked {
    background-color: #3b2e26;
    border-color: #F5953B;
}

.contact_checkboxes input[type="text"],
.contact_checkboxes textarea {
  font-size: 1.25rem;                      
  color: var(--text_color);                       
  padding: 10px;
  width: 100%;
}

.submit_before{
    text-align: center;
    padding: 70px 0 35px;
    font-size: 1.25rem;
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

.submit_before span{
    display: block;
}

.contact_submit{
    text-align: center;
    margin: 0 auto;
}

.contact_submit input{
    width: 280px;
    height: 85px;
    border-radius: 12px;
    border: none;
    background-image: url('../img/background_green.webp');
    background-repeat: no-repeat;
    /* background-size: cover; */
    color: var(--base_color);
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    padding:0;
    margin: 0;
}

.contact_submit input:hover{
    background: var(--base_color);
    color: var(--accent_color);
    border: 2px solid var(--accent_color);
    font-size: 1.7em;
}

@media screen and (max-width: 1250px) {
    .contact{
        border-radius: 80px 80px 0 0;
    }

    .contact_form_form{
        max-width: 800px;
        padding-top: 100px;
        padding-bottom: 100px;
        padding-left: clamp(15px, 6vw, 160px);
        padding-right: clamp(15px, 6vw, 160px);
    }
}

@media screen and (max-width: 840px) {
    .contact{
        border-radius: 50px 50px 0 0;
    }

    .contact_form_form{
        padding-top: 70px;
        padding-bottom: 70px;
    }

    .submit_before{
        padding: 50px 0 35px;
        font-size: 1rem;
    }

    .contact_submit input{
        width: 144px;
        height: 50px;
        font-size: 1.2rem;
        border-radius: 10px;
    }
}

@media screen and (max-width: 640px) {
    .contact{
        padding-top: 120px;
    }

    .contact_form_form{
        padding-left: 15px;
        padding-right: 15px;
    }

    .contact_form_form input, .contact_form_form textarea {
        width: 100%;
        margin: 15px 0 30px;
        padding: 20px 20px 14px;
    }

    .contact_form_form textarea {
        margin-bottom: 0;
        height: 250px;
    }

    .contact_submit input{
        width: 144px;
        padding: 0;
        margin: 0;
    }
}

@media screen and (max-width: 560px) {
    .contact_form_wrapper{
        transform: scale(1);
    }

    .contact_form_form input, 
    .contact_form_form textarea{
        padding: 12px 20px 12px;
    }

    .contact_submit input{
        padding: 0;
    }
}

@media screen and (max-width: 440px) {
    .br_440{
        display: inline;
    }
}

/* footer */


footer{
    background-color: var(--text_color);
    color: var(--base_color);
}

.footer_leaficon{
    position: relative;
    width: 100vw;
}

.footer_leaficon img{
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
}

.footer_leaficon_span{
    display: flex;
    justify-content: center;
    align-items:end;
    width: fit-content;
    height: 36px;
    gap: 35px;
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
}

.footer_leaficon_span span{
    display: inline-block;
    width: 36px;
    /* height: 36px; */
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: contain;
}

.footer_leaficon span:nth-of-type(1){
    background-image: url(../img/benefit_title.svg);
    height: 13px;
}

.footer_leaficon span:nth-of-type(2){
    background-image: url(../img/feature_title.svg);
    height: 23px;
}

.footer_leaficon span:nth-of-type(3){
    background-image: url(../img/plan_title.svg);
    height: 30px;
}

.footer_leaficon span:nth-of-type(4){
    background-image: url(../img/works_title.svg);
    height: 34px;
}

.footer_leaficon span:nth-of-type(5){
    background-image: url(../img/option_title.svg);
    height: 35px;
}

.footer_leaficon span:nth-of-type(6){
    background-image: url(../img/faq_title.svg);
    height: 33px;
}

.footer_leaficon span:nth-of-type(7){
    background-image: url(../img/contact_title.svg);
    height: 40px;
    width: 40px;
}

.footer_wrapper{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 100px 80px 40px;
}

.footer_top{
    text-align: center;
}

.footer_top img:nth-of-type(2){
    display: none;
}

.footer_top p{
    font-size: 1.25rem;
}

.footer_menu{
    padding: 55px 0 70px;
}

.footer_menu ul{
    display: flex;
    gap: 30px;
}

.footer_menu ul li a{
    transition: all 0.3s ease;
}

.footer_menu ul li:hover a{
    color: var(--main_color);
}

.footer_icon{
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: var(--main_linear);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 35px;
}

.footer_icon .insta_circle_btn{
    background-color: var(--main_color);
}

.footer_icon .sns_button{
    position: absolute;
    right: 180px;
    top: 78px;
    color: var(--base_color);
}

.footer_icon .insta_circle_btn:hover {
  background-color: var(--base_color);
  border: 1px solid var(--main_color);
}

.footer_icon .insta_circle_btn:hover svg{
    color: var(--main_color);
}

footer small{
    opacity: 0.5;
}

@media screen and (max-width: 1250px) {
    .footer_top{
        text-align: left;
    }

    .footer_top img:nth-of-type(1){
        display: none;
    }

    .footer_top img:nth-of-type(2){
        display: block;
    }

    .footer_wrapper{
        align-items: start;
    }

    .footer_menu ul{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .footer_menu ul li {
    display: flex;
    align-items: center;
    gap: 8px; /* マークとテキストの間隔 */
    position: relative;
    }

    .footer_menu ul li::before,
    .footer_menu ul li::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    }

    .footer_menu ul li::before {
    width: 12px;
    height: 12px;
    background-color: var(--main_color);
    opacity: 0.3;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    }

    .footer_menu ul li::after {
    width: 6px;
    height: 6px;
    background-color: var(--main_color);
    left: 3px;
    top: 50%;
    transform: translateY(-50%);
    }

    /* 左のマーク分だけテキストを右にずらす */
    .footer_menu ul li {
    padding-left: 20px; /* before/afterが重ならないように調整 */
    }
}

@media screen and (max-width: 700px) {
    .footer_wrapper{
        padding: 60px 40px 60px;
        position: relative;
        z-index: 1;
    }

    .contact_flex_btn{
        display: none;
    }

    .footer_top img:nth-of-type(2) {
        width: 260px;
    }

    .footer_top p {
        font-size: 1rem;
    }

    footer small{
        font-size: 0.75rem;
    }

    .footer_icon{
        width: 36px;
        height: 36px;
    }

    .insta_circle_btn{
        transform: scale(0.8);
    }
}

@media screen and (max-width: 640px){
    .footer_leaficon_span{
        gap: 20px;
    }
}

@media screen and (max-width: 460px) {
    .footer_leaficon_span{
        gap: 15px;
    }
}

@media screen and (max-width: 360px) {
    .footer_wrapper{
        padding: 60px 20px 60px;
    }

    .footer_leaficon_span{
        gap: 10px;
    }
}