@charset "UTF-8";


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

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

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

.hline {
	display: inline-block;
	width: 40px; /* 横棒の長さ（調整可） */
	height: 1px; /* 横棒の太さ（調整可） */
	background-color: #2d2d2d; /* 横棒の色 */
	vertical-align: middle;
	margin: 0 0.1em; /* 文章と横棒の間隔 */
}

/*パンくず*/
.sec_pankuzu{
	padding: 0px;
	background-color: var(--base-color);
	position: relative;
	z-index: 1;
}

/* タグ */
.kakomi01{
	text-align: center;
}
.kakomi01 span {
	padding: 3px 7px 2px 7px;
	margin: 0px 0px 5px;
	background-color: var(--main-color);
	border: 1px solid #eee;
	color:#FFF;
	border-radius: 5px;
	text-align: center;
	display: inline-block;
	font-size: clamp(12px, 1.3vw, 12px);
}

/* タグ（左右が揃う）  */
.kakomi-tag01 {
	display: flex;
	flex-wrap: wrap; /* 子要素を折り返す */
	gap: 10px;
	width: 100%;
	justify-content: space-between; /* 左右のボックスを揃える */
}
.kakomi-tag01 p {
	background-color: var(--accent-color3);
	padding: 5px 10px;
	font-size: clamp(14px, 1.6vw, 16px);
	font-family: Arial, sans-serif;
	flex-grow: 1; /* ボックスのサイズを自動調整 */
	min-width: 100px; /* ボックスの最小幅を設定 */
	box-sizing: border-box;
	text-align: center; /* 水平方向の中央揃え */
}
.kakomi-tag01 .end{		/* などを末尾につけたい場合に */
	background-color:transparent;
	padding: 5px;
	font-size: clamp(14px, 1.3vw, 14px);
	font-family: Arial, sans-serif;
	width: 20px;
	min-width: 40px; /* ボックスの最小幅を設定 */
	box-sizing: border-box;
	text-align: right; /* 水平方向の中央揃え */
}

/* メインタイトル */
.c-title{
	text-align: center;
	font-size: clamp(22px, 2.4vw, 26px);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.02em;
	color: var(--main-color);
	margin-bottom: 32px;
}

/*======= FONT ======*/
/*英字*/
.heading06::before {
	font-family: "Zen Kaku Gothic New", serif;
	font-weight: 700;
	font-style: normal;
	z-index: -1;
}

.lowerPage-heading-decoration + p,
.heading,
.heading-decoration + p {
    font-family: "Zen Kaku Gothic New", serif;
    font-weight: 700;
    font-style: normal;
}

/*日本語*/
@media (min-width: 769px) {
    .nav ul {
        font-family: "Zen Kaku Gothic New", serif;
        font-weight: 500;
        font-style: normal;
    }
}

@media (max-width: 768px) {
    .nav ul {
        font-family: "Zen Kaku Gothic New", serif;
        font-weight: 500;
        font-style: normal;
    }
}

.lowerPage-heading-decoration,
.c-title,
.heading span,
.sec_items__name  {
    font-family: "Zen Kaku Gothic New", serif;
    font-weight: 700;
    font-style: normal;
}

.heading-decoration  {
    font-family: "Zen Kaku Gothic New", serif;
    font-weight: 500;
    font-style: normal;
}


/*======= TOPページ ======*/
/*ご挨拶*/
.greeting {
	padding: clamp(40px, 6vw, 90px) 0 var(--v-space2);
	background-color: #FFF;

	position: relative; /* sectionの位置を相対的にする*/ 
	z-index: 1; /* 背景画像より上に表示 */ 

		background-image: url(../img/bg_01.png);
		background-repeat: no-repeat;
		background-position: top;
		background-size: cover;
}

.greeting-haba{
	margin: 0 auto;
	max-width: 900px;
	padding: 2% 0 0 0;
}


