@charset "UTF-8";


:root{
  color-scheme: light;

  
  --c-navy-deep: #7A1016;
  --c-blue:      #E60012;
  --c-blue-ink:  #C2161B;
  --c-red:       #D51B1D;
  --c-red-cta:   #E60012;
  --c-ink:       #151921;
  --c-muted:     #5B6675;
  --c-pale:      #FFF6DA;
  --c-line:      #F0DEC4;

  
  --lineA-top:    59.34%;   
  --lineA-bottom: 42.57%;   
  --lineB-top:    66.50%;   
  --lineC-bottom: 58.30%;   
  --vertex-x:     51.39%;   
  --vertex-y:     47.39%;

  
  --photo-w:    74.2%;
  --photo-left: 48.59%;
  --photo-top: -63.42%;

  --shadow-sm: 0 1px 2px rgba(90,16,20,.06);
  --shadow-md: 0 6px 18px rgba(90,16,20,.10);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  color:var(--c-ink);
  background:#fff;
  line-height:1.6;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ text-decoration:none; color:inherit; }
ul{ list-style:none; margin:0; padding:0; }
.fvico{ width:1em; height:1em; flex:none; }


.fv{
  container-type: inline-size;
  container-name: fv;
  
  --w: min(100cqw, 1240px, calc((100vh - 12px) * 1.585));
  --radius: calc(var(--w) * 0.78 / 100);
}



.fv-inner{
  width:100%;
  max-width:var(--w);
  margin-inline:auto;
  padding-inline:calc(var(--w) * 3.19 / 100);   
}


.fvnotice{
  height:calc(var(--w) * 3.713 / 100);
  min-height:34px;
  display:flex;
  align-items:center;
  background:var(--c-navy-deep);
  color:#FCEBC0;
}
.fvnotice .fv-inner{
  text-align:center;
  font-size:calc(var(--w) * 1.016 / 100);
  font-weight:500;
}



.fvnotice__br{ display:none; }
@media (max-width:520px){
  .fvnotice__br{ display:inline; }
  .fvnotice__comma{ display:none; }
}


.fvh{
  height:calc(var(--w) * 7.293 / 100);
  min-height:64px;
  display:flex;
  align-items:center;
  background:#fff;
  border-bottom:1px solid var(--c-line);
}
.fvh__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:calc(var(--w) * 1.6 / 100);
}
.fvh__brand{ display:flex; align-items:center; gap:calc(var(--w) * 1.10 / 100); min-width:0; }
.fvh__logo{ width:calc(var(--w) * 3.39 / 100); height:calc(var(--w) * 3.39 / 100); min-width:30px; min-height:30px; object-fit:contain; flex:none; }
.fvh__title{ font-size:calc(var(--w) * 2.344 / 100); font-weight:800; letter-spacing:.02em; white-space:nowrap; }
.fvh__sep{ width:1px; height:calc(var(--w) * 2.21 / 100); background:var(--c-line); flex:none; }
.fvh__area{
  display:inline-flex; align-items:center; gap:calc(var(--w) * .47 / 100);
  font-size:calc(var(--w) * 1.406 / 100); font-weight:700; color:var(--c-blue); white-space:nowrap;
}
.fvh__area .fvico{ font-size:calc(var(--w) * 1.56 / 100); }

.fvh__tel{ display:inline-flex; align-items:center; gap:calc(var(--w) * 1.02 / 100); flex:none; }
.fvh__tel-ico{
  width:calc(var(--w) * 2.60 / 100); height:calc(var(--w) * 2.60 / 100); min-width:26px; min-height:26px;
  display:grid; place-items:center;
  border-radius:calc(var(--w) * .59 / 100); background:var(--c-red-cta); color:#fff; flex:none;
}
.fvh__tel-ico svg{ width:56%; height:56%; }
.fvh__tel-body{ display:flex; flex-direction:column; line-height:1.25; }
.fvh__tel-num{ font-size:calc(var(--w) * 2.813 / 100); font-weight:900; letter-spacing:.01em; color:var(--c-ink); }
.fvh__tel-time{ font-size:calc(var(--w) * 1.016 / 100); font-weight:500; color:var(--c-muted); }


.fvhero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  height:calc(var(--w) * 55.67 / 100);          
  background:#fff;
}


.fvhero::before{
  content:"";
  position:absolute; top:0; bottom:0;
  left:50%; width:var(--w); translate:-50% 0; z-index:-2;
  background:var(--c-pale);
  clip-path:polygon(var(--lineA-top) 0, var(--lineB-top) 0, var(--vertex-x) var(--vertex-y));
}

.fvhero::after{
  content:"";
  position:absolute; top:0; bottom:0;
  left:50%; width:var(--w); translate:-50% 0; z-index:-2;
  background:var(--c-pale);
  clip-path:polygon(var(--vertex-x) var(--vertex-y), var(--lineC-bottom) 100%, var(--lineA-bottom) 100%);
}



