/*
Theme Name: ao-accounting-office
Author: Your Name
Description: HTML/CSSから作成したオリジナルテーマです。
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: ao-accounting-office
*/


/* 変数の定義 (オプション) */
:root {
    --header-bg: #F5F7FA;
    --primary-color: #007bff; /* 例として設定 */
    --text-color: #333;
    /* ヘッダーの希望する高さを定義 (例として60px) */
    --header-height: 60px;
}

body {
    font-family: 'Noto Sans JP', sans-serif;
    background-color: #F5F7FA;
    margin: 0;
    padding: 0;
}
/* ヘッダー全体の基本スタイル */
#main-header {
    background-color: var(--header-bg);
    position: fixed; /* 画面上部に固定 */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000; /* 他の要素の上に表示 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 軽い影 */
    transition: transform 0.3s ease-in-out; /* スクロール時のアニメーション用 */
}

.header-content {
    box-sizing: border-box; /* ★ ここを追加 ★ */
    width: 100%;
    display: flex;
    justify-content: space-between; 
    align-items: center;
    height: var(--header-height);
    padding: 0px;
}

/* ロゴのスタイル */
.logo img {
    height: 40px; /* ロゴ画像の高さ。適宜調整してください */
    width: auto;
    display: block;
    margin-left: 20px;
}

/* 右側セクションのスタイル */
.right-section {
    display: flex;
    align-items: center;
    gap: 20px; /* ナビとSNSタブの間のスペース */
    justify-content: flex-end; 
}
.desktop-nav {
    /* flexコンテナ内でコンテンツを右寄せ（もし必要なら） */
    display: flex;
    justify-content: flex-end; 
}
/* デスクトップナビゲーション */
.desktop-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 30px; /* メニュー項目の間のスペース */
    justify-content: flex-end; 
}

.desktop-nav a {
    text-decoration: none;
    color: var(--text-color);
    font-weight: 500;
    padding: 5px 0;
    transition: color 0.3s;
}

.desktop-nav a:hover {
    color: var(--primary-color);
}

.social-tabs {
    display: flex;
    align-items: center;
    /* タブの並び順: メール→LINE (HTMLの順序を尊重) */
    flex-direction: row-reverse; /* 右から順に LINE, メール と表示するために逆順にする */
    margin-left: 25px; /* ナビとの間にスペースを作る */
}

.social-tab {
    display: flex;
    justify-content: flex-start; /* テキストを左寄せにするため */
    align-items: center;
    width: 40px;
    height: var(--header-height);
    text-decoration: none;
    transition: opacity 0.3s;
    /* アニメーションを滑らかにする */
    transition: width 0.3s ease, padding-left 0.3s ease;
    /* テキストを隠すための overflow 設定 */
    overflow: hidden;
    /* テキストとアイコンの間にスペースを設けるための padding */
    padding-left: 20px; 

}



/* タブ内のテキストラベルのスタイル */
.tab-label {
    white-space: nowrap; /* テキストが折り返さないように */
    margin-left: 25px;   /* アイコンとテキストの間にスペース */
    color: white;        /* テキストの色 */
    font-size: 0.9rem;   /* フォントサイズ */
    font-weight: bold;
    /* 初期状態では非表示（overflow: hidden; と width の組み合わせで実現） */
}


/* マウスオーバー時: 幅を拡張してテキストを表示 */
.social-tab:hover {
    /* 目的の幅を設定: アイコン(20px) + margin(10px) + テキスト幅 + padding(10px) */
    /* 例: 20px + 10px + 100px(テキスト推定幅) + 10px = 140px */
    width: 200px; /* 適切な値に調整してください */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 影をつけて目立たせる */
}


    /* アイコンとテキストのスタイル */
.social-tab img,
.social-tab .icon-svg {
    /* アイコンのサイズ（例: 20px）を維持 */
    flex-shrink: 0; 
}

.social-tab:hover {
    opacity: 0.8;
}

/* タブごとの背景色 (指定のアイコン/色に合わせて調整) */
.mail-tab {
    background-color: #2CBADE; /* 例: 赤系 */
}

.line-tab {
    background-color: #1C3557; /* 例: LINEの緑 */
}

.icon-svg {
    /* SVGのサイズをコンテナより小さく設定 */
    width: 20px;
    height: 20px;
}

.icon-img {
    display: block;
    width: 20px;
    height: 20px;
    object-fit: contain;
}

/* ハンバーガーメニューとスマホナビはデスクトップで非表示 */
.hamburger-menu, .mobile-nav {
    display: none;
}

/* --- メディアクエリ (スマートフォン用) --- */
@media (max-width: 768px) {
    /* --- ヘッダーとレイアウトの基本設定 --- */
    .desktop-nav {
        display: none;
    }
    .header-content {
      padding: 0 0 0 10px;
	  margin: 0;
      height: 60px;
      min-height: 60px; /* 例として最小の高さを設定 */
    }
    .logo img {
	  max-width: 150px;
	  height: auto;
      margin-left: 0px;
    }
    .right-section {
        gap: 0px;
    }
    .social-tab {
	   width: 40px !important;
	   transition: none;
	}
	.social-tab:hover {
	   width: 40px !important;
	   opacity: 1 !important;
	}
    /* --- ハンバーガーメニューのスタイル --- */
    .hamburger-menu {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: 30px;
        height: 30px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
		margin: 0 13px;
        z-index: 1002;
    }
    .hamburger-menu .bar {
        width: 100%;
        height: 3px;
        background-color: var(--text-color);
        transition: all 0.3s ease; 
        transform-origin: left; 
    }

    /* ❌ 閉じるアイコンへの変形アニメーション */
    .hamburger-menu.is-active .bar:nth-child(1) {
        transform: rotate(45deg) translate(2px, -3px); 
    }
    .hamburger-menu.is-active .bar:nth-child(2) {
        opacity: 0;
    }
    .hamburger-menu.is-active .bar:nth-child(3) {
        transform: rotate(-45deg) translate(2px, 3px); 
    }
    
    /* --- モバイルナビゲーション (修正点) --- */
    .mobile-nav {
        position: fixed;
        top: 60px; 
        
        bottom: 0;       
        left: 0;
        width: 100%;
        height: auto;
        z-index: 1000;
        
        background-color: var(--header-bg);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        padding: 20px 0;
        text-align: center;
        overflow-y: auto;
        
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.5s ease, visibility 0.5s;
    }

    /* メニューが開いた時 (アニメーション対応) */
    .mobile-nav.is-open {
        opacity: 1;
        visibility: visible;
        height: 100svh;
        display: block;
    }

    .mobile-nav ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .mobile-nav li {
        margin: 10px 0;
    }
    .mobile-nav a {
        text-decoration: none;
        color: var(--text-color);
        font-size: 1.2em;
        display: block;
        padding: 10px 0;
    }
    
    #main-header {
        position: fixed; /* ヘッダーをfixedにするとメニューのtop位置が安定します */
        top: 0;
        left: 0;
        width: 100%;
        transform: translateY(0);
        z-index: 1001; 
    }
    #main-header.header-hidden {
        transform: translateY(-100%);
    }
    /* モバイルナビゲーションが開いている間にページのスクロールを禁止 */
    .no-scroll {
       overflow: hidden;
    }
}

