@charset "utf-8";

/*
Theme Name: okinawa-longstay.com (2026.05)
Theme URI:
Author:
Author URI:
Description: 2023.08をベースにブラッシュアップ。ハードコードURLの動的化、コードコメント整備、PHP 8互換対応、ショートタグ修正、画像・JSパス改善等。
Version: 2026.05
License:
License URI:
Tags:
Template:
*/

/* ============================================================================
   FILE        : style.css
   THEME       : okinawa-longstay.com (2026.05)
   ----------------------------------------------------------------------------
   STRUCTURE
   - PC / DESKTOP (base, default)
       01. Initialization (Reset & Base)
       02. Block Level Elements
       03. Head
       04. Navi
       05. Foot
       06. Common
       07. Body
       08. Home
       09. News
       10. Column
       11. Buildings / Rooms / Buy
       12. Item Detail
       13. Search Results
       14. Feature Related
       15. Inquiry
       16. Guide / Vacation-Rental
       17. Fx (Effects)
       18. Characters
       19. Misc
   - RESPONSIVE: TABLET   (max-width: 1024px)  —  selective overrides
   - RESPONSIVE: MOBILE   (max-width:  768px)  —  M01 - M15
   ============================================================================ */

/* ============================================================================
   01. INITIALIZATION  —  Reset & base
   ============================================================================ */

html {
  scroll-behavior:smooth;
  scroll-padding-top:130px;
}
body {
  margin:0;
  padding:110px 0 0;
}
section, article, nav, aside, header, footer, address {display:block;}
ul, ol {
  margin:0;
  padding:0;
  list-style-type:none;
}
table {border-collapse:collapse;}
td {word-break:break-all;}
img {border:none;}

input[type="text"], input[type="email"], input[type="tel"],
input[type="number"],
input[type="date"],
textarea {
  appearance:none;
  box-sizing:border-box;
  padding:10px;
  width:100%;
  background-color:rgba(255, 255, 255, 1);
  border:1px solid rgba(113, 113, 113, 1);
}
input[type="date"],
textarea {
  padding:0.9em;
  height: 50px;
}
input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus,
input[type="number"]:focus, input[type="number"]:focus,
textarea:focus {
  outline:none;
  background-color:rgba(1, 53, 115, 0.05);
  border:1px solid rgba(1, 53, 115, 1);
}
textarea {height:10em;}
input[type="checkbox"], input[type="radio"] {
  scale:1;
  vertical-align:middle;
  margin-top:-0.1em;
  accent-color:rgba(80, 80, 80, 1);
}
input[type="checkbox"] {
  width:20px;
  height:20px;
}
input[type="radio"] {
  width:24px;
  height:24px;
}
select {
  padding:0.6em;
  height:3em;  
  background-color:rgba(1, 53, 115, 0.05);
  border:1px solid rgba(1, 53, 115, 1);
}
select:focus {
  outline:none;
  background-color:rgba(1, 53, 115, 0.05);
  border:1px solid rgba(1, 53, 115, 1);
}
select::-ms-expand {display:none;}
a.btn, button, input[type="submit"], input[type="button"] {
  appearance:none;
  box-sizing:border-box;
  display:inline-block;
  vertical-align:middle;
  text-align:center;
  line-height:1;
  cursor:pointer;
  outline:none;
  padding:1.35em 2em;
  background-color:rgba(0, 44, 102, 1);
  border:none;
}
a.btn:hover, button:hover, input[type="submit"]:hover, input[type="button"]:hover {background-color:rgba(0, 44, 102, 0.66);}
button:disabled, input[type="submit"]:disabled,
button:disabled:hover, input[type="submit"]:disabled:hover {background-color:rgba(0, 44, 102, 0.33);}

form input[type="submit"], form button {
  padding:1.35em 6em;
  max-width:100%;
}

hr {display:none;}
.clear {clear:both;}

/* ============================================================================
   02. BLOCK LEVEL ELEMENTS
   ============================================================================ */

#header {
  position:fixed;
  z-index:2;
  left:0;
  top:0;
  width:100%;
}
#footer {
  background-color:rgba(1, 53, 115, 1);
  overflow:hidden;
}

#header h1, #navi div.content,
#contents,
body.home section div.content {
  margin:0 auto;
  max-width:1320px;
}
div.content,
.path, #title, #main,
body.single #main + footer.index {margin:0 8.33%;}
body.archive .path, body.archive #title, body.archive #main,
body.search .path, body.search #title, body.search #main {margin:0;}

/* ============================================================================
   03. HEAD ELEMENTS  —  global header
   ============================================================================ */

body.admin-bar #header {top:32px}
#header h1 {
  position:relative;
  font-size:0;
}
#header h1 a {
  position:absolute;
  z-index:11;
  left:10px;
  top:17px;
  /* width:min(calc(100% / 12 * 1.75), 192px); */
  width:min(calc(100% / 12 * 1.75), 173px);
  height:76px;
  background:url(images/header_logo.png) center no-repeat;
  background-size:100%;
  font-size:0;
  color:transparent;
}

/* ============================================================================
   04. NAVI ELEMENTS  —  global navigation
   ============================================================================ */

@media only screen and (min-width:1025px) {
  #navi {
    position:fixed;
    z-index:1;
    left:0;
    top:0;
    width:100%;
    height:110px;
    background-color:rgba(1, 53, 115, 1);
  }
  body.admin-bar #navi {top:32px}
  #navi div.content {position:relative;}
  #navi h1 {display:none;}
  #navi div.content > ul {
    /* 固定ページにリスト(<ul class="wp-block-list">)を入れるとWPが
       `wp-block-list-inline-css` で `ol,ul{box-sizing:border-box}` を全ULに注入し、
       本ナビの幅計算（content-box前提）が崩れて項目が見切れる問題への対策。 */
    box-sizing:content-box;
    padding-left:calc(100% / 12 * 2);
    display:flex;
    width:calc(100% / 12 * 6);
  }
  #navi div.content > ul > li > a,
  #navi div.content > ul > li > span {
    position:relative;
    display:block;
    margin:0 20px;
    height:110px;
    line-height:110px;
  }
  #navi div.content > ul > li > span {cursor:default;}
  #navi div.content > ul > li:hover > a::after,
  #navi div.content > ul > li:hover > span::after {
    content:'';
    position:absolute;
    left:0;
    right:0;
    top:calc(50% + 1em);
    border-top:1px solid rgba(255, 255, 255, 1);
  }
  #navi div.content > ul > li:hover > span::after {left:1.5em;}
  #navi div.content > ul > li > span::before {
    content:'';
    display:inline-block;
    vertical-align:middle;
    margin:-0.3em 0.5em 0 0;
    width:1rem;
    height:1rem;
    background:url(images/ic_arrow_06.webp) center no-repeat;
    background-size:55%;
  }
  #navi div.content > ul > li:hover > span::before {rotate:90deg;}
  #navi div.menu {
    visibility:hidden;
    opacity:0;
    display:flex;
    position:absolute;
    left:calc(8.33% + 10px);
    right:calc(8.33% + 10px);
    gap:0 20px;
    padding:2rem 10%;
    background-color:rgba(255, 255, 255, 0.8);
    backdrop-filter:blur(0.5rem);
  }
  #navi div.content > ul > li:hover div.menu {
    visibility:visible;
    opacity:1;
  }
  #navi div.menu > div {
    flex:1;
    max-width:33.33%;
  }
  #navi div.menu h2 {margin:1em 0 1em;}
  #navi div.menu ul + h2 {margin-top:2rem;}
  #navi div.menu ul {margin:1em 0;}
  #navi div.menu li {margin:0.5em 0;}
  #navi div.menu li a {
    display:block;
    padding:0.25em 0;
  }
  #navi div.menu li a:hover {background-color:rgba(244, 249, 248, 1);}

  /* #navi_util */

  #navi_util {
    position:absolute;
    right:0;
    top:0;
    width:calc(100% / 12 * 6);
    display:flex;
    align-items:center;
    justify-content:flex-end;
    height:110px;
  }
  #navi_util > * {margin:0 10px;}

  /* #navi_translate */

  div.gtranslate_wrapper {font-size:0;}
  div.gtranslate_wrapper a {
    position:relative;
    display:inline-block;
    padding:0.7em 1em;
    font-size:0.875rem;
    color:rgba(255, 255, 255, 1);
  }
  div.gtranslate_wrapper a:hover {color:rgba(255, 192, 0, 1);}
  div.gtranslate_wrapper a.gt-current-lang::after {
    content:'';
    position:absolute;
    left:0.7em;
    bottom:0;
    width:calc(100% - 1.4em);
    border-bottom:1px solid rgba(255, 255, 255, 1);
  }
  div.gtranslate_wrapper a:not(:first-child)::before {
    content:'';
    position:absolute;
    left:0;
    top:0;
    height:100%;
    border-right:1px solid rgba(255, 255, 255, 0.5);
  }
  
  #navi_inq {
    position:relative;
    display:block;
    padding:0.8rem;
    background-color:rgba(255, 146, 0, 1);
  }
  #navi_inq::before,
  #btn_inquity a.btn::after,
  a.btn.b::after {
    content:'';
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background:url(images/bt_hover_slight.webp) center no-repeat;
    background-size:100%;
    opacity:0;
    background-blend-mode: soft-light;
  }
  #navi_inq:hover::before,
  #btn_inquity a.btn:hover::after,
  a.btn.b:hover::after {opacity:0.4;}

  #s {
    padding:0.5rem;
    padding-right:calc(1rem + 20px);
    width:180px;
    background-color:rgba(1, 53, 115, 1);
    border:1px solid rgba(255, 255, 255, 1);
  }
  #s:focus {background-color:rgba(255, 255, 255, 0.2);}
  #s:focus::placeholder {color:transparent;}
  #s:focus::selection {background-color:rgba(255, 146, 0, 1);}
  #searchsubmit {
    position:absolute;
    margin:0.6rem 0 0 calc((21px + 0.5rem) * -1);
    width:20px;
    height:20px;
    background:url(images/ic_search.webp) center no-repeat;
    background-size:100%;
    border:none;
    font-size:0;
    color:transparent;
  }

  #navi div.content > ul > li > a,
  #navi div.content > ul > li > span, #s {font-size:0.875rem;}
  #navi div.menu li {line-height:1.3;}
  #navi div.content > ul > li > a,
  #navi div.content > ul > li > span,
  #s, #s::placeholder {color:rgba(255, 255, 255, 1);}

}
      
