/* header*/

/* ------------------------------ BOARD ------------------------------ */

.board-red {
  margin: 2em auto;
  padding: 1em;
  width: 80%!important;
  background: rgb(255,166,208);  
  background: linear-gradient(0deg, rgba(255,166,208,1) 0%, rgba(255,236,243,1) 92%);
  color: #333333;
  box-shadow: 0 0 5px 1px #c0c0c0;
  border: 0.25em solid #FF3A3D;
  border-radius: 10px;
}

.board-yellow {
  margin: 2em auto;
  padding: 1em;
  width: 80%!important;
  background: rgb(255,231,120);
  background: linear-gradient(0deg, rgba(255,231,120,1) 0%, rgba(248,255,210,1) 92%);
  color: #333333;
  box-shadow: 0 0 5px 1px #c0c0c0;
  border: 0.25em solid #FFB523;
  border-radius: 10px;
}

.board-blue {
  margin: 2em auto;
  padding: 1em;
  width: 80%!important;
  background: rgb(120,170,255);
  background: linear-gradient(0deg, rgba(120,170,255,1) 0%, rgba(205,253,255,1) 100%);
  color: #333333;
  box-shadow: 0 0 5px 1px #c0c0c0;
  border: 0.25em solid #1b1464;
  border-radius: 10px;
}

@media screen and (max-width:767px){
.board-red {
  margin: 0 auto!important;
  padding: 1em!important;
  width: 90%!important;
  background: rgb(255,166,208);  
  background: linear-gradient(0deg, rgba(255,166,208,1) 0%, rgba(255,236,243,1) 92%);
  color: #333333;
  box-shadow: 0 0 5px 1px #c0c0c0;
  border: 0.25em solid #FF3A3D;
  border-radius: 10px;
}

.board-yellow {
  margin: 0 auto!important;
  padding: 1em!important;
  width: 90%!important;
  background: rgb(255,231,120);
  background: linear-gradient(0deg, rgba(255,231,120,1) 0%, rgba(248,255,210,1) 92%);
  color: #333333;
  box-shadow: 0 0 5px 1px #c0c0c0;
  border: 0.25em solid #FFB523;
  border-radius: 10px;
}

.board-blue {
  margin: 0 auto!important;
  padding: 1em!important;
  width: 90%!important;
  background: rgb(120,170,255);
  background: linear-gradient(0deg, rgba(120,170,255,1) 0%, rgba(205,253,255,1) 100%);
  color: #333333;
  box-shadow: 0 0 5px 1px #c0c0c0;
  border: 0.25em solid #1b1464;
  border-radius: 10px;
}
}

.fadeline {
  border-width: 0 0 3px;
  border-image: linear-gradient(
    90deg,
    hsla(0, 0%, 100%, 0),
    hsla(0, 0%, 100%, 0.5) 50%,
    hsla(0, 0%, 100%, 0) 100%) 0 0 100%;
  border-style: solid;
}

/* ------------------------------ NEW YOUTUBE LAYOUT ------------------------------ */

/* コンテナ */
.yt-lite{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  background:#000;
  border-radius:12px;
  overflow:hidden;
  isolation:isolate;
  z-index:10; /* 不要なら消してOK */
}

/* ポスター（必要に応じてURL差し替え） */
.yt-lite::before{
  content:"";
  position:absolute; inset:0;
  background-image:url("https://i.ytimg.com/vi/0kqOMo5E6MA/maxresdefault.jpg");
  background-size:cover; background-position:center;
  transition:opacity .2s ease;
  pointer-events:none;
}

/* iframe は常に全面フィット（他CSSに勝つために !important） */
.yt-lite iframe{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  border:0 !important;
  display:block !important;
  max-width:none !important;
  transform:none !important;
  z-index:1 !important;
}

/* 再生ボタン */
.yt-lite .ytl-play{
  position:absolute; inset:0; margin:auto;
  width:100px; height:100px; z-index:2;
  border:none; border-radius:999px; cursor:pointer;
  display:grid; place-items:center;
  background:linear-gradient(180deg, rgba(250,72,72,1) 50%, rgba(161,29,29,1) 100%);
  box-shadow:
    0 0 0 3px rgba(255,255,255,.95),
    0 0 28px rgba(255,255,255,.80),
    0 10px 18px rgba(0,0,0,.25);
}
.yt-lite .ytl-play::before{
  content:""; display:block; width:0; height:0;
  border-left:34px solid #fff;
  border-top:20px solid transparent;
  border-bottom:20px solid transparent;
  margin-left:6px;
  filter:drop-shadow(0 0 6px rgba(255,255,255,.9));
}

/* 再生開始後はオーバーレイを無効化 */
.yt-lite.playing::before,
.yt-lite.playing .ytl-play{
  opacity:0; pointer-events:none;
}

/* 透明の先読みiframeはタップを通す（重要） */
.yt-lite iframe[style*="opacity: 0"]{
  pointer-events:none !important;
}

/* aspect-ratio未対応ブラウザ用フォールバック */
@supports not (aspect-ratio: 16/9){
  .yt-lite{ height:0; padding-top:56.25%; }
  .yt-lite > *{ position:absolute; inset:0; }
}

/* ----（任意）使っている場合だけ残す ---- */

/* iOS用のヒントバッジ */
.yt-lite .yt-hint{
  position:absolute; left:50%; bottom:12px; transform:translateX(-50%);
  padding:6px 10px; background:rgba(0,0,0,.6); color:#fff; font-size:12px;
  border-radius:999px; pointer-events:none; z-index:3; display:none;
}
.yt-lite.show-hint .yt-hint{ display:block; }

/* 右下の全画面ボタン（外付けを使う場合のみ） */
.yt-lite .yt-fs{
  position:absolute; right:12px; bottom:12px; z-index:4;
  padding:8px 10px; border-radius:10px; font-size:12px;
  background:rgba(0,0,0,.55); color:#fff; border:1px solid rgba(255,255,255,.3);
  display:none; cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.yt-lite.playing.ios .yt-fs{ display:block; }

/* 1) 明示しておく（念のため） */
.yt-lite::before { opacity: 1; }

/* 2) コンテナ内に iframe が無いときは、クラスに関係なく必ず復帰させる */
.yt-lite:not(:has(iframe))::before,
.yt-lite:not(:has(iframe)) .ytl-play{
  opacity:1 !important;
  pointer-events:auto !important;
}

/* --- YouTube埋め込みのズレ矯正パッチ --- */
/* コンテナ */
#yt-lite-1 { position:relative; overflow:hidden; line-height:0; }

/* 直接の iframe と、YouTube が差し込むラッパー(div)を丸ごとフラットにして全面フィット */
#yt-lite-1 > iframe,
#yt-lite-1 > div:not(.ytl-play):not(.yt-hint),
#yt-lite-1 > div iframe {
  position:absolute !important;
  top:0 !important; right:0 !important; bottom:0 !important; left:0 !important;
  width:100% !important; height:100% !important;
  margin:0 !important; padding:0 !important; border:0 !important;
  max-width:none !important; transform:none !important; box-shadow:none !important;
  display:block !important; background:transparent !important;
}

/* オーバーレイ（再生ボタン/ヒント）は最前面のまま */
#yt-lite-1 .ytl-play, #yt-lite-1 .yt-hint { position:absolute; z-index:5; }

