/* リセットとベーススタイル-- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* 共通 */

.sp_only {
  display: none;
}
.pc_only {
  display: block;
}
picture {
    display: block;
}
#responsive-image {
    /* width: 80% !important; */
    display: block;
    margin: 0 auto;
}
body {
    font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background-color: #ffffff;
    color: #000000;
    line-height: 1.6;
    /* background: url(https://nr-mix.co.jp/img/all_bg.jpg) top center fixed; */
overflow-x: hidden;
}


img {
    max-width: 100%;
    height: auto;
    display: block;
}

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 0 auto;
    margin-top: 100px;
}
.container_inner {
    max-width: 1440px;
    padding: 0 20px;
    box-sizing: border-box;
}

/* ヒーローセクション */
.hero {
    width: 100%;
    background-color: #ffffff;
}
.hero picture {
  display: block;
  width: 100%;
}
.hero img {
  width: 100%;
  height: auto;
  max-width: 100%;
  display: block;
}
.hero-image {
    width: 100%;
    height: auto;
}
.Arrow {
  width: 100%;
  max-width: 1440px;
  height: auto;
  display: block;
  margin: 0 auto; /* 中央寄せしたい場合 */
  image-rendering: auto; /* 拡大時にぼかしを自然に */
}




/* タイトルセクション */
.title-section {
    padding: 30px;
    background-color: #ffffff;
}
.title-section .title-box {
    position: relative;
    text-align: center;
}
.title-images {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 30px;
}

.title-section .title-bg {
    width: 80%;
    height: auto;
    margin: 30px 0;
}
.title-section .title {
    font-size: 40px;
    font-weight: 900;
    letter-spacing: 3.2px;
    line-height: 1.4;
    border-left:none;
}
.title-section .title-highlight {
    color: #00a99d;
}
.title-section .title-text {
    color: #000000;
}

/* メリットセクション（緑ボックス） */
.benefits-section {
    background-color: #00a99d;
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 90%;
    margin: 0 auto 40px;
}
.benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}
.check-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}
.benefit-text {
    color: #ffffff;
    font-size: 34px;
    font-weight: 900;
    /* letter-spacing: -0.1em; */
    line-height: 1.6;
}

/* メリットセクション（画像） */
.merit-img {
    width: 100%;
    margin: 10px 0;
}

/* こんなお悩みありませんか？ */
.worry-section {
    padding: 30px 5px;
    background-color: #00A99D;
    text-align: center;
    border-radius: 120px;
    margin-bottom: 20px;
    width: 90%;
    margin: 0 auto;
}
.worry-title {
    font-size: 34px;
    font-weight: 900;
    color: #FFFFFF;
    letter-spacing: 3.6px;
    line-height: 1.5;
}


/* CTAセクション */
.cta-section {
    /* background-color: #ffffff; */
    padding: 40px 10px;
    text-align: center;
}
.cta-text {
    font-size: 34px;
    font-weight: bold;
    line-height: 1.8;
    color: #000000;
    letter-spacing: 1px;
}
.cta-highlight {
    color: #00a99d;
    font-weight: 700;
}
.cta-btn {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    gap: 20px;
    align-items: center;
    margin-top: 20px;
}


.img_form {
    width: 100%;
    height: auto;
    margin:20px 0;
}
/* 問題提起セクション */
.problem-section {
    padding: 20px 0;
    width: 90%;
    margin: 0 auto;
    /* background-color: #ffffff; */
}
.problem-card {
    border: 2px solid #00a99d;
    background-color: #ffffff;
    margin: 10px 20px;
}
.card-header {
    background-color: #00a99d;
    padding: 10px 0 10px 30px;
    text-align: center;
    display: flex;
    flex-direction: row;
    justify-content:flex-start;
    align-items: center;
    gap: 10px;
}
/* 駐車場 */
.card-icon {
    width: 120px;
    height: auto;
    margin-top:-40px
}
/* マンション */
.card-icon2 {
    width: 80px;
    height: auto;
    margin-top:-50px
}
/* 太陽光 */
.card-icon3 {
    width: 100px;
    height: auto;
    margin-top:-50px
}
.card-title {
    color: #ffffff;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.5;
}
.problem-list {
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.problem-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}
.problem-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}
.problem-text {
    font-size: 28px;
    font-weight: 900;
    letter-spacing: 3.2px;
    line-height: 1.6;
}

/* 施工後写真 */
.construction-section {
    width: 100%;
}
.construction-image {
    width: 100%;
    height: auto;
}

/* 比較セクション */
.comparison-section {
    padding: 50px 30px;
    /* background-color: #ffffff; */
    text-align: center;
}

