@charset "UTF-8";

:root {
  --color-blue: #1e1e68;
  --color-blue-bright: #00409c;
  --color-green: #28893a;
  --color-brown: #231815;
  --color-light-gray: #ededed;
  --page-width: 750px;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: #d9d9d9;
  color: #000;
  font-family: "Noto Sans", "Noto Sans JP", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

.page {
  container-type: inline-size;
  width: 100%;
  max-width: var(--page-width);
  margin-inline: auto;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 0 40px rgba(0, 0, 0, .32);
}

main,
.site-footer {
  font-size: min(32px, 4.2667cqi);
}

.hero {
  position: relative;
  height: min(1346px, 179.467cqi);
  overflow: hidden;
}

.hero__visual,
.hero__visual img {
  width: 100.267%;
  max-width: none;
  height: 100%;
  margin: 0;
  object-fit: cover;
}

.hero__visual {
  position: relative;
  left: -.267%;
}

.hero__golf5 {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 35.47%;
}

.about {
  height: min(928px, 123.733cqi);
  padding: min(160px, 21.333cqi) 7.467% min(80px, 10.667cqi);
  background: var(--color-blue);
  color: #fff;
  text-align: center;
}

.about__title {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 3.125%;
  width: 90.28%;
  margin: 0 auto;
  font-size: 1em;
}

.about__title img {
  width: 80.21%;
}

.about__title span {
  padding-bottom: 0;
  font-size: 1.5em;
  font-weight: 700;
  line-height: 1.375;
}

.about__lead {
  margin: min(18px, 2.4cqi) 0 0;
  font-weight: 700;
  line-height: 1.375;
}

.about__text {
  margin: min(30px, 4cqi) 0 0;
  font-weight: 700;
  line-height: 1.375;
}

.about__lead span,
.about__text span,
.feature--second > p span,
.fitting-cta p span {
  display: block;
  white-space: nowrap;
}

.about__makers {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 108.15%;
  height: min(70px, 9.333cqi);
  margin: min(40px, 5.333cqi) 0 min(60px, 8cqi) -4.075%;
  padding: 0 .5em;
  border: 1px solid currentColor;
  font-size: .9375em;
  font-weight: 700;
  line-height: 1.333;
}

.button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: min(104px, 13.867cqi);
  padding: .65em 3em;
  border: 1px solid var(--color-green);
  background: var(--color-green);
  color: #fff;
  font-size: .875em;
  font-weight: 700;
  transition: color .3s ease-in-out, background-color .3s ease-in-out;
}

.button img {
  display: none;
}

.button::after {
  position: absolute;
  top: 50%;
  right: 3%;
  width: 1.3%;
  aspect-ratio: 4.41588 / 7.41824;
  background: currentColor;
  content: "";
  -webkit-mask: url("../images/icon-arrow.svg") center / contain no-repeat;
  mask: url("../images/icon-arrow.svg") center / contain no-repeat;
  transform: translateY(-50%);
  transition: background-color .3s ease-in-out;
}

.about .button {
  width: 108.15%;
  margin-left: -4.075%;
}

.about-photo {
  width: 100%;
  aspect-ratio: 375 / 359;
  margin: 0;
  overflow: hidden;
}

.about-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.features {
  position: relative;
  overflow: hidden;
  height: min(1540px, 232cqi);
  padding: 0;
  background: var(--color-brown);
  color: #fff;
}

.section-heading {
  text-align: center;
}

.section-heading h2 {
  margin: 0;
  font-family: Oswald, sans-serif;
  font-size: 2.0625em;
  line-height: 1.48485;
}

.section-heading p {
  margin: 0;
  font-size: 1em;
  line-height: 1.375;
}

.section-heading--light {
  color: #fff;
}

.section-heading--dark {
  color: #000;
}

.feature {
  position: absolute;
  left: 6.133%;
  width: 89.867%;
}

.feature--first {
  top: min(298px, 39.733cqi);
}

.feature--second {
  top: min(528px, 70.4cqi);
}

.features > .section-heading {
  position: absolute;
  top: min(74px, 9.867cqi);
  left: 0;
  width: 100%;
}

.feature__heading {
  display: grid;
  grid-template-columns: min(32px, 4.267cqi) 1fr;
  gap: 3.95%;
  align-items: start;
}

.feature__heading h3 {
  position: relative;
  top: min(4px, .5333cqi);
  margin: 0;
  padding: 0;
  font-size: 1.5625em;
  line-height: 1.36;
}

.feature--second .feature__heading h3 {
  top: min(6px, .8cqi);
  font-size: 1.4375em;
  line-height: 1.34783;
}

