@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap');

/* ==========================================================================
共通設定（フォント・カラー・サイズ）
========================================================================== */
body {
font-family: "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro", "Open Sans", sans-serif;
color: #51433C; 
line-height: 1.6;
margin: 0;
padding: 0;
background-color: #fff6d5;
font-size: 18px;
}

html {
background-color: #fff;
}

h1, .title { font-size: 35px; }
h2 {
font-size: 30px; 
margin-bottom: 8px;
}
h3 { font-size: 18px; }
p, li { 
font-size: inherit;
line-height: 2;
}

h2, h3 {
text-align: center;
font-weight: bold;
}

/* タブレット */
@media (max-width: 1024px) {
h2 { font-size: 26px; }
h3 { font-size: 17px; }
p, li { font-size: 17px; }
}

/* スマホ */
@media (max-width: 768px) {
h2 { font-size: 20px; }
h3 { font-size: 16px; }
p, li { font-size: 16px; }
}


/* ==========================================================================
スマホのみ改行させる設定
========================================================================== */
/* 通常（パソコンなど大画面）の時は改行タグを非表示にする */
.sp-only {
display: none;
}

/* スマートフォン向け（画面幅768px以下）の時に改行を有効にする */
@media screen and (max-width: 768px) {
.sp-only {
display: inline; /* スマホの時だけ改行として機能させる */
}
}


/* ==========================================================================
メインビジュアル（FV）エリア
========================================================================== */

.main-visual {
position: relative;
width: 100%;
height: 800px;
overflow: hidden;
max-width: none;
margin: 0;
padding: 0;
}

.MV-image,
.MV-image picture,
.MV-image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}

.MV-image img {
object-position: center 10%;
}

.MV-title {
position: absolute;
inset: 0;

display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

padding: 0 20px;
box-sizing: border-box;

color: #fff;
text-align: center;
z-index: 10;
}

.MV-title .title {
margin: 0;
font-size: 62px;
line-height: 1.5;
font-family: "Zen Maru Gothic", sans-serif;
font-weight: 500;
}

.MV-title .sub-title {
margin: 0 0 12px 0;
font-size: 30px;
line-height: 1.3;
font-family: "Zen Maru Gothic", sans-serif;
font-weight: 500;
background-color: #659a32;
color: #ffffff;
display: inline-block;
padding: 4px 16px;
}

/* =========================================
Section Common
========================================= */

section {
max-width: 800px;
margin: 40px auto;
padding: 40px;
box-sizing: border-box;
}

.section-box {
background-color: #ffffff;
border-radius: 20px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}


/* ==========================================================================
Intro
========================================================================== */

.intro h2 {
line-height: 1.22;
}

.intro {
margin-top:100px;
}

.intro p {
margin-bottom: 0;
}


/* ==========================================================================
サービス内容
========================================================================== */

/* --- 子要素（アイコン）への干渉を防ぐため、対象を限定化 --- */
.services > img {
display: block;
width: 100%;    
max-width: 500px; 
height: auto; 
margin: 0 auto 20px;
}

.services-grid {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 40px 24px;
}

.services-item {
width: calc(50% - 12px);
box-sizing: border-box;
}

.services-item h3 {
display: flex;
align-items: center;
gap: 10px;
text-align: left;
font-size: 18px;
margin-bottom: 12px;
}

.services-item h3 .service-icon {
display: block;
width: 32px;
height: auto;
margin: 0; 
}

.services-item picture {
display: block; 
width: 100%;
height: 260px;
margin-bottom: 16px;
background-color: #f9f9f9; 
border-radius: 0;
overflow: hidden;
}

.services-item picture img {
width: 100%;
height: 100%;
object-fit: cover;
}

.services-item p {
font-size: 15px;
margin: 0;
}


/* ==========================================================================
Concept
========================================================================== */
.concept {
text-align: center;
}

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

