@import url('https://fonts.googleapis.com/css2?family=Zen+Antique&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sawarabi+Gothic&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bungee&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kaisei+Opti:wght@400;500;700&display=swap');
.font_en, body {
    font-family: 'Zen Antique', serif;font-family: 'Sawarabi Gothic', sans-serif;
}
#contents_box h2, #contents_box h3 {
    font-family: 'Kaisei Opti', serif;
    font-weight: bold;
}

#contents_box {
position: relative;
       background: url(Dup/img/bg2.jpg);
    background-size: cover;
}

main {
    overflow: hidden;
}
.cms_title p, .welcome {
    font-family: 'Bungee', cursive;
}
.fat-nav li a {
   color: #cb6ee4; 
}
.concept_copy {
    overflow: hidden;
    text-indent: 108%;
    white-space: nowrap;
    width: 100%;
    height: 25px;
    position: absolute;
    background: #212121;
    z-index: 0;
    top: 3px;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-image: url(Dup/img/wavetxt.png);
    background-position: 0 50%;
    background-repeat: repeat-x;
    background-size: auto 100%;
    -webkit-animation: conceptCopy 100s linear 0s infinite;
    animation: conceptCopy 100s linear 0s infinite;
}
@-webkit-keyframes conceptCopy {
  0% {
    background-position: 0 top;
  }
  100% {
    background-position: -4435px top;
  }
}
@keyframes conceptCopy {
  0% {
    background-position: 0 top;
  }
  100% {
    background-position: -4435px top;
  }
}

.anime {
    opacity: 0;
}
.anime.is-animated {
     -webkit-animation: 1s ttlFadeIn cubic-bezier(0, .7, .2, 1) forwards;
    animation: 1s ttlFadeIn cubic-bezier(0, .7, .2, 1) forwards;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
}
@keyframes ttlFadeIn {
    0% {
    opacity: 0;
    transform: translateY(50%); 
    }
    100% {
    opacity: 1;
    transform: translateY(0);
    }
}


.topcmsWrap:before {
    content: "";
    display: block;
    position: absolute;
    top: -39px;
    left: 0px;
    width: 100%;
    height: 40px;
    background-image: url(Dup/img/wave.png);
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
/* ------------------------------------------------------------------ */
.p-recruit-top__label-copy {
    font-weight: 700;
    color: #fff;position: relative;
}
.p-recruit-top__label-copy::before {
        background-color: #85d3c7;
    content: "";
    height: 39px;
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
}
.c-marquee {
    padding: 6px;
    -webkit-animation-name: animationMarquee;
    animation-name: animationMarquee;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-animation-duration: 25s;
    animation-duration: 25s;
    letter-spacing: 0.05em;
   /* text-shadow: 1px 1px 0 #e7382e, -1px -1px 0 #e7382e, -1px 1px 0 #e7382e, 1px -1px 0 #e7382e, 0px 1px 0 #e7382e, -1px 0 #e7382e, -1px 0 0 #e7382e, 1px 0 0 #e7382e;*/
}
.c-marquee li {
        white-space: nowrap;
}
@keyframes animationMarquee {
   0% {
           -webkit-transform: translateX(0%) rotate(0.001deg);
    transform: translateX(0%) rotate(0.001deg);
   } 
   100% {
           -webkit-transform: translateX(-50%) rotate(0.001deg);
    transform: translateX(-50%) rotate(0.001deg);
   }
}




.dot_line {
    height: 8px;
    width: 600px;
    display: flex;
    margin: 0 auto;
    padding: 0;  
}
.dot_line_dot1 {
    background: #000;
    height: 4px;
    width: 4px;
    margin: 2px 0;
    border-radius: 100%;
}
.dot_line_dot2 {
    height: 8px;
    width: 586px;
    background-image: radial-gradient(#000 25%,transparent 0);
    background-size: 8px 8px;
    margin: 0 2px;
}
.catch {
    right: 2%;
    top: 4%;
    z-index: 1;
}
.catch img {
    height: 79vh;
    min-height: inherit!important;
    filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.5));
}
.cms_title h2, .cms_title p, .cms_title {
    display: inline-block;
    color: #fff;
}
.cms_title {
    background-color: #ca6be4;
    padding: 6px 19px;
    border-radius: 5px;
}
#top_cms {
    position: relative;
    padding-top: 60px;
}
#top_cms:before {
    content: "";
    display: block;
    position: absolute;
    top: -50px;
    left: calc( 50% - 230px);
    width: 460px;
    height: 250px;
    background-image: url(Dup/img/contents.png);
    background-repeat: no-repeat;
    background-size: contain;
}


