/*----------------------------------------*/
/* 基本 */
/*----------------------------------------*/

body {
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	color: #444444;
	max-width: 100%
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
	font-weight: 700;
	line-height: 1.6;
	margin: 0;
	padding: 0;
	color: #444444
}
dl, dt, dd, figure, figcaption {
	margin: 0;
}
.container {
	max-width: 1300px;
	padding-left: 50px;
	padding-right: 50px;
	margin: 0 auto;
}
.right-r {
	border-top-right-radius: 20px;
}
.left-r {
	border-top-left-radius: 20px;
}
.row {
	margin-left: -20px;
	margin-right: -20px;
}
.row > * {
	padding-left: 20px;
	padding-right: 20px;
}
@media (max-width: 1199px) {
	.container {
		padding-left: 50px;
		padding-right: 50px;
	}
}
@media (max-width: 991px) {
	.row {
		margin-left: -15px;
		margin-right: -15px;
	}
	.row > * {
		padding-left: 15px;
		padding-right: 15px;
	}
}
@media (max-width: 767px) {
	.container {
		max-width: 575px;
		padding-left: 20px;
		padding-right: 20px;
	}
	.row {
		margin-left: -10px;
		margin-right: -10px;
	}
	.row > * {
		padding-left: 10px;
		padding-right: 10px;
	}
	.right-r {
		border-top-right-radius: 10px;
	}
	.left-r {
		border-top-left-radius: 10px;
	}
}

/* ------------------------------ */
/* a */
/* ------------------------------ */

a {
	transition: 0.3s;
}
a, a:hover{
	color: #444444;
	text-decoration: none;
}
a.img-wrap {
	display: block;
	overflow: hidden;
}
@media (min-width: 768px) {
	a.img-wrap img {
		transition: 0.3s;
	}
	a.img-wrap:hover img {
		scale: 1.1;
	}
}

/* ------------------------------ */
/* font & Icon & Color  */
/* ------------------------------ */

strong, .strong {
	font-weight: 700;
}
.en {
	font-family: "Outfit", sans-serif;
	font-optical-sizing: auto;
	font-weight: 500;
	font-style: normal;
}
.material-symbols-sharp {
	font-variation-settings:
	'FILL' 0,
	'wght' 200,
	'GRAD' 0,
	'opsz' 24
}
.material-symbols-sharp {
	font-size: inherit;
}
.color {
	color: #25B7C0;
}
.img-blue {
	position: relative;
	border-radius: 10px;
	overflow: hidden;
}
.img-blue::after {
	position: absolute;
	top: 0;
	left: 0;
	content: "";
	width: 100%;
	height: 100%;
	background-color: #071F21;
	opacity: 0.1;
}
.img-blue img {
	width: 100%;
}
.indent {
	text-indent: -1em;
	padding-left: 1em;
}

/* ------------------------------ */
/* btn */
/* ------------------------------ */

