@charset "utf-8";
@import url(//fonts.googleapis.com/css?family=Ubuntu:700);
@import url(//fonts.googleapis.com/earlyaccess/notosansjapanese.css);
@import url(//fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;1,600&display=swap);

@font-face {
	font-family: Yu Gothic;
	src: local("Yu Gothic Medium");
	font-weight: 400;
}

@font-face {
	font-family: Yu Gothic;
	src: local("Yu Gothic Bold");
	font-weight: 700;
}

:root {
	--color-link: #698cc8;
	--color-link-bg: #adc7f236;
	--color-accent: #ff1f54;

	--scrollbar-width: 0px;
	--contents-width: 0px;
	
	/* 余白 */
	--wcalc-gap: 40px;
	
	/* スクロールバーの幅を除いたWindow幅からコンテンツの最大幅を引いた数値 */
	--wcalc-window-side-width: calc((100vw - var(--scrollbar-width) - 1440px) / 2);
	
	--svg-rect:url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20preserveAspectRatio%3D%22none%22%20viewBox%3D%220%200%2010%2010%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%2210%22%20height%3D%2210%22%2F%3E%3C%2Fsvg%3E");
	--round-out-corner-LT: url('data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2240px%22%20height%3D%2240px%22%20viewBox%3D%220%200%2040%2040%22%20style%3D%22enable-background%3Anew%200%200%2040%2040%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3A%23FFFFFF%3B%7D%3C%2Fstyle%3E%3Cdefs%3E%3C%2Fdefs%3E%3Cg%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M40%2C0L0%2C0l0%2C40c0-2.032%2C0-20.274%2C0.731-25.376C1.858%2C6.754%2C6.459%2C2.116%2C13.332%2C0.902C18.435%2C0%2C39%2C0%2C40%2C0z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
	--round-out-corner-RT: url('data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2240px%22%20height%3D%2240px%22%20viewBox%3D%220%200%2040%2040%22%20style%3D%22enable-background%3Anew%200%200%2040%2040%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3A%23FFFFFF%3B%7D%3C%2Fstyle%3E%3Cdefs%3E%3C%2Fdefs%3E%3Cg%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M40%2C40V0L0%2C0c2.032%2C0%2C20.274%2C0%2C25.376%2C0.731c7.87%2C1.127%2C12.508%2C5.728%2C13.722%2C12.602C40%2C18.435%2C40%2C39%2C40%2C40z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
	--round-out-corner-LB: url('data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2240px%22%20height%3D%2240px%22%20viewBox%3D%220%200%2040%2040%22%20style%3D%22enable-background%3Anew%200%200%2040%2040%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3A%23FFFFFF%3B%7D%3C%2Fstyle%3E%3Cdefs%3E%3C%2Fdefs%3E%3Cg%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M0%2C0l0%2C40h40c-2.032%2C0-20.274%2C0-25.376-0.731c-7.87-1.127-12.508-5.728-13.722-12.602C0%2C21.565%2C0%2C1%2C0%2C0z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
	--round-out-corner-RB: url('data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2240px%22%20height%3D%2240px%22%20viewBox%3D%220%200%2040%2040%22%20style%3D%22enable-background%3Anew%200%200%2040%2040%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3A%23FFFFFF%3B%7D%3C%2Fstyle%3E%3Cdefs%3E%3C%2Fdefs%3E%3Cg%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M0%2C40h40V0c0%2C2.032%2C0%2C20.274-0.731%2C25.376c-1.127%2C7.87-5.728%2C12.508-12.602%2C13.722C21.565%2C40%2C1%2C40%2C0%2C40z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
	--round-in-corner-LT: url('data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2240px%22%20height%3D%2240px%22%20viewBox%3D%220%200%2040%2040%22%20style%3D%22enable-background%3Anew%200%200%2040%2040%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3A%23FFFFFF%3B%7D%3C%2Fstyle%3E%3Cdefs%3E%3C%2Fdefs%3E%3Cg%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M0%2C40V0l40%2C0c0%2C2.032%2C0%2C20.274-0.731%2C25.376c-1.127%2C7.87-5.728%2C12.508-12.602%2C13.722C21.565%2C40%2C1%2C40%2C0%2C40z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
	--round-in-corner-RT: url('data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2240px%22%20height%3D%2240px%22%20viewBox%3D%220%200%2040%2040%22%20style%3D%22enable-background%3Anew%200%200%2040%2040%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3A%23FFFFFF%3B%7D%3C%2Fstyle%3E%3Cdefs%3E%3C%2Fdefs%3E%3Cg%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M0%2C0h40v40c-2.032%2C0-20.274%2C0-25.376-0.731c-7.87-1.127-12.508-5.728-13.722-12.602C0%2C21.565%2C0%2C1%2C0%2C0z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
	--round-in-corner-LB: url('data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2240px%22%20height%3D%2240px%22%20viewBox%3D%220%200%2040%2040%22%20style%3D%22enable-background%3Anew%200%200%2040%2040%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3A%23FFFFFF%3B%7D%3C%2Fstyle%3E%3Cdefs%3E%3C%2Fdefs%3E%3Cg%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M40%2C40H0L0%2C0c2.032%2C0%2C20.274%2C0%2C25.376%2C0.731c7.87%2C1.127%2C12.508%2C5.728%2C13.722%2C12.602C40%2C18.435%2C40%2C39%2C40%2C40z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
	--round-in-corner-RB: url('data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2240px%22%20height%3D%2240px%22%20viewBox%3D%220%200%2040%2040%22%20style%3D%22enable-background%3Anew%200%200%2040%2040%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3A%23FFFFFF%3B%7D%3C%2Fstyle%3E%3Cdefs%3E%3C%2Fdefs%3E%3Cg%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M40%2C0v40H0c0-2.032%2C0-20.274%2C0.731-25.376C1.858%2C6.754%2C6.459%2C2.116%2C13.332%2C0.902C18.435%2C0%2C39%2C0%2C40%2C0z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
}


/* CSS Document */

html {
	font-size: 62.5%;
}

body {
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0;
	font-family: 'Yu Gothic',"游ゴシック",'YuGothic',"游ゴシック体",'Hiragino Kaku Gothic ProN','Meiryo',sans-serif;
	font-style: normal;
	font-weight: normal;
	font-size: 1.2rem;
	text-align: center;
	color: #333;
	-webkit-text-size-adjust: none;
	-webkit-font-smoothing: antialiased;
	z-index: 0;
	font-feature-settings: "pkna" 1;
}

*::-moz-selection {
	background-color: rgba(0,0,0,0.1);
	color: #000;
}

*::selection {
	background-color: rgba(0,0,0,0.1);
	color: #000;
}

a {
	color: #333;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin-bottom: 0;
	font-weight: 400;
	font-size: inherit;
	font-feature-settings: "palt";
	line-height: 1.65;
}

p {
	margin-bottom: 0;
}

pre {
	margin-bottom: 0;
}

dl {
	margin-bottom: 0;
}

ul {
	margin-bottom: 0;
}

ol {
	margin-bottom: 0;
	list-style: decimal;
	padding-left: 1em;
}






/* ========================================================================== */

.wrap {
	width: 100%;
	max-width: 1600px;
	min-width: 960px;
	margin: 0 auto;
	padding: 0 20px;
	text-align: center;
	box-sizing: border-box;
}

#page {
	background-color: #fff;
	z-index: 0;
}


.cf:before,
.cf:after {
	content: " ";
	display: table;
}

.cf:after {
	clear: both;
}

.cf {
	*zoom: 1;
}



/* ========================================================================== */
/* global-header                                                              */
/* ========================================================================== */

.gh {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
	margin: 0 auto;
	z-index: 100;
	pointer-events: none;
	transform: translate3d(0, 0, 0);
	backface-visibility:hidden;
	transition: all 0.25s cubic-bezier(0.65,0.05,0.36,1);
	transition-property: transform,opacity,width;
}

.-hide .gh {
	
}

.-show .gh {
	pointer-events: auto;
}

.scroll-down:not(.-show) .gh {
	transform: translate3d(0, -60px, 0);
}

.scroll-y-end:not(.-show) .gh {
	transform: translate3d(0,0,0);
}

@media screen and (min-width: 1280px) {
	.scroll-down:not(.-show) .gh {
		transform: translate3d(0, -100%, 0);
	}
}

.gh a {
	transition: all 0.2s ease-in-out;
	text-decoration: none;
}

.gh a:hover {
	color: var(--color-link);
}

.gh .anm {
	opacity: 0;
	transition: opacity 0.5s cubic-bezier(0.65,0.05,0.36,1);
}

.-show .gh .anm {
	opacity: 1;
}

.gh.follow {
	
}

.gh--inner {
	position: relative;
	top: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	box-sizing: border-box;
	z-index: 200;
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: contain;
	vertical-align: middle;
	-webkit-overflow-scrolling: touch;
	opacity: 0;
	background: #fff;
	transform: translateX(100%);
	transition: 0.5s cubic-bezier(0.65,0.05,0.36,1);
	transition-property: background,opacity,transform;
}

.-show .gh--inner {
	display: block;
	transform: translateX(0);
	opacity: 1;
	transition-timing-function: cubic-bezier(0.17, 0.84, 0.44, 1);
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.-show .gh--inner::-webkit-scrollbar {
	display:none;
}

.pc .gh--inner {
	transition: none;
}



.gh__logo {
}

.gh__logo a {
	display: block;
	width: 108px;
	height: auto;
	transition: all 0.2s ease-in-out;
}

.gh a:hover svg {
	
}

.gh__logo a:hover {
	color: inherit;
}

.gh__logo a i {
	display: block;
	width: 100%;
	height: 100%;
}

.gh__info {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	text-align: left;
	margin-top: 20px;
	padding: 10px;
	padding-top: 20px;
	position: relative !important;
}

.gh__info:before {
	position: absolute;
	content: '';
	width: calc(100% + ((100vh - 100%) / 2));
	height: 1px;
	background-color: rgba(0,0,0,0.2);
	top: 0;
	left: 0;
}

.gh__info .icon {
	stroke-width: 0.75;
}

.gh__info p {
	width: calc(100% - 60px);
	font-size: 1.2rem;
	line-height: 2;
}



.site-search {
	position: relative;
	transition: all 0.2s ease-in-out;
}

a.site-search {
	cursor: pointer;
}

.site-search__box {
	position: absolute;
	padding-left: 60px;
	opacity: 0;
	width: calc(100% - 60px);
	pointer-events: none;
	transition: transform, opacity 0.2s ease-in-out;
}

.site-search__form {
	display: flex;
	align-items: center;
	position: relative;
	width: 100%;
}

.site-search__input {
	width: 100%;
	height: 30px;
	border-radius: 5px;
	box-sizing: border-box;
	font-size: 1.6rem;
	padding-right: 20px;
	border: 1px solid rgba(0,0,0,.2) !important;
	box-shadow: none;
	background: none !important;
	text-indent: 5px !important;
}

.site-search__btn {
	position: absolute!important;
	top: 0;
	right: 10px;
	bottom: 0;
	width: 13px;
	height: 13px;
	margin: auto;
	padding: 0;
	border: none;
	background: url(../images/icon_search.png) left center no-repeat!important;
	background-size: 13px 13px !important;
	text-indent: -9999px !important;
	overflow: hidden !important;
	cursor: pointer !important;
	transition: transform, opacity 0.2s ease-in-out;
}

.site-search input {
	-webkit-appearance: none;
	        appearance: none;
}

.site-search__box + .lbl {
	box-sizing: border-box;
}

.site-search.-open .site-search__box {
	opacity: 1;
	pointer-events: all;
}

.site-search.-open .lbl {
	padding-left: 160px;
	opacity: 0;
	z-index: -1;
	transition: 0s;
}



#search .lbl {
	transition: opacity .2s ease;
}

@media screen and (min-width: 1280px) {

	.site-search__box {
		padding-left: 0;
	}

	.site-search.-open .lbl {
		padding-left: 0;
		opacity: 1;
	}

	.site-search .site-search__box {
		top: calc(100% + 35px);
		width: 300px;
		right: 13px;
	}

	.site-search__input {
		background-color: #fff !important;
	}

}



.site-subheader {
	position: fixed;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: 60px;
	margin: auto;
	padding: 0 20px;
	background-color: #fff;
	box-sizing: border-box;
	z-index: 200;
	pointer-events: none;
	pointer-events: auto;
	transition: all 0.25s cubic-bezier(0.17,0.84,0.44,1);
	box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

.site-subheader:after {
	position: absolute;
	content: "";
	width: 100%;
	height: 1px;
	background-image: linear-gradient(45deg, #EF849D, #758EC4 50%);
	top: 60px;
	left: 0;
	transform: translateX(100%);
	transition: 0.5s cubic-bezier(0.65,0.05,0.36,1);
	transition-property: transform;
}

.-show .site-subheader {
	box-shadow: none;
}

.-show .site-subheader:after {
	transform: translateX(0);
	transition-timing-function: cubic-bezier(0.17,0.84,0.44,1);
}



.site-subheader__sub-list {
	display: flex;
	align-items: center;
	justify-content: space-between;
	list-style: none;
	padding-left: 0;
	transform: translateX(5px);
}

.site-subheader__sub-list > * {
	margin-left: 15px;
}

.site-subheader__sub-list > *:first-child {
	margin-left: 0;
}

.site-subheader__sub-li {
	width: 40px;
}

.site-subheader__sub-li a {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	transition: inherit;
	transition-duration: 0.4s;
	transition-timing-function: cubic-bezier(0.17,0.84,0.44,1);
	transition-property: opacity, color, transform;
}

.site-subheader__sub-li:nth-child(1) a { transition-delay: 0.0s; }
.site-subheader__sub-li:nth-child(2) a { transition-delay: 0.1s; }
.site-subheader__sub-li:nth-child(3) a { transition-delay: 0.2s; }
.site-subheader__sub-li:nth-child(4) a { transition-delay: 0.3s; }
.site-subheader__sub-li:nth-child(5) a { transition-delay: 0.4s; }
.site-subheader__sub-li:nth-child(6) a { transition-delay: 0.5s; }
.site-subheader__sub-li:nth-child(7) a { transition-delay: 0.6s; }

.site-subheader__sub-li .icon {
	width: 24px;
	height: 24px;
	transition: inherit;
}

.site-subheader__sub-li .icon svg {
	width: 100%;
	height: 100%;
}

.site-subheader__sub-li .lbl {
	display: inline-block;
	font-size: 0.9rem;
	transition: inherit;
	margin-top: 5px;
	white-space: nowrap;
}

.-show .site-subheader__sub-li {
	pointer-events: none;
}

.-show .site-subheader__sub-li .lbl {
	opacity: 0;
}

.-show .site-subheader__sub-li .icon {
	opacity: 0;
	transform: scale(0.5);
}



.menu-button {
	position: relative;
	pointer-events: auto;
	z-index: 201;
	cursor: pointer;
	position: relative;
	display: block;
	margin: auto;
	padding: 0;
	overflow: hidden;
	box-sizing: border-box;
	transition: all 0.5s cubic-bezier(.17,.84,.44,1) !important;
	transition-delay: 0s;
}

.menu-button__icon-wrap {
	position: relative;
	display: block;
	height: 24px;
	width: 24px;
	opacity: 1 !important;
	transform: scale(1) !important;
}

.menu-button__icon {
	transition: background-color 0.2s cubic-bezier(.65,.05,.36,1);
}

.menu-button__icon:before,
.menu-button__icon:after {
	transition-duration: 0.2s;
	transition-timing-function: cubic-bezier(.65,.05,.36,1);
	transition-property: background-color, top, left, width, transform;
	box-sizing: border-box;
}

.menu-button__icon,
.menu-button__icon:before,
.menu-button__icon:after {
	position: absolute;
	display: block;
	height: 1px;
	width: 24px;
	padding: 0;
	
	background: currentColor;
	text-indent: -200px;
}

.menu-button__icon {
	position: relative;
}

.menu-button__icon {
	top: calc(50% - 1px);
	left: 0;
	right: 0;
	margin: 0 auto;
	transform-origin: center 15px;
}

.menu-button__icon:before {
	top: -6px;
	content: "";
	transform-origin: center center;
}

.menu-button__icon:after {
	width: 16px;
	top: 6px;
	content: "";
	transform-origin: center center;
}

.menu-button a:hover {
	color: currentColor;
}

.-show .menu-button {
	
}

.-show .menu-button__icon-wrap {
	transform: translateY(7px) !important;
}

.-show .menu-button__icon,
.-show .menu-button__icon:before,
.-show .menu-button__icon:after {
	left: 0px;
}

.-show a:hover .menu-button__icon:before,
.-show a:hover .menu-button__icon:after {
	
}

.-show .menu-button__icon {
	left: -10px;
	transform: translateX(10px);
	background-color: rgba(255,255,255,0);
}

.-show .menu-button__icon:before {
	transform: rotate(45deg) translate(6.5px, 2.5px);
	width: 18px;
}

.-show .menu-button__icon:after {
	transform: rotate(-45deg) translate(6px, -2px);
	width: 18px;
}

@media screen and (min-width: 1280px) {

	.menu-button {
		display: none;
	}

}


.overlay {
	position: fixed;
	height: 100vh;
	width: 100%;
	top: 0;
	right: 0;
	opacity: 0;
	visibility: hidden;
	transition: 0.5s cubic-bezier(0.65,0.05,0.36,1);
	transition-property: opacity,visibility;
	background: rgba(0,0,0,.2);
	z-index: 10;
}

.-show .overlay {
	opacity: 1;
	visibility: visible;
	cursor: pointer;
	transition-timing-function: cubic-bezier(0.17, 0.84, 0.44, 1);
}


/* ie */

.msie .gh__info .icon {
	margin-right: auto;
}

.msie .site-subheader__sub-list {
	margin-left: auto;
}



@media screen and (min-width: 768px) {
	.gh--inner {
		max-width: 500px;
		margin-left: auto;
	}

	.site-subheader__sub-li {
		margin-left: 30px;
	}
}

@media screen and (min-width: 1280px) {

	.gh,
	.-show .gh,
	.-hide .gh {
		height: 100px;
		pointer-events: auto;
	}

	.gh .anm {
		opacity: 1;
	}

	.gh--inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		max-width: 100%;
		height: 100px;
		margin: 0 auto;
		padding: 0;
		transform: translateX(0);
		opacity: 1;
		z-index: 201;
		overflow: visible;
		background-color: transparent;
		transition: none;
		pointer-events: none;
	}

	.gh__info {
		display: none;
	}

	.site-subheader {
		position: absolute;
		height: 100px;
		padding: 0 40px;
	}

	.site-subheader__sub-list {
		display: none;
	}

	.gh__logo a {
		width: 135px;
	}

	#search .search-box {
		transition: 0s;
	}

	.search-box input[type="text"] {
		font-size: 1.2rem;
	}

	.-open#search {
		width: 180px;
	}

	#search.-open .search-box {
		padding: 0;
		bottom: -10px;
		transition: opacity .4s ease-in-out;
	}

	#search.-open .lbl {
		padding-left: 0;
	}

	/* ie */

	.msie #search.-open .search-box {
		width: 150px;
		left: 0;
		right: 0;
		margin: auto;
	}
}



/* ========================================================================== */
/* global-nav                                                                 */
/* ========================================================================== */

.gh .global-nav {
	z-index: 100;
	box-sizing: border-box;
	transition: all 0.2s ease-in-out;
	width: calc(100% - 40px);
	padding: 100px 0 60px;
}

.gh .g-nav__list {
	position: relative;
	list-style: none;
	padding-left: 0;
	width: 100%;
	height: 100%;
	margin: 0 auto;
	box-sizing: border-box;
	z-index: 20;
}

.gh .g-nav__list.sub {
	margin-top: 20px;
	padding-top: 20px;
	position: relative;
}

.gh .g-nav__list.sub:before {
	position: absolute;
	content: '';
	width: calc(100% + ((100vh - 100%) / 2));
	height: 1px;
	background-color: rgba(0,0,0,0.2);
	top: 0;
	left: 0;
}

.gh .g-nav__li {
	position: relative;
	transition: all 0.2s ease-in-out;
	box-sizing: border-box;
}

.gh .g-nav__list.main .g-nav__li {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-bottom: 20px;
	width: calc(100% + 20px);
}

.gh .g-nav__list.main .g-nav__li:last-child {
	margin-bottom: 0;
}

.gh .g-nav__li a {
	display: block;
	width: 100%;
	height: 100%;
	line-height: 1;
	box-sizing: border-box;
	overflow: hidden;
	transition: all 0.4s cubic-bezier(.17,.84,.44,1);
}

.gh .g-nav__li a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px;
	text-align: left;
	box-sizing: border-box;
}

.gh .g-nav__list.main .g-nav__li > a {
	width: calc(100% - 50px);
	height: 60px;
	padding: 10px;
	border-right: 1px solid rgba(0,0,0,0.2);
	position: relative;
}

.gh .g-nav__list .g-nav__li .icon:first-child {
	display: flex;
	justify-content: center;
	width: 36px;
}

.gh .g-nav__list .g-nav__li .icon.-m {
	stroke-width: 0.75;
}

.gh .g-nav__list .g-nav__li .icon:last-child {
	position: absolute;
	width: 24px;
	height: 24px;
	top: 0;
	right: 10px;
	bottom: 0;
	margin: auto;
}

.g-nav__li .lbl {
	width: calc(100% - 60px);
	font-size: 1.6rem;
}

.g-nav__li .en {
	display: block;
	font-size: 1rem;
	opacity: 0.4;
	margin-top: 10px;
}

.g-nav__list.sub .g-nav__li .lbl {
	font-size: 1.4rem;
}

.gh.follow .global-nav,
.gh.follow .global-nav ul {
	/* height: 30px; */
}

.gh.follow .global-nav li.link a {
	line-height: 3.0rem;
}

.g-nav__li .toggle-button {
	display: block;
	width: 50px;
	height: 100%;
	position: absolute;
	cursor: pointer;
	border: none;
	border-radius: 0;
	background: none;
	color: inherit;
	margin: 0 !important;
	top: 0;
	right: 0;
}

.g-nav__li .toggle-button span {
	position: absolute;
	top: 30px;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 16px;
	height: 16px;
	margin: 0;
	border: 1px solid currentColor;
	border-radius: 50%;
	box-sizing: border-box;
	transition: border 0.5s cubic-bezier(.65,.05,.36,1);
}

.g-nav__li .toggle-button span:before,
.g-nav__li .toggle-button span:after {
	position: absolute;
	content: '';
	width: 8px;
	height: 1px;
	background-color: currentColor;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	margin: auto;
}

.g-nav__li .toggle-button span:after {
	transform: rotate(90deg);
	opacity: 1;
	transition: opacity 0.5s cubic-bezier(.65,.05,.36,1);
}

.g-nav__li .toggle-button span.ui-icon {
	display: none;
}

.-accordion-show .toggle-button span {
	border: transparent;
}

.-accordion-show .toggle-button span:after {
	opacity: 0;
}

.g-nav__li .g-nav__child {
	width: 100%;
	height: 0;
	border: none;
	background: none;
	overflow: hidden;
	transition: opacity, height 0.5s cubic-bezier(.65,.05,.36,1);
}


/* sub */

.g-nav__list.sub .g-nav__li {
	
}

.g-nav__list.sub .g-nav__li a {
	
}

.g-nav__list.sub .g-nav__li .lbl {
	
}



@media screen and (min-width: 768px) {

}

@media screen and (min-width: 1280px) {
	.gh .global-nav {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: calc(100% - 80px);
		padding: 0;
		max-width: 100%;
	}

	.gh .g-nav__list {
		display: flex;
		align-items: center;
		width: auto;
		margin: 0;
		margin-left: 160px;
		pointer-events: auto;
	}

	.gh .g-nav__list.main {
		z-index: 21;
	}

	.gh .g-nav__list .g-nav__li {
		margin-right: 10px;
	}

	.gh .g-nav__list .g-nav__li:last-child {
		margin-right: 0;
	}

	.gh .g-nav__list.main .g-nav__li {
		width: auto;
		margin-top: 0;
		margin-bottom: 0;
		padding: 5px 0;
	}

	.gh .g-nav__list .g-nav__li a {
		width: 100%;
		height: auto;
		border: none;
		box-sizing: border-box;
	}

	.gh .g-nav__list.main .g-nav__li a {
		width: 100%;
		height: auto;
		padding: 13px 15px;
		border-radius: 5px;
		border: none;
	}

	.gh .g-nav__list.main .g-nav__li a:hover {
		color: #fff;
		background-color: #698cc8;
		text-decoration: none;
	}

	.gh .g-nav__li .icon,
	.gh .g-nav__list .g-nav__li .icon:first-child {
		display: none;
	}

	.g-nav__li .lbl {
		width: 100%;
		font-size: 1.4rem;
	}

	.g-nav__li .en {
		display: none;
	}

	.g-nav__li .toggle-button {
		display: none;
	}

	/* sub */

	.gh .g-nav__list.sub {
		margin: 0;
		margin-left: auto;
		padding: 0;
	}

	.gh .g-nav__list.sub:before {
		content: none;
	}

	.gh .g-nav__list.sub .g-nav__li {
		margin-right: 10px;
	}

	.gh .g-nav__list.sub .g-nav__li:last-child {
		margin-right: 0;
	}

	.gh .g-nav__list.sub .g-nav__li .lbl {
		width: 100%;
		font-size: 1.25rem;
	}

	/* other */

	.gh .g-nav__list.other {
		order: 3;
		margin-right: -40px;
		margin-left: 20px;
	}

	.gh .g-nav__list.other .g-nav__li {
		margin: 0;
		border-left: 1px solid rgba(0,0,0,.2);
		width: 80px;
	}

	.gh .g-nav__list.other .g-nav__li a {
		justify-content: center;
		flex-direction: column;
		width: 100%;
		height: 60px;
		text-align: center;
		padding: 0;
		overflow: visible;
	}

	.gh .g-nav__list.other .g-nav__li .icon {
		display: block;
	}

	.gh .g-nav__list.other .g-nav__li .icon:before {
		position: absolute;
		content: '';
		width: 1px;
		height: 1px;
		border-radius: 50%;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		margin: auto;
		background-color: var(--color-link);
		transform: scale(0);
		transition: 0.6s cubic-bezier(.3,2.5,.3,1);
		transition-property: opacity, transform;
		z-index: 1;
		opacity: 0;
	}

	.gh .g-nav__list.other .g-nav__li a:hover .icon:before {
		transform: scale(40);
		opacity: 1;
		transition-duration: 0.8s;
		transition-timing-function: cubic-bezier(.22,1.42,.35,.99);
	}

	.gh .g-nav__list.other .g-nav__li a:hover .icon {
		color: #fff;
		stroke-width: 1.2;
	}

	.gh .g-nav__list.other .g-nav__li .icon svg {
		position: relative;
		z-index: 2;
		transition: color 0.4s ease;
	}

	.gh .g-nav__list.other .g-nav__li .lbl {
		font-size: 1.1rem;
		margin-top: 10px;
	}
}

@media screen and (min-width: 1440px) {

	.gh .g-nav__list {
		margin-left: 180px;
	}

	.gh .g-nav__list.other .g-nav__li {
		width: 100px;
	}
}

	
/* ========================================================================== */
/* slide-area                                                                 */
/* ========================================================================== */

.g-nav__li section {
	display: none;
}

.g-nav__child__ul {
	list-style: none;
	padding-left: 0;
}

.g-nav__child__img {
	display: none;
}

.g-nav__li .g-nav__child__ul-wrap {
	position: relative;
	padding-bottom: 15px;
}

.g-nav__li .g-nav__child__ul-wrap:after {
	position: absolute;
	content: "";
	width: calc(100% - 70px);
	height: 1px;
	background-color: rgba(0,0,0,0.2);
	bottom: 0;
	right: 0;
}

.g-nav__li:last-child .g-nav__child__ul-wrap:after {
	display: none;
}

.g-nav__li .g-nav__child__ul {

}

.g-nav__li .g-nav__child__li a {
	
}

.g-nav__li .g-nav__child__li a:hover {

}

.g-nav__li .g-nav__child__li .lbl {
	width: calc(100% - 60px);
	font-size: 1.3rem;
	line-height: 1.6;
}

.g-nav__li #slide-link6 {
	left: auto;
	right: 0;
	width: 300px;
}

#page .g-nav__li .uk-accordion-content .g-nav__child__li a {
	width: 100%;
	height: auto;
	font-weight: normal;
	font-family: 'Yu Gothic',"游ゴシック",'YuGothic',"游ゴシック体",'Hiragino Kaku Gothic ProN','Meiryo',sans-serif;
	transition: all 0.05s ease-in-out;
	box-sizing: border-box;
}

.g-nav__li:hover section .g-nav__child__li a {
	
}


@media screen and (min-width: 768px) {

}

@media screen and (min-width: 1280px) {

	.g-nav__li .g-nav__child {
		display: block;
		min-width: 760px;
		height: auto;
		border-radius: 5px;
		position: absolute;
		top: 50px;
		left: 0;
		background-color: #fff;
		z-index: -1;
		box-shadow: 5px 5px 20px rgba(0,0,0,0.1);
		transform: translateX(20px);
		opacity: 0;
		pointer-events: none;
		transition: 0.4s cubic-bezier(.17,.84,.44,1);
		transition-property: opacity, transform;
	}

	.-hover .g-nav__child {
		opacity: 1;
		pointer-events: auto;
		transform: translateX(0);
	}

	.g-nav__li .g-nav__child.slide-link6 {
		min-width: 660px;
	}

	.g-nav__child__img {
		display: flex;
		align-items: center;
		width: 100%;
		height: 140px;
		text-align: left;
		box-sizing: border-box;
		position: relative;
	}

	.g-nav__child__img:before {
		position: absolute;
		content: '';
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 1;
		background-image: linear-gradient(90deg, rgba(0,0,0,0.4), rgba(0,0,0,0) 100%);
		mix-blend-mode: multiply;
		opacity: 1;
	}
	
	.g-nav__li .slide-link1 .g-nav__child__img {
		background: url(../../ambulatory/images/main_image.jpg) center no-repeat;
		background-size: cover;
	}
	
	.g-nav__li .slide-link2 .g-nav__child__img {
		background: url(../../hospitalization/images/main_image.jpg) center no-repeat;
		background-size: cover;
	}
	
	.g-nav__li .slide-link3 .g-nav__child__img {
		background: url(../../check_up/images/main_image.jpg) center no-repeat;
		background-size: cover;
	}
	
	.g-nav__li .slide-link4 .g-nav__child__img {
		background: url(../../rehabilitation/images/main_image.jpg) center no-repeat;
		background-size: cover;
	}
	
	.g-nav__li .slide-link5 .g-nav__child__img {
		background: url(../../service/images/main_image.jpg) center no-repeat;
		background-size: cover;
	}
	
	.g-nav__li .slide-link6 .g-nav__child__img {
		background: url(../../about/images/main_image.jpg) center no-repeat;
		background-size: cover;
	}

	.gh .g-nav__list.main .g-nav__child__img a.lbl {
		position: relative;
		display: flex;
		align-items: flex-start;
		flex-direction: column;
		justify-content: center;
		gap: 10px;
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 40px;
		box-sizing: border-box;
		backdrop-filter: blur(15px);
		text-align: left;
		border-radius: 0;
		transition-duration: 0.6s;
		font-family: FOT-マティス Pro M, MatissePro-M, serif;
		color: rgba(255,255,255,1);
		z-index: 2;
	}

	.gh .g-nav__list.main .g-nav__child__img a.lbl:hover {
		backdrop-filter: blur(0px);
		background-color: #698cc89e;
		transition-duration: 1s;
	}

	.gh .g-nav__list.main .g-nav__child__img a.lbl .icon {
		position: absolute;
		inset: 0 40px 0 auto;
		display: block;
		width: 36px;
		height: 36px;
		margin: auto;
		transform: translateX(-20px);
		opacity: 0;
		transition: all 0.5s cubic-bezier(.18,.89,.32,1.28);
	}

	.gh .g-nav__list.main .g-nav__child__img a.lbl .icon svg {
		width: 100%;
		height: 100%;
	}

	.gh .g-nav__list.main .g-nav__child__img a.lbl:hover .icon {
		transition-duration: 0.3s;
		opacity: 1;
		transform: translateX(0);
	}

	.g-nav__child__img .ja {
		display: block;
		font-size: 2rem;
	}

	.g-nav__child__img .en {
		display: block;
		margin: 0;
		font-size: 1rem;
		opacity: 1;
	}

	.g-nav__li .g-nav__child__ul-wrap {
		padding: 30px;
	}

	.g-nav__li .g-nav__child__ul-wrap:after {
		display: none;
	}

	.g-nav__li .g-nav__child__ul {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		box-sizing: border-box;
	}

	.g-nav__li .g-nav__child__ul + .g-nav__child__ul {
		margin-top: 40px;
		position: relative;
	}

	.g-nav__li .g-nav__child__ul + .g-nav__child__ul:before {
		position: absolute;
		content: '';
		width: calc(100% + 60px);
		height: 1px;
		top: -20px;
		left: -30px;
		background-color: rgba(0,0,0,.1);
	}

	.g-nav__li .g-nav__child__li {
		width: calc(50% - 5px);
		margin: 0;
	}

	.gh .g-nav__li .g-nav__child__li a {
		align-items: flex-start;
		padding: 10px 0 !important;
	}

	.gh .g-nav__child__li .icon{
		display: block !important;
		width: auto !important;
		margin-right: 10px;
		margin-top: -2px;
		transition: all 0.2s cubic-bezier(.22,.61,.36,1);
	}

	.gh .g-nav__li .g-nav__child__li .lbl {
		width: 100%;
		font-feature-settings: "palt";
	}

	.gh .g-nav__li .g-nav__child__li a:hover {
		color: #3166ad !important;
		background-color: rgba(101,128,191,0.05) !important;
	}

	.gh .g-nav__li .g-nav__child__li a:hover .icon {
		stroke-width: 1.3;
		transform: translateX(5px);
	}
}

@media screen and (min-width: 1440px) {
	.gh .g-nav__li .g-nav__child {
		min-width: 900px;
	}

	.gh .g-nav__li .g-nav__child.slide-link6 {
		min-width: 800px;
	}

	.gh .g-nav__li .g-nav__child__ul::after {
		content: '';
		display: block;
		width: calc(33.33% - 10px);
	}

	.gh .g-nav__li .g-nav__child__li {
		width: calc(33.33% - 10px);
	}
}





/* ========================================================================== */
/* topicpath                                                                  */
/* ========================================================================== */

.topicpath {
	position: relative;
	width: 100%;
	height: auto;
	margin: 0 auto;
	padding-top: 60px;
	font-size: 1.2rem;
	overflow: hidden;
	background-color: #fff;
	box-sizing: border-box;
}

.topicpath ul {
	display: flex;
	flex-wrap: wrap;
	text-align: left;
	overflow: hidden;
	padding: 10px 0;
}

.topicpath li {
	display: flex;
	align-items: center;
	min-height: 40px;
	margin-right: 10px;
	line-height: 1.4;
	background: url(../images/topicpath_line.png) right center no-repeat;
	background-size: 5px 9px;
}

.topicpath li:last-child {
	background: none;
}

.topicpath li a {
	display: inline-block;
	padding: 10px;
	padding-left: 0;
	padding-right: 16px;
	text-decoration: none;
	transition: all .2s ease;
}

.topicpath li a:hover {
	color: var(--color-link);
}


@media screen and (min-width: 768px) {
	.topicpath ul {
		padding: 0;
	}

	.topicpath li {
		min-height: 60px;
	}
}

@media screen and (min-width: 1280px) {
	.topicpath {
		padding-top: 100px;
	}
}






/* ========================================================================== */
/* contents                                                                   */
/* ========================================================================== */

.contents {
	background-color: #fff;
}





/* ========================================================================== */
/* title-area                                                                 */
/* ========================================================================== */

.title-area {
	display: flex;
	align-items: center;
	position: relative;
	width: 100%;
	height: 100vw;
	min-height: 460px;
	max-height: 100vh;
	box-sizing: border-box;
	box-shadow: inset 0px 1px 0px rgba(0,0,0,0.1);
	font-feature-settings: "palt";
	z-index: 0;
	
	transition: opacity 1s ease-in-out;
	opacity: 0;
}

.title-area:before {
	position: absolute;
	content: '';
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 1;
	background-image: linear-gradient(90deg, #8FA3CE, #8FA3CE00 100%);
	opacity: 0;
	border-radius: inherit;
}

.title-area .w-state {
	opacity: 0;
	text-align: left;
	transition: opacity 1s ease-in-out 0.5s;
	z-index: 1;
}

.load .title-area {
	opacity: 1;
}

.load .title-area .w-state {
	opacity: 1;
}

@media screen and (min-width: 1280px) {

	#title-area {
		border-radius: 10px;
		width: calc(100% - 100px);
		max-width: 1600px;
		max-height: calc(100vh - 260px);
		margin-right: auto;
		margin-left: auto;
		border: none;
		box-shadow: none;
	}

	.title-area .w-state {
		width: calc(100% - 300px);
	}

}



.title-area__ja {
	margin-top: 20px;
	font-size: 3rem;
	font-family: "FOT-マティス Pro DB", MatissePro-DB, serif;
	font-weight: bold;
	line-height: 1.5;
	transform: translateX(-0.075em); /*text-indentは複数行の場合があるためNG */
	
}

.title-area__ja span {
	display: block;
	margin-top: 20px;
	font-size: 1.2rem;
}

.title-area__en {
	display: block;
	font-size: 1.2rem;
	font-family: Palatino, 'Palatino Linotype', serif;
	font-style: italic;
	font-weight: normal;
}

.title-area__copy {
	margin-top: 30px;
	font-family: "FOT-マティス Pro M", MatissePro-M, serif;
	font-size: 1.5rem;
	font-weight: bold;
	line-height: 2;
}

.title-area__read {
	margin-top: 20px;
	font-size: 1.4rem;
	line-height: 2;
	display: none;
}

@media screen and (min-width: 768px) {

	.title-area__ja {
		font-size: 4.5rem;
	}

	.title-area__en {
		font-size: 1.75rem;
	}

	.title-area__copy {
		font-size: 2rem;
	}

}

@media screen and (min-width: 1280px) {

	.title-area__ja {
		font-size: 6.0rem;
	}

	.title-area__copy {
		margin-top: 70px;
		font-size: 2.4rem;
	}

	.title-area__read {
		display: block;
	}

}





/* ========================================================================== */
/* contents-area                                                              */
/* ========================================================================== */

.contents-area {
	position: relative;
	text-align: left;
	margin: 50px auto;
	background-color: #fff;
	font-size: 1.4rem;
}

@media screen and (min-width: 1280px) {

	.contents-area {
		margin: 100px auto;
	}

}


:where(.contents-area) section {
	display: inline-block;
	width: 100%;
	margin-bottom: 60px;
	vertical-align: top;
	box-sizing: border-box;
}

:where(.contents-area) section:last-child {
	margin-bottom: 0;
}


:where(.contents-area) h3 {
	margin-bottom: 15px;
	font-size: 1.8rem;
	line-height: 1.4;
}

:where(.contents-area) a {
	display: inline-block;
	transition: all 0.2s ease-in-out;
}

:where(.contents-area) h3 a,
:where(.contents-area) a h3 {
	position: relative;
	display: inline-block;
	padding-left: 40px;
	color: currentColor;
	text-decoration: none;
}

:where(.contents-area) h3 a span,
:where(.contents-area) a h3 span {
	display: inline-block;
}

:where(.contents-area) h3 a:before,
:where(.contents-area) a h3:before {
	position: absolute;
	content: "";
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	width: 18px;
	height: 18px;
	background-color: currentColor;
	background-image: url(../images/arrow_round.png);
	background-position: left top;
	background-repeat: no-repeat;
	background-size: 100%;
	border-radius: 50%;
	transition: all 0.2s ease-in-out;
}


/* contents-area modules ------------------------------------------------------------------------- */


.section-header {
	position: relative !important;
}

.section-header-inner {
	display: inline-flex;
	align-items: center;
	position: relative;
	padding: 30px 0;
}

.section-header.-bd-t:before,
.section-header.-bd-b:before {
	position: absolute;
	content: '';
	width: 100%;
	height: 3px;
	background-color: #ccc;
}

.section-header.-bd-t:before {
	top: 0;
	left: 0;
}

.section-header.-bd-b:before {
	bottom: 0;
	left: 0;
}

.-bd-t .section-header-inner:before,
.-bd-b .section-header-inner:before {
	position: absolute;
	content: '';
	width: 100%;
	height: 3px;
	background-color: #8D9ECC;
}

.-bd-t .section-header-inner:before {
	top: 0;
	left: 0;
}

.-bd-b .section-header-inner:before {
	bottom: 0;
	left: 0;
}

.section-header__ttl {
	font-size: 2rem;
}

.contents-area .wrap {
	padding: 0 60px;
}




:where(.contents-area) p {
	font-size: inherit;
	line-height: 1.8;
	margin-bottom: 1.5em;
}

:where(.contents-area) p:last-child {
	margin-bottom: 0;
}

:where(.contents-area) .read {
	margin-bottom: 30px;
}

:where(.contents-area) section p {
	color: currentColor;
}

:where(.contents-area) section a:hover p {
	
}

:where(.contents-area) .multi {
	display: block;
	width: 100%;
	padding: 0;
}

:where(.contents-area) figure img {
	display: block;
	width: 100%;
	border-radius: 5px;
}

:where(.contents-area) figure figcaption {
	font-size: 1.2rem;
	margin-top: 10px;
}

:where(.contents-area) hr {
	display: block;
	width: 100%;
	height: 1px;
	margin: 0 auto 50px;
	text-align: center;
	border: none;
	background-color: rgba(0,0,0,0.2);
	box-sizing: border-box;
}

/* ie */

.msie .section-header__ttl {
	margin-right: auto;
}

@media screen and (min-width: 1280px) {

	:where(.contents-area) hr {
		margin: 0 auto 60px;
	}

	:where(.contents-area) section h3 {
		font-size: 2.2rem;
	}

	:where(.contents-area) section h3 a:before,
	:where(.contents-area) section a h3:before {
		width: 21px;
		height: 21px;
	}

	:where(.contents-area) p {
		font-size: 1.4rem;
	}

	:where(.contents-area) figure figcaption {
		font-size: 1.3rem;
	}

}


/* ------------------------------------------------------------------------- */


.contents-menu {
	
}

.contents-menu section {
	padding: 30px 0;
	margin-bottom: 0;
	border-top: 1px solid rgba(0,0,0,0.1);
	font-feature-settings: "palt";
}

.contents-menu h3 {
	color: currentColor;
}

.contents-menu p {
	color: currentColor;
	padding-left: 40px;
}

.contents-menu a {
	display: block;
	height: 100%;
	padding: 0;
	box-sizing: border-box;
	transition: 0.2s ease-in-out;
	border-radius: 5px;
	text-decoration: none;
	transition-property: opacity, color, background, box-shadow;
}

@media screen and (min-width: 1280px) {

	.contents-menu {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.contents-menu:before,
	.contents-menu:after {
		content: '';
		display: block;
		width: calc(33.33% - 20px);
		order: 2;
	}

	.contents-menu section {
		width: calc(33.33% - 20px);
		padding: 40px 0;
	}

	.contents-menu a {
		
	}

	.contents-menu a:hover {
		color: var(--color-link);
	}

}


/* ========================================================================== */
/* lower-contents                                                             */
/* ========================================================================== */

.lower-contents {
	width: 100%;
	background-color: #fff;
}

.lower-contents .lower-image {
	position: relative;
	clear: both;
	height: 40px;
	box-shadow: inset 0px 1px 2px rgba(0,0,0,0.15);
	background-size: cover;
}

.lower-contents .lower-image:before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	-webkit-backdrop-filter: blur(16px);
	        backdrop-filter: blur(16px);
}

.lower-contents .contents-area {
	max-width: 1560px;
	margin: 0 auto;
	padding: 0;
	display: flex;
	flex-direction: column-reverse;
}

.lower-contents .PageHeader-inner {
	text-align: left;
}

.lower-contents .PageHeader__ttl {
	height: 100px;
	border-bottom: 1px solid rgba(0,0,0,0.2);
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	justify-content: center;
	font-feature-settings: "palt"; 
}

.lower-contents .PageHeader__ttl .ja {
	font-size: 2rem;
	font-weight: bold;
	line-height: 1.4;
}

.lower-contents .PageHeader__ttl .sub {
	margin-top: 1em;
}

@media screen and (min-width: 768px) {

	.lower-contents .lower-image {
		height: 80px;
	}

	.lower-contents .PageHeader__ttl {
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
	}

	.lower-contents .PageHeader__ttl .sub {
		margin-top: 0;
		margin-left: 1em;
	}
}

@media screen and (min-width: 1280px) {
	.lower-contents .contents-area {
		flex-direction: row;
	}

	.lower-contents .PageHeader__ttl {
		height: 120px;
	}

	.lower-contents .PageHeader__ttl .ja {
		font-size: 3rem;
	}

	.lower-contents .PageHeader__ttl .sub {
		font-size: 1.6rem;
	}
}


/* ========================================================================== */
/* side-contents                                                              */
/* ========================================================================== */

.side-contents {
	text-align: left;
}

.side-contents ul {
	list-style: none;
	padding-left: 0;
}



.SideHeader-inner {
	padding: 70px 0 40px;
}

.SideHeader-inner a {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.SideHeader__ttl {

}

.SideHeader__ttl .ja {
	display: block;
	font-size: 2rem;
}

.SideHeader__ttl .en {
	display: block;
	margin-top: 1em;
}

.SideNav {
	border-top: 1px solid rgba(0,0,0,0.1);
}

.SideNav-inner {
	padding-top: 40px;
}

.SideNavList {
}

.SideNavList__item {
	padding: .5em 0;
}

.SideNavList__item a {
	font-weight: bold;
}

.SideNavList__item.current a {
	color: blue;
}


.side-contents {
	position: relative;
	border-top: 1px solid rgba(0,0,0,0.2);
	vertical-align: top;
}

.side-contents a {
	text-decoration: none;
}

.side-wrap {
	padding-bottom: 30px;
}

.side-wrap > * {
	margin-top: 30px;
}

.side-wrap > *:first-child {
	margin-top: 0;
}

.side-contents .category-title {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 110px;
	vertical-align: middle;
	border-bottom: 1px solid rgba(0,0,0,0.2);
	box-sizing: border-box;
	margin-bottom: 30px;
}

.side-contents .category-title a {
	width: 220px;
	transition: all 0.2s ease;
}

.side-contents .category-title a:hover {
	color: var(--color-link);
}

.side-contents .category-title h1 {
	margin-bottom: 10px;
	font-size: 1.6rem;
	font-family: "FOT-マティス Pro DB", MatissePro-DB, serif;
	font-feature-settings: "palt";
}

.side-contents .category-title .eng {
	font-size: 1.2rem;
	font-family: Palatino, 'Palatino Linotype';
	font-style: italic;
	line-height: 1;
}


.side-contents .side-nav {
}

.side-contents .side-nav li {
	margin-top: 5px;
}

.side-contents .side-nav li:first-child {
	margin-top: 0;
}


.side-contents .side-nav li.sep {
	margin: 15px 0;
	border-top: 1px dashed rgba(0,0,0,0.4);
}

.side-contents .side-nav li.current > a {
	font-weight: bold;
}

.side-contents .side-nav li a {
	display: block;
	color: #000;
	padding: 5px 0 5px 15px;
	font-size: 1.25rem;
	line-height: 1.5;
	background: url(../images/arrow.png) left center no-repeat;
	background-size: 3px 5px;
	transition: 0.2s cubic-bezier(.17,.84,.44,1);
	transition-property: background, color;
}

.side-contents .side-nav li a[target="_blank"]:after {
	content: "";
	display: inline-block;
	width: 10px;
	height: 10px;
	background: transparent url("../images/icon_blank.png") no-repeat scroll left center;
	background-size: 10px 9px;
	margin-left: 5px;
}

.side-contents .side-nav li a span {
	display: inline-block;
	white-space: nowrap;
}
	
.side-contents .side-nav li a:hover {
	color: var(--color-link);
	background-position: 5px center;
	transition-timing-function: cubic-bezier(.27,1.89,.36,1);
}
.side-contents .side-nav li a[target="_blank"]:hover {
	background-position: left center;
}

.side-contents .side-lower {
	display: none;
	margin: 5px 0 0 20px;
}

.side-contents .side-lower li {
	margin-top: 5px;
}

.side-contents .side-lower li a {
	font-size: 1.3rem;
	font-weight: normal;
	margin-top: 5px;
}

.side-contents .side-lower li.current a {
	font-weight: bold;
	color: #333;
}

.side-contents .side-lower li.current a:hover {
	color: var(--color-link);
	transition: all 0.1s ease-in-out;
}

.lower-contents .side-contents .side-nav section {
	width: 100%;
	margin-top: 40px;
}

.lower-contents .side-contents .side-nav section h2 {
	margin-top: 20px;
	font-size: 1.4rem;
	font-weight: bold;
}

@media screen and (min-width: 1280px) {
	.side-contents {
		width: 320px !important;
		border-right: 1px solid rgba(0,0,0,0.1);
		border-top: none;
	}

	.side-contents .side-wrap {
		position: -webkit-sticky;
		position: sticky;
		top: 0px;
		bottom: 0;
		padding-bottom: 80px;
		transition: top 0.25s cubic-bezier(0.65,0.05,0.36,1);
	}

	.scroll-up .side-contents .side-wrap {
		top: 110px;
	}

	.scroll-down .side-contents .side-wrap {
		top: 10px;
	}

	.side-contents .category-title {
		width: 100%;
		height: 120px;
	}

	.side-contents .category-title a {
		width: auto;
	}

	.side-contents .category-title h1 {
		font-size: 2.0rem;
	}

	.side-contents .side-nav {
		width: 100%;
	}

	.side-contents .side-lower {
		margin: 5px 0 0 20px;
	}
}



.side-banner {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.side-banner > * {
	width: 100%;
}

@media screen and (min-width: 768px) {
	
}

@media screen and (min-width: 1280px) {
	
}

.side-banner a {
	width: 100%;
	display: block;
	color: var(--color-link);
	font-weight: bold;
	font-size: 1.2rem;
	line-height: 1.4;
	padding: 10px;
	text-align: center;
	border: 1px solid currentColor;
	background: none;
	border-radius: 5px;
	box-sizing: border-box;
	transition: all 0.2s ease-in-out;
}

.side-banner a:hover {
	color: #fff;
	background-color: var(--color-link);
	border-color: var(--color-link);
}

.side-banner .image {
	width: calc(50% - 5px);
}

.side-banner .image a {
	position: relative;
	padding: 0;
	border: none;
}

.side-banner .image a {
	border: none;
	box-shadow: 8px 8px 15px rgba(0,0,0,0.1);
}

.side-banner .image a:hover {
	box-shadow: 1px 1px 4px rgba(0,0,0,.15);
}

.side-banner .image a::before {
	position: absolute;
	inset: 0;
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	border: 1px solid currentColor;
	border-radius: inherit;
	box-sizing: border-box;
	z-index: 1;
	border-color: var(--color-link);
	transition: all 0.2s ease-in-out;
	opacity: 0.5;
}

.side-banner .image a:hover::before {
	opacity: 1;
}

.side-banner .image img {
	display: block;
	width: 100%;
	border-radius: inherit;
}

@media screen and (min-width: 768px) {
	
}

@media screen and (min-width: 1280px) {
	.side-banner .image {
		width: 100%;
	}
}



/* ========================================================================== */
/* main-contents                                                              */
/* ========================================================================== */

.main-contents {
	width: 100%;
	text-align: left;
}

.main-contents {
	padding-bottom: 80px;
	box-sizing: border-box;
	text-align: left;
	line-height: 1.8;
}

@media screen and (min-width: 1280px) {
	.main-contents {
		width: calc(100% - 320px);
	}
}


:where(.lower-contents .main-contents) #caption {
	margin-bottom: 30px;
	font-size: 2.2rem;
	font-family: "FOT-マティス Pro M", MatissePro-M, serif;
	color: var(--color-link);
	text-align: left;
	line-height: 1.6;
	font-feature-settings: "palt"; 
}

.page-section,
:where(.lower-contents .main-contents) section {
	margin-bottom: 50px;
}

.page-section:last-of-type,
:where(.lower-contents .main-contents) section:last-of-type {
	margin-bottom: 0;
}

:where(.lower-contents .main-contents) .outline {
	margin-bottom: 20px;
}

:where(.lower-contents .main-contents) .outline:last-child {
	margin-bottom: 0;
}

.contents-area .anchor-link,
:where(.lower-contents .main-contents) .anchor-link {
	margin-top: -110px;
	padding-top: 110px;
}

:where(.lower-contents .main-contents) h2 {
	position: relative;
	clear: both;
	margin-bottom: 20px;
	padding-left: 1.7em;
	font-size: 1.8rem;
	color: #000;
	line-height: 1.4;
	font-feature-settings: "palt"; 
}

:where(.lower-contents .main-contents) h2:before {
	position: absolute;
	content: "";
	left: 0;
	top: 0.2em;
	width: 1em;
	height: 1em;
	margin: auto;
	border: 0.25em solid var(--color-link);
	border-radius: 50%;
	box-sizing: border-box;
}

:where(.lower-contents .main-contents) h3 {
	display: block;
	margin-bottom: 10px;
	font-size: 1.6rem;
	font-weight: bold;
	color: var(--color-link);
	line-height: 1.4;
	font-feature-settings: "palt"; 
}

:where(.lower-contents .main-contents) h4 {
	margin-bottom: 10px;
	font-size: 1.5rem;
	font-weight: bold;
	line-height: 1.4;
	font-feature-settings: "palt"; 
}

.order-list,
.disc-list {
	margin-bottom: 20px;
}

.order-list:last-child,
.disc-list:last-child {
	margin-bottom: 0;
}

.order-list > li {
	margin-left: 20px;
	font-size: 1.4rem;
	color: #333;
	list-style: decimal;
}

.disc-list > li {
	margin-left: 20px;
	font-size: 1.3rem;
	color: #333;
	list-style: disc;
}

.order-list li + li,
.disc-list li + li {
	margin-top: 0.25em;
}

:where(.main-contents) dl {
	
}

:where(.main-contents) dt {
	margin-bottom: 10px;
}


@media screen and (min-width: 768px) {
	.order-list {
		
	}
}

@media screen and (min-width: 1280px) {
	:where(.lower-contents .main-contents) #caption {
		font-size: 4rem;
	}
	
	.page-section,
	:where(.lower-contents .main-contents) section {
		margin-bottom: 60px;
	}

	:where(.lower-contents .main-contents) .outline {
		margin-bottom: 30px;
	}

	:where(.lower-contents .main-contents) h2 {
		font-size: 2.5rem;
	}

	:where(.lower-contents .main-contents) h3 {
		font-size: 1.8rem;
	}

	:where(.lower-contents .main-contents) h4 {
		font-size: 1.6rem;
	}

	:where(.main-contents) .disc-list > li {
		font-size: 1.4rem;
	}

	:where(.main-contents) dl {
		font-size: 1.4rem;
	}
	
	:where(.main-contents) dt {
		font-size: 1.6rem;
	}

	:where(.main-contents).ui-accordion {
		width: calc(100% - 320px);
	}
}


/* ========================================================================== */
/* PageHeader                                                                 */
/* ========================================================================== */

.PageHeader-inner {
	text-align: center;
}

* + .PageHeader__ttl {
	margin-top: 1em;
}

.PageHeader__ttl {
	font-family: "FOT-マティス Pro M", MatissePro-M, serif;
	/* white-space: nowrap; */
}

.PageHeader__ttl a {
	text-decoration: none;
}

.PageHeader__ttl a:hover {
	color: var(--color-link);
}

.PageHeader__ttl .ja {
	display: block;
	font-size: 3rem;
}

.PageHeader__ttl .en {
	display: block;
}

.PageHeader__read {
	font-size: 1.5rem;
	margin-top: 2em;
}


/* ========================================================================== */
/* PageBody                                                                   */
/* ========================================================================== */

.PageBody {
	margin-top: 30px;
}



/* table ---------- */

:where(.main-contents) table {
	width: 100%;
	margin: 20px 0;
	font-size: 1.2rem;
	text-align: center;
	border-collapse: separate;
}

:where(.main-contents) th {
	padding: 6px 10px;
	font-weight: bold;
	color: #333;
	text-align: center;
	vertical-align: top;
	background: rgba(0,0,0,0.05);
	box-shadow: 1px 0px 0px #dfdfdf;
	/*border-right: 1px solid #fff;*/
}

:where(.main-contents) th:last-child {
	border-right: none;
}

:where(.main-contents) td {
	padding: 10px;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid #dfdfdf;
	box-shadow: 1px 0px 0px #dfdfdf;
}

:where(.main-contents) th:last-child,
:where(.main-contents) td:last-child {
	box-shadow: none;
}

:where(.main-contents) .table-outer {
	overflow-x: auto;
	margin: 0 -25px 20px;
}

:where(.main-contents) .table-outer table {
	position: relative;
	margin: 0;
	margin-left: 25px;
}

:where(.main-contents) .table-outer table:after {
	position: absolute;
	content: '';
	width: 25px;
	height: 100%;
	top: 0;
	right: -25px;
}

@media screen and (min-width: 768px) {
	:where(.main-contents) .table-outer {
		margin: 0 0 20px;
	}
	
	:where(.main-contents) .table-outer table {
		margin: 0;
	}
	
	:where(.main-contents) .table-outer table:after {
		content: none;
	}

	:where(.main-contents) th,
	:where(.main-contents) td {
		padding: 20px 10px;
	}
}

@media screen and (min-width: 1280px) {
	:where(.main-contents) th {
		font-size: 1.4rem;
	}

	:where(.main-contents) td {
		font-size: 1.3rem;
	}
}



/* lower-nav ---------- */

.lower-nav {
	box-shadow: inset 0 -1px 0 rgba(0,0,0,0.2);
	overflow: hidden;
	padding: 0;
	font-size: 1.2rem;
}

.lower-nav > * {
	font-weight: bold;
	border-bottom: 1px solid rgba(0,0,0,0.1);
}

.lower-nav > *:first-child {
	margin-top: 0;
}

.lower-nav > *:last-child {
	border-bottom: none;
}

.lower-nav li.selected {
	height: 100%;
	padding: 10px 10px 10px 20px;
	font-weight: bold;
	color: var(--color-link);
	border-left: 5px solid var(--color-link);
}

.lower-nav li a {
	display: block;
	padding: 10px 10px 10px 20px;
	background: url(../images/arrow.png) left center no-repeat;
	border-left: 5px solid transparent;
	background-size: 3px 5px;
	text-decoration: none;
	box-sizing: border-box;
	transition: 0.2s cubic-bezier(.17,.84,.44,1);
	transition-property: background, color, padding, border;
}

.lower-nav li a:hover {
	background-position: 20px center;
	padding-left: 25px;
	transition-timing-function: cubic-bezier(.27,1.89,.36,1);
}

.lower-nav li a:hover {
	color: var(--color-link);
	background-position: 3px center;
}

@media screen and (min-width: 768px) {
	.lower-nav {
		padding: 10px 0 0;
	}

	.lower-nav > * {
		display: inline-block;
		font-size: 1.3rem;
		margin: 0 0 0 10px;
	}

	.lower-nav > *:first-child {
		margin-left: 0;
	}

	.lower-nav li.selected {
		border-left: none;
		border-bottom: 5px solid var(--color-link);
		padding: 15px 10px;
	}

	.lower-nav li a {
		border-left: none;
		border-bottom: 5px solid transparent;
		padding: 15px 10px;
		text-decoration: none;
		background: none;
	}

	.lower-nav li a:hover {
		border-color:  rgba(105,140,200,0.5);
	}

	.lower-nav li a:hover {
		background-position: 20px center;
		padding-left: 10px;
		transition-timing-function: cubic-bezier(.27,1.89,.36,1);
	}

	.lower-nav li a:hover {
		background-position: 3px center;
	}
}



/* flow ---------- */

#flow .flow-item {
	position: relative;
	margin-bottom: 30px;
	padding-bottom: 60px;
}

#flow .flow-item:after {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	content: "";
	width: 46px;
	height: 48px;
	margin: auto;
	background: url(../images/flow_arrow.png) center bottom no-repeat;
	background-size: 46px 48px;
}

#flow .flow-item:last-of-type {
	margin-bottom: 0;
	padding-bottom: 0;
}