/* ============================================================================
   05. FOOT ELEMENTS  —  global footer
   ============================================================================ */

#footer div.content {
  display:flex;
  margin:0 auto;
  max-width:1350px;
}
#ft_info {
  margin-right:10%;
  width:40%;
}
#ft_info h1 {
  margin:4rem 10px 2rem;
  font-size:0;
  color:transparent;
}
#ft_info h1 span {
  display:inline-block;
  width:192px;
  height:76px;
  background:url(images/logo.webp) center no-repeat;
  background-size:100%;
}
#ft_info p {margin:1em 10px;}
#ft_info address {
  display:block;
  margin:1rem 10px;
}
#ft_info address span.tel {
  display:block;
  margin:1rem 0;
}
#ft_info div.enquiry {margin:1rem 10px;}
#ft_info div.enquiry a.btn {
  padding:0.85em;
  background-color:rgba(1, 53, 115, 1);
  border:1px solid rgba(255, 255, 255, 1);
}
#ft_info div.enquiry a.btn:hover {background-color:rgba(255, 255, 255, 0.2);}

#ft_navi {
  display:flex;
  width:60%;
}
#ft_navi h1 {display:none;} 
#ft_navi ul {
  margin:4rem 0 0;
  width:50%;
}
#ft_navi li {margin:1em 10px;}

#copyright {
  display:block;
  margin:4rem 10px 0;
  padding:1.5em;
  border-top:1px solid rgba(255, 255, 255, 0.2);
  text-align:center;
}

/* ============================================================================
   06. COMMON ELEMENTS  —  shared parts
   ============================================================================ */

.path h1 {display:none;}
.path p {margin:2em 10px;}
.path span.gt {font-size:0;}
.path span.gt::before {
  content:'/';
  margin:0 0.25em;
}

#title h1 {
  display:block;
  margin:1.5em 10px;
}
#title h3 {
  display:block;
  margin:1.5em 10px;
  color: rgba(1, 53, 115, 1);
  font-size:1.5rem;
}
#title p {
  display:block;
  margin:1.5em 10px;
}

.paginate ul {
  margin:4rem 10px;
  padding:0;
  text-align:center;
  font-size:0;
}
.paginate li {display:inline;}
.paginate li a {
  display:inline-block;
  margin:0 10px;
  padding:0.8rem 1.65rem;
  background-color:rgba(244, 249, 248, 1);
}
.paginate li a:hover {background-color:rgba(1, 53, 115, 0.1);}
.paginate li a:before {
  content:'';
  display:inline-block;
  width:12px;
  height:14px;
  background:url(images/ic_arrow_01.webp) center no-repeat;
  background-size:100%;
}
.paginate li.prev a:before {rotate:180deg;}
.paginate li span {display:none;}

div.btn {
  margin:4rem 10px;
  text-align:center;
}

div.news time::before,
div.post_date time:before,
#item_guide a.btn:before,
#item_bldg a.btn::before {
  content:'';
  display:inline-block;
  vertical-align:middle;
  margin:-0.2em 0.35em 0 0;
  width:1em;
  height:1em;
  background-position:center;
  background-repeat:no-repeat;
  background-size:100%;
}
div.news time::before, div.post_date time:before {background-image:url(images/ic_cal.webp);}
#item_guide a.btn::before {background-image:url(images/ic_book.webp);}
#item_bldg a.btn::before {background-image:url(images/ic_bldg.webp);}

.page_top {
  clear:both;
  display:none;
}

#btn_inquity {
  position:fixed;
  bottom:0;
  width:100%;
  text-align:center;
}
#btn_inquity a.btn {
  position:absolute;
  bottom:1rem;
  translate:-50% 0;
  padding:1.35em 2.5em;
  background-color:rgba(255, 146, 0, 1);
  white-space:nowrap;
}
body.hero #btn_inquity a.btn,
body.footer #btn_inquity a.btn {bottom:-10rem;}

div.teg_list ul {
  margin: 2rem 10px;
  padding: 0;
  font-size: 0;
}
div.teg_list li {display: inline;}
div.teg_list li a {
  display: inline-block;
  margin: 0 0.5em 0.5em 0;
  padding: 0.6em 0.75em;
  background-color: rgba(244, 249, 248, 1);
  border-radius: 1em;
}
div.teg_list li a::before {content: '#';}
div.teg_list li a:hover {background-color: rgba(1, 53, 115, 0.1);}

/* ============================================================================
   07. BODY ELEMENTS  —  base page layout
   ============================================================================ */

body.page .body > *:first-child,
body.single-post .body > *:first-child,
body.single-column .body > *:first-child,
body.single-feature .body > *:first-child,
body.error404 .body > *:first-child {margin-top:2.8125rem;}
body.page .body > *:last-child,
body.error404 .body > *:last-child {margin-bottom:4rem;}

.body h1, .body h2, .body h3 {
  clear:both;
  margin:1.5em 10px;
}
.body h4 {margin:1.25em 10px;}
.body p {margin:1em 10px;}

.body ul, .body ol {
  margin:1.5em 0;
  padding:0 0 0 2em;
}
.body ul {list-style-type:disc;}
.body ol {list-style-type:decimal;}
.body li {margin:0.5em 10px;}

.wp-block-table {
  margin:0;
  padding:0;
}
.has-text-align-center {text-align:center;}
.has-text-align-left {text-align:left;}
.has-text-align-right {text-align:right;}
.body table {
  margin:1.5em 10px;
  width:100%;
  max-width:calc(100% - 20px);
}
.body th, .body td {
  padding:1em;
  border-top:1px solid rgba(150, 150, 150, 1);
  border-bottom:1px solid rgba(150, 150, 150, 1);
}
.body th {text-align:left;}
.wp-block-table .wp-element-caption {
  display:block;
  margin:0 10px;
}

.wp-block-image {margin:1rem 10px;}
.body img {
  max-width:100%;
  height:auto;
}
figure.alignleft,
.body img.alignleft {
  float:left;
  margin:0 20px 2em 0;
}
figure.alignright,
.body img.alignright {
  float:right;
  margin:0 0 2em 20px;
}
figure.aligncenter,
.body img.aligncenter {
  display:block;
  margin:2em auto;
}
.wp-element-caption {
  display:block;
  margin:0.35em 0 1em;
  text-align:left;
}

.body form {
  margin:2rem auto;
  width:80%;
}
form.wpcf7-form p {margin:2em 10px;}
form.wpcf7-form label {cursor:pointer;}
form.wpcf7-form span.req {
  display:inline-block;
  margin-left:1em;
}
.wpcf7-form-control-wrap {
  display:block;
  margin-top:0.25em;
}
.wpcf7-list-item {margin:0 1em 0 0;}
.wpcf7-radio .wpcf7-list-item {margin-right:3em;}
div.wpcf7 div.btn {position:relative;}
.wpcf7-spinner {
  position:absolute;
  top:50%;
  translate:0% -50%;
  margin-left:1rem;
}
.wpcf7 form .wpcf7-response-output {
  margin:3rem 10px;
  padding:1em;
  background-color:rgba(255, 255, 255, 1);
  border:2px solid rgba(1, 53, 115, 1);
}

.wp-block-details {margin:2rem 10%;}
.wp-block-details summary {
  position:relative;
  padding:0.75em 0.5em 0.75em 2em;
  background-color:rgba(244, 249, 248, 1);
  list-style:none;
  cursor:pointer;
}
.wp-block-details summary::before {
  content:'+';
  position:absolute;
  left:0.5em;
}
.wp-block-details summary:hover {background-color:rgba(204, 239, 232, 0.5);}
.wp-block-details[open] summary {
  background-color:rgba(1, 53, 115, 1);
}

