@charset "UTF-8";

.openbtn{
position: fixed;
cursor: pointer;
width: 100px;
height:100px;
top:30px;
right: 30px;
z-index: 1000;
}
.openbtn span{
display: inline-block;
transition: all .4s;
position: absolute;
left: 0;
height: 3px;
border-radius: 2px;
background:#11110f;
width: 100%;
}
.openbtn span:nth-of-type(1) {
top:50px;
width: 100%;
}
.openbtn span:nth-of-type(2) {
top:80px;
width: 100%;
}
.openbtn span:nth-of-type(3) {
top:110px;
width: 70%;
}
.openbtn.active span:nth-of-type(1) {
top: 80px;
transform: rotate(-45deg);
width: 80%;
background:#eeefe4;
}
.openbtn.active span:nth-of-type(2) {
opacity: 0;
}
.openbtn.active span:nth-of-type(3){
top: 80px;
transform:  rotate(45deg);
width: 80%;
background:#eeefe4;
}

#g-nav{
display: none;
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
background: #11110f;
z-index: 999;
position:fixed;
font-weight: 400;
font-style: italic;
}
#g-nav-list{
width: 60%;
height: auto;
margin: 0 auto;
padding: 0;
z-index:10;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%) translateX(-50%);
position: absolute;
text-align: center;
font-size:2.0rem;
}
#g-nav-list li{
border-bottom:solid thin #ccc;
padding: 0 0 20px 0;
margin: 0 0 20px 0;
list-style:none;
}
#g-nav-list li a{
color: #fff;
text-decoration: none;
padding:10px;
display: block;
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: bold;
transition: all .5s;
cursor: pointer;
}
#g-nav li a:hover{
color:#d0dd57;
}
#g-nav-list li a::after{
display: none;
}

/*========= フェードイン ===============*/
.fadeUp{
animation-name:fadeUpAnime;
animation-duration:2.0s;
animation-fill-mode:forwards;
opacity:0;
}
@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }
  to {
    opacity: 1;
  transform: translateY(0);
  }
}
.fadeUpTrigger{
    opacity: 0;
}

/*========= アコーディオン ===============*/
.accordion {
width: 80%;
max-width: 100%;
margin: 0 auto;
text-align: center;
}
.accordion-hidden{
display: none;
}
.accordion-open {
display: block;
cursor: pointer;
margin: 5px 0;
}
.accordion-close {
display: block;
height: 0;
overflow: hidden;
padding: 0;
opacity: 0;
transition: 0.5s;/* 表示速度の設定 */
}
.accordion-hidden:checked + .accordion-open + .accordion-close {
height: auto;
opacity: 1;
padding: 10px;
background: #fff;
}

/*========= LoadingのためのCSS ===============*/

/* Loading背景画面設定　*/
#splash {
position: fixed;
width: 100%;
height: 100%;
z-index: 1001;
background: #eeefe4;
text-align:center;
color:#11110f;
}
#splash_sub{
position: fixed;
width: 100%;
height: 100%;
z-index: 1001;
background: rgba(255,255,255,1.0);
text-align:center;
color:#11110f;
}
#splash_logo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1002;
}
#splash_logo img{
width:200px;
}

/*========= スクロールのためのCSS ===============*/
.scrolldown{
position:absolute;
bottom:3%;
left:50%;
}
.scrolldown span{
position: absolute;
left:10px;
bottom:10px;
color: #11110f;
font-size: 0.7rem;
letter-spacing: 0.05em;
-ms-writing-mode: tb-rl;
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;
}
.scrolldown:before {
content: "";
position: absolute;
bottom:0;
left:-10px;
width:20px;
height:20px;
border-radius: 50%;
background:#dd3642;
animation:
circlemove 1.6s ease-in-out infinite,
cirlemovehide 1.6s ease-out infinite;
}
@keyframes circlemove{
0%{bottom:45px;}
100%{bottom:-5px;}
}
@keyframes cirlemovehide{
0%{opacity:0}
50%{opacity:0.9;}
80%{opacity:0.7;}
100%{opacity:0;}
}
.scrolldown:after{
content:"";
position: absolute;
bottom:0;
left:0;
width:2px;
height: 50px;
background:#11110f;
}

/*========= 画面遷移のためのCSS ===============*/

/*画面遷移アニメーション*/
#splashbg{
display: none;
}