.comparison-image {
    max-width: 600px;
    margin: 0 auto 30px;
}

.section-title {
    font-size: 36px;
    font-weight: 900;
    line-height: 1.5;
    margin-bottom: 20px;
}

.section-subtitle {
    font-size: 24px;
    line-height: 1.6;
    color: #333;
}


/* 解決提案セクション */
.solution-section {
    padding: 10px;
    text-align: center;
    /* background-color: #ffffff; */
}

.triangle-icon {
    /* max-width: 150px; */
    margin: 0 auto 30px;
}

.solution-title {
    font-size: 44px;
    font-weight: 700;
    line-height: 1.5;
    margin-bottom: 30px;
}

.solution-emphasis {
    color: #F7931E;
}

.solution-logo {
    /* max-width: 300px; */
    margin: 30px auto 0;
}

/* オワコンとは？セクション */
.about-section {
    padding: 50px 20px;
    /* background-color: #ffffff; */
}
.about-header {
    text-align: center;
    margin-bottom: 50px;
}
.about-title {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.6;
    margin-bottom: 20px;
}
.about-subtitle {
    font-size: 36px;
    font-weight: 900;
}

/* 5つの特徴 */
.features-grid {
    display: flex;
    flex-direction: column;
    max-width: 1200px;
    margin: 0 auto;

    /* background-color: rgb(220, 218, 218); */
}

.feature-card {
    position: relative;
    padding: 40px 0 20px 0;
}

.feature-number {
    font-size: 80px;
    font-weight: 800;
    color: #00a99d;
    font-family: "NanumMyeongjo", serif;
    letter-spacing: 10.8px;
    line-height: 1;
    /* margin-bottom: 10px;
    margin-top: -50px; */
    transform: scaleY(1.3);
    position:absolute;
    top:0;
    left:0;
    z-index: 100;
}
.feature-card_inner {
    border: 1px solid #00a99d;
    background-color: #ffffff;
    padding: 20px 15px 30px 15px;
    /* position: relative; */
    /* z-index: 1; */
}

.feature-title {
    font-size: 34px;
    font-weight: 700;
    color: #00a99d;
    /* letter-spacing: 1; */
    margin-left: 40px;
    margin-bottom: 15px;
}

.feature-text {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 2.8px;
    line-height: 1.6;
    padding-top: 10px;
}

/* オワコン動画 */

#owacon-video-area {
  position: relative;
  width: 100%;
  max-width:1440px;
  aspect-ratio: 16 / 9;
  /* height: 100vh; 画面全体に表示する場合。任意で変更可 */
  /* background-color: #000; 黒背景で余白が目立たないように */
  /* overflow: hidden; */
}
#owacon-video-area video {
  width: 100%;
  height: auto;
  object-fit: cover; /* 全体を縮小して収める（切れない） */
  object-position: center;
}

/* コスト比較セクション */
.cost-comparison-section {
    padding: 50px 20px;
    /* background-color: #ffffff; */
}
/* コストを徹底比較 */
.comparison-header {
    padding: 30px 5px;
    background-color: #00A99D;
    text-align: center;
    border-radius: 120px;
    width: 90%  ;
    margin: 0 auto;
}
.comparison-header p {
    font-size: 28px;
    font-weight: 900;
    color: #FFFFFF;
    /* letter-spacing: 3.6px;
    line-height: 1.5; */
}

/* 価格表 */
.price-table-wrapper {
  overflow-x: auto;
  padding: 20px;
  /* border: 1px dashed #c9aef1; 
  padding: 8px;} */
}
.price-table {
  display: table;
  border-collapse: separate; /* ← 行間を空けるために「collapse」ではなく「separate」 */
  border-spacing: 0 10px; /* ← 行間（上下の余白）を設定 */
  min-width: 600px;
  width: 100%;
  font-size: 24px;
}

.table-row {
display: table-row;
}

.table-row:last-child {
    border-bottom: none;
}

.header-row {
    background-color: #00a99d;
    color: #ffffff;
    font-weight: 700;
}
/* ヘッダー行 */
.header-row .table-cell {
  background: #f0f0f0;
  font-weight: bold;
  color: #000;
}

.table-cell {
  display: table-cell;
  border: 1px solid #ccc;
  padding: 12px;
  text-align: center;
  white-space: nowrap;
  background: #fff;
}
/* 左列を固定 */
.sticky-cell {
  position: sticky;
  left: 0;
  background: #f8f8f8;
  z-index: 2;
  font-weight: bold;
}





.table-cell:last-child {
    border-right: none;
}

.table-cell.highlight {
    background-color: #FFDEDE;
    font-weight: 700;
    color: #000;
}