.btn-01 {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	min-height: 80px;
	background-color: #ffffff;
	border: 1px solid #25B7C0;
	border-radius: 5px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.6;
	padding: 10px 50px 10px 30px;
}
.btn-01::after {
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	font-family: "Material Symbols Sharp";
	content: "\e5cc";
	display: flex;
	justify-content: center;
	align-items: center;
	width: 20px;
	height: 20px;
	background-color: #25B7C0;
	border-radius: 50%;
	color: #ffffff;
	font-weight: 400;
	line-height: 1;
	padding-left: 0.1em;
}
.btn-02 {
	position: relative;
	display: flex;
	align-items: center;
	width: fit-content;
	min-width: 240px;
	min-height: 70px;
	background-color: #F2E9D8;
	border-radius: 70px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.6;
	padding: 10px 50px 10px 40px;
}
.btn-02::after {
	position: absolute;
	right: 15px;
	top: 50%;
	transform: translateY(-50%);
	font-family:"Material Symbols Sharp";
	content:"\e5cc";
	display: flex;
	justify-content: center;
	align-items: center;
	width: 40px;
	height: 40px;
	background-color: #25B7C0;
	border-radius: 50%;
	color: #ffffff;
}
.btn-wrap-right > a {
	margin-left: auto;
}
.btn-03 {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	width: fit-content;
	width: 100%;
	max-width: 320px;
	min-height: 70px;
	border: 1px solid #25B7C0;
	background-color: #25B7C0;
	color: #ffffff;
	border-radius: 70px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.6;
	padding: 10px 30px;
}
.btn-03 span {
	display: inline-block;
}
.btn-04 {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	width: fit-content;
	width: 100%;
	max-width: 320px;
	min-height: 60px;
	border: 1px solid #25B7C0;
	background-color: #ffffff;
	color: #25B7C0;
	border-radius: 60px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.6;
	padding: 10px 40px;
	transition: 0.3s;
}
.btn-04 span {
	display: inline-block;
}
@media (min-width: 768px) {
	.btn-01:hover {
		background-color: #25B7C0;
		color: #ffffff;
	}
	.btn-01:hover::after {
		background-color: #ffffff;
		color: #25B7C0;
	}
	.btn-02:hover {
		background-color: #25B7C0;
		color: #ffffff;
	}
	.btn-02:hover::after {
		background-color: #ffffff;
		color: #25B7C0;
	}
	.btn-03:hover {
		background-color: #ffffff;
		color: #25B7C0;
	}
	.btn-04:hover {
		background-color: #25B7C0;
		color: #ffffff;
	}
}
@media (max-width: 767px) {
	.btn-01 {
		font-size: 14px;
		min-height: 70px;
		padding: 10px 50px 10px 20px;
	}
	.btn-01::after {
		right: 15px;
	}
	.btn-02 {
		min-width: 220px;
		min-height: 60px;
		font-size: 14px;
		padding: 10px 50px 10px 30px;
	}
	.btn-02::after {
		width: 30px;
		height: 30px;
	}
	.btn-wrap-right > a {
		margin: 0 auto;
	}
	.btn-03 {
		min-height: 60px;
		font-size: 14px;
	}
	.btn-03:hover {
		color: #ffffff;
	}
	.btn-04 {
		max-width: 200px;
		min-height: 50px;
		font-size: 14px;
	}
}

/* ------------------------------ */
/* .header 基本 */
/* ------------------------------ */

.header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background-color: #ffffff;
	z-index: 1000;
	transition: 0.3s;
	transform: translateY(-100%);
	animation: headerVisible 0.6s 1s forwards;
}
@keyframes headerVisible {
	0% {
		transform: translateY(-100%);
	}
	100% {
		transform: translateY(0);
	}
}
.header .wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	transition: 0.3s;
}
.header .site-logo {
	font-size: 20px;
	font-weight: 700;
	line-height: 1;
	margin: 0;
	padding: 0 15px 0 50px;
	transition: top 0.3s;
}
.header .site-logo a {}
.header .site-logo img {
	transition: width 0.3s;
}
@media (max-width: 991px) {
	.header .wrap {
		height: 70px;
	}
	.header .site-logo img {
		width: 110px;
	}
}
@media (max-width: 767px) {
	.header .wrap {
		height: 60px;
	}
	.header .site-logo {
		padding-left: 20px;
	}
	.header .site-logo img {
		width: 90px;
	}
}

/* ------------------------------ */
/* グローバルナビ */
/* ------------------------------ */

