@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;1,300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Acme&display=swap');

#catch .catch_txt h2:first-letter {
    color: #59bdfe;
}
#contents .font1 {
    color: #f5eb0b;
}
.title {
  display: flex;
  overflow: hidden;
}
.title span {
  display: block;
  transform: translate(0, 105%);
  transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s;
}
.title.-visible span {
  transform: translate(0, 0);
}
.title span:nth-child(2) {
  transition-delay: 0.06s;
}
.title span:nth-child(3) {
  transition-delay: 0.12s;
}
.title span:nth-child(4) {
  transition-delay: 0.18s;
}
.title span:nth-child(5) {
  transition-delay: 0.24s;
}
.title span:nth-child(6) {
  transition-delay: 0.30s;
}
.title span:nth-child(7) {
  transition-delay: 0.36s;
}
.title span:nth-child(8) {
  transition-delay: 0.42s;
}
.title span:nth-child(9) {
  transition-delay: 0.48s;
}
.title span:nth-child(10) {
  transition-delay: 0.54s;
}
.title span:nth-child(11) {
  transition-delay: 0.6s;
}
.title span:nth-child(12) {
  transition-delay: 0.66s;
}
.title span:nth-child(13) {
  transition-delay: 0.72s;
}
.title span:nth-child(14) {
  transition-delay: 0.78s;
}

.catch_txt .font1, .point01, .point02, .cms_title p {
 font-family: 'Rubik', sans-serif;
font-family: 'Acme', sans-serif;
}



.slide-in {
	overflow: hidden;
    display: inline-block;
}

.slide-in_inner {
	display: inline-block;

}

/*左右のアニメーション*/
.leftAnime{
    opacity: 0;/*事前に透過0にして消しておく*/
}

.slideAnimeLeftRight {
	animation-name:slideTextX100;
	animation-duration:3.2s;
	animation-fill-mode:forwards;
    opacity: 0;
}

@keyframes slideTextX100 {
  from {
	transform: translateX(-100%); /*要素を左の枠外に移動*/
        opacity: 1;/*0でも可*/
  }

  to {
	transform: translateX(0);/*要素を元の位置に移動*/
    opacity: 1;
  }
}

.slideAnimeRightLeft {
	animation-name:slideTextX-100;
	animation-duration:3.2s;
	animation-fill-mode:forwards;
    opacity: 0;
}


@keyframes slideTextX-100 {
  from {
	transform: translateX(100%);/*要素を右の枠外に移動*/
    opacity: 1;/*0でも可*/
  }

  to {
	transform: translateX(0);/*要素を元の位置に移動*/
    opacity: 1;
  }
}


/* --------------------------------- LOGO --------------------------------------------- */
#header .inner.width_60per {
    width: 75%!important;
}
#fakeloader .fl {
    max-width: 248px!important;
}
#logo2 {
    max-width: 187px;
}
/* ------------------------------------------------------------------------------ */
.fat-nav li:last-child a {
    border-bottom: 1px solid #fff100;
    border-top: 1px solid #fff400;
}
.catch_txt .font1 {
    font-size: 2rem;    color:#f5eb0b;
}
.point01, .point02 {
    font-size: 2rem;
}
#global-nav li a span {
  opacity: 1;
}
.font_2dw {
        font-size: -webkit-calc(1rem - 1px);
    font-size: calc(1rem - 1px);
}
#global-nav li a span {
    font-weight: bold;
}
.cms_title p {
    color: #0bbdfe;
    opacity: 1;
    font-size: 18px;
}
.catch {
    z-index: 1;
    width: 686px;
    top: 1%;
    left: 2%;
    filter: drop-shadow(0px 0px 5px rgba(255,255,255,255.4));
}

#contents2 .contents_txt h2 span {
    background-color: #fff;
}
#catch .catch_txt h2 span, #contents2 .contents_txt h2 span {
    display: none;
}
.top_cms_box:nth-of-type(1) .border_color1, .top_cms_box:nth-of-type(4) .border_color1 {
       border-color: #95d5ff; 
}
.top_cms_box:nth-of-type(1), .top_cms_box:nth-of-type(4) {
padding-top: 80px;
background: #e7ffff;
padding-left: 30px; padding-right: 30px;
padding-bottom: 60px;
}
.top_cms_box:nth-of-type(4) {
padding-top: 50px;
}

.top_cms_box:nth-of-type(1), .top_cms_box:nth-of-type(4) {
    position: relative;
}
.top_cms_box:nth-of-type(1):before, .top_cms_box:nth-of-type(4):before {
    content: "";
    display: block;
    width: 100%;
    background-image: url(Dup/img/nami.png);
    background-repeat: repeat-x;
    background-size: auto 100%;
    height: 35px;
    position: absolute;
    top: -27px;
    left: 0;
    z-index: -1;
    filter: drop-shadow(0px -5px 0px rgba(67,225,255,0.2));
}
.top_cms_box:nth-of-type(1):after, .top_cms_box:nth-of-type(4):after {
    content: "";
    display: block;
    width: 100%;
    background-image: url(Dup/img/nami.png);
    background-repeat: repeat-x;
    background-size: auto 100%;
    height: 35px;
    position: absolute;
    bottom: -27px;
    left: 0;
    z-index: -1;
        filter: drop-shadow(0px 5px 0px rgba(67,225,255,0.2));
}

.cms_6-c .cate_box {
   border-color: #ffffff;
   box-shadow: none;
   border: 2px solid #95d5ff;
}

.more {
    z-index: 0;
}

#cms_2-a h3 {
   padding-left: 23px;
    display: block;
    border-top: 0;
}



@media screen and (max-width: 768px){
.catch {
    width: 428px;
    top: 43%;
    left: 2%;
}
header {
    padding-bottom: 5%;
}
}
@media screen and (max-width: 667px){
.index_header #logo, #logo {
    max-width: 202px;
}
.index_header .nav_box, .nav_box {
    padding: 7px 10px 7px 15px;
}
.index_header #logo, #logo {
    max-width: 53px;
}
#main_img {
       padding-top: 57px!important; 
}
.catch {
    width: 325px;
    top: 85%;
    left: 4%;
}
#main_img .inner {
    padding-bottom: 0!important;
}
.top_cms_box:nth-of-type(1), .top_cms_box:nth-of-type(4) {
    padding-top: 12px;
    padding-bottom: 19px;
}
}


@media all and (-ms-high-contrast: none) {
#page8 #contact_tel a, #page8 a.border_so1 {
    padding-top: 37px;
}
}