@charset "utf-8";

/*--------------------------------------
  # WEBfont
--------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Zen+Maru+Gothic&display=swap');

/*--------------------------------------
  # General
--------------------------------------*/
article,aside,details,figcaption,figure,footer,header,hgroup,hr,menu,nav,section{display:block}a,hr{padding:0}abbr,address,article,aside,audio,b,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:0 0}ins,mark{background-color:#ff9;color:#000}body{line-height:1}nav ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}a{margin:0;vertical-align:baseline;background:0 0;color:inherit}ins{text-decoration:none}mark{font-style:italic;font-weight:700}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{height:1px;border:0;border-top:1px solid #ccc;margin:3em 0}input,select{vertical-align:middle}img{width:auto;max-width:100%;height:auto;image-rendering:-webkit-optimize-contrast}*,:after,:before{box-sizing:border-box}

html {
  font-size: 62.5%;
  overflow-y: scroll !important;
  word-break: break-word;
}

body {
  margin: 0 !important;
  color: #333;
  font-size: 1.5rem;
	font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  line-height: 1.8;
  text-align: left;
}

@media all and (min-width: 950px) {
  body {
    font-size: 1.6rem;
  }
}

/*--------------------------------------
  # Header
--------------------------------------*/
#header {
	position: absolute;
	top: 5px;
	right: 5px;
	width: 45%;
	max-width: 340px;
}
#header .site-title {
	display: block;
	width: 100%;
	height: 0;
	padding-top: 20%;
	background: url(../img/header.png?ver=20250610) no-repeat center;
	background-size: contain;
	overflow: hidden;
}
@media all and (min-width: 950px) {
	#header {
		top: 20px;
		right: 20px;
	}
	#header .site-title {
		width: 340px;
		padding-top: 67px;
	}
}

/*--------------------------------------
  # Eyecatch
--------------------------------------*/
#eyecatch {
	width: 100%;
	height: 0;
	padding-top: 75%;
	background: url(../img/eyecatch.jpg) no-repeat center;
	background-size: cover;
	overflow: hidden;
}
@media all and (min-width: 950px) {
	#eyecatch {
		padding-top: 56%;
	}
}

/*--------------------------------------
  # node
--------------------------------------*/
.node {
  padding: 40px 0;
}
.node .node-wrapper {
  padding: 0 20px;
}
.node .node-wrapper>*:last-child {
  margin-bottom: 0;
}

/* title */
h2 {
  margin-bottom: 1em;
  color: #333332;
	font-family: "Zen Maru Gothic", sans-serif;
  font-size: min(4.4vw, 3.0rem);
  font-weight: 600;
  line-height: 1.4;
	text-align: center;
}

/* btn */
.btn {
  margin: 1em 0;
	text-align: center;
}
.btn a {
  display: inline-block;
	width: 60%;
  padding: 0.75em 1em 0.6em;
	background: #f15a25;
  color: #fff;
	font-family: "Zen Maru Gothic", sans-serif;
	font-size: min(4.2vw, 2.8rem);
  font-weight: 600;
	text-align: center;
  text-decoration: none;
	letter-spacing: 1px;
	border-radius: 50vh;
  line-height: 1.3;
  transition: 0.2s;
}

@media all and (min-width: 950px) {
  .node {
    padding: 60px 0;
  }
  .node .node-wrapper {
    max-width: 1240px;
    margin: auto;
    padding: 0 min(6%, 80px);
  }
	.btn a {
		max-width: 450px;
		padding: 0.4em 1em;
	}
  .btn a:hover {
    opacity: 0.7;
		transform: scale(1.1);
  }
}


/*--------------------------------------
  # Footer
--------------------------------------*/
#footer {
  clear: both;
  color: #FFF;
  font-size: 80%;
  background: #4b3535;
	overflow: hidden;
}
#footer .footer-wrapper {
  clear: both;
  padding: 40px 15px 0;
  text-align: center;
}
#footer .site-title {
  font-weight: 500;
}
#footer .site-title a {
  display: block;
  width: 260px;
  height: 0;
  margin: 0 auto 20px;
  padding-top: 50px;
  background: url(../img/footer.svg) no-repeat center;
  background-size: 100%;
  overflow: hidden;
}
#footer .information address {
  font-style: normal;
}
#footer .copylight {
  clear: both;
  padding: 20px 0 0;
  font-size: 1.0rem;
  text-align: center;
	font-weight: 300;
  opacity: 0.5;
}
@media all and (min-width: 950px) {
  #footer .footer-wrapper {
    padding: 80px min(6%, 80px) 0;
  }
}

