/* fast animation */
body{
    max-width: 100vw;
    user-select:none;
    opacity:0;
    color:#333333;
    animation:b_ani 0.4s ease;
    animation-fill-mode:forwards
}
@keyframes b_ani {0%{opacity:0}100%{opacity:1}}
body.fast_body{opacity:1}

/* default */
img{pointer-events:none}
a{width:100%;height:100%}
@media screen and (max-width: 1024px){.pc{display:none}}
@media screen and (min-width: 1025px){.sp{display:none}}

/* page animation*/
#animation_bg{
    width: 0%;
    height: 100%;
    background: #ffffff;
    position: fixed;
    top: 0;
    z-index: 15;
    opacity: 0;
    transition:all 0.7s  ease-in-out
}
#animation_bg.transition1{
    width: 100%;
    opacity: 1;
    left:0;
}
#animation_bg.transition2{
    width: 100%;
    opacity: 1;
    right: 0;
}
#animation_bg.transition3{
    width: 0%;
    opacity: 0;
    right: 0;
}


/*header*/
#header{
    width:100%;
    background:#ffffff;
    position:fixed;top:-180px;left:0;z-index:21
}
.header_wrapper{
    width:100%;
    padding:0 40px;
    box-sizing:border-box;
    display: flex;
    justify-content: space-between
}
.second_body #header{
    animation:header_animation 0.5s ease forwards
}
@keyframes header_animation{0%{top:-180px}100%{top:0}}
@media screen and (max-width: 767px) {
    #header{height:54px}
    .header_wrapper{padding:0 14px}
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
    #header{height:60px}
    .header_wrapper{padding:0 20px}
}
@media screen and (min-width: 1025px) {
    #header{height:70px}
    .header_wrapper{padding:0 40px}
}


/*logo*/
#logo{font-size:0}
.logo_url{display:block}
@media screen and (min-width: 1025px){
    #logo{
        margin:17px 0
    }
    .logo_img{
        width:200.391px;height:36px
    }
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
    #logo{
        margin:12px 0;
    }
    .logo_img{
        width:200.391px;height:36px
    }
}
@media screen and (max-width: 767px) {
    #logo{
        margin:12px 0;
    }
    .logo_img{
        width:167px;height:30px
    }
}


/*global menu*/
.menu{display:flex}
.main_menu_item{
    width:100%;
    color:#333;font-size:16px;font-weight:700;
    cursor:pointer;
}
.main_menu_language{
    color:#333;
    border-radius:100px;
    cursor:pointer;
    position: relative
}
.main_menu_language::after{
    content:"▼";font-size:14px;
    margin: 2px 0 0 0;
    position:absolute;right:0px
}
@media screen and (min-width: 1025px){
    .main_menu_language:hover{
        color:#15B1E3
    }
}
@media screen and (max-width: 1025px){
    .main_menu_language{
        line-height:60px;padding:0 24px 0 0
    }
}

/*hamburger*/
.bg{
    width:100vw;height:100vh;
    min-height:-webkit-fill-available;
    background:#ffffff;
    position:fixed;top:0;right:0;z-index:-1;
}

/*share btn*/
.side_share{position:fixed;z-index:19;transform:translateY(-50%)}
.side_share_inner{position:relative}
.side_share_title{font-weight:700;color:#3D3E3F}
.side_share_link_icon {cursor:pointer;font-size:20px}
#twitter:hover{color:#00A2FF}#facebook:hover{color:#5E5EBF}
#line:hover{color:#46D126}#hatena:hover{color:#009AD0}
@media screen and (min-width: 1025px){
    /*share*/
    .side_share{
        width:30px;
        top:50%;right:-30px;transition:ease 0.4s
    }
    .second_body .side_share{right:8px}
    .side_share_title{
        display:block;
        font-size:11px;line-height:30px;letter-spacing:5px;
        transform-origin:0 0;
        transform:rotate(90deg);
        position:absolute;left:30px
    }
    .side_share_link{padding-top:70px}
    .side_share_link li{
        text-align:center;margin-bottom:16px
    }
}
@media screen and (max-width: 1025px){
    /*share*/
    .side_share{bottom:-120px;right:54px}
    .side_share_inner{display:flex}
    .side_share_title{
        display: inline-block;
        font-size:10px;line-height: 20px;
        margin: 0 4px;
    }
    .side_share_link{display:flex}
    #float_share{display:flex}
    .side_share_link li {
        margin:0 5px
    }
    .second_body .side_share{
        animation:share_animation 0.4s ease;
        animation-fill-mode:forwards;
    }
    @keyframes share_animation{0%{bottom:-120px}100%{bottom:0}}
}

/*top scroll*/
#top_scroll_btn{
    bottom:10px;z-index:18;
    cursor:pointer
}
#top_scroll_btn p{
    width:0;height:0;
    position:absolute;
    overflow:hidden
}
#top_scroll_btn,#top_scroll_btn::after{
    width:14px;height:14px;
    position:absolute
}
#top_scroll_btn::after {
    content:"";
    border-right:2px solid currentColor;
    border-top:2px solid currentColor;
    transform:rotate(-45deg);
    top:0;right:50%
}
@media screen and (max-width: 1024px){
    #top_scroll_btn{right:14px}
}
@media screen and (min-width: 1025px){
    #top_scroll_btn{right:40px}
}

