@charset "UTF-8";

/*--- reset */

html {
	overflow-y: scroll; 
	overflow-x: hidden;
	font-size: 62.5%;　/*フォントサイズを10pxに設定*/
}

body,
html {  
    height: 100%;
}

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
textarea,
p,
blockquote,
figure{
	margin: 0;
	padding: 0;
}
	
address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
	font-style: normal;}

table {
	border-collapse: collapse;
	border-spacing: 0;
	font-size:100%;
}


caption {text-align: left;}

q:before,
q:after {
	content: '';}

object,
embed {vertical-align: top;}

h1,
h2,
h3,
h4,
h5,
h6 {font-size: 100%;}

img,
abbr,
acronym,
fieldset {border: 0;}

img{
	vertical-align: bottom;
	line-height: 0;
}

li {list-style-type: none;}
li img{vertical-align: bottom;}
p{
	text-justify: inter-ideograph;
}

a {color: #0a337f; text-decoration:none;}
a:hover{transition: all .3s; }
.underline{text-decoration:underline;}

/* clearfix */
.clear:before,
.clear:after {
    content: " ";
    display: table;
}

.clear:after {
    clear: both;
}


	
/*hr reset*/
hr {
	border: 0;
	height: 0;
	margin: 0;
	padding: 0;
}
.hr01{
	border-bottom:1px #ccc solid;
}

.fs-letter{letter-spacing:-0.07em !important;}
.f-center{text-align:center !important;}

.f-bold{font-weight:700;}

.fc-purple{ color: #774CAA;}

/*margin*/
.mb10{margin-bottom: 1rem;}
.mb20{margin-bottom: 2rem;}
.mb30{margin-bottom: 3rem;}
.mb40{margin-bottom: 4rem;}
.mb60{margin-bottom: 6rem;}

/*padding*/
.ptb18{
	padding: 18rem 0;
}

/*flex*/
.flex-bt{
	display: flex;
	flex-wrap: wrap;
}
.flex-bt{
	justify-content: space-between;
}
.align-center{
	align-items: center;
}

/*iphone reset*/
input[type="submit"],
input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
  display: none;
}
input[type="submit"]::focus,
input[type="button"]::focus {
  outline-offset: -2px;
}

/*====================================
 default 
====================================*/

body {
	background: #fff;
	color: #586166;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 1.6em;/*14px*/
	line-height: 1.8;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	text-align: left;
}
section{
	position: relative;
}

.container{
	margin:0 auto;
	max-width:1120px;
	width: 86%;
	position:relative;
}


@media screen and (min-width: 769px) {
	.pc-none{
		display:none;
	}
	a[href^="tel:"] {
		pointer-events: none;
	}
}


/*====================================
 contents
====================================*/
@media screen and (min-width: 769px) {
	.container{
		opacity: 0; 
		transition: all 1s; 
		overflow-x: none;
	}
}
/* フェードイン用のクラス */
.fadeIn {
    opacity: 1;
}
/*animation*/
.fade-in {
	opacity: 0;
	transition-duration: 1s;
	transition-property: opacity, transform;
}
.fade-in-up {
	transform: translate(0, 50px);
}
.fade-in-left {
	transform: translate(-50px, 0);
}
.fade-in-right {
	transform: translate(50px, 0);
}
.fade-in-down {
	transform: translate(0, -50px);
}
.scroll-in {
	opacity: 1;
	transform: translate(0, 0);
}

/*H2*/
h2{
	padding: 15rem 0 0;
	font-size:4.8rem;
	font-family:YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	font-weight: 400;
	line-height:1.4;
	text-align:center;
	position: relative;
	letter-spacing: 0.05em;
}
h2::before{
	font-size: 12.4rem;
	line-height: 1;
	color: #B0A1C2;
	font-family: "Cormorant", serif;
	position: absolute;
	transform: translateX(-50%);
	left: 50%;
	top:0;
}
h3{
	font-size: 3.6rem;
	font-family:YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	font-weight: 400;
	line-height:1.4;
}

/*====================================
 HEADER
====================================*/
header{
	width: 100%;
	position: absolute;
}
header h1{
	width: 180px;
	height: 180px;
	position: relative;
	z-index: 10;
}
header h1 img{
	width: 100%;
	border-radius: 0 0 20px 0;
	box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.15);
}
header #gnav ul{
	padding: 3rem 8rem 0 0;
	font-size: 1.8rem;
	display: flex;
	justify-content: flex-end;
	z-index: 1;
	position: relative;
}
#gnav ul li a{
	color: #586166;
}
#gnav ul li a:hover{
	color: #774CAA;
}
#gnav ul li{
	position: relative;
}
#gnav ul li:first-child::before{
	content: none;
}
#gnav ul li::before{
	padding: 0 1rem;
	content: '｜';
	color: #ccc;
}

