@charset "utf-8";

@import url("style-s.css?v=1.0.0") only screen and (max-width: 736px);
@import url("style.css?v=1.0.0") only screen and (min-width: 737px);
:root{
  --gold: #b7995e;
  --gold-dark: #a4874e;
  --ink: #1a1a1a;
  --black: #111111;
  --navy: #14161a;
  --text: #333333;
  --muted: #777777;
  --line: #e3e3e3;
  --bg-soft: #f7f6f3;
  --white: #ffffff;
  /* --font-jp: "Zen Kaku Gothic Antique", sans-serif;
  --font-en: "Jost", "Futura", "Avenir Next", sans-serif; */
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{color:var(--text);font-family:var(--font-jp);line-height:1.8;background:var(--white);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
ul{list-style:none}
.inner{max-width:1080px;margin:0 auto;padding:0 20px}

body{
	font-family:"Zen Kaku Gothic Antique", sans-serif;
}

.poppins{
	font-family: "Poppins", sans-serif;
	font-style: normal;
}

/* ===== Header ===== */
.header{position:sticky;top:0;z-index:100;background:var(--navy);color:#fff}
.header__inner{display:flex;align-items:center;gap:24px;max-width:1280px;margin:0 auto;padding:0 20px;height:72px}
.header__logos{display:flex;align-items:center;gap:18px;flex-shrink:0}
.logo-pier{display:flex;flex-direction:column;line-height:1.1}
.logo-pier__marina{font-family:Georgia,serif;font-style:italic;font-size:10px;color:#d8c69a;letter-spacing:.06em}
.logo-pier__name{font-family:var(--font-en);font-weight:700;font-size:18px;letter-spacing:.08em}
.logo-pier__tag{font-size:8px;letter-spacing:.34em;color:#bfbfbf}
.header__divider{width:1px;height:34px;background:rgba(255,255,255,.25)}
.logo-lib{display:flex;flex-direction:column;line-height:1.15}
.logo-lib__name{font-family:var(--font-en);font-weight:700;font-size:15px;letter-spacing:.14em}
.logo-lib__name::before{content:"◎ ";color:#fff}
.logo-lib__tag{font-size:8px;letter-spacing:.3em;color:#bfbfbf;padding-left:1.4em}
.gnav{margin-left:auto}
.gnav ul{display:flex;gap:28px}
.gnav a{font-size:13px;letter-spacing:.08em;padding:8px 0;position:relative;transition:opacity .25s}
.gnav a::after{content:"";position:absolute;left:0;bottom:2px;width:0;height:1px;background:var(--gold);transition:width .3s}
.gnav a:hover::after{width:100%}
.header__cta{flex-shrink:0;background:linear-gradient(135deg,#e8d9ac,#c9ab6a);color:var(--ink);font-size:13px;font-weight:700;letter-spacing:.06em;padding:12px 22px;border:1px solid #efe3bd;transition:opacity .25s}
.header__cta:hover{opacity:.85}
.menu-btn{display:none;margin-left:auto;background:none;border:none;cursor:pointer;width:44px;height:44px;position:relative;z-index:210}
.menu-btn span{display:block;width:26px;height:2px;background:#fff;margin:6px auto;transition:.3s}
.menu-btn.is-open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.menu-btn.is-open span:nth-child(2){opacity:0}
.menu-btn.is-open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}



/* ===== Breadcrumb ===== */
.breadcrumb{background:#fff;border-bottom:1px solid var(--line)}
.breadcrumb ol{display:flex;flex-wrap:wrap;gap:6px;max-width:1280px;margin:0 auto;padding:10px 20px;font-size:11px;color:var(--muted)}
.breadcrumb li:not(:last-child)::after{content:"›";margin-left:6px}
.breadcrumb a:hover{color:var(--gold)}

/* ===== Hero ===== */
/* .hero{
  inset:0;
  background:
 url(../img/top_pc.png) no-repeat center top;
  background-size:cover;background-position:center;
  height:100vh;
} */
.hero {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-image: url("../img/top_pc.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

@media screen and (max-width: 767px) {
  .hero {
    aspect-ratio: 9 / 16;
    background-image: url("../img/top_sp.png");
  }
}



.hero__inner{position:relative;max-width:1080px;margin:0 auto;padding:72px 20px 64px}
.hero__brands{position:absolute;top:40px;right:20px;display:flex;align-items:center;gap:28px}
.brand-mark{font-family:var(--font-en);font-weight:700;letter-spacing:.18em;font-size:14px;text-align:center;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.brand-mark small{display:block;font-size:8px;letter-spacing:.42em;font-weight:400}
.brand-mark--nautique{background:#111;border:1px solid rgba(255,255,255,.3);padding:8px 14px}
.brand-mark--nautique::before{content:"◢ ";color:#e02b2b}
.hero__label{display:inline-block;background:#000;font-family:var(--font-en);font-size:11px;letter-spacing:.32em;padding:7px 18px;margin-bottom:26px}
.hero__title{font-size:clamp(30px,4.6vw,52px);font-weight:700;line-height:1.5;letter-spacing:.04em;text-shadow:0 2px 18px rgba(0,0,0,.45)}
.hero__models{margin-top:26px;color:#e9d9ad;font-family:var(--font-en);font-size:clamp(15px,1.8vw,19px);letter-spacing:.06em;font-weight:500}
.hero__event{margin-top:6px;font-size:clamp(15px,1.8vw,19px);font-weight:700;letter-spacing:.1em}
.hero__lead{margin-top:22px;max-width:430px;font-size:13px;line-height:2.1;color:#e8e8e8}
.hero__badges{display:flex;gap:12px;margin-top:26px}
.badge{font-size:12px;font-weight:700;letter-spacing:.1em;padding:7px 16px;border:1px solid rgba(255,255,255,.85)}
.badge--fill{background:#000;border-color:#000}
.btn-gold{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:270px;margin-top:26px;background:linear-gradient(135deg,#d8bd82,#b3934f);color:#fff;font-size:15px;font-weight:700;letter-spacing:.14em;padding:17px 22px;transition:opacity .25s,transform .25s}
.btn-gold::after{content:"›";font-size:18px;font-weight:400}
.btn-gold:hover{opacity:.9;transform:translateX(2px)}

/* ===== Section common ===== */
.section{padding:35px 0}
.section--soft{background:var(--bg-soft)}
.section-title{text-align:center;font-size:clamp(20px,2.6vw,26px);font-weight:700;letter-spacing:.14em;color:var(--ink)}
.section-title::after{content:"";display:block;width:54px;height:8px;margin:16px auto 0;
  background:radial-gradient(circle at 25% 100%, transparent 6px, transparent 0) ;
  background:none;
  border-bottom:0;
  /* 波線 */
  -webkit-mask:none}
.wave{display:block;margin:0 auto 0;width:64px;height:10px;color:var(--gold)}

/* ===== Outline (開催概要) ===== */
.outline{margin-top:52px;display:grid;grid-template-columns:repeat(4,1fr)}
.outline__col{padding:6px 22px;border-left:1px solid var(--line);text-align:left}
.outline__col:first-child{border-left:none}
.outline__head{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--ink);letter-spacing:.08em;margin-bottom:14px}
.outline__head svg{width:17px;height:17px;color:var(--gold);flex-shrink:0}
.outline__body{font-size:14px;font-weight:700;color:var(--ink);line-height:2.05}
.outline__body .sub{display:block;font-size:12px;font-weight:400;color:var(--muted)}
.outline__body address{font-style:normal;font-size:12px;font-weight:400;color:var(--muted);margin-top:6px;line-height:1.9}
.outline__brandlogos{margin-top:16px;display:flex;flex-direction:column;gap:10px}
.mini-brand{font-family:var(--font-en);font-weight:700;font-size:13px;letter-spacing:.16em;color:var(--ink)}
.mini-brand small{display:block;font-size:7px;letter-spacing:.4em;font-weight:400}
.mini-brand--nautique{background:#111;color:#fff;align-self:flex-start;padding:6px 12px;font-size:12px}
.mini-brand--nautique::before{content:"◢ ";color:#e02b2b}
.outline__note{margin-top:20px;text-align:center;font-size:12px;color:var(--muted)}

/* ===== Features (違い) ===== */
.features{margin-top:28px;display:grid;grid-template-columns:repeat(4,1fr)}
.feature{padding:0 24px;border-left:1px solid var(--line);text-align:center}
.feature:first-child{border-left:none}
.feature__icon{width:56px;height:56px;margin:0 auto 20px;color:var(--gold)}
.feature__icon svg{width:100%;height:100%}
.feature__title{font-size:15px;font-weight:700;color:var(--ink);letter-spacing:.06em;margin-bottom:12px}
.feature__text{font-size:12.5px;color:var(--muted);line-height:2}

/* ===== Compare cards ===== */
.compare{margin-top:52px;display:grid;grid-template-columns:1fr 1fr;gap:32px}
.boat-card{background:#fff;border:1px solid var(--line);box-shadow:0 6px 24px rgba(0,0,0,.05);display:flex;flex-direction:column}
.boat-card__img{position:relative;aspect-ratio:16/10;overflow:hidden}
.boat-card__img--centurion{
  /* ▼ 実画像に差し替え: background-image:url('images/ri230.jpg') */
  background:radial-gradient(ellipse 70% 60% at 60% 45%,rgba(90,160,190,.55),transparent 70%),linear-gradient(155deg,#3c5666,#182732 70%,#0e161d)}
.boat-card__img--nautique{
  /* ▼ 実画像に差し替え: background-image:url('images/g23.jpg') */
  background:radial-gradient(ellipse 70% 60% at 45% 50%,rgba(160,170,150,.45),transparent 70%),linear-gradient(155deg,#4a5648,#20281f 70%,#11150f)}
.boat-card__brand{position:absolute;top:14px;left:14px;color:#fff;font-family:var(--font-en);font-weight:700;font-size:12px;letter-spacing:.18em;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.boat-card__brand small{display:block;font-size:7px;letter-spacing:.4em;font-weight:400}
.boat-card__brand--nautique{background:#111;padding:6px 12px;border:1px solid rgba(255,255,255,.25)}
.boat-card__brand--nautique::before{content:"◢ ";color:#e02b2b}
.boat-card__name{background:var(--black);color:#fff;text-align:center;font-family:var(--font-en);font-size:18px;font-weight:600;letter-spacing:.06em;padding:16px 12px;border-top:3px solid var(--gold)}
.boat-card__body{padding:26px 28px 30px;display:flex;flex-direction:column;flex:1}
.boat-card__lead{font-size:13.5px;font-weight:700;color:var(--ink);line-height:2;margin-bottom:18px}
.boat-card__list li{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--ink);padding:11px 0;border-bottom:1px dotted var(--line)}
.check{width:20px;height:20px;border-radius:50%;background:var(--gold);color:#fff;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;font-size:11px}
.btn-black{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:auto;background:var(--black);color:#fff;font-size:13px;font-weight:700;letter-spacing:.14em;padding:15px 20px;transition:opacity .25s}
.btn-black::after{content:"›";font-size:16px}
.btn-black:hover{opacity:.8}
.boat-card__list{margin-bottom:26px}

/* ===== Recommend ===== */
.recommend{margin-top:44px;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.recommend li{background:#fff;border:1px solid var(--line);display:flex;align-items:center;gap:12px;padding:20px 18px;font-size:13px;font-weight:700;color:var(--ink);line-height:1.7}
.recommend .check{width:26px;height:26px;font-size:13px}

/* ===== Message (dark split) ===== */
.message{background:var(--black);color:#fff}
.message__inner{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
.message__text{padding:80px 56px;display:flex;flex-direction:column;justify-content:center}
.message__title{font-size:clamp(22px,3vw,32px);font-weight:700;line-height:1.7;letter-spacing:.06em}
.message__body{margin-top:30px;font-size:13.5px;line-height:2.3;color:#d9d9d9;max-width:420px}
.message__img{min-height:340px;
  /* ▼ 実画像に差し替え: background-image:url('images/cabin.jpg') */
  background:radial-gradient(ellipse 60% 55% at 55% 40%,rgba(150,165,175,.4),transparent 70%),linear-gradient(150deg,#4a5a66,#242f38 60%,#141b21);
  background-size:cover;background-position:center}

/* ===== FAQ ===== */
.faq{margin-top:48px;max-width:860px;margin-left:auto;margin-right:auto}
.faq__item{background:#fff;border:1px solid var(--line);margin-bottom:14px}
.faq__q{width:100%;display:flex;align-items:center;gap:14px;background:none;border:none;cursor:pointer;text-align:left;font-family:inherit;font-size:14px;font-weight:700;color:var(--ink);padding:20px 56px 20px 22px;position:relative;letter-spacing:.04em}
.faq__q .qmark{width:26px;height:26px;border-radius:50%;background:var(--gold);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0}
.faq__q::after{content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);width:24px;height:24px;border:1px solid #ccc;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;color:var(--muted);font-weight:400;transition:transform .3s,background .3s}
.faq__item.is-open .faq__q::after{content:"−";background:var(--gold);border-color:var(--gold);color:#fff}
.faq__a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.faq__a p{padding:0 22px 22px 62px;font-size:13px;color:var(--muted);line-height:2}

/* ===== Bottom CTA ===== */
.cta{position:relative;color:#fff;background:var(--black);overflow:hidden}
.cta__bg{position:absolute;inset:0;
  /* ▼ 実画像に差し替え: background-image:url('images/cta.jpg') */
  background:radial-gradient(ellipse 55% 60% at 75% 45%,rgba(140,160,120,.35),transparent 70%),linear-gradient(120deg,#1c2a24 0%,#0f1a15 55%,#0a0f0c 100%);
  background-size:cover;background-position:center}
.cta__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.75),rgba(0,0,0,.2))}
.cta__inner{position:relative;max-width:1080px;margin:0 auto;padding:40px 20px;display:flex;}
.cta__title{font-size:clamp(24px,3.4vw,36px);font-weight:700;line-height:1.7;letter-spacing:.06em}
.cta__sub{margin-top:20px;color:#e9d9ad;font-size:14px;font-weight:700;letter-spacing:.16em}
.cta .btn-gold{max-width:300px;min-width:260px;margin-top:0}

/* ===== Footer ===== */
.footer{background:var(--black);color:#fff;border-top:1px solid rgba(255,255,255,.08)}
.footer__top{max-width:1280px;margin:0 auto;padding:44px 20px 30px;display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;border-bottom:1px solid rgba(255,255,255,.12)}
.footer__brands{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.footer__bottom{max-width:1280px;margin:0 auto;padding:34px 20px 26px;}
.footer__company{font-size:12px;color:#cfcfcf;line-height:2}
.footer__company strong{display:block;font-size:13px;color:#fff;margin-bottom:6px}
.footer__navwrap{display:flex;flex-direction:column;align-items:flex-end;gap:22px}
.fnav{display:flex;flex-wrap:wrap;gap:0;font-size:12px}
.fnav li{padding:0 14px;border-left:1px solid rgba(255,255,255,.25)}
.fnav li:first-child{border-left:none}
.fnav a:hover{color:var(--gold)}
.footer__sns{display:flex;gap:16px}
.footer__sns a{width:22px;height:22px;color:#fff;transition:color .25s}
.footer__sns a:hover{color:var(--gold)}
.footer__sns svg{width:100%;height:100%}
.footer__copy{max-width:1280px;margin:20px auto 0;padding:0 20px;font-size:10px;color:#8a8a8a;text-align:center;letter-spacing:.06em}

main .try a{
	background-image: -webkit-linear-gradient(315deg, #704308 0%, #ffce08 40%, #e1ce08 60%, #704308 100%);
	background-image: linear-gradient(135deg, #704308 0%, #ffce08 40%, #e1ce08 60%, #704308 100%);	display: block;
	color: #000;
	position: relative;
	padding: 20px 0 20px 0;
	text-align: center;
}
main .try a:hover{
	opacity: 1.0;
}
main .try a:before{
	content: "";
	background:#DDC100 ;
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: 0;
	z-index: 1;
	-webkit-transition: all 0.7s cubic-bezier(0.645, 0.045, 0.355, 1);
	-moz-transition: all 0.7s cubic-bezier(0.645, 0.045, 0.355, 1);
	-o-transition: all 0.7s cubic-bezier(0.645, 0.045, 0.355, 1);
	transition: all 0.7s cubic-bezier(0.645, 0.045, 0.355, 1);
}
main .try a:hover:before{
	left: 0;
	right: auto;
	width: 100%;
	
}
main .try a .title{
	position: relative;
	z-index: 2;
	margin-bottom: 30px;
}

main .try a .title span{
	color: #eee;
	font-size: 180px;
	opacity: 0.5;
}
main .try a .title h2{
	line-height: 1.4;
	font-weight: bold;
	font-size: 34px;
	color: #000;
}

main .try a .round{
	position: relative;
	z-index: 2;
	max-width: 500px;
	margin: 0 auto;
	background: #000;
	color: #fff;
	border-radius: 50px;
	padding: 5px 0 5px 0;
}
main .try a .round span{
	display: block;
	font-size: 24px;
	font-weight: bold;
	background-image: -webkit-linear-gradient(315deg, #b8751e 0%, #ffce08 37%, #fefeb2 47%, #fafad6 50%, #fefeb2 53%, #e1ce08 63%, #b8751e 100%);
    background-image: linear-gradient(135deg, #b8751e 0%, #ffce08 37%, #fefeb2 47%, #fafad6 50%, #fefeb2 53%, #e1ce08 63%, #b8751e 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
main .try a .round:after{
	content: "";
	display: block;
	width: 10px;
	height: 10px;
	border-bottom: 1px solid #ffce08;
	border-right: 1px solid #ffce08;
	position: absolute;
	right: 35px;
	margin-top: -4px;
	top: 50%;
	transform: rotate(-45deg);
}

.fixBtn{
	position: fixed;
	right: 20px;
	bottom: 60px;
	z-index: 5;
}
.fixBtn a{
	position: absolute;
	right: -0;
	bottom: 0;
	width: 172px;
	display: block;
	border: 2px solid #fff;
	border-radius: 100%;
	background: #FFE200;
}
.fixBtn .ivent{
	position: absolute;
	right: -0;
	bottom: 0;
	width: 172px;
	display: block;
	border: 2px solid #fff;
	border-radius: 100%;
	background: #FFE200;
	position: relative;
	line-height: 1.6;
	padding: 10px 0;
	display: none;
}
.fixBtn .ivent:after{
	content: "";
	display: block;
	width: 7px;
	height: 7px;
	border-bottom: 1px solid #000;
	border-right: 1px solid #000;
	position: absolute;
	right: 25px;
	margin-top: -3px;
	top: 50%;
	transform: rotate(-45deg);
}

.fixBtn a .ico{
	padding-bottom: 100%;
	position: relative;
}
.fixBtn a .ico .absolute{
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	text-align: center;
	line-height: 1.6;
}
.fixBtn a .ico .absolute span{
	display: block;
	color: #000;
	font-weight: bold;
	font-size: 24px;
}
.fixBtn a .ico .absolute em{
	color: #000;
	font-style: normal;
}

.boat-card__img--centurion{
	background: url(../img/1.png) no-repeat center top;
	background-size:contain;
	background-position:center;
}
.boat-card__img--nautique{
	background: url(../img/2.png) no-repeat center top;
	background-size:contain;
	background-position:center;
}
.boat-card__body{
	padding:10px 28px;
}


/* ===== Responsive ===== */
@media (max-width:1024px){
  .gnav ul{gap:18px}
  .gnav a{font-size:12px}
}
@media (max-width:900px){
  .gnav,.header__cta{display:none}
  .menu-btn{display:block}
  .header--menuopen .gnav{display:block;position:fixed;inset:0;background:rgba(17,17,17,.97);padding:110px 32px 40px;z-index:200}
  .header--menuopen .gnav ul{flex-direction:column;gap:0}
  .header--menuopen .gnav a{display:block;font-size:16px;padding:18px 4px;border-bottom:1px solid rgba(255,255,255,.12)}
  .header--menuopen .header__cta{display:flex;position:fixed;left:32px;right:32px;bottom:40px;z-index:200;justify-content:center}
  .outline{grid-template-columns:1fr 1fr;gap:36px 0}
  .outline__col:nth-child(3){border-left:none}
  .features{grid-template-columns:1fr 1fr;gap:44px 0}
  .feature:nth-child(3){border-left:none}
  .recommend{grid-template-columns:1fr 1fr}
  .message__inner{grid-template-columns:1fr}
  .message__img{order:-1;min-height:260px}
  .message__text{padding:56px 28px}
}
@media (max-width:640px){

.fixBtn a{
	width:100px;
}

.fixBtn a .ico .absolute span{
	font-size:12px;
}

.fixBtn a .ico .absolute em{
	font-size:10px;
}

.fixBtn {
        position: fixed;
        left: 0px;
        right: 0;
        bottom: 0px;
        z-index: 5;
}
.fixBtn a .ico .absolute em {
        color: #000;
        display: block;
        text-align: center;
        font-style: normal;
}

main .try a .title{
margin-bottom:15px;
}

main .try a .title h2{
	font-size: 12px;
}
main .try a .round span{
	font-size:14px;
}
main .try a .round{
	position: relative;
    z-index: 2;
    max-width: 300px;
    margin: 0 auto;
    background: #000;
    color: #fff;
    border-radius: 50px;
    padding: 5px 0 5px 0;
}


.section-title::after{
	margin:0 auto;
}

.features{
	gap:10px;
}
.feature__icon{
	margin:0 auto;
}
.feature__title{
	margin-bottom:5px;
}

.footer__bottom{
	display:block;
}

.footer__copy{
	padding:0;
	margin:20px auto;
}


  .header__inner{height:62px}
  .logo-pier__name{font-size:15px}
  .logo-lib{display:none}
  .header__divider{display:none}
  .hero__inner{padding:56px 20px 52px}
  .hero__brands{position:static;justify-content:flex-start;margin-bottom:28px}
  .hero__lead{max-width:none}
  .btn-gold{max-width:none}
  .section{padding:28px 0}
  .outline{grid-template-columns:1fr;gap:0}
  .outline__col{border-left:none;border-top:1px solid var(--line);padding:24px 4px}
  .outline__col:first-child{border-top:none;padding-top:0}
  .features{grid-template-columns:1fr;gap:40px}
  .feature{border-left:none;padding:0}
  .compare{grid-template-columns:1fr;gap:26px}
  .recommend{grid-template-columns:1fr}
  .cta__inner{padding:64px 20px}
  .cta .btn-gold{min-width:0;width:100%}
  .footer__navwrap{align-items:flex-start}
  .fnav li{padding:4px 12px 4px 0;border-left:none}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
}