@charset "UTF-8";

/* 共通部分
------------------------------- */
html {
    font-size: 100%;
}
body{
    font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif;
    line-height: 1.7;
    color: #432;
}
a {
    text-decoration: none;
}
img {
    max-width: 100%;
    }



/* HEADER
------------------------------- */
.page-header {
    display: flex;
    justify-content: space-between;
}
.logo {
    width: 210px;
    margin-top: 14px;
    position: relative;z-index: auto;
}
.main-nav {
    display: flex;
    font-size: 1.25rem;
    text-transform: uppercase;
    margin-top: 34px;
    list-style: none;
    position: relative;z-index: 11;
}
.main-nav li {
    margin-left: 36px;
    color: #fff;
}
.main-nav li ul{
  list-style: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin: 0;
  padding: 0;
}
/*子階層以降共通*/
.main-nav li li {
    height: 0;
    overflow: hidden;
    transition: .5s;
}
.main-nav li li a {
    border-top: 1px solid #eee;
}
.main-nav li:hover > ul > li {
    height: 2rem;
    overflow: visible;
    background-color:darkgray;
}

.main-nav a {
    color: #fff;
}
.main-nav a:hover {
    color: #0bd;
}
.wrapper {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 4%;
    position: relative;z-index: auto;
}
.sns-icon img {
    min-width:25px;
    vertical-align: middle;
}
/* 大きな背景画像 */
.big-bg {
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    position:relative; 
    min-height: 100%;
    
}
#tjp  {
    background-color: #FEE101;
}
#tjp .main-nav a {
    color:#000;
}
#tjp a:hover {
    color: #0bd;
}
#tjp .main-nav li {
    margin-left: 36px;
    color: #000;
}
/* --- 背景の指定 ------------------------------------------- */
.big-bg .bgImg {
  position   : absolute; 
  background-size: 100%;
  top        : 0;
  left       : 0;
  bottom     : 0;
  right      : 0;
  opacity    : 0;
  animation  : bgAnime 20s infinite;   /* 4画像 × 各5s = 20s */

}

/* --- 段差で背景画像のアニメーションを実行 ----------------- */
.big-bg .src1 {
  background-image : url(../images/main-bg.jpg);   /* 背景の画像を指定 */
　opacity: 0.5;
  min-height: 100vh;
　    }
.big-bg .src2 {
  background-image : url(../images/main-bg2.jpg);   /* 背景の画像を指定 */
  animation-delay  : 5s;
    min-height: 100vh;
  }
.big-bg .src3 {
  background-image : url(../images/main-bg3.jpg);   /* 背景の画像を指定 */
  animation-delay  : 10s;
    min-height: 100vh;
  }
.big-bg .src4 {
  background-image : url(../images/main-bg4.jpg);   /* 背景の画像を指定 */
  animation-delay  : 15s;
  min-height: 100vh;
  }

@keyframes bgAnime {
   0% { opacity: 0; }
   5% { opacity: 1; }
  25% { opacity: 1; }
  30% { opacity: 0; }
 100% { opacity: 0; }
}
/* HOME
------------------------------*/
.home-content {
    text-align: center;
    margin-top: 10%;
    position: relative;
    
}
.home-content p {
    font-size: 1.125rem;
    color: #fff;
}
/*covid
-----------------------------*/
.covid {
    text-align: center;
    padding: 10% 10% 30px;
    margin-top: 20%;
    font-size: 20px;
    color: red;
}
.covid2 {
    text-align: center;
    padding: 10% 10% 30px;
    color: red;
}
/*stop
-----------------------------*/
.stop {
    text-align: center;
}
.stop-backg {
    position: relative;
    background-image: url("../images/stop-banner.jpg");
    background-size:100%;
}
/*stop-keyvisual
-----------------------------*/
.stop-keyvisual {
    position:relative;
    background-image: url("../images/stop-background.jpg");
    background-size: 100%;
    min-height: 700px;
}
/*見出し
-----------------------------*/
.page-title {
    font-size: 5vh;
    font-family: 'philosopher',serif;
    text-transform:uppercase;
    font-weight: normal;
    color: #fff;
    }
/* COMPANY
------------------------------*/
.company-content {
    text-align: center;
    margin-top: 20%;
    padding-top: 10%;
    position: relative;
    }
