@charset "utf-8";
#navTgl:checked ~ .contents { transform: translateX(250px); }
#navTgl { display: none; }
label { cursor: pointer; position: fixed; top: 0; left: 0; }
.open {
  z-index: 2;
  width: 48px;
  height: 48px;
  background: #04c5ef;
  transition: background .6s, transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
  border: 2px solid #FFF;
}
.open::before,.open::after { content: ""; }
.open span,.open::before,.open::after {
  content: "";
  position: absolute;
  top: calc(50% - 1px);
  left: 30%;
  width: 40%;
  border-bottom: 2px solid white;
  transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.open::before { transform: translateY(-8px); }
.open::after { transform: translateY(8px); }
.close {
  z-index: 3;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transition: background .6s;
}
#navTgl:checked + .open { background: #ff297f; transform: translateX(250px); z-index: 4;}
#navTgl:checked + .open span { transform: scaleX(0); }
#navTgl:checked + .open::before { transform: rotate(45deg); }
#navTgl:checked + .open::after { transform: rotate(-45deg); }
#navTgl:checked ~ .close { pointer-events: auto; background: rgba(0,0,0,.3); z-index:2;}
.menu {
  position: fixed;
  overflow: auto;
  top: 0;
  left: 0;
  width: 250px;
  height: 100%;
  margin: 0;
  padding: 10px;
  box-sizing: border-box;
  border-right: 5px solid #FFF;
  transform: translateX(-100%);
  transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
  z-index:3;
  background:
  url("../img/gnav/bg_btm.png") no-repeat bottom left,
  url("../img/gnav/bg_top.jpg") repeat-y;
  background-size: contain,auto;
}

.menu a {
  display: block;
  padding: .5em;
  text-decoration: inherit;
  transition: background .6s;
  font-size: 2.9vh;
}
@media screen and (min-width: 640px) {
  .menu a {
    font-size: 2.6vh;
  }
}
@media screen and (min-width: 768px) {
  .menu a {
    font-size: 2.3vh;
  }
}

@media screen and (min-width: 769px) {
  .open, .menu, #navTgl:checked ~ .close {
    display: none !important;
  }
}

#navTgl:checked ~ .menu { transform: none; }

header {
  box-sizing: border-box;
  position: relative;
  background: #04c5ef;
}

header nav ul {
  display: flex;
	align-items:center;
  width:100%;
  max-width:1220px;
	margin:0 auto;
}

header nav ul li img {
	width:100%;
	height:auto;
}

header nav ul li:nth-child(11) {
	width:2.6%;
	max-width:31px;
	height:auto;
}

header nav ul li:nth-child(1) {margin:0 32px 0 0;}
header nav ul li:nth-child(2) {margin:0 32px 0 0;}
header nav ul li:nth-child(3) {margin:0 31px 0 0;}
header nav ul li:nth-child(4) {margin:0 24px 0 0;}
header nav ul li:nth-child(5) {margin:0 22px 0 0;}
header nav ul li:nth-child(6) {margin:0 24px 0 0;}
header nav ul li:nth-child(7) {margin:0 24px 0 0;}
header nav ul li:nth-child(8) {margin:0 31px 0 0;}
header nav ul li:nth-child(9) {margin:0 31px 0 0;}
header nav ul li:nth-child(10) {margin:0 31px 0 0;}
header nav ul li:nth-child(11) {margin:0 0 0 0;}

.ani { opacity: 0; transition: all .5s ease; }
.ani.show { opacity: 1; transform: none; }
.ani-lr { transform: translate(-100px, 0); }
.ani-rl { transform: translate(100px, 0); }
.ani-up { transform: translate(0, 100px); }
.ani-down {transform: translate(0, -100px); }
.ani-scaleUp { transform: scale(.5); }
.ani-scaleDown { transform: scale(1.5); }
.ani-rotateL { transform: rotate(180deg); }
.ani-rotateR { transform: rotate(-180deg); }

#page-top {
  position: fixed;
  bottom: 1%;
  right: 0;
  z-index: 2;
}
#page-top a {
  display: block;
  text-decoration: none;
}

#page-top a img{ width: 100px; }

/* h2-ttl */
.h2-ttl {
  overflow:hidden;
  width:100%;
  position:relative;
  text-align:center;
	padding:50px 0 0;
	z-index:1;
}

.h2-ttl img {
  width:100%;
  max-width:1000px;
	height:auto;
}

/* content box */
.ct-box {
  width:100%;
  max-width:1000px;
	border:10px solid #eee;
	background:rgba(255,255,255,0.7);
	border-radius:50px;
	margin:0 auto;
}

/* content bg */
.content-bg{
	background:url("../img/00_bg-content.gif") repeat-y;
	background-position:center top -60px;
}
@media screen and (max-width: 768px) {
  .content-bg{
  	background:url("../img/sp/00_bg-content.jpg") repeat-y;
    background-position:center top;
		background-size:100% auto;
  }
}

@media only screen and (max-width:768px) {.is-pc {display:none !important;}}
@media only screen and (min-width:769px) {.is-sp {display:none !important;}}

/*==========================================
SP
==========================================*/
@media screen and (max-width: 768px) {
  header nav { display: none; }
  #page-top a {width: 80px;}
  #page-top img{ width: 90%;}
  #sns { padding: 6em 0 2em; }

  /* h2-ttl */
  .h2-ttl {
    overflow:hidden;
    width:100%;
    position:relative;
    text-align:center;
	  padding:60px 0 0;
	  z-index:1;
  }

  .h2-ttl img {
    width:130%;
    max-width:768px;
	  height:auto;
  }

  /* content box */
  .ct-box {
    width:calc(100% - 3.906vw);
    max-width:1000px;
    border:1.302vw solid #eee;
    background:rgba(255,255,255,0.7);
    border-radius:6.51vw;
    margin:0 auto;
}


}