.price-note {
    font-size: 24px;
    text-align: left;
    color: #666;
    margin: 20px 0 0 60px;
    line-height: 1.6;
}

.price-note2 {
    font-size: 28px;
    font-weight: bold;
    line-height: 1.8;
    color: #000000;
    text-align: center;
    letter-spacing: -0.1em;
    padding-top: 20px;
}



/* what is owacon */
/* 青枠　オワコンオコシコンと */
.sec_what_is_owacon  {
  border: 2px solid;
  border-color:#007bc6;;
  width :90%;
  margin: 0 auto 50px;

}
.sec_what_is_owacon .what_is_owacon_box {
  background-color: #007bc6;
  padding: 20px 0;
} 

.what_is_owacon_box .text-1 {
  color:#fff;
  font-size: 28px;
  font-weight: 990;
  /* line-height: normal; */
  text-align: center;
  padding: 10px;
}
/* youtube枠 */
.by_youtube_box {
  width: 100%;
  padding: 20px 10px;
  background-color: #ffffff ;
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
.by_youtube_box .box1{
    width: 45%  ;
}
.by_youtube_box .box2{
    width: 55%  ;

}



/* YOUTUBEで紹介いただきました　画像 */
.introduced_by_youtube {
  width: 100%;
  padding: 10px 20px;
}
.introduced_by_youtube .txt_image {
  width: 100%;
  height: auto;
  display: block;
}
/* YOUTUBE貼付け */
.youtube_enbed {
  aspect-ratio: 16 / 9;
}
.youtube_enbed iframe{
  width: 100%;
  height: 100%;
}
/* 文章 */
.sec_what_is_owacon .description {
  width: 100%;
  padding: 10px;
}
.sec_what_is_owacon .text_label {
  color:#000;
  font-weight: 700;
  /* font-family: var(--font-family-noto_sans_jp); */
  font-size:18px;
  /* line-height: 1.5; */
  padding: 10px 5px;
}
.text_label .span-1 {
  letter-spacing: 0.63px;
}
.text_label .span-2 {
  color: #720000;
  letter-spacing: 0.63px;
}

 /* 選ばれる理由まとめ */
.summary-section {
    padding: 50px 10px;
    background-color: #fff;
    text-align: center;
    /* width: 90%;
    margin: 0 auto; */
}
.summary-title {
    font-size: 30px;
    font-weight: 900;
    line-height: 1.5;
    width: 90%;
    margin: 0 auto;
    margin-bottom: 30px;
}
.summary-text {
    font-size: 20px;
    line-height: 1.8;
    letter-spacing: 1.2px;
    color: #272727;
    margin-bottom: 40px;
}
.cost-block {
    background-color: #f8f8f8;
    border: 2px solid #00a99d;
    /* padding: 30px; */
    margin-bottom: 30px;
    width: 90%;
    margin: 0 auto 30px;
}
.cost-block-title {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 20px;
    background-color: #00a99d;
    color: #ffffff;
    padding: 15px;
}
.cost-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 15px;
    margin-left:20px;
}
.check-icon-small {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}
.cost-item p {
    font-size: 28px;
    font-weight: bold;
    line-height: 1.6;
    text-align: left;
    letter-spacing: 0.1em;
}

