@charset "utf-8";

/* ================================
 * Common
 * ================================ */

html, body {
	width: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-size-adjust: none;
	-webkit-text-size-adjust: none;
	font-family: roboto, "Yu Gothic", YuGothic, "Hiragino Kaku Gothic Pro", "Meiryo", 'Noto Sans JP', sans-serif;
	color: #555;
	letter-spacing: .03em;
	line-height: 1.75;
	font-size: 62.5%;
}

body {
    padding-top: constant(safe-area-inset-top);
    padding-right: constant(safe-area-inset-right);
    padding-bottom: constant(safe-area-inset-bottom);
    padding-left: constant(safe-area-inset-left);
    position: relative;
}

#intro, header, main, footer {
	opacity: 0;
}

#wrapper {
	overflow: hidden; /* for iPad */
}


.font--ja {
	color: #777;
	font-family: "Yu Mincho", YuMincho, "Hiragino Mincho Pro", 'Noto Serif JP', serif;
	text-align: justify;
	word-break: break-all;
}
.font--en {
	font-family: 'Cormorant Garamond', 'Noto Serif JP', serif;
	word-break: break-word;
}


a {
	transition: all .25s;
	-webkit-transition: all .25s;
}
a:hover {
	opacity: .5;
}
a.textlink {
	display: inline-block;
	border-bottom: 1px solid #777;
}
a.tel {
	pointer-events: none;
	cursor: text;
}
a.noEvent {
	pointer-events: none;
	position: relative;
	cursor: pointer;
}


.float--left  { float: left;  }
.float--right { float: right; }

.sp { display: none; }


::selection      { background: #eee; }
::-moz-selection { background: #eee; }


.productPopup__overlay,
.aboutPopup__overlay {
	width: 100vw;
	height: 100vh;
	background: #ddd;
	opacity: .9;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
}


.anim__slideFade {
    position: relative;
     transition: all .6s cubic-bezier(0, 0, 0.22, 1.01);
    -webkit-transition: all .6s cubic-bezier(0, 0, 0.22, 1.01);
}
.anim__slideFade[data-emergence=hidden] {
    top: 30px;
    opacity: 0;
}
.anim__slideFade[data-emergence=visible] {
    top: 0;
    opacity: 1;
}


.anim__fade {
     transition: all .6s cubic-bezier(0, 0, 0.22, 1.01);
    -webkit-transition: all .6s cubic-bezier(0, 0, 0.22, 1.01);
}
.anim__fade[data-emergence=hidden] {
    opacity: 0;
}
.anim__fade[data-emergence=visible] {
    opacity: 1;
}





/* ================================
 * Intro
 * ================================ */

body.-fixed {
    position: fixed;
}

#intro {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
}

.intro__text {
    width: 100%;
	position: absolute;
	top: 50%;
	left: 0;
	z-index: 1;
	transform: translateY(-70%);
}

.introText__main {
    text-align: center;
    line-height: 1;
    font-size: 3.4rem;
    letter-spacing: .26em;
    color: #777;
    margin-bottom: 44px;
}
.introText__sub {
    text-align: center;
    line-height: 1;
    font-size: 1.3rem;
    letter-spacing: .3em;
    color: #888;
}
.introText__main span,
.introText__sub span {
    opacity: 0;
}

.covervid-wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
}





/* ================================
 * Header
 * ================================ */

header {
	width: 100%;
	padding: 18px 0;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
	transition: .25s;
}
body.-scroll header {
	background: rgba(255,255,255, .93);
}


header h1 {
	position: absolute;
	top: 50%;
	left: 25px;
	transform: translateY(-50%);
}
header h1 svg {
    width: 70px;
    height: 40px;
    fill: #222;
}


.header__sns {
	overflow: hidden;
	position: absolute;
	top: 50%;
	right: 225px;
	transform: translateY(-50%);
}
.header__sns li {
	float: left;
	margin: 4px 0;
}
.header__sns li a {
	display: block;
	padding: 12px 16px;
}
.header__sns svg {
    width: 20px;
    height: 20px;
    fill: #444;
}
.header__sns li:last-child svg {
    width: 28px;
    height: 22px;
    margin-left: -4px;
}


.header__cta {
	width: 180px;
	float: right;
	margin-right: 25px;
	position: relative;
}