/*====================================
 MAIN
====================================*/
section.main{
	padding: 30rem 0 10rem;
	background:url("../images/main.webp") no-repeat center top #F2F3F7;
	background-size: cover;
	position:relative;
	opacity: 1;
}
.main .containers{
	max-width: 100%;
	width: 100%;
}
.main h2{
	font-size: 4.5rem;
	padding: 0;
	text-align: left;
	font-feature-settings: "palt";
}
.main h2 span{
	font-size: 5.8rem;
	color: #774caa;
}
.main .txt-box{
	margin-bottom: 14rem;
	padding: 4rem 4rem 4rem 10vw;
	display: inline-block;
	background: rgba(255,255,255,0.7);
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);
	/*
	padding: 4rem 2rem 4rem 10vw;
	width: 35%;
	*/
}
.main .txt-box p{
	padding: 0 3rem;
	margin-bottom: 2rem;
	font-size: 2.4rem;
	display: inline-block;
	position: relative;
	color: #774caa;
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
}
.main .txt-box p::before,
.main .txt-box p::after{
	content: '－';
	top: 50%;
	transform: translateY(-50%);
	position: absolute;
}
.main .txt-box p::before{
	left: 0;
}
.main .txt-box p::after{
	right:0;
}

/*message**/
.message{
	padding: 10rem 0 18rem;
	background: url("../images/bg_message.webp") no-repeat center top #F2F3F7;
}
.message h2{
	padding: 0 0 4rem;
	text-align: left;
}
.message h2::after{
	width: 200px;
	height: 1px;
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	background: #B0A1C2;
}
.message h2 .sub{
	font-size: 4rem;
}
.message h3{
	margin: 5rem 0;
	font-size: 3rem;
	line-height: 1.8;
	font-feature-settings: "palt";
}
.message p{
	font-size: 1.8rem;
	line-height: 2.4;
}
.message .txt-box{
	position: relative;
	z-index: 10;
}
.message .txt-box figure{
	margin: 18rem 0 0 -18rem;
}
.message .txt-box figure img{
	box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.06);
}
.message-img{
	top: 10rem;
	right: -5rem;
	position: absolute;
	z-index: 1;
}

/*menu*/
.menu{
	padding-bottom: 18rem;
	background: url("../images/bg_menu.webp") no-repeat center top / cover;
}
.menu h2{
	text-align: left;
	padding: 0;
}
.menu h2::before{
	content: 'MENU';
	text-align: right;
	transform: unset;
	right: 0;
	top: unset;
	bottom: -6rem;
}
.menu-box{
	margin-top: 6rem;
	padding: 6rem 6rem 3rem;
	background: #fff;
	border: 2px solid #B0A1C2;
	box-sizing: border-box;
	box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.1);
}
.menu .ttl-box{
	padding: 0 0 0 16rem;
	position: relative;
}
.menu .ttl-box::before{
	width: 12rem;
	height: 12rem;
	content: '';
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	position: absolute;
}
.menu1 .ttl-box::before{
	background: url("../images/menu_icon01.webp") no-repeat left center / contain;
}
.menu2 .ttl-box::before{
	background: url("../images/menu_icon02.webp") no-repeat left center / contain;
}
.menu3 .ttl-box::before{
	background: url("../images/menu_icon03.webp") no-repeat left center / contain;
}
.menu .ttl-box::after{
	font-size: 12.4rem;
	position: absolute;
	color: #f5f5f5;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	font-family:YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
}
.menu1 .ttl-box::after{
	content: '01';
}
.menu2 .ttl-box::after{
	content: '02';
}
.menu3 .ttl-box::after{
	content: '03';
}
.menu .ttl-box h3{
	color: #774CAA;
	position: relative;
	z-index: 1;
}
.menu .ttl-box p span{
	padding: 1rem 2rem;
	font-size: 1.8rem;
	background: #F2F3F7;
	border-radius: 50px;
}
.accordion_btn{
	margin:0 auto 0;
	padding: 1.5rem 0;
	max-width: 160px;
	width: 80%;
	bottom: -5rem;
	font-size: 1.4rem;
	line-height: 1;
	position: relative;
	display: block;
	background: linear-gradient(-45deg, rgba(68,75,79,1) 0%, rgba(88,97,102,1)100%);
	text-align: center;
	text-decoration: none;
	color: #fff;
	box-sizing: border-box;
	cursor: pointer;
	transition: 0.2s;
	border-radius: 100px;
}
.accordion_btn::before{
	font-size: 1.6rem;
	right: 15px;
	top: 50%;
	transform: translateY(-50%);
	content: "＋";
	position: absolute;
	color: #fff;
	margin: auto;
	transition: 0.2s;
}
.accordion_btn::after{
    content: 'Read more';
}
.accordion_btn.is-open::before{
	content: "－";
}
.accordion-item{
	margin-top: 3rem;
	display: none;
}
.menu .txt-box figure img{
	max-width: 400px;
	width: 100%;
}
.menu .txt-box div {
	max-width: 540px;
	width: 100%;
}
.menu .txt-box{
	padding: 6rem 0 3rem;
	border-top: 1px solid #B0A1C2;
	align-items: center;
}
.menu .txt-box ul li{
	padding: 0 0 0 2rem;
	position: relative;
}
.menu .txt-box ul li::before{
	content: '✔';
	color: #774CAA;
	position: absolute;
	left: 0;
	top: 0;
}

