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

body {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

img{
	max-width: 100%;
	height: auto;
	width /***/:auto;
	vertical-align: bottom;
}

.wrapper {
	/*max-width: 1280px;*/
	margin: 0 auto;
	/*padding: 1.5em 2em;*/
	margin-top: 6em;
	height: 100%;
    min-height: 100vh;
    position: relative;/*←相対位置*/
    padding-bottom: 500px;/*←footerの高さ*/
    box-sizing: border-box;/*←全て含めてmin-height:100vhに*/
}

#top {
	margin-top: -6em; /* 固定ナビの高さ分のネガティブマージン */
	padding-top: 6em; /* 打ち消し用の */
}

header {
	background-color: #fff;
	position: fixed;
	top: 0;
	left: 0;
	height: 5em;
	width: 100%;
	z-index: 98;
}

.check {
	display: none;
}

h1 img {
	position: absolute;
	top: 1em;
	left: 1.5em;
	width: 12em;
	padding-bottom: 1em;
}
.gnav {
	z-index:999;
}
.gnav li {
	border-bottom: 1px solid #FFE1F0;
	padding-top: 0.5em;
}
.gnav li a {
	display: block;
	font-family: 'Capriola', sans-serif;
	color: #ff3399;
	text-decoration: none;
	/* (44-16)/2=14px */
	padding: 1.4em;
}

/*スライドナビ*/	
    .gnav {
      background: #FFF;
      display: block;
      width: 70%;
      overflow-x: hidden;
      overflow-y: auto;
      position: fixed;
      left: 0;
      top: 0;
      z-index: 99;
      visibility: hidden;
      -webkit-transform: translateX(-100%);
      -moz-transform: translateX(-100%);
      -ms-transform: translateX(-100%);
      -o-transform: translateX(-100%);
      transform: translateX(-100%);
      webkit-transform-style: preserve-3d;
      -moz-transform-style: preserve-3d;
      -ms-transform-style: preserve-3d;
      -o-transform-style: preserve-3d;
      transform-style: preserve-3d;
    }
    .check:checked ~ .gnav {
      visibility: visible;
      -webkit-transform: translateX(0px);
      -moz-transform: translateX(0px);
      -ms-transform: translateX(0px);
      -o-transform: translateX(0px);
      transform: translateX(0px);
      -webkit-transition: all .5s .1s cubic-bezier(0, 0, .2, 0);
      -moz-transition: all .5s .1s cubic-bezier(0, 0, .2, 0);
      transition: all .5s .1s cubic-bezier(0, 0, .2, 0);
    }

    .check ~ .modal {
      background-color: rgba(255, 255, 255, .5);
      width: 100%;
      height: 100%;
      left: 0;
      opacity: .1;
      position: fixed;
      top: 0;
      z-index: 97;
      visibility: hidden;
      webkit-transition: visibility 0 linear .4s, opacity .4s;
      -moz-transition: visibility 0 linear .4s, opacity .4s;
      transition: visibility 0 linear .4s, opacity .4s;
      webkit-transform: translateZ(0);
      -moz-transform: translateZ(0);
      -ms-transform: translateZ(0);
      -o-transform: translateZ(0);
      transform: translateZ(0);
    }

    .check:checked ~ .modal {
      opacity: 1;
      webkit-transition-delay: 0;
      -moz-transition-delay: 0;
      transition-delay: 0;
      visibility: visible;
    }
	
/*ハンバーガーボタン*/
    .icon-animation {
      width: 44px;
      height: 44px;
      display: block;
      cursor: pointer;
      position: fixed;
      right: .5rem;
      top: .5rem;
      text-align: center;
      z-index: 99;
    }

    .icon-animation span {
      width: 44px;
      height: 4px;
      display: block;
      background: #ff3399;
	  border-radius: 4px;
      position: absolute;
      left: 50%;
      top: 50%;
      margin-left: -22px;
      -webkit-transition: all 0.3s;
      transition: all 0.3s;
      -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      transform: rotate(0deg);
    }

    .icon-animation .top {
      -webkit-transform: translateY(-13px);
      -ms-transform: translateY(-13px);
      transform: translateY(-13px);
    }

    .icon-animation .bottom {
      -webkit-transform: translateY(13px);
      -ms-transform: translateY(13px);
      transform: translateY(13px);
    }

    .check:checked + .gnav-btn .middle {
      background: rgba(51, 51, 51, 0)!important;
    }

    .check:checked + .gnav-btn .top {
      -webkit-transform: rotate(-45deg) translateY(0px);
      -ms-transform: rotate(-45deg) translateY(0px);
      transform: rotate(-45deg) translateY(0px);
    }

    .check:checked + .gnav-btn .bottom {
      -webkit-transform: rotate(45deg) translateY(0px);
      -ms-transform: rotate(45deg) translateY(0px);
      transform: rotate(45deg) translateY(0px);
    }

