@charset "UTF-8";
/* CSS Document */


/*------------------------------------------------------------------------------------------------
    共通
--------------------------------------------------------------------------------------------------*/
#wrap{
    width: 100%;
    margin: 0 auto;
}
@media(max-width: 767px){
    #wrap{
        width: 100%;
        margin: 0 auto;
        overflow: hidden;
    }
}


/*------------------------------------------------------------------------------------------------
    header
--------------------------------------------------------------------------------------------------*/
header{
    width: 100%;
    margin: 0 auto;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
}
header .header-in{
    width: 92%;
    padding: 40px 0 0;
    margin: 0 auto;
    /*background: #EEEEEE;*/
}
header .header-in h1.logo{
    width: 136px;
    margin: 0 auto 0 0;
}
@media(max-width: 767px){
    header .header-in{
        width: 92%;
        padding: 20px 0 0;
        margin: 0 auto;
    }
}

.navToggle {
    display: block;
    position: fixed;
    top: 30px;
    right: 4%;
    width: 48px;
    height: 48px;
    text-align: center;
    z-index: 9999;
    cursor: pointer;
    /*background: #e7e7e7;*/
}
.navToggle span {
    display: block;
    position: absolute;
    z-index: 9999;
    width: 48px;
    margin: 0 auto;
    border-bottom: solid 2px #222728;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
    left: 0;
}
.navToggle span:nth-child(1) { top: 14px;}
.navToggle span:nth-child(2) { top: 23px;}
.navToggle span:nth-child(3) { top: 32px;}
.navToggle.active {
    position: fixed;
    top: 30px;
    right: 4%;
    width: 48px;
    height: 48px;
    text-align: center;
    z-index: 9999;
    cursor: pointer;
}
.navToggle.active span {
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
}
.navToggle.active span:nth-child(1) {
    top: 24px;
    left: 0;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.navToggle.active span:nth-child(2) {
    opacity: 0;
    transition: .4s ease-in-out;
}
.navToggle.active span:nth-child(3) {
    top: 24px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}

@media(max-width: 767px){
    .navToggle {
        display: block;
        position: fixed;
        top: 15px;
        right: 4%;
        width: 40px;
        height: 40px;
        text-align: center;
        z-index: 9999;
        cursor: pointer;
    }
    .navToggle span {
        display: block;
        position: absolute;
        z-index: 9999;
        width: 40px;
        margin: 0 auto;
        border-bottom: solid 2px #222728;
        -webkit-transition: .35s ease-in-out;
        -moz-transition: .35s ease-in-out;
        transition: .35s ease-in-out;
        left: 0;
    }
    .navToggle span:nth-child(1) { top: 7px;}
    .navToggle span:nth-child(2) { top: 16px;}
    .navToggle span:nth-child(3) { top: 25px;}
    .navToggle.active {
        position: fixed;
        top: 15px;
        right: 4%;
        width: 40px;
        height: 40px;
        text-align: center;
        z-index: 9999;
        cursor: pointer;
    }
    .navToggle.active span:nth-child(1) {
        top: 12px;
        left: 0;
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
    .navToggle.active span:nth-child(3) {
        top: 12px;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        transform: rotate(45deg);
    }
}

/*----- navi -----*/
nav.gnavi {
	position: fixed;
	z-index: 9000;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
    background: rgba(255,0,0,1.00);
	transform: translateX(100%);
	transition: all 0.4s;
}
nav.gnavi ul.mainnavi {
	width: 80%;
	padding: 0;
	margin: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%);
}
nav.gnavi ul.mainnavi > li {
	width: 100%;
	list-style-type: none;
}
nav.gnavi ul.mainnavi > li > a {
	box-sizing: border-box;
	display: block;
	padding: 20px 1em 20px 50px;
	font-size: 14px;
    font-weight: bold;
	color: #FFF;
    letter-spacing: 0.2rem;
	transition: .3s;
}
nav.gnavi ul.mainnavi > li > a:hover{ opacity: .6;}
nav.gnavi ul.mainnavi > li > a span{
    display: block;
    font-family: 'Rubik', sans-serif;
    font-size: 30px;
    font-weight: 500;
    font-feature-settings: 'palt';
}
nav.gnavi ul.mainnavi > li.contact { margin-top: 0;}
nav.gnavi ul.mainnavi > li.contact { font-size: 1em;}
nav.gnavi ul.mainnavi > li.contact > a {
	padding: .8em 1em .8em 1.5em;
	color: #FFF;
	background: #b5121f;
}
nav.gnavi.active { transform: translateX(0%);}

@media(max-width: 767px){
    nav.gnavi ul.mainnavi {
        width: 86%;
        padding: 0;
        margin: auto;
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translateY(-50%) translateX(-50%);
        transform: translateY(-50%) translateX(-50%);
    }
    nav.gnavi ul.mainnavi > li > a {
        box-sizing: border-box;
        display: block;
        padding: 20px 1em 20px 0;
        font-size: 14px;
        font-weight: bold;
        color: #FFF;
        letter-spacing: 0.2rem;
        transition: .3s;
    }
    nav.gnavi ul.mainnavi > li > a span{
        display: block;
        font-family: 'Rubik', sans-serif;
        font-size: 25px;
        font-weight: 500;
        font-feature-settings: 'palt';
    }
}



/*------------------------------------------------------------------------------------------------
    スクロール誘導固定
--------------------------------------------------------------------------------------------------*/
.scroll-induction {
    display: -ms-flexbox;
    display: flex!important;
    -ms-flex-align: center;
    align-items: center;
    position: fixed;
    bottom: calc((100% - 160px)/2);
    right: 1.5%;
    color: #000;
    transition: opacity 0.75s linear;
    /*pointer-events: none;*/
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index: 1000;
    visibility: visible;
    opacity: 1;
}
.scroll-induction-txt {
    width: 38px;
    content: "SCROLL";
    font-size: 10px;
    text-align: center;
    -webkit-transform:scale(0.8);
    -moz-transform:scale(0.8);
    -ms-transform:scale(0.8);
    transform:scale(0.8);
    transform: rotate(90deg);
    letter-spacing: .05em;
}
.scroll-induction-line {
    position: relative;
    width: 1px;
    height: 160px;
    background: rgba(255, 255, 255, 0);
    overflow: hidden;
}
.scroll-induction-line-body {
    position: absolute;
    top: -100%;
    left: 0;
    width: 1px;
    height: 100%;
    background: #000;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
    -webkit-animation: nomal-scroll 3s cubic-bezier(0.57, 0.05, 0.52, 0.96) infinite;
    animation: nomal-scroll 3s cubic-bezier(0.57, 0.05, 0.52, 0.96) infinite;
}
@-webkit-keyframes nomal-scroll {
    0%, 40% { -webkit-transform: translateY(0px); transform: translateY(0px); }
    100% { -webkit-transform: translateY(200%); transform: translateY(200%); }
}
@keyframes nomal-scroll {
    0%, 40% { -webkit-transform: translateY(0px); transform: translateY(0px); }
    100% { -webkit-transform: translateY(200%); transform: translateY(200%); }
}
.scroll-induction-line-body.bottom{
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
    -webkit-animation: bottom-scroll 3s cubic-bezier(0.57, 0.05, 0.52, 0.96) infinite;
    animation: bottom-scroll 3s cubic-bezier(0.57, 0.05, 0.52, 0.96) infinite;
}
@-webkit-keyframes bottom-scroll {
    0%, 40% { -webkit-transform: translateY(200%); transform: translateY(200%); }
    100% { -webkit-transform: translateY(0px); transform: translateY(0px); }
}
@keyframes bottom-scroll {
    0%, 40% { -webkit-transform: translateY(200%); transform: translateY(200%); }
    100% { -webkit-transform: translateY(0px); transform: translateY(0px); }
}

@media(max-width: 767px){
    .scroll-induction {
        display: block!important;
        width: 20%;
        position: fixed;
        bottom: 2%;
        left: calc((100% - 20%) / 2);
        color: #000;
        transition: opacity 0.75s linear;
        pointer-events: none;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        z-index: -1;
        opacity: 0;
        /*background: #FFBFC0;*/
    }
    .scroll-induction.show{
        z-index: 1000;
        opacity: 1;
    }
    .scroll-induction.show.bottom{
        bottom: 23%;
    }
    .scroll-induction-txt {
        display: block;
        width: 100%;
        margin: 6px auto 0;
        font-size: 10px;
        text-align: center;
        -webkit-transform:scale(0.8);
        -moz-transform:scale(0.8);
        -ms-transform:scale(0.8);
        transform:scale(0.8);
        transform: rotate(0deg);
        letter-spacing: .05em;
    }
    .scroll-induction-line {
        position: relative;
        width: 1px;
        height: 50px;
        left: 50%;
        background: rgba(255, 255, 255, 0);
        overflow: hidden;
    }
    .scroll-induction-line-body {
        position: absolute;
        top: -100%;
        left: 50%;
        width: 1px;
        height: 100%;
        background: #000;
        -webkit-animation-delay: 1s;
        animation-delay: 1s;
        -webkit-animation: nomal-scroll 3s cubic-bezier(0.57, 0.05, 0.52, 0.96) infinite;
        animation: nomal-scroll 3s cubic-bezier(0.57, 0.05, 0.52, 0.96) infinite;
    }
}



/*------------------------------------------------------------------------------------------------
    top
--------------------------------------------------------------------------------------------------*/
.top{
    width: 100%;
    height: 100vh;
    position: relative;
    background: #FFF;
}
.top .top-logo{
    width: 70%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%);
}

