@import url('https://fonts.googleapis.com/css2?family=Nothing+You+Could+Do&display=swap');


body {
    font-size: 15px;
}

.custom_txt p span {
  position: relative;z-index: 1;
  background: #10a7de;
}
.custom_txt p:last-child span {
    background: #212121;
}
.custom_txt span {
  position: relative;
}
.custom_txt strong {position:relative;
z-index: 100;
}
.custom_txt p span::before{
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: #fff;
  transition: 0.5s;z-index: 0;
}

.custom_txt p span.fade::before {
  width: 100%;
}
.box_1 > div {
	z-index: 1;
	position: inherit;
}

#cms_2-a .cate_title {
    font-weight: bold;
    padding-top: .5em;
    padding-bottom: .5em;
    margin-bottom: 2em;
    position: relative;
    border-bottom: solid 3px #33b9ca;
    display: block;
    text-align: center;
    border-top: 0;
}
#cms_2-a .cate_title:after {
    position: absolute;
    content: " ";
    display: block;
    width: 8%;
    bottom: -3px;
    border-bottom: solid 3px #ffad5b;
    left: 0;
    right: 0;
    margin: auto;
}
.circle-btn[data-v-457025b0]:hover {
    transform: scale(1.1);
}
.circle-btn[data-v-457025b0] {
    width: 160px;
    bottom: 3%;
    left: 3%; z-index: 99;
    position: absolute;
}
.circle-btn[data-v-457025b0] {
    position: fixed;
    bottom: 20px;
    left: 20px;
    width: 130px;
    z-index: 10;
    border-radius: 50%;
    border: 5px solid #ffad5b;
    box-shadow: -5px 5px 0 0 #ffad5b;
    cursor: pointer;
    transition: transform 1s cubic-bezier(.23,1,.32,1),opacity .5s;
    z-index: 6;
}
.circle-btn__txt img {
    -webkit-animation: rotate-data-v-457025b0 15s linear infinite;
    animation: rotate-data-v-457025b0 15s linear infinite;
}
.circle-btn__center[data-v-457025b0] {
    position: relative;
    z-index: 1;
    display: block;
}
.circle-btn__txt[data-v-457025b0] {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 84%;
    z-index: 2;
}
@-webkit-keyframes rotate-data-v-457025b0 {
   0% {
     transform: rotate(0)
   }
   to {
     transform: rotate(1turn)
   }
 }
 @keyframes rotate-data-v-457025b0 {
   0% {
     transform: rotate(0)
   }
   to {
     transform: rotate(1turn)
   }
 }


