@charset "UTF-8";
/*---------------------------------------------------------
Theme Name: Ken'SGALLERY (from STINGER8)
Theme URI: gallery.ken-s.co.jp
Description:
Author: Ken-s
Author URI: ken-s.co.jp
Tags: custom-header, custom-menu
Text Domain: ken-s.co.jp
Version: 20181101
---------------------------------------------------------*/



/* 書体指定 */
@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;
}

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


#wrapper-in{
  display: flex;
  flex-direction: row;
  width: 100%;
  position: relative;
  box-sizing: border-box;
  padding: 0;
}
#content{
  width: 100%;
}
.contentInner{
  margin: auto;
}
.mainimg img{
  display: block;
  width: 90%;
  height: auto;
  margin: 0 auto 60px;
}
.mainimg.border img,
.swiper-wrapper.border img{
  border: 1px solid #ccc;
}
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: 65vh;
  margin: -10% 0 0;
  padding: 0;
  list-style: none;
}

/* IEのみロゴの上のスペースが詰まりすぎる現象の対策 -ここから- */
@media all and (-ms-high-contrast:none){
  header ul.header{  margin: -5% 0 0;} /* IE10-11 */
}
/* IE11のみロゴの上のスペースが詰まりすぎる現象の対策 -ここまで- */

header ul.header li{
  width: 140px;
  height: 12%;
  text-align: right;
}

header ul.header li:first-child{
  width: 65%;
  flex-grow: 2;
  padding: 14px 0 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;
  padding: 10px 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: 100%;
  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,
.st-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;
}
a.festa,
a.btn-w{
  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;
}
a.festa{
  margin: 0 auto;
}
@media screen and (min-width: 769px) and (max-width: 870px) {
.main a.festa,
a.btn-w,
a.btn{
  min-width: 200px;
  padding: 1.2rem 20px;
}
}
.entry-content > img{
  max-width: 90%;
  height: auto;
  display: block;
  margin: 0 auto;
}
.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;
}
span.plan{
  display: inline-block;
  color: #fff;
  font-size: 0.8rem;
  border-radius: 4px;
  padding: 0.1rem 0.5rem;
  margin: 0 1rem 0 0;
}

span.plan.next{
  background: #343434;  
}
span.plan.next::after{
  content: "今後の予定";
}
span.plan.end{
  background: #999;  
}
span.plan.end::after{
  content: "開催終了";
}

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;
  flex-grow: 1;
  margin: 0 0 0 1rem;
}

p.date span{
  display: inline-block;
}
.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 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;
}

.news h2{
  display: none;
}
.news h2:first-child{
  display: flex;
}


.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;
}


/* カテゴリページ-exhibition用 */
.cat-ex{
  padding: 0 0 60px;
  border-bottom: 1px solid #999;
}

.exhibition_list.ex000{
  display: none;/* カテゴリページ内に展示会がない場合の繋ぎのページ（.ex000）を表示させない */
}

.exhibition_list{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0 0 30px;
  margin: 0 auto 60px;
  border-bottom: 1px solid #999;
}

.kanren dl:last-child,
.home dl{
  border: none;
}

.exhibition_list a{
  color: #666;
}
.exhibition_list dd{
  flex-grow: 1;
}

p.kanren-t{
  margin: 0 0 0.6rem;
}

/* 各展示個別ページ */
.entry-content{
  margin: 0 auto 60px;
}
.main a.center,
.st-main a.center{
  display: block;
  margin: 0 auto ;
}


/* ABOUT */
.about{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-55%) translateX(-50%);
}
.about-kg h1{
  margin: 0 auto 60px;
}
.about-kg p{
  text-align: center;
}
.about-kg .gallery-img{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}
.about-kg .gallery-img img{
  display: block;
  width: 48%;
  height: auto;
  margin: 1%;
}

/* CONTACT */
.contact dl,
.contact-check dl{
  display: flex;
  flex-wrap: wrap;
}

.contact dl dt,
.contact-check dl dt{
  width: 20%;
  margin: 0 auto 2rem;
}
.contact dl dd,
.contact-check dl dd{
  width: 80%;
  margin: 0 auto 2rem;
}
.contact dl dd input,
.contact dl dd textarea{
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}
p.center{
  text-align: center;
}
dl + p.center + p.center + p{
  text-align: center;
  margin: 0 auto 60px;
}
span.red{
  color: #c0002a;
}
.contact a{
  text-decoration: underline;
}
.contact a:hover{
  color: #343434;
}

.contact p input[type="submit"],
.contact-check p input[type="submit"]{
    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;
}
.contact input::placeholder,
.contact textarea::placeholder{
  font-family: "Montserrat" , "Noto Sans Japanese" , "Helvetica Neue" ,  "Original Yu Gothic", "Yu Gothic", YuGothic, Verdana, Meiryo, "M+ 1p", sans-serif;
  font-weight: 200;
  color: #999;
}


/* 引用 */
.post blockquote {
	background-color: #f3f3f3;
	background-image: url(images/quote.png);
	background-repeat: no-repeat;
	background-position: left top;
	padding-top: 50px;
	padding-right: 20px;
	padding-bottom: 20px;
	padding-left: 20px;
	margin-top: 20px;
	margin-right: 0px;
	margin-bottom: 20px;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #CCC;
}

/* オリジナルスタイルsmartphone */
.huto {
	font-weight:bold;
}

.hutoaka {
	font-weight:bold;
	color:#ff0000;
}

.oomozi {
	font-size: 18pt;
	line-height: 35px;
	font-weight:bold;
}

.komozi {
	font-size: 80%;
}


/* マウスオーバー */

@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,
.st-main a:hover{
  opacity: 0.6;
}


}

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

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

header ul.header{
  margin: 0;
}

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;
}




/* カテゴリページ-exhibition用 */
.exhibition_list{
  flex-direction: column;
}
.exhibition_list {
    padding: 0 0 60px;
}
.exhibition_list dt{
  margin: 0 auto;
}
.exhibition_list dd{
  margin: 0 auto;
  padding: 0 30px;
}

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



/* contact */
.contact p {
  text-align: left;
}
.contact p.center{
  text-align: center;
}
.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;
}


.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対応 */

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

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

ul.artist a{
  color: #666;
}

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

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