@charset "UTF-8";

/* =================================== *
	全体設定
 * =================================== */
html {
  font-size: 62.5%;
}

body{
  font-family:  YuGothic, "Yu Gothic Medium", "Yu Gothic", Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, Verdana, Meiryo, sans-serif;
	background: #fefefe;
  color: #333;
  font-size:1.6rem;
}

a,
a:link,
a:visited{
	color: #333;
	text-decoration: none;
}

a,
a:hover{
	-webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

a:hover {
	opacity:0.6;
}

*:hover {
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}

ul {
  list-style: none;
}

mark {
	color: #333;
	background: transparent;
}

.fl {
  float: left;
}

.fr {
  float: right;
}

.cf::after {
content: "";
display: block;
clear: both;
}

.flex_container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.dib {
  display: inline-block;
}

/* tab + pc */
@media screen and (min-width: 768px) {
  .spOnly {
		display: none !important;
	}
}

/* sp */
@media screen and (max-width: 767px) {
  .pcOnly {
		display: none !important;
	}
}

/* tab + pc */
@media screen and (min-width: 768px) {
  a[href^="tel:"]{
    pointer-events: none;
  }
}

/* =====================================
  レイアウト
===================================== */
.l_wrap {
  width: 100%;
  margin: 0 auto;
  padding: 8rem 0 4rem;
  overflow: hidden;
}

.l_cont {
    margin: 0 auto;
    max-width: 1200px;
    width: 95%;
    overflow: hidden;
}

.site {
  width: 100%;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: column;
          flex-flow: column;
  min-height: 100vh;
}

/* =====================================
  見出し
===================================== */
.cont_ttl {
  font-size: 4rem;
  font-weight: bold;
  text-transform: uppercase;
}

/* =====================================
  ページTOPに戻るボタン
===================================== */
#pageTop {
  display: block;
  position: fixed;
  bottom: 5em;
  right: 2em;
  z-index: 1;
}

.pageTop_btn {
  display: block;
  position: relative;
  background: #F9F900;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 50px;
  height: 50px;
  -webkit-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
}

.pageTop_btn::before, .pageTop_btn::after {
  display: block;
  content: " ";
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  width: 12px;
  height: 12px;
  margin: 4px auto 0;
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
  z-index: 1;
}

.pageTop_btn::before {
  top: 18px;
  background-color: #2D2C34;
  -webkit-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
}

.pageTop_btn::after {
  top: 22px;
  background-color: inherit;
  z-index: 2;
}

/* hover */
@media screen and (min-width: 768px) {
	.pageTop_btn:hover {
		background: #2D2C34;
		opacity: 1;
	}

  .pageTop_btn:hover::before {
		background: #F9F900;
	}
}

/* sp */
@media screen and (max-width: 500px) {
	#pageTop {
		bottom: 3em;
		right: .5em;
	}
}

/* =====================================
  ハンバーガーメニュー
===================================== */
/* ----- ハンバーガーボタン ----- */
.c-button {
  display: none;
}
/* sp */
@media screen and (max-width: 767px) {
  .c-button {
    position: relative;
    display: inline-block;
    text-decoration: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    background-color: transparent;
    cursor: pointer;
  }

  .p-hamburger {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 2%;
    z-index: 3;
    margin: auto 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: #F9F900;
    outline: none;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
  }

  .p-hamburger__line {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 18px;
    height: 1px;
    background-color: #2D2C34;
    -webkit-transition: inherit;
    transition: inherit;
  }
  .p-hamburger__line::before,
  .p-hamburger__line::after {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    background-color: inherit;
    content: '';
    -webkit-transition: inherit;
    transition: inherit;
  }
  .p-hamburger__line::before {
    top: -5px;
  }
  .p-hamburger__line::after {
    top: 5px;
  }

  .p-hamburger[aria-expanded="true"] .p-hamburger__line {
    background-color: transparent;
  }

  .p-hamburger[aria-expanded="true"] .p-hamburger__line::before,
  .p-hamburger[aria-expanded="true"] .p-hamburger__line::after {
    top: 0;
    background-color: #F9F900;
  }

  .p-hamburger[aria-expanded="true"] .p-hamburger__line::before {
    -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg);
  }

  .p-hamburger[aria-expanded="true"] .p-hamburger__line::after {
    -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
            transform: rotate(-45deg);
  }

  /* .p-hamburger:hover .p-hamburger__line,
  .p-hamburger:hover .p-hamburger__line::before,
  .p-hamburger:hover .p-hamburger__line::after,
  .p-hamburger:focus .p-hamburger__line,
  .p-hamburger:focus .p-hamburger__line::before,
  .p-hamburger:focus .p-hamburger__line::after {
    background-color: #F9F900;
  } */

  .is-drawerActive .p-hamburger {
    background-color: #2D2C34;
  }

  #gloval-nav {
    display: none;
    position: fixed;
    z-index: 2;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    padding-top: 64px;
    -webkit-transition: all 0.6s;
    transition: all 0.6s;
    background: #F9F900;
  }

  #gloval-nav .l-cont {
    height: 100vh;
    padding-top: 0;
  }

  #gloval-nav .spNav_main {padding-top: 68px; }
  #gloval-nav .spNav_sub {padding: 10% 0; }
  .is-drawerActive #gloval-nav {
    display: block;
  }
}


