:root {
	--font-noto: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', sans-serif;
	--font-roboto: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;

	--main_blue: #00006E;
	--accent_blue: #0000BC;
	--light_blue: #1D73B5;
	--exlight_blue: #7EB0EA;
	--orange_red: #F04848;
	--orange_yellow: #FDBD28;
	--lemon_yellow: #F7E092;
	--red: #F04848;
	--pink: #FF8C9D;
	--green: #37AD86;
	--bg_white: #FCF7F0;
	--white: #fff;


	--loader-color: var(--main_blue);

}

article {
	position: relative;
}

.sp_show {
	display: none;
}

.pc_show {
	display: block;
}
.no-scroll{
	overflow: hidden !important;
}
@media(max-width:768px) {
	.sp_show {
		display: block;
	}

	.pc_show {
		display: none;
	}
}


.loader {
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--bg_white);
	transition: opacity 0.75s, visibility 0.75s;
	z-index: 5000;
}

.loader--hidden {
	opacity: 0;
	visibility: hidden;
}

.loader::after {
	content: "";
	width: 75px;
	height: 75px;
	border: 1px solid #ddd;
	border-top-color: var(--loader-color, #000);
	/* デフォルト色 */
	border-radius: 50%;
	animation: loading 0.75s ease infinite;
}

@keyframes loading {
	from {
		transform: rotate(0turn);
	}

	to {
		transform: rotate(1turn);
	}
}

html {
	font-family: var(--font-noto);
scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--orange_yellow);
	background-size: cover;
	height: 100vh;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
}

@media(min-width: 769px) {
	body {
		height: auto;
		overflow: auto;
	}
}

.vis_hide {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.pcbg {
	position: fixed;
	width: 100%;
	max-width: 1800px;
	height: 100vh;
	top: 0;
	left: 50%;
	background: url(../img/common/bg.png) top center/cover no-repeat;
	transform: translateX(-50%);
}

.layout {
	display: flex;
	width: 100vw;
	max-width: 1600px;
	flex-shrink: 1;
	position: relative;
}

.menu_wrapper {
	width: 50%;
	flex-shrink: 0;
	position: sticky;
	top: 20%;
	align-self: flex-start;
	z-index: 100;
	/* background: white; */
	margin: 0 auto;
	transition: all ease .3s;
}

.frame_outer {
	width: 50%;
	/* margin: 0 auto; */
	display: flex;
	justify-content: center;
}

@media (max-width: 1023px) {
	.frame_outer {
		width: 100%;
	}
}

.frame-wrapper {
	position: relative;
	display: inline-block;
}

.frame-wrapper::before {
	content: "";
	position: absolute;
	top: -10px;
	left: -10px;
	right: -10px;
	bottom: -10px;
	border-radius: 40px;
	border: 10px solid var(--main_blue);
	pointer-events: none;
	z-index: 0;
}

.frame {
	width: 512px;
	max-width: 100%;
	/* height: 90vh; */
	border-radius: 30px;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	position: relative;
	background: var(--bg_white);
}

.frame-wrapper .eye-wrapper.frame_eye {
	position: absolute;
	left: 50%;
	top: -6px;
	transform: translate(-50%, -50%);
	z-index: 100;
}

.contents_wrapper {
	flex: 1;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}
/*index用スタイル*/
#index .round-wrap {
	position: relative;
	width: 100%;
	aspect-ratio: 390 / 334;
	/* ← 分数でもOK */
	overflow: hidden;
}

#index .blob-wrapper {
	position: absolute;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

#index .round {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 0;
	border-radius: 50%;
	background-color: rgba(0, 0, 0, 0.2);
	will-change: border-radius, transform;
	transform: translateZ(0);
	transition: border-radius 0.3s ease;
}

#index .blob-content {
	position: relative;
	width: 100%;
	height: 100%;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	pointer-events: none;


}

#index .blob-content img {
	width: 50%;
	height: auto;
	object-fit: contain;
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

#index .sect1 .blob-content p {
	margin-top: 6px;
	font-family: 'Noto Sans JP';
	font-style: normal;
	font-weight: 700;
	font-size: 18.3301px;
	line-height: 27px;
	/* または150% */
	display: flex;
	align-items: center;
	text-align: center;

	color: #FFFFFF;
}

#index .header-logo img {
	margin: 0px -10px;
	padding: 0;
	width: 138px;
}

#index .header-logo a {
	text-decoration: none;
	font-family: var(--font-noto);
	font-style: normal;
	font-weight: 700;
	font-size: 16px;
	line-height: 15px;
	color: var(--main_blue);
	margin: 0 16px;
	padding: 0;
}

