body {
min-width: initial;
}
a,
address,
button,
dd,
div,
dl,
dt,
figure,
form,
h1,
h2,
h3,
h4,
h5,
h6,
input,
label,
li,
main,
nav,
ol,
option,
p,
select,
table,
td,
textarea,
th,
ul {
box-sizing: border-box;
}
.march {
--main-color: #ff395c;
}
.april {
--main-color: #fd9db5;
}
.may {
--main-color: #43ac73;
}
.june {
--main-color: #af8cee;
}
.july {
--main-color: #207fe5;
}
.august {
--main-color: #1c64c6;
}
.september {
--main-color: #f89d01;
}
.october {
--main-color: #e97242;
}
.november {
--main-color: #e34101;
}
.december {
--main-color: #207554;
}
.january {
--main-color: #61afdd;
}
.february {
--main-color: #6e35e8;
}
#monthly_wedding {
max-width: 760px;
margin: 0 auto 80px;
line-height: 32px;
letter-spacing: 1px;
background: #fff;
box-sizing: border-box;
}
.lead {
margin-bottom: 40px;
padding: 16px 0;
}
.wedding_contents h2 {
font-size: 28px;
font-weight: 600;
margin: 56px 0 24px;
text-align: left;
}
.wedding_contents h3 {
font-size: 20px;
font-weight: 600;
margin: 24px 0;
text-align: left;
color: var(--main-color);
}
.wedding_contents h2::before {
content: "";
border-left: 6px solid var(--main-color);
padding-right: 16px;
}
.float_left {
float: left;
margin-right: 16px;
}
.image_full {
width: 100%;
margin: 16px auto 32px;
}
.calendar_image_block {
width: 52%;
margin: 24px 24px 8px 8px;
float: left;
}
.image_full img {
width: 100%;
aspect-ratio: 16/9;
object-fit: cover;
}
.button2-c-wrap {
margin: 56px 0 80px;
}
#monthly_wedding .annotation {
color: #0084ff;
} .recommend_hall_wrap { width: 820px;
height: 340px;
margin: 40px calc(50% - 410px);
background: #e9e9e9;
}
.recommend_hall_wrap a:hover {
opacity: 1;
}
.recommend_hall_wrap h2 {
font-size: 24px;
font-weight: 600;
text-align: left;
margin: 0;
padding: 24px 0 0 32px;
border: none;
}
.recommend_hall_wrap h2::before {
border: none;
}
.recommend_hall_wrap .monthly_wedding_slide {
width: 100%;
height: 320px;
overflow: hidden;
}
.recommend_hall_wrap .recommend_hall {
width: calc((100% / 3) - 16px);
margin-top: 16px;
}
.recommend_hall_image {
width: 10%;
height: 112px;
margin: 0 auto;
cursor: pointer;
}
.recommend_hall_image img {
width: 100%;
height: 112px;
object-fit: cover;
}
.recommend_hall_wrap span {
display: block;
}
.recommend_hall_wrap .text_contents {
width: 100%;
height: 104px;
background-color: #fff;
margin: 0;
padding: 0 12px 4px;
box-sizing: border-box;
}
.recommend_hall_wrap .cat {
font-size: 11px;
color: #6d6d6d;
height: 24px;
}
.recommend_hall_wrap h3 {
font-size: 15px;
color: #1a1a1a;
font-weight: 600;
line-height: 1.5;
margin: 0;
}
.recommend_hall_wrap .tag {
font-size: 10px;
color: #2897ff;
width: fit-content;
line-height: 1.6;
margin: 4px 0;
padding: 0 4px;
border: 1px solid #2897ff;
border-radius: 4px;
}
.recommend_hall_wrap h3 {
font-size: 14px;
font-weight: 600;
line-height: 1.5;
}
.text_contents p {
font-size: 12px;
}
.recommend_hall_wrap .slick-prev {
left: 2px;
background: #fff;
opacity: 0.8;
}
.recommend_hall_wrap .slick-next {
right: 2px;
background: #fff;
opacity: 0.8;
}
.recommend_hall_wrap .slick-prev::before,
.recommend_hall_wrap .slick-next::before {
content: "";
display: inline-block;
width: 6px;
height: 6px;
transform: rotate(45deg);
}
.recommend_hall_wrap .slick-prev::before {
border-bottom: 2px solid #081059;
border-left: 2px solid #081059;
margin: 2px 0 0 2px;
}
.recommend_hall_wrap .slick-next::before {
border-top: 2px solid #081059;
border-right: 2px solid #081059;
margin: 2px 2px 0 0;
}
#monthly_wedding_slider .slick-prev:hover,
#monthly_wedding_slider .slick-prev:focus,
#monthly_wedding_slider .slick-next:hover,
#monthly_wedding_slider .slick-next:focus {
color: transparent;
outline: none;
background: #fff;
} .acf_table_wrap {
width: 90%;
margin: 16px auto;
}
.acf_table {
width: 100%;
border: 1px solid #957500;
box-shadow: 0 1px 4px rgba(234, 215, 131, 0.8);
}
.acf_table th {
width: 42%;
padding: 8px 0;
text-align: center;
border-right: 1px solid #957500;
}
.acf_table td {
padding: 8px 16px;
}
.acf_table_wrap b {
font-size: 18px;
margin: 32px 0 8px 12px;
display: block;
}
.acf_table_row_text {
margin-top: 32px;
}
.wedding_contents ul {
width: 100%;
margin: 0 auto;
padding: 16px 24px;
border: 2px dotted #ffdc5f;
background: #fffbe4;
} .salon_block {
text-align: center;
}
.salon_image_wrap {
width: 88%;
margin: 0 auto;
position: relative;
}
.salon_image_wrap img {
width: 100%;
height: 100%;
object-fit: cover;
}
.salon_image_wrap::before,
.salon_image_wrap::after {
content: "";
position: absolute;
transform: rotate(-35deg);
width: 70px;
height: 25px;
background-color: #fff;
z-index: 1;
}
.salon_image_wrap::before {
top: -10px;
left: -25px;
border-bottom: 1px solid #aaa;
}
.salon_image_wrap::after {
bottom: -10px;
right: -25px;
border-top: 1px solid #aaa;
}
.top_salon_ttl {
font-size: 20px; }
.feature {
display: flex;
justify-content: space-between;
width: 80%;
margin: 40px auto;
}
.feature li {
width: 140px;
height: 140px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
border: 3px dotted #454545;
border-radius: 50%;
}
.salon_name {
font-size: 24px;
font-weight: bold;
color: #8f7500;
margin: 16px auto;
}
.salon_txt {
line-height: 1.4;
} .contents_footer_link {
width: 88%;
border: 1px solid var(--main-color);
margin: 80px auto 40px;
}
.contents_footer_link h2 {
background: var(--main-color);
text-align: left;
color: #fff;
font-size: 20px;
font-weight: bold;
padding: 4px 16px;
}
.prev_next_wrap {
display: flex;
justify-content: space-evenly;
align-items: center;
position: relative;
}
.prev_next_wrap hr {
color: var(--main-color);
height: 100%;
border: 1px dotted var(--main-color);
position: absolute;
left: 50%;
transform: translate(-50%, 0);
margin: 0;
}
.prev_next_wrap .recommend_month {
padding: 16px;
}
.prev_next_wrap a {
display: flex;
justify-content: center;
}
.month_image {
width: 120px;
height: 120px;
margin: 0 12px;
}
.month_image img {
width: 100%;
height: 100%;
object-fit: cover;
}
@media screen and (max-width: 768px) {
#monthly_wedding {
padding: 0 10%;
}
.float_left {
float: inherit;
margin: 0 auto;
text-align: center;
}
.calendar_image_block {
width: 100%;
margin: 16px auto 32px;
float: initial;
}
.recommend_hall_wrap {
margin: 32px calc(0% - 10vw);
width: 100vw;
height: 320px;
}
.recommend_hall_image,
.recommend_hall_image img {
height: 96px;
}
.feature {
width: 100%;
margin: 32px auto;
}
.salon_txt {
font-size: 12px;
min-height: 6em;
}
.contents_footer_link {
width: 92vw;
margin: 80px calc(0% - 6vw) 40px;
}
.month_image {
width: 92px;
height: 92px;
margin: 0 8px;
}
}
@media screen and (max-width: 680px) {
#monthly_wedding {
padding: 0 4%;
}
.recommend_hall_wrap {
margin: 32px calc(0% - 6vw);
height: 268px;
}
.recommend_hall_image,
.recommend_hall_image img {
height: 80px;
}
.recommend_hall_wrap .text_contents {
height: 100px;
padding: 0 12px 4px;
}
.recommend_hall_wrap h3 {
font-size: 13px;
font-weight: 500;
line-height: 1.4;
}
.feature li {
width: 114px;
height: 114px;
line-height: 1.4;
}
.contents_footer_link {
width: 88vw;
margin: 80px calc(2% - 1vw) 40px;
}
}
@media screen and (max-width: 480px) {
#monthly_wedding {
padding: 0 20px;
line-height: 28px;
}
.wedding_contents h2 {
font-size: 20px;
margin: 40px 0 16px;
padding: 24px 0 0 2px;
line-height: 32px;
}
.wedding_contents h2::before {
padding-right: 12px;
}
.wedding_contents h3 {
line-height: 28px;
}
.recommend_hall_wrap .cat {
font-size: 10px;
height: 20px;
}
.recommend_hall_wrap h3 {
font-size: 12px;
line-height: 1.4;
}
.recommend_hall_wrap .text_contents {
padding: 0 6px 4px;
}
.feature li {
width: 92px;
height: 92px;
font-size: 11px;
}
.acf_table_wrap {
width: 100%;
}
.prev_next_wrap a {
display: initial;
}
.contents_footer_link h2 {
font-size: 18px;
}
.text_center {
text-align: center;
}
#monthly_wedding .slick-slide {
margin: 0 3px;
}
#monthly_wedding .hall_thumb_slide .slick-next,
#monthly_wedding .hall_thumb_slide .slick-prev {
top: 76px;
width: 18px;
height: 34px;
background-size: 80%;
}
.month_image {
width: 120px;
height: 120px;
margin: 0 12px;
}
} .fv {
width: 100%;
height: 100%;
}
.fv img {
width: 100%;
height: 100%;
object-fit: cover;
}
#monthly_wedding_archive {
max-width: 1100px;
margin: 0 auto 80px;
line-height: 32px;
letter-spacing: 1px;
background: #fff;
box-sizing: border-box;
display: flex;
}
#monthly_archive {
max-width: 800px;
width: 80%;
margin: 0 auto;
padding: 0 24px;
}
#monthly_archive ul {
margin: 32px auto;
}
#monthly_archive li {
padding: 8px 16px;
border-bottom: 1px solid #c9c6c6;
transition: 0.3s ease-in-out;
}
#monthly_archive li:last-of-type {
border-bottom: none;
}
#monthly_archive li a {
display: flex;
height: 132px;
overflow: hidden;
margin: 8px auto 16px;
}
#monthly_archive li:hover {
background: #ededed;
border-radius: 8px;
transition: 0.3s ease-in-out;
}
#monthly_archive .main-ttl {
width: 38%;
}
.monthly_text {
width: 62%;
padding: 0px 8px 8px 16px;
}
.monthly_text p {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
font-size: 14px;
line-height: 1.8;
}
.monthly_text h2 {
text-align: left;
font-size: 18px;
font-weight: 600;
margin-bottom: 6px;
}  #sidebar {
width: 34%;
padding: 20px;
margin-top: 46px;
}
#sidebar .side-title {
font-size: 1.125rem;
font-weight: bold;
margin-bottom: 30px;
}
.special_content {
text-align: center;
margin: 32px auto 60px;
}
.sidebar_image_wrap {
width: 100%;
height: 132px;
margin: 4px auto 24px;
border-radius: 4px;
}
.sidebar_image_wrap img {
width: 100%;
height: 132px;
object-fit: cover;
border-radius: 4px;
}
.side_campaign_banner {
width: 100%;
height: 147px;
}
.side_campaign_banner img {
width: 100%;
height: 147px;
object-fit: cover;
}
@media screen and (max-width: 1024px) {
#monthly_archive {
max-width: 680px;
}
}
@media screen and (max-width: 820px) {
#monthly_wedding_archive {
display: initial;
}
#monthly_archive {
max-width: 620px;
width: 95%;
}
#sidebar {
max-width: 560px;
width: 80%;
margin: 16px auto 40px;
}
.sidebar_image_wrap {
height: 240px;
}
.sidebar_image_wrap img {
height: 240px;
}
}
@media screen and (max-width: 480px) {
.fv {
height: 180px;
} #monthly_archive {
width: 100%;
margin-bottom: 80px;
}
#monthly_archive li {
padding: 8px 0;
}
#monthly_archive .main-ttl {
width: 40%;
margin-top: 6px;
}
#monthly_archive li a {
height: 82px;
}
.monthly_text {
width: 56%;
padding: 0px 6px 8px 14px;
}
.monthly_text h2 {
font-size: 14px;
margin-bottom: 4px;
}
.monthly_text p {
display: none;
}
#sidebar {
width: 96%;
padding: 0 8px;
}
#sidebar .special_content {
display: none;
}
.side_campaign_banner {
width: 100%;
height: 197px;
}
.side_campaign_banner img {
width: 100%;
height: 197px;
}
}