/*====================================================
//class .sa
====================================================*/
.sa {
	opacity: 0;
	transition: all .8s ease;
}
.sa.show {
	opacity: 1;
	transform: none;
}
.sa-lr {
	transform: translate(-40px, 0);
}
.sa-rl {
	transform: translate(40px, 0);
}
.sa-up {
	transform: translate(0, 40px);
}
.sa-down {
	transform: translate(0, -40px);
}
.sa-scaleUp {
	transform: scale(.7);
	transition: all .8s ease;
}
.sa-scaleDown {
	transform: scale(1.5);
	transition: all .8s ease;
}
.sa-rotateL {
	transform: rotate(180deg);
}
.sa-rotateR {
	transform: rotate(-180deg);
}

/*====================================================
//// id mv
====================================================*/
#mv .head_main {
	letter-spacing: -.15em;
}
#mv .head_point {
	position: relative;
	padding: 0 1em 0 .8em;
}
#mv .head_point::before,
#mv .head_point::after {
	background: url('../img/top/title_deco.png') no-repeat center / contain;
	content: '';
	display: block;
	margin: auto;
	position: absolute;
		top: 0;
		bottom: 0;
	width: .8em;
	height: .8em;
}
#mv .head_point::before {
	left: 0;
}
#mv .head_point::after {
	right: 0;
	transform: scaleX(-1);
}
/* ////////// mobile ////////// */
@media screen and (max-width: 769px) {
	#mv .head_first {
		font-size: .65em;
	}
	#mv .head_main {
		font-size: 1.95em;
	}
	#mv .head_main .head_point {
		display: block;
		margin-bottom: .1em;
		padding: 0 .8em 0 .6em;
	}
	#mv .head_main .head_text {
		line-height: 1;
		margin-bottom: .5em;
	}
	#mv .txtBox {
		font-size: 1.2em;
		margin-top: 1em;
	}
}

@media screen and (max-width:500px) {
}

/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
	#mv .head_first {
		font-size: 2.4rem;
	}
	#mv .head_main {
		font-size: 10.8rem;
	}
	#mv .txtBox {
		font-size: 2.1rem;
	}
}

/* ////////// tablet ////////// */
@media screen and (min-width:769px) and (max-width:960px) {
}

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

/*====================================================
//// id leadCopy
====================================================*/
#leadCopy h2 {
	border-radius: 1em;
	padding: .3em 1.5em;
}
#leadCopy .txtBox p::first-letter {
	margin-left: 1em;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 769px) {
	#leadCopy .innerBox {
		padding-bottom: 0;
	}
	#leadCopy h2 {
		font-size: 1.3em;
	}
}

@media screen and (max-width:500px) {
}

/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
	#leadCopy .innerBox {
		max-width: 670px;
	}
	#leadCopy h2 {
		font-size: 2.1rem;
	}
}

/* ////////// tablet ////////// */
@media screen and (min-width:769px) and (max-width:960px) {
}

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

/*====================================================
//// id about
====================================================*/
#about .headBox {
	border-radius: 1.25em 1.25em 0 0;
	padding: 0 1em;
}
#about h2 {
	padding: .3em 1.0em;
	position: relative;
}
#about h2::after {
	background: var(--mainColor);
	border-radius: 10px;
	content: '';
	display: block;
	margin: auto;
	position: absolute;
		left: 0;
		bottom: 0;
	width: 100%;
	height: 3px;
}
#about .txtBox {
	border-radius: 1.25em;
	padding: 1.8em 2em;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 769px) {
	#about .headBox {
		border-radius: .7em .7em 0 0;
	}
	#about h2 {
		font-size: 1.3em;
	}
	#about .txtBox {
		border-radius: .7em;
		padding: 1.3em 1.5em;
	}
}

@media screen and (max-width:500px) {
}

/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
	#about .innerBox {
		max-width: 670px;
	}
	#about h2 {
		font-size: 3.2rem;
	}
	#about .txtBox {
		font-size: 1.9rem;
	}
}

/* ////////// tablet ////////// */
@media screen and (min-width:769px) and (max-width:960px) {
}

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

/*====================================================
//// id detail
====================================================*/
#detail {
	overflow: hidden;
	z-index: -1;
}
#detail .item a {
	height: 100%;
}
#detail .item .balloon {
	height: 100%;
	position: relative;
	transition: .2s ease-in-out;
}
#detail .item .balloon .small_decoBox {
	background: url('../img/top/detail_balloon.png') no-repeat top center / contain;
	margin: auto;
	position: absolute;
		top: 0;
		left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}
