@charset "utf-8";


/*animate.css*/
.animate__delay-05s {
 animation-delay: calc(var(--animate-delay) * 0.5);
}
.animate__delay-08s {
 animation-delay: calc(var(--animate-delay) * 0.8);
}
.animate__delay-13s {
 animation-delay: calc(var(--animate-delay) * 1.3);
}
.animate__delay-16s {
 animation-delay: calc(var(--animate-delay) * 1.6);
}
/*animateここまで*/






html {
    overflow-x: hidden;
    
}

body {
    overflow-x: hidden;
    
font-size:16pt;

  font-style: normal;
margin:0;
}
main{
width:1200px;
margin:auto;
}
.um_top{
background: url(../um_images/top_bg.png);
position: relative;
padding-bottom:7%;
 text-align:center;
background-repeat:no-repeat;
background-position:top -5rem center;
background-size:cover;
z-index:0;

}
h2.top_txt{
color:#d8455f;
font-size:2vw;
}
h3.top_txt{
color:#6c431e;
font-size:1.2vw;
}
.meika{
 position: absolute;
right:15%;
animation-iteration-count: 1;
}
.um_logo{

padding-top:4vh;
}
.um_logo img{
width:18vw;
 animation: zoomIn 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
 
@keyframes zoomIn {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/*sec01*/
.sec01{
background: url(../um_images/bokashi_900.png),url(../um_images/bg_1.png);
    padding-bottom: 38vw;
    background-size:60vw,100%;
    background-position:center right,bottom center;
background-repeat:no-repeat;
  position: relative;
z-index:-1;
  animation: appearance 1s ;
}


.sec01:before {
  content: "";        
  width: 15%;         
  height: 100%;        
  display: block;     
  background: linear-gradient(to right,rgba(255,255,255,0) 0, #fff 80%); 
  position: absolute; 
  top: 0;
  right: 0;

  
}

@keyframes appearance {
   0% {
       opacity: 0;
   }
   50% {
       opacity: 0.5;
   }
   100% {
      opacity: 1;
   }
}

.sec01:after {
  content: "";        
  width: 15%;        
  height: 100%;        
  display: block;     
  background: linear-gradient(to left,rgba(255,255,255,0) 0, #fff 80%);
  position: absolute;  /*  */
  top: 0;
  left: 0;
}
.sec01_cont{
width:1200px;
margin:0 auto;
max-width:100%;
}
.sec01_flex{
/*display:flex;
    justify-content: space-around;
    align-items: center;*/
}

.sec01 p{
color:#d8455f;
font-size:135%;
line-height:1.8;
    width: 40%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.sec01_img img{
width:100%;
}

.sec02{
position: relative;
    padding: 3rem 0 6rem 0;
    background: url(../um_images/bg_2.png) no-repeat;
    background-position: bottom 10rem center;
    background-size: 40%;
}
.sec02:after{
background: radial-gradient(circle farthest-side, #ed93b7, #ed93b7 5px, transparent 5px, transparent 10px);
    background-size: 27px 11px;
    background-position: left bottom;
    background-repeat: repeat-x;
    content: '';
    display: inline-block;
    height: 27px;
    width: 100%;
 
}
.sec02_1{
position: relative;
max-width: 1200px;
    margin: auto;
    padding: 0 0 6rem 0;

}

.sec02_0{
    position: relative;
    color: #fff;
    left: 15%;
    z-index: 1;
    font-size: 100%;
    line-height: 1.6;
    top: 2rem;
}
.sec02_0:before{
    background: url(../um_images/bg_red.png) no-repeat;
    position: absolute;
    content: "";
    width: 300px;
    height: 300px;
    background-size: cover;
    top: -92%;
    left: -7%;
    z-index: -1;
  
}

.sec02_2{
text-align:center;
    padding-top: 3rem;

}
.sec02_2_1,.sec02_2_2,.sec02_2_3{
width:30%;
color:#6c431e;
}
.sec02_2_1 span,.sec02_2_2 span,.sec02_2_3 span{
font-size:110%;
font-weight:500;
}
.sec02_2_1{
 position: absolute;
   right: 20%;
top:0;
font-size:105%;
 }

.sec02_2_1:before{
position: absolute;
    content: "";
    border-top: 2px solid #6c431e;
    width: 87px;
    height: 1px;
    bottom: -46px;
    left: 0;
    transform: rotate(-45deg);

}
.sec02_2_2{
 position: absolute;
right: -1%;
    top: 26%;
font-size:105%;
 }
.sec02_2_2:before{
    position: absolute;
    content: "";
    border-top: 2px solid #6c431e;
    width: 156px;
    height: 1px;
    top: 79%;
    left: -65%;
    transform: rotate(-15deg);

}
.sec02_2_3{
    position: absolute;
    right: 1%;
    top: 69%;
font-size:105%;
 }
.sec02_2_3:before{
position: absolute;
    content: "";
    border-top: 2px solid #6c431e;
    width: 156px;
    height: 1px;
    top: -20%;
    left: -70%;
    transform: rotate(31deg);
}

.sec03_1 {
position: relative;
max-width: 1200px;
    margin: auto;
padding-bottom:5rem;
}
.sec03_2{
display: flex;
    justify-content: space-between;
   justify-content: flex-end;
}
.sec03_3{
display: flex;
    flex-direction: column;
    align-items: center;
position: relative;
}
.sec03_3 span {
    font-size: 200%;
    height: 394px;
    position: absolute;
    color: #d8455f;
    width: 65px;
    left: 213px;
    top: 38px;
    transform-origin: bottom center;
	}
  .char1 { transform: rotate(-44deg); }
  .char2 { transform: rotate(-37deg); }
  .char3 { transform: rotate(-30deg); }
  .char4 { transform: rotate(-23deg); }
  .char5 { transform: rotate(-16deg); }
  .char6 { transform: rotate(-9deg); }
  .char7 { transform: rotate(-2deg); }
  .char8 { transform: rotate(5deg); }
  .char9 { transform: rotate(12deg); }
  .char10 { transform: rotate(19deg); }
  .char11 { transform: rotate(26deg); }
  .char12 { transform: rotate(33deg); }
  .char13 { transform: rotate(40deg); }
  .char14 { transform: rotate(47deg); }

.sec03_3:before{
position: absolute;
    border-top: 1px solid #d8455f;
    transform: rotate(12deg);
    width: 45px;
    height: 100px;
top: 210px;
    left: -78px;
    content: "";
}
.sec03_3:after{
    position: absolute;
    border-top: 1px solid #d8455f;
    transform: rotate(-12deg);
    width: 45px;
    height: 100px;
    top: 210px;
    right: 23px;
    content: "";
}
.sec03_4{
    padding-top: 9rem;
}
.sec03_4 img{
width:80%;
}
.sec03_5{
padding-top:5rem;

}
.sec03_5 img{
max-width:600px;
}




.sec04{
    padding-bottom: 5rem;
}

.sec04_1{
max-width: 1200px;
    margin: auto;
}
h2.sec04_2,h2.sec05_2,h2.sec06_2,h2.sec07_2{
position: relative;
color:#d8455f;
vertical-align: middle;
}
h2.sec04_2 img,h2.sec05_2 img,h2.sec06_2 img,h2.sec07_2 img{
width:70px;
vertical-align: middle;
padding-right:10px;
}
h2.sec04_2:before{
    position: absolute;
    border-bottom: 1px solid #d8455f;
    width: 25rem;
    height: 1px;
    bottom: 1rem;
    left: 5rem;
    content: "";
}
h2.sec04_2:after{
position: absolute;
    content: "";
    width: 45px;
    height: 24px;
    background: transparent;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    transform: rotate(90deg);
    border: 1px solid;
    border-bottom: none;
    bottom: 27px;
}

/*韓国語*/
h2.sec04_2_kr:before{
    position: absolute;
    border-bottom: 1px solid #d8455f;
    width: 24rem;
    height: 1px;
    bottom: 1rem;
    left: 5rem;
    content: "";
}
h2.sec04_2_kr:after{
position: absolute;
    content: "";
    width: 45px;
    height: 24px;
    background: transparent;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    transform: rotate(90deg);
    border: 1px solid;
    border-bottom: none;
    bottom: 27px;
}

h2.sec05_2:before{
    position: absolute;
    border-bottom: 1px solid #d8455f;
    width: 19.5rem;
    height: 1px;
    bottom: 1rem;
    left: 5rem;
    content: "";
}
h2.sec05_2:after{
position: absolute;
    content: "";
    width: 45px;
    height: 24px;
    background: transparent;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    transform: rotate(90deg);
    border: 1px solid;
    border-bottom: none;
    bottom: 27px;
}

.sec04_3{
display:flex;
    justify-content: space-around;
}
.sec04_4{
display:flex;
flex-direction: column;
}

.sec04_5{
position: relative;
}
.sec04_5:after{
position: absolute;
    border-bottom: 2px solid #ccc;
    width: 100%;
    height: 1px;
    bottom: -8px;
    left: 0rem;
    content: "";

}
.sec04_6{
text-align:right;
margin:0;
}
.sec04_7{
margin:0;
}
.sec05{
background:url(../um_images/bg_4.png)no-repeat;
background-size:cover;
padding:10% 0 7% 0;
position: relative;
}
.sec05:before {
  content: "";       
  width: 20%;        
  height: 100%;       
  display: block;     
  background: linear-gradient(to right,rgba(255,255,255,0) 0, #fff 80%); 
  position: absolute;  
  top: 0;
  right: 0;
}
.sec05:after {
  content: "";         
  width: 20%;        
  height: 100%;       
  display: block;     
  background: linear-gradient(to left,rgba(255,255,255,0) 0, #fff 80%); 
  position: absolute;  
  top: 0;
  left: 0;
}
.sec05_1{
max-width: 1200px;
    margin: auto;
}
 h2.sec05_2{
margin-bottom:0;
}
.sec05_3 {
    text-align: center;
    position: relative;
    margin-top: -2rem;
}
.sec05_3 img{
max-width:380px;

}
.sec05_3:after{
    position: absolute;
    width: 20%;
    height: 1rem;
    bottom: 4rem;
    right: 28%;
    content: "梅結び";
    font-size: 110%;
    font-weight: bold;
    text-shadow: 1px 1px 0 #fff, -1px 1px 0 #fff, 1px -1px 0 #fff, -1px -1px 0 #fff;
}
.sec05_4{
text-align:center;
color:#d8455f;
font-size:110%;
}

.sec05_5{
width: 46%;
    margin: auto;
font-size:85%;

}
.sec05_6{
    width: 46%;
    margin: auto;
    font-size: 75%;

}
.sec06{
    background: url(../um_images/bg_3.png), url(../um_images/bg_5_1.png), url(../um_images/image5.png), url(../um_images/um_bg_l.png), url(../um_images/um_bg_r.png);
    background-repeat: no-repeat;
    background-position: bottom right -23%, bottom center, top 9rem center, left 17% bottom 30%, top right 20vw;
    padding: 6rem 0 2rem 0;
    background-size: 36%, 100%, 63vh, 13%, 12%;
　　margin-top:-4rem;
 }
.sec06_1{
max-width: 1200px;
    margin: auto;
}
h2.sec06_2:before{
    position: absolute;
    border-bottom: 1px solid #d8455f;
    width: 20rem;
    height: 1px;
    bottom: 1rem;
    left: 5rem;
    content: "";
}
h2.sec06_2:after{
position: absolute;
    content: "";
    width: 45px;
    height: 24px;
    background: transparent;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    transform: rotate(90deg);
    border: 1px solid;
    border-bottom: none;
    bottom: 27px;
}
.sec06_3{


}
.sec06_4{
color:#d8455f;
font-size:130%;
text-align:center;
padding-top:52vh;
}

.sec07{
background: url(../um_images/image6.png),url(../um_images/um_bg_r.png);;
    background-repeat: no-repeat;
    background-position: bottom 4rem right,top -4rem right 10%;;
    padding: 0rem 0 2rem 0;
    background-size: 40%,13%;
}
.sec07 p{
font-size:85%;
}
.sec07_1{
max-width: 1200px;
    margin: auto;
}

h2.sec07_2:before{
    position: absolute;
    border-bottom: 1px solid #d8455f;
    width: 9.5rem;
    height: 1px;
    bottom: 1rem;
    left: 5rem;
    content: "";
}
h2.sec07_2:after{
position: absolute;
    content: "";
    width: 45px;
    height: 24px;
    background: transparent;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    transform: rotate(90deg);
    border: 1px solid;
    border-bottom: none;
    bottom: 27px;
}
h2.sec07_2 span{
color:#000;
font-size:50%;
padding-left:3rem;
}
.sec07_2 {
    display: inline-block;
}
.sec07_3{
    font-size: 80%;
    display: inline-block;
    padding: 5rem;
}
.sec07_4 {
display: flex;
    align-items: flex-end;
    justify-content: space-between;
    width: 90%;
    margin: auto;
    padding-bottom: 2rem;
}
.sec07_4 > div{
max-width:48%;
}
.sec07_4 h5,.sec07_5 h5{
color: #b81a20;
    font-size: 90%;
    position: relative;
    padding-left: 2rem;
    margin: 2rem 0 0 0;
}
.sec07_4 h5:before,.sec07_5 h5:before {
    content: "";
    display: inline-block;
    background: url(../um_images/sankaku.png) no-repeat;
    width: 25px;
    height: 25px;
    position: absolute;
    top: 7px;
    left: 0;
}
.sec07_5 {

    width: 90%;
    margin: auto;
    padding-bottom: 2rem;
}
.sec07:after {
    background: radial-gradient(circle farthest-side, #ed93b7, #ed93b7 5px, transparent 5px, transparent 10px);
    background-size: 27px 11px;
    background-position: left bottom;
    background-repeat: repeat-x;
    content: '';
    display: inline-block;
    height: 27px;
    width: 100%;
}

/* ===== 落ちる梅を表示するコンテナのスタイル ===== */
.leaves-container {
  position: relative;
  height: 100%; /* コンテナの高さ */
  width: 100%; /* コンテナの横幅 */
  /*overflow: hidden;*/

}


/* ===== 下まで落ちる梅のスタイル ===== */

/* 下まで落ちる梅の共通スタイル */
.leaf {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  position: absolute;
  animation: animate-leaf 30s linear;
z-index:999;
}


/* 落ちる梅1 */
.leaf-1 {
  background-image: url('um_images/ume1.png');
}

/* 落ちる梅2
.leaf-2 {
  background-image: url('um_images/ume2.png');
} */

/* 落ちる梅3 */
.leaf-3 {
  background-image: url('um_images/ume3.png');
}

/* 落ちる梅4 */
.leaf-4 {
  background-image: url('um_images/ume5.png');
}

/* ===== 落ちる梅が降るアニメーション ===== */
@keyframes animate-leaf {
  0% {
    opacity: 0;
    top: 40vh;
    transform: rotate(0);
  }

  10% {
    opacity: 1;
    transform: rotate(360deg);

  }
  20% {
    opacity: 1;

transform: rotate(360deg);

  }
  90% {
    opacity: 1;
    transform: rotate(-360deg);
  }

  100% {
    opacity: 0;
    top:680vh;
    right:0px;
    transform: rotate(1080deg);
  }
}

/*梅の花舞い散るアニメーション*/

#ume_block{
  width: 100%;
}
#ume_block .ume_parts_box{
  position: relative;
}
#ume_block .ume_parts_box img{
  position: absolute;
}
#ume_block .ume_parts_box img:nth-child(2n+1){
  width: 53px;/*花のサイズ*/
}
#ume_block .ume_parts_box img:nth-child(2n){
  width: 75px;/*花のサイズ*/
}

/*-----------------------------------
梅の花の表示位置
-----------------------------------*/
img.parts_01{top: 0; left: 5%;}
img.parts_02{top: 0; left: 12%;}
img.parts_03{top: 0; left: 15%;}
img.parts_04{top: 0; left: 22%;}
img.parts_05{top: 0; left: 25%;}
img.parts_06{top: 0; left: 28%;}
img.parts_07{top: 0; left: 35%;}
img.parts_08{top: 0; left: 40%;}

img.parts_13{top: 0; left: 63%;}
img.parts_14{top: 0; left: 70%;}
img.parts_15{top: 0; left: 75%;}
img.parts_16{top: 0; left: 81%;}
img.parts_17{top: 0; left: 85%;}
img.parts_18{top: 0; left: 90%;}
img.parts_19{top: 0; left: 93%;}


/*-----------------------------------
舞い散るアニメーション
回転しつつ上から下へ
-----------------------------------*/
@keyframes sakura {
    0% {
      opacity: 0;
    }
    20% {
      transform:translate(3px,30px) rotate(20deg);
      opacity: 1;
    }
    30% {
      transform:translate(0,60px) rotate(50deg);
    }
    50% {
      transform:translate(-20px,170px)  rotate(150deg);
    }
    70% {
      transform:translate(-40px,220px) rotate(-50deg);
      opacity: .9;
    }
    90% {
      transform:translate(-60px,280px) rotate(-180deg);
    }
    100% {
      transform:translate(-70px,350px);
      opacity:0;
    }
}

.ume_parts_box img {
    animation: sakura linear 8s infinite;
    /*アニメーションが始まるまで画像を見えなくしておく*/
    opacity: 0;
}

/*-----------------------------------
アニメーションが始まるまでの時間
-----------------------------------*/
img.parts_01,img.parts_04,img.parts_07,img.parts_10,img.parts_08,img.parts_11,img.parts_13,img.parts_16,img.parts_19{

  animation-delay: 0s;
}
img.parts_02,img.parts_05{

  animation-delay: 1.5s;
}
img.parts_03,img.parts_06,img.parts_09,img.parts_12{

  animation-delay: 4s;
}
img.parts_08,img.parts_11,img.parts_13,img.parts_16,img.parts_19{

  animation-delay: 0.5s;
}
img.parts_14,img.parts_17{

  animation-delay: 2s;
}
img.parts_15,img.parts_18{

  animation-delay: 5s;
}


/*左側の落ちて止まる梅*/
/*1個め*/
.ume_left1{
    position: absolute;
    top: 70vh;
    left: 3%;
animation: fall 4s linear, sway 2s ease-in-out infinite alternate;
z-index:5;

}
.ume_left1 img{
width:50px;
}

@keyframes fall {
 
0%{
top:0;
 opacity: 0;
}

30%{
opacity: 1;
}
100% {
    top: 70vh;
  }
}
@keyframes sway {
  from {
    transform: translateX(0px) rotate(0deg);
  }
  to {
    transform: translateX(20px) rotate(360deg);
  }
}
/*2個め*/
.ume_left2{
    position: absolute;
    top: 90vh;
    left: 8%;
animation: fall2 5s linear, sway2 3s ease-in-out infinite alternate;
z-index:5;
animation-delay: 1s;
}
.ume_left2 img{
width:70px;
}

@keyframes fall2 {
0%{
top:0;
 opacity: 0;
}

30%{
opacity: 1;
}
100% {
    top: 90vh;
  }
}

@keyframes sway2 {
  from {
    transform: translateX(0px) rotate(0deg);
  }
  to {
    transform: translateX(20px) rotate(-360deg);
  }
}

/*3個め*/
.ume_left3{
    position: absolute;
    top: 110vh;
    left: 15%;
animation: fall3 6s linear, sway3 2s ease-in-out infinite alternate;
z-index:1;
animation-delay: 1.5s;
}
.ume_left3 img{
width:60px;
}

@keyframes fall3 {
0%{
top:0;
 opacity: 0;
}

30%{
opacity: 1;
}
100% {
    top: 110vh;
  }
}

@keyframes sway3 {
  from {
    transform: translateX(0px) rotate(0deg);
  }
  to {
    transform: translateX(20px) rotate(360deg);
  }
}

/*4個め*/
.ume_left4{
    position: absolute;
    top: 125vh;
    left: 5%;
animation: fall4 6s linear, sway4 2s ease-in-out infinite alternate;
z-index:1;
animation-delay: 2s;
}
.ume_left4 img{
width:35px;
}

@keyframes fall4 {
0%{
top:0;
 opacity: 0;
}

30%{
opacity: 1;
}
100% {
    top: 125vh;
  }
}

@keyframes sway4 {
  from {
    transform: translateX(0px) rotate(0deg);
  }
  to {
    transform: translateX(20px) rotate(-360deg);
  }
}

/*5個め*/
.ume_left5{
    position: absolute;
    top: 90vh;
    left: 25%;
animation: fall5 6s linear, sway5 2s ease-in-out infinite alternate;
z-index:1;
animation-delay: 2.5s;
}
.ume_left5 img{
width:30px;
}

@keyframes fall5 {
0%{
top:0;
 opacity: 0;
}

30%{
opacity: 1;
}
100% {
    top: 90vh;
  }
}

@keyframes sway5 {
  from {
    transform: translateX(0px) rotate(0deg);
  }
  to {
    transform: translateX(20px) rotate(360deg);
  }
}

/*1700px以下
 ==========================================================================================*/
@media only screen and (max-width: 1700px){
.um_top{
padding-bottom:5%;
}
.sec01{

   
}
.sec01 p{

    width: 50%;
}

.ume_left1{
    top: 60vh;
}
@keyframes fall {
 0%{
top:0;
 opacity: 0;
}

30%{
opacity: 1;
}
100% {
    top:60vh;
  }
}
.ume_left2{
    top: 90vh;
}
@keyframes fall2 {
0%{
top:0;
 opacity: 0;
}

30%{
opacity: 1;
}
100% {
    top: 90vh;
  }
}
.ume_left3{
   top: 70vh;
}
@keyframes fall3 {
0%{
top:0;
 opacity: 0;
}

30%{
opacity: 1;
}
100% {
    top: 70vh;
  }
}
.ume_left4{
    top: 80vh;
}
@keyframes fall4 {
0%{
top:0;
 opacity: 0;
}

30%{
opacity: 1;
}
100% {
    top: 80vh;
  }
}
.ume_left5{
    top: 70vh;
    left: 33%;
}
@keyframes fall5 {
0%{
top:0;
 opacity: 0;
}

30%{
opacity: 1;
}
100% {
    top: 70vh;
  }
}

}
@media (min-width:1024px){
.sp{
display:none;
}
}
/*1023px以下　タブレット
 ==========================================================================================*/
@media (max-width:1024px){
.pc_none{
display:none;
}
    .ume_left1 {
        top: 37vh;
    }
    .ume_left2 img {
    width: 60px;
}
    .ume_left2 {
        top: 50vh;
        left: 0%;
    }
    .ume_left5 {
        top: 40vh;
        left: 21%;
    }
@keyframes fall {
 
0%{
top:0;
 opacity: 0;
}

30%{
opacity: 1;
}
100% {
    top: 37vh;
  }
}
@keyframes fall2 {
 
0%{
top:0;
 opacity: 0;
}

30%{
opacity: 1;
}
100% {
    top: 50vh;
  }
}
@keyframes fall5 {
 
0%{
top:0;
 opacity: 0;
}

30%{
opacity: 1;
}
100% {
    top: 40vh;
  }
}
.ume_left3,.ume_left4{
display:none;
}

.um_top{
        background: url(../um_images/top_bg_left.png), url(../um_images/top_bg_sp.png);
        background-position: left bottom 16rem, top center;
        background-size: 18%, 100%;
        padding-bottom: 0;
        background-repeat: no-repeat;
}
h2.top_txt {
    font-size: 158%;
}
h3.top_txt {
font-size: 100%;
        padding-top: 5vh;
        padding-bottom: 4vh;
}
.um_logo {
    padding-top: 5vh;
}
.um_logo img {
    width: 26vw;
}

.sec01_cont{
    overflow: hidden;
}
.sec01{
        background-size: 80%, 100%;
        background-position: bottom 0rem right -53%, bottom center;
        padding-bottom: 60vw;
    
}
.sec01:before,.sec01:after {
   display:none;
}
.sec01_flex {
    align-items: flex-start;
}
.sec01 p {
width: 50%;
        font-size: 115%;
        left: 28%;
        margin-top: -4rem;
    }
.sec02 {
    background-position: bottom 10rem center;
    background-size: 75%;
    padding: 3rem 0 0rem 0;
}
.sec02_0 {
    left: 7%;
    font-size: 120%;
    line-height: 1.3;
    top: 0rem;
}
.sec02_0:before {
   
width: 256px;
        height: 278px;
        top: -80%;
        left: -7%;
}
.sec02_2_1, .sec02_2_2, .sec02_2_3 {
    width: 40%;
}
.sec02_1 img{
width:210px;
}
.sec02_2_2 {
    right: 57%;
    top: 45%;
    font-size: 100%;
}
.sec02_2_2:before {
    border-top: 1px solid #6c431e;
    width: 207px;
    height: 1px;
    top: 4%;
    left: 33%;
    transform: rotate(-4deg);
}
.sec02_2_1 {
    right: 2%;
    top: 0;
    font-size: 100%;
}
.sec02_2_1:before {
border-top: 1px solid #6c431e;
        width: 76px;
        height: 1px;
        bottom: -10px;
        left: -79px;
        transform: rotate(-45deg);
}
.sec02_2_3 {

    right: 1%;
    top: 73%;
    font-size: 100%;
}
.sec02_2_3:before {
    border-top: 1px solid #6c431e;
    width: 110px;
    height: 1px;
    top: -42%;
    left: -31%;
    transform: rotate(47deg);
}
.sec03_1 {
        background: linear-gradient(to right, rgba(255, 255, 255, 0.7) 63%, rgba(255, 255, 255, 0.2) 80%, rgba(255, 255, 255, 0.2) 100%), url(../um_images/image1.png);
        background-size: cover, 80%;
        background-position: bottom center, bottom 0rem right -8rem;
        background-repeat: repeat, no-repeat;
        padding-bottom: 9rem;
}

.sec03_2 {
display:block;
}
.sec03_3 {
    width: 75%;
}
.sec03_3 span {
font-size: 150%;
        height: 306px;
        width: 44px;
        left: 231px;
        top: 22px;

}
.sec03_3:after {
        top: 155px;
        right: 76px;

}
.sec03_3:before {
top: 155px;
        left: 0px;
}
.sec03_4 {
  left: 0%;
  position: relative;
padding-top:7rem;
}
.sec03_4 img{
        width: 80%;
}
.sec03_4 p{
font-size:85%;
}
.sec03_5 {
display:none;
padding-top: 0rem;
        width: 42%;
}
.sec03_5 img {
    width: 135%;
}
h2.sec04_2, h2.sec05_2, h2.sec06_2, h2.sec07_2 {
    font-size: 1.5rem;
}
h2.sec04_2 img, h2.sec05_2 img, h2.sec06_2 img, h2.sec07_2 img {
    width: 50px;
}
.sec04{
 padding: 0 1rem 5rem 1rem;
}

.sec04_3 {
    flex-direction: column;
    align-items: center;
}
.sec05{
    padding: 12% 1rem 11% 1rem;
}
.sec05:before,.sec05:after{
    width:0;
}
.sec05_3 img {
    max-width: 260px;
}
.sec05_4{
font-size:100%;
}
.sec05_5 ,.sec05_6 {
    width: 88%;
}
.sec06 {
    background: url(../um_images/bg_3.png), url(../um_images/bg_5_1.png), url(../um_images/image5.png), url(../um_images/um_bg_l.png), url(../um_images/um_bg_r.png);
    background-repeat: no-repeat;
    background-position: bottom right -53%, bottom center, top 7rem center, left 3% bottom 38%, top right 13%;
    padding: 6rem 1rem 2rem 1rem;
    background-size: 57%, 100%, 50vh, 22%, 21%;
    margin-top: -4rem;
}
h2.sec04_2:before {
    width: 19rem;
    height: 1px;
    bottom: 10px;
    left: 3rem;
}
h2.sec04_2:after {
    width: 37px;
    height: 21px;
    bottom: 18px;
}
h2.sec05_2:before {
    width: 15.5rem;
    height: 1px;
    bottom: 10px;
    left: 3rem;
}
h2.sec05_2:after {
    width: 37px;
    height: 21px;
    bottom: 18px;
}
h2.sec06_2:before {
    width: 15.5rem;
    height: 1px;
    bottom: 10px;
    left: 3rem;
}
h2.sec06_2:after {
    width: 37px;
    height: 21px;
    bottom: 18px;
}
.sec06_4 {
    font-size: 110%;
    text-shadow: 1px 2px #fff;
    text-align: center;
    padding-top: 34vh;
}
.sec07 {
    background: url(../um_images/image6.png), url(../um_images/um_bg_r.png);
    background-repeat: no-repeat;
    background-position: bottom 4rem right,top -3rem right 10%;
    padding: 0rem 1rem 2rem 1rem;
background-size:60%,26%;
}
h2.sec07_2:before {
    width: 82%;
    height: 1px;
    bottom: 10px;
    left: 3rem;
}
h2.sec07_2:after {
    width: 37px;
    height: 21px;
    bottom: 18px;
}
.sec07_3 {
padding:0 0 0 2rem;
}
.sec07_4 {
    align-items: flex-start;
    padding-bottom: 2rem;
    flex-direction: column;
}
}
/**********************************************************767px以下　スマホ***************************************************************/
@media (max-width: 767px) { 
.pc{
display:none;
}

body {
    overflow-x: hidden;
    
font-size:12pt;
max-width:100vw;
}
.um_top{
       background: url(../um_images/top_bg_left.png), url(../um_images/top_bg_sp.png);
        background-position: left bottom 16rem, top center;
        background-size: 18%, 100%;
        padding-bottom: 0%;
        background-repeat: no-repeat;
}
.meika img {
width:40px;
}
.um_logo{
padding-top:10px;
}

.um_logo img {
    max-width: 31vw;
}
h2.top_txt {
        font-size: 112%;
        margin-top: -1rem;
}
h3.top_txt {
font-size: 100%;
        padding: 3rem 2rem;
}
.sec01{
        background-size: 85%, 100%;
        background-position: bottom 0rem right -59px, bottom center;
        padding-bottom: 74%;
}
.sec01:before,.sec01:after{
display:none;
}
.sec01_flex {
    flex-direction: column;
align-items: flex-start;
}

.sec01 p{
        font-size: 110%;
        font-weight: 600;
        line-height: 1.6;
        width: 74%;
        left: 40%;
}
.sec01_cont {
    padding: 0 1rem;
}

.sec01_img img {
    display: none;
}
.leaves-container{
display:none;
}

#ume_block .ume_parts_box img:nth-child(2n+1){
  width: 33px;/*花のサイズ*/
}
#ume_block .ume_parts_box img:nth-child(2n){
  width: 45px;/*花のサイズ*/
}
@keyframes sakura {
    0% {
      opacity: 0;
    }
    20% {
      transform:translate(3px,30px) rotate(20deg);
      opacity: 1;
    }
    30% {
      transform:translate(0,50px) rotate(50deg);
      opacity: .5;
    }
    50% {
      transform:translate(-20px,100px)  rotate(150deg);
      opacity: 0;
    }
    70% {
      transform:translate(-40px,170px) rotate(-50deg);
      opacity: 0;
    }
    90% {
      transform:translate(-60px,200px) rotate(-180deg);
      opacity: 1;
    }
    100% {
      transform:translate(-70px,230px);
      opacity:0;
    }
}
img.parts_01{top: 0; left: 5%;}
img.parts_02{top: 0; left: 12%;}
img.parts_03{display:none;}
img.parts_04{top: 0; left: 22%;}
img.parts_05{display:none;}
img.parts_06{top: 0; left: 28%;}
img.parts_07{display:none;}
img.parts_08{top: 0; left: 40%;}

img.parts_13{top: 0; left: 63%;}
img.parts_14{display:none;}
img.parts_15{top: 0; left: 75%;}
img.parts_16{display:none;}
img.parts_17{top: 0; left: 85%;}
img.parts_18{display:none;}
img.parts_19{top: 0; left: 93%;}




    .ume_left1, .ume_left2, .ume_left3, .ume_left4, .ume_left5 {
        display: none;
    }

.sec02 {
    padding: 3rem 0 0rem 0;
    background-size: 100%;
    background-position: bottom 9rem center;
}
.sec02_0{
top:0rem;
left:10%;
font-size:100%;
}
.sec02_0:before {
        width: 185px;
        height: 195px;
        top: -4rem;
        left: -12%;
}
.sec02_1 {
max-width:100%;
    padding: 0 0 6rem 0;

}
.sec02_2 img{
width:370px;
}
.sec02_2_1 {
right: -31%;
        top: 70px;
        font-size: 90%;
}
    .sec02_2 img {
        width: 170px;
    }
.sec02_2_1, .sec02_2_2, .sec02_2_3{
width:80%;
}
.sec02_2_1:before {
width: 41px;
        height: 1px;
        bottom: -19px;
        left: -5px;
        transform: rotate(-53deg);
}
.sec02_2 {

    padding-top: 6rem;
}
.sec02_2_2 {
        right: 16%;
        top: 63%;
        font-size: 90%;
}
.sec02_2_2:before {
        width: 72px;
        height: 1px;
        top: -9%;
        left: 16%;
        transform: rotate(-26deg);
    
}
.sec02_2_3 {
right: -28%;
        top: 79%;
        font-size: 90%;
}
.sec02_2_3:before {
width: 83px;
        height: 1px;
        top: -67%;
        left: -5%;
        transform: rotate(61deg);
}
.sec03_1 {
background: url(../um_images/image1.png);
        background-size: 120%;
        background-position: bottom 0rem right -7rem;
        background-repeat: no-repeat;
        padding-bottom: 13rem;
}
.sec03_2 {
    display: flex;
    align-items: center;
    flex-direction: column;
}
.sec03_3 {
        width: 90%;
    }
.sec03_5 img {
    max-width: 100%;
}
.sec03_3 span {
        font-size: 130%;
        height: 208px;
        width: 38px;
        left: 140px;
        top: 38px;
 }
.sec03_3:after {
        width: 23px;
        height: 100px;
        top: 128px;
        right: -6px;

}
.sec03_3:before {
        width: 23px;
        height: 100px;
        top: 132px;
        left: -17px;

}
.sec03_4 {
    padding-top: 7rem;
}
.sec03_4 img{
    width: 100%;
}
.sec03_4 p{
font-size: 95%;
  
    line-height: 1.3;
}
.sec03_5 {
     padding-top: 0; 
}
h2.sec04_2, h2.sec05_2, h2.sec06_2, h2.sec07_2{
font-size:130%;
}
h2.sec04_2 img, h2.sec05_2 img, h2.sec06_2 img, h2.sec07_2 img{
width:35px;

}
h2.sec04_2:before {
        width: 14.5rem;
        height: 1px;
        bottom: 5px;
        left: 35px;
}
h2.sec04_2:after {
        width: 29px;
        height: 18px;
        bottom: 11px;
        
}
.sec04_3 {
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    align-items: center;
}
.sec04_4 {
    margin-bottom: 3rem;
}

.sec05 {
        padding: 19% 1rem 17% 1rem;
}
.sec05:before,.sec05:after{
display:none;
}
.sec05_3 img {
    max-width: 200px;
}
h2.sec05_2:before {
        width: 12.5rem;
        height: 1px;
        bottom: 5px;
        left: 35px;
}
h2.sec05_2:after {
        width: 29px;
        height: 18px;
    bottom: 11px;

}
.sec05_3{
margin-top:1rem;
}
.sec05_3:after {

    bottom: 3rem;
    right: 15%;
}
.sec05_4 {
    text-align: left;
    font-size: 100%;
        background: rgb(255, 255, 255, 0.5);
        padding: 1rem;
font-weight:600;
border-radius:8px;
}
.sec05_5{
margin:0;
}
.sec05_6 {
    width: 96%;
}
.sec06 {
    background: url(../um_images/bg_3.png), url(../um_images/bg_5_1.png), url(../um_images/image5.png), url(../um_images/um_bg_l.png), url(../um_images/um_bg_r.png);
    background-repeat: no-repeat;
    background-position: bottom right -58%, bottom center, top 9rem center, left 17% bottom 54%, top 4rem right 15%;
    padding: 6rem 0 2rem 0;
    background-size: 60%, 100%, 40vh, 20%, 20%;
    margin-top: -6rem;
}

h2.sec06_2:before {
        width: 12.5rem;
        height: 1px;
        bottom: 5px;
        left: 35px;
}
h2.sec06_2:after {
        width: 29px;
        height: 18px;
    bottom: 11px;
}
.sec06_4 {
    font-size: 100%;
    text-align: left;
    padding: 31vh 1rem 1rem 1rem;
font-weight:600;
}
h2.sec07_2:before {
        width: 83%;
        height: 1px;
        bottom: 5px;
        left: 35px;
}
h2.sec07_2:after {
        width: 29px;
        height: 18px;
    bottom: 11px;

}
.sec07 {
    padding: 0rem 0 4rem 0;
    background-size: 60%, 13%;
}
.sec07_3 {
    padding: 0 1rem;
}
.sec07_4 {
    align-items: flex-start;
    justify-content: space-between;
    margin: auto;
    padding-bottom: 2rem;
    flex-direction: column;
}
}

.footer_up {
    text-align: center;
    font-size: 80%;
}
html {
    scroll-behavior: smooth;
}
.pagetop {
    height: 50px;
    width: 50px;
    position: fixed;
    right: 30px;
    bottom: 30px;
    background: #fff;
    border: solid 2px #d8455f;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

.pagetop__arrow {
    height: 10px;
    width: 10px;
    border-top: 3px solid #d8455f;
    border-right: 3px solid #d8455f;
    transform: translateY(20%) rotate(-45deg);
}
@media (hover: hover) and (pointer: fine) {
    .pagetop:hover, .pagetop:hover .pagetop__arrow {
        border-color: #fff;
background:#d8455f;
    }
}