@charset "UTF-8";

body {
background-color: #F5F2F2;
    color: #000;
}
.bg_white {
    width: 100%;
    background: #fff;
    color: #000;
}

.inner_1100{
    width: 90%;
    max-width: 1100px;
    margin: 0 auto;
}

.hero {
    position: relative;
    width: 100%;
}

.hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

p sup {
    font-size: 10px;
    vertical-align: top;
}

.anchor-btn_wrap{
  width: 90%;
  max-width: 800px;
  margin: 0 auto 50px;
}


.anchor-btn_wrap .flex {
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: flex-end;
}

.anchor-btn_wrap li {
  width: 30%;
  cursor: pointer;
  transition: 0.3s;
  display: inline-block;
  position: relative;
}

.anchor-btn_wrap:not(:first-child){
  margin: 80px auto 0;
}

.anchor-btn_wrap.bottom{
  margin: 50px auto 0;
}
.hover-img{
  position:relative;
}

.hover-img img{
  display:block;
  transition:opacity .5s ease;
}

.hover-img .on{
  position:absolute;
  top:0;
  left:0;
  opacity:0;
}

.hover-img:hover .on{
  opacity:1;
}

.hover-img:hover .off{
  opacity:0;
}

.hover-img.select .on{
  opacity:1;
}

.hover-img.select .off{
  opacity:0;
}

@media only screen and (max-width : 767px) {

  .anchor-btn_wrap {
    margin:0 auto 30px;
  }

  .anchor-btn_wrap li {
    display: block;
    width: 75%;
    max-width: 280px;
    font-size: 13px;
    margin: 0 auto;
    padding: unset;
    text-align: center;
  }

  .anchor-btn_wrap li:not(:first-child){
    margin-top: 20px;
  }

  .anchor-btn_wrap{
    margin-bottom: 30px;
  }

  /* .anchor-btn_wrap li:not(:last-child)::after {
  content: unset;
  position: unset;
  right: unset;
  top: unset;
  transform: unset;
} */

}


.page-lead {
  padding: 80px 0;
  text-align: center;
}

.page-lead h3 {
  font-size: clamp(20px,2.73vw,30px);
  letter-spacing: 2px;
  line-height: 1.8;
  margin-bottom: 20px;
}

.page-lead p {
  font-size: clamp(14px,1.45vw,16px);
  line-height: 2.4;
  letter-spacing: 1px;
}

/* ライフスタイル */

.style-area{
  border:2px solid #c12122 ;
  position: relative;
}

.style-area:not(:first-child){
  margin-top: 80px;
}

/* 共通 */
.style-area .tri{
  position: absolute;
  width: 0;
  height: 0;
}

/* 左上 */
.style-area .tl{
  top: 0;
  left: 0;
  border-top: 50px solid #c12122;
  border-right: 50px solid transparent;
}

/* 右上 */
.style-area .tr{
  top: 0;
  right: 0;
  border-top: 50px solid #c12122;
  border-left: 50px solid transparent;
}

/* 左下 */
.style-area .bl{
  bottom: 0;
  left: 0;
  border-bottom: 50px solid #c12122;
  border-right: 50px solid transparent;
}

/* 右下 */
.style-area .br{
  bottom: 0;
  right: 0;
  border-bottom: 50px solid #c12122;
  border-left: 50px solid transparent;
}

/* blue-area */

.style-area.blue-area{
  border:2px solid #154098 ;
}

/* 左上 */
.style-area.blue-area .tl{
  border-top: 50px solid #154098;
}

/* 右上 */
.style-area.blue-area .tr{
  border-top: 50px solid #154098;
}

/* 左下 */
.style-area.blue-area .bl{
  border-bottom: 50px solid #154098;
}

/* 右下 */
.style-area.blue-area .br{
  border-bottom: 50px solid #154098;
}

/* green-area */

.style-area.green-area{
  border:2px solid #288d30;
}


/* 左上 */
.style-area.green-area .tl{
  border-top: 50px solid #288d30;
}

/* 右上 */
.style-area.green-area .tr{
  border-top: 50px solid #288d30;
}

/* 左下 */
.style-area.green-area .bl{
  border-bottom: 50px solid #288d30;
}

/* 右下 */
.style-area.green-area .br{
  border-bottom: 50px solid #288d30;
}

