@charset "utf-8";

/* icon
================================================== */
/* icon answer */
.icon06::before {
	font-family: 'Material Symbols Outlined';
	content: "\e94c";
	vertical-align: -2px;
	margin-right: 0.2em;
	font-weight: 300;
}
/* icon question */
.icon07::before {
	font-family: 'Material Symbols Outlined';
	content: "\f0e2";
	vertical-align: -2px;
	margin-right: 0.2em;
	font-weight: 300;
}
/* wordArea
================================================== */
#wordArea {
	position: relative;
	max-width: 1100px;
	margin: 0 auto;
	padding-top: 70px;
}
@media screen and (max-width: 1100px) {
	#wordArea {
		padding-top: 60px;
	}
}
@media screen and (max-width: 400px) {
	#wordArea {
		padding-top: 40px;
	}
}

/* wordBox
================================================== */
.wordBox {
	background-color: #ea5205;
	max-width: 1100px;
	margin: 0 auto 10px;
	border-radius: 3px; 
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
	background: linear-gradient(-45deg,#ff681b 25%, #ea5205 25%,#ea5205 50%, #ff681b 50%,#ff681b 75%, #ea5205 75%,#ea5205);
	background-size: 600px 600px;
	animation: anime_stripe_1 25s infinite linear;
}
@keyframes anime_stripe_1 {
	0% {  background-position-x: 0;}
	100% {  background-position-x: -600px;}
}
@media screen and (max-width: 1100px) {
	.wordBox {
		margin: 0;
		border-radius: 0; 
		-webkit-border-radius: 0;
		-moz-border-radius: 0;
	}
}
.wordBox h2{
	color: #fff;
	font-size: 180%;
	text-align: center;
	padding: 1.5% 0;
	margin: 0;
	white-space: nowrap;
}
.wordBox h2 br{
	display: none;
}
@media screen and (max-width: 1100px) {
	.wordBox h2 {
		font-size: 2.5vw;
	}
}
@media screen and (max-width: 600px) {
	.wordBox h2 {
		font-size: 100%;
		display: inherit;
		text-align: center;
		white-space: normal;
	}
	.wordBox h2 br{
		display: block;
	}
}
@media screen and (max-width: 400px) {
	.wordBox h2 {
		font-size: 90%;
	}
}

/* topArea
================================================== */
#topArea {
	position: relative;
	max-width: 1100px;
	margin: 0 auto;
}
#mainBg {
	position: relative;
	z-index: 0;
	width: 100%;
}
#topTit {
	position: absolute;
	z-index: 3;
	width: 46%;
	top: 10%;
	left: 12%;
}
@media screen and (max-width: 600px) {
	#topTit {
		width: 66%;
		top: 5%;
		left: 17%;
	}
}
#topTit h1{
    padding: 0;
    margin: 0;
}
#mainCopy01 {
	position: absolute;
	z-index: 1;
	width: 56%;
	top: 31%;
	left: 7%;
}
#mainCopy01 h2.wLine {
	font-weight: 600;
	font-size: 130%;
	margin: 0 0 0.5em;
}
#mainCopy01 h2.webfont-Serif {
	font-weight: 500;
	font-size: 210%;
	text-align: center;
	margin: 0;
}
@media screen and (max-width: 1100px) {
	#mainCopy01 h2.wLine {
		font-size: 1.6vw;
	}
	#mainCopy01 h2.webfont-Serif {
		font-size: 3.0vw;
	}
}
@media screen and (max-width: 600px) {
	#mainCopy01 {
		width: 90%;
		top: 18%;
		left: 5%;
	}
	#mainCopy01 h2.wLine {
		font-size: 3.0vw;
	}
	#mainCopy01 h2.webfont-Serif {
		font-size: 5.0vw;
	}
}
#mainCopy02 {
	position: absolute;
	z-index: 2;
	width: 32%;
	top: 27%;
	right: 3%;
}
@media screen and (max-width: 600px) {
	#mainCopy02 {
		width: 45%;
		top: 38%;
		right: inherit;
		left: 5%;
	}
}
/* text-split
================================================== */
.text-split span{
  opacity:0;
  display:inline-block;
  transform:translateY(20px);
}
.text-split.show span{
  animation: charFade 1.6s forwards;
}
@keyframes charFade{
  to{
    opacity:1;
    transform:translateY(0);
  }
}
/* contensArea
================================================== */
.contensArea {
	max-width: 1080px;
	padding: 5% 5% 0;
	margin: 0 auto;
}
@media screen and (max-width: 600px) {
	.contensArea {
		padding: 10% 5% 0;
	}
}
/* contentsTit
================================================== */
.contentsTit {
	padding: 0 0 3%;
}
.contentsTit h2 {
	padding: 0;
	margin: 0;
	font-size: 210%;
	text-align: center;
}
@media screen and (max-width: 1100px) {
	.contentsTit h2 {
		font-size: 3.0vw;
	}
}
@media screen and (max-width: 600px) {
	.contentsTit {
		padding: 0 0 5%;
	}
	.contentsTit h2 {
		font-size: 5.0vw;
	}
}
/* contentsTxt
================================================== */
.contentsTxt {
	padding: 0 0 3%;
	max-width: 900px;
	margin: 0 auto;
	font-size: 120%;
	line-height: 200%;
}
@media screen and (max-width: 639px) {
	.contentsTxt {
		padding: 0 0 1em;
		font-size: 100%;
	}
}
.contentsTxtS {
	padding: 0 0 3%;
	max-width: 900px;
	margin: 0 auto;
	font-size: 70%;
	line-height: 160%;
}
/* youtubeBox
================================================== */
.youtubeBox {
	padding: 0 0 3%;
	max-width: 900px;
	margin: 0 auto;
}
@media screen and (max-width: 639px) {
	.youtubeBox {
		padding: 0 0 5%;
	}
}
.youtube{
	position: relative;
	padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
	height: 0;
	overflow: hidden;
}
.youtube iframe{
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
}
/* contentsIcon
================================================== */
.contentsIcon {
	padding: 0 0 3%;
	justify-content: space-between;
	flex-wrap: wrap;
}
.contentsIcon h3 {
	width: 20%;
}
@media screen and (max-width: 639px) {
	.contentsIcon {
		width: 80%;
		margin: 0 auto;
		padding: 0 0 3%;
	}
	.contentsIcon h3 {
		width: 40%;
	}
}
/* leasekinArea
================================================== */
.leasekinArea {
	background-color: #ea5203;
	padding: 30px 0;
}
@media screen and (max-width: 600px) {
	.leasekinArea {
		padding: 10% 0;
	}
}
/* leasekinBox
================================================== */
.leasekinBox {
	max-width: 1080px;
	padding: 0 5%;
	margin: 0 auto;
}
/* leasekinTit
================================================== */
.leasekinTit {
	width: 30%;
	margin: 0 auto;
}
@media screen and (max-width: 600px) {
	.leasekinTit {
		width: 80%;
	}
}
/* leasekintxt
================================================== */
.leasekintxt {
	text-align: center;
	color: #fff;
	font-size: 120%;
}
@media screen and (max-width: 600px) {
	.leasekintxt {
		text-align: left;
		font-size: 100%;
	}
}
/* leasekinCardArea
================================================== */
.leasekinCardArea {
	padding: 0;
	justify-content: space-between;
	flex-wrap: wrap;
	padding: 30px 0 0;
}
.leasekinCard {
	width: 26%;
	padding: 2.5%;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background-color: #fff;
	box-shadow: 0 3px 16px 0 rgba(0, 0, 0, 0.16);
	overflow: hidden;
}
@media screen and (max-width: 600px) {
	.leasekinCard {
		width: 100%;
		padding: 5%;
		margin-bottom: 5%;
	}
}
.no {
	color: #f8d5cb;
	font-size: 600%;
	text-align: center;
	padding: 0;
	margin: 0;
	line-height: 100%;
}
h3.cardTit {
	padding: 0 0 1em;
	margin: 0;
	text-align: center;
}
@media screen and (max-width: 600px) {
	.no {
		font-size: 20vw;
	}
	h3.cardTit {
		font-size: 5.6vw%;
	}
}
.cardTxt {
	text-align: justify;
	line-height: 160%;
}
/* pointTitArea
================================================== */
#pointTitArea {
	position: relative;
	max-width: 1100px;
	margin: 5% auto 0;
	padding: 0 5%;
}
.pointTit {
	position: relative;
	padding: 10% 0 3%;
}
.pointTit p {
	width: 40%;
	margin: 0 auto;
	padding-bottom: 1em;
}
@media screen and (max-width: 600px) {
	.pointTit {
		padding: 10% 0 20%;
	}
	.pointTit p {
		width: 70%;
		margin: 0 auto;
	}
}
.pointTit h2 {
	padding: 0;
	margin: 0;
	font-size: 210%;
	text-align: center;
}
@media screen and (max-width: 1100px) {
	.pointTit h2 {
		font-size: 3.0vw;
	}
}
@media screen and (max-width: 600px) {
	.pointTit h2 {
		font-size: 5.0vw;
	}
}
#poin01 {
	position: absolute;
	top: 40%;
	left: 4%;
	width: 15%;
}
#poin02 {
	position: absolute;
	top: 0;
	left: 18%;
	width: 15%;
}
#poin03 {
	position: absolute;
	top: 3%;
	right: 3%;
	width: 24%;
}
@media screen and (max-width: 600px) {
	#poin01 {
		top: 62%;
		left: 13%;
		width: 25%;
	}
	#poin02 {
		position: absolute;
		top: 62%;
		left: 39%;
		width: 25%;
	}
	#poin03 {
		position: absolute;
		top: 66%;
		right: 10%;
		width: 25%;
	}
}

