@charset "UTF-8";

/* +++++++++loading追加++++++++ */
.loading{
	z-index: 99999999;
}

@media screen and (min-width: 769px){
	.fadein2 {
	    opacity: 0;
	    transform: translateY(3rem);
	    transition: all 1s;
	}
}
.sec{
	overflow: hidden;
}













.loading-nakami{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	font-weight: 700;
	width: 100%;
	height: 100%;
}
.loading figcaption span{
	display: flex;
	justify-content: center;
	align-items: flex-start;
	font-size: 1.0rem;
	margin-top: 1em;
	opacity: 0;
}
.loading figcaption span:before,
.loading figcaption span:after{
	content: "";
	display: block;
	width: 1em;
	height: .1rem;
	margin: .65em .2em 0;
	background: #000;
}
.loading .pic{
/*
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
*/
	width: 50%;
	display: block;
	max-width: 20rem;
	margin: 1.5rem 0;
}
.loading img{
	display: block;
}
.loading p{
	margin: 1.5rem 0;
}
.loading p span{
	//opacity: 0;
}









.loading img,
.loading figcaption span,
.loading p span{
	opacity: 0;
}
.loading img.hyouji,
.loading figcaption span.hyouji,
.loading p span.hyouji{
	opacity: 1;
	transition: 2.5s opacity ease;
}



.loading p span{
	display: block;
}

.loading .pic-img,
.loading p,
.loading figcaption{
	overflow: hidden;
}















.loading img.fadeout,
.loading figcaption span.fadeout,
.loading p span.fadeout{
	transition: .8s transform ease, 1.5s opacity ease;
	transform: translateY(6rem);
	//opacity: 0;
}

.loading .pic
#header{
	z-index: 999999;
}

/* +++++++++アプリページだけキービジュアルの写真を変える++++++++ */
#key-visual{
	background-image: url(../images/index-main-visual04.jpg);
}
#key-visual:before{
	background: rgba(255,255,255,.0);
}
#key-visual .ja{
	background: rgba(0,0,0,.5);
	padding: .1em .4em;
	border-radius: .4em;
}





#page-ttl{
	margin-top: 0;
}
#page-ttl .caveat{
	margin-bottom: 0;
}

.app-key-visual{
	position: relative;
}
@media screen and (max-width: 768px){
	.sp.app-key-visual img.moji{
		display: block;
		position: absolute;
		right: 8.589%;
		bottom: 13.717%;
		width: 6.41%;
	}
}


/* +++++++++++++++++++動画追加+++++++++++++++++++++ */
#douga{
	padding-top: 0 !important;
}
#movie-area{
	margin: 0 auto;
	width: 800px;
	height: 450px;
}
#movie-area video{
	display: block;
	width: 100%;
	height: 100%;
}
@media screen and (max-width: 768px){
	#movie-area{
		width: calc(100vw - 3rem);
		height: calc((100vw - 3rem) / 16 * 9);
	}
}



/* +++++++++++++++固定ナビ+++++++++++++ */

.fixed-navi{
	position: fixed;
	left: calc(100% - 14.8rem);
	top: 10rem;
	z-index: 9;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	width: 14.8rem;
	font-size: 87.5%;
	z-index: 999999;
}
.fixed-navi li{
	margin: .5rem 0;
	width: 100%;
}
.fixed-navi li a{
	padding: 1rem;
	display: block;
/*
	background: rgba(255,255,255,.9);
	background: rgba(190,240,24,1);
*/
	background: rgba(227,238,49,1);
}

@media screen and (max-width: 768px){
	.fixed-navi{
		position: sticky;
		left: calc(100% - 8rem);
		bottom: 30%;
		width: 8rem;
	}
	.fixed-navi li{
		margin: .2rem 0;
	}
	.fixed-navi li a{
		padding: .6rem 0 .6rem .6rem;
		font-size: 1rem;
	}
}





/* +++++++++++++++#message+++++++++++++ */
#message{
	//background: #677580;
	color: #fff;
	font-family: "Bodoni Moda", 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", serif;
	overflow: hidden;
}
#message h2{
	font-size: 3.2rem;
	text-align: center;
	margin-bottom: 4rem;
	position: relative;
	z-index: 2;
	opacity: 0;
	transform: translateY(2rem);
	transition-delay: .6s;
	transition: .4s all ease;
}
#message .inner{
	//max-width: 80rem;
}
#message .txt-area{
	padding-top: 6rem;
	padding-bottom: 6rem;
	margin: auto;
	max-width: 68rem;
	overflow: hidden;
	position: relative;
}
#message .txt-area:before{
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	background: #5986a7;
	box-shadow: 0 0 4rem rgba(0,0,0,.3);
	z-index: 1;
	transition: .3s all ease;
	transform: scaleX(0);
	transform-origin: left top;
}
#message.scrolled .txt-area:before{
	transform: scaleX(1);
}
#message p{
	position: relative;
	z-index: 2;
	margin: 0 auto;
	max-width: 48rem;
	letter-spacing: 0;
	opacity: 0;
	transform: translateY(2rem);
	transition: .4s all ease;
}

