﻿
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100;0,200;0,300;0,400;1,200&display=swap');
.cms_title span{
  font-style: italic;
    
}
.cms_title span, .more a, .contact_bt a, #intro .intro_title::before, #contents1 .con1_title::after, #contents2 .con2_title::after, #contents3 .con3_title::after {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: normal;
}

#page_title .page_title_gradient {
    background-image: url('./Dup/img/bg_img.png')!important;
    background-size: 100% 100%!important;
}
section[id^="page"].bg_color1 {
    background-color: transparent;
}
figure.shadow {
    box-shadow: none;
}
#contents1 .con1_title, #contents2 .con2_title, #contents3 .con3_title {
    position: relative;
    z-index: 1;
}
#intro .intro_title {
    position: relative;z-index: 1;
}
#intro .intro_title::before {
    position: absolute;
    content: "INTRODUCTION";
    top: -20px;
    left: -40px;
    color: #fff;
    font-size: 50px;
    line-height: 1;
    text-shadow: 1px 1px 0 #e4e4e4,
    -1px 1px 0 #e4e4e4,
    1px -1px 0 #e4e4e4,
    -1px -1px 0 #e4e4e4;
letter-spacing: 5px;
    z-index: -1;
}
#contents1 .con1_title::after, #contents2 .con2_title::after, #contents3 .con3_title::after {
    position: absolute;
    display: block;
    width: 100%;
    left: 0;
    top: -20px;
    color: #fff;
    opacity: 0.3;
    text-align: center;
    font-size: 80px;
    line-height: 1;
    z-index: -1;
    font-weight: bold;
}
#contents1 .con1_title::after{
    content: "01";
}
#contents2 .con2_title::after{
    content: "02";
}
#contents3 .con3_title::after{
    content: "03";color: #10a3ff;
}
#contents3 {
    background-image: url(Dup/img/bg_con3.jpg);
    background-size: cover;
    position: relative;
    z-index: 1;
}
#contents3:before {
    content: "";
    display: block;
    position: absolute;
    top: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
    background-color: rgb(255 255 255 / 85%);
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: -1;
}
.cate_list li a {
    border: 1px solid #79baff;
    box-shadow: 1px 2px 0px #78baff;
    border-radius: 48px;
    padding: 9px 20px;
}

.cms_box > .bg_color2 {
    background-color: transparent;
    position: relative;
}

.cms_box > .bg_color2:before {
    content: "";
    display: block;
    position: absolute;
    top: 0px;
    width: 0%;
    height: 100%;
background-color: #e1f8ff;
    background-repeat: no-repeat;
    background-size: contain;
    transition-duration: 0.5s;
    z-index: -1;
}
.cms_box.trans > .bg_color2:before {
      width: 100%;
}
#top_cms .cms_title span {
    height: inherit;
}


#main_img {
    background-image: url(Dup/img/main_img.jpg);
    background-size: cover;
    background-position: 50% 50%;
}


#main_img .main_bg {
    background: linear-gradient(to bottom right, rgb(0 75 120 / 43%), rgb(67 120 120))!important;
}
#contents1 .con1_bg {
    background: rgb(0 120 205 / 65%)!important;
    opacity: 1;
}
#header {
    padding-top: 15px;
}
#header.headtrans {
    padding-top: 0;
}

#logo a {
    width: 245px;
    background: transparent;
    padding: 0;
    background-image: url(Dup/img/logo_w.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}
#logo a img {
    opacity: 0;
}
#header.headtrans #logo a {
  background-image: none;
}
#header.headtrans #logo a img {
  opacity: 1;
}