.headerCta__text {
	display: block;
	padding: 15px 0 13px;
	background: #222;
	font-size: 1.45rem;
	letter-spacing: .07em;
	text-align: center;
	color: #fff;
	position: relative;
	transition: .3s;
}
.headerCta__text:hover {
	color: #bbb;
}

.headerCta__list {
	width: 100%;
	padding: 16px 0 18px;
	background: rgba(250, 250, 250, 0.95);
	position: absolute;
    top: 53px;
    right: 0;
	display: none;
}

.headerCta__list a {
	display: block;
	padding: 18px 0 8px;
	text-align: center;
	transition: .3s;
}
.headerCta__list a:hover {
	background: rgba(255,255,255, .95);
	opacity: 1;
}

.headerCta__list span {
	display: block;
    margin-top: 4px;
    line-height: 1;
    font-size: 1.05rem;
    letter-spacing: .05em;
    color: #777;
}

.headerCta__list svg {
    width: 80px;
    height: 24px;
}





/* ================================
 * Firstview
 * ================================ */

#firstview {
    width: 100%;
    height: 100vh;
    background:
        url("/img/index/fv.jpg") no-repeat center center / cover;
	position: relative;
	transition: 4s cubic-bezier(0, 0, 0.2, 1.01);
	transform: scale(1.05, 1.05);
}
body.-loaded #firstview {
	transform: scale(1, 1);
}


.firstview__scrollIndicator {
    position: absolute;
    bottom: 30px;
    right: 25px;
}

.firstview__scrollIndicator a {
	height: 130px;
	display: block;
	padding: 0 6px;
    color: #fff;
    letter-spacing: .1em;
    font-size: 1.4rem;
    position: relative;
    -webkit-writing-mode: vertical-rl;
    -moz-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    -ms-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}

.firstview__scrollIndicator span {
	width: 1px;
	height: 100%;
	display: block;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
}
.firstview__scrollIndicator span:before {
	content: "";
	width: 100%;
	height: 100%;
	background: #fff;
    position: absolute;
    top: 0;
    left: 0;
	-webkit-animation: LINE 1.6s ease infinite;
	animation: LINE 1.6s ease infinite;
}
@keyframes LINE {
  0%   { -webkit-transform: translateY(-100%); transform: translateY(-100%) }
  60%  { -webkit-transform: translateY(0%); transform: translateY(0%) }
  100% { -webkit-transform:translateY(100%); transform:translateY(100%) }
}





/* ================================
 * Concept
 * ================================ */

#concept {
	width: 100%;
    background:
	    url("/img/index/concept_bg.jpg") no-repeat center right / cover;
    position: relative;
}


.concept__title {
    color: #dee9ec;
    font-size: 12.5rem;
    line-height: 1;
    letter-spacing: -.02em;
    position: absolute;
    top: 60px;
    left: 6%;
    -webkit-writing-mode: vertical-rl;
    -moz-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    -ms-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}


.concept__desc {
	width: 60%;
	max-width: 750px;
	margin: auto;
	padding-top:  120px;
	padding-bottom:  140px;
}
.concept__desc h3 {
	font-size: 2.6rem;
	letter-spacing: .24em;
	line-height: 1.95;
	margin-bottom: 32px;
}

.attention1, .attention2 { position: relative; }
.attention1:before,
.attention2:before {
	font-size: 1.0rem;
	letter-spacing: .1em;
	position: absolute;
	bottom: -18px;
	right: 5px;
}
.attention1:before { content: "※1"; }
.attention2:before { content: "※2"; }

.concept__desc p {
	font-size: 1.45rem;
	letter-spacing: .1em;
	line-height: 1.9;
}

.conceptDesc__script {
    width: 497px;
    height: 212px;
    background:
	    url("/img/index/concept2.png") no-repeat top left / 100%;
    mix-blend-mode: color-burn;
}

.concept__attention {
	font-size: 1.0rem;
	line-height: 1.6;
	position: absolute;
	bottom: 20px;
	right: 20px;
}





/* ================================
 * Products
 * ================================ */

#product {
	position: relative;
	padding-bottom: 220px;
}


#product:before {
	content: "";
	width: calc((100% - 750px)/2);
	height: 100%;
	background:
	    url("/img/index/grd.gif")
	    repeat-x top 120px left;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}
#product:after {
	content: "";
	width: calc((100% - 750px)/2);
	height: 120px;
	background: #eef4f7;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}



#product .wrapper {
	width: 90%;
	max-width: 1000px;
	margin: auto;
	overflow: hidden;
	padding-top: 180px;
	padding-bottom: 100px;
}