/* 雑草対策の最適解オワコン */
.optimal_solution {
    background-color: #ffffff;
    text-align: center;
}
.solution_subtitle {
    background-color: #071635;
    color: #ffffff;
    font-size: 34px;
    font-weight: 900;
    margin-bottom: 30px;
    padding: 30px 0;
}
.optimal_solution p {
    font-size: 16px;
    letter-spacing: 0.9px;
    line-height: 1.5;
    text-align: left;
    padding: 20px;
}
.solution_image_box {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding:30px ;
    width: 100%;
    text-align: center;
    margin-bottom: 30px;
}
.solution_image_box .solution_image {
    width:45%;
}    
.solution_image_box .small_image {
    max-width: 300px;
    width: 80px;
    height: AUTO;
    display: block;
    margin: 0 auto;
    padding: 10px;
} 
/* よくある質問 */
.faq-section {
    padding: 50px 20px;
    background-color: #ffffff;
    width: 90%;
    margin: 0 auto 50px;
}
.faq-title {
    border: #00a99d 3px solid;
    border-radius: 120px;    
    font-size: 40px;
    font-weight: 900;
    text-align: center;
    margin-bottom: 50px;
    color: #00a99d;
    width: 100%;
    padding: 15px;
}
.faq-item {
    background-color: #eff9f9;
    margin-bottom: 20px;
    padding: 30px;
    border-radius: 8px;
}
.faq-question {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 20px;
}
.q-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}
.question-text {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 1.92px;
}
.faq-answer {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    /* padding-left: 80px; */
}
.a-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}
.answer-text {
    font-size: 28px;
    line-height: 1.6;
    letter-spacing: 1.44px;
}
/* アコーディオン版FAQ */
/* FAQセクション */
.faq-section {
    padding: 60px 20px;
    max-width: 1200px;
    margin: 0 auto;
}
.faq-title {
    font-size: 32px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 40px;
    color: #333;
}
/* アコーディオン */
.faq-accordion {
    background: rgba(255, 255, 255, 0.5);
    padding: 30px;
    width: 100%;
}
.faq-option {
    position: relative;
    margin-bottom: 10px;
}
/* チェックボックスを非表示 */
.faq-toggle {
    display: none;
}
/* 質問部分（クリック可能） */
.faq-question-label {
    border: solid 1px #ccc;
    background: #fff;
    margin: 0;
    padding: 15px 50px 15px 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #333;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    position: relative;
    transition: background 0.3s;
}
.faq-question-label:hover {
    background: #f5f5f5;
}
/* 開閉アイコン（矢印）追加 */
.faq-question-label::after {
    content: "▼";
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    transition: transform 0.3s;
}
.faq-toggle:checked + .faq-question-label::after {
    transform: translateY(-50%) rotate(180deg);
}
/* Q/Aアイコン */
.q-icon,
.a-icon {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
}
.question-text {
    flex: 1;
}
/* 答え部分（アコーディオンコンテンツ） */
.faq-answer-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease;
    border-left: solid 1px #ccc;
    border-right: solid 1px #ccc;
    border-bottom: solid 1px #ccc;
    background: #fff;
            background-color: #eff9f9;

}
.faq-toggle:checked + .faq-question-label + .faq-answer-content {
    max-height: 500px;
    transition: max-height 1s ease;
}
.faq-answer-content {
    padding: 0 15px;
}
.faq-toggle:checked + .faq-question-label + .faq-answer-content {
    padding: 20px 15px;
}
.faq-answer-content .a-icon {
    margin-right: 10px;
    vertical-align: middle;
}
.answer-text {
    display: inline;
    margin: 0;
    line-height: 1.8;
    color: #555;
}





/* 見積もり３ステップ */
.sec_3step {
    width:90%;
    margin: 0 auto;
    padding: 10px;
    background-color: #ffffff ;
}
.sec_3step .sec_title {
    border: #00a99d 3px solid;
    border-radius: 120px;
    font-size: 40px;  color: #000;
    font-weight: 700;
    left: 34px;
    letter-spacing: 2.88px;
    line-height: normal;
    text-align: center;
    padding: 20px;
}
.sec_3step .span1-1 {
  color: #f7931e;
  font-size: 40px;
  letter-spacing: 2.69px;
}
.sec_3step .step_description {
  color:#000;
  letter-spacing: 2.24px;
  line-height: 1.5;
  padding: 30px 10px;
  font-size: 20px;
}
.step_cards .pc_step{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.step_cards .pc_only{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}


/* 施工後セクション */
.after-section {
    padding: 50px 10px 0 10px;
    text-align: center;
    background-color: #ffffff;
}
.after-image {
    max-width: 600px;
    margin: 0 auto;
    width: 100%;
}

/* お問い合わせセクション */
.contact-section {
    padding: 40px 30px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
}
.contact-form-button,
.contact-line-button {
    max-width: 700px;
    width: 100%;
    cursor: pointer;
    transition: transform 0.2s;
}
.contact-form-button:hover,
.contact-line-button:hover {
    transform: scale(1.02);
}

/* レスポンシブ対応 */
/* @media (max-width: 768px) {
    .title {
        font-size: 24px;
    }

    .benefit-text {
        font-size: 24px;
    }

    .problem-text {
        font-size: 24px;
    }

    .feature-number {
        font-size: 80px;
    }

    .feature-title {
        font-size: 32px;
    }

    .feature-text {
        font-size: 20px;
    }

    .table-cell {
        font-size: 14px;
        padding: 10px;
    }

    .question-text {
        font-size: 22px;
    }

    .answer-text {
        font-size: 18px;
    }

    .faq-answer {
        padding-left: 0;
    }
} */

/* @media (max-width: 480px) {
    .benefit-text {
        font-size: 20px;
    }

    .problem-text {
        font-size: 18px;
        font-weight: bold;
    }

    .feature-number {
        font-size: 60px;
    }

    .feature-title {
        font-size: 24px;
    }

    .feature-text {
        font-size: 18px;
    }

    .step-text {
        font-size: 20px;
    }
} */