@charset "UTF-8";
/* CSS Document */
* {
	margin:0;
	padding:0;
} 
*, *:before, *:after {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}
html {
	font-size: 62.5%;
	height: 100%;
}
body {
	min-height: 100%;
	font-family: "Nunito", sans-serif;
    font-size: 1.8rem;
    font-weight: 300;
	color: #767AA3;
    text-align: center;
	background-color: #FAFAFA;
	-webkit-text-size-adjust: 100%;
}

img{
	border-style:none;
}
ul {
	list-style-type:none;
}
a {
	color: #0F0F0F;
	text-decoration:none;
	outline:none;
	display: block;
}
a:hover {
	color: #444444;
}
br {
	letter-spacing: normal;
}
iframe {
	border: none;
}
fieldset {
	border: none;
}
.text-br {
	display:inline-block;
}
span.br:before {
    content: '\A';
    white-space: pre;
}
h1 {
	font-size: 2.0rem;
	font-weight: 600;
	color: rgba(255,255,255,0);
}
h2 {
	font-size: clamp(3.0rem, 6vw, 4.0rem);
	font-weight: 600;
	margin-bottom: 8px;
}
h3 {
	font-size: clamp(4.6rem, 7vw, 6.0rem);
	font-weight: 600;
	letter-spacing: 0.02em;
    line-height: 1em;
	margin-bottom: 10px;
}
h4 {
	font-size: 2.6rem;
	font-weight: 400;
}
h5 {
	font-size: 2.0rem;
	font-weight: 300;
	letter-spacing: 0.05em;
}
p {
    font-size: 1.6rem;
    width: 100%;
	font-weight: 300;
    letter-spacing: 0.05em;
    margin-top: 30px;
}

.bold {
	font-weight: 600;
}

.wrapper,
.container {
	width: 100%;
	height: 100svh;
	position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px 15px;
}
.container {
    max-width: 480px;
    height: 100%;
    flex-flow: column;
    padding: 0;
}
.logo {
    width: 100%;
    height: 25%;
    max-height: 150px;
    background: url("../images/logo_manoya.svg") no-repeat center top;
    background-size: auto 70%;
}
.icons {
    width: 100%;
    max-width: 315px;
    height: 75%;
    max-height: 480px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
}
.icons > a {
    width: auto;
    height: calc((100% - 30px) / 3);
    max-height: 150px;
    aspect-ratio: 1 / 1;
    font-size: 1.4rem;
    color: #353C6E;
    background: #F2F2F2 no-repeat center 40%;
    background-size: auto 40%;
    border-radius: 10px;
    display: block;
}
.icons > a:nth-child(1) {
    background-image: url("../images/icon_localiser.svg");
}
.icons > a:nth-child(2) {
    background-image: url("../images/icon_web.svg");
    background-size: auto 35%;
}
.icons > a:nth-child(3) {
    background-image: url("../images/icon_ig.svg");
}
.icons > a:nth-child(4) {
    background-image: url("../images/icon_fb.svg");
}
.icons > a:nth-child(5) {
    background-image: url("../images/icon_mail.svg");
}
.icons > a:nth-child(6) {
    background-image: url("../images/icon_tel.svg");
}

.shop-card .icons > a:nth-child(1) {
    background-image: url("../images/icon_carte.svg");
    background-size: auto 38%;
}
.shop-card .icons > a:nth-child(2) {
    background-image: url("../images/icon_wa.svg");
    background-size: auto 40%;
}
.shop-card .icons > a:nth-child(3) {
    background-image: url("../images/icon_localiser.svg");
    background-size: auto 44%;
}
.shop-card .icons > a:nth-child(4) {
    background-image: url("../images/icon_web.svg");
}
.shop-card .icons > a:nth-child(5) {
    background-image: url("../images/icon_ig.svg");
}
.shop-card .icons > a:nth-child(6) {
    background-image: url("../images/icon_fb.svg");
}


.icons > a span {
    padding-top: 65%;
    display: block;
}
.icons > a.none {
    opacity: 0;
    visibility: hidden;
}


.sns .icons {
    height: 25%;
    max-height: 150px;
}
.sns .icons > a {
    height: 100%;
}
.sns .icons > a:nth-child(1) {
    background-image: url("../images/icon_ig.svg");
}
.sns .icons > a:nth-child(2) {
    background-image: url("../images/icon_fb.svg");
    background-size: auto 40%;
}


@media (max-height: 520px){
    .wrapper {
        padding: 20px 15px;
    }
    .logo {
        height: 33.333%;
    }
    .icons {
        max-width: 100svh;
    }
    .icons > a {
        height: calc((100% - 15px) / 2);
    }
    
    .sns .wrapper {
        padding: 50px 15px;
    }
    .sns .logo,
    .sns .icons {
        height: 50%;
    }
}