header #navi {
display: none;
}
#mv {
  position: relative;
  width: 100%;
  height: 80vh;
  background: #000;
  overflow: hidden;
  /* ===== Variables ===== */
  --text: #fff;
  --text2: rgba(255, 255, 255, .82);
  --font: "Shippori Mincho", "しっぽり明朝", "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
  --fs-lg: clamp(40px, 4.8vw, 80px);
  --fs-md: clamp(18px, 2.1vw, 34px);
  /* timing */
  --t-start: 0.9s;
  --t-line-in: 1.4s;
  --t-stagger: 0.55s;
  --t-hold1: 1.4s;
  --t-fadeout: 1.2s;
  --t-imgA-in: 2.2s;
  --t-a-pause: 2.0s; /* ★aが止まる秒数 */
  --t-a-zoomout: 2.8s; /* ★停止後のズーム＆終盤フェード */
  --t-cross: 2.6s; /* ★bのフェードイン時間 */
  --t-top-in: 1.6s;
  --t-top-stagger: 0.6s;
  --ul-w: 360px;
  --ul-h: 2px;
  --a-fade-from: 0.70; /* 0.60〜0.85：小さいほど早くaが薄くなり、bの重なりも早くなる */
  /* JSで入る */
  /* --delay-center-out */
  /* --delay-imgA-in */
  /* --delay-a-out */
  /* --delay-b-in */
  /* --delay-top-in */
  /* --t-a-total */
  /* --b-in-ratio（任意） */
}
/* JSが準備できるまで走らせない */
#mv:not(.is-ready) .stack, #mv:not(.is-ready) .line, #mv:not(.is-ready) .img, #mv:not(.is-ready) .trLine, #mv:not(.is-ready) .underline {
  animation: none !important;
}
/* stage */
.mv-stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font);
  font-weight: 400;
}
.layer {
  position: absolute;
  inset: 0;
}
/* ===== Opening Text (center) ===== */
.centerWrap{
  display: grid;
  place-items: center;
  width: 60%;
  height: 60%;
  margin: auto;
  padding: clamp(16px, 2.8vw, 52px);
  text-align: center;
  color: var(--text);
}
.centerWrap .stack{
  transform: translateY(clamp(-10px, -2vh, -28px));
}
#mv.is-ready .stack {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.3vw, 18px);
  align-items: center;
  animation: centerFadeOut var(--t-fadeout) ease forwards;
  animation-delay: var(--delay-center-out);
}
#mv.is-ready .line {
  opacity: 0;
  transform: translateY(-10px);
  filter: blur(10px);
  will-change: transform, opacity, filter;
  animation: lineIn var(--t-line-in) ease-out forwards;
  animation-delay: calc(var(--t-start) + (var(--i) * var(--t-stagger)));
  font-weight: 400;
}
.line.lg {
  font-size: var(--fs-lg);
  letter-spacing: .04em;
  line-height: 1.08;
}
.line.md {
  font-size: var(--fs-md);
  letter-spacing: .05em;
  line-height: 1.35;
  color: var(--text2);
}
/* ===== Images ===== */
#mv .img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  /* smoothing */
  transform: translate3d(0, 0, 0) scale(1.04);
  will-change: transform, opacity;
  backface-visibility: hidden;
}
/* a：In → Pause(2s) → Out(zoom+fade) */
#mv.is-ready .img.a {
  animation:
    imgAIn var(--t-imgA-in) ease-out forwards, imgAPause var(--t-a-pause) linear forwards, imgAOut2 var(--t-a-zoomout) linear forwards;
  animation-delay:
    var(--delay-imgA-in), calc(var(--delay-imgA-in) + var(--t-imgA-in)), var(--delay-a-out);
}
/* b：aの終盤に重ねてイン（黒が出ない） */
#mv.is-ready .img.b {
  animation: imgBCrossIn var(--t-cross) ease-out forwards;
  animation-delay: var(--delay-b-in);
}
/* ===== Last scene (top-right, centered within block) ===== */
.topCenter{
  position: absolute;
  top: 50%;
  left: 50%;
  right: auto;
  transform: translate(-50%, -50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 12px;
  text-align:center;
  color:#000;
  pointer-events:none;
  padding: clamp(18px, 2.2vw, 28px) clamp(4px, 1vw, 10px);
  border-radius: 12px;
  isolation: isolate;
}

.topCenter::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  background: rgba(255,255,255,0.50);
  opacity:0;
  filter: blur(8px);
  transform: translateY(-8px);
  z-index: 0;
  animation: tcBgIn var(--t-top-in) ease-out forwards;
  animation-delay: var(--delay-top-in);
  will-change: opacity, transform, filter;
}
.topCenter > *{
  position: relative;
  z-index: 1;
}
@keyframes tcBgIn{
  to{ opacity:1; transform: translateY(0); filter: blur(0); }
}

