@charset "utf-8";

body .sp-item {
	display: none !important;
}

body .pc-item {
  display: block !important;
}

@media screen and (max-width: 640px) {
	body {
		min-width: inherit;
		height:100%;
	}

	body .sp-item {
		display: block !important;
	}

	body .pc-item {
		display: none !important;
	}

	body .sp-item img {
		width:100%;
	}
}

/* ----------------------------------------------------
    共通
---------------------------------------------------- */

body {
	font: normal 18px/1.7 "Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ",Meiryo,"ＭＳ Ｐゴシック",Arial,Verdana,sans-serif;
	color:#000;
	text-align: center;
	overflow-x: hidden;
	max-width: 2000px;
	margin: 0 auto;
}

img {
	margin: 0 auto;
	width: 100%;
}

video {
	width: 100%;
}

p {
	font-feature-settings: "palt";
}

.sentence {
	margin-top: 40px;
}

.sentence p {
	margin-top: 40px;
}

.sentence p:first-of-type {
	margin-top: 0;
}

.inner {
	width: 724px;
	margin: 0 auto;
}

.marker {
	color: #000;
	background: rgb(255,255,100);
	background: linear-gradient(0deg, rgba(255,255,100,1) 70%, rgba(255,255,255,0) 70%);
	padding-bottom: 3px;
	font-weight: bold;
}

@media screen and (max-width: 640px) {
	img {
		max-width: 100%;
	}

	body {
		width: 100%;
	}

	.inner {
		width: 94%;
	}
}

/* ----------------------------------------------------
    header
---------------------------------------------------- */
.header {
	background: url(../images/header-bg.webp) no-repeat center top / 2000px;
}
.header-cont {
	width: 1024px;
}
.greeting {
	font-family: 'Noto Serif JP', serif;
	margin: 0 auto;
	text-align: justify;
	padding: 30px 0;
}

@media screen and (max-width: 640px) {
	.header {
		background: none;
	}
	.greeting {
		padding: 0 0 30px;
	}
}


/* ----------------------------------------------------
    CTA
---------------------------------------------------- */
.cta {
	padding: 80px 0;
	background-color: #FAF9F1;
}
.cta-inner {
	width: 724px;
	margin: 0 auto;
	position: relative;
}
.btn {
	width: 344.1748px;
	position: absolute;
	bottom: 0;
	right: 0;
}
.btn-mail-pc {
	transition: opacity 0.2s ease;
}
.btn-mail-pc:hover {
	opacity: 0.7;
}


@media screen and (max-width: 640px) {
	.cta {
		padding: 20px 0;
	}
	.cta-inner {
		width: 100%;
	}
	.btn {
		width: 92%;
		left: 50%;
		transform: translateX(-50%);
		bottom: 9%;
	}
	.btn-mail-sp,
	.btn-phone-sp {
		transition: opacity 0.2s ease;
	}
	.btn-mail-sp:hover,
	.btn-phone-sp:hover {
		opacity: 0.7;
	}
	.btn-mail-sp {
		margin-top: 8px;
	}
}

/* ----------------------------------------------------
    sec01
---------------------------------------------------- */
.sec01 {
	background: url(../images/sec01-bg.webp) no-repeat center top / 2000px;
	padding-bottom: 60px;
}
.sec01-subttl-pc {
	width: 671.5566px;
	margin-top: 40px;
}
.sec01-img02-pc {
	margin-top: 40px;
}

@media screen and (max-width: 640px) {
	.sec01 {
		background: none;
		padding-bottom: 0;
	}
}

/* ----------------------------------------------------
    sec02
---------------------------------------------------- */
.sec02 {
	background: url(../images/sec02-bg.webp) repeat-x center top / 1024px;
	padding: 80px 0;
}
.sec02-ttl-pc {
	width: 509.4453px;
}
.sec02-img {
	margin-top: 30px;
}
.sec02-img:first-of-type {
	margin-top: 0;
}
.sec02-imgs {
	margin-top: 50px;
}

@media screen and (max-width: 640px) {
	.sec02 {
		background: none;
		padding: 0;
	}
}

/* ----------------------------------------------------
    sec03
---------------------------------------------------- */
.sec03 {
	background-color: #F1F1F1;
	padding: 80px 0;
}
.sec03-ttl-pc {
	width: 604.2162px;
}
.sec03-img {
	margin-top: 30px;
}
.sec03-img:first-of-type {
	margin-top: 0;
}
.sec03-imgs {
	margin-top: 50px;
}

@media screen and (max-width: 640px) {
	.sec03 {
		background: none;
		padding: 0;
	}
}


