@charset "utf-8";
/* ========================================================
	 action/yokohama-wakabadai/用CSS 
======================================================== */
/*人生100年時代を支える住まい環境整備モデル事業
============================================================================*/
/*model_list
----------------------------------------------------------------------------*/
.model_list {
      display: flex;
      flex-wrap: wrap;
      list-style: none;
      gap: 3em 3%;
}
.model_list > li {
      position: relative;
      width: 48.5%;
      padding-left: 1%;
      box-sizing: border-box;
}
.model_list .model_list_num {
      position: absolute;
      top: -1.3em;
      left: 0em;
      z-index: 2;
      width: 2.6em;
      height: 2.6em;
      border-radius: 2em;
      line-height: 2.6em;
      text-align: center;
      color: #FFF;
      font-weight: bold;
      background: var(--model_list_num);
}
.model_list_inner {
      display: flex;
      flex-wrap: wrap;
      height: 100%;
      border: 1px solid var(--bg_gray_ll);
}
.model_list_inner .img {
      flex: 1;
}
.model_list_inner img {
      width: 100%;
      height: 100% !important;
      object-fit: cover;
}
.model_list_inner .text_box {
      display: flex;
      flex-direction: column;
      width: 19em;
      padding: 10px;
}
.model_list_title {
      margin-bottom: 0.5em;
      line-height: 1.7;
      font-size: 1.5em;
}
.model_list_title > span {
      display: block;
      font-feature-settings: "palt";
      font-size: 0.5em;
}
.model_list_inner .text_box p {
      flex-grow: 1;
      margin-bottom: .5em;
}
/*btn*/
.model_list_inner .btn > * {
      background: var(--model_list_num);
      padding: 15px 50px 15px 20px;
      border: solid 1px var(--model_list_num);
}
@media screen and (min-width: 961px), print {
      .model_list_inner .btn > *:hover {
            background: #13590b;
            border: solid 1px #13590b;
      }
}
@media screen and (max-width: 960px) {
      .model_list {
            display: block;
      }
      .model_list > li {
            width: auto;
            padding-left: 1%;
      }
      .model_list > li + li {
            margin-top: 2em;
      }
      .model_list_inner .img {
            width: 30%;
      }
      .model_list_inner img {
            width: 100%;
            height: 100% !important;
            object-fit: cover;
      }
      .model_list_inner .text_box {
            width: 70%;
      }
}
@media screen and (max-width: 680px) {
      .model_list_inner {
            display: block;
      }
      .model_list_inner .img {
            width: auto;
            height: 18em;
      }
      .model_list_inner .text_box {
            width: auto;
      }
}
/*数字毎*/
/*色別
------------------------------------------------------------------*/
#koreisha {
      --model_list_num: #1D2974;
}
#shogaisha {
      --model_list_num: #0D8A3B;
}
#wakka {
      --model_list_num: #DE5419;
}
#pet-robot {
      --model_list_num: #7D4D23;
}
/*イメージマップ
------------------------------------------------------------------*/
.walaba_imgmp_area {
      width: calc(755px + 40px);
      margin: auto;
}
.wakaAreamap {
      border: 1px solid #d9d9d9;
      padding: 10px 40px;
      width: 100%;
}
.wakaAmapBg {
      position: relative;
      text-align: center;
}
.wakaAmapBg > img {
      width: 100%;
      height: auto;
}
.wakaAmapPhoto {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
}
.wakaAmapPhoto li {
      position: absolute;
      cursor: pointer;
}
.wakaAmapPhoto li.wakaAmap01 {
      top: 26%;
      left: 4%;
      width: 16.48%;
      height: 72px;
}
.wakaAmapPhoto li.wakaAmap02 {
      top: 11.2%;
      left: 40.5%;
      width: 12.04%;
      height: 67px;
}
.wakaAmapPhoto li.wakaAmap03 {
      top: 24%;
      left: 30.5%;
      width: 11.8%;
      height: 69px;
}
.wakaAmapPhoto li.wakaAmap04 {
      top: 16.2%;
      left: 81.8%;
      width: 13.1%;
      height: 78px;
}
.wakaAmapPhoto li.wakaAmap05 {
      top: 59%;
      left: 4%;
      width: 11.8%;
      height: 61px;
}
.wakaAmapPhoto li.wakaAmap06 {
      top: 71%;
      left: 4%;
      width: 14%;
      height: 68px;
}
.wakaAmapPhoto li.wakaAmap07 {
      top: 83%;
      left: 73.1%;
      width: 17.35%;
      height: 68px;
}
.wakaAmapPhoto li:hover {
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, .75);
      animation: fadeInAnime .4s forwards;
}
@keyframes fadeInAnime {
      from {
            opacity: 0;
      }
      to {
            opacity: 1;
      }
}
.wakaAmapPhoto li span {
      display: none;
}
.wakaAmapPhoto li:hover span {
      display: block;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
}
@media screen and (max-width: 960px) {
      .walaba_imgmp_area {
            width: 100%;
      }
      .wakaAreamap {
            width: auto;
            padding: 10px !important;
      }
      .wakaAmapPhoto li {
            display: none;
      }
}
/*障がい者モデル住宅（車いす使用者向け賃貸住宅）
============================================================================*/
.disabled_main_inner {
      position: relative;
}
.disabled_main_inner .img {
      max-width: 90%;
      margin: 0 0 auto auto;
}
.disabled_main_inner .img img {
      width: 100%;
}
.disabled_main_inner .text_box {
      padding: 2em 1.5em 1em 0em;
      width: calc(50% - 1.5em);
      position: absolute;
      left: 0;
      bottom: -3em;
      background: rgba(255, 255, 255, 0.8);
	z-index: 1;
}
.disabled_main_inner_sub  .text_box {
	   left: auto;
	   right: 0;
	   padding: 1em 1em 1em 1em;
}
.disabled_main_inner_sub .img {
      max-width: 70%;
      margin: auto auto  0 0;
}