.wp-block-quote {
  margin:1.5em 10px;
  padding:0;
  background-color:rgba(244, 249, 248, 1);
  overflow:hidden;
  word-break:break-all;
}
.wp-block-quote p {margin:1em;}
.wp-block-quote cite {
  display:block;
  margin:1em;
}

.wp-block-columns-is-layout-flex {display:flex;}
.wp-block-column {width:100%;}
.is-layout-flow {flex-wrap:wrap;}

.wp-block-group-is-layout-flex {display:flex;}

.body .alignleft {text-align:left;}
.body .alignright {text-align:right;}
.body .aligncenter {text-align:center;}

.edit_post_link {clear:both;}
.edit_post_link p {margin:1rem 10px;}

.wp-block-buttons {
  margin:4rem 10px;
  text-align:center;
}

a.wp-element-button {
  box-sizing:border-box;
  display:inline-block;
  margin:0 0.2rem 0.5rem;
  padding:1em 2.5em;
  background-color:rgba(0, 44, 102, 1);
  border:2px solid rgba(0, 44, 102, 1);
}
a.wp-element-button:hover {
  background-color:rgba(0, 44, 102, 0.8);
  border-color:rgba(0, 44, 102, 0);
}
.is-style-outline a.wp-element-button {
  background-color:rgba(255, 255, 255, 1);
  border:2px solid rgba(0, 44, 102, 1);
}
.is-style-outline a.wp-element-button:hover {background-color:rgba(0, 44, 102, 0.1);}

/* ============================================================================
   08. HOME  —  front page
   ============================================================================ */

body.home {padding-top:0;}
@media only screen and (min-width:1025px) {
  body.home #header h1 a {transition-property:opacity;}
  body.hero #header h1 a {
    visibility:hidden;
    opacity:0;
  }
  body.home #navi {transition-property:top;}
  body.hero #navi {top:-110px;}
}

#home_hero {position:relative;}
#home_hero_slides {height:100vh;}
div.slick-list, div.slick-track {height:100%;}
#home_hero_slides span {
  width:100%;
  height:100%;
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
}
#home_hero_slides::after {
  content:'';
  display:block;
  position:absolute;
  bottom:0;
  width:100%;
  height:25vh;
  background:linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
}
#home_hero_message {
  position:absolute;
  left:0;
  top:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  text-align:center;
}
#home_hero h1 {margin:0.5em 0;}
#home_hero h1 span {display:block;}
#home_hero h2 {margin:0.5em 0;}
#home_hero h2 span:nth-child(3) {display:block;}
#home_hero div.btn {margin:2rem 0;}
#home_hero a.btn {padding:1em 2em;}

#home_news {
  position:absolute;
  width:100%;
  translate:0 -100%;
}
#home_news div.content {padding:0 0 2rem;}
#home_news_headline {
  display:flex;
  align-items:center;
  margin:0 20%;
}
#home_news_headline h1 {
  margin:0 0 0 10px;
  padding-right:1rem;
  border-right:1px solid rgba(255, 255, 255, 1);
  white-space:nowrap;
}
#home_news_headline ul {flex:1;}
#home_news_headline li {margin:0 1rem;}
#home_news_headline li a {
  display:flex;
  align-items:center;
}
#home_news_headline time {width:6em;}
#home_news_headline span.title {
  flex:1;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
}
#home_news div.index {
  margin-right:10px;
  white-space:nowrap;
}
#home_news div.index a.btn,
div.condo_info p.more a.btn {
  padding:0.8em 1em;
  background-color:transparent;
  border:1px solid rgba(255, 255, 255, 1);
}
#home_news div.index a.btn:hover,
div.condo_info p.more a.btn:hover {background-color:rgba(255, 255, 255, 0.25);}

#home_intro {
  text-align:center;
  overflow:hidden;
}
#home_intro div.content {padding-bottom:0;}
#home_intro div.content::after {
  content:'';
  display:block;
  margin:4rem 10px 0;
  border-bottom:1px solid rgba(220, 220, 220, 1);
}
#home_intro h1 {margin:0 0 1em;}
#home_intro h1 span {display:block;}
#home_intro p {margin:2em 0;}

/* body.home section div.content {padding:6rem 0;} */
body.home section div.content {padding:4rem 0;}
body.home section h1 {
  margin:0 10px;
  text-align:center;
}
body.home section h1 span {display:block;}
body.home section h1 span.ja {margin:1em 0;}

#home_rooms div.items ul {margin-bottom:0;}
#home_rooms div.index ul {
  margin:1rem 10px;
  text-align:right;
}
#home_rooms div.index li {
  display:inline-block;
  margin-left:2em;
}

#home_condos {
  background:url(images/bg_title.webp) center no-repeat;
  background-size:cover;
}
#recommend_condo {
  position:relative;
  margin:0 8.3%;
  padding:40px 0 0;
}
div.condo {
  display:flex !important;
  flex-direction:row-reverse;
  margin: 0 10px;
}
div.condo_img {width:70%;}
div.condo_img img {
  max-width:100%;
  height:auto;
}
div.condo_info {
  margin-left:3%;
  width:27%;
}
div.condo_info h3 {margin:3em 0 1em;}
div.condo_info h3 span {
  display:block;
  margin:1em 0;
}
div.condo_info p {margin:1em 0;}
div.condo_info p.more {text-align:right;}

#home_condos button.slick-arrow {
  position:absolute;
  top:0;
  right:10px;
  margin:0;
  padding:0;
  background-color:transparent;
  font-size:0;
  color:transparent;
}
#home_condos button.slick-arrow::before {
  content:"";
  display:inline-block;
  width:20px;
  height:20px;
  background:url(images/ic_arrow_02.webp) center no-repeat;
  background-size:100%;
  opacity:0.5;
}
#home_condos button.slick-arrow:hover::before {opacity:1;}
#home_condos button.slick-prev {
  right:50px;
  rotate:180deg;
}
#home_condos button.slick-prev::after {
  content:'';
  position:absolute;
  left:-11px;
  top:0;
  height:100%;
  border-right:2px solid rgba(255, 255, 255, 1);
}
ul.slick-dots {
  margin:0;
  padding:0;
  text-align:center;
  font-size:0;
}
ul.slick-dots li {display:inline-block;}
ul.slick-dots button {
  margin:0 5px;
  padding:0;
  width:10px;
  height:10px;
  background-color:rgba(255, 255, 255, 0.5);
  font-size:0;
  color:transparent;
}
ul.slick-dots li.slick-active button {background-color:rgba(255, 255, 255, 1);}
#home_condos ul.slick-dots {margin:2rem 0 0;}

#home_traveler, #home_owners {background-color:rgba(244, 249, 248, 1);}
#home_traveler div.content,
#home_owners div.content {
  position:relative;
  padding-top:0;
  overflow:hidden;
}
#home_traveler div.content::after {
  content:'';
  display:block;
  position:absolute;
  right:10px;
  top:0px;
  width:calc(58% - 10px);
  height:100%;
  background:url(images/home/traveler_img_01.jpg) center no-repeat;
  background-size:cover;
}
#home_traveler h1 {
  margin:6rem 0 1em calc(8.3% + 10px);
  width:25%;
  text-align:left;
}
#home_traveler p {
  margin:1em 0 1em calc(8.3% + 10px);
  width:25%;
}
#home_traveler a.btn {
  margin-bottom:0.5rem;
  padding:0.8em 1em;
  border:1px solid rgba(220, 220, 220, 1);
  background-color:transparent;
}
#home_traveler a.btn:hover {background-color:rgba(204, 239, 232, 0.5);}

#home_styles ul {
  display:flex;
  flex-wrap:wrap;
  margin:2rem 0;
}
#home_styles li {width:25%;}
#home_styles li a {
  display:block;
  margin:0 10px;
}
#home_styles li img {
  width:100%;
  height:auto;
}
#home_styles span.title {
  display:block;
  margin:0.5em 0 0;
  text-align:center;
}

#home_owners div.content::after {
  content:'';
  display:block;
  position:absolute;
  left:10px;
  top:0px;
  width:58%;
  height:100%;
  background:url(images/home/owners_img_01.jpg) center no-repeat;
  background-size:cover;
}
#home_owners h1 {
  margin:6rem 0 1em calc(66% + 10px);
  width:25%;
  text-align:left;
}
#home_owners p {
  margin:1em 0 1em calc(66% + 10px);
  width:25%;
}
#home_owners a.btn {
  margin-bottom:0.5rem;
  padding:0.8em 1em;
  border:1px solid rgba(220, 220, 220, 1);
  background-color:transparent;
}
#home_owners a.btn:hover {background-color:rgba(204, 239, 232, 0.5);}

