@charset "UTF-8";

:root {
    --c-main: #2DA4AC;
    --c-text: #EDEDED;
    --c-bg: #4E4E4E;
    --f-en: "Tiro Tamil", serif;
}

.tiro {
    font-family: var(--f-en);
    font-weight: 400;
    font-style: normal;
}

/* body
***************************************************************/
body {
    background: var(--c-bg);
    color: var(--c-text);
    transition: background 0.4s;
}
body.c-gray {
    background: var(--c-bg);
}
body.c-white {
    background: var(--c-text);
}
/* body
***************************************************************/

/* ヘッダー
***************************************************************/
#group_header {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 80px;
    background: var(--c-bg);
    z-index: 9;
}
#group_header .inner {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 40px;
}
#group_header .h_logo {
    width: 245px;
}
#group_header.fixed {
    position: fixed;
    top: -90px;
    transition: top 0.4s,background 0.4s;
}
#group_header.view {
    top: 0;
}
#group_header.hide {
    top: -90px;
}

body.c-white #group_header {
    background: var(--c-text);
}

@media all and (max-width: 680px) {
    #group_header {
        height: 70px;
    }
    #group_header .inner {
        padding: 0 20px;
    }
    #group_header .h_logo {
        width: 55.523%;
    }
    #group_header.fixed {
        top: -80px;
    }
    #group_header.view {
        top: 0;
    }
    #group_header.hide {
        top: -80px;
    }
}
/* ヘッダー
***************************************************************/

/* フッター
***************************************************************/
#group_footer {
    background: var(--c-main);
}
#group_footer .inner {
    padding: 42px 60px 25px;
}
#group_footer .f_logo {
    width: 245px;
}
#group_footer .f_adress {
    font-size: 13px;
    letter-spacing: 0.05em;
    margin-top: 25px;
}
#group_footer .f_link {
    margin-top: 15px;
}
#group_footer .f_link li {
    line-height: 1.4;
}
#group_footer .f_link li a {
    font-size: 13px;
    letter-spacing: 0.05em;
    color: var(--c-text);
}
#group_footer .f_copyright {
    font-size: 12px;
    letter-spacing: 0.1em;
    text-align: right;
    margin-top: 20px;
}
@media all and (max-width: 680px) {
    #group_footer .inner {
        padding: 36px 30px 30px;
    }
    #group_footer .f_logo {
        width: 77.78%;
        margin: 0 auto;
    }
    #group_footer .f_adress {
        line-height: 19px;
        margin-top: 30px;
    }
    #group_footer .f_link {
        margin-top: 15px;
    }
    #group_footer .f_copyright {
        text-align: center;
        margin-top: 20px;
    }
}
/* フッター
***************************************************************/

/* inview
***************************************************************/
@media all and (min-width: 681px) {
    .action01 {
        opacity: 0;
        transform: translateY(20px);
        position: relative;
        transition: opacity 0.6s, transform 0.6s ease-out;
    }
    .action01.action {
        opacity: 1;
        transform: translateY(0);
    }
    .action02 {
        opacity: 0;
        transform: translateX(-20px);
        position: relative;
        transition: opacity 0.6s, transform 0.6s ease-out;
    }
    .action02.action {
        opacity: 1;
        transform: translateY(0);
    }
    .action03 {
        opacity: 0;
        transform: translateX(20px);
        position: relative;
        transition: opacity 0.6s, transform 0.6s ease-out;
    }
    .action03.action {
        opacity: 1;
        transform: translateX(0);
    }
    .action04 {
        opacity: 0;
        transition: opacity 0.6s ease-out;
    }
    .action04.action {
        opacity: 1;
    }
    .action05 {
        opacity: 0;
        filter: blur(10px);
        transition: opacity 1s ease,filter 1s ease;
    }
    .action05.action {
        opacity: 1;
        filter: blur(0);
    }
    .delay1 {
        transition-delay: 0.3s;
    }
    .delay2 {
        transition-delay: 0.6s;
    }
    .delay3 {
        transition-delay: 0.9s;
    }
    .delay4 {
        transition-delay: 1.2s;
    }
    .delay5 {
        transition-delay: 1.5s;
    }
}

@media all and (max-width: 680px) {
    .action01_sp {
        opacity: 0;
        transform: translateY(20px);
        position: relative;
        transition: opacity 0.6s, transform 0.6s ease-out;
    }
    .action01_sp.action {
        opacity: 1;
        transform: translateY(0);
    }
    .action02_sp {
        opacity: 0;
        transform: translateX(-20px);
        position: relative;
        transition: opacity 0.6s, transform 0.6s ease-out;
    }
    .action02_sp.action {
        opacity: 1;
        transform: translateY(0);
    }
    .action03_sp {
        opacity: 0;
        transform: translateX(20px);
        position: relative;
        transition: opacity 0.6s, transform 0.6s ease-out;
    }
    .action03_sp.action {
        opacity: 1;
        transform: translateX(0);
    }
    .action04_sp {
        opacity: 0;
        transition: opacity 0.6s ease-out;
    }
    .action04_sp.action {
        opacity: 1;
    }
    .action05_sp {
        opacity: 0;
        filter: blur(10px);
        transition: opacity 1s ease,filter 1s ease;
    }
    .action05_sp.action {
        opacity: 1;
        filter: blur(0);
    }
    .delay1_sp {
        transition-delay: 0.3s !important;
    }
    .delay2_sp {
        transition-delay: 0.6s !important;
    }
    .delay3_sp {
        transition-delay: 0.9s !important;
    }
    .delay4_sp {
        transition-delay: 1.2s !important;
    }
    .delay5_sp {
        transition-delay: 1.5s !important;
    }
}
/* inview
***************************************************************/




@media all and (min-width: 681px) {
  
}

@media all and (max-width: 680px) {
  
}