@media screen and (max-width: 680px) {
      .disabled_main_inner .img {
            max-width: 100%;
      }
      .disabled_main_inner .text_box {
            padding: 1.0em 1.0em 1.0em 1.0em;
            width: calc(95% - 2em);
            position: relative;
            left: 5%;
            bottom: auto;
            transform: translateY(-2em);
      }
}
/* 間取り図モーダル
------------------------------------------------------------------*/
.madori_shoga, .madori_koreisha {
      display: none;
}
.map_modal_overlay {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 9000;
      background: rgba(0, 0, 0, 0.7);
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
}
.map_modal_overlay.is-active {
      display: flex;
      align-items: flex-start;
      justify-content: center;
      padding: 20px;
      box-sizing: border-box;
}
body.modal-open {
      overflow: hidden;
}
.map-modal-panel {
      position: relative;
      background: #fff;
      border-radius: 4px;
      max-width: 860px;
      width: 100%;
      margin: auto;
      padding: 1em 1.5em 1em 1.5em;
      box-sizing: border-box;
      max-height: 80vh;
      overflow-y: auto;
}
.map-modal-close {
      position: absolute;
      top: 10px;
      right: 10px;
      width: 36px;
      height: 36px;
      background: #666;
      border: none;
      border-radius: 50%;
      cursor: pointer;
      padding: 0;
}
.map-modal-close::before, .map-modal-close::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 55%;
      height: 2px;
      background: #fff;
}
.map-modal-close::before {
      transform: translate(-50%, -50%) rotate(45deg);
}
.map-modal-close::after {
      transform: translate(-50%, -50%) rotate(-45deg);
}
/* 間取り図コンテナ
------------------------------------------------------------------*/
.waka_madori_zumen {
      position: relative;
      max-width: 410px;
      width: 100%;
      margin: 2em auto;
}
.waka_madori_zumen_680 {
      max-width: 680px;
	      margin: 1em auto;
}
.waka_madori_zumen > img {
      width: 100%;
      height: auto;
      display: block;
}
.waka_madori_zumen map area {
      cursor: pointer;
}
/* 間取り図ラベル
------------------------------------------------------------------*/
.madori_zoom span {
      position: absolute;
      display: block;
      padding: 4px;
      cursor: pointer;
      text-align: center;
      font-size: 0.85em;
      font-weight: bold;
      line-height: 1.3;
      border-radius: 2px;
      transition: transform 0.2s ease-out;
      color: var(--model_list_num);
}
.madori_zoom span::before {
      content: '';
      display: block;
      width: 22px;
      height: 22px;
      margin: 0 auto 4px;
      background-image: url(../images/wakabadai/icon_zoom.svg);
      background-repeat: no-repeat;
      background-size: contain;
}
.madori_zoom span:hover {
      transform: scale(1.1);
}
/* ラベル位置（障がい者住宅 sh01〜sh08） */
.sh01 {
      top: 32%;
      left: 16.5%;
}
.sh02 {
      top: 43%;
      left: 35%;
}
.sh03 {
      top: 77%;
      left: 27.5%;
}
.sh04 {
      top: 63%;
      left: 44%;
}
.sh05 {
      top: 62%;
      left: 74%;
}
.sh06 {
      top: 90.5%;
      left: 42%;
}
.sh07 {
      top: 24%;
      left: 50%;
}
.sh08 {
      top: 9%;
      left: 35%;
}
/* ラベル位置（高齢者モデル住宅 ko01〜ko08） */
.ko01 {
      top: 20%;
      left: 41%;
}
.ko02 {
      top: 21%;
      left: 19%;
}
.ko03 {
      top: 47%;
      left: 19%;
}
.ko04 {
      top: 72%;
      left: 25%;
}
.ko05 {
      top: 18%;
      left: 78%;
}
.ko06 {
      top: 94%;
      left: 44%;
}
.ko07 {
      top: 61%;
      left: 61%;
}
.ko08 {
      top: 27%;
      left: 69%;
}
/* ラベル位置（Wakka wk01〜wk04） */
.wk01 {
      top: 71%;
      left: 19%;
}
.wk02 {
      top: 70%;
      left: 46%;
}
.wk03 {
      top: 70%;
      left: 77%;
}
.wk04 {
      top: 33%;
      left: 61%;
}
/* モーダル内コンテンツ
------------------------------------------------------------------*/
.midashi_10_5 {
      border-top: 2px solid var(--model_list_num);
      border-bottom: 2px solid var(--model_list_num);
}
.col_main {
      color: var(--model_list_num);
}
.waka_madori_de_title {
      margin-bottom: 1em;
      padding-bottom: 0.3em;
      border-bottom: 1px solid var(--model_list_num);
      color: var(--model_list_num);
      font-size: 1.2em;
}
.waka_madori_de_txt {
      display: flex;
      flex-wrap: wrap;
      gap: 0 1.5em;
      margin-bottom: 1.5em;
}
.waka_madori_de_txt > * {
      width: calc(50% - 1em);
}
.waka_madori_de_txt .disc li {
      margin-bottom: 0;
}
.waka_madori_de_txt_img_y img {
      width: 100%;
}
.waka_madori_de_txt_bottom_img {
      max-width: 360px;
      margin-top: 10px;
}
.waka_madori_de_txt_bottom_img img {
      width: 100%;
}
.waka_madori_de_img {
      display: flex;
      flex-wrap: wrap;
      gap: 1em 1.5em;
}
.waka_madori_de_img li {
      width: calc(50% - 1em);
      box-sizing: border-box;
}
.waka_madori_de_img img {
      width: 100%;
}
.cap {
      font-size: 0.8em;
      color: #555;
      margin-top: 0.3em;
      line-height: 1.4;
}
@media screen and (max-width: 680px) {
      .waka_madori_de_txt {
            display: block;
      }
      .waka_madori_de_txt > * {
            width: auto;
      }
      .waka_madori_de_txt_img_y {
            width: 100%;
            margin: 0 auto 0.5em;
      }
      .waka_madori_de_img li {
            width: 100%;
            margin-bottom: 0.5em;
      }
      .madori_zoom span {
            font-size: 0.72em;
      }
      .madori_zoom span::before {
            width: 18px;
            height: 18px;
      }
}
/* 声のセクション（wakaba_voice）
------------------------------------------------------------------*/
.wakaba_voice {
      position: relative;
      border: 2px solid var(--model_list_num);
      border-radius: 0.5em;
      padding: 1em;
}
.wakaba_voice_ico_01 {
      margin-right: 2em;
      padding-right: 6em;
}
.wakaba_voice_ico_01:before {
      content: "";
      background: url("../images/wakabadai/img3-voice1.png") no-repeat;
      background-size: contain;
      position: absolute;
      right: -2em;
      bottom: -1em;
      width: 6em;
      aspect-ratio: 1;
      z-index: 2;
}
@media screen and (max-width: 680px) {
      .wakaba_voice_ico_01 {
            margin-right: auto;
            padding-right: 1em;
            padding-bottom: 3em;
      }
      .wakaba_voice_ico_01:before {
            left: 0.5em;
            bottom: 0;
      }
}
/* 声のセクション（3人並び版：wakaba_voice_list）
------------------------------------------------------------------*/
.wakaba_voice_ico_02 {
      position: relative;
}
.wakaba_voice_list {
      display: flex;
      gap: 0 2em;
      list-style: none;
      margin: 0;
      padding: 0;
}
.wakaba_voice_list > li {
      position: relative;
      flex: 1;
      padding: 1em 2em 1em 1em;
      border: 2px solid var(--model_list_num);
      border-radius: 0.5em;
}
.wakaba_voice_list > li::before {
      content: "";
      display: block;
      position: absolute;
      right: -1.5em;
      bottom: -1em;
      width: 3.5em;
      aspect-ratio: 1;
      background-repeat: no-repeat;
      background-size: contain;
}
.wakaba_voice_list > li:nth-child(1)::before {
      background-image: url("../images/wakabadai/img2-voice1.png");
}
.wakaba_voice_list > li:nth-child(2)::before {
      background-image: url("../images/wakabadai/img2-voice2.png");
}
.wakaba_voice_list > li:nth-child(3)::before {
      background-image: url("../images/wakabadai/img2-voice3.png");
}
.wakaba_voice_ico_03 .wakaba_voice_list > li:nth-child(1)::before {
      background-image: url("../images/wakabadai/img5-2_voice1.png");
}
.wakaba_voice_ico_03 .wakaba_voice_list > li:nth-child(2)::before {
      background-image: url("../images/wakabadai/img5-2_voice2.png");
}
.wakaba_voice_ico_03 .wakaba_voice_list > li:nth-child(3)::before {
      background-image: url("../images/wakabadai/img5-2_voice3.png");
}
@media screen and (max-width: 680px) {
      .wakaba_voice_list {
            display: block;
      }
      .wakaba_voice_list > li + li {
            margin-top: 1.5em;
      }
      .wakaba_voice_list > li::before {
            right: auto;
            left: 0.5em;
            bottom: 0;
            height: 2.8em;
            width: auto;
      }
	#pet-robot .wakaba_voice_list > li{
		padding-bottom: 3em;
	}
	#pet-robot .wakaba_voice_list > li::before {
		      right: 0.5em;
            left: auto;
	}
}
/* 紹介ボックス（ペットロボットなど）
------------------------------------------------------------------*/
.mo_intro_box {
      background: #FBF3EA;
      border-radius: 0.5em;
      padding: 1.5em;
      align-items: center;
}
.mo_intro_box.mo_imgtext_flex .img {
      width: 20%;
      flex-shrink: 0;
}
.mo_intro_box.mo_imgtext_flex .text_box {
      width: auto;
      flex: 1;
}
@media screen and (max-width: 680px) {
      .mo_intro_box.mo_imgtext_flex .img {
            width: 40%;
            margin: 0 auto;
      }
}
/*.madori_flex_box_line
------------------------------------------------------------*/
.madori_flex_box_line {
      border: solid 1px var(--col_gray);
      padding: 1em;
}