/*
Theme responsive add-on for TOTAL CREATE
Phase 1 / 2026-06-28
PC layout is intentionally untouched. Rules below affect tablet/smartphone only.
*/

.sp-menu-btn {
  display: none;
}

@media screen and (max-width: 768px) {
  html, body {
    width: 100%;
    min-width: 0 !important;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
  }

  body {
    font-size: 14px;
    line-height: 1.8;
  }

  img {
    max-width: 100%;
    height: auto;
  }

  table {
    width: 100% !important;
    max-width: 100%;
  }

  #Wrapper,
  #Header,
  #Gnavi,
  #mainvisual,
  #mainvisual .inner,
  .Container,
  .Contents,
  .Contents .inner,
  #Footer,
  #Footer .footerinfo {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    box-sizing: border-box;
  }

  #Wrapper {
    margin: 0;
    padding: 0;
  }

  .Container,
  .Contents,
  .Contents .inner {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .ph20,
  .ph30,
  .pb30 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Header */
  #Header {
    padding: 18px 16px 14px !important;
    text-align: center;
  }

  #Header .logo,
  #Header .subtxt,
  #Header .tel {
    float: none !important;
    width: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: center !important;
  }

  #Header .logo img {
    width: auto;
    max-width: 78%;
  }

  #Header .subtxt {
    margin-top: 8px !important;
    font-size: 11px !important;
    line-height: 1.5;
  }

  #Header .tel {
    margin-top: 8px !important;
    font-size: 18px !important;
    line-height: 1.4;
  }

  #Header .tel span {
    display: block;
    margin-left: 0 !important;
    font-size: 10px !important;
  }

  /* Main visual */
  #mainvisual {
    height: auto !important;
    min-height: 0 !important;
    background-size: cover !important;
    background-position: center center !important;
  }

  #mainvisual .inner {
    height: auto !important;
    padding: 28px 16px 22px !important;
    text-align: center;
  }

  #mainvisual .inner img {
    width: auto;
    max-width: 84%;
  }

  /* Global navigation */
  #Gnavi {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #222;
    z-index: 50;
  }

  .sp-menu-btn {
    display: flex;
    width: 100%;
    height: 48px;
    margin: 0;
    padding: 0 16px;
    border: 0;
    border-radius: 0;
    background: #222;
    color: #fff;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    font-family: inherit;
  }

  .sp-menu-btn span {
    display: block;
    width: 20px;
    height: 2px;
    background: #fff;
    transition: transform .2s ease, opacity .2s ease;
  }

  .sp-menu-btn em {
    display: inline-block;
    margin-left: 6px;
    font-style: normal;
    font-size: 12px;
    letter-spacing: .18em;
  }

  #Gnavi.is-open .sp-menu-btn span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }

  #Gnavi.is-open .sp-menu-btn span:nth-child(2) {
    opacity: 0;
  }

  #Gnavi.is-open .sp-menu-btn span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }

  #Gnavi ul,
  #Gnavi #GnaviList {
    display: none;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff;
    border-top: 1px solid #ddd;
  }

  #Gnavi.is-open ul,
  #Gnavi.is-open #GnaviList {
    display: block;
  }

  #Gnavi li {
    display: block !important;
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid #e5e5e5;
  }

  #Gnavi li a {
    display: block !important;
    width: auto !important;
    height: auto !important;
    padding: 14px 16px !important;
    text-align: left !important;
    line-height: 1.4 !important;
    background-image: none !important;
    color: #222 !important;
    text-decoration: none;
    box-sizing: border-box;
  }

  #Gnavi li a span {
    display: inline-block !important;
    margin-left: 10px;
    font-size: 10px;
    letter-spacing: .08em;
    color: #888;
  }

  /* Top banners / page banners */
  .bannerLset,
  .bannerSset {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box;
  }

  .bannerLset .banner,
  .bannerLset > div,
  .bannerSset p {
    display: block !important;
    float: none !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 0 14px !important;
    box-sizing: border-box;
  }

  .bannerLset .banner a,
  .bannerLset > div a {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 96px;
    padding: 22px 18px !important;
    box-sizing: border-box;
    background-size: cover !important;
    background-position: center center !important;
  }

  .bannerLset .banner .ttl,
  .bannerLset .banner .sub {
    display: block !important;
    width: auto !important;
  }

  .bannerSset img {
    width: 100%;
  }

  .mr20 {
    margin-right: 0 !important;
  }

  /* Home project blocks */
  .whatsnew_list_stop,
  .whatsnew_list_stop .block,
  .whatsnew_list_stop .block a,
  .whatsnew_list_stop .inset,
  .whatsnew_list_stop .imgset {
    display: block !important;
    float: none !important;
    width: 100% !important;
    height: auto !important;
    box-sizing: border-box;
  }

  .whatsnew_list_stop .block {
    margin: 0 0 22px !important;
  }

  .whatsnew_list_stop .inset {
    padding: 16px !important;
  }

  .whatsnew_list_stop .imgset p {
    margin: 0 !important;
  }

  /* Castello block */
  .castellodimare,
  .castellodimare .block,
  .castellodimare .image,
  .castellodimare .lead {
    display: block !important;
    float: none !important;
    width: 100% !important;
    height: auto !important;
    box-sizing: border-box;
  }

  .castellodimare .lead {
    padding: 16px !important;
  }

  .castellodimare .title {
    font-size: 17px !important;
    line-height: 1.5;
  }

  .castellodimare .link {
    word-break: break-all;
  }

  /* Project list */
  .project .lineup,
  .project .lineup .imgset,
  .project .lineup .dataset {
    display: block !important;
    float: none !important;
    width: 100% !important;
    height: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
  }

  .project .lineup {
    padding: 18px 0 !important;
  }

  .project .lineup .imgset {
    margin-bottom: 14px !important;
  }

  .project table,
  .project tbody,
  .project tr,
  .project th,
  .project td {
    display: block;
    width: 100% !important;
    box-sizing: border-box;
  }

  .project th {
    margin-top: 8px;
  }

  .project td {
    margin-bottom: 8px;
  }

  /* Results list */
  .results .lineup,
  .results .lineup .imgset,
  .results .lineup .dataset,
  .results .lineup li,
  .results ul li {
    float: none !important;
    width: 100% !important;
    height: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
  }

  /* Gallery */
  .gallery .lineup ul,
  .gallery .photo ul {
    margin-left: 0 !important;
    padding-left: 0 !important;
  }

  .gallery .lineup li,
  .gallery .photo li {
    float: left !important;
    width: 48% !important;
    height: auto !important;
    margin: 0 4% 16px 0 !important;
    list-style: none;
    box-sizing: border-box;
  }

  .gallery .lineup li:nth-child(2n),
  .gallery .photo li:nth-child(2n) {
    margin-right: 0 !important;
  }

  .gallery .lineup li a,
  .gallery .photo li a,
  .gallery .positionset {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    box-sizing: border-box;
  }

  .gallery .positionset img,
  .gallery .photo img {
    width: 100%;
  }

  .gallery .gttl {
    font-size: 18px !important;
    line-height: 1.5;
  }

  /* General content */
  h1 {
    font-size: 22px !important;
    line-height: 1.5 !important;
  }

  h2 {
    font-size: 19px !important;
    line-height: 1.5 !important;
  }

  h3 {
    font-size: 17px !important;
    line-height: 1.5 !important;
  }

  .fontL {
    font-size: 15px !important;
  }

  .lhL {
    line-height: 1.9 !important;
  }

  /* Footer */
  #Footer {
    margin-top: 28px !important;
    padding-top: 26px !important;
    text-align: center;
  }

  #Footer .footerinfo {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  #Footer .cname {
    font-size: 18px !important;
  }

  #Footer .add,
  #Footer .subtxt {
    font-size: 12px !important;
    line-height: 1.7;
  }

  #Footer .tel {
    font-size: 20px !important;
    line-height: 1.4;
  }

  #Footer .tel span {
    display: block;
    margin-left: 0 !important;
    font-size: 10px !important;
  }

  #loopslider {
    width: 100% !important;
    overflow: hidden;
  }

  #loopslider ul,
  #loopslider li {
    height: auto !important;
  }

  #loopslider img {
    width: auto;
    max-width: none;
    height: 90px;
  }

  .pagetop {
    right: 12px !important;
    bottom: 12px !important;
    z-index: 100;
  }
}

