@charset "UTF-8";


/*=======================================================*/
/*      		セクション毎のCSS   			  		  */
/*======================================================*/


/*======= 共通 ======*/

/* 親要素からはみ出して画面いっぱいに */
.full {
	margin: 0 calc(50% - 50vw);
	width: 100vw;
}


/*タイトル(共通)*/
.spot-heading01{
	font-size: clamp(40px,6vw,70px);
	/* font-style: italic; */
	text-align: center;
	/* font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; */
	font-family: "Dancing Script", cursive;
	font-weight: 400;
	color:#2d2d2d;
}
.spot-heading01::first-letter {
	color: var(--main-color)
	}

.spot-heading02-img {
	width: 50%;
	margin: 5px auto 0 auto;
}

.spot-heading02{
	font-size: clamp(24px, 2.7vw, 28px);
	line-height: 1.5em;
	font-weight: 700;
	text-align: center;
	min-height: 0vw;
	color: #444;
	padding-bottom: 0.5em;
	font-family: "Noto Serif JP", serif;
	font-weight: 500;
	font-style: normal;
}

.spot-heading02+p{
    margin-top: 0.5em;
    margin-bottom: 1.5em;
    font-size: 15px;
    inline-size: fit-content;
    margin-inline: auto;
}

.line{
	width: 1px;
	height: auto;
	padding-top: clamp(20px,6vw,30px);
	background-color: #2d2d2d;
	margin: 0% auto;
	margin-bottom: 2%;
}

.line2{
	width: 1px;
	height: auto;
	padding-top: 5.8%;
	background-color: #FFF;
	margin: 1.9607% auto;
}

.lead-copy {
    text-align: center;
    font-size: clamp(22px, 2vw, 30px);
    font-weight: 700;
    line-height: 1.4;
    color: var(--accent-color2);
    letter-spacing: 0.05em;
    margin: 1.5rem auto 0.3rem;
}


/*======= FONT ======*/
/*英字*/
.heading06::before {
	font-family: "Noto Serif JP", serif;
	font-weight: 500 !important;
	font-style: normal;
	z-index: -1;
}

.heading,
.heading span,
.heading14::before,
.heading-decoration_c + p,
.heading-decoration + p,
.heading-decoration_nl + p,
.heading-decoration_lg + p,
.heading-number {
    font-family: "Noto Serif JP", serif;
    font-weight: 700;
    font-style: normal;
}

/*日本語*/
@media (min-width: 769px) {
    .nav ul {
		font-family: "Noto Serif JP", serif;
		font-weight: 700 !important;
		font-style: normal;
    }
}

@media (max-width: 768px) {
    .nav ul {
		font-family: "Noto Serif JP", serif;
		font-weight: 700 !important;
		font-style: normal;
    }
}


.flow-intro__title,
.heading_spot,
.price-block__title,
.feature-vehicle__title,
.feature-vehicle__vehicle-title,
.care-service__subheading,
.outing-support__hospital-title,
.outing-support__title,
.care-service__title,
.heading-decoration,
.flow01 > li dl dt,
.greeting-card__item H4,
.sec1-card__item H4,
.heading-decoration2,
.sec2__title ,
.sec2__catch01,
.sec2__subtitle,
.heading-decoration_nl,
.heading-decoration_c,
.heading-decoration_lg,
.card__item H4,
.lead-copy,
.heading06 {
	font-family: "Noto Serif JP", serif;
	font-weight: 700 !important;
	font-style: normal;
}


.heading_spot {
	padding: 0;
	position: relative;
	z-index: 1;
	text-align: center;
	font-size: clamp(1.6rem, 3vw, 2.1rem);
	font-weight: 700;
	line-height: 1.8;
	letter-spacing: .05em;
}

