/*

Theme Name: My Portfolio

*/

/* --- 1. 全体のリセット --- */

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

/* --- 2. ヘッダー基本設定（太め・固定・上下中央） --- */

.site-header {
background-color: #EBD5AB;
padding: 30px 30px;
position: fixed;
top: 0;
left: 0;
width: 100%;
box-shadow: 0 2px 15px rgba(0,0,0,0.05);
display: flex;
align-items: center;
z-index: 9990 ;
}

.header-inner {
width: 100%;
max-width: 1280px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}

/* ロゴの文字が微妙に上下にズレるのを防ぐ */

.site-logo a {
display: flex;
align-items: center;
line-height: 1; /* 行間の余白をカット */
font-family: "Covered By Your Grace", cursive;
font-size: 35px;
color: #333;
text-decoration: none;
}

/* ハンバーガーボタンも真ん中に */
.menu-btn {
margin: 0;
}

.menu-btn {
position: relative;
z-index: 100000 !;
pointer-events: auto !; /* クリックを何が何でも通す設定 */
}

/* --- 3. PC版ナビゲーション（951px以上） --- */

@media screen and (min-width: 951px) {

.menu-btn {
display: none;
}

.site-nav ul {
display: flex;
list-style: none;
gap: 40px;
}

.site-nav a {
font-family: "Covered By Your Grace", cursive;
font-size: 40px;
color: #333;
text-decoration: none;
}

.site-nav a:hover {
color: #DE802B;
}
}

/* --- 4. スマホ・タブレット用設定（950px以下） --- */

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

/* ハンバーガーボタン */

.menu-btn {
display: flex ;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 22px;
background: none;
border: none;
cursor: pointer;
padding: 0;
z-index: 10005;
position: relative;
pointer-events: auto !; /* 強制的にクリックを有効にする魔法 */
}

.menu-btn span {
display: block;
width: 100%;
height: 2px;
background-color: #333 ;
transition: all 0.3s;
}

.menu-btn span:nth-child(2) { margin-top: 8px; }
.menu-btn span:nth-child(3) { margin-top: 8px; }

/* ×印アニメーション */

.menu-btn.open span:nth-child(1) { transform: translateY(10px) rotate(45deg); }
.menu-btn.open span:nth-child(2) { opacity: 0; }
.menu-btn.open span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }

/* --- 2. メニュー本体　--- */

.site-nav {

/* 位置を画面の真ん中に完全固定。rightは絶対に使わない */

position: fixed ;
top: 50% ;
left: 50% ;
right: auto ;
bottom: auto ;
transform: translate(-50%, -50%) scale(0.9) ;
opacity: 0 ;
visibility: hidden ;

/* デザイン */

width: 280px ;
height: 350px ;
background-color: rgba(235, 213, 171, 0.5) ;
border-radius: 30px;
backdrop-filter: blur(15px) ;
-webkit-backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.4) ;
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1) ;
z-index: 9998 ;

/* 【重要】アニメーションを「透明度」と「大きさ」だけに限定 */

transition: opacity 0.4s ease-out, transform 0.4s ease-out, visibility 0.4s ;
display: flex ;
flex-direction: column ;
justify-content: center ;
align-items: center ;
transition-property: opacity, transform ;
}

/* --- 1. 通常時（閉じている時） --- */

.site-nav {
/* ...既存の position: fixed; 等の設定はそのまま残してください... */
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -55%) scale(0.9); /* 少し上にズレて、少し小さい状態 */
opacity: 0;
visibility: hidden;
/* ★ここが重要！消える時の速さを設定（0.4秒） */
transition: all 0.4s ease-in-out;
z-index: 9999;
}

/* --- 2. 開いた時 --- */

.site-nav.open {
opacity: 1;
visibility: visible;

/* 真ん中に、元の大きさ(1.0)で表示 */

transform: translate(-50%, -50%) scale(1.0);
right: auto;
left: 50%;
}

/* --- 3. メニューの中身（リスト） --- */

.site-nav ul {
display: flex;
flex-direction: column;
gap: 30px;
padding: 0;
margin: 0;
list-style: none;
width: 100%;
}

/* --- 4. リンクの設定 --- */

.site-nav a {
font-size: 36px;
font-family: 'Covered By Your Grace', cursive;
color: #333;
text-decoration: none;
display: block;
text-align: center;
/* リンクにマウスを乗せた時のふわっと感もついでに追加 */
transition: opacity 0.3s ease;
}

.site-nav a:hover {
opacity: 0.6;
}
}

/* --- 5. フッター（メニューなし・コピーライトのみ版） --- */

.site-footer {
background-color: #EBD5AB;
padding: 20px 20px;
text-align: center;
}

.footer-inner {
max-width: 1280px;
margin: 0 auto;
}

.copyright {
font-family: "Covered By Your Grace", cursive;
font-size: 30px;
color: #333;
letter-spacing: 1px;
}

@media screen and (max-width: 950px) {
.copyright {
font-size: 12px;
}
}

/* --- 6. メインビジュアル (Hero) --- */

.hero {
width: 100%;
background-color: #fff;
padding: 0;
margin-top: 100px;
}

.hero-inner {
width: 100%;
line-height: 0;
}

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