/*bodyにappearクラスがついたら出現*/
body.appear #splashbg{
display: block;
content: "";
position:fixed;
z-index: 1002;
width: 100%;
height: 100vh;
top: 0;
left: 0;
transform: scaleY(0);
background:#eeefe4;
animation-name:PageAnime;
animation-duration:0.3s;
animation-timing-function:ease-in-out;
animation-fill-mode:forwards;
}

@keyframes PageAnime{
0% {
transform-origin:bottom;
transform:scaleY(0);
}
50% {
transform-origin:bottom;
transform:scaleY(1);
}
50.001% {
transform-origin:top;
}
100% {
transform-origin:top;
transform:scaleY(0);
}
}

/*=============== 画面遷移の後現れるコンテンツ設定 =================*/
#container{
opacity: 0;
}

body.appear #container{
animation-name:PageAnimeAppear;
animation-duration:0.1s;
animation-delay: 0.1s;
animation-fill-mode:forwards;
opacity: 0;
}

@keyframes PageAnimeAppear{
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

@media screen and (max-width: 599px) {
/*========= menuのためのCSS ===============*/

/*ボタン外側※レイアウトによってpositionや形状は適宜変更してください*/
.openbtn{
position: fixed;
cursor: pointer;
width: 50px;
height:50px;
top:30px;
right: 30px;
z-index: 1000;
}
.openbtn span{
display: inline-block;
transition: all .4s;/*アニメーションの設定*/
position: absolute;
left: 0;
height: 3px;
border-radius: 2px;
background:#11110f;
width: 100%;
}
.openbtn span:nth-of-type(1) {
top:0;
width: 100%;
}
.openbtn span:nth-of-type(2) {
top:15px;
width: 100%;
}
.openbtn span:nth-of-type(3) {
top:30px;
width: 70%;
}
.openbtn.active span:nth-of-type(1) {
top:15px;
transform: rotate(-45deg);
width:80%;
background:#eeefe4;
}
.openbtn.active span:nth-of-type(2) {
opacity: 0;
}
.openbtn.active span:nth-of-type(3){
top:15px;
transform:  rotate(45deg);
width: 80%;
background:#eeefe4;
}
#g-nav{
display: none;
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
background: #11110f;
z-index: 999;
position:fixed;
font-weight: 400;
font-style: italic;
}
#g-nav-list{
width: 80%;
height: auto;
margin: 0 auto;
padding: 0;
z-index:10;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%) translateX(-50%);
position: absolute;
text-align: center;
font-size:1.4rem;
}
#g-nav-list li{
border-bottom:solid thin #ccc;
padding: 0 0 10px 0;
margin: 0 0 10px 0;
list-style:none;
}
#g-nav-list li a{
color: #fff;
text-decoration: none;
padding:10px;
display: block;
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: bold;
transition: all .5s;
cursor: pointer;
}
#g-nav li a:hover{
color:#d0dd57;
}
#g-nav-list li a::after{
display: none;
}
/*========= スクロールのためのCSS ===============*/
.scrolldown{
position:absolute;
bottom:3%;
left:94%;
}
.scrolldown span{
position: absolute;
left:5px;
bottom:5px;
color: #11110f;
font-size: 0.7rem;
letter-spacing: 0.05em;
-ms-writing-mode: tb-rl;
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;
}
.scrolldown:before {
content: "";
position: absolute;
bottom:0;
left:-4px;
width:10px;
height:10px;
border-radius: 50%;
background:#dd3642;
animation:
circlemove 1.6s ease-in-out infinite,
cirlemovehide 1.6s ease-out infinite;
}
@keyframes circlemove{
0%{bottom:45px;}
100%{bottom:-5px;}
}
@keyframes cirlemovehide{
0%{opacity:0}
50%{opacity:0.9;}
80%{opacity:0.7;}
100%{opacity:0;}
}
.scrolldown:after{
content:"";
position: absolute;
bottom:0;
left:0;
width:2px;
height: 50px;
background:#11110f;
}

.accordion {
width: 90%;
max-width: 100%;
margin: 0 auto;
text-align: center;
}
}
ul.insta_list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
ul.insta_list li {
  list-style: none;
  width: 48%;
  margin-bottom: 1vw;
}
ul.insta_list li a p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
ul.insta_list li a p span {
  font-size: 120%;
}