.company-content h2 {
    font-size: 2rem;
}
/*
.company-content h3 {
    padding-top: 15px;
}
*/
.company-content p {
    font-size: 1.125rem;
    margin: 10px 28% 42px;
    max-width: 70%;
	padding-bottom: 5px;
     }
.bgg {
    background-image: url("../images/company-miura.jpg");
	background-position: right;
}
.bg-mask {
  height: 100%;
  background: rgba(255,255,255,0.5);
}
.bg-mask2 {
  height: 100%;
  background: rgba(255,255,255,0.2);
}
/* アトリエ公演
------------------------------- */
.atelier-content {
    text-align: center;
    margin-top: 1%;
    position: relative;   
}
.atelier-background {
   /* background-image: url(../images/atelier-background.jpg)*/
}
.atelier-content p {
    font-size: 1.125rem;
    margin: 10px 0 42px;
}
.products {
    text-align: center;
    margin: 5% 20%; 
    position: relative;
    padding:20px; 
}
.bl-products {
    margin-bottom: 20px;
}
.products-comment {
    padding: 5px;
    width: 100%;
    background: #fff;
    font-size: 20px;
	border: solid;
}
.products-comment p {
    margin: 1%;
}
.products-comment h4 {
    font-family:fantasy;
    text-align: center;
    border-bottom: solid;
    font-size: 2.5vmin;   
}
.atelier-photo {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fit,minmax(240px, 1fr));
    border: solid;
}
/* 本公演
------------------------------- */
#tjp .page-title {
    font-size: 5vh;
    font-family: 'philosopher',serif;
    text-transform:uppercase;
    font-weight: normal;
    color: #000;
    }
