@charset "utf-8";

.paddingT-1 {
  padding-top: 30%;
}



/* ----------------------------------------
 TOP
---------------------------------------- */
#home .TOP {
  margin: calc(var(--head_padding) - 1px) auto auto;
  width: 100%;
  position: relative;
}

/* logo */
#home .TOP .logo {
  width: 70%;
  position: absolute;
  top: 35%;
  left: 5%;
  z-index: 10;
  transform: translateZ(0);
  will-change: transform, opacity;
  backface-visibility: hidden;
}

/* TEXT */
#home .TOP .TXT {
  width: fit-content;
  position: absolute;
  top: 58%;
  left: 6%;
  z-index: 10;
  transform: translateZ(0);
  will-change: transform, opacity;
  backface-visibility: hidden;
}

#home .TOP .TXT h1 {
  font-family: "ShipporiMin", serif;
  font-weight: 400;
  font-size: var(--fs_15);
  line-height: 1.4;
  letter-spacing: 0.05em;
  color: var(--white);
}



/* ----------------------------------------
 pride_philosophy
---------------------------------------- */
.pride_philosophy {
  margin: 40% auto auto;
  width: 100%;
  position: relative;
}

/* LOGO */
.pride_philosophy .LOGO h2 {
  margin: auto auto 8%;
  width: 25%;
}

.pride_philosophy .LOGO p {
  font-family: "Geist", sans-serif;
  font-weight: 200;
  font-size: var(--fs_15);
  line-height: 1;
  letter-spacing: 0.15em;
  color: var(--white);
  text-align: center;
}

.pride_philosophy .LOGO p span.f1 {
  display: inline-block;
  margin-bottom: 0.3em;
}

/* TEXT */
.pride_philosophy .TXT {
  margin: 19% auto 18%;
  width: 84%;
}

.pride_philosophy .TXT h2 {
  margin-bottom: 30%;
  font-family: "ShipporiMin", serif;
  font-weight: 400;
  font-size: min(7.2vw, 54px);
  line-height: 1;
  letter-spacing: -0.2em;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  text-orientation: upright;
}

/* iOS Hack */
.ios-dev .pride_philosophy .TXT h2 {
  letter-spacing: 0.3em;
}
/* iOS Hack */
.pride_philosophy .TXT h3 {
  margin-bottom: 18%;
  font-family: "ShipporiMin", serif;
  font-weight: 400;
  font-size: var(--fs_16);
  line-height: 1;
  letter-spacing: 0.08em;
  text-align: center;
}

.pride_philosophy .TXT p {
  margin: auto auto 8%;
  font-family: "ShipporiMin", serif;
  font-weight: 400;
  font-size: var(--fs_13);
  line-height: 2.2;
  letter-spacing: 0.08em;
  text-align: justify;
}

.pride_philosophy .TXT p:last-child {
  margin-bottom: 0;
}

/* link */
.pride_philosophy .link {
  margin: 30% auto auto;
  position: relative;
}

.pride_philosophy .link a {
  display: block;
  width: 100%;
  height: 100%;
}

.pride_philosophy .link a::before {
  content: "";
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,30%);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.pride_philosophy .link a .link_TXT p {
  margin: auto;
  font-family: "GenjyuuGLP", sans-serif;
  font-weight: 400;
  font-size: var(--fs_16);
  line-height: 1.4;
  letter-spacing: 0.04em;
  position: absolute;
  top: 50%;
  left: 10%;
  transform: translate(0,-50%);
  z-index: 1;
}

/* --- link対策(PC・SP)@media制御 --- */
/* for PC */
@media (hover: hover) {
  .pride_philosophy .link a:hover {
    opacity: 0.6;
  }

}

/* for SP */
@media (hover: none) {
  .pride_philosophy .link a:active {
    opacity: 0.6;
  }

}



/* ----------------------------------------
 PRODUCTS/PROD
---------------------------------------- */
.PRODUCTS {
  margin: auto;
}

/* --- TITLE --- */

/* --- TITLE --- */
.PROD__TTL {
  margin: auto;
}

.PROD__TTL h2 {
  margin: auto auto 16%;
  width: fit-content;
  font-family: "Sansation", sans-serif;
  font-weight: 400;
  font-size: min(7.5vw,56.25px);
  line-height: 1;
  letter-spacing: 0.15em;
  text-align: center;
  color: #5f5f5f;
}

