/*
Theme Name: Origin Theme
Theme URI: https://example.com/origin-starter
Author: ChatGPT (for Origin)
Author URI: https://example.com
Description: シンプルで拡張しやすい国産スターター。Gutenberg・日本語サイト向け最適化、メニュー/ウィジェット/アイキャッチ/カスタムロゴ対応。モバイル用ハンバーガー搭載。
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: origin
*/

/* =========================================
ベーススタイル & 変数定義
========================================= */
:root {
    --primary-color: #1a2b4b;
    /* ネイビー */
    --accent-color: #ff7f00;
    /* オレンジ */
    --accent-hover: #e67300;
    --text-color: #333333;
    --bg-light: #ffffff;
    --bg-gray: #f4f7f9;
    --white: #ffffff;
    --border-color: #e0e0e0;
    --font-family-base: 'Noto Sans JP', sans-serif;
    --header-height: 80px;
}

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

body {
    font-family: var(--font-family-base);
    color: var(--text-color);
    line-height: 1.6;
    background-color: var(--bg-light);
    -webkit-font-smoothing: antialiased;
}

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

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

ul {
    list-style: none;
}

/* ユーティリティクラス */
.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

.text-center {
    text-align: center;
}

.section {
    padding: 100px 0;
}

.section-gray {
    background-color: var(--bg-gray);
}

.section-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 60px;
}

/* ボタン */
.btn {
    display: inline-block;
    padding: 12px 30px;
    border-radius: 50px;
    font-family: var(--font-family-base);
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    line-height: 1;
}

.btn-orange {
    background-color: var(--accent-color);
    color: var(--white) !important;
    box-shadow: 0 4px 10px rgba(255, 127, 0, 0.3);
}

.btn-orange:hover {
    background-color: var(--accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(255, 127, 0, 0.4);
}

.btn-large {
    padding: 18px 50px;
    font-size: 1.1rem;
}

/* =========================================
ヘッダー
========================================= */
.header {
    height: var(--header-height);
    display: flex;
    align-items: center;
    background: var(--white);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
}

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

.logo img {
    width: 200px !important;
    /* ロゴの高さに合わせて調整してください */
    width: auto;
}

.nav-list {
    display: flex;
    align-items: center;
    gap: 40px;
}
.nav-list li{
	text-align:center;
}
.nav-list a {
    font-weight: 700;
    font-size: 14px;
    color: var(--primary-color);
}

.nav-list a:hover {
    color: var(--accent-color);
}

.nav-btn {
    padding: 10px 25px;
    font-size: 0.9rem;
}

/* スマホメニュー非表示（PC時） */
.menu-toggle,
.menu-icon {
    display: none;
}

/* =========================================
ファーストビュー (Hero)
========================================= */
.hero {
    padding: 80px 0 120px;
    background-color: var(--bg-gray);
    overflow: hidden;
}

.hero-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}

.hero-content {
    flex: 1;
    max-width: 550px;
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--primary-color);
    line-height: 1.2;
    margin-bottom: 25px;
}

.hero-text {
    font-size: 1.2rem;
    margin-bottom: 50px;
    color: #555;
    line-height: 1.8;
}

.hero-image {
    flex: 1;
    text-align: right;
}

.hero-image img {
    max-width: 100%;
    /* イラストを少し大きく見せる */
}

/* =========================================
特徴セクション (Feature / お客様に寄り添う...)
========================================= */
.feature-section {
    background-color: #f4f7f9;
    /* 画像のような薄いブルーグレー背景 */
    padding: 80px 0;
}

.feature-header {
    text-align: center;
    margin-bottom: 50px;
}

.feature-desc {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.8;
}

.feature-grid {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 50px;
}

/* 白いカードデザイン */
.feature-card {
    background: #ffffff;
    border-radius: 16px;
    /* 角を丸く */
    padding: 40px 30px;
    width: 300px;
    /* カードの幅 */
    text-align: center;
    position: relative;
    /* バッジの配置基準 */
    box-shadow: 0 10px 25px rgba(26, 43, 75, 0.08);
    /* 柔らかい影 */
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s;
}

.feature-card:hover {
    transform: translateY(-5px);
}

/* 番号バッジ (01, 02, 03) */
.step-badge {
    position: absolute;
    top: 20px;
    left: 20px;
    background-color: #1a2b4b;
    /* ネイビー */
    color: #ffffff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    /* 完全な円形 */
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    font-family: 'Helvetica Neue', Arial, sans-serif;
}

/* アイコンエリア */
.feature-icon-area {
    width: 120px;
    height: 120px;
    margin: 20px 0 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.feature-icon-area img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.feature-card h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1a2b4b;
    margin-top: 10px;
    line-height: 1.5;
}

/* グリッドの設定（カードの高さを揃えるために明示的に指定） */
.feature-grid {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 50px;
    align-items: stretch;
    /* すべてのカードの高さを一番高いものに合わせる */
}

