@charset "UTF-8";
@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
/* ------------------------s-------------------------
 Base
-------------------------------------------------- */
 
body,ol,ul,dl,li,dt,dd,table,th,td,input,textarea,select,h1,h2,h3,h4,h5,h6,figure,p{
color:#7f7f7f;
font-weight:normal;
font-family: 'Noto Sans Japanese','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','Gill Sans',YuGothic,'Yu Gothic','Franklin Gothic Medium',sans-serif;
font-weight:400;
letter-spacing:.1rem;
margin:0;
padding:0;
-webkit-text-size-adjust:100%;
line-height: 200%;
}

li {
list-style: none;
}

body{
min-width:320px;
line-height:170%;
font-size:16px;
word-wrap:break-word;
position:relative;
overflow-x:hidden;
}

h1,header,footer,nav li a {
color: #767676 !important;
}

img {
width: 100%;
}
* {
box-sizing: border-box;
letter-spacing: .08rem;
}

a:link {
text-decoration: none !important;
}

main {
display: block;
}

.flexBox {
display: flex;
flex-wrap: wrap;
}
@media screen and (max-width: 1280px) {
#logo {
height: 30px;
max-width: 150px;
}
}
@media screen and (max-width: 1024px) {
#logo {
height: 60px;
}
}
@media screen and (max-width: 767px) {
body{
font-size:85%;
line-height:1.8;
}
}

img{
max-width:100%;
vertical-align:middle;
}

input{
padding:5px 8px;
}

textarea{
padding:3px;
}

ol{
margin:0px 0px 0px 21px;
}

ol > li{
list-style:decimal outside;
margin:0px 0px 3%;
}

a:link,
a:visited{
color:#7f7f7f;
text-decoration:underline;
outline:0;
}

a:hover,
a:active{
color:#555;
text-decoration:none;
}

em{
font-style:normal;
font-weight:bold;
color:#222;
}

strong{
font-style:normal;
font-weight:bold;
}


@media (min-width: 813px) {
a[href*="tel:"] {
pointer-events: none;
cursor: default;
text-decoration: none;
}
}

/* --------------------------------------------------
 Wrapper
-------------------------------------------------- */
#wrapper{
width:100%;
}



/* --------------------------------------------------
 Header
-------------------------------------------------- */
#header{
width:100%;
position:relative;
}


/* --------------------------------------------------
 Contents
-------------------------------------------------- */
main {
display: block;
}

main > section {
margin: 7rem auto 0;
}


aside {
position: relative;
margin-top:10vh;
}
#bridal aside {
margin-top: 0;
}

aside .contents,
aside ul {
display: flex;
justify-content: space-between;
}
aside .contents {
background:rgba(255,255,255,.7);
position:absolute;
 bottom: 0;
left:calc(50% - 430px);
 max-width: 900px;
 padding: 3rem 5rem;
 border-top-left-radius:25px;
border-top-right-radius:25px;
box-shadow: 0px -10px 15px  rgba(0,0,0,.1);
}

aside .contents > dl,
aside .contents > div {
width: 48%;
}

aside ul li img {
height: 465px;
width: 100%;
object-fit: cover;
}

aside h4 {
text-align: center;
font-weight: 700;
margin-bottom: 1.5rem;
position: relative;
}

aside h4:before {
content:"";
width: 50px;
background:#DEC972;
display: block;
height: 2px;
position: absolute;
bottom: -.5rem;
left: calc(50% - 20px);
}

aside .contents > div a {
width: 100%;
text-align: center;
display: block;
padding: 1rem;
font-size: 1.1rem;
background:rgba(24,172,196,.6);
color: #fff;
margin-bottom: 1px;
}

aside .contents > div p:nth-of-type(2) a {
background:rgba(99,214,0,.6);
}

aside .contents > div a  span {
display: block;
font-size: .85rem;
}

aside dl {
background: #fff;
padding: 2rem;
position: relative;
box-shadow:3px 3px 6px rgba(0,0,0,.1);
}

aside dt {
position: absolute;
top:-75px;
z-index: 0;
background-color: #fff;
height: 150px;
width: 150px;
left: calc(50% - 75px);
font-weight: bold;
line-height: 160px;
border-radius:75px;
text-align: center;
background-image: url("../img/common/coupon_icon.svg");
background-repeat: no-repeat;
background-position: center 30px;
background-size: 30px;
}