.header ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.header li {
	margin: 0;
	padding: 0;
}
.header .g-nav a {
	text-decoration: none;
}
.header .nav-sub {
	display: flex;
	justify-content: flex-end;
	align-items: center;
}
.header .nav-sub > ul {
	display: flex;
}
.header .nav-sub > ul > li {
}
.header .nav-sub > ul > li > a {
	display: flex;
	align-items: center;
	height: 35px;
	background-color: #F2E9D8;
	padding: 0 30px;
	margin-left: 1px;
	transition: 0.3s;
}
.header .nav-sub > ul > li > a span {
	position: relative;
	display: inline-block;
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	padding-left: 17px;
}
.header .nav-sub > ul > li > a span::before {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	font-family: "Material Symbols Sharp";
	content: "\e5cc";
	display: flex;
	justify-content: center;
	align-items: center;
	width: 12px;
	height: 12px;
	background-color: #25B7C0;
	border-radius: 50%;
	color: #ffffff;
	font-weight: 400;
	line-height: 1;
}
.header .nav-sub > ul > li > a:hover {
	background-color: #25B7C0;
	color: #ffffff;
}
.header .nav-sub > ul > li > a:hover span::before {
	background-color: #ffffff;
	color: #25B7C0;
}
.header .nav-sub > ul > li:last-child > a {
	background-color: #25B7C0;
	color: #ffffff;
}
.header .nav-sub > ul > li:last-child > a span {
	padding: 0 18px 0 0;
}
.header .nav-sub > ul > li:last-child > a span::before {
	display: none;
}
.header .nav-sub > ul > li:last-child > a span::after {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	font-family:"Material Symbols Sharp";
	content:"\e8cc";
	font-size: 115%;
	font-weight: normal;
}
.header .nav-sub > ul > li:last-child > a:hover {
	background-color: #444444;
}
.header .nav-sub > ul > li:last-child > a:hover span::after {
	color: #25B7C0;
}
.header .nav-main {
	display: flex;
	justify-content: flex-end;
	align-items: center;
}
.header .nav-main > ul {
	display: flex;
	font-size: 15px;
	height: 100%;
	margin: 0;
	padding: 0;
}
.header .nav-main > ul > li {
	display: flex;
	justify-content: center;
	align-items: center;
}
.header .nav-main > ul > li > a {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 85px;
	transition: 0.3s;
	z-index: 2;
}
.header .nav-main > ul > li.has-child > a::after {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: -15px;
	content: "";
	border-top: 15px solid #ffffff;
	border-right: 15px solid transparent;
	border-left: 15px solid transparent;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s, visibility 0.3s;
}
.header .nav-main > ul > li.has-child:hover > a::after {
	opacity: 1;
	visibility: visible;
}
.header .nav-main > ul > li > a > dl {
	display: flex;
	align-items: center;
	border-right: 1px solid #dddddd;
	line-height: 1;
	padding: 0 20px;
}
.header .nav-main > ul > li:last-child > a > dl {
	border-right: none;
}
.header .nav-main > ul > li > a > dl > dt {
	width: 40px;
}
.header .nav-main > ul > li > a > dl > dd {
	flex: 1;
	padding-left: 10px;
}
.header .nav-main > ul > li > a > dl > dd h2 {
	font-size: 15px;
	line-height: 1;
	margin: 0 0 7px 0;
}
.header .nav-main > ul > li > a > dl > dd .en {
	font-size: 13px;
}
.header .nav-main > ul > li > a:hover > dl > dt img {
  animation: bound .8s ease-out infinite;
}
@keyframes bound {
  0% {
	transform: translateY(0);
  }
  60% {
	transform: translateY(-5px);
  }
  100% {
	transform: translateY(0);
  }
}
@media (max-width: 1199px) {
	.header .nav-main > ul > li > a > dl {
		padding: 0 15px;
	}
	.header .nav-main > ul > li > a > dl > dt {
		width: 35px;
	}
	.header .nav-main > ul > li > a > dl > dd h2 {
		font-size: 14px;
		font-feature-settings: "palt";
	}
	.header .nav-main > ul > li > a > dl > dd .en {
		font-size: 12px;
	}
}

/* スクロール時の処理 */
.header.narrow {
	box-shadow: 0 20px 20px rgba(0,0,0,0.1);
}
@media (min-width: 768px) {
	.header.narrow .nav-sub > ul > li > a {
		height: 30px;
	}
	.header.narrow .nav-main > ul > li > a {
		height: 65px;
	}
}

/* ------------------------------ */
/* グローバルナビ｜メガメニュー  */
/* ------------------------------ */

