@charset "utf-8";

main{
  margin-top: -3%;
}
rt{
  font-weight: 700;
}
.kerning{
  letter-spacing: -1px;
}
.tabOn{
  display: none;
}
.spOn{
  display: none;
}

@media screen and (max-width:768px){
  rt{
    font-size: 50%;
    zoom: 0.7;
  }
  .tabOn{
    display: block;
  }
}
@media screen and (max-width:520px){
  .spOn{
    display: block;
  }
}


/*********************************************
**********************************************
index.php
**********************************************
*********************************************/

/************************
main_v
************************/
#main_v picture img{
  width: 100%;
}

/************************
movie
************************/
.movie{
  background-image: url(../img/top_movie_bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  padding: 0 4%;
}
.movie .inner{
  max-width: 880px;
  padding: 50px 0 70px;
  margin: 0 auto;
}
.movie .inner>p{
  color: #fae8cc;
  font-size: 24px;
  font-weight: 700;
  text-align: center;
}
.movie .inner p:first-child{
  margin-bottom: 10px;
}
.movie_wrap{
  position: relative;
}
.movie_link{
  position: relative;
  text-align: center;
  margin-top: 40px;
}
.movie_link a .scale_pic{
  display: inline-block;
  transition: all 500ms cubic-bezier(0.165, 0.84, 0.44, 1);
}
.movie_link a:hover .scale_pic{
  transform: scale(1.1);
}
.movie_link a img:nth-child(2){
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.movie_dandy{
  position: absolute;
  bottom: -28px;
  left: -20px;
}
.movie_brown{
  position: absolute;
  bottom: -35px;
	right: 40px;
}

@media screen and (max-width:768px){
  .movie{
    background-image: url(../img/top_movie_bg_sp.png);
    padding: 0 6%;
  }
  .movie .inner{
    padding: 50px 0 110px;
  }
  .movie .inner>p{
    font-size: 32px;
    line-height: 2.25;
  }
  .movie_wrap{
    padding: 0 2%;
  }
  .movie_link{
    margin-top: 70px;
  }
  .movie_dandy{
    width: 22%;
    bottom: -25px;
    left: -40px;
  }
  .movie_brown{
    width: 12.3%;
    bottom: -23px;
    right: -22px;
  }
}
@media screen and (max-width:520px){
  .movie{
    padding: 0 2%;
  }
  .movie .inner{
    padding: 25px 0 45px;
  }
  .movie .inner>p{
    font-size: 16px;
    line-height: 2.25;
  }
  .movie_wrap{
    padding: 0 6%;
  }
  .movie_link{
    margin-top: 40px;
  }
  .movie_link a picture img{
    width: 25%;
  }
  .movie_dandy{
    width: 20%;
    bottom: -14px;
    left: -4px;
  }
  .movie_brown{
    width: 11.5%;
    bottom: -12px;
    right: 4px;
  }
}


/************************
palace_wrap
************************/
.palace_wrap{
  position: relative;
  z-index: 100;
  margin-top: -5px;
}
.palace_wrap picture img{
  width: 100%;
}


/************************
bg
************************/
.top_bg_wrap{
  position: relative;
  background-image: url(../img/top_bg_stonewall.png);
  background-repeat: repeat-y;
  background-size: contain;
  background-position: center top;
  padding: 60px 0 90px;
  margin-top: -3%;
}
.left_pillar{
  position: absolute;
  top: 0;
  left: 0;
  background-image: url(../img/top_bg_left.png);
  background-repeat: repeat-y;
  background-size: contain;
  background-position: left top;
  width: 110px;
  height: 100%;
}
.right_pillar{
  position: absolute;
  top: 0;
  right: 0;
  background-image: url(../img/top_bg_right.png);
  background-repeat: repeat-y;
  background-size: contain;
  background-position: right top;
  width: 110px;
  height: 100%;
}

@media screen and (max-width:768px){
  .top_bg_wrap{
    padding: 70px 0 70px;
    margin-top: -7%;
  }
  .left_pillar{
    background-image: url(../img/top_bg_left_sp.png);
    width: 77px;
  }
  .right_pillar{
    background-image: url(../img/top_bg_right_sp.png);
    width: 77px;
  }
}

@media screen and (max-width:520px){
  .top_bg_wrap{
    padding: 30px 0 38px;
    margin-top: -8%;
  }
  .left_pillar{
    width: 38px;
  }
  .right_pillar{
    width: 38px;
  }
}


/************************
entry
************************/
.entry{
  padding: 0 10%;
}
.entry .inner{
  max-width: 800px;
  margin: 0 auto;
}
.entry .inner h2{
  text-align: center;
}
.entry .inner h2+p{
  color: #7d5728;
  font-size: 32px;
  font-weight: 800;
  text-align: center;
  transform: translateX(1%);
}
.entry .inner h2+p .big_txt{
  color: #e22102;
  font-size: 42px;
  text-shadow: -2px -2px 0 #FAF2D4, -2px 0 0 #FAF2D4, -2px 2px 0 #FAF2D4,
                  0 -2px 0 #FAF2D4,                  0 2px 0 #FAF2D4,
                2px -2px 0 #FAF2D4,  2px 0 0 #FAF2D4,  2px 2px 0 #FAF2D4;
  display: block;
  margin-bottom: 5px;
}

.present_cap{
  font-size: 22px;
  font-weight: 800;
  color: #7d5728;
  text-align: center;
}

.entry_pic{
  text-align: center;
  margin-top: 15px;
}

.pierre_modal{
  text-align: center;
}
.pierre_modal a{
  font-size: 20px;
  font-weight: 500;
  color: #fffcf7;
  background: #7d5728;
  border-radius: 40px;
  display: inline-block;
  padding: 18px 30px 14px;
}
.pierre_modal a:hover{
  font-weight: 700;
  color: #7d5728;
  background: #fffcf7;
  border: 3px solid #7d5728;
  padding: 15px 30px 11px;
}

.modaal-inner-wrapper{
  padding: 10px 50px 50px !important;
}
.modaal-container{
  background: #754c24 !important;
  border-radius: 50px !important;
  text-align: center !important;
  padding: 0 100px 50px !important;
  cursor: default !important;
}
.modaal-content-container{
  padding: 60px 0 0 !important;
}
.modaal-close{
  left: 76% !important;
  top: 3% !important;
}

.modal_wrap{
  display: none;
}
#modal_content{
  cursor: default;
  background: #754c24;
  border-radius: 50px;
  text-align: center;
  padding: 60px 100px 50px;
}
.modal_tit{
  min-width: 230px;
}
.modal_tit+p{
  color: #fff;
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.8;
  margin-top: 30px;
}
.modal_logo_01{
  min-width: 159px;
  margin-top: 15px;
}
.modal_flex{
  display: flex;
  justify-content: space-between;
  background: #fff;
  border-radius: 30px;
  max-width: 800px;
  padding: 55px 5%;
  margin: 100px auto 0;
}
.modal_logo_02{
  min-width: 183px;
  width: 31%;
  margin-right: 1em;
}
.modal_txt{
  font-family: 'Kiwi Maru', serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.8;
  text-align: left;
  width: 64%;
}
.modal_br{
  display: block;
}
.modal_txt p:nth-of-type(1) a{
  color: #d6000f;
  font-weight: 900;
}
.modal_txt p:nth-of-type(2){
  margin-top: 40px;
}

.present_btn{
  text-align: center;
  margin-top: 30px;
}
.present_btn a p{
  color: #fffffe;
  background: #e8471f;
  font-size: 28px;
  font-weight: 800;
  display: inline-block;
  border-radius: 40px;
  box-shadow: 0 7px 0 #894034;
  padding: 30px 40px;
}
.present_btn a:hover p{
  color: #e8471f;
  background: #fff;
  transition: .5s;
  animation: bounce 1s linear;
}
@-webkit-keyframes bounce {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  15% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  30% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
  50% {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
  }
  70% {
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes bounce {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  15% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  30% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
  50% {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
  }
  70% {
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@media screen and (max-width:992px){
  .modal_br{
    display: none;
  }

  .modaal-close{
    left: 87% !important;
    top: 3% !important;
  }
}

@media screen and (max-width:768px){
  .entry{
    padding: 0 8%;
  }
  .entry .inner h2{
    width: 92%;
    margin: 0 auto;
  }
  .entry .inner h2+p{
    font-size: 26px;
  }
  .entry .inner h2+p .big_txt{
    font-size: 34px;
  }

  .present_cap{
    font-size: 18px;
  }

  .entry_pic{
    width: 80%;
    margin: 20px auto 0;
  }

  .pierre_modal a{
    font-size: 18px;
    padding: 16px 30px 12px;
  }
  .pierre_modal a:hover{
    border: 2px solid #7d5728;
    padding: 14px 30px 10px;
  }

  .modaal-inner-wrapper{
    display: inline-block !important;
    height: auto !important;
    padding: 20px 30px 30px !important;
  }
  .modaal-container{
    border-radius: 30px !important;
    padding: 0 20px 30px !important;
  }
  .modaal-content-container{
    padding: 40px 0 0 !important;
  }
  .modaal-close{
    left: 87% !important;
    top: 3% !important;
  }

  #modal_content{
    border-radius: 30px;
    padding: 45px 20px 30px;
  }
  .modal_tit{
    width: 75%;
    margin: 0 auto;
  }
  .modal_tit+p{
    font-size: 18px;
    margin-top: 20px;
  }
  .modal_logo_01{
    width: 38%;
    margin: 20px auto 0;
  }
  .modal_flex{
    flex-direction: column;
    border-radius: 20px;
    padding: 30px 20px;
    margin-top: 30px;
  }
  .modal_logo_02{
    width: 100%;
    transform: translateX(-4%);
  }
  .modal_txt{
    font-size: 14px;
    width: 100%;
    margin-top: 40px;
  }
  .modal_txt p:nth-of-type(2){
    margin-top: 25px;
  }

  .present_btn a p{
    font-size: 24px;
    border-radius: 30px;
    padding: 24px 40px;
  }
}

@media screen and (max-width:520px){
  .entry .inner h2+p{
    font-size: 18px;
  }
  .entry .inner h2+p .big_txt{
    font-size: 21px;
  }
  .entry .inner p ruby rt{
    zoom: .6;
  }

  .present_cap{
    font-size: 14px;
  }

  .pierre_modal a{
    font-size: 13px;
    padding: 14px 12px 10px;
  }
  .pierre_modal a:hover{
    border: 1px solid #7d5728;
    padding: 13px 12px 9px;
  }

  .modaal-inner-wrapper{
    padding: 20px 25px 25px !important;
  }
  .modaal-container{
    border-radius: 20px !important;
    padding: 0 10px 20px !important;
  }
  .modaal-content-container{
    padding: 40px 0 0 !important;
  }
  .modaal-close{
    left: 82% !important;
    top: 3% !important;
  }

  #modal_content{
    border-radius: 20px;
    padding: 30px 10px 20px;
  }
  .modal_tit+p{
    font-size: 14px;
    text-align: left;
    margin-top: 15px;
  }
  .modal_logo_01{
    margin-top: 10px;
  }
  .modal_flex{
    padding: 20px;
    margin-top: 50px;
  }
  .modal_logo_02{
    width: 45%;
    margin: 0 auto;
    transform: translateX(-12%);
  }
  .modal_txt{
    font-size: 13px;
    margin-top: 25px;
  }
  .modal_txt p:nth-of-type(2){
    margin-top: 1em;
  }

  .present_btn a p{
    font-size: 24px;
    border-radius: 30px;
    padding: 24px 40px;
  }

  .present_btn a p{
    font-size: 13px;
    border-radius: 30px;
    padding: 15px 20px;
  }
}


/************************
remains
************************/
.remains{
  background-image: url(../img/top_bg_map.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  padding: 90px 8% 120px;
  margin-top: 30px;
}
.remains .inner{
  position: relative;
  text-align: center;
  max-width: 1200px;
  margin: 0 auto;
}
.remains .inner h2{
  text-align: center;
  transform: translateX(1%);
}
/* .remains .remains_puzzle{
  background-image: url(../img/top_puzzle_bg.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  text-align: center;
  max-width: 1061px;
  margin: 0 auto;
  padding: 30px 50px;
} */
.remains .remains_puzzle{
  position: relative;
  display: inline-block;
}
.remains .remains_puzzle img{
  display: block;
}
.remains .remains_puzzle img:nth-of-type(2){
  position: absolute;
  top: 9%;
  left: 50%;
  transform: translateX(-50%);
  width: 78%;
}

@media screen and (min-width:1624px){
  .remains{
    background-size: contain;
    background-position: center center;
  }
}

@media screen and (max-width:768px){
  .remains{
    padding: 60px 8% 120px;
  }
  .remains .inner{
    padding: 0 3%;
  }
  .remains .remains_puzzle{
    margin-top: 20px;
  }
}

@media screen and (max-width:520px){
  .remains{
    padding: 40px 8% 70px;
  }
  .remains .inner h2{
    width: 72%;
    margin: 0 auto;
  }
  .remains .remains_puzzle{
    margin-top: 10px;
  }
  .remains .inner .present_btn a p ruby rt{
    zoom: .6;
  }
}


/************************
back
************************/
.back_btn{
  text-align: center;
}
.back_btn a{
  position: relative;
}
.back_btn a p{
  color: #e8471f;
  background: #fff;
  font-size: 28px;
  font-weight: 800;
  display: inline-block;
  border-radius: 32px;
  box-shadow: 0 7px 0 #997652;
  padding: 30px 50px 30px 140px;
}
.back_btn a:hover p{
  color: #fff;
  background: #e8471f;
  transition: .5s;
  animation: bounce 1s linear;
}
.back_btn a:hover img{
  animation: bounce 1s linear;
}
.back_btn a img{
  position: absolute;
  bottom: -36px;
  left: 24px;
}

@media screen and (max-width:768px){
  .back_btn a p{
    font-size: 28px;
    border-radius: 30px;
    padding: 24px 50px 24px 130px;
  }
  .back_btn a img{
    bottom: -30px;
    left: 12px;
  }
}

@media screen and (max-width:520px){
  .back_btn a p{
    font-size: 14px;
    border-radius: 20px;
    padding: 14px 27px 14px 68px;
  }
  .back .inner .back_btn a p ruby rt{
    zoom: .6;
  }
  .back_btn a img{
    width: 18.4%;
    bottom: -15px;
    left: 10px;
  }
}


/************************
footer
************************/
footer{
  position: relative;
  margin-top: -40px;
}
.copyright{
  font-size: 15px;
  color: #7d5728;
  text-align: center;
}

@media screen and (max-width:768px){
  .copyright{
    font-size: 18px;
  }
}

@media screen and (max-width:520px){
  footer{
    margin-top: -30px;
  }
  .copyright{
    font-size: 10px;
  }
}


/************************
topBack_btn
************************/
#topBack_btn{
  display: none;
  position: fixed;
  bottom: 75px;
  right: -1px;
	z-index: 1000;
}

@media screen and (max-width:768px){
  #topBack_btn a img{
    max-width: 75px;
  }
}


/*********************************************
**********************************************
gift.php
**********************************************
*********************************************/

/************************
header
************************/
#sub_page_header{
  position: relative;
  z-index: 100;
}
#sub_page_header img{
  width: 100%;
}
#sub_page_header h1{
  position: absolute;
  top: 0;
  left: 3%;
}
#sub_page_header h1 a img{
  max-width: 185px;
}

