:root {
    --black:#000000;
    --black02:#2F2F2F;
    --blue01:#0F1C38;
    --aqua:#2CA6E0;
    --yellow:#E4BB00;
    --orange:#F29600;
    --green:#87C022;
    --mazenda:#E74382;
    --green03:#58FF00;
    --green04:#DFEC1B;
    --white:#ffffff;
    --info:#2CA6E0;
    --service:#87C022;
    --event:#E4BB00;
    --seminar:#E74382;

    --font:"Noto Sans JP",'Hiragino Sans','Meiryo','Hiragino Kaku Gothic ProN',sans-serif;
    --fontmaru:"M PLUS Rounded 1c", sans-serif;
    --fonten:"Open Sans",sans-serif;
    /* --fontserif:; */
    /* --fontsunserif:; */

    /*1440px基準*/
    --size10:clamp(8px, 0.69444vw, 10px);
    --size15:clamp(12px, 1.04166vw, 15px);
    --size20:clamp(16px, 1.38888vw, 20px);
    --size25:clamp(22px, 1.7361vw, 25px);
    --size30:clamp(28px, 2.08332vw, 30px);
    --size35:clamp(28px, 2.43054vw, 35px);
    --size40:clamp(36px, 2.77776vw, 40px);
    --size45:clamp(42px, 3.12498vw, 45px);
    --size50:clamp(48px, 3.4722vw, 50px);
    --size55:clamp(52px, 3.89142vw, 55px);
    --size60:clamp(56px, 4.16664vw, 60px);
    --size70:clamp(64px, 4.86108vw, 70px);
    --size80:clamp(72px, 5.55552vw, 80px);
    --size90:clamp(85px, 6.24996vw, 90px);
    --size95:clamp(90px, 6.59718vw, 95px);
    --size100:clamp(90px, 6.9444vw, 100px);
    
    --fsize10:clamp(9px, 0.69444vw, 10px);
    --fsize12:clamp(11px, 0.833328vw, 12px);
    --fsize13:clamp(12px, 0.902772vw, 13px);
    --fsize14:clamp(13px, 0.972216vw, 14px);
    --fsize15:clamp(14px, 1.04166vw, 15px);
    --fsize16:clamp(15px, 1.111104vw, 16px);
    --fsize18:clamp(16px, 1.249992vw, 18px);
    --fsize20:clamp(18px, 1.38888vw, 20px);
    --fsize24:clamp(20px, 1.666656vw, 24px);
    --fsize26:clamp(22px, 2.08332vw, 26px);
    --fsize28:clamp(24px, 1.944432vw, 28px);
    --fsize32:clamp(28px, 2.222208vw, 32px);
    --fsize36:clamp(32px, 2.499984vw, 36px);
    --fsize48:clamp(42px, 3.333312vw, 48px);

    --innergap:min(5.20%, 100px);
    --outergap:min(3.125%, 60px);

    --shadow: 10.61px 10.61px 5.31px rgba(0, 0, 0, 0.15);
    --shadow02: 8.888px 8.888px 4.44px rgba(0, 0, 0, 0.15);

    --grad01 : linear-gradient(90deg, rgba(82, 226, 147, 1) 0%, rgba(35, 53, 15, 1) 100%);
    --grad01_ov : linear-gradient(90deg, rgba(82, 226, 147, 1) 20%, rgba(35, 53, 15, 1)80%);

    --crip_arw_b:polygon(50% 100%, 0 0, 100% 0);
    --crip_arw_t:polygon(50% 0%, 0% 100%, 100% 100%);
    --crip_arw_l:polygon(100% 0, 0 50%, 100% 100%);
    --crip_arw_r:polygon(0 0, 0% 100%, 100% 50%);
    
    --easeout:cubic-bezier(0,0,.5,1);
    --easein:cubic-bezier(.3,0,1,.7);
    --easeinout:cubic-bezier(.3,0,.7,1);
    --ease:cubic-bezier(.3,.11,.3,.98);
    --liner:cubic-bezier(0,0,1,1);
}

