@charset "utf-8";


:root{
  --font-size: calc(10px * calc(620 / 750));
  --font-size-note: 2.2rem;
  --width-contents: 620px;
  --max-width--modal: 600px;
  --min-width--modal: 600px;
}


/* ==================================================
base
================================================== */
html{
  font-size: var(--font-size);
  font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo', sans-serif;
}
img, video{
  width: 100%;
}
a{
  display: block;
}
a, :focus{
  outline: none; -webkit-tap-highlight-color:rgba(0,0,0,0);
}
#contents{
  width: var(--width-contents);
  overflow: hidden;
  margin: auto;
  background: #583412;
}
section{
  position: relative;
}
.content{
  position: relative;
}


.inner{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.head-tape:before{
  content: "";
  display: block;
  width: 100%;
  padding-bottom: 25.866%;
  background: url("../img/border_keepout.png") no-repeat top center / 100% auto;
  position: absolute;
  top: 0;
  left: 0;
  margin: -2.4% 0 0 0;
  pointer-events: none;
}


/* ==================================================
pc
================================================== */
.pcbg{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("../img/pc_bg.jpg");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}
.pcbg:before{
  content: "";
  display: block;
  width: calc(var(--width-contents) + 6px);
  height: 100%;
  margin: auto;
  background: #fff;
  position: relative;
  z-index: 5;
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}
.pcbg-wrap:before{
  content: "";
  display: block;
  width: 100%;
  padding-bottom: 268px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  background: url("../img/pc_shadow_top.png") repeat-x top center / 100% 268px;
  pointer-events: none;
}
.pcbg-wrap:after{
  content: "";
  display: block;
  width: 100%;
  padding-bottom: 319px;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
  background: url("../img/pc_shadow_bottom.png") repeat-x bottom center / 100% 319px;
  pointer-events: none;
}

.pcbg-side{
  position: absolute;
  width: calc((100% - var(--width-contents)) / 2);
  height: 100%;
  top: 0;
  z-index: 1;
  position: fixed;
  display: flex;
  transition: 0.2s;
  overflow: hidden;
}
.pcbg-side.--left{ position: absolute; top: 0; left: 0; }
.pcbg-side.--right{ position: absolute; top: 0; right: 0; }

.pcbg-left-logo{
  width: 20.364vw;
  max-width: 391px;
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.pcbg-right-qr{
  width: 21.093vw;
  max-width: 405px;
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.pcbg-right-qr img{
  z-index: 2;
  position: relative;
}
.pcbg-right-qr:before{
  content: "";
  display: block;
  width: 150%;
  padding-bottom: 150%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: url("../img/pc_bg_light.png") no-repeat top center / 100% auto;
  pointer-events: none;
}
@media screen and (max-width: 1100px){
  .pcbg-side.--scale{
    opacity: 0;
  }
}
.pcbg-left-tape{
  width: calc(935px * 1);
  position: absolute;
  bottom: 0;
  left: 0;
  margin-bottom: 0%;
}
.pcbg-side.--left:not(.--scale):after{
  content: "";
  display: block;
  width: 100%;
  height: 46px;
  position: absolute;
  bottom: 80px;
  left: 0;
  background: url("../img/pc_bg_tape.png") repeat top left / auto 100%;
  transform: rotate(-1deg);
  transform-origin: left bottom;
  opacity: 1;
  pointer-events: none;
}
.pcbg-right-tape{
  width: calc(680px * 1);
  position: absolute;
  top: 0;
  right: 0;
}



/* ==================================================
animation
================================================== */
.fade-in{
  transform: translateY(4rem);
  opacity: 0;
}
.fade-in.is-view{
  animation: animation_fadeIn 0.4s ease both;
}
@keyframes animation_fadeIn{
  100% { transform: translateY(0); opacity: 1; }
}

.animation-jump{
  display: block;
  animation: animation__jump 5s 1s ease infinite;
}
@keyframes animation__jump{
  0% { translate: 0 0; }
  3.5% { translate: 0 -1.5rem; }
  7% { translate: 0 0; }
  10.5% { translate: 0 -1.5rem; }
  14% { translate: 0 0; }
  100% { translate: 0 0; }
}

nav a:nth-child(1){ animation: animation_nav_jump 4s 1s infinite; }
nav a:nth-child(2){ animation: animation_nav_jump 4s 1.1s infinite; }
nav a:nth-child(3){ animation: animation_nav_jump 4s 1.2s infinite; }
nav a:nth-child(4){ animation: animation_nav_jump 4s 1.3s infinite; }
@keyframes animation_nav_jump{
	0%{transform:translate(0,0px);}
	3%{transform:translate(0,-2rem);}
	5%{transform:translate(0,0px);}
	6%{transform:translate(0,-0.5rem);}
	7%{transform:translate(0,0px);}
	100%{transform:translate(0,0rem);}
}




/* ==================================================
top
================================================== */
.top-bg{
  background: url("../img/top/bg.jpg") no-repeat top center / 100% auto, url("../img/top/bg_bottom.jpg") no-repeat bottom center / 100% auto;
  padding-top: 1%;
}
.top-bg:before, .top-bg:after{
  content: "";
  display: block;
  position: absolute;
  pointer-events: none;
}
.top-bg:before{
  width: 86.533%;
  padding-bottom: 50%;
  background: url("../img/top/chara_left.png") no-repeat top center / 100% auto;
  top: 0;
  left: 0;
  margin: 0.2% 0 0 0;
}
.top-bg:after{
  width: 74.8%;
  padding-bottom: 42.933%;
  background: url("../img/top/chara_right.png") no-repeat top center / 100% auto;
  top: 0;
  right: 0;
  margin: 15.6% 2% 0 0;
}
.top-logo{
  width: 43.066%;
  margin: 0 auto 0;
  transform: translate(-3.2%, 0);
}
.top-icon{
  width: 11.866%;
  position: absolute;
  top: 0;
  right: 0;
  margin: 6.4% 0.6% 0 0;
}
.top-info{
  width: 97.066%;
  padding-bottom: 66.133%;
  margin: 2.4% auto 0;
  background: url("../img/top/frame_play.png") no-repeat top center / 100% auto;
  position: relative;
}
.top-info:after{
  content: "";
  display: block;
  width: 100.824%;
  padding-bottom: 41.346%;
  background: url("../img/top/eff_kira.png") no-repeat top center / 100% auto;
  position: absolute;
  top: 0;
  left: 0;
  margin: 1.4% 0 0 -1.6%;
  pointer-events: none;
}
.top-info-text{
  width: 75.137%;
  margin: 6.2% auto 0;
}
.top-info-link{
  width: 84.615%;
  margin: 0.6% auto 0;
}
.top-nav{
  margin-top: 4%;
  background: #583412;
  background: linear-gradient(0deg,rgba(88, 52, 18, 1) 0%, rgba(88, 52, 18, 1) 30%, rgba(0, 0, 0, 0) 100%);
}
.top-nav-info{
  width: 92.666%;
  margin: 0 auto 0;
}
.top-nav nav{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 3%;
  padding-bottom: 4%;
}
.top-nav nav a{
  width: 24%;
  margin: 0 0.28% 0;
}




/* ==================================================
ingame
================================================== */
.ingame-bg{
  background: url("../img/bg_common.png") no-repeat top 0.8rem center / 100% auto;
}
.ingame-bg:after{
  content: "";
  display: block;
  background: #583412;
  background: linear-gradient(0deg,rgba(88, 52, 18, 1) 0%, rgba(88, 52, 18, 1) 10%, rgba(0, 0, 0, 0) 100%);
  width: 100%;
  padding-bottom: 50%;
  position: absolute;
  bottom: 0;
}
.ingame-head{
  padding-bottom: 54.266%;
  position: relative;
  background: url("../img/ingame/bg_title.png") no-repeat top center / 100% auto;
  z-index: 3;
}
.ingame-title{
  width: 82.266%;
  margin: 16% auto 0;
}
.ingame-date{
  width: 83.733%;
  margin: 0.6% auto 0;
}
.ingame-main{
  padding-bottom: 6%;
  position: relative;
  z-index: 2;
}
.ingame-reward{
  position: relative;
  margin-top: 2%;
}
.ingame-reward:before{
  content: "";
  display: block;
  width: 107.466%;
  padding-bottom: 114.533%;
  background: url("../img/ingame/bg_light.png") no-repeat top center / 100% auto;
  position: absolute;
  top: 0;
  left: 0;
  margin: -17% 0 0 -28%;
  pointer-events: none;
}
.ingame-reward-text{
  width: 54.266%;
  margin-left: 1%;
  position: relative;
}
.ingame-reward-movie{
  width: 42.933%;
  padding-bottom: 72.666%;
  position: absolute;
  top: 0;
  right: 0;
  margin: 1% 2.4% 0 0;
}
.ingame-reward-movie:after{
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: url("../img/ingame/frame_pv.png") no-repeat top center / 100% auto;
  position: absolute;
  top: 0;
  left: 0;
}
.ingame-reward-movie > div{
  width: 90.4%;
  height: 94%;
  position: absolute;
  top: 50%;
  left: 50%;
  background: #000;
  transform: translate(-50%, -50%);
  border-radius: 1rem;
  overflow: hidden;
}
.ingame-reward-movie video{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.ingame-reward-link{
  width: 90.8%;
  margin: -5.4% 0 0 0.5%;
  position: relative;
}
.ingame-item{
  width: 96%;
  margin: 3% auto 0;
}


.ingame-join-howto{
  width: 92.266%;
  margin: 6% auto 0;
  padding: 0.6rem;
  border-radius: 2.5rem;
  background: #EED4A2;
  background: linear-gradient(0deg,rgba(238, 212, 162, 1) 0%, rgba(247, 233, 207, 1) 50%, rgba(255, 255, 255, 1) 100%);
  overflow: hidden;
}
.ss-accordion{
  border-radius: 0 0 2.5rem 2.5rem;
  overflow: hidden;
}
.ss-accordion .ss-acd-head{
  position: relative;
  cursor: pointer;
}
.ss-accordion.--open .ss-acd-head{
  border-radius: 0 0 0 0;
}
.ss-accordion .ss-acd-head:after{
  content: "";
  display: block;
  width: 5.286%;
  padding-bottom: 5.139%;
  position: absolute;
  top: 50%;
  right: 4%;
  transform: translate(0, -50%);
  background: url("../img/ingame/icon_plus.png") no-repeat top center / 100% auto;
  pointer-events: none;
}
.ss-accordion.--open .ss-acd-head:after{
  content: "";
  display: block;
  padding-bottom: 2.496%;
  background: url("../img/ingame/icon_minus.png") no-repeat top center / 100% auto;
}
.ss-acd-body{
  background: #ffedca;
  padding: 0 0 5%;
  border-radius: 0 0 2.5rem 2.5rem;
  overflow: hidden;
}
.ss-acd-body img{
  margin-top: 7%;
}
.ingame-play{
  width: 97.066%;
  padding-bottom: 74%;
  background: url("../img/ingame/frame_ingame_play.png") no-repeat top center / 100% auto;
  margin: 5.6% auto 0;
  position: relative;
}
.ingame-play-text{
  width: 96.978%;
  margin: 1.2% 0 0 -1%;
}
.ingame-play-link{
  width: 84.615%;
  margin: 0.4% auto 0;
}




/* ==================================================
quiz
================================================== */
.quiz-bg{
  background: url("../img/quiz/bg.jpg") no-repeat top -1.2rem center / 100% auto;
}
.quiz-bg:after{
  content: "";
  display: block;
  background: #583412;
  background: linear-gradient(0deg,rgba(88, 52, 18, 1) 0%, rgba(88, 52, 18, 1) 10%, rgba(0, 0, 0, 0) 100%);
  width: 100%;
  padding-bottom: 50%;
  position: absolute;
  bottom: 0;
}
.quiz-head{
  padding-bottom: 46.666%;
  position: relative;
  background: url("../img/quiz/bg_title.png") no-repeat top center / 100% auto;
  z-index: 2;
}
.quiz-title{
  width: 97.333%;
  margin: 17% auto 0;
}
.quiz-date{
  width: 83.733%;
  margin: 3% auto 0;
}
.quiz-main{
  padding-bottom: 6%;
  position: relative;
  z-index: 2;
}
.quiz-main{
  position: relative;
  padding-bottom: 6%;
  z-index: 2;
  background: url("../img/quiz/eff_kira.png") no-repeat top -1rem left 2.7rem / 92% auto;
}
.quiz-text{
  width: 64.8%;
  margin: 3.4% auto 0;
}
.quiz-thumb{
  position: relative;
}
.quiz-thumb:before, .quiz-thumb:after{
  content: "";
  display: block;
}
.quiz-thumb:before{
  width: 20.533%;
  padding-bottom: 18.933%;
  position: absolute;
  top: 0;
  left: 0;
  background: url("../img/quiz/icon_01.png") no-repeat top center / 100% auto;
  margin: -10.2% 0 0 0;
  pointer-events: none;
}
.quiz-thumb:after{
  width: 20.4%;
  padding-bottom: 16.666%;
  position: absolute;
  top: 0;
  right: 0;
  background: url("../img/quiz/icon_02.png") no-repeat top center / 100% auto;
  margin: -10% 0.6% 0 0;
  pointer-events: none;
}
.quiz-thumb > div{
  width: 78.133%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  transition: 0.2s ease-out;
  transition-delay: 1s;
}
.quiz-thumb > div.quiz-thumb-card01,
.quiz-thumb > div.quiz-thumb-card02,
.quiz-thumb > div.quiz-thumb-card03{
  margin: 9% 0 0 11%;
  transform-origin: center;

}
.quiz-thumb.is-view > div.quiz-thumb-card01{
  margin: 5.2% 0 0 7.5%;
  transform: rotate(-5.6deg);
}
.quiz-thumb.is-view > div.quiz-thumb-card02{
  margin: 7% 0 0 11.6%;
  transform: rotate(-2.2deg);
}
.quiz-thumb.is-view > div.quiz-thumb-card03{
  margin: 8.8% 0 0 15%;
  transform: rotate(1.8deg);
}
.quiz-text-atn{
  width: 92.4%;
  margin: 57.866% auto 0;
}
.quiz-text-catch{
  width: 60.8%;
  margin: 3% auto 0;
}
.quiz-link{
  width: 82.133%;
  margin: 2.8% auto 0;
}
.quiz-info{
  width: 94.266%;
  margin: 4% auto 0;
  position: relative;
}
.quiz-info:after{
  content: "";
  display: block;
  width: 22.347%;
  padding-bottom: 22.347%;
  background: url("../img/quiz/item01_icon.png") no-repeat top center / 100% auto;
  position: absolute;
  top: 0;
  left: 0;
  margin: 8.5% 0 0 -1.5%;
  pointer-events: none;
}
.quiz-share{
  width: 94.666%;
  margin: 3% auto 0;
  position: relative;
}
.quiz-share:after{
  content: "";
  display: block;
  width: 18.309%;
  padding-bottom: 18.309%;
  background: url("../img/quiz/item02_icon.png") no-repeat top center / 100% auto;
  position: absolute;
  top: 0;
  left: 0;
  margin: 14% 0 0 -0.8%;
  pointer-events: none;
}
.quiz-share a{
  width: 86.760%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto 9%;
}
.quiz-atn{
  width: 92.266%;
  margin: 0 auto 0;
}
.quiz-notes{
  width: 34.266%;
  margin: 3% auto 0;
}




/* ==================================================
stamp
================================================== */
#stamp .head-tape:before{
  margin: -2.8% 0 0 0;
}
.stamp-bg{
  background: url("../img/stamp/bg.jpg") no-repeat top -1.2rem center / 100% auto;
}
.stamp-bg:after{
  content: "";
  display: block;
  background: #583412;
  background: linear-gradient(0deg,rgba(88, 52, 18, 1) 0%, rgba(88, 52, 18, 1) 10%, rgba(0, 0, 0, 0) 100%);
  width: 100%;
  padding-bottom: 50%;
  position: absolute;
  bottom: 0;
}
.stamp-head{
  padding-bottom: 46.666%;
  position: relative;
  background: url("../img/stamp/bg_title.png") no-repeat top center / 100% auto;
  z-index: 2;
}
.stamp-title{
  width: 95.333%;
  margin: 16% auto 0;
}
.stamp-date{
  width: 83.733%;
  margin: 1% auto 0;
}
.stamp-main{
  position: relative;
  padding-bottom: 5%;
  z-index: 2;
}
.stamp-text{
  width: 79.066%;
  margin: 4% auto 0;
  position: relative;
}
.stamp-text:after{
  content: "";
  display: block;
  width: 116.694%;
  padding-bottom: 37.942%;
  background: url("../img/stamp/eff_kira.png") no-repeat top center / 100% auto;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  margin: 0 0 0 0;
}
.stamp-image{
  margin: 1.8% auto 0;
}
.stamp-movie{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 28.8% auto 0;
  width: 52%;
  border: solid #fff4da 0.5rem;
  border-radius: 1.5rem;
  overflow: hidden;
  box-shadow: #fff4da 0px 0px 2rem;
}
.stamp-movie video{
  scale: 1.086;
  margin-left: 0.1rem;
}
.stamp-link{
  width: 82.133%;
  margin: 0.8% auto 0;
}




/* ==================================================
newtsum
================================================== */
#newtsum .head-tape:before{
  margin: -2.8% 0 0 0;
}
.newtsum-bg{
  background: url("../img/newtsum/bg.jpg") no-repeat top -1.2rem center / 100% auto;
}
.newtsum-bg:after{
  content: "";
  display: block;
  background: #583412;
  background: linear-gradient(0deg,rgba(88, 52, 18, 1) 0%, rgba(88, 52, 18, 1) 10%, rgba(0, 0, 0, 0) 100%);
  width: 100%;
  padding-bottom: 50%;
  position: absolute;
  bottom: 0;
}
.newtsum-head{
  padding-bottom: 46.666%;
  position: relative;
  background: url("../img/newtsum/bg_title.png") no-repeat top center / 100% auto;
  z-index: 2;
}
.newtsum-title{
  width: 81.066%;
  margin: 17.6% auto 0;
}
.newtsum-main{
  position: relative;
  padding-bottom: 6%;
  z-index: 2;
}
.newtsum-list{
  margin-top: 2%;
}
.newtsum-list div{
  width: 94.4%;
  margin: 0.4% auto 0;
  position: relative;
}
.newtsum-list div:first-child{
  margin: 0 auto 0;
}
.newtsum-howto-get{
  width: 26.553%;
  position: absolute;
  bottom: 0;
  right: 0;
  margin: 0 6.4% 7.5% 0;
}
.newtsum-comingsoon{
  width: 73.733%;
  margin: 2% auto 0;
}
.newtsum-link{
  width: 82.133%;
  margin: 2.8% auto 0;
}




/* ==================================================
xcp
================================================== */
#xcp .head-tape:before{
  margin: -2.8% 0 0 0;
}
.xcp-bg{
  background: url("../img/xcp/bg.jpg") no-repeat top -1.2rem center / 100% auto;
}
.xcp-bg:after{
  content: "";
  display: block;
  background: #583412;
  background: linear-gradient(0deg,rgba(88, 52, 18, 1) 0%, rgba(88, 52, 18, 1) 10%, rgba(0, 0, 0, 0) 100%);
  width: 100%;
  padding-bottom: 50%;
  position: absolute;
  bottom: 0;
}
.xcp-head{
  padding-bottom: 46.666%;
  position: relative;
  background: url("../img/xcp/bg_title.png") no-repeat top center / 100% auto;
  z-index: 2;
}
.xcp-title{
  width: 50.666%;
  margin: 17% auto 0;
}
.xcp-main{
  position: relative;
  padding-bottom: 9%;
  z-index: 2;
}
.xcp-text{
  width: 70.666%;
  margin: 2.6% auto 0;
  position: relative;
}
.xcp-text:after{
  content: "";
  display: block;
  width: 124.528%;
  padding-bottom: 41.886%;
  background: url("../img/xcp/eff_kira.png") no-repeat top center / 100% auto;
  position: absolute;
  top: 0;
  left: 0;
  margin: -2.6% 0 0 -15.2%;
  pointer-events: none;
}
.xcp-info{
  width: 84%;
  margin: 4% auto 0;
}
.xcp-link{
  width: 82.133%;
  margin: 7.2% auto 0;
}




/* ==================================================
footer
================================================== */
footer .head-tape:before{
  margin: -2.8% 0 0 0;
}
.footer-bg{
  background: url("../img/footer/bg.jpg") no-repeat top -1.6rem center / 100% auto;
  padding-top: 10%;
}
.footer-howto-conan-project{
  width: 93.333%;
  margin: 12% auto 0;
  position: relative;
}
.footer-howto-conan-project a{
  width: 76.571%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto 4.4%;
}
.footer-sns{
  margin-top: 5%;
}
.footer-sns-text{
  width: 61.2%;
  margin: 0 auto 0;
}
.footer-sns-link{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 2.6%;
}
.footer-sns-link a{
  width: 12%;
  margin: 0 2.666%;
}
.footer-spec{
  width: 99.733%;
  margin: 5.4% auto 0;
}
.footer-pagetop{
  width: 17.6%;
  position: absolute;
  bottom: 0;
  right: 0;
  margin: 0 1% 25% 0;
}
.footer-bottom{
  position: relative;
  margin-top: 2%;
  padding-bottom: 26.4%;
  background: url("../img/footer/frame.png") no-repeat top center / 100% auto;
}
.footer-support{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 8%;
}
.footer-support a{
  margin: 0 6.666%;
}
.support-policy{
  width: 37.466%;
}
.support-contact{
  width: 23.466%;
}
.footer-copyright{
  width: 52.4%;
  margin: 4.4% auto 0;
}





/* ==================================================
modal
================================================== */
.modal-box {
  display: none;
}
.modaal-container {
  width: 88%;
  max-width: var(--max-width--modal);
  min-width: var(--min-width--modal);
  margin: 0 auto 0;
  background-color: transparent !important;
  box-shadow: none !important;
  top: -4vh;
}
.modaal-content-container {
  position: relative;
  padding: 0 !important;
}
.modal_close {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  width: 44.8%;
  padding-top: 0;
  margin-top: 4%;
  cursor: pointer;
}
.modaal-inner-wrapper{
  padding: 0;
}
.modal-terms-inner {
  height: 0;
  padding-top: 100%;
  position: relative;
  color: #333;
  font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', sans-serif;
  font-weight: normal;
  line-height: 1.5;
}
.modal-terms-contents{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  color: #64360e;
  background: #fffcda;
  border-radius: 3rem;
  display: flex;
  flex-flow: column;
  padding-bottom: 4%;
}
/* notes */
.modal-terms-contents{
  background: #f8d79c;
  font-size: var(--font-size-note);
  box-shadow: inset 0px 0px 1.5rem #7b4411;
}
.modal-notes-title{
  text-align: center;
  padding: 10% 0 2%;
  font-size: calc(var(--font-size-note) * 1.8);
  font-weight: bold;
  color: #64360e;
}
.modal-terms-contents .modal-notes-text{
  overflow-y: scroll;
  word-break: break-all;
  font-size: var(--font-size-note);
  height: 100%;
  line-height: 1.25;
  padding-left: 4%;
  padding-right: 3.5%;
  width: 96%;
  margin: 5% auto 0;
}
.modal-terms-contents .modal-notes-text li{
  line-height: 1.5;
}
.modal-terms-contents .modal-notes-text li a{
  display: inline;
  color: #0000d5;
}
.modal-terms-contents ul li{
  padding-left: 1em;
  transform: rotate(0.03deg);
}
.modal-terms-contents ul li:before{
  display: inline-block;
  content: "・";
  width: 1em;
  margin-left: -1em;
  color: #64360e;
}