@charset "UTF-8";

@media screen and (max-width: 767px) {
   html {
      font-size: calc(100vw / 430 * 10);
   }
}

body {
   background: #fff;
   color: #000;
   font-family: "Zen Kaku Gothic New", sans-serif;
   font-weight: 500;
   font-size: 20px;
   line-height: 30px;
   letter-spacing: 0;
}

@media screen and (max-width: 767px) {
   body {
      font-size: 2rem;
      line-height: 1.5;
   }
}

section {
   padding: 0;
   overflow: visible;
}

.wrap {
   width: 100%;
   max-width: 1200px;
   margin: 0 auto;
   padding: 0;
   box-sizing: border-box;
   position: relative;
}

@media screen and (max-width: 1440px) {
   .wrap {
      max-width: 1140px;
   }
}

@media screen and (max-width: 1200px) {
   .wrap {
      max-width: 960px;
   }
}

@media screen and (max-width: 1023px) {
   .wrap {
      max-width: 720px;
   }
}

@media screen and (max-width: 767px) {
   .wrap {
      max-width: 100%;
      padding: 0 3rem;
   }
}

a {
   color: inherit;
   transition: all 0.3s;
}

a:hover {
   opacity: 0.7;
}

img {
   display: inline-block;
   vertical-align: middle;
   width: auto;
   max-width: 100%;
   height: auto;
}

p {
   text-align: inherit;
   letter-spacing: inherit;
}

.disable {
	pointer-events: none;
}

.tb {
   display: none;
}

.sp {
   display: none;
}

.pc {
   display: block;
}

@media screen and (max-width: 767px) {
   .sp {
      display: block;
   }

   .pc {
      display: none;
   }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
   .tb {
      display: block;
   }
}

.fnt-jost {
   font-family: "Jost", sans-serif;
   font-optical-sizing: auto;
   font-style: normal;
   font-weight: 500;
}

.txt-c {
   text-align: center;
}

.uppercase {
   text-transform: uppercase;
}

.cl-green {
   color: #4B9A06;
}

.img-obj {
   width: 100%;
   max-width: inherit;
   height: 100%;
   object-fit: cover;
}

.h-23 {
   font-weight: 700;
   font-size: 23px;
   line-height: 1.5;
}

.h-24 {
   font-weight: 900;
   font-size: 24px;
   line-height: 1.5;
}

.h-26 {
   font-weight: 900;
   font-size: 26px;
   line-height: 1.5;
}

.h-32 {
   font-weight: 900;
   font-size: 32px;
   line-height: 1.5;
}

@media screen and (max-width: 767px) {
   .h-20 {
      font-size: 2rem;
   }

   .h-23 {
      font-size: 2.3rem;
   }

   .h-24 {
      font-size: 2.4rem;
   }

   .h-26 {
      font-size: 2.6rem;
   }

   .h-32 {
      font-size: 3.2rem;
   }
}

.button {
   position: relative;
}

.button a {
   display: inline-flex;
   justify-content: center;
   align-items: center;
   height: 56px;
   background-color: #000;
   font-weight: 700;
   font-size: 16px;
   color: #fff;
   border-radius: 50px;
   padding: 0 60px 0 40px;
   position: relative;
}

.button a:after {
   content: '';
   width: 28px;
   height: 28px;
   background: url("../img/noraito/btn-icon.webp") no-repeat center top/cover;
   position: absolute;
   top: 50%;
   right: 20px;
   transform: translateY(-50%);
}

.button a:hover {
   background-color: #B1B1B1;
   opacity: 1;
}

.button.green a {
   background-color: #4B9A06;
}

.button.green a:hover {
   background-color: #B1B1B1;
}

@media screen and (max-width: 767px) {
   .button a {
      width: 100%;
      height: 7.2rem;
      font-size: 1.6rem;
      padding: 0 2rem 0 0;
   }

   .button a:after {
      width: 2.8rem;
      height: 2.8rem;
      right: 2rem;
   }
}

.swiper .swiper-button-prev,
.swiper .swiper-button-next {
   width: 35px;
   height: 35px;
   background: no-repeat center / cover;
   transition: all 0.3s;
}

.swiper .swiper-button-prev:after,
.swiper .swiper-button-next:after {
   display: none;
}

.swiper .swiper-button-prev:hover,
.swiper .swiper-button-next:hover {
   opacity: 0.7;
}

.swiper .swiper-button-prev {
   background-image: url("../img/noraito/slider-prev.webp");
}

.swiper .swiper-button-next {
   background-image: url("../img/noraito/slider-next.webp");
}

.swiper .swiper-pagination {
   display: flex;
   justify-content: center;
   gap: 30px;
}

.swiper .swiper-pagination-bullet {
   width: 12px;
   height: 12px;
   background: #B1B1B1;
   opacity: 1;
   margin: 0 !important;
   transition: all 0.3s;
}

.swiper .swiper-pagination-bullet-active,
.swiper .swiper-pagination-bullet:hover {
   background-color: #000;
}

@media screen and (max-width: 767px) {

   .swiper .swiper-button-prev,
   .swiper .swiper-button-next {
      width: 3.5rem;
      height: 3.5rem;
   }

   .swiper .swiper-pagination {
      gap: 3rem;
   }

   .swiper .swiper-pagination-bullet {
      width: 1.2rem;
      height: 1.2rem;
   }
}

.fadeInUp {
   transform: translate3d(0, 50px, 0);
   transition: 1s;
   opacity: 0;
}

.fadeInUp.animated {
   transform: translate3d(0, 0, 0);
   opacity: 1;
}

/*=============================================
 * header
 *=============================================*/
