@charset "utf-8";

.btnshine {
	position: relative;
	display: inline-block;
	color: #fff;
	text-decoration: none;
	outline: none;
	overflow: hidden;
}

.btnshine::before {
	content: '';
	position: absolute;
	top: 0;
	left: -75%;
	width: 50%;
	height: 100%;
	background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%);
	transform: skewX(-25deg);
}

.btnshine::before {
	animation: shine 1.5s infinite;
}

@keyframes shine {
	100% {
		left: 125%;
	}
}

.fuwafuwa {
	animation: fuwafuwa 3s ease-in-out infinite alternate;
	display: inline-block;
	transition: 1.5s ease-in-out;
}

@keyframes fuwafuwa {
	0% {
		transform: translate(0, 0) rotate(-7deg);
	}

	50% {
		transform: translate(0, -7px) rotate(0deg);
	}

	100% {
		transform: translate(0, 0) rotate(7deg);
	}
}

header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 2.3rem 3rem 1.8rem 2.4rem;
	background-color: #fff;
	box-sizing: border-box;
	position: relative;
	z-index: 11;
	-webkit-box-shadow: 0px 0.5rem 0.5rem 0px rgba(187, 187, 187, 1);
	-moz-box-shadow: 0px 0.5rem 0.5rem 0px rgba(187, 187, 187, 1);
	box-shadow: 0px 0.5rem 0.5rem 0px rgba(187, 187, 187, 1);
}

header .logo {
	height: 4.3rem;
	display: block;
}

header .headerBtn {
	width: 32.5rem;
	display: block;
}

@keyframes anime {
	0% {
		opacity: 0;
	}

	16% {
		opacity: 1;
	}

	34% {
		opacity: 1;
	}

	50% {
		opacity: 0;
		transform: scale(1.15);
		z-index: 9;
	}

	100% {
		opacity: 0
	}
}

.fvBg {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	z-index: 10;
}

#conversion .gBlock {
	padding: 2.5rem 0;
}

.gBlock {
	position: relative;
	z-index: 11;
	padding-bottom: 5.5rem;
}

.gBlockTtl {
	font-size: 3.3rem;
	font-weight: 500;
	line-height: 1.75;
	text-align: center;
	color: #0066A4;
	background: url(../img/gBlockTtlBg.webp) no-repeat center;
	background-size: 46.5rem auto;
	background-position-y: 3.2rem;
	background-position-x: 14rem;
}

.gBlock>img {
	display: block;
	margin-bottom: -0.7rem;
}

.gBlock>a {
	display: block;
	width: 69.8rem;
	margin: 0 auto;
	position: relative;
}

.gBlock>a .gBlockBtnTxt {
	width: 55rem;
	font-size: 4.6rem;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	color: #fff;
	position: absolute;
	top: 48%;
	left: 50%;
	transform: translate(-50%, -50%);
}

/* fv */
.fv {
	position: relative;
}

.fvImg {
	width: 75rem;
	display: block;
	margin: 0 auto;
}

.fvTxt01 {
	width: 51.9rem;
	position: absolute;
	top: 0.5rem;
	left: 1rem;
}

.fvTxt02 {
	width: 55.3rem;
	position: absolute;
	top: 7.5rem;
	left: -1rem;
}

.fvTxt03 {
	width: 69.1rem;
	position: absolute;
	bottom: 8.5rem;
	left: 50%;
	transform: translateX(-50%);
}

.fvNote {
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1.2;
	text-align: right;
	color: #fff;
	position: absolute;
	right: 3rem;
	bottom: 2.5rem;
}

/* end fv */

/* think */
.think {
	position: relative;
	padding-bottom: 3rem;
}

.thinkBg {
	width: 75rem;
	display: block;
	margin: 0 auto;
}

.thinkTtl {
	width: 100%;
	font-size: 7.1rem;
	font-weight: 500;
	text-align: center;
	color: #fff;
	display: block;
	position: absolute;
	top: 4rem;
	left: 50%;
	transform: translateX(-50%);
}

.thinkTtl b {
	font-size: 9.1rem;
	color: #EFE121;
	position: relative;
}

