@charset "utf-8";

#kuku_app{
	background-image: url("../images/kuku_background.svg");
}
#kuku_app main{
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 2.5em;
	font-size: 20px;
}@media only screen and (max-width: 892px){
	#kuku_app main{
		padding: 0 1em;
	}
}@media only screen and (max-width: 600px){
	#kuku_app main{
		font-size: 16px;
		padding: 0 .5em;
	}
}
/* スマホ用ページ上部へ戻るボタン */
#kuku_app #pageTop{
	z-index: 99;
}




/* キービージュアル */
#kuku_app .kv_area{
	margin-top: 60px;
	display: flex;
	flex-direction: column;
	align-items: center;
}
#kuku_app .copy{
	width: 420px;
}
#kuku_app .logo{
	width: 440px;
}
@media only screen and (max-width: 600px){
	#kuku_app .kv_area{
		margin-top: 1em;
	}
	#kuku_app .copy{
		width: calc(90% / 440 * 420);
	}
	#kuku_app .logo{
		width: 90%;
	}
}
	
	
.zen-maru-gothic-regular {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.zen-maru-gothic-medium {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.zen-maru-gothic-bold {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-style: normal;
}
.m-plus-rounded-1c-regular {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.m-plus-rounded-1c-bold {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 700;
  font-style: normal;
}

/* イントロ部 */
.intro_grid{
	/*
	background-color: yellow;
	*/
	display: grid;
	grid-template-columns: minmax(200px, 1fr) minmax(18em, 22em) minmax(220px, 1fr);
	grid-template-areas:
		"areaA areaA areaB"
		"areaC areaD areaB"
		"areaC areaE areaE"
		"areaC areaF areaF";
}@media only screen and (max-width: 916px){
	.intro_grid{
		grid-template-columns: 1fr 1fr;
		grid-gap: 1em;
		grid-template-areas:
			"areaA areaA"
			"areaD areaD"
			"areaC areaB"
			"areaE areaE"
			"areaF areaF";
	}
}
.intro_blank{
	grid-area: areaA;
	height: 4em;
}@media only screen and (max-width: 916px){
	.intro_blank{ height: 1em; }
}
.intro_title{
	grid-area: areaD;
	font-family: "Zen Maru Gothic", sans-serif;
	font-style: normal;
}@media only screen and (max-width: 916px){
	.intro_title{
		margin: 0 auto;
	}
}
.intro_title .sub_title{
	display: inline-block;
	background-color: #8ac43f;
	font-size: 1.4em;
	color: white;
	font-weight: 500;
	border-radius: 1em;
	padding: 0 1em;
}@media only screen and (max-width: 916px){
	.intro_title .sub_title{
		position: relative;
		left: 50%;
		transform: translateX(-50%);
	}
}@media only screen and (max-width: 360px){
	.intro_title .sub_title{
		font-size: calc(100vw / 16);
	}
}
.intro_title .title{
	font-size: 1.8em;
	font-weight: 700;
}@media only screen and (max-width: 360px){
	.intro_title .title{
		font-size: calc(100vw / 12.5);
	}
}
.intro_smartphone{
	grid-area: areaC;
	display: flex;
	justify-content: flex-end;
	padding-right: 1em;
	/*
	background-color: yellow;
	*/
}
.intro_smartphone img{
	width: 200px;
}
.intro_girl{
	grid-area: areaB;
	position: relative;
	/*
	background-color: cyan;
	*/
}
.intro_girl::before{
	content: url("../images/kuku_goshi.svg");
	display: block;
	width: 99px;
	position: absolute;
	left: -52px;
	bottom: 122px;	
}
.intro_girl img{
	width: 220px;
	position: absolute;
	bottom: 0;
	/*
	background-color: magenta;
	*/
}@media only screen and (max-width: 916px){
	.intro_girl::before{
		bottom: 210px;
		left: -32px;
	}
}
@media only screen and (max-width: 600px){
	.intro_smartphone img,
	.intro_girl img{
		width: 100%;
	}
	.intro_girl::before{
		width: 24vw;
		bottom: auto;
		top: 0;
		left: -8vw;
	}
	
}

.intro_text{
	grid-area: areaE;
	padding-top: 1em;
}
.intro_getit{
	/*
	background-color: azure;
	*/
	grid-area: areaF;
	font-size: .8em;
	color: gray;
	display: flex;
	justify-content: center;
}@media only screen and (max-width: 916px){
	.intro_getit{
		justify-content: center;
	}
}
.intro_getit_area{
	display: flex;
	align-items: center;
	flex-direction: column;
}
.intro_getit_from{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1em;
	margin-top: .75em;
}
.intro_getit_from img{
	height: 60px;
}

/* 動画部 */
.movie{
	margin: 2em auto 1em;;
	width: 90%;
	max-width: 900px;
}@media only screen and (max-width: 600px){
	.movie{
		width: calc(100% - 1em);
	}
}

/* 基本の使い方部 */
.basic_area{
	width: calc(13em * 3 * .9  + 6em);
	margin: 2em auto 0;
}@media only screen and (max-width: 890px){
	.basic_area{
		width: 100%;
	}
}
.basic_title{
	display: inline-block;
	margin: 2em auto auto 3em;
	padding: 0.25em 1em 0;
	font-weight: bold;
	color: white;
	background-color: #fa6270;
}@media only screen and (max-width: 890px){
	.basic_title{
		margin: 0 auto;
		position: relative;
		left: 50%;
		transform: translateX(-50%);
	}
}
.basic_flow{
	border-radius: 1em;
	border: 5px solid #fa6270;
	display: flex;
	justify-content: center;
	padding: 4em 2em 1em;
	background-color: white;
}@media only screen and (max-width: 890px){
	.basic_flow{
		flex-direction: column;
		align-items: center;
		width: 15em;
		margin: 0 auto;
		padding-top: 1.5em;
		gap:.5em;
	}
}
.basic_step{
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: 18px;
	width: 13em;
	/*
	background-color: yellow;
	*/
}
.basic_img_box{
	width: 160px;
	margin-bottom: .5em;
	border: 1px solid gray;
	position: relative;
}
.basic_img_box img{
	width: 100%;
}
#basic_img2::before{
	content: url("../images/kuku_goichi.svg");
	display: block;
	width: 142px;
	height: 62px;
	position: absolute;
	top: -54px;
	left: 24px;
}

.basic_arrow{
	width: 1em;
	position: relative;
	/*
	background-color: yellow;
	*/
}
.basic_arrow::before{
	content: url("../images/kuku_arrow.svg");
	position: absolute;
	width: 56px;
	left: -.75em;
	top: 7em;
}
@media only screen and (max-width: 890px){
	#basic_img2{
		margin-bottom: 45px;
	}
	#basic_img2::before{
		left: 66px;
		top: 267px;
	}
    .basic_arrow{
		height: 3.5em;
		/*
		background-color: blue;
		*/
    }
	.basic_arrow::before{
		transform: rotate(90deg);
		top: 1em;
		/*
		left: -1.5em;
		*/
	}
}
@media only screen and (max-width: 600px){
	.basic_arrow::before{
		left: -1.5em;
	}
}
@media only screen and (max-width: 360px){
	.basic_area{
		width: 100%;
		/*
		background-color: aqua;
		*/
		padding: 0;
	}
	.basic_flow{
		width: calc(100% - .5em);
		margin: 0;
		padding: 1.5em 0;
	}
	.basic_step{
		width: calc(100% - 1em);
		/*
		background-color:lightgoldenrodyellow;
		*/
	}
	.basic_img_box{
		width: 50vw;
	}
	#basic_img2::before{
		left: 20vw;
		top: 82vw;
	}
}


