#top h3 {
  font-family: shippori-mincho, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: clamp(18px, 1.2vw, 1.2vw);
  line-height: 1em;
  text-align: left;
  color: #7f7f7f;
  width: 68vw;
  margin: 0px auto 0 auto;
}
#top h3 b {
  color: #131d3d;
  font-size: clamp(22px, 2vw, 2vw);
  line-height: 1.5em;
  font-family: proxima-sera, sans-serif;
  font-weight: 200;
  font-style: normal;
  letter-spacing: 0.05em;
}
#top .view_bt {
  width: 20vw;
  margin: 0px auto 0 auto;
}
#top .view_bt a {
  background-color: #111;
  color: #FFF;
  border-radius: 100vh;
  display: block;
  text-align: center;
  text-decoration: none;
  font-size: clamp(14px, 1.5vw, 1.5vw);
  line-height: 1.5em;
  padding: 0.2em 0 0.3em 0;
}
#top .view_bt a:hover {
  background-color: #555;
}
/* =========================================================
メインビジュアル
   ========================================================= */

/* ===== Vars ===== */
:root{
  --mvH: 80vh;
  --sideW: 20%;
  --sideMin: 220px;
  --dur: 5.2s;
  --gap: .2s;
  --scaleFrom: 1.18;
  --scaleTo: 1.00;
  --txt48: clamp(28px, 3vw, 48px);
  --sideDelayTitle: .55s;
}

/* ===== MV layout ===== */
.mv{
  display:flex;
  width:100%;
  height:var(--mvH);
  overflow:hidden;
  background:#000;
}
.mv__visual{
  position:relative;
  width:calc(100% - var(--sideW));
  height:100%;
  overflow:hidden;
  background:#000;
}
.mv__zoom{
  position:absolute;
  inset:0;
  z-index:1;
}

/* 画像（intro/captionより下） */
.mv__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  opacity:0;
  transform-origin:center;
  will-change: opacity, transform;
  z-index:1;
}

/* caption / intro8 は前面 */
.mv__caption{ z-index:5; }
.mv__intro8{ z-index:6; }

/* ===== keyframes ===== */
@keyframes fadeOnce{
  0%{opacity:0;}
  15%{opacity:1;}
  85%{opacity:1;}
  100%{opacity:0;}
}
@keyframes fadeOnceFirstSlow{
  0%   { opacity:0; }
  50%  { opacity:1; }
  88%  { opacity:1; }
  100% { opacity:0; }
}
@keyframes fadeHold{
  0%{opacity:0;}
  15%{opacity:1;}
  100%{opacity:1;}
}
@keyframes zoomOut{
  from{ transform: scale(var(--scaleFrom)); }
  to  { transform: scale(var(--scaleTo)); }
}

/* ★PCはJSで --d0..--d6 / --mv8Start を作る前提 */
.mv__img--1{ animation: fadeOnceFirstSlow var(--dur) linear var(--d0,0s) both, zoomOut var(--dur) linear var(--d0,0s) both; }
.mv__img--2{ animation: fadeOnce         var(--dur) linear var(--d1,0s) both, zoomOut var(--dur) linear var(--d1,0s) both; }
.mv__img--3{ animation: fadeOnce         var(--dur) linear var(--d2,0s) both, zoomOut var(--dur) linear var(--d2,0s) both; }
.mv__img--4{ animation: fadeOnce         var(--dur) linear var(--d3,0s) both, zoomOut var(--dur) linear var(--d3,0s) both; }
.mv__img--5{ animation: fadeOnce         var(--dur) linear var(--d4,0s) both, zoomOut var(--dur) linear var(--d4,0s) both; }
.mv__img--6{ animation: fadeOnce         var(--dur) linear var(--d5,0s) both, zoomOut var(--dur) linear var(--d5,0s) both; }
.mv__img--7{ animation: fadeOnce         var(--dur) linear var(--d6,0s) both, zoomOut var(--dur) linear var(--d6,0s) both; }