/* pointContents
================================================== */
.pointContents {
	max-width: 900px;
	margin: 0 auto;
	padding: 40px 5%;
	border-bottom: solid 3px #ddd;
}
.pointBoxL {
	float: left;
}
.pointBoxR {
	float: right;
}
.pointBox {
	width: 47.5%;
}
@media screen and (max-width: 600px) {
	.pointBoxL {
		float: none;
	}
	.pointBoxR {
		float: none;
	}
	.pointBox {
		width: 100%;
		margin-bottom: 0;
	}
}
.pointNo {
	color: #f8d5cb;
	font-size: 600%;
	padding: 0 0.2em 0 0;
	margin: 0;
	line-height: 100%;
}
.pointTxtTit h3 {
	font-size: 180%;
	margin: 0;
	padding: 0;
}
@media screen and (max-width: 1100px) {
	.pointNo {
		font-size: 10vw;
	}
	.pointTxtTit h3 {
		font-size: 3vw;
	}
}
@media screen and (max-width: 600px) {
	.pointTxtTit {
		padding: 5% 0 2%;
	}
	.pointNo {
		font-size: 18vw;
	}
	.pointTxtTit h3 {
		font-size: 5.8vw;
	}
}
.pointTxt {
	line-height: 200%;
}
/* priceArea
================================================== */
.priceArea {
	position: relative;
	max-width: 1100px;
	margin: 5% auto 0;
	padding: 0;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
	overflow: hidden;
}
.priceBg {
	position: relative;
	z-index: 0;
}
.price01 {
	position: absolute;
	z-index: 1;
	width: 42%;
	top: 7%;
	left: 8%;
}
.price02 {
	position: absolute;
	z-index: 1;
	width: 35%;
	top: 33%;
	left: 11%;
}
.price03 {
	position: absolute;
	z-index: 2;
	width: 25%;
	top: 50%;
	left: 16%;
}
@media screen and (max-width: 600px) {
	.price01 {
		width: 60%;
		top: 3%;
		left: 20%;
	}
	.price02 {
		width: 70%;
		top: 20%;
		left: 15%;
	}
	.price03 {
		width: 45%;
		top: 38%;
		left: 15%;
	}
}
/* contentsArea
================================================== */
.contentsArea {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 5%;
}
/* titBlock
================================================== */
.titBlock {
	text-align: center;
	padding: 10% 0 3%;
}
.titBlock h2 {
	padding: 3% 0 0;
	margin: 0;
	font-size: 210%;
	line-height: 130%;
	color: #ea5205;
}
@media screen and (max-width: 1100px) {
	.titBlock h2 {
		font-size: 3.0vw;
	}
}
@media screen and (max-width: 600px) {
	.titBlock h2 {
		font-size: 6.0vw;
	}
}
.titBlock h2.head-border:before,
.titBlock h2.head-border:after {
    content: "";
    height: 2px;
    flex-grow: 1;
    background-color: #ea5205;
}
.titBlock p {
	padding: 1% 0 0;
	font-size: 120%;
	line-height: 200%;
}
@media screen and (max-width: 639px) {
	.titBlock p {
		padding: 2% 0 0;
		text-align: left;
		font-size: 100%;
		text-align: justify;
	}
	.titBlock p br{
		display: none;
	}
}
/* voiceArea
================================================== */
.voiceArea {
	padding-bottom: 3%;
}
@media screen and (max-width: 600px) {
	.voiceArea {
		padding-bottom: 5%;
	}
}
.voiceBgBox {
	padding: 3%;
	border-radius: 3px; 
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
	background: linear-gradient(-45deg,#dfeef5 25%, #edf3f6 25%,#edf3f6 50%, #dfeef5 50%,#dfeef5 75%, #edf3f6 75%,#edf3f6);
	background-size: 600px 600px;
	animation: anime_stripe_1 25s infinite linear;
	border: solid 1px #ea5205;
}
@keyframes anime_stripe_1 {
	0% {  background-position-x: 0;}
	100% {  background-position-x: -600px;}
}
@media screen and (max-width: 600px) {
	.voiceBgBox {
		padding: 5%;
	}
}
.voiceBgBox .fLeft{
	width: 18%;
}
.voiceBgBox .fRight{
	width: 78%;
}
@media screen and (max-width: 800px) {
	.voiceBgBox .fLeft{
		float: none;
		width: 40%;
		margin: 0 auto;
		padding-bottom: 5%;
	}
	.voiceBgBox .fRight{
		float: none;
		width: 100%;
	}
}
.voiceBgBox h4{
	float: left;
	color: #ea5205;
	padding: 2%;
	margin: 0;
	line-height: 100%;
	background-color: #fff;
	border-radius: 50px; 
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
	border: solid 1px #ea5205;
}
@media screen and (max-width: 800px) {
	.voiceBgBox h4{
		float: none;
		text-align: center;
	}
	.voiceBgBox h3{
		font-size: 100%;
	}
	.voiceBgBox h4{
		padding: 2% 5%;
		font-size: 100%;
	}
}
.voiceBgBox p {
	line-height: 200%;
}
/* qaArea
================================================== */
#qaArea {
}
@media screen and (max-width: 639px) {
	#qaArea {
	}
}
.qaBox {
	display: flex;
	flex-flow: wrap;
	justify-content: space-around;
	align-items: center;
	padding: 1em 5%;
}
.question {
	background-color: #f6efed;
	border: solid 1px #ea5205;
	margin-bottom: 10px;
	color: #ea5205;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
	box-shadow: 0 3px 10px 0 rgba(0,0,0,0.1);
	font-weight: 600;
}
.answer {
	background-color: #fff;
	margin-bottom: 30px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
	box-shadow: 0 3px 10px 0 rgba(0,0,0,0.1);
}
.qaBox .icon06 {
	width: 10%;
	font-size: 160%;
	line-height: 100%;
	text-align: center;
}
.qaBox .icon07 {
	width: 10%;
	font-size: 200%;
	color: #ea5205;
	text-align: center;
}
.qaBox dd {
	width: 90%;
}
.qaBox dd .ddTxt {
	font-size: 100%;
	line-height: 200%;
}
.qaBox dd .sTxt {
	padding-top: 1em;
	font-size: 80%;
	line-height: 130%;
}
@media screen and (max-width: 639px) {
	.qaBox .icon06 {
		width: 17%;
	}
	.qaBox .icon07 {
		width: 17%;
	}
	.qaBox dd {
		width: 83%;
	}
}