/* ========================================================= */
/* 共通リセット & 基本設定 */
/* ========================================================= */
* {
    /* すべての要素のpaddingとborderをwidth/heightに含める */
    box-sizing: border-box; 
    margin: 0;
    padding: 0;
}

body {
    /* 見やすいフォントを設定 */
    font-family: 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif; 
    color: #000000; /* 基本の文字色 */
    line-height: 1.6; /* 行間 */
}

a {
    text-decoration: none; /* リンクの下線を消す */
    color: inherit; /* リンクの色を親要素から継承 */
    cursor: pointer; /* マウスカーソルをポインターにする */
}

/* ========================================================= */
/* ヘッダー全体 (Header) */
/* ========================================================= */
header {
    background-color: #fff; /* 背景色を白に設定 */    
    display: block; 
    align-items: center;
}

/* -------------------- 1段目: ロゴ + SNSエリア (hd_logo_sns) -------------------- */
.hd_logo_sns {
    display: flex; /* ロゴとSNSバーを横並びにする */
    align-items: center; /* 垂直方向の中央揃え */
    margin: 40px auto;
    /* 修正点: ロゴを左端、SNSバーを右端に配置する */
    justify-content: space-between; 
    width: 100%; 
    max-width: 1200px;
}

/* ロゴ画像 (hd_logobutton内のimg) */
.hd_logobutton img {
    max-width: 230px; /* ロゴの最大幅 */
    height: 50px;
    vertical-align: bottom;
}

/* -------------------- SNSバー (Font Awesome対応) -------------------- */
.hd_snsbar {
    display: flex; /* SNSボタンを横並びにする */
    gap: 15px; /* ボタン間のスペース */
    align-items: center; /* アイコンを垂直中央に */
}

/* SNSボタンのコンテナ（<a>タグ） */
.hd_snsbutton {
    font-size: 0; /* <a>タグの文字サイズは0にして余計な隙間をなくす */
}

/* Font Awesome アイコン本体（<i>タグ） */
.hd_snsbutton i {
    font-size: 42px; /* アイコンのサイズ */
    color: #000000; /* アイコンの色（デフォルト：グレー） */
    transition: color 0.3s; /* ホバー時の変化を滑らかにする */
}

/* ホバー時の装飾 */
.hd_snsbutton:hover i {
    color: #333; /* マウスを乗せたら濃い色に */
}

/* -------------------- 2段目: メニューエリア (hd_menu) -------------------- */
.hd_menu {
    display: flex;
    width: 100%; 
    max-width: 1200px; /* 1段目と合わせる */
    margin: 0 auto;
    margin-top: 20px;
}

/* メニューボタン (hd_menubutton) */
.hd_menubutton {
    /* 修正ポイント1: flex: 1; で1200pxをボタンの数で均等に割る */
    flex: 1; 
    
    /* 修正ポイント2: 枠の中のテキストを中央に寄せる */
    display: flex;
    justify-content: center;
    align-items: center;
    
    border-right: 1px solid #000; 
    padding: 0 20px; /* 左右のpaddingはflex:1があるので0でOK */
    text-decoration: none;
}

/* 一番最初のボタンの左端設定 */
.hd_menubutton:first-child {
    border-left: 1px solid #000;
}

/* メニューボタンの文字 (hd_menubutton内のp) */
.hd_menubutton p {
    font-size: 16px;
    font-weight: bold;
    margin: 0;
    white-space: nowrap; /* 改行防止 */
    text-align: center;
}

/* ========================================================= */
/* メインコンテンツ (メインビジュアル) */
/* ========================================================= */
main {
    width: 100%;
}

.main_visual {
    position: relative;
    width: 100%;
}

/* スライドショーのコンテナ */
.main_slideshow_con {
    position: relative; /* 子要素の絶対配置の基準にする */
    width: 100%;
    height: 70vh; /* 画面の高さの70% */
    overflow: hidden;
    margin-top: 20px;
}