/* ----------------------------------------------------
    sec04
---------------------------------------------------- */
.sec04 {
	padding: 80px 0;
}
.review {
	margin-top: 50px;
}

/* アコーディオン */
.accordion-header {
  background-color: #F3F1ED;
	color: #1A1A1A;
	font-family: 'Noto Serif JP', serif;
	text-align: left;
	font-size: 24px;
	font-weight: 500;
  padding: 30px 45px 30px 30px;
  margin-top: 16px;
  cursor: pointer;
  position: relative;
	line-height: 1.3;
}

.accordion:first-of-type .accordion-header {
	margin-top: 0;
}

.accordion-header::after{
  position:absolute;
  content:"";
	background: url(../images/sec04-arrow.webp) no-repeat center center / contain;
  width:45.7172px;
  height:24.5518px;
	right: 30px;
	top: 44%;
  margin:auto;
}
.accordion-header::after{
  transform:rotate(180deg);
  transition:transform 0.4s;
}
.accordion-header.active::after{transform:rotate(0deg);}

.accordion-content {
	font-size: 18px;
	color: #1A1A1A;
  display: none;
	text-align: justify;
	padding: 30px;
}
/* アコーディオン終わり */


@media screen and (max-width: 640px) {
	.sec04 {
		padding: 30px 0 80px;
	}
	.review {
		margin-top: 0;
	}
	.accordion-header {
		padding: 30px 70px 30px 20px;
		text-align: justify;
		font-size: 20px;
	}
	.accordion-header::after {
		right: 20px;
		width: calc(45.7172px * 0.7);
  	height: calc(24.5518px * 0.7);
	}
}


/* ----------------------------------------------------
    sec05
---------------------------------------------------- */
.sec05 {
	background: url(../images/sec02-bg.webp) repeat-x center top / 1024px;
	padding: 80px 0;
}
.sec05-img01-pc {
	margin-top: 50px;
}
.sec05 .sentence {
	font-family: 'Noto Serif JP', serif;
}
.youtube {
	margin-top: 50px;
}
.video-container {
	position: relative;
	width: 100%;
	padding-bottom: 56.25%; /* 16:9 アスペクト比のため */
	height: 0;
	overflow: hidden;
	margin-top: 30px;
}
.video-container:first-of-type {
	margin-top: 0;
}
.video-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

@media screen and (max-width: 640px) {
	.sec05 {
		background: url(../images/sec05-bg-sp.webp) no-repeat center top / 100%;
		padding: 30px 0 80px;
	}
	.sec05 .sentence {
		text-align: justify;
		margin-top: 0;
	}
}


/* ----------------------------------------------------
    sec06
---------------------------------------------------- */
.sec06 {
	background-color: #F1F1F1;
	padding: 80px 0;
}
.sec06-img01-pc {
	margin-top: 50px;
}

@media screen and (max-width: 640px) {
	.sec06 {
		background-color: #F1F1F1;
		padding: 30px 0 80px;
	}
	.sec06-img01-pc {
		margin-top: 50px;
	}
}


/* ----------------------------------------------------
    sec07
---------------------------------------------------- */
.sec07 {
	padding: 80px 0;
}
.faq {
	margin-top: 50px;
}
.question {
  background-color: #F3F1ED;
	color: #1A1A1A;
	font-family: 'Noto Serif JP', serif;
	text-align: left;
	font-size: 22px;
	font-weight: 500;
  padding: 24px 30px 24px 70px;
  margin-top: 16px;
  position: relative;
	line-height: 1.3;
}
.question::before {
	content: "";
	position: absolute;
	left: 23px;
	top: 23px;
	width: 33.8159px;
	height: 33.8159px;
	background-image: url('../images/icon-question.webp');
	background-size: contain;
	background-repeat: no-repeat;
}
.answer {
	font-size: 18px;
	color: #1A1A1A;
	text-align: justify;
	padding: 20px 30px;
}


@media screen and (max-width: 640px) {
	.sec07 {
		padding: 30px 0 80px;
	}
	.faq {
		margin-top: 0;
	}
	.question {
		text-align: left;
		font-size: 20px;
		padding: 30px 20px 30px 70px;
		text-align: justify;
	}
	.question:first-of-type {
		margin-top: 0;
	}
	.question::before {
		left: 20px;
		top: 27px;
		background-image: url('../images/icon-question-sp.webp');
	}
	.answer {
		padding: 20px;
	}
}

/* ----------------------------------------------------
    footer
---------------------------------------------------- */
.footer {
	padding: 20px 0;
	font-size: 16px;
}
.footer a {
	text-decoration: none;
	color: #1A1A1A;
}

/* @media screen and (max-width: 640px) {} */