/* A Modern CSS Reset */
*,*::before,*::after{box-sizing:border-box}ul[class],ol[class]{padding:0}body,h1,h2,h3,h4,h5,h6,tr,th,td,p,ul[class],ol[class],figure,blockquote,dl,dd{margin:0;font-weight:normal;}html{scroll-behavior:smooth}body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5}ul[class],ol[class]{list-style:none}a:not([class]){text-decoration-skip-ink:auto}img,picture{max-width:100%;display:block}article>*+*{margin-top:1em}input,button,textarea,select{font:inherit}img:not([alt]){filter:blur(10px)}@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}
/* A Modern CSS Reset */
body {
  background: #e7eaed;
  color: #000;
  font-family: "ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

img {
  -webkit-backface-visibility: hidden;
}

a {
  text-decoration: none;
}

#wrapper {
  overflow: hidden;
  padding-left: 100px;
}

@media(min-width: 768px){
  a[href^="tel:"]{
    pointer-events: none;
  }
}

body {
  animation: fadeIn 0.7s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
 
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/*============
LOADING
=============*/
#loadingLogo {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0px;
  left: 0px;
  background: rgb(35,24,21);
  background: linear-gradient(90deg, rgba(35,24,21,1) 0%, rgba(35,24,21,1) 100%);
  z-index: 10000;
  display: none;
}
#loadingLogo.show {
  display: block;
  animation: fadein-keyframes 1s ease 2.5s 1 forwards;
}
#loadingLogo .loading-anime-img {
  opacity: 0;
}
#loadingLogo .loading-anime-img {
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30%;
  max-width: 180px;
  animation: logo-fadein 2.5s ease 0.3s 1 forwards;
}
@keyframes fadein-keyframes {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}
@keyframes logo-fadein {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/*============
HEADER
=============*/
/*============
nav
=============*/
#navArea {
  width: 100px;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1;
  background-color: #e7eaed;
}
nav {
  display: block;
  position: fixed;
  top: 0;
  left: -300px;
  bottom: 0;
  width: 300px;
  background: #e7eaed;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transition: left .4s, opacity .4s;
  z-index: 3;
  opacity: 0;
}
.open nav {
  left: 0;
  opacity: 1;
  transition: left .4s, opacity .4s;
}
nav .inner {
  padding: 0;
}
nav .inner ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
nav .inner ul li {
  font-family: 'Didot';
  font-weight: bold;
  position: relative;
  margin: 0;
  border-bottom: 1px solid #333;
}
nav .inner ul li a {
  display: block;
  color: #333;
  font-size: 54px;
  padding: 0 10px;
  text-decoration: none;
  transition-duration: 0.5s;
}
nav .inner ul li a:hover {
  background: #333;
  color: #fff;
  transition: all .5s;
}

/*============
.toggle_btn
=============*/
.toggle_btn {
  display: block;
  position: fixed;
  top: 30px;
  left: 32.5px;
  width: 35px;
  height: 31px;
  transition: all .5s;
  cursor: pointer;
  z-index: 3;
}
.open .toggle_btn {
  left: 330px;
}
.toggle_btn span {
  display: block;
  position: absolute;
  left: 0;
  width: 35px;
  height: 4px;
  background-color: #000;
  transition: all .5s;
}
.toggle_btn span:nth-child(1) {
  top: 5px;
}
.toggle_btn span:nth-child(2) {
  top: 14px;
}
.open .toggle_btn span:nth-child(2) {
  left: 3px;
}
.toggle_btn span:nth-child(3) {
  bottom: 4px;
}
.open .toggle_btn span {
  background-color: #fff;
}
.open .toggle_btn {
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
}
.open .toggle_btn span:nth-child(1), .open .toggle_btn span:nth-child(3) {
  width: 16px;
}
.open .toggle_btn span:nth-child(1) {
  -webkit-transform: translate(-1px,4px) rotate(-45deg);
  transform: translate(-1px,4px) rotate(-45deg);
}
.open .toggle_btn span:nth-child(3) {
  -webkit-transform: translate(-1px,-4px) rotate(45deg);
  transform: translate(-1px,-4px) rotate(45deg);
}