.tjp-content {
    text-align: center;
    margin-top: 1%;
    position: relative;
    padding-bottom: 15px;
}
.tjp-content p {
    font-size: 1.125rem;
    margin: 10px 0 0px;
    color: #000;
}
.works {
    text-align: center;
    position: relative;
    font-family:serif;
    line-height: 1.125
}
.works h3 {
    font-size: 7vh;
    color:#fff;
    padding-top: 5%;
}
.works h3 span{
    font-size: 4vh;
    color:#fff;
    padding-top: 5%;
}
.donq {
    background-image: url(../images/donq.jpg);
    width: 100%;
    height: 400px;
    background-position: center;
    position: relative;z-index: 12;
}
.an {
    background-image: url(../images/an.jpg);
    width: 100%;
    height: 400px;
    background-position: center;
    position: relative;z-index: 12;
}
.bps {
    background-image: url(../images/bps.jpg);
    width: 100%;
    height: 400px;
    background-position: center;
    position: relative;z-index: 12;
}
.hih {
    background-image: url(../images/hih.jpg);
    width: 100%;
    height: 400px;
    background-position: center;
    position: relative;z-index: 12;
}
.inochi {
    background-image: url(../images/inochi.jpg);
    width: 100%;
    height: 400px;
    background-position: center;
    position: relative;z-index: 12;
}
.heart {
     background-image: url(../images/heart.jpg);
    width: 100%;
    height: 400px;
    background-position: center;
    position: relative;z-index: 12;
}
.minoes {
     background-image: url(../images/minoes.jpg);
    width: 100%;
    height: 400px;
    background-position: center;
    position: relative;z-index: 12;
}
.auction {
     background-image: url(../images/auction.jpg);
    width: 100%;
    height: 400px;
    background-position: center;
    position: relative;z-index: 12;
}
.holst {
     background-image: url(../images/holst/holst-baner.jpg);
    width: 100%;
    height: 400px;
    background-position: center;
    background-size: 100%;
    position: relative;z-index: 12;
}
.bancho {
    background-image: url(../images/bancho.jpg);
    width: 100%;
    height: 400px;
    background-position: center;
    position: relative;z-index: 12;
}
.tjp-intro {
    text-align: center;
    vertical-align: middle;
}
.tjp-intro h2 {
    text-align: center;
    margin: 20px;
}
.tjp-intro h3 {
    text-align: center;
    font-size: 3.5vh;
    margin: 30px 0;
}
.tjp-grid {
    display: grid;
    grid-gap: 0px;
    grid-template-columns: repeat(2,1fr);
}
/* donq
--------------------------------------------*/
.donq-comment {
    padding-top: 10%;
    font-family: serif;
    font-size: 2.3vh;
}
.gallery-donq {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(240px, 1fr));
    grid-gap: 10px
}
.gallery-donq img {
    border-radius:40px;
}
/* hih
-------------------------------------------*/
.hih-comment {
    padding-top: 10%;
    font-family:cursive;
    font-size: 2.3vh;
}
.hih-comment2 {
    text-align: center;
    margin: 50px 0 100px 0px;
}
.gallery-hih {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(240px, 1fr));
    grid-gap: 10px
}
.gallery-hih img {
    border-radius:40px;
}
/* an
-------------------------------------------*/
.an-comment {
    padding-top: 10%;
    font-family:cursive;
    font-size: 2.3vh;
}
.an-comment2 {
    text-align: center;
    margin: 50px 0 100px 0px;
    font-size: 3vh;
}
.an-comment3 {
    margin-bottom: 5%;
    font-family:cursive;
    font-size: 2.3vh;
}
.gallery-an {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(240px, 1fr));
    grid-gap: 10px
}
.gallery-an img {
    border-radius:40px;
}
/* inochi
-------------------------------------------*/
.inochi-comment {
    padding-top: 10%;
    font-family:cursive;
    font-size: 2.3vh;
}
.inochi-comment2 {
    text-align: center;
    margin: 50px 0 100px 0px;
    font-size: 3vh;
}
.inochi-comment3 {
    padding: 5%;
    font-size: 2.3vh;
}
.gallery-inochi {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(240px, 1fr));
    grid-gap: 10px
}
.gallery-inochi img {
    border-radius:40px;
}
.gallery2-inochi {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(240px, 1fr));
    grid-gap: 10px
}
.gallery2-inochi img {
    border-radius:40px;
}
/* heart
-------------------------------------------*/
.heart-comment {
    padding-top: 10%;
    font-family:cursive;
    font-size: 2.3vh;
}
.gallery-heart {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(240px, 1fr));
    grid-gap: 10px
}
.gallery-heart img {
    border-radius:40px;
}
/* minoes
-------------------------------------------*/
.minoes-comment {
    padding:10% 2%;
    font-family:cursive;
    font-size: 2.3vh;
    vertical-align: middle;
}
.gallery-minoes {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(240px, 1fr));
    grid-gap: 10px
}
.gallery-minoes img {
    border-radius:40px;
}
/* auction
-------------------------------------------*/
.auction-comment {
    padding-top: 10%;
    font-family:cursive;
    font-size: 2.3vh;
}
.auction-comment2 {
    text-align: center;
    margin: 50px 15px 100px ;
    font-size: 3vh;
}
.auction-comment3 {
    margin:0 10% 5%;
    font-family:cursive;
    font-size: 2.2vh;
}
.auction-comment4 {
    text-align: center;
    margin-bottom: 10px;
    font-size: 3.5vh;
    border-bottom: solid;
}
.gallery-auction {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(240px, 1fr));
    grid-gap: 10px
}
.gallery-auction img {
    border-radius:40px;
}
/* blueplate
-------------------------------------------*/
.blueplate-comment {
    padding-top: 10%;
    font-family:cursive;
    font-size: 2.3vh;
}
.blueplate-comment2 {
    text-align: center;
    margin: 50px 15px 100px ;
    font-size: 3vh;
}
/* holst 
-------------------------------------------*/
.holst-comment {
    padding: 5% 1%;
    font-family:cursive;
    font-size: 2.3vh;
}
.gallery-holst {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(150px, 1fr));
    grid-gap: 10px
}
/* bancho
-------------------------------------------*/
.bancho-comment {
    padding-top: 10%;
    font-family:cursive;
    font-size: 2.3vh;
}
.bancho-comment2 {
    text-align: center;
    margin: 50px 15px 100px ;
    font-size: 3vh;
}
/* art-app
------------------------------- */
    
/* 
--- 背景の指定 -------------------- */
.art-app-bg .bgImg {
  position   : absolute;
  background-size: 100%;
  top        : 0;
  left       : 0;
  bottom     : 0;
  right      : 0;
  opacity    : 0;
  animation  : bgAnime 20s infinite;   /* 4画像 × 各5s = 20s */
  
}

