@charset "utf-8";

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

html, body {
	width: 100%;
	font-size: 62.5%;
	letter-spacing: .03em;
	line-height: 1.75;
	color: #333;
	font-family: 'Roboto', "Yu Gothic", 'YuGothic', "Hiragino Kaku Gothic Pro", sans-serif;
	font-family: kozuka-gothic-pro, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-size-adjust: none;
	-webkit-text-size-adjust: none;
	word-break: break-all;
	word-break: break-word;
}
body:not(.fs-body-top) {
  font-size: 16px;
	letter-spacing: inherit;
	color: inherit;
	word-break: normal;
}


a {
/* 	display: block; */
	transition: all .25s;
	-webkit-transition: all .25s;
}
a:hover {
	opacity: .5;
}
a.noEvent {
	pointer-events: none;
	position: relative;
	cursor: pointer;
}

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

.pc {
	display: none !important;
}


.sectionTitle {
    font-size: 3.8rem;
    font-weight: 400;
}
.sectionTitle.-normal {
    text-align: center;
}
.sectionTitle.-small h2 {
    font-size: 90%;
}
.sectionTitle.-bg {
    background: #fff;
    line-height: 1;
    padding: 16px 25px;
    position: absolute;
    z-index: 1;
}

.sectionTitle h2 {
    letter-spacing: .06em;
}


.button.-line {
    max-width: 160px;
    margin: auto;
    text-align: center;
    overflow: hidden;
    position: relative;
}
.button.-line a {
    display: block;
    padding: 10px 0;
    font-size: 1.55rem;
    font-weight: 600;
    letter-spacing: .08em;
}
.button.-line a:before {
	content: "";
	width: 100%;
	height: 2px;
	background: #000;
	position: absolute;
	bottom: 0;
	left: 0;
	transition: .5s;
}
.button.-line a:hover:before {
	animation: imageAnimation .8s cubic-bezier(0, 0, 0.24, 1.01);
	-webkit-animation: imageAnimation .8s cubic-bezier(0, 0, 0.24, 1.01);
}
@keyframes imageAnimation {
	  0%   { left:   0%; }
	 45%   { left: 100%; }
	 45.1% { left:-100%; }
	 55%   { left:-100%; }
	100%   { left:    0; }
}
@-webkit-keyframes imageAnimation {
	  0%   { left:   0%; }
	 45%   { left: 100%; }
	 45.1% { left:-100%; }
	 55%   { left:-100%; }
	100%   { left:    0; }
}


.button.-square {
    width: 80%;
    max-width: 260px;
    margin: auto;
}
.button.-square a {
    display: block;
    padding: 20px 0 19px;
    background: #fff;
    line-height: 1;
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: .06em;
    position: relative;
}
.button.-square a:hover {
    color: #c06c00;
    fill: #c06c00;
}
.button.-square a span {
    display: block;
    margin-top: 4px;
    font-size: 1.1rem;
    font-weight: 200;
    letter-spacing: .05em;
}
.button.-square a img {
    width: 12px;
    height: 12px;
    position: absolute;
    top: 50%;
    right: 10px;
    margin-top: -6px;
}

.button a:hover {
    opacity: 1;
}


.-bold {
    font-weight: 600;
}
.-thin {
    font-weight: 200;
}


a .anim--scale {
    overflow: hidden;
}
a .anim--scale img {
	transform: scale(1);
	transition: transform 1s cubic-bezier(0.12, 0.68, 0.44, 1);
}
a:hover .anim--scale img {
	transform: scale(1.08);
}


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


/*
main, footer {
	opacity: 0;
}
*/




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

header {
	width: 100%;
	position: fixed;
	z-index: 10;
}
header:before {
	content: "";
	width: 100%;
	height: 3px;
	background: #000;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
}


.header__fixed {
	background: #fff;
	transition: .25s;
}
.header__menu .header__fixed {
	background: #221713;
}


