@charset "UTF-8";
	* {
	box-sizing: border-box;
}

p, h1, h2, h3, h4, h5 {
	line-height: 1.8;
}

em {
	font-style: normal;
}

.inner, .campaign__inner, .serena__inner, .movie__inner, .staincare__inner, .entry__inner, .apagard_series__inner, .apagard_detail__inner, .mhap__inner, .overview__inner {
	padding: 100px 4vw;
	max-width: 1200px;
	margin: auto;
}
body{
	position: relative;
	z-index: -1
}

html {
	font-size: 62.5%;
}

.kidswrap {
	font-size: 16px;
	box-sizing: border-box;
	color: #333;
	font-family: sans-serif;
	overflow-x: hidden;
	position: relative;
	z-index: -1
}
/*section{
	overflow-x: hidden;
}*/
button {
	background: none;
	margin: 0;
	padding: 0;
	border: none;
	display: block;
}

img {
	max-width: 100%;
	vertical-align: bottom;
}

a {
	color: #333;
	text-decoration: underline;
	transition: all .5s;
}
a:hover {
	opacity: .8;
}

.btn{
  display: block;
  animation: btn_animation 3s infinite;
}
@media (max-width:900px) {
.sp_btn{
	max-width: 578px;
}
}
@media (max-width:767px) {
.sp_btn{
	max-width: calc(100% - 30px);
	width: 89%;
}
}
@keyframes btn_animation {
    0% {
        transform: scale(1.05)
    }
    5% {
        transform: scale(1)
    }
    95% {
        transform: scale(1)
    }
    100% {
        -webkit-transform: scale(1.05)
    }
}
.main-visual {
	text-align: center;
	background: url("../img/main_bg.png") no-repeat;
	background-size: 100%;
	background-position: center;
}
@media (max-width:1000px) {
.main-visual {
	background-size: cover;
}
}
.main-visual__inner {
	padding: 50px 30px 40px 30px;
	box-sizing: border-box;
}

.main-visual__content {
	max-width: 1180px;
	margin: 0 auto;
}
.main-visual__copy__main{
	max-height: calc(100vh - 40px);
}
.main-visual__copy__main img{
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;	
}
@media (max-width:1580px) {
.main-visual__inner {
	padding: 10px 30px 40px 30px;
}
	.main-visual__copy__main{
	height: 100vh;
}
}
@media (max-width:900px) {
.main-visual__inner {
	padding:0;
}
	.main-visual__copy__main{
	height: auto;
		max-height:  none;
}
}

.section__inner{
	max-width: 1100px;
	margin: 0 auto;
}
@media (min-width:769px) {
.award_top {
	background: url(../img/award_top.png) no-repeat;
	background-size: 100%;
	background-position: top;
	z-index: -1;
	position: relative;
}
}
.award_bottom {
	background: url(../img/award_bottom.png) no-repeat;
	background-size: 100%;
	background-position: top;
	z-index: -1;
	position: relative;
}
.award_bottom_inner{
	background: url(../img/award_bottom_inner.png) no-repeat;
	background-size: 1692px;
	background-position: top;
	position: relative;
	margin-bottom: 20px;
}
@media (min-width:769px) {
.award_bottom .section__inner .animated{
	margin-top: 15px;
}
}
@media (min-width:768px) and (max-width:800px) {
.award_bottom_inner img{
	padding-left: 50px;
	padding-right: 30px;
}
}
award_bottom_inner

.award_bottom　.section__inner .animated:first-child{
	margin-top: 0px;
}
.award_bottom h2 img{
	margin-top: -15px;
}

.ribon01{
	position: absolute;
	z-index: 2;
	top: -170px;
	right: calc(50% - 630px)
}


.products_top{
	background: url(../img/products_top.png) no-repeat;
	background-size: 1600px;
	background-position: top;
	z-index: -1;
	position: relative;
	padding-top: 0px;
	padding-bottom: 150px;
}
@media (max-width:1100px) {
.products_top{
	padding-bottom: 70px;
}
}


.product01 {
	position: relative;
}
.product01 .product01_btn{
	position: absolute;
	bottom: 67px;
	left: calc(50% + 25px);
}
.ribon02{
	position: absolute;
	z-index: 2;
	top: 80px;
	right: calc(50% - 630px)
}
.product02 {
	position: relative;
	margin-top: 20px;
}
.product02 .product02_btn{
	position: absolute;
	bottom: 65px;
	left: 96px;
}
.ribon03{
	position: absolute;
	z-index: 2;
	top: 320px;
	right: calc(50% - 650px)
}
.product03{
	text-align: right;
	margin-top: 25px;
}
.product04{
	margin-top: 30px;
	text-align: center;
}
.product04 button{
	text-align: center;
	margin: 0 auto;
}
@media (max-width:1100px) {
	.product01 .product01_btn{
	bottom: 10%;
	max-width: 240px;
}
.product02 .product02_btn{
	position: absolute;
	bottom: 10%;
	left: 9%;
	max-width: 240px;
}
}
@media (max-width:900px) {
	.product01 .product01_btn{
	bottom: 8%;
	max-width: 220px;
}
.product02 .product02_btn{
	position: absolute;
	bottom: 8%;
	left: 9%;
	max-width: 220px;
}
}
@media (max-width: 767px) {
	.product01 .product01_btn{
	bottom: 8%;
	max-width: 68%;
		left: calc(50% - 34%);
}
.product02 .product02_btn{
	position: absolute;
	bottom: 8%;
	max-width: 68%;
		left: calc(50% - 34%);
}
}
.products_bottom{
	background: url(../img/products_bottom.png) no-repeat;
	background-size: 100%;
	background-position: top;
	z-index: -1;
	position: relative;
	padding-top: 60px;
	/*padding-bottom: 60px;*/
}
.products_bottom2{
	background: url(../img/products_bottom2.png) no-repeat;
	background-size: 1560px;
	background-position: top;
	padding-top: 180px;
	margin-top: -60px;
	padding-bottom: 70px;
}

