main { background-color: #47403b; color: #fff; }

.page-title { color: #fff; }

.midashi { padding: 8px; font-size: clamp(20px, 2vw, 1.25rem); text-align: center; line-height: 1.44; border: thin solid #c87f52; border-width: 1px 0; margin: 2rem auto; }
@media screen and (max-width: 834px) { .midashi { margin-bottom: 1.5rem; } }
@media screen and (max-width: 560px) { .midashi { margin-bottom: 1.25rem; } }

#Residence { overflow-x: hidden; }
#Residence .contents-wrap { padding-top: 0; }
#Residence .facade { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; align-items: center; padding-bottom: 4rem; }
#Residence .facade div, #Residence .facade li { min-height: 0%; }
#Residence .facade .image { width: 56%; }
#Residence .facade .text { width: 40%; }
#Residence .facade .text .lead { text-align: left; }
#Residence .facade .text .lead .aw { display: inline; }
#Residence .entrance { background: url("../images/share/bg_stripe01.png") center center/26px auto repeat; padding-top: 4rem; }
#Residence .entrance .image { max-width: 1440px; margin: auto; }
#Residence .entrance .text { color: #000; }
#Residence .ent-hall { padding-top: 4rem; padding-bottom: 4rem; }
#Residence .ent-hall .contents-wrap { display: flex; align-items: center; justify-content: space-between; padding-bottom: 2.5rem; flex-wrap: wrap; max-width: none; max-width: 1440px; padding-right: 0; }
#Residence .ent-hall .img-eh1 { width: 64%; order: 2; margin-right: calc(50% - 50vw); }
#Residence .ent-hall .img-eh1 .img .cap { padding-right: 0.5rem; }
#Residence .ent-hall .left-wrap { width: 36%; order: 1; display: flex; align-items: center; justify-content: flex-end; }
#Residence .ent-hall .left-wrap .text { max-width: 560px; margin-left: auto; margin-right: 0; }
#Residence .ent-hall .colmun { order: 3; width: 88%; max-width: 800px; margin: 2.5rem auto 0; border: thin solid #d3966f; background-color: rgba(255, 255, 255, 0.08); padding: 2.5rem; }
#Residence .ent-hall .colmun .cl-midashi { font-size: clamp(20px, 1.2vw, 1.25rem); text-align: center; color: #d2946c; line-height: 1.44; padding-bottom: 1rem; }
#Residence .ent-hall .colmun .shop-logo { max-width: 340px; margin: 1.5rem auto 0; }
#Residence .ent-hall .img-eh2 { max-width: 1440px; margin: auto; }
@media screen and (max-width: 768px) { #Residence .facade { padding-bottom: 0; }
  #Residence .facade .text .lead .aw { display: inline-block; }
  #Residence .entrance { padding-top: 3rem; }
  #Residence .ent-hall .contents-wrap { display: block; align-items: center; padding-bottom: 2.5rem; flex-wrap: wrap; max-width: none; width: 100%; padding-right: 0; }
  #Residence .ent-hall .img-eh1 { width: 90%; margin-left: 5%; margin-right: 5%; }
  #Residence .ent-hall .left-wrap { width: 88%; display: block; margin: auto; }
  #Residence .ent-hall .left-wrap .text { margin-left: 0%; max-width: none; } }
@media screen and (max-width: 560px) { #Residence .facade .image { width: 100%; }
  #Residence .facade .image .img .cap.in { position: static; width: 100%; text-align: right; }
  #Residence .facade .text { width: 100%; }
  #Residence .facade .text .lead { text-align: center; }
  #Residence .ent-hall { container-type: inline-size; }
  #Residence .ent-hall .img-eh1 { margin-inline: calc(50% - 50cqi); width: 100cqi; padding-left: 6%; order: 1; }
  #Residence .ent-hall .text { width: 100%; order: 2; }
  #Residence .ent-hall .colmun { width: 90%; } }

#Other { background: url("../images/share/bg_stripe01.png") center center/26px auto repeat; color: #000; }
#Other .contents-wrap { padding-top: 2rem; }
#Other .green .green-list { padding-top: 2rem; }
#Other .green .green-list > ul { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; }
#Other .green .green-list > ul div, #Other .green .green-list > ul li { min-height: 0%; }
#Other .green .green-list > ul li { width: calc(96% / 6); margin-bottom: 0.5rem; }
#Other .green .green-list > ul li .img .cap.out { text-align: center; font-size: clamp(12px, 1vw, 0.875rem); }
#Other .green .green-list > ul li.note { width: 100%; text-align: right; }
#Other .support { padding-top: 2rem; }
#Other .support .support-list { max-width: 920px; margin: auto; }
#Other .support .support-list > ul { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; }
#Other .support .support-list > ul div, #Other .support .support-list > ul li { min-height: 0%; }
#Other .support .support-list > ul li { width: calc(92% / 3); margin-bottom: 0.5rem; }
#Other .support .support-list > ul li .img .cap.out { text-align: center; font-size: clamp(12px, 1vw, 0.875rem); }
#Other .support .support-list > ul li.note { width: 100%; text-align: right; }
@media screen and (max-width: 834px) { #Other .contents-wrap, #Other .support { padding-top: 1rem; } }
@media screen and (max-width: 560px) { #Other .green .green-list > ul li { width: calc(96% / 3); }
  #Other .support .support-list > ul { justify-content: center; }
  #Other .support .support-list > ul li { width: calc(96% / 2); margin-right: 4%; margin-bottom: 1rem; }
  #Other .support .support-list > ul li:nth-of-type(2n), #Other .support .support-list > ul li:last-of-type { margin-right: 0; } }