.greeting{
	--card-radius: 0px;
	--photo-radius: 0px;
	--gap: 10px;
}
.greeting__inner{
	margin: 0 auto;
	max-width: 1250px;
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	gap: var(--gap);
	align-items: start;
}
/* 左：白カード（テキスト） */
.greeting__text{
	background: #ffffffd1;
	padding: clamp(18px, 2.2vw, 26px);
	border-radius: var(--card-radius);
	/* box-shadow: 0 10px 18px rgba(0,0,0,.08); */
}
.greeting__title{
	margin: 0 0 14px;
	color: #30842e;
	font-size: clamp(18px, 2.2vw, 24px);
	line-height: 1.45;
	letter-spacing: .06em;
	font-family: serif;
	font-weight: 600;
}
.greeting__text p{
	margin: 0;
	color: #111;
	font-size: 15px;
	line-height: 1.9;
}
/* 右：2枚の縦長画像を「別々の列」に配置 */
.greeting__media{
	display: contents; /* ←親の3カラム(2fr/1fr/1fr)をそのまま使う */
}
/* 画像共通 */
.greeting__photo{
	margin: 0;
	height: clamp(320px, 42vw, 520px);  /* 縦長の気持ち良さ */
	background: rgba(0,0,0,.06);        /* 読み込み前の下地 */
	overflow: hidden;
	border-radius: var(--photo-radius);
	/* box-shadow: 0 10px 18px rgba(0,0,0,.10); */
}
.greeting__photo img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top; /* 空や余白を上に見せたい時にも効く */
	display: block;
}
/* 右の“段差”を作る：見本っぽく、右端の方を上に/下にずらす */
.greeting__photo.is-a{
	grid-column: 2;             /* 真ん中の1fr */
	margin-top: 5vw;           /* 少し下げる（見本の中段っぽさ） */
}

.greeting__photo.is-b{
	grid-column: 3;             /* 右の1fr */
	margin-top: 0;              /* こちらは上め */
}
/* PC時：テキスト位置を下げる */
@media print, screen and (min-width: 768px) { 
	.greeting__text{
		margin-top: 10vw; /* ← 画像に合わせて調整（40$301C80pxで微調整） */
	}
}
/* ====== SP：縦積み ====== */
@media only screen and (max-width: 767px) {
	.greeting__inner {
		grid-template-columns: 1fr;
	}
	.greeting__media {
		order: 1;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--gap);
	}
	.greeting__text {
		order: 2;	/* 文章を後 */
		background: #ffffff4d;
	}
	.greeting__photo.is-a,
	.greeting__photo.is-b {
		grid-column: auto;
		/* margin-top: 0; */
		height: 320px;
	}
	.greeting__text p{
		text-align: justify;
	}
	.greeting__photo.is-a{
		margin-top: 0vw;
	}
}



/*TELバナー*/
.tel_bnr{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: 1fr;
	grid-column-gap: 20px;
	grid-row-gap: 10px;
}
@media only screen and (max-width: 767px) {
	.tel_bnr{
		grid-template-columns: repeat(1, 1fr);
		grid-row-gap: 10px;
	}
}

.tel_bnr a {
    display: block;
    transition: 0.3s;
}

.tel_bnr a:hover {
    transform: translateY(-3px);
    opacity: 0.8;
}



/* ----------------------------
	top_sec
---------------------------- */
.top_sec{
	padding: var(--v-space2) 0;
	background: #ffffff;
}

.top_trouble{
	background: #fff;
}

.top_trouble__title{
	text-align: center;
	font-size: clamp(22px, 2.4vw, 26px);
	font-weight: 700;
	color: var(--main-color);
	margin-bottom: 32px;
}

.top_trouble__list{
	max-width: 640px;
	margin: 0 auto 32px;
	padding: 0;
	list-style: none;
}

.top_trouble__list li{
	position: relative;
	padding: 14px 16px 14px 44px;
	margin-bottom: 12px;
	font-size: 16px;
	line-height: 1.7;
	background: #f9f5ec;
	border-radius: 10px;
	border: 1px solid #eee;
	transition: transform 0.2s ease;
}

.top_trouble__list li::before{
	content: "✓";
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	width: 22px;
	height: 22px;
	border-radius: 50%;
    background: #3e7c88bd;
	color: #fff;
	font-size: 13px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.top_trouble__arrow{
	text-align: center;
	font-size: 18px;
	margin: 10px 0 20px;
	color: var(--accent-color1);
	animation: arrowMove 1.5s infinite;
}


.top_trouble__lead{
	max-width: 720px;
	margin: 0 auto;
	line-height: 1.9;
	text-align: center;
}

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

	.top_trouble__title{
		font-size: 20px;
		margin-bottom: 24px;
	}

	.top_trouble__list li{
		font-size: 15px;
        padding: 12px 14px 12px 45px;	
	}

	.top_trouble__lead{
		text-align: left;
	}

}