/* ★最後が黒くなる防止：8枚目は必ず保持 */
.mv__img--8{
  opacity:1; /* アニメが死んでも黒落ちしない保険 */
  animation:
    fadeHold var(--dur) linear var(--mv8Start,0s) both,
    zoomOut  var(--dur) linear var(--mv8Start,0s) both;
}

/* ===== caption ===== */
.mv__caption{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 4%;
  text-align:center;
  font-family:"Shippori Mincho", serif;
  font-size:var(--txt48);
  line-height:1.6;
  letter-spacing:.08em;
  opacity:0;
  pointer-events:none;
  color:#fff;
  text-shadow: 0 6px 18px rgba(0,0,0,.55);
}
.mv__caption > span{ display:block; max-width:1100px; }

@keyframes captionFade{
  0%{opacity:0; transform:translateY(12px);}
  22%{opacity:1; transform:none;}
  78%{opacity:1; transform:none;}
  100%{opacity:0; transform:translateY(-12px);}
}
.mv__caption--1{ animation: captionFade var(--dur) ease calc(var(--d0,0s) + 1.2s) both; }
.mv__caption--4{ animation: captionFade var(--dur) ease calc(var(--d3,0s) + 0.6s) both; }
.mv__caption--7{ animation: captionFade var(--dur) ease calc(var(--d6,0s) + 0.6s) both; }

/* ===== intro8（PCで必ず中央＆前面） ===== */
.mv__intro8{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  pointer-events:none;
  text-shadow: 0 6px 18px rgba(0,0,0,.55);
}
.mv__intro8Inner{ width:min(92%, 1100px); }

.mv__intro8Line{
  display:block;
  width:min(560px, 72%);
  height:1px;
  margin:0 auto;
  background:rgba(255,255,255,.65);
  transform-origin:center;
  opacity:0;
  transform: scaleX(.3);
}
.mv__intro8Title{
  margin:14px 0;
  font-family:"Shippori Mincho", serif;
  font-size:clamp(18px, 1.6vw, 24px);
  letter-spacing:.22em;
  opacity:0;
  transform: translateY(10px);
  color:#fff;
}
.mv__intro8Sub{
  margin-top:18px;
  font-family:"Shippori Mincho", serif;
  font-size:var(--txt48);
  letter-spacing:.18em;
  opacity:0;
  transform: translateY(10px);
  color:#fff;
}

@keyframes lineIn{ to{ opacity:1; transform: scaleX(1); } }
@keyframes itemInSlow{
  from{ opacity:0; transform: translateY(8px); }
  to  { opacity:1; transform: translateY(0); }
}

.mv__intro8Line--top{    animation: lineIn .8s ease calc(var(--mv8Start,0s) + .45s) both; }
.mv__intro8Line--bottom{ animation: lineIn .8s ease calc(var(--mv8Start,0s) + .95s) both; }
.mv__intro8Title{        animation: itemInSlow 1.8s cubic-bezier(0.22,1,0.36,1) calc(var(--mv8Start,0s) + .9s) both; }
.mv__intro8Sub{          animation: itemInSlow 2.0s cubic-bezier(0.22,1,0.36,1) calc(var(--mv8Start,0s) + 1.6s) both; }

/* ===== side ===== */
.mv__side{
  width:var(--sideW);
  min-width:var(--sideMin);
  background:#000;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding:30px;
  color:#fff;
}

.mv__sideLogo,
.mv__sideTitle{
  opacity:0;
  transform: translateY(14px);
  will-change: opacity, transform;
}
@keyframes sideInSlow{
  from{ opacity:0; transform: translateY(6px); }
  to  { opacity:1; transform: translateY(0); }
}
.mv.is-side-animate .mv__sideLogo{
  animation: sideInSlow 1.6s cubic-bezier(0.22,1,0.36,1) 0s both;
}
.mv.is-side-animate .mv__sideTitle{
  animation: sideInSlow 1.6s cubic-bezier(0.22,1,0.36,1)
    calc(var(--sideDelayTitle) + 0.2s) both;
}