#home_related > div.content {padding-bottom:1rem;}
#home_services {background:linear-gradient(180deg, rgba(41, 69, 127, 1) 0% 0%, rgba(22, 39, 64, 1) 100% 100%);}
#home_services div.content {display:flex;}
#home_services div.service {width:25%;}
#home_services span.thumb {
  display:block;
  margin:0 10px;
}
#home_services span.thumb img {
  max-width:100%;
  height:auto;
}
#home_services div.service h3 {margin:1em 10px;}
#home_services div.service h3 span {
  display:block;
  margin:1em 0;
}
#home_services div.service p {margin:1em 10px;}
#home_services div.service:first-child h3 {margin-top:4rem;}
#home_services a.btn {
  margin-bottom:0.5rem;
  padding:0.8em 1em;
  border:1px solid rgba(220, 220, 220, 1);
  background-color:transparent;
}
#home_services a.btn:hover {background-color:rgba(255, 255, 255, 0.199);}

#home_column {
  background:url(images/bg_marina.webp) center no-repeat;
  background-size:cover;
}
#home_column div.index {
  margin:0 10px;
  text-align:right;
}
#home_column div.index a.btn {
  padding:0.8em 1em;
  background-color:rgba(255, 255, 255, 1);
  border:1px solid rgba(80, 80, 80, 1);
}
#home_column div.index a.btn:hover {background-color:rgba(244, 222, 156, 0.66);}

/* ============================================================================
   09. NEWS
   ============================================================================ */

div.news ul {margin:4rem 0;}
div.news li {
  margin:0 10px;
  border-bottom:1px solid rgba(220, 220, 220, 1);
}
div.news li:first-child {border-top:1px solid rgba(220, 220, 220, 1);}
div.news li a {
  display:flex;
  align-items:center;
  padding:1.25rem 0;
}
div.news time {width:8em;}
div.news span.title {flex:1;}

div.post_date {margin:0 10px 2rem;}

body.single #main + footer.index {
  margin-top:3rem;
  margin-bottom:3rem;
}
footer.index {text-align:center;}
footer.index:before {
  content:'';
  display:block;
  margin:3rem 10px 2rem;
  border-top:1px solid rgba(220, 220, 220, 1);
}
footer.index a.btn {padding:1em 3em;}

/* ============================================================================
   10. COLUMN
   ============================================================================ */

div.articles ul {
  display:flex;
  flex-wrap:wrap;
  margin:4rem 0 2rem;
}
div.articles li {width:25%;}
div.articles li a {
  display:block;
  margin:0 10px 2rem;
}
div.articles span.thumb {
  display:block;
  background-color:rgba(255, 255, 255, 0.75);
  font-size:0;
}
div.articles span.thumb img {
  max-width:100%;
  height:auto;
  aspect-ratio:1.5/1;
  object-fit:cover;
}
div.articles span.title {
  display:block;
  margin:1em 0 0;
}
div.articles time {
  display:block;
  margin:1em 0 0;
}

/* ============================================================================
   11. BUILDINGS / ROOMS / BUY  —  CPT listing
   ============================================================================ */

div.area_list ul {margin:2rem 10px;}
div.area_list li {display:inline;}
div.area_list li a {
  display:inline-block;
  margin:0 1em 0.5em 0;
  padding:0.85em 1.25em;
  background-color:rgba(244, 249, 248, 1);
}
div.area_list li a:hover,
div.area_list li.current-cat a {background-color:rgba(1, 53, 115, 0.1);}

div.items ul {
  display:flex;
  flex-wrap:wrap;
  margin:2rem auto;
}
div.items li {
  margin:0 10px 2rem;
  width:calc(25% - 20px);
}
div.items li a {
  display:block;
  height:100%;
  background-color:rgba(255, 255, 255, 1);
  overflow:hidden;
}
div.items li a:hover {background-color:rgba(255, 192, 0, 0.1);}
div.items span {
  display:block;
  margin:0.6rem 1rem;
}
div.items span.thumb {
  margin:0;
  background-color:rgba(255, 255, 255, 1);
  font-size:0;
}
div.items span.thumb img {
  width:100%;
  height:auto;
  aspect-ratio:1.5/1;
  object-fit:cover;
}
div.items li.longterm span.thumb img,
div.items li.yearly span.thumb img {
  filter:grayscale(1);
  opacity: .5;
}
div.items span.title {margin-top:1.2rem;}
div.items span.meta {margin-bottom:1.2rem;}
div.items span.meta span {
  display:inline-block;
  margin:0;
}
div.items span.meta > span:not(:last-child)::after {content:' / ';}
div.items.rooms span.capacity::after {content:none !important;}
div.items.rooms span.areas {margin-left:0.5em;}

/* ============================================================================
   12. ITEM DETAIL  —  single bldg/room/buy
   ============================================================================ */

#item_image_slides {display:none;}
#item_images {
  position:relative;
  z-index:0;
  display:flex;
  margin:3rem auto;
}
#item_images img {
  width:100%;
  height:auto;
  aspect-ratio:1.5/1;
  object-fit:cover;
  cursor:pointer;
}
#item_ft_img {width:60%;}
#item_ft_img span {
  position:relative;
  display:block;
  margin:10px;
  font-size:0;
}
#item_ft_img span::before {
  content:'すべての写真をみる';
  position:absolute;
  z-index:1;
  left:20px;
  bottom:20px;
  padding:0.85em 0.85em 0.85em 2em;
  background:rgba(255, 255, 255, 0.8) url(images/ic_cam.webp) left 0.5em center no-repeat;
  background-size:1em;
  cursor:pointer;
}
#item_ft_img span:hover::before {background-color:rgba(255, 255, 255, 1);}
#item_sub_imgs {width:40%;}
#item_sub_imgs ul {
  display:flex;
  flex-wrap:wrap;
  font-size:0;
}
#item_sub_imgs li {
  margin:10px 10px 3px;
  width:calc(50% - 20px);
}

div.layer {
  display:none;
  position:fixed;
  z-index:100;
  left:0;
  top:0;
  width:100%;
  height:100%;
  background-color:rgba(255, 255, 255, 1);
  transition:0.35s opacity;
}
body.layer {overflow:hidden;}
div.layer span.close {
  position:absolute;
  right:0;
  top:0;
  width:40px;
  height:40px;
  background-color:rgba(244, 249, 248, 1);
  text-align:center;
  cursor:pointer;
}
div.layer span.close:before {
  content:'';
  display:inline-block;
  vertical-align:middle;
  margin:13px;
  width:14px;
  height:14px;
  background:url(images/ic_arrow_01.webp) center no-repeat;
  background-size:100%;
  rotate:180deg;
}
div.layer span.close:hover {background-color:rgba(1, 53, 115, 0.1);}
#item_img_gallery {
  background-color:rgba(255, 255, 255, 1);
  overflow-y:auto;
}
#item_img_gallery span.close {
  left:40px;
  top:40px;
}
#item_img_gallery ul {
  display:flex;
  flex-wrap:wrap;
  margin:120px 10%;
  font-size:0;
}
#item_img_gallery li {width:50%;}
#item_img_gallery li a {
  display:block;
  margin:10px;
}
#item_img_gallery li img {
  width:100%;
  height:auto;
  aspect-ratio:1.5/1;
  object-fit:cover;
}

#item_detail {margin:4rem auto;}
body.single-room #item_detail {
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
}
body.single-bldg #item_content,
body.single-buy #item_content {margin:4rem 0;}
body.single-room #item_content {
  order:1;
  width:70%;
}
#item_info {
  order:2;
  margin:0 10px;
  width:calc(30% - 20px);
  background-color:rgba(255, 255, 255, 1);
  overflow:hidden;
}
#item_map {margin:4rem 0;}
body.single-room #item_map,
body.single-buy #item_map {
  order:3;
  width:100%;
}
#item_bldg,
#item_data {order:4;}

a.btn.a {
  background-color:rgba(244, 249, 248, 1);
  border:none;
}
a.btn.a:hover {background-color:rgba(1, 53, 115, 0.1);}
a.btn.b {
  position:relative;
  background-color:rgba(255, 146, 0, 1);
  border:none;
}
a.btn.c {
  background-color:transparent;
  border:1px solid rgba(255, 255, 255, 1);
}
a.btn.c:hover {background-color:rgba(255, 255, 255, 0.25);}

@media only screen and (min-width:769px) {
  body.single-room #item_overview div.body > *:first-child {margin-top:0;}
  #item_renttable table {
    margin-bottom:0.5em;
    width:initial;
    min-width:88%;
    border-top:1px solid rgba(150, 150, 150, 1);
  }
  #item_renttable tr {border-bottom:1px solid rgba(150, 150, 150, 1);}
  #item_renttable th, #item_renttable td {
    display: inline-block;
    padding: 1em 0;
    border: none;
  }
  #item_renttable td {margin-left: 1em;}
}
#item_renttable p.note {margin-top:0.5em;}

img.ic_mkr_exp {
  margin: 0 0.35em;
  width: 29px;
  vertical-align: middle;
}

