@charset "UTF-8";

/* header
================================================= */
header {
  width: 100%;
  padding-top: 3%;
  background-color: #060025;
  background-image: url(../image/bg_header-number.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 180% auto;
}
header h1 {
  width: min(100%, 1250px);
  margin: 0 auto;
  padding: 1px 0;
  background-image: url("../image/bg_header-hexagon.png");
  background-repeat: no-repeat;
  background-position: left 3vw top;
  background-size: 92% auto;
}
header h1 img {
  width: 65%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: -4%;
}
@media print, screen and (min-width: 625px) {
  header { padding-top: 2%; background-size: 90% auto; }
  header h1 { background-position: left 14vw top; background-size: 70% auto; }
  header h1 img { width: 50%; margin-bottom: -3%; }
}
@media print, screen and (min-width: 1366px) {
  header { padding-top: 20px; background-size: 1230px auto; }
  header h1 { background-position: left 180px top; }
  header h1 img { margin-bottom: -27px; }
}


/* main
================================================= */
main {
  padding-top: 3%;
}
@media print, screen and (min-width: 1366px) {
  main { padding-top: 40px; }
}

/* section : common */
.area > section > h2 {
  margin-bottom: 8%;
}
.area > section > h3 {
  margin-bottom: 7%;
  font-family: "NotoSansJP-Bold", sans-serif;
  line-height: 1.4;
  text-align: center;
}
.area > section > h3 img {
  width: 100%;
  margin: 0 auto;
}
@media print, screen and (min-width: 625px) {
  .area > section > h2 { margin-bottom: 6%; }
  .area > section > h3 { margin-bottom: 5%; }
  .area > section > h3 img { width: clamp(400px, 70%, 560px); }
}
@media print, screen and (min-width: 960px) {
  .area > section > h3 img { width: max(500px, 50%); }
}
@media print, screen and (min-width: 1366px) {
  .area > section > h2 { margin-bottom: 90px; }
  .area > section > h3 { margin-bottom: 65px; }
}

/* siteflow : foot */ 
.siteflow.foot {
  width: min(80%, 1092px);
  margin: 0 auto;
}
.siteflow.foot a.btn {
  width: min(100%, 310px);
  margin: 0 auto;
}


/* main : interview
================================================= */
main.interview h2 .period {
  display: block;
  width: 8em;
  margin: 3% auto 0;
  padding: 0.2em;
  background-color: #060025;
  color: #ffffff;
  font-size: clamp(1.8rem, 5.3vw, 3.0rem);
  font-family: "Lato-Bold", sans-serif;
}
@media print, screen and (min-width: 625px) {
  main.interview h2 .period { font-size: clamp(2.6rem, 4.2vw, 3.8rem); }
}
@media print, screen and (min-width: 960px) {
  main.interview h2 .period { font-size: clamp(3.5rem, 3.5vw, 4.3rem); }
}

/* archive list */
main.interview ul.archive-lists {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: -4%;
}
main.interview ul.archive-lists li {
  width: 100%;
  margin-bottom: 4%;
}
main.interview ul.archive-lists li a.btn.small {
  width: min(100%, 280px);
  margin: 0 auto;
}
@media print, screen and (min-width: 625px) {
  main.interview ul.archive-lists { justify-content: space-between; margin-bottom: -3%; }
  main.interview ul.archive-lists li { width: 47.5%; margin-bottom: 3%; }
}
@media print, screen and (min-width: 625px) and (max-width: 767px) {
  main.interview ul.archive-lists li:nth-child(odd) a.btn.small { margin-right: initial; }
  main.interview ul.archive-lists li:nth-child(even) a.btn.small { margin-left: initial; }
}
@media print, screen and (min-width: 768px) {
  main.interview ul.archive-lists { margin-bottom: -3%; }
  main.interview ul.archive-lists li { width: 31%; margin-bottom: 3%; }
  main.interview ul.archive-lists li:nth-child(3n+2):last-child { margin-right: 34.5%; }
  main.interview ul.archive-lists li a.btn.small { width: 100%; margin: 0; }
}
@media print, screen and (min-width: 1100px) {
  main.interview ul.archive-lists li { width: 22.75%; }
  main.interview ul.archive-lists li:nth-child(3n+2):last-child { margin-right: initial; }
  main.interview ul.archive-lists li:nth-child(4n+2):last-child { margin-right: 51.5%; }
  main.interview ul.archive-lists li:nth-child(4n+3):last-child { margin-right: 25.75%; }
}


/* main : message
================================================= */
main.message article {
  width: min(90%, 1018px);
  margin-left: auto;
  margin-right: auto;
  border-color: #6de6f7;
  border-style: solid;
  border-width: 6px;
  border-radius: 8px;
  background-color: #ffffff;
}
main.message article > *:not(.featured-image) {
  width: 88%;
  margin-left: auto;
  margin-right: auto;
}
main.message article .profile {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 9%;
  padding: 5%;
  background-color: #dcf2f3;
}
main.message article .profile .face {
  width: 70%;
}
main.message article .profile .face img {
  border-radius: 15px;
}
main.message article .profile .detail {
  margin-top: 5%;
}
main.message article .profile .detail hgroup {
  margin-bottom: 0.6em;
  color: #060025;
  font-weight: bold;
  line-height: 1.6;
}
main.message article .profile .detail hgroup h3 {
  margin-bottom: 0.05em;
  font-size: 2.4rem;
  line-height: 1.4;
}
main.message article dl.qa {
  margin-top: 12%;
}
main.message article dl.qa dt {
  margin-top: 9%;
  margin-bottom: 0.5em;
  color: #060025;
  font-weight: bold;
}
main.message article dl.qa dt::before {
  content: "Q";
  margin-right: 0.25em;
  font-family: "Lato-Bold", sans-serif;
  font-size: 1.3em;
  line-height: 1.0;
}
main.message article .company {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin-top: 12%;
  margin-bottom: 9%;
  padding: 3% 0;
  border-color: #060025;
  border-style: solid;
  border-width: 3px 0;
}
main.message article .company span.ttl {
  display: inline-block;
  margin: 0 3%;
}
main.message article .company a.banner {
  width: min(100%, 250px);
  margin: 0.4em 3%;
}
@media print, screen and (min-width: 625px) {
  main.message article > *:not(.featured-image) { width: 86%; }
  main.message article .profile { justify-content: space-between; margin-top: 7%; padding: 3%; }
  main.message article .profile .face { width: 36%; }
  main.message article .profile .detail { width: 60%; margin-top: 0; }
  main.message article .profile .detail hgroup h3 { font-size: 2.8rem; }
  main.message article dl.qa { margin-top: 7%; }
  main.message article dl.qa dt { margin-top: 5%; }
  main.message article .company { margin-top: 7%; margin-bottom: 7%; }
  main.message article .company a.banner { width: 280px; }
}
@media print, screen and (min-width: 960px) {
  main.message article { border-width: 8px; }
  main.message article .profile { padding: 3%; }
  main.message article .profile .face { width: 31.5%; }
  main.message article .profile .detail { width: 64.5%; }
  main.message article .profile .detail hgroup { font-size: 1.8rem; }
  main.message article .profile .detail hgroup h3 { font-size: 3.2rem; }
  main.message article .company a.banner { width: 320px; }
}
@media print, screen and (min-width: 1366px) {
  main.message article { border-width: 10px; border-radius: 10px; }
  main.message article .profile .detail hgroup { margin-bottom: 1.0em; font-size: 2.0rem; }
  main.message article .profile .detail hgroup h3 { margin-bottom: 0.1em; font-size: 3.6rem; }
}
