
/*====================================================
//// id mv
====================================================*/
#mv {
	background: url('../img/bk1.jpg') no-repeat center / cover;
	overflow: hidden;
}
#mv.mv2 {
	background: url('../img/bk2.jpg') no-repeat center / cover;
	overflow: hidden;
}

#mv .mv_contents::before {
	background: url('../img/shape_white.svg') no-repeat center / contain;
	content: '';
	display: block;
	margin: auto;
	opacity: .8;
	pointer-events: none;
	position: absolute;
		top: -100px;
		left: -50vw;
		right: -50vw;
		bottom: -100px;
	height: calc(100% + 200px);
	z-index: -1;
}
#mv .head_sub {
	border-bottom: solid .15em;
	padding-bottom: .3em;
}
#mv h1 {
	margin: .5em 0;
}
#mv h1 img {
	height: 1.7em;
	margin-right: .2em;
	vertical-align: -.3em;
}

/* ////////// mobile ////////// */
@media screen and (max-width: 769px) {
	#mv .mv_contents {
		min-height: 100vh;
		padding: 150px 0 150px;
	}
	#mv .mv_contents::before {
		left: -30vw;
		right: -30vw;
	}
	#mv .head_sub {
		font-size: 2.4rem;
	}
	#mv h1 {
		font-size: 8vw;
	}
	#mv h1 img {
		height: 2em;
		margin-right: .2em;
		vertical-align: -.3em;
	}
	#mv .pointBox {
		grid-gap: .3em;
		margin: auto;
		max-width: 600px;
	}
	#mv .pointBox .item {
		flex: 1;
	}
	#mv .attentionBox {
		font-size: .7em;
	}
}

@media screen and (max-width:500px) {
	#mv .head_sub {
		font-size: 4vw;
	}
	#mv h1 {
		font-size: 9vw;
	}
}

/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
	#mv .mv_contents {
		min-height: calc(100vh - 70px);
		padding: 200px 0 200px;
	}
	#mv .mv_contents::before {
		width: 1080px;
	}
	#mv .head_sub {
		font-size: 3.0rem;
		padding-top: 1em;
	}
	#mv h1 {
		font-size: 7.0rem;
	}
	#mv .pointBox {
		grid-gap: 13px;
	}
	#mv .pointBox .item {
		width: 200px;
	}
}

/* ////////// tablet ////////// */
@media screen and (min-width:769px) and (max-width:960px) {
	#mv .head_sub {
		font-size: 3vw;
	}
	#mv h1 {
		font-size: 7vw;
	}
	#mv .mv_contents::before {
		width: calc(100% + 200px);
			max-width: 1000px;
	}
}

@media screen and (min-width:769px) and (max-width: 1080px) {
	#mv .mv_contents {
		min-height: 100vh;
		padding: 150px 0 200px;
	}
}

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

/*====================================================
//// id truble
====================================================*/
#truble {
	overflow: hidden;
}
#truble .balloon {
	background: var(--navy);
	border-radius: 1.5em;
	color: #fff;
	padding: 1em .7em;
	position: relative;
}
#truble .balloon::after {
	border: solid transparent;
	border-top-color: var(--navy);
	border-width: 2em .6em 0;
	content: '';
	display: block;
	margin: auto;
	transform: rotate(-40deg);
	position: absolute;
		bottom: -1.4em;
		left: 20%;
	width: 0;
	height: 0;
	z-index: -1;
}
#truble .item .imgBox {
	margin: 1em auto 0;
	transform: scale(.7);
	transition: .8s ease-in-out;
	width: 60%;
	max-width: 200px;
}
#truble .item.show .imgBox {
	transform: none;
}
#truble .item .coverImg {
	border-radius: 100%;
	padding-top: 100%;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 769px) {
	#truble h2 {
		font-size: 2.4em;
	}
	#truble .itemBox {
		margin: auto;
		max-width: 500px;
		grid-gap: 2em;
	}
	#truble .item .imgBox {
		max-width: 140px;
	}
}

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

/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
	#truble h2 {
		font-size: 4.6rem;
	}
	#truble .itemBox {
		grid-gap: 2vw;
	}
	#truble .item:nth-child(2) ,
	#truble .item:nth-child(2) .imgBox {
		transition-delay: .4s;
	}
	#truble .item:nth-child(3),
	#truble .item:nth-child(3) .imgBox {
		transition-delay: .8s;
	}
	#truble .item .txtBox {
		font-size: 1.8rem;
	}
	#truble .item .balloon {
		min-height: 9em;
	}
}

/* ////////// tablet ////////// */
@media screen and (min-width:769px) and (max-width:960px) {
	#truble h2 {
		font-size: 3.6rem;
	}
	#truble .itemBox {
		grid-gap: 1.5vw;
	}
	#truble .item .txtBox {
		font-size: 1.8vw;
	}
}

@media screen and (min-width:1280px) {
	#truble .itemBox {
		grid-gap: 60px;
	}
	#truble .item .txtBox {
		font-size: 2.0rem;
	}
}

