@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');

/* =====================
   ベースレイアウト
===================== */

/* PC時：760px外エリアの背景色 */
body {
	background: #d6eaf8;
}

/* 中央コンテンツ */
.content {
	width: 760px;
	margin: 0 auto;
	background: #fff;
	padding-bottom: 160px; /* 固定バナーの高さ分 */
}

/* SP */
@media screen and (max-width: 760px) {
	.content {
		width: 100%;
	}
}

/* =====================
   共通ユーティリティ
===================== */
.pcOnly { display: block; }
.spOnly { display: none; }

@media screen and (max-width: 760px) {
	.pcOnly { display: none; }
	.spOnly { display: block; }
}

/* =====================
   セクションごとのスタイル
   ▼ここから下にセクションを追加していく
===================== */

/* sec01: メインビジュアル */
.sec01 {}

.sec01__header img,
.sec01__mv img,
.sec01__price img {
	display: block;
	width: 100%;
}

/* sec02: 販売物件情報スライダー */
.sec02 {
	padding: 60px 0 50px;
	background: #f0f0f0 url(../img/sec02_bg.png) repeat left bottom;
	box-shadow: inset 0 20px 20px -10px rgba(0,0,0,0.12);
}

/* タイトル */
.sec02__title {
	text-align: center;
	margin-bottom: 36px;
}
.sec02__title img {
	width: 240px;
}

/* スライダー本体 */
.sec02__slider {
	overflow: hidden;
}
.sec02__slide img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}
.sec02__slide a:hover img {
	opacity: 0.85;
}

/* slickのgap代わり：各スライドに左右マージン */
.sec02__slider .slick-slide {
	margin: 0 10px; /* 左右10px = スライド間20px */
}
.sec02__slider .slick-list {
	margin: 0 -10px;
}

/* バナー */
.sec02__banner {
	text-align: center;
	margin-top: 36px;
}
.sec02__banner img {
	width: 545px;
	max-width: 90%;
}

/* sec03: こんな悩みはありませんか？ */
.sec03 {
	padding: 0;
	background: #f0f0f0 url(../img/sec02_bg.png) repeat left top;
}
.sec03__title {
	text-align: center;
	padding: 40px 0;
}
.sec03__title img {
	width: 638px;
	max-width: 84%;
}
.sec03__illust img {
	display: block;
	width: 100%;
}

/* sec04: 節税と手取りアップを両立 */
.sec04 {
	padding: 70px 0 70px;
	background: #fff;
	text-align: center;
}
.sec04__title img {
	width: 633px;
	max-width: 83%;
}
.sec04__balloon {
	margin-top: 30px;
}
.sec04__balloon img {
	width: 484px;
	max-width: 64%;
}
.sec04__text {
	margin-top: 30px;
	font-size: 22px;
	line-height: 2;
	color: #1a3f6f;
}
.sec04__text--orange {
	color: #f07800;
	font-weight: 800;
	font-size: 1.15em;
}
@media screen and (max-width: 760px) {
	.sec04__text {
		font-size: 3vw;
	}
}

/* sec05: ①生命保険代わりにも */
.sec05 {
	padding: 70px 0 70px;
	background: #f6f6f8;
}
.sec05__title {
	text-align: center;
	margin-bottom: 36px;
}
.sec05__title img {
	width: 505px;
	max-width: 66%; /* 505/760 */
}
.sec05__text {
	font-size: 22px;
	line-height: 1.8;
	color: #000;
	margin: 0 10.5% 40px;
}
.sec05__list {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0 10.5%;
}
.sec05__list li {
	background: #ffdc2a;
	color: #1a3f6f;
	font-size: 32px;
	font-weight: 800;
	text-align: center;
	padding: 22px 0;
	border-radius: 4px;
}
@media screen and (max-width: 760px) {
	.sec05__text {
		font-size: 3vw;
	}
	.sec05__list li {
		font-size: 5.2vw;
	}
}

/* sec06: ②比較すれば分かる優位性 */
.sec06 {
	padding: 70px 0 140px;
	background: #fff;
}
.sec06__title {
	text-align: center;
	margin-bottom: 36px;
}
.sec06__title img {
	width: 590px;
	max-width: 78%; /* 590/760 */
}
.sec06__inner {
	margin: 0 10.5%;
}
.sec06__comparison img {
	display: block;
	width: 100%;
	margin-bottom: 36px;
}
.sec06__lead {
	font-size: 34px;
	font-weight: 800;
	color: #1a3f6f;
	text-align: center;
	margin-bottom: 24px;
}
.sec06__list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin:0 5%;
}
.sec06__list li {
	font-size: 26px;
	line-height: 1.6;
	color: #1a3f6f;
	padding-left: 1.6em;
	position: relative;
}
.sec06__list li::before {
	content: "";
	display: block;
	width: 0.7em;
	height: 0.7em;
	border: 3px solid #f07800;
	border-radius: 50%;
	position: absolute;
	left: 0;
	top: 0.45em;
}
.sec06__list--orange {
	color: #f07800;
	font-weight: 800;
}
@media screen and (max-width: 760px) {
	.sec06 {
		padding: 70px 0 70px;
	}
	.sec06__lead {
		font-size: 4.5vw;
	}
	.sec06__list li {
		font-size: 3.4vw;
	}
}