#gmap {
  margin:0 10px;
  width: initial;
  height:480px;
  background-color:rgba(1, 53, 115, 0.1);
}
body.single-room #gmap, body.single-buy #gmap {height:580px;}

.gm-style-iw.gm-style-iw-c:has(div.mkr_bldg) {background-color: rgb(1 53 115);}
.gm-style-iw-c {
  padding: 0 !important;
  max-width: initial !important;
}
.gm-style-iw-chr {display: none;}
.gm-style-iw-d {overflow: visible !important;}
.gm-style-iw.gm-style-iw-c:has(div.mkr_bldg) + .gm-style-iw-tc::after {background-color: rgb(1 53 115);}
div.gmap_infowin {
  width: initial;
  max-width: 320px;
}
div.mkr_bldg {color: rgb(255 255 255);}
div.gmap_infowin a {display: block;}
div.gmap_infowin div.thumb {font-size: 0;}
div.gmap_infowin a:hover div.thumb {background-color: rgb(255 255 255 / 25%);}
div.gmap_infowin div.thumb img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
div.gmap_infowin div.info {line-height: 1.2;}
div.mkr_bldg div.info {color: rgb(255 255 255);}
div.gmap_infowin h4 {
  margin: 0.75rem;
  font-size: 1rem;
}
div.mkr_bldg h4 {font-size: 1.125rem;}
div.gmap_infowin div.desc {
  margin: 0.75rem;
  font-size: 1rem;
}
div.mkr_spots div.comment {font-size: 0.84rem;}

body.page-map .path, body.page-map #title, body.page-map #main {margin:0;}
body.page-map #gmap {
  margin: 4rem 10px 8rem;
  height: 640px
}

#item_info_header {
  background-color:rgba(0, 44, 102, 1);
  overflow:hidden;
}
#item_info_header h4 {margin:1.5rem 1.5rem 1rem;}
#item_info_season {margin: 1rem 1.5rem 1.5rem;}
#item_info_rent {border-top:1px solid rgba(220, 220, 220, 0.33);}
#item_rent_month {margin:1rem 1.5rem;}
#item_rent_and_car {margin:1rem 1.5rem 1.5rem;}
#item_rent_and_car div.header {margin-bottom: 0.25rem;}
#item_info_status {border-bottom:1px solid rgba(220, 220, 220, 1);}
#item_status {margin:1.5rem;}
#item_guide {margin:1.5rem;}
#item_guide a.btn.a {width:100%;}
#item_info_content dl {
  display:grid;
  grid-template-columns:4em 1fr 4em 1fr;
  gap:1em;
  margin:1.5rem;
  padding:0;
}
#item_info_content dt {
  margin:0;
  padding:0;
}
#item_info_content dd {
  margin:0;
  padding:0;
}
body.single-room #item_info_content dd.address,
body.single-room #item_info_content dd.type {grid-column:2/5;}
body.single-buy #item_info_content dl {grid-template-columns:5em 1fr;}
body.single-buy #item_info_content dt span {display:block;}
body.single-buy #item_info_content dd.transport + dt {
  display:flex;
  align-items:flex-end;
}
body.single-buy #item_info_content dd.current_yield {line-height:1;}

#item_inquiry {margin:1.5rem;}
#item_inquiry a.btn {
  padding:1.25em;
  width:100%;
  font-size: 1rem;
}
#item_inquiry a.btn:not(:nth-of-type(1)) {margin-top: 0.5rem;}
#item_inquiry span.note {
  display:block;
  margin:1em 0 0;
}

#item_related {margin:4rem auto;}
#item_related h3 {margin:1.35em 10px;}
#item_related ul {margin-top:0;}

body.single-bldg div.btn a.btn {width:40%;}

#item_data {display:flex;}
#item_data dl {
  position:relative;
  flex:1;
  margin:2rem 10px;
  display:flex;
  flex-wrap:wrap;
  align-content:flex-start;
  border-top:1px solid rgba(220, 220, 220, 1);
}
#item_data dt, #item_data dd {
  position:relative;
  margin:0;
  padding:1em 0;
}
#item_data dt {
  padding-right:1em;
  width:calc(30% - 1em);
}
#item_data dd {width:70%;}
#item_data dd:after {
  content:'';
  position:absolute;
  right:0;
  bottom:0;
  width:142.8%;
  border-bottom:1px solid rgba(220, 220, 220, 1);
}
#item_data dd p {margin:0 0 1em;}
#item_data dt.inquiry {display:none;}
#item_data dt.inquiry + dd {
  padding:0;
  width:100%;
}
#item_data dt.inquiry + dd::after {content:none;}
#item_data #item_inquiry {margin:2rem 0;}

#item_go_index {
  order:5;
  margin:0 10%;
}
#item_go_index div.content {margin:0 10px;}

#item_review {width: 80%;}
div.glsr-summary {margin: 3rem 10px;}
.glsr-summary-rating {
  font-size: 1.5rem;
  font-weight: bold;
}
.glsr-summary-text,
.glsr-bar-label,
.glsr-bar-percent {font-weight: bold;}
div.glsr-reviews-wrap {display: block !important;}
div.glsr-reviews {
  display: block !important;
  margin: 3rem 10px;
}
div.glsr-review {
  display: block !important;
  margin: 2rem 0;
  border-bottom: 1px solid rgba(220, 220, 220, 1)
}
.glsr-review-title h4 {
  margin: 1rem 0 !important;
  font-size: 1.35rem;
}
.glsr-review-rating {vertical-align: middle;}
.glsr-review-date {
  vertical-align: middle;
  margin-left: 1rem;
}
.glsr-review-content {margin: 1rem 0;}
.glsr-review-content p {
  margin: 1em 0 !important;
  padding: 0 !important;
  line-height: 1.6;
}
.glsr-review-author {
  display: block !important;
  margin: 1em 0;
}
.glsr-review-date,
.glsr-review-content,
.glsr-review-author {font-weight: bold;}
.glsr-review-response {margin: 1rem 0;}
.glsr-review-response:before {
  border-bottom-color: rgba(244, 249, 248, 1);
  opacity: 1;
}
.glsr-review-response:after {
  background-color: rgba(244, 249, 248, 1);
  opacity: 1;
}
div.glsr-form-wrap {display: block !important;}
form.glsr-review-form {
  display: block !important;
  margin: 3rem 10px;
}
.glsr-field {margin: 0.75rem 0;}
.glsr-label {margin: 0.5em 0 !important;}
.glsr-field label {
  line-height: 1.2;
  font-weight: bold;
}
.glsr-form .wp-block-buttons {
  margin: 2rem 0;
  text-align: left;
}
.glsr-minimal button.glsr-button {
  display: inline-block !important;
  padding: 1em 2em;
  min-width: initial;
  border-radius: 0.5rem;
  text-align: center;
}

/* ============================================================================
   13. SEARCH RESULTS
   ============================================================================ */

#search_results {
  margin:3rem 10px;
  padding:1rem;
  background-color:rgba(244, 249, 248, 1);
}

/* ============================================================================
   14. FEATURE RELATED
   ============================================================================ */

div.related h3 {margin:2em 10px 1em;}

/* ============================================================================
   15. INQUIRY  —  contact form
   ============================================================================ */

input[name="item-name"] {
  display:block;
  margin:0;
  padding:0;
  background-color:transparent !important;
  border:none !important;
}
form.wpcf7-form p.hidden {display:none;}
form.wpcf7-form p.acceptance span.wpcf7-list-item-label {
  display:inline-block;
  vertical-align:top;
  padding:0 0 0 0.5em;
}
form.wpcf7-form p.acceptance span.wpcf7-list-item-label > span {display:block;}

/* ============================================================================
   16. GUIDE / VACATION-RENTAL
   ============================================================================ */

div.page-btn a.wp-element-button {
  padding:0.85em 1.5em;
  background-color:transparent;
  border:1px solid rgba(1, 53, 115, 1); 
}
div.page-btn a.wp-element-button:hover {background-color:rgba(1, 53, 115, 0.1);}

body.page #main div.topics div.wp-block-group {
  margin:10rem 10px 4rem 50px;
  padding:2rem 0;
  background-color:rgba(244, 249, 248, 1);
}
body.page #main div.topics div.wp-block-group:nth-child(even) {
  margin-left:10px;
  margin-right:50px;
}
body.page #main div.topics div.wp-block-group div.wp-block-group__inner-container {
  position:relative;
  margin:0 2rem;
}
body.page #main div.topics figure {
  position:absolute;
  left:0;
  top:0;
  margin:-10rem 3rem 2rem calc((40px + 2rem) * -1);
  width:44%;
  min-width:360px;
}
body.page #main div.topics div.wp-block-group:nth-child(even) figure {
  left:initial;
  right:0;
  margin-left:3rem;
  margin-right:calc((40px + 2rem) * -1);
}
body.page #main div.topics figure img {
  width:100%;
  height:auto;
}
body.page #main div.topics div.wp-block-buttons {
  margin:1.5rem 10px;
  text-align:left;
}
body.page #main div.topics figure + h3 {margin-top:1rem;}
body.page #main div.topics h3,
body.page #main div.topics p,
body.page #main div.topics div.wp-block-buttons {margin-inline:42% 0;}
body.page #main div.topics div.wp-block-group:nth-child(even) h3,
body.page #main div.topics div.wp-block-group:nth-child(even) p,
body.page #main div.topics div.wp-block-group:nth-child(even) div.wp-block-buttons {margin-inline:0 42%;}

