@charset "utf-8";

/* = reset
---------------------------------------------------
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  color: inherit;
  -webkit-text-size-adjust: none;
  line-height: 1;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
  display: block;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}
mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}
del {
  text-decoration: line-through;
}
abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}

/* = common
--------------------------------------------------- */
p {
  line-height: 1.7;
}
a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  text-decoration: none;
  color: inherit;
}
a:hover{
  opacity: 0.9;
  filter: alpha(opacity=90);
  -ms-filter: "alpha(opacity=90)";
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}
img {
  vertical-align: top;
  font-size:0;
  line-height: 0;
  max-width: 100%;
  height: auto;
}
input, select {
  vertical-align: baseline;
}
i {
  color: inherit;
  vertical-align: inherit;
}
table {
  border-collapse:collapse;
  border-spacing:0;
}
hr {
  display:block;
  height:1px;
  border:0;
  border-top:1px solid #cccccc;
  margin:1em 0;
  padding:0;
}

/* = Whole
--------------------------------------------------- */
html,
body {
  background-color: var(--main-color);
  font-family: "Kiwi Maru", serif;
  font-weight: 300;
  font-style: normal;
  max-width: 100vw;
  width: 100vw;
  overflow-x: hidden;
}
.serif {
  font:13px 'ヒラギノ明朝 Pro W3','Hiragino Mincho Pro','ＭＳ Ｐ明朝','MS PMincho',serif;
}
.sp {
  display: none;
}
@media (max-width: 480px) {
  .pc {
    display: none;
  }
  .sp {
    display: block;
  }
}

/* = .container
--------------------------------------------------- */
.container {
  position: relative;
  margin: auto;
  width: 1024px;
  overflow: hidden;
}
@media (max-width: 480px) {
  .container {
    position: relative;
    margin: auto;
    width: 100%;
    overflow: hidden;
  }
}

/* = hidden
--------------------------------------------------- */
.hide {
  display: block;
  text-indent: -3000px;
  overflow: hidden;
  height: 0;
}

/* = .hover
--------------------------------------------------- */
.hover {
  opacity: 0;
  transform: translate(0,6vh);
  transition: all 1000ms;
}
.hover:nth-of-type(1) {
  transition-delay: 200ms;
}
.hover:nth-of-type(2) {
  transition-delay: 400ms;
}
.hover:nth-of-type(3) {
  transition-delay: 600ms;
}
.hover:nth-of-type(4) {
  transition-delay: 800ms;
}
.hover:nth-of-type(5) {
  transition-delay: 1000ms;
}
.hover:nth-of-type(6) {
  transition-delay: 1200ms;
}
.hover:nth-of-type(7) {
  transition-delay: 1400ms;
}
.hover:nth-of-type(8) {
  transition-delay: 1600ms;
}
.hover:nth-of-type(9) {
  transition-delay: 1800ms;
}
.hover:nth-of-type(10) {
  transition-delay: 2000ms;
}
.hover:nth-of-type(11) {
  transition-delay: 2200ms;
}
.hover:nth-of-type(12) {
  transition-delay: 2400ms;
}
.hover[view="upper"] {
  opacity: 1;
  transform: translate(0, 0);
  transition-delay: 0;
}
.hover[view="downer"] {
  opacity: 1;
  transform: translate(0, 0);
  transition-delay: 300ms;
}

/* = body > menu
--------------------------------------------------- */
body #global {
  width: 100%;
  aspect-ratio: 2000 / 279;
}
body #global menu {
  width: 100%;
  background-image: url(../img/nav.png);
  background-size: 100%;
  aspect-ratio: 2000 / 279;
  overflow: hidden;
  padding: 0 7%;
  box-sizing: border-box;
  z-index: 9;
}
body #global menu a {
  width: calc(100% / 6);
  aspect-ratio: 1 / 1;
  display: block;
  float: left;
}

