@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; opacity: 0; transition: opacity .8s ease;}
body.loaded {opacity: 1;}
ol, ul { list-style: none;}

@media screen and (min-width: 630px){
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: #c7a05b;
    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: #c7a05b;
  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:#c7ae82;}
#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: #ffffff;
  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: 22px;
    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: 34px; 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{  font-family: "Kiwi Maru"; color: #0e1f5d; position: relative; z-index: 1;}
.bg_image {
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
.bg_image_sticky {
    height: 100%;
    max-height: 100vh;
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    background: url(../images/bg.png) center top / cover no-repeat;
    z-index: -1;
}
div[id^="contents-"] { 
    width: 100%;
    margin: 0 auto;
    text-align: center;
    position: relative;
}
div[id^="contents-"] section { padding: 20px 10px; outline-offset: 2px; z-index: 0; position: relative; margin-bottom: 2em;}
div[id^="contents-"] h2{ text-align: center; line-height: 0; width: 95%; margin: 0 auto;}
div[id^="contents-"] h2 img{ width: 100%;}
div[id^="contents-"] h3 img{ margin-bottom: 1em;}
div[id^="contents-"] #contents-present section {padding: 0;}
div[id^="contents-"] #contents-present .balloon {position: absolute;}
@media screen and (min-width: 630px){
  div[id^="contents-"] section{  max-width: 630px; z-index: 0; margin-bottom: 5em;}
  div[id^="contents-"] h2{max-width: 100%; margin-bottom: .5rem;}
  div[id^="contents-"] #contents-present h2 {margin-bottom: 0;}
  div[id^="contents-"] h3 img{ margin-bottom: 2.5em;}}
@media screen and (max-width: 630px){div[id^="contents-"] h2 img{ width: 100%;}}
#contents_wrap { padding: 0 0 0; margin: auto; overflow-x: hidden;}
@media screen and (min-width: 630px){
#contents_wrap {
        width: 100%;
        max-width: 630px;
        border-right: 10px solid #0054ff;
        border-left: 10px solid #0054ff;
        box-shadow: lch(9.64 18.76 45.98 / 0.3) 0 0 10px 5px;
        background: #0054ff;
    }
}
.st_underlay { 
  width: 95%;
  margin: 0 auto;
  background: #fff;
  border: 5px solid #4a5ace;
  padding: 1em;
  box-sizing: border-box;
  position: relative;
  border-radius: 20px;
}
#contents-guideline .st_underlay{
  border-color: #f1b454;
}
@media screen and (min-width: 630px){.st_underlay:first-child { padding-top: 4em;}}

/* ----------------------------------- */
/* contents-main */
/* ----------------------------------- */
.site_main {
    width: 100%;
    height: auto;
    background: url(../images/pattern.png) repeat;
    position: relative;
    z-index: 1;
    overflow: hidden;
}
/* ----------------------------------- */
/* contents-top */
/* ----------------------------------- */
.p-header__logo img{
  width: clamp(100px, 30vw, 191px);
  height: auto;
}
#contents-top{ 
  width: 100%;
  font-size: 0; 
  margin: 0 auto;
  background: url(../images/head_bg.png) no-repeat;
  background-size:cover;
  z-index: 2;
  position: relative;
}
#contents-top .main_ttl{
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  width: 100%;
  margin-top: -14.5%;
}
@media screen and (max-width: 630px){
  #contents-top .main_ttl{
    margin-top: -14%;
  }
}
#contents-top .ttl_show{
  margin-top: -29%;
  margin-bottom: .5rem;
  z-index: 2;
}
#contents-top h2 {
    width: 100%;
    display: block;
    margin: 0 auto 2.2rem;
}
#contents-top h2 img{
    max-width: 616px;
    width: 100%;
}
#contents-top::after{
    background-image: url(../images/ribbon.png);
    height: 45px;
    bottom: -1.5rem;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    content: "";
    display: block;
    position: absolute;
    left: 0;
    width: 100%;
    z-index: 2;
}
.ttl_logo{
  position: relative;
}
.bg-deco {
    position: absolute;
    z-index: 1;
    pointer-events: none;
    filter: drop-shadow(0 0 8rem rgba(9, 6, 75, 0.5)) drop-shadow(0 0 8rem rgba(9, 6, 75, 0.5)) drop-shadow(0 0 8rem rgba(9, 6, 75, 0.5));
    transform: translate3d(0, 0, 0);
}
.bg-deco::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: "";
    background: url(../images/star.png) no-repeat 0 0 / contain;
    animation: infoStar 1.2s ease-in infinite alternate;
}
.bg-deco.star02::before{
    animation-delay: .7s;
}
.bg-deco.star02::before{
    animation-duration: 1.3s;
    animation-delay: 1s;
  }
