@charset "utf-8";

/*
body{background-image: url(../_dm_/2_message.png);background-repeat: no-repeat;background-position: 50% 0;background-size: auto auto;}#wrap{opacity:0.5;}

body{background-image: url(../_dm_/SP_2_message.png);background-repeat: no-repeat;background-position: 0 -108px;background-size: 100% auto;}#wrap{opacity:0.5;}
*/


/*||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
@media all and (min-width: 769px) {
/*|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/

main{
    overflow: hidden;
    font-family: "Noto Sans JP","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif;
}

/********/
.laserbox{
}
.laserbox p.laser{
    position: absolute;
    -webkit-transform: rotateZ(-49deg);transform: rotateZ(-49deg);
}
.laserbox p.laser i{
    position: absolute;left: 0;top: 0;
    width: 0;
    height: 100%;
    opacity: 0;
}
.laserbox p.laser.n01{
    left: -230px;top: 510px;
    width: 640px;
    height: 30px;
}
.laserbox p.laser.n01 i{
    -webkit-animation-delay: 0s;animation-delay: 0s;
    background-image: linear-gradient(90deg, rgba(255,255,255,1),rgba(240,240,240,1));
}
.laserbox p.laser.n02{
    left: -330px;top: 1060px;
    width: 1000px;
    height: 2px;
}
.laserbox p.laser.n02 i{
    -webkit-animation-delay: 0.8s;animation-delay: 0.8s;
    background-color: rgba(160,160,160,1);
}
.laserbox p.laser.n03{
    right: 410px;top: 1010px;
    width: 640px;
    height: 24px;
}
.laserbox p.laser.n03 i{
    -webkit-animation-delay: 0.5s;animation-delay: 0.5s;
    background-image: linear-gradient(90deg, rgba(255,255,255,1),rgba(220,220,220,1));
}
.laserbox p.laser.n04{
    right: 310px;top: 1060px;
    width: 400px;
    height: 10px;
}
.laserbox p.laser.n04 i{
    -webkit-animation-delay: 1.0s;animation-delay: 1.0s;
    background-color: rgba(240,240,240,1);
}
.laserbox p.laser.n05{
    right: 90px;top: 290px;
    width: 400px;
    height: 12px;
}
.laserbox p.laser.n05 i{
    -webkit-animation-delay: 0.7s;animation-delay: 0.7s;
    background-image: linear-gradient(90deg, rgba(240,240,240,1),rgba(200,200,200,1));
}
.laserbox p.laser.n06{
    right: -170px;top: 550px;
    width: 640px;
    height: 2px;
}
.laserbox p.laser.n06 i{
    -webkit-animation-delay: 0.4s;animation-delay: 0.4s;
    background-color: rgba(200,200,200,1);
}
.laserbox p.laser.n07{
    right: -130px;top: 780px;
    width: 360px;
    height: 24px;
}
.laserbox p.laser.n07 i{
    -webkit-animation-delay: 1.1s;animation-delay: 1.1s;
    background-image: linear-gradient(90deg, rgba(240,240,240,1),rgba(120,120,120,1));
}


/********/
.slogan{
    height: 660px;
}
.slogan>div.inner{
    position: relative;
}