/*main*/
main{
    max-width: 100vw;
    overflow-x: hidden;
}
@media screen and (max-width: 767px){
    #main{margin:54px 0 0 0}
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
    #main{margin:60px 0 0 0}
}
@media screen and (min-width: 1025px) {
    #main{padding:70px 0 0 0}
}

/*bread crumb*/
/* .breadcrumb{position: absolute} */
.breadcrumb ol{display:flex}
.breadcrumb li::before{content:">"}
.breadcrumb li:first-child::before{content:""}
.breadcrumb a{font-size:13px;color:#333;padding:0 10px}
@media screen and (min-width: 1025px){
    .breadcrumb{padding:0px 0 0}
}
@media screen and (max-width: 1024px){
    .breadcrumb{padding:10px 0 0}
}

/* contents box */
.contents_box{display:block}
.contents_box_wrap{width:calc(100% - 28px)}
@media screen and (min-width: 1025px){
    .contents_box_wrap{max-width:1100px;margin:200px auto}
    .contents_box_wrap2{margin:200px auto}
    .contents_box_wrap.start,.contents_box_wrap2.start{margin: 80px auto 200px}
    .contents_box_wrap.start2,.contents_box_wrap2.start2{margin: 0px auto 200px}
    .contents_box_wrap.end,.contents_box_wrap2.end{margin:200px auto 80px}
}
@media screen and (max-width: 1024px){
    .contents_box_wrap,.contents_box_wrap2{margin:140px auto}
    .contents_box_wrap.start,.contents_box_wrap2.start{margin: 26px auto 140px}
    .contents_box_wrap.start2,.contents_box_wrap2.start2{margin: 0px auto 140px}
    .contents_box_wrap.end,.contents_box_wrap2.end{margin:140px auto 26px}

}

/* title */
.title{color:#333;text-align:center}
.title::before{/* sub title */
    content:attr(data-en);
    display:block;
    color:#15B1E3;
    text-transform:uppercase;
    margin:0 0 10px 0
}
@media screen and (min-width: 1025px){
    .title{font-size:30px}
    .title::before{font-size:20px}
}
@media screen and (max-width: 1024px) {
    .title{font-size:20px}
    .title::before {font-size:14px}
}

/* text box */
.text_box{
    display:block;
    width:100%;
    font-size:17px;line-height:1.7;font-weight:500
}
@media screen and (min-width: 1025px) {
    .text_box{
        font-size:16px;text-align:center;
        margin:80px auto
    }
}
@media screen and (min-width: 768px) and (max-width: 1024px){
    .text_box{
        font-size:15px;text-align:center;
        margin:60px auto
    }
}
@media screen and (max-width: 768px) {
    .text_box{
        font-size:14px;text-align:left;
        margin:40px auto
    }
}

/* button */
.contents_box_btn{
    display:block;
    width:280px;height:54px;
    margin:0 auto;text-align:center;line-height:54px;
    border-radius:10px;
    color:#ffffffff;
    background-image:linear-gradient( 109.6deg,  rgba(61,245,167,1) 11.2%, rgba(9,111,224,1) 91.1% );
    box-shadow:rgba(0, 0, 0, 0.3) 4px 19px 38px, rgba(0, 0, 0, 0.22) 4px 15px 12px;
    transition:0.3s ease
}
.contents_box_btn:hover{/* button hover */
    transform:scale(0.94);
    box-shadow:rgba(0, 0, 0, 0.3) 0px 9px 20px, rgba(0, 0, 0, 0.22) 0px 2px 4px
}

/*footer*/
#footer{
    width:100%;height:40px;
    background:#ffffff;
    flex-wrap:wrap;
    position:fixed;
    right:0;bottom:-180px;
    z-index:18
}
.second_body #footer{
    animation:footer_animation 0.4s ease;
    animation-fill-mode:forwards
}
@keyframes footer_animation {
    0% {bottom:-180px}100% {bottom:0}
}
.footer_wrapper{
    width:100%;height:20px;
    box-sizing:border-box;
    padding:10px 40px;
    font-size:16px;font-weight:700
}
@media screen and (max-width: 767px) {
    .footer_wrapper{padding: 10px 14px!important}
}


