@charset "UTF-8";
body {
  font-family: "Noto Serif JP", serif;
  font-size: 13px;
  letter-spacing: 0.1em;
  line-height: 1.5;
  color: #171717;
}
@media (min-width: 960px) {
  body {
    font-size: 15px;
  }
}

h3 {
  text-align: center;
  font-size: 26px;
  margin-bottom: 30px;
}
@media (min-width: 960px) {
  h3 {
    font-size: 48px;
  }
}

main {
  position: relative;
  overflow: hidden;
}

.blue {
  color: hsl(201, 100%, 58%);
  font-weight: bold;
}

.dn {
  display: none;
}
@media (min-width: 960px) {
  .dn {
    display: block;
  }
}

.pcdn {
  display: block;
}
@media (min-width: 960px) {
  .pcdn {
    display: none;
  }
}

.tac {
  text-align: center;
}

.cw {
  width: 90%;
  max-width: 1080px;
  margin: 0 auto;
}

@media (min-width: 960px) {
  .pccw {
    width: 90%;
    margin: 0 auto;
    max-width: 700px;
  }
}
.content_cw {
  width: 90%;
  max-width: 420px;
  margin: 0 auto;
}

.item_cw {
  width: 100%;
  max-width: 250px;
  margin: 0 auto;
}

.di {
  display: inline-block;
}

.mt {
  margin-top: 60px;
}

.pb {
  padding-bottom: 60px;
}

.mpb {
  padding-bottom: 30px;
}

.spb {
  padding-bottom: 15px;
}

.xlpt {
  padding-top: 120px;
}

.lpt {
  padding-top: 90px;
}

.pt {
  padding-top: 60px;
}

.mpt {
  padding-top: 30px;
}

.zmb {
  margin-bottom: 200px;
}
@media (min-width: 960px) {
  .zmb {
    margin-bottom: 280px;
  }
}

.xxlmb {
  margin-bottom: 120px;
}
@media (min-width: 960px) {
  .xxlmb {
    margin-bottom: 180px;
  }
}

.xlmb {
  margin-bottom: 90px;
}

.lmb {
  margin-bottom: 75px;
}

.mb {
  margin-bottom: 60px;
}

.mmb {
  margin-bottom: 30px;
}

.smb {
  margin-bottom: 20px;
}

.xsmb {
  margin-bottom: 5px;
}

.red {
  background-color: #6B1917 !important;
}

footer {
  background-color: #8F8879;
  color: white;
  padding: 60px 0 0px;
  position: relative;
  width: 100%;
}
@media (min-width: 960px) {
  footer .footer_flex {
    gap: 350px;
    display: flex;
    gap: 100px;
    align-items: center;
    padding-bottom: 90px;
    justify-content: space-between;
    -moz-text-align-last: left;
         text-align-last: left;
  }
  footer .footer_flex .flex_item2 {
    text-align: left;
  }
}
footer img {
  width: 176px;
}
footer h4 {
  margin-bottom: 20px;
}
footer p {
  margin-bottom: 20px;
}
footer p:last-child {
  margin-bottom: 30px;
}
footer a {
  text-decoration: none;
  color: white;
}
footer ul {
  padding: 0;
  margin: 0 auto 40px;
  margin-bottom: 40px;
  writing-mode: vertical-lr;
  text-orientation: upright;
}
footer ul li {
  list-style: none;
}
footer ul li a {
  display: inline-block;
  padding: 10px 8px 0px;
  width: 100%;
}
footer .logo {
  width: auto;
  margin-bottom: 20px;
}
footer .logo .bi {
  padding-right: 10px;
  color: white;
}
footer small {
  display: block;
  text-align: center;
  padding-bottom: 10px;
}
footer > P a {
  display: block;
  width: 100%;
  background-color: white;
  color: black;
  text-align: center;
  padding: 5px 0;
}

.fw {
  font-weight: bold;
}

.bi {
  padding-right: 5px;
  font-size: 16px;
  color: white;
}

.fs {
  font-style: italic;
}