/* --- 段差で背景画像のアニメーションを実行 ----------------- */
.art-app-bg .src1 {
  background-image : url("../images/art-app/art-app-bg01.jpg");   /* 背景の画像を指定 */
　opacity: 0.5;
  min-height: 100vh;
  }
.art-app-bg .src2 {
  background-image : url(../images/art-app/art-app-bg02.jpg);   /* 背景の画像を指定 */
  animation-delay  : 5s;
    min-height: 100vh;
  }
.art-app-bg .src3 {
  background-image : url(../images/art-app/art-app-bg03.jpg);   /* 背景の画像を指定 */
  animation-delay  : 10s;
  min-height: 100vh;
  }
.art-app-bg .src4 {
  background-image : url(../images/art-app/art-app-bg04.jpg);   /* 背景の画像を指定 */
  animation-delay  : 15s;
  min-height: 100vh;
  }
@keyframes bgAnime {
   0% { opacity: 0; }
   5% { opacity: 1; }
  25% { opacity: 1; }
  30% { opacity: 0; }
 100% { opacity: 0; }
}
.art-app-content {
    text-align: center;
    margin-top: 10%; 
    position: relative;
    }
.art-app-content h2 {
    font-size: 3rem;
}
.art-app-content h3 {
    padding-top: 15px;
}
.art-app-content p {
    font-size: 1.125rem;
    margin: 10px 18% 42px;
    max-width: 70%;
	padding-bottom: 5px;
	color: #fff;
}
.art-app-works {
    text-align: center;
    margin-top: 25%; 
    position: relative;
	padding: 0 5%;
    }
.art-app-works h3 {
	padding: 5px;
	
	font-size: 4vh;
} 
.art-app-works h4 {
    font-size: 3vh;
    margin: 15px 18% 10px;
	padding-bottom: 5px;
	font-family: "uncial-antiqua";
}
.art-app-works figure {
	margin:10px 15%;
	display: flex;
	flex-wrap: wrap;
    padding-bottom: 10px;
}
.art-app-works img {
	padding: 10px;
    max-width: 300px; 
}
.art-app-content2 {
    text-align: center;
    margin-top: 10%; 
    position: relative;
    }
.art-app-content2 h2 {
    font-size: 2rem;
}
.art-app-content2 h3 {
    padding-top: 15px;
}
.art-app-content2 p {
    font-size: 1.125rem;
    margin: 10px 28% 42px;
    max-width: 70%;
	padding-bottom: 5px;
     }
/* ACTIVITY
------------------------------- */
.activity {
    text-align: center;
    margin: 10px 10%;
    position: relative;
    }
.activity p {
    font-size: 1.125rem;
    margin: 10px 25% 42px;
    max-width: 70%;
}

.activity-box {
    display:grid;
    grid-gap: 20px;
    grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
    grid-template-rows: repeat(auto-fit,minmax(300px));
}
.activity-box a:hover {
    opacity: 0.7;
}

.atelier  { 
    background-image: url(../images/active-img.jpg);
    background-size: 100%;
    border-radius: 10px;
    padding-top:10px;
    color: aliceblue;
    font-size:2.5vh;
    min-height: 250px;
    }