.catch {
    z-index: 1;
    width: 60%;
    top: 32%;
    left: 5%;
}
.intro_title, .con3_title {
    font-size: 37px;
}
.con1_title, .con2_title {
    font-size: 29px;
}
.con2_box {
    background: rgb(0,173,255);
    background: linear-gradient(136deg, rgb(53 190 255) 0%, rgb(15 159 255) 100%);
}
.footer_wrap {
    background-image: url(Dup/img/footer.jpg);
    background-size: cover;
    background-position: 100% 50%;
    position: relative;
    z-index: 1;
}
.footer_wrap:before {
    content: "";
    display: block;
    position: absolute;
    top: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
background-color: rgb(0 106 181 / 45%);
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: -1;
}




.JS_ScrollAnimationItem{
position: relative;
display: inline-block;
}
/*.JS_ScrollAnimationItem:after {*/
/*    position: absolute;*/
/*    bottom: 3px;*/
/*    left: 0;*/
/*    width: 0%;*/
/*    height: 4px;*/
/*    content: '';*/
/*    background-color: #afecff;*/
/*    background-size: 7px 7px;*/
/*    -webkit-backface-visibility: hidden;*/
/*    backface-visibility: hidden;*/
/*    transition: all 1.2s;*/
/*    transition-delay: 0.2s;*/
/*}*/
/*.JS_ScrollAnimationItem.isActive:after {*/
/*    width: 100%;*/
/*}*/


.txt_anim4 {
	overflow: hidden;
	line-height: 0.7;
	font-size: 43px;
}
.txt_anim4 span.d_inline_b {
	/*overflow: hidden;*/
	height: 1em;
	line-height: 1;
}
.txt_anim4 span:not(.d_inline_b) {
	display: inline-block;
	line-height: 1;
	transition: 0.8s;
	transition-property: transform;
	transition-timing-function: cubic-bezier(0,.64,.29,.99);
	transform-origin: top;
	transform: translateY(1em) rotate(10deg);
}
.txt_anim4 span.start {
	transform: none;
}


@media(max-width: 768px) {
    #loader img {
        width: 200px;
    }
    #header {
    padding-top: 0px;
}
#header #logo a {
  background-image: none;
}
#header #logo a img {
  opacity: 1;
}
#logo a {
    width: 195px;
}
#main_img {
    height: 97vw!important;
}
#page_title .page_title_gradient {
    background-size: 100% 47%!important;
    background-position: 0 100%!important;
    background-repeat: no-repeat!important;
}
.catch {
    width: 85%;
    top: 32%;
    left: 4%;
}
.contents_wrap.bg_white {
    padding: 0;
}
.intro_title, .con3_title {
    font-size: 34px;
}
#cms_2-c .box_item {
    padding-top: 0;
}
#cms_2-c .cate_txt1 {
    background: #eafaff;
    padding: 10px;
    margin-bottom: 30px;
}
}
@media screen and (min-width: 668px) and (max-width: 768px) {
.pd_l-100px.pd_r-100px {
    padding-left: 50px;
    padding-right: 50px;
}
.pd_r-100px {
    padding-right: 55px;
}
#page_top {
    right: 2px;
} 
}
@media(max-width: 667px) {
    #page_title .page_title_gradient {
    background-size: 100% 25%!important;
}
.catch {
    width: 91%;
    left: 3%;
    top: 39%;
}
#intro .intro_title {
    margin-bottom: 15px;
}
#contents1 .con1_title, #contents2 .con2_title, #contents3 .con3_title {
    margin-bottom: 20px;
}
#header #logo a img {
  width: 100%!important;
}
#logo a {
    width: 130px;
}
#logo {
    padding: 13px 10px 13px 0px;
}
#header {
    padding-top: 0px;
}
#intro .intro_title::before {
    top: -8px;
    left: -1px;
    font-size: 8vw;
}
.intro_title, .con1_title, .con2_title, .con3_title {
    font-size: 20px;
}
.con2_box {
    padding-top: 30px;
}
.cms_box > .bg_color2 {
    padding-top: 50px;
    padding-bottom: 30px;
}
.txt_anim4 {
    font-size: 32px;
    letter-spacing: 2px;
}
.footer_nav {
    padding-top: 10px;
    padding-bottom: 10px;
}
.footer_nav li a {
    padding: 5px;
}
.footer_wrap {
    padding-top: 65px;
}
#logo2 {
    margin-bottom: 20px;
}
.sns_link, .footer_txt {
    margin-bottom: 20px;
}
}



