@charset "UTF-8";

html {
  scroll-behavior: smooth;
}

html,
body {
  height: 100%;
  font-size: 62.5%;
  width: 100%;
}

*,
*::after,
*::before {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
  font-size: inherit;
  line-height: inherit;
}

body {
  background-color: #fff;
  color: #2F2F2F;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 2rem;
  line-height: 1.9;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  word-wrap: break-word;
}

main {
  display: block;
  width: 100%;
  z-index: 1;
  overflow-x: hidden;
}

ul,
li {
  list-style-type: none;
}

a {
  text-decoration: none;
  cursor: pointer;
  color:#2F2F2F;
  transition: opacity .6s ease;
}
a:hover{
  opacity: 0.7;
}
img {
  vertical-align: bottom;
  max-width: 100%;
  height: auto;
}

.sp-only {
  display: none!important;
}
/* header --------------------------------------------*/
.header{
  padding:1.6rem 0;
}
.page-width {
  margin: 0 auto;
  width:91.66%;
}

.header-logo {
  max-width: 420px;
  width: 100%;
}

/* kv -------------------------------------------------*/
.kv {
  position: relative;
  margin:0 auto;
  width:91.66%;
}

.kv-back {
  width: 100%;
  height: calc(100vh - 15.7rem);
  min-height: 600px;
  max-height: 918px;
  position: relative;
  border-radius: 30px;
  overflow:hidden ;
}

.kv-back img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}

.kv-content {
  position: absolute;
  left: 5rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}

