@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Albert+Sans:wght@500&family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap');

/* -------------------------------------------------------------------------
	BASE
========================================================================= */

:root {
    --def-font-color: #000;
    --accent-color: #00B1A0;
	--accent-sub-color: #F7B515;
	--accent-sub-color-2nd: #4DCDE8;
	--accent-sub-color-3rd: #D0F2EF;
	--accent-sub-color-4th: #DDF1F4;
	--font-size-xxsmall: 1.0rem;
	--font-size-xsmall: 1.1rem;
	--font-size-small: 1.2rem;
	--font-size-med-small: 1.3rem;
	--font-size-medium: 1.4rem;
	--font-size-med-large: 1.5rem;
	--font-size-large: 1.6rem;
	--font-size-xlarge: 1.8rem;
	--font-family-serif: 'Noto Sans JP', sans-serif;
	--font-family-english: 'Albert Sans', sans-serif;
}

* {
	margin: 0px;
	padding: 0px;
	}
html {
	font-size: 62.5%;
	-webkit-text-size-adjust: 100%;
	-webkit-backface-visibility:hidden;
	}
body {
	width: 100%;
	margin: 0px;
	padding-top: 150px;
	color: var(--def-font-color);
	line-height: 160%;
	font-size: 14px;
	font-size: var(--font-size-medium);
	font-family: var(--font-family-serif), YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;
	background-color: #FFF;
	-webkit-backface-visibility:hidden;
	}
@media screen and (max-width: 1290px) {}
@media screen and (max-width: 1010px) {
body { padding-top: 90px; }
}
h1, h2, h3, h4, h5, h6, p { margin: 0px; }
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { display: block; }
address { font-style: normal; }
ul {
	list-style: none;
	padding: 0px;
	}
li { padding: 0px; }
input, select { vertical-align: middle; }
table { border-collapse: collapse; }
a {
	color: #808080;
	text-decoration: none;
	transition: opacity 0.3s ease;
	}
a { -webkit-tap-highlight-color:transparent; }
a:visited { color: #808080; }
a:hover {
	color: var(--accent-color);
	filter: alpha(opacity=70);
	opacity: 0.7;
	transition: opacity 0.3s ease;
	}
a:active { color: var(--accent-color); }
img {
	width: 100%;
    height: auto;
	border: none;
	vertical-align: top;
	}
.fxsmall { font-size: var(--font-size-xxsmall); } 
.fsmall { font-size: var(--font-size-small); } 
.fmedium { font-size: var(--font-size-medium); } 
.flarge { font-size: var(--font-size-large); } 
.fxlarge { font-size: var(--font-size-xlarge); } 
.clear:after {
	content: "";
	display: block;
	clear: both;
	height: 0px;
	overflow: hidden;
	}
.fAccent { color: var(--accent-color); }

.bgAccent { background: var(--accent-color); }
.bgAccentSub { background: var(--accent-sub-color); }

.hide { display: none; }
.show { display: inline; }

.pt10 { padding-top: 10px; }
.pt20 { padding-top: 20px; }
.mt15 { margin-top: 15px; }

.container {
	width: 100%;
	max-width: 1000px;
	margin: 0px auto;
	}
@media screen and (max-width: 1110px) {
.container { width: 90%; }
}

/* SMARTPHONE ONLY */
@media screen and (max-width: 768px) {
.hide { display: inline; }
.show { display: none; }
.container { max-width: 690px; }
}

/* WEB FONT */
.fJp { font-family: var(--font-family-serif); }
.fEng { font-family: var(--font-family-english); }


/* -------------------------------------------------------------------------
	HEADER
========================================================================= */
#head {
	width: 100%;
	height: 95px;/*80px*/
	position: fixed;
	top: 0;
	z-index: 999;
	transition: all 0.4s ease;
	background: #FFF;
	}