/* ============================================================================
   17. FX  —  effects
   ============================================================================ */

#navi_inq, #navi_inq::after,
#btn_inquity a.btn::after, a.btn.b::after,
a.btn, input, button, textarea,
.paginate li a, div.wp-pagenavi span, div.wp-pagenavi a,
.wp-block-details summary,
div.area_list li a,
div.items li a,
#item_ft_img span::before,
div.layer span.close, .lb-data .lb-number,
.wpcf7 form .wpcf7-response-output,
#home_styles li img, #home_services span.thumb img,
#search_results,
#item_image_slides span.num,
div.page-btn a.wp-element-button {border-radius:0.25rem;}
#item_info {border-radius:0.5rem;}
a.wp-element-button,
form input[type="submit"], form button,
#home_condos ul.slick-dots button {border-radius:100vh;}

div.items li a, #item_info,
.wp-block-details[open] summary {box-shadow:0px 0px 0.75rem rgba(0, 0, 0, 0.12);}
#btn_inquity a.btn {box-shadow:0px 0px 1.25rem rgba(0, 0, 0, 0.2);}

a:hover img,
#header > h1 a:hover,
#s:hover::placeholder,
#item_images span:hover img {opacity:0.8;}

a.btn, a.wp-element-button,
input[type="submit"],
a.btn.b::after,
#btn_inquity a.btn::after,
#navi div.content > ul > li > span::before, #navi div.menu,
#navi_inq::before,
body.home #header,
div.items li a,
body.home #header h1 a, body.home #navi,
#home_condos button.slick-arrow::before,
div.teg_list li a {transition:0.35s;}

/* ============================================================================
   18. CHARACTERS  —  typography
   ============================================================================ */

body {
  font-size:16px;
  line-height:1;
  color:rgba(34, 34, 34, 1);
}
#item_image_slides span.num {font-size:0.75rem;}
.path, .path span.gt::before, #ft_navi, #copyright,
.body blockquote,
a.btn.a,
time,
#home_news div.index a.btn,
div.condo_info h3 span,
#home_traveler a.btn, #home_owners a.btn,
#home_column div.index a.btn,
div.area_list li,
div.items span.area, div.items span.address, div.items span.meta span,
#item_ft_img span::before,
#item_info_season,
#item_rent_and_car div.header,
#item_info_content dl, #item_inquiry span.note,
div.teg_list li a {font-size:0.875rem;}
a.btn, button, input[type="submit"], input[type="button"],
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"],
textarea, select,
#navi div.menu h2,
body.home section h1 span.ja,
body.single-post time {font-size:1rem;}
.body h4,
.wp-block-details summary,
#item_info_header h4, #item_info_rent span.unit,
#item_status {font-size:1.125rem;}
#home_hero h2, #home_news h1,
#home_intro h1, div.condo_info h3,
input[name="item-name"],
#item_info_content dd.current_yield {font-size:1.25rem;}
#item_rent_and_car strong  {font-size:1.35rem;}
.body h1, .body h2, .body h3,
#home_traveler h1 span, #home_owners h1 span,
#item_rent_month strong,
div.related h3 {font-size:1.5rem;}
#title h1, #title span {font-size:1.875rem;}
#home_hero h1,
body.home section h1 span.en {font-size:2.5rem;}

div.items span.price {font-size: 1.5em;}

p, textarea {line-height:1.5;}
div.items li span,
#item_info_season,
#item_rent_and_car div.header {line-height:1.2;}
.path p, #title h1, #title span,
#ft_info address,
.body h1, .body h2, .body h3, .body h4,
.body li, .body table,
.wp-block-details summary,
div.items span.title, div.articles span.title, div.news span.title,
#search_results,
#item_info_header h4, #item_info_content,
#item_renttable p.note,
#item_data dl,
body.home section h1,
div.condo_info h3, #home_services div.service h3,
#home_news_headline a,
#home_styles span.title {line-height:1.3;}
#home_hero_message h2,
#home_intro,
#home_services div.service p {line-height:1.6;}
.body p {line-height:1.8;}

h1, h2, h3, h4, strong, .body th,
a.btn, button, input[type="submit"], input[type="button"],
a.wp-element-button,
.wp-block-details summary,
#navi a, #navi li > span,
#home_traveler h1 span, #home_owners h1 span,
#home_styles span.title,
div.articles span.title,
form.wpcf7-form span.label,
div.area_list li a,
div.items span.title, div.items span.rent, div.items span.price,
input[name="item-name"],
#item_info_content dt, #item_data dt  {font-weight:600;}
body.home section h1 span.ja,
#home_hero h2,
#home_news div.index a.btn,
div.condo_info p.more a.btn,
#home_traveler a.btn, #home_owners a.btn,
#home_column div.index a.btn {font-weight:normal;}

address {font-style:normal;}
.wp-block-quote cite {font-style:italic;}

a:link, a:visited {text-decoration:underline;}
a:hover, a:active {text-decoration:none;}
a.btn,
a.wp-element-button,
#navi a,
#footer a, #ft_info div.enquiry a.btn,
#home_news_headline a,
#home_styles li a,
div.area_list li a, div.items li a, div.articles li a,
div.news li a,
div.teg_list li a {text-decoration:none;}
#footer a:hover,
div.articles a:hover span.title,
div.news a:hover span.title,
#home_news_headline a:hover span.title,
#home_styles a:hover span.title {text-decoration:underline;}

a, .body a:link {color:rgba(16, 48, 118, 1);}
.body a:visited {color:rgba(16, 48, 118, 1);}
.body a:hover {color:rgba(16, 48, 118, 1);}
.body a:active {color:rgba(255, 146, 0, 1);}

a.btn, button, input[type="submit"], input[type="button"] {color:rgba(255, 255, 255, 1);}

div.items a, div.news a {color:rgba(34, 34, 34, 1);}
.path a:hover,
div.news a:hover span.title {color:rgba(16, 48, 118, 1);}
#navi_inq,
#footer, #footer a, #ft_info div.enquiry a.btn, a.btn.b,
.body a.wp-element-button,
.wp-block-details[open] summary,
#home_hero_message, #home_news, #home_news a, #home_news_headline time,
#home_condos, #home_services,
#btn_inquity a.btn,
#item_info_header,
#item_image_slides span.num {color:rgba(255, 255, 255, 1);}
.body .is-style-outline a.wp-element-button,
#item_inquiry span.note a {color:rgba(0, 44, 102, 1);}
.body h3,
a.btn.a,
input[name="item-name"],
div.area_list li a,
#item_ft_img span::before,
div.related h3,
div.page-btn a.wp-element-button {color:rgba(1, 53, 115, 1);}
form.wpcf7-form span.req,
#item_status {color:rgba(255, 146, 0, 1);}
#footer a:hover {color:rgba(255, 192, 0, 1);}
#home_intro h1 strong {color:rgba(237, 155, 0, 1);}
time,
.path, .path a,
#home_intro p,
div.items span.area, div.items span.address, div.items span.meta span,
#item_inquiry span.note {color:rgba(150, 150, 150, 1);}
#home_rooms div.index a,
#home_traveler a.btn, #home_owners a.btn,
#home_column div.index a.btn {color:rgba(80, 80, 80, 1);}

#home_hero_message, #home_news_headline {text-shadow:0px 0px 1em rgba(0, 0, 0, 0.45);}

body,
input[type="text"], input[type="date"], input[type="submit"], input[name="item-name"], select {
  font-family:serif;
  -webkit-font-smoothing:antialiased;
}

/* ============================================================================
   19. MISC
   ============================================================================ */

@media only screen and (min-width:769px) {
  a[href^="tel"]:not(.wp-element-button) {
    color:inherit !important;
    text-decoration:none;
    cursor:default;
    pointer-events:none;
  }
}


/* ############################################################################
   RESPONSIVE  —  TABLET (max-width: 1024px)
   ############################################################################ */
