/* =========================
   Base
========================= */
html {
  font-size: 62.5%;
}

body {
	font-size: 10px;
	color: red;
}
p,div,li,dt,dd{

	}

body {
  margin: 0;
  font-family: "Noto Sans JP", sans-serif;
  line-height: 1.7;
  color: #333;
  background: #fff;
}
main section,
section .inner{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0;
	}
a.btn_item{
  background: red;
  color: #fff;
  font-size: 1.8em;
  line-height: 2.4em;
  text-decoration: none;
  border-radius: 2.4rem;
  padding: 0px 40px;
  height: 2.4em;
  display: inline-block;
	}
br.smt,
img.smt{
	display: none;
	}

/* =========================
   Header（FV）
========================= */
header {
	text-align: center;
	margin: 0 auto;
	padding: 0;
	position: relative;
	width: 100%;
	max-width: 1280px;
	}
header img{
	width: 100%;
	}
header p.logo{
	position: absolute;
	right: 30px;
	top:10px;
	}
header p.logo img{
	width: 250px;
	}
header div.tex{
	position: absolute;
	left: 40px;
	top:30px;
	color: #fff;
	text-align: left;
	}
header div.tex span,
header div.tex p{
	font-size: 1.8em;
	}
header div.tex h1{
	font-size: 5.0em;
	}


/* =========================
   Section spacing
========================= */
section {
  margin-bottom: 48px;
}

/* =========================
   Problem list
========================= */
.problem h2,
.problem p{
	text-align: center;
	}

.problem h2{
	font-size: 5.0em;
	line-height: 5.0rem;
	color: #ccc;
	}
.problem p{
	font-size: 2.0em;
	margin-bottom: 40px;
	}
.problem img.ph_problem01{
	display: inline-block;
	width: 50%;
	}
.problem ul{
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding: 0;
  margin: 0;
	}
.problem ul li img{
	width: 100%;
	}
.problem ul li{
	font-size: 2.0em;
	line-height: 3.0rem;
	text-align: center;
	font-weight: bold;
	position: relative;
	margin:0 0 10px 0;
	margin-left: auto;
	padding: 0;
	list-style: none;
	gap: 10px;
	align-items: center;
	width: calc((100% - 30px) / 4);
	}

/* =========================
   Solution
========================= */
.solution{
	/*背景はhtml側で指示*/
	background-position: right center;
	background-repeat: no-repeat;
	padding: 30px 30px 30px 0;
	}
h2#solution-heading {
	color: #74a789;
	}
.solution h2{
	font-size: 5.0em;
	line-height: 5.0rem;
	}
.solution h3{
	font-size: 3.6em;
	line-height: 3.6rem;
	}
.solution p{
	font-size: 1.8em;
	line-height: 3.6rem;
	max-width: 70%;
	}


/* =========================
   Comparison
========================= */
.comparison{
	text-align: center;
	padding-bottom: 80px;
	}


h2#comparison-heading {
	text-align: center;
	font-size: 5.0em;
	line-height: 5.0rem;
	}
.comparison p{
	font-size: 3.6em;
	line-height: 3.6rem;
	margin-bottom: 40px;
	}

.comparison .comparison_list {
	display: flex;
	flex-direction: row-reverse;
	gap: 40px;
  align-items: center;
  justify-content: center;
  margin-top: 80px;
	}

.comparison .comparison_list article {
	display: flex;
  align-items: top;
	gap: 10px;
	}
.comparison .comparison_list article h3{
	font-size: 2.4em;
	line-height: 2.4rem;
	padding: 0;
	margin: 0;
	text-align: left;
	}
.comparison .comparison_list article p{
	font-size: 1.5em;
	line-height: 2.4rem;
	text-align: left;
	}
.comparison .comparison_list article:nth-child(1){
	border: 5px solid #74a789;
	padding: 15px;
	}
.comparison .tex p{
	text-align: center;
	font-size: 1.8em;
	line-height: 3.6rem;
	}
.comparison a.btn_item{

	}


/* =========================
   just_right
========================= */

.just_right{
	/*背景はhtml側で指示*/
	background-position: right center;
	background-repeat: no-repeat;
	padding: 30px 30px 30px 0;
	margin-bottom: 80px;
	}
.just_right h2#just_right-heading{
	font-size: 3.6em;
	line-height: 3.6rem;
	color: #74a789;
	margin-left: -20px;
	}
.just_right p{
	font-size: 1.8em;
	line-height: 3.6rem;
	max-width: 70%;
	}