/* =====================================
  btn
===================================== */
.btn_container {
  margin: 2rem auto 0;
}

a.btn {
  /* color: #fff; */
}

.btn {
  text-align: center;
  text-transform: uppercase;
}

.btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 300px;
    height: 50px;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    background: #fff;
    border: 1px solid #333;
    font-size: 1.8rem;
    line-height: 1;
    margin: 0 auto;
    position: relative;
    cursor: pointer;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.btn::before {
    content: "";
    position: absolute;
    top: 20px;
    right: 22px;
    border-top: 3px solid #333;
    border-right: 3px solid #333;
    width: 10px;
    height: 10px;
    -webkit-transform: rotate(46deg);
        -ms-transform: rotate(46deg);
            transform: rotate(46deg);
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out; }

.btn.-half {
  width: 150px;
  height: 40px;
  margin-top: 2.4rem;
}

.btn.-half::before {
  top: 12px;
}


/* pc */
@media screen and (min-width: 769px) {
  .btn_container {
    margin-top: 4rem;
  }
}


/* =====================================
  header
===================================== */
.l_header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 2;
  padding: .8rem 0;
  text-align: center;
  background-color: rgba(255, 255, 255, .9);
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
}

.admin-bar .l_header {
  top: 46px;
}

.logo.-primary img {
  width: 66px;
}

.site-header.is-headerHide {
    -webkit-transform: translateY(-100%);
        -ms-transform: translateY(-100%);
            transform: translateY(-100%);
}

/* sp + tab */
@media screen and (max-width: 768px) {

}

/* sp */
@media screen and (max-width: 767px) {
  #wpadminbar {
    position: fixed;
  }
}

/* tab + pc */
@media screen and (min-width: 768px) {
  .l_header {
    padding: 1.2rem 0;
    border-bottom: 1px solid #E5E1D3;
  }

  .admin-bar .l_header {
    top: 32px;
  }
}

/* =====================================
  nav
===================================== */
.nav a {
  font-family: 'Roboto', sans-serif;
}

/*
  pc-nav
========================== */
.pc_nav_container {
  text-align: center;
}

.pc_nav_main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 80%;
  margin: 0 auto;
}

.pc_nav_main_item a {
  text-transform: uppercase;
  font-weight: 400;
}

.pc_nav_main .logo img {
  width: 88px;
}

.pc_nav_main_item + .pc_nav_main_item {
  margin-left: 10rem;
}

.pc_nav_main_ttl {
  font-size: 32px;
  text-transform: uppercase;
  line-height: 1.2;
}

.pc_nav_sub {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 80%;
  margin: 1.2rem auto 0;
}

.pc_nav_sub_item a {
  font-size: 12px;
  font-weight: 100;
}

.pc_nav_sub_item + .pc_nav_sub_item {
  margin-left: 4rem;
}

/*
  sp-nav
========================== */
@media screen and (max-width: 768px) {
  body.is-drawerActive {
    overflow: hidden;
  }

  #gloval-nav {
    display: none;
    position: fixed;
    z-index: 2;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    /* transform: translateX(100%); */
    -webkit-transition: all 0.6s;
    transition: all 0.6s;
    background: rgba(46, 45, 52, .95);
  }

  #gloval-nav a {
    color: #fefefe;
  }

  #gloval-nav .l-cont {
    height: 100vh;
    padding-top: 0;
  }

  #gloval-nav .spNav_main {padding-top: 68px; }
  #gloval-nav .spNav_sub {padding: 10% 0; }
  .is-drawerActive #gloval-nav {
    display: block;
  }

  .h_nav_main {
    margin-top: 20%;
  }

  .h_nav_main_item {
    font-size: 3.2rem;
  }

  .h_nav_main_item + .h_nav_main_item {
    margin-top: 4.8rem;
  }

  .h_nav_sub {
    margin-top: 20%;
  }

  .h_nav_sub_item {
    font-size: 1.2rem;
  }

  .h_nav_sub_item + .h_nav_sub_item {
    margin-top: 3rem;
  }

}