@media screen and (max-width: 480px) {
  .Container,
  .Contents,
  .Contents .inner {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .gallery .lineup li,
  .gallery .photo li {
    float: none !important;
    width: 100% !important;
    margin-right: 0 !important;
  }

  .bannerLset,
  .bannerSset {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

/* ================================
   Phase 1-1 adjustment / 2026-06-28
   Screenshots feedback fixes
================================ */
@media screen and (max-width: 768px) {
  /* Prevent old fixed/absolute PC layout from breaking mobile header */
  #Header {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    height: auto !important;
    min-height: 118px !important;
    padding: 12px 12px 14px !important;
    overflow: hidden !important;
    background: #fff !important;
  }

  #Header p,
  #Header .logo,
  #Header .subtxt,
  #Header .tel {
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    clear: both !important;
    display: block !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    box-sizing: border-box !important;
    white-space: normal !important;
  }

  #Header .subtxt {
    order: 1;
    margin-bottom: 4px !important;
    color: #555 !important;
    font-size: 11px !important;
    line-height: 1.45 !important;
    letter-spacing: 0 !important;
  }

  #Header .logo {
    order: 2;
    margin: 2px 0 0 !important;
    line-height: 1 !important;
  }

  #Header .logo img {
    display: inline-block !important;
    width: 160px !important;
    max-width: 55vw !important;
    height: auto !important;
    vertical-align: bottom !important;
  }

  #Header .tel {
    order: 3;
    margin-top: 2px !important;
    color: #1f5d96 !important;
    font-size: 18px !important;
    font-weight: normal !important;
    line-height: 1.15 !important;
    letter-spacing: 0 !important;
  }

  #Header .tel span {
    display: inline-block !important;
    margin-left: 6px !important;
    color: #1f5d96 !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
    vertical-align: middle !important;
  }

  /* Menu button: make three lines vertical hamburger, not side-by-side */
  .sp-menu-btn {
    position: relative !important;
    display: block !important;
    height: 50px !important;
    padding: 0 !important;
    text-align: center !important;
    line-height: 50px !important;
  }

  .sp-menu-btn span {
    position: absolute !important;
    left: 50% !important;
    display: block !important;
    width: 28px !important;
    height: 2px !important;
    margin-left: -48px !important;
    background: #fff !important;
  }

  .sp-menu-btn span:nth-child(1) { top: 18px !important; }
  .sp-menu-btn span:nth-child(2) { top: 25px !important; }
  .sp-menu-btn span:nth-child(3) { top: 32px !important; }

  .sp-menu-btn em {
    display: inline-block !important;
    margin-left: 54px !important;
    color: rgba(255,255,255,.35) !important;
    font-size: 11px !important;
    letter-spacing: .12em !important;
    line-height: 50px !important;
    vertical-align: top !important;
  }

  #Gnavi.is-open .sp-menu-btn span:nth-child(1) {
    top: 25px !important;
    transform: rotate(45deg) !important;
  }
  #Gnavi.is-open .sp-menu-btn span:nth-child(2) { opacity: 0 !important; }
  #Gnavi.is-open .sp-menu-btn span:nth-child(3) {
    top: 25px !important;
    transform: rotate(-45deg) !important;
  }

  /* Blue bar below navigation */
  #Gnavi + .Container,
  #Gnavi + #mainvisual,
  #Gnavi + div {
    border-top: 22px solid #075ba7 !important;
  }

  /* Common content width: prevent one-character vertical text collapse */
  .Container,
  .Contents,
  .Contents .inner,
  #page .Container,
  #page .Contents,
  #page .Contents .inner,
  #top .Container,
  #top .Contents,
  #top .Contents .inner {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  .Contents .inner {
    padding-top: 38px !important;
    padding-bottom: 10px !important;
  }

  .Contents p,
  .Contents li,
  .Contents td,
  .Contents th,
  .Contents dt,
  .Contents dd,
  .Contents div {
    max-width: 100% !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
  }

  .Contents .fl,
  .Contents .fr,
  .Contents .left,
  .Contents .right,
  .Contents .floatL,
  .Contents .floatR,
  .Contents .imgL,
  .Contents .imgR {
    float: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Page title */
  .Contents h1 {
    margin: 0 0 24px !important;
    padding-bottom: 12px !important;
    font-size: 22px !important;
    line-height: 1.4 !important;
  }
  .Contents h1 span {
    display: inline-block !important;
    margin-left: 10px !important;
    color: #aaa !important;
    font-size: 12px !important;
    letter-spacing: .18em !important;
    vertical-align: middle !important;
  }

  /* Home: keep first view and card blocks calmer */
  #top #mainvisual .inner {
    min-height: 270px !important;
    padding-top: 40px !important;
    padding-bottom: 36px !important;
  }
  #top #mainvisual .inner img {
    max-width: 78% !important;
  }

  #top .Contents .inner > h1,
  #top .lead,
  #top .catch,
  #top .maintxt {
    max-width: 92% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  .whatsnew_list_stop .block {
    background: #f6f6f6 !important;
  }
  .whatsnew_list_stop .imgset,
  .project .lineup .imgset,
  .results .lineup .imgset {
    background: #f4f4f4 !important;
    text-align: center !important;
  }
  .whatsnew_list_stop .imgset img,
  .project .lineup .imgset img,
  .results .lineup .imgset img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
  }

  /* Project/results cards */
  .project .lineup,
  .results .lineup {
    margin-bottom: 34px !important;
    padding: 0 0 18px !important;
    border-bottom: 1px solid #e5e5e5 !important;
  }
  .project .lineup .ttl,
  .project .lineup .dataset,
  .results .lineup .dataset {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .project .lineup .ttl h2 {
    display: inline-block !important;
    max-width: 68% !important;
    font-size: 18px !important;
    line-height: 1.4 !important;
    vertical-align: middle !important;
  }
  .project .lineup .ttl span {
    vertical-align: middle !important;
  }
  .project table {
    border-collapse: separate !important;
    border-spacing: 0 6px !important;
  }
  .project th p,
  .project td p {
    padding: 9px 10px !important;
    text-align: center !important;
  }
  .project th p {
    background: #f1f1f1 !important;
    color: #555 !important;
    font-weight: bold !important;
  }
  .project td p {
    background: #fff !important;
  }

  /* Gallery: one column with readable card */
  .gallery .lineup li,
  .gallery .photo li {
    float: none !important;
    width: 100% !important;
    margin: 0 0 20px !important;
  }
  .gallery .lineup li a,
  .gallery .photo li a {
    background: #fff !important;
    box-shadow: 0 1px 5px rgba(0,0,0,.16) !important;
  }
  .gallery .lineup li a span {
    display: block !important;
    width: auto !important;
    padding: 8px 12px !important;
    background: #075ba7 !important;
    color: #fff !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  /* Page banners */
  .bannerLset,
  .bannerSset {
    margin-top: 32px !important;
    margin-bottom: 28px !important;
  }
  .bannerLset img,
  .bannerSset img,
  .bannerLset a,
  .bannerSset a {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Company table / privacy text */
  .company table,
  .company tbody,
  .company tr,
  .company th,
  .company td {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .company th {
    width: 28% !important;
  }
  .company td {
    width: 72% !important;
  }
  .privacypolicy,
  .privacy,
  .business,
  .message,
  .company {
    font-size: 14px !important;
    line-height: 1.9 !important;
  }
  .privacypolicy li,
  .privacy li,
  .business li {
    margin-bottom: 12px !important;
  }

  /* Google map / iframe */
  iframe,
  object,
  embed {
    max-width: 100% !important;
  }

  /* Footer: avoid phone/address overlap */
  #Footer,
  #Footer .footerinfo {
    position: relative !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  #Footer .footerinfo {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding-top: 0 !important;
    padding-bottom: 22px !important;
  }
  #Footer .footerinfo > * {
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    float: none !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 0 7px !important;
    padding: 0 !important;
    text-align: left !important;
    box-sizing: border-box !important;
  }
  #Footer .tel {
    order: 2;
    color: #fff !important;
    font-size: 22px !important;
    text-align: left !important;
  }
  #Footer .tel span {
    display: inline-block !important;
    margin-left: 8px !important;
    font-size: 10px !important;
  }
  #Footer .subtxt { order: 1; }
  #Footer .navi { order: 3; }
  #Footer .cname { order: 4; }
  #Footer .add { order: 5; }

  #loopslider {
    margin-top: 14px !important;
    padding-bottom: 10px !important;
  }
  #loopslider ul {
    display: flex !important;
    gap: 18px !important;
    width: max-content !important;
  }
  #loopslider li {
    flex: 0 0 auto !important;
    float: none !important;
  }
  #loopslider img {
    height: 82px !important;
    width: auto !important;
  }
  #Footer .copy {
    padding: 16px 8px 20px !important;
    font-size: 10px !important;
    letter-spacing: .08em !important;
    text-align: center !important;
  }
}