/* =========================
   Detail list
========================= */

.detail{
	background: #f0efec;
	max-width: none;
	padding: 20px 0;
	margin-bottom: 40px;
	}
.detail h2#details-heading {
	color: #74a789;
	text-align: center;
	font-size: 3.6em;
	line-height: 3.6rem;
	margin-bottom: 60px;
	}

.detail ul {
	display: flex;
	flex-flow: column wrap;
	height: 300px; /* 3行分の高さを指定 */
	margin: 0;
	padding: 0;
	}

.detail li {
  width: 50%;
  height: 80px;
	margin: 0;
  margin-bottom: 20px;
	list-style: none;
	display: flex;
	//align-items: center;
	gap: 20px;
	font-size: 1.8em;
	line-height: 3.6rem;
	}
.detail li img{
  height: 80px;
	}
.detail p{
	text-align: center;
	font-size: 3.6em;
	line-height: 4.5rem;
	}

/* =========================
   Scene
========================= */

.scene{
	max-width: none;
	padding: 20px 0;
	margin-bottom: 40px;
	}
.scene h2#scene-heading {
	color: #74a789;
	text-align: center;
	font-size: 3.6em;
	line-height: 3.6rem;
	margin-bottom: 60px;
	}
.scene ul {
	display: flex;
	gap: 40px;
	margin: 0;
	padding: 0;
	justify-content: center;
	}
.scene li {
	margin: 0;
	list-style: none;
	align-items: center;
	gap: 20px;
	font-size: 1.8em;
	line-height: 3.6rem;
	font-weight: bold;
	text-align: center;
	}
.scene li img{
	display: block;
	margin-bottom: 20px;
  width: 100%;
	}
.scene p{
	text-align: center;
	font-size: 3.6em;
	line-height: 4.5rem;
	}

/* =========================
   Comfort
========================= */

.comfort{
	/*背景はhtml側で指示*/
	background-position: right center;
	background-repeat: no-repeat;
	padding: 30px 30px 30px 0;
	margin-bottom: 80px;
	}
.comfort h2#comfort-heading {
	font-size: 3.6em;
	line-height: 3.6rem;
	color: #74a789;
	}
.comfort p{
	font-size: 1.8em;
	line-height: 3.6rem;
	max-width: 70%;
	}


/* =========================
   FAQ
========================= */

.faq{
	text-align: center;
	padding-bottom: 80px;
	}
.faq h2#faq-heading {
	font-size: 3.6em;
	line-height: 3.6rem;
	color: #74a789;
	text-align: center;
	}
.faq dl{
	margin: 40px;
	padding: 0;
	}
.faq dt,
.faq dd{
	margin: 0;
	padding: 20px 20px;
	font-size: 1.8em;
	line-height: 1.8rem;
	text-align: left;
	}
.faq dt{
	padding-bottom: 10px;
	font-size: 2.0em;
	line-height: 2.4rem;
	}
.faq dd{
	padding-top: 10px;
	padding-bottom:20px;
	}

.faq dl dt:nth-of-type(odd),
.faq dl dt:nth-of-type(odd) + dd {
  background: #f1f6f3;
}

/* =========================
   Footer
========================= */
footer {
	margin: 0;
	padding:0;
	font-size: 1.6rem;
	color: #fff;
	}
footer div.inner{
	padding: 40px;
	background: #74a587;
	display: flex;
  align-items: center;
  justify-content: center;
  gap: 60px;
	}
footer div.inner p a{
	color: #fff;
	font-size: 2.8rem;
	line-height: 2.8rem;
	display: inline-block;
	margin-top: 10px;
	}
footer div.inner p:nth-child(1){
	text-align: right;
	}

footer ul {
  list-style: none;
  padding: 0;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
	}

footer li {
  margin-bottom: 6px;
  color: #333;
	}

footer a {
  color: #333;
  text-decoration: none;
}


/* =========================
   Font responsive only
   1280px未満：レイアウト維持・文字だけ縮小
========================= */

@media (max-width: 1279px) {
  body {
    font-size: 9px;
  }
}

@media (max-width: 1024px) {
  body {
    font-size: 8.4px;
  }
}

@media (max-width: 768px) {
  body {
    font-size: 8px;
  }
}

@media (max-width: 560px) {
  body {
    font-size: 7.5px;
  }
}


/* =========================
   Rayout responsive
========================= */