#logo{
    height: 100vh;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%);
    /*background: #FFDADB;*/
}
#logo .changColor.c-red{
    fill: #FF0004;
    /*animation: colorChange 2s ease;*/
    transition: all 2s ease;
}
#logo.fade{
    opacity: 1;
    animation: fadeOut 2s ease forwards;
}
@keyframes fadeOut {
  0% { opacity: 1;}
  50% { }
  100% { opacity: 0;}
}

@media(max-width: 767px){
    .top{
        width: 100%;
        height: calc(100vh - 44px);
        position: relative;
        background: #FFF;
    }
    #logo{
        width: 100%;
        height: auto;
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translateY(-50%) translateX(-50%);
        transform: translateY(-50%) translateX(-50%);
        /*background: #FFDADB;*/
    }
}


/*------------------------------------------------------------------------------------------------
    OP
--------------------------------------------------------------------------------------------------*/
.section-op{
    width: 100%;
    height: 100vh;
    margin: 0 auto;
    background: #FFF;
    position: relative;
}
.section-op video{
    width: auto;
    height: 100vh;
    margin: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%);
}
.section-op .section-op-in{
    width: 80%;
    font-weight: 700;
    position: absolute;
    z-index: 10;
    /*background: rgba(127,127,127,.50);*/
}
.section-op .section-op-in .copy{ opacity: 0;}
.section-op .section-op-in .copy.copy-fade{
    opacity: 1;
    transition: all 2s ease;
}
.section-op .section-op-in p.copy1,
.section-op .section-op-in p.copy2{
    /*font-size: 60px;*/
    font-size: 4.8vw;
    letter-spacing: 1.4rem;
}