.product__items {
	width: 50%;
	position: relative;
}
.productItems__item01 {
	width: 55%;
	filter: drop-shadow(0 20px 15px rgba(75, 114, 125, 0.2));
	position: absolute;
	top: 110px;
	left: 0;
	z-index: 1;
}
.productItems__item02 {
	width: 55%;
	filter: drop-shadow(0 20px 15px rgba(75, 114, 125, 0.2));
	position: absolute;
	top: 24px;
	left: 200px;
}


.product__info {
	width: 45%;
	float: right;
}


.productInfo__title {
	margin-bottom: 10px;
}
.productInfo__title .-jp{
	font-size: 1.2rem;
	letter-spacing: .05em;
	line-height: 2.4;
}
.productInfo__title .font--en {
	color: #333;
	font-size: 5.8rem;
	line-height: 1;
}
.productInfo__title .font--en span {
	font-size: 3.75rem;
    display: block;
}

.productInfo__price {
	font-size: 1.15rem;
	letter-spacing: .05em;
	margin-bottom: 26px;
}
.productInfo__price span {
	font-size: 2.3rem;
	letter-spacing: .05em;
	color: #555;
	margin-right: 10px;
}


.productInfo__campaign {
	border-top: 1px solid #b6811b;
	border-bottom: 1px solid #b6811b;
	margin-bottom: 30px;
}
.productInfo__campaign h3 {
	font-size: 1.8rem;
	line-height: 1;
	display: inline-block;
	padding: 2px 8px 4px 9px;
	background: #b6811b;
	color: #fff;
	margin-bottom: 8px;
}
.productInfo__campaign .-title {
	color: #b6811b;
	font-size: 1.3rem;
	margin-bottom: 2px;
}
.productInfo__campaign .font--ja {
	color: #b6811b;
	font-weight: 600;
	letter-spacing: .1em;
	font-size: 2.55rem;
	margin-right: 10px;
}
.productInfo__campaign .-attention {
	font-size: 1rem;
	letter-spacing: 0;
	line-height: 1.4;
	margin-bottom: 14px;
}


.productInfo__desc {
	font-size: 1.25rem;
	margin-bottom: 8px;
	background: url("/img/index/fruits.jpg")
	    no-repeat bottom 10px right 40px/ 83px 63px;
	padding-bottom: 20px;
}
.productInfo__desc > li {
	padding-left: 14px;
	letter-spacing: .05em;
	position: relative;
}
.productInfo__desc > li:before {
	content: "";
	width: 5px;
	height: 1px;
	background: #999;
	position: absolute;
	top: 10px;
	left: 0;
}


li.-component ul {
	overflow: hidden;
	margin-top: 10px;
	margin-bottom: 12px;
}
li.-component li {
    width: 20%;
    float: left;
    text-align: center;
    font-size: 1.0rem;
    line-height: 1.2;
}
li.-component li img {
    width: 70%;
    margin: 0 auto 4px;
    display: block !important;
}

li.-component a {
	display: inline-block;
	border-bottom: 1px solid #ddd;
	padding-bottom: 1px;
	margin-bottom: 32px;
}
li.-component a svg {
	width: 8px;
	height: 8px;
	margin-left: 4px;
}

.productInfo__attention {
	line-height: 1.3;
}



.product__travel {
	width: 90%;
	max-width: 900px;
	margin: auto;
	overflow: hidden;
	background: #222;
	position: relative;
}

.productTravel__img {
	width: 50%;
	float: right;
}

.productTravel__text {
	width: 50%;
	float: left;
	color: #fff;
	text-align: center;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
}
.productTravel__text h3 {
	font-size: 1.85rem;
	font-weight: 600;
	letter-spacing: .1em;
	margin-bottom: 8px;
}
.productTravel__text > p {
	font-size: 1.3rem;
	line-height: 1.6;
	letter-spacing: .05em;
}


.productTravel__text ul {
	width: 320px;
	margin: auto;
	overflow: hidden;
}

.productTravel__text ul li {
	width: 33.3%;
	float:left;
	padding-top: 64px;
	position: relative;
}