/* = #news-list
--------------------------------------------------- */
#news-list {
  background-image: url(../img/news-list-background.jpg);
  background-size: 100%;
  aspect-ratio: 2000 / 2290;
  overflow: hidden;
}
#news-list h2 {
  background-image: url(../img/news-list-h2.png);
  aspect-ratio: 2000 / 176;
  background-size: 100%;
  color: transparent;
  width: 60%;
  margin: 13vw auto 7vw;
}
#news-list .bx {
  width: 80%;
  margin: auto;
  position: relative;
}
#news-list .bx img {
  width: 100%;
  display: block;
}
#news-list .bx .bx-controls-direction .bx-prev {
  display: block;
  background-image: url(../img/bx-prev.png);
  aspect-ratio: 1 / 1;
  background-size: 100%;
  color: transparent;
  width: 6vw;
  position: absolute;
  left: -3vw;
  top: 21vw;
}
#news-list .bx .bx-controls-direction .bx-next {
  display: block;
  background-image: url(../img/bx-next.png);
  aspect-ratio: 1 / 1;
  background-size: 100%;
  color: transparent;
  width: 6vw;
  position: absolute;
  right: -3vw;
  top: 21vw;
}
#news-list .bx .bx-pager {
  text-align: center;
  padding: 2vw 0;
}
#news-list .bx .bx-pager-item {
  display: inline-block;
  margin: 0 10px;
  vertical-align: middle;
}
#news-list .bx .bx-pager-item a {
  display: inline-block;
  color: transparent;
  width: 10px;
  aspect-ratio: 1 / 1;
  font-size: 1px;
  background: #C9C9C9;
  border-radius: 6px;
}
#news-list .bx .bx-pager-item a.active {
  background-color: transparent;
  background-image: url(../img/bx-active.png);
  background-size: 100%;
  width: 15px;
}
#news-list pre {
  text-align: center;
  color: #4F4F4F;
  margin: 3vw 0 0;
  line-height: 1.7;
  font-family: "Kiwi Maru", serif;
  font-size: 5vw;
}

/* = #point-seven
--------------------------------------------------- */
#point-seven {
  margin-top: -5vw;
}
#point-seven h2 {
  background-image: url(../img/point-seven-h2.png);
  aspect-ratio: 20 / 3;
  background-size: 100%;
  color: transparent;
}
#point-seven div {
  background: #FFF9FC;
  padding-top: 5vw;
}
#point-seven p {
  text-align: justify;
  font-size: 4.5vw;
  color: #4F4F4F;
  padding: 0 8vw 4vw;
}
#point-seven ul {
  padding: 0 8vw;
  mix-blend-mode: multiply;
}
#point-seven ul li {
  list-style: none;
  position: relative;
  margin: 0 0 5vw;
}
#point-seven ul li p {
  position: absolute;
  color: transparent;
  font-size: 1px;
  padding: 0;
}

/* = #interview
--------------------------------------------------- */
#interview {
  background: #FFFCEB;
  padding: 8vw;
}
#interview h2 {
  background-image: url(../img/interview-h2.png);
  aspect-ratio: 2000 / 1087;
  background-size: 100%;
  color: transparent;
  margin-bottom: 5vw;
}
#interview .more {
  display: block;
  background-image: url(../img/interview-more.png);
  aspect-ratio: 2000 / 384;
  background-size: 100%;
  color: transparent;
  margin: 5vw auto;
  width: 50%;
}
#interview ul {
  overflow: hidden;
}
#interview ul li {
  list-style: none;
  width: 50%;
  box-sizing: border-box;
  float: left;
  padding: 0 2vw 5vw;
}
#interview ul li:nth-child(odd) {
  padding-left: 0;
}
#interview ul li:nth-child(even) {
  padding-right: 0;
}
#interview ul li img {
  border-right: 1px solid #7B57DD;
  border-bottom: 1px solid #7B57DD;
  box-sizing: border-box;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