#message h2{
	transition-delay: .3s;
}
#message p:nth-of-type(1){
	transition-delay: .5s;
}
#message p:nth-of-type(2){
	transition-delay: .7s;
}
#message p:nth-of-type(3){
	transition-delay: .9s;
}
#message.scrolled .txt-area.shown p,
#message.scrolled .txt-area.shown h2,
.scrolled .shown .kurukuru{
	opacity: 1;
	transform: translateY(0);
}
#message p:not(:last-of-type){
	margin-bottom: 2em;
}
.kurukuru{
	float: right;
	z-index: 2;
	width: 8rem;
	height: 8rem;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: 10rem;

	margin-top: 1rem;
	opacity: 0;
	transform: translateY(2rem);
	transition: .4s all ease;
	transition-delay: 1.1s;
}
.kurukuru img{
	display: block;
/*
	width: 3.3rem;
*/
	width: 2.7rem;
	position: relative;
	z-index: 9;
}
.kurukuru:before{
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	background: url(../images/kurukuru-icon01.svg);
	background-size: 100% auto;
	z-index: 1;
}

.sen{
	position: absolute;
	height: .3rem;
	width: 125%;
	left: 0;
	right: 0;
	margin: auto;
	transition: 1.2s all ease;
}
.sen.pink{
	background: #fb6cc4;
	top: 18%;
	transform: rotate(15deg) scaleX(0);
	transform-origin: left top;
	transition-delay: .6s;
}
.sen.midori{
	background: #21b16c;
	top: 7%;
	transform: rotate(-7deg) scaleX(0);
	transform-origin: right top;
	transition-delay: 1.2s;
	left: -12.5%;
}
.sen.kiiro{
	background: #fecb20;
	bottom: 45%;
	transform: rotate(3deg) scaleX(0);
	transform-origin: left top;
	transition-delay: 1.8s;
}
.shown.sen.pink{
	transform: rotate(15deg) scaleX(1);
}
.shown.sen.midori{
	transform: rotate(-7deg) scaleX(1);
}
.shown.sen.kiiro{
	transform: rotate(3deg) scaleX(1);
}



@media screen and (max-width: 768px){
	#message h2{
		font-size: 1.6rem;
		margin-bottom: 1.6rem;
	}
	#message .inner{
		max-width: 100%;
		padding-left: 3rem;
		padding-right: 3rem;
	}
	#message .txt-area{
		padding: 3rem;
	}
	#message p:not(:last-of-type){
		margin: 0 auto 1em;
	}
	.kurukuru{
		margin-right: 0;
		width: 5rem;
		height: 5rem;
	}
	.kurukuru img{
		width: 33.75%;
	}








	.sen{
		height: .2rem;
	}
	.sen.pink{
		top: 30%;
		transform: rotate(30deg) scaleX(0);
	}
	.sen.midori{
		top: 34%;
		transform: rotate(-12deg) scaleX(0);
	}
	.sen.kiiro{
		bottom: 45%;
		transform: rotate(3deg) scaleX(0);
	}



	.shown.sen.pink{
		top: 30%;
		transform: rotate(30deg) scaleX(1);
	}
	.shown.sen.midori{
		top: 34%;
		transform: rotate(-12deg) scaleX(1);
	}
	.shown.sen.kiiro{
		bottom: 45%;
		transform: rotate(3deg) scaleX(1);
	}
}

/* +++++++++++++++#nagare+++++++++++++ */
#nagare{
	background-image: url(../images/app-nagare-txt01.png),linear-gradient(90deg, #e9faf4, #e9faf4 50%, #fef5d6 50%, #fef5d6 100%);
	background-repeat: no-repeat, no-repeat;
	background-position: center bottom -40%, center center;
	background-size: 100% auto, 100% auto;
}
#nagare .pic{
	padding-left: 3.6rem;
	padding-right: 3.6rem;
}
@media screen and (max-width: 768px){
	#nagare{
		background-position: center bottom, center center;
	}
	#nagare .pic{
		padding-left: 0;
		padding-right: 0;
	}
}

/* +++++++++++++++#touroku+++++++++++++ */
#touroku{
	background: url(../images/app-touroku-pic01.jpg) no-repeat;
	background-position: center top;
	background-size: cover;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	height: 74rem;
	padding-bottom: 22rem;
}
#touroku h2{
	font-size: 3.2rem;
	max-width: 60rem;
	text-align: center;
	padding: .25em 0;
	border: .3rem solid #000;
	width: 100%;
}
#touroku ul{
	display: flex;
	justify-content: space-between;
	max-width: 80rem;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}
#touroku ul li{
	width: calc(50% - 4rem);
}
#touroku li a{
	border-radius: 1rem;
	background: #fff;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	height: 10rem;
	position: relative;
	padding: 0 0 0 3rem;
	box-shadow: .5rem -.5rem 0 0 #000;
}
#touroku li a:after{
	content: "";
	display: block;
	width: 1rem;
	height: 1rem;
	border-top: .3rem solid #000;
	border-right: .3rem solid #000;
	transform: rotate(45deg);
	position: absolute;
	right: 3rem;
	top: 0;
	bottom: 0;
	margin: auto;
}
#touroku li a:hover{
	box-shadow: -.5rem .5rem 0 0 #000;
	opacity: 1;
}
#touroku li h3{
	font-size: 1.8rem;
}