@media only screen and (max-width:1024px) {

  body.mobile_menu {overflow:hidden;}

  /* head elements */

  #header {
    height:80px;
    background-color:rgba(1, 53, 115, 1);
  }
  #header h1 a {
    left:10px;
    top:14px;
    width:131px;
    height:52px;
  }

  /* navi elements */
  
  #navi h1 {
    display:block;
    position:fixed;
    right:5%;
    top:20px;
    z-index:101;
    margin:0;
    width:40px;
    height:40px;
    background:url(images/ic_menu.webp) center no-repeat;
    background-size:28px;
    font-size:0;
    color:transparent;
    cursor:pointer;
  }
  body.admin-bar #navi h1 {top:52px}
  body.mobile_menu #navi h1 {background-image:url(images/ic_close.webp);}
  #navi div.content {
    position:fixed;
    z-index:1;
    left:0;
    top:80px;
    bottom:100%;
    box-sizing:border-box;
    width:100%;
    background-color:rgba(255, 255, 255, 0.8);
    backdrop-filter:blur(0.5rem);
    overflow:auto;
    transition:0.35s;
    -webkit-overflow-scrolling:touch;
  }
  body.mobile_menu #navi div.content {bottom:0;}
  #navi li:first-child {margin-top:0.5em;}
  #navi li:last-child {margin-bottom:0.5em;}
  #navi li > span {
    display:block;
    margin:0.5em 0;
    padding:0.75em;
    background-color:#ddd;
    background-color:rgba(1, 53, 115, 1);
  }
  #navi li:first-child > span {margin-top:0;}
  #navi li a {
    display:block;
    padding:0.85em 5%;
  }
  #navi div.menu h2 {margin:1em 5%;}
  #navi div.menu h2 + ul a {padding-left:calc(5% + 1em);}

  /* #navi_translate */

  div.gtranslate_wrapper {
    margin:2rem 5%;
    padding:0.5rem 1rem;
    background-color:rgba(1, 53, 115, 1);
    text-align:center;
    font-size:0;
  }
  div.gtranslate_wrapper a {
    position:relative;
    display:inline-block;
    margin:0 1em;
    padding:0.5em 0;
    color:rgba(255, 255, 255, 1);
    font-size:1rem;
  }
  div.gtranslate_wrapper a.gt-current-lang::after {
    content:'';
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    border-bottom:1px solid rgba(255, 255, 255, 1);
  }
  div.gtranslate_wrapper a:not(:first-child)::before {
    content:'';
    position:absolute;
    left:-1rem;
    top:0;
    height:100%;
    border-right:1px solid rgba(255, 255, 255, 0.5);
  }

  /* #navi_util */

  #navi_util {
    margin:2rem 0;
    border-top:1px solid rgba(1, 53, 115, 0.25);
  }
  #navi_util div.inquiry {margin:2rem 5%;}
  #navi_inq {
    display:block;
    padding:1em;
    background-color:rgba(255, 146, 0, 1);
    text-align:center;
  }
  #searchform {margin:2rem 5%;}
  #s {
    vertical-align:middle;
    margin-right:0.5em;
    padding:0.6em;
    width:calc(100% - 8em);
  }
  #searchsubmit {padding:1em 2em;}

  #navi li > span {color:rgba(255, 255, 255, 1);}

  /* home */

  body.hero #header {top:-80px;}
  body.hero #navi h1 {top:-40px;}

  /* ===== item info ===== */
  /* iPad/タブレット幅では #item_info サイドバーが狭くなり、内側 <dl> の
     4列グリッド(label/value/label/value)では各項目が見切れるため、
     2列(label/value)に変更して各項目を1行ずつに並べる。横並びレイアウト自体は維持。 */

  body.single-room #item_info_content dl {
    grid-template-columns:5em 1fr;
  }
  body.single-room #item_info_content dd.address,
  body.single-room #item_info_content dd.type {
    grid-column:auto;
  }

}


/* ############################################################################
   RESPONSIVE  —  MOBILE (max-width: 768px)
   ############################################################################ */
@media only screen and (max-width:768px) {

/* ============================================================================
   M01. INITIALIZATION  —  mobile overrides
   ============================================================================ */

html {scroll-padding-top:80px;}

body {
  margin:0;
  padding:80px 0 0;
}
input[type="text"], input[type="email"], input[type="tel"],
textarea {width:100%;}
textarea {height:35vh;}
form input[type="submit"], form button {
  padding:1.35em 1em;
  width:100%;
}

/* ============================================================================
   M02. BLOCK LEVEL ELEMENTS  —  mobile
   ============================================================================ */

div.content,
.path, #title, #main,
body.single #main + footer.index {margin:0;}

/* ============================================================================
   M03. HEAD ELEMENTS  —  mobile
   ============================================================================ */

#header h1 a {left:5%;}

/* ============================================================================
   M04. NAVI ELEMENTS  —  mobile
   ============================================================================ */

#s {
  display:block;
  margin-bottom:0.5rem;
  width:100%;
}

/* ============================================================================
   M05. FOOT ELEMENTS  —  mobile
   ============================================================================ */

#footer div.content {display:block;}
#ft_info {
  margin:0;
  width:initial;
}
#ft_info h1 {
  margin:3rem 5% 2rem;
  text-align:center;
}
#ft_info h1 span {
  width:131px;
  height:52px;
}
#ft_info p {margin:1em 5%;}
#ft_info address {margin:1rem 5%;}

#ft_info div.enquiry {margin:1rem 5%;}
#ft_info div.enquiry a.btn {width:100%;}

#ft_navi {
  display:block;
  width:initial;
}
#ft_navi ul {
  margin:2rem 0;
  width:initial;
}
#ft_navi li {margin:1em 5%;}

#copyright {
  margin:2rem 5% 0;
  padding:1em;
}

/* ============================================================================
   M06. COMMON ELEMENTS  —  mobile
   ============================================================================ */

.path p {margin:2em 5% 1rem;}
#title h1 {margin:1rem 5% 1.5em;}
#title h3 {margin:1rem 5% 1.5em;}
#title p {margin:1rem 5% 1.5em;}

.paginate ul,
div.wp-pagenavi {margin:2rem 5%;}

div.btn {margin:3rem 5%;}
.body div.btn p {margin:0;}

div.share {margin:3rem 5%;}
div.share > * {margin:0 0.15rem;}

#btn_inquity a.btn {
  padding:1em;
  width:auto;
}

div.teg_list ul {margin: 2rem 5%;}

/* ============================================================================
   M07. BODY ELEMENTS  —  mobile
   ============================================================================ */

body.page .body {margin:0;}

.body h1, .body h2, .body h3 {margin:1.5em 5%;}
.body h4, .body p {margin:1em 5%;}
.body li {margin:0.5em 5%;}
.body table {
  margin:1.5em 5%;
  max-width:90%;
}
.body th, .body td {padding:0.35em;}
.wp-block-table .wp-element-caption {margin:0 5%;}

.wp-block-image {margin:1rem 5%;}
figure.alignleft, figure.alignright, figure.aligncenter,
.body img.alignleft,
.body img.alignright,
.body img.aligncenter {
  float:none;
  display:block;
  margin:1.5em auto;
}

.body form {
  margin:2rem 0;
  width:initial;
}
form.wpcf7-form p {margin:2em 5%;}
.wpcf7-radio .wpcf7-list-item {margin-right:1.5em;}
.body div.btn input[type="submit"] {width:100%;}
.wpcf7-spinner  {
  position:absolute;
  right:5%;
  margin:0;
}
.wpcf7 form .wpcf7-response-output {margin:2rem 5%;}

.wp-block-details {margin:1.5rem 5%;}
.wp-block-details summary {padding:0.5em 0.5em 0.5em 2em;}

.wp-block-quote {margin:1.5em 5%;}

.wp-block-columns-is-layout-flex {display:block;}
.wp-block-group-is-layout-flex {display:block;}

.edit_post_link p {margin:1rem 5%;}

.wp-block-buttons {margin:3rem 5%;}

/* ============================================================================
   M08. HOME  —  mobile
   ============================================================================ */

#home_hero h1 {margin:0.5em 5%;}
#home_hero h2 {margin:0.5em 5%;}
#home_hero h2 span {display:block;}
#home_hero div.btn {margin:1.5rem 0;}
#home_hero a.btn {padding:0.75em 1.5em;}

#home_news div.content {padding:0;}
#home_news_headline {
  position:relative;
  display:block;
  margin:1rem 5%;
}
#home_news_headline h1 {
  position:absolute;
  left:0;
  top:-0.6rem;
  translate:0 -100%;
  margin:0;
}
#home_news_headline li {margin:0;}
#home_news_headline li a {display:block;}
#home_news_headline time {
  display:block;
  margin:0 0 0.5em;
  width:initial;
}
#home_news div.index {
  position:absolute;
  right:0;
  top:0;
  translate:0 -100%;
  margin:0;
}
#home_news div.index a.btn,
div.condo_info p.more a.btn {
  padding:0.65em 1em;
  background-color:rgba(255,255,255,0.25);
}

#home_intro div.content::after {margin:3rem 5% 0;}
#home_intro h1 {margin:0 5% 1em;}
#home_intro p {margin:2em 5%;}

body.home section div.content {padding:3rem 0;}
body.home section h1 {margin:0 5%;}

#home_rooms div.index ul {margin:1rem 5%;}
#home_rooms div.index li {margin-left:1em;}