@media (max-width: 365px) {
	.logo img {
	  max-width: 120px;
	}
}










/* --- ドロップダウンメニューの追加スタイル (縦並び/吹き出し風) --- */

/* サブメニューを持つ li 要素の調整 */
.desktop-nav .has-submenu {
    position: relative; /* サブメニューを絶対配置するための基点 */
}

/* サブメニューのコンテナ */
.submenu-container {
    /* 「業務内容」リンクの直下に配置 */
    position: absolute;
    top: calc(var(--header-height));
    left: 50%; 
    transform: translateX(-50%) translateY(10px); /* 初期非表示位置 */
    width: auto; 
	min-width: 200px;
    
    /* アニメーション制御 */
    visibility: hidden; 
    opacity: 0; 
    
    background-color: #F5F7FA; 
    border-radius: 0px; 
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); 
    z-index: 1001; 
    
    /* アニメーション: 表示時には遅延なし */
    transition: opacity 0.3s ease 0s, transform 0.3s ease 0s, visibility 0.3s ease 0s;
}

/* 吹き出しの三角（アロー）を作成 */
.submenu-container::before {
    content: '';
    position: absolute;
    top: -8px; 
    left: 50%;
    transform: translateX(-50%) rotate(45deg); 
    width: 15px;
    height: 15px;
    background-color: #F5F7FA;
    box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.05); 
    z-index: 1002;
}

/* サブメニューの内容（タブの縦並び） */
.submenu-content {
    display: flex;
	justify-content: center;
	gap: 15px;
    padding: 15px; 
}

/* 個々のサブメニュー項目（タブ） */
.submenu-item {
	letter-spacing: 0.2em;
	display: flex;
    text-decoration: none;
    color: var(--text-color);
    font-weight: 500;
    padding: 15px;
    transition: background-color 0.2s, color 0.2s;
    white-space: nowrap;
	align-items: center; /* 内部のテキストを縦方向中央に */
	justify-content: center; /* 内部のテキストを横方向中央に */
	
	position: relative; /* ::after の配置基準にする */
}


/* 最後の項目を除くすべての項目に、右側に縦線を追加 */
.submenu-item:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 50%; /* 縦方向中央に配置 */
    right: -7px; /* gap の半分（またはそれよりやや少ない値）の位置に配置 */
    transform: translateY(-50%);
    width: 1px; /* 線の太さ */
    height: 50%; /* 項目の高さに対する線の長さ */
    background-color: #CCCCCC; /* グレーの色 */
}



/* ホバー時の装飾 */
.submenu-item:hover {
	color: var(--primary-color);
}

/* === ここがポイント: li要素にホバーした時、遅延なく表示を開始する === */
.desktop-nav .has-submenu:hover .submenu-container {
    visibility: visible; 
    opacity: 1; 
    transform: translateX(-50%) translateY(0); 
    
    /* 非表示動作をリセット（表示を優先） */
    transition-delay: 0s !important; 
}

/* === ここがポイント: li要素からマウスが離れた時、非表示に遅延をかける === */
/* マウスが li 要素から離れたときの非表示に遅延を設定する */
.desktop-nav .has-submenu .submenu-container {
    /* 150ミリ秒の遅延を設定: この時間内なら li に戻ると非表示がキャンセルされる */
    transition-delay: 0.5s; 
}


/* モバイルでの調整 */
@media (max-width: 768px) {
    .submenu-container {
        display: none; 
    }
}




















#hero-section {
    /* デスクトップ用背景画像の設定 */
    position: relative; /* 子要素（画像とコンテンツ）の基準点にする */
    width: 100%;
    
    /* ★アスペクト比ハック★：幅に基づいて高さを決定する */
    /* 例: 16:9 の画像の場合、100 / 16 * 9 = 56.25% */
    /* 例: 2:1 の画像の場合、100 / 2 * 1 = 50% */
    /* あなたの画像の縦横比に合わせてこの値を設定してください */
    padding-bottom: 56.25%; /* ここを調整！ (例: 2:1 のアスペクト比) */


}
/* 画像要素のスタイル */
.hero-image {
    position: absolute; /* 親要素(#hero-section)に対して絶対配置 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* 画像をコンテナ全体に拡大縮小し、アスペクト比を維持しつつ、はみ出た部分を切り取る */
    object-fit: cover; 
    
    /* 画像上部が隠れるのを防ぐため、配置の起点を上辺にする */
    object-position: top center; /* ★画像上部を常に表示するための設定★ */
}



/*(スマホ用画像の切り替え) */
@media (max-width: 768px) {
    #hero-section {
        padding-bottom: 120%; /* 例: 縦長の画像に合わせてアスペクト比を変更 */
    }

    /* スマホ画像に切り替える */
    .hero-image {
        content: url('images-ao/home-mobile.png'); 
        object-position: center center; 
    }
}















