@charset 'utf-8';

/* =============================
  デフォルト

em
⇒font-sizeに対しての比率

vw
⇒画面サイズに対して大きさが変わる　レスポンシブチック

============================= */
html
{
  font-size: 16px;
  scroll-behavior: smooth;
}


body
{
  background: #eee;  color: #001b22;  font-family: 'Yu Gothic Medium',
  '游ゴシック Medium',
  YuGothic,
  '游ゴシック体',
  'ヒラギノ角ゴ Pro W3',
  'メイリオ',
  'Meiryo',
  sans-serif;  line-height: 1.8;  text-rendering: optimizeLegibility;
}

/* 基本的に横幅は450px */
#wrap
{
  position: relative;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 0 1em .5em;
  max-width: 450px;
  background: #fff;
  word-wrap: break-word;



}


header
{
  margin: auto 0;  padding: 1em 0 .5em;  max-width: 450px;
}

#contents
{
  margin: 0 auto;  padding-bottom: 0;  max-width: 450px;
}

.mb1
{
  margin-bottom: 1em;
}

.mb2
{
  margin-bottom: 2em;
}

.mb3
{
  margin-bottom: 3em;
}

.mb4
{
  margin-bottom: 4em;
}

.mb5
{
  margin-bottom: 5em;
}

.mb6
{
  margin-bottom: 6em;
}

.mb7
{
  margin-bottom: 7em;
}

.mb8
{
  margin-bottom: 8em;
}

.mb9
{
  margin-bottom: 9em;
}

.mb10
{
  margin-bottom: 10em;
}

.mt1
{
  margin-top: 1em;
}

.mt2
{
  margin-top: 2em;
}

.mt3
{
  margin-top: 3em;
}

.mt4
{
  margin-top: 4em;
}

.mt5
{
  margin-top: 5em;
}

.mt6
{
  margin-top: 6em;
}

.mt7
{
  margin-top: 7em;
}

.mt8
{
  margin-top: 8em;
}

.mt9
{
  margin-top: 9em;
}

.mt10
{
  margin-top: 10em;
}








footer
{
  background-color: #ccc;


  text-align: center;
  max-width: 450px;
  margin: 0 auto;

  height: 170px;
}

footer > div
{
  display: inline-block;  margin: 0 auto;
}

.footer_txt
{
  display: table-cell;  padding: 1em 2em;  height: 100px;  color: #fff;  vertical-align: middle;
}

.footer_txt a
{
  color: #fff;
}





/* =============================
  画像

  はみ出したりしないようにする。適宜修正しておく。
  CSSなしでimgにするとそのままのサイズではみだしてしまう。
============================= */

#contents img {
  width: 100%;
  height: auto;
  margin: 0 auto;
  text-align: center;
  /* padding: 1em 0; */
  vertical-align: bottom;
}




/* =============================
  文字装飾
============================= */


/* =============================
  h1〜h6
============================= */
h1
{
  margin-bottom: 1em;
  text-align: center;
  font-weight: bold;
  margin-top: 0;
  padding-bottom: 0;
  border-bottom: 2px solid #696969;
  color: #001b22;
  text-align: center;
/* font-size: 1.8em; */
  font-size: 1.3em;  line-height: 1.5;

}

h2{
  font-size: 1.2em;
  padding-left: 6px;
  border-left: 3px solid #444;
}




/* =============================
  テキストの大きさ
  適宜修正しておく
  txt-で統一
============================= */
.txt_small
{
  font-size: .8em;
}

.txt_middle
{
  font-weight: bold;  font-size: 1.2em;
}

.txt_large
{
  font-weight: bold;  font-size: 1.5em;
}

.txt_bold
{
  font-weight: bold;
}

.txt_small_very{
  font-size: .6em;

}

/* ライン_本文と同一 */
.txt_line
{
  text-decoration: underline;
}

/* =============================
  配置
  txt_で統一
============================= */
.txt_right
{
  text-align: right;
}

.txt_center
{
  text-align: center;
}

.txt_left
{
  text-align: left;
}

/* エリア */



.gray_area
{
  margin: 1em 0;  padding: 1em 1em 1em 1em;  border-radius: 1em;
    background: #ccc;
}

.gray_border{
  border-top: 1px solid #bbb;
}

.green_area
{
  margin: 1em 0;  padding: 1em 1em 1em 1em;  border-radius: 1em;
  background: #ccffcc;
}