/* カード自体のパディングなどを微調整 */
.feature-card {
    /* 以前のスタイルを継承 */
    background: #ffffff;
    border-radius: 16px;
    padding: 40px 25px;
    /* 横幅の余白を少し調整 */
    width: 300px;
    text-align: center;
    position: relative;
    box-shadow: 0 10px 25px rgba(26, 43, 75, 0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s;
}

/* 追加した説明文のスタイル */
.feature-card-text {
    font-size: 0.9rem;
    /* 文字サイズを少し小さく */
    color: #666;
    /* 文字色を少し薄くしてメリハリをつける */
    line-height: 1.6;
    /* 行間を広げて読みやすく */
    margin-top: 15px;
    /* タイトルとの間隔 */
    text-align: left;
    /* 左寄せ（中央寄せが良ければ center に） */
    width: 100%;
    /* 幅いっぱい使う */
}

/* スマホ対応（以前のものを維持） */
@media screen and (max-width: 768px) {
    .feature-grid {
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }

    .feature-card {
        width: 100%;
        max-width: 340px;
    }
}

/* ボタンエリア */
.feature-btn-area {
    text-align: center;
}

.feature-btn-area .btn-orange {
    /* 以前作成した .btn-orange を継承しつつ、少し大きく */
    padding: 15px 60px;
}

.arrow {
    margin-left: 10px;
    font-weight: normal;
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
    .feature-grid {
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }

    .feature-card {
        width: 100%;
        max-width: 340px;
    }

    .pc-only {
        display: none;
    }
}

/* =========================================
提供サービス
========================================= */
.services-list {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 15px;
}

.service-item {
    flex: 1;
    display: flex;
}

.service-card {
    background: var(--white);
    padding: 40px 30px;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.service-card:hover {
    transform: translateY(-10px);
}

.service-icon {
    width: 140px;
    height: 140px;
    margin-bottom: 25px;
}

.service-card h3 {
    font-size: 1.3rem;
    color: var(--primary-color);
    margin-bottom: 15px;
}

.service-card p {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.7;
}

.flow-arrow {
    align-self: center;
    width: 40px;
    height: 40px;
    position: relative;
    flex-shrink: 0;
}

.flow-arrow::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    border-top: 6px solid var(--accent-color);
    border-right: 6px solid var(--accent-color);
    transform: translate(-70%, -50%) rotate(45deg);
}

/* =========================================
制作の流れ (Flow) - カード型デザイン
========================================= */
.flow-section {
    background-color: #ffffff;
    padding: 80px 0;
}

.flow-section .section-title {
    margin-bottom: 60px;
}

.flow-grid {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    /* カードの高さを揃える */
    gap: 20px;
    /* カードと矢印の間隔 */
}

/* カード本体のデザイン */
.flow-item {
    background: #f4f7f9;
    border: 1px solid #eef2f6;
    /* 薄い枠線 */
    border-radius: 12px;
    padding: 30px 20px;
    width: 22%;
    /* 4つ並べるための幅調整 */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0 5px 15px rgba(26, 43, 75, 0.05);
    /* 浮き上がるような影 */
    transition: transform 0.3s;
}

.flow-item:hover {
    transform: translateY(-5px);
    /* ホバー時に少し浮く */
    box-shadow: 0 8px 20px rgba(26, 43, 75, 0.1);
}

/* アイコンエリア */
.flow-icon-area {
    width: 120px;
    height: 120px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.flow-icon-area img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* タイトル */
.flow-item h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1a2b4b;
    /* ネイビー */
    margin-bottom: 15px;
    line-height: 1.4;
    min-height: 3rem;
    /* 2行になっても高さがズレないように確保 */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 説明文 */
.flow-desc {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.6;
    text-align: left;
    /* 読みやすいように左寄せ（お好みでcenterでも可） */
    width: 100%;
}

/* 矢印 */
/* .flow-arrow {
    width: 30px;
    height: 30px;
    background-color: #ff7f00;
    clip-path: polygon(0% 35%, 60% 35%, 60% 10%, 100% 50%, 60% 90%, 60% 65%, 0% 65%);
    flex-shrink: 0;
    align-self: center;
   
} */

/* スマホ対応 */
@media screen and (max-width: 768px) {
    .flow-grid {
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }

    .flow-item {
        width: 100%;
        max-width: 340px;
        min-height: auto;
    }

    .flow-item h3 {
        min-height: auto;
        /* スマホでは高さ固定解除 */
    }

    .flow-arrow {
        transform: rotate(90deg);
        /* 下向きに回転 */
    }
}

/* =========================================
制作実績
========================================= */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 50px 30px;
}

.portfolio-card {
    text-align: center;
}

.portfolio-thumb {
    background: var(--white);
    padding: 20px;
    border-radius: 16px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    margin-bottom: 25px;
    transition: transform 0.3s ease;
}

.portfolio-thumb:hover {
    transform: translateY(-8px);
}

.portfolio-thumb img {
    border-radius: 8px;
    display: block;
    width: 100%;
}

.portfolio-card h3 {
    font-size: 1.2rem;
    color: var(--primary-color);
    margin-bottom: 10px;
}

.portfolio-card p {
    font-size: 0.9rem;
    color: #777;
}

/* =========================================
お問い合わせ
========================================= */
.contact-section {
    background-color: var(--bg-light);
    padding-top: 50px;
    /* 上のセクションとの間隔調整 */
}

.contact-box {
    max-width: 800px;
    margin: 0 auto;
    background: var(--bg-gray);
    padding: 60px;
    border-radius: 24px;
}

.form-group {
    margin-bottom: 30px;
}

.form-group label {
    display: block;
    margin-bottom: 10px;
    font-weight: 700;
    color: var(--primary-color);
    font-size: 0.95rem;
}

.required {
    color: var(--accent-color);
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 15px 20px;
    border: none;
    border-radius: 12px;
    background-color: var(--white);
    font-family: inherit;
    font-size: 1rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.form-group textarea {
    resize: vertical;
}

.btn-form {
    padding: 15px 60px;
    font-size: 1.1rem;
}

/* =========================================
料金プラン
========================================= */
.pricing-grid {
    display: flex;
    justify-content: center;
    gap: 30px;
    align-items: flex-end;
    /* 下揃えにして高さを合わせる */
}

.pricing-card {
    background: var(--white);
    border: 1px solid var(--border-color);
    /* 白背景なので枠線を追加 */
    border-radius: 20px;
    /* 上だけ丸かったのを全体に丸く */
    text-align: center;
    flex: 1;
    max-width: 320px;
    color: var(--text-color);
    /* テキストは黒系に戻す */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    padding: 0;
    /* カード自体の余白をなしにする（h3を端まで広げるため） */
    overflow: hidden;
    /* 角丸からh3の背景がはみ出ないようにする */
    transition: transform 0.3s;
}

/* Standardプランを少し大きく強調 */
.pricing-standard {
    transform: scale(1.05);
    z-index: 1;
    border-color: #2c5282;
    /* 枠線を少し強調 */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* 見出し（背景色あり部分） */
.pricing-card h3 {
    margin: 0;
    padding: 20px 0;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--white);
    width: 100%;
}

/* 各プランの見出し背景色 */
.pricing-basic h3 {
    background-color: #1a2b4b;
}

.pricing-standard h3 {
    background-color: #2c5282;
}

.pricing-premium h3 {
    background-color: var(--accent-color);
}

/* 下部のコンテンツエリア */
.pricing-body {
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* 価格とボタンを離す */
    flex-grow: 1;
    /* 高さいっぱいまで広げる */
}

.pricing-card .price {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
    color: var(--primary-color);
    margin-bottom: 20px;
}

.pricing-card .price-note {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 20px;
}

/* ボタン調整 */
.btn-pricing {
    width: 100%;
    /* 以前は白ボタンでしたが、背景が白になったのでオレンジボタンを継承 */
}

/* スマホ表示の調整 */
@media screen and (max-width: 768px) {
    .pricing-grid {
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }

    .pricing-card {
        max-width: 100%;
        width: 100%;
        min-height: auto;
    }

    .pricing-standard {
        transform: none;
    }
}

/* =========================================
フッター
========================================= */
.footer {
    background: var(--primary-color);
    color: var(--white);
    padding: 80px 0 40px;
}

.footer-inner {
    display: flex;
    justify-content: space-between;
    gap: 60px;
}

.footer-col {
    flex: 1;
}

.footer-logo img {
    width: 150px !important;
    margin-bottom: 20px;
    background-color: #fff;
}

.copyright {
    font-size: 0.9rem;
    opacity: 0.7;
}

.footer-nav-col {
    flex: 0 0 auto;
    min-width: 150px;
}

.footer-nav li {
    margin-bottom: 15px;
}

.footer-nav li:first-child {
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 25px;
}

.footer-nav a:hover {
    text-decoration: underline;
    opacity: 0.8;
}

/* =========================================
レスポンシブ対応 (スマホ表示: 768px以下)
========================================= */
@media screen and (max-width: 768px) {
    .section {
        padding: 60px 0;
    }

    .section-title {
        font-size: 1.8rem;
        margin-bottom: 40px;
    }

    /* ヘッダー（ハンバーガーメニュー） */
    .header {
        height: 70px;
    }

    .menu-icon {
        display: flex;
        align-items: center;
        width: 30px;
        height: 70px;
        cursor: pointer;
        z-index: 1002;
    }

    .menu-icon span,
    .menu-icon span::before,
    .menu-icon span::after {
        content: '';
        display: block;
        width: 30px;
        height: 3px;
        background: var(--primary-color);
        position: relative;
        transition: all 0.3s;
    }

    .menu-icon span::before {
        bottom: 11px;
    }

    .menu-icon span::after {
        top: 8px;
    }

    .menu-toggle {
        display: none;
    }

    .menu-toggle:checked+.menu-icon span {
        background: transparent;
    }

    .menu-toggle:checked+.menu-icon span::before {
        bottom: 0;
        transform: rotate(45deg);
    }

    .menu-toggle:checked+.menu-icon span::after {
        top: 0;
        transform: rotate(-45deg);
    }

    .nav {
        position: fixed;
        top: 70px;
        left: 0;
        width: 100%;
        background: var(--white);
        padding: 30px 0;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
        transform: translateY(-150%);
        transition: transform 0.4s ease;
        z-index: 1001;
    }

    .menu-toggle:checked~.nav {
        transform: translateY(0);
    }

    .nav-list {
        flex-direction: column;
        gap: 25px;
    }

    .nav-btn {
/*         width: 80%; */
    }
    /* --- ハンバーガーメニュー修正版 --- */

	/* アイコンのクリックエリア */
	.menu-icon {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 40px; /* タップしやすい大きさ */
		height: 40px;
		cursor: pointer;
		z-index: 1002;
		position: relative; /* 基準位置 */
	}

	/* 真ん中の線 */
	.menu-icon span {
		display: block;
		width: 30px;
		height: 3px;
		background: var(--primary-color);
		position: relative; /* 擬似要素の基準 */
		transition: background-color 0.3s;
	}

	/* 上と下の線（共通設定） */
	.menu-icon span::before,
	.menu-icon span::after {
		content: '';
		display: block;
		width: 30px;
		height: 3px;
		background: var(--primary-color);
		position: absolute; /* spanを基準に絶対配置 */
		left: 0;
		transition: all 0.3s;
	}

	/* 上の線（通常時） */
	.menu-icon span::before {
		top: -10px; /* 上にズラす */
	}

	/* 下の線（通常時） */
	.menu-icon span::after {
		top: 10px; /* 下にズラす */
	}

	/* --- クリック時のアニメーション（×になる） --- */

	/* 真ん中の線を透明にする */
	.menu-toggle:checked + .menu-icon span {
		background-color: transparent;
	}

	/* 上の線を真ん中に持ってきて45度回転 */
	.menu-toggle:checked + .menu-icon span::before {
		top: 0;
		transform: rotate(45deg);
	}

	/* 下の線を真ん中に持ってきて-45度回転 */
	.menu-toggle:checked + .menu-icon span::after {
		top: 0;
		transform: rotate(-45deg);
	}
	/* --- オーバーレイと重なり順の調整 --- */

/* 1. ボタン（一番手前） */
.menu-icon {
    /* ...既存のスタイル... */
    z-index: 1003; /* オーバーレイより上にする */
}

/* 2. メニュー本体（その次） */
@media screen and (max-width: 768px) {
    .nav {
        /* ...既存のスタイル... */
        z-index: 1002; /* オーバーレイより上にする */
    }
}

/* 3. 黒いオーバーレイ（背景） */
.menu-overlay {
    display: none; /* PCでは非表示 */
}

@media screen and (max-width: 768px) {
    .menu-overlay {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.6); /* 黒の半透明 */
        z-index: 1001; /* メニューより下、コンテンツより上 */
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        cursor: pointer; /* 押せる感じを出す */
    }

    /* メニューが開いた時（チェックされた時）に表示 */
    .menu-toggle:checked ~ .menu-overlay {
        opacity: 1;
        visibility: visible;
    }
}
    /* ファーストビュー */
    .hero {
        padding: 40px 0 60px;
    }

    .hero-inner {
        flex-direction: column;
        text-align: center;
        gap: 40px;
    }

    .hero-title {
        font-size: 2.2rem;
    }

    .hero-text {
        font-size: 1rem;
    }

    .hero-content {
        max-width: 100%;
    }

    .hero-image {
        order: -1;
    }

    /* 提供サービス */
    .services-list {
        flex-direction: column;
        gap: 30px;
    }

    .flow-arrow {
        transform: rotate(90deg);
        /* 下向き */
        margin: -10px auto;
    }

    .flow-arrow::after {
        transform: translate(-50%, -50%) rotate(45deg);
    }

    /* 制作実績 */
    .portfolio-grid {
        grid-template-columns: 1fr;
        gap: 40px;
        max-width: 450px;
        margin: 0 auto;
    }

    /* お問い合わせ */
    .contact-box {
        padding: 40px 30px;
    }

    .btn-form {
        width: 100%;
    }

    /* 料金プラン */
    .pricing-grid {
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }

    .pricing-card {
        max-width: 100%;
        width: 100%;
        border-radius: 20px;
        min-height: auto;
    }

    .pricing-standard {
        transform: none;
    }

    /* フッター */
    .footer {
        padding: 60px 0 30px;
    }

    .footer-inner {
        flex-direction: column;
        gap: 40px;
    }

    .footer-nav-col {
        min-width: auto;
    }

    .footer-col:first-child {
        order: 3;
        text-align: center;
        margin-top: 20px;
    }

    .footer-logo img {
        margin: 0 auto 20px;
    }
}
/* =========================================
   お問い合わせフォーム (Contact)
   ========================================= */
.contact-section {
    background-color: #f4f7f9; /* 薄いグレー背景 */
    padding: 80px 0;
}

.contact-desc {
    margin-bottom: 40px;
    font-size: 0.95rem;
    color: #555;
}

/* フォームを囲む白い箱 */
.contact-form-wrapper {
    max-width: 700px;
    margin: 0 auto;
    background: #ffffff;
    padding: 50px 40px;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(26, 43, 75, 0.05);
}

.form-group {
    margin-bottom: 25px;
}

/* ラベル */
.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 700;
    color: #1a2b4b; /* ネイビー */
    font-size: 0.95rem;
}