.fvhero__media{
  position:absolute; top:0; bottom:0;
  left:calc(50% - var(--w) / 2);
  right:0;
  z-index:-1;
  clip-path:polygon(
    calc(var(--w) * 0.6650) 0,
    100% 0,
    100% 100%,
    calc(var(--w) * 0.5830) 100%,
    calc(var(--w) * 0.5139) var(--vertex-y));
}
.fvhero__media img{
  position:absolute;
  width:calc(var(--w) * 0.742);
  left:calc(var(--w) * 0.4859);
  top:var(--photo-top);
  height:auto;
  max-width:none;
}

.fvhero__inner{ height:100%; display:flex; align-items:flex-start; }
.fvhero__copy{
  padding-top:calc(var(--w) * 3.51 / 100);      
  width:min(calc(var(--w) * 70 / 100), 100%);   
}


.fvhero__badge{
  display:inline-block;
  background:var(--c-blue); color:#fff;
  font-size:calc(var(--w) * 1.406 / 100); font-weight:700; letter-spacing:.02em;
  padding:calc(var(--w) * .55 / 100) calc(var(--w) * 1.95 / 100);
  border-radius:999px;
  box-shadow:var(--shadow-sm);
}


.fvhero__title{
  margin:calc(var(--w) * .50 / 100) 0 0;        
  font-size:calc(var(--w) * 5.39 / 100);
  font-weight:900;
  line-height:1.24;         
  letter-spacing:.005em;
}
.fvhero__em-blue{ color:var(--c-blue-ink); }
.fvhero__em-red{ color:var(--c-red); }


.fvhero__sub{
  margin:calc(var(--w) * 1.37 / 100) 0 0;
  font-size:calc(var(--w) * 1.797 / 100);
  font-weight:700;
  color:#26313F;
  word-break:keep-all;
  overflow-wrap:break-word;
}


.fvhero__chips{ display:flex; flex-wrap:wrap; gap:calc(var(--w) * 1.09 / 100); margin:calc(var(--w) * 1.90 / 100) 0 0; }
.fvchip{
  display:inline-flex; align-items:center; gap:calc(var(--w) * .86 / 100);
  background:#fff; border:calc(var(--w) * .12 / 100) solid #B9CDE6; border-radius:var(--radius);
  padding:calc(var(--w) * 1.17 / 100) calc(var(--w) * 1.88 / 100);
  font-size:calc(var(--w) * 1.406 / 100); font-weight:700;
  box-shadow:var(--shadow-sm);
  white-space:nowrap;
}
.fvchip .fvico{ font-size:calc(var(--w) * 2.03 / 100); color:var(--c-blue); }

.fvhero__note{ margin:calc(var(--w) * .83 / 100) 0 0; font-size:calc(var(--w) * 1.094 / 100); color:var(--c-muted); }


.fvhero__achv{
  display:inline-flex; align-items:center; gap:calc(var(--w) * .94 / 100);
  margin:calc(var(--w) * 1.39 / 100) 0 0;   
  background:rgba(235,242,253,.92);
  border:1px solid #CBDCF3; border-radius:var(--radius);
  padding:calc(var(--w) * 1.17 / 100) calc(var(--w) * 2.34 / 100);
  font-size:calc(var(--w) * 1.641 / 100); font-weight:700;
  white-space:nowrap;
}
.fvhero__achv .fvico{ font-size:calc(var(--w) * 2.34 / 100); color:var(--c-blue); }
.fvhero__achv strong{ font-size:calc(var(--w) * 2.344 / 100); font-weight:900; color:var(--c-blue-ink); }


.fvhero__cta{
  display:flex; flex-wrap:wrap;
  gap:calc(var(--w) * 1.56 / 100);
  margin:calc(var(--w) * 1.50 / 100) 0 0;
  width:min(calc(var(--w) * 67.2 / 100), 100%);  
}
.fvbtn{
  flex:1 1 0; min-width:0;
  display:inline-flex; align-items:center; justify-content:center; gap:calc(var(--w) * 1.25 / 100);
  min-height:calc(var(--w) * 7.66 / 100);
  padding:calc(var(--w) * 1.09 / 100) calc(var(--w) * 2.0 / 100);
  border-radius:var(--radius);
  color:#fff; font-weight:800;
  box-shadow:var(--shadow-md);
  transition:transform .15s ease, filter .15s ease;
}
.fvbtn:hover{ transform:translateY(-1px); filter:brightness(1.05); }
.fvbtn .fvico{ font-size:calc(var(--w) * 2.34 / 100); }
.fvbtn__body{ display:flex; flex-direction:column; line-height:1.3; font-size:calc(var(--w) * 1.641 / 100); word-break:keep-all; }
.fvbtn__body small{ font-size:calc(var(--w) * 1.094 / 100); font-weight:500; opacity:.92; }
.fvbtn--tel{ background:var(--c-red-cta); }
.fvbtn--web{ background:var(--c-blue); }


