@charset "utf-8";

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

/*.lora {
	font-family: "Lora", serif;
	font-optical-sizing: auto;
	font-weight: 400 to 700;
	font-style: normal;
}
.notoSans {
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-weight: 100 to 900;
	font-style: normal;
}
.notoSerif {
	font-family: "Noto Serif JP", serif;
	font-optical-sizing: auto;
	font-weight: 200 to 900;
	font-style: normal;
}*/

/*----------------------------
	common
------------------------------*/
html {
	color: #222;
	--1px: calc(0.0625rem * 1.42);
	--2px: calc(0.125rem * 1.42);
	--3px: calc(0.1875rem * 1.42);
	--4px: calc(0.25rem * 1.42);
	--5px: calc(0.3125rem * 1.42);
	--6px: calc(0.375rem * 1.42);
	--7px: calc(0.4375rem * 1.42);
	--8px: calc(0.5rem * 1.42);
	--9px: calc(0.5625rem * 1.42);
	--10px: calc(0.625rem * 1.42);
	--11px: calc(0.6875rem * 1.42);
	--12px: calc(0.75rem * 1.42);
	--13px: calc(0.8125rem * 1.42);
	--14px: calc(0.875rem * 1.42);
	--15px: calc(0.9375rem * 1.42);
	--16px: calc(1rem * 1.42);
	--17px: calc(1.0625rem * 1.42);
	--18px: calc(1.125rem * 1.42);
	--19px: calc(1.1875rem * 1.42);
	--20px: calc(1.25rem * 1.42);
	--21px: calc(1.3125rem * 1.42);
	--22px: calc(1.375rem * 1.42);
	--23px: calc(1.4375rem * 1.42);
	--24px: calc(1.5rem * 1.42);
	--25px: calc(1.5625rem * 1.42);
	--26px: calc(1.625rem * 1.42);
	--27px: calc(1.6875rem * 1.42);
	--28px: calc(1.75rem * 1.42);
	--29px: calc(1.8125rem * 1.42);
	--30px: calc(1.875rem * 1.42);
	--31px: calc(1.9375rem * 1.42);
	--32px: calc(2rem * 1.42);
	--33px: calc(2.0625rem * 1.42);
	--34px: calc(2.125rem * 1.42);
	--35px: calc(2.1875rem * 1.42);
	--36px: calc(2.25rem * 1.42);
	--37px: calc(2.3125rem * 1.42);
	--38px: calc(2.375rem * 1.42);
	--39px: calc(2.4375rem * 1.42);
	--40px: calc(2.5rem * 1.42);
	--41px: calc(2.5625rem * 1.42);
	--42px: calc(2.625rem * 1.42);
	--43px: calc(2.6875rem * 1.42);
	--44px: calc(2.75rem * 1.42);
	--45px: calc(2.8125rem * 1.42);
	--46px: calc(2.875rem * 1.42);
	--47px: calc(2.9375rem * 1.42);
	--48px: calc(3rem * 1.42);
	--49px: calc(3.0625rem * 1.42);
	--50px: calc(3.125rem * 1.42);
	--52px: calc(3.25rem * 1.42);
	--55px: calc(3.4375rem * 1.42);
	--57px: calc(3.5625rem * 1.42);
	--60px: calc(3.75rem * 1.42);
	--67px: calc(4.1875rem * 1.42);
	--70px: calc(4.375rem * 1.42);
	--80px: calc(5rem * 1.42);
	--90px: calc(5.625rem * 1.42);
	--100px: calc(6.25rem * 1.42);
	--120px: calc(7.5rem * 1.42);
	--130px: calc(8.125rem * 1.42);
	--150px: calc(9.375rem * 1.42);
	--530px: calc(33.125rem * 1.42);
	--670px: calc(41.875rem * 1.42);
	--750px: calc(46.875rem * 1.42);
}
@media (max-width: 768px) {
	html {
		--1px: 0.0625rem;
		--2px: 0.125rem;
		--3px: 0.1875rem;
		--4px: 0.25rem;
		--5px: 0.3125rem;
		--6px: 0.375rem;
		--7px: 0.4375rem;
		--8px: 0.5rem;
		--9px: 0.5625rem;
		--10px: 0.625rem;
		--11px: 0.6875rem;
		--12px: 0.75rem;
		--13px: 0.8125rem;
		--14px: 0.875rem;
		--15px: 0.9375rem;
		--16px: 1rem;
		--17px: 1.0625rem;
		--18px: 1.125rem;
		--19px: 1.1875rem;
		--20px: 1.25rem;
		--21px: 1.3125rem;
		--22px: 1.375rem;
		--23px: 1.4375rem;
		--24px: 1.5rem;
		--25px: 1.5625rem;
		--26px: 1.625rem;
		--27px: 1.6875rem;
		--28px: 1.75rem;
		--29px: 1.8125rem;
		--30px: 1.875rem;
		--31px: 1.9375rem;
		--32px: 2rem;
		--33px: 2.0625rem;
		--34px: 2.125rem;
		--35px: 2.1875rem;
		--36px: 2.25rem;
		--37px: 2.3125rem;
		--38px: 2.375rem;
		--39px: 2.4375rem;
		--40px: 2.5rem;
		--41px: 2.5625rem;
		--42px: 2.625rem;
		--43px: 2.6875rem;
		--44px: 2.75rem;
		--45px: 2.8125rem;
		--46px: 2.875rem;
		--47px: 2.9375rem;
		--48px: 3rem;
		--49px: 3.0625rem;
		--50px: 3.125rem;
		--52px: 3.25rem;
		--55px: 3.4375rem;
		--57px: 3.5625rem;
		--60px: 3.75rem;
		--67px: 4.1875rem;
		--70px: 4.375rem;
		--80px: 5rem;
		--90px: 5.625rem;
		--100px: 6.25rem;
		--120px: 7.5rem;
		--130px: 8.125rem;
		--150px: 9.375rem;
		--530px: 33.125rem;
		--670px: 41.875rem;
		--750px: 46.875rem;
	}
}
body {
	font-size: var(--14px);
	line-height: 1.5;
	letter-spacing: 0.03em;
	overflow-wrap: anywhere;
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
}
button, input, select, textarea {
	font: inherit;
	color: inherit;
	background: transparent;
	border: none;
	border-radius: 0;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}