.trLogo{
  display:flex;
  justify-content:center;
  align-items:center;
  width: 100%;
  margin-bottom: 1.5vw;
}
.trLogo img{
  width: calc(var(--fs-lg) * 3.2);  
  max-width: 65vw;
  height: auto;
  display:block;
}

#mv.is-ready .trLine {
  opacity: 0;
  transform: translateY(-8px);
  filter: blur(10px);
  will-change: transform, opacity, filter;
  animation: trIn var(--t-top-in) ease-out forwards;
  animation-delay: calc(var(--delay-top-in) + (var(--j) * var(--t-top-stagger)));
  font-weight: 400;
}
.trTitle {
  font-size: var(--fs-lg);
  letter-spacing: .04em;
  line-height: 1.02;
}
.trSub {
  font-size: var(--fs-md);
  letter-spacing: .05em;
  color: #000;
}
#mv.is-ready .underline {
  width: min(var(--ul-w), 55vw);
  height: var(--ul-h);
  background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .9), rgba(0, 0, 0, 0));
  border-radius: 999px;
  opacity: 0;
  transform: scaleX(.25);
  filter: blur(8px);
  will-change: opacity, transform, filter;
  animation: ulIn var(--t-top-in) ease-out forwards;
  animation-delay: calc(var(--delay-top-in) + (1 * var(--t-top-stagger)));
}
/* ===== Keyframes ===== */
@keyframes lineIn {
  0% {
    opacity: 0;
    transform: translateY(-10px);
    filter: blur(12px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}
@keyframes centerFadeOut {
  to {
    opacity: 0;
  }
}
@keyframes imgAIn {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(1.08);
    filter: blur(10px) brightness(.92);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1.00);
    filter: blur(0) brightness(.98);
  }
}
@keyframes imgAPause {
  0%, 100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1.00);
    filter: blur(0) brightness(.98);
  }
}
@keyframes imgAOut2 {
  /* 0〜(fade開始までは)ズームだけで見せる */
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1.00);
    filter: blur(0) brightness(.98);
  }
  /* ここまでは“見せるズーム” */
  70% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1.22);
    filter: blur(0) brightness(.98);
  }
  /* ここからフェード開始（bを重ね始める） */
  90% {
    opacity: 0.55;
    transform: translate3d(0, 0, 0) scale(1.26);
    filter: blur(0) brightness(.98);
  }
  /* 終盤：消える */
  100% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(1.30);
    filter: blur(0) brightness(.98);
  }
}
@keyframes imgBCrossIn {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(1.03);
    filter: blur(6px) brightness(.98);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1.00);
    filter: blur(0) brightness(1);
  }
}
@keyframes trIn {
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}
@keyframes ulIn {
  0% {
    opacity: 0;
    transform: scaleX(.25);
    filter: blur(10px);
  }
  100% {
    opacity: 1;
    transform: scaleX(1);
    filter: blur(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .stack, .line, .img, .trLine, .underline {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .stack {
    opacity: 0 !important;
  }
  .img.b {
    opacity: 1 !important;
  }
}

#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 {
background-color: #111111;
padding: 2em 0em 0em 0em;
}
#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-color: #111111;
font-family: shippori-mincho, sans-serif;
font-weight: 400;
font-style: normal;
color: #FFF;
padding: 0 0 20px 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: 18px;
line-height: 1.5em;
font-weight: 600;
background-color: #FFF;
color: #490f0f;
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: 0;
  background: #111111;
  color: #fff;
}
#concept .c-hero {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr
}
#concept .c-panel {
  position: relative;
  min-height: 520px;
  overflow: hidden
}
#concept .c-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover
}
#concept .c-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(26, 26, 28, .5)
}
#concept .c-copy {
 position:absolute;
  left:10% !important;   
  right:auto !important;
  top:10%;
  width:80% !important; 
  margin:0 !important;
  transform:none !important;
  text-align:left;  
  z-index:2;
}
#concept .c-ttl {
  margin: 0 0 6px;
  font-size: clamp(22px,2vw,2vw);
  letter-spacing: .08em
}
#concept .c-sub {
  margin: 0 0 18px;
  font-size: clamp(18px,1.2vw,1.2vw);
  letter-spacing: .18em
}
#concept .c-txt {
  margin: 6rem 0 0;
  font-size: 14px;
  letter-spacing: .12em;
  line-height: 1.8em;
}
#concept .c-v {
  position: absolute;
  right: 56px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column; 
  align-items: center;
  gap: 14px;
}
#concept .c-vtxt {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font: 34px/1 "Noto Serif JP", "Yu Mincho", serif;
  letter-spacing: .3em;
}
#concept .c-vline {
  width: 1px;
  height: 220px;
  background: rgba(255, 255, 255, .55);
}

