/*--------------------------------------
背景関係CSS
---------------------------------------*/

.bg_hotel_01 {
  background-image:url("../img/hotel/bg_hotel_pattern01.jpg");
  width: 100%;
}

.bg_hotel_02 {
  background-image:url("../img/hotel/bg_hotel_pattern02.png");
  width: 100%;
}


.bg_hotel_03 {
  background-image: linear-gradient(0deg, rgba(197, 154, 255, 1),rgba(232, 203, 255, 1)  );
width: 100%;
}


.bg_wanpuri_01 {
 background-image:url("../img/hotel/bg_wanpuri.png");
  width: 100%;
}


.bg_wan_pink {
  background: #e73886;
}



.hotel_sen_pink {
line-height: 0;
background: #e73886;
width: 100%;
height: 30px;
z-index: 1;
}






/* 背景枠関係 */

.bg_padding {
  padding-left: 15px;
  padding-right: 15px;
  margin-bottom: 30px;
}
.bg_padding02 {
  padding-left: 45px;
  padding-right: 45px;
  margin-bottom: 30px;
}

.bg_box {
	background-color:#FFFFFF;
    border-radius: 25px;
	padding:3%;
}




/*--------------------------------------
ボタン系CSS
---------------------------------------*/

.btn_pink {
 
margin: 0 auto;
  width: 100%;
  max-width:800px;
  display: block;
text-align: center;
  line-height: 1.5;
  font-size: 140%;
  border-radius: 60px;
   padding: 2%;
  font-weight: bold;
  transition: 0.3s;
  background-color: #e73886;
}

.btn_pink a{
   text-decoration: none!important;
    color: #ffffff;
    display: block;
}


.btn_pink:hover {
  opacity: 0.7;
  
}




.btn_blue {
 
margin: 0 auto;
  width: 100%;
  max-width:800px;
  display: block;
text-align: center;
  line-height: 1.5;
  font-size: 140%;
  border-radius: 60px;
   padding: 2%;
  font-weight: bold;
  transition: 0.3s;
  background-color: #2781ea;
}

.btn_blue a{
   text-decoration: none!important;
    color: #ffffff;
    display: block;
}


.btn_blue:hover {
  opacity: 0.7;
  
}



/* 599px以下に適用 */
@media screen and (max-width: 599px) {
  .bg_kadomaru {
    border-radius: 1rem;
    padding: 10px;
  }
	
    
.btn_pink {
     width: 100%;
    max-width: 700px;
  display: block;
    text-align: center;
  line-height: 1.5;
  font-size: 110%;
  border-radius: 40px;
    padding: 4%;
  font-weight: bold;
  transition: 0.3s;
  background-color: #e73886;
}   
	
	
.btn_blue {
     width: 100%;
    max-width: 700px;
  display: block;
    text-align: center;
  line-height: 1.5;
  font-size: 110%;
  border-radius: 40px;
    padding: 4%;
  font-weight: bold;
  transition: 0.3s;
  background-color: #2781ea;
}   
    
    
}



	
/*--------------------------------------

---------------------------------------*/
	



/* あれルギースマホ表示*/
@media only screen and (max-width: 599px) {
  .alg_pc {
    display: none !important;
    padding: 0% 5%;
  }
  .alg_sp {
    display: block !important;
    padding: 0% 5%;
  }

.bg_box {
	padding:2%;
}
}
/* 600px以上に適用 */
@media screen and (min-width: 600px) {
  .at_img {
    width: 55%;
    height: auto;
    align-self: flex-start;
  }
  .gd_img {
    width: 50%;
    height: auto;
    text-align: center;
    padding: 3%;
    align-self: flex-start;
  }
  .contents {
    align-items: center;
  }
  .g_contents {
    align-items: center;
  }
  .g_contents_2 {
    max-width: 50%;
  }
  /* パソコンで見たときは"pc"のclassがついた画像が表示される */
  .alg_pc {
    display: block !important;
      padding: 0% 10%;
  }
  .alg_sp {
    display: none !important;
  }
    
    
  .txt_box{
      display: flex;
      justify-content: center;

}

  .at_p{
    font-size: 1.6rem;
    line-height: 1.4;
    word-break: keep-all;

    }
    
.kadomaru_txt{

 border-radius: 100px;
 padding: 2%;
 text-align: center;
 margin:8% 30% 5% 30%;
}
    
.txt_big_2 {
  font-size: 220%;
    font-weight: 900;
    letter-spacing: 0.1em;
    line-height: 2em;
}        
}