button {
	cursor: pointer;
}
textarea {
	resize: vertical;
}
a {
	color: #222;
	text-decoration: none;
}
a.underline {
	text-decoration: underline;
}
a,
button {
	transition: opacity 0.3s ease-out;
}
a:hover,
button:hover {
	opacity: 0.7;
}
@media (max-width: 768px) {
	a:hover,
	button:hover {
		opacity: 1;
	}
}
img {
	max-width: 100%;
	height: auto;
}
img[src$=".svg"] {
	width: 100%;
	height: auto;
}
/* スクリーンリーダー用 */
.srOnly {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
/* for safari */
@supports (-webkit-hyphens: none) {
	[tabindex="-1"]:focus-visible {
		outline: none !important;
	}
}
.sp {
	display: none;
}
@media (max-width: 768px) {
	.sp {
		display: block;
	}
	.pc {
		display: none;
	}
}

/*----------------------------
	color
------------------------------*/
:root {
	--baseColor: #222;
	--keyColor01: #005bac;
	--keyColor02: #2972c3;
	--redColor: #ee1b20;
	--blueBgColor: #ebf4ff;
	--yellowBgColor: #fffaee;
	--grayBgColor: #f0f0f0;
	--grayBorderColor: #ccc;
	--whiteColor: #fff;
}
.txtBase {
	color: var(--baseColor);
}
.txtKey01 {
	color: var(--keyColor01);
}
.txtKey02 {
	color: var(--keyColor02);
}
.txtRed {
	color: var(--redColor);
}
.txtWhite {
	color: var(--whiteColor);
}
.bgKeyBlue {
	background: var(--keyColor02);
}
.bgBlue {
	background: var(--blueBgColor);
}
.bgYellow {
	background: var(--yellowBgColor);
}
.bgGray {
	background: var(--grayBgColor);
}
.bgRed {
	background: var(--redColor);
}
.bgWhite {
	background: var(--whiteColor);
}

/*----------------------------
	wrapper
------------------------------*/
.wrapper {
	position: relative;
	width: calc(100% - 420px);
	top: 0;
	left: 420px;
}
/*.wrapper::before {
	content: "";
	position: fixed;
	display: block;
	width: calc(100% - 420px);
	height: 100vh;
	background: url(/common/img/mv_bg.png) no-repeat top center, #bbd4ed;
	background-size: cover;
	top: 0;
	left: 420px;
	z-index: -1;
}*/
/* フローティング背景動画（header.htmlで読み込み） */
.videoWrap {
	position: fixed;
	top: 0;
	left: 420px;
	width: calc(100% - 420px);
	height: 100vh;
	z-index: -1;
	pointer-events: none;
	background: #bbd4ed;
}
.videoWrap .bgVideo {
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: #6cabe3;
}
@media (max-width: 768px) {
	.wrapper {
		width: 100%;
		left: 0;
	}
	.wrapper::before {
		width: 100%;
		left: 0;
	}
	.videoWrap {
		width: 100%;
		left: 0;
	}
	.videoWrap .bgVideo {
		display: none;
	}
}

.inner {
	width: 89.333333%;
	margin: 0 auto;
}
.iblock {
	display: inline-block;
}
.borderTop {
	border-top: 1px solid var(--grayBorderColor);
}
.borderBottom {
	border-bottom: 1px solid var(--grayBorderColor);
}
a.blank::after {
	content: "";
	display: inline-block;
	position: relative;
	background: url(/common/img/link_blank.svg) no-repeat top center;
	background-size: contain;
	width: 1em;
	height: 1em;
	max-width: var(--12px);
	max-height: var(--12px);
	top: 0.1em;
	margin-left: 0.3em;
	margin-right: 0.3em;
}
a.pdf::after {
	content: "";
	display: inline-block;
	position: relative;
	background: url(/common/img/link_pdf.svg) no-repeat top center;
	background-size: contain;
	width: 1.3em;
	height: 1.3em;
	top: var(--3px);
	margin-left: 0.2em;
	margin-right: 0.3em;
}

/*----------------------------
	header
------------------------------*/
header {
	position: relative;
	width: 100%;
	max-width: 750px;
	margin: 0 auto;
	z-index: 2;
}
.headerInner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--12px) 0;
	border-bottom: 1px solid var(--grayBorderColor);
	background: #fff;
}
.headerInner .logoLandmark {
	width: 69%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.headerInner .logoLandmark a {
	display: block;
}
.headerInner .logoLandmark img {
	width: 88.5%;
	display: block;
	margin: 0 auto;
}
.headerInner .logomitsubishi {
	width: 27%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--5px) 0;
	border-left: 1px solid var(--grayBorderColor);
}
.headerInner .logomitsubishi img {
	width: 78%;
	display: block;
	margin: 0 auto;
}