/* #### */
.slogan .titlebox{
    position: absolute;left: 0;top: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    white-space: normal;
}
/*----*/
.slogan .titlebox p.rect{
    position: absolute;left: 50%;top: 0;
    width: 620px;
    height: 620px;
    margin: 0 0 0 -310px;
    -webkit-transform: rotateZ(-49deg);transform: rotateZ(-49deg);
}
.slogan .titlebox p.rect i{
    position: absolute;left: 0;top: 0;
    width: 100%;
    height: 100%;
    -webkit-transform-origin: center center;transform-origin: center center;
    -webkit-transition-property: transform;transition-property: transform;
    -webkit-transition-duration: 0.4s;transition-duration: 0.4s;
    -webkit-transform: scale(0,1);transform: scale(0,1);
}
.slogan .titlebox.appear p.rect i{
    -webkit-transform: scale(1,1);transform: scale(1,1);
}
.slogan .titlebox p.rect i svg{
    width: 100%;
    height: 100%;
    fill: url(#gradient1);
}
/*----*/
.slogan .titlebox h1{
    position: absolute;left: 50%;top: 72px;
    width: 846px;
    text-align: center;
    margin: 0 0 0 -420px;
}
.slogan .titlebox h1 p{
    display: inline-block;
    position: relative;
    vertical-align: top;
    overflow: hidden;
    font-size: 0;
}
.slogan .titlebox h1 p.n1{
    width: 846px;
    height: 64px;
}
.slogan .titlebox h1 p span{
    display: block;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;background-position: 50% 0;background-size: auto 100%;
}
.slogan .titlebox h1 p.n1 span{
    background-image: url(../image/message/txt_copy_main_00.svg);
}
.slogan .titlebox h1 p i.cover{
    position: absolute;left: 0;top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,1);
    -webkit-transition-property: transform;transition-property: transform;
    -webkit-transition-duration: 1s;transition-duration: 1s;
    -webkit-transition-timing-function: swing;transition-timing-function: swing;
    -webkit-transform-origin: left center;transform-origin: left center;
}
.slogan .titlebox h1 p[my_phase="0"] span{
}
.slogan .titlebox h1 p[my_phase="0"] i.cover{
    -webkit-transform: translate(-110%,0);transform: translate(-110%,0);
}
.slogan .titlebox h1 p[my_phase="1"] span{
    opacity: 0;
}
.slogan .titlebox h1 p[my_phase="1"] i.cover{
    -webkit-transform: translate(0,0);transform: translate(0,0);
}
.slogan .titlebox h1 p[my_phase="2"] span{
    opacity: 1;
}
.slogan .titlebox h1 p[my_phase="2"] i.cover{
    -webkit-transform: translate(0,0);transform: translate(0,0);
}
.slogan .titlebox h1 p[my_phase="3"] span{
    opacity: 1;
}
.slogan .titlebox h1 p[my_phase="3"] i.cover{
    -webkit-transform: translate(110%,0);transform: translate(110%,0);
}

/* #### */
.slogan .notebox{
    position: relative;
    padding: 265px 0 0 0;
    text-align: center;
}
.slogan .notebox p{
    display: inline-block;
    width: 538px;
    height: 391px;
    font-size: 0;
    vertical-align: top;
    background-image: url(../image/message/txt_copy_sub_01.png);background-repeat: no-repeat;background-position: 0 0;background-size: 100% auto;
    -webkit-transition-property: opacity;transition-property: opacity;
    -webkit-transition-duration: 0.4s;transition-duration: 0.4s;
}
.slogan .notebox.appear p{
    opacity: 1;
}
.slogan .notebox .line{
    display: inline-block;
    height: 2px;
    position: absolute;
}
.slogan .notebox .line-1{
    width: 112px;
    top: 443px; right: 103px;
    background: linear-gradient(90deg, rgba(147,147,147,1) 0%, rgba(240,240,240,1) 100%);
}
.slogan .notebox .line-2{
    width: 372px;
    top: 500px; right: -36px;
    background: linear-gradient(270deg, rgba(147,147,147,1) 0%, rgba(240,240,240,1) 100%);
}
.slogan .notebox .line-3{
    width: 322px;
    top: 500px; left: -104px;
    background: linear-gradient(270deg, rgba(147,147,147,1) 0%, rgba(240,240,240,1) 100%);
}
.slogan .notebox .line-4{
    width: 192px;
    top: 446px; left: -17px;
    background: linear-gradient(90deg, rgba(147,147,147,1) 0%, rgba(240,240,240,1) 100%);
}
.slogan .notebox .line-5{
    width: 282px;
    top: 602px; right: -84px;
    background: linear-gradient(270deg, rgba(147,147,147,1) 0%, rgba(240,240,240,1) 100%);
}
/********/
.detail{
    padding: 0 0 50px 0;
}
.detail .msgwrap{
    position: relative;
    /* width: 860px; */
    padding: 0 0 50px 0;
    /* font-weight: 700; */
    /* margin: 0 auto 0 auto; */
    max-width: 1440px;
    margin: 0 auto 60px;
    padding: 0 50px 50px;
}
.message-txtbox{
    width: 100%;
    margin: 0 auto;
  } 
  .message-txtbox--pt{
    padding-top: 90px;
  }
  .message-txtbox--second{
    margin-bottom: 20px;
  }
  .message-txtbox .ttl{
    text-align: left;
    margin-bottom: 25px;
  }
  .message-txtbox .ttl span{
    display: inline-block;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: #fff;
    background: #000;
    padding: 7px 12px 8px;
    margin-bottom: 10px;
  }
  .message-txtbox .ttl span:last-child{ margin-bottom: 0; }
  .message-txtbox .desc{
    font-size: 16px;
    letter-spacing: 0.12em;
    font-weight: 400;
    color: #333333;
    line-height: 1.68;
  }
  .message_name{
    text-align: right;
    width: 100%;
    font-size: 16px;
    font-weight: 400;
    color: #333333;
    letter-spacing: 0.12em;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 50px;
  }