/* スライドショー本体 */
.main_slideshow {
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* スライドする各画像の設定 */
.main_slideshow_img {
    position: absolute; /* 画像をすべて重ねる */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画像の比率を保ったまま枠いっぱいに広げる */
    object-position: center;
    opacity: 0; /* 最初は透明 */
    animation: slideshowAnime 30s infinite; /* 30秒のアニメーションを繰り返す */
}

/* 各画像の表示タイミングをずらす（3枚の場合） */
.main_slideshow_img:nth-child(1) { animation-delay: 0s; }
.main_slideshow_img:nth-child(2) { animation-delay: 10s; }
.main_slideshow_img:nth-child(3) { animation-delay: 20s; }

/* ふわっと切り替わるアニメーションの設定 */
@keyframes slideshowAnime {
    0% { opacity: 0; }
    10% { opacity: 1; } /* 10%の時点で表示完了 */
    30% { opacity: 1; } /* 30%まで表示を維持 */
    40% { opacity: 0; } /* 40%で消える */
    100% { opacity: 0; }
}

/* --- メインビジュアルのテキスト重ね合わせ --- */

.main_text {
    position: absolute; /* 親要素 .main_slideshow_con を基準に配置 */
    top: 50%;           /* 上から50%の位置 */
    left: 50%;          /* 左から50%の位置 */
    transform: translate(-50%, -50%); /* 自身の幅・高さの半分戻して真ん中へ */
    z-index: 10;        /* スライドショー(z-index: 1)より上に表示 */
    
    text-align: center; /* 文字を中央揃え */
    color: #ffffff;     /* 文字色を白に（画像の上で見やすくするため） */
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5); /* 文字に影をつけて視認性をアップ */
    width: 100%;        /* 幅いっぱいに広げて中央寄せを安定させる */
}

/* 1行目：Wellness life & Wellbeing */
.main_text p:first-child {
    font-size: 42px;
    letter-spacing: 0.1em; /* 字間を少し広げておしゃれに */
    margin-bottom: 20px;
}

/* 2行目：下関 × 不動産 × まちづくり */
.main_text p:last-child {
    font-size: 140px;
    font-weight: bold;
    line-height: 1;
}

/* --- スライドショーの下の丸ポチエリア --- */

.slideshow_dots_container {
    width: 100%;
    padding: 15px 0; /* ポチの上下の余白 */
    background-color: #fff; /* 背景を白に（お好みで調整してください） */
    display: flex;
    justify-content: center;
}

.slideshow_dots {
    display: flex;
    gap: 10px; /* ポチ同士の間隔 */
}

.dot {
    width: 12px;
    height: 12px;
    background-color: #ddd; /* 通常時の色（薄いグレー） */
    border-radius: 50%;
    animation: dotAnime 30s infinite; /* 画像と同じ30秒周期 */
}

/* 各ポチの点灯タイミングを画像(0s, 10s, 20s)に合わせる */
.dot:nth-child(1) { animation-delay: 0s; }
.dot:nth-child(2) { animation-delay: 10s; }
.dot:nth-child(3) { animation-delay: 20s; }