.single img {
  margin: 0 auto;
  width: 100%;
  height: 100%;
}
@media (min-width: 960px) {
  .single img {
    width: 100%;
    height: 100%;
  }
}

.td {
  text-decoration: underline;
  text-align: center;
  margin: 0 auto 60px;
}
@media (min-width: 960px) {
  .td {
    margin: 0 auto 90px;
  }
}

.litle {
  font-size: 10px !important;
  display: inline-block;
  vertical-align: super;
  /* padding-bottom: 9px; */
  margin-bottom: 30px;
}

.hero {
  height: 100vh;
  background-image: url(images/mb_hero.JPG);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}
@media (min-width: 960px) {
  .hero {
    background-image: none;
    height: auto;
  }
}
.hero img {
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
  margin-top: 60px;
}
.hero h1 {
  writing-mode: vertical-rl;
  color: white;
  text-shadow: 0.5px 0.5px 0 black, -0.5px -0.5px 0 black, -0.5px 0.5px 0 black, 0.5px -0.5px 0 black, 0px 0.5px 0 black, -0.5px 0 0 black, 0.5px 0 0 black;
  z-index: 100;
  padding: 150px 2% 0 0;
  float: right;
  font-size: 20px;
  letter-spacing: 0.3em;
}
@media (min-width: 960px) {
  .hero h1 {
    font-size: 28px;
  }
}
.hero h1 span {
  padding-top: 40px;
  font-size: 57px;
}
@media (min-width: 960px) {
  .hero h1 span {
    font-size: 83px;
  }
}
.hero .hero_menu a {
  color: white;
  writing-mode: vertical-rl;
  background-color: rgba(5, 60, 94, 0.7);
  padding: 20px 10px;
  letter-spacing: 4.6px;
  border-radius: 5px;
  position: absolute;
  bottom: 5%;
  left: 5%;
  font-size: 20px;
  text-decoration: none;
}
@media (min-width: 960px) {
  .hero .hero_menu a {
    font-size: 28px;
  }
}

@keyframes c1 {
  0% {
    transform: scale(80%) rotate(45deg) translateX(5px);
  }
  50% {
    transform: scale(100%) rotate(270deg) translateX(15px);
  }
  100% {
    transform: scale(80%) rotate(45deg) translateX(5px);
  }
}
@keyframes c2 {
  0% {
    transform: scale(70%) rotate(35deg) translateY(15px);
  }
  50% {
    transform: scale(100%) rotate(270deg) translateY(35px);
  }
  100% {
    transform: scale(70%) rotate(35deg) translateY(15px);
  }
}
@keyframes c3 {
  0% {
    transform: scale(80%) rotate(-90deg) translateY(-15px);
  }
  50% {
    transform: scale(110%) rotate(-270deg) translateY(-35px);
  }
  100% {
    transform: scale(80%) rotate(-90deg) translateY(-15px);
  }
}
@keyframes slide {
  0% {
    opacity: 1;
    transform: translate(50% 0%);
    top: 10%;
  }
  100% {
    opacity: 0;
    transform: translate(50% 0%);
    top: 90%;
  }
}
.hero_logo {
  width: 200px;
  position: absolute;
  top: 20%;
  right: 3%;
  transform: translate();
}

.logo {
  width: 265px;
  position: absolute;
  top: 65%;
  left: 63%;
  transform: translate(-50%, -50%);
  color: white;
  font-weight: bold;
}
@media (min-width: 960px) {
  .logo {
    width: 565px;
    left: 73%;
  }
  .logo img {
    margin-bottom: 40px;
  }
  .logo p {
    padding-left: 200px;
  }
}

.hero_jp {
  font-size: 13px;
  white-space: nowrap;
  display: block;
  margin-top: 8px;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  display: flex;
  flex-direction: row-reverse;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 0% 4%;
  height: 60px;
  background-color: white;
}
@media (min-width: 960px) {
  header {
    background-color: white;
    flex-direction: row;
  }
}

