@charset "UTF-8";


/*----------------------------------------
 main_v
----------------------------------------*/

.main_v2 {
width: 100%;
position: relative;
}

.main_v2 img {
width: 100%;
height: auto;
vertical-align: bottom !important;
}

.main_01_01{
width: 100%;
opacity:0;
animation-name:MV_01;
animation-duration:1s;
animation-fill-mode: forwards;
animation-timing-function: ease-in-out;
animation-delay: .5s;
position: absolute;
top: 0;
left: 0;
z-index: 9000;
}

@keyframes MV_01 {
0% {
opacity: 0;
filter: blur(5px);
}
100% {
opacity: 1;
filter: blur(0);
}
}

.main_01_02{
width: 100%;
opacity:0;
animation-name:MV_02;
animation-duration:1.5s;
animation-fill-mode: forwards;
animation-timing-function: ease-in-out;
animation-delay: 1s;
position: absolute;
top: 0;
left: 0;
z-index: 9001;
}

@keyframes MV_02 {
0% {
opacity: 0;
filter: blur(2px);
}
100% {
opacity: 1;
filter: blur(0);
}
}

.main_01_03{
width: 100%;
opacity:0;
animation-name:MV_03;
animation-duration:2.5s;
animation-fill-mode: forwards;
animation-timing-function: ease-in-out;
animation-delay: 2s;
position: absolute;
top: 0;
left: 0;
z-index: 9002;
}

@keyframes MV_03 {
0% {
opacity: 0;
filter: blur(2px);
}
100% {
opacity: 1;
filter: blur(0);
}
}

.main_01_04{
width: 100%;
opacity:0;
animation-name:MV_04;
animation-duration:3.5s;
animation-fill-mode: forwards;
animation-timing-function: ease-in-out;
animation-delay: 3s;
position: absolute;
top: 0;
left: 0;
z-index: 9003;
}

@keyframes MV_04 {
0% {
opacity: 0;
filter: blur(1px);
}
100% {
opacity: 1;
filter: blur(0);
}
}

.main_01_05{
width: 100%;
opacity:0;
animation-name:MV_05;
animation-duration:4.5s;
animation-fill-mode: forwards;
animation-timing-function: ease-in-out;
animation-delay: 4s;
position: absolute;
top: 0;
left: 0;
z-index: 9003;
}

@keyframes MV_05 {
0% {
opacity: 0;
filter: blur(1px);
}
100% {
opacity: 1;
filter: blur(0);
}
}

.slide-class {
width: 100%;
margin: 0 auto;
font-size: 0;
line-height: 0;
position: relative;
}

.animation-slide div{
position: relative;
width: 100%;
}

/*.main_v2 .animation-slide div::after{
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
background-color: rgba(255, 255, 255, 0.8);
width: 40%;
}*/

/* ロードのアニメーション */
.slick-slide .load_line {
width:100%;
height:5px;
margin:0;
background:#005024;
position:absolute;
opacity: 0;
bottom: 0;
}

.slick-active .load_line {
animation:LOAD 6s ease-in-out normal both;
}

@keyframes LOAD {
  0% { opacity: 0; width:0px;}
  10% { opacity: 1;}
  100% { opacity: 1; width:100%;}
}

.animation-slide .cap{
position:absolute;
top: auto;
bottom:30px;
left: 0;
font-size: 1rem !important;
padding: 0 5px;
letter-spacing: 0 !important;
width: 100%;
}