#detail .item h2 {
	border-bottom: dotted 4px;
	display: inline-block;
	line-height: 1.3;
	margin-bottom: .3em;
	padding-bottom: .4em;
}
#detail .item .imgBox {
	pointer-events: none;
}
#detail .decoBox {
	background: url('../img/top/detail_bg.png') repeat-x bottom center;
	background-size: 1200px auto ;
	display: block;
	margin: auto;
	position: absolute;
		left: -50vw;
		right: -50vw;
		bottom: 0;
	width: 100vw;
	height: 120px;
	z-index: 50;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 769px) {
	#detail .innerBox {
		padding: 5em 0 120px;
	}
	#detail .itemBox {
		grid-gap: 3em;
		margin: auto;
		max-width: 600px;
	}
	#detail .item {
		display: flex;
			align-items: center;
	}
	#detail .item:nth-child(odd) {
		flex-direction: row-reverse;
	}
	#detail .item .txtBox {
		/* height: 100%; */
	}
	#detail .item .balloon {
		display: flex;
			align-items: center;
			justify-content: center;
		min-height: 30vw;
	}
	#detail .item .balloon .small_decoBox {
		top: -1.5em;
		left: -1em;
		width: calc(100% + 2em);
		height: calc(100% + 4em);
	}
	#detail .item .txtBox {
		flex: 1;
	}
	#detail .item .item_head {
		padding: 0 .5em;
	}
	#detail .item h2 {
		font-size: 1.3em;
		min-width: 8em;
	}
	#detail .item .imgBox {
		width: 36%;
	}
	#detail .decoBox {
		background-size: 100%;
		height: 10vw;
		bottom: -1px;
	}
}

@media screen and (max-width:500px) {
	#detail .itemBox {
		grid-gap: 5em;
	}
	#detail .item h2 {
		font-size: 1.2em;
	}
	#detail .item.kumiai .imgBox figure {
		transform: scale(1.1) translateX(1em);
	}
	#detail .item.kyotei .imgBox figure {
		transform: scale(1.1) translateX(.5em);
	}
}

/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
	#detail .innerBox {
		padding-top: 80px;
	}
	#detail .itemBox {
		padding-top: 40px;
		grid-gap: 30px;
		grid-template-columns: 1fr 1fr;
		margin-bottom: -20px;
	}
	#detail .item {
		display: grid;
		font-size: 2.2rem;
		grid-template-rows: 1fr auto;
	}
	#detail .item a:hover {
		opacity: 1;
	}
	#detail .item .balloon {
		padding: 1.5em 1em 5em;
	}
	#detail .item .balloon::before,
	#detail .item .balloon::after {
		background: url('../img/top/detail_balloon.png') no-repeat center / contain;
		content: '';
		display: block;
		margin: auto;
		position: absolute;
	}
	#detail .item .balloon::before {
		top: 13em;
		right: -10px;
		width: 13%;
		height: 13%;
	}
	#detail .item .balloon::after {
		top: 16em;
		right: 10px;
		width: 8%;
		height: 8%;
	}
	#detail .item:nth-child(1) .balloon .small_decoBox::before {
		background: url('../img/top/detail_deco-1.png') no-repeat center / contain;
		content: '';
		display: block;
		margin: auto;
		position: absolute;
			top: -15px;
			left: -2vw;
		width: 7vw;
			max-width: 85px;
		height: 8vw;
			max-height: 90px;
	}
	#detail .item:nth-child(2) .balloon .small_decoBox::before {
		background: url('../img/top/detail_deco-2.png') no-repeat center / contain;
		content: '';
		display: block;
		margin: auto;
		position: absolute;
			top: -15px;
			right: -1.5vw;
		width: 7vw;
			max-width: 85px;
		height: 8vw;
			max-height: 90px;
	}
	#detail .item a:hover .balloon {
		transform: translateY(-80px);
	}
	#detail .item h2 {
		font-size: 3.0rem;
		min-width: 245px;
	}
	#detail .item p {
	}
	#detail .item .imgBox {
		margin: -130px auto -170px;
		width: 90%;
			max-width: 400px;
	}
	#detail .item .imgBox figure {
		transition: .3s ease-in-out;
	}
	#detail .item .imgBox.hover figure {
		transform: translateY(-80px);
		transition: .6s ease-in-out;
		transition-delay: .2s;
	}
	#detail .decoBox .hand {
		position: absolute;
			top: -30px;
		width: 40vw;
			max-width: 410px;
		height: 10vw;
			max-height: 100px;
	}
	#detail .decoBox .hand-kumiai {
		right: 53%;
	}
	#detail .decoBox .hand-kyotei {
		left: 52%;
	}
	#detail .decoBox .hand::before,
	#detail .decoBox .hand::after {
		content: '';
		display: block;
		margin: auto;
		position: absolute;
		width: 28%;
			max-width: 80px;
		height: 60%;
			max-height: 60px;
	}
	#detail .decoBox .hand-kumiai::before,
	#detail .decoBox .hand-kumiai::after {
		background: url('../img/top/detail_kumiai-h.png') no-repeat center / contain;
	}
	#detail .decoBox .hand-kumiai::before {
		left: 0;
		bottom: 0;
		transform: rotate(-7deg);
	}
	#detail .decoBox .hand-kumiai::after {
		top: 0;
		right: 0;
		transform: rotate(-3deg);
	}

	#detail .decoBox .hand-kyotei {
		width: 43vw;
			max-width: 440px;
	}
	#detail .decoBox .hand-kyotei::before,
	#detail .decoBox .hand-kyotei::after {
		background: url('../img/top/detail_kyotei-h.png') no-repeat center / contain;
	}
	#detail .decoBox .hand-kyotei::before {
		left: 0;
		top: 0;
		transform: rotate(3deg);
	}
	#detail .decoBox .hand-kyotei::after {
		right: 0;
		bottom: -10%;
		transform: rotate(7deg);
	}

}