#interview ul li a.name {
  color: #7B57DD;
  display: block;
  font-size: 4vw;
  border-bottom: 1.5px dotted;
  padding: 1.5vw 0 2vw;
}
#interview ul li a b {
  font-size: 6vw;
}
#interview ul li .class {
  font-size: 3vw;
  line-height: 2.5;
}
#interview ul li .class u {
  display: inline-block;
  background: #7C56DD;
  color: white;
  text-decoration: none;
  padding: 1.3vw;
  border-radius: 6px;
  margin-right: 0.5vw;
  line-height: 1;
}

/* = #twitter
--------------------------------------------------- */
#twitter {
  overflow: hidden;
  padding-bottom: 8vw;
}
#twitter h2 {
  background-image: url(../img/twitter-h2.png);
  aspect-ratio: 2000 / 422;
  background-size: 100%;
  color: transparent;
  margin-bottom: 8vw;
}
#twitter div {
  margin: 8vw;
  max-height: 100vw;
  overflow: hidden;
  border: 1px solid #CFD9DE;
  border-radius: 18px;
}
#twitter div iframe {
  margin: -1.5px;
}

/* = #message
--------------------------------------------------- */
#message {
  position: relative;
  background-image: url(../img/message.png);
  aspect-ratio: 20 / 26;
  background-size: 100%;
}
#message h2 {
  position: absolute;
  color: transparent;
}
#message p {
  position: absolute;
  width: 75%;
  position: absolute;
  top: 28vw;
  left: 0;
  right: 0;
  margin: auto;
  text-align: justify;
  text-align-last: left;
  font-size: 4.3vw;
  color: #9D6801;
}
#message .more {
  display: block;
  position: absolute;
  bottom: 5vw;
  left: 0;
  right: 0;
  margin: auto;
  background-image: url(../img/message-more.png);
  aspect-ratio: 2000 / 384;
  background-size: 100%;
  color: transparent;
  margin: 5vw auto;
  width: 50%;
}

/* = #blog-list
--------------------------------------------------- */
#blog-list {
  padding: 30vw 8vw 8vw;
  background-image: url(../img/blog-list.jpg);
  background-size: 100%;
  background-repeat: no-repeat;
}
#blog-list h2 {
  position: absolute;
  color: transparent;
}
#blog-list ul {
  overflow: hidden;
}
#blog-list ul li {
  list-style: none;
  width: 50%;
  box-sizing: border-box;
  float: left;
  padding: 0 2vw 5vw;
}
#blog-list ul li .date {
  font-size: 3vw;
  color: #F95A7E;
  margin: 2vw 0 1vw;
  display: block;
}
#blog-list ul li p {
  line-height: 1.4;
  font-size: 3.5vw;
  height: 10vw;
  overflow: hidden;
  text-align: justify;
  text-align-last: left;
}
#blog-list .more {
  display: block;
  margin: auto;
  background-image: url(../img/blog-list-more.jpg);
  aspect-ratio: 2000 / 384;
  background-size: 100%;
  color: transparent;
  margin: 5vw auto;
  width: 50%;
}

/* = #experience
--------------------------------------------------- */
#experience {
  background: #FFEEEA;
  padding: 8vw 0;
}
#experience h2 {
  background-image: url(../img/experience-h2.png);
  aspect-ratio: 2000 / 1844;
  background-size: 100%;
  color: transparent;
}
#experience p {
  text-align: center;
  color: #FF9294;
  letter-spacing: -0.3vw;
  font-size: 4.5vw;
  padding: 0 6%;
  text-align: justify;
  text-align-last: center;
}
#experience .more {
  display: block;
  margin: auto;
  background-image: url(../img/experience-more.png);
  aspect-ratio: 2000 / 384;
  background-size: 100%;
  color: transparent;
  margin: 5vw auto;
  width: 50%;
}

