@charset "UTF-8";



.c-pankuz {
  position: absolute;
  font-size: 14px;
  bottom: 1px;
left: 140px;
}
@media screen and (max-width: 1024px) {
  .c-pankuz {
    font-size: 10px;
    left: 60px;
  }
}
@media screen and (max-width: 767px) {
  .c-pankuz {
    /* left: 20px; */
  }
}


.c-pankuz ul li {
  display: inline-block;
  line-height: 1.2;
  margin-right: 10px;
  color: #1796b5;
}

.c-pankuz ul li + li::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-top: 1px solid #00244B;
  border-right: 1px solid #00244B;
  transform: translateX(-9px) translateY(0px) rotate(45deg);
}

.c-pankuz ul li a {
  color: #00244B;
  display: inline-block;
  transition: 0.2s;
}
.c-pankuz ul li a:hover {
  color: #1796b5;
}

/* 下層ページメインビジュアル */
.c-pageMainv {
  position: relative;
  margin-top: 190px;
  background: linear-gradient(0deg, rgb(255, 255, 255) 0%, rgb(215, 237, 250) 100%);
  width: calc(1600 / 1920 * 100vw);
  max-width: 1600px;
  /* margin: 176px auto; */
  margin: 176px auto calc(125 / 1920 * 100vw);
  border-radius: 20px 20px 0 0  ;
}
@media screen and (max-width: 1024px) {
  .c-pageMainv {
    width: calc(100% - 50px);
    margin-top: 150px;
  
  }
}

.c-pageMainvInner {
  position: relative;
  /* height: calc(353 / 1920 * 100vw); */
  min-height: 353px;
  padding-top: calc(108 / 1920 * 100vw);
  padding-left: calc(93 / 1920 * 100vw);
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 1024px) {
  .c-pageMainvInner {
    height: auto;
    min-height: auto;
  }
}
@media screen and (max-width: 767px) {
  .c-pageMainvInner {
    flex-direction: column;
    padding-top: 48px;
    padding-bottom: 25px;
    min-height: 200px;
  }
}

.c-pageMainv--textBox{
  /* width: 51.28%; */
  width: 50%;
    padding-left: 5%;
  }

  @media screen and (max-width: 1024px){
    .c-pageMainv--textBox{
  width: 100%;
  margin-bottom: 0;
  padding-left: 0;
    }
  }
  
  
  @media screen and (max-width: 767px){
    .c-pageMainv--textBox{
    }
  }
  

  

.c-pageTag {
  font-weight: 500;
  background-color: #006FAB;
  color: #fff;
  border-radius: 25px;
  padding: 12px 20px;
  display: inline-block;
  margin-bottom: 56px;
  line-height: normal;
  line-height: 1.2;

}

@media screen and (max-width: 1024px) {
  .c-pageTag {
    margin-bottom: 40px;
   }
}
@media screen and (max-width: 767px) {
  .c-pageTag {
   margin-bottom: 24px;
  }
}



.c-pageTtl {
  /* margin-top: 160px; */
}
@media screen and (max-width: 1024px) {
  .c-pageTtl {
    /* margin-top: 60px; */
  }
}


.c-pageTtl .enTtl {
  font-size: 20px;
  color: rgba(0, 36, 75, 0.6);
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1.1;
  display: block;
  margin-bottom: 8px;
  padding-left: calc(4 / 1920 * 100vw);
}
@media screen and (max-width: 1024px) {
  .c-pageTtl .enTtl {
  }
}
@media screen and (max-width: 767px) {
  .c-pageTtl .enTtl {
    font-size: 14px;
  }
}


.c-pageTtl .jaTtl {
  font-size: 48px;
  display: block;
  font-weight: bold;
  line-height: 1.5;
  margin-bottom: 20px;
  letter-spacing: 0.1em;
  margin-bottom: calc(27 / 1920 * 100vw);
}
@media screen and (max-width: 1920px){
  .c-pageTtl .jaTtl {
  font-size: 48px;
  margin-bottom: 20px;
}
}
@media screen and (max-width: 1024px) {
  .c-pageTtl .jaTtl {
    font-size: 42px;
    margin-bottom: 20px;
  }
}
@media screen and (max-width: 767px) {
  .c-pageTtl .jaTtl {
    font-size: 32px;
    margin-bottom: 15px;
    letter-spacing: 0.07em;
  }
}


