body {
    background: #06C755;
    color: #333;
	font-family: 'Noto Sans JP', sans-serif;
}

/* ヘッダー全体 */
.custom-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    background: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 9999;
    height: 80px; /* ヘッダーの高さを固定 */
    display: flex;
    align-items: center; /* 縦中央揃え */
    justify-content: center; /* 水平中央揃え */
}

/* ヘッダー内部のレイアウトを調整 */
.header-inner {
    display: flex;
    align-items: center;            /* 縦中央揃え */
    justify-content: center;    
    width: 100%;                    /* 幅を100%に */
    box-sizing: border-box;         /* paddingを幅に含める */
    padding: 0 35px;                /* 必要最低限の余白 */
    margin: 0;                      /* 余白をゼロに */
}

/* ロゴ画像のスタイル */
.custom-header .logo img {
    max-height: 50px; /* ロゴ画像の最大高さ */
    width: auto;      /* 幅は自動調整 */
    margin-right: 30px; /* ロゴとテキストの間隔を広げる */
}

/* ヘッダー内のテキストスタイル */
.header-text {
    display: flex;
    flex-direction: column;   /* 縦並びにする */
    text-align: left;         /* 左寄せ */
    margin-left: 30px;        /* ロゴとテキストの間にスペースを追加 */
}

/* テキスト部分のスタイル */
.header-text p {
    margin: 0;         /* テキストの余白をリセット */
    font-size: 14px;    /* フォントサイズを調整 */
    color: #333;        /* テキスト色 */
}

/* 営業時間のフォントサイズを小さく */
.header-text p:nth-child(2) {
    font-size: 12px;    /* 営業時間のフォントサイズを小さくする */
}

/* 📞アイコンのサイズ調整 */
.header-text p img {
    width: 30px !important;  /* アイコンのサイズ */
    height: auto !important;
    margin-right: 0px; /* アイコンと電話番号の間隔 */
	margin-top: -10px;
    vertical-align: middle; /* アイコンをテキストと中央揃え */
}

/* 電話番号のスタイル */
.phone-number {
    font-size: 24px;  /* 文字サイズを大きくする */
    color: #FFA500;   /* オレンジ色 */
    text-decoration: none; /* 下線を消す */
}

.phone-number:hover {
    text-decoration: underline;  /* ホバー時に下線を表示 */
}

/* 公式LINEアイコンのスタイル */
.line-icon {
    display: inline-block;   /* インラインブロックで表示 */
    background-color: #06C755; /* 緑色 */
    color: white;            /* 文字色を白に */
    padding: 12px 35px;      /* アイコン内の余白 */
    border-radius: 30px;     /* 角を丸くする */
    font-size: 14px;         /* 文字サイズを調整 */
    text-decoration: none;   /* 下線を消す */
    margin-left: 30px;       /* 電話番号と営業時間の右側に余白 */
    text-align: center;      /* 文字を中央揃え */
}

.line-icon:hover {
    background-color: #05B746; /* ホバー時に少し暗い緑に変更 */
}

/* スマホ用のレイアウト変更 */
@media (max-width: 1003px) {
    .header-inner {
        justify-content: center; /* ロゴを中央に配置 */
    }

    /* 電話番号とLINEアイコンを非表示 */
    .header-text, .line-icon {
        display: none;
    }

    /* ロゴを大きくする場合 */
    .header-inner img {
        height: 60px; /* スマホ用にロゴを大きく */
    }
}


/* 本文の設定 */

/* 背景画像を設定 */
.bg-image {
    position: fixed; /* 画面に固定 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('http://mitsuba-chain.com/wp-content/themes/illusion_2_0/img/common/animal-bg.png') no-repeat center center;
    background-size: cover; /* 画像を画面全体に広げる */
    z-index: -1; /* 他の要素より背面に配置 */
}

/* 背景を適用するラッパー */
.bg-wrapper {
    position: relative;
    background: url('http://mitsuba-chain.com/wp-content/themes/illusion_2_0/img/common/animal-bg.png') no-repeat center/cover;
    padding: 40px 0; /* 内側に余白を追加 */
}


