@charset "UTF-8";

:root {
  --c-blue01: #4186D5;
  --c-blue02:#ACD9FF;
}


/* mv */
#mv{
  background: url(../images/img_mv.png);
  background-size: cover;
  height: 660px;
  width:100%;
  position: relative;
  overflow: hidden;
}
#mv >div{
  position: relative;
  height: 100%;
}
.mv_txt{
  display: block;
  position: absolute;
  top:0;
  bottom:0;
  left: -33%;
  right: 0;
  margin: auto;
  height: fit-content;
  width: fit-content;
  max-width: 400px;
  z-index: 10;
}
.mv_txt:before{
  position: absolute;
  content:"";
  top:0;
  bottom:0;
  margin: auto;
  left: -150px;
  right: 0;
  margin: auto;
  height: 700px;
  width:700px;
  background: #ffffff55;
  border-radius: 500px;
  z-index: 5000;
  backdrop-filter: blur(20px);
  z-index: -5;
}
.mv_txt h2{
font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
  font-size: 50px;
  writing-mode: vertical-rl;
  width: fit-content;
    margin: auto;
    margin-bottom:20px;
    line-height: 1.6;
    letter-spacing: 0.22em;
    font-weight: normal;
    & span{
      color: var(--c-blue01);
    }
}
.mv_txt h3{
  font-size: 20px;
  text-align: center;
  margin-bottom:10px;
}
.mv_txt p{
  line-height: 1.8;
  font-weight: 700;
  letter-spacing: 0.08em;
}
@media screen and (max-width: 1024px) {
  #mv{
    background: url(../images/img_mv_sp.png);
    background-size: cover;
    min-height: 640px;
    height: auto;
  }
  .mv_txt{
    padding-top:40px;
      padding-bottom:20px;
    position: relative;
    left: 20px;
  }
  .mv_txt_vert{
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
  }
  .mv_txt h2{
    margin: 0;
    font-size: 32px;
    letter-spacing: 0.15em;
    line-height: 1.4;
    padding-left: 10px;
  }

  .mv_txt h3{
    writing-mode: vertical-rl;
    font-size: 16px;
    margin-bottom: 100px;
    letter-spacing: 0.15em;

  }
  .mv_txt p{
    color: #fff;
    font-size: 14px;
    max-width: 90%;
    line-height: 1.6;
    font-weight: normal;
  }
  .mv_txt:before{
    content:none;
  }
}
/* mv end*/


/* intro */
#intro{
  padding:60px 0;
}
.bnrs{
  padding:60px 0;
  display: flex;
  gap:15px;
}
@media screen and (max-width: 1024px) {
  #intro{
    padding:40px 0;
  }
  #intro .topics_list{
    margin-bottom:40px;
  }
  .bnrs{
    padding: 0px 20px;
    flex-direction: column;
    align-items: center;
  }
  .bnrs img{
    display: block;
    width: 100%;
  }
  .bnrs a{
    display: block;
    width: 100%;
  }
}
/* into */

/* licence */
#licence{
  padding-bottom:100px;
}
#licence .sec_ttl{
  margin-bottom:40px;
}
#licence .sec_ttl:before{
  background: var(--c-blue02);
}
#licence .licence_key {
  align-items: center;
  margin-bottom:60px;
}
#licence .licence_key span{
  font-size: 10px;
}
#licence h3{
  margin-bottom:40px;
  text-align: center;
  font-size:32px;
  font-weight:400;
  letter-spacing: 12.8px;
  color: var(--c-blue01);
}
.lice_wrap{
  margin-bottom: 60px;
}
.lice_box{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap:20px;
}
.lice_box a{
  max-width: 253px;
  border:solid 1px var(--c-blue01);
  padding:25px 12px;
  padding-right:24px;
  border-radius: 20px;
  min-height: 180px;
}
.lice_box a:after{
  right: 10px;
  left: auto;
}
.lice_box h4{
  color:var(--c-blue01);
  margin-bottom:10px;
  line-height: 1.38;
  font-size: 92%;
}
.lice_box p{
  font-size: 12px;
  margin-bottom:10px;
  line-height: 1.5;
}
.lice_box .list_gray{
  justify-content: flex-start;
    flex-wrap: wrap;
}
@media screen and (max-width: 1024px) {
  #licence {
    padding-bottom: 80px;
  }
  #licence .sec_ttl {
    margin-bottom: 30px;
  }
  .lice_box {
    grid-template-columns: 1fr;
  }
  #licence .licence_key {
    margin-bottom: 40px;
    flex-wrap: wrap;
  }
  #licence .licence_key span{
    display: block;
    flex-basis: 100%;
    text-align: center;
  }
  #licence h3 {
    font-size: 24px;
    margin-bottom:20px;
  }
  .lice_box a {
    padding: 20px 10px;
    padding-right: 28px;
    border-radius: 20px;
    min-height: auto;
  }
  .lice_box h4{
  font-size: 91%;
}
  .lice_wrap {
    margin-bottom: 40px;
  }
  .lice_wrap:last-of-type{
    margin-bottom: 0px;
  }
}
/* licence end */