/*--------------------------------------
  # pagetop
--------------------------------------*/
#pagetop {
  position: fixed;
  right: 0;
  bottom: 57px;
  z-index: 998;
  opacity: 1;
  transition: 0.2s opacity, 0s 0s right;
}
body:not(.scroll) #pagetop {
  right: 100%;
  opacity: 0;
  transition: 0.2s opacity, 0s 0.2s right;
}
#pagetop a {
  position: relative;
  display: block;
  width: 40px;
  height: 0;
  padding-top: 50px;
  text-decoration: none;
  background: rgb(204 204 204 / 95%);
  overflow: hidden;
  opacity: 0.7;
  transition: 0.2s;
}
#pagetop a:before {
  content: '';
  position: absolute;
  top: 55%;
  left: 55%;
  display: block;
  width: 14px;
  height: 14px;
  border-top: 2px solid #512765;
  border-left: 2px solid #512765;
  transform: translate(-50%, -50%) rotate(45deg);
  transition: 0.2s;
}

@media all and (min-width: 950px) {
  #pagetop {
    bottom: 67px;
  }
  #pagetop a:hover {
    opacity: 0.9;
  }
}

/*--------------------------------------
  # Common
--------------------------------------*/
@media all and (max-width: 949px) {
  .hide-m {
    display: none !important;
  }
}

/* Font size */
.small {
  font-size: 87.5%;
}

.big {
  font-size: 118%;
}

.large {
  font-size: 138%;
}

/* Color */
.fc-red {
  color: #F00;
}
.fc-gray {
  color: #666;
}
.fc-orange {
  color: #f1561f;
}

/* Space */
.mb0 {
  margin-bottom: 0;
}
.indent {
  padding-left: 1em;
  text-indent: -1em;
}

/* link */
a {
  color: inherit;
  text-decoration: underline;
}
a.link-icon {
	position: relative;
	padding-left: 0.75em;
}
a.link-icon:before {
	content: '';
	position: absolute;
	top: 0.55em;
	left: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 4px 0 4px 6px;
	border-color: transparent transparent transparent #f15a25;
}

/* text */
p {
  margin-bottom: 1.5em
}

p.aligncenter {
  text-align: center;
}

p.alignleft {
  text-align: left;
}

p.alignright {
  text-align: right;
}

/* align */
img.aligncenter,
div.aligncenter {
  display: block;
  margin: 1.5em auto;
  text-align: center;
}
img.alignleft,
div.alignleft {
  float: left;
  clear: left;
  max-width: 40%;
  margin: 0 15px 15px 0;
}
img.alignright,
div.alignright {
  float: right;
  clear: right;
  max-width: 40%;
  margin: 0 0 15px 15px;
}
div.aligncenter img,
div.alignleft img,
div.alignright img {
  display: block;
  margin-bottom: 0.2em;
}

/* List */
ul.reset,
ol.reset {
  list-style: none;
}

ul:not(.reset) {
  list-style: disc;
  margin-bottom: 1.5em;
  padding-left: 1.5em;
}

ol:not(.reset) {
  list-style: decimal;
  margin-bottom: 1.5em;
  padding-left: 1.5em;
  overflow: hidden;
}

ul:not(.reset)>li,
ol:not(.reset)>li {
  margin: 0.5em 0;
}

ul:not(.reset) ul:not(.reset),
ol:not(.reset) ul:not(.reset) {
  list-style: circle;
  margin-bottom: 0;
}

/* Table */
table {
  margin-bottom: 1.5em;
  border-top: 1px solid #CCC;
  border-left: 1px solid #CCC;
}

table caption {
  margin-bottom: 0.25em;
  font-weight: bold;
  text-align: left;
}

table th,
table td {
  padding: 5px 10px;
  border-right: 1px solid #CCC;
  border-bottom: 1px solid #CCC;
}