.header .nav-ul-child {
	display: none;
}
@media (min-width:768px) {
	.header .nav-ul-child {
		display: block;
		position: absolute;
		top: 100%;
		left: 0;
		width: 100%;
		background-color: #25B7C0;
		padding: 40px;
		box-shadow: 0 20px 20px rgba(0,0,0,0.1);
		transition: opacity 0.3s, visibility 0.3s;
		opacity: 0;
		visibility: hidden;
	}
	.header .nav-main > ul > li:hover .nav-ul-child {
		opacity: 1;
		visibility: visible;
		z-index: 1;
	}
	.header .nav-ul-child .row-wrap {
		display: flex;
		max-width: 890px;
		margin: 0 auto;
	}
	.header .nav-ul-child .row-wrap .col-main {
		width: 40%;
		border-right: 1px solid rgba(255,255,255,0.5);
		padding-right: 40px;
	}
	.header .nav-ul-child .row-wrap .col-sub {
		width: 60%;
		padding-left: 40px;
	}
	.header .nav-ul-child .row-wrap .col-main h3 {
		font-size: 24px;
		color: #ffffff;
		margin: 0 0 15px 0;
	}
	.header .nav-ul-child .row-wrap .col-main p {
		font-size: 15px;
		line-height: 1.8;
		color: #ffffff;
	}
	.header .nav-ul-child .row-wrap .col-main .btn-wrap {
		margin-top: 20px;
	}
	.header .nav-ul-child .row-wrap .col-main .btn-wrap a {
		font-size: 14px;
		min-height: 60px;
	}
	.header .nav-ul-child .row-wrap .col-main .btn-wrap a::after {
		right: 15px;
		width: 16px;
		height: 16px;
		font-size: 14px;
	}
	.header .nav-ul-child .row-wrap .col-main .btn-wrap a:hover {
		border-color: #ffffff;
	}
	.header .nav-ul-child .col-sub ul {
		display: flex;
		margin: 0 -15px;
		padding: 0;
	}
	.header .nav-ul-child .col-sub ul > li {
		width: 50%;
		padding: 0 15px;
	}
	.header .nav-ul-child .col-sub a {
		display: block;
		color: #ffffff;
	}
	.header .nav-ul-child .col-sub a dl dt {
		border-radius: 5px;
		overflow: hidden;
		margin-bottom: 10px;
	}
	.header .nav-ul-child .col-sub a dl dt img {
		transition: 0.3s;
	}
	.header .nav-ul-child .col-sub a:hover dt img {
		scale: 1.1;
	}
	.header .nav-ul-child .col-sub a dl dd .en {
		font-size: 14px;
	}
	.header .nav-ul-child .col-sub a dl dd h4 {
		font-size: 18px;
		color: #ffffff;
		margin: 0;
	}
}
@media (max-width: 991px) {
	.header .nav-wrap {
		display: none;
	}
}

/* ------------------------------ */
/* ハンバーガー */
/* ------------------------------ */

@media (min-width: 992px) {
	.hamburger {
		display: none !important;
	}
}
.hamburger {
	position: absolute;
	right: 35px;
	top: 50%;
	transform: translateY(-50%);
	display: block;
	padding: 0;
	border-radius: 0;
	border: 0;
	width: 35px;
	height: 35px;
	background-color: #ffffff;
}
.hamburger .navbar-toggler-icon {
	display: block;
	width: 25px;
	height: 2px;
	border-radius: 0;
	background-color: #25B7C0;
	position: absolute;
	transition: 0.5s;
	transform: translate(-50%,-50%) rotate(0);
	top: 50%;
	left: 50%;
}
.hamburger .navbar-toggler-icon::before,
.hamburger .navbar-toggler-icon::after {
	position: absolute;
	content: "";
	display: block;
	width: 25px;
	height: 2px;
	border-radius: 0;
	background-color: #25B7C0;
	transform-origin: center;
	transition: 0.5s;
}
.hamburger .navbar-toggler-icon::before {
	transform: translate(0,-9px) rotate(0deg);
}
.hamburger .navbar-toggler-icon::after {
	transform: translate(0,9px) rotate(0deg);
}
/*オープン*/
.hamburger.open .navbar-toggler-icon {
	transform: translate(-50%,-50%) rotate(45deg);
}
.hamburger.open .navbar-toggler-icon::before {
	transform: translate(0,0) rotate(90deg);
}
.hamburger.open .navbar-toggler-icon::after {
	transform: translate(0,0) rotate(90deg);
}
@media (max-width: 767px) {
	.hamburger {
		right: 15px;
	}
}
@media (max-width: 1199px) {
	body.fixed {
		position: relative;
		overflow: hidden;
		position: fixed;
		width: 100%;
		height: 100%;
	}
	body.fixed .header {
		box-shadow: 0 1px 0 #eeeeee;
	}
}