/* 768px以上に適用 */
@media screen and (min-width: 768px) {
  .at_img {
    width: 60%;
    height: auto;
    align-self: flex-start;
  }
  .gd_img {
    width: 55%;
    height: auto;
    padding: 2%;
    text-align: center;
    align-self: flex-start;
  }
  .g_contents {
    align-items: center;
    padding-right: 5%;
    padding-left: 5%;
  }

}
/* 1000px以上に適用 */

/* 背景枠 角をベベル */
.bg_beberu {
  background: #FFFFFF; /* fallback */
  background:
    linear-gradient(135deg, transparent 20px, #FFFFFF 0) top left, linear-gradient(225deg, transparent 20px, #FFFFFF 0) top right, linear-gradient(315deg, transparent 20px, #FFFFFF 0) bottom right, linear-gradient(45deg, transparent 20px, #FFFFFF 0) bottom left;
  background-size: 60% 60%;
  background-repeat: no-repeat;
}
.bg_kadomaru {
  border-radius: 10px;
  padding: 2%;
}


.kadomaru_box{
    width: min(100% - 2rem, 640px);
    margin-inline: auto;
    border: #8ca1ff;
    border-radius: 3%;
        
}
.info_box {
  background: #A5A5A5;
  padding: 15px 15px 15px 15px;
  margin: 15px 15px 15px 15px;
}
.info_box02 {
  background: #A5A5A5;
  padding: 15px 15px 15px 15px;
}
.shadow {
  box-shadow: 5px 5px 5px #000000;
}
.naka {
  width: 90%;
  margin-right: auto;
  margin-left: auto;
}
.wakusen {
  border: 0.1em solid #8ca1ff;
   
}
.wakusen2 {
  border-style: solid;
  border-width: 2px;
  border-color: #D40000
}




/* スペシャルイベントのオブジェクトをセンター配置 */
.spevent_object {
  text-align: center;
}
/* 文字 */
a {
  color: #9A2822;
  text-decoration: underline;
}

/* AT説明文 */

.at_p{
    font-size:1rem;
    line-height: 2;
    word-break: keep-all;
    
}

.p_layout {
  padding: 0 10%;
}
/* タイトル */
.title {
  position: relative;
  width: 100%;
  height: auto;
}
.title_ {
  position: absolute;
  left: 40%;
  top: 50px;
}







/* youtube 縦横比率固定 */
.movie {
  width: 100%; /* 横幅変更 */
  padding: 0;
  box-sizing: border-box;
}
.movie-wrap {
  width: 100%;
  position: relative;
  padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
  height: 0;
  overflow: hidden;
}
.movie-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}





/* ゆらゆら */
.yurayura {
  animation: wobbling_x 0.8s ease-in-out infinite alternate, wobbling_y 1.1s ease-in-out infinite alternate;
}
.dokidoki {
  animation: anime1 0.5s ease 0s infinite alternate;
  transform-origin: center;
}


/* キラッとひかる*/
.reflection{
display:inline-block;
position:relative;
overflow:hidden;
}
 
.reflection:after {
content:"";
height:100%;
width:40px;
position:absolute;
top:-180px;
left:0;
background-color: #fff;
opacity:0;
-webkit-transform: rotate(45deg);
-webkit-animation: reflection 1.5s ease-in-out 1;
}


 
@keyframes reflection {
0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}

/* 下からふわり*/
.under_fuwa{
    opacity: 0;
    visibility: hidden;
    transform: translateY(50px);
    transition: opacity 1s,visibility 1s, transform 1s;
}

.inview {
    opacity: 1;
    visibility: visible;
    transform: translateY(0px);
}