.TJperformance {
    background-image: url(../images/active-img3.jpg);
    background-size: 100%;
    border-radius: 10px;
    padding-top:10px;
    color: aliceblue;
    font-size:2.5vh;
    min-height: 250px;
}
.family-m {
    background-image: url(../images/active-img2.jpg);
    background-size: 100%;
    border-radius: 10px;
    padding-top:10px;
	color:aliceblue;
    font-size:2.8vh;
    min-height: 250px;
}
.art-appreciationr{
    background-image: url(../images/active-img4.jpg);
    background-size: 100%;
    border-radius: 10px;
    padding-top:10px;
    color: aliceblue;
    font-size:2.5vh;
    min-height: 250px;
}
/* FAMILY
------------------------------*/
.family-content {
    text-align: center;
    margin-top: 1%;
    position: relative;   
}
.bl-family-content0 {
    text-align: center;
    margin: 3% 1%;
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(300px, 1fr));
    grid-gap: 10px    
}
.bl-family-content0 p {
    margin-top: 30%;
    vertical-align: middle;    
}
.bl-family-content {
    text-align: center;
    margin-top: 3%;
    position: relative;   
}
.family-comment p {
    font-size: 2vh;   
}
.family-comment2 p {
    font-size: 25px;   
}
.family-works {
    margin-bottom: 30px;
    padding: 5% 10%;
}
 .family-works2 {
    margin-bottom: 30px;
    padding: 5% 10%;
}
.family-works h3{
    font-size: 3vh;
    margin: 3% 0px;
    text-align: center
}
.family-works2 h3{
    font-size: 3vh;
    margin: 3% 0px;
    text-align: center
}
.family-title h4 {
    font-size: 20px;
    text-align: center;
}
.bl-family-content .family-comment2 {
    border: solid;
    padding: 10px;
    margin: auto;
}
.family-musical {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(330px,1fr));
    grid-gap: 80px;    
}
.bl-family-works p {
    text-align: ;
}
/* COMPANY
------------------------------- */
.company-table {
    padding: 20px;
}
.whats-tj {
    padding: 20px;
}
.company-policy {
  padding: 20px;  
}
.miura-comment {
   padding: 20px; 
}
.natsu {
   padding: 20px; 
}
.achievement {
   padding: 20px; 
}
/* CONTACT
------------------------------- */
#contact {
    background-image: url(../images/contact-bg.jpg);
    min-height: 100vh;
    color: #FFF;
}

/* フォーム */
form div {
    margin-bottom: 14px;
}
label {
    font-size: 1.125rem;
    margin-bottom: 10px;
    display: block;
}
input[type="text"],
input[type="email"],
textarea {
    background: rgba(255,255,255,.5);
    border: 1px #fff solid;
    border-radius: 5px;
    padding: 10px;
    font-size: 1rem;
}
input[type="text"],
input[type="email"] {
    width: 100%;
    max-width: 240px;
}
textarea {
    width: 100%;
    max-width: 480px;
    height: 6rem;
}
input[type="submit"] {
    border: none;
    cursor: pointer;
    line-height: 1;
}

/* 店舗情報・地図 */
#location {
    padding: 4% 0;
}
#location .wrapper {
    display: flex;
    justify-content: space-between;
}
.location-info {
    width: 22%;
}
.location-info p {
    padding: 12px 10px;
}
.location-map {
    width: 74%;
}

/* SNS */
#sns {
    background: #FAF7F0;
    padding: 4% 10%;
    
}
#sns .wrapper {
    display: flex;
    justify-content: space-between;
}
#sns .sub-title {
    margin-bottom: 30px;
}
.sns-box {
    width: 30%;
    }

/* フッター
------------------------------- */
footer {
    background-color: #FEE101;
    opacity: 0.8;
    text-align: center;
    padding: 26px 0;
}
footer p {
        font-size: 0.875rem;
}
footer a {
    color: #000;
}
    /* 上に戻るボタン */
.pagetop {
    margin-bottom: 200px;
	color: #FFF;
	background-color: #000;
	text-decoration: none;
	display: none;
	position: fixed;
	bottom: 1rem;
	right: 1rem;
	font-size: 1.5rem;
	width: 3.3rem;
	height: 3.3rem;
	line-height: 3.3rem;
	border-radius: 3.3rem;
	text-align: center;
	cursor: pointer;
    }
.pagetop:hover {
	color: #fff !important;
	background-color: #ed702b;
	text-decoration: none;
    }