.thinkTtl b::after {
	content: "";
	position: absolute;
	width: 1rem;
	height: 1rem;
	background-color: #EFE121;
	border-radius: 50%;
	top: .5rem;
	left: 4rem;
}

.thinkTtl02 {
	font-size: 4.9rem;
	font-weight: 500;
	text-align: center;
	line-height: 1.75;
	color: #fff;
	position: absolute;
	top: 15rem;
	left: 50%;
	transform: translateX(-50%);
}

.thinkImg {
	width: 58rem;
	display: block;
	position: absolute;
	top: 25rem;
	left: 50%;
	transform: translateX(-50%);
}

.thinkTxt {
	font-size: 5.6rem;
	font-weight: 500;
	line-height: 1.75;
	text-align: center;
	background: url(../img/thinkTxtBg.webp) no-repeat center;
	background-size: 36.3rem auto;
}

/* end think */

/* try */
.try {
	position: relative;
	background: url(../img/tryBg.webp) no-repeat center;
	background-size: 100% 100%;
	z-index: 3;
}

.tryTtl {
	font-size: 4rem;
	font-weight: 500;
	line-height: 1.7;
	text-align: center;
	color: #0066A4;
	border-top: .1rem solid #0066A4;
	border-bottom: .1rem solid #0066A4;
	display: inline-block;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	margin-top: 3.5rem;
}

.tryTxt {
	font-size: 6.9rem;
	font-weight: 500;
	line-height: 1.7;
	text-align: center;
	color: #0066A4;
	position: relative;
}

.tryTxt::after {
	content: '';
	position: absolute;
	background: url(../img/tryTxtBg.webp) no-repeat center;
	background-size: 100% 100%;
	width: 4.7rem;
	height: 4.4rem;
	right: 6.5rem;
	top: -1.5rem;
}

.tryContent {
	position: relative;
	background: url(../img/tryContentBg.webp) no-repeat center;
	background-size: 100% 100%;
	height: 70.6rem;
	margin: 0 3rem;
}

.tryContent ul {
	width: 50rem;
	display: block;
	position: absolute;
	margin-right: 5rem;
	top: 10rem;
	left: 54%;
	transform: translateX(-50%);
}

.tryContent ul li {
	font-size: 3.7rem;
	font-weight: 500;
	line-height: 1.4;
	color: #4D4D4D;
	position: relative;
	padding: 3.5rem 0 2rem 0;
	border-bottom: .3rem dashed #A6A6A6;
}

.tryContent ul li::after {
	content: '';
	position: absolute;
	background: url(../img/tryCheck.webp) no-repeat center;
	background-size: 100% 100%;
	width: 3.1rem;
	height: 2.9rem;
	left: -5.5rem;
	top: 55%;
	transform: translateY(-50%);
}

.tryBanner {
	width: 58.7rem;
	position: relative;
	top: -3.5rem;
	left: 50%;
	transform: translateX(-50%);
}

/* end try */

/* smile */
.smile {
	position: relative;
	background: url(../img/smileBg.webp) no-repeat center;
	background-size: 100% 100%;
	padding-top: 22rem;
	padding-bottom: 10rem;
	margin-top: -15rem;
}

.smileLogo {
	width: 64.3rem;
	display: block;
	margin: 0 auto 4rem auto;
}

.smileTxt {
	font-size: 3.5rem;
	font-weight: 700;
	line-height: 1.75;
	text-align: center;
	color: #4D4D4D;
}

.smileContent {
	position: relative;
	margin: 4rem 4.5rem 0 4.5rem;
	padding: 8rem 0 5rem 0;
	background-color: #DFE6FF;
	border-radius: 3rem;
}

.smileContent::after {
	content: '';
	position: absolute;
	background: url(../img/smileSpeech.webp) no-repeat center;
	background-size: 100% 100%;
	width: 56.6rem;
	height: 4.2rem;
	top: -2rem;
	left: 50%;
	transform: translateX(-50%);
}

.smileContentTxt {
	font-size: 3rem;
	font-weight: 500;
	line-height: 1.95;
	color: #333333;
	padding: 0 2.5rem;
}

