@charset "utf-8";

/*-----------------------------------------------------
大見出し
-------------------------------------------------------*/

/* 中見出し
------------------------------------------------*/

/* 小見出し/コメント */

/* 1400px以下 */
@media only screen and (max-width: 1399px) {
}

/* 1200px以下 */
@media only screen and (max-width: 1199px) {
}

/* タブレット以下 */
@media only screen and (max-width: 991px) {
}

/* スマホ */
@media only screen and (max-width: 767px) {
}

/*-----------------------------------------------------
共通
-------------------------------------------------------*/
section {
  padding: 5rem 0;
}
a {
  text-decoration-line: none;
}
a:hover{
  opacity: 0.5;
}

.sec-ttl{
  position: relative;
  margin-bottom: 0.5em;
  text-align: center;
  font-weight: bold;
  color: #458ccb;
  font-size: 3.5rem;
}
.sec-ttl::before {
  background-color: #458ccb;
  bottom: -0.4em;
  content: "";
  height: 0.125em;
  left: 50%;
  position: absolute;
  transform: translateX(-50%); 
  width: 1.5em;
}
@media only screen and (max-width: 767px){
  .sec-ttl {
    font-size: 2.2rem;
  }
}

/* module上書き
------------------------------------------------*/
.text-marker{
  text-decoration-thickness: 0.25em;
  text-decoration-color: #ff8c1c;
  text-underline-offset: 0em;
}

/* Bootstrap上書き
------------------------------------------------*/

.text-danger{
  color: #f00!important;
}
.text-primary{
  color: #11415d!important;
}
.text-warning{
  color: #ff8c1c!important;
}
.text-bg-danger{
  border-radius: 0;
  background: #11415d!important;
}
.btn-primary{
  width: 100%;
  background: #11415d!important;
  border-radius: 30px;
  padding: 0.75rem 0;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(17, 65, 93, 0.2);
}

/*-----------------------------------------------------
フォント
-------------------------------------------------------*/


/*-----------------------------------------------------
タイトル
-------------------------------------------------------*/


/*-----------------------------------------------------
CTA
-------------------------------------------------------*/

.cta{
  margin: 5rem 0;
  padding: 2.5rem 0;
  background: url(../images/cta_bg.png) no-repeat;  
  background-size: cover;
}
.cta__inner{
  padding: 2rem;
  background: #fff;
  border: 5px solid #ff8c1c;
  border-radius: 30px;
}



/*-----------------------------------------------------
header
-------------------------------------------------------*/
#Header{
  background-color: #fff;
}
#Header p{
  margin-bottom: 0;
}
.h-logo{
  max-width: 20rem;
  padding-left: 2em;
}
.h_doc{
  max-width: 20.2em;
}
.h_tel{
  max-width: 29.5em;
}

@media only screen and (max-width: 1199px) {
.h-logo{
  max-width: 10rem;
  padding-left: 1em;
  padding-right: 1em;
}
.h_doc{
  max-width: 15em;
}
.h_tel{
  max-width: 22em;
}}
@media only screen and (max-width: 991px) {
.h-logo{
  max-width: 10rem;
  padding-left: 0.5em;
}}
@media only screen and (max-width: 767px) {
.h-logo_sp{
  max-width: 8rem; 
  padding: 0.5em;
  margin: 0 auto;
}}

/*-----------------------------------------------------
FV
-------------------------------------------------------*/