/* ダウンロード */
.download_area{
	width: 100%;
	background-color: #f0f0f0;
	margin-top: 4em;
	padding-bottom: 1em;
}
.download_headline{
	padding: .5em 1em;
	text-align: center;
	font-weight: bold;
	color: white;
	background-color: #b1b1b1;
}
.download_stores{
	margin: 3em auto 1em;
	width: 392px;
	display: flex;
	justify-content: space-between;
	font-size: .7em;
}
.dl_part img{
	height: 50px;
}
.dl_part p:first-of-type{
	margin-top: 1.5em;
}
.dl_part p:last-of-type{
	margin-bottom: 2em;
}
.download_text_area{
	width: 90%;
	margin: 3em auto 2em;
	padding: 2em 1em;
	background-color: white;
	font-size: .8em;
	display: flex;
	justify-content: center;
}
.dl_text{
	/*
	background-color: lightcyan;
	*/
}
.dl_text .note,
.dl_text .note_detail{
	line-height: 2;
	padding-left: 1em;
	text-indent: -1em;
}
.dl_text .note{
	margin-top: 1.5em;
}
.address,
.tel{
	margin: auto 2em;	
}
@media only screen and (max-width: 600px){
	.download_stores{
		flex-direction: column;
		align-items: center;
		gap: 2em;
		width: 90%;
	}
	.dl_part{
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 0;
	}
	.dl_part img{
		max-height: 50px;
		height: 20vw;
	}
	.download_text_area{
		margin-top: 1em;
        width: 90%;
        margin: 2em auto 1em;
        padding: 2em .5em;
        background-color: white;
        font-size: .8em;
        display: flex;
        justify-content: center;
	}
}