@media screen and (max-width: 768px){
	#touroku{
		height: 37rem;
		padding-bottom: 8rem;
	}
	#touroku h2{
		font-size: 2rem;
		max-width: 24rem;
		padding: .25em 0;
		border: .2rem solid #000;
	}
	#touroku ul{
		max-width: 100%;
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}
	#touroku ul li{
		width: calc(50% - .5rem);
	}
	#touroku li a{
		border-radius: .5rem;
		position: relative;
		padding: 0 0 0 1.5rem;
		box-shadow: .2rem -.2rem 0 0 #000;
		height: 6rem;
	}
	#touroku li a:after{
		width: .4rem;
		height: .4rem;
		border-top: .2rem solid #000;
		border-right: .2rem solid #000;
		right: 1.5rem;
	}
	#touroku li h3{
		font-size: 1.4rem;
	}
	#touroku li p{
		font-size: 1rem;
		line-height: 1.3;
		margin-top: .2rem;
	}
}

/* +++++++++++++++#kinou+++++++++++++ */
#kinou{
	padding-bottom: 6rem;
	background: url(../images/app-kinou-bg01.jpg) no-repeat;
	background-position: left 20% bottom 4rem;
}
#kinou h2,
#plan h2,
#tejun h2{
	font-size: 3.2rem;
	text-align: center;
	margin-bottom: 4rem;
}
#kinou h2:after,
#plan h2:after,
#tejun h2:after{
	content: "";
	display: block;
	width: 5rem;
	height: .1rem;
	background: #000;
	margin: 1rem auto 0;
	transition: .4s all ease;
	transition-delay: .3s;
	transform: scaleX(0);
	transform-origin: left center;
}
#kinou h2.kanryou:after,
#plan h2.kanryou:after,
#tejun h2.kanryou:after{
	transform: scaleX(1);
}
#kinou h3{
	text-align: center;
	font-size: 2.6rem;
	margin-bottom: 4rem;
}
#kinou h3:after{
	content: "";
	display: block;
	width: .4rem;
	height: 8rem;
	border-left: .1rem solid #000;
	margin: 1rem auto 0;
}
#kinou ul{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	max-width: 68rem;
}
#kinou li{
	width: 20rem;
	height: 20rem;
	border-radius: 2rem;
	overflow: hidden;
	margin-bottom: 4rem;
}
#kinou li a{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background: #4caf50;
	padding: 3rem 0;
	width: 100%;
	height: 100%;
}
#kinou li a:after{
	content: "";
	display: block;
	width: 2rem;
	height: 2rem;
	border-right: .3rem solid #fff;
	border-bottom: .3rem solid #fff;
	transform: rotate(45deg);
	margin: 0 auto;
}
#kinou li h4{
	color: #fff;
	font-size: 1.8rem;
	padding: 1rem 0 1.5rem;
}
#kinou li .pic{
	height: 40%;
}
#kinou li .pic img{
	height: 100%;
	width: auto;
	margin: auto;
}

@media screen and (max-width: 768px){
	#kinou{
		padding-bottom: 4rem;
		background-size: 105% auto;
		background-position: center bottom 0;
	}
	#kinou h2,
	#plan h2,
	#tejun h2{
		font-size: 2rem;
		margin-bottom: 2rem;
	}
	#kinou h2:after,
	#plan h2:after,
	#tejun h2:after{
		width: 4rem;
		height: .1rem;
		margin: .5rem auto 0;
	}
	#kinou h3{
		text-align: center;
		font-size: 1.8rem;
		margin-bottom: 2rem;
	}
	#kinou h3:after{
		width: .2rem;
		height: 5rem;
		margin: .5rem auto 0;
	}
	#kinou ul{
		max-width: 100%;
	}
	#kinou li{
		width: 9rem;
		height: 9rem;
		border-radius: 1rem;
		margin-bottom: 1rem;
	}


















	#kinou li a{
		padding: 1.5rem 0;
		text-align: center;
		position: relative;
		justify-content: space-between;
	}
	#kinou li a:after{
		width: .8rem;
		height: .8rem;
		border-right: .2rem solid #fff;
		border-bottom: .2rem solid #fff;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 1rem;
		margin: auto;
	}
	#kinou li h4{
		font-size: 1.1rem;
		padding: 0;
		height: 2.4rem;
		margin-bottom: 1rem;
		line-height: 1.2;
		display: flex;
		align-items: center;
	}
	#kinou li .pic{
		height: 33%;
	}
}

/* +++++++++++++++.popup共通+++++++++++++ */
.popup-outer{
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background: rgba(0,0,0,.85);
	z-index: 999999;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: .3s all ease;
	visibility: hidden;
	opacity: 0;
}
.popup-outer.active{
	visibility: visible;
	opacity: 1;
}
.popup{
	width: 80rem;
	max-height: calc(100% - 7.2rem);
	padding: 4.8rem 3.6rem;
	border-radius: 2rem;
	border: .2rem solid #fff;
	background: #5d737d;
	overflow: auto;
	color: #fff;
	padding: 3.6rem;
	position: relative;
}
.popup::-webkit-scrollbar{
	display: none;
}
.popup h5{
	font-size: 2rem;
	border-bottom: .3rem solid #fff;
	padding-bottom: 1rem;
}
.popup h6{
	font-size: 1.8rem;
	margin-top: 4rem;
	padding-bottom: 1rem;
	margin-bottom: 1rem;
	border-bottom: .1rem solid #fff;
}
.popup p{
	text-indent: 1em;
}
.popup-close{
	position: absolute;
	right: 1.2rem;
	top: 1.2rem;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background: #fff;
}
.popup-close:before,
.popup-close:after{
	content: "";
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	width: 50%;
	height: .3rem;
	margin: auto;
	background: #5d737d;
	cursor: pointer;
}
.popup-close:before{
	transform: rotate(45deg);
}
.popup-close:after{
	transform: rotate(-45deg);
}

