/*
Theme Name: Umitota
Author: Rui Ishiguro
Version: 1.0
*/


/**
* YUI 3.5.0 - reset.css (http://developer.yahoo.com/yui/3/cssreset/)
* http://cssreset.com
* Copyright 2012 Yahoo! Inc. All rights reserved.
* http://yuilibrary.com/license/
*/
/*
TODO will need to remove settings on HTML since we can't namespace it.
TODO with the prefix, should I group by selector or property for weight savings?
*/
html{
color:#000;
background:#FFF;
}
/*
TODO remove settings on BODY since we can't namespace it.
*/
/*
TODO test putting a class on HEAD.
- Fails on FF.
*/
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,
img {
border:0;
}
/*
TODO think about hanlding inheritence differently, maybe letting IE6 fail a bit...
*/
address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
font-style:normal;
font-weight:normal;
}
ol,
ul {
list-style:none;
}
caption,
th {
text-align:left;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size:100%;
font-weight:normal;
}
q:before,
q:after {
content:'';
}
abbr,
acronym {
border:0;
font-variant:normal;
}
/* to preserve line-height and selector appearance */
sup {
vertical-align:text-top;
}
sub {
vertical-align:text-bottom;
}
input,
textarea,
select {
font-family:inherit;
font-size:inherit;
font-weight:inherit;
}
/*to enable resizing for IE*/
input,
textarea,
select {
*font-size:100%;
}
/*because legend doesn't inherit in IE */
legend {
color:#000;
}
/* YUI CSS Detection Stamp */
#yui3-css-stamp.cssreset { display: none; }


* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}