header {
   display: flex;
   align-items: center;
   gap: 40px;
   width: 100%;
   height: 75px;
   box-sizing: border-box;
   position: sticky;
   top: 0;
   z-index: 100;
   padding: 0 180px 0 40px;
}

header:before {
   content: '';
   width: 100%;
   height: 100%;
   background-color: #fff;
   border-bottom: 1px solid #000;
   position: absolute;
   top: 0;
   left: 0;
   box-sizing: border-box;
}

header .logo {
   flex: 1 0 0;
   position: relative;
}

header .logo a {
   display: block;
   max-width: 202px;
}

.navbar {
   display: flex;
   align-items: center;
   gap: 40px;
   position: relative;
}

.navbar ul {
   display: flex;
   align-items: center;
   gap: 50px;
}

.navbar ul a {
   text-transform: uppercase;
   position: relative;
   border-bottom: 1px solid transparent;
}

.navbar ul a:hover {
   border-bottom-color: #000;
}

.navbar .btn-insta {
   width: 24px;
}

.navbar .btn-insta a,
.navbar .btn-insta img {
   display: block;
}

.nav_toggle {
   display: none;
   background-color: #14232E;
   width: 3.6rem;
   height: 3.6rem;
   border-radius: 50%;
   position: relative;
   top: auto;
   right: auto;
   z-index: 1;
}

.nav_toggle span {
   display: block;
   width: 1.6rem;
   height: 2px;
   background-color: #fff;
   border-radius: 2px;
   position: absolute;
   top: calc(50% - 1px);
   left: calc(50% - 0.8rem);
   transition: all 0.3s;
}

.nav_toggle span:before,
.nav_toggle span:after {
   content: "";
   width: 100%;
   height: 2px;
   background-color: #fff;
   border-radius: 2px;
   position: absolute;
   left: 0;
   transition: all 0.3s;
}

.nav_toggle span:before {
   top: -5px;
}

.nav_toggle span:after {
   top: 5px;
}

.nav_toggle:after {
   display: none;
}

.nav_toggle.show span {
   background-color: transparent;
}

.nav_toggle.show span:before {
   transform: rotate(45deg);
   top: 0;
}

.nav_toggle.show span:after {
   transform: rotate(-45deg);
   top: 0;
}

@media screen and (max-width: 1200px) {
   header {
      padding: 0 30px;
   }

   .navbar {
      gap: 30px;
   }

   .navbar ul {
      gap: 30px;
   }
}

@media screen and (max-width: 1023px) {
   header {
      padding: 0 20px;
   }

   .navbar {
      gap: 20px;
   }

   .navbar ul {
      gap: 20px;
   }
}

@media screen and (max-width: 767px) {
   header {
      height: 7.5rem;
      padding: 0 1.2rem;
   }

   header .logo a {
      max-width: 20.2rem;
   }

   .nav_toggle {
      display: block;
   }

   .navbar {
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 5rem;
      width: 100%;
      height: 100vh;
      background: #fff;
      box-sizing: border-box;
      position: fixed;
      top: 0;
      left: 0;
      z-index: -1;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s linear;
      padding: 7.5rem 3rem;
   }

   .navbar ul {
      flex-direction: column;
      gap: 3.5rem;
   }

   .navbar ul a {
      top: 0;
   }

   .navbar .button {
      width: 100%;
   }

   .navbar.show {
      opacity: 1;
      visibility: visible;
   }
}

/*=============================================
 * footer
 *=============================================*/
footer {
   background: #F5F4F4;
   color: #000;
   text-align: center;
   padding: 50px 0 0;
   position: relative;
   top: 0;
}

footer .logo {
   width: 107px;
   margin: 0 auto;
}

footer nav {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 32px;
   padding-top: 35px;
}

footer nav a {
   color: inherit;
   text-transform: uppercase;
   border-bottom: 1px solid transparent;
}

footer nav a:hover {
   border-bottom-color: #000;
}

footer address {
   background-color: #000;
   color: #fff;
   font-size: 16px;
   margin-top: 50px;
   padding: 8px;
}

@media screen and (max-width: 767px) {
   footer {
      padding-top: 6.5rem;
   }

   footer nav {
      flex-direction: column;
      gap: 3.5rem;
      padding-top: 6.5rem;
   }

   footer address {
      font-size: 1.3rem;
      margin-top: 8.5rem;
      padding: 1.7rem 0;
   }
}

/*=============================================
 * noraito
 *=============================================*/
#mv {
   display: flex;
   justify-content: center;
   align-items: center;
   background: url("../img/noraito/mv-deco-1.webp") no-repeat top left/51.5% auto, url("../img/noraito/mv-deco-2.webp") no-repeat bottom right/40.5% auto;
   width: 100%;
   height: calc(100vh - 90px);
   min-height: 600px;
   position: relative;
}

#mv .box {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 890px;
   min-height: 748px;
   margin: 0 auto;
   position: relative;
   padding-top: 175px;
}

#mv .box p,
#mv .box h2 {
   position: relative;
}

#mv figure {
   width: 100%;
   position: absolute;
   top: 0;
   left: 0;
}

#mv .ttl-sub {
   font-size: 16px;
   text-transform: uppercase;
}

#mv .logo {
   width: 495px;
   margin: 0 auto;
   padding-top: 20px;
}

#mv h2 {
   font-weight: 500;
   padding-top: 20px;
}

#mv .button {
   padding-top: 45px;
}

#mv .btn-scroll {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 25px;
   width: 16px;
   position: absolute;
   bottom: 10%;
   left: 2.4%;
   cursor: pointer;
   transition: all 0.3s;
}

#mv .btn-scroll:hover {
   opacity: 0.7;
}

#mv .btn-scroll .line {
   width: 1px;
   height: 220px;
   background-color: #ccc;
   overflow: hidden;
   position: relative;
}