/* sec07: 減税年金くんのメリット */
.sec07 img {
	display: block;
	width: 100%;
}

/* sec08: 約20年は節税、その後は年金収入へ */
.sec08 {
	padding: 70px 0 70px;
	background: #fff;
}
.sec08__title {
	text-align: center;
	margin: 0 10.5% 50px;
}
.sec08__title img {
	width: 100%;
}
.sec08__inner {
	margin: 0 10.5%;
}
.sec08__box {
	border: 1px solid #1967b2;
	padding: 24px 0;
	text-align: center;
	margin-bottom: 30px;
}
.sec08__box p {
	font-size: 28px;
	font-weight: 800;
	line-height: 1.7;
	color: #1969b2;
}
.sec08__text {
	font-size: 20px;
	line-height: 1.8;
	color: #000;
	margin-bottom: 50px;
}
.sec08__graph {
	margin: 0 0 50px;
}
.sec08__graph img {
	display: block;
	width: 100%;
}
.sec08__compare {
	margin-bottom: 50px;
}
.sec08__compare img {
	display: block;
	width: 100%;
}
.sec08__heritage {
	margin-bottom: 24px;
}
.sec08__heritage img {
	width: 100%;
}
@media screen and (max-width: 760px) {
	.sec08 {
		padding: 70px 0 20px;
	}
	.sec08__box p {
		font-size: 3.8vw;
	}
	.sec08__text {
		font-size: 3vw;
	}
}

/* sec09: TSONメゾネット賃貸の強みとは？ */
.sec09 {
	background: #0f3969;
}
.sec09__title img {
	display: block;
	width: 100%;
}
.sec09__inner {
	margin: 0 10.5%;
	padding-bottom: 70px;
}
.sec09__lead {
	margin: 40px 0 30px;
}
.sec09__lead img {
	width: 100%;
}
.sec09__text {
	font-size: 20px;
	line-height: 1.8;
	color: #fff;
	margin-bottom: 50px;
}

/* リストボックス */
.sec09__list {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.sec09__item {
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	background: #0f3969;
	padding-bottom: 30px;
	gap: 18px;
}
.sec09__item-left {
	width: 275px;
	flex-shrink: 0;
}
.sec09__item-head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
	border-bottom: 2px solid #ffdc2a;
}
.sec09__item-num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 50px;
	background: #ffdc2a;
	color: #1a3f6f;
	font-size: 22px;
	font-weight: 800;
	flex-shrink: 0;
}
.sec09__item-title {
	font-size: 30px;
	font-weight: 800;
	color: #fff;
}
.sec09__item-text {
	font-size: 18px;
	line-height: 1.7;
	color: #fff;
}
.sec09__item-right {
	width: 307px;
	flex-shrink: 0;
}
.sec09__item-right img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media screen and (max-width: 760px) {
	.sec09__text {
		font-size: 3vw;
	}
	.sec09__item {
		padding-bottom: 10px;
	}
	.sec09__item-left {
		width: 45%;
	}
	.sec09__item-right {
		width: 51%;
	}
	.sec09__item-title {
		font-size: 4vw;
	}
	.sec09__item-num {
		width: 4.7vw;
		height: 6.3vw;
		font-size: 2.9vw;
	}
	.sec09__item-text {
		font-size: 2.4vw;
	}
}

/* sec10: 安心＆万全の管理体制（ブルーボックス） */
.sec10 {
	padding: 70px 0 70px;
	background: #fff;
}
.sec10__inner {
	margin: 0 10.5%;
}
.sec10__title {
	font-size: 34px;
	font-weight: 800;
	line-height: 1.5;
	color: #266996;
	margin-bottom: 30px;
}
.sec10__text {
	font-size: 20px;
	line-height: 1.8;
	color: #000;
	margin-bottom: 0;
	padding-bottom: 30px;
}

/* 見出し＆テキスト＋写真エリア */
.sec10__feature {
	display: flex;
	gap: 20px;
	margin-top: 50px;
	margin-right: -30px;
	margin-bottom: 50px;
	align-items: flex-start;
	border-top: 1px solid #265fac;
	padding-top: 20px;
	position: relative;
}
.sec10__feature::after {
	content: "";
	position: absolute;
	top: -1px;
	right: 0;
	width: 100px; /* 写真幅＋gap分 */
	height: 1px;
	background: #fff;
	z-index: 0;
}
.sec10__feature-left {
	flex: 1;
}
.sec10__feature-heading {
	font-size: 22px;
	font-weight: 800;
	color: #266996;
	margin-bottom: 12px;
}
.sec10__feature-border {
	display: none;
}
.sec10__feature-text {
	font-size: 18px;
	line-height: 1.8;
	color: #000;
}
.sec10__feature-right {
	width: 230px;
	flex-shrink: 0;
	margin-top: -60px;
	position: relative;
	z-index: 1;
}
.sec10__feature-right img {
	display: block;
	width: 100%;
	border-radius: 50%;
}