/* スマホ用の調整 */

@media screen and (max-width: 950px) {
.catch-top { font-size: 24px; }
.catch-bottom { font-size: 32px; }
}

.catch-container {
position: relative;
z-index: 1;
margin-top: 100px;
}

@media screen and (max-width: 950px) {
.hero {
margin-top: 80px;
}
}

/* --- 7. Aboutセクション全体 --- */

.about-section {
padding: 100px 0;
width: 100%;
background-color: #F6F6F6;
overflow: hidden;
}

.section-title-container {

position: relative;
width: 100%;
margin: 60px auto 0;
height: 120px;
display: flex;
align-items: center;
justify-content: flex-start;
}

/* 「自己紹介」部分だけのスタイル */

.about-sub-title {
display: inline-block;
font-size: 16px;
font-family: "Noto Sans JP", sans-serif;
transform: translateY(-10px);
margin-right: 40px;
font-weight: normal;
}

.main-title {
font-family: "Covered By Your Grace", cursive;
font-size: 94px;
color: #333;
line-height: 0.8;
}

/* スマホ用 */

@media screen and (max-width: 950px) {
.title-text-wrapper { padding-left: 20px; }
.main-title { font-size: 80px; }
.title-bg-bar { width: 80%; height: 50px; }
}

.about-text {
width: 100%;
text-align: center;
line-height: 2.2;
color: #333;
margin-top: 50px;
}

.about-text p {
margin-bottom: 30px;
font-weight: normal;
}

.about-inner {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 40px;
width: 100%;
max-width: 1100px;
margin: 0 auto 60px;
padding: 0 20px;
}

.about-image {
width: 35%;
max-width: 400px;
flex-shrink: 0;
margin-left: -20px;
margin-right: 0;
}

.about-image img {
width: 100%;
height: auto;
display: block;
}

.about-profile {
flex: 0 1 auto;
}

.about-profile dl {
display: grid;
grid-template-columns: 140px 1fr;
gap: 25px 0;
font-size: clamp(18px, 3vw, 32px);
color: #333;
margin: 0;
}

/* スマホ用の調整 */
@media screen and (max-width: 950px) {
.about-inner {
gap: 20px;
padding-left: 10px;
}
.about-image {
margin-left: 0;
}
.about-profile dl {
grid-template-columns: 80px 1fr;
font-size: 16px;
}
}

/* --- Serviceセクション：中央から右への最新レイアウト --- */

.service-section {
padding: 60px 20px;
background-color: transparent;
overflow: hidden;
}

.service-section .section-title-container {
position: relative;
width: 100%;
height: 120px;
display: flex;
align-items: center;
justify-content: flex-start;
}

/* 帯：中央(50%)から右端へ伸ばす */

.service-bg-bar {
position: absolute;
left: 50%;
width: 50%;
height: 60px;
/* 右(白)から左(ベージュ)へのグラデーション */
background: linear-gradient(to left, #ffffff 0%, #EBD5AB 100%);
z-index: 1;
}

/* 文字の位置：中央(50%)を基準に配置 */

.service-section .title-text-wrapper {
position: relative;
z-index: 2;
display: flex;
align-items: baseline;
margin-left: 50%;
padding-left: 10px; /* 帯の端から文字までの余白 */
}

/* タイトル部分：英語が先、日本語が後 */

.service-title {
font-family: 'Covered By Your Grace', cursive ;
font-size: clamp(60px, 8vw, 94px);
font-weight: 400;
color: #333;
line-height: 1;
display: flex;
align-items: baseline; /* 底辺を揃える */
font-family: 'Covered By Your Grace', cursive !;
font-size: clamp(60px, 8vw, 94px);
font-weight: 400;
color: #333;
line-height: 1;
margin-top: 20px;
display: flex;
align-items: baseline;
}

/* 「ご対応」：自己紹介と同じ細さに合わせる */

.service-sub-title {
font-family: "Noto Sans JP", sans-serif !;
font-size: 24px;
font-weight: normal !;
color: #333;
margin-left: 40px;
transform: translateY(-2px);
white-space: nowrap;
margin-left: 20px;
margin-right: 0;
transform: translateY(-9px);
white-space: nowrap;
}

/* スマホ用調整 */

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

.service-bg-bar {
left: 20%;
width: 80%;
}

.service-section .title-text-wrapper {
margin-left: 20%;
padding-left: 15px;
}
}

/* --- 1. PC・共通設定 --- */

.service-section {
padding: 60px 20px;
background-color: transparent;
}