@media screen and (max-width:1024px){
  #sub_page_header h1 a img{
    max-width: 138px;
  }
}

@media screen and (max-width:768px){
  #sub_page_header h1 a img{
    max-width: 92px;
  }
}

@media screen and (max-width:520px){
  #sub_page_header h1{
    left: 8%;
  }
  #sub_page_header h1 a img{
    max-width: 46px;
  }
}


/************************
sub_page_main
************************/
.sub_page_main{
  margin-top: 0;
}

@media screen and (max-width:768px){
  .sub_page_main{
    margin-top: -5%;
  }
}


/************************
sub_page_palace_wrap
************************/
.sub_page_palace_wrap{
  position: relative;
  z-index: 10;
  margin-top: -3.5%;
}
.sub_page_palace_wrap img{
  width: 100%;
}

@media screen and (max-width:1024px){
  .sub_page_palace_wrap{
    margin-top: -3.7%;
  }
}
@media screen and (max-width:768px){
  .sub_page_palace_wrap{
    margin-top: -3.9%;
  }
}
@media screen and (max-width:520px){
  .sub_page_palace_wrap{
    margin-top: -4.1%;
  }
}
@media screen and (max-width:440px){
  .sub_page_palace_wrap{
    margin-top: -4.3%;
  }
}
@media screen and (max-width:380px){
  .sub_page_palace_wrap{
    margin-top: -4.5%;
  }
}