.fv {
  background-image: url(../images/bg.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 2em 0;
}
.fv .container{
  padding: 2em 0;
}
@media only screen and (max-width: 767px) {
  .fv {
  background-image:none;
  padding: 0;
}
.fv .container{
  padding: 0;
}}

/*-----------------------------------------------------
お知らせ
-------------------------------------------------------*/

.news-box{
  display: flex;
  justify-content: space-between;
  align-items: end;
  background: #fff;
  border-bottom: 1px solid #458ccb;
  padding: 0 1em 1.2em;
  margin-bottom: 1.2em;
}
.news-box:last-child{
  border-bottom: none;
  margin-bottom: 0;
}
.news-box .conts{
  margin-right: 1em;
}
.news-hd{
  display: flex;
  align-items: center;
  padding-bottom: 0.6em;
}
.news-hd .up{
  width: 2em;
  height: 2em;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #458ccb;
  border-radius: 30px;
  color: #fff;
  margin-left: 0.5em;
}
.news-hd .date{
  color: #404040;
  margin-right: 0.5em;
}
.news-hd .label{
  display: flex;
  justify-content: center;
  align-items: center;
  width: fit-content;
  color: #fff;
  line-height: 1;
  font-size: 0.8rem;
  padding: 0.5em;
}
.news-hd .label.event{
  background: #ff8c1c;
}
.news-hd .label.update{
  background: #458ccb;
}
.news-txt{
  font-size: 1.15rem;
}
.news-txt p:last-child{
  margin-bottom: 0;
}
.news-url{
  width: fit-content;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  border: 2px solid #458ccb;
  border-radius: 30px;
  color: #458ccb;
  font-weight: bold;
  padding: 0.5em 1em;
}
.news-url:hover{
  background: #458ccb;
  color: #fff;
}
.news-url p{
  margin: 0;
}
@media only screen and (max-width: 1199px) {
  .news-box{
    display: block;
    padding-bottom: 2em;
    margin-bottom: 2em;
  }
  .news-box .conts{
    margin-right: 0;
  }
  .news-box .links{
    width: fit-content;
    margin: 1em 0 0 auto;
  }
}
@media only screen and (max-width: 991px) {

}

/*-----------------------------------------------------
システムについて
-------------------------------------------------------*/

.about-ttl{
  color: #458ccb;
  font-weight: 900;
  font-size: 2.5rem;
  padding-bottom: 0.5em;
}
.about-answer{
  display: inline-block;
  background-color: #2f749d;
  font-weight: 900;
  font-size: 3rem;
  color: #fff;
  padding: 0.25em;
}
.about-text{
  color: #333;
  font-weight: bold;
  font-size: 1.5rem;
  line-height: 2;
}
@media only screen and (max-width: 767px) {
  .about-ttl{
    font-size: 1.6rem;
  }
  .about-answer{
    font-size: 2rem;
  }.about-text{
    font-size: 1.2rem;
  }
}

@media only screen and (max-width: 767px) {
  .step{
    padding-top: 0;
    margin-top: 0;
  }
}

/*-----------------------------------------------------
強み
-------------------------------------------------------*/

.point__label{
  display: inline-block;
  margin-bottom: 0.5em;
  padding: 0.125em 0.5em;
  background: #458ccb;
  font-size: 1.4rem;
  color: #fff;
}

/*-----------------------------------------------------
仕組み
-------------------------------------------------------*/

.structure-item{
  display: flex;
  position: relative;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-size: cover;
  aspect-ratio: 1.3/1;
}
.structure-item::before {
  position: absolute;
  content: "";
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 90%;
  aspect-ratio: 1/1;
  margin: auto;
  border-radius: 50%;
  background: #fff;
  opacity: 0.65;
  z-index: 1;
}

.structure-item__num{
  position: absolute;
  z-index: 2;
  top: 1rem;
  font-size: 3rem;
  font-weight: bold;
  color: #458ccb;
}
/* 1200px以下 */
@media only screen and (max-width: 1199px) {
  .structure-item__num{
    font-size: 2.4rem;
  }
}
/* タブレット以下 */
@media only screen and (max-width: 991px) {
  .structure-item__num{
    font-size: 1.6rem;
  }
}
/* スマホ */
@media only screen and (max-width: 767px) {
  .structure-item__num{
    font-size: 2rem;
  }
}
.structure-item__txt{
  position: relative;
  z-index: 2;
  margin-top: 2rem;
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 1.4;
}
/* 1200px以下 */
@media only screen and (max-width: 1199px) {
  .structure-item__txt{
    font-size: 1.4rem;
  }
}
/* タブレット以下 */
@media only screen and (max-width: 991px) {
  .structure-item__txt{
    font-size: 1rem;
  }
}
/* スマホ */
@media only screen and (max-width: 767px) {
  .structure-item__txt{
    font-size: 1.2rem;
  }
}
.structure-item--01{
  background-image: url(../images/shikumi01.jpg);
}
.structure-item--02{
  background-image: url(../images/shikumi02.jpg);
}
.structure-item--03{
  background-image: url(../images/shikumi03.jpg);
}

.structure-txt{
  text-align: center;
  font-weight: bold;
}
.structure-txt__deco{
  display: inline-block;
  font-family: "Roboto", sans-serif;
  background: linear-gradient(0deg, #015eea 0%, #00c0fa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.structure-businessmodel-txt__deco{
  border-bottom: 5px solid #ffde00;
}

/* ビジネスモデル
------------------------------------------------*/

.structure-businessmodel{
  background: #458ccb;
  border-radius: 50px;
  color: #fff;
}

/*-----------------------------------------------------
搭載機能
-------------------------------------------------------*/

.system-txt{
  text-align: center;
  font-weight: bold;
  font-size: 2rem;
  color: #458ccb;
}

/*-----------------------------------------------------
よくある質問
-------------------------------------------------------*/

.accordion-button--faq,
.accordion-body--faq{
  position: relative;
  padding-left: 3rem;
}
.accordion-button--faq::before,
.accordion-body--faq::before{
  position: absolute;
  left: 0;
  top: 0;
  font-size: 3rem;
  font-weight: bold;
  color: #458ccb;
}
.accordion-button--faq{
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #828282;
  font-weight: bold;
}
.accordion-button--faq::before{
  content: "Q";
}
.accordion-button--faq::after{
  filter: brightness(0) saturate(100%) invert(58%) sepia(16%) saturate(1911%) hue-rotate(169deg) brightness(85%) contrast(84%);
}
.accordion-button:not(.collapsed){
  background: none;
  box-shadow: none;
}
.accordion-body--faq{
  margin-top: 1rem;
  padding: 1rem 1rem 1rem 3rem;
  background: #eee;
}
.accordion-body--faq::before{
  content: "A";
  left: 0.75rem;
  top: 0.5rem;
  font-size: 2rem;
}


/*-----------------------------------------------------
footer
-------------------------------------------------------*/
#Footer{
  color: #fff;
  background-color: #2f749d;
  padding: 3em 2em 7em;
}
.f-cta{
  background-color: #fff;
  padding: 3em 0;
  margin-bottom: 4em;
  margin-top: 4em;
}

/* 追従 */
.fix-navi{
  position: fixed;
  z-index: 9999;
  bottom: 5em;
  right: 5%;
}
.pc-cta{
  width: 80%;
}

@media only screen and (max-width: 991px){
.fix-navi{
  position: fixed;
  z-index: 9999;
  bottom: 22em;
  right: 0%;
}
.pc-cta{
  width: 55%;
}}

@media only screen and (max-width: 767px){
.fix-navi{
  position: fixed;
  z-index: 9999;
  bottom: 0;
  width: 100%;
  text-align: center;
  background-color: #00737fd9;
  padding: 0.5em 0;
}
.fix-navi a{
  color: #fff !important;
}
.fix-navi p{
  margin-bottom: 0;
}
.navi_cta{
  width: 80%;
  margin: 0 auto;
}}

@media only screen and (max-width: 767px){
  .scroll-up {
    bottom: 70px;
    right: 20px;
  }
}

/* For mobile devices */
@media only screen and (max-width: 767px) {
  .scroll-up {
    bottom: 70px;
    right: 20px;
  }
}