#flow .flow-item:last-of-type:after {
	display: none;
}

#flow .flow-item h1 {
	display: flex;
	margin-bottom: 20px;
	padding: 5px 0;
	font-size: 1.6rem;
	font-weight: normal;
	color: #000;
	border-top: 1px dotted #ccc;
	border-bottom: 1px dotted #ccc;
}

#flow .flow-item h1 span {
	padding: 0 15px 0 12px;
	color: var(--color-link);
	font-weight: bold;
}


@media screen and (min-width: 1280px) {
	#flow .flow-item h1 {
		font-size: 2.2rem;
	}
}



/* other-link ---------- */


.other-link {
	clear: both;
	position: relative;
	width: 100%;
	padding-bottom: 30px;
}

.other-link li {
	display: inline-block;
	width: 100%;
	list-style: none;
	vertical-align: top;
	box-sizing: border-box;
}

.other-link li + li {
	margin-top: 20px;
}

.other-link li.selected a {
	pointer-events: none;
	border-color: rgba(0,0,0,0.1) !important;
}

.other-link li.selected h1,
.other-link li.selected .title {
	padding-left: 0 !important;
	font-weight: 600;
	color: #000;
}

.other-link li.selected h1:before,
.other-link li.selected .title:before {
	display: none !important;
}

