@charset'utf-8';


/*==============================
	common
==============================*/
#aboutus { margin-bottom:2em;
  
}
#aboutus > section:nth-of-type(n+2) { margin-top:4em; }
#aboutus > section:nth-of-type(n+3) { margin-top:8em; }

/*link*/
#aboutus a[target='_blank'] svg { margin-left:.2em; width:.8em; height:.7em; stroke:var(--link); }

/*button*/
#aboutus button { display:block; margin:auto; text-align:center; line-height:1em; letter-spacing:1px; color:var(--aromic); background:none; border:1px solid; border-radius:10em; }
#aboutus #news button { margin-top:2em; }
#aboutus button a { display:block; padding:.8em 1em; color:var(--aromic); border-radius:10em; }


@media screen and (max-width:768px) {
#aboutus > section:nth-of-type(n+3) { margin-top:6em; }
}

@media screen and (max-width:425px) {
#aboutus { font-size:.9em; }
}



/*==============================
	title
==============================*/
/*h1*/
#aboutus h1 { margin-bottom:2em;text-align:center; font-family:'Marcellus', serif; font-size:2.6em; font-weight:500; line-height:1.8em; letter-spacing:.2em; color:#777; }

/*h2*/
#aboutus h2.sec-ttl { margin-bottom:1.2em; text-align:center; font-family:'Marcellus', serif; font-size:2.2em; font-weight:500; letter-spacing:.1em; color:var(--aromic); }


@media screen and (min-width:1025px) {
#aboutus h1 { margin-bottom:2em; }
}

@media screen and (max-width:768px) {
#aboutus h1 { font-size:2.2em; letter-spacing:.1em; }
}



/*==============================
	header
==============================*/
header { position:relative; width:100%; height:8em; padding:1em 2em; background:rgba(255,255,255,.86); box-shadow:3px 3px 3px rgba(0,0,0,.1); z-index:100; transition:.6s; }
header.scroll {	position:fixed;	top:0!important;	left:0; height:6em; margin-top:0!important;	background:rgba(255,255,255,.9);	z-index:100; }
header.hide { box-shadow:none; transform:translateY(-100%); z-index:0; }
header + * { padding-top:4em; }

header > a svg { display:block; width:auto; height:6em; stroke:none; }
header.scroll > a svg { height:4em; }

header > ul { position:absolute; top:0; bottom:0; right:2em; display:flex; justify-content:flex-end; align-items:center; }
header > ul li { position:relative; margin-right:1.6em; }
header > ul li:last-of-type { margin-right:0; }
header > ul a { display:block; padding:.4em; text-align:center; color:var(--text); }
header > ul a > * { display:block; }
header > ul b { font-size:1.4em; letter-spacing:1px; color:var(--aromic); }
header > ul span {text-decoration:underline; }


@media screen and (max-width:1440px) {
header { height:7em; }
header > a svg { height:5em; }
}

@media screen and (max-width:1024px) {
header > ul { right:2vw; }
header > ul li { margin-right:.2vw; }
}

@media screen and (max-width:768px) {
header { height:6em; padding:1em; font-size:.9em; }
header.scroll {	height:5em; padding:.5em 1em; }
header + * { padding-top:2em; }
header > a svg { height:4em; }
header > ul b { font-size:1.1em; }
}

@media screen and (max-width:425px) {
header { height:8.4em; padding:.6em 1em; }
header.scroll { height:3.8em; }
header > a { position:absolute; left:0; right:0; display:block; width:5.6em; margin:auto; }
header.scroll > a { display:none; }
header > a svg { height:auto; }
header > ul { top:auto; bottom:0; left:0; right:0;  max-width:24em; margin:auto; }
header > ul li { margin-right:0; }
}



/*==============================
	main vs
==============================*/
#main-vs { position:relative; display:flex; flex-wrap:wrap; align-items:center; text-align:left; }

#main-vs div { position:absolute; left:6vw; right:0; max-width:43em; padding:3em 2em; background:rgba(255,255,255,.9); }
#main-vs h2 { margin-bottom:.4em; font-family:var(--font-min); font-size:1.6em; line-height:1.6em; color:var(--aromic); }
#main-vs h2 span { margin-right:.2em; font-size:.8em; font-feature-settings:'palt'; }
#main-vs p { line-height:1.6em; }
#main-vs button { margin-top:1em; }
#main-vs button a { padding-right:2em; }
#main-vs button a:after {
 position:relative;
 top:-.2em;
 left:.6em;
 content:'';
 display:inline-block;
 width:.6em;
 height:.6em;
 border-top:1px solid;
 border-right:1px solid;
 transform:rotate(135deg);
}

