@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');


br.pc-none,
#kanzenmeshi .sp{
    display: none;
}
#kanzenmeshi ul, #kanzenmeshi p, #kanzenmeshi dl{ margin-bottom: 0;}
#kanzenmeshi dd{ margin-left: 0;}

#kanzenmeshi {
	width: 100%;
    overflow: hidden;
	position: relative;
	color: #000;
	background: #eceae1;
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
	font-size: 15px;
}
#kanzenmeshi img{ 
    width: 100%; 
    vertical-align: bottom; 
    -webkit-backface-visibility: hidden; 
    backface-visibility: hidden;
}

#kanzenmeshi .deco{
    position: absolute;
}

/*--- mv ---*/
#kanzenmeshi #mv{
    height: 52.3vw;
    width: 100%;
    position: relative;
}
#kanzenmeshi #mv::before,
#kanzenmeshi #mv::after{
    content: "";
    display: block;
    width: 100%;
    height: 2.5vw;
    background: #100964;
    position: absolute;
    left: 0;
    z-index: 1;
}
#kanzenmeshi #mv::before{
    top: 0;
}
#kanzenmeshi #mv::after{
    bottom: 0;
}
#kanzenmeshi #mv .mvInner{
    position: relative;
    display: flex;
    justify-content: space-between;
    height: 100%;
}
#kanzenmeshi #mv .mvInner .menuImage{
    width: 50%;
    height: 100%;
    position: relative;
}    
#kanzenmeshi #mv .mvInner .menuImage.jan{
    background: url("../images/menu/kanzenmeshi/bg_jan.jpg") center bottom / cover no-repeat;
}
#kanzenmeshi #mv .mvInner .menuImage.gra{
    background: url("../images/menu/kanzenmeshi/bg_gra.jpg") center bottom / cover no-repeat;
}
#kanzenmeshi #mv .mvInner .menuImage .badge{
    width: 19%;
    margin-top: 33.6%;
}
#kanzenmeshi #mv .mvInner .menuImage .detail{
    width: 38.1%;
    margin-top: 77.6%;
}
#kanzenmeshi #mv .mvInner .menuImage.jan .badge,
#kanzenmeshi #mv .mvInner .menuImage.jan .detail{
    left: 4%;
}
#kanzenmeshi #mv .mvInner .menuImage.gra .badge,
#kanzenmeshi #mv .mvInner .menuImage.gra .detail{
    right: 4%;
}

#kanzenmeshi #mv .title{
    width: 86%;
    left: 7%;
    top: 2.5vw;
}
#kanzenmeshi #mv .title .date{
    width: 11.6vw;
    left: -5.4%;
    margin-top: calc((18 / 1440) * 100%);
}
#kanzenmeshi #mv .kanzenmeshiLogo{
    width: 18%;
    left: 41%;
    margin-top: 16.8%;
}

#kanzenmeshi #mv .colabo{
    width: 27.8%;
    left: 36.1%;
    margin-top: 43.4%;
}

/*--- contents ---*/
#kanzenmeshi #contents .contentsInr{
    max-width: 1200px;
    margin: 50px auto;
    width: 85%;
}
#kanzenmeshi .head01{
    max-width: 1200px;
    width: 85%;
    margin: 0 auto;
}
#kanzenmeshi #contents .contentsInr .head01{
    width: 100%;
    margin-bottom: 50px;
}
#kanzenmeshi #contents .reason + .reason{
    margin-top: 80px;
}
#kanzenmeshi #contents .reason01{
    background: #fff;
    padding: 0 0 50px 0;
}
#kanzenmeshi #contents .reason .notice{
    max-width: 600px;
    margin: 50px auto 0;
}
#kanzenmeshi #contents .reason .notice li{
    padding-left: 1em;
    text-indent: -1em;
    margin-bottom: 10px;
    font-size: 12px;
}
#kanzenmeshi #contents .reason .notice li:last-child{
    margin-bottom: 0;
}

/*--- menu-box ---*/
#kanzenmeshi .menu-box{
}


/*--- last ---*/
#kanzenmeshi #last {
    margin-top: 80px;
    position: relative;
}
#kanzenmeshi #last .inr{
    position: relative;
    overflow: hidden;
    margin-top: 30px;
    padding-bottom: 30px;
}
#kanzenmeshi #last .logo{
    width: 160px;
    margin: 0 auto;
}
#kanzenmeshi #last .image{
    position: absolute;
    bottom: 0;
    width: 900px;
}
#kanzenmeshi #last .image.jan{
    left: 50%;
        transform: translateX(-100%);
}
#kanzenmeshi #last .image.gra{
    right: 50%;
    transform: translateX(100%);
}
#kanzenmeshi #last .band{
    background: #100964;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
#kanzenmeshi #last .band img{
    max-width: 860px;
    display: block;
}

/*-------------------------------------------
Animation
-------------------------------------------*/