.img5, .img6, .img7 {
    box-shadow: 0 0 0 5px #effffb, 0 0 0 6px #ca6be4;
    position: relative;
}
.img5:after, .img6:after, .img7:after {
    content: "01";
    display: block;
    position: absolute;
    right: 10px;
    bottom: 2px;
    font-size: 4vw;
    z-index: 2;
    text-shadow: 1px 1px 0 #ca6be4, -1px -1px 0 #ca6be4, -1px 1px 0 #ca6be4, 1px -1px 0 #ca6be4, 0px 1px 0 #ca6be4, -1px 0 #ca6be4, -1px 0 0 #ca6be4, 1px 0 0 #ca6be4;
    color: #effffb;
}
.img6:after {
    content: "02";
}
.img7:after {
    content: "03";
}
.img5:before, .img6:before, .img7:before {
    content: "";
    width: 200px;
    height: 78px;
    display: block;
    bottom: 0;
    right: 0;
    border-width: 0 0 50px 50px;
    border-color: #effffb;
    border-top-color: transparent;
    border-right-color: transparent;
    border-left-color: transparent;
    -webkit-transition: all .8s cubic-bezier(.77,0,.175,1);
    transition: all .8s cubic-bezier(.77,0,.175,1);
    width: 0;
    height: 0;
    border-style: solid;
    position: absolute;
    z-index: 2;
    -webkit-transform: translate(0,0);
    transform: translate(0,0);
}

.link_box ul {
justify-content: center;
}
.link_box ul li {
    width: 30px!important;
    margin-left: 10px;
    margin-right: 10px;
}

.main_box {
	width: 100%!important;
	margin-left: 0;
}
#main_menu li {
    text-align: center;
    letter-spacing: 2px;
}
#contents2, #contents3 {
    position: relative;
}
/* -----------------------------------------------------------------------------------------*/
.button, .button2 {
    background: #fff;
    font-size: 14px;
    color: #212121;
    border-radius: 30px;
}
.button {
    transition: all 0.3s;
}
.button:hover, .button2:hover {
    transform: scale(1.05,1.05);
    box-shadow: none;
}
/* -----------------------------------------------------------------------------------------*/
@media(min-width: 769px) {
    #logo {
        max-width: 200px;
    }
.txt1, .scroll_bt {
left: calc(50% + 125px);
    }
header.grid_3 {
    width: 22%!important;
}
.topHeader header.bg_color4, header.bg_color4 {
    background: rgba(119, 119, 119, 0.3);
    background: rgba(0, 45, 41, 0.28);
    backdrop-filter: blur( 2px );
    transition: all 0.5s;
    border: 0;
}

.topHeader header.bg_color4.is-animation {
    background-color: rgba(190, 255, 242, 0.28);
    border-right: 1px solid #d8efec;
}
header.bg_color4 {
    background-color: rgba(255, 255, 255, 0.60);
    border-right: 1px solid #d8efec;  
}
.topHeader header.bg_color4 li a {
    color: #fff;
}
.topHeader header.bg_color4.is-animation li a, header.bg_color4 li a {
    color: #212121;
}
.topHeader header.bg_color4 #main_menu ul li a::before {
    background: #fff;
}
.topHeader header.bg_color4.is-animation #main_menu ul li a::before {
    background: #212121;
}

  #contents2, #contents3, .width_1280-max {
	max-width: inherit;
padding-left: 25%;
} 
#page_title .page_box {
        margin-left: 27%;
    max-width: 500px;
}
}
@media(max-width: 768px) {
    header.bg_color4 {
        background-color: #fff;
    }
#logo {
    width: 85px;
}
.catch img {
    height: 45vh;
}
.dot_line {
    width: 308px;
}
}
@media(max-width: 667px) {
footer .logo {
    text-align: center;
}
footer .logo img {
    max-width: 135px!important;
margin: 0 auto;
}
#logo {
    width: 67px;
}
.catch img {
    height: auto;
    width: 67px;
    object-fit: inherit;
}
.c-marquee {
-webkit-animation-duration: 7s;
animation-duration: 7s;
}
#top_cms:before {
    left: calc( 50% - 168px);
    max-width: 350px;
}
.img5:after, .img6:after, .img7:after {
    font-size: 11vw;
}
}