@media screen and (max-width: 480px) {
  #Header { min-height: 112px !important; }
  #Header .logo img { width: 148px !important; max-width: 58vw !important; }
  #Header .tel { font-size: 17px !important; }
  #Header .tel span { display: block !important; margin: 2px 0 0 !important; }

  .Contents .inner { padding-top: 34px !important; }
  .project .lineup .ttl h2 { max-width: 64% !important; }
  .company th { width: 30% !important; }
  .company td { width: 70% !important; }
}

/* ================================
   Phase 1-2 adjustment / 2026-06-28
   TOP feedback fixes: menu clipping, main visual width, bottom banners overflow
================================ */
@media screen and (max-width: 768px) {
  html,
  body,
  #Wrapper {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* TOP main visual: the original image must fill the smartphone width */
  body#top #mainvisual {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    background: none !important;
  }

  body#top #mainvisual .inner {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    text-align: center !important;
    background: #fff !important;
  }

  body#top #mainvisual .inner img {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Navigation: when opened, do not let the old mainvisual area crop the menu */
  #Gnavi,
  body#top #mainvisual #Gnavi {
    position: relative !important;
    z-index: 9999 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  #Gnavi #GnaviList,
  #Gnavi ul {
    position: static !important;
    left: auto !important;
    top: auto !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  #Gnavi.is-open #GnaviList,
  #Gnavi.is-open ul {
    display: block !important;
  }

  #Gnavi.is-open li,
  #Gnavi.is-open li a {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Reset the first blue border after the menu so it does not affect menu height */
  body#top #mainvisual + .Container {
    border-top: 22px solid #075ba7 !important;
  }

  /* Large/small page banners: force every item to stay inside viewport */
  .bannerLset,
  .bannerSset {
    display: block !important;
    float: none !important;
    clear: both !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .bannerLset .banner,
  .bannerLset > div,
  .bannerSset p {
    display: block !important;
    float: none !important;
    clear: both !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 0 14px 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .bannerLset .banner a,
  .bannerLset > div a {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 96px !important;
    min-height: 96px !important;
    margin: 0 !important;
    padding: 22px 18px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }

  .bannerSset a,
  .bannerSset img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  .bannerLset .banner .ttl,
  .bannerLset .banner .sub {
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
  }
}

@media screen and (max-width: 480px) {
  .bannerLset,
  .bannerSset {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .bannerLset .banner a,
  .bannerLset > div a {
    height: 86px !important;
    min-height: 86px !important;
    padding: 18px 16px !important;
  }
}

/* ================================
   Phase 1-3 adjustment / 2026-06-28
   Restore TOP main visual, detach mobile nav from hero, fix viewport overflow
================================ */
@media screen and (max-width: 768px) {
  /* Site-wide viewport guard */
  html,
  body,
  #Wrapper {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  /* TOP hero: keep the original slideshow feeling instead of turning it into a white logo area */
  body#top #mainvisual {
    position: relative !important;
    display: block !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 300px !important;
    min-height: 300px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background-image: url('/images_new/mainvisual01.jpg') !important;
    background-size: cover !important;
    background-position: center bottom !important;
    background-repeat: no-repeat !important;
  }

  body#top #mainvisual .inner {
    position: relative !important;
    z-index: 3 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 300px !important;
    min-height: 300px !important;
    margin: 0 !important;
    padding: 0 18px !important;
    overflow: visible !important;
    background: transparent !important;
    box-sizing: border-box !important;
  }

  body#top #mainvisual .inner img {
    display: block !important;
    width: auto !important;
    max-width: 78vw !important;
    height: auto !important;
    margin: 0 auto !important;
  }

  /* bgStretcher generated elements: keep them behind the logo and covering the viewport */
  body#top #mainvisual .bgstretcher,
  body#top #mainvisual .bgstretcher ul,
  body#top #mainvisual .bgstretcher li,
  body#top #mainvisual [class*="bgstretcher"] {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 300px !important;
    overflow: hidden !important;
  }

  body#top #mainvisual .bgstretcher img,
  body#top #mainvisual [class*="bgstretcher"] img {
    width: auto !important;
    min-width: 100vw !important;
    max-width: none !important;
    height: 300px !important;
    object-fit: cover !important;
    object-position: center bottom !important;
  }

  /* After responsive.js moves TOP nav outside #mainvisual, keep it as normal block */
  body#top > #Wrapper > #Gnavi,
  body#top #Wrapper > #Gnavi {
    position: relative !important;
    z-index: 10000 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  body#top #Gnavi + .Container {
    border-top: 22px solid #075ba7 !important;
  }

  /* Prevent old fixed-width sections from pushing the whole page sideways */
  .Container,
  .Contents,
  .Contents .inner,
  .bannerLset,
  .bannerSset,
  .castellodimare,
  .castellodimare .block,
  .castellodimare .image,
  .castellodimare .lead,
  .whatsnew_list_stop,
  .project,
  .results,
  .gallery {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  /* Bottom and common banners: use viewport width, not inherited old PC widths */
  .bannerLset,
  .bannerSset {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    box-sizing: border-box !important;
  }

  .bannerLset .banner,
  .bannerLset > div,
  .bannerSset p {
    width: calc(100vw - 36px) !important;
    max-width: calc(100vw - 36px) !important;
    min-width: 0 !important;
    margin: 0 auto 14px !important;
    overflow: hidden !important;
  }

  .bannerSset a,
  .bannerSset img,
  .bannerLset a,
  .bannerLset img {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* TOP Castello image/text currently creates the biggest horizontal overflow */
  .castellodimare,
  .castellodimare .block,
  .castellodimare .image,
  .castellodimare .lead {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  .castellodimare .image img,
  .castellodimare img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
  }

  .castellodimare .lead {
    padding: 16px !important;
    text-align: center !important;
  }
}

@media screen and (max-width: 480px) {
  body#top #mainvisual,
  body#top #mainvisual .inner,
  body#top #mainvisual .bgstretcher,
  body#top #mainvisual .bgstretcher ul,
  body#top #mainvisual .bgstretcher li,
  body#top #mainvisual [class*="bgstretcher"] {
    height: 250px !important;
    min-height: 250px !important;
  }

  body#top #mainvisual .bgstretcher img,
  body#top #mainvisual [class*="bgstretcher"] img {
    height: 250px !important;
  }

  .bannerLset,
  .bannerSset {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .bannerLset .banner,
  .bannerLset > div,
  .bannerSset p {
    width: calc(100vw - 32px) !important;
    max-width: calc(100vw - 32px) !important;
  }
}