/* 念のため：先読みで透明化している iframe はタップを通す */
#yt-lite-1 iframe[style*="opacity: 0"] { pointer-events:none !important; }


/* ------------------------------ NEW FOOTER ------------------------------ */

.footerframe {
 border: none;
 margin: 0px;
 width: 100%!important;
 height: 120px!important;
 overflow: hidden;
}

@media screen and (max-width:1001px){
.footerframe {
 border: none;
 margin: 0px;
 width: 100%!important;
 height: 130px!important;
 overflow: hidden;
}
}

/* pcで見たときは"pc"のclassがついた画像が表示される */
/* ------------------------------ DISPLAY BLOCKER ------------------------------ */

.pc {
	display: block !important;
}

.sp {
    display: none !important;
}

@media screen and (max-width:1001px) {
    .pc {
	display: none !important;
    }

    .sp {
	display: block!important;
    }
}

/* ------------------------------ 追従CTA(BUTTON) ------------------------------ */

.conteiner{
	overflow: hidden;
}

.navibtn {
	display: flex;
	width: 400px;
	max-width: 100%;
	bottom: 11%;
	opacity: 0;
	visibility: hidden;
	transition: 1s;
}

.navibtn.fixed {
	position: fixed;
	right:1%;
	bottom: 1%;
	z-index: +1;
	opacity: 1;
	visibility: visible;
}

.navibtn.fixed.none {
	opacity: 0;
	visibility: hidden;
	transition: 500ms;
	z-index: -1;
}

@media screen and (max-width:1001px){
.conteiner{
	margin:0 auto;
	overflow: hidden;
	width: 100%;
	max-width: 100%;
}	
.navibtn {
	display: flex;
	width: 65%;
	opacity: 0;
	visibility: hidden;
	transition: 1s;
}
	
}

.padi{
	padding:30px;
}


button{
   background-color: transparent;
   border: none;
   cursor: pointer;
   outline: none;
   padding: 0;
   appearance: none;
  }

.button:hover{
	filter: brightness(110%);
	transition: all .3s;
}


h1{
  font-size: 40px;
  text-align: center;
  color: #fff;
  line-height: 150%;
  font-weight: 700;
  letter-spacing: 1px;
  font-feature-settings: 'palt' 1;
}

p{
  font-size: 21px;
  line-height: 180%;
  margin: 0 auto;
  letter-spacing: 1px;
  font-weight: 400;
  color: #1A1A1A;
}

h2{
  font-size: 45px;
  text-align: center;
  line-height: 180%;
  font-weight: 700;
  color: #fff;
}

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

h1{
  font-size: 6vw;
  text-align: center;
  color: #fff;
  line-height: 140%;
  font-weight: 700;
  letter-spacing: 1px;
  font-feature-settings: 'palt' 1;
}

p{
  font-size: 4.3vw;
  line-height: 180%;
  padding: 0 2%;
  letter-spacing: 0px;
  color: #1A1A1A;
}

h2{
  font-size: 6.5vw;
  text-align: center;
  line-height: 180%;
  padding: 0 10px;
  font-weight: 700;
  color: #fff;
}
	
.padi{
	padding:5vw;
}

}


/* 動画 */

video{
	width:375px;
	max-width:100%;
}

.video{
	padding:50px 0!important;
	text-align:center;
}

@media screen and (max-width:1001px){
	
.video{
	padding:10% 0 0!important;
	text-align:center;
}

  #moviearea{
  	width: 100%;
  	margin: 0 auto;
  	padding: 3% 0 0;
  }


}

/* 動画 */


/* CTA */

.cta_area{
	margin:0 auto;
	width:700px;
	max-width:100%;
	position:relative;
	display:block;
}

.header_cta_area{
	margin:0 auto;
	width:700px;
	max-width:100%;
	position:relative;
	display:block;
}

.digest_cta_area{
	margin:-455px auto 0;
	padding: 0px 0 290px;
	width:650px;
	position:relative;
	display:block;
}

.digest_cta_area02{
	margin:-280px auto 0;
	padding: 0px 0 100px;
	width:650px;
	position:relative;
	display:block;
}

#cta_area{
	margin:0 auto;
	width:1020px;
	max-width:100%;
	position:relative;
	display:block;
}
	  
#cta_area{
	margin:5% auto 5%;
}

.cta_button{
	position:relative;
	width:700px;
	max-width:80%;
	margin:0px auto;
	padding:0px 0 20px;
}

 .finger{
   position: absolute;
   width: 80px;
   top: -130px;
   right: -4%;
   z-index: 2;
   max-width: 100%;
 }

 .cta_finger{
   position: absolute;
   width: 80px;
   top: 130px;
   right: 15%;
   z-index: 2;
   max-width: 100%;
 }

 .keyword_finger{
   position: absolute;
   width: 80px;
   top: 110px;
   right:90px;
   z-index: 2;
   max-width: 100%;
 }

 .keyword_finger02{
   position: absolute;
   width: 80px;
   top: 110px;
   right:90px;
   z-index: 2;
   max-width: 100%;
 }

  .movie_finger{
    position: absolute;
    width: 80px;
    top: 150px;
    right: -20px;
    z-index: 2;
  }

 .frame_scroll iframe{
 	width: 600px;
 	margin: 50px auto 0;
 	border: solid #888 1px;
 	padding: 10px;
 	max-width: 100%;
 	box-sizing: border-box;
  background: #fff;
 }

 .font_size_11{
   font-size: 11px;
   line-height: 170%;
 }

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

.cta_area{
	margin:0 auto;
	max-width:90%;
	position:relative;
	display:block;
}	 

.header_cta_area{
	margin:0 auto;
	max-width:90%;
	position:relative;
	display:block;
}	 

  .finger{
    position: absolute;
    width: 17%;
    top: -27vw;
    right: 2%;
    z-index: 2;
  }
	 
  .cta_finger{
    position: absolute;
    width: 17%;
    top: 55%;
    right: 4%;
    z-index: 2;
  }
	 
	 

  .keyword_finger{
    position: absolute;
    width: 18%;
    top: 21%;
    right: 0;
    z-index: 2;
  }

  .keyword_finger02{
    position: absolute;
    width: 18%;
    top: 40%;
    right: 2vw;
    z-index: 2;
  }

  .movie_finger{
    position: absolute;
    width: 18%;
    top: 72%;
    right: 0%;
    z-index: 2;
  }


  .cta_text{
    width: 55%;
    margin: 10% auto 2%;
    max-width: 100%;
  }
	 
.digest_cta_area{
	margin:-71vw auto 0;
	padding: 0 0 47vw;
	width:77vw;
	position:relative;
	display:block;
}

.digest_cta_area02{
	margin:-44vw auto 0;
	padding: 0vw 0 17vw;
	width:80vw;
	position:relative;
	display:block;
}

	 
.cta_button{
	max-width:100%;
	padding:0px 0 2vw;
}

}

/* CTA */



a.hover_btn img{
   transition:all 0.5s ease;
   }
a:hover.hover_btn img{
   opacity: 0.7;
   filter: alpha(opacity=70);
   }

   .header_icon {
   	transform-origin:center top;
   	animation:show 1s both;
   }