#mv .btn-scroll .line:before {
   content: '';
   width: 100%;
   height: 100%;
   background-color: #000;
   position: absolute;
   top: 0;
   left: 0;
   animation: scroll 2s infinite;
}

#mv .btn-scroll .txt {
   writing-mode: sideways-rl;
   text-transform: uppercase;
   font-size: 16px;
   line-height: 1;
}

@keyframes scroll {
   0% {
      transform: translateY(-100%);
   }

   100% {
      transform: translateY(100%);
   }
}

@keyframes photoeffect1 {
   0% {
      transform: rotate(20deg);
      transform-origin: left;
   }

   50% {
      transform: rotate(0);
      transform-origin: left;
   }

   100% {
      transform: rotate(20deg);
      transform-origin: left;
   }
}

@media screen and (max-width: 767px) {
   #mv {
      background-image: url("../img/noraito/mv-deco-1_sp.webp"), url("../img/noraito/mv-deco-2_sp.webp");
      background-size: 100% auto, 100% auto;
      height: calc(100vh - 7.5rem);
      min-height: 400px;
   }

   #mv:after {
      content: '';
      width: auto;
      height: 0;
      border-bottom: 1px solid #000;
      position: absolute;
      right: 0;
      bottom: 0;
      left: 3rem;
   }

   #mv .box {
      width: 39rem;
      min-height: 32.6rem;
      padding: 12rem 0 0;
   }

   #mv .ttl-sub {
      font-size: 1.6rem;
   }

   #mv .logo {
      width: 21.6rem;
      padding-top: 1.4rem;
   }

   #mv h2 {
      padding-top: 0.5rem;
   }

   #mv .button {
      padding-top: 8rem;
   }

   #mv .button a {
      padding: 0 7.2rem 0 4.6rem;
   }

   #mv .btn-scroll {
      width: 1.6rem;
      gap: 1.2rem;
      bottom: 2rem;
      left: 3rem;
   }

   #mv .btn-scroll .line {
      height: 6.7rem;
   }

   #mv .btn-scroll .txt {
      font-size: 1.6rem;
   }
}

#vision {
   position: relative;
   top: -15px;
   padding-bottom: 85px;
}

#vision .photo-effect {
   width: 29.8%;
   position: absolute;
   top: 50%;
   left: -50px;
   transform: translateY(-50%);
}

#vision .photo-effect img {
   animation: photoeffect1 3s ease-in-out infinite;
}

#vision .ttl-sub {
   display: flex;
   align-items: center;
   gap: 25px;
   width: calc(50% + 600px);
   margin-left: auto;
   position: relative;
   z-index: 1;
   text-transform: uppercase;
}

#vision .ttl-sub:after {
   content: '';
   border-top: 1px solid #000;
   flex: 1 0 0;
}

#vision .wrap {
   display: grid;
   grid-template-columns: 1fr 660px;
   padding-top: 50px;
}

#vision .list {
   padding-top: 65px;
}

#vision .list dl {
   display: grid;
   grid-template-columns: 35px 1fr;
   gap: 40px;
}

#vision .list dl:not(:last-child) {
   padding-bottom: 50px;
}

#vision .list dl dt {
   display: flex;
   flex-direction: column;
   align-items: center;
   font-weight: 500;
   position: relative;
}

#vision .list dl dt span {
   border-bottom: 1px solid #000;
}

#vision .list dl dt:after {
   content: '';
   flex: 1 0 0;
   border-left: 1px solid #000;
}

#vision .list dl dt:before {
   content: '';
   width: 7px;
   height: 7px;
   background-color: #000;
   border-radius: 50%;
   position: absolute;
   bottom: 0;
   left: calc(50% - 4px);
}

#vision .list dl dd p {
   padding-top: 25px;
}

#vision .list h3 {
   position: relative;
   padding-left: 70px;
}

#vision .list h3 img {
   max-width: 59px;
   position: absolute;
   top: 50%;
   left: 0;
   transform: translateY(-50%);
}

#vision .list h3 span {
   display: block;
   line-height: 1.3;
}

@media screen and (max-width: 1440px) {
   #vision .ttl-sub {
      width: calc(50% + 570px);
   }
}

@media screen and (max-width: 1200px) {
   #vision .ttl-sub {
      width: calc(50% + 480px);
   }
}

@media screen and (max-width: 1023px) {
   #vision {
      padding-bottom: 220px;
   }

   #vision .ttl-sub {
      width: calc(50% + 360px);
   }

   #vision .wrap {
      grid-template-columns: 1fr;
      gap: 50px;
   }

   #vision .photo-effect {
      width: 390px;
      top: 350px;
      transform: translateY(0);
   }

   #vision .list {
      padding-top: 220px;
   }
}

@media screen and (max-width: 767px) {
   #vision {
      padding: 8rem 0 3.5rem;
      top: 0;
   }

   #vision .ttl-sub {
      width: calc(100% - 3rem);
      top: 0;
   }

   #vision .ttl-sub:after {
      display: none;
   }

   #vision .wrap {
      gap: 4.2rem;
      padding-top: 0;
   }

   #vision h2 {
      padding-top: 5rem;
   }

   #vision .list {
      padding-top: 25rem;
   }

   #vision .list dl {
      grid-template-columns: 3.5rem 1fr;
      gap: 4rem;
   }

   #vision .list dl:not(:last-child) {
      padding-bottom: 4rem;
   }

   #vision .list dl dd p {
      padding-top: 2.5rem;
   }

   #vision .list h3 {
      padding-left: 7rem;
   }

   #vision .list h3 img {
      max-width: 6rem;
   }

   #vision .photo-effect {
      width: 36.2rem;
      top: 61rem;
   }
}

#about {
   position: relative;
}