.heading_spot span {
	display: block;
	margin-bottom: 8px;
	color: var(--main-color);
	font-size: clamp(.75rem, 1vw, .9rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: .18em;
	text-transform: uppercase;
}
.heading_spot::after {
	content: "";
	display: block;
	width: 45px;
	height: 3px;
	margin: 15px auto 0;
	border-radius: 10px;
	background-color: var(--main-color);
	margin-bottom: 5vw;
}

/*======= TOP ======*/
/*ご挨拶*/
.greeting {
	padding: clamp(40px, 6vw, 90px) 0 var(--v-space2);
	background-color: var(--base-color);
	position: relative; /* sectionの位置を相対的にする*/ 
	z-index: 1; /* 背景画像より上に表示 */ 
}

.greeting-spot {
    padding: clamp(40px, 6vw, 90px) 0 0;
    background-color: var(--base-color);
    position: relative;
    z-index: 1;
}

p.grp{
	font-size: 14px;
	line-height: 1.3;
	margin: 0 auto;
	width: fit-content;
	color: #666;
}

.yuta{
	line-height: 2;
	padding-bottom: 50px;
}

@media only screen and (max-width: 968px) {
	.greeting .tx-c{
		text-align: left;
	}
}

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

	.about-intro {
		padding-bottom: 10px;
	}

}

/*=======================================================*/
/*		こんなお悩みありませんか？					 */
/*=======================================================*/

.trouble {
	padding: var(--v-space) 0;
	background-color: #f7faf5;
}

.trouble__intro {
	max-width: 800px;
	margin: 0 auto 50px;
	text-align: center;
	line-height: 2;
}

.trouble__list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
	max-width: 1100px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.trouble__item {
	display: grid;
	place-items: center;
	min-height: 70px;
	padding: 20px 15px;
	border: 1px solid #dce8d7;
	border-radius: 12px;
	background-color: #fff;
	font-size: clamp(15px, 1.4vw, 18px);
	font-weight: 600;
	text-align: center;
	line-height: 1.6;
	position: relative;
}

.trouble__item::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: 45px;
	height: 3px;
	border-radius: 0 0 3px 3px;
	background-color: var(--main-color);
	transform: translateX(-50%);
}


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

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

	.trouble {
	padding: var(--v-space2) 0;
	}

	.trouble__intro {
		margin-bottom: 35px;
		text-align: left;
		line-height: 1.9;
	}

	.trouble__intro br {
		display: none;
	}

	.trouble__list {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}

	.trouble__item {
		min-height: 90px;
		padding: 15px 8px;
		font-size: 14px;
	}

	.trouble__item::before {
		width: 35px;
	}

}

/*======= サービス ======*/

.service {
	padding: var(--v-space) 0 0;
}

.service__intro {
	max-width: 760px;
	margin: 0 auto;
	font-size: clamp(0.9375rem, 1.5vw, 1.0625rem);
	line-height: 2;
	text-align: center;
}

@media only screen and (max-width: 768px) {
	.service__intro {
		line-height: 1.8;
		text-align: left;
		margin: 0 20px;
	}

	.service__intro br {
		display: none;
	}

	.service {
	padding: var(--v-space2) 0 0;
}
}


/*======= BNR section ======*/

.bnr_sec1 {
	padding: var(--v-space) 0 var(--v-space2);
	position: relative;
	z-index: 1;
	background-color: var(--accent-color1);
	background-size: cover;
	background-position: bottom;
}

.bnr_sec1::before {
	content: "";
	position: absolute;
	top: -5px;
	left: 0;
	width: 100%;
	height: 60px;
	background-color: #fff;
	clip-path: polygon(0 0, 50% 100%, 100% 0); /* ▼ 谷型 */
	z-index: 2; /* 上にかぶせる */
}


/*TELバナー*/
.tel-bnr {
	width: 90%;
	margin: 0 auto 10px;
}

.tel-bnr img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 20px;
	border: 2px solid #fff;
	box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
}


/* SNSバナー */
.sns_bnr {
	width: 90%;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: 1fr;
	grid-column-gap: 15px;
	grid-row-gap: 15px;
	margin-top: 15px;
	margin: 0 auto;
}

@media (max-width: 568px) {
	.sns_bnr {
		grid-template-columns: repeat(1, 1fr);
	}
}

.sns_bnr img{
	border-radius: 20px;
	border: 2px solid #fff;
	box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
}