/* header */

.header{
  background: url("../img/header/header_bg_pc.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment:scroll;
  padding: 0;
  position:relative;
}


.movie_area_text{
	margin:70px auto 0px;
	width:700px;
}

.header_img{
	margin: 0 auto;
	width: 500px;
}

.movie_glow {
    background-color: rgba(0, 0, 0, 0.6);
    border: 4px solid yellow;
    border-radius: 8px;
    padding: 0% 1%;
    box-shadow: 0 0 10px gold, 0 0 20px gold;
    animation: pulse-glow-red 2s infinite ease-in-out;
}


.movie{
    position: relative;
	margin: -447px auto 220px!important;
	padding : 0!important;
	width: 100%;
	max-width:450px;
	aspect-ratio: 16 / 9;
}

.digest_movie{
    position: relative;
	margin: -750px auto 470px!important;
	padding : 0!important;
	width: 100%;
	max-width:555px;
	aspect-ratio: 16 / 9;
}


.next_movie{
    position: relative;
	margin: -453px auto 108px!important;
	padding : 0!important;
	width: 100%;
	max-width:610px;
	aspect-ratio: 16 / 9;
}

.movie iframe{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
  width: 95% !important;
	height: 95%;
}

.digest_movie iframe{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
  width: 90% !important;
  height: 90% !important;
}

.next_movie iframe{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
  width: 90% !important;
  height: 90% !important;
}

.movie_body{
    position: relative;
	margin: -35px auto 0px!important;
	padding : 0!important;
	width: 100%;
	max-width:770px;
	aspect-ratio: 16 / 9;
}

.movie_body iframe{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
  width: 90% !important;
  height: 82.5% !important;
}




.hover_btn{
  box-shadow:  0 0 30px rgba(0,0,0,0.5);
}

.hover_btn:hover{
  box-shadow:  0 0 20px rgba(0,0,0,0.5);
}

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

.header{
background: url("../img/header/header_bg_sp.png");
background-position: top;
background-size: cover;
background-repeat: no-repeat;
padding: 0;
width:100%;
}
	 
.header_img{
	margin: 0 auto;
	width: 95%;
}

.movie_glow {
	background-color: rgba(0, 0, 0, 0.6);
	border: 4px solid yellow;
	border-radius: 11px;
	padding: 1% 1%;
	box-shadow: 0 0 10px gold, 0 0 20px gold;
	animation: pulse-glow-red 2s infinite 
	ease-in-out;
}
	 
.movie iframe{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
  width: 90% !important;
	height: 90%;
}

	 
.movie_area_text{
	margin:8vw auto 0;
	width:90%;
}
	 
.movie{
	margin: -84vw auto 34vw!important;
	max-width:85%;
	width: 85%;
}
	 
.digest_movie{
	margin: -115.5vw auto 60vw!important;
	width: 83%;
	max-width: 83%;
}
	 
.next_movie{
	margin: -69.5vw auto 16vw!important;
	width: 93%;
	max-width: 93%;
}

.movie_body{
	margin: -15px auto 0px!important;
}


   .hover_btn{
     box-shadow:  0 0 10px rgba(0,0,0,0.5);
   }
	 
   .hover_btn:hover{
     box-shadow:  0 0 5px rgba(0,0,0,0.5);
   }

}

 /* header */


 /* Movie */

 .inner_frame{
   width: 550px;
   margin: 50px auto 50px;
   max-width: 80%;
   background: #fff;
   padding: 50px ;
   position: relative;
 }


 .inner_frame2{
   width: 550px;
   margin: 50px auto 80px;
   max-width: 80%;
   background: #fff;
   padding: 50px;
   position: relative;
 }

 .inner_frame3{
   width: 550px;
   margin: 180px auto 80px;
   max-width: 80%;
   background: #fff;
   padding: 50px;
   position: relative;
	 box-shadow: 0 0 8px gray;
 }

 .inner_frame4{
   width: 800px;
   margin: 50px auto;
   max-width: 80%;
   background: #fff;
   padding: 50px ;
   position: relative;
 }



.inner_frame2 p{
	font-weight: 700;
	padding: 35px 0;
	font-size:25px;
}	

.inner_text{
  padding: 0 0 0 50px;
}



@media screen and (max-width:1001px){
  .movie_section{
    background: url("../img/movie_bg_sp.png");
    background-position: center;
    background-repeat: repeat;
    background-size: contain;
    background-attachment: scroll;
    padding: 0 0 15% 0;
  }

  .inner_frame{
    width: 90%;
    margin: 5vw auto 5vw;
    background: #fff;
    padding: 5% ;
  } 

.inner_frame2{
width: 90%;
margin: 5vw auto 0;
background: #fff;
padding: 7% 5% 0%;
}

.inner_frame3{
width: 90%;
margin: 15vw auto 5vw;
background: #fff;
padding: 7% 5% 5%;
}
	
.inner_frame2 p{
	padding-top:0;
	font-size: 4.4vw;
}
	
  .inner_frame4{
    width: 90%;
    margin: 0vw auto 0vw;
    background: #fff;
    padding: 5% ;
  } 
	

 .inner_text{
   padding: 0 0 0 2%;
 }


}

/* Movie */


/* intro */

.img_01{
  width: 400px;
  margin: 0 auto;
  max-width: 100%;
  padding: 50px 0 0;
}

.img_02{
  width: 700px;
  margin: 0 auto;
  max-width: 100%;
  padding: 100px 0 50px;
}


.img_06{
  width: 500px;
  margin: 0 auto;
  max-width: 100%;
  padding: 50px 0;
}

.img_08{
  width: 700px;
  margin: 0 auto;
  max-width: 100%;
  padding: 50px 0;
}

.img_10{
  width: 700px;
  margin: 0 auto;
  max-width: 100%;
  padding: 50px 0;
}

.img_11{
  width: 700px;
  margin: 0 auto;
  max-width: 100%;
  padding: 0px 0 50px;
}

.img_14{
  width: 700px;
  margin: 0 auto;
  max-width: 100%;
  padding: 50px 0 50px;
}

.youtube{
  width: 700px;
  margin: 0 auto;
  max-width: 100%;
  padding: 50px 0 50px;
}

.thumbnail{
  width: 700px;
  margin: 0 auto;
  max-width: 100%;
  padding: 0px 0 50px;
}


.before{
	width:650px;
	margin:0 auto;
	max-width:100%;
	padding-bottom:30px;
}

.which{
	width:700px;
	margin:0 auto;
	max-width:100%;
	padding-bottom:50px;
}

.after_title{
	width:800px;
	margin:0 auto;
	max-width:100%;
	padding-bottom:50px;
}

.after_last{
	width:750px;
	margin:0 auto;
	max-width:100%;
	padding-bottom:50px;
}

.mockup{
  width: 500px;
  margin: 0 auto;
  max-width: 100%;
  padding: 270px 0 0;
}


.hover{
  transition:0.5s;
}

.hover:hover{
	opacity:0.8;
	
}