/* ---------------------- */
.windmill {
    width: 85px;
    height: 85px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

.windmill::before {
    background: url(Dup/img/windmill1.svg) center center no-repeat;
    width: 76px;
    height: 76px;
    content: "";
    position: absolute;
    top: 4px;
    left: 0;
    right: 0;
    margin: auto;
    -webkit-animation: windmillOn 1s 0s linear infinite;/*0.4*/
    animation: windmillOn 1s 0s linear infinite;
}
.windmill::after {
    background: url(Dup/img/windmill2.svg) center center no-repeat;
    width: 85px;
    height: 85px;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    -webkit-animation: windmill2On 1.1s 0s linear infinite;/*0.8*/
    animation: windmill2On 1.1s 0s linear infinite;
}

@keyframes windmillOn {
            0% {
              transform: rotate(0deg);
            }
            100% {
              transform: rotate(90deg);
            }
          }
  @keyframes windmill2On {
            0% {
              opacity: 0;
              transform: scale(0) rotate(0);
            }
            100% {
              opacity: 0.5;
              transform: scale(1.1) rotate(180deg);
            }
          }

.wave--title span.wave--inner {
    display: inline-block;
    position: relative;width: inherit!important;
    top: 0!important;
}
.wave--title.inverse span.wave--inner:after, .wave--title.inverse span.wave--inner:before {
    background-image: url(Dup/img/nami_2.svg);
   opacity: 1;
}
.wave--title span.wave--inner:before {
    content: "";
    position: absolute;
    left: -100px;
    top: 12px;
    width: 75px;
    height: 6px;
    background-size: auto 100%;
    background-position: 0 0;
    background-repeat: repeat-x;
    background-size: auto 5px;
    /*background-image: url(../img/main/wave.png?v=20201211105712);*/
    -webkit-animation: wave 2s linear 0s infinite;
    animation: wave 2s linear 0s infinite;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    opacity: 0;
    -webkit-transition: all 1.3s cubic-bezier(.165,.84,.44,1);
    transition: all 1.3s cubic-bezier(.165,.84,.44,1);
    -webkit-transition-timing-function: cubic-bezier(.165,.84,.44,1);
    transition-timing-function: cubic-bezier(.165,.84,.44,1);
    -webkit-transition-delay: .4s;
    transition-delay: .4s;
}
.wave--title span.wave--inner:after {
    content: "";
    position: absolute;
    right: -100px;
    top: 12px;
    width: 75px;
    height: 6px;
    background-size: auto 100%;
    background-position: 0 0;
    background-repeat: repeat-x;
    background-size: auto 5px;
    /*background-image: url(../img/main/wave.png?v=20201211105712);*/
    -webkit-animation: wave 2s linear 0s infinite;
    animation: wave 2s linear 0s infinite;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    opacity: 0;
    -webkit-transition: all 1.3s cubic-bezier(.165,.84,.44,1);
    transition: all 1.3s cubic-bezier(.165,.84,.44,1);
    -webkit-transition-timing-function: cubic-bezier(.165,.84,.44,1);
    transition-timing-function: cubic-bezier(.165,.84,.44,1);
    -webkit-transition-delay: .4s;
    transition-delay: .4s;
}
.wave--title span.wave--inner span {
    padding-top: 5px;
    font-size: 12px;
    display: block;
}
@-webkit-keyframes wave {
  100% {
    background-position: 48px 0
  }
}
@keyframes wave {
  100% {
    background-position: 48px 0
  }
}

.custom_title {
    right: 7%;
    bottom: 40%;
    padding-right: 0;
    transform: rotate( 
352deg
);
width: 50%;
    max-width: 677px;
    opacity: 0;
}
.custom_txt {
    bottom: 12%;
    right: 3%;
    text-align: right;
    font-size: 23px;
}
.custom_txt span{
    color: #10a7de;
    background: #fff;
    padding: 12px;
    line-height: 3;
}
.custom_txt p:last-child span {
    color: #212121;
}
.custom_title img {
    filter: drop-shadow(0px 0px 5px rgba(0,0,0,0.2));
}

.custom_hukidasi {
    right: 40%;
    bottom: 64%;
    opacity: 0;
}
.custom_title.trans {
    animation: zoomIn2 0.6s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;  
}
.custom_hukidasi.trans {
    animation: zoomIn 0.6s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;  
    opacity: 0;
}
@keyframes zoomIn {
  0% {
    transform: scale(0.4);
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes zoomIn2 {
  0% {
    transform: translateX(140px);
    opacity: 0;
  }
  50% {
    transform: translateX(0);
  }
  65% {
    transform: translateX(30px);
  }
  100% {
    transform: translateX(0);
  }
  20%,100% {
    opacity: 1;
  }
}

#pc_nav ul li a {font-weight:bold;
}
.con_no {
    font-size: 23px;
    color: #378aca;
    transform: rotate( 355deg);
    background: url(Dup/img/hukidasi.png) no-repeat;
    background-size: contain;
    padding: 12px 20px 31px;
    font-weight: bold;
    margin-bottom: -65px;
    font-family: "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

#top_cms {
    background: #fff9df;
}
.cms_2-c .box_item {
    box-shadow: 2px 2px 0px 0 #ffad5b;
    border-radius: 10px;
}
.cms_title p {
   text-shadow: 1px 1px 0px #212121, -1px 1px 0px #212121, 1px -1px 0px #212121, -1px -1px 0px #212121, 1px 0px 0px #212121, 0px 1px 0px #212121, -1px 0px 0px #212121, 0px -1px 0px #212121;
    color: #fff9df;
    letter-spacing: 0.3rem;
    font-size: 52px;
    margin-top: -42px;
}
.cms_title p:first-letter {
    color: #baf2f9;
}
#pc_nav ul {
    margin-top: 60px;
}
@media(max-width: 1390px) {
    .custom_hukidasi {
    right: 44%;
}
}

@media(max-width: 768px) {
.custom_title {
    right: 3%;
    bottom: 40%;
    width: 66%;
}
.custom_box {
 background-position: 37% 0;   
}
.custom_txt {
right: 1%;
}

}

@media(max-width: 667px) {
#pc_nav ul {
    margin-top: 0px;
}
.custom_title {
    right: 3%;
    bottom: 54%;
    width: 88%;
}
.custom_txt {
    font-size: 15px;
bottom: 17%;
}
.custom_hukidasi {
    bottom: 69%;
    width: 31%;
    right: 65%;
}
.custom_box {
 background-position: 100%;   
}
.circle-btn[data-v-457025b0] {
    bottom: 7px;
    left: 7px;
    width: 83px;
    border: 4px solid #ffad5b;
    box-shadow: -3px 3px 0 0 #ffad5b;
}
.con_no {
    padding: 5px 13px 28px;
    font-size: 19px;
}
.cms_5-c .box_txt1::before {
    left: 4px;
}
}


/* --------------------------IE------------------------------ */
@media all and (-ms-high-contrast: none) {
.custom_txt span {
padding: 13px 10px 5px;    
}
.wave--title span.wave--inner:before, .wave--title span.wave--inner:after {
    display: none;
}
}