/*============
SNS
=============*/
.nav-sns {
  margin-top: 80px;
  display: flex;
  flex-direction: column;
}
.nav-sns img {
  width: 40%;
  margin: 0 auto 20px;
  opacity: 1;
  transition: all .5s;
}
.open .nav-sns img {
  opacity: 0;
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
  transition: all .5s;
}
.nav-sns-inner {
  margin: 30px 0 30px 10px;
  display: flex;
  flex-direction: row;
  width: 180px;
  justify-content: space-between;
}
.nav-sns-inner img {
  width: 50px;
  opacity: 0;
  transition: all .5s;
}
.open .nav-sns-inner img {
  opacity: 1;
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
  transition: all .5s;
}

/*============
#mask
=============*/
#mask {
  transition: all .5s;
  background: rgba(0, 0, 0, 0%);
}
.open #mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 100%);
  opacity: .8;
  z-index: 2;
  cursor: pointer;
  transition: all .5s;
}

/*============
main
=============*/
main {
  width: 100%;
  transition: all .5s;
  border-left: 1px solid #000;
  background: #fff;
}
.open main {
  margin-left: 200px;
}

/*============
HEADER
=============*/
.header {
  position: absolute;
  z-index: 1;
  margin-top: 37px;
  margin-left: 90px;
  width: 200px;
}

/*============
HERO
=============*/
#hero {
}
.slick-slider {
  margin: 0 auto;
}
.slider img{
  height: auto;
  width: 100%;
  margin: 0 auto;
}
.slick-prev:before, .slick-next:before {
  color: #000;
}

/*============
Section Title
=============*/
#section-title {
  background-color: #231815;
  text-align: center;
  padding: 60px 0;
}

#section-title img {
  margin: 0 auto 50px;
  width: 150px;
}

#section-title h1 {
  font-size: 17px;
  color: #fff;
  letter-spacing: 3px;
  margin-right: -3px;
  line-height: 1.8em;
}

/*============
HEADLINE
=============*/
#headline {
  color: #000;
  font-family: 'Didot';
  font-weight: bold;
  font-size: 50px;
  text-align: left;
  letter-spacing: 5px;
  padding: 30px 0 30px 20px;
}

#headline-wh {
  color: #fff;
  font-family: 'Didot';
  font-weight: bold;
  font-size: 50px;
  text-align: left;
  letter-spacing: 5px;
  padding: 30px 0 30px 20px;
}

#headline-lg {
  color: #000;
  font-family: 'Didot';
  font-weight: bold;
  font-size: 80px;
  text-align: left;
  letter-spacing: 5px;
  padding: 30px 0;
}

/*============
Section NEWS
=============*/
#section-news {
  width: 100%;
  background: #fff;
}

.news-container {
  max-width: 750px;
  margin: 0 auto;
}

.news-container a {
  color: #000;
  font-size: 9px;
}

.news-content {
  width: 500px;
  margin: 0 auto;
}

/*============
Section ACTION
=============*/
#section-action {
  width: 100%;
  background: #231815;
  margin-top: 50px;
}

.action-container {
  max-width: 750px;
  margin: 0 auto;
}

.action-content {
  margin: 0 auto;
  padding-bottom: 100px;
  max-width: 750px;
}

.action-content iframe {
  width: 100%;
  height: 500px;
}

/*============
Section CREATOR
=============*/
#section-creator {
  width: 100%;
  background: #e7eaed;
}

.creator-content {
  display: flex;
  max-width: 750px;
  margin: 0 auto;
  align-items: center;
  justify-content: space-between;
}

.creator-content h1 {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
}