.kv-info {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.kv-ttl {
  font-size: 5rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.6;
  text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}

.kv-txt {
  font-size: 2rem;
  font-weight: 400;
  color: #fff;
  text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
  max-width: 625px;
}
/*  heading-------------------------------------------------*/
.heading{
  background-color: #E8F3FC;
  padding:6.6rem 0;
  margin-top:9.7rem;
}
.flex{
  display: flex;
  gap:4.6%;
  max-width: 1760px;
  margin:0 auto;
}
.flex-info{
  width:39.8%;
}
.section-ttl{
  margin-bottom: 2rem;
}
.section-ttl h2,
.section-ttl h3{
 font-size: 3.4rem;
  font-weight: 700;
  line-height: 1.6;
}
.flex-img{
  width:55.6%;
  border-radius: 30px;
  overflow: hidden;
  height:fit-content;
}
.flex-img img{
  width: 100%;
  height: auto;
  aspect-ratio: 1056 / 739;
  object-fit: cover;
}
/*  service-------------------------------------------------*/
.service{
  padding:14.8rem 0 20rem;
}
.center{
  text-align: center;
}
.service-flex{
  display: flex;
  justify-content: center;
  gap:4.8%;
  margin:4rem auto 3rem;
  max-width: 1673px; 
}
.service-item{
  width:calc((100% - 14.4%)/4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap:1.5rem;
  text-align: center;
}
.servicr-img{
  border-radius: 30px;
  overflow:hidden;
}
.servicr-img img{
  width:100%;
  height:100%;
  object-fit: cover;
  aspect-ratio: 1/1;
}
.servicr-ttl{
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.36;
}
/*  case-------------------------------------------------*/
.case{
  background-color: #1677CC;
  padding:8rem 0;
}
.white{
  color:#fff;
}
.case-content{
  background-color: #fff;
  padding:6rem 5rem;
  max-width: 1491px;
  margin:6.8rem auto 0;
}
.case-slider .slick-list {
  margin: 0 -50px;
}
.case-slider .slick-slide {
  margin: 0 50px;
}
.dots-box{
  margin-top: 4.4rem;
}
.dots-wrap {
    display: flex;
    justify-content: center;
    gap:2.8rem;
}

.dots-wrap li {
    width: 12px;
    height: 12px;
    background: #72ADE1;
    border-radius: 50%;
    cursor: pointer;
}
.dots-wrap li:hover,
.dots-wrap li.slick-active {
    background: #FDDB21;
}
.dots-wrap li button {
    display: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    padding: 0;
    border: none;
    background-color: transparent;
}
.case-box{
  display: flex!important;
  gap:3.3%;
}
.case-img{
  width:50%;
  border-radius: 30px;
  overflow: hidden;
  height:fit-content;
}
.case-img img{
  width: 100%;
  height:100%;
  aspect-ratio: 693 / 445;
  object-fit: cover;
}
.case-info{
  width:46.7%;
}
.case-ttl{
   font-size: 3.4rem;
  font-weight: 700;
  line-height: 1.6;
  margin-bottom: 2rem;
}
/*  use-------------------------------------------------*/
.use{
  padding:18rem 0;
}
.use-content{
  display: flex;
  flex-direction: column;
  gap:16rem;
  margin-top:8rem;
}
.use-list{
  display: flex;
  flex-direction: column;
  gap:2rem;
  margin-top: 2rem;
}
.use-item{
  position:relative;
  color:#fff;
  background-color: #1677CC;
  padding:1.5rem 2rem 1.5rem 7rem;
  font-size: 2rem;
  font-weight: 500; 
  line-height: 1.5;
}
.use-item:before{
  content: '';
  background-image:url(../images/icon-check.png) ;
  background-position: center;
  background-repeat: none;
  background-size: contain;
  width:36px;
  height:36px;
  position:absolute;
  left:2rem;
  top:50%;
  transform: translateY(-50%);
}
.flex.reverse{
  flex-direction: row-reverse;
}
.small{
  font-size: 1.4rem;
  margin-top: 2rem;
}
/*  result-------------------------------------------------*/
.result{
  background-color: #1577CC;
  padding:10rem 0 12rem;
}
.result-img{
  max-width: 1498px;
  margin:5rem auto 3.6rem;
}
/*  karatsu-------------------------------------------------*/
.karatsu{
  padding:12rem 0;
}
.karatsu-flex{
  display: flex;
  gap:3.4%;
  margin:8.8rem auto 0;
  max-width:1760px;
}
.karatsu-img{
  width:60%;
  border-radius: 30px;
  overflow: hidden;
}
.karatsu-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.karatsu-info{
  width:36.6%;
}
.karatsu-info{
  display: flex;
  flex-wrap: wrap;
  gap:3.6rem 13%;
}
.karatsu-item{
  width:calc((100% - 13%)/2);
}
.karatsu-ttl{
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.5;
  margin:1.3rem 0 0.8rem;
}
.karatsu-txt{
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 1.72;
}

/*  closing-------------------------------------------------*/
.closing{
  padding:12rem 0 ;
}
/*  info-------------------------------------------------*/
.info{
  padding:12rem 0 17rem;
}
.info-flex{
  display: flex;
  max-width: 1760px;
  margin:0 auto;
}
.info-logo{
  width:48.6%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-right:5rem;
}
.info-logo img{
  max-width: 324px;
  width:100%;
  height:100%;
  object-fit: contain;
}
.info-table{
  width:51.4%;
}
.info-head{
  margin-bottom: 2rem;
  font-size: 2rem;
  font-weight: 400;
}
.table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    word-break: break-all;
    word-wrap: break-all;
    border-top: 1px solid #707070;
}
.table th,
.table td {
  font-weight: 400;
    padding: 2.4rem;
    vertical-align: top;
    border-bottom: 1px solid #707070;
}
.table th {
    text-align: left;
    width: 174px;
}
.table td {
    text-align: left;
    width: calc(100% - 174px);
}
/*  float-------------------------------------------------*/
.float-btn{
position: fixed;
    bottom: 13px;
    right: 80px;
    background-color: #fff;
    border-radius: 999px;
}
.btn{
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    width:100%;
    padding:2rem 6rem;
      cursor: pointer;
      background-color: #FDDB21;
      border-radius: 999px;
      font-size: 1.8rem;
      font-weight: 500;
      line-height: 1;
      position: relative;
}
.btn:before {
  content: '';
  width: 10px;
  height: 10px;
  border: 0;
  border-top: solid 2px #2F2F2F;
  border-right: solid 2px #2F2F2F;
  transform: rotate(45deg);
  position: absolute;
  top: 0;
  right: 23px;
  bottom: 0;
  margin: auto;
}
/*  footer-------------------------------------------------*/
.footer {
  background-color: #1677CC;
  padding: 4rem 0;
}
.footer-copy {
  font-size: 1.6rem;
  font-weight: 400;
}
/*  choice-------------------------------------------------*/
.choice{
  background-color: #E8F3FC;
  padding:12rem 0;
}
.choice-inner{
  max-width: 1498px;
  margin:0 auto;
}
.choice-banner{
  background-color: #fff;
  border-radius: 30px;
  padding:40px 30px;
  display: flex;
  gap:5rem;
  justify-content: center;
  align-items: center;
}
.banner-ttl{
  font-size:2.4rem;
  font-weight: 700;
  margin-bottom: 1rem;
}
.banner-logo{
  max-width: 350px;
  display: inline-block;
  padding:0 1rem 0 0 ;
}
.banner-logo img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  vertical-align: text-bottom;
}
.banner-img{
  max-width: 300px;
}
.banner-btn{
  max-width: 320px;
  margin:2rem auto 0 0;
}
.choice-btn{
  max-width: 320px;
  margin:3rem auto 0;
}
.choice-list{
  margin: 5rem 0 ;
  display: flex;
  flex-wrap: wrap;
  gap:5rem 3rem;
}
.choice-item{
  width:calc((100% - 9rem)/4);
    background: rgb(255, 255, 255);
    border-radius: 4px;
}
.choice-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.choice-ttl{
  font-size:1.8rem;
  line-height: 1.5;
  padding:1.5rem 2rem 2rem;
}
/*  sp-------------------------------------------------*/
@media screen and (max-width: 767px) {
  body {
    font-size: 1.4rem;
  }

  .pc-only {
    display: none!important;
  }

  .sp-only {
    display: block!important;
  }
/* header --------------------------------------------*/
.page-width {
  width:100%;
  padding:0 2.4rem;
}

.header-logo {
  max-width: 302px;
}

/* kv -------------------------------------------------*/
.kv {
  width:100%;
  padding:0 2.4rem;
}

.kv-back {
  height: calc(100vh - 14rem);
  border-radius: 20px;
}

.kv-content {
  padding:0 4.4rem;
  left:0;
  top:auto;
  bottom:14rem;
  transform: none;
}

.kv-info {
  gap: 1rem;
}

.kv-ttl {
  font-size: 2.6rem;
}

.kv-txt {
  font-size: 1.4rem;
}
/*  heading-------------------------------------------------*/
.heading{
  padding:4rem 0;
  margin-top:4.8rem;
}
.flex{
  flex-direction: column;
  gap:3rem;
}
.flex-info{
  width:100%;
}
.section-ttl{
  margin-bottom: 1.5rem;
}
.section-ttl h2,
.section-ttl h3{
 font-size: 2.2rem;
}
.flex-img{
  width:100%;
  border-radius: 20px;
}
/*  service-------------------------------------------------*/
.service{
  padding:3rem 0 7rem;
}
.service-flex{
  flex-wrap: wrap;
  gap:3rem 2.6rem;
  margin:3rem auto;
}
.service-item{
  width:calc((100% - 2.6rem)/2);
  gap:1rem;
}
.servicr-img{
  border-radius: 20px;
}
.servicr-ttl{
  font-size: 1.4rem;
}
/*  case-------------------------------------------------*/
.case{
  padding:4rem 0;
}
.case-content{
  padding:3rem 2.4rem;
  margin:4rem auto 0;
}
.case-slider .slick-list {
  margin: 0 -30px;
}
.case-slider .slick-slide {
  margin: 0 30px;
}
.dots-box{
  margin-top: 3.7rem;
}
.case-box{
  flex-direction: column;
  gap:1.5rem;
}
.case-img{
  width:100%;
  border-radius: 20px;
}
.case-info{
  width:100%;
}
.case-ttl{
   font-size: 2.2rem;
  margin-bottom: 1.5rem;
}
/*  use-------------------------------------------------*/
.use{
  padding:7rem 0 10rem;
}
.use-content{
  gap:7rem;
  margin-top:3rem;
}
.use-list{
  gap:0.8rem;
  margin-top:1.5rem;
}
.use-item{
  padding:1rem 1.2rem 1rem 4.5rem;
  font-size: 1.2rem;
}
.use-item:before{
  width:22px;
  height:22px;
  left:1.2rem;
}
.flex.reverse{
  flex-direction: column;
}
.small{
  font-size: 1.2rem;
  margin-top: 1.5rem;
}
/*  result-------------------------------------------------*/
.result{
  padding:7rem 0 8.7rem;
}
.result-img{
  margin:3rem auto;
}
/*  karatsu-------------------------------------------------*/
.karatsu{
  padding:7rem 0 5rem;
}
.karatsu-flex{
  flex-direction: column;
  gap:3rem;
  margin:3rem auto 0;
}
.karatsu-img{
  width:100%;
  border-radius: 20px;
}
.karatsu-info{
  width:100%;
}
.karatsu-info{
  gap:3rem 2.6rem;
}
.karatsu-item{
  width:calc((100% - 2.6rem)/2);
}
.karatsu-ttl{
  font-size: 1.8rem;
  margin:0.6rem 0;
}
.karatsu-txt{
  font-size: 1.2rem;
}

/*  closing-------------------------------------------------*/
.closing{
  padding:5rem 0 ;
}
/*  info-------------------------------------------------*/
.info{
  padding:5rem 0 10rem;
}
.info-flex{
  flex-direction: column;
  gap:5rem;
}
.info-logo{
  width:100%;
  padding-right:0;
}
.info-logo img{
  max-width: 167px;
}
.info-table{
  width: 100%;
}
.info-head{
  margin-bottom: 1.3rem;
  font-size: 1.3rem;
}
.table th,
.table td {
    padding: 2rem 1.4rem;
}
.table th {
    width: 120px;
}
.table td {
    width: calc(100% - 120px);
}
/*  float-------------------------------------------------*/
.float-btn{
    bottom: 20px;
    right: 24px;
}
.btn{
    padding:1.5rem 3.5rem;
      font-size: 1.4rem;
}
.btn:before {
  width: 8px;
  height: 8px;
  right: 16px;
}
/*  footer-------------------------------------------------*/
.footer {
  padding: 2.4rem 0;
}
.footer-copy {
  font-size: 1.4rem;
}
	/*  choice-------------------------------------------------*/
.choice{
  padding:6rem 0;
}
.choice-banner{
  border-radius: 20px;
  flex-direction: column;
  padding:30px 20px;
  gap:3rem;
}
.banner-ttl{
  font-size:2rem;
}
.banner-logo{
  padding:0.5rem 0 0 0;
}
.banner-btn{
  margin:2rem auto 0;
}
.choice-list{
  margin: 3rem 0 ;
  gap:2rem 1.5rem;
}
.choice-item{
  width:calc((100% - 1.5rem)/2);
}
.choice-ttl{
  font-size:1.2rem;
  padding:1rem 1rem 1.5rem;
}
}
/*  lp-------------------------------------------------*/
/*  kv-------------------------------------------------*/
.lp .kv-box{
  display: flex;
  align-items: center;
  gap:1.5rem;
  border-radius: 15px;
  background-color: rgba(253, 219, 33, 0.6);
  padding: 2.4rem 3rem 2rem 2.4rem;
  width: fit-content;
}
.lp .kv-box-img{
  width: 14rem;
}
.lp .kv-box-info{
  width: calc(100% - 15.5rem);
}
.lp .kv-box-head{
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.6;
}
.lp .kv-box-ttl{
    font-size: 3rem;
  font-weight: 700;
  line-height: 1.6;
}
.lp .kv-box-txt{
    font-size: 1.8rem;
  font-weight: 400;
  line-height: 1.6;
}
/*  textbook-------------------------------------------------*/
.textbook .service-flex{
  max-width: 1078px; 
}
.textbook .service-item{
  width:calc((100% - 4.8%)/2);
  gap:0;
}
.textbook .servicr-img{
  border-radius: 0;
  overflow:auto;
}
.textbook .servicr-img img{
  object-fit: contain;
  aspect-ratio:auto;
}
/*  target-------------------------------------------------*/
.lp .target{
    background-color: #1677CC;
  padding:8rem 0;
}
.target .service-item{
  width:auto;
}
.target .servicr-img{
  max-width: 358px;
}
/*  feature-------------------------------------------------*/
.lp .feature{
    background-color: #1677CC;
  padding:1rem 0 12rem;
}
.feature-flex{
  display: flex;
  justify-content: center;
  max-width: 1234px;
  margin:0 auto;
  gap:6.4%;
  margin-top: 4rem;
}
.feature-item{
  background-color: #fff;
  border-radius: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: calc((100% - 12.8%)/3);
  aspect-ratio: 1/1;
  padding:0 1rem;
}
.feature-img{
  max-width: 150px;
  width: 44.4%;
}
.feature-img img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  aspect-ratio: 1/1;
}
.feature-ttl{
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1;
  position:relative;
  margin:1.5rem 0 2rem;
  padding-left: 3.5rem;
}
.feature-ttl:before{
  content: '';
  background-image:url(../images/icon-check.png) ;
  background-position: center;
  background-repeat: none;
  background-size: contain;
  width:30px;
  height:30px;
  position:absolute;
  left:0;
  top:50%;
  transform: translateY(-50%);
}
.feature-txt{
    font-size: 2rem;
  font-weight: 400;
  line-height: 1.5;
}
/*  why-------------------------------------------------*/
.why{
  padding:12rem 0;
}
/*  flow-------------------------------------------------*/
.flow{
  background-color: #E8F3FC;
  padding:10rem 0 12rem;
}
.flow-list{
  display: flex;
  margin:11rem auto 5rem;
  max-width: 1196px;
  gap:6rem;
}
.flow-item{
  width: calc((100% - 12rem)/3);
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #fff;
  border-radius: 30px;
  position:relative;
  padding:8.6rem 2rem 3.4rem;
  text-align: center;
}
.flow-item:before {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 18px 0 18px 24px;
  border-color: transparent transparent transparent #1677CC;
  position: absolute;
  top: 0;
  left: -4rem;
  bottom: 0;
  margin: auto;
}
.flow-item:first-child:before {
content: none;
}
.flow-head{
  position: absolute;
  background-color: #1577CC;
  width: 120px;
  height:120px;
  color:#fff;
  text-align: center;
  border-radius: 999px;
  top:-60px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.flow-num{
  font-size: 4rem;
}
.flow-img{
  max-width: 150px;
}
.flow-img img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  aspect-ratio: 1/1;
}
.flow-ttl{
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.36;
  margin-top: 2.6rem;
}
@media screen and (max-width: 767px) {
/*  lp-------------------------------------------------*/
/*  kv-------------------------------------------------*/
.lp .kv-content {
  bottom: 5rem;
}
.lp .kv-box{
  gap:3%;
  padding: 1.5rem 1rem;
  width:100%;
}
.lp .kv-box-img{
  width: 28%;
}
.lp .kv-box-info{
  width: calc(100% - 31%);
}
.lp .kv-box-head{
  font-size: 1.2rem;
}
.lp .kv-box-ttl{
    font-size: 1.8rem;
    line-height: 1.3;
    margin:0.1rem 0 0.3rem;
}
.lp .kv-box-txt{
    font-size: 1.2rem;
}
/*  textbook-------------------------------------------------*/
.textbook .service-item{
  width:100%;
  max-width: 300px;
}
/*  target-------------------------------------------------*/
.lp .target{
  padding:5rem 0;
}
.target .servicr-img{
  max-width: 300px;
}
/*  feature-------------------------------------------------*/
.lp .feature{
  padding:0 0 5rem 0;
}
.feature-flex{
  flex-direction: column;
  align-items: center;
  gap:1.5rem;
  margin-top: 3rem;
}
.feature-item{
  border-radius: 15px;
  width:300px;
  padding:1rem 2rem 2.4rem;
  aspect-ratio: auto;
  gap:1rem;
}
.feature-img{
  width: 100px;
}
.feature-ttl{
  display: inline-block;
  font-size: 2rem;
  margin:0 0 1rem 0;
  padding-left: 2.5rem;
}
.feature-ttl:before{
  width:20px;
  height:20px;
}
.feature-txt{
    font-size: 1.4rem;
}
/*  why-------------------------------------------------*/
.why{
  padding:6rem 0;
}
/*  flow-------------------------------------------------*/
.flow{
  padding:5rem 0 6rem;
}
.flow-list{
  flex-direction: column;
  margin:3rem 0 3rem 2rem;
  gap:5rem;
}
.flow-item{
  width: 100%;
  border-radius: 15px;
  padding:1.5rem 2rem 1.5rem 4rem;
  flex-direction: row;
  gap:2rem;
}
.flow-item:before {
  border-width: 14px 16px 0 16px;
  border-color:#1677CC transparent transparent transparent ;
  top: -3.2rem;
  left: 50%;
  bottom: auto;
  transform: translateX(-50%);
}
.flow-item:first-child:before {
content: none;
}
.flow-head{
  width: 60px;
  height:60px;
  top:50%;
  left:-30px;
  transform: translateY(-50%);
  font-size: 1rem;
}
.flow-num{
  font-size: 2rem;
}
.flow-img{
  width: 8rem;
}
.flow-ttl{
  width: calc(100% - 10rem);
  font-size: 1.6rem;
  margin-top: 0;
  text-align: left;
}
}