#main-vs picture { width:70vw; aspect-ratio:2/1; margin-left:auto; }
#main-vs img { display:block; width:100%; }


@media screen and (max-width:1440px) {
#main-vs div { left:0; }
}

@media screen and (max-width:1024px) {
#main-vs h2 { font-size:1.4em; }
#main-vs div { position:relative; left:0; max-width:36em; margin:0 auto -4em; padding:2em 1em; }
#main-vs picture { width:100%; }
}

@media screen and (max-width:768px) {
#main-vs h2 { font-size:1.2em; letter-spacing:1px; }
#main-vs div { margin-bottom:1em; padding:1em; }
#main-vs p { text-align:left; }
}

@media screen and (max-width:425px) {
#main-vs h2 { font-size:5.2vw; letter-spacing:0; }
}

#aboutus > #company img{
  width: 120px;
  height: 150px;
    
}
/*==============================
	concept
==============================*/
#aboutus > #concept {
  margin: 0 auto;
  max-width:1400px; 
    position: relative;
  }
#aromicstyle > #aboutus > #concept h1{
    margin: 0 0 0 auto;
    writing-mode: vertical-rl;
  text-align: left;
    font-weight: 600;
    font-size: 6vw;
    padding: .5em .5em;
  color: #35380A;
  font-family: "Lato", "Noto Sans JP", 游ゴシック体, "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;

}
#aboutus > #concept > .main-vs{
  position: relative;
}
#aboutus > #concept > .main-vs >.concept{
    position: absolute;
    bottom: 0;
    left: 5%;
    height: 60vw;
}
#aboutus > #concept > .main-vs > .concept> img{
max-width: 100%;
height: 100%;}

#aboutus > #concept > .main-vs > .problem{
    position: absolute;
    bottom: 0;
    left: 55%;
    height: 40vw;
}
#aboutus > #concept > .main-vs >.problem> img{
max-width: 100%;
height: 100%;}

#concept >.smart-txt { 
  margin: 3em 1em 1em;
  max-width:43em; 
  padding:2em;
  background:rgba(244,249,245,.9); 
border-radius: 10px}
#concept >.smart-txt >h2{
  text-align: center;
  font-family:var(--font-min); 
  color:var(--aromic);
  margin-bottom: .6em;
font-size: 1.3em;
  font-weight: 500;
}
#concept >.smart-txt > p { 
  
  font-size:1em; 
  font-feature-settings:'palt'; }
#concept >.smart-txt > a { 
  color: #1549D4;
  text-decoration: underline;
}
#concept >.smart-txt{ 
  line-height:1.6em; }

#concept > div > div.brand-copy{
  text-align: center;
  padding: 1.8em 1.2em 2.2em;
  margin: 0 auto;
  font-size: 6vw;
  font-weight: 500;
  font-family: "EB Garamond", "Noto Serif JP", "Zen Old Mincho", 游明朝体, "Yu Mincho",
"ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ 明朝", "MS Mincho",
serif;
}


@media screen and (min-width:720px){
  #concept >.smart-txt { 
    margin: 3em auto;}
  #concept > div > div.brand-copy{
  font-size: 1.8em;
  
}
}

  

@media screen and (min-width:1200px){
#aromicstyle > #aboutus > #concept h1{
font-size: 3.5em;
  }
#aboutus > #concept > .main-vs > .concept{
height: 518px;
}
#aboutus > #concept > .main-vs > .problem{
height: 340px;
  top: auto;
bottom: 5%;
  left: auto;
right: 18%;
}
#aboutus > #concept > .main-vs > .problem> img{
max-width: 100%;
height: 100%;}
  
#concept >.smart-txt { 
  position: absolute;
  bottom: 5%;
  left: 18vw;
  max-width:38em; 
  padding:3em 2em;
   }
#concept >.smart-txt >h2{

font-size: 1.5em;
  font-weight: 500;
}
#concept >.smart-txt > p { 
  
  font-size:1em; 
  font-feature-settings:'palt'; }
#concept >.smart-txt{ 
  line-height:1.6em; }  
#concept > div > div.brand-copy{
  font-size: 2em;
  
}
 }

@media screen and (min-width:1400px){
  #concept >.smart-txt { 
  left: 330px;
   }
}

/*==============================
	service
==============================*/
#service ul { counter-reset:number 0; width:calc(100% - 2em); max-width:34em; margin:auto; }
#service li { position:relative; text-align:center; }

#service h3 { margin-bottom:1em; text-align:center; font-size:1.3em; letter-spacing:.1em; }
#service img { display:block; width:auto; height:10em; margin:auto; }
#service p { text-align:left; line-height:1.6em; }