.creator-content .btn_box {
  margin: 0;
}

.creator-content .btn {
  color: #000;
  font-size: 16px;
  font-weight: 100;
  letter-spacing: 4px;
  text-align: center;
  line-height: 50px;
  width: 220px;
  height: 50px;
  position: relative;
  display: block;
  overflow: hidden;
  transition: 0.5s;
  border-radius: 100px;
  text-decoration: none;
  transform: scaleY(1.2);
  margin-right: -35px;
}

.creator-content .btn .icon {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  background: #000;
}

.creator-content .btn .icon.arrow {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  left: 0.625rem;
  background: none;
}

.creator-content .btn .icon.arrow::before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 1px;
  height: 25px;
  background-color: #000;
  transition: all .3s;
}

.creator-content .btn .icon.arrow::after {
  content: "";
  position: absolute;
  display: block;
  bottom: 0;
  left: 0;
  width: 1px;
  height: 25px;
  background-color: #000;
  transition: all .3s;
}

.creator-content .btn:hover .icon.arrow::before {
  transform-origin: left top;
  transform: skew(50deg);
  height: 25%;
  top: 12.5px;
  left: 8px;
  transition: all .3s;
}

.creator-content .btn:hover .icon.arrow::after {
  transform-origin: left bottom;
  transform: skew(-50deg);
  height: 25%;
  bottom: 12.5px;
  left: 8px;
  transition: all .3s;
}

/*============
COMPANY PAGE
=============*/
#section-company {
  width: 100%;
  margin: 0 auto;
  background: #fff;
}

#headline-lg {
  color: #000;
  font-family: 'Didot';
  font-weight: bold;
  font-size: 80px;
  text-align: left;
  letter-spacing: 5px;
  padding: 30px 0 30px 20px;
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
}

.company-content {
  background: url(../images/company_2.jpg);
}

.company-content #headline-wh {
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  padding: 60px 20px;
}

.company-content-A {
  width: 100%;
  background-color: #231815;
  color: #fff;
  padding: 50px 0;
}

.company-content-A > div {
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
}

.company-content-A h3 {
  font-size: 16px;
  font-weight: normal;
  letter-spacing: 2px;
  line-height: 1.8em;
  margin-bottom: 20px;
  padding-left: 20px;
}

.company-content-A h4 {
  color: #fff;
  font-weight: bold;
  background-color: #e60012;
  transition: all .5s;
  display: inline-block;
  margin-left: 20px;
}

.company-content-A h4 a {
  color: #fff;
  padding: 10px 20px;
  display: block;
  font-size: 13px;
  transition: all .5s;
}

.company-content-A h4 a:hover {
  background-color: #fb6d06;
  transition: all .5s;
}

.company-content-B {
  display: flex;
  flex-direction: row;
  width: 100%;
  max-width: 922px;
  margin: 0 auto;
}

.company-content-B > div {
  width: 50%;
}

.company-content-B1S {
  width: 100%;
  margin: 0 0 0 auto;
}

.company-content-B1S > div {
  border-bottom: 1px solid #000;
}

.company-content-B1S > div:nth-child(2) {
  border-top: 1px solid #000;
}

.company-content-B1S > div > p {
  width: 100%;
  max-width: 380px;
  margin: 0 0 0 auto;
  padding: 30px 0 30px 20px;
  line-height: 1.8em;
}

.company-content-B1S > div > p > span {
  margin-top: 10px;
  display: inline-block;
  line-height: 1.8em;
  font-size: 15px;
}

.company-content-B1 img {
  width: 30%;
  margin: 60px auto;
}

.company-content-B2 > img {
  object-fit: cover;
  height: 100%;
  border-bottom: 1px solid #000;
}

#section-map {
  margin-bottom: -6px;
}

/*============
CREATOR PERSON PAGE
=============*/
#section-creatorPerson {
  width: 100%;
  margin: 0 auto;
  background: #fff;
}