@media(min-width: 1030px){
    .section-op .section-op-in p.copy1,
    .section-op .section-op-in p.copy2{
        font-size: 55px;
    }
}


#section01 .section-op-in{
    position: absolute;
    top: 53%;
    left: 50%;
    -webkit-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%);
}
#section01 .section-op-in p.copy2{
    margin: 21% 2% 0 auto;
    text-align: right;
}

#section02 .section-op-in{
    position: absolute;
    top: 42%;
    left: 50%;
    -webkit-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%);
}
#section02 .section-op-in p.copy2{
    margin: 4% 10% 0 auto;
    text-align: right;
}
#section03 .section-op-in{
    height: calc(100vh - 15%);
    position: absolute;
    top: 54%;
    left: 50%;
    -webkit-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%);
}
#section03 .section-op-in p.copy1{ margin-top: 11%;}
#section03 .section-op-in p.copy2{
    height: 100%;
    writing-mode: vertical-rl;
    position: absolute;
    bottom: 0;
    right: 5%;
    text-align: right;
    letter-spacing: 0.6rem;
}
#section04 .section-op-in{
    position: absolute;
    top: 51%;
    left: 50%;
    -webkit-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%);
}
#section04 .section-op-in .readtext,
#section04 .section-op-in p.read-copy{
    width: 82%;
}
#section04 .section-op-in .readtext{
    /*font-size: 20px;*/
    margin: 0 auto;
    font-size: 1.5vw;
    line-height: 2;
    letter-spacing: 0.18rem;
}
#section04 .section-op-in p.read-copy{
    margin: 5% auto 0;
    font-size: 2.2vw;
    letter-spacing: 0.4rem;
}

@media(max-width: 767px){
    .section-op{
        width: 100%;
        height: calc(100vh - 44px);
        margin: 0 auto;
        background: #FFF;
        position: relative;
    }
    .section-op video{
        width: 100%;
        height: auto;
        margin: auto;
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translateY(-50%) translateX(-50%);
        transform: translateY(-50%) translateX(-50%);
    }
    .section-op .section-op-in{
        width: 80%;
        font-weight: 700;
        position: absolute;
        z-index: 10;
        /*background: rgba(127,127,127,.50);*/
    }

    .section-op .section-op-in p.copy1,
    .section-op .section-op-in p.copy2{
        font-size: 8vw;
        letter-spacing: 1rem;
    }
    #section01 .section-op-in{
        position: absolute;
        top: 14%;
        left: 50%;
        -webkit-transform: translateY(0) translateX(-50%);
        transform: translateY(0) translateX(-50%);
    }
    #section01 .section-op-in p.copy2{
        margin: 120% 0 0 auto;
        text-align: right;
    }

    #section02 .section-op-in{
        position: absolute;
        top: 14%;
        left: 50%;
        -webkit-transform: translateY(0) translateX(-50%);
        transform: translateY(0) translateX(-50%);
    }
    #section02 .section-op-in p.copy2{
        margin: 55% 0 0 auto;
        text-align: right;
    }
    #section03 .section-op-in{
        height: calc(100vh - 24%);
        position: absolute;
        top: 14%;
        left: 50%;
        -webkit-transform: translateY(0) translateX(-50%);
        transform: translateY(0) translateX(-50%);
    }
    #section03 .section-op-in p.copy1{ margin-top: 0;}
    #section03 .section-op-in p.copy2{
        height: auto;
        writing-mode: vertical-rl;
        position: absolute;
        bottom: 20%;
        right: 26%;
        letter-spacing: 0.4rem;
    }
    #section04 .section-op-in{
        width: 84%;
        position: absolute;
        top: 48%;
        left: 50%;
        -webkit-transform: translateY(-50%) translateX(-50%);
        transform: translateY(-50%) translateX(-50%);
    }
    #section04 .section-op-in .readtext,
    #section04 .section-op-in p.read-copy{
        width: 100%;
    }
    #section04 .section-op-in .readtext{
        margin: 0 auto;
        font-size: 3.4vw;
        line-height: 1.75;
        letter-spacing: 0.1rem;
    }
    #section04 .section-op-in p.read-copy{
        margin: 10% auto 0;
        font-size: 5vw;
        line-height: 1.7;
        letter-spacing: 0.3rem;
    }
}


