@charset "utf-8";

@keyframes floatX {
  from {
	opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, 10px, 0);
  }
  to {
	opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.floatX {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  animation-name: floatX;
}

@keyframes floatY {
  from {
    transform: translate3d(-10px, 0, 0);
  }
  50% {
    transform: translate3d(10px, 0, 0);
  }
  to {
    transform: translate3d(-10px, 0, 0);
  }
}
.floatY {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  animation-name: floatY;
}

@keyframes scaleZ {
  from {
    transform: scale3d(2, 2. 0);
  }
  50% {
    transform: scale3d(1, 1. 0);
  }
  to {
    transform: scale3d(2, 2. 0);
  }
}
.scaleZ {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  animation-name: scaleZ;
}

@keyframes hoverX {
  from {
	opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  50% {
	opacity: 0.6;
    transform: translate3d(0, -8px, 0);
  }
  to {
	opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.hoverX {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  animation-name: hoverX;
}

@keyframes bounceInUpMini {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  from {
    opacity: 0;
    transform: translate3d(0, 100px, 0);
  }

  60% {
    opacity: 1;
    transform: translate3d(0, -20px, 0);
  }

  75% {
    transform: translate3d(0, 10px, 0);
  }

  90% {
    transform: translate3d(0, -5px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.bounceInUpMini {
  animation-name: bounceInUpMini;
}

@keyframes rotate {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}

.rotate {
  animation-name: rotate;
	-webkit-animation-timing-function: linear;
	animation-timing-function: linear;
}

@keyframes fadeInLeftMini {
  from {
	opacity: 0;
    transform: translate3d(-20px, 0, 0);
  }
  to {
	opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.fadeInLeftMini {
  animation-name: fadeInLeftMini;
}

@keyframes fadeInDownMini {
  from {
	opacity: 0;
    transform: translate3d(0, -40px, 0);
  }
  to {
	opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.fadeInDownMini {
  animation-name: fadeInDownMini;
}


/* --------------------------------------------------
-------------------------------------------------- ページ全体 */
html {
	width: 100%;
	min-height: 100%;
	-webkit-text-size-adjust: 100%;
	overflow-x: hidden !important;
}
body {
	width: 100%;
	min-height: 100%;
	color: #484055;
	font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "游ゴシック", YuGothic, sans-serif;
	font-size: 20px;
	line-height: 1.5;
	overflow: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-smoothing: antialiased;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
	-webkit-text-size-adjust: 100%;
}

a:link {
	color: #a08c5a;
	text-decoration: none;
}
a:visited {
	color: #a08c5a;
	text-decoration: none;
}
a:hover {
	color: #a08c5a;
	text-decoration: underline;
}
a:active {
	color: #a08c5a;
	text-decoration: underline;
}

a {
	-webkit-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	-o-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
}
a:hover {
	opacity: 0.6;
	-webkit-transition: 0.1s ease-in-out;
	-moz-transition: 0.1s ease-in-out;
	-o-transition: 0.1s ease-in-out;
	transition: 0.1s ease-in-out;
}
.btn a:hover {
	opacity: 1;
}
.btn a img {
	opacity: 1;
	-webkit-animation-duration: 0.8s;
	animation-duration: 0.8s;
}
.btn .disabled {
	opacity: 0.5;

}
.btn .disabled img {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    filter: grayscale(100%);
}

.pc-only {
	display: block;
}
.sp-only {
	display: none;
}


/* --------------------------------------------------
-------------------------------------------------- Clearfix */
.cf:before, .cf:after {
	content: "";
	display: table;
}
.cf:after {
	clear: both;
}
.cf {
	*zoom: 1;
}


/* --------------------------------------------------
-------------------------------------------------- ページ切り替え演出 */
#overlay {
	display: none;
	position: fixed;
	width: 100%;
	height: 100%;
	background-color: #000;
	z-index: 1000;
}

.inner {
	position: relative;
	margin: 0 auto;
	width: 1000px;
}


/* --------------------------------------------------
-------------------------------------------------- フッター */
footer {
	padding: 20px 0;
	background-color: #e4007f;
	color: #ffff00;
	text-align: center;
}
footer .pagetop {
	display: block;
	margin: 0 auto 20px auto;
}
footer .mf-logo {
	display: block;
	margin:0 auto 20px auto;
}
footer .sns {
	margin-bottom: 10px;
}
footer .sns ul {
	font-size: 0;
}
footer .sns ul li {
	display: inline-block;
}
footer .sns ul li:not(:last-of-type) {
	margin-right: 10px;
}
footer small {
	font-size: 12px;
}


/* ----------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------- ここからスマートフォン */

@media screen and (max-width: 640px) {
.inner {
	width: auto;
}
img {
	width: 100%;
}

.pc-only {
	display: none;
}
.sp-only {
	display: block;
}


/* --------------------------------------------------
-------------------------------------------------- フッター */
footer {
	padding: 6% 0;
}
footer .pagetop {
	display: block;
	margin-bottom: 4%;
	width: 9%;
}
footer .mf-logo {
	margin-bottom: 4%;
	width: 22%;
}
footer .sns {
	margin-bottom: 2%;
}
footer .sns ul li:not(:last-of-type) {
	margin-right: 2%;
}
footer small {
	font-size: 1.875vw;
}
}