/* = #staff
--------------------------------------------------- */
#staff {
  padding: 39vw 9.3vw 8vw;
  background-color: #F5FFFF;
  background-image: url(../img/staff-background.png);
  background-size: 100%;
  background-repeat: no-repeat;
}
#staff p {
  color: #977FFF;
  font-size: 4.3vw;
  margin-bottom: 0;
}
#staff p:nth-of-type(2) {
  width: 50vw;
}
#staff .more {
  display: block;
  margin: auto;
  background-image: url(../img/staff-more.png);
  aspect-ratio: 2000 / 384;
  background-size: 100%;
  color: transparent;
  margin: 8vw auto 05vw;
  width: 50%;
}

/* = #qanda
--------------------------------------------------- */
#qanda {
  padding: 39vw 9.3vw 8vw;
  background-image: url(../img/qanda.png);
  background-size: 100%;
  background-repeat: no-repeat;
}
#qanda p {
  color: #AA883B;
  font-size: 4.5vw;
  margin-bottom: 8vw;
}
#qanda .more {
  display: block;
  margin: auto;
  background-image: url(../img/qanda-more.png);
  aspect-ratio: 2000 / 384;
  background-size: 100%;
  color: transparent;
  margin: 5vw auto;
  width: 50%;
}

/* = #shop-list
--------------------------------------------------- */
#shop-list {
  padding-top: 15vw;
  margin-bottom: 23vw;
  background: #EBEFFF;
}
#shop-list h2 {
  background-image: url(../img/shop-list-h2.png);
  aspect-ratio: 2000 / 259;
  background-size: 100%;
  color: transparent;
  width: 70%;
  margin: 0 auto 5vw;
}
#shop-list ul {
  overflow: hidden;
  padding: 0 4vw;
}
#shop-list ul li {
  list-style: none;
  width: 50%;
  box-sizing: border-box;
  float: left;
  padding: 0 2vw 5vw;
}
#shop-list ul li a {
  background: #EBEFFF;
  display: block;
  position: relative;
}
#shop-list ul li a:before {
  position: absolute;
  content: " ";
  display: block;
  background: white;
  width: 100%;
  aspect-ratio: 5 / 4;
  border-radius: 6vw;
}
#shop-list ul li a img {
  position: relative;
  display: block;
  mix-blend-mode: multiply;
}

/* = #float
--------------------------------------------------- */
#float {
  display: none;
  background: rgba(255, 255, 255, 0.8);
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 9;
  padding: 4vw;
}
#float > div {
  border: 4vw solid #FFE0E7;
  border-radius: 6vw;
  background: white;
  padding: 4vw 0;
  height: calc(100% - 16vw);
  overflow: scroll;
  position: relative;
}
#float .close {
  aspect-ratio: 1 / 1;
  width: 13vw;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
}
#float .header {
  aspect-ratio: 2000 / 583;
  background-image: url(../img/menu-header.png);
  background-size: 100%;
  margin-bottom: 4vw;
  padding: 11% 16% 0;
  box-sizing: border-box;
  overflow: hidden;
}
#float .header a {
  aspect-ratio: 1 / 1;
  width: 25%;
  float: left;
}
#float .footer {
  aspect-ratio: 2000 / 329;
  background-image: url(../img/menu-footer.png);
  background-size: 100%;
  margin-top: 4vw;
  padding: 0 33%;
  box-sizing: border-box;
  overflow: hidden;
}
#float .footer a {
  aspect-ratio: 1 / 1;
  width: 50%;
  float: left;
}
#float menu a {
  display: block;
  aspect-ratio: 2000 / 291;
  color: transparent;
  background-image: url(../img/menu-1.png);
  background-size: 100%;
}
#float menu a:nth-of-type(2) {
  background-image: url(../img/menu-2.png);
}
#float menu a:nth-of-type(3) {
  background-image: url(../img/menu-3.png);
}
#float menu a:nth-of-type(4) {
  background-image: url(../img/menu-4.png);
}
#float menu a:nth-of-type(5) {
  background-image: url(../img/menu-5.png);
}
#float menu a:nth-of-type(6) {
  background-image: url(../img/menu-6.png);
}
#float menu a:nth-of-type(7) {
  background-image: url(../img/menu-7.png);
}
#float menu a:nth-of-type(8) {
  background-image: url(../img/menu-8.png);
}
#float menu a:nth-of-type(9) {
  background-image: url(../img/menu-13.png);
}
#float menu a:nth-of-type(10) {
  background-image: url(../img/menu-9.png);
}
#float menu a:nth-of-type(11) {
  background-image: url(../img/menu-10.png);
}
#float menu a:nth-of-type(12) {
  background-image: url(../img/menu-11.png);
}
#float menu a:nth-of-type(13) {
  background-image: url(../img/menu-12.png);
}
#float menu:after {
  content: " ";
  display: block;
  aspect-ratio: 2000 / 9;
  background-image: url(../img/menu-hr.png);
  background-size: 100%;
}