.smileContentImg {
	width: 62.93rem;
	display: block;
	margin: 4rem auto 0 auto;
}

/* end smile */

/* info */
.info {
	position: relative;
	background: url(../img/infoBg.webp) no-repeat center;
	background-size: 100% 100%;
	padding-top: 3.5rem;
	padding-bottom: 3.5rem;
}

.infoTtl {
	font-size: 6.5rem;
	font-weight: 700;
	line-height: 1.2;
	color: #0066A4;
	text-align: center;
	background: url(../img/infoTtlBg.webp) no-repeat;
	background-position: center;
	background-size: 67.3rem 20rem;
	padding: 3rem 2.5rem;
}

.infoSlider {
	margin: 0 4.5rem;
	position: relative;
}

.sliderItem {
	position: relative;
}

.sliderItemImg {
	width: 66rem;
	display: block;
	margin: 0 auto;
	margin-top: 1rem;
}

.sliderItemTtl {
	position: absolute;
	top: 4.5rem;
	left: 3rem;
}

.sliderItemTtl p {
	font-weight: 700;
	line-height: 1.35;
	color: #fff;
}

.sliderItemTtlTxt {
	width: 34.2rem;
	display: block;
	margin-top: 1.5rem;
}

.sliderItemTtlTxt02 {
	width: 37.1rem;
	display: block;
	margin-top: 1.5rem;
}

.sliderItemTxt {
	position: absolute;
	top: 24rem;
	left: 3rem;
}

.sliderItemTxt p {
	font-weight: 500;
	line-height: 1.25;
	color: #0066A4;
}

.sliderItemContent {
	position: absolute;
	top: 47rem;
	padding: 0 3rem;
}

.sliderItemContent p {
	font-size: 2.8rem;
	font-weight: 500;
	line-height: 1.55;
}

.infoSliderPrev {
	width: 3.6rem;
	height: 5.5rem;
	position: absolute;
	top: 52%;
	transform: translateY(-52%);
	left: 2rem;
	cursor: pointer;
}

.infoSliderNext {
	width: 3.6rem;
	height: 5.5rem;
	position: absolute;
	top: 52%;
	transform: translateY(-52%);
	right: 2rem;
	cursor: pointer;
}

.relative .infoSlider .slick-dots li button:before {
	font-size: 1rem;
}

.relative .infoSlider .slick-dots li.slick-active button:before {
	color: #73AFE3;
}

.infoBoxTtl {
	position: relative;
}

.infoBoxTtl .blueBg {
	width: 75rem;
	display: block;
	margin: 0 auto;
	position: relative;
}

.infoBoxTtl p {
	width: 75rem;
	font-size: 6.9rem;
	font-weight: 700;
	line-height: 1.2;
	color: #303085;
	text-align: center;
	position: absolute;
	top: 13rem;
	left: 50%;
	transform: translateX(-50%);
}

.infoBoxTtl p::before {
	content: '';
	position: absolute;
	background: url(../img/infoBoxTtlSpeech.webp) no-repeat center;
	background-size: 100%;
	width: 5.8rem;
	height: 5.8rem;
	right: 4.5rem;
	bottom: -3rem;
}

.infoBoxTtl p::after {
	content: '';
	position: absolute;
	background: url(../img/infoBoxTtlSpeech.webp) no-repeat center;
	background-size: 100%;
	width: 5.8rem;
	height: 5.8rem;
	left: 4.5rem;
	top: -4rem;
	transform: rotate(180deg);
}

.infoPrice {
	margin-top: -6rem;
}

.infoPriceItem {
	position: relative;
	background: url(../img/infoPriceItemBg.webp) no-repeat center;
	background-size: 100% 100%;
	margin: 0 4rem;
	padding-bottom: 10rem;
}

.infoPriceItem .ttl {
	font-size: 4.1rem;
	font-weight: 500;
	line-height: 1.5;
	color: #0066A4;
	padding: 3.5rem 0 0 6.5rem;
}

.infoPriceItemStrong {
	width: 15.1rem;
	display: block;
	position: absolute;
	top: -2.5rem;
	right: 2rem;
}

.infoPriceItemPrice {
	width: 55.5rem;
	display: block;
	margin: 0 auto;
	margin-top: 3rem;
}

