main {
font-size: 1.8rem;
background-color: #fff;
}
main section>.inner {
padding: 0 0 10rem;
}
main p {
line-height: 2;
}
main h3 {
font-style: oblique !important;
font-size: 4rem;
padding: 8rem 0 5rem;
text-align: center;
}
main h3 img {
height: 19px;
margin: 1.5rem auto 0;
}
main .btn-more {
display: inline-block;
background-image: url(//hiro-garden.co.jp/wp-content/themes/hiro-garden/img/top/more-arrow.png);
background-size: 12px;
background-position: center right 1rem;
padding: .5rem 7rem;
border: 2px solid #63523f;
text-align: center;
font-size: 2.2rem;
font-style: oblique;
font-weight: bold;
color: #63523f;
margin: 4rem 0 0;
}
.checklist li {
background-image: url(//hiro-garden.co.jp/wp-content/themes/hiro-garden/img/top/checklist-icon.png);
background-size: 2.7rem;
background-position: left top 5px;
padding: 0 0 0 3.5rem;
color: #aa9057;
font-size: 2.3rem;
}
main img[src*="main-img"] {
max-width: 1400px;
margin: 0 auto;
}
main .s1{
background-color: #fff;
}
main .s1 .inner {
width: 1300px;
margin: 0 0 0 -650px;
background-color: #fff;
background-image: url(//hiro-garden.co.jp/wp-content/themes/hiro-garden/img/top/s1-bg.png);
background-position: right 20px bottom 0;
background-size: 479px;
}
main .s1 .sub-inner {
width: 1200px;
position: relative;
left: 50%;
margin: 40px 0 0 -600px;
}
main .s1 h3 {
color: #4c443e;
font-size: 3.5rem;
padding: 5rem 0;
}
main .s1 p {
width: 840px;
}
main .s1 strong {
color: #63523f;
}
main .s2 h3 {
color: #4c443e;
padding: 10rem 0 5rem;
}
main .s2 .fl {
width: 544px;
}
main .s2 .fr {
width: 600px;
}
main .s2 p {
color: #2b2b2b;
}
main .s2 strong {
color: #d19a2a;
}
main .s3 {
background-image: url(//hiro-garden.co.jp/wp-content/themes/hiro-garden/img/top/s3-bg.png);
background-size: cover;
}
main .s3 h3 {
color: #4c443e;
}
main .s3 ul li {
float: left;
width: 33.33%;
}
main .s3 ul li a {
width: 100%;
height: 248px;
background-size: cover;
background-position: center;
}
main .s4 {
background: #e0dcda;
}
main .s4 h3 {
color: #4c443e;
}
main .s4 h4 {
color: #5f554e;
margin: 0 0 3rem;
font-style: oblique !important;
text-align: center;
font-size: 3rem;
}
main .s4 h4:nth-of-type(2),
main .s4 h4:nth-of-type(3) {
margin: 8rem 0 3rem;
}
main .s4 h4 span {
display: block;
font-family: 'Parisienne';
color: #d19a2a;
font-size: 6rem;
line-height: 1;
}
main .s4 img[src*="img0"] {
width: 1000px;
margin: 0 auto 4rem;
}
main .s4 p {
color: #2b2b2b;
text-align: center;
}
main .s4 p span {
display: block;
}
main .s4 strong {
color: #d19a2a;
}
main .s5{
background-color: #5f554e;
}
main .s5 h3 {
color: #e1c978;
}
main .s5 ul li {
float: left;
width: 350px;
margin: 0 75px 7rem 0;
}
main .s5 ul li:nth-of-type(3n) {
margin: 0 0 7rem;
}
main .s5 h4 {
position: relative;
color: #fff;
font-size: 2.1rem;
padding: 0 0 0 7rem;
margin: 0 0 2rem;
font-style: oblique !important;
}
main .s5 h4 div {
font-family: 'Parisienne';
color: #e1c978;
font-size: 4rem;
font-style: normal;
position: absolute;
left: 0;
top: 8px;
}
main .s5 h4 span {
display: block;
}
main .s5 ul li img {
margin: 0 0 2rem;
}
main .s5 p {
color: #ffffff;
}
main .s5 strong {
color: #e1c978;
}
main .s6 {
background: #dce0cb;
}
main .s6 h3 {
color: #4c443e;
}
main .s6 ul li {
float: left;
width: 570px;
margin: 0 60px 5rem 0;
}
main .s6 ul li:nth-of-type(2n) {
margin-right: 0;
}
main .s6 ul li .fl {
width: 190px;
}
main .s6 ul li .fr {
width: 360px;
}
main .s6 ul li p {
padding: 5rem 0 0;
font-size: 1.6rem;
}
main .s6 ul li p span {
display: block;
}
main .s6 ul li small {
font-size: 1.6rem;
}
main .s6 .btn-more {
margin: 0;
}
main .s7 {
background: #fff;
}
main .s7 h3 {
color: #4c443e;
}
main .s7 ul li {
float: left;
width: 160px;
margin: 0 13px 13px 0;
}
main .s7 ul li:nth-of-type(7n) {
margin: 0 0 13px;
}
main .s8 {
background: #efebe9;
}
main .s8 h3 {
color: #4c443e;
}
main .s8 ul li {
float: left;
width: 350px;
margin: 0 75px 0 0;
}
main .s8 ul li:last-of-type {
margin: 0;
}
main .s8 ul li a div {
width: 100%;
height: 250px;
background-size: cover;
background-position: center;
margin: 0 0 1rem;
}
main .s8 ul li time {
color: #5f554e;
font-size: 1.5rem;
}
main .s8 ul li p {
color: #d19a2a;
font-size: 1.6rem;
}
main .s9{
background-color: #e0dcda;
}
main .s9>.inner {
padding: 10rem 0;
color: #fff;
}
main .popular{
background-color: #dce0cb;
}
main .popular h3{
color:#4c443e;
}
main .popular p{
color:#2b2b2b;
margin: 10px;
}
main .popular figure{
width:220px;
margin:0 auto;
}
main .popular_list{
display: flex;
justify-content:space-between;
flex-wrap: wrap;
}
main .popular_item{
width:30%;
}
main .top_category{
background-color: #fff;
background-image: url(//hiro-garden.co.jp/wp-content/themes/hiro-garden/img/top/s3-bg.png);
padding: 100px 0 60px;
}
main .top_category h3{
color:#debe68;
}
main .top_category p{
color:#5f554e;
margin: 10px;
text-align: center;
}
main .top_category figure{
width:100%;
margin:0 auto;
}
main .top_category_list{
display: flex;
justify-content:space-between;
flex-wrap: wrap;
}
main .top_category_item{
width:30%;
border: 1px solid #5f554e;
margin: 0 0 40px 0;
background-color: #fff;
}
main .top_category>.inner {
padding: 0;
}
.top_category_item a:link{
text-decoration: underline solid #2b2b2b!important;
}
.top_category_item a:visited{
text-decoration: underline solid #2b2b2b!important;
}
.top_category_item a:hover p{
color:#d19a2a!important;
text-decoration: underline solid #d19a2a!important;
}
.top_banner{
margin: 20px 0;
} @media screen and (max-width: 640px) {
main {
font-size: 1.5rem;
}
main section>.inner {
padding: 0 0 5rem;
width: 90%;
margin: 0 auto;
}
main h3 {
font-size: 2rem;
padding: 5rem 0 3rem;
}
main h3 img {
height: 1rem;
margin: .5rem auto 0;
}
main p {
line-height: 1.7;
}
main .fl,
main .fr {
float: none;
}
main .btn-more {
background-size: 1rem;
background-position: center right .5rem;
padding: .3rem 5rem;
font-size: 1.6rem;
margin: 2rem 0 0;
}
main .checklist li {
background-size: 1.6rem;
background-position: left top 4px;
padding: 0 0 0 2rem;
font-size: 1.5rem;
}
main img[src*="main-img"] {
margin: 17.3% 0 0;
max-width: 100%;
}
main .s1 .inner {
width: 100%;
margin: 0;
left: 0;
background-image: none;
padding: 0;
}
main .s1 .sub-inner {
width: 90%;
left: 0;
margin: 0 auto;
}
main .s1 h3 {
font-size: 2rem;
padding: 50px 0 20px;
}
main .s1 p {
width: 100%;
}
main .s2 h3 {
color: #4c443e;
padding: 5rem 0 3rem;
}
main .s2 .fl {
width: 100%;
margin: 0 0 2rem;
}
main .s2 .fr {
width: 100%;
}
main .s3 ul li {
float: none;
width: 100%;
}
main .s4 h3 span {
display: block;
}
main .s4 h4 {
font-size: 1.6rem;
margin: 0 0 1rem;
}
main .s4 h4 span {
font-size: 3rem;
}
main .s4 img[src*="img0"] {
width: 100%;
margin: 0 auto 1rem;
}
main .s4 p {
text-align: left;
}
main .s4 h4:nth-of-type(2),
main .s4 h4:nth-of-type(3) {
margin: 4rem 0 1rem;
}
main .s4 p span {
display: inline;
}
main .s5 ul li {
float: none;
width: 100%;
margin: 0 0 3rem;
}
main .s5 h4 {
font-size: 1.6rem;
padding: 0 0 0 5rem;
margin: 0 0 1rem;
}
main .s5 h4 div {
font-size: 3rem;
top: 6px;
}
main .s5 ul li img {
margin: 0 0 1rem;
}
main .s6 h3 span {
display: block;
}
main .s6 ul li {
float: none;
width: 100%;
margin: 0 0 3rem;
}
main .s6 ul li:nth-of-type(1),
main .s6 ul li:nth-of-type(2) {
margin-bottom: 3rem;
}
main .s6 ul li .fl {
margin: 0 auto;
}
main .s6 ul li .fr {
width: 100%;
text-align: center;
}
main .s6 ul li p {
padding: 1rem 0 0;
font-size: 1.5rem;
}
main .s6 ul li p span {
display: inline;
}
main .s6 .btn-more {
margin: 2rem 0 0;
}
main .s7 ul li {
width: 32%;
margin: 0 2% 2% 0;
}
main .s7 ul li:nth-of-type(7n) {
margin: 0 2% 2% 0;
}
main .s7 ul li:nth-of-type(3n) {
margin: 0 0 2%;
}
main .s8 ul li {
float: none;
width: 100%;
margin: 0 0 3rem;
}
main .s8 ul li a div {
height: 230px;
}
main .s8 ul li time {
font-size: 1.3rem;
}
main .s8 ul li p {
font-size: 1.5rem;
}
main .s9 #sb_instagram .sbi_header_link {
color:#5f554e!important;
}
main .s9>.inner {
padding: 5rem 0;
}
main .popular_item{
width:100%;
}
main .popular figure{
width:190px;
margin:0 auto;
}
main .popular p {
margin: 10px 0 20px;
}
main .top_category_item {
width: 48%;
margin: 0 0 20px 0;
}
main .top_category_list {
margin: 50px 0 30px;
}
.top_banner{
margin: 0;
}
main .top_category {
padding: 20px 0 20px;
}
}
}