/* A Modern CSS Reset */
 
*,*::before,*::after{box-sizing:border-box}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}ul[role="list"],ol[role="list"]{list-style:none}html:focus-within{scroll-behavior:smooth}body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5;}a:not([class]){text-decoration-skip-ink:auto}img,picture{max-width:100%;display:block}input,button,textarea,select{font:inherit}@media(prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}


*{

/*	font-family: fot-tsukuardgothic-std,sans-serif;*/
	font-family: "Noto Sans JP", Helvetica,sans-serif;

	font-weight: 400;
	font-style: normal;
	/*font-size: 20px;*/
	font-size: 1em;
	color: #555;
	box-sizing: border-box
}

body {
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}


.d-flex{display: flex;justify-content: space-between}
.br-block{display: block!important;}

.wrp{width: 1500px;margin: 0 auto;}
.BG-1{background-color: #eeeeee}
/*.BG-2{background-image:url(../img/bg.png) }*/

/*header・mainvisual*/
h1 a{font-size: 50px;
    text-decoration: none;
    font-weight: 700;}
header .d-flex{align-items: center}
.nav-list .btn {
	width: 150px;
	text-align: center;
	padding: 7%;
	color: #fff;
	font-weight:700
}
.mvpc{display: block}
.mvsp{display: none}
.mv-wrp{position: relative}
/*contactLink*/
.link .link-area {
	display: flex;
	justify-content:space-between;
	padding: 2% 3%;
	align-items: center
}
.link-area p{font-size: 25px}
/*.link-area p br{display: none}*/

/*Btn-Base*/
.btn{
	background-color: #f8b551;
	padding: 1% 5%;
	color: #fff;
	text-decoration: none;
	border-radius: 20px;
	font-weight:700
	}
	.btn:hover{
		background-color: #555;
		transition-property: all;
	transition-duration: 300ms;
	transition-delay: 0s;
	transition-timing-function: ease;
}
/*midashi*/
section{padding: 3% 0}
section h2{font-size: 70px;font-weight: 700;margin-bottom: 3%;}
section h2 br{display: none;}
section h2 span{font-size: 30px}

/*service*/
.col-3 {
	width: 30%;
	text-align: center;
	box-shadow: 0 2.5rem 2rem -2rem hsl(200 50% 20% / 40%);
	border: 1px solid hsl(0 0% 90%);
	background-color: #fff;
}
#service .col-3 {
	padding: 2%;
}

.col-3 h3{
	font-size: 30px;
	font-weight: 700;
	margin-bottom: 5%;
}
.ex{
	padding: 2% 0 1%;
	text-align: right;
}

/*FEATURES*/
#features .col-3 {
	border-radius: 40px;
	overflow: hidden;
}
.featuresM{
	background-color: #f8b551;
	color: #fff;
	padding: 3% 0;
	font-size: 25px
}
#features .col-3 h3{
    margin: 4% 0;
}
.featuresP{
	padding-bottom: 5%;
	text-align: center;
}
.ex2{
	padding: 2% 0 1%;
}

/*FLOW*/
#flow img{margin: 0 auto}
.col-4 {
	width: 24%;
	background-color: #fff;
	border-radius: 40px;
	overflow: hidden;
	box-shadow: 0 2.5rem 2rem -2rem hsl(200 50% 20% / 40%);
	border: 1px solid hsl(0 0% 90%);
	}

.flow-M{
	display: flex;
	align-items: center;
}
.flow-M h3{
	font-size: 30px;
	font-weight: 700;
	padding-left: 3%;
}
.flow-M div{
	background-color: #f8b551;
	padding: 3% 6%;
	color: #fff;
	font-size: 45px;
	border-end-end-radius: 40px;
	border-radius: 40px 0 40px 0;
	display: block;
	text-align: center;
	font-weight: 700;
}

