@charset "UTF-8";
.home .sec_1 {
  width: 100%;
  height: calc(100vw*13/14);
  background: url("../img/home/bg_main.jpg") no-repeat center top/cover;
  position: relative; }
  @media only screen and (max-width: 768px), print and (min-width: 2cm) {
    .home .sec_1 {
      height: 130vw; } }
  .home .sec_1 .main_copy {
    position: absolute;
    left: 74vw;
    top: 10vw;
    width: 12.3vw;
    /*span {
    	color: #fff;
    	font-weight: 600;
    	line-height: 1;
    	letter-spacing: 0.08em;
    	&:nth-child(1) {
    		font-size: 7rem;
    		writing-mode: vertical-rl;
    		position: absolute;
    		bottom: 23rem;
    		left: 1rem;
    		white-space: nowrap;
    		@media only screen and (max-width:768px), print and (min-width: 2cm){
    			font-size: 8vw;
    			bottom: 24vw;
    		}
    	}
    	&:nth-child(2) {
    		font-size: 24rem;
    		@media only screen and (max-width:768px), print and (min-width: 2cm){
    			font-size: 22vw;
    			color: $color-main;
    		}
    	}
    	&:nth-child(3) {
    		font-size: 7rem;
    		letter-spacing: 0.08em;
    		@media only screen and (max-width:768px), print and (min-width: 2cm){
    			font-size: 8vw;
    			color: $color-main;
    		}
    	}
    }*/ }
    @media only screen and (max-width: 768px), print and (min-width: 2cm) {
      .home .sec_1 .main_copy {
        left: 71vw;
        top: 7vw;
        width: 24vw; } }
  .home .sec_1 .main_copy_2 {
    position: absolute;
    left: 57vw;
    top: 45vw;
    width: 7.2vw;
    z-index: 20; }
    @media only screen and (max-width: 768px), print and (min-width: 2cm) {
      .home .sec_1 .main_copy_2 {
        left: 54vw;
        top: 77vw;
        width: 13vw; } }
  .home .sec_1 .img_main__01 {
    position: absolute;
    width: 58vw;
    left: 0;
    top: 7vw;
    z-index: 11; }
    @media only screen and (max-width: 768px), print and (min-width: 2cm) {
      .home .sec_1 .img_main__01 {
        width: 66vw;
        left: 0;
        top: 10vw; } }
  .home .sec_1 .img_main__02 {
    position: absolute;
    width: 36vw;
    left: 15.7vw;
    top: 42vw;
    z-index: 12; }
    @media only screen and (max-width: 768px), print and (min-width: 2cm) {
      .home .sec_1 .img_main__02 {
        width: 42vw;
        left: 15.7vw;
        top: 48vw; } }
  .home .sec_1 .img_main__03 {
    position: absolute;
    width: 46vw;
    right: 14vw;
    bottom: -4.3vw;
    z-index: 10; }
    @media only screen and (max-width: 768px), print and (min-width: 2cm) {
      .home .sec_1 .img_main__03 {
        width: 60vw;
        right: 0vw;
        bottom: -14vw; } }
  .home .sec_1 .obj_01 {
    position: absolute;
    width: 200px;
    right: 0;
    top: 43vw;
    z-index: 16; }
    @media only screen and (max-width: 768px), print and (min-width: 2cm) {
      .home .sec_1 .obj_01 {
        width: 100px;
        top: 68vw;
        opacity: 0.6; } }
  .home .sec_1 .obj_02 {
    position: absolute;
    width: 370px;
    right: 52vw;
    top: 75vw;
    z-index: 16; }
    @media only screen and (max-width: 768px), print and (min-width: 2cm) {
      .home .sec_1 .obj_02 {
        width: 185px;
        top: 96vw;
        right: 54vw; } }