a:link { text-decoration: none; color: #000000; }
a:visited { text-decoration: none; color: #000000; }
a:hover { text-decoration: none; color:#000000; opacity: 1;}
a:active { text-decoration: none; color:#000000; }

a.link-color:link { text-decoration: none; color: #b9c3c9 !important; }
a.link-color:visited { text-decoration: none; color: #b9c3c9 !important; }
a.link-color:hover { text-decoration: none; color:#b9c3c9 !important; }
a.link-color:active { text-decoration: none; color:#b9c3c9 !important; }

a.link-color-wh:link { text-decoration: none; color: #FFFFFF !important; }
a.link-color-wh:visited { text-decoration: none; color: #FFFFFF !important; }
a.link-color-wh:hover { text-decoration: none; color:#FFFFFF !important; }
a.link-color-wh:active { text-decoration: none; color:#FFFFFF !important; }

p a:link { text-decoration: none; color: #b9c3c9 !important; }
p a:visited { text-decoration: none; color: #b9c3c9 !important; }
p a:hover { text-decoration: none; color:#b9c3c9 !important; }
p a:active { text-decoration: none; color:#b9c3c9 !important; }

#header a:link { text-decoration: none; color: #000000; }
#header a:visited { text-decoration: none; color: #000000; }
#header a:hover { text-decoration: none; color:#000000; opacity: 1;}
#header a:active { text-decoration: none; color:#000000; }



a:hover{ 
    opacity: 0.6;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all  0.2s ease-in-out;
}

select,
figure{
    margin: 0;
}
figure{
    line-height:0;
}
    figcaption.menu-caption{
        display: block;
        width: 100%;
        text-align: right;
        margin-top: 11px;
        line-height: 1.833;
    }
    h3.typesquare_tags br,
    figcaption.menu-caption br{
        display: none;
    }
figure img{
    vertical-align:text-bottom;
}
figcaption{
    font-size: 1.1rem;
    line-height: 1.8;
    text-align: right;
}
.google-map-wrap{
    padding: 0 30px;
    width: 100%;
    max-width: 810px;
    margin: 0 auto;
}
.google-map{
  position: relative;
  width: 100%;
  padding-top: 73.333%;
}
    .google-map iframe{
      position: absolute;
      top: 0;
      right: 0;
      width: 100% !important;
      height: 100% !important;
    }
.signature{
    font-size: 11px;
    text-align: right;
}

strong{
    font-weight: bolder;
}

*html body {overflow-y: auto;} /* IE6 */
*:first-child+html body {overflow-y: auto;} /* IE7 */

ul li{
    list-style: none;
}

img {
    border:0;
}
figure img,
p img,
li img{
    max-width: 100%;
    width: auto; /* for ie 8 */
    height: auto;
    vertical-align:text-bottom;
}
img.responsive-img{
    width: 100%;
    height:auto;
    display: block;
}

p{
    margin: 27px 0 0;
    font-size: 1.5rem;
    line-height: 1.8;
    letter-spacing: 0.025em;
    font-family: "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif !important;
    color: #000000 !important;
}
p span{
    font-size: 1.5rem;
    line-height: 1.8;
    letter-spacing: 0.025em;
    font-family: "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif !important;
    color: #000000 !important;
}
p:first-child{
    margin-top:0px;
}

p a span,
.sec li a{
    color: #b9c3c9 !important; 
}
.posted-date{
}
.clearfix:after {
    content:" ";
    display:block;
    clear:both;
}
.pc-only{
    display: block;
}
.smp-only,
.smp-nav{
    display: none;
}
    .smp-only{
        display: none !important;
    }
.primary{
    margin-top: 0 !important;
    padding-top: 0 !important;
}
html{
  font-size: 62.5%;
}
body{
    border: solid 0px #FFFFFF;
    background-color: transparent;
    color: #000000;
    font-size: 1.0rem;
    font-family: "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif !important;
    position: relative;
    -webkit-text-size-adjust: 100%;
    word-spacing:normal !important;
    line-height: 1.75;
    letter-spacing: 0.025em;
}

#page404 p{
    font-size: 1.5rem;
    margin-bottom: 0;
    text-align: center;
    margin-top:87px;
}

.embed-container{
    position: relative;
    padding-bottom: 56.25%;
    height: 0; 
    overflow:hidden; 
    width: 100%;
    max-width: 100%; 
    height: auto;
    margin-top: 0px;
}
    .embed-container iframe,
    .embed-container object,
    .embed-container embed { 
        position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
    }


h1,h2,h3{
    font-family: "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif !important;;
}
.en{
}

#container{
    background-color: #FFFFFF;
    min-height: 100%;
    width: 100%;
    margin: 0 auto;
    width: 100%;
    position: relative;
    min-height: 100vh;
    padding: 15px 0px 330px;
}
#container.artfest-informarion{
    padding: 60px 0px 330px;
}
    .artfest-informarion-bar{
        width: 100%;
        position: fixed;
        left: 0;
        top: 0;
        height: 45px;
        text-align: center;
        background-color: #b9c3c9;
        font-size: 1.5rem;
        line-height: 1;
        padding: 16px 0;
        z-index: 11;
    }

#main{
    position: relative;
    display: block;
}
    #main.main-home{
        padding: 30px 0 0;
    }
    #main.main-page{
        padding: 120px 0 0;
    }
    #main.main-page-ln{
        padding: 30px 0 0;
    }
    #main.main-page-ln{
        padding: 30px 0 0;
    }
/* start-header */
#header{
}

#header h1.logo,
#header .logo{
    width: 265px;
    height: auto;
    margin: 0px auto 0;
}

    .lang{
        font-size: 1.8rem;
        position: absolute;
        display: block;
        width: 90px;
        right: 83px;
        top:23px;
    }
    .lang ul:after {
        content:" ";
        display:block;
        clear:both;
    }
    .lang ul li{
        float: right;
        margin-left: 19px;
    }
        .lang ul li a:hover{
            color: #b9c3c9 !important;
            opacity: 0.6;
            -webkit-transition: all 0.2s ease-in-out;
            -moz-transition: all 0.2s ease-in-out;
            -o-transition: all 0.2s ease-in-out;
            -ms-transition: all 0.2s ease-in-out;
            transition: all  0.2s ease-in-out;
        }
        .lang ul li.current span{
            color: #b9c3c9;
        }

    .lang-smp{
        position: relative;
        display: block;
        width: 100%;
        right: auto;
        top:auto;
        text-align: center;
    }
    .lang-smp ul{
        width: 120px;
        margin: 12px auto 12px;
    }
    .lang-smp ul li{
        float: right;
        margin: 0px 17px 0px;
        display: inline-block;
    }
    .menu-trigger {
        position: fixed;
        display: block;
        width: 30px;
        height: 24px;
        right: 24px;
        top:24px;
        z-index: 12;
    }
    .menu-trigger span {
        position: absolute;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: #b9c3c9;
    }
        .menu-trigger.active span {
            width: 33px;
        }
    .menu-trigger span:nth-of-type(1) {
        top: 0;
    }
    .menu-trigger span:nth-of-type(2) {
        top: 11px;
    }
    .menu-trigger span:nth-of-type(3) {
        bottom: 0;
    }
    .menu-trigger.active{
        width: 27px;
        height: 27px;
    }
    .menu-trigger.active span:nth-of-type(1) {
        -webkit-transform: translateY(12px) translateX(-2px) rotate(-45deg);
        transform: translateY(12px) translateX(-2px) rotate(-45deg);
        background-color: #FFFFFF;
    }
    .menu-trigger.active span:nth-of-type(2) {
        opacity: 0;
    }
    .menu-trigger.active span:nth-of-type(3) {
        -webkit-transform: translateY(-12px) translateX(-2px) rotate(45deg);
        transform: translateY(-12px) translateX(-2px) rotate(45deg);
        background-color: #FFFFFF;
    }

        #container.artfest-informarion .lang{
            top:68px
        }
        #container.artfest-informarion .menu-trigger{
            top:69px;
        }
        #container.artfest-informarion h1.page-title {
            top: 68px;
        }
.smp-nav{
    background-color: #b9c3c9;
    width: 100%;
    height: 100vh;
    position: fixed;
    z-index: 12;
    left: 0;
    top: 0;
}
    .smp-nav-list{
        position: absolute;
        width: 100%;
        text-align: center;
        top:200px;
        font-size: 2.1rem;
        overflow: scroll;
    }
    .smp-nav-list ul li{
        margin-bottom: 17px;
    }
    .smp-nav-list ul li a{
        display: inline-block;
        margin:0 auto;
        border-top: 2px solid #FFFFFF;
        line-height: 1;
        padding-top: 9px;
    }
    .smp-nav-list p a{
        color: #000000;
    }

    .smp-nav-list .lang ul li a {
        display: inline-block;
        margin: 0 auto;
        border-top: 0px solid #FFFFFF;
        line-height: 1;
        padding-top: 0px;
        color: #000000;
    }
        .smp-nav-list .lang ul li.current span{
            color: #FFFFFF;
        }
    .smp-nav .logo{
        position: absolute;
        width: 212px;
        height: auto;
        top: 21px;
        left: 50%;
        margin-left: -106px;
    }
    a.top-border{
        display: inline-block;
        margin:0 auto;
        border-top: 2px solid #b9c3c9;
        line-height: 1;
        padding-top: 9px;
    }
    a.top-border-w{
        display: inline-block;
        margin:0 auto;
        border-top: 2px solid #FFFFFF;
        line-height: 1;
        padding-top: 9px;
    }
    .smp-nav-list .reservation{
        margin:55px 0 50px;
    }
    .fixed {
      position: fixed;
      width: 100%;
      height: 100%;
    }
    .smp-nav .smp-nav-list {
        position: relative;
        width: 100%;
        text-align: center;
        height: 100vh;
        top: auto;
        padding-top: 201px;
        font-size: 2.1rem;
        overflow: scroll;
    }
    .smp-nav .link-company{
        margin-bottom: 60px;
    }
    .smp-nav .link-wrap{
        text-align: center;
        margin-top: 0px;
    }
        .smp-nav .link-wrap ul li{
            display: inline;
            margin: 0 15px;
            font-size: 1.8rem;
        }
        .smp-nav .link-wrap ul li a{
            margin-bottom: 0px;
        }
    .arrow-bottom{
        width: 40px;
        height: auto;
        position: fixed;
        bottom:25px;
        right: 24px;
        z-index: 100;
    }
    #page-top{
        width: 40px;
        height: auto;
        position: fixed;
        bottom:25px;
        right: 24px;
        z-index: 100;
    }
/* end-header */

/* start-slide */

.image-crossfader{
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 73.2vw;
    margin-top: 13px;
}
.image-crossfader-inner{
    background-size: cover;
    background-position: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: 0;
    transform: scale(1);
    transition:
    opacity 3.5s cubic-bezier(0.455, 0.03, 0.515, 0.955),
    transform 3.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.image-crossfader-inner.is-visible {
  z-index: 1;
  opacity: 1;
  transform: scale(1.00);
}
.home-nav{
    font-size: 1.8rem;
    position: absolute;
    width: 100%;
    height: auto;
    top: 138px;
    z-index: 10;
}
    #container.artfest-informarion .home-nav{
        top: 183px;
    }
.page-nav{
    font-size: 1.8rem;
    width: 100%;
    height: auto;
    margin-top: 30px;
    z-index: 10;
}
    .home-nav ul,
    .page-nav ul{
        text-align: center;
    }
        .home-nav ul li,
        .page-nav ul li{
            display: inline-block;
            margin: 0 12px;
        }
        .home-nav ul li a,
        .page-nav ul li a{
            color: #000000;
            display: inline-block;
            border-top: 2px solid #b9c3c9;
            padding-top: 8px;
            line-height: 1;
        }
.page-nav-fix{
    position: absolute;
    width: 100%;
    top: 176px;
    margin-top: 0px;
}
.page-nav-fix  ul li{
    margin-top: 24px;
}

#container.artfest-informarion .page-nav-fix{
}
#container.artfest-informarion .page-nav-fix  ul li{
    margin-top: 69px;
}