/* ////////// tablet ////////// */
@media screen and (min-width:769px) and (max-width:960px) {
	#detail .itemBox {
		grid-gap: 2vw;
	}
	#detail .item {
		font-size: 2.0rem;
	}
	#detail .item .balloon::before {
		top: 12em;
	}
	#detail .item .balloon::after {
		top: 15em;
	}
	#detail .item h2 {
		font-size: 2.6rem;
	}
	#detail .item .imgBox {
		margin: -130px auto -17vw;
	}
	#detail .decoBox .hand {
		position: absolute;
			top: -3vw;
		width: 40vw;
	}
	#detail .decoBox .hand-kumiai {
	}
	#detail .decoBox .hand-kyotei {
		left: 51%;
		width: 45vw;
	}
}

@media screen and (min-width:1040px) {
	#detail .decoBox {
		width: 100vw;
	}
}
@media screen and (min-width:1280px) {
	#detail .item:nth-child(1) .balloon .small_decoBox::before {
		left: -40px;
	}
	#detail .item:nth-child(2) .balloon .small_decoBox::before {
		right: -30px;
	}
}

/*====================================================
//// id other_link
====================================================*/
#other_link .item {
	padding-top: 3em;
}
#other_link .item .imgBox {
	margin: auto;
	position: absolute;
		top: -3em;
		left: 0;
		right: 0;
	width: 60%;
	z-index: 5;
}
#other_link .item .imgBox .coverImg {
	padding-top: 64%;
}
#other_link .item .txtBox {
	background: url('../img/top/other_link-bg.png') no-repeat top center / contain;
}
#other_link .item h3 {
  border-bottom: dotted 4px;
	margin-bottom: .5em;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 769px) {
	#other_link .itemBox {
		grid-gap: 1.2em;
		margin: auto;
		width: 90%;
			max-width: 20em;
	}
	#other_link .item .imgBox {
		width: 200px;
	}
	#other_link .item .txtBox {
		/* display: flex;
			align-items: center;
			justify-content: center; */
		height: 20em;
		padding: 5em 1.5em 1em;
	}
	#other_link .item h3 {
		font-size: 1.3em;
		margin: 0 auto .5em;
		width: 10em;
		height: 4em;
	}
}

@media screen and (max-width:500px) {
}