.home .sec_ttl {
  position: relative;
  z-index: 20; }
  .home .sec_ttl h2 {
    font-size: 4rem;
    font-family: "Noto Serif JP", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-weight: 600;
    text-align: center;
    letter-spacing: 0.05em; }
    @media only screen and (max-width: 768px), print and (min-width: 2cm) {
      .home .sec_ttl h2 {
        font-size: 2.6rem; } }
  .home .sec_ttl p {
    color: #F40D15;
    font-size: 1.6rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-align: center;
    letter-spacing: 0.1em; }
    @media only screen and (max-width: 768px), print and (min-width: 2cm) {
      .home .sec_ttl p {
        font-size: 1.2rem; } }
  .home .sec_ttl.fc_white h2 {
    color: #fff; }
  .home .sec_ttl.fc_white p {
    color: #fff; }
.home .sec_2 {
  position: relative;
  width: 100%;
  z-index: 1;
  background-color: #F7F5F2;
  padding: calc(4.3vw + 4.6em) 0 8em; }
  .home .sec_2 .box_customer {
    width: 600px;
    margin: 2.5em auto;
    position: relative;
    background-color: #fff;
    padding: 50px 90px;
    z-index: 1; }
    @media only screen and (max-width: 768px), print and (min-width: 2cm) {
      .home .sec_2 .box_customer {
        width: 320px;
        padding: 25px 20px;
        margin-bottom: 160px; } }
    @media only screen and (max-width: 768px), print and (min-width: 2cm) {
      .home .sec_2 .box_customer__img {
        display: flex; } }
    .home .sec_2 .box_customer .img_01 {
      position: absolute;
      left: -340px;
      top: -120px;
      width: 300px; }
      @media only screen and (max-width: 768px), print and (min-width: 2cm) {
        .home .sec_2 .box_customer .img_01 {
          width: 50%;
          left: -10px;
          top: auto;
          bottom: -140px; } }
    .home .sec_2 .box_customer .img_02 {
      position: absolute;
      right: -380px;
      bottom: -60px;
      width: 420px; }
      @media only screen and (max-width: 768px), print and (min-width: 2cm) {
        .home .sec_2 .box_customer .img_02 {
          width: 50%;
          right: -10px;
          bottom: -200px; } }
.home .sec_3 {
  background-color: #000;
  padding: 6em 0 40px;
  position: relative;
  z-index: 1; }
  @media only screen and (max-width: 768px), print and (min-width: 2cm) {
    .home .sec_3 {
      padding: 5em 0 5em; } }
  .home .sec_3 .obj_03 {
    width: 240px;
    position: absolute;
    left: 0;
    top: -200px;
    z-index: 1; }
    @media only screen and (max-width: 768px), print and (min-width: 2cm) {
      .home .sec_3 .obj_03 {
        width: 120px;
        top: -100px; } }
  .home .sec_3 .btn_01 {
    transform: translate(-50%, -50%);
    position: absolute;
    top: 0;
    left: 50%; }
    @media only screen and (max-width: 768px), print and (min-width: 2cm) {
      .home .sec_3 .btn_01 {
        top: auto;
        bottom: 0;
        transform: translate(-50%, 50%); } }
  .home .sec_3 .lineup_img {
    display: flex;
    position: relative;
    margin-top: 4.2em; }
    @media only screen and (max-width: 768px), print and (min-width: 2cm) {
      .home .sec_3 .lineup_img {
        flex-wrap: wrap; } }
    .home .sec_3 .lineup_img figure {
      width: 50%;
      opacity: 0.8; }
      @media only screen and (max-width: 768px), print and (min-width: 2cm) {
        .home .sec_3 .lineup_img figure {
          height: 50vw; } }
      @media only screen and (max-width: 768px), print and (min-width: 2cm) {
        .home .sec_3 .lineup_img figure img {
          width: 100%;
          height: 100%;
          object-fit: cover; } }
    .home .sec_3 .lineup_img .txt_odashi {
      width: 168px;
      position: absolute;
      left: 50px;
      top: -190px;
      z-index: 1; }
      @media only screen and (max-width: 768px), print and (min-width: 2cm) {
        .home .sec_3 .lineup_img .txt_odashi {
          width: 42px;
          left: 20px;
          top: -30px; } }
    .home .sec_3 .lineup_img .txt_men {
      width: 236px;
      position: absolute;
      right: 50px;
      top: -190px;
      z-index: 1; }
      @media only screen and (max-width: 768px), print and (min-width: 2cm) {
        .home .sec_3 .lineup_img .txt_men {
          width: 59px;
          right: 20px;
          top: -30px; } }
.home .sec_4 {
  background-color: #F7F5F2;
  padding: 5.4em 0 6.6em; }
  @media only screen and (max-width: 768px), print and (min-width: 2cm) {
    .home .sec_4 {
      padding: 3em 0 5em; } }
  .home .sec_4 .box_about {
    width: 100%;
    gap: 40px;
    display: flex;
    margin-top: 3.2em; }
    @media only screen and (max-width: 768px), print and (min-width: 2cm) {
      .home .sec_4 .box_about {
        flex-direction: column;
        gap: 30px;
        margin-top: 2.2em; } }
    .home .sec_4 .box_about__item {
      width: 480px;
      display: block; }
      @media only screen and (max-width: 768px), print and (min-width: 2cm) {
        .home .sec_4 .box_about__item {
          width: 100%; } }
      .home .sec_4 .box_about__item figure {
        overflow: hidden;
        background-color: #000; }
        .home .sec_4 .box_about__item figure img {
          transition: .6s; }
      .home .sec_4 .box_about__item .btn_01 {
        font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, verdana, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;
        font-weight: 500; }
      .home .sec_4 .box_about__item:hover figure img {
        transform: scale(1.1);
        opacity: 0.8; }
      .home .sec_4 .box_about__item:hover .btn_01 {
        color: #F40D15; }
        .home .sec_4 .box_about__item:hover .btn_01::after {
          right: -45px; }
        .home .sec_4 .box_about__item:hover .btn_01 i {
          width: 37px;
          left: 7px; }
          .home .sec_4 .box_about__item:hover .btn_01 i::before {
            width: 25px;
            background-color: #fff; }
          .home .sec_4 .box_about__item:hover .btn_01 i::after {
            background-color: #fff; }
.home .sec_5 {
  background-color: #fff;
  padding: 5em 0; }
  @media only screen and (max-width: 768px), print and (min-width: 2cm) {
    .home .sec_5 {
      padding: 5em 0 4em; } }
  .home .sec_5 .inner {
    position: relative; }
  .home .sec_5 .obj_04 {
    width: 420px;
    position: absolute;
    top: -130px;
    right: -180px;
    z-index: 1; }
    @media only screen and (max-width: 768px), print and (min-width: 2cm) {
      .home .sec_5 .obj_04 {
        width: 210px;
        top: -115px;
        right: 10px; } }
  .home .sec_5 .box_tel {
    display: flex;
    align-items: center;
    flex-direction: column;
    line-height: 1.4;
    margin: 1.6em 0 2.6em; }
    .home .sec_5 .box_tel p:nth-child(1) {
      display: flex;
      align-items: center;
      font-size: 5.2rem;
      font-family: "Noto Serif JP", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
      font-weight: 500; }
      @media only screen and (max-width: 768px), print and (min-width: 2cm) {
        .home .sec_5 .box_tel p:nth-child(1) {
          font-size: 4.2rem; } }
      .home .sec_5 .box_tel p:nth-child(1)::before {
        content: "";
        width: 40px;
        height: 40px;
        background: url("../img/icon_tel.svg") no-repeat center/contain;
        transform: translateY(5px);
        margin-right: 0.15em; }
        @media only screen and (max-width: 768px), print and (min-width: 2cm) {
          .home .sec_5 .box_tel p:nth-child(1)::before {
            margin-right: 0.1em; } }
.home .sec_6 {
  background-color: #F7F5F2;
  padding: 4.6em 0 6em; }
  @media only screen and (max-width: 768px), print and (min-width: 2cm) {
    .home .sec_6 {
      padding: 4em 0 4em; } }
  .home .sec_6 .inner {
    position: relative;
    z-index: 1; }
  .home .sec_6 .box_store {
    background-color: #fff;
    position: relative;
    margin-top: 1.2em;
    z-index: 1; }
    @media only screen and (max-width: 768px), print and (min-width: 2cm) {
      .home .sec_6 .box_store {
        padding-bottom: 15px; } }
    .home .sec_6 .box_store p {
      margin-right: 0.6em; }
    .home .sec_6 .box_store h3 {
      padding: 0 1.6em 1.2em;
      margin-top: -0.4em; }
      @media only screen and (max-width: 768px), print and (min-width: 2cm) {
        .home .sec_6 .box_store h3 {
          padding: 0 15px 0.8em; } }
    .home .sec_6 .box_store .btn_03 {
      position: absolute;
      right: 0;
      bottom: 0;
      width: 260px; }
      @media only screen and (max-width: 768px), print and (min-width: 2cm) {
        .home .sec_6 .box_store .btn_03 {
          position: static;
          width: calc(100% - 30px);
          margin: 0 auto; } }
  .home .sec_6 .obj_05 {
    width: 326px;
    position: absolute;
    left: -350px;
    bottom: -36px;
    z-index: 1; }
    @media only screen and (max-width: 768px), print and (min-width: 2cm) {
      .home .sec_6 .obj_05 {
        width: 163px; } }

@keyframes showTextFromBottom {
  0% {
    opacity: 0;
    transform: translateY(100%); }
  100% {
    opacity: 1;
    transform: translateY(0px); } }
.textanimation span {
  display: inline-block; }

.textanimation > span {
  overflow: hidden; }

.textanimation > span > span {
  animation: showTextFromBottom 0.3s backwards; }

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