@charset "UTF-8";

html, body {
  overflow-x: hidden;
}


body:has(#f-section-wrap) {
  background-image: none !important;
  background-color: #000105;
  min-width:100%;
}

*:focus {
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

#f-section-wrap{
	margin-top:-50px;
	overflow-x: hidden;
}

.f-uc-sf-container {
    max-width: 1140px;
    width: 100%;
    margin: 0 auto;
}

@media only screen and (max-width: 768px) {
	.f-uc-sf-container {
    max-width: 100%;
    margin: 0 auto;
}
}

.f-uc-sf-container p {
    color: #fff;
    font-family: Barlow, sans-serif;
    font-size: 18px;
    line-height: 150%;
}

/*f-top-section=============================*/

.f-top-section{
	padding: 60px 0 0px;
}

.f-top-container {
    max-width: 100%;
    margin: 0 auto;
    background: url("images/top/top-bg.webp") no-repeat center top;
    padding-top: 5%;
	background-size: contain;
    overflow: hidden;
	display: flex;
	justify-content: center;
}

.f-main-video-wrap {
	width: calc(9 / 16 * 90%);
}

.f-video {
padding: 5% 5% 3% 5%;
}


@media only screen and (max-width: 768px) {
	.f-top-container {
    background: none;
}
	
.f-main-video-wrap {
	width: 90%;
}

.f-video {
padding: 0 0 3% 0;
}
}



.f-video iframe {
	aspect-ratio: 16/9;
    width: 100%;
    height: 100%;
    border: none;
}

.f-top-copy-col,
.f-top-btn-col {
    position: relative;
    z-index: 1;
}

/*f-top-hover copy btn =============================*/


.f-top-hover-container {
    max-width: 1336px;
    margin: 0 auto 0;
}

/*copy*/
.f-top-copy-col{
	margin-bottom: 10px;
}

.f-top-copy-col h2{
	color: #f32c46;
    font-family: barlow, sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    text-transform: uppercase;
    letter-spacing: -.04em;
    line-height: 1.5;
    padding: 0 0 1em;
	text-align: center;
}

@media only screen and (max-width: 768px) {
	.f-top-copy-col h2{
    font-size: 20px;
}
}

/*Learn More*/
.f-top-btn-col{
  	background-size: contain;
}

/*netflix*/
.f-top-bn-col{
	text-align: center;
	position: relative;
	z-index: 100;
	max-width: 30%;
    margin: auto;
}

.f-top-bn-col img{
	max-width:240px;
	height:auto;
}

@media only screen and (max-width: 768px) {
	
.f-top-bn-col{
	max-width: 100%;
    margin: auto;
}
.f-top-bn-col img{
	max-width:38%;
	height:auto;
}
}

@media only screen and (max-width: 420px) {
	
.f-top-bn-col img{
	max-width:36%;
	height:auto;
}
}

@media only screen and (max-width: 768px) {
.f-top-section{
    padding: 70px 0px 0px;
}
}

/*top kaijyu hover contents*/
.top-hover-content-wrap{
	position: relative;
}

.popup {
	display: none;
	opacity: 0;
	transition: opacity 0.5s ease-in-out;
}

@media only screen and (max-width: 1032px) {
.f-underline-text {
  text-decoration: underline;
}
}

/* popup style */

/*PC Left Popup*/
.f-left-pop-wrap{
	position: absolute;
	top: -10%;
    left: 18%;
	z-index: 100;
}

@media only screen and (max-width: 1270px) {
.f-left-pop-wrap{
	top: -6%;
    left: 18%;
}
}

@media only screen and (max-width: 1080px) {
.f-left-pop-wrap{
	top: -2%;
    left: 15%;
}
}

@media only screen and (max-width: 992px) {
.f-left-pop-wrap{
	top: 3%;
    left: 13%;
}
}

@media only screen and (max-width: 910px) {
.f-left-pop-wrap{
	top: 4%;
    left: 6%;
}
}

/*PC Right Popup*/
.f-right-pop-wrap{
	position: absolute;
	top: -10%;
    right: 18%;
	z-index: 100;
}

@media only screen and (max-width: 1270px) {
.f-right-pop-wrap{
	top: -6%;
    right: 18%;
}
}

@media only screen and (max-width: 1080px) {
.f-right-pop-wrap{
	top: -2%;
    right: 15%;
}
}

@media only screen and (max-width: 992px) {
.f-right-pop-wrap{
	top: 3%;
    right: 13%;
}
}