/* Sitemap
------------------------------- */
.sitemap {
    padding: 30px;
}
.sitemap a {
    color: #000;
}
.sitemap a:hover {
    color:cornflowerblue;
}
/* モバイル版
------------------------------- */
@media (max-width: 600px) {
    .page-title {
        font-size: 3rem;
    }
    .page-header {
        flex-direction: column;
        align-items: center;
    }
    .big-bg .bgImg {
  position   : absolute;
  background-size: 120%;
  top        : 0;
  left       : 0;
  bottom     : 0;
  right      : 0;
  opacity    : 0;
  animation  : bgAnime 20s infinite;   /* 4画像 × 各5s = 20s */ 
}
 /* --- 段差で背景画像のアニメーションを実行 ----------------- */
.big-bg .src1 {
  background-image : url(../images/main-bg.jpg);   /* 背景の画像を指定 */
　opacity: 0.5;
  min-height: 100vh;
　    }
.big-bg .src2 {
  background-image : url(../images/main-bg2.jpg);   /* 背景の画像を指定 */
  animation-delay  : 5s;
    min-height: 100vh;
  }
.big-bg .src3 {
  background-image : url(../images/main-bg3.jpg);   /* 背景の画像を指定 */
  animation-delay  : 10s;
    min-height: 100vh;
  }
.big-bg .src4 {
  background-image : url(../images/main-bg4.jpg);   /* 背景の画像を指定 */
  animation-delay  : 15s;
  min-height: 100vh;
  }

@keyframes bgAnime {
   0% { opacity: 0; }
   5% { opacity: 1; }
  25% { opacity: 1; }
  30% { opacity: 0; }
 100% { opacity: 0; }
}
    /* HEADER */
    .main-nav {
        font-size: 80%;
        margin-top: 10px;
    }
    .main-nav li {
        margin: 0 20px;
    }
    .logo {
    width: 100px;
    margin-top: 14px;
    position: relative;z-index: auto;
}

    /* HOME */
    .home-content {
        margin-top: 0%;
           }
    .home-content p {
        font-size: 0.9rem;
    }
    .big-bg {
    background-position: center;
}
    .works h3{
        padding-top: 30%;
    }
    /* conpany  */
    .company-content p {
    font-size: 1.125rem;
    margin: 10px 10% 42px;
    max-width: 80%;
	padding-bottom: 5px;
     }
    /* activity  */
    .activity p {
    font-size: 1.125rem;
    margin: 10px 10% 42px;
    max-width: 80%;
    }
	/* art-app */
	    /* HOME */
    .art-app-content {
        margin-top: 0%;
    }
	.art-app-content h2 {
		font-size:3vh;
	}
    .art-app-content p {
        font-size: 0.9rem;
    }
	.art-app-content2 {
        margin-top: 0%;
           }
    .art-app-content2 p {
		margin: 10px 15% 42px;
        font-size: 0.9rem;
    }
        /* atelier  */
    .products {
    text-align: center;
    margin: 5%; 
    position: relative;
    }
    .products h4 {
        font-size: 25px
    }
    .products-comment p {
        font-size: 18px;
    }
    /* FAMILY */
    .family-comment p {
    font-size: 15px;   
    }
    .bl-family-content0 p {
    margin-top: 1%;
    vertical-align: middle;    
    }
    .bl-family-content2 {
    text-align: center;
    margin: 3% 2%;
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(400px, 1fr));
    grid-gap: 10px    
    }
    .family-works {
    margin-bottom: 30px;
    padding: 5% 10%;
    max-width: 500px;
    }
    .family-works2 {
    margin-bottom: 30px;
    padding: 5% 10%;
    max-width: 500px;
    }
    .family-works h3{
    font-size: 2.3vh;
    margin: 3% 0px;
    text-align: center
    }
    .family-works2 h3{
    font-size: 2vh;
    margin: 3% 0px;
    text-align: center
    .family-comment2 p {
    font-size: 15px;
    margin: 5px 10px;    
    }
     /* CONTACT */ margin-top: 40px;
    }

    /* フォーム */
    input[type="text"],
    input[type="email"],
    textarea {
        max-width: 100%;
    }

    /* 店舗情報・地図 / SNS */
    #location .wrapper,
    #sns .wrapper {
        flex-direction: column;
    }
    .location-info,
    .location-map,
    .sns-box {
        width: 100%;
    }
    .sns-box {
        margin-bottom: 30px;
    }
    #menu{
	/*配置*/
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 100;
}

/****メニュー開閉ボタン****/
#menu div{
	/*デザイン*/
	width: 30px;
	height: 30px;
	background: rgba(200,200,200,1);
	/*配置*/
	overflow: hidden;
	position: absolute;
	right: 0;
}

#menu .menuopen{
	/*デザイン*/
	color: rgba(255,255,255,1);
	font-size: 20px;
	/*配置*/
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: auto;
}

#menu .menuclose{
	/*デザイン*/
	color: rgba(255,255,255,1);
	font-size: 20px;
	/*配置*/
	display: none;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: auto;
}

