@charset "UTF-8";
/* ==========================================================
  フォント
========================================================== */
/* ===================================================================
CSS information
 file name  :guideline.css
 style info :ミラー配信に関するガイドラインのスタイル
=================================================================== */
body {
  position: relative;
}
body:before {
  content: "";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-repeat: no-repeat;
  background-position: center top;
}
@media screen and (min-width: 751px) {
  body:before {
    background-image: url("../img/shared/bg_contents_pc.jpg");
    background-position: center top;
    background-size: auto;
  }
}
@media screen and (min-width: 1921px) {
  body:before {
    background-size: cover;
  }
}
@media screen and (max-width: 767px) {
  body:before {
    background-image: url("../img/shared/bg_contents_sp.png");
    background-position: center top;
    background-size: 100%;
  }
}

#visual {
  background-repeat: no-repeat;
}
@media screen and (min-width: 751px) {
  #visual {
    background-image: url("../img/shared/bg_illustration_pc.png");
    background-position: left calc(50% + 20px) top 20px;
    background-size: 460px;
    padding: 30px 0;
  }
}
@media screen and (min-width: 1921px) {
  #visual {
    background-position: left calc(50% + 0.8vw) top 1vw;
    background-size: 26vw;
    padding: 2vw 0;
  }
}
@media screen and (max-width: 767px) {
  #visual {
    background-image: url("../img/shared/bg_illustration_sp.png");
    background-position: left calc(50% + 2vw) top 1vw;
    background-size: 70vw;
    padding: 6vw 0;
  }
}
#visual h1 {
  margin-inline: auto;
}
@media screen and (min-width: 751px) {
  #visual h1 {
    width: min(90%, 380px);
  }
}
@media screen and (min-width: 1921px) {
  #visual h1 {
    width: 20%;
  }
}
@media screen and (max-width: 767px) {
  #visual h1 {
    width: 50%;
  }
}