@media screen and (max-width:1001px){
	
.img_01{
  width: 85%;
  margin: 0 auto;
  max-width: 100%;
  padding: 8% 0 0;
}

.img_02{
  width: 95%;
  max-width: 100%;
  padding: 5% 0 7% 0;
  margin: 30px auto 10px;

}
	
.img_08{
  width: 85%;
  margin: 0 auto;
  max-width: 100%;
  padding: 8% 0;
}
	
.img_10{
  width: 100%;
  margin: 0 auto;
  max-width: 100%;
  padding: 8% 0;
}
	
.img_11{
  width: 100%;
  margin: 0 auto;
  max-width: 100%;
  padding: 0% 0 8%;
}
	
.img_14{
  width: 100%;
  margin: 0 auto;
  max-width: 100%;
  padding: 8% 0 8%;
}
	
.youtube{
  width: 90%;
  margin: 0 auto;
  max-width: 100%;
  padding: 8% 0 8%;
}
	
.thumbnail{
  width: 90%;
  margin: 0 auto;
  max-width: 100%;
  padding: 0% 0 8%;
}
	
.mockup{
  width: 75%;
  margin: 0 auto;
  max-width: 100%;
  padding: 35% 5% 7% 0%;
}
	
.before{
	max-width:85%;
	margin:0 auto;
	padding-bottom:5vw;
}
	
.which{
	max-width:85%;
	margin:0 auto;
	padding:5vw 0;
}
	
.after_title{
	max-width:90%;
	margin:0 auto;
	padding:10vw 0 8vw;
}

.after_last{
	max-width:90%;
	margin:0 auto;
	padding:3vw 0 8vw;
}

	
}




/* intro */



/* section_01 */

.section_01{
	background:url("../img/bg/section01_bg.png");
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	padding: 0;
}


.section01_header{
	background: linear-gradient(-120deg,#ff8400 0%, #ff4000 100%);
	max-width:100%;
	margin:0 auto;
}

.section01_header_img{
	margin: 0 auto;
	width: 650px;
	padding: 10px 0 20px;
}

.digest_box{
	background: rgba(255,206,0,0.5);
	margin: 0 auto;
	padding: 0 0 1px;
	width: 650px;
}

.digest_img{
	margin: 0 auto;
	width: 590px;
	padding-bottom: 15px;
}

.digest_cta_img{
	margin: 0 auto;
	width: 650px;
	padding-bottom: 15px;
}

.arrow{
	width: 50px;
	margin: 0 auto;
	padding: 0 0 10px;
}

.keyword_img{
	margin: -30px auto 0;
	width: 650px;
	padding-bottom: 15px;
}

.red_header{
    background:url("../img/red_header_pc.png");
	  background-position: center;
	  background-repeat: no-repeat;
	  background-size: cover;
	  padding:80px 0 100px;
	  position: relative;
}

.blue_header{
    background:url("../img/blue_header_pc.png");
	  background-position: center;
	  background-repeat: no-repeat;
	  background-size: cover;
	  padding:90px 0 100px;
	  position: relative;
}


.yellow_header{
    background:url("../img/yellow_header_pc.png");
	  background-position: center;
	  background-repeat: no-repeat;
	  background-size: cover;
	  padding:60px 0 70px;
	  position: relative;
}

.black_header{
    background:#282828;
	  background-position: center;
	  background-repeat: no-repeat;
	  background-size: cover;
	  padding:30px 0 40px;
	  position: relative;
}

.orange_header{
    background:url("../img/orange_header.png");
	  background-position: center;
	  background-repeat: no-repeat;
	  background-size: cover;
	  padding:50px 0 ;
	  position: relative;
}

.balloon{
  position: relative;
}
.balloon:after{
  content: "";
  position: absolute;
  right: 0;
  bottom: -20px;
  left: 0;
  width: 0px;
  height: 0px;
  margin: auto;
  border-style: solid;
  border-color: #0067d0 transparent transparent transparent;
  border-width: 20px 20px 0 20px;
}


.contents_subtitle{
    background:radial-gradient(#007DB5,#0B4889);
	  padding:50px 0 ;
	  position: relative;
}

.red_header_text{
margin:0 auto;
width:550px;
height:auto;
}

.blue_header_text{
	margin:0 auto;
}

.black_header_text{
width:550px;
height:auto;
margin:0 auto;
}


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

.section_01{
	background:url("../img/bg/section01_bg_sp.png");
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: scroll;
	padding: 0 ;
}

	.digest_box{
		margin: 0 auto;
		padding: 0 0 8vw;
		width: 100%;
	}
	
	
.digest_img{
	margin: 0 auto;
	width: 90%;
	padding-bottom: 15px;
}
	
.digest_cta_img{
	margin: 0 auto;
	width: 100%;
	padding-bottom: 15px;
}

.arrow{
	width: 15vw;
	margin: 0 auto;
	padding: 0 0 3vw;
}

	
.keyword_img{
	margin: -6vw auto 0;
	width: 100%;
	padding-bottom: 15px;
}


.red_header_text{
margin:0 auto;
width:90%;
height:auto;
}

.black_header_text{
width:90%;
height:auto;
margin:0 auto;
}


  .contents_01{
	  
    background:url("../img/contents_01bg_sp.png");
  	background-position: top;
    background-size: cover;
	background-repeat: no-repeat;
    background-attachment: scroll;
    padding: 0 0 9% 0;
  }
	
.contents01_header{
	padding:1%;
	width:100%;
}
	
  .contents_subtitle{
    padding: 5% 5%;
  }
  .contents_subtitle img{
	max-width:100%;
  }
	
  .red_header{
    background:url("../img/red_header_sp.png");
	  background-position: center;
	  background-repeat: no-repeat;
	  background-size: cover;
    padding: 9% 5%;
  }
	
  .blue_header{
    background:url("../img/blue_header_sp.png");
	  background-position: center;
	  background-repeat: no-repeat;
	  background-size: cover;
    padding: 9% 5%;
  }
	
  .yellow_header{
    background:url("../img/yellow_header_sp.png");
	  background-position: center;
	  background-repeat: no-repeat;
	  background-size: cover;
    padding: 9% 5%;
  }
		
  .black_header{
    background:#232323;
	  background-position: center;
	  background-repeat: no-repeat;
	  background-size: cover;
    padding: 5vw 0;
  }
		
  .orange_header{
    background:url("../img/orange_header_sp.png");
	  background-position: center;
	  background-repeat: no-repeat;
	  background-size: cover;
    padding: 5% 5%;
  }
  #red_header img{
	max-width:100%;
  }
  #movie_header img{
	max-width:100%;
  }
  .red_header img{
	max-width:90%;
  }
  .blue_header img{
	max-width:55%;
  }
	
  .yellow_header img{
	max-width:90%;
  }
	
	
}



/* section_01 */

/* section_02 */

.contents02_header{
	padding:5px 0;
	width:1000px;
	margin:0 auto;
}

.contents_02{
	background:url("../img/contents_02_bg.png");
	  background-position: top;
	  background-repeat: no-repeat;
	  background-size: cover;
	  background-attachment: fixed;
	padding-bottom:35px;
}

  .contents_02_title{
    background:#ffd607;
	  background-position: center;
	  background-repeat: no-repeat;
	  background-size: cover;
	  padding:10px 0px 20px;
	  position: relative;
  }


.contents_02_title h1{
	font-size:40px;
	margin:0 auto;
	text-shadow: #000 1px 0 8px;
}