.yellow_area
{
  margin: 1em 0;  padding: 1em 1em 1em 3em;  border-radius: 1em;
}

.color_area
{
  margin: 1em 0;  padding: 1em 1em 1em 3em;  border-radius: 1em;
}

.white_area
{
  margin: 1em 0;  padding: 1em 1em 1em 3em;  border-radius: 1em;
}

/* ↑追加CSS　高 */






/* =============================
  CTAボタン
============================= */

/* CTAボタン */
/* solid021 */
.button_solid021 a {
  background: #EA1B16;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  max-width: 300px;
  padding: 10px 25px;
  color: #FFF;
  transition: 0.3s ease-in-out;
  font-weight: 600;
  border-radius: 5px;
  border-bottom: 4px solid #730f0b;
  overflow: hidden;
  animation: poyoyon 3s ease 0s infinite normal;

}
.button_solid021 a:active {
transform: translateY(4px);
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
border-bottom: none;
}
.button_solid021 a:before {
content: '';
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: -100%;
background-image: linear-gradient( 130deg, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 55%);
animation: shine 3s infinite;
}
@keyframes shine {
33% {
  left: 100%;
}
100% {
  left: 100%;
}
}
.button_solid021 a:after {
  content: '';
  width: 5px;
  height: 5px;
  border-top: 3px solid #FFF;
  border-right: 3px solid #FFF;
  transform: rotate(45deg) translateY(-48%);
  position: absolute;
  top: 48%;
  right: 20px;
  border-radius: 1px;
  transition: 0.3s ease-in-out;
}



.button_solid022 a {
  background: #00bda0;
  border-bottom: 4px solid #00805E;

}
/* CTAボタン */



/* =============================
  色、大きさ変更
  適宜変更
============================= */



/* リスト_グレー */
.ul_gray
{
  background: #eee;
}

/* ピンク */
.txt_pink,
.txt_pink_bold,
.txt_pink_big
{
  color: #f0f;
}

/* オレンジ */
.txt_orange,
.txt_orange_bold,
.txt_orange_big
{
  color: #f60;
}

/* レッド */
.txt_red,
.txt_red_bold,
.txt_red_big
{
  color: #de0000;
}

.txt_red
{
  color: red;
}

.txt_red2
{
  color: #c22c32;
}

/* .txt_yellow2{

  color: #FFFF59;
} */

/* グリーン */
.txt_green,
.txt_green_bold,
.txt_green_big
{
  color: #008080;
}

/* ブルー */
.txt_blue,
.txt_blue_bold,
.txt_blue_big
{
  color: #0071e3;
}








/* ↓テーブル表*/

table,
td,
th
{
  border: 2px solid #d5d5d5;
  border-collapse: collapse;
  vertical-align: middle;
  padding: 3px;  height: 25px;
  /* margin-right: auto; 
  margin-left: auto; */
  width: 100%;
  /* table-layout: fixed; */
  text-align: center;
  font-size: 0.9em;
}

th{
  background-color: #f0e6cc;
  font-weight: normal;
  width: 35%;
}

tr:first-child{
  background-color: #CCD6F0;
}



/* 以下、ジェネレーターからの出力 */

/* table , td, th {
	border: 1px solid #595959;
	border-collapse: collapse;
}
td, th {
	padding: 3px;
	width: 30px;
	height: 25px;
}
th {
	background: #f0e6cc;
}
.even {
	background: #fbf8f0;
}
.odd {
	background: #fefcf9;
} */

/* ↑テーブル表*/

/* ↓↓↓テーブル表の装飾↓↓↓*/
.table_gray{
  background-color: #f5f5f5;
}

.table_ghostwhite{
  background-color: ghostwhite;
}

.table_2 td{
  border: solid 1px #dcdcdc;
}
/* ↑↑↑テーブル表の装飾↑↑↑*/


/* アンダーライン */
.yellow_line
{
  /* background: linear-gradient(transparent 50%, #ffff99 50%); */
  background-color: #ffff99;
}

.orange_line
{
  /* background: linear-gradient(transparent 50%, #ffc14d 50%); */
  background-color: #FFDA99;
}

/* アンダーライン */





/*右からフェードイン*/
@keyframes right-to-left {
  0% {
      transform: translateX(10px);
  }
  100% {
      transform: translateX(0);
  }
}




