/* 共通 */
.plan_page #mv{
  height: 70vh;
}
#lead{
  background: url(../images/common/plan_lists_bg.webp);
  background-size: 100% 100%;
}
#lead .lead_head{
  margin-bottom: 2.5em;
}
#lead .floor_img{
  width: 1000px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 100px;
}
#lead .notes{
  width: 1000px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 95px;
  font-family: "Noto Sans JP", Avenir Next, 'Avenir Next', 'Noto Sans JP', "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "游ゴシック体", "Yu Gothic", YuGothic, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 10px;
  color: #727171;
  line-height: 1.4;
  text-align: left;
}
#lead .notes p:nth-child(n+2){
  margin-top: 1em;
}

#lead .pickup{
  margin-bottom: 100px;
}
#lead .pickup .ttl_conte{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 25px;
}
#lead .pickup .ttl_conte .type{
  width: 380px;
}
#lead .pickup .ttl_conte .lists{
  display: flex;
  flex-direction: column;
  gap: .4em;
  font-size: 14px;
  text-align: left;
  padding: 1em 0;
  padding-right: .6em;
  border-top: 1px solid #32454e;
  border-bottom: 1px solid #32454e;
  color: #32454e;
  letter-spacing: 0.02em;
}
#lead .pickup .img{
  width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

#lead .plan_lists{
  width: 680px;
  margin-left: auto;
  margin-right: auto;
}
#lead .plan_lists li:nth-child(n+2){
  margin-top: 30px;
}
.conte_inner{
  width: 820px;
  margin-left: auto;
  margin-right: auto;
}
#plan{
  margin-top: 90px;
  margin-bottom: 50px;
}
.merit .lists{
  font-size: 16px;
  margin: 4em 0;
}
.merit .lists li{
  font-size: 16px;
  text-indent: -1.5em;
  padding-left: 1.5em;
  text-align: left;
}
.merit .lists li:nth-child(n+2){
  margin-top: .4em;
}
#lead .performance_indicator{
  width: 300px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 70px;
}
#type{
  margin-top: 74px;
  margin-bottom: 70px;
  position: relative;
}
#type .btn_lists{
  position: relative;
  display: flex;
  justify-content: flex-start;
  /* margin-bottom: 50px; */
  z-index: 10;
  gap: 1.33%;
}
#type .btn_lists .btn_list{
  width: 24%;
  font-size: 16px;
  font-weight: 500;
  padding: 1.2em 0;
  text-align: center;
  transition: .3s;
  opacity: 0.3;
}
#type .btn_lists.ex .btn_list{
  width: 23.5%;
}
#type .btn_lists .btn_list.type_basic_btn{
  background: #32454e;
  color: #fff;
}
#type .btn_lists .btn_list.type_m1_btn,
#type .btn_lists .btn_list.type_m2_btn{
  background: #2f7c99;
  color: #fff;
}
#type .btn_lists .btn_list.type_furniture_btn{
  background: #cbd5dc;
  color: #32454e;
}
#type .btn_lists .btn_list.active{
  opacity: 1;
  transition: .3s;
}
#type .type_conte{
  /* margin-bottom: 90px; */
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  transition: opacity .3s;
}
#type .type_conte.hidden{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
#type .type_conte.active{
  opacity: 1;
  visibility: visible;
  position: relative;
}

#type .type_ttl{
  position: relative;
  width: 65%;
  margin-right: auto;
  margin-left: 0;
  z-index: 10;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  height: 61px;
}

#type .type_img_wrap{
  position: relative;
}

#type .type_img{
  margin-left: auto;
  margin-right: auto;
  pointer-events: none;
}

#type .menu_txt{
  position: absolute;
  left: 0;
  /* left: 50%; */
  /* transform: translateX(-50%); */
  width: 445px;
}
#type-c #type .menu_txt{
  top: 48px;
}
#type-d #type .menu_txt{
  top: -12px;
}
#type-e #type .menu_txt{
  top: -5px;
}

#type .type_note{
  margin-left: 0;
  margin-right: auto;
}
/* 各タイプへの遷移ボタン（一覧に戻るの直上） */
.conte_inner .type_lists{
  display: flex;
  gap: 10px;
  margin-top: 40px;
  margin-bottom: 65px;
}
.conte_inner .type_lists .type_list{
  flex: 1;
  min-width: 0;
}
.conte_inner .type_lists .type_list a,
.conte_inner .type_lists .type_list span{
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box; /* 枠線を含めてカレントと同じ高さに揃える */
  height: 53px;
  background: #fff;
  border: 1px solid;
  border-image: linear-gradient(90deg, #61899c 0%, #003856 100%) 1;
}
/* カレントは枠なしでグラデーションを地色に敷く */
.conte_inner .type_lists .type_list.current span{
  border: 0;
  background: linear-gradient(90deg, #61899c 0%, #003856 100%);
}
.conte_inner .type_lists .type_list img{
  display: block;
  width: auto;
  height: auto;
}
/* 書き出しは@2x。字形ごとの幅差を保つため各素材の実寸の半分で表示する */
.conte_inner .type_lists .type_list:nth-child(1) img{ width: 52px; }
.conte_inner .type_lists .type_list:nth-child(2) img{ width: 48.5px; }
.conte_inner .type_lists .type_list:nth-child(3) img{ width: 52px; }
.conte_inner .type_lists .type_list:nth-child(4) img{ width: 53px; }
.conte_inner .type_lists .type_list:nth-child(5) img{ width: 48.5px; }

.btn_back{
  display: block;
  width: 200px;
  margin-left: auto;
  margin-right: auto;
  color: #FFF;
  text-align: center;
  font-size: 13px;
  line-height: 1;
  background: #32454e;
  padding: 1em 0;
  letter-spacing: 0.1em;
  margin-bottom: 100px;
}

/* type-a */
#type-a .type_img{
  width: 722.88px;
}
#type-a .type_note{
  width: 680px;
}