.mv__sideLogo{ width:100%; max-width:300px; height:auto; }
.mv__sideTitle{
  margin:0;
  font-family:"Shippori Mincho", serif;
  font-size:clamp(18px,1.8vw,28px);
  letter-spacing:.14em;
}

/* ===== PC小さめ（900px以下） ===== */
@media (max-width:900px){
  .mv{ flex-direction:column; height:auto; }
  .mv__visual{ width:100%; height:var(--mvH); }
  .mv__side{ width:100%; min-width:0; padding:20px 0; }
  .mv__sideLogo{ max-width:360px; }
}

.mv .soldout {
    background-color: #9F3020;
    color: #FFF;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: clamp(18px,2vw,2vw);
    line-height: 1.5em;
    width: 35%;
    height: 4rem;
    padding: 0.2em 0 0.2em 0;
    border: 1px solid #FFFFFF;
    position: absolute;
    top: 12%;
    right: 0;
    bottom: 0;
    left: 2%;
    /* margin: auto; */
    z-index: 999;
}






#photo {
  background-color: #fff;
  padding: 5vw 0 0 0;
}
#photo h2 {
font-size: clamp(16px, 2.25vw, 36px);
line-height: 1.6em;
}
#photo h2 span {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
font-size: clamp(16px, 1.25vw, 20px);
margin-bottom: 1rem;
}
#photo h2 span::before,
#photo h2 span::after{
  content: "";
  flex: 1;
  max-width: 8rem;
  height: 1px;
  background: #333;
}
#photo dl {
display: flex;
flex-direction: column;
line-height: 1.6em;
font-size: clamp(16px, 1.25vw, 20px);
}
#photo dt {
margin-bottom: 1rem;
}
#photo dt span {
font-size: clamp(16px, 2.25vw, 36px);
}
#photo .image {
  padding: 5vw 0 0 0;
  line-height: 0;
}
#photo .image img {
  width: 100%;
  height: auto;
}
#price {
  background-image: url("../image/photo_bg.jpg");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  font-family: shippori-mincho, sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #FFF;
  padding: 3.5vw 0 3vw 0;
}
#price h4 {
 font-size: clamp(16px, 2vw, 32px);
  line-height: 1.7em;
  padding-bottom: 0.5em;
  color: #333;
}
#price h5 {
  font-size: clamp(16px, 1.5vw, 24px);
  line-height: 1.7em;
  background-color: #FFF;
  color: #333;
  margin: 20px auto 40px auto;
  display: block;
  width: 80%;
}
#price ul {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  width: 70%;
  margin: 0px auto 50px auto;
}
#price ul li {
  text-align: center;
  font-size: clamp(22px, 3.125vw, 3.125vw);
  line-height: 1.8em;
  display: block;
  width: calc(100% / 3);
  position: relative;
}
#price ul li i {
  font-style: normal;
  font-size: clamp(13px, 1.25vw, 1.25vw);
  line-height: 1.2em !important;
}
#price ul li b {
  font-size: 70px;
  line-height: 1;
}
#price ul li:after {
  content: "";
  position: absolute;
  top: 20px;
  bottom: 0;
  left: 0;
  width: 1px;
  border-left: 1px solid #FFF;
  padding: 0;
}
#price ul li:nth-of-type(1):after {
  content: none;
}
#concept {
  padding: 3.5vw 0;
  background: #fff;
}
#concept .body {
    width: 80%;
    margin: 0px auto 0 auto;
    text-align: left;
}
#concept h3, #concept h3 b {
  color: #000;
  width: 100%;
}
#concept h4 {
font-size: clamp(16px, 2.875vw, 46px);
text-align: center;
color: #333;
padding: 4rem 0 1rem;
}
#concept h5 {
font-size: clamp(16px, 2vw, 32px);
text-align: center;
margin: 2rem 0;
line-height: 1.4em;
letter-spacing: 0.2em;
}
#concept .c-txt {
  margin: 2rem 0 4rem;
  font-size: clamp(16px, 1.125vw, 18px);
  letter-spacing: .12em;
  line-height: 1.8em;
  text-align: center;
  color: #333;
}

