header #navi {
display: none;
}
/* =========================================================
メインビジュアル
   ========================================================= */

/* =========================
   SP MV（最小・安定版）
   目的：画像+captionは動く、8枚目で止まる、
        ラストでロゴ上＋intro8Sub下
   ========================= */

.mv{
  position:relative;
  width:100%;
  background:#000;
  overflow:hidden;
}
@media screen and (max-width:375px) {
.mv {
padding-bottom: 4rem;
}
}

/* 画像エリア */
.mv__visual{
  position:relative;
  width:100%;
  height:50vh;
  min-height:280px;
  overflow:hidden;
  background:#000;
}
.mv__zoom{
  position:absolute;
  inset:0;
}

/* 画像 */
.mv__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  opacity:0;
  will-change:opacity, transform;
}

@keyframes spFade{
  0%{opacity:0}
  15%{opacity:1}
  85%{opacity:1}
  100%{opacity:0}
}
@keyframes spZoom{
  from{ transform:scale(1.12); }
  to{ transform:scale(1); }
}
@keyframes spHold{
  0%{ opacity:0; }
  15%{ opacity:1; }
  100%{ opacity:1; }
}

/* step=5.4s 固定 */
.mv__img--1{ animation: spFade 5.2s linear 0s both,    spZoom 5.2s linear 0s both; }
.mv__img--2{ animation: spFade 5.2s linear 5.4s both,  spZoom 5.2s linear 5.4s both; }
.mv__img--3{ animation: spFade 5.2s linear 10.8s both, spZoom 5.2s linear 10.8s both; }
.mv__img--4{ animation: spFade 5.2s linear 16.2s both, spZoom 5.2s linear 16.2s both; }
.mv__img--5{ animation: spFade 5.2s linear 21.6s both, spZoom 5.2s linear 21.6s both; }
.mv__img--6{ animation: spFade 5.2s linear 27.0s both, spZoom 5.2s linear 27.0s both; }
.mv__img--7{ animation: spFade 5.2s linear 32.4s both, spZoom 5.2s linear 32.4s both; }
.mv__img--8{ animation: spHold 5.2s linear 37.8s both, spZoom 5.2s linear 37.8s both; }

/* caption（重ならない） */
.mv__caption{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  padding:0 6%;
  font-family:"Shippori Mincho", serif;
  font-size:clamp(16px, 4.8vw, 22px);
  line-height:1.6;
  letter-spacing:.06em;
  color:#fff;
  text-align:center;
  text-shadow:0 6px 18px rgba(0,0,0,.55);
  pointer-events:none;
  opacity:0;
  z-index:2;
}
@keyframes spCaptionInOut{
  0%{ opacity:0; transform:translateY(10px); }
  20%{ opacity:1; transform:none; }
  80%{ opacity:1; transform:none; }
  100%{ opacity:0; transform:translateY(-10px); }
}
.mv__caption--1{ animation: spCaptionInOut 5.2s ease 1.0s both; }
.mv__caption--4{ animation: spCaptionInOut 5.2s ease 16.4s both; }
.mv__caption--7{ animation: spCaptionInOut 5.2s ease 31.8s both; }

/* intro8 の線/タイトルはSPでは完全に使わない */
.mv__intro8Line,
.mv__intro8Title{
  display:none !important;
}

/* =========================================================
   ラスト：ロゴ（上）＋ intro8Sub（下）
   ========================================================= */

/* 通常のサイド（下置き）をSPでは使わず、オーバーレイ化 */
.mv__side{
  display:flex;
  position:absolute;
  left:0;
  right:0;
  top:50%;
  transform:translateY(-62%); /* 全体の上下：上げたいなら -70% */

  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;

  background:transparent;
  padding:0;
  margin:0;
  z-index:10;
  pointer-events:none;

  opacity:0;
}

/* sideTitle は不要 */
.mv__sideTitle{ display:none !important; }

/* ロゴサイズ */
.mv__sideLogo{
  width:min(240px, 70vw);
  height:auto;
  display:block;
}