@media screen and (max-width: 1290px) {}
@media screen and (max-width: 1010px) { #head { height: 55px; } }
@media screen and (max-width: 768px) { #head { height: 65px; } }
@media screen and (max-width: 650px) { #head { height: 55px; } }

#head .container {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	}

#head .mainLogo { padding-top: 25px; }
#head .mainLogo > a {
	display: flex;
	gap: 0;
	}
#head .mainLogo > a img {
	width: 38.4%;
	transition: all 0.4s ease;
	}
#head .mlLarge {
	visibility: hidden;
	height: 0;
	}

@media screen and (max-width: 1290px) {
#head .mainLogo { padding-top: 22px; }
#head .mainLogo > a img { width: 32%; }
}
@media screen and (max-width: 1010px) {
#head .mainLogo { padding-top: 10px; }
#head .mainLogo > a img { width: 29%; }
}
/* SMARTPHONE ONLY */
@media screen and (max-width: 768px) {
#head .mainLogo > a img {
	width: calc(( 18.5% / 33.5) * 100);
	max-width: 185px;
	}

#head .mlNormal {
	visibility: hidden;
	height: 0;
	transition: all 0.2s ease;
	}
#head .mlLarge {
	height: auto;
	padding-top: 55px;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	visibility: visible;
	transition: all 0.2s ease;
	}
#head a.mlLarge > img { max-width: 263px; }

#top #head.mlSmall { height: 55px; }
#top #head { height: 210px; }
#top #head.mlSmall .mlNormal {
	visibility: visible;
	height: 42px;
	}
#top #head.mlSmall .mlLarge { display: none; }
}

/*  ---------------------------------------------------------*/
#mainNaviPC,
#head .mainMenus,
#head .subMenus,
#mainNaviPC .mmWrapper,
#mainNaviPC .menuContact > a { display: flex; }

#mainNaviPC {
	position: fixed;
	top: 0;
	right: 0;
	justify-content: flex-end;
	gap: 27px;
	}
#mainNaviPC .mmWrapper {
	padding-top: 22px;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
	}
#mainNaviPC .mainMenus,
#mainNaviPC .subMenus { letter-spacing: 0.2rem; }
#mainNaviPC .mainMenus {
	order: 2;
	gap: 45px;
	font-size: var(--font-size-small);
	}
#mainNaviPC .mainMenus > li { position: relative; }
#mainNaviPC .mainMenus > li:not(:last-of-type)::after {
	content: "";
	width: 1px;
	height: 65%;
	margin: auto;
	position: absolute;
	top: 0;
	bottom: 0;
	right: -22px;
	background: #808080;
	}
#mainNaviPC .subMenus {
	order: 1;
	gap: 12px;
	font-size: var(--font-size-med-small);
	}
#mainNaviPC .subMenus > li a {
	padding: 2px 9px;
	border: 1px solid var(--accent-color);
	border-radius: 4px;
	color: var(--accent-color);
	}
#mainNaviPC .menuContact {
	min-width: 154px;
	min-height: 80px;
	}
#mainNaviPC .menuContact > a {
	width: 100%;
	height: 100%;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	border-radius: 0 0 0 10px;
	background: var(--accent-color);
	color: #FFF;
	font-size: var(--font-size-med-large);
	text-align: center;
	line-height: 100%;
	letter-spacing: 0.2rem;
	}

/* SMARTPHONE ONLY */
@media screen and (max-width: 1010px) {
#mainNaviPC { display: none; }
}

/*  ---------------------------------------------------------*/
#mainNaviSP { display: none; }

/* SMARTPHONE ONLY */
@media screen and (max-width: 1010px) {
#mainNaviSP { display: block; }

#mainNaviSP .mspLogo,
#mainNaviSP .mspInsta > a { display: flex; }

#mainNaviSP {
	max-width: 300px;
	position: fixed;
	top: 0;
	right: 0;
	z-index: 1;
	letter-spacing: 0.3rem;
	}
.mScroll {
	position: fixed;
	z-index: 10;
	width: 100%;
	height: 100%;
	overflow-y: auto;
	display: flex;
	justify-content: center;
	}