.preview-note{
  margin:0; padding:22px 20px;
  background:#F4F6F9; border-top:1px dashed #C3CBD6;
  color:#7A8496; font-size:12.5px; text-align:center;
  word-break:keep-all; overflow-wrap:break-word;
}


@media (max-width:900px){
  :root{ --radius:10px; }

  .fv-inner{ padding-inline:20px; }

  .fvnotice{ height:auto; min-height:0; }
  .fvnotice .fv-inner{ padding-block:10px; font-size:12.5px; }

  .fvh{ height:auto; min-height:0; }
  .fvh__inner{ flex-wrap:wrap; gap:10px; padding-block:12px; }
  .fvh__logo{ width:38px; height:38px; }
  .fvh__title{ font-size:clamp(15px,4.2vw,20px); }
  .fvh__sep{ display:none; }
  .fvh__area{ font-size:clamp(12px,3.4vw,15px); gap:4px; }
  .fvh__area .fvico{ font-size:15px; }
  
  .fvh__tel{ display:none; }

  
  .fvhero{ height:auto; display:block; background:linear-gradient(180deg,#fff 0%,var(--c-pale) 100%); }
  .fvhero::before,.fvhero::after{ display:none; }
  
  
  .fvhero__media{
    position:relative; inset:auto; z-index:0;
    width:100%;
    height:auto;
    aspect-ratio:4 / 3;
    overflow:hidden;
    border-radius:12px;
    clip-path:none;
    
    background:linear-gradient(120deg,#F2F7FF 0%,var(--c-pale) 100%);
  }
  
  .fvhero__media img{
    position:absolute;
    top:0;
    left:27%;
    width:132%;         
    margin-top:-58.7%;  
    height:auto;
    max-width:none;
    
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 14%);
    mask-image:linear-gradient(90deg, transparent 0, #000 14%);
  }
}



@media (min-width:521px) and (max-width:900px){
  .fvhero__media{ aspect-ratio:16 / 9; }
  .fvhero__media img{
    width:95%;
    left:14.4%;
    margin-top:-41.32%;
  }
}


@media (max-width:900px){
  .fvhero__inner{ height:auto; display:block; }

  
  .fvhero__copy{
    width:auto; padding-top:22px; padding-bottom:28px;
    display:grid;
    grid-template-columns:1fr;
    grid-template-areas:"fv-badge" "fv-title" "fv-sub" "fv-photo" "fv-cta" "fv-note";
  }
  .fvhero__badge{ grid-area:fv-badge; justify-self:start; }
  .fvhero__title{ grid-area:fv-title; }
  .fvhero__sub  { grid-area:fv-sub; }
  .fvhero__media{ grid-area:fv-photo; }
  .fvhero__chips{ grid-area:fv-photo; }   
  .fvhero__cta  { grid-area:fv-cta; }
  .fvhero__note { grid-area:fv-note; }

  
  .fvhero__chips{
    position:relative; z-index:2;
    flex-direction:column;
    align-items:flex-start;
    align-self:center;
    justify-self:start;
    gap:8px;
    margin:0 0 0 12px;
    pointer-events:none;
  }
  .fvchip{
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(2px);
    box-shadow:0 2px 8px rgba(90,16,20,.10);
  }

  
  .fvhero__badge{ display:none; }
  .fvhero__title{ margin:0; font-size:clamp(27px,7.5vw,40px); }
  .fvhero__sub{ margin:12px 0 0; font-size:clamp(14px,3.9vw,17px); }
  .fvhero__chips{ gap:10px; margin:18px 0 0; }
  .fvchip{ padding:11px 15px; font-size:clamp(13px,3.6vw,16px); gap:8px; border-width:1.5px; }
  .fvchip .fvico{ font-size:20px; }
  .fvhero__note{ margin:12px 0 0; font-size:12px; }
  .fvhero__achv{ margin:14px 0 0; padding:11px 16px; font-size:clamp(13px,3.6vw,16px); gap:8px; }
  .fvhero__achv .fvico{ font-size:21px; }
  .fvhero__achv strong{ font-size:clamp(18px,5vw,22px); }
  
  .fvhero__cta{ width:auto; flex-direction:column; gap:11px; margin:18px 0 0; }
  .fvbtn{ flex:none; width:100%; min-height:70px; padding:12px; gap:10px; }
  .fvbtn .fvico{ font-size:22px; }
  .fvbtn__body{ font-size:clamp(15px,4.2vw,18px); word-break:auto-phrase; }
  .fvbtn__body small{ display:block; font-size:12px; }
  .fvbtn .fvico{ font-size:22px; }
}

@media (prefers-reduced-motion:reduce){
  .fvbtn{ transition:none; }
  .fvbtn:hover{ transform:none; }
}