@charset "UTF-8";

.disabled-link {
  pointer-events: none; /* クリックを無効化 */
  opacity: 0.5; /* 見た目もグレーアウト */
}

.intro{
  display: flex;
  gap:50px;
      align-items: center;
    justify-content: center;
    margin-bottom: 30px;
    font-size: 18px
}

.intro dd{
  max-width: 160px;
}

.intro dd img{
  width: 100%
}

.intro dt{
  max-width: 600px;
}

.nv{
  padding: 20px 0;
  background-image: linear-gradient(40deg, rgba(137, 127, 201, 0.1), rgba(82, 99, 201, 0.1));
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px
}

.nv .notice{
  width: 960px;
  color: #fff;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  background-color: #000;
  border-radius: 10px;
  text-align: center;
  line-height: 1.2;
  font-size: 13px;
  margin-bottom: 10px;
}

.nv .notice br{
  display: none;
}

.nv ul{
  display: flex;
  width: 960px;
  justify-content: space-between;
}

.nv ul li{
  background-image: linear-gradient(40deg, rgba(255, 120, 146, 1), rgba(200, 83, 168, 1));
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 16%;
  padding: 10px 0
}

.nv ul li img{
  width: 70px;
  margin-bottom: 10px
}

.title-set{
  display: flex;
  gap:4px;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px
}

.nv ul li p,
p.cap,
.title-set p{
  width: 90%;
  color: #fff;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  background-color: #000;
  border-radius: 10px;
  text-align: center;
  line-height: 1.2;
  font-size: 13px
}

.title-set img{
  height: 60px;
}

.title-set p,
p.cap{
  display: inline-flex;
  width: auto;
  padding: 0px 20px;
  height: 30px;
  margin-top: 10px
}

p.cap{
  margin-top: 0
}

.cont{
  display: none;
  background-image: linear-gradient(40deg, rgba(255, 120, 146, 1), rgba(200, 83, 168, 1));
  padding: 10px;
  border-radius: 10px
}

.cont.active{
  display: block;
}

.cont .inner{
  background-color: #fff;
  border-radius: 10px;
}

.cont .inner div{
  border: none !important;
}

.cont .inner div.box-inquiry-index-question{
  border-top: 1px solid #bfbfbf !important
}

.cont .inner div.box-inquiry-index-question:first-child{
  border-top: none !important
}

.cont .inner div.box-inquiry-index-question.is-open{
  border-bottom: 1px solid #bfbfbf !important
}

.box-inquiry-index-question{
 background: url(../img/q.svg) 10px 10px no-repeat;
 background-size: 40px
}

.box-inquiry-index-answer{
 background: url(../img/a.svg) 10px 10px no-repeat;
 background-size: 40px
}

.tag{
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 4px;
  background-color: #efefef;
  color: #000;
  margin-right: 10px;
  width: 100px;
  display: inline-block;
  text-align: center;
  box-sizing: border-box;
}

.tag.znp{
  background-color: #ffdae7;
}

.tag.ros{
  background-color: #cae8ff;
}

.tag.kou{
  background-color: #d5faff;
}

.tag.skk{
  background-color: #efe6ff;
}

.tag.ksk{
  background-color: #fff5d6;
}

.connection{
  border-radius: 10px;
  background-color: #f7f7f7;
  padding: 30px;
  margin-left: -50px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.connection ul{
  display: flex;
  gap:10px;
  flex-wrap: wrap;
  margin-top: 10px;
  width: 100%;
  justify-content: center;
}

.connection ul li{
  width: calc(50% - 5px)
}

.txt-cmn-01 a{
  color: #0037ff
}

.connection ul li a{
  background-image: linear-gradient(40deg, rgba(137, 127, 201, 1), rgba(82, 99, 201, 1));
  border-radius: 100px;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  position: relative;
}

.connection ul li a:before{
  content: "";
  position: relative;
  width: 30px;
  height: 30px;
  margin-right: 20px;
  background: url(../img/ar.svg) no-repeat;
}

.contents-main{
  width: 100%;
  padding-bottom: 0
}

.guide{
  display: flex;
  border-radius: 10px;
  background-color: #f7f7f7;
  justify-content: center;
  align-items: center;
  padding: 10px;
  font-weight: 700;
  margin-top: 20px;
  margin-bottom: 60px
}

.cta-box{
  background-color: #f4f4f4;
  font-size: 14px;
  margin-bottom: 20px;
  padding: 10px;
  margin-top: 40px;
  border-radius: 10px;
}

.cta-box .into{
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
}

ul.frms{
  display: flex;
  justify-content: center;
  gap:20px;
  margin-top: 10px
}

ul.frms li{
  width: 40%;
}


ul.frms li a{
  background-image: linear-gradient(40deg, rgba(137, 127, 201, 1), rgba(82, 99, 201, 1));
  border-radius: 100px;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  position: relative;
}

ul.frms li a.red{
  background-image: linear-gradient(40deg, rgba(255, 120, 146, 1), rgba(200, 83, 168, 1));
}

ul.frms li a:before{
  content: "";
  position: relative;
  width: 30px;
  height: 30px;
  margin-right: 20px;
  background: url(../img/ar.svg) no-repeat;
}

.bbb .item span{
  font-weight: 900;
  color: red
}

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

  .intro{
    flex-direction: column;
    gap: 20px;
  }

  .intro dt br{
    display: none;
  }

  .nv{
    padding: 10px
  }

  .nv .notice{
    width: 100%
  }

  .nv .notice br{
    display: block;
  }

  .nv ul{
    width: 100%;
    flex-wrap: wrap;
    gap: 10px;
  }

  .nv ul li{
    width: calc(50% - 5px);
    flex-direction: row;
    padding: 10px 5px
  }

  .nv ul li img{
    width: 40px;
    margin: 0 5px
  }

  .nv ul li p,
  p.cap, 
  .title-set p{
    font-size: 10px;
    height: 34px;
  }

  .contents{
    padding: 0 10px
  }

  .connection{
    padding: 20px 10px
  }

  .connection ul li a{
    font-size: 14px
  }

  .tag{
    display: block;
    width: 100%;
    padding: 0 10px
  }

  ul.frms{
    flex-direction: column;
    gap: 10px;
  }

  ul.frms li,
  .connection ul li{
    width: 100%;
  }

  ul.frms li a{
    font-size: 12px
  }

  input[type="checkbox"] {
    width: 50px
  }
}