@charset "UTF-8";


/*
■1：ELEMENTS
■2：COMMON
■3：index
■4：Contents
*/

/****************************************

ELEMENTS

*****************************************/
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');
body, html {
  /* important */
  height: 100%;
}

html{font-size: 62.5%; height:100%; overflow-y:scroll;}

body {
	margin: 0;
	padding: 0;
	font-family: "Oswald", "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
	font-weight: normal;
	font-size: 1.6rem;
  color: #000;
	line-height: 2.4em;
  letter-spacing: 0.0;
	height:100%;
}

h1,h2,h3,h4,h5,h6{font-weight: 800; word-break: auto-phrase;}
ul, li, dl, dd, dt {
  list-style: none;
}
img, img a {
  border: 0;
  vertical-align: bottom;
}
header, footer, nav, section, article, figure, aside, ul, li, dl, dd, dt {
  display: block;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
a {
	text-decoration: none;
	-webkit-transition: all .2s;
	transition: all .2s;
}

a:hover{
	text-decoration: none;
	-webkit-transition: all .2s;
	transition: all .2s;
}

.AF_B{
  font-family: "Afacad Flux";
  font-weight: 800;
}
.AF_S{
  font-family: "Afacad Flux";
  font-weight: 400;
}
.M_Center{text-align: center; font-weight: bold;}
.Center{text-align: left;}
.Left{text-align: left;}
.Right{text-align: right;}

strong{font-size: 2.4rem;}
.BLUE{color:#214b71;}


img{ width: 100%;}

.pc{display: none;}
.sp{display: block;}

.mt10{ margin-top: 10px;}
.mt20{ margin-top: 20px;}
.mt30{ margin-top: 30px;}
.mt40{ margin-top: 40px;}
.mt50{ margin-top: 50px;}
.mt60{ margin-top: 60px;}
.mt70{ margin-top: 70px;}
.mt80{ margin-top: 80px;}
.mt90{ margin-top: 90px;}
.mt100{ margin-top: 100px;}

@media screen and (min-width: 768px) {
  .pc{display: block;}
  .sp{display: none;}
  .Center{text-align: center;}
  .Left{text-align: left;}
  .Right{text-align: right;}
}

/****************************************

COMMON

*****************************************/
header{
  width: 100%;
  padding: 5% 3%;
  z-index: 9999;
  top: 0;
  display: flex;
  justify-content: space-around;
  background: rgba(255,255,255,1);
}
.H_logo{ max-width: 300px; width: 100%;}
.H_LINE{
  max-width: 40px;
  background: #06C755;
}
.scrolled{
  background-color: transparent;
  transition: background-color 0.5s ease, box-shadow 0.5s ease, opacity 0.5s ease;
  background: rgba(255,255,255,0.8);
}

section{
  padding: 30px 3%;
  opacity: 0;
  transform: translateY(50px);
  transition: none;
}

h2{
  text-align: center;
  margin: 0px 0 20px !important;
  line-height: 100px;
  position: relative;
}
h2:before{
  content: "";
  position: absolute;
  background: url(../img/h2.png) center center no-repeat;
  width: 100%;
  height: 100%;
  left: 0;
}

.Wrapper{
  max-width: 900px;
  width: 100%;
  padding:50px 3%;
  margin: 0 auto;
}

.Colum2{
display: grid;
grid-template-columns: 2fr;
grid-template-rows: max-content max-content 1fr auto;
grid-column-gap: 30px;
grid-row-gap: 30px;
}


.LinkBtn01 a{
  display: block;
  color: #FFF;
  text-align: center;
  font-weight: 800;
  font-size: 2.0rem;
  padding: 5px 10px;
  max-width: 300px;
  width: 80%;
  margin: 40px auto;
  background: linear-gradient(90deg, rgba(45,148,197,1) 0%, rgba(30,163,136,1) 50%,  rgb(11, 207, 167) 100%);
  background-size: 200% 100%;
}
.LinkBtn01 a:hover{
  background-position: 100% 0;
}

.Colum2{
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;
  grid-column-gap: 30px;
  grid-row-gap: 30px;
}

.Colum2-R{
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;
  grid-column-gap: 30px;
  grid-row-gap: 30px;
}
.Colum2-R > div:nth-child(1){
  order: 1;
}
.Colum2-R > div:nth-child(2){
  order: 2;
}

#CONTACT_CTA p{color: #FFF;}

@media screen and (min-width:481px) {

}

@media screen and (min-width: 768px) {
header{
  width: 100%;
  padding: 20px;
  position: fixed;
  z-index: 9999;
}

.H_logo{ max-width: 480px; width: 100%;}
.H_LINE { max-width: 60px;}
.Colum2{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  grid-column-gap: 30px;
  grid-row-gap: 30px;
}

.Colum2-R{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  grid-column-gap: 30px;
  grid-row-gap: 30px;
}
.Colum2-R > div:nth-child(1){
  order: 2;
}
.Colum2-R > div:nth-child(2){
  order: 1;
}

}

@media screen and (min-width: 960px) {
}


/****************************************

index

*****************************************/
#KV{
  background: url(../img/kv_sp.jpg) no-repeat center center;
  background-size: cover;
  position: relative;
  padding: 10px;
  height: 80vh;
  overflow: hidden;
}
#KV:before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
    height: 120%;
    width: 120%;
    display: block;
  background: url(../img/kv_bg.png);
}
.KV_title{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}
.KV_title:before{
  content: "";
  background: rgba(43,192,248,0.8);
  display: block;
  position: absolute;
  width: 120%;
  height: 20vh;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-7.5deg);
  z-index: -1;
}
.KV_title img,
.KV_img img{
  width: 95%;
  max-width: 800px;
  margin: 0 auto;
  z-index: 10;
}