.detail .msgwrap .each:nth-of-type(1){
    padding: 0 0 45px 0;
}
.detail .msgwrap .each dl>dt{
    line-height: 1.5;
    padding: 0 0 10px 0;
    font-size: 18px;
    letter-spacing: 0.1em;
}
.detail .msgwrap .each dl>dd{
    overflow: hidden;
    line-height: 1.8;
    font-size: 14px;
    letter-spacing: 0.1em;
}
.detail .msgwrap .each dl>dd p{
    width: 47%;
    text-align: justify;
}
html.ie11 .detail .msgwrap .each dl>dd p{
    font-feature-settings: normal;
    text-justify: inter-ideograph;
}
.detail .msgwrap .each dl>dd p:nth-of-type(1){
    float: left;
}
.detail .msgwrap .each dl>dd p:nth-of-type(2){
    float: right;
}
.detail .msgwrap .each dl>dd p span.signature{
    display: block;
    text-align: right;
}


/*||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
}@media all and (max-width: 768px) {
/*|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/

main{
    overflow: hidden;
}

/********/
.laserbox{
}
.laserbox p.laser{
    position: absolute;
    -webkit-transform: rotateZ(-49deg);transform: rotateZ(-49deg);
}
.laserbox p.laser i{
    position: absolute;left: 0;top: 0;
    width: 0;
    height: 100%;
    opacity: 0;
}
.laserbox p.laser.n01{
    left: 1rem;top: 12rem;
    width: 7rem;
    height: 0.3rem;
}
.laserbox p.laser.n01 i{
    -webkit-animation-delay: 0s;animation-delay: 0s;
    background-image: linear-gradient(90deg, rgba(255,255,255,1),rgba(240,240,240,1));
}
.laserbox p.laser.n02{
    left: -3rem;top: 22rem;
    width: 7rem;
    height: 0.2rem;
}
.laserbox p.laser.n02 i{
    -webkit-animation-delay: 0.5s;animation-delay: 0.5s;
    background-color: rgba(160,160,160,1);
}
.laserbox p.laser.n03{
    left: -2rem;top: 38rem;
    width: 7rem;
    height: 0.2rem;
}
.laserbox p.laser.n03 i{
    -webkit-animation-delay: 0.8s;animation-delay: 0.8s;
    background-color: rgba(200,200,200,1);
}
.laserbox p.laser.n04{
    right: -2rem;top: 17rem;
    width: 7rem;
    height: 0.05rem;
}
.laserbox p.laser.n04 i{
    -webkit-animation-delay: 0.3s;animation-delay: 0.3s;
    background-image: linear-gradient(90deg, rgba(255,255,255,1),rgba(220,220,220,1));
}
.laserbox p.laser.n05{
    right: -4rem;top: 18rem;
    width: 7rem;
    height: 0.5rem;
}
.laserbox p.laser.n05 i{
    -webkit-animation-delay: 0.2s;animation-delay: 0.2s;
    background-color: rgba(240,240,240,1);
}
.laserbox p.laser.n06{
    right: -3rem;top: 41rem;
    width: 10rem;
    height: 0.2rem;
}
.laserbox p.laser.n06 i{
    -webkit-animation-delay: 0.7s;animation-delay: 0.7s;
    background-image: linear-gradient(90deg, rgba(240,240,240,1),rgba(200,200,200,1));
}


/********/
.slogan{
    /* height: 38rem; */
    height: auto;
}

