@import url('https://fonts.googleapis.com/css2?family=Mochiy+Pop+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bad+Script&display=swap');
body {
    font-family: 'Kosugi Maru', sans-serif;
    line-height: 1.6;
}
h2, h3, h4, .page_title_box p, .menu .nav ul li a, .top_nav ul li a, .cms_title {
    font-family: 'Mochiy Pop One', sans-serif;
}
.t_cms_txt2, .t_cms_txt5, .t_cms_txt8 {
    font-family: 'Bad Script', cursive;font-size: 46px;
}
.font_bold {
    font-weight: inherit;
}
#top_cms {
    background-image: url(Dup/img/kazari1.png), url(Dup/img/kazari2.png);
    background-position: 0px 2%, right 0px top 47%;
background-size: 139px auto, 139px auto;
    background-repeat: no-repeat;
}
.all_page {
    background-image: url(Dup/img/kazari1.png), url(Dup/img/kazari2.png), url(Dup/img/sakana.png);
    background-position: 6px 22%, right 11px top 47%, 99% 90%;
    background-size: 139px auto, 139px auto, 297px;
    background-repeat: no-repeat; 
}

.stylie {
  animation-name: stylie-transform-keyframes;
  -webkit-animation: stylie-transform-keyframes;
  animation-duration: 15000ms;
  animation-delay: 0ms;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  transform-origin: 0 0;
  width: 300px;
  right: 0px;
}

@keyframes stylie-transform-keyframes {
  0% { right: -300px;
    transform: translateX(0%);
  bottom: 14px;
animation-timing-function: cubic-bezier(.25,.25,.75,.75);}
  25% {right:11%;
  bottom: 43px;
  animation-timing-function: cubic-bezier(.25,.25,.75,.75);}
  50% {right: 50%;bottom: 12px;
      animation-timing-function: cubic-bezier(.25,.25,.75,.75);}
  75% {right: 80%;bottom: 32px;
  animation-timing-function: cubic-bezier(.25,.25,.75,.75);}
  100% {right: 110%;
  bottom: 0;
  }
}
/*@keyframes stylie-transform-keyframes {*/
/*  0% {right: -300px;*/
/*  bottom: 14px;*/
/*animation-timing-function: cubic-bezier(.25,.25,.75,.75);}*/
/*  25% {right:11%;*/
/*  bottom: 43px;*/
/*  animation-timing-function: cubic-bezier(.25,.25,.75,.75);}*/
/*  50% {right: 50%;bottom: 12px;*/
/*      animation-timing-function: cubic-bezier(.25,.25,.75,.75);}*/
/*  75% {right: 80%;bottom: 32px;*/
/*  animation-timing-function: cubic-bezier(.25,.25,.75,.75);}*/
/*  100% {right: 110%;*/
/*  bottom: 0;*/
/*  }*/
/*}*/

/*@-webkit-keyframes stylie-transform-keyframes {*/
/*   0% {*/
/*       right: -300px;*/
/*  bottom: 14px;*/
/*animation-timing-function: cubic-bezier(.25,.25,.75,.75);}*/
/*  25% {*/
/*      right:20%;*/
/*  bottom: 43px;*/
/*  animation-timing-function: cubic-bezier(.25,.25,.75,.75);}*/
/*  50% {*/
/*      right: 50%;*/
/*  bottom: 12px;*/
/*      animation-timing-function: cubic-bezier(.25,.25,.75,.75);}*/
/*  75% {*/
/*right: 80%;*/
/*  bottom: 42px;*/
/*  animation-timing-function: cubic-bezier(.25,.25,.75,.75);}*/
/*  100% {*/
/*right: 110%;*/
/*  bottom: 0;*/
/*  }  */
/*}*/



.kumo1 {
    width: 42vw;
    left: -5%;
    top: 10%;
}
.kumo2 {
    width: 33vw;
    right: -7%;
    bottom: 70%;
}
.kumo3 {
    width: 20vw;
    left: -1%;
    top: 37%;
}