/* ポチの色が変わるアニメーション */
@keyframes dotAnime {
    0% { background-color: #000; transform: scale(1.2); } /* 自分の番は黒く、少し大きく */
    10% { background-color: #000; transform: scale(1.2); }
    30% { background-color: #000; transform: scale(1.2); }
    33% { background-color: #ddd; transform: scale(1); } /* 次へ移る */
    100% { background-color: #ddd; transform: scale(1); }
}

/* --- サブメニューエリア (submenu) --- */

.submenu {
    display: flex;
    justify-content: space-between; /* 4つの項目を等間隔に配置 */
    width: 100%;
    max-width: 1200px;
    margin: 40px auto; /* 上下に余白を作り、中央寄せ */
    gap: 60px; /* 項目同士の隙間 */
}

/* 各メニューのコンテナ */
.submenu_con {
    flex: 1; /* 4つを均等な幅にする */
    display: flex;
    flex-direction: column; /* ボタンと英語テキストを縦に並べる */
    align-items: center; /* 中央揃え */
}

/* --- 黒いリンクボタン (テキスト中央・矢印右端) --- */

.link_button {
    display: flex;        /* Flexboxを有効化 */
    align-items: center;  /* 垂直中央に配置 */
    justify-content: center; /* テキストを水平中央に配置 */
    background-color: #000;
    color: #ffffff;
    padding: 15px 30px;   /* 上下を少し厚くすると高級感が出ます */
    width: 100%;
    position: relative;   /* 矢印を右端に固定するための基準 */
    transition: background-color 0.3s, transform 0.2s;
    margin-bottom: 10px;
}

/* 中央のテキスト設定 */
.link_button p {
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 0.1em;
    margin: 0;
}

/* 右端の矢印アイコン設定 */
.link_button i {
    position: absolute;   /* 絶対配置に切り替え */
    right: 20px;          /* 右端から20pxの位置に固定 */
    font-size: 16px;
    transition: transform 0.3s ease; /* 動きを滑らかに */
}

/* --- ボタンホバー時の動き --- */

.link_button:hover {
    background-color: #333;
    transform: translateY(-2px); /* 軽く浮かせる */
}

/* ホバー時に右端の矢印だけをさらに右に動かす */
.link_button:hover i {
    transform: translateX(5px);
}

/* 英語の補足テキスト (Coworking spaceなど) */
.submenu_con > p {
    font-size: 18px;
    font-weight: 600;
}

/* --- 株式会社ARCHについて セクション (top_about) --- */

.top_about {
    background-color: #FAF5EF;
    padding: 50px 0; /* 上下にゆとりを持たせて高級感を出す */
}

.top_about_text {
    max-width: 800px; /* 本文が横に長くなりすぎないように制限 */
    margin: 0 auto;
    padding: 0 40px; /* スマホ・タブレット時の端の余白 */
}

/* 見出し：ARCHの目指す地域社会 */
.top_about_text p:first-of-type {
    text-align: center;
    font-size: 32px; /* 少し大きく */
    font-weight: bold;
    margin-bottom: 20px; /* 本文との間隔 */
}

/* 本文テキスト */
.top_about_text p:last-of-type {
    font-size: 16px;
    margin-bottom: 60px; /* ボタンとの間隔 */
}

.top_about_link {
    text-align: center;
}

/* top_about内のボタン専用設定 */
.top_about_button {
    display: flex; /* 中央寄せを維持 */
    width: 300px;  /* ボタンの幅を適切に制限 */
    margin-left: auto; /* 中央に配置 */
    margin-right: auto;
}

.top_about_link > p {
    font-size: 18px;
    font-weight: 600;
}

/* ========================================================= */
/* お知らせセクション (top_news) カード型デザイン */
/* ========================================================= */
.top_news {
    padding: 50px 0;
    width: 100%;
    /* コンテンツ幅を最大1200pxにして中央寄せ */
    max-width: 1200px; 
    margin: 0 auto;
}

/* --- セクションタイトル --- */
.section_title {
    text-align: center;
    margin-bottom: 60px;
}

.section_title h2 {
    font-size: 32px;
    font-weight: bold;
    letter-spacing: 0.1em;
    margin: -10px;
}

.section_title p {
    font-size: 18px;
    font-weight: bold;
}

/* --- ニュース記事一覧（横並び） --- */
.top_newsviw {
    display: flex; /* 横並びにする */
    justify-content: space-between; /* 均等に配置 */
    gap: 30px; /* カード間の隙間 */
    margin-bottom: 60px;
    padding: 0 20px; /* スマホなどで端がくっつかないように */
}

/* 記事カード単体 */
.news_card {
    width: 32%; /* 3つ並べるので約3分の1の幅に */
    display: block;
    text-decoration: none;
    transition: opacity 0.3s;
}

.news_card:hover {
    opacity: 0.7; /* ホバー時に少し薄くする */
}

/* サムネイル画像エリア */
.news_img {
    width: 100%;
    /* 画像の比率を固定（横4:縦3くらい） */
    aspect-ratio: 4 / 3; 
    background-color: #eee; /* 画像がない時のグレー背景 */
    margin-bottom: 15px;
    overflow: hidden;
}

.news_img img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 枠いっぱいにトリミングして表示 */
}

/* 日付とタグのエリア */
.news_meta {
    display: flex;
    align-items: center; /* 垂直方向中央揃え */
    gap: 15px; /* 日付とタグの間隔 */
    margin-bottom: 10px;
    flex-wrap: wrap; /* 画面が狭い時に折り返す */
}

.news_date {
    font-size: 14px;
    color: #666;
    font-family: 'Helvetica', 'Arial', sans-serif;
}

.news_tags {
    display: flex;
    gap: 5px; /* タグ同士の間隔 */
}

.news_tag {
    font-size: 11px;
    background-color: #000;
    color: #fff;
    padding: 3px 10px;
    font-weight: bold;
    display: inline-block;
}

/* 記事タイトル（抜粋） */
.news_title {
    font-size: 15px;
    line-height: 1.6;
    text-align: left; /* 左揃え */
}

/* --- ボタンエリア --- */
.news_button_area {
    text-align: center;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}

/* Moreテキスト */
.more_text {
    margin-top: 10px;
    font-size: 16px;
    font-weight: bold;
    font-family: 'Helvetica', 'Arial', sans-serif;
}

/* お知らせボタン（もし個別にスタイル調整したい場合） */
.news_more_button {
    margin: auto;
    width: 300px;
}

/* ========================================================= */
/* コワーキングセクション (top_coworking) 完全版 */
/* ========================================================= */
.top_coworking {
    background-color: #FAF5EF;
    width: 100%;
    min-height: 750px; /* セクションの高さを確保 */
    position: relative; /* 子要素（画像）の配置基準 */
    display: flex;
    align-items: center; /* テキストを上下中央に */
    overflow: hidden;
}

/* テキストが入る枠（1200px中央寄せ） */
.top_coworking_inner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    position: relative;
    z-index: 2; /* 画像より手前に表示 */
    /* display: flex; は削除（テキストエリアだけなので不要） */
}

/* --- 左側：テキストエリア --- */
.top_coworking_content {
    width: 50%; /* 1200pxの半分（左側）を使う */
}

/* テキストスタイル（変更なし） */
.coworking_heading { margin-bottom: 32px; }
.coworking_heading h2 { font-size: 32px; font-weight: bold; margin-bottom: -10px; }
.coworking_heading p { font-size: 16px; font-weight: bold; margin-left: 20px; margin-bottom: 60px; }
.coworking_catch { margin-bottom: 50px; }
.coworking_catch p { font-size: 32px; font-weight: bold; margin-bottom: 10px; }
.coworking_catch h3 { font-size: 60px; font-weight: 900; line-height: 1.1; margin-bottom: 60px; }
.coworking_btns { display: flex; gap: 20px; margin-top: 40%; }
.coworking_btn_item { width: 220px; }
.btn_caption { margin-top: 8px; font-size: 14px; font-weight: bold; text-align: center; }

/* --- 右側：画像エリア（innerの外にあるので自由に配置可能） --- */
.top_coworking_img {
    position: absolute; /* 親（top_coworking）に対して絶対配置 */
    top: 0;
    right: 0; /* 画面の右端に張り付く */
    width: 50%; /* 画面のちょうど半分 */
    height: 100%;
    z-index: 1; /* テキストの下に配置 */
}

.top_coworking_img img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 枠いっぱいにトリミング */
    object-position: center; /* 必要に応じて left や right に調整可 */
    display: block;
}

/* ========================================================= */
/* 宿セクション (top_guesthouse) */
/* ========================================================= */
.top_guesthouse {
    padding: 50px 0;
    background-color: #fff; /* 背景は白 */
}

.top_guesthouse_inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

/* --- ヘッダーエリア --- */
.guesthouse_header {
    text-align: center;
    margin-bottom: 60px;
}

/* キャッチコピー */
.guesthouse_catch {
    font-size: 60px;
    font-weight: bold;
    margin: 20px 0 40px;
}

/* 中央ロゴ */
.guesthouse_logo img {
    max-height: 500px;
    height: auto;
}

/* --- 中段エリア（ボタンとリストの横並び） --- */
.guesthouse_content {
    display: flex;
    justify-content: center; /* 全体を中央寄せ */
    align-items: flex-start; /* 上揃え */
    gap: 80px; /* 左のボタン群と右のリストの間隔 */
    margin-top: 60px;
    margin-bottom: 20px;
}

/* ボタンエリア */
.guesthouse_btns {
    display: flex;
    gap: 20px;
    width: 50%;
}

/* ボタン単体の幅（コワーキングと同じサイズ感） */
.guesthouse_btn_item {
    width: 220px;
}

/* 右側のリスト */
.guesthouse_list {
    text-align: left;
    width: 50%;
}

.guesthouse_list p {
    font-size: 16px;
    font-weight: bold;
    line-height: 2; /* 行間を広げて読みやすく */
    margin-bottom: 0;
}

/* --- 下段エリア（4枚の画像） --- */
.guesthouse_images {
    display: flex;
    gap: 20px;
    justify-content: space-between;
}

.gh_img {
    width: 278px;
    height: 217px;
    aspect-ratio: 1 / 1; /* 正方形にする */
    background-color: #eee; /* 画像がない時のグレー背景 */
}

.gh_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ========================================================= */
/* シェア農園セクション (top_sharefarm) */
/* ========================================================= */
.top_sharefarm {
    background-color: #FAF5EF;
    width: 100%;
    min-height: 750px;
    position: relative; 
    display: flex;
    align-items: center;
    overflow: hidden;
}

/* テキストを収める枠 */
.top_sharefarm_inner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    position: relative;
    z-index: 2;
}

/* --- 左側：テキストエリア --- */
.top_sharefarm_content {
    width: 50%;
}

.sharefarm_heading { margin-bottom: 32px; }
.sharefarm_heading h2 { font-size: 32px; font-weight: bold; margin-bottom: -10px; }
.sharefarm_heading p { font-size: 16px; font-weight: bold; margin-left: 20px; margin-bottom: 60px; }

.sharefarm_catch h3 { 
    font-size: 60px; 
    font-weight: 900; 
    line-height: 1.1; 
    margin-bottom: 30px; 
}

.sharefarm_catch p { 
    font-size: 18px; 
    font-weight: bold; 
    margin-bottom: 60px; 
    line-height: 1.8;
}

.sharefarm_btn_item { width: 240px; }

/* --- 右側：画像エリア（画面の右半分を完全占有） --- */
.top_sharefarm_img {
    position: absolute;
    top: 0;
    right: 0; /* 右側に配置 */
    width: 50%;
    height: 100%;
    z-index: 1;
    background-color: #eee; /* 画像がない時のグレー背景 */
}

.top_sharefarm_img img {
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* ========================================================= */
/* 募集セクション (top_recruiting) */
/* ========================================================= */
.top_recruiting {
    padding: 100px 0;
    background-color: #fff; /* 背景は白 */
}

.top_recruiting_inner {
    max-width: 1000px; /* テキストが読みやすいように幅を少し絞る */
    margin: 0 auto;
    padding: 0 40px;
}

/* 募集リスト全体 */
.recruiting_list {
    display: flex;
    flex-direction: column;
    gap: 80px; /* 記事同士の間隔を広めに */
}

/* 各募集アイテム（横並び） */
.recruiting_item {
    display: flex;
    align-items: center; /* 垂直方向中央揃え */
    justify-content: space-between;
    gap: 60px; /* 画像とテキストの間隔 */
}

/* 画像エリア */
.recruiting_img {
    width: 35%; /* 画像の幅 */
    flex-shrink: 0; /* 画像が潰れないようにする */
}

.recruiting_img img {
    width: 100%;
    height: auto;
    display: block;
}

/* テキスト・ボタンエリア */
.recruiting_info {
    width: 60%; /* テキスト側の幅 */
}

.recruiting_desc {
    font-size: 14px;
    margin-bottom: 40px; /* テキストとボタンの間隔 */
    text-align: justify; /* 両端揃えで見栄え良く */
}

/* ボタンエリア */
.recruiting_btn_area {
    width: 300px; /* ボタンの幅 */
    margin: 0 auto; /* テキストエリアの中で中央寄せ */
}

/* ========================================================= */
/* サイトマップセクション (site_map) 修正版 */
/* ========================================================= */
.site_map {
    background-color: #FAF5EF; /* 背景色をベージュに変更 */
    padding: 80px 0 20px 0;
    width: 100%;
}

.site_map_inner {
    max-width: 1000px; /* バランスよく見えるように幅を少し調整 */
    margin: 0 auto;
    padding: 0 40px;
}

/* --- 上段：メインメニュー --- */
.site_map_menu {
    margin-bottom: 50px; /* 下段リンクとの間隔 */
}

.site_map_menu ul {
    list-style: none; /* デフォルトの・を消す */
    padding: 0;
    margin: 0;
}

.site_map_menu li {
    margin-bottom: 10px; /* メニュー間の余白 */
}

.site_map_menu a {
    font-size: 12px;
    font-weight: bold;
    color: #000;
    text-decoration: none;
    display: flex;
    align-items: center;
    transition: opacity 0.3s;
}

/* 先頭の「▶」マークをCSSで表示 */
.site_map_menu a::before {
    content: "▶"; /* 三角マーク */
    font-size: 15px; /* マークのサイズ */
    margin-right: 10px; /* 文字との間隔 */
    color: #000;
}

.site_map_menu a:hover {
    opacity: 0.7;
}

/* --- 下段：ポリシーリンク --- */
.site_map_policy {
    display: flex; /* 横並びにする */
    justify-content: space-between; /* 均等に配置（左・中央・右） */
    align-items: center;
    flex-wrap: wrap; /* 画面が狭い時に折り返す */
    gap: 20px;
    margin: 0 100px;
    font-weight: 700;
}

.site_map_policy a {
    font-size: 14px;
    color: #000;
    text-decoration: none;
    transition: opacity 0.3s;
}

.site_map_policy a:hover {
    opacity: 0.7;
}

/* ========================================================= */
/* フッター (Footer) 最終修正版 */
/* ========================================================= */
footer {
    background-color: #000; /* 背景を真っ黒に */
    color: #fff; /* 文字色を白に */
    padding: 40px 0; /* 上にゆとり、下の見切れ防止に40px */
    width: 100%;
}

.ft_inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    /* フッター内を全て中央に寄せるためのFlex設定 */
    display: flex;
    flex-direction: column; /* 縦並び */
    justify-content: center;
}

/* ロゴエリア */
.ft_logo {
}

.ft_logo img {
    max-width: 280px; /* ロゴを少し大きくして存在感を出す */
    height: auto;
    /* 黒いロゴ画像を白く反転させる魔法 */
    filter: invert(1) brightness(2); 
}

/* 会社情報エリア：ここを確実にセンター揃えにします */
.ft_info {
    display: flex;
    text-align: center; /* テキストを中央揃え */
    margin: 0 auto;
    align-items: center; /* 文字の底辺のラインで揃える */
}

.company_name {
    display: block;
    font-size: 14px;
}

.company_name_main {
    display: block;
    font-size: 22px;
    font-weight: bold;
    margin-left: 5px;
}

.company_address {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    font-family: 'Helvetica', 'Arial', sans-serif;
    margin-left: 10px;
}

/* --- 下段：コピーライト --- */
.ft_copyright {
    width: 100%;
    text-align: center;
    margin:10px 0 40px;
}

.ft_copyright small {
    font-size: 10px;
    color: #ffffff; /* コピーライトは少し控えめな色に */
}