@charset "utf-8";




main{
    width: 100%;
    padding: 0 20px 40px;

    overflow: hidden;/*バグ回避*/
}

/*-------------------------------------------------------------
			ALL-Formt-design
-------------------------------------------------------------*/

.main-ttl{
    display: table;
    margin: 54px auto 0;

    line-height: 1.1;
    text-align: center;

    color: var(--bs-textcolor);
}
.main-ttl::after{
    content: "";
    width: 100%;
    height: 5px;
    display: block;
    background-color: var(--bs-textcolor);
}
/**######768px以下～######**/
@media(max-width:768px){
    .main-ttl{
        margin: 1.4em auto 0;
    }

}
/*-------------------------------------------------------------
			ALL-Formt-design
-------------------------------------------------------------*/





/*-------------------------------------------------------------
			ALL-Formt-design
-------------------------------------------------------------*/
.section-box{
    position: relative;
    width: 1040px;
    margin: 80px auto 120px;/*可変*/
    
    /*border: 1px solid red;*/
}
.section-boxB{
    position: relative;
    /**/
    width: calc(100% + 40px );
    left: -20px;
    /**/
    margin: 180px auto 180px;/*可変*/
    padding: 0px 20px;
    /*border: 1px solid red;*/

    background-color: rgba(255,247,153, .5);
}
/**######768px以下～######**/
@media(max-width:768px){
    .section-box{
        width: 100%;
        margin: 80px auto 80px;
    }
    .section-boxB{
        margin: 80px auto 80px;
    }
}
/**********/

.section-boxB:before{
    content: "";
    position: relative;
    top: -60px;
    left: -20px;
    width: calc(100% + 40px );
    height: 60px;
    display: block;
    background-image: url(../img/intro/intro-topbg.png);
    background-repeat: repeat-x;
    background-position: bottom center;
}
.section-boxB:after{
    content: "";
    position: relative;
    bottom: -60px;
    left: -20px;
    width: calc(100% + 40px );
    height: 60px;
    display: block;
    background-image: url(../img/intro/intro-bottombg.png);
    background-repeat: repeat-x;
    background-position: top center;
}

