@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+Antique:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap');
body, #main_img .txt, #page_title, #f_contact .con_txt, #intro h2, #contents1 h2, #contents2 h2, #top_cms h2, #top_info h2, #f_contact .con_bt, .more_bt a, #top_info .more_bt2 a {
    font-family: 'Zen Kaku Gothic Antique', sans-serif!important;
    /*font-family: 'Kosugi Maru', sans-serif!important;*/
}
body {
    font-weight: 500;
}
#page-top {
filter: drop-shadow(0px 1px 5px rgba(0,0,0,0.15));
}
#cms_2-g .cate_img1 {
    max-height: 601px;
}
#f_contact {
    z-index: 0;
}
#f_contact .con_txt.txt_white {
    text-shadow: 2px 0px 5px rgb(24 24 24 / 46%), -1px 0px 3px rgb(2 2 2 / 28%);
}
#f_contact .more_bt {
    position: relative;
}
#f_contact:after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    right: calc(50% - 440px);
    margin: auto;
    width: 300px;
    height: 300px;
    background-image: url(Dup/img/contact.png);
    background-position: 50% 100%;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 2;
}
#f_contact .more_bt:before {
    content: "";
    display: block;
    position: absolute;
    top: -182px;
    right: 0px;
    left: 0;
    margin: auto;
    z-index: -1;
    width: 300px;
    height: 181px;
    background-image: url(Dup/img/contact.png);
    background-position: 50% 0;
    background-repeat: no-repeat;
    background-size: contain;
}

.arowana_doro {
    position: fixed;
    z-index: 9999;
    right: -2000px;
    top: 17%;
}
.arowana_doro.trans {
    animation-name: arowana_doro;
    -webkit-animation: arowana_doro;
    animation-duration: 18000ms;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    width: 1100px;
}
@keyframes arowana_doro {
  0% {
    right: -2000px;
    transform: translateX(0%);
    top: 17%;
    animation-timing-function: cubic-bezier(.25,.25,.75,.75);
  }
 10% {
  right: -902px;
  top: 17%;
  animation-timing-function: cubic-bezier(.25,.25,.75,.75);}
  
  14% {
  right: -902px;
  top: 17%;
  }
  
  35% {
  right: 200px;
  top: 21%;
  animation-timing-function: cubic-bezier(.25,.25,.75,.75);}
  
  50% {
      right: 1000px;
      top: 19%;
      animation-timing-function: cubic-bezier(.25,.25,.75,.75);}
  75% {
      right: 2000px;
      top: 22%;
  animation-timing-function: cubic-bezier(.25,.25,.75,.75);}
  100% {
  right: calc(100% + 2000px);
  top: 17%;
  }
}
#main_img .txt {
    top: auto;
    left: auto;
    width: 94%;
    transform: inherit;
    right: 2%;
    max-width: 831px;
    bottom: 4%;
}
.top_cms_box {
background-color: rgb(255 255 255 / 72%);
}
#particles-js {
    position: fixed;
    z-index: -1;
    width: 100%;
    height: 100%;
    background-color: transparent;
    pointer-events: none;
    top: 0;
    left: 0;
}

/**** cursor ****/

.cursor{
    position: fixed;
    width: 80px;
    height: 80px;
    z-index: 10001;
    transition: 0.3s;
    transform: scale(0.8);
    transition-property: opacity, transform;
    pointer-events: none;
}
.cursor.active{
    opacity: 1!important;
    transform: scale(1);
}



#top_info {
background-image: url("https://www.transparenttextures.com/patterns/black-thread-light.png");
}