@media (max-width:1100px) {
.products_bottom2{
	padding-top: 120px;
	margin-top: -60px;
	padding-bottom: 50px;
	padding-left: 50px;
	padding-right: 50px;
}
}


.products_bottom .section__inner {
    max-width: 990px;
    margin: 0 auto;
	background: url(../img/products_bottom2_inner.png) no-repeat #FFF;
	background-size: 1040px;
	border-radius: 35px;
	padding: 90px 70px;
}
.ribon04{
	position: absolute;
	z-index: 2;
	bottom: 50px;
	right: calc(50% - 480px)
}

.products_bottom2 h2{
	margin-bottom: 26px;
}
.products_bottom2 .mhap{
	margin-top: 36px;
	margin-bottom: 40px;
}
@media (max-width:767px) {
.products_bottom{
	background: none;
	padding-top: 20px;
}
.products_bottom2{
	background:none;
	
        padding-top: 0;
        margin-top: 0;
        padding-bottom: 0;
        padding-left: 0;
        padding-right: 0;
}
	.products_bottom .section__inner{
    margin: 0 auto;
    background: none;
    border-radius: 0;
    padding: 0;
	}
	.products_bottom2 img.sp{
		width: 100%
	}
	.products_bottom2 h2 {
    margin-bottom: 0px;
}
	.products_bottom2 .mhap {
    margin-top: 0;
    margin-bottom: 0;
}
}

/*
.present{
	background: url(../img/present.png) no-repeat #fff9f3;
	background-size: 100%;
	background-position: top;
	z-index: -1;
	position: relative;
	padding-top: 265px;
}
*/
.present{
	background: url(../img/present_top.png) no-repeat #fff9f3;
	background-size: 100%;
	background-position: top;
	z-index: -1;
	position: relative;
	padding-top: 1px;
}
.present_bg{
	background: url(../img/present_bg.png) no-repeat;
	background-size: 1868px;
	background-position: top;
	padding-top: 265px;
	margin-top: -35px;
}

.present_inner{
	background: url(../img/present.png) no-repeat;
	background-size: 1600px;
	background-position: top;
	padding-top: 1px;
	padding-bottom: 70px;
}
.present .section__inner {
    max-width: 990px;
    margin: 0 auto;
	padding: 0 70px;
}
.present h2{
	margin-bottom: 20px;
}

.present_btn .btn{
    margin: 50px auto 0;
    text-align: center;
}
@media (max-width:900px) {
.present{
	background-size: cover;
}
}

@media (max-width:767px) {
.present{
	background: none;
	background-size: 100%;
	background-position: top;
	z-index: -1;
	position: relative;
	padding-top: 0;
}
.present_bg{
	background: none;
	padding-top: 0;
	margin-top: 0;
}

.present_inner{
	background: none;
	padding-top: 0px;
	padding-bottom: 0px;
}
	.present .section__inner {
	padding: 0;		;
}
.present h2{
	margin-bottom: 0px;
}
.present_btn .btn{
    margin: 30px auto ;
}	
}
.button_area{
	padding-top: 50px;
	padding-bottom: 48px;
}
.button_area .btn{
	text-align: center;
	margin: 0 auto;
	max-width: 578px;
}
@media (max-width:768px) {
.button_area {
    padding-top: 40px;
    padding-bottom: 38px;
}
}
@media (min-width:768px) {
.sp {
	display: none;
}
}
.pc {
	display: block;
}


/*アニメーション*/
@media (min-width:768px) {

.animated {
  /* 最初は非表示 */
  opacity: 0;
  visibility: hidden;
  transform: translateY(30px);
  transition: all 1s;
}
/* フェードイン時に入るクラス */
.js-fadein {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}
}

.text_c{
	text-align: center;
}
@media (max-width:768px) {
img {
  width: auto;
  max-width: 100%;
  height: auto; /* 必要に応じて追加 */
}
	

	.section__inner{
		max-width: 100%!important;
	}	
}
@media (max-width:1000px) {
.ribon01,.ribon02,.ribon03,.ribon04{
	display: none;
}
	.product03 p{
		text-align: right
	}
	.product03 p img{
		width: 375px;
		max-width: 100%;
	}
	
}

@media (min-width:768px) and (max-width:1100px) {
.award_bottom h2 img,.product01,.product02,.product03{
	padding-left: 30px;
	padding-right: 30px;
}
}
@media (max-width:767px) {
.award_bottom{
	background: none;
}
	.award_bottom_inner{
		margin-bottom: 0
	}
	.product03 img{
		max-width: 375px;
	}
	.product02,.product03{
		margin-top: 0
	}
	.product04{
		margin-top: 40px;
	}
}