/* ポイント */
.point_area{
	margin-top: 2em;
	padding-bottom: 2em;
	background-color: white;
	position: relative;
}
.point_headline{
	background-color: #009ee7;
	color: white;
	padding: .5em 1em;
	font-weight: bold;
}@media only screen and (max-width: 600px){
	.point_headline{
		text-align: center;
	}
}

.point_one,
.point_two,
.point_three{
	margin: 0 1em;
}
.point_step{
	color: #009ee7;
	margin-top: 1em;
	position: relative;
	/*
	background-color: aqua;
	*/
}
.point_title{
	line-height: 2;
	font-weight: bold;
}
.point_number{
	display: inline-block;
	background-image: url("../images/kuku_point_back.svg");
	background-repeat: no-repeat;
	background-position: center center;
	padding-left: .5em;
	width: 1.5em;
	color: white;
}

.swipers_area{
	width: 100%;
	/*
	background-color: red;
	*/
	display: flex;
	flex-direction: row-reverse;
	position: relative;
}

/* swiper設定 */
.mySwiper .swiper-slide {
	/* ONじゃないときには透明にすることで背景のボタンを見せる */
	opacity: 0;
}
.mySwiper .swiper-slide-thumb-active {
  opacity: 1;
}

.mySwiper{
	margin-top: 1em;
	width: 250px;
	height: calc(250px * 1920 / 1080);
	border: 1px solid gray;
	background-image: url("../images/03_appli_menu.png");
	background-size: cover;
	background-position: bottom;
	position: relative;
	/*
	background-color: aqua;
	*/
}
.mySwiper2{
	width: calc(100% - 250px - 2em);
	height: calc(250px * 1920 / 1080 + 1em);
	/*
	background-color: yellow;
	*/
}
.swipers_area .swiper-button-prev{
	left: calc(250px + 1em);
	/*
	margin-top: calc((-250px * 1920 / 1080) );
	background-color: aqua;
	*/
}
.swipers_area .swiper-button-next{
	right: 0em;
	/*
	margin-top: calc((-250px * 1920 / 1080) / 2);
	*/
}
.swipers_area .swiper-button-prev::after,
.swipers_area .swiper-button-next::after{
	color: #999999;
}



