.kv_top_image {
width: 100%;
height: 680px;
}
.kv_top_image img {
width: 100%;
height: 680px;
object-fit: cover;
}
.main-ttl {
width: 240px;
height: 30px;
margin: 0 0 -40px;
}
.main-ttl img {
width: 240px;
height: 30px;
object-fit: contain;
}
.top_logo_wrap {
position: absolute;
bottom: 16%;
right: 4%;
}
#kv .logo_wrap {
position: absolute;
top: 6%;
left: 8%;
width: fit-content;
}
.main-logo {
width: 360px;
height: 140px;
margin: 0 auto;
}
.main-logo img {
width: 360px;
height: 140px;
object-fit: contain;
}
.top_text2 {
width: 480px;
height: 120px;
margin: 0 auto;
}
.top_text2 img {
width: 480px;
height: 132px;
object-fit: contain;
}
.top_text1 {
text-align: center;
font-size: 20px;
color: #9f003d;
font-weight: bold;
letter-spacing: 6px;
text-shadow: 0 0 12px #fff, 0 0 1px #fff, 0 0 2px #fff, 0 0 3px #fff,
0 0 4px #fff;
margin: 0 auto 24px;
}
.sp_only {
display: none;
}
@media screen and (min-width: 1500px) {
#kv .wrapper {
top: 10%;
}
#kv,
.kv_top_image,
.kv_top_image img {
height: 90vh;
}
.top_text2 {
width: 600px;
height: 160px;
}
.top_text2 img {
width: 600px;
height: 200px;
}
}
@media screen and (max-width: 768px) {
#kv,
.kv_top_image,
.kv_top_image img {
height: 408px;
}
.main-logo,
.main-logo img {
width: 240px;
height: 90px;
}
#kv .logo_wrap {
top: 7%;
left: 3%;
}
.top_text1 {
font-size: 16px;
}
.top_logo_wrap {
bottom: 10%;
right: 3%;
}
.top_text2,
.top_text2 img {
width: 320px;
height: 88px;
}
}
@media screen and (max-width: 480px) {
.pc_only {
display: none;
}
.sp_only {
display: block;
}
.top_text2 {
width: 312px;
height: 76px;
}
#kv,
.top_image_wrap_sp,
.top_image_wrap_sp img {
height: 640px;
z-index: 0;
}
#kv .logo_wrap {
top: 3%;
}
#kv .wrapper {
display: none;
}
.top_title_wrap_sp img {
width: 334px;
height: 80px;
object-fit: cover;
}
.top_text_sp {
width: 100%;
position: absolute;
top: 43%;
left: 50%;
transform: translateX(-50%);
text-align: center;
font-size: 16px;
color: #9f003d;
font-weight: bold;
letter-spacing: 2px;
text-shadow: 0 0 12px #fff, 0 0 1px #fff, 0 0 2px #fff, 0 0 3px #fff,
0 0 4px #fff;
}
.kv_top_image.sp_only {
position: relative;
}
.kv_top_image.sp_only .top_btn_wrap {
text-align: center;
}
.top_contact_btn {
width: 43%;
min-width: 220px;
font-size: 1.6rem;
padding: 1rem 2.2rem;
text-align: center;
}
.sp_logo_wrap {
position: absolute;
top: 68%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0 auto;
width: 100%;
}
.main-logo,
.main-logo img {
width: 244px;
height: 100px;
}
.top_title_wrap_sp {
width: 334px;
height: 80px;
margin: -9px auto 8px;
}
.main-btns a {
width: calc((100% / 2) - 12px);
font-size: 12px;
margin: 0 4px;
padding: 12px 0 8px;
}
.main-btns a span {
font-size: 10px;
}
.main-btns a.search_btn::before {
left: 12%;
width: 18px;
}
.main-btns a.search_btn::after {
right: 10px;
}
.main-btns a.contact_btn::after {
right: 18px;
top: 50%;
}
}
@media screen and (max-width: 380px) {
#kv,
.kv_top_image,
.kv_top_image .top_image_wrap_sp img {
height: 584px;
}
.sp_logo_wrap {
top: 40%;
}
} #about {
padding: 80px 0 120px;
}
.about_box {
margin: 64px 20px 0 0;
display: flex;
flex-wrap: wrap;
align-items: center;
}
.about_box .image_wrap {
width: 50%;
height: 400px;
position: relative;
box-shadow: 16px 16px 0px rgb(0 0 0 / 72%);
}
.about_box .image_wrap img {
width: 100%;
height: 400px;
object-fit: cover;
}
.about_box .text_wrap {
width: 40%;
font-size: 18px;
line-height: 1.8;
margin-left: 48px;
}
.about_box h3 {
font-size: 26px;
font-weight: bold;
text-align: center;
padding-bottom: 12px;
}
#top_present {
padding: 72px 0 96px;
background-size: auto auto;
background-color: rgba(234, 234, 234, 1);
background-image: repeating-linear-gradient(
52deg,
transparent,
transparent 4px,
rgba(255, 255, 255, 1) 4px,
rgba(255, 255, 255, 1) 5px
);
}
.icons {
display: flex;
justify-content: center;
align-items: center;
margin-top: 24px;
}
.icons .icon {
width: 110px;
height: 110px;
border-radius: 50%;
border: 1px solid #454545;
margin: 0 6px;
position: relative;
}
.icons .icon img {
width: 56px;
height: 56px;
object-fit: contain;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.icons .icon p {
width: 100%;
text-align: center;
position: absolute;
left: 50%;
bottom: -1px;
transform: translateX(-50%);
font-size: 10px;
background: #fff;
}
.icons .icon_resort img {
width: 64px;
height: 64px;
padding: 0 0 6px 4px;
}
#about .about_items {
max-width: 1180px;
display: flex;
justify-content: center;
margin: 96px auto 0;
}
#about .about_items li {
width: 300px;
font-size: 1.5vw;
margin: 0 8px;
padding: 24px;
border: 1px solid #454545;
border-radius: 6px;
box-shadow: 0 0 6px rgba(234, 215, 131, 0.8);
}
#about .about_items h3 {
font-weight: bold;
text-align: center;
}
#about .about_items p {
font-size: 0.8em;
}
#about .about_items div {
width: 64%;
height: 2px;
margin: 16px auto;
border-radius: 4px;
background: linear-gradient(to right, #957500 0%, #ead783 100%);
}
#about .top_btn_wrap {
text-align: center;
margin: 80px auto 0;
position: relative;
}
#about .top_contact_btn {
display: inline-block;
width: 30%;
font-size: 2rem;
font-weight: 500;
cursor: pointer;
letter-spacing: 0.1em;
min-width: 280px;
border-radius: 8px;
padding: 1.2rem;
color: #fff;
overflow: hidden;
position: relative;
border: 1px solid #8f7500;
background: #8f7500;
background: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(50%, #1b7e40),
to(#ead783)
);
background: -webkit-linear-gradient(bottom, #8f7500 50%, #ead783 100%);
background: linear-gradient(15deg, #8f7500 32%, #ead783 100%);
-webkit-box-shadow: inset 0 1px 1px rgb(255 255 255 / 60%),
0 5px 10px rgb(0 0 0 / 10%);
box-shadow: inset 0 1px 1px rgb(255 255 255 / 60%),
0 5px 10px rgb(0 0 0 / 10%);
}
#about .top_btn_wrap p {
background: #fff;
position: absolute;
top: -15px;
left: 50%;
transform: translateX(-50%);
z-index: 2;
padding: 3px 3rem;
border: 1px solid #454545;
border-radius: 16px;
font-size: 11px;
}
@media screen and (min-width: 1570px) {
#about .about_items li {
font-size: 1.2vw;
}
.about_box {
margin: 64px 40px 0 0;
}
.about_box .text_wrap {
width: 33%;
margin-left: 56px;
}
}
@media screen and (max-width: 768px) {
.about_box .image_wrap {
width: 80%;
height: 350px;
margin: 0 auto;
}
.about_box {
margin: 64px auto 0;
}
.about_box .image_wrap img {
height: 350px;
}
.about_box .text_wrap {
width: 80%;
margin: 56px auto 0;
}
.icons .icon {
width: 120px;
height: 120px;
}
.icons .icon img {
width: 64px;
height: 64px;
}
.icons .icon p {
font-size: 12px;
}
#about .about_items {
margin: 40px auto 0;
}
#about .about_items li {
font-size: 1.8vw;
margin: 0 6px;
padding: 24px 16px;
}
#about .top_contact_btn {
width: 72%;
}
}
@media screen and (max-width: 480px) {
#about {
padding: 56px 0 72px;
}
.about_box {
width: 98%;
margin: 32px auto;
}
.about_box .image_wrap {
width: 96%;
height: 224px;
box-shadow: 8px 10px 0 rgb(0 0 0 /72%);
}
.about_box .image_wrap img {
width: 100%;
height: 224px;
}
.about_box .text_wrap {
width: 100%;
font-size: 16px;
margin: 16px 0 0;
padding: 0 16px;
box-sizing: border-box;
}
.about_box h3 {
line-height: 1.4;
margin-top: 16px;
letter-spacing: 2px;
}
#about .about_items {
flex-wrap: wrap;
}
#about .about_items li {
width: 74%;
margin: 8px auto;
padding: 24px 16px;
}
#about .about_items h3 {
font-size: 18px;
}
#about .about_items p {
font-size: 14px;
}
#about .about_items div {
margin: 12px auto;
}
.icons .icon {
width: 78px;
height: 78px;
margin: 0 2px;
}
.icons .icon img {
width: 40px;
height: 40px;
}
.icons .icon_resort img {
width: 48px;
height: 48px;
}
.icons .icon p {
font-size: 10px;
line-height: 1.3;
bottom: -10px;
}
.icons .icon:first-of-type p {
bottom: -4px;
}
#top_present {
padding: 40px 0 56px;
}
#about .top_contact_btn {
width: 84%;
}
#about .top_btn_wrap {
margin: 56px auto 0;
}
#about .top_btn_wrap p {
padding: 3px 16px;
}
.present_in.top .present-img {
padding: 10px 0px 0;
}
}
@media screen and (max-width: 380px) {
#about .top_btn_wrap p {
padding: 3px 15px;
}
#about .top_btn_wrap p {
font-size: 10px;
}
} #style {
padding: 72px 0 40px;
}
#style .style_ttl {
font-size: 20px;
text-align: center;
margin: 40px 0;
}
#style .style_minimal {
width: 64%;
margin: 0 auto;
text-align: center;
}
#style .style_img {
width: 100%;
height: 360px;
position: relative;
}
#style .style_img img {
width: 100%;
height: 360px;
object-fit: cover;
}
.style_img::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: calc(100% - 20px);
height: calc(100% - 20px);
border-image-source: repeating-linear-gradient(
45deg,
#8f7500,
#8f7500 3px,
rgba(0 0 0 / 0) 0,
rgba(0 0 0 / 0) 8px
);
border-image-slice: 20;
border-image-repeat: round;
border-style: solid;
border-width: 12px;
}
#style .minimal_logo {
width: 320px;
height: 72px;
margin: 16px auto;
}
#style .minimal_logo img {
width: 320px;
height: 72px;
object-fit: contain;
}
#style h3 {
font-size: 22px;
font-weight: bold;
margin: 12px auto;
text-align: center;
}
#style .style2 {
width: 72%;
display: flex;
justify-content: center;
margin: 56px auto;
}
#style .style2 li {
width: 50%;
padding: 0 32px;
}
#style .style2_img {
width: 280px;
height: 280px;
margin: 0 auto;
}
#style .style2_img img {
width: 280px;
height: 280px;
border-radius: 50%;
object-fit: cover;
transition: 0.4s ease;
}
#style .style2_img.last img {
object-position: -220px;
}
#style .edition_logo {
width: 240px;
height: 56px;
margin: 8px auto;
}
#style .edition_logo.first {
padding-top: 8px;
margin: 8px auto 0;
}
#style .edition_logo img {
width: 100%;
height: 56px;
object-fit: contain;
transition: 0.4s ease;
}
#style h3:nth-of-type(1) {
margin: 0 auto 12px;
}
#style .style3 {
width: 72%;
display: flex;
justify-content: space-between;
margin: 56px auto;
text-align: center;
}
#style .edition_img {
width: 200px;
height: 200px;
}
#style .edition_img img {
width: 200px;
height: 200px;
border-radius: 50%;
object-fit: cover;
transition: transform 0.6s ease;
}
#style .niigata_image img {
object-position: 95% 50%;
}
.circle {
border-radius: 50%;
overflow: hidden;
transition: 0.3s;
margin: 0 auto;
}
#style .style2 .style2_img:hover img,
#style .edition_img:hover img {
transform: scale(1.1);
transition: transform 0.6s ease;
}
#style .style_minimal:hover,
#style .edition:hover,
#style .style2 li:hover {
opacity: 0.7;
transition: 0.3s;
}
@media screen and (max-width: 768px) {
#style .style_minimal {
width: 80%;
}
#style .style3 {
width: 100%;
justify-content: center;
}
#style .style3 .edition {
padding: 0 4px;
}
}
@media screen and (max-width: 480px) {
#style {
padding: 48px 0 40px;
}
#style .style_ttl {
font-size: 16px;
margin: 32px 0;
}
#style .style_minimal {
width: 100%;
}
#style .style_img,
#style .style_img img {
height: 240px;
}
#style .minimal_logo,
#style .minimal_logo img {
width: 280px;
height: 56px;
}
#style h3 {
font-size: 16px;
}
#style .style2 {
width: 100%;
margin: 40px auto;
}
#style .style2 li {
width: 46%;
padding: 0 6px;
}
#style .style2_img,
#style .style2_img img {
width: 160px;
height: 160px;
}
#style .style2_img.last img {
object-position: -132px;
}
#style .edition_logo {
width: 140px;
height: 40px;
}
#style .style3 {
width: 100%;
margin: 40px auto;
}
.edition {
width: calc((100% / 3) - 12px);
margin: 0 4px;
}
#style .edition_img,
#style .edition_img img {
width: 110px;
height: 110px;
}
#style .edition .edition_logo,
#style .edition .edition_logo img {
width: 106px;
height: 32px;
}
} #line {
margin-top: 72px;
}
.line_image_wrap {
display: block;
margin: 40px auto;
}
.wedding_guide_desc {
width: 96%;
max-width: 720px;
margin: 0 auto 32px;
letter-spacing: 0.05em;
line-height: 1.8;
}
#home_salon {
padding: 72px 0;
text-align: center;
}
.salon_image_wrap {
width: 860px;
margin: 32px auto 40px;
}
#home_salon .top_salon_mark span {
font-size: 20px;
padding: 10px 32px;
}
#home_salon .top_salon_mark {
margin: 0 0 40px 0;
}
.salon_image_wrap img {
width: 100%;
object-fit: cover;
}
.feature {
display: flex;
justify-content: space-between;
width: 60%;
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;
}
.shinjuku_salon {
width: 560px;
height: 320px;
margin: 0 auto;
position: relative;
}
.shinjuku_salon img {
width: 100%;
height: 320px;
object-fit: cover;
}
.shinjuku_salon::before,
.shinjuku_salon::after {
content: "";
position: absolute;
transform: rotate(-35deg);
width: 70px;
height: 25px;
background-color: #fff;
z-index: 1;
}
.shinjuku_salon::before {
top: -10px;
left: -25px;
border-bottom: 1px solid #aaa;
}
.shinjuku_salon::after {
bottom: -10px;
right: -25px;
border-top: 1px solid #aaa;
}
.column_img {
width: 100%;
height: 148px;
}
.column_img img {
width: 100%;
height: 148px;
object-fit: cover;
}
.gallery_content {
width: 100%;
max-width: 880px;
margin: 40px auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.gallery_content li {
width: 320px;
height: 420px;
margin: 0 32px;
position: relative;
}
.gallery_content .ribbon_wrap {
position: absolute;
top: -6px;
right: -25px;
z-index: 2;
overflow: hidden;
width: 108px;
height: 108px;
}
.gallery_content .ribbon_wrap .ribbon {
font-size: 1em;
line-height: 1.2em;
position: relative;
top: 26px;
left: -4px;
width: 150px;
padding: 7px 0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
text-align: center;
letter-spacing: 0.5px;
color: #333333;
color: #ffffff;
border: 1px dashed #ffffff;
box-shadow: 0px 0px 0px 3px #f48fb1;
background-color: #f48fb1;
}
.gallery_content .ribbon_wrap .ribbon:before,
.gallery_content .ribbon_wrap .ribbon:after {
position: absolute;
bottom: -8px;
content: "";
border-width: 4px 4px 0 4px;
border-style: solid;
border-color: #ec407a transparent transparent transparent;
}
.gallery_content .ribbon_wrap .ribbon:before {
left: -4px;
}
.gallery_content .ribbon_wrap .ribbon:after {
right: 3px;
}
.gallery_content .gallery_image { display: block;
width: 100%;
height: 400px;
border: 10px solid #fff;
box-shadow: 0 0 4px #999;
overflow: hidden;
}
.gallery_content a img {
width: 100%;
height: 400px;
object-fit: cover;
}
.gallery_content span {
display: block;
padding-top: 10px;
font-size: 16px;
text-align: center;
}
@media screen and (max-width: 768px) {
.salon_image_wrap,
.salon_image_wrap img {
width: 100%;
}
.feature {
width: 88%;
}
.gallery_content {
justify-content: space-around;
}
.feature li {
width: 112px;
height: 112px;
}
.gallery_content li {
margin: 32px;
}
}
@media screen and (max-width: 480px) {
.top_salon_ttl {
font-size: 16px;
margin: 24px 0;
}
.feature {
width: 100%;
margin: 32px auto;
}
.feature li {
font-size: 11px;
width: 78px;
height: 78px;
border: 2px dotted #454545;
}
.salon_image_wrap,
.salon_image_wrap img {
width: 100%;
}
.shinjuku_salon,
.shinjuku_salon img {
width: 100%;
height: 240px;
}
.salon_txt {
font-size: 12px;
min-height: 5em;
}
.gallery_content {
width: 100%;
}
.gallery_content li { margin: 10px 32px 40px;
}
.gallery_content .gallery_image {
width: 300px;
height: 360px;
}
.gallery_content a span {
padding: 8px 0 32px;
}
.gallery_content .ribbon_wrap {
top: -6px;
right: -4px;
width: 107px;
height: 107px;
}
.column_img {
width: 44%;
height: 72px;
}
.column_img img {
width: 100%;
height: 72px;
}
}