:root {
	--c-gray: #999999;
	--c-red: #BA3A36;
	--c-gary-l: #F5F5F5;
	--top-h: 80px;
	--side: clamp(0.625rem, -1.356rem + 8.451vw, 6.25rem);
	/*10px-100px*/
	/*32px-16px*/

	/* フォントサイズの設定 */
	--font-size-basic: clamp(14px, 13.296px + 0.188vw, 16px);

	--f12: clamp(10px, 9.296px + 0.188vw, 12px);
	--f14: clamp(12px, 11.296px + 0.188vw, 14px);
	--f16: clamp(14px, 13.296px + 0.188vw, 16px);
	--f18: clamp(16px, 15.296px + 0.188vw, 18px);
	--f20: clamp(18px, 17.296px + 0.188vw, 20px);
	--f22: clamp(20px, 19.296px + 0.188vw, 22px);
	--f24: clamp(22px, 21.296px + 0.188vw, 24px);
	--f28: clamp(24px, 22.592px + 0.375vw, 28px);
	--f30: clamp(24px, 21.887px + 0.563vw, 30px);
	--f35: clamp(26px, 22.831px + 0.845vw, 35px);
	--f40: clamp(30px, 26.479px + 0.939vw, 40px);
	--f50: clamp(40px, 36.479px + 0.939vw, 50px);

	/* マージン */
	--m05: clamp(2.5px, 0.25vw, 5px);
	--m10: clamp(5px, 0.5vw, 10px);
	--m20: clamp(10px, 1vw, 20px);
	--m30: clamp(15px, 1.5vw, 30px);
	--m40: clamp(20px, 2vw, 40px);
	--m50: clamp(25px, 2.5vw, 50px);
	--m60: clamp(30px, 3vw, 60px);
	--m70: clamp(35px, 3.5vw, 70px);
	--m80: clamp(40px, 4vw, 80px);
	--m90: clamp(45px, 4.5vw, 90px);
	--m100: clamp(50px, 5.5vw, 100px);
	--m150: clamp(75px, 7.5vw, 150px);
	--m200: clamp(100px, 10vw, 200px);
}


.ac {
	text-align: center;
}

.al {
	text-align: left;
}

.ar {
	text-align: right;
}

.grid-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 5em;
	margin-top: var(--m50);
}

.grid-3 {
	display: grid;
	gap: 1em;
	grid-template-columns: 1fr 1fr 1fr;
}

.btn {
	display: block;
	background-color: var(--c-red);
	color: #ffffff;
	text-align: center;
	padding: var(--m20) var(--m20) var(--m20) 2em;
	margin-inline: auto;
	margin: var(--m90) auto var(--m150);
	font-size: var(--f20);
	font-weight: bold;
	font-family: 'Noto Sans JP', sans-serif;
	position: relative;
	max-width: 550px;
}

.btn::before {
   position: absolute;
   content: "";
   background-image: url(../img/index/btn.svg);
   width: 20px;
   height: 20px;
   background-size: cover;
   top: 50%;
   left: .5em;
   transform: translateY(-50%);
}

.btn._green {
	background-color: var(--green);
}

.btn._orange {
	background-color: var(--orange);
}

.p-line {
	position: relative;
	margin: var(--m50) 0 var(--m60);
	border-bottom: 8px solid var(--sky-l);
	width: 100px;
	margin-inline: auto;
}

.p-line::before {
	content: "";
	border-bottom: 8px solid var(--blue);
	position: absolute;
	width: 50%;
	left: 0;
	bottom: -8px;
}

.red {
	color: var(--red);
}

.green {
	color: var(--green);
}

.orange {
	color: var(--orange);
}

h2 {
	font-size: var(--f24);
}


em {
	display: inline-block;
}