.infoPriceItem .note {
	font-size: 1.8rem;
	font-weight: 400;
	line-height: 1.35;
	color: #4D4D4D;
	padding: 3rem 4rem 2rem 5rem;
}

.infoPriceItemImg {
	width: 59rem;
	display: block;
	margin: 0 auto;
	margin-bottom: 2.5rem;
}

.infoPriceItem .content {
	font-size: 2.2rem;
	font-weight: 500;
	line-height: 1.3;
	color: #fff;
	margin: 0;
	padding: 1.5rem 1.5rem 3.5rem 1.5rem;
	background: rgb(106, 169, 222);
	background: linear-gradient(90deg, rgba(106, 169, 222, 1) 0%, rgba(22, 116, 176, 1) 30%, rgba(0, 102, 164, 1) 100%);
	border-radius: 1.5rem;
}

/*  infoPriceのアコーディオン */
.accordion {
	padding: 0 4rem;
}
.infoPrice .toggle {
	display: none;
}
.infoPrice .Label {		/*タイトル*/
	padding: 1rem;
	display: block;
	color: #fff;
	background:#0066a4;
}
.infoPrice .Label::before{		/*タイトル横の矢印*/
	content:"";
	width: 6px;
	height: 6px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	-webkit-transform: rotate(45deg);
	position: absolute;
	top:calc( 50% - 3px );
	right: 20px;
	transform: rotate(135deg);
}
.infoPrice .Label,
.infoPrice .inner {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transform: translateZ(0);
	transition: all 0.3s;
}
.infoPrice .inner {		/*本文*/
	height: 0;
	margin-bottom:10px;
	padding:0 20px;
	overflow: hidden;
}
.infoPrice .toggle:checked + .Label + .inner {	/*開閉時*/
	height: auto;
	padding:20px ;
	transition: all .3s;
}
.infoPrice .toggle:checked + .Label::before {
	transform: rotate(-45deg) !important;
}


/* end info */

/* other */
.other {
	position: relative;
	background: url(../img/otherBg.webp) no-repeat center;
	background-size: 100% 100%;
	padding-bottom: 6.5rem;
}

.other .otherTtlBg {
	width: 75rem;
	display: block;
	margin: 0 auto;
	position: relative;
}

.otherTxtBox {
	margin-top: -2.8rem;
}

.otherTtlTxt01 {
	width: 35.8rem;
	position: absolute;
	top: 9rem;
	left: 50%;
	transform: translateX(-50%);
}

.otherTtlTxt02 {
	width: 67.1rem;
	position: absolute;
	top: 19rem;
	left: 50%;
	transform: translateX(-50%);
}

.otherTxtBox .otherTxt {
	font-size: 6.5rem;
	font-weight: 500;
	line-height: 1.1;
	color: #0066A4;
	text-align: center;
	padding: 0 2.5rem 1rem 2.5rem;
	background-color: #FFFFE7;
	display: inline-block;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
}

.otherTxtBox .smallTxt {
	font-size: 5rem;
	line-height: 1.2;
	color: #4D4D4D;
	text-align: center;
}

/* .otherGif {
	position: relative;
	background: url(../img/otherGifBorder.webp) no-repeat center;
	background-size: 67rem 38.5rem;
	margin: 3rem auto 3rem auto;
	padding: 1.4rem;
} */

.otherGif img {
	width: 65.9rem;
	display: block;
	margin: 0 auto;
}

.otherCompare {
	height: 138rem;
	display: block;
	margin: 0 auto;
}

/* end other */

/* point */
.point {
	position: relative;
}

.pointPercent {
	width: 75rem;
	display: block;
	margin: 0 auto;
	position: relative;
	z-index: 5;
}

.fPoint {
	width: 75rem;
	display: block;
	margin: 0 auto;
	margin-top: -5rem;
	position: relative;
	z-index: 3;
}

.pointBox {
	position: relative;
	background: url(../img/pointBg.webp) no-repeat center;
	background-size: 100% 100%;
	padding-top: 9rem;
    margin-top: -7rem;
	z-index: 2;
}

.point01 {
	position: relative;
}

