/**** reset ****/
html, body, h1, h2, h3, h4, ul, ol, dl, li, dt, dd, p, div, span, img, a, table, tr, th, td, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    margin: 0;
    padding: 0;
    border: 0;
    font-size:100%;
    font-weight: normal;
    vertical-align:baseline;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
body {
    width: 100%;
    line-height:1;
    letter-spacing:0.03em;
/*    display: inline;*/
    font-family: "ヒラギノ角ゴシック","Hiragino Sans";
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display:block;
}
nav, ol, ul {
    list-style: none;
    list-style-type: none;
}
a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
    transition: 0.7s;
}
a:hover {
    opacity: 0.5 ;
}
table {
    border-collapse:collapse;
    border-spacing:0;
}
th, td {
    text-align:left;
    vertical-align:top;
}
input, select, textarea {
    vertical-align:middle;
}
p {
    line-height: 1.8em;
    font-size: 1.1em;
    padding: 30px 0;
}
/*img{
  margin: 20px 0;
}*/

h1{
  font-size:1.3em;
  padding: 11px 0;
  color: #fff;
  font-weight: 600;
  text-align: center;
  border-bottom: 4px solid #ff544e;
  padding: 1rem 0rem;
  margin-bottom: 2rem;
  font-size: 40px;
  margin: 35px;
  padding: 30px;
}


/**** style ****/
.mgn_b_10{ margin-bottom:10px;}
.mgn_b_20{ margin-bottom:20px;}
.mgn_b_30{ margin-bottom:30px;}
.mgn_t_10{ margin-top:10px;}
.mgn_t_20{ margin-top:20px;}
.mgn_t_30{ margin-top:30px;}
.pdg_b_30{ padding-bottom:30px;}

.mgn_tb_20{ margin:30px 0;}
.mgn_tb_30{ margin:30px 0;}

strong {
font-weight:700;
color: #2bad90;
background: linear-gradient(transparent 60%, #fffd76 0%);
font-size: 1.2em;
line-height: 1.5em;
}

header {
  width: 100%;
}
header img{
  margin: 0;
}

.img_cent{ margin:0 auto; text-align: center;}
.sp-only {display:none;}
.pc-only {display:block;}

.container_1090{
    width: 1090px;
    margin:0 auto;
    /* padding: 40px 0 30px; */
}
.container_810 {
    width: 810px;
    margin:0 auto;
}

footer{
  background-color: #780b11;
  color: #fff;
  text-align: center;
  font-size: 0.8em;
  font-weight: 200;
  padding: 15px 0;
}

.img_logo_pc {
    margin: 0 auto;
    padding: 10px;
    background-color: #a62126;
}
.img_logo {
    margin: 0 auto;
    text-align: center;
    padding: 5px;
    background-color: black;
}


.bk_block{
  background-color: #000;
  padding-top: 30px;
}



/* CTA画像の上に動くグラデーションを重ねる ******************/
/* CTA画像の上に動くグラデーションを重ねる（左→右） */
a.cta-anim{
  position: relative;
  display: block;
  overflow: hidden;
}
a.cta-anim > img{
  display: block;
  width: 100%;
  height: auto;
}

a.cta-anim::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  /* 光の帯 */
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.15) 35%,
    rgba(255,255,255,0.45) 50%,
    rgba(255,255,255,0.15) 65%,
    rgba(255,255,255,0) 100%
  );

  background-size: 220% 100%;
  animation: ctaShineLR 2.2s linear infinite;

  mix-blend-mode: screen;
  opacity: 0.95;
}

/*@keyframes ctaShineLR{
  0%   { background-position: -120% 0%; } /* 左外から開始
  100% { background-position: 120% 0%; }  右外へ抜ける 
}*/

@keyframes ctaShineLR{
  0%   { background-position: 120% 0%; }   /* 右外から開始 */
  100% { background-position: -120% 0%; }  /* 左外へ抜ける */
}

/* 任意：hoverで少し強く */
a.cta-anim:hover::before{
  opacity: 1;
}


/***********************sp********************/

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

h1{
  font-size:1.3em;
  padding: 11px 0;
  color: #fff;
  font-weight: 600;
  text-align: center;
  border-bottom: 4px solid #ff544e;
  padding: 1rem 0rem;
  margin-bottom: 2rem;
  font-size: 26px;
  margin: 20px;
}

.movie_text{
  font-size:1.5em;
  padding: 11px 0;
  color: #fff;
  font-weight: 600;
  text-align: center;
}


p {
  font-size: 1em;
  padding: 0 10px;
}

.sp-only {display:block;}
.pc-only {display:none;}
.wrapper {padding: 0 10px;}

.img_logo {
  margin: 0 auto;
  text-align: left;
  padding: 5px;
  background-color: #a62126;
}

.container_810 {
  width: 100%;
}
.container_810 {
  width: 100%;
}
.container_1090{
  width: 100%;
  padding: 25px 0 20px;
}
.footerfix{
  position:fixed;
  bottom: 0;
}


/*　フッターの固定バナー表示用　*/
  #banner{
    width: 100%;
    display: block; /* ←これが必須（noneだと消えたまま） */
    position: fixed;
    left: 0;
    bottom: calc(20px + env(safe-area-inset-bottom)); /* ←終わる位置を上に */
    margin-bottom: 0;
    z-index: 9999;
  }

  #banner img{
    width: 100%;
    display: block;
  }

  footer{
    padding-bottom: calc(5px + env(safe-area-inset-bottom));
  }

  /* CTAに被らないように下の余白を確保（白が気になるなら色も付ける） */
  body::after{
    content:"";
    display:block;
    height: calc(140px + env(safe-area-inset-bottom)); /* ←必要なら調整 */
    background: #780b11; /* フッター色に合わせて白を消す */
  }
  #banner{
    bottom: env(safe-area-inset-bottom);
    margin-bottom: 0;
    z-index: 9999;
  }
  
}