.c-pageTtl .jaTtl .memo {
  font-size: 13px;
  margin-left: 5px;
  list-style: none;
  /* display: inline-block; */
  display: block;
  line-height: 1.5;
  margin-top: 10px;
}

@media screen and (max-width: 767px) {
  .c-pageTtl .jaTtl .memo{

  }
}

.c-pageTtl--sub{
  font-size: 25px;
  line-height: 1.7;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
}
@media screen and (max-width: 1024px){
  .c-pageTtl--sub {
    font-size: 23px;
  }
}

@media screen and (max-width: 767px){
  .c-pageTtl--sub {
    font-size: 18px;
  }
}

.c-pageTtl--txt{
  letter-spacing: 0.05em;
}

@media screen and (max-width: 1024px){
  .c-pageTtl--txt{
font-size: 15px;
  }
}

@media screen and (max-width: 767px){
  .c-pageTtl--txt{
    letter-spacing: 0.07em;
    font-size: 14px;
  }
}

.c-pageTtl--txt.hosoku--kome{
  text-indent: -1em;
  padding-left: 1em;
}

.pageTtl-sub {
  display: block;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: 0;
  color: #00244B;
  margin-bottom: 20px;
  font-weight: bold;
  background-color: #FFF67F;
  border-radius: 30px;
  padding: 12px 24px;
  position: relative;
}


@media screen and (max-width: 1024px) {
  .pageTtl-sub {
    font-size: 15px;
    margin-bottom: 15px;
  }
}

@media screen and (max-width: 767px) {
  .pageTtl-sub {
    font-size: 14px;
    margin-bottom: 12px;
    line-height: 1.5;

  text-align: center;
  }
}

.pageTtl-sub-arrow {
  position: absolute;
  bottom: -16.5px;
  left: 12%;
  width: 40.5px;
  height: 18.5px;
}

@media screen and (max-width: 767px) {
  .pageTtl-sub-arrow {
    bottom: -15.5px;
    left: 20%;
  }
}


.c-pageMainv--hosokuBox{
  margin-top: 10em;
}

.connectMainvImg {
  width: 45%;
  width: 369px;
  transform: translate(-3px, -35px);
}
@media screen and (max-width: 1024px) {
  .connectMainvImg {
    margin-top: 20px;
    margin-left: auto;
    width: 40%;
    transform: initial;
  }

  @media screen and (max-width: 767px) {
    .connectMainvImg {
      width: 80%;
      margin: 50px auto 20px;
    }
  }
}

.connectMainvImg--tv {
  /* width: 57.5vw; */
}
@media screen and (max-width: 1024px){
  .connectMainvImg--tv {
    width: 80%;
    margin: 0 auto 60px;
  }
}

@media screen and (max-width: 767px){
  .connectMainvImg--tv {
    width: 100%;
  margin-bottom: 40px;
  }
}


.connectMainvImg--congestion {
  /* width: 57.5vw; */
}
.connectMainvImg--clean {
  /* width: 62.9166666667vw; */
}
.connectMainvImg--lost {
  /* width: 62.9166666667vw; */
}
.connectMainvImg--memo {
  /* width: 62.9166666667vw; */
}
.connectMainvImg--faq {
  width: 304px;
  right: 40px;
}
@media screen and (max-width: 767px) {
  .connectMainvImg--faq {
    width: 200px;
    right: 10px;
  }
}


.connectMainvImg img{
  /* filter: drop-shadow(15px 15px 30px rgba(0, 0, 0, 0.1)); */
  display: block;
}


/* サービスメインビジュアル */

.serviceMavinv {
  width: auto;
  max-width: initial;
  margin: 176px auto 50px;
  border-radius: 0;
  background: linear-gradient(270deg, rgb(255, 255, 255) 0%, rgb(215, 237, 250) 100%);
}


.serviceMavinvInner{
  align-items: center;
  padding-bottom: 100px;

}


.serviceMavinv .c-pankuz {
  bottom: -40px;
  left: calc(93 / 1920 * 100vw);
}


.serviceMavinv  .c-pageMainv--textBox{
  padding-left: 0;
}



