@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;
  margin-top: 1.5em;
}

/*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 (max-width:768px) {
  #aboutus h1 {
    font-size: 2.2em;
    letter-spacing: .1em;
    margin-top: 0.5em;
  }
}


/*==============================
	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;
  }
}