/*
Theme Name: Arkhe
Theme URI: https://arkhe-theme.com/
Version: 3.12.0
Tested up to: 6.8
Requires at least: 6.0
Requires PHP: 7.0
Description: A very simple theme for production templates. Customize as you like.
Tags: two-columns, one-column, right-sidebar, custom-colors, custom-menu, editor-style, theme-options, block-styles, wide-blocks
Author: LOOS,Inc.
Author URI: https://loos.co.jp/
Text Domain: arkhe
Domain Path: /languages
License: GNU General Public License v3 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.html
*/


/* --- Base --- */
body {
    margin: 0; padding: 0;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    color: #333; line-height: 1.6;
}
img { max-width: 100%; height: auto; }
.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.section-padding { padding: 60px 0; }

/* --- Header --- */
.header { height: 90px; display: flex; align-items: center; }
.header-inner { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 0 20px; }
.logo img { height: 70px; }
.g-nav ul { display: flex; list-style: none; gap: 20px; }
.g-nav a { text-decoration: none; color: #00736d; font-weight: bold; font-size: 15px; text-align: center; }
.g-nav a span { display: block; font-size: 10px; color: #999; }

/* --- Main Visual --- */
.mv { position: relative; height: 700px; overflow: hidden; }
.mv-slides .slide {
    position: absolute; width: 100%; height: 100%;
    background-size: cover; background-position: center;
    opacity: 0; animation: fadeSlide 12s infinite;
}
.mv-slides .slide:nth-child(1) { animation-delay: 0s; }
.mv-slides .slide:nth-child(2) { animation-delay: 4s; }
.mv-slides .slide:nth-child(3) { animation-delay: 8s; }

@keyframes fadeSlide {
    0% { opacity: 0; }
    10% { opacity: 1; }
    33% { opacity: 1; }
    43% { opacity: 0; }
}

.mv-catch {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 80%; max-width: 600px; opacity: 0; animation: fadeIn 2s forwards 0.5s;
}
@keyframes fadeIn { to { opacity: 1; } }

/* --- Section Design --- */
.icon-mark { text-align: center; margin-bottom: 10px; }
.icon-mark img { width: 40px; }
.section-title { text-align: center; color: #00736d; font-size: 24px; margin-bottom: 40px; position: relative; }
.section-title::after { content: ""; display: block; width: 60px; height: 2px; background: #00736d; margin: 10px auto 0; }

.intro-flex { display: flex; align-items: center; gap: 40px; }
.intro-img { flex: 0 0 40%; }

/* ストライプ背景（WAF対策で角度指定をシンプルに） */
.trouble-item {
    background-color: #e0f2f1;
    background-image: linear-gradient(45deg, #ffffff 25%, transparent 25%, transparent 50%, #ffffff 50%, #ffffff 75%, transparent 75%, transparent);
    background-size: 10px 10px;
    padding: 20px; border-radius: 10px; font-weight: bold;
    display: flex; align-items: center; justify-content: center; text-align: center;
}

.trouble-flex { display: flex; align-items: center; gap: 30px; }
.trouble-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; flex: 1; }
.trouble { position: relative; }
.arrow-bottom {
    position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%);
    width: 0; height: 0;
    border-left: 30px solid transparent; border-right: 30px solid transparent; border-top: 25px solid #e0f2f1;
}

/* --- Fixed Buttons (PC) --- */
.side-buttons { position: fixed; right: 0; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; z-index: 100;gap: 20px;}
.side-buttons a {
    writing-mode: vertical-rl; padding: 20px 10px; color: #fff; text-decoration: none;
    font-size: 13px; display: flex; align-items: center; gap: 10px;
}
.side-buttons i { writing-mode: horizontal-tb; font-size: 18px; }
.btn-mail { background: #00736d; }
.btn-line { background: #06c755; }

/* --- Mobile Menu & Footer CTA --- */
.hamburger { display: none; cursor: pointer; }

/* PCでは完全に非表示 */
.mobile-cta { display: none; }

/* --- Responsive 1151px --- */
@media screen and (max-width: 1151px) {
    .g-nav { display: none; }
    .hamburger { display: block; width: 30px; height: 24px; position: relative; }
    .hamburger span { position: absolute; width: 100%; height: 2px; background: #00736d; }
    .hamburger span:nth-child(2) { top: 11px; }
    .hamburger span:nth-child(3) { bottom: 0; }
    .side-buttons { display: none; }

    /* スマホ用CTA表示設定 */
    .mobile-cta {
        display: flex; position: fixed; left: 0; width: 100%; z-index: 1000;
        bottom: -100px; transition: bottom 0.4s;
    }
    .mobile-cta.is-active { bottom: 0; }
    .mobile-cta a {
        flex: 1; text-align: center; padding: 12px 0; color: #fff;
        text-decoration: none; font-weight: bold; font-size: 13px;
        display: flex; flex-direction: column; align-items: center; gap: 4px;
    }
    .cta-tel { background: #f39800; }
    .cta-mail { background: #00736d; }
    .cta-line { background: #06c755; }
}

/* --- Responsive 768px --- */
@media screen and (max-width: 768px) {
    .intro-flex, .trouble-flex { flex-direction: column; }
    .trouble-grid { grid-template-columns: 1fr; }
    .mv { height: 300px; }
    .section-title { font-size: 18px; }
}
/* --- Content 03 (What is Hiraya) 横幅100%対応 --- */
.hiraya-intro { background: #fff;margin-top: 60px;}

/* タイトルエリアの調整 */
.hiraya-title-area { position: relative; margin-bottom: 30px; text-align: center; }
.bird-icon { width: 80px; position: absolute; left: 0; top: -20px; }
.hiraya-title-area .sub-txt { color: #00736d; font-weight: bold; font-size: 20px; margin-bottom: 5px; }
.hiraya-title-area .main-title { font-size: 28px; color: #333; margin: 0; }
.hiraya-title-area .main-title span { 
    color: #00736d; 
    background: linear-gradient(transparent 70%, #fff100 70%);
}

.hiraya-main-img { text-align: center; margin-bottom: 0; }
.hiraya-main-img img { border-radius: 5px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); vertical-align: bottom; }

.hiraya-details-full {
    background-color: #e0f2f1;
    width: 100%;
    padding: 100px 0 80px; /* 上下の余白 */
    margin-top: 0; /* 画像との隙間を詰める場合は調整 */
}

/* 内部のレイアウト */
.hiraya-details {
    position: relative;
    text-align: center;
}

/* 吹き出しラベル */
.details-label {
    position: absolute;
    top: -130px; /* 位置を調整 */
    left: 50%;
    transform: translateX(-50%);
    background: #218380;
    color: #fff;
    padding: 15px 60px;
    font-size: 22px;
    font-weight: bold;
    border-radius: 50px;
    z-index: 10;
}
.details-label::after {
    content: "";
    position: absolute;
    bottom: -15px;
    left: 50%;
    margin-left: -10px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 15px solid #218380;
}

.ba-illust { margin-bottom: -40px; position: relative; z-index: 2; }
.ba-illust img { max-width: 600px; width: 100%; }

.details-white-box {
    background: #fff;
    padding: 60px 40px;
    position: relative;
    z-index: 1;
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
    .hiraya-details-full { padding: 80px 0 60px; }
    .details-label { width: 85%; padding: 10px 0; font-size: 18px; top: -110px; }
    .bird-icon { width: 50px; position: relative; top: 0; margin: 0 auto 10px; display: block; }
}


.details-white-box h3 { color: #00736d; font-size: 20px; line-height: 1.5; margin-bottom: 30px; }
.details-text { text-align: left; display: inline-block; font-size: 14px; line-height: 2; color: #444; }

/* 浮いているカエル */
.flog-float {
    position: absolute;
    right: -30px;
    bottom: -50px;
    width: 100px;
    z-index: 3;
}

/* ボタン */
.details-btns {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 40px;
}
.btn-green {
    background: #72b0ab;
    color: #fff;
    text-decoration: none;
    padding: 15px 50px;
    border-radius: 50px;
    font-weight: bold;
    transition: 0.3s;
}
.btn-green:hover { background: #00736d; }

/* レスポンシブ */
@media screen and (max-width: 768px) {
    .bird-icon { width: 50px; position: static; margin-bottom: 10px; }
    .hiraya-title-area .main-title { font-size: 20px; }
    .hiraya-details { padding: 60px 15px 40px; margin-top: 60px; }
    .details-label { width: 80%; padding: 10px 0; font-size: 18px; }
    .details-white-box { padding: 40px 20px; }
    .details-white-box h3 { font-size: 16px; }
    .flog-float { width: 70px; right: 0; bottom: -30px; }
    .details-btns { flex-direction: column; gap: 10px; }
}

/* --- Works Section --- */
.works-bg-full {
    background-color: #72b0ab; /* 背景色100% */
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}

.works-container {
    position: relative;
}

/* 縦書きのサイドタイトル */
.works-side-title {
    position: absolute;
    left: 20px;
    top: 20px;
    color: rgba(255, 255, 255, 0.4);
    font-size: 80px;
    font-weight: bold;
    line-height: 1;
    writing-mode: vertical-rl;
    margin: 0;
}
.works-side-title span {
    display: block;
    writing-mode: vertical-rl;
    font-size: 24px;
    color: #00736d;
    margin-top: 10px;
}

.works-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.work-card {
    background: #fff;
    padding: 15px;
}
.work-thumb {
    aspect-ratio: 4/3;
    overflow: hidden;
    margin-bottom: 15px;
}
.work-thumb img {
    width: 100%; height: 100%; object-fit: cover;
}
.work-cat {
    display: inline-block;
    background: #00736d;
    color: #fff;
    font-size: 11px;
    padding: 2px 15px;
    border-radius: 20px;
    margin-bottom: 10px;
}
.work-title {
    font-size: 14px;
    font-weight: bold;
    line-height: 1.5;
    margin: 0;
}

.works-btn-area {
    text-align: center;
    margin-top: 40px;
}
.btn-white {
    display: inline-block;
    background: #fff;
    color: #72b0ab;
    text-decoration: none;
    padding: 12px 60px;
    border-radius: 50px;
    font-weight: bold;
    box-shadow: 0 3px 6px rgba(0,0,0,0.1);
}

/* --- Flow & Faq --- */
.info-flex {
    display: flex;
    gap: 60px;
    justify-content: space-between;
}
.info-item {
    flex: 1;
    text-align: center;
}
.info-head { margin-bottom: 20px; }
.info-head .en {
    font-size: 40px;
    color: #72b0ab;
    margin: 0;
    line-height: 1;
}
.info-head .ja {
    display: inline-block;
    font-weight: bold;
    position: relative;
    padding-bottom: 5px;
}
.info-head .ja::after {
    content: "";
    position: absolute;
    bottom: 0; left: 0;
    width: 100%; height: 3px;
    background: #fff100; /* 黄色のライン */
}

.info-img {
    margin-bottom: 20px;
}
.info-txt {
    font-size: 13px;
    text-align: left;
    margin-bottom: 20px;
    line-height: 1.8;
}
.btn-mint {
    display: inline-block;
    background: #72b0ab;
    color: #fff;
    text-decoration: none;
    padding: 10px 50px;
    border-radius: 50px;
    font-size: 14px;
}

/* --- Responsive --- */
@media screen and (max-width: 1024px) {
    .works-side-title { display: none; }
    .works-grid { grid-template-columns: repeat(2, 1fr); }
}

@media screen and (max-width: 768px) {
    .works-grid { grid-template-columns: 1fr; }
    .info-flex { flex-direction: column; gap: 40px; }
    .info-item { padding-bottom: 40px; border-bottom: 1px dotted #ccc; }
    .info-item:last-child { border-bottom: none; }
}


/* --- News Section --- */
.news-container { position: relative; min-height: 250px; }
.news-side-title {
    position: absolute; right: -60px; top: 0;
    color: rgba(0, 115, 109, 0.1); font-size: 80px; font-weight: bold;
    writing-mode: vertical-rl; margin: 0;
}
.news-side-title span {
    display: block; writing-mode: vertical-rl; font-size: 24px; color: #00736d; margin-top: 10px;
}
.news-list { max-width: 800px; margin: 0 auto; }
.news-item {
    display: flex; gap: 30px; padding: 20px;
    background: #e0f2f1; margin-bottom: 15px;
    text-decoration: none; color: #333; transition: 0.3s;
}
.news-item:hover { background: #d0e8e7; }
.news-item .date { color: #00736d; font-weight: bold; }
.news-item .title { margin: 0; flex: 1; }

/* --- Contact Section --- */
.top-contact { height: 500px; }
.contact-wrapper {
    height: 100%; background-size: cover; background-position: center;
    display: flex; justify-content: flex-end; /* 右側に寄せる */
}
.contact-overlay {
    width: 50%; height: 100%;
    background: rgba(0, 115, 109, 0.85); /* 緑の半透明斜め背景 */
    clip-path: polygon(20% 0, 100% 0, 100% 100%, 0% 100%);
    display: flex; align-items: center; justify-content: center; color: #fff;
}
.contact-inner { text-align: center; padding-left: 10%; }
.contact-inner .en { font-size: 60px; margin: 0; }
.contact-inner .ja { font-size: 20px; font-weight: bold; margin-bottom: 30px; }
.contact-inner .desc { font-size: 14px; line-height: 2; margin-bottom: 30px; }
.btn-contact {
    display: inline-block; background: #fff; color: #00736d;
    text-decoration: none; padding: 15px 60px; border-radius: 50px;
    font-weight: bold; font-size: 16px;
}

/* --- Footer --- */
.footer { background: #fff; padding-top: 60px; }
.footer-inner { display: flex; justify-content: space-between; gap: 40px; padding-bottom: 60px; }
.footer-logo img { height: 60px; margin-bottom: 20px; }
.footer-info .address { font-size: 13px; line-height: 1.8; margin-bottom: 15px; }
.footer-tel {
    font-size: 28px; font-weight: bold; color: #00736d; text-decoration: none;
    display: flex; align-items: center; gap: 10px;
}
.footer-nav { display: flex; gap: 50px; }
.nav-group { display: flex; flex-direction: column; gap: 10px; }
.nav-group a { text-decoration: none; color: #333; font-size: 13px; font-weight: bold; }
.nav-group a:hover { color: #00736d; }

.copyright {
    background: #00736d; color: #fff; text-align: center;
    padding: 15px 0; font-size: 12px;
}

/* --- Responsive --- */
@media screen and (max-width: 1024px) {
    .contact-overlay { width: 70%; clip-path: none; }
    .footer-inner { flex-direction: column; }
    .footer-nav { flex-wrap: wrap; gap: 30px; }
}
@media screen and (max-width: 768px) {
    .contact-wrapper { justify-content: center; }
    .contact-overlay { width: 100%; }
    .contact-inner { padding: 20px; }
}


/* --- Lower Page Header (Common) --- */
.page-header {
    background-color: #e0f2f1;
    padding: 60px 0;
    text-align: center;
max-width: 1200px;
margin: 0 auto;
}
.page-title-wrap i {
    font-size: 40px;
    color: #00736d;
    margin-bottom: 15px;
}
.page-title-wrap h1 {
    font-size: 28px;
    color: #333;
    letter-spacing: 0.1em;
}
.page-title-wrap h1 span {
    display: block;
    font-size: 14px;
    color: #72b0ab;
    margin-top: 5px;
    font-weight: normal;
}

/* --- Feature Page Layout --- */
.feature-lead {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 80px;
    font-weight: bold;
    color: #00736d;
    line-height: 2;
}

.feature-row {
    display: flex;
    align-items: center;
    gap: 60px;
    margin-bottom: 100px;
}
.feature-row.reverse {
    flex-direction: row-reverse;
}

.feature-img {
    flex: 0 0 45%;
}
.feature-img img {
    width: 100%;
    border-radius: 10px;
    box-shadow: 10px 10px 0 #e0f2f1;
}

.feature-body {
    flex: 1;
}
.feature-num {
    font-family: 'Arial', sans-serif;
    font-size: 40px;
    font-weight: bold;
    color: rgba(114, 176, 171, 0.3);
    line-height: 1;
    margin-bottom: 10px;
}
.feature-catch {
    font-size: 22px;
    color: #00736d;
    margin-bottom: 20px;
    line-height: 1.5;
    position: relative;
    padding-bottom: 15px;
}
.feature-catch::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 3px;
    background: #fff100;
}
.feature-txt {
    font-size: 15px;
    line-height: 2;
    color: #444;
}

/* --- Responsive --- */
@media screen and (max-width: 991px) {
    .feature-row, .feature-row.reverse {
        flex-direction: column;
        gap: 30px;
        margin-bottom: 60px;
    }
    .feature-img {
        width: 100%;
    }
}

/* --- Merit Page Specific --- */
.merit-lead {
    text-align: center;
    margin-bottom: 60px;
    font-size: 16px;
    line-height: 1.8;
}

.merit-item {
    margin-bottom: 80px;
}

.merit-label {
    align-items: center;
    background: #00736d;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    padding: 10px 30px 10px 15px;
    margin-bottom: 30px;
}

.merit-label span {
    font-size: 28px;
    margin-right: 15px;
    font-family: 'Arial', sans-serif;
    opacity: 0.6;
}

.merit-flex {
    display: flex;
    align-items: center;
    gap: 50px;
}

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

.merit-img {
    flex: 0 0 45%;
}

.merit-img img {
    width: 100%;
    border-radius: 8px;
    border: 5px solid #e0f2f1;
}

.merit-body h3 {
    color: #00736d;
    font-size: 22px;
    margin-bottom: 20px;
    line-height: 1.4;
    border-left: 5px solid #fff100;
    padding-left: 15px;
}

.merit-body p {
    font-size: 16px;
    line-height: 2.4;
    color: #444;
}

/* CTA Area */
.merit-cta {
    background: #e0f2f1;
    padding: 60px 20px;
    text-align: center;
    border-radius: 10px;
    margin-top: 40px;
}

.merit-cta h3 {
    color: #00736d;
    font-size: 24px;
    margin-bottom: 15px;
}

.merit-cta p {
    margin-bottom: 30px;
    font-size: 16px;
}

/* --- Responsive --- */
@media screen and (max-width: 768px) {
    .merit-flex, .merit-flex.reverse {
        flex-direction: column;
        gap: 20px;
    }
    .merit-img {
        width: 100%;
    }
    .merit-body h3 {
        font-size: 18px;
    }
    .merit-label {
        font-size: 18px;
        padding: 8px 20px 8px 10px;
    }
}


/* --- Reform Page Specific --- */
.reform-lead {
    text-align: center;
    margin-bottom: 50px;
    font-size: 16px;
    line-height: 2;
}

/* Main Banner */
.reform-main-banner {
    background: #72b0ab;
    border-radius: 15px;
    padding: 40px;
    color: #fff;
    margin-bottom: 60px;
}
.banner-inner {
    display: flex;
    align-items: center;
    gap: 40px;
}
.banner-txt { flex: 1; }
.banner-txt h2 { font-size: 26px; margin-bottom: 15px; }
.banner-txt h2 span { color: #fff100; }
.banner-txt p { font-size: 16px; margin-bottom: 25px; line-height: 1.8; }
.banner-img { flex: 0 0 40%; }
.banner-img img { width: 100%; border-radius: 10px; }

.btn-banner {
    display: inline-block;
    background: #00736d;
    color: #fff;
    padding: 12px 30px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    transition: 0.3s;
}
.btn-banner:hover { transform: scale(1.05); }

/* Service Grid */
.reform-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 60px;
}
.reform-card {
    border: 2px solid #e0f2f1;
    border-radius: 10px;
    overflow: hidden;
}
.card-head {
    background: #e0f2f1;
    padding: 15px;
    text-align: center;
}
.card-head h3 { color: #00736d; font-size: 18px; margin: 0; }
.card-body { padding: 30px; }
.card-body p { font-size: 15px; line-height: 1.8; margin-bottom: 20px; }

.check-list {
    list-style: none; padding: 0;
}
.check-list li {
    position: relative;
    padding-left: 25px;
    font-weight: bold;
    font-size: 15px;
    margin-bottom: 10px;
}
.check-list li::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    color: #00736d;
}

/* Commitment Section */
.reform-commitment {
    display: flex;
    align-items: center;
    background: #f9f9f9;
    padding: 40px;
    border-radius: 10px;
    gap: 30px;
}
.commit-img img { width: 80px; }
.commit-txt h3 { color: #00736d; font-size: 20px; margin-bottom: 10px; }
.commit-txt p { font-size: 15px; margin: 0; line-height: 1.8; }

/* --- Responsive --- */
@media screen and (max-width: 768px) {
    .banner-inner { flex-direction: column; text-align: center; }
    .reform-grid { grid-template-columns: 1fr; }
    .reform-commitment { flex-direction: column; text-align: center; }
}


/* --- Flow Page Layout --- */
.flow-lead {
    text-align: center;
    margin-bottom: 80px;
    font-size: 16px;
    line-height: 1.8;
}

.flow-container {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
}

/* 縦のライン */
.flow-container::before {
    content: "";
    position: absolute;
    left: 45px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #e0f2f1;
}

.flow-step {
    display: flex;
    align-items: flex-start;
    gap: 40px;
    margin-bottom: 60px;
    position: relative;
}

.flow-step:last-child {
    margin-bottom: 0;
}

/* 番号円形 */
.flow-num {
    flex: 0 0 90px;
    height: 90px;
    background: #fff;
    border: 3px solid #72b0ab;
    border-radius: 50%;
    color: #00736d;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
    font-family: 'Arial', sans-serif;
    position: relative;
    z-index: 2;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.flow-content {
    flex: 1;
    background: #fff;
    padding: 30px;
    border-radius: 10px;
    border: 1px solid #e0f2f1;
    box-shadow: 4px 4px 0 #e0f2f1;
}

.flow-title {
    font-size: 20px;
    color: #00736d;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.flow-title::before {
    content: "STEP";
    font-size: 11px;
    background: #72b0ab;
    color: #fff;
    padding: 2px 8px;
    border-radius: 3px;
    vertical-align: middle;
}

.flow-txt {
    font-size: 16px;
    line-height: 1.8;
    color: #444;
    margin: 0;
}

.flow-bottom-note {
    text-align: center;
    margin-top: 60px;
    font-size: 15px;
    color: #888;
}

/* --- Responsive --- */
@media screen and (max-width: 768px) {
    .flow-container::before {
        left: 25px;
    }
    .flow-step {
        gap: 20px;
    }
    .flow-num {
        flex: 0 0 50px;
        height: 50px;
        font-size: 16px;
        border-width: 2px;
    }
    .flow-content {
        padding: 20px;
    }
    .flow-title {
        font-size: 17px;
    }
}


/* --- Company Page Layout --- */
.company-intro {
    margin-bottom: 80px;
}

.intro-flex {
    display: flex;
    gap: 60px;
    align-items: flex-start;
}

.intro-img {
    flex: 0 0 350px;
}

.intro-img img {
    width: 100%;
    margin-bottom: 15px;
}

.img-caption {
    text-align: center;
    font-weight: bold;
    color: #00736d;
}

.intro-title {
    font-size: 24px;
    color: #00736d;
    line-height: 1.5;
    margin-bottom: 30px;
    position: relative;
    padding-bottom: 15px;
}

.intro-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 3px;
    background: #fff100;
}

.intro-txt p {
    font-size: 16px;
    line-height: 2;
    margin-bottom: 20px;
}

/* Profile Box */
.profile-box {
    background: #f4f9f8;
    padding: 40px;
    border-radius: 10px;
    margin-bottom: 80px;
    border-left: 8px solid #72b0ab;
}

.box-title {
    font-size: 20px;
    color: #00736d;
    margin-bottom: 20px;
}

.profile-box p {
    font-size: 16px;
    line-height: 1.8;
    margin: 0;
}

/* Info Table */
.company-info-table {
    max-width: 900px;
    margin: 0 auto;
}

.common-table {
    width: 100%;
    border-collapse: collapse;
    border-top: 2px solid #00736d;
}

.common-table th, .common-table td {
    padding: 20px !important;
    border-bottom: 1px solid #e0f2f1;
    font-size: 16px;
}

.common-table th {
    width: 30%;
    background: #f9fdfd;
    text-align: left;
    color: #00736d;
    vertical-align: top;
}

/* --- Responsive --- */
@media screen and (max-width: 991px) {
    .intro-flex {
        flex-direction: column;
    }
    .intro-img {
        width: 100%;
        max-width: 400px;
        margin: 0 auto 40px;
    }
    .common-table th {
        width: 100%;
        display: block;
        padding-bottom: 5px;
    }
    .common-table td {
        width: 100%;
        display: block;
        padding-top: 5px;
    }
}


/* --- FAQ Page Layout --- */
.faq-lead {
    text-align: center;
    margin-bottom: 60px;
    font-size: 16px;
    line-height: 1.8;
}

.faq-container {
    max-width: 900px;
    margin: 0 auto;
}

.faq-item {
    background: #fff;
    border: 1px solid #e0f2f1;
    border-radius: 8px;
    margin-bottom: 15px;
    overflow: hidden;
    transition: 0.3s;
}

/* 質問部分 */
.faq-q {
    list-style: none; /* デフォルトの矢印を消す */
    cursor: pointer;
    padding: 25px 60px 25px 70px; /* 左側にQのための余白 */
    font-weight: bold;
    font-size: 17px;
    color: #333;
    position: relative;
    line-height: 1.5;
}

/* Qの擬似要素 */
.faq-q::before {
    content: "Q";
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'Arial', sans-serif;
    font-size: 28px;
    font-weight: bold;
    color: #72b0ab;
}

/* 矢印の擬似要素 */
.faq-q::after {
    content: "\f078";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    right: 25px;
    top: 50%;
    transform: translateY(-50%);
    color: #ccc;
    transition: 0.3s;
}

/* 開いている時の矢印回転 */
.faq-item[open] .faq-q::after {
    transform: translateY(-50%) rotate(180deg);
    color: #00736d;
}

/* 回答部分 */
.faq-a {
    padding: 0 30px 30px 70px; /* Qと位置を合わせる */
    position: relative;
    border-top: 1px solid #f5f5f5;
    background: #f9fdfd;
}

/* Aの擬似要素 */
.faq-a::before {
    content: "A";
    position: absolute;
    left: 20px;
    top: 25px;
    font-family: 'Arial', sans-serif;
    font-size: 28px;
    font-weight: bold;
    color: #fff100;
    -webkit-text-stroke: 1px #e6d800; /* 視認性向上のための薄い縁取り */
}

.faq-a p {
    font-size: 16px;
    line-height: 1.8;
    color: #444;
    margin: 0;
    padding-top: 25px;
}

/* ホバー時の背景変化 */
.faq-q:hover {
    background-color: #f0f9f8;
}

/* --- Responsive --- */
@media screen and (max-width: 768px) {
    .faq-q {
        font-size: 15px;
        padding: 20px 50px 20px 55px;
    }
    .faq-q::before, .faq-a::before {
        font-size: 22px;
        left: 15px;
    }
    .faq-a {
        padding: 0 20px 20px 55px;
    }
}



/* --- Privacy Page Layout --- */
.privacy-content {
    max-width: 800px;
    margin: 0 auto;
    background: #fff;
    padding: 40px;
    border: 1px solid #e0f2f1;
    line-height: 1.8;
}

.priv-t {
    font-size: 22px;
    color: #00736d;
    text-align: center;
    margin: 40px 0 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #72b0ab;
}
.priv-t:first-child { margin-top: 0; }

.priv-t2 {
    font-size: 18px;
    color: #333;
    margin: 30px 0 10px;
    padding-left: 10px;
    border-left: 4px solid #fff100;
}

.priv-txt {
    font-size: 15px;
    margin-bottom: 15px;
    color: #444;
}

.priv-list {
    margin-bottom: 20px;
    padding-left: 20px;
}
.priv-list li {
    font-size: 15px;
    margin-bottom: 5px;
    list-style-type: disc;
}

.priv-footer {
    text-align: right;
    margin-top: 50px;
    font-size: 15px;
    color: #333;
    line-height: 1.6;
}

/* --- Responsive --- */
@media screen and (max-width: 768px) {
    .privacy-content {
        padding: 20px;
    }
    .priv-t { font-size: 19px; }
    .priv-t2 { font-size: 17px; }
}

/* --- Contact Page Specific --- */
.contact-lead-box {
    text-align: center;
    margin-bottom: 60px;
}
.contact-lead-box p { font-size: 16px; line-height: 1.8; margin-bottom: 30px; }

.contact-tel-area {
    background: #f9fdfd;
    border: 2px solid #72b0ab;
    padding: 30px;
    display: inline-block;
    border-radius: 10px;
}
.tel-label { font-weight: bold; color: #00736d; margin-bottom: 5px !important; }
.tel-number {
    font-size: 36px; font-weight: bold; color: #00736d; text-decoration: none;
    display: flex; align-items: center; justify-content: center; gap: 10px;
}
.tel-time { font-size: 14px; color: #666; margin-top: 5px !important; }

/* Form Styles */
.contact-form-wrap { max-width: 800px; margin: 0 auto; }
.form-row { margin-bottom: 30px; }
.form-row label { display: block; font-weight: bold; margin-bottom: 10px; font-size: 16px; }
.required { background: #ff4b4b; color: #fff; font-size: 11px; padding: 2px 6px; border-radius: 3px; margin-left: 10px; vertical-align: middle; }
.optional { background: #999; color: #fff; font-size: 11px; padding: 2px 6px; border-radius: 3px; margin-left: 10px; vertical-align: middle; }

/* Input field styles */
.wpcf7-form-control:not(.wpcf7-submit) {
    width: 100%; padding: 15px; border: 1px solid #ccc; border-radius: 5px; font-size: 16px; background: #fff; box-sizing: border-box;
}
.wpcf7-form-control:focus { border-color: #00736d; outline: none; box-shadow: 0 0 5px rgba(0,115,109,0.2); }
textarea { height: 200px; }

.wpcf7-list-item { display: block; margin: 0 0 10px 0; }

.form-submit { text-align: center; margin-top: 40px; }
.privacy-note { font-size: 14px; margin-bottom: 20px; }
.privacy-note a { color: #00736d; text-decoration: underline; }

.wpcf7-submit {
    background: #00736d; color: #fff; border: none; padding: 20px 80px; font-size: 20px; font-weight: bold; border-radius: 50px; cursor: pointer; transition: 0.3s;
}
.wpcf7-submit:hover { background: #72b0ab; transform: translateY(-3px); }

/* --- Responsive --- */
@media screen and (max-width: 768px) {
    .tel-number { font-size: 28px; }
    .wpcf7-submit { width: 100%; padding: 15px; }
}

/* --- News Archive (Side Title Removed) --- */
.archive-container {
    max-width: 900px; /* 全体を中央寄せ */
}

.archive-list {
    margin: 0 auto;
}

.archive-item {
    border-bottom: 1px solid #e0f2f1;
}

.archive-item a {
    display: flex;
    gap: 30px;
    padding: 25px 15px;
    text-decoration: none;
    color: #333;
    transition: 0.3s;
}

.archive-item a:hover {
    background: #f9fdfd;
}

.archive-date {
    font-weight: bold;
    color: #00736d;
    font-family: 'Arial', sans-serif;
    min-width: 100px;
}

.archive-title {
    font-size: 16px;
    margin: 0;
    font-weight: bold;
    flex: 1;
    line-height: 1.5;
}

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

.pagination .page-numbers {
    display: inline-block;
    padding: 10px 18px;
    background: #fff;
    border: 1px solid #72b0ab;
    color: #72b0ab;
    text-decoration: none;
    border-radius: 5px;
}

.pagination .page-numbers.current {
    background: #00736d;
    color: #fff;
    border-color: #00736d;
}

/* --- News Single --- */
.container-narrow {
    max-width: 800px;
}

.single-header {
    border-bottom: 2px solid #72b0ab;
    padding-bottom: 20px;
    margin-bottom: 40px;
}

.single-date {
    color: #00736d;
    font-weight: bold;
    margin-bottom: 10px;
}

.single-title {
    font-size: 24px;
    color: #333;
    line-height: 1.4;
    margin: 0;
}

.entry-content {
    font-size: 16px;
    line-height: 2;
    color: #444;
}

.single-footer {
    margin-top: 60px;
    text-align: center;
    border-top: 1px solid #eee;
    padding-top: 40px;
}

/* --- Responsive --- */
@media screen and (max-width: 768px) {
    .archive-item a {
        flex-direction: column;
        gap: 5px;
        padding: 20px 10px;
    }
    .single-title {
        font-size: 18px;
    }
}

/* 施工実績内の写真横並びレイアウト */
.works-photo-row {
    display: flex;
    gap: 20px; /* 写真の間の隙間 */
    margin-bottom: 20px; /* 行ごとの下の隙間 */
}

.works-photo-item {
    flex: 1; /* 横幅を均等にする */
}

.works-photo-item img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px; /* 角を少し丸く */
    box-shadow: 0 2px 8px rgba(0,0,0,0.05); /* 軽い影で高級感を出す */
}

/* スマホ表示（768px以下）では縦に1枚ずつ並べる */
@media screen and (max-width: 768px) {
    .works-photo-row {
        flex-direction: column;
        gap: 15px;
    }
}


.trouble {
    position: relative;
    background-color: #fff;
    background-image: 
        linear-gradient(90deg, rgba(200, 200, 200, 0.3) 1px, transparent 1px),
        linear-gradient(rgba(200, 200, 200, 0.3) 1px, transparent 1px);
    background-size: 30px 30px;
	border-bottom: 3px solid #eeeeee;
}
.arrow-bottom {
    position: absolute;
	bottom: -40px;
}

.trouble .container {
    position: relative;
    z-index: 1;
}

.trouble-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-top: 40px;
}

.trouble-item {
    background: #fff;
    padding: 20px;
    border: 1px solid #72b0ab;
    border-radius: 4px;
    box-shadow: 5px 5px 0px rgba(114, 176, 171, 0.1);
    font-size: 16px;
    font-weight: bold;
    color: #333;
    line-height: 1.6;
    display: flex;
    align-items: center;
}

/* チェックアイコンの追加 */
.trouble-item::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: #72b0ab;
    margin-right: 15px;
    font-size: 20px;
}



@media screen and (max-width: 768px) {
    .trouble-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .trouble-item {
        font-size: 16px;
        padding: 20px;
    }
}

/* カードヘッダーの調整 */
.card-head {
    text-align: center;
    padding: 30px 20px;
    background: #f9fdfd; /* 非常に薄いミントグリーン */
    border-bottom: 2px solid #72b0ab;
}

/* アイコン自体のスタイル */
.card-icon {
    display: block;
    font-size: 40px;      /* アイコンの大きさ */
    color: #72b0ab;      /* コーポレートカラー */
    margin-bottom: 15px; /* 見出しとの間隔 */
    opacity: 0.8;
}

.card-head h3 {
    font-size: 20px;
    font-weight: bold;
    color: #333;
    margin: 0;
}

/* リストのチェックマークもFont Awesomeに合わせる場合 */
.check-list {
    list-style: none;
    padding: 0;
    margin-top: 15px;
}

.check-list li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 10px;
    font-weight: bold;
    color: #444;
}

.check-list li::before {
    content: "\f00c"; /* チェックマーク */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    color: #72b0ab;
}

/* レスポンシブ */
@media screen and (max-width: 768px) {
    .card-icon {
        font-size: 32px;
    }
    .card-head h3 {
        font-size: 18px;
    }
.footer-nav {
    display: block;
        line-height: 2.4;
	}
	

.nav-group {
    display: flex;
    flex-direction: column;
    gap: 0;
}
}

@media screen and (max-width: 1151px) {
    /* --- メニューを表示させる設定 --- */
    .g-nav.is-active {
        display: block; /* 非表示だったものを表示 */
        position: fixed;
        top: 90px; /* ヘッダーの高さ */
        left: 0;
        width: 100%;
        height: calc(100vh - 90px);
        background: rgba(255, 255, 255, 0.98);
        z-index: 999;
        padding: 40px 20px;
    }

    .g-nav.is-active ul {
        flex-direction: column; /* 縦並びにする */
        align-items: center;
        gap: 30px;
    }

    .g-nav.is-active a {
        font-size: 18px;
    }

    /* --- ハンバーガーを「×」にするアニメーション --- */
    .hamburger.is-active span:nth-child(1) {
        transform: translateY(11px) rotate(45deg);
    }
    .hamburger.is-active span:nth-child(2) {
        opacity: 0; /* 真ん中の線を消す */
    }
    .hamburger.is-active span:nth-child(3) {
        transform: translateY(-11px) rotate(-45deg);
    }
    
    /* spanにアニメーション時間を追加（元の .hamburger span に追記） */
    .hamburger span {
        transition: all 0.3s;
    }
}


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

.news-side-title {
    position: unset;
    top: 0;
    color: rgba(0, 115, 109, 0.1);
    font-size: 80px;
    font-weight: bold;
    writing-mode: unset;
    margin: 0;
    text-align: center;
}

.news-side-title span {
    display: block;
    writing-mode: unset;
    font-size: 24px;
    color: #00736d;
    margin-top: unset;
    margin-bottom: 30px;
}
}


/* スライド全体のコンテナにフィルターを重ねる */
.mv-slides::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.1); /* 10%の黒フィルター */
    z-index: 1; /* 画像(z-indexなし)より上で、文字(z-index調整)より下 */
    pointer-events: none; /* フィルター越しに下の要素を触れるようにする */
}

/* キャッチコピーをフィルターより前面に出す */
.mv-catch {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    max-width: 600px;
    opacity: 0;
    animation: fadeIn 2s forwards 0.5s;
    z-index: 2; /* フィルター(z-index: 1)よりも手前に配置 */
}




.work-card a{
	text-decoration: none !important;
    color: #00736d;
}


/* 一覧のラベル（画像の上に浮かせる） */
.works-img {
    position: relative;
}

.works-genre-label {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    background: #00736d; /* コーポレートカラー */
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    padding: 3px 12px;
    border-radius: 2px;
}

/* 詳細ページのラベル */
.works-single-genre {
    display: inline-block;
    background: #e0f2f1;
    color: #00736d;
    padding: 2px 15px;
    font-size: 13px;
    font-weight: bold;
    border-radius: 4px;
    margin-bottom: 10px;
}

.works-post-title {
    margin-top: 5px;
}