/* guide */
#guide{
  padding:100px 0;
}
#guide .sec_ttl{
  margin-bottom:60px;
}
#guide .app_wrap{
  gap:40px;
}
.guide_wrap{
  display: flex;
  justify-content: center;
  gap:20px;
}
.guide_wrap a{
  padding:20px 10px 10px;
  max-width: 205px;
  background: #def0ff;
  border-radius: 20px;
}

.guide_wrap a h3{
  margin-bottom:10px;
  &:after{
    left:auto;
    right:10px;
  }
}
.guide_wrap a >div{
  background: #fff;
  border-radius: 10px;
  padding:10px;
  font-size: 12px;
  min-height: 70px;
  line-height: 1.5;
}
@media screen and (max-width: 1024px) {
  #guide {
    padding: 80px 0;
  }
  #guide .sec_ttl {
    margin-bottom: 40px;
  }
  .guide_wrap {
    padding:0 20px;
      display: grid;
      gap:20px 10px;
      grid-template-columns: 1fr 1fr;
  }
  .guide_wrap a {
    display: flex;
    flex-direction: column;
    /* margin: auto; */
  }
  .guide_wrap a >div {
    height: 100%;
  }
}
/* guide end */



/* news */
#news{
  padding:100px 0;
}
#news .sec_ttl{
  margin-bottom:60px;
}
#news .topics_list{
  margin-bottom:40px;
}

@media screen and (max-width: 1024px) {
  #news {
      padding: 80px 0;
  }
  #news .sec_ttl {
      margin-bottom: 40px;
  }
}

/* news end */

/* contact */
#contact{
  padding:100px 0;
  background: #F0F0F0;
}
.contact_wrap{
  display: flex;
  gap:40px;
}
.contact_wrap a{
  background: #fff;
  text-align: center;
  display: block;
  width: 100%;
  max-width: 380px;
  color:var(--c-blue01);
  padding:30px 60px;
  padding-left:100px;
  font-weight: bold;
  font-size: 20px;
  border-radius: 50px;
  position: relative;
  &:before{
    content:"";
    position: absolute;
    top:0;
    bottom:0;
    left: 70px;
    margin: auto;
    width: 30px;
    height: 30px;
  }
}

.contact_wrap a.btn_q:before{
  background: url(../images/ico_q.svg);
  background-size: cover;
  top:-3px;
  /* width: 31px;
  height: 34px; */
}
.contact_wrap a.btn_c:before{
  background: url(../images/ico_com.svg);
  background-size: cover;
}
@media screen and (max-width: 1024px) {
  #contact {
      padding: 80px 0;
  }
  #contact .sec_ttl {
      margin-bottom: 40px;
  }
  #contact .inner_nar{
    padding:0 20px;
    width: fit-content;
  }
  .contact_wrap {
      flex-direction: column;
      gap: 20px;
      align-items: center;
  }
  .contact_wrap a{
    padding:20px;
    padding-left:50px;
    font-size: 16px;
  }
  .contact_wrap a.btn_q:before {
    top: -3px;
    width: 25px;
    height: 28px;
    left: 55px;
    background-size: contain;
    background-repeat:no-repeat;
  }
  .contact_wrap a.btn_c:before {
    top: -3px;
    width: 24px;
    height: 24px;
    left: 55px;
  }
}
/* contat end */

/* biz */
#biz{
  padding:100px 0;
  background:#F1F8FE;
}
.biz_btn{
  margin:auto;
  background: #fff;
  text-align: center;
  display: block;
  width: 100%;
  max-width: 380px;
  color:var(--c-blue01);
  padding:30px 60px;
  font-weight: bold;
  font-size: 20px;
  border-radius: 50px;
  position: relative;
}
@media screen and (max-width: 1024px) {
  #biz {
      padding: 80px 0;
      background: #F1F8FE;
  }
  #biz .inner_nar{
    padding:0 20px;
  }
  #biz .sec_ttl {
      margin-bottom: 40px;
  }
  .biz_btn {
    font-size: 16px;
    padding:20px;
  }
}

/* bix end */


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

}
/* 調整 */
#relation{
  padding-bottom:80px;
}
footer{
  margin-top:40px;
}