.point1_smart_phone{
	display: none;
}
.mySwiper{
	position: relative;
}
.mySwiper .swiper-slide{
	position: absolute;
	left: 39px;
	/*
	background-color: aliceblue;
	*/
}
.mySwiper .swiper-slide img{
	/* .swiper-slideでwidthとheightを設定しても効かない */
	width: 172px;
	height: 32px;
}
.mySwiper .thumb1{
	top: 107px;
}
.mySwiper .thumb2{
	top: 141px;
}
.mySwiper .thumb3{
	top: 175px;
}




.point_detail{
	margin-top: 1em;
	width: 100%;
	height: calc(250px * 1920 / 1080);
}
.renshu_detail{
	background-color: #ffeff1;
	position: relative;
}
.straight_detail{
	background-color: #fff7e7;
	position: relative;
}
.random_detail{
	background-color: #e8f8fd;
	position: relative;
}
.detail_title{
	font-family: "M PLUS Rounded 1c", sans-serif;
	font-weight: 700;
	font-style: normal;
	border: 2px solid;
	border-radius: 2em;
	padding: .25em 2em;
	background-color: white;
	display: inline-block;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	top: -1em;
}
.renshu_detail .detail_title{
	color: #fa626f;
	border-color: #fa626f;
}
.straight_detail .detail_title{
	color: #fbab13;
	border-color: #fbab13;
}
.random_detail .detail_title{
	color: #16bced;
	border-color: #16bced;
}
.detail_area{
	width: calc(100% - 2em);
	display: flex;
	gap: 1em;
	/*
	justify-content: center;
	background-color: red;
	*/
	position: relative;
	/* テキストが長くなりすぎないように */
	max-width: 720px;
	margin: 0 auto;
}
.detail_image{
	box-sizing: border-box;
	max-width: 316px;
	width: calc(50% - 1em);
	height: 370px;
	position: relative;
	/*
	background-color: yellow;
	*/
}
.detail_image img{
	position: absolute;
	width: 160px;
	height: calc(160px * 1920 / 1080);
	border: 1px solid gray;
}
.renshu_img1,
.straight_img1,
.random_img1{
	top: 0;
	left: 0;
}
.renshu_img2,
.straight_img2,
.random_img2{
	bottom: 0;
	right: 0;
}
.detail_text{
	box-sizing: border-box;
	flex: 1;
	/*
	background-color: azure;
	*/
}
.detail_copy{
	font-size: 1.24em;
	margin: 1em auto;
	text-align: center;
	font-weight: bold;
}
.renshu_detail .detail_copy{
	color: #fa626f;
}
.straight_detail .detail_copy{
	color: #fbab13;
}
.random_detail .detail_copy{
	color: #16bced;
}
.below892{
	display: none;
}
@media only screen and (max-width: 892px){
	.over892{
		display: none;
	}
	.below892{
		display: inline;
	}
	.point_one{
		margin: 0 0 0 .25em ;
	}
	.swipers_area{
		flex-direction: column-reverse;
		/*
		background-color: aqua;
		*/
	}
	.mySwiper{
		border: none;
		width: 260px;
		height: calc(260px * 1910 / 938);
		background: none;
	}
	.mySwiper .point1_smart_phone{
		display: block;
		position: relative;
		top: 0px;
		left: calc(100% / 2 - 130px);
		background-image: url("../images/03_appli_menu.png");
		background-repeat: no-repeat;
		background-size: contain;
		background-position: 8px 2.5px;
	}
	.point1_smart_phone img{
		width: 100%;
	}
	.swiper-button-prev::after,
	.swiper-button-next::after{
		display: none;
	}
	.swipers_area .mySwiper2{
		width: 100%;
		/* ドロップシャドウが見えるように */
		padding: 0 12px 12px 0;
		height: auto;
		margin-top: calc(-140px * 1910 / 938);
		z-index: 2;
		/*
		background-color: yellow;
		*/
	}
	.point_detail{
		height: 100%;
		/*
		margin: 0 4em 0 0;
		background-color: yellow;
		*/
		display: flex;
		flex-direction: column;
		gap: 1em;
	}
    .detail_title{
        border: none;
        border-radius: 0;
        padding: .25em 1em;
        left: 0;
        transform: none;
        top: 0;
    }
	.swiper-slide.renshu_detail,
	.swiper-slide.straight_detail,
	.swiper-slide.random_detail{
		box-shadow: 4px 4px 8px #999;
	}
    .renshu_detail .detail_title{
		color: white;
        background-color: #fa626f;
    }
    .straight_detail .detail_title{
		color: white;
        background-color: #fbab13;
    }
    .random_detail .detail_title{
		color: white;
        background-color: #16bced;
    }
	.detail_area{
		/*
		background-color: aqua;
		*/
		max-width: calc(100% - 2em);
		
	}
	.detail_image{
		/*
        box-sizing: border-box;
		background-color: yellow;
		*/
		width: calc(160px * 2 + .5em);
        max-width: calc(160px * 2 + .5em);
        position: relative;

		height: auto;
		display: flex;
		gap: .5em;
		margin: 1em auto;
		
	}
	.detail_image img{
		position: relative;
	}
	.detail_text{
		/*
		background-color: azure;
		width: calc(100% - 3em);
		*/
	}
}
@media only screen and (max-width: 630px){
	.detail_area{
		width: calc(100% - 1em);
		max-width: calc(100% - 1em);
	}
	.detail_image{
		width: calc(150px * 2 + .5em);
	}
	.detail_image img{
		width: 150px;
		height: calc(150px * 1920 / 1080);
	}
}
/*
*/
@media only screen and (max-width: 600px){
	/*
	.swipers_area .mySwiper2{
		padding: 0 1em 0 0;
	}
	.detail_area{
		width: calc(100% - 2em);
	}
	*/
}
@media only screen and (max-width: 530px){
	.detail_area{
		width: calc(100% - 1.5em);
		flex-direction: column-reverse;
	}
	.detail_image{
		width: calc(36vw * 2 + 1em);
		max-width: calc(36vw * 2 + 1em);
		height: auto;
		gap: 1em;
	}
	.detail_image img{
		width: 36vw;
		height: auto;
	}
}
@media only screen and (max-width: 360px){
	.mySwiper{
		border: none;
		width: 85vw;
		height: calc(85vw * 1910 / 938);
		background: none;
		/*
		background-color: yellow;
		*/
	}
	.mySwiper .point1_smart_phone{
		left: calc(100% / 2 - 42.5vw);
		background-position: 2.6vw .9vw;
	}
	.mySwiper2{
		top: 2vw;
	}
	.detail_image{
		gap: .5em;
		overflow: visible;
	}
}