table th {
  font-weight: bold;
  background: #EEE;
}

@media all and (max-width: 949px) {
  .table-slider {
    overflow-y: auto;
  }
}

/* iframe */
.iframe-wrapper {
  display: block;
  margin-bottom: 1.5em;
}
.iframe-wrapper iframe {
  display: block;
  width: 100%;
}

@media all and (min-width: 950px) {
  .hide-d {
    display: none !important;
  }

  /* Link */
  a[href^="tel:"],
  a:hover {
    text-decoration: none;
  }

  /* align */
  img.aligncenter,
  img.alignleft,
  div.alignleft {
    float: left;
    clear: left;
    max-width: 40%;
    margin: 0 3em 3em 0;
  }
  img.alignright,
  div.alignright {
    max-width: 40%;
    margin: 0 0 3em 3em;
  }

  /* more-block */
  div.more-block div.more-block-body {
    height: 200px;
  }
  div.more-block div.more-block-button {
    width: 180px;
  }
}

/*--------------------------------------
  # lead
--------------------------------------*/

#lead.node {
	background: #CFF5FF;
}
#lead.node h2 {
	color: #120e0d;
}
#lead.node .btn a {
	background: #88B3BD;
	border: 3px solid;
}

/*--------------------------------------
  # feeling
--------------------------------------*/

#feeling.node {
	background: #f0f1ec;
	text-align: center;
}
#feeling.node h2 {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
}
#feeling.node h2:before {
	content: '';
	flex-shrink: 0;
	width: 72px;
	height: 100px;
	background: url(../img/img01.png) no-repeat center;
	background-size: 100% auto;
}
.box {
	margin: 0 0 1em;
	padding: 10px 20px;
}
#feeling.node .box {
	background: #e6e5e0;
}
#feeling.node .heart {
	padding: 20px 50px;
	background: url(../img/img02.png) no-repeat center bottom;
  background-size: contain;
}
#feeling.node .heart p {
	font-family: "Zen Maru Gothic", sans-serif;
	font-size: min(4.4vw, 3.0rem);
	font-weight: 600;
	line-height: 1.4;
}
ul.check-list > li {
	position: relative;
	margin: 15px 0;
	padding-left: 30px;
	font-size: min(4vw, 2.0rem);
	text-align: left;
}
ul.check-list > li:before {
	content: '';
	position: absolute;
	top: 3px;
	left: 0;
	width: 22px;
	height: 22px;
	border: 2px solid #88B3BD;
}
ul.check-list > li:after {
	content: "";
	position: absolute;
	top: 8px;
	left: 5px;
  width: 13px;
  height: 8px;
  border-left: 3px solid #88B3BD;
  border-bottom: 3px solid #88B3BD;
  transform: rotate(-45deg);
}
@media all and (max-width: 949px) {
	#feeling.node h2 {
		text-align: left;
	}
	#feeling.node .heart {
		padding-left: 0;
		text-align: left;
	}
}
@media all and (min-width: 950px) {
	#feeling.node h2 {
		gap: 40px;
	}
	#feeling.node h2:before {
		width: 92px;
		height: 130px;
	}
	.box {
		display: inline-block;
		padding: 20px 40px;
	}
	#feeling.node .heart {
		display: inline-block;
		padding: 40px 90px;
	}
	ul.check-list > li {
		padding-left: 40px;
	}
	ul.check-list > li:before {
		top: 7px;
	}
	ul.check-list > li:after {
		top: 12px;
	}
}

/*--------------------------------------
  # giveup
--------------------------------------*/

ul.flex-block {
	display: flex;
  flex-direction: column;
	gap: 20px;
}
#giveup.node dl {
	text-align: center;
}
#giveup.node dl dt {
	margin-bottom: 0.5em;
	color: #88B3BD;
	font-family: "Zen Maru Gothic", sans-serif;
	font-size: min(4.2vw, 2.2rem);
	font-weight: 600;
	line-height: 1.4;
}
#giveup.node dl dd img {
	display: block;
	width: 50%;
	margin: 0 auto;
}
@media all and (min-width: 950px) {
	ul.flex-block {
		flex-direction: row;
		justify-content: center;
		gap: 40px;
	}
	#giveup.node ul.flex-block {
		align-items: flex-end;
		gap: min(6%, 80px);
	}
	#giveup.node dl dd img {
		width: 228px;
		margin-bottom: 0.5em;
	}
}