/*cv*/
.cv{
	padding: 8rem 0;
	background: url("../images/bg_cv.webp") no-repeat center center / cover;
}
.cv ul,
.main ul{
	gap:2rem;
	font-size: 2.4rem;
	font-weight: bold;
	line-height: 1.3;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}
.cv li,
.main li{
	max-width: 500px;
	width: 85%;
}
.cv li a,
.main li a{
	padding: 3.5rem 0;
	color: #fff;
	display: block;
	border-radius: 6px;
	box-shadow: 0px 6px 0px 0px rgba(0,0,0,0.15);
	transition:  .3s;
}
.cv li:first-child a,
.main li:first-child a{
	line-height: 62px;
	background: url("../images/icon_bubble.webp") no-repeat left 3rem center / 35px 34px, linear-gradient(-45deg, rgba(47,177,41,1) 0%, rgba(102,188,98,1)100%);
}
.cv li:first-child a:hover,
.main li:first-child a:hover{
	background: url("../images/icon_bubble.webp") no-repeat left 3rem center / 35px 34px, linear-gradient(45deg, rgba(47,177,41,1) 0%, rgba(102,188,98,1)100%);
	transform: translate(0px, 6px);
	box-shadow: none;
}
.cv li:last-child a,
.main li:last-child a{
	background: url("../images/icon_hp.webp") no-repeat left 3rem center / 38px 38px, linear-gradient(-45deg, rgba(208,89,121,1) 0%, rgba(222,104,135,1)100%);
}
.cv li:last-child a:hover,
.main li:last-child a:hover{
	background: url("../images/icon_hp.webp") no-repeat left 3rem center / 38px 38px, linear-gradient(45deg, rgba(208,89,121,1) 0%, rgba(222,104,135,1)100%);
	transform: translate(0px, 6px);
	box-shadow: none;
}
.cv li span,
.main li span{
	background: url("../images/arrow_white.svg") no-repeat right 3rem center / 20px 22px;
	display: block;
}


/*voices*/
.voices .container{
	max-width: 95%;
	width: 90%;
}
.voices h2::before{
	content: 'VOICES';
}
.voices .swiper-slide{
	background: linear-gradient(180deg, rgba(255,248,233,1) 0%, rgba(246,233,245,1)100%);
}
.voices .voices-box{
	padding: 4.5rem;
}
.voices .swiper-slide figure{
	text-align: center;
}
.voices .swiper-slide figure img{
	width: 120px;
	height: auto;
}
.voices .swiper-slide dl{
	margin:1rem 0 3rem;
	text-align: center;
	color: #774CAA;
}
.voices .swiper-slide dt{
	margin-bottom: 1rem;
	font-size: 2rem;
	font-weight: bold;
}
.voices .swiper-slide dd span{
	padding:0.25rem 1rem;
	box-sizing: border-box;
	border: 1px solid #774CAA;
}
#coco .voices .swiper{
	padding: 0 2.7rem;
}
#coco .swiper-button-next, #coco .swiper-button-prev{
	width: 55px;
	height: 55px;
	background: rgba(255,255,255,0.8);
	border-radius: 100px;
	box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.15);
}
#coco .swiper-button-prev::after,
#coco .swiper-button-next::after{
	content: '';
	width: 13px;
	height: 14px;
	position: absolute;
	top: 50%;
	left: 50%;
	right: 50%;
	background: url( "../images/arrow_black.svg") no-repeat center center / contain;
	transform: translate(-50%, -50%);
}
#coco .swiper-button-prev::after{
	transform:  translate(-50%, -50%) rotate(180deg);
}