@media only screen and (max-width: 910px) {
.f-right-pop-wrap{
	top: 4%;
    right: 6%;
}
}

/*pc pop common*/

.f-pop-baloon-bottom01{
	display: table;
	padding: 1em 1em;
	margin-bottom: 1em;
	position: relative;
	background-color: #F32C46;
	color:#fff;
	border-radius: 0.5em;
	white-space:nowrap;
	line-height: 1.3;
}

.f-pop-baloon-bottom02{
	display: table;
	padding: 1em 1em;
	margin-bottom: 1em;
	position: relative;
	background-color: #F32C46;
	color:#fff;
	border-radius: 0.5em;
	white-space: normal;
	line-height: 1.3;
}

.f-pop-baloon-bottom01:before, .f-pop-baloon-bottom01:after,
.f-pop-baloon-bottom02:before, .f-pop-baloon-bottom02:after{
	content: '';
	position: absolute;
}
	
.f-pop-baloon-bottom01:before, .f-pop-baloon-bottom01:after	{
	left: 50%;
	transform: translateX(-50%);
	bottom: -0.8em;
	border-right: 10px solid transparent;
	border-left: 10px solid transparent;
}

.f-pop-baloon-bottom02:before, .f-pop-baloon-bottom02:after	{
	left: 50%;
	transform: translateX(-50%);
	bottom: -0.8em;
	border-right: 10px solid transparent;
	border-left: 10px solid transparent;
}
	
.f-pop-baloon-bottom01:after{
	border-top: solid 1em #F32C46;
}

.f-pop-baloon-bottom02:after{
	border-top: solid 1em #F32C46;
}

/* max910=sp popup style */
@media only screen and (max-width: 768px) {

/*sp pop common*/
/*pc reset*/
.f-pop-baloon-bottom01:before, .f-pop-baloon-bottom01:after	{
	left: auto;
	transform: translateX(auto);
	bottom: auto;
	border-right: 0px solid transparent;
	border-left: 0px solid transparent;
}

.f-pop-baloon-bottom02:before, .f-pop-baloon-bottom02:after	{
	left: auto;
	transform: translateX(auto);
	bottom: auto;
	border-right: 0px solid transparent;
	border-left: 0px solid transparent;
}
	
.f-pop-baloon-bottom01-sp{
	display: table;
	padding: 0.6em 0.6em;
	margin-bottom: 1em;
	position: relative;
	background-color: #F32C46;
	color:#fff;
	border-radius: 0.5em;
	white-space:nowrap;
}

.f-pop-baloon-bottom02-sp{
	display: table;
	padding: 0.6em 0.6em;
	margin-bottom: 1em;
	position: relative;
	background-color: #F32C46;
	color:#fff;
	border-radius: 0.5em;
	white-space: normal;
}

.f-pop-baloon-bottom01-sp:before, .f-pop-baloon-bottom01-sp:after,
.f-pop-baloon-bottom02-sp:before, .f-pop-baloon-bottom02-sp:after{
	content: '';
	position: absolute;
}

/*01=left*/
.f-pop-baloon-bottom01-sp:before, .f-pop-baloon-bottom01-sp:after	{
	top: 50%;
	transform: translateY(-50%);
	left: -1em;
	border-top: 10px solid transparent;
	border-right: 10px solid transparent;
	border-bottom: 10px solid transparent;
}

.f-pop-baloon-bottom01-sp:after{
	border-right: solid 1.5em #F32C46;
}

/*02=right*/
.f-pop-baloon-bottom02-sp:before,.f-pop-baloon-bottom02-sp:after{
	top: 50%;
	transform: translateY(-50%);
	right: -1em;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
/*	border-left: 1.5em solid #222;*/
}
	
.f-pop-baloon-bottom02-sp:after{
	border-left: solid 1.5em #F32C46;
}

}

/* max768=sp popup style */
@media only screen and (max-width: 768px) {
.f-left-pop-wrap{
	top: 12%;
    left: 27%;
}
	
.f-right-pop-wrap{
	top: 12%;
    right: 27%;
}
}

@media only screen and (max-width: 480px) {
.f-left-pop-wrap{
	top: 8%;
    left: 25%;
}
	
.f-right-pop-wrap{
	top: 8%;
    right: 27%;
}
	
.f-pop-baloon-bottom01-sp p,
.f-pop-baloon-bottom02-sp p{
	font-size:13px;
}
	
/*.f-pop-baloon-bottom01-sp,
.f-pop-baloon-bottom02-sp{
	padding: 0.5em 0.5em;
}*/
}