/*--------------------------------------
  # solution
--------------------------------------*/

#solution.node {
	background: #92d1d8 url(../img/solution_bg.jpg) no-repeat center bottom;
	background-size: 100% auto;
	text-align: center;
}
#solution.node h2 {
	margin: 0.25em 0 1.75em;
	color: #fff;
	font-size: min(5.4vw, 3.0rem);
	text-shadow: 0 0 8px rgba(0,0,0,0.6);
}
#solution.node .box {
	background: #fff;
}
.lead-text {
	margin: 1em 0;
	font-family: "Zen Maru Gothic", sans-serif;
	font-size: min(4.6vw, 2.8rem);
	font-weight: 600;
	line-height: 1.4;
}
#solution.node .lead-text {
	text-shadow: 0px -2px 5px rgba(255,255,255,0.6), 2px 0 5px rgba(255,255,255,0.6), 0 2px 5px rgba(255,255,255,0.6), -2px 0 5px rgba(255,255,255,0.6), 2px 2px 5px rgba(255,255,255,0.6), 2px -2px 5px rgba(255,255,255,0.6), -2px 2px 5px rgba(255,255,255,0.6), -2px -2px 5px rgba(255,255,255,0.6);
}
#solution.node .btn a {
	border: 3px solid;
	box-shadow: 0 0 8px rgba(0,0,0,0.6);
}

/*--------------------------------------
  # step
--------------------------------------*/

#step.node h2 {
	display: flex;
	justify-content: center;
	align-items: baseline;
	margin-bottom: 2em;
}
#step.node h2 .icon {
	padding: 0 5px;
	color: #fff;
	font-size: 120%;
	text-shadow: 3px 3px 0 #f15a25, -1px -1px 0 #f15a25, 1px -1px 0 #f15a25, -1px 1px 0 #f15a25, 1px 1px 0 #f15a25;
	letter-spacing: -1px;
}
#step.node h2 .icon em {
	padding-right: 5px;
	font-size: 150%;
	font-style: normal;
}
#step.node ul.flex-block {
	gap: 30px;
	margin-bottom: 2em;
	counter-reset: count 0;
}
#step.node ul.flex-block > li {
	position: relative;
}
#step.node ul.flex-block > li:not(:last-child):before {
	content: '';
	position: absolute;
	top: calc(100% + 7.5px);
	left: 50%;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 15px 15px 0px 15px;
	border-color: #716f70 transparent transparent transparent;
  transform: translate(-50%, 0);
}
#step.node dl {
}
#step.node dl dt {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 1em;
	font-family: "Zen Maru Gothic", sans-serif;
	font-size: min(5vw, 2.8rem);
	font-weight: 600;
}
#step.node li:nth-child(1) dl dt {
	color: #cb3942;
}
#step.node li:nth-child(2) dl dt {
	color: #3ca40b;
}
#step.node li:nth-child(3) dl dt {
	color: #005376;
}
#step.node dl dt > span:not(.icon) {
	flex: 1;
	padding: 5px 0;
	border-top: 2px solid;
	border-bottom: 2px solid;
}
#step.node dl dt .icon {
	display: flex;
	flex-direction: column;
	align-items: center;
	color: #fff;
	font-size: min(3.8vw, 1.8rem);
	line-height: 1.2;
}
#step.node li:nth-child(1) dl dt .icon {
	text-shadow: 3px 3px 0 #cb3942, -1px -1px 0 #cb3942, 1px -1px 0 #cb3942, -1px 1px 0 #cb3942, 1px 1px 0 #cb3942;
}
#step.node li:nth-child(2) dl dt .icon {
	text-shadow: 3px 3px 0 #3ca40b, -1px -1px 0 #3ca40b, 1px -1px 0 #3ca40b, -1px 1px 0 #3ca40b, 1px 1px 0 #3ca40b;
}
#step.node li:nth-child(3) dl dt .icon {
	text-shadow: 3px 3px 0 #005376, -1px -1px 0 #005376, 1px -1px 0 #005376, -1px 1px 0 #005376, 1px 1px 0 #005376;
}
#step.node dl dt .icon:before {
	content: counter(count);
	counter-increment: count 1;
	margin-bottom: -3px;
	font-size: min(6.4vw, 4.4rem);
}
#step.node dl dd {
	width: 80%;
	margin: 0 auto;
	line-height: 1.4;
}
#step.node .lead-text {
	margin: 2em 0;
	font-size: min(5.4vw, 2.8rem);
}
@media all and (min-width: 950px) {
	#step.node ul.flex-block {
		gap: 50px;
	}
	#step.node ul.flex-block > li {
		flex: 1;
	}
	#step.node ul.flex-block > li:not(:last-child):before {
		top: calc(50% + 35px);
		left: calc(100% + 15px);
		border-width: 20px 0px 20px 20px;
		border-color: transparent transparent transparent #716f70;
		transform: translate(0, -50%);
	}
	#step.node li:nth-child(2) dl dt {
		letter-spacing: -3px;
	}
	#step.node dl dd {
		width: 100%;
	}
}