.productTravel__text .productTravel__text--fig1:before ,
.productTravel__text .productTravel__text--fig2:before,
.productTravel__text .productTravel__text--fig3:before{
	content: "";
	width: 100%;
	height: 70px;
	position: absolute;
	top: 0;
	left: 0;
}
.productTravel__text .productTravel__text--fig1:before {
	background: url("/img/index/travelsize01.png") no-repeat bottom center / 25px 28px;
}
.productTravel__text .productTravel__text--fig2:before {
	background: url("/img/index/travelsize02.png") no-repeat bottom center / 26px 47px;
}
.productTravel__text .productTravel__text--fig3:before {
	background: url("/img/index/travelsize03.png") no-repeat bottom center / 42px 61px;
}

.productTravel__text ul .-title {
	font-size: 1.3rem;
	letter-spacing: .05em;
	line-height: 1.4;
	margin-bottom: 4px;
}
.productTravel__text ul .-capacity {
	display: inline-block;
	font-size: 1.2rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .05em;
	line-height: 1.4;
	border-bottom: 1px solid #555;
}
.productTravel__text ul .-capacity span {
	font-size: 140%;
}



.product__popup {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 11;
    display: none;
}

.product__popup .inner {
	width: 90%;
	max-width: 1000px;
	background: #fff;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 11;
}

.productPopup__content {
	width: 50%;
	padding: 72px 64px 70px;
	box-sizing: border-box;
	float: left;
}
.productPopup__content.-treatment {
	background: #222;
	color: #fff;
}

.productPopup__content h3 {
	font-size: 1.3rem;
	line-height: 1.8;
    margin-bottom: 28px;
	margin-left: 3px;
}
.productPopup__content h3 .font--en {
	font-size: 5.4rem;
	line-height: 1;
	margin-left: -3px;
}
.productPopup__content p {
	font-size: 1.2rem;
}


.productPopup__close,
.aboutPopup__close {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	position: absolute;
}

.productPopup__close {
	top: 25px;
	right: 25px;
}
.productPopup__close:hover {
	opacity: 1;
	transform: rotate(90deg);
}

.aboutPopup__close {
	top: 32px;
	right: 32px;
}
.aboutPopup__close:hover {
	opacity: 1;
	transform: rotate(90deg);
}