#index .sect1 {
	margin-top: 122px;
}

#index .key_title img {
	width: 63%;
	margin: 0 36px;
}

#index .sect1 p {
	font-family: var(--font-noto);
	font-style: normal;
	font-weight: 700;
	font-size: 16px;
	line-height: 24px;
	color: var(--main_blue);
	margin: 19px 10%;
}

#index .vertical_wrap {
	position: relative;
	width: 100%;
	height: 189px;
	background: url(../img/top/bg_cloud1.png) 0px 55px/cover no-repeat;
}

#index .vertical {
	position: absolute;
	width: 3rem;
	height: 15rem;
	top: -38px;
	left: 50%;
	writing-mode: vertical-rl;
	text-orientation: upright;
	font-family: var(--font-noto);
	font-style: normal;
	font-weight: 700;
	font-size: 20px;
	line-height: 33px;
	color: var(--main_blue);
	letter-spacing: 5px;
}

#index .link_moments {
	display: flex;
	justify-content: center;
	background: var(--white);
	padding-bottom: 156px;
}

#index .link_moments .btn_oval_wb {
	width: 80%;
}

#index .contents_link::before {
	content: "";
	background: url(../img/top/bg_cloud2.png) top center /cover no-repeat;
	height: 112px;
	width: 100%;
	position: absolute;
	top: -112px;
	left: 0;
}


#index .contents_link {
	position: relative;
	background: var(--lemon_yellow);
	padding: 0 9% 0;
}

#index .contents_link h2 {
	font-family: var(--font-noto);
	font-style: normal;
	font-weight: 700;
	font-size: 24px;
	line-height: 32px;
	text-align: center;
	font-feature-settings: 'palt' on;
	color: var(--main_blue);
}

#index .contents_link p {
	font-family: var(--font-noto);
	font-style: normal;
	font-weight: 700;
	font-size: 16px;
	line-height: 24px;
	text-align: center;
	color: var(--main_blue);
	margin: 23px 10px;
}

#index .link_items {
	display: flex;
	justify-content: center;
	flex-direction: column;
	gap: 33px;
}

#index .link_items a:hover {
	filter: brightness(1.1);
	/* 明るく */
	cursor: pointer;
}

#index .more h2 {
	font-family: var(--font-noto);
	font-style: normal;
	font-weight: 700;
	font-size: 24px;
	line-height: 32px;
	text-align: center;
	font-feature-settings: 'palt' on;
	color: var(--main_blue);
	position: relative;
	padding: 89px 0 0;
}

#index .more h2::before {
	content: "";
	background: url(../img/top/bg_cloud3.png) center bottom / cover no-repeat;
	height: 93px;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

#index .more_items {
	padding: 28px 9% 0;
	text-align: center;
}

#index .more_items p,
.more_items li {
	font-family: var(--font-noto);
	font-style: normal;
	font-weight: 700;
	font-size: 16px;
	line-height: 24px;
	color: var(--main_blue);
}

#index .more_items ul {
	padding: 11px 24px 15px;
	margin: 0;
	display: inline-block;
	text-align: left;
}

#index .more_links {
	margin: 64px 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 39px;
}
/*index用ここまで*/
main {
	width: 100%;
}

header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	position: relative;
	height: 80px;
	background: none;
	position: absolute;
	width: 100%;
	padding: 0;
}

.header-logo a {
	display: block;
}

.header-logo img {
	width: 38%;
	height: auto;
	margin: 18px;
	z-index: 10;
	position: relative;
}

.header-nav {
	position: fixed;
	top: 0;
	right: 0;
	width: 270px;
	height: 100vh;
	/* background: #fff; */
	z-index: 100;
	/* box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1); */
	/* display: none をアニメーション可能なプロパティに変更 */
	transform: translateX(100%);
	visibility: hidden;
	transition: transform 0.4s ease, visibility 0.4s;
}

.header-nav a {
	text-decoration: none;
	color: var(--main_blue);
	font-weight: bold;
}

.button_wrapper {
	position: absolute;
	z-index: 1020;
	right: 0;
}

.hamburger-button {
	display: block;
	background: transparent;
	border: none;
	cursor: pointer;
	z-index: 101;
	position: relative;
	margin: 30px 13px;
}

.hamburger-button span {
	display: block;
	width: 21px;
	height: 2px;
	margin: 6px auto;
	background: var(--main_blue);
	transition: all 0.3s ease-in-out;
}

/* ハンバーガーボタン is-active */
.hamburger-button.is-active span:nth-of-type(1) {
	transform: translateY(8px) rotate(45deg);
}

