@charset "utf-8";
/* CSS Document */
.pc-only {
	display: none !important;
}
html {
	font-size: 62.5%;
}
body {
	font-size: 1.6rem;
	font-family: YakuHanJP, 'Noto Sans JP', "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "MS Pゴシック", sans-serif;
	color: #333;
	line-height: 1.8;
	font-weight: 400;
}
p {
	line-height: 1.8;
	font-feature-settings: "palt";
}
h1, h2, h3, h4, h5 {
	font-weight: 500;
	line-height: 1.5;
	font-feature-settings: "palt";
} 
.inner {
	width: 100%;
	padding: 0 4%;
}
img {
	max-width: 100%;
}
/*--------------swiper-----------------*/
.swiper-pagination-bullets {
    position: static;
    margin-top: 16px;
}
.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after, .swiper-button-prev:after, .swiper-rtl .swiper-button-next:after {
	font-size: 2.5rem;
	color: #393939;
}
.swiper-pagination-bullet-active {
	background: #5e5e60;
}
.swiper-button-next, .swiper-rtl .swiper-button-prev {
	right: 0px !important;
}
.swiper-button-prev, .swiper-rtl .swiper-button-next {
	left: 0px !important;
}
/*-----------------------------------*/
.fade {
	opacity: 0;
	transform: translate(0, 3rem);
	transition: .8s cubic-bezier(.64,.24,.42,.88);
}
.fade.active {
	opacity: 1;
	transform: translate(0, 0);
}
.zoom {
	opacity: 0;
	transform: scale(0);
	transition: .4s cubic-bezier(.09,.49,.43,.96);
}
.zoom.active {
	opacity: 1;
	transform: scale(1);
}
/*----------------------------------------------------------------------------------------------------------------*/
.mainvisual img {
	width: 100%;
}
.mainvisual h1 {
	position: absolute;
	top: 1%;
	left: 2%;
	width: 50%;
}
/*----------------------------------------------------------------------------------------------------------------*/
.mv-cp {
	background-color: #153281;
}
.mv-cp .inner {
	position: relative;
	padding: 19% 4% 5rem;
}
.cp-icn1 {
	position: absolute;
	top: -1%;
	left: 4%;
	width: 32%;
}
.cp-icn2 {
	position: absolute;
	top: -3%;
	right: 4%;
	width: 26%;
}
.mv-cp h2 {
	padding: 0 0 2rem;
}
.mv-cp ul li {
	padding: 0 0 1rem;
}
.mv-cp .cp-amazon {
	padding: 1rem 0 4rem;
}
/*----------------------------------------------------------------------------------------------------------------*/
.present {
	background-color: #fff7d4;
	padding: 3rem 0 5rem;
}
.present-title-wrap {
	position: relative;
}
.firework1 {
	position: absolute;
	top: 1%;
	left: 8%;
	width: 22%;
}
.firework2 {
	position: absolute;
	top: 12%;
	right: 1%;
	width: 21%;
	transition-delay: .5s;
}
.present h2 {
	padding: 0 0 4rem;
}
.present h3 {
	padding: 0 0 2rem;
}
.present01 {
	padding: 0 0 6rem;
}
.present02 ul li:not(:last-child) {
	padding: 0 0 1.5rem;
}
/*----------------------------------------------------------------------------------------------------------------*/
.cta {
	background-color: #153281;
	padding: 5rem 0;
}
.cta h2 {
	padding: 0 0 4rem;
}
/*----------------------------------------------------------------------------------------------------------------*/
.support {
	background-color: #fff7d4;
	padding: 3rem 0 5rem;
}
.support h2 {
	padding: 0 0 2rem;
}
.support-itm {
	padding: 0 0 4rem;
}
/*----------------------------------------------------------------------------------------------------------------*/
.about {
	font-family: 'M PLUS 1p', sans-serif;
}
.about {
	padding: 5rem 0;
	background-color: #e0eff8;
}
.about h2 {
	font-size: 1.8rem;
	color: #153281;
	text-align: center;
	padding: 0 0 2rem;
	font-weight: 600;
}
.about h2 span {
	font-size: 2.8rem;
}
.about h3 {
	font-size: 1.8rem;
	text-align: center;
	padding: 2rem 0 0;
}
.about .example {
	padding: 6rem 0 0;
}
.example h4 {
	padding: 0 0 2rem;
}
.example h5 {
	text-align: center;
	padding: 0 0 3rem;
	font-size: 1.6rem;
}
/*----------------------------------------------------------------------------------------------------------------*/