.productPopup__close:before,
.productPopup__close:after,
.aboutPopup__close:before,
.aboutPopup__close:after {
    content: "";
	position: absolute;
	transform: rotate(45deg);
}
.productPopup__close:before,
.productPopup__close:after { background: #ddd; }
.aboutPopup__close:before,
.aboutPopup__close:after { background: #999; }


.productPopup__close:before,
.aboutPopup__close:before {
    width: 1px;
    height: 100%;
	top: 0;
	left: 50%;
}
.productPopup__close:after,
.aboutPopup__close:after {
    width: 100%;
    height: 1px;
	top: 50%;
	left: 0;
}





/* ================================
 * About
 * ================================ */

#about {
}


.about__mainVis {
    position: relative;
}

.aboutMainVis__text {
	width: 100%;
	text-align: center;
	color: #fff;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}
.aboutMainVis__text h2 {
	font-size: 1.4rem;
	letter-spacing: .19em;
	line-height: 1;
}
.aboutMainVis__text h2 span {
	display: block;
	font-size: 8.5rem;
	letter-spacing: .05em;
	line-height: 1;
	margin-bottom: 16px;
}



.about__data {
	padding-top: 100px;
	padding-bottom: 320px;
	position: relative;
}


.aboutData__text {
	width: 90%;
	max-width: 1000px;
    margin: auto;
    overflow: hidden;
    margin-bottom: 3%;
}
.aboutData__text h3 {
	width: 45%;
	color: #333;
	font-size: 2.8rem;
	letter-spacing: .18em;
	line-height: 1.8 ;
	float: left;
	margin-top: -8px;
}
.aboutData__text p {
	width: 55%;
	color: #333;
	font-size: 1.3rem;
	line-height: 1.85;
	float: left;
	margin-bottom: 20px;
}


.aboutData__data {
	width: 90%;
	max-width: 980px;
    margin: 0 auto 7%;
	position: relative;
}

.aboutData__data ul {
	width: 700px;
	margin: auto;
	overflow: hidden;
}


.graph {
	width: 33.3%;
	padding-top: 20px;
    float: left;
    margin: auto;
    text-align: center;
}
.graph.-jp {
	width: auto;
	position: absolute;
	bottom: 0;
	right: 0;
}

.graph__data {
	width: 140px;
	height: 140px;
	background: #fff;
	border-radius: 50%;
	position: relative;
	margin: 0 auto 8px;
	position: relative;
}
.graph.-jp .graph__data {
	width: 88px;
	height: 88px;
}
.graph__data:after {
	content: "";
	width: 10px;
	height: 10px;
	background: #fff;
	position: absolute;
	top: 1px;
	right: 50%;
	transform: rotate(-5deg);
}
.graph.-jp .graph__data:after {
	display: none;
}


.graph__data svg {
	transform: rotate(-90deg);
}
.graph__data circle {
	fill: transparent;
	stroke: #333;
	stroke-width: 4;
}
.graph.-jp .graph__data circle {
	stroke-width: 2;
}
.graph__data.anim__graph circle {
	animation: circle 2s cubic-bezier(0, 0, 0.08, 0.99);
}
@keyframes circle {
	0% { stroke-dasharray: 0 410; }
	100% { stroke-dasharray: 410 410; }

}


.graph__data:before {
	content: "";
	width: 68px;
	height: 20px;
    background:
        url("/img/index/graph_text.png") no-repeat center center / 68px 19px;
	position: absolute;
	top: -18px;
	left: 50%;
	transform: translateX(-50%);
}
.graph.-jp .graph__data:before {
	width: 56px;
	height: 16px;
    background:
        url("/img/index/graph_text_min.png") no-repeat center center / 56px 16px;
	top: -18px;
}

.graph__data .-inner {
	width: 100%;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
}

.graph__data .-brandName {
	font-size: 1.15rem;
	line-height: 1;
	color: #333;
	font-family: avenir;
	font-weight: 600;
	letter-spacing: .05em;
	margin: 8px auto 4px;
}
.graph.-jp .graph__data .-brandName {
	font-size: 1rem;
	margin: 10px auto 1px;
	letter-spacing: .03em;
	white-space: nowrap;
	transform: scale(.9);
}

.graph__data .-data {
	font-size: 4.6rem;
	line-height: 1;
	color: #333;
	font-family: avenir;
	font-weight: 500;
	letter-spacing: 0;
}
.graph.-jp .graph__data .-data {
	font-size: 3rem;
}

.graph__data .-data span {
	font-size: 50%;
	margin-left: 3px;
}

.graph__title h4 {
	font-size: 1.85rem;
	line-height: 1.8;
	color: #333;
	font-weight: 600;
	letter-spacing: 0;
}
.graph__title p {
	font-size: 1.2rem;
	line-height: 1;
	color: #333;
	letter-spacing: .05em;
}
.graph__title p span {
	font-weight: 600;
}


.aboutData__aside {
	width: 90%;
	max-width: 1000px;
    margin: auto;
    overflow: hidden;
}
.aboutData__aside a {
	display: inline-block;
	float: left;
	color: #333;
	font-weight: 600;
	font-size: 1.6rem;
	line-height: 1.7;
	letter-spacing: .17em;
}

.aboutData__aside a img {
	display: block !important;
	width: 321px;
	margin-top: 4px;
	transition: .2s ease-out;
}
.aboutData__aside a:hover img {
	margin-left: 10px;
}

.aboutData__aside__text {
	width: 55%;
	float: right;
	font-size: 1.05rem;
	letter-spacing: .05em;
	line-height: 1.6;
	opacity: .8;
}


.aboutData__map {
	width: 100%;
	position: absolute;
	top: 100px;
	left: 0;
	z-index: -1;
}
.aboutData__map ul{
	padding-bottom: 60px;
}
.aboutData__map img {
	width: 50%;
}



.about__popup {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 11;
    display: none;
}
.about__popup .inner{
	width: 90%;
	max-width: 1000px;
	background: #fff;
	padding: 120px 160px;
	box-sizing: border-box;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 11;
	filter: drop-shadow(0 10px 15px rgba(75, 114, 125, 0.05));
    background: #fff
        url("/img/index/popup.jpg") no-repeat center bottom / 100%;
}


.about__popup h3 {
	color: #555;
	font-size: 2.6rem;
	letter-spacing: .2em;
	margin-bottom: 34px;
}
.about__popup p {
	font-size: 1.4rem;
}






/* ================================
 * Story
 * ================================ */

#story {
	position: relative;
	margin-bottom: 160px;
}


.story__img {
	padding-bottom: 20px;
    background:
        url("/img/index/story.jpg") no-repeat center center / cover;
	position: relative;
	z-index: -1;
}
.story__img img {
	display: none !important;
}


.story__textbox {
	width: calc(750px + ((100% - 750px)/2));
	background: rgba(34, 34, 34, .9);
	color: #fff;
	padding: 100px 140px 100px;
	box-sizing: border-box;
	position: absolute;
	top: -80px;
	left: 0;
	margin-top: -80px;
}
.story__textbox h3 {
	font-size: 7.6rem;
	line-height: 1;
	letter-spacing: .05em;
	margin-bottom: 44px;
}
.story__textbox h4 {
	color: #fff;
	font-size: 2.2rem;
	line-height: 1.9;
	letter-spacing: .15em;
	margin-bottom: 28px;
	text-align: left;
}
.story__textbox h4 span {
	display: inline-block;
}
.story__textbox a {
	display: none;
}
.story__textbox p {
	color: #fff;
	font-size: 1.36rem;
	line-height: 1.75;
	margin-bottom: 20px;
}





/* ================================
 * Instagram
 * ================================ */

#instagram {
	width: 90%;
	max-width: 1000px;
	margin: 0 auto 220px;
	text-align: center;
}

