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

.interview_bg{
background-color: #faf9f1;
border-radius: 15px;
width: 100%;
max-width: 1020px;
padding: 20px 100px;
margin: 100px auto ;
}


/* === オレンジ色の背景エリアのスタイル === */

.interview_brown_bg {
	

}


.interview_orange_bg {
    background-color: #f15a23;
    padding-top: 60px;
    padding-bottom: 60px;
}

/* === 薄いオレンジ色の背景エリアのスタイル === */


.interview_lightorange_bg{
    background-color: #e58d37;
    padding-top: 60px;
    padding-bottom: 60px;	
	
}


.interview_white_bg {
    /* 背景色を白に設定 */
    background-color: #ffffff;

    /* 角を丸くする */
    border-radius: 20px;

    /* 中のコンテンツが端にくっつかないように、内側に余白を設定 */
    padding: 60px 80px;

    /* PC表示での最大幅と中央揃え */
    max-width: 1020px;
    margin-left: auto;
    margin-right: auto;
}




.interview-intro-text {
  /* --- PC用のスタイル --- */
  /* 游ゴシック体を指定 (Windows/Mac両対応) */
  font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", sans-serif;
  
  font-size: 32px;      /* フォントサイズを32pxに */
  text-align: center;   /* 中央揃え */
  font-weight: bold;    /* 太字 (bold) */
  line-height: 1.6;
  padding-top: 20px;
  padding-bottom: 20px;
}


.interview-text {
    /* --- 基本フォント設定 --- */
    font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", sans-serif;
    font-size: 18px; /* PC用のフォントサイズ */
    font-weight: bold; /* 全体を太字に */
    color: #333;
	line-height: 1.8;
	margin-bottom: 40px
}

/* 質問部分(.interview_q)のスタイル */
.interview_q {
    font-weight: normal; /* この部分だけ太字を解除 */
    display: block;      /* 質問文を独立した行として表示 */
    margin-top: 1em; /* 質問と回答の間に少し余白を設ける */	
    margin-bottom: 0.5em; /* 質問と回答の間に少し余白を設ける */
}


/* 黄色いマーカー線(.interview_Yellow_line)のスタイル */
.interview_Yellow_line {
    /*
     * linear-gradientを使って背景にグラデーションを描画し、マーカー線を表現します。
     * これが最もモダンで柔軟な方法です。
     */
    background-image: linear-gradient(
        transparent 60%, /* 上から60%までは透明 */
        #ffdb33 60%       /* 60%の位置から下端までを黄色にする */
    );
    background-repeat: no-repeat;
    background-size: 100% 100%;
}



/* === 横並びギャラリーのスタイル === */

/* 親コンテナ(.facility-gallery)の設定 */
.facility-gallery {
    display: grid; /* Flexboxを有効にして、中の要素を横並びにする */
	grid-template-columns: repeat(2, 1fr);
    gap: 15px; 
    margin-top: 20px;
}

/* 子要素(.facility-item)の設定 */
.facility-item {
    flex: 1;
    line-height: 1.5;
    font-size: 14px;
    color: #555;
	margin-bottom: 15px;
}

.facility-item img {
    width: 100%;
    height: auto;
    margin-bottom: 5px; 
    margin-top: 5px; 
	
}

/* 親コンテナ(.feature-gallery)の設定 */
.feature-gallery {
    display: grid; 
    grid-template-columns: repeat(3, 1fr);
    gap: 10px !important;
 }

/* 子要素(.feature-item)の設定 */
.feature-item {

}

/* アイテム内の画像とキャプションのスタイル */
.feature-item img {
    width: 100%;
    height: auto;
}
.feature-caption {
    font-size: 13px;
    line-height: 1.5;
    color: #555;
    padding: 0;
    margin-top: 5px;

}

/* === niko and...紹介セクションのスタイル === */

/* セクション全体のコンテナ */
.intro-section {
    display: flex;
    align-items: center;
    gap: 30px; /* PC用の画像とテキストの間の隙間 */
    border-bottom: 1px solid #000000;
    padding-bottom: 10px !important;
    margin-bottom: 40px;
}

/* 左側の画像エリア */
.intro-image {
    /* PCでは幅を20%に設定 */
    flex: 0 0 20%;
}
.intro-image img {
    width: 100%;
    height: auto;
}

/* 右側のテキストエリア */
.intro-text {
    flex: 1;
    color: #f15a23;
    font-size: 24px;
    font-weight: bold;
    line-height: 1.6;
}
.intro-text p {
    margin: 0;
}




.bleed-1-image{
	margin-bottom: 40px;
	margin-top: 40px;
}

.interview_margin_60{
	margin-top: 20px;
}

.interview_attention{
    /* 中のコンテンツが端にくっつかないように、内側に余白を設定 */
    padding: 60px 80px;
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
	font-size: 14px;
	color: white;
	
}


/* === PC向けの表示調整 (画面幅が781px以上の場合に適用) === */
@media screen and (min-width: 781px) {
    .side-by-side-gallery {
        /* PCの時だけFlexboxを有効にし、横並びにする */
        display: flex;
        justify-content: space-between;
        gap: 20px; /* 横に並んだ時の画像間の隙間 */
		margin-bottom: 20px;
    }

    .image-wrapper {
        flex: 1; /* 利用可能なスペースを均等に分け合う */
        margin-bottom: 0; /* 横並びの際は下の余白は不要 */
    }
	
.bleed-image{
	margin-bottom: 40px;
	margin-top: 40px
}	
}