/* type-b */
#type-b .type_img{
  width: 779.04px;
  margin-bottom: 0;
}
#type-b .type_note{
  width: 680px;
}

/* type-c */
#type-c .type_img{
  width: 703.44px;
  margin-top: -40px;
  margin-bottom: 0;
}
#type-c .type_note{
  width: 680px;
}

/* type-d */
#type-d .type_img{
  width: 576px;
  margin-top: 20px;
}
#type-d .type_note{
  width: 677px;
}

/* type-e */
#type-e .type_img{
  width: 554.4px;
  margin-top: 13px;
}
#type-e .type_note{
  width: 677px;
}




@media(max-width:1280px){
  /* 共通 */
  #lead .floor_img{
    width: 78.12vw;
    margin-bottom: 10vw;
  }
  #lead .notes{
    width: 78.12vw;
    margin-bottom: 7.42vw;
    font-size: 0.78vw;
  }

  #lead .pickup{
    margin-bottom: 7.81vw;
  }
  #lead .pickup .ttl_conte{
    gap: 1.95vw;
  }
  #lead .pickup .ttl_conte .type{
    width: 29.68vw;
  }
  #lead .pickup .ttl_conte .lists{
    font-size: 1.09vw;
  }
  #lead .pickup .img{
    width: 78.12vw;
  }

  #lead .plan_lists{
    width: 53.12vw;
  }
  #lead .plan_lists li:nth-child(n+2){
    margin-top: 2.34vw;
  }
  .conte_inner{
    width: 64.06vw;
  }
  #plan{
    margin-top: 7.03vw;
    margin-bottom: 3.9vw;
  }
  .merit .lists{
    font-size: 1.25vw;
  }
  .merit .lists li{
    font-size: 1.25vw;
  }
  #lead .performance_indicator{
    width: 23.43vw;
    margin-top: 5.46vw;
  }
  #type{
    margin-top: 5.78vw;
    margin-bottom: 5.46vw;
  }
  /* #type .btn_lists{
    margin-bottom: 50px;
  } */
  #type .btn_lists .btn_list{
    font-size: 1.25vw;
  }
  /* #type .type_img{
    margin-bottom: 7.03125vw;
  } */

  #type .menu_txt{
    width: 34.76vw;
  }

  #type .type_ttl{
    height: 4.76vw;
  }

  #type-c #type .menu_txt{
    top: 3.75vw;
  }
  #type-d #type .menu_txt{
    top: -0.93vw;
  }
  #type-e #type .menu_txt{
    top: -0.39vw;
  }

  .conte_inner .type_lists{
    gap: 0.78vw;
    margin-top: 3.12vw;
    margin-bottom: 5.07vw;
  }
  .conte_inner .type_lists .type_list a,
  .conte_inner .type_lists .type_list span{
    height: 4.14vw;
  }
  .conte_inner .type_lists .type_list:nth-child(1) img{ width: 4.06vw; }
  .conte_inner .type_lists .type_list:nth-child(2) img{ width: 3.79vw; }
  .conte_inner .type_lists .type_list:nth-child(3) img{ width: 4.06vw; }
  .conte_inner .type_lists .type_list:nth-child(4) img{ width: 4.14vw; }
  .conte_inner .type_lists .type_list:nth-child(5) img{ width: 3.79vw; }

  .btn_back{
    width: 15.62vw;
    font-size: 1.01vw;
    margin-bottom: 7.81vw;
  }


  /* type-a */
  #type-a .type_img{
    width: 56.47vw;
  }
  #type-a .type_note{
    width: 53.125vw;
  }
  
  /* type-b */
  #type-b .type_img{
    width: 60.86vw;
    margin-bottom: 0;
  }
  #type-b .type_note{
    width: 53.125vw;
  }
  
  /* type-c */
  #type-c .type_img{
    width: 54.95vw;
    /* margin-top: -4.6875vw; */
    margin-top: -3.12vw;
    margin-bottom: 0;
  }

  /* type-d */
  #type-d .type_img{
    width: 45vw;
    margin-top: 1.56vw;
  }
  #type-d .type_note{
    width: 52.89vw;
  }

  /* type-e */
  #type-e .type_img{
    width: 43.31vw;
    margin-top: 1.01vw;
  }
  #type-e .type_note{
    width: 52.89vw;
  }
} 
@media(max-width:750px){
  /* 共通 */
  #mv .img_bg {
    object-position: 98% top;
  }
  .plan_page #mv{
    height: 50vh;
  }
  #lead .lead_head {
    margin-bottom: 2em;
  }
  #lead .floor_img{
    width: 91.6vw;
    margin-bottom: 9vw;
  }
  #lead .notes{
    width: 91.6vw;
    margin-bottom: 11.45vw;
    font-size: 2.54vw;
    line-height: 1.3;
  }

  #lead .pickup{
    margin-bottom: 9.16vw;
  }
  #lead .pickup .ttl_conte{
    display: block;
  }
  #lead .pickup .ttl_conte .type{
    width: 69.97vw;
    margin-left: auto;
    margin-right: auto;
  }
  #lead .pickup .ttl_conte .lists{
    display: inline-block;
    font-size: 2.68vw;
    padding: 1.3em 0;
    margin: 2em 0 3em;
    width: 67%;
  }
  #lead .pickup .ttl_conte .lists .list{
    text-indent: -1.1em;
    padding-left: 1.1em;
    line-height: 1.5;
  }
  #lead .pickup .ttl_conte .lists .list:nth-child(n+2){
    margin-top: 0.35em;
  }
  #lead .pickup .img{
    width: 91.6vw;
  }

  #lead .plan_lists{
    width: 77.60vw;
  }
  #lead .plan_lists li:nth-child(n+2){
    margin-top: 3.63vw;
  }
  .conte_inner{
    width: 79.64vw;
  }
  #plan{
    margin-top: 8.90vw;
    margin-bottom: 5.9vw;
  }

  .merit .lists{
    font-size: 2.54vw;
    margin: 6.63vw 0;
  }

  .merit .lists li{
    font-size: 2.54vw;
    line-height: 1.5;
  }
  .merit .lists li:nth-child(n+2) {
    margin-top: 0.7em;
  }
  #lead .performance_indicator{
    width: 52vw;
    margin-top: 11.46vw;
  }
  #type{
    margin-top: 11.45vw;
    margin-bottom: 12.17vw;
  }
  #type .btn_lists{
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    gap: 1.4vw 2%;
    flex-wrap: wrap;
    /* margin-bottom: 9vw; */
  }
  #type .btn_lists .btn_list{
    width: 48%;
    font-size: 2.54vw;
    padding: 1.2em 0;
    letter-spacing: -0.01em;
    line-height: 1.2;
  }
  #type .btn_lists .btn_list.type_basic_btn,
  #type .btn_lists .btn_list.type_m1_btn,
  #type .btn_lists .btn_list.type_m2_btn{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #type .btn_lists.ex .btn_list{
    padding: 0.8em 0;
  }

  #type .type_ttl{
    width: 100%;
    height: 9.2vw;
  }

  /* #type .type_img{
    margin-bottom: 8.08vw;
  } */

  #type .menu_txt{
    width: 100%;
  }
  #type-c #type .menu_txt{
    top: 1.75vw;
  }
  #type-d #type .menu_txt{
    top: -1.83vw;
  }
  #type-e #type .menu_txt{
    top: -0.13vw;
  }


  .conte_inner .type_lists{
    gap: 0.51vw;
    margin-top: 6vw;
    margin-bottom: 8vw;
  }
  .conte_inner .type_lists .type_list a,
  .conte_inner .type_lists .type_list span{
    height: 8.15vw;
  }
  .conte_inner .type_lists .type_list:nth-child(1) img{ width: 9.4vw; }
  .conte_inner .type_lists .type_list:nth-child(2) img{ width: 8.8vw; }
  .conte_inner .type_lists .type_list:nth-child(3) img{ width: 9.4vw; }
  .conte_inner .type_lists .type_list:nth-child(4) img{ width: 9.6vw; }
  .conte_inner .type_lists .type_list:nth-child(5) img{ width: 8.8vw; }

  .btn_back{
    width: 46.31vw;
    font-size: 2.64vw;
    margin-bottom: 11.45vw;
  }


  /* type-a */
  #type-a .type_img{
    width: 100%;
  }
  #type-a .type_note{
    width: 54.96vw;
  }

  /* type-b */
  #type-b .type_img{
    width: 100%;
    margin-bottom: 0;
  }
  #type-b .type_note{
    width: 54.96vw;
  }

  /* type-c */
  #type-c .type_img{
    width: 100%;
    margin-top: 0;
    margin-bottom: 0;
  }
  #type-c .type_note{
    width: 54.96vw;
  }

  /* type-d */
  #type-d .type_img{
    width: 100%;
    margin-top: 3.56vw;
  }
  #type-d .type_note{
    width: 54.7vw;
  }

  /* type-e */
  #type-e .type_img{
    width: 100%;
    margin-top: 2.01vw;
  }
  #type-e .type_note{
    width: 54.7vw;
  }
}