.pointNumber {
	width: 20.9rem;
	display: block;
	margin: 0 auto;
	margin-top: 2.5rem;
}

.point01Box {
	position: relative;
}

.point01Bg {
	width: 73.4rem;
	display: block;
	margin: 2rem 1.6rem 0 auto;
}

.point01Ttl {
	display: inline-block;
	font-size: 5.7rem;
	font-weight: 600;
	line-height: 1.45;
	color: #2E3185;
	position: absolute;
	top: 19rem;
	right: 23rem;
	letter-spacing: -.5rem;
}

.point01Box .pointImg {
	width: 63.4rem;
	display: block;
	position: absolute;
	top: 30rem;
	left: 48%;
	transform: translateX(-50%);
}

.point01Txt {
	width: 63.4rem;
	display: block;
	font-size: 2.8rem;
	font-weight: 500;
	line-height: 1.35;
	position: absolute;
    left: 49%;
    transform: translateX(-50%);
    bottom: 7.8rem;
}

.animated-background {
    display: inline;
    background: linear-gradient(to right, transparent 50%, #FFFFC1 50%);
    background-size: 200% 100%;
    animation: slideIn 3s linear forwards;
    color: #EF857D;
}

@keyframes slideIn {
    0% {
        background-position: 0;
    }
    100% {
        background-position: -100%;
    }
}

.point02{
	position: relative;
} 

.point02Box{
	width: 73.4rem;
	height: 80rem;
	position: relative;
	background: url(../img/pointRightBg.webp) no-repeat center;
	background-size: 100% 100%;
	margin: 2rem 0 0 auto;
}

.point02Ttl {
	font-size: 5.7rem;
	font-weight: 600;
	line-height: 1.3;
	color: #2E3185;
    padding-top: 9rem;
    padding-left: 10.5rem;
}

.point02Img{
	width: 62.8rem;
	display: block;
	margin: 5.2rem auto 5.5rem 4.5rem;
}

.point02Txt{
	width: 59.7rem;
	display: block;
	margin: 0 auto;
	font-size: 2.8rem;
	font-weight: 500;
	line-height: 1.35;
	margin-bottom: 2.5rem;
}

.point02Content{
	font-size: 2.4rem;
	font-weight: 500;
	line-height: 1.4;
	color: #fff;
	background-color: #6AADC2;
	margin-left: 1.7rem;
	padding: 1rem 3.5rem 1rem 5.5rem;
}

.point03{
	position: relative;
} 

.point03Box{
	width: 73.4rem;
	position: relative;
	background: url(../img/pointLeftBg.webp) no-repeat center;
	background-size: 100% 100%;
	margin-top: 2rem;
	padding-bottom: 4.5rem;
}

.point03Ttl {
	font-size: 5.7rem;
	font-weight: 600;
	line-height: 1.3;
	color: #2E3185;
    padding-top: 6rem;
    padding-left: 0;
	text-align: center;
}

.point03Img{
	width: 62.8rem;
	display: block;
	margin: 5.2rem auto 5.5rem 4.5rem;
}

.point03Txt{
	width: 59.7rem;
	display: block;
	margin: 0 auto;
	font-size: 2.8rem;
	font-weight: 500;
	line-height: 1.35;
	margin-bottom: 2.5rem;
}

.point04{
	position: relative;
} 

.point04Box{
	width: 73.4rem;
	position: relative;
	background: url(../img/pointRightBg.webp) no-repeat center;
	background-size: 100% 100%;
    margin: 2rem 0 auto auto;
	padding-bottom: 6rem;
}

.point04Ttl {
	font-size: 5.7rem;
	font-weight: 600;
	line-height: 1.3;
	color: #2E3185;
    padding-top: 6rem;
    padding-left: 9rem;
	text-align: center;
}

.point04Img{
	width: 37.6rem;
	display: block;
	margin: 2rem auto 2rem auto;
}

.point04Txt{
	width: 59.7rem;
	display: block;
	margin: 0 auto;
	font-size: 2.8rem;
	font-weight: 500;
	line-height: 1.35;
	margin-bottom: 2rem;
}

.point04Note{
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 2;
	color: #8C8C8C;
	margin: 0 6rem 0 auto;
	text-align: right;
}

.point05{
	position: relative;
} 

.point05Box{
	width: 73.4rem;
	position: relative;
	background: url(../img/pointLeftBg.webp) no-repeat center;
	background-size: 100% 100%;
    margin: 2rem auto auto 0;
	padding-bottom: 6rem;
}

.point05Ttl {
	font-size: 5.7rem;
	font-weight: 600;
	line-height: 1.3;
	color: #2E3185;
    padding-top: 6rem;
    padding-left: 0;
	text-align: center;
}

.point05Img{
	width: 37.6rem;
	display: block;
	margin: 2rem auto 2rem auto;
}

.point05Txt{
	width: 59.7rem;
	display: block;
	margin: 0 auto;
	font-size: 2.8rem;
	font-weight: 500;
	line-height: 1.35;
	margin-bottom: 2rem;
}
/* end point */

/* step */
.stepTtl {
	font-size: 6.5rem;
	font-weight: 700;
	line-height: 1.2;
	color: #A0842A;
	text-align: center;
	background: url(../img/stepTtlBg.webp) no-repeat;
	background-position: center;
	background-size: 67.3rem 20rem;
	padding: 10rem 2.5rem;
}

.stepBox{
	position: relative;
	background: url(../img/stepBoxBg.webp) no-repeat center;
	background-size: 100% 100%;
	padding-top: 8.5rem;
	padding-bottom: 7.5rem;
}

.step01{
	position: relative;
	background: url(../img/step01Bg.webp) no-repeat center;
	background-size: 100% 100%;
	margin: 0 2.5rem;
}

.step01::after{
	content: '';
	position: absolute;
	height: 13rem;
	width: .3rem;
	background-color: #AF9B7C;
    left: 50%;
    transform: translateX(-50%);
    top: -12.9rem;
    z-index: 1;
}

.step01Ttl{
	font-size: 4.7rem;
	font-weight: 700;
	line-height: 1.7;
	text-align: center;
	color: #AF9B7C;
	padding: 6rem 0 3rem 0;
}

.stepContent{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	margin-left: .2rem;
	padding-bottom: 2.5rem;
}

.step02 .stepContent,
.step03 .stepContent{
	padding-bottom: 2.8rem;
}

.stepImg img{
	width: 31.3rem;
	display: block;
}

.stepTxt{
	width: 31.5rem;
	margin-left: 2rem;
	margin-right: 1.5rem;
	flex: auto;
}

.stepTxt p{
	font-size: 2.8rem;
	font-weight: 500;
	line-height: 1.2;
}

.stepBtn{
	width: 33.1rem;
	display: block;
	margin-top: 2.5rem;
	cursor: pointer;
}

.step02{
	position: relative;
	background: url(../img/step02Bg.webp) no-repeat center;
	background-size: 100% 100%;
	margin: 5rem 2.5rem 5rem 2.5rem;
}

.step02::after{
	content: '';
	position: absolute;
	height: 5.3rem;
	width: .3rem;
	background-color: #AF9B7C;
    left: 50%;
    transform: translateX(-50%);
    top: -5.2rem;
    z-index: 1;
}

.step02Ttl{
	font-size: 4.7rem;
	font-weight: 700;
	line-height: 1.7;
	text-align: center;
	color: #AF9B7C;
	padding: 7rem 0 1rem 0;
}

.step03{
	position: relative;
	background: url(../img/step03Bg.webp) no-repeat center;
	background-size: 100% 100%;
	margin: 0 2.5rem;
}

.step03::after{
	content: '';
	position: absolute;
	height: 5.3rem;
	width: .3rem;
	background-color: #AF9B7C;
    left: 50%;
    transform: translateX(-50%);
    top: -5.2rem;
    z-index: 1;
}

.step03Ttl{
	font-size: 4.7rem;
	font-weight: 700;
	line-height: 1.7;
	text-align: center;
	color: #AF9B7C;
	padding: 7rem 0 1.5rem 0;
}

.step02 .stepContent,
.step03 .stepContent{
	margin-left: .5rem;
}
/* end step */