#section01 #square{
    height: 100vh;
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%);
    z-index: 100;
    opacity: 0;
}
#section01 #square .square-anm{ fill: #FF0004;}
#section01 #square.drop{
    animation: dropIn 1.6s ease forwards;
}
@keyframes dropIn {
    0% { top: 0; opacity: 1;}
    8% { top: 0;}
    84% { top: 50%; opacity: 1;}
    100% { top: 50%; opacity: 0;}
}
@media(max-width: 767px){
    #section01 #square{
        width: 100%;
        height: auto;
        position: absolute;
        top: 0;
        left: 50.5%;
        -webkit-transform: translateY(-50%) translateX(-50%);
        transform: translateY(-50%) translateX(-50%);
        z-index: 100;
        opacity: 0;
    }
    #section01 #square.drop{
        animation: dropInSp 2s ease forwards;
    }

}
@keyframes dropInSp {
    0% { top: -10%; opacity: 1;}
    84% { top: 50.4%; opacity: 1;}
    90% { top: 50.4%; opacity: 1;}
    100% { top: 50.4%; opacity: 0;}
}



/*------------------------------------------------------------------------------------------------
    contents-main 共通
--------------------------------------------------------------------------------------------------*/
.contents-main{
    width: 100%;
    min-height: 100vh;
    margin: 0 auto;
    /*padding: 160px 0 0;*/
    position: relative;
    /*background: #E0E0E0;*/
}
.contents-main .contents-main-in{
    width: 960px;
    margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%);
    /*background: #FFD0D0;*/
}
.contents-main .contents-main-in.flex{
    display: flex;
    justify-content: space-between;
}
.contents-main .contents-main-in.flex .contents-l,
.contents-main .contents-main-in.flex .contents-r{
    width: calc((100% - 80px)/2);
}
.contents-main .contents-main-in h2{
    width: 96%;
    margin: 0 auto 20px 0;
    /*font-size: 64px;
    line-height: 1.4;*/
}
.contents-main .contents-main-in h2 span.case{
    display: block;
    width: 33%;
    margin-top: 10px;
    margin-bottom: 40px;
    /*font-size: 34px;
    line-height: 1;*/
}
.contents-main .contents-main-in h2.read{
    /*font-size: 80px;*/
    width: 90%;
    margin-bottom: 20px;
}
.contents-main .contents-main-in p.h2-ttl{
    font-size: 20px;
    font-weight: 700;
    letter-spacing: .25rem;
}
.contents-main .contents-main-in p.read-copy{
    margin: 80px auto 0;
    font-size: 34px;
    font-weight: 700;
    letter-spacing: .5rem;
    line-height: 1.8;
}

.contents-main .contents-main-in.flex .contents-l .text-area{
    width: 100%;
    margin: 40px auto 0;
    padding-top: 4px;
    border-top: 2px solid #000;
}
.contents-main .contents-main-in.flex .contents-l .text-area p.text-ttl{
    margin: 0 auto 15px;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: .25rem;
}
.contents-main .contents-main-in.flex .contents-l .text-area p.text-main{
    font-size: 14px;
    line-height: 1.8;
    letter-spacing: .1rem;
}

@media(max-width: 767px){
    #usecases,
    #benefits,
    #coordinator{
        padding-top: 100px;
        background: #FFF;
    }
    #case1,
    #case2,
    #case3,
    #case4,
    #benefits-con,
    #coordinator-con{
        /*background: #FFFBCE;*/
    }
    .contents-main{
        width: 100%;
        min-height: auto;
        height: auto;
        margin: 0 auto;
        position: relative;
        /*background: #E0E0E0;*/
    }
    .contents-main .contents-main-in{
        width: 88%;
        margin: 0 auto;
        padding: 0;
        position: static;
        top: 0%;
        left: 0%;
        -webkit-transform: translateY(0%) translateX(0%);
        transform: translateY(0%) translateX(0%);
        /*background: #FFD0D0;*/
    }
    .contents-main .contents-main-in.flex{
        display: block;
    }
    .contents-main .contents-main-in.flex .contents-l,
    .contents-main .contents-main-in.flex .contents-r{
        width: 100%;
        margin: 0 auto;
    }
    .contents-main .contents-main-in.flex .contents-r{ margin-top: 40px;}
    .contents-main .contents-main-in h2{
        width: 90%;
        margin: 0 auto 10px 0;
        font-size: 48px;
        line-height: 1.4;
    }
    .contents-main .contents-main-in h2 span.case{
        display: block;
        margin-top: 0;
        margin-bottom: 30px;
        font-size: 7vw;
        line-height: 1;
    }
    .contents-main .contents-main-in h2.read{
        /*font-size: 12vw;*/
        width: 100%;
        margin-bottom: 20px;
    }
    .contents-main .contents-main-in p.h2-ttl{
        font-size: 4.5vw;
        font-weight: 700;
        letter-spacing: .25rem;
    }
    .contents-main .contents-main-in p.read-copy{
        margin: 80px auto 0;
        font-size: 5vw;
        font-weight: 700;
        letter-spacing: .2rem;
        line-height: 1.8;
    }
}