#about .photo-1 {
   width: 11.5%;
   position: absolute;
   top: 50%;
   right: 0;
   transform: translateY(-50%);
}

#about .video-1 {
   width: 230px;
   position: absolute;
   top: -178px;
   left: 50px;
   background: transparent;
   mix-blend-mode: darken;
}

#about .video-2 {
   width: 130px;
   position: absolute;
   bottom: -82px;
   right: 50px;
   background: transparent;
   mix-blend-mode: darken;
}

#about .box {
   background-color: #fff;
   border: 1px solid #000;
   border-radius: 30px;
   padding: 95px 30px;
   position: relative;
}

#about .box figure {
   max-width: 735px;
   margin: 0 auto;
}

#about h2 {
   padding-top: 55px;
}

#about .txt {
   padding-top: 20px;
}

#about .list {
   display: grid;
   grid-template-columns: repeat(3, 230px);
   justify-content: center;
   gap: 30px;
   padding-top: 30px;
}

#about .list li {
   background: url("../img/noraito/about-deco.webp") no-repeat center bottom/100% auto;
   min-height: 166px;
   line-height: 25px;
}

#about .list li img {
   max-width: 44px;
}

#about .list li span {
   display: block;
   padding-top: 15px;
}

@media screen and (max-width: 1023px) {
   #about .video-2 {
      right: 0;
   }

   #about .photo-1 {
      width: 20%;
      top: -150px;
      transform: translateY(0);
   }

   #about .list {
      grid-template-columns: 230px;
      justify-content: center;
   }
}

@media screen and (max-width: 767px) {
   #about {
      padding: 20.5rem 0 0;
   }

   #about .photo-1 {
      width: 17.6rem;
      top: 0;
   }

   #about .video-1 {
      width: 20rem;
      top: -15.5rem;
      left: 0;
   }

   #about .video-2 {
      width: 12rem;
      right: auto;
      bottom: -7.2rem;
      left: 50%;
      transform: translateX(-50%);
   }

   #about .box {
      border-radius: 3rem;
      padding: 7rem 0.5rem 15.6rem;
   }

   #about .box figure {
      padding: 0 1.5rem;
   }

   #about h2 {
      padding-top: 4.5rem;
   }

   #about .txt {
      padding-top: 3.5rem;
   }

   #about .list {
      grid-template-columns: 23rem;
      gap: 3rem;
      padding-top: 3rem;
   }

   #about .list li {
      min-height: 16.6rem;
      line-height: 2.5rem;
   }

   #about .list li img {
      max-width: 3.2rem;
   }

   #about .list li span {
      padding-top: 2.5rem;
   }
}

#product {
   background-color: #F5F4F4;
   position: relative;
   margin-top: 6%;
   padding: 6% 0 270px;
}

#product:before {
   content: '';
   width: 100%;
   height: auto;
   padding-top: 14.0625%;
   background: url("../img/noraito/product-bg.webp") no-repeat center top/cover;
   position: absolute;
   bottom: 100%;
   left: 0;
   z-index: -1;
}

#product .box {
   margin-top: 70px;
}

#product .box a[href="#"] {
   pointer-events: none;
}

#product .box .swiper-slide {
   display: block;
   border-radius: 10px;
   border: 1px solid #000;
   background-color: #fff;
   overflow: hidden;
}

#product .box .swiper-slide:hover {
   opacity: 1;
}

#product .box .swiper-slide:hover figure img {
   transform: scale(1.05);
}

#product .box figure {
   width: 100%;
   padding-top: 70%;
   position: relative;
   overflow: hidden;
}

#product .box figure img {
   width: 100%;
   max-width: inherit;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   transition: all 0.3s linear;
}

#product .box h3 span {
   font-size: 20px;
   text-transform: uppercase;
}

#product .box .txt {
   padding: 20px 0 25px;
}

#product .button {
   padding-top: 80px;
}

@media screen and (max-width: 1200px) {
   #product .box {
      margin-top: 0;
   }

   #product .box .swiper {
      padding: 70px 18px;
   }

   #product .box .swiper-button-prev {
      left: 0;
   }

   #product .box .swiper-button-next {
      right: 0;
   }

   #product .box .swiper-pagination {
      bottom: 0;
   }
}

@media screen and (max-width: 1200px) {
   #product .box h3 {
      font-size: 20px;
   }

   #product .box h3 span {
      font-size: 16px;
   }

   #product .box .txt p {
      font-size: 16px;
   }
}

@media screen and (max-width: 1023px) {
   #product {
      margin-top: 12%;
   }
}

@media screen and (max-width: 767px) {
   #product {
      margin-top: 7rem;
      padding: 10rem 0 24rem;
   }

   #product:before {
      padding-top: 20%;
   }

   #product .box {
      margin: 0 -15px;
   }

   #product .box .swiper {
      padding: 8rem 15px;
   }

   #product .box .txt {
      padding: 2rem 0 2.5rem;
   }

   #product .box h3 {
      font-size: 2.6rem;
   }

   #product .box h3 span {
      font-size: 2rem;
   }

   #product .box .txt p {
      font-size: 2rem;
   }

   #product .button {
      padding-top: 8rem;
   }
}

.noraito-slider {
   position: relative;
}

.noraito-slider video {
   width: 320px;
   position: absolute;
   top: -214px;
   left: calc(50% - 645px);
   background: transparent;
   mix-blend-mode: darken;
}

.noraito-slider .swiper-wrapper {
   transition-timing-function: linear !important;
}

.noraito-slider .swiper-slide {
   width: 100%;
   padding-top: 15%;
   position: relative;
}

.noraito-slider .swiper-slide img {
   max-width: inherit;
   height: 100%;
   object-fit: cover;
   position: absolute;
   top: 0;
   left: 0;
}

