@charset "UTF-8";
/* CSS Document */

/* 書体指定 */
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 100;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 200;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 300;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 400;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Bold");
  font-weight: bold;
}
@font-face {
  font-family: "Helvetica Neue";
  src: local("Helvetica Neue Regular");
  font-weight: 100;
}
@font-face {
  font-family: "Helvetica Neue";
  src: local("Helvetica Neue Regular");
  font-weight: 200;
}

/* 文字組みの指定 */
html{
  font-family: "Montserrat" , "Noto Sans Japanese" , "Helvetica Neue" ,  "Original Yu Gothic", "Yu Gothic", YuGothic, Verdana, Meiryo, "M+ 1p", sans-serif;
	font-size: 16px;
  font-weight: 200;
	line-height: 1.8em;
	color: #343434;
  letter-spacing: .08em;
  word-wrap:break-word;
  overflow-wrap:break-word;
  line-break: strict;
}

p{
  word-wrap:break-word;
  overflow-wrap:break-word;
  line-break: strict;
  text-align: justify;
  margin: 1.8rem auto;
}

/* 全体レイアウト構成 */


.container{
  display: flex;
  flex-direction: row;
  width: 100%;
  position: relative;
  box-sizing: border-box;
  padding: 0;
}

button{
  padding: 0;
  border: none;
}

