@charset "UTF-8";

/* ==========================================================================
   Google Fonts & Base
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;700&display=swap');

body {
    font-family: 'Noto Sans JP', sans-serif;
    background-color: #fdfaf5; /* 背景を少し暖色系に */
    margin: 0;
    color: #444;
    line-height: 1.8;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    background-color: #FFFFFF;
    box-shadow: 0 0 15px rgba(0,0,0,0.05);
}

/* ==========================================================================
   Header & Navigation
   ========================================================================== */
header {
    width: 100%;
}

.logo_box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 4%;
    background-color: #FF9800; /* 紫から鮮やかなオレンジに変更 */
}

.logo_box img { height: 50px; }

.name { color: #fff; font-size: 14px; letter-spacing: 2px; font-weight: bold; }

.topimage {
    width: 100%;
    height: 400px;
    background-image: url("../image/top_main.png");
    background-size: cover;
    background-position: center;
}

/* ==========================================================================
   Header & Navigation (オレンジ背景＋カラフルカプセル版)
   ========================================================================== */
nav { 
    background-color: #FF9800; /* 紫からオレンジに変更 */
    border-top: 1px solid #FFFFFF;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

nav ul {
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 12px 0;
    margin: 0;
    flex-wrap: wrap;
    gap: 15px;
}

nav ul li a { 
    color: #FFFFFF; 
    text-decoration: none; 
    font-size: 16px; 
    font-weight: bold;
    display: block;
    padding: 10px 22px;
    border-radius: 50px; 
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 2px solid #FFFFFF;
    box-shadow: 0 3px 6px rgba(0,0,0,0.1);
}

/* カプセルの色設定（オレンジ背景に映えるよう微調整） */
nav ul li:nth-child(1) a { background-color: #FF5722; } /* ディープオレンジ */
nav ul li:nth-child(2) a { background-color: #F8FF82; color: #444; } /* イエロー */
nav ul li:nth-child(3) a { background-color: #99FF99; color: #444; } /* グリーン */
nav ul li:nth-child(4) a { background-color: #82FFEE; color: #444; } /* ミント */
nav ul li:nth-child(5) a { background-color: #03A9F4; } /* ライトブルー */

/* マウスを乗せた時のアクション */
nav ul li a:hover {
    transform: scale(1.1) translateY(-3px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.2);
    filter: brightness(1.15);
}

/* ==========================================================================
   Section 1: カプセルハウス本店 誘導（上段）
   ========================================================================== */
.link_box {
    width: 90%;
    margin: 40px auto;
    padding-bottom: 40px;
    border-bottom: 2px solid #f2f2f2;
}

.link_box_in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.link_box_in p {
    flex: 1;
    color: #717070;
    font-size: 0.95rem;
    margin: 0;
}

.link_box_in a {
    flex: 1;
    max-width: 520px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.link_box_in a:hover {
    transform: translateY(-5px);
}

.link_box_in img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* ==========================================================================
   Section 2: Products We Carry (下段)
   ========================================================================== */
.about {
    width: 100%;
    padding-bottom: 60px;
}

.stats {
    color: #F55F0D; /* 紫から濃いオレンジに変更 */
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 50px 0 30px;
    width: 100%;
}

.gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    width: 90%;
    margin: 0 auto;
}

.thumbnail {
    background: #fff;
    padding: 25px;
    border-radius: 12px;
    border: 1px solid #eee;
    text-align: center;
    box-sizing: border-box;
}

.thumbnail img {
    width: 100%;
    max-width: 200px;
    height: auto;
    margin-bottom: 15px;
}

.thumbnail h4 {
    color: #F38801; /* 水色系からテーマ色のオレンジに変更 */
    margin: 10px 0;
    font-size: 1.1rem;
}

.thumbnail p {
    color: #717070;
    font-size: 0.9rem;
    text-align: left;
    margin: 0;
}

/* ==========================================================================
   Business Page Layout (左右配置)
   ========================================================================== */

/* 各項目の外枠 */
.business_item {
    display: flex;
    align-items: center;  /* 上下中央揃え */
    justify-content: space-between;
    padding: 30px 0;
    border-bottom: 1px solid #eee;
    gap: 30px;
}

/* 最後の項目の線は消す */
.business_item:last-child {
    border-bottom: none;
}

/* 左側のテキストエリア */
.business_text {
    flex: 1; /* 残りの幅をすべて使う */
    text-align: left;
}

.business_text h4 {
    color: #FF9800; /* テーマカラーのオレンジ */
    font-size: 1.2rem;
    margin-bottom: 10px;
    font-weight: bold;
}

.business_text p {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.7;
    margin: 0;
}

/* 右側の画像エリア */
.business_img {
    flex: 0 0 200px; /* 画像の幅を固定（200px） */
    text-align: right;
}

.business_img img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

/* スマホ対応：横並びを縦並びに変更 */
@media (max-width: 600px) {
    .business_item {
        flex-direction: column; /* 縦並び */
        text-align: center;
    }
    .business_text {
        text-align: center;
    }
    .business_img {
        flex: 0 0 auto;
        width: 100%;
        max-width: 250px; /* スマホでは少し大きく */
    }
}

/* ==========================================================================
   代表メッセージ & フッター（目に優しいソフトオレンジ調整）
   ========================================================================== */
.banner { 
    background-color: #FBB034; 
    padding: 60px 10%; 
    color: #5d4037; /* 文字色を濃いブラウンにして読みやすく */
    text-align: center; 
}

.parallax { font-size: 1.3rem; font-weight: 700; margin-bottom: 20px; }
.parallax_description { font-size: 0.95rem; max-width: 900px; margin: 0 auto; text-align: left; }

footer { display: flex; flex-wrap: wrap; padding: 40px 5%; }
.footer_column { flex: 1; min-width: 300px; padding: 20px; text-align: center; }
.footer_column h3 { color: #B3B3B3; border-bottom: 1px solid #eee; padding-bottom: 10px; margin-bottom: 20px; }
.footer_column p { font-size: 0.9rem; color: #717070; text-align: left; }

.footer_banner { 
    background-color: #FBB034; /* さらに彩度を落としたソフトカラー */
    padding: 20px 5%; 
    color: #5d4037; 
}

.hero_footer { font-size: 0.85rem; line-height: 2; }
.copyright { text-align: center; padding: 20px; background-color: #CDA789; color: #FFFFFF; font-size: 12px; }


/* ==========================================================================
   Footer Logo Layout (共通設定)
   ========================================================================== */

.footer_banner .parallax_description {
    display: flex;
    align-items: center;    /* 上下中央揃え */
    justify-content: center; /* 左右中央揃え */
    gap: 30px;              /* ロゴと文章の間隔 */
    max-width: 1000px;
    margin: 0 auto;
}

.footer_logo_wrap {
    flex: 0 0 120px;       /* ロゴの横幅を固定 */
}

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

.hero_footer {
    flex: 1;               /* 残りの幅にテキストを配置 */
    text-align: left;      /* 文章は左揃え */
    margin: 0;
}

/* スマホ対応：画面が狭いときは縦並びにして中央揃え */
@media (max-width: 600px) {
    .footer_banner .parallax_description {
        flex-direction: column;
        gap: 15px;
    }
    .footer_logo_wrap {
        flex: 0 0 80px;    /* スマホではロゴを少し小さく */
    }
    .hero_footer {
        text-align: center;
    }
}


/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 768px) {
    .link_box_in { flex-direction: column-reverse; text-align: center; }
    .gallery { grid-template-columns: 1fr; } 
    nav ul li { padding: 10px; font-size: 13px; }
    .topimage { height: 250px; }
}

.hidden { display: none; }

/* ==========================================================================
   現代流の余白・レイアウト調整
   ========================================================================== */

/* コンテンツ全体を包む箱 */
.content_wrapper {
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 5%;
    box-sizing: border-box;
}

/* 会社概要の各ブロック */
.about_box {
    margin-bottom: 40px;
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
}

.about_box h4 {
    color: #E65100; /* 見出しをオレンジ系の濃い色に */
    font-size: 1.1rem;
    margin-bottom: 10px;
}

.about_box p {
    margin: 0;
    color: #555;
}

.map_container {
    margin-top: 20px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}