/* ▼▼▼SPのCSS ここから▼▼▼ */
@media screen and (max-width: 780px) { 

.interview_bg{
background-color: #faf9f1;
border-radius: 15px 15px 0 0;
width: 92%;
padding: 4%;
margin: 50px auto 0;
}	


.interview_brown_bg {
		background-color: #664f42;
	margin-bottom: 0;
	padding-bottom: 30px !important;
}
	
	
 .interview_orange_bg {
        padding-top: 5vw;
        padding-bottom: 5vw;
	 	margin: 0 auto;
	  	width: 92%;
    }

 .interview_lightorange_bg {
        padding-top: 5vw;
        padding-bottom: 5vw;
	 	margin: 0 auto;
	  	width: 92%;
		border-radius:0 0 15px 15px;	 
    }	
	
	
    .interview_white_bg {
        /* SPでは画面の幅に合わせて調整 */
        width: 92%;

        /* SP用の内側の余白 */
        padding: 5vw;
    }
	
	
	
	.interview-intro-text {
		font-size: 5vw;
		padding-top:0.3vw;
		padding-bottom:0.3vw;
		 }


  /* ===【修正版】親をはみ出して配置する画像のスタイル === */

    /* 左右に配置する画像のコンテナ(<p>)共通設定 */
    .sp-image-right,
    .sp-image-left {
        /* コンテナ自体の幅を画面の95%に設定 */
        width: 95vw;
        
        /* 上下の余白はお好みで調整してください */
        margin-top: 25px;
        margin-bottom: 25px;
    }

    /* 右端に配置するコンテナ */
    .sp-image-right {
        /* 左側の余白を自動で最大にし、要素を右端に寄せる */
        margin-left: auto;
        margin-right: 0;
    }

    /* 左端に配置するコンテナ */
    .sp-image-left {
        margin-left: -10%;
        /* 右側の余白を自動で最大にし、要素を左端に寄せる */
        margin-right: auto;
    }

    /* 画像自体のスタイル */
    .sp-image-right img.sp,
    .sp-image-left img.sp {
        /* 親要素(.sp-image-rightなど)の幅いっぱいに画像を表示 */
        width: 100%;
        height: auto;
        display: block;
    }	
	
	
	
	
    .interview-text {
        font-size: 3vw; 
        line-height: 1.8;
		margin-bottom: 4vw;
    }	
	
 .facility-gallery {
        /* SPの際のアイテム間の隙間 */
        gap: 10px;
	 margin-bottom: 2vw;
    }

    .facility-item {
        font-size: 2vw; 
		margin-bottom: 2vw !importan;
    }
	
    .facility-item img {
		margin-top: 2vw !important; 
        margin-bottom: 2vw !important; 
		
    }
	

	 .feature-gallery {
        /* SPでは2列に配置 */
        grid-template-columns: repeat(2, 1fr);
        gap: 3vw;
    }	

    .feature-item {
        /* SPでは基本幅を50%ベースに再計算し、2列にする */
        flex-basis: calc(50% - 8px);
    }
    .feature-caption {
        font-size: 2vw;		
    }	
	.feature-item img {
		width: 100% !important;
        margin-bottom:  2vw !important;
    }	
	
 .intro-section {
        gap: 1vw; /* 隙間を画面幅の4%に */
        padding-bottom: 6vw;
        margin-bottom: 6vw;
    }

    .intro-image {
        flex: 0 0 30%;
    }

    .intro-text {
        /* 4. SP用のフォントサイズとテキスト揃えを調整 */
        font-size: 3.5vw;
        text-align: left; /* 横並びのため左揃えに戻す */
    }
	
	.intro-section {
		gap:2vw; /* PC用の画像とテキストの間の隙間 */
	}
	

	.side-by-side-gallery {
	}

	.image-wrapper {
		/* 画像の上下に少し余白を持たせると見栄えが良くなります */
		margin-bottom: 20px;
	}

	.image-wrapper img {
		width: 100%;
		height: auto;
	}

	  /* === 親をはみ出して配置する画像のスタイル === */
    .bleed-image-sp {
        /* 1. レイヤーを切り離し、画面を基準に座標で配置できるようにする */
        position: absolute;
        
        /* 2. 画像の幅を画面の95%に設定 */
        width: 82vw;
        
        /* 3. 画面の右端から2vwの位置に配置 */
        right: 4vw;
        
        /* pタグが持つ不要な余白をリセット */
        margin: 0;
    }
    
    .bleed-image-sp img.sp {
        width: 100%;
        height: auto;
        display: block;
    }
	
	.bleed-image{
		margin-bottom: 18vw;
	}
	
	
	  /* === 親をはみ出して配置する画像のスタイル === */
    .bleed-1-image-sp {
        /* 1. レイヤーを切り離し、画面を基準に座標で配置できるようにする */
        position: absolute;
        
        /* 2. 画像の幅を画面の95%に設定 */
        width: 86vw;
        
        /* 3. 画面の右端から2vwの位置に配置 */
        right: 6vw;
        
        /* pタグが持つ不要な余白をリセット */
        margin: 0;
    }
    
    .bleed-1-image-sp img.sp {
        width: 100%;
        height: auto;
        display: block;
    }
	
	.bleed-1-image{
		margin-bottom: 20vw;
	}	

	
.interview_margin_60{
	margin-top: 1vw;
}
	
	
.interview_attention{
	width: 100%;
	font-size: 2vw;
    padding:4vw;	
	}


}