/* スマホビュー時に異なる背景を設定 */
@media (max-width: 768px) {
    .bg-wrapper {
        background: url('http://mitsuba-chain.com/wp-content/themes/illusion_2_0/img/common/smartphone-bg.png') no-repeat center center;
        background-size: cover; /* 画像を画面全体に広げる */
        background-position: center center; /* 中央に配置 */
    }
}

/* コンテンツのスタイル */
.content {
    position: relative; /* 通常のレイヤー */
    z-index: 1; /* 背景画像より前面に配置 */
    color: #000; /* 文字色を黒に */
    padding: 40px; /* 余白を追加 */
}


/* 本文のスタイル */
.line-content {
    margin-top: 200px;  /* ヘッダーとの間に100pxの余白を追加（調整可能） */
    text-align: center; /* 本文を中央揃え */
    padding: 20px;      /* 本文周りに適度な余白を追加 */
    color: white;       /* 文字色を白に変更 */
}

/* 本文のスタイル */
.line-content-small {
    text-align: center; /* 本文を中央揃え */
    padding: 20px;      /* 本文周りに適度な余白を追加 */
    color: white;       /* 文字色を白に変更 */
}

/* 見出しのスタイル */
.line-content h1 {
    font-size: 35px;    /* 見出しの文字サイズを調整 */
    margin-bottom: 10px; /* 見出しと本文の間に余白を追加 */
    color: white;       /* 見出し文字色を白に変更 */
}

.line-content h2 {
    font-size: 30px;    /* 見出しの文字サイズを調整 */
    margin-bottom: 10px; /* 見出しと本文の間に余白を追加 */
    color: white;       /* 見出し文字色を白に変更 */
}

/* スマホビュー用のスタイル */
@media (max-width: 768px) {
    .bg-wrapper .line-content h1 {
        margin-top: -50px; /* 上の余白を減らして、少し上に上げる */
        padding-top: 0; /* 必要に応じてパディングも調整 */
    }
}


/* 本文のスタイル */
.line-content p {
    font-size: 25px;   /* 本文の文字サイズを調整 */
    line-height: 1.6;   /* 行間を広げて読みやすくする */
    color: white;       /* 本文文字色を白に変更 */
}



/* 本文のスタイル2 */
.line-content-small p {
    font-size: 16px;   /* 本文の文字サイズを調整 */
    line-height: 1.6;   /* 行間を広げて読みやすくする */
    color: white;       /* 本文文字色を白に変更 */
	margin-top:-60px;
}


/* 30％部分のスタイル */
.highlight {
    font-size: 50px;           /* 文字を大きく */
    font-weight: bold;         /* 文字を太字に */
}

/* テキストボックスのスタイル */
.text-box {
    display: flex;
    justify-content: center; /* 水平方向に中央寄せ */
    align-items: center;     /* 垂直方向に中央寄せ */
    flex-wrap: wrap;         /* 必要に応じて折り返し */
    width: 50%;                 /* 幅を調整 */	
	margin: 0 auto;          /* 中央寄せ */
	margin-bottom:100px;
    padding: 60px;           /* ボックス内の余白 */
    background: #fff;        /* 背景色を白に */
    border-radius: 20px;     /* 角を丸くする */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 影を追加 */
}

/* スマホ対応（1列表示） */
@media (max-width: 1003px) {
    .text-box {
        flex-direction: column; /* 縦方向に並べる */
 padding: 50px 50px 50px 90px; /* 左側に余白を増やす (上 右 下 左) */
        width: 90%; /* 幅を90%に拡張 */
        box-sizing: border-box; /* paddingを含めた幅計算に変更 */
    }
}

