@charset "UTF-8";
/*
@mixin f_roboto($weight:400) {
	font-family: 'Roboto',"游ゴシック","游ゴシック体","Yu Gothic",YuGothic, sans-serif;
	font-weight:$weight;
}
Robotoフォント設定
400：Regular（デフォルト）
500：Medium
700：Bold
*/
/*
A-OTF Ryumin Pr6N
300：Bold（デフォルト）
*/
/*
font-weight:$weight;
400：Regular（デフォルト）
700：Bold
*/
/*
example
@include dotted(#COLOR, WidthPX,SpaceingPX,HeightPX); 横破線
@include dotted(#e6e1d2, 4,4,2);
*/
/*
example
@include dotted-y(#COLOR, WidthPX,SpaceingPX,LengthPX,); 横破線
@include dotted-y(#e6e1d2, 4,4,2,10);
*/
.sec_message_01 {
  padding: 1.2rem 0 2.00rem 0;
  background-color: #fff;
  position: relative;
  z-index: 1; }
  @media screen and (max-width: 460px) {
    .sec_message_01 {
      padding: 1.1rem 0 0.85rem 0;
      z-index: 2; } }
  .sec_message_01 .cnt_box {
    width: 100%;
    max-width: 12rem;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative; }
    .sec_message_01 .cnt_box .scroll_box {
      width: 0.4rem;
      height: calc(100% - 1.2rem);
      position: absolute;
      top: 0;
      left: 2.2rem;
      z-index: 1; }
      .ie .sec_message_01 .cnt_box .scroll_box {
        top: 100px; }
      @media screen and (max-width: 460px) {
        .sec_message_01 .cnt_box .scroll_box {
          width: 0.2rem;
          left: 0.5rem;
          z-index: 0; } }
      .sec_message_01 .cnt_box .scroll_box.active .gradation_box {
        -webkit-transition: top 1.0s;
        -o-transition: top 1.0s;
        transition: top 1.0s; }
        .sec_message_01 .cnt_box .scroll_box.active .gradation_box .grad {
          transition: clip-path 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1s, -webkit-clip-path 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1s;
          -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
          clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); }
        .sec_message_01 .cnt_box .scroll_box.active .gradation_box .sec_message_title {
          -webkit-transition: opacity 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1s;
          -o-transition: opacity 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1s;
          transition: opacity 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1s;
          opacity: 1; }
      .sec_message_01 .cnt_box .scroll_box.active .bar {
        -webkit-transition: 2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
        -o-transition: 2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
        transition: 2s cubic-bezier(0.455, 0.03, 0.515, 0.955); }
        @media print, screen and (min-width: 461px) {
          .sec_message_01 .cnt_box .scroll_box.active .bar {
            height: 6rem; } }
        @media screen and (max-width: 460px) {
          .sec_message_01 .cnt_box .scroll_box.active .bar {
            height: 3rem; } }
      .sec_message_01 .cnt_box .scroll_box.active .sec_message_01_moyamoya {
        opacity: 1;
        -webkit-transition: opacity 1s ease 1.0s;
        -o-transition: opacity 1s ease 1.0s;
        transition: opacity 1s ease 1.0s; }
      .sec_message_01 .cnt_box .scroll_box .sec_message_01_moyamoya {
        position: absolute;
        top: 150px;
        left: -150px;
        opacity: 1;
        width: 293px;
        height: 244px;
        opacity: 0; }
        @media screen and (max-width: 460px) {
          .sec_message_01 .cnt_box .scroll_box .sec_message_01_moyamoya {
            top: 0.6rem;
            left: -1.0rem;
            width: 2.3rem;
            height: 2rem;
            -webkit-transform: scale(0.5);
            -ms-transform: scale(0.5);
            transform: scale(0.5); } }
        .sec_message_01 .cnt_box .scroll_box .sec_message_01_moyamoya svg {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          opacity: 1; }
          .sec_message_01 .cnt_box .scroll_box .sec_message_01_moyamoya svg path {
            fill: #FFF; }
        .sec_message_01 .cnt_box .scroll_box .sec_message_01_moyamoya video,
        .sec_message_01 .cnt_box .scroll_box .sec_message_01_moyamoya img {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          -o-object-fit: cover;
          object-fit: cover; }
        @media screen and (max-width: 460px) {
          .sec_message_01 .cnt_box .scroll_box .sec_message_01_moyamoya canvas {
            position: relative;
            width: 80vw;
            height: 50vw; } }
      .sec_message_01 .cnt_box .scroll_box .gradation_box {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        position: relative;
        mix-blend-mode: normal !important;
        position: -webkit-sticky;
        position: sticky;
        z-index: 3; }
        .ie .sec_message_01 .cnt_box .scroll_box .gradation_box {
          position: relative;
          top: 0 !important;
          left: -1px;
          width: calc(100% + 2px); }
        @media print, screen and (min-width: 461px) {
          .sec_message_01 .cnt_box .scroll_box .gradation_box {
            width: 0.41rem;
            height: 3rem;
            top: 100px; } }
        @media screen and (max-width: 460px) {
          .sec_message_01 .cnt_box .scroll_box .gradation_box {
            width: 0.2rem;
            height: 1.5rem;
            top: 70px; }
            .headerMenuUp .sec_message_01 .cnt_box .scroll_box .gradation_box {
              top: 0px; } }
        .sec_message_01 .cnt_box .scroll_box .gradation_box.fixed {
          position: fixed;
          top: 0; }
        .sec_message_01 .cnt_box .scroll_box .gradation_box:before {
          content: "";
          display: block;
          position: absolute;
          bottom: 100%;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: #fff; }
        .sec_message_01 .cnt_box .scroll_box .gradation_box .grad {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
          clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
          background-color: #fff; }
        .sec_message_01 .cnt_box .scroll_box .gradation_box .sec_message_title {
          font-size: 24px;
          font-size: 0.24rem;
          letter-spacing: 0.12em;
          font-family: petersburg-web, serif;
          font-weight: 500;
          font-style: normal;
          -webkit-writing-mode: vertical-rl;
          -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
          -webkit-transform-origin: top center;
          -ms-transform-origin: top center;
          transform-origin: top center;
          z-index: 2;
          position: relative;
          opacity: 0; }
          @media screen and (max-width: 460px) {
            .sec_message_01 .cnt_box .scroll_box .gradation_box .sec_message_title {
              font-size: 16px;
              font-size: 0.16rem;
              -webkit-writing-mode: vertical-rl;
              -ms-writing-mode: tb-rl;
              writing-mode: vertical-rl; } }
    .sec_message_01 .cnt_box .bar {
      background-color: #000;
      position: absolute;
      top: 0;
      left: 0;
      -webkit-transform-origin: top center;
      -ms-transform-origin: top center;
      transform-origin: top center;
      z-index: 1;
      height: 0rem; }
      @media print, screen and (min-width: 461px) {
        .sec_message_01 .cnt_box .bar {
          width: 0.4rem; } }
      @media screen and (max-width: 460px) {
        .sec_message_01 .cnt_box .bar {
          width: 0.2rem; } }
    .sec_message_01 .cnt_box .txt_box {
      width: 57%;
      margin-left: auto;
      padding: 1.2rem 0 0 0; }
      @media screen and (max-width: 460px) {
        .sec_message_01 .cnt_box .txt_box {
          width: 58.33%;
          padding: 0.3rem 0 0 0;
          margin-right: 0.3rem; } }
      .sec_message_01 .cnt_box .txt_box .message_txt {
        font-size: 18px;
        font-size: 0.18rem;
        line-height: 2.5;
        letter-spacing: 0.06em;
        font-weight: bold; }
        @media screen and (max-width: 460px) {
          .sec_message_01 .cnt_box .txt_box .message_txt {
            font-size: 15px;
            font-size: 0.15rem;
            line-height: 1.9; } }
        .sec_message_01 .cnt_box .txt_box .message_txt .txt:not(:first-of-type) {
          display: block;
          margin-top: 0.4rem; }

/*# sourceMappingURL=index_message_01.css.map */