/*----------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------タブレット／ブレイクポイント-------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------*/
@media screen and (min-width:768px) {
	.sp-only {
		display: none !important;
	}
	.pc-only {
		display: block !important;
	}
	a[href^="tel:"] {
		pointer-events: none;
	}
	.inner {
		padding: 0 3rem;
	}
	/*----------------------------------------------------------------------------------------------------------------*/
	.mainvisual h1 {
		width: 19.46%;
	}
	.mv-cp .inner {
		position: relative;
		padding: 3rem 4rem 5rem;
	}
	.cp-icn1 {
		top: -1rem;
		left: 1rem;
		width: 13.92%;
	}
	.cp-icn2 {
		top: -2rem;
		right: 1rem;
		width: 11.33%;
	}
	.mv-cp ul {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.mv-cp ul li {
		width: calc((100% - 3rem) / 2);
	}
	.cta-btn {
		width: 40rem;
		display: block;
		margin: 0 auto;
	}
 	/*----------------------------------------------------------------------------------------------------------------*/
	.firework1 {
		top: 11%;
		left: 4%;
		width: 11%;
	}
	.firework2 {
		top: 12%;
		right: 4.5%;
		width: 10%;
	}
	.present02 ul {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
	}
	.present02 ul li {
		width: calc((100% - 2rem) / 2);
	}
	.present02 ul li:nth-child(n + 5) {
		width: calc((100% - 2rem) / 3);
	}
	.present02 ul li:not(:last-child) {
		padding: 0;
	}
	.present02 ul li:nth-child(-n + 4) {
		padding: 0 0 2rem;
	}
	/*----------------------------------------------------------------------------------------------------------------*/
	.support h2 {
		width: 40rem;
		margin: 0 auto;
		display: block;
	}
	.support ul {
		display: flex;
		justify-content: center;
	}
	.support li:first-child {
		padding: 0;
	}
	.support li {
		width: 30rem;
		margin: 0 2rem;
	}
	/*----------------------------------------------------------------------------------------------------------------*/
	.scenario {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-direction: row-reverse;
	}
	.scenario-img {
		width: 50%;
		margin: 0 0 0 1rem;
	}
	.scenario-txt {
		flex: 1;
	}
	.about h3 {
		padding: 0;
	}
	.example h4 {
		width: 57.5rem;
		display: block;
		margin: 0 auto;
	}
	.swiper {
		width: 93%;
	}
	
}
/*----------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------*/
/*-------------------------------------------PC／ブレイクポイント-------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------*/
	@media screen and (min-width:1100px) {
		.inner {
			width: 1100px;
			margin: 0 auto;
			padding: 0;
		}
		/*----------------------------------------------------------------------------------------------------------------*/
		.mv-cp .inner {
			padding: 4rem 0 8rem;
		}
		.mv-cp h2 {
			padding: 0 0 4rem;
			width: 80rem;
			margin: 0 auto;
		}
		.cp-icn1 {
			left: 0;
		}
		.cp-icn2 {
			right: 0;
		}
		.mv-cp .cp-amazon {
			padding: 4rem 0 6rem;
		}
		.cta-btn {
			width: 55rem;
		}
		.mv-cp ul li a {
			cursor: pointer;
			transition: .2s;
		}
		.mv-cp ul li a:hover {
			opacity: 0.7;
		}
		/*----------------------------------------------------------------------------------------------------------------*/
		.present {
			padding: 6rem 0 8rem;
		}
		.firework1 {
			top: 11%;
			left: 11%;
		}
		.firework2 {
			top: 5%;
			right: 11%;
		}
		.present h2 img {
			display: block;
			margin: 0 auto;
		}
		.present h3 img {
			display: block;
			margin: 0 auto;
		}
		.present01 {
			padding: 0 0 10rem;
		}
		.present02 ul li {
			width: calc((100% - 6rem) / 2);
		}
		.present02 ul li:nth-child(-n + 4) {
			padding: 0 0 4rem;
		}
		.present02 ul li:nth-child(n + 5) {
			width: calc((100% - 4rem) / 3);
		}
		/*----------------------------------------------------------------------------------------------------------------*/
		.cta {
			padding: 8rem 0;
		}
		.cta h2 {
			padding: 0 0 6rem;
		}
		/*----------------------------------------------------------------------------------------------------------------*/
		.support {
			padding: 8rem 0;
		}
		.support h2 {
			width: 50rem;
			padding: 0 0 4rem;
		}
		.support-itm {
			display: block;
			margin: 0 auto;
			padding: 0 0 6rem;
		}
		/*----------------------------------------------------------------------------------------------------------------*/
		.cta-btn {
			transition: .2s;
			display: block;
		}
		.cta-btn:hover {
			transform: scale(0.95, 0.95);
		}
		/*----------------------------------------------------------------------------------------------------------------*/
		.about {
			padding: 8rem 0;
		}
		.about h2 {
			font-size: 2.8rem;
		}
		.about h2 span {
			font-size: 4.3rem;
		}
		.about h3 {
			font-size: 2.4rem;
			line-height: 1.8;
		}
		.scenario-img {
			margin: 0 0 0 2rem;
		}
		.about .example {
			padding: 8rem 0 0;
		}
		.example h5 {
			font-size: 2.4rem;
			line-height: 1.8;
			padding: 0 0 4rem;
		}
		.swiper {
			width: 110rem;
			margin: 0 auto;
		}
	}
	@media screen and (max-width:360px) {
		.inner {
			padding: 0 3%;
		}
		.about h2 {
			font-size: 1.6rem;
		}
		.about h2 span {
			font-size: 2.4rem;
		}
		
	}