@charset "utf-8";
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

html{
scroll-behavior: smooth;
}

body{
font-family:'Zen Kaku Gothic New', sans-serif;
background: #FFFFFF;
}

ul li, ol li{
line-height: 1.5;
}

.clearfix:after {
	content:" ";
	display:block;
	clear:both;
}

a {
	color: #000000;
	text-decoration:underline;
	transition: all 0.3s ease-in-out 0s;
}

a:hover {
	color: #666666;
	text-decoration:none;
}

a:hover img{
opacity: 0.7
}

img{
max-width: 100%;
}


.fixed {
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 10000;
}

.flex {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap; /* Safari */
	-webkit-justify-content: space-between;
	justify-content: space-between;
	flex-wrap:wrap;
}

.flex_wrap_left {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap; /* Safari */
	flex-wrap:wrap;
	-webkit-justify-content: flex-start;
	justify-content:flex-start
}

.flex_wrap_center {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap; /* Safari */
	flex-wrap:wrap;
	-webkit-justify-content: center;
	justify-content: center;
}

.flex_wrap_end {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap; /* Safari */
	flex-wrap:wrap;
	-webkit-box-pack: end;
	-ms-flex-pack: end;
	justify-content: flex-end;
}

.clearer {
	clear: both;
}

.center{
text-align: center;
}

.sp{
display: none;
}

/********************************
main
********************************/
#main{
max-width: 768px;
width: 100%;
margin: 0 auto;
}

#main section{
padding: 30px 20px;
}

.catch{
font-size:24px;
font-weight:900;
font-family:'Zen Kaku Gothic New', sans-serif;
line-height: 1.5;
text-align: center;
margin-bottom: 20px;
}

.catch2{
font-size:24px;
font-weight:900;
font-family:'Zen Kaku Gothic New', sans-serif;
line-height: 1.5;
text-align: center;
margin-bottom: 20px;
}

.catch2 strong{
padding: 0;
background: linear-gradient(180deg, transparent 0%, transparent 50%, #fcf566 50%, #fcf566 100%);
}

.triangle {
  display: inline-block;
  width: 80px;
  height: 20px;
  background: #d4e2e2;
  clip-path: polygon(0 0, 100% 0%, 50% 100%);
}

h2{
font-size:28px;
font-weight:900;
font-family:'Zen Kaku Gothic New', sans-serif;
line-height: 1.5;
text-align: center;
margin-bottom: 30px;
}

h2 span{
padding: 0 0 5px;
background: linear-gradient(180deg, transparent 0%, transparent 70%, #88e1dc 70%, #88e1dc 100%);
}

h3{
font-size:20px;
font-weight:400;
font-family:'Zen Kaku Gothic New', sans-serif;
line-height: 1.5;
margin-bottom: 10px;
}

p{
font-size:16px;
line-height: 1.5;
}

.img{
margin: 10px 0 20px;
}

.img2{
margin: 10px 40px 20px;
}

.contact{
margin:50px 0 10px;
border: 5px solid #f5f5f5;
background: #FFFFFF;
margin-bottom: 20px;
padding: 20px 10px 10px;
text-align: center;
}

.contact p{
font-size:16px;
font-weight:400;
font-family:'Zen Kaku Gothic New', sans-serif;
line-height: 1.5;
text-align: center;
margin-bottom: 20px;
}

.contact span{
font-size:18px;
}

.contact strong{
font-size:24px;
letter-spacing: 1px;
font-weight:900;
padding: 0 0 5px;
background: linear-gradient(180deg, transparent 0%, transparent 70%, #fcf566 70%, #fcf566 100%);
line-height: 1.8;
}

.contact .tel{
font-size:32px;
font-weight:900;
font-family:'Zen Kaku Gothic New', sans-serif;
line-height: 1.5;
text-align: center;
}

.contact .tel a{
text-decoration: none;
}

.contact .tel span{
font-size:16px;
font-weight:400;
display: block
}


/********************************
sec
********************************/
#sec01{
background: #FFFFFF;
text-align: center;
}

#sec02{
background: #e3f1f9;
text-align: center;
}

#sec03{
background: #FFFFFF;
text-align: center;
}