.tsuyomi-image {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto; 
}

#tsuyomi-section {
  /* 最大幅を設定し、それ以上の画面サイズではコンテンツを中央に固定 */
  max-width: 1200px; 
  margin: 0 auto;
  /* デスクトップ版の余白（広め） */
  padding: 60px 40px; 
  box-sizing: border-box;
}



@media screen and (max-width: 768px) {
  #tsuyomi-section {
    /* 画面が狭くなったら余白を小さくする */
    padding: 30px 0px;
	}

    /* スマホ画像に切り替える */
    .tsuyomi-image {
        content: url('images-ao/tsuyomi-mobile.png'); 
        object-position: center center; 
    }
  }







#service-section {
    background-color: #1C3557; 
    padding: 40px 20px;
}

.service-container {
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 5px;
    text-align: center;
}

.service-title {
    font-size: 2em;
    font-weight: 500;
    text-align: center;
    color: #F5F7FA;
    margin-bottom: 0;
}

.service-subtitle {
    font-size: 1.2rem;
    text-align: center;
    color: #bdbdbd;
    margin-top: 0;
}

.service-cards-grid {
    display: grid;
    /* 修正箇所: ここが「auto-fit」と「minmax」を使ったレスポンシブ設定です */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px; /* カード間のスペース */
}

.service-card {
    /* 要素を縦並び中央配置にするための Flexbox 設定 */
    display: flex;
    flex-direction: column;
    align-items: center; /* 縦並びで中央配置 */
    background-color: #ffffff;
    padding: 25px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s, box-shadow 0.3s;
    border-radius: 10px;
    margin: 100px auto;
}

/* 【新規追加】カード上部のコンテンツの高さを揃えるためのコンテナ */
.card-top-content {
    /* どのカードでも、このセクションの高さを統一します */
    height: 220px; /* ★★★ 調整が必要な値：タイトルと画像の合計の高さに合わせてください ★★★ */
    width: 100%;
    
    /* カード内のタイトルと画像を中央に配置し直すためのFlexbox */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* 上から配置 */
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}


.card-title {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 20px;
    text-align: center;
    color: #1C3557;
}

.card-image {
    width: 165px;
    height: 165px;
    object-fit: contain;
    margin-bottom: 0;
}

.card-text {
    /* テキストは左揃え */
    text-align: left; 
    margin-bottom: 30px;
    width: 100%; /* 親要素の幅いっぱいを使う */
    font-size: 0.95rem;
    line-height: 2;
    flex-grow: 1; /* テキストが占める高さを柔軟に調整 */
}









/* --- メディアクエリ: スマートフォン対応 (1列表示) --- */
@media (max-width: 768px) {
	.service-title {
	margin: 0;
	}
    
    .service-container {
    padding: 5px;
}
    .service-card {
    margin: 5px;
}

    .card-image {
    width: 60%; 
    height: 60%;
    object-fit: contain;
    margin-bottom: 10px;
}

    .card-text {
    margin-bottom: 5px;
}

}



/* --- about-section 全体 --- */
#about-section {
    position: relative;
    padding: 20px; 
    width: calc(100%-40px);
    
    /* アスペクト比ハック: 幅に基づいて高さを決定 */
    /* ここも、背景画像の縦横比に合わせて値を調整してください */
    padding-bottom: 10%; /* 例: 2:1 のアスペクト比 */
    
    /* セクション内のコンテンツを重ねて中央に表示 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 100px; /* 上部タイトルのためのパディング */
    margin-bottom: 30px;
}

/* --- 背景画像 (hero-sectionと同じ仕組み) --- */
.about-bg-image {
    position: absolute; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; 
    object-position: top center; /* 画像上部を常に表示 */
    z-index: -1; /* コンテンツの下に配置 */
}

.about-title {
    color: #1C3557;
    text-align: center;
    font-weight: 700;
    font-size: 1.9em;
    margin-bottom: 0;
}
.about-subtitle {
    font-size: 1.2em;
    color: #606976;
    text-align: center;
    margin-top: 0;
    margin-bottom: 70px;
}
/* --- コンテンツの左右配置 --- */
.about-content-wrap {
    display: flex;
    gap: 40px;
    align-items: center;
    max-width: 1000px;
    width: 100%;
    padding: 20px 0;
    z-index: 1; /* 背景画像より手前に配置 */
    margin-bottom: 50px;
}

.about-text-content, .about-image-content {
    flex: 1; /* 左右に均等にスペースを分割 */
}

/* --- 左側: テキスト --- */
.about-main-title {
    color: #1C3557; 
    font-size: 1.5em;
    font-weight: 500;
    line-height: 1.7;
    margin-bottom: 40px;
}

/* 二行目を左にずらす設定 */
.shifted-line {
    display: block;
    margin-left: 70px; /* 左にずらす量 */
}

.about-text {
    color: #1C3557;
    font-size: 1em;
    line-height: 2.3;
    text-align: justify;
}

/* --- 右側: 画像 --- */
.about-image {
    width: 100%;
    height: auto;
    display: block;
    
}







/*   read more ボタン　　*/


.read-more-container {
  text-align: center;
}

.read-more-button {
  display: inline-block;
  text-decoration: none;
  color: #1C3557;
  font-size: 20px;
  position: relative;
  padding-bottom: 10px; 
  transition: color 0.3s ease;
}

/* 1. 線を作成 (::after)  */
.read-more-button::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: #1C3557; 
  transition: background-color 0.3s ease;
}

/* 2. ドット（円）を作成 (::before) - 基準点を固定 */
.read-more-button::before {
  content: '';
  position: absolute;
  /* ⭐︎ 初期位置: leftを0にし、transformでドットの中心を線の開始点に */
  left: 0; 
  bottom: -1px; 
  width: 6px; 
  height: 6px;
  border-radius: 50%; 
  background-color: #2CBADE; 
  
  /* 初期状態: ドットの左半分が隠れる位置 */
  transform: translateX(-50%); 
  
  /* ⭐︎ トランジションを「transform」から「left」へ変更 */
  transition: left 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 0.3s ease;
}