.benefit_titles{
	position:absolute;
	width:1200px;
	top:-100px;
	left:0px;
}

.benefit_step{
	width:550px;
	margin: 0 auto 30px;
}

.benefit_steps{
	margin:0 auto;
}

.benefit_contents{
	padding:30px 0px;
width:40%;
height:auto;

}

  @media screen and (max-width:1001px){
	  
.contents_02{
	background:url("../img/contents_02_bg_sp.png");
	  background-position: top;
	  background-repeat: no-repeat;
	  background-size: cover;
	  background-attachment: scroll;
	  padding-bottom:5vw;

}
	  
	  .contents02_header{
		padding:2vw 0 1vw;
		width:97%;
	}  
	  
.benefit_titles{
	top:-8vw;
}
	  
.benefit_step{
	width:90%;
	margin:10vw auto 0vw;
}
	  
.benefit_contents{
	width:90%;
	padding:5vw;
}
	  
.benefit_arrow{
	width:20vw;
}
	  	  
.vertical_line{
	left:-55px;
/*	width:5px;*/
	height:280%;
}



  }


/* contents_02*/


/* contents_03 */

.contents_03{
      background-position: center;
      background-repeat: repeat;
      background-size: cover;
      background-attachment: fixed;
	padding:50px 0 50px;
	position:relative;
	
}

.contents03_header_box{
	position:absolute;
	margin:0 auto;
	width:100%;
	top:-100px;
}

.contents03_header{
	position:relative;
	width:100%;

}

.kato_name{
	text-align: left;
	margin:10px 260px 50px 0;
}

.kato_name h2{
	color: black;
	line-height: 150%;
	font-weight: 700;
}

.katoukouji{
	position:absolute;
	width:280px;
	top:-60px;
	right:0px;
}



  @media screen and (max-width:1001px){
.contents_03_bg{
	padding:3% 0;
}  
	  
.contents03_header_box{
  top:-17vw;
}
	  
.kato_name{
	margin:9vw 27vw 15vw 0;
}
	  
.kato_name h2{
	font-size:6vw;
}
	  
.katoukouji{
	position:absolute;
	width:35vw;
	top:-9vw;
	right:-4vw;
}
	  
}

/* contents_03 */



/* contents_04 */

.contents04_header{
	padding:20px 0;
	width:800px;
	margin:0 auto;
}

.contents_04{
	background:url("../img/contents_04_bg.png");
	  background-position: top;
	  background-repeat: no-repeat;
	  background-size: cover;
	  background-attachment: fixed;
	padding-bottom:20px;
}

  .contents_04_title{
    background:#04367f;
	  background-position: center;
	  background-repeat: no-repeat;
	  background-size: cover;
	  padding:10px 0px 20px;
	  position: relative;
  }


.contents_04_title h1{
	font-size:40px;
	margin:0 auto;
	text-shadow: #000 1px 0 8px;
}

@media screen and (max-width:1001px){
	  
.contents_04{
	background:url("../img/contents_04_bg.png");
	background-position: top;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: scroll;
	padding-bottom:5vw;
}
	  
.contents04_header{
	padding:2vw 0 1vw;
	width:90%;
}  
}


/* contents_04 */



/* contents_05 */

.contents_05{
	background:url("../img/bg/contents_05_bg_pc2.png");
	background-position: top;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: scroll;
}


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

.contents_05{
	background:url("../img/bg/contents_05_bg.png");
	background-position: top;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: scroll;
}
}

/* contents_05 */

/* contents_05a */

.contents_05a{
	background:url("../img/bg/contents05a_bg_pc.png");
	background-position: top;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: scroll;
	padding: 0 0 1px;
}

.contents05a_header{
	padding: 0;
	width:1000px;
	margin:0 auto;
}

.voice_img{
	margin: 0 auto;
	padding: 0 0 15px;
}


.contents_05a_title{
	background:#ffd607;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	padding: 0px;
	position: relative;
	border-top: 15px solid #ffaa00;
    border-bottom: 15px solid #ffaa00;
}

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

.contents_05a{
	background:url("../img/bg/contents_5a_bg_sp.png");
	background-position: top;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: scroll;
}
	
.contents05a_header{
	padding: 0 ;
	width:100%;
}  
	
.contents_05a_title{
	border-top: 3vw solid #ffaa00;
    border-bottom: 3vw solid #ffaa00;
}
	
.voice_img{
	margin: 0 auto;
	padding: 0 0 3vw;
}
	
}

/* contents_05a */

/* contents_05b */

.contents_05b{
	background:url("../img/bg/contents05b_bg_pc.png");
	background-position: top;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: scroll;
	padding: 0 0 1px;
}

.contents05b_header{
	padding:30px 0;
	width:800px;
	margin:0 auto;
}

.contents_05b_title{
	background: #ff5b00;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	padding: 0px;
	position: relative;
}

.feature_img{
	margin: 0 auto;
	width: 100%;
	padding:  80px 0 30px;
}

.feature_titles{
	position:absolute;
	width:1200px;
	top:-100px;
	left:0px;
}
@media screen and (max-width:1001px){

.contents_05b{
	background:url("../img/bg/contents_5b_bg_sp.png");
	background-position: top;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: scroll;
}
	
.contents05b_header{
	padding:4vw 0 ;
	width:100%;
}  
	
.contents_05b_title{
}	
	
.feature_titles{
	top:-10vw;
}
	
.feature_img{
	margin: 0 auto;
	width: 100%;
	padding:  16vw 0 5vw;
}
	
	
}

/* contents_05b */

/* contents_plus */

.contents_plus{
	background:url("../img/bg/contents05a_bg_pc.png");
	background-position: top;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: scroll;
	padding: 0 0 1px;
}

.contentsplus_header{
	padding:0px 0;
	width:800px;
	margin:0 auto;
}

.contents_plus_title{
	background: #c1272d;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	padding: 0px;
	position: relative;
}

.feature_img{
	margin: 0 auto;
	width: 100%;
	padding:  80px 0 30px;
}

.feature_titles{
	position:absolute;
	width:1200px;
	top:-100px;
	left:0px;
}
@media screen and (max-width:1001px){

.contents_plus{
	background:url("../img/bg/contents_5a_bg_sp.png");
	background-position: top;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: scroll;
}
	
.contentsplus_header{
	padding:4vw 0 ;
	width:100%;
}  
	
.contents_plus_title{
}	
	
.feature_titles{
	top:-10vw;
}
	
.feature_img{
	margin: 0 auto;
	width: 100%;
	padding:  16vw 0 5vw;
}
	
	
}

/* contents_plus */

/* contents_06 */

.contents_06{
	background:url("../img/bg/contents06_bg.png");
	  background-position: top;
	  background-repeat: no-repeat;
	  background-size: cover;
	  background-attachment: scroll;
	padding-bottom:0px;
}


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

.contents_06{
	background:url("../img/bg/contents06_bg_sp.png");
	background-position: top;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: scroll;
	padding-bottom:0vw;
}
}


/* contents_06 */


/* contents_07 */

.contents_07{
	background:url("../img/contents_07_bg.png");
	  background-position: top;
	  background-repeat: no-repeat;
	  background-size: cover;
	  background-attachment: scroll;
	padding-bottom:0px;
}

