@charset "utf-8";
/*----------------------------------------------
	大くくりコメントアウト large part
---------------------------------------------*/

/*  中くくりコメントアウト middle part
------------------------------------- */

/* 小くくりコメントアウト small part */

/*----------------------------------------------
	common
---------------------------------------------*/
.cursor {
  pointer-events: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  background: #535a60;
  border-radius: 50%;
  z-index: 1001;
  opacity: 0;
  transition: opacity .2s;
}
.cursor:before,
.cursor:after {
	content: '';
  background: #535a60;
	position: absolute;
	top: -100%;
	right: -100%;
	bottom: -100%;
	left: -100%;
	margin: auto;
	opacity: 0;
  transition: opacity .2s;
}
.cursor:before {
	width: 16px;
	height: 2px;
}
.cursor:after {
	width: 2px;
	height: 16px;
}
.is-moved .cursor {
	opacity: 1;
}
.is-outside .cursor {
	opacity: 0;
}
.is-zoom .cursor {
	background: none;
}
.is-zoom .cursor:before,
.is-zoom .cursor:after {
	opacity: 1;
}
.stalker {
  pointer-events: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: transparent;
	border: 1px solid #c3d2d7;
  z-index: 1000;
  opacity: 0;
  transition: opacity .2s .2s, background .2s;
}
.is-moved .stalker {
	opacity: 0.5;
}
.is-outside .stalker {
	opacity: 0;
}
.is-hover .stalker {
	background: #c3d2d7c3;
	border: none;
}
@media screen and (max-width: 960px) {
	.cursor,
	.stalker {
		display: none;
	}
}

/*----------------------------------------------
	icon
---------------------------------------------*/
.material-symbols-rounded {
	margin-right: 5px;
	vertical-align: middle;
	transform: translateY(-1px);
}
/* アイコンのサイズを変更するためのルール */
.material-symbols-rounded.md-18 { font-size: 18px; }
.material-symbols-rounded.md-24 { font-size: 24px; }
.material-symbols-rounded.md-36 { font-size: 36px; }
.material-symbols-rounded.md-48 { font-size: 48px; }

/* 明るい背景の場合に黒色でアイコンを表示するためのルール */
.material-symbols-rounded.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-symbols-rounded.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

/* 暗い背景の場合に白色でアイコンを表示するためのルール */
.material-symbols-rounded.md-light { color: rgba(255, 255, 255, 1); }
.material-symbols-rounded.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

/*----------------------------------------------
	section
---------------------------------------------*/
.c_section {
	width: 1000px;
	margin: 0 auto 160px;
}
@media screen and (max-width: 1020px) {
	.c_section {
		width: calc(100% - 60px);
		margin: 0 auto 60px;
	}
}

/*----------------------------------------------
	ttl
---------------------------------------------*/
.c_ttl_type02 {
	text-align: center;
	font-size: 4rem;
	font-weight: bold;
	letter-spacing: .6em;
  background: #3E3A39;
  /*background-image: -moz-linear-gradient( 0deg, rgb(0,162,216) 0%, rgb(62,183,153) 100%);
  background-image: -webkit-linear-gradient( 0deg, rgb(0,162,216) 0%, rgb(62,183,153) 100%);
  background-image: -ms-linear-gradient( 0deg, rgb(0,162,216) 0%, rgb(62,183,153) 100%);*/
  color: #fff;
  margin-left: calc( -50vw + 50%);
	margin-right: calc( -50vw + 50%);
  max-width: 100vw;
	width: 100vw;
  padding: 40px 0;
  position: relative;
  z-index: 4;
}
.c_ttl_type02.is_en {
  letter-spacing: .2em;
}
.c_ttl_type03 {
	margin-bottom: 20px;
	font-size: 3.4rem;
	font-weight: bold;
}
.c_ttl_type04 {
	margin: 5px 0 15px 0;
	font-size: 2rem;
	font-weight: bold;
  text-indent: -3em;
  padding-left: 3em;
  text-shadow: 3px 3px 3px #ffffff, -3px 3px 3px #ffffff, 3px -3px 3px #ffffff, -3px -3px 3px #ffffff, 3px 0px 3px #ffffff, 0px 3px 3px #ffffff, -3px 0px 3px #ffffff, 0px -3px 3px #ffffff;
}
#wlb .c_ttl_type04,
#osaka .c_ttl_type04{
  text-indent: 0;
  padding-left: 0;
}
.is_ttl_blue {
	color: #2c9dc3;
}
.is_ttl_green {
	color: #54bb52;
}
.is_ttl_pink {
	color: #e36877;
}
@media screen and (max-width: 960px) {
	.c_ttl_type02 {
		font-size: 3rem;
		letter-spacing: .2em;
	}
	.c_ttl_type03 {
		font-size: 2rem;
	}
	.c_ttl_type04 {
		font-size: 1.4rem;
	}
}