@media screen and (min-width: 751px) {
  #content {
    background: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9) 12px, rgba(0, 0, 0, 0.85) 12px, rgba(0, 0, 0, 0.85) 18px);
    padding: 60px 0;
  }
}
@media screen and (min-width: 1921px) {
  #content {
    background: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9) 1vw, rgba(0, 0, 0, 0.85) 1vw, rgba(0, 0, 0, 0.85) 2vw);
    padding: 3vw 0;
  }
}
@media screen and (max-width: 767px) {
  #content {
    background: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9) 2vw, rgba(0, 0, 0, 0.85) 2vw, rgba(0, 0, 0, 0.85) 4vw);
    padding: 6vw 0;
  }
}
#content h2 {
  font-weight: 700;
}
@media screen and (min-width: 751px) {
  #content h2 {
    font-size: 18px;
  }
}
@media screen and (min-width: 1921px) {
  #content h2 {
    font-size: 1.2vw;
  }
}
@media screen and (max-width: 767px) {
  #content h2 {
    font-size: 4vw;
  }
}
#content h2 em {
  color: #ffd630;
  font-weight: 700;
}
@media screen and (min-width: 751px) {
  #content h2 em {
    font-size: 32px;
  }
}
@media screen and (min-width: 1921px) {
  #content h2 em {
    font-size: 1.6vw;
  }
}
@media screen and (max-width: 767px) {
  #content h2 em {
    font-size: 5vw;
  }
}
#content .innerBox {
  color: #d3d3d3;
  text-align: left;
}
@media screen and (min-width: 751px) {
  #content .innerBox {
    width: min(96%, 820px);
    padding: 60px 0;
    margin: 0 auto 20px;
  }
}
@media screen and (min-width: 1921px) {
  #content .innerBox {
    width: 50%;
  }
}
@media screen and (max-width: 767px) {
  #content .innerBox {
    width: 90%;
    padding: 6vw 0;
    margin: 0 auto 2vw;
  }
}
@media screen and (min-width: 751px) {
  #content .innerBox .readBox {
    margin-bottom: 60px;
  }
}
@media screen and (min-width: 1921px) {
  #content .innerBox .readBox {
    margin-bottom: 3vw;
  }
}
@media screen and (max-width: 767px) {
  #content .innerBox .readBox {
    margin-bottom: 10vw;
  }
}
#content .innerBox .readBox p {
  line-height: 1.8;
}
@media screen and (min-width: 751px) {
  #content .innerBox .readBox p {
    margin-bottom: 40px;
  }
}
@media screen and (min-width: 1921px) {
  #content .innerBox .readBox p {
    margin-bottom: 2vw;
  }
}
@media screen and (max-width: 767px) {
  #content .innerBox .readBox p {
    margin-bottom: 4vw;
  }
}
#content .innerBox .readBox p em {
  font-weight: 700;
  color: #ffd630;
}
@media screen and (min-width: 751px) {
  #content .innerBox .termsBox {
    margin-bottom: 60px;
  }
}
@media screen and (min-width: 1921px) {
  #content .innerBox .termsBox {
    margin-bottom: 3vw;
  }
}
@media screen and (max-width: 767px) {
  #content .innerBox .termsBox {
    margin-bottom: 10vw;
  }
}
#content .innerBox .termsBox h4 {
  font-weight: 700;
  text-align: center;
  color: #091f30;
  background: #dbeeff;
  border: solid 1px #fff;
  -webkit-box-shadow: 0 0 5px #00d2ff;
          box-shadow: 0 0 5px #00d2ff;
}
@media screen and (min-width: 751px) {
  #content .innerBox .termsBox h4 {
    font-size: 26px;
    padding-bottom: 4px;
    margin-bottom: 24px;
  }
}
@media screen and (min-width: 1921px) {
  #content .innerBox .termsBox h4 {
    font-size: 1.4vw;
    padding-bottom: 0.4vw;
    margin-bottom: 2vw;
  }
}
@media screen and (max-width: 767px) {
  #content .innerBox .termsBox h4 {
    font-size: 5vw;
    margin-bottom: 3vw;
  }
}
#content .innerBox .termsBox table {
  border: solid 1px #000;
  width: 100%;
  margin: 1.5em 0;
}
#content .innerBox .termsBox table tr th,
#content .innerBox .termsBox table tr td {
  color: #000;
  border-left: 1px solid #000;
  border-bottom: solid 1px #000;
  padding: 1em;
}
#content .innerBox .termsBox table tr th {
  font-weight: 700;
  text-align: center;
  background: #fff3c9;
  width: 50%;
}
#content .innerBox .termsBox table tr td {
  text-align: left;
  background: #fff;
}
#content .innerBox .termsBox .anoTxt {
  padding-left: 0;
  margin-top: 0;
}
#content .innerBox .termsBox .anoTxt li {
  list-style: none;
  padding-left: 1em;
  text-indent: -1em;
}
:lang(en) #content .innerBox .termsBox .anoTxt li {
  padding-left: 0.5em;
  text-indent: -0.5em;
}
#content .innerBox .termsBox .anoTxt li em {
  font-weight: 700;
  color: #ffe000;
}
#content .innerBox .termsBox > ol {
  line-height: 1.8;
}
#content .innerBox .termsBox > ol > li {
  padding-left: 1em;
}
@media screen and (min-width: 751px) {
  #content .innerBox .termsBox > ol > li {
    margin-bottom: 10px;
  }
}
@media screen and (min-width: 1921px) {
  #content .innerBox .termsBox > ol > li {
    margin-bottom: 0.5vw;
  }
}
@media screen and (max-width: 767px) {
  #content .innerBox .termsBox > ol > li {
    margin-bottom: 2vw;
  }
}
:lang(ja) #content .innerBox .termsBox > ol > li {
  text-indent: -1em;
}
:lang(en) #content .innerBox .termsBox > ol > li {
  text-indent: -0.8em;
}
#content .innerBox .termsBox > ol > li em {
  font-weight: 700;
  color: #ffe000;
}
#content .innerBox .termsBox > ol > li figure {
  text-indent: 0;
}
@media screen and (min-width: 751px) {
  #content .innerBox .termsBox > ol > li figure {
    margin: 20px 0;
  }
}
@media screen and (min-width: 1921px) {
  #content .innerBox .termsBox > ol > li figure {
    margin: 2vw 0;
  }
}
@media screen and (max-width: 767px) {
  #content .innerBox .termsBox > ol > li figure {
    margin: 4vw 0;
  }
}
@media screen and (min-width: 751px) {
  #content .innerBox .termsBox > ol > li ul {
    padding-left: 22px;
    margin: 20px 0;
  }
}
@media screen and (min-width: 1921px) {
  #content .innerBox .termsBox > ol > li ul {
    padding-left: 1vw;
    margin: 1vw 0;
  }
}
@media screen and (max-width: 767px) {
  #content .innerBox .termsBox > ol > li ul {
    padding-left: 6vw;
    margin: 4vw 0;
  }
}
#content .innerBox .termsBox > ol > li ul li {
  list-style-type: disc;
  text-indent: -0.4em;
}
@media screen and (max-width: 767px) {
  #content .innerBox .termsBox > ol > li ul li {
    padding-left: 0;
    text-indent: 0;
  }
}
@media screen and (min-width: 751px) {
  #content .innerBox .termsBox > ol > li ol {
    padding-left: 12px;
    margin: 20px 0;
  }
}
@media screen and (min-width: 1921px) {
  #content .innerBox .termsBox > ol > li ol {
    padding-left: 1vw;
    margin: 1vw 0;
  }
}
@media screen and (max-width: 767px) {
  #content .innerBox .termsBox > ol > li ol {
    padding-left: 2vw;
    margin: 4vw 0;
  }
}
#content .innerBox .termsBox > ol > li ol li {
  counter-increment: cnt;
  padding-left: 1em;
  margin-bottom: 0;
}
@media screen and (min-width: 751px) {
  :lang(ja) #content .innerBox .termsBox > ol > li ol li {
    text-indent: -1.7em;
  }
}
@media screen and (max-width: 767px) {
  :lang(ja) #content .innerBox .termsBox > ol > li ol li {
    text-indent: -1.5em;
  }
}
@media screen and (min-width: 751px) {
  :lang(en) #content .innerBox .termsBox > ol > li ol li {
    text-indent: -1.5em;
  }
}
@media screen and (max-width: 767px) {
  :lang(en) #content .innerBox .termsBox > ol > li ol li {
    text-indent: -1.5em;
  }
}
#content .innerBox .termsBox > ol > li ol li:before {
  content: "(" counter(cnt) ") ";
}
#content .innerBox .termsBox p {
  line-height: 1.8;
}
#content .innerBox .termsBox p a {
  color: #00a8ff;
  text-decoration: underline;
}
#content .txtYbox {
  color: #000;
  background: #fff3c9;
  padding: 1.5em;
  margin: 1.5em 0 2em 1em;
}
#content .btnTop {
  border-radius: 100px;
  background: -webkit-gradient(linear, left top, right top, from(#7cff85), to(#eaff00));
  background: linear-gradient(90deg, #7cff85 0%, #eaff00 100%);
  margin: 0 auto 1.5em;
}
@media screen and (min-width: 751px) {
  #content .btnTop {
    width: 400px;
  }
}
@media screen and (min-width: 1921px) {
  #content .btnTop {
    width: 20%;
  }
}
@media screen and (max-width: 767px) {
  #content .btnTop {
    width: 70%;
  }
}
#content .btnTop:hover {
  background: linear-gradient(60deg, #ffc000, #ff3f3a);
}
#content .btnTop:hover a {
  color: #fff;
}
#content .btnTop a {
  display: block;
  color: #006836;
  font-weight: 700;
  padding: 1.2em;
}
@media screen and (min-width: 751px) {
  #content .btnTop a {
    font-size: 18px;
  }
}
@media screen and (min-width: 1921px) {
  #content .btnTop a {
    font-size: 1.2vw;
  }
}
@media screen and (max-width: 767px) {
  #content .btnTop a {
    font-size: 4vw;
  }
}