@charset "UTF-8";

main{ margin-top:190px; }

/*===================================
	メインビジュアル
===================================*/
.kvArea{ background:url(../../img/city.svg) center bottom / 1363px no-repeat; position:relative; }
.kvArea:after{
	content:"";
	max-width:263px;
	max-height:300px;
	width:16.47vw;
	height:20vw;
	display:block;
	background:url(../img/adviser.png) top / 100% no-repeat;
	position:absolute;
	bottom:0;
	right:30px;
}
.kvArea h1{
	width:540px;
	display:block;
	color:#158413;
}
.kvArea h1 strong{
	margin-top:70px;
	display:block;
	font-size: 5.4rem;
	line-height: 8.4rem;
	letter-spacing: 0.06em;
}
.kvArea h1 span{
	margin-top:25px;
	display:block;
	color:#555555;
	font-size:2.3rem;
	font-weight:500;
	letter-spacing:0.12em;
	line-height:4rem;
}
.kvArea > div{
	width:1240px;
	margin:0 auto;
	display:flex;
	justify-content:space-between;
	position:relative;
}
.kvArea > div:after{
	content:"";
	width:432px;
	height:125px;
	display:block;
	background:url(../../img/people.png) 100% / 100% no-repeat;
	position:absolute;
	bottom:0;
}
.kvArea > div > div{width:610px;height:100%;padding-bottom:30px;margin:0 30px 30px;}

.kvArea a:hover{ text-decoration:none; }

/*スライダー*/
.splide__arrows > button{
	width:60px;
	height:60px;
	border-radius:50%;
	background:url(../img/arrow2-green.svg) center / 9px 17px no-repeat #fff;
	border:2px solid #158413;
	position:absolute;
	top:130px;
	z-index:1;
}
.splide__arrow--prev{ transform:scale(-1); left:-30px; }
.splide__arrow--next{right:-30px;}
.splide__slide img { width:100%; }

