/*
Theme Name: otomeshi
Version: 1.0
*/
/************************************

reset

************************************/
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-size: 100%;
  line-height: 1;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: inherit;
}

li {
  list-style-type: none;
}

img {
  vertical-align: bottom;
  border: 0;
}

table {
  border-collapse: collapse;
}

address,
em {
  font-style: normal;
}

button {
  padding: 0;
  border: 0;
}

hr {
  border: 0;
  border-top: 1px solid #000;
}

/************************************

base

************************************/
html {
  height: 100%;
  font-size: 625%;
}

@media screen and (max-width: 767px) {
  html {
    font-size: 580%;
  }
}

body {
  position: relative;
  overflow-x: hidden;
  height: 100%;
  background-color: #fff;
  color: #4d4d4d;
  font-size: 0.16rem;
  font-family: sans-serif;
}

a {
  color: inherit;
  transition: 0.2s all ease 0s;
}

p {
  line-height: 1.6;
}

p a {
  text-decoration: underline;
}

p a:hover {
  color: #e4bd1a;
  text-decoration: none;
}

sub {
  vertical-align: baseline;
  font-size: 0.7em;
}

img {
  max-width: 100%;
  height: auto;
}

.bnr {
  margin: min(0.7rem, 10vw) 0 0 0;
  padding: min(0.4rem, 6vw) 0.2rem;
  background: #fff7ea;
}

.home .bnr {
  margin: 0;
  padding: min(0.4rem, 6vw) 0.2rem 0 0.2rem;
  background: #fff;
}

.bnr__container {
  text-align: center;
}

.bnr__container+.bnr__container {
  margin: 0.4rem 0 0;
}

.bnr__item {
  display: block;
  max-width: 700px;
  margin: 0 auto;
}

.btn {
  display: inline-block;
  padding: 0.7em 1.4em;
  border-radius: 20px;
  background: #df0428;
  color: #fff;
  font-size: min(0.28rem, 5vw);
  text-decoration: none;
  transition: 0.2s all ease 0s;
}

.btn:hover {
  opacity: 0.7;
}

.container {
  margin: min(0.7rem, 10vw) 0 0 0;
  padding-right: 0.2rem;
  padding-left: 0.2rem;
}

.dj {
  padding: min(0.4rem, 6vw) 0.2rem;
  background: #e4bd1a;
}

.dj__container {
  display: flex;
  gap: 0.24rem;
  align-items: center;
  max-width: 720px;
  margin: 0 auto;
}

@media screen and (max-width: 767px) {
  .dj__container {
    flex-direction: column;
  }
}

.dj__photo {
  flex-basis: 30%;
  overflow: hidden;
  border-radius: 20px;
}

.dj__info {
  flex: 1;
  color: #fff;
}

.dj__heading {
  font-weight: bold;
  font-size: 0.22rem;
}

.dj__txt {
  margin: 0.8em 0 0;
  font-size: 0.18rem;
  line-height: 1.8;
}

.has-interviewer-color {
  color: #8e7548;
}

.has-guest-name-color {
  color: #004ba0;
}

.has-mc-name-color {
  color: #e4bd1a;
}

.has-red-color {
  color: #df0428;
}

.footer {
  padding: 0.4rem 0.2rem;
}

.footer__copyright {
  display: block;
  font-size: 0.14rem;
  text-align: center;
}

.guest {
  max-width: 1088px;
  margin: min(0.5rem, 5vw) auto 0;
}

.guest__first {
  display: flex;
  justify-content: center;
}

.guest__first figure {
  overflow: hidden;
  max-width: 384px;
  border-radius: 20px;
}

.guest__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.32rem 0.12rem;
}

@media screen and (max-width: 900px) {
  .guest__list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 520px) {
  .guest__list {
    grid-template-columns: 1fr;
  }
}

.guest__card {
  display: block;
  text-decoration: none;
  transition: 0.2s all ease 0s;
}

.guest__card:hover {
  transform: translate(0, -0.12rem);
}

.guest__photo {
  position: relative;
  display: block;
}

.guest__photo img {
  border-radius: 20px;
}

.guest__photo::before {
  content: "";
  position: absolute;
  top: 0;
  right: 5%;
  display: block;
  width: 0.28rem;
  height: 0.28rem;
  background: url(images/icon_disc-blue.svg) center center/cover;
  transform: translate(0, -50%);
}