.insta_icon img {
	width: 3em;
	height: auto;
	margin-top: 0.3em;	
}
/* Firefoxのみルビ非表示 */
@-moz-document url-prefix() {
.insta_icon img {
	margin-top: -0.1em;	
}
.insta_icon rt, rp {
    display: none;
  }
}
/* Chromeのみルビ位置調整 
@media screen and (-webkit-min-device-pixel-ratio:0){
    .insta_icon img {
	width: 3em;
	height: auto;
	margin-top: 0;
}
}*/
.store_icon img {
	width: 6em;
	height: auto;
	margin-top: 0.3em;
}
/* Firefoxのみルビ非表示 */
@-moz-document url-prefix() {
.store_icon img {
	margin-top: 0;	
}
.store_icon rt, rp {
    display: none;
  }
}
/* Chromeのみルビ位置調整 
@media screen and (-webkit-min-device-pixel-ratio:0){
    .store_icon img {
	width: 6em;
	height: auto;
	margin-top: 0em;
}*/
@media (min-width:930px) {
header {
	display: block;
}
.gnav-btn {
	display: none;
}	  
.gnav {
	width: 100%;
	background-color: inherit;
	overflow: visible;
	position: fixed;
	top: 0;
	z-index: 99;
	visibility: visible;
	-webkit-transform: translateX(0);
	 transform: translateX(0);
	 -webkit-transition:ease .5s;
	 transition:ease .5s;
}
ul.gnav {
    list-style: none;
    display:flex;
	justify-content: flex-end;
}
.gnav li {
	border-bottom: none;
}
.gnav li a {
	padding: 1.8em 1em 0 1em;
}
}

footer{
    width: 100%;
    background-color: #ffcee6;
    color: #fff;
    position: absolute;/*←絶対位置*/
    bottom: 0; /*下に固定*/
}
.footer_inner {
	max-width: 1000px;
	display: block;
	margin: auto;
	display:flex;
}
.footer_left {
	width: 50%;
	margin: 3em 0 3em 3em;
}
.footer_nav li {
  display: inline-block;
  margin: 1em 0;
}
.footer_nav li a {
  text-decoration: none;
  font-size: .8em;
  color: #fff;
}
.slash + .slash::before {
  content: "/";
  margin-left: .5em;  
  margin-right: .5em;  
}
#copyright {
	font-size: .8em;
	color: #fff;
}
.footer_link li {
  display: inline-block;
  margin-bottom: 1em;
}
.footer_link img {
	width: 4em;
}
.footer_right {
	width: 20%;
}
#maffy {
	width: 150%;
	margin-top: -7em;
}
.fuwafuwa {
	-webkit-animation-name:fuwafuwa;
	-webkit-animation-duration:3s;
	-webkit-animation-iteration-count:infinite;
	/*-webkit-animation-direction:alternate;*/
	-webkit-animation-timing-function:ease;
	
	-moz-animation-name:fuwafuwa;
	-moz-animation-duration:3s;
	-moz-animation-iteration-count:infinite;
	/*-moz-animation-direction:alternate;*/
	-moz-animation-timing-function:ease;
}
/* fuwafuwa */
@-webkit-keyframes fuwafuwa {
	0% {-webkit-transform:translate(0, 0);}
	50% {-webkit-transform:translate(0, -13px);}
	100% {-webkit-transform:translate(0, 0);}
}
@-moz-keyframes fuwafuwa {
	0% {-moz-transform:translate(0, 0);}
	50% {-moz-transform:translate(0, -13px);}
	100% {-moz-transform:translate(0, 0);}
}
@media screen and (max-width: 480px) {
.footer {
	width: 100%;
	margin: 0;
	padding: 0;
}
.footer_inner {
	display: block;
	margin: auto;
	display:flex;
	justify-content: center;
}
.footer_left {
	width: 100%;
	text-align: center;
	margin: 3em 0;
	padding: 0;	
}
.footer_nav li {
	display: inline-block;
	margin: .2em 0;
}
.footer_nav li a {
	text-decoration: none;
	font-size: .7em;
	color: #fff;
}
.slash + .slash::before {
	content: "/";
	margin-left: .3em;
	margin-right: .3em;
}
.footer_link li {
	display: inline-block;
	margin: .8em 0;
}
.footer_link img {
	width: 3.5em;
}
.footer_right {
	display: none;
}
#maffy {
	display: none;
}
}