.mScroll::-webkit-scrollbar { width: 20px; }
.mScroll::-webkit-scrollbar-track { background-color: transparent; }
.mScroll::-webkit-scrollbar-thumb {
	background-color: rgba(255,255,255,0.8);
	border-radius: 20px;
	border: 7px solid transparent;
	background-clip: content-box;
	}
.mScroll::-webkit-scrollbar-thumb:hover { background-color: #FFF; }

#mainNaviSP .mspLogo {
	padding-bottom: 30px;
	flex-direction: column;
	align-items: center;
	}
#mainNaviSP .mspLogo img {
	max-width: 185px;
	filter: brightness(0) invert(1);
	}
#mainNaviSP .logoTansuiWajiro {}

#mainNaviSP .mainMenus {
	flex-direction: column;
	gap: 2px;
	}
#mainNaviSP .mainMenus > li { flex-wrap: wrap; }
#mainNaviSP .mainMenus > li a,
#mainNaviSP .mspLabel,
#mainNaviSP .subMenus > li a {
	padding: 12px 18px;
	display: block;
	background: #FFF;
	color: var(--accent-color);
	font-size: var(--font-size-large);
	text-align: left;
	line-height: 100%;
	}

#mainNaviSP .subMenus {
	padding-top: 54px;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 14px 12px;
	}
#mainNaviSP .subMenus > li { width: calc((100% - 12px) / 2); }
#mainNaviSP .subMenus > li a {
	padding: 17px 18px;
	border-radius: 50px;
	font-size: var(--font-size-med-large);
	text-align: center;
	}
#mainNaviSP .menuContact { width: 100%!important; }
#mainNaviSP .menuContact a { font-size: var(--font-size-xlarge)!important; }

#mainNaviSP .mspInsta {
	padding-top: 35px;
	display: inline-block;
	}
#mainNaviSP .mspInsta > a {
	justify-content: center;
	align-items: center;
	color: #FFF;
	font-size: var(--font-size-xlarge);
	font-family: var(--font-family-english);
	letter-spacing: 0.5rem;
	}
#mainNaviSP .mspInsta > a img {
	width: 26px;
	margin-right: 18px;
	}

#mainNaviSP .toggle { display: none; }
#mainNaviSP .mspLabel {
	margin-bottom: 0;
	position: relative;
	z-index: 10;
	cursor: pointer;
	}
#mainNaviSP .mspLabel::before {
	content: "＋";
	display: block;
	position: absolute;
	right: 8px;
	}
#mainNaviSP .mspLabel,
#mainNaviSP .mspSubList {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transition: all .3s ease-out;
	}
#mainNaviSP .mspSubList {
	height: 0;
	transform: translateY(-10px);
	opacity: 0;/*0.5*/
	overflow: hidden;
	}
#mainNaviSP .mspSubList > li { background: var(--accent-sub-color-2nd); }
#mainNaviSP .mspSubList > li:not(:last-of-type) { border-bottom: 1px solid rgba(255,255,255,0.2); }
#mainNaviSP .mspSubList > li a {
	padding-left: 42px;
	position: relative;
	background: var(--accent-sub-color-2nd);
	color: #FFF;
	font-size: var(--font-size-normal);
	}
#mainNaviSP .mspSubList > li a::before  {
	content: "";
	width: 16px;
	height: 16px;
	top: 0;
	bottom: 0;
	left: 15px;
	margin: auto;
	position: absolute;
	}