.sentence01{
	margin:0 auto;
	padding:100px 0 50px;
}

.sentence02{
	margin:0 auto;
	padding-bottom:30px;
}

.sentence03{
	margin:0 auto;
	padding:50px 0;
}

.contents_07_text{
	width:700px;
	margin:0 auto;
	color:#fff;
	text-shadow:
		0 1px #999,
		1px 1px #111,
		0px 1px #bbb,
		2px 0px #666,
		-1px 0px #bbb,
		3px 4px 3px #000000;
	font-size:28px;
	font-weight: 600;
	padding:3vw;
}

.contents_07_text_center{
	text-align:center;
	width:600px;
	margin:0 auto;
	color:#fff;
	text-shadow:
		0 1px #999,
		1px 1px #111,
		0px 1px #bbb,
		2px 0px #666,
		-1px 0px #bbb,
		3px 4px 3px #000000;
	font-size:28px;
	font-weight: 600;
}


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

.sentence01{
	width:95%;
	padding:15vw 0;
}

.sentence02{
	width:95%;
	padding-bottom:2vw;
}
	
.sentence03{
	width:95%;
	padding:8vw 0;
}
	
.contents_07_text{
	width:95%;
	padding-left:6vw;
	font-size:4.5vw;
}

.contents_07_text_center{
	width:90%;
	font-size:5.2vw;
}

}

/* contents_07 */


/* contents_09 */

.contents_09{
	  background-position: top;
	  background-repeat: no-repeat;
	  background-size: cover;
	  background-attachment: fixed;
	padding:50px 0;
}


.contents_09_text_center{
	text-align:center;
	width:600px;
	margin:0 auto;
	color:#000;
	font-size:28px;
	font-weight: 600;
}

.contents_09_text{
	width:700px;
	margin:0 auto;
	color:#000;
	font-size:28px;
	font-weight: 600;
}

.contents09_subtitle{
	width:500px;
	margin:0 auto;
	padding: 60px 0 30px;
}

@media screen and (max-width:1001px){
.contents_09{
	padding:6vw 0;
}
	
.contents_09_text_center{
	width:90%;
	font-size:5.2vw;
}
	
.contents_09_text{
	width:95%;
	font-size:4.5vw;
}

.contents09_subtitle{
	margin:0 auto;
	padding: 10vw 0 5vw;
}

	
}
/* contents_09 */

/* contents_12 */
.contents12_header{
	margin: 0 auto;
	width: 650px;
}

  .contents_12_title{
    background:#a00505;
	  background-position: center;
	  background-repeat: no-repeat;
	  background-size: cover;
	  padding:10px 0px 20px;
	  position: relative;
  }


.contents_12_title h1{
	font-size:40px;
	margin:0 auto;
	text-shadow: #000 1px 0 8px;
}


/* contents_12 */


.frame_scroll{
width: 65%;
margin: 0 auto;
max-width: 100%;
	position:absolute;
	top:210px;
	left:18%;
	
}

.frame_scroll iframe{
width: 600px;
margin: 0 auto;
border: solid #888 1px;
padding: 10px;
max-width: 100%;
box-sizing: border-box;
}


  @media screen and (max-width:1001px){
	  
.contents03_header{
	padding:0%;
	width:100%;
}

	  
.frame_scroll{
	width: 90%;
	margin: 0 auto;
	max-width: 95%;
	position:absolute;
	top:64%;
	left:5%;
}

.frame_scroll iframe{
	width: 600px;
	margin: 0 auto;
	border: solid #888 0.5vw;
	padding: 3%;
	max-width: 100%;
	box-sizing: border-box;
	height: 80px;
}

  }





.terasawa{
	position:absolute;
	width:300px;
	max-width:45%;
	margin:0 auto;
	right:0;
}


/* ------------------------------ qa ------------------------------ */



.section_10 {
	padding:100px 0 120px;
	background-color: #EEEEEE;
	background-position: top;
    background-repeat: no-repeat;
	background-size: cover;
    background-attachment: fixed;
}

.section_10 h2{
	padding-bottom:20px;
	font-size:50px;
	color:#232323;
}

.qa-list{
	width:800px;
	max-width:90%;
}


.qa-list p{
	font-size:18px;
}


.qa-list dl {
    position: relative;
    margin: 30px 0 0;
    cursor: pointer;
}
.qa-list dl:first-child {
  margin-top: 0;
}
.qa-list dl::after {
    position: absolute;
    top: 27px;
    right: 26px;
    display: block;
    width: 7px;
    height: 7px;
    margin: auto;
    content: '';
    transform: rotate(135deg);
    border-top: 2px solid #000;
    border-right: 2px solid #000;
}
.qa-list .open::after {
    transform: rotate(-45deg);
}
.qa-list dl dt {
    position: relative;
    margin: 0;
    padding: 20px 20px 20px 60px;
    font-weight: bold;
    background: #FFF;
	border-radius:10px;
	line-height: 1.8;

}
.qa-list dl dt::before {
    line-height: 1;
    position: absolute;
    top: 20px;
    left: 20px;
    display: block;
    content: 'Q.';
    font-weight: bold;
    color: #3285bf;
}
.qa-list dl dd::before {
    line-height: 1;
    position: absolute;
    left: 20px;
    display: block;
    content: 'A.';
    font-weight: bold;
    color: #E00003;
}
.qa-list dl dd {
    position: relative;
    margin: 5px 0 0;
    padding: 20px 20px 20px 60px;
    background: #fff5f6;
	border-radius: 10px;
}
.qa-list dl dd p {
    margin: 30px 0 0;
	font-size:16px;
}
.qa-list dl dd p:first-child{
    margin-top: 0;
}

.content div{
	margin: 0 auto 0;
	padding:20px 0;
	width: 1000px;
	text-align: left;
	justify-content: center;
	align-items: center;
}


@media screen and (max-width: 767px) {
	
.section_10 {
	padding:5% 0 20%;
}

	
	
 .qa-list dl {
    margin: 15px 0 0;
}
.qa-list dl:after {
    top: 20px;
    right: 20px;
    width: 7px;
    height: 7px;
}
.qa-list dl dt {
    padding: 16px 16px 16px 50px;
	line-height: 1.6;
	font-size:17px;
}
.qa-list dl dt::before {
    top: 20px;
    left: 20px;
}
.qa-list dl dd::before {
    left: 20px;
    margin-top: 5px;
}
.qa-list dl dd {
    margin: 5px 0 0;
    padding: 16px 16px 16px 50px;
}
.qa-list dl dd p {
    margin: 30px 0 0;
}
.qa-list dl dd p:first-child{
    margin-top: 0;
}
	
.content div{
	width: 750px;
    max-width: 90%;
	padding: 0 0 0 0;
	text-align: left;
	justify-content: center;
	align-items: center;
}
}
/* contents_10 */

/* contents_11 */
.contents_11{
    background: #700000;
    background-position:top;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: scroll;
}

.preview_box{
	margin: 0 auto;
	padding: 0 0 1px;
	width: 650px;
}

.contents_box{
	width:1000px;
}


a{text-decoration: none;}
img{
	max-width:100%;
	display: block;
	margin: 0;
	padding:0;
	vertical-align: bottom;
}

.container{
	width: 100%;
	max-width: 100%;
	position: relative;
	overflow: hidden;
}