.h1 {
	margin: auto;
	position: relative;
	text-align: center;
	z-index: 1;
}
.h1 a {
	width: 190px;
	height: 190px;
	display: block;
	background: #fff;
	border-radius: 50%;
	position: absolute;
	top: -50%;
	left: 50%;
	z-index: -1;
	transform: translate(-50%, -50%);
}
.h1 a:hover {
	opacity: 1;
}
.h1 span {
	width: 100%;
	font-size: 1rem;
	letter-spacing: -.02em;
	position: absolute;
	bottom: 65px;
	left: 50%;
	transform: translateX(-50%);
}

.h1 img {
	margin: auto;
	width: 104px;
	margin-top: 123px;
}


.header__hamburger {
	position: relative;
	z-index: 20;
	width: 65px;
	height: 65px;
}
.header__hamburger a {
	width: 100%;
	height: 100%;
	display: block;
	position: relative;
}
.header__hamburger a:hover {
	opacity: 1;
}

.header__hamburger .line1,
.header__hamburger .line2 {
	width: 24px;
	height: 2px;
	background: #000;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%);
	transition: .5s;
}
.header__hamburger .line1 {
	margin-top: calc(-1px - 4px);
}
.header__hamburger .line2 {
	margin-top: calc(-1px + 4px);
}

.menuOpen .header__hamburger .line1,
.menuOpen .header__hamburger .line2 {
	height: 1px;
	background: #fff;
	margin-top: 0;
	left: 30%;
}
.menuOpen .header__hamburger .line1 {
	transform: rotate(135deg);
}
.menuOpen .header__hamburger .line2 {
	transform: rotate(-135deg);
}