#mainNaviSP .mspSubList > li:nth-of-type(1) a::before { background: url("../img/icon_rainbow.svg") top left / contain no-repeat; }
#mainNaviSP .mspSubList > li:nth-of-type(2) a::before { background: url("../img/icon_clover.svg") top left / contain no-repeat; }
#mainNaviSP .mspSubList > li:nth-of-type(3) a::before { background: url("../img/icon_tryangledot.svg") top left / contain no-repeat; }
#mainNaviSP .mspSubList > li:nth-of-type(4) a::before { background: url("../img/icon_rainbow.svg") top left / contain no-repeat; }
#mainNaviSP .mspSubList > li:nth-of-type(5) a::before { background: url("../img/icon_clover.svg") top left / contain no-repeat; }
#mainNaviSP .mspSubList > li:nth-of-type(6) a::before { background: url("../img/icon_tryangledot.svg") top left / contain no-repeat; }
#mainNaviSP .toggle:checked + .mspLabel + .mspSubList {
	height: auto;
	opacity: 1;
	transform: translateY(0);
	transition: all .3s ease-out;
	}
#mainNaviSP .toggle:checked + .mspLabel { cursor: default; }
#mainNaviSP .toggle:checked + .mspLabel::before { content: "－"; }

#mainNaviSP .checkboxToggle {
	position: absolute;
	top: 0;
	right: 10px;
	z-index: 2;
	cursor: pointer;
	width: 55px;
	height: 55px;
	opacity: 0;
	}
#mainNaviSP .checkboxToggle:checked + .hamburger > .hamLine {
	transform: rotate(135deg);
	background: #FFF;
	}
#mainNaviSP .checkboxToggle:checked + .hamburger > .hamLine:before,
#mainNaviSP .checkboxToggle:checked + .hamburger > .hamLine:after {
	top: 0;
	transform: rotate(90deg);
	background: #FFF;
	}
#mainNaviSP .checkboxToggle:checked + .hamburger > .hamLine:after { opacity: 0; }
#mainNaviSP .checkboxToggle:checked ~ .menu {
	pointer-events: auto;
	visibility: visible;
	}
#mainNaviSP .checkboxToggle:checked ~ .menu > .menuBg {
	opacity: 1;
	transform: scale(1) translateY(0);
	transition-duration: 0.75s;
	}
#mainNaviSP .checkboxToggle:checked ~ .menu .mScroll .menuWrapper {
	opacity: 1;
	transition: opacity 0.1s ease 0.1s;
	}

#mainNaviSP .checkboxToggle:checked:hover + .hamburger > .hamLine { transform: rotate(225deg); }
#mainNaviSP .hamburger {
	position: absolute;
	top: 0;
	right: 10px;
	z-index: 1;
	width: 55px;
	height: 55px;
	cursor: pointer;
	transition: box-shadow 0.4s ease;
	-webkit-backface-visibility: hidden;
			backface-visibility: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	}
#mainNaviSP .hamburger > .hamLine {
	position: relative;
	flex: none;
	width: 40%;
	height: 2px;
	background: var(--accent-color);
	transition: all 0.4s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	}
#mainNaviSP .hamburger > .hamLine:before,
#mainNaviSP .hamburger > .hamLine:after {
	content: "";
	position: absolute;
	z-index: 1;
	top: -8px;
	left: 0;
	width: 100%;
	height: 2px;
	background: inherit;
	transition: all 0.3s ease;
	}
#mainNaviSP .hamburger > .hamLine:after { top: 8px; }
#mainNaviSP .menu {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	visibility: hidden;
	overflow: hidden;
	-webkit-backface-visibility: hidden;
		  backface-visibility: hidden;
	outline: 1px solid transparent;
	display: flex;
	justify-content: center;
	}
#mainNaviSP .menu .menuBg {
	width: 600vw;
	height: 600vw;
	color: #fefefe;
	background: var(--accent-color);
	border-radius: 50%;
	transition: all 0.3s ease;
	flex: none;
	transform: scale(0) translateY(0);
	-webkit-backface-visibility: hidden;
			backface-visibility: hidden;
	overflow: hidden;
	display: flex;
	justify-content: center;
	position: absolute;
	opacity: 0.5;
	top: -300vw;
	z-index: 5;
	}
#mainNaviSP .menu .menuWrapper {
	width: calc((30% / 37.5) * 100);
	max-width: 300px;
	padding: 60px 0 35px;
	opacity: 0;
	transition: opacity 0.3s ease;
	position: absolute;
	top: 0;
	z-index: 10;
	text-align: center;
	}
}