/* 必須バッジ */
.required {
    background-color: #ff7f00; /* オレンジ */
    color: #fff;
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 5px;
    vertical-align: middle;
    font-weight: normal;
}

/* 入力エリア */
.form-group input[type="text"],
.form-group input[type="email"],
.form-group textarea {
    width: 100%;
    padding: 15px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 1rem;
    font-family: inherit;
    transition: all 0.3s;
    background-color: #fafafa;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #ccc;
}

/* フォーカス時のスタイル */
.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #ff7f00; /* オレンジ */
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(255, 127, 0, 0.1);
}

/* プライバシーポリシーチェック */
.form-check {
    text-align: center;
    margin-bottom: 30px;
    font-size: 0.9rem;
}

.form-check a {
    color: #1a2b4b;
    text-decoration: underline;
}

/* 送信ボタン */
.form-submit {
    text-align: center;
}

.btn-submit {
    width: 100%;
    max-width: 300px;
    padding: 15px;
    font-size: 1.1rem;
    border: none;
    cursor: pointer;
    /* 以前の .btn-orange スタイルを継承 */
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
    .contact-form-wrapper {
        padding: 30px 20px;
    }
}
.contact-section form br{
	display:none;
}


/* =========================================
   アーカイブページ (Blog List)
   ========================================= */

