@charset "utf-8";

/* TOP :
-------------------------------------------------------------------- */
div#body{
font-family: "Hiragino Kaku Gothic ProN","メイリオ", sans-serif;
	overflow-x: hidden;
}
/* img
-------------------------------------------------------------------- */
div#body p{
	margin: 0;
	color: #000;
}
div#body img{
	width: 100%;
}
div#body .sns img{
	width:inherit;
}
div#body .inner{
	margin-left: 8%;
	margin-right: 8%;
}
div#body .aside{
	position: relative;
	padding-left: 15px;
	font-size: 12px;
	text-align: left;
	padding-top: 0 !important;
}
div#body .aside::before{
	position: absolute;
	content: "※";
	left: 0;
}
/* ========== pre_area ========== */
div#body .pre_area{
	position: relative;
}
div#body .pre_area p{
	position: relative;
}
div#body .usagi{
	position: absolute;
	opacity: 0;
}

/* ========== fv ========== */
div#body #fv h1{
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    width: 100%;
    padding-left: 10px;
    background: #fff;
	font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Hiragino Sans', 'メイリオ', Meiryo, sans-serif;
}
div#body #fv p{
	padding:10% 0 0;
}
div#body #fv p.logo{
	padding-top:8%;
}
div#body #fv .pre_area p{
	padding:0 0 0;
}
div#body #fv .aside_area{
	padding: 10% 4% 6%;
	background: linear-gradient(to bottom, #fff, #f5f6f9);
}
div#body #fv p.aside{
    padding-left: 1.5em;
}
div#body #fv .usagi{
	bottom:0;
	transform: translateY(30px);
	transition:0.5s  0.6s cubic-bezier(0,1.52,.51,1.46);
}
div#body #fv .usagi.on{
	transform: translateY(0px);
	opacity: 1;
}
/* ========== sec01 ========== */
div#body #sec01 {
	padding: 12% 6% 4%;
}
div#body #sec01 h2{
	margin-bottom: 10%;
}
div#body #sec01 .cach{
	margin-bottom: 12%;
}
div#body #sec01 .btn{
	margin-bottom: 12%;
}
div#body #sec01 .box_area .ph{
	display: inline-block;
}
div#body #sec01 .box_area {
	margin-bottom: 8%;	
}
div#body #sec01 .box_area .float{
	width:37%;
	margin-bottom: 1.5%;
}
div#body #sec01 .box_area01 .float{
	float: left;
	margin-right: 3%;
}
div#body #sec01 .box_area02 .float{
	float: right;
	margin-left: 3%;
}
div#body #sec01 .box_area .clear{
	clear: both;
}
div#body #sec01 .box_area p{
	font-size: 14px;
}
div#body #sec01 .box_area p .name{
	width: 60%;
}
div#body #sec01 .box_area01 p .name{
	margin-bottom: 12%;
}
div#body #sec01 .box_area02 p a{
	display: block;
	text-align: right;
	margin: 2% 0 8%;
	font-size: 16px;
	color: #5971ff;text-decoration: underline;
}
/* ========== youtube ========== */
div#body #sec01 .frame-wrapper__video {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  overflow: hidden;
  margin-bottom: 12%;
}
div#body #sec01 iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
/* ========== sec02 ========== */
div#body #sec02 {
	background:#eff3ff;
	padding: 12% 0 4%;
}
div#body #sec02 h2,
div#body #sec03 h2{
	margin-bottom: 12%;
}
div#body #sec02 .aside{
	position: absolute !important;
	width: 42%;
	left: 50%;
	bottom:4%;
}
div#body #sec02 .usagi{
	bottom:0;
	transform: translateX(30px);
	transition: 0.6s cubic-bezier(0,1.52,.51,1.46);
}
div#body #sec02  .usagi.on{
	transform: translateX(0px);
	opacity: 1;
}
/* ========== sec03 ========== */
div#body #sec03 {
	position: relative;
	padding: 10% 0;
}
div#body #sec03 .usagi{
	right: 0;
	top:2%;
	transform: translateX(-30px);
	transition: 0.6s cubic-bezier(0,1.52,.51,1.46);
}
div#body #sec03  .usagi.on{
	transform: translateX(0px);
	opacity: 1;
}
div#body #sec03 .item{
	padding-bottom: 12%;
	margin-bottom: 12%;
	border-bottom: 1px solid #000;
}
div#body #sec03 .item:last-of-type{
	padding-bottom: 0;
	margin-bottom:0;
	border-bottom: none;
}

/* ========== sec04 ========== */
div#body #sec04 {
	padding-bottom: 12%;
}
div#body #sec04 .usagi{
	top:0;
	transform: translateX(-30px);
	transition: 0.6s cubic-bezier(0,1.52,.51,1.46);
}
div#body #sec04  .usagi.on{
	transform: translateX(0px);
	opacity: 1;
}
div#body #sec04 #limited-3{
	position: absolute;
	left: 0;
	top:0;
}
/* ========== sec05 ========== */
div#body #sec05 {
	background:#eff3ff;
	padding: 12% 0;
}
div#body #sec05 .usagi{
	bottom:0;
	transform: translateY(30px);
	transition: 0.6s cubic-bezier(0,1.52,.51,1.46);
}
div#body #sec05  .usagi.on{
	transform: translateY(0px);
	opacity: 1;
}
div#body #sec05 #limited-5{
	margin: 8% 0 5%;
}
/* ========== sec06 ========== */
div#body #sec06 {
	background: #f5f6f7;
    padding-bottom: 12%;
}
div#body #sec06 h3{
	padding-top:12%;
    margin-bottom: 6%;
}
div#body #sec06 .aside{
    margin-top: 3%;
    padding-bottom: 8%;
}
div#body #sec06 .box_area{
	display: flex;
	justify-content: space-between;
	border:1px solid;
	padding: 5% 4%;
	font-size: 12px;
	margin-top: 4%;
	font-weight: bold;
}
div#body #sec06 .box_area.box_pink{
	color: #db0064;
	border-color: #db0064;
}
div#body #sec06 .box_area.box_pink p{
	color: #db0064;
}
div#body #sec06 .box_area.box_blue{
	color: #5971ff;
	border-color: #5971ff;
}
div#body #sec06 .box_area.box_blue p{
	color: #5971ff;
}
div#body #sec06 .box_area ul{
	display: flex;
	justify-content: center;
	width: 65%;
}
div#body #sec06 .box_area ul li{
	width: 40px;
	margin: 0 2%;
}
/*----------------------------------------


animation


----------------------------------------*/
div#body .fadein{
    opacity : 0;
    transform : translate(0, 20px);
    transition : all 400ms cubic-bezier(0.455, 0.030, 0.515, 0.955);
    }
div#body .on.fadein{
    opacity : 1;
    transform : translate(0, 0);
    }