#sec03 ul{
max-width: 320px;
text-align: left;
margin: 0 auto 20px;
}

#sec03 ul li{
font-size:16px;
line-height: 1.5;
margin-bottom: 5px;
margin-left: 1em;
text-indent: -1em;
}

#sec03 ul li:before{
content: "●";
}

.solve{
margin: 50px 20px;
font-size:32px;
font-weight:900;
font-family:'Zen Kaku Gothic New', sans-serif;
line-height: 1.5;
background: #c6e8f2;
color:#000000;
box-shadow: 0px 0px 20px 20px #c6e8f2;
text-align: center;
}

.solve span{
font-size:48px;
}

#sec04{
background: #c3f0ed;
text-align: center;
}

#sec04 h2 span{
padding: 0 0 5px;
background: linear-gradient(180deg, transparent 0%, transparent 70%, #33c2de 70%, #33c2de 100%);
}

#sec04 h3{
font-size:20px;
font-weight:900;
color: #087b91;
}

#sec04 .check{
margin:0 auto 20px;
max-width: 320px;
text-align: left;
}

#sec04 .check li{
font-size:16px;
line-height: 1.5;
margin-bottom: 5px;
margin-left: 1em;
text-indent: -1em;
}

#sec04 .check li:before{
padding-right: 5px;
font-family: 'Font Awesome 5 Free';
content: "\f058";
}

#sec04 .check li p{
text-decoration: underline;
}

#sec04 ul {
margin-bottom: 20px;
}

#sec04 ul li{
font-size:16px;
line-height: 1.5;
margin-bottom: 5px;
margin-left: 1em;
text-indent: -1em;
}

#sec04 ul li:before{
content: "・";
}

#sec04 ul li span{
font-size:36px;
font-weight:900;
}

.img p{
text-align: center;
font-size: 14px;
padding: 5px 0 20px;
}

#sec05{
background: #FFFFFF;
}

#sec05 .flex div{
width: 48%;
text-align: center;
font-size:20px;
}

#sec05 .flex div p{
margin: 0 0 10px;
}

#sec06{
background: #e3f1f9;
}

#sec06 p{
max-width: 380px;
margin: 0 auto;
}

.accordion{
margin: 20px 0 0;
}

/*ベース*/
.toggle {
	display: none;
}
.Label {		/*タイトル*/
	padding: 1em;
	display: block;
	color: #fff;
	background:#33c2de;
}
.Label::before{		/*タイトル横の矢印*/
	content:"";
	width: 6px;
	height: 6px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	-webkit-transform: rotate(45deg);
	position: absolute;
	top:calc( 50% - 3px );
	right: 20px;
	transform: rotate(135deg);
}
.Label,
.content {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transform: translateZ(0);
	transition: all 0.3s;
}
.content {		/*本文*/
	height: 0;
	margin-bottom:10px;
	padding:0 20px;
	overflow: hidden;
}
.toggle:checked + .Label + .content {	/*開閉時*/
	height: auto;
	padding:20px 0;
	transition: all .3s;
}
.toggle:checked + .Label::before {
	transform: rotate(-45deg) !important;
}

#sec06 ul li{
font-size:16px;
line-height: 1.5;
margin-bottom: 5px;
margin-left: 1em;
text-indent: -1em;
}

#sec06 ul li:before{
content: "・";
}

#sec07{
background: #FFFFFF;
text-align: center;
}

.faq{
text-align: left
}

.faq dt{
font-size:18px;
line-height: 1.5;
margin-bottom: 10px;
margin-left: 1em;
text-indent: -1em;
font-weight:900;
font-family:'Zen Kaku Gothic New', sans-serif;
}

.faq dd{
font-size:16px;
line-height: 1.5;
padding-bottom: 20px;
margin-bottom: 10px;
margin-left: 1em;
text-indent: -1em;
font-family:'Zen Kaku Gothic New', sans-serif;
border-bottom: 4px solid #F5F5F5;
}

.faq dt:before{
padding-right: 5px;
content: "Ｑ";
color:#087b91;
}

.faq dd:before{
padding-right: 5px;
content: "Ａ";
color:#CC0000;
font-size:18px;
font-weight:900;
}