/* -------------------------------------------------------------------------
	FOOTER
========================================================================= */
#foot {
	padding: 62px 0 38px;
	position: relative;
	background: var(--accent-sub-color-3rd);
	}
#foot::after {
	content: "";
	width: 100%;
	height: 51px;
	position: absolute;
	top: -51px;
	background: url("../img/footer_bg_cloud.svg") bottom center repeat-x;
	}
#foot .container,
#foot .fSitemap,
#foot .fsmList { display: flex; }
#foot .container {
	flex-wrap: wrap;
	justify-content: space-between;
	}

#foot .fData {
	width: 21.4%;
	padding-top: 30px;
	font-size: var(--font-size-xxsmall);
	}
#foot .fData > dt {
	width: calc((30.4% / 30.4) * 100);
	margin-bottom: 20px;
	}
#foot .fTel {
	font-size: 2.5rem;
	font-family: var(--font-family-english);
	}

#foot .fGroup {
	width: 23.7%;
	padding-top: 50px;
	}
#foot .fgYouchien { width: calc((16.3% / 23.7) * 100); }
#foot .fgYouchien > div a:last-of-type {
	display: block;
	position: relative;
	margin-top: 15px;
	text-align: right;
	z-index: 10;
	}
#foot .fgyYou { width: calc((8.3% / 16.3)* 100); }
#foot .fgySaw {
	width: calc((11.5% / 16.3)* 100);
	margin-top: 15px;
	}
#foot .fgyFam { width: 100%; }
#foot .fgHoikuen {
	width: calc((24% / 23.7) * 100);
	margin-top: 28px;
	}
#foot .fghWay > img { width: calc((20.6% / 24)* 100); }
#foot .fghHoi > img {
	width: 100%;
	margin-top: 15px;
	}
#foot .fgGroup {
	width: calc((22% / 23.7) * 100);
	margin-top: 40px;}

#foot .fSitemap {
	width: 27%;/*43%*/
	padding-top: 40px;
	justify-content: space-between;
	gap: 15px;
	}
#foot .fSitemap a { color: #000; }
#foot .fsmList {
	flex-direction: column;
	gap: 18px;
	}
#foot .fsmList > li {
	font-size: var(--font-size-med-large);
	font-weight: 500;
	}
#foot .fsmList > li > ul { font-size: var(--font-size-xxsmall); }
#foot .fsmSubList { padding-top: 3px; }
#foot .fsmSubList > li { position: relative; }
#foot .fsmSubList > li a {
	margin-left: 12px;
	display: block;
	}
#foot .fsmSubList > li::before {
	content: "▶";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	}

#foot li.fPrivacyPolicy {
	padding-top: 15px;
	font-size: var(--font-size-xsmall);
	}

.exLink::after {
	content: "";
	width: 12px;
	height: 12px;
	margin: auto auto auto 8px;
	display: inline-block;
	right: 0;
	top: 0;
	bottom: 0;
	background: url("../img/icon_externallink.svg") top center / contain no-repeat;
	}
#head .exLink,
#foot .exLink { position: relative; }
#head .exLink::after,
#foot .exLink::after {
	margin: auto;
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	}
#head .exLink { padding-right: 25px!important; }
#head .exLink::after {
	padding-left: 10px;
	right: 2px;
	background: var(--accent-color);
	background-image: none;
	mask: url("../img/icon_externallink.svg") top center / contain no-repeat;
	-webkit-mask: url("../img/icon_externallink.svg") top center / contain no-repeat;
	}
#head .menuContact  .exLink { padding-right: 18px!important; }
#head .menuContact .exLink::after {
	padding-left: 0;
	background: #FFF;
	}
#head #mainNaviSP .exLink::after { right: 12px; }
#head #mainNaviSP .menuContact .exLink::after {
	right: 18px;
	background: var(--accent-color);
	}
