@charset "utf-8";

/*
  File Name   : questionnaire.css
  Description : コンテンツエリア関係 他
*/

/* list
============================================================ */
.-section-questionnaire .lead-text {
  font-size: 15px;
  font-weight: 500;
  text-align: center;
}
.questionnaire-list {
  margin-top: 80px;
}
.questionnaire-list ul {
  display: flex;
  flex-wrap: wrap;
}
.questionnaire-list li {
  width: calc((100% - 25px * 4) / 5);
  margin-right: 25px;
}
.questionnaire-list li:nth-child(5n) {
  margin-right: 0;
}
.questionnaire-list li:nth-child(n + 6) {
  margin-top: 80px;
}
.questionnaire-list li .img-block {
  height: 280px;
}
.questionnaire-list li .img-block img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  font-family: 'object-fit: cover';
}
.questionnaire-list li .desc-block .title-sub {
  font-size: 14px;
  font-weight: bold;
  line-height: 1.6;
  letter-spacing: 0;
  color: #14648c;
  margin-top: 15px;
}
.questionnaire-list li .desc-block .text {
  font-size: 14px;
  font-weight: 500;
  margin-top: 10px;
}
.questionnaire-list li .desc-block .com-btn-wrap {
  margin-top: 15px;
}

/* bn */
.questionnaire-bn-wrap {
  text-align: center;
  margin-top: 100px;
}
.questionnaire-bn-wrap a {
  display: inline-block;
  width: 580px;
  transition: all .2s ease-in-out;
}
.questionnaire-bn-wrap a:hover {
  opacity: .7;
}

/* @media
------------------------------------------------------------ */
@media screen and (max-width: 1101px) {
  .questionnaire-list li {
    width: calc((100% - 25px * 3) / 4);
    margin-right: 25px;
  }
  .questionnaire-list li:nth-child(5n) {
    margin-right: 25px;
  }
  .questionnaire-list li:nth-child(4n) {
    margin-right: 0;
  }
  .questionnaire-list li:nth-child(n + 6),
  .questionnaire-list li:nth-child(n + 5) {
    margin-top: 80px;
  }
  .questionnaire-list li .img-block {
    height: 30vw;
  }
}
@media screen and (max-width: 811px) {
  .questionnaire-list li {
    width: calc((100% - 25px * 2) / 3);
    margin-right: 25px;
  }
  .questionnaire-list li:nth-child(5n),
  .questionnaire-list li:nth-child(4n) {
    margin-right: 25px;
  }
  .questionnaire-list li:nth-child(3n) {
    margin-right: 0;
  }
  .questionnaire-list li:nth-child(n + 6),
  .questionnaire-list li:nth-child(n + 5),
  .questionnaire-list li:nth-child(n + 4) {
    margin-top: 80px;
  }
  .questionnaire-list li .img-block {
    height: 40vw;
  }

  /* bn */
  .questionnaire-bn-wrap {
    margin-top: 60px;
  }
  .questionnaire-bn-wrap a {
    width: 100%;
  }
  .questionnaire-bn-wrap a:hover {
    opacity: 1;
  }
}
@media screen and (max-width: 601px) {
  .questionnaire-list li {
    width: 100%;
    margin-right: 0;
  }
  .questionnaire-list li:nth-child(5n),
  .questionnaire-list li:nth-child(4n) {
    margin-right: 0;
  }
  .questionnaire-list li:nth-child(3n) {
    margin-right: 0;
  }
  .questionnaire-list li:nth-child(n + 6),
  .questionnaire-list li:nth-child(n + 5),
  .questionnaire-list li:nth-child(n + 4),
  .questionnaire-list li:nth-child(n + 2) {
    margin-top: 40px;
  }
  .questionnaire-list li .img-block {
    height: 120vw;
  }
}

/* detail
============================================================ */
#questionnaire.detail #lay-main {
  padding-bottom: 0;
}
.com-detail-head  {
  padding-bottom: 110px;
}
.com-detail-head .eyecatch-img-wrap {
  max-width: 420px;
  margin: 60px auto 0;
}
.-section-questionnaire-detail {
  padding: 110px 0 100px;
  background-color: #fff;
}
.-section-questionnaire-detail .-questionnaire-detail-body {
  max-width: 750px;
  margin: 0 auto;
}
.-section-questionnaire-detail .-questionnaire-detail-body .name {
  display: block;
  padding-bottom: 10px;
}
.-section-questionnaire-detail .-questionnaire-detail-body .sub_ttl {
  font-size: 25px;
  font-weight: 500;
  color: #000;
  display: block;
  padding-bottom: 45px;
}

/* @media
------------------------------------------------------------ */
@media screen and (max-width: 811px) {
  .com-detail-head  {
    padding-bottom: 60px;
  }
  .-section-questionnaire-detail {
    padding: 60px 0 100px;
  }
}

/* hoge
============================================================ */
.hoge {
}

/* @media
------------------------------------------------------------ */
@media screen and (max-width: 811px) {
  .hoge {
  }
}