/*------------------------------------------------------------------------------------------------
    USE CASES
--------------------------------------------------------------------------------------------------*/



/*------------------------------------------------------------------------------------------------
    USE CASES case.1〜case.3
--------------------------------------------------------------------------------------------------*/
#case1 .contents-main .contents-main-in.flex .contents-r video,
#case2 .contents-main .contents-main-in.flex .contents-r video,
#case3 .contents-main .contents-main-in.flex .contents-r video,
#case4 .contents-main .contents-main-in.flex .contents-r video{
    width: auto;
    height: 100%;
}


@media(max-width: 767px){
    #case1 .contents-main-in,
    #case2 .contents-main-in,
    #case3 .contents-main-in,
    #case4 .contents-main-in{ padding: 100px 0 0;}

    #case1 .contents-main-in .contents-r,
    #case2 .contents-main-in .contents-r,
    #case3 .contents-main-in .contents-r,
    #case4 .contents-main-in .contents-r{ width: 90%;}

    #case1 .contents-main-in .contents-r video,
    #case2 .contents-main-in .contents-r video,
    #case3 .contents-main-in .contents-r video,
    #case4 .contents-main-in .contents-r video{
        width: 100%;
        /*padding-bottom: 100%;*/
    }
}


/*------------------------------------------------------------------------------------------------
    BENEFITS
--------------------------------------------------------------------------------------------------*/

/*------------------------------------------------------------------------------------------------
    BENEFITS - contents
--------------------------------------------------------------------------------------------------*/
#benefits-con .benefits-wrap{
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}
#benefits-con .benefits-wrap .benefits-box{
    /*width: calc((100% - 200px)/3);*/
    width: 260px;
}
#benefits-con .benefits-wrap .benefits-box .benefits-anm{
    width: 260px;
    height: 260px;
    transition: all 3s;
}
#benefits-con .benefits-wrap .benefits-box .benefits-anm.anm1.play-anm{
    background: url("../images/benefits_anm01.png") no-repeat;
    background-size: cover;
    animation: smile 3s steps(3, end);
    animation-fill-mode: forwards!important;
}
#benefits-con .benefits-wrap .benefits-box .benefits-anm.anm2.play-anm{
    background: url("../images/benefits_anm02.png") no-repeat;
    background-size: cover;
    animation: smile 3s steps(3, end);
    animation-fill-mode: forwards!important;
}
#benefits-con .benefits-wrap .benefits-box .benefits-anm.anm3.play-anm{
    background: url("../images/benefits_anm03.png") no-repeat;
    background-size: cover;
    animation: smile 3s steps(3, end);
    animation-fill-mode: forwards!important;
}
@keyframes smile {
  100% { background-position: -780px 0;}
}

.benefits-box p{ width: 100%;}
.benefits-box p.ttl{
    margin: 60px auto;
    font-size: 36px;
    font-weight: 700;
    text-align: center;
    letter-spacing: .25rem;
}
.benefits-box p.ttl::after{
    display: block;
    content: '';
    width: 82px;
    height: 1px;
    background: #000;
    margin: 30px auto;
}
.benefits-box p.text{
    font-size: 14px;
    line-height: 1.8;
    letter-spacing: .1rem;
}

@media(max-width: 767px){
    #benefits-con .contents-main-in{ padding: 100px 0 0;}
    #benefits-con .benefits-wrap{
        width: 100%;
        /*margin: 80px auto 0;*/
        margin: 0 auto;
        display: block;
    }
    #benefits-con .benefits-wrap .benefits-box{
        width: 100%;
        margin-bottom: 60px;
    }
    #benefits-con .benefits-wrap .benefits-box:last-child{ margin-bottom: 0;}
    #benefits-con .benefits-wrap .benefits-box .benefits-anm{
        width: 180px;
        height: 180px;
        margin: 0 auto!important;
        transition: all 3s;
    }
    #benefits-con .benefits-wrap .benefits-box .benefits-anm.anm1.play-anm{
        background: url("../images/benefits_anm01.png") no-repeat;
        background-size: cover;
        animation: baneAnmSp 3s steps(3, end);
        animation-fill-mode: forwards!important;
    }
    #benefits-con .benefits-wrap .benefits-box .benefits-anm.anm2.play-anm{
        background: url("../images/benefits_anm02.png") no-repeat;
        background-size: cover;
        animation: baneAnmSp 3s steps(3, end);
        animation-fill-mode: forwards!important;
    }
    #benefits-con .benefits-wrap .benefits-box .benefits-anm.anm3.play-anm{
        background: url("../images/benefits_anm03.png") no-repeat;
        background-size: cover;
        animation: baneAnmSp 3s steps(3, end);
        animation-fill-mode: forwards!important;
    }

    .benefits-box p{ width: 100%;}
    .benefits-box p.ttl{
        margin: 30px auto;
        font-size: 30px;
        font-weight: 700;
        text-align: center;
        letter-spacing: .25rem;
    }
    .benefits-box p.ttl::after{
        display: block;
        content: '';
        width: 82px;
        height: 1px;
        background: #000;
        margin: 30px auto;
    }
    .benefits-box p.text{
        font-size: 14px;
        line-height: 1.8;
        letter-spacing: .1rem;
    }
}