/*----------------------------
	main
------------------------------*/
main {
	position: relative;
	width: 100%;
	max-width: 750px;
	margin: 0 auto;
}
main section {
	overflow: hidden;
}

/*----------------------------
	breadcrumbsWrap
------------------------------*/
.breadcrumbsWrap {
	padding: var(--20px) 0;
}
.breadcrumbsWrap .breadcrumbs {
	display: block;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	width: 100%;
}
.breadcrumbsWrap .breadcrumbs li {
	white-space: nowrap;
	display: inline;
	font-size: var(--11px);
	font-size: 500;
}
.breadcrumbsWrap .breadcrumbs li + li::before {
	content: "／";
	margin: 0 var(--3px) 0 0;
}
.breadcrumbsWrap + .sec {
	padding-top: var(--10px);
}

/*----------------------------
	sec
------------------------------*/
.sec {
	padding: var(--35px) 0 var(--45px);
}
.sec.pbotom10 {
	padding-bottom: var(--10px);
}
.sec h2 {
	text-align: center;
	font-size: var(--14px);
	font-weight: 500;
	margin-bottom: var(--25px);
}
.sec h2 span {
	font-family: "Lora", serif;
	font-size: var(--35px);
	display: block;
}
.sec .lead {
	font-size: var(--15px);
	text-align: justify;
	line-height: 1.7;
}