#service button { margin:.4em .4em 0 auto; color:var(--link); border:none; border-bottom:1px solid; border-radius:0; }
#service p + button { margin-top:.6em; }
#service button a { padding:.2em; color:var(--link); }


@media screen and (min-width:1025px) {
#service li { width:calc(100%/2 - 2em); }
#service li:nth-of-type(2n+2) { margin-left:4em; }
}

@media screen and (min-width:769px) and (max-width:1024px) {
#service li { width:calc(100%/2 - 1em); }
#service li:nth-of-type(2n+2) { margin-left:2em; }
}

@media screen and (min-width:769px) {
#service ul { display:flex; flex-wrap:wrap; justify-content:center; max-width:1000px; margin-top:4em; }
#service li:nth-of-type(n+3) { margin-top:6em; }
#service button { display:inline-block; margin:1em .4em 0; }
}

@media screen and (max-width:768px) {
#service li:nth-of-type(n+2) { margin-top:4em; }
}



/*==============================
	product
==============================*/
#product .swiper-container { width:calc(100% - 2em); margin:auto; padding-bottom:2.6em; }
#product li { height:auto; padding:2em; background:#f1f1f1; background:rgba(var(--aromic-bg-rgb),.6); border-radius:1em; }
#product li:not([class$='active']) { opacity:.4; }
#product li[class$='active'] { opacity:1; }

#product li h3 { text-align:center; font-size:1.1em; letter-spacing:.1em; }
#product li img { display:block; width:100%; max-width:160px; margin:1.2em auto 1em; }
#product li p { line-height:1.6em; }
#product li button { margin-top:.6em; }
#product a[target='_blank'] svg.i-link { fill:var(--aromic); }


@media screen and (min-width:1441px) {
#product li { display:flex; flex-wrap:wrap; justify-content:center; align-content:flex-start; }
#product li > *:not(button) { width:100%; }
#product li button { width:calc(100%/2 - .3em); max-width:11em; margin:.6em 0 0; }
#product li button:nth-of-type(2n+2) { margin-left:.6em; }
}

@media screen and (max-width:425px) {
#product .swiper-button-prev,
#product .swiper-button-next { display:none; }
}



/*==============================
	company
==============================*/
#company a { color:var(--link); border-bottom:1px solid; }

#company .menu { width:calc(100% - 4em); margin:0 auto 1.6em; text-align:center; }
#company .menu li { display:inline-block; margin-bottom:1em; }
#company .menu li:nth-of-type(n+2) { margin-left:1em; }
#company .menu li a { display:block; padding:.2em; }

#company div { width:calc(100% - 2em); max-width:800px; margin:auto; }
#company div:nth-of-type(n+2) { margin-top:1.6em; padding-top:1.6em; border-top:1px dashed; }
#company div h3 { margin-bottom:.6em; font-size:1.2em; letter-spacing:.1em; color:var(--aromic); }
#company div p, #company div ul, #company div ol, #company div dl { line-height:1.4em; }
#company div p:nth-of-type(n+2), #company div li:nth-of-type(n+2), #company div dd + dd { margin-top:.4em; }
#company div dt:nth-of-type(n+2), #company div *:not(h3) + dl { margin-top:.6em; }
#company div ol li { margin-left:1em; }
#company div dt { margin-bottom:.2em; font-weight:600; }



/*==============================
	message
==============================*/
#message { width:calc(100% - 4em); max-width:62em; margin:auto; padding:3em 2em 2em; box-shadow:.4em .4em .8em rgba(0,0,0,.1); border:1px solid #eee; border-radius:2em; }
#message.ceo{max-width: 800px;padding:2em;} 
#message h2 { margin:0 auto 1.2em; text-align:center; font-size:1.2em; letter-spacing:.1em; color:var(--aromic); }
#message p { font-size:.92em; line-height:1.6em; }
#message p.ceo { max-width: 600px;margin: auto;}
#message p + p { margin-top:.6em; }
#message p span { font-family:var(--font-logo); }
#message .ceo { display:flex; justify-content:flex-end; align-items:flex-end; margin-top:1em; }
#message .ceo p { display:inline-block; text-align:right; color:var(--text); }
#message .ceo img { width:20vw; max-width:120px; margin-left:1em; }


@media screen and (max-width:768px) {
#message { width:calc(100% - 2em); }
}

@media screen and (max-width:425px) {
#message { margin:auto; padding:2em 1em 1em; border-radius:1em; }
#message h2 { margin-bottom:1em; }
}