/* ページヘッダー（タイトルエリア） */
.page-header {
    background-color: #1a2b4b; /* ネイビー */
    color: #ffffff;
    padding: 60px 0;
    text-align: center;
    margin-bottom: 20px;
}

.page-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.page-subtitle {
    font-size: 1rem;
    opacity: 0.8;
}

/* グリッドレイアウト */
.archive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* 幅に合わせて自動折り返し */
    gap: 30px;
    margin-bottom: 60px;
}

/* 記事カード */
.post-card {
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(26, 43, 75, 0.05);
    transition: transform 0.3s, box-shadow 0.3s;
    border: 1px solid #eef2f6;
}

.post-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(26, 43, 75, 0.1);
}

.post-link {
    display: block;
    height: 100%;
    color: inherit; /* 文字色継承 */
    text-decoration: none;
}

/* サムネイルエリア */
.post-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9; /* 16:9の比率を維持 */
    overflow: hidden;
}

.post-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画像を枠いっぱいにトリミング */
    transition: transform 0.5s;
}

.post-card:hover .post-thumb img {
    transform: scale(1.05); /* ホバーで画像ズーム */
}

/* カテゴリーバッジ */
.post-cat {
    position: absolute;
    top: 15px;
    right: 15px;
    background-color: #ff7f00; /* オレンジ */
    color: #fff;
    font-size: 0.75rem;
    padding: 4px 10px;
    border-radius: 4px;
    font-weight: 700;
    z-index: 1;
}