.read-more-button:hover {
  color: #2CBADE; 
}

.read-more-button:hover::after {
  background-color: #1C3557;
}

/* ⭐︎ ホバー時のドットの変化: leftプロパティを使って移動 */
.read-more-button:hover::before {
  /* left: 100%に設定すると、ドットの開始点がリンクボタンの右端に到達 */
  left: 100%; 
  /* transform: translateX(-50%)を維持することで、ドットの中心が右端にくる */
}
















@media (max-width: 768px) {
    #about-section {
       padding: 40px;
    }
	.about-title {
      font-weight: 700;
      font-size: 1.5em;
      margin: 0;
    }
	.about-subtitle {
	  margin-bottom: 30px;
	}
    /* スマホ用画像に切り替え (任意) */
    .about-bg-image {
        content: url('images-ao/about-mobile.svg'); /* スマホ用画像パスに修正 */
        object-position: center center;
    }
    
    /* 左右配置を解除し、要素を縦に積み重ねる */
    .about-content-wrap {
        flex-direction: column;
        gap: 20px;
		margin-bottom: 0;
    }

    /* タイトルと画像サイズを調整 */
    .about-main-title {
        font-size: 1.3rem;
		margin: 20px auto;
        text-align: center;
    }
    
    .shifted-line {
        margin-left: 0; /* スマホでは左寄せを解除し、中央寄せに戻す */
    }
    
    .about-image-content {
        order: -1; /* スマホで画像を上部に移動させたい場合 */
    }
    
    .about-image {
        max-width: 80%;
        display: block; 
        margin: 0 auto; 
    }
    
    .about-text {
        text-align: left;
    }
    
    .read-more-container {
        margin-top: 20px;
        margin-bottom: 20px;
    }
}


















.contact-section {
    position: relative;
    padding:80px 0; 
    overflow: hidden; /* 背景がはみ出さないように */
}

/* 背景画像用のdiv */
.contact-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 画像の高さを確保するため、セクションの最小高を設定 */
    min-height: 450px; 
    background-image: url('images-ao/contact.jpg'); 
    background-size: cover; /* 画面全体を覆うように拡大・縮小 */
    background-position: center; /* 画像を中央に配置 */
    z-index: 1;
    
}


.contact-title-container {
    position: relative; /* 背景の上に表示 */
    z-index: 2;
    padding: 30px auto; /* 上下の余白と左右のインナー余白 */
    width: 100%;
    /* 画面端から端までの白透かし */
    text-align: center;
}


.contact-title {
    font-size: 1.9em;
    font-weight: 700;
    margin-bottom: 0;
    color: #3B3732;
}

.contact-subtitle {
    font-size: 1.2em;
    color: #7e7b78;
    margin-top: 0;
    padding-bottom: 10px;
}



.contact-content {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.button-group {
    display: flex;
    gap: 50px; /* ボタン間のスペース */
    justify-content: center;
    margin: 40px 0;
}

.contact-button {
    /* 正方形のベース */
    flex-basis: calc(33.333% - 40px/3); /* 横並び3つの幅を計算 (20px*2/3) */
    max-width: 180px; /* PCでの最大幅 */
    aspect-ratio: 1 / 1; /* 正方形にする */
    
    display: flex;
    flex-direction: column; /* 縦並び */
    justify-content: center; /* 垂直方向中央揃え */
    align-items: center; /* 水平方向中央揃え */
    
    /* スタイル */
    border: 8px solid #F5F7FA;
    border-radius: 10px;
    text-decoration: none;
    color: #F5F7FA;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0px 3px 4px 0px #6d6d6d;
}

.line {
  background-color: #1C3557;
}
.mail {
  background-color: #6C99A4;
}
.phone {
  background-color: #3B3732;
}

.contact-button:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}

.button-icon {
    width: 25%;
    height: auto;
    margin-bottom: 10px;
}

.button-text {
    font-weight: bold;
    font-size: 1.1em;
}
.button-text p {
    font-size: 0.8em;
}
.phone-text {
    line-height: 0.7;
}

.contact-message {
    font-size: 1.5em;
    font-weight: 500;
    color: #ffffff;
    padding: 30px 0;
    margin-bottom: 0;
    text-shadow: 0px 3px 3px rgba(0, 0, 0, 0.5);
}




/* ================================================= */
/* 【追加】電話番号のスパム対策 (CSS偽装) */
/* ================================================= */

/* 1. マスク対象の要素（空の<span>）を対象とする */
.contact-button.phone .phone-number-mask {
    position: relative;
    display: block; /* contentをブロック要素として扱えるようにする */
    width: auto;
    height: 1.1em; 

    margin: 0 auto; 
    overflow: visible; /* 隠れないようにoverflowをvisibleに戻す */
    color: transparent;
}

/* 2. ::beforeで正しい電話番号を表示 */
.contact-button.phone .phone-number-mask::before {
    /* ⚡ここにユーザーに表示したい正しい番号を記述します⚡ */
    content: "06-7878-5348"; 
    
    /* button-textと同じスタイルを適用 */
    font-size: 1em; 
    font-weight: bold;
    color: #F5F7FA;
    
    /* 配置 */
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%); /* 中央寄せ */
    white-space: nowrap; 
    
}


.phone-text {
    line-height: 1.1; /* 行の高さを標準に戻し、番号と時間を表示しやすくする */
    margin-top: 5px; /* アイコンとの間に少し隙間を空ける */
}

.button-text p {
    font-size: 0.8em;
    margin-top: 5px; /* 番号と受付時間の間の隙間 */
    margin-bottom: 0;
    line-height: normal; /* 受付時間自体の行間は標準に */
}


@media (max-width: 768px) {
    .contact-button {
        width: 80%; 
    }
}