/* ================================
   Phase 1-4 adjustment / 2026-06-28
   Fix mobile image overflow, lower banners, footer loop slider
================================ */
@media screen and (max-width: 768px) {
  html,
  body,
  #Wrapper {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Do not let old fixed-width images push the viewport sideways */
  .Container img,
  .Contents img,
  .pagebanner img,
  .project img,
  .results img,
  .gallery img,
  .castellodimare img,
  .bannerSset img {
    display: block !important;
    max-width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
  }

  .Container,
  .Contents,
  .Contents .inner {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  /* TOP hero / bgStretcher: keep the visual, but crop inside the viewport */
  body#top #mainvisual {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  body#top #mainvisual .bgstretcher,
  body#top #mainvisual .bgstretcher ul,
  body#top #mainvisual .bgstretcher li {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  body#top #mainvisual .bgstretcher img {
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;
    height: 250px !important;
    object-fit: cover !important;
    object-position: center bottom !important;
  }

  /* Common lower banners: cancel old right/float layout completely */
  .bannerSset,
  .Contents .bannerSset,
  #top .bannerSset {
    float: none !important;
    clear: both !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 32px auto 28px !important;
    padding: 0 !important;
    transform: none !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  .bannerSset p,
  .Contents .bannerSset p,
  #top .bannerSset p {
    float: none !important;
    clear: both !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .bannerSset a,
  .Contents .bannerSset a,
  #top .bannerSset a,
  .bannerSset img,
  .Contents .bannerSset img,
  #top .bannerSset img {
    float: none !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* Large top three banners */
  .bannerLset,
  .Contents .bannerLset,
  #top .bannerLset {
    float: none !important;
    clear: both !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 24px auto 28px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  .bannerLset .banner,
  .bannerLset > div {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 12px !important;
  }

  /* Footer auto horizontal slider: force one-row horizontal layout */
  #Footer #loopslider {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 120px !important;
    margin: 18px 0 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
  }

  #Footer #loopslider ul {
    position: relative !important;
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    height: 120px !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    font-size: 0 !important;
  }

  #Footer #loopslider li {
    float: none !important;
    display: inline-block !important;
    width: 150px !important;
    height: 96px !important;
    margin: 0 12px 0 0 !important;
    padding: 0 !important;
    vertical-align: top !important;
    list-style: none !important;
    overflow: hidden !important;
  }

  #Footer #loopslider li img,
  #Footer #loopslider img {
    display: block !important;
    width: 150px !important;
    max-width: none !important;
    height: 96px !important;
    object-fit: cover !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #Footer .copy {
    clear: both !important;
  }
}