.KV_img{
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
}

.CTA{
  background: #06C755;
}
.CTA .Wrapper{
  padding: 0 3%;
}

.CTA_BTN a{
  background: rgba(255,255,255,1.0);
  color: #06C755;
  font-weight: bold;
  letter-spacing: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  margin: 20px auto 0;
  border-radius: 50px;
  width: 90%;
}
.CTA_BTN a span{
  display: inline-block;
  width: 40px;
  margin: 0 10px 0 0;
}
#Whatis{
  background: url(../img/section01_bg.png) top center no-repeat;
  background-size: cover;
}
.Whatis_List ul{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr;
  grid-column-gap: 10px;
  grid-row-gap: 0px;
  align-items: stretch;
  margin: 0;
  padding: 0;
}

.Whatis_List li{
  border-radius: 3px;
  border: 1px solid #DDD;
  background: #FFF;
  font-size: 1.4rem;
  letter-spacing: 0;
  text-align: center;
  color: #2f91cf;

}
.Whatis_List li span{
  font-size: 1.0rem;
  display: inline-block;
}

.Slider{
  width: 90%;
  margin: 0 auto;
}
.slick-prev:before, .slick-next:before{
  color: #214b71 !important;
}
.ServiceSlider .slick-slide{
  border: 1px solid #DDD;
  border-radius: 5px;
  margin: 0 5px;
  overflow: hidden;
}
.Slider_in{
  padding: 20px 10px 10px;
}
.Slider_in h3{
  text-align: center;
  color: #2f91cf;
}
.Slider_in p{
  margin: 10px 0 0;
  color: #000;
}

#Merit{
  background: #e4f6eb;
}
.Merit{
  display: grid;
  grid-template-columns: 1fr;
  grid-column-gap: 10px;
  grid-row-gap: 30px;
}

.Merit_box{
  background: #06c755;
  border-radius: 5px;
  padding: 10px;
}
.Merit_in{
  display: grid;
  grid-template-columns: 1fr 4fr;
  grid-template-rows: 1fr;
  grid-column-gap: 10px;
  grid-row-gap: 0px;
  align-items: center;
}
.Merit_img{
  background: #FFF;
  border-radius: 5px;
  padding: 5px;
}
.Merit_box h3{
  color: #FFF;
  font-size: 1.8rem;
  letter-spacing: 0;
}
#Merit .Merit p{
  background: #FFF;
  border-radius: 5px;
  padding: 5px;
  margin: 10px 0 0;
  letter-spacing: 0;
}

.Support_ttl{
  color: #2f91cf;
  text-align: center;
  font-size: 1.8rem;
}

