@charset "utf-8";

/******* BASE *******/
div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {margin: 0;padding: 0;}
table {border-collapse: collapse;border-spacing: 0;}
img {border: 0;vertical-align: top;}
img.lp {border: 1px solid #a9a9a9;}
li {list-style: none;}
div {display: block;}
p {z-index: 5;}
a {text-decoration: none;}
a:hover {text-decoration: none;}
a:link {text-decoration: none;}
a:visited {text-decoration: none;}
a:hover {text-decoration: none;}
a:active {text-decoration: none;}
a:link { color: #fff; }
a:visited { color: #eee; }
a:hover { color: #d3d3d3; }
a:active { color: #00bfff; }
h2 {font-size: 24px; line-height: 150%;}

/*文字要素*/
span.bold {font-weight: bold;}
span.red {color: #e5003a;}
span.yellow {color: #fcee21;}
span.green {color: #06C62A;}
span.green_back {background-color: #D8E090; padding: 2px 8px;}
span.red_back {background-color: #F9CAC5; padding: 2px 8px;}
span.orange {color: #ff9000;}
span.blue {color: #0c0c87;}
span.pink {color: #ff647c;}
span.gray {color: #b8b8b8;}
span.brd {border-bottom: 4px solid #ffff3c;}
span.gold {color: #bf9034;}
span.fss {font-size: 16px;}
span.fsm {font-size: 24px; font-weight: bold;}
span.fsk {font-size: 36px; font-weight: bold; line-height: 52px;}
span.fsb {font-size: 50px;font-family;}
span.fsbb {font-size: 100px;font-family;}
span.bkl {background: url(../img/underline_b.png) bottom left repeat-x;}
span.mincho {font-family: 'Noto Serif JP', serif;}




/* Gradation */
span.bg_pink{
  background-image: linear-gradient(-135deg, #ed6ea0 0%, #ec8c69 100%);
  color: #ed6ea0;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

em.yellow {
    background-image: linear-gradient(to right, #f9eb21 50%, transparent 50%);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 200% 10px;
    margin-bottom: 10px;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    font-style: normal;
}

em.blue {
    color: #1b1464;
		font-style: normal;
    font-weight: bold;
}

em.red {
    background-image: linear-gradient(to right, #f77062 50%, transparent 50%);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 200% 10px;
    margin-bottom: 10px;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
		font-style: normal;
    color: #000;
}

/* 320 - 767 */
@media only screen and (min-width:320px) and (max-width:767px){
span.fsm {font-size: 18px;}
span.fsk {font-size: 28px; font-weight: bold;}
em.red {background-size: 200% 5px;}
span.fss {font-size: 14px;}
}

/*ボタン装飾 設定*/




/****** フッター ******/


/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (min-width:320px) and (max-width:767px) {
.pc { display: none !important; }
.sp { display: block !important; }
}

/* パソコンで見たときは"pc"のclassがついた画像が表示される */
/* .pc_sw { display: block; } */
.sp_sw { display: none !important; }
.pc_mw { display: block !important; }
.sp_mw { display: none !important; }
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (min-width:320px) and (max-width:767px) {
.pc_sw { display: none !important; }
.sp_sw { display: block !important; }
}@media only screen and (min-width:320px) and (max-width:1024px) {
.pc_mw { display: none !important; }
.sp_mw { display: block !important; }
}

/* float */
.clear {clear: both;}
.float {float: left;}
.clearfix {display: inline-table;}
.inline-b {display: inline-block;}
.left {text-align: left;}
.right {text-align: right;}
.center {text-align: center;}
.over {overflow: hidden;}
.flex{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex-wrap: wrap;
}

/* ビデオ設定 */
.video{
  position:relative;
  width:100%;
  padding-top:56.25%;
}
.video iframe{
  position:absolute;
  top:0;
  right:0;
  width:100%;
  height:100%;
}

/* 点滅 */
.blinking{
	-webkit-animation:blink 1s ease-in-out infinite alternate;
    -moz-animation:blink 1s ease-in-out infinite alternate;
    animation:blink 1s ease-in-out infinite alternate;
}
@-webkit-keyframes blink{
    0% {opacity:0.2;}
    100% {opacity:1;}
}
@-moz-keyframes blink{
    0% {opacity:0.2;}
    100% {opacity:1;}
}
@keyframes blink{
    0% {opacity:0.2;}
    100% {opacity:1;}
}

/* ボタン */
@keyframes anime{
0%{transform:scale(.95); opacity:1}
90%{opacity:.1}to{transform:scale(1.2,1.4); opacity:0}
}

.movie-btn {
  position: relative;
	top: 16px;
	left: 0px;
  max-width: 578.076px;
  height: 100%;
  border-radius: 12px;
  margin: 0px auto;
  transition: .2s;
  z-index:1000;
  margin-bottom: 32px;
  margin-top: 32px;
}
.movie-btn:before, .movie-btn:after {
  content: "";
  position: absolute;
  z-index: -10;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background:#bf9034;
  border-radius: 12px;
}
.movie-btn:before {animation: anime 2s ease-out infinite;}
.movie-btn:after {animation: anime 2s ease-out 1s infinite;}


.box-design {
  font-size: 36px;
  color: #cca770;
  margin-right: 4px;
}


/* ついてくるボタン */
.fixed-btn {
  position: fixed;
  bottom: 10px;
  right: 10px;
  padding: 6px 40px;
	z-index: 100;
}

.fixed-btn  {
  animation: fluffy1 5s ease infinite;
}

@keyframes fluffy1 {
  0% { transform:translateY(0) }
  5% { transform:translateY(0) }
  10% { transform:translateY(0) }
  20% { transform:translateY(-15px) }
  25% { transform:translateY(0) }
  30% { transform:translateY(-15px) }
  50% { transform:translateY(0) }
  100% { transform:translateY(0) }
}

.fixed-btn-sp {
  position: fixed;
	display: none;
}

/* 320 - 767 */
@media only screen and (min-width:320px) and (max-width:767px){
.fixed-btn {
  position: fixed;
  top: 6px;
  right: 0px;
  padding: 0px 12px;
	z-index: 100;
  width: 100%;
  display: none !important;
}

.fixed-btn-sp {
  display: block;
  position: fixed;
  width: 100%;
  top: 0px;
  right: 0px;
  padding: 6px 12px;
	z-index: 1001;
}
}