.title-underline {
display: block;
width: 100%;
max-width: 250px;
margin: 0 auto;
}

.title-underline img {
width: 100%;
height: auto;
display: block;
margin-bottom: 40px;
}

/* ==========================================================================
Concept
========================================================================== */

.concept-right-body {
flex-grow: 1;
}

.concept-right-body h2 {
text-align: center;
font-size: 1.6rem;
margin-bottom: 5px;
}

.representative-director {
width: 100%;
max-width: 800px;
height: auto;
border-radius: 0;
flex-shrink: 0;
}

.concept-text {
line-height: 1.44;
text-align: left;
margin-bottom: 50px;
font-size: 16px;
}

.concept-signature {
display: block;
text-align: right;
}

.company-line {
font-size: 1rem;     
margin-bottom: 9px;
}

.name-line {
font-size: 1rem;    
letter-spacing: 0.1em;
margin: 0;
}

.name-line:not(.job-title) {
font-size: 1.5rem;
font-weight: bold;
}

.job-title {
font-size: 0.9rem;
font-weight: normal;
margin-right: 10px;
}

/* ==========================================================================
area
========================================================================== */

.area {
text-align: center;
}

.area .map {
display: flex;           
align-items: center;     
justify-content: center;  
gap: 12px;       
margin-top: 20px;
}

.area .map img {
width: 100%;
max-width: 30px;
height: auto;
margin: 0;
display: block;
}

.area .map p {
margin: 0;              
font-size: 16px;      
font-weight: bold;       
}

.address {
position: relative;
width: 100%;
max-width: 750px;
margin: 0 auto;
height: auto;       /* 💡 高さを固定せず、中身の画像に合わせる */
}

/* 💡 新しく追記：地図画像そのものを横幅に合わせて綺麗に縮小させる */
.address img {
display: block;
width: 100%;        /* 親要素の幅（最大750px）いっぱいに広げる */
height: auto;       /* 縦横比を崩さずに自動縮小させる */
margin:10px auto;
}


/* ==========================================================================
usage
========================================================================== */
.usage-price {
padding-bottom: 15px;
}

