/*all*/

.f_day24{
	font-size:16px;
	font-family: "Sawarabi Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
	color:#260101;
	}
	
/*top*/
.f_day24 .topwrap{
	background-image: url(https://www.rodeodrive.co.jp/cpage/fe/fe24_father/img/bg_topimg.jpg);
	text-align:  center;
	background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
	padding-bottom:2rem;
    }
.f_day24 .topbnr{
	position: relative;
	clip-path: ellipse(60% 65% at right 50% top 30%);
	}
.f_day24 .topbnr div{
	position: absolute;
	top:50%;
	left: 50%;
	-ms-transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	color: #fff;
	margin: 0!important;
	padding: 0!important;
	}
.f_day24 h2{
	margin-bottom:1rem;
	}
.f_day24 .ribbon_btn a {
	width:40%;
	position: relative;
	height: 100px;
	margin:1rem auto;
	text-align: center;
	font-size: 2.5rem;
	background: #f3f1e8;
	box-sizing: border-box;
	display: grid;
	line-height:2rem;
	place-content: center;
	place-items: center;
	font-weight:bold;
	font-family: "Libre Baskerville", serif;
	font-weight: 700;
	font-style: normal;
	}
.f_day24 .ribbon_btn a:before, .ribbon_btn a:after {
	position: absolute;
	content: '';
	width: 0px;
	height: 0px;
	z-index: 1;
	}
.f_day24 .ribbon_btn a:before {
	top: 0;
	left: 0;
	border-width: 50px 0px 50px 20px;
	border-color: transparent transparent transparent #d9ae96;
	border-style: solid;
	}
.f_day24 .ribbon_btn a:after {
	top: 0;
	right: 0;
	border-width: 50px 20px 50px 0px;
	border-color: transparent #d9ae96 transparent transparent;
	border-style: solid;
	}
.f_day24 .ribbon_btn p span{
	display:block;
	font-size:1rem;
	font-weight:normal;
	}
.f_day24 .onset a{
	color:#29534b;
	}
.f_day24 .onset a:hover{
	background: #29534b;
	color:#fff;
	opacity:1;
	}
.f_day24 .offset a{
	color:#d97c2b;
	}
.f_day24 .offset a:hover{
	background: #d97c2b;
	color:#fff;
	opacity:1;
}
/* fade-in */
	/* top */
.slide-top {
	opacity: 0;
	transform: translate(0, -20px);
	transition: all 1s ease-out;
	}
	/* bottom */
.slide-bottom {
	opacity: 0;
	transform: translate(0, 20px);
	transition: all 1s ease-out;
	}
	 /* left */
.slide-left {
	opacity: 0;
	transform: translate(-20px, 0);
	transition: all 1s ease-out;
	}
	/* right */
.slide-right {
	opacity: 0;
	transform: translate(20px, 0);
	transition: all 1s ease-out;
	}

/*contents*/
.f_day24 .itemwrap{
	width:100%;
	background-image: url(https://www.rodeodrive.co.jp/cpage/fe/fe24_father/img/bg_all.gif);
	text-align:  center;
	background-repeat: repeat-y;
    background-position: center;
    background-size: 100%;
	padding:2rem 3rem;
	}
.f_day24 .itemwrap dt, .f_day24 .msg_cts .textbox .title{
	font-size:2.5rem;
	font-weight:bold;
	font-family: "Libre Baskerville", serif;
	font-weight: 700;
	font-style: normal;
	}
.f_day24 .itemwrap h3 img{
	margin:0 auto;
	}
.f_day24 .on_cts{
	width:100%;
	margin:1rem auto;
	background-color:#789288;
	background-image: url(https://www.rodeodrive.co.jp/cpage/fe/fe24_father/img/bg_onimg.png);
	text-align:  center;
	background-repeat: no-repeat;
    background-position: top;
    background-size: 100%;
	padding:2rem;
	color:#fff;
	}
.f_day24 .off_cts{
	width:100%;
	margin:2rem auto;
	background-color:#c8bdb7;
	background-image: url(https://www.rodeodrive.co.jp/cpage/fe/fe24_father/img/bg_offimg.png);
	text-align:  center;
	background-repeat: no-repeat;
    background-position: top;
    background-size: 100%;
	padding:2rem;
	color:#260101;
	}
.f_day24 .itembox {
	display: flex;
	flex-wrap: wrap;
	}
.f_day24 .itembox img{
	clip-path: ellipse(45% 50% at 50% 50%);
	}
.f_day24 .itembox .item_cts{
	width:calc(100%/3);
	padding:1rem;
	}
.f_day24 .on_cts a{
	display:block;
	color:#fff;
	}
.f_day24 .off_cts a{
	display:block;
	color:#260101;
	}
.f_day24 .itembox .item_cts dt{
	font-size:1.3rem;
	}
.f_day24 .itembox .item_cts dt:after{
	content: '\f35a';
    font-family: "Font Awesome 5 Free";
	padding-left:.3rem;
	}
/*slider*/
.f_day24 .slide-container {
    width: 100%;
    margin: 0px auto;
    display: flex;
    align-items: center;
    overflow: hidden;
	}
.f_day24 .slide-wrapper {
	display: flex;
	animation: slide-flow 30s infinite linear 1s both;
	}
.f_day24 .slide{
	width: 500px;
	object-fit: cover;
	max-width: initial;
	}
@keyframes slide-flow {
	0% {transform: translateX(0);}
	100% {transform: translateX(-100%);}
	}

/*footer*/
.f_day24 .msg_cts{
	background-color:#d9ae96;
	background-image: url('https://www.rodeodrive.co.jp/cpage/fe/fe24_father/img/bg_footimg.png');
	background-repeat:no-repeat;
	background-position: right 50% top 10%;
	position: relative;
	padding:3rem 0;
	clip-path: ellipse(80% 70% at right 50% bottom 30%);
	}
.f_day24 .msg_cts .textbox {
	width:50%;
	margin:0 auto 1rem;

	}
.f_day24 .msg_cts .textbox .title span{
	font-size:2.5rem;
	margin:-1.5rem auto 1rem;
	display:block;
	font-family: "Birthstone", cursive;
	font-weight: 400;
	font-style: normal;
	}

/*slider2*/
.f_day24 .img-frame{
   position: relative;
   width: 70%;
   height: 450px;
   overflow: hidden;
   margin: 0 auto;
}
.f_day24 .img-01, .img-02, .img-03{
   position: absolute;
   top:0;
   left:0;
   width: 100%;
   height: 100%;
   background-size: cover;
   background-repeat: no-repeat;
}
.f_day24 .img-01{
   background-image: url('https://www.rodeodrive.co.jp/cpage/fe/fe24_father/img/img_slide4.jpg');
   animation: slide-animation-01 24s infinite;
}
.f_day24 .img-02{
   background-image: url('https://www.rodeodrive.co.jp/cpage/fe/fe24_father/img/img_slide5.jpg');
   animation: slide-animation-02 24s infinite;
}
.f_day24 .img-03{
   background-image: url('https://www.rodeodrive.co.jp/cpage/fe/fe24_father/img/img_slide6.jpg');
   animation: slide-animation-03 24s infinite;
}
@keyframes slide-animation-01 {
    0% {opacity: 1; transform: scale(1.0);}
  30% {opacity: 1;}
  40% {opacity: 0; transform: scale(1.15);}
  90% {opacity: 0}
100% {opacity: 1; transform: scale(1.0);}
}
@keyframes slide-animation-02 {
    0% {opacity: 0;}
  30% {opacity: 0; transform: scale(1.1);}
  40% {opacity: 1;}
  60% {opacity: 1;}
  70% {opacity: 0; transform: scale(1.0);}
100% {opacity: 0;}
}
@keyframes slide-animation-03 {
    0% {opacity: 0;}
  60% {opacity: 0;  transform: scale(1.0);}
  70% {opacity: 1;}
  90% {opacity: 1;}
100% {opacity: 0; transform: scale(1.1);}
}