@charset "utf-8";

/*---wrapper---*/

#wrapper {
width: 100%;
margin: 0 auto;
z-index: 600;
overflow: hidden;
}



/*---------mainimg---------*/
	
ul.mainimg_pc {
margin-bottom: 90px;
position: relative;
}

ul.mainimg_pc li {
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 100vh;
margin: 0;
}

ul.mainimg_pc li.img01 {
background-image: url("../../images/hanamaru/top/mainimg.jpg");
}

ul.mainimg_sp {
display: none;
}

@media only screen and ( max-width : 850px ) {
ul.mainimg_pc {
display: none;
}

ul.mainimg_sp {
margin-bottom: 90px;
position: relative;
display:block;
}

ul.mainimg_sp li {
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 100vh;
margin: 0;
}

ul.mainimg_sp li.img01 {
background-image: url("../../images/hanamaru/top/mainimg_sp.jpg");
}
}


/*---underimg---*/

.undertitle ul.title {
width: 100%;
max-width: 75%;
margin: 0 auto;
}

.undertitle ul.title h2 {
font-size: 34px;
color: #fff;
text-shadow: 0 0 4px #0F0F0F;
letter-spacing: 0.06em;
padding-top: 160px;
}

.undertitle ul.title li.logo {
padding-top: 14px;
}


#undermainimg {
width: 100%;
height: 350px;
position: relative;
overflow: hidden;
margin-bottom: 48px;
}

.unimg_hana {
background: url("../../images/hanamaru/untitbg/titimg_hana.png")no-repeat;
background-size: cover;
background-position: center center;
}

@media only screen and (max-width: 850px) {
.undertitle ul.title h2 {
font-size: 27px;
padding-top: 40px;
}

#undermainimg .sub {
font-size: 13px;
}

#undermainimg {
height: 200px;
background-position: 50% center;
padding-top: 0px;
margin-bottom: 27px;
}
}


/*---contents---*/

#contents {
width: 100%;
max-width: 75%;
margin: 0 auto 40px auto;
box-sizing: border-box;
}

@media only screen and (max-width: 1200px) {
#contents {
max-width: 100%;
padding: 0 3%;
}
}


/*--title---*/

h3.mt01 {
font-size: 32px;
text-align: center;
color: #9c4a7a;
margin-bottom: 30px;
}

h3.mt01 hr {
border: none;
border-bottom: 3px solid #E9C4DA;
width: 20%;
margin: 0 auto;
padding-top: 4px;

}

h4 {
font-size: 24px;
background: #2F2F2F;
color:#fff;
border-radius: 4px;
text-align: center;
padding: 10px;
margin-bottom: 20px;
}

@media only screen and (max-width: 850px) {
h3.mt01 {
margin-bottom: 30px;
font-size: 26px;
}

h3.mt01:first-letter {
font-size: 30px;
}

h3.mt01 hr {
width: 60%;
}

h4 {
margin-bottom: 10px;
font-size: 22px;
padding: 10px;
}
}


/*---pagetop---*/

#page-top a {
display: flex;
justify-content: center;
align-items :center;
background: #1a1a1a;
border-radius: 2px;
width: 48px;
height: 48px;
color: #fff;
text-align: center;
text-transform: uppercase; 
text-decoration: none;
letter-spacing: 0.1em;
font-family: 'Montserrat', sans-serif;
transition:all 0.3s;
opacity: 0.9;
}

#page-top a:hover {
opacity: 0.6;
}

#page-top {
position: fixed;
right: 10px;
bottom: 20px;
z-index: 2;
opacity: 0;
transform: translateY(100px);
}

#page-top.UpMove {
animation: UpAnime 0.5s forwards;
}

@keyframes UpAnime{
from {
opacity: 0;
transform: translateY(100px);
}

to {
opacity: 1;
transform: translateY(0);
}
}

#page-top.DownMove{
animation: DownAnime 0.5s forwards;
}

@keyframes DownAnime{
from {
opacity: 1;
transform: translateY(0);
}

to {
opacity: 1;
transform: translateY(100px);
}
}



/*---contactbt---*/

ul#contactbt {
position: fixed;
right: 10px;
top: 10px;
z-index: 9999;
box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2);
}

ul#contactbt a {
display: block;
}

@media screen and (max-width: 850px){
ul#contactbt {
position: fixed;
right: 5px;
top: 10px;
}
}


/*---footer---*/

#footer {
width: 100%;
background: url("../../images/hanamaru/common/ftbg.png")no-repeat;
background-position:  center center;
background-size: cover;
}

#footer .footerbox {
width: 100%;
max-width: 75%;
margin: 0 auto;
}

#footer .footerbox ul.infobox {
text-align: center;
padding: 2% 0;
}

#footer .footerbox ul.infobox h1 {
font-size: 12px;
letter-spacing: 0.08em;
padding-bottom: 8px;
color: #fff;
}

#footer .footerbox ul.infobox li.ftlogo {
padding-bottom: 12px;
}

#footer .footerbox ul.infobox li.info {
padding-bottom: 8px;
}

#footer .footerbox ul.infobox li.info p {
font-size: 16px;
letter-spacing: 0.08em;
color: #fff;
}

#footer .footerbox ul.infobox li.add p {
font-size: 13px;
letter-spacing: 0.08em;
color: #fff;
}


#footer .footerbox ul.copy {
clear: both;
width: 100%;
font-weight: 600;
padding: 2% 0;
font-size: 12px;
letter-spacing: 0.14em;
text-align: center;
color: #fff;
}

@media only screen and ( max-width : 1200px ) {
#footer .footerbox {
width: 98%;
margin: 0 auto;
}

#footer .footerbox ul.shopinfo {
width: 35%;
padding: 5% 0 3% 0;
}
}

@media only screen and (max-width: 900px) {
#footer {
text-align: center;
padding: 3% 0;
}

#footer .footerbox {
width: 100%;
margin: 0 auto;
}

#footer .footerbox ul.infobox {
width: 97%;
margin: 0 auto;
}

#footer .footerbox ul.infobox h1 {
display: none;
}

#footer .footerbox ul.infobox li.copy {
padding: 2% 0;
}

#footer .footerbox ul.shopinfo {
float: none;
width: 97%;
margin: 0 auto;
}

#footer .footerbox ul.shopinfo li.time ul.dbox {
width: 100%;
}

#footer .footerbox ul.shopinfo li.time ul.dbox li.hour {
float: none;
margin: 0 auto;
}

#footer .footerbox ul.shopinfo li.time ul.dbox li.hour p {
font-size: 14px;
font-weight: 600;
}

#footer .footerbox ul.shopinfo li.time ul.dbox li.sns {
float: none;
margin: 0 auto;
}

#footer .footerbox ul.shopinfo li.card {
padding-top: 20px;
}

#footer .footerbox ul.shopinfo li.card img {
width: 100%;
max-width: 100%;
}
}