@charset "UTF-8";
/* ############################################
  基本設定
############################################ */

html {
  font-size: 62.5%;
}

body {
  background: #ffffff;
  color: #404040;
  word-wrap: break-word;
  font-size: 1.6rem;
  font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "sans-serif";
  line-height: 1.6;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

*:focus {
  outline: none;
}

/* リンク */

a {
  color: red;
  text-decoration: underline;
}

a:hover {
  text-decoration: none;
}

/* 画像の調整 */

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

/* 改行調整 */

.nowrap {
  display: inline-block;
  width: max-content;
  text-indent: initial;
  white-space: nowrap;
}

/*===========================================
  大枠設定
===========================================*/

.container {
  margin: 0 auto;
  max-width: 750px;
}

.inner {
  margin: 0 auto;
  width: 90%;
}

/*===========================================
  ヘッダー
===========================================*/

.header {
  margin-bottom: 32px;
}

/*===========================================
  メイン
===========================================*/

/* 共通 */

.color--red {
  color: red;
}

/* コンテンツ */

.section {
  margin-bottom: 32px;
  font-size: 16px;
}

@media screen and (max-width: 750px) {
  .section {
    margin-bottom: 26px;
    font-size: 14px;
  }
}

/* タイトル */

.section__head {
  margin-bottom: 16px;
  padding: 10px;
  border-bottom: solid 5px #6cb4e4;
  background: #eaf3ff;
  color: #010101;
  text-align: center;
  font-weight: bold;
  font-size: 20px;
}

@media screen and (max-width: 750px) {
  .section__head {
    margin-bottom: 12.8px;
    padding: 8px;
    border-bottom: solid 3px #6cb4e4;
    font-size: 16px;
  }
}

/* テキスト */

.section__text {
  margin-bottom: 10px;
}

.section__text--right {
  margin-top: 32px;
  text-align: right;
  font-size: 14px;
}

@media screen and (max-width: 750px) {
  .section__text--right {
    margin-top: 26px;
    font-size: 12px;
  }
}

/* リスト */

.section__list {
  margin-bottom: 10px;
  text-align: left;
}

.section__list--indent li {
  margin-left: 1em;
  text-indent: -1em;
}

/* 応募規約 */

.section__terms {
  overflow: auto;
  margin: 0 auto;
  padding: 20px;
  width: 100%;
  height: 300px;
  border: 1px solid #ccc;
}

@media screen and (max-width: 750px) {
  .section__terms {
    padding: 15px;
  }
}

/* 対象賞品 */

.section__subbrand {
  margin: 30px 0 15px;
  border-bottom: solid 2px #6cb4e4;
  font-weight: bold;
  font-size: 2.0rem;
}

.section__branditem li::before {
  content: "・";
}

.section__branditem li {
  margin-left: 1em;
  text-indent: -1em;
}

/* 戻るボタン */

.section__button {
  display: block;
  margin: 30px auto 0;
  padding: 1.5rem;
  max-width: 600px;
  width: 100%;
  height: auto;
  border-radius: 4px;
  background-color: #6cb4e4;
  color: #ffffff;
  text-align: center;
  text-decoration: none;
  font-size: 25px;
  transition: all .5s ease-out;
}

.section__button:hover {
  background-color: #399fe3;
}

@media screen and (max-width: 750px) {
  .section__button {
    font-size: 2rem;
  }
}

/* フォームエリア */

.form {
  margin: 48px auto;
  text-align: center;
}

.form__agree {
  margin: 20px auto;
}

.form__button {
  display: block;
  margin: 5% auto 10px;
  /* padding: 1.5rem; */
  padding: 1.25rem;
  max-width: 600px;
  width: 100%;
  height: auto;
  border-radius: 4px;
  background-color: #E60012;
  color: #ffffff;
  font-size: 23px;
  transition: all .5s ease-out;
}

.form__button+.form__button {
  margin-top: 10px;
}

.form__button[disabled] {
  border-color: #ccc;
  color: #ccc;
  opacity: 30%;
  -webkit-filter: grayscale(1);
  filter: gray;
  filter: grayscale(1);
  cursor: default;
}

.form__button--2lines {
  font-size: 20px;
  line-height: 1.5;
}

.form__button--small {
  width: 50%;
  background: #404040;
}

.form__msgArea {
  padding: 4% 2%;
  background: #e60012;
  color: #fff;
  text-align: center;
  font-weight: bold;
  font-size: 24px;
}

.form__msgArea2 {
  border: solid 2px #0064e6;
  padding: 10px 20px;
  color: #0064e6;
  font-weight: bold;
  font-size: 16px;
  margin-top: 4%;
}

.form__msgArea small {
  display: block;
}

.form__msgArea small+p {
  margin-top: 10px;
}

.form__msgText {
  padding: 4% 5%;
  text-align: center;
  font-weight: bold;
  font-size: 20px;
}

.form__msgText small {
  display: block;
}

.form__msgText br {
  display: block;
  /* display: none; */
}

.form__msgText small br {
  display: block;
}

@media screen and (max-width: 750px) {
  .form {
    margin: 38px auto;
  }
  .form__agree {
    margin: 16px auto;
  }
  .form__button {
    font-size: 2rem;
  }
  .form__button--2lines {
    font-size: 1.8rem;
  }
  .form__msgArea {
    font-size: 16px;
    font-size: 3.7vw;
  }
  .form__msgText {
    font-size: 16px;
  }
  .form__cautions {
    font-size: 14px;
  }
}

@media screen and (max-width: 576px) {
  .form__button--2lines {
    font-size: 1.6rem;
    font-size: 4vw;
  }
  .form__msgText br {
    /* display: block; */
    display: none;
  }
  .form__msgText small br {
    display: none;
  }
}

/* チェックボックス・ラジオボタン */

input[type="checkbox"],
input[type="radio"] {
  z-index: -1;
  display: block;
  float: left;
  margin-right: -2rem;
  width: 1rem;
  opacity: 0;

  -moz-appearance: none;
  -webkit-appearance: none;
  -ms-appearance: none;
  appearance: none;
}

input[type="checkbox"]+label,
input[type="radio"]+label {
  position: relative;
  display: inline-block;
  padding-left: 3.75rem;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

input[type="checkbox"]+label:before,
input[type="radio"]+label:before {
  position: absolute;
  top: 50%;
  left: 0;
  display: block;
  width: 2.65rem;
  height: 2.65rem;
  border: solid 1px;
  border-color: rgba(144, 144, 144, 0.25);
  border-radius: 4px;
  background: rgba(144, 144, 144, 0.075);
  content: ' ';
  text-align: center;
  line-height: 2.65rem;
  transform: translateY(-50%);
}

input[type="checkbox"]+label.error:before,
input[type="radio"]+label.error:before {
  border-color: #E60012;
}

input[type="checkbox"]:checked+label:before,
input[type="radio"]:checked+label:before {
  border-color: #E60012;
  background-color: #E60012;
  color: #ffffff;
  /* content: '\f00c'; */
  /* font-family: FontAwesome; */

  /* 背景画像設定 */
  content: '';
  background-image: url(../img/check-solid.svg);
  background-size: 80% 80%;
  background-position: center;
  background-repeat: no-repeat;
}

/*===========================================
  追加（2023/03/28）
===========================================*/

/* フォームフィールド */

.form__field {
  margin-bottom: 20px;
  text-align: left;
}

/* フォームタイトル */

.form__title {
  padding: 5px;
  font-weight: bold;
  font-size: 125%;
}


/* フォーム確認 */

.form__confirm {
  font-size: 150%;
}

/* フォームエラー */

.form__error {
  margin-bottom: 5px;
  color: red;
  text-align: left;
  font-weight: bold;
  /* font-size: 1.5rem; */
}

/* 入力ボックス */

input[type="text"],
input[type="tel"],
input[type="email"] {
  display: block;
  padding: 0.5rem 2rem;
  width: 100%;
  height: 45px;
  outline: 0;
  border: none;
  border: solid 1px;
  border-color: rgba(144, 144, 144, 0.25);
  border-radius: 4px;
  background: rgba(144, 144, 144, 0.075);
  color: inherit;
  text-decoration: none;
  font-size: 1.6rem;

  -moz-appearance: none;
  -webkit-appearance: none;
  -ms-appearance: none;
  appearance: none;
}

input[type="text"].error,
input[type="tel"].error,
input[type="email"].error {
  border-color: red;
}

/* 注意事項 */

.form__notelist {
  padding: 5px;
  font-size: 1.2rem;
}

.form__noteitem {
  margin-left: 1em;
  text-indent: -1em;
}

/* モーダルボックス */

.modal__close,
.modal__open {
  margin: 10px auto 0;
  max-width: 260px;
  width: 100%;
  border: none;
  border-radius: 3px;
  background: #000;
  color: #fff;
  text-align: center;
  font-weight: bold;
  font-size: 16px;
  line-height: 50px;
  cursor: pointer;
}

.modal__container {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999999;
  display: none;
  overflow: auto;
  width: 100%;
  height: 100%;
}

.modal__overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
}

.modal__body {
  display: table;
  width: 100%;
  height: 100%;
}

.modal__main {
  display: table-cell;
  padding: 25px;
  vertical-align: middle;
  text-align: center;
}

.modal__content {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  padding: 25px;
  max-width: 600px;
  width: 95%;
  background: #fff;
  color: #000;
}

@media screen and (max-width: 576px) {
  .modal__main {
    padding: 10px;
  }
  .modal__content {
    padding: 10px;
  }
}

/* バーコードリーダー */

#interactive.viewport>canvas,
#interactive.viewport>video {
  max-width: 100%;
  width: 100%;
}