.serviceMavinv  .connectMainvImg{
transform: initial;
width: 45%;
}

@media screen and (max-width: 1024px) {

  .serviceMavinv  .connectMainvImg{
    width: 80%;
    margin-top: 20px;
      margin-bottom: 40px;
      margin-left: auto; 
      margin-right: auto;
    }
  }




.serviceMavinv .c-pageTtl .jaTtl {
  font-size: 56px;
  display: block;
  font-weight: bold;
  line-height: 1.5;
  margin-bottom: 20px;
  letter-spacing: 0.05em;
  margin-bottom: 40px;
}
@media screen and (max-width: 1920px){
  .serviceMavinv .c-pageTtl .jaTtl {
  font-size: 3.103vw;
}
}
@media screen and (max-width: 1024px) {
  .serviceMavinv .c-pageTtl .jaTtl {
    font-size: 42px;
    margin-bottom: 40px;
  }
}
@media screen and (max-width: 767px) {
  .serviceMavinv .c-pageTtl .jaTtl {
    font-size: 32px;
    margin-bottom: 40px;
    letter-spacing: 0.07em;
  }
}




.c-catch {
  font-size: 40px;
  line-height: 2;
  margin-bottom: 40px;
}
@media screen and (max-width: 1024px) {
  .c-catch {
    font-size: 30px;
    margin-bottom: 30px;
  }
}
@media screen and (max-width: 767px) {
  .c-catch {
    font-size: 21.5px;
    line-height: 1.7209302326;
    margin-bottom: 20px;
    white-space: wrap;
  }
}

.sec-catch {
  margin-top: 200px;
  margin-bottom: 200px;
}
@media screen and (max-width: 1024px) {
  .sec-catch {
    margin-top: 100px;
    margin-bottom: 100px;
  }
}
@media screen and (max-width: 767px) {
  .sec-catch {
    margin-top: 60px;
    margin-bottom: 60px;
  }
}

.catchInner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media screen and (max-width: 1024px) {
  .catchInner {
    display: block;
  }
}

.catchInfo {
  width: calc(50% - 60px);
}
@media screen and (max-width: 1024px) {
  .catchInfo {
    width: 100%;
  }
}
.catchInfo--center {
  width: 100%;
  text-align: center;
}

.catchTtl {
  font-size: 48px;
  line-height: 1.5;
  font-weight: 900;
  margin-bottom: 50px;
}
@media screen and (max-width: 1024px) {
  .catchTtl {
    font-size: 32px;
    margin-bottom: 20px;
  }
}
@media screen and (max-width: 767px) {
  .catchTtl {
    font-size: 18px;
  }
}

@media screen and (max-width: 767px) {
  .catchTxt {
    text-align: left;
  }
}

.catchImgArea {
  width: calc(50% + 30px);
}
@media screen and (max-width: 1024px) {
  .catchImgArea {
    width: 80%;
    margin: 40px auto 0;
    transform: translateX(-10%);
  }
}

.sec-case {
  background: rgb(255, 255, 255);
  /* background: linear-gradient(0deg, rgb(255, 255, 255) 0%, #f3fafe 100%); */
  padding-top: 120px;
  padding-bottom: 230px;
  position: relative;
}
@media screen and (max-width: 1024px) {
  .sec-case {
    padding-top: 100px;
    padding-bottom: 180px;
  }
}
@media screen and (max-width: 767px) {
  .sec-case {
    padding-top: 60px;
    padding-bottom: 80px;
  }
}

.caseList {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin-top: 100px;
}
@media screen and (max-width: 1024px) {
  .caseList {
    display: block;
  }
}
@media screen and (max-width: 767px) {
  .caseList {
    margin-top: 60px;
  }
}

