@charset "UTF-8";
.wpcf7 .screen-reader-response {
position: absolute;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0;
word-wrap: normal !important;
}
.wpcf7 .hidden-fields-container {
display: none;
}
.wpcf7 form .wpcf7-response-output {
margin: 2em 0.5em 1em;
padding: 0.2em 1em;
border: 2px solid #00a0d2; }
.wpcf7 form.init .wpcf7-response-output,
.wpcf7 form.resetting .wpcf7-response-output,
.wpcf7 form.submitting .wpcf7-response-output {
display: none;
}
.wpcf7 form.sent .wpcf7-response-output {
border-color: #46b450; }
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
border-color: #dc3232; }
.wpcf7 form.spam .wpcf7-response-output {
border-color: #f56e28; }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
border-color: #ffb900; }
.wpcf7-form-control-wrap {
position: relative;
}
.wpcf7-not-valid-tip {
color: #dc3232; font-size: 1em;
font-weight: normal;
display: block;
}
.use-floating-validation-tip .wpcf7-not-valid-tip {
position: relative;
top: -2ex;
left: 1em;
z-index: 100;
border: 1px solid #dc3232;
background: #fff;
padding: .2em .8em;
width: 24em;
}
.wpcf7-list-item {
display: inline-block;
margin: 0 0 0 1em;
}
.wpcf7-list-item-label::before,
.wpcf7-list-item-label::after {
content: " ";
}
.wpcf7-spinner {
visibility: hidden;
display: inline-block;
background-color: #23282d; opacity: 0.75;
width: 24px;
height: 24px;
border: none;
border-radius: 100%;
padding: 0;
margin: 0 24px;
position: relative;
}
form.submitting .wpcf7-spinner {
visibility: visible;
}
.wpcf7-spinner::before {
content: '';
position: absolute;
background-color: #fbfbfc; top: 4px;
left: 4px;
width: 6px;
height: 6px;
border: none;
border-radius: 100%;
transform-origin: 8px 8px;
animation-name: spin;
animation-duration: 1000ms;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@media (prefers-reduced-motion: reduce) {
.wpcf7-spinner::before {
animation-name: blink;
animation-duration: 2000ms;
}
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes blink {
from {
opacity: 0;
}
50% {
opacity: 1;
}
to {
opacity: 0;
}
}
.wpcf7 [inert] {
opacity: 0.5;
}
.wpcf7 input[type="file"] {
cursor: pointer;
}
.wpcf7 input[type="file"]:disabled {
cursor: default;
}
.wpcf7 .wpcf7-submit:disabled {
cursor: not-allowed;
}
.wpcf7 input[type="url"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"] {
direction: ltr;
}
.wpcf7-reflection > output {
display: list-item;
list-style: none;
}
.wpcf7-reflection > output[hidden] {
display: none;
}#scrollUp {
width: 40px;
height: 40px;
}
#scrollUp .scroll-top {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
 @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@300;400;500;700;900&display=swap");
.image-tooltip {
position: absolute;
background: rgba(0, 0, 0, 0.9);
color: #fff;
padding: 8px 12px;
border-radius: 4px;
font-size: 14px;
white-space: nowrap;
z-index: 9999;
display: none;
max-width: 300px;
word-wrap: break-word;
white-space: normal;
pointer-events: none;
}
@media (max-width: 768px) {
.image-tooltip {
font-size: 12px;
padding: 6px 10px;
max-width: 250px;
}
}   .fw_contents {
margin-top: 0;
margin-bottom: 0;
}
#content:has(.fw_contents),
body:not(.home) #content:has(.fw_contents).wide {
padding: 0;
} :root { --color-background: #fff;
--color-background-tint: #fff3e2;
--color-font: #333;
--color-primary: #005739;
--color-primary-shade: #708d81;
--color-primary-tint: #b2c8ba;
--color-secondary: #f6764e;
--color-secondary-tint: #f3daaa;
--color-table-border: #ddd;
--body-font-size: min(calc(1.6rem + (1vw - 19.2px) * 0.1294), 1.6rem); --body-font-family: "Zen Kaku Gothic New", sans-serif;
--content-max-width: 1240px; --header-background: #fff;
--header-color-font: #444;
--header-color-primary: #005739;
--header-color-primary-shade: #4a6c59;
--header-color-primary-tint: #f7764e; --footer-background: #005739;
--footer-color-font: #fff;
--footer-color-primary: #a8d5ba; --px240: min(calc(240px + (1vw - 19.2px) * 10.356), 240px); --px200: min(calc(200px + (1vw - 19.2px) * 6.4725), 200px); --px180: min(calc(180px + (1vw - 19.2px) * 3.8835), 180px); --px160w: min(calc(160px + (1vw - 19.2px) * 5.178), 160px); --px160: min(calc(160px + (1vw - 19.2px) * 6.4725), 160px); --px150: min(calc(150px + (1vw - 19.2px) * 3.2362), 150px); --px140: min(calc(140px + (1vw - 19.2px) * 6.4725), 140px); --px120: min(calc(120px + (1vw - 19.2px) * 2.589), 120px); --px100w: min(calc(100px + (1vw - 19.2px) * 3.2362), 100px); --px100: min(calc(100px + (1vw - 19.2px) * 3.8835), 100px); --px96: min(calc(96px + (1vw - 19.2px) * 3.1068), 96px); --px80w: min(calc(80px + (1vw - 19.2px) * 1.2945), 80px); --px80: min(calc(80px + (1vw - 19.2px) * 2.589), 80px); --px80s: min(calc(80px + (1vw - 19.2px) * 3.8835), 80px); --px60w: min(calc(60px + (1vw - 19.2px) * 1.2945), 60px); --px60: min(calc(60px + (1vw - 19.2px) * 1.9417), 60px); --px50: min(calc(50px + (1vw - 19.2px) * 1.2945), 50px); --px40w: min(calc(40px + (1vw - 19.2px) * 0.6472), 40px); --px40: min(calc(40px + (1vw - 19.2px) * 1.2945), 40px); --px30w: min(calc(30px + (1vw - 19.2px) * 0.6472), 30px); --px30: min(calc(30px + (1vw - 19.2px) * 0.9709), 30px); --px24: min(calc(24px + (1vw - 19.2px) * 0.6472), 24px); --px20: min(calc(20px + (1vw - 19.2px) * 0.6472), 20px); --px18: min(calc(18px + (1vw - 19.2px) * 0.2589), 18px); --px16: min(calc(16px + (1vw - 19.2px) * 0.1294), 16px); --px14: min(calc(14px + (1vw - 19.2px) * 0.1294), 14px); --px12: min(calc(12px + (1vw - 19.2px) * 0.0647), 12px);  --rem120: min(calc(12rem + (1vw - 1.92rem) * 3.8835), 12rem); --rem80w: min(calc(8rem + (1vw - 1.92rem) * 1.2945), 8rem); --rem80: min(calc(8rem + (1vw - 1.92rem) * 2.589), 8rem); --rem72: min(calc(7.2rem + (1vw - 1.92rem) * 1.9417), 7.2rem); --rem60: min(calc(6rem + (1vw - 1.92rem) * 1.5534), 6rem); --rem48w: min(calc(4.8rem + (1vw - 1.92rem) * 0.6472), 4.8rem); --rem48: min(calc(4.8rem + (1vw - 1.92rem) * 1.5534), 4.8rem); --rem42w: min(calc(4.2rem + (1vw - 1.92rem) * 0.6472), 4.2rem); --rem42: min(calc(4.2rem + (1vw - 1.92rem) * 1.165), 4.2rem); --rem42s: min(calc(4.2rem + (1vw - 1.92rem) * 1.4887), 4.2rem); --rem40w: min(calc(4rem + (1vw - 1.92rem) * 0.6472), 4rem); --rem40: min(calc(4rem + (1vw - 1.92rem) * 1.2945), 4rem); --rem36: min(calc(3.6rem + (1vw - 1.92rem) * 0.7767), 3.6rem); --rem30w: min(calc(3rem + (1vw - 1.92rem) * 0.3883), 3rem); --rem30: min(calc(3rem + (1vw - 1.92rem) * 0.6472), 3rem); --rem30s: min(calc(3rem + (1vw - 1.92rem) * 0.9709), 3rem); --rem28: min(calc(2.8rem + (1vw - 1.92rem) * 0.6472), 2.8rem); --rem24w: min(calc(2.4rem + (1vw - 1.92rem) * 0.3883), 2.4rem); --rem24: min(calc(2.4rem + (1vw - 1.92rem) * 0.6472), 2.4rem); --rem20w: min(calc(2rem + (1vw - 1.92rem) * 0.2589), 2rem); --rem20: min(calc(2rem + (1vw - 1.92rem) * 0.3883), 2rem); --rem18: min(calc(1.8rem + (1vw - 1.92rem) * 0.2589), 1.8rem); --rem16: min(calc(1.6rem + (1vw - 1.92rem) * 0.1294), 1.6rem); --rem14: min(calc(1.4rem + (1vw - 1.92rem) * 0.1294), 1.4rem); --rem12: min(calc(1.2rem + (1vw - 1.92rem) * 0.0647), 1.2rem); }
#thumbImg,
header#h1Header {
height: 180px;
}
body {
font-family: "Zen Maru Gothic" !important;
}
h1.title,
.post h1,
header#h1Header h1.title {
font-family: "Zen Maru Gothic" !important;
}
p {
font-size: var(--rem18);
}
.post p {
letter-spacing: 0.04em;
line-height: 2;
font-weight: 500;
}
#front_top_content,
#front_bottom_content {
position: relative;
background: #ffffff;
padding: var(--px120) 0;
z-index: 10;
}
@media print, screen and (min-width: 1024px) {
#header .logo img {
-o-object-fit: contain;
object-fit: contain;
width: auto;
height: 100%;
max-width: 260px;
max-height: 70px;
}
} .post .txtstyle08 {
font-family: var(--font-family02);
font-size: var(--rem36);
font-weight: 600;
text-align: center;
color: var(--color-font);
line-height: 1.4;
overflow-wrap: break-word;
padding: 0;
margin: var(--rem42) auto var(--rem30);
border: none;
background: transparent;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.post .txtstyle08 .subtxt {
display: block;
font-size: var(--rem18);
color: #fff;
font-weight: 500;
padding: 0.2rem 0.5rem;
margin: var(--rem14) 0 0;
border: none;
background: var(--color-primary);
}
.post .txtstyle08::before,
.post .txtstyle08::after {
content: none;
}   .post .col2_list {
position: relative;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.post .col2_list > li {
width: 49%;
margin-bottom: 2%;
}
@media print, screen and (max-width: 414px) {
.post .col2_list > li {
width: 100%;
}
.post .col2_list > li:last-child {
margin-bottom: 0;
}
} .post .col3_list {
position: relative;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.post .col3_list > li {
width: 32%;
margin-bottom: 2%;
}
.post .col3_list > li:hover {
opacity: 0.7;
}
.post .col3_list > li a:hover {
opacity: 1;
}
.post .col3_list::before {
content: "";
display: block;
width: 32%;
height: 0;
order: 1;
}
.post .col3_list:after {
content: "";
display: block;
width: 32%;
height: 0;
}
@media print, screen and (max-width: 768px) {
.post .col3_list > li {
width: 49%;
}
.post .col3_list::before,
.post .col3_list:after {
content: none;
}
}
@media print, screen and (max-width: 414px) {
.post .col3_list > li {
width: 100%;
}
.post .col3_list > li:last-child {
margin-bottom: 0;
}
} .post .col4_list {
position: relative;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.post .col4_list > li {
width: 24%;
margin-bottom: 1.5%;
}
.post .col4_list::before {
content: "";
display: block;
width: 24%;
height: 0;
order: 1;
}
.post .col4_list:after {
content: "";
display: block;
width: 24%;
height: 0;
}
@media print, screen and (max-width: 1240px) {
.post .col4_list > li,
.post .col4_list::before,
.post .col4_list:after {
width: 32%;
margin-bottom: 2%;
}
}
@media print, screen and (max-width: 768px) {
.post .col4_list > li {
width: 49%;
}
.post .col4_list::before,
.post .col4_list:after {
content: none;
}
}
@media print, screen and (max-width: 414px) {
.post .col4_list > li {
width: 100%;
}
.post .col3_list > li:last-child {
margin-bottom: var(--px50);
}
} .post .colstyle01 .colstyle_ttl {
display: inline-block;
font-size: var(--rem20);
padding: 0;
border: none;
margin: 0 0 1rem 0;
background: linear-gradient(transparent 60%, #ff6 60%);
position: relative;
left: 50%;
transform: translateX(-50%);
}
a img {
transition: all 0.3s ease;
}
.googlemap {
padding-bottom: 45%;
}
#header a.head_btn.mail_btn::before,
#header a.head_btn.tel_btn::before,
.ofi-phone:before,
.fa.fa-envelope-o:before,
.mail_btn span,
.tel_btn span,
#MESY_FTMFM_footer_bar-wrapper ul#MESY_FTMFM_footer_bar li p.menu_name {
color: #ffffe0 !important;
}
@media print, screen and (min-width: 1024px) {
#header a.head_btn.tel_btn {
background-color: #005739;
}
#header a.head_btn {
transition: all 0.3s ease;
background: var(--header-color-primary-tint);
}
nav#mainNav ul li.current-menu-item a b,
nav#mainNav ul li a:hover b,
nav#mainNav ul li a:active b,
nav#mainNav ul li.current-menu-parent a b {
color: var(--header-color-font);
}
}
#footer li a,
.footeradd,
.footertel,
#footer li a:hover {
color: var(--footer-color-font);
}
#footer .address {
text-align: center;
padding: var(--px12) 0 var(--px30);
}
h2.title {
text-align: center;
font-size: var(--rem40);
font-weight: 500;
padding-bottom: var(--px50) !important;
}
#header h1.logo {
font-size: var(--rem16);
}
@media print, screen and (min-width: 1024px) {
#header .logo {
font-size: var(--rem16);
}
}
.title-logo {
display: flex;
justify-content: center;
}
h2.title span {
padding-left: 0px;
}
.postlist .post_text {
padding: var(--px30) 0px;
}
.postlist {
margin-bottom: var(--px50);
}
.metaslider .flexslider {
margin-bottom: 0px !important;
}
.link_list {
width: 100%;
max-width: 260px;
display: flex;
align-items: center;
justify-content: space-between;
margin: 0 auto;
padding: var(--px20) var(--px20);
background-color: var(--color-primary);
border-radius: 20px;
transition: all 0.3s ease;
box-shadow: 0 2px 6px rgba(0, 87, 57, 0.2);
position: relative;
cursor: pointer;
}
.link_list:hover {
opacity: 0.7;
}
.link_list a {
color: #fff;
text-decoration: none;
font-size: var(--rem18);
font-weight: 500;
position: absolute;
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
}
.link_list img {
width: 20px;
height: 20px;
margin-left: auto;
}
#header a.head_btn:hover {
opacity: 0.7;
}
.link_list.detail {
margin: var(--px20) auto;
border-radius: 20px;
background-color: #70a151;
max-width: none;
padding: var(--px16) var(--px20);
}
.project_list {
width: 100%;
max-width: 260px;
display: flex;
align-items: center;
justify-content: space-between;
margin: var(--px50) auto 0px;
padding: var(--px20) var(--px20);
background-color: #fff;
border-radius: 20px;
transition: all 0.3s ease;
box-shadow: 0 2px 6px rgba(0, 87, 57, 0.2);
position: relative;
cursor: pointer;
}
.project_list:hover {
opacity: 0.7;
}
.project_list a {
color: var(--color-primary);
text-decoration: none;
font-size: var(--rem16);
font-weight: 500;
position: absolute;
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
}
.project_list img {
width: 20px;
height: 20px;
margin-left: auto;
}
.pagenav {
margin-top: 20px;
}
@media print, screen and (max-width: 768px) {
.project_sec .page_contents_inner + .page_contents_inner {
margin-top: var(--px100);
}
}
#content,
body:not(.home) #content.wide {
padding-bottom: var(--px120);
}
@media print, screen and (max-width: 768px) {
#content,
body:not(.home) #content.wide {
padding-bottom: var(--px120);
}
}
.fw_contents .page_contents_inner {
background-color: var(--color-background-tint);
position: relative;
padding-bottom: var(--px120);
}
.fw_contents .page_contents_inner.strong::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url(//dragon-house.jp/wp-content/uploads/strong_bg.png.webp);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
pointer-events: none; z-index: 1;
}
.post h2::after {
display: none;
}
.post .col3_list > li {
padding: var(--px20);
background-color: #fff;
border: 3px solid var(--header-color-primary);
border-radius: 20px;
}
.aspect_title {
font-weight: bold;
font-size: var(--px20);
line-height: 1.5;
letter-spacing: 0.04em;
padding: var(--px16) 0px;
}
.post .col3_list > li {
margin-bottom: var(--px50);
}
@media print, screen and (max-width: 414px) {
.post .col3_list > li {
padding: var(--px50);
}
}
.sec_deco {
position: absolute;
left: 0;
bottom: var(--px20);
}
@media only screen and (max-width: 799px) {
.post img.sec_deco {
width: 200%;
max-width: 200%;
}
}
.fw_contents .page_contents_inner:nth-child(even) {
background-image: url(//dragon-house.jp/wp-content/uploads/top_service_bg.jpg.webp);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.title .white {
color: #fff;
}
.staff.project {
padding: 0px var(--px120);
}
.staff.project .project_list_clickable {
margin: var(--px50) 0px;
}
@media print, screen and (max-width: 768px) {
.staff.project .project_list_clickable {
margin: var(--px50) auto 0px;
}
}
@media print, screen and (max-width: 768px) {
.staff.project {
padding: 0px var(--px12);
}
.staff.project .flexbox .w50:last-child {
margin-bottom: 0px;
}
}
.w50 {
z-index: 2;
}
@media print, screen and (max-width: 768px) {
.w50 {
position: relative;
}
}
.project p {
line-height: 2;
letter-spacing: 0.04rem;
color: #fff;
font-size: var(--rem18);
}
.strong .w50.text_box {
z-index: 2;
background-color: var(--color-background);
padding: var(--px50) 0px;
display: grid;
align-items: center;
align-content: center;
}
.strong .w50.text_box h3 {
font-family: "Zen Maru Gothic";
position: relative;
text-align: center;
font-size: var(--rem20);
font-weight: 500;
color: var(--color-font);
margin-bottom: 0px;
padding-bottom: 0px;
border-bottom: none;
}
.strong .w50.text_box h3::before {
content: "01";
display: block;
font-size: var(--rem30);
font-weight: bold;
color: var(--color-secondary);
margin-bottom: var(--px12);
line-height: 1;
}
.strong .w50.text_box h3::after {
content: "";
display: block;
width: 1px;
height: var(--px30);
background-color: var(--color-secondary);
margin: var(--px12) auto;
}
.strong .w50.text_box p {
line-height: 2;
font-weight: 500;
letter-spacing: 0.04em;
color: var(--color-font);
text-align: left;
margin: auto var(--px50);
font-size: var(--rem18);
}
@media print, screen and (max-width: 768px) {
.strong .w50.text_box {
padding: var(--px20) 0px;
}
}
@media print, screen and (max-width: 768px) {
.strong .w50.text_box h3 {
margin-top: 0px;
}
}
.strong .flexbox.teleco_v1:nth-child(4) .w50.text_box h3::before {
content: "01";
}
.strong .flexbox.teleco_v1:nth-child(5) .w50.text_box h3::before {
content: "02";
}
.strong .flexbox.teleco_v1:nth-child(6) .w50.text_box h3::before {
content: "03";
}
.fw_contents .page_contents_inner.about {
background-image: url(//dragon-house.jp/wp-content/uploads/top_info_img001.png.webp);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.widecolor p {
color: #fff;
text-align: center;
font-size: var(--rem18);
line-height: 1.6;
letter-spacing: 0.04em;
}
.widecolor .project_list {
margin-bottom: 0px;
}
.page_contents_inner.contact {
background-image: url(//dragon-house.jp/wp-content/uploads/contact-bg.png.webp);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
margin-right: calc((100vw - 100%) / 2 * -1);
margin-left: calc((100vw - 100%) / 2 * -1);
padding: var(--px120) calc((100vw - 100%) / 2) var(--px120);
margin-top: 0;
}
.tel-button {
display: inline-flex;
align-items: center;
justify-content: center;
background-color: transparent;
color: white;
text-decoration: none;
padding: var(--px30) var(--px50);
border-radius: 20px;
font-size: var(--px24);
border: 1px solid #fff;
cursor: pointer;
letter-spacing: 0.06rem;
line-height: 1.8;
gap: var(--px12);
}
.tel-button:hover {
color: rgba(255, 255, 255, 0.664);
}
@media print, screen and (max-width: 768px) {
.tel-button {
width: 310px;
}
}
@media print, screen and (min-width: 1024px) {
nav#mainNav ul li a:hover {
opacity: 0.7;
background-color: rgb(201, 201, 201);
}
}
.tel-icon {
margin-right: 10px;
font-size: 20px;
}
.contact_wrapper {
transition: all 0.3s ease;
display: flex;
margin-top: var(--px50);
justify-content: center;
align-items: center;
gap: var(--px50);
}
@media print, screen and (max-width: 768px) {
.contact_wrapper {
flex-direction: column;
}
}
.project_sec .project_content.page_contents_inner {
margin-bottom: var(--px40);
}
.project_content.page_contents_inner {
width: 100vw;
margin-left: calc(50% - 50vw);
margin-bottom: var(--px120);
}
.project_content img.aligncenter {
width: 100%;
margin: 0 0;
}
.project_content .text_box {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 0px var(--px120);
}
@media print, screen and (max-width: 768px) {
.project_content .text_box {
padding: var(--px30) var(--px50);
}
.project .project_content.page_contents_inner {
margin-bottom: var(--px100);
}
}
body:not(.home) #content.wide:has(.project_sec) {
padding-bottom: var(--px120);
}
.project_content .text_box h3 {
display: inline-block;
}
header#h1Header {
background-color: #008250;
}
.message .maintitle {
margin-bottom: var(--px60);
font-family: "Zen Maru Gothic" !important;
}
.post h2 {
font-family: "Zen Maru Gothic" !important;
}
.message .subtitle {
font-size: var(--rem16);
font-weight: normal;
color: #666;
display: block;
margin-top: 5px;
}
.accept_wrapper {
display: flex;
align-items: center;
justify-content: center;
}
.wpcf7-form .underline {
border-bottom: 1px solid var(--color-primary);
}
.accept_wrapper .wpcf7-form-control-wrap {
width: -moz-fit-content;
width: fit-content;
}
.subimitarea .linkBtn {
padding: 0px !important;
}
#sitemap_list li {
margin-bottom: 0;
padding: 18px 0 18px 40px;
border-bottom: 1px solid var(--color-primary) !important;
}
.post ul#sitemap_list li {
margin-bottom: 0px;
}
.post ul#sitemap_list li:hover {
opacity: 0.7;
background-color: rgb(201, 201, 201);
}
.post2b img {
height: 300px;
width: 70%;
}
.page_nav_wrapper {
margin-bottom: var(--px120);
display: flex;
justify-content: space-between;
}
@media only screen and (max-width: 799px) {
.post2b img {
width: 100%;
margin-right: var(--px50);
}
.post2b .post2b_img {
width: 50%;
}
}
#cat-post .postlist {
margin-bottom: 0px;
}
.w50.image_box figure {
height: 100%;
}
.post img.aligncenter {
height: 100%;
}
.aspect_img {
border-radius: 20px;
}
.post li {
line-height: 1.6;
font-weight: 500;
font-size: var(--rem18);
}
.property_title {
padding: var(--px16) 0px;
font-size: var(--rem20);
}
.property-details {
display: flex;
flex-direction: column;
border-top: 1px solid #444;
border-bottom: 1px solid #444;
}
.detail-row {
font-size: var(--rem18);
padding: var(--px12) 0px;
display: flex;
align-items: center;
border-bottom: 1px dotted #9b9b9b;
}
.detail-row:last-child {
border-bottom: 1px dotted #9b9b9b;
}
.detail-label {
font-size: var(--rem18);
font-weight: bold;
min-width: 80px;
margin-right: 20px;
}
.property_info {
padding: var(--px12) var(--px20) 0px;
}
.categories {
padding: 4px 8px;
border-radius: 20px;
color: white;
font-size: 12px;
margin-right: 5px;
transition: all 0.3s ease;
}
.categories:hover {
opacity: 0.7;
}
.categories-left {
display: flex;
align-items: center;
}
.category-buy_apartment,
.category-buy_building,
.category-buy_land,
.category-rental {
background-color: #008250; }
.category-secondhand {
background-color: #333; }
.property_categories {
display: flex;
justify-content: space-between;
align-items: center;
min-height: var(--px40);
}
.property-category-filter {
max-width: 230px;
margin-bottom: 30px;
padding: 0 0 20px;
}
.category-dropdown {
width: 200px;
padding: 1px 5px;
border: 1px solid #ccc;
border-radius: 4px;
background-color: white;
font-size: 14px;
color: #333;
cursor: pointer;
background-size: 16px 16px;
padding-right: 40px;
}
.category-dropdown:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), 0.2);
}
.category-dropdown:hover {
border-color: #999;
}
.property_categories .categories {
margin-right: 5px;
}
.updated-date {
font-size: 12px;
color: #666;
margin-left: auto;
}
.product-gallery-thumbs .slick-slide img {
transition: all 0.3s ease;
}
.product-gallery-thumbs .slick-slide img:hover {
opacity: 0.7;
transform: scale(1.05);
}
.slick-track {
height: auto;
}
.slick-slide img {
height: 300px;
}
.slick-initialized .slick-slide {
display: flex !important;
align-items: center;
justify-content: center;
height: auto;
}
.product-gallery-thumbs {
width: 100%;
max-width: 100%; display: flex;
align-content: flex-start;
flex-wrap: wrap;
gap: 5px;
}
.product-gallery-thumbs > div {
width: calc((100% - 15px) / 4);
flex: 0 0 auto;
}
.product-gallery-thumbs img {
width: 100%;
height: 80px;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
border-radius: 4px;
cursor: pointer;
border: 2px solid transparent;
transition: border-color 0.3s ease;
}
.product-gallery-thumbs img:hover {
border-color: #007cba;
}
.product-gallery-thumbs .active img {
border-color: #007cba;
} .product-gallery-slider {
width: 60%;
}
.product-gallery-thumbs {
max-width: 450px; } .product-gallery-slider img {
height: 590px;
-o-object-fit: contain;
object-fit: contain;
-o-object-position: center;
object-position: center;
display: block;
}
figure.product_gallery {
display: flex;
gap: 20px;
justify-content: center;
}
.post .product-gallery-slider img {
max-width: none;
}
@media only screen and (max-width: 1023px) {
figure.product_gallery {
display: flex;
flex-direction: column;
align-items: center;
}
.product-gallery-thumbs {
margin-top: 10px;
}
}
@media only screen and (max-width: 1023px) {
.product-gallery-slider img {
height: 336px;
}
.product-gallery-slider {
width: 100%;
}
}
.recommend,
.around {
margin-top: var(--px50);
}
.section_title {
font-size: var(--rem30);
font-weight: 500;
padding-bottom: var(--px20);
}
.point {
border: 1px solid;
padding: var(--px20);
letter-spacing: 0.06em;
font-size: var(--rem18);
}
.post table td,
.post table th {
font-size: var(--rem18);
}
.post table {
margin-top: 0px;
}
a:hover,
a:active {
transition: all 0.3s ease;
}
form {
font-family: "Zen Maru Gothic" !important;
letter-spacing: 0.04em;
font-weight: 500;
}
.post form table {
margin: var(--px30) auto;
}
.google-map-container {
width: 100%;
}
.google-map-container iframe {
width: 100%;
height: 300px;
border: 1px solid #ccc;
border-radius: 8px;
}
.map_info {
display: flex;
gap: var(--px30);
}
.sp-only {
display: none;
}
@media only screen and (max-width: 799px) {
.sp-only {
display: block;
}
.map_info {
flex-direction: column;
}
}
.map_info .gmap {
flex: 0 0 40%;
}
.map_info .custom_table {
flex: 0 0 60%;
}
.custom_table.bottom {
margin-top: var(--px20);
}
.flex_50 {
display: flex;
margin-top: var(--px20);
align-items: stretch;
}
.flex_50 .custom_table.left,
.flex_50 .custom_table.right {
flex: 1;
margin-bottom: 0px;
}
.custom_table.flex_50_unified {
margin-top: var(--px20);
}
.custom_table.flex_50_unified th:nth-child(1),
.custom_table.flex_50_unified th:nth-child(3) {
width: 25%;
}
.custom_table.flex_50_unified td:nth-child(2),
.custom_table.flex_50_unified td:nth-child(4) {
width: 25%;
}
.custom_table.flex_50_unified th:nth-child(1) {
width: 15%;
}
.custom_table.flex_50_unified td:nth-child(2) {
width: 35%;
}
.custom_table.flex_50_unified th:nth-child(3) {
width: 15%;
}
.custom_table.flex_50_unified td:nth-child(4) {
width: 35%;
}
.custom_table.flex_50_unified th:nth-child(odd) {
border-right: none;
}
.custom_table.flex_50_unified td:nth-child(even) {
border-right: 1px solid var(--color-table-border);
}
@media only screen and (max-width: 799px) {
.flex_50 {
flex-direction: column;
}
.custom_table.flex_50_unified th,
.custom_table.flex_50_unified td {
width: 100% !important;
display: block;
}
.custom_table.flex_50_unified tr {
display: block;
border-bottom: 1px solid var(--color-table-border);
margin-bottom: var(--px20);
}
.custom_table.flex_50_unified th:nth-child(1) {
border-bottom: none;
}
.custom_table.flex_50_unified td:nth-child(2) {
margin-bottom: var(--px10);
border-bottom: 1px dotted #ccc;
}
.custom_table.flex_50_unified th:nth-child(3) {
border-bottom: none;
margin-top: var(--px10);
}
.custom_table.flex_50_unified td:nth-child(4) {
border-bottom: none;
}
.custom_table.flex_50_unified th:empty,
.custom_table.flex_50_unified td:empty {
display: none;
}
} .link_list_clickable {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
margin: var(--px20) auto 0px;
padding: var(--px12) var(--px20);
background-color: #70a151;
border-radius: 20px;
transition: all 0.3s ease;
text-decoration: none;
color: #ffffe0;
font-size: var(--rem18);
font-weight: 500;
position: relative;
}
.link_list_clickable:hover {
opacity: 0.7;
}
.link_list_clickable span {
color: #ffffe0;
text-decoration: none;
font-size: var(--rem18);
font-weight: 500;
white-space: nowrap;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.link_list_clickable img {
width: 20px;
height: 20px;
margin-left: auto;
} .link_list_clickable_top {
width: 100%;
max-width: 260px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
padding: var(--px20) var(--px20);
background-color: var(--color-primary);
border-radius: 20px;
transition: all 0.3s ease;
text-decoration: none;
color: #ffffe0;
font-size: var(--rem18);
font-weight: 500;
position: relative;
}
.link_list_clickable_top:hover {
opacity: 0.7;
}
.link_list_clickable_top span {
color: #ffffe0;
text-decoration: none;
font-size: var(--rem18);
font-weight: 500;
white-space: nowrap;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.link_list_clickable_top img {
width: 20px;
height: 20px;
margin-left: auto;
}
.postlist .ttls,
.postlist .date {
font-size: var(--rem18);
font-weight: 500;
letter-spacing: 0.04em;
line-height: 2;
font-family: "Zen Maru Gothic";
} .project_list_clickable {
width: 100%;
max-width: 260px;
display: flex;
align-items: center;
justify-content: center;
margin: var(--px50) auto 0px;
padding: var(--px20) var(--px20);
color: var(--color-primary);
border-radius: 20px;
transition: all 0.3s ease;
text-decoration: none;
font-size: var(--rem18);
font-weight: 500;
position: relative;
}
.project_list_clickable:hover {
opacity: 0.7;
}
.project_list_clickable span {
color: var(--color-primary);
text-decoration: none;
font-size: var(--rem18);
font-weight: 500;
white-space: nowrap;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.project_list_clickable img {
width: 20px;
height: 20px;
margin-left: auto;
}
span.cost {
color: red;
font-size: var(--rem24);
letter-spacing: 0.2rem;
}
.contact_bottom {
background: var(--header-color-primary-tint);
}
#scrollUp {
bottom: 70px !important;
right: 15px !important;
}
.subimitarea .linkBtn input[type=submit] {
padding: 20px 10px !important;
}
.linkBtn.back_top {
padding: 20px 10px !important;
}
.linkBtn:hover,
.post .linkBtn:hover {
opacity: 0.7;
background-color: var(--color-primary);
}
.prev:hover {
opacity: 0.7;
}
.next:hover {
opacity: 0.7;
}
#footer .logo {
display: flex;
align-items: center;
justify-content: center;
}
#footer img {
max-width: 260px;
}
#footer a:hover img {
opacity: 1 !important;
}
#footer {
padding: var(--px80) 0 var(--px60);
}
#footer .logo a {
padding: 5px;
display: flex;
justify-content: center;
background: white;
}
#header a:hover img {
opacity: 1 !important;
}