@charset "UTF-8";
/* -----------------------
common
----------------------- */
@font-face {
  font-family: "Noto Sans Japanese";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/NotoSansCJKjp-Regular.min.woff2") format("woff2"), url("../fonts/NotoSansCJKjp-Regular.min.woff") format("woff"), url("../fonts/NotoSansCJKjp-Regular.min.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans Japanese";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/NotoSansCJKjp-Bold.min.woff2") format("woff2"), url("../fonts/NotoSansCJKjp-Bold.min.woff") format("woff"), url("../fonts/NotoSansCJKjp-Bold.min.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Noto Serif Japanese";
  font-style: normal;
  font-weight: 500;
  src: url("../fonts/NotoSerifCJKjp-Medium.min.woff2") format("woff2"), url("../fonts/NotoSerifCJKjp-Medium.min.woff") format("woff"), url("../fonts/NotoSerifCJKjp-Medium.min.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Noto Serif Japanese";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/NotoSerifCJKjp-Bold.min.woff2") format("woff2"), url("../fonts/NotoSerifCJKjp-Bold.min.woff") format("woff"), url("../fonts/NotoSerifCJKjp-Bold.min.ttf") format("truetype");
  font-display: swap;
}
main {
  font-family: YakuHanJP, "Noto Sans Japanese", sans-serif;
  line-height: 1.6;
}
@media (max-width: 820px) {
  main {
    font-size: 0.875rem;
  }
}

img {
  max-width: 100%;
}

ul {
  list-style: none;
}

section {
  padding-block: 6rem 8rem;
}
@media (max-width: 820px) {
  section {
    padding-block: 4rem 5rem;
  }
}
@media (max-width: 480px) {
  section {
    padding-block: 2.5rem 4rem;
  }
}

.wrapper {
  max-width: 800px;
  margin-inline: auto;
}
@media (max-width: 820px) {
  .wrapper {
    margin-inline: 4%;
  }
}

.title {
  font-size: clamp(1.25rem, 0.8rem + 2.25vw, 3.5rem);
  font-weight: 700;
  -webkit-text-stroke: 0.15em #fff;
  text-stroke: 0.15em #fff;
  paint-order: stroke;
  margin-inline: auto;
  margin-bottom: 2rem;
  width: -moz-fit-content;
  width: fit-content;
  padding-inline: 4px;
  position: relative;
  z-index: 1;
}
@media (max-width: 480px) {
  .title {
    margin-bottom: 1.5rem;
  }
}
.title span {
  font-size: clamp(1rem, 0.7rem + 1.5vw, 2.5rem);
}
.title:after {
  content: "";
  left: 0;
  bottom: 0.1em;
  background-color: #fff;
  border-radius: 100vmax;
  height: 0.15em;
  position: absolute;
  width: 100%;
  z-index: -1;
}

.yellow {
  background-color: #ecead6;
}
.yellow .title {
  color: #1e9886;
}

.blue {
  background-color: #d2eae7;
}
.blue .title {
  color: #a09830;
}

.green {
  background-color: #d8f2e1;
}
.green .title {
  color: #3ac06a;
}

.gray {
  background-color: #ececec;
}

.text {
  line-height: 2;
  max-width: 800px;
  margin-inline: auto;
}
.text p + p {
  margin-top: 1rem;
}

.btns {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.btn-cmn {
  background-color: #3ac06a;
  border: 2px solid #3ac06a;
  border-radius: 8px;
  color: #fff;
  display: flex;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);
  font-weight: 700;
  padding-block: 0.25rem;
  padding-inline: 3.5rem;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}
@media (max-width: 820px) {
  .btn-cmn {
    padding-inline: 1rem;
  }
}
@media (max-width: 480px) {
  .btn-cmn {
    flex-wrap: wrap;
    gap: 0 1rem;
  }
}
.btn-cmn span {
  font-weight: normal;
  margin-inline: -1rem;
}
.btn-cmn:hover {
  background-color: #fff;
  color: #3ac06a;
  transition: none;
  opacity: 1;
}
.btn-cmn:hover:after {
  background-color: #3ac06a;
}
.btn-cmn:after {
  content: "";
  -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
          clip-path: polygon(0 0, 100% 50%, 0 100%);
  width: 6px;
  height: 12px;
  background-color: #fff;
}

/* -----------------------
main visual
----------------------- */
#mdhq-visual {
  position: relative;
  width: 100%;
  background-image: url(../img/main-bg.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
#mdhq-visual .contents {
  display: grid;
  justify-items: center;
  padding-block: 2rem 2.5rem;
  width: 50%;
  margin-inline: auto;
}
@media (max-width: 480px) {
  #mdhq-visual .contents {
    padding-block: 0.5rem 1rem;
  }
}
#mdhq-visual .contents .catch {
  margin-bottom: -14px;
}
@media (max-width: 820px) {
  #mdhq-visual .contents .catch {
    margin-bottom: -7px;
  }
}
#mdhq-visual .contents h1 {
  font-size: 0;
}
#mdhq-visual .contents a {
  display: block;
}
#mdhq-visual .contents .author-title {
  font-family: "Noto Serif Japanese", serif;
  font-size: clamp(0.625rem, 0.575rem + 0.25vw, 0.875rem);
  font-weight: 500;
  margin-bottom: 0.25rem;
}
#mdhq-visual .contents .author-name {
  font-family: "Noto Serif Japanese", serif;
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.5rem);
  font-weight: 700;
}
#mdhq-visual .contents .author-role {
  font-family: "Noto Serif Japanese", serif;
  font-size: clamp(0.75rem, 0.675rem + 0.38vw, 1.125rem);
  font-weight: 700;
}

