/* 全体のスタイル */
body {
margin: 0;
padding: 0;
color: #333;
line-height: 1.6;
background-color: #ffffff;
}

header#masthead ,.main-header  {
    display: none;
}

* {
box-sizing: border-box;
}

/* コンテナ */
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}

/* セクション共通 */
section {
padding: 40px 0;
position: relative;
}

h2 {
font-size: 28px;
text-align: center;
margin-bottom: 40px;
color: #333;
font-weight: bold;
position: relative;
padding-bottom: 15px;
}

h2:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 3px;
background: #6CB86E;
border-radius: 2px;
}

h3 {
font-size: 22px;
color: #333;
margin-bottom: 20px;
}

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

/* ヘッダー */
header {
background: #fff;
padding: 15px 0;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
position: sticky;
top: 0;
z-index: 1000;
}

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

.logo {
display: flex;
align-items: center;
}

.logo img {
height: 50px;
}

.nav-apply-button {
    display: inline-block;
    padding: 5px 20px;
    font-size: 14px;
    border-radius: 5px;
    background-color: var(--main-color);
    text-decoration: none;
    color: #FFF;
    transition: color 0.3s;
}

.nav-apply-button:hover {
color: #6CB86E;
}

/* ファーストビューセクション */
.hero {
    background-image: url(img/mamecall/fv-bg.jpg);
    background-position: center;
    background-size: cover;
    padding: 80px 0px 50px 0px;
    position: relative;
    color: #333;
}

.hero:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255,255,255,0.4);
z-index: 1;
}

.hero-content {
position: relative;
z-index: 2;
text-align: left;
max-width: 50%;
padding-left: 20px;
}

.hero-logo {
max-width: 200px;
margin: 20px 0;
}

.hero-title {
font-size: 32px;
font-weight: bold;
margin-bottom: 20px;
line-height: 1.4;
}

.hero-title .emphasis {
font-size: 110%;
color: #FF7E00;
position: relative;
display: inline-block;
}

.hero-title .emphasis:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 8px;
background-color: rgba(255, 126, 0, 0.2);
z-index: -1;
}

.hero-price {
font-size: 18px;
margin: 20px 0 0px;
font-weight: bold;
display: inline-block;
max-width: 80%;
}

/* CTAボタン */
.cta-button {
display: inline-block;
background: linear-gradient(135deg, #FF7E00, #FF9D45);
color: white;
font-size: 20px;
font-weight: bold;
padding: 12px 80px;
border-radius: 5px;
text-decoration: none;
margin: 20px 0;
text-align: center;
box-shadow: 0 5px 15px rgba(255, 126, 0, 0.3);
position: relative;
overflow: hidden;
transition: transform 0.3s, box-shadow 0.3s;
animation: pulse 2s infinite;
}

.hero .cta-button {
max-width: 90%;
width: fit-content;
display: block;
}

.section-cta-button {
display: inline-block;
background: linear-gradient(135deg, #FF7E00, #FF9D45);
color: white;
font-size: 20px;
font-weight: bold;
padding: 15px 30px;
border-radius: 5px;
text-decoration: none;
margin: 20px auto;
text-align: center;
box-shadow: 0 5px 15px rgba(255, 126, 0, 0.3);
position: relative;
overflow: hidden;
transition: transform 0.3s, box-shadow 0.3s;
animation: pulse 2s infinite;
width: 70%;
display: block;
}

.cta-button:hover {
background: linear-gradient(135deg, #FF9D45, #FF7E00);
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(255, 126, 0, 0.4);
}

.cta-button:before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.3), rgba(255,255,255,0));
transform: skewX(-25deg);
animation: shine 3s infinite;
}

@keyframes pulse {
0% {
    transform: scale(1);
}
50% {
    transform: scale(1.02);
}
100% {
    transform: scale(1);
}
}

@keyframes shine {
0% {
    left: -100%;
}
20% {
    left: 100%;
}
100% {
    left: 100%;
}
}

/* 特徴セクション */
.features {
background-color: #f9f9f9;
text-align: center;
padding: 30px 0;
}

.features-container {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}