/*======= 一人一人にあった ======*/

.support {
	padding: var(--v-space) 0;
}
/* =========================
	flow-intro
========================= */

.flow-intro {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 0 45px;
	align-items: center;
	max-width: 1100px;
	margin: 0 auto 60px;
}

.flow-intro__title,
.flow-intro__lead {
	grid-column: 1 / -1;
	text-align: center;
}

.flow-intro__title {
	margin: 0 0 12px;
	font-size: clamp(1.3rem, 2.5vw, 1.8rem);
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.05em;
}

.flow-intro__lead {
	margin: 0 0 35px;
	font-size: clamp(1.1rem, 2vw, 1.4rem);
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.05em;
}


/* 本文 */
.flow-intro .tx-l {
	margin: 0;
	line-height: 2;
	text-align: left;
}


/* 画像 */
.flow-intro .img {
	margin: 0;
}

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


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

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

	.support {
	padding: var(--v-space2) 0;
	}

	.flow-intro {
		grid-template-columns: 1fr;
		gap: 0;
		margin-bottom: 45px;
	}

	.flow-intro__title,
	.flow-intro__lead {
		grid-column: auto;
	}

	.flow-intro__title {
		margin-bottom: 10px;
		font-size: 1.25rem;
	}

	.flow-intro__lead {
		margin-bottom: 25px;
		font-size: 1.05rem;
	}

	.flow-intro .tx-l {
		margin-bottom: 25px;
		font-size: 0.9375rem;
		line-height: 1.9;
	}

	.flow-intro .img {
		width: 88%;
		margin: 0 auto;
	}
}

/*=======================================================*/
/*		おすすめ・取扱商品
/*=======================================================*/

.products {
	padding: var(--v-space) 0;
	background-color: #f8faf6;
}

.products__intro {
	max-width: 800px;
	margin: 0 auto 60px;
	line-height: 2;
	text-align: center;
}

.products__list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	max-width: 1200px;
	margin: 0 auto;
}

.products__item {
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 2;
	overflow: hidden;
	border: 1px solid #e4eadf;
	background-color: #fff;
	gap: 0; /* 追加 */
}

.products__img {
	margin: 0;
	padding: 20px;
	background-color: #fff;
}

.products__img img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: contain;
}

.products__body {
	display: grid;
	grid-template-rows: auto auto 1fr;
	gap: 8px;
	padding: 20px;
	border-top: 1px solid #edf1e9;
}

.products__title {
	margin: 0;
	color: var(--main-color);
	font-size: clamp(1rem, 1.4vw, 1.125rem);
	font-weight: 700;
	line-height: 1.5;
}

.products__text {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.8;
}

.products__categories {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.products__category {
	width: fit-content;
	margin: 0;
	padding: 3px 10px;
    border: 1px solid #3c3c3c;
    color: #3c3c3c;
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1.4;
}


/* 商品下の案内 */

.products__note {
	position: relative;
	max-width: 1200px;
	margin: 60px auto 0;
	padding: 35px 40px;
	border: 2px solid var(--main-color);
	border-radius: 18px;
	background-color: #fff;
	text-align: center;
}

.products__note::before {
	content: "お薬・商品選びのご相談";
	display: inline-block;
	margin-bottom: 12px;
	padding: 5px 18px;
	border-radius: 50px;
	background-color: var(--accent-color3);
	color: #fff;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.05em;
}

.products__note-title {
	margin: 0 0 12px;
	color: var(--accent-color2);
	font-size: clamp(1rem, 2vw, 1.2rem);
	font-weight: 700;
	line-height: 1.6;
	font-family: "Noto Serif JP", serif;
}

.products__note p {
	margin: 0;
	line-height: 1.8;
}

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

	.products__note {
		margin-top: 40px;
		padding: 28px 20px;
	}

	.products__note-title {
		font-size: 1.125rem;
		text-align: left;
	}

}