@media only screen and (max-width: 360px) {
.f-left-pop-wrap{
	top: 7%;
    left: 25%;
}
	
.f-right-pop-wrap{
	top: 7%;
    right: 27%;
}
	
.f-pop-baloon-bottom01-sp p,
.f-pop-baloon-bottom02-sp p{
	font-size:12px;
}
}

/*kaiju hoverarea flex*/

.top-hover-flex-container{
	display: flex;
	justify-content: center;
	margin-top: -90px;
	background-image: url('images/top/top-kaijiu.webp');
	background-repeat: no-repeat;
	background-size: contain;
    background-position: center;
	position: relative;
	max-width: 1336px;
  	height: 410px;
	transition: background-image 0.5s ease;
	margin:-90px auto 0;
}

@media only screen and (max-width: 768px) {
	
.top-hover-flex-container-wrap{
	background-image: url('images/top/top-kaijiu-sp.webp');
	background-repeat: no-repeat;
	background-size: contain;
    background-position: center top;
	display: block;
	max-width: 750px;
	height:auto;
}
	
.top-hover-flex-container{
	background:
		url('images/top/top-kaijiu-sp.webp') no-repeat center top,
		url('images/top/top-kaijiu-left-on-sp.webp') no-repeat center top,
	    url('images/top/top-kaijiu-right-on-sp.webp') no-repeat center top; 
	background-size: contain,0 0,0 0;
	max-width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
	margin:0px auto 0;
}

}

/* PC hover area */
.f-top-hover-flex-item01{
  width: 18%;
  height: 50%;
}

.f-top-hover-flex-item02{
  width: 14%;
  height: 50%;
}


.f-top-hover-flex-item05{
  width: 16%;
  height: 50%;
}

.f-top-hover-flex-item06{
  width: 17%;
  height: 50%;
}

 .f-top-hover-flex-item-left {
  width: 20%;
  height: 50%;
  cursor: pointer;
}

.f-top-hover-flex-item-right {
  width: 15%;
  height: 50%;
  cursor: pointer;
}

@media only screen and (max-width: 768px) {
/* sp tache area */
.f-top-hover-flex-item01,
.f-top-hover-flex-item02{
  width: 0;
  height: 50%;
}


.f-top-hover-flex-item05{
  width: 46%;
  height: 50%;
}

.f-top-hover-flex-item06{
  width: 0%;
  height: 50%;
}

 .f-top-hover-flex-item-left {
  width: 30%;
  height: 50%;
  cursor: pointer;
}

.f-top-hover-flex-item-right {
  width: 24%;
  height: 50%;
  cursor: pointer;
}
}

.f-top-hover-flex-item-left:hover,
.f-top-hover-flex-item-right:hover {
  -webkit-tap-highlight-color:rgba(0,0,0,0);
  cursor: pointer;
}

/* img preload */
.preload-images::before {
      content: url('images/top/top-kaijiu.webp') 
              url('images/top/top-kaijiu-left-on.webp') 
              url('images/top/top-kaijiu-right-on.webp') 
              url('images/top/top-kaijiu-sp.webp') 
              url('images/top/top-kaijiu-left-on-sp.webp') 
              url('images/top/top-kaijiu-right-on-sp.webp');
      display: none;
    }

/*lower page==========================================*/

.f-lower-page-wrapper{
    margin-top: 0px;
    overflow: hidden;
}
.f-lower-top-section{
	padding: 60px 25px 100px;
}

.f-lower-main-contents-wrap{
    padding: 74px 0 0;
    margin-bottom: 32px;
}

@media only screen and (max-width: 1060px) {
.f-lower-main-contents-wrap{
	padding:44px 0 0;
}
}

.f-main-visual img{
	margin:0 0 3em;
}

.f-main-visual h1.mv{
	margin:0;
}

.f-main-visual h2{
	color: #f32c46;
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    text-transform: uppercase;
    letter-spacing: -.04em;
    line-height: 1.5;
    padding: 0 0 1em;
	text-align: center;
}

.f-main-visual p{
    padding: 0 1.5em 1em;
}

.f-main-visual p:last-child{
    padding: 0 1.5em 2em;
}

@media only screen and (max-width: 768px) {
	
.f-lower-top-section{
	padding: 70px 10px 70px;
}

.f-lower-main-contents-wrap{
	padding:5% 0 0;
}

.f-main-visual p{
    padding: 0 1.5 1em;
}

.f-main-visual p:last-child{
    padding: 0 1.5 2em;
}
}