/* -----------------------
nav
----------------------- */
#nav {
  background-color: #a09830;
  padding-block: 0.5rem;
}
#nav .nav {
  display: flex;
  gap: 0.5rem;
}
@media (max-width: 820px) {
  #nav .nav {
    flex-wrap: wrap;
  }
}
#nav .nav li {
  width: 25%;
}
@media (max-width: 820px) {
  #nav .nav li {
    width: calc(50% - 0.25rem);
  }
}
#nav .nav li a {
  border: 1px solid #fff;
  border-radius: 8px;
  color: #fff;
  display: flex;
  font-size: clamp(0.875rem, 0.8rem + 0.38vw, 1.25rem);
  font-weight: 700;
  padding-block: 0.25rem;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}
#nav .nav li a:hover {
  background-color: #fff;
  color: #a09830;
  transition: none;
  opacity: 1;
}
#nav .nav li a:after {
  content: "";
  -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
          clip-path: polygon(0 0, 100% 50%, 0 100%);
  width: 6px;
  height: 12px;
  background-color: currentColor;
}

.forPC {
  display: block;
}

/* -----------------------
こんなお悩みありませんか？
----------------------- */
#problem dl + dl {
  margin-top: 3rem;
}
@media (max-width: 480px) {
  #problem dl + dl {
    margin-top: 2rem;
  }
}
#problem dl dt {
  font-size: clamp(0.875rem, 0.75rem + 0.63vw, 1.5rem);
  font-weight: 700;
  margin-bottom: 1.125rem;
  text-align: center;
}
#problem dl dd {
  background-color: #fff;
  border-radius: 2.5rem;
  display: grid;
  justify-items: center;
  padding: 2rem;
  position: relative;
  box-shadow: 6px 6px 12px rgba(160, 152, 48, 0.3019607843);
}
@media (max-width: 480px) {
  #problem dl dd {
    padding: 1.25rem 1.5rem 1.5rem;
  }
}
#problem dl dd p {
  color: #a09830;
  font-size: clamp(0.875rem, 0.825rem + 0.25vw, 1.125rem);
  font-weight: 700;
}
#problem dl dd strong {
  color: #3ac06a;
  font-size: clamp(1rem, 0.8rem + 1vw, 2rem);
  text-align: center;
}
#problem dl dd strong + p {
  margin-top: 0.5rem;
}
#problem dl dd:before {
  background-color: #fff;
  content: "";
  -webkit-clip-path: polygon(50% 0, 100% 100%, 0 100%);
          clip-path: polygon(50% 0, 100% 100%, 0 100%);
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: -11px;
  height: 12px;
  width: 24px;
}