@media screen and (max-width: 480px) {
  body#top #mainvisual,
  body#top #mainvisual .inner,
  body#top #mainvisual .bgstretcher,
  body#top #mainvisual .bgstretcher ul,
  body#top #mainvisual .bgstretcher li {
    height: 250px !important;
    min-height: 250px !important;
  }

  #Footer #loopslider li,
  #Footer #loopslider li img,
  #Footer #loopslider img {
    width: 145px !important;
    height: 92px !important;
  }
}

/* ================================
   Phase 1-5 adjustment / 2026-06-28
   Hard reset for remaining mobile horizontal overflow
================================ */
@media screen and (max-width: 768px) {
  html,
  body,
  body#top,
  #Wrapper,
  #Header,
  #Gnavi,
  #mainvisual,
  .Container,
  .Contents,
  .Contents.clearfix,
  .Contents .inner,
  #Footer {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  body,
  #Wrapper {
    overflow-x: clip !important;
  }

  /* Classes added by browser/debug or injected wrappers around oversized nodes */
  .horizontally_long_outer,
  .horizontally_long,
  .tc-mobile-overflow {
    float: none !important;
    clear: both !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    transform: none !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* Any direct content image/link must never define the page width */
  .Contents a,
  .Contents p,
  .Contents div,
  .Contents table,
  .Contents tbody,
  .Contents tr,
  .Contents th,
  .Contents td {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .Contents img,
  .Container img,
  .bannerSset img,
  .bannerLset img,
  .castellodimare img,
  .whatsnew_list_stop img,
  .project img,
  .results img,
  .gallery img {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  /* TOP small lower banners: force simple single column within content width */
  .bannerSset,
  .Contents .bannerSset,
  #top .bannerSset {
    position: static !important;
    float: none !important;
    clear: both !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 32px 0 28px !important;
    padding: 0 !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    overflow: hidden !important;
  }

  .bannerSset p,
  .Contents .bannerSset p,
  #top .bannerSset p,
  .bannerSset a,
  .Contents .bannerSset a,
  #top .bannerSset a {
    position: static !important;
    float: none !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    overflow: hidden !important;
  }

  .bannerSset img,
  .Contents .bannerSset img,
  #top .bannerSset img {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Castello area was still wider than viewport on mobile */
  .castellodimare,
  .castellodimare a,
  .castellodimare .block,
  .castellodimare .image,
  .castellodimare .lead {
    position: static !important;
    float: none !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .castellodimare .lead {
    padding: 16px 0 !important;
  }

  /* Footer loop slider: stop mobile double-row wrapping from the old loop script */
  #Footer #loopslider,
  #Footer #loopslider * {
    box-sizing: border-box !important;
  }

  #Footer #loopslider {
    width: 100% !important;
    max-width: 100% !important;
    height: 110px !important;
    margin: 20px 0 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
  }

  #Footer #loopslider ul {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    width: max-content !important;
    max-width: none !important;
    height: 96px !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    font-size: 0 !important;
  }

  #Footer #loopslider li {
    flex: 0 0 150px !important;
    display: block !important;
    float: none !important;
    width: 150px !important;
    max-width: none !important;
    height: 96px !important;
    margin: 0 12px 0 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  #Footer #loopslider img {
    display: block !important;
    width: 150px !important;
    max-width: none !important;
    height: 96px !important;
    object-fit: cover !important;
    margin: 0 !important;
  }
}