header {
  width: 240px;
  height: 100vh;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

header ul.header{
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100vh;
  margin: 0;
  padding: 0;
  list-style: none;
}

header ul.header li{
  width: 140px;
  height: 15%;
  transform: rotate(-10deg);
  text-align: right;
}

header ul.header li:first-child{
  width: 95%;
  flex-grow: 2;
  padding: 5px 30px 0 20px;
  box-sizing: border-box;
}

header ul.header li:first-child img{
  width: 100%;
}

header ul.header li a{
  display: block;
  color: #ccc;
  text-decoration: none;
  border-bottom: 2px solid #ccc;
  margin: 0 0 0 -5px;
  padding: 15% 0 0;
  box-sizing: border-box;
}
header ul.header li:first-child a{
  width: 100%;
  border: none;
  padding: 0;
}
@media screen and (max-height: 540px) {
header ul.header li:first-child a{
    height: 90%;
    text-align: left;
}
header ul.header li:first-child img{
  width: auto;
  height: 100%;
}
}



.main{
  width: calc(100% - 240px);
  padding: 20px 2%;
  margin: 0 auto;
  box-sizing: border-box;
}
.main .contents{
  position: relative;
  width: 100%;
  max-width: 960px;
  min-height: 100vh;
  margin: 0 auto;
}


footer{
  width: calc(100% - 240px);
  border-top: 2px solid #aaa;
  margin: 0 0 0 auto;
  font-size: 0.8rem;
}

footer ul{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  margin: 0;
  padding: 0 0 20px;
  list-style: none;
}

footer ul li{
  padding: 20px 0;
  display: block;
}

footer ul.sns li a{
  font-size: 1rem;
}


footer ul li a{
  color:#aaa;
  display: block;
  width: 100%;
  height: 100%;
}

footer div{
  text-align: center;
  padding: 20px 0;
}

h1,h2,h3,h4{
  font-weight: 200;
}

.main a.btn{
  display: block;
  width: 35%;
  min-width: 270px;
  padding: 1.2rem 60px ;
  box-sizing: border-box;
  border-radius: 8px;
  text-align: center;
  text-decoration: none;
  background: #343434;
  color: #fff;
}
.main a.btn{
  min-width: 200px;
  padding: 1.2rem 20px;
}



.splogo{
  display: none;
}

a > i{
  display: inline-block;
  width: 1rem;
  height: 1rem;
  margin: 0 0.5rem;
}
i.no99{
  background: url(/img/newopen-99.svg) no-repeat center center;
  background-size: contain;
}
i.nowh{
  background: url(/img/newopen-wh.svg) no-repeat center center;
  background-size: contain;
}
footer ul.sns li i{
  width: 1.8rem;
  height: 1.8rem;
  margin: 0 0.5rem -0.5rem;
}
footer ul.sns li i.sns-fb{
  background: url(/img/sns-fb.svg) no-repeat center center;
  background-size: contain;
  height: 1.5rem;
  margin: 0 0.5rem -0.3rem;
}
footer ul.sns li i.sns-tw{
  background: url(/img/sns-tw.svg) no-repeat center center;
  background-size: contain;
}
footer ul.sns li i.sns-ig{
  background: url(/img/sns-ig.svg) no-repeat center center;
  background-size: contain;
}

/* トップページ */

h1{
  font-size: 2rem;
  line-height: 2.8rem;
  
  text-align: center;
  margin: 60px auto;
}

h2{
  font-size: 1.5rem;
  margin: 60px auto 30px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
h2:after{
  content: "";
  display: block;
  height: 2px;
  background: #343434;
}

h2.artist_tit:after{
  width: calc(100% - 11rem);
}
h2.access_tit:after{
  width: calc(100% - 21rem);
}

.swiper-wrapper{
  margin: 0 auto 60px;
}

.swiper-slide img{
  display: block;
  width: 100%;
  height: auto;
}

ul.artist{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 0 0 60px;
  padding: 0;
  list-style: none;
  font-size: 0.75rem;
}

ul.artist li{
  width: 50%;
}

ul.artist li.tokyo{
  width: 100%;
  font-weight: bold;
}

ul.artist li.osaka{
  width: 100%;
  font-weight: bold;
  margin-top: 1rem;
}

a.festa{
  display: block;
  width: 35%;
  min-width: 270px;
  padding: 1.2rem 60px ;
  box-sizing: border-box;
  border-radius: 8px;
  text-align: center;
  text-decoration: none;
  background: #fff;
  color: #999;
  border: 1px solid #999;
  margin: 0 auto;
}
@media screen and (min-width: 769px) and (max-width: 870px) {
.main a.festa{
  min-width: 200px;
  padding: 1.2rem 20px;
}
}



a.festa img{
  width: calc(100% - 2rem);
  display: inline-block;
}

ul.share{
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  list-style: none;
  margin: 30px 0 60px;
  padding: 0;
  color: #b1b1b1;
}

.main ul.share li:first-child{
  padding: 0 30px 0 0;
}


.main ul.share li img{
  width:30px;
  height: auto;
}

.main ul.share li a{
  display: block;
  width: 30px;
  min-width: 30px;
  padding: 0 30px 0 0;
  box-sizing: inherit;
  border-radius: 0;
  text-align: center;
  text-decoration: none;
  background: none;
}


.access{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  margin: 0 auto 60px;
}
.access img,
.address{
  display: block;
  width: 50%;
  height: auto;
}
.address{
  display: block;
  width: 50%;
  padding: 0 0 0 40px;
  box-sizing: border-box;
}

.address a{
  display: inline-block;
}


/* ABOUT */
.about{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-55%) translateX(-50%);
}
.about h1{
  margin: 0 auto 60px;
}
.about p{
  text-align: center;
}


/* CONTACT */
p.center{
  text-align: center;
}
span.red{
  color: #c0002a;
}
.contact a{
  text-decoration: underline;
}
.contact a:hover{
  color: #343434;
}

.btn-area button.btn-success{
    color: #fff;
    background-color: #343434;
    border-color: #343434;
    display: inline-block;
    padding: 1rem 60px;
    margin-bottom: 60px;
    font-size: 16px;
    font-weight: 200;
    line-height: 1.8;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: none;
    border-radius: 8px;
}


/* マウスオーバー */

@media screen and (min-width: 769px) {

header ul.header li a:hover{
  color: #666;
  border-bottom: 2px solid #666;
}
header ul.header li:first-child a:hover{
  border-bottom: none;
}
footer ul li a:hover{
  color: #666;
}
.main a:hover{
  opacity: 0.6;
}

}

/* スマホ用メディアクエリ */
@media screen and (max-width: 768px) {
.container{
  flex-direction: column;
}
.main{
  width: 100%;
}

.splogo{
  display: block;
  margin: -10px auto;
  width: 60px;
  height: auto;
}

footer{
  width: 100%;
}

footer ul.sns{
  font-size: 0.8rem;
}

footer ul.sns li i{
  width: 1.5rem;
  height: 1.5rem;
  margin: 0 0.3rem -0.5rem;
}


footer ul.sns li a{
  font-size: 0.8rem;
}


/* トップページ */
#slider .swiper-pagination-bullet-active{
  background: #666;
}

ul.artist{
  flex-direction: column;
}
ul.artist li{
  width: 100%;
}
.access{
  flex-direction: column;
}
.access img,
.address{
  width: 100%;
  height: auto;
  padding: 0 0 0 20px;
  box-sizing: border-box;
}
.address a{
  display: block;
  margin: 0 auto 20px;
}


/* ABOUT */
.about{
  position: relative;
  top:0;
  left:0;
  transform: none;
}
.about h1{
  margin: 60px auto;
}
.about p{
  text-align: left;
}
.about br{
  display: none;
}

.contact p {
  text-align: left;
}
.contact p br{
  display: none;
}

/*
Zarigani Design Office Drawer Menu
Copyright 2018 Zarigani Design Office

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
.zdo_drawer_menu * {
  margin: 0;
  padding: 0;
  outline: none;
  border: none;
  font: inherit;
  font-family: inherit;
  font-size: 100%;
  font-style: inherit;
  font-weight: inherit;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  text-decoration: none;
  list-style: none;
}


.zdo_drawer_menu .zdo_drawer_bg {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 999;
  background-color: rgba(51, 51, 51, 0.5);
  display: none;
  top: 0;
  left: 0;
}

.zdo_drawer_menu .zdo_drawer_button {
  display: block;
  background: none;
  border: none;
  padding: 0;
  width: 42px;
  letter-spacing: 0.1em;
  cursor: pointer;
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 1001;
  text-align: center;
  outline: none;
  transform: rotate(-10deg);
  transition: all 0.5s;
}


.zdo_drawer_menu .zdo_drawer_button.active .zdo_drawer_bar {
  width: 49px;
}

.zdo_drawer_menu .zdo_drawer_button.active .zdo_drawer_bar1 {
  transform: rotate(30deg);
}

.zdo_drawer_menu .zdo_drawer_button.active .zdo_drawer_bar2 {
  opacity: 0;
}

.zdo_drawer_menu .zdo_drawer_button.active .zdo_drawer_bar3 {
  transform: rotate(-30deg);
}

.zdo_drawer_menu .zdo_drawer_button.active .zdo_drawer_close {
  display: block;
}

.zdo_drawer_menu .zdo_drawer_bar {
  display: block;
  height: 2px;
  margin: 6px 0;
  transition: all 0.2s;
  transform-origin: 0 0;
}
.zdo_drawer_menu .zdo_drawer_button.active .zdo_drawer_bar {
  margin: 10px 0;
}
.zdo_drawer_menu .zdo_drawer_close {
  letter-spacing: 0.08em;
  display: none;
}

.zdo_drawer_menu .zdo_drawer_nav_wrapper {
  width: 50%;
  height: 100%;
  transition: all 0.4s;
  transform: translate(100%);
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1000;
  background-color: #FFF;
}

.zdo_drawer_menu .zdo_drawer_nav_wrapper.open {
  transform: translate(0);
}

.zdo_drawer_menu.left .zdo_drawer_button {
  right: auto;
  left: 10px;
}

.zdo_drawer_menu.left .zdo_drawer_nav_wrapper {
  transform: translate(-100%);
  right: auto;
  left: 0;
}

.zdo_drawer_menu.left .zdo_drawer_nav_wrapper.open {
  transform: translate(0);
}
.zdo_drawer_menu .zdo_drawer_button.active{
  transition: all 0.5s;
  transform: rotate(0deg) translateX(250px);
}

/*+++ Default Navigation CSS +++*/
.zdo_drawer_menu .zdo_drawer_nav {
  padding: 0 0 20%;
  box-sizing: border-box;
}

/*+++ Default Button Color +++*/
.zdo_drawer_menu .zdo_drawer_button .zdo_drawer_bar {
  background-color: #999;
}


}