@media screen and (max-width: 1440px) {
   .noraito-slider video {
      left: 0;
   }
}

@media screen and (max-width: 1023px) {
   .noraito-slider .swiper-slide {
      padding-top: 25%;
   }
}

@media screen and (max-width: 767px) {
   .noraito-slider video {
      width: 32rem;
      top: -21.4rem;
      left: -1rem;
   }

   .noraito-slider .swiper {
      padding: 0 3rem;
   }

   .noraito-slider .swiper-slide {
      padding-top: 75%;
   }
}

#corporate {
   color: #fff;
   padding: 95px 0 12%;
   position: relative;
}

#corporate:after {
   content: '';
   width: 100%;
   height: 100%;
   background: url("../img/noraito/corporate-bg.webp") no-repeat center bottom/cover;
   position: absolute;
   top: -1px;
   left: 0;
}

#corporate .photo-1 {
   width: 150px;
   position: absolute;
   top: 75%;
   left: calc(50% - 490px);
}

#corporate .wrap {
   z-index: 1;
}

#corporate h3 {
   padding-top: 35px;
}

#corporate .txt {
   max-width: 1102px;
   padding-top: 15px;
}

#corporate .button {
   padding-top: 35px;
}

#corporate .button a {
   border: 1px solid #fff;
}

@media screen and (max-width: 1200px) {
   #corporate {
      padding: 50px 0 20%;
   }
}

@media screen and (max-width: 1023px) {
   #corporate {
      padding: 50px 0 30%;
   }

   #corporate .photo-1 {
      width: 120px;
      left: calc(50% - 360px);
   }
}

@media screen and (max-width: 767px) {
   #corporate {
      padding: 7.2rem 0 16rem;
   }

   #corporate:after {
      background-image: url("../img/noraito/corporate-bg_sp.webp");
   }

   #corporate h2 {
      margin-right: -3rem;
   }

   #corporate h3 {
      padding-top: 2rem;
   }

   #corporate .txt {
      padding-top: 4rem;
   }

   #corporate .button {
      padding-top: 4rem;
   }

   #corporate .photo-1 {
      width: 15rem;
      top: 80%;
      left: 0;
   }
}

#shop-sns {
   padding: 15px 0 90px;
}

#shop-sns .txt {
   padding-top: 30px;
}

#shop-sns .button {
   display: flex;
   justify-content: center;
   gap: 24px;
   padding-top: 64px;
}

#shop-sns .button a {
   min-width: 238px;
}

#shop-sns .photo-effect {
   width: 195px;
   position: absolute;
   bottom: -100px;
   right: 0;
}

#shop-sns .photo-effect img {
   animation: photoeffect2 3s ease-in-out infinite;
}

@keyframes photoeffect2 {
   0% {
      transform: rotate(20deg);
      transform-origin: bottom;
   }

   50% {
      transform: rotate(0);
      transform-origin: bottom;
   }

   100% {
      transform: rotate(20deg);
      transform-origin: bottom;
   }
}

@media screen and (max-width: 1200px) {
   #shop-sns .photo-effect {
      width: 150px;
   }
}

@media screen and (max-width: 1023px) {
   #shop-sns .photo-effect {
      width: 100px;
   }
}

@media screen and (max-width: 767px) {
   #shop-sns {
      padding: 9rem 0 21rem;
   }

   #shop-sns .photo-effect {
      width: 14rem;
      right: 6rem;
      bottom: -21rem;
   }

   #shop-sns h2 {
      margin: 0 -3rem;
   }

   #shop-sns .txt {
      padding-top: 2rem;
   }

   #shop-sns .button {
      flex-direction: column;
      gap: 3rem;
      padding-top: 4rem;
   }
}

/*=============================================
 * ゴルフマーカー
 *=============================================*/
.noraito-bread {
   font-size: 14px;
   line-height: 20px;
   color: #CECECE;
   padding: 25px 0 120px;
}

.noraito-bread .wrap {
   overflow-x: auto;
}

.noraito-bread ul {
   display: flex;
   align-items: flex-start;
   gap: 5px;
   width: max-content;
}

.noraito-bread ul li {
   display: flex;
   align-items: flex-start;
   gap: 5px;
}

.noraito-bread ul li:not(:last-child):after {
   content: '>';
}

.noraito-bread ul li a:hover {
   opacity: 1;
   text-decoration: underline;
}

@media screen and (max-width: 767px) {
   .noraito-bread {
      display: none;
      font-size: 1.4rem;
      line-height: 1.5;
      padding: 2.5rem 0 12rem;
   }
}

[class*="noraito-"] h2 .fnt-jost {
   display: inline-block;
   padding-bottom: 15px;
}

@media screen and (max-width: 767px) {
   [class*="noraito-"] h2 .fnt-jost {
      padding-bottom: 1rem;
   }
}

.noraito-kv {
   position: relative;
   padding: 140px 0 110px;
}

.noraito-kv img {
   position: absolute;
   top: 0;
   left: 0;
}

.noraito-kv h2 strong {
   font-weight: 900;
   font-size: 41px;
   line-height: 1.5;
}

.noraito-kv h3 {
   font-weight: 900;
   font-size: 50px;
   line-height: 1.5;
}

.noraito-kv .txt {
   line-height: 35px;
   padding-top: 30px;
}

.noraito-kv ul {
   display: flex;
   gap: 30px;
   padding-top: 45px;
}

@media screen and (max-width: 1200px) {
   .noraito-kv .txt {
      font-size: 18px;
   }
}

@media screen and (max-width: 1023px) {
   .noraito-kv {
      padding-top: 30vw;
   }

   .noraito-kv img {
      object-position: top center;
   }
}