/*online*/
/*準備中のクラス 公開時には外す*/
.online .container::before{
	font-size: 3.6rem;
	line-height: 1.2;
	text-align: center;
	content: 'COMMING SOON';
	font-weight: bold;
	color: #774CAA;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	position: absolute;
	z-index: 100;
}
.online-box{
	padding: 6rem;
	font-size: 1.8rem;
	display: flex;
	justify-content: center;
	align-items: center;
	gap:6rem;
	background: url("../images/bg_online.webp") no-repeat 0 0 / cover;
	box-shadow: -10px 10px 50px 0px rgba(119,76,170,0.4);
	position: relative;
}
/*準備中のクラス 公開時には外す*/
.online-box{
	opacity: 0.4;
}
.online-box::before{
	font-size: 7.6rem;
	color: #B0A1C2;
	content: 'ONLINE SHOP';
	font-family: "Cormorant", serif;
	position: absolute;
	right: 5rem;
	top: -9.5rem;
}
.online h2{
	padding: 0;
	text-align: left;
}
.online figure{
	margin-top: -11rem;	
}
.online .btn{
	max-width: 300px;
	width: 100%;
	text-align: center;
	font-weight: bold;
}
.online .btn a {
	background: url("../images/arrow_white.svg") no-repeat right 2rem center / 13px 14px #774CAA;
	padding: 2rem 0;
	color: #fff;
	display: block;
	box-shadow: 0px 6px 0px 0px rgba(0,0,0,0.15);
	border-radius: 6px;
	transition: all .3s;
}
/*準備中のクラス 公開時には外す*/
.online .btn a {
	cursor:not-allowed;
}
/*公開時にはONにする*/
/*
.online .btn a:hover{
	background: url("../images/arrow_white.svg") no-repeat right 1rem center / 13px 14px #B0A1C2;
}
*/

/*insta*/
.insta{
	background: url("../images/bg_insta.webp") no-repeat center top;
	background-size: cover;
}
.insta .container{
	max-width: 95%;
	width: 90%;
}
.insta h2{
	padding: 0;
	font-size: 12.4rem;
	color: rgba(119,76,170,0.6);
	font-family: "Cormorant", serif;
}
.insta-info{
	text-align: center;
	color: rgba(119,76,170,1);
}
.insta-info span{
	padding: 1rem;
	border: 1px solid #B0A1C2;
}
#coco .swiper-wrapper{
	justify-content: space-between;
}

#coco .insta .swiper-slide{
	width: 24% !important;
}
#coco .insta iframe{
	border: none !important;
	max-width:100% !important;
	min-width:100% !important;
	margin:0 !important;
}
/*
#coco .insta .Header,
#coco .insta .Feedback,
#coco .insta .SocialProof,
#coco .insta Footer{
	display: none !important;
}
*/

/*faq*/
.faq{
	background: url("../images/bg_faq.webp") no-repeat left bottom;
}
.faq .container{
	max-width: 900px;
}
.faq h2::before{
	content: 'FAQ';
}
.faq dt{
	margin-bottom: 3rem;
	padding: 2rem 3rem 2rem 7rem;
	font-size: 1.8rem;
	color: #fff;
	background: #586166;
	position: relative;
}
.faq dt::before{
	font-size: 3.6rem;
	line-height: 1;
	font-family:YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	content: 'Q';
	color: #DEC2FF;
	position: absolute;
	left: 2rem;
	top: 50%;
	transform: translateY(-50%);
}
.faq dd{
	padding-left: 7rem;
	position: relative;
}
.faq dd::before{
	font-size: 3.6rem;
	line-height: 1;
	font-family:YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	content: 'A';
	left: 2rem;
	top: 0;
	position: absolute;
}


/*====================================
 FOOTER
====================================*/
/*footer*/
footer{
	padding: 25rem 0 8rem;
	background: linear-gradient(180deg, rgba(246,233,245,0.6) 0%, rgba(228,217,242,0.6)100%);
	position: relative;
}
footer::before{
	content: 'ACCESS';	
	font-size: 12.4rem;
	line-height: 1;
	color: #B0A1C2;
	font-family: "Cormorant", serif;
	position: absolute;
	transform: translateX(-50%);
	left: 50%;
	top:8rem;
}
.gmap iframe {
  height: 400px;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  border: none;
  vertical-align: bottom;
}
footer h2{
	padding: 0 0 4rem;
	text-align: left;
}
footer .container{
	display: flex;
	justify-content: space-between;
}
footer .txt-box{
	max-width: 420px;
	width: 100%;
	order: 1;
}
footer figure{
	order: 2;
}
footer table{
	font-size: 1.8rem;
}
footer th, footer td{
	padding: 1.5rem 1rem;
	border-bottom: 1px solid #ddd;
}
footer tr:last-child th,
footer tr:last-child td{
	border-bottom: none;
}
footer th{
	width: 30%;
}
footer .copy{
	margin-top: 10rem;
	font-size: 1.2rem;
	text-align: center;
}
/*pagescroll*/
#scrollUp {
    bottom: 0;
    right: 0;
	z-index: 1000;
}
#scrollUp img{
	opacity: 0.7;
}