/*====================================================
//// id feature
====================================================*/
#feature {
	overflow: hidden;
}
#feature .section-inner {
	position: relative;
}
#feature .section-inner::before {
	border: solid var(--navy);
	border-top-color: #fff;
	border-width: calc(100px + 2vw) 50vw 0;
	content: '';
	display: block;
	margin: auto;
	position: absolute;
		top: 0;
		left: 0;
		right: 0;
	width: 0;
	height: 0;
}
#feature .head_sub big {
	font-size: 1.8em;
	line-height: 1em;
}
#feature h2 {
	margin: .8em 0;
	line-height: 2;
}
#feature h2 .circleMark {
	margin: 0 .2em;
	line-height: 1.4;
	padding: .1em .6em;
}
#feature h2 .circleMark big {
	font-size: 1.5em;
	line-height: 1em;
	vertical-align: -.1em;
}
#feature h2 img {
	filter: brightness(0) invert(10);
	height: 2.2em;
	line-height: .8;
	margin: 0 .4em 0 0;
	vertical-align: -.4em;
}
#feature .item .imgBox .coverImg {
	padding-top: 36%;
}

/* ////////// mobile ////////// */
@media screen and (max-width: 769px) {
	#feature .head_sub {
		font-size: 2.0rem;
	}
	#feature h2 {
		font-size: 4.2rem;
	}
	#feature h2 .circleMark {
		font-size: .7em;
	}
	#feature .itemBox {
		grid-gap: 2em;
	}
	#feature .item .txtBox {
		font-size: 1.9rem;
		padding: 1em;
	}
}

@media screen and (max-width:500px) {
	#feature .head_sub {
		font-size: 1.1em;
	}
	#feature h2 {
		font-size: 8vw;
	}
	#feature .item .txtBox {
		font-size: 1.1em;
	}
}

/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
	#feature .head_sub {
		font-size: 2.4rem;
	}
	#feature h2 {
		font-size: 4.2vw;
	}
	#feature .itemBox {
		grid-gap: 40px;
	}
	#feature .item:nth-child(even) {
		flex-direction: row-reverse;
	}
	#feature .item .imgBox {
		width: 43%;
	}
	#feature .item .txtBox {
		font-size: 2.0rem;
		min-height: 230px;
		padding: 1em;
	}
}

/* ////////// tablet ////////// */
@media screen and (min-width:769px) and (max-width:960px) {
	#feature .item .imgBox {
		width: 38%;
	}
	#feature .item .txtBox {
		font-size: 2.2vw;
		min-height: 9em;
	}
}

@media screen and (min-width:1180px) {
	#feature h2 {
		font-size: 5rem;
	}
	#feature .txtBox {
		font-size: 2.4rem;
	}
}

/*====================================================
//// id case_study
====================================================*/
#case_study .item {
	border-radius: 2em;
	box-shadow: 0 5px 1.5em rgba(11, 31, 56, 0.4);
}
/* ////////// mobile ////////// */
@media screen and (max-width: 769px) {
	#case_study .itemBox {
		grid-gap: 2em;
	}
	#case_study .item {
		grid-gap: 1.5em;
		padding: 1.5em 1em
	}
	#case_study .item h3 {
		font-size: 1.2em;
	}
	#case_study .item .imgBox {
		margin: auto;
		width: 100%;
			max-width: 500px;
	}
	#case_study .item .coverImg {
		padding-top: 45%;
	}
}

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

/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
	#case_study .itemBox {
		grid-gap: 30px;
	}
	#case_study .item {
		grid-gap: 1.5em;
		grid-template-columns: 30% 1fr;
		padding: 40px 3vw
	}
	#case_study .item .item_head {
		grid-column: 1 / 3;
	}
	#case_study .item h3 {
		margin: -.3em 0 .3em
	}
}

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

@media screen and (min-width:1280px) {
	#case_study .item {
		padding: 50px;
	}
}