aside dd:first-of-type {
position: relative;
z-index: 1;
font-size: .85rem;
margin: 1rem auto;
}

aside dd:nth-of-type(2) a {
display: block;
width: 100%;
background: #FA6868;
box-shadow: 3px 3px 0 #C43636;
padding: .7rem;
text-align: center;
color: #fff;
font-size: .85rem;
font-weight: 700;
border-radius: 10px;
}

aside dd:last-of-type,
aside dd:last-of-type:before {
position: absolute;
width: 120px;
height: 120px;
background:#C7E4FA;
top: -70px;
right: -40px;
border-radius: 60px;
text-align: center;
padding-top: 30px;
color: #fff;
font-weight: 700;
text-shadow:0 0 2px #326AE6;
transform: rotate(15deg);
}
aside dd:last-of-type:before {
border: 1px dashed #A0A0A0;
content: "";
display: block;
background: none;
padding-top: 0;
top: -4px;
right: 4px;
transform: none;
}
@media screen and (max-width: 1024px) {
footer #copyright {
padding-bottom: 5rem;
}
}
@media screen and (max-width: 812px) {
aside .contents {
width: 94%;
padding: 1.5rem;
margin: 0 auto;
left: 3%;
}

aside ul li img {
height: 350px;
}
aside ul li:last-of-type {
display: none;
}
aside dd:last-of-type,
aside dd:last-of-type:before {
width: 100px;
height: 100px;
padding-top: 30px;
top: -74px;
right:  -5px;
line-height: 140%;
}
aside dd:last-of-type:before {
content: "";
top: 0px;
right: -2px;
transform: none;
padding-top: 0;
line-height: 140%;

}
}

@media screen and (max-width: 480px) {
aside .contents {
width: 90%;
padding: 1.5rem;
margin: 0 auto;
left: 5%;
flex-wrap:wrap;
}

aside ul li img {
height: 350px;
}

aside .contents > dl,
aside .contents > div {
width: 100%;
}

aside dl {
margin-top: 5rem;

}

aside dt {
top:-60px;
height: 120px;
width: 120px;
left: calc(50% - 60px);
line-height: 160px;
border-radius:60px;
}
aside dd:last-of-type,
aside dd:last-of-type:before {
display: none;
}


aside ul li img {
height: 650px;
}

aside ul li:nth-of-type(2) {
display: none;
}

}

/* --------------------------------------------------
 Footer
-------------------------------------------------- */
aside + div {
background: #FFFFF5;
}
footer{
width:94%;
max-width: 1240px;
margin: 0 auto;
position:relative;
padding-top:6rem;
display: flex;
flex-wrap:wrap;
font-size: 0.8rem;
letter-spacing: 0;
justify-content: space-between;
}

footer #copyright {
width: 100%;
text-align: center;
}

footer > div {
width: 30%;
}

footer * {
letter-spacing: 0;
}

footer > div h5 {
max-width:140px;
width:80%;
}

footer > div dt {
margin-top: 1.5rem;
font-weight: 700;
} 

footer ul#fnav {
display: flex;
flex-wrap:wrap;
position: relative;
align-content: center;
}

footer ul#fnav > li {
margin-right: 2.5rem;
font-size: .8rem;
}

footer ul#fnav > li img {
width: 20px;
height: 20px;
}
footer ul#fnav strong {
margin-top: 1rem;
}

#fnav > li:not(.line2) > a {
font-weight: 700;
}

footer ul#fnav > li > a:first-of-type {
margin-top: 0;
}
footer ul#fnav li .sub li {
padding-left: 1rem;
font-weight: 400;
}

footer ul#fnav a {
display: block;
line-height: 180%;
}

footer ul#fnav > li:last-of-type > .sub:last-of-type li {
display: flex;
border-top: 1px solid #D7E289;
margin-top: 2rem;
}

footer ul#fnav > li:last-of-type > .sub:last-of-type li a {
display: block;
margin: 1.5rem 1rem 0;
}

#copyright {
background: #fff;
text-align: center;
font-size: .8rem;
padding: .7rem;
margin-top: 4rem;
}