@media screen and (max-width: 768px){
	.popup{
		max-width: calc(100% - 3rem);
		max-height: calc(100% - 3rem);
		padding: 3rem 1.5rem;
		border-radius: 1rem;
	}
	.popup h5{
		font-size: 1.8rem;
		border-bottom: .2rem solid #fff;
		padding-bottom: .8rem;
	}
	.popup h6{
		font-size: 1.6rem;
		margin-top: 2.5rem;
		padding-bottom: .8rem;
		margin-bottom: .8rem;
	}
	.popup-close{
		width: 2.6rem;
		height: 2.6rem;
	}
	.popup-close:before,
	.popup-close:after{
		height: .2rem;
	}
}
/* +++++++++++++++#plan+++++++++++++ */
#plan table{
	max-width: 80rem;
}
#plan th,
#plan td{
	font-weight: 700;
	text-align: center;
	padding: .3em;
	line-height: 1.4;
	font-size: 1.4rem;
	width: 33.333%;
	border: .1rem solid #ccc;
	height: 5rem;
}








#plan td span{
	padding-left: .5em;
}
#plan td span.txt-red{
	display: block;
	font-size: 65%;
	letter-spacing: 0;
	margin-top: 0.5em;
	color: #f00;
	text-decoration: underline;
	padding: 0;
}
#plan th{
	background: #fafafa;
}
#plan th span{
	font-size: 75%;
	display: block;
}
#plan tr:nth-of-type(1) th{
	background: #eee;
	overflow: hidden;
	position: relative;
}
.shasen{
	position: relative;
}
.shasen span:nth-of-type(1){
	position: absolute;
	right: .5em;
	top: .5em;
	font-size: 1.4rem !important;
}
.shasen span:nth-of-type(2){
	position: absolute;
	left: .5em;
	bottom: .5em;
	font-size: 1.4rem !important;
}
.shasen:before{
	width: 200%;
	height: 0;
	position: absolute;
	left: 0;
	top: 0;
	transform: rotate(10.2deg);
	transform-origin: left top;
	content: "";
	display: block;
	border-bottom: .1rem solid #ccc;
}
#plan td.maru{
	color: #4caf50;
	font-size: 150%;
}
@media screen and (max-width: 768px){
	#plan table{
		max-width: calc(100% - 3rem);
	}
	#plan th,
	#plan td{
		padding: .5rem;
		line-height: 1.3;
		font-size: 1.1rem;
		height: 3rem;
	}

	.shasen span:nth-of-type(1){
		top: .2em;
		right: .2em;
		font-size: 1.1rem !important;
	}
	.shasen span:nth-of-type(2){
		bottom: .2em;
		left: .2em;
		font-size: 1.1rem !important;
	}
	.shasen:before{
		transform: rotate(20deg);
	}
}


/* +++++++++++++++#faq+++++++++++++ */
#faq ul{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
#faq li{
	width: calc(50% - 2rem);
	margin-bottom: 4rem;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	text-align: center;
	border: .1rem solid #000;
	position: relative;
	text-align: center;
	padding: 2rem 0;
}
#faq li:before{
	content: "";
	display: block;
	width: 1.0rem;
	height: 100%;
	background: #000;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 9;
}

#faq h3:before,
#faq h3:after{
	content: "";
	display: block;
	width: 2em;
	height: .1rem;
	background: #000;
	margin: 0 .5em;
}
#faq h3{
	text-align: center;
	font-size: 2rem;
	line-height: 1.3;
	display: flex;
	align-items: center;
	justify-content: center;

	background: #fff;
	width: 100%;
}
#faq li p{
	width: 100%;
	margin-bottom: 1rem;
}
.faq-btn{
	width: 14rem;
	height: 5rem;
	border-radius: .5rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-weight: 700;
	background: #4caf50;
	margin: 0 1rem;
	color: #fff;
}
.faq-btn.hogosha{
	background: #ffcd04;
}
.faq-btn:after{
	content: "";
	display: block;
	width: .8rem;
	height: .8rem;
	border-bottom: .2rem solid #fff;
	border-right: .2rem solid #fff;
	transform: rotate(45deg);
}
#faq dl{
	border-bottom: .1rem solid #fff;
	padding: 2rem 0;
}
#faq dt{
	font-size: 1.8rem;
	font-weight: 700;
	padding-right: 3rem;
	position: relative;
}
.faq-toggle:before{
	content: "+";
	display: block;
	font-size: 250%;
	font-family: 'Barlow Condensed', 游ゴシック, YuGothic, メイリオ, Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN",  sans-serif;
}
.faq-toggle.opened:before{
	content: "-";
}
.faq-toggle{
	position: absolute;
	right: 0;
	top: -.75em;
	cursor: pointer;
	font-weight: 400;
}
#faq dd{
	font-size: 1.4rem;
	display: none;
	padding-top: 1.5rem;
}
#faq dd .caption{
	display: block;
	text-indent: -1em;
	padding-left: 1em;
}
#faq .toggle-btn{
	text-align: center;
	margin-top: 2rem;
	cursor: pointer;
}
#faq .toggle-btn:after{
	content: "";
	display: block;
	width: 1.2rem;
	height: 1.2rem;
	border-right: .2rem solid #fff;
	border-bottom: .2rem solid #fff;
	transform: rotate(45deg);
	margin: 0 auto;
}
.toggle-area{
	display: none;
}
@media screen and (max-width: 768px){
	#faq dl{
		padding: 1rem 0;
	}
	#faq dt{
		font-size: 1.4rem;
		padding-right: 1.5rem;
	}
	#faq dd{
		font-size: 1.2rem;
		padding-top: .7rem;
	}
}