.hamburger-button.is-active span:nth-of-type(2) {
	opacity: 0;
}

.hamburger-button.is-active span:nth-of-type(3) {
	transform: translateY(-8px) rotate(-45deg);
}

/* nav展開時 */
.header-nav.is-active {
	transform: translate(0px, -2px);
	visibility: visible;
}
.header-nav.is-active.scrollable{
	height: 100%;
	overflow-y: scroll;

}

.header-nav ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.header-nav ul li {
	flex: 1;
}

.nav_btn {
	position: relative;
	border: var(--main_blue) solid 3px;
	border-radius: 18px;
	text-align: center;
	z-index: 1;
}

.nav_howtobtn:hover,
.nav_btn:hover {
	filter: brightness(1.1);
	cursor: pointer;
}

footer {
	position: relative;
	text-align: center;
	padding: 1rem;
	background: var(--main_blue);
	color: var(--white);
	flex-shrink: 0;
}

footer>div {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 20%;
	margin: 8px 86px;
}

footer>div>a {
	width: 20%;
}

footer>p {
	font-style: normal;
	font-weight: 400;
	font-size: 9px;
	line-height: 15px;
	text-align: center;
	margin: 15px 0;
}

/*ナビゲーション切り替えパート*/



/* PC表示で nav 固定表示 */
@media (min-width: 1024px) {
	.header-nav {
		position: relative;
		margin: 0 auto;
		width: 478px;
		height: 497px;
		display: flex;
		flex-direction: column;
		justify-content: start;
		z-index: 100;
		transform: none;
		visibility: visible;
		transition: none;
		padding: 0;
	}

	.nav_logo {
		margin: 8px 0;
	}

	.nav_moments {
		margin: 30px 24px 14px;
	}

	.nav_moments .nav_btn .nav_pc_show {
		padding: 16px 62px;
	}


	.header-nav ul {
		flex-direction: row;
		gap: 7px;
		margin: 0 23px;
	}

	.header-nav ul li .nav_pc_show .navli_pc_01 {
		padding: 19px 22px;
	}

	.header-nav ul li .nav_pc_show .navli_pc_02 {
		padding: 19px 10px;
	}

	.header-nav ul li .nav_pc_show .navli_pc_03 {
		padding: 19px 6px;
	}

	.nav_subitem {
		width: 433px;
		display: flex;
		flex-direction: column;
		gap: 7px;
		margin: 10px auto;
	}

	.nav_subitem .nav_flow {
		display: flex;
		padding: 18px 117px;
	}

	.nav_subitem .nav_toha {
		display: flex;
		padding: 17px 27px;
	}

	.frame-wrapper {
		/* margin-left: 270px; */
		margin: 12% auto;
		background: white;
	}

	.hamburger-button {
		display: none;
	}
}

.nav_sp_show {
	display: none;
}

.nav_pc_show {
	display: block;
}

@media(max-width:1023px) {
	.nav_sp_show {
		display: block;
	}

	.nav_pc_show {
		display: none;
	}
}