@-webkit-keyframes animate-svg-stroke-1{0%{stroke-dashoffset:900.1200561523438px;stroke-dasharray:900.1200561523438px}100%{stroke-dashoffset:0;stroke-dasharray:900.1200561523438px}}@keyframes animate-svg-stroke-1{0%{stroke-dashoffset:900.1200561523438px;stroke-dasharray:900.1200561523438px}100%{stroke-dashoffset:0;stroke-dasharray:900.1200561523438px}}@-webkit-keyframes animate-svg-fill-1{0%{fill:transparent}100%{fill:rgb(85,85,85)}}@keyframes animate-svg-fill-1{0%{fill:transparent}100%{fill:rgb(85,85,85)}}.svg-elem-1{-webkit-animation:animate-svg-stroke-1 0.6s cubic-bezier(0.47,0,0.745,0.715) 0s both,animate-svg-fill-1 0.5s cubic-bezier(0.47,0,0.745,0.715) 0.4s both;animation:animate-svg-stroke-1 0.6s cubic-bezier(0.47,0,0.745,0.715) 0s both,animate-svg-fill-1 0.5s cubic-bezier(0.47,0,0.745,0.715) 0.4s both}@-webkit-keyframes animate-svg-stroke-2{0%{stroke-dashoffset:780.8707885742188px;stroke-dasharray:780.8707885742188px}100%{stroke-dashoffset:0;stroke-dasharray:780.8707885742188px}}@keyframes animate-svg-stroke-2{0%{stroke-dashoffset:780.8707885742188px;stroke-dasharray:780.8707885742188px}100%{stroke-dashoffset:0;stroke-dasharray:780.8707885742188px}}@-webkit-keyframes animate-svg-fill-2{0%{fill:transparent}100%{fill:rgb(85,85,85)}}@keyframes animate-svg-fill-2{0%{fill:transparent}100%{fill:rgb(85,85,85)}}.svg-elem-2{-webkit-animation:animate-svg-stroke-2 0.6s cubic-bezier(0.47,0,0.745,0.715) 0.1s both,animate-svg-fill-2 0.5s cubic-bezier(0.47,0,0.745,0.715) 0.5s both;animation:animate-svg-stroke-2 0.6s cubic-bezier(0.47,0,0.745,0.715) 0.1s both,animate-svg-fill-2 0.5s cubic-bezier(0.47,0,0.745,0.715) 0.5s both}@-webkit-keyframes animate-svg-stroke-3{0%{stroke-dashoffset:660.219970703125px;stroke-dasharray:660.219970703125px}100%{stroke-dashoffset:0;stroke-dasharray:660.219970703125px}}@keyframes animate-svg-stroke-3{0%{stroke-dashoffset:660.219970703125px;stroke-dasharray:660.219970703125px}100%{stroke-dashoffset:0;stroke-dasharray:660.219970703125px}}@-webkit-keyframes animate-svg-fill-3{0%{fill:transparent}100%{fill:rgb(85,85,85)}}@keyframes animate-svg-fill-3{0%{fill:transparent}100%{fill:rgb(85,85,85)}}.svg-elem-3{-webkit-animation:animate-svg-stroke-3 0.6s cubic-bezier(0.47,0,0.745,0.715) 0.2s both,animate-svg-fill-3 0.5s cubic-bezier(0.47,0,0.745,0.715) 0.6000000000000001s both;animation:animate-svg-stroke-3 0.6s cubic-bezier(0.47,0,0.745,0.715) 0.2s both,animate-svg-fill-3 0.5s cubic-bezier(0.47,0,0.745,0.715) 0.6000000000000001s both}@-webkit-keyframes animate-svg-stroke-4{0%{stroke-dashoffset:1387.0880126953125px;stroke-dasharray:1387.0880126953125px}100%{stroke-dashoffset:0;stroke-dasharray:1387.0880126953125px}}@keyframes animate-svg-stroke-4{0%{stroke-dashoffset:1387.0880126953125px;stroke-dasharray:1387.0880126953125px}100%{stroke-dashoffset:0;stroke-dasharray:1387.0880126953125px}}@-webkit-keyframes animate-svg-fill-4{0%{fill:transparent}100%{fill:rgb(85,85,85)}}@keyframes animate-svg-fill-4{0%{fill:transparent}100%{fill:rgb(85,85,85)}}.svg-elem-4{-webkit-animation:animate-svg-stroke-4 0.6s cubic-bezier(0.47,0,0.745,0.715) 0.30000000000000004s both,animate-svg-fill-4 0.5s cubic-bezier(0.47,0,0.745,0.715) 0.7000000000000001s both;animation:animate-svg-stroke-4 0.6s cubic-bezier(0.47,0,0.745,0.715) 0.30000000000000004s both,animate-svg-fill-4 0.5s cubic-bezier(0.47,0,0.745,0.715) 0.7000000000000001s both}@-webkit-keyframes animate-svg-stroke-5{0%{stroke-dashoffset:692.392333984375px;stroke-dasharray:692.392333984375px}100%{stroke-dashoffset:0;stroke-dasharray:692.392333984375px}}@keyframes animate-svg-stroke-5{0%{stroke-dashoffset:692.392333984375px;stroke-dasharray:692.392333984375px}100%{stroke-dashoffset:0;stroke-dasharray:692.392333984375px}}@-webkit-keyframes animate-svg-fill-5{0%{fill:transparent}100%{fill:rgb(177,222,235)}}@keyframes animate-svg-fill-5{0%{fill:transparent}100%{fill:rgb(177,222,235)}}.svg-elem-5{-webkit-animation:animate-svg-stroke-5 0.6s cubic-bezier(0.47,0,0.745,0.715) 0.4s both,animate-svg-fill-5 0.5s cubic-bezier(0.47,0,0.745,0.715) 0.8s both;animation:animate-svg-stroke-5 0.6s cubic-bezier(0.47,0,0.745,0.715) 0.4s both,animate-svg-fill-5 0.5s cubic-bezier(0.47,0,0.745,0.715) 0.8s both}@-webkit-keyframes animate-svg-stroke-6{0%{stroke-dashoffset:348.5455627441406px;stroke-dasharray:348.5455627441406px}100%{stroke-dashoffset:0;stroke-dasharray:348.5455627441406px}}@keyframes animate-svg-stroke-6{0%{stroke-dashoffset:348.5455627441406px;stroke-dasharray:348.5455627441406px}100%{stroke-dashoffset:0;stroke-dasharray:348.5455627441406px}}@-webkit-keyframes animate-svg-fill-6{0%{fill:transparent}100%{fill:rgb(109,212,244)}}@keyframes animate-svg-fill-6{0%{fill:transparent}100%{fill:rgb(109,212,244)}}.svg-elem-6{-webkit-animation:animate-svg-stroke-6 0.6s cubic-bezier(0.47,0,0.745,0.715) 0.5s both,animate-svg-fill-6 0.5s cubic-bezier(0.47,0,0.745,0.715) 0.9s both;animation:animate-svg-stroke-6 0.6s cubic-bezier(0.47,0,0.745,0.715) 0.5s both,animate-svg-fill-6 0.5s cubic-bezier(0.47,0,0.745,0.715) 0.9s both}@-webkit-keyframes animate-svg-stroke-7{0%{stroke-dashoffset:347.40985107421875px;stroke-dasharray:347.40985107421875px}100%{stroke-dashoffset:0;stroke-dasharray:347.40985107421875px}}@keyframes animate-svg-stroke-7{0%{stroke-dashoffset:347.40985107421875px;stroke-dasharray:347.40985107421875px}100%{stroke-dashoffset:0;stroke-dasharray:347.40985107421875px}}@-webkit-keyframes animate-svg-fill-7{0%{fill:transparent}100%{fill:rgb(44,152,239)}}@keyframes animate-svg-fill-7{0%{fill:transparent}100%{fill:rgb(44,152,239)}}.svg-elem-7{-webkit-animation:animate-svg-stroke-7 0.6s cubic-bezier(0.47,0,0.745,0.715) 0.6000000000000001s both,animate-svg-fill-7 0.5s cubic-bezier(0.47,0,0.745,0.715) 1s both;animation:animate-svg-stroke-7 0.6s cubic-bezier(0.47,0,0.745,0.715) 0.6000000000000001s both,animate-svg-fill-7 0.5s cubic-bezier(0.47,0,0.745,0.715) 1s both}@-webkit-keyframes animate-svg-stroke-8{0%{stroke-dashoffset:180.78684997558594px;stroke-dasharray:180.78684997558594px}100%{stroke-dashoffset:0;stroke-dasharray:180.78684997558594px}}@keyframes animate-svg-stroke-8{0%{stroke-dashoffset:180.78684997558594px;stroke-dasharray:180.78684997558594px}100%{stroke-dashoffset:0;stroke-dasharray:180.78684997558594px}}@-webkit-keyframes animate-svg-fill-8{0%{fill:transparent}100%{fill:rgb(109,212,244)}}@keyframes animate-svg-fill-8{0%{fill:transparent}100%{fill:rgb(109,212,244)}}.svg-elem-8{-webkit-animation:animate-svg-stroke-8 0.6s cubic-bezier(0.47,0,0.745,0.715) 0.7000000000000001s both,animate-svg-fill-8 0.5s cubic-bezier(0.47,0,0.745,0.715) 1.1s both;animation:animate-svg-stroke-8 0.6s cubic-bezier(0.47,0,0.745,0.715) 0.7000000000000001s both,animate-svg-fill-8 0.5s cubic-bezier(0.47,0,0.745,0.715) 1.1s both}@-webkit-keyframes animate-svg-stroke-9{0%{stroke-dashoffset:226.25624084472656px;stroke-dasharray:226.25624084472656px}100%{stroke-dashoffset:0;stroke-dasharray:226.25624084472656px}}@keyframes animate-svg-stroke-9{0%{stroke-dashoffset:226.25624084472656px;stroke-dasharray:226.25624084472656px}100%{stroke-dashoffset:0;stroke-dasharray:226.25624084472656px}}@-webkit-keyframes animate-svg-fill-9{0%{fill:transparent}100%{fill:rgb(44,152,239)}}@keyframes animate-svg-fill-9{0%{fill:transparent}100%{fill:rgb(44,152,239)}}.svg-elem-9{-webkit-animation:animate-svg-stroke-9 0.6s cubic-bezier(0.47,0,0.745,0.715) 0.8s both,animate-svg-fill-9 0.5s cubic-bezier(0.47,0,0.745,0.715) 1.2000000000000002s both;animation:animate-svg-stroke-9 0.6s cubic-bezier(0.47,0,0.745,0.715) 0.8s both,animate-svg-fill-9 0.5s cubic-bezier(0.47,0,0.745,0.715) 1.2000000000000002s both}@-webkit-keyframes animate-svg-stroke-10{0%{stroke-dashoffset:225.86495971679688px;stroke-dasharray:225.86495971679688px}100%{stroke-dashoffset:0;stroke-dasharray:225.86495971679688px}}@keyframes animate-svg-stroke-10{0%{stroke-dashoffset:225.86495971679688px;stroke-dasharray:225.86495971679688px}100%{stroke-dashoffset:0;stroke-dasharray:225.86495971679688px}}@-webkit-keyframes animate-svg-fill-10{0%{fill:transparent}100%{fill:rgb(177,222,235)}}@keyframes animate-svg-fill-10{0%{fill:transparent}100%{fill:rgb(177,222,235)}}.svg-elem-10{-webkit-animation:animate-svg-stroke-10 0.6s cubic-bezier(0.47,0,0.745,0.715) 0.9s both,animate-svg-fill-10 0.5s cubic-bezier(0.47,0,0.745,0.715) 1.3s both;animation:animate-svg-stroke-10 0.6s cubic-bezier(0.47,0,0.745,0.715) 0.9s both,animate-svg-fill-10 0.5s cubic-bezier(0.47,0,0.745,0.715) 1.3s both}
/* ======================================================================================
　　loading
======================================================================================== */
.top_loading {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    background-color: #fff;
    animation: 1s fade 2.1s 1 forwards;
}
.top_loading::before{
    display: inline-block;
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    z-index: 4;
    animation: 1s top_loading 1 forwards;
    opacity: 0;
}
@keyframes fade {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}
@keyframes top_loading {
  0% {
    opacity: 0;
    filter: blur(1);
  }

  100% {
    opacity: 1;
    filter: blur(0);
  }
}
.svg_catch {
    z-index: 5;
    max-width: 390px;
}
.svg_catch svg {
    width: 100%;
}