/* +++++++++#koe++++++++++ */
#koe{
	background-color: #e8e8e8;
	background-image: url(../images/service-outline-bg01.png);
	background-repeat: repeat-x;
	background-size: auto 25rem;
	background-position: left bottom;
	overflow: hidden;
}
#koe h2{
	font-size: 3.2rem;
	margin-bottom: 4rem;
}
#koe h2 .en{
	display: block;
	font-size: 75%;
	margin-top: 1rem;
	opacity: .5;
	line-height: 1;
}
#koe h3{
	text-align: center;
	font-size: 2.6rem;
	margin-bottom: 2.4rem;
}
.review-outer{
	display: flex;
	justify-content: space-between;
}
.review{
	width: calc(50% - 2rem);
}
#koe .inner{
	z-index: 99999;
}
#koe .inner:after{
	color: #fff;
	content: "VOICE";
	display: block;
	font-size: 16rem;
	font-family: "Roboto Slab" , Garamond , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝B" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
}
.review li{
	border: .3rem solid #000;
	padding: 1.5rem 3rem;
	position: relative;
	margin-bottom: 4rem;
	min-height: 18rem;
	display: flex;
	align-items: center;
	position: relative;
}
.review li:before{
	content: "";
	display: block;
	width: 3.5rem;
	height: 2rem;
	background-image: url(../images/midori-kagikakko.png);
	background-repeat: no-repeat;
	background-size: 100% auto;
	position: absolute;
	right: 3rem;
	top: -1rem;
}
.review li:after{
	content: "";
	display: block;
	width: 3.5rem;
	height: 2rem;
	background-image: url(../images/midori-kagikakko.png);
	background-repeat: no-repeat;
	background-size: 100% auto;
	position: absolute;
	left: 3rem;
	bottom: -1rem;
	transform: rotate(180deg);
}
.review.hogosha li:before,
.review.hogosha li:after{
	background-image: url(../images/daidai-kagikakko.png);
}
.txt-slide{
	position: absolute;
	left: calc(50% + 30rem);
	top: 0;
	height: 100%;
	width: 20rem;
	z-index: 1;
}
@media screen and (max-width: 768px){
	#koe{
		background-size: auto 8rem;
	}
	#koe h2{
		font-size: 2rem;
		margin-bottom: 2rem;
	}

	#koe h3{
		font-size: 1.8rem;
		margin-bottom: 2rem;
	}
	.review-outer{
		display: block;
	}
	.review{
		width: 100%;
	}

	#koe .inner:after{
		font-size: 5rem;
	}
	.review.jigyosha{
		margin-bottom: 4rem;
	}
	.review li{
		border: .2rem solid #000;
		padding: 2rem 2rem;
		position: relative;
		margin-bottom: 3rem;
		min-height: auto;
	}
	.review li:before{
		right: 2rem;
	}
	.review li:after{
		left: 2rem;
	}
	.txt-slide{
		position: absolute;
		left: auto;
		right: 1.5rem;
		top: 0;
		height: 100%;
		width: 10rem;
		z-index: 1;
	}
}
















/* +++++++++#koe-sono2++++++++++ */
#koe-sono2{
	padding-top: 10rem;
}
.koe-title-area{
	background: url(../images/koe-background.png) repeat-x;
	background-position: center top;
	background-size: auto calc(100% - 2.6rem);
	height: 50rem;
	position: relative;
	padding-bottom: 5rem;
}
.koe-title-area:after{
	content: "";
	display: block;
	width: 100%;
	height: 2.6rem;
	background: url(../images/koe-border01.png) repeat-x;
	background-position: center center;
	background-size: auto 100%;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
}
.koe-title-area .inner{
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 100%;
}
.koe-title-area h2{
	width: 50%;
}
.koe-title-area h2 img{
	display: block;
	width: 100%;
}
.koe-title-area .pic{
	width: 22rem;
	margin-right: 16.5rem;;
}
.koe-list{
	background: url(../images/koe-bg02.png) no-repeat;
	background-position: center center;
	background-size: 110rem auto;
	padding-top: 4rem;
	padding-bottom: 4rem;
	min-height: 109rem;
}
.koe-list .inner{
	display: flex;
	justify-content: space-between;
}
.koes{
	padding: 4rem;
	width: calc(50% - 4rem);
}
.koes h3{
	text-align: center;
	font-size: 2.6rem;
	margin-bottom: 2rem;
	line-height: 1;
}
.koes ul{
	max-width: 31.5rem;
	margin: 0 auto;
}
.koes ul li{
	margin-top: 4rem;
	width: 100%;
	height: 28rem;
	padding: 3.5rem 2.5rem 0 3.5rem;
	background: url(../images/koe-fukidashi.png) no-repeat;
	background-size: 100% auto;
	background-position: center top;
	line-height: 2.25;
}