.is-fixed{
    position: fixed;
    top: 0px;
    margin-top: 0px;
}
/* end-slide */

/* start-common */
.inner{
    width: 100%;
    padding: 0 24px;
}
.inner-full{
    max-width: 1000px;
    margin: 0 auto;
}
.list-title{
    text-align: center;
    margin-top:38px;
}
    .list-title li{
        font-size: 1.5rem;
        line-height: 1.75;
        letter-spacing: 0.1em;
        margin-top:17px;
    }
.text-center{
    text-align: center;
}
.sec{
    padding-top: 80px;
}
    .sec-child{
        margin-top: 60px;
    }
#slide{
    padding-top: 31px;
}
    .slick-list{
    }
    .swiper-slide{
    }
    .sec header{
        font-size: 1.8rem;
        text-align: center;
        margin-bottom: 31px;
    }
        .sec header h1,
        h1.page-title{
            display: inline-block;
            position: relative;
            line-height: 1;
            padding: 9px 0px;
            font-size: 1.8rem;
        }
        .sec-header-read{
            margin:42px 0 30px;
        }
    .bar-top{
        position: absolute;
        top: 0;
        left: 0;
    }
    .bar-bottom{
        position: absolute;
        bottom: 0;
        left: 0;
    }
    .bar-left{
        position: absolute;
        bottom: -1px;
        left: -9px;
    }
    .bar-right{
        position: absolute;
        bottom: -1px;
        right: -9px;
    }
    .bar-width{
        background-color: #b9c3c9;
        display: block;
        width: 100%;
        height: 1px;
        -moz-border-radius: 2px;
        -webkit-border-radius: 2px;
        -o-border-radius: 2px;
        -ms-border-radius: 2px;
    }
    .bar-width-bold{
        height: 2px;
    }
    .bar-height{
        background-color: #b9c3c9;
        display: block;
        width: 1px;
        height: 37px;
        -moz-border-radius: 2px;
        -webkit-border-radius: 2px;
        -o-border-radius: 2px;
        -ms-border-radius: 2px;
    }
    .bar-height-bold{
        width: 2px;
    }
        .bar-height-bold.bar-right,
        .bar-height-bold.bar-left{
            bottom: 1px;
        }

        h1.page-title{
            position: fixed;
            left: 33px;
            top: 23px;
            z-index: 10;
        }
            h1.page-title .bar-width{
                height: 2px;
            }
            h1.page-title .bar-height{
                width: 2px;
            }
        .sec h2{
            font-size: 1.5rem;
            font-weight: bold;
            margin-bottom: 0px;
            line-height: 1.8;
            letter-spacing: 0.025em;
        }
    a.btn-text{
        color: #000000;
        font-size: 1.8rem;
        line-height: 1;
        display: inline-block;
        margin: 0 auto;
        position: relative;
        padding: 9px 0px;
        margin-top: 33px;
    }

        a.btn-text .bar-height{
            height: 37px;
        }
#reservation{
    padding-top: 93px;
}

body.home #reservation{
    padding-top: 77px;
}
    #reservation header h1{
        font-size: 2.4rem;
        padding: 12px 0px;
    }
    #reservation .bar-height{
        width: 3px;
        height: 50px;
    }
    #reservation .bar-width{
        height: 3px;
    }
    #reservation .bar-left{
        position: absolute;
        bottom: -1px;
        left: -12px;
    }
    #reservation .bar-right{
        position: absolute;
        bottom: -1px;
        right: -12px;
    }
    #reservation a{
        color: #000000;
    }
/* end-common */