#foot .exLink {
	width: 100%;
	padding-right: 10px;
	display: block;
	}
#foot .fsmFamiria > .exLink { padding-right: 2px; }

#foot .copyright {
	width: 100%;
	padding-top: 65px;
	color: #4D4D4D;
	font-size: var(--font-size-xxsmall);
	}

/* SMARTPHONE ONLY */
@media screen and (max-width: 768px) {
#foot {	padding: 50px 0 38px; }
#foot::after {
	content: "";
	width: 100%;
	height: 30px;
	position: absolute;
	top: -30px;
	/*background-position: 30%;*/
	background-size: 80px;
	}
#foot .container {
	justify-content: center;
	flex-direction: column;
	}
	
#foot .fSitemap {
	width: 100%;
	padding-top: 30px;
	justify-content: center;
	gap: 0;
	}
#foot .fData {
	width: 100%;
	padding-top: 0;
	text-align: center;
	}
#foot .fData > dt {
	width: calc((24% / 33.5) * 100);
	margin: 0 auto 30px;
	}
/*#foot .fLogoTansui {
	width: calc((22.3% / 33.5) * 100);
	margin-bottom: 20px;
	}
#foot .fLogoWajiro {
	width: calc((27.4% / 33.5) * 100);
	margin: 38px 0 20px;
	}*/
#foot .fGroup {
	width: calc((29% / 33.5) * 100);
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
	}
#foot .fsmList > li { display: none; }
#foot .fgYouchien {
	width: calc((13.3% / 29) * 100);
	margin-bottom: -2px;
	text-align: center;
	}
#foot .fgYouchien > div a:last-of-type {
	margin-top: 0;
	text-align: center;
	}
#foot .fgyYou { width: calc((7.5% / 13.3)* 100); }
#foot .fgySaw {
	width: calc((10.5% / 13.3)* 100);
	margin-top: calc((1.1% / 13.3)* 100);
	}
#foot .fgyFam {
	width: calc((13.3% / 13.3)* 100);
	margin-top: calc((1% / 13.3)* 100);
	}
#foot .fgHoikuen {
	width: calc((11% / 29) * 100);
	margin-top: 0;
	text-align: center;
	}
#foot .fghWay > img {  width: calc((12.9% / 13.3)* 100); }
#foot .fgGroup {
	width: calc((19% / 29) * 100);
	margin: 50px auto 0;/*38px*/
	}
#foot li.fPrivacyPolicy {
	padding-top: 0;
	display: block;
	}
#foot .copyright {
	padding-top: 8px;
	text-align: center;
	}
}



/* -------------------------------------------------------------------------
	MAIN
========================================================================= */
main { padding-bottom: 23px; }

#mainvisual {
	height: 300px;
	display: flex;
	position: relative;
	align-content: center;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	}
#mainvisual::after {
	content: "";
	width: 100%;
	height: 51px;
	position: absolute;
	bottom: 0;
	z-index: 5;
	background: url("../img/mv_bg_cloud.svg") center bottom repeat-x;
	}
#mainvisual .mainTitle {
	display: block;
	position: relative;
	z-index: 10;
	color: #FFF;
	font-size: 2.8rem;
	font-weight: 500;
	line-height: 120%;
	letter-spacing: 1.2rem;
	}
#mainvisual .mvPhoto {
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 1;
	top: 0;
	object-fit: cover;
	}

/* SMARTPHONE ONLY */
@media screen and (max-width: 768px) {
main { padding-bottom: 6px; }
#mainvisual { height: 140px; }
#mainvisual::after {
	height: 25px;
	background-size: 80px;
	}
#mainvisual .mainTitle {
	font-size: var(--font-size-medium);
	letter-spacing: 0.3rem;
	}
}


/*  ---------------------------------------------------------*/
.arrowButton {
	padding: 3px 40px 3px 18px;
	display: inline-block;
	position: relative;
	background: #FFF;
	border: 2px solid var(--accent-color);
	border-radius: 50px;
	color: var(--accent-color);
	font-weight: 500;
	transition: all 0.3s ease;
	}