#return {
position: fixed;
z-index: 999;
bottom: 2%;
right: 2%;
}

#return a {
width: 50px;
height: 50px;
border-radius: 25px;
text-align:center;
background: #47310D;
color: #fff;
display: block;
line-height: 50px;
font-size: 1.3rem;
}


@media screen and (max-width: 1024px) {

}

@media screen and (max-width: 812px) {
footer {
display: block;
padding-top: 3rem;
}
footer > div {
width: 100%;
}
footer > div h5 {
text-align: center;
margin: 0 auto;
}
footer dl {
display: flex;
flex-wrap:wrap;
align-items: flex-start;
width: 80%;
margin: 2rem auto 0;
}

footer dl dt {
width: 30%;
margin-top: 0;

}
footer dl dd {
width:70%;
margin-bottom: 1rem;
}

footer ul#fnav {
margin-top: 2rem;
padding-top: 2rem;
border-top: 1px solid #ddd;
justify-content: center;
}
footer ul#fnav > li {
width:calc(100% / 4); 
margin-right: 0;
}

footer ul#fnav > li:first-of-type {
width: 10%;
}
}

@media screen and (max-width: 480px) {
footer dl dt,
footer dl dd{
width: 100%;
}
footer ul#fnav > li  {
width: 48% !important;
margin-bottom: 1.5rem;
}
#return {
bottom: 10%;
}
}



/* =======================================
    bridal
======================================= */
#bridal #keyVisual {
border: 10px solid #F3B9BA;
border-bottom: none;
height: auto !important;
position: relative;
overflow: hidden;
}
#bridal #keyVisual:after {
width: 2800px;
margin-left: calc(50% - 1400px);
height: 300px;
background: #F3B9BA;
position: absolute;
content:"";
border-radius: 50%;
display: block;
margin-top: -50px;
z-index: 1;
}

#bridal.sub #keyVisual:after {
background: #fff;
box-shadow: -0px -40px 50px rgba(50,50,50,.1);
}

#bridal #keyVisual section {
position: absolute;
z-index: 2;
top: 20%;
left: 16vw;
text-align: center;
}

#bridal #keyVisual section h2 {
color: #F3B9BA;
line-height: 120%;
font-style: italic;
margin-bottom: .5rem;
font-weight: bold;
text-shadow: 
1px 1px 3px #fff, 
-1px 1px 3px #fff, 
1px -1px 3px #fff, 
-1px -1px 3px #fff, 
3px 3px 5px #fff, 
-3px 3px 5px #fff, 
3px -3px 5px #fff, 
-3px -3px 5px #fff, 
5px 5px 7px #fff, 
-5px 5px 7px #fff, 
5px -5px 7px #fff, 
-5px -5px 7px #fff, 
7px 7px 10px #fff, 
-7px 7px 10px #fff, 
7px -7px 10px #fff, 
-7px -7px 10px #fff;
}
#bridal #keyVisual section p {
text-shadow: 
1px 1px 3px #fff, 
-1px 1px 3px #fff,
1px -1px 3px #fff, 
-1px -1px 3px #fff, 
3px 3px 5px #fff, 
-3px 3px 5px #fff, 
3px -3px 5px #fff, 
-3px -3px 5px #fff, 
5px 5px 7px #fff, 
-5px 5px 7px #fff, 
5px -5px 7px #fff, 
-5px -5px 7px #fff, 
7px 7px 10px #fff, 
-7px 7px 10px #fff, 
7px -7px 10px #fff, 
-7px -7px 10px #fff;
position: relative;
margin-top: 15px;
}
.drawer-make {
line-height: 1;
padding-top: 0 !important;
}

#bridal #keyVisual section h2 span {
display: block;
margin-top: 1.8rem;
font-size: 3rem;
position: relative;
padding-top: 1rem;
}

#bridal #keyVisual section h2 span:before {
content: "";
position: absolute;
top: -10px;
width: 50px;
left: calc(50% - 25px);
border-top:1px solid #F3B9BA;
}

@media screen and (max-width: 1000px){
#bridal #keyVisual section {
position: absolute;
z-index: 2;
top: 20%;
left: 3vw;
text-align: center;
}
}

@media screen and (min-width: 480px){
.revert {
display: none;
}
}