/* ↓flexbox　横並び　端っこ同士から等間隔にするレイアウト記法*/

.flex-container
{
  display: flex;  align-items: center;  justify-content: space-between;
}

/* ↑flexbox　横並び　端っこ同士から等間隔にするレイアウト記法*/





/* ↓２行目以降をインデントするCSS*/
.indent {
  margin-left: 1rem;
  text-indent: -1rem;
}




/* 以下  イオンカードのスタイル */

.genre_area{
  display: flex;
  justify-content: flex-end;
}

.genre{
  text-align: center;
  font-size: .6em;;
  color: #c9c9c9;
  background-color: #f0f0f0;
  border-radius: 50px;
  padding: 0 4px;
  width: 40px;
  margin-right: 3px;
  margin-top: 3px;

}

.genre_02{
  text-align: center;
  font-size: .8em;;
  color: #000;
  border: 1px solid;
  padding: 0 2px;
  width: 65px;
  margin-right: 3px;
  margin-bottom: 3px;

}


/* 映画デート訴求用 */
.genre_eiga{
  text-align: center;
  font-size: .6em;;
  color: #c9c9c9;
  background-color: #f0f0f0;
  border-radius: 50px;
  padding: 0 4px;
  width: 50px;
  margin-right: 3px;
  margin-top: 3px;

}
/* 映画デート訴求用 */


.first-lead{
  padding: 8px;
  /* border: 2px solid #F7F7F7; */
  background-color: #c22c32;
  background-color: #006f00;
  /* margin: 10px; */
  margin: 10px 0;
  color: #fff;
  text-align: center;
}

.second-lead{
  padding: 8px;
  /* border: 2px solid #F7F7F7; */
  background-color: #F2F9FF;
  border-left: solid 7px #99D6FF;
  /* margin: 10px; */
  text-align: center;
}

.third-lead{
  padding: 8px;

  background-color: #ffff99;
  margin: 30px 0 10px;
  text-align: center;
}


.fourth-lead{
  padding: 8px;
  /* border: 2px solid #F7F7F7; */
  background-color: #99D6FF;
  border-left: solid 7px #9999FF;
  /* margin: 10px; */
  text-align: center;
}

/* 映画デート訴求 */
.fifth-lead{
  padding: 8px;

  background-color: #f2f9ff;
  margin: 30px 0 10px;
  text-align: center;
}
/* 映画デート訴求 */


.contents-border{
  padding: 10px;
  border: 6px solid #F7F7F7;
  margin: 30px 10px 10px;
}

.contents-border_2{
  padding: 10px;
  /* border: 6px solid #FF99AD; */
    border: 6px solid #99D6FF;

  margin: 30px 10px 10px;
}

#contents .apply-page{
  display: flex;
  justify-content: center;
  width: 80%;
    padding: 10px;

    border: 10px solid #eee;
    /* border: 20px dashed #eee; */

}

#contents .apply-page2{

  width: 93%;
  padding: 10px;

}




/* CTAボタンの矢印が動くアクション */
/* https://dad-union.com/css/701 */
.position-rel{
  position: relative;
}


/* CTAボタンの矢印が動くアクション */

#contents .arrow2 {
  position: absolute;
  width: 60px;
  top: -5px;
  right: 10%;
  animation: poyoyon 3s ease 0s infinite normal;
  /* ,leftRight 2s ease 0s infinite normal */

  
}

@keyframes poyoyon {
  0%, 40% {
    transform: skew(0deg, 0deg) translate(0px, 0px);
    
  }
  5% {
    transform: skew(2deg, 2deg);
  }
  10% {
    transform: skew(-2deg, -2deg);
  }
  15% {
    transform: skew(1deg, 1deg);
  }
  20% {
    transform: skew(-1deg, -1deg) translate(10px, 0px);
  }
  25% {
    transform: skew(0.6deg, 0.6deg);
  }
  30% {
    transform: skew(-0.6deg, -0.6deg);
  }
  35% {
    transform: skew(0.3deg, 0.3deg);
  }
}

/* @keyframes leftRight {
  0%{
    transform:translate(0px,0px);

    }
  33%{
    transform:translate(10px,0px);

  }
  66%{
    transform:translate(0px,0px);

    }
  
  100%{
    transform:translate(10px,0px);

    }
  } */