/* ================================
   Phase 1-6 adjustment / 2026-06-28
   TOP hero right gap and banner crop correction
================================ */
@media screen and (max-width: 768px) {
  /* The PC wrapper/content has legacy calculated widths. The hero must be tied to the viewport, not to that wrapper. */
  body#top #mainvisual {
    left: 50% !important;
    right: auto !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    margin-left: -50vw !important;
    margin-right: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  body#top #mainvisual .inner,
  body#top #mainvisual .bgstretcher,
  body#top #mainvisual .bgstretcher ul,
  body#top #mainvisual .bgstretcher li,
  body#top #mainvisual [class*="bgstretcher"] {
    left: 0 !important;
    right: auto !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  body#top #mainvisual .bgstretcher img,
  body#top #mainvisual [class*="bgstretcher"] img {
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: none !important;
    height: 300px !important;
    object-fit: cover !important;
    object-position: center bottom !important;
  }

  /* TOP three large banners: use image ratio fully. Previous phases used overflow/height for button-like banners, which cropped the lower part. */
  body#top .bannerLset,
  body#top .Contents .bannerLset {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 24px 0 28px !important;
    padding: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  body#top .bannerLset p,
  body#top .bannerLset div,
  body#top .bannerLset .banner,
  body#top .bannerLset a {
    position: static !important;
    float: none !important;
    clear: both !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }

  body#top .bannerLset img,
  body#top .bannerLset a img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 0 !important;
    object-fit: contain !important;
  }
}

@media screen and (max-width: 480px) {
  body#top #mainvisual .bgstretcher img,
  body#top #mainvisual [class*="bgstretcher"] img {
    height: 250px !important;
  }
}

/* ================================
   Phase 1-7 adjustment / 2026-06-28
   Restore PC global navigation, stabilize mobile slideshow, restore TOP large banners
================================ */
@media screen and (min-width: 769px) {
  .sp-menu-btn {
    display: none !important;
  }
  #Gnavi,
  #Gnavi #GnaviList,
  #Gnavi ul,
  #Gnavi li,
  #Gnavi li a {
    visibility: visible !important;
    opacity: 1 !important;
  }
  #Gnavi #GnaviList,
  #Gnavi ul {
    display: block !important;
  }
}

@media screen and (max-width: 768px) {
  /* Undo the too-strong viewport shift from Phase 1-6. Keep the hero inside the current mobile viewport. */
  body#top #mainvisual {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 250px !important;
    min-height: 250px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background-size: cover !important;
    background-position: center bottom !important;
  }

  body#top #mainvisual .inner {
    position: relative !important;
    z-index: 4 !important;
    left: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 250px !important;
    min-height: 250px !important;
    margin: 0 !important;
    padding: 0 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  body#top #mainvisual .inner img {
    width: auto !important;
    max-width: 76% !important;
    height: auto !important;
  }

  /* bgStretcher uses capitalized class names and inline styles. Force every slide to cover the same mobile width. */
  body#top #mainvisual.bgStretcher-container,
  body#top #mainvisual [class*="bgStretcher"],
  body#top #mainvisual [class*="bgstretcher"],
  body#top #mainvisual .bgstretcher,
  body#top #mainvisual .bgstretcher ul,
  body#top #mainvisual .bgstretcher li {
    left: 0 !important;
    right: auto !important;
    top: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    height: 250px !important;
    min-height: 250px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background-size: cover !important;
    background-position: center bottom !important;
    box-sizing: border-box !important;
  }

  body#top #mainvisual [class*="bgStretcher"] img,
  body#top #mainvisual [class*="bgstretcher"] img,
  body#top #mainvisual .bgstretcher img {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;
    height: 250px !important;
    min-height: 250px !important;
    object-fit: cover !important;
    object-position: center bottom !important;
    margin: 0 !important;
  }

  /* TOP large three banners are background-image buttons, not img tags. Restore height so they do not vanish/crop. */
  body#top .bannerLset,
  body#top .Contents .bannerLset {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 24px 0 30px !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  body#top .bannerLset .banner,
  body#top .bannerLset > div {
    display: block !important;
    float: none !important;
    clear: both !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  body#top .bannerLset .banner a,
  body#top .bannerLset > div a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    height: clamp(145px, 46vw, 185px) !important;
    min-height: 145px !important;
    margin: 0 !important;
    padding: 18px 14px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    background-size: 100% 100% !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }

  body#top .bannerLset .banner a .ttl,
  body#top .bannerLset .banner a .sub {
    position: static !important;
    display: block !important;
    width: auto !important;
    max-width: 92% !important;
    height: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }
}