/* ==================================== */
/* レスポンシブ対応 (スマホ向け) */
/* ==================================== */
@media (max-width: 768px) {
    .contact-background {
        background-image: url('images-ao/contact-mobile.jpg');
        height: 100%;
    }

    .button-group {
        flex-direction: column; /* ボタンを縦並びにする */
        gap: 15px;
    }

    .contact-button {
        /* スマホでは横幅いっぱいに広がり、縦長になるのを防ぐ */
        max-width: 300px; 
        width: 30%; /* 中央寄せにするため幅を少し狭める */
        margin: 0 auto;
        /* 正方形を維持 */
        flex-basis: auto;
    }

    .button-icon {
        width: 35px;
        height: 35px;
        margin-bottom: 5px;
    }

    .button-text {
        font-weight: bold;
        font-size: 0.9em;
    }
	.contact-message {
		padding: 3px;
		font-size: 1em;
	}
}










/* ==================================== */
/* 1. 全体レイアウト */
/* ==================================== */
.main-footer {
    background-color: #F5F7FA; /* 背景色はお好みに合わせて調整 */
    color: #1C3557;
    padding: 40px 20px 0 20px;
    text-align: center; /* コンテンツ全体を中央寄せにするための設定 */
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between; /* 要素間に均等なスペース */
    align-items: flex-start; /* 上端揃え */
    padding-bottom: 30px;
}

.footer-item {
    flex-basis: 30%; /* 各要素の基準幅 */
    text-align: left; /* 各アイテム内のテキストは左寄せに戻す */
}

/* ロゴの調整 */
.footer-logo {
    display: flex; /* ロゴ画像を中央に配置するため */
    justify-content: right;
    align-items: center;
    height: 170px; /* 他のコンテンツの高さに合わせる */
}
.footer-logo-img {
    max-width: 170px; /* ロゴ画像の最大幅 */
    height: auto;
}

.footer-info {
    text-align: left; 
}

.footer-address p {
    margin: 0;
    font-size: 0.9em;
    line-height: 1.5;
}


/* ==================================== */
/* 2. ミニコンタクトボタン */
/* ==================================== */
.footer-contact {
    display: flex;
    flex-direction: column; /* 縦並び */
    align-items: center; /* 全体を中央寄せ */
    gap: 10px;
}

.contact-button-mini {
    display: flex;
    align-items: center;
    width: 200px; /* ボタンの幅 */
    height: 35px;
    padding: 8px 15px;
    border-radius: 3px;
    text-decoration: none;
    color: #F5F7FA;
    transition: background-color 0.3s;
}