/****メニュー一覧****/
#menu ul{
	/*デザイン*/
	background: rgba(200,200,200,1);
	width: 80%;
	/*配置*/
	position: absolute;
	top: 30px;/*#menu divの高さ*/
	right: 0;
	display: none;
}

#menu li{
	/*デザイン*/
	padding: 10px;
	color: rgba(0,0,0,1);
	border-bottom: 1px rgba(255,255,255,1) solid;
	/*配置*/
	pointer-events: auto;
}

/****メニューオープン時****/
#menu:target .menuopen{
	/*配置*/
	display: none;
}

#menu:target .menuclose{
	/*配置*/
	display: block;
}

#menu:target ul{
	/*配置*/
	display: block;
}

/* モバイル版
------------------------------- */
@media (max-width: 450px) {
    .page-title {
        font-size: 2vh;
    }
 .page-header {
        flex-direction: column;
        align-items: center;
    }

    /* HEADER */
    .main-nav {
        font-size: 80%;
        margin-top: 10px;
    }
    .main-nav li {
        margin: 0 20px;
    }
    .logo {
    width: 100px;
    margin-top: 14px;
    position: relative;z-index: auto;
}

    /* HOME */
    .home-content {
        margin-top: 0%;
           }
    .home-content p {
        font-size: 0.9rem;
    }
    .big-bg {
    background-position: center;
}
    .works h3{
        padding-top: 30%;
    }
	/* art-app */
	    /* HOME */
    .art-app-content {
        margin-top: 0%;
    }
	.art-app-content h2 {
		font-size: 3vh;
	}
    .art-app-content p {
        font-size: 1rem;
		margin-top: 25%;
		color: #000;
    }
	.art-app-content2 {
        margin-top: 0%;
           }
    .art-app-content2 p {
		margin: 30px 15% 10px;
        font-size: 0.9rem;
    }
	.art-app-content h2{
		font-size: 3.5vh;
	}
	.art-app-works figure {
	margin:10px 5%;
	display: flex;
	flex-wrap: wrap;
    padding-bottom: 10px;
}


     /* CONTACT */
    #contact .page-title {
        margin-top: 40px;
    }

    /* フォーム */
    input[type="text"],
    input[type="email"],
    textarea {
        max-width: 100%;
    }

    /* 店舗情報・地図 / SNS */
    #location .wrapper,
    #sns .wrapper {
        flex-direction: column;
    }
    #sns .wrapper {
    display: flex;
    justify-content: space-between;
}
    .location-info,
    .location-map,
    .sns-box {
        width: 100%;
    }
    .sns-box {
        margin-bottom: 30px;
    }
}


/* モバイル版
------------------------------- */
@media (max-width:400px) {
    .page-title {
        font-size: 2vh;
    }

    .page-header {
        flex-direction: column;
        align-items: center;
    }

    /* HEADER */
    .main-nav {
        font-size: 80%;
        margin-top: 10px;
    }
    .main-nav li {
        margin: 0 10px;
    }
    .logo {
    width: 100px;
    margin-top: 14px;
    position: relative;z-index: auto;
}

    /* HOME */
    .home-content {
        margin-top: 0%;
           }
    .home-content p {
        font-size: 0.9rem;
    }
    .big-bg {
    background-position: center;
}
    .works h3{
        padding-top: 30%;
    }
	/* art-app */
	    /* HOME */
    .art-app-content {
        margin-top: 0%;
    }
    .art-app-content p {
        font-size: 1rem;
		margin-top: 25%;
		color: #000;
    }
	.art-app-content2 {
        margin-top: 0%;
           }
    .art-app-content2 p {
		margin: 20px 15% 10px;
        font-size: 0.9rem;
    }
	.art-app-content h2{
		font-size: 3.5vh;
	}
     /* CONTACT */
    #contact .page-title {
        margin-top: 40px;
    }

    /* フォーム */
    input[type="text"],
    input[type="email"],
    textarea {
        max-width: 100%;
    }

    /* 店舗情報・地図 / SNS */
    #location .wrapper,
    #sns .wrapper {
        flex-direction: column;
    }
    .location-info,
    .location-map,
    .sns-box {
        width: 100%;
    }
    .sns-box {
        margin-bottom: 30px;
    }