/* =====================================
  footer
===================================== */
.footer {
  margin-top: 5rem;
  text-align: center;
}

.footer_cont {
  position: relative;
  background-color: #f1f1f1;
  padding: 4rem 0;
}

.footer_logo_container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  max-width: 1000px;
  margin: 0 auto;
}

.footer_logo {
  width: 64px;
}

.footer_logo + .footer_logo {
  margin-left: 32px;
}

.footer_logo img {
  width: 100%;
}

.copyright {
  padding: 1.2rem 0;
  font-size: 1.2rem;
  background-color: #2D2C34;
  text-align: center;
  color: #fff;
  text-transform: uppercase;
}

/* tab + pc */
@media screen and (min-width: 768px) {
  .footer {
    margin-top: 8rem;
  }

  .footer_cont {
    padding: 8rem 0;
  }

  .footer_logo {
    width: 64px;
  }
}

/* =====================================
  矢印 .line_prev / .line_next
===================================== */
.line_prev, .line_next {
  position: relative;
}

/* 線 */
.line_prev:before,
.line_next:before {
    content: "";
    position: absolute;
    top: 6px;
    width: 100px;
    height: 2px;
    background: #2f3a40;
    -webkit-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
}

/* prevの線 */
.line_prev:before {
    left: 1.6rem;
}

/* nextの線 */
.line_next:before {
    right: 1.6rem;
}

/* 三角 */
.line_prev:after,
.line_next:after {
  display: block;
  content: " ";
  position: absolute;
  top: -2px;
  width: 0;
  height: 0;
  border-style: solid;
  margin-left: auto;
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}

/* prevの三角 */
.line_prev:after {
  width: 1.6rem;
  left: 1rem;
  border-width: 0 0 10px 16px;
  border-color: transparent transparent #2f3a40 transparent;
}

/* nextの三角 */
.line_next:after {
  width: 1.6rem;
  right: 1rem;
  border-width: 10px 0 0 16px;
  border-color: transparent transparent transparent #2f3a40;
}

/* =====================================
  main
===================================== */
.site-main {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  margin-top: 6.8rem;
}

/* tab + pc */
@media screen and (min-width: 768px) {
  .site-main {
    margin-top: 13rem;
  }
}


/* =====================================
  artist一覧
===================================== */
.artist_container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  max-width: 1280px;
  margin: 0 auto;
}

.artist_item {
  width: calc(100%/3 - 1rem);
  margin-bottom: 1rem;
  margin: 0 .5rem 1rem;
}

.artist_link {
  display: block;
  position: relative;
  height: 0;
  padding-top: 100%;
  overflow: hidden;
  z-index: 0;
}

.artist_img img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  margin: auto;
  z-index: 1;
}

.artist_ttl {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  text-align: center;
  font-size: 1.2rem;
  background-color: rgba(255, 255, 255, .7);
  z-index: 2;
}

.artist_blog_container {
  opacity: 0;
  position: absolute;
  bottom: 10%;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 100%;
  text-align: center;
}

.artist_blog {
  display: inline-block;
}

.artist_blog a {
  display: block;
  padding: 0 1em;
  border: 1px solid #fefefe;
  font-size: 1.4rem;
  color: #fefefe;
}

/* ソートボタン */
button {
  background-color: transparent;
  border: 0;
  text-transform: none;
  cursor: pointer;
}

button:active, button:focus {
  outline: none;
}

.controls {
  margin-bottom: 2.4rem;
  padding-top: 2.4rem;
  text-align: center;
}

.controls button.control{
  color:#817650;
  font-size: 1.2rem;
}
.controls button.control.mixitup-control-active{
  font-size: 1.8rem;
}

button.control {
  position: relative;
  margin: 0 1em;
  padding: 0;
}

button.control::after {
  display: block;
  content: " ";
  position: absolute;
  top: 50%;
  right: -1.6rem;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 1px;
  height: 12px;
  background-color: #817650;
}

button.control:last-of-type::after {
  display: none;
}

/* tab + pc */
@media screen and (min-width: 768px) {
  .controls {
    padding-top: 4.8rem;
  }

  .artist_container {
    padding-top: 2.4rem;
  }

  .artist_item {
    position: relative;
    width: calc(100%/4 - 1rem);
  }

  .artist_ttl {
    font-size: 1.4rem;
  }

  .overlay {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .7);
    text-align: center;
    z-index: 2;
  }

  .artist_name {
    margin-top: 33%;
    color: #fefefe;
  }

  .artist_name_en {
    margin-top: .5em;
    color: #fefefe;
    text-transform: capitalize;
    font-family: 'Roboto', sans-serif;
    font-weight: 100;
  }

  /* hover */
  .artist_item a:hover,
  .artist_item:hover .overlay {
    opacity: 1;
    -webkit-transition: .3s all;
    transition: .3s all;
  }

  .artist_item:hover .artist_ttl {
    opacity: 0;
  }

}