/*ボタン外側※レイアウトによってpositionや形状は適宜変更してください*/
.open_btn {
  width: 50px;
  height: 50px;
  cursor: pointer;
  position: relative;
  z-index: 9999;
  margin-left: auto;
  /*ボタン内側*/
}
@media (min-width: 960px) {
  .open_btn {
    display: none;
  }
}
.open_btn span {
  display: block;
  transition: all 0.4s;
  position: absolute;
  height: 0.5px;
  background-color: #000;
}
.open_btn span:nth-of-type(1) {
  top: 40%;
  right: 0;
  width: 85%;
}
.open_btn span:nth-of-type(2) {
  top: 60%;
  right: 0;
  width: 55%;
}

/*activeクラスが付与されると線が回転して×に*/
.open_btn.active span:nth-of-type(1) {
  top: 35%;
  left: 12%;
  transform: translateY(6px) rotate(-45deg);
  width: 75%;
  background-color: blacke;
}

.open_btn.active span:nth-of-type(2) {
  transform: translateY(6px) rotate(45deg);
  top: 35%;
  left: 12%;
  width: 75%;
  background-color: blacke;
}

/*========= ナビゲーションのためのCSS ===============*/
#g_nav {
  /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
  position: fixed;
  z-index: 999;
  /*ナビのスタート位置と形状*/
  top: 0;
  left: 100%;
  width: 100%;
  height: 100vh;
  background: linear-gradient(180deg, rgb(255, 255, 255) 40%, rgb(195, 195, 195) 58%);
  padding: 30px 0;
  transition: all 0.6s;
}
#g_nav .logo {
  margin-bottom: 30px;
}
#g_nav img {
  width: 250px;
  max-width: 250px;
  -o-object-fit: contain;
     object-fit: contain;
  height: 150px;
  margin: 0 auto;
}

/*アクティブクラスがついたら位置を0に*/
#g_nav.panelactive {
  left: 0;
}

/*ナビゲーション*/
#g_nav ul {
  font-size: 14px;
  font-weight: normal;
  padding: 90px 0 0 0;
  text-align: center;
  height: 50%;
  margin: 0 auto 120px;
}

#g_nav li {
  list-style: none;
  text-align: left;
}

#g_nav li a {
  color: black;
  text-decoration: none;
  display: block;
  letter-spacing: 0.1em;
  font-size: 20px;
  text-align: center;
  padding: 10px 0;
  margin-bottom: 30px;
}
#g_nav li a span {
  font-size: 12px;
}
@media (min-width: 960px) {
  #g_nav li a {
    font-size: 28px;
    font-weight: bold;
  }
}

@media (min-width: 960px) {
  #pc_nav {
    display: flex;
    flex-direction: column-reverse;
  }
  #pc_nav ul {
    display: flex;
    justify-content: flex-end;
  }
  #pc_nav ul li {
    list-style: none;
  }
  #pc_nav ul li a {
    text-decoration: none;
    color: black;
    padding: 10px 20px;
  }
  #pc_nav div:nth-of-type(2) {
    font-size: 13px;
  }
}
.btn {
  width: 200px;
  height: 45px;
  background-color: #CAA55D;
  color: white;
  line-height: 45px;
  text-align: center;
  margin: 0 auto;
}
.btn a {
  text-decoration: none;
  color: white;
  margin-left: 0;
}

#g_nav .btn {
  margin: 0 auto 60px;
  width: 200px;
}

