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

/*========= ナビゲーションのためのCSS ===============*/

#g-nav{
    /*position:fixed;にし、z-indexの数値を小さくして最背面へ*/
    position:fixed;
	z-index: -1;
	opacity: 0;/*はじめは透過0*/
    /*ナビの位置と形状*/
	top:0;
	width:100%;
    /*height: 100vh;*//*ナビの高さ*/
	background:#fff;
    /*動き*/
	transition: all 0.3s;
}

/*アクティブクラスがついたら透過なしにして最前面へ*/
#g-nav.panelactive{
	opacity: 1.0;
	z-index:999;height: 100vh
}

/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list{
    /*ナビの数が増えた場合縦スクロール*/
    /*position: fixed;*/
    z-index: 999; 
    width: 100%;
    height: 100vh;/*表示する高さ*/
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/*ナビゲーション*/
#g-nav ul {
    display: none;
    /*ナビゲーション天地中央揃え*/
    position: absolute;
    z-index: 999;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}

#g-nav.panelactive ul {
    display: block;width: 85%;margin-top: 0px;text-align: left;
}

/*リストのレイアウト設定*/

q{
	list-style: none;
    text-align: left;  width: 24%;
}


.category-list ul {
    display: block;
    width: 80%;
    margin-top: 2%!important;
    text-align: left;
}


#g-nav li:nth-of-type(1), #g-nav li:nth-of-type(6) {width: 25%;}
#g-nav li:nth-of-type(2), #g-nav li:nth-of-type(7) {width: 21%;}
#g-nav li:nth-of-type(3), #g-nav li:nth-of-type(8) {width: 21%;}
#g-nav li:nth-of-type(4), #g-nav li:nth-of-type(9) {width: 18%;}
#g-nav li:nth-of-type(5),#g-nav li:nth-of-type(10) {width: 13%;}

#g-nav li {
    list-style: none;
    text-align: left;
    width: 18%;
    margin-bottom: 20px;font-family: le-monde-livre-std, serif;
    font-weight: 300;
    font-style: normal;
}

#g-nav li a{
	color: #333;
    text-decoration: none;
    padding: 10px;
    display: block;
    text-transform: none;
    font-family: le monde livre std, serif;
    font-weight: 500;
    font-style: normal;
    text-transform: none;
    letter-spacing: 0em;
    font-size: 120%;
}

#g-nav li a span {
    font-size: 70%;
    margin: 10px;
    color: #333;font-family: 游ゴシック体, "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

#g-nav li p.kokate {
    font-size: 80%;
    margin: 0;font-family: 游ゴシック体, "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;margin-bottom: 1%;font-weight: 500;
}
#g-nav li p.kokate:last-child {
    margin-bottom: 0%;
}
#g-nav li p.kokate a {
    padding: 0 0px 0 10px;
    color: #333;
    font-family: 游ゴシック体, "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

/* SNSアイコン */

.sns-icon {position: absolute;z-index: 999;top: calc(1 / 15 * 100%);left: calc(8 / 11.5 * 100%);transform: translate(-50%,-50%);font-size: 30px;width: 49%;}
.sns-icon li {font-weight: bold!important;}
li.sns {padding: 0;}
li.sns a {padding: 0!important;color: #333!important;}
li.sns i.fab.fa-instagram {font-size: 26px;line-height: 1.5em;}

#g-nav.panelactive #g-nav-list .guide {
    position: absolute;
    z-index: 999;
    top: calc(1 / 17 * 100%);
    left: calc(9 / 10 * 100%);
    transform: translate(-50%,-50%);
    font-size: 30px;
    width: 100%;
    display: block;
}

#g-nav.panelactive #g-nav-list .guide ul {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: space-around;
    width: 100%;
}

#g-nav.panelactive #g-nav-list .guide li.sns {
    width: 21px;
    /* height: 20px; */
    /* font-size: 76%; */
    line-height: 0;
    padding: 0 2%;
}


#g-nav.panelactive #g-nav-list .guide li a {
    font-size: 100%;
}


#g-nav.panelactive #g-nav-list .guide li {
    display: inline-block;
    margin: -10px 0;
    width: auto;
}

#g-nav-list .guide ul li a {
    font-family: 游ゴシック体, "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif!important;
}

/*========= ボタンのためのCSS ===============*/
.openbtn{
	position:fixed;
    z-index: 9999;/*ボタンを最前面に*/
	top:23px;
	right: 23px;
	cursor: pointer;
    width: 50px;
    height:50px;
	font-size: 9px;
}
	
/*×に変化*/	
.openbtn span{
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 14px;
    height: 1px;
    border-radius: 2px;
	background-color: #333;
  	width: 45%;
  }

.openbtn span:nth-of-type(1) {
	top:18px;	
}

.openbtn span:nth-of-type(2) {
	top:26px;
}

.openbtn span:nth-of-type(3) {
	top:34px;
}

