@charset "utf-8";

@media screen and (min-width: 1001px){
	.pc_only{
		display: block;
	}
}

@media screen and (max-width: 1000px){
	.pc_only{
		display: none;
	}
	header{
		height: 103px;
	}
	h1{
		margin-top: 20px;
	}
	header .menu{
		width: 30px;
		height: 28px;
		padding-top: 1px;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		margin-top: 40px;
		z-index: 2;
		cursor: pointer;
		pointer-events: auto;
		color: #fff;
		text-align: center;
	}
	header .menu_wrapper {
		margin-bottom: 5px;
		width: 30px;
		display: inline-block;
	}
	header .menu span.menu_bar {
		display: block;
		width: 100%;
		margin: 0 auto 5px;
		height: 6px;
		background: #ff8800;
		-webkit-transition: all .2s ease-in-out;
		-o-transition: all .2s ease-in-out;
		transition: all .2s ease-in-out;
		border-radius: 2px;
	}
	header .menu span.menu_bar:last-child{
		margin-bottom: 0;
	}
	.js_menuOpen .menu span.menu_bar{
		background: #fff;
		height: 3px;
	}
	.js_menuOpen .menu span.menu_bar.top{
		-webkit-transform: translateY(9px) rotate(-45deg);
		-ms-transform: translateY(9px) rotate(-45deg);
		transform: translateY(9px) rotate(-45deg);
	}
	.js_menuOpen .menu span.menu_bar.middle{
		opacity: 0;
	}
	.js_menuOpen .menu span.menu_bar.bottom{
		-webkit-transform: translateY(-7px) rotate(45deg);
		-ms-transform: translateY(-7px) rotate(45deg);
		transform: translateY(-7px) rotate(45deg);
	}
	header ul{
		position: fixed;
		right: 0;
		width: auto;
		height: 100%;
		display: block;
		margin-top: 0;
		padding: 100px 30px;
		background: #ff8800;
		z-index: 1;
		-webkit-transition: all 600ms ease-out;
		-o-transition: all 600ms ease-out;
		transition: all 600ms ease-out;
		transform: translateZ(0) translateX(200%);
	}
	header ul li{
		margin-bottom: 20px;
	}
	header ul a {
		color: #fff;
	}
	.js_menuOpen header ul{
		transform: translateZ(0) translateX(0);
	}
	header .btn{
		/*display: none;*/
		border: 2px solid #fff;
		font-size: 14px;
		width: auto;
		padding: 7px 12px;
	}
	main{
		padding-top: 103px;
	}
	#kv{
		height: auto;
		padding-bottom: 10px;
	}
	#kv .left{
		width: 39%;
		margin-top: 13%;
		margin-left: 6.8%;
	}
	#kv .left h2{
		font-size: 2.6vw;
	}
	#kv .left h1{
		font-size: 6vw;
	}
	#kv .left p{
		font-size: 2.2vw;
	}
	#kv .btn{
		display: block;
	}
	#kv .btn div{
		width: 215px;
		justify-content: space-between;
	}
	#kv .btn div.gp{
		margin-left: 0;
		margin-top: 2%;
	}
	#kv .img_kv{
		width: 27.2%;
	}
	#kv .img_scroll {
		top: unset;
		bottom: 10%;
	}
	.cs1{
		margin-top: 15%;
	}
	.toha{
		margin-top: 15%;
	}
	#study{
		padding-top: 103px;
		margin-top: calc(30px - 103px);
		background-position: top 50px left -23px, top 50px right 12px;
	}
	.study_block1,
	.study_block2,
	.study_block3,
	.study_block4{
		margin-top: 10%;
	}
	#study .study_block1:before,
	#study .study_block2:before,
	#study .study_block3:before,
	#study .study_block4:before{
		padding-top: 0;
	}
	.study_block1 h3,
	.study_block2 h3,
	.study_block3 h3,
	.study_block4 h3,
	.study_block1 p.text,
	.study_block2 p.text,
	.study_block3 p.text,
	.study_block4 p.text{
		position: unset;
		float: left;
		width: 100%;
	}
	.study_block1 .img_man,
	.study_block3 .img_man{
		position: unset;
		float: left;
		margin-top: 5%;
	}
	.study_block1 .img_man{
		width: 34.4vw;
		max-width: 344px;
	}
	.study_block3 .img_man{
		width: 45.5vw;
		max-width: 455px;
	}
	.study_block1 .img_iphone,
	.study_block3 .img_iphone{
		position: relative;
		float: right;
		right: 5px;
	}
	.study_block1 .img_iphone{
		top: 0;
	}
	.study_block3 .img_iphone{
		top: 30px;
	}
	.study_block2 .img_iphone,
	.study_block4 .img_iphone{
		position: relative;
		float: left;
		left: 5px;
	}
	.study_block4 .img_iphone{
		top: 30px;
	}
	.study_block2 .img_man,
	.study_block4 .img_man{
		position: unset;
		float: right;
		margin-top: 5%;
	}
	.study_block2 .img_man{
		width: 36.2vw;
		max-width: 362px;
	}
	.study_block4 .img_man{
		width: 42.9vw;
		max-width: 429px;
	}
	.study_block2 p.text,
	.study_block3 p.text,
	.study_block4 p.text{
		margin-top: 60px;
	}
	.download .contents_wrap{
		height: auto;
		padding-bottom: 20px;
	}
	.download .download_block .left{
		width: 56.338028%;
	}
	.download .download_block .left p.kochira{
		font-size: 17px;
	}
	.download .download_block .left img{
		max-width: 100%;
		height: 50px;
	}
	.download .download_block .img_qr{
		width: 37.32394%;
	}
	.howto{
		height: auto;
		margin-top: 15%;
		padding-top: 40px;
		padding-bottom: 40px;
	}
	.cs2{
		margin-top: 10%;
	}
	.movie{
		margin-top: 10%;
	}
	.toha img{
		width: 30%;
		max-width: 175px;
	}
	#voice{
		padding-top: 103px;
		margin-top: calc(88px - 103px);
		background-position: top 50px left -23px, top 50px right 12px;
	}
	#voice .contents_wrap{
		justify-content: space-between;
		flex-wrap: wrap;
		margin-top: 10%;
	}
	.voice_block{
		min-width: 240px;
	}
	#voice .prev-arrow{
		left: 184px;
	}
	#voice .next-arrow{
		right: 184px;
	}
	#function{
		padding-top: 103px;
		margin-top: calc(84px - 103px);
		background-position: top 50px left -23px, top 50px right 12px;
	}
	#function .contents_wrap{
		margin-top: 10%;
	}
	.function_block{
		width: calc(49% - 32px - 32px - 8px - 8px);
		height: auto;
		padding-bottom: 10px;
		margin-bottom: 10%;
	}
	.movie{
		margin-top: 5%;
	}
	#info{
		padding-top: 103px;
		margin-top: calc(10% - 103px);
		background-position: top 50px left -23px, top 50px right 12px;
	}
	#info .tweet,
	.news-container{
		margin-top: 10%;
	}
	.bottom {
		margin-top: 10%;
	}
	footer{
		height: auto;
		padding-bottom: 30px;
	}
	footer .left_block,
	footer .right_block{
		width: 100%;
		float: none;
	}
	footer .right_block{
		margin-top: 32px;
	}
	footer .email_block {
		margin-top: 5%;
	}
	footer .copyright {
		margin-top: 32px;
	}
}