/* = header
--------------------------------------------------- */
header {
  position: fixed;
  z-index: 9;
  width: 100%;
  top: 0;
}
header h1 a span {
  color: transparent;
  position: absolute;
}
header #switch {
  background-image: url(../img/switch.png);
  display: block;
  position: absolute;
  background-repeat: no-repeat;
  background-size: 70% auto;
  background-position: center;
  width: 10vw;
  height: 10vw;
  position: absolute;
  right: 5vw;
  top: 2vw;
}

/* = footer
--------------------------------------------------- */
body {
  background-image: url(../img/footer.png);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% auto;
  padding-top: 14vw;
  padding-bottom: 60vw;
  position: relative;
}
footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  aspect-ratio: 2000 / 870;
  background-image: url(../img/footer-content.png);
  background-size: 100%;
  color: transparent;
}
footer h2 a {
  float: left;
  display: block;
  width: 100%;
  height: 10vw;
}
footer menu {
  overflow: hidden;
  width: 40%;
  margin: auto;
  aspect-ratio: 2 / 1;
  position: absolute;
  left: 0;
  right: 0;
  top: 11vw;
}
footer menu a {
  float: left;
  display: block;
  width: 50%;
  height: 100%;
}
footer #copy {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto 2vw;
  color: #DA5A7C;
  text-align: center;
  font-size: 3.6vw;
}
footer #copy a {
  text-decoration: underline;
}

/* = #breadcrumb
--------------------------------------------------- */
#breadcrumb {
  background: white;
  color: #DA5A7C;
  overflow-x: scroll;
  padding: 5px 15px
}
#breadcrumb ul {
  list-style: none;
  width: 150%;
}
#breadcrumb ul li {
  list-style: none;
  display: block;
  position: relative;
  line-height: 38px;
  padding-right: 20px;
  margin-right: 10px;
  float: left;
  white-space: nowrap;
  max-width: 300px;
}
#breadcrumb ul li:not(:last-child):before,
#breadcrumb ul li:not(:last-child):after{
  position: absolute;
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  content: " ";
}
#breadcrumb ul li:not(:last-child):before{
  top: -1px;
  right: 0;
  border-left: 10px solid #DA5A7C;
}
#breadcrumb ul li:not(:last-child):after{
  top: -1px;
  right: 1px;
  border-left: 10px solid white;
}
#breadcrumb ul li a {
  display: block;
  width: 100%;
  height: 100%;
}
#breadcrumb ul li h1 {
  display: inline;
}


/* = .subpage div
--------------------------------------------------- */
.subpage div {
  display: none;
}

/* = .subpage .list
--------------------------------------------------- */
.subpage .list {
  background: #EAEEFE;
  color: #7990FF;
  padding: 0 8%;
  margin-bottom: 23vw;
}
.subpage .list img {
  border-radius: 7vw;
}
.subpage .list h3 {
  color: white;
  background: #5FD2A2;
  line-height: 2;
  margin: 3vw 0 1.5vw;
  text-align: center;
  border-radius: 2vw;
}
.subpage .list p {
  line-height: 1.3;
  margin-bottom: 8vw;
}

