@charset "utf-8";



/* revo 追記 */
.mb20{  margin-bottom: 20px;
}
.breadcrumbs{
	display: flex;gap:.5em; font-size: 1rem; color: hsl(0, 0%, 20%); letter-spacing: .05em; font-weight: 300;
}
.breadcrumbs a{
	 color: hsl(0, 0%, 0%); text-decoration: underline;
}
#header .h1 a{ }
#header .h1 a .txt_1{ white-space: nowrap; font-size: 1rem; position: static !important; display: block !important; transform: none !important; margin-top: 10px;
}
	@media screen and (max-width: 720px) {
		#container #header .inner .content.main .h1.h1_1{ padding-top: 6px;}
		#container #header .inner .content.main .h1.h1_1 span { top: 60%;}
	#header .h1 a .txt_1{  margin: 0 0 0 1.5em;
}	
		
}
.text h3 {
font-size: 1.8rem !important;
}
@media screen and (max-width: 768px) {
.text h3 {
font-size: 1.6rem !important;
}
}

/* 20241206追加 */
/* #container #article .aside.main * {
	min-height: 880px;
} */
.op-cover {
	display: flex;
	width: 100vw;
	height: 100vh;
	background-color: #fff;
	opacity: 1;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000002;
	justify-content: center;
	align-items: center;
	animation: opCover 1s ease forwards;
	animation-delay: 0.5s;
}

@keyframes opCover {
	0% {
		opacity: 1;
	}
	99% {
		opacity: 0;
	}
	100% {
		opacity: 0;
		display: none;
	}
}

.opening {
	display: flex;
	width: 100vw;
	height: 100vh;
	background-color: #000;
	opacity: 1;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000000;
	justify-content: center;
	align-items: center;
	animation: opAnime 7s ease forwards;
	animation-delay: 0.5s;
}
#container p.op-text {
	display: flex;
	width: fit-content;
	font-family: "Noto Serif JP", "Hiragino Mincho ProN", "游明朝", "游明朝体", YuMincho, "Yu Mincho", "Times New Roman", "メイリオ", Meiryo, serif;
	font-size: 21px;
	color: #fff;
	animation: opAnimeText 5.5s ease forwards;
	animation-delay: 1s;
	opacity: 0;
}
   
@keyframes opAnime {
	0% {
		opacity: 1;
	}
	70% {
		opacity: 1;
	}
	99% {
		opacity: 0;
	}
	100% {
		opacity: 0;
		display: none;
	}
}
@keyframes opAnimeText {
	0% {
		margin-top: 30px;
		opacity: 0;
	}
	30% {
		margin-top: 0;
	}
	40% {
		opacity: 1;
		margin-top: 0;
	}
	60% {
		opacity: 1;
		margin-top: 0;
	}
	100% {
		opacity: 0;
		margin-top: 0;
	}
}
.opening.hidden {
	display: none;
}

#container p.mv-text.sp {
	display: none;
}
/* #container p.mv-text {
	width: fit-content;
	font-family: "Noto Serif JP", "Hiragino Mincho ProN", "游明朝", "游明朝体", YuMincho, "Yu Mincho", "Times New Roman", "メイリオ", Meiryo, serif;
	display: flex;
	flex-direction: column;
	position: absolute;
	z-index: 100;
	margin: auto;
	top: 180px;
	left: 40px;
	color: #fff;
	font-size: 36px;
	white-space: nowrap;
	letter-spacing: 5px;
	line-height: 1.3;
	font-weight: 500;
	text-shadow: 1px 1px 5px #000;
}
#container p.mv-text span {
	width: fit-content;
	display: flex;
	padding: 3px 0 3px 10px;
	background-color: rgba(255, 255, 255, .2);
	margin-bottom: 20px;
} */

#container p.mv-text {
	width: fit-content;
	font-family: "Noto Serif JP", "Hiragino Mincho ProN", "游明朝", "游明朝体", YuMincho, "Yu Mincho", "Times New Roman", "メイリオ", Meiryo, serif;
	display: flex;
	flex-direction: column;
	position: absolute;
	z-index: 100;
	margin: auto;
	top: 140px;
	left: 50%;
	transform: translateX(-50%);
	color: #fff;
	font-size: 2vw;
	-ms-writing-mode: tb-rl;
  	writing-mode: vertical-rl;
	text-orientation: upright;
	white-space: nowrap;
	letter-spacing: 8px;
	line-height: 2.1;
	font-weight: 500;
	filter: drop-shadow(3px 3px 3px #000);
	text-shadow: 0 0 6px #000;
}
/* #container p.mv-text {
	width: fit-content;
	font-family: "Noto Serif JP", "Hiragino Mincho ProN", "游明朝", "游明朝体", YuMincho, "Yu Mincho", "Times New Roman", "メイリオ", Meiryo, serif;
	display: flex;
	flex-direction: column;
	position: absolute;
	z-index: 100;
	margin: auto;
	top: 120px;
	left: 55px;
	color: #fff;
	font-size:45px;
	white-space: nowrap;
	letter-spacing: 10px;
	line-height: 1.5;
	font-weight: 400;
	filter: drop-shadow(0px 0px 20px #000);
	text-shadow: 0 0 4px #000;
} */
#container #article .aside.main {
	position: relative;
}
/* .mv-bg {
	position: absolute;
	display: flex;
	width: 100%;
	height: 40%;
	background: linear-gradient(180deg, rgba(255, 255, 255, 1),65%, rgba(255, 255, 255, 0));
	top: 0;
	left: 0;
	z-index: 2;
} */
#container p.mv-text span:last-of-type {
	margin-top: 66px;
}