#instagram h2 svg {
	width: 34px;
	height: 34px;
	margin-bottom: 12px;
}
#instagram h2 {
	font-size: 1.6rem;
	letter-spacing: .08em;
	line-height: 1;
	margin-bottom: 56px;
}
#instagram h2 span{
	display: block;
	font-size: 5.8rem;
	letter-spacing: -.01em;
	line-height: 1;
	margin-bottom: 16px;
	color: #333;
}


.instagram__gallery {
	overflow: hidden;
}

.instagram__gallery li {
	width: 20%;
    float: left;
}

.instagram__gallery a {
	display: block;
}
.instagram__gallery a:hover {
	opacity: .86;
}


.instagram__sns {
	display: none;
}





/* ================================
 * Online Shop
 * ================================ */

#onlineshop {
	padding: 120px 0 130px;
    background:
        url("/img/index/beach.jpg") no-repeat fixed center center / cover;
}

#onlineshop p {
    text-align: center;
    color: #fff;
	font-size: 2.15rem;
	line-height: 1.9;
	letter-spacing: .15em;
}


.onlineshop__cta {
	width: 540px;
	margin: 50px auto 0;
    text-align: center;
}

.onlineshop__cta h2 {
    color: #fff;
	font-size: 1.4rem;
	line-height: 1;
	letter-spacing: .15em;
	position: relative;
	margin-bottom: 24px;
}
.onlineshop__cta h2:before,
.onlineshop__cta h2:after {
	content: "";
	width: 35%;
	height: 1px;
	background: #fff;
	opacity: .5;
	position: absolute;
	top: 50%;
}
.onlineshop__cta h2:before { left: 0; }
.onlineshop__cta h2:after  { right: 0; }

.onlineshopCta__list {
   overflow: hidden;
}

.onlineshopCta__list li {
	width: 48%;
	float: left;
	display: contents;
}
.onlineshopCta__list li + li {
	float: right;
}

.onlineshopCta__list a {
	display: block;
	background: rgba(255,255,255, .8);
	padding: 28px 0 20px;
}
.onlineshopCta__list a:hover {
	opacity: 1;
	background: rgba(255,255,255, .95);
}

.onlineshopCta__list span {
	display: block;
    margin-top: 10px;
    line-height: 1;
    font-size: 1.2rem;
    letter-spacing: .05em;
    color: #ddd;
}

.onlineshopCta__list svg {
	width: 90px;
	height: 30px;
}





/* ================================
 * Footer
 * ================================ */

footer {
	background: #222;
	position: relative;
	padding: 20px 0;
}

.footer__logo {
	width: 140px;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
}
.footer__logo a {
	display: block;
	padding: 20px 25px;
}


.footer__links {
	text-align: center;
}
.footer__links li {
	display: inline-block;
	position: relative;
}
.footer__links li+li:before {
	content: "";
	width: 1px;
	height: 14px;
	background: #444;
	position: absolute;
	top: 50%;
	left: -2px;
	transform: translateY(-50%);
}
.footer__links a {
	display: block;
	padding: 10px 18px;
    color: #999;
    font-size: 1.15rem;
    position: relative;
}

.footer__links svg {
	width: 22px;
	height: 7px;
	fill: #fff;
	opacity: .5;
}


footer small {
    font-size: 1rem;
    color: #666;
    letter-spacing: .08em;
    text-align: right;
	position: absolute;
	top: 50%;
	right: 25px;
	transform: translateY(-50%);
}