#recommend_condo {margin:0;}
#recommend_condo div.slick-list {margin:0;}
div.condo {
  display:block !important;
  margin:initial;
  height:auto;
}
div.condo_img {
  width:initial;
  margin:0 5%;
}
div.condo_info {
  margin:initial;
  width:initial;
}
div.condo_info h3 {margin:1em 5%;}
div.condo_info p {margin:1em 5%;}
#home_condos button.slick-arrow {right:5%;}
#home_condos button.slick-prev {right:calc(5% + 40px);}

#home_traveler div.content,
#home_owners div.content {padding:0;}
#home_traveler div.content::after,
#home_owners div.content::after {
  position:static;
  width:100%;
  height:auto;
  aspect-ratio:1.5/1;
}
#home_traveler h1, #home_owners h1 {
  margin:3rem 5% 1em;
  width:initial;
}
#home_traveler p, #home_owners p {
  margin:1em 5%;
  width:initial;
}

#home_styles ul {
  display:flex;
  gap:1.5rem 5%;
  margin:2rem 5% 0;
}
#home_styles li {width:47.5%;}
#home_styles li a {margin:0;}
#home_styles span.title {margin:0.35em 0 0;}

#home_related > div.content {padding-bottom:0;}
#home_services div.content {display:block;}
#home_services div.service {width:initial;}
#home_services span.thumb {margin:1rem 0;}
#home_services div.service h3 {margin:1.5em 5% 1em;}
#home_services div.service p {margin:1em 5%;}
#home_services div.service:first-child h3 {margin-top:0;}

#home_column div.index {margin:0 5%;}

/* ============================================================================
   M09. NEWS  —  mobile
   ============================================================================ */

div.news ul {margin:3rem 0;}
div.news li {margin:0 5%;}
div.news li a {
  display:block;
  padding:1.25rem 0;
}
div.news time {
  display:block;
  margin:0 0 0.75em;
  width:100%;
}
div.news span.title {display:block;}

div.post_date {margin:0 5% 2rem;}
footer.index:before {margin:3rem 5%;}

/* ============================================================================
   M10. COLUMN  —  mobile
   ============================================================================ */

div.articles ul {
  display:block;
  margin:2rem 0;
}
div.articles li {
  margin:2rem 5%;
  width:initial;
}
div.articles li a {
  position:relative;
  margin:0;
  /* min-height:170px; */
  min-height:110px;
}
div.articles span.thumb {
  position:absolute;
  left:0;
  top:0;
  width:170px;
}
div.articles span.thumb img {
  width:100%;
  height:auto;
  /* aspect-ratio:1/1; */
}
div.articles span.title {margin:0 0 1em calc(170px + 1rem);}
div.articles time {margin:1em 0 0 calc(170px + 1rem);}

/* buildings, rooms, buy */

div.area_list ul {margin:1rem 5%;}
div.area_list li a {margin:0 0.5em 0.5em 0;}

div.items ul {
  display:block;
  margin:3rem 0;
}
div.items li {
  margin:2rem 5%;
  width:initial;
}
div.items li a {height:initial;}
div.items span.title {margin:1rem 1rem 0.5rem;}
div.items span {margin:0.5rem 1rem;}
div.items span.title {margin-top:1rem;}
div.items span.meta {margin-bottom:1rem;}
div.items.rooms span.areas {margin-left:0.35em;}

/* ============================================================================
   M11. ITEM DETAIL  —  mobile
   ============================================================================ */

#item_images, div.layer, #item_img_gallery {display:none;}
#item_image_slides {
  position:relative;
  z-index:0;
  display:block;
  margin:3rem 0;
}
#item_image_slides ul {font-size:0;}
#item_image_slides img {
  width:100%;
  height:auto;
  aspect-ratio:1.5/1;
  object-fit:cover;
}
#item_image_slides ul.slick-dots {margin:10px 5% 0;}
#item_image_slides ul.slick-dots button {
  margin:0 3px;
  width:7px;
  height:7px;
  background-color:rgba(220, 220, 220, 1);
}
#item_image_slides ul.slick-dots li.slick-active button {background-color:rgba(1, 53, 115, 1);}

#item_image_slides span.num {
  position:absolute;
  z-index:1001;
  left:5px;
  top:5px;
  padding:0.5em 1em;
  background-color:rgba(0, 0, 0, 0.5);
}
#item_image_slides span.gt {margin:0 0.25em;}

#item_detail {margin:3rem auto;}
body.single-room #item_detail,
body.single-buy #item_detail {display:block;}
body.single-bldg #item_content {margin:3rem 0;}
body.single-room #item_content,
body.single-buy #item_content {
  margin:3rem 0;
  width:initial;
}
#item_info {
  margin:3rem 5%;
  width:90%;
}
#item_map {margin:3rem 0;}
body.single-room #item_map,
body.single-buy #item_map {margin:3rem 0 0;}
#item_bldg {margin:1rem 0 3rem;}
#item_data {margin:2rem 0;}

a.btn.a, a.btn.b {
  padding:1em;
  width:100%;
}

#item_renttable table {width:99%;}
#item_renttable td {white-space: nowrap;}

#gmap {
  margin:0;
  height:100vw !important;
  max-height:50vh;
}

body.page-map #gmap {
  margin: 3rem 0;
  max-height: 75vh;
}
.gm-style-iw-c {max-height: initial !important;}
.gm-style-iw-d {max-height: initial !important;}
body.page-map div.gmap_infowin {max-width: 240px;}
div.gmap_infowin h4 {
  margin: 0.5rem;
  font-size: 1rem;
  height: 1.2em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
div.mkr_bldg h4 {font-size: 1rem;}
div.gmap_infowin div.desc {
  margin: 0.5rem;
  font-size: 0.84rem;
}

#item_info_header {padding:0;}
#item_info_header h4 {margin:1rem;}
#item_info_season {margin:1rem;}
#item_rent_month {margin:1rem;}
#item_rent_and_car {margin:1rem;}
#item_status {margin:1rem;}
#item_guide {margin:1rem;}
#item_info_content {padding:0;}
#item_info_content dl {
  gap:1em 0.75em;
  margin:1rem;
}
#item_inquiry {margin:1rem;}

#item_related {margin:3rem auto;}
#item_related h3 {margin:3em 5%;}

#item_data {
  display:block;
  width:initial;
}
#item_data dl {
  margin:0 5%;
  border:none;
}
#item_data dl:first-child {border-top:1px solid rgba(220, 220, 220, 1);}
#item_data dt, #item_data dd {
  padding-top:0.75em;
  padding-bottom:0.75em;
}
#item_data #item_inquiry {margin:1rem 0;}

#item_go_index {margin:2rem 0;}
#item_go_index div.content {margin:0 5%;}

#item_review {
  margin: 4rem 0;
  width: initial;
  max-width: 580px;
}
div.glsr-summary {
  margin: 2rem 5%;
  max-width: 90%;
}
div.glsr-reviews {margin: 2rem 5%;}
form.glsr-review-form {margin: 2rem 5%;}
.glsr-minimal button.glsr-button {
  padding: 1em 2em;
  width: initial;
}

/* ============================================================================
   M12. SEARCH RESULTS  —  mobile
   ============================================================================ */

body.search #title span {display:inline-block;}
#search_results {margin:3rem 5%;}

/* ============================================================================
   M13. FEATURE RELATED  —  mobile
   ============================================================================ */

div.related h3 {margin:3rem 5%;}

/* ============================================================================
   M14. INQUIRY  —  mobile
   ============================================================================ */

form.wpcf7-form p.acceptance {position:relative;}
form.wpcf7-form p.acceptance input[type="checkbox"] {
  position:absolute;
  left:0;
  top:0.5rem;
}
form.wpcf7-form p.acceptance span.wpcf7-list-item-label {
  display:block;
  margin-left:2.5rem;
  padding:0;
}
form.wpcf7-form p.acceptance span.wpcf7-list-item-label > span {display:block;}

/* guide / vacation-rental */

body.page #main div.topics div.wp-block-group {
  margin:3rem 0 !important;
  padding:0 0 1rem;
  min-height:initial;
  overflow:hidden;
}
body.page #main div.topics div.wp-block-group div.wp-block-group__inner-container {margin:0;}
body.page #main div.topics figure {
  position:initial;
  margin:0 !important;
  width:initial;
  min-width:initial;
}
body.page #main div.topics div.wp-block-buttons {
  margin:2rem 5%;
  text-align:center !important;
}
body.page #main div.topics a.wp-element-button {width:100%;}
body.page #main div.topics figure + h3 {margin-top:1.5em;}
body.page #main div.topics h3,
body.page #main div.topics p,
body.page #main div.topics div.wp-block-buttons {margin-inline:5% !important;}

/* ============================================================================
   M15. CHARACTERS  —  mobile
   ============================================================================ */

body {
  font-size:100%;
  font-family:serif;
  -webkit-text-size-adjust:none;
}

#home_hero h1,
body.home section h1 span.en {font-size:1.875rem;}

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


.grecaptcha-badge { visibility: hidden; }