/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
	#other_link {
		margin: -40px 0 0;
		position: relative;
		/* z-index: 100; */
	}
	#other_link .innerBox {
		padding-bottom: 140px;
	}
	#other_link .itemBox {
		grid-gap: 1.2em;
	}
	#other_link .item .imgBox figure {
		transition: .2s ease-in-out;
	}
	#other_link .item a:hover .imgBox figure {
		transform: translateY(-1em);
	}
	#other_link .item .txtBox {
		height: 300px;
		padding: 4.2em 1.5em 1em;
	}
	#other_link .item .item_head {
	}
	#other_link .item h3 {
		height: 4em;
		font-size: 2.0rem;
	}
}

/* ////////// tablet ////////// */
@media screen and (min-width:769px) and (max-width:960px) {
	#other_link .innerBox {
		padding-bottom: 60px;
	}
	#other_link .itemBox {
		grid-gap: 0;
		margin: 2em auto 0;
		width: 600px;
	}
	#other_link .item {
		margin-top: -4em;
	}
	#other_link .item:nth-child(odd) {
		padding-right: 45%;
	}
	#other_link .item:nth-child(even) {
		padding-left: 45%;
	}
	#other_link .item .txtBox {
		padding: 5em 2.5em 2em;
	}
}

@media screen and (min-width:1040px) {
	#other_link .item .txtBox {
		padding: 4.5em 2.3em 2em;
	}
}

/*====================================================
//// id contentsBox
====================================================*/
.contentsBox .wave_bg ,
.contentsBox .wave_bg_up {
	overflow: hidden;
	padding-top: 14.166%;
	position: absolute;
		top: 0;
		left: 0;
	width: 100%;
	height: 0;
}
.contentsBox .wave_bg div {
	-webkit-mask:   url('../img/top/bg_wave.svg') repeat-x top center / contain;
	-webkit-mask-image:     url('../img/top/bg_wave.svg');
	        mask-image:     url('../img/top/bg_wave.svg');
	-webkit-mask-repeat:    repeat-x;
	        mask-repeat:    repeat-x;
	-webkit-mask-position:  top center;
	        mask-position:  top center;
	-webkit-mask-size:      contain;
	        mask-size:      contain;
	position: absolute;
		top: 0;
		left: -1%;
	width: 102%;
	height: 100%;
}
.contentsBox .wave_bg_up div {
	-webkit-mask:   url('../img/top/bg_wave_up.svg') repeat-x top center / contain;
	-webkit-mask-image:     url('../img/top/bg_wave_up.svg');
	        mask-image:     url('../img/top/bg_wave_up.svg');
	-webkit-mask-repeat:    repeat-x;
	        mask-repeat:    repeat-x;
	-webkit-mask-position:  top center;
	        mask-position:  top center;
	-webkit-mask-size:      contain;
	        mask-size:      contain;
	position: absolute;
		top: 0;
		left: -1%;
	width: 102%;
	height: 100%;
}
.contentsBox ol.faqBox li {
	padding-left: 2.3em;
}
.contentsBox ol.faqBox li::before {
	content: 'Q.'counter(number);
	letter-spacing: .1em;
	top: .3em;
	width: 2em;
}
.contentsBox ol.faqBox li a {
	display: inline;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 769px) {
	.contentsBox .innerBox {
		padding: 40px 0 80px;
	}
	.contentsBox h2 {
		font-size: 1.8em;
	}
	.contentsBox ol.faqBox {
		font-size: 1.1em;
	}
}

@media screen and (max-width:500px) {
}

/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
	.contentsBox .innerBox {
		padding: 80px 0 160px;
	}
	.contentsBox h2 {
		font-size: 5.7rem;
		line-height: 1.2;
	}
	.contentsBox ol.faqBox {
		font-size: 2.6rem;
	}
}

/* ////////// tablet ////////// */
@media screen and (min-width:769px) and (max-width:960px) {
}

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

@media screen and (min-width:1200px) {
	.contentsBox .wave_bg ,
	.contentsBox .wave_bg_up {
		padding-top: 0;
		position: absolute;
		width: 100%;
		height: 170px;
	}
	.contentsBox .wave_bg::after ,
	.contentsBox .wave_bg_up::after {
		content: '';
		display: block;
		margin: auto;
		position: absolute;
			left: 0;
			bottom: 0;
		width: 100%;
		height: 21px;
	}
	.contentsBox .wave_bg_up::after {
		top: 0;
		bottom: auto;
	}
}