/* ================================
   Phase 1-8 final mobile containment / 2026-06-28
   Strong, scoped overrides. PC is untouched.
================================ */
@media screen and (max-width: 768px) {
  html,
  body#top {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  body#top #Wrapper,
  body#top .Container,
  body#top .Contents,
  body#top .Contents.ph20,
  body#top .Contents.clearfix {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  body#top .Container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body#top .Contents,
  body#top .Contents.ph20,
  body#top .Contents.clearfix {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  body#top .Contents > *,
  body#top .Contents.clearfix > *,
  body#top .Contents.ph20 > * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Mobile hero: contain bgStretcher inline styles without affecting PC nav. */
  body#top #mainvisual,
  body#top #mainvisual.bgStretcher-container {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 250px !important;
    min-height: 250px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  body#top #mainvisual > .inner {
    position: relative !important;
    z-index: 5 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 250px !important;
    margin: 0 !important;
    padding: 0 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
  }

  body#top #mainvisual > .inner img {
    display: block !important;
    width: auto !important;
    max-width: 76% !important;
    height: auto !important;
  }

  body#top #mainvisual [class*="bgStretcher"],
  body#top #mainvisual [class*="bgstretcher"],
  body#top #mainvisual .bgstretcher,
  body#top #mainvisual .bgstretcher ul,
  body#top #mainvisual .bgstretcher li {
    position: absolute !important;
    left: 0 !important;
    right: auto !important;
    top: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 250px !important;
    min-height: 250px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  body#top #mainvisual [class*="bgStretcher"] img,
  body#top #mainvisual [class*="bgstretcher"] img,
  body#top #mainvisual .bgstretcher img {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    top: 0 !important;
    transform: translateX(-50%) !important;
    width: auto !important;
    min-width: 100% !important;
    max-width: none !important;
    height: 250px !important;
    min-height: 250px !important;
    object-fit: cover !important;
    object-position: center bottom !important;
    margin: 0 !important;
  }

  /* TOP large 3 banners: these are background-image links. Keep full height, no crop. */
  body#top .bannerLset {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 20px 0 32px !important;
    padding: 0 18px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  body#top .bannerLset .banner,
  body#top .bannerLset > div {
    display: block !important;
    float: none !important;
    clear: both !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  body#top .bannerLset .banner a,
  body#top .bannerLset > div a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 165px !important;
    min-height: 165px !important;
    margin: 0 !important;
    padding: 18px 14px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }

  /* Information table: prevent rows from creating horizontal overflow. */
  body#top .topics,
  body#top .topics table,
  body#top .topics tbody,
  body#top .topics tr,
  body#top .topics th,
  body#top .topics td,
  body#top .topics p {
    display: block !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }

  body#top .topics tr {
    padding: 13px 0 !important;
    border-bottom: 1px solid #e5e5e5 !important;
  }

  body#top .topics th {
    padding: 0 0 4px !important;
    color: #666 !important;
    font-size: 12px !important;
    text-align: left !important;
  }

  body#top .topics td {
    padding: 0 !important;
    font-size: 13px !important;
    line-height: 1.65 !important;
  }

  /* Small lower banners: always one column and full image visible. */
  body#top .bannerSset {
    display: block !important;
    float: none !important;
    clear: both !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 24px 0 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  body#top .bannerSset p,
  body#top .bannerSset a,
  body#top .bannerSset img {
    display: block !important;
    float: none !important;
    clear: both !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  body#top .bannerSset img {
    object-fit: contain !important;
  }
}

/* =========================
   Phase1-9: mobile property cards balance
========================= */
@media screen and (max-width: 768px) {
  body#top .whatsnew_list_stop,
  body#top .whatsnew_list_stop.clearfix {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  body#top .whatsnew_list_stop .block {
    display: block !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 0 22px !important;
    padding: 18px 16px !important;
    background: #f7f7f7 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  body#top .whatsnew_list_stop .block a {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
  }

  body#top .whatsnew_list_stop .block .imgset {
    display: block !important;
    order: 1 !important;
    float: none !important;
    clear: both !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto 14px !important;
    padding: 0 !important;
    text-align: center !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  body#top .whatsnew_list_stop .block .imgset p {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    text-align: center !important;
  }

  body#top .whatsnew_list_stop .block .imgset img {
    display: block !important;
    width: auto !important;
    max-width: 82% !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 auto !important;
    object-fit: contain !important;
  }

  body#top .whatsnew_list_stop .block .inset {
    display: block !important;
    order: 2 !important;
    float: none !important;
    clear: both !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    background: transparent !important;
  }

  body#top .whatsnew_list_stop .block .inset .ttl {
    margin: 0 0 10px !important;
    padding: 0 !important;
    font-size: 16px !important;
    line-height: 1.55 !important;
  }

  body#top .whatsnew_list_stop .block .inset p,
  body#top .whatsnew_list_stop .block .line01 p,
  body#top .whatsnew_list_stop .block .line02 p {
    margin: 0 0 4px !important;
    padding: 0 !important;
    font-size: 12px !important;
    line-height: 1.7 !important;
    color: #333 !important;
    text-align: left !important;
  }
}

/* =========================
   Phase1-10: TOP property cards final balance
   - keep previous overflow fixes
   - image centered with readable text below
========================= */
@media screen and (max-width: 768px) {
  body#top .whatsnew_list_stop .block {
    padding: 16px !important;
    margin: 0 0 22px !important;
    background: #f7f7f7 !important;
    border-radius: 0 !important;
    overflow: visible !important;
  }

  body#top .whatsnew_list_stop .block a {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
  }

  body#top .whatsnew_list_stop .block .imgset {
    order: 1 !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 auto 14px !important;
    padding: 0 !important;
    background: transparent !important;
    text-align: center !important;
    overflow: visible !important;
  }

  body#top .whatsnew_list_stop .block .imgset p {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 0 !important;
    text-align: center !important;
    overflow: visible !important;
  }

  body#top .whatsnew_list_stop .block .imgset img {
    display: block !important;
    width: auto !important;
    max-width: 76% !important;
    max-height: 220px !important;
    height: auto !important;
    margin: 0 auto !important;
    object-fit: contain !important;
  }

  body#top .whatsnew_list_stop .block .inset {
    order: 2 !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    overflow: visible !important;
    text-align: left !important;
  }

  body#top .whatsnew_list_stop .block .inset .ttl {
    display: block !important;
    margin: 0 0 9px !important;
    padding: 0 !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    color: #333 !important;
  }

  body#top .whatsnew_list_stop .block .line01,
  body#top .whatsnew_list_stop .block .line02 {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  body#top .whatsnew_list_stop .block .inset p,
  body#top .whatsnew_list_stop .block .line01 p,
  body#top .whatsnew_list_stop .block .line02 p {
    display: block !important;
    margin: 0 0 3px !important;
    padding: 0 !important;
    font-size: 12px !important;
    line-height: 1.65 !important;
    color: #333 !important;
    text-align: left !important;
    white-space: normal !important;
  }
}