/* ------------------------------ */
/* SPメニュー */
/* ------------------------------ */

.sp-nav {
	display: none;
	background-color: #ffffff;
	border-bottom: 1px solid #dddddd;
	position: fixed;
	top: 70px;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 100;
	font-size: 14px;
	box-shadow: 0 10px 10px rgba(0,0,0,0.1);
	overflow: auto;
}
.sp-nav .main-nav ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
.sp-nav .main-nav > ul > li {
	padding: 0;
	margin: 0;
	border-bottom: solid 1px #eeeeee;
}
.sp-nav .main-nav > ul > li a {
	position: relative;
	display: flex;
	align-items: center;
	padding: 15px 40px 15px 20px;
	font-size: 14px;
	font-weight: 700;
}
.sp-nav .main-nav > ul > li a::after {
	position: absolute;
	top: 50%;
	right: 19px;
	transform: translateY(-50%);
	font-family: "Material Symbols Sharp";
	content: "\e5cc";
	font-size: 120%;
	font-weight: 700;
	color: #25B7C0;
}
.sp-nav .main-nav > ul > li a.icon::after {
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	font-family: "Material Symbols Sharp";
	content: "\e5cc";
	display: flex;
	justify-content: center;
	align-items: center;
	width: 15px;
	height: 15px;
	background-color: #25B7C0;
	border-radius: 50%;
	color: #ffffff;
	font-size: 13px;
	font-weight: 400;
	line-height: 1;
}
.sp-nav .main-nav > ul > li > a > dl {
	display: flex;
	align-items: center;
}
.sp-nav .main-nav > ul > li > a > dl dt {
	width: 40px;
}
.sp-nav .main-nav > ul > li > a > dl dd {
	flex: 1;
	padding-left: 15px;
}
.sp-nav .main-nav > ul > li > a > dl dd .ja {
	font-size: 16px;
}
.sp-nav .main-nav > ul > li > a > dl dd .en {
	font-size: 13px;
	font-weight: 500;
}
.sp-nav .main-nav > ul > li > ul {
	padding-left: 75px;
}
.sp-nav .main-nav > ul > li > ul > li a {
	border-top: 1px solid #eeeeee;
	padding-left: 0;
}
.sp-nav .brn-wrap {
	padding: 30px 20px 50px 20px;
}
.sp-nav .brn-wrap a {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 180px;
	height: 50px;
	margin: 0 auto;
	color: #ffffff;
	background-color: #25B7C0;
	text-decoration: none;
}
.sp-nav .brn-wrap a span {
	position: relative;
	display: inline-block;
	font-size: 13px;
	font-weight: 500;
	padding-right: 20px;
}
.sp-nav .brn-wrap a span::after {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	font-family:"Material Symbols Sharp";
	content:"\e8cc";
	font-size: 115%;
	font-weight: normal;
}
@media (min-width: 992px) {
	.sp-nav {
		display: none !important;
	}
}
@media (min-width: 768px) {
	.sp-nav > * {
		max-width: 640px;
		margin: 0 auto;
	}
	.sp-nav .main-nav {
		padding-top: 30px;
	}
}
@media (max-width: 767px) {
	.sp-nav {
		top: 60px;
	}
}

/* ------------------------------ */
/* .footer */
/* ------------------------------ */

