@charset "UTF-8";
/* CSS Document */
/*-------------------------------------------------------------------------------------
PC用レイアウト（768px以上スクリーン）
----------------------------------------------------------------------------------------*/
/*--------------------------------------------------
共通設定(PC)
-----------------------------------------------------*/
/*body全体の初期スタイル調整*/
body {
  font-size: 62.5%; /*emの計算をしやすくするための定番設定*/
font-family: "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "游明朝", "Yu Mincho", "MS PMincho", "MS 明朝", "serif";
  font-weight: Extra Light;
  color: #000;
}
/*リンク文字の設定*/
a {
  text-decoration: underline;
}
a:link, a:visited {
  color: #39f;
}
a:hover, a:active {
  color: #f60;
}
/*ブラウザのCSSをリセット*/
p {
  margin: 0 !important;
  padding: 0 !important;
}
/*セクションエリアの共通設定*/
section {
  clear: both;
  overflow: auto;
}

/*チェックマークの共通設定*/
.check:before {
	position: relative;
  top: 5px;
	content: url('../images/check.png');
}


/*--------------------------------------------------
見出しタグ設定（PC）
-----------------------------------------------------*/
h2 {
  margin: 1em 0;
  padding: 0.5em 0;
  font-size: 2em;
  color: #fff;
  background-color: #0a1b6b;
  font-weight: bold;
  text-align: center;
  letter-spacing: 0.15em;
}

h3{
  margin: 0.5em 0;
  font-size: 2em;
  color: #262626;
  font-weight: bold;
  text-align: center;
  letter-spacing: 0.08em;
}

/*--------------------------------------------------
全体レイアウト／背景設定（PC）
-----------------------------------------------------*/
/*全体エリア（全体背景を設定するにはここ）*/
.main {
	overflow:hidden;
}
/*記事(ボディ)エリア*/
.article {
  font-size: 2em; /*=22px*/
  letter-spacing: -0.01em;
}
/*記事(ボディ)エリアの行間*/
.article p {
  line-height: 1.8;
  letter-spacing: -0.01em;
    font-family: "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "游ゴシック", "Yu Gothic", "メイリオ", "Meiryo", "MS PGothic", "MS ゴシック", sans-serif;
}

.article{
	width: 100%;
}

/*カラム全体の幅を変更する*/
.top_image_in,.section_inr,.section_inr02,.section_inr03,.section_inr04,.section_inr05 {
  width: 950px;
  margin: 0 auto; /*真ん中に要素を置きたいときに使う*/
}



/*--------------------------------------------------
サンクスページ
-----------------------------------------------------*/

.fv{
text-align: center;
margin: 0 auto;
}

.fv img{
  width: 80%;
}

.thanks_inr{
margin: 0 0em 1em;
text-align: center;
}


.thanks_title {
	margin: 3em 0.2em 0;
  padding: 1em 2em;
	font-size: 1.6em;
  color:#0a1b6b;
	font-weight: bold;
  text-align: center;
}

.description{
  text-align: center;
}

.description img{
  width: auto;
}


/* ===== 動画レイアウト ===== */
.video-wrapper {
  position:relative;
  margin:0 auto;
  max-width:80vw;        /* PC では実画面幅の 80% */
  aspect-ratio:16/9;
}
.video-wrapper video{
  position:absolute;
  top:0;left:0;
  width:100%;
  height:100%;
  object-fit:cover;      /* 黒帯を避けつつクロップ */
}

/* キャプション */
.caption{
  font-size:.8em;
  margin-top:.5em;
  color:#333;
}





.img_contents{
padding-bottom: 1em;
text-align: center;
}

.img_contents img{
  max-height: 0 auto;
  width: 100%;
  max-width: 950px;
  transition: opacity 0.3s;
}

.img_contents img:hover {
      opacity: 0.5;
  }

  /*--------------------------------------------------
  動画
  -----------------------------------------------------*/
  /*5.横に振動するボタン*/
.yureru-s {
    animation: yureru-s 2s infinite;
}
@keyframes yureru-s {
    0% {
        transform: translate(2px, 0px);
    }
    5% {
        transform: translate(-2px, 0px);
    }
    10% {
        transform: translate(2px, 0px);
    }
    15% {
        transform: translate(-2px, 0px);
    }
    20% {
        transform: translate(2px, 0px);
    }
    25% {
        transform: translate(-2px, 0px);
    }
    30% {
        transform: translate(0px, 0px);
    }
}

/*--------------------------------------------------
CTA
-----------------------------------------------------*/
.cta-area{
	text-align: center;
margin: 0 auto;
}

.cta-area img{
width: 60%;
}



/*--------------------------------------------------
フッター部分
-----------------------------------------------------*/
.footer {
  background-color: #39b55c;
  padding: 2em 0em;
  text-align: center;
  font-size: 1em;
  color: #fff;
}
.footer a {
  color: #fff;
}