@media screen and (max-width: 768px){
	#koe-sono2{
		padding-top: 3rem;
	}
	.koe-title-area{
		background-image: url(../images/sp-koe-background.png);
		background-size: auto calc(100% - .5rem);
		height: 14rem;
		padding-bottom: .5rem;
	}
	.koe-title-area:after{
		height: .5rem;
	}
	.koe-title-area h2{
		width: 72%;
	}
	.koe-title-area .pic{
		width: 20%;
		margin-right: 0;;
	}
	.koe-list{
		background-size: 150% auto;
		background-position: center center;
		min-height: auto;
		margin-bottom: -2rem;
	}
	.koes{
		padding: 0;
		width: calc(50% - .5rem);
	}
	.koes h3{
		font-size: 1.6rem;
		margin-bottom: 2rem;
	}
	.koes ul{
		max-width: 100%;
	}
	.koes ul li{
		font-size: 1rem;
		margin-top: 1rem;
		width: 100%;
		height: 12.5rem;
		padding: 1rem 1.5rem 0 1.5rem;
		background: url(../images/koe-fukidashi.png) no-repeat;
		background-size: 100% auto;
		line-height: 1.5;
		letter-spacing: -.025em;
	}
}

/* +++++++++見出し++++++++++ */
.sec-ttl04{
	display: block;
	text-align: center;
}
.sec-ttl04 .en{
	display: block;
	font-size: 75%;
	margin-top: 1rem;
	opacity: .5;
	line-height: 1;
}










/* +++++++++#contact++++++++++ */
#contact{
	background: #4caf50;
}
#contact .sec-ttl04{
	color: #fff;
}
#contact .sec-ttl04 .en{
	opacity: 1;
}

#contact .inner{
	background: #fff;
	padding: 4rem;
}
form table{
	width: 100%;
	text-align: left;
	line-height: 2;
	margin: auto;
}
form th{
	border-bottom: .1rem solid #333;
	width: 34%;
	vertical-align: top;
	padding: 3rem 1.5rem;
}
form td{
	border-bottom: .1rem solid #dfdfdf;
	width: 66%;
	padding: 3rem 1.5rem;
	position: relative;
}
form tr:nth-of-type(1) th{
	border-top: .1rem solid #333;
}
form tr:nth-of-type(1) td{
	border-top: .1rem solid #dfdfdf;
}
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="checkbox"],
textarea,
button{
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	-o-appearance: none;
	display: block;
	font-family: 'Noto Sans JP', 游ゴシック, YuGothic, メイリオ, Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN",  sans-serif;
	border-radius: 0;
}
form{
	font-size: 1.4rem;
}
#name,
#name2,
#company,
#facility,
#email,
#tel-num{
	width: 100%;
	border: .1rem solid #dfdfdf;
	height: 4rem;
	display: flex;
	align-items: center;
	background: #fafafa;
	padding: 0 .5em;
}
select{
	width: 100%;
	border: .1rem solid #dfdfdf;
	height: 4rem;
	display: flex;
	align-items: center;
	background-color: #fafafa;
	padding: 0 .5em;
	font-family: 'Noto Sans JP', 游ゴシック, YuGothic, メイリオ, Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN",  sans-serif;
}







td .flex{
	display: flex;
	justify-content: space-between;
}






























td .flex input{
	width: calc(50% - .5em) !important;
}
#comment{
	width: 100%;
	border: .1rem solid #dfdfdf;
	background: #fafafa;
	height: 20rem;
	padding: .5em;
}
.privacy-policy{
	margin: 4rem 0;
	line-height: 2;
}
.privacy-policy h3{
	font-size: 1.6rem;
	margin-bottom: .5em;
}
.confirm-area{
	background: #fafafa;
	padding: 1.5em 1em;
	display: flex;
}






#confirm,
input[type='checkbox']{
	display: block;
	width: 2.5rem;
	height: 2.5rem;
	border: .1rem solid #dfdfdf;
	background: #fff;
	position: relative;
	margin-right: .5rem;
}
td input[type='checkbox']{
	background: #fafafa;
}
.btn{
	border: none;
	cursor: pointer;
	transition: .3s all ease;
	font-family: 'Noto Sans JP', 游ゴシック, YuGothic, メイリオ, Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN",  sans-serif;
	font-size: 1.6rem;
}
.btn:hover{
	opacity: .7;
	filter: alpha(opacity=70);
}
#confirm:checked:after,
input[type='checkbox']:checked:after{
	content: "";
	display: block;
	width: 90%;
	height: 90%;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	background: url(../images/contact-check.png) no-repeat;
	background-position: center center;
	background-size: 100% auto;
}
form th span{
	float: right;
	display: inline-block;
	padding: .2em .5em;
	background: rgba(227,238,49,1);
	font-size: 80%;
}















label{
	display: flex;
	align-items: flex-start;
}
td label:not(:last-of-type){
	margin-bottom: 1rem;
}