@keyframes baneAnmSp {
  100% { background-position: -540px 0;}
}



/*------------------------------------------------------------------------------------------------
    FUNCTION
--------------------------------------------------------------------------------------------------*/
#function .function-wrap{
    width: 100%;
    margin: 80px auto 0;
    display: flex;
    justify-content: space-between;
}
#function .function-wrap .function-box{
    width: 176px;
    height: 176px;
    display: flex;
    background: #ff0000;
    position: relative;
}
#function .function-wrap .function-box p.text{
    width: 100%;
    font-size: 19px;
    font-weight: 700;
    text-align: center;
    color: #FFF;
    letter-spacing: 0.25rem;
    line-height: 1.8;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%);
}
#function .function-wrap .function-box p.text.off{ color: #e60000}
#function .function-wrap .function-box p.comsoon{
    width: 80%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%);
    z-index: 20;
}

@media(max-width: 767px){
    #function .contents-main-in{ padding: 100px 0 0;}
    #function .function-wrap{
        width: 100%;
        margin: 80px auto 0;
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    #function .function-wrap .function-box{
        width: calc((100% - 20px)/2);
        height: auto;
        padding-top: calc((100% - 20px)/2);
        margin-right: 20px;
        margin-bottom: 20px;
        display: flex;
        background: #ff0000;
        position: relative;
    }
    #function .function-wrap .function-box:nth-child(even){ margin-right: 0;}
    #function .function-wrap .function-box:last-child{ margin-bottom: 0;}
    #function .function-wrap .function-box p.text{
        width: 100%;
        font-size: 4vw;
        font-weight: 700;
        text-align: center;
        color: #FFF;
        letter-spacing: 0.25rem;
        line-height: 1.8;
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translateY(-50%) translateX(-50%);
        transform: translateY(-50%) translateX(-50%);
    }
    #function .function-wrap .function-box p.text.off{ color: #e60000}
    #function .function-wrap .function-box p.comsoon{
        width: 80%;
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translateY(-50%) translateX(-50%);
        transform: translateY(-50%) translateX(-50%);
        z-index: 20;
    }
}



/*------------------------------------------------------------------------------------------------
    NIAiNO COORDINATOR
--------------------------------------------------------------------------------------------------*/


/*------------------------------------------------------------------------------------------------
    NIAiNO COORDINATOR - contents
--------------------------------------------------------------------------------------------------*/
#coordinator-con .coodinator-wrap{
    width: 100%;
    margin: 80px auto 0;
    display: flex;
    justify-content: space-between;
}
#coordinator-con .coodinator-wrap .coodinator-l{　width: calc((100% - 80px)/2);}
#coordinator-con .coodinator-wrap .coodinator-l p.position,
#coordinator-con .coodinator-wrap .coodinator-l p.name{
    font-weight: 700;
    letter-spacing: .1rem;
}
#coordinator-con .coodinator-wrap .coodinator-l p.position{ font-size: 20px;}
#coordinator-con .coodinator-wrap .coodinator-l p.name{ font-size: 40px;}
#coordinator-con .coodinator-wrap .coodinator-l p.text{
    margin: 50px auto 0;
    font-size: 14px;
    line-height: 1.8;
    letter-spacing: .1rem;
}
#coordinator-con .coodinator-wrap .coodinator-l p.text.text02 {
    margin: 30px auto 0;
}
#coordinator-con .coodinator-wrap .coodinator-l ul.link-list {
    margin: 40px auto 0;
}
#coordinator-con .coodinator-wrap .coodinator-l ul.link-list li a {
    display: inline-block;
    text-decoration: underline;
    font-size: 14px;
    line-height: 1.8;
    letter-spacing: .1rem;
}

#coordinator-con .coodinator-wrap .coodinator-r{ width: 380px; position: relative;}
#coordinator-con .coodinator-wrap .coodinator-r .img-box{ opacity: 0;}
#coordinator-con .coodinator-wrap .coodinator-r .img-box.img-box-in{
    animation: fadeIn 2.5s ease forwards;
    animation-delay: 1s;
}
@keyframes fadeIn {
  0% { opacity: 0;}
  100% { opacity: 1;}
}
#coordinator-con .coodinator-wrap .coodinator-r .red-box{
    width: 380px;
    height: 380px;
    position: absolute;
    top: 0;
    background: #FF0004;
    opacity: 0;
    z-index: 1000;
}
#coordinator-con .coodinator-wrap .coodinator-r .red-box.red-box-in{
    animation: slideIn 2s ease forwards;
}