.creatorPerson-child {
  display: flex;
  flex-direction: row;
  width: 100%;
  max-width: 922px;
  margin: 0 auto;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
}

.creatorPerson-child > div:nth-child(1) {
  width: 45%;
}

.creatorPerson-child > div:nth-child(2) {
  width: 65%;
}

.reatorPerson-content-A1 > img {
  border-right: 1px solid #000;
  height: 100%;
  object-fit: cover;
}

.creatorPerson-content-A1 {
  width: 100%;
}

.creatorPerson-content-A2 {
  width: 100%;
}

.creatorPerson-content-A2-1 {
  border-bottom: 1px solid #000;
  padding: 20px 30px;
}

.creatorPerson-content-A2-1 h1 {
  font-family: serif;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 40px;
  font-weight: bold;
  letter-spacing: 2px;
  white-space: nowrap;
}

.creatorPerson-content-A2-1 h1 span {
  font-size: 12px;
  letter-spacing: 1px;
  color: #585858;
  margin-left: 50px;
}

.creatorPerson-content-A2-2 {
  padding: 30px;
}

.creatorPerson-content-A2-2 h2 {
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 3px;
  margin-bottom: 15px;
}

.creatorPerson-content-A2-2 p {
  font-size: 14px;
  letter-spacing: 1px;
  margin-bottom: 15px;
}

.creatorPerson-content-A2-3 > div {
  display: flex;
  font-size: 12px;
  font-weight: bold;
  line-height: 2.5em;
}
.creatorPerson-content-A2-3 > div > div:first-child {
  padding-right: 40px;
}

.text-spacing-3 {
  letter-spacing: 13.5px;
  margin-right: -13.5px;
}

.text-spacing-4 {
  letter-spacing: 5px;
  margin-right: -5px;
}

.creatorPerson-content-A3 {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
}

.creatorPerson-content-A3 > div {
  width: 50%;
  padding: 30px 10px;
}

.creatorPerson-content-A3 > div:first-child {
  border-right: 1px solid #000;
}

.creatorPerson-content-A3-1 > h3,
.creatorPerson-content-A3-1 > h4,
.creatorPerson-content-A3-1 > h5,
.creatorPerson-content-A3-2 > h3,
.creatorPerson-content-A3-2 > h4,
.creatorPerson-content-A3-2 > h5 {
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 3px;
  margin-bottom: 15px;
}

.creatorPerson-content-A3-1 > p,
.creatorPerson-content-A3-2 > p {
  font-size: 10px;
  margin-bottom: 15px;
  line-height: 2.5em;
}

.creatorPerson-content-A3-1 > h4,
.creatorPerson-content-A3-2 > h4 {
  margin-top: 40px;
}

#section-action.creatorPerson-action {
  margin-top: 0;
}

#section-creatorList {
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
}

.creatorList-container {
  display: flex;
  flex-wrap: wrap;
}

.creatorList-container > div {
  width: 33.33333%;
  position: relative;
}

.creatorList-container > div h2 {
  color: #fff;
  line-height: 60px;
  font-size: 25px;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  font-family: serif;
  letter-spacing: 2px;
  text-indent: 2px;
}

.creatorList-container > div span {
  height: 60px;
  width: 100%;
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  background: #565353;
  mix-blend-mode: multiply;
  transition: all .3s;
}

#section-creatorChart .creatorList-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 750px;
  width: 100%;
  margin: 0 auto;
  padding: 0 30px 100px;
}

#section-creatorChart .creatorList-container > div {
  width: 30%;
  position: relative;
  margin-bottom: 30px;
}

#section-creatorChart .creatorList-container > div h2 {
  color: #fff;
  line-height: 60px;
  font-size: 20px;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  font-family: serif;
  letter-spacing: 2px;
  text-indent: 2px;
}