/* start-home */
#concept{
    text-align: center;
    font-weight: bold;
    padding: 40px 0 0px;
}
#concept p{
    margin: 27px 0 0;
    font-size: 1.5rem;
    line-height: 1.8;
    letter-spacing: 0.1em;
}
    body.en-US #concept p{
        letter-spacing: 0.05em;
    }

.news-list{
    font-size: 1.8rem;
    text-align: center;
    margin-bottom: 90px;
}
    .news-list ul{
    }
    .news-list ul li{
        margin-bottom: 30px;
    }
    .news-list ul li:first-child{
        margin-top: 0px;
    }
    .news-list ul li h3{
        font-size: 2.0rem;
        font-weight: normal;
        line-height: 1.5;
    }
    .news-list ul li figure{
        display: block;
        width: 100%;
        max-width: 335px;
        margin: 15px auto 17px;
    }
    .news-list ul li p{
        font-size: 2.0rem;
        line-height: 2;
    }
    .news-list a:link,
    .news-list a:visited{
    }

.news-load.active {
    display:block;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all  0.2s ease-in-out;
}
#news-btn-wrap{
    text-align: center;
    font-size: 2.0rem;
    margin-top: 75px;
}
.home-about{
    margin-bottom: 60px;
}
.shop-info{
    margin-top: 30px;
}
    .shop-info p{
        font-size: 2.0rem;
        margin-bottom: 23px;
        text-align: center;
    }
    .shop-info p.tel{
        margin-bottom: 3px;
    }
    .shop-info p.contact{
        font-size: 1.5rem;
    }

p.home-adr{
    font-size: 2.4rem;
    text-align: center;
}
/* end-home */


/* start-contents */
.contents{
    margin-top: 48px;
}
    .text{
        width: 100%;
        max-width: 648px;
        margin:24px auto 0;
    }
        .sec .text h2{
            margin-top: 48px;
        }
    .text-read{
        margin: 26px auto 37px;
    }
    .text-box{
        margin: 26px auto 0;
    }
        .text-box dl{
            display: flex;
            flex-wrap: wrap;
            font-size: 1.5rem;
        }
        .text-box dl dt{
            padding-right: 24px;
            display: inline-block;
            font-weight: 700;
        }
    .wrap{
        width: 100%;
        max-width: 648px;
        margin: 0px auto 0;
    }
    .box-flex.box-flex-text{
        width: 100%;
        max-width: 648px;
        padding: 0 9px;
    }
        .remarks{
            margin: 55px auto 0;
        }
        .sub-text{
            margin: 35px auto 0;
        }
            .sub-text p{
                font-size: 1.2rem;
                line-height: 1.8;
                letter-spacing: 0.025em;
            }

        .text ul{
            margin: 27px 0 0;
            font-size: 1.5rem;
            line-height: 1.8;
            letter-spacing: 0.025em;
            padding-left: 15px !important;
        }
        .text ul li{
            list-style-type: disc !important;
            overflow: visible !important;
        }
            .text ul:first-child{
                margin-top:0px;
            }
                .sub-text ul{
                    font-size: 1.2rem;
                    line-height: 1.8;
                    letter-spacing: 0.025em;
                }
.slide{
    margin-top: 40px;
}
    .owl-carousel .owl-nav .owl-prev{
        position: absolute;
        overflow: hidden;
        text-indent: 100%;
        width: 100px;
        height: 100%;
        background-color: #FFFFFF;
        opacity: 0.0;
        left: 0;
        top: 0;
        z-index: 9;
    }
    .owl-carousel .owl-nav .owl-next{
        position: absolute;
        overflow: hidden;
        text-indent: 100%;
        width: 100px;
        height: 100%;
        background-color: #FFFFFF;
        opacity: 0.0;
        right: 0;
        top: 0;
        z-index: 9;
    }
    .owl-carousel .owl-nav .owl-prev:hover,
    .owl-carousel .owl-nav .owl-next:hover{
        opacity: 0.6;
        -webkit-transition: all 0.2s ease-in-out;
        -moz-transition: all 0.2s ease-in-out;
        -o-transition: all 0.2s ease-in-out;
        -ms-transition: all 0.2s ease-in-out;
        transition: all  0.2s ease-in-out;
    }
.flexbox{
    display: flex;
    flex-wrap: wrap;
}
    .flexbox-center{
        justify-content: center;
    }
    .flexbox-rv{
        flex-direction: row-reverse;
    }
.flexbox1-2{
    margin-left: -30px;
}
    .flexbox1-2 li{
        margin-left: 30px;
        width : -webkit-calc(50% - 30px) ;
        width : calc(50% - 30px) ;
        margin-top: 60px;
    }
    .flexbox1-2 li:first-child,
    .flexbox1-2 li:nth-child(2){
        margin-top: 0px;
    }
.flexbox1-3{
    margin-left: -20px;
}
    .flexbox1-3 li{
        margin-left: 20px;
        width : -webkit-calc(33.333% - 20px) ;
        width : calc(33.333% - 20px) ;
    }
.inner #sb_instagram{
    margin: 0px;
    padding: 0px !important;
    display: block;
}
.inner #sb_instagram #sbi_images{
    margin:0 0 0 0px;
    display: flex;
    flex-wrap: wrap;
    justify-content:space-between;
    padding: 0 !important;
}

.inner #sb_instagram.sbi_col_3 #sbi_images .sbi_item {
        margin-left: 0px !important;
        width : -webkit-calc(33.3333% - 13.33px) ;
        width : calc(33.3333% - 13.33px) ;
}
.bg-thumbnail{
    background-size: cover;
    background-position: center center;
    padding-bottom: 66.6666%;
}

.box-contetns{
    margin-top: 40px;
}
.box-flex{
    display: flex;
    flex-wrap: wrap;
    align-content:flex-start;
    flex-direction: row;
}
    .box-1-2 li{
        display: block;
        width: 50%;
    }
    .box-1-3 li{
        display: block;
        width: 33.3333%;
    }