.header__icon {
	overflow: hidden;
	position: absolute;
	top: 0;
	right: 0;
	margin-right: 12px;
}
.header__icon li {
	float: left;
}
.header__icon a {
	display: block;
	width: 38px;
	height: 65px;
	position: relative;
}
.header__icon img {
	width: 20px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

header .menu__links {
	display: none;
}




/* ================================
 * Slick reset
 * ================================ */

.slick-slider {
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list {
    position: relative;
    display: block;
    margin: 0;
    padding: 0;
}
.slick-list:before {
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

.itemPic .slick-list:before {
	z-index: 1;
	background: #f7f7f7;
	mix-blend-mode: multiply;
}

/* for IE */
.itemPic .slick-list:before {
	display: none\9; /* below IE10 */
}
@media all and (-ms-high-contrast: none){
	.itemPic .slick-list:before {
		display: none; /* above IE10 */
	}
}
/* for Edge */
@supports (-ms-ime-align: auto) {
	.itemPic .slick-list:before {
		display: none;
	}
}

.slick-list:focus {
    outline: none;
}
.slick-list.dragging {
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.slick-track {
    position: relative;
    top: 0;
    left: 0;

    display: block;
    margin-left: auto;
    margin-right: auto;
}
.slick-track:before,
.slick-track:after {
    display: table;

    content: '';
}
.slick-track:after {
    clear: both;
}
.slick-loading .slick-track {
    visibility: hidden;
}

.slick-slide {
    display: none;
    float: left;

    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide {
    float: right;
}
.slick-slide img {
    display: block;
}
.slick-slide.slick-loading img {
    display: none;
}
.slick-slide.dragging img {
    pointer-events: none;
}
.slick-initialized .slick-slide {
    display: block;
}
.column__slideshow .slick-slide > div {
    margin: 0 20px;
}
.slick-loading .slick-slide {
    visibility: hidden;
}
.slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}

body.fs-body-top .slick-arrow {
    background: none;
    border: none;
    padding: 6px 4px;
    position: absolute;
    top: 30%;
    z-index: 1;
}
.slick-arrow:hover {
    opacity: .5s;
}
.slick-next { right: 0; }
.slick-prev { left: 0; }




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

.footer__arrow {
	width: 100%;
	margin-bottom: 24px;

}
.footer__arrow a {
	margin: auto;
	width: 24px;
	height: 24px;
	padding: 10px;
	border-radius: 50%;
	display: block;
}
.footer__arrow img {
	width: 34px;
	height: 34px;
}


footer {
    padding-top: 40px;
}

footer .header__fixed,
footer .header__icon {
	display: none;
}

.footer__logo {
	width: 156px;
	margin: 10px auto 10px;
}
.footer__logo a {
	display: block;
}
.footer__logo a span {
	font-size: 1rem;
}




/* ================================
 * Menu
 * ================================ */

.header__menu,
.header__menu .h1 a,
footer {
    background: #221713;
    color: #fff;
}


.header__menu {
	width: 100%;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
	display: none;
	overflow: auto;
}

.menu {
	width: 75%;
	margin: auto;
}
.header__menu .menu {
	position: absolute;
	top: 106px;
	left: 12.5%;
	padding-bottom: 80px;
}


.menu__main li {
	width: 100%;
	position: relative;
}
.menu__main li.title > a {
	display: block;
	font-size: 2.2rem;
	letter-spacing: .04em;
	line-height: 1;
	padding: 22px 0 8px;
	position: relative;
}
.menu__main li.title > a:hover {
	opacity: 1;
}
.menu__main li.title > a span {
	font-size: 1.05rem;
	letter-spacing: .03em;
	opacity: .7;
	position: absolute;
	bottom: 10px;
	right: 0;
}
.menu__main li.title > a:before {
	content: "";
	width: 100%;
	height: 1px;
	background: rgba(255,255,255, .4);
	position: absolute;
	bottom: 0;
	left: 0;
}


.hideMenu {
	display: none;
	overflow: hidden;
	margin-top: 16px;
	margin-bottom: 20px;
}
.hideMenu li {
	width: 50%;
	float: left;
}
.hideMenu li a {
	display: block;
	color: rgba(255,255,255, .9);
	font-size: 1.2rem;
	padding: 8px 0;
	letter-spacing: .05em;
	line-height: 1.4;
}


.menu__subNav ul {
	overflow: hidden;
	margin: 30px auto;
}
.menu__subNav li {
	width: 50%;
	float: left;
	text-align: center;
}
.menu__subNav a {
	display: block;
	font-size: 1.7rem;
	letter-spacing: .04em;
	line-height: 1.4;
	padding: 10px 0;
}
.menu__subNav a span {
	display: block;
	font-size: 1rem;
	letter-spacing: .03em;
	opacity: .7;
}


.menu__btn {
	font-size: 1.7rem;
	letter-spacing: .04em;
	line-height: 1.4;
	text-align: center;
}
.menu__btn a {
	display: block;
	padding: 12px 0;
	margin-bottom: 10px;
	position: relative;
}
.menu__btn img {
	width: 12px;
	height: 12px;
	fill: #fff;
	position: absolute;
	top: 50%;
	left: 20px;
	transform: translateY(-50%);
	opacity: .8;
}
.menu__btn span {
	display: block;
	font-size: 1rem;
	letter-spacing: .03em;
	opacity: .7;
}
.menu__btn .login {
	background: #49332F;
}
.menu__btn .signup {
	border: 1px solid #49332F;
}


.menu__sns {
	overflow: hidden;
	margin: 28px auto 18px;
	text-align: center;
}
.menu__sns a {
	display: inline-block;
	padding: 10px;
	margin: 10px;
}

.menu__sns a img {
	width: 20px;
}


.menu__links ul {
	overflow: hidden;
	text-align: center;
}
.menu__links ul li {
	display: inline-block;
}
.menu__links a {
	display: block;
	padding: 2px 20px;
	font-size: 1rem;
	line-height: 1;
	margin: 6px 0;
}
.menu__links li:nth-child(1) a {
	border-right: 1px solid rgba(255,255,255, .3);
}


footer small {
	display: block;
	text-align: center;
	padding: 24px 0;
	color: rgba(255,255,255, .5);
}

.fs-c-accountService__page:not(.fs-c-accountService__page--accountDelete) {
    flex-basis: 46vw;
}