/* -----CMS------*/
.all_page:before {
    display: none;
}
#cms_6-a .box_wrap {
    background: #fff;
    border: 0;
    border-radius: 21px;
}
#cms_2-a .cate_box {
    background: rgba(255, 255, 255, 0.82);
    padding: 20px;
    border-radius: 20px;
}
#cms_3-a .cate {
        background: rgba(255, 255, 255, 0.82);
    padding: 20px;
    border-radius: 20px;
}
#cms_1-a .cate_box {
background: rgba(255, 255, 255, 0.82);
    padding: 10px;    border-radius: 20px;
}
#page9 .top_txt, #page9 .box_wrap {
  background: rgba(255, 255, 255, 0.82);
    padding: 10px;    border-radius: 20px;  
}
@media(max-width: 667px) {
 #cms_3-a .cate, #cms_2-a .cate_box {
    padding: 10px;
}   
}
/* -----CMS end------*/

.main_img_wrap .catch {
    bottom: inherit;
    top: 27%;
    left: inherit;
    right: calc(50% - 38vw);
    width: 52%;
    max-width: 774px;
}
.main_wrap {position: relative}
.main_wrap:before {
    content: "";
    display: block;
    position: absolute;
    left: 12px;
    top: -100vh;
    background-image: url(Dup/img/left.png);
    background-repeat: repeat-y;
    background-position: 0 100%;
    width: 13%;
    max-width: 175px;
    height: 100vh; /*100%で下まで*/
    background-size: contain;
    z-index: 1;
    pointer-events: none;
}
.main_wrap:after {
    content: "";
    display: block;
    position: absolute;
    right: 12px;
    top: -105vh;
    background-image: url(Dup/img/right.png);
    background-repeat: no-repeat;
    background-position: 0 100%;
    max-width: 168px;
    width: 13%;
    height: 100vh;
    background-size: contain;
    z-index: 1;
    pointer-events: none;
}
#top_cms {position: relative; background-color: #fff}
.main_wrap_wrap:before, #top_cms:after {
    content: "";
    display: block;
    position: absolute;
    left: -1px;
    top: -199px;
    background-image: url(Dup/img/wave2.png);
    background-repeat: no-repeat;
    background-position: 0 100%;
    width: calc(100% + 2px);
    height: 200px;
    background-size: 100% auto;
    z-index: 9;
}
#top_cms:before {
    display: none;
}
#contents .box figure:after {display: none}
.t_cms_img1:before, .t_cms_img2:before, .t_cms_img3:before {
    content: "";
    display: block;
    position: absolute;
    left: -2px;
    top: -1px;
    background-image: url(Dup/img/frame.png);
    background-repeat: no-repeat;
    width: calc(100% + 5px);
    height: calc(100% + 2px);
    background-size: 100% 100%;
    z-index: 1;
 }
.t_cms_img2:before {
    background-image: url(Dup/img/frame2.png);
 }
 .top_cms_box .more_box .more{
     border-radius: 39px;
    background: #ffd6d6;
    border: none;
 }
/*--------------------------------------------------intro------------------------------------------------------------*/
#contents .intro .box h3 span:before {
    content: '';
    position: absolute;
    bottom: -13px;
    display: inline-block;
    width: 35px;
    border-bottom: 2px solid;
    border-color: #50d13f;
}
#contents .intro .txt_wrap {
    width: 95%;
    max-width: 1200px;
    margin: 0 auto;
    background: #fff;
padding: 46px 20px 20px;
    border-radius: 32px;
    box-sizing: border-box;
}
#contents .intro h3 {
display: block;    
}
.welcome {
    opacity: 0;
    margin-top: -91px;
}
.welcome img{
width: 24%;
max-width: 133px;
margin-bottom: 14px;
}
.welcome.animated {
 animation: zoomIn 1s forwards;   
}
@-webkit-keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: translateY(200px) scale3d(0.5, 0.5, 0.5);
  }
  40% {
    opacity: 1;
    -webkit-transform: translateY(-20px) scale3d(1, 1, 1);
  }
  70% {
    opacity: 1;
    -webkit-transform: translateY(5px) scale3d(1, 1, 1);
  }
 100% {
   opacity: 1;
   -webkit-transform: translateY(0) scale3d(1, 1, 1);
  }
}
@keyframes zoomIn {
  0% {
    opacity: 0;
    transform: translateY(200px) scale3d(0.5, 0.5, 0.5);
  }
  40% {
    opacity: 1;
    transform: translateY(-20px) scale3d(1, 1, 1);
  }
  70% {
    opacity: 1;
    transform: translateY(5px) scale3d(1, 1, 1);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale3d(1, 1, 1);
  }
}
/*--------------------------------------------------------------intro end-------------------------------------------------------*/
#top_cms .top_cms_box:last-child {
    background: rgba(255, 247, 219, 0.66);
    border-radius: 27px;
    padding: 48px;
}