.footer {
	font-size: 14px;
	padding: 100px 0;
	background-color: #555555;
	color: #ffffff;
}
.footer .row-footer {
	display: flex;
	justify-content: space-between;
	margin: 0 -20px;
}
.footer .row-footer > * {
	width: 100%;
	max-width: 440px;
	padding: 0 20px;
}
.footer .col-left {
	line-height: 2;
}
.footer .col-left .logo {
	font-size: 20px;
	line-height: 1;
	margin: 0 0 25px 0;
}
.footer .col-right .row-nav {
	display: flex;
	justify-content: space-between;
	margin: 0 -10px;
}
.footer .col-right .row-nav > * {
	width: fit-content;
	padding: 0 10px;
}
.footer .col-right .row-nav ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
.footer .col-right .row-nav ul li {
	line-height: 1.6;
	margin-bottom: 20px;
}
.footer .col-right .row-nav ul li a {
	position: relative;
	display: inline-block;
	color: #ffffff;
	padding-left: 20px;
}
.footer .col-right .row-nav ul li a::before {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: #25B7C0;
	transition: 0.3s;
}
.footer .copyright {
	font-size: 12px;
	text-align: center;
	margin-top: 100px;
}
@media (min-width: 768px) {
	.footer .col-right .row-nav ul li a:hover::before {
		width: 14px;
		height: 14px;
		left: -2px;
	}
}
@media (max-width: 991px) {
	.footer .row-footer {
		display: block;
		width: auto;
	}
	.footer .row-footer > * {
		max-width: 100%;
	}
	.footer .col-left .logo {
		text-align: center;
	}
	.footer .col-right .row-nav {
		justify-content: flex-start;
		margin-top: 60px;
	}
	.footer .col-right .row-nav > * {
		width: 50%;
	}
}
@media (max-width: 767px) {
	.footer {
		padding: 60px 0;
	}
	.footer .col-left {
		text-align: center;
	}
	.footer .col-right .row-nav {
		display: block;
		margin-top: 40px;
	}
	.footer .col-right .row-nav > * {
		width: 100%;
	}
	.footer .col-right .row-nav .col-01 ul {
		border-top: 1px solid rgba(255,255,255,0.1);
	}
	.footer .col-right .row-nav ul li {
		border-bottom: 1px solid rgba(255,255,255,0.1);
		margin: 0;
	}
	.footer .col-right .row-nav ul li a {
		width: 100%;
		padding: 10px 0 10px 20px;
	}
	.footer .copyright {
		margin-top: 50px;
	}
}

/* ------------------------------ */
/* .to-top */
/* ------------------------------ */

.to-top {
	visibility: hidden;
	padding: 0;
	position: fixed;
	bottom: 20px;
	right: 20px;
	transition: 0.5s;
	transform: translateY(20px);
	filter: blur(10px);
	opacity: 0;
	z-index: 100;
}
.to-top.visible {
	visibility: visible;
	transform: translateY(0px);
	filter: blur(0);
	opacity: 1;
}
.to-top a {
	position: relative;
	display: block;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background-color: #444444;
	color: #ffffff;
	font-size: 24px;
}
.to-top a::after {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-family: "Material Symbols Sharp";
	content: "\e316";
	font-size: 24px;
	font-weight: 700;
	color: #ffffff;
}

/* ------------------------------ */
/* .to-search */
/* ------------------------------ */

.to-search {
	visibility: hidden;
	padding: 0;
	position: fixed;
	bottom: 80px;
	right: 20px;
	transition: 0.5s;
	transform: translateY(20px);
	filter: blur(10px);
	opacity: 0;
	z-index: 100;
}
.to-search.visible {
	visibility: visible;
	transform: translateY(0px);
	filter: blur(0);
	opacity: 1;
}
.to-search span {
	position: relative;
	display: block;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background-color: #444444;
	color: #ffffff;
	font-size: 24px;
	cursor: pointer;
}
.to-search span::after {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-family: "Material Symbols Sharp";
	content: "\e8b6";
	font-size: 24px;
	font-weight: 600;
	color: #ffffff;
}