#concept .c-tiles {
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
 justify-content: space-between;
  padding: 0;
}

#concept .c-tiles li {
width: 48%;
margin-bottom: 2.5rem;
}

/* 各アイテム（画像＋テキスト） */
#concept .image-wrap{
  position: relative;
  overflow: hidden;
}

/* 画像を枠いっぱいに */
#concept .image-wrap img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#concept .image-wrap .text {
 position: absolute;
  inset: 0;
  display: flex;
  align-items: center; 
  justify-content: center; 
  font-size: clamp(16px, 2.875vw, 46px);
  font-weight: 700;
  color: #fff;
  text-align: center;
  text-shadow: 0 2px 6px rgba(0,0,0,.6);
  pointer-events: none;
}

/* スマホは1列に */
@media (max-width: 640px){
 #concept .c-tiles{
    width: 90%;
  }
 #concept .image-wrap{
    flex: 0 0 100%;
  }
}



#location {
  margin: 50px auto 0 auto;
  position: relative;
}
#location ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  width: 80%;
  margin: 4vw auto 4vw auto;
}
#location ul li {
  width: 30%;
  line-height: 0;
  margin-bottom: 2vw;
}
#location img {
  width: 100%;
  height: auto;
}
#location .body {
  width: 80%;
  margin: 0px auto 0 auto;
  text-align: left;
}
#location .wrap {
display: flex;
justify-content: center;
align-items: center;
} 
#location .left {
width: 40%;
}
#location .right {
width: 50%;
}
#location h3, #location h3 b {
  color: #000;
  width: 100%;
}
#location h4 {
 font-size: clamp(16px, 2.25vw, 36px);
    line-height: 1.5em;
    font-family: shippori-mincho, sans-serif;
    font-weight: 500;
    font-style: normal;
    padding: 1em 0 1em 0;
    letter-spacing: 0.2em;
}
#location p {
  color: #333;
  font-size: clamp(16px, 1.125vw, 18px);
  line-height: 1.7em;
  padding: 0 0 50px 0;
}
#location p.en {
  font-size: clamp(14px, 1.5vw, 1.5vw);
  line-height: 1.5em;
  padding: 0 0 1em 0;
}
#location .view_bt {
  margin: 0px auto 70px 0;
}
#location .lacationmap {
  display: block;
  line-height: 0;
  margin-bottom: 2rem;
}
#location .location_photo {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
width: 100%;
}
#location .location_photo li {
width: 24%;
margin-bottom: 1.5rem;
}
#location .shoplogo {
width: 40%;
margin: 0 auto;
display: flex;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
gap: 1rem;
}
#location .shoplogo li {
width: auto!important;
height: auto!important;
}

/* 2カラム */
#location .photo-grid{
  list-style: none;
  padding: 0;
  margin: 0 0 2rem 0;
  display: flex;
  gap: 16px;
  width: 100%;
}

/* 左右カラム */
#location .col{
  flex: 1;
  min-width: 0;

  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 左列：縦2段を同じ高さにする */
#location .col-left .item{
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

/* 右列：上(03) + 下(04/05) の縦2段 */
#location .col-right .item-big {
    flex: 1.15;
    overflow: hidden;
    min-height: 0;
    margin-top: -2.0rem;
    margin-bottom: 0.5rem;
}

#location .col-right .row {
    flex: 0.85;
    display: flex;
    gap: 16px;
    min-width: 0;
    min-height: 0;
    margin-top: -2rem;
}

#location .item-small{
  flex: 1;
  min-width: 0;
  overflow: hidden;
  min-height: 0;
}