/* 記事本文エリア */
.post-body {
    padding: 25px;
    display: flex;
    flex-direction: column;
    height: calc(100% - (100vw * 9 / 16)); /* 簡易的な高さ計算（必須ではない） */
}

.post-date {
    font-size: 0.85rem;
    color: #888;
    margin-bottom: 10px;
    display: block;
}

.post-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1a2b4b;
    line-height: 1.5;
    margin-bottom: 15px;
    /* 2行で省略する設定 */
/*     display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; */
}

.post-excerpt {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.6;
    margin-bottom: 20px;
    flex-grow: 1; /* 下のボタンを底に押しやる */
    /* 3行で省略 */
/*     display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden; */
}

.read-more {
    font-size: 0.9rem;
    font-weight: 700;
    color: #ff7f00;
    text-align: right;
    display: block;
}

/* ページネーション */
.pagination {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 40px;
}

.page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid #e0e0e0;
    border-radius: 50%; /* 丸型 */
    color: #1a2b4b;
    text-decoration: none;
    font-weight: 700;
    transition: all 0.3s;
    background: #fff;
}

.page-numbers.current,
.page-numbers:hover {
    background-color: #1a2b4b;
    color: #fff;
    border-color: #1a2b4b;
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
    .page-header {
        padding: 40px 0;
    }
    .page-title {
        font-size: 1.5rem;
    }
    .archive-grid {
        grid-template-columns: 1fr; /* 1列 */
    }
}