.other-link.two ul {
}

.other-link.two li {
}

.other-link.two li + li {
	margin-top: 20px;
}


.other-link.three {
	
}

.other-link.three ul {
	display: flex;
	width: 100%;
}

.other-link.three li {
	display: block;
	width: 33.333%;
	margin: 0 20px 10px 0;
}

.other-link.three li:last-child {
	margin-right: 0;
}



.other-link.four {
	
}

.other-link.four ul {
	display: flex;
	width: 100%;
}

.other-link.four li {
	display: block;
	width: 25%;
	margin: 0 20px 10px 0;
}

.other-link.four li:last-child {
	margin-right: 0;
}




.other-link li a {
	display: block;
	padding: 20px;
	border: 1px solid var(--color-link);
	text-decoration: none;
	border-radius: 5px;
	transition: all 0.1s ease-in-out;
	box-sizing: border-box;
}

.other-link li h1,
.other-link li .title {
	position: relative;
	display: inline-block;
	margin-bottom: 10px;
	padding-left: 30px;
	color: #333;
	transition: all 0.1s ease-in-out;
}

.other-link li h1 {
	font-size: 1.6rem;
	line-height: 1.4;
}


.other-link li h1:only-child,
.other-link li .title:only-child {
	margin-bottom: 0;
}