/* -----------------------
MDHQとは
----------------------- */
#about .text + .spec {
  margin-top: 1.5rem;
}

.spec {
  background-color: #fff;
  border: 1px solid #a09830;
  border-radius: 2.5rem;
}
.spec .product {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  padding: 2rem 2rem 1.5rem;
}
@media (max-width: 480px) {
  .spec .product {
    gap: 0.25rem;
    padding: 1.25rem 1.5rem 1.25rem;
    flex-direction: column;
  }
}
.spec .product .name {
  font-size: clamp(1.25rem, 1rem + 1.25vw, 2.5rem);
  text-align: center;
  line-height: 1.1;
}
.spec .product .name span {
  font-size: clamp(1.125rem, 1.05rem + 0.38vw, 1.5rem);
  display: block;
}
.spec .product .price {
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);
  font-weight: normal;
}
.spec .product .price span {
  font-size: clamp(1.125rem, 1.05rem + 0.38vw, 1.5rem);
}
.spec .spec-title {
  background-color: #a09830;
  color: #fff;
  font-size: clamp(0.875rem, 0.85rem + 0.13vw, 1rem);
  font-weight: normal;
  text-align: center;
  padding-block: 2px;
}
.spec .btns {
  margin: 1rem auto 2rem;
  max-width: 600px;
}
@media (max-width: 820px) {
  .spec .btns {
    margin-inline: 2rem;
  }
}
@media (max-width: 480px) {
  .spec .btns {
    flex-direction: column;
    margin-inline: 1.5rem;
  }
}
@media (min-width: 481px) {
  .spec .btns .btn-cmn {
    width: 50%;
  }
}

.notes {
  font-size: clamp(0.75rem, 0.725rem + 0.13vw, 0.875rem);
  margin-top: 0.5rem;
}
@media (min-width: 481px) {
  .notes {
    text-align: center;
  }
}

.demo {
  background-color: #fff;
  border: 1px solid #a09830;
  border-radius: 2.5rem;
  margin-top: 3rem;
  padding: 1.5rem 2rem 2.5rem;
}
@media (max-width: 480px) {
  .demo {
    margin-top: 2rem;
    padding: 1.25rem 1.5rem 2rem;
  }
}
.demo .demo-title {
  font-size: clamp(0.875rem, 0.825rem + 0.25vw, 1.125rem);
  margin-bottom: 0.25rem;
  text-align: center;
}
.demo p {
  font-size: clamp(0.75rem, 0.725rem + 0.13vw, 0.875rem);
  margin-bottom: 1rem;
}
.demo .single-btn {
  max-width: 300px;
  margin-inline: auto;
}
.demo .single-btn .btn-cmn {
  font-size: clamp(0.875rem, 0.85rem + 0.13vw, 1rem);
}