/* 各ボタンの色 */
.line-mini { background-color: #1C3557; }
.mail-mini { background-color: #6C99A4; }
.phone-mini { background-color: #3B3732; }

.contact-button-mini:hover {
    opacity: 0.8;
}

.button-icon-mini {
    width: 30px;
    height: 30px;
    margin-right: 10px;
}

.contact-button-mini-text {
    flex-grow: 1; /* アイコンの隣のテキストを広げる */
    text-align: center; /* テキストを中央寄せ */
    font-size: 0.9em;
    font-weight: 500;
}

/* ==================================== */
/* 3. 電話番号のスパム対策（フッター用） */
/* ==================================== */

/* マスク要素の設定 */
.phone-number-mask-mini {
    /* 親要素の contact-button-mini-text 内で中央に配置 */
    display: block; 
    position: relative;
    width: 100%;
    height: 1.5em; /* 1行分の高さを確保 */
    
    
}

/* ::beforeで正しい番号を表示 */
.phone-number-mask-mini::before {
    /* ⚡ここにハイフン付きの正しい番号を記述します⚡ */
    content: "06-7878-5348"; 
    
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%); /* 中央寄せ */
    
    font-weight: 500;
    color: inherit; /* 親要素の文字色を継承 */
    white-space: nowrap; /* 改行防止 */
}


/* ==================================== */
/* 4. ナビゲーションメニュー */
/* ==================================== */
.footer-nav ul {
    list-style: none;
    padding: 0;
    margin-top: 20px;
}

.footer-nav li a {
    color: #1C3557;
    text-decoration: none;
    font-size: 1em;
    line-height: 1.7;
}

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

/* コピーライト */
.footer-copyright {
    border-top: 1px solid #95A4B9;
    padding: 10px 0;
    text-align: center;
}
.footer-copyright p {
    margin: 0;
    font-size: 0.8em;
    color: #95A4B9;
}


/* ==================================== */
/* 5. レスポンシブ対応 (スマホ向け) */
/* ==================================== */
@media (max-width: 768px) {
    .footer-container {
        flex-direction: column; /* 縦に並べる */
        align-items: center; /* 中央揃え */
    }

    .footer-item {
        flex-basis: auto;
        width: 100%;
        margin-bottom: 30px;
        text-align: center; /* スマホでは全て中央寄せ */
    }
    
    .footer-info {
        order: 3; /* 住所とナビを一番下に移動 */
        text-align: center;
    }
    
    .footer-contact {
        order: 2; /* ボタンを中央に配置 */
    }
    
    .footer-logo {
        order: 1; /* ロゴを一番上に配置 */
        height: auto;
        justify-content: center;
    }
    
    .footer-address p {
        margin: 5px 0;
    }

    .footer-nav ul {
        justify-content: center;
        gap: 15px;
    }
}














/* 　　　業務内容　　　 */

#service-page {
    width: 100%; /* ページの端から端まで */
    box-sizing: border-box;
    background-color: #fff;
}

.service-header {
    background-color: #1C3557;
    color: #F5F7FA;
    text-align: center;
    padding: 80px 0 35px 0;
}

.service-header h1 {
    font-size: 2.5em;
    margin: 0;
    padding-bottom: 5px;
}

.service-header h2 {
    font-size: 1.2em;
    margin: 0;
    font-weight: normal;
    text-transform: uppercase;
}

.service-content {
    padding: 20px 5%;
    max-width: 1200px;
    margin: 0 auto;
}

/* サービス項目間の区切り線 */
.service-divider {
    border: none;
    border-top: 2px dotted #AAAAAA;
    margin: 20px 0;
}

.service-item {
    padding: 10px 0;
}

.service-item .service-title {
    text-align: center;
    font-size: 2em;
    margin-bottom: 8px;
    color: #000;
}

.service-item img {
    display: block;
    width: 30%;
    height: auto;
    object-fit: cover;
    margin: 0 auto 5px auto; /* 左右マージンをautoにすることで中央揃え */
}

/* 詳細2つを横並べにするコンテナ */
.service-details-container {
    display: flex;
    /* ★★★ 1つのdetail-boxを中央に配置する修正 ★★★ */
    justify-content: center; /* これを追加 */
    gap: 50px; /* 詳細ボックス間のスペース */
}

.detail-box {
    flex: 1; /* 均等な幅 */
    padding: 20px;
    max-width: 480px;
    /* ② リストを中央寄せにするための準備 */
    text-align: center;
}

/* 詳細タイトル */
.detail-box .detail-title {
    
    font-size: 1.2em;
    margin-top: 0;
    margin-bottom: 10px;

    /* ★★★ 追加・変更するスタイル ★★★ */
    background-color: #2CBADE; /* 指定の背景色 */
    color: #FFF;                /* 文字色を白に（視認性向上のため） */
    padding: 10px 20px;          /* 上下のパディングと左右のパディング */
    border-radius: 3px;         /* 角丸を追加 */
    display: inline-block;      /* 中央寄せと幅の制御のため */
    max-width: 90%;             /* ボックスが伸びすぎるのを防ぐ */

}

/* グレーの縦棒 */
.detail-separator {
    width: 2px;
    height: 50px;
    background-color: #AAAAAA;
    margin: 0 auto 15px auto;
}

/* ② detail-menuを左揃えの中央寄せにする修正 */
.detail-box .detail-menu {
    display: inline-block; /* 中央寄せのために横幅を内容に合わせる */
    margin: 0 auto 10px auto; /* 左右autoで親要素（.detail-box）内で中央寄せ */
    padding-left: 0; /* 不要なパディングをリセット */
    list-style: none; /* リストのスタイルをリセット */
    text-align: left; /* リスト項目（<h4>）のテキストを左揃えにする */
}

/* リスト項目（<h4>）にも左揃えを適用 */
.detail-menu li {
    text-align: left;
    font-size:large;
    line-height: 2em;
    font-weight: 600;

    position: relative; /* 擬似要素（::before）の基準位置にする */
    padding-left: 20px; /* テキストを右にずらしてチェックマークのスペースを作る */
    margin-bottom: 5px; /* 項目間の間隔 */
}

/* 擬似要素を使ってチェックマークを表示 */
.detail-menu li::before {
    content: "✓"; /* または "✔" "✅" */
    color: #65c847;
    font-weight: bold;
    position: absolute; /* 親要素（li）を基準に位置を調整 */
    left: 0; /* liの左端に配置 */
    top: 0;  /* 上からの位置（行の高さに合わせて調整） */
}

/* 詳細テキスト */
.detail-text-container {
    width: 50vw;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.8;

}

.detail-text {
    text-align: left; /* 左揃えに戻す */
    line-height: 1.8;
    max-width: 100%;
    
}





.nayami {
    color: #677598;
}
.marker {
    /* 1. 線を文字の下に描画する（デフォルトで実線） */
    background-image: linear-gradient(
        transparent 50%,     /* 上半分（50%）を透明にする */
        #ffea75 50%          /* 下半分（50%から下）を線（ここでは金色）にする */
    );
    
    /* 2. 背景の繰り返しを無効にする */
    background-repeat: no-repeat; 
    
    /* 3. 線の太さと位置を調整 */
    background-size: 100% 50%; /* 背景全体の高さをテキストの50%に制限 */
    background-position: 0 100%; /* 線をコンテナの最下部（100%）に配置 */

    /* 4. （オプション）線の色を微調整したい場合 */
    /* background-color: transparent; */
}
    




/* レスポンシブ対応 (画面幅が狭い場合、詳細を縦並びに) */
@media (max-width: 768px) {
	.detail-box {
      padding: 0;
	}
	.service-header {
	   padding:70px 0 20px 0;
	}
	.service-header h1 {
       font-size: 2em;
       padding-bottom: 3px;
    }

    .service-header h2 {
       font-size: 1em;
    }

    .service-details-container {
        flex-direction: column;
        gap: 20px;
    }

    .service-item .service-title {
        align-items: center;
    }
	.detail-text-container {
    width: 90vw;
	}
	.service-item img {
    width: 50%;
    height: auto;
    }
}









.contact-line-section {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    font-family: 'Noto sans JP';
    background-color: #f4f7f6;
}

.contact-line {
    background-color: #ffffff;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    text-align: center;
    max-width: 400px;
    width: 90%;
}

.contact-line h1 {
    color: #333;
    margin-bottom: 20px;
    font-size: 1.8em;
    border-bottom: 3px solid #00c300; /* LINEカラーをイメージ */
    display: inline-block;
    padding-bottom: 5px;
}

.contact-line p {
    color: #555;
    margin-bottom: 30px;
    line-height: 1.6;
}

.line-button {
    width: 300px;
    max-width: 100%; /* 親要素からはみ出さないように */
    margin-left: auto; /* 左側のマージンを自動調整 */
    margin-right: auto; /* 右側のマージンを自動調整 */
    display: block; /* margin: autoを適用するために必要 */

    padding: 15px 20px;
    background-color: #00c300; /* LINEカラー */
    color: white;
    text-decoration: none;
    font-size: 1.1em;
    font-weight: bold;
    border-radius: 9px;
    transition: background-color 0.3s, transform 0.2s;
    box-shadow: 0 4px 6px rgba(0, 195, 0, 0.3);
}

.line-button:hover {
    background-color: #00a800;
    transform: translateY(-2px);
}

.note {
    font-size: 0.85em;
    color: #999;
    margin-top: 30px;
}


@media (max-width: 768px) {
	.contact-line {
		padding: 5px;
		margin: 10px;
	}
    .line-button {
        padding: 15px;
		margin-bottom: 20px;
    }
	
	.note {
    font-size: 0.9em;
    margin: 30px;
    }
}











/* ベーススタイル */
.about {
    background-color: #F5F5F5; /* 背景色 */
    line-height: 1.6;
    margin: 0;
    padding: 0;
}

.about-page-section {
    padding: 60px 20px;
    margin-bottom: 20px;
}

.about-page-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

.about-page-title {
    font-size: 2.5em;
    font-weight: 700;
    color: #2c3e50;
    text-align: center;
    margin-bottom: 50px;
    padding-bottom: 10px;
    display: block; /* 中央揃えを確実にするため */
    /* スタイリッシュな下線 */
    position: relative;
}

.about-page-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background-color: #3498db; /* アクセントカラー */
    margin: 10px auto 0;
    border-radius: 2px;
}