/*----------------------------
	swiper
------------------------------*/
.slide {
	position: relative;
	margin-top: var(--20px);
	width: 100%;
	overflow: hidden;
}
.swiper-slide {
	height: auto;
}
.swiper-slide a {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.swiper-slide a img {
	aspect-ratio: 1 / 1;
	object-fit: contain;
}
/* swiper-icon */
.pager {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0 var(--15px);
	margin-top: var(--20px);
}
.pager .swiper-prev,
.pager .swiper-next {
	width: var(--45px);
	height: var(--45px);
	cursor: pointer;
}
.pager .swiper-pagination {
	position: static;
	width: auto;
	display: flex;
	gap: 0 var(--13px);
}
.pager .swiper-pagination-bullet {
	width: var(--8px);
	height: var(--8px);
	cursor: pointer;
	background: var(--grayBorderColor);
	opacity: 1;
	border-radius: var(--8px);
	transition: all 0.3s;
	margin: 0 !important;
}
.pager .swiper-pagination-bullet-active {
	background: #4d4d4d;
}
.pager .swiperPause {
	display: block;
	width: var(--30px);
}
/* swiper:not */
.swiper:not(.swiper-initialized) + .pager {
	display: none;
}
.swiper:not(.swiper-initialized) + .swiper-scrollbar {
	display: none;
}
/* swiper-scrollbar */
.swiper-scrollbar.swiper-scrollbar-horizontal {
	position: relative;
	width: 100%;
	height: var(--4px);
	left: 0;
	bottom: 0;
	background: var(--grayBorderColor);
}
.swiper-horizontal > .swiper-scrollbar,
.swiper-scrollbar.swiper-scrollbar-horizontal {
	z-index: 1;
}
.slide .swiper-scrollbar-drag {
	background: var(--baseColor);
}

/*----------------------------
	moreBtn
------------------------------*/
.moreBtn {
	width: 89.552239%;
	margin: var(--25px) auto 0;
}
.moreBtn a {
	position: relative;
	display: block;
	width: 100%;
	font-size: var(--15px);
	font-weight: 600;
	text-align: center;
	border-radius: var(--50px);
	border: 1px solid var(--baseColor);
	padding: var(--12px) var(--45px) var(--14px);
}
.moreBtn a::after {
	content: "";
	position: absolute;
	background: url(/common/img/link_arrow.png) no-repeat top center;
	background-size: contain;
	width: var(--18px);
	height: var(--18px);
	top: calc(50% - var(--5px));
	right: var(--15px);
}
.moreBtn.btnBlank a::after {
	background: url(/common/img/link_blank.svg) no-repeat top center;
	background-size: contain;
	width: var(--18px);
	height: var(--18px);
	top: calc(50% - var(--1px));
	right: var(--20px);
	transform: translateY(-50%);
}
.moreBtn.btnPdf a::after {
	background: url(/common/img/link_pdf.svg) no-repeat top center;
	background-size: contain;
	width: var(--25px);
	height: var(--25px);
	top: calc(50% - var(--1px));
	right: var(--13px);
	transform: translateY(-50%);
}
/* アイコンの位置が、テキストの右隣用 */
.moreBtn.iconInline a {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--12px) var(--20px) var(--14px);
}
.moreBtn.iconInline a::after {
	position: relative;
	display: inline-block;
	top: 0;
	right: 0;
	transform: none;
	margin-left: 0.3em;
	margin-right: -0.5em;
}

/*----------------------------
	modalBtn
------------------------------*/
.modalBtnWrap {
	width: 59.701493%;
	margin: var(--20px) auto 0;
}
.modalBtnWrap .modalBtn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	font-size: var(--13px);
	font-weight: 600;
	text-align: center;
	border-radius: var(--50px);
	border: 1px solid var(--baseColor);
	padding: var(--6px) var(--10px) var(--7px) var(--20px);
}
.modalBtnWrap .modalBtn::after {
	content: "";
	display: inline-block;
	background: url(/common/img/link_modal.svg) no-repeat top center;
	background-size: contain;
	width: var(--12px);
	height: var(--12px);
	margin-left: var(--5px);
}
.modalLink {
	text-decoration: underline;
}
.modalLink::after {
	content: "";
	display: inline-block;
	position: relative;
	background: url(/common/img/link_modal.svg) no-repeat top center;
	background-size: contain;
	width: 1em;
	height: 1em;
	max-width: var(--12px);
	max-height: var(--12px);
	top: 0.1em;
	margin-left: 0.3em;
	margin-right: 0.3em;
}

/*----------------------------
	「bnr.html」 footerBnr
------------------------------*/
.footerBnr {
	position: relative;
	width: 100%;
	max-width: 750px;
	margin: 0 auto;
	padding: var(--45px) 0;
}
.footerBnr ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--15px);
}
.footerBnr ul li {
	width: calc((100% - var(--15px)) / 2);
}
.footerBnr ul li:first-child {
	width: 100%;
}
.footerBnr ul li a {
	display: block;
}

