@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&family=Outfit:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap');
html {
 font-size: 62.5%;
}
body {
 font-family: YakuHanJP_Narrow, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", sans-serif;
 letter-spacing: 0.075em;
 font-weight: 600;
 color: #181818;
 font-size: 1.6rem;
 line-height: 1.7;
 overflow-x: clip;
}
a {
 display: block;
 transition: .2s;
 text-decoration: none;
 color: #484848;
}
img {
 display: block;
 width: 100%;
 height: auto;
 /*pointer-events: none;*/
 -webkit-touch-callout: none;
 -webkit-user-select: none;
 -moz-touch-callout: none;
 -moz-user-select: none;
 user-select: none;
 /*image-rendering: -webkit-optimize-contrast;*/
}
em {
 display: inline-block;
 font-size: 80%;
 font-weight: inherit;
}
span {
 font-weight: inherit;
}
.caution {
 padding-top: 1em;
 font-size: 1.3rem;
 line-height: 1.5;
}
ul.caution li {
 text-indent: -1em;
 padding-left: 1em;
}
.sp {
 display: none !important;
}
.pc {
 display: block;
}
.bgVideo {
 position: absolute;
 top: 0;
 left: 0;
 width: 100vw;
 height: 100vh;
 overflow: hidden;
 pointer-events: none;
}
.bgVideo video {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translateX(-50%) translateY(-50%);
 min-width: 100%;
 min-height: 100%;
}
#wrapper {
 position: relative;
 font-size: 1.6rem;
}
section {
 position: relative;
 z-index: 5;
 height: 100vh;
}
.inner {
 position: relative;
 z-index: 5;
}
.pageHeader {
 position: relative;
 z-index: 5;
 padding: calc(5vw + 6rem) 5vw 5vw;
 text-align: center;
 background: #131313;
 color: #a8a8a8;
 overflow: hidden;
}
.pageHeader:before {
 content: "";
 display: block;
 background: url("../images/ami_w.svg") repeat;
 background-size: 45px auto;
 width: 100%;
 height: 100%;
 position: absolute;
 top: 0;
 left: 0;
 opacity: 0.02;
}
.pageHeader:after {
 content: "";
 display: block;
 width: 60%;
 padding-top: 60%;
 background-color: rgba(27, 37, 43, 0.44);
 position: absolute;
 top: -100%;
 left: 0;
 right: 0;
 margin: 0 auto;
 -ms-filter: blur(130px);
 filter: blur(130px);
 z-index: 2;
 border-radius: 50%;
 mix-blend-mode: screen;
}
.pageHeader p {
 margin-top: 2.75em;
}
.pageTtl {
 font-size: 6rem;
 line-height: 1;
 position: relative;
 z-index: 5;
 color: #efefef;
}
.pageTtl span {
 font-family: "Outfit", serif;
 font-weight: 600;
 color: #F67F17;
}
.pageTtl em {
 display: block;
 font-weight: 400;
 font-size: 32%;
 padding-top: 0.75em;
 position: relative;
 letter-spacing: 0.1em;
}
.secTtl {
 font-size: 3.6vw;
 margin-bottom: 1em;
 line-height: 1;
 position: relative;
 z-index: 5;
}
.secTtl span {
 font-family: "Outfit", serif;
 font-weight: 600;
 color: #F67E17;
}
.secTtl em {
 display: inline-block;
 font-weight: 400;
 font-size: 42%;
 padding-top: 0.75em;
 position: relative;
 letter-spacing: 0.1em;
}
.secTtl em:before {
 content: "/";
 display: inline-block;
 margin: 0 0.75em 0 1em;
 position: relative;
 transform: translateY(-0.05em);
}
.quotation {
 display: inline-block;
 padding: 0 0.5em 0 0.75em;
 position: relative;
}
.quotation:before {
 content: "”";
 position: absolute;
 color: inherit;
 top: 0;
 left: 0;
 font-size: 140%;
 line-height: 1;
 font-family: "Outfit", serif;
 opacity: 0.55;
 font-weight: 300;
}
.quotation:after {
 content: "”";
 position: absolute;
 color: inherit;
 top: 0.7em;
 right: 0;
 font-size: 140%;
 line-height: 1;
 font-family: "Outfit", serif;
 opacity: 0.55;
 font-weight: 300;
}
header {
 position: fixed;
 z-index: 6;
 width: 100%;
 top: 0;
 left: 0;
 height: 6rem;
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 0 5vw;
}
header:after {
 content: "";
 display: block;
 width: 100%;
 height: 100%;
 position: absolute;
 top: 0;
 left: 0;
 background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6));
}
header h1 {
 position: relative;
 height: 3.5rem;
 z-index: 5;
}
header h1 a {
 position: relative;
 height: 100%;
 width: auto;
}
header h1 a:hover {
 opacity: 0.9;
}
header h1 img {
 height: 100%;
 width: auto;
}
header nav {
 position: relative;
 z-index: 5;
 height: 100%;
}
header nav > ul {
 display: flex;
 align-items: center;
 justify-content: flex-end;
 height: 100%;
}
header nav > ul li {
 height: 100%;
}
header nav > ul li a {
 font-family: "Outfit", serif;
 font-weight: 500;
 font-size: 1.5rem;
 color: #8c8c8e;
 position: relative;
 height: calc(100% - 1.1em);
 display: block;
 padding: 1.1em 1em 0;
}
header nav > ul li a:hover {
 color: #F5CB00;
}
header nav > ul li a:after {
 content: "";
 display: block;
 height: 3px;
 width: 0;
 background: #F5CB00;
 position: absolute;
 bottom: 0;
 left: 0;
 transition: .2s;
}
header nav > ul li a:hover:after {
 width: 100%;
}
header nav > ul li #subNav {
 display: none;
 background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.8));
 height: auto;
 position: absolute;
 top: 100%;
 z-index: 1000;
 padding: 0 1em 1em;
 box-sizing: border-box;
 white-space: nowrap;
 right: 0;
}
header nav > ul li.insta a:before {
 content: "";
 display: block;
 background: url("../images/sns/icon_istg_gray.svg") no-repeat;
 background-size: cover;
 width: 1.6em;
 height: 1.6em;
 transition: .2s;
}
header nav > ul li.insta a:hover:before {
 background: url("../images/sns/icon_istg_yellow.svg") no-repeat;
 background-size: cover;
}
header nav > ul li.insta a:hover:after {
 width: 0;
}
#topics {
 background: #ececec;
 padding: 7.5vw 5vw;
 color: #23232f;
 overflow: hidden;
 height: auto;
 text-align: center;
 display: flex;
}
#topics .secTtl {
 flex: 1 0 20rem;
 max-width: 20rem;
 color: #23232f;
 text-align: left;
}
#topics .secTtl span {
 font-size: 4rem;
 color: #1c1c1c;
}
#topics > ul {
 flex: 1 0 calc(100% - 20rem);
 max-width: calc(100% - 20rem);
 text-align: left;
 margin-top: -1.25em;
}
#topics > ul > li {
 position: relative;
 padding: 1.5em 1.5em 1.5em 0;
 border-bottom: solid 1px #ccc;
 display: flex;
 align-items: center;
}
#topics > ul > li a {
 display: flex;
 align-items: center;
 padding: 0;
}
#topics > ul > li:last-child {
 margin-bottom: 0;
 padding-bottom: 0;
 border-bottom: none;
}
#topics > ul > li .thumb {
 flex: 1 0 18rem;
 max-width: 18rem;
}
#topics > ul > li .text {
 flex: 1 0 calc(100% - 18rem);
 padding-left: 1.75em;
}
#topics > ul > li .postData {
 display: flex;
 align-items: center;
}
#topics > ul > li .date {
 font-weight: 700;
 position: relative;
 white-space: nowrap;
 padding: 0.35em 0 0;
 letter-spacing: 0.025em;
}
#topics > ul > li .cate {
 padding: 0 0 0 1.25em;
 flex: 1 0 8em;
 max-width: 8em;
}
#topics > ul > li .cate span {
 display: inline-block;
 white-space: nowrap;
 color: #fff;
 background: #F67E17;
 font-weight: 500;
 font-size: 1.3rem;
 padding: 0.35em 0.7em;
 line-height: 1.2;
 border-radius: 2px;
}
#topics > ul > li .cate.recruit span {
 background: #1376D7;
}
#topics > ul > li .postTtl {
 font-size: 1.5rem;
 font-weight: bold;
 line-height: 1.5;
 padding: 1em 0 0;
 transition: .2s;
}
#topics > ul > li a[target="_blank"] .postTtl:after {
 content: "";
 background: url("../images/icon_link.svg") center bottom no-repeat;
 background-size: 100% auto;
 display: inline-block;
 width: 0.9em;
 height: 0.9em;
 margin-left: 0.5em;
 line-height: 1;
 opacity: 0.7;
 transform: translateY(0.1em);
 transition: .2s;
}
#topics > ul > li a[target="_blank"]:hover .postTtl:after {
 background: url("../images/icon_link_hover.svg") center bottom no-repeat;
 background-size: 100% auto;
 opacity: 1;
}
#topics > ul > li a:hover .postTtl {
 color: #F67E17;
}
.pagination {
 margin: 3rem 0 0 auto;
}
.pagination ul {
 display: flex;
 justify-content: flex-end;
}
.pagination ul li {
 margin: 0 0 0 5px;
}
.pagination ul li a {
 font-family: "Outfit", serif;
 font-size: 1.5rem;
 height: 1.7em;
 min-width: 1.7em;
 line-height: 1.7em;
 border: solid 1px #ccc;
 text-align: center;
}
.pagination ul li.active a, .pagination ul li a:hover {
 background: #24262B;
 color: #fff;
}
.pagination ul li.disabled a {
 opacity: 0.4;
 pointer-events: none;
}
.contNav {
 position: relative;
 z-index: 5;
 background-color: #131313;
 padding: 5vw;
 color: #23232f;
 overflow: hidden;
 height: auto;
 text-align: center;
}
.contNav ul {
 display: flex;
 justify-content: space-between;
 align-items: center;
 position: relative;
 z-index: 5;
}
.contNav ul li {
 flex: 1 0 calc(50% - 2.5vw);
 max-width: calc(50% - 2.5vw);
}
.contNav ul li a {
 background: #249543;
 color: #fff;
 line-height: 1;
 padding: 2.5em 2em;
 text-align: center;
 font-size: 2rem;
 position: relative;
 border-top: solid 1px rgba(255, 255, 255, 0.12);
 border-left: solid 1px rgba(255, 255, 255, 0.12);
 border-radius: 0.3rem;
 opacity: 0.84;
 box-shadow: 16px 16px 0 rgba(85, 85, 85, 0.3);
}
.contNav ul li a:hover {
 opacity: 1;
}
.contNav ul li a:after {
 content: "";
 display: block;
 background: url("../images/dotted_bk.svg") repeat rgba(0, 0, 0, 0.45);
 background-size: 3px auto;
 width: 100%;
 height: 100%;
 position: absolute;
 top: 0;
 left: 0;
 opacity: 0.5;
}
.contNav ul li.recruit a {
 background: url("../images/bg_recruit.jpg") no-repeat center center;
 background-size: cover;
}
.contNav ul li.contact a {
 background: url("../images/bg_contact.jpg") no-repeat center center;
 background-size: cover;
}
.contNav ul li a span {
 display: block;
 font-family: "Outfit", serif;
 font-weight: 600;
 font-size: 240%;
 position: relative;
 z-index: 5;
}
.contNav ul li a em {
 font-size: 80%;
 padding-top: 1em;
 display: block;
 position: relative;
 z-index: 5;
 font-weight: bold;
}
.toYBE {
 position: relative;
 z-index: 5;
 overflow: hidden;
}
.toYBE a {
 background: #f6f6f6;
 padding: 2.5vw 0 2.5vw 5vw;
 color: #23232f;
 text-align: left;
 position: relative;
 display: flex;
 align-items: center;
 overflow: visible;
}
.toYBE a:hover {
 background: #e3e3e3;
}
.toYBE a:before {
 content: "";
 display: block;
 height: 100%;
 width: 11vw;
 position: absolute;
 right: 0;
 top: 0;
 background: #1e1e1e;
}
.toYBE a:after {
 content: "";
 display: block;
 background: url("../images/dotted_bk.svg") repeat;
 background-size: 2px auto;
 width: 100%;
 height: 100%;
 position: absolute;
 top: 0;
 left: 0;
 opacity: 0.05;
}
.toYBE a p {
 font-size: 1.4rem;
 text-align: left;
 padding-right: 3em;
}
.toYBE a strong {
 width: 34rem;
 display: block;
 text-align: center;
}
.toYBE a span {
 position: relative;
 color: #fff;
 background: #F67E17;
 font-weight: 500;
 font-size: 1.3rem;
 text-align: center;
 display: inline-block;
 margin: 0.75em auto 0;
 border-radius: 20rem;
 padding: 0.35em 1.2em;
 line-height: 1.2;
}
.toYBE:after {
 content: "";
 display: block;
 width: 4vw;
 height: 4vw;
 border-top: 2px solid #fcfcfc;
 border-right: 2px solid #fcfcfc;
 position: absolute;
 top: 50%;
 transform: translateY(-50%)rotate(45deg);
 right: 4.5vw;
 z-index: 2;
 transition: .2s;
}
.toYBE:hover:after {
 right: 3.5vw;
}
.slider .slick-slide {
 margin: 0 10px;
}
.slider .slick-slide.vertical, .slider .slick-slide.horizontal {
 position: relative;
 width: 100%;
}
.slider .slick-slide.vertical:after {
 content: "";
 display: block;
 padding-top: 141.25%;
}
.slider .slick-slide.horizontal:after {
 content: "";
 display: block;
 padding-top: 56.25%;
}
.slider .slick-slide img {
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 left: -50%;
 right: -50%;
 margin: 0 auto;
}
footer {
 background: #181818;
 color: #fcfcfc;
 text-align: center;
 position: relative;
 z-index: 10;
 padding: 2.5vw 5vw 2.5vw;
}
footer .fNav {
 display: flex;
 align-items: center;
 justify-content: center;
}
footer .fNav li {
 font-size: 1.2rem;
 margin: 0 1.5em;
}
footer .fNav li:last-child {
 display: none;
}
footer .fNav li a {
 color: #acacac;
}
footer .sns ul {
 display: flex;
 align-items: center;
 justify-content: center;
 margin-top: 4.5rem;
}
footer .sns ul li {
 flex: 1 0 2.4rem;
 max-width: 2.4rem;
 margin: 0 0.75em;
}
footer .cr {
 margin-top: 1em;
 font-family: "Outfit", serif;
 font-weight: 600;
 font-size: 1.5rem;
 opacity: 0.7;
}
.delayBox {
 opacity: 0;
}
.delay01.displayed {
 animation-delay: 0.1s;
}
.delay02.displayed {
 animation-delay: 0.3s;
}
.delay03.displayed {
 animation-delay: 0.5s;
}
.delay04.displayed {
 animation-delay: 0.7s;
}
.delay05.displayed {
 animation-delay: 0.9s;
}
.delay06.displayed {
 animation-delay: 1.1s;
}
.delay07.displayed {
 animation-delay: 1.3s;
}
.delay08.displayed {
 animation-delay: 1.5s;
}
.delay09.displayed {
 animation-delay: 1.7s;
}
.delay10.displayed {
 animation-delay: 0.5s;
}
.displayed {
 animation: fadeUp 1s forwards;
}
@keyframes fadeUp {
 0% {
  opacity: 0;
  transform: translateY(50px);
 }
 100% {
  opacity: 1;
  transform: translateY(0);
 }
}
@-webkit-keyframes passing-bar {
 0% {
  left: 0;
  right: auto;
  width: 0;
 }
 50% {
  left: 0;
  right: auto;
  width: 100%;
 }
 51% {
  left: auto;
  right: 0;
  width: 100%;
 }
 100% {
  left: auto;
  right: 0;
  width: 0;
 }
}
@keyframes passing-bar {
 0% {
  left: 0;
  width: 0;
 }
 50% {
  left: 0;
  width: 100%;
 }
 51% {
  left: 0;
  width: 100%;
 }
 100% {
  left: 100%;
  width: 0;
 }
}
@-webkit-keyframes passing-txt {
 0% {
  opacity: 0;
 }
 50% {
  opacity: 0;
 }
 100% {
  opacity: 1;
 }
}
@keyframes passing-txt {
 0% {
  opacity: 0;
 }
 50% {
  opacity: 0;
 }
 100% {
  opacity: 1;
 }
}
.passing .passing-bar {
 position: relative;
 display: inline-block;
 -webkit-transform: translate3d(0, 0, 0);
 -ms-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
}
.passing .passing-bar:before {
 content: '';
 display: inline-block;
 width: 0;
 height: 100%;
 position: absolute;
 left: 0;
 top: 0;
 z-index: 1;
 background: #F5CB00;
}
.passing .passing-txt {
 opacity: 0;
 -webkit-transform: translate3d(0, 0, 0);
 -ms-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
}
.passing.move .passing-bar:before {
 -webkit-animation: passing-bar 1s ease 0s 1 normal forwards;
 animation: passing-bar 1s ease 0s 1 normal forwards;
}
.passing.move .passing-txt {
 -webkit-animation: passing-txt 0s ease .5s 1 normal forwards;
 animation: passing-txt 0s ease .5s 1 normal forwards;
}
@keyframes showTextFromBottom {
 0% {
  transform: translateY(100%);
  opacity: 0;
 }
 100% {
  transform: translateY(0px);
  opacity: 1;
 }
}
.anime-up.displayed span {
 animation: showText 0.8s backwards;
 display: inline-block;
}
.anime-up.displayed > span {
 overflow: hidden;
}
.anime-up.displayed > span > span {
 animation: showTextFromBottom 0.3s backwards;
}
@media screen and (max-width: 999px) {
 body {
  font-size: 1.4rem;
 }
 .caution {
  font-size: 1.1rem;
 }
 .sp {
  display: block !important;
 }
 .pc {
  display: none !important;
 }
 .bgVideo {
  position: relative;
  height: auto;
 }
 .bgVideo video {
  position: relative;
  top: 0;
  left: 0;
  transform: translateX(0) translateY(0);
  width: 100%;
  height: auto;
 }
 #wrapper {
  font-size: 1.4rem;
 }
 section {
  height: auto;
 }
 .pageHeader {
  padding: 4rem 2rem;
 }
 .pageHeader p {
  font-size: 1.2rem;
  margin-top: 1.75em;
 }
 .pageTtl {
  font-size: 3.9rem;
 }
 .secTtl {
  font-size: 3.6rem;
 }
 header {
  height: 6rem;
  padding: 0 2rem;
  position: relative;
  background: #181818;
 }
 header h1 {
  height: 3.5rem;
 }
 header h1 img {
  height: 100%;
  width: auto;
 }
 header nav {
  display: none;
 }
 #topics {
  padding: 4rem 2rem;
  display: block;
 }
 #topics .secTtl {
  flex: none;
  max-width: 100%;
 }
 #topics .secTtl span {
  font-size: 3rem;
 }
 #topics > ul {
  flex: none;
  max-width: 100%;
 }
 #topics > ul > li {
  padding: 1.5em 0;
 }
 #topics > ul > li .thumb {
  flex: 1 0 12rem;
  max-width: 12rem;
 }
 #topics > ul > li .text {
  flex: 1 0 calc(100% - 12rem);
  padding-left: 1.25em;
 }
 #topics > ul > li .date {
  font-size: 1.3rem;
 }
 #topics > ul > li .cate {
  padding: 0 0 0 1em;
  flex: 1 0 8em;
  max-width: 8em;
 }
 #topics > ul > li .cate span {
  font-size: 1.2rem;
 }
 #topics > ul > li .postTtl {
  font-size: 1.3rem;
  padding: 0.5em 0 0;
 }
 .contNav {
  padding: 2rem;
 }
 .contNav ul {
  display: block;
 }
 .contNav ul li {
  flex: none;
  max-width: 100%;
  margin-bottom: 1.5rem;
 }
 .contNav ul li:last-child {
  margin-bottom: 0;
 }
 .contNav ul li a {
  padding: 2.0em 2em;
  font-size: 1.8rem;
  box-shadow: 6px 6px 0 rgba(85, 85, 85, 0.3);
  opacity: 1;
 }
 .toYBE a {
  padding: 2.5rem 1rem;
  display: block;
  text-align: center;
 }
 .toYBE a:before, .toYBE a:after {
  display: none;
 }
 .toYBE a p {
  font-size: 1.2rem;
  text-align: center;
  padding: 0 0 1.25em;
 }
 .toYBE a strong {
  width: 88%;
  margin: 0 auto;
 }
 .slider .slick-slide {
  margin: 0 6px;
 }
 footer {
  padding: 2.5rem 2rem;
 }
 footer .fNav {
  display: block;
 }
 footer .fNav li {
  font-size: 1.2rem;
  margin: 0 0 1em;
 }
 footer .sns ul {
  margin-top: 2.5rem;
 }
 footer .cr {
  margin-top: 1.2em;
  font-size: 1.2rem;
 }
}