/* ★ここが最重要：#location img の height:auto を、このレイアウト内だけ上書き */
#location .photo-grid .item img,
#location .photo-grid .item-small img{
  width: 100%;
  height: 100% !important; /* ← height:auto を潰す */
  object-fit: cover;       /* 枠いっぱいに（トリミング） */
  object-position: center 45%; /* ←上下カットを抑えつつ微調整 */
  display: block;
}

#location .item-big{
  overflow: hidden;
  position: relative;
}

/* 画像を上下2remずつカット */
#location .item-big img{
width: 100%;
  height: auto;
  clip-path: inset(2rem 0 2rem 0);
}

/* スマホ：1カラム */
@media (max-width: 768px){
  .body{ width: 90%; }

  #location .photo-grid{
    flex-direction: column;
  }

  #location .col-right .row{
    flex-direction: column;
  }

  /* SPは自然高さでOKに戻す */
  #location .photo-grid .item img,
  #location .photo-grid .item-small img{
    height: auto !important;
    object-fit: cover;
  }
}

.lacationmap3 {
width: 80%;
margin: 0 auto;
margin-bottom: 4rem;
}


#plan {
  padding: 8vw 0 0 0;
}
#plan .body {
  width: 80%;
  margin: 0px auto 0 auto;
  text-align: left;
}
#plan h3 b {
    color: #131d3d;
    font-size: clamp(22px, 2vw, 2vw);
    line-height: 1.5em;
    font-family: proxima-sera, sans-serif;
    font-weight: 200;
    font-style: normal;
    letter-spacing: 0.05em;
}
#plan h4 {
  color: #111;
  font-size: clamp(22px, 2.5vw, 2.5vw);
  line-height: 1.5em;
  padding: 1em 0em 1em 0em;
  margin-bottom: 0;
  width: 100%;letter-spacing: 0.2em;
  text-align: center;
}
#plan #title {

}
#plan #title .box {
  width: 75vw;
  margin: 0px auto 0 auto;
  color: #FFF;
  padding: 3vw 0 3vw 0;
}

#plan #title .box p {
  font-size: clamp(16px, 1.5vw, 1.5vw);
  line-height: 1.8em;
    color: #111;
}
#point {
  width: 80%;
  max-width: 1200px;
  margin: 5vw auto 10vw auto;
}
#point dl {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
#point dl dd {
  font-family: shippori-mincho, sans-serif;
  font-weight: 400;
  font-style: normal;
  width: 32%;
  margin: 0px auto 20px auto;
  text-decoration: none;
  position: relative;
}
#point dl dd h5 {
  font-size: clamp(16px, 1.1vw, 0.8vw);
  line-height: 1.2em;
  display: block;
  color: #FFF;
  background-color: #111111;
  padding: 0.6em 1em 0.6em 1em;
}
#point dl dd p {
  font-size: clamp(14px, 0.9vw, 1.1vw);
  line-height: 1.7em;
  text-align: left;
  padding: 0.6em 0em 0.6em 0em;
}
#point dl dd img {
  width: 50%;
  margin: 0 auto;
}
#point .plan_image {
max-width: 1200px;
margin: 2vw auto 4vw auto;
}
#point .plan_image img {
width: 100%;
height: auto;
}