.box-flex {
    padding: 0 15px;
    max-width: 810px;
    margin: 0 auto;
}
.box-1-3{
    padding: 0 15px;
    max-width: 660px;
    margin: 0 auto;
}
    .box-flex li{
        padding: 30px 15px 0 15px;
    }
    .box-1-2 li:first-child,
    .box-1-2 li:nth-child(2){
        padding: 0px 15px 0 15px;
    }
    .box-1-3 li:first-child,
    .box-1-3 li:nth-child(2),
    .box-1-3 li:nth-child(3){
        padding: 0px 15px 0 15px;
    }
        .box-flex li img{
            display: block;
        }
    .caption,
    .caption p{
        font-size: 1.2rem;
        line-height: 1.75;
        text-align: justify;
        margin-top: 10px;
    }
    li.menu,
    li.menu p{
        font-size: 1.5rem;
        line-height: 1.8;
        letter-spacing: 0.025em;
        margin: 0px;
    }
    li.menu .text-box p{
        font-size: 1.2rem;
        line-height: 1.8;
        letter-spacing: 0.025em;
        margin: 0px;
        text-align: justify;
    }
    body.en-US .caption,
    body.en-US .caption p,
    body.en-US li.menu .text-box p,
    body.en-US .prof-wrap .prof-text-box .prof-text p {
        text-align: left;
    }
    .list-text li.text-wrap{
        margin-top: 32px;
    }
        .list-text li.text-wrap .sub-text{
            margin-top: 32px;
        }
    .list-text li.text-wrap:first-child{
        margin-top: 0px;
    }
    .prof ul li{
        margin-top: 42px;
        min-height: 180px;
    }
    .prof-wrap{
        position: relative;
    }
        .prof-wrap figure{
            width: 180px;
            position: absolute;
            left: 24px;
            top: 0;
        }
        .prof-wrap .prof-text-box{
            padding-left: 210px;
        }
        .prof-wrap .prof-text-box.prof-text-box-full{
            padding-left: 0px;
        }
        .prof-wrap .prof-text-box h2{
            font-size: 1.5rem;
            line-height: 1.8;
            letter-spacing: 0.025em;
            margin: 0px;
            font-weight: normal;
        }
        .prof-wrap .prof-text-box .prof-text p{
            font-size: 1.2rem;
            line-height: 1.8;
            letter-spacing: 0.025em;
            margin: 0px;
            text-align: justify;
        }
    .access-map{
        width: 100%;
        max-width: 750px;
        margin: 50px auto 0px;
        text-align: center;
    }
        .access-map ul{
            text-align: center;
        }
        .access-map ul li{
            width: 100%;
            max-width: 270px;
            margin: 0 29px;
            display: inline-block;
        }
        #map-wrap-okayama span{
            background-image: url(images/map_okayama_pc.svg);
            background-repeat: no-repeat;
            background-size: cover;
            display: block;
            width: 100%;
            padding-bottom: 252.22%;
            height: 0;
        }
            body.en-US #map-wrap-okayama span{
                background-image: url(images/map_okayama_pc_en.svg);
            }
        #map-wrap-kagawa span{
            background-image: url(images/map_kagawa_pc.svg);
            background-repeat: no-repeat;
            background-size: cover;
            display: block;
            width: 100%;
            padding-bottom: 252.22%;
            height: 0;
        }
            body.en-US #map-wrap-kagawa span{
                background-image: url(images/map_kagawa_pc_en.svg);
            }
            .access-map ul li .bar-top-title{
                display: block;
                width: 100%;
                height: 2px;
                background-color: #b9c3c9;
                -moz-border-radius: 2px;
                -webkit-border-radius: 2px;
                -o-border-radius: 2px;
                -ms-border-radius: 2px;
                margin-bottom: 3px;
            }
            .access-map ul li img{
                width: 100%;
                height: auto;
            }
            .map-wrap{
            }
            .btn-map{
                display: block;
                font-size: 1.5rem;
                color: #929a9f;
                font-weight: bold;
                cursor: pointer;
                margin-top: 5px;
            }

    .text-box-image{
        text-align: center;
    }
    .text-box img{
        width: auto;
        height: auto;
        max-height: 350px;
        max-width: 100%;
    }
    .list-image-text{

    }
    .list-image-text li{
        margin-top: 20px;
    }
        .list-image-text li img{
            display: block;
            width: auto;
            height: auto;
            max-height: 600px;
            max-width: 100%;
            margin: 0 auto;
        }
        .list-image-text li .text-time-wrap{
            font-size: 1.2rem;
            line-height: 1.75;
            margin: 15px 0 35px;
        }
        .text-time-wrap .text{
            width : -webkit-calc(100% - 70px) ;
            width : calc(100% - 70px) ;
            max-width: -webkit-calc(100% - 70px) ;
            max-width: calc(100% - 70px) ;
            margin: 0px 0 0;
        }
        .text-time-wrap .text-full{
            width : -webkit-calc(100% - 0px) ;
            width : calc(100% - 0px) ;
            max-width: -webkit-calc(100% - 0px) ;
            max-width: calc(100% - 0px) ;
            margin: 0px 0 0;
        }
        .text-time-wrap .time{
            width :  70px;
            text-align: right;
        }
    h3.border-top{
        padding-top: 4px;
        font-size: 1.8rem;
        margin:0 15px;
        position: relative;
        display: inline-block;
    }
    h3.border{
        padding: 4px;
        font-size: 1.8rem;
        position: relative;
        display: inline-block;
    }
    h3.border+figure{
        margin-top: 18px;
    }
    .bg-square{
        background-size: cover;
        background-position: center center;
        padding-bottom: 100%;
    }