.guest__photo::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 5%;
  display: block;
  width: 0.28rem;
  height: 0.28rem;
  background: url(images/icon_knife-red.svg) center center/cover;
  transform: translate(0, 50%);
}

.guest__item:nth-of-type(even) .guest__photo::before {
  background-image: url(images/icon_disc-red.svg);
}

.guest__item:nth-of-type(even) .guest__photo::after {
  background-image: url(images/icon_knife-blue.svg);
}

.guest__name {
  margin: 0.6em 0 0;
  font-size: 0.2rem;
  text-align: center;
}

.guest__btn {
  margin: 0.4rem 0 0;
  text-align: center;
}

.header-top {
  height: 766px;
  background: url(images/bg.jpg) center top/cover;
}

@media screen and (max-width: 767px) {
  .header-top {
    height: 477px;
  }
}

.header-top__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 0.2rem;
}

.header-top__date {
  margin: 0.38rem 0 0;
}

@media screen and (max-width: 767px) {
  .header-top__date {
    width: 70vw;
  }
}

.header-top__logo {
  margin: 0.4rem 0 0;
}

@media screen and (max-width: 767px) {
  .header-top__logo {
    width: 34vw;
  }
}

.header {
  padding: 0.3rem;
  background: url(images/bg.jpg) center center/cover;
}

.header__container {
  display: flex;
  align-items: flex-end;
  max-width: 1088px;
  margin: 0 auto;
}

@media screen and (max-width: 767px) {
  .header__container {
    flex-direction: column;
    align-items: center;
  }
}

.header__title {
  margin: 0 auto 0 0;
}

@media screen and (max-width: 767px) {
  .header__date {
    width: 70vw;
    margin: 0.2rem 0 0;
  }
}

.header__logo {
  margin: 0 0 0 0.2rem;
  transform: translate(0, -34%);
}

@media screen and (max-width: 767px) {
  .header__logo {
    width: 34vw;
    margin: 0.2rem 0 0;
  }
}

.heading {
  color: #004ba0;
  font-size: min(0.33rem, 6vw);
  text-align: center;
}

.heading__sub {
  margin: 0.7em 0 0;
  text-align: center;
}

.heading__sub em {
  color: #e4bd1a;
  font-weight: bold;
}

@media screen and (max-width: 767px) {
  .heading__sub {
    text-align: left;
  }
}

.interview {
  padding: min(0.7rem, 10vw) 0 0 0;
}

.interview> :not(.alignfull) {
  width: calc(100% - 0.4rem);
  max-width: 720px;
  margin-right: auto;
  margin-left: auto;
}

.interview p {
  margin-top: 2em;
}

.interview figure {
  margin-top: 2em;
}

.interview h2:not(:first-child) {
  margin-top: 3em;
}

.interview h3:not(.recipe__heading) {
  margin-top: 3em;
  color: #8e7548;
  font-weight: bold;
}

.interview .wp-block-embed__wrapper iframe {
  width: 100%;
  height: 100%;
  aspect-ratio: 16/9;
}

.lead {
  display: flex;
  gap: min(1rem, 10vw);
  align-items: center;
  justify-content: center;
  padding: min(0.55rem, 8vw) 0.2rem;
  background: #8e7548;
}

@media screen and (max-width: 767px) {
  .lead__icon {
    display: none;
  }
}

.lead__txt {
  color: #fff;
  font-weight: bold;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .lead__txt {
    text-align: left;
  }
}

body:not(.home) .present {
  padding: min(0.4rem, 6vw) 0.2rem;
  background: #e4bd1a;
}

body:not(.home) .present .heading {
  color: #fff;
}

body:not(.home) .present .heading__sub {
  color: #fff;
}

.present__container {
  display: flex;
  gap: 0.16rem;
  justify-content: center;
  max-width: 1088px;
  margin: 0.5rem auto 0;
}

body:not(.home) .present__container {
  margin: 0.3rem auto 0;
  padding: 0.3rem;
  border-radius: 20px;
  background: #fff;
}

@media screen and (max-width: 767px) {
  body:not(.home) .present__container {
    padding: 0.2rem;
  }
}

@media screen and (max-width: 767px) {
  .present__container {
    flex-direction: column;
  }
}

.present__tweet {
  flex-basis: 40.7%;
}

@media screen and (max-width: 767px) {
  .present__tweet {
    flex-basis: auto;
  }
}