/* スマホ対応（1列表示） */
@media (max-width: 767px) {
    .text-box {
        flex-direction: column; /* 縦方向に並べる */
 padding: 50px 10px 50px 100px; /* 左側に余白を増やす (上 右 下 左) */
        width: 90%; /* 幅を90%に拡張 */
        box-sizing: border-box; /* paddingを含めた幅計算に変更 */
    }
}



/* より小さい画面ではさらに広げる */
@media (max-width: 480px) {
    .text-box {
        width: 95%; /* 幅を95%に拡張 */
         padding: 50px 50px 50px 90px; /* 左側に余白を増やす (上 右 下 左) */
    }
}

/* テキストボックス内のpタグの文字色を黒に */
.text-box p {
    color: #000000;  /* 黒色 */
	
}

/* 価格の古い金額（¥1400 など）をグレーにする */
.price-old {
    color: #888888; /* グレー色 */
    text-decoration: line-through; /* 取り消し線 */
    margin-right: 10px;            /* 余白を調整 */
}

/* ［他社］基本料金→50%を中央揃え */
.text-center {
    text-align: center; /* 中央揃え */
    font-weight: bold;  /* 太字で強調 */
}

/* 価格リストの親要素を中央揃えに */
.price-list {
    display: flex;          /* フレックスボックスで整列 */
    flex-direction: column; /* 縦方向に並べる */
    align-items: center;    /* 中央揃え */
}

/* アイテム名を右寄せにして幅を統一 */
.item {
    display: inline-block;  /* インラインブロック要素に */
    width: 120px;           /* 幅を統一して揃える */
    text-align: left;       /* 左寄せ */
}

/* 価格リストのスタイルを調整 */
.text-box2 .price-list p,
.text-box .price-list p {
    display: flex; /* 横並びにする */
    justify-content: space-between; /* アイテム名と価格を両端に揃える */
    align-items: center; /* 縦方向の中央揃え */
    margin: 5px 0; /* 各行の間に少し余白 */
    width: 100%; /* 各行の幅を100%にする */
    overflow: hidden; /* オーバーフローを隠す */
}

.text-box2 .price-list .item,
.text-box .price-list .item {
    margin-right: 10px; /* アイテム名と価格の間隔 */
    text-align: left; /* アイテム名は左揃え */
    flex: 1; /* アイテム名部分ができるだけ幅を取る */
}

.text-box2 .price-list .price-old,
.text-box .price-list .price-old {
    text-align: right; /* 価格部分を右揃え */
    white-space: nowrap; /* 価格部分が改行しないように */
    margin-left: 10px; /* 価格部分とアイテム名の間に少し余白 */
    flex-shrink: 0; /* 価格部分の縮小を防止 */
}




/* 区切り用の白い帯 */
.section-divider {
    width: 100%;            /* 横幅を画面いっぱいに */
    height: 100px;          /* 高さを調整（必要に応じて変更） */
    background-color: #fff; /* 背景色を白に */
}

/* 本文のスタイル */
.line-content2 {
    margin-top:50px;
	text-align: center; /* 本文を中央揃え */
    padding: 20px;      /* 本文周りに適度な余白を追加 */
    color: white;       /* 文字色を白に変更 */
}

/* 本文のスタイル */
.line-content2-small {
    text-align: center; /* 本文を中央揃え */
    padding: 20px;      /* 本文周りに適度な余白を追加 */
    color: white;       /* 文字色を白に変更 */
}

/* 見出しのスタイル */
.line-content2 h1 {
    font-size: 35px;    /* 見出しの文字サイズを調整 */
    margin-bottom: 50px; /* 見出しと本文の間に余白を追加 */
    color: white;       /* 見出し文字色を白に変更 */
}

.line-content2 h2 {
    font-size: 30px;    /* 見出しの文字サイズを調整 */
    margin-bottom: 60px; /* 見出しと本文の間に余白を追加 */
    color: white;       /* 見出し文字色を白に変更 */
}

