@charset "UTF-8";


/* # =================================================================
   # 共通タイトル
   # ================================================================= */
.main-title{
	font-family: 'Inter',system-ui;
	font-size:20px;
	font-weight:700;
	color:var(--color-base);
	line-height:1.2;
	text-align:center;
	text-transform: capitalize;
	margin-bottom:50px;
}

.main-title span{
	display:block;
	text-transform: none;
	font-style: normal;
	font-size:40px;
	font-weight:900;
	color:var(--color-bk);
	margin-top:20px;
}

.txt-c-gd{
	background: rgb(255,0,102);
	background: linear-gradient(90deg, rgba(255,0,102,1) 0%, rgba(255,51,255,1) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.txt-c-bk{
	color:var(--color-bk);
}

.txt-c-wh{
	color:var(--color-white);
}

.txt-c-base{
	color:var(--color-base);
}

.txt-bold{
	font-weight:700;
}

.txt-box{
	width:100%;
	line-height:2rem;
	text-align:left;
}


@media screen and (max-width:599px){
.main-title span{font-size:28px;}
}


/* # =================================================================
   # 共通背景
   # ================================================================= */

.bg-gray{background-color:var(--color-gray5);}




/* # =================================================================
   # ファーストビュー
   # ================================================================= */
 
.fv-area {
	position: relative;
	width:100%;
	overflow:hidden;
	background-image: url(../img/fv_bg.webp);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: right top;
}

.fv-img-btmtxt {
	position: absolute;
	bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
	width: 100%;
	z-index:0;
}
.fv-img-btmtxt img{width: 100%;}

.fv-flex {
	width:100%;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content:space-between;
	align-items:center;
    flex-wrap:wrap;
	row-gap:2em;
}

.fv-flex-item{width:48.5%;}

.fv-box {
	width: 85%;
	margin-left:auto;
	margin-right:auto;
	text-align:left;
	padding:50px 0 100px 0;
}

.fv-txt{
	font-size:clamp(1.563rem, 0.451rem + 2.31vw, 2.188rem);
	font-weight:900;
	line-height:2em;
	color:var(--color-base);
	letter-spacing:.1em;
	margin-bottom:20px;
}

.fv-copy{
	font-size:16px;
	font-weight:700;
	line-height:2em;
	margin-bottom:30px;
}

.fv-img-box img{width:100%}



@media screen and (max-width: 768px) {
	.fv-flex-item{width:100%;}
	.fv-img-box{text-align:center;}
	.fv-img-box img{width:90%;}
	.fv-img-box{letter-spacing:.2em;}
	.fv-txt{font-size:35px;}
}

@media screen and (max-width: 599px) {
	.fv-box {width: 90%;}
	.fv-img-box img{width:100%;}
	.fv-txt{font-size:25px;}
}


/* # =================================================================
   # fv illust
   # ================================================================= */

@keyframes FvAnime{
	0% {
	transform: translateY(0);
	}
	50% {
		transform: translateY(-2%);
	}
	100% {
		transform: translateY(0);
	}
}


.FvImg{
	animation: FvAnime 4s infinite;
}


/* # =================================================================
   # nayami
   # ================================================================= */

#nayami .flex {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content:space-between;
    flex-wrap:wrap;
	list-style-type: none;
}

#nayami .gap1{row-gap:20px;}

#nayami .flex li {
  position: relative;
  font-size:18px;
  font-weight:800;
  color:var(--color-bk);
  text-align:left;
  line-height: 1.5em;
  width:49%;
  background-color:var(--color-white);
  padding:10px 20px 10px 50px;
  border:solid 1px #e6f0f1;
  border-radius:.5em;
}


#nayami .flex li::before,
#nayami .flex li::after {
    position: absolute;
    top: 50%;
    height: 1em;
    content: '';
}
#nayami .flex li::before {
    left: 15px;
    transform: translateY(-50%);
    width: 1em;
    border: 1px solid var(--color-base);
}
#nayami .flex li::after {
    left: 1.2em;
    transform: translateY(-75%) rotate(45deg);
    width: 0.5em;
    border-bottom: 3px solid var(--color-base);
    border-right: 3px solid var(--color-base);
}

#nayami .flex-item{
	width:48.5%;
	color:var(--color-white);
	background-color:var(--color-green);
	border-radius:15px;
	text-align:center;
	display: flex;
	flex-direction: column;
}