.present__info {
  flex-basis: calc(60% - 0.12rem);
  padding: 0 min(0.46rem, 4vw);
}

@media screen and (max-width: 767px) {
  .present__info {
    flex-basis: auto;
  }
}

.present__txt {
  margin: 1em 0 0;
  font-size: 0.2rem;
}

.recipe {
  margin-top: min(0.4rem, 6vw);
  padding: min(0.4rem, 6vw) 0.2rem;
  background: #8e7548;
}

.recipe figure,
.recipe p {
  margin: 0;
}

.recipe__heading {
  color: #fff;
  font-weight: bold;
  font-size: 0.22rem;
  letter-spacing: 0.2em;
  text-align: center;
}

.recipe__heading::before {
  content: "";
  display: inline-block;
  width: 0.22rem;
  height: 0.22rem;
  margin: 0 0.5em 0 0;
  background: url(images/icon_knife.svg) center center/cover;
  transform: translate(0, 10%);
}

.recipe__heading::after {
  content: "";
  display: inline-block;
  width: 0.22rem;
  height: 0.22rem;
  margin: 0 0 0 0.3em;
  background: url(images/icon_disc.svg) center center/cover;
  transform: translate(0, 10%);
}

.recipe__container {
  display: flex;
  gap: min(0.16rem, 16vw);
  max-width: 1088px;
  margin: 0.3rem auto 0;
}

.recipe__container>.wp-block-group__inner-container {
  display: flex;
  gap: min(0.16rem, 16vw);
  width: 100%;
  max-width: 1088px;
}

@media screen and (max-width: 767px) {
  .recipe__container>.wp-block-group__inner-container {
    flex-direction: column;
  }
}

@media screen and (max-width: 767px) {
  .recipe__container {
    flex-direction: column;
  }
}

.recipe__photo {
  flex-basis: 50%;
  padding: 0 4.2%;
}

.recipe__photo p {
  margin: 1em 0 0;
  color: #fff;
  font-weight: bold;
}

@media screen and (max-width: 767px) {
  .recipe__photo {
    padding: 0;
  }
}

.recipe__info {
  flex-basis: 50%;
  color: #fff;
  font-weight: bold;
}

.recipe__info p+p {
  margin: 1em 0 0;
}

.recipe__info ol {
  padding: 0 0 0 1.4em;
}

.recipe__info li {
  margin: 1em 0 0;
  list-style-type: decimal;
  line-height: 1.4;
}

.support {
  padding: min(0.4rem, 6vw) 0.2rem;
  background: #cecece;
}

.support__container {
  display: flex;
  gap: 0.24rem;
  align-items: center;
  max-width: 1088px;
  margin: 0 auto;
}

@media screen and (max-width: 767px) {
  .support__container {
    flex-direction: column;
  }
}

.support__photo {
  flex-basis: 23%;
}

.support__info {
  flex: 1;
  color: #fff;
}

.support__heading {
  font-weight: bold;
  font-size: 0.22rem;
}

.support__txt {
  margin: 0.8em 0 0;
  font-size: 0.18rem;
  line-height: 1.8;
}

.fade-in {
  opacity: 0;
}

.fade-in.is-show {
  opacity: 1;
  transition: 0.7s ease opacity 1s;
}

.up-in {
  opacity: 0;
  transform: translate(0, 0.2rem);
}

.up-in.is-show {
  opacity: 1;
  transition: 0.7s ease all;
  transform: translate(0, 0);
}

.blur {
  opacity: 0;
}

.blur.is-show {
  animation: blur 1s ease forwards;
}

@keyframes fade {
  100% {
    opacity: 1;
  }
}

@keyframes blur {
  0% {
    opacity: 0;
    filter: blur(12px);
  }

  100% {
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes mouseon {
  1% {
    opacity: 0.3;
  }

  100% {
    opacity: 1;
  }
}

@keyframes scale {
  0% {
    opacity: 0;
    transform: scale(1.1);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/************************************

Display switch

************************************/
.pc-block {
  display: block;
}

.pc-inline {
  display: inline;
}

.sp-block {
  display: none;
}

.sp-inline {
  display: none;
}

@media screen and (max-width: 767px) {
  .pc-block {
    display: none;
  }

  .sp-block {
    display: block;
  }
}

@media screen and (max-width: 480px) {
  .pc-inline {
    display: none;
  }

  .sp-inline {
    display: inline;
  }
}