@charset "utf-8";
/* CSS Document */




/*バックナンバー*/
.midashi_bn h1.scrollin {
    background-size: 320px 4px;
}
.midashi_bn h1 {
    margin-top: 100px;
    font-weight: bold;
    font-size: 26px;
    text-align: center;
    background: url(../../images/bg_line.png) no-repeat;
    background-position: bottom center;
    transition: all 2.5s;
}
.midashi_bn_2020 h1 {
    margin-top: 50px;
    font-weight: bold;
    font-size: 26px;
    text-align: center;
    background: url(../../images/bg_line.png) no-repeat;
    background-position: bottom center;
    transition: all 2.5s;
}
.bnr {
    text-align: center;
    padding: 30px 0 0;
}
.midashi_bnr h1 {
    margin-top: 50px;
    font-weight: bold;
    font-size: 26px;
    text-align: center;
    background: url(../../images/bg_line.png) no-repeat;
    background-position: bottom center;
    transition: all 2.5s;
}






/*2026年用*/
body{
    font-family: vdl-v7marugothic, sans-serif;
	font-weight: 500;
	font-style: normal;
}

.bg828gp-0{
    background-color: #009e4e;
    background-image: url('../images/2026_img_828gp_mainv_bg.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100vw;
    background-position: top;
}
@media screen and (max-width: 640px){
    .bg828gp-0{
        background-image: url('../images/2026_img_828gp_mainv_bg_sp.png');
    }
}
.bg828gp-0 .mainv-1{
/*	width: 1200px;
	height: auto;*/
	margin: 0 auto;
	position: relative;
	text-align: center;
}
.bg828gp-0 .mainv-1 .okrLogo{
	position: absolute;
	top: -15px;
	left: 0;
	right: 0;
}
.bg828gp-0 .mainv-1 .kouen{
	position: absolute;
	top: 114px;
    left: -50px;
}
.bg828gp-0 .mainv-1 .kitare{
	position: absolute;
	top: 257px;
	right: -50px;
}
.bg828gp-0 .mainv-1 .logo828gp{
	padding-top: 160px;
	padding-bottom: 50px;
}
.bg828gp-0 .mainv-1 .yoyaku{
	position: absolute;
	bottom: 40px;
    right: 150px;
}
.bg828gp-0 .mainv-1 .bigHaniwa{
	margin-top:  -100px;
	vertical-align: bottom;
}

@media screen and (max-width: 640px){
	.bg828gp-0 .mainv-1{
		width: 90%;
	}
	.bg828gp-0 .mainv-1 .okrLogo{
				top: -9px;
	}
	.bg828gp-0 .mainv-1 .okrLogo img{
		width: 50%;
		height: auto;
	}
	.bg828gp-0 .mainv-1 .kitare{
		width: 35%;
		height: auto;
		top: 130px;
	    right: -10px;
	}
	.bg828gp-0 .mainv-1 .kouen{
		top: 98px;
    	left: -11px;
   		width: 29%;
   		height: auto;
	}
	.bg828gp-0 .mainv-1 .logo828gp{
		width: 90%;
		height: auto;
		padding-top: 70px;
	    padding-bottom: 30px;
	}
	.bg828gp-0 .mainv-1 .kikan{
		width: 90%;
		height: auto;
	}
	.bg828gp-0 .mainv-1 .kimaru{
		width: 85%;
		height: auto;
	}
	.bg828gp-0 .mainv-1 .okurayade{
		width: 80%;
		height: auto;
	}
	.bg828gp-0 .mainv-1 .bigHaniwa{
		width: 100%;
		height: auto;
		margin-top:  -10px;
	}
	.bg828gp-0 .mainv-1 .yoyaku{
		width: 20%;
		height: auto;
		bottom: -30px;
    	right: 40px;
	}
	.chijisyo{
		width: 85%;
		height: auto;
	}
}

/*メインビジュアル登場PCここから*/
.bg828gp-0 .mainv-1{
	padding-top: 77px;
	overflow: hidden;
	height: 128vw;
}

.bg828gp-0 .mainv-1 .copy{
	width: 84vw;
	height: auto;
}
.bg828gp-0 .mainv-1 .title{
	width: 55vw;
    height: auto;
}
.bg828gp-0 .mainv-1 .title.step1{
	position: absolute;
	top: 10vw;
	left: 0;
	right: 0;
	margin: 0 auto;
	z-index: 2;
}
.step1 {
    animation:  0.5s;
	opacity: 0;
	animation-name: step1anime;
	animation-delay: 0.5s;
	animation-fill-mode:forwards;
}
@keyframes step1anime {
    0% {
        transform: scale(0.7, 0.7);
		opacity: 0;
    }
    100% {
        transform: scale(1.0, 1.0);
		opacity: 1;
    }
}
.bg828gp-0 .mainv-1 .photo{
	width: 82vw;
    height: auto;
}
.bg828gp-0 .mainv-1 .photo.step1-2{
	position: absolute;
    top: 9vw;
    left: 0;
    right: 0;
    z-index: 1;
    margin: 0 auto;
}
.step1-2 {/*0411*/
    animation:  0.5s;
	opacity: 0;
	animation-name: step1anime;
	animation-delay: 0.75s;
	animation-fill-mode:forwards;
}

/*250416*/
.bg828gp-0 .mainv-1 .step2_2025{
}
.bg828gp-0 .mainv-1 .step2_2025_fix{
    animation:  0.4s;
	opacity: 0;
	animation-name: step2anime2025;
	animation-delay: 0.5s;
	animation-fill-mode:forwards;
}
@keyframes step2anime2025 {
    0% {
        transform: scale(1.5, 1.5);
		opacity: 0;
    }
    50% {
        transform: scale(1.0, 1.0);
		opacity: 1;
    }
	85% {
        transform: scale(1.05, 1.05);
		opacity: 1;
    }
    100% {
        transform: scale(1.0, 1.0);
		opacity: 1;
    }
}

/*250416*/
.bg828gp-0 .mainv-1 .step3{
    width: 100vw;
	position: absolute;
	top: 7vw;
	left: 0;
	right: 0;
	margin: 0 auto;
	z-index: 0;
}
.bg828gp-0 .mainv-1 .step3{
    animation:  0.6s;
	opacity: 0;
	animation-name: step3anime2025;
	animation-delay: 1.25s;
	animation-fill-mode:forwards;
}
@keyframes step3anime2025 {
    0% {
        transform: scale(0.85, 0.85);
		opacity: 0;
    }
    100% {
        transform: scale(1.0, 1.0);
		opacity: 1;
    }
}

.bg828gp-0 .mainv-1 .catch{
	position: absolute;
    top: 47vw;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 1;
    width: 33vw;
	opacity: 0;
}


.step3pc{
	position: absolute;
    top: 70vw;
    left: 0;
    right: 0;
    z-index: 1;
    margin: 0 auto;
	opacity: 0;
}

.step3pc_fix {
    animation:  0.5s;
	opacity: 0;
	animation-name: step3anime;
	animation-fill-mode:forwards;
}
@keyframes step3anime {
    0% {
        transform: translate(0,0);
		opacity: 0;
    }
    100% {
        transform: translate(0,-10vw);
		opacity: 1;
    }
}
.bg828gp-0 .mainv-1 .dot.step3-2_2024{
	position: absolute;
    width: 61vw;
    top: 22vw;/*250416*/
    left: 0;
    right: 0;
    z-index: 0;
    margin: 0 auto;
}
.step3-2_2024{
	opacity: 0;
}
.step3-2_2024_fix {
    animation:  0.5s;
	opacity: 0;
	animation-name: step3anime;
	animation-fill-mode:forwards;
}
/*メインビジュアル登場PCここまで*/

/*メインビジュアル登場SPここから*/
.bg828gp-0 .mainv-1.sp{
    width: 100%;
	height: 200vw;
	padding-top: 90px;
	overflow: hidden;
}
.bg828gp-0 .mainv-1.sp .title{
	width: 64%;
	height: auto;
	top:25vw;
}
/*.bg828gp-0 .mainv-1.sp .dot{
	width: 96%;
	height: auto;
}*/
/*.bg828gp-0 .mainv-1.sp .dot.step1-2{
    top: 117px;
}*/
.bg828gp-0 .mainv-1.sp .photo.step1-2 {
    position: absolute;
    top: 21vw;
    left: 0;
    right: 0;
    z-index: 1;
    margin: 0 auto;
}
.bg828gp-0 .mainv-1.sp .photo {
    width: 96%;
    height: auto;
}
.bg828gp-0 .mainv-1.sp .copy {
    width: 95vw;
    height: auto;
    position: absolute;
    top: 92vw;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 1;
}
/*.bg828gp-0 .mainv-1.sp .full{
	width: 100%;
    height: auto;
    position: absolute;
    top: 112vw;
    left: 0;
    right: 0;
    z-index: 1;
}
.bg828gp-0 .mainv-1.sp .full.step1{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100;
}*/
/*.bg828gp-0 .mainv-1.sp .catch{
    top: 63vw;
    width: 38vw;
}
.bg828gp-0 .mainv-1.sp .step2_2025_fix{
    animation:  0.4s;
	opacity: 0;
	animation-name: step2anime2025;
	animation-delay: 1.25s;
	animation-fill-mode:forwards;
}*/
/*.bg828gp-0 .mainv-1.sp .step2_2024_fix {
    padding-top: 59.7vw;
    margin-bottom: -4.5vw;
	opacity: 0;
	animation-delay:1.25s;
}*/
.bg828gp-0 .mainv-1.sp .step3_fix {/*0412*/
    animation:  0.5s;
	opacity: 0;
	animation-name: step3anime;
	animation-delay:1.75s;
	animation-fill-mode:forwards;
}
.bg828gp-0 .mainv-1.sp .dot.step3-2_2024_fix {/*0412*/
	opacity: 0;
	animation-delay:2.25s;
	position: absolute;
    top: 115vw;
    left: 0;
    right: 0;
    z-index: 0;
    margin: 0 auto;
}
.bg828gp-0 .mainv-1.sp .step3 {
    top: 17.5vw;
}

/*メインビジュアル登場SPここまで*/

.syusai{
	width: 100%;
	min-width: 950px;
	height: auto;
	padding: 10px;
	background-color: #8dc21f;
	color: #542113;
	font-size: 25px;
	font-weight: bold;
	text-align: center;
	/*z-index: 100;*/
	margin-top: -1px;
	box-sizing: border-box;
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
	opacity: 1;
}
@media screen and (max-width: 640px){
	.syusai{
		min-width: inherit;
		font-size: 3.2vw;
		padding: 10px 0;
		animation:  0.5s;
		opacity: 0;
		animation-name: step4anime;
		animation-delay:1.8s;
		animation-fill-mode:forwards;
	}
	@keyframes step4anime {
    	0% {
			opacity: 0;
	    }
    	100% {
			opacity: 1;
    	}
	}
}

.bg828gp-1{
	background-color: #82ba26;
	padding: 100px 0;
}
.bg828gp-2-0{
	background-color: #FDB9C6;
}
.bg828gp-2{
	background-color: #ccdf80;
	padding: 100px 0;
}
.bg828gp-2 .container{
	/*transform: skew(0deg, 6deg);*/
}
@media screen and (max-width:640px){
	.bg828gp-1,.bg828gp-2{
		padding: 20px 0;
	}
}
.bg828gp-3{
	background-color: #fff;
	padding: 100px 0;
}
@media screen and (max-width:640px){
	.bg828gp-3 {
    	padding: 40px 0;
	}
}

.bg828gp-1 p{
	color: #552214;
}
.bg828gp-3 p{
	color: #542113;
}


/*アニメーション*/
.popup{
	opacity: 0;
}
.popup_fix {
    animation: popup_fix 0.5s;
	animation-fill-mode:forwards;
}
@keyframes popup_fix {
    0% {
        transform: scale(0.5, 0.5);
		opacity: 0;
    }
    50% {
        transform: scale(1.1, 1.1);
		opacity: 1;
    }
	85% {
        transform: scale(0.97, 0.97);
		opacity: 1;
    }
    100% {
        transform: scale(1.0, 1.0);
		opacity: 1;
    }
}
.nanameIn{
	opacity: 0;
}
.nanameIn_fix {
    animation: nanameIn_fix 0.5s;
	animation-fill-mode:forwards;
}
@keyframes nanameIn_fix {
    0% {
        transform: translate(-150px,0);
		opacity: 0;
    }
    50% {
        transform: translate(12.5px,0);
		opacity: 1;
    }
	85% {
        transform: translate(-7,0);
    }
    100% {
        transform: translate(0,0);
		opacity: 1;
    }
}

.okuraGroupLinkBox{
	position: relative;
}

/*ご予約こちらとおうちで埴輪*/
/*@media screen and (max-width:640px){
    .layout50 .yoyaku{
        margin-bottom: 1.5em
    }
}*/

/*レイアウト補完*/
.midashi {
    font-size: 20px;
    font-weight: bold;
}
.layout50 {
    align-items: center;
}
.layout50.p_t_40 li img {
    margin-bottom: 16px;
}
.layout50 .photo {
    text-align: center;
}
h2 {
    margin: 0 -10px 20px;
}
.jyoken .burasage_2 {
    font-size: 14px;
}
.burasage_2 {
    padding-left: 1em;
    position: relative;
}
.burasage_2:before {
    content: "※";
    position: absolute;
    left: 0;
    top: 0;
}
.layout50.p_t_40 li {
    text-align: center;
}
.tenjibasyo {
    padding-left: 5.2em;
}
.bnr a{
        margin-bottom: 1em;
        display: block;
}
@media screen and (max-width: 640px) {
     .layout50 {
        padding-bottom: 0;
        width: 85%;
        margin: 0 auto;
    }
    .layout50 li img {
        box-sizing: border-box;
        width: 100%;
        height: auto;
    }
    .zoutei img,.torikumi img{
        width: 100%;
        height: auto;
    }
    .layout50 .photo {
        order: 1;
    }
    h2 img {
        width: 50% !important;
        height: auto;
    }
    .layout50 li {
        margin-bottom: 40px;
    }
    .tenjibasyo {
        padding-left: 1em;
	}
}

/*賞の種類*/
.typeOfAward{
    margin: 0.5em 0;
}
.typeOfAward .name{
    padding-left: 1em;
}