.feature-item {
width: 33.333%;
padding: 0 10px;
display: flex;
flex-direction: column;
align-items: center;
}

.feature-icon {
width: 120px;
height: 120px;
margin-bottom: 10px;
position: relative;
}

.laurel-wreath {
width: 100%;
height: 100%;
}

.feature-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80px;
font-size: 14px;
font-weight: bold;
text-align: center;
line-height: 1.3;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
.container {
    padding: 0 15px;
}

section {
    padding: 40px 0;
}

h2 {
    font-size: 24px;
    margin-bottom: 30px;
}

.hero:before {
    width: 100%;
}

.hero-content {
    max-width: 100%;
    padding-left: 0;
    text-align: left;
}

.hero-title {
    font-size: 26px;
}

.hero-price {
    text-align: left;
}

.cta-button {
    font-size: 18px;
    padding: 12px 50px;
    margin-top: 10px;
}

.section-cta-button {
    font-size: 18px;
    padding: 12px 30px;
    width: 70%;
    margin-left: auto;
    margin-right: auto;
}

.feature-item {
    width: 33.333%;
    padding: 0 5px;
}

.feature-icon {
    width: 100%;
    height: 90px;
}

.feature-text {
    width: 70px;
    font-size: 13px;
}

.service-feature, .plan, .reason, .testimonial {
    max-width: 100%;
}
}

@media (min-width: 769px) {
    .features-container {
        max-width: 600px;
        margin: 0 auto;
    }
    .feature-text {
        top: 37%;
        width: 100%;
    }
}

/* ここからGemini */
/* --- 基本 & スマホファースト スタイル --- */
:root {
    --main-color: #50a060; /* 少し落ち着いた緑 */
    --main-light-color: #e8f5e9;
    --accent-color: #ff9100; /* 少し鮮やかなオレンジ */
    --accent-light-color: #fff3e0;
    --text-color: #37474f; /* 少し柔らかい黒 */
    --text-light-color: #607d8b;
    --white: #ffffff;
    --gray-bg: #f4f6f8;
    --border-color: #e0e0e0;
    --shadow-color: rgba(0, 0, 0, 0.1);
}

*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: 'Noto Sans JP', sans-serif;
    margin: 0;
    padding: 0;
    color: var(--text-color);
    line-height: 1.75; /* 行間を少し広めに */
    font-size: 16px;
    background-color: var(--white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden; /* 横スクロール防止 */
}

img { max-width: 100%; height: auto; vertical-align: middle; }
a { text-decoration: none; color: var(--main-color); transition: 0.3s; }
a:hover { opacity: 0.7; }
h1, h2, h3 { font-weight: 700; line-height: 1.4; margin: 0 0 0.7em 0; }
h2 { font-size: 1.6rem; font-weight: 900;} /* 25.6px */
h3 { font-size: 1.25rem; } /* 20px */

.container {
    width: 100%;
    max-width: 1140px; /* PC基準の最大幅 */
    margin: 0 auto;
    padding: 0 20px;
}
/* スマホ用コンテナ（幅狭め） */
.container-narrow {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    padding: 0 20px;
}

section {
    padding: 60px 0; /* セクション上下余白 */
    position: relative; /* 区切り要素配置のため */
}
.bg-gray { background-color: var(--gray-bg); }


/* --- セクションタイトル --- */
.section-title {
    text-align: center;
    margin-bottom: 40px;
}
.section-title h2 {
    font-size: 1.5rem; /* 27.2px */
    margin-bottom: 0.3em;
    font-weight: 900;
}
.section-title h2 .highlight { color: var(--main-color); }
.section-title p {
    font-size: 1rem; /* 16px */
    color: var(--text-light-color);
    margin: 0;
    max-width: 600px; /* サブタイトルの最大幅 */
    margin-left: auto;
    margin-right: auto;
}

/* --- 汎用アイコン付きリスト --- */
.icon-list { list-style: none; padding: 0; margin: 0; }
.icon-list li {
    display: flex;
    align-items: flex-start; /* アイコンとテキストの上揃え */
    margin-bottom: 0.8em;
    font-size: 1rem;
}
.icon-list li i {
    color: var(--main-color);
    margin-right: 10px;
    width: 20px;
    text-align: center;
    margin-top: 0.15em; /* アイコン位置微調整 */
}