.marker-animation {
    background-image: -webkit-linear-gradient(left, transparent 50%, #ffb100 50%);
    background-repeat: repeat-x;
    background-size: 200% 60%;
    background-position: 0 20%;
    transition: all 2s ease;
    transition-delay: 0.8s;
    font-weight: bold;
    padding: 0 0 20px 3px;
    letter-spacing: 3px;
}
#contents1 .marker-animation {
    background-image: -webkit-linear-gradient(left, transparent 50%, #ffeb00 50%);
}
.marker-animation.active {
    background-position: -100% 20%;
}


/*----jojo start-------*/

.sw-Sidetext {
    left: 0;
    width: 100%;
}

.sw-Sidetext {
    position: fixed;
    top: 0;
    height: 100%;
    pointer-events: none;
    z-index: -1;
}

.sw-Sidetext span.sidetext-left {
    left: -30px;
    background: url(./Dup/img/left.png) repeat-y top center/100px;
    animation: sidetext 80s linear infinite;
}

.sw-Sidetext span.sidetext-right {
    right: -30px;
    background: url(./Dup/img/right.png) repeat-y bottom center/100px;
    animation: sidetext 80s linear infinite reverse;
}

.sw-Sidetext span {
    content: "";
    position: fixed;
    top: 0;
    width: 100px;
    height: 100%;
    will-change: background-position-y;
}


@keyframes sidetext {
0% {
    background-position-y: 0;
}

100% {
    background-position-y: -3275px;
}
}
@keyframes sidetext_sp {
0% {
    background-position-y: 0;
}

100% {
    background-position-y: -1150px;
}
}
#intro {
    background-image: url(Dup/img/main3.jpg);
    background-attachment: fixed;
}
#intro .intro_bg {
    background-color: rgb(0 96 195 / 80%);z-index: 1;
}
#intro div.width_1280-max {
    z-index: 4;
    position: relative;
}
#intro figure, #contents2 .cate_box {
    border: 5px solid #fff;
    border-radius: 25px;
}


.arowana1, .arowana2, .arowana3, .arowana4 {
    animation-name: stylie-transform-keyframes;
    -webkit-animation: stylie-transform-keyframes;
    animation-duration: 18000ms;
    animation-delay: 0ms;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    transform-origin: 0 0;
    width: 300px;
    right: -300px;
    z-index: 1;
    pointer-events: none;
}
.arowana2 {
    top: -45px;
    animation-delay: 4s;
    width: 233px;
}
.arowana3 {
    top: -85px;
    animation-delay: 8s;
    width: 263px;
}
.arowana4 {
    top: -135px;
    animation-delay: 12s;
    width: 233px;
}
@keyframes stylie-transform-keyframes {
  0% {
      right: -300px;
    transform: translateX(0%);
  top: -134px;
animation-timing-function: cubic-bezier(.25,.25,.75,.75);}
  25% {
      right:11%;
  top: -73px;
  animation-timing-function: cubic-bezier(.25,.25,.75,.75);}
  50% {
      right: 50%;top: -42px;
      animation-timing-function: cubic-bezier(.25,.25,.75,.75);}
  75% {
      right: 80%;top: -10px;
  animation-timing-function: cubic-bezier(.25,.25,.75,.75);}
  100% {
  right: 110%;
  top: -60px;
  }
}

.doro {
    z-index: 2;
    left: 3%;
    bottom: -82px;
    animation: fuwafuwa 7s infinite running;
}
.doro2 {
    z-index: 5;
    right: 3%;
    bottom: -82px;
    animation: fuwafuwa 7s infinite running;
}
@keyframes fuwafuwa {
  0% {
        transform: translate(0,0px);
    }
    50% {
        transform: translate(0,-100px)
    }
     100% {
        transform: translate(0, 0px)
    }
}
@keyframes fuwafuwa2 {
  0% {
        transform: translate(0,0px);
    }
    50% {
        transform: translate(0,-20px)
    }
     100% {
        transform: translate(0, 0px)
    }
}