/* ----------------------------
	top_sec2
---------------------------- */
.top_sec2{
	padding: clamp(70px, 8vw, 110px) 0;
	background-color: #F4F0E8;
	background-image:
	linear-gradient(45deg, #F8F5F1 25%, transparent 25%),
	linear-gradient(-45deg, #F8F5F1 25%, transparent 25%),
	linear-gradient(45deg, transparent 75%, #F8F5F1 75%),
	linear-gradient(-45deg, transparent 75%, #F8F5F1 75%);
	background-size: 80px 80px; /* マスの大きさ */
	background-position: 0 0, 0 40px, 40px -40px, -40px 0px;
}


/* ----------------------------
	sec_items
---------------------------- */
.sec_items{
	padding: clamp(70px, 8vw, 110px) 0;
	background: #f8f8f8;
	background-size: cover;
	background-repeat: no-repeat;
	background-image: url(../img/bg_02.png);
}

/* PCのみ fixed */
@media screen and (min-width:1024px) and (hover:hover) and (pointer:fine){
	.sec_items{
		background-attachment:fixed;
	}
}

.sec_items *,
.sec_items *::before,
.sec_items *::after{
	box-sizing: border-box;
}

.sec_items__head{
	text-align: center;
	margin-bottom: clamp(34px, 5vw, 52px);
}

.sec_items__title{
	margin: 0;
	font-size: clamp(24px, 2.4vw, 28px);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.02em;
	color: var(--main-color);
}

.sec_items__lead{
	margin: 14px 0 0;
    text-shadow: 1px 1px 0 #FFF, -1px -1px 0 #FFF, -1px 1px 0 #FFF, 1px -1px 0 #FFF, 0px 1px 0 #FFF, 0 -1px 0 #FFF, -1px 0 0 #FFF, 1px 0 0 #FFF, 0 2px 6px rgba(0, 0, 0, 0.15);
}

.sec_items__grid{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(16px, 2vw, 24px);
}

.sec_items__card{
	display: grid;
	align-content: start;
	justify-items: center;
    padding: 0 0 16px 0;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--accent-color2);
	border-radius: 18px;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.03);
	text-align: center;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	overflow: hidden;
}


.sec_items__icon{
	width: 100%;
	margin-bottom: 12px;
	overflow: hidden;
    border-radius: 10px 10px 0 0;
}

.sec_items__icon img{
	width: 100%;
	height: 130px;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

.sec_items__name{
	margin: 0;
	font-size: clamp(15px, 1.45vw, 17px);
	line-height: 1.5;
	color: var(--main-color);
}

.sec_items__note{
	margin: 22px 0 0;
	font-size: 13px;
	line-height: 1.8;
}

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

	.sec_items{
		padding: clamp(70px, 8vw, 110px) 0;
		background: #f8f8f8;
		background-size: cover;
		background-repeat: no-repeat;
		background-image: url(../img/bg_02_sp.png);
	}

	.sec_items__head{
		margin-bottom: 30px;
	}

	.sec_items__lead{
		line-height: 1.85;
		text-align: justify;
	}

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

	.sec_items__card{
        padding: 0 0 10px 0;
        border-radius: 14px;
	}

	.sec_items__name{
		font-size: 14px;
	}

	.sec_items__note{
		margin-top: 18px;
		font-size: 12px;
	}
}

@media print, screen and (min-width: 768px) {
	.sec_items__card{
		will-change: transform;
	}
}


/* ----------------------------
	各ページ遷移バナー
---------------------------- */
.topbnr_sec{
	padding: 50px 0 50px 0;
    background-color: #D9E7E7;
}

.topbnr_sec-container {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: 1fr;
	grid-column-gap: 10px;
	grid-row-gap: 10px;
}

@media only screen and (max-width: 568px) {
	.topbnr_sec-container {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: 2fr;
		grid-column-gap: 10px;
		grid-row-gap: 10px;
	}
}



/* ==============
	業務案内
============== */

/* sec1*/
.se_sec1 {
	padding: var(--v-space2) 0 var(--v-space3);
	position: relative;
	z-index: 1;
	background: url(../img/bg_01.png) no-repeat center/cover;
}

@media only screen and (max-width: 768px) {
	.se_sec1 {
		background: url(../img/bg_01_sp.png) no-repeat center/cover;
	}
}

.se_sec1__wrap{
	display: flex;
	justify-content: space-between;
	margin-top: 50px;
}

.circle{
    width: 220px;
    height: 220px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    background: #fff;
    margin: 0 auto;
    padding: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 8px 20px rgba(255, 255, 255, 0.95);
}

.point_num{
	font-size: 12px !important;
	color: var(--accent-color1);
	margin-bottom: 6px;
	letter-spacing: 0.08em;
	font-family: "Zen Kaku Gothic New", serif;
    font-weight: 700;
    font-style: normal;
}

.circle h3{
	font-size: 18px;
	font-weight: 700;
    margin-bottom: 18px;
    color: var(--main-color);
}

.circle p{
	font-size: clamp(13px, 1.2vw, 15px);
	line-height: 1.6;
}

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

	.se_sec1__wrap{
		display: grid;
		grid-template-columns: repeat(3, 200px);
		justify-content: center;
	}

	.circle{
		width: 200px;
		height: 200px;
	}

	.circle:nth-child(1){
		grid-column: 2 / 3;
		transform: translateY(10px);
	}

	.circle:nth-child(2){
		grid-column: 1 / 2;
		grid-row: 2;
	}

	.circle:nth-child(3){
		grid-column: 3 / 4;
		grid-row: 2;
	}
}

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

	.se_sec1__wrap{
		flex-direction: column;
		align-items: center;
		gap: 24px;
		margin-top: 30px;
	}

	.circle{
		width: 180px;
		height: 180px;
		padding: 16px;
	}

}


