@charset "UTF-8";

/* CSS Document */

html {
  font-size: 62.5%;
  width: 100%;
}
body {
	font-family: 'Kiwi Maru', serif;
  font-size: 1.6em;
  line-height: 2.4rem;
	color: #50443c;
	text-align: center;
  background-color: #f4d1c9;
}

/*HEADER*/

header {
  padding: 30px 30px 0px;
  position: relative;
}
.title {
  text-align: left;
  font-size: 2.2rem;
}
.gnavi{
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    position: absolute;
    top: 20px;
    right: 30px;
}

.gnavi li a{
    display: block;
    padding:10px 30px;
    text-decoration: none;
    color: #50443c;
}
.line-first{
  background-color: #50443c;
  height: 1px;
  width: 100%
}
.top-usagi {
  display: none;
}
.sns {
  text-decoration: none;
  color: #f4d1c9;
}
/* HEADER レスポンシブ */
@media (max-width:450px){
.title {
  text-align: center;
  font-size: 1.8rem;
}
.top-usagi {
  display: block;
  width: 50%;
  margin: 20px auto 50px;
}
.gnavi{
    top: 85%;
    right: 20px;
}
.gnavi li a{
    padding:10px 15px 30px;
}
}

.rollAnime.roll span {
    transition-property: opacity,transform;
    transform: rotateY(360deg);
    transition: all .8s cubic-bezier(.77,0,.175,1);
    transition-timing-function: cubic-bezier(.77,0,.175,1);
    display: inline-block;
}
h3{
  padding: 50px 0px;
  font-size: 2.4rem;
}
h4{
  padding: 30px 0px 90px;
  font-size: 2.4rem;
}
footer {
  padding: 0px 30px 30px;
  position: relative;
}
.smp {
  display: none;
}
.br-sm {
  display: none;
}
@media (max-width:850px){
  .br-sm {
    display: block;
  }
}
@media (max-width:450px){
  .smp {
    display: block;
  }
  .br-sm {
    display: none;
  }
  h3{
  padding: 50px 0px 30px;
  font-size: 1.8rem;
}
}
.footer-nav__ul{
    display: flex;
    flex-wrap: wrap;
    margin:0 0 50px 0;
    list-style: none;
}

.footer-nav__ul li a{
    display: block;
    padding:10px 30px;
    text-decoration: none;
    color: #333;
}

.footer-nav__ul li{
    margin-bottom:20px;
}

.footer-nav__ul li a{
	position: relative;
	overflow: hidden;
	transition: all .2s;
}

.footer-nav__ul li.current a,
.footer-nav__ul li a:hover{
    background: #50443c;
	color:#fff;
}
.footer-nav__ul li a:hover{
	transition-delay: .5s;
}
.footer-nav__ul li a:before,
.footer-nav__ul li a:after {
    content: "";
    position: absolute;
    left: 0;
    height: 1px;
    width:100%;
    background: #50443c;
	transition: all .5s;
}
.footer-nav__ul li a::before {
    top: 0;
	transform: translateX(-100%);
}
.footer-nav__ul li a::after {
    bottom: 0;
	transform: translateX(100%);
}
.footer-nav__ul li a:hover::before ,
.footer-nav__ul li a:hover::after {
	transform: translateX(0);
}
.footer-text {
  padding-bottom: 90px;
}
.footer-text__title {
  font-size: 2.4rem;
  margin-bottom: 90px;
}
.footer-text__link {
  border: 2px solid #50443c;
  padding: 30px;
  text-decoration: none;
  font-size: 2.4rem;
  color: #50443c;
}
@media (max-width:450px){
.footer-nav__ul li a{
    padding:10px 15px;
}
.footer-text__title {
  font-size: 2.0rem;
  margin-bottom: 50px;
}
.footer-text__link {
  border: 1px solid #50443c;
  padding: 30px;
  text-decoration: none;
  font-size: 2.0rem;
  color: #50443c;
}
}