@media screen and (max-width: 750px){
	h3{
		font-size: 30px;
	}
	#study,
	#function{
		background-size: 47%, 30%;
	}
	#voice,
	#info{
		background-size: 30%, 47%;
	}
	#study > h2,
	#voice > h2,
	#function > h2,
	#info > h2{
		font-size: 40px;
	}
	#voice .prev-arrow{
		left: 72px;
	}
	#voice .next-arrow{
		right: 72px;
	}
}

@media screen and (max-width: 500px){
	header{
		height: 84px;
	}
	header h1 img{
		width: 200px;
	}
	header .menu{
		margin-top: 30px;
	}
	main{
		padding-top: 84px;
	}
	#kv .img_qr{
		display: none;
	}
	#kv .btn div{
		width: auto;
	}
	#kv .img_kv{
		width: 31.2%;
		margin-left: 13.1%;
	}
	h3{
		font-size: 24px;
	}
	.toha {
		width: 90%;
		margin-top: 10%;
	}
	.toha img{
		margin-top: 0;
		margin-bottom: 5%;
		width: 20%;
		float: right;
	}
	.toha .right{
		width: 100%;
		margin-top: -25%;
	}
	#study{
		padding-top: 84px;
		margin-top: calc(30px - 84px);
	}
	#study,
	#function{
		background-size: 32%, 15%;
	}
	#voice,
	#info{
		background-size: 20%, 37%;
	}
	#study > h2,
	#voice > h2,
	#function > h2,
	#info > h2 {
		font-size: 32px;
		padding-top: 10%;
	}
	.study_block2,
	.study_block3,
	.study_block4{
		margin-top: 20%;
	}
	#study h3,
	#study p.text,
	#study .img_iphone,
	#study .img_man{
		float: none;
	}
	#study .img_iphone{
		left: 0;
		right: 0;
		margin-left: auto;
		margin-right: auto;
	}
	#study .img_man{
		display: block;
		margin: 15% auto 0;
	}
	.study_block1 .img_iphone{
		top: 30px;
	}
	.study_block1 .img_man,
	.study_block2 .img_man{
		width: 50%;
	}
	.study_block3 .img_man,
	.study_block4 .img_man{
		width: 60%;
	}
	.study_block4 .img_man{
		margin-top: 7%;
	}
	.study_block1 p.text{
		margin-top: 60px;
	}
	.howto a.btn {
		font-size: 24px;
		padding-top: 20px;
		height: calc(74px - 20px);
	}
	#voice{
		padding-top: 84px;
		margin-top: calc(88px - 84px);
	}
	.voice_block{
		width: 50%;
		min-width: unset;
		margin-left: 25px;
		margin-right: 25px;
	}
	.voice_block p.title{
		font-size: 17px;
		margin: 20px auto 0;
		width: 90%;
	}
	.voice_block p.text{
		font-size: 14px;
		line-height: 25px;
	}
	.voice_block p.name{
		font-size: 12px;
		width: 90%;
	}
	#voice .prev-arrow{
		left: 0;
	}
	#voice .next-arrow{
		right: 0;
	}
	.download .contents_wrap{
		width: calc(100% - 20px - 20px);
		padding-left: 20px;
		padding-right: 20px;
	}
	.download .download_block .left p.kochira{
		font-size: 15px;
	}
	.download .download_block.iphone{
		width: calc(50% - 2px - 15px);
		padding-right: 15px;
	}
	.download .download_block.android{
		width: calc(50% - 15px);
		padding-left: 15px;
	}
	.download .download_block .left{
		width: 100%;
	}
	.download .download_block .img_qr{
		display: none;
	}
	.download .download_block .left p.notice{
		font-size: 12px;
	}
	#function{
		padding-top: 84px;
		margin-top: calc(84px - 84px);
	}
	.function_block{
		width: calc(49% - 10px - 10px - 8px - 8px);
		padding-left: 10px;
		padding-right: 10px;
	}
	.function_block h4{
		font-size: 18px;
	}
	#info{
		padding-top: 84px;
		margin-top: calc(105px - 84px);
	}
	#info .text{
		font-size: 20px;
		letter-spacing: 0;
		margin-top: 10%;
	}
	.bottom img{
		width: 60px;
	}
	.modal-content .text{
		width: 90%;
	}
	.modal-content button{
		width: 90%;
	}
	footer .download_block{
		width: calc(50% - 1px - 10px);
	}
	footer .download_block.iphone{
		padding-right: 10px;
	}
	footer .download_block.android{
		padding-left: 10px;
	}
	footer .download_block .img_qr{
		display: none;
	}
	footer ul{
		display: block;
		width: 100%;
	}
	footer ul li{
		margin-bottom: 10px;
	}
}

@media screen and (max-width: 375px){
	#kv .left{
		width: 42%;
		margin-left: 4%;
	}
	.study_block1 .img_man,
	.study_block2 .img_man,
	.study_block3 .img_man,
	.study_block4 .img_man{
		margin-top: 10%;
	}
	.function_block h4{
		font-size: 16px;
	}
	.function_block img{
		max-width: 100%;
	}
	footer .download_block.iphone{
		width: calc(49% - 1px - 10px);
	}
	footer .download_block.android{
		width: calc(51% - 1px - 10px);
	}
}