/* --- お悩みセクション --- */
.problem-item {
    background: var(--white);
    padding: 18px 20px; /* padding調整 */
    margin-bottom: 15px;
    border-radius: 10px; /* 角丸調整 */
    box-shadow: 0 4px 12px var(--shadow-color);
    display: flex;
    align-items: center;
}
.problem-icon {
    font-size: 1.5rem; /* 24px */
    color: var(--main-color);
    margin-right: 15px;
    width: 35px;
    text-align: center;
    flex-shrink: 0;
}
.problem-text { font-size: 1rem; color: var(--text-light-color); line-height: 1.7; }
.problem-text strong { color: var(--main-color); font-weight: 700; }
.arrow-down {
    text-align: center; font-size: 2rem; /* 32px */ color: var(--main-color); margin: 35px 0;
}

/* --- 解決策（まめコールとは） --- */
.solution-image { text-align: center; margin-bottom: 30px; margin: 0 auto; }
.solution-image img { max-width: 300px; margin: 0 auto; }
.solution-text { text-align: center; font-size: 1.05rem; /* 16.8px */ line-height: 1.8; margin-bottom: 30px; }
.solution-text strong { color: var(--main-color); font-weight: 900; }
/* ポイント */
.point-card-container { /* スマホは縦積み、PCで横並び */
     display: flex;
     flex-direction: column;
     gap: 20px;
     margin-top: 40px;
}
.point-card {
    background: var(--white);
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 5px 15px var(--shadow-color);
    text-align: center;
}
.point-icon {
    font-size: 2.5rem; /* 40px */ color: var(--main-color); margin-bottom: 15px;
}
.point-card h3 { font-size: 1.2rem; /* 19.2px */ color: var(--main-color); margin-bottom: 0.5em; }
.point-card p { font-size: 0.95rem; /* 15.2px */ color: var(--text-light-color); margin: 0; line-height: 1.7; }