/* ★ホバーした時の動き */
.service-card:hover {
    /* 上に5px持ち上げる */
    transform: translateY(-10px);
    
    /* 影を少し濃く・大きくして、浮いている感を出す */
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

/* アイコンも少し動かしたい場合はこちら（お好みで） */
.service-card:hover .service-card-icon img {
    transform: scale(1.05); /* 5%大きくする */
    transition: transform 0.3s ease;
}

.service-container {
max-width: 1100px;
margin: 60px auto 0;
display: flex;
justify-content: center;
gap: 53px;
flex-wrap: wrap;
}

.service-card {
flex: 1;
min-width: 280px;
max-width: 320px;
border: 6px solid #EBD5AB;
border-radius: 20px;
padding: 40px 25px;
text-align: center;
background-color: transparent ;
box-sizing: border-box;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card-title {
font-family: 'Covered By Your Grace', cursive;
font-size: 48px;
color: #333;
margin-bottom: 20px;
}

.service-card-icon img {
width: 100%;
max-width: 200px;
height: auto;
margin-bottom: 20px;
}

.service-card-text {
font-size: 16px;
line-height: 1.8;
color: #333;
text-align: center;

}

/* --- 2. スマホ用の調整（画面幅 768px 以下） --- */

@media screen and (max-width: 768px) {
    .service-section h2,
.service-title {

margin-bottom: 5px ;

padding-bottom: 0 ;

}

.service-container {
flex-direction: column ;
align-items: center ;
margin-top: -40px ;
padding-top: 0 ;
gap: 30px ;
}

/* スマホでカードをスリムにする */
.service-card {
width: 70% ;
max-width: 250px ;
min-width: unset ;
padding: 20px 15px ;
border-width: 3px ;
margin-top: 0 ;
}

/* タイトルのサイズを小さく */
.service-card-title {
font-size: 30px ;
margin-bottom: 10px ;
}

/* アイコンの調整 */
.service-card-icon img {
max-width: 120px ;
margin-bottom: 10px ;
}

/* 説明文を14pxで3行に収める */
.service-card-text {
font-size: 13.5px ;
line-height: 1.5 ;
letter-spacing: -0.02em ;
text-align: center;
margin-bottom: 10px ;
padding: 0 5px ;
display: block ;
height: auto ;
}
}

/* --- 見出しの土台 --- */
.section-title-container {
position: relative;
width: 100%;
height: 120px; 
display: flex;
align-items: center; 
margin-top: 40px;
}

/* 背景バー */
.title-bg-bar {
position: absolute;
left: 0;
 
height: 88px; 
background: linear-gradient(to right, transparent, #96BDBA);
z-index: 1;
transform: translateY(-20px) ;
}

/* テキストを包む箱：バーの中で位置を固定 */
.title-text-wrapper {
position: relative;
z-index: 2;
display: flex;
align-items: baseline;
gap: 20px;

/* バーの「色の濃いエリア」に文字が来るように設定 */
margin-left: 380px;
}

/* --- 1. 見出し全体の土台（共通） --- */
.about-section .section-title-container,
.works-section .section-title-container {
    position: relative;
    width: 100%;
    height: 120px;
    margin-top: 100px;
    display: flex;
    align-items: center;
}

/* --- 2. 背景バー（共通） --- */
.about-section .title-bg-bar,
.works-section .title-bg-bar {
    position: absolute;
    left: 0;
    
    height: 60px;
    background: linear-gradient(to right, transparent, #96BDBA);
    z-index: 1;
    top: 50%;
    transform: translateY(-50%);
}

/* --- 3. テキスト全体の配置 --- */
/* About全体の配置 */
.about-section .title-text-wrapper {
    position: absolute ;
    left: -10px ; /* 文字全体の左位置 */
    top: 65% ;
    transform: translateY(-50%) ;
    z-index: 2;
    display: flex;
    align-items: baseline;
}

/* Works全体の配置 */
.works-section .title-text-wrapper {
    position: absolute ;
    left: 60px ; /* Aboutと同じ位置に揃える */
    top: 65% ;
    transform: translateY(-50%) ;
    z-index: 2;
    display: flex;
    align-items: baseline;
}

/* --- 4. 英語タイトル --- */
.about-title, .works-title {
    font-family: 'Covered By Your Grace', cursive;
    font-size: 85px; /* サイズを統一 */
    font-weight: 400;
    line-height: 1;
    color: #333;
    margin: 0;
}

/* --- 5. 日本語サブタイトル（24px） --- */
.about-sub-title, .works-sub-title {
    display: inline-block ;
    position: relative ;
    font-family: "Noto Sans JP", sans-serif ;
    font-size: 14px ;
    font-weight: normal ;
    color: #333 ;
    white-space: nowrap ;
    transform: none ;
}

/* ★Aboutの日本語：ここで個別に位置調整 */
.about-sub-title {
    left: 30px ; /* 左へ */
    top: -15px ;  /* 下へ */
}

/* ★Worksの日本語：ここで個別に位置調整 */
.works-sub-title {
    left: 15px ; /* 左へ */
    top: -15px ;  /* 下へ */
}

/* ボタンの配置（中央寄せ） */
.works-btn-container {
    text-align: center;
    margin-top: 60px; 
    margin-bottom: 100px; 
}

/* ボタン本体のデザイン */
.btn-more {
    display: inline-block;
    width: 264px;   
    height: 71px;   
    line-height: 71px; 
    text-decoration: none;
    border-radius: 100px; 
    background: linear-gradient(to bottom, #FFFFFF, #1F333E);
    
    /* タイポグラフィ */
    color: #FFFFFF ;
    font-family: 'Abel', sans-serif;
    font-size: 24px;
    transition: opacity 0.3s; 
}

/* ホバー（マウスを乗せた時）の演出 */
.btn-more:hover {
    opacity: 0.8;
}




/* --- Works カードスタイル（Serviceに統一） --- */

.works-container {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
    margin: 60px auto 0;
    max-width: 1100px;
}

.works-item {
    flex: 1;
    min-width: 280px;
    max-width: 320px;
    /* Serviceと同じ枠線と角丸 */
    border: 6px solid #96BDBA; 
    border-radius: 20px;
    padding: 20px; /* カード内の余白 */
    background-color: #fff;
    text-align: center;
    box-sizing: border-box;
    /* Serviceと同じ強めのシャドウ */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); 
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    padding: 20px 20px 60px;
}


/* 画像部分の調整 */
.works-img {
    overflow: hidden;
    border-radius: 12px; 
    margin-bottom: 15px;
    line-height: 0;
}

.works-img img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

/* タイトルの装飾（リンクなし・下線あり） */
.works-item-title {
    font-family: "Noto Sans JP", sans-serif; 
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin: 10px 0 0;
    padding-bottom: 8px;
    position: relative;
    display: inline-block; 
}

/* タイトル下のアクセント線（nagisaさん風） */
.works-item-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 2px;
    background-color: #1F333E;
}

/* ホバー時の動き（Serviceより少しリッチに浮かす） */
.works-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.2);
}

.works-item-title {
    margin-top: 20px;
    margin-bottom: 30px ; 
    font-size: 18px;
    font-weight: 600;
    color: #333;
    text-align: center;
    position: relative;
    display: inline-block;
}

.works-btn-container {
    text-align: center;
    margin-top: 120px ; 
    margin-bottom: 100px;
}

/* Worksセクション全体の背景色と余白 */
.works-section {
    background-color: #F6F6F6; 
    padding-top: 50px;        
    padding-bottom: 120px;   
    width: 100%;               
    margin: 0;
}

/* Worksセクション全体の最後に大きな余白を作る */
.works-section {
    padding-bottom: 120px ; 
}


/* Contactセクション専用の見出し調整 */
.contact-section .section-title-container {
    display: flex;
    justify-content: center; 
    align-items: center;
    position: relative;
    width: 100%;
    margin: 0 auto 60px;
    padding-left: 0; 
}

/* バーを中心（50%）に配置して、自分の幅の半分（-50%）戻す */
.contact-section .service-bg-bar {
    display: block ;
    position: absolute;
    top: 55%;
    left: 50% ;
    transform: translate(-50%, -50%) ; 
    width: 260px; 
    height: 40px;
    background-color: #EBD5AB;
    z-index: 1;
}

/* 文字をバーの上に重ねる */
.contact-section .title-text-wrapper {
    position: relative;
    z-index: 2;
    text-align: center;
}

/* Contactセクションの見た目調整 */
.contact-section {
    background-color: #fff;
    padding: 80px 0 120px;
}

/* ★Contact専用のグラデーションバーのサイズアップ */
.contact-section .contact-bg-bar {
    position: absolute;
    top: 55%;
    right: 0; 
    width: 50%; 
    min-width: 400px; 
    height: 60px; 
    background: linear-gradient(to left, rgba(235, 213, 171, 0) 0%, #EBD5AB 100%);
    z-index: 1;
    transform: translateY(-50%);
}

/* 文字の位置もバーの太さに合わせて微調整 */
.section-title-container.right .title-text-wrapper {
    position: relative;
    z-index: 2;
    padding-right: 65px; 
    text-align: right;
}

.contact-section .service-title {
    font-size: 94px; 
    line-height: 1.2;
}

/* テキストとボタンの中央寄せ */
.contact-text, .contact-btn-wrapper {
    text-align: center;
    margin-top: 40px;
}

/* Contactセクション全体 */
.contact-section {
    padding: 100px 0;
    background-color: #fff;
    overflow: hidden;
    padding-bottom: 150px;
}

/* 見出し全体を右に配置 */
.section-title-container.right {
    display: flex;
    justify-content: flex-end; 
    position: relative;
    width: 100%;
    margin-bottom: 60px;
}

/* ★右から左に濃くなるグラデーションバー */
.contact-bg-bar {
    position: absolute;
    top: 55%;
    right: 0; 
    width: 350px; /* バーの長さ（左までしっかり伸ばす） */
    height: 45px;
    background: linear-gradient(to left, rgba(235, 213, 171, 0) 0%, #EBD5AB 100%);
    z-index: 1;
    transform: translateY(-50%);
}

/* 文字をバーの上に重ねる */
.section-title-container.right .title-text-wrapper {
    position: relative;
    z-index: 2;
    padding-right: 280px; /* 画面右端からの余白 */
    text-align: right;
    padding-top: 25px;
}

.contact-section .service-title {
    font-size: 85px;
    color: #333;
}

.contact-text {
    text-align: center;
    font-size: 32px; 
    line-height: 1.6;
    margin-top: 150px;
    margin-bottom: 150px;
}

.btn-contact {
    display: inline-block;
    min-width: 264px;
    height: 72px;
    line-height: 72px; 
    text-align: center;
    text-decoration: none;
    /* 左から右へ、濃い緑から白へのグラデーション */
   background: linear-gradient(180deg, #FFFFFF 0%, #1F3D3E 100%);
    border-radius: 100px;
    font-family: 'Abel', sans-serif; 
    font-size: 20px;
    color: #FFFFFF;
    font-weight: regular;
    padding: 0 32px;
    transition: opacity 0.3s;
    border: none;
    cursor: pointer;
}

/* ホバー時の演出（お好みで） */
.btn-contact:hover {
    opacity: 0.8;
}


/* ==========================================================================
   PC版：個別レイアウト調整
   ========================================================================== */

/* --- 1. Aboutの見出し位置 --- */
.about-section .title-text-wrapper {
    position: absolute;
    left: -10px;         
    top: 65%;          
    transform: translateY(-50%);
    gap: 20px;         
}

.about-section .about-sub-title {
    font-size: 24px;   
    margin-bottom: 5px; 
}

/* --- 2. Worksの見出し位置 --- */
.works-section .title-text-wrapper {
    position: absolute;
    left: 60px;          
    top: 65%;           
    transform: translateY(-50%);
    gap: 25px;
}

.works-section .works-sub-title {
    font-size: 22px;    
    margin-bottom: 8px; 
}

/* --- 3. バーの長さも個別に変える場合 --- */
.about-section .title-bg-bar {
    width: 700px;      
}

.works-section .title-bg-bar {
    width: 700px;       
}

/* --- PC版の元の位置（メディアクエリの外） --- */
.section-title-container.right .title-text-wrapper {
    position: relative;
    z-index: 2;
    padding-right: 280px; /* ★PCではこの280pxが必須 */
    text-align: right;
}


/* スマホ（横幅768px以下）の時だけサイズを下げる設定 */
@media screen and (max-width: 768px) {
    .contact-text {
        font-size: 24px;
    }
}

/* フォーム全体の幅調整 */
.contact-form-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

/* 項目ごとの余白 */
.form-group {
    margin-bottom: 30px;
}

/* ラベルと「必須」タグの並び */
.label-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

/* 必須タグのデザイン */
.required-tag {
    background-color: #e74c3c; 
    color: #fff;
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: bold;
}

/* ラベル（項目名） */
.label-wrapper label {
    font-weight: bold;
    color: #333;
}

/* 入力欄（input/textarea）のスタイル */
.wpcf7-text, .wpcf7-textarea {
    width: 100%;
    background-color: #f8f8f8; 
    border: none;
    padding: 15px;
    border-radius: 4px;
    font-size: 16px;
}

/* 注意書きテキスト */
.form-note {
    font-size: 13px;
    color: #666;
    margin-top: 10px;
    line-height: 1.6;
}

/* 送信ボタンのカスタマイズ（以前のグラデーションを適用） */
.wpcf7-submit {
    display: block;
    margin: 50px auto 0;
    min-width: 264px;
    height: 72px;
    border-radius: 100px;
    border: none;
    cursor: pointer;
    color: #FFFFFF;
    font-family: 'Abel', sans-serif;
    font-size: 20px;
    /* 上から下に濃くなるグラデーション */
    background: linear-gradient(180deg, #FFFFFF 0%, #1F3D3E 100%);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    transition: 0.3s;
}

.wpcf7-submit:hover {
    opacity: 0.8;
    transform: translateY(2px);
}

/* PC版のバー（スマホ用メディアクエリの外側に書く） */
.title-bg-bar, .works-bg-bar {
    width: 60%; 
  
}


/* スマホ用（画面幅767px以下）のスタイル */
@media screen and (max-width: 767px) {
    /* ここにスマホ用のコードを書いていく */
    h1 {
        font-size: 24px;
    }
    .content-area {
        padding: 0 20px;
    }
}

/* ==========================================================================
   スマートフォン用設定 (720px以下) - 最終統合版
   ========================================================================== */
@media screen and (max-width: 720px) {

    /* 1. 全体設定 */
    html, body {
        overflow-x: hidden;
    }
    .site-content, .container, .main-container {
        width: 100% ;
        padding-left: 20px ;
        padding-right: 20px ;
        margin: 0 auto ;
        box-sizing: border-box;
    }

    /* 2. 見出しコンテナ共通設定 */
    .section-title-container {
        width: 100% ;
        height: 100px ;
        position: relative ;
        overflow: visible ;
        margin: 40px 0 ;
    }

    /* 3. 背景バー共通設定 */
    .title-bg-bar, .service-bg-bar, .works-bg-bar, .contact-bg-bar {
        position: absolute ;
        width: 90% ;
        height: 50px ;
        top: 20px ;
        z-index: 1 ;
        transform: none ;
    }

    /* バーの左右振り分け */
    .about-section .title-bg-bar, .works-section .title-bg-bar {
        left: 100px ;
        right: auto ;
        border-radius: 0px;
    }

    .service-bg-bar, .contact-bg-bar {
        right: 0 ;
        left: auto ;
        border-radius: 0px;
    }

    /* 4. タイトル文字共通設定 */
    .title-text-wrapper {
        position: absolute ;
        z-index: 999 ;
        top: 50% ;
        transform: translateY(-50%) ;
        display: flex ;
        flex-direction: column ;
        width: auto ;
        margin: 0 ;
    }


    /* Aboutセクションの文字を横並びにする */
    .about-section .title-text-wrapper {
        flex-direction: row ;
        align-items: flex-end ; 
        gap: 50px ;            
        left: 80px ;          
    }

    /* 「自己紹介」の微調整 */
    .about-section .about-sub-title {
        order: -1 ;   
        padding-bottom: -20% ; 
        white-space: nowrap ;
        margin-bottom: -10px ;  
    }

    /* 「About」の微調整 */
    .about-section .about-title {
        line-height: 1 ;
    }

    /* 1. Works全体の横並びと位置設定 */
    .works-section .title-text-wrapper {
        flex-direction: row ; 
        align-items: flex-end ; 
        gap: 100px ;           
        left: 130px ;          
        right: auto ;
    }

    /* 2. 「実績」サブタイトルの微調整 */
    .works-section .works-sub-title {
        order: -1 ;           
        white-space: nowrap ;
        font-size: 14px ;
        margin-right: 30px ;
        margin-bottom: -10px ; 
    }

    /* 3. 「Works」メインタイトルの微調整 */
    .works-section .works-title {
        line-height: 1 ;
        display: flex ;
        align-items: flex-end ;
    }

   .service-section .title-text-wrapper {
        display: flex ;
        flex-direction: row ;   
        align-items: flex-end ;    
        justify-content: flex-end ; 
        right: 40px ;     
        top: 12% ;      /* ★上下位置 */        
        left: auto ;
    }

    /* 2. 「ご対応」サブタイトルの微調整 */
    .service-section .service-sub-title {
        display: inline-block ;
        font-size: 14px ;
        color: #333 ;
        margin-right: 5px ;    
        margin-bottom: -7px ;   
    }

    /* 3. 「Service」メインタイトル */
    .service-section .service-title {
        font-size: 50px ;
        line-height: 1 ;
        margin: 0 ;
        display: flex ;
        align-items: flex-end ;
    }

     /* 5. 文字の見た目 */
    .about-title, .service-title, .works-title, .contact-title {
        font-size: 26px ;
        color: #333 ;
        margin: 0 ;
        line-height: 1 ;
    }
    .about-sub-title, .service-sub-title, .works-sub-title, .contact-sub-title {
        font-size: 14px ;
        color: #333 ;
        margin: 0 ;
        display: block ;
    }


   /* 1. Contact全体の枠組み調整 */
    .contact-section .section-title-container.right {
        position: relative ;
        left: auto ;   
        right: 0 ;
        width: 100% ;
    }

    /* 2. 文字の塊：位置を左に動かす設定 */
    .contact-section .title-text-wrapper {
        position: absolute ;
        right: 80px ;  
        left: auto ;
        top: 50% ;
        transform: translateY(-50%) ;
        display: flex ;
        flex-direction: row ;     
        align-items: flex-end ;  
        width: max-content ;     
        padding: 0 ;
    }

    /* 3. 「Contact」本体（英語を左側に配置） */
    .contact-section .service-title {
        display: flex ;
        flex-direction: row ;
        align-items: flex-end ;
        font-size: 50px ;
        line-height: 1 ;
        margin: 0 ;
        order: 1 ; 
    }

    /* 4. 「お問い合わせ」サブタイトル（日本語を右側に配置） */
    .contact-section .service-sub-title {
        order: 2 ; 
        font-size: 14px ;
        margin-left: 12px ; 
        margin-right: 0 ;
        margin-bottom: 0px ; 
        white-space: nowrap ;
        display: inline-block ;
    }

    .contact-section .contact-bg-bar {
        /* 幅を上書き */
        width: 80% ;    
        min-width: 0 ;   
        max-width: none ;
        right: 0 ;
        left: auto ;
        height: 50px ;   
    }



    /* --- 【最重要】PC版の280pxの余白をリセット --- */
    .section-title-container.right .title-text-wrapper {
        padding-right: 0 ; 
        right: 25px ;    
        position: absolute ;
        top: 50% ;
        transform: translateY(-50%) ;
    }
    
    /* Contact内の文字を右揃えに念押し */
    .contact-section .service-title {
        text-align: right ;
        align-items: flex-end ;
    }

    /* 5. 文字の見た目（スマホサイズ調整） */
    .about-title, .service-title, .works-title, .contact-title {
        font-size: 50px ; 
        color: #333 ;
        margin: 0 ;
        line-height: 1.1 ; 
        white-space: nowrap ; 
    }

    /* サブタイトル (自己紹介, 実績, ご対応, お問い合わせ) */
    .about-sub-title, .service-sub-title, .works-sub-title, .contact-sub-title {
        font-size: 14px ; 
        color: #333 ;
        margin: 0 ;
        letter-spacing: 0.1em ; 
        display: block ;
    }

    /* Aboutセクションの説明文：中央揃え版 */
    .about-text {
        font-size: 14px ;   
        line-height: 1.8 ;  
        text-align: center ; 
        margin-top: 30px ;
        padding: 0 20px ;   
    }

    /* 最後のスローガン部分 */
    .about-text .slogan {
        margin-top: 20px ;
        font-weight: bold ;
        display: block ;
    }

    /* プロフィール表全体の調整 */
    .about-profile dl {
        display: grid ;
        grid-template-columns: 70px 1fr ; 
        gap: 15px 10px ;
        font-size: 14px ;
        color: #333 ;
        margin: 0 ;
    }

    /* 右側のテキスト（名前など）が改行されないように調整 */
    .about-profile dd {
        margin: 0 ;
        line-height: 1.5 ;
        white-space: nowrap ; 
    }

    /* Serviceカード内の説明文調整 */
    .service-card-text {
        font-size: 14px ;    
        line-height: 1.2 ;   
        color: #333 ;
        text-align: center ; 
        margin-bottom: 0 ;   
        padding: 0 10px ;   
        letter-spacing: 0.2em ; 
    }

    /* ついでにカード自体の余白も微調整（スッキリ見せるため） */
    .service-card {
        padding: 30px 20px ; 
    }

    /* カードタイトルのサイズもバランス調整 */
    .service-card-title {
        font-size: 32px ;    
        margin-bottom: 15px ;
    }

    /* ServiceセクションとWorksセクションの間の隙間を調整 */
    .service-section {
        padding-bottom: 40px ; /* 下側の余白をカット */
    }

    .works-section .section-title-container {
        margin-top: 40px ;    /* 見出しの上の余白を大幅に削る */
    }

    /* ついでにAboutとServiceの間も広すぎる場合はここ */
    .about-section {
        padding-bottom: 40px ;
    }

    /* 1. Worksカード全体の形をServiceに合わせる */
    .works-item {
        width: 70% ;         
        max-width: 250px ;   
        margin: 0 auto 30px ;
        padding: 20px 15px ;  
        border: 3px solid #96BDBA ; 
        border-radius: 20px ; 
        background-color: #fff ;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1) ;
    }

    /* 2. カード内の画像（アイキャッチ）の調整 */
    .works-img {
        width: 100% ;
        height: auto ;
        margin-bottom: 15px ;
        border-radius: 12px ; 
        overflow: hidden ;
    }

    .works-img img {
        width: 100% ;
        height: 140px ;      
        object-fit: cover ;  
    }

    /* 3. 作品タイトルの調整 */
    .works-item-title {
        font-size: 16px ;    
        font-weight: bold ;
        color: #333 ;
        margin: 0 ;
        padding-bottom: 8px ;
        display: inline-block ;
        position: relative ;
    }

    .works-item-title::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 30px;
        height: 2px;
        background-color: #1F333E;
    }

    /* Worksセクションの下側の余白を削る */
    .works-section {
        padding-bottom: 40px ; /* 120pxから大幅にカット */
    }

    /* moreボタンの下側の余白を削る */
    .works-btn-container {
        margin-top: 40px ;    /* ボタンの上の余白を少し詰める */
        margin-bottom: 0 ;    /* ボタンの下の余白をゼロに */
    }

    /* Contactセクションの上側の余白を削る */
    .contact-section {
        padding-top: 100px ;   /* 100pxからカットしてWorksと近づける */
    }

    /* Contact見出しの上の余計なマージンをリセット */
    .section-title-container.right {
        margin-top: 0 ;
        margin-bottom: 30px ; /* 見出しとその下の文章の間の距離 */
    }

    /* Contactセクションのテキスト調整 */
    .contact-text {
        font-size: 18px ;    
        line-height: 1.6 ;  
        margin-top: 40px ;  
        margin-bottom: 40px ;
        padding: 0 20px ;   
        text-align: center ; 
    }

    /* 1. 見出しの土台を左から離す */
    .about-section .section-title-container,
    .works-section .section-title-container {
        padding-left: 20px ;  
        width: 100% ;
        display: flex ;
        align-items: center ;
    }

    /* 2. 背景バーを左端から離して丸める */
    .about-section .title-bg-bar, 
    .works-section .title-bg-bar {
        left: 0 ;            
        position: relative ;  
        width: 80% ;         
        height: 50px ;        
    }

   /* ==========================================
   ABOUTセクションの文字調整
   ========================================== */
.about-section .title-text-wrapper {
    left: 85px ;       /* 全体の左位置 */
    top: 85% ;        /* 全体の上下位置 */
    gap: 10px ;        /* 英語と日本語の隙間 */
}
.about-title {
    font-size: 50px ;  /* Aboutの文字サイズ */
}
.about-sub-title {
    font-size: 14px !important;  /* 「自己紹介」のサイズ */
    position: relative ; /* 動かすための準備 */
    left: -5px ;       /* ★ここ！マイナスの数字にすると左へ動きます */
    margin-bottom: -10px ; /* ★高さの微調整（英語と揃える） */
}

/* ==========================================
   WORKSセクションの文字調整
   ========================================== */
.works-section .title-text-wrapper {
    left: 100px ;      
    top: 82% ; 
    gap: 12px ;
}
.works-title {
    font-size: 50px ;  /* Worksの文字サイズ */
}
.works-sub-title {
    font-size: 14px ;  /* 「実績」のサイズ */
    margin-bottom: -10px ; /* ★高さの微調整 */
}
    /* フッター全体の調整 コピーライトの文字調整 */
footer p, 
.copyright {
    font-size: 12px ;   
    color: #333 ;       
    letter-spacing: 0.08em ; 
    margin: 0 ;
}

.contact-section .section-title-container.right .title-text-wrapper {
    padding-right: 0 ;      /* PC版の280pxを完全に消す */
    right: 25px ;           /* 右端からの距離を固定 */
    left: auto ;            /* 左側の位置指定を解除 */
    position: absolute ;
    top: 50% ;
    transform: translateY(-50%) ;
    margin-left: 0 ;
    display: flex ;
    flex-direction: row ;   /* 文字を横に並べる */
    align-items: flex-end ;
}

/* 1. メッセージ（質問や気になる事〜）の上下余白 */
    .contact-text {
        margin-top: 60px ;    /* 見出しとの間隔 */
        margin-bottom: 80px ; /* ボタンとの間隔（ここを広げる） */
        font-size: 14px ;     /* 読みやすいサイズに微調整 */
        line-height: 1.8 ;
    }

    /* 2. 送信ボタン自体の位置調整（念押し） */
    .wpcf7-submit, .btn-contact {
        margin-top: 20px ;
    }

    /* 1. メインビジュアル下の余白を削る */
    .hero {
        margin-bottom: 20px !important; /* もし広く空いていればここを調整 */
    }

    /* 2. Aboutセクションの見出し上の余白を削る */
    .about-section {
        padding-top: 40px !important; /* 100pxなどになっているのを小さく */
    }

    /* 3. 見出しコンテナ自体の上のマージンを調整 */
    .about-section .section-title-container {
        margin-top: 0 !important;
    }
}



/* ==========================================
   PC専用設定（951px以上）
   ========================================== */
@media screen and (min-width: 951px) {

    /* コンテナ：右寄せの土台 */
    .contact-section .section-title-container.right {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        position: relative;
        width: 100%;
        height: 120px;
        margin-bottom: 60px;
    }

    /* 背景バー：右端に固定 */
    .contact-section .contact-bg-bar {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 600px; /* バーの長さ */
        height: 60px; /* バーの太さ */
        background: linear-gradient(to left, rgba(235, 213, 171, 0) 0%, #EBD5AB 100%);
        z-index: 1;
        display: block; /* 消えていた場合に備えて */
    }

    /* 文字全体のラッパー：ここで右端からの距離をミリ単位で決める */
    .contact-section .section-title-container.right .title-text-wrapper {
        position: relative;
        z-index: 2;
        padding-right: 190px; /* ★重要：ここを調整してバーの上に文字を乗せる */
        display: flex;
        flex-direction: column; /* 英語と日本語を縦に並べる場合 */
        align-items: flex-end;
        margin-left: auto;
        right: auto;
        top: auto;
        transform: none;
    }

    /* メインタイトル（Contact） */
    .contact-section .service-title {
        font-size: 85px;
        line-height: 1;
        margin: 0;
    }

    /* サブタイトル（お問い合わせ） */
    .contact-section .service-sub-title {
        font-size: 24px;
        margin-top: 5px;
        margin-right: 0;
    }
}

    /* --- 通常時（PC）の設定 --- */
.sp-only {
    display: none !important; /* スマホ用を消す */
}

/* --- 950px以下（スマホ）の設定 --- */
@media screen and (max-width: 950px) {
    .pc-only {
        display: none !important; /* PC用を消す */
    }
    .sp-only {
        display: block !important; /* スマホ用を出す */
        width: 100%;
        height: auto;
    }
}


/* ページネーション全体の配置 */
.pagination-wrapper {
    margin: 60px 0; 
    display: flex;
    justify-content: center; 
}

/* リンクボタンの並び */
.pagination .nav-links {
    display: flex;
    gap: 14px; 
    align-items: center;
}

/* 数字やNEXTボタンのデザイン */
.pagination .page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 5px;
    border: 1px solid #1F3D3E; /* サイトの色に合わせる */
    color: #1F3D3E;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    transition: 0.3s;
}

/* 現在表示しているページの数字（カレント） */
.pagination .page-numbers.current {
    background-color: #1F3D3E;
    color: #fff;
}

/* マウスを乗せたとき */
.pagination .page-numbers:hover:not(.current) {
    background-color: #EBD5AB; /* お問い合わせボタンのベージュ系 */
    border-color: #EBD5AB;
    color: #333;
}

/* archive-works.php のときだけ、上にゆとりを持たせる */
.archive-main {
    padding-top: 120px; 
}

/* カード全体のリンク設定 */
.works-item-link {
    text-decoration: none; /* 下線を消す */
    color: inherit;        /* 文字色を親要素から引き継ぐ */
    display: block;        /* 全体をクリッカブルにする */
    transition: 0.3s;      /* ホバー時の動きを滑らかに */
}

/* ホバーした時に少し浮かせたり透明度を変えるとお洒落です */
.works-item-link:hover {
    opacity: 0.8;
    transform: translateY(-5px); /* 少し上に浮くアニメーション */
}

/* ボタンのデザインは維持 */
.works-site-btn {
    display: inline-block;
    padding: 8px 20px;
    background-color: #1F3D3E; /* サイトのメインカラー */
    color: #fff;
    font-size: 14px;
    border-radius: 4px;
}