#nayami .imgbox{margin-top: 40px;}
#nayami .imgbox img{width:60%;}


@media screen and (max-width:900px){
	#nayami .flex li {width:100%;}
	#nayami .gap1{row-gap:10px;}
	#nayami .imgbox img{width:80%;}
}



/* # =================================================================
   # howto
   # ================================================================= */


.howto-bg {
	background: #FF0066;
	background: linear-gradient(90deg, rgba(255, 0, 102, 1) 0%, rgba(255, 0, 202, 1) 100%);
	padding:80px 0 60px 0;
	position:relative;
}

.howto-head{
	position:absolute;
	top:-1px;
	left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}

.howto-head img{width:100px;}


#howto .flex{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content:space-between;
	align-items:center;
    flex-wrap:wrap;
	column-gap:50px;
}

#howto .flex-item-img{width:250px;}
#howto .flex-item-txt{flex:1;}

#howto .flex-item-img img{width:100%;}
#howto .howto-title{
	font-size:25px;
	font-weight:700;
	line-height:1.5em;
	margin-bottom:20px;
	text-align:left;
	color:var(--color-white);
}
#howto .howto-txt{
	font-size:16px;
	font-weight:700;
	line-height:2em;
	text-align:left;
	color:var(--color-white);
}


@media screen and (max-width:768px){
	#howto .flex-item-img{width:100%;}
	#howto .flex-item-txt{flex:1;}
	#howto .flex-item-img img{width:200px;margin-bottom:40px;}
}


/* # =================================================================
   # about
   # ================================================================= */

#about .title-img{text-align:center;}
#about .title-img img{width:200px;}

#about .flex{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content:space-between;
    flex-wrap:wrap;
	row-gap:1.5em;
}

#about .flex_last::after {
	display: block;
	content:"";
	width:32%;
}

#about .flex-item{width:32%;background-color:var(--color-white);padding:1.5em;border-radius:1em;background-color:var(--color-gray5);}
#about .flex-item img{width:100%;}


#about .flex-item-txt{
	font-size:16px;
	font-weight:700;
	text-align:left;
	line-height:1.8em;
	margin-top:15px;
}

#about .flex-item-txt span{
	background:linear-gradient(transparent 60%, #ff6 60%);
}



/*-------スマホ表示-------------*/

@media screen and (max-width:768px){
	#about .flex_last::after {display: block;content:"";width:48%;}
	#about .flex-item{width:48%;}
}

@media screen and (max-width:599px){
	#about .flex{row-gap:1em;}
	#about .flex-item{width:100%;padding:1em;display:flex;align-items:center;column-gap:1em;}
	#about .flex-item img{width:130px;}
	#about .flex-item-txt{margin-top:auto;}
}


/* # =================================================================
   # service
   # ================================================================= */
#service .flex{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content:space-between;
    flex-wrap:wrap;
	row-gap:1.5em;
}

#service .flex_last::after {
	display: block;
	content:"";
	width:32%;
}

#service .flex-item{width:32%;background-color:var(--color-white);border-radius:1em;}
#service .flex-item img{width:100%;border-radius:1em 1em 0 0;}

#service .flex-txt-box{padding:1.5em;}

#service .flex-item-title{
	font-size:20px;
	font-weight:700;
	line-height:1.5em;
	text-align:left;
	color:var(--color-base);
	margin-bottom:10px;
}
#service .flex-item-txt{
	font-size:14px;
	text-align:left;
	line-height:1.5em;
}



/*-------スマホ表示-------------*/

@media screen and (max-width:768px){
	#service .flex_last::after {display: block;content:"";width:48%;}
	#service .flex-item{width:48%;}
}

@media screen and (max-width:599px){
	#service .flex{row-gap:1em;}
	#service .flex-txt-box{padding:1em;}
	#service .flex-item-title{font-size:18px;}
}

/* # =================================================================
   # merit
   # ================================================================= */
#merit .flex{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content:space-between;
    flex-wrap:wrap;
	row-gap:1.5em;
}

#merit .flex_last::after {
	display: block;
	content:"";
	width:32%;
}

#merit .flex-item{width:32%;background-color:var(--color-white);padding:1.5em;border-radius:1em;}
#merit .flex-item img{width:100%;}