/*====================================================
//// id flow
====================================================*/
#flow .itemBox {
}
#flow .item {
	position: relative;
}
#flow .item:nth-child(1) {
	z-index: 10;
}
#flow .item:nth-child(2) {
	z-index: 9;
}
#flow .item .item-inner {
	border: solid 2px var(--mainColor);
	height: 100%;
	position: relative;
}
#flow .item:nth-child(1) .item-inner {
	background: #fff;
	z-index: 10;
}
#flow .item:nth-child(2) .item-inner {
	background: #ffebe0;
	z-index: 9;
}
#flow .item:last-child .item-inner {
	background: var(--mainColor);
	color: #fff;
}
#flow .item .noBox small {
	display: inline-block;
	font-size: .7em;
	margin-right: .4em;
	vertical-align: .2em;
}
#flow .item .imgBox {
	width: 80px;
}
#flow .item .coverImg {
	padding-top: 100%;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 769px) {
	#flow .itemBox {
		margin: auto;
		max-width: 600px;
	}
	#flow .item {
		filter: drop-shadow(0 2px 0 var(--mainColor));
		font-size: 1.1em;
	}
	#flow .item:not(.show) {
		transform: translateY(-2em);
	}
	#flow .item-inner {
		grid-gap: .3em 1em;
		grid-template-columns: 80px 1fr;
		padding: 2.5em 1.5em 2em;
	}
	#flow .item:not(.item:last-child) .item-inner {
		border-bottom: 0;
		-webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 1.5em), 50% 100%, 0 calc(100% - 1.5em));
		        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 1.5em), 50% 100%, 0 calc(100% - 1.5em));
	}
	#flow .item:not(.item:first-child) .item-inner {
		margin-top: -1.5em;
	}
	#flow .item:first-child .item-inner {
		padding-top: 1em;
	}
	#flow .item:last-child .item-inner {
		padding-bottom: 1em;
	}
	#flow .item .noBox {
		font-size: 2.4rem;
		grid-column: 1 / 3;
		text-align: center;
	}

}

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

/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
	#flow .main_txtBox {
		font-size: 1.8rem;
	}
	#flow .item {
		filter: drop-shadow(2px 0 0 var(--mainColor));
		text-align: center;
	}
	#flow .item:not(.show) {
		transform: translateX(-2em);
	}
	#flow .item:nth-child(2) {
		transition-delay: .4s;
	}
	#flow .item:nth-child(3) {
		transition-delay: .8s;
	}
	#flow .item-inner {
		grid-template-rows: auto auto 1fr;
		padding: 1em 1em 1em .5em;
	}
	#flow .item:not(.item:last-child) .item-inner {
		border-right: 0;
    -webkit-clip-path: polygon(0 0, calc(100% - 1.5em) 0, 100%  50%, calc(100% - 1.5em) 100%, 0 100%);
            clip-path: polygon(0 0, calc(100% - 1.5em) 0, 100%  50%, calc(100% - 1.5em) 100%, 0 100%);
		width: calc(100% + 1.5em);
	}
	#flow .item:last-child .item-inner {
		padding: 1em 1em 1em 1.5em;
	}
	#flow .item .noBox {
		font-size: 2.4rem;
	}
	#flow .item .imgBox {
		margin: .5em auto;
	}
}

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

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

/*====================================================
//// id partition_img
====================================================*/

/* ////////// mobile ////////// */
@media screen and (max-width: 769px) {
	.partition_img .coverImg {
		padding-top: 50%;
	}
}

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

/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
	.partition_img .coverImg {
		padding-top: 280px;
	}
}

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

@media screen and (min-width:1280px) {
	.partition_img .coverImg {
		padding-top: 380px;
	}
}

/*====================================================
//// id faq
====================================================*/
#faq .item {
	border-top: solid 1px var(--gray);
	padding: .5em 1em;
}
#faq .item:last-child {
	border-bottom: solid 1px var(--gray);
}
#faq .item dt,
#faq .item .accordion-inner {
	position: relative;
}
#faq .item dt {
	padding: .5em 2em .5em 3.5em;
}
#faq .item dt::before,
#faq .item dt::after {
	background: var(--black);
	content: '';
	display: block;
	margin: auto;
	position: absolute;
		top: 0;
		right: 0em;
		bottom: 0;
	transition: .2s ease-in-out;
	width: 1em;
	height: 2px;
}
#faq .item dt::before {
	transform: rotate(90deg);
}
#faq .item.open dt::before {
	opacity: 0;
	transform: rotate(180deg)
}
#faq .item.open dt::after {
	transform: rotate(180deg);
}
#faq .item .accordion-inner {
	padding: .5em 0 .5em 6.5em;
}
#faq .item .alphabet {
	display: inline-block;
	font-size: 1.8em;
	line-height: 1em;
	margin: auto;
	position: absolute;
		top: .2em;
		left: .3em;
}
#faq .item dd .alphabet {
	left: 2em;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 769px) {
	#faq .item {
		padding: .5em .3em;
	}
	#faq .item dt {
		padding-left: 2em;
		padding-right: 1.5em;
	}
	#faq .item dt::before,
	#faq .item dt::after {
		width: .8em;
	}
	#faq .item .accordion-inner {
		padding-top: 1em;
		padding-left: 3em;
		position: relative;
	}
	#faq .item .accordion-inner::before {
		border-top: dashed 1px var(--gray);
		content: '';
		display: block;
		margin: auto;
		position: absolute;
			top: .3em;
			left: 0;
		width: 100%;
		height: 0;
	}
	#faq .item .alphabet {
		font-size: 1.2em;
		top: .5em;
		left: .2em;
	}
	#faq .item dd .alphabet {
		top: 1.0em;
		left: 1.2em;
	}
}

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

/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
	#faq .item {
		font-size: 1.8rem;
	}
}

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

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

/*====================================================
//// 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:1280px) {
}