/* intro8Sub（地名）はロゴの下に来るよう、中央固定をやめる */
.mv__intro8Sub{
  position:absolute;      /* 既存のintro8センターに引っ張られないように固定 */
  left:0;
  right:0;
  top:50%;
  transform:translateY(-10%); /* ロゴの下に来る位置。下げたいなら 0%〜15% */
  margin:0;
  text-align:center;
  font-family:"Shippori Mincho", serif;
  font-size:clamp(18px, 5.2vw, 26px);
  letter-spacing:.12em;
  color:#fff;
  text-shadow:0 6px 18px rgba(0,0,0,.55);
display:block !important;
  opacity:0;
  z-index:11;
}

/* 表示アニメ（8枚目開始の少し後） */
@keyframes spLogoIn{
  from{ opacity:0; transform:translateY(16px); }
  to  { opacity:1; transform:translateY(0); }
}
@keyframes spSubIn{
  from{ opacity:0; transform:translateY(6px); }
  to  { opacity:1; transform:translateY(-10%); }
}

.mv__side{
  animation: spLogoIn 1.8s cubic-bezier(0.22,1,0.36,1) 38.6s both;
}
.mv__intro8Sub{
  animation: spSubIn 1.4s cubic-bezier(0.22,1,0.36,1) 39.0s both;
}

/* intro8 を基準にする */
.mv__intro8{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* ロゴ（side）を intro8 内に“重ねる” */
.mv__side{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -70%); /* ← ロゴを上へ */
  display:flex;
  justify-content:center;
  background:transparent;
  padding:0;
  margin:0;
  z-index:6;
}

/* サイドタイトルは使わない */
.mv__sideTitle{
  display:none;
}

/* ロゴサイズ */
.mv__sideLogo{
  width:min(240px, 70vw);
  height:auto;
}

/* sub はロゴの下に */
.mv__intro8Sub{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%, 5%) !important;
  opacity:0;
  animation: spSubFadeIn 1.4s cubic-bezier(0.22,1,0.36,1) 39.0s both !important;
}

/* MVを必ず基準にする */
.mv{ position:relative !important; }

/* intro8のレイアウト干渉を止める（grid/flexの残骸を無効化） */
.mv__intro8{
  position:absolute !important;
  inset:0 !important;
  display:block !important;
  pointer-events:none !important;
  z-index:9 !important;
}

/* ロゴ：中央基準で上へ */
.mv__side{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%, -75%) !important; /* ← ロゴを上に */
  display:block !important;
  background:transparent !important;
  padding:0 !important;
  margin:0 !important;
  z-index:10 !important;
  pointer-events:none !important;
}

/* ロゴサイズ */
.mv__sideLogo{
  width:min(240px, 70vw) !important;
  height:auto !important;
  display:block !important;
}

/* 不要なタイトルは消す */
.mv__sideTitle{ display:none !important; }

/* sub：中央基準でロゴの下へ */
.mv__intro8Sub{
position:absolute !important;
  left:50% !important;
  top:50% !important;

  /* ロゴとの重なり回避：下へ */
  transform:translate(-50%, 24%) !important;

  margin:0 !important;
  text-align:center !important;
  z-index:11 !important;

  /* 1行固定 */
  white-space: nowrap;
  max-width: 92vw;
  overflow: hidden;
  text-overflow: ellipsis;

  opacity:0;
  animation: spSubFadeIn 1.4s cubic-bezier(0.22,1,0.36,1) 39.0s both !important;
}

@keyframes spSubInFix{
  from{ opacity:0; transform:translate(-50%, 20%); }
  to  { opacity:1; transform:translate(-50%, 5%); }
}

@keyframes spSubFadeIn{
  from{ opacity:0; }
  to  { opacity:1; }
}

/* === sub をロゴの下に“確実に”離す === */
.mv__intro8Sub{
  left:50% !important;
  top: calc(50% + 75px) !important;   /* ← ここが効く：下げ量 */
  transform: translateX(-50%) !important; /* Y方向は使わない */
}
.mv__visual::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.25); /* ← 濃さ調整ポイント */
  z-index:1;
  pointer-events:none;
}