#plan .view_bt {
  width: 20vw;
  margin: 0px auto 0 auto;
}
#plan .view_bt a {
  background-color: #111;
  color: #FFF;
  border-radius: 100vh;
  display: block;
  text-align: center;
  text-decoration: none;
  font-size: clamp(14px, 1.5vw, 1.5vw);
  line-height: 1.5em;
  padding: 0.2em 0 0.3em 0;
}
#plan .view_bt a:hover {
  background-color: #555;
}
/*
#point {
width:80%;
max-width: 1200px;
margin: 5vw auto 0 auto;
}
#point dl {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
#point dl dd {
width: 32%;
font-size: clamp(14px,1.2vw,1.2vw);
line-height: 1.2em;
display: block;
margin: 0px auto 20px auto;
color: #FFF;
text-decoration: none;
border-radius: 100vh;
padding: 0.6em 0 0.6em 0;
position: relative;
font-family: shippori-mincho, sans-serif;
font-weight: 400;
font-style: normal;
background-color: #131d3d;
}
#point dl dd:nth-of-type(even) {
background-color: #111111;
}
*/
#plan .madori {
  text-align: left;
  width: 80%;
  max-width: 1200px;
  margin: 3vw auto 0 auto;
  border: 1px solid #CCCCCC;
  padding: 4em 2em 4em 2em;
  box-sizing: border-box;
}
#plan .madori ul {
  margin-bottom: 30px;
}
#plan .madori ul li {
  text-align: center;
  font-size: clamp(18px, 1.5vw, 1.8vw);
  line-height: 1.7em;
  font-weight: 500;
  font-style: normal;
}
#plan .madori ul li.price {
  font-size: clamp(14px, 1.5vw, 1.5vw);
  line-height: 1.5em;
}
#plan .madori ul li.price b {
  font-size: clamp(20px, 3vw, 3vw);
  line-height: 1.5em;
  font-weight: 500;
  color: #FF0000;
}
#plan .madori ul li.image {
  width: 100%;
  margin: 2vw auto 0 auto;
}
#plan .madori ul li.image img {
  margin: 0px auto 0 auto;
  display: block;
}
#plan .movie {
  width: 75vw;
  margin: 4vw auto 0 auto;
}
#plan #title2 {
  background-image: url("../image/plan_title2.jpg");
  background-position: center center;
  background-size: cover;
  margin-top: 4vw;
  padding: 6vw 0 6vw 0;
  color: #FFF;
}
#plan #title2 h4 {
  font-size: clamp(20px, 3vw, 3vw);
  line-height: 1.5em;
  padding-bottom: 0.7em;
}
#plan #title2 p {
  font-size: clamp(16px, 1.4vw, 1.4vw);
  line-height: 1.8em;
}
#plan ul.detail {
  width: 80%;
  margin: 6vw auto 0 auto;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}
#plan ul.detail li {
  text-align: left;
  width: 45%;
}
#plan ul.detail img {
  width: 100%;
  height: auto;
}
#plan ul.detail h5 {
  font-size: clamp(18px, 1.8vw, 1.8vw);
  line-height: 1.5em;
  padding: 0.3em 0 0.3em 0;
}
#plan ul.detail p {
  font-size: clamp(14px, 1vw, 1vw);
  line-height: 1.8em;
}
#plan .view_bt {
  margin: 3vw auto 0 auto;
}
#features {
  margin: 6vw auto 0 auto;
}
#features .image {
  background-image: url("../image/features_title.jpg");
  background-position: center top;
  background-size: cover;
  margin: 3vw auto 0 auto;
  display: block;
  height: 43vw;
  position: relative;
}
#features .image h4 {
  text-align: left;
  font-size: clamp(24px, 4vw, 4vw);
  line-height: 1.5em;
  position: relative;
  top: 6vw;
  left: 10%;
}
#features .box {
  background-color: #131d3d;
  width: 100%;
}
#features .box p {
  text-align: center;
  color: #FFF;
  font-size: clamp(18px, 1.7vw, 1.7vw);
  line-height: 1.8em;
  padding: 2.5vw 0 2.5vw 0;
}
#features .body {
  background-image: url("../image/features_bg.jpg");
  background-repeat: repeat-y;
  background-size: 100%;
  padding: 5vw 0 6vw 0;
}
#features .body ul {
  width: 80%;
  margin: 0px auto 3vw auto;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}
