@charset "utf-8";
/* CSS Document */

     :root {
            --main-gold: #b19a38;
            --bg-gray: #f8f8f8;
            --serif-font: 游明朝, YuMincho, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", HG明朝E, "MS P明朝", "MS 明朝", serif;
        }
		
   /* === ページタイトル（SEARCHセクション専用） === */
        .page-fv {
            /* 添付画像F59EEF6C-4EB9-44C0-A308-0BF6F5574E97.jpgを参考に作成 */
            background-image: url("../images/about-page-fv-pc.jpg"); /* 背景画像プレースホルダー */
            background-size: cover;
            background-position: center;
            height: 350px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }
		
		@media screen and (max-width: 736px){
        .page-fv {
            background-image: url("../images/about-page-fv-sp.jpg");
        }}		
		
        .page-fv::before {
            content: '';
            position: absolute;
            inset: 0;
            background-color: rgba(0, 0, 0, 0.4);
        }
        .fv-title-en {
            font-family: 'Inter', sans-serif;
            font-size: 4rem;
            font-weight: 800;
            color: #fff;
            line-height: 1;
            letter-spacing: 0.05em;
            position: relative;
            z-index: 10;
        }
        .fv-title-jp {
            font-size: 1.25rem;
            color: #fff;
            margin-top: 0.5rem;
            position: relative;
            z-index: 10;
            text-align: center;
        }


		@media screen and (max-width: 736px){
            .fv-title-jp {
                font-size: 1rem;
				margin-top: 1rem;
            }
        }	
        @media (max-width: 767px) {
            .page-fv { height: 250px; }
            .fv-title-en { font-size: 3rem; line-height: 0.7;}
        }
		
		h2 { font-size: 2.5rem!important; font-family: 游明朝, YuMincho, ヒラギノ明朝 Pro W3, Hiragino Mincho Pro, HG明朝E, MS P明朝, MS 明朝, serif; }
		
		.about{
		    padding-top: 8rem;
            padding-bottom: 8rem;
		}
		
		@media (max-width: 768px) {
		.about{
		    padding-top: 3rem;
		}
		.about h2{
		    font-size: 1.8rem !important;
		}
			
		.about p{
			font-size: 0.95rem;
			line-height: 1.8;
		}
		}		

		
       /* --- セクションタイトル --- */
        .section-title-container {
            display: flex;
            align-items: flex-end;
            margin-bottom: 3rem;
            position: relative;
        }
		
       .section-title-container p{
		   position: relative;
    	   content: '';
    	   left: 1.2rem;
    	   width: 3rem;
    	   height: 1px;
    	   background-color: #2e2b25;
		   bottom: 0.6rem;
        }
		
        .main-title-en {
			font-size: 3rem;
    		font-weight: 700;
    		letter-spacing: 0.05em;
    		color: #2e2b25;
    		line-height: 1;
    		display: flex;
    		align-items: center;
    		gap: 1.5rem;
			padding-right: 0;
		    font-family: 'Inter', "游ゴシック", "YuGothic", "游ゴシック体", "Noto Sans JP", "BIZ UDPGothic", "Meiryo", "Helvetica Neue", "Arial", sans-serif;
        }
        .main-title-jp {
            font-size: 1.1rem;
            font-weight: 500;
            color:#2e2b25;
            margin-left: 2.5rem;
            top: 0.35rem;
            position: relative;
            z-index: 10;
        }
		
		.main-title-en::after {display: none;}
        @media (max-width: 768px) {
            .section-title-container { flex-direction: column!important;align-items: flex-start!important; gap: 0.3rem;}
            .main-title-en { font-size: 2.5rem; padding-right: 0; align-items: flex-start;}
            .main-title-jp { margin-left: 3.8rem; top: -0.2rem; font-size: 0.9rem; }
			.section-title-container p{top: 1rem; left: 0;}
        }

        /* --- サブページヒーロー --- */
        .about-hero {
            height: 400px;
            background-color: #333;
            background-image: url('https://images.unsplash.com/photo-1521590832167-7bcbfaa6381f?auto=format&fit=crop&q=80&w=1600');
            background-size: cover;
            background-position: center;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }
        .about-hero::before {
            content: '';
            position: absolute;
            inset: 0;
            background-color: rgba(0,0,0,0.4);
        }
        .hero-inner {
            position: relative;
            z-index: 10;
            text-align: center;
            color: white;
        }
        .hero-en { font-size: 4rem; font-weight: 800; letter-spacing: 0.05em; line-height: 1; }
        .hero-jp { font-size: 1.25rem; margin-top: 0.5rem; font-weight: 400; }

        @media (max-width: 768px) {
            .about-hero { height: 270px; }
            .hero-en { font-size: 3rem; }
        }

        /* --- 背景数字（CONCEPTページ継承） --- */
        .strength-number {
            font-family: 'Inter', sans-serif;
            font-size: 7rem;
            font-weight: 800;
            color: #efefef;
            line-height: 0.8;
            margin-bottom: -1rem;
            position: relative;
            z-index: 0;
        }
        .strength-title-jp {
            font-size: 2rem;
            font-weight: 700;
            margin-bottom: 1rem;
            position: relative;
            z-index: 1;
            line-height: 1.4;
			font-family: 游明朝, YuMincho, ヒラギノ明朝 Pro W3, Hiragino Mincho Pro, HG明朝E, MS P明朝, MS 明朝, serif;
        }

        @media (max-width: 768px) {
            .strength-number { font-size: 5rem; }
            .strength-title-jp { font-size:2.2rem; }
        }

        .strength-txt p{
			font-size: 0.95rem;
    		line-height: 1.5;
        }

        /* --- ブランドリスト --- */
		
		.brand-ttl{
		    flex-direction: column!important;
			align-items: center;
		    line-height: 0.1;
			padding-bottom: 2rem;
		}


        @media (max-width: 768px) {
			.brand-ttl{ align-items: center!important; gap: 1.3rem; }
        }


		.brand-ttl h2{
		    padding-right: 0!important;
		}
		
		.brand-ttl span{
		    margin-left: 0!important;
			opacity: 0.8;
		}		
		
        .brand-blk {	
    		border-radius: 4px;
			gap:1.6rem;
    		display: flex;
    		flex-wrap: wrap;
    		align-items: center;
    		justify-content: center;
    		text-align: center;
    		/* border: 1px solid #eee; */
    		transition: all 0.3s;
        }

        @media (max-width: 768px) {
			 .brand-blk { gap: 2rem 1rem; justify-content: flex-start;}
        }		
    
        .brand-blk img {
    		width: 16%;
    		min-width: 170px;
            filter: brightness(0) invert(1);
        }
        @media (max-width: 768px) {
			 .brand-blk img { min-width: auto; width: 9rem;}
        }

        .brand-card:hover {
            border-color: var(--main-gold);
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.05);
        }
        .brand-name {
            font-family: 'Inter', sans-serif;
            font-size: 1.75rem;
            font-weight: 800;
            color: var(--main-gold);
            margin-bottom: 1rem;
            letter-spacing: 0.1em;
        }
        .brand-tagline {
            font-size: 0.8rem;
            color: var(--main-gold);
            font-weight: 700;
            margin-bottom: 0.5rem;
        }

        /* --- プロフィールテーブル --- */
        .profile-table th {
            width: 30%;
            text-align: left;
            padding: 1.5rem 1rem;
            border-bottom: 1px solid #ddd;
            font-weight: 600;
            color: var(--main-gold);
            font-family: var(--serif-font);
        }
        .profile-table td {
            padding: 1.5rem 1rem;
            border-bottom: 1px solid #ddd;
            color: #555;
        }
        @media (max-width: 768px) {
            .profile-table th, .profile-table td { display: block; width: 100%; padding: 0.8rem 0; }
            .profile-table th { border-bottom: none; padding-top: 1.5rem; }
        }