/* iphone se ロゴサイズ対応 */
@media screen and (max-width: 320px) {
header ul.header li:first-child img {
    width: 120px;
}
}

/* メニューの閉じるボタン位置調整 */
@media screen and (max-width: 599px) {
.zdo_drawer_menu .zdo_drawer_button.active{
  transition: all 0.5s;
  transform: rotate(0deg) translateX(150px);
}
}
@media screen and (max-width: 399px) {
.zdo_drawer_menu .zdo_drawer_button.active{
  transition: all 0.5s;
  transform: rotate(0deg) translateX(120px);
}
}
@media screen and (max-width: 349px) {
.zdo_drawer_menu .zdo_drawer_button.active{
  transition: all 0.5s;
  transform: rotate(0deg) translateX(100px);
}
}


/* 幸せのスカーフ展限定font対応 */

.contents .exhibition{
	font-family: "Helvetica Neue", "Original Yu Gothic", "Yu Gothic", YuGothic, Verdana, Meiryo, "M+ 1p", sans-serif;
  font-weight: 400;
}

.contents .exhibition h1,
.contents .exhibition h2,
.contents .exhibition h3,
.contents .exhibition h4{
  font-weight: 400;
}

ul.artist a{
  color: #666;
}

@media all and (-ms-high-contrast: none) {
.contents .exhibition {
	font-family: Verdana, Meiryo, sans-serif;
}
}

@media all and (-ms-high-contrast: active) {
.contents .exhibition{
	font-family: Verdana, Meiryo, sans-serif;
}
}

@media print and (-webkit-min-device-pixel-ratio:0){
.contents .exhibition {
  font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
}
}