.openbtn.active span:nth-of-type(1) {
    top: 18px;
    left: 18px;
    transform: translateY(6px) rotate(-45deg);
    width: 30%;
	background: #333;
}

.openbtn.active span:nth-of-type(2) {
	opacity: 0;
}

.openbtn.active span:nth-of-type(3){
    top: 30px;
    left: 18px;
    transform: translateY(-6px) rotate(45deg);
    width: 30%;
	background: #333;
}

/*-----------------------------------------------------*/
/* タブレット横用のCSS */
/*-----------------------------------------------------*/
@media only screen and (min-width: 1025px) and (max-width: 1180px) {
#g-nav li:nth-of-type(1), #g-nav li:nth-of-type(6) {width: 23%;}
}	

@media screen and (max-width: 1024px){
 #g-nav.panelactive ul {
    display: block;
    width: 100%;
}


#g-nav ul {
    display: none;
    position: absolute;
    z-index: 999;
    top: 39%;
    left: 50%;
    transform: translate(-50%,-50%);
}

#g-nav li:nth-of-type(1), #g-nav li:nth-of-type(6) {width: 100%;}
#g-nav li:nth-of-type(2), #g-nav li:nth-of-type(7) {width: 100%;}
#g-nav li:nth-of-type(3), #g-nav li:nth-of-type(8) {width: 100%;}
#g-nav li:nth-of-type(4), #g-nav li:nth-of-type(9) {width: 100%;}
#g-nav li:nth-of-type(5), #g-nav li:nth-of-type(10) {width: 100%;}

#g-nav li {
    list-style: none;
    text-align: left;
    width: 100%;
    margin: 0px;
}




#g-nav li a {
    color: #333;
    text-decoration: none;
    padding: 0 20px;
    display: block;
    text-transform: none;
    font-family: le monde livre std, serif;
    font-weight: 500;
    font-style: normal;
    text-transform: none;
    letter-spacing: 0em;
    font-size: 120%;
}


#g-nav li a span {
    font-size: 60%;
    margin: 0px;
    color: #333;
    display: inline-block;
    margin-left: 21px;
}



/* SNSアイコン */

.sns-icon {position: absolute;
    z-index: 999;
    top: 77%;
    left: 55%;
    transform: translate(-50%,-50%);
    font-size: 30px;
    width: 100%;}
.sns-icon li {font-weight: bold!important;}
li.sns {padding: 0;}
li.sns a {padding: 0!important;color: #333!important;}
li.sns i.fab.fa-instagram {
    font-size: 140%;
}

#g-nav.panelactive #g-nav-list .guide {
    position: absolute;
    z-index: 999;
    top: 77%;
    left: 48%;
    transform: translate(-50%,-50%);
    font-size: 30px;
    width: 100%;
    display: block;
}

#g-nav.panelactive #g-nav-list .guide ul {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-content: space-around;
    width: 100%;
}

#g-nav.panelactive #g-nav-list .guide li {
    margin: 0;
    /* width: 80%; */
    list-style: none;
    text-align: left;
    width: 100%;
    padding: 0;
    display: inline;
}



#g-nav.panelactive #g-nav-list .guide li a {
    margin: 0;
    font-size: 100%;
font-family: 游ゴシック体, "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif!important;padding: 0px 7%;
}

#g-nav.panelactive #g-nav-list .guide li.sns {
    width: 21px;
    /* height: 20px; */
    /* font-size: 76%; */
    line-height: 0;
    padding: 0px 7%;
}


/* ボーダー */

#g-nav.panelactive #g-nav-list .border {
    /*border-bottom: 1px solid #333;*/
    margin: 0 5%;
    width: 88%;
    position: absolute;
    /*z-index: 999;*/
    top: 53%;
    left: 0%;
}
.openbtn {top:1%;}




}



@media screen and (max-width: 375px){
	
.category-list00 ul { top: 40% !important;}

#g-nav.panelactive ul {
    display: block;
    width: 100%;
    margin-top: 80px!important;
}
.sns-icon {
    position: absolute;
    z-index: 999;
    top: 92%;
    left: 55%;
    transform: translate(-50%,-50%);
    font-size: 30px;
    width: 100%;
}
#g-nav li {
    list-style: none;
    text-align: left;
    width: 94%;
    margin: 2px 0%;
    padding: 0 2%;
}

#g-nav.panelactive #g-nav-list .guide {
    position: absolute;
    z-index: 999;
    top: 85%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 30px;
    width: 100%;
    display: block;
}

/* ボーダー */

#g-nav.panelactive #g-nav-list .border {
    /*border-bottom: 1px solid #333;*/
    margin: 0 6%;
    width: 87%;
    position: absolute;
    /*z-index: 999;*/
    top: 65%;
    left: 0%;
}
#g-nav.panelactive {
    opacity: 1.0;
    z-index: 999;
    height: 104vh;
    margin: 0 %;
}

}