#kanzenmeshi .topToBottom,
#kanzenmeshi .bottomToTop,
#kanzenmeshi .leftToRight,
#kanzenmeshi .rightToLeft,
#kanzenmeshi .fadein,
#kanzenmeshi .slideIn{
	opacity: 0;
}

#kanzenmeshi #mv .slideIn,
#kanzenmeshi .in .slideIn,
#kanzenmeshi .in.slideIn{
	animation: slideIn .25s ease forwards;
}

#kanzenmeshi .in .topToBottom{
	animation: topToBottom .25s ease forwards;
}
#kanzenmeshi .in .bottomToTop{
	animation: bottomToTop .25s ease forwards;
}
#kanzenmeshi .in .leftToRight{
	animation: leftToRight .25s ease forwards;
}
#kanzenmeshi .in .rightToLeft{
	animation: rightToLeft .25s ease forwards;
}
#kanzenmeshi .in .fadein{
	animation: fadein .25s ease forwards;
}

@keyframes blurIn {
	0% { transform: translate(0,50%); opacity: 0; -ms-filter: blur(6px); filter: blur(6px); }
	100% { transform: translate(0,0); opacity: 1; -ms-filter: blur(0); filter: blur(0); }
}
@keyframes slideIn {
	0% { transform: translate(0,10%); opacity: 0;}
	100% { transform: translate(0,0); opacity: 1;}
}
@keyframes fadein {
	0% { opacity: 0; }
	100% { opacity: 1; }
}
@keyframes topToBottom {
	0% { transform: translate(0, -10%); opacity: 0;}
	100% { transform: translate(0, 0); opacity: 1;}
}
@keyframes bottomToTop {
	0% { transform: translate(0, 10%); opacity: 0;}
	100% { transform: translate(0, 0); opacity: 1;}
}
@keyframes leftToRight {
	0% { transform: translate(-10%, 0); opacity: 0;}
	100% { transform: translate(0, 0); opacity: 1;}
}
@keyframes rightToLeft {
	0% { transform: translate(10%, 0); opacity: 0;}
	100% { transform: translate(0, 0); opacity: 1;}
}
@keyframes boxin{
    0%{ transform: translate(0,25%); opacity: 0; }
    100%{  transform: translate(0,0%);opacity: 1;}
}

@keyframes leftToRight02 {
	0% { transform: translate(-10%, -50%); opacity: 0;}
	100% { transform: translate(0, -50%); opacity: 1;}
}

#mv .clipAnimationLtoR,
.clipAnimationLtoR {
    clip-path: inset(0 100% 0 0);
}

#mv .clipAnimationLtoR,
.in .clipAnimationLtoR,
.in.clipAnimationLtoR{
    animation: clipAnimationLtoR .4s ease-in-out forwards;
}

@keyframes clipAnimationLtoR {
	0% { clip-path: inset(0 100% 0 0);}
	100% { clip-path: inset(0 0 0 0); }
}

#mv .clipAnimationRtoL,
.clipAnimationRtoL {
    clip-path: inset(0 0 0 100%);
}
#mv .clipAnimationRtoL,
.in .clipAnimationRtoL,
.in.clipAnimationRtoL {
    animation: clipAnimationRtoL .4s ease-in-out forwards;
}

@keyframes clipAnimationRtoL {
    0%   { clip-path: inset(0 0 0 100%); }
    100% { clip-path: inset(0 0 0 0); }
}

#mv .clipAnimationTtoB,
.in .clipAnimationTtoB,
.in.clipAnimationTtoB {
    animation: clipAnimationTtoB .4s ease-in-out forwards;
}
@keyframes clipAnimationTtoB {
	0% { clip-path: inset(0 0 100% 0); }
	100% { clip-path: inset(0 0 0 0); }
}

.delay01{ animation-delay: 0.1s!important;}
.delay02{ animation-delay: 0.2s!important;}
.delay03{ animation-delay: 0.3s!important;}
.delay04{ animation-delay: 0.4s!important;}
.delay05{ animation-delay: 0.5s!important;}
.delay06{ animation-delay: 0.6s!important;}
.delay07{ animation-delay: 0.7s!important;}
.delay08{ animation-delay: 0.8s!important;}
.delay09{ animation-delay: 0.9s!important;}
.delay10{ animation-delay: 1.0s!important;}
.delay11{ animation-delay: 1.1s!important;}
.delay12{ animation-delay: 1.2s!important;}
.delay13{ animation-delay: 1.3s!important;}
.delay14{ animation-delay: 1.4s!important;}
.delay15{ animation-delay: 1.5s!important;}
.delay16{ animation-delay: 1.6s!important;}
.delay17{ animation-delay: 1.7s!important;}
.delay18{ animation-delay: 1.8s!important;}
.delay19{ animation-delay: 1.9s!important;}
.delay20{ animation-delay: 2.0s!important;}
.delay21{ animation-delay: 2.1s!important;}
.delay22{ animation-delay: 2.2s!important;}
.delay23{ animation-delay: 2.3s!important;}
.delay24{ animation-delay: 2.4s!important;}
.delay25{ animation-delay: 2.5s!important;}
.delay26{ animation-delay: 2.6s!important;}
.delay27{ animation-delay: 2.7s!important;}
.delay28{ animation-delay: 2.8s!important;}
.delay29{ animation-delay: 2.9s!important;}
.delay30{ animation-delay: 3.0s!important;}
.delay31{ animation-delay: 3.1s!important;}
.delay32{ animation-delay: 3.2s!important;}
.delay33{ animation-delay: 3.3s!important;}
.delay34{ animation-delay: 3.4s!important;}
.delay35{ animation-delay: 3.5s!important;}
.delay36{ animation-delay: 3.6s!important;}
.delay37{ animation-delay: 3.7s!important;}
.delay38{ animation-delay: 3.8s!important;}
.delay39{ animation-delay: 3.9s!important;}
.delay40{ animation-delay: 4.0s!important;}