/*----------------------------
	「bnr.html」 footerLink
------------------------------*/
.footerLink {
	position: relative;
	width: 100%;
	max-width: 750px;
	margin: 0 auto;
	padding: var(--25px) 0;
}
.footerLink ul li {
	font-size: var(--14px);
}
.footerLink ul li + li {
	margin-top: var(--15px);
}

/*----------------------------
	「footer.html」 footerSns
------------------------------*/
.footerSns {
	position: relative;
	width: 100%;
	max-width: 750px;
	margin: 0 auto;
	padding: var(--20px) 0 var(--25px);
}
.footerSns h2 {
	font-family: "Lora", serif;
	font-weight: 500;
	font-size: var(--17px);
	text-align: center;
}
.footerSns ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--10px) var(--32px);
	margin-top: var(--12px);
}
.footerSns ul li {
	width: var(--40px);
}
.footerSns ul li:last-child {
	width: var(--42px);
}
.footerSns ul li a {
	display: block;
}

/*----------------------------
	「footer.html」 footer
------------------------------*/
footer {
	position: relative;
	width: 100%;
	max-width: 750px;
	margin: 0 auto;
}
@media (max-width: 768px) {
	footer {
		padding-bottom: var(--90px);
	}
}

/*----------------------------
	「footer.html」 footer navlinkWrap
------------------------------*/
footer .navlinkWrap {
	padding: var(--15px) 0 var(--30px);
}
footer .navlinkWrap .mainLink li {
	border-bottom: 1px solid var(--grayBorderColor);
}
footer .navlinkWrap .mainLink li a {
	position: relative;
	display: block;
	width: 100%;
	font-size: var(--14px);
	padding: var(--17px) var(--30px) var(--17px) 0;
}
footer .navlinkWrap .mainLink li a::after {
	content: "";
	position: absolute;
	background: url(/common/img/link_arrow.png) no-repeat top center;
	background-size: contain;
	width: var(--15px);
	height: var(--15px);
	top: calc(50% - var(--3px));
	right: var(--5px);
}
footer .navlinkWrap .mainLink li.blank a::after {
	background: url(/common/img/link_blank.svg) no-repeat top center;
	background-size: contain;
	width: var(--15px);
	height: var(--15px);
	top: 50%;
	right: var(--6px);
	transform: translateY(-50%);
}
footer .navlinkWrap .subLink {
	display: flex;
	flex-wrap: wrap;
	gap: var(--13px) var(--20px);
	margin-top: var(--20px);
}
footer .navlinkWrap .subLink li {
	width: calc((100% - var(--20px)) / 2);
}
footer .navlinkWrap .subLink li a {
	font-size: var(--13px);
}

/*----------------------------
	「footer.html」 footer companyWrap
------------------------------*/
footer .companyWrap {
	padding: var(--25px) 0;
}
footer .companyWrap .logoLandmark {
	width: 71.641791%;
	margin: 0 auto;
}
footer .companyWrap .companyLink {
	margin: var(--25px) -5% 0 -5%;
	width: 110%;
}
footer .companyWrap .companyLink ul {
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--15px) 0;
	text-align: center;
	max-width: 30em;
}
footer .companyWrap .companyLink li {
	margin-right: 0.5em;
}
footer .companyWrap .companyLink li a {
	font-size: var(--13px);
	letter-spacing: 0;
}
footer .companyWrap .companyLink li:nth-child(2n) {
	padding-left: 0.6em;
	border-left: 1px solid var(--grayBorderColor);
}
footer .companyWrap small {
	font-size: var(--11px);
	display: block;
	margin-top: var(--20px);
	letter-spacing: 0.02em;
	text-align: center;
}

/*----------------------------
	pageTop
------------------------------*/
.pageTop {
	display: none;
	position: fixed;
	width: var(--43px);
	height: var(--43px);
	bottom: var(--10px);
	right: max(var(--10px), calc(50% - 665px));
	z-index: 20;
}
.pageTop a {
	display: block;
}
@media (max-width: 768px) {
	.pageTop {
		bottom: var(--67px);
		transition: opacity 0.3s ease;
	}
	.pageTop.is-hidden {
		opacity: 0;
		pointer-events: none;
	}
	.pageTop a:hover {
		opacity: 1;
	}
}