.banner_box a {
    filter: drop-shadow(0px 0px 9px rgba(255,255,255,1));
}
.eng1 {
    top: -53px;
    width: 32%;
    max-width: 300px;
    left: 3%;
}
.eng2 {
    bottom: -43px;
    width: 23%;
    max-width: 210px;
    right: 3%;z-index: 1;
}
.sankaku {
    background-image: url(Dup/img/sankaku.png);
    padding-top: 42%;
    background-size: 100% auto;
    background-repeat: no-repeat;
    margin: 50px 0px 0px;
}
#illustarea {
    background-color: #eee;
    padding-top: 100px;
    padding-bottom: 100px;
    background: linear-gradient(0deg, rgba(0,99,255,1) 0%, rgba(0,99,255,1) 42%, rgba(63,137,255,1) 63%, rgba(63,137,255,1) 100%);
}
#illustarea {
    background-image: url(Dup/img/recruit.png), linear-gradient(179deg, rgba(0,99,255,1) 0%, rgba(0,99,255,1) 42%, rgba(63,137,255,1) 63%, rgba(63,137,255,1) 100%);
    background-repeat: no-repeat;
    background-position: top 30px left -10px , center;
    background-size: 200px auto, auto auto;
}
.hukidasi {
    max-width: 797px;
    width: 80%;
    margin-left: 13%;
    margin-top: -341px;
    animation: fuwafuwa2 3s infinite running;
}
#header {
    padding-top: 0;
}
header .inner {
    max-width: inherit;
    width: 100%;
    border-radius: 0;
}
#pc_nav ul {
    height: 77px;
}
#pc_nav ul:last-of-type {
    border-radius: 0;
    background-color: #005fc1;
    background-image: url("https://www.transparenttextures.com/patterns/snow.png");
}
#pc_nav li.grid_3 {
    max-width: 270px;
}
#header ul.grid_10, #header .inner.bg_white {
    background-color: #fff;
    background-image: url("https://www.transparenttextures.com/patterns/snow.png");
}
#pc_nav ul li a.txt_color_nomal {
    font-weight: bold;
    font-size: 16px;
}
.topcms_news_type2 .cate_box {
	width: 46.33333%!important;
	margin-right: 1.5%;
	margin-left: 1.5%;
	cursor: pointer;
	border-bottom: 1px solid #ddd;
	margin-bottom: 30px;
	box-shadow: 0 6px 12px rgb(0 0 0 / 0);
	/* padding: 20px; */
	/* border-radius: 20px; */
	/* background-color: #f5f5f5; */
}
.topcms_news_type2 .cate_box:hover {
	transform: translateY(-5px);
}
.topcms_news_type2 .cate_box .box_item {
	cursor: pointer;
}
.topcms_news_type2 .txt_height {
	height: 5em
}
.topcms_news_type2 .box_img1 {
	border-radius: 10px;
}
#page-top a {
    width: 120px;
    height: 120px;
    background-color: transparent;
    box-shadow: none;
    background-image: url(Dup/img/pagetop.png);
    background-repeat: no-repeat;
    background-size: contain;
}
#page-top a i {
    display: none;
}

@media screen and (max-width: 1503px){
.hukidasi {
    width: 50%;
    margin-top: -300px;
}
}
@media screen and (max-width: 1177px){
.hukidasi {
    width: 50%;
    margin-left: 6%;
    margin-top: -275px;
}
}


/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
#footer {
    padding-bottom: 59px;
}
#f_contact .inner {
    padding: 130px 20px 28px;
}
#f_contact:after {
    display: none;
}
.topcms_news_type2 .cate_box {width: 100%!important;}
.topcms_news_type2 .txt_height {height: 3em}
.hukidasi {
    margin-top: 32px;
}
#illustarea {
    background-size: 127px auto, auto auto;
}
.hukidasi {
    width: 67%;
    margin-left: 6%;
    margin-top: -8px;
}
.arowana1, .arowana2, .arowana3, .arowana4 {
    width: 200px;
}
.sw-Sidetext span.sidetext-left {
background: url(./Dup/img/left.png) repeat-y top center/61px;
}

.sw-Sidetext span.sidetext-right {
    background: url(./Dup/img/right.png) repeat-y bottom center/61px;
}
}


@media(max-width: 667px) {
.arowana_doro.trans {
    width: 800px;
}
.sw-Sidetext span.sidetext-left {

}

#main_img .txt {
    width: 84%;
    bottom: -6px;
}
.font_2dw_tb {
    font-size: 13px;
}
#contents2 .top_title {
    width: 98%!important;
}
.arowana1, .arowana2, .arowana3, .arowana4 {
    width: 158px;
    animation-duration: 15000ms;
}
.arowana2 {
    width: 117px;
}
.arowana3 {
    width: 127px;
}
.sw-Sidetext span.sidetext-left {
    left: -42px;
    background: url(./Dup/img/left.png) repeat-y top center/auto 1150px;
    animation: sidetext_sp 70s linear infinite;
}

.sw-Sidetext span.sidetext-right {
    right: -42px;
    background: url(./Dup/img/right.png) repeat-y bottom center/auto 1150px;
        animation: sidetext_sp 70s linear infinite reverse;
}
.doro {
    width: 31%;
    bottom: -62px;
}
.doro2 {
    width: 31%;
    bottom: -40px;
    z-index: 5;
}
#page-top a {
    width: 79px;
    height: 79px;
}
.hukidasi {
    width: 99%;
    margin-left: 0%;
    margin-top: 9px;
}
#illustarea {
    background-size: 78px auto, auto auto;
}
#main_img {
    height: 95vw!important;
    margin-top: 76px;
}
.eng1 {
    top: -41px;
    width: 43%;
    max-width: 335px;
    left: 3%;
}
.eng2 {
    bottom: -37px;
    width: 30%;
}
.sankaku {
    margin: 40px 0px 0px;
}
#illustarea {
    padding-top: 41px;
    padding-bottom: 137px;
}
}
/*Youtube*/
.youtube_box{
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.youtube_box iframe{
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}