/*-------------------------------------------
ONLY PC
-------------------------------------------*/
@media only screen and (min-width: 769px){
	#kanzenmeshi img,
	#kanzenmeshi #mv .inr{
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		image-rendering: crisp-edges;
		image-rendering: -webkit-optimize-contrast;
	}
}

/*-------------------------------------------
Under 900px
-------------------------------------------*/
@media only screen and (max-width: 900px){
    
    /*--- last ---*/
    #kanzenmeshi #last .image {
        width: 600px;
    }
    
}

/*-------------------------------------------
Tablet
-------------------------------------------*/
@media only screen and (max-width: 900px){
        
    /*--- mv ---*/
    
}

/*-------------------------------------------
SP
-------------------------------------------*/
@media only screen and (max-width: 600px){
	 
     br.pc-none {
        display: inline;
    }
	#kanzenmeshi .sp { display: block;}
	#kanzenmeshi .pc { display: none;}
    
    #kanzenmeshi .check_red,
    #kanzenmeshi .check_yellow{ background-size: 20px 20px;}
	    
	/*--- mv ---*/ 
    #kanzenmeshi #mv {
        height: 150vw;
    }
    #kanzenmeshi #mv::before, #kanzenmeshi #mv::after {
        height: 3.125vw;
    }
    #kanzenmeshi #mv .mvInner .menuImage.jan{
        background: url("../images/menu/kanzenmeshi/bg_jan_sp.jpg") center bottom / cover no-repeat;
    }
    #kanzenmeshi #mv .mvInner .menuImage.gra{
        background: url("../images/menu/kanzenmeshi/bg_gra_sp.jpg") center bottom / cover no-repeat;
    }
    #kanzenmeshi #mv .title {
        width: 100%;
        left: 0%;
        top: 0;
    }
    #kanzenmeshi #mv .title .date {
        width: 26.25%;
        left: 3.125%;
        margin-top: calc((270 / 640) * 100%);
    }
    #kanzenmeshi #mv .kanzenmeshiLogo {
        width: 27%;
        left: 36.5%;
        margin-top: 49%;
    }
    #kanzenmeshi #mv .colabo {
        width: 70%;
        left: 14.5%;
        margin-top: 0;
        margin-bottom: 50%;
        bottom: 0;
    }
    #kanzenmeshi #mv .mvInner .menuImage .badge {
        width: 50%;
        margin-top: 0;
        margin-bottom: 59%;
        top: auto;
        bottom: 0;
    }
    #kanzenmeshi #mv .mvInner .menuImage .detail {
        width: 93%;
        margin-top: 0;
        margin-bottom: 9%;
        top: auto;
        bottom: 0;
    }
    #kanzenmeshi #mv .mvInner .menuImage.jan .badge{
        left: 1%;
    }
    #kanzenmeshi #mv .mvInner .menuImage.gra .badge{
        right: 1%;
    }
    
	
    /*--- contents ---*/
    #kanzenmeshi #contents .contentsInr .head01 {
        margin-bottom: 30px;
    }
    #kanzenmeshi #contents .reason01{
        background: none;
        padding-bottom: 0;
    }
    #kanzenmeshi .menu-box + .menu-box{
        margin-top: 20px;
    }
    #kanzenmeshi #contents .reason .notice{
        margin: 30px auto 0;
    }
    #kanzenmeshi #contents .reason .notice li{
        font-size: 11px;
    }
    #kanzenmeshi #contents .reason + .reason {
        margin-top: 60px;
    }
    #kanzenmeshi #contents .comment-box + .comment-box{
        margin-top: 20px;
    }
    
	/*--- last ---*/
	#kanzenmeshi #last {
        margin-top: 60px;
    }
    #kanzenmeshi #last .inr {
        margin-top: 3vw;
        padding-bottom: 6vw;
    }
    #kanzenmeshi #last .image {
        width: 50%;
    }
    #kanzenmeshi #last .logo {
        width: 36%;
    }
}