/*netflix*/
.f-top-bn-col-lower{
	text-align: center;
	margin-bottom: 70px;
}

.f-top-bn-col-lower img{
	max-width:240px;
	height:auto;
}

@media only screen and (max-width: 768px) {
.f-top-bn-col-lower img{
	max-width:50%;
	height:auto;
}
}

/*f-sec-recommend-section=====================*/

.f-sec-recommend-section{
	margin-top: -60px;
	padding:0 0 0;
	position: relative;
    z-index: 100;
}

body:has(.f-lower) .f-sec-recommend-section{
        margin-top: -20px;
}

@media only screen and (max-width: 767px) {
.f-sec-recommend-section{
	margin-top: -20px;
	padding:0 0;
}
	
body:has(.f-lower) .f-sec-recommend-section{
    margin-top: -20px;
}
}

/*heading style*/
.f-head-border {
    display: flex;
    align-items: center;
	color:#99060a;
	font-family: barlow, sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 36px;
    text-transform: uppercase;
    letter-spacing: -.04em;
	margin-bottom:8px;
}

@media only screen and (max-width: 768px) {
.f-head-border {
	font-size: 26px;
	margin-bottom:0px;
}
}

@media only screen and (max-width: 1140px) {
.f-head-border {
    padding:0 1.5%;
}
}

.f-head-border:before,
.f-head-border:after {
    content: "";
    height: 1px;
    flex-grow: 1;
    background-color: #99060a;
}

.f-head-border:before {
    margin-right: 1rem;
}

.f-head-border:after {
    margin-left: 1rem;
}

/*recommend flex style*/
.f-recommend-flex-container{
	display: flex;
    overflow-x: inherit;
	justify-content: space-between;
}

.f-recommend-flex-container .f-flex-rec-item{
	text-align: center;
	display: flex;
	flex-direction: column;
	flex-basis: calc(50% - 13px);/*33.33%*/
}

.f-recommend-flex-container .f-item1,
.f-recommend-flex-container .f-item2{
	margin-right: 20px;
}

.f-recommend-flex-container .f-item3{
	margin-right: 0px; /* nth3 */
}

/*Learn More*/
.f-sec-btn-col{
	margin-top: 30px;
}

@media only screen and (max-width: 1140px) {
.f-recommend-flex-container{
	padding: 40px 8px 16px;
}
}

@media only screen and (max-width: 768px) {
	
.f-recommend-flex-container{
	width:100%;
	display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
}

.f-recommend-flex-container .f-flex-rec-item{
	flex: 0 0 80%;
}

/*scroll-hint*/
.f-scroll-hint-wrap{
	position: relative;
	}
	
 .f-scroll-hint {
    position:absolute;
    right: 20px;
    top: 20px;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 5px;
    border-radius: 3px;
    animation: fadeInOut 4s infinite;
    }

 .f-scroll-hint .arrow {
        margin-left: 5px;
        display: inline-block;
        animation: moveLeftRight 3s infinite;
    }

 @keyframes moveLeftRight {
        0% { transform: translateX(0); }
        50% { transform: translateX(10px); }
        100% { transform: translateX(0); }
    }
	
}

@media only screen and (max-width: 430px) {

.f-recommend-flex-container{
	padding: 40px 8px 0px;
}
	
/*Learn More*/
.f-sec-btn-col{
	margin-top: 20px;
}
}

/*f-sec bn-section=====================*/

.f-sec-bn-section{
	position: relative;
    padding: 0px 25px 80px;
    overflow: hidden;
	margin-top: -100px;
}

@media only screen and (max-width: 768px) {
.f-sec-bn-section{
    padding-left: 10px;
	padding-right: 10px;
	padding-top: 83.33%;
	padding-bottom: 0px;
	margin-top: 0px;
}
}

.f-bn-inner-container{
    max-width: 1140px;
    margin: 0 auto;
}

@media only screen and (max-width: 768px) {
.f-bn-inner-container {
    max-width: 100%;
    margin: 0 auto;
}
}

/*hover animation========*/

.contents-area {
  width: 100%;
  background: url('images/top/dada-default.webp') no-repeat center top;
  transition: 0.4s;
}

.-contentsA-hover {
  background: url('images/top/dada-left.webp') no-repeat center top;
  transition: 0.4s;
}

.-contentsB-hover {
  background: url('images/top/dada-center.webp') no-repeat center top;
  transition: 0.4s;
}