/* = .subpage .faq
--------------------------------------------------- */
.subpage .faq {
  background: #FFF6FF;
  padding: 8vw 8vw 0;
  overflow: hidden;
}
.subpage .faq p {
  font-size: 3.8vw;
}
.subpage .faq p:nth-of-type(odd) {
  margin-bottom: 2vw;
  background: #FF9194;
  border-radius: 2vw;
  color: white;
  line-height: 2.5;
  padding-left: 3vw;
  padding-bottom: 1vw;
  letter-spacing: -0.5vw;
  position: relative;
}
.subpage .faq p:nth-of-type(odd):before {
  content: "Q.";
  margin-right: 1vw;
  display: inline-block;
  font-size: 130%;
}
.subpage .faq p:nth-of-type(odd):after {
  content: "＋";
  font-size: 6vw;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 6vw;
  height: 6vw;
  line-height: 5.4vw;
  margin: auto;
  text-align: center;
  letter-spacing: 0;
  border: 1px solid;
  right: 3vw;
  border-radius: 100%;
  background-color: #FF9193;
  transition: 0.5s all;
}
.subpage .faq p:nth-of-type(odd).on:after {
  transform: rotate(135deg);
}
.subpage .faq p:nth-of-type(even) {
  margin-bottom: 2vw;
  border-radius: 2vw;
  background: white;
  border: 0.5vw solid #FF9194;
  padding: 3.6vw 5vw 5vw;
  color: #FF9194;
  text-align: justify;
}
.subpage .faq p:nth-of-type(even):before {
  content: "A.";
  margin-right: 1vw;
  display: inline-block;
  font-size: 130%;
}

/* = .subpage .staff
--------------------------------------------------- */
.subpage .staff {
  background: #DBD6FF;
  padding: 8vw 8vw 6vw;
  overflow: hidden;
}
.subpage .staff p {
  font-size: 3.8vw;
}
.subpage .staff p:nth-of-type(odd) {
  margin-bottom: 2vw;
  background: #BD98FF;
  border-radius: 2vw;
  color: white;
  line-height: 2.5;
  padding-left: 3vw;
  padding-bottom: 1vw;
  letter-spacing: -0.5vw;
  position: relative;
}
.subpage .staff p:nth-of-type(odd):before {
  content: "Q.";
  margin-right: 1vw;
  display: inline-block;
  font-size: 130%;
}
.subpage .staff p:nth-of-type(odd):after {
  content: "＋";
  font-size: 6vw;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 6vw;
  height: 6vw;
  line-height: 5.4vw;
  margin: auto;
  text-align: center;
  letter-spacing: 0;
  border: 1px solid;
  right: 3vw;
  border-radius: 100%;
  background-color: #BD98FF;
  transition: 0.5s all;
}
.subpage .staff p:nth-of-type(odd).on:after {
  transform: rotate(135deg);
}
.subpage .staff p:nth-of-type(odd) span {
  display: none;
  line-height: 1.6;
  padding: 2vw 0;
  border-top: 1px solid;
  margin: 1vw 12vw 0 0;
  text-align: justify;
  width: calc(100% - 12vw););)
  _;
}
.subpage .staff p:nth-of-type(even) {
  margin-bottom: 2vw;
  border-radius: 2vw;
  background: white;
  border: 0.5vw solid #BD98FF;
  padding: 3.6vw 5vw 5vw;
  color: #BD98FF;
  text-align: justify;
}
.subpage .staff p:nth-of-type(even):before {
  content: "A.";
  margin-right: 1vw;
  display: inline-block;
  font-size: 130%;
}