/* =========================
   Phase1-11: TOP property cards no-overlap final
   - reset legacy absolute/float positions
   - mobile: image top, text below, both in normal document flow
========================= */
@media screen and (max-width: 768px) {
  body#top .whatsnew_list_stop {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  body#top .whatsnew_list_stop .block,
  body#top .whatsnew_list_stop .block a,
  body#top .whatsnew_list_stop .block .inset,
  body#top .whatsnew_list_stop .block .imgset,
  body#top .whatsnew_list_stop .block .imgset p,
  body#top .whatsnew_list_stop .block .line01,
  body#top .whatsnew_list_stop .block .line02 {
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    z-index: auto !important;
    float: none !important;
    clear: both !important;
    transform: none !important;
    -webkit-transform: none !important;
    box-sizing: border-box !important;
  }

  body#top .whatsnew_list_stop .block {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 0 22px !important;
    padding: 16px !important;
    background: #f7f7f7 !important;
    overflow: hidden !important;
  }

  body#top .whatsnew_list_stop .block a {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    text-decoration: none !important;
  }

  body#top .whatsnew_list_stop .block .imgset {
    order: 1 !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 auto 14px !important;
    padding: 0 !important;
    background: transparent !important;
    text-align: center !important;
    overflow: visible !important;
  }

  body#top .whatsnew_list_stop .block .imgset p {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    text-align: center !important;
    overflow: visible !important;
  }

  body#top .whatsnew_list_stop .block .imgset img {
    display: block !important;
    position: static !important;
    float: none !important;
    width: auto !important;
    max-width: 78% !important;
    height: auto !important;
    max-height: 210px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    object-fit: contain !important;
  }

  body#top .whatsnew_list_stop .block .inset {
    order: 2 !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    overflow: visible !important;
    text-align: left !important;
  }

  body#top .whatsnew_list_stop .block .inset .ttl {
    display: block !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 0 9px !important;
    padding: 0 !important;
    background: transparent !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    color: #333 !important;
    text-align: left !important;
    white-space: normal !important;
  }

  body#top .whatsnew_list_stop .block .line01,
  body#top .whatsnew_list_stop .block .line02 {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    overflow: visible !important;
  }

  body#top .whatsnew_list_stop .block .inset p,
  body#top .whatsnew_list_stop .block .line01 p,
  body#top .whatsnew_list_stop .block .line02 p {
    display: block !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 0 3px !important;
    padding: 0 !important;
    background: transparent !important;
    font-size: 12px !important;
    line-height: 1.65 !important;
    color: #333 !important;
    text-align: left !important;
    white-space: normal !important;
    word-break: normal !important;
  }
}

/* ================================
   Phase 1-12 / 2026-06-28
   Lower page common content repair
   - fixes MESSAGE page one-character vertical collapse
   - applies TOP-style banner sizing to lower page banners
================================ */
@media screen and (max-width: 768px) {
  body#page .Container,
  body#page .Contents,
  body#page .Contents .inner {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    writing-mode: horizontal-tb !important;
    -webkit-writing-mode: horizontal-tb !important;
  }

  body#page .Contents .inner > *,
  body#page .Contents .inner .message,
  body#page .Contents .inner .message > *,
  body#page .Contents .inner .message div,
  body#page .Contents .inner .message p,
  body#page .Contents .inner .greeting,
  body#page .Contents .inner .greeting > *,
  body#page .Contents .inner .greeting div,
  body#page .Contents .inner .greeting p,
  body#page .Contents .inner .txt,
  body#page .Contents .inner .text,
  body#page .Contents .inner .photo,
  body#page .Contents .inner .image,
  body#page .Contents .inner .img,
  body#page .Contents .inner .box,
  body#page .Contents .inner .block,
  body#page .Contents .inner .left,
  body#page .Contents .inner .right,
  body#page .Contents .inner .fl,
  body#page .Contents .inner .fr {
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    float: none !important;
    clear: both !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    writing-mode: horizontal-tb !important;
    -webkit-writing-mode: horizontal-tb !important;
    transform: none !important;
    -webkit-transform: none !important;
  }

  body#page .Contents .inner p,
  body#page .Contents .inner li,
  body#page .Contents .inner td,
  body#page .Contents .inner th,
  body#page .Contents .inner dd,
  body#page .Contents .inner dt {
    font-size: 14px !important;
    line-height: 1.9 !important;
    letter-spacing: normal !important;
    text-align: left !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    writing-mode: horizontal-tb !important;
    -webkit-writing-mode: horizontal-tb !important;
  }

  body#page .Contents .inner p {
    margin-top: 0 !important;
    margin-bottom: 1.15em !important;
  }

  body#page .Contents .inner img {
    position: static !important;
    float: none !important;
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 16px auto !important;
    box-sizing: border-box !important;
  }

  body#page .Contents .inner h1,
  body#page .Contents .inner h2,
  body#page .Contents .inner h3 {
    clear: both !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    writing-mode: horizontal-tb !important;
    -webkit-writing-mode: horizontal-tb !important;
  }

  /* Lower-page banners: same mobile handling as TOP */
  body#page .bannerLset,
  body#page .bannerSset {
    position: static !important;
    float: none !important;
    clear: both !important;
    display: block !important;
    width: calc(100% - 36px) !important;
    max-width: 520px !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 30px auto 28px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  body#page .bannerLset .banner,
  body#page .bannerLset > div,
  body#page .bannerSset p {
    position: static !important;
    float: none !important;
    clear: both !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  body#page .bannerLset a,
  body#page .bannerSset a,
  body#page .bannerLset img,
  body#page .bannerSset img {
    position: static !important;
    float: none !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
}