/* テキストボックスのスタイル */
.text-box2 {
    display: flex;
    justify-content: center; /* 水平方向に中央寄せ */
    align-items: center;     /* 垂直方向に中央寄せ */
    flex-wrap: wrap;         /* 必要に応じて折り返し */
    width: 80%;                 /* 幅を調整 */	
	margin: 0 auto;          /* 中央寄せ */
	margin-bottom:100px;
    padding: 60px;           /* ボックス内の余白 */
    background: #fff;        /* 背景色を白に */
    border-radius: 20px;     /* 角を丸くする */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 影を追加 */
}

/* テキストボックス内のpタグの文字色を黒に */
.text-box2 p {
    color: #000000;  /* 黒色 */
}

.notice-text {
	font-size: 1.5em;        /* 「当社が安いです！」を大きく */
    color: white;            /* 文字色を白に */
    text-align: center;      /* 中央揃え */
    line-height: 1.8;        /* 行間を少し広げる */
	margin-top:-40px;
}

.notice-text .highlight {
    font-size: 1.8em;        /* 「当社が安いです！」を大きく */
    font-weight: bold;       /* 太字にする（必要に応じて） */
    margin-top: 10px;        /* 上に余白を追加 */
	margin-bottom:50px;
}



/* text-box3 のスタイル */
.text-box3 {
    padding: 10px; /* 内側の余白を設定 */
    margin: 10px 0; /* 上下に余白を追加 */
    border-radius: 8px; /* 角を少し丸くする */
    background-color: #fff; /* 背景色を白に */
}

.text-orange {
    font-weight: normal; /* 文字を細く */
    color: #3C5A1F; /* 文字色をオレンジに */
    text-align: left; /* 左寄せ */
    font-size: 1.2rem; /* 文字サイズを大きく */
    margin: 0; /* pタグの余白をなくす */
    line-height: 1.4; /* 行間を少し調整 */
	padding-left: 15px;
}


.text-black {
    color: black; /* 黒色 */
	font-size: 1.2rem; /* 文字サイズを大きく */
	text-align: left; /* 左寄せ */
	margin-top:20px;
	margin-bottom:20px;
	padding-left: 15px;
}


.text-black-s {
    color: black; /* 黒色 */
	font-size: 1.0rem; /* 文字サイズを大きく */
	text-align: left; /* 左寄せ */
	padding-left: 15px;
}




/* text-box3 内のアイコン */
.map-icon {
    width: 40px; /* アイコンの幅を調整 */
    height: auto; /* アスペクト比を維持 */
    margin-left: 8px; /* 左に余白を追加 */
    vertical-align: middle; /* テキストと垂直に中央揃え */
}

a {
    text-decoration: none; /* リンクの下線を消す */
}


/* --- 用固定フッター --- */
.footer {
    background-color: white;
    padding: 20px ;
    border-top: 2px solid #ccc; /* 上部に白い線を追加 */
	margin-bottom:50px;
}

.footer-logo {
    max-width: 150px;
    margin-bottom: 15px;
}

.footer-info {
    font-size: 14px;
    color: #333;
}




/* --- スマホ用固定フッター --- */
.custom-footer {
    display: none; /* PCでは非表示 */
}

/* スマホサイズでのみ表示 */
@media (max-width: 1003px) {
    .custom-footer {
        display: flex; /* フッターを表示 */
        justify-content: center; /* テキストを中央揃え */
        align-items: center; /* 縦方向中央揃え */
        position: fixed; /* 画面下部に固定 */
        bottom: 0; /* 画面下端に配置 */
        left: 0;
        width: 100%;
        height: 60px; /* フッターの高さ */
        background-color: #3E9A68; /* LINEカラー */
        z-index: 9999; /* ヘッダーより上に表示 */
    }

    /* フッターのリンクスタイル */
    .footer-line {
        color: white; /* 文字色を白に */
        text-decoration: none; /* 下線を消す */
        font-size: 18px; /* 文字サイズを調整 */
        font-weight: bold; /* 文字を太く */
    }

    /* ホバー時のアクション */
    .footer-line:hover {
        text-decoration: underline; /* ホバー時に下線を表示 */
    }
}