.-contentsC-hover {
  background: url('images/top/dada-right.webp') no-repeat center top;
  transition: 0.4s;
}


@media only screen and (max-width: 768px) {
.contents-area {
  	animation-delay: 2s; 
	background: url('images/top/dada-default-sp.webp') no-repeat center top;
	background-size: 100%;
	animation: image_anime 15s ease-in-out infinite;/* Repeated 20 second animation */
}
}

@keyframes image_anime {
  0%, 33%, 65% ,100%{
    background-image: url(images/top/dada-default-sp.webp);
  }
  16% {
    background-image: url(images/top/dada-center-sp.webp);
  }
  49% {
    background-image: url(images/top/dada-left-sp.webp);
  }
  81% {
    background-image: url(images/top/dada-right-sp.webp);
  }
}


/* mon baloon ========== */

.f-mon-balloon-down-wrap{
    max-width: 74%;
    display: flex;
    justify-content: center;
	align-items: center;
    padding: 20px 0 10px 0;
    margin: 30px auto 50px;
	}

.f-parts-hover-sp{
	display: none;
}

.f-mon-baloon-copy:before{
display: none;
	}

.f-mon-baloon-copy{
	color: #fff;
    font-family: Barlow, sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5em;
	text-align: center;
	margin-top: 20px;
	text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
	}
	
.f-mon-baloon-right p.f-text-gd{
	color: #fff;
    font-family: Barlow, sans-serif;
    font-style: italic;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.5em;
	}

.f-mon-baloon-item-left {
	margin-top: 40px;
    flex: 0 0 auto; /* Keep left width */
}

/* PC hover parts */
.f-mon-baloon-item-hover-parts,
.f-mon-baloon-item-hover {
   flex: 1;
   height: 150px;
}

.spacer-copy{
	width: 10px;
	height:1px;
	opacity: 0;
	}

@media (max-width: 1120px) and (min-width: 891px) {
	
.f-mon-balloon-down-wrap{
    max-width: 90%;
	}
	
.f-mon-baloon-item-left {
    flex: 0 1 auto;
}

.f-mon-baloon-item-hover-parts,
.f-mon-baloon-item-hover {
   flex: 0 0 270px;
}
}

@media (max-width: 890px) and (min-width: 769px) {
	
.f-mon-baloon-right p.f-text-gd{
    font-size: 15px;
    line-height: 1.5em;
	}
	
.f-mon-balloon-down-wrap{
    max-width: 80%;
	}
	
.f-mon-baloon-item-left {
    flex: 0 1 auto;
}

.f-mon-baloon-item-hover-parts{
   flex: 0 0 290px;
}
	
.f-mon-baloon-item-hover {
   flex: 0 0 180px;
}
}

@media (max-width: 768px) {
	
.f-mon-balloon-down-wrap{
    max-width: 100%;
	height:30%;
    display: flex;
	justify-content: center;
	flex-direction: column;
    margin: 0px auto 0;
	position: absolute;
    top: 78%;
    left: 50%;
    transform: translate(-50%, -78%);
}
	
.f-mon-baloon-item-left {
	max-width: 100%;
    margin: auto auto 0px;
	flex: 1 1 auto;
}
	
/* hover parts */
.f-mon-baloon-item-hover-parts {
	flex: auto;
	height: 50%;
	width:60%;
	outline: none;
	-webkit-tap-highlight-color: transparent;
}
	
.f-mon-baloon-item-hover {
   flex: 0;
   height: 0px;
}
	
.f-mon-baloon-copy p{
    font-size: 16px;
    line-height: 1.5em;
	margin-top: 25%;
	padding-bottom: 0px;
	}
	
.spacer-copy{
	width: 10px;
	height:170px;
	opacity: 0;
	}
	
.f-mon-baloon-bottom p.f-text-gd{
	color: #fff;
    font-family: Barlow, sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5em;
	}
}

@media (max-width: 768px) {
	
.f-mon-balloon-down-wrap{
	height:28%;
    top: 84%;
    left: 50%;
    transform: translate(-50%, -84%);
}
	
	
.f-mon-baloon-copy p{
    font-size: 15px;
    line-height: 1.5em;
	margin-top: 25%;
	padding-bottom: 0px;
	}
}

@media (max-width: 480px) {
	
.f-mon-balloon-down-wrap{
	height:30%;
    top: 80%;
    left: 50%;
    transform: translate(-50%, -80%);
}
}