@media screen and (max-width: 767px) {
   .noraito-kv {
      padding: 11rem 0 3rem;
   }

   .noraito-kv h2 strong {
      font-size: 2.7rem;
      line-height: 1.5;
      padding-top: 2rem;
   }

   .noraito-kv h3 {
      font-size: 4.6rem;
      line-height: 1.5;
   }

   .noraito-kv .txt {
      font-size: 2rem;
      line-height: 3.5rem;
      padding-top: 1.5rem;
   }

   .noraito-kv .button {
      gap: 10px;
      padding-top: 1.5rem;
   }

   .noraito-kv .button li {
      width: calc(50% - 5px);
   }

   .noraito-kv .button a:after {
      right: 1.5rem;
   }
}

.noraito-worries {
   padding-bottom: 125px;
}

.noraito-worries .box {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 50px;
   padding-top: 75px;
}

.noraito-worries .box .col {
   border-top: 1px solid #000;
   border-bottom: 1px solid #000;
   padding: 50px 0 35px;
}

.noraito-worries .box figure {
   max-width: 92px;
   margin: 0 auto;
}

.noraito-worries .box .txt {
   padding-top: 15px;
}

@media screen and (max-width: 1023px) {
   .noraito-worries .box {
      grid-template-columns: repeat(2, 1fr);
   }
}

@media screen and (max-width: 767px) {
   .noraito-worries {
      padding: 8rem 0 12.5rem;
   }

   .noraito-worries h2 {
      margin: 0 -2rem;
   }

   .noraito-worries .box {
      grid-template-columns: 1fr;
      gap: 4rem;
      padding-top: 5rem;
   }

   .noraito-worries .box .col {
      padding: 4rem 0;
   }

   .noraito-worries .box figure {
      max-width: 9.2rem;
   }

   .noraito-worries .box .txt {
      max-width: 26rem;
      margin: 0 auto;
      padding-top: 1.5rem;
   }
}

.noraito-original {
   background: url("../img/noraito/golf-bg.webp") no-repeat center bottom/cover;
   padding: 120px 0 240px;
}

.noraito-original .desc {
   padding-top: 15px;
}

.noraito-original .box {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 45px;
   padding-top: 60px;
}

.noraito-original .box .col {
   background-color: #fff;
   border: 1px solid #000;
   border-radius: 10px;
   overflow: hidden;
}

.noraito-original .box .text {
   padding: 12px 20px 20px;
}

.noraito-original .box .text p {
   padding-top: 15px;
}

.noraito-original .box h3 {
   display: grid;
   grid-template-columns: 35px 1fr;
   align-items: baseline;
}

.noraito-original .box h3 span {
   font-size: 24px;
}

@media screen and (max-width: 1440px) {
   .noraito-original .box {
      gap: 25px;
   }
}

@media screen and (max-width: 1023px) {
   .noraito-original {
      background-image: url("../img/noraito/golf-bg_sp.webp");
   }

   .noraito-original .box {
      grid-template-columns: 370px;
      justify-content: center;
   }
}

@media screen and (max-width: 767px) {
   .noraito-original {
      padding: 12rem 0 18rem;
   }

   .noraito-original .txt {
      padding-top: 1.5rem;
   }

   .noraito-original .box {
      grid-template-columns: 1fr;
      padding-top: 5rem;
   }

   .noraito-original .box .text {
      padding: 1.5rem 2rem 2.5rem;
   }

   .noraito-original .box .text p {
      padding-top: 1.5rem;
   }

   .noraito-original .box h3 {
      grid-template-columns: 3.5rem 1fr;
   }

   .noraito-original .box h3 span {
      font-size: 2.4rem;
   }
}

.noraito-reason {
   padding: 180px 0;
}

.noraito-reason h2 {
   padding-bottom: 70px;
}

.noraito-reason .box {
   display: flex;
   justify-content: space-between;
   gap: 30px;
}

.noraito-reason .box:not(:last-child) {
   padding-bottom: 90px;
}

.noraito-reason .box figure {
   width: 512px;
}

.noraito-reason .box figure img {
   border-radius: 10px;
}

.noraito-reason .box .col {
   width: 565px;
   position: relative;
   padding: 30px 0 0 65px;
}

.noraito-reason .box .no {
   display: flex;
   flex-direction: column;
   align-items: center;
   width: 35px;
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
}

.noraito-reason .box .no span {
   border-bottom: 1px solid #000;
}

.noraito-reason .box .no:after {
   content: '';
   flex: 1 0 0;
   border-left: 1px solid #000;
}

.noraito-reason .box .no:before {
   content: '';
   width: 7px;
   height: 7px;
   background-color: #000;
   border-radius: 50%;
   position: absolute;
   bottom: 0;
   left: calc(50% - 4px);
}

.noraito-reason .box .txt {
   padding-top: 30px;
}

@media screen and (max-width: 1023px) {
   .noraito-reason .box {
      flex-direction: column;
   }

   .noraito-reason .box figure,
   .noraito-reason .box .col {
      width: 100%;
   }
}

@media screen and (max-width: 767px) {
   .noraito-reason {
      padding: 11rem 0;
   }

   .noraito-reason h2 {
      padding-bottom: 4.5rem;
   }

   .noraito-reason .box {
      gap: 4.5rem;
   }

   .noraito-reason .box:not(:last-child) {
      padding-bottom: 6rem;
   }

   .noraito-reason .box .col {
      padding: 3rem 0 0 5.5rem;
   }

   .noraito-reason .box h3 {
      font-size: 2.4rem;
   }

   .noraito-reason .box .txt {
      padding-top: 3rem;
   }
}

