:root {
    --gold-color: #9d895f; /*figma上：gold*/
    --border-color: #dee4ea; /*figma上：navy_3S*/
    --red-color: #d65856; /*figma上：red*/
    --bg-gray-color: #f1f3f6; /*figma上：navy_4S*/
    --body-color: #3b4b5b; /*figma上：navy_D*/
    --dark-border-color: #8198ae; /*figma上：navy_1S*/

    --gold_D: #81704d;
    --gold_1S: #baac8f;
    --gold_2S: #cec4af;
    --gold_3S: #e2dccf;
    --gold_4S: #f5f3ef;
    --gold_5S: #f9f7f2;
    --red_3S: #f7dedd;
    --red_4S: #fbf0f0;
    --navy: #536a80;
    --navy_1S: #8198ae;
    --navy_2S: #b0becc;
    --navy_3S: #dee4ea;
    --navy_4S: #f1f3f6;
    --navy_5S: #f8f9fa;
    --navy_D: #3b4b5b;

    /*	以下はfigmaで登録していない色*/
    --second-color: #003866;
    --second-hover-color: #0062b3;
}

body {
	color: var(--navy_D);
}

.strong-g {
	color: var(--gold-color) !important;
}

.mb-40 {
	margin-bottom: 40px!important;
}



.about-mv-container {
	display: flex;
	width: 1440px;
	align-items: stretch !important;
	flex-direction: row;
	margin: 16px auto 0;
	padding: 0 16px;
}

.about-mv-title {
	width: 340px;
	background-color: #fff;

	display: flex;              /* ← 中央寄せ用 */
	align-items: center;        /* ← 縦方向中央 */
	justify-content: center;    /* ← 横方向中央 */
}

.about-mv-title img {
	width: 34px;
	height: auto;
}

/* 右全体：メイン＋上下サブ */
.about-mv-right-box {
	display: flex;
	flex-direction: row; /* ← ★ ここで2カラム */
	align-items: flex-start;
	gap: 1px;
}

/* メイン画像（右側の左カラム） */
.about-mv-main {
	width: 767px;
	height: 601px;
	position: relative;
	overflow: hidden;
}

.about-mv-main img {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 767px;
	height: 602px;
	object-fit: cover;
	transform: translate(-50%, -50%);
	border-top-left-radius: 8px;
	border-bottom-left-radius: 8px;
}

