@charset "utf-8";

#content .clearnel_debut {
    color: #282828;
	overflow-x: hidden;
    position: relative;
    font-family: "Hiragino Kaku Gothic ProN", 'Noto Sans JP', sans-serif;
}
#common-footer{
    margin-top: 0;
}
#page-top {
    z-index: 10000;
}
.clearnel_debut{
    background:#A28F6F;
    padding:0 0 81px;
}
.clearnel_debut:before{
    content: "";
    width:50%;
    height: 100%;
    background: #A5A89D;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}
.clearnel_debut > *{
    position: relative;
    z-index: 5;
}
.clearnel_debut *{
    box-sizing: border-box;
}
.clearnel_debut i{
    font-style: normal;
}
.clearnel_debut img{
    max-width: 100%;
    height: auto;
}
.clearnel_debut p{
    font-size:16px;
    line-height: 2;
}
.clearnel_debut figure{
    padding: 0;
    margin: 0;
}
.clearnel_debut .center{
    text-align: center;
}
.clearnel_debut .InnerBox{
    max-width: 1150px;
    margin: 0 auto;
    position: relative;
}
.clearnel_debut .title01{
    font-size: 35px;
    margin:0 auto 5px;
    line-height: 1.5;
    font-weight: bold;
    color: #545252;
}
.clearnel_debut .title01 span{
    font-size: 16px;
    margin: 0 0 0.5em;
    display: block;
}
.clearnel_debut .title01 span i{
    display: inline-block;
    position: relative;
    font-style: normal;
}
.clearnel_debut .title01 span i:before,
.clearnel_debut .title01 span i:after{
    content: "";
    width: 1px;
    height: 1.4em;
    background: #545252;
    position: absolute;
    top: 1px;
}
.clearnel_debut .title01 span i:before {
    left: -1em;
    transform: rotate(-40deg);
}
.clearnel_debut .title01 span i:after{
    right: -1em;
    transform: rotate(40deg);
}
.clearnel_debut .title02{
    font-size: 38px;
    line-height: 1.5;
    text-align: center;
    font-weight: bold;
    position: relative;
}
.clearnel_debut .title02 .catch {
    font-size: 25px;
    width: 178px;
    height: 178px;
    padding: 41px 0 0;
    top: -36px;
    left: 48px;
    line-height: 1.9;
    display: block;
    position: absolute;
    background: #EEEA31;
    border-radius: 100%;
    text-align: center;
    transform: rotate(-15deg);
}
.clearnel_debut .title02 .en{
    font-size: 15px;
    margin: 0 0 0.8em;
    display: block;
    text-align: center;
}
.clearnel_debut .title02 .clrtxt i{
    color: #BF6F38;
    background: linear-gradient(transparent 70%, #F8ED74 70%);
    background: -moz-linear-gradient(transparent 70%, #F8ED74 70%);
    background: -webkit-linear-gradient(transparent 70%, #F8ED74 70%);
    background: -ms-linear-gradient(transparent 70%, #F8ED74 70%);
}
.clearnel_debut .title03{
    font-size: 35px;
    margin:0 0 1em;
    line-height: 1.5;
    position: relative;
    font-weight: bold;
}
.clearnel_debut .title03 span{
    font-size: 16px;
    margin: 0 0 0.3em;
    display: block;
}
.clearnel_debut .btn01{
    width: 100%;
    max-width: 325px;
    margin: 0 auto 15px;
}
.clearnel_debut .btn01 a {
    display: block;
    font-size: 17px;
    padding: 1.4em 0;
    border-radius: 2em;
    text-align: center;
    background: #fff;
    border: 1px solid #545252;
    color: #545252;
    font-weight: bold;
    position: relative;
    transition: all .4s;
    text-decoration: none !important;
}
.clearnel_debut .btn01 a:before {
    content: "";
    position: absolute;
    right: 1.6em;
    top: 50%;
    margin-top: -7.5px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 7.5px 0 7.5px 8.5px;
    border-color: transparent transparent transparent #545252;
}
.clearnel_debut .btn01.btn--br a {
    border: 1px solid #B1A198;
    color: #fff !important;
    background: #B1A198;
}
.clearnel_debut .btn01.btn--br a:hover {
    background: #fff;
    color: #B1A198 !important;
}
.clearnel_debut .btn01.btn--br a:before {
    border-color: transparent transparent transparent #fff;
}
.clearnel_debut .btn01.btn--br a:hover:before {
    border-color: transparent transparent transparent #B1A198;
}
.clearnel_debut .btn01.btn--wh a {
    border: 1px solid #fff;
    color: #282828 !important;
    background: #fff;
}
.clearnel_debut .btn01.btn--wh a:hover {
    background: #C1B4AD;
}
.clearnel_debut .btn01.btn--wh2 a {
    border: 1px solid #545252;
    color: #282828 !important;
    background: #fff;
}
.clearnel_debut .btn01.btn--wh2 a:hover {
    background: #C1B4AD;
}
.clearnel_debut .btn01.btn--bk a {
    border: 1px solid #545252;
    color: #545252 !important;
    background: #fff;
}
.clearnel_debut .btn01.btn--bk a:hover {
    color: #fff !important;
    background: #545252;
}
.clearnel_debut .btn01 a:hover:before {
    border-color: transparent transparent transparent #fff;
}
.clearnel_debut .mainView{
    text-align: center;
    position: relative;
    width: 100%;
}
.clearnel_debut .mainView figure{
    position: relative;
    z-index: 3;
    text-align: center;
    margin: 0 auto;
    padding:25px 0 0 0;
}
.clearnel_debut .mainView figure img{
    display: block;
    margin: 0 auto;
}
/*
@media screen and (min-width: 641px) and (max-width: 1599px){
    .clearnel_debut .mainView figure{
        height:763px;
        background: url(../img/clearnel_debut/img_main-view@2x.jpg) no-repeat 50% 50%;
        background-size: auto 100%;
    }
    .clearnel_debut .mainView figure img{
        opacity: 0;
    }
}
*/
.clearnel_debut .catchCopy{
    width: 100%;
    background:#A28F6F;
    z-index: 1;
    font-size: 30px;
    line-height: 1.5;
    color: #fff;
}
.clearnel_debut .catchCopy > *{
    position: relative;
    z-index: 3;
}
.clearnel_debut .catchCopy:before{
    content: "";
    width:50%;
    height: 100%;
    background: #A5A89D;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
}
.clearnel_debut .mainView .catchCopy{
    height: 81px;
    padding: 38px 0 0 0;
    text-indent: -8px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
}
.clearnel_debut .mainView .catchCopy > *{
    position: relative;
    z-index: 7;
}
.clearnel_debut .mainTitle img{
    position: relative;
    top: -10px;
    left: -30px;
}
.clearnel_debut .mainTitle {
    height: 159px;
    overflow: hidden;
    background: rgba(255,255,255,.75);
    text-align: center;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 5;
}
.clearnel_debut #sec01{
    background: #F2E7C2;
    position: relative;
    z-index: 1;
}
.clearnel_debut #sec01:before{
    content: "";
    width:50%;
    height: 100%;
    background: #D6DBDE;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
.clearnel_debut #sec01 > *{
    position: relative;
    z-index: 3;
}
.clearnel_debut #sec01 .FlexBox p {
    width: 50%;
    padding: 39px 110px 40px 0;
    font-size: 18px;
}
.clearnel_debut #sec01 .FlexBox dl{
    width: 50%;
    padding: 40px 0 0;
    text-align: right;
}
.clearnel_debut #sec01 .FlexBox dl dt{
    font-size: 30px;
    margin: 0 0 0.3em;
    font-weight: bold;
    line-height: 1.5;
    letter-spacing: .5px;
    color:#545252;
}
.clearnel_debut #sec01 .fairBox {
    padding: 42px 0 16px;
    position: relative;
    /*background: #B1A198;*/
}
.clearnel_debut #sec01 .fairBox .FlexBox{
    max-width: 700px;
    margin: 28px auto 23px;
}
.clearnel_debut #sec01 .fairBox p{
    font-size: 24px;
    text-align: center;
    font-weight: bold;
}
.clearnel_debut #sec01:after,
.clearnel_debut #sec01 .fairBox:before,
.clearnel_debut #sec01 .fairBox:after{
    content: "";
    position: absolute;
    background: #B1A198;
    z-index: 1;
}
.clearnel_debut #sec01:after {
    width: 100%;
    height: 110px;
    bottom: -20px;
    left: 0;
}
.clearnel_debut #sec01 .fairBox:before {
    content: "";
    width: 120%;
    height: 150px;
    top: -17px;
    /*top: -5px;*/
    left: -10%;
    transform: rotate(-4.2deg);
}
.clearnel_debut #sec01 .fairBox:after {
    width: 50%;
    height: 100%;
    bottom: 0;
    right: 0;
}
.clearnel_debut #sec01 .fairBox .InnerBox {
    background: #B1A198;
    position: relative;
    z-index: 3;
}
.clearnel_debut #sec01 .fairBox .btn01 {
    max-width: 295px;
    margin: 0;
}
.clearnel_debut #sec02 {
    padding: 100px 0;
    position: relative;
    z-index: 1;
    background: #545252;
}
.clearnel_debut #sec02 .Box-2{
    -ms-flex-line-pack: end;
    align-content: flex-end;
}
.clearnel_debut #sec02 .Box-inner{
    width: 100%;
    position: relative;
}
.clearnel_debut #sec02 .Box-2 .Box-inner:before,
.clearnel_debut #sec02 .Box-2 .Box-inner:after{
    content: "";
    position: absolute;
    display: block;
}
.clearnel_debut #sec02 .Box-2 .Box-inner:before{
    border-right: 1px solid #545252;
    border-bottom: 1px solid #545252;
    transform: rotate(-45deg);
    width: 14px;
    height: 14px;
    top: -32px;
    left: 2px;
    animation: arrowlong02 2s ease infinite;
}
.clearnel_debut #sec02 .Box-2 .Box-inner:after {
    width: 100%;
    max-width: 400px;
    background: #545252;
    height: 1px;
    top: -25px;
    left: 8px;
    animation: arrowlong01 2s ease infinite;
}