.noraito-plans {
   background-image: linear-gradient(#CDCDCD 1px, transparent 1px), linear-gradient(90deg, #CDCDCD 1px, transparent 1px);
   background-color: #fff;
   background-size: 48px 48px;
   padding: 100px 0 80px;
}

.noraito-plans .tag {
   background-color: #4B9A06;
   color: #fff;
   border-radius: 25px;
   width: 271px;
   text-align: center;
   margin: 0 auto;
   position: relative;
   line-height: 40px;
}

.noraito-plans .tag:after {
   content: '';
   width: 0;
   height: 0;
   border-width: 14px 7px 0 7px;
   border-color: #4B9A06 transparent transparent transparent;
   border-style: solid;
   position: absolute;
   top: 100%;
   left: calc(50% - 7px);
}

.noraito-plans h2 {
   padding-top: 40px;
}

.noraito-plans .box {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 80px;
   padding-top: 40px;
}

.noraito-plans .box [class*="col"] {
   background-color: #fff;
   border: 1px solid #000;
   border-radius: 10px;
   padding: 45px 25px 60px;
}

.noraito-plans .box figure img {
   max-height: 54px;
}

.noraito-plans .box h3,
.noraito-plans .box .txt {
   padding-top: 15px;
}

.noraito-plans .box ul {
   max-width: max-content;
   text-align: left;
   font-size: 18px;
   line-height: 40px;
   margin: 0 auto;
   padding-top: 30px;
}

.noraito-plans .box ul li {
   background: url("../img/noraito/golf-icon-check.webp") no-repeat center left/26px auto;
   padding-left: 40px;
}

.noraito-plans .box dl {
   padding-top: 30px;
}

.noraito-plans .box dl dt {
   display: inline-block;
   min-width: 190px;
   background-color: #F5F4F4;
   padding: 2px 12px;
}

.noraito-plans .box dl dd {
   font-weight: 900;
   font-size: 29px;
   line-height: 76px;
}

.noraito-plans .box dl dd span {
   font-size: 53px;
}

.noraito-plans .box .button {
   padding-top: 25px;
}

.noraito-plans .box .col-1 dl dd {
   color: #4B9A06;
}

.noraito-plans .box .col-2 dl dd {
   color: #035800;
}

.noraito-plans .box .col-2 .button a {
   background-color: #035800;
}

.noraito-plans .box .col-2 .button a:hover {
	background-color: #B1B1B1;
}

.noraito-plans .note {
   color: #8E8E8E;
   padding-top: 30px;
}

@media screen and (max-width: 1440px) {
   .noraito-plans .box {
      gap: 40px;
   }

   .noraito-plans .box .txt {
      font-size: 16px;
   }
}

@media screen and (max-width: 1200px) {
   .noraito-plans .box {
      gap: 20px;
   }
}

@media screen and (max-width: 1023px) {
   .noraito-plans .box {
      grid-template-columns: 560px;
      justify-content: center;
      gap: 45px;
   }
}

@media screen and (max-width: 767px) {
   .noraito-plans {
      background-size: 4.8rem 4.8rem;
      padding: 10rem 0 12rem;
   }

   .noraito-plans .tag {
      width: 27rem;
      line-height: 5rem;
   }

   .noraito-plans h2 {
      padding-top: 2.5rem;
   }

   .noraito-plans .box {
      grid-template-columns: 1fr;
      gap: 4.5rem;
      padding-top: 6rem;
   }

   .noraito-plans .box [class*='col'] {
      padding: 5rem 1rem;
   }

   .noraito-plans .box figure img {
      max-height: 5.4rem;
   }

   .noraito-plans .box h3,
   .noraito-plans .box .txt {
      padding-top: 1.5rem;
   }

   .noraito-plans .box .txt {
      font-size: 2rem;
   }

   .noraito-plans .box ul {
      font-size: 1.8rem;
      line-height: 4rem;
      padding-top: 2rem;
   }

   .noraito-plans .box ul li {
      background-size: 2.6rem;
      padding-left: 4rem;
   }

   .noraito-plans .box dl {
      padding-top: 4rem;
   }

   .noraito-plans .box dl dt {
      min-width: 19rem;
      padding: 0 1.2rem;
   }

   .noraito-plans .box dl dd {
      font-size: 2.9rem;
      line-height: 1.5;
   }

   .noraito-plans .box dl dd span {
      font-size: 5.3rem;
   }

   .noraito-plans .box .button {
      padding: 1.5rem 2rem 0;
   }

   .noraito-plans .note {
      padding-top: 8.5rem;
   }
}

.noraito-case {
   background-color: #F5F4F4;
   padding: 120px 0;
}

.noraito-case .swiper {
   width: 90%;
   max-width: 1200px;
   overflow: visible;
   padding: 50px 0 80px;
}

.noraito-case .swiper-slide {
   width: 370px;
   background-color: #fff;
   border: 1px solid #000;
   border-radius: 10px;
   overflow: hidden;
}

.noraito-case .swiper-slide figure {
   width: 100%;
   padding-top: 100%;
   position: relative;
}

.noraito-case .swiper-slide figure img {
   position: absolute;
   top: 0;
   left: 0;
}

.noraito-case .swiper-slide .txt {
   line-height: 25px;
   padding: 20px 30px 30px;
}

.noraito-case .swiper-slide time {
   display: block;
   font-size: 16px;
   padding-bottom: 5px;
}

.noraito-case .swiper-slide h3 {
   font-size: inherit;
   word-break: break-all;
}

.noraito-case .swiper-pagination {
   bottom: 0;
}

.noraito-case .swiper-button-prev {
   left: -18px;
}

.noraito-case .swiper-button-next {
   right: -18px;
}

@media screen and (max-width: 767px) {
   .noraito-case {
      padding: 8rem 0 5.5rem;
   }

   .noraito-case .case-swiper {
      padding: 0 calc(3rem - 15px);
   }

   .noraito-case .swiper {
      width: 100%;
      padding: 4.5rem 15px;
      overflow: hidden;
   }

   .noraito-case .swiper-slide .txt {
      line-height: 2.5rem;
      padding: 2rem 3rem 3rem;
   }

   .noraito-case .swiper-slide time {
      padding-bottom: 1rem;
   }

   .noraito-case .swiper-button-next {
      right: 0;
   }

   .noraito-case .swiper-button-prev {
      left: 0;
   }
}

.noraito-flow {
   padding: 160px 0 140px;
}

.noraito-flow .wrap {
   display: grid;
   grid-template-columns: 35% 1fr;
}

.noraito-flow ul li {
   display: grid;
   grid-template-columns: 40px 230px 1fr;
   align-items: center;
   gap: 10px;
   min-height: 125px;
   border-radius: 10px;
   border: 1px solid #000;
   padding: 20px 35px;
   position: relative;
}

.noraito-flow ul li:not(:last-child) {
   margin-bottom: 30px;
}

.noraito-flow ul li:not(:last-child):before {
   content: '';
   width: 0;
   height: 32px;
   border-left: 3px dotted #4B9A06;
   position: absolute;
   top: 100%;
   left: 55px;
}

.noraito-flow ul li .no {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: 40px;
   border-radius: 50%;
   background-color: #4B9A06;
   color: #fff;
   padding-top: 2px;
}

@media screen and (max-width: 1023px) {
   .noraito-flow .wrap {
      grid-template-columns: 1fr;
      gap: 50px;
   }
}

@media screen and (max-width: 767px) {
   .noraito-flow {
      padding: 7rem 0;
   }

   .noraito-flow .wrap {
      gap: 5rem;
   }

   .noraito-flow ul li {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 1.5rem 1rem;
      padding: 3rem 1.5rem;
   }

   .noraito-flow ul li:not(:last-child) {
      margin-bottom: 2rem;
   }

   .noraito-flow ul li:not(:last-child):before {
      height: 2.2rem;
      left: 3.5rem;
   }

   .noraito-flow ul li .no {
      width: 4rem;
      height: 4rem;
   }
}

.noraito-faq {
   background-color: #F5F4F4;
   padding: 110px 0 140px;
}

.noraito-faq .box-qa {
   padding-top: 75px;
}

.noraito-faq .box-qa .txt-q,
.noraito-faq .box-qa .txt-a {
   position: relative;
}

.noraito-faq .box-qa .txt-q:before,
.noraito-faq .box-qa .txt-a:before {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 40px;
   height: 40px;
   border-radius: 50%;
   background-color: #4B9A06;
   color: #fff;
   font-family: "Jost", sans-serif;
   font-weight: 500;
   position: absolute;
   left: 40px;
   padding-top: 2px;
}

.noraito-faq .box-qa .txt-q {
   padding: 20px 105px;
   cursor: pointer;
}

.noraito-faq .box-qa .txt-q:before {
   content: 'Q';
   top: 15px;
}

.noraito-faq .box-qa .txt-q:after {
   content: '';
   width: 16px;
   height: 9px;
   background: url("../img/noraito/golf-arrow-down.webp") no-repeat center top/cover;
   position: absolute;
   top: 50%;
   right: 45px;
   transform: translateY(-50%) rotate(0deg);
   transition: all 0.3s;
}

.noraito-faq .box-qa .txt-a {
   display: none;
   padding: 6px 105px 20px;
}

.noraito-faq .box-qa .txt-a:before {
   content: 'A';
   top: 0;
}

.noraito-faq .box-qa h3 {
   font-weight: 700;
   font-size: inherit;
}

.noraito-faq .box-qa .item {
   background-color: #fff;
   border-top: 1px solid #000;
   border-bottom: 1px solid #000;
}

.noraito-faq .box-qa .item:not(:last-child) {
   margin-bottom: 20px;
}

.noraito-faq .box-qa .item.is-active .txt-q:after {
   transform: translateY(-50%) rotate(-180deg);
}

@media screen and (max-width: 767px) {
   .noraito-faq {
      padding: 6.5rem 0;
   }

   .noraito-faq .box-qa {
      padding-top: 5rem;
   }

   .noraito-faq .box-qa .txt-q:before,
   .noraito-faq .box-qa .txt-a:before {
      width: 4rem;
      height: 4rem;
      left: 2rem;
   }

   .noraito-faq .box-qa .txt-q {
      padding: 2rem 5.5rem 2rem 7.5rem;
   }

   .noraito-faq .box-qa .txt-q:after {
      width: 1.5rem;
      height: 0.8rem;
      top: 3.5rem;
      right: 2rem;
   }

   .noraito-faq .box-qa .txt-a {
      padding: 0.5rem 5.5rem 2rem 7.5rem;
   }

   .noraito-faq .box-qa .txt-a:before {
      padding-top: 0;
   }

   .noraito-faq .box-qa .item:not(:last-child) {
      margin-bottom: 3.2rem;
   }
}

.noraito-cta {
   padding: 110px 0 80px;
   color: #fff;
   position: relative;
}

.noraito-cta img {
   position: absolute;
   top: 0;
   left: 0;
}

.noraito-cta .txt {
   max-width: 520px;
   line-height: 35px;
   padding-top: 25px;
}

.noraito-cta .button {
   padding-top: 35px;
}

@media screen and (max-width: 1023px) {
   .noraito-cta {
      padding: 180px 0 40px;
   }
}

@media screen and (max-width: 767px) {
   .noraito-cta {
      padding: 22.5rem 0 5rem;
   }

   .noraito-cta .txt,
   .noraito-cta .button {
      padding-top: 3rem;
   }

   .noraito-cta .txt {
      line-height: 3.5rem;
   }
}