/*----------------------------------------------
	txt
---------------------------------------------*/
.c_txt_md {
	font-size: 2rem;
}
.c_txt_lg {
	font-size: 3rem;
}
.c_txt_cont {
	font-size: 2rem;
	line-height: 2em;
	/*text-align: justify;*/
  text-align: left;
}
@media screen and (max-width: 960px) {
	.c_txt_md {
		font-size: 1.4rem;
	}
	.c_txt_lg {
		font-size: 1.8rem;
	}
	.c_txt_cont {
		font-size: 1.6rem;
		line-height: 1.8em;
    padding-bottom: 80px;
    text-align: left;
	}
  .c_txt_plan {
    text-align: left!important;
    text-shadow: 3px 3px 3px #ffffff, -3px 3px 3px #ffffff, 3px -3px 3px #ffffff, -3px -3px 3px #ffffff, 3px 0px 3px #ffffff, 0px 3px 3px #ffffff, -3px 0px 3px #ffffff, 0px -3px 3px #ffffff;
  }
}

/*----------------------------------------------
	btn
---------------------------------------------*/
.c_btn a {
	display: block;
	position: relative;
	width: 100%;
  max-width: 235px;
	padding: 8px 13px;
	border-radius: 50px;
	background-color: #009fe1;
	color: #fff;
	text-align: center;
	text-decoration: none;
	transition: all .3s;
}
.c_btn.is_btn_red a {
	background-color: #e62589;
}
.c_btn.is_btn_green a {
	background-color: #aecf12;
}
.c_btn.is_btn_pink a {
	background-color: #e36877;
}
.c_btn a:hover {
	opacity: .6;
}
.c_btn a::before {
	content: '';
	width: 10px;
	height: 10px;
	border: 1px solid #535a60;
	border-radius: 50px;
	position: absolute;
	top: -100%;
	right: -100%;
	bottom: -100%;
	left: -100%;
	margin: auto;
	opacity: 0;
}
.c_btn a:hover::before {
	animation: .5s ease bubble;
}

.c_btn_bnr {
	display: flex;
	flex-direction: column;
	box-shadow: 0 0 10px rgba(0,0,0,.2);
	color: #333 !important;
	text-decoration: none;
}
.c_btn_bnr img {
	transition: all .3s;
}
.c_btn_bnr:hover img {
	opacity: .6;
}
.c_btn_bnr span {
	display: inline-block;
	position: relative;
	overflow: hidden;
	z-index: 2;
	padding: 15px 18px;
	transition: all .3s;
  background: #fff;
}
.c_btn_bnr span::before,
.c_btn_bnr span::after {
	position: absolute;
	top: -100%;
	right: -100%;
	bottom: -100%;
	left: -100%;
	width: 20px;
	height: 20px;
	margin: auto;
	opacity: 0;
	border-radius: 400px;
	content: '';
}
.c_btn_bnr span::before {
	z-index: -1;
	border: 1px solid #c3d2d7;
}
.c_btn_bnr:hover span::before {
	animation: btn_circle 1.5s .2s forwards;
}
.c_btn_bnr span::after {
	z-index: -2;
	background-color: #e7f0f3;
}
.c_btn_bnr:hover span::after {
	animation: btn_circle 1s forwards;
}
@keyframes btn_circle {
	0% {
		width: 20px;
		height: 20px;
		opacity: 0;
	}
	20% {
		opacity: 1;
	}
	100% {
		width: 500px;
		height: 500px;
		opacity: 1;
	}
}
@media screen and (max-width: 960px) {
  .c_btn a {
    max-width: inherit;
  }
	.c_btn_bnr span {
		background: #fff;
	}
}

/*----------------------------------------------
	flex
---------------------------------------------*/
.c_flex {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.c_flex.is_flex_center {
	justify-content: center;
}
.c_flex.is_flex_center .c_flex_box {
	margin: 0 40px;
}
.c_flex.is_flex_col2 .c_flex_box {
	width: calc(50% - 20px);
}

.u_bg_wlb .c_flex_box {
	width: calc(50% - 20px);
  margin: 0 auto;
}

.c_flex.is_flex_col2 .c_flex_box:not(:nth-last-child(-n+1)) {
	margin-bottom:15px;
}
.c_flex.is_flex_col2 .c_flex_box:last-child{
	margin-bottom:40px;
}



.c_flex.is_flex_btn .c_flex_box {
	width: calc(50% - 5px);
}
.u_bg_wlb .c_flex {
  justify-content: center;
}
.c_flex_img {
	margin-bottom: 5px;
}
@media screen and (max-width: 960px) {
	.c_flex.is_flex_col2 .c_flex_box,
  .u_bg_wlb .c_flex_box {
		width: 100%;
	}
	.c_flex.is_flex_col2 .c_flex_box:last-child{
	margin-bottom:0;
}
	.c_flex.is_flex_col2 > .c_flex_box:not(:last-child) {
		margin-bottom: 40px !important;
	}
	.c_flex.is_flex_btn > .c_flex_box {
		margin-bottom: 10px !important;
	}
	.c_flex.is_flex_center .c_flex_box {
		margin: 0 0 20px;
	}
  .u_bg_wlb .c_flex.is_flex_btn .c_flex_box {
    width: 100%;
  }
}

/*----------------------------------------------
	fade
---------------------------------------------*/
/*  .fade_section
------------------------------------- */
.fade_section {
	opacity: 0;
	transform: translateY(-50px);
	transition: all .3s;
}
.fade_section.fadein {
	opacity: 1;
	transform: translateY(0);
}