canvas.drawingBuffer {
  position: absolute;
  top: 0;
  left: 0;
}

/* カードサンプル */

.form__sample {
  display: flex;
  align-items: center;
  margin: 25px 0;
  padding: 3%;
  border: solid 1px #000;
}

.form__sampleThumb {
  padding-right: 2%;
  width: 22%;
}

.form__sampleText {
  width: 78%;
  font-size: 12px !important;
}

.form__sampleText li {
  margin-left: 1em;
  text-indent: -1em;
}

@media screen and (max-width:750px) {
  .form__sample {
    margin: 2.5% 0;
  }
}

@media screen and (max-width: 576px) {
  .form__sample {
    flex-direction: column;
    margin: 5% 0;
    padding: 5%;
  }
  .form__sampleThumb {
    padding: 0 0 2% 0;
    width: 60%;
  }
  .form__sampleText {
    width: 100%;
  }
}

/* 賞品選択 */

.form__title--select {
  margin: 2% 0;
  padding: 10px 15px;
  background: #6cb4e4;
  color: #ffffff;
  font-size: 20px;
  line-height: 1.3;
}

.form__select {
  margin: 15px 10px;
}

/* ############################################
	固定ナビ
############################################ */

.form__nav {
	position: fixed;
	bottom: 0;
	left: 0;
	overflow: hidden;
	justify-content: center;
	width: 100%;
	transition: .2s;
  z-index: 9999;
}