#section-creatorChart .creatorList-container > div span {
  height: 60px;
  width: 100%;
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  background: #565353;
  mix-blend-mode: multiply;
  transition: all .3s;
}

#section-creatorChart .creatorList-container::after {
  content: "";
  display: block;
  width: 30%;
}

/*============
INQUIRY PAGE
=============*/
#section-inquiry {
  padding: 0 5vw 100px;
  margin: 0 auto 0;
  width: 100%;
  background: #fff;
}

.inquiry-wrap {
  max-width: 750px;
  margin: 0 auto;
  position: relative;
}

.inquiry-wrap h1 {
  color: #000;
  font-family: 'Didot';
  font-weight: bold;
  font-size: 80px;
  text-align: left;
  letter-spacing: 5px;
  padding: 30px 0 30px 20px;
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
}

.inquiry-wrap h1 > span {
  font-size: 15px;
  line-height: 70px;
  position: relative;
  top: -17px;
  left: 15px;
  font-family: "ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
}

.inquiry-container {
  background: #fff;
  padding: 30px 2vw;
}

.inquiry-container h2 {
  font-size: 13px;
  font-weight: normal;
  letter-spacing: 1px;
  line-height: 1.8em;
}

/*============
THANKS PAGE
=============*/
#section-thanks {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 50px 20px 100px;
  text-align: center;
  letter-spacing: 2px;
}

#section-thanks h1 {
  font-size: 19px;
  line-height: 2em;
  margin-right: -2px;
}

#section-thanks h2 a {
  font-size: 15px;
  color: #21B8E2;
}

/*============
FOOTER
=============*/
footer {
  background: #231815;
}

.footer-container {
  padding: 40px 15px 0;
  margin: 0 auto;
}

.footer-info {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
}

.footer-info h1 img {
  width: 168px;
  height: auto;
  margin-bottom: 30px;
}

.footer-content {
  width: 100%;
  margin-left: 20px;
}

.footer-menu {
  width: 100%;
}

.footer-menu ul {
  margin: 5px 0;
  display: flex;
  justify-content: space-between;
}

.footer-menu ul li {
  color: #fff;
  letter-spacing: 2px;
  font-size: 11px;
  line-height: 1.8em;
}

.footer-menu ul li a {
  font-size: 11px;
  line-height: 1.8em;
  color: #fff;
  display: block;
}

.footer-content h2 {
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  margin: 20px 0 5px -2px;
}

.footer-content h3 {
  color: #fff;
  font-size: 11px;
  font-weight: normal;
}

.footer-content h4 {
  color: #fff;
  font-weight: bold;
  margin-left: -2px;
  background-color: #e60012;
  transition: all .5s;
}

.footer-bottom h4 a {
  color: #fff;
  padding: 10px 20px;
  display: block;
  font-size: 11px;
}

.footer-bottom h4:hover {
  background-color: #fb6d06;
  transition: all .5s;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer-menu ul li a:hover,
footer .navinfo span a:hover,
.footer-menu-list h4 a:hover,
.footer-menu-bottom a:hover {
  color: #923f00;
}

#copyright {
  color: #fff;
  line-height: 1.8em;
  font-size: 14px;
  text-align: center;
  font-family: Roboto,-apple-system,BlinkMacSystemFont,'Helvetica Neue',Helvetica,Arial,Verdana,'Noto Sans Japanese','游ゴシック','Yu Gothic','游ゴシック体',YuGothic,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','Meiryo UI','メイリオ',Meiryo,sans-serif;
}