@keyframes infoStar {
    100% {
      transform: scale(.4);
      opacity: 0;
    }
}
.bg-deco.star01 {
    top: 19.6%;
    left: 5.2%;
    width: 21px;
    height: 26px;
    
}
.bg-deco.star02 {
    top: 23%;
    left: 7.5%;
    width: 28px;
    height: 33px;
}
.bg-deco.star03 {
    bottom: 22.5%;
    right: 6.8%;
    width: 28px;
    height: 33px;
}
@media screen and (max-width: 630px){
.bg-deco.star01 {
    width: 18px;
    height: 23px;
}
.bg-deco.star02,
.bg-deco.star03 {
    width: 18px;
    height: 23px;
}
}
@media screen and (min-width: 630px){
#contents-top{ 
    width: 630px;
}
#contents-top h2 {
    width: 100%;
    text-align: center;
}
}
/* ----------------------------------- */
/* contents-pre-qa-wrap */
/* ----------------------------------- */
#contents-pre-qa-wrap { 
    width: 100%; 
    height: auto; 
    z-index: 1;
}
div[id^="contents-"] #contents-present h2 {
  padding-top: 11.5%;
}
.comment{
    position: absolute;
    right: 4%;
    bottom: -9.5%;
    z-index: 10;
    animation: 2s step-end infinite shake;
}
.comment img {
  display: block;
  width: clamp(90px, 24vw, 151px);
  height: auto;
}
@media screen and (max-width: 630px){
  .comment {
    right: 3%;
  }
}
/* ----------------------------------- */
/* contents-entry */
/* ----------------------------------- */
#contents-entry a { display: block; margin: 0 auto; max-width: 476px; }
#contents-entry a img { filter: drop-shadow lch(19 0 0 / 0.3) 0 0 4px 3px;}
/* ----------------------------------- */
/* contents-qa-gl-wrap */
/* ----------------------------------- */
#contents-qa-gl-wrap {
    width: 100%;
    height: auto;
    padding-bottom:2rem;
    z-index: 0;
    background-position: top;
    background-attachment: fixed;
    background-size: cover;
}
@media screen and (min-width: 630px){
#contents-qa-gl-wrap {
    background-size: auto;
}
}
/* ----------------------------------- */
/* contents-qa */
/* ----------------------------------- */
#contents-qa .title { background: url(../images/icon_question.png) left 0em / 62px 62px no-repeat;  margin-bottom: 0.5em; margin-top: 1em; text-align: left; min-height: 62px;}
#contents-qa .content p { background: url(../images/icon_answer.png) left 0em / 62px 62px no-repeat; text-align: left;}
.accordion { margin: 0em auto; max-width: 82vw;}
.option { position: relative; border-top: 1px solid #c7a05b;}
.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: 0.65em 2em 0em 4.5em; display: block; font-size: 1.2em; font-feature-settings: "palt"; cursor: pointer; position: relative}
.title::after,
.title::before { content: ""; position: absolute; right: 1.25em; top: 1.25em; width: 2px; height: 0.75em; background-color: #cd044b; transition: all 0.3s;}
.title::after { transform: rotate(90deg);}
.option.open .title::before { transform: rotate(90deg); }
.option.open .title::after  { transform: rotate(90deg); }
.content { height: 0; overflow: hidden; transition: height 0.4s ease;}
.content p { margin: 0; margin: 0; padding: 0.5em 0.5em 2em 5.6em; font-size: 1em; line-height: 1.5; font-size: 1em; line-height: 1.5;}
/* ----------------------------------- */
/* contents-guideline */
/* ----------------------------------- */
#contents-guideline section{ font-size: 90%; padding: 1em; text-align: left; box-sizing: border-box;}
#contents-guideline h3.s-title { font-weight: bold; text-align: center; margin-bottom: 1em;}
#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-guideline .content-txt ul li.le_space { margin-left: 1em;}
/* ----------------------------------- */
/* contents-footer*/
/* ----------------------------------- */
#contents-footer {
    box-sizing: border-box;
    background: #000;
    text-align: center;
    padding: 5%;
    color: #fff;
}
#contents-footer .title { padding: 1em 1em 1em 0em;}
#contents-footer .content p { padding: 0.5em 2.6em 1em;}
#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: 630px){
#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;}
#contents-footer .ft_txt {
    line-height: 1.5;
    color: #fff;
    text-align: center;
}
#contents-footer .ft_txt ul {
    margin: 0 auto;
    text-align: center;
    display: inline;
    padding: 0;
}
#contents-footer .ft_txt a {
    text-decoration: underline;
    color: #fff;
}
#contents-footer .ft_txt li+li {
    margin: 0.2rem 0 0;
}
/* ----------------------------------- */
/* animation*/
/* ----------------------------------- */
.load-fade {
  opacity: 0; 
  visibility: hidden;
  transform: translateY(50px);
  transition: all 1s;
}
.load-fade.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}
.scroll-up {
  opacity: 0; 
  visibility: hidden;
  transform: translateY(50px);
  transition: all 1s;
}
.scroll-up.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}
.ornament { position: absolute; z-index: -1; top: 0%;}
.ornament img { width: 100%; height: auto;}

@keyframes shake {
    0% {
        transform: rotate(-2deg)
    }

    50% {
        transform: rotate(2deg)
    }

    to {
        transform: rotate(-2deg)
    }
}