#main #sec08{
background: url("../img/bg_pop_top.png") center top no-repeat, url("../img/bg_pop_bottom.png") center bottom no-repeat;
padding:80px 0;
}

#sec08 ul{
margin: 30px auto 0;
max-width: 400px;
}

#sec08 ul li{
font-size:16px;
line-height: 1.5;
margin-bottom: 5px;
margin-left: 1em;
text-indent: -1em;
text-align: left;
}

#sec08 ul li:before{
content: "・";
}

#sec09 .contact {
margin: 10px 0 10px;
}

.dots{
text-align: center;
font-size:14px;
letter-spacing: 2px;
color: #999999;
}

footer{
background: #f5f5f5;
max-width: 768px;
width: 100%;
padding: 20px;
margin: 0 auto 80px;
}

footer p{
text-align: center;
line-height: 2;
}

footer .company{
font-size:20px;
}

footer .num{
font-size:13px;
}

.footer_block a{
text-decoration: none;
padding: 15px 0;
}

.footer_block{
width: 100%;
position: fixed;
bottom:0;
background: #fcf566;
padding: 10px 0 ;
font-size:26px;
font-weight:900;
font-family:'Zen Kaku Gothic New', sans-serif;
line-height: 1;
text-align: center;
}

.footer_block span{
display: block;
font-size:12px;
font-weight: 400;
line-height: 1.2;
}

/* トップへ戻るボタン */
#page_top {
width: 30px;
height: 30px;
position: fixed;
right: 20px;
bottom: 12px;
background: #33c2de;
border-radius: 50%;
}
/*
#page_top span{
display: block;
width: 100%;
font-size:12px;
color: #FFFFFF;
position: absolute;
bottom:35%;
text-align: center;
font-family:'Zen Kaku Gothic New', sans-serif;
}
*/
/* Font Awesome */
#page_top::before {
font-family: 'Font Awesome 5 Free';
font-weight: 900;
content: '\f106';
font-size: 20px;
color: #ffffff;
position: absolute;
top: 50%;
left: 50%;
translate: -50% -50%;
}

.modal__trigger {
  cursor: pointer;
  margin: 10px 0 20px;
}

.modal__trigger p{
text-align: center;
font-size: 14px;
padding: 5px 0 20px;
}


/* モーダル本体 */
.modal__wrapper {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  z-index: 20;
  width: 100%;
  height: 100%;
}

.modal__layer {
  height: 100%;
  background: rgba(50, 50, 50, .85);
  cursor: pointer;
}

.modal__container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
width: 98%;
}

/* モーダルを閉じるボタン */
.modal__close {
  position: absolute;
  top: -44px;
  right:0;
  width: 44px;
  height: 44px;
  background: rgba(50, 50, 50, 1);
  cursor: pointer;
  transition: opacity .6s;
}

.modal__close:hover {
  opacity: .6;
}

.modal__close:before,
.modal__close:after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 1px;
  background: #fff;
  content: '';
}

.modal__close:before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.modal__close:after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.modal__content .modal__image img {
  width: 100%;
}

/*====================================================================
slick
====================================================================*/

.sliderArea {
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
}

.slick-slide {
  margin: 0;
}

.slick-slide img {
  width: 100%;
  height: auto;
}
.slick-slide {
  transition: all ease-in-out .3s;
}


/********************************
レスポンシブ
********************************/

@media screen and (min-width: 768px) {
	 a[href^="tel:"] {
		 pointer-events: none;
		 cursor: default;
	}
}

@media screen and (max-width: 580px) {
.pc{
display: none;
}

.sp{
display: block;
}

#sec03 ul{
max-width:auto;
text-align: left;
margin: 0 40px 20px;
}

#sec04 .check{
margin:0 0 20px;
max-width: auto;
}

#main #sec08{
background: url("../img/bg_pop_top.png") center top no-repeat, url("../img/bg_pop_bottom.png") center bottom no-repeat;
background-size: 100% auto;
padding:50px 0;
}

#sec08 ul{
margin: 20px 20px 0;
max-width: 100%;
}

#sec08 ul li{
font-size:14px;
}

/* トップへ戻るボタン */
#page_top {
right: 5px;
}

#sec04{
text-align: left;
}
    }