/* =========================================
   404ページ (Page Not Found)
   ========================================= */

/* 画面中央に配置するためのレイアウト */
.error-page-main {
    padding: 100px 0;
    min-height: 60vh; /* フッターが浮かないように最低高さを確保 */
    display: flex;
    align-items: center;
    background-color: #f4f7f9; /* サイト共通の薄いグレー背景 */
}

.error-container {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
    background: #fff;
    padding: 60px 40px;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(26, 43, 75, 0.05);
}

/* 404の数字デザイン */
.error-number {
    display: block;
    font-size: 6rem;
    font-weight: 900;
    color: #eef2f6; /* 薄いグレーで背景っぽく */
    line-height: 1;
    position: relative;
    z-index: 1;
    font-family: sans-serif;
    margin-bottom: -20px; /* 文字を重ねる調整 */
}

.error-en {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a2b4b; /* ネイビー */
    position: relative;
    z-index: 2;
    margin-bottom: 30px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* メインタイトル */
.error-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #1a2b4b;
    margin-bottom: 20px;
}

/* 説明文 */
.error-text {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.8;
    margin-bottom: 40px;
}

/* 検索フォームのスタイル調整 */
.error-search {
    margin-bottom: 40px;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

/* WordPress標準の検索フォームをデザインになじませる */
.error-search form {
    display: flex;
    gap: 10px;
}
.error-search input[type="search"] {
    flex: 1;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 1rem;
}
.error-search button, 
.error-search input[type="submit"] {
    background: #1a2b4b;
    color: #fff;
    border: none;
    padding: 0 20px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.3s;
}
.error-search button:hover, 
.error-search input[type="submit"]:hover {
    background: #2c5282;
}

/* トップへ戻るボタン */
.btn-home {
    padding: 15px 50px;
    /* 以前定義した .btn-orange を利用 */
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
    .error-number {
        font-size: 4rem;
    }
    .error-container {
        padding: 40px 20px;
        width: 90%;
    }
    .error-search form {
        flex-direction: column;
    }
    .error-search button, 
    .error-search input[type="submit"] {
        padding: 12px;
        width: 100%;
    }
}

/* =========================================
   固定ページ・記事本文スタイル (Content)
   ========================================= */

/* 記事エリア全体の余白 */
.page-content {
    padding: 60px 0 100px;
    max-width: 880px; /* 読みやすいように幅を少し制限 */
	margin: 0 auto !important; /* 中央寄せ */
}
.entry-content{
	margin-bottom:60px;
}
/* --- 見出しのデザイン --- */

/* H2: 下線付きのメイン見出し */
.entry-content h2 {
    font-size: 1.8rem;
    font-weight: 700;
    color: #1a2b4b; /* ネイビー */
    padding-bottom: 15px;
    margin-top: 0px;
    margin-bottom: 30px;
    border-bottom: 2px solid #1a2b4b;
    position: relative;
}

/* H2の下線にオレンジのアクセント */
.entry-content h2::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 60px;
    height: 2px;
    background-color: #ff7f00; /* オレンジ */
}

/* H3: 左線付きの見出し */
.entry-content h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a2b4b;
    margin-top: 50px;
    margin-bottom: 20px;
    padding-left: 15px;
    border-left: 5px solid #ff7f00; /* オレンジの左線 */
    line-height: 1.4;
}

/* H4: シンプルな太字見出し */
.entry-content h4 {
    font-size: 1.2rem;
    font-weight: 700;
    margin-top: 40px;
    margin-bottom: 15px;
    color: #333;
}

/* --- テキスト・段落 --- */
.entry-content p {
    font-size: 1rem;
    line-height: 1.9; /* 読みやすく広めに */
    margin-bottom: 2em;
    color: #333;
}

/* --- リスト (ul, ol) --- */
.entry-content ul,
.entry-content ol {
    margin-bottom: 2em;
    padding-left: 20px;
    background: #f4f7f9; /* 薄い背景で囲む */
    padding: 30px 30px 30px 50px; /* 左余白を確保 */
    border-radius: 8px;
}

.entry-content li {
    margin-bottom: 10px;
    line-height: 1.7;
}

.entry-content ul {
    list-style: disc; /* デフォルトの黒丸 */
}
/* もしくはオレンジのドットにする場合 */
/* .entry-content ul { list-style: none; }
.entry-content ul li { position: relative; }
.entry-content ul li::before {
    content: ''; position: absolute; left: -20px; top: 10px;
    width: 6px; height: 6px; background: #ff7f00; border-radius: 50%;
} 
*/

/* --- 引用 (Blockquote) --- */
.entry-content blockquote {
    margin: 40px 0;
    padding: 20px 30px;
    border-left: 4px solid #ddd;
    color: #666;
    background-color: #fafafa;
    font-style: italic;
}