@media screen and (max-width: 768px){
	#contact{
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}
	#contact .inner{
		padding: 3rem 1.5rem;
	}
	form table,
	form tbody,
	form tr{
		display: block;
		width: 100%;
	}
	form th{
		display: block;
		width: 100%;
		border-bottom: none;
		padding: 1.5rem 0;
	}
	form td{
		display: block;
		width: 100%;
		border-bottom: .1rem solid #dfdfdf;
		padding: 0 0 1.5rem;
	}
	form tr:nth-of-type(1) th{
		border-top: .1rem solid #dfdfdf;
	}
	form tr:nth-of-type(1) td{
		border-top: none;
	}






	form{
		font-size: 1.1rem;
	}
	#name,
	#name2,
	#company,
	#facility,
	#email,
	#tel-num{
		height: 3rem;
	}
	select{
		height: 3rem;
		appearance: none;
		-webkit-appearance: none;
		-moz-appearance: none;
		-ms-appearance: none;
		-o-appearance: none;
		background: url(../images/app-arrow02.svg) no-repeat;
		background-size: .8rem auto;
		background-position: right .5em center;
		color: #000;
	}
	#comment{
		height: 15rem;
	}
	.privacy-policy{
		margin: 4rem 0;
	}
	.privacy-policy h3{
		font-size: 1.4rem;
		margin-bottom: .5em;
	}
	#confirm,
	input[type='checkbox']{
		display: block;
		width: 2rem;
		height: 2rem;
	}
	.btn{
		border: none;
		cursor: pointer;
		transition: .3s all ease;
		font-family: 'Noto Sans JP', 游ゴシック, YuGothic, メイリオ, Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN",  sans-serif;
		font-size: 1.4rem;
	}
	.confirm-area p{
		width: calc(100% - 2rem);
	}
}


/* +++++++++ app-download-btn ++++++++++ */
main{
	overflow: visible;
}
.app-download-btn{
	background: rgba(255,255,255, .8);
	border-top: 1px solid #ddd;
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
	position: sticky;
	bottom: 0;
	left: 0;
	z-index: 99999;
}
.app-download-btn ul{
	display: flex;
	justify-content: center;
}
.app-download-btn li{
	margin: 0 .75rem;
	height: 5rem;
}

.app-download-btn a,
.app-download-btn img{
	display: block;
	height: 100%;
}



@media screen and (max-width: 768px){
	#faq h3:before,
	#faq h3:after{
		width: .75em;
	}
	#faq h3{
		font-size: 1.3rem;
		padding-bottom: 1rem;
		line-height: 1;
	}
	#faq li{
		width: calc(50% - .5rem);
		margin-bottom: 2rem;
		padding: 1.5rem 0 .5rem;
	}
	#faq li:before{
		width: .5rem;
	}
	#faq li p{
		line-height: 1.4;
		font-size: 1.0rem;
		padding: 0 .5rem 0 1rem;
	}

	.faq-btn{
		width: calc(100% - 2rem);
		height: 3rem;
		border-radius: .2rem;
		margin: 0 0 1rem;
	}
	.faq-btn:after{
		width: .4rem;
		height: .4rem;
		border-bottom: .1rem solid #fff;
		border-right: .1rem solid #fff;
	}


	.app-download-btn{
		padding-top: 1rem;
		padding-bottom: 1rem;
	}
	.app-download-btn ul{
		justify-content: space-between;
	}
	.app-download-btn li{
		margin: 0;
		height: 4.6rem;
	}
}





/* ++++++++++++shinbun+++++++++++++ */
#shinbun{
	text-align: center;
	background: linear-gradient(90deg, #e5e4e2, #e5e4e2 calc(50% + 20rem), #edecea calc(50% + 20rem), #edecea 100%);
}
#shinbun .inner{
	max-width: 60rem;
	z-index: 9;
}
#shinbun h2{
	border-bottom: .1rem solid #333;
	font-size: 2.2rem;
	padding-bottom: 1.5rem;
	margin-bottom: 4rem;
	display: flex;
	justify-content: center;
	width: 100%;
	align-items: center;
}
#shinbun h2 img{
	width: 1.5em;
	display: block;
	margin-left: 1.5em;
	margin-right: -3em;
}
#shinbun h2 span{
	display: flex;
}
#shinbun h2 span span{
	opacity: 0;
	transform: translateY(.8em);
	transition: .2s all ease;
	display: block;
}
#shinbun h2 img{
	opacity: 0;
	//transform: translateY(.8em);
	transition: .4s all ease;
}
.scrolled#shinbun h2 span span,
.scrolled#shinbun h2 img{
	opacity: 1;
	transform: translateY(0);
}
.scrolled#shinbun h2 span span:nth-of-type(2){
	transition-delay: .1s;
}
.scrolled#shinbun h2 span span:nth-of-type(3){
	transition-delay: .2s;
}
.scrolled#shinbun h2 span span:nth-of-type(4){
	transition-delay: .3s;
}
.scrolled#shinbun h2 span span:nth-of-type(5){
	transition-delay: .4s;
}
.scrolled#shinbun h2 span span:nth-of-type(6){
	transition-delay: .5s;
}
.scrolled#shinbun h2 span span:nth-of-type(7){
	transition-delay: .6s;
}
.scrolled#shinbun h2 span span:nth-of-type(8){
	transition-delay: .7s;
}
.scrolled#shinbun h2 span span:nth-of-type(9){
	transition-delay: .8s;
}
.scrolled#shinbun h2 span span:nth-of-type(10){
	transition-delay: .9s;
}
.scrolled#shinbun h2 span span:nth-of-type(11){
	transition-delay: 1s;
}
.scrolled#shinbun h2 img{
	transition-delay: 1.3s;
}
.pic.shinbun{
	max-width: 600px;
	padding: 4rem;
	margin: 0 auto;
	position: relative;
}
.pic.shinbun:before{
	content: "";
	display: block;
	width: 100%;
	height: .5rem;
	border-top: .1rem solid #333;
	border-bottom: .1rem solid #333;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	box-sizing: border-box;
}
#shinbun p{
	font-weight: 700;
	padding-top: 1.5rem;
	border-top: .1rem solid #333;
}
#shinbun:after{
	content: "";
	display: block;
	width: 100%;
	height: 30rem;
	background: rgba(227,226,224,.5);
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
}