/* end-contents */


/* start-footer */
.page_nav{
    margin-top: 75px;
    font-size: 1.5rem;
    padding-top: 0px;
    position: relative;
    text-align: center;
}
    .page_nav .prev{
        position: absolute;
        left: 0;
        top: 0;
    }
    .page_nav .next{
        position: absolute;
        right: 0;
        top: 0;
    }
    .page_nav-single .prev{
        position: absolute;
        left: 0;
        top: 0;
    }
    .page_nav-single .next{
        position: absolute;
        right: 0;
        top: 0;
    }

        .page_nav a:link,
        .page_nav a:visited{
        }
        .page_nav a:hover{
        }

#reservation .contents{
    margin-top: 24px;
}
.sns{
    text-align: center;
    font-size: 1.2rem;
    line-height: 1;
}
    .sns li{
        display: inline-block;
        padding: 0 0px;
        text-align: center;
        margin:0 8px;
    }
    .sns li a{
        color: #b9c3c9 !important;
    }
    .sns li a.btn-instagram{
        background-image: url(images/icon-instagram.svg);
        background-repeat: no-repeat;
        background-size: 45px 45px;
        background-position: center top;
        width: 70px;
        display: inline-block;
        padding-top: 54px;
    }
    .sns li a.btn-facebook{
        background-image: url(images/icon-facebook.svg);
        background-repeat: no-repeat;
        background-size: 45px 45px;
        background-position: center top;
        width: 70px;
        display: inline-block;
        padding-top: 54px;
    }

.link-wrap{
    text-align: center;
    margin-top: 36px;
}
    .link-wrap ul li{
        display: inline;
        margin: 0 19px;
        font-size: 1.2rem;
    }
    .link-wrap ul li a.btn-text {
        font-size: 1.2rem;
        padding: 9px 0px;
        margin-top: 0px;
    }
        .link-wrap ul li a.btn-text .bar-height {
            height: 31px;
        }
.footer{
    height:330px;
    width: auto;
    position:absolute;
    bottom:0;
    right: 0;
    left: 0;
}

.footer .inner{
    text-align: center;
    padding-top:100px;
    width: 100%;
}
    small.copyright{
        font-size: 1.2rem;
        line-height: 1;
        display: block;
        margin:50px 0 30px;
    }

.wideslider {
    width: 100%;
    text-align: left;
    position: relative;
    overflow: hidden;
}
 
.wideslider ul,
.wideslider ul li {
    float: left;
    display: inline;
    overflow: hidden;
}
.wideslider_inner{
    padding: 0 15px;
}
 
.wideslider ul li img {
    width: 100%;
    display: none;
}
 