.caseItem {
  position: relative;
  background-color: rgba(215,237,250,0.5);
  border-radius: 40px 40px 40px 0;
  padding: 40px 30px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 280px;
  /* border: 1px solid #D7EDFA; */
}
@media screen and (max-width: 1390px) {
  .caseItem {
    padding: 40px 15px;
    width: 230px;
  }
}
@media screen and (max-width: 1024px) {
  .caseItem {
    padding: 60px 25px;
    width: 280px;
    margin: 0 auto;
  }
}
@media screen and (max-width: 767px) {
  .caseItem {
    padding: 40px 15px;
    width: 230px;
  }
}
.caseItem + .caseItem {
  margin-left: 40px;
}
@media screen and (max-width: 1199px) {
  .caseItem + .caseItem {
    margin-left: 20px;
  }
}
@media screen and (max-width: 1024px) {
  .caseItem + .caseItem {
    margin: 40px auto;
  }
}
.caseItem:nth-child(2) {
  transform: translateY(70px);
  border-radius: 40px 40px 0 40px;
}
@media screen and (max-width: 1024px) {
  .caseItem:nth-child(2) {
    transform: translateY(0px);
    transform: translateX(70px);
  }
}
@media screen and (max-width: 767px) {
  .caseItem:nth-child(2) {
    transform: translateX(40px);
  }
}
.caseItem::before {
  content: "";
  display: inline-block;
  position: absolute;
  width: 54px;
  height: 54px;
  background-image: url(../img/connect-common/hatena-deco.png);
  background-repeat: no-repeat;
  background-size: contain;
  top: -25px;
  left: 20px;
}


@media screen and (max-width: 767px) {
  .caseItem::before {
    width: 30px;
    height: 30px;
    top: -15px;
  }
}
.caseItem:first-child::after {
  content: "";
  display: inline-block;
  position: absolute;
  width: 233px;
  height: 156px;
  background-image: url(../img/connect-common/hatena-men-02.svg);
  background-repeat: no-repeat;
  background-size: contain;
  bottom: -120px;
  left: -140px;
  z-index: 2;
}
@media screen and (max-width: 1024px) {
  .caseItem:first-child::after {
    width: 200px;
    height: 155px;
  }
}
@media screen and (max-width: 767px) {
  .caseItem:first-child::after {
    width: 113.5px;
    height: 80px;
    left: -60px;
    bottom: -30px;
  }
}
.caseItem:last-child::after {
  content: "";
  display: inline-block;
  position: absolute;
  width: 135px;
  height: 187.5px;
  background-image: url(../img/connect-common/hatena-women-02.svg);
  background-repeat: no-repeat;
  background-size: contain;
  bottom: -60px;
  right: -160px;
}
@media screen and (max-width: 767px) {
  .caseItem:last-child::after {
    width: 80px;
    height: 115px;
    bottom: -60px;
    right: -30px;
  }
}
@media screen and (max-width: 1199px) {
  .caseItem:nth-child(3)::after {
    bottom: -100px;
    right: -150px;
  }
}
@media screen and (max-width: 767px) {
  .caseItem:nth-child(3)::after {
    right: -40px;
    bottom: -40px;
  }
}

.caseItemTxt {
  font-size: 15px;
  font-weight: bold;
  line-height: 1.7;
}

.caseItemName {
  margin-top: 5px;
  font-size: 14px;
  font-weight: 500;
}
.caseItemName::before {
  content: "";
  display: inline-block;
  width: 25px;
  height: 1px;
  background-color: #00244B;
  margin-right: 5px;
  transform: translateY(-4px);
}