.kvArea .splide__slider{ border-radius:15px; box-shadow:0 0 10px rgba(0, 0, 0, .1); }
.kvArea .splide__slide > a > div{ padding:30px; background:#fff;}

.splide__slide > a{
	border-radius:15px;
	overflow:hidden;
}
.splide__slide > a:focus-visible{
	border:2px solid #000;
}
.kvArea .splide__slide .event-title{ margin-top:0; font-size:2.4rem; font-weight:700; }

@media print,screen and (max-width:900px){
	.kvArea .splide__arrows > button{
		width:50px;
		height:50px;
	}
}

.kvArea .splide__track{ border-radius:15px; overflow:hidden; }
.kvArea .splide-control{
	width:170px;
	padding-left:30px;
	border-radius:50px;
	background:#fff;
	box-shadow:0 0 10px rgba(0, 0, 0, .1);
}
.kvArea .event-date{ font-size:1.7rem; font-weight:500; margin-right:15px; }

.category{
	min-width:135px;
	padding:0 10px;
	display:inline-block;
	color:#fff;
	font-size:1.4rem;
	min-height:25px;
	line-height:2.5rem;
	text-align:center;
	border-radius:50px;
	font-weight:500;
}
.category.endlife-plane,
.category.endlife{ background:#4f56ad; }
.category.money{ background:#bd5a02; }
.category.hobby-health{ background:#d5386d; }


.splide__toggle__play img,
.splide__toggle__pause img{
	display:flex;
	align-items:center;
	justify-content:center;
}
@media print, screen and (max-width:1380px){
	.kvArea > div{width:960px;}
	.kvArea:after{ right:20px; }
	.kvArea > div > div{ width:420px; }
	.kvArea .splide__slide > a > div{
		padding: 20px;
	}
	.kvArea h1{
		font-size:2rem;
	}
	.kvArea h1 strong {
		font-size: 4.8rem;
		line-height: 7.0rem;
	}
	.kvArea h1 span{ font-size:2rem; }
}
@media print, screen and (max-width:1300px){
	main{ margin-top:140px; }
}
@media print,screen and (max-width:1200px){
	.kvArea h1{
		width:400px;
		font-size:2rem;
	}
	.kvArea h1 strong {
		margin-top:60px;
		font-size:4.4rem;
		line-height: 6.6rem;
	}
	.kvArea h1 span{ font-size:2rem; }
	.kvArea > div{width:900px;}
}

@media print,screen and (max-width:1000px){
	.kvArea > div{
		display:block;
		padding:0 30px 60px;
		width:100%;
	}
	.kvArea > div::after{
		width:316px;
		height:90px;
	}
	.kvArea h1{ width:100%; }
	.kvArea h1 span br{ display:none; }
	.kvArea > div > div{width:100%;margin:40px 0 0;}
	.kvArea h1 strong {
		font-size:3.8rem;
		line-height: 6rem;
	}
	.splide__arrow--prev{transform:scale(-1);left:-25px;}
	.splide__arrow--next{right:-25px;}
	.kvArea .splide__slide .event-title{ font-size:2rem; line-height:2.7rem; }
	.kvArea .splide__slide .event-title + p{margin-top:10px;}
}
@media print,screen and (max-width:600px){
	.kvArea h1 strong {
		font-size: 3.2rem;
		line-height: 5.2rem;
	}
	.kvArea h1{ font-size:1.8rem; }
	.kvArea h1 span{margin-top:20px;margin-bottom:35px;font-size:1.8rem;line-height:3.2rem;letter-spacing:0.06em;}
	.kvArea > div > div{ margin-top:20px; }
	.kvArea > div::after{
		width:240px;
		height:68px;
	}
}


/*===================================
最新のセミナー・イベント＆終活ナビ
===================================*/
.seminarArea{ background:#fafafa; }
.seminarArea > div{ width:1300px; margin:0 auto; padding:75px 0 100px; display:flex; align-items:stretch; }
.seminarArea > div > div{ width:calc((100% - 80px) / 2); }
.seminarArea > div > div + div{ margin-left:80px; }
.seminarArea .seminar > ul > li > a{ display:flex; }
.seminarArea a:hover{ text-decoration:none; }
.seminarArea > div > div > ul > li:not(:last-of-type){
	padding-bottom:30px;
	margin-bottom:30px;
	border-bottom:1px solid #555555;
}

.seminarArea .seminar > ul > li > a > p{
	width:214px;
	height:116px;
	margin-right:20px;
	border-radius:4px;
	border:1px solid #e4e4e4;
	overflow:hidden;
}
.seminarArea .seminar > ul > li > a > p > img{ width:214px; height:116px; object-fit:cover; }

.seminarArea .seminar > ul > li > a > div{ width:calc(100% - 234px); }
.seminarArea .seminar > ul > li > a > div > p:first-of-type{
	display:flex;
	align-items:flex-start;
}
.seminarArea .blog-maintext{
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	margin-top:5px;
}
.seminarArea .event-date,
.seminarArea .blog-date{ font-size:1.7rem; font-weight:500; margin-right:15px; }

.seminarArea .seminar,
.seminarArea .end-of-life{
	flex:1;
	display:flex;
	flex-direction:column;
}
.seminarArea .seminar ul,
.seminarArea .end-of-life ul{ margin-bottom:60px; }
.seminarArea .seminar li a,
.seminarArea .end-of-life li a {
	display:block;
}
.seminarArea .btn {
	margin-top:auto;
}


@media print,screen and (max-width:1500px){
	.seminarArea > div{ width:1200px; padding:80px 0; }
	.seminarArea > div > div{ width:calc((100% - 40px) / 2); }
	.seminarArea > div > div + div{ margin-left:40px; }
	.seminarArea .seminar > ul > li > a > p{
		width:174px;
		height:94px;
	}
	.seminarArea .seminar > ul > li > a > p > img{
		width:174px;
		height:94px;
	}
	.seminarArea .seminar > ul > li > a > div { width:calc(100% - 194px); }
}
@media print,screen and (max-width:1260px){
	.seminarArea > div{ width:100%; padding:70px 20px; }
}

@media print,screen and (max-width:1200px){
	.seminarArea .seminar > ul > li > a > div > p:first-of-type{ display:block; }
	.seminarArea .event-date br{ display:none; }
	.seminarArea .btn{ width:100%; }
}
@media print,screen and (max-width:900px){
	.seminarArea > div{ display:block; }
	.seminarArea > div > div{ width:100%; }
	.seminarArea .seminar > ul > li > a{ display:block; }
	.seminarArea .seminar > ul > li > a > p > img {
		width:100%;
		height:100%;
	}
	.seminarArea .seminar > ul > li > a > div { width:100%; margin-top:20px; }
	.seminarArea > div > div + div{ margin-left:0; margin-top:70px; }
	.seminarArea .seminar > ul > li > a > p{
		width:100%;
		height:100%;
		margin-right:0px;
		border-radius:10px;
	}
}
/*===================================
これからの暮らしやお金のことで、こんなお悩みありませんか？
===================================*/
.worriesArea{ padding:100px 0 0; background:#d0e6d0; }
.worriesArea h2{ color:#333333; text-align:center; }
.worriesArea h2 strong{ color:#1e6b1d; display:inline-block; font-size:4rem; }
.worriesArea h2 strong > span{ position:relative; }
.worriesArea h2 strong > span:before{
	content:"";
	width:10px;
	height:10px;
	border-radius:50%;
	background:#f28f26;
	position:absolute;
	top:-10px;
	left:50%;
	transform:translateX(-50%);
}
.worriesArea .image{text-align:center;display:block;}

.worriesArea br.sp-only{ display:none; }

@media print,screen and (max-width:1260px){
	.worriesArea{ width:100%; padding:70px 20px; }
}
@media print,screen and (max-width:900px){
	.worriesArea h2{ text-align:left; }
	.worriesArea h2 strong > span:before {
		content:"";
		width:8px;
		height:8px;
		top:-5px;
	}
	.worriesArea h2 strong{ font-size:3rem; }
}


/*===================================
そんなあなたのお悩みを、たのシニア生活彩り倶楽部が解決します！
===================================*/
.solutionArea{ background:#f0f5f0; }
.solutionArea > div{ width:1160px; margin:0 auto; padding:75px 0 100px; display:flex; }
.solutionArea > div:after{
	content:"";
	height:438px;
	width:296px;
	display:block;
	background:url(../../img/adviser-shine.png) bottom right / 100% no-repeat;
	margin-left:90px;
	margin-top:auto;
}

.solutionArea h2{ color:#1e6b1d; }
.solutionArea h2 strong{ font-size:4rem; }
.solutionArea h2 strong:first-of-type{ color:#333333; }
.solutionArea h2 .small{ font-size:3rem; }
.solutionArea p{ font-weight:500; line-height:4.2rem;}
.solutionArea > div > div{ width:calc(100% - 386px); }
.solutionArea > div:after{ width:296px; margin-left:90px; margin-top:auto; }
.solutionArea strong.green{ font-size:2.2rem; }
.solutionArea .service{margin-top:40px; }
.solutionArea .service >li{padding: 30px;border-radius:15px;background:#fff;}
.solutionArea .service >li + li{ margin-top:30px; }
.solutionArea .service h3{
	margin-bottom:20px;
	font-size:2.4rem;
	line-height: 4.4rem;
	vertical-align: middle;
	color: #333333;
	letter-spacing: 0.06em;
	position:relative;
}
.solutionArea .service h3:before{
	content: "";
	width: 20px;
	height: 20px;
	display: inline-block;
	margin-right: 10px;
	border-radius: 50%;
	background: #f39800;
}

@media print,screen and (max-width:1260px){
	.solutionArea > div{
		width:100%;
		padding:70px 20px;
	}
}

@media print,screen and (max-width:1000px){
	.solutionArea > div{
		display:block;
	}
	.solutionArea > div:after{ content:none; }
	.solutionArea > div > div{ width:100%; }
	.solutionArea h2{ display:flex; }
	.solutionArea h2:after{
		content:"";
		height:230px;
		width:133px;
		display:block;
		background:url(../../img/adviser-shine.png) bottom right / 100% no-repeat;
		margin-left:30px;
		margin-top:auto;
	}
}
@media print,screen and (max-width:900px){
	.solutionArea > div{ display:block; }
	.solutionArea > div > p,
	.solutionArea > div > div{ width:100%; }
	.solutionArea > div > p{ margin-left:0; margin-top:40px; }
	.solutionArea .service h3{
		font-size: 2.2rem;
		line-height: 3.5rem;
	}
}
@media print,screen and (max-width:700px){
	.solutionArea h2 br{ display:none; }
	.solutionArea h2 .wrap{ width:70%; }
	.solutionArea h2:after{
		height:25%;
		margin-left:10px;
		aspect-ratio:592 / 876;
	}
	.solutionArea h2 .small{ font-size:1.8rem; }
	.solutionArea h2 strong {font-size:2.6rem;}
}
/*===================================
たのシニアが選ばれている3つのPOINT
===================================*/
.pointArea{ width:1100px; margin:0 auto; padding:75px 0 100px; }
.pointArea .pointBlock{ display:flex; min-height:320px; border-radius:15px; overflow:hidden; }
.pointArea > section:nth-child(2) { background:#a3df8c; } /* 1つ目の .pointBlock */
.pointArea > section:nth-child(3) { background:#fcca74; } /* 2つ目の .pointBlock */
.pointArea > section:nth-child(4) { background:#9ae2f3; } /* 3つ目の .pointBlock */

.pointArea > section:nth-child(odd){
	flex-direction:row-reverse;
}
.pointArea .pointBlock + .pointBlock{ margin-top:50px; }
.pointArea .pointBlock > div{ width:50%; padding:60px; background:#f0f5f0; }
.pointArea .pointBlock > div p { font-weight:500; }
.pointArea .pointBlock h3{ margin-bottom:30px; font-size:3.8rem; position:relative; }
.pointArea .pointBlock h3:after{
	content:"";
	width:100%;
	height:4px;
	display:block;
	background:url(../img/dotted.png) repeat-x;
	margin-top:30px;
}
.pointArea .pointBlock h3 .number{
	margin-right:20px;
	color:#e46812;
	font-size:6rem;
	line-height:6rem;
	font-weight:600;
	font-family:'Montserrat';
	vertical-align:middle;
}
.pointArea .pointBlock h3 > span:not(.number){
	line-height:6rem;
	vertical-align:middle;
	color:#333333;
	letter-spacing:0.06em;
}
.pointArea .pointBlock > p{ padding:30px; width:50%; display:flex; align-items:center; justify-content:center; }

@media print,screen and (max-width:1140px){
	.pointArea{width:100%;padding:70px 20px;}
}
@media print,screen and (max-width:950px){
	.pointArea .pointBlock h3{ font-size:3.2rem; }
	.pointArea .pointBlock h3 .number{ font-size:5.2rem; }
	.pointArea .pointBlock > div{ padding:40px; }
}
@media print,screen and (max-width:750px){
	.pointArea .pointBlock h3{ font-size:2.8rem; }
	.pointArea .pointBlock h3 .number{ font-size:4.8rem; }
	.pointArea .pointBlock{ display:block; }
	.pointArea .pointBlock > div{ padding:30px; }
	.pointArea .pointBlock > div,
	.pointArea .pointBlock > p{ width:100%; }
	.pointArea .pointBlock h3:after { margin-top:20px; }
}
/*===================================
毎日新聞社×たのシニア生活彩り俱楽部
===================================*/

.companyArea{ display:flex; background:#f0f5f0; }
.companyArea .image > img{
	object-fit:cover;
	width:100%;
	height:100%;
}
.companyArea .image,
.companyArea > div{ width:50%; }
.companyArea > div{ padding:100px 80px 100px 60px; }
.companyArea > div > p{ line-height:4.2rem; font-weight:500;}

.companyArea h2 img,
.companyArea .banner img{ width:100%; }
.companyArea .banner{ margin-top:40px; }
.companyArea .btn { margin-right:0; }
.companyArea .title-img{ margin-bottom:20px; }

@media print,screen and (max-width:1260px){
	.companyArea > div {
		padding:70px 40px;
	}
	.companyArea .btn { width:100%; }
}
@media print,screen and (max-width:900px){
	.companyArea{ display:block; }
	.companyArea .image,
	.companyArea > div{ width:100%; }
	.companyArea > div {
		padding:40px 40px;
	}
}
@media print,screen and (max-width:700px){
	.companyArea > div {
		padding:40px 20px 70px;
	}
}
/*===================================
関連サイト
===================================*/
.connectionArea{width:1334px;margin:0 auto;padding:100px 0 0;}
.connectionArea p{ font-weight:500; }
.connectionArea h2{ text-align:center; }
.connectionArea .splide__slide{ border-radius:15px; overflow:hidden; background:#f0f5f0; }
.connectionArea .splide__slide a:hover{ text-decoration:none; }
.connectionArea .splide__slide a div{ padding:30px; }
.connectionArea .splide__slide a div h3{ margin-bottom:20px; font-size:2.2rem; line-height:3.6rem; letter-spacing:0.06em; transition:all .3s ease; }
.connectionArea .splide__slide a:hover div h3{ color:#158413; }

.connectionArea .splide-control{ margin-top:50px; }

.connectionArea .splide__arrows > button{
	width:70px;
	height:70px;
	background:url(../img/arrow2-green.svg) center / 10px 20px no-repeat #fff;
	top:190px;
	transition:all .3s ease;
}
.connectionArea .splide__arrows > button:hover{
	background:url(../img/arrow2-white.svg) center / 9px 17px no-repeat #158413;
	border:2px solid #158413;
}


@media print,screen and (max-width:1440px){
	.connectionArea{
		width:1200px;
	}
}
@media print,screen and (max-width:1320px){
	.connectionArea{
		width:100%;
		margin:0 auto;
		padding:70px 30px 0;
	}
}
@media print,screen and (max-width:900px){
	.connectionArea .splide__arrows > button{
		width:50px;
		height:50px;
		top:204px;
		border:1px solid #158413;
	}
}