/* --- 画像 (WordPress標準クラス対応) --- */
.entry-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px; /* 角を少し丸く */
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.aligncenter {
    display: block;
    margin: 30px auto;
}

.alignleft {
    float: left;
    margin: 0 20px 20px 0;
}

.alignright {
    float: right;
    margin: 0 0 20px 20px;
}

/* --- テーブル (Table) --- */
.entry-content table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 40px;
    font-size: 0.95rem;
}

.entry-content th {
    background-color: #1a2b4b; /* ネイビー背景 */
    color: #fff;
    padding: 15px;
    border: 1px solid #1a2b4b;
    font-weight: 700;
    white-space: nowrap; /* 見出しは折り返さない（推奨） */
    width: 25%; /* 左側の幅目安 */
}

.entry-content td {
    padding: 15px;
    border: 1px solid #e0e0e0;
    background-color: #fff;
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
    .page-content {
        padding: 40px 20px;
    }
    
    .entry-content h2 {
        font-size: 1.5rem;
    }
    
    .entry-content h3 {
        font-size: 1.3rem;
    }
    
    /* スマホでテーブルが崩れないようにスクロールさせる */
    .table-scroll {
        overflow-x: auto;
        white-space: nowrap;
    }
}

/* =========================================
   個別投稿ページ (Single Post)
   ========================================= */

/* メインエリアの背景 */
.single-main {
    background-color: #f4f7f9; /* 画面全体は薄いグレー */
    padding: 60px 0;
}

/* 記事部分の白いコンテナ */
.single-container {
    max-width: 880px; /* 読みやすい幅 */
    margin: 0 auto;
    background: #fff;
    padding: 60px 50px; /* 内側の余白 */
    border-radius: 16px;
    box-shadow: 0 5px 20px rgba(26, 43, 75, 0.05);
}

/* --- 記事ヘッダー --- */
.single-header {
    margin-bottom: 40px;
    text-align: center; /* タイトル等は中央寄せ */
}

.single-meta {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    font-family: 'Helvetica Neue', Arial, sans-serif;
}

/* カテゴリーラベル */
.post-cat {
    background-color: #ff7f00; /* オレンジ */
    color: #fff;
    font-size: 0.8rem;
    padding: 4px 12px;
    border-radius: 4px;
    font-weight: 700;
}

/* 日付 */
.post-date {
    color: #888;
    font-size: 0.9rem;
}

/* 記事タイトル */
.single-title {
    font-size: 2rem;
    font-weight: 700;
    color: #1a2b4b; /* ネイビー */
    line-height: 1.4;
}

/* --- アイキャッチ画像 --- */
.single-thumbnail {
    margin-bottom: 50px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.single-thumbnail img {
    width: 100%;
    height: auto;
    display: block;
}

/* --- 記事フッター (タグなど) --- */
.single-footer {
    margin-top: 60px;
    padding-top: 30px;
    border-top: 1px solid #eee;
}

.single-tags a {
    display: inline-block;
    font-size: 0.9rem;
    color: #666;
    margin-right: 10px;
    text-decoration: none;
    background: #f4f7f9;
    padding: 5px 10px;
    border-radius: 4px;
    transition: all 0.3s;
}

.single-tags a:hover {
    background: #e0e0e0;
}

/* --- 前後の記事ナビゲーション --- */
.post-navigation {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: 40px;
    margin-bottom: 40px;
}

.nav-prev, .nav-next {
    width: 48%;
}

.post-navigation a {
    display: block;
    padding: 20px;
    background: #fff;
    border: 1px solid #eef2f6;
    border-radius: 8px;
    text-decoration: none;
    color: #333;
    font-size: 0.9rem;
    transition: all 0.3s;
}

.post-navigation a:hover {
    background: #fbfbfb;
    border-color: #ff7f00; /* ホバー時に枠をオレンジに */
}

.post-navigation span {
    display: block;
    font-size: 0.8rem;
    color: #888;
    margin-bottom: 5px;
    font-weight: 700;
}

/* 一覧に戻るボタンエリア */
.back-to-list {
    text-align: center;
    margin-top: 40px;
}

/* .btn-outline-orange は以前作ったクラスがあればそれを使用 */
/* なければ以下を追加 */
.btn-outline-orange {
    display: inline-block;
    padding: 12px 40px;
    border: 1px solid #ff7f00;
    color: #ff7f00;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 700;
    transition: all 0.3s;
}

.btn-outline-orange:hover {
    background-color: #ff7f00;
    color: #fff;
}


/* スマホ対応 */
@media screen and (max-width: 768px) {
    .single-main {
        padding: 0; /* スマホでは背景グレーをなくして画面いっぱいに */
        background: #fff;
    }
    .single-container {
        padding: 30px 20px;
        box-shadow: none; /* 影を消す */
    }
    .single-title {
        font-size: 1.5rem;
    }
    .post-navigation {
        flex-direction: column;
        gap: 15px;
    }
    .nav-prev, .nav-next {
        width: 100%;
    }
}
/* =========================================
   固定ページ (Page Template)
   ========================================= */

/* ページ全体の背景（白） */
.page-main {
    background-color: #fff;
}

/* 固定ページのコンテナ（少し幅を狭めて読みやすく） */
.page-container {
    max-width: 880px;
    margin: 0 auto;
    padding: 0 0 80px;
}

/* ページヘッダーのサブタイトル（英語スラッグ） */
.page-header .page-subtitle {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    letter-spacing: 0.1em;
    font-weight: 700;
    opacity: 0.7;
    margin-top: 5px;
    font-size: 0.9rem;
}

/* 固定ページのアイキャッチ画像 */
.page-thumbnail {
    margin-bottom: 50px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}

.page-thumbnail img {
    width: 100%;
    height: auto;
    display: block;
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
    .page-container {
        padding-bottom: 40px;
    }
}

/* =========================================
   制作実績ページ (Portfolio)
   ========================================= */

/* 実績画像の比率を少し横長ではなく正方形に近づける場合 */
/* デフォルトの .post-thumb は 16:9 ですが、実績は見切れさせたくない場合など */
/*
.portfolio-section .post-thumb {
    aspect-ratio: 4 / 3; 
}
*/

/* WP-PageNaviプラグインを使っている場合のスタイル調整 */
.wp-pagenavi {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 40px;
}
.wp-pagenavi a, .wp-pagenavi span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid #e0e0e0;
    border-radius: 50%; /* 丸型に統一 */
    text-decoration: none;
    background: #fff;
    color: #1a2b4b;
    font-weight: 700;
}
.wp-pagenavi span.current,
.wp-pagenavi a:hover {
    background-color: #1a2b4b;
    color: #fff;
    border-color: #1a2b4b;
}