.other-link li h1 span,
.other-link li .title span {
	display: inline-block;
	white-space: nowrap;
}

.other-link li p {
	line-height: 20px;
	line-height: 2.0rem;
}

.other-link li h1:before,
.other-link li .title:before {
	position: absolute;
	left: 0;
	top: 2px;
	content: "";
	width: 21px;
	height: 21px;
	background: #555 url(../images/arrow_round.png) left center no-repeat;
	background-size: 21px 21px;
	border-radius: 50%;
	transition: all 0.1s ease-in-out;
}

.other-link li a:hover {
	background-color: rgba(0,174,255,0.05);
}

.other-link li a:hover h1,
.other-link li a:hover .title {
	color: var(--color-link);
	background-position: 5px 7px;
}

.other-link li a:hover h1:before,
.other-link li a:hover .title:before {
	background-color: var(--color-link);
}

@media screen and (min-width: 768px) {
	.other-link.two ul {
		display: flex;
		justify-content: space-between;
	}

	.other-link.two li {
		width: calc(50% - 10px);
	}

	.other-link.two li + li {
		margin-top: 0;
	}

	.other-link li a {
		padding: 30px 20px;
	}
}

@media screen and (min-width: 1280px) {
	.other-link li h1 {
		font-size: 2.2rem;
		line-height: 1.2;
	}
}



/* page-link ---------- */

.page-link {
	position: relative;
	/* display: inline-block; */
	margin: 10px 0 0 0;
	overflow: hidden;
}

.page-link li {
	margin-left: 0;
	margin-bottom: 10px;
}

.page-link a {
	display: block;
	height: 30px;
	padding-left: 25px;
	padding-right: 15px;
	font-size: 1.2rem;
	line-height: 30px;
	line-height: 3.0rem;
	text-decoration: none;
	border: 1px solid rgba(0,0,0,0.2);
	border-radius: 5px;
	background: url(../images/arrow_up_black.png) 12px center no-repeat;
	background-size: 5px 3px;
	box-sizing: border-box;
	transition: all 0.1s ease-in-out;
}

.page-link a:hover {
	background-color: #fafafa;
	background-position: 12px 15px;
}

@media screen and (min-width: 768px) {
	.page-link {
		display: inline-block;
	}
	
	.page-link li {
		display: inline-block;
		margin-right: 10px;
	}
}