@media (max-width:700px) {
	.grid-2 {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------
	Resetting default margin and padding
-------------------------------------------------- */

/* !HTML5 elements
---------------------------------------------------------- */

footer,
nav,
section,
aside,
article {
	display: block;
}

/* !Reseting
---------------------------------------------------------- */
* {
	box-sizing: border-box;
}


h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: bold;
}

main {
	width: 1200px;
	max-width: calc(100% - 40px);
	margin: auto;
	font-family: 'Noto Sans JP', sans-serif;
	color: #333333;
	letter-spacing: .1em;
}


h1 {
	font-size: var(--f40);
	line-height: 1.5em;
	color: var(--c-red);
}

main h2 {
	font-size: var(--f35);
	background-color: #FCF5F5;
	padding: var(--m20) var(--m30);
	border-bottom: #E3B0AF 5px solid;
	margin: 0 0 var(--m30);
	position: relative;
}

main h2::before{
	position: absolute;
	content: "";
	background-color: var(--c-red);
	width: 15%;
	height: 5px;
	display: block;
	bottom: 0px;
	margin-bottom: -5px;
	left: 0
}

main h3 {
	font-size: var(--f28);
	background-color: var(--c-gary-l);
	padding: var(--m20) var(--m30);
	border-left: var(--c-red) 5px solid;
	margin: var(--m100) 0 var(--m30);
	color: #BA3A36;
}

main h4 {
	font-size: var(--f20);
	line-height: 1.5em;
	margin-bottom:var(--m30);
}

main h5 {
	font-size: var(--f22);
	line-height: 1.5em;
}

main p {
	font-size: var(--f20);
	line-height: 1.5em;
	font-weight: bold;
}

input,
textarea,
select {
	margin: 0;
	font-size: 100%;
	appearance: none;
	-webkit-appearance: none;
	border: none;
	outline: none;
}

label {
	cursor: pointer;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
	font-size: 100%;
}

fieldset,
img {
	border: 0;
}

address,
caption,
cite,
code,
dfn,
th,
var {
	font-style: normal;
	font-weight: normal;
}

a,
input {
	outline: none;
}

em {
	font-style: normal;
	display: inline-block;
}

figure {
	text-align: center;
	display: block;
}

main .small {
	font-size: var(--f12);
	display: block;
	font-weight: normal;
	font-family: "Noto Serif JP", serif;
}

main .nomal-word{
	font-size: var(--f16);
	font-weight: normal; 
	font-family: "Noto Serif JP", serif;
}

main .nomal-word li{
	font-size: var(--f20);
}

main .red{
	color: var(--c-red);
}

main .black{
	color: #333333;
}

@media (max-width:700px) {
	main {
		padding: var(--m30);
	}

}


/*--------------------------------------------------------------
 top 
 --------------------------------------------------------------*/
.top {
	background-image: url(../img/index/main.jpg);
	position: relative;
	overflow: hidden;
	height: 400px;
	display: flex;
	align-items: center;
	font-weight: bold;
	background-position: center center;
	background-size: cover;
}

.top::after {
	position: absolute;
	content: "Image photo";
	text-align: right;
	padding: 60px 20px 10px;
	width: 100%;
	bottom: 0;
	right: 0;
	color: #fff;
	line-height: 1;
	font-size: 1.2rem;
	font-weight: normal;
	text-shadow: 0 0 10px rgba(0, 0, 0, .9);
	background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.2) 100%);
	background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.2) 100%);
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.2) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#33000000', GradientType=0);
}

.top h1{
	width: 1200px;
	max-width: calc(100% - 40px);
	margin: auto;
	position: relative;
	z-index: 50000;
	color: #fff;
	text-shadow: 0px 0px 10px black;
	z-index: 10;
	font-size: 4.0rem;
	line-height: 1.6;
}

@media only screen and (max-width: 896px) {
	.top {
		background-image: url(../img/index/main-sp.jpg);
		height: 200px;
		margin-top: 60px;
	}
	
	.top h1{
		width: 640px;
		position: relative;
		z-index: 50000;
		color: #fff;
		text-shadow: 0px 0px 10px black;
		z-index: 10;
		font-size: 2.2rem;
	}
}


/*--------------------------------------------------------------
sec_pan 
 --------------------------------------------------------------*/

.sec_pan {
	font-size: 1.4rem;
	padding: 30px 0;
}



@media (max-width:700px) {
	.inner {
		padding: 0 var(--m30);
		
	}
}
/*--------------------------------------------------------------
 dementia
 --------------------------------------------------------------*/
.dementia{
	margin-top: var(--m90);
}

/*--------------------------------------------------------------
 dementia-content
 --------------------------------------------------------------*/
.dementia .dementia-content{
	padding: 0 var(--m30);
}

/*--------------------------------------------------------------
 explanation
 --------------------------------------------------------------*/
.explanation .grid-2{
	margin-bottom: var(--m50);
 }
 
