@charset "UTF-8";
:root {
--fsz: 0.9rem;
--ls: 0;
--lh: 1.5;
}
@media screen and (min-width: 375px) {
:root {
--fsz: 1rem;
}
}
:root {
--headerHeight: 50px;
}
@media screen and (min-width: 768px) {
:root {
--headerHeight: 65px;
}
}
@media screen and (min-width: 1024px) {
:root {
--headerHeight: 88px;
}
}
:root {
--speed: 0.3s;
--color1: transparent;
--color2: transparent;
--size: 0;
}
* {
letter-spacing: var(--ls);
line-height: var(--lh);
}
html {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
overflow-x: hidden;
scroll-behavior: smooth;
}
body {
margin: 0;
background: #F8F4E6;
color: #2A2A2A;
font-size: var(--fsz);
font-family: "Zen Kaku Gothic New", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-weight: 400;
overflow-x: hidden;
position: relative;
}
main {
margin-top: var(--headerHeight);
}
section {
position: relative;
}
a {
background-color: transparent;
-webkit-text-decoration-skip: objects;
color: currentColor;
text-decoration: none;
cursor: pointer;
transition: var(--speed);
}
a:hover {
outline-width: 0;
text-decoration: none;
opacity: 0.8;
}
a.underline {
text-decoration: underline;
}
a.underline:hover {
text-decoration: none;
}
a.disabled {
pointer-events: none;
}
@media screen and (min-width: 768px) {
a[href*="tel:"] {
pointer-events: none;
}
}
img {
max-width: 100%;
height: auto;
border-style: none;
object-fit: contain;
vertical-align: bottom;
}
strong {
font-weight: 700;
}
/* ============= common class ================ */
.inner {
width: calc(100% - 40px);
max-width: 600px;
margin-left: auto;
margin-right: auto;
position: relative;
}
@media screen and (min-width: 768px) {
.inner {
max-width: 1200px;
}
}
.block {
width: 100%;
display: block;
}
.disp_none {
display: none !important;
}
@media screen and (min-width: 576px) {
.disp_xs {
display: none !important;
}
}
@media screen and (max-width: 767px) {
.disp_tab, .disp_pc, .disp_notsp {
display: none !important;
}
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
.disp_sp, .disp_pc {
display: none !important;
}
}
@media screen and (min-width: 1024px) {
.disp_sp, .disp_tab, .disp_notpc {
display: none !important;
}
}
.en {
font-family: "Poppins", "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.fit {
overflow: hidden;
position: relative;
}
.fit__item {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
}
/*------------------------------------------------------
header
-------------------------------------------------------*/
.header {
width: 100%;
height: var(--headerHeight);
background: #F8F4E6;
position: fixed;
top: 0;
left: 0;
z-index: 1040;
}
.header__inner {
width: calc(100% - 28px);
max-width: 1440px;
height: 100%;
padding: 2px 0 0;
display: flex;
align-items: center;
justify-content: space-between;
}
@media screen and (min-width: 1200px) {
.header__inner {
padding: 0 7px;
}
}
.header__logo_link {
display: flex;
align-items: center;
grid-gap: 8px;
}
.header__logo_img {
width: 67px;
flex-shrink: 0;
}
.header__logo_txt {
font-size: 10px;
font-weight: 500;
--lh: 1.3;
}
@media screen and (min-width: 768px) {
.header__logo_img {
width: 94px;
margin-top: -9px;
}
.header__logo_txt {
font-size: 12px;
}
}
@media screen and (min-width: 1024px) {
.header__logo_link {
grid-gap: 12px;
}
.header__logo_img {
width: 94px;
margin-top: -9px;
}
.header__logo_txt {
font-size: 15px;
}
}
.header__navWrap {
width: 100%;
height: calc(100vh - var(--headerHeight));
background-color: #F8F4E6;
position: fixed;
top: var(--headerHeight);
left: 0;
transition: opacity var(--speed) ease;
opacity: 0;
pointer-events: none;
z-index: -100;
}
.header__navWrap.visible {
pointer-events: auto;
opacity: 1;
z-index: 1040;
}
.header__navWrap_inner {
padding: 70px 0;
display: flex;
flex-direction: column;
align-items: center;
grid-gap: 55px;
}
.header__navWrap_rightCol {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
grid-gap: 20px;
}
.header__navWrap_tel {
width: calc(100% - 10px);
padding: 20px 20px 15px;
background-color: #5F6527;
border-radius: 12px;
color: #fff;
font-size: 12px;
font-weight: 500;
display: flex;
flex-direction: column;
align-items: center;
}
.header__navWrap_tel a {
margin-bottom: 10px;
font-size: 30px;
font-weight: 700;
--lh: 1;
display: flex;
align-items: center;
grid-gap: 10px;
}
.header__navWrap_tel a::before {
content: "";
width: 24px;
height: 24px;
background: url('data:image/svg+xml;charset=utf8,') center/contain no-repeat;
display: block;
flex-shrink: 0;
}
.header__navWrap_sns {
display: flex;
align-items: center;
justify-content: center;
grid-gap: 10px;
}
.header__navWrap_sns_icon {
width: 28px;
display: block;
}
.header__navWrap_list {
width: 100%;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 10px;
}
.header__navWrap_list .navBtn {
width: 100%;
padding: 8px 20px 8px 5px;
background-color: var(--color1);
border: 1px solid #DC6B00;
border-radius: 40px;
color: var(--color2);
font-weight: 700;
display: flex;
align-items: center;
grid-gap: 10px;
}
.header__navWrap_list .navBtn__icon {
width: 42px;
height: 42px;
border-radius: 50%;
flex-shrink: 0;
}
.header__navWrap_list .navBtn__arrow {
width: 16px;
height: 16px;
margin-left: auto;
border-radius: 50%;
color: transparent;
flex-shrink: 0;
}
.header__navWrap_list .navBtn:hover {
background-color: var(--color2);
color: var(--color1);
opacity: 1;
}
.header__navWrap_list .navBtn--white {
--color1: #fff;
--color2: #DC6B00;
}
.header__navWrap_list .navBtn--white .navBtn__icon {
background: var(--color2) url('data:image/svg+xml;charset=utf8,') center/contain no-repeat;
}
.header__navWrap_list .navBtn--white .navBtn__arrow {
background: var(--color2) url('data:image/svg+xml;charset=utf8,') center/contain no-repeat;
}
.header__navWrap_list .navBtn--white:hover .navBtn__icon {
background: var(--color1) url('data:image/svg+xml;charset=utf8,') center/contain no-repeat;
}
.header__navWrap_list .navBtn--white:hover .navBtn__arrow {
background: var(--color1) url('data:image/svg+xml;charset=utf8,') center/contain no-repeat;
}
.header__navWrap_list .navBtn--orange {
--color1: #DC6B00;
--color2: #fff;
}
.header__navWrap_list .navBtn--orange .navBtn__icon {
background: var(--color2) url('data:image/svg+xml;charset=utf8,') center/contain no-repeat;
}
.header__navWrap_list .navBtn--orange .navBtn__arrow {
background: var(--color2) url('data:image/svg+xml;charset=utf8,') center/contain no-repeat;
}
.header__navWrap_list .navBtn--orange:hover .navBtn__icon {
background: var(--color1) url('data:image/svg+xml;charset=utf8,') center/contain no-repeat;
}
.header__navWrap_list .navBtn--orange:hover .navBtn__arrow {
background: var(--color1) url('data:image/svg+xml;charset=utf8,') center/contain no-repeat;
}
@media screen and (min-width: 768px) {
.header__navWrap_inner {
max-width: 1072px;
height: 100%;
flex-direction: row;
align-items: center;
justify-content: center;
grid-gap: 40px;
}
.header__navWrap_rightCol {
width: auto;
}
.header__navWrap_tel {
font-size: 14px;
grid-gap: 5px;
}
.header__navWrap_tel a {
margin-bottom: 8px;
font-size: 36px;
}
.header__navWrap_tel a::before {
width: 29px;
height: 29px;
}
}
@media screen and (min-width: 1024px) {
.header__navWrap_inner {
justify-content: space-between;
}
.header__navWrap_rightCol {
width: 50%;
max-width: 472px;
}
.header__navWrap_list .navBtn {
grid-gap: 16px;
}
}
.header__gnav {
display: grid;
grid-gap: 20px;
}
.header__gnav a {
padding-left: 30px;
font-weight: 500;
position: relative;
}
.header__gnav a::before {
content: "";
width: 10px;
height: 20px;
background: #DC6B00;
display: block;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%) skewX(-20deg);
}
@media screen and (min-width: 768px) {
.header__gnav {
grid-gap: 28px;
flex-shrink: 0;
}
}
@media screen and (min-width: 1024px) {
.header__gnav {
width: 50%;
max-width: 420px;
padding-left: 15px;
}
.header__gnav a {
padding-left: 40px;
font-size: 24px;
}
}
@media screen and (min-width: 1200px) {
.header__gnav {
margin-left: 80px;
}
}
.header__telTxt {
margin-left: auto;
margin-right: 20px;
font-size: 12px;
font-weight: 500;
}
.header__telTxt p {
display: flex;
align-items: flex-end;
grid-gap: 10px;
}
.header__telTxt a {
font-size: 30px;
font-weight: 700;
--lh: 1;
display: flex;
align-items: center;
grid-gap: 10px;
}
.header__telTxt a::before {
content: "";
width: 24px;
height: 24px;
background: url('data:image/svg+xml;charset=utf8,') center/contain no-repeat;
display: block;
flex-shrink: 0;
}
@media screen and (min-width: 1024px) {
.header__telTxt {
margin-right: 65px;
}
.header__telTxt p {
grid-gap: 15px;
}
}
.header__toggler {
width: 40px;
height: 40px;
background-color: #5F6527;
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
grid-gap: 3px;
flex-shrink: 0;
position: relative;
transform: translateX(8px);
}
.header__toggler span {
width: 16px;
height: 1.5px;
background-color: #fff;
display: block;
transition: var(--speed);
}
.header__toggler.open span {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
transform: rotate(45deg);
}
.header__toggler.open span + span {
transform: rotate(-45deg);
}
.header__toggler.open span + span + span {
transform: scale(0);
}
@media screen and (min-width: 768px) {
.header__toggler {
width: 54px;
height: 54px;
transform: translateX(0);
}
.header__toggler span {
width: 18px;
height: 2px;
}
}
/*------------------------------------------------------
footer
-------------------------------------------------------*/
.footer {
padding: 70px 0 55px;
font-size: 14px;
}
@media screen and (min-width: 768px) {
.footer {
padding: 105px 0 85px;
}
}
.footer__inner {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
grid-gap: 30px;
}
@media screen and (min-width: 768px) {
.footer__inner {
justify-content: space-between;
grid-gap: 30px 0;
}
}
.footer__infoBlk {
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
grid-gap: 16px;
}
.footer__infoBlk_logo {
width: 135px;
}
.footer__infoBlk_name {
width: 272px;
}
.footer__infoBlk_address {
font-size: 14px;
font-weight: 500;
--lh: 1.8;
}
.footer__infoBlk_qual {
font-size: 10px;
--lh: 1.4;
}
@media screen and (min-width: 768px) {
.footer__infoBlk {
width: auto;
grid-gap: 10px;
}
.footer__infoBlk_address {
margin-bottom: 6px;
}
}
@media screen and (min-width: 1024px) {
.footer__infoBlk_logo {
width: 232px;
margin-bottom: 37px;
}
.footer__infoBlk_name {
width: 369px;
}
}
.footer__navBlk {
width: 100%;
padding-top: 10px;
}
.footer__navBlk_list {
margin-bottom: 20px;
font-size: 14px;
font-weight: 500;
white-space: nowrap;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 20px 30px;
}
.footer__navBlk_list .sub-menu {
margin-top: 10px;
font-size: 15px;
display: grid;
grid-gap: 10px;
}
.footer__navBlk_list .sub-menu li {
padding-left: 15px;
position: relative;
}
.footer__navBlk_list .sub-menu li::before {
content: "";
width: 10px;
height: 2px;
background-color: #D5CECE;
display: block;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
}
.footer__navBlk_tel {
width: 100%;
padding: 16px 20px 18px;
background-color: #5F6527;
border-radius: 10px;
color: #fff;
font-size: 12px;
font-weight: 500;
display: flex;
flex-direction: column;
align-items: center;
}
.footer__navBlk_tel a {
margin-bottom: 3px;
font-size: 25px;
font-weight: 700;
--lh: 1;
display: flex;
align-items: center;
grid-gap: 10px;
}
.footer__navBlk_tel a::before {
content: "";
width: 20px;
height: 20px;
background: url('data:image/svg+xml;charset=utf8,') center/contain no-repeat;
display: block;
flex-shrink: 0;
}
@media screen and (max-width: 1023px) {
.footer__navBlk_list li {
grid-column: 1;
}
.footer__navBlk_list li.contents {
grid-column: 2;
grid-row: 1/span 4;
}
}
@media screen and (min-width: 768px) {
.footer__navBlk {
width: auto;
padding-top: 55px;
}
.footer__navBlk_list {
margin-bottom: 55px;
}
.footer__navBlk_tel {
padding: 20px 20px 18px;
}
.footer__navBlk_tel a {
margin-bottom: 10px;
font-size: 30px;
}
.footer__navBlk_tel a::before {
width: 24px;
height: 24px;
}
}
@media screen and (min-width: 1024px) {
.footer__navBlk_list {
font-size: 16px;
display: flex;
align-items: flex-start;
grid-gap: 40px;
}
}
@media screen and (min-width: 1200px) {
.footer__navBlk_list {
grid-gap: 50px;
}
}
.footer__btmBlk {
width: 100%;
padding: 15px 0;
display: flex;
flex-direction: column;
align-items: center;
grid-gap: 20px;
position: relative;
}
.footer__btmBlk_sns {
display: flex;
align-items: center;
justify-content: center;
grid-gap: 10px;
}
.footer__btmBlk_sns_icon {
width: 28px;
display: block;
}
.footer__btmBlk_topBtn {
width: 50px;
height: 50px;
background: #2A2A2A url('data:image/svg+xml;charset=utf8,') center/40px no-repeat;
border: 1px solid #2A2A2A;
border-radius: 50%;
color: transparent;
position: absolute;
top: 0;
right: 0;
transform: rotate(-90deg);
}
.footer__btmBlk_topBtn:hover {
background: #fff url('data:image/svg+xml;charset=utf8,') center/40px no-repeat;
opacity: 1;
}
.footer__btmBlk_copyright {
font-size: 10px;
font-weight: 500;
--lh: 1.8;
}
@media screen and (min-width: 768px) {
.footer__btmBlk {
padding: 10px 0;
flex-direction: row;
justify-content: flex-end;
grid-gap: 40px;
}
.footer__btmBlk_topBtn {
width: 60px;
height: 60px;
background: #2A2A2A url('data:image/svg+xml;charset=utf8,') center/40px no-repeat;
position: relative;
}
.footer__btmBlk_copyright {
margin-right: auto;
font-size: 14px;
align-self: flex-end;
order: -1;
}
}
.footer__cta {
width: 100%;
height: 50px;
position: fixed;
bottom: 0;
left: 0;
z-index: 1050;
}
.footer__cta_list {
width: 100%;
height: 100%;
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.footer__cta_list .navBtn {
width: 100%;
height: 100%;
padding: 8px 13px 8px 8px;
background-color: var(--color1);
border-top: 1px solid #DC6B00;
border-bottom: 1px solid #DC6B00;
color: var(--color2);
font-size: 12px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
grid-gap: 14px;
}
.footer__cta_list .navBtn__icon {
width: 34px;
height: 34px;
border-radius: 50%;
flex-shrink: 0;
}
.footer__cta_list .navBtn__txt {
width: 100%;
}
.footer__cta_list .navBtn__arrow {
width: 12px;
height: 12px;
border-radius: 50%;
color: transparent;
flex-shrink: 0;
}
.footer__cta_list .navBtn:hover {
background-color: var(--color2);
color: var(--color1);
opacity: 1;
}
.footer__cta_list .navBtn--white {
--color1: #fff;
--color2: #DC6B00;
}
.footer__cta_list .navBtn--white .navBtn__icon {
background: var(--color2) url('data:image/svg+xml;charset=utf8,') center/contain no-repeat;
}
.footer__cta_list .navBtn--white .navBtn__arrow {
background: var(--color2) url('data:image/svg+xml;charset=utf8,') center/contain no-repeat;
}
.footer__cta_list .navBtn--white:hover .navBtn__icon {
background: var(--color1) url('data:image/svg+xml;charset=utf8,') center/contain no-repeat;
}
.footer__cta_list .navBtn--white:hover .navBtn__arrow {
background: var(--color1) url('data:image/svg+xml;charset=utf8,') center/contain no-repeat;
}
.footer__cta_list .navBtn--orange {
--color1: #DC6B00;
--color2: #fff;
}
.footer__cta_list .navBtn--orange .navBtn__icon {
background: var(--color2) url('data:image/svg+xml;charset=utf8,') center/contain no-repeat;
}
.footer__cta_list .navBtn--orange .navBtn__icon--book {
background: var(--color2) url('data:image/svg+xml;charset=utf8,') center/contain no-repeat;
}
.footer__cta_list .navBtn--orange .navBtn__arrow {
background: var(--color2) url('data:image/svg+xml;charset=utf8,') center/contain no-repeat;
}
.footer__cta_list .navBtn--orange:hover .navBtn__icon {
background: var(--color1) url('data:image/svg+xml;charset=utf8,') center/contain no-repeat;
}
.footer__cta_list .navBtn--orange:hover .navBtn__icon--book {
background: var(--color1) url('data:image/svg+xml;charset=utf8,') center/contain no-repeat;
}
.footer__cta_list .navBtn--orange:hover .navBtn__arrow {
background: var(--color1) url('data:image/svg+xml;charset=utf8,') center/contain no-repeat;
}
@media screen and (min-width: 576px) {
.footer__cta_list .navBtn__txt {
text-align: center;
}
}
@media screen and (min-width: 768px) {
.footer__cta {
max-width: 470px;
height: 60px;
bottom: 20px;
left: auto;
right: 20px;
z-index: 1030;
}
.footer__cta_list {
grid-gap: 10px;
}
.footer__cta_list .navBtn {
border-radius: 40px;
border: 1px solid #DC6B00;
color: var(--color2);
font-size: 16px;
}
.footer__cta_list .navBtn__icon {
width: 42px;
height: 42px;
}
.footer__cta_list .navBtn__txt {
text-align: left;
}
.footer__cta_list .navBtn__arrow {
width: 16px;
height: 16px;
}
}
/*------------------------------------------------------
main
-------------------------------------------------------*/
.breadcrumbArea {
width: 100%;
padding: 10px 0;
}
.breadcrumbArea__inner {
display: flex;
align-items: center;
grid-gap: 6px;
}
.breadcrumbArea__inner > span {
font-size: 12px;
font-weight: 500;
--lh: 1.5;
flex-shrink: 0;
}
.breadcrumbArea__inner > span:last-child {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
flex-shrink: 1;
overflow: hidden;
}
.breadcrumbArea__inner > span.sep {
width: 20px;
height: 20px;
background: url('data:image/svg+xml;charset=utf8,') center/contain no-repeat;
color: transparent;
}
.breadcrumbArea__inner a {
color: #BEBEBE;
}
.pageTtlArea {
width: 100%;
padding: 28px 0 38px;
}
@media screen and (min-width: 768px) {
.pageTtlArea {
padding: 60px 0 48px;
}
}
.pageTtlArea__ttl {
--lh: 1;
text-align: center;
display: flex;
flex-direction: column-reverse;
align-items: center;
grid-gap: 8px;
}
.pageTtlArea__ttl_jp {
font-weight: 700;
}
.pageTtlArea__ttl_en {
padding-top: 14px;
margin-left: -16px;
font-size: 48px;
font-weight: 700;
position: relative;
}
.pageTtlArea__ttl_en::before {
content: "";
width: 12px;
height: 27px;
background: #DC6B00;
display: block;
position: absolute;
top: 0;
left: -25px;
transform: skewX(-23deg);
}
@media screen and (min-width: 768px) {
.pageTtlArea__ttl {
font-size: 18px;
grid-gap: 10px;
}
.pageTtlArea__ttl_en {
padding-top: 30px;
font-size: 60px;
}
}
.pagination {
width: 100%;
margin-top: 50px;
}
@media screen and (min-width: 768px) {
.pagination {
margin-top: 100px;
}
}
.pagination ul.page-numbers {
font-weight: 500;
display: flex;
align-items: center;
justify-content: center;
grid-gap: 32px;
}
.pagination ul.page-numbers .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
}
.pagination ul.page-numbers .page-numbers.current, .pagination ul.page-numbers .page-numbers:hover {
color: #CBCBCB;
opacity: 1;
}
.pagination ul.page-numbers .page-numbers.next, .pagination ul.page-numbers .page-numbers.prev {
background-color: transparent;
color: transparent;
position: relative;
}
.pagination ul.page-numbers .page-numbers.next::before, .pagination ul.page-numbers .page-numbers.prev::before {
content: "";
width: 9px;
height: 9px;
border-width: 1px 1px 0 0;
border-style: solid;
border-color: #2A2A2A;
position: absolute;
top: 50%;
transition: var(--speed);
}
.pagination ul.page-numbers .page-numbers.next:hover::before, .pagination ul.page-numbers .page-numbers.prev:hover::before {
border-color: #CBCBCB;
}
.pagination ul.page-numbers .page-numbers.prev::before {
left: 3px;
transform: translate(0, -50%) rotate(-135deg);
}
.pagination ul.page-numbers .page-numbers.next::before {
right: 3px;
transform: translate(0, -50%) rotate(45deg);
}
.pagination ul.page-numbers .page-numbers.dots {
pointer-events: none;
}
.secTtl {
width: 100%;
padding-left: 10px;
white-space: nowrap;
display: flex;
flex-direction: column-reverse;
position: relative;
}
.secTtl--centering {
align-items: center;
}
.secTtl__jp {
font-weight: 700;
--lh: 2;
}
.secTtl__en {
padding-top: 12px;
font-size: 48px;
font-weight: 700;
--lh: 1;
position: relative;
}
.secTtl__en::before {
content: "";
width: 12px;
height: 27px;
background: #DC6B00;
display: block;
position: absolute;
top: 0;
left: -10px;
transform: skewX(-23deg);
}
@media screen and (min-width: 768px) {
.secTtl {
padding-left: 0;
}
.secTtl__jp {
font-size: 18px;
}
.secTtl__en {
font-size: 60px;
}
.secTtl__en::before {
width: 20px;
height: 37px;
left: -44px;
}
}
.slideArrow {
width: var(--size);
height: var(--size);
background: #2A2A2A url('data:image/svg+xml;charset=utf8,') center/40px no-repeat;
border: 1px solid #2A2A2A;
border-radius: 50%;
transition: var(--speed);
}
.slideArrow--prev {
transform: scale(-1, 1);
}
.slideArrow:hover {
background: #fff url('data:image/svg+xml;charset=utf8,') center/40px no-repeat;
}
.linkBtn {
--color1: #5F6527;
--color2: #fff;
width: 100%;
height: 40px;
margin-top: 16px;
background-color: var(--color1);
border: 1px solid #5F6527;
border-radius: 4px;
color: var(--color2);
font-weight: 700;
--lh: 1;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.linkBtn::after {
content: "";
width: 13px;
height: 13px;
background: #fff url('data:image/svg+xml;charset=utf8,') center/contain no-repeat;
border-radius: 50%;
display: block;
position: absolute;
top: 50%;
right: 14px;
transform: translateY(-50%);
transition: var(--speed);
}
.linkBtn:hover {
background-color: var(--color2);
color: var(--color1);
}
.linkBtn:hover::after {
background: var(--color1) url('data:image/svg+xml;charset=utf8,') center/contain no-repeat;
}
.linkBtn--white {
--color1: #fff;
--color2: #5F6527;
}
.linkBtn--white::after {
background: #5F6527 url('data:image/svg+xml;charset=utf8,') center/contain no-repeat;
}
.linkBtn--white:hover::after {
background: #fff url('data:image/svg+xml;charset=utf8,') center/contain no-repeat;
}
.linkBtn--rev::after {
left: 14px;
right: auto;
transform: translateY(-50%) scale(-1, 1);
}
@media screen and (min-width: 768px) {
.linkBtn {
height: 64px;
}
.linkBtn::after {
width: 14px;
height: 14px;
}
.linkBtn--rev::after {
left: 20px;
}
}
.bnrWrap {
width: 100%;
max-width: 994px;
margin-top: 70px;
margin-left: auto;
margin-right: auto;
border-radius: 10px;
overflow: hidden;
}
@media screen and (min-width: 768px) {
.bnrWrap {
margin-top: 100px;
}
}
.postItem__link {
width: 100%;
padding: 0 10px;
display: flex;
align-items: flex-start;
grid-gap: 15px;
}
@media screen and (min-width: 768px) {
.postItem__link {
padding: 0;
grid-gap: 25px;
align-items: center;
}
}
.postItem__thumb {
width: 36.1905%;
padding-top: 27.5206%;
border-radius: 4px;
flex-shrink: 0;
}
.postItem__thumb:not(:has(img)) {
background-color: #F8F4E6;
position: relative;
}
.postItem__thumb:not(:has(img))::after {
content: "no image";
color: #FFF;
font-weight: 700;
font-family: "Poppins", "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
white-space: nowrap;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
@media screen and (min-width: 768px) {
.postItem__thumb {
width: 280px;
padding-top: 213px;
border-radius: 10px;
}
}
.postItem__txtWrap {
width: 100%;
font-size: 12px;
--lh: 1.5;
}
@media screen and (min-width: 768px) {
.postItem__txtWrap {
font-size: 16px;
}
}
.postItem__meta {
margin-bottom: 6px;
font-size: 10px;
--ls: 0.1em;
--lh: 1;
display: flex;
align-items: center;
grid-gap: 6px;
}
.postItem__meta .cat {
padding: 5px 8px;
background-color: #5F6527;
border-radius: 4px;
color: #fff;
font-weight: 700;
--ls: 0.05em;
}
@media screen and (min-width: 768px) {
.postItem__meta {
margin-bottom: 10px;
font-size: 12px;
grid-gap: 15px;
}
}
.postItem__ttl {
/*padding-bottom: 8px;
margin-bottom: 10px;*/
font-size: 14px;
font-weight: 700;
--ls: 0.1em;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
line-clamp: 4;
overflow: hidden;
}
@media screen and (min-width: 768px) {
.postItem__ttl {
/*padding-bottom: 16px;
margin-bottom: 16px;*/
font-size: 16px;
}
}
.postItem__txt{
padding-top: 10px;
margin-top: 8px;
border-top: 1px solid #2A2A2A;
}
@media screen and (min-width: 768px){
.postItem__txt{
padding-top: 16px;
margin-top: 16px;
}
}
.propertyItem {
max-width: 100%;
}
.propertyItem__link {
width: 100%;
height: 100%;
background-color: #fff;
border-radius: 20px;
display: block;
overflow: hidden;
}
.propertyItem__thumb {
width: 100%;
padding-top: 73.3761%;
}
.propertyItem__thumb:not(:has(img)) {
background-color: #5F6527;
position: relative;
}
.propertyItem__thumb:not(:has(img))::after {
content: "no image";
color: #FFF;
font-weight: 700;
font-family: "Poppins", "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
white-space: nowrap;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.propertyItem__imgBlk {
width: 100%;
max-width: calc(100vw - 40px);
}
.propertyItem__imgBlk_slider {
width: 100%;
max-width: 100%;
overflow: hidden;
}
.propertyItem__imgBlk_slider .swiper-slide {
max-width: calc(100vw - 40px);
}
.propertyItem__imgBlk_slide {
width: 100%;
max-width: 100%;
padding-top: min(100%, 100vw - 40px);
border-radius: 10px;
}
.propertyItem__imgBlk_thumb {
width: 100%;
max-width: calc(100vw - 40px);
margin-top: 10px;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}
.propertyItem__imgBlk_thumb .thumb {
width: 100%;
padding-top: 74.8858%;
border-radius: 4px;
}
.propertyItem__txtWrap {
width: 100%;
padding: 24px 20px;
}
.propertyItem__infoBlk {
padding: 8px 0 13px;
margin-bottom: 16px;
border-bottom: 3px dashed #2A2A2A;
}
.propertyItem__catch {
color: #5F6527;
font-weight: 700;
--ls: 0.05em;
--lh: 1.7;
}
.propertyItem__meta {
margin-bottom: 4px;
display: flex;
flex-wrap: wrap;
align-items: center;
grid-gap: 5px 10px;
}
.propertyItem__meta .new {
padding: 5px 8px;
background-color: #5F6527;
border-radius: 4px;
color: #fff;
font-size: 13px;
font-weight: 700;
--ls: 0.05em;
--lh: 1;
display: inline-block;
}
.propertyItem__meta .location {
border-bottom: 1px solid #5F6527;
color: #5F6527;
font-size: 14px;
font-weight: 500;
--lh: 1.5;
display: flex;
align-items: center;
grid-gap: 5px;
}
.propertyItem__meta .location::before {
content: "";
width: 14px;
height: 14px;
background: url(../img/common/icon-map.svg) center/contain no-repeat;
display: block;
flex-shrink: 0;
}
.propertyItem__ttl {
font-size: 20px;
font-weight: 700;
--ls: 0.05em;
--lh: 1.7;
}
.propertyItem__access {
margin-top: 14px;
}
.propertyItem__cat {
padding: 0 10px;
border: 1px solid #5F6527;
border-radius: 30px;
color: #5F6527;
font-size: 14px;
font-weight: 500;
--lh: 1.5;
}
.propertyItem__price {
margin-top: 24px;
font-weight: 700;
}
.propertyItem__price strong {
font-size: 32px;
font-weight: 500;
}
.propertyItem__recomBlk {
width: 100%;
padding: 30px 12px 12px;
margin-top: 40px;
margin-bottom: 12px;
background-color: rgba(255, 255, 255, 0.6);
background-image: linear-gradient(0deg, transparent calc(100% - 1px), #ebebeb calc(100% - 1px)), linear-gradient(90deg, transparent calc(100% - 1px), #ebebeb calc(100% - 1px));
background-size: 16px 16px;
background-repeat: repeat;
background-position: center center;
border: 4px solid #DBCB00;
border-radius: 10px;
position: relative;
}
.propertyItem__recomBlk_ttl {
width: 206px;
padding: 10px;
background-color: #DBCB00;
border-radius: 4px;
color: #fff;
font-weight: 700;
--ls: 0.1em;
--lh: 1;
text-align: center;
display: inline-block;
position: absolute;
top: 0;
left: -5px;
transform: translateY(-75%);
}
.propertyItem__recomBlk_list {
width: 100%;
font-weight: 500;
--lh: 1.7;
}
.propertyItem__recomBlk_list li {
padding-left: 20px;
position: relative;
}
.propertyItem__recomBlk_list li::before {
content: "";
width: 7px;
height: 7px;
background-color: #5F6527;
border-radius: 50%;
display: block;
position: absolute;
top: 9px;
left: 2px;
}
.propertyItem__data {
width: 100%;
margin-top: 3px;
font-weight: 500;
}
.propertyItem__data th, .propertyItem__data td {
padding: 8px 0;
vertical-align: middle;
}
.propertyItem__data th {
width: 118px;
font-weight: 700;
}
.propertyItem__data th .icon {
width: 24px;
margin-right: 5px;
display: inline-block;
}
.propertyItem__data td.price {
font-size: 16px;
font-weight: 700;
}
.propertyItem__data td.price span {
white-space: nowrap;
display: inline-block;
}
.propertyItem__data td.price strong {
font-size: 24px;
font-weight: 500;
--lh: 16px;
}
.propertyItem__dataBlk {
font-size: 14px;
--lh: 1.42857143;
}
.propertyItem__dataBlk th, .propertyItem__dataBlk td {
padding: 6px 0;
}
.propertyItem__linkBtn {
width: 100%;
height: 40px;
margin-top: 16px;
background-color: #5F6527;
border: 1px solid #5F6527;
border-radius: 4px;
color: #fff;
font-weight: 700;
--lh: 1;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.propertyItem__linkBtn::after {
content: "";
width: 13px;
height: 13px;
background: #fff url('data:image/svg+xml;charset=utf8,') center/contain no-repeat;
border-radius: 50%;
display: block;
position: absolute;
top: 50%;
right: 14px;
transform: translateY(-50%);
transition: var(--speed);
}
.propertyItem__linkBtn:hover {
background-color: #fff;
color: #5F6527;
}
.propertyItem__linkBtn:hover::after {
background: #5F6527 url('data:image/svg+xml;charset=utf8,') center/contain no-repeat;
}
.propertyItem__row {
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
}
@media screen and (min-width: 640px) {
.propertyItem__imgBlk {
max-width: 600px;
}
}
@media screen and (min-width: 768px) {
.propertyItem:has(.propertyItem__imgBlk) {
display: flex;
align-items: flex-start;
justify-content: space-between;
grid-gap: 30px;
}
.propertyItem:has(.propertyItem__imgBlk) .propertyItem__txtWrap {
max-width: 555px;
padding: 0;
}
.propertyItem__imgBlk {
width: 45%;
max-width: 325px;
flex-shrink: 0;
}
.propertyItem__imgBlk:not(:has(img)) {
position: relative;
}
.propertyItem__imgBlk:not(:has(img))::before {
content: "no image";
width: 100%;
padding-top: 50%;
font-size: 14px;
color: #fff;
font-weight: 700;
white-space: nowrap;
text-align: center;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.propertyItem__imgBlk:not(:has(img))::after {
content: "";
width: 100%;
padding-top: 100%;
background-color: #F8F4E6;
border-radius: 20px;
display: block;
position: absolute;
top: 0;
left: 0;
}
.propertyItem__imgBlk_slide {
border-radius: 20px;
}
.propertyItem__imgBlk_thumb {
margin-top: 18px;
grid-gap: 12px;
}
.propertyItem__imgBlk_thumb .thumb {
padding-top: 87.4308%;
border-radius: 6px;
}
.propertyItem__txtWrap {
padding: 30px 25px;
}
.propertyItem__infoBlk {
padding: 0 0 20px;
margin-bottom: 40px;
border-bottom: 3px dashed #2A2A2A;
}
.propertyItem__infoBlk .propertyItem__ttl {
font-size: 22px;
}
.propertyItem__infoBlk + .propertyItem__recomBlk {
margin-top: 45px;
}
.propertyItem__meta {
margin-bottom: 8px;
grid-gap: 4px 8px;
}
.propertyItem__meta .new {
font-size: 16px;
}
.propertyItem__ttl {
margin-bottom: 5px;
}
.propertyItem__price {
margin-top: 18px;
}
.propertyItem__data {
margin-top: 8px;
}
.propertyItem__dataBlk {
font-size: 16px;
}
.propertyItem__dataBlk th, .propertyItem__dataBlk td {
padding: 10px 0;
}
.propertyItem__dataBlk td.price strong {
font-size: 32px;
}
.propertyItem__linkBtn {
max-width: 362px;
height: 44px;
margin-top: 50px;
}
.propertyItem__row {
flex-direction: row;
}
}
@media screen and (min-width: 1024px) {
.propertyItem__imgBlk {
width: 49%;
max-width: 585px;
}
.propertyItem__txtWrap {
padding: 30px 40px;
}
.propertyItem__infoBlk .propertyItem__ttl {
font-size: 25px;
}
}