.Support_QA dt {
  cursor: pointer;
  background: #c6f4ff;
  border-radius: 5px;
  padding: 10px 10px 10px 40px;
  margin: 30px 0 0;
  position: relative;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.Support_QA dd {
  padding: 10px 10px 10px 40px;
  position: relative;
}

.Support_QA dt:before{ content: "Q"; color: #004876;}
.Support_QA dd:before{ content: "A"; color: #d70000;}

.Support_QA dt:before,
.Support_QA dd:before{
  position: absolute;
  font-size: 2.8rem;
  left: 10px;
}

.H3{
  text-align: center;
  margin: 50px 0 0;
  position: relative;
}
.H3:before{
  content: "";
  position: absolute;
  height: 1px;
  width: 100%;
  left: 0;
  top: 50%;
  background: #2f91cf;
  z-index: 0;
}
.H3 span{
  background: #FFF;
  display: inline-block;
  position: relative;
  z-index: 2;
  padding: 0 15px;
}

.Work_Wrapper{
  display: grid;
  grid-template-columns: 1fr;
  grid-column-gap: 10px;
  grid-row-gap: 0px;
  margin: 0;
  padding: 0;
}
.WorkBox{
  margin: 30px 0 0;
}

.WorkBox h4{
  text-align: center;
  margin: 10px 0 5px;
  padding: 0 0 5px;
  color: #2f91cf;
  border-bottom: 1px solid #2f91cf;
}
.WorkBox h4 span{
  font-size: 1.2rem;
}
.wajoBox ul{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 10px;
  grid-row-gap: 0px;
  margin: 0;
  padding: 0;
}
.wajoBox ul li{
  text-align: center;
  margin: 30px 0 0;
}
.wajoBox ul li p{
  margin: 5px 0 0;
}

.Company{
  margin: 30px 0 0;
}

.Company table{
  width: 100%;
  border-top: 1px solid #DDD;
  border-left: 1px solid #DDD;
}
.Company table th,
.Company table td{
  border-right: 1px solid #DDD;
  border-bottom: 1px solid #DDD;
  padding: 10px;
}

.Company table th,
.Company table td{
  width: 100%;
  display: inline-block;
}

.Company table th{
  background: #f1f1f1;
}
footer{
  margin: 0 0 220px;
}

.copy_footer{
  padding: 10px;
  font-size: 1.2rem;
  text-align: center;
  border-top: 1px solid #e2e2e2;
  border-bottom: 1px solid #e2e2e2;
}

.recaptcha_alert{
  padding: 10px;
  font-size: 1.2rem;
  border-bottom: 1px solid #e2e2e2;
}
.recaptcha_alert a{color: #000;}

.F_footer{
  background: #333;
  color: #FFF;
  font-size: 1.2rem;
  text-align: center;
  padding: 20px 10px 220px;
}

.badgeArea_list{
  display: flex;
  justify-content: center;
  margin: 10px auto;
  max-width: 300px;
}
.badgeArea_list div{
  padding: 5px;
}

#Footer_CTA{
  height: 220px;
  background: #06C755;
}

#Footer_CTA {
  position: fixed;
  left: 0;
  transform: translateX(0%);
  bottom: 0;
  z-index: 9999;
  pointer-events: auto;
  display: block;
  width: 100%;
}
.mxCTA{
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}

.inner_wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 40px 0 0;
}
.inner_wrap iframe {
  width: 100%;
  height: 100%;
}

@media screen and (min-width: 768px) {
#KV{
  background: url(../img/kv_pc.jpg) no-repeat center center;
  background-size: cover;
}

  .M_Center{
    font-size: 1.8rem;
    line-height: 3.8rem;
  }
.Merit{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 30px;
  grid-row-gap: 30px;
}

.Merit_in{
  display: grid;
  grid-template-columns: 1fr 5fr;
  grid-template-rows: 1fr;
  grid-column-gap: 10px;
  grid-row-gap: 0px;
}
.wajoBox ul{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-column-gap: 10px;
  grid-row-gap: 0px;
  margin: 0;
  padding: 0;
}
.Company table th,
.Company table td{
  display: table-cell;
}
.Company table th{width: 30%;}
.Company table td{width: 70%;}

.recaptcha_alert{
  text-align: center;
}
}