/* =========================================
   トップページ：制作実績 (PCモニター風デザイン)
   ========================================= */

.home-portfolio-section {
    background-color: #ffffff;
    padding: 80px 0;
}

.portfolio-pc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 50px 30px; /* 上下の間隔を少し広めに */
    margin-bottom: 40px;
}

/* リンク全体 */
.portfolio-pc-item {
    display: block;
    text-decoration: none;
    transition: transform 0.3s;
}

.portfolio-pc-item:hover {
    transform: translateY(-5px); /* ホバーで少し浮く */
}

/* --- PCモニター部分 --- */
.pc-monitor {
    background: #333; /* ベゼルの色 */
    border-radius: 10px 10px 0 0; /* 上の角だけ丸く */
    padding: 10px 10px 0 10px; /* 上左右にベゼル幅を持たせる */
    position: relative;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

/* 上部のカメラ穴 */
.pc-camera {
    width: 6px;
    height: 6px;
    background: #555;
    border-radius: 50%;
    position: absolute;
    top: 4px; /* ベゼル内の位置調整 */
    left: 50%;
    transform: translateX(-50%);
}

/* 画面エリア（画像を切り取る） */
.pc-screen {
    background: #fff;
    width: 100%;
    aspect-ratio: 16 / 10; /* PC画面っぽい比率 */
    overflow: hidden;
    position: relative;
    border-radius: 2px 2px 0 0; /* 画面自体の角丸は小さく */
}

.pc-screen img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画像を画面いっぱいに埋める（上部基準） */
    object-position: top center; /* サイトの上部を見せる */
    transition: transform 0.5s ease;
}

/* ホバー時に画面内の画像が少し拡大するエフェクト */
.portfolio-pc-item:hover .pc-screen img {
    transform: scale(1.05);
}

/* --- PCスタンド部分 --- */
.pc-stand {
    height: 12px;
    background: #e0e0e0; /* スタンド上部のシルバー */
    border-radius: 0 0 10px 10px; /* モニター下部の丸み */
    position: relative;
    margin-bottom: 15px; /* タイトルとの隙間 */
}

/* スタンドの足（擬似要素で作る） */
.pc-stand::after {
    content: '';
    display: block;
    width: 30%; /* 足の幅 */
    height: 15px;
    background: linear-gradient(to bottom, #ccc, #f4f4f4); /* 立体感を出すグラデ */
    margin: 0 auto;
    clip-path: polygon(10% 0, 90% 0, 100% 100%, 0% 100%); /* 台形にする */
    position: relative;
    top: 12px; /* モニター枠の下に配置 */
}

/* --- タイトル --- */
.portfolio-pc-title {
    text-align: center;
    font-size: 1.1rem;
    font-weight: 700;
    color: #1a2b4b; /* ネイビー */
    margin-top: 25px; /* スタンドの足分マージンを取る */
	background: #f8f8f8;
    border-radius: 14px;
	padding:10px 0;
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
    .portfolio-pc-grid {
        grid-template-columns: 1fr; /* 1列表示 */
        max-width: 400px;
        margin: 0 auto 40px;
    }
}