@media screen and (min-width: 1280px) {

}


/* link-button ---------- */

.link-button,
.lower-contents .main-contents .link-button {
	display: block;
	position: relative;
	margin: 10px 0 0 0;
}

.link-button li,
.lower-contents .main-contents .link-button li {
	margin-bottom: 10px;
}

.link-button a,
.lower-contents .main-contents .link-button a {
	display: block;
	padding: 10px 15px 10px 23px;
	color: var(--color-link);
	font-size: 1.4rem;
	font-weight: bold;
	line-height: 1.5;
	text-decoration: none;
	border: 1px solid rgba(105,140,200,0.5);
	border-radius: 5px;
	background: url(../images/arrow_blue.png) 12px center no-repeat;
	background-size: 3px 5px;
	box-sizing: border-box;
	transition: 0.2s cubic-bezier(.17,.84,.44,1);
	transition-property: background-color, color, padding;
}

.link-button a:hover,
.lower-contents .main-contents .link-button a:hover {
	background-color: rgba(105,140,200,.1);
	transition-timing-function: cubic-bezier(.27,1.89,.36,1);
	animation: 0.4s link-button-bg cubic-bezier(.27,1.89,.36,1) 1;
}

.link-button.-l a,
.lower-contents .main-contents .link-button.-l a {
	padding: 20px 10px 20px 30px;
}



@keyframes link-button-bg {
	0% {
		background-position: 8px center;
	}
	
	100% {
		background-position: 12px center;
	}
}

@media screen and (min-width: 768px) {

	.link-button,
	.lower-contents .main-contents .link-button {
		display: inline-flex;
		gap: 10px;
		flex-wrap: wrap;
		position: relative;
		margin: 10px 0 0 0;
	}

	.link-button.-w100p,
	.lower-contents .main-contents .link-button.-w100p {
		display: block;
	}

	.link-button li,
	.lower-contents .main-contents .link-button li {
		display: inline-block;
		margin: 0;
	}

	/* block display button */
	.link-button.-block,
	.lower-contents .main-contents .link-button.-block {
		display: flex;
		flex-direction: column;
	}

	.link-button.-block li,
	.lower-contents .main-contents .link-button.-block li {
		display: block;
	}

}

@media screen and (min-width: 1280px) {

}




/* image-link ---------- */

.main-contents #image-link {
	position: relative;
	margin: 20px 0 40px;
}

.main-contents #image-link li p span {
	font-size: 1.1rem;
}

.main-contents #image-link li a {
	text-decoration: none;
}

.main-contents #image-link li a:hover {
	border-color: var(--color-link);
	background-color: rgba(0,174,255,0.05);
}

.main-contents #image-link li a:hover p {
	color: var(--color-link);
}

.main-contents #image-link li a:hover p:before {
	background-color: var(--color-link);
}

@media screen and (max-width: 1000px) {
	.main-contents #image-link {
		width: 100%;
	}
	.main-contents #image-link li {
		width: 100%;
		margin-bottom: 10px;
	}
	.main-contents #image-link li img {
		width: 25%;
	}
}


.main-contents #image-link {
	width: 100%;
}

.main-contents #image-link li {
	box-sizing: border-box;
}

.main-contents #image-link li + li {
	margin-top: 20px;
}

.main-contents #image-link li a {
	display: flex;
	align-items: center;
	border: 1px solid #999;
	border-radius: 5px;
	transition: all 0.1s ease-in-out;
}

.main-contents #image-link li img {
	width: 40%;
}

.main-contents #image-link li p {
	position: relative;
	padding: 1em;
	padding-left: 34px;
	font-size: 1.5rem;
	line-height: 1.2;
	transition: all 0.2s ease-in-out;
}

.main-contents #image-link li p:before {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 10px;
	content: "";
	width: 18px;
	height: 18px;
	margin: auto;
	background: #555 url(../images/arrow_round_down.png) left center no-repeat;
	background-size: 18px 18px;
	border-radius: 50%;
	transition: all 0.1s ease-in-out;
}


@media screen and (min-width: 768px) {
	.main-contents #image-link {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.main-contents #image-link li {
		width: calc(50% - 10px);
	}

	.main-contents #image-link li + li {
		margin-top: 0;
	}

	.main-contents #image-link li:nth-of-type(n + 3) {
		margin-top: 20px;
	}
}

@media screen and (min-width: 1280px) {

}



/* ward-link ---------- */


.lower-contents .main-contents #ward-list {
	display: block;
	margin: 10px 0 40px;
	border: none;
}

.lower-contents .main-contents #ward-list:last-child {
	margin-bottom: 0;
}

.lower-contents .main-contents #ward-list li {
	display: block;
	width: 100%;
	margin: 0;
	border: none;
}

.lower-contents .main-contents #ward-list li + li {
	margin-top: 10px;
}

.lower-contents .main-contents #ward-list li a {
	display: block;
	height: 40px;
	padding-left: 20px;
	font-size: 1.3rem;
	border: 1px solid rgba(0,0,0,0.2);
	border-radius: 10px;
	background: url(../images/arrow.png) 10px center no-repeat;
	background-size: 3px 5px;
	box-sizing: border-box;
	transition: all 0.1s ease-in-out;
}

.lower-contents .main-contents #ward-list li a:hover {
	background-color: #fafafa;
	background-position: 13px center;
}

@media screen and (min-width: 768px) {
	.lower-contents .main-contents #ward-list {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.lower-contents .main-contents #ward-list li {
		width: calc(50% - 5px);
	}

	.lower-contents .main-contents #ward-list li + li {
		margin-top: 0;
	}

	.lower-contents .main-contents #ward-list li:nth-of-type(n + 3) {
		margin-top: 10px;
	}
}

@media screen and (min-width: 1280px) {
	.lower-contents .main-contents #ward-list:after {
		content: '';
		display: block;
		width: calc(33.33% - 5px);
	}

	.lower-contents .main-contents #ward-list li {
		width: calc(33.33% - 5px);
	}

	.lower-contents .main-contents #ward-list li:nth-of-type(n + 3) {
		margin-top: 0;
	}

	.lower-contents .main-contents #ward-list li:nth-of-type(n + 4) {
		margin-top: 10px;
	}
}

/* contact-box ---------- */

.main-contents #contact-box {
	margin-top: 40px;
	padding: 30px 20px;
	text-align: center;
	border: 1px solid rgba(0,0,0,0.2);
	border-radius: 5px;
}

.main-contents #contact-box h1 {
	margin: 0 0 10px;
	padding: 0;
	font-size: 1.5rem;
	font-weight: bold;
	color: #000;
}

.main-contents #contact-box h2 {
	margin: 20px 0 0 0;
	padding: 0;
	font-size: 1.4rem;
	font-weight: normal;
}

.main-contents #contact-box h2:before {
	width: 0;
	border: none;
}

.main-contents #contact-box p {
	text-align: center;
	line-height: 1.8;
	margin-bottom: 10px;
}

.main-contents #contact-box p:last-child {
	margin-bottom: 0;
}

.main-contents #contact-box #phone-number {
	font-size: 3.0rem;
	font-weight: bold;
	font-family: "Ubuntu",sans-serif;
	color: var(--color-link);
	line-height: 1;
}

.main-contents #contact-box #phone-number span {
	font-size: 14px;
	font-size: 1.4rem;
	font-weight: normal;
	font-family: 'Yu Gothic',"游ゴシック",'YuGothic',"游ゴシック体",'Hiragino Kaku Gothic ProN','Meiryo',sans-serif;
	color: #333;
}

.main-contents #contact-box #sub-number {
	color: var(--color-link);
	font-weight: bold;
}

.main-contents #contact-box #sub-number span {
	color: #333;
	font-weight: normal;
}


.main-contents #contact-box #reception-time {
	font-size: 12px;
	font-size: 1.2rem;
}

.main-contents #contact-box #form-link {
	position: relative;
	display: inline-block;
	overflow: hidden;
	margin-top: 10px;
	background: var(--color-link);
	box-shadow: inset 0px -1px 0px rgba(0,0,0,0.2), 0px 2px 3px rgba(0,0,0,0.2);
	transition: all 0.1s ease-in-out;
}

.main-contents #contact-box #form-link a {
	display: block;
	padding: 15px 20px;
	font-size: 1.4rem;
	font-weight: bold;
	color: #fff;
	text-decoration: none;
	transition: all 0.1s ease-in-out;
}

.main-contents #contact-box #form-link:hover {
	box-shadow: inset 0px 2px 0 rgba(0,0,0,0.2);
}

.main-contents #contact-box #form-link a:hover {
	text-shadow: 0px 1px 0 rgba(0,0,0,0.3);
}


@media screen and (min-width: 1280px) {
	.main-contents #contact-box {
		margin-top: 60px;
	}
	
	.main-contents #contact-box #phone-number {
		font-size: 3.4rem;
	}
}


/* news-list ---------- */


.contents-area .news-list {
	clear: both;
	width: 100%;
	border-top: 1px solid #d9d9d9;
}

.contents-area .news-list li {
	display: flex;
	align-items: center;
	min-height: 40px;
	border-bottom: 1px solid #d9d9d9;
	box-sizing: border-box;
	transition: all 0.1s ease-in-out;
}

.contents-area .news-list li a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
	width: 100%;
	min-height: 40px;
	font-size: 1.2rem;
	text-decoration: none;
	padding: 10px 0;
	box-sizing: border-box;
	overflow: hidden;
	margin-right: 5px;
	background: url(../../../../common/images/arrow.png) right 5px center no-repeat;
	background-size: 3px 5px;
	transition: all 0.2s cubic-bezier(.65,.05,.36,1);
}

.contents-area .news-list li a:hover {
	margin-right: 0;
	padding-left: 10px;
	background-color: var(--color-link-bg);
	color: var(--color-link);
	font-weight: bold;
}

.contents-area .news-list li time {
	width: 80px;
	font-family: "Open Sans", sans-serif;
}

.contents-area .news-list li .cat {
	width: 80px;
	font-weight: bold;
}

.contents-area .news-list li .ttl {
	width: calc(100% - 80px);
	box-sizing: border-box;
	padding-right: 5px;
}

.contents-area .news-list li .cat + .ttl {
	width: calc(100% - 160px);
}

@media screen and (min-width: 768px) {
	.contents-area .news-list li a {
		font-size: inherit;
	}
}

@media screen and (min-width: 1280px) {
	.contents-area .news-list li time {
		width: 90px;
	}

	.contents-area .news-list li .cat {
		width: 80px;
	}
	
	.contents-area .news-list li .ttl {
		width: calc(100% - 170px);
	}
}






.lower-contents .main-contents #prev-next #list {
	display: table;
	margin: 0 auto;
	text-align: center;
}

.lower-contents .main-contents #prev-next #list a {
	display: block;
	padding: 13px 20px;
}

.lower-contents .main-contents #page-number {	
	margin: 30px 0px;
	text-align: center;
	display: block;
}

.lower-contents .main-contents #page-ejection {
	text-align: center;
	margin: 0 auto;
}

.lower-contents .main-contents #page-ejection li {
	display: inline-block;
	margin-left: 10px;
}

.lower-contents .main-contents #page-ejection li:first-child {
	margin-left: 0;
}

.lower-contents .main-contents #page-ejection li a {
	display: block;
	padding: 10px;
	line-height: 10px;
	background-color: #fff;
	border: 1px solid rgba(0,0,0,0.2);
	border-radius: 3px;
	transition: all 0.2s ease-in-out;
}

.lower-contents .main-contents #page-ejection li.current {
	padding: 9px;
	font-weight: bold;
	border: 1px solid rgba(0,0,0,0.2);
	border-radius: 3px;
	background-color: rgba(0,0,0,0.2);
}

.lower-contents .main-contents #page-ejection li a:hover {
	background-color: rgba(0,0,0,0.2);
}




/* news-list ---------- */

.lower-contents .main-contents .news-list {
	margin-top: -31px;
	margin-bottom: 0;
}

.lower-contents .main-contents .news-list article {
	border-bottom: 1px solid #d9d9d9;
	box-sizing: border-box;
	transition: all 0.1s ease-in-out;
}

.lower-contents .main-contents .news-list article a,
.lower-contents .main-contents .news-list article a > div {
	display: flex;
	align-items: center;
	min-height: 60px;
	margin-right: 5px;
	padding: 1em 0;
	font-size: 1.4rem;
	text-decoration: none;
	background: url(../images/arrow.png) right 10px center no-repeat;
	background-size: 3px 5px;
	box-sizing: border-box;
	transition: all 0.1s ease-in-out;
}

.lower-contents .main-contents .news-list article a > div {
	padding: 0;
	min-height: 0;
	background: none;
}

.lower-contents .main-contents .news-list article a:hover {
	background-color: #fafafa;
	margin-right: 0;
	padding-left: 5px;
	background-position: right 5px center;
}

.lower-contents .main-contents .news-list article time {
	width: 90px;
	font-family: "Open Sans", sans-serif;
}

.lower-contents .main-contents .news-list article .cat {
	width: 60px;
	font-weight: bold;
}

.lower-contents .main-contents .news-list article .ttl {
	width: calc(100% - 90px);
	margin-right: 5px;
}

.lower-contents .main-contents .news-list article figure {
	display: none;
}

.lower-contents .main-contents .news-list article .cat + .ttl {
	width: calc(100% - 150px);
}


@media screen and (min-width: 768px) {
	.lower-contents .main-contents .news-list article .cat {
		width: 80px;
	}
	
	.lower-contents .main-contents .news-list article .cat + .ttl {
		width: calc(100% - 170px);
	}
	
	.lower-contents .main-contents .news-list article time {
		width: 140px;
		font-family: "Open Sans", sans-serif;
	}
}

@media screen and (min-width: 1280px) {
	
}



/* ========================================================================== */
/* PageFooter                                                                 */
/* ========================================================================== */

.PageFooter {
	margin-top: 40px;
}

@media screen and (min-width: 1280px) {
	.PageFooter {
		
	}
}


/* ========================================================================== */
/* popular-contents                                                           */
/* ========================================================================== */

.popular-contents {
	z-index: 3;
	margin-top: 50px;
	text-align: left;
	pointer-events: none;
}

/* ready */
.-popc-ready .popular-contents {
	position: -webkit-sticky;
	position: sticky;
	bottom: 0;
	height: 0;
}

/* sticky-end */
.-popc-sticky-end .popular-contents {
	position: relative;
	height: auto;
	pointer-events: none;
}

@media screen and (min-width: 1280px) {
	.popular-contents {
		margin-top: 60px;
	}
}


/* ready */
.-popc-ready .popular-contents-drawer {
	position: relative;
	transition: transform 0.5s cubic-bezier(.65,.05,.36,1);
	transform: translateY(0);
	background-color: #fff;
	box-shadow: 0px -3px 10px rgba(0,0,0,0.1);
	pointer-events: auto;
	padding-bottom: env(safe-area-inset-bottom);
}

@media screen and (min-width: 1280px) {

	.-popc-ready .popular-contents-drawer {
		transform: translateY(0px);
	}

}

/* sticky-end */
.-popc-sticky-end .popular-contents-drawer {
	position: relative;
	/* transform: translateY(-50px); */
	transform: translateY(0);
	transition: none;
	box-shadow: none;
}

/* sticky-open */
.-popc-open .popular-contents-drawer {
	transform: translateY(-100%);
}

.-popc-sticky-end.-popc-open .popular-contents-drawer {
	transform: translateY(-50px);
}

@media screen and (min-width: 1280px) {

	.-popc-sticky-end.-popc-open .popular-contents-drawer {
		transform: translateY(-60px);
	}

}

.popular-contents a {
	transition: all 0.2s ease-in-out;
	text-decoration: none;
}

.popular-contents a:hover {
	color: var(--color-link);
}

.popular-contents__scroll-ttl {
	width: 100%;
	box-sizing: border-box;
	position: absolute;
	bottom: 100%;
	padding-bottom: env(safe-area-inset-bottom);
	background-color: #fff;
	z-index: 2;
	cursor: pointer;
	box-shadow: 0px -3px 10px rgba(0,0,0,0.1);
	transition: 0.5s cubic-bezier(.65,.05,.36,1);
	transition-property: opacity, transform, background, color;
	transition-duration: 0.5s, 0.2s, 0.2s, 0.2s;
}

.-popc-end .popular-contents__scroll-ttl {
	opacity: 0;
}

.-popc-open .popular-contents__scroll-ttl {
	opacity: 0;
	cursor: auto;
	pointer-events: none;
	transition: opacity 0.5s cubic-bezier(.65,.05,.36,1);
}