/*中間*/
@media (max-width: 1023px) {
	.pc_header {
		display: none;
	}

	.layout {
		flex-direction: column;
	}

	.menu_wrapper {
		position: fixed;
		margin: 0 auto;
		transform: translateX(calc(-50% - -2px));
		left: 50%;
		width: 512px;
		height: 1px;
		overflow: hidden;
		top: 106px;
		/* border-radius: 30px; */
	}

	header {
		width: 50%;
		z-index: 200;
	}

	.header.fixed {
		position: fixed;
		top: 0;
	}

	.header-nav {
		width: 286px;
		height: 652px;
		max-width: 320px;
		border-radius: 0 0 0 30px;
		border: solid 2px var(--main_blue);
		background: var(--orange_yellow);
		padding: 0 20px;
	}

	.hamburger-button {
		display: block;
		background: transparent;
		border: none;
		cursor: pointer;
		z-index: 101;
		position: relative;
		margin: 25px 25px 0 0;
	}

	.header-nav .nav_logo {
		height: 100px;
	}

	.header-nav>div {
		width: 100%;
	}

	.header-nav a {
		display: block;
	}

	.header-nav .nav_logo {
		height: 100px;
	}

	.header-nav .nav_logo a {
		display: flex;
		justify-content: flex-start;
	}

	.header-nav .nav_logo img {
		width: 90px;
		margin: 23px 17px;
	}

	.nav_moments {
		margin: 32px auto 27px;
		position: relative;
	}

.nav_moments .eye-wrapper {
	position: absolute;
	left: 50%;
	top: -15px;
	transform: translateX(-50%);
	z-index: 10;
}

	.nav_btn {
		border: solid 2px var(--main_blue);
		border-radius: 18px;
		text-align: center;
		margin: 0 auto;
		overflow: hidden;
	}

	.nav_btn a {
		color: var(--white);
		display: block;
		padding: 10px 0;
		text-align: center;
		margin: 0 auto;
		text-decoration: none;
	}

	.nav_howto {
		width: 243px;
		margin: 0 auto;
		text-align: center;
		background: var(--lemon_yellow);
		border: solid 2px var(--main_blue);
		border-radius: 18px;
		padding: 11px 0 13px;
	}

	.nav_howto p {
		font-family: var(--font-noto);
		font-style: normal;
		font-weight: 700;
		font-size: 12px;
		line-height: 20px;
		margin: 0;
	}

	.nav_howto ul {
		width: 85%;
		margin: 13px auto;
	}

	.nav_howto ul li {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		border: solid 2px var(--main_blue);
		border-radius: 10px;
		color: var(--white);
		overflow: hidden;
		margin: -2px 0;
	}

	.nav_howto ul li>div {
		width: 100%;
		background-color: var(--white);
	}

	.nav_howto ul li>div a {
		color: var(--white);
		display: block;
		padding: 4px 0;
	}

	.nav_howto ul li>div:nth-of-type(2) {
		height: 22px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.nav_howto ul li img {
		height: 20px;
		width: auto;
	}

	.nav_subitem {
		margin: 14px auto;
		padding: 0px 6px;
	}

	.nav_subitem>div:nth-child(1) {
		margin-bottom: 19px;
	}

	.nav_subitem .nav_btn {
		height: 42px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.nav_subitem .nav_btn a.txt_blue {
		color: var(--main_blue);

	}


	.frame-wrapper {
		position: relative;
		display: inline-block;
		width: 512px;
		margin: 108px auto;
		background: white;
	}


	.frame {
		width: 512px;
		max-width: 100%;
		/* height: 90vh; */
		border-radius: 30px;
		box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
		display: flex;
		flex-direction: column;
		overflow: hidden;
		position: relative;
		background: var(--bg_white);
	}
}

@media (min-width: 769px) and (max-width: 1023px) {

.menu_wrapper.is-active {
		width: 512px;
		height: 652px;
		border-radius: 0 30px;
	}

	.button_wrapper {
		top: 107px;
		right: 50vw;
		transform: translateX(240px);
	}
}

/*スマホ表示時*/
@media screen and (max-width: 768px) {
	body {
		justify-content: center;
		padding-right: 0;
	}



	.layout {
		flex-direction: column;
	}

	.menu_wrapper {
		position: static;
		width: 100%;
		height: auto;
		transform: none;
		z-index: 1000;
	}

	.frame-wrapper {
		position: relative;
		display: inline-block;
		width: 100%;
		margin: auto;
	}
.frame-wrapper .eye-wrapper.frame_eye {
display: none;
}
	.frame-wrapper::before {
		display: none;
	}

.frame {
	width: 100vw;
	height: 100vh;
	border-radius: 0;
	box-shadow: none;
	position: relative;
	overflow: auto;
	scroll-behavior: smooth;
}

	header {
		width: 60%;
		/*ヘッダ追従をやめるぞ*/
		/* position: fixed; */
		position: relative;

	}

	.header-nav {
		width: 286px;
		height: 652px;
		max-width: 320px;
		border-radius: 0 0 0 30px;
		border: solid 2px var(--main_blue);
		background: var(--orange_yellow);
		padding: 0 20px;
		z-index: 500;
	}



	.contents_wrapper {
		/*ヘッダ追従をやめるぞ*/
		/* height: calc(100vh - 70px - 60px); */
		/* header + footer 高さ分を引いた例 */
		overflow: unset;
	}
}

.pc_header {
	position: fixed;
	top: 0;
	width: 395px;
	left: 0;
	z-index: 500;
	background: var(--main_blue);
	border-radius: 0 0 28px 0;
	height: 96px;
}

.pc_header a {
	text-decoration: none;
	color: var(--white);
	font-family: var(--font-noto);
	font-size: 27px;
	display: flex;
	flex-direction: row;
	width: 100%;
	height: 93px;
	justify-content: center;
	align-items: center;
	font-weight: 600;
}

.pc_header a img {
	margin: 4px 6px 0 0;
	width: 133px;
}

@media screen and (max-width: 768px) {
	.pc_header {
		display: none;
	}
}

.eye-wrapper {
	display: inline-block;
}


.btn_oval_wb {
	border-radius: 50px;
	width: 100%;
	height: 100px;
	border: 4px solid #00006E;
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
	display: flex;
	position: relative;
	justify-content: center;
	align-items: center;
}

.btn_oval_wb:hover {
	opacity: 0.8;
	cursor: pointer;
}

.btn_oval_wb a {
		display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 100%;
			text-decoration: none;
			font-family: var(--font-noto);
			font-weight: 900;
			font-size: 16px;
			color: var(--white);
			text-align: center;
}


.btn_oval_wb.fb_blue a {
	color: var(--main_blue);
}

.btn_oval_nb {
	border-radius: 30px;
	width: 100%;
	height: 84.12px;
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
	display: flex;
	position: relative;
	justify-content: center;
	align-items: center;
}

.btn_oval_nb::after {
	content: "";
	background: url(../img/common/arrow_bluecircle.png) center/cover no-repeat;
	width: 20px;
	height: 20px;
	position: absolute;
	right: 15px;
}

.btn_oval_nb:hover {
	opacity: 0.8;
	cursor: pointer;
}

.btn_oval_nb a {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	text-decoration: none;
	font-family: var(--font-noto);
	font-weight: 900;
	font-size: 23px;
	color: var(--white);
}

.btn_oval_wb .eye-wrapper {
	position: absolute;
	top: -20px;
	left: 50%;
	transform: translateX(-50%);
}

.btn_oval_wb .eye-wrapper.small svg {
	width: 50px;
}

.bg_green {
	background: var(--green);
}

.bg_orange {
	background: var(--red);
}

.bg_orange_yellow {
	background: var(--orange_yellow);
}

.bg_pink {
	background: var(--pink);
}

.bg_yellow {
	background: var(--orange_yellow);
}

.bg_blue {
	background: var(--main_blue);
}

.bg_accent_blue {
	background: var(--accent_blue);
}

.bg_light_blue {
	background: var(--light_blue);
}

.bg_exlight_blue {
	background: var(--exlight_blue);
}

.bg_bgwhite {
	background: var(--bg_white);

}



/*記事類*/


.articles section {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.articles section>div {
	width: 100%;
}

.articles .title {
	padding-top: 80px;
	color: var(--white);
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
	border-radius: 0px 0px 40px 40px;
	position: relative;
	z-index: 9;
	width: 100%;
}
@media (max-width:768px){
			.articles .title {
padding-top: 404px;
	height: 520px;
	margin-top: -386px;
				}
}
.articles .title p {
	font-family: var(--font-noto);
	font-style: normal;
	font-weight: 700;
	font-size: 16px;
	line-height: 1;
	text-align: center;
	margin-bottom: 5px;
	padding: 0;
}

.articles .title_img {
	margin: 0 auto 32px;
	width: 71%;
	max-width: 350px;
}

.articles .title .eye-wrapper {
	width: 30px;
	position: absolute;
	bottom: -9px;
	left: 50%;
	transform: translateX(-50%);
}

.articles .article_wrapper {
	padding: 25px 0 40px;
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
	border-radius: 0px 0px 40px 40px;
	position: relative;
	background: var(--bg_white);
	color: var(--main_blue);
}

.articles article {
	background: var(--white);
	border-radius: 20px;
	margin: 20px 30px 9px;
	padding: 0;
	overflow: hidden;
}

.articles h2 {
	text-align: center;
	font-style: normal;
	font-weight: 700;
	font-size: 32px;
	line-height: 1.25em;
}

.articles h3 {
	text-align: center;
	font-style: normal;
	font-weight: 700;
	line-height: 1.25em;
	font-weight: 700;
	font-size: 24px;
	font-feature-settings: 'palt' on;
	color: var(--white);
	margin: 0;
	padding: 17px 0;
}

.articles .others {
	margin: -50px 0;
	background-color: var(--lemon_yellow);
	margin: -50px 0;
	padding: 99px 0 135px;
	color: var(--main_blue);
}

.articles .others p.others_intro {

	font-style: normal;
	font-weight: 700;
	font-size: 24px;
	line-height: 32px;
	text-align: center;
	font-feature-settings: 'palt' on;

}

.articles .others img {
	margin: 0 auto;
	padding: 34px 50px;
}

.articles .others p {
	font-style: normal;
	font-weight: 700;
	font-size: 16px;
	line-height: 24px;
	padding: 3px 41px;
}

.articles .article_green article {
	border: 3px solid var(--green);
}

.articles .article_green h3 {
	background: var(--green);
}

.articles .article_pink article {
	border: 3px solid var(--pink);
}

.articles .article_pink h3 {
	background: var(--pink);
}

.articles .article_blue article {
	border: 3px solid var(--exlight_blue);
}

.articles .article_blue h3 {
	background: var(--exlight_blue);
}

.article_wrapper article img {
	padding: 20px;
}

.article_wrapper article p {
	padding: 0 20px 25px;
}

.articles .youtube_wrapper {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	padding: 0;
	margin: 36px;
}

.articles .youtube_wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.articles .others .btn_oval_wb {
	margin: 0 35px;
}

.articles .outro {
	background: var(--white);
	color: var(--main_blue);
	padding: 44px 0 50px;
	text-align: center;
}

.articles .outro h5 {
	font-style: normal;
	font-weight: 700;
	font-size: 24px;
	line-height: 32px;
	text-align: center;
	font-feature-settings: 'palt' on;

}

.articles .outro_btns {
	display: flex;
	flex-wrap: wrap;
	margin: 28px 30px;
	gap: 2%;
}

.articles .outro_btns>div {
	width: 49%;
}

.articles .outro p.kochiramo::before {
	content: "";

}

.articles .outro .btn_oval_wb {
	width: 82%;
	margin: 15px auto;
}

.flow .title_call {
	position: relative;
}

.flow .title {
	background: #FCF7F0;
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
	border-radius: 0px 0px 40px 40px;
	position: relative;
	z-index: 9;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.flow .flow_move {
	background: #EDF4FA;
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
	border-radius: 0px 0px 40px 40px;
	position: relative;
	z-index: 8;
	padding: 62px 10%;
}

.flow .flow_need {
	background: #FCEDED;
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
	border-radius: 0px 0px 40px 40px;
	position: relative;
	z-index: 7;
	padding: 62px 10%;
}

.flow .flow_upkeep {
	background: #FFFCF3;
	border-radius: 0px;
	position: relative;
	z-index: 6;
	padding: 62px 10%;
}

.flow .title h1 {
	font-family: var(--font-noto);
	font-style: normal;
	font-weight: 700;
	font-size: 24px;
	line-height: 32px;
	text-align: center;
	font-feature-settings: 'palt' on;
	color: var(--main_blue);
	margin: 90px auto 22px;
	width: 82%;
	height: 89px;
	background: white;
	border: 2px solid var(--accent_blue);
	border-radius: 20px;
	padding: 11px 0;
	position: relative;
}

@media(max-width:768px) {
.flow .title h1 {
		margin: 24px auto 22px;
	}
}
.flow .title h1::after {
	content: "";
	position: absolute;
	background: url(../img/common/fukidasi.png) center top /cover no-repeat;
	width: 15px;
	height: 25px;
	bottom: -16px;
	right: 81px;
}

.flow .title .eye-wrapper {
	position: absolute;
	bottom: 13px;
	right: 14%;
}

.flow .title .title_img {
	margin: 15px auto;
	padding: 0 9%;
}

.flow .title .btn_flow_wrap {
	display: flex;
	justify-content: center;
	flex-direction: column;
	gap: 19px;
	margin: 10px 0 48px;
}

.flow .title .btn_flow_wrap a {
	font-family: var(--font-noto);
	font-style: normal;
	font-weight: 700;
	font-size: 23.4px;
	line-height: 19px;
	width: 80%;
	padding: 26px 0;
	text-decoration: none;
	color: var(--white);
	text-align: center;
	margin: 0 auto;
	border-radius: 32px;
	filter: drop-shadow(0px 2.34px 2.34px rgba(0, 0, 0, 0.25));
}

.flow .title .btn_flow_wrap a:hover {
	opacity: 0.8;
	cursor: pointer;
}

.flow h2 {
	font-family: var(--font-noto);
	font-style: normal;
	font-weight: 700;
	font-size: 24px;
	line-height: 32px;
	font-feature-settings: 'palt' on;
	color: var(--light_blue);
}

.flow .flow_move h2 {
	color: var(--light_blue);
}

.flow .flow_need h2 {
	color: var(--orange_red);
}

.flow .flow_upkeep h2 {
	color: var(--orange_yellow);
}

.flow article {
	margin-top: 34px;
}

.flow article h3 {
	font-family: var(--font-noto);
	font-style: normal;
	font-weight: 700;
	font-size: 20px;
	line-height: 24px;
	text-align: center;
	color: var(--white);
	background-color: #000;
	padding: 7px 0;
}

.flow .flow_move article h3 {
	background-color: var(--light_blue);
}

.flow .flow_need article h3 {
	background-color: var(--orange_red);
}

.flow .flow_upkeep article h3 {
	background-color: var(--orange_yellow);
}

.flow article p,
.flow article li {
	font-family: var(--font-noto);
	font-style: normal;
	font-weight: 700;
	font-size: 16px;
	line-height: 24px;
	color: #000000;
	margin: 12px 0 0;
}

.flow article ul {
	margin: 6px;
	padding: 0 5%;
}

.flow article li {
	margin: 0;
}

.flow .lead {
	display: flex;
	gap: 8px;
	align-items: stretch;
	margin: 12px 0 32px;
}

.flow .lead-text {
	flex: 0 0 70%;
	font-family: var(--font-noto);
	font-style: normal;
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
}

.flow .lead-image {
	flex: 0 0 27%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.flow .lead-image img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.flow_btn_wrap {
	margin: 35px 8%;
}

a.flow_btn {
	display: block;
	text-decoration: none;
	text-align: center;
	font-family: var(--font-noto);
	font-style: normal;
	font-weight: 400;
	font-size: 15px;
	line-height: 24px;
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
	border-radius: 50px;
	padding: 11px 0;
	color: #FFFFFF;
	background: #7EB0EA;
	border: 2px solid #00006E;
}

a.flow_btn:hover {
	opacity: 0.8;
	cursor: pointer;
}

.flow_move a.flow_btn {
	color: white;
	background: var(--exlight_blue);
}

.flow_need a.flow_btn {
	color: white;
	background: var(--orange_red);
}

.flow_upkeep a.flow_btn {
	color: #111010;
	background: var(--lemon_yellow);
	border: var(--orange_yellow) 2px solid;
}

.cars{
	background-color: #EDF4FA;
}
.cars .title_call {
	position: relative;
}

.cars .title {
	background: #FCF7F0;
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
	border-radius: 0px 0px 40px 40px;
	position: relative;
	z-index: 9;
	display: flex;
	flex-direction: column;
	justify-content: center;
	color: var(--main_blue);

}

.cars .title h1 {
	font-family: var(--font-noto);
	font-style: normal;
	font-weight: 700;
	font-size: 24px;
	line-height: 32px;
	text-align: center;
	font-feature-settings: 'palt' on;
	color: var(--main_blue);
	margin: 90px auto 22px;
	width: 82%;
	height: 89px;
	background: white;
	border: 2px solid var(--accent_blue);
	border-radius: 20px;
	padding: 11px 0;
	position: relative;
}
@media(max-width:768px){
.cars .title h1 {
		margin: 24px auto 22px;
	}
}
.cars .title h1::after {
	content: "";
	position: absolute;
	background: url(../img/common/fukidasi.png) center top /cover no-repeat;
	width: 15px;
	height: 25px;
	bottom: -16px;
	right: 81px;
}

.cars .title .eye-wrapper {
	position: absolute;
	bottom: 13px;
	right: 14%;
}
.cars .title .title_img {
	margin: 15px auto;
	padding: 0 13%;
}
.cars .title .lead-text {
	padding: 0 9%;
	margin: 0 0 50px;
}
.cars .title .lead-text p{
	font-family: var(--font-noto);
	font-style: normal;
	font-weight: 700;
	font-size: 16px;
	line-height: 24px;

}
.cars .title .lead-text p:first-child {
	margin-bottom: 28px;
}
.cars .title .lead-text p.caption {
	margin-top: 1px;
	font-family: var(--font-noto);
	font-style: normal;
	font-weight: 400;
	font-size: 12px;
	line-height: 20px;
	color: #00006E;
}
.cars .question {
	background: #00006E;
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
	border-radius: 0px 20px 20px 0px;
	padding: 9px 10px 19px 37px;
	margin: 64px 44px 29px 0;
}
.cars .question h2{

		font-family: var(--font-noto);
		font-style: normal;
		font-weight: 700;
		font-size: 22px;
		line-height: 25px;

		color: #FDBD28;
}
.cars .question h2 span {
	font-family: var(--font-noto);
	font-style: normal;
	font-weight: 700;
	font-size: 16px;
	line-height: 29px;
	color: #FFFFFF;
}
.cars .answer {
	background: #F7E092;
	border-radius: 20px 0px 0px 20px;
	font-family: var(--font-noto);
	font-style: normal;
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	color: #00006E;
	margin: 0 0 0 39px;
	padding: 28px;
}
.ranking {
	border-collapse: separate;
	border-spacing: 2px 2px;
	width: 100%;
}
.cars .answer .ranking td {
	height: 59px;
}
.cars .answer .ranking td:first-child {
	background-color: var(--orange_yellow);
	border-radius: 10px 0px 0px 10px;
	color: white;
	text-align: center;
	font-family: var(--font-noto);
	font-style: normal;
	font-weight: 700;
	font-size: 24px;
	line-height: 32px;
	width: 30px;
	font-feature-settings: 'palt' on;
}
.cars .answer .ranking td:nth-child(2) {
	background-color: white;
	font-family: var(--font-noto);
	font-style: normal;
	font-weight: 700;
	font-size: 16px;
	line-height: 20px;
	color: #00006E;
	padding: 0 10px;
}
.cars .answer .ranking td:nth-child(3) {
	background-color: var(--orange_yellow);
	color: white;
	font-family: var(--font-noto);
	font-style: normal;
	font-weight: 700;
	font-size: 16px;
	line-height: 24px;
	text-align: center;
	width: 48px;
}
.cars .answer .ranking td.rank1{
	background-color: #F04848;
}
.cars .answer .ranking td.rank2{
	background-color: #1D73B5;
}
.cars .answer .ranking td.rank3{
	background-color: #37AD86;
}
.cars .answer .summary {
	margin: 20px 0;
}
.cars .osusume {
	font-family: var(--font-noto);
	font-style: normal;
	font-weight: 700;
	font-size: 16px;
	line-height: 24px;
	color: #00006E;
	margin: 39px;
}

.cars .outro {
	background: white;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 30px;
	padding-bottom: 53px;
}
.cars .outro p{
	text-align: center;
	margin-top: 30px;
		/* txt_medium_B */
		font-family: var(--font-noto);
		font-style: normal;
		font-weight: 700;
		font-size: 16px;
		line-height: 24px;
		
		color: #00006E;
}
.cars .outro .btn_oval_wb{
	max-width: 320px;
	margin: 0 auto;
;
}


.moments {
	background-color: #FCF7F0;
}

.moments .title_call {
	position: relative;
}

.moments .title {
	background: #FDBD28;
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
	border-radius: 0px 0px 40px 40px;
	position: relative;
	z-index: 9;
	display: flex;
	flex-direction: column;
	justify-content: center;
	color: var(--main_blue);
	margin: 0 0 40px;
}
@media(max-width:768px){
.moments .title {
		margin-top: -80px;
		padding-top: 80px;
	}
}


.moments .title h1 {
	font-family: var(--font-noto);
	font-style: normal;
	font-weight: 700;
	font-size: 24px;
	line-height: 32px;
	text-align: center;
	font-feature-settings: 'palt' on;
	color: var(--main_blue);
	margin: 90px auto 22px;
	width: 82%;
	height: 89px;
	background: white;
	border: 2px solid var(--accent_blue);
	border-radius: 20px;
	padding: 11px 0;
	position: relative;
}

@media(max-width:768px) {
	.moments .title h1 {
		margin: 24px auto 22px;
	}
}

.moments .title h1::after {
	content: "";
	position: absolute;
	background: url(../img/common/fukidasi.png) center top /cover no-repeat;
	width: 15px;
	height: 25px;
	bottom: -16px;
	right: 81px;
}

.moments .title .eye-wrapper {
	position: absolute;
	bottom: 13px;
	right: 14%;
}

.moments .title .title_img {
	margin: -9px auto;
	padding: 0 9%;
}

.moments .title .lead-text {
	padding: 0 10%;
	margin: 46px 0 21px;
}

.moments .title .lead-text p {
	font-family: var(--font-noto);
	font-style: normal;
	font-weight: 700;
	font-size: 16px;
	line-height: 24px;

}

.moments .title .lead-text p:first-child {
	margin-bottom: 28px;
}
.moments article {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 20px;
	gap: 10px;
	background: #F7E092;
	border-radius: 20px;
	margin: 20px;
	color: var(--main_blue);
}
.moments article .icons {
	display: flex;
	flex-direction: row;
	justify-content: inherit;
	gap: 10px;
	width: 100%;
}
.moments article .icons>div {
	/* width: 47px; */
	padding: 0 10px;
	height: 20px;
	background: #0000BC;
	border-radius: 30px;
	color: white;
	font-family: var(--font-noto);
	font-style: normal;
	font-weight: 700;
	font-size: 12px;
	line-height: 20px;
	text-align: center;
}
.moments article .mycar,.moments article .moments_title,.moments .divider{
	width: 100%;
}

.moments .divider{
	display: flex;
	justify-content: center;
}