.wideslider_base {
    top: 0;
    position: absolute;
}
.wideslider_wrap {
    top: 0;
    position: absolute;
    overflow: hidden;
 
}
.slider_prev,
.slider_next {
    top: 0;
    overflow: hidden;
    position: absolute;
    z-index:  10;
    cursor: pointer;
}
.slider_prev {background: #fff url(../img/prev.jpg) no-repeat right center;}
.slider_next {background: #fff url(../img/next.jpg) no-repeat left center;}
 
.pagination {
    bottom: 10px;
    left: 0;
    width: 100%;
    height: 15px;
    text-align: center;
    position: absolute;
    z-index: 200;
}
 
.pagination a {
    margin: 0 5px;
    width: 15px;
    height: 15px;
    display: inline-block;
    overflow: hidden;
    background: #333;
}
.pagination a.active {
    filter:alpha(opacity=100)!important;
    -moz-opacity: 1!important;
    opacity: 1!important;
}
 
 
/* =======================================
    ClearFixElements
======================================= */
.wideslider ul:after {
    content: ".";
    height: 0;
    clear: both;
    display: block;
    visibility: hidden;
}
 
.wideslider ul {
    display: inline-block;
    overflow: hidden;
}

.mainvisual {
    overflow: hidden;
    position: relative;
}
/**
 * 最大幅の指定と中央寄せ
 */
.container {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  max-width: 750px;
  overflow: visible;
}
    .mainvisual .swiper-slide-bg{
        width: 100%;
        padding-bottom: 66.666%;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }
    .mainvisual-photobook .swiper-slide-bg{
        padding-bottom: 71.416666666%;
    }
.home-mainvisual .container {
  max-width: 900px;
}
    .home-mainvisual .swiper-slide-bg{
        width: 100%;
        padding-bottom: 66.666%;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }
/**
 * swiper.js
 */


.container .swiper-container,
.container .swiper-container2 {
  width: 100%;
  height: 100%;
  overflow: visible !important;
  z-index: 1;
}

.mainvisual .swiper-button-prev,
.mainvisual .swiper-button-next,
.mainvisual .swiper-button-prev2,
.mainvisual .swiper-button-next2,
.mainvisual .swiper-button-prev-inner,
.mainvisual .swiper-button-next-inner {
  fill: #fff;
  stroke: none;
  stroke-width: 0;
  z-index: 10000;
  height: 510px;
  width : -webkit-calc(50% - 375px) ;
  width : calc(50% - 375px) ;
  margin-top: 0px;
  background-image: none !important;
  cursor: pointer;
}
    .home-mainvisual .swiper-button-prev,
    .home-mainvisual .swiper-button-next,
    .home-mainvisual .swiper-button-prev2,
    .home-mainvisual .swiper-button-next2 {
      height: 600px;
      width : -webkit-calc(50% - 450px) ;
      width : calc(50% - 450px) ;
    }
.mainvisual .swiper-button-prev,
.mainvisual .swiper-button-prev2,
.mainvisual .swiper-button-prev-inner{
    background-image: url(images/arrow-left.svg) !important;
    background-repeat: no-repeat;
    background-size: 30px auto;
    background-position: left 15px center;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
}
.mainvisual .swiper-button-next,
.mainvisual .swiper-button-next2,
.mainvisual .swiper-button-next-inner{
    background-image: url(images/arrow-right.svg) !important;
    background-repeat: no-repeat;
    background-size: 30px auto;
    background-position: right 15px center;
    position: absolute;
    right: 0;
    top: 0;
    opacity: 0;
}
.mainvisual .swiper-button-prev:hover,
.mainvisual .swiper-button-prev2:hover,
.mainvisual .swiper-button-next:hover,
.mainvisual .swiper-button-next2{
    opacity: 1;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all  0.2s ease-in-out;
}


.swiper-pagination-bullet-active {
  background: #fff;
}
.swiper-pagination{
    opacity: 0;
}
.swiper-slide{
}
.swiper-slide img{
    width: 100%;
    height: auto;
}
.swiper-container2 {
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    list-prev-style: none;
    padding: 0;
    z-index: 1;
}
#reservation .contents br,
.reservation .contents br{
    display: none;
}
#reservation .contents .pc-only,
.reservation .contents .pc-only{
    display: inline !important;
}

/*===============================================
breakpoint:780
===============================================*/
@media screen and (max-width: 780px){
    .pc-only{
        display: none;
    }
    .smp-only{
        display: block !important;
    }

    #map-list-okayama,
    #map-list1-takayama{
        padding-top: 15px;
    }
        .map-wrap{
            display: none;
        }

    #container {
        padding: 15px 0px 255px;
    }
    #header h1.logo, #header .logo {
        width: 170px;
        height: auto;
        margin: 0px auto 0;
    }
        .menu-trigger {
            position: fixed;
            display: block;
            width: 25px;
            height: 20px;
            right: 14px;
            top: 14px;
            z-index: 12;
        }
        .menu-trigger span:nth-of-type(2) {
            top: 9px;
        }
        body.home #header h1.logo{
            width: 170px;
            margin-top: 32px;
        }
    .image-crossfader {
        margin-top: 25px;
    }
    #concept {
        padding: 57px 0 0px;
    }

    #concept p {
        margin: 31px 0 0;
        line-height: 1.8;
    }
    #concept p:first-child{
        margin: 0px 0 0;
    }
    body.home #reservation {
        padding-top: 52px;
    }

    h1.page-title {
        position: relative;
        left: auto;
        top: auto;
        z-index: 10;
        display: inline-block;
    }
    #container.artfest-informarion h1.page-title {
        top: auto;
    }
    .title-wrap{
        text-align: center;
        position: relative;
        width: 100%;
        margin: 47px 0 38px;
    }

    .page-nav-fix {
        position: relative;
        top: auto;
        margin-top: 0px;
    }
        .is-fixed {
            position: relative;
            top: auto;
        }
            .page-nav-fix ul li {
                margin-top: 0px;
                margin-bottom: 11px;
            }
    #main.main-home {
        padding: 0px 0 0;
    }
    #main.main-page {
        padding: 0px 0 0;
    }
    .sec {
        padding-top: 52px;
    }
        .sec-child {
            margin-top: 30px;
        }
    #slide {
        padding-top: 30px;
    }
    #main.main-page .sec:first-child{
        padding-top: 0px;
        padding-bottom: 17px;
    }
    #main.main-page .sec:first-child .slide{
        margin-top: 13px;
    }

        .mainvisual .swiper-button-next,
        .mainvisual .swiper-button-next2,
        .mainvisual .swiper-button-next-inner{
          fill: #fff;
          stroke: none;
          stroke-width: 0;
          z-index:10;
          height: 66.666vw;
          width :100vw;
          margin-top: 0px;
          background-image: none !important;
          cursor: pointer;
        }
        .mainvisual .swiper-button-prev,
        .mainvisual .swiper-button-prev2,
        .mainvisual .swiper-button-prev-inner{
          width: 0%;
          height: 0;
        }
        .mainvisual .swiper-button-next:hover,
        .mainvisual .swiper-button-next2:hover,
        .mainvisual .swiper-button-next-inner:hover{
            background-image: none !important;
        }
    .swiper-pagination,
    .swiper-pagination2,
    .swiper-pagination-inner{
        width: 100%;
        margin-top: 10px;
        text-align: center;
        display: block;
        opacity: 1;
        height: 12px;
    }
        .swiper-pagination .swiper-pagination-bullet,
        .swiper-pagination2 .swiper-pagination-bullet ,
        .swiper-pagination-inner .swiper-pagination-bullet{
            width: 6px;
            height: 6px;
            display: inline-block;
            border-radius: 100%;
            background: #B9C3C9;
            opacity: 1;
            margin: 0 9px;
        }
        .swiper-pagination .swiper-pagination-bullet-active,
        .swiper-pagination2 .swiper-pagination-bullet-active,
        .swiper-pagination-inner .swiper-pagination-bullet-active {
            opacity: 1;
            background: #000000;
            border-radius: 100%;
        }
    .inner {
        padding: 0 30px;
    }
    .slide {
        margin-top: 25px;
        position: relative;
    }
    .slide-s .container {
        max-width: -webkit-calc(100vw - 60px) ;
        max-width: calc(100vw - 60px) ;
    }

    body.home .slide {
        margin-top: 0px;
    }
    .box-contetns {
        margin-top: 25px;
    }

    .box-1-2 li:first-child{
        padding: 0px 15px 0 15px;
    }
    .box-1-2 li:nth-child(2),
    .box-flex li {
        padding: 25px 15px 0 15px;
    }
    .box-1-2 li {
        width: 100%;
    }
    .remarks {
        margin: 25px auto 0;
    }

    .prof ul li {
        margin-top: 25px;
    }
    .prof-wrap figure {
        width: 50%;
        max-width: 158px;
        position: relative;
        left: auto;
        top:auto;
        margin-bottom: 9px;
    }
    .prof-wrap .prof-text-box {
        padding-left: 0px;
    }
    .sub-text {
        margin: 20px auto 0;
    }

    .access-map ul li {
        width: 100%;
        max-width: 980px;
        margin: 0 0px;
        display: block;
        padding: 15px 30px 0;
    }
        #map-wrap-okayama span{
            background-image: url(images/map_okayama_smp.svg);
            background-repeat: no-repeat;
            background-size: cover;
            display: block;
            width: 100%;
            padding-bottom: 232.22%;
            height: 0;
        }
            body.en-US #map-wrap-okayama span{
                background-image: url(images/map_okayama_smp_en.svg);
            }
        #map-wrap-kagawa span{
            background-image: url(images/map_kagawa_smp.svg);
            background-repeat: no-repeat;
            background-size: cover;
            display: block;
            width: 100%;
            padding-bottom: 232.22%;
            height: 0;
        }
            body.en-US #map-wrap-kagawa span{
                background-image: url(images/map_kagawa_smp_en.svg);
            }
    .map-wrap {
        margin: 21px 0 0;
    }
    .text-child{
        margin-top: 18px;
    }

    .section-header,
    .sec-header,
    .sec header{
        margin-bottom: 29px;
    }
    .sec-header-read{
        margin: 25px 0 17.5px;
        font-size: 1.2rem;
    }
    body.en-US .section-header_smp_line2{
        padding: 0 39px;
    }
        body.en-US .section-header_smp_line2 h1{
            line-height: 1.5 !important;
        }
        body.en-US .section-header_smp_line2 .bar-height {
            height: 73px;
        }
    .contents {
        margin-top: 25px;
    }
    .list-text li.text-wrap,
    .list-text li.text-wrap .sub-text {
        margin-top: 19px;
    }
    .list-image-text li {
        margin-top: 15px;
    }
        .list-image-text li img {
            max-height:-webkit-calc(100vw - 30px) ;\
            max-height:calc(100vw - 30px) ;
        }
    .flexbox-small-block{
        display: block;
    }
        .list-image-text li .text-time-wrap {
            line-height: 1.8;
            margin: 5px 0 17.5px;
        }
        .text-time-wrap .time {
            width: 100%;
            text-align: left;
        }
        .text-time-wrap .text {
            width: 100%;
            max-width:100%;
        }
    .flexbox1-2-small-block{
        margin-left: 0;
        width: 100%;
    }
    .flexbox1-2-small-block li{
        margin-left: 0;
        width: 100%;
    }
    .flexbox1-2 li:first-child{
        margin-top: 0px;
    }
    .flexbox1-2 li,
    .flexbox1-2 li:nth-child(2) {
        margin-top: 35px;
    }
    #instagram .inner-full {
        padding: 0 15px;
    }
    .flexbox1-3{
        margin-left: -15px;
    }
        .flexbox1-3 li{
            margin-left: 15px;
            width : -webkit-calc(33.333% - 15px) ;
            width : calc(33.333% - 15px) ;
        }

        .inner #sb_instagram #sbi_images{
            margin:0 0 0 0px;
            display: flex;
            flex-wrap: wrap;
            justify-content:space-between;
            padding: 0 !important;
        }

        .inner #sb_instagram.sbi_col_3 #sbi_images .sbi_item {
                margin-left: 0px !important;
                width : -webkit-calc(33.3333% - 10px) ;
                width : calc(33.3333% - 10px) ;
}

        .inner .sbi_photo{
            height: 0 !important;
            padding-bottom: 100% !important;
        }
    #reservation {
        padding-top: 52px;
    }


    #reservation .contents br,
    .reservation .contents br{
        display: block;
    }
    #reservation .contents .pc-only,
    .reservation .contents .pc-only{
        display: none !important;
    }
    .footer {
        height: 255px;
    }
    .footer .inner {
        padding-top:54px;
        width: 100%;
    }
        .sns li a.btn-instagram,
        .sns li a.btn-facebook{
            width: 75px;
        }
            .sns li {
                margin: 0 0px;
            }
        .link-wrap ul li {
            display: inline;
            margin: 0 13px;
            font-size: 1.8rem;
        }
    small.copyright {
        margin: 23px 0 0px;
    }

    .smp-nav .logo {
        width: 127px;
        top: 17px;
        left: 50%;
        margin-left: -64px;
    }
    .menu-trigger.active {
        width: 17px;
        height: 17px;
        right: 15px;
        top: 16px;
    }
    .menu-trigger.active span {
        width: 20px;
    }
    .menu-trigger.active span:nth-of-type(1) {
        -webkit-transform: translateY(8px) translateX(-0px) rotate(-45deg);
        transform: translateY(8px) translateX(-0px) rotate(-45deg);
        background-color: #FFFFFF;
    }
    .menu-trigger.active span:nth-of-type(3) {
        -webkit-transform: translateY(-7px) translateX(-0px) rotate(45deg);
        transform: translateY(-7px) translateX(-0px) rotate(45deg);
        background-color: #FFFFFF;
    }

    .smp-nav .smp-nav-list {
        padding-top: 98px;
        font-size: 2.1rem;
        overflow: scroll;
    }
        .smp-nav-list ul li a {
            padding-top: 8px;
        }
    .smp-nav-list .reservation {
        margin: 40px 0 29px;
    }
    .smp-nav-list .contents {
        margin-top: 32px;
    }
    .smp-nav .link-wrap {
        margin-bottom: 32px;
    }
    .arrow-bottom{
        opacity: 0 !important;
    }
    #page-top{
        width: 20px;
        height: auto;
        position: fixed;
        bottom:60px;
        right: 30px;
        z-index: 100;
    }
}
/*===============================================
breakpoint:320
===============================================*/
@media screen and (max-width: 320px){

}