html {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}
body {
    color: var(--black02);
    font-family:var(--font);
    font-optical-sizing: auto;
    font-weight: 400;
    font-size: var(--fsize16);
    line-height: 1.75;
    position: relative;   
}
@media (max-width:1600px) {
    body {
        font-size: var(--fsize16);
    }
}
.en 
{
    font-family: var(--fonten);
}
.maru {
    font-family: var(--fontmaru);
}
h1,h2,h3,h4,h5,h6,ul,figure,dt,dt,dd,ol {
    margin-top:0;
    margin-bottom:0;
    margin-left:0;
    margin-right:0;
    font-size: 1em;
}
p {
    margin-top:0;
}
p:last-child {
    margin-bottom:0;
}
img {
    max-width:100%;
    display: block;
}
summary::marker{
    display: none;
}
a {
    text-decoration: none;
    color:var(--black);
}

/*----------------------------------
   layout
-----------------------------------*/
div.bg_body {
    position:fixed;
    left:0;
    top:0;
    width:100%;
    height:100svh;
}
div.bg_body img, div.bg_body picture {
    width:100%;
    height:100%;
    object-fit: cover;
}
div.bg_body:after {
    content:"";
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
    background-image: linear-gradient(rgba(238, 238, 239, 0.25) 1px, transparent 1px), linear-gradient(to right, rgba(238, 238, 239, 0.25) 1px, transparent 1px);
    background-size: 100px 100px;
    background-color: transparent;
    background-position: center -18px;
    transition: .5s var(--easein);
} 
.js-bg_white div.bg_body:after {
    background-color: rgb(255 255 255 / 0.9);
}
.js-bg_blue div.bg_body:after {
    background-color: #2CA6E0;
    mix-blend-mode: hard-light;
}
.js-bg_pink div.bg_body:after {
    background-color: #E74382;
    mix-blend-mode: hard-light;
}