/*
#shinbun h2 span{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	transform: translateX(1.5em);
}

#shinbun h2 span img{
	width: 1.5em;
	display: block;
	margin-left: 1.5em;
}
*/
@media screen and (max-width: 768px){
	#shinbun{
		background: linear-gradient(90deg, #e5e4e2, #e5e4e2 62.8%, #edecea 62.8%, #edecea 100%);
	}
	#shinbun .inner{
		max-width: 100%;
	}
	#shinbun h2{
		font-size: 1.8rem;
		padding-bottom: 1rem;
		margin-bottom: 2.4rem;
	}
/*
	#shinbun h2 span{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
	}
	#shinbun h2 span img{
		display: block;
	}
*/
	.pic.shinbun{
		max-width: 100%;
		padding: 3rem 2.4rem;
	}
	.pic.shinbun:before{
		height: .3rem;
	}
	#shinbun p{
		padding-top: 1rem;
	}
	#shinbun:after{
		height: 18rem;
	}
}






/* ++++++++++++インストール・使い方のあたりが変更になったのでスタイルを追加+++++++++++++ */
#tejun .pic{
	max-width: 78.5rem;
	margin: 0 auto;
}
.sec.setsumeisho{
	padding-top: 0;
}






.mail-chuui{
	width: 33%;
	margin: 1em auto 0;
}


@media screen and (max-width: 768px){
	.mail-chuui{
		margin: .5em auto 0;
	}
}


.kiiro.sec.setsumeisho{
	padding-bottom: 0;
}
.setsumeisho .title-area{
	text-align: center;
	background: #4caf50;
	padding: 3rem 0;
	color: #fff;
	margin-bottom: 4rem;
}
.pic-area{
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}
.pic-area .fukidashi{
	width: 32.5%;
	margin-top: 1rem;
}
.padding-bottom0{
	padding-bottom: 0 !important;
}
.kiiro.setsumeisho .title-area{
	background: #ffcb2e;
}
.setsumeisho h2{
	font-size: 3.2rem;
	line-height: 1;
	text-shadow: .1rem .1rem 0 #000,-.1rem .1rem 0 #000,.1rem -.1rem 0 #000,-.1rem -.1rem 0 #000;
	display: flex;
	justify-content: center;
	align-items: center;
}
.title-area a{
	display: block;
	width: 4rem;
	height: 4.3rem;
	position: absolute;
	right: 4rem;
	top: 0;
	bottom: 0;
	margin: auto;
}
.title-area a img{
	display: block;
	width: 100%;
}
@media screen and (max-width: 768px){
	.setsumeisho .title-area{
		padding: 1rem 0;
		margin-bottom: 2rem;
	}
	.setsumeisho h2{
		font-size: 1.2rem;
		line-height: 1;
	}
	.sec.setsumeisho{
		padding-bottom: 2.5rem;
	}
	.pic-area .fukidashi{
		width: 54%;
	}


	.title-area a{
		width: 2rem;
		height: 2.2rem;
		right: .5rem;
	}
}

@media screen and (max-width: 768px){
	.sec{
		padding-top: 3rem;
		padding-bottom: 3rem;
	}
}

/* ++++++++++++PDFリンク追加+++++++++++++ */
.pdf-icon{
	display: inline-block;
	height: 1.5em;
	vertical-align: bottom;
}
.pdf-icon img{
	display: block;
	height: 100%;
	width: auto;
}

/* ++++++++++++FAQ本文中にアイコンを追加+++++++++++++ */
.kurulinpa{
	display: inline-block;
	width: 1em;
}

/* ++++++++++++animation+++++++++++++ */
#koe h2 .en span{
	opacity: 0;
}
#koe h2 .en span.sa:nth-of-type(2){
	transition-delay: .3s;
}
#koe h2 .en span.sa:nth-of-type(3){
	transition-delay: .6s;
}
#koe h2 .en span.sa:nth-of-type(4){
	transition-delay: .9s;
}
#koe h2 .en span.sa:nth-of-type(5){
	transition-delay: 1.2s;
}
#koe h2 .en span.sa{
	opacity: 1;
}
.kurukuru:before{
	animation-name: kurukuru;
	animation-duration: 18s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}
@keyframes kurukuru{
	0%{
		transform: rotate(0deg);
	}
	100%{
		transform: rotate(360deg);
	}
}