/*============
Responsive
=============*/
@media screen and ( min-width: 768px ) {
  .sp-br {
    display: none;
  }
}
@media screen and ( max-width: 767px ) {
  .pc-br {
    display: none;
  }

/*========================
  Media Query - index and common
========================*/
@media screen and ( max-width: 767px ) {
  #wrapper {
    padding-left: 40px;
  }
  .header {
    margin-left: 30px;
    width: 150px;
  }
  #section-title h1 {
    font-size: 2.5vw;
    letter-spacing: 2px;
  }
  #headline, #headline-wh {
    font-size: 25px;
  }
  .news-content {
    width: 90%;
    margin: 0 auto;
  }
  .action-content {
    padding-bottom: 75px;
  }
  .action-content iframe {
    width: 100%;
    height: 220px;
  }
  .creator-content .btn {
    font-size: 10px;
    width: 115px;
    margin: 0;
    letter-spacing: 2px;
  }
   .creator-content .btn:hover .icon.arrow::before {
    transform-origin: center;
    transform: none;
    height: 0;
    top: 0;
    left: 0;
    transition: none;
  }

  .creator-content .btn:hover .icon.arrow::after {
    transform-origin: center;
    transform: none;
    height: 0;
    bottom: 0;
    left: 0;
    transition: none;
  }
  .footer-container {
    padding: 30px 10px 0;
  }
  .footer-info {
    flex-direction: column;
    align-items: center;
  }
  .footer-content {
    width: 100%;
    margin: 0;
  }
  .footer-menu ul {
    flex-direction: column;
  }
  .footer-menu ul li a {
    line-height: 4em;
  }
  .footer-content h2 {
    font-size: 15px;
  }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
  .footer-content h3 {
    margin-bottom: 20px;
    font-size: 10px;
  }
  .footer-bottom h4 a {
    margin-bottom: 20px;
  }
  #copyright {
    font-size: 13px;
  }
} 

/*============
 Responsive - NAV AREA
=============*/
@media screen and (max-width: 767px) {
  #navArea {
    width: 40px;
  }
  nav {
    left: -220px;
    width: 220px;
  }
  nav .inner ul li a {
    font-size: 38px;
  }
  .nav-sns-inner img {
    width: 32px;
  }
  .toggle_btn {
    top: 10px;
    left: 7px;
  }
  .toggle_btn span {
    width: 26px;
  }
  .open .toggle_btn {
    left: 235px;
  }
  .nav-sns {
    margin-top: 60px;
  }
  .nav-sns img {
    width: 75%;
  }
  .nav-sns-inner {
    margin: 20px 0 0 10px;
  }
}

/*========================
  Media Query - Company Page
========================*/
@media screen and ( max-width: 767px ) {
  #headline-lg {
    font-size: 40px;
  }
  .company-content #headline-wh {
    padding: 30px 20px;
  }
  .company-content-A h3 {
    font-size: 11px;
    letter-spacing: 1px;
  }
  .company-content-A h4 {
  }
  .company-content-B {
    flex-direction: column;
  }
  .company-content-B > div {
    width: 100%;
  }
  .company-content-B1S > div > p {
    width: 100%;
    max-width: none;
    margin: 0 0 0 auto;
    padding: 30px 0 30px 20px;
  }
  .company-content-B1S > div > p > span {
    font-size: 12px;
  }
  .company-content-B2 > img {
    width: 100%;
    height: 50vh;
    object-fit: cover;
    object-position: top;
  }
}
  