/* ====================================
   1. PROFILE セクション
   ==================================== */
.profile-content {
    display: flex;
    flex-direction: column; /* 縦並び */
    align-items: center; /* 中央揃え */
    gap: 20px;
}

.profile-image {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    object-fit: cover;
    border: 5px solid #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.profile-name {
    font-size: 1.5em;
    font-weight: 700;
    color: #34495e;
    margin: 10px 0 0;
    text-align: center;
}

.career-timeline {
    max-width: 100%;
    height: auto;
}


/* ====================================
   2. MESSAGE セクション
   ==================================== */
.message-section {
    padding: 80px 20px; /* 上下のパディングを多めに */
}

.message-box {
    max-width: 800px;
    margin: 0 auto;
    padding: 30px;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    background-color: #ffffff;
}

.message-text {
    text-align: justify;
    margin-bottom: 50px;
    color: #555;
    line-height: 2;
}

.sign-area {
    text-align: right; /* サイン画像を右寄せ */
}

.signature-image {
    max-width: 150px;
    height: auto;
    opacity: 0.8;
}


/* ====================================
   3. 事務所概要 セクション
   ==================================== */
.office-table {
    width: 100%;
    max-width: 700px; /* テーブルの最大幅を固定し中央寄せ */
    margin: 0 auto;
    border-collapse: separate; /* セル間のスペースを確保 */
    border-spacing: 0 10px; /* セル間に10pxのスペース */
}

.office-table th, 
.office-table td {
    padding: 15px;
    text-align: left;
    border-bottom: 1px solid #eee;
}

.office-table th {
    width: 30%;
    background-color: #ecf0f1; /* 項目名の背景色 */
    color: #2c3e50;
    font-weight: 700;
    border-radius: 5px 0 0 5px; /* 左側に角丸 */
}

.office-table td {
    width: 70%;
    background-color: #ffffff;
    border-radius: 0 5px 5px 0; /* 右側に角丸 */
    color: #555;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03); /* 項目ごとに影 */
}

.office-table tr:last-child th,
.office-table tr:last-child td {
    border-bottom: none; /* 最後の行の下線は不要 */
}

/* ====================================
   4. Googleマップ埋め込み セクション
   ==================================== */