.usage-item {
background-color: #f7d8ff; 
border-radius: 15px;     
padding: 24px;
margin-bottom: 20px;     
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.usage-item h3.numbered-heading {
font-size: 18px;
font-weight: bold;
margin-bottom: 12px;
text-align: left; 
}

.usage-item p {
font-size: 16px;
margin-bottom: 0;
text-align: left;
}

.price h2 { 
text-align: center; 
margin-top: 50px;
}

.price p {
font-size: 16px;
margin-bottom: 20px;
text-align: center;
}

.price ul {
padding-left: 0;
list-style: none;
background-color: #dbffad;
border-radius: 20px;
padding: 20px 40px;
max-width: 800px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.price li {
font-size: 16px;
margin-bottom: 16px;
line-height: 1.5;
position: relative;
padding-left: 15px;
}

.price .li-last {
margin-bottom: 0;
}

.price li::before {
content: "・";
position: absolute;
left: 0;
}

/* ==========================================================================
staff
========================================================================== */
.staff {
text-align: center;
}

.staff-container {
display: flex;
justify-content: space-around;
align-items: flex-start;
gap: 40px;
margin-top: 30px;
}

.staff-member {
text-align: center;
max-width: 380px;
margin: 0;
}

.staff-member img {
width: 180px;
height: 180px;
object-fit: cover;
border-radius: 50%;
display: block;
margin: 0 auto 20px;
border: 2px solid #51433C;
}

.staff-member h3 {
text-align: center;
font-size: 20px;
font-weight: bold;
margin-bottom: 15px;
}

.staff-member p {
font-size: 16px;
margin-bottom: 0px;
text-align: left;
}


/* ==========================================================================
contact
========================================================================== */
.contact {
background-color: #ffffff;
max-width: none; /* 上で設定されているsectionの横幅制限(900px)を解除して画面いっぱいに広げる */
padding: 60px 20px;
}

.contact h2 {
text-align: center;
}

.contact-btn {
display: block;
width: 100%;
max-width: 450px;    /* PCで見えるときのボタンの最大横幅 */
text-align: center;  /* 文字をボタンの真ん中に配置 */
margin: 0 auto 20px auto;
background: linear-gradient(90deg, #ffca54 0%, #f39849 100%);
font-size: 1.2rem;
padding: 18px 0;     /* 左右の固定余白をなくし、上下だけにします */
font-weight: bold;
text-decoration: none;
border-radius: 50px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
position: relative;
color: #51433C; 
}

.contact-btn .arrow {
position: absolute;
right: 24px;         /* ボタンの右端から 24px の位置に固定 */
top: 50%;            /* 上下中央に配置するための設定（ここから下2行） */
transform: translateY(-50%);
font-size: 0.9rem;   /* 矢印のサイズを少しだけ小さくして上品にする場合（お好みで） */
}

.contact-message{
max-width: 900px;
margin: 0 auto 50px;
text-align: center;

}

.contact-btn:hover {
color: #ffffff;
background-color: #b3d7a9; 
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
transform: translateY(2px); 
}

/* =========================================
Tablet
========================================= */

@media screen and (max-width: 1024px) and (min-width: 769px) {

/* -----------------------------------------
共通
----------------------------------------- */

section {
max-width: 800px;
width: calc(100% - 48px);
margin: 40px auto;
padding: 36px 32px;
box-sizing: border-box;
}

h2 {
font-size: 20px;
}

h3 {
font-size: 15px;
}

p,
li {
font-size: 15px;
}

/* -----------------------------------------
Main Visual
----------------------------------------- */

.main-visual {
height: 700px;
}

.MV-image img {
position: relative;
transform: translateY(30px);
}

.MV-title .title {
font-size: 50px;
width: 90%;
max-width: 700px;
}

.MV-title .sub-title {
font-size: 24px;
}


/* -----------------------------------------
共通BOX
----------------------------------------- */

.featured .usage-price {
margin: 40px 24px 0;
padding: 36px 32px;
}


/* ==========================================================================
Intro
========================================================================== */

.intro {
margin-top:70px;
}

/* -----------------------------------------
Services
----------------------------------------- */

.services-grid {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 40px 24px;
}

.services-item h3 {
font-size: 15px;
gap: 8px;
}

.services-item h3 .service-icon {
width: 28px;
}
.services-item picture {
height: 220px;
}

.price h2 {
margin-top: 40px;
}

/* -----------------------------------------
Concept
----------------------------------------- */

.concept-content {
gap: 24px;
}

.representative-director {
max-width: 620px;
}

/* -----------------------------------------
Staff
----------------------------------------- */

.staff-container {
gap: 24px;
}

.staff-member img {
width: 160px;
height: 160px;
}

/* -----------------------------------------
Contact
----------------------------------------- */
.contact {
width: 100%;
max-width: none;
margin: 40px 0;
padding: 60px 20px;
}
.contact-btn {
max-width: 380px;
}

}

/* =========================================
Responsive SP
========================================= */

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

/* -----------------------------------------
共通
----------------------------------------- */

h2 { 
font-size: 20px; 
}

h3 { 
font-size: 15px; 
}

p { 
font-size: 15px; 
}
.address img, .concept img {
width: 100%;
height: auto !important;
object-fit: contain;
}

.title-underline img{ 
margin-bottom: 10px; 
}

section {
margin: 35px 20px;
padding: 30px 20px;
}


/* -----------------------------------------
Main Visual
----------------------------------------- */

.main-visual {
height: 560px;
}

.MV-image img {
position: relative;
transform: translateY(20px);
}

.MV-title {
width: 100%;
left: 0;
right: 0;
padding: 0 20px;
box-sizing: border-box;
}

.MV-title .title {
font-size: 30px;
line-height: 1.4;
}

.MV-title .sub-title {
font-size: 16px;
padding: 4px 12px;
}

/* ==========================================================================
Intro
========================================================================== */

.intro {
margin-top:50px;
}

/* -----------------------------------------
Services
----------------------------------------- */

.services-item h3 {
font-size: 15px;
gap: 8px;
}

.services-item h3 .service-icon {
width: 28px;
}
.services-item { 
width: 100%; 
}
.services-item picture { 
height: 200px; 
}

/* -----------------------------------------
Concept
----------------------------------------- */
.concept-content {
height: auto;                /* 固定高さを解除して縦に伸ばす */
display: flex;
flex-direction: column;      /* 上下に並べる魔法の指示 */
}

.company-line {
font-size: 0.8rem; /* 会社名のフォントサイズを調整 */
}

/* -----------------------------------------
area
----------------------------------------- */
.area .map {
    align-items: center;
}

.area .map img {
    width: 24px;
    margin: 0;
}

.area .map p {
width: auto;
margin: 0;
line-height: 1.5;
text-align: left;
}

.price ul {
padding: 30px 20px;
margin: 20px 0 20px;
}
.price h2 {
margin-top: 40px;
}

/* -----------------------------------------
Staff
----------------------------------------- */

.staff-container {
flex-direction: column; /* 横並びから縦並びに変更 */
align-items: center;    /* スタッフごとの塊を中央に寄せる */
gap: 50px;              /* 縦並びになった時のスタッフ間のスキマ */
}

/* -----------------------------------------
contact
----------------------------------------- */
.contact {
margin: 35px 0; 
}

.contact-message{
text-align: center;
}
}

/* =========================================
Privacy Policy
========================================= */

.privacy {
padding: 80px 20px;
}

.privacy-title {
text-align: center;
margin-bottom: 40px;
}

.privacy-content {
max-width: 900px;
margin: 0 auto;
padding: 50px;
background: #fff;
border-radius: 20px;
box-shadow: 0 4px 12px rgba(0,0,0,.05);
}

.privacy-content h2 {
margin-bottom: 20px;
font-size: 1.8rem;
font-weight: 700;
color: #333;
}

.privacy-content h3 {
margin-top: 32px;      /* h2との間に余白を作る */
margin-bottom: 12px;
text-align: left;
}

.privacy-content p {
margin-bottom: 20px;
line-height: 2;
color: #555;
}

.privacy-content ul {
margin-bottom: 20px;
padding-left: 1.5em;
}

.privacy-content li {
margin-bottom: 10px;
line-height: 2;
color: #555;
}

.privacy-content hr {
margin: 60px 0;
border: 0;
border-top: 1px solid #ddd;
}

/* =========================================
Privacy Policy（SP）
========================================= */
@media screen and (max-width: 768px) {
.privacy {
padding: 60px 16px;
}

.privacy-title h2 {
font-size: 1.4rem;
}

.privacy-content {
padding: 32px 24px;
border-radius: 16px;
}
.privacy-content h2 {
font-size: 1.4rem;
margin-top: 32px;
margin-bottom: 16px;
}

.privacy-content h2:first-child {
margin-top: 0;
}

.privacy-content h3 {
font-size: 1.2rem;
margin-top: 24px;
margin-bottom: 10px;
text-align: left;
}

.privacy-content p,
.privacy-content li {
font-size: 1rem;
line-height: 1.9;
}

.privacy-content ul {
padding-left: 1.2em;
}
}

/* =========================================
Privacy Policy（Tablet）
========================================= */

@media screen and (min-width: 769px) and (max-width: 1024px) {

.privacy {
padding: 70px 24px;
}

.privacy-content {
padding: 40px;
}

.privacy-title h2 {
font-size: 1.4rem;
}

.privacy-content h2 {
font-size: 1.4rem;
}

.privacy-content h3 {
font-size: 1.3rem;
}

}