@charset "utf-8";

.flexbox { display:flex; flex-wrap:wrap; }
.aromic.store a { color:#3036ad; }



/*==============================
	タイトル　h2~
==============================*/
/*h2*/
.aromic.store h2 { margin:1em auto 3em; text-align:center; font-size:1.2em; font-weight:500; line-height:1.4em; }
.aromic.store h2 p { display:inline-block; padding:0 1em .6em; border-bottom:1px dashed; }
.aromic.store h2 i { margin-right:.2em; font-family:var(--font-logo); font-style:normal; font-size:1.2em; letter-spacing:1px; color:#595757; }

/*h3*/
.aromic.store h3 { margin:1.6em auto .6em; color:var(--aromic); }


@media screen and (max-width:450px) {
.aromic.store h2 { margin:.6em auto 2em; font-size:1.1em; }
.aromic.store h2 p { padding:0; font-size:1.1em; border:none; }
.aromic.store h2 p > * { display:block; }
.aromic.store h2 i { margin:0; padding:0 .4em .4em; font-size:1.1em; border-bottom:1px dashed; }
.aromic.store h2 span { margin-top:.4em; }
.aromic.store h3 { text-align:center; }
}



/*==============================
	リンク
==============================*/
.aromic.link { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:stretch; width:calc(100% - 2em); max-width:800px; margin:0 auto 2em; }
.aromic.link li { display:flex; align-items:stretch; width:calc(100%/2 - .4em); }
.aromic.link li:nth-of-type(n+3) { margin-top:1em; }
.aromic.link a { display:block; padding:.6em; line-height:1.4em; color:var(--txt); border:.4em solid var(--aromic-bg); border-radius:.2em; }
.aromic.link a:hover { background:var(--aromic-bg); }
.aromic.link b { display:block; color:var(--aromic); }
.aromic.link p { margin-top:.2em; font-size:.96em; }
.aromic.link span { display:block; margin-top:.4em; text-align:right; font-size:.9em; font-feature-settings:'palt'; color:var(--link); }


@media screen and (max-width:700px) {
.aromic.link { font-size:.96em; }
}

@media screen and (max-width:600px) {
.aromic.link p { display:none; }
}



/*==============================
	お知らせ
==============================*/
.store > .news { width:calc(100% - 2em); max-width:800px; margin:auto; padding:1em; font-size:.9em; background:rgba(var(--txt-red),.06); }
.store > .news + * { margin-top:2em; }

.store > .news dt { margin-bottom:.4em; padding-bottom:.2em; line-height:1.6em; border-bottom:1px solid; }
.store > .news dt:nth-of-type(n+2) { margin-top:1em; }
.store > .news dt time { position:relative; top:-.05em; margin-right:.4em; font-size:.9em; color:var(--txt); }
.store > .news dt p { display:inline-block; color:#333; }

.store > .news dd { font-size:.96em; line-height:1.6em; }
.store > .news dd b { color:rgb(var(--txt-red)); }
.store > .news dd a { margin:0 .2em; padding-right:.6em; }
.store > .news dd a:after {
	position:relative;
	top:50%;
	left:.3em;
	content:'';
	display:inline-block;
	width:.4em;
	height:.4em;
	border-top:1px solid;
	border-right:1px solid;
	transform:translate(-25%,-50%) rotate(45deg);
}

.store > .news ul {	display:flex;	flex-wrap:wrap;	justify-content:flex-start;	align-items:stretch;	margin-top:.6em;	padding-bottom:.4em; }
.store > .news ul::-webkit-scrollbar { height:.3em; }
.store > .news ul::-webkit-scrollbar-track { background:#ddd; border-radius:1em; }
.store > .news ul::-webkit-scrollbar-thumb { border-radius:5px; background:#bbb; }
.store > .news li { padding:.4em; line-height:1.4em; background:var(--aromic-bg); }
.store > .news li i { display:inline-block; width:5.2em; font-style:normal; }
.store > .news ul + p { margin-top:.6em; }


@media screen and (min-width:701px) {
.store > .news li { width:calc(100%/4 - .3em); margin-left:.4em; }
.store > .news li:nth-of-type(4n+1) { margin-left:0; }
.store > .news li:nth-of-type(n+5) { margin-top:.4em; }
}

@media screen and (min-width:501px) and (max-width:700px) {
.store > .news li { width:calc(100%/3 - .2em); margin-left:.3em; }
.store > .news li:nth-of-type(3n+1) { margin-left:0; }
.store > .news li:nth-of-type(n+4) { margin-top:.3em; }
}

@media screen and (max-width:500px) {
.store > .news ul { display:block; overflow-x:scroll; white-space:nowrap; }
.store > .news li { display:inline-block; height:11.2em; padding:.6em .8em; vertical-align:top; white-space:normal; }
.store > .news li:nth-of-type(n+2) { margin-left:.2em; }
}

@media screen and (min-width:426px) {
.store > .news li { font-size:.9em; }
}

@media screen and (max-width:425px) {
.store > .news,
.store > .news ul { font-size:13px; }
}



/*==============================
	Newshop
==============================*/
.aromic.store p.newshop { text-align:center; font-family:var(--font-logo); letter-spacing:1px; color:var(--aromic); }


@media screen and (min-width:451px) {
.aromic.store p.newshop { margin-bottom:-.8em; }
}

@media screen and (max-width:600px) {
.aromic.store { font-size:.9em; }
}



/*==============================
	Close
==============================*/
.aromic.store section.close > h2:after,
.aromic.store section.close > div,
.aromic.store section.close > dl { display:none!important; }

.aromic.store section.close > h2 { margin-top:0; padding:1em; background:#ddd; }
.aromic.store section.close > h2 p { padding:0; border:none; }

.aromic.store p.close { text-align:center; padding:.4em 0; font-feature-settings:'palt'; color:#fff; background:rgb(var(--txt-red)); opacity:.9; }
.aromic.store p.close:after { content:'\3092\3082\3061\307E\3057\3066\9589\5E97\3044\305F\3057\307E\3057\305F'; font-feature-settings:normal; }
.aromic.store p.close.hide { display:none; }



/*==============================
	タブ　Tab
==============================*/
.item-tab *, .item-tab *:before,
.item-tab *:after { box-sizing:border-box; }
.item-tab { width:100%; max-width:1200px; margin:2em auto 0; }
.item-tab .tabpanels { border-top:1px solid #aaa; }

.item-tab > input[type='radio'] { display:none; margin:0; padding:0; outline:none; background:none; border:none; border-radius:0; appearance:none; }
.item-tab > input:first-child:checked ~ .tabpanels > .panel:first-of-type,
.item-tab > input:nth-child(3):checked ~ .tabpanels > .panel:nth-of-type(2),
.item-tab > input:nth-child(5):checked ~ .tabpanels > .panel:nth-of-type(3),
.item-tab > input:nth-child(7):checked ~ .tabpanels > .panel:nth-of-type(4),
.item-tab > input:nth-child(9):checked ~ .tabpanels > .panel:nth-of-type(5) { display:block; }
.item-tab > label {
	display:inline-block;
	margin-right:1%;
	padding:1.2em 0;
	text-align:center;
	background:rgba(var(--aromic-rgb),.08);
	border:1px solid transparent;
	border-bottom:0;
	box-sizing:border-box;
	cursor:pointer;
	transition:.3s;
}
.item-tab > label a { display:block; color:#333; }
.item-tab > label span { display:block; margin-bottom:.4em; font-size:.9em; }
.item-tab > label:hover,
.item-tab > label a:hover,
.item-tab > input:focus + label { background:rgba(var(--aromic-rgb),.2); }
.item-tab > input:checked + label { margin-bottom:-2px; color:var(--txt); background:#fff; border-color:#aaa; border-bottom:2px solid #fff; z-index:1; }


@media screen and (min-width:401px) {
.item-tab > label { width:calc(92%/5); }
.item-tab > label:nth-of-type(5n+1) { margin-left:2%; }
.item-tab > label:nth-of-type(5n+5) { margin-right:2%; }
}

@media screen and (max-width:400px) {
.item-tab > label { width:calc(92%/5); }
.item-tab > label:nth-of-type(5n+1) { margin-left:2%; }
.item-tab > label:nth-of-type(5n+5) { margin-right:2%; }
}

@media screen and (max-width:370px) {
.item-tab > label { font-size:.9em; }
}



/*==============================
	パネル　Panel
==============================*/
.item-tab .panel { display:none; width:96%; margin:auto; padding:2em 2em 0; }

.item-tab .panel .panel-tab { justify-content:center; width:100%; margin:0 auto 2em; font-size:.96em; }
.item-tab .panel .panel-tab li { width:calc(100%/4); max-width:8em; margin:0 .5em 1em; }
.item-tab .panel .panel-tab li a { display:block; text-align:center; padding:1em 0; color:#555; background:rgba(0,0,0,.08); border-radius:3em; }
.item-tab .panel .panel-tab li a:hover { background:none; }

.item-tab .panel section:nth-of-type(n+2) { margin-top:2em; padding-top:1.2em; border-top:1px solid; }
.item-tab .panel section.biz h2:after {
 content:'\696D\52D9\7528\5929\7136\30A2\30ED\30DE\5B9A\984D\30D7\30E9\30F3+aroma\53D6\6271\5E97\8217';
 display:block;
 width:100%;
 max-width:22em;
 margin:1em auto 0;
 padding:.4em 0 .3em;
 font-size:14px;
 text-align:center;
 line-height:1.2em;
 background:var(--aromic-bg);
}

.item-tab .panel div,
.item-tab .panel dl { align-items:flex-start; }

.item-tab .panel div { margin-bottom:2em; }
.item-tab .panel div > picture { width:56%; }
.item-tab .panel div > picture img { display:block; width:100%; }
.item-tab .panel div > iframe { width:calc(100% - 60%); height:26vw; max-height:300px; margin-left:4%; }

.item-tab .panel dl { padding:.4em; line-height:1.6em; }
.item-tab .panel dl dt,
.item-tab .panel dl dd { margin-bottom:1em; }
.item-tab .panel dl dt { width:9em; text-align:center; background:#eee; }
.item-tab .panel h4 + dl dt { background:var(--aromic-bg); }
.item-tab .panel dl dd { width:calc(100% - 10em); margin-left:1em; }
.item-tab .panel dl dd + dd { margin-top:-.4em; }
.item-tab .panel dl dd span { display:block; width:4em; margin:.2em 0; padding-top:.1em; line-height:1.2em; letter-spacing:1px; text-align:center; border:1px solid; }
.item-tab .panel dl dd a { padding-right:.6em; }
.item-tab .panel dl dd a:after {
	position:relative;
	top:.05em;
	left:.3em;
	content:'';
	display:inline-block;
	width:.4em;
	height:.4em;
	border-top:1px solid;
	border-right:1px solid;
	transform:translate(-25%,-50%) rotate(45deg);
}
.item-tab .panel dl dd button { margin-right:.6em; background:#fff; border:none; }
.item-tab .panel dl dd button a { font-size:1.2em; font-weight:700; color:var(--aromic); }
.item-tab .panel dl dd del { margin:0 .2em; color:#bbb; }

p.info { word-break:normal; word-wrap:normal; font-size:.96em; line-height:1.6em; color:#c44040; }
p.info:before { content:'\203B'; }
p.info > a { margin:0 .4em; border-bottom:1px solid; }

.item-tab .panel dl dd .undefined { display:none; }


@media screen and (max-width:767px) {
.item-tab .panel { padding:1.6em 1em 0; }
.item-tab .panel > dl { font-size:.9em; }
}

@media screen and (max-width:500px) {
.item-tab .panel div { margin-bottom:1em; }
.item-tab .panel div > picture { width:100%; }
.item-tab .panel div > iframe { width:100%; height:36vw; margin:1em auto 0; }
}

@media screen and (min-width:451px) {
.item-tab .panel dl dd + dd { margin-left:11em; }
}

@media screen and (max-width:450px) {
.item-tab .panel section.biz h2:after { max-width:14em; margin-top:.6em; }
.item-tab .panel dl dt { width:100%; margin:0; }
.item-tab .panel dl dd { width:100%; margin:.4em auto 1em; }
.item-tab .panel dl dd:last-of-type { margin-bottom:0; }
.item-tab .panel dl dd button a { font-size:1.2em; }
}

@media screen and (max-width:400px) {
.item-tab .panel .panel-tab { margin-bottom:1em; }
.item-tab .panel .panel-tab li a { padding:.8em 0; }
.item-tab .panel > section.biz:before { margin:auto; font-size:.8em; }
}

@media screen and (max-width:370px) {
.item-tab .panel { padding:1.6em .4em 0; }
.item-tab .panel .panel-tab { font-size:.9em; }
}



/*==============================
	手づくりアロマ体験ラボ
==============================*/
#aroma-labo { margin:50px auto 0; color:#462712; }
#aroma-labo .inline { width:1000px; margin:0 auto; }
#aroma-labo .t-center { text-align:center; }
#aroma-labo .t-line {	width:90%;	margin:0 auto;	text-align:center;	border-top:2px solid; }
#aroma-labo .float .inline { width:100%!important; }
#aroma-labo .bg { background:url(../store/image/bg.png) no-repeat; }

/*first-view*/
#aroma-labo h1 {
	display:inline-block;
	margin-bottom:.8em;
	font-size:160%;
	font-weight:700;
	line-height:1.5em;
	letter-spacing:10px;
	border-bottom:5px solid;
}
#aroma-labo h1 + p {
	margin-bottom:1.5em;
	font-size:95%;
	font-weight:700;
	line-height:1.3em;
	letter-spacing:5px;
}
#aroma-labo h1 + p br { display:none; }
#aroma-labo img { display:block; width:100%; margin:0 auto; }

/*message*/
#aroma-labo p.message {
	padding:5%;
	text-align:center;
	font-size:100%;
	line-height:1.8em;
	word-break:keep-all;
	word-wrap:break-word;
	box-sizing:border-box;
}

/*menu*/
#aroma-labo .menu { padding:5% 2%; box-sizing:border-box; }
#aroma-labo .menu .inline { text-align:center; }
#aroma-labo h2 {
	display:inline-block;
	margin-bottom:1.5em;
	font-size:140%;
	line-height:1.5em;
	letter-spacing:5px;
	border-bottom:4px solid;
}
#aroma-labo h3 {
	display:inline-block;
	margin-bottom:.5em;
	font-size:110%;
	line-height:1.5em;
	border-bottom:2px solid;
}
#aroma-labo .menu h3 + p { font-size:90%; line-height:1.5em; }

#aroma-labo .menu .clearfix { width:96%; margin:0 auto; }

#aroma-labo .menu .menu-list { float:left; width:calc(98%/2); }
#aroma-labo .menu .menu-list:nth-of-type(2n+1) { margin-right:2%; }
#aroma-labo .menu .menu-list:nth-of-type(n+3) { margin-top:2%; }

#aroma-labo .menu li { float:left; margin-top:2%; }
#aroma-labo .menu li img { width:100%; }
#aroma-labo .menu li:first-of-type { width:40%; }
#aroma-labo .menu li:last-of-type { width:58%; margin-left:2%; }
#aroma-labo .menu li:last-of-type p:first-of-type { margin-bottom:1em; font-size:85%; line-height:1.5em; }

#aroma-labo .menu .time,
#aroma-labo .menu .price { font-size:150%; }
#aroma-labo .menu .price { margin-top:.2em; text-align:left; color:#DE1B23; }
#aroma-labo .menu .price:after {
	content:"(\7A0E\5225)";
	font-size:50%;
}
#aroma-labo .menu p i {
	display:inline-block;
	position:relative;
	top:-.3em;
	width:4.5em;
	margin-right:.5em;
	padding:.4em .6em;
	text-align:center;
	font-size:50%;
	font-weight:500;
	font-style:normal;
	border:solid 1px;
}
#aroma-labo .menu p span { font-size:70%; font-weight:600; }

/*flow*/
#aroma-labo .flow { margin:5% auto; }
#aroma-labo .flow .t-line { margin:4% auto 2%; }
#aroma-labo .flow .t-center + .t-line { margin:2% auto 1%; }
#aroma-labo .flow h4 { margin-top:-12px; }
#aroma-labo .flow h4 img { width:100px; }
#aroma-labo .flow .t-line + p {
	padding:0 .5em;
	text-align:center;
	line-height:1.5em;
	word-break:keep-all;
	word-wrap:break-word;
}
#aroma-labo .flow ul { width:100%; margin:2% auto; }
#aroma-labo .flow ul:last-of-type { margin-bottom:0; }
#aroma-labo .flow li { float:left; width:calc(98%/2); }
#aroma-labo .flow li:first-of-type { margin-right:2%; }

/*scene*/
#aroma-labo .scene { padding:5% 0; }
#aroma-labo .scene ul { margin:0 4%; }
#aroma-labo .scene li { float:left; width:calc(90%/5); margin:1%; }

/*store*/
#aroma-labo .store { margin:5% auto; }
#aroma-labo .store h3 { margin-bottom:1em; letter-spacing:1px; }

#aroma-labo .store .clearfix { width:96%; margin:0 auto; }

#aroma-labo .store .float { float:left; }
#aroma-labo .store .float:first-of-type { width:40%; }
#aroma-labo .store img { margin-bottom:5%; }
#aroma-labo .store iframe { width:100%; height:250px; margin-bottom:10%; }
#aroma-labo .store iframe.iframe-sp { display:none; }
#aroma-labo .store .float:last-of-type { width:58%; margin-left:2%; }

#aroma-labo .store dl {
	line-height:1.5em;
	font-size:95%;
	word-break:keep-all;
	word-wrap:break-word;
}

#aroma-labo .store dt,
#aroma-labo .store dd { float:left; margin-bottom:2%; }
#aroma-labo .store dt { width:30%; text-align:center; background:#eee; }
#aroma-labo .store dd { width:68%; margin-left:2%; }
#aroma-labo .store dd span {
	display:block;
	width:3.5em;
	margin:.2em 0 .1em;
	text-align:center;
	font-size:80%;
	line-height:1.5em;
	color:#fff;
	background:#462712;
}

#aroma-labo .store a.labo-form {
	position:relative;
	display:block;
	width:12em;
	margin-bottom:.2em;
	text-align:center;
	font-size:90%; 
	color:#fff;
	background:#1E817D;
	border-radius:50px;
}
#aroma-labo .store a.labo-form:after {
	position:absolute;
	top:50%;
	right:15px;
	content:'';
	display:block;
	width:6px;
	height:6px;
	border-top:1px solid;
	border-right:1px solid;
	transform:translate(-25%,-50%) rotate(45deg);
}
#aroma-labo .store a.labo-form .svg {
	width:1em;
	height:1em;
	margin:0 0 -2px 5px;
}
#aroma-labo .store a.labo-form .svg path { fill:#fff; }
#aroma-labo .store a.labo-form:hover { background:#32918c; }
#aroma-labo .store a.tel { font-size:110%; letter-spacing:1px; color:#1E817D; }
#aroma-labo .store a.tel:hover { color:#32918c; }

@media(max-width:1017px){
#aroma-labo .inline { width:100%; }
#aroma-labo .flow ul { width:96%; }
}
@media(max-width:800px){
#aroma-labo h1 { font-size:140%; letter-spacing:5px; }
#aroma-labo h1 + p { font-size:90%; letter-spacing:2px; }
#aroma-labo h2 { font-size:130%; }
#aroma-labo p.message { font-size:90%; }
#aroma-labo .menu { padding:10% 0; }
#aroma-labo .menu h3 { font-size:100%; }
#aroma-labo .flow { margin:10% auto; }
#aroma-labo .scene { padding:10% 0; }
#aroma-labo .store { margin:10% auto; }
#aroma-labo .menu h3 + p,
#aroma-labo .menu li:last-of-type p:first-of-type { font-size:80%; }
#aroma-labo .menu .time,
#aroma-labo .menu .price { font-size:120%; }
#aroma-labo .menu p i { padding:.2em .4em; }
#aroma-labo .flow .t-line { margin:6% auto 2%; }
#aroma-labo .scene li { width:calc(92%/4); }
#aroma-labo .store .float { font-size:90%; }
#aroma-labo .store a.labo-form .svg { margin:0 0 -1px 3px; }
}
@media(max-width:640px){
#aroma-labo { margin:30px auto 0; }
#aroma-labo .store .float { width:100%!important; margin:0!important; }
#aroma-labo .store .float:first-of-type { margin-bottom:2%!important; }
#aroma-labo .store .t-center + .clearfix + .clearfix,
#aroma-labo .store .t-center + .clearfix + .clearfix + .clearfix { margin-top:2%; }
#aroma-labo .store img,
#aroma-labo .store iframe { float:left; margin-bottom:1%; }
#aroma-labo .store img { width:48%; }
#aroma-labo .store iframe { width:50%; height:auto; margin-left:2%; }
}
@media(max-width:600px){
#aroma-labo .menu { padding:10% 5%; }
#aroma-labo .menu .menu-list { width:100%; margin-bottom:4%; }
#aroma-labo .menu .menu-list:nth-of-type(n+3) { margin-top:0; }
#aroma-labo .menu .menu-list:last-of-type { margin-bottom:0; }
#aroma-labo .flow .t-line + p { font-size:90%; }
#aroma-labo .store a.labo-form { padding:.2em 0; }
}
@media(max-width:550px){
#aroma-labo .store img { width:55%; }
#aroma-labo .store iframe { width:43%; }
}
@media(max-width:500px){
#aroma-labo p.message { text-align:left; }
#aroma-labo h1 { font-size:130%; letter-spacing:3px; }
#aroma-labo h2 { margin-bottom:1em; font-size:120%; }
#aroma-labo .store dt { width:35%; }
#aroma-labo .store dd { width:63%; }
#aroma-labo .scene li { width:calc(94%/3); }
}
@media(max-width:450px){
#aroma-labo h1 + p br { display:block; }
}
@media(max-width:400px){
#aroma-labo p.message { font-size:80%; }
#aroma-labo .menu { padding:15% 5%; }
#aroma-labo .flow { margin:15% auto; }
#aroma-labo .scene { padding:15% 0; }
#aroma-labo .store { margin:15% auto; }
#aroma-labo .store dt,
#aroma-labo .store dd { width:100%; }
#aroma-labo .store dd { margin:0 auto 4%; }
#aroma-labo .store a.labo-form {
	width:80%;
	margin:0 auto .4em;
	padding:.3em 0;
	font-size:100%;
}
#aroma-labo .store img { width:100%; }
#aroma-labo .store iframe.iframe-pc { display:none; }
#aroma-labo .store iframe.iframe-sp {
	display:block;
	width:100%;
	height:100px;
	margin:1% 0 0;
}
}