.google-map-embed {
    max-width: 800px;
    margin: 0 auto;
    border-radius: 10px;
    overflow: hidden; /* iframeの角丸を適用 */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.google-map-embed iframe {
    display: block;
    width: 100%;
}


/* ================================================= */
/* 【追加】事務所概要 - 電話番号のスパム対策 (CSS偽装) */
/* ================================================= */


.office-phone-link {
    text-decoration: none; 
    color: #555; 
}

/* 1. マスク対象の要素（空の<span>）の親要素 */
.office-phone-link .phone-number-mask {
    position: relative;
    display: inline-block; /* インライン要素として扱い、テーブル内で自然に表示 */
    /* ボット対策としてダミーのテキストサイズ分のスペースを確保（必須ではないが推奨） */
    width: 100px; 
    height: 1.3em; 
    line-height: 1.5em;
    overflow: hidden; 
    color: transparent; 
}

/* 2. ::beforeで正しい電話番号を表示 */
.office-phone-link .phone-number-mask::before {
    /* ⚡️ここにユーザーに表示したい正しい番号を記述します⚡️ */
    content: "06-7878-5348"; 
    
    font-size: 1em; 
    font-weight: normal;
    color: #555; 
    
    position: absolute;
    top: 0;
    left: 0;
    white-space: nowrap; 
}

.office-table td p {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}














.contact-page {
    /* 背景：F5F7FA */
    background-color: #F5F7FA;
    padding: 40px 20px; /* パディングで上下左右に余白 */
    display: flex;
    justify-content: center;
}

.contact-container {
    max-width: 700px; /* フォームの最大幅を設定 */
    width: 100%;
    padding: 30px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* テキスト：1C3557 */
.contact-title {
    color: #1C3557;
    font-size: 2em;
    text-align: center;
    margin-bottom: 10px;
    font-weight: 600;
}
.form-title {
    text-align: left;
}

/* レスポンシブ対応の調整（今回は不要だが、より細かい調整はここで） */
@media (max-width: 500px) {
    .contact-container {
        padding: 20px;
    }

    .contact-title {
        font-size: 1.7em;
    }
}














/* -------------------------------------- */
/* Topへ戻るボタンのスタイル */
/* -------------------------------------- */

.back-to-top {
    
    position: fixed;
    right: 0px; /* 右からの位置 */
    bottom: 100px; /* 下からの位置 */
    display: flex;
    flex-direction: column;
    align-items: center; /* 中央揃え */
/* 🚀 修正・追加: 初期状態は画面右外に隠し、アニメーションを設定 */
    transform: translateX(100%); /* 自分の幅の100%分、右に移動（画面外へ） */
    opacity: 0; /* 透明にしておく */
    visibility: hidden; /* クリックできないようにする */
    
    /* 速度と変化を設定 (ニョキッと現れるアニメーション) */
    transition: 
        transform 0.5s ease-out, /* スライドインを0.5秒で滑らかに実行 */
        opacity 0.5s ease-out,
        visibility 0.5s; 
    
    z-index: 1000;

    text-decoration: none; /* リンクの下線を削除 */
    color: #1C3557;
    background-color: rgba(255, 255, 255, 0.5);
    padding: 10px 5px; /* 上下のパディングを広く、左右を狭くして縦長に */
    border-radius: 5px; /* 角を丸く */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* 軽い影 */
}

/* 🌟 スクロール時にJSで追加するクラス */
.back-to-top.is-visible {
    transform: translateX(0); /* 元の位置に戻る */
    opacity: 1; /* 不透明にする */
    visibility: visible;
}




/* ホバー時のスタイル */
.back-to-top:hover {
    background-color: #f0f0f0; /* 背景色を少し暗く */
    color: #000;
}

/* アイコン（上矢印の円囲み） */
.back-to-top__icon-wrapper {
    /* 円のサイズと形状 */
    width: 40px;
    height: 40px;
    border: 2px solid #1C3557; /* 円の線 */
    border-radius: 50%; /* 完全な円に */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 5px; /* 下のテキストとの間隔 */
}

/* 上矢印のCSS表現 (長さ1のイメージ) */
.back-to-top__arrow {
    width: 0;
    height: 0;
    /* ボーダーで三角形を作成 */
    border-left: 5px solid transparent; /* 左右の透明な部分 */
    border-right: 5px solid transparent;
    border-bottom: 7px solid #1C3557; /* 矢印の色と高さ */
    /* 上矢印を短く見せるため、少し上に配置 */
    transform: translateY(-1px); 
}

/* 「Top」テキスト */
.back-to-top__text {
    font-size: 14px;
    font-weight: bold;
    line-height: 1; /* 行の高さを調整 */
    margin-bottom: 5px; /* 下の縦棒線との間隔 */
}

/* 縦棒線 (1px) */
.back-to-top__line {
    width: 2px; /* 幅1px */
    height: 80px; /* 線の長さ */
    background-color: #1C3557; /* 線の色 */
}


@media (max-width: 500px) {
  .back-to-top {
    right: 0px; /* 右からの位置 */
    padding: 10px 3px; /* 上下のパディングを広く、左右を狭くして縦長に */
}
  .back-to-top__line {
    width: 0px; /* 幅1px */
    height: 0px; /* 線の長さ */
}
}




/*    プライバシーポリシー　  */

#privacy {
    width: 100%; /* ページの端から端まで */
    box-sizing: border-box;
    background-color: #fff;
}
.privacy-header {
    background-color: #66afc2;
    color: #F5F7FA;
    text-align: center;
    padding: 60px 0 40px 0;
}
.privacy-header h1 {
    margin-bottom: 0;
}
.privacy-header h2 {
    font-size: medium;
    margin-top: 0;
}
.privacy-first {
    line-height: 1.8;
    margin: 60px 0;
}

.privacy-item {
    padding: 0 30px;
    margin: 0 auto;
    max-width: 900px;
    padding-bottom: 30px;
}

.privacy-line {
    border: none;
    border-top: 2px solid #66afc2; /* 線の色と太さ */
    margin-top: 20px;
    margin-bottom: 20px;
}

.privacy-title {
    color: #1C3557;
}

.privacy-text {
    margin-bottom: 50px;
    
}
@media (max-width: 768px){
	.privacy-header {
    padding: 80px 0 20px 0;
    }
	.privacy-item {
    padding: 0 10px;
    }
}








/* フェードイン要素の初期状態 */
.fade-in {
    opacity: 0; /* 最初は透明 */
    transform: translateY(50px); /* 少し下にずらしておく（ふわっと上がる演出） */
    transition: opacity 1s ease-out, transform 1s ease-out; /* アニメーションの時間とイージング */
    /* Intersection Observerで監視するまで見えないようにする */
}

/* is-showクラスが付与された時の状態（アニメーション後の状態） */
.fade-in.is-show {
    opacity: 1; /* 不透明にして表示 */
    transform: translateY(0); /* 元の位置に戻す */
}




/*  プロフィール　*/
.profile-header {
    text-align: center;
    padding: 50px 0 22px 0;
    background-color: #fff;
    border-bottom: 2px solid #ddd;
}

.profile-header h1 {
    font-size: 2.5em;
    margin: 0;
}

/* 全体コンテナ */
.profile-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0;
}

/* 上部セクション（Flexboxで左右に配置） */
.profile-top {
    display: flex;
    margin: 40px 5px;
    gap: 35px; /* 要素間の隙間 */
}

/* 左側: 名前と情報 */
.profile-left {
    display: flex;
    flex-direction: column;
    align-items: center; /* 中央寄せ */
    text-align: center;
    margin-top: 150px;
}

.profile-left-image {
	width: 70%;
	height:auto;
	max-width: 450px;
}

.name-jp {
    font-size: 1.5em;
	line-height: 1.5;
    color: #1a568c;
	margin-bottom: 0px!important;
}

.name-en {
    font-size: 0.8em;
    color: #666;
    margin-top: 0px;
}

.profile-text {
	color: #666;
	margin-top: 0px;
}


.profile-right {
    flex: 1; /* 均等に幅を割り当てる */
    display: flex;
    justify-content: center;
}
.profile-right-image {
	width: 500px;
	height:auto;
}



/* ======================================= */
/* レスポンシブ対応（画面幅が狭い場合） */
/* ======================================= */
@media (max-width: 768px) {
	.profile-header {
        padding: 40px 0 5px 0;
     }
    /* 上部セクションを縦並びにする */
    .profile-top {
        flex-direction: column;
        align-items: center;
		margin-top: 5px;
        gap: 0px;
    }
	.profile-left {
		margin-top: 20px;
	}
	
	.profile-left-image {
	width: 65%;
	height:auto;
	max-width: 250px;
}
    .profile-right-image {
		width: 93vw;
	}
	.profile-text {
	display: none;
	}
}