/* -----------------------
著作者紹介
----------------------- */
#author .col {
  display: flex;
  gap: 3rem;
  align-items: center;
}
@media (max-width: 820px) {
  #author .col {
    justify-content: center;
    gap: 1.5rem;
  }
}
@media (max-width: 480px) {
  #author .col {
    gap: 0.25rem;
    flex-direction: column;
  }
}
#author .col .pic {
  flex-basis: 240px;
}
@media (max-width: 820px) {
  #author .col .pic {
    flex-basis: 150px;
    width: 150px;
  }
}
#author .col .info .author-name {
  font-size: clamp(1.125rem, 0.75rem + 1.88vw, 3rem);
  margin-bottom: 1rem;
}
@media (max-width: 820px) {
  #author .col .info .author-name {
    margin-bottom: 0.25rem;
  }
}
@media (max-width: 480px) {
  #author .col .info .author-name {
    margin-bottom: 0;
    text-align: center;
  }
}
#author .col .info .author-name span {
  font-size: clamp(0.875rem, 0.8rem + 0.38vw, 1.25rem);
  font-weight: normal;
}
#author .col .info .author-role {
  font-size: clamp(0.875rem, 0.75rem + 0.63vw, 1.5rem);
  font-weight: 700;
}
#author .author-title {
  background-color: #fff;
  border-radius: 100vmax;
  color: #3ac06a;
  font-size: clamp(1rem, 0.975rem + 0.13vw, 1.125rem);
  margin: 3rem auto 1rem;
  padding-inline: 2.5rem;
  width: -moz-fit-content;
  width: fit-content;
}
@media (max-width: 480px) {
  #author .author-title {
    margin-top: 2rem;
  }
}

/* -----------------------
youtube
----------------------- */
#movie .iframe-wrapper {
  width: 100%;
  aspect-ratio: 16/9;
}
#movie .iframe-wrapper iframe {
  height: 100%;
  width: 100%;
}

/* -----------------------
MDHQ 4つのオススメポイント
----------------------- */
#point .point-title {
  background-color: #fff;
  border-radius: 100vmax;
  color: #3ac06a;
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.5rem);
  position: relative;
  margin-bottom: 1rem;
  padding-inline: 3rem;
  text-align: center;
}
#point .point-title:not(:first-of-type) {
  margin-top: 2.5rem;
}
@media (max-width: 480px) {
  #point .point-title:not(:first-of-type) {
    margin-top: 2rem;
  }
}
@media (max-width: 480px) {
  #point .point-title {
    padding-inline: 2rem 1rem;
  }
}
#point .point-title.one:after {
  content: "1";
}
#point .point-title.two:after {
  content: "2";
}
#point .point-title.three:after {
  content: "3";
}
#point .point-title.four:after {
  content: "4";
}
#point .point-title:after {
  background-color: #3ac06a;
  border-radius: 100vmax;
  color: #fff;
  font-size: clamp(1rem, 0.85rem + 0.75vw, 1.75rem);
  position: absolute;
  left: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  height: 1.5em;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5em;
}
#point .text .link {
  font-size: clamp(0.75rem, 0.725rem + 0.13vw, 0.875rem);
  margin-top: 0;
}
#point .text .link a {
  color: #333;
  text-decoration: underline;
}

/* -----------------------
質問票
----------------------- */
.img {
  margin-block: 1.5rem;
}
@media (max-width: 480px) {
  .img {
    margin-block: 1rem;
  }
}

/* -----------------------
フィードバックシート
----------------------- */
#feedback .text:not(:first-of-type) {
  margin-top: 3.5rem;
}
@media (max-width: 480px) {
  #feedback .text:not(:first-of-type) {
    margin-top: 2rem;
  }
}

/* -----------------------
対応環境
----------------------- */
#os .os-title {
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.5rem);
  font-weight: 700;
  text-align: center;
  line-height: 1.1;
}

/* -----------------------
footer
----------------------- */
#pamphlet {
  background-color: #a09830;
  padding: 1.5rem;
}
#pamphlet a {
  border: 2px solid #fff;
  border-radius: 8px;
  color: #fff;
  display: flex;
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.5rem);
  font-weight: 700;
  padding-block: 0.5rem;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  max-width: 400px;
  margin-inline: auto;
}
#pamphlet a:hover {
  background-color: #fff;
  color: #a09830;
  transition: none;
  opacity: 1;
}
#pamphlet a:after {
  content: "";
  -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
          clip-path: polygon(0 0, 100% 50%, 0 100%);
  width: 6px;
  height: 12px;
  background-color: currentColor;
}/*# sourceMappingURL=mdhq.css.map */