@media only screen and (max-width: 568px) {
	.products {
	padding: var(--v-space2) 0;
	}
}


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

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

	.products__list {
		grid-template-columns: repeat(3, 1fr);
	}

}


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

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

	.products__intro {
		margin-bottom: 40px;
		line-height: 1.8;
		text-align: left;
	}

	.products__intro br {
		display: none;
	}

	.products__list {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}

	.products__img {
		padding: 12px;
	}

	.products__body {
		gap: 8px;
		padding: 14px 12px 16px;
	}

	.products__title {
		font-size: 0.9375rem;
	}

	.products__text {
		font-size: 0.8125rem;
		line-height: 1.7;
	}


}


/* =========================
	flow_design03
========================= */

.flow_design03 {
	max-width: 1100px;
	margin: 0 auto;
}

.flow03-list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 25px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.flow03-item {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
}

.flow03-item dl {
	height: 100%;
	margin: 0;
	padding: 25px 20px;
	border: 1px solid #e1e8de;
	border-radius: 12px;
	background-color: #fff;
	box-sizing: border-box;
}

.flow03-item dt {
	margin: 0 0 15px;
	padding: 0;
	color: var(--txt-color);
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.6;
	text-align: center;
}

.flow03-number {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin: 0 auto 15px;
	border-radius: 50%;
	background-color: var(--main-color);
	color: #fff;
	font-family: "Noto Serif JP", serif;
	font-size: 1.3rem;
	line-height: 1;
}

.flow03-item dd {
	margin: 0;
	padding: 0;
	font-size: 0.9rem;
	line-height: 1.9;
}


/* 矢印 */
.flow03-item:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 50%;
	right: -17px;
	width: 8px;
	height: 8px;
	border-top: 2px solid var(--main-color);
	border-right: 2px solid var(--main-color);
	transform: translateY(-50%) rotate(45deg);
}

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

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

	.flow03-list {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}

	.flow03-item::after {
		display: none;
	}

}


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

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

	.flow03-list {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.flow03-item dl {
		padding: 18px;
	}

	.flow03-item dt {
		display: flex;
		align-items: center;
		gap: 12px;
		margin-bottom: 10px;
		text-align: left;
	}

	.flow03-number {
		flex-shrink: 0;
		width: 40px;
		height: 40px;
		margin: 0;
		font-size: 1rem;
	}

	.flow03-item dd {
		padding-left: 52px;
		font-size: 0.875rem;
		line-height: 1.8;
	}

}




/*======= FAQ ======*/
.faq_sec1 {
	padding: var(--v-space) 0;
	background-color: #FFF;
	position: relative;
	z-index: 1;
}

.faq2 {
	/*display: flex;*/
	flex-direction: column;
	gap: 10px;
}


.faq-item {
	display: grid;
	grid-template-columns: 1.5em 1fr;
	column-gap: 10px;
	row-gap: 10px;
}

.faq-label {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	top: -1px;
	color: #fff;
	font-weight: bold;
	font-size: 110%;
	line-height: 1.5;
	border-radius: 3px;
	width: 1.5em;
	text-align: center;
	align-self: start;
	font-family: "Noto Serif JP", serif;
}

.faq-label.q {
	background-color: var(--main-color);
}

.faq-label.a {
	background-color: var(--accent-color2);
}

.faq-question,
.faq-answer {
	margin: 0;
	line-height: 1.6;
	text-align: justify;
}

.faq-question {
	font-weight: bold;
}

hr.faqHr {
	margin-top: 20px;
	margin-bottom: 20px;
	border-top: 1px solid #e9e9e9;
}

@media only screen and (max-width: 568px){
	.faq_sec1 {
		padding: var(--v-space2) 0;
	}
}


/*=======================================================*/
/*						Gallery						 */
/*=======================================================*/

.gallery{
	display: grid;
	gap: 0px;
	margin: 0;
}

.gallery-item{
	display: block;
	overflow: hidden;
}

.gallery-item img{
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

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

	.gallery{
		grid-template-columns: repeat(3, 1fr);
	}

	.gallery-item:hover img{
		transform: none;
	}

}

@media print, screen and (min-width: 768px){

	.gallery{
		grid-template-columns: repeat(6, 1fr);
	}

}






/*追加*/
.small {
	font-size: 12px;
}