@charset "UTF-8";

/* ---------------------------------------
  アニマルニア
-----------------------------------------*/

.bg {
	position: relative;
}

.bg::before {
	content: "";
	width: 100%;
	height: 100%;
	background-image: url(../img/animalnia/bg.png);
	position: absolute;
	left: 0;
	top: 0;
	opacity: .6;
	z-index: 1;
	mix-blend-mode: soft-light;
}

@media screen and (max-width: 768px) {
	.bg::before {
		background-image: url(../img/animalnia/bg_sp.png);
		background-size: 100% auto;
	}
}


/* sec_mv
-------------*/

#sec_mv {
	background-color: #e62e8b;
	margin-top: 7px;
}

#sec_mv .ttl {
	padding: 6px 0;
	background-color: #fcc800;
}

#sec_mv .ttl img {
	width: 574px;
}

#sec_mv .mv_main {
	position: relative;
	height: 35vw;
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: cover;
	background-image: url(../img/animalnia/mv_img01_pc.png);
}

#sec_mv .mv_main .mv_txt {
	width: 10.11%;
	position: absolute;
	left: 60.6%;
	top: 3.4%;
}

#sec_mv .mv_main .logo {
	width: 16.38%;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 6%;
	margin: 0 auto;
	transform: scale(0);
	transition: transform .9s ease;
}

#sec_mv.is-show .mv_main .logo {
	transform: scale(1);
}

@media screen and (max-width: 1800px) {
	#sec_mv .mv_main {
		height: 630px;
		background-size: 1800px auto;
	}

	#sec_mv .mv_main .mv_txt {
		width: 182px;
		left: calc(50% + 189px);
		top: 22px;
	}

	#sec_mv .mv_main .logo {
		width: 295px;
		bottom: 36px;
	}
}

@media screen and (max-width: 768px) {
	#sec_mv {
		margin-top: 7px;
	}

	#sec_mv .ttl {
		padding: 1.3vw 5vw;
		background-color: #fcc800;
	}

	#sec_mv .ttl img {
		width: 100%;
	}

	#sec_mv .mv_main {
		height: 132.133vw;
		background-image: url(../img/animalnia/mv_img01_sp.png);
		background-size: cover;
	}

	#sec_mv .mv_main .mv_txt {
		width: 24vw;
		left: auto;
		right: -1.6vw;
		top: -1vw;
	}

	#sec_mv .mv_main .logo {
		width: 71vw;
		left: 15vw;
		right: auto;
		bottom: 4vw;
		margin: 0 auto;
	}
}


/* sec_detail
-------------*/

#sec_detail {
	padding: 0 0 11.2%;
	background: #ff35a4 url(../img/animalnia/detail_bg.png) no-repeat center bottom -.3% /100% auto;
}

#sec_detail .detail01 {
	padding: 120px 0;
	background: url(../img/animalnia/detail01_bg.png) no-repeat left 50% top 52% / 1800px auto;
}

#sec_detail .detail02 {
	background: url(../img/animalnia/detail02_bg.png) no-repeat left 50% bottom 23% / 1800px auto;
}

#sec_detail .detail01 .inner {
	max-width: 950px;
}

#sec_detail .detail01 .txt {
	width: 464px;
}

#sec_detail .detail02 .wrap {
	padding-bottom: 25px;
}

#sec_detail .detail02 .img {
	margin-right: -27px;
}

#sec_detail .detail02 .txt {
	margin-top: -40px;
}

#sec_detail .youtube-wrap {
	position: relative;
	width: 840px;
	height: 472px;
	margin: 0 auto;
	overflow: hidden;
	z-index: 2;
	margin-bottom: 120px;
}

#sec_detail .youtube-wrap iframe {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
}

@media screen and (max-width: 1800px) {
	#sec_detail {
		padding: 0 0 230px;
		background: #ff35a4 url(../img/animalnia/detail_bg.png) no-repeat center bottom / 1800px auto;
	}
}