.txt_box{
    word-break: keep-all;
}
@keyframes anime1 {
  from {
    transform: scale(0.95, 0.95);
  }
  to {
    transform: scale(1, 1);
  }
}
.bound {
  animation: bound .8s linear infinite;
}
@keyframes bound {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(50px);
  }
  100% {
    transform: translateY(0px) scaleY(0.5);
  }
}
/*ボタン*/
.box {
  position: relative;
  text-align: center
}
.button {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  position: absolute;
  top: 65%;
  left: 58%;
}
.top_copy {
  position: absolute;
  top: 2%;
  left: 24%;
  animation: poyoyon2 1s ease-in-out 1 forwards;
}
@keyframes poyoyon2 {
  0% {
    transform: scale(1.0, 1.0) translate(0, 0);
  }
  15% {
    transform: scale(0.98, 0.9) translate(0, 5px);
  }
  30% {
    transform: scale(1.02, 1.0) translate(0, 8px);
  }
  50% {
    transform: scale(0.98, 1.05) translate(0, -8px);
  }
  70% {
    transform: scale(1.0, 0.9) translate(0, 5px);
  }
  100% {
    transform: scale(1.0, 1.0) translate(0, 0);
  }
  0%, 100% {
    opacity: 1;
  }
}
.top_copy2 {
  position: absolute;
  bottom: -4%;
  right: 4%;
  animation: slideIn 1s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;

}
@keyframes slideIn {
  0% {
    transform: translateX(180px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
  40%, 100% {
    opacity: 1;
  }
    
}
.content-wrapper_gr {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 32px;
  background-color: #9de6c8;
  border-radius: 30px;
  position: relative;
}
.hotel_plan_tit {
  text-align: center;
  position: absolute;
  top: -5%;
}
.hotel_plan_btn:hover {
  -webkit-transform: translateY(-5px);
  -ms-transform: translateY(-5px);
  transform: translateY(-5px);
}
.sirofuchi {
  color: #000;
  text-shadow: 1px 1px 0 #FFF, -1px -1px 0 #FFF, -1px 1px 0 #FFF, 1px -1px 0 #FFF, 0px 1px 0 #FFF, 0-1px 0 #FFF, -1px 0 0 #FFF, 1px 0 0 #FFF;
}
.hotel_txt {
  padding-top: 20%;
}
.race {
  position: relative;
}
.food3 {
  background-image: url("../img/top/p_precure_top_27.png");
  background-repeat: no-repeat;
  background-size: 100%;
  background-attachment: fixed;
}


.star {
  background-image: url("../img/spe/p_precure_spe_15.png");
  background-repeat: no-repeat;
  background-size: 100%;
  background-attachment: fixed;
}
.contents {
  display: flex;

}


.g_contents {
  display: flex;
  justify-content: center;
}
.map_area {
  max-width: 100%;
  padding: 3% 0%;
  box-sizing: border-box;
}
.map_area img {}
.obi {
  padding: 5%;
}
.top_img {
  position: relative;
  overflow: hidden;
   vertical-align: bottom;
   

}    
.top_img_spe {
  width: 30%;
  position: absolute;
  top: 17%;
  right: 15%;
  animation: poyoyon2 1s ease-in-out 1 forwards;
}
.top_img_spe {
  width: 30%;
  position: absolute;
  top: 10%;
  right: 9%;
  animation: poyoyon2 1s ease-in-out 1 forwards;
}
@keyframes poyoyon2 {
  0% {
    transform: scale(1.0, 1.0) translate(0, 0);
  }
  15% {
    transform: scale(0.98, 0.9) translate(0, 5px);
  }
  30% {
    transform: scale(1.02, 1.0) translate(0, 8px);
  }
  50% {
    transform: scale(0.98, 1.05) translate(0, -8px);
  }
  70% {
    transform: scale(1.0, 0.9) translate(0, 5px);
  }
  100% {
    transform: scale(1.0, 1.0) translate(0, 0);
  }
  0%, 100% {
    opacity: 1;
  }
}


.fuwa_comeout {

  animation: fadeIn 0.5s ease 1s 1 normal backwards;
}
 
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.poyon {
  animation: poyon 1.1s linear 0s 1;
}

@keyframes poyon {
  0%   { transform: scale(0.8, 1.4) translate(0%, -100%); }
  10%  { transform: scale(0.8, 1.4) translate(0%, -15%); }
  20%  { transform: scale(1.4, 0.6) translate(0%, 30%); }
  30%  { transform: scale(0.9, 1.1) translate(0%, -10%); }
  40%  { transform: scale(0.95, 1.2) translate(0%, -30%); }
  50%  { transform: scale(0.95, 1.2) translate(0%, -10%); }
  60%  { transform: scale(1.1, 0.9) translate(0%, 5%); }
  70%  { transform: scale(1.0, 1.0) translate(0%, 0%); }
  100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}

.fuwafuwa {
  animation: fuwafuwa 2s infinite ease-in-out;
}

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

@keyframes fuwafuwa {
  0% {transform: translate(0, 0);}
  50% {transform: translate(0, -7px);}
  100% {transform: translate(0, 0);}
}

.korokoro {
  animation: korokoro 2.5s linear 0s 1;
}

@keyframes korokoro {
  0%   { transform: translate(0%, 0%); }
  5%   { transform: translate(10%, 0%) rotate(10deg); }
  25%  { transform: translate(20%, 0%) rotate(20deg); }
  30%  { transform: translate(-10%, 0%) rotate(-10deg); }
  35%  { transform: translate(-15%, 0%) rotate(-15deg); }
  45%  { transform: translate(10%, 0%) rotate(10deg); }
  50%  { transform: translate(15%, 0%) rotate(15deg); }
  60%  { transform: translate(-5%, 0%) rotate(-5deg); }
  65%  { transform: translate(-7%, 0%) rotate(-7deg); }
  75%  { transform: translate(0%, 0%) rotate(0deg); }
  100% { transform: translate(0%, 0%) rotate(0deg); }
}

.slidein {
   transform: translate(0, 0)!important;
    opacity: 1!important;
    transition: all 1.0s;
}
Resources
.goods_box {
  position: relative;
  width: 100%;
  margin: 0 auto;
}
.top_img_a {
  width: 47%;
  position: absolute;
  top: 22%;
  right: 7%;

}
.product_name {
  position: absolute;
  bottom: 18%;
  left: 16%;
}
.p_box {
  max-width: 930px;
  padding: 2%;
}
.heart_race {
  background-color: #FFA3C4;
  padding: 3%;
  text-align: center;
}
.heart1 {
  background-image: url("../img/spe/p_precure_spe_09.png");
  background-repeat: no-repeat;
  background-size: 100%;
  position: absolute;
}
.top_img_g {
  width: 32%;
  position: absolute;
  top: 15%;
  right: 13%;
  animation: poyoyon2 1s ease-in-out 1 forwards;
}








/*--------------------------------------
コラボルーム 本文左右組み替え
---------------------------------------*/

.media{
min-height:1px;
display: flex;
	
}



@media (max-width:767px){


.media01{
flex-direction: column;
}
	
.media02{

flex-direction:column-reverse;
}
	
	
	
}



.media_01_r{
width:90%;
float: none;
margin: 0 5%;
}


.media_02_l{
width:90%;
float: none;
margin: 0 5%;
}




@media (min-width:768px){
	

.media_01_l{
width:60%;
height:auto;
float:left;
}


.media_01_r{
width:40%;
height:auto;
float:left;
margin:  0;
}




.media_02_l{
width:40%;
height:auto;
float:left;
margin: 0;
}


.media_02_r{
width:60%;
height:auto;
float:left;
}



}




 /*--------------------------------------
スマホの時だけ改行
---------------------------------------*/
.sma{
    display: none;
}

@media screen and (max-width:768px) {
    .sma{
        display: block;
    }
}



/* ホテルボタン　*/

.wan_hotel_btn{
	position:relative;
	top:0;
}
.wan_hotel_btn:hover{
	top:-10px;
	transition:0.3s;
}