/*========================
  Media Query - Creator Page
========================*/
@media screen and ( max-width: 767px ) {
  #section-creator #headline-lg {
    font-size: 25px;
  }
  .creatorPerson-child {
    flex-direction: column;
  }
  .creatorPerson-child > div:nth-child(1) {
    width: 100%;
  }
  #section-creatorPerson #headline-lg {
    font-size: 22px;
  }
  .reatorPerson-content-A1 > img {
    border-right: 0;
    width: 100%;
    height: 50vh;
    object-fit: contain;
  }
  .creatorPerson-child > div:nth-child(2) {
    width: 100%;
  }
  .creatorPerson-content-A2-1 h1 {
    flex-direction: column;
    align-items: flex-start;
  }
  .creatorPerson-content-A2-1 {
    padding: 20px 10px;
  }
  .creatorPerson-content-A2-1 h1 span {
    margin: 0 0 0 3px;
  }
  .creatorPerson-content-A2-2 {
    padding: 20px 10px;
  }
  .creatorPerson-content-A2-2 h2 {
    font-size: 13px;
    letter-spacing: 2px;
  }
  .creatorPerson-content-A2-2 p {
    font-size: 11px;
  }
  .creatorPerson-content-A2-3 > div {
    flex-direction: column;
  }
  .creatorPerson-content-A2-3 > div > div:first-child {
    padding-right: 0;
  }
  .creatorPerson-content-A2-3 > div > div:nth-child(2) {
    margin-bottom: 10px;
    font-weight: normal;
  }
  .creatorPerson-content-A3 {
    flex-direction: column;
  }
  .creatorPerson-content-A3 > div {
    padding: 20px 10px 0 10px;
    width: 100%;
  }
  .creatorPerson-content-A3 > div:first-child {
    border: 0;
  }
  .creatorPerson-content-A3 > div:last-child {
    padding: 0 10px 20px;
  }
  .creatorPerson-content-A3-1 > p, .creatorPerson-content-A3-2 > p {
    font-size: 9px;
  }
  .creatorPerson-content-A3-1 > p {
    margin-bottom: 30px;
  }
  .creatorList-container > div {
    width: 50%;
  }
  .creatorList-container > div h2 {
    font-size: 15px;
    line-height: 45px;
  }
  .creatorList-container > div span {
    height: 45px;
  }
  .creatorPerson-content-A3-1 > h4, .creatorPerson-content-A3-2 > h4 {
    margin-top: 0;
  }
  #section-creatorChart .creatorList-container {
    padding: 0 20px 50px;
  }
  #section-creatorChart .creatorList-container > div {
    width: 48%;
  }
  #section-creatorChart .creatorList-container > div h2 {
    font-size: 13px;
    line-height: 45px;
  }
  #section-creatorChart .creatorList-container > div span {
    height: 45px;
  }
}

/*========================
  Media Query - Inquiry Page
========================*/
@media screen and ( max-width: 767px ) {
  .inquiry-wrap h1 {
    font-size: 12vw;
    padding: 20px 0;
    display: flex;
    flex-direction: column;
  }
  .inquiry-wrap h1 span {
    font-size: 4vw;
    top: 0;
    left: 0;
    line-height: 2em;
  }
  .inquiry-container {
    padding: 0;
  }
}

@media screen and (min-width:450px) and ( max-width:768px) {
  .inquiry-wrap h1 {
    font-size: 50px;
  }
  .inquiry-wrap h1 span {
    font-size: 14px;
  }
}


/*========================
  Media Query - policy page
========================*/
@media screen and ( max-width: 767px ) {
  /*============
    POLICY
  =============*/
  #section-policy h1 {
    font-size: 15px;
  }
  #section-policy p {
    font-size: 13px;
    margin-left: 2px;
  }
  #section-policy h2 {
    font-size: 14px;
  }
  #section-policy h3 {
    font-size: 14px;
  }
  .policy-container h4 {
    font-size: 14px;
  }
  .policy-container h5 {
    font-size: 15px;
  }
  .policy-container .policy-sub {
    margin: 20px 0 20px 10px;
  }
  .policy-container .policy-sub li {
    font-size: 13px;
  }
}

/*========================
  Media Query - sitemap page
========================*/
@media screen and ( max-width: 767px ) {
  .sitemap-contents {
    width: 47%;
  }
  .sitemap-contents h2 {
    font-size: 13px;
  }
  .sitemap-contents ul li {
    font-size: 12px;
  }
}

@media screen and ( max-width: 374px ) {
  .sitemap-contents {
    width: 100%;
  }
}
/*========================
  lazyload
=========================*/
.lazyload { opacity: 0; transition: opacity .8s ease-out; }
.lazyloaded { opacity: 1; }