/* sec2 */
.se_sec2{
	padding: var(--v-space) 0;
	position: relative;
	z-index: 1;

    background:
        url("../img/bg_03a.png") no-repeat top center / 100% auto,
        url("../img/bg_03b.png") no-repeat bottom center / 100% auto,
		url("../img/bg_03c.png") no-repeat center / cover,
        #fff;
}



/* ==============
	生前・遺品整理
============== */

/*est-sec1*/
.est_sec1 {
	padding: 0 0 var(--v-space);
	position: relative;
	z-index: 1;
}

/* カード */
.entry-trouble-title {
	font-size: 20px;
	text-align: center;
	margin-bottom: 30px;
	color: #444;
	letter-spacing: 0.05em;
}

.trouble-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 16px;
}

.trouble-card {
	background: #fff;
	border-radius: 12px;
	padding: 15px 10px;
	text-align: center;
	box-shadow: 0 4px 12px rgba(0,0,0,0.05);
	transition: 0.2s;
}

.trouble-card img {
	width: 90px;
    height: 90px;
    opacity: 0.8;
    margin: 0 auto 8px auto;
}

.trouble-card p {
    font-size: 15px;
    line-height: 1.6;
    color: #444;
}	

.entry-trouble-text {
    margin-top: 35px;
    line-height: 1.9;
    color: #444;
    text-align: center;
}

@media only screen and (max-width: 1024px){
	.trouble-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media only screen and (max-width: 767px){
	.trouble-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}

	.trouble-card {
		padding: 14px 10px;
	}

	.entry-trouble-title {
		font-size: 18px;
	}

	.entry-trouble-text {
		text-align: left;
	}
}

/* 清掃 */
.note-box{
    padding: 18px 20px;
    border: 3px dotted #b3b3b3;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.6);
    width: 70%;
    margin: var(--v-space2) auto 0 auto;
}

.note-box__title{
	font-size: clamp(18px, 2vw, 22px);
	font-weight: 700;
	color: #444;
	margin-bottom: 8px;
}

.note-box__text{
	line-height: 1.8;
}

@media only screen and (max-width: 786px){
	.note-box{
		width: 100%;
	}
}

/*======= sec2 ======*/
/* 生前整理 */
.est_sec2 {
    padding: 0 0 var(--v-space) 0;
    background-color: #f7f4ef;
	position: relative;
	z-index: 1;
}

.bgimg-01 .bgimg-fade-bg{
	background-image: url("../img/estate_01.jpg");
}

.bgimg-02 .bgimg-fade-bg{
	background-image: url("../img/estate_02.jpg");
}

.est_sec2-2 {
	padding: var(--v-space) 0;
	background-color: #fff;
	position: relative;
	z-index: 1;
}

.support-box__arrow {
    text-align: center;
    font-size: 18px;
    margin: 10px 0 20px;
    color: var(--accent-color2);
    animation: arrowMove 1.5s infinite;
}