.slogan .titlebox{
    position: absolute;left: 0;top: 6rem;
    width: 100%;
    text-align: center;
}
/*----*/
.slogan .titlebox p.rect{
    position: absolute;left: 3.5rem;top: -5rem;
    width: 16rem;
    height: 16rem;
    -webkit-transform: rotateZ(-49deg);transform: rotateZ(-49deg);
}
.slogan .titlebox p.rect i{
    position: absolute;left: 0;top: 0;
    width: 100%;
    height: 100%;
    -webkit-transform-origin: center center;transform-origin: center center;
    -webkit-transition-property: transform;transition-property: transform;
    -webkit-transition-duration: 0.4s;transition-duration: 0.4s;
    -webkit-transform: scale(0,1);transform: scale(0,1);
}
.slogan .titlebox.appear p.rect i{
    -webkit-transform: scale(1,1);transform: scale(1,1);
}
.slogan .titlebox p.rect i svg{
    width: 100%;
    height: 100%;
    fill: url(#gradient1);
}
/*----*/
.slogan .titlebox h1{
    width: 100%;
    text-align: center;
}
.slogan .titlebox h1 p{
    display: inline-block;
    position: relative;
    vertical-align: top;
    overflow: hidden;
    font-size: 0;
}
.slogan .titlebox h1 p.n1{
    width: 15.134rem;
    height: 2.2rem;
    margin: 0 auto;
}
.slogan .titlebox h1 p.n2{
    width: 17.134rem;
    height: 2.2rem;
    margin: 1rem 0 0 0;
}
.slogan .titlebox h1 p span{
    display: block;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;background-position: 50% 0;background-size: auto 100%;
}
.slogan .titlebox h1 p.n1 span{
    background-image: url(../image/message/txt_copy_main_01.svg);
}
.slogan .titlebox h1 p.n2 span{
    background-image: url(../image/message/txt_copy_main_02.svg);
}
/* .slogan .titlebox h1 p i.cover{
    position: absolute;left: 0;top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,1);
    -webkit-transition-property: transform;transition-property: transform;
    -webkit-transition-duration: 1s;transition-duration: 1s;
    -webkit-transition-timing-function: swing;transition-timing-function: swing;
    -webkit-transform-origin: left center;transform-origin: left center;
} */
/* .slogan .titlebox h1 p[my_phase="0"] span{
    opacity: 0;
}
.slogan .titlebox h1 p[my_phase="0"] i.cover{
    -webkit-transform: translate(-110%,0);transform: translate(-110%,0);
}
.slogan .titlebox h1 p[my_phase="1"] span{
    opacity: 0;
}
.slogan .titlebox h1 p[my_phase="1"] i.cover{
    -webkit-transform: translate(0,0);transform: translate(0,0);
}
.slogan .titlebox h1 p[my_phase="2"] span{
    opacity: 1;
}
.slogan .titlebox h1 p[my_phase="2"] i.cover{
    -webkit-transform: translate(110%,0);transform: translate(110%,0);
} */

/* #### */
.slogan .notebox{
    position: relative;
    padding: 7rem 0 0 0;
    text-align: center;
}
.slogan .notebox p{
    display: inline-block;
    width: 19rem;
    height: 14rem;
    font-size: 0;
    vertical-align: top;
    background-image: url(../image/message/txt_copy_sub_01.png);background-repeat: no-repeat;background-position: 0 0;background-size: 100% auto;
    -webkit-transition-property: opacity;transition-property: opacity;
    -webkit-transition-duration: 0.4s;transition-duration: 0.4s;
}
.slogan .notebox.appear p{
    opacity: 1;
}

/********/
.detail{

}
.detail .msgwrap{
    position: relative;
    width: 22rem;
    padding: 0 0 2rem 0;
    font-weight: 700;
    margin: 0 auto 0 auto;
}
.detail .msgwrap .each:nth-of-type(1){
    padding: 0 0 3rem 0;
}
.detail .msgwrap .each dl>dt{
    line-height: 1.5;
    padding: 0 0 1rem 0;
    font-size: 1.2rem;
    letter-spacing: 0.1em;
}
.detail .msgwrap .each dl>dd{
    line-height: 1.7;
    font-size: 0.88rem;
    letter-spacing: 0.1em;
}
.detail .msgwrap .each dl>dd p{
    text-align: justify;
}
.detail .msgwrap .signature{
    display: block;
    text-align: right;
}

.message-txtbox{
    width: 88vw;
    margin: 0 auto 8vw;
  } 
  .message-txtbox--second{
    margin-bottom: 2.8vw;
  }
  .message-txtbox .ttl{
    text-align: left;
    margin-bottom: 4vw;
  }
  .message-txtbox .ttl span{
    display: inline-block;
    font-size: 4.534vw;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: #fff;
    background: #000;
    padding: 1.6vw 2.4vw 1.6vw;
    margin-bottom: 1.34vw;
  }
  .message-txtbox .ttl span:last-child{ margin-bottom: 0; }
  .message-txtbox .desc{
    font-size: 3.734vw;
    letter-spacing: 0.12em;
    font-weight: 400;
    color: #333333;
    line-height: 1.45;
  }
  .message_name{
    width: 22rem;
    margin: 0 auto 2rem;
    text-align: right;
    font-size: 3.734vw;
    letter-spacing: 0.12em;
    color: #333333;
    letter-spacing: 0.12em;
  }
  .message-txtbox--pt{
    padding-top: 11.6vw;
  }




/*||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
}/* End of media query */
/*||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/