/* pc */
@media screen and (min-width: 1024px) {
  .artist_item {
    width: calc(100%/5 - 1rem);
  }
}

/* pc */
@media screen and (min-width: 1200px) {
  .artist_item {
    width: calc(100%/6 - 1rem);
  }
}

/* =====================================
  news
===================================== */
.news_item {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  padding: 1.6rem 0;
  width: 100%;
  overflow: hidden;
}

.news_item:first-of-type {
  padding-top: 0;
}

.news_item + .news_item {
  border-top: 1px dotted #9B9174;
}

.news_body {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-left: 1.2rem;
}

.news_textArea {
  -webkit-box-ordinal-group: 4;
      -ms-flex-order: 3;
          order: 3;
}

.news_textArea p + .wp-block-group {
  margin-top: 1em;
}

.news_ttl {
  font-weight: normal;
}

.news_labelArea {
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
  margin-bottom: .4rem;
}

.news_category {
  padding: .25em 1em;
  background-color: #F9F900;
  border-radius: 12px;
  font-size: 1.4rem;
  color: #333;
}

.news_date {
  margin-left: 1em;
  font-size: 1.2rem;
}

.news_artistArea {
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
  margin-bottom: .4rem;
}

.news_artist {
  font-weight: bold;
}

.news_artist + .news_artist {
  margin-left: 1em;
}

.news_thumb {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  /* width: 25%; */
  overflow: hidden;
}

.news_thumb img {
  width: 100%;
}

.news .btn {
  /* margin-top: 2rem; */
}

/* youtube埋め込み対策 */
.wp-block-embed-youtube .wp-block-embed__wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}

.wp-block-embed-youtube .wp-block-embed__wrapper iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

/* ニュース用アイコン */
.news_thumb {
  position: relative;
  width: 5.6rem;
  height: 5.6rem;
  border-radius: 50%;
  background-color: #fefefe;
}

.news_thumb .news_icon {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

/* 続きを読む */
.more-link {
  font-size: .8em;
}

.more-link, .more-link:link, .more-link:visited {
  font-size: .8em;
  color: #9B9174;
}

/* sp */
@media screen and (max-width: 767px) {
  .news_body {
    width: 70%;
    margin-left: 5%;
  }

  .news_textArea {
    font-size: 1.4rem;
  }
}

/* tab + pc */
@media screen and (min-width: 768px) {
  .news_item {
    max-width: 1200px;
    width: 95%;
    margin: 0 auto;
  }

  .news_body {
    margin-left: 2.4rem;
  }

  .news_labelArea {
    margin-bottom: .8rem;
  }

  .news_artistArea {
    margin-bottom: .8rem;
  }
}

/* pc */
@media screen and (min-width: 769px) {
  .news_thumb {
    /* width: 20rem;
    min-width: 20rem; */
  }

  .news .btn {
    /* margin-top: 4rem; */
  }
}

/* =====================================
  news 個別ページ
===================================== */
.single_page .news.l_wrap {
  padding: 0;
}

.single_page .news_item {
  padding-bottom: 0;
}

/* sp */
@media screen and (max-width: 767px) {
  .single_page .page_ttlArea.l_cont {
    margin-bottom: 0;
  }

  .single_page .news_item {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
  }

  .single_page .news_item:nth-of-type(odd) {
    background-color: #fefefe;
  }

  .single_page .news_body {
    width: 100%;
    margin-left: 0;
  }

  .single_page .news_thumb {
    /* width: 100%; */
  }
}

/* tab + pc */
@media screen and (min-width: 768px) {

}

/* =====================================
  404
===================================== */
.error404 {
  /* overflow: hidden; */
}

.error-404 {
  margin-top: 14rem;
  text-align: center;
}

.error-404 .page-content {
  margin: 4rem auto;
}

.error-404_msg {
  text-align: left;
}

.error-404_msg p + p {
  margin-top: .5em;
}

.error-404 .btn {
  margin-top: 5rem;
  margin-bottom: 3rem;
  background-color: #E5E1D3;
}

/* tab + pc */
@media screen and (min-width: 768px) {
  .error-404 {
    margin-top: 21rem;
  }

  .error-404.l_cont {
    max-width: 980px;
  }

  .error-404 .page-title {
    text-align: left;
  }

  .error-404 .page-content {
    margin-top: 8rem;
  }

  .error-404 .btn {
    width: 360px;
    margin-top: 10rem;
  }

}