.order_btn {
  width: 300px;
  background-color: #CAA55D;
  color: white;
  text-align: center;
  margin: 0 auto 80px;
}
.order_btn a {
  padding: 6px 0;
  display: block;
  width: 100%;
  text-decoration: none;
  color: white;
  margin-left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.order_btn a div:nth-of-type(1) {
  border: 1px solid white;
  border-radius: 50%;
  padding: 4px;
}
.order_btn a div:nth-of-type(2) {
  padding-left: 10px;
  font-weight: bold;
  font-size: 16px;
}
.order_btn a div:nth-of-type(2) span {
  color: #FFD43D;
}

.fax_btn {
  width: 200px;
  height: 45px;
  background-color: #CAA55D;
  color: white;
  line-height: 45px;
  text-align: center;
  margin: 40px auto 60px;
}
.fax_btn a {
  text-decoration: none;
  color: white;
  margin-left: 0;
}

.intro h2 {
  font-weight: normal;
  font-size: 36px;
  white-space: nowrap;
}
@media (min-width: 960px) {
  .intro h2 {
    font-size: 56px;
  }
}
.intro p {
  line-height: 2.5;
  letter-spacing: 1.6px;
}
.intro .grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.intro .grid img {
  height: 180px;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: 60% 26%;
     object-position: 60% 26%;
}
@media (min-width: 960px) {
  .intro .grid {
    height: 360px;
    align-items: center;
  }
}
@media (min-width: 960px) {
  .intro {
    display: flex;
    max-width: 1080px;
    margin: 0 auto 280px;
    align-items: center;
  }
  .intro > div {
    width: 50%;
  }
}

.content .flex_container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: left;
  align-items: center;
  max-width: 1280px;
  margin: 0 auto 60px;
}
@media (min-width960px) {
  .content .flex_container {
    margin: 0 auto 150px;
  }
}
.content .flex_container .item {
  width: calc(50% - 10px);
  margin-bottom: 30px;
}
@media (min-width: 960px) {
  .content .flex_container .item {
    max-width: 310px;
    margin-bottom: 60px;
  }
}
.content .flex_container .item img {
  width: 80%;
  margin: 0 auto 15px;
  height: 193px;
  -o-object-fit: contain;
     object-fit: contain;
}
.content .flex_container .item p:nth-of-type(1) {
  text-decoration: underline;
  margin-bottom: 15px;
}
.content .flex_container .item p a {
  text-decoration: none;
  color: black;
  padding: 10px;
}

.news .item p:nth-of-type(1) {
  margin: 10px 0 0;
}
.news .item img {
  margin: 0 auto;
  width: 100%;
  height: 100%;
}
.news .item a {
  text-decoration: none;
  color: black;
}
@media (min-width: 960px) {
  .news_container {
    display: flex;
    gap: 70px;
    justify-content: center;
    align-items: center;
  }
  .news_container .item {
    max-width: 310px;
  }
}

.contact {
  padding: 60px 0;
  background: rgb(255, 255, 255);
  background: linear-gradient(180deg, rgb(255, 255, 255) 0%, rgb(195, 195, 195) 58%);
}
.contact iframe {
  width: 70%;
  aspect-ratio: 1;
  max-width: 425px;
  aspect-ratio: 1;
  margin-bottom: 60px;
}
.contact p {
  margin-bottom: 30px;
}
.contact p a {
  text-decoration: none;
  color: black;
}
@media (min-width: 960px) {
  .contact_container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 100px;
    line-height: 2.5;
  }
  .contact_container iframe {
    width: 300px;
    height: 200px;
  }
  .contact_container > div:nth-of-type(1) {
    display: flex;
    flex-direction: column;
  }
  .contact_container > div:nth-of-type(2) {
    text-align: left;
  }
}

main .title {
  font-size: 15px;
  font-weight: bold;
}
@media (min-width: 960px) {
  main .title {
    font-size: 18px;
  }
}

.menu_hero {
  height: 35vh;
  background-image: url(images/mb_hero.JPG);
  background-position: 50% 13%;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  margin-top: 60px;
}

.menu .content > p {
  text-decoration: underline;
}

.grid {
  display: flex;
  flex-wrap: wrap;
  gap: 50px;
  justify-content: left;
  margin: 0 auto 160px;
}
@media (min-width: 960px) {
  .grid {
    margin: 0 auto 160px;
  }
}
.grid .item {
  margin-bottom: 60px;
}
@media (min-width: 960px) {
  .grid .item {
    margin-bottom: 160px;
  }
}

.grid_btn {
  width: 350px;
}
.grid_btn a {
  text-decoration: none;
  color: white;
  padding: 15px 50px;
  border: 1px solid white;
  border-radius: 20px;
}