/* .content-search */
.content-search {
	display: flex;
	align-items: center;
	position: fixed;
	left: 0;
	bottom: -100px;
	width: 100%;
	height: 100px;
	background-color: rgba(0,0,0,0.75);
	transition: 0.3s;
	z-index: 101;
}
.content-search.show {
	bottom: 0;
}
.content-search .close-btn {
	display: none;
	position: absolute;
	right: 15px;
	top: -40px;
	width: 25px;
	height: 25px;
	cursor: pointer;
}
.content-search .close-btn::after {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-family: "Material Symbols Sharp";
	content: "\e5cd";
	font-size: 48px;
	font-weight: 200;
	color: #333333;
}
.content-search.show .close-btn {
	display: block;
}
.content-search .inner {
	max-width: 400px;
	margin: 0 auto;
}
.content-search .inner form {
	display: flex;
}
.content-search .inner form input[type='text'] {
	flex-basis: 0;
	flex-shrink: 0;
	flex-grow: 1;
	font-size: 18px;
	border: solid 1px #FFFFFF;
	border-right: 0;
	border-radius: 0;
	padding: 20px;
	font-size: 16px;
	padding: 12px 16px;
	background-position: top 50% right 10px;
	transition: border-color 0.4s;
	outline: none;
}
.content-search .inner form .submit {
	display: flex;
	flex-shrink: 0;
	flex-basis: 80px;
	justify-content: center;
	align-items: center;
	text-align: center;
	font-weight: 700;
	font-size: 16px;
	width: fit-content;
	padding: 8px 16px;
	border-radius: 0;
	background-position: top 50% right 10px;
	color: #ffffff;
	background-color: #25B7C0;
	border: solid 1px #25B7C0;
	border-left: 0;
	transition: border-color 0.4s;
	outline: none;
}
.content-search .inner form .submit[disabled] {
	background-color: #25B7C0;
	border-color: #25B7C0;
	color: #FFFFFF;
	pointer-events: none;
}
.content-search .inner form input[type='text']:focus {
	border: 1px solid #25B7C0;
	border-right: 0;
	outline: none;
}
.content-search .inner form input[type='text']:focus + .submit[disabled] {
	border-color: #25B7C0;
}

/* ------------------------------ */
/* 抜き差しの背景 */
/* ------------------------------ */

.bg-wrap {
	padding: 0 50px;
}
.bg-wrap .relative {
	position: relative;
	z-index: 1;
}
.bg-wrap .flag {
	position: absolute;
	left: 0;
	top: -30px;
	display: flex;
	justify-content: center;
	align-items: center;
	width: fit-content;
	min-width: 180px;
	height: 60px;
	padding: 0 30px;
	font-size: 16px;
	background-color: #F48414;
	color: #ffffff;
}
.bg-wrap .color-wrap {
	position: relative;
	background-color: #25B7C0;
	padding: 70px 0;
}
.bg-wrap .color-wrap.right-r::before {
	position: absolute;
	left: -50px;
	top: 0;
	content: "";
	width: 50px;
	height: 100%;
	background-color: #25B7C0;
}
.bg-wrap .color-wrap.left-r::before {
	position: absolute;
	right: -50px;
	top: 0;
	content: "";
	width: 50px;
	height: 100%;
	background-color: #25B7C0;
}
.bg-wrap .white-wrap {
	position: relative;
	background-color: #ffffff;
}
.bg-wrap .white-wrap.right-r::before {
	position: absolute;
	left: -50px;
	top: 0;
	content: "";
	width: 50px;
	height: 100%;
	background-color: #ffffff;
}
.bg-wrap .white-wrap.left-r::before {
	position: absolute;
	right: -50px;
	top: 0;
	content: "";
	width: 50px;
	height: 100%;
	background-color: #ffffff;
}
.bg-wrap .inner-wrap {
	position: relative;
	padding: 70px 0;
}
.bg-wrap .inner-wrap > *:first-child,
.bg-wrap .inner-wrap > .flag + * {
	margin-top: 0;
}
.bg-wrap .inner-wrap > *:last-child {
	margin-bottom: 0;
}
@media (max-width: 767px) {
	.bg-wrap {
		padding: 0 10px;
	}
	.bg-wrap .flag {
		top: -20px;
		min-width: 120px;
		height: 40px;
		padding: 0 20px;
		font-size: 14px;
	}
	.bg-wrap .color-wrap {
		padding: 60px 0;
	}
	.bg-wrap .color-wrap.right-r::before {
		left: -10px;
		width: 10px;
	}
	.bg-wrap .color-wrap.left-r::before {
		right: -10px;
		width: 10px;
	}
	.bg-wrap .white-wrap.right-r::before {
		left: -10px;
		width: 10px;
	}
	.bg-wrap .white-wrap.left-r::before {
		right: -10px;
		width: 10px;
	}
	.bg-wrap .white-wrap.left-r .container {
		padding-right: 10px;
	}
	.bg-wrap .white-wrap.right-r .container {
		padding-left: 10px;
	}
	.bg-wrap .inner-wrap {
		padding: 60px 0;
	}
}