.form__nav.is-active {
	bottom: -300px;
}

.form__link {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
	padding: 10px;
	background: red;
	color: #ffffff;
	text-align: center;
	text-decoration: none;
	font-weight: bold;
	font-size: 22px;
	transition: .2s;
}

.form__link:hover {
	background:  rgb(202, 0, 0);
}

.form__link::after {
	display: inline-block;
	margin-left: 5px;
	width: 30px;
	height: 30px;
	background-image: url(../img/double_arrow.svg);
	background-size: contain;
	content: '';
	vertical-align: middle;
	transform: rotate(90deg);
}

/* ############################################
	スライダー
############################################ */

.swiper-container{
  overflow: hidden;
}

.swiper-wrapper{
  transition-timing-function: linear;
}

.swiper-wrapper img{
  width: 100%;
  height: auto;
}

/* ############################################
	エントリー済みのアカウント表示
############################################ */

.form__account {
	overflow: hidden;
	margin: 4% 0;
	border: solid 2px #777777;
	background: #ffffff;
}

.form__accounthead {
    font-weight: bold;
	text-align: center;
    padding: 0.25em 0.25em 0.4em;
	background: #777777;
	color: #ffffff;
	font-size: 2.4rem;
	line-height: 1.4;
}

.form__accountbody {
	padding: 1% 2%;
	text-align: center;
	font-size: 4.2rem;
	font-weight: bold;
}

@media screen and (max-width: 750px) {
	.form__accounthead {
		font-size: 3.4vw;
	}
	.form__accountbody {
		font-size: 6.2vw;
	}
}

@media screen and (max-width: 576px) {
	.form__accounthead {
		font-size: 4.4vw;
	}
	.form__accountbody {
		font-size: 7.2vw;
	}
}

/* ############################################
	対象ブランド一覧
############################################ */

/* タイトル */

.category__title {
	font-size: 2.0rem;
	font-weight: 500;
	font-weight: bold;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 2em;
	margin-bottom: 0.5em;
	text-align: center;
	white-space: nowrap;
	color: #44a6e7;
}

.category__title::before,
.category__title::after {
	display: block;
	width: 100%;
	height: 3px;
	content: "";
	background-color: #44a6e7;
}

.category__title::before {
	margin-right: 0.5em;
}

.category__title::after {
	margin-left: 0.5em;
}

.category__title span {
	line-height: 1.3;
}

.category__title small {
	display: block;
}

/* 一覧 */

.category__list {
	margin-bottom: 2em;
}

.category__list li {
	font-size: 1.4rem;
	display: inline-block;
}

.category__list li::after {
	content: "／";
	color: #cccccc;
}

.category__list li:last-child::after {
	display: none;
}

/* アイコン */

.arrow_s {
	position: relative;
	display: inline-block;
	padding-left: 12px;
	text-decoration: underline;
	color: red;
}

.arrow_s:before {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 0;
	height: 0;
	margin: auto;
	content: "";
	border-width: 6px 0 6px 8px;
	border-style: solid;
	border-color: transparent transparent transparent red;
}