/************************
sub_page_bg_wrap
************************/
.sub_page_bg_wrap{
  position: relative;
  background-image: url(../img/sub_page_bg_stonewall.png);
  background-repeat: repeat-y;
  background-size: contain;
  background-position: center top;
  padding: 100px 0;
  margin-top: -4.1%;
}

@media screen and (max-width:768px){
  .sub_page_bg_wrap{
    padding: 50px 0 100px;
  }
}
@media screen and (max-width:520px){
  .sub_page_bg_wrap{
    padding: 50px 0 70px;
  }
}


/************************
present
************************/
.present{
  padding: 0 10%;
}
.present .inner{
  max-width: 1000px;
  margin: 0 auto;
}
.present .inner h2{
  text-align: center;
}
.present_wrap{
  background: rgba(148, 92, 16, .6);
  border-radius: 40px;
	padding: 60px 30px 20px 30px;
  margin: 75px 0 90px;
}
.present_flex{
  display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.present_flex li{
	margin-bottom: 40px;
	width: 48%;
}
.present_flex li:nth-child(3n){
  margin-right: 0;
}
.present_flex li img{
  border-radius: 12px;
	width: 100%;
  margin-bottom: 15px;
}
.present_flex li p{
  color: #fae8cc;
  font-size: 20px;
  font-weight: bold;
  line-height: 1.2;
}
.pre_small_txt{
  color: #e8ca98;
  font-size: 14px;
  font-weight: bold;
}

@media screen and (max-width:1180px){
  .present_flex li:nth-child(odd){
    margin-right: calc((100% / 2 - 340px) * 2);
  }
  .present_flex li:nth-child(even){
    margin-right: 0;
  }
  .present_flex li img{
    width: 340px;
  }
}
@media screen and (max-width:1024px){
  .present_flex{
    width: 100%;
    justify-content: center;
  }
  .present_flex li,.present_flex li:nth-child(odd){
    margin-right: 0;
  }
  .present_flex li img{
    width: 532px;
  }
}
@media screen and (max-width:768px){
  .present_wrap{
    padding: 40px 40px 10px 40px;
    margin: 45px 0 60px;
  }
}
@media screen and (max-width:520px){
  .present_wrap{
    border-radius: 20px;
    padding: 25px 25px 0px 25px;
    margin: 45px 0 60px;
  }
  .present .inner h2{
    width: 50%;
    margin: 0 auto;
  }
  .present_flex li{
	width:100%;
    margin-bottom: 60px;
  }
  .present_flex li p{
    font-size: 18px;
  }
  .pre_small_txt{
    font-size: 12px;
  }
  
br.sp-none{display:none;}	

  
}



/*********************************************
**********************************************
form.php
**********************************************
*********************************************/

input[type="submit"] {
  appearance: none;
  -webkit-appearance: none;
}
select{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/************************
form
************************/
.form{
  padding: 0 10%;
}
.form .inner{
  max-width: 1000px;
  margin: 0 auto;
}
.form .inner h2{
  text-align: center;
}
.form_wrap{
  background: rgba(148, 92, 16, .7);
  border-radius: 40px;
  padding: 80px 6% 90px;
  margin: 80px 0 90px;
}

@media screen and (max-width:768px){
  .form_wrap{
    padding: 50px 4%;
    margin: 45px 0 60px;
  }
}

@media screen and (max-width:520px){
  .form .inner h2{
    width: 50%;
    margin: 0 auto;
  }
  .form_wrap{
    border-radius: 20px;
    padding: 25px 4%;
  }
}


/************************
.body_tbl(提供ソース)
************************/
.body_tbl{
  text-align: center;
}
.header_rmesg{
  color: #f2cc56;
  font-weight: bold;
  font-size: 20px;
  text-align: center;
  margin-bottom: 60px;
}
.header_emesg{
  display: inline-block;
  color: #e8471f;
  background: rgba(250 , 245, 232, .8);
  font-weight: bold;
  font-size: 20px;
  text-align: center;
  border: 3px solid #e8471f;
  padding: 5px 10px;
  margin-bottom: 60px;
}
.spOn{
  display: none;
}

.smp_tmpl,
.spiralSeal,
.privacy_txt_wrap{
  text-align: center;
  max-width: 780px;
  margin: 0 auto;
}
.smp_tmpl .cf{
  display: flex;
  margin-bottom: 25px;
}
.smp_tmpl .cf .data .cf{
  margin-bottom: 0;
}
.smp_tmpl .cf:last-child{
  margin-bottom: 0;
}
.smp_tmpl .cf .title{
  color: #f2cc56;
  font-weight: bold;
  font-size: 18px;
  width: 20%;
  text-align: right;
  margin-right: 20px;
}
.smp_tmpl .cf .title .need{
  color: #faf6e7;
  background: #e8471f;
  font-size: 12px;
  border-radius: 6px;
  padding: 1px 8px;
}
.smp_tmpl .cf .data{
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  text-align: left;
}

.smp_tmpl .cf .data .cf .code01 input[type="text"],
.smp_tmpl .cf .data .cf .code02 input[type="text"],
.smp_tmpl .cf .data select,
.smp_tmpl .cf .data input[type="text"]{
  display: block;
  background-color: #faf5e8;
  font-size: 16px;
  border: none;
  border-radius: 12px;
  width: 100%;
  padding: 20px;
}
/* input:invalid{
  background-color: #ffd7d7;
  border: 3px solid #ff5858;
} */
.smp_tmpl .cf .data .msg {
  color: #feb1b1;
  font-size: 12px;
  font-weight: bold;
}
.mail_chk_txt{
  color: #f2cc56;
  font-size: 16px;
  font-weight: bold;
  margin: 15px 0 3px;
}
.smp_tmpl .cf .data .cf .code01{
  width: 20%;
  margin-right: 10px;
}
.smp_tmpl .cf .data .cf .code02{
  width: 30%;
}
.smp_tmpl .cf .data .cf .num01{
  width: 20%;
  margin-right: 10px;
}
.smp_tmpl .cf .data .cf .num02{
  width: 30%;
  margin-right: 10px;
}
.smp_tmpl .cf .data .cf .num03{
  width: 30%;
}
.smp_tmpl .cf .data.integer input{
  width: 20%;
}
.smp_tmpl .cf .data .radio li label{
  position: relative;
  color: #f2cc56;
  font-size: 18px;
  font-weight: bold;
  overflow: hidden;
}
.smp_tmpl .cf .data .radio li label input{
  position: absolute;
  left: -999px;
}
.smp_tmpl .cf .data .radio li+li{
  margin-left: 20px;
}
.smp_tmpl .cf .data .radio li label input+span{
  position: relative;
  background-color: #faf6e7;
  vertical-align: middle;
  border-radius: 50%;
  display: inline-block;
  width: 27px;
  height: 27px;
  margin-top: -3px;
  margin-right: 10px;
}
.smp_tmpl .cf .data .radio li label input:checked+span:before{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #e8471f;
  border-radius: 50%;
  display: block;
  width: 14px;
  height: 14px;
}
.smp_tmpl .cf .data textarea {
  display: block;
  background-color: #faf5e8;
  font-size: 16px;
  font-weight: bold;
  border: none;
  border-radius: 12px;
  max-width: 564px;
  width: 100%;
  height: 200px;
  padding: 15px 20px;
}
.form_btn{
  text-align: center;
  margin-top: 50px;
}
input.submit{
  color: #fffffe;
  background: #e8471f;
  font-size: 20px;
  font-weight: 800;
  cursor: pointer;
  display: block;
  border: none;
  border-radius: 20px;
  box-shadow: 0 7px 0 #894034;
  padding: 20px 120px;
  margin: 50px auto 0;
}
input.submit:hover{
  color: #e8471f;
  background: #fff;
  transition: .5s;
  animation: bounce 1s linear;
}

@media screen and (max-width:768px){
  .header_rmesg{
    margin-bottom: 30px;
  }
  .header_emesg{
    margin-bottom: 30px;
  }
  .smp_tmpl .cf{
    flex-direction: column;
    margin-bottom: 15px;
  }
  .smp_tmpl .cf .data .cf{
    flex-direction: row;
  }
  .smp_tmpl .cf .title{
    text-align: left;
    width: 100%;
    margin-bottom: 5px;
  }
  .spOff{
    display: none;
  }
  .smp_tmpl .cf .data.integer input{
    width: 30%;
  }
  input.submit{
    margin: 25px auto 0;
  }
}

@media screen and (max-width:520px){
  .header_rmesg,
  .header_emesg{
    font-size: 12px;
    margin-bottom: 15px;
  }
  .smp_tmpl .cf .data .cf .code01 input[type="text"], .smp_tmpl .cf .data .cf .code02 input[type="text"], .smp_tmpl .cf .data select, .smp_tmpl .cf .data input[type="text"]{
    font-size: 14px;
    padding: 10px;
  }
  .smp_tmpl .cf .title{
    font-size: 16px;
  }
  .spOn{
    display: block;
  }
  .mail_chk_txt{
    font-size: 14px;
  }
  .smp_tmpl .cf .data .cf .code01{
    width: 25%;
    margin-right: 5px;
  }
  .smp_tmpl .cf .data .cf .code02{
    width: 35%;
  }
  .smp_tmpl .cf .data .cf .num01{
    width: 25%;
    margin-right: 5px;
  }
  .smp_tmpl .cf .data .cf .num02{
    width: 30%;
    margin-right: 5px;
  }
  .smp_tmpl .cf .data .cf .num03{
    width: 30%;
  }
  .smp_tmpl .cf .data.integer input{
    width: 25%;
  }
  .smp_tmpl .cf .data .radio{
    flex-direction: column;
  }
  .smp_tmpl .cf .data .radio li+li{
    margin-top: 15px;
    margin-left: 0;
  }
  .smp_tmpl .cf .data .radio li label{
    font-size: 16px;
  }
  .smp_tmpl .cf .data .radio li label input+span{
    width: 22px;
    height: 22px;
  }
  .smp_tmpl .cf .data textarea {
    font-size: 14px;
    padding: 10px 15px;
  }
  input.submit{
    font-size: 18px;
    border-radius: 12px;
    padding: 12px 80px;
  }
}


/************************
spiralSeal
************************/
.spiralSeal{
  background-color: #faf5e8;
  border-radius: 3px;
  overflow: hidden;
  margin: 60px auto 0px;
}
.spiralSeal tr td{
  text-align: left;
  padding: 10px 5px 10px 20px;
}
.spiralSeal tr td a{
  color: #0000ee;
  text-decoration: underline;
}

@media screen and (max-width:768px){
  .spiralSeal{
    margin: 40px auto 0;
  }
}


/************************
privacy
************************/
.privacy_title{
  color: #f9f2d4;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  margin-top: 60px;
}
.privacy_txt_wrap{
  color: #3d3936;
  background: #f9f2d4;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  border-radius: 12px;
  overflow: hidden;
  height: 205px;
  padding: 24px 18px 24px 20px;
  margin-top: 20px;
}
.privacy_txt{
  width: 100%;
  height: 100%;
  overflow-y: scroll;
}
.privacy_txt::-webkit-scrollbar{
  width: 6px;
}
.privacy_txt::-webkit-scrollbar-track{
  background: transparent;
}
.privacy_txt::-webkit-scrollbar-thumb{
  border-radius: 3px;
  background: #c1c1c1;
}

@media screen and (max-width:768px){
  .privacy_title{
    margin-top: 40px;
  }
}

@media screen and (max-width:520px){
  .privacy_title{
    font-size: 16px;
  }
  .privacy_txt_wrap{
    font-size: 12px;
    padding: 20px 14px 20px 16px;
  }
}


/*********************************************
**********************************************
ruins.php
**********************************************
*********************************************/

/************************
ruins
************************/
.sub_page_bg_wrap.ruins_wrap{
  padding: 50px 0 90px;
}
.ruins{
  padding: 0 10%;
}
.ruins .inner{
  max-width: 1000px;
  margin: 0 auto;
}
.ruins .inner h2{
  text-align: center;
}

.scene_pic{
  text-align: center;
  margin-top: 40px;
}
.scene_pic:first-of-type{
  margin-top: 0;
}
.scene_pic:last-child{
  margin-top: 10px;
}

/* .fadeUp {
  animation-name: fadeUpAnime;
  animation-duration:0.7s;
  animation-fill-mode:forwards;
  opacity: 0;
}
@keyframes fadeUpAnime{
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
} */

.animate__animated.animate__fadeInUp{
  animation-duration: 0.8s;
  animation-timing-function: cubic-bezier(0,.64,.82,.92);
  /* animation-delay: 0.3s; */
  opacity: 1 !important;
}
.fadeUp_point{
  opacity: 0;
}

.animate__animated.animate__tada{
  animation-duration: 0.8s !important;
  animation-timing-function: cubic-bezier(.81,0,.38,1);
  animation-delay: 0.7s;
  opacity: 1 !important;
  transition: 2s;
}
.fadeUp_a_point{
  opacity: 0;
}
.times{
  animation-iteration-count: 3;
}


@media screen and (max-width:768px){
  .sub_page_bg_wrap.ruins_wrap{
    padding: 40px 0 70px;
  }
  .ruins{
    padding: 0 12%;
  }
}

@media screen and (max-width:520px){
  .sub_page_bg_wrap.ruins_wrap{
    padding: 25px 0 60px;
  }
  .ruins{
    padding: 0 8%;
  }
  .ruins .inner h2{
    width: 50%;
    margin: 0 auto;
  }
}


/************************
chat_area
************************/
.chat_area{
  position: relative;
  background: rgba(148, 92, 16, .7);
  border-radius: 40px;
  padding: 50px 50px 90px 50px;
  margin-top: 40px;
}
.chat_area:last-child{
  position: relative;
  margin-bottom: 135px;
  z-index: 0;
}

.voice{
  position: relative;
  padding-top: 50px;
}
.voice.voice_right{
  text-align: right;
}
.voice+.voice{
  margin-top: 15px;
}

.voice p{
  background-color: #faf5e8;
  font-size: 18px;
  font-weight: bold;
  line-height: 1.8;
  display: inline-block;
  border-radius: 12px;
  padding: 30px 45px 30px 60px;
  margin-left: 70px;
}
.voice.voice_right p{
  padding: 30px 60px 30px 45px;
  margin-right: 50px;
}
.voice.bg_txt p,
.voice.voice_right.bg_txt p{
  font-size: 28px;
  font-weight: 900;
  padding: 20px 60px 20px 45px;
}

.voice.standby {
  visibility: hidden;
}
.voice.standby p {
  -webkit-transform: scale(0);
  transform: scale(0);
}
.voice.scene_pic.standby img {
  -webkit-transform: scale(0);
  transform: scale(0);
}
.voice.standby.fadein {
  visibility: visible;
}
.voice.standby.fadein p {
  -webkit-transition: all 300ms cubic-bezier(0.165, 0.84, 0.44, 1);
  -webkit-transform: scale(1);
  transform: scale(1);
  transition: all 300ms cubic-bezier(0.165, 0.84, 0.44, 1);
}
.voice.scene_pic.standby.fadein img {
  -webkit-transition: all 300ms cubic-bezier(0.165, 0.84, 0.44, 1);
  -webkit-transform: scale(1);
  transform: scale(1);
  transition: all 300ms cubic-bezier(0.165, 0.84, 0.44, 1);
}

.mt_90{
  margin-top: 90px !important;
}

.voice img{
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
}
.voice.voice_right img{
  position: absolute;
  top: 0;
  left: auto;
  right: 0;
}
.voice.scene_pic{
  padding-top: 0;
}
.voice.scene_pic img{
  position: static;
  width: auto;
}

.voice.scene_pic.mt_-10{
  margin-top: -10px;
  z-index: -1;
}
.voice.scene_pic.mt_40{
  margin-top: 40px;
}
.mb_-170{
  position: absolute;
  bottom: -2.7%;
  left: 50%;
  transform: translateX(-50%);
}

@media screen and (max-width:768px){
  .chat_area{
    border-radius: 20px;
    padding: 50px 15px 90px 15px;
  }
  .chat_area:last-child{
    margin-bottom: 100px;
  }

  .voice p{
    font-size: 16px;
    padding: 20px 25px 20px 35px;
    margin-left: 40px;
  }
  .voice.voice_right p{
    padding: 20px 40px 20px 20px;
    margin-right: 35px;
  }
  .voice.bg_txt p,
  .voice.voice_right.bg_txt p{
    font-size: 22px;
    padding: 20px 40px 20px 35px;
  }

  .voice img{
    width: 80px;
  }

  .voice.scene_pic img{
    max-width: 90%;
  }
  .scene_pic.mb_-170{
    width: 50%;
    bottom: -1.5%;
  }
}

@media screen and (max-width:520px){
  .chat_area{
    padding: 25px 5px 40px 5px;
  }
  .chat_area:last-child{
    margin-bottom: 80px;
  }

  .voice p{
    font-size: 14px;
    padding: 18px 15px 18px 20px;
    margin-left: 32px;
  }
  .voice.voice_right p{
    padding: 18px 30px 18px 20px;
    margin-right: 25px;
  }
  .voice.bg_txt p, .voice.voice_right.bg_txt p{
    font-size: 18px;
    padding: 20px 25px 20px 20px;
  }

  .voice img{
    width: 65px;
  }

  .scene_pic.mb_-170{
    min-width: 174px;
    width: 50%;
    bottom: -1.5%;
  }
}



/*********************************************
**********************************************
confirmation.php
**********************************************
*********************************************/

.confirmation{
  padding: 0 10%;
}

.confirmation .inner{
  max-width: 1000px;
  margin: 0 auto;
}

.confirmation_wrap{
  background: rgba(148, 92, 16, .7);
  border-radius: 40px;
  padding: 80px 12% 90px;
  margin: 0 0 90px;
}

@media screen and (max-width:768px){
  .confirmation_wrap{
    padding: 50px 8%;
    margin: 45px 0 60px;
  }
}

@media screen and (max-width:520px){
  .confirmation_wrap{
    border-radius: 20px;
    padding: 40px 8% 25px;
    margin: 0 0 60px;
  }
}


/************************
.body_tbl(提供ソース)
************************/

.confirmation_wrap .body_tbl .smp_tmpl .cf{
  margin-bottom: 40px;
}

.confirmation_wrap .body_tbl .smp_tmpl .cf .data{
  color: #faf5e8;
  font-size: 18px;
}

.confirmation_wrap .body_tbl .submit_btn_wrap{
  display: flex;
  justify-content: center;
}

.confirmation_wrap .body_tbl input.submit{
  margin: 50px 0 0;
}

.confirmation_wrap .body_tbl input.submit:first-child{
  background: #e0ad2c;
  box-shadow: 0 7px 0 #894336;
  margin-right: 32px;
}

.confirmation_wrap .body_tbl input.submit:first-child:hover{
  color: #e8c15b;
  background: #fff;
}

@media screen and (max-width:768px){
  .confirmation_wrap .body_tbl .submit_btn_wrap{
    flex-direction: column-reverse;
  }

  .confirmation_wrap .body_tbl input.submit{
    max-width: 280px;
    margin: 50px auto 0;
  }

  .confirmation_wrap .body_tbl input.submit:first-child{
    margin: 50px auto 0;
  }
}

@media screen and (max-width:520px){
  .confirmation_wrap .body_tbl input.submit{
    margin: 30px auto 0;
  }

  .confirmation_wrap .body_tbl input.submit:first-child{
    margin: 30px auto 0;
  }
}



/*********************************************
**********************************************
error.php
**********************************************
*********************************************/

.error{
  padding: 0 10%;
}

.error .inner{
  max-width: 1000px;
  margin: 0 auto;
}

.error_wrap{
  background: rgba(148, 92, 16, .7);
  border-radius: 40px;
  padding: 70px 12%;
  margin: 0 0 50px;
}

@media screen and (max-width:768px){
  .error_wrap{
    padding: 50px 8%;
    margin: 45px 0 50px;
  }
}

@media screen and (max-width:520px){
  .error_wrap{
    border-radius: 20px;
    padding: 40px 4% 25px;
    margin: 0 0 280px;
  }
}


/************************
.body_tbl(提供ソース)
************************/

.error_wrap .body_tbl .smp_tmpl .sub_text .error_txt_big{
  color: #e8471f;
  font-size: 32px;
  font-weight: 800;
  text-shadow:1px 1px 0 #faf5e8, -1px -1px 0 #faf5e8,
  -1px 1px 0 #faf5e8, 1px -1px 0 #faf5e8,
  0px 1px 0 #faf5e8,  0-1px 0 #faf5e8,
  -1px 0 0 #faf5e8, 1px 0 0 #faf5e8;
  display: inline-block;
  transform: translateX(8px);
  margin-bottom: 20px;
}

.error_wrap .body_tbl .smp_tmpl .sub_text .error_txt_mid{
  color: #faf5e8;
  font-size: 18px;
}

@media screen and (max-width:520px){
  .error_wrap .body_tbl .smp_tmpl .sub_text .error_txt_big{
    font-size: 22px;
  }
  .error_wrap .body_tbl .smp_tmpl .sub_text .error_txt_mid{
    font-size: 16px;
  }
}



/*********************************************
**********************************************
thanks.php
**********************************************
*********************************************/

.thanks{
  padding: 0 10%;
}

.thanks .inner{
  max-width: 1000px;
  margin: 0 auto;
}

.thanks .inner h2{
  text-align: center;
}
.thanks_wrap{
  background: rgba(148, 92, 16, .7);
  border-radius: 40px;
  padding: 75px 12%;
  margin: 20px 0 50px;
}

@media screen and (max-width:768px){
  .thanks_wrap{
    padding: 50px 8%;
    margin: 25px 0 50px;
  }
}

@media screen and (max-width:520px){
  .thanks .inner h2{
    width: 85%;
    margin: 0 auto;
  }
  .thanks_wrap{
    border-radius: 20px;
    padding: 45px 4%;
    margin: 45px 0 300px;
  }
}

.error_txt_big3{
  color: #e8471f;
  font-size: 32px;
  font-weight: 800;
  text-shadow:1px 1px 0 #faf5e8, -1px -1px 0 #faf5e8,
  -1px 1px 0 #faf5e8, 1px -1px 0 #faf5e8,
  0px 1px 0 #faf5e8,  0-1px 0 #faf5e8,
  -1px 0 0 #faf5e8, 1px 0 0 #faf5e8;
  display: block;
  transform: translateX(8px);
  margin: 0 auto;
  text-align:center;
}



@media screen and (max-width:780px){
  .error_txt_big3{
    color: #e8471f;
    font-size: 24px;
    font-weight: 800;
    text-shadow:1px 1px 0 #faf5e8, -1px -1px 0 #faf5e8,
    -1px 1px 0 #faf5e8, 1px -1px 0 #faf5e8,
    0px 1px 0 #faf5e8,  0-1px 0 #faf5e8,
    -1px 0 0 #faf5e8, 1px 0 0 #faf5e8;
    display: block;
    transform: translateX(8px);
    margin-bottom: 20px;
    margin: 0 auto;
    text-align:center;
  }

  .error_txt_mid3{
    color: #faf5e8;
    font-size: 18px;
  }
}


.sp_ml{
    margin-top: unset;margin-bottom: unset;
}

@media screen and (max-width:520px){
  .sp_ml{
    margin-top: -250px;
    margin-bottom: 170px;
  }
}






/************************
.body_tbl(提供ソース)
************************/

.thanks_wrap .body_tbl .smp_tmpl .sub_text{
  color: #faf5e8;
  font-size: 18px;
  text-align: left;
}



@media screen and (max-width:520px){
  .thanks_wrap .body_tbl .smp_tmpl .sub_text{
    font-size: 16px;
  }
}


.confirmation .cf .data{color:#FFF;}


.mT0{margin-top:0px !important;}
.mT10{margin-top:10px;}
.mT15{margin-top:15px;}
.mT20{margin-top:20px;}
.mT30{margin-top:30px;}
.mT40{margin-top:40px;}
.mT50{margin-top:50px;}
.mT60{margin-top:60px;}
.mT70{margin-top:70px;}
.mT80{margin-top:80px;}
.mT90{margin-top:90px;}
.mT100{margin-top:100px;}

.mB0{margin-bottom:0px !important;}
.mB10{margin-bottom:10px;}
.mB15{margin-bottom:15px;}
.mB20{margin-bottom:20px;}
.mB30{margin-bottom:30px;}
.mB40{margin-bottom:40px;}
.mB50{margin-bottom:50px;}
.mB60{margin-bottom:60px;}
.mB70{margin-bottom:70px;}
.mB80{margin-bottom:80px;}
.mB90{margin-bottom:90px ;}
.mB100{margin-bottom:100px;}

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


.present_flex li p.gift-01{background-color:#ffa800;font-size:1.25em;padding:5px 15px;color:#FFF;display:inline-block;border-radius:30px;margin:10px 0 15px;}	
.present_flex li p.gift-02{font-size:0.875em;font-weight: normal;margin:0 0 5px 0;}