.mv .soldout {
    background-color: #9F3020;
    color: #FFF;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: clamp(20px,3vw,3vw);
    line-height: 1.5em;
    width: 90%;
    height: 2rem;
    padding: 0.5em 0 0.5em 0;
    border: 1px solid #FFFFFF;
    position: absolute;
    top: 0;
  right: 0;
  bottom: -20rem;
  left: 0;
  margin: auto;
  z-index: 999;
}
@media screen and (max-width:375px) {
.mv .soldout {
bottom: -16em;
}
}
#top {
text-align: center;
}
#top h3 {
font-family: shippori-mincho, sans-serif;
font-weight: 500;
font-style: normal;
font-size: 14px;
line-height: 1.5em;
text-align: center;
color: #7f7f7f;
width: 100%;
margin: 0px auto 0 auto;
}
#top h3 b {
color: #131d3d;
font-size: 26px;
line-height: 1.2em;
font-family: proxima-sera, sans-serif;
font-weight: 200;
font-style: normal;
letter-spacing: 0.05em;
}
#top .view_bt {
width: 40%;
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: 16px;
line-height: 1.5em;
padding: 0.2em 0 0.3em 0;
}
#top .view_bt a:hover {
background-color: #555;
}

#mainimage {
background-image: url("../image/mainimage.jpg");
background-size: cover;
background-position: center center;
text-align: center;
padding: 5vw 0 5vw 0;
}
#mainimage .box {
/*background-color: rgba(22, 59, 30,0.7);*/
background-color:#111111;
color: #FFF;
font-family: shippori-mincho, sans-serif;
font-weight: 400;
font-style: normal;
padding: 1em;
width: 70%;
margin: 0px auto 0 auto;
box-sizing: border-box;
display: block;
}
#mainimage .box h2 {
font-size: 18px;
line-height: 1.5em;
}
#mainimage .box p {
font-size: 12px;
line-height: 1.5em;
}
#mainimage .box h3 {
font-size: 16px;
line-height: 1.5em;
padding: 10px 0 0px 0;
text-align: center;
color: #FFF;
width: 100%;
}
#mainimage .soldout {
background-color: #9F3020;
color: #FFF;
display: block;
font-size: 18px;
line-height: 1.5em;
width: 90%;
margin: 20px auto 0 auto;
padding: 0.5em 0 0.5em 0;
border: 1px solid #FFFFFF;
}

#photo {
position: relative;
padding: 2em 0em 0em 0em;
}
#photo h2 {
font-size: 24px;
line-height: 1.6em;
}
#photo h2 span {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
font-size: 18px;
margin-bottom: 1rem;
}
#photo h2 span::before,
#photo h2 span::after{
  content: "";
  flex: 1;
  max-width: 4rem;
  height: 1px;
  background: #333;
}
#photo dl {
display: flex;
flex-direction: column;
line-height: 1.6em;
font-size: 18px;
}
#photo dt {
margin-bottom: 1rem;
}
#photo dt span {
font-size: 24px;
}
#photo p {
font-family: shippori-mincho, sans-serif;
font-weight: 400;
font-style: normal;
color: #FFF;
font-size: 15px;
line-height: 1.7em;
padding: 0 2em 0 2em;
}
#photo .image {
width: 100%;
margin: 20px auto 0px auto;
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;
    padding: 3.5vw 0 3vw 0;
}
#price h4 {
font-size: 20px;
line-height: 1.5em;
padding-bottom: 0.5em;
padding: 1em 1.5em 1em 1.5em;
}
#price h4 b {
font-size: 30px;
}
#price p {
font-size: 15px;
line-height: 1.7em;
font-weight: 400;
padding: 0 2em 0 2em;
}
#price p b {
font-size: 18px;
display: block;
}
#price h5 {
font-size: 16px;
line-height: 1.5em;
font-weight: 600;
background-color: #FFF;
margin: 1em auto 1em auto;
display: block;
width: 90%;
padding: 0.5em 1em 0.5em 1em;
box-sizing: border-box;
}
#price ul {
width: 90%;
margin: 0px auto 20px auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#price ul li {
text-align: center;
font-size: 14px;
line-height: 1.8em;
display: block;
position: relative;
width: 50%;
padding: 0.5em;
box-sizing: border-box;
}
#price ul li:nth-of-type(2) {
order: 3;
width: 100%;
border-top: 1px solid #FFF;
padding: 1em 0 0 0;
}
#price ul li i {
font-style: normal;
font-size: 14px;
line-height: 1.2em !important;
}
#price ul li b {
font-size: 26px;
line-height: 1;
}
#price ul li:after {
content: ""; 
position: absolute;
top: 0px;
bottom: 0;
left: 0;
width: 1px;
border-left: 1px solid #FFF;
padding: 0;
}
#price ul li:nth-of-type(1):after,
#price ul li:nth-of-type(2):after{
content: none; 
}