.clearnel_debut #sec02 .Box-inner .btn01{
    margin: 25px 0 0 auto;
    max-width: 320px;
}
.clearnel_debut #sec02 .InnerBox {
    background: #E9E5E0;
}
.clearnel_debut #sec02 .title {
    position: absolute;
    right: 80px;
    top: 80px;
}
.clearnel_debut #sec02 .title01 {
    line-height: 1.6;
    margin: 0 0 36px;
}
.clearnel_debut #sec02 .Box-1 {
    width: 50%;
    padding: 43px 0 103px 110px;
}
.clearnel_debut #sec02 .Box-1 p {
    max-width: 430px;
}
.clearnel_debut #sec02 .Box-2 {
    width: 45%;
    padding: 43px 110px 109px 0;
}
.clearnel_debut #sec03 {
    z-index: 3;
    position: relative;
    background: #B1A198;
}
.clearnel_debut #sec03 .catchCopy {
    padding: 18px 0;
    font-weight: bold;
    text-align: center;
    position: relative;
    z-index: 5;
}
.clearnel_debut #sec03 .InnerBox{
    max-width: 1600px;
    /*
    min-height: 853px;
    margin: 0 auto;
    background: url(../img/clearnel_debut/img-sec03_01@2x.jpg) no-repeat 0 0;
    background-size: 50% auto;
    */
}
.clearnel_debut #sec03 .Box-inner{
    max-width: 460px;
}
.clearnel_debut #sec03 .Box-inner p{
    padding: 0 0 65px;
    margin: 0 0 50px;
    position: relative;
}
.clearnel_debut #sec03 .Box-inner p:before,
.clearnel_debut #sec03 .Box-inner p:after{
    content: "";
    position: absolute;
    display: block;
}
.clearnel_debut #sec03 .Box-inner p:before {
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    transform: rotate(-45deg);
    width: 14px;
    height: 14px;
    bottom: -7px;
    left: -4px;
    animation: arrowlong04 2s ease infinite;
}
.clearnel_debut #sec03 .Box-inner p:after {
    width: 100%;
    max-width: 400px;
    background: #fff;
    height: 1px;
    bottom: 0;
    left: 48px;
    animation: arrowlong03 2s ease infinite;
}
@keyframes arrowlong03{
    0%{width:0;opacity:0}
    20%{width:0;opacity:1}
    80%{width:400px;opacity:1}
    100%{width:400px;opacity:0}
}
@keyframes arrowlong04{
    0%{left:45px;opacity:0}
    20%{left:45px;opacity:1}
    80%{left:440px;opacity:1}
    100%{left:440px;opacity:0}
}
.clearnel_debut #sec03 .Box-inner .btn01{
    margin: 25px 0 25px auto;
}
.clearnel_debut #sec03 figure{
    width: 50%;
    overflow: hidden;
    /*visibility: hidden;
    opacity: 0;
    z-index: -9999;*/
    font-size: 0;
    line-height: 1;
}
.clearnel_debut #sec03 .Box{
    width: 50%;
    padding: 20px 90px 0 93px;
    color: #fff;
}
.clearnel_debut #sec03 .Box p{
    max-width: 450px;
}
.clearnel_debut #sec03 .Box .title03{
    margin: 0 0 1.1em;
}
.clearnel_debut #sec04 {
    text-align: center;
    position: relative;
    overflow: hidden;
    background: #fff;
}
.clearnel_debut #sec04 .InnerBox{
    max-width: 1600px;
    padding: 341px 0 334px;
    z-index: 1;
}
.clearnel_debut #sec04:before,
.clearnel_debut #sec04:after {
    content: "";
    width: 120vw;
    background: #e9e5e1;
    height: 400px;
    position: absolute;
    left: -10vw;
}
.clearnel_debut #sec04:before {
    top: -158px;
    transform: rotate(-4.3deg);
}
.clearnel_debut #sec04:after {
    bottom: -158px;
    transform: rotate(-4.3deg);
}
.clearnel_debut #sec04 .box-wrap:before,
.clearnel_debut #sec04 .box-wrap:after {
    width: 100%;
    height: 150px;
    content: "";
    position: absolute;
    left: 0;
    z-index: 5;
}
.clearnel_debut #sec04 .box-wrap:before{
    height: 334px;
    bottom: 0;
    background: url(../img/clearnel_debut/img-sec04_02@2x.png) no-repeat 50% 100%;
    background-size: 1600px auto;
}
.clearnel_debut #sec04 .box-wrap:after {
    height: 303px;
    top: 0;
    background: url(../img/clearnel_debut/img-sec04_01@2x.png?ver=10) no-repeat 50% 0;
    background-size: 1600px auto;
}
.clearnel_debut #sec04 > *{
    position: relative;
    z-index: 3;
}
.clearnel_debut #sec04 .box-wrap{
    position: relative;
}
.clearnel_debut #sec04 .btn-wrap:before,
.clearnel_debut #sec04 .btn-wrap:after{
    content: "";
    position: absolute;
    display: block;
}
.clearnel_debut #sec04 .btn-wrap:before{
    border-right: 1px solid #57432F;
    border-bottom: 1px solid #57432F;
    transform: rotate(-45deg);
    width: 14px;
    height: 14px;
    top: -7px;
    left: -2px;
    animation: arrowlong06 2s ease infinite;
}
.clearnel_debut #sec04 .btn-wrap:after{
    width: 100%;
    max-width: 400px;
    background: #57432F;
    height: 1px;
    top: 0;
    left: -4px;
    animation: arrowlong05 2s ease infinite;
}
@keyframes arrowlong05{
    0%{width:0;opacity:0}
    20%{width:0;opacity:1}
    80%{width:403px;opacity:1}
    100%{width:403px;opacity:0}
}
@keyframes arrowlong06{
    0%{left:5px;opacity:0}
    20%{left:5px;opacity:1}
    80%{left:388px;opacity:1}
    100%{left:388px;opacity:0}
}
.clearnel_debut #sec04 .btn-wrap{
    position: relative;
    width: 100%;
    max-width: 400px;
    margin: 43px auto 0;
    padding: 48px 0 0;
}
.clearnel_debut #sec04 .btn01{
    max-width: 320px;
    margin: 3px auto 15px;
}
.clearnel_debut #sec04 .title01 {
    margin: 0 0 0.8em;
}
.clearnel_debut #sec04 p {
    letter-spacing: 1.6px;
}
.clearnel_debut #sec05 {
    padding:100px 0;
    background: #D6DBDE;
}
.clearnel_debut #sec05 .InnerBox{
    background: #fff;
    padding: 88px 0 84px;
}
.clearnel_debut #sec05 .title02{
    margin: 0 0 56px;
}
.clearnel_debut #sec05 .title02 .clrtxt {
    letter-spacing: 1.5px;
}
.clearnel_debut #sec05 .title03 span{
    display: inline-block;
    margin-left: .1em;
}
.clearnel_debut #sec05 .presenttxt {
    font-size: 22px;
    margin: 0 0 1.7em;
    letter-spacing: .9px;
    font-weight: bold;
    text-align: center;
    color: #4B4949;
}
.clearnel_debut #sec05 .presenttxt span{
    position: relative;
    display: inline-block;
}
.clearnel_debut #sec05 .presenttxt span:before{
    content: "";
    position: absolute;
    right: 0;
    top: -1em;
    font-size: 12px;
    color: #888482;
}
.clearnel_debut #sec05 .presenttxt span.an1:before{
    content: "※1";
}
.clearnel_debut #sec05 .presenttxt span.an2:before{
    content: "※2";
}
.clearnel_debut #sec05 .presenttxt span.an3:before{
    content: "※3";
}
.clearnel_debut #sec05 .box-wrap{
    max-width: 1000px;
    margin:0 auto;
}
.clearnel_debut #sec05 .box-wrap figure{
    width: 47.5%;
    text-align: right;
}
.clearnel_debut #sec05 .box-wrap .Box{
    width: 46.5%;
}
.clearnel_debut #sec05 .title03{
    margin: -0.2em 0 1.1em;
}
.clearnel_debut #sec05 .Box p{
    margin: 0 0 0.8em;
}
.clearnel_debut #sec05 .Box ol li{
    margin:0 0 .3em;
}
.clearnel_debut #sec05 figure figcaption{
    width:100%;
    max-width:441px;
    margin-left: auto;
    text-align: left;
}
@keyframes arrowlong01{
    0%{width:0;opacity:0}
    20%{width:0;opacity:1}
    80%{width:396px;opacity:1}
    100%{width:396px;opacity:0}
}

