@charset "UTF-8";

/* ======================================
 reset
====================================== */
* {
  border: 0;
  font-weight: normal;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
  box-sizing: border-box;
}

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

/* ======================================
 base
====================================== */
html {
  font-size: 62.5%;
}

body {
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", 'Meiryo', sans-serif;
  color: #000;
  font-size: 1.6rem;
}

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

#str-header {
  box-sizing: initial;
}

#str-contents-02 {
  margin: 0 auto;
  width: 940px;
  padding: 27px 25px 0;
  height: 2850px;
}


/* ======================================
 mainvisual
====================================== */
#mainvisual {
  padding: 50px 396px 29px 0;
}

#mainvisual .box-01 {
  padding: 15px 14px 15px;
}

#mainvisual .box-01 > .inner {
  display: flex;
  justify-content: space-between;
}

#mainvisual .box-01 > .inner .inner-a {
  padding: 22px 0 0;
}

#mainvisual .box-01 > .inner .inner-b {
  padding: 22px 30px 0 37px;
}

#mainvisual .box-01 > .inner .inner-b img {
  position: relative;
  bottom: -25px;
}

#mainvisual .box-01 > .inner-left {
  width: 200px;
}

#mainvisual .box-01 .txt {
  margin-top: 12px;
}

#mainvisual .box-01 .img {
  height: 188px;
}

h1 {
  padding-left: 13px;
}

.txt-01 {
  color: #e50014;
  margin: 12px 0 16px;
  font-size: 2.1rem;
  font-weight: bold;
  padding-left: 13px;
}

.txt-01__label {
  font-size: 2.2rem;
  font-weight: bold;
  border: 1px solid #e50014;
  border-radius: 5px;
  padding: 3px 7px;
  margin-right: 15px;
  display: inline-block;
  line-height: 1.1;
}

.hdg-l2 {
  text-align: center;
}

.hdg-l2 + * {
  margin-top: 25px;
}

.hdg-l2__hdg {
  background: #e50014;
  color: #fff;
  font-weight: bold;
  font-size: 3rem;
  display: inline-block;
  border-radius: 15px;
  padding: 10px;
  width: 445px;
  position: relative;
}

.hdg-l2__hdg::before, .hdg-l2__hdg::after {
  position: absolute;
  display: block;
  content: "";
}


.hdg-l2__hdg::before {
  width: 100px;
  height: 50px;
  background: url("/twittercampaign/img/bg-03.png") center center/contain no-repeat;
  top: calc(50% - 25px);
  left: 0;
}

.hdg-l2__hdg::after {
  width: 100px;
  height: 50px;
  background: url("/twittercampaign/img/bg-04.png") center center/contain no-repeat;
  top: calc(50% - 25px);
  right: 0;
}

/* ======================================
 prize
====================================== */


/* ======================================
 apply
====================================== */


/* ======================================
 target
====================================== */


/* ======================================
 cm
====================================== */


/* ======================================
 terms
====================================== */
#terms {
  padding: 0 23px;
}

#terms .list-note-01 {
  text-align: left;
}

/* ======================================
 module
====================================== */
/* -----------------------------------------
 box
----------------------------------------- */


.video-box {
  width: 416px;
}

/* -----------------------------------------
  list
----------------------------------------- */


.list-step {
  display: flex;
  margin: 0 -8px;
  text-align: center;
  font-weight: bold;
}

.list-step > li {
  background: #fff;
  border-radius: 10px;
  margin: 0 8px;
  width: 100%;
  padding: 25px 10px 30px;
}

.list-step > li .head {
  color: #e50014;
  border-bottom: 1px solid #e50014;
  display: inline-block;
  padding: 0 22px;
  font-weight: bold;
  font-size: 2.4rem;
}

.list-step > li .body {
  margin-top: 15px;
  font-size: 1.8rem;
}

.list-step > li .body > p {
  font-weight: bold;
}

.list-step > li .body > img {
  margin-top: 15px;
}

.list-note-01 {
  margin-top: 11px;
  font-size: 1.2rem;
}

.list-note-01 * {
  font-weight: bold;
}

.list-note-01 > li .mark {
  margin-right: 5px;
}

#pattern-01 .list-note-01 {
  text-align: right;
}

.list-note-02 {
  margin-top: 11px;
  font-size: 1.2rem;
}

.list-note-02 * {
  font-weight: bold;
}

.list-note-02 > li {
  padding-left: 15px;
  position: relative;
}

.list-note-02 > li .mark {
  position: absolute;
  top: 0;
  left: 0;
}

.list-img-01 {
  display: flex;
  text-align: center;
  margin: 50px -12px 35px;
}

.list-img-01 > li {
  width: 100%;
  margin: 0 12px;
}

.list-img-01 > li .head {
  color: #e50014;
  display: inline-block;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 22px;
  font-weight: bold;
  line-height: 1.1;
  min-height: 48px;
}

.list-img-01 > li .head > span {
  display: inline-block;
  font-weight: bold;
  border-bottom: 1px solid #e50014;
  font-size: 2.4rem;
  padding-bottom: 5px;
}

.list-img-01 > li .head .sub {
  display: inline-block;
  font-size: 1.8rem;
  font-weight: bold;
}

.list-img-01 > li .body {
  margin-top: 15px;
}

.list-video {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  margin-top: 50px;
}

.list-video > li {
  width: 50%;
}

.list-video > li:nth-child(n + 3) {
  margin-top: 50px;
}

/* -----------------------------------------
  btn
----------------------------------------- */
.btn-01 {
  text-align: center;
  margin: 13px 0 55px;
}

.btn-01 > a {
  box-sizing: border-box;
  text-decoration: none;
  background: #68c9f3;
  color: #fff;
  font-weight: bold;
  font-size: 3rem;
  display: inline-block;
  border-radius: 15px;
  padding: 10px 39px;
  width: 445px;
  position: relative;
}

.btn-01 > a::before, .btn-01 > a::after {
  position: absolute;
  display: block;
  content: "";
  width: 22px;
  height: 32px;
  top: calc(50% - 16px);
}

.btn-01 > a::before {
  background: url("/ichigomilk1970_2020/img/bg-05.png") center center/contain no-repeat;
  left: 15px;
}

.btn-01 > a::after {
  background: url("/ichigomilk1970_2020/img/bg-05.png") center center/contain no-repeat;
  right: 15px;
}

.label-video {
  text-align: center;
  background: #e43288;
  text-decoration: none;
  padding: 5px 15px;
  color: #fff;
  display: inline-block;
  border-radius: 10px;
  min-width: 277px;
  margin-top: 12px;
  font-size: 2.4rem;
  font-weight: bold;
}

/* -----------------------------------------
  table
----------------------------------------- */
.table-01 {
  color: #e43288;
  font-size: 2.1rem;
  margin-top: 35px;
}

.table-01 > tbody > tr > th {
  width: 220px;
  padding: 20px 20px 20px 27px;
  border-right: 2px solid #e43288;
  font-weight: bold;
}

.table-01 > tbody > tr > td {
  padding-left: 48px;
  font-weight: bold;
}

.table-01 > tbody > tr:first-child > th {
  padding-top: 37px;
}