@media (max-width: 414px) {
	
.f-mon-balloon-down-wrap{
	height:30%;
    top: 78%;
    left: 50%;
    transform: translate(-50%, -78%);
}
}

@media (max-width: 389px) {
	
.f-mon-balloon-down-wrap{
	height:30%;
    top: 75%;
    left: 50%;
    transform: translate(-50%, -75%);
}
	
		
.f-mon-baloon-bottom p.f-text-gd{
    font-size: 14px;
    line-height: 1.2em;
	}
	
}

@media (max-width: 360px) {
	
.f-mon-balloon-down-wrap{
	height:30%;
    top: 75%;
    left: 50%;
    transform: translate(-50%, -75%);
}

.f-mon-baloon-copy p{
    font-size: 14px;
    line-height: 1.5em;
	margin-top: 25%;
	padding-bottom: 0px;
	}
}

@media (max-width: 335px) {
	
.f-mon-balloon-down-wrap{
	height:30%;
    top: 74%;
    left: 50%;
    transform: translate(-50%, -74%);
}
	
.f-mon-baloon-bottom p.f-text-gd{
    font-size: 12px;
    line-height: 1.1em;
	}
}

/*dada hover for pc baloon-right========*/

 .f-mon-baloon-right, .f-mon-baloon-copy {
    opacity: 1;
    visibility: visible;
    transition: opacity 1s ease, visibility 1s ease;
}

.f-mon-baloon-copy {
    opacity: 0;
    visibility: hidden;
	transition: opacity 1s ease, visibility 1s ease;
}

 .f-mon-baloon-item-hover-parts:hover {
      cursor: pointer;
    }


/* baloon-right ==========*/

.f-mon-baloon-right{
	display: table;
	padding: 0.5em 1em;
	margin-bottom: 3em;
	position: relative;
	background-color: #f32d46;
/*	border: 2px solid #222;*/
	border-radius: 0.5em;
	white-space: nowrap;
}
	
.f-mon-baloon-right:before, .f-mon-baloon-right:after{
	content: '';
	position: absolute;
}
	
.f-mon-baloon-right{
	margin-right: 2em;
}
	
.f-mon-baloon-right:before,.f-mon-baloon-right:after{
	top: 50%;
	transform: translateY(-50%);
	right: -1.5em;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
/*	border-left: 1.5em solid #222;*/
}
	
.f-mon-baloon-right:after{
	right: calc( 4px - 1.5em );
	border-left: solid 1.5em #f32d46;
}

/*dada hover for sp baloon-bottom*/

@media (max-width: 768px) {
	
.f-mon-baloon-right{
	display: none;
}
	
.f-mon-baloon-bottom{
	display: table;
	padding: 0.4em 1em;
	margin-bottom: 1em;
	position: relative;
	background-color: #f32d46;
	border-radius: 0.5em;
	white-space: nowrap;
	transition: opacity 1s ease, visibility 1s ease;
}

.f-mon-baloon-bottom:before, .f-mon-baloon-bottom:after{
	content: '';
	position: absolute;
}
	
.f-mon-baloon-bottom{
	margin-bottom: 0em;
}
	
.f-mon-baloon-bottom:before, .f-mon-baloon-bottom:after	{
	left: 50%;
	transform: translateX(-50%);
	bottom: -1em;
	border-right: 10px solid transparent;
	border-left: 10px solid transparent;
}
	
.f-mon-baloon-bottom:after{
	bottom: calc( 2px - 1em );
	border-top: solid 1em #f32d46;
}

}

@media (max-width: 380px) {
	
.f-mon-baloon-bottom:after {
    bottom: calc(1px - .6em);
    border-top: solid .6em #f32d46;
}
}

/*logo flex bandaibanner ========*/

.f-sec-flex-container{
	display: flex;
	justify-content:space-around;
	align-items: flex-end;
	padding-top:200px;
}

@media only screen and (max-width: 768px) {
	.f-sec-flex-container{
	display: flex;
	justify-content:space-around;
	align-items: flex-end;
	padding-top:70px;
	position: absolute;
    top: 0%;
	padding-bottom: 80px;
	width: 98%;
    margin: auto;
}
}

@media only screen and (max-width: 640px) {
	.f-sec-flex-container{
	display: flex;
	justify-content:space-around;
	align-items: flex-end;
	padding-top:38px;
	position: absolute;
    top: 0%;
    left: 50%;
    transform: translate(-50%, 0%);
    padding-bottom: 80px;
}
}