/* = #entrance
--------------------------------------------------- */
#entrance {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0.95);
  z-index: 999;
}
#entrance div {
  background-image: url(../img/entrance.svg);
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  aspect-ratio: 450 / 586;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
#entrance div .go {
  display: block;
  width: 30%;
  height: 11%;
  position: absolute;
  left: 20%;
  top: 37.5%;
}
#entrance div .back {
  display: block;
  width: 30%;
  height: 11%;
  position: absolute;
  right: 20%;
  top: 37.5%;
}

/* = #interview-detail
--------------------------------------------------- */
#interview-detail {
  background: #FFFCEB;
  padding: 5vw;
}
#interview-detail li {
  position: relative;
  list-style: none;
  background: #FFFDDE;
  padding: 5vw;
  margin-bottom: 5vw;
}
#interview-detail li:before {
  content: " ";
  display: block;
  aspect-ratio: 2000 / 1298;
  background-image: url(../img/interview-detail-header.png);
  background-size: 100%;
}
#interview-detail li img {
  position: absolute;
  left: 5vw;
  top: 18vw;
  width: 32vw;
  border-right: 1px solid #7057D5;
  border-bottom: 1px solid #7057D5;
  aspect-ratio: 850 / 1030;
  object-fit: cover;
}
#interview-detail li .name {
  position: absolute;
  left: 39vw;
  top: 18vw;
  font-size: 5vw;
  color: #7158D8;
}
#interview-detail li .name b {
  font-size: 6vw;
}
#interview-detail li .shop {
  position: absolute;
  left: 50vw;
  top: 27.7vw;
  font-size: 3.5vw;
}
#interview-detail li .old {
  position: absolute;
  left: 50vw;
  top: 35.8vw;
  font-size: 3.5vw;
}
#interview-detail li .calendar {
  position: absolute;
  left: 50vw;
  top: 44vw;
  font-size: 3.5vw;
}
#interview-detail li .income {
  position: absolute;
  left: 50vw;
  top: 52vw;
  font-size: 3.5vw;
}
#interview-detail p {
  font-size: 3.8vw;
  line-height: 1.4;
}
#interview-detail p:nth-of-type(1):before {
  content: " ";
  display: block;
  aspect-ratio: 2000 / 145;
  background-image: url(../img/interview-detail-text-1.png);
  background-size: 100%;
  margin: 5vw 0 2vw;
}
#interview-detail p:nth-of-type(2):before {
  content: " ";
  display: block;
  aspect-ratio: 2000 / 145;
  background-image: url(../img/interview-detail-text-2.png);
  background-size: 100%;
  margin: 5vw 0 2vw;
}
#interview-detail p:nth-of-type(3):before {
  content: " ";
  display: block;
  aspect-ratio: 2000 / 145;
  background-image: url(../img/interview-detail-text-3.png);
  background-size: 100%;
  margin: 5vw 0 2vw;
}
#interview-detail p:nth-of-type(4):before {
  content: " ";
  display: block;
  aspect-ratio: 2000 / 145;
  background-image: url(../img/interview-detail-text-4.png);
  background-size: 100%;
  margin: 5vw 0 2vw;
}

/* = #blog-index
--------------------------------------------------- */
#blog-index {
  padding: 0 8vw;
}
#blog-index li {
  list-style: none;
  padding: 0 0 5vw;
  margin-bottom: 5vw;
  border-bottom: 1px solid #ddd;
  overflow: hidden;
}
#blog-index li img {
  width: 40vw;
  float: left;
  margin-right: 4vw;
}
#blog-index li .date {
  font-size: 3.5vw;
  color: #FF8B9D;
}
#blog-index p {
  font-size: 3.5vw;
  margin: 2vw 0 0;
  line-height: 1.4;
  text-align: justify;
  text-align-last: left;
}