/* ポイント２ */
.point_description{
	margin-top: 1em;
	padding-left: 2em;
}
.point_two_images{
	margin-top: 1em;
	display: flex;
	justify-content: center;
	gap: 1em;
	/*
	background-color: yellow;
	*/
}
.point_two_images img{
	width: 160px;
	border: 1px solid gray;
}
@media only screen and (max-width: 640px){
	.point_two_images{
		gap: .5em;
	}
}
@media only screen and (max-width: 600px){
	.point_one,
	.point_two,
	.point_three{
		margin: 0 0em;
	}
	.point_two_images{
		width: 350px;
		height: 510px;
		margin: 1em auto 0;
		position: relative;
	}
	.point_two_images img{
		position: absolute;
	}
	#point2_img1{
		width: 230px;
		left: 60px;
	}
	#point2_img2{
		width: 160px;
		left: 0;
		bottom: 0;
	}
	#point2_img3{
		width: 160px;
		right: 0;
		bottom: 0;
	}
}
@media only screen and (max-width: 400px){
	.point_two_images{
		width: calc(100% - 2em);
		height: calc( calc(510 * (100vw - 2em)) / 350 );
		/*
		background-color: yellow;
		*/
	}
	#point2_img1{
		width: 60%;
		left: 20%;
	}
	#point2_img2,
	#point2_img3{
		width: 48%;
	}
}