#concept .c-tiles {
 width:90%;
  margin:0 auto;
  padding:6vw 0 7vw; 
  list-style:none;
  display:flex;
  justify-content:space-between;
  gap:1.5vw;   
}
#concept .c-tiles li {
display:flex;
justify-content:center;
}
#concept .c-tile {
position:relative;
width:28vw;
aspect-ratio: 4 / 5;
max-height:380px;
height:auto;
overflow:hidden;
box-shadow:0 1vw 3.5vw rgba(0,0,0,.45);
display:block;
}
#concept .c-tile::after {
  content: "";
  position: absolute;
  inset: 0;
background:rgba(26,26,28,.3);
}
#concept .c-tile .c-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover
}
#concept .c-cap {
  position:absolute;
  left:50%;
  top:52%;
  transform:translate(-50%,-50%);
  text-align:center;
  width:80%;
  z-index:1;
  color:#fff; 
}
#concept .c-jp {
  display:block;
  margin:0 0 0.6vw;
  font-family:"Noto Serif JP","Yu Mincho",serif;
  font-size:3vw;        /* 22px 相当 */
  line-height:1.2;
  letter-spacing:.14em;
  color:#fff; 
}
#concept .c-bar {
  display:block;
  width:76%;
  height:0.15vw;
  margin:0 auto 0.8vw;
  background:rgba(255,255,255,.55);
}
#concept .c-en {
display:block;
  font-family:"Times New Roman",Times,serif;
  font-size:2vw;        /* 12px 相当 */
  line-height:1.1;
  letter-spacing:.24em;
  opacity:1;
  color:#fff; 
}
#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 h4 br {
}
#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;
}

#plan {
background-image: url("../image/plan_bg.jpg");
background-repeat: repeat-y;
background-size: 100%;
padding: 50px 0 50px 0;
}
#plan .body {
width: 90%;
margin: 0px auto 0 auto;
text-align: left;
}
#plan 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;
}
#plan 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;
}
#plan h3,
#plan h3 b{
color: #000;
width: 100%;
}
#plan h4 {
color: #000;
font-size: 24px;
line-height: 1.5em;
padding: 1em 0 0.5em 0;
text-align: center;
margin-bottom: 2rem;
}
#plan #title {
background-image: url("../image/plan_title.jpg");
background-size: cover;
background-position: center center;
margin-top: 20px;
padding: 20px 0 20px 0;
}
#plan #title .box {
background-color: rgba(0,0,0,0.7);
width: 80%;
margin: 0px auto 0 auto;
color: #FFF;
padding: 1em;
box-sizing: border-box;
}
#plan #title .box h4 {
font-size: 18px;
line-height: 1.5em;
padding-bottom: 0.7em;
color: #fff;
margin-bottom: 0;
}
#plan #title .box p {
font-size: 13px;
line-height: 1.5em;
}

#plan #point {
width: 94%;
margin: 5vw auto 0 auto;
}
#plan #point dl {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#plan #point dl dd {
font-family: shippori-mincho, sans-serif;
font-weight: 400;
font-style: normal;
width: 100%;
margin: 0px auto 1em auto;
text-decoration: none;
position: relative;
}
#plan #point dl dd:last-child {
text-align: center;
}
#plan #point dl dd img {
width: 50%;
}
#plan #point dl dd h5 {
font-size: 16px;
line-height: 1.2em;
display: block;
color: #FFF;
background-color: #111111;
padding: 0.5em 0.5em 0.4em 0.5em;
}
#plan #point dl dd p {
font-size:14px;
line-height: 1.3em;
text-align: left;
padding: 0.6em 0em 0.6em 0em;
}


/*
#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 0 auto;
border: 1px solid #CCCCCC;
padding: 1em 1em 2em 1em;
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;
}