/** ここからTIS追記部分 */
#coordinator-con .project p.title{
    font-weight: 700;
    font-size: 20px;
    letter-spacing: .1rem;
}
#coordinator-con .project ul.members{
    width: 100%;
    margin: 30px auto 0;
    column-count: 4;
}
#coordinator-con .project ul.members li{
    font-size: 14px;
    line-height: 1.8;
    letter-spacing: .1rem;
}
#coordinator-con .project p.last{
    font-size: 14px;
    text-align: right;
}
/** ここまでTIS追記部分 */

@keyframes slideIn {
    0% { width: 100px; opacity: 1; left: -600px;}
    70% { width: 380px; opacity: 1;}
    80% { width: 380px; opacity: 1; left: 0;}
    100% { opacity: 0;}
}


@media(max-width: 767px){
    #coordinator-con .contents-main-in{ padding: 100px 0 0;}
    #coordinator-con .coodinator-wrap{
        width: 100%;
        margin: 0 auto;
        display: block;
    }
    #coordinator-con .coodinator-wrap .coodinator-l{　width: 100%;}
    #coordinator-con .coodinator-wrap .coodinator-l p.position,

    #coordinator-con .coodinator-wrap .coodinator-l p.position{ font-size: 20px;}
    #coordinator-con .coodinator-wrap .coodinator-l p.name{ font-size: 40px;}
    #coordinator-con .coodinator-wrap .coodinator-l p.text{
        margin: 50px auto 0;
        font-size: 14px;
        line-height: 1.8;
        letter-spacing: .1rem;
    }

    #coordinator-con .coodinator-wrap .coodinator-l p.text.text02 {
        margin: 30px auto 0;
    }
    #coordinator-con .coodinator-wrap .coodinator-l ul.link-list {
        margin: 40px auto 0;
    }
    #coordinator-con .coodinator-wrap .coodinator-l ul.link-list li a {
        display: inline-block;
        text-decoration: underline;
        font-size: 14px;
        line-height: 1.8;
        letter-spacing: .1rem;
    }

    #coordinator-con .coodinator-wrap .coodinator-r{ width: 100%; margin: 40px auto 0;}
    #coordinator-con .coodinator-wrap .coodinator-r .red-box{
        width: 100%;
        height: auto;
        padding-top : 100%;
        position: absolute;
        top: -600px;
        left: 0;
        background: #FF0004;
        opacity: 0;
        z-index: 100;
    }
    #coordinator-con .coodinator-wrap .coodinator-r .red-box.red-box-in{
        animation: slideInSp 2s ease forwards;
    }
    /** ここからTIS追記部分 */
    #coordinator-con .project p.title{
        font-weight: 700;
        font-size: 20px;
        letter-spacing: .1rem;
    }
    #coordinator-con .project ul.members{
        width: 100%;
        margin: 30px auto 0;
        column-count: 2;
    }
    #coordinator-con .project ul.members li{
        font-size: 14px;
        line-height: 1.8;
        letter-spacing: .1rem;
    }
    #coordinator-con .project p.last{
        font-size: 14px;
        text-align: right;
    }
    /** ここまでTIS追記部分 */
}
@keyframes slideInSp {
    0% { width: 100%; opacity: 1; top: -600px;}
    70% { width: 100%; opacity: 1;}
    80% { width: 100%; opacity: 1; top: 0;}
    100% { opacity: 0; top: 0;}
}


#youtube{
  width: 100%;
  height: 100vh;
  position: relative;
}
.youtube-link{
  width: 40%;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
}
.youtube-link img{
  width: 100%;
}
.youtube-link span{
  display: block;
  font-size: 1.8rem;
  margin-top: 16px;
  text-align: center;
}
.youtube-link{}




/*------------------------------------------------------------------------------------------------
    footer
--------------------------------------------------------------------------------------------------*/
#footer{
    width: 100%;
    height: 100vh;
    margin: 0 auto;
    position: relative;
}
#footer .footer-in{
    width: 780px;
    margin: auto;
    position: absolute;
    top: 45%;
    left: 50%;
    -webkit-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%);
}
#footer-logo{
    width: 100vh;
    max-width: 780px;
    height: auto;
    margin: 60px auto 80px;
    display: block;
    /*background: #FFDADB;*/
}
#footer-logo .foot-changColor.c-red{
    fill: #FF0004;
    transition: all 2s ease;
}
#footer .footer-in p.footer-read{
    font-size: 34px;
    font-weight: 700;
    text-align: center;
    letter-spacing: .1rem;
}