#concept {
  padding: 3.5vw 0;
  background: #fff;
}
#concept .body {
    width: 90%;
    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: 2rem 0 1rem;
}

#concept h5 {
font-size: clamp(16px, 2vw, 32px);
text-align: center;
}

#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: 1.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;
}
#location {
padding-top: 4rem;
position: relative;
}
#location:before {
}
#location ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
width: 90%;
margin: 4vw auto 12vw auto;
}
#location ul li {
width: 32%;
line-height: 0;
margin-bottom: 2vw;
}
#location ul li img {
width: 100%;
height: auto;
}
#location .body {
width: 90%;
margin: 0px auto 0 auto;
text-align: left;
}
#location h3,
#location h3 b{
color: #000;
width: 100%;
}
#location h4 {
color: #000;
font-size: 24px;
line-height: 1.5em;
padding: 1em 0 0.5em 0;
text-align: center;
margin-bottom: 2rem;
}
#location p {
color: #000;
font-size: 16px;
line-height: 1.5em;
padding: 0 0em 2em 0em;
}
#location p.en {
font-size: 14px;
line-height: 1.5em;
padding-bottom: 2em;
}
#location .view_bt {
margin: 0 auto 30px;
text-align: center;
}
#location .map {
display: block;
line-height: 0;
}
#location .lacationmap {
margin-bottom: 2rem;
}
#location .shoplogo {
width: 90%;
margin: 0 auto;
display: flex;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
gap: 1rem;
}

#location .location_photo {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
width: 100%;
}
#location .location_photo li {
width: 48%;
margin-bottom: 1rem;
}


#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);
}



#plan {
  padding: 8vw 0 0 0;
}
#plan .body {
  width: 90%;
  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: 90%;
  margin: 0px auto 2rem 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 0 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: 100%;
  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;
}
.plan_image {
margin-bottom: 4rem;
}
#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;
}


/*
#plan #point {
width: 100%;
margin: 5vw auto 0 auto;
}
#plan #point dl {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
#plan #point dl dd {
width: 48%;
font-size: 14px;
line-height: 1.2em;
display: block;
margin: 0px auto 10px auto;
color: #FFF;
text-decoration: none;
border-radius: 100vh;
padding: 0.4em 0 0.4em 0;
position: relative;
font-family: shippori-mincho, sans-serif;
font-weight: 400;
font-style: normal;
background-color: #131d3d;
}
#plan #point dl dd:nth-of-type(even) {
background-color: #445787;
}
*/


#plan .madori {
text-align: left;
width:90%;
margin: 3vw auto 2rem auto;
border: 1px solid #CCCCCC;
padding: 1.5rem;
box-sizing: border-box;
}
#plan .madori ul {
margin-bottom: 30px;
}
#plan .madori ul li {
text-align: center;
font-size: clamp(16px,1.4vw,1.6vw);
line-height: 1.3em;
font-weight: 500;
font-style: normal;
margin-bottom: 1rem;
}
#plan .madori ul li.price {
font-size: clamp(16px,1.4vw,1.6vw);
line-height: 1.5em;
}
#plan .madori ul li.price b {
font-size: clamp(20px,2.5vw,2.5vw);
line-height: 1.5em;
font-weight: 500;
color: #FF0000;
margin-left: 0.5rem;
}
#plan .madori ul li.image {
width: 100%;
margin: 20px 0 0 0;
}
#plan .madori ul li.image img {
width: 100%;
height: auto;
margin: 0px auto 0 auto;
display: block;
}
#plan .madori .view_bt {
    width: 40%;
     margin: 0 auto;
}
#plan .madori .view_bt a {
    background-color: #111;
    color: #FFF;
    border-radius: 100vh;
    display: block;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    line-height: 1.5em;
    padding: 0.2em 0 0.3em 0;
}
#plan .movie {
width: 90%;
margin: 40px auto 0 auto;
}
#plan .movie iframe[src*='youtube.com'],
#plan .movie iframe[src*='youtube-nocookie.com'],
#plan .movie iframe[src*='youtu.be'] {
  width: 100%;
  height: calc(56.25vw * .9);
}

