@charset "UTF-8";/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */

/* ----------------------------------- */
/* setting */
/* ----------------------------------- */
body, html {height: 100%; width: 100%;}
html { -webkit-text-size-adjust: 100%;}
body, h1, h2, h3, h4, h5, h6 { margin: 0;}
body { font-family: 'San Fransisco',"游ゴシック体",YuGothic,"游ゴシック","Yu Gothic",'Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','メイリオ',Meiryo,sans-serif; font-weight: 500;}
ol, ul { list-style: none;}

@media screen and (min-width: 961px){
html { font-size: 100%;}
}
img { pointer-events: none; user-select: none; border-style: none; max-width: 100%;}
a img,button img {pointer-events: painted;}
a {
  background-color: transparent;
  -webkit-tap-highlight-color: transparent;
  text-decoration: underline;
}
.link{ transition: opacity .3s;}
@media (hover: hover) {
  .link:hover { opacity: .55 }
}
@media (hover: none) {
  .link:active{ opacity: .55 }
}
/* ----------------------------------- */
/* navi */
/* ----------------------------------- */
#g-nav{
    position:fixed;
    z-index: 999;
    top:0;
    right: -120%;
    width: 270px;
    height: 100vh;
    background-color: rgb(181 154 95);
    transition: all 0.6s;
    font-size: 0;
}
#g-nav.panelactive{ right: 0;}
/*ナビゲーション*/
#g-nav ul {
  z-index: 999;
  top: 24%;
  left: 11%;
  margin: 0 auto;
  padding: 30% 0 3%;
  display: block;
}
#g-nav li{ list-style: none; text-align: center; position: relative;}
#g-nav li a{
  background: url(../images/txt_menu.png);
  background-color: rgb(181 154 95);
  height: 80px;
  width: 270px;
  position: relative;
  transition: color .3s ease-in-out, background-color .3s ease-in-out;
  background-repeat: no-repeat;
  display: block;
}
#g-nav li a:hover { background-color:rgb(219 175 93);}
#g-nav li:nth-of-type(1) a { background-position: 0 0;}
#g-nav li:nth-of-type(2) a { background-position: 0 -80px;}
#g-nav li:nth-of-type(3) a { background-position: 0 -160px;}
#g-nav li:nth-of-type(4) a { background-position: 0 -240px;}
#g-nav li:nth-of-type(5) a { background-position: 0 -320px;}
.openbtn1{
  position: fixed;
  z-index: 9999;
  top: 10px;
  right: 10px;
  cursor: pointer;
  width: 77px;
  background: url(../images/btn_menu.png) no-repeat;
  background-size: 100% auto;
  height: 13%;
}
.openbtn1 span{
  display: inline-block;
  transition: all .4s;
  position: absolute;
  left: 21px;
  height: 5px;
  border-radius: 6px;
  background-color: #f2e4ae;
  width: 46%;
  }
.openbtn1 span:nth-of-type(1) { top:15px;}
.openbtn1 span:nth-of-type(2) { top:27px;}
.openbtn1 span:nth-of-type(3) { top:40px;}
.openbtn1.active span:nth-of-type(1) {
    top: 18px;
    left: 19px;
    transform: translateY(6px) rotate(-45deg);
    width: 50%;
}
.openbtn1.active span:nth-of-type(2) { opacity: 0;}
.openbtn1.active span:nth-of-type(3) { top: 30px; left: 19px; transform: translateY(-6px) rotate(45deg); width: 50%;}
/*share*/
.p-share { font-size: 0; margin: 0 auto; text-align: center;}
.p-share__item { margin: 0 6px; transition: opacity .3s; width: 38px; display: inline-block;}
.p-share__item:hover { opacity: .55}
.p-share__item img { width: 38px; height: auto;}
/* ----------------------------------- */
/* common */
/* ----------------------------------- */
article{ padding: 0 1% 5%;}
#bg_wrapper:before{
  content:"";
  display:block;
  position:fixed;
  top:0;
  left:0;
  z-index:-1;
  width:100%;
  height:100vh;
  background-repeat:no-repeat;
  background-position:50% 100%;
  background-image:url(../images/bg.png);
  background-size:cover;
  padding: 0 1% 5%;
  }
div[id^="contents-"] {  margin: 2em 0 0;}
div[id^="contents-"] section { 
  background: #fff;
  padding: 30px 10px;
  border: 3px solid #af2f2c;
  outline: 3px solid #d8ba0b;
  outline-offset: 2px;
  margin: 5px;
}
div[id^="contents-"] h2{ text-align: center; line-height: 0;}
div[id^="contents-"] h2 img{ height: 4.32rem;}
@media screen and (min-width: 961px){
  div[id^="contents-"] section{  max-width: 620px;}
  div[id^="contents-"] h2 img{ height: 3.32rem;}
}
@media screen and (max-width: 620px){
  div[id^="contents-"] h2 img{ height: 2.82rem;}
}
.site_main { padding: 0 0 0; margin: auto; overflow-x: hidden;}
@media screen and (min-width: 961px){
.site_main { width: 620px;}
}
/* ----------------------------------- */
/* contents-top */
/* ----------------------------------- */
#contents-top{ font-size: 0;}
#contents-top section{ position: relative;}
#contents-top section.end:before {
  content: "キャンペーンは終了いたしました";
  display: block;
  position: absolute;
  top: 30%;
  left: 0;
  padding: 0.3em 0;
  font-size: 26px;
  font-weight: bold;
  color: #fff;
  background: rgb(74 62 31 / 90%);
  transform-origin: right top;
  transform: rotate(345deg);
  box-shadow: 0 2px 5px 0 rgb(0 0 0 / 20%);
  width: 94%;
  text-align: center;
}
@media screen and (max-width: 501px){
  #contents-top section.end:before{ top: 35%; font-size: 16px;}
  }