/* = #blog-index + .pagination
--------------------------------------------------- */
.pagination {
  text-align: center;
  margin-bottom: 10vw;
  color: #AAA;
}
.pagination .pages {
  margin-top: 6px;
}
.pagination .pages a,
.pagination .pages span {
  margin: 0 5px;
  display: inline-block;
  line-height: 33px;
  width: 36px;
  padding-bottom: 3px;
  text-align: center;
  background-color: #AAA;
  color: white;
  border-radius: 22px;
  border: 2px solid #AAA;
}
.pagination .pages span {
  background: white;
  color: inherit;
}

/* = #blog-detail
--------------------------------------------------- */
#blog-detail {
  padding: 6vw 8vw;
}
#blog-detail .date {
  font-size: 3.5vw;
  color: #FF8B9D;
  margin: 5vw 0 2vw;
  display: block;
}
#blog-detail p,
#blog-detail div,
#blog-detail div * {
  font-size: 4.2vw;
  margin: 0;
  line-height: 1.8;
}
#blog-detail p a {
  display: inline-block;
  color: #FF8B9D;
  border: 1px solid;
  border-radius: 2.5vw;
  padding: 0 4vw;
  font-size: 4.2vw;
  margin: 5vw 0
}

/* = #contact-infomations
--------------------------------------------------- */
#contact-infomations {
  padding: 0 5vw;
}
#contact-infomations h2 {
  text-align: center;
  color: #888;
  font-size: 5vw;
  margin: 10vw 0 3vw;
}
#contact-infomations h2:before,
#contact-infomations h2:after {
  content: " ー ";
}
#contact-infomations .shop-name {
  background: #FF769F;
  color: white;
  text-align: center;
  font-size: 4.5vw;
  line-height: 2.3;
  border-radius: 10px;
  border: 1px solid #FF769F;
}
#contact-infomations .contact {
  overflow: hidden;
  padding-top: 1vw;
  margin-bottom: 5vw;
}
#contact-infomations .contact i {
  margin-right: 0.3em;
}
#contact-infomations .contact .phone,
#contact-infomations .contact .form {
  border: 1px solid #FF769F;
  color: #FF769F;
  text-align: center;
  font-size: 4vw;
  line-height: 2.3;
  border-radius: 10px;
  float: left;
  width: 49%;
}
#contact-infomations .contact .form {
  float: right;
  letter-spacing: -0.4vw;
}

/* = #contact
--------------------------------------------------- */
#contact {
  color: #888;
  font-size: 3.5vw;
  padding: 0 7.7vw 5vw;
}
#contact p {
  line-height: 2;
}
#contact p u {
  background: #FFA8BD;
  color: white;
  font-size: 80%;
  text-decoration: none;
  margin-left: 0.3em;
  padding: 0 0.5vw;
}
#contact input[type="text"],
#contact input[type="email"],
#contact textarea,
#contact select {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #888;
  background: none;
  font-size: 4vw;
  line-height: 8vw;
  height: 8vw;
  margin-bottom: 3vw;
  border-radius: 2vw;
  padding: 0 2vw;
}
#contact textarea {
  height: 35vw;
}
#contact [disabled] {
  background: #EEE !important;
}
#contact p a {
  display: inline-block;
  border: 1px solid;
  border-radius: 2.5vw;
  padding: 0 4vw;
  font-size: 4.2vw;
  margin: 5vw 0 2vw;
  background: #fff;
  color: #FF8B9D;
  line-height: 2;
  width: 40vw;
  box-sizing: border-box;
}
#contact input[type="submit"] {
  display: inline-block;
  border: 1px solid;
  border-radius: 2.5vw;
  padding: 0 4vw;
  font-size: 4.2vw;
  margin: 0 0 5vw;
  background: #FF8B9D;
  color: #fff;
  line-height: 2;
  width: 40vw;
  box-sizing: border-box;
}
#contact .half {
  overflow: hidden;
}
#contact .half > * {
  float: left;
  width: 47%;
  line-height: 8vw;
}
#contact .half > *:last-child {
  float: right;
}
#contact label {
  font-size: 5vw;
}