.mv-banner {
	display: flex;
	flex-direction: column;
	position: absolute;
	right: 10px;
	bottom: 15px;
	z-index: 101;
	width: 280px;
}
/* .mv-banner a:first-of-type {
	margin-bottom: 20px;
} */
@media (hover: hover) and (pointer: fine) {
	.mv-banner a:hover {
		opacity: 0.6;
	}
}

#container a.trace-banner {
	display: flex;
	margin: 40px auto;
	max-width: 400px;
	width: 100%;
}
.link-wrapper {
	width: 90%;
	display: flex;
	justify-content: space-between;
	max-width: 670px;
}
#container .aside.bnr_modelhouse .inner .content .link-wrapper a.link {
	margin: 0;
	margin-bottom: 10px;
}
/* #container .aside.bnr_modelhouse .inner .content .link-wrapper a.link::before, #container .aside.bnr_modelhouse .inner .content .link-wrapper a.link::after {
	color: hsl(0, 0%, 0%);
	border-color: hsl(0, 0%, 0%);
} */
#container .aside.bnr_modelhouse .inner .content .link-wrapper a.link:hover::before, #container .aside.bnr_modelhouse .inner .content .link-wrapper a.link:hover::after {
	animation-fill-mode: backwards;
    animation-name: motion-btn-link;
    animation-delay: 0s;
    animation-duration: 0.7s;
    animation-timing-function: ease-in-out;
}
@media screen and (max-width: 768px) {
	.link-wrapper {
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	#container .aside.bnr_modelhouse .inner .content .link-wrapper a.link:last-of-type {
		margin-top: 10px;
	}
}
@media (hover: hover) and (pointer: fine) {
	.trace-banner:hover {
		opacity: 0.6;
	}
}

#container #header .inner .content.main .h1.h1_1 span.img.page {
	opacity: 1;
}
#container #header .inner .content.main .h1.h1_1 span.img.top {
	opacity: 0;
}
@media screen and (min-width: 768px) {
	#container #header .inner .content.menu .menu_2 .nav ul > li a, #container #header .inner .content.menu .menu_2 .nav ul > li a:link, #container #header .inner .content.menu .menu_2 .nav ul > li .txt {
		color: hsl(0, 0%, 0%);
	}
	#container #header .inner .content.menu .menu_2 .nav ul > li:nth-child(6) a, #container #header .inner .content.menu .menu_2 .nav ul > li:nth-child(6) a:link {
		border: 1px solid hsl(0, 0%, 0%);
	}
	#container #header .inner .content.main #b_openmenu .icon, #container #header .inner .content.main #b_openmenu .icon:before, #container #header .inner .content.main #b_openmenu .icon:after, #container #header .inner .content.main #b_openmenu .icon:before, #container #header .inner .content.main #b_openmenu .icon:after {
		border-top: 2px solid hsl(0, 0%, 0%);
	}
	#container #header {
		background-color: rgba(255, 255, 255, .6);
	}
}
@media screen and (max-width: 960px) {
}
@media screen and (max-width: 720px) {
	#container p.mv-text.pc {
		display: none;
	}
	#container p.mv-text.sp {
		display: block;
		font-size: 23px;
		top: 90px;
	}
	#container p.mv-text span:last-of-type {
		margin-top: 60px;
	}
	.mv-banner {
		width: 220px;
		bottom: 10px;
	}
}

/* TOP大切なお金のこと */
#container #article .section.money-section {
	background-color: hsl(0, 0%, 95%);
	padding: 40px 0;
	font-family: "Noto Serif JP", "Hiragino Mincho ProN", "游明朝", "游明朝体", YuMincho, "Yu Mincho", "Times New Roman", "メイリオ", Meiryo, serif;
}
#container #article .section a.money-block {
	max-width: 1056px;
	width: 100%;
	margin: 0 auto;
	display: flex;
	min-height: 240px;
}
#container #article .section a.money-block .img {
	width: 45%;
	background: url(../inc/new-img/top-money.jpg) no-repeat center / cover;
}
#container #article .section a.money-block p {
	display: flex;
	flex-direction: column;
	width: 55%;
	height: auto;
	padding: 30px;
	font-size: 18px;
	color: #000;
	letter-spacing: 3px;
	line-height: 1.5;
	font-weight: 500;
	margin-top: 0 !important;
	box-sizing: border-box;
	position: relative;
}
#container #article .section a.money-block p:after {
	content: "";
	display: flex;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: #fff;
	z-index: -1;
}
#container #article .section a.money-block p span.big {
	font-size: 32px;
	margin-bottom: 20px;
}
@media screen and (max-width: 720px) {
	#container #article .section a.money-block {
		flex-direction: column;
		margin-bottom: 20px;
	}
	#container #article .section a.money-block .img {
		width: 100%;
		height: 210px;
	}
	#container #article .section a.money-block p {
		width: 100%;
		font-size: 1.6rem;
	}
	#container #article .section a.money-block p span.big {
		font-size: 2.4rem;
		margin-bottom: 15px;
	}
}