/*----------------------------------------*/
/* いろいろ */
/*----------------------------------------*/

.youtube-video {
	width: 100%;
	aspect-ratio: 16 / 9;
}
.youtube-video iframe {
	width: 100%;
	height: 100%;
}

/*----------------------------------------*/
/* スクロールエフェクト */
/*----------------------------------------*/

/* sa-fadeup */
.sa-fadeup {
	transition: opacity 0.6s, transform 0.6s;
	opacity: 0.7;
	transform: translateY(100px) scale(0.95);
	will-change: opacity, transform;
}
.sa-fadeup.is-active {
	transform: translateY(0) scale(1);
	opacity: 1;
}

/* sa-title-anime1 */
.sa-title-anime1 {
	display: inline-flex;
	overflow: hidden;
}
.sa-title-anime1 .anime-inner {
	display: inline-block;
	transition: opacity 0.4s, transform 0.4s;
	opacity: 0.7;
	transform: translateY(100%);
	will-change: opacity, transform;
}
.sa-title-anime1.is-active .anime-inner {
	transform: translateY(0);
	opacity: 1;
}

/* sa-title-anime2 */
.sa-title-anime2 img {
	opacity: 0;
	transition: opacity 0.4s 0.1s;
}
.sa-title-anime2.is-active img {
	opacity: 1;
}
.sa-title-anime2 h2,
.sa-title-anime2 p,
.sa-title-anime2 .en {
	opacity: 0;
	transform: translateX(-50px);
	transition: opacity 0.4s, transform 0.4s;
}
.sa-title-anime2.is-active h2,
.sa-title-anime2.is-active p,
.sa-title-anime2.is-active .en {
	opacity: 1;
	transform: translateX(0);
}


/*ページ遷移アニメーション*/
.animation-bg .animation-bg-element {
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: calc(100% / 10);
	z-index: 999;
	animation-name: PageAnime-move-order;
	animation-duration: 0.3s;
	animation-delay: 0.05s;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
	pointer-events: none;
}
.animation-bg .animation-bg-element:nth-child(2) {
	left: 10%;
	animation-delay: 0.1s;
}
.animation-bg .animation-bg-element:nth-child(3) {
	left: 20%;
	animation-delay: 0.15s;
}
.animation-bg .animation-bg-element:nth-child(4) {
	left: 30%;
	animation-delay: 0.2s;
}
.animation-bg .animation-bg-element:nth-child(5) {
	left: 40%;
	animation-delay: 0.25s;
}
.animation-bg .animation-bg-element:nth-child(6) {
	left: 50%;
	animation-delay: 0.3s;
}
.animation-bg .animation-bg-element:nth-child(7) {
	left: 60%;
	animation-delay: 0.35s;
}
.animation-bg .animation-bg-element:nth-child(8) {
	left: 70%;
	animation-delay: 0.4s;
}
.animation-bg .animation-bg-element:nth-child(9) {
	left: 80%;
	animation-delay: 0.45s;
}
.animation-bg .animation-bg-element:nth-child(10) {
	left: 90%;
	animation-delay: 0.5s;
}
.animation-bg .animation-bg-element::before {
	background: #FFFFFF;
	box-shadow: 0 0 0 1px #FFFFFF;
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
/* 順番に閉じる キーフレーム */
@keyframes PageAnime-move-order {
	0% {
		visibility: visible;
		opacity: 1;
	}
	100% {
		visibility: hidden;
		opacity: 0;
	}
}