.st-contents{
  padding: 60px 60px 80px;
}

.st-contents .ttl{
  width: 100%;
  gap: 70px;
  align-items: end;
}

.st-contents .ttl .ttl-img{
  width: 100%;
  max-width: 500px;
}

.st-contents .ttl .ttl-text{
  width: 100%;
  max-width: 430px;
}

.ttl-text .silhouette{
  margin:  0 0 8% auto;
  text-align: right;
}

.ttl-text .silhouette img{
  height: 180px;
  width: auto;
}

.ttl-text h2{
  font-size:clamp(28px,3.82vw,42px);
  letter-spacing: 0.02em;
  font-weight: 600;
}

.ttl-text p{
  margin-top: 20px;
  font-size: clamp(14px,1.45vw,16px);
  line-height: 2;
  letter-spacing: 1px;
  font-feature-settings: "palt";
}

.plan-detail{
  border:1px solid #c12122 ;
  margin-top: 50px;
  align-items: center;
}

.plan-detail.blue-area{
  border:1px solid #154098 ;
}
.plan-detail .type.blue-bk{background-color: #154098;}


.plan-detail.green-area{
  border:1px solid #288d30 ;
}
.plan-detail .type.green-bk{background-color: #288d30;}


.plan-detail .type{
  width: 50%;
  background:#c12122;
  color:#fff;
  padding:51px 80px 50px 30px;
  clip-path: polygon(0 0, 100% 0, 92% 100%, 0 100%);
  
}

.plan-detail p{
  font-size: clamp(14px,1.45vw,16px);
  line-height: 1.5;
  letter-spacing: 0.06em;
  font-weight: 600;
  border: 1px solid #fff;
  padding: 6px 10px;
  display: inline-block;
  margin-top: 8px;
}

.plan-detail p span.min{
  font-size: 12px;
  margin-left: 5px;
}

.plan-detail h3{
  font-size:clamp(28px,3.82vw,42px);
  letter-spacing: 0.1em;
  line-height: 1.2;
}

.plan-detail h3 span{
  font-size:clamp(18px,2.55vw,28px);
  letter-spacing: 0.08em;
}

.type-syosai{
  width: 50%;
  padding: 30px 0 30px 20px;
}

.type-syosai li{
  font-size:clamp(16px,1.64vw,18px) ;
  letter-spacing: 0.1em;
}

.type-syosai li:first-child{
  margin-bottom: 5px;
}

.type-syosai li span{
  font-size:clamp(28px,3.82vw,42px);
  margin-left: 3%;
  letter-spacing: 0.1em;
}

.type-syosai li span.min{
  font-size:clamp(20px,2.55vw,28px) ;
  margin-left: -3px;
}

.madori{
  margin-top: 50px;
  gap: 6%;
}

.madori-img .hanrei{
  width: 90%;
  margin: 20px auto 0;
}

.point li:not(:first-child){
  margin-top: 14%;
}

.point li p{
  margin-top: 10px;
  font-size: clamp(14px,1.45vw,16px);
  line-height: 1.5;
  letter-spacing: 0.06em;
  font-feature-settings: "palt";
  text-align: justify;
}

.style-lead{
  margin-top: 80px;
}

.style-lead h2{
  font-size: clamp(14px,1.64vw,18px);
  line-height: 2.4;
  font-weight: 600;
  letter-spacing: 1px;
  text-align: center;
}


.style-img {
  margin-top: 35px;
  gap: 3%;
}

.style-img figcaption{
  font-size: 14px;
  margin-top: 10px;
  letter-spacing: 0.1em;
  line-height: 1.5;
}

.gallery{
  margin: 80px auto;
  /* border-top: 1px solid #b99f75;
  border-bottom: 1px solid #b99f75;; */
}

.gallery h3,
.gallery p{
  text-align: center;
  font-size: clamp(14px,1.45vw,16px);
  line-height: 2.4;
  letter-spacing: 1px;
}

.gallery h3{
  margin-bottom: 30px;
}


.gallery-btn{
  text-align: center;
}

.gallery a{
  display: inline-block;
  width: 80%;
  max-width: 400px;
  padding: 20px 20px;
  background-color: #972626;
  color: #fff;
  letter-spacing: 0.1em;
}

.ocher{
  color: #a68653;
}

.red{color:#c12122;}

.blue{color:#154098 ;}

.green{color:#288d30 ;}


/*-----------------------------
tab〜
-----------------------------*/
@media only screen and (max-width: 1024px) {}
@media only screen and (max-width: 1000px) {
.st-contents .ttl{
  display: block;
  gap: unset;
  align-items: unset;
}

.st-contents .ttl .ttl-img{
  max-width: unset
}

.st-contents .ttl .ttl-text{
  max-width: unset;
}

.ttl-text .silhouette{
  margin:  -160px 30px 0 auto;
  text-align: right;
}

.ttl-text .silhouette img{
  height: 200px;
  width: auto;
}

.ttl-text h2{
  text-align: center;
}

.ttl-text p{
  text-align: center;
}

.plan-detail{
  display: block;
}

.plan-detail .type{
  width: 100%;
  padding:24px 0;
  clip-path: unset;
  text-align: center;
}

.plan-detail p{
  margin-top: 6px;
}

/* .plan-detail h3{
  text-align: center;
} */

.type-syosai{
  width: 100%;
  padding: 24px 0;
}

.type-syosai li{
  text-align: center;
}

.type-syosai li:first-child{
  margin-bottom: 8px;
}

}

/*-----------------------------
tabのみ
-----------------------------*/
/*@media only screen and (max-width: 1024px) and (min-width: 768px) {
  .teiki { width: 60%;}
}*/

/*-----------------------------
sp
-----------------------------*/
@media only screen and (max-width: 768px) {

  .page-lead {
  padding: 50px 0 50px;
  text-align: center;
}


/*ul.btm_Btn_Area li.f_request {
background: #981515;
}*/
.hero {
padding: 70px 0 0;
background-color: #000;
margin-bottom: 30px;
}
.hero h2 {
top: 50%;
margin-bottom: 15px;
    font-size: 30px;
}

.style-area:last-child{
  margin-bottom: 30px;
}

.style-area:not(:first-child){
  margin-top: 30px;
}

/* 左上 */
.style-area .tl{
  border-top: 14px solid #c12122;
  border-right: 14px solid transparent;
}

/* 右上 */
.style-area .tr{
  border-top: 14px solid #c12122;
  border-left: 14px solid transparent;
}

/* 左下 */
.style-area .bl{
  border-bottom: 14px solid #c12122;
  border-right: 14px solid transparent;
}

/* 右下 */
.style-area .br{
  border-bottom: 14px solid #c12122;
  border-left: 14px solid transparent;
}
/* blue-area */


/* 左上 */
.style-area.blue-area .tl{
  border-top: 14px solid #154098;
}

/* 右上 */
.style-area.blue-area .tr{
  border-top: 14px solid #154098;
}

/* 左下 */
.style-area.blue-area .bl{
  border-bottom: 14px solid #154098;
}

/* 右下 */
.style-area.blue-area .br{
  border-bottom: 14px solid #154098;
}

/* green-area */

/* 左上 */
.style-area.green-area .tl{
  border-top: 14px solid #288d30;
}

/* 右上 */
.style-area.green-area .tr{
  border-top: 14px solid #288d30;
}

/* 左下 */
.style-area.green-area .bl{
  border-bottom: 14px solid #288d30;
}

/* 右下 */
.style-area.green-area .br{
  border-bottom: 14px solid #288d30;
}

.st-contents{
  padding: 20px 20px 40px;
}

.ttl-text .silhouette{
  margin:  -120px 10px 20px auto;
}

.ttl-text .silhouette img{
  height: 140px;
}

.madori{
  gap: unset;
  display: block;
}

.madori-img .hanrei{
  width: 100%;
}

.point{
  margin-top: 40px;
}

.point li:not(:first-child){
  margin-top: 10%;
}

.style-lead{
  margin-top: 40px;
}

.style-lead h2{
  letter-spacing: 0.06em;
}

.type-syosai li{
  text-align: center;
  line-height: 1.4;
}

.type-syosai li:first-child{
  margin-bottom: 16px;
}

.style-img.flex{
  display: block;
}

.style-img {
  margin-top: 30px;
}

.style-img figure:last-child{
margin-top: 20px;
}

.gallery{
  margin-top: 60px;
}

.anchor-btn_wrap:not(:first-child){
  margin: 30px auto 0;
}
}