#plan #title2 {
background-image: url("../image/plan_title2.jpg");
background-position: center center;
background-size: cover;
margin-top: 40px;
padding: 20px 0 20px 0;
color: #FFF;
}
#plan #title2 h4 {
font-size: 18px;
line-height: 1.5em;
padding-bottom: 0.7em;
}
#plan #title2 p {
font-size: 14px;
line-height: 1.5em;
}
#plan ul.detail {
width: 90%;
margin: 20px auto 0 auto;
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
}
#plan ul.detail li {
text-align: left;
width: 48%;
}
#plan ul.detail img {
width: 100%;
height: auto;
}
#plan ul.detail h5 {
font-size: 16px;
line-height: 1.5em;
padding: 0.3em 0 0.3em 0;
}
#plan ul.detail p {
font-size: 14px;
line-height: 1.5em;
}
#plan .view_bt {
margin: 20px auto 0 auto;
}

#features {
margin: 50px auto 0 auto;
}
#features .image {
background-image: url("../image/features_title.jpg");
background-position: center top;
background-size: cover;
margin: 20px auto 0 auto;
display: block;
height: 60vw;
position: relative;
}
#features .image h4 {
text-align: left;
font-size: 22px;
line-height: 1.5em;
position: relative;
top: 20px;
left: 5%;
}
#features .box {
background-color: #111111;
width: 100%;
}
#features .box p {
text-align: center;
color: #FFF;
font-size:14px;
line-height: 1.5em;
padding: 1em;
}
#features .body {
background-image: url("../image/features_bg.jpg");
background-repeat: repeat-y;
background-size: 100%;
padding: 20px 0 40px 0;
}
#features .body ul {
width: 90%;
margin: 0px auto 20px 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: 30%;
}
#features .body ul:nth-of-type(2) li {
width: auto;
padding: 0 2% 0 2%;
box-sizing: border-box;
}
#features .body ul:nth-of-type(3) li {
width: auto;
padding: 0 2% 0 2%;
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;
}
#features .view_bt {
margin: 0px auto 0 auto;
}

#quality {
background-image: url("../image/qualty_p1.jpg");
background-size: 28%;
background-position: right top;
padding: 2em 0 2em 0;
}
#quality h3 {
text-align: left;
}
#quality dl {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 90%;
margin: 0px auto 0 auto;
}
#quality dl dt {
width: 100%;
text-align: left;
}
#quality dl dt h4 {
font-size:18px;
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: 14px;
line-height: 1.5em;
}
#quality dl dt p br {
display: none;
}
#quality dl dt ul {
width: 100%;
margin: 20px 0 20px 0;
}
#quality dl dt ul li {
text-align: center;
background-color: #111111;
outline: 1px solid rgb(99, 99, 99);
outline-offset:-5px;
font-size: 16px;
line-height: 1.5em;
font-family: shippori-mincho, sans-serif;
font-weight: 600;
font-style: normal;
height: 40px;
color: #FFF;
margin-bottom: 10px;
display: flex;
align-items: center;
justify-content: center;
}
#quality dl dd {
width: 100%;
}
#quality .view_bt {
margin: 0px auto 0 auto;
}
#quality .view_bt {
width: 40%;
margin: 0px auto 0 auto;
}
#quality .view_bt a {
background-color: #111;
color: #FFF;
border-radius: 100vh;
display: block;
text-align: center;
text-decoration: none;
font-size: 16px;
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: 28%;
background-position: right top;
padding: 20px 0 20px 0;
}
#message h3 {
text-align: left;
}
#message dl {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 90%;
margin: 0px auto 0 auto;
}
#message dl dt {
width: 100%;
}
#message dl dd {
width: 100%;
text-align: left;
padding: 0 0 0 0em;
box-sizing: border-box;
}
#message dl dd h4 {
font-size:18px;
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: 14px;
line-height: 1.5em;
}

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

  /* パララックスの肝 */
  background-attachment:fixed;
}
.para1{
  background-image:url("../image/para1_sp.jpg");
  background-size: 200%;
}

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