.PROD__TTL h3 {
  margin: auto auto 6%;
  width: fit-content;
  font-family: "Geist", sans-serif;
  font-weight: 200;
  font-size: var(--fs_19);
  line-height: 1;
  letter-spacing: 0.15em;
  text-align: center;
}

.PROD__TTL h3 span.f1 {
  display: inline-block;
  margin-bottom: 0.3em;
}

.PROD__TTL p {
  font-family: "GenjyuuGLP", sans-serif;
  font-weight: 400;
  font-size: var(--fs_13);
  line-height: 1;
  letter-spacing: 0.15em;
  text-align: center;
}

.PROD__TTL p span.f2 {
  display: inline-block;
  margin-bottom: 0.5em;
}

/* --- INSERT --- */
.PROD__INSERT {
  margin: auto;
  width: 100%;
}

/* --- LIST --- */
.PROD__LIST {
  margin: auto;
  padding-top: 30%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.PROD__LIST-img {
  margin: auto;
  width: 86%;
  position: relative;
}

.PROD__LIST-img:nth-of-type(2) {
  margin: 7.5% auto;
}

.PROD__LIST-img__TXT {
  width: fit-content;
  position: absolute;
  top: 45%;
  left: 5%;
  transform: translate(0,-50%);
}

.PROD__LIST-img__TXT p {
  font-family: "Geist", sans-serif;
  font-weight: 200;
  font-size: min(6vw,45px);
  line-height: 1;
  letter-spacing: 0.05em;
  color: var(--white);
  white-space: nowrap;
  text-align: left;
} 

.PROD__LIST-img__TXT p span.f1 {
  display: inline-block;
  margin-top: 4%;
} 


.PROD__LIST-img a h2 {
  font-family: "GenjyuuGLP", sans-serif;
  font-weight: 300;
  font-size: var(--fs_12);
  line-height: 1;
  letter-spacing: 0.05em;
  color: var(--white);
  white-space: nowrap;
  position: absolute;
  bottom: 5%;
  left: 5%;
} 

/* --- link対策(PC・SP)@media制御 --- */
/* for PC */
@media (hover: hover) {
  .PROD__LIST-img a:hover {
    opacity: 0.6;
  }

}

/* for SP */
@media (hover: none) {
  .PROD__LIST-img a:active {
    opacity: 0.6;
  }

}




/* ----------------------------------------
 AFR(実釣リポート:ACTUAL FISHING REPORT)
---------------------------------------- */
.AFR {
  margin: auto;
}


/* --- TITLE --- */
.AFR__TTL {
  margin: auto auto 30%;
}

.AFR__TTL h2 {
  margin: auto auto 16%;
  width: fit-content;
  font-family: "Sansation", sans-serif;
  font-weight: 400;
  font-size: min(7.5vw,56.25px);
  line-height: 1;
  letter-spacing: 0.15em;
  text-align: right;
  color: #5f5f5f;
}

.AFR__TTL h2 span.f1 {
  display: inline-block;
  margin-bottom: 3%;
}

.AFR__TTL p {
  font-family: "GenjyuuGLP", sans-serif;
  font-weight: 400;
  font-size: var(--fs_13);
  line-height: 1;
  letter-spacing: 0.15em;
  text-align: center;
}

.AFR__TTL p span.f2 {
  display: inline-block;
  margin-bottom: 1em;
}

/* --- PHOTO --- */
.AFR__PHOTO {
  margin: auto;
  width: 86%;
  position: relative;
  
}

.AFR__PHOTO::before {
  content: "";
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,50%);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.AFR__PHOTO::after {
  content: "準備中";
  width: fit-content;
  height: 1em;
  font-family: "GenjyuuGLP",sans-serif;
  font-weight: 700;
  font-size: min(9vw,67.5px);
  line-height: 1;
  letter-spacing: 0.2em;
  color: var(--white);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 1;
}



.AFR__PHOTO .copy {
  width: 77%;
  position: absolute;
  bottom: 0;
  right: 0;
}



/* --- BUTTON --- */
.AFR__button {
  display: block;
  margin: 6% auto auto;
  padding: 0.75em 1.5em;
  font-family: "GenjyuuGLP", sans-serif;
  font-weight: 300;
  font-size: var(--fs_13);
  line-height: 1;
  letter-spacing: 0.05em;
  text-align: center;
  background-color: #707070;
    
}



/* ----------------------------------------
  GR8-DEALS(お役立ち情報:GREAT_DEALS)
---------------------------------------- */
.GR8-DEALS {
  margin: auto;
}

/* --- TITLE --- */
.GR8-DEALS_TTL h2 {
  margin: auto auto 30%;
  width: fit-content;
  font-family: "Sansation", sans-serif;
  font-weight: 400;
  font-size: min(7.5vw,56.25px);
  line-height: 1;
  letter-spacing: 0.15em;
  text-align: center;
  color: #5f5f5f;
}

/* --- LINK --- */
.GR8-DEALS_LINK {
  margin: auto;
  width: 86%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

/* --- 1 --- */
.GR8-DEALS_LINK .linkbox {
  width: 48%;
  position: relative;
}

/* --- link対策(PC・SP)@media制御 --- */
/* for PC */
@media (hover: hover) {
  .GR8-DEALS_LINK a:hover {
    opacity: 0.6;
  }

}

/* for SP */
@media (hover: none) {
  .GR8-DEALS_LINK a:active {
    opacity: 0.6;
  }

}



/* ----------------------------------------
  NEWS
---------------------------------------- */
.NEWS {
  margin: auto;
}

/* --- TITLE --- */
.NEWS_TTL h2 {
  margin: auto auto 30%;
  width: fit-content;
  font-family: "Sansation", sans-serif;
  font-weight: 400;
  font-size: min(7.5vw, 56.25px);
  line-height: 1;
  letter-spacing: 0.15em;
  text-align: center;
  color: #5f5f5f;
}

/* --- contents --- */
.NEWS_CONT {
  padding: 0 5%;
  position: relative;
}

.NEWS_CONT::before {
  content: "";
  display: inline-block;
  width: 90%;
  height: min(0.133333vw,1px);
  background-color: var(--white);
  position: absolute;
  top: 0;
  left: 5%;
  transform: scale(1,0.5);
  z-index: 1;
}

/* - 記事 - */
.NEWS_box {
  margin: auto;
  padding: 8% 0;
  display: flex;
  position: relative;
}

.NEWS_box.new::before,
.NEWS_box::after {
  content: "";
  display: inline-block;
  width: 100%;
  height: min(0.133333vw,1px);
  background-color: var(--white);
  transform: scale(1,0.5);
  position: absolute;
  left: 0;
}

 
.NEWS_box::before {
  top: 0;
}

.NEWS_box::after {
  bottom: 0;
}
/* 
.NEWS_box.new::after {
  display: none;
}

.NEWS_box:not(:nth-of-type(1))::before {
  display: none;
}
*/


/* 日付 */
.NEWS_box .date {
  padding-left: 2%;
  width: fit-content;
  position: relative;
  
}

.NEWS_box .date p {
  font-family: "GenjyuuGLP",sans-serif;
  font-weight: 400;
  font-size: var(--fs_10);
  letter-spacing: 0.05em;
  line-height: 1.5;
}

/* 記事 */
.NEWS_box .Art {
  display: flex;
  flex-direction: column;
  padding: 0 2% 0 5%;
}

.NEWS_box .report {
  display: flex;
  flex-direction: column;
}

.NEWS_box .report:not(:nth-of-type(1)) {
  margin-top: 5%;
}

.NEWS_box .report h2 {
  margin-bottom: 2%;
}

/* icon1：再入荷 */
.NEWS_box .report h2.icon_back-in-stock {
  width: min(80.925px, max(10.79vw, 38.844px));
  height: 100%;
  transform: scale(0.9);
}

/* icon2：リニューアル */
.NEWS_box .report h2.icon_renewal {
  width: min(172.125px, max(22.95vw, 82.62px));
  height: 100%;
  transform: scale(0.9);
}

/* icon3：新商品 */
.NEWS_box .report h2.icon_new-products {
  width: min(74.22px, max(9.896vw, 35.6256px));
  height: 100%;
  transform: scale(0.9);
}

/* icon4：お知らせ */
.NEWS_box .report h2.icon_notice {
  width: min(120.15px, max(16.02vw, 57.672px));
  height: 100%;
  transform: scale(0.9);
}

.NEWS_box .date {
  padding-left: 2%;
  width: fit-content;
  position: relative;
}

/* icon5：新着 */
.NEWS_box .date .icon_icon_new-arrivals {
  width: min(86.9625px, max(11.595vw, 41.742px));
  position: absolute;
  top: max(-4vw,-30px);
  left: 1.5em;
  transform: scale(1.0);
}

.NEWS_box .report p {
  padding-left: 0.5em;
  font-family: "GenjyuuGLP",sans-serif;
  font-weight: 300;
  font-size: var(--fs_11);
  letter-spacing: 0.05em;
  line-height: 1.5;
  text-align: justify;
}

.NEWS_box .report p span.f1 {
  display: inline-block;
  transform: scale(0.7);
}

/* icon6：イベント */
.NEWS_box .report h2.icon_event {
  margin-right: 2%;
  width: min(120.15px, max(16.02vw, 57.672px));
  height: 100%; 
  transform: scale(0.9);
}



/* --- NEWS_OTHER --- */
.NEWS_OTHER {
  margin: 6% auto auto 5%;
  width: 60%;
  position: relative;
}

.NEWS_OTHER__doc {
  position: relative;
}

.NEWS_OTHER__doc:nth-of-type(1) {
  margin-bottom: 6%;
}

.NEWS_OTHER__doc a::before {
  content: "";
  width: 22%;
  height: 1px;
  background-color: var(--black);
  position: absolute;
  top: 50%;
  left: auto;
  right: 0%;
  transform: translate(0%,-50%) scale(1,0.5);
}

.NEWS_OTHER__doc a::after {
  content: "";
  width: 4%; 
  height: 1px;
  background-color: var(--black);
  position: absolute;
  top: 50%;
  left: auto;
  right: 0%;
  transform: translate(0%,-50%) rotate(25deg) scale(1,0.5);
  transform-origin: 100% 50%;
}


.NEWS_OTHER__doc a p {
  font-family: "GenjyuuGLP",sans-serif;
  font-weight: 300;
  font-size: var(--fs_11);
  line-height: 1.5;
  letter-spacing: 0.1em;
  text-align: left;
  position: relative;
}

/* 準備中用 */
.NEWS_OTHER__doc > p {
  font-family: "GenjyuuGLP",sans-serif;
  font-weight: 300;
  font-size: var(--fs_11);
  line-height: 1.5;
  letter-spacing: 0.1em;
  text-align: left;
  position: relative;
}

/* --- link対策(PC・SP)@media制御 --- */
/* for PC */
@media (hover: hover) {
  .NEWS_OTHER a:hover {
    opacity: 0.6;
  }

}

/* for SP */
@media (hover: none) {
  .NEWS_OTHER a:active {
    opacity: 0.6;
  }

}



/* ----------------------------------------
  INFORMATION/INFO
---------------------------------------- */
.INFORMATION {
  margin: auto;
}

/* --- TITLE --- */
.INFO__TTL h2 {
  margin: auto auto 10%;
  width: fit-content;
  font-family: "Khand", sans-serif;
  font-weight: 400;
  font-size: min(8.4vw,63px);
  line-height: 1;
  letter-spacing: 0.05em;
  text-align: center;
}



/* ----------------------------------------
  Loading Screen
---------------------------------------- */

/* Loading Screen */
#loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100svh;
  background-color: var(--black); /* 黒背景 */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
  transition: transform 1.5s ease; /* スライドアニメーション */
}

/* ロゴスタイル */
#loading-logo {
  width: min(70vw,525px);
  opacity: 0; /* 初期状態で非表示 */
  visibility: hidden;
  transform: scale(0.1); /* 少し縮小した状態 */
  transition: opacity 1.5s ease, transform 1.5s ease; /* トランジションを適用 */
}

#loading-logo.visible {
  opacity: 1; /* 表示状態 */
  visibility: visible;
  transform: scale(1); /* 元のサイズに戻る */
}


#top-content {
  transform: translateX(100vw); /* 初期位置は画面右外 */
  transition: transform 1.5s ease; /* スライドアニメーション */
}

/* transform だけを消すクラス */
#top-content.no-transform {
  transform: none !important;
}