#features .body ul li {
  line-height: 0;
}
#features .body ul:nth-of-type(1) li {
  width: 32%;
}
#features .body ul:nth-of-type(2) li {
  width: auto;
  padding: 0 1% 0 1%;
  box-sizing: border-box;
}
#features .body ul:nth-of-type(3) li {
  width: auto;
  padding: 0 1% 0 1%;
  box-sizing: border-box;
}
#features .body ul li p {
  padding: 10px 0 0 0;
}
#features .body ul li img {
  width: 100%;
  height: auto;
}
#features .body ul li p img {
  width: auto;
  height: 20px;
}
#features .view_bt {
  margin: 0px auto 0 auto;
}
#quality {
  background-image: url("../image/qualty_p1.jpg");
  background-size: 50%;
  background-position: right bottom;
  padding: 7vw 0 6vw 0;
}
#quality h3 b {
    color: #131d3d;
    font-size: clamp(22px, 2vw, 2vw);
    line-height: 1.5em;
    font-family: proxima-sera, sans-serif;
    font-weight: 200;
    font-style: normal;
    letter-spacing: 0.05em;
}
#quality dl {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 80vw;
  margin: 0px auto 0 auto;
}
#quality dl dt {
  width: 50%;
  text-align: left;
}
#quality dl dt h4 {
  font-size: clamp(22px, 2.6vw, 2.6vw);
  line-height: 1.5em;
  font-family: shippori-mincho, sans-serif;
  font-weight: 500;
  font-style: normal;
  padding: 1em 0 1em 0;
}
#quality dl dt p {
  font-size: clamp(16px, 1.3vw, 1.3vw);
  line-height: 1.8em;
}
#quality dl dt ul {
  width: 31.25vw;
  margin: 3.5vw 0 3.5vw 0;
}
#quality dl dt ul li {
  text-align: center;
  background-color: #111111;
  outline: 1px solid rgb(99, 99, 99);
  outline-offset: -5px;
  font-size: clamp(14px, 1.3vw, 1.3vw);
  line-height: 1.5em;
  font-family: shippori-mincho, sans-serif;
  font-weight: 600;
  font-style: normal;
  /*background-image: url("../image/qualty_point.png");*/
  height: 3.75vw;
  color: #FFF;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (min-width:641px) and ( max-width:768px) {
#quality dl dt ul li {
padding: 0.5rem;
}
#point {
width: 90%;
}
}
#quality dl dd {
  width: 50%;
}
#quality .view_bt {
  margin: 0;
}
#quality .view_bt {
  width: 20vw;

}
#quality .view_bt a {
  background-color: #111;
  color: #FFF;
  border-radius: 100vh;
  display: block;
  text-align: center;
  text-decoration: none;
  font-size: clamp(14px, 1.5vw, 1.5vw);
  line-height: 1.5em;
  padding: 0.2em 0 0.3em 0;
}
#quality .view_bt a:hover {
  background-color: #555;
}
#message {
  background-image: url("../image/message.jpg");
  background-size: 50%;
  background-position: left bottom;
  padding: 15vw 0 15vw 0;
}
#message h3 b {
    color: #131d3d;
    font-size: clamp(22px, 2vw, 2vw);
    line-height: 1.5em;
    font-family: proxima-sera, sans-serif;
    font-weight: 200;
    font-style: normal;
    letter-spacing: 0.05em;
}
#message dl {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 75vw;
  margin: 0px auto 0 auto;
}
#message dl dt {
  width: 50%;
}
#message dl dd {
  width: 50%;
  text-align: left;
  padding: 0 0 0 4em;
  box-sizing: border-box;
}
#message dl dd h4 {
  font-size: clamp(22px, 2.6vw, 2.6vw);
  line-height: 1.5em;
  font-family: shippori-mincho, sans-serif;
  font-weight: 500;
  font-style: normal;
  padding: 1em 0 1em 0;
}
#message dl dd p {
  font-size: clamp(16px, 1.3vw, 1.3vw);
  line-height: 1.8em;
}

.para{
  position:relative;
  width:100%;
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;

  /* パララックスの肝 */
  background-attachment:fixed;
}
.para1{
height:60vh; 
  background-image:url("../image/para1.jpg");
}

.para2{
height:75vh; 
  background-image:url("../image/para2.jpg");
}