main {
    width:100%;
    container-type: inline-size;  
}
.container {
    width:calc(100% - var(--outergap)*2);
	margin: 0 auto;
    padding:0 var(--innergap);
    position:relative;
}
@media (max-width:1600px) {
.container {
    width:min(100%,1280px);
	margin: 0 auto;
    padding:0 var(--innergap);
    position:relative;
}
}
.breaking-out {
	margin-inline: calc(50% - 50cqi);
}
.breaking-out.-bg {
	padding-inline: calc(50cqi - 50%);
}
.breaking-out.-bgr {
	padding-inline: 0 calc(50cqi - 50%);
}
.breaking-out.-bgl {
	padding-inline: calc(50cqi - 50%) 0;
}
.section {
    position:relative;
    overflow: hidden;
}
.bg {
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
}
.bg > * {
    position:absolute;
}
.dot {
    display: block;
    width:50px;
    height:50px;
}
.dot.dot_xxl {
    width:200px;
    height:200px;
}
.dot.dot_xl {
    width:150px;
    height:150px;
}
.dot.dot_l {
    width:100px;
    height:100px;
}
.dot.dot_s {
    width:25px;
    height:25px;
}
.bg_9EF982 {background-color: #9EF982;}
.bg_3AEEE6 {background-color: #3AEEE6;}
.bg_41C4FE {background-color: #41C4FE;}
.bg_CD7BE3 {background-color: #CD7BE3;}
.bg_89FE84 {background-color: #89FE84;}
.bg_BCFE3C {background-color: #BCFE3C;}
.bg_A696EF {background-color: #A696EF;}
.bg_57FDC1 {background-color: #57FDC1;}
.bg_A480D2 {background-color: #A480D2;}
.bg_C26FC5 {background-color: #C26FC5;}
.bg_8D8EDC {background-color: #8D8EDC;}
.bg_D266BF {background-color: #D266BF;}
.bg_37BFFF {background-color: #37BFFF;}
.bg_F652B0 {background-color: #F652B0;}
.bg_A3FE61 {background-color: #A3FE61;}
.bg_A1EEDA {background-color: #A1EEDA;}
.bg_ABF2CD {background-color: #ABF2CD;}
.bg_8BE4FD {background-color: #8BE4FD;}
.bg_9BECE3 {background-color: #9BECE3;}
.bg_FEF592 {background-color: #FEF592;}
.bg_F4F791 {background-color: #F4F791;}
.bg_DCFD8E{background-color: #DCFD8E;}
.bg_D3FE8C {background-color: #D3FE8C;}
.bg_E4FEBA {background-color: #E4FEBA;}
.bg_FFF5FF {background-color: #FFF5FF;}
.bg_D9FFFF {background-color: #D9FFFF;}
.bg_D8DEFF {background-color: #D8DEFF;}
.bg_E9CCF6 {background-color: #E9CCF6;}
.bg_FAD9FC {background-color: #FAD9FC;}
.bg_FCCF00 {background-color: #FCCF00;}
.bg_2CA6E0 {background-color: #2CA6E0;}
.bg_E34498 {background-color: #E34498;}
.bg_87C022 {background-color: #87C022;}
.bg_F29600 {background-color: #F29600;}
.bg_F196E6 {background-color: #F196E6;}
.bg_CBBCF9 {background-color: #CBBCF9;}
.bg_F197E7 {background-color: #F197E7;}
.bg_F59CE6 {background-color: #F59CE6;}
.bg_D4BBFD {background-color: #D4BBFD;}
.bg_E497D3 {background-color: #E497D3;}
.bg_7AD4FF {background-color: #7AD4FF;}
.bg_EC93D0 {background-color: #EC93D0;}
.bg_96E9EC {background-color: #96E9EC;}
.bg_9EF982 {background-color: #9EF982}


/*.bg_88E4FD {background-color: #88E4FD;}*/
@media (max-width:1024px) {
    
    .container {
        padding:0 calc(var(--innergap));
    }
    div.bg_body:after {
        background-image: linear-gradient(rgba(238, 238, 239, 0.25) 1px, transparent 1px), linear-gradient(to right, rgba(238, 238, 239, 0.25) 1px, transparent 1px);
        background-size: 50px 50px;
        background-position: center -9px;
    } 
    .dot {
        width:25px;
        height:25px;
    }
    .dot.dot_xxl {
        width:100px;
        height:100px;
    }
    .dot.dot_xl {
        width:75px;
        height:75px;
    }
    .dot.dot_l {
        width:50px;
        height:50px;
    }
    .dot.dot_s {
        width:25px;
        height:25px;
    }

}
@media (max-width:768px)  {

}

.columns {
    display: grid;
    gap: clamp(20px, 1.785vw, 25px);
}
.col5x {
    grid-template-columns: repeat(5, 1fr);
}
.col4x {
    grid-template-columns: repeat(4, 1fr);
}
.col3x {
    grid-template-columns: repeat(3, 1fr);
}
.col2x {
    grid-template-columns: repeat(2, 1fr);
}
.columns.gap_l {
    gap: clamp(30px, 2.857vw, 40px);
}
@media (max-width:1024px) {
    .col3x {
    grid-template-columns: repeat(2, 1fr);
    }
    .col4x,.col5x {
        grid-template-columns: repeat(3, 1fr);
     }
}
@media (max-width:599px) {
    .col4x,.col5x {
        grid-template-columns: repeat(2, 1fr);
        }
    .col3x ,.col2x {
    grid-template-columns: repeat(1, 1fr);
    }
}
/*----------------------------------
   loading
-----------------------------------*/
@keyframes spin {
    from {
      transform: rotate(0);
    }
    to{
      transform: rotate(359deg);
    }
  }
body.over-hidden {
    width:100%;
    height:100%;
    overflow: hidden;
}
body.over-hidden.loaded {
    height:auto;
    overflow:visible;
}
.site__main__contents {
    opacity:0;
    transition:opacity .5s var(--ease);
}
.loaded .site__main__contents {
    opacity:1;
}
#loader {
    width: 100vw;
    height: 100vh;
    background: url(../img/bg.jpg) no-repeat;
    background-size:cover;
    transition: all 1s;
    position:fixed;
    left:0;
    top:0;
    isolation: isolate;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
}
#loader .circle {
    width:var(--size80);
}
#loader .circle img {
    width:100%;
    height:auto;
    mix-blend-mode: screen;
    animation: spin .8s linear 0s infinite;
}
.bg_loading_bubble {
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
    overflow: hidden;
    mix-blend-mode: screen;
}
.bg_loading_bubble img {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 133.33%;
    height: auto;
    aspect-ratio:820/617;
    animation: moveLight 20s linear infinite;
    transform: translate(-50%,-50%) scale(1.0) rotate(0deg);
}
@keyframes moveLight {
    0% {
        transform: translate(-50%,-50%) scale(1.0) rotate(0deg)
    }
    20% {
        transform: translate(-45%,-55%) scale(1.4) rotate(10deg)
    }
    40% {
        transform: translate(-48%,-53%) scale(1.2) rotate(20deg)
    }
    60% {
        transform: translate(-55%,-45%) scale(1.5) rotate(15deg)
    }
    80% {
        transform: translate(-52%,-48%) scale(1.25) rotate(8deg)
    }
    to {
        transform: translate(-50%,-50%) scale(1.0) rotate(0deg)
    }
}


/*----------------------------------
   styling
-----------------------------------*/

.black{color:var(--black);}
.black01{color:var(--black01);}
.blue01{color:var(--blue01);}
.blue02{color:var(--blue02);}
.blue03{color:var(--blue03);}
.green01{color:var(--green01);}
.green02{color:var(--green02);}
.green03{color:var(--green03);}
.green04{color:var(--green04);}
.white{color:var(--white);}

.bg_black{background-color:var(--black);}
.bg_black01{background-color:var(--black01);}
.bg_blue01{background-color:var(--blue01);}
.bg_blue02{background-color:var(--blue02);}
.bg_blue03{background-color:var(--blue03);}
.bg_blue04{background-color:var(--blue04);}
.bg_green01{background-color:var(--green01);}
.bg_green02{background-color:var(--green02);}
.bg_green03{background-color:var(--green03);}
.bg_white{background-color:var(--white);}

.font12{font-size:var(--fsize12)}
.font13{font-size:var(--fsize13)}
.font14{font-size:var(--fsize14)}
.font15{font-size:var(--fsize15)}
.font16{font-size:var(--fsize16)}
.font18{font-size:var(--fsize18)}
.font20{font-size:var(--fsize20)}
.font24{font-size:var(--fsize24)}
.font26{font-size:var(--fsize26)}
.font28{font-size:var(--fsize28)}
.font32{font-size:var(--fsize32)}
.font36{font-size:var(--fsize36)}
.font42{font-size:var(--fsize42)}
.font46{font-size:calc(0.958*var(--fsize42))}

.fw300 {font-weight:300;}
.fw400 {font-weight:400;}
.fw700 {font-weight:700;}
.fw900 {font-weight:900;}

.tac {text-align: center;}
.tal {text-align: left;}
.tar {text-align: right;}

.d_flex {display: flex;}
.wrap {flex-flow: wrap;}
.nowrap {flex-flow: nowrap;}
.d_column {flex-direction: column;}
.d_columnrev {flex-direction: column-reverse;}
.d_rowrev {flex-direction: row-reverse;}
.ws_nowrap {white-space:nowrap;}


@media (max-width:499px)  {
    .d_flex.wrap > * {
        width:100%;
    }
}

.mga {
    margin-left:auto;
    margin-right:auto;
}
.mb0{margin-bottom:0;}
.mb10{ margin-bottom: var(--size10)}
.mb15{ margin-bottom: var(--size15)}
.mb20{ margin-bottom: var(--size20)}
.mb25{ margin-bottom: var(--size25)}
.mb30{ margin-bottom: var(--size30)}
.mb35{ margin-bottom: var(--size35)}
.mb40{ margin-bottom: var(--size40)}
.mb45{ margin-bottom: var(--size45)}
.mb50{ margin-bottom: var(--size50)}
.mb55{ margin-bottom: var(--size55)}
.mb60{ margin-bottom: var(--size60)}
.mb70{ margin-bottom: var(--size70)}
.mb80{ margin-bottom: var(--size80)}
.mb90{ margin-bottom: var(--size90)}
.mb100{ margin-bottom: var(--size100)}

.mt0{margin-top:0;}
.mt10{ margin-top: var(--size10)}
.mt15{ margin-top: var(--size15)}
.mt20{ margin-top: var(--size20)}
.mt25{ margin-top: var(--size25)}
.mt30{ margin-top: var(--size30)}
.mt35{ margin-top: var(--size35)}
.mt40{ margin-top: var(--size40)}
.mt45{ margin-top: var(--size45)}
.mt50{ margin-top: var(--size50)}
.mt55{ margin-top: var(--size55)}
.mt60{ margin-top: var(--size60)}
.mt70{ margin-top: var(--size70)}
.mt80{ margin-top: var(--size80)}
.mt90{ margin-top: var(--size90)}
.mt100{ margin-top: var(--size100)}

.mi025{margin-inline: 0.25em;}
.mi05{margin-inline: 0.5em;}
.mi1{margin-inline: 1em;}

.pb0 { padding-bottom: 0}
.pb10{ padding-bottom: var(--size10)}
.pb15{ padding-bottom: var(--size15)}
.pb20{ padding-bottom: var(--size20)}
.pb25{ padding-bottom: var(--size25)}
.pb30{ padding-bottom: var(--size30)}
.pb35{ padding-bottom: var(--size35)}
.pb40{ padding-bottom: var(--size40)}
.pb45{ padding-bottom: var(--size45)}
.pb50{ padding-bottom: var(--size50)}
.pb55{ padding-bottom: var(--size55)}
.pb60{ padding-bottom: var(--size60)}
.pb70{ padding-bottom: var(--size70)}
.pb80{ padding-bottom: var(--size80)}
.pb90{ padding-bottom: var(--size90)}
.pb100{ padding-bottom: var(--size100)}

.pt0{ padding-top: 0}
.pt10{ padding-top: var(--size10)}
.pt15{ padding-top: var(--size15)}
.pt20{ padding-top: var(--size20)}
.pt25{ padding-top: var(--size25)}
.pt30{ padding-top: var(--size30)}
.pt35{ padding-top: var(--size35)}
.pt40{ padding-top: var(--size40)}
.pt45{ padding-top: var(--size45)}
.pt50{ padding-top: var(--size50)}
.pt55{ padding-top: var(--size55)}
.pt60{ padding-top: var(--size60)}
.pt70{ padding-top: var(--size70)}
.pt80{ padding-top: var(--size80)}
.pt90{ padding-top: var(--size90)}
.pt100{ padding-top: var(--size100)}

.pi025{padding-inline: 0.25em;}
.pi05{padding-inline: 0.5em;}
.pi1{padding-inline: 1em;}

.shadow {box-shadow: var(--shadow);}
.shadow02 {box-shadow: var(--shadow02);}

@media (min-width:1025px) {
    .tab { display: none !important;}
    .sp_tab { display: none!important;}
}
@media (max-width:1024px)  {
    .pc { display: none!important;}
}
@media (min-width:769px){
    .sp { display: none!important;}
}
@media (max-width:768px)  {
    .tab_pc { display: none!important;}
}
@media (min-width:600px){
    .xs {
        display: none!important;
    }
}
@media (max-width:599px) {
    
}

/*----------------------------------
   hero
-----------------------------------*/
.hero_wrap {
    width:100%;
    height:70svh;
    position:relative;
    padding-top:130px;
}
.tit_hero_wrapper {
    width:100%;
    height:100%;
    position:relative;
    display: flex;
}
.tit_hero_wrapper .container {
    display: flex;
    align-items: center;
}
.hero_tit {
    width:100%;
    justify-content: space-between;
    align-items: center;
    color:white;
    mix-blend-mode: overlay;
    padding-bottom:100px;
}
.hero_tit .h1_hero .en{
    font-size:10.42vw;
    opacity:0.8;
    line-height: 1;
}
.hero_tit .h2_hero {
    display: flex;
    flex-direction: column;
    transform: translateY(50px);
    opacity:0;
    transition:all .5s var(--easeout);
}
.hero_tit .h2_hero.show {
    transform: translateY(0);
    opacity:1;
}
.hero_tit .h2_hero .en {
    font-size:2.5vw;
}
.hero_tit .h2_hero .ja {
    font-size:1.5625vw;
    font-weight:500;
}
.textAnime {
    height:1em;
    overflow: hidden;
    display: block;
}
.textAnime span{
    display: inline-block;
    transform: translateY(110%);
}
.show .textAnime span {
    animation: textAnime .5s var(--easeout) 1s forwards;
}
@keyframes textAnime {
    100%{
    transform: translateY(0px);
    }
}
@media (max-width:1024px) {
    .hero_wrap {
        height:80svh;
        padding-top:90px;

    }
    .hero_tit {
        flex-direction: column;
        justify-content: flex-end;
        height:100%;
    }
    .hero_tit .h1_hero .en {
        font-size: 16vw;
    }
    .hero_tit .h2_hero {
        margin-top: 22vh;
        width:100%;
        align-items: flex-end;
    }
    .hero_tit .h2_hero .en {
        font-size: 8vw;
        line-height: 1.1;
    }
    .hero_tit .h2_hero .ja {
        font-size: 4vw;
    }
}
@media (max-width:768px) {

}
@media (max-width:599px) {

}


/*----------------------------------
   page contents
-----------------------------------*/
.content_wrap {
    padding-top:120px;
    z-index: 2;
    overflow: visible;
}
.content_wrap::before {
    content:"";
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
    background-image: linear-gradient(rgba(238, 238, 239, 0.6) 1px, transparent 1px), linear-gradient(to right, rgba(238, 238, 239, 0.6) 1px, transparent 1px);
    background-size: 100px 100px;
    background-color: transparent;
    background-position: center -18px;
}
.page_content .container {
    display: grid;
    grid-template-columns: 2fr 10fr;
    gap:20px;
}
.page_content .container .inner {
    grid-column: 2;
}
.content_wrap p {
    font-family: var(--fontmaru);
}
@media (max-width:1024px) {
.content_wrap::before {
    background-size: 50px 50px;
    background-position: center -9px;
}
}
@media (max-width:768px) {
    .content_wrap {
        padding-top: 80px;
        overflow: hidden;
    }
    .page_content .container {
       display: block;
    }
}
@media (max-width:599px) {

}

/*----------------------------------
   second_nav
-----------------------------------*/

.second_nav {
    position:absolute;
    z-index: 3;
}
.second_nav ul {
    padding-left:0;
    display: flex;
    flex-direction: column;
    gap: 1em;
}
.second_nav ul li a {
    color:black;
    font-weight:600;
}
.second_nav ul li a.current {
    color:white;
    background: var(--grd, linear-gradient(246deg, #21B8FF 15.86%, #FE39A3 79.98%));
} 

@media (max-width:768px) {

    .second_nav {width:100%;}
    .second_nav ul {
        flex-direction: row;
        justify-content: center;
        width:100%;
        padding-left:0;
        padding-right: calc(2* var(--innergap));
    }
}
/*----------------------------------
   breadcrumb
-----------------------------------*/
.breadcrumb {
    background-color: white;
    padding:80px 0;
}
.breadcrumb ul {
    padding-left:0;
    display: flex;
    gap:1em;
}
.breadcrumb ul li a {
    color:#666;
    text-decoration: underline;
}
.breadcrumb ul li:has(a):after {
    content:">";
    margin-left:1em;
}
/*----------------------------------
   common parts
-----------------------------------*/

h2.title {
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    gap:3.125rem;
}
h2.title * {line-height: 1.1;}
h2.title .en {
    font-weight: 900;
    letter-spacing: 0.19em;
    font-size:calc(1.125*var(--fsize24));
}
h2.title .ja {
    font-weight:600;
    font-size:1.875em;
}

.h3_tit {
    display: flex;
    align-items: baseline;
    gap:1em;
}
.h3_tit .en {
    font-size:2.5em;
}
.h3_tit .ja {
    font-size:1.25em;
    font-family: var(--fontmaru);
    font-weight:500;
}

.cont_tit span {
    display: block;
}
.cont_tit .en {
    font-size:1.5em;
    line-height: 1.2
}
.cont_tit .ja {
    font-size:1.125em;
    font-weight:500;
    font-family: var(--fontmaru);
}


p {
    font-size:1em;
}
.hero_section {
    padding-top:var(--size100);
}

@media (max-width:1280px) {

}


@media (max-width:1024px) {

}
@media (max-width:768px) {
    .h3_tit {
        flex-flow: column;
        align-items: flex-start
    }
}
@media (max-width:599px) {

}

.btn_more {
    position:relative;
    width:190px;
    height: 190px;
    border:2px solid #FFF;
    border-radius: 50%;
}
.btn_more:before {
    content:"";
    display: block;
    position:absolute;
    width:160px;
    height:2px;
    left:-80px;
    top:calc(50% - 1px);
    background-color: white;
    transition: all .3s var(--easeinout);
}
.btn_more:after {
    content:"";
    display: block;
    position:absolute;
    width:17px;
    height:17px;
    border:2px solid white;
    border-width:2px 2px 0 0;
    transform: rotate(45deg);
    left:calc(80px - 17px);
    top:calc(50% - 17px/2);
    transition: all .3s var(--easeinout);
}
.btn_more:hover:before {
    left:-65px;
}
.btn_more:hover:after {
    left:calc(80px - 17px + 15px);
}


.btn_more02 {
    display: flex;
    background-color: var(--black);
    color:white;
    padding:0 2em;
    height:4em;
    justify-content: center;
    align-items: center;
    position:relative;
    overflow: hidden
}
.btn_more02:before {
    content:"";
    width:100%;
    height:100%;
    position:absolute;
    inset:0;
    background: var(--grd, linear-gradient(246deg, #21B8FF 15.86%, #FE39A3 79.98%));
    transition:all .5s var(--easeout);
    z-index: 0;
    opacity:0;
}
.btn_more02:hover:before{
    opacity:1;
    transition:all .5s var(--easeout);
}
.btn_more02 span {
    position:relative;
}
.btn_more02 span:after {
    content:"→";
    padding-left:10px;
} 
.btn_text{
    position:relative;
}
.btn_text:before {
    content:"";
    width:0;
    height:1px;
    position:absolute;
    left:0;
    bottom:0;
    background-color: var(--black);
    transition: .3s var(--easeout);
} 
.btn_text:hover:before {
    width:100%;
}
.btn_more._small::before {
    right:var(--size20);
    width:var(--size25);
} 


@media (max-width:1024px) {

}
@media (max-width:768px) {
    .section_tit_box .btn_more {
        width:100px;
        height:100px;
        margin-right:0;
        margin-left:auto;
    }
    .btn_more:before {
        width: 70px;
        left: -20px;
    }
    .btn_more:after {
        left: calc(50px - 17px);
    }
    .btn_more:hover:before {
        left:-10px;
    }
    .btn_more:hover:after {
        left:calc(50px - 17px + 10px);
    }

}


.js-fadeUp {
    opacity:0;
    transform: translateY(50px);
    transition:all .5s var(--ease);
}
.js-fadeUp.on {
    opacity:1;
    transform: translateY(0);
}
.js-fadeRight {
    opacity:0;
    transform: translateX(50px);
    transition:all .5s var(--ease);
}
.js-fadeRight.on {
    opacity:1;
    transform: translateX(0);
}