/* ポイント３ */
.point_three_images{
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	/*
	background-color: yellow;
	*/
	margin: 0 1em;
	gap: 2em;
}
.p3_part{
	display: flex;
	flex-direction: column;
	align-items: center;
	width: calc(50% - 1em);
	/*
	background-color: orange;
	*/
}
.p3_balloon{
	position: relative;
    display: inline-block;
    margin: 0 auto 1.5em;
    padding: 1em 2em;
    min-width: 120px;
    max-width: 100%;
    color: #555;
    font-size: 16px;
    background: white;
	border-radius: 1em;
    border: solid 2px #555;
    box-sizing: border-box;
}
.p3_balloon::before {
    content: "";
    position: absolute;
    bottom: -24px;
    left: 50%;
    margin-left: -16px;
    border: 12px solid transparent;
    border-top: 12px solid white;
    z-index: 2;
}
.p3_balloon::after{
    content: "";
    position: absolute;
    bottom: -28px;
    left: 50%;
    margin-left: -17px;
    border: 13px solid transparent;
    border-top: 13px solid #555;
    z-index: 1;
}
.p3_balloon p{
	font-family: "Zen Maru Gothic", sans-serif;
	font-weight: 500;
	font-style: normal;
	color: #666
}
.p3_img{
	width: 200px;
	margin-top: 1em;
	border: 1px solid gray;
}
.p3_img img{
	width: 100%;
}

@media only screen and (max-width: 675px){
	.point_three_images{
		margin: 0 .5em;
	}
	.p3_balloon{
		padding: .75em 1.25em;
		/*
		padding: .75em 1em;
		*/
	}
}
@media only screen and (max-width: 600px){
	.point_three_images{
		flex-direction: column;
		align-items: center;
		/*
		background-color: aliceblue;
		*/
	}
	.p3_part{
		width: 100%;
		height: auto;
		/*
		background-color: brown;
		row-gap: 1em;
		place-items: start start;
		column-gap: 1em;
		*/
		display: grid;
		grid-template-columns: 160px 1fr;
		grid-template-areas:
			"areaA areaB"
			"areaA areaC";
	}
	.p3_balloon{
		grid-area: areaB;
		margin: 0 auto auto .5em;
		/*
		margin-right: 0;
		background-color: yellow;
		*/
	}
	.p3_balloon::before{
		top: 50%;
		bottom: auto;
		left: -24px;
		margin-top: -12px;
		margin-left: auto;
		border-top: none;
		border: 12px solid transparent;
		border-right: 12px solid white;
	}
	.p3_balloon::after{
		top: 50%;
		bottom: auto;
        left: -28px;
        margin-top: -13px;
		margin-left: auto;
		border-top: none;
        border: 13px solid transparent;
        border-right: 13px solid #555;
	}
	.p3_text{
		grid-area: areaC;
		margin: 0 auto auto 1em;
		/*
		position: absolute;
		width: calc(100% - 200px - 1em);
		right: 0;
		top: 50%;
		*/
	}
	.p3_img{
		grid-area: areaA;
		margin: 0;
		width: auto;
		/*
		position: absolute;
		top: -1em;
		left: 0;
		background-color: azure;
		*/
	}
}
@media only screen and (max-width: 420px){
	.p3_balloon{
		padding: .5em .5em .5em .75em;
	}
}
@media only screen and (max-width: 370px){
	.p3_part{
		grid-template-columns: 1fr 1fr;
	}
	.p3_balloon{
		padding: .5em .5em .5em .5em;
	}
}