@media screen and (max-width: 1001px) {
	
.contents_11{
    background: url("../img/contents_11_bg_sp.png");
    background-position:center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: scroll;
}
	
	.contents_box{
	width:90%;
}
	
.preview_box{
	margin: 0 auto;
	width: 100%;
}
	
	
}



/*footer*/

footer a,
footer p{
	color:#fff;
	font-size:12px;
}

.footer_contents{
	padding:20px;
}

footer{
	background-color:#000;
	text-align:center;
}

.notice{
	font-size: 10px;
}

.table_area h2{
  color: #000;
  font-size: 30px;
  text-align: center;
}

.mark_img{
  width: 600px;
  margin: 0 auto;
  max-width: 100%;
  display: flex;
  align-self: flex-start;
}


.table_area{
  width: 700px;
  margin: 0 auto;
  max-width: 100%;
}

.google_partner{
  width: 200px;
  height: 45px;
  max-width: 100%;
  margin-top: 40px;
  margin-left: 40px;
}

.border_line{
  border-bottom: solid #99C7CE 1px;
  padding: 5% 0;
}

.header_logo{
  width: 30%;
  padding: 2%;
}




footer .copyright{
	font-size: 14px;
	text-align: center;
	color: #fff;
  line-height: 150%;
  width: 100%;
  background-color: #000;
  padding: 10px 0;
  font-weight: 300;
}

.copyright a{
  color: #fff;
  text-decoration: underline;;
}

.copyright a:hover{
  color: #2682BC;
}

.framescrolltxt p {
  line-height: 100%;
	font-size:4vw;
}
/* 特商法に基づく表記 */

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

  .form_font_red{
    background-color: #AF0223;
    color: #fff;
    padding: 0 4px 1px 3px;
    border-radius: 5px;
    margin-left: 10px;
    font-size: 3.5vw;
  }

  .table_area h2{
    color: #000;
    font-size: 6vw;
    text-align: center;
  }

  .table_area{
    width: 90%;
    margin: 0 auto;
    padding-bottom: 3%;
  }

  .google_partner{
    width: 90%;
    height: 70%;
    max-width: 100%;
    margin-top: 7%;
    margin-left: 0;
    margin-bottom: 5%;
  }

  .border_line{
    border-bottom: solid #99C7CE 1px;
    padding: 5% 0;
  }

  .mark_img{
    width: 90%;
    margin: 0 auto;
    flex-wrap: wrap;
  }


  .framescrolltxt p {
    line-height: 150%;
  }
	
.notice{
	font-size: 2vw;
}


  /* 特商法に基づく表記 */

}

/*
@media screen and (min-width:768px){

.thankyou{
  background-color: rgba(255,0,0,0.4);
  margin-top: 30px;
  padding: 30px;
  text-align:center ;
}

.grecaptcha-badge {
  visibility: hidden;
}
*/



/*文字装飾*/

.background_r{
	border:2px dashed #FFFF00;
	padding:0 10px;
}


.font_size_30{
	font-size: 30px;
}

.font_size_40{
	font-size: 40px;
}


.font_size_50{
	font-size: 50px;
}


.font_size_60{
	font-size: 60px;
}

.font_size_90{
	font-size: 90px;
}


.font_size_9sp{
	font-size: 9vw;
}

.font_size_15sp{
	font-size: 15vw;
}

.font_size_7sp{
	font-size: 7vw;
}


.font_size_7sp{
	font-size: 7vw;
}


.font_size_8sp{
	font-size: 8vw;
}

.font_size_5sp{
	font-size: 5vw;
	line-height: 150%;

}

.font_size_4sp{
	font-size: 4vw;
	line-height: 150%;
}


.font_size_6sp{
	font-size: 6vw;
}


.font_size_27{
	font-size: 27px;
}

.font_size_25{
	font-size: 25px;
}

.font_size_21{
	font-size: 21px;
}


.font_size_30{
	font-size: 30px;
}

.font_size_18{
	font-size: 18px;
}


.font_size_15{
	font-size: 15px;
	line-height: 170%;
}

.font_w{
	font-weight: 700;
}

.font_w_900{
	font-weight: 900;
}


.italic{
  font-style: italic;
}

.border_b{
	text-decoration: underline;
}

.border_r{
	text-decoration: underline #F02D06;
}

.border_pink{
	text-decoration: underline #DD6D8D;
}

.border_w{
	text-decoration: underline #fff;
}

.border_ol{
	text-decoration: underline #f97417;
}

.border_bl{
	text-decoration: underline #2682BC;
}

.border_gr{
	text-decoration: underline #008E45;
}

.border_rbl{
	text-decoration: underline;
	color: #095593;
}

.border_y{
	text-decoration: underline #FFFF00;
}

.border_line_orange{
  border-bottom: solid #F75D08 5px;
}


.font_ol{
  color: #E27600;
}

.font_red{
	color: #ED1C24;
}

.font_y{
	color: #FFFF00;
}

.font_bl{
	color: #0D0DD3;
}

.font_rbl{
	color: #095593;
}


.font_wh{
	color: #fff;
}

.font_bk{
	color: #1A1A1A;
}


.font_red02{
	color: #E72D32;
}

.font_gr{
	color: #3AAC36;
}

.font_bk{
	color: #ED2087;
}


.text_marker{
	background: #FFFF00;
	text-shadow: none;
	color:#000;
	font-weight: 800;
}


.text_marker_b{
	background: #095593;
	text-shadow: none;
}

.text_marker_r{
	background: #F02D06;
	text-shadow: none;
}

.text_marker_bk{
	background: #000;
	padding:10px 20px 10px 28px;
}