@media screen and (max-width: 768px) {
	#sec_detail {
		padding: 0 0 56vw;
		background: #ff35a4 url(../img/animalnia/detail_bg_sp.png) no-repeat center bottom /100% auto;
	}

	#sec_detail .detail01 {
		padding: 27vw 0 25.33vw;
		background: url(../img/animalnia/detail01_bg_sp.png) no-repeat 50% 3vw / 116.27vw auto;
	}

	#sec_detail .detail02 {
		background: none;
	}

	#sec_detail .detail01 .inner {
		max-width: inherit;
	}

	#sec_detail .detail01 .txt {
		width: 100%;
	}

	#sec_detail .detail01 .img {
		margin: 24vw -.53vw 0;
	}

	#sec_detail .detail02 .wrap {
		width: 100%;
		padding-left: 0;
	}

	#sec_detail .detail02 .img {
		margin: 0 -5.5vw 0 -12vw;
	}

	#sec_detail .detail02 .txt {
		width: 84vw;
		margin: 4vw auto 0;
	}

	#sec_detail .detail02_02 {
		position: absolute;
		width: 48vw;
		bottom: -4vw;
		left: 0;
		right: 0;
		margin: 0 auto;
		z-index: 1;
	}
	#sec_detail .youtube-wrap {
		width: 93vw;
		height: 52vw;
		margin: 4vw auto 12vw;
	}
	#sec_detail .youtube-wrap iframe {

	}
}


/* sec_present
-------------*/

#sec_present {
	padding: 110px 0;
	background: #f4ecce url(../img/animalnia/present_bg.png) no-repeat center 45%/ 1800px auto;
}

#sec_present::before,
#sec_present::after {
	content: "";
	width: 100%;
	height: 40px;
	background-repeat: repeat-x;
	background-size: auto 100%;
	position: absolute;
	left: 0;
}

#sec_present::before {
	background-image: url(../img/animalnia/present_bg_top.png);
	top: 10px;
}

#sec_present::after {
	background-image: url(../img/animalnia/present_bg_bottom.png);
	bottom: 10px;
}

#sec_present .img01 {
	margin-left: -10px;
	padding-top: 20px;
	width: 723px;
}

#sec_present .img02 {
	margin-left: -45px;
	width: 532px;
}

#sec_present .note {
	color: #834f2e;
	font-family: 'Koburina Gothic W3 JIS2004';
	font-size: 1.5rem;
	line-height: 1.866;
	letter-spacing: 0.05em;
	margin-top: 20px;
}

#sec_present .note span.bold {
	font-family: 'Koburina Gothic W6 JIS2004';
}

@media screen and (max-width: 768px) {
	#sec_present {
		padding: 24vw 0 16vw;
		background: #f4ecce url(../img/animalnia/present_bg_sp.png) no-repeat center 14vw / 116.67vw auto;
	}

	#sec_present::before,
	#sec_present::after {
		height: 8.27vw;
	}

	#sec_present::before {
		top: 1.4vw;
	}

	#sec_present::after {
		bottom: 1.4vw;
	}

	#sec_present .wrap {
		width: 100%;
	}

	#sec_present .img01 {
		margin: 0 -10.8vw;
		padding-top: 0;
		width: auto;
	}

	#sec_present .img02 {
		width: 107.2vw;
		margin-left: -11vw;
	}

	#sec_present .note {
		width: 84vw;
		font-size: 3.2vw;
		line-height: 2;
		margin: 8vw auto 0;
	}
}


/* sec_directing
-------------*/

#sec_directing {
	background-color: #fff;
	padding: 70px 0 30px;
}

#sec_directing .logowrap .koburina {
	font-size: 1.5rem;
	line-height: 1;
	letter-spacing: 0;
	margin-bottom: 10px;
}

#sec_directing .logowrap .logo {
	width: 158px;
}

#sec_directing .txt01 {
	width: 766px;
}

#sec_directing .txt01 p,
#sec_directing .txt02 p {
	font-size: 1.4rem;
	line-height: 1.85;
	letter-spacing: 0.08em;
}

#sec_directing .txt01 p a {
	text-decoration: underline;
}

#sec_directing .txt02 {
	width: 215px;
	padding-left: 15px;
	border-left: 1px solid #231815;
}

@media screen and (max-width: 768px) {
	#sec_directing {
		padding: 9vw 0 13vw;
	}

	#sec_directing .logowrap {
		text-align: center;
		margin-bottom: 7vw;
	}

	#sec_directing .logowrap .koburina {
		font-size: 4vw;
		margin-bottom: 1.4vw;
	}

	#sec_directing .logowrap .logo {
		width: 32.8vw;
		margin: 0 auto;
	}

	#sec_directing .txt01 {
		width: 100%;
	}

	#sec_directing .txt01 p,
	#sec_directing .txt02 p {
		font-size: 3.2vw;
		line-height: 2;
	}

	#sec_directing .txt01 p a {
		text-decoration: underline;
	}

	#sec_directing .txt02 {
		width: 100%;
		padding-left: 0;
		padding-top: 7vw;
		margin-top: 7vw;
		border-left: none;
		border-top: 1px solid #231815;
	}
}