.link_type_slick .box_txt1 {
    height: 6em;
	line-height: 1.7;
}
.link_type_slick .date {
    padding: 9px 22px 7px;
    border-radius: 45px;
}
.slick-slide img {
    box-shadow: 0 2px 4px rgb(0 0 0 / 0%);
}
/*--- slick ------------------------------------*/
.link_type_slick .slick-box{
    opacity: 0;
    transition: 3s;
}
.link_type_slick .slick-initialized{
    opacity: 1
}
.link_type_slick .slick-box .prev,.slick-box .next {
    display: block;
	cursor: pointer;
	position: absolute;
	top: 40%;
	z-index: 1;
	padding: 15px;
}
.link_type_slick .slick-container{
    padding-left: 30px;
    padding-right: 30px;
}
.link_type_slick .slick-box .prev {
	left: -54px;
}
.link_type_slick .slick-box .next {
	right: -54px;
}
/* Dots */
.link_type_slick .slick-dots{
    position: absolute;
    bottom: -35px;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
}
.link_type_slick .slick-dots li{
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 0 5px;
    padding: 0;
    cursor: pointer;
}
.link_type_slick .slick-dots li button{
    font-size: 0;
    line-height: 0;
    display: block;
    width: 20px;
    height: 20px;
    padding: 5px;
    cursor: pointer;
    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}