.f-sec-flex-container .f-flex-item{
	text-align: center;
	display: flex;
	flex-direction: column;
	flex-basis: calc((100% / 3));
}

.f-sec-flex-container .f-item1,
.f-sec-flex-container .f-item2,
.f-sec-flex-container .f-item3{
	align-self: baseline;
}

.f-bn-inner-container .f-sec-flex-container .f-flex-item p{
	color:#fff;
	font-size:13px;
	line-height: 1.5;
}

@media only screen and (max-width: 600px) {

.f-bn-inner-container .f-sec-flex-container .f-flex-item p{
	font-size:12px;
	line-height: 1.2;
}
	
}

@media only screen and (max-width: 360px) {

.f-bn-inner-container .f-sec-flex-container .f-flex-item p{
	color:#fff;
	font-size:12px;
	line-height: 1.2;
}
	
}

.f-sec-flex-container .f-item1 img{
	max-width: 170px;
/*	margin-bottom:1.5em;*/
}

.f-sec-flex-container .f-item2 img{
	max-width: 138px;
}

.f-sec-flex-container .f-item3 img{
	max-width: 230px;
}

.f-sec-flex-container .f-item1 img,
.f-sec-flex-container .f-item2 img,
.f-sec-flex-container .f-item3 img{
	margin-bottom:0.5em;
}

/*bandai banner*/
.f-sec-bn-wrap{
	margin: 0px 0 50px;
	padding:0 40px;
	text-align: center;
}

@media only screen and (max-width: 768px) {
.f-sec-bn-wrap{
	display: none;
}
	
.f-sec-flex-container{
	flex-wrap: wrap;
}
	
.f-sec-flex-container .f-flex-item{
	flex-basis: auto;
}
	
.f-sec-flex-container .f-item1{
	order: 2;
	width: 50%;
}

.f-sec-flex-container .f-item2{
	order: 1;
	width: 100%;
	margin-bottom: 3em;
}

.f-sec-flex-container .f-item3{
	order: 3;
	width: 50%;
}
	
.f-sec-flex-container .f-item1 img{
	max-width: 52%;
}

.f-sec-flex-container .f-item2 img{
	max-width: 22%;
}

.f-sec-flex-container .f-item3 img{
	max-width: 70%;
}
}

@media only screen and (max-width: 414px) {
	.f-sec-flex-container .f-item2{
	margin-bottom: 1.5em;
}
}

/* floating-banner  ========== */

.f-floating-banner {
     display: none;
    }