#footer .footer-in p.contact-btn{
    width: 230px;
    margin: 0 auto;
}
#footer .footer-in p.contact-btn a{
    display: block;
    width: 100%;
    padding: 16px 0;
    text-align: center;
    background: #7d7d7f;
}
#footer .footer-in p.contact-btn a:hover{ background: #ff0000;}
#footer .footer-in p.contact-btn a span{
    display: inline-block;
    margin: 0 auto;
    font-size: 17px;
    color: #FFF;
}
#footer .footer-in p.contact-btn a span::before{
    display: inline-block;
    content: "";
    width: 20px;
    height: 18px;
    margin-top: -2px;
    margin-right: 10px;
    background: url("../images/icon_mail.svg") no-repeat;
    background-size: 20px 18px;
    vertical-align: middle;
}

#footer .footer-con{
    width: 100%;
    padding: 0 4% 3%;
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
#footer .footer-con ul.footer-links {
    width: 100%;
    margin: 0 auto;
    padding: 20px 0 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    border-top: 1px solid #7d7d7f;
}
#footer .footer-con ul.footer-links li {
    display: block;
    margin: 0 2% 2%;
    font-size: 13px;
}

#footer .footer-con p.logo{ width: 176px;}
#footer .footer-con p.copyright{
    font-size: 13px;
    text-align: right;
    letter-spacing: .04rem;
}


/*--- old ---*/
#footer .footer-in .footer-info{
    width: 100%;
    display: flex;
}
.footer-info p.logo{ width: 230px; margin-right: 70px;}
.footer-info ul.address,
.footer-info ul.tel{
    font-size: 12px;
    letter-spacing: .15rem;
}
.footer-info ul.address li,
.footer-info ul.tel li{ margin: 0 auto 6px;}
.footer-info ul.address li:last-child,
.footer-info ul.tel li:last-child{ margin-bottom: 0;}
.footer-info ul.address{ width: 250px; margin-right: 30px;}
.footer-info ul.tel{ width: 200px;}
.footer-info .tel span{
    display: inline-block;
    width: 3.4em;
    margin-right: 10px;
}



@media(max-width: 767px){
    #footer{
        width: 100%;
        height: 100vh;
        margin: 0 auto;
        position: relative;
    }
    #footer .footer-in{
        width: 80%;
        margin: auto;
        position: absolute;
        top: 46%;
        left: 50%;
        -webkit-transform: translateY(-50%) translateX(-50%);
        transform: translateY(-50%) translateX(-50%);
        /*background: #E6E6E6;*/
    }
    #footer .footer-in p.footer-read{
        font-size: 3.3vw;
        font-weight: 700;
        text-align: center;
        letter-spacing: .0;
    }
    #footer-logo{
        display: block;
        width: 90%;
        height: auto;
        margin: 8% auto 16%;
        /*background: #FFDADB;*/
    }
    #footer-logo .foot-changColor.c-red{
        fill: #FF0004;
        transition: all 2s ease;
    }

    #footer .footer-in p.contact-btn{
        width: 210px;
        margin: 0 auto;
    }
    #footer .footer-in p.contact-btn a{
        display: block;
        width: 100%;
        padding: 14px 0;
        text-align: center;
        background: #7d7d7f;
    }
    #footer .footer-in p.contact-btn a:hover{ background: #ff0000;}
    #footer .footer-in p.contact-btn a span{
        display: inline-block;
        margin: 0 auto;
        font-size: 18px;
        color: #FFF;
    }
    #footer .footer-in p.contact-btn a span::before{
        display: inline-block;
        content: "";
        width: 22px;
        height: 20px;
        margin-top: -2px;
        margin-right: 10px;
        background: url("../images/icon_mail.svg") no-repeat;
        background-size: 22px 20px;
        vertical-align: middle;
    }
    #footer .footer-con{
        width: 100%;
        padding: 0 6% 5%;
        position: absolute;
        left: 0;
        bottom: 0;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
    }
    #footer .footer-con ul.footer-links {
        width: 100%;
        margin: 0 auto 2%;
        padding: 4% 0 0;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }
    #footer .footer-con ul.footer-links li {
        width: 50%;
        display: block;
        margin: 0 0 2%;
        text-align: center;
        font-size: 13px;
    }
    #footer .footer-con p.logo{ width: 40%;}
    #footer .footer-con p.copyright{
        font-size: 13px;
        text-align: right;
        letter-spacing: .04rem;
    }


    /*--- old ---*/
    #footer .footer-in .footer-info{
        width: 100%;
        display: block;
    }
    .footer-info p.logo{ width: 50%; margin-right: 0; margin: 0 auto 10% 0;}
    .footer-info ul.address,
    .footer-info ul.tel{
        font-size: 12px;
        letter-spacing: .15rem;
    }
    .footer-info ul.address li,
    .footer-info ul.tel li{ margin: 0 auto 6px;}
    .footer-info ul.address li:last-child,
    .footer-info ul.tel li:last-child{ margin-bottom: 0;}

    .footer-info ul.address{ width: 100%; margin-right: 0; margin: 0 auto 10%;}
    .footer-info ul.tel{ width: 100%; margin: 0 auto;}
    .footer-info .tel span{
        display: inline-block;
        width: 3.4em;
        margin-right: 10px;
    }
}