/* LESS Document */
/*----------- -- xxx styles ----------- --*/
/*----------- xxx base -----------*/
/*----------- xxx layout -----------*/
/*----------- xxx module -----------*/
/*----------- xxx state -----------*/
/*----------- xxx thema -----------*/
/*----------- -- basic styles ----------- --*/
* {
  margin: 0;
  padding: 0;
}
body {
  font-size: 16px;
  font-family: sans-serif;
}
div,
p,
span,
ul,
dl,
ol,
li,
dt,
dd {
  box-sizing: border-box;
}
a {
  text-decoration: none;
  color: #134B99;
}
ul,
ol,
dl {
  list-style: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
}
@media screen and (max-width: 768px) {
  /*　画面サイズが768pxまではここを読み込む　*/
  h2 {
    font-size: 6vw;
  }
  h3 {
    font-size: 5vw;
  }
  h4 {
    font-size: 4.5vw;
  }
  h5 {
    font-size: 4vw;
  }
  h6 {
    font-size: 3vw;
  }
  p {
    font-size: 4vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
  /*　画面サイズが769pxから1024pxまではここを読み込む　*/
}
@media screen and (min-width: 1024px) {
  /*　画面サイズが1024pxからはここを読み込む　*/
}
/*----------- base -----------*/
.w100vw {
  width: 100vw;
}
.w1rem {
  width: 1rem;
}
.h100vh {
  height: 100vh;
}
.h100p {
  height: 100%;
}
.h1rem {
  height: 1rem;
}
.boxShadow {
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.6);
}
.boxShadowIn {
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.6) inset;
}
/*----------- layout -----------*/
/*----------- module -----------*/
/*	image style */
.imageBoxL {
  max-width: 29rem;
  width: 110%;
}
.imageBoxM {
  max-width: 26rem;
  width: 80%;
}
.imageBoxS {
  max-width: 24rem;
  width: 60%;
}
/*	thmbBox*/
.thmbBox {
  display: flex;
  flex-wrap: wrap;
}
.thmbBox li {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 33.33333% ;
  /* 未対応ブラウザ用フォールバック */
  width: -webkit-calc(33.33333333%);
  width: calc(33.33333333%);
  overflow: hidden;
}
.thmbBox li a {
  width: 100%;
  height: 100%;
  display: inline-block;
}
.thmbBox li a:hover {
  opacity: .9;
}
.thmbBox li a:hover img {
  width: 110.5%;
  transition: width .25s ease 0, height .25s ease 0 ;
}
.thmbBox li a img {
  max-width: 40rem;
  width: 100%;
}
@media screen and (max-width: 768px) {
  /*　画面サイズが768pxまではここを読み込む　*/
  .thmbBox {
    width: 100%;
    margin: 0.25rem 0;
  }
  .thmbBox li {
    height: 18vh;
  }
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
  /*　画面サイズが769pxから1024pxまではここを読み込む　*/
  .thmbBox {
    width: 100%;
    margin: 0.25rem auto;
  }
  .thmbBox li {
    height: 9rem;
  }
  .thmbBox li a img {
    width: 110%;
  }
}
@media screen and (min-width: 1024px) {
  /*　画面サイズが1024pxからはここを読み込む　*/
  .thmbBox {
    width: 100%;
    margin: 0.25rem auto;
  }
  .thmbBox li {
    height: 15rem;
  }
  .thmbBox li a img {
    width: 110%;
  }
}
/*----------- state -----------*/
/*----------- thema -----------*/
/* basic color */
/* background color */
.bkgWhi {
  background-color: #fff;
}
.bkgGre {
  background-color: #e9f7eb;
}
/* border styles */
.bs_b1 {
  border-bottom: 1px solid #e7eee7;
}
/*----------- -- header styles ----------- --*/
/*----------- header layout -----------*/
header {
  width: 100%;
  background-color: #fff;
  border-bottom: 1px solid #e7eee7;
  height: 4rem;
  position: fixed;
  top: 0;
  z-index: 10;
  box-sizing: border-box;
}
/*----------- header module -----------*/
header h1 {
  padding: 1rem;
  height: 2rem;
  display: table;
}
header a {
  display: inline-block;
}
header a:hover {
  background: #fff45c;
}
header h1 img {
  display: table-cell;
  height: 2rem;
}
header h1 span {
  display: table-cell;
  vertical-align: middle;
  font-weight: normal;
  font-size: 0.7rem;
  line-height: 1.25;
  padding-left: 0.5rem;
}
/*----------- header state -----------*/
/*----------- header thema -----------*/
/*----------- -- footer styles ----------- --*/
/*----------- footer layout -----------*/
footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 4rem;
  background: #fff;
  z-index: 10;
  font-size: .75rem;
  border-top: 1px solid #e7eee7;
  box-sizing: border-box;
}
/*----------- footer module -----------*/
footer ul {
  margin-top: .65rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
footer ul li {
  width: 8rem;
  height: 2.5rem;
  text-align: center;
  border: 1px solid #333;
  margin: 0 .5rem;
  vertical-align: middle;
  display: table;
  line-height: 1.1;
}
footer ul li a {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
/*----------- footer state -----------*/
footer ul li a:hover {
  background: #fff45c;
}
/*----------- footer thema -----------*/
/*----------- -- index styles ----------- --*/
/*----------- index layout -----------*/
.main{
  scroll-snap-type: y mandatory;
}
#section1,
#section2,
#section3 {
  height: calc(84vh);
  padding-top: 4rem;
  padding-bottom: 4rem;
  scroll-snap-align: start;
}
#section1 {
  z-index: 9;
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.6);
  background-color: #e9f7eb;
}
#section2 {
  z-index: 8;
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.6);
}
#section3 {
  z-index: 7;
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.6);
}
/* -- #section1 -- */
.first {
  display: flex;
}
.first .box1 {
  text-align: center;
}
.first .box2 {
  text-align: center;
  font-size: 2.5vw;
}
@media screen and (max-width: 768px) {
  /*　画面サイズが768pxまではここを読み込む　*/
  .first {
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .first .box1 {
    width: 100%;
    height: calc(52vh);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
  }
  .first .box1 span {
    overflow: hidden;
    width: 100%;
  }
  .first .box1 span img {
    justify-content: center;
    align-items: center;
    max-width: 100%;
  }
  .first .box2 {
    width: 100%;
    height: calc(32vh);
    padding-top: 1rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
  }
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
  /*　画面サイズが769pxから1024pxまではここを読み込む　*/
  .first {
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  .first .box1 {
    width: 50%;
    height: 512px;
    padding:4rem;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    overflow: hidden;
  }
  .first .box1 span {
    overflow: hidden;
    width: 90%;
    margin: 0 auto;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.6);
  }
  .first .box1 span img {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: auto;
    object-fit: cover;
  }
  .first .box2 {
    width: 50%;
    height: 100vh;
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-size: 1rem;
  }
  .first .box2 a,
  .first .box2 span {
    display: block;
    width: 90%;
    margin-left: 10%;
    text-align: left;
  }
  /*	image style */
  .section1_box1 {
    max-width: 29rem;
    width: 80%;
  }
  .section1_box2 {
    max-width: 29rem;
    width: 80%;
  }
}
@media screen and (min-width: 1025px) {
  /*　画面サイズが1024pxからはここを読み込む　*/
  .first {
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  .first .box1 {
    width: 50%;
    height:802px;
    padding:4rem;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    overflow: hidden;
  }
  .first .box1 span {
    overflow: hidden;
    width: 80%;
    margin: 0 auto;
    display: flex;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.6);
  }

  .first .box1 span img {
    justify-content: center;
    align-items: center;
    width: 100%;
    height: auto;
    object-fit: cover;
  }
  .first .box2 {
    width: 50%;
    height: 100vh;
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
    justify-content: center;
    align-items: left;
    flex-direction: column;
    font-size: 1rem;
  }
  .first .box2 a,
  .first .box2 span {
    display: block;
    width: 90%;
    margin-left: 10%;
    text-align: left;
  }
  /*	image style */
  .section1_box1 {
    max-width: 29rem;
    width: 80%;
  }
  .section1_box2 {
    max-width: 29rem;
    width: 80%;
  }
}
/* -- #section2 -- */
#section2 {
  background: #e9f7eb;
}
.second {
  display: flex;
}
.second .box2 {
  text-align: center;
}
@media screen and (max-width: 768px) {
  /*　画面サイズが768pxまではここを読み込む　*/
  .second {
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .second .box1 {
    width: 100%;
    height: calc(52vh);
    margin-top:-4rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
  }
  .second .box1 p:nth-of-type(1) {
    font-size: 1rem;
    margin: 0.5rem 0 0.25rem 0;
    background: #fff45c;
    padding: 0.25rem;
    border-radius: 0.25rem;
  }
  .second .box1 p:nth-of-type(1):before {
    font-weight: bold;
    content: '(';
    display: inline-block;
    padding-right: 0.5rem;
  }
  .second .box1 p:nth-of-type(1):after {
    font-weight: bold;
    content: ' )';
    display: inline-block;
    padding-left: 0.5rem;
  }
  .second .box2 {
    width: 100%;
    height: calc(32vh);
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    flex-direction: column;
  }
  .second .box2 ul {
    margin-bottom: 1rem;
  }
  .second .box2 p:nth-of-type(1) {
    font-size: 0.75rem;
    margin-bottom: 0.25rem;
  }
  .second .box2 p:nth-of-type(2) {
    font-size: 0.75rem;
    margin-bottom: 1rem;
  }
  .second .box2 p:nth-of-type(3) {
    background: url(../img/section2/bg_line.png) no-repeat top center;
    background-size: 750px 12px;
    padding-top: 1.25rem;
  }
  .second .box2 p:nth-of-type(3) a {
    text-decoration: underline;
    margin-top: -0.25rem;
    display: inline-block;
    height: 1.75rem;
    padding: 0.25rem;
    border: 1px dashed #999999;
    border-radius: 0.25rem;
  }
  .second .box2 p:nth-of-type(3) a:hover {
    background: #fff45c;
  }
  .second .box2 p:nth-of-type(3) a:before {
    margin-right: 0.5rem;
    content: '';
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    background-image: url(../img/section2/Instagram-icon@2x.png);
    background-size: 1.5rem 1.5rem;
    background-repeat: no-repeat;
    vertical-align: middle;
  }
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
  /*　画面サイズが769pxから1024pxまではここを読み込む　*/
  .second {
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
  .second .box1 {
    width: 60%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
  }
  .second .box1 p:nth-of-type(1) {
    font-size: 1.25rem;
    margin: 0 0.25rem;
    background: #fff45c;
    padding: 0.25rem;
    border-radius: 0.25rem;
  }
  .second .box1 p:nth-of-type(1):before {
    font-weight: bold;
    content: '(';
    display: inline-block;
    padding-right: 0.5rem;
  }
  .second .box1 p:nth-of-type(1):after {
    font-weight: bold;
    content: ' )';
    display: inline-block;
    padding-left: 0.5rem;
  }
  .second .box2 {
    width: 35%;
    margin: 0 2.5%;
    display: flex;
    justify-content: center;
    align-items: stretch;
    flex-direction: column;
  }
  .second .box2 ul {
    margin-bottom: 1rem;
  }
  .second .box2 p:nth-of-type(1) {
    font-size: 1rem;
    margin-top: 2rem;
    margin-bottom: 0.5rem;
  }
  .second .box2 p:nth-of-type(2) {
    font-size: 1rem;
    margin-bottom: 1rem;
  }
  .second .box2 p:nth-of-type(3) {
    background: url(../img/section2/bg_line.png) no-repeat top center;
    background-size: 750px 12px;
    margin-top: 1rem;
    padding-top: 2rem;
  }
  .second .box2 p:nth-of-type(3) a {
    text-decoration: underline;
    display: inline-block;
    height: 1.75rem;
    padding: 0.25rem 0.25rem 0.25rem 0.25rem;
    border: 1px dashed #999999;
    border-radius: 0.25rem;
  }
  .second .box2 p:nth-of-type(3) a:hover {
    background: #fff45c;
  }
  .second .box2 p:nth-of-type(3) a:before {
    margin-right: 0.5rem;
    content: '';
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    background-image: url(../img/section2/Instagram-icon@2x.png);
    background-size: 1.5rem 1.5rem;
    background-repeat: no-repeat;
    vertical-align: middle;
  }
}
@media screen and (min-width: 1024px) {
  /*　画面サイズが1024pxからはここを読み込む　*/
  .second .box1 {
    width: 60%;
    padding:2rem 0;  
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    overflow: hidden;
  }
  .second .box1 p:nth-of-type(1) {
    font-size: 1.25rem;
    margin: 12vh 0.25rem 0;
    background: #fff45c;
    padding: 0.25rem;
    border-radius: 0.25rem;
  }
  .second .box1 p:nth-of-type(1):before {
    font-weight: bold;
    content: '(';
    display: inline-block;
    padding-right: 0.5rem;
  }
  .second .box1 p:nth-of-type(1):after {
    font-weight: bold;
    content: ' )';
    display: inline-block;
    padding-left: 0.5rem;
  }
  .second .box2 {
    width: 35%;
    margin: 0 2.5%;
    display: flex;
    justify-content: center;
    align-items: stretch;
    flex-direction: column;
  }
  .second .box2 ul {
    margin-bottom: 1rem;
  }
  .second .box2 p:nth-of-type(1) {
    font-size: 1rem;
    margin-top: 2rem;
    margin-bottom: 0.5rem;
  }
  .second .box2 p:nth-of-type(2) {
    font-size: 1rem;
    margin-bottom: 1rem;
  }
  .second .box2 p:nth-of-type(3) {
    background: url(../img/section2/bg_line.png) no-repeat top center;
    background-size: 750px 12px;
    margin-top: 1rem;
    padding-top: 2rem;
  }
  .second .box2 p:nth-of-type(3) a {
    text-decoration: underline;
    display: inline-block;
    height: 1.75rem;
    padding: 0.25rem 0.25rem 0.25rem 0.25rem;
    border: 1px dashed #999999;
    border-radius: 0.25rem;
  }
  .second .box2 p:nth-of-type(3) a:hover {
    background: #fff45c;
  }
  .second .box2 p:nth-of-type(3) a:before {
    margin-right: 0.5rem;
    content: '';
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    background-image: url(../img/section2/Instagram-icon@2x.png);
    background-size: 1.5rem 1.5rem;
    background-repeat: no-repeat;
    vertical-align: middle;
  }
}
#section3 {
  background: #fff;
}
.third {
  display: flex;
}
.third .box2 {
  text-align: center;
}
@media screen and (max-width: 768px) {
  /*　画面サイズが768pxまではここを読み込む　*/
  .third {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .third .box1 {
    width: 100vw;
    height: 35vh;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: url(../img/section2/bg_line.png) no-repeat bottom center;
    background-size: 750px 12px;
  }
  .third .box1 h2 {
    margin-bottom: 1rem;
  }
  .third .box2 {
    width: 100vw;
    height: 65vh;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 0.5rem;
  }
  .third .box2 h3 {
    margin-bottom: 1rem;
  }
  .third .box2 dl {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    margin: 0 auto 1rem;
    width: 90vw;
  }
  .third .box2 dt {
    font-size: 0.75rem;
    font-weight: bold;
    text-align: right;
    padding: 0.25rem;
    width: 20vw;
    border-right: 1px dotted #e9f7eb;
    border-bottom: 1px dashed #e9f7eb;
  }
  .third .box2 dt:last-of-type {
    border-bottom: none;
  }
  .third .box2 dd {
    width: calc(70vw);
    padding: 0.25rem;
    text-align: left ;
    font-size: 0.9rem;
    border-bottom: 1px dashed #e9f7eb;
  }
  .third .box2 dd:last-child {
    border-bottom: none;
  }
  .third .box2 dd ul {
    padding: 0.5rem 0 0 0.5rem;
  }
  .third .box2 dd ul li {
    font-size: 0.75rem;
  }
  .third .box2 h4 {
    margin-bottom: 0.25rem;
  }
  .third .box2 div {
    margin-bottom: 1.5rem;
  }
  .third .box2 div a {
    padding: 0.25rem;
    border: 1px dashed #999999;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
  }
  .third .box2 div a:hover {
    background: #fff45c;
  }
  .third .box2 p {
    font-size: 0.75rem;
  }
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
  /*　画面サイズが769pxから1024pxまではここを読み込む　*/
  .third {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
  .third .box1 {
    width: 50vw;
    height: 100vh;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: url(../img/section2/bg_line.png) no-repeat bottom center;
    background-size: 750px 12px;
  }
  .third .box1 h2 {
    margin-bottom: 1rem;
  }
  .third .box2 {
    width: 50vw;
    height: 100vh;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 0.5rem;
  }
  .third .box2 h3 {
    margin-bottom: 1rem;
  }
  .third .box2 dl {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    margin: 0 auto 1rem;
    width: 45vw;
  }
  .third .box2 dt {
    font-size: 0.75rem;
    font-weight: bold;
    text-align: right;
    padding: 0.25rem;
    width: 10vw;
    border-right: 1px dotted #739e65;
    border-bottom: 1px dashed #739e65;
  }
  .third .box2 dt:last-of-type {
    border-bottom: none;
  }
  .third .box2 dd {
    width: calc(35vw);
    padding: 0.25rem;
    text-align: left ;
    font-size: 0.9rem;
    border-bottom: 1px dashed #739e65;
  }
  .third .box2 dd:last-child {
    border-bottom: none;
  }
  .third .box2 dd ul {
    padding: 0.5rem 0 0 0.5rem;
  }
  .third .box2 dd ul li {
    font-size: 0.75rem;
  }
  .third .box2 h4 {
    margin-bottom: 0.25rem;
  }
  .third .box2 div {
    margin-bottom: 1.5rem;
  }
  .third .box2 div a {
    padding: 0.25rem;
    border: 1px dashed #999999;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
  }
  .third .box2 div a:hover {
    background: #fff45c;
  }
  .third .box2 p {
    font-size: 0.75rem;
  }
}
@media screen and (min-width: 1024px) {
  /*　画面サイズが1024pxからはここを読み込む　*/
  .third {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
  .third .box1 {
    width: 50vw;
    height: 100vh;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: url(../img/section2/bg_line.png) no-repeat bottom center;
    background-size: 750px 12px;
  }
  .third .box1 h2 {
    margin-bottom: 1rem;
  }
  .third .box2 {
    width: 50vw;
    height: 100vh;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 0.5rem;
  }
  .third .box2 h3 {
    margin-bottom: 1rem;
  }
  .third .box2 dl {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    margin: 0 auto 1rem;
    width: 45vw;
  }
  .third .box2 dt {
    font-size: 0.75rem;
    font-weight: bold;
    text-align: right;
    padding: 0.25rem;
    width: 10vw;
    border-right: 1px dotted #739e65;
    border-bottom: 1px dashed #739e65;
  }
  .third .box2 dt:last-of-type {
    border-bottom: none;
  }
  .third .box2 dd {
    width: calc(35vw);
    padding: 0.25rem;
    text-align: left ;
    font-size: 0.9rem;
    border-bottom: 1px dashed #739e65;
  }
  .third .box2 dd:last-child {
    border-bottom: none;
  }
  .third .box2 dd ul {
    padding: 0.5rem 0 0 0.5rem;
  }
  .third .box2 dd ul li {
    font-size: 0.75rem;
  }
  .third .box2 h4 {
    margin-bottom: 0.25rem;
  }
  .third .box2 div {
    margin-bottom: 1.5rem;
  }
  .third .box2 div a {
    padding: 0.25rem;
    border: 1px dashed #999999;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
  }
  .third .box2 div a:hover {
    background: #fff45c;
  }
  .third .box2 p {
    font-size: 0.75rem;
  }
}
/*----------- xxx module -----------*/
/*----------- xxx state -----------*/
/*----------- xxx thema -----------*/
/*#nav {
position:fixed;
bottom:0;
left:0;
z-index:1;
width:100%;
height:60px;
}
#nav li {
display:inline-block;
}
#interval {
position:fixed;
top:10px;
right:20px;
}
#main {
position:relative;
}*/
.content {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.second {
  /*background:url(http://gimmicklog.main.jp/demo/images/02.jpg) 50% 0 no-repeat;*/
  background-position: center center;
  background-attachment: fixed;
}
.third {
  /*background:url(http://gimmicklog.main.jp/demo/images/03.jpg) 50% 0 no-repeat;*/
  background-position: center bottom;
  background-attachment: fixed;
}
.text {
  color: #fff;
  position: absolute;
  top: 100px;
  left: 50px;
}
/*----------- -- menu-btn styles ----------- --*/
.menu-btn {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 100px;
  height: 50px;
  line-height: 50px;
  font-size: 12px;
  text-align: center;
  cursor: pointer;
  z-index: 10;
}
.menu-btn span {
  color: #fff;
}
.menu-btn span:after {
  content: attr(data-txt-menu);
}
/* 開閉用ボタンがクリックされた時のスタイル */
.open .menu-btn span:after {
  content: attr(data-txt-close);
}
.menu {
  position: fixed;
  display: table;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  -webkit-transition: all .5s;
  transition: all .5s;
  visibility: hidden;
  opacity: 0;
  z-index: 1000;
}
.menu ul {
  display: table-cell;
  vertical-align: middle;
}
.menu li {
  width: 300px;
  height: 80px;
  line-height: 80px;
  margin: 0 auto;
  text-align: center;
}
.menu li a {
  display: block;
  font-size: 18px;
  color: #fff;
}
.menu li a:hover {
  color: #999;
}
/* 開閉用ボタンがクリックされた時のスタイル */
.open .menu {
  cursor: url(../images/cross.svg), auto;
  -webkit-transition: all .5s;
  transition: all .5s;
  visibility: visible;
  opacity: 1;
}