.link_type_slick .slick-dots li button:hover,
.link_type_slick .slick-dots li button:focus{
    outline: none;
}
.link_type_slick .slick-dots li button:hover:before,
.link_type_slick .slick-dots li button:focus:before{
    opacity: 1;
}
.link_type_slick .slick-dots li button:before{
    font-family: 'slick';
    font-size: 6px;
    line-height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    content: '●';
    text-align: center;
    opacity: .25;
    color: black;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.link_type_slick .slick-dots li.slick-active button:before{
    opacity: .75;
    color: black;
}
/* 最後まで行ったら、矢印透過する */
.link_type_slick .slick-disabled{
	opacity: 0.3;
}
/* 要素の高さを合わせる */
.link_type_slick .slick-slide {
	height: auto !important;
}
.link_type_slick .slick-track {
	display: flex;
}

/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
.link_type_slick .slick-container{
    padding-left: 0;
    padding-right: 0;
}
.link_type_slick .slick-box .prev {
	left: -8px;
}
.link_type_slick .slick-box .next {
	right: -8px;
}
/* 両サイドの画像を透過 */
.link_type_slick .slick-initialized .slick-slide{
	opacity: 0.1; 
}
/* センター画像を非透過 */
.link_type_slick .slick-initialized .slick-slide.slick-center{
	opacity: 1; 
}
}