/* サブ画像ブロック（右側の右カラム） */
.about-mv-right {
	width: 300px;
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.about-mv-right img {
	width: 100%;
	height: 300px;
	display: block;
	object-fit: cover;
}

/* 角丸指定 */
.about-mv-right-up img {
	border-top-right-radius: 8px;
}

.about-mv-right-bottom img {
	border-bottom-right-radius: 8px;
}







.about-top-lead {
	text-align: center;
	margin-top: 80px;
	margin-bottom: 40px;
}

.about-top-lead-head {
	font-size: 26px;
	font-family: "Zen Old Mincho";
	font-style: normal;
	font-weight: 700;
	line-height: 160%;
	margin-bottom: 8px;
}

.about-top-lead-body {
	font-size: 18px;
	font-style: normal;
	font-weight: 400;
	line-height: 28.8px;
}

.about-top-ex {
	margin-bottom: 80px;
}

.about-top-ex .row {
	width: 712px;
}

.about-top-ex-head {
	text-align: center;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 21px;
	margin-bottom: 12px;
}

.about-ex-box {
	width: 232px;
	border-radius: 4px;
	border: 1px solid var(--gold_2S, #CEC4AF);
	background: var(--gold_5S, #F9F7F2);
	padding: 8px;
	
	color: var(--gold_D, #81704D);
	text-align: center;
	/* Hiragino / L / 1.5 */
	font-family: "Hiragino Sans";
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 30px; /* 150% */
}

.about-worries {
	background-color: var(--navy_D);
	padding-top: 40px;
	padding-bottom: 64px;
    position: relative;
    width: 100vw;
    margin: 0 calc(50% - 50vw);
}

.about-worries-top {
	color: var(--white, #FFF);
	text-align: center;
	font-family: "Zen Old Mincho";
	font-size: 26px;
	font-style: normal;
	font-weight: 700;
	line-height: 150%; /* 39px */
	margin-bottom: 24px;
}

.about-worries .row {
	width: 1082px;
}

.about-worries-box {
	border-radius: 8px;
	border: 2px solid var(--navy_D, #3B4B5B);
	background: var(--white, #FFF);
	padding: 24px;
	height: 237px;
	text-align: center;
}

.about-worries-head {
	color: var(--gold, #9D895F);
	text-align: center;
	font-family: "Zen Old Mincho";
	font-size: 20px;
	font-style: normal;
	font-weight: 700;
	height: 60px;
	margin-bottom: 10px;
	display: flex;           /* ← これが必須！ */
	align-items: center;     /* ← 縦中央 */
	justify-content: center; /* ← 横中央（必要なら） */
}


.about-worries-img {
	height: 64px;
	margin-bottom: 10px;
}

.about-worries-img img{
	width: 64px;
	height: 64px;
}

.about-worries-foot {
	/* Hiragino/M/1.6 */
	font-family: "Hiragino Sans";
	font-size: 0.875rem;
	font-style: normal;
	font-weight: 400;
	line-height: 22.4px; /* 160% */

}

.triangle-down {
	width: 0;
	height: 0;
	border-left: 50vw solid transparent;  /* 左半分 */
	border-right: 50vw solid transparent; /* 右半分 */
	border-top: 40px solid var(--navy_D);;       /* ▼の色 */
	margin: 0 auto;
	position: relative;
	width: 100vw;
	margin: 0 calc(50% - 50vw);
}

.about-message {
	position: relative;
	width: 100vw;
	margin: 0 calc(50% - 50vw);
	padding-top: 64px;
	padding-bottom: 120px;
}

.about-message-box {
	display: flex;
	padding: 80px 120px;
	flex-direction: column;
	align-items: center;
	align-self: stretch;
	color: #fff;
	width: 1200px;
	height: 416px;
	margin: 0 auto;
	
	border-radius: 16px;
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.50) 0%, rgba(0, 0, 0, 0.50) 100%), url('/usr/img/about/message.webp') lightgray 50% / cover no-repeat;
}

.about-message-head {
	font-family: "Zen Old Mincho";
	font-size: 24px;
	font-style: normal;
	font-weight: 700;
	line-height: 150%; /* 36px */
	margin-bottom: 25px;
}


.about-message-body {
	font-family: "Zen Old Mincho";
	font-size: 24px;
	font-style: normal;
	font-weight: 700;
	line-height: 150%;
	height: 36px;
}

.about-message-lead {
	font-family: "Zen Old Mincho";
	font-size: 32px;
	font-style: normal;
	font-weight: 700;
	line-height: 150%;
	height: 48px;
	margin-bottom: 24px;
}

.about-message-foot {
	font-size: 18px;
	font-style: normal;
	font-weight: 400;
	line-height: 28.8px;
	text-align: center;
}

.about-header {
	text-align: center;
	font-family: "Zen Old Mincho";
	font-size: 26px;
	font-style: normal;
	font-weight: 700;
	line-height: 150%; /* 39px */
}

.about-features-box .under-bar::before {
	background-color: #fff!important;
}

.about-pick {
	padding-top: 40px !important;
	padding-bottom: 120px;
}

.about-pick .category-container {
	margin-bottom: 0;
}

.about-merit {
	background: var(--gold_5S, #F9F7F2);
	position: relative;
	width: 100vw;
	margin: 0 calc(50% - 50vw);
}


.about-merit-box {
	width: 1080px;
	margin:0 auto;
	padding: 64px 0;
}

.about-merit-lead {
	font-family: "Zen Old Mincho";
	font-size: 28px;
	font-style: normal;
	font-weight: 700;
	line-height: 160%;
	margin-bottom: 10px;
}

.about-merit-body {
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 25.6px; /* 160% */
	margin-bottom: 10px;
}

.about-merit-head {
	margin-top:30px;;
	font-size: 18px;
	font-style: normal;
	font-weight: 700;
	line-height: 160%; /* 28.8px */
	margin-bottom: 10px;
}

.about-merit-head img {
	margin:0 10px;
	width: 160px;
}

.about-merit-att {
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: 19.2px; /* 160% */
}

	
.search-box {
	border: 2px solid var(--gold_2S);
	border-radius: 8px;
	background-color: #fff;
	padding: 2rem;
	
	box-shadow: 0px 4px 8px 0px #00000026;
}

.search-box-title {
	text-align: center;
	font-weight: bold;
	font-size: 18px;
	line-height: 150%;
	margin-bottom: 1.5rem;
}

.about-area-search-input {
	margin-bottom: 1.5rem;
}

.about-area-search-button {
	font-size: 16px;
	width: 320px;
	height: 52px;
	margin-bottom: 0;
}

.input-group-text {
	background-color: #fff;
	border-right: none;
}

.about-area-search-input .form-control {
	border-left: none;
}

.about-merit-ex {
	text-align: center;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 21px;
	margin-bottom: 10px;
}

.about-merit-review-card {
	border-radius: 4px;
	border: 1px solid var(--navy-3S, #DEE4EA);
	background: var(--white, #FFF);
	margin-bottom: 8px;
	padding: 16px;
}

.about-merit-review-category {
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: 21px; /* 150% */
}
	
.about-merit-review-score {
	color: red;
}	

.about-merit-score-red {
	color: var(--red, #D65856);
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 24px; /* 150% */
	margin-left: 3px;
}

.about-merit-review-body {
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: 19.2px; /* 160% */
}

.about-features .under-bar::before {
	background-color: #fff;
}
.about-features {
	padding: 64px 0;
	background: var(--navy_4S, #F1F3F6);
	position: relative;
	width: 100vw;
	margin: 0 calc(50% - 50vw);
}

.about-features .row{
	width: 1212px;
	margin:0 auto;
	margin-top: 24px;
}

.about-features-box {
	border-radius: 12px;
	border: 1px solid var(--gold_2S, #CEC4AF);
	background: var(--white, #FFF);
	padding: 23px;
}

.about-features-head {
	color: var(--gold-color, #9D895F);
	text-align: center;
	font-family: "Zen Old Mincho";
	font-size: 20px;
	font-style: normal;
	font-weight: 700;
	line-height: 150%; /* 30px */
	margin-bottom: 10px;
}

.about-features-img {
	height: 107px;
	margin-bottom: 10px;
	text-align: center;
}

.about-features-foot {
	margin-bottom: 10px;
	text-align: center;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 25.6px; /* 160% */
}

.about-faq-box {
	margin:64px 0 80px 0; 
}

.accordion-item {
	border:none;
	border-top: 1px solid var(--navy_2S, #B0BECC);
	border-bottom: 1px solid var(--navy_2S, #B0BECC);
}

.about-flow-search-button {
	display: block;
	text-align: center;
	width: 320px;
	height: 52px;
	line-height: 52px;
	
	border-radius: 4px;
	padding-right: 10px;
	padding-left: 10px;
	background-color: var(--gold-color);
	color: #fff;
	font-size: 16px;
	font-weight: bold;
}

.faq-head {
	display: inline-flex; 
	align-items: center;
	font-family: "Zen Old Mincho";
	font-size: 20px;
	font-style: normal;
	font-weight: 700;
	line-height: 150%; /* 30px */	
	padding: 2px 0;
}

.accordion-button:not(.collapsed) , .accordion-collapse {
	background: var(--navy_5S, #F8F9FA);
}

.accordion-body .faq-head {
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 25.6px; /* 160% */
}

.about-faq-img {
	height: 33px;
	margin:0 12px 0 16px;
}

.accordion-button:not(.collapsed) {
	box-shadow: none;
}

.about-bottom-search .top-lead-title {
	color: #fff;
}

.about-bottom-search {
    position: relative;
    width: 100vw;
    margin: 0 calc(50% - 50vw);
    height: 460px;

    background:
      linear-gradient(0deg, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.22)),
      url('../img/about/bottom-search.webp');
    background-repeat: no-repeat;
    background-size: cover;           /* ← 画像を横幅いっぱいに広げる */
    background-position: center 73%; /* ← 下寄せで自然に見せる */
    z-index: 0;
}


.about-bottom-search .search-container {
	margin-top: 0;
	margin-bottom: 80px;
}

.image-grid {
  display: grid;
  gap: 2px; /* 画像の間隔 */

  /* PC（5×2） */
  grid-template-columns: repeat(5, 1fr);
}

.image-grid div {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1; /* 正方形を維持！ */
  overflow: hidden;
}

.image-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-merit-calender-box {
	border-radius: 8px;
	background: var(--navy_5S, #F8F9FA);
	padding: 24px;
	text-align: center;
}


/******** FAQ ****************/
.faq-header {
    position: relative;
    width: 100vw;
    margin: 0 calc(50% - 50vw);
    height: 200px;

    background: url(../img/about/faq.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center 35%;

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

    z-index: 0;
}

.faq-header::after {
    content: "";
    position: absolute;
    inset: 0; /* 全面に広げる */
    background: #0000004D; /* ← 黒 30% 透過レイヤー */
    z-index: 1;            /* テキストの下 */
}

/* テキストは最前面に */
.faq-header-title {
    position: relative;
    z-index: 2;
    font-weight: 700;
    font-size: 28px;
    text-align: center;
    color: #fff;
}

.faq-faq-box {
	margin: 64px 0 80px 0;
}


.faq-header.history {
    background: url(../img/about/history.jpg);
    background-position: center;
}

/* 📱 SPレイアウト（442構成） */
@media (max-width: 850px) {
	
	.faq-header {
	    height: 80px;
	    background-position: center 40%;
	}
	
	.faq-header.history {
	    background-image: url(../img/about/history.jpg);
	    background-position: center center; /* 中央 */
	    background-repeat: no-repeat;
	    background-size: 100% auto; /* 👈 これが80%拡大（中央を広く見せる）*/
	}
	
	.faq-header-title {
	    font-size: 1rem;
	}
	.faq-faq-box {
		margin: 2rem 0 80px 0;
	}
	
	
	.about-mv-container {
	  display: flex;
	  flex-direction: row;
	  align-items: flex-start;
	  justify-content: center;
	  gap: 16px;
	  max-width: 1440px;
	  margin: 0 auto;
	  padding: 0 16px;
	}
	
	.about-mv-title {
	  width: 340px;
	}
	
	.about-mv-main img {
	  width: 100%;
	  height: auto;
	  border-top-left-radius: 8px;
	  border-bottom-left-radius: 8px;
	}
	
	.about-mv-right {
	  display: flex;
	  flex-direction: column;
	  gap: 8px;
	}
	
	.about-mv-right img {
	  width: 100%;
	  height: auto;
	  border-radius: 8px;
	}



	.row.gx-5 {
    	--bs-gutter-x: 0 !important; /* ← これでSP時だけ左右余白なし */
  	}
  
	.about-mv-container {
		width: 100%;
		padding: 0;
	}


	.about-mv-title {
		width: 30%;
	}
	
	.about-mv-title img {
		width: 20px;
	}

	.about-mv-right-box {
		width: 70%;
		display: flex;
		flex-direction: column; /* ← mid1 を上に */
		align-items: center;
		gap: 1px;
	}

	/* メイン画像：幅100% */
	.about-mv-main {
		width: 100%;
		height: auto;
		position: relative;
	}

	.about-mv-main img {
		position: static;
		width: 100%;
		height: auto;
		transform: none;
		border-radius: 0;
	}

	/* サブ画像：横並びに変更 */
	.about-mv-right {
		width: 100%;
		display: flex;
		flex-direction: row; /* ← 横並び */
		gap: 1px;
	}
	
	.about-mv-right img {
		height: auto;
		object-fit: cover;
	}	

	.about-mv-right-up,
	.about-mv-right-bottom {
		width: 50%;               /* 2分割（同じ幅） */
		aspect-ratio: 1 / 1;
		overflow: hidden;
	}
	
	/* 念のため中の画像も対応 */
	.about-mv-right-up img,
	.about-mv-right-bottom img {
		width: 100%;              /* 枠内にフィット */
		height: 100%;
		display: block;
		border-radius: 0;
	}
	
	.about-top-ex .row,.about-worries .row,.about-message-box, .about-merit-box, .about-features .row, .about-ex-box {
		width: 100%;
	}
	
	.about-ex-box  {
		padding: 0.5rem!important;
	}
	
	.about-top-lead-head {
    	font-size: 1.375rem;
	}
	
	.about-top-lead-body, .about-ex-box {
		font-size: 0.875rem;
	}
	
	.about-worries-col {
		padding-left: 1rem;
		padding-right: 1rem;
		margin-bottom: 1rem;
	}
	
	.about-message {
		padding-left: 1rem;
		padding-right: 1rem;
	}
	
	.about-message-box {
		padding: 5rem 2rem;
	}
	
	.about-message-head, .about-message-body  {
		font-size: 1.25rem;
	}
	
	.about-message-lead {
		font-size: 1.5rem;
		text-align: center;
		margin-bottom: 3rem;
	}
	
	.about-message-foot {
		font-size: 0.875rem;
	}
	
	.about-pick {
		padding-bottom: 5rem;
	}
	
	.about-header {
		font-size: 1.375rem;
	}
	
	.about-merit {
		padding: 0 1rem;
	}
	
	.about-merit-lead {
		font-size: 1.25rem;
	}
	
	.about-merit-body {
		font-size: 0.875rem;
	}
	
	.about-merit-box {
		padding: 5rem 0;
	}
	
	.about-merit-head  {
		font-size: 0.75rem;
	}
	
	.about-merit-head img {
		width: 110px;
	}
	
	.about-merit-att {
		margin-bottom: 2rem;
	}
	
	.about-merit-body {
		margin-bottom: 1rem;
	}
	
	.about-area-search-button {
		width: 100%;
	}
	
	.about-merit-calender-box img{
		width: 100%;
	}
	
	.image-grid {
	 	grid-template-columns: repeat(4, 1fr); /* 1段目：4枚 */
	}
	
	.about-features {
		padding: 5rem 1rem;
	}
	
	.about-features .col-md-4 {
		padding: 0;
		margin-bottom: 1rem;
	}
	
	.about-features-head {
		margin-bottom: 2rem;
	}
	
	.about-features-img {
		margin-bottom: 2rem;
	}
	
	.about-features-foot {
		font-size: 1rem;
	}
	
	.use-flow {
		padding-top: 5rem;
		padding-bottom: 5rem;
	}
	
	.use-flow-step .title {
		font-weight: 700;
		font-size: 1.5rem;
		line-height: 150%;
		letter-spacing: 0%;
	}
	
	.flow-text .title {
		font-weight: 700;
		font-size: 1.5rem !important;
	}
	
	.flow-text p {
		font-size: 0.875rem !important;
	}
	
	.flow-text .sub-point {
		font-size: 1rem;
		display: inline-block; 
		width: auto;
		padding: 0.5rem 1rem;
	}
	
	.faq-head {
		font-size: 1.125rem !important;
		padding-right: 2rem;
	}
	
	.accordion-body .faq-head {
		font-size: 0.875rem !important;
	}
	
	.about-bottom-search {
		height: auto;
	}
	
	.search-container {
		margin-bottom: 0 !important;
	}

	.about-flow-search-button {
		width: 100%;
		margin-bottom: 1rem;
	}
	
	
	/* ===================================
	   スライダー（中央だけ広く見せる）
	=================================== */
	.pickup-slick {
	  padding: 0 6%; /* ← JSのcenterPaddingと同値 or 少し狭めでもOK */
	}
	
	.slick-list {
	  overflow: visible !important;
	}
	
	.slick-track {
	  display: flex !important;
	  align-items: stretch;
	}
	
	.slick-slide {
	  opacity: 1; /* 🔸暗くしない */
	  transform: none; /* 🔸拡大縮小もしない */
	}
	
	.pickup-item-base {
	  padding: 0 6px; /* 🔸少し余白を減らすと中央がより広く */
	  box-sizing: border-box;
	}



	/* ===============================
	   Slick ページネーション調整
	================================ */
	  
	  /* slick-dots全体をpickup-slickと同じ幅で中央寄せ */
	.pickup-slick .slick-dots {
	  position: relative;
	  bottom: -20px;         /* ← 必要なら調整 */
	  width: 80%;            /* ← スライド可視領域と同じ比率（centerPadding 4%なら100 - 4*2 = 92でもOK） */
	  margin: 0 auto;        /* ← 中央揃え */
	  text-align: center;    /* ← ドットを中央配置 */
	  padding: 0;
	}
	
	/* 各ドットのサイズ調整 */
	.pickup-slick .slick-dots li {
	  width: 8px;
	  height: 8px;
	  margin: 0 6px;
	}
	
	.pickup-slick .slick-dots li button {
	  width: 8px;
	  height: 8px;
	  padding: 0;
	}
	
	.pickup-slick .slick-dots li button:before {
	  content: "";
	  display: block;
	  width: 8px;
	  height: 8px;
	  border-radius: 50%;
	  background-color: #ccc;
	}
	
	.pickup-slick .slick-dots li.slick-active button:before {
	  background-color: var(--navy);
	}
	
	html, body {
	  overflow-x: hidden;
	}


}