@media (max-width: 1280px) {

main section, section .inner{
	max-width: calc(100vw - 40px);
	padding-left: 20px;
	padding-right: 20px;
	}

}
@media (max-width: 1080px) {

main section, section .inner{
	max-width: calc(100vw - 40px);
	padding-left: 20px;
	padding-right: 20px;
	}

}

@media (max-width: 960px) {
header div.tex h1{
	line-height: 1.2em;
	}
.comparison .comparison_list{
	display: block;
	}
.comparison .comparison_list article{
	margin-bottom: 20px;
	}
.comparison .comparison_list article p {
  font-size: 2.0em;
  line-height: 2.8rem;
	}

}
@media (max-width: 768px) {
br.smt{
	display: inline-block;
	}

header div.tex h1,
h2#solution-heading{
	margin: 10px 0;
	}
header div.tex h1,
h2#solution-heading,
.problem h2,
h2#comparison-heading{
	font-size: 3.6em;
	line-height: 1.3em;
	}
.comparison p,
.detail p,
.scene p{
    font-size: 2.8em;
	}
.solution p{
	line-height: 2.8rem;
	}

.problem ul{
	padding: 0;
	}
.problem ul li{
   width: calc((100% - 10px) / 2);
	}
section.solution,
section.just_right,
section.comfort{
	background-position-x: 150px;
	}
.detail ul{
	height: auto;
	width: 70%;
	margin: 0 auto;
	}
.detail li{
	width: auto;
	}
.scene ul{
	gap: 10px;
	}

}
@media (max-width: 740px) {
header div.tex a.btn_item,
.comparison a.btn_item,
.comfort a.btn_item,
.faq a.btn_item {
	font-size: 2.0rem;
	}
header div.tex h1{
	line-height: 1.4em;
	}

header div.tex{
	position: relative;
	width: calc(100% - 80px);
	color: #333;
	margin-bottom: 80px;
	text-align: center;
	}
header div.tex a.btn_item{
	margin-top: 20px;
	}
.comfort .inner{
	text-align: center;
	}


header div.tex span, header div.tex p,
.problem p,
.solution p,
.comparison p,
.comparison .tex p,
.comparison .comparison_list article p,
.detail p,
.scene p,
.just_right p,
.comfort p{
		font-size: 2.0rem;
		}
.just_right p,
.solution p,
.scene p{
	line-height: 3.4rem;
	}
.just_right p,
.solution p,
.comfort p{
	max-width: none;
	}
.comfort .inner h2,
.comfort .inner p{
	text-align: left;
	}
.scene ul{
	flex-wrap: wrap;
	}
.scene li{
	font-size: 1.6rem;
	width: calc((100% - 10px) / 2);
	}
.scene li img{
	margin-bottom: 10px;
	}
.detail li{
	font-size: 2.0em;
	line-height: 3.0rem;
	font-weight: bold;
	text-align: left;
	align-items: center;
	}
}

@media (max-width: 600px) {
	br.pc{
		display: none;
		}
	header img.mainvis{
		display: none;
		}
	img.smt{
		display: block;
		max-width: 100%;
		}
	header p.logo{
  	width: 160px;
		}
	header p.logo img{
		max-width: 100%;
	}
	main section, section .inner{
    max-width: calc(100vw - 20px);
		padding: 0;
		margin: auto;
    text-align: center;
		}
	header div.tex{
		width: calc(100% - 20px);
		left: 0;
		right: 0;
		margin-right: auto;
		margin-left: auto;
		}
.comparison .comparison_list article p{
	margin-bottom: 0;
	}
.comparison .tex p{
	text-align: left
	}
.faq dl{
	margin:40px auto;
	}

section.solution,
section.just_right,
section.comfort{
	background-image: none !important;
	padding: 0;
	}
header div.tex p,
.just_right p,
.comparison .tex p,
.solution p,
.comfort p{
	text-align: left;
	width: calc(100% - 100px);
	margin-right: auto;
	margin-left: auto;
	}
.detail ul{
	width: calc(100% - 40px);
	}
.comfort h2#comfort-heading{
	text-align: center;
	}
footer div.inner,
footer ul{
	display: block;
	}
footer div.inner p:nth-child(1),
footer div.inner p{
	text-align: center;
	}
footer li{
	text-align: center;
	}
footer li:nth-child(2){
	display: none;
	}

}



@media (max-width: 430px) {

header div.tex p,
.just_right p,
.comparison .tex p,
.solution p,
.comfort p{
	width: calc(100% - 40px);
	}
.solution h3 {
	font-size: 3.0em;
	line-height: 3.0rem;
	}

.scene li {
	  width: auto;
    }