a.arrowButton { color: var(--accent-color); }
.arrowButton:hover {
	background: var(--accent-color);
	color: #FFF;
	opacity: 0.8;
	}
.arrowButton::before,
.arrowButton::after {
	content: "";
	position: absolute;
	margin: auto;
	top: 0;
	bottom: 0;
    right: 12px;
	transition: all 0.3s ease;
	}
.arrowButton::before {
    width: 13px;
    height: 3px;
    background: var(--accent-color);
	}
.arrowButton::after {
    width: 6px;
    height: 6px;
    border-top: 3px solid var(--accent-color);
    border-right: 3px solid var(--accent-color);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
	}
.arrowButton:hover::before { background: #FFF; }
.arrowButton:hover::after { border-color: #FFF; }

/* SMARTPHONE ONLY */
@media screen and (max-width: 768px) {
.arrowButton::before {
    width: 11px;
    height: 2px;
	}
.arrowButton::after {
    width: 6px;
    height: 6px;
    border-top: 2px solid var(--accent-color);
    border-right: 2px solid var(--accent-color);
	}
}


/*  ---------------------------------------------------------*/
#topicpath {
	padding-bottom: 34px;
	display: flex;
	color: #666;
	font-size: var(--font-size-xsmall);
	}
#topicpath > li a { color: #666; }
#topicpath > li:not(:last-of-type)::after {
	content: ">";
	padding: 0 5px;
	}

/* SMARTPHONE ONLY */
@media screen and (max-width: 768px) {
#topicpath {
	padding-bottom: 12px;
	font-size: var(--font-size-xxsmall);
	}
}


/*  ---------------------------------------------------------*/
.photoframe { position: relative; }
.photoframe::after {
	content: "";
	width: 100%;
	height: 51px;
	display: block;
	position: absolute;
	bottom: 0;
	z-index: 10;
	background: url("../img/mv_bg_cloud.svg") center bottom repeat-x;
	}

/* SMARTPHONE ONLY */
@media screen and (max-width: 768px) {
.photoframe::after {
	height: 25px;
	background-size: 80px;
	}
}


/*  ---------------------------------------------------------*/
.pageTitle {
	display: inline-block;
	flex-direction: column;
	position: relative;
	font-size: 2.8rem;
	font-weight: 500;
	letter-spacing: 0.8rem;
	text-align: center;
	}
.pageTitle::before,
.pageTitle::after {
	content: "";
	position: absolute;
	}
.ptEng {
	padding-top: 15px;
	display: block;
	color: var(--def-font-color);
	font-size: var(--font-size-xsmall);
	font-family: var(--font-family-english);
	font-weight: 500;
	letter-spacing: 0.2rem;
	}


/* SMARTPHONE ONLY */
@media screen and (max-width: 768px) {
}


/*  ---------------------------------------------------------*/
.pageNavi {
	display: flex;
	justify-content: center;
	gap: 75px;
	font-size: var(--font-size-large);
	}
.pageNavi li > a {
	padding-bottom: 5px;
	position: relative;
	display: block;
	letter-spacing: 0.3rem;
	transition: all 0.3s ease;
	}
.pageNavili > a:hover {
	opacity: 1;
	transition: all 0.3s ease;
	}
.pageNavi li > a::after {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background: var(--accent-color);
	bottom: -1px;
	transform: scale(0, 1);
	transform-origin: right top;
	transition: transform 0.3s; 
	}
.pageNavi li > a:hover::after {
	transform: scale(1, 1);
	transform-origin: left top;
	}
.pageNavi li.current > a { color: var(--accent-color); }
.pageNavi li.current > a::after { transform: none; }

/* SMARTPHONE ONLY */
@media screen and (max-width: 768px) {
.pageNavi { display: none; }
}



@media print { #head, #head .container, #mainNaviPC { position: absolute; } }