@media only screen and (max-width: 768px) {

.f-floating-banner {
	display: block;
    position: fixed;
    z-index: 99999;
    bottom: 0;
    right: 0;
}
	
.f-banner {
    width: 100%;/* bn-width */
    padding: 10px 0 0;
}

.f-banner img{
	display: block;
}
	
.f-floating-banner a {
    text-decoration: none;
}


.f-balloon-down-wrap{
	display: flex;
	justify-content: flex-end;
	padding: 0 10px 10px 0;
	text-align: center;
	}
	
.f-block-baloon-bottom p.f-text-gd{
	color: transparent;
    font-family: Barlow, sans-serif;
    font-style: italic;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.5em;
    background: -webkit-linear-gradient(89.2deg, #F32C46 19.58%, #F8C49B 53.1%);
    background: linear-gradient(89.2deg, #f32c46 19.58%, #f8c49b 53.1%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
	}
	
/* baloon ========== */
	
.f-block-baloon-bottom{
	display: table;
	padding: 0.5em 1.5em;
	margin-bottom: 1em;
	position: relative;
	background-color: #151a20;
	border: 1px solid #ccc;
	border-radius: 0.5em;
}
	
.f-block-baloon-bottom:before, .f-block-baloon-bottom:after{
	content: '';
	position: absolute;
}
	
/* baloon-bottom ==========*/
.f-block-baloon-bottom{
	margin-bottom: 0em;
}
	
.f-block-baloon-bottom:before, .f-block-baloon-bottom:after	{
	left: 50%;
	transform: translateX(-50%);
	bottom: -1em;
	border-top: 1em solid #ccc;
	border-right: 10px solid transparent;
	border-left: 10px solid transparent;
}
	
.f-block-baloon-bottom:after{
	bottom: calc( 2px - 1em );
	border-top: solid 1em #151a20;
}
	
body:has(#f-section-wrap) .um-footer .um-primary-footer .um-widgets-wrapper .um-primary-widget-img.item3 {
        padding-top: 30px;
    }
	
body:has(#f-section-wrap) .um-footer .um-primary-footer .um-widgets-wrapper .um-primary-widget-img.item5 {
        padding-bottom: 120px;
}
	
}

.f-fadeInUp {
    opacity: 0;
    transform: translateY(100px);
    animation-name: fadeIn;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes fadeIn {
    0% {
    }
    100% {
        opacity: 1;
        transform: translate(0);
    }
}

/*um-btn-primary==========*/

/*single-red*/

.f-btn-primary {
  color: #FFFFFF;
  font-family: "Chakra Petch", sans-serif;
  font-style: normal;
  text-decoration: none;
  text-transform: uppercase;
  position: relative;
  display: block;
  background-color: #F32C46;
  opacity: 1;
  margin: auto auto 40px;
  padding: 0;
  cursor: pointer;
}

@media only screen and (max-width: 430px) {
	
.f-top-btn-col .f-btn-primary {
  margin: auto auto 30px;
	}
}

.f-btn-primary::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  border: 0.5px solid #990014;
  border-radius: 0;
  transition: all 200ms ease-in-out;
}

.f-btn-primary.large{
  font-size: 14px;
  font-weight: 600;
  max-width: 150px;
  min-width: 140px;
  width: 100%;
  height: 40px;
}

.f-btn-primary.small{
  font-size: 14px;
  font-weight: 600;
  max-width: 140px;
  min-width: 100px;
  width: 100%;
  height: 32px;
}

/*single-black*/

.f-btn-primary-bk {
  color: #FFFFFF;
  font-family: "Chakra Petch", sans-serif;
  font-style: normal;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  text-transform: uppercase;
  position: relative;
  display: block;
  background-color: #161a22;
  opacity: 1;
  max-width: 200px;
  min-width: 150px;
  width: 100%;
  height: 42px;
  margin: auto;
  padding: 0;
  cursor: pointer;
	border:1px solid #fff;
}
.f-btn-primary-bk::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  border: 0.5px solid #11161e;
  border-radius: 0;
  transition: all 200ms ease-in-out;
}

.f-btn-primary .f-btn-wrap,
.f-btn-primary-bk .f-btn-wrap{
  text-align: center;
  position: relative;
  z-index: 2;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.f-btn-primary .f-btn-wrap .uc-sf-btn-icon,
.f-btn-primary .f-btn-wrap .uc-sf-svg {
  display: block;
}
.f-btn-primary .f-btn-wrap .uc-sf-btn-label {
  display: block;
}
.f-btn-primary .f-btn-wrap .f-btn-text,
.f-btn-primary-bk .f-btn-wrap .f-btn-text{
  display: block;
}
.f-btn-primary .f-btn-wrap::after,
.f-btn-primary-bk .f-btn-wrap::after{
  content: "";
  position: absolute;
  top: 0;
  left: -110%;
  z-index: 3;
  display: block;
  background-color: rgba(255, 255, 255, 0.2);
  width: 50%;
  height: 100%;
  transform: skew(35deg);
  transition: all 200ms ease-in-out;
}
.f-btn-primary:hover,
.f-btn-primary-bk:hover{
  opacity: 0.8;
}
.f-btn-primary:hover::before,
.f-btn-primary-bk:hover::before{
  top: -6px;
  left: -6px;
  width: calc(100% + 12px);
  height: calc(100% + 12px);
  border-color: #FFFFFF;
  border-radius: 4px;
}
.f-btn-primary:hover .f-btn-wrap::after,
.f-btn-primary-bk:hover .f-btn-wrap::after{
  left: 110%;
}
.f-btn-primary:visited,
.f-btn-primary-bk:visited{
  color: #FFFFFF;
}

/*f-responsive==========*/

.f-responsive{
	max-width: 100%;
	height:auto;
}

.f-mb {
  display: inline-block;
}

/*---sp br--*/
@media screen and (max-width: 480px) {
.f-pc-br{display:none;}
.f-tb-br{display:none;}
.f-sp-br{display:block;}
}

/*---tb br--*/
@media screen and (min-width:481px) and (max-width: 1020px) {
.f-pc-br{display:none;}
.f-tb-br{display:block;}
.f-sp-br{display:none;}
}

/*---pc br--*/
@media screen and (min-width:1021px){
.f-tb-br{display:none;}
.f-sp-br{display:none;}
}

/*link==========*/

.f-image-link{
  display:block;
}
.f-image-link img{
  transition:0.3s;
}
.f-image-link:hover img{
  opacity:0.8;
}