@keyframes arrowlong02{
    0%{left:4px;opacity:0}
    20%{left:4px;opacity:1}
    80%{left:393px;opacity:1}
    100%{left:393px;opacity:0}
}

/* FlexBox
━━━━━━━━━━━━━━━━━━━―…‥・★・‥…―━━━━━━━━━━━━━━━━━━*/
.FlexBox,.FlexBox.Nowrap,.FlexBox.End,.FlexBox.Start,.FlexBox.Reverse,.Flex.Column{
    display:-webkit-box;
    display:-ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-line-pack: justify;
    align-content: space-between;
    box-sizing: border-box;
}
.FlexBox.Middle{
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.Flex.Column{
    display:-webkit-box;
    display:-ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}
.FlexBox.Bottom{
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
}
.Flex.Column > *{
    width:100%;
}
.FlexBox.Nowrap{
  flex-wrap: nowrap;
  justify-content: flex-start;
}
.FlexBox.Reverse{
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
}
.FlexBox.End{
    -webkit-box-pack: end;
    -ms-flex-pack: end;
  justify-content: flex-end;
}
.FlexBox.Start{
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}
.FlexBox.Center{
    -webkit-box-pack: center;
    -ms-flex-pack: center;
  justify-content: center;
}


/* SP
━━━━━━━━━━━━━━━━━━━―…‥・★・‥…―━━━━━━━━━━━━━━━━━━*/
@media screen and (max-width: 640px){
/* 640px start */
    
    /*-- common --*/
    .clearnel_debut {
        padding: 0 0 12vw;
    }
    .clearnel_debut p {
        font-size: 14px;
    }
    .clearnel_debut .btn01 {
        width: 100%;
        max-width: 210px;
    }
    .clearnel_debut .btn01 a {
        font-size: 12px;
        padding: 1.2em 0;
    }
    .clearnel_debut .btn01 a:before {
        right: 1.3em;
        margin-top: -5.5px;
        border-width: 5.5px 0 5.5px 5.5px;
    }
    .clearnel_debut .catchCopy{
        font-size: 20px;
    }
    .clearnel_debut .title01 span {
        font-size: 12px;
        margin: 0 0 0.5em;
    }
    .clearnel_debut .title01 span i:before, 
    .clearnel_debut .title01 span i:after {
        height: 100%;
    }
    .clearnel_debut .title02 .catch {
        font-size: 14px;
        width: 90px;
        height: 90px;
        padding: 24px 0 0;
        top: -20vw;
        left: 10px;
        line-height: 1.5;
    }
    .clearnel_debut .title02 .en {
        font-size: 12px;
    }

    /*-- mainView--*/
    .clearnel_debut .mainTitle {
        height: 13vw;
    }
    .clearnel_debut .mainTitle img {
        top: 0;
        left: 0;
        width: 85%;
    }
    .clearnel_debut .mainView .catchCopy {
        height: 9vw;
        padding: .2em 0 0;
    }
    .clearnel_debut .mainView .catchCopy img{
        width: 80%;
    }
    .clearnel_debut .mainView figure {
        height: 136vw;
        height: 120vw;
        padding: 9vw 0 0;
    }
    .clearnel_debut .mainView figure img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /*-- sec01 --*/
    .clearnel_debut #sec01:before{
        display: none;
    }
    .clearnel_debut #sec01 > .InnerBox > .FlexBox{
        display: block;
    }    .clearnel_debut #sec01 .FlexBox  p {
        padding: 5%;
        font-size: 15px;
        width: 100%;
    }
    .clearnel_debut #sec01 .FlexBox dl {
        width: 100%;
        padding: 7.5% 5% 12.5%;
        text-align: center;
        background: #D6DBDE;
    }
    .clearnel_debut #sec01 .FlexBox dl dt {
        font-size: 22px;
    }
    .clearnel_debut #sec01 .FlexBox dl dd img{
        width: 239px;
    }
    .clearnel_debut #sec01 .fairBox {
        padding: 5% 0 5%;
    }
    .clearnel_debut #sec01 .fairBox p {
        font-size: 20px;
        line-height: 1.5;
    }
    .clearnel_debut #sec01 .fairBox .FlexBox {
        max-width: 700px;
        margin: 5% auto 5%;
        width: 95%;
    }
    .clearnel_debut #sec01 .fairBox .btn01 {
        width: 48%;
    }


    /*-- sec02 --*/
    .clearnel_debut #sec02 {
        padding: 10% 4.5%;
    }
    .clearnel_debut #sec02 .title {
        right: 4.5vw;
        top: 6vw;
        width: 50vw;
    }
    .clearnel_debut #sec02 figure{
        height: 102vw;
    }
    .clearnel_debut #sec02 figure img{
        height: 102vw;
        width: 100vw;
        object-fit: cover;
    }
    .clearnel_debut #sec02 .FlexBox{
        display: block;
    }
    .clearnel_debut #sec02 .Box-inner .btn01 {
        margin: 5vw auto 0 auto;
        width: 100%;
        max-width: 210px;
    }
    .clearnel_debut #sec02 .Box-1 {
        width: 100%;
        padding: 5.5%;
    }
    .clearnel_debut #sec02 .Box-2 {
        width: 100%;
        padding: 11.5vw 7.5%;
    }
    .clearnel_debut #sec02 .title01 {
        font-size: 22px;
        margin: 0 0 .5em;
    }
    .clearnel_debut #sec02 .Box-inner {
        padding: .5vw 0 0 0;
    }

    /*-- sec03 --*/
    .clearnel_debut .title03 span {
        font-size: 12px;
    }
    .clearnel_debut #sec03 .Box .title03 {
        margin: 0 0 .8em;
        font-size: 24px;
    }
    .clearnel_debut #sec03 figure {
        width: 100%;
    }
    .clearnel_debut #sec03 .Box {
        width: 100%;
        padding: 8% 5%;
    }
    .clearnel_debut #sec03 .Box-inner p {
        padding: 0 0 15vw;
        margin: 0 0 17.5vw;
    }
    .clearnel_debut #sec03 .Box-inner .btn01 {
        width: 100%;
        max-width: 210px;
        margin: 5vw auto;
    }
    .clearnel_debut #sec03 .catchCopy {
        padding: 0.5em 0;
        font-size: 18px;
        line-height: 1.3;
    }
    .clearnel_debut #sec03 .Box-inner p:after{
    	left: 0;
        max-width: 100%;
    }
    
    /*-- sec04 --*/
    .clearnel_debut #sec04:before,
    .clearnel_debut #sec04:after{
        display: none;
    }
    .clearnel_debut #sec04 .title01 {
        margin: 0 0 0.8em;
        font-size: 24px;
    }
    .clearnel_debut #sec04 .InnerBox {
        padding: 30vw 5vw 30vw;
    }
    .clearnel_debut #sec04 .box-wrap:after {
        height: 40vw;
        background-size: 118vw auto;
    }
    .clearnel_debut #sec04 .box-wrap:before {
        height: 40vw;
        background-size: 118vw auto;
    }
    .clearnel_debut #sec04 .btn-wrap {
        width: 95%;
        width: 83vw;
        max-width: 100%;
        margin: 20vw auto 0;
        padding: 5vw 0 2.5vw;
    }
    .clearnel_debut #sec04 .btn-wrap:after {
        top: -8.5vw;
        max-width: 100%;
    }
    .clearnel_debut #sec04 .btn-wrap:before {
        top: -8.5vw;
        margin-top: -7px;
    }
    .clearnel_debut #sec04 .btn01 {
        width: 100%;
        max-width: 210px;
        margin: 3px auto 15px;
    }

    /*-- sec05 --*/
    .clearnel_debut #sec05 {
        padding: 10% 4.5%;
    }
    .clearnel_debut #sec05 .InnerBox {
        padding: 12vw 0 12vw;
    }
    .clearnel_debut #sec05 .title02 {
        margin: 0 0 1em;
        font-size: 22px;
    }
    .clearnel_debut #sec05 .title02 .clrtxt {
        letter-spacing: 1.5px;
        font-size: 22px;
    }
    .clearnel_debut #sec05 .presenttxt span:before{
        font-size: 10px;
    }
    .clearnel_debut #sec05 .presenttxt {
        width: 90%;
        margin: 0 auto 1.7em;
        font-size: 15px;
        line-height: 2.2;
    }
    .clearnel_debut #sec05 .box-wrap {
        display: block;
    }
    .clearnel_debut #sec05 .box-wrap figure,
    .clearnel_debut #sec05 .box-wrap figure img {
        width: 100%;
    }
    .clearnel_debut #sec05 .box-wrap .Box {
        width: 100%;
    }
    .clearnel_debut #sec05 .box-wrap {
        width: 90%;
    }
    .clearnel_debut #sec05 .title03 {
        margin: .7em 0 .5em;
        font-size: 24px;
    }
    .clearnel_debut #sec05 figure figcaption{
        max-width: 100%;
        font-size: 10px;
    }
    .clearnel_debut #sec05 .Box ol li {
        font-size: 10px;
        margin: 0 1.8em .3em 1.8em;
        text-indent: -1.8em;
    }
    @keyframes arrowlong01{
        0%{width:0;opacity:0}
        20%{width:0;opacity:1}
        80%{width:96%;opacity:1}
        100%{width:96%;opacity:0}
    }

    @keyframes arrowlong02{
        0%{left:4px;opacity:0}
        20%{left:4px;opacity:1}
        80%{left:95%;opacity:1}
        100%{left:95%;opacity:0}
    }
    @keyframes arrowlong03{
        0%{width:0;opacity:0}
        20%{width:0;opacity:1}
        80%{width:100%;opacity:1}
        100%{width:100%;opacity:0}
    }
    @keyframes arrowlong04{
        0%{left:0;opacity:0}
        20%{left:0;opacity:1}
        80%{left:100%;margin-left:-11px;opacity:1}
        100%{left:100%;margin-left:-11px;opacity:0}
    }
	@keyframes arrowlong05{
	    0%{width:0;opacity:0}
	    20%{width:0;opacity:1}
	    80%{width:100%;opacity:1}
	    100%{width:100%;opacity:0}
	}
	@keyframes arrowlong06{
	    0%{left:5px;opacity:0}
	    20%{left:5px;opacity:1}
	    80%{left:100%;margin-left:-15px;opacity:1}
	    100%{left:100%;margin-left:-15px;opacity:0}
	}

/* 640px end*/
}
@media screen and (max-width: 320px){
/*320px*/
    .clearnel_debut .btn01 a:before {
        right: 1em;
        margin-top: -4.5px;
        border-width: 4.5px 0 4.5px 4.5px;
    }
    .clearnel_debut .btn01 a {
        font-size: 11px;
        padding: 1em 0;
    }
/* 320px end*/
}