/*Q&A*/
.accordion{width: 80%;margin: 0 auto}
.accordion-hidden{
	display: none;
}
.accordion-open {
	display: block;
	padding: 2%;
	background: #fff;
	cursor: pointer;
	margin: 1.5% 0 0;
	position: relative;
	border: 1px solid #f5f5f5;
}
.accordion-open::before,
.accordion-open::after {
	content: '';
	width: 20px;
	height: 3px;
	background: #000;
	position: absolute;
	top: 50%;
	right: 5%;
	transform: translateY(-50%);
}
.accordion-open::after {
	transform: translateY(-50%) rotate(90deg);
	transition: .5s;
}
.accordion-hidden:checked + .accordion-open:after {
	transform: translateY(-50%) rotate(0);
}
.accordion-close {
	display: block;
	height: 0;
	overflow: hidden;
	padding: 0;
	opacity: 0;
	transition: 0.5s;
	color: #fff
}
.accordion-hidden:checked + .accordion-open + .accordion-close {
	height: auto;
	opacity: 1;
	padding: 2%;
	background: #f8b551;
	margin-bottom: 1%
}
.accordion-close span{color: #fff}


.target {
  display: none;

}
.target.onoff {
  display: block;
}

.button{
background-color: #f8b551;
    padding: 1% 5%;
    color: #fff;
    text-decoration: none;
    border-radius: 20px;
    font-weight: 700;
    width: 50%;
    margin: 3% auto 0;
    text-align: center;
}
.button:hover{
background-color: #555;
    transition-property: all;
    transition-duration: 300ms;
    transition-delay: 0s;
    transition-timing-function: ease;
}
/*INFO*/
.info-Wrp{
	padding: 0 10%;
}
.info-Box{
	padding: 2% 0%;
	border-bottom: 1px solid #ccc;
}
.info-Box p{
margin-bottom: 1%;
}
.info-Box p span{
	padding: 0 1.5%;
}

.blogWrp {height:700px;overflow:auto;}

/*CONTACT*/
label, input[type=text]{
 display:block;
}
input{
/*-webkit-appearance: none;*/
}
::placeholder {
  color: #999;
}
.form-inner{
	display: flex;
	width: 80%;
	margin: 0 auto 1%;
	align-items: center;
}
.form-inner2{
	/*display: flex;*/
	width: 70%;
	margin: 30px auto;
	align-items: center;
}
.form-inner>label{
	width: 20%;
	text-align: right;
	padding-right: 2%;
	font-weight: bold;
}
.form-inner>input,.form-inner>textarea,.form-inner p>input{
	width: 80%;
	padding: 1%;
	border: 1px solid #ccc;
background: #fff3e0;
}
.form-inner>input[type=file]{
	width: 50%;
	padding: 1%;
}
.form-inner>select{
	padding: 1%;
background: #fff3e0;
}
.ym>input[type=text] {width: 35%;flex-direction: unset;}


.submit {
	width: 30%;
	margin: 0 auto;
	display: block;
	background-color: #f8b551;
	padding: 1% 5%;
	color: #fff;
	text-decoration: none;
	border-radius: 20px;
	font-weight: 700;
	border: none;
}

.submit:hover {
    background-color: #555;
    transition-property: all;
    transition-duration: 300ms;
    transition-delay: 0s;
    transition-timing-function: ease;
}
/*OPERATING COMPANY*/
.BG-3{background-color: #e5e5e5;}
#campany h3{font-size: 35px;font-weight: 700;margin-bottom: 1%;}
#campany h3 span{font-size: 20px}
.overview-inner{display: flex;margin: 0 0 10px 0;}
.overview-inner p{
	padding: 1% 2%;
	background-color: #fff;
	margin-left: 1%;
	font-size: 14px;
}
.campany-Box{margin-bottom: 2%}

.message-wrp>p{padding: 0 3% 3%;font-size: 25px;line-height: 2em;text-align: justify}
.daihyou{text-align: right;font-size: 25px;display: block}
.vision-wrp{
display: flex;
background-color: #fff;
align-items: center;
padding: 0% 5%;
justify-content: center;
    margin-bottom: 2%;
}

.vision-wrp div:first-child{
	width: 10%
}
.vision-wrp div:nth-of-type(2){
	line-height: 2em;
		width: 30%

}

.vision-wrp h4{
	font-size: 45px;
	color: #f8b552;
	font-weight: 700;
}
.vision-wrp div:nth-of-type(2) p{
	font-size: 30px;
	font-weight: 700;
}

.vision-wrp div:last-of-type{
	width: 60%
}
.vision-wrp h5{
	font-size: 35px;
	font-weight: 700;
	margin: 0;
}
/*.refeBox img{width: 33.333%;height: 100%}*/
#reference p{text-align: center;padding: 3% 0 0;font-size: 25px;}

/*footer{background-color: #707070;}*/
footer{background-color: #fff;}
.footer-inner{width: 1500px;margin: 0 auto;align-items: center;color: #fff}

footer p a{font-size: 50px;
    text-decoration: none;
    font-weight: 700;color: #fff}
.footer-inner li {border: none!important}
/*.footer-inner li a{color: #fff}*/
.footer-inner li a{color: #555}

/*.copy{text-align: center;font-size: 14px;color: #fff}*/
.copy{text-align: center;font-size: 14px;color: #555}


/* ページTOPに戻る */
.pagetop{
    display: none;
    position: fixed;
    right: 15px;
    bottom: 60px;
}
.pagetop a{
    display: block;
    font-size: 0;
    width: 50px;
    height: 50px;
    text-align: center;
    background: #555;
    border-radius: 50%;
    line-height: 50px;
}
.pagetop a i{
    font-size: 20px;
    color:#fff;
    line-height: 50px;
}

/*PRIVACY POLICY*/
.pplogoarea {
    background: #e7f8ff;
}
.pparea{
	width: 75%;
	margin: 0 auto; 
}
.pparea ul{
	list-style: disc;
	width: 100%;
	margin: 0;
	height: 100%;
	overflow-y: hidden;
	webkit-overflow-scrolling: initial;
	overflow-scrolling: initial;
}
.pparea li {
	padding:0 0 0.5% 1em; 
	display: block; 
}
.pparea li::before {
	content: "●"; 
}
.pparea h3 {
	text-align: left;
	font-size: 25px;
	font-weight: bold;
	margin: 3% 0 0; 
	position: relative;
	padding-left: 1em;
	border-bottom: 1px solid #f8b551;
}
.pparea h3::before {
	content: "";
	position: absolute;
	top: 19%;
	left: 0;
	width: 0.5em;
	height: 1.3em;
	background: #f8b551;
}
.pp{
	padding: 3% 0;
}
p.ppreed{
	text-align: center;
}

@media screen and (max-width: 1500px) { 
	.d-flex {flex-direction: initial;}
	/*section {padding: 3% ;}*/
	section  p br{display: none}
	.mv img{width: 100%}
	.wrp{width: 80%;margin: 0 auto;}
	header .d-flex{background-color: #fff;}
	.col-3 h3 {font-size: 2vw;}
	.featuresM {font-size: 1.8vw;}
	.featuresP {padding: 0 5% 5%;}
	.flow-M h3 {font-size: 1.8vw;}
	.accordion {width: 100%;}
	.vision-wrp h5 {font-size: 2vw;}
	.vision-wrp h4 {font-size: 3vw;}
	.vision-wrp div:nth-of-type(2) p {font-size: 2vw;}
	.footer-inner{width: 100%}
}
@media screen and (max-width: 960px) {
	/**{font-size: 18px}*/
	*{font-size: 1em}
	.wrp{width: 100%;margin: 5% auto;padding: 0 2%;}
	#nav{width: 92%; position: fixed;z-index: 999;margin: 0!important;padding: 0!important; top: 0;background-color: #fff;}
	.menu{text-align: center;width: 100%;}
	.mvpc{display: none}
	.mvsp{display: block}
	.mv-inner{display: none}
	.nav-list .btn{width: 100%}
	.col-3{margin-bottom: 7%}
	.col-3 img{display: inline-block}
	.link-area p{font-size: 2.5vw}
	section h2{font-size: 7vw;    line-height: 1em;}
	section h2 br{display: block;}
	section h2 span{font-size: 3vw}
	.col-4{width: 25%;margin-bottom: 4%}
	.ex {padding: 2% 0 1%;text-align: justify;}
	#flow .d-flex{flex-wrap: wrap;}
	.col-3 h3 {font-size: 2vw;}
	.link .link-area {margin: 0;}
	.overview-inner,.message-wrp {flex-direction: column;margin: 0 0 10px 0;}
	.overview-inner p {margin-bottom: 1%;}
	.vision-wrp div:first-child{width: 30%}
	.vision-wrp div:nth-of-type(2){line-height: 2em;width: 70%}
	.vision-wrp div:last-of-type{	width: 100%;text-align: center;padding-bottom: 4%;}
	.vision-wrp {flex-wrap: wrap;}
	.vision-wrp img{margin-left: auto}
	.vision-wrp h5 {font-size: 3vw;}
	.vision-wrp h4 {font-size: 5vw;}
	.vision-wrp div:nth-of-type(2) p {font-size: 3.5vw;}
	.message-wrp>div {width: 100%;}
	.message-wrp>p {width: 100%;font-size: 14px;}
	.footer-inner{flex-direction: column}
	.form-inner{width: 95%;flex-direction: column;}
	.form-inner>label{width: 100%;text-align: left;}
	.form-inner>input,.form-inner>textarea{width: 100%;background: #fff3e0;}
	.form-inner>select{width: 90%;background: #fff3e0;flex-direction: unset;}
	.form-inner>input[type=file]{width: 100%;padding: 1%;}
  .form-inner>select{padding: 1%;}

	.form-inner2{width: 90%;flex-direction: unset;}
	.form-inner2>input[type=text]{width: 100%;}
  .info_sp {display: none}
  .blogWrp {height: auto}
  .ym,.ymd {width: 100%;margin: 20px 0;flex-direction: unset;}
  .ym>input[type=text] {width: 80%;flex-direction: unset;}
  .ymd>select {width: 100%;flex-direction: unset;}
	.submit{width: 80%;margin: 6% auto 0;padding: 3%;}
	.pparea{width: 100%;}
	.pparea ul{padding: 0;}
	.init {display: initial;}
}
@media only screen and (max-width: 640px){
	/*section{padding: 6% 3% 3%!important;}*/
	.link .link-area {flex-direction: column;padding: 8% 0;margin: 0;}
	.link-area p{font-size: 6vw;font-weight: bold;text-align: center}
	section h2{font-size: 10vw;}
	section h2 span{font-size: 6vw}
	.btn {width: 80%;padding: 3%;text-align: center;margin-top: 10px;}
	.d-flex {flex-direction: column;}
	.link-area p br{display: block}
	.flow-M h3 {font-size: 5.8vw;}
	.col-3{width: 100%}
	.col-3 h3 {font-size: 6vw;}
	.featuresM {font-size: 5vw;}
	#features img{width: 70%;margin: 0 auto;}
	#flow img{width: 60%;margin: 0 auto;}
	.col-4{width: 100%;margin-bottom: 4%}
	.flow-M div {font-size: 8vw;}
	.accordion {width: 100%;}
	.accordion-open {padding: 2% 10% 2% 2%;}
	.vision-wrp{margin-bottom: 10%;}
	.vision-wrp h5 {font-size: 4vw;}
	.vision-wrp h4 {font-size: 6vw;}
	.vision-wrp div:nth-of-type(2) p {font-size: 5vw;}
	.refeBox img{width: 80%;margin: 0 auto}
	#campany h2{line-height: 1}
	.daihyou {font-size: 6vw;}
}


/* マーカーアニメーション */
.marker-animation.active {
  background-position: -100% .5em;
}
.marker-animation {
  background-image: -webkit-linear-gradient(left, transparent 50%, rgb(255, 250, 153) 50%);
  background-image: -moz-linear-gradient(left, transparent 50%, rgb(255, 250, 153) 50%);
  background-image: -ms-linear-gradient(left, transparent 50%, rgb(255, 250, 153) 50%);
  background-image: -o-linear-gradient(left, transparent 50%, rgb(255, 250, 153) 50%);
  background-image: linear-gradient(left, transparent 50%, rgb(255, 250, 153) 50%);
  background-repeat: repeat-x;
  background-size: 200% .8em;
  background-position: 0 .5em;
  transition: all 2s ease;
  font-weight: bold;
}
.m-blue {
  background-image: -webkit-linear-gradient(left, transparent 50%, rgba(107, 182, 255, 0.24) 50%);
  background-image: -moz-linear-gradient(left, transparent 50%, rgba(107, 182, 255, 0.24) 50%);
  background-image: -ms-linear-gradient(left, transparent 50%, rgba(107, 182, 255, 0.24) 50%);
  background-image: -o-linear-gradient(left, transparent 50%, rgba(107, 182, 255, 0.24) 50%);
  background-image: linear-gradient(left, transparent 50%, rgba(107, 182, 255, 0.24) 50%);
  background-repeat: repeat-x;
  background-size: 200% .8em;
  background-position: 0 .5em;
  transition: all 2s ease;
  font-weight: bold;
}
.m-green {
  background-image: -webkit-linear-gradient(left, transparent 50%, rgba(151, 232, 154, 0.69) 50%);
  background-image: -moz-linear-gradient(left, transparent 50%, rgba(151, 232, 154, 0.69) 50%);
  background-image: -ms-linear-gradient(left, transparent 50%, rgba(151, 232, 154, 0.69) 50%);
  background-image: -o-linear-gradient(left, transparent 50%, rgba(151, 232, 154, 0.69) 50%);
  background-image: linear-gradient(left, transparent 50%, rgba(151, 232, 154, 0.69) 50%);
  background-repeat: repeat-x;
  background-size: 200% .8em;
  background-position: 0 .5em;
  transition: all 2s ease;
  font-weight: bold;
}
.m-red {
  background-image: -webkit-linear-gradient(left, transparent 50%, rgba(255, 88, 88, 0.2) 50%);
  background-image: -moz-linear-gradient(left, transparent 50%, rgba(255, 88, 88, 0.2) 50%);
  background-image: -ms-linear-gradient(left, transparent 50%, rgba(255, 88, 88, 0.2) 50%);
  background-image: -o-linear-gradient(left, transparent 50%, rgba(255, 88, 88, 0.2) 50%);
  background-image: linear-gradient(left, transparent 50%, rgba(255, 88, 88, 0.2) 50%);
  background-repeat: repeat-x;
  background-size: 200% .8em;
  background-position: 0 .5em;
  transition: all 2s ease;
  font-weight: bold;
}