/* 固定されるCTAボタン */
.cta-button-fixed{
  display: flex;
  justify-content: center;
  text-align: center;
  opacity: 0;

  position: fixed;
  bottom: 0;
  width: 100%;
  max-width: 450px;
  height: 50px;
  z-index: 10;
  background: #f8f8f8;
  font-size: 16px;
  transition: 2s;
}



.cta-button-fixed a{
  /* ↓レイアウト↓ */
  background: #DA2929;
  /* margin: 0 auto; */
  max-width: 300px;
  padding: 5px 25px;
  margin: 1% 0; 
  color: #FFF;
  /* font-weight: 600; */
  border-radius: 5px;
  /* border-bottom: 4px solid #730f0b; */
  overflow: hidden;
  /* box-shadow: 0px 0px 5px 5px #981D1D; */
  /* text-align: center; */
  width: 300px;
  /* opacity: 0.9; */
  /* ↑レイアウト↑ */


  /* ▼ボタンの表示位置を画面の右下に固定 */
  position: fixed; /* ➁  表示場所を固定 */
  /* bottom: 0px;  */
  /* 画面下端からの距離 */
  /* right: 30px;  */
  /* 画面右端からの距離 */
  /* opacity: 0;  */
  /* ➂  ▼最初は非表示に */
  z-index: 10; 
  font-size: 18px;
}


.cta-button-fixed2{
    position: fixed;
    bottom: 0px; 
    right: 5px; 
    opacity: 0; 
    z-index: 10; 
}

.cta-button-fixed2 img{
  width: 200px;

}


/* 固定されるCTAボタン */

#contents .howtobuy{
    width: 80%;
    padding: 10px;
    /* border: 2px solid #B7B7B7; */
    border: 10px solid #eee;

    display: flex;
    /* justify-content: center; */
  }

  #contents .cardImg{
    width: 90%;
    display: flex;
    
  }

  #contents .twitter-img{
    width: 85%;
    /* display: flex; */
    
  }

  @media screen and (max-width:479px) {
 
    /*　画面サイズが479px以下の場合ここの記述が適用される　*/
    .sp-none{
      display: none;
    }
  }  


    
    /*　画面サイズが480px以上の場合ここの記述が適用される　*/
  @media screen and (min-width:480px){
    .pc-none{
      display: none;
    }

    .cta-button-fixed2{
      position: fixed;
      bottom: 0px; 
      right: 40%; 
      opacity: 0; 
      z-index: 10; 
  }
  
  .cta-button-fixed2 img{
    width: 180px;
  
  }

    }




    .copy_right{
      margin-right: 30px;
      color: #959595;
      /* margin-top: -5px; */
    }


    .cardimg_zone{
      background-color: #f7f6f2;
      /* padding: 20px; */
      padding: 20px 0;
      border: 1px solid #000;
    }

    .kutikomi_zone{
      background-color: #f7f6f2;
      /* padding: 20px; */
      padding: 10px;
      text-align: center;
    }

    .apply_zone{
      background-color: #f7f6f2;
      /* padding: 20px; */
      padding: 10px;
      text-align: center;
    }

    .apply_zone_02{
      background-color: #f7f6f2;
      padding: 10px 30px;
      text-align: center;
    }



    /* ↓↓↓固定ボタンの挙動 上にスクロールしたら出現↓↓↓*/

#scrollButton {
  position: fixed;
  width: 100%;
  bottom: 0px;
  /* right: 20px; */
  padding: 10px 20px;
  background-color: #1665EA;
  border: none;
  /* border-radius: 5px; */
  cursor: pointer;





  /* 初期状態（非表示で下に隠れている） */
  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

#scrollButton a{
  color: white;
  font-weight: 600;
  display: flex;
  justify-content: center;
}

/* ボタンが表示されるときのクラス */
#scrollButton.show {
  transform: translateY(0);
  opacity: 1;
}

/* ボタンが消えるときのクラス */
#scrollButton.hide {
  transform: translateY(100%);
  opacity: 0;
}

.scrollButton a:before {
  content: '';
  width: 5px;
  height: 5px;
  border-top: 3px solid #FFF;
  border-right: 3px solid #FFF;
  transform: rotate(45deg) translateY(-48%);
  position: absolute;
  top: 47%;
  left: 8%;
  border-radius: 1px;
  /* transition: 0.3s ease-in-out; */
}

/* ↑↑↑固定ボタンの挙動 上にスクロールしたら出現↑↑↑*/