.main_v{
width: 100%;
height: 100vh;
position: relative;
overflow: hidden;
background-color: #efefef;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}

.main_v .mv_logo{
width: 20%;
opacity:0;
animation-name:MVLogo;
animation-duration:4s;
animation-fill-mode: forwards;
animation-timing-function: ease-in;
animation-delay: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9900;
}

.mv_left{
position: relative;
overflow: hidden;
width: 50%;
height: 100vh;
background-color: #c8e2f0;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
padding: 100px 0;
}

.mv_left:before{
width: 100%;
height: 100vh;
animation-name:MVLeft;
animation-duration:0.5s;
animation-fill-mode: forwards;
animation-timing-function: ease-in;
animation-delay: 1.5s;
background-color: #efefef;
position: absolute;
left: 0;
top: 0;
content: '';
pointer-events: none;
}


.mv_right{
position: relative;
overflow: hidden;
width: 50%;
height: 100vh;
background-color: #f7f1dd;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
padding: 100px 0;
}

.mv_right:before{
width: 100%;
height: 100vh;
animation-name:MVRight;
animation-duration:0.5s;
animation-fill-mode: forwards;
animation-timing-function: ease-in;
animation-delay: 1.5s;
background-color: #efefef;
position: absolute;
left: 0;
top: 0;
content: '';
pointer-events: none;
}

.mv_title{
width: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
flex-direction: column;
}

.title01{
width: 30%;
opacity:0;
animation-name:MVFade;
animation-duration:0.5s;
animation-fill-mode: forwards;
animation-timing-function: ease-in;
animation-delay: 4s;
margin-bottom: 20px;
}

.title02{
width: 40%;
opacity:0;
animation-name:MVFade;
animation-duration:0.5s;
animation-fill-mode: forwards;
animation-timing-function: ease-in;
animation-delay: 5.5s;
}

.title03{
width: 30%;
opacity:0;
animation-name:MVFade;
animation-duration:0.5s;
animation-fill-mode: forwards;
animation-timing-function: ease-in;
animation-delay: 4.5s;
margin-bottom: 20px;
}

.title04{
width: 40%;
opacity:0;
animation-name:MVFade;
animation-duration:0.5s;
animation-fill-mode: forwards;
animation-timing-function: ease-in;
animation-delay: 5.5s;
}

.mv_img{
width: 100%;
opacity:0;
animation-name:MVFade;
animation-duration:2s;
animation-fill-mode: forwards;
animation-timing-function: ease-in;
animation-delay: 5s;
position: relative;
}

.mv_img_top{
width: 100%;
position: absolute;
top: -30px;
left: 0;
}

.mv_img_bottom{
width: 100%;
position: absolute;
bottom: -30px;
left: 0;
}

.mv_center{
width: 10%;
opacity:0;
animation-name:MVFade;
animation-duration:1.5s;
animation-fill-mode: forwards;
animation-timing-function: ease-in;
animation-delay: 6.5s;
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9910;
}

@keyframes MVFade {
0% {
 opacity: 0;
}

100% {
 opacity:1;
 }
}


@keyframes MVLogo {
0% {
 opacity: 0;
}

30% {
 opacity: 1;
}

50% {
 opacity: 1;
}

100% {
 opacity:0;
 }
}

@keyframes MVLeft {
  100% {
    transform: translateY(100%);
  }
}

@keyframes MVRight {
  100% {
    transform: translateY(-100%);
  }
}


.left_scroll,
.right_scroll {
display: none;
}

.left_scroll img,
.right_scroll img {
vertical-align: bottom;
width: 100% !important;
}

.sokenPaintLink a,.sokenPaintLink a:hover {
	color: #eee;
}

/* sp */
@media screen and (max-width : 896px) {

.main_v .mv_logo{
width: 50%;
}

.mv_left{
padding: 80px 0;
}

.mv_right{
padding: 80px 0;
}

.title01,
.title03{
width: 60%;
}

.title02,
.title04{
width: 70%;
}

.mv_center{
width: 20%;
top: 40%;
}

.left_scroll,
.right_scroll {
width: 300% !important;
}

.mv_img_top{
width: 100%;
position: absolute;
top: 0;
left: 0;
}

.mv_img_top img{
vertical-align: top !important;
}

.mv_img_bottom{
width: 100%;
position: absolute;
bottom: 0;
left: 0;
}

}



/*----------------------------------------
ポップアップバナー（プロモ追加）
----------------------------------------*/

.popupBnr {
	display: none;
	position: fixed;
	bottom: 15px;
	left: 15px;
	z-index: 100;
}
.closeBtn {
	position: absolute;
	top: 0;
	right: 0;
	cursor: pointer;
	width: 20px;
}

.closeBtn img {
	vertical-align: top;
}

@media screen and (min-width: 320px) and (max-width: 767px)  {

	.popupBnr {
		bottom: 55px;
		left: 50%;
		transform: translateX(-50%);
		width: calc(100% - 140px);
	}


}



/*----------------------------------------
GW、お盆の休暇
----------------------------------------*/
.holiday {
	margin: 80px auto;
	text-align: center;
}

.holiday .border {
	display: inline-block;
	padding: 20px 50px;
	border: 2px solid #3e3a39;
}

.holiday .title {
	font-size: 18px;
	margin-bottom: 10px;
}

.holiday p {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.8;
}

.holiday .textSmall {
	font-size: 14px;
}



@media screen and (min-width: 320px) and (max-width: 767px)  {
	.holiday {
		margin: 50px auto;
	}

	.holiday .border {
		padding: 20px 25px;
	}

	.holiday .title {
		font-size: 16px;
	}

	.holiday p {
		font-size: 14px;
		font-weight: 600;
	}

	.holiday .textSmall {
		font-size: 12px;
	}


}


/*----------------------------------------
TVCM
----------------------------------------*/

.tvcm {
    margin: 80px auto 80px;
    text-align: center;
	font-weight: 600;
}

.tvcm .cm_img {
	width: 90%;
	max-width: 500px;
	margin: 40px auto 0;
	cursor: pointer;
}

@media screen and (min-width: 320px) and (max-width: 767px)  {

	.tvcm {
		margin: 40px auto ;
	}
}

#center_banner {
position: fixed;
bottom: 20px;
left: 20px;
list-style-type: none;
z-index: 9990;
width: 420px;
height: auto;
animation: BannerIn4 0.6s ease-in forwards;
animation-delay: 2s;
opacity: 0;
}

#center_banner_close {
position: absolute;
margin: 0;
padding: 0;
z-index: 9991;
width: 30px;
height: 30px;
top: -15px;
right: -15px;
cursor: pointer;
}

#center_banner img {
width: 100%;
height: auto;
}

#center_banner img:hover {
opacity: 1 !important;
}

@keyframes BannerIn4 {
0% {
  opacity: 0;
  /*初期状態では透明に*/
  }
100% {
  opacity: 1;
  }
}

.cm_img{
border: 1px solid #fff;
}

.center_banner_text{
color: #fff;
font-family: "Noto Sans JP", sans-serif;
font-weight: 500;
font-size: 2rem;
text-align: center;
line-height: 1.5;
letter-spacing: 0;
position: absolute;
bottom: 5%;
left: 0;
right: 0;
}

@media screen and (min-width: 320px) and (max-width: 767px)  {
	#center_banner{
	bottom: 120px;
	left: 5%;
	width: 90%;
	}
}