.-popc-sticky-end .popular-contents__scroll-ttl {
	opacity: 0;
	transform: translateY(100%);
	pointer-events: none;
	transition: none;
}

@media screen and (min-width: 1280px) {
	.popular-contents__scroll-ttl {
		height: 60px;
	}
	.popular-contents__scroll-ttl:hover {
		color: #fff;
		background-color: var(--color-link);
	}
}


.popular-contents__scroll-ttl-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 100%;
	padding: 15px 0;
	box-sizing: border-box;
}

.popular-contents__scroll-ttl-inner.w-state {
	width: calc(100% - 40px);
	max-width: 1440px;
}

@media screen and (min-width: 768px) {
	.popular-contents__scroll-ttl-inner.w-state {
		width: calc(100% - 100px);
	}
}

@media screen and (min-width: 1280px) {
	.popular-contents__scroll-ttl-inner.w-state {
		width: calc(100% - 120px);
	}
}

.popular-contents__scroll-ttl .icon {
	width: 40px;
}

.popular-contents__scroll-ttl .icon.-l svg{
	width: 24px !important;
	height: 24px !important;
}

.popular-contents__scroll-ttl .ja {
	width: calc(100% - 64px);
	font-size: 1.3rem;
	font-weight: bold;
	line-height: 1.6;
}

.popular-contents__scroll-ttl .en {
	opacity: 0.7;
	font-size: 1.1rem;
	display: none;
}

.popular-contents__scroll-ttl .arrow-icon {
	display: block;
	width: 24px;
	height: 24px;
	stroke-width: 1.3;
}

.popular-contents-inner {
	position: relative !important;
	padding-top: 20px;
}

.-popc-sticky-end .popular-contents-inner {
	padding-top: 0;
}

.js-popular-contents-close {
	position: absolute;
	top: -40px;
	right: -10px;
	width: 44px;
	height: 40px;
	display: block;
	background-color: #fff;
	box-sizing: border-box;
	cursor: pointer;
	opacity: 0;
	border-radius: 5px 5px 0 0;
	transition: opacity .5s cubic-bezier(.65,.05,.36,1);
	--w: 10px;
}
.js-popular-contents-close:before,
.js-popular-contents-close:after {
	position: absolute;
	content: "";
	display: block;
	width: var(--w);
	height: var(--w);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	bottom: 0%;
}

.js-popular-contents-close:before {
	left: calc(var(--w) * -1);
	background-image: var(--round-out-corner-RB);
}

.js-popular-contents-close:after {
	right: calc(var(--w) * -1);
	background-image: var(--round-out-corner-LB);
}

.-popc-open .js-popular-contents-close {
	opacity: 1;
}

.-popc-open.-popc-sticky-end .js-popular-contents-close {
	opacity: 0;
	pointer-events: none;
}

.js-popular-contents-close__btn {
	position: relative;
	width: 100%;
	height: 100%;
	display: block;
	background-color: #fff;
	box-sizing: border-box;
	cursor: pointer;
	border-radius: 5px;
	transition: opacity .5s cubic-bezier(.65,.05,.36,1);
}

.js-popular-contents-close__btn:hover {
	color: var(--color-link);
}

.js-popular-contents-close__btn:before,
.js-popular-contents-close__btn:after {
	position: absolute;
	content: "";
	width: 40%;
	height: 2px;
	background-color: currentColor;
	border-radius: 1px;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	margin: auto;
}

.js-popular-contents-close__btn:before {
	transform: rotate(45deg);
}

.js-popular-contents-close__btn:after {
	transform: rotate(135deg);
}

@media screen and (min-width: 1280px) {
	.js-popular-contents-close__btn:before,
	.js-popular-contents-close__btn:after {
		width: 50%;
	}
}


.popular-contents__header {
	margin-bottom: 30px;
}

.popular-contents__header {
	display: flex;
	align-items: center;
	margin-bottom: 20px;
}

.-popc-sticky-end .popular-contents__header {
	display: block;
	margin-bottom: 30px;
}

.popular-contents__header .icon {
	width: 60px;
}

.-popc-sticky-end .popular-contents__header .icon {
	width: auto;
	margin-bottom: 10px;
	stroke-width: 0.75;
}

.popular-contents__header .icon.-l svg {
	width: 24px !important;
	height: 24px !important;
}

.-popc-sticky-end .popular-contents__header .icon.-l svg {
	width: 48px !important;
	height: 48px !important;
}

.popular-contents__header .ja {
	position: relative;
	font-size: 1.4rem;
	font-weight: bold;
	line-height: 1.6;
	z-index: 1;
}

.-popc-sticky-end .popular-contents__header .ja {
	font-size: 1.3rem;
}

.popular-contents__header .en {
	opacity: 0.7;
	font-size: 1.1rem;
	font-family: "Open Sans", sans-serif;
	margin-top: 15px;
	display: none;
}




.popular-contents__body {
	position: relative;
	padding: 30px 0;
	z-index: 1;
}

.popular-contents__body {
	padding: 10px 0;
}

.-popc-sticky-end .popular-contents__body {
	padding: 30px 0;
}

.popular-contents__body:after {
	position: absolute;
	content: '';
	width: calc(100% - var(--scrollbar-width) - 15px);
	height: 100%;
	background-color: #f7f5f2;
	border-radius: 5px 0 0 5px;
	top: 0;
	left: auto;
	right: -25px;
	z-index: -1;
}

@media screen and (min-width: 768px) {
	.popular-contents__body:after {
		right: -50px;
	}
}

@media screen and (min-width: 1280px) {
	.popular-contents__body {
		/* width: calc((((100% - (40px * 9)) / 10) * 8) + (40px * 7)); */
		width: calc((((100% - (var(--wcalc-gap) * 9)) / 10) * 8) + (var(--wcalc-gap) * 7));
		padding: 0;
	}

	.-popc-sticky-end .popular-contents__body {
		padding: 0;
	}

	.popular-contents__body:after {
		width: calc(100% + 40px + ((100vw - var(--scrollbar-width) - ((((100% - (40px * 7)) / 8) * 10) + (40px * 9))) / 2));
		height: calc(100% + 20px);
		top: 20px;
		left: -40px;
	}
}


.popular-contents-list {
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.popular-contents-list__item {
}

.-popc-sticky-end .popular-contents-list__item + .popular-contents-list__item {
	margin-top: 10px;
}

.popular-contents-list__anchor {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	position: relative;
	padding: 10px 0;
	padding-right: 24px;
}

.popular-contents-list__item .icon {
	width: 60px;
	margin: 0;
}

.popular-contents-list__item .sub {
	display: none;
	margin-bottom: 5px;
	font-size: 1.1rem;
	opacity: 0.7;
}

.popular-contents-list__item .ja {
	font-size: 1.3rem;
	font-weight: normal;
	line-height: 1.6;
}

.popular-contents-list__item .en {
	display: none;
	margin-top: 5px;
	font-size: 1.1rem;
	font-family: "Open Sans", sans-serif;
	opacity: 0.7;
}

.popular-contents-list__item .update {
	width: 100%;
	font-size: 1rem;
	margin-left: 60px;
}

.popular-contents-list__item .arrow-icon {
	position: absolute;
	width: 24px;
	height: 24px;
	top: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	stroke-width: 1;
}

.popular-contents-list__ttl {
	font-size: 1rem;
	opacity: 0.7;
	margin: 20px 0 10px;
	position: relative;
}

.-popc-sticky-end .popular-contents-list__ttl {
	margin: 30px 0;
}

.popular-contents-list__ttl:after {
	position: absolute;
	content: '';
	width: calc(100% - 100px);
	height: 1px;
	top: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	background: rgba(0,0,0,.1);
}


/* ----- */

.popular-contents-overlay {
	position: fixed;
	height: 100vh;
	width: 100%;
	top: 0;
	right: 0;
	opacity: 0;
	transition: 0.5s cubic-bezier(0.65,0.05,0.36,1);
	transition-property: background,opacity,transform;
	background: rgba(0,0,0,.2);
	z-index: 2;
	pointer-events: none;
}

.-popc-open .popular-contents-overlay {
	opacity: 1;
	visibility: visible;
	transition-timing-function: cubic-bezier(0.17, 0.84, 0.44, 1);
	cursor: pointer;
	pointer-events: auto;
}

.-popc-open.-popc-sticky-end .popular-contents-overlay {
	opacity: 0;
}


@media screen and (min-width: 1280px) {

	.popular-contents__scroll-ttl-inner {
		justify-content: flex-start;
	}

	.popular-contents__scroll-ttl-inner.w-state {
		width: calc(100% - 120px);
	}
	
	.popular-contents__scroll-ttl .icon {
		width: 60px;
	}
	
	.popular-contents__scroll-ttl .icon.-l svg {
		width: 36px !important;
		height: 36px !important;
	}
	
	.popular-contents__scroll-ttl .ja {
		width: auto;
		margin-left: 10px;
		font-size: 1.6rem;
	}

	.popular-contents__scroll-ttl .ja br {
		display: none;
	}
	
	.popular-contents__scroll-ttl .en {
		display: block;
		margin-left: 10px;
	}
	
	.popular-contents__scroll-ttl .arrow-icon {
		margin-left: auto;
	}

	.popular-contents-inner {
		display: flex;
		justify-content: space-between;
		padding: 40px 0;
		transition: padding 0.5s cubic-bezier(.65,.05,.36,1)
	}

	.-popc-open .popular-contents-inner {
		padding: 80px 0 120px;
	}

	.popular-contents__header {
		width: calc((((100% - (var(--wcalc-gap) * 9)) / 10) * 2) + (var(--wcalc-gap) * 1));
		margin-bottom: 0;
		display: block;
	}

	.popular-contents__header .icon {
		stroke-width: 0.75;
	}

	.-popc-sticky-end .popular-contents__header .icon {
		margin-bottom: 0;
	}

	.popular-contents__header .icon.-l svg {
		width: 48px !important;
		height: 48px !important;
	}

	.popular-contents__header .ja {
		margin-top: 20px;
		font-size: 1.6rem;
	}

	.-popc-sticky-end .popular-contents__header .ja {
		font-size: 1.6rem;
	}

	.popular-contents__header .ja:after {
		content: none;
	}

	.popular-contents__header .en {
		display: block;
	}

	.popular-contents-list {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.popular-contents-list:last-child {
		margin-top: 50px;
	}

	.-popc-sticky-end .popular-contents-list:last-child {
		margin-top: 40px;
	}

	.popular-contents-list:after {
		content: '';
		display: block;
		width: calc((((100% -  (var(--wcalc-gap) * 7)) / 8) * 2) + (var(--wcalc-gap) * 1));
	}

	.popular-contents-list__item {
		width: calc((((100% - (var(--wcalc-gap) * 7)) / 8) * 2) + (var(--wcalc-gap) * 1));
	}

	.popular-contents-list__item + .popular-contents-list__item,
	.-popc-sticky-end .popular-contents-list__item + .popular-contents-list__item {
		margin-top: 0;
	}

	.popular-contents-list__item:nth-of-type(n + 5) {
		margin-top: 40px;
	}

	.popular-contents-list__anchor {
		display: block;
		padding: 0;
	}

	.popular-contents-list__item .icon {
		width: 48px;
		height: 48px;
	}

	.popular-contents-list__item .icon + * {
		margin-top: 20px;
	}

	.-popc-sticky-end .popular-contents-list__item .icon {
		
	}

	.popular-contents-list__item .icon svg {
		position: relative;
		width: 48px;
		height: 48px;
		stroke-width: 0.75;
		z-index: 2;
		transition: color 0.4s ease;
		transition-property: color, stroke-width;
	}

	.popular-contents-list__item a:hover .icon svg {
		stroke-width: 1;
	}

	.popular-contents-list__item .sub {
		display: block;
	}

	.popular-contents-list__item .ja {
		display: block;
		padding-left: 25px;
		font-size: 1.6rem;
		font-weight: bold;
		transform: translateX(-25px);
		transition: transform 0.3s cubic-bezier(.77,0,.18,1);
	}

	.popular-contents-list__item .arrow-icon {
		left: 0;
		right: auto;
		bottom: auto;
		opacity: 0;
		transition: all 0.3s ease;
		stroke-width: 1.3;
	}

	.popular-contents-list__item .en {
		display: block;
	}

	.popular-contents-list__item .update {
		margin: 10px 0 0;
	}

	.popular-contents-list__ttl {
		display: none;
	}

	.popular-contents-list__anchor:hover .ja {
		transform: translateX(-5px);
	}

	.popular-contents-list__anchor:hover .arrow-icon {
		opacity: 1;
	}

}



/* ========================================================================== */
/* footer                                                                     */
/* ========================================================================== */

#gf {
	width: 100%;
	text-align: left;
	background-color: #fff;
	margin: 60px 0 50px;
}

.gf a {
	transition: all 0.2s ease-in-out;
}

.gf a:hover {
	color: var(--color-link);
}

.gf-inner.w-state {
	max-width: 1440px;
}

.gf__intro {
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
	width: 100%;
	margin: 20px 0;
	z-index: 1;
}

.gf__intro:after {
	position: absolute;
	content: '';
	width: 100%;
	height: 1px;
	background-color: rgba(0,0,0,.1);
	top: 0;
	left: 0;
	bottom: 0;
	margin: auto;
	z-index: -1;
}

.gf__intro .gf__copy {
	padding: 10px;
	padding-left: 0;
	font-size: 1.3rem;
	letter-spacing: 0.1em;
	background-color: #fff;
}

#pagetop {
	width: 24px;
	height: 24px;
	padding: 10px;
	padding-right: 0;
	background-color: #fff;
	transition: all 0.2s ease-in-out;
}

#pagetop .icon {
	stroke-width: 1.3;
	opacity: 0.5;
}

#pagetop:hover {

}


.gf__logo {
	margin-bottom: 40px;
}

.gf__logo a {
	display: block;
	width: 135px;
	height: 33px;
}

.gf__logo a i {
	display: block;
	width: 100%;
	height: 100%;
}

.gf__address {
	font-size: 1.2rem;
	line-height: 2;
	margin-bottom: 40px;
}

.gf__site__list {
	display: block;
	list-style: none;
	margin-bottom: 1em;
	padding-left: 0;
}

.gf__site__list:last-of-type {
	margin-bottom: 40px;
}

.gf__site__list li {
	font-size: 1.2rem;
	line-height: 1.5;
	margin-bottom: 5px;
}

.gf__site__list li a {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	color: #555;
}

.gf__site__list li .icon {
	display: inline-block;
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	margin-right: 2px;
	transform: translateX(-4px);
}

.gf__small {
	font-size: 1rem;
	font-family: "Open Sans", sans-serif;
}

.gf__small small {
	font-size: inherit;
}


.gf__logo a:hover {
	color: inherit;
}

/* ie */

.msie #pagetop {
	margin-left: auto;
}

@media screen and (min-width: 768px) {

}

@media screen and (min-width: 1280px) {

	.gf-inner {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
	}

	.gf__intro {
		width: 100%;
	}

	.gf__intro .gf__copy {
		font-size: 1.6rem;
	}

	.gf__logo {
		width: calc((((100% - (var(--wcalc-gap) * 9)) / 10) * 2) + (var(--wcalc-gap) * 1));
		margin: 0;
	}

	.gf__address {
		width: calc((((100% - (var(--wcalc-gap) * 9)) / 10) * 4) + (var(--wcalc-gap) * 3));
		font-size: 1.3rem;
		margin: 0;
	}

	.gf__site__list {
		width: calc((((100% - (var(--wcalc-gap) * 9)) / 10) * 2) + (var(--wcalc-gap) * 1));
		margin: 0 !important;
	}

	.gf__site__list li a {
		align-items: flex-start;
	}

	.gf__site__list li .icon {
		margin-top: -2px;
	}

	.gf__site__list:last-of-type {
	}

	.gf__small {
		margin-left: calc((((100% - (var(--wcalc-gap) * 9)) / 10) * 2) + (var(--wcalc-gap) * 2));
	}
}







/* footer-nav --------------------------------*/

#foot-contents {
	display: table;
	width: 100%;
	min-width: 960px;
	max-width: 1560px;
	margin: 0 auto;
	border-left: 1px solid #e5e5e5;
	border-right: 1px solid #e5e5e5;
	box-sizing: border-box;
}

#foot-contents #foot-nav {
	display: table;
	width: 100%;
}