#merit .flex-item-title{
	font-size:20px;
	font-weight:700;
	line-height:1.5em;
	text-align:left;
	color:var(--color-base);
	margin:15px 0;
}
#merit .flex-item-txt{
	font-size:14px;
	text-align:left;
	line-height:1.5em;
}



/*-------スマホ表示-------------*/

@media screen and (max-width:768px){
	#merit .flex_last::after {display: block;content:"";width:48%;}
	#merit .flex-item{width:48%;}
}

@media screen and (max-width:599px){
	#merit .flex{row-gap:1em;}
	#merit .flex-item{width:100%;padding:1em;display:flex;align-items:center;}
	#merit .flex-item img{width:130px;}
}


/* # =================================================================
   # faq
   # ================================================================= */
   
.faq-block{
border-bottom:dotted 1px var(--color-gray4);
padding-bottom:5px;
margin-bottom:5px;
}


#faq .table__list-label:first-letter{
 font-size: 28px;
 font-weight: 600;
 margin-right: 0.5em;
}

#faq .table__list-label:first-letter{color: var(--color-base);}

#faq .quest{
	text-indent: -1.7em;
	padding-left:2em;
	padding-right:40px;
	padding-bottom:10px;
	padding-top:10px;
	font-size:20px;
	line-height:150%;
	text-align:left;
	font-weight: Bold;
	letter-spacing:2px;
}

#faq .answer{
	font-size:18px;
	font-weight: Bold;
	color: var(--color-base);
	text-align:left;
	padding: 0 3em 25px 3em;
	line-height:180%;
	letter-spacing:2px;
}

#faq .answer a{color:var(--color-red);}

#faq .answer ul{list-style: square;text-indent: 0;padding-left:20px;}

#faq .btn{
	display:block;
	background-image: url(../img/i_mail_btn.svg);
	background-repeat: no-repeat;
	background-size: 25px;
	background-position: left 5px center;
	font-size:14px;
	font-weight:800;
	text-align:center;
	padding:10px 15px 10px 35px;
	background-color: var(--color-white);
	border:solid 1px var(--color-gray1);
	color: var(--color-gray1) !important;
	transition: all .5s;
	text-decoration:none;
	line-height:1;
	width:200px;
	border-radius:50px;
	text-indent: 0;
	margin-top:20px;
}


#faq .btn:hover{
	background-image: url(../img/i_mail_green_btn.svg);
	background-position: left 5px center;
	color: var(--color-green) !important;
	border:solid 1px var(--color-green);
	text-decoration:none;
}



@media screen and (max-width:599px){
	#faq .quest{
		text-indent: -1.8em;
		padding-left:2em;
		font-size:18px;
	}
	#faq .answer{font-size:16px;}
}


/* # =================================================================
   # FAQ アコーディオン設定
   # ================================================================= */

.table__list-check{
    display: none;
}

/*カラム見出し */
.table__list-label {
	width: 100%;
	display: block;
	padding: 10px;
	color: var(--color-gray1);
	font-display: swap;
	position: relative;
	cursor: pointer;
	border-radius: 5px;
}


.table__list-label:after{
    content: '';
    display: block;
    line-height: 16px;
    padding: 0;
    position: absolute;
    right: 20px;
   top: 40%;
   transform: translateY(-40%);
    -webkit-transform: translateY(-40%);
    -ms-transform: translateY(-40%);
	border-bottom: solid 1px var(--color-gray1);
	border-right: solid 1px var(--color-gray1);
	width: 10px;
	height: 10px;
	transform: rotate(45deg);
}
.table__list-content {
	width: 100%;
    display: block;
    height: 0;
    opacity: 0;
	margin-top: 0px;
 	margin-bottom: 0px;
   padding: 0px 0 0px 0;
    transition: .5s;
    visibility: hidden;
}
.table__list-check:checked + .table__list-label:after{
    content: '×';
    position: absolute;
    right: 25px;
    top: 30%;
   transform: translateY(-35%);
    -webkit-transform: translateY(-35%);
    -ms-transform: translateY(-35%);
    font-size: 30px;
    line-height: 20px;
    font-weight: 400;
    color: var(--color-gray1);
	border-bottom: none;
	border-right: none;
}
.table__list-check:checked + .table__list-label + .table__list-content{
    height: auto;
    opacity: 1;
    padding: 0;
    visibility: visible;
}