@charset "utf-8";

/*SP用*/
@media screen and (max-width:640px) {


  #top .breadcrumbs {
    display: none;
  }
  #top .en_ttl {
    display: none;
  }

  #top .jp_ttl{
    display: none;
  }

  .load {
    overflow: hidden;
  }


  .scroll_txt {
    color: #fff;
    position: absolute;
    right: 47px;
    bottom: 22vw;
    font-weight: bold;
    font-weight: 700;
  }

  .scroll_box {
    position: relative;
    overflow: hidden;
  }

  .scroll_img {}

  .box {
    width: 50px;
    height: 189px;
    background-color: #DA3615;
    position: absolute;
    top: 0;
  }

  /* CSS animation */
  @keyframes moveRight {
    from {
      top: 0;
    }

    to {
      top: 200px;
    }
  }

  .box.css-only {
    /* animation: moveRight 2s ease-in-out infinite; */
    animation: moveRight 1.5s linear infinite;
  }

  .scroll_wrap {

    position: absolute;

    right: 14px;

    bottom: 6px;

    width: 18px;

    z-index: 100;

  }

  /* スクロールダウンの位置 */
  .scroll {
    position: absolute;
    right: 50%;
    top: 10%;
    writing-mode: vertical-rl;
    /* background: url(../images/top/scroll.png)no-repeat top center; */
    background-size: contain;
    animation: scroll 2s infinite;
    width: 93px;
    height: 104px;
  }

  /* 線のアニメーション部分 */
  .scroll::before {
    animation: scroll 2s infinite;
    background-color: #000;
    bottom: -115px;
    content: "";
    height: 100px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    width: 1px;
  }

  /* 線のアニメーション */
  @keyframes scroll {
    0% {
      transform: scale(1, 0);
      transform-origin: 0 0;
    }

    50% {
      transform: scale(1, 1);
      transform-origin: 0 0;
    }

    51% {
      transform: scale(1, 1);
      transform-origin: 0 100%;
    }

    100% {
      transform: scale(1, 0);
      transform-origin: 0 100%;
    }
  }

  #top .slide_wrap_outer {
    position: absolute;
    overflow: hidden;
    z-index: 1;
    top: 1vw;
  }

  #top .slide_wrap {
    padding: 42vw 0vw 0;
    /* position: absolute; */
    transform: translateX(0vw);
  }

  #top .slide_wrap .slide {}

  #top .slide_wrap .slide li {
    width: 25vw;
  }



  #top .load_wrap {
    position: absolute;
    z-index: 100000;
    background: #FFBBAD;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }

  #top .top_layer {
    width: 100%;
    height: 100%;
    background: #DA3615;
    mask-image: radial-gradient(circle at 30% center, transparent 215px, black 221px);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
  }

  #top .top_layer .logo {
    padding: 14px 0 0 16px;
  }

  #top .top_layer .logo img {
    padding: 0px 7px 0 0px;
    vertical-align: middle;
  }

  #top .top_layer .logo a {
    color: #fff;
    font-weight: 600;
    vertical-align: -webkit-baseline-middle;
  }

  #top .load_wrap .lowest_layer {
    position: relative;
    height: 100vh;
    top: 0;
    background: #FFD8D0;
    left: 0;
    right: 0;
    bottom: 0;
  }

  #top .load_wrap .m_ttl {
    color: #fff;
    font-size: 12.5vw;
    font-weight: bold;
    width: 90vw;
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    height: fit-content;
    line-height: 36vw;
  }

  #top .load_wrap.fin {
    display: none;
  }


  #top #header .h_inner {
    /* background: #FFD8D0; */
    /* mask-image: radial-gradient(circle at 50% center, transparent 215px, black 221px); */
    /* height: 72vh; */
    height: 100vh;
    background: #DA3615;
    /* アニメーション設定：0.5秒で変化、終了状態を保持 */
    animation: bgTransition 3s ease forwards;
  }

  @keyframes bgTransition {
    from {
      background: #DA3615;
    }

    to {
      background: #FFD8D0;
    }
  }


  #top #header .m_ttl {
    position: absolute;
    z-index: 1000;
  }

  #top #header .main_img img {
    position: relative;
    z-index: 1;
  }


  #top .spotlight {
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 101%;
    height: 101%;
    background: #DA3615;
    pointer-events: none;
    z-index: 10;
    /* CSS変数の初期設定 */
    --radius: 200px;
    /* mask 用：透明な円（スポットライト）の半径 */
    --posX: 50%;
    --posY: 33%;
    --clipRadius: 200vmax;
    /* clip-path 用：初期は全画面を覆う大きな円 */
    /* mask によるスポットライト効果（中央の円部分を透明に） */
    mask: radial-gradient(circle at var(--posX) var(--posY),
        transparent var(--radius),
        black calc(var(--radius) + 1px));
    /* clip-path により、赤いオーバーレイを円形に表示 */
    /* clip-path: circle(var(--clipRadius) at var(--posX) var(--posY)); */
    transition: clip-path 0.5s;
    z-index: 100;
    position: relative;
    transition: opacity 0.3s ease-in;
    position: fixed;
    --posY: 38%;
  }


  #top .no_block {
    /* background: #DA3615; */
    background: #FFD8D0;
    height: 50vh;
  }

  #top .no_block .no_block_inner {

    width: 100vw;
    margin: 0 auto;
    position: relative;
  }

  #top .no_block .no_block_inner .bg_l {
    background: url(../images/top/bg_l.png)no-repeat left center;
    background-size: contain;
    height: 100vh;
    width: 100vw;
    margin: 0 auto;
    left: 0;
    top: 0;
    z-index: 1000;

  }
  
  #top .no_block .no_block_inner .bg_r {
    background: url(../images/top/bg_r.png)no-repeat right center;
    background-size: contain;
    height: 100vh;
    width: 100vw;
    margin: 0 auto;

    right: 0;
    top: 0;
    z-index: 1000;
  }

  #top .fix {
    /* position: fixed;
    --posY: 50%; */
  }

  #top .fade_red_bg {

    animation: fadeOut 0.3s forwards;
  }

  @keyframes fadeOut {
    from {
      opacity: 1;
    }

    to {
      opacity: 0;
    }
  }

  #top .uma_box {}

  #top .uma_block {
    padding: 283px 0;
    background: #FFD8D0;
  }

  #top .uma_ttl {
    font-size: 7.5vw;
    color: #DA3615;
  }

  #top .uma_en {

    font-size: 3.2vw;

    color: #DA3615;

    font-weight: bold;

    padding: 8px 0 44px;

  }

  #top .uma_txt {

    font-size: 4vw;

    color: #DA3615;

    font-weight: bold;

    line-height: 2.7;

  }

  #top .find_hu_wrap_outer {
    margin: 0 0 18vw;
  }

  #top .find_hu_wrap_outer .circle_bg {

    background: #FFD8D0;

    width: 62vw;

    height: 62vw;

    position: fixed;

    left: 0;

    right: 0;

    margin: 0 auto;

    z-index: 4;

    top: 1vw;

    border-radius: 110vw;

  }

  #top .find_hu_wrap {
    background: #FFD8D0;
    position: relative;
    z-index: 10;
  }




  #top .find_hu_wrap .find_hu {

    width: 46vw;

    margin: 0 auto;

    padding: 19px 0 0;

    transition: all 0.6s;
    /* アニメーション効果 */

    transform: translate(0, 0);

    left: 0;

    right: 0;

  }

  #top .find_hu.move {
    /* transform: translate(var(--offset-x, 0px), var(--offset-y, 0px)); */
    transform: translate(0vw, 160vw);
    /* position: fixed; */
    /* left: 0vw; */
    top: 14px;
    padding: 0;
    right: 0;
    width: 35vw;
  }

  #top .find_hu.move_under {
    transform: translate(0vw, 269vw);
  }

  #top .find_hu.move_under02 {
    transform: translate(0vw, 383vw);
  }

  #top .promise {}

  #top .promise_in {

    padding: 170px 0;

    padding: 8vw 0;

  }

  #top .find01 {

    padding: 45vw 0;

    position: relative;
  }

  #top .find01_in {

    padding: 0px 3vw;

    text-align: center;

  }

  #top .find_img {

    position: absolute;

    right: 0;

    top: 76vw;

    left: 0;

    width: 20vw;

    margin: 0 auto;

  }

  #top .find_img01 {
    opacity: 0.0;
    transition: opacity 0.3s ease-in;

  }

  #top .find_img01.on {
    opacity: 1;
  }

  #top .find_img02 {
    opacity: 0.0;
    transition: opacity 0.3s ease-in;

  }

  #top .find_img02.on {
    opacity: 1;
    top: 77vw;
  }

  #top .find_img03 {
    opacity: 0.0;
    transition: opacity 0.3s ease-in;

  }

  #top .find_img03.on {
    opacity: 1;
    top: 79vw;
  }

  #top .find_hu.large {

    width: 63vw;

    transform: translate(0vw, 481vw);
  }


  #top .find02 {

    position: relative;

    padding: 45vw 0;

  }

  #top .find02_in {

    padding: 0px 3vw;

    text-align: center;

  }

  #top .find03 {
    position: relative;
    padding: 45vw 0;

  }

  #top .find03_in {

    padding: 0px 3vw;

    text-align: center;

  }

  #top .find04 {

    padding: 45vw 0;

  }

  #top .find04_in {}

  #top .fin_move01 {

    padding: 35vw 0;


    position: relative;

  }

  #top .fin_move01_in {
    padding: 0 0 16vw;
  }

  #top .together {

    text-align: center;

    position: absolute;

    top: -83vw;

    left: 0vw;

    right: 0;

    margin: 0 auto;

    opacity: 0;

    transition: opacity 0.8s ease-in;

    width: 57vw;

  }

  #top .together.on {
    opacity: 1;
  }



  #top .fin_move03 {

    background: #fff;

    padding: 0vw 0;

  }

  #top .fin_move03_in {}


  .spotlight_white_wrap {}

  /* 1) Register your custom property as a <length> for animation. */
  @property ---radius {
    syntax: "<length>";
    inherits: false;
    initial-value: 62vw;
  }

  .spotlight_white {
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: #ffffff;
    pointer-events: none;
    z-index: 100;
    --posX: 50%;
    --posY: 50%;

    /* Reference --radius in your radial-gradient */
    mask: radial-gradient(circle at var(--posX) var(--posY),
        transparent var(---radius),
        black calc(var(---radius) + 1px));


  }

  /* 2) Keyframe animation from 62vw to 22vw over 2s */
  @keyframes shrinkRadius {
    0% {
      ---radius: 62vw;
    }

    100% {
      ---radius: 31vw;
    }
  }



  /* 3) Trigger it by adding .active */
  .spotlight_white.active {
    /* position: fixed; */
    animation: shrinkRadius 1.5s forwards;
  }





  #top .hu_block {}

  #top .hu_block .hu_box {
    width: 92vw;
    margin: 0 auto;
    padding: 56px 0 0;
    display: block;
  }

  #top .hu_block .l_box {
    position: relative;
    padding: 0 0 396px;
    box-sizing: border-box;
  }

  #top .hu_block .r_box {
    position: relative;
    padding: 10px 0 230px;
  }

  #top .hu_block .talk {
    padding: 0 0 21px;
    opacity: 0.3;
    transition: opacity 0.6s ease-in-out;
  }

  #top .hu_block .hu {
    position: relative;
    z-index: 100;
    position: absolute;
    left: -11vw;
  }

  #top .hu_block .r_box .hu {
    position: relative;
    z-index: 100;
    position: absolute;
    left: -2vw;
    top: -45px;
    width: 44vw;
  }

  #top .hu_block .shade {
    position: absolute;
    bottom: -11px;
    z-index: 1;
    opacity: 1;
    transition: opacity 0.2s ease-in-out;

  }

  #top .hu_block .r_box .shade {
    bottom: 39px;
    position: absolute;
    left: -13px;
    width: 47vw;
  }

  #top .hu_block .active .talk, #top .hu_block .active .shade {
    opacity: 1;
  }

  #top .hu_block .l_box .talk {
    position: absolute;
    left: -79px;
  }

  #top .hu_block .l_box .hu {
    padding: 0px 0 0;
    position: relative;
    z-index: 100;
    position: absolute;
    right: 0vw;
    left: auto;
    width: 48vw;
  }

  #top .hu_block .l_box .shade {
    position: absolute;
    bottom: 103px;
    z-index: 1;
    right: 0vw;
    width: 47vw;
  }


  #top .hu_block .l_box .talk_box {

    width: 142px;

    position: absolute;

    top: 138px;

    left: 20px;
  }

  #top .hu_block .r_box .talk_box {

    width: 187px;

    position: absolute;

    right: 9px;
  }

  #top .hu_block .talk_txt {
    font-size: 25px;
    color: #DA3615;
    font-weight: bold;
  }



  /* arrow_wrap */
  .scroll_wrap.arrow_wrap {

    position: initial;

    right: 14px;

    bottom: 28px;

    width: 100%;
  }

  .arrow_wrap .scroll_box {
    position: relative;
    overflow: hidden;
    width: 100%;
  }

  .arrow_wrap .box {
    width: 100%;
    height: 10px;
    background-color: #fff;
    position: absolute;
    top: 10px;
  }

  /* CSS animation */
  @keyframes moveRight_arrow {
    /* from {
    left: 0;
  }
  to {
    left: 100%;
  } */

    /* 開始位置 */
    0% {
      transform: translateX(0);
    }

    /* 70%時点でゴール */
    60% {
      transform: translateX(200px);
    }

    /* 70～100%は同じ位置のまま */
    100% {
      transform: translateX(200px);
    }
  }

  .arrow_wrap .box.css-only {
    animation: moveRight_arrow 1.5s linear infinite;
  }



  /* スクロールダウンの位置 */
  .arrow_wrap .scroll {
    position: absolute;
    right: 50%;
    top: 10%;
    writing-mode: vertical-rl;
    /* background: url(../images/top/scroll.png)no-repeat top center; */
    background-size: contain;
    animation: scroll 2s infinite;
    width: 93px;
    height: 104px;
  }

  /* 線のアニメーション部分 */
  .arrow_wrap .scroll::before {
    animation: scroll 2s infinite;
    background-color: #000;
    bottom: -115px;
    content: "";
    height: 100px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    width: 1px;
  }

  /* 線のアニメーション */
  @keyframes scroll {
    0% {
      transform: scale(1, 0);
      transform-origin: 0 0;
    }

    50% {
      transform: scale(1, 1);
      transform-origin: 0 0;
    }

    51% {
      transform: scale(1, 1);
      transform-origin: 0 100%;
    }

    100% {
      transform: scale(1, 0);
      transform-origin: 0 100%;
    }
  }





  #top .bx-controls-direction {
    display: none;
  }

  #top .bx-wrapper {
    background: #FFD8D0;
    /* position: absolute; */
    /* right: -7vw; */
    height: 350px;
  }



  #top .sec01 {
    padding: 33vw 0 20vw;
    position: relative;
    overflow: hidden;
    background: url(../images/top/news_bg.png) no-repeat top center #FFD8D0;
    background-size: contain;
  }

  #top .sec01 .news_list {
    width: 93vw;
    margin: 0 auto 32px;
    position: relative;
    z-index: 10;
    border-top: solid 1px #fff;
  }

  #top .sec01 .news_list li {
    font-weight: bold;
  }

  #top .sec01 .news_list li a {
    font-weight: bold;
    padding: 81px 0 36px;
    display: block;
    border-bottom: solid 1px #fff;
    /* border-top: solid 1px #fff; */
    position: relative;
  }

  #top .sec01 .news_list li .date {
    position: absolute;
    left: 0;
    top: 39px;
  }

  #top .sec01 .news_list li .cat {
    color: #fff;
    background: #DA3615;
    border-radius: 32px;
    padding: 3px 0;
    font-weight: 300;
    width: 108px;
    display: inline-block;
    text-align: center;
    margin: 0 19px;
    position: absolute;
    left: 94px;
    top: 39px;
  }



  #top .sec01 .circle01 {background: #FFD8D0;width: 300vw;height: 300vw;border-radius: 191vw;position: absolute;left: -154vw;bottom: -58vw;z-index: 0;display: none;}

  #top .sec01 .circle02 {
    background: #FFD8D0;
    width: 270vw;
    height: 270vw;
    border-radius: 191vw;
    position: absolute;
    left: 9vw;
    bottom: -31vw;
    z-index: 0;
    display: none;
  }


  #about .sec01 {}

  #about .uma_txt_center {

    font-size: 4vw;
    font-weight: 500;
    line-height: 3;
    margin: 0 0 79px;
  }

  #about .color {
    font-weight: 500;
    color: #fff;
    background: linear-gradient(90deg, #DA3615 0%, #FFCC00 100%);
    padding: 0 3px;
    background-size: 0 100%;

  }

  #about .marker {
    transition: background-size 0.8s;
    background-repeat: no-repeat;
  }

  #about .marker.on {
    background-size: 100% 100%;
  }







  #about .sec02 {}

  #about .sec02 .pro_list {
    margin: 0 0 46px;
    justify-content: center;
  }

  #about .sec02 .pro_list li {
    position: relative;
    margin: 0 49px 43px;
  }

  #about .sec02 .num {
    color: #DA3615;
    font-size: 34px;
    font-weight: bold;
    text-align: center;
    border-bottom: solid 4px;
    width: 45px;
    margin: 0 auto 27px;
  }

  #about .sec02 figure {
    margin: 0 0 17px;
    z-index: 10;
    position: relative;
  }

  #about .sec02 .pro_txt {
    text-align: center;
    font-weight: 500;
    font-size: 20px;
  }

  #about .sec02 .pink {
    background: #FBEBE8;
    width: 243px;
    height: 243px;
    border-radius: 130px;
    position: absolute;
    top: 91px;
    margin: 0 auto;
    left: 0;
    right: 0;
    z-index: 0;
  }

  #about .sec03 {
    background: #FBEBE8;
    position: relative;
    padding: 48px 0 62px;
  }

  #about .sec03 .l_ttl {
    text-align: center;
    margin: 0 0 44px;
  }

  #about .sec03 .uma_txt {
    text-align: center;
    font-weight: 600;
    font-size: 4vw;
    line-height: 2.8;
    margin: 0 0 75px;
  }

  #about .sec03 .s_warap {
    margin: 0 0 115px;
  }

  #about .sec03 .slider {}

  #about .sec03 .bx-wrapper {
    background: initial;
    margin: 0 auto;
    border-radius: 19px;
  }

  .active-slide {}

  @keyframes shake {
    0%, 57.14% {
      transform: rotate(0deg);
    }

    66.67% {
      transform: rotate(5deg);
    }

    80% {
      transform: rotate(-5deg);
    }

    100% {
      transform: rotate(0deg);
    }
  }


  #about .sec03 .slider li {
    background: #fff;
    /* width: 397px!important; */
    border-radius: 23px;
    margin: 0 auto;
    padding: 32px 40px 18px;
    box-sizing: border-box;
    position: relative;
    border-radius: 22px;
    /* box-shadow: 0 0 18px #a7a7a7; */
    height: 640px;

    /* animation: shake 1s infinite; */
  }

  #about .sec03 .slider .shake {
    /* 全体で3秒、つまり2秒静止＋1秒シェイクを無限に繰り返す */
    animation: shake 2s infinite;
    display: initial !important;

  }

  #about .sec03 .slider .active {
    animation: none;

  }

  #about .sec03 .bx-viewport {
    overflow: initial !important;
  }

  #about .bx-wrapper {
    box-shadow: none;

  }


  #about .sec03 .slider li {
    background: #fff;
    width: 76%;
    border-radius: 23px;
    margin: 0 auto;
    padding: 32px 35px 18px;
    box-sizing: border-box;
    position: relative;
    border-radius: 22px;
    box-shadow: 0 0 18px #a7a7a7;
  }

  #about .sec03 .slider li .s_ttl {
    color: #DA3615;
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 10px;
  }

  #about .sec03 .slider li .s_sub {
    color: #DA3615;
    font-size: 17px;
    font-weight: 600;
    margin: 0 0 23px;
  }

  #about .sec03 .slider figure {
    margin: 0 0 21px;
  }

  #about .sec03 .slider .s_txt {
    color: #DA3615;
    font-size: 15px;
    margin: 0 0 35px;
    line-height: 1.6;
  }

  #about .sec03 .slider .umami {
    color: #DA3615;
    font-size: 18px;
    font-weight: bold;
  }

  #about .sec03 .slider .r_red {
    background: #DA3615;
    width: 49px;
    height: 49px;
    position: absolute;
    right: 0;
    top: 0;
    border-radius: 0 22px 0 65px;
  }

  #about .sec03 .slider .l_red {
    background: #DA3615;
    width: 49px;
    height: 49px;
    position: absolute;
    left: 0;
    bottom: 0;
    border-radius: 0 65px 0 22px;
  }

  #about .bx-controls-direction {
    display: none;
  }


  .slider-container {
    position: relative;
  }

  .scroll-message {
    display: none;
    /* 初期は非表示 */
    position: absolute;
    top: 10px;
    /* bxSlider上部に配置（必要に応じて調整） */
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    /* background: rgba(0, 0, 0, 0.5); */
    color: #fff;
    padding: 5px 10px;
    border-radius: 3px;
    font-size: 14px;
    cursor: pointer;
    /* タップできることを示す */
    width: 86%;
    height: 470px;
    padding: 157px 0 0;
  }

  .scroll-message img {
    width: 89%;
    margin: 0 auto;
    display: block;
  }

  /* スマホ向けの表示（例：画面幅768px以下） */
  @media (max-width: 768px) {
    .scroll-message {
      display: block;
    }
  }

  .scroll_box {
    /* position: relative; */
    /* overflow: hidden; */
    /* height: 50px; */
    /* width: 39px; */
  }

  .scroll_img {}

  .box {
    width: 50px;
    height: 107px;
    background-color: #FBEBE8;
    position: absolute;
    top: 0;
    z-index: 100;
  }

  /* CSS animation */
  @keyframes moveRight {
    from {
      top: 0;
    }

    to {
      top: 200px;
    }
  }

  .box.css-only {
    /* animation: moveRight 2s ease-in-out infinite; */
    animation: moveRight 1.5s linear infinite;
  }


  #about .sec03 .scroll_wrap {
    position: absolute;
    right: 0;
    bottom: 0px;
    width: 48px;

    left: 0;

    margin: 0 auto;

  }

  /* スクロールダウンの位置 */
  #about .sec03 .scroll {
    position: absolute;
    right: 50%;
    top: 10%;
    writing-mode: vertical-rl;
    /* background: url(../images/top/scroll.png)no-repeat top center; */
    background-size: contain;
    animation: scroll 2s infinite;
    width: 93px;
    height: 104px;
  }

  /* 線のアニメーション部分 */
  #about .sec03 .scroll::before {
    animation: scroll 2s infinite;
    background-color: #000;
    bottom: -115px;
    content: "";
    height: 100px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    width: 1px;
  }

  /* 線のアニメーション */
  @keyframes scroll {
    0% {
      transform: scale(1, 0);
      transform-origin: 0 0;
    }

    50% {
      transform: scale(1, 1);
      transform-origin: 0 0;
    }

    51% {
      transform: scale(1, 1);
      transform-origin: 0 100%;
    }

    100% {
      transform: scale(1, 0);
      transform-origin: 0 100%;
    }
  }

  #about .sec03 .under_arrow {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0px;
    margin: 0 auto;
    width: 39px;
    z-index: 1;
  }


  #about .sec03 .under_arrow {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0px;
    margin: 0 auto;
    width: 27px;
  }

  #about .sec03 .interview {
    margin: 0 0 68px;
  }

  #about .sec03 .interview a {
    padding: 50px 25px;
    background: #DA3615 url(../images/about/arrow_r.png) no-repeat right 35px bottom 70px;
    width: 100%;
    margin: 0 auto;
    display: block;
    box-sizing: border-box;
  }

  #about .sec03 .interview .in_box {
    /* background: #DA3615; */
    /* width: 1050px; */
    /* margin: 0 auto; */
  }

  #about .sec03 .interview .in_box .l_box {}

  #about .sec03 .interview .in_box .content_ttl_en {
    color: #fff;
  }

  #about .sec03 .interview .in_box .sub_ttl {
    color: #fff;
    text-align: left;
  }

  #about .sec03 .interview .in_box .r_box {
    color: #fff;
    font-size: 23px;
    padding: 0px 26px 0 0;
    box-sizing: border-box;
  }

  #about .sec03 .step_box {
    margin: 0 0 52px;
  }

  #about .sec03 .step_box ul {
    justify-self: center;
    align-items: center;
    display: block;
    text-align: center;
  }

  #about .sec03 .step_box ul li {
    background: #fff;
    border: solid 6px #DA3615;
    border-radius: 121px;
    width: 210px;
    height: 210px;
    /* position: relative; */
    margin: 0 auto -2px;
  }

  #about .sec03 .step_box .step_list_t {
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    /* padding: 82px 0 0; */
    position: absolute;
    top: 77px;
    left: 0;
    right: 0;
  }

  #about .sec03 .step_box .step_list_t02 {
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    /* padding: 58px 0 0; */
    position: absolute;
    bottom: 27px;
    left: 0;
    right: 0;
  }

  #about .sec03 .step_box ul .line {
    border: none;
    background: none;
    width: initial;
    height: auto;
    transform: rotate(90deg) !important;
    padding: 0 0 12px 6px;
  }

  #about .sec03 .step_box ul .l_arrow {
    padding: 0 0 0 0;
  }

  #about .sec03 .step_txt {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.8;
    margin: 0 0 20px;
  }

  #about .sec03 .step_box p.first_txt {
    top: 94px;
  }

  #about .sec03 .step_box .step_list_t:after {
    background-color: #DA3615;
    content: "";
    display: block;
    height: 2px;
    width: 20px;
    margin: 14px auto 0;
  }

  #about .sec03 .step_box p.first_txt:after {
    margin: 22px auto 0;
  }

  #about .sec04 {
    width: 100%;
    margin: 0 auto;
    padding: 56px 16px 19px;
    box-sizing: border-box;
  }

  #about .sec04 .bnr_mynavi {
    justify-content: center;

  }

  #about .sec04 .bnr_mynavi a {
    padding: 7px 9px;
  }




  #about .sec04 .sec04_ttl {
    /* color: #fff; */
    font-size: 41px;
    padding: 32px 0px 53px;
    font-weight: 500;
  }

  #about .sec04 .red_ttl {
    background: #DA3615;
    color: #fff;
    font-size: 21px;
    padding: 21px 0;
    text-align: center;
  }

  #about .sec04 .gray_box {
    background: #F6F6F6;
    margin: 0 0 57px;
    padding: 32px 16px;
  }



  #about .sec04 .gray_box table {
    border-top: solid #111111 1px;
  }

  #about .sec04 .gray_box table tbody {}

  #about .sec04 .gray_box table tr {
    border-bottom: solid #111111 1px;
  }

  #about .sec04 .gray_box table th {
    font-size: 18px;
    font-weight: 600;
    padding: 25px 0px 7px;
    /* width: 340px; */
    display: block;
  }

  #about .sec04 .gray_box table td {}

  #about .sec04 .gray_box table td {
    font-size: 16px;
    display: block;
    padding: 0 0 20px;
    font-weight: 400;
  }

  #about .sec04 .gray_box .btn {}

  #about .sec04 .gray_box .btn a {
    /* padding: 40px 58px 3px; */
    background: #DA3615 url(../images/about/arrow_r.png) no-repeat right 25px center;
    /* width: 1050px; */
    margin: 0 auto;
    box-sizing: border-box;
    color: #fff;
    font-size: 17px;
    text-align: center;
    padding: 25px 24px;
    width: 100%;
    display: block;
    background-size: 16px;
    font-weight: 800;
  }

  /* ------------------------------------
ボタンの基本スタイル
------------------------------------*/
  /* ボタン自体のスタイル */
  .shine-button {
    /* background: #DA3615;	 */
    margin: 1.5em auto;
    /* 上下に1emの余白, 左右は中央揃えにするために auto */
    text-align: center;
    /* 内部のリンクテキストは中央揃え */
    display: block;
    /* 形状は block */
    /* width: 100%; */
    /* 横幅は一杯に伸ばす */
    /* max-width: 500px; */
    /* その中でも最大幅は500pxに制限 */
    /* border-radius: 100px; */
    /* 角は丸く */
    cursor: pointer;
    /* リンクがあれば不要 */
    /* ボタンを光らせるために必要 */
    position: relative;
    /* ボタンの位置を基準にするため relative指定 */
    overflow: hidden;
    /* ボタンの外の領域は非表示 */
  }

  /* ボタン内のリンクのスタイル 
  （リンク自体でボタンを作る場合には不要） */
  .shine-button a {
    display: block;
    /* 形状はblock */
    width: 100%;
    /* 外側のボックスに対して横幅いっぱいに*/
    /* padding: 1em; */
    /* 上下左右1文字分の余白 */
    box-sizing: border-box;
    color: white;
    /* 文字色は白 */
    text-decoration: none;
    /* 下線など文字装飾は無し */
  }

  /* リンク自体でボタンを作る場合の追加のスタイル
  （ボックス＋その中にリンクのあるボタンの場合には不要）*/
  a.shine-button {
    padding: 1em;
    /* 上下左右に1文字分の余白を設ける */
    color: white;
    /* 文字色を白色に指定*/
    text-decoration: none;
    /* リンクの下線は非表示 */
  }

  /* ------------------------------------
  ボタンの外側にボックス作成
  （疑似要素「before」を使う）
  ------------------------------------*/
  .shine-button::before {
    content: "";
    /* 文字は表示しないので中身無しを指定 */
    position: absolute;
    /* ボタンの位置を基準に絶対値指定する */
    display: block;
    /* 形式はblock */
    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5));
    /* 背景色は透明から白になるグラデーション */
    width: 50px;
    /* 横幅 */
    height: 50px;
    /* 縦幅 */
    top: -60px;
    /* ボタン左上を基準に上へ60pxの位置 */
    left: -60px;
    /* ボタン左上を基準に左へ60pxの位置 */
    /* アニメーションの動作指定 */
    animation-name: shine-run;
    /* アニメーション名の指定 */
    animation-delay: 0s;
    /* アニメーションの開始時間指定 */
    animation-duration: 3s;
    /* アニメーション動作時間の指定 */
    animation-timing-function: ease-in;
    /* アニメーションの動き指定（徐々に早く）*/
    animation-iteration-count: infinite;
    /* アニメーションの無限繰り返しの指定 */
  }

  /* ------------------------------------
  アニメーションのタイミングとボックスの
  拡大率、角度、透過率の指定
  ------------------------------------*/
  @keyframes shine-run {
    0% {
      transform: scale(0) rotate(50deg);
      /* アニメ開始時は大きさ0、50度の傾き */
      opacity: 0;
      /* アニメ開始時は全透過 */
    }

    40% {
      transform: scale(1) rotate(50deg);
      /* 40%まで進む間に大きさを等倍に。傾きは50度のまま*/
      opacity: 1;
      /* 透過しない（しっかり表示される）ように1を設定 */
    }

    100% {
      transform: scale(250) rotate(50deg);
      /* 最後は元の大きさの250倍になるようにする。傾きは50度のまま*/
      opacity: 0;
      /* 全透過になるようにして、徐々に消えるような変化を付ける */
    }
  }


  #yanagiya .anchor_box {
    margin: 0;
  }

  #yanagiya .sec01 {
    background: #FBEBE8;
    padding: 57px 0 0;
    height: 6160px;
  }

  #yanagiya .sec01 .content_ttl_jp {
    font-weight: 500;
    margin: 0;
    padding: 0 0 368px;
  }

  #yanagiya .sec01 .inner {
    position: relative;
    width: 100%;
    margin: 0 auto;
  }

  #yanagiya .sec01 .line {
    width: 100%;
    /*height: 0;*/
    /* 初期状態は高さ0 */
    background-position: top center;
    background-image: url("../images/yanagiya/line_s.png");
    background-repeat: no-repeat;
    background-size: 40vw;
    height: 5455px;
    margin: 0 auto;
    position: absolute;
    top: 0;
    max-height: 1451vw;
    left: 0;
    background-color: #FBEBE8;
    right: 0;
  }

  /* 線の背景となるコンテナ */
  .line-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 1024px;
    /* 画像の横幅に合わせる */
    height: 100%;
    /* overflow: hidden; */
    /* コンテナからはみ出た部分は非表示 */
    right: 0;
  }

  #yanagiya .sec01 .y_box {
    background: #fff;
    width: 290px;
    padding: 18px 21px;
    box-sizing: border-box;
    border-radius: 11px;
    position: absolute;
  }

  #yanagiya .sec01 .on .y_box_in {
    opacity: 0;
    animation: fadeIn 0.4s ease forwards;
    animation-delay: 0.4s;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }


  #yanagiya .sec01 .box01 {
    top: -297px;
    left: 7vw;
    z-index: 10;
  }

  #yanagiya .sec01 .box02 {
    top: 212px;
    right: 24px;
  }

  #yanagiya .sec01 .box03 {
    top: 734px;
    left: 7vw;
  }

  #yanagiya .sec01 .box04 {
    top: 1175px;
    right: 25px;
  }

  #yanagiya .sec01 .box05 {
    top: 1695px;
    left: 6vw;
  }

  #yanagiya .sec01 .box06 {
    top: 2206px;
    right: 25px;
  }

  #yanagiya .sec01 .box07 {
    top: 2686px;
    left: 7vw;
  }

  #yanagiya .sec01 .box08 {
    top: 3246px;
    right: 25px;
  }

  #yanagiya .sec01 .box09 {
    top: 3796px;
    left: 6vw;
  }

  #yanagiya .sec01 .box10 {
    top: 4252px;
    right: 25px;
  }

  #yanagiya .sec01 .box11 {
    top: 4729px;
    left: 7vw;
  }

  #yanagiya .sec01 .box12 {
    top: 5171px;
    right: 26px;
  }

  #yanagiya .sec01 .box_ttl {
    text-align: center;
    color: #DA3615;
    font-weight: bold;
    font-size: 18px;
  }

  #yanagiya .sec01 .box_txt {
    padding: 13px 0 17px;
    line-height: 1.7;
    font-size: 12px;
  }

  #yanagiya .sec01 .y_box figure {}

  #yanagiya .sec02 {
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 62px 3vw 22px;
  }

  #yanagiya .sec02 .content_ttl_en {
    font-size: 48px;
    text-align: left;
  }

  #yanagiya .sec02 .sub_ttl {
    font-size: 18px;
    color: #DA3615;
    text-align: left;
  }

  #yanagiya .sec02 .m_box {
    width: 100%;
    margin: 0 auto;
    /* justify-content: stretch; */
    padding: 0 0vw;
    box-sizing: border-box;
  }

  #yanagiya .sec02 .m_box .l_box {
    width: 62%;
    padding: 9px 0 0;
  }

  #yanagiya .sec02 .m_box .m_txt {
    font-size: 13px;
    line-height: 2;
    margin: -13px 0 38px;
  }

  #yanagiya .sec02 .m_box .name {
    font-size: 14px;
    color: #DA3615;
    font-weight: 600;
    text-align: right;
  }

  #yanagiya .sec02 .r_box {
    width: 35%;
  }

  #yanagiya .sec02 .on .r_box {
    opacity: 0;
    animation: fadeIn 0.2s ease forwards;
    animation-delay: 0.1s;
  }

  #yanagiya .sec02 .on .l_box {
    opacity: 0;
    animation: fadeIn 0.3s ease forwards;
    animation-delay: 0.3s;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }


  #yanagiya .sec03 {
    width: 100%;
    margin: 0 auto;
    padding: 62px 3vw;

    box-sizing: border-box;

  }

  #yanagiya .sec03 .content_ttl_en {
    font-size: 48px;
    text-align: left;
  }

  #yanagiya .sec03 .sub_ttl {
    font-size: 18px;
    color: #DA3615;
    text-align: left;
    margin: 0 0 83px;
  }

  #yanagiya .sec03 .name_box {
    margin: 0 0 56px;
  }

  #yanagiya .sec03 .pic {
    text-align: center;
    width: 38vw;
    margin: 0 auto;
    z-index: 1000;
    position: relative;
  }

  #yanagiya .sec03 .pic_box {
    position: relative;
  }

  #yanagiya .sec03 .pic_box .circle {
    background: #B6E2EB;
    width: 39vw;
    height: 39vw;
    border-radius: 320px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 1;
    margin: 0 auto;
  }

  #yanagiya .sec03 .name {
    text-align: center;
    font-size: 21px;
    font-weight: 500;
    padding: 7px 0 5px;
  }

  #yanagiya .sec03 .job {
    text-align: center;
    font-size: 12px;
    margin: 0 0 9px;
  }

  #yanagiya .sec03 .job_txt {
    font-size: 18px;
    text-align: center;
    margin: 0 0 41px;
  }

  #yanagiya .sec03 .name_list {
    display: block;
  }

  #yanagiya .sec03 .name_list li {
    background: #FBEBE8;
    width: 100％;
    color: #DA3615;
    padding: 26px 20px;
    box-sizing: border-box;
    border-radius: 9px;
    margin: 0 auto 21px;
  }

  #yanagiya .sec03 .name_list .a {
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    padding: 27px 0 23px;
  }

  #yanagiya .sec03 .name_list .q {
    text-align: center;
    font-size: 3.5vw;
    font-weight: bold;
    margin: 0 0 12px;
  }

  #yanagiya .sec03 .name_list .txt {
    font-size: 13px;
    font-weight: 400;
    line-height: 1.8;
  }


  #news .news_list {
    width: 92vw;
    margin: 0 auto 72px;
    padding: 46px 0 0;
  }

  #news .news_list li {
    margin: 0 0 37px;
  }

  #news .news_list li a {
    font-size: 1.6rem;
  }

  #news .news_list li .time {
    padding: 0 26px 0 0;
  }

  #news .news_list li .new {
    margin: 0 0 0 20px;
    color: #fff;
    background: #fd4d4d;
    padding: 2px 14px;
  }

  /* detail */
  .news_detail_block {
    margin: 0 auto 72px;
    width: 92%;
    /* padding: 0 45px; */
    box-sizing: border-box;
  }

  .news_detail_block .main_ttl {
    font-size: 2.8rem;
  }

  .news_detail_block .day {
    font-size: 1.6rem;
    padding: 21px 0;
  }

  .news_detail_block .entry_box {
    line-height: 2;
    font-size: 1.5rem;
  }

  .news_detail_block .entry_box h1 {
    font-size: 2.5rem;
    border: solid 1px #bfbfbf;
    border-left: none;
    border-right: none;
    padding: 4px 0;
    margin: 25px 0;
  }

  .news_detail_block .entry_box h2 {
    font-size: 2.0rem;
    margin: 25px 0;
    position: relative;
    padding: 0.5rem 0 0.8rem;
    margin-bottom: 0.5rem;
    background-image: linear-gradient(90deg, white 0% 40%, #e9e9e9 40% 60%, white 60%);
    background-repeat: no-repeat;
    background-size: 100% 0.2rem;
    background-position: bottom;
  }

  .news_detail_block .entry_box p {
    margin: 0 0 15px;
  }


  /* terms_of_use */
  .wrapKOPIPE-OK {
    width: 96vw;
    margin: 0 auto;
  }

  .wrapHINAGATA h1 {
    margin: 0 0 50px 0;
    font-size: 36px
  }

  .wrapHINAGATA h2 {
    margin: 31px 0 23px 0;
    padding: 15px 0 15px 20px;
    font-size: 24px;
    border-left: 5px solid #DA3615
  }

  .wrapHINAGATA .g-laySecTyp01 h2 {
    margin: 0 0 30px 0;
    padding: 0;
    border-left: none
  }

  .wrapHINAGATA p.tR {
    margin: 60px 0 0 0;
    text-align: right
  }

  .wrapHINAGATA ol {
    margin: 20px 0 0 50px
  }

  .wrapHINAGATA ul {
    margin: 20px 0 0 30px
  }

  .wrapHINAGATA td ul {
    margin: 0
  }

  .wrapHINAGATA ol li {
    position: relative;
    list-style: outside decimal;
    padding: 0 0 0 5px
  }

  .wrapHINAGATA ol li::marker {
    font-size: 130%;
    font-weight: 700;
    color: #DA3615
  }

  .wrapHINAGATA ol li ol {
    padding: 20px 0 0 20px
  }

  .wrapHINAGATA ol.kakkoNum {
    counter-reset: listNum
  }

  .wrapHINAGATA ol.kakkoNum li {
    list-style: none;
    margin-left: 1.5rem
  }

  .wrapHINAGATA ol.kakkoNum li+li {
    margin-top: 2rem
  }

  .wrapHINAGATA li ol.kakkoNum li+li {
    margin-top: 1rem
  }

  .wrapHINAGATA ol.kakkoNum>li:before {
    display: block;
    position: absolute;
    top: -0.2rem;
    left: -3.5rem;
    width: 3.5rem;
    counter-increment: listNum;
    content: "（"counter(listNum) "）";
    font-size: 130%;
    font-weight: 700;
    color: #DA3615
  }

  .wrapHINAGATA ol.kakkoNum li dt {
    margin-bottom: 0.3rem;
    font-size: 1.2rem
  }

  .wrapHINAGATA ol.kakkoNum li dl+p {
    margin-top: 1.5rem
  }

  .wrapHINAGATA ol.reStart2 {
    counter-reset: listNum 1
  }

  .wrapHINAGATA ol.reStart3 {
    counter-reset: listNum 2
  }

  .wrapHINAGATA ol.reStart4 {
    counter-reset: listNum 3
  }

  .wrapHINAGATA ol.reStart5 {
    counter-reset: listNum 4
  }

  .wrapHINAGATA ol.layLiTypIroha>li {
    list-style: outside katakana-iroha
  }

  .wrapHINAGATA li ol.layLiTypIroha li+li {
    margin-top: 1rem
  }

  .wrapKOPIPE-OK pre {
    width: 620px;
    max-height: 500px;
    overflow: scroll;
    background: #ffffff
  }

  .wrapKOPIPE-OK code {
    display: block;
    padding: 10px 20px
  }

  /* contact */
  #contact #under_main_img {
    background: url(../images/customer/main_bg.jpg)no-repeat;
    background-size: cover;
  }

  #contact, #business_customers {}

  #contact .table_box {
    margin: 0 0 67px;
    padding: 8px 0 0;
  }

  #contact .table_box table {
    width: 94%;
    margin: 0 auto;
  }

  #contact .table_box table th {
    background: #f5f5f5;
    width: 100%;
    padding: 9px 18px;
    box-sizing: border-box;
    font-size: 16px;
    font-weight: bold;
    vertical-align: top;
    border: 1px solid #cdcdcd;
    display: block;
  }

  #contact .table_box table th span {

    color: #cc0000;

    font-size: 16px;

    font-weight: bold;
  }

  #contact .table_box table td {
    padding: 21px 16px;
    font-size: 16px;
    line-height: 1.8;
    border: 1px solid #cdcdcd;
    vertical-align: middle;
    display: block;
  }

  #contact .table_box table td label {
    margin: 0 25px 0 0;
  }

  #contact .table_box table td input[type="text"] {

    width: 100%;

    padding: 13px 13px;

    box-sizing: border-box;
  }

  #contact .table_box table .zip input[type="text"] {

    width: 50%;

    padding: 13px 13px;

    box-sizing: border-box;
  }

  #contact .table_box table td textarea {

    width: 100%;

    padding: 10px;

    box-sizing: border-box;

    height: 224px;
  }

  #contact .btn {
    width: 346px;
    height: 76px;
    margin: 0 10px 17px;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    border: none;
    letter-spacing: 1px;
  }

  #contact .check {
    background: #DA3615 url(../images/contact/arrow01.png)no-repeat right 25px center;
  }

  #contact .send {
    background: #DA3615 url(../images/contact/arrow01.png)no-repeat right 25px center;
  }

  #contact .back {
    background: #b1bec9 url(../images/contact/arrow01.png)no-repeat right 25px center;
  }

  #contact .btn_box {
    margin: 0 auto 85px;
    text-align: center;
  }

}