@media screen and (min-width: 961px){
#contents-top{ width: 620px; margin: 0 auto;}
}
/* ----------------------------------- */
/* contents-present */
/* ----------------------------------- */
#contents-present small { text-align: right; display: block; line-height: 0;}
/* ----------------------------------- */
/* contents-entry */
/* ----------------------------------- */
#contents-entry a { display: block; margin: 0 auto; max-width: 280px;}
/* ----------------------------------- */
/* contents-qa */
/* ----------------------------------- */
#contents-qa .title { background: url(../images/Q.png) left 1em / 30px 30px no-repeat;}
#contents-qa .content p { background: url(../images/A.png) left 0.5em / 30px 30px no-repeat;}
.accordion { margin: 0em auto; max-width: 82vw;}
.toggle { display: none;}
.option { position: relative; border-top: 2px solid #fde6ab;}
.option:nth-child(1) { border-top: none;}
.title,
.content { -webkit-backface-visibility: hidden; backface-visibility: hidden; transform: translateZ(0); transition: all 0.3s;}
.title { padding: 1em 2em; display: block; color: #333; font-weight: bold; font-size: 1.2em; font-feature-settings: "palt";}
.title::after,
.title::before { content: ""; position: absolute; right: 1.25em; top: 1.25em; width: 2px; height: 0.75em; background-color: #d7502b; transition: all 0.3s;}
.title::after { transform: rotate(90deg);}
.content { max-height: 0; overflow: hidden;}
.content p { margin: 0; padding: 0.5em 2.6em 1em; font-size: 0.9em; line-height: 1.5;}
.toggle:checked + .title + .content { max-height: 99999px; transition: all 1.5s;}
.toggle:checked + .title::before { transform: rotate(90deg) !important;}
/* ----------------------------------- */
/* contents-guideline */
/* ----------------------------------- */
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
@-webkit-keyframes slideDown {
  0% {
    opacity: 1;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes slideDown {
  0% {
    opacity: 1;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
.slide-down { -webkit-animation-name: slideDown; animation-name: slideDown;}
@-webkit-keyframes slideUp {
  0% {
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}
@keyframes slideUp {
  0% {
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}
.slide-up { -webkit-animation-name: slideUp; animation-name: slideUp;}
.content-wrap { height: 250px; overflow: hidden; position: relative; margin: 0;}
.close-btn, .more-btn-guideline {
  display: block;
  width: 100%;
  padding: 80px 0 0;
  position: absolute;
  bottom: 0;
  left: 0;
  text-align: center;
  background: -moz-linear-gradient(
    top,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 1) 60%
  );
  background: -webkit-linear-gradient(
    top,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 1) 60%
  );
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 1) 60%
  );
  filter: progid:DXImageTransform.Microsoft.gradient(
      startColorstr='#00ffffff',
      endColorstr='#ffffff',
      GradientType=0
    );
}
.close-btn { background: none;}
.slide-up { height: 250px; padding-bottom: 0; overflow: hidden;}
.slide-down { height: auto; overflow: visible; padding-bottom: 50px;}
.more-btn-guideline p {
  display: inline-block;
  color: #fff;
  cursor: pointer;
  background: #af2f2c;
  padding: 5px 20px;
  width: 80%;
  border-radius: 20px;
  font-weight: bold;
  font-size: 1.2em;
  transition: opacity .3s;
}
.more-btn-guideline p:hover { opacity: .55 }
.close-btn { padding:0; transition: opacity .3s;}
.close-btn p { background: #aaa;}
.close-btn p:hover { opacity: .55}

#contents-guideline section{ font-size: 90%;}
#contents-guideline h3.s-title { font-weight: bold; text-align: center;}
#contents-guideline .content-txt p{ margin-top: 0;}
#contents-guideline .content-txt ul { margin: 0 0 1em 0; padding: 0;}
#contents-guideline .content-txt ul li { padding-left: 1em; text-indent: -1em;}
#contents-guideline .content-txt ul li.space { letter-spacing: -0.039em;}
/* ----------------------------------- */
/* contents-footer*/
/* ----------------------------------- */
#contents-footer {
    box-sizing: border-box;
    background: #000;
    text-align: center;
    padding: 5%;
    color: #fff;
}
#contents-footer .p-share__item { margin: 0 6px;}
#contents-footer .footer-logo{ margin: 20px auto 0; padding: 20px; position: relative;}
#contents-footer .footer-logo:before {
  background: linear-gradient(90deg,rgba(80,106,137,0) 0,#506a89 30%,#506a89 80%,rgba(80,106,137,0) 100%);
  top: 0;
  content: '';
  height: 0.06rem;
  left: calc(50% - 10.7rem);
  position: absolute;
  width: 20.4rem;
  border-style: solid;
  border-width: 0;
  box-sizing: border-box;
}
#contents-footer .footer-logo img { width: 100%; max-width: 300px; position: relative; left: 35px;}
@media screen and (max-width: 620px){
#contents-footer .footer-logo img { left: 0px;}
}
#contents-footer .accordion{ border: solid 1px #fff; max-width: 760px; color: #111; background: rgb(255 255 255);}
#contents-footer .close {
  padding: 0.21em 1em;
  display: block;
  margin: 0 auto 1em;
  background: #e3e1e1;
  border-radius: 100px;
  color: #000;
  font-weight: bold;
  width: 48px;
}
#contents-footer .content { text-align: left; word-break: break-all;}
#contents-footer  .content .ss-title { margin: 0; padding: 0 2.6em; font-size: 0.9em; line-height: 1.5;}
#contents-footer .footer__copyright { display: block;}