#foot-contents #foot-nav div {
	display: table-cell;
	width: 20%;
	height: 100%;
	border-right: 1px solid #e5e5e5;
}

#foot-contents #foot-nav div:last-child {
	border: none;
}


#foot-contents #info {
	padding: 30px 20px;
	vertical-align: top;
	border-right: 1px solid #e5e5e5;
	box-sizing: border-box;
}

#foot-contents #info h1 {
	margin-bottom: 20px;
}

#foot-contents #info h1 img {
	width: 88px;
}

#foot-contents #info p,
#foot-contents #info dd {
	font-size: 11px;
	font-size: 1.1rem;
	line-height: 20px;
	line-height: 2.0rem;
}

#foot-contents #info p span {
	display: inline-block;
	white-space: nowrap;
}

#foot-contents #info p a {
	text-decoration: underline;
	transition: all 0.1s ease-in-out;
}

#foot-contents #info p a:hover {
	color: var(--color-link);
	text-decoration: none;
}

#foot-contents #info dt {
	margin-top: 30px;
	font-size: 13px;
	font-size: 1.3rem;
	font-weight: bold;
	font-family: "FOT-マティス Pro DB", MatissePro-DB, serif;
}

#foot-contents #info dd {
	margin-top: 10px;
	color: rgba(0, 0, 0, 0.7);
}

#foot-contents #info ul {
	margin-top: 20px;
	padding: 20px 0;
	border-top: 1px solid #e5e5e5;
}

#foot-contents #info ul li {
	line-height: 12px;
	margin-bottom: 14px;
}

#foot-contents #info ul li a {
	padding-left: 15px;
	background: url(../images/icon_blank.png) left center no-repeat;
	background-size: 10px 9px;
	transition: all 0.1s ease-in-out;
}

#foot-contents #info ul li a:hover {
	color: var(--color-link);
}

#foot-contents #info ul li:last-child {
	margin-bottom: 0;
}

#foot-contents #info ul:last-of-type {
	margin-top: 0;
}




.kangobu-recruit-link {
	text-align: center;
}

.kangobu-recruit-link a {
	display: block;
	padding: 10px 0 7px;
	border: 2px solid #f05c9e !important;
	border-radius: 5px;
	transition: all 0.1s ease-in-out;
}

.kangobu-recruit-link a p {
	line-height: 15px;
	line-height: 1.5rem;
	color: #000;
	transition: all 0.1s ease-in-out;
}

.kangobu-recruit-link a p strong {
	display: inline-block;
	margin: 0 0 5px 0;
	padding: 0;
	font-size: 13px;
	font-size: 1.3rem;
	color: #f05c9e !important;
	transition: all 0.1s ease-in-out;
}

.kangobu-recruit-link a p span {
	display: inline-block;
	white-space: nowrap;
}

.kangobu-recruit-link:hover a {
	background-color: #f05c9e !important;
}

.kangobu-recruit-link:hover a p,
.kangobu-recruit-link:hover a p strong {
	color: #fff !important;
}






#foot-contents #foot-nav section {
	width: 100%;
	padding: 30px 20px;
	
	border-bottom: 1px solid #e5e5e5;
	vertical-align: top;
	box-sizing: border-box;
}

#foot-contents #foot-nav section h2 {
	margin-bottom: 15px;
	font-size: 15px;
	font-size: 1.5rem;
	font-family: "FOT-マティス Pro M", MatissePro-M, serif;
	white-space: nowrap;
}

#foot-contents #foot-nav section h2 a {
	position: relative;
	padding-left: 20px;
	color: #000;
	transition: all 0.1s ease-in-out;
}

#foot-contents #foot-nav section h2 a:before {
	position: absolute;
	top: 1px;
	left: 0;
	width: 14px;
	height: 14px;
	content: "";
	background-color: #666;
	background-image: url(../images/arrow_round.png);
	background-position: left center;
	background-repeat: no-repeat;
	background-size: 14px 14px;
	border-radius: 50%;
	transition: all 0.1s ease-in-out;
}

#foot-contents #foot-nav section h2 a:hover {
	color: var(--color-link);
}

#foot-contents #foot-nav section h2 a:hover:before {
	background-color: var(--color-link);
}

#foot-contents #foot-nav section h2 span,
#foot-contents #foot-nav section li span {
	display: inline-block;
	white-space: nowrap;
}

#foot-contents #foot-nav section li {
	margin-bottom: 13px;
}

#foot-contents #foot-nav section li a {
	display: block;
	padding-left: 20px;
	line-height: 15px;
	line-height: 1.5rem;
	background: url(../images/arrow.png) 6px 5px no-repeat;
	background-size: 3px 5px;
	transition: all 0.1s ease-in-out;
}

#foot-contents #foot-nav section li a:hover {
	color: var(--color-link);
	background-position: 10px 5px;
}








/* accordion-list ------------------------------------------------------------------- */

.accordion-list {
	
}

.accordion-list .accordion-item {
	clear: both;
	margin: 0;
	overflow: hidden;
	margin: 0 0 20px;
	border: 1px solid var(--color-link);
	background-color: #f7f5f2;
	border-color: transparent;
	border-radius: 5px;
	transition: padding 0.5s ease-in-out;
}

.accordion-list .accordion-item.-accordion-show {
}


.accordion-list .accordion-item.-accordion-show .accordion-contents {
	opacity: 1;
}

.accordion-list .accordion-item:first-of-type {
	margin-top: 20px;
}

.accordion-list .accordion-item:last-of-type {
	margin-bottom: 0;
}

/* accordion-toggle */

.accordion-list .accordion-toggle {
	position: relative;
	display: block;
	width: 100%;
	margin: 0;
	padding: 20px;
	font-weight: bold;
	transition: 0.15s ease-in-out;
	cursor: pointer;
	user-select: none;
}

.accordion-list .accordion-toggle span {
	position: relative;
	display: inline-block;
	width: 18px;
	height: 18px;
	margin-top: 0;
	margin-right: 10px;
	border-radius: 50%;
	vertical-align: middle;
	background: var(--color-link) url(../../../../common/images/icon_plus_wt.png) no-repeat center;
	background-size: 10px;
	transition: 0.5s cubic-bezier(.17,.84,.44,1);
	transform: rotate(180deg);
}

.accordion-list .accordion-item.-accordion-show .accordion-toggle {
	
}

.accordion-list .accordion-item.-accordion-show .accordion-toggle span {
	background-color: rgba(0,0,0,0.3);
	background-image: url(../../../../common/images/icon_minus_wt.png);
	transform: rotate(0deg);
}

/* accordion-contents  */

.accordion-list .accordion-contents {
	border-top: none;
	line-height: inherit;
	opacity: 0;
	height: 0;
	overflow: hidden;
	transition: 0.5s cubic-bezier(.77,0,.18,1);
	transition-property: opacity, height;
	padding: 0;
	box-sizing: border-box;
}

.accordion-list .accordion-contents-inner {
	padding: 20px;
	border-top: 1px solid rgba(0,0,0,0.1);
}

.accordion-list .accordion-contents-inner > * {
	margin-bottom: 20px;
}

.accordion-list .accordion-contents-inner > *:last-child {
	margin-bottom: 0;
}

@media screen and (min-width: 768px) {
	.accordion-list .accordion-contents-inner {
		padding: 20px 40px 40px;
	}
}

/* ---------------------------------------------------------------------------------- */





/* ========================================================================== */
/* ie                                                                            */
/* ========================================================================== */

.ie9 .lower-contents .contents-area {
	display: table;
	overflow: hidden;
}

.ie9 .lower-contents .side-contents {
	display: table-cell;
}

.ie9 .lower-contents .main-contents {
	display: table-cell;
}


/* ========================================================================== */
/* Letter, glyph                                                              */
/* ========================================================================== */
/* テキスト・文字に関するタグの基本設定 */

.ib {
	display: inline-block;
}

br.tb {
	display: none;
}

br.pc {
	display: none;
}

br.sp {
	display: inline-block;
}

@media screen and (min-width: 768px) {
	br.sp {display: none;}
	br.tb {display: inline-block;}
	br.pc {}
}

@media screen and (min-width: 1280px) {
	br.sp {display: none;}
	br.tb {display: none;}
	br.pc {display: inline-block;}
}

.kerning,
.kerning--palt {
	font-feature-settings: 'palt'; /* 役物半角 */
}

.kerning--pwid {
	font-feature-settings: 'pwid';
}

.b {
	font-weight: bold;
}


/* ----------------------------------------------------------------------- */
/* Color */

.color--disable {
	color: #999 !important;
}

.color--primary {
	color: var(--color-accent) !important;
}

.color--secondary {
	color: #000 !important;
}

.color--important {
	color: var(--color-accent) !important;
}

.color--warning {
	color: rgb(255, 0, 0) !important;
}

.color--current {
	color: var(--color-accent) !important;
}

.color--inherit {
	color: inherit !important;
}


/* ========================================================================== */
/* inner-container                                                            */
/* ========================================================================== */
/* 横幅などの汎用クラスなど */

.w-state {
	width: calc(100% - 50px);
	position: static;
	margin-right: auto;
	margin-left: auto;
}

.w-state--s {
	width: calc(100% - 60px);
	max-width: 520px;
	position: static;
	margin-right: auto;
	margin-left: auto;
}

@media screen and (min-width: 768px) {
	.w-state {
		width: calc(100% - 100px);
		max-width: 1440px;
	}
	
	.w-state--s {
		width: calc(100% - 100px);
		max-width: 800px;
	}
}

@media screen and (min-width: 1280px) {
	.w-state,
	.w-state--s {
		width: calc(100% - 120px);
	}
}


/* ========================================================================== */
/* document elements                                                          */
/* ========================================================================== */
/* 見出しなど小さい要素を対象とした汎用クラス */

/* base,layout --------------------------------------------- */

.c-section--xs {
	margin-top: 20px;
}

.c-section--s {
	margin-top: 40px;
}

.c-section {
	margin-top: 60px;
}

.c-section--l {
	margin-top: 80px;
}

@media screen and (min-width: 1280px) {
	.c-section--xs {
		margin-top: 30px;
	}
	
	.c-section--s {
		margin-top: 60px;
	}
	
	.c-section {
		margin-top: 90px;
	}
	
	.c-section--l {
		margin-top: 120px;
	}
}

/* footnote / 脚注 --------------------------------- */

.footnote {
	display: flex;
}

.footnote {
	position: relative;
	flex-direction: column;
	margin-top: 1em;
	padding-left: 1.25em;
	font-size: 1.1rem;
	color: rgb(80,80,80);
	list-style: none;
}

.footnote li{
	position: relative;
	display: inline-block;
}

.footnote:last-child,
.footnote li:last-child {
	margin-bottom: 0;
}

.footnote li::before {
	position: absolute;
	right: calc(100% + 3px);
	content: "※ ";
	white-space: nowrap;
}

@media screen and (min-width: 1280px) {
	.footnote {
		/* font-size: 1.2rem; */
	}
}


/* ========================================================================== */
/* document module                                                            */
/* ========================================================================== */
/* その他の特殊なブロック、レイアウトに関するスタイルを定義する場合 */

.std-table {
	line-height: 1.6;
	font-size: 1.5rem;
}

.std-table__item {
	padding: 1em 0;
	border-top: 1px dashed rgba(0,0,0,0.2);
}

.std-table__item:last-child {
	border-bottom: 1px dashed rgba(0,0,0,0.2);
}

.std-table__lbl {
	font-weight: bold;
}

.std-table__des {
	
}


/* ========================================================================== */
/* Icon                                                                       */
/* ========================================================================== */

a .icon img,
a .icon svg {
	
}

.active .icon img,
.active .icon svg,
a:hover .icon img,
a:hover .icon svg {
	opacity: 1;
}

[data-icon],
.icon {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	letter-spacing: 0;
	line-height: 0;
	fill: currentColor;
	stroke-width: 1;
}

svg.icon,
.icon svg {
	width: 24px;
	height: 24px;
}

/* ---------------------------------------------------------------------- */
/* Inline svg default styles */
/* 
 * SVG内の要素に対して使用するクラス。
 */

/*線*/
.inline-svg--line { fill: none; stroke: currentColor; stroke-width: inherit; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10; }

/*線 丸キャップ 丸角 */
.inline-svg--line-round { fill: none; stroke: currentColor; stroke-width: inherit; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10; }

/*破線 丸キャップ 丸角 */
.inline-svg--line-dash-round { fill: none; stroke: currentColor; stroke-width: inherit; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10; stroke-dasharray:1.25,1.25;}

/*線 キャップ無し 角 */ 
.inline-svg--line-edge { fill: none; stroke: currentColor; stroke-width: inherit; stroke-linejoin: miter; stroke-miterlimit: 10; }

/*線あり塗あり*/
.inline-svg--line-fill { fill: currentColor; stroke: currentColor; stroke-width: inherit; stroke-miterlimit: 10; }

/*塗のみ */ 
.inline-svg--fill-only { fill: currentColor; }

 /*塗無し */ 
.inline-svg--fill-none { fill: none !important; }