#contact_menu, #news_menu {
  background-image: url(images/yokan47.JPG);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
@media (min-width: 480px) {
  #contact_menu, #news_menu {
    background-image: url(images/wood.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }
}

.riders .item .gallery-image img, .chaps .item .gallery-image img {
  height: auto;
}

.poach .item .gallery-image img {
  width: auto;
}

.item {
  width: 100%;
}
@media (min-width: 960px) and (min-width: 960px) {
  .item {
    max-width: 326px;
  }
}
.item.drive {
  background-image: url("images/yokan47.JPG");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  max-width: none;
}
.item > .product {
  width: 90%;
  margin: 0 auto;
}
.item > .produce t {
  width: 350px;
}
.item .gallery-image {
  position: relative;
}
.item .gallery-image img {
  margin: 0 auto;
  width: 95%;
}
.item .gallery-content .gallery-thumbnails {
  list-style: none;
  padding-left: 0;
  display: flex;
  gap: 20px;
  justify-content: center;
}
@media (min-width: 960px) {
  .item .gallery-content .gallery-thumbnails {
    height: 100px;
  }
}
.item .gallery-content .gallery-thumbnails img {
  -o-object-fit: cover;
     object-fit: cover;
  aspect-ratio: 1;
  width: 98px;
  height: 98px;
}
.item span {
  font-size: 18px;
  font-weight: bold;
}
@media (min-width: 960px) {
  .item span {
    font-size: 20px;
  }
}

@media (min-width: 960px) {
  .pc_tac {
    text-align: center;
  }
}

.ap1 {
  text-align: center;
  margin: 0 auto;
}

.front .item .product {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}

.item .product {
  position: relative;
}

.gallery-content .gallery-thumbnails .blur {
  filter: brightness(50%);
}

.order_hero {
  height: 30vh;
  background-image: url(images/hare.JPG);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  margin-top: 60px;
}

.order_title {
  font-size: 20px;
  font-weight: bold;
}
@media (min-width: 960px) {
  .order_title {
    font-size: 26px;
  }
}

.order_content {
  text-align: center;
}
@media (min-width: 960px) {
  .order_content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 100px;
    text-align: left;
  }
}
.order_content div:first-child p:last-child {
  margin-bottom: 60px;
}
@media (min-width: 960px) {
  .order_content div:first-child p:last-child {
    margin-bottom: 0;
  }
}
@media (min-width: 960px) {
  .order_content div .btn {
    margin: 0 0;
  }
}
@media (min-width: 960px) {
  .order_content div .fax_btn {
    margin: 40px 0 60px;
  }
}

.order_hero {
  height: 30vh;
  background-image: url(images/hare.JPG);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  margin-top: 60px;
}

.order_title {
  font-size: 20px;
  font-weight: bold;
}
@media (min-width: 960px) {
  .order_title {
    font-size: 26px;
  }
}

.color_content {
  text-align: center;
}
@media (min-width: 960px) {
  .color_content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 100px;
    text-align: left;
  }
}
.color_content > div:first-child p:last-child {
  margin-bottom: 60px;
}
@media (min-width: 960px) {
  .color_content > div:first-child p:last-child {
    margin-bottom: 0;
  }
}
@media (min-width: 960px) {
  .color_content > div .btn {
    margin: 0 0;
  }
}
@media (min-width: 960px) {
  .color_content > div .fax_btn {
    margin: 40px 0 60px;
  }
}
.color_content > div:last-child {
  text-align: center;
}
@media (min-width: 960px) {
  .color_content > div:last-child {
    width: 40%;
  }
}
.color_content > div:last-child p {
  margin-bottom: 60px;
}
@media (min-width: 960px) {
  .color_content > div:last-child p {
    margin-bottom: 0;
  }
}

.hat_size img {
  display: block;
  width: 100%;
}
@media (min-width: 960px) {
  .hat_size img {
    max-width: 600px;
    margin: 0 auto;
  }
}/*# sourceMappingURL=style.css.map */