/*copyright*/
@media screen and (min-width: 1025px) {
    .copyright{line-height:20px}
}
@media screen and (max-width: 1024px) {
    .copyright{font-size:12px}
}

/*PC*/
@media screen and (min-width: 1025px) {
    /*global menu*/
    #navigation{width:700px}
    .menu{justify-content:space-around}
    .main_menu_item{height:70px;line-height:70px}
    .main_menu_item:hover{color:#15B1E3}
    /*hamburger*/
    #hm_bg{display:none}
}
/*tablet*/
@media screen and (min-width: 768px) and (max-width: 1024px) {
    /*global menu*/
    #navigation{padding:60px 0 0 0}
    .main_menu_item{font-size:20px}
    /*hamburger*/
    #hamburger_menu {
        width:36px;height:28px;
        top:16px;right:18px
    }
    .hamburger_line,
    .hamburger_line::before,
    .hamburger_line::after {
        width:36px;height:4px
    }
    .hamburger_line::before {top:-11px}
    .hamburger_line::after{top:11px}
}
@media screen and (max-width: 1024px) {
    /*global menu*/
    #navigation{
        display:inline;
        width:320px;height:100%;
        background:#ffffff;
        position:fixed;
        top:0;right:-320px;
        z-index:100;
        transition:.3s
    }
    .hmon #navigation{
        display:inline;
        right:0;
        transition:.3s
    }
    .menu{
        width:100%;height:100%;
        padding:0 30px;
        flex-flow:column
    }
    .main_menu_item{
        display:block;
        height:100%;
        line-height:50px
    }
    /*hamburger*/
    #hm_bg{
        width:100%;height:100%;
        background:rgba(0,0,0,0.8);
        position:fixed;
        top:0;left:0;
        z-index:20;
        opacity:0;
        transition:all .3s ease;
        pointer-events:none
    }
    .hmon #hm_bg{
        opacity: 1;
        transition: all .3s ease;
        pointer-events:all
    }
    #hamburger_menu {
        display: block;
        background: transparent;
        position: fixed;
        z-index: 30;
        text-decoration: none;
        appearance: none;
        cursor: pointer;
        transition: all .3s ease-in-out
    }
    .hamburger_line {
        background: #000000;
        margin: auto;
        position: absolute;
        top:0;right:0;bottom:0;left:0;
        transition: inherit
    }
    .hamburger_line::before,
    .hamburger_line::after {
        content: '';
        display: block;
        background: #000000;
        position: absolute;
        transition: inherit
    }
    #hamburger_menu[aria-expanded="true"] .hamburger_line {
        background: transparent
    }
    #hamburger_menu[aria-expanded="true"] .hamburger_line::before,
    #hamburger_menu[aria-expanded="true"] .hamburger_line::after {
        top: 0
    }
    #hamburger_menu[aria-expanded="true"] .hamburger_line::before {
        transform: rotate(45deg)
    }
    #hamburger_menu[aria-expanded="true"] .hamburger_line::after {
        transform: rotate(-45deg)
    }
    .hamburger_text {
        position:absolute;width:0;height:0;overflow:hidden
    }
}
/*smart phone*/
@media screen and (max-width: 767px) {
    /*global menu*/
    #navigation{
        padding:54px 0 0 0
    }
    /*hamburger*/
    #hamburger_menu {
        width:30px;height:21px;
        top:-80px;right:14px
    }
    .hamburger_line {
        width:30px;height:3px
    }
    .hamburger_line::before,
    .hamburger_line::after {
        width:30px;height:3px
    }
    .hamburger_line::before{top:-9px}
    .hamburger_line::after{top:9px}
    .second_body #hamburger_menu{
        animation: hamburger_animation 0.4s ease;
        animation-fill-mode: forwards
    }
    @keyframes hamburger_animation {
        0%{top:-40px}100%{top:16.5px}
    }
}

/*footer menu*/
.footer_menu{
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    padding-bottom: 60px;
    font-weight: 500;
}
.footer_menu ul{
    display: flex;
    justify-content:flex-end;
}
.navigation_list{
    display: flex;
}
.navigation_list .list_item{
    font-size: 14px;
    margin-left: 15px;
}
.footer_menu .list_item:hover{
    text-decoration: underline;
}
@media screen and (max-width: 767px) {
    .footer_menu ul{
        flex-wrap: wrap;
        justify-content:flex-end;
    }
    .navigation_list .list_item{
        width: 50%;
        margin: 20px 0;
        text-align: center;
    }
}