.support-box{
	padding: 28px;
	background: #f7f4ef;
	border-radius: 16px;
}

.bg-gr {
	background: #ecf3e4;
}

.support-box__title{
	font-size: 16px;
	font-weight: 700;
	color: var(--main-color);
	margin-bottom: 18px;
	text-align: center;
}

.support-box__list{
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px 20px;
}

.support-box__list li{
	background: #fff;
	border-radius: 10px;
	padding: 14px 16px;
	font-size: 15px;
	line-height: 1.6;
	box-shadow: 0 4px 10px rgba(0,0,0,0.04);
	border-left: 4px solid var(--accent-color1);
}

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

	.support-box__list{
		grid-template-columns: 1fr;
	}

}

/* 遺産整理 */
.est_sec3 {
    padding: 0 0 var(--v-space) 0;
	background-color: #ecf3e4;
	position: relative;
	z-index: 1;
}


/* 流れ */
.est_sec5 {
	padding: var(--v-space) 0;
	background-color: #fff;
	position: relative;
	z-index: 1;
}



/*======= FAQ ======*/
.faq_sec1 {
	padding: clamp(70px, 6vw, 90px) 0 var(--v-space) 0;
	background-color: #fff;

	position: relative;
	z-index: 1;
}

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

.faq-label {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-weight: bold;
	font-size: 110%;
	line-height: 1.5;
	border-radius: 3px;
	width: 1.5em;
	text-align: center;
	align-self: start;
	/* lavelを上揃えに */
}

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

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

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

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

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

/*======= 会社案内ページ ======*/
/*会社案内*/
.info_sec1{
	padding: clamp(70px, 6vw, 90px) 0 var(--v-space) 0;
	background-color: #FFF;

	position: relative; /* sectionの位置を相対的にする*/ 
	z-index: 1; /* 背景画像より上に表示 */ 
}

/* 概要部分のテーブル */

.info_sec1__haba{
	max-width: 850px;
	margin: 0 auto;
}
.info_sec1_container {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
	font-family: 'Arial', sans-serif;
}

.info_sec1_container .item {
	border: 1px solid #ddd;
	box-shadow: 0 2px 6px rgba(0,0,0,0.1);
	border-radius: 6px;
	background-color: #fff;
	padding: 12px 16px;
	display: grid;
	grid-template-columns: 180px 1fr;
	align-items: center;
	gap: 20px;
	align-items: stretch;
}

.info_sec1_container .label {
	display: flex;
	align-items: center;
	font-weight: 600;
	color: var(--txt-color);
	white-space: nowrap;
	background-color: #c3b1a2b5;
	padding: 5px 7px;
}

.info_sec1_container .content {
	/* display: flex; */
	align-items: center;
	color: #333;
	padding: 5px 7px;
}
.info_sec1_container .content a {
	display: inline-block;
	line-height: inherit;
}

.tel-label {
	display: inline-block;
	width: 48px;          /* ← 幅指定できる */
	margin: 0px 10px 0px 0px;
	font-size: 15px;
	font-weight: bold;
}
.mt4{
	margin-top: 4px;
}

/* レスポンシブ：568px以下で縦並び＋枠内レイアウトも縦に */
@media only screen and (max-width: 568px) {
	.info_sec1_container .item {
		grid-template-columns: 1fr;
		gap:0px;
		padding: 10px 14px;
	}

	/*.info_sec1_container .label {
		line-height: 1.6;
		font-size: 14px;
	}

	.info_sec1_container .content {
		font-size: 14px;
	}*/
}


.access_sec1{
	padding: var(--v-space) 0;
	background-color: #f7f7f7;

	position: relative; /* sectionの位置を相対的にする*/ 
	z-index: 1; /* 背景画像より上に表示 */ 
}
/* アクセス部分のテーブル */
.access1 {
	font-weight: bold;
	border-bottom: 1px dashed #999;
	padding: 5px;
	width: 5.25em;
}
.access2 {
	border-bottom: 1px dashed #999;
	padding: 5px;
	width: 400px;
}
@media screen and (max-width: 568px) {
	.access1 {
		display: block;
		padding: 8px 2px 2px 2px;
		width: 100%;
		border-bottom: 1px solid rgba(255,255,255,0);
	}
	.access2 {
		display: block;
		padding: 2px;
		width: 99%;
	}
}