/*====================================================
//// id kumiai
====================================================*/
#kumiai .wave_bg {
	background: #fff;
}
#kumiai .wave_bg::after,
#kumiai .wave_bg div {
	background-color: var(--purple);
}
#kumiai .under_marker {
	background: radial-gradient(circle at calc(100% - .1em) calc(100% - .1em), #ee2 .1em, transparent .1em) ,
              radial-gradient(circle at .1em calc(100% - .1em), #ee2 .1em, transparent .1em) ,
              linear-gradient(to bottom, var(--purple) calc(100% - .2em), transparent calc(100% - .2em)) ,
              linear-gradient(to right, transparent .1em, #ee2 .1em, #ee2 calc(100% - .1em), transparent calc(100% - .1em));
}
/* ////////// mobile ////////// */
@media screen and (max-width: 769px) {
	#kumiai .decoBox {
		bottom: 0;
		right: 7%;
		width: 24.5%;
	}
	#kumiai h2 {
		margin-bottom: .8em;
	}
}

@media screen and (max-width:500px) {
}

/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
	#kumiai .decoBox {
		bottom: -30px;
		right: 7%;
		width: 24.5%;
	}
	#kumiai h2 {
		margin-bottom: 1.5em;
	}
}

/* ////////// tablet ////////// */
@media screen and (min-width:769px) and (max-width:960px) {
}

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

/*====================================================
//// id kyotei
====================================================*/
#kyotei .wave_bg {
	background: var(--purple);
}
#kyotei .wave_bg::after,
#kyotei .wave_bg div {
	background-color: var(--green);
}
#kyotei .under_marker {
	background: radial-gradient(circle at calc(100% - .1em) calc(100% - .1em), #ee2 .1em, transparent .1em) ,
              radial-gradient(circle at .1em calc(100% - .1em), #ee2 .1em, transparent .1em) ,
              linear-gradient(to bottom, var(--green) calc(100% - .2em), transparent calc(100% - .2em)) ,
              linear-gradient(to right, transparent .1em, #ee2 .1em, #ee2 calc(100% - .1em), transparent calc(100% - .1em));
}

/* ////////// mobile ////////// */
@media screen and (max-width: 769px) {
	#kyotei .decoBox {
		bottom: 0;
		left: 0;
		width: 22%;
	}
	#kyotei h2 {
		margin-bottom: .8em;
	}
}

@media screen and (max-width:500px) {
}

/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
	#kyotei .decoBox {
		bottom: -60px;
		left: 0;
		width: 23%;
	}
	#kyotei h2 {
		font-size: 4.2rem;
		margin-bottom: 2.5em;
	}
}

/* ////////// tablet ////////// */
@media screen and (min-width:769px) and (max-width:960px) {
}

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

/*====================================================
//// id related_link
====================================================*/
#related_link .wave_bg_up {
	/* background: var(--purple); */
}
#related_link .wave_bg_up::after,
#related_link .wave_bg_up div {
	background-color: var(--green);
}
#related_link ul li {
	margin: .7em 0;
}
#related_link ul a {
	padding-left: 1.3em;
	position: relative;
}
#related_link ul a::before {
	background: url('../img/cmn/link_icon.png') no-repeat center / contain;
	content: '';
	display: block;
	margin: auto;
	position: absolute;
		top: .25em;
		left: 0;
	width: 1em;
	height: 1em;
}
#related_link ul a.link-1 {
	color: #01579c;
}
#related_link ul a.link-1::before {
	background: url('../img/cmn/link_icon-1.png') no-repeat center / contain;
}
#related_link ul a.link-2 {
	color: #F84C00;
}
#related_link ul a.link-2::before {
	background: url('../img/cmn/link_icon-2.png') no-repeat center / contain;
}

/* ////////// mobile ////////// */
@media screen and (max-width: 769px) {
	#related_link .itemBox {
		margin: auto;
		width: 85%;
	}
	#related_link ul {
		font-size: 1.3em;
	}
}

@media screen and (max-width:500px) {
}

/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
	#related_link .innerBox {
		padding-bottom: 80px;
	}
	#related_link ul {
		font-size: 2.6rem;
	}
}

/* ////////// tablet ////////// */
@media screen and (min-width:769px) and (max-width:960px) {
}

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

/*====================================================
//// id xxx
====================================================*/

/* ////////// mobile ////////// */
@media screen and (max-width: 769px) {
}

@media screen and (max-width:500px) {
}

/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
}

/* ////////// tablet ////////// */
@media screen and (min-width:769px) and (max-width:960px) {
}

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