html {
font-size: 62.5%;
}
body {
font-size: 1.6rem;
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
font-style: normal;
text-align: justify;
line-height: 1.5;
-webkit-text-size-adjust: 100%;
color: #2b2b2b;
background: #2b2b2b;
}
body * {
box-sizing: border-box;
background-repeat: no-repeat;
}
body *:before {
background-repeat: no-repeat;
}
body *:after {
background-repeat: no-repeat;
}
img {
display: block;
max-width: 100%;
width: auto;
height: auto;
margin: 0 auto;
}
main p {
margin: 0 0 2rem;
}
a {
display: block;
text-decoration: none;
color: inherit;
}
a:hover {
-webkit-filter: brightness(1.1);
-moz-filter: brightness(1.1);
-ms-filter: brightness(1.1);
filter: brightness(1.1);
}
.boxer:hover,
.site-id a:hover {
-webkit-filter: brightness(1);
-moz-filter: brightness(1);
-ms-filter: brightness(1);
filter: brightness(1);
}
p a,
small a {
display: inline;
color: inherit;
text-decoration: underline;
}
p a:hover,
small a:hover {
text-decoration: none;
}
strong {
font-weight: bold;
}
small {
display: block;
font-size: 1.3rem;
}
#wrap {
width: 100%;
overflow-x: hidden;
background-color: #5f554e;
}
.inner {
width: 1200px;
position: relative;
left: 50%;
margin: 0 0 0 -600px;
}
.fl {
float: left;
}
.fr {
float: right;
}
.clearfix:after {
display: block;
content: "";
clear: both;
}
.serif-m {
font-family: source-han-serif-japanese, serif;
font-weight: 500;
font-style: normal;
}
.serif-sb {
font-family: source-han-serif-japanese, serif;
font-weight: 600;
font-style: normal;
}
.serif-b {
font-family: source-han-serif-japanese, serif;
font-weight: 600;
font-style: normal;
}
.oblique {
font-style: oblique;
}
.center {
text-align: center;
font-size: 0;
}
@font-face {
font-family: 'Parisienne';
src: url(//hiro-garden.co.jp/wp-content/themes/hiro-garden/css/font/Parisienne-Regular.ttf) format('truetype');
font-display: swap;
} header {
color: #63523f;
}
header .fixed {
position: fixed;
top: 0;
background: #fff;
width: 100%;
z-index: 999;
box-shadow: 0 0 15px rgba(0, 0, 0, .3);
}
header .site-id {
width: 360px;
padding: 3.5rem 0;
}
header .fr:nth-of-type(1),
header .fr:nth-of-type(2) {
padding: 1.8rem 0;
margin: 0 0 0 7rem;
}
.btn-mail {
border: 2px solid #af9762;
padding: 1rem 2.5rem 1rem 1.5rem;
color: #af9762;
background-image: url(//hiro-garden.co.jp/wp-content/themes/hiro-garden/img/common/header-mail-arrow.png);
background-size: 9px;
background-position: center right 4px;
text-align: center;
margin: 0 0 .7rem;
}
.btn-request {
border: 2px solid #63523f;
padding: 1rem 2.5rem 1rem 1.5rem;
color: #63523f;
background-image: url(//hiro-garden.co.jp/wp-content/themes/hiro-garden/img/common/header-request-arrow.png);
background-size: 9px;
background-position: center right 4px;
text-align: center;
}
header .fr:nth-of-type(3) {
padding: 1.8rem 0;
}
.telnumber span {
display: inline-block;
margin: 0 1rem 0 0;
background-image: url(//hiro-garden.co.jp/wp-content/themes/hiro-garden/img/common/header-tel-icon.png);
background-position: center left;
background-size: 12px;
font-size: 3.7rem;
color: #aa9057;
padding: .5rem 0 1rem 2.5rem;
line-height: 1;
}
.info {
border: 1px solid #63523f;
display: flex; justify-content: center; align-items: center; } .info span {
padding: .5rem 1rem;
text-align: center;
} nav {
background: #5f554e;
}
nav ul {
display: flex;
height: 64px;
justify-content: center;
z-index: 100;
}
nav ul li {
transform: skewX(165deg);
position: relative;
}
nav ul li:nth-of-type(1) {
width: 11%;
}
nav ul li:nth-of-type(2) {
width: 14%;
}
nav ul li:nth-of-type(3) {
width: 15%;
}
nav ul li:nth-of-type(4) {
width: 16%;
}
nav ul li:nth-of-type(5) {
width: 16%;
}
nav ul li:nth-of-type(6) {
width: 14%;
}
nav ul li:nth-of-type(7) {
width: 14%;
}
nav ul li:before {
display: block;
content: "";
width: 0;
height: 16px;
border-left: 1px solid #fff;
position: absolute;
left: 0;
top: 50%;
margin: -8px 0 0;
z-index: 1;
}
nav ul li:last-of-type:after {
display: block;
content: "";
width: 0;
height: 16px;
border-left: 1px solid #fff;
position: absolute;
right: 0;
top: 50%;
margin: -8px 0 0;
}
nav ul li a {
color: #fff;
font-size: 1.7rem;
padding: 2rem 0;
text-align: center;
}
nav ul li a:hover,
nav ul li a.current {
background: #aa9057;
}
header nav {
margin: 138px 0 0;
} nav li li {
height: 0;
overflow: hidden;
transition: .5s;
transform: skew(-5deg);
}
nav li li a {
border-top: 1px solid #eee;
}
nav li:hover > ul > li {
height: 64px;
overflow: visible;
width: 100%;
background: #7a673d;
} footer .footer-info {
background-color: #4c443e;
background-image: url(//hiro-garden.co.jp/wp-content/themes/hiro-garden/img/common/footer-bg.png);
background-position: left center;
background-size: contain;
}
footer .footer-info>.clearfix>.fl {
width: 472px;
padding: 5rem 0 0;
}
footer .footer-info>.clearfix>.fl ul {
margin: 2.5rem 0;
text-align: center;
font-size: 0;
}
footer .footer-info>.clearfix>.fl ul li {
display: inline-block;
text-align: center;
width: 118px;
padding: .5rem 0;
font-size: 1.4rem;
color: #e1c978;
border-left: 1px solid #e1c978;
border-top: 1px solid #e1c978;
border-bottom: 1px solid #e1c978;
}
footer .footer-info>.clearfix>.fl ul li:nth-of-type(4),
footer .footer-info>.clearfix>.fl ul li:nth-of-type(7) {
border-right: 1px solid #e1c978;
}
footer .footer-info>.clearfix>.fl ul li:nth-of-type(5),
footer .footer-info>.clearfix>.fl ul li:nth-of-type(6),
footer .footer-info>.clearfix>.fl ul li:nth-of-type(7) {
position: relative;
top: -1px;
}
.btn-book {
display: inline-block;
background-color: #e1c978;
background-image: url(//hiro-garden.co.jp/wp-content/themes/hiro-garden/img/common/footer-book-arrow.png);
background-position: center right 5px;
background-size: 9px;
color: #4e4438;
padding: 1rem 3rem 1rem 2rem;
font-size: 1.6rem;
}
footer .footer-info>.clearfix>.fr {
width: 600px;
padding: 5rem 0 0;
margin: 0 2.5rem 0 0;
}
footer .footer-info>.clearfix>.fr {
color: #fefefe;
}
footer .footer-info>.clearfix>.fr .telnumber span {
background-image: url(//hiro-garden.co.jp/wp-content/themes/hiro-garden/img/common/footer-tel-icon.png);
color: #e1c978;
}
footer .footer-info>.clearfix>.fr .info {
border: 1px solid #fefefe;
} footer .footer-info>.clearfix>.fr .btn-mail {
border: 2px solid #e1c978;
color: #e1c978;
background-image: url(//hiro-garden.co.jp/wp-content/themes/hiro-garden/img/common/footer-mail-arrow.png);
}
footer .footer-info>.clearfix>.fr .btn-request {
border: 2px solid #f9d8ae;
color: #f9d8ae;
background-image: url(//hiro-garden.co.jp/wp-content/themes/hiro-garden/img/common/footer-request-arrow.png);
}
footer .footer-info>.clearfix>.fr .clearfix:nth-of-type(2) {
background: #fff;
padding: 1.5rem 2rem;
color: #4e4438;
font-size: 1.5rem;
margin: 5rem 0 0;
}
footer .footer-info>.clearfix>.fr .clearfix:nth-of-type(2) form label,
footer .footer-info>.clearfix>.fr .clearfix:nth-of-type(2) form br {
display: none;
}
footer .footer-info>.clearfix>.fr .clearfix:nth-of-type(2) form input[type*="email"] {
font-size: 1.4rem;
width: 27rem;
}
footer .footer-info>.clearfix>.fr .clearfix:nth-of-type(2) form input[type*="submit"] {
font-size: 1.6rem;
}
footer .copyright {
text-align: center;
color: #f9d8ae;
font-size: 1.3rem;
padding: 7rem 0 1rem;
}
body[data-menu-position*="closed"] .jPanelMenu-panel {
transform: none !important;
}
body[data-menu-position*="closed"] #jPanelMenu-menu {
display: none !important;
}
main .m-footer{
margin: 0 auto;
left: auto;
} .checklist {
margin: 0 0 3rem;
}
.checklist li {
background-image: url(//hiro-garden.co.jp/wp-content/themes/hiro-garden/img/common/checklist-icon.png);
background-size: 2rem;
background-position: left top 3px;
padding: 0 0 0 2.5rem;
margin: 0 0 1rem;
} @media screen and (max-width: 640px) {
body {
font-size: 1.5rem;
}
.inner {
width: 100%;
left: 0;
margin: 0 auto;
} header .site-id {
width: 82.7%;
padding: 2%; }
header .trigger {
width: 17.3%;
padding: 0 !important;
margin: 0 !important;
} footer .copyright {
font-size: 1rem;
padding: 1rem 1rem 7rem;
}
footer .fixed {
position: fixed;
bottom: 0;
width: 100%;
justify-content: center;
z-index: 10;
}
footer .fixed li {
margin: 0 .3rem;
}
footer .fixed li img {
height: 6rem;
box-shadow: 0 0 15px rgba(0, 0, 0, .3);
} .checklist {
margin: 0 0 2rem;
}
.checklist li {
background-size: 1.6rem;
background-position: left top 4px;
padding: 0 0 0 2rem;
font-size: 1.4rem;
}
#jPanelMenu-menu {
background: #5f554e;
color: #fff;
border-left: 1px solid #bea68b;
z-index: 100 !important;
}
#jPanelMenu-menu ul li a {
padding: 1rem;
border-bottom: 1px solid #bea68b;
}
#jPanelMenu-menu ul li .sub-menu a {
padding: .7rem 1rem .7rem 1.5rem;
background: #4c443e;
font-size: 1.4rem;
}
#jPanelMenu-menu .trigger {
display: block;
text-align: right;
font-size: 2.5rem;
margin: 1rem;
}
} .point_st{
color: #5f554e;
font-size: 24px;
line-height: 1.6em;
border-bottom: 2px solid #d19a2a;
}
.point_st:first-letter{
font-size: 48px;
color: #5f554e;
font-weight: 600;
}
.mar_20 {
margin-right:20px;
}
.mat_20 {
margin-top:20px;
}
.recruit_heading_st_pc {
position: relative;
}
.recruit_heading_st01 {
position: absolute;
top: 20px;
left: 30px;
width: 600px;
color: #000;
line-height: 25px;
}
.recruit_heading_st02 {
color: #000;
font-family: source-han-serif-japanese, serif;
font-weight: bold;
line-height: 38px;
font-size: 33px;
} .flex_st-inner {
padding:2%;
} @media screen and (min-width: 641px) {
.flex_st {
display: flex;
display: -webkit-flex;
}
.flex_st-inner_2col_01 {
margin: 0 10px 0 0;
}
.flex_st-inner_2col_02-01 {
margin: 0 30px 0 0;
width:570px;
}
}
@media screen and (max-width: 640px) {
.point_st{
font-size:18px;
}
.point_st:first-letter {
font-size:32px;
}
.recruit_heading_st02_sp {
font-weight: bold;
font-size:18px;
font-family: source-han-serif-japanese, serif;
text-align: center;
}
}