.border_line_pink{
  background: linear-gradient(transparent 50%, #FFE9E9 50%);
}

.border_line_blue{
  background: #3286A8;
  padding: 0 0 1% 2%;
  color: #fff;
}

.border_line_yellow{
  background: linear-gradient(transparent 70%, #FFFF00 50%);
}
	
	
	.bold{
		font-weight:700;
	}

@media screen and (max-width:1001px){
	
	.font_size_27{
	font-size: 4.8vw;
}
	
	.font_size_30{
		font-size:4.6vw;
	}
	
	.text_marker_bk{
	background: #000;
	padding:5px 10px 5px 15px;
}

}


/********************************************
* Now Loading
********************************************/
#overlay{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height:100%;
  display: none;
  background: rgba(0,0,0,0.6);
}
.cv-spinner {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.spinner {
  width: 80px;
  height: 80px;
  border: 4px #ddd solid;
  border-top: 4px #999 solid;
  border-radius: 50%;
  animation: sp-anime 0.8s infinite linear;
}

@keyframes sp-anime {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(359deg); }
}




/*グラデーション*/


/* 拡大・縮小 */

.keyform5{
	animation-name: anim_sc;
	transform: scale(0.95,0.95);
}
@keyforms anim_sc {
	100% {
		transform: scale(1,1);
	}
}

.animation{
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-duration: 0.7s;
}



/*点滅*/

.flash{
	animation: flash 1.5s linear infinite;
}

@keyforms flash {
	0%,100% {
		opacity: 1;
	}

	50% {
		opacity: 0;
	}
}




/* fuwafuwaっていうアニメーションはこんなふうだよ！ */
.fuwafuwa {
	-webkit-animation-name: fuwafuwa; /* fuwafuwaっていうアニメーションをしてね！ */
	-webkit-animation-duration: 1.8s;
	-webkit-animation-iteration-count: infinite;
	/*-webkit-animation-direction:alternate;*/
	-webkit-animation-timing-function: ease;
	-moz-animation-name: fuwafuwa;
	-moz-animation-duration: 1.5s;
	-moz-animation-iteration-count: infinite;
	/*-moz-animation-direction:alternate;*/
	-moz-animation-timing-function: ease;
}
@-webkit-keyframes fuwafuwa {
	0% {-webkit-transform:translate(0, 0);}
	50% {-webkit-transform:translate(0, -15px);}
	100% {-webkit-transform:translate(0, 0);}
}
@-moz-keyframes fuwafuwa {
	0% {-moz-transform:translate(0, 0);}
	50% {-moz-transform:translate(0, -15px);}
	100% {-moz-transform:translate(0, 0);}
}

.bound {
	animation: bound 3s infinite;
}
@keyframes bound {
	0% { transform:translateY(0) }
	5% { transform:translateY(0) }
	10% { transform:translateY(0) }
	20% { transform:translateY(-10px) }
	25% { transform:translateY(0) }
	30% { transform:translateY(-10px) }
	50% { transform:translateY(0) }
	100% { transform:translateY(0) }
}




/* フェードインアニメーション */

.fadein{opacity : 0;transform : translate(0, 30px);transition : all 700ms;}
.fadein_right {opacity: 0; transform: translate(100px,0); transition: all 1000ms;}
.fadein_left {opacity: 0;	transform: translate(-100px,0); transition: all 1000ms;}
.fadein.scrollin,.fadein_right.scrollin,.fadein_left.scrollin{opacity : 1;transform : translate(0, 0);}



/*フェードインさせる */

.fadeIn {
	animation: fadeIn 2s ease 0s 1 normal;
	-webkit-animation: fadeIn 2s ease 0s 1 normal;
}

@keyframes fadeIn {
	0% {opacity: 0}
	100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
	0% {opacity: 0}
	100% {opacity: 1}
}
/* 拡大・縮小 */

.keyframe5{
	animation-name: anim_sc;
	transform: scale(0.95,0.95);
}
@keyframes anim_sc {
	100% {
		transform: scale(1,1);
	}
}

.animation {
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-duration: 1s;
}

   .shake {
       animation: shake 3s infinite;
   }
   @keyframes shake {
       0% {
           transform: translate(0px, 2px);
       }
       5% {
           transform: translate(0px, -2px);
       }
       10% {
           transform: translate(0px, 2px);
       }
       15% {
           transform: translate(0px, -2px);
       }
       20% {
           transform: translate(0px, 2px);
       }
       25% {
           transform: translate(0px, -2px);
       }
       30% {
           transform: translate(0px, 0px);
       }
   }

   .reflection{
   display:inline-block;
   position:relative;
   overflow:hidden;
   z-index: 1;
   border-radius: 22px;
   }
.reflection2{
   display:inline-block;
   overflow:hidden;
   z-index: 1;
   border-radius: 42px;
   }

   .reflection:after {
   content:"";
   height:100%;
   width:30px;
   position:absolute;
   top:-180px;
   left:0;
   background-color: #fff;
   opacity:0;
   -webkit-transform: rotate(45deg);
   -webkit-animation: reflection 2s ease-in-out infinite;
   }

.reflection2:after {
   content:"";
   height:100%;
   width:30px;
   position:absolute;
   top:-180px;
   left:0;
   background-color: #fff;
   opacity:0;
   -webkit-transform: rotate(45deg);
   -webkit-animation: reflection 2s ease-in-out infinite;
   }


@media screen and (max-width:1001px){
	
.reflection{
   border-radius: 15px;
   }
.reflection2{
   border-radius: 20px;
   }
	
}

   @keyframes reflection {
   0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
   80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
   81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
   100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
   }

@keyframes reflection2 {
   0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
   80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
   81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
   100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
   }


   .puyon {
     animation: puyon 1.5s linear 0s 1 ;
     animation-iteration-count:infinite;
   }
   @keyframes puyon {
     0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
     40%  { transform: scale(0.95, 1.2) translate(0%, -10%); }
     50%  { transform: scale(1.1, 0.9) translate(0%, 5%); }
     60%  { transform: scale(0.95, 1.05) translate(0%, -3%); }
     70%  { transform: scale(1.05, 0.95) translate(0%, 3%); }
     80%  { transform: scale(1.0, 1.0) translate(0%, 0%); }
     100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
   }

   .btn_animation {
   	display: block;
   	cursor: pointer;
   	border-radius: 100px;
   	-webkit-animation: btnwrapanime 11s infinite;
   	animation: btnwrapanime 1.5s infinite;
   	-webkit-box-shadow: 0 0 0 0 rgba(0, 188, 0, 1);
   	box-shadow: 0 0 0 0 rgba(0, 188, 0, 1); }
@media screen and (max-width:1001px){
   .btn_animation {
   	display: block;
   	cursor: pointer;
   	border-radius: 15vw;
   	-webkit-animation: btnwrapanime 11s infinite;
   	animation: btnwrapanime 1.5s infinite;
   	-webkit-box-shadow: 0 0 0 0 rgba(0, 188, 0, 1);
   	box-shadow: 0 0 0 0 rgba(0, 188, 0, 1); }
}
   @-webkit-keyframes btnwrapanime {
   	70% {
   		-webkit-box-shadow: 0 0 0 50px rgba(233, 30, 99, 0);
   		box-shadow: 0 0 0 50px rgba(233, 30, 99, 0); }
   	100% {
   		-webkit-box-shadow: 0 0 0 0 rgba(233, 30, 99, 0);
   		box-shadow: 0 0 0 0 rgba(233, 30, 99, 0); } }
   @keyframes btnwrapanime {
   	70% {
   		-webkit-box-shadow: 0 0 0 50px rgba(233, 30, 99, 0);
   		box-shadow: 0 0 0 50px rgba(233, 30, 99, 0); }
   	100% {
   		-webkit-box-shadow: 0 0 0 0 rgba(233, 30, 99, 0);
   		box-shadow: 0 0 0 0 rgba(233, 30, 99, 0); } }
   	@media (max-width: 750px) {
   		@-webkit-keyframes btnwrapanime {
   			70% {
   				-webkit-box-shadow: 0 0 0 25px rgba(233, 30, 99, 0);
   				box-shadow: 0 0 0 25px rgba(233, 30, 99, 0); }
   			100% {
   				-webkit-box-shadow: 0 0 0 0 rgba(233, 30, 99, 0);
   				box-shadow: 0 0 0 0 rgba(233, 30, 99, 0); } }
   		@keyframes btnwrapanime {
   			70% {
   				-webkit-box-shadow: 0 0 0 25px rgba(233, 30, 99, 0);
   				box-shadow: 0 0 0 25px rgba(233, 30, 99, 0); }
   			100% {
   				-webkit-box-shadow: 0 0 0 0 rgba(233, 30, 99, 0);
   				box-shadow: 0 0 0 0 rgba(233, 30, 99, 0); } } }