/*--------------------------------------
  # faq
--------------------------------------*/

#faq.node {
	background: #f0f1ec;
	text-align: center;
}
dl.faq-block {
	margin: 0 0 1.5em;
	text-align: left;
}
dl.faq-block dt {
	padding-left: 1.2em;
	font-family: "Zen Maru Gothic", sans-serif;
	font-size: min(4vw, 1.8rem);
	font-weight: 600;
	text-indent: -1.2em;
}
dl.faq-block dd {
	padding: 10px 10px 13px calc(10px + 1.2em);
	background: #e6e5e0;
	line-height: 1.4;
	text-indent: -1.2em;
	overflow: hidden;
}
@media all and (min-width: 950px) {
	#faq.node .faq-wrapper {
		display: inline-block;
	}
}

/*--------------------------------------
  # movie
--------------------------------------*/

#movie.node {
	padding-bottom: 140px;
	background: url(../img/movie_bg.jpg) no-repeat center bottom;
	background-size: 100% auto;
}
#movie.node h2 {
	color: #f05016;
}
div.youtube {
	position: relative;
	width: 560px;
	height: 0;
	margin: 0 auto;
	padding-top: 315px;
	overflow: hidden;
}
div.youtube iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
@media all and (max-width: 949px) {
	#movie.node {
		padding-bottom: 60px;
	}
	#movie.node h2 {
		text-align: left;
	}
	div.youtube {
		width: 100%;
		padding-top: 56.25%;
	}
}

/*--------------------------------------
  # buy
--------------------------------------*/

#buy.node {
	background: #fdeae3;
}
#buy.node h2 {
	color: #f05016;
	text-shadow: 0px -1px 1px #FFF, 1px 0 1px #FFF, 0 1px 1px #FFF, -1px 0 1px #FFF, 1px 1px 1px #FFF, 1px -1px 1px #FFF, -1px 1px 1px #FFF, -1px -1px 1px #FFF;
}
ul.buy-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
}
ul.buy-list > li {
	width: calc(50% - 10px);
	text-align: center;
}
ul.buy-list > li a {
	text-decoration: none;
	transition: 0.2s;
}
ul.buy-list > li a img {
	display: block;
}
ul.buy-list > li a .cart {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 90%;
	margin: 10px auto 0;
	padding: 3px 10px 4px;
	background: #f15a25;
	color: #fff;
	font-size: 87.5%;
	border: 2px solid;
	border-radius: 50vh;
	transition: 0.2s;
}
ul.buy-list > li a .cart:before {
	content: '';
	width: 15px;
	height: 15px;
	margin-right: 3px;
	background: url(../img/cart.svg) no-repeat 0 0;
	background-size: contain;
}
@media all and (min-width: 950px) {
	ul.buy-list {
		gap: 60px;
	}
	ul.buy-list > li {
		width: calc(25% - 30px);
	}
	ul.buy-list > li a:hover {
		opacity: 0.7;
	}
	ul.buy-list > li a:hover .cart {
		transform: scale(1.1);
	}
}