.feature__number {
  position: relative;
  display: inline-block;
  background-image: linear-gradient(
    180deg,
    rgb(132, 132, 132) 24.324%,
    rgb(255, 255, 255) 49.865%,
    rgb(103, 103, 103) 52.703%,
    rgb(115, 115, 115) 55.541%,
    rgb(224, 224, 224) 81.081%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke-width: min(2px, .2667cqi);
  -webkit-text-stroke-color: rgb(84, 84, 84);
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-family: Oswald, sans-serif;
  font-size: 1.5625em;
  font-weight: 500;
  line-height: 1.48;
}

.feature > p {
  width: 91.395%;
  margin: min(24px, 3.2cqi) 0 0 8.6%;
  font-size: .9375em;
  line-height: 1.5334;
}

.feature--first > p {
  margin-top: min(24px, 3.2cqi);
}

.feature--second > p {
  margin-top: min(24px, 3.2cqi);
}

.feature__chart {
  position: absolute;
  z-index: 2;
  top: min(1300px, 173.467cqi);
  left: 4%;
  width: 92%;
  margin: 0;
}

.feature__smoke {
  position: absolute;
  z-index: 1;
  top: min(192px, 53.6cqi);
  left: -6.826%;
  width: 111.267%;
  height: min(810px, 108cqi);
  margin: 0;
  overflow: hidden;
  mix-blend-mode: screen;
}

.feature__smoke img {
  position: absolute;
  top: -5.03%;
  left: -51.47%;
  width: 148.76%;
  max-width: none;
  height: 111.2%;
}

.product-spec {
  position: relative;
  height: min(1896px, 261.6cqi);
  padding: 0 4%;
  overflow: hidden;
  background: #fff;
}

.product-spec > .section-heading {
  position: absolute;
  top: min(100px, 13.333cqi);
  left: 4%;
  width: 92%;
}

.shaft-model {
  position: absolute;
  top: min(302px, 40.267cqi);
  left: 4%;
  width: 92%;
  margin: 0;
  text-align: center;
}

.shaft-model + .shaft-model {
  top: min(426px, 56.8cqi);
  margin: 0;
}

.shaft-model p {
  margin: 0;
  font-family: Oswald, sans-serif;
  font-size: 1em;
  font-weight: 700;
}

.shaft-model em {
  color: var(--color-blue-bright);
  font-style: normal;
}

.shaft-model img {
  position: absolute;
  top: min(54px, 7.2cqi);
  left: -4.35%;
  width: calc(100% + 8.7%);
  max-width: none;
  height: min(30px, 4cqi);
  margin: 0;
  object-fit: cover;
}

.product-spec__points {
  position: absolute;
  top: min(578px, 77.067cqi);
  left: 4%;
  width: 92%;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: Oswald, "Noto Sans JP", sans-serif;
}

.product-spec__points li {
  position: relative;
  margin: 0;
  padding-left: 1.25em;
  font-size: 1em;
  line-height: 1.5;
}

.product-spec__points li + li {
  margin-top: min(30px, 4cqi);
}

.product-spec__points li::before {
  position: absolute;
  top: .6em;
  left: 0;
  width: min(18px, 2.4cqi);
  aspect-ratio: 1;
  background: url("../images/icon-bullet-ring.svg") center / contain no-repeat;
  content: "";
}

.model-spec {
  position: absolute;
  top: min(970px, 129.333cqi);
  left: 4%;
  width: 92%;
  margin: 0;
}

.model-spec h3 {
  margin: 0;
  font-family: Oswald, sans-serif;
  font-size: .8125em;
}

.model-spec__scroll {
  margin-top: min(10px, 1.333cqi);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
}

.model-spec__scroll::-webkit-scrollbar {
  display: none;
}

.model-spec table {
  width: 174.93%;
  min-width: 656px;
  border-collapse: separate;
  border-spacing: 1px;
  font-size: min(24px, 3.2cqi);
  text-align: center;
}

.model-spec th,
.model-spec td {
  min-width: 62px;
  height: min(60px, 8cqi);
  padding: .25em .35em;
  background: #efefef;
  font-weight: 400;
  line-height: 1.15;
}

.model-spec thead th {
  background: var(--color-blue-bright);
  color: #fff;
  font-weight: 700;
}

.model-spec tbody th {
  color: var(--color-blue-bright);
  font-weight: 700;
}

.fitting-cta {
  height: min(496px, 66.133cqi);
  padding: min(100px, 13.333cqi) 4% min(100px, 13.333cqi);
  background: var(--color-blue);
  color: #fff;
  text-align: center;
}

.fitting-cta p {
  margin: 0 0 min(60px, 8cqi);
  font-weight: 700;
  line-height: 1.375;
}

.movie {
  position: relative;
  height: min(802px, 106.933cqi);
  padding: min(100px, 13.333cqi) 4%;
  background: var(--color-light-gray);
}

.movie__placeholder {
  position: absolute;
  top: min(302px, 40.267cqi);
  left: 4%;
  display: grid;
  width: 92%;
  aspect-ratio: 345 / 200;
  margin: 0;
  padding: 0;
  place-items: center;
  border: 0;
  background: #7e7e7e;
  cursor: pointer;
}

.movie__placeholder img {
  width: 100%;
}

.footer-links {
  display: grid;
  gap: min(40px, 5.333cqi);
  min-height: min(360px, 48cqi);
  padding: min(56px, 7.467cqi) 4%;
  background: var(--color-blue);
}

.site-footer {
  min-height: min(500px, 66.667cqi);
  padding: min(100px, 13.333cqi) 4%;
  background: #000;
  color: #fff;
  text-align: center;
}

.site-footer a {
  display: block;
  width: 48%;
  margin-inline: auto;
}

.site-footer small {
  display: block;
  margin-top: .7273em;
  font-size: .6875em;
  line-height: 1.36364;
}

.floating-banner {
  position: fixed;
  z-index: 99;
  right: 0;
  bottom: 5px;
  left: 0;
  width: 100%;
  text-align: center;
}

.floating-banner__link {
  position: relative;
  display: block;
  width: 92%;
  max-width: 690px;
  margin: 0 auto;
  overflow: visible;
}

.floating-banner__shine {
  position: absolute;
  z-index: 1;
  top: 8%;
  left: 0;
  width: 100%;
  height: 82%;
  overflow: hidden;
  border-radius: 999px;
  pointer-events: none;
}

.floating-banner__shine::after {
  position: absolute;
  top: -25%;
  left: -10%;
  width: 30px;
  height: 150%;
  background: rgba(255, 255, 255, .8);
  content: "";
  opacity: 0;
  transform: skewX(-20deg);
  animation: floating-reflection 2s ease-in-out infinite;
}

.floating-banner__link img {
  width: 100%;
  height: auto;
  transition: filter .3s ease-in-out;
}

@keyframes floating-reflection {
  0%,
  75% {
    left: -10%;
    opacity: 0;
  }
  80% {
    opacity: .8;
  }
  100% {
    left: 110%;
    opacity: 0;
  }
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (hover: hover) {
  .button:hover,
  .button:focus-visible {
    background-color: #fff;
    color: var(--color-green);
  }

  .movie__placeholder:hover,
  .movie__placeholder:focus-visible {
    filter: brightness(1.08);
  }

  .site-footer a:hover img,
  .site-footer a:focus-visible img {
    opacity: .8;
  }

  .floating-banner__link:hover img,
  .floating-banner__link:focus-visible img {
    filter: brightness(1.6);
  }
}

@media screen and (max-width: 374px) {
  .about__text br,
  .feature > p br {
    display: none;
  }
}

@media screen and (max-width: 480px) {
  .floating-banner__shine::after {
    animation-duration: 1.7s;
  }
}

@media screen and (min-width: 751px) {
  body {
    min-width: 1000px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }

  .floating-banner__shine::after {
    animation: none;
  }
}

.staffBlog {
  /*margin-bottom: 30px;*/
  background-color: #ededed;
  padding: 70px 30px 80px;
}

@media screen and (max-width: 480px) {
  .staffBlog {
    padding: 30px 3% 35px;
  }
}
.staffBlogLink {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  height: 100px;
  background-color: #28893A;
  border: solid 1px #28893A;
  color: #fff;
  font-size: 2.7rem;
  font-weight: 700;
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
  margin-top: 40px;
}

@media screen and (max-width: 480px) {
  .staffBlogLink {
    height: 50px;
    color: #fff;
    font-size: 1.4rem;
    margin-top: 20px;
  }
}
@media only screen and (max-device-width: 320px) { /* iPhone 5・SE */
  .staffBlogLink {
    font-size: 1.2rem;
  }
}
.staffBlogLink::after {
  position: absolute;
  content: "";
  right: 20px;
  display: inline-block;
  width: 12px;
  height: 12px;
  margin: 0 10px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}

@media screen and (max-width: 480px) {
  .staffBlogLink::after {
    right: 5px;
    width: 8px;
    height: 8px;
    margin: 0 10px;
    border-width: 1px;
  }
}
.staffBlogLink:hover {
  color: #28893A;
  background-color: #fff;
}

.staffBlogLink:hover::after {
  border-color: #28893A;
}

.ef-blogs {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: flex;
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.ef-blogs .ef-item {
  position: relative;
  width: 48%;
  margin-bottom: 55px;
  background-color: #FFFFFF;
}

@media screen and (max-width: 480px) {
  .ef-blogs .ef-item {
    width: 48%;
    margin-bottom: 30px;
  }
}
.js-photo-ofi img {
  max-width: inherit;
  max-height: inherit;
  width: 100%;
  height: 100%;
  -o-object-fit: scale-down;
  object-fit: scale-down;
  font-family: "object-fit: scale-down;";
  position: absolute;
  left: 0;
  top: 0;
  vertical-align: middle;
}

.homeBlogEntries__entry__link .homeBlogEntries__entry__image {
  position: relative;
  display: block;
  height: 0;
  background-color: #FFFFFF;
  padding-bottom: 100%;
  overflow: hidden;
  margin-bottom: 25px;
}

@media screen and (max-width: 480px) {
  .homeBlogEntries__entry__link .homeBlogEntries__entry__image {
    margin-bottom: 10px;
  }
}
.homeBlogEntries__entry__link .homeBlogEntries__entry__image img {
  max-width: inherit;
  max-height: inherit;
  width: 100%;
  height: 100%;
  -o-object-fit: scale-down;
  object-fit: scale-down;
  position: absolute;
  left: 0;
  top: 0;
  vertical-align: middle;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.homeBlogEntries__entry__link {
  display: block;
  width: 100%;
}

.homeBlogEntries__entry__link .content-entry {
  padding: 15px;
}

@media screen and (max-width: 480px) {
  .homeBlogEntries__entry__link .content-entry {
    padding: 10px;
  }
}
.homeBlogEntries__entry__link .homeBlogEntries__entry__date {
  color: #348DD6;
  font-size: 24px;
  line-height: 1;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  margin: 0 0 20px;
}

@media screen and (max-width: 480px) {
  .homeBlogEntries__entry__link .homeBlogEntries__entry__date {
    font-size: 12px;
    margin-bottom: 10px;
  }
}
.homeBlogEntries__entry__link .homeBlogEntries__entry__title {
  padding-bottom: 20px;
  font-size: 26px;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  margin: 0 0 20px;
}

@media screen and (max-width: 480px) {
  .homeBlogEntries__entry__link .homeBlogEntries__entry__title {
    font-size: 13px;
    margin-bottom: 10px;
  }
}
.homeBlogEntries__entry__link .homeBlogEntries__entry__name {
  /*position: absolute;*/
  bottom: 0;
  left: 0;
  width: 100%;
  color: #348DD6;
  font-size: 24px;
  /*padding: 6px;*/
  /*text-align: center;*/
  /*border: solid 1px #348DD6;*/
  border-radius: 6px;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

@media screen and (max-width: 480px) {
  .homeBlogEntries__entry__link .homeBlogEntries__entry__name {
    font-size: 12px;
    padding: 3px;
    border-radius: 4px;
  }
}
@media only screen and (min-width: 768px) {
  .homeBlogEntries__entry__link:hover .homeBlogEntries__entry__title {
    opacity: 0.8;
  }
  .homeBlogEntries__entry__link:hover .homeBlogEntries__entry__datee {
    opacity: 0.8;
  }
  .homeBlogEntries__entry__link:hover .homeBlogEntries__entry__name {
    opacity: 0.8;
  }
  .homeBlogEntries__entry__link:hover .homeBlogEntries__entry__image img {
    opacity: 0.8;
    -webkit-transform: scale(1.03);
            transform: scale(1.03);
  }
}
.youtube {
	background-color: #EFEFEF;
	padding-top: 60px;
}
@media screen and (max-width: 480px) {
	.youtube {
		padding-top: 30px;
	}
}
.youtubeIframe {
	position: relative;
	padding-bottom: 56.5%;
	height: 0;
	overflow: hidden;
}
.youtubeIframe iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: none;
}
.youtube p {
	font-size: 3.0rem;
	word-break: break-all;
	padding: 18px 0 36px;
}
@media screen and (max-width: 480px) {
	.youtube p {
		font-size: 1.5rem;
		padding: 9px 0 18px;
	}
}
.mb60 {
  padding-bottom: 60px;
}
@media screen and (max-width: 480px) {
  .mb60 {
    padding-bottom: 30px;
  }
}
.caution {
  font-size: 1.5rem;
}
@media screen and (max-width: 480px) {
  .caution {
    font-size: 1rem;
  }
}