/* 実績3カラム */
.sec10__stats {
	margin-bottom: 50px;
	text-align: center;
}
.sec10__stats img {
	width: 100%;
}

/* 写真＋ランキング表 */
.sec10__table {
	margin-bottom: 50px;
}
.sec10__table img {
	display: block;
	width: 100%;
}

/* ロゴ */
.sec10__logo {
	text-align: center;
}
.sec10__logo img {
	width: 300px;
	max-width: 78%; /* 300/760 */
}

@media screen and (max-width: 760px) {
	.sec10__title {
		font-size: 5.2vw;
	}
	.sec10__text {
		padding-bottom: 0;
		font-size: 3vw;
	}
	.sec10__feature-heading {
		font-size: 2.9vw;
	}
	.sec10__feature-text {
		font-size: 2.4vw;
	}
	.sec10__feature-right {
		width: 40%;
	}
}

/* sec11: ABOUT US */
.sec11 {
	background: #eeeef0;
}
.sec11__hero img {
	display: block;
	width: 100%;
}
.sec11__inner {
	margin: 0 10.5%;
	padding: 50px 0 70px;
}

/* タイトル画像 */
.sec11__title {
	margin-bottom: 36px;
}
.sec11__title img {
	width: 100%;
}

/* 見出し */
.sec11__heading {
	font-size: 30px;
	font-weight: 800;
	line-height: 1.5;
	color: #000;
	margin-bottom: 20px;
}

/* 通常テキスト */
.sec11__text {
	font-size: 20px;
	line-height: 1.8;
	color: #000;
	margin-bottom: 40px;
}

/* 写真2カラム */
.sec11__photos {
	display: flex;
	gap: 20px;
	margin-bottom: 50px;
	align-items: flex-start;
}
.sec11__photo-item:nth-child(1) {
	flex: 300;
}
.sec11__photo-item:nth-child(2) {
	flex: 250;
}
.sec11__photo-item img {
	display: block;
	width: 100%;
}
.sec11__caption {
	font-size: 14px;
	line-height: 1.6;
	color: #333;
	margin-top: 8px;
}

/* ロゴ＋数字エリア */
.sec11__funding img {
	width: 100%;
}

@media screen and (max-width: 760px) {
	.sec11__heading {
		font-size: 4.0vw;
	}
	.sec11__text {
		font-size: 3vw;
	}
	.sec11__photos {
		flex-direction: column;
	}
	.sec11__photo-item:nth-child(1),
	.sec11__photo-item:nth-child(2) {
		flex: 1;
		width: 100%;
	}
	.sec11__caption {
		font-size: 2.2vw;
	}
}

/* footer */
.footer {
	background: #fff;
	border-top: 1px solid #b3b3b3;
}

/* 固定フッターバナー */
.fixed-banner {
	position: fixed;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 760px;
	z-index: 100;
	box-shadow: 0 -25px 25px -5px rgba(0,0,0,0.25);
}
.fixed-banner a {
	display: block;
}
.fixed-banner img {
	display: block;
	width: 100%;
}
.fixed-banner .banner-default { display: block; }
.fixed-banner .banner-hover   { display: none; }

.fixed-banner a:hover .banner-default { display: none; }
.fixed-banner a:hover .banner-hover   { display: block; }
.fixed-banner a:hover img { opacity: 1; }
@media screen and (max-width: 760px) {
	.fixed-banner {
		width: 100%;
	}
}
.footer__inner {
	padding: 50px 10.5% 40px;
	text-align: center;
}
.footer__note {
	font-size: 16px;
	line-height: 1.8;
	color: #888;
	margin-bottom: 40px;
	text-align: left;
}
.footer__logo1 {
	margin-bottom: 30px;
}
.footer__logo1 img {
	width: 330px;
	max-width: 43%; /* 330/760 */
}
.footer__logo2 {
	margin-bottom: 30px;
}
.footer__logo2 img {
	width: 500px;
	max-width: 66%; /* 500/760 */
}
.footer__info {
	font-size: 18px;
	line-height: 1.8;
	color: #000;
}
.footer__copyright {
	background: #eef2f5;
	padding: 16px 0;
	text-align: center;
}
.footer__copyright p {
	font-size: 14px;
	color: #666;
}
@media screen and (max-width: 760px) {
	.footer__note {
		font-size: 2.4vw;
	}
	.footer__logo1 img {
		max-width: 58%;
	}
	.footer__logo2 img {
		max-width: 82%;
	}
	.footer__info {
		font-size: 2.4vw;
	}
	.footer__copyright p {
		font-size: 2vw;
	}
}