/* --- 料金プラン --- */
.price-card-container { /* スマホは縦、PCで横 */
     display: flex;
     flex-direction: column;
     gap: 25px;
}
.price-card {
    background: var(--white);
    padding: 30px 25px;
    border-radius: 15px; /* 角丸強く */
    box-shadow: 0 8px 25px var(--shadow-color);
    text-align: center;
    border: 1px solid var(--border-color);
    position: relative;
    display: flex; /* 中身をflexで制御 */
    flex-direction: column;
    transition: transform 0.3s, box-shadow 0.3s;
}
.price-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 12px 30px rgba(0,0,0,0.15);
}
.price-card.popular {
     border: 2px solid var(--accent-color);
     box-shadow: 0 10px 30px rgba(255, 145, 0, 0.2);
}
.popular-badge {
    position: absolute; top: -15px; left: 50%; transform: translateX(-50%);
    background: linear-gradient(135deg, var(--accent-color), #ffb74d);
    color: var(--white); font-size: 0.8rem; font-weight: bold;
    padding: 5px 18px; border-radius: 20px; box-shadow: 0 3px 8px rgba(0,0,0,0.15);
}
.plan-name { font-size: 1.3rem; font-weight: 900; margin-bottom: 0.6em; }
.plan-price {
    font-size: 2.5rem; /* 40px */
    font-weight: 900;
    color: var(--main-color);
    margin-bottom: 0;
    line-height: 1;
    margin-top: 20px;
}
.price-card.popular .plan-price { color: var(--accent-color); }
.plan-price span { font-size: 0.5em; font-weight: normal; margin-left: 3px; }
.plan-per { font-size: 0.9rem; color: var(--text-light-color); margin-bottom: 1.5em; }
.plan-description { font-size: 0.95rem; color: var(--text-light-color); margin-bottom: 1.5em; min-height: 3.4em; /* 説明文の高さをある程度揃える */ }
.plan-features {
    list-style: none; padding: 0; margin: 0 0 2em 0; text-align: left;
    flex-grow: 1; /* CTAボタンを下に配置するため */
}
.plan-features li {
    font-size: 0.95rem; margin-bottom: 0.6em; color: var(--text-light-color);
    display: flex; align-items: center;
}
.plan-features li i { color: var(--main-color); margin-right: 10px; width: 18px; }
.price-card .cta-button {
    background: var(--main-color); /* 緑ボタン */
    box-shadow: 0 4px 10px rgba(80, 160, 96, 0.3);
    padding: 14px 30px; /* ボタンサイズ調整 */
}
 .price-card.popular .cta-button {
     background: linear-gradient(135deg, var(--accent-color), #ffb74d); /* オレンジグラデ */
     box-shadow: 0 4px 10px rgba(255, 145, 0, 0.3);
 }
.price-notes {
    font-size: 0.85rem; color: var(--text-light-color); text-align: center;
    background-color: var(--gray-bg); padding: 15px; border-radius: 8px; line-height: 1.7; margin-top: 30px;
}

/* --- 利用の流れ --- */
.flow-step-container { /* スマホは縦、PCで横 */
     display: flex;
     flex-direction: column;
     gap: 20px;
}
.flow-step {
    background: var(--white);
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 5px 15px var(--shadow-color);
    position: relative;
    display: flex; /* アイコンとテキストを横並び */
    align-items: flex-start;
}
.flow-step-icon { /* 番号アイコン */
     font-size: 1.8rem; /* 28.8px */
     color: var(--main-color);
     background-color: var(--main-light-color);
     border-radius: 50%;
     width: 55px;
     height: 55px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     margin-right: 20px;
     flex-shrink: 0;
     box-shadow: 0 3px 8px rgba(80, 160, 96, 0.2);
}
.flow-step-text h3 {
     font-size: 1.2rem; margin-bottom: 0.3em; color: var(--main-color);
}
.flow-step-text p {
     font-size: 0.95rem; color: var(--text-light-color); margin: 0; line-height: 1.7;
}
 /* ステップ間の矢印（PC用） */
 .flow-arrow { display: none; }

/* --- Q&A --- */
section.faq {
    background-color: var(--main-light-color);
}
.qa-item {
    margin-bottom: 12px;
    border: none; /* 枠線削除 */
    border-radius: 10px;
    box-shadow: 0 4px 12px var(--shadow-color);
    background: var(--white);
}
.qa-question {
    background: var(--white); /* 背景色 */
    padding: 18px 50px 18px 20px; /* padding調整 */
    font-weight: 700;
    font-size: 1rem; /* 16px */
    color: var(--text-color);
    position: relative;
    cursor: pointer;
    display: block;
    border-radius: 10px; /* summaryにも角丸 */
    transition: background-color 0.3s;
}
 details[open] .qa-question {
     background-color: var(--main-light-color);
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
 }
.qa-question::before { /* Qアイコン */
     content: 'Q.';
     font-weight: 900;
     color: var(--main-color);
     margin-right: 10px;
     font-size: 1.1em;
}
.qa-question::after { /* 開閉アイコン */
    content: '\f078'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
    position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
    color: var(--main-color); transition: transform 0.3s; font-size: 0.9rem;
}
details[open] .qa-question::after { transform: translateY(-50%) rotate(180deg); }
.qa-answer {
    background-color: var(--white); /* 回答エリアも白 */
    padding: 25px 20px 20px 50px; /* 左に少しインデント */
    font-size: 0.95rem;
    color: var(--text-light-color);
    line-height: 1.7;
    border-top: 1px solid var(--border-color); /* 区切り線 */
    border-radius: 0 0 10px 10px; /* 下だけ角丸 */
    position: relative;
}
.qa-answer::before { /* Aアイコン */
     content: 'A.';
     font-weight: 700;
     color: var(--accent-color);
     position: absolute;
     left: 20px;
     top: 25px;
     font-size: 1.1em;
}
.qa-answer p:first-child { margin-top: 0; }
.qa-answer p:last-child { margin-bottom: 0; }

.manga img {
    width: 100%;
}

/* --- フッター --- */
.footer {
    background: #37474f; /* フッター背景色 */ color: #b0bec5; padding: 40px 0 20px; text-align: center; font-size: 0.8rem;
}
.footer-links { margin-bottom: 20px; display: flex; flex-wrap: wrap; justify-content: center; gap: 15px 25px; }
.footer-links a { color: #b0bec5; font-size: 0.75rem; }
.footer-links a:hover { color: var(--white); }
.footer-copyright { font-size: 0.7rem; color: #78909c; margin-top: 25px; }

.site-bottom-content {
    display: none;
}

/* フォーム */
section.mame-form {
    margin: 0 auto;
    max-width: 800px;
}
.form-area {
    margin: 40px auto;
}
.form-chu {
    text-align: center;
}
input.wpcf7-form-control.wpcf7-submit.has-spinner {
    background-color: var(--main-color);
    color: #FFF;
    border: none;
    padding: 12px;
}
input.wpcf7-form-control.wpcf7-previous {
    margin-bottom: 20px;
    padding: 10px 0px;
    border: solid 1px #ccc;
}
@media (max-width: 768px) {
    section.mame-form {
        max-width: 90%;
    }
}


/* --- PC表示時の調整 (min-width: 768px) --- */
@media (min-width: 768px) {
    body { font-size: 16px; }
    h2 { font-size: 1.8rem; } /* 28.8px */
    h3 { font-size: 1.3rem; } /* 20.8px */
    section { padding: 80px 0; }

    /* セクションタイトル */
    .section-title h2 { font-size: 2rem; } /* 32px */
    .section-title p { font-size: 1.05rem; } /* 16.8px */

    /* ポイント */
    .point-card-container {
         flex-direction: row; /* 横並び */
         align-items: stretch; /* 高さを揃える */
    }
    .point-card { flex: 1; } /* 幅を均等に */

     /* お客様の声 */
    .testimonials-container { display: grid; grid-template-columns: repeat(2, 1fr); gap: 25px; }
     .testimonial-card { margin-bottom: 0; padding: 30px; }
     .testimonial-text { font-size: 1.05rem; }

     /* 料金 */
     .price-card-container { flex-direction: row; align-items: stretch; gap: 25px; }
     .price-card { flex: 1; }
     .plan-name { font-size: 1.25rem; }
     .plan-price { font-size: 2.8rem; }
     .plan-description { font-size: 1rem; }
     .plan-features li { font-size: 1rem; }
     .price-notes { font-size: 0.9rem; }

     /* 流れ */
     .flow-step-container {
          flex-direction: row; /* 横並び */
          align-items: flex-start; /* 上揃え */
          position: relative; /* 矢印配置のため */
          gap: 40px; /* ステップ間の距離 */
     }
     .flow-step {
          flex: 1; /* 幅均等 */
          text-align: center; /* 中身中央 */
          margin-bottom: 0;
          padding: 30px 25px; /* padding調整 */
     }
     .flow-step-icon { margin: 0 auto 15px auto; /* アイコン中央上 */ }
     .flow-step-text h3 { font-size: 1.2rem; }
     .flow-step-text p { font-size: 1rem; }
     /* ステップ間の矢印 */
     .flow-arrow {
          display: block;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          font-size: 2rem;
          color: var(--main-color);
          opacity: 0.5;
     }
     .flow-arrow.arrow1 { left: calc(33.33% - 20px); } /* 位置調整 */
     .flow-arrow.arrow2 { right: calc(33.33% - 20px); } /* 位置調整 */


     /* Q&A */
     .qa-question { font-size: 1.05rem; padding: 20px 55px 20px 25px; }
     .qa-question::before { margin-right: 12px; }
     .qa-question::after { right: 25px; font-size: 1rem;}
     .qa-answer { padding: 30px 25px 25px 60px; font-size: 1rem; }
     .qa-answer::before { left: 25px; top: 30px; }
}

/* さらに大きい画面用の調整 (例: 1100px) */
 @media (min-width: 1100px) {
     .hero-title { font-size: 2.8rem; } /* 44.8px */
     .hero-subtitle { font-size: 1.15rem; } /* 18.4px */
     .testimonials-container { grid-template-columns: repeat(3, 1fr); gap: 30px; } /* 3列 */
     .price-card-container { gap: 30px; }
 }