.section-bg{
    position: absolute;
    top: 390px;
    left: 0px;
    width: 100%;
    height: 285px;
    background-color: #eee;
    background-image: url(../img/intro/intro-bg%401x.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size:cover;
    background-size: cover;
    
    background-attachment: fixed;

}
/**######768px以下～######**/
@media(max-width:768px){
    .section-bg{
        height: 225px;
        background-attachment:initial;
        background-image: url(../img/intro/intro-bg-sp%401x.jpg);
    }
}
/*****/


.section-ttl{
    position: relative;
    width: 100%;
    /**/
    display: inline-block;
    /*text-decoration-line: underline;
    text-underline-offset:20%;
    border-width:5px;*/
    /**/
    overflow: hidden;
}

.story-ttl{
    text-align: right;
}
.concept-ttl{
    text-align: left;
}
.concept-subtxt{
    color: #f87a9e;
}
.concept-txt{
    margin: 1em 0;
    line-height: 1.6em;
}

.section-underline{
    position: relative;
    display: inline-block;
    margin: 0 auto;
    line-height: 1.1;
    border-bottom: 5px solid var(--bs-textcolor);
}
/*
.section-ttl::after{
    content: "";
    display: block;
    height: 5px;
    
    position: absolute;
    left: 0px;
    bottom: 0px;
    background-color: var(--bs-textcolor);;
}
*/

/*-------------------------------------------------------------
			story
-------------------------------------------------------------*/


.story-subtxt{
    margin-top: 220px;/*可変*/
    margin-bottom: 30px;/*可変*/
    color: #FFF;
}
/**######768px以下～######**/
@media(max-width:768px){
    .story-subtxt{
        margin-top: 160px;/*可変*/
    }
}
/*****/


.story-box{
    width: 100%;
    max-width: 650px;
    height: auto;
    margin: 0 auto;
    /*font-weight: bold;*/

    line-height: 1.825em;
}

.box-2{
    margin: 1em auto;
    line-height: 2.0;
    font-weight: bold;
}

.A-color{
    color: #f87a9e;
    text-decoration: underline;
    text-underline-offset:20%;
}
.B-color{
    color: #ffdb3a;
    text-decoration: underline;
    text-underline-offset:20%;
}
.C-color{
    color: #82dfe7;
    text-decoration: underline;
    text-underline-offset:20%;
}
.D-color{
    color: #d195c3;
    text-decoration: underline;
    text-underline-offset:20%;
}


.story-ttl-wrap{
    position: relative;
    display: inline-block;
    margin: 0 auto;
    line-height: 1.25;
    border-bottom: 5px solid var(--bs-textcolor);
}
.story-block{
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 100%;
    height: 100%;
    background-color: #FFF;

    transition: all ease 0.6s;
}
.is-active .story-block{
    transform: translateX(100%);
}

.is-active .is-set-story{
    opacity: 1;
}
.is-set-storyB{
    opacity: 0;
    transform: translate(-10px,0px);
    transition: all cubic-bezier(0.5, 1, 0.89, 1) 0.8s;
    transition-delay: 0.4s;
}
.is-set-storyC{
    opacity: 0;
    transform: translate(-10px,0px);
    transition: all cubic-bezier(0.5, 1, 0.89, 1) 0.6s;
    transition-delay: 0.6s;
}
.is-active .is-set-storyB{
    opacity: 1;
    transform: translate(0px,0px);
}
.is-active .is-set-storyC{
    opacity: 1;
    transform: translate(0px,0px);
}
/*-------------------------------------------------------------
			concept
-------------------------------------------------------------*/

.concept-box{
    width: 1040px;
    margin: 0 auto;
}
/**######768px以下～######**/
@media(max-width:768px){
    .concept-box{
        width: 100%;
    }
}
/**********/

.concept-wrap{
    display: flex;
    flex-wrap:wrap;
    justify-content: space-between;
}

.left-box{
    order: 1;
    width: 100%;
    max-width: 480px;
    line-height: 1.825em;
    text-align: justify;
}

.right-box{
    order: 2;
}
.right-box img{
    max-width: 100%;
}


/**######768px以下～######**/
@media(max-width:768px){
    .left-box{
        order: 2;
        max-width:inherit;
    }
    .right-box{
        margin-top: 30px;
        order: 1;
    }
}
/**********/

/*-------------------------------------------------------------
			theme
-------------------------------------------------------------*/

.theme-wrap{
    display: flex;
    flex-wrap:wrap;
    justify-content: space-between;
}

.theme-right-box{
    width: 100%;
    max-width: 480px;
    text-align: justify;
}
.theme-subtxt{
    color: #ffc426;
}
.theme-txt{
    margin: 1em 0;
    line-height: 1.825em;
    font-family: 'Noto Sans JP',"Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
}

.theme-left-box img{
    max-width: 100%;
}
/**######768px以下～######**/
@media(max-width:768px){
    .theme-left-box{
        order: 2;
    }
    .theme-right-box{
        order: 1;
        max-width:inherit;
    }
}

/*-------------------------------------------------------------
			set-anime
-------------------------------------------------------------*/
.is-setA{
    opacity: 0;
    transform: translate(0px,10px);

    transition: all ease 0.4s;
    transition-delay: 0;
}
.is-setB{
    opacity: 0;
    transform: translate(0px,10px);

    transition: all ease 0.4s;
    transition-delay: 0.2s;
}


.is-active .is-setA{
    opacity: 1;
    transform: translate(0px,0px);
}
.is-active .is-setB{
    opacity: 1;
    transform: translate(0px,0px);
}

/**********/
/***************************/
hr {
    height: 0;
    margin: 20px 0;
    padding: 0;
    border: 0;
    overflow: visible;
    border-top: 1px dashed #bbb;
  }


/***************************/