.explanation .grid-2>div{
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 2;
	gap: 1.5em;
}
  
.explanation .grid-2 h4{
	background-color: var(--c-gray);
	color: #ffffff;
	font-size: var(--f18);
	padding: 0 var(--m10) ;
	height: 100%;
	place-content: center;
 }
   
.explanation .grid-2 figure{
	align-self: center;
	max-width: 700px;
	margin-inline: auto;
	height: auto;
}

/*--------------------------------------------------------------
 about
 --------------------------------------------------------------*/
.about table , td, th {
	border: 1px solid #CCCCCC;
	border-collapse: collapse;
	width: 100%;
}

.about table {
	margin-top: var(--m50);
	font-weight: bold;
}

.about th {
	background-color: #999999;
	color: #ffffff;
	width: 20%;
}

.about td {
	padding: var(--m20);
}

.about td ul {
	display: flex;
	flex-wrap: wrap;
	column-gap: 1em;
	row-gap: .5em;
}

.about td ul li{
	display: flex;
	align-items: center;
	gap: .3em;
}

.about td ul li::before{
	content: "";
	background-image: url(../img/index/mark.svg);
	width: 25px;
	height: 25px;
	display: block;
	background-size: cover;
}

/*--------------------------------------------------------------
 no-measures
 --------------------------------------------------------------*/
.no-measures ul{
	margin-top: var(--m50);
	border: #D9D9D9 1px solid;
	padding: var(--m60);
}

.no-measures ul li{
	padding-left: 1em;
	text-indent: -1.5em;
}

.no-measures ul li:not(:first-of-type){
	margin-top: var(--m20);
}

.no-measures ul li::before{
	content: "●";
	color: var(--c-red);
	margin-right: .5em;
}

/*--------------------------------------------------------------
insurance
 --------------------------------------------------------------*/
.insurance img{
	background-color: var(--c-gary-l);
	padding: var(--m60);
	margin-top: var(--m50);
	margin-inline: auto;
	display: block;
}



/*--------------------------------------------------------------
inheritance-content
 --------------------------------------------------------------*/
 .inheritance  .inheritance-content{
	padding: 0 var(--m30);
}


/*--------------------------------------------------------------
inheritance-content explanation
 --------------------------------------------------------------*/
 .inheritance  .inheritance-content .explanation .grid-2>div{
	grid-row: span 3;
	text-align: left;
}


/*--------------------------------------------------------------
inheritance-content about
 --------------------------------------------------------------*/
.inheritance  .inheritance-content .about .grid-2{
	gap: 2em;
	margin-top: var(--m50);
}

.inheritance  .inheritance-content .about .grid-2 div{
	padding: var(--m60);
	border: solid 1px #D9D9D9;
}


.inheritance  .inheritance-content .about .grid-2 div h4{
	color: var(--c-red);
	border-bottom: var(--c-red) 2px solid;
	width: 135px;
	margin-inline: auto;
}


/*--------------------------------------------------------------
inheritance-content insurance
 --------------------------------------------------------------*/
.inheritance-content .insurance ul li{
	border: solid 1px #D9D9D9;
	padding: var(--m60);
	margin-top: var(--m50);
}

.inheritance-content .insurance ul li:not(:first-of-type){
	margin-top: var(--m30);
}

.inheritance-content .insurance ul li div{
	display: grid;
	gap: var(--m20);
	align-items: center;
	grid-template-columns: auto 1fr;
	margin-bottom: var(--m30);
}

.inheritance-content .insurance ul li div h4{
	margin-bottom: 0;
}

.inheritance-content .insurance ul li div .merit{
	color: #ffffff;
	background-color: var(--c-red);
	border-radius: 1em;
	padding: .2em .7em;
	text-align: center;
	margin-inline: auto;
}

.inheritance-content .insurance ul li .calculation{
	background-color: var(--c-gary-l);
	font-size: var(--f22);
	padding: var(--m30);
	margin: var(--m30) 0;
}

.inheritance-content .insurance ul li .calculation span{
	font-size: var(--f16);
}

.inheritance-content .insurance ul li .small{
	text-indent: -1.85em;
	padding-left: 2em;
}

@media (max-width:700px) {
	.inheritance-content .insurance ul li div{
		grid-template-columns: 1fr;
	}
	
	.inheritance-content .insurance ul li div h4{
		text-align: center;
	}
}