/* logo */
.inline-svg--logo1 { fill: #6581C0; }
.inline-svg--logo2 { fill: #EA6182; }


/* ---------------------------------------------------------------------- */
/* weight */
/* ---------------------------------------------------------------------- */
/*
 * 線の太さの指定（絶対値）
 */

.icon.-w100 svg,
.icon.-w100 use {
	stroke-width: 0.2 !important;
}
.icon.-w200 svg,
.icon.-w200 use {
	stroke-width: 0.4 !important;
}
.icon.-w300 svg,
.icon.-w300 use {
	stroke-width: 0.6 !important;
}
.icon.-w400 svg,
.icon.-w400 use {
	stroke-width: 0.8 !important;
}
.icon.-w500 svg,
.icon.-w500 use {
	stroke-width: 1.0 !important;
}
.icon.-w600 svg,
.icon.-w600 use {
	stroke-width: 1.2 !important;
}
.icon.-w700 svg,
.icon.-w700 use {
	stroke-width: 1.4 !important;
}
.icon.-w800 svg,
.icon.-w800 use {
	stroke-width: 1.6 !important;
}
.icon.-w900 svg,
.icon.-w900 use {
	stroke-width: 2.0 !important;
}

/* ---------------------------------------------------------------------- */
/* size */
/* ---------------------------------------------------------------------- */
/*
 * サイズの指定（絶対値）
 */

svg.icon.-xxs,
.icon.-xxs svg {
	width: 12px !important;
	height: 12px !important;
}

svg.icon.-xs,
.icon.-xs svg {
	width: 18px !important;
	height: 18px !important;
}

svg.icon.-s,
.icon.-s svg {
	width: 24px !important;
	height: 24px !important;
}

svg.icon.-m,
.icon.-m svg {
	width: 36px !important;
	height: 36px !important;
}

svg.icon.-l,
.icon.-l svg {
	width: 48px !important;
	height: 48px !important;
}

svg.icon.-xl,
.icon.-xl svg {
	width: 60px !important;
	height: 60px !important;
}

svg.icon.-xxl,
.icon.-xxl svg {
	width: 72px !important;
	height: 72px !important;
}


/* ========================================================================== */
/* captcha                                                                    */
/* ========================================================================== */

.grecaptcha-badge {
	z-index: 5;
}


/* ========================================================================== */
/* embed youtube                                                              */
/* ========================================================================== */


.youtube {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}

.youtube iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
}


/* ========================================================================== */
/* alert                                                                      */
/* ========================================================================== */


.importantInfoBanner {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 20px;
	box-sizing: border-box;
	border-radius: 5px;
	background-color: #ff1f541c;
	text-align: center;
	color: #ff1f54;
	font-weight: bold;
	font-size: 95%;
	font-feature-settings: "palt";
}

.importantInfoBanner > * {
	margin: 0;
}

.PageHeader .importantInfoBanner {
	margin-top: 40px;
}

.importantInfoBanner__ttl {
	font-size: 120%;
}

.importantInfoBanner__txt {
	
}

.importantInfoBanner__txt a {
	color: inherit;
	text-underline-position: under;
}


/* ========================================================================== */
/* Module / Modal                                                             */
/* ========================================================================== */

/* 
 * 01. Modal Content
 * 02. Modal Image
 */

/* ========================================================================== */

/* 01. Modal Content */

/* ========================================================================== */

[data-modal] {
	position: fixed;
	right: 0;
	left: 0;
	top: 0;
	bottom: 0;
	width: calc(100% - 30px);
	height: 100vh;
	max-width: 900px;
	min-height: var(--wh);
	max-height: 100vh;
	margin: auto;
	margin-right: 0;
	padding: 0;
	opacity: 0;
	transform: translateX(25%);
	pointer-events: none;
	transition-duration: 0.2s;
	transition-timing-function: cubic-bezier(.55,.06,.68,.19);
	transition-property: transform, opacity;
	z-index: 1000;
	background-color: rgba(255,255,255,1);
	
	/*box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.2);*/
	border-radius: 0;
}

[data-modal].-show {
	opacity: 1;
	transform: translateX(0);
	transition-duration: 0.6s;
	transition-timing-function: cubic-bezier(.17,.84,.44,1);
	pointer-events: auto;
	z-index: 1002;
}

[data-modal].-hide {
	opacity: 0;
	pointer-events: none;
}

.-show-modal body {
	overflow: hidden;
}

@media screen and (min-width: 1280px) {
	
}

@media screen and (min-width: 768px) {
	[data-modal] {
		width: 66.666%;
		min-width: 0;
		max-height: 100vh;
	}
	
	[data-modal] .w-state,
	[data-modal] .w-state--s {
		width: calc(100% - 100px);
	}
}

@media screen and (min-width: 1280px) {
	[data-modal] {
		/*overflow-y: hidden;*/
		max-height: calc(100vh - 0);
	}
	
	[data-modal].-show {
		/*overflow-y: auto;*/
	}
	
	[data-modal] .w-state,
	[data-modal] .w-state--s {
		width: calc(100% - 160px);
	}
}

.modal-scroll-container {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 100%;
	margin: 0 auto;
	padding: 0;
	box-sizing: border-box;
	overflow-y: auto;
	overflow-x: hidden;
	/* overscroll-behavior: contain; */
	vertical-align: middle;
	-webkit-overflow-scrolling: touch;
}


.modal-scroll-container__outer {
	position: relative;
	box-sizing: border-box;
	overflow: auto;
	overflow-x: hidden;
	width: 100%;
	height: 100%;
}

.modal-scroll-container__inner {
	position: relative;
	left: 0;
	top: 0;
	display: flex;
	justify-content: center;
	flex-direction: column;
	width: 100%;
	margin: 0 auto;
	padding: 30px 0;
	box-sizing: border-box;
}

@media all and (min-width: 640px) {
	.modal-scroll-container__inner {
		padding: 60px 0;
	}
}

@media all and (min-width: 1280px) {
	
	.modal-scroll-container__inner {
		padding: 80px 0;
	}
	
	
	html.-show-modal .layout__body {
		transform: translate3d(calc(-100vw / 2 + 30%), 0, 0);
	}
	
	html.msie .layout__body {
		transform: translate3d(0, 0, 0);
	}
	
	html.msie.-show-modal .layout__body {
		transform: translate3d(-150%, 0, 0);
	}
	
	.layout__kv {
		transform: translate3d(0, 0, 0);
	}
	
	html.-show-modal .layout__kv {
		transform: translate3d(-33.333%, 0, 0);
	}
}


/* --------------------------------- */


[data-modal-close] {
	position: absolute;
	top: 0;
	left: 0;
	cursor: pointer;
	z-index: 5;
	background-color: #fff;
	border-radius: 20px;
	padding: 8px;
	transform: translate(-50%, 50%);
	box-shadow: 3px 3px 7px rgba(0,0,0,0.1);
	transition: box-shadow 0.2s ease;
}

[data-modal-close] i {
	
}

[data-modal-close] svg {
	width: 24px;
	height: 24px;
	stroke-width: 1.25;
	transition: stroke-width 0.2s ease;
}

[data-modal-close]:hover {
	box-shadow: 0 0 0 rgba(0,0,0,0);
}

[data-modal-close]:hover svg {
	stroke-width: 2.5;
}

.modal__close-txt {
	padding-bottom: 3px;
	border-bottom: 2px solid currentColor;
}

@media all and (min-width: 1280px) {
	
	[data-modal-close] {
		top: 25px;
	}
	
	[data-modal-close] svg {
		
	}
}


/* --------------------------------- */


[data-modal-overlay] {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	opacity: 0;
	background-color: rgba(0,0,0,0.4);
	background-image: var(--svg-diagonal-line-bk-o20);
	transition: opacity 0.4s ease-out;
	z-index: 999;
	display: none;
	pointer-events: none;
	margin: 0;
}

[data-modal-overlay] {
	display: block;
}

.-show-modal [data-modal-overlay] {
	opacity: 1;
	pointer-events: auto;
}


/* --------------------------------- */



[data-toggle] {
	cursor: pointer;
}

html.-show-modal body {
	/*overflow: hidden;*/
}



/* --------------------------------- */

[data-modal] img {
	display: block;
	width: 100%;
}



.modal__ttl {
	font-size: 140%;
	font-weight: bold;
}

.modal__img {
	
}

@media all and (min-width: 1280px) {
	
}


/* ========================================================================== */

/* 02. Modal Image */

/* ========================================================================== */


.modalImg {
	position: fixed;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	
	transition: opacity 0.25s ease;
	opacity: 0;
	pointer-events: none;
	z-index: 1000;
	width: 100%;
	height: 100vh;
	color: #fff;
}

.-modalImg-active .modalImg {
	pointer-events: auto;
	opacity: 1;
}

.modalImg__img {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	max-width: 960px;
	box-sizing: border-box;
	z-index: 2;
}

.modalImg__img img {
	display: block;
	width: 100%;
	height: 100%;
	cursor: auto;
	object-fit: contain;
}

@media all and (min-width: 640px) {
	.modalImg__img {
		width: calc(100% - 80px);
		height: calc(100vh - 80px);
	}
}


.modalImg [data-modal-close] {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 3;
}

.modalImg [data-modal-close] .icon {
	position: absolute;
	right: 15px;
	top: 15px;
	width: 36px;
	height: 36px;
	cursor: pointer;
	opacity: 0;
	transform: translate3d(0,0,0);
	transition: 0.25s cubic-bezier(.55,.06,.68,.19);
	transition-property: transform, opacity;
}

.-modalImg-active .modalImg [data-modal-close] .icon {
	opacity: 1;
	transform: translate3d(0,0,0);
	transition: transform 0.25s cubic-bezier(.17,.84,.44,1);
}

@media all and (min-width: 1280px) {
	
}


.modalImg [data-modal-overlay] {
	background-color: rgba(0,0,0,0.6);
	z-index: 1;
	pointer-events: none;
}

.-modalImg-active .modalImg [data-modal-overlay] {
	opacity: 1;
	pointer-events: auto;
}


/* ----- */

.modalImg-trigger {
	cursor: pointer;
}


/* ========================================================================== */

/* Button module */

/* ========================================================================== */

/* default style */

@font-face {
	font-family: icomoon;
	src: url("/common/fonts/icon_blank/icomoon.eot?kcz3xd");
	src: url("/common/fonts/icon_blank/icomoon.eot?kcz3xd#iefix") format("embedded-opentype"),
	     url("/common/fonts/icon_blank/icomoon.ttf?kcz3xd") format("truetype"),
	     url("/common/fonts/icon_blank/icomoon.woff?kcz3xd") format("woff"),
	     url("/common/fonts/icon_blank/icomoon.svg?kcz3xd#icomoon") format("svg");
	font-weight: normal;
	font-style: normal;
	font-display: block;
}

.btn {
	-webkit-appearance:none;
	   -moz-appearance:none;
	        appearance:none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	text-decoration: none;
	transition: all 0.5s ease-out;
	font-feature-settings: "palt";
	
	position: relative;
	min-width: 40px;
	min-height: 35px;
	padding: 10px 15px;
	border: none;
	border-radius: 3px;
	box-sizing: border-box;
	text-align: center;
	text-decoration: none !important;
	color: inherit;
	white-space: nowrap;
	line-height: 1;
	
	/*
	 * blank: "\e900"
	 * blank_bold: "\e901"
	 * blank_black: "\e902"
	 */
	
	&[target="_blank"]::after {
		font-family: "icomoon";
		font-style: normal;
		font-weight: normal;
		font-variant: normal;
		text-transform: none;
		
		content: "\e901";
		font-size: 14px;
		margin: -10px -6px -10px 3px;
	}
	
	& svg,
	& use {
		transition: none;
	}
	
	&::before {
		position: absolute;
		left: 0;
		top: 0;
		display: block;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		border-radius: 3px;
		border: 1px solid currentColor;
		content: "";
		opacity: 0.75;
		transition: all 0.5s ease-out;
		backface-visibility: hidden;
		transition-property: opacity, border-color, background-color, color, box-shadow;
	}
	
	a:hover &,
	&:hover {
		text-decoration: none;
		border: none;
		background-color: var(--color-link);
		color: #fff;
		transition: all 0.2s ease;
		
		&::before {
			transition: all 0.2s ease;
			border-color: var(--color-link);
		}
	}
	
	a:hover &::before,
	&:hover::before {
		opacity: 1;
	}
	
	a:active &,
	&:active {
		
	}
	
	&.-primary {
		color: var(--color-link);
		font-weight: bold;
		
		&::before {
			border-width: 2px;
			opacity: 1;
		}
		
		a:hover &,
		&:hover {
			color: #fff;
			background-color: var(--color-link);
		}
		
		a:hover &::before,
		&:hover::before {
			border-color: var(--color-link);
		}
		
		a:active &,
		&:active {
			color: #fff;
			background-color: var(--color-link);
		}
		
		& svg,
		& use {
			stroke-width: 1.5;
		}
	}
	
	&.-secondary {
		font-weight: bold;
		
		&::before {
			border-width: 2px;
			opacity: 1;
		}
		
		a:hover &,
		&:hover {
			color: #fff;
			background-color: var(--color-link);
		}
		
		a:hover &::before,
		&:hover::before {
			border-color: #000;
			opacity: 0;
		}
		
		a:active &,
		&:active {
			color: #fff;
			background-color: var(--color-link);
		}
		
		& svg,
		& use {
			stroke-width: 1.5;
		}
	}
	
	&.-warning {
		color: rgb(255, 0, 0);
		border-color: rgba(255, 0, 0, 0.4);
		font-weight: bold;
		
		&::before {
			border-width: 2px;
			opacity: 1;
		}
		
		a:hover &,
		&:hover {
			color: #fff;
			background-color: rgb(255, 0, 0);
		}
		
		a:hover &::before,
		&:hover::before {
			border-color: rgb(255, 0, 0);
			opacity: 0;
		}
	}
	
	&[href*="#"] {
		
		&:before {
			
		}
		
		&:hover {
			
		}
	}
	
	&[disabled] {
		opacity: 0.3;
		pointer-events: none;
		box-shadow: none !important;
	}
	
	&[target="_blank"] {
		padding-right: 20px;
	}
	
	/* option : sizing */
	
	&.-xs {
		min-width: 20px !important;
		min-height: 20px !important;
		padding: 5px 8px !important;
	}
	
	&.-s {
		min-width: 30px !important;
		min-height: 30px !important;
		padding: 10px 10px !important;
	}
	
	&.-l {
		min-width: 50px !important;
		min-height: 50px !important;
		padding: 20px 20px !important;
	}
	
	&.-xl {
		min-width: 60px !important;
		min-height: 60px !important;
		padding: 25px 20px !important;
	}
	
	/* option : width */
	
	&.-w10p  { width: 10%; }
	&.-w20p  { width: 20%; }
	&.-w30p  { width: 30%; }
	&.-w40p  { width: 40%; }
	&.-w50p  { width: 50%; }
	&.-w60p  { width: 60%; }
	&.-w70p  { width: 70%; }
	&.-w80p  { width: 80%; }
	&.-w90p  { width: 90%; }
	&.-w100p { width: 100%; }
	
	/* option : icon */
	
	& .icon {
		opacity: inherit;
		margin-left: -5px;
		margin-right: 3px;
	}
	
	& .icon:first-child {
		margin: -6px 6px -6px -3px;
	}
	
	& .icon:last-child {
		margin: -6px -3px -6px 6px;
	}
	
	& .icon:only-child {
		margin: -6px -12px;
	}
	
	&.-xs {
		& .icon { font-size: 70%; }
		& .icon:first-child { margin: -5px 0 -5px -2px; }
		& .icon:last-child { margin: -5px -2px -5px 0; }
		& .icon:only-child { margin: -1rem -0.5rem; }
	}
	
	&.-s {
		& .icon { font-size: 90%; }
		& .icon:first-child { margin: -5px 0 -5px -2px; }
		& .icon:last-child { margin: -5px -2px -5px 0; }
		& .icon:only-child { margin: -1rem; }
	}
	
	&.-l {
		& .icon { font-size: 120%; }
		& .icon:first-child { margin: -8px 8px -8px -2px; }
		& .icon:last-child { margin: -8px -2px -8px 8px; }
		& .icon:only-child { margin: -0.5rem -1rem; }
	}
	
	&.-xl {
		& .icon { font-size: 140%; }
		& .icon:first-child { margin: -12px 10px -12px -2px; }
		& .icon:last-child { margin: -12px -2px -12px 10px; }
		& .icon:only-child { margin: -0.5rem -1rem; }
	}
}

.btn-lbl {
	display: inline-block;
}


/* ----------------------------------------------------------------------- */
/* option : levitate */

.btn.btn--lev {
	box-shadow: 10px 10px 15px rgba(0,0,0,0.1);
	
	/* 塗りつぶしボタンの場合は影を少し濃くする */
	&.btn--fill {
		box-shadow: 10px 10px 15px rgba(0,0,0,0.2);
	}
	
	&:hover {
		box-shadow: 15px 15px 25px rgba(0,0,0,0.2);
	}
	
	&:active {
		box-shadow: 3px 3px 5px rgba(0,0,0,0.2);
	}
}


/* ----------------------------------------------------------------------- */
/* type : fill */
/* ----------------------------------------------------------------------- */

.btn.btn--fill {
	color: #fff;
	background-color: var(--color-txt);
	
	a:hover &,
	&:hover {
		color: #fff !important;
		background-color: var(--color-hover) !important;
	}
	
	a:active &,
	&:active {
		box-shadow: 0 0 0 rgba(0,0,0,0.15);
	}
	
	&::before {
		position: absolute;
		content: "";
		bottom: 0;
		top: auto;
		left: 0;
		display: block;
		width: 100%;
		height: 20%;
		transition: 0.2s cubic-bezier(.55,.06,.83,.43);
		transition-property: height, opacity, background;
		border: none;
		opacity: 1;
		border-radius: 5px;
	}
	
	&.-primary {
		color: rgba(255,255,255,1);
		background-color: var(--color-accent);
		
		a:hover &,
		&:hover {
			background-color: var(--color-accent-lighten) !important;
			border-color: var(--color-accent-lighten) !important;
			color: rgba(255,255,255,1) !important;
		}
	}
	
	&.-secondary {
		background-color: var(--color-txt);
		
		a:hover &,
		&:hover {
			background-color: var(--color-hover) !important;
			border-color: var(--color-hover) !important;
			color: rgba(255,255,255,1) !important;
		}
	}
	
	&.-warning {
		background-color: rgb(255, 0, 0) !important;
		
		a:hover &,
		&:hover {
			color: #fff !important;
			background-color: rgb(255, 0, 0) !important;
			border-color: rgb(255, 0, 0) !important;
		}
	}
	
	&[disabled] {
		background: rgba(0,0,0,0.25);
		color: #fff;
		pointer-events: none;
	}
}


/* ----------------------------------------------------------------------- */
/* type : text */
/* ----------------------------------------------------------------------- */

.btn--t {
	
	&::before {
		position: absolute;
		display: block;
		inset: auto 0 0 auto;
		width: 100%;
		height: 1px;
		margin: auto 0 0;
		border: none;
		background-color: currentColor;
		transition: 0.2s cubic-bezier(.22,.61,.36,1);
		transition-property: background-color, color, opacity;
		content: "";
	}
	
	&,
	&.-secondary,
	&.-primary,
	&.-warning {
		padding: 0;
		font-weight: inherit;
		
		&::before {
			opacity: 0;
		}
		
		&:hover::before {
			opacity: 1;
		}
	}
	
	&:hover,
	&a.-secondary:hover,
	&a.-primary:hover,
	&a.-warning:hover,
	&.btn:hover,
	&.btn.-secondary:hover,
	&.btn.-primary:hover,
	&.btn.-warning:hover {
		text-decoration: none;
		background-color: transparent;
		color: var(--color-accent);
	}
	
	
	&[target="_blank"]::after,
	a &[target="_blank"]::after {
		margin-left: 3px;
		margin-right: 0;
	}
}