@media(max-width: 768px) {
    #top_cms .top_cms_box:last-child {
    padding: 48px 20px;
}
}
@media(max-width: 667px) {
.main_wrap:before {
    left: 4px;
    top: -253px;
    width: 14%;
    height: 239px;
}
.main_wrap:after {
    right: 4px;
    top: -219px;
    width: 13%;
    height: 200px;
}
.catch_sp {
        top: -2px;
    width: 85%;
    left: 0;
    right: 0;
    margin: auto;
}
.intro {
    margin-top: 113px;
}
.welcome img {
    display: none;
}
#top_cms .top_cms_box:last-child {
    padding: 48px 10px;
}
.kumo1 {
    width: 54vw;
    left: -5%;
    top: 14%;
}
.kumo3 {
    width: 34vw;
    top: 46%;
    z-index: 0;
}
.all_page {
background-size: 139px auto, 139px auto, 176px;
}
}
/* ----------------------------↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓----------------------------------------*/
.sns_links li {
    max-width: 40px!important;
}
.intro h3, .t_cms_txt3, .t_cms_txt6, .t_cms_txt9 {
    font-size: 29px;
}
.cms_title {
    text-align: center;
}
.top_nav ul li:not(:last-child) a:after {
    transition: all 0.3s;
    content: "";
    display: block;
    position: absolute;
    width: calc( 100% - 10px);
    height: 3px;
    bottom: -7px;
    left: 10px;
    right: 0;
    margin: auto;
    background: #bbfe72;
    opacity: 0;
}
.top_nav ul li a:hover:after {
    opacity: 1;
}
.top_nav ul li:last-child a {
    background: #ff9800;
    padding: 10px;
    border-radius: 23px;
}
.top_nav ul li:last-child a:hover {
    background: #31defa;
}
.top_nav ul li, .menu .nav ul li {
    border-left: 0;
}
.top_nav ul li a:hover {
    color: #bbfe72;
}
.img-container {
    display: block;
}
.img-container.active:before {/*★*/
    transform: translateX(101%);
}
.t_cms_img2 .img-container:before {
    background: #32cd32;
}
.img-container:before {
    background: #f7e888;
}
.main_img_wrap {
    background-color: #f6f5ee;
}
footer .svg_box {
    opacity: 0.1;
    z-index: -1;
}

.other .box {
    border-radius: 20px;
    border: 2px solid #b99a7d;
    background-color: #d4f0f3;
    width: 33%;
    margin: 20px 30px;
    height: 339px;
}
.other .box:first-child {
    background-image: url(./Dup/img/contact.png);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center bottom; 
}
.other .box:last-child {
        border-left: 2px solid #b99a7d;
   background-image: url(./Dup/img/information.png);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center bottom;
}
.bottom_menu li a {
    font-size: 15px;
}
@media(max-width: 1350px) {
    .main_wrap {
        margin-top: 54vw;
    }
}
@media(max-width: 1000px) {
  .main_wrap {
    margin-top: 67.5vh;
}
.button_container span {
    height: 2px;
    background-color: #ff7f7f;
}
header #nav_menu {
    background: #fff;
    border-radius: 0 0 0px 14px;
    top: 0;
    box-shadow: 0px 0px 5px -3px rgb(146 146 146 / 42%);
    right: 0;
}
}
@media(max-width: 768px) {
    .main_wrap {
    margin-top: 40.5vh;
}
    .other .box {
    width: 40%;
    margin: 20px 12px;
    height: 264px;
}
.sns_links li {
    max-width: 35px!important;
}
}
@media(max-width: 667px) {
.main_wrap {
    margin-top: 52.5vw;
}
#nav_menu {
    height: 64px;
    width: 64px;
}
.intro h3, .t_cms_txt3, .t_cms_txt6, .t_cms_txt9 {
font-size: 6.7vw;
}
.top_cms_wrap {
    padding-bottom: 50px;
}
#top_cms .cms_title p {
    font-size: 5.6vw;
}
.other .box_title {
    font-size: 17px;
}
.other .box {
    width: 90%;
    margin: 7px 12px;
    height: 192px;
}
.other .box:first-child {
    border-bottom: 2px solid #b99a7d;
}
.overlay ul li a {
    padding-left: 0;
    padding-right: 0;
}
.stylie {
  animation-duration: 10000ms;
  width: 200px;
}
}

/* ----------------------------↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑----------------------------------------*/