.caseDecoTxt {
  display: inline-block;
  font-size: 120px;
  font-weight: 500;
  background: rgb(0, 111, 171);
  background: linear-gradient(180deg, rgb(0, 111, 171) 0%, rgba(0, 111, 171, 0) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.caseDecoTxt {
  position: absolute;
  bottom: 210px;
  display: flex;
  width: 100%;
  overflow: hidden;
}
@media screen and (max-width: 1024px) {
  .caseDecoTxt {
    bottom: 100px;
  }
}
.caseDecoTxt span {
  display: block;
  flex: 0 0 auto;
  white-space: nowrap;
  font-weight: 600;
  overflow: hidden;
  line-height: 1;
  display: inline-block;
  font-size: 120px;
  background: rgb(0, 111, 171);
  background: linear-gradient(180deg, rgba(0, 111, 171, 0.4) 0%, rgba(0, 111, 171, 0.1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.caseDecoTxt span:nth-child(odd) {
  animation: loop 80s -40s linear infinite;
}
.caseDecoTxt span:nth-child(even) {
  animation: loop2 80s linear infinite;
}

@keyframes loop {
  0% {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}
@keyframes loop2 {
  0% {
    transform: translateX(0);
  }
  to {
    transform: translateX(-200%);
  }
}
.sec-merit {
  /* background: rgba(215, 237, 250, 0.3); */
  border-radius: 20px;
  position: relative;
  max-width: 1600px;
}

.meritIner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 130px 0 100px;
}
@media screen and (max-width: 767px) {
  .meritIner {
    padding: 60px 0 60px;
  }
}

.sec-feature {
  margin: 150px 0;
}
@media screen and (max-width: 1024px) {
  .sec-feature {
    margin: 100px 0;
  }
}
@media screen and (max-width: 767px) {
  .sec-feature {
    margin: 60px 0;
  }
}

.sec-flow {
  padding: 150px 0;
}
@media screen and (max-width: 1024px) {
  .sec-flow {
    padding: 100px 0;
  }
}
@media screen and (max-width: 767px) {
  .sec-flow {
    padding: 60px 0;
  }
}

.stepList {
  max-width: 920px;
  margin: 60px auto 0;
}
@media screen and (max-width: 767px) {
  .stepList {
    margin: 40px auto 0;
  }
}

.stepItem {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}
.stepItem:before {
  content: "";
  display: inline-block;
  position: relative;
  width: 1px;
  height: 100%;
  background-color: #376BAF;
  position: absolute;
  top: 30px;
  left: 95px;
}
@media screen and (max-width: 767px) {
  .stepItem:before {
    top: 30px;
    left: 30px;
  }
}
@media screen and (max-width: 767px) {
  .stepItem {
    align-items: flex-start;
  }
}
.stepItem + .stepItem {
  margin-top: 25px;
}
.stepItem:last-child::before {
  display: none;
}

.stepImg {
  width: 190px;
  position: relative;
  z-index: 2;
}
@media screen and (max-width: 767px) {
  .stepImg {
    width: 60px;
  }
}

.stepInfo {
  width: calc(100% - 190px - 110px);
}
@media screen and (max-width: 1024px) {
  .stepInfo {
    width: calc(100% - 190px - 40px);
  }
}
@media screen and (max-width: 767px) {
  .stepInfo {
    width: calc(100% - 60px - 20px);
  }
}

.stepNum {
  font-size: 15px;
  color: #006FAB;
}
@media screen and (max-width: 767px) {
  .stepNum {
    font-size: 10px;
  }
}

.stepTtl {
  font-size: 24px;
  font-weight: 900;
  line-height: 1.5;
}
@media screen and (max-width: 767px) {
  .stepTtl {
    font-size: 18px;
  }
}

.stepTxt {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.7;
  margin-top: 20px;
}
@media screen and (max-width: 767px) {
  .stepTxt {
    font-size: 13px;
  }
}

.c-flexList {
  display: flex;
  justify-content: center;
  /* align-items: center; */
  margin-top: 60px;
}
@media screen and (max-width: 1024px) {
  .c-flexList {
    display: block;
  }
}
@media screen and (max-width: 767px) {
  .c-flexList {
    margin-top: 40px;
  }
}

.c-flexItem {
  width: calc((100% - 160px) / 3);
}
.c-flexItem + .c-flexItem {
  margin-left: 80px;
}
@media screen and (max-width: 1199px) {
  .c-flexItem {
    width: calc((100% - 60px) / 3);
  }
  .c-flexItem + .c-flexItem {
    margin-left: 30px;
  }
}
@media screen and (max-width: 1024px) {
  .c-flexItem {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
  }
  .c-flexItem + .c-flexItem {
    margin: 60px auto 0;
  }
}
.c-flexItem .c-flexItemImg {
  max-height: 280px;
  vertical-align: middle;
}
@media screen and (max-width: 1024px) {
  .c-flexItem .c-flexItemImg {
    max-height: none;
    max-width: 500px;
  }
}
.c-flexItem .c-flexItemImg img {
  display: block;
  margin: 0 auto;
}

.c-flexList--2 .c-flexItem {
  width: calc((100% - 80px) / 2);
}
@media screen and (max-width: 1024px) {
  .c-flexList--2 .c-flexItem {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
  }
  .c-flexList--2 .c-flexItem + .c-flexList--2 .c-flexItem {
    margin: 60px auto 0;
  }
}

.c-flexItemTtl {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 10px;
  line-height: 1.5;
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 767px) {
  .c-flexItemTtl {
    font-size: 16px;
    margin-bottom: 5px;
    min-height: initial;
  }
}

.c-flexItemTxt {
  font-size: 14px;
  line-height: 1.7;
}
.c-flexItemTxt span.smallTxt {
  font-size: 12px;
}
@media screen and (max-width: 767px) {
  .c-flexItemTxt {
    font-size: 13px;
  }
  .c-flexItemTxt span.smallTxt {
    font-size: 11px;
  }
}

.sec-option {
  /* background: rgba(215, 237, 250, 0.3); */
  padding: 150px 0;
}
@media screen and (max-width: 1024px) {
  .sec-option {
    padding: 100px 0;
  }
}
@media screen and (max-width: 767px) {
  .sec-option {
    padding: 60px 0;
  }
}

.optionList {
  display: flex;
  justify-content: center;
  align-items: stretch;
  margin-top: 60px;
}
@media screen and (max-width: 1024px) {
  .optionList {
    display: block;
  }
}

.optionItem {
  width: 580px;
  border-radius: 20px;
  background: rgba(215, 237, 250, 0.2);
  position: relative;
  padding: 40px;
  border: 1px solid #006FAB;
}
@media screen and (max-width: 1024px) {
  .optionItem {
    width: 100%;
    max-width: 580px;
    margin: 0 auto;
    padding: 20px;
  }
}
.optionItem + .optionItem {
  margin-left: 40px;
  background: rgba(15, 178, 157, 0.1);
  border: 1px solid #0FB29D;
}
@media screen and (max-width: 1024px) {
  .optionItem + .optionItem {
    margin: 40px auto;
  }
}
.optionItem .optionNum {
  font-size: 16px;
  font-weight: bold;
  position: absolute;
  top: 20px;
  left: 20px;
}
@media screen and (max-width: 767px) {
  .optionItem .optionNum {
    font-size: 12px;
    top: 10px;
    left: 10px;
  }
}
.optionItem .optionImg {
  height: 380px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.optionItem .optionImg img {
  width: auto;
}
.optionItem .optionImg--lost {
  width: 80%;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .optionItem .optionImg {
    height: auto;
    width: 60%;
    margin: 20px auto 20px;
  }
}
.optionItem .optionImgDeco {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: #ED940E;
  color: #fff;
  text-align: center;
  font-weight: bold;
  font-size: 20px;
  line-height: 1.2;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  right: -40px;
  top: -10px;
}
@media screen and (max-width: 767px) {
  .optionItem .optionImgDeco {
    width: 80px;
    height: 80px;
    font-size: 16px;
    top: -30px;
  }
}
.optionItem .optionItemCatch {
  margin-bottom: 20px;
  font-size: 22px;
  font-weight: 900;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .optionItem .optionItemCatch {
    margin-bottom: 10px;
    font-size: 13px;
  }
}
.optionItem .optionItemTtl {
  font-size: 28px;
  font-weight: 900;
  color: #fff;
  text-align: center;
  background-color: #006FAB;
  margin-bottom: 30px;
}
@media screen and (max-width: 767px) {
  .optionItem .optionItemTtl {
    margin-bottom: 15px;
    font-size: 18px;
  }
}
.optionItem + .optionItem .optionItemTtl {
  background-color: #0FB29D;
}

.optionLink {
  display: block;
  margin-top: 40px;
  text-align: center;
  font-size: 18px;
  transition-duration: 0.3s;
}
@media screen and (max-width: 767px) {
  .optionLink {
    margin-top: 20px;
    font-size: 14px;
  }
}
.optionLink:hover {
  color: #006FAB;
}

.sec-product {
  /* background: rgba(215, 237, 250, 0.3); */
  padding: 150px 0;
}
@media screen and (max-width: 1024px) {
  .sec-product {
    padding: 100px 0;
  }
}
@media screen and (max-width: 767px) {
  .sec-product {
    padding: 60px 0;
  }
}


.productList {
  margin-bottom: 90px;
}
@media screen and (max-width: 767px) {
  .productList {
    margin-top: 40px;
  }
}

.c-centerTxt {
  text-align: center;
  margin-top: 50px;
}
@media screen and (max-width: 767px) {
  .c-centerTxt {
    text-align: left;
    margin-top: 20px;
  }
}

.kinou {
  padding: 130px 0;
}
@media screen and (max-width: 767px) {
  .kinou {
    padding: 60px 0;
  }
}

.kinouList {
  margin-top: 60px;
  counter-reset: kinou-counter;
}
@media screen and (max-width: 1024px) {
  .kinouList {
    display: block;
    padding: 0;
  }
}
@media screen and (max-width: 767px) {
  .kinouList {
    display: block;
    margin-top: 40px;
  }
}

.kinouItem {
  /* width: calc((100% - 120px) / 3); */
  width: 100%;
  padding: 48px 30px;
  display: flex;
  gap: 0 40px;
  counter-increment: kinou-counter;
  
}
@media screen and (max-width: 1024px) {
  .kinouItem {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    padding: 0;
    flex-direction: column;
  }
  .kinouItem + .kinouItem {
    margin-top: 60px;
  }
}
@media screen and (max-width: 767px) {
  .kinouItem {
    width: 100%;
   
  }
  .kinouItem + .kinouItem {
    margin-top: 20px;
  }
}

.kinouItem::before{
  content: counter(kinou-counter, decimal-leading-zero) ;
  font-weight: bold;
  font-family: 'Outfit', sans-serif;
  color: #D7EDFA;
  font-size: 56px;
  flex-shrink: 0;
  line-height: 1;
}

@media screen and (max-width: 1024px) {
  .kinouItem::before{
    display: none;
  }
}

.kinouImg {
  /* height: 260px; */
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-shrink: 0;
  width: 27.4%;
}
@media screen and (max-width: 1024px) {
  .kinouImg {
    height: auto;
    margin-bottom: 0px;
    width: 100%;
  }
}
@media screen and (max-width: 767px) {
  .kinouImg {
    height: auto;
    display: block;
    margin-bottom: 5px;
  }
}

.kinouItem_txtBox{

}

.kinouItemTtl {
  font-size: 24px;
  font-weight: bold;
  color: #00244B;
  text-align: center;
  line-height: 1.5;
  display: flex;
  align-items: center;
}

@media screen and (max-width: 1024px) {
  .kinouItemTtl{
    justify-content: center; 
    margin: 22px 0;
  }
}

@media screen and (max-width: 767px) {
  .kinouItemTtl {
    font-size: 18px;
    height: auto;
  }
}

.kinouItemTxt {
  font-size: 15px;
  font-weight: bold;
  color: #00244B;
  margin-top: 10px;
  margin-bottom: 15px;
}
@media screen and (max-width: 1024px) {
  .kinouItemTxt {
    height: auto;
  }
}
@media screen and (max-width: 767px) {
  .kinouItemTxt {
    font-size: 13px;
    height: auto;
  }
}

.kinouItemPointBox {
  padding: 55px 20px 20px 20px;
  background-color: rgba(248, 178, 43, 0.3);
  border-radius: 20px;
  position: relative;
  line-height: 1.5;
  font-size: 14px;
}
@media screen and (max-width: 767px) {
  .kinouItemPointBox {
    font-size: 12px;
    padding: 40px 10px 10px 10px;
    border-radius: 10px;
  }
}
.kinouItemPointBox::before {
  content: "";
  display: inline-block;
  position: absolute;
  background-image: url(../img/connect-common/star.svg);
  width: 18px;
  height: 18px;
  background-position: center;
  background-repeat: no-repeat;
  top: 25px;
  left: 20px;
}
@media screen and (max-width: 767px) {
  .kinouItemPointBox::before {
    width: 15px;
    height: 15px;
    top: 10px;
    left: 10px;
  }
}
.kinouItemPointBox::after {
  content: "POINT";
  display: inline-block;
  position: absolute;
  font-size: 15px;
  font-family: "Outfit", sans-serif;
  color: #ED940E;
  top: 27px;
  left: 43px;
  line-height: 1.2;
}
@media screen and (max-width: 767px) {
  .kinouItemPointBox::after {
    font-size: 13px;
    top: 12px;
    left: 32px;
  }
}