@charset'UTF-8';
.logo {
  font-family: var(--font-logo)
}

#index-contents h2.ttl {
  margin: 2em auto 1.2em;
  text-align: center;
  font-size: 2.2em
}

#index-contents.top h2.ttl:first-of-type {
  margin-top: 0
}

#index-contents h2.ttl>* {
  display: block;
  font-weight: 400;
  line-height: 1em
}

#index-contents h2.ttl b {
  letter-spacing: .1em;
  color: var(--aromic)
}

#index-contents h2.ttl span {
  margin-top: .8em;
  font-size: .5em;
  letter-spacing: .1em
}

#index-contents button.btn {
  display: block;
  margin: auto;
  text-align: center;
  line-height: 1em;
  letter-spacing: 1px;
  background: 0;
  border: 0;
  border-radius: .2em
}

#index-contents button.btn.box {
  width: calc(100% - 6em);
  max-width: 300px;
  margin-top: 2em
}

#index-contents button.btn a {
  display: block;
  color: var(--txt)
}

#index-contents button.btn.box a {
  padding: 1.2em 0;
  border: 1px solid;
  border-radius: .2em
}

#index-contents button.btn.box a:nth-of-type(n+2) {
  margin-left: 1.6em
}

#index-contents button.btn.box a:not([target='_blank']):after {
  content: '\2192';
  display: inline-block;
  margin-left: .4em
}

#index-contents button.btn.box a:hover:after, #index-contents button.btn.box a:hover svg {
  transform: translate(.3em, 0)
}

@media screen and (max-width:425px) {
  #index-contents h2.ttl {
    margin-bottom: 1em;
    font-size: 1.8em
  }
  #index-contents h2.ttl span {
    letter-spacing: 0
  }
}

#item .price {
  text-align: right
}

#index-contents.top .price {
  margin-top: .6em
}

#index-contents.top .price+.price {
  margin-top: 0
}

#item .price.cost-free:after {
  display: block;
  content: '\9001\6599\7121\6599';
  width: 5em;
  margin: .2em 0 0 auto;
  padding: .3em .4em;
  text-align: center;
  font-size: .9em;
  background: rgba(var(--txt-red), .1)
}

#item .price>* {
  display: inline-block;
  margin: .2em
}

#item .price>span {
  margin-right: .6em
}

#item .price>s {
  text-decoration: line-through
}

#item .price.sale>s+b {
  color: rgb(var(--txt-red))
}

#item .price>*:not(span):after {
  content: '\5186';
  font-size: 12px
}

#item .price:not(.sale)>s:after {
  display: none
}

#item .price>b:after {
  content: '\5186(\7A0E\8FBC)';
  letter-spacing: 1px
}

#index-contents.top #item #diffuser li {
  display: block
}

#index-contents.top #item #diffuser .block5 {
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center
}

#index-contents.top #item #diffuser .block5 li {
  width: calc(100%/2 - 1.2em)
}

#index-contents.top #item #diffuser .block5 li {
  margin-left: .6em
}

#index-contents.top #item #diffuser ul {
  max-width: 1300px
}

#index-contents.top #item #diffuser .diffuser-list {
  padding: 1em;
  margin-bottom: .6em;
  width: calc(100%/2 - 1.2em);
  border-radius: 10px;
  border: 1px #888 solid
}

#index-contents.top #item #diffuser .diffuser-list .diffuser-name {
  display: flex
}

#index-contents.top #item #diffuser .diffuser-list .diffuser-name img {
  width: calc(100%/2 - 5em)
}

#index-contents.top #item #diffuser .diffuser-list .diffuser-name h3 {
  margin: auto auto auto 1em;
  text-align: center
}

#index-contents.top #item #diffuser .diffuser-list ul {
  margin-top: 1em;
  display: flex
}

#index-contents.top #item #diffuser .diffuser-list ul .diffuser-img {
  position: relative;
  width: 30%;
  margin: auto
}

#index-contents.top #item #diffuser .diffuser-list ul .diffuser-img {
  margin: auto
}

#index-contents.top #item #diffuser .diffuser-list ul .description-wrapper {
  width: 70%
}

#index-contents.top #item #diffuser .diffuser-list ul .description-wrapper .spec {
  display: flex;
  justify-content: space-between;
  font-size: .9em;
  margin-bottom: 1em
}

#index-contents.top #item #diffuser .diffuser-list ul .description-wrapper .spec p span {
  border: 1px solid #333;
  margin: .1em .5em .1em 0;
  padding: 0 .5em
}

#index-contents.top #item #diffuser .block5 .diffuser-list ul .description-wrapper .spec a {
  display: inline-block;
  width: auto;
  text-align: right;
  font-size: .9em!important;
  padding: .5em;
  margin: 0 0 0 auto;
  color: #fff;
  background-color: #888;
  border-radius: 50px;
  box-shadow: 2px 2px 2px rgba(3, 3, 3, .4)
}

#index-contents.top #item #diffuser .diffuser-list .description {
  margin-bottom: .5em
}

#index-contents.top #item #diffuser .diffuser-list .grid {
  display: grid;
  margin: .2em auto;
  padding: .2em;
  grid-template-columns: 1.2fr 0.8fr 1fr 1fr;
  grid-gap: 3px;
  grid-template-rows: 20px;
  background-color: #fff
}

#index-contents.top #item #diffuser .diffuser-list .grid.sp {
  display: none
}

#index-contents.top #item #diffuser .diffuser-list .grid1 {
  grid-area: 1/1/2/3;
  font-size: .8em
}

#index-contents.top #item #diffuser .diffuser-list .grid2 {
  grid-area: 1/3/2/4
}

#index-contents.top #item #diffuser .diffuser-list .grid2 small {
  font-size: .8em;
  padding: 0 .4em;
  margin: .1em;
  color: #fff;
  background-color: #d02929;
  display: inline-block
}

#index-contents.top #item #diffuser .diffuser-list .grid3 {
  grid-area: 2/1/3/2;
  font-size: 1.1em;
  font-weight: 700;
  color: #555
}

#index-contents.top #item #diffuser .diffuser-list .grid3::after {
  content: ":"
}

#index-contents.top #item #diffuser .diffuser-list .grid4 {
  text-align: right;
  text-decoration: line-through;
  font-size: .9em;
  margin: auto;
  grid-area: 2/2/3/3
}

#index-contents.top #item #diffuser .diffuser-list .grid5 {
  grid-area: 2/3/3/4;
  color: #d02929;
  font-size: 1.2em
}

#index-contents.top #item #diffuser .diffuser-list .grid6 {
  display: flex;
  width: auto;
  height: auto;
  grid-area: 1/4/3/5
}

#index-contents.top #item #diffuser .diffuser-list .grid6 a {
  color: #fff;
  background-color: #d02929;
  text-align: center;
  margin: auto;
  font-size: .9em!important;
  line-height: 2em;
  padding: .2em;
  border: 1px #d02929 solid;
  border-radius: 50px;
  width: 100%;
  height: 80%;
  box-shadow: 2px 2px 2px rgba(160, 0, 0, .4);
  display: block
}

@media screen and (max-width:1200px) {
  #index-contents.top .list.block5 {
    display: block;
    flex-wrap: wrap;
    justify-content: center;
    width: calc(100% - 4em)
  }
  #index-contents.top #item #diffuser .block5>li {
    margin: 0 auto .6em;
    padding: .8em;
    width: 650px
  }
}

@media screen and (max-width:700px) {
  #index-contents.top #item #diffuser .block5>li {
    margin: 0 auto .6em;
    width: 100%
  }
  #index-contents.top .block3, #index-contents.top .list.block5 {
    display: block;
    flex-wrap: wrap;
    justify-content: center;
    width: calc(100% - 1em)
  }
  #index-contents.top #item #diffuser .diffuser-list ul .description-wrapper .spec {
    display: flex;
    justify-content: space-between;
    margin-bottom: .5em
  }
  #index-contents.top #item #diffuser .block5 .diffuser-list ul .description-wrapper .spec a {
    display: inline-block;
    width: auto;
    text-align: right;
    margin: 0 0 0 auto;
    border-radius: 50px
  }
  #index-contents.top #item #diffuser .diffuser-list .description-wrapper .grid3 {
    font-size: 1em
  }
  #index-contents.top #item #diffuser .diffuser-list .description-wrapper .grid4 {
    font-size: .8em
  }
  #index-contents.top #item #diffuser .diffuser-list .description-wrapper .grid5 {
    font-size: 1.1em
  }
  #index-contents.top #item #diffuser .diffuser-list .description-wrapper .grid6 a {
    font-size: .8em!important
  }
}

@media screen and (max-width:600px) {
  #index-contents.top #item #diffuser .diffuser-list ul {
    margin-top: .5em
  }
  #index-contents.top #item #diffuser .diffuser-list .grid.sp {
    display: grid
  }
  #index-contents.top #item #diffuser .diffuser-list .grid.pc {
    display: none
  }
  #index-contents.top #item #diffuser .diffuser-list .diffuser-name {
    display: block;
    text-align: center
  }
  #index-contents.top #item #diffuser .diffuser-list .diffuser-name img {
    width: 40%
  }
  #index-contents.top #item #diffuser .diffuser-list ul .diffuser-img {
    width: 35%
  }
  #index-contents.top #item #diffuser .diffuser-list .diffuser-img {
    margin: 0
  }
  #index-contents.top #item #diffuser .diffuser-list .diffuser-name h3 {
    margin: auto
  }
  #index-contents.top #item #diffuser .diffuser-list ul .description-wrapper .spec {
    display: block
  }
  #index-contents.top #item #diffuser .block5 .diffuser-list ul .description-wrapper .spec a {
    margin: .5em auto 0 0
  }
  #index-contents.top #item #diffuser .diffuser-list .grid.sp {
    grid-template-columns: .8fr .6fr .8fr 1fr
  }
  #index-contents.top #item #diffuser .block5 .diffuser-list ul .description-wrapper .spec a {
    display: block;
    width: fit-content;
    text-align: right;
    font-size: .9em!important;
    padding: .5em;
    border-radius: 50px
  }
  #index-contents.top #item #diffuser .diffuser-list ul .description-wrapper .description {
    font-size: 1em
  }
  #index-contents.top #item #diffuser .diffuser-list .grid1 {
    font-size: 1em
  }
  #index-contents.top #item #diffuser .diffuser-list .grid2 {
    font-size: 1em
  }
  #index-contents.top #item #diffuser .diffuser-list .grid3 {
    font-size: 1.2em
  }
  #index-contents.top #item #diffuser .diffuser-list .grid4 {
    font-size: 1em
  }
  #index-contents.top #item #diffuser .diffuser-list .grid5 {
    font-size: 1.4em
  }
  #index-contents.top #item #diffuser .diffuser-list .grid6 button {
    font-size: 1.2em!important
  }
}

@media screen and (max-width:520px) {
  #index-contents.top #item #diffuser .diffuser-list ul .description-wrapper .spec p span {
    display: inline-block
  }
  #index-contents.top #item #diffuser .diffuser-list ul .description-wrapper .description {
    font-size: .9em
  }
  #index-contents.top #item #diffuser .diffuser-list .grid1 {
    font-size: 1em
  }
  #index-contents.top #item #diffuser .diffuser-list .grid2 {
    font-size: 1em
  }
  #index-contents.top #item #diffuser .diffuser-list .grid3 {
    font-size: 1em
  }
  #index-contents.top #item #diffuser .diffuser-list .grid4 {
    font-size: .8em
  }
  #index-contents.top #item #diffuser .diffuser-list .grid5 {
    font-size: 1.2em
  }
  #index-contents.top #item #diffuser .diffuser-list .grid6 a {
    font-size: 1em!important
  }
}

@media screen and (max-width:450px) {
  #index-contents.top #item #diffuser .diffuser-list .grid.sp {
    grid-template-columns: .8fr .6fr .8fr .8fr
  }
}

@media screen and (max-width:420px) {
  #index-contents.top #item #diffuser .diffuser-list ul .diffuser-img {
    width: 45%
  }
  #index-contents.top #item #diffuser .diffuser-list .grid1 {
    font-size: .8em
  }
  #index-contents.top #item #diffuser .diffuser-list .grid2 {
    font-size: 1em
  }
  #index-contents.top #item #diffuser .diffuser-list .grid3 {
    font-size: .8em
  }
  #index-contents.top #item #diffuser .diffuser-list .grid4 {
    font-size: .7em
  }
  #index-contents.top #item #diffuser .diffuser-list .grid5 {
    font-size: .8em
  }
  #index-contents.top #item #diffuser .diffuser-list .grid6 a {
    font-size: .8em!important
  }
}
@media screen and (max-width:370px) {
  #index-contents.top .list .{
    width:100%;
  }
  #index-contents.top #item #diffuser .diffuser-list .grid.sp {
    grid-template-columns: .8fr .6fr .7fr .9fr
  }
  #index-contents.top #item #diffuser .diffuser-list .grid2 {
    font-size: .8em
  }
  #index-contents.top #item #diffuser .diffuser-list .grid3 {
    font-size: 12px
  }
  #index-contents.top #item #diffuser .diffuser-list .grid4 {
    font-size: 12px
  }
  #index-contents.top #item #diffuser .diffuser-list .grid5 {
    font-size: 12px
  }
  #index-contents.top #item #diffuser .diffuser-list .grid6 a {
    font-size: 12px!important
  }
}

.aromic.product.category {
  max-width: 1300px;
  padding-bottom: 2em
}

.aromic.product.category #index-contents.top #item>section {
  margin-top: 2em
}

.aromic.product.category #diffuser {
  padding-top: 2em;
  padding-bottom: 2em;
  background-color: #f5f5f5
}

.aromic.product.category .diffuser-list {
  margin-top: 0
}

#aromicstyle.fixed {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0
}

*[data-micromodal-trigger*='modal'] {
  cursor: pointer
}

.modal-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 20000
}

.modal-wrapper:not(.is-open) {
  display: none;
  opacity: 0
}

.modal-wrapper .modal-bg {
  position: absolute;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, .8)
}

.modal-wrapper .modal-content {
  position: absolute;
  left: 50%;
  width: calc(100% - 3em);
  max-width: 800px;
  max-height: 100vh;
  max-height: calc(var(--vh, 1vh) * 100);
  max-height: 84vh;
  background: #fff;
  overflow: scroll;
  transform: translate(-50%, -50%)
}

.modal-wrapper .modal-content p {
  line-height: 1.5em
}

.modal-wrapper .modal-content .ttl {
  margin-bottom: .8em;
  padding-bottom: .2em;
  text-align: center;
  font-size: 1.4em;
  letter-spacing: .1em;
  border-bottom: 1px solid
}

.modal-wrapper .modal-content p:not([class])+p:not([class]), .modal-wrapper .modal-content p:not([class])>span+span {
  display: block;
  margin-top: .3em
}

.modal-wrapper .modal-close {
  cursor: pointer
}

.modal-wrapper .modal-close.window {
  width: auto;
  margin: .2em 0 0 2em;
  padding: 0;
  border: 0;
  border-bottom: 1px solid;
  border-radius: 0;
  cursor: pointer
}

.modal-wrapper .modal-close.text {
  width: 6em;
  margin: 2em auto 0;
  padding: .6em;
  text-align: center;
  line-height: 1em;
  color: var(--link);
  border: 1px solid;
  border-radius: 50vh
}

@media screen and (min-width:426px) {
  .modal-wrapper .modal-content {
    top: 50%;
    padding: 2em
  }
}

@media screen and (max-width:425px) {
  .modal-wrapper .modal-content {
    top: 44%;
    padding: 2em 1em;
    font-size: .9em
  }
  .modal-wrapper .modal-content .ttl {
    font-size: 1.3em
  }
}

[id*='concierge'] .modal-content picture {
  display: block;
  max-width: 300px;
  aspect-ratio: 3/2
}

[id*='concierge'] .modal-content picture img {
  display: block;
  width: 100%
}

[id*='concierge'] .modal-content .tel {
  margin-top: 1em;
  padding: 1em;
  text-align: center;
  background: var(--aromic-bg)
}

[id*='concierge'] .modal-content .tel>* {
  display: block;
  line-height: 1em
}

[id*='concierge'] .modal-content .tel a[href*='tel'] {
  display: block;
  margin-bottom: .4em;
  font-size: 1.6em
}

[id*='concierge'] .modal-content .tel time {
  font-size: .9em
}

@media screen and (min-width:426px) {
  [id*='concierge'] .modal-content picture {
    float: right;
    width: 38vw;
    margin-left: 1em
  }
}

@media screen and (max-width:425px) {
  [id*='concierge'] .modal-content picture {
    width: 60vw;
    margin: 0 auto .6em
  }
}

#drawer-inline {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 4em 0 2em;
  background: #f5f5f5;
  overflow: auto;
  transform: translateY(100%);
  transition: .4s;
  opacity: 0;
  z-index: 100
}

#navTgl:checked~#drawer-inline {
  transform: none;
  opacity: 1
}

#drawer-inline>*:not(.tab-area) {
  width: calc(100% - 2em);
  margin: auto
}

#drawer-inline>*:nth-child(n+2) {
  margin-top: 2em
}

#drawer-inline img {
  width: 100%
}

#drawer-inline a {
  color: var(--txt)
}

#drawer-inline>a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 15em;
  margin: 0 auto 2em 1em;
  padding: .6em 1em;
  background: var(--aromic-bg);
  border-radius: 10em
}

#drawer-inline>a svg {
  width: 2em;
  margin-right: .6em
}

#drawer-inline .search-box input {
  background: #fff;
  border: 1px solid #eee
}

#drawer-inline .info {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  color: #999
}

#drawer-inline .info li {
  width: calc(100%/2 - .3em);
  text-align: center
}

#drawer-inline .info li a {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: .8em 0;
  background: #fafafa;
  border: 1px solid #777;
  border-radius: 50vh
}

#drawer-inline .info li a+a {
  margin-top: .4em
}

#drawer-inline .info li svg {
  width: 1.8em;
  margin-right: .6em
}

#drawer-inline .info li span {
  display: block;
  font-size: 12px
}

#drawer-inline .info+p {
  margin-top: 1em;
  font-size: 12px;
  line-height: 1em
}

#drawer-inline .info.member {
  max-width: 40em
}

#drawer-inline .info li:first-of-type a {
  padding: 1em 0
}

#drawer-inline .info.member li:first-of-type p {
  font-size: 1.06em
}

#drawer-inline .info.member li:nth-of-type(3n+1) {
  width: 100%;
  margin-bottom: .4em
}

#drawer-inline .info.member li.guide a {
  padding: .98em 0;
  background: #fff;
  border-color: transparent;
  border-radius: 2em;
  box-shadow: 0 0 .4em rgba(0, 0, 0, .06)
}

#drawer-inline .info.member li.guide svg {
  width: 2em;
  margin: 0 0 .4em
}

#drawer-inline .info.member li.guide p {
  width: 100%;
  margin-bottom: .4em
}

#drawer-inline .info.contact li {
  display: flex;
  align-content: stretch;
  text-align: left
}

#drawer-inline .info.contact a {
  width: 100%
}

#drawer-inline .info.contact p {
  line-height: 1.2em
}

#drawer-inline .link {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 0
}

#drawer-inline .link li {
  width: calc(100%/2 - .2em)
}

#drawer-inline .link li:nth-of-type(n+3) {
  margin-top: .4em
}

#drawer-inline .link li a {
  display: flex;
  align-items: center;
  padding: 1em .8em;
  text-align: left;
  line-height: 1.5em;
  border-bottom: 1px solid #bbb
}

#drawer-inline .link li:nth-of-type(2n+2) a {
  border-left: 1px solid #bbb;
  border-bottom-left-radius: .4em
}

#drawer-inline .link li a i {
  margin: 0 .3em;
  padding: 0 .6em;
  font-size: 12px;
  font-style: normal;
  font-feature-settings: 'palt';
  background: #fff
}

#drawer-inline .link li a:not([target='_blank']) svg {
  width: 1.6em;
  height: auto;
  margin-right: .6em
}

#drawer-inline .sns {
  padding: 1.4em 1em 1.2em;
  background: #fff
}

#drawer-inline .sns>* {
  line-height: 1em
}

#drawer-inline .sns dt {
  margin-bottom: .8em;
  padding: 0 .4em .6em;
  letter-spacing: .1em;
  border-bottom: 1px solid
}

#drawer-inline .sns dd {
  display: inline-block;
  margin: .4em
}

#drawer-inline .sns a {
  display: flex;
  align-items: center
}

#drawer-inline .sns dd picture {
  display: block;
  width: 1.4em;
  aspect-ratio: 1/1;
  margin-right: .4em
}

#drawer-inline .sns dd picture img {
  display: block;
  width: 100%
}

#drawer-inline .sns dd p {
  display: inline-block
}

@media screen and (max-width:768px) {
  #drawer-inline .link li:nth-of-type(-n+2), #drawer-inline .link li:nth-of-type(n+7) {
    width: 100%
  }
  #drawer-inline .link li:nth-of-type(-n+2) a, #drawer-inline .link li:nth-of-type(n+7) a {
    border-left: none!important;
    border-radius: 0!important
  }
}

@media screen and (max-width:425px) {
  #drawer-inline .info li svg {
    width: 1.6em
  }
  #drawer-inline .info.member li.guide a {
    padding: .74em 0
  }
}

@media screen and (max-width:320px) {
  #drawer-inline {
    font-size: .9em
  }
}

#drawer-inline .tab-area {
  margin-bottom: .6em
}

#drawer-inline .tab-parent {
  margin-bottom: -1px;
  overflow-x: auto;
  white-space: nowrap
}

#drawer-inline .tab-parent::-webkit-scrollbar {
  height: .3em
}

#drawer-inline .tab-parent::-webkit-scrollbar-track {
  margin: 0 2px 0 1em;
  background: #ddd;
  border-radius: 1em
}

#drawer-inline .tab-parent::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: #bbb
}

#drawer-inline .tab-parent ul {
  display: flex;
  width: 49.2em;
  padding: 0 2em;
  white-space: normal
}

#drawer-inline .tab-parent li {
  min-width: 11em;
  padding: 1em .2em;
  background: #d5d5d5;
  border-top-left-radius: .6em;
  border-top-right-radius: .6em;
  cursor: pointer;
  opacity: .7
}

#drawer-inline .tab-parent li.active {
  background: #fff;
  opacity: 1
}

#drawer-inline .tab-parent li:nth-of-type(n+2) {
  margin-left: .4em
}

#drawer-inline .tab-parent li img {
  display: block;
  width: 4em;
  margin: auto
}

#drawer-inline .tab-parent li p {
  margin-top: .6em;
  text-align: center
}

#drawer-inline .tab-child {
  background: #fff
}

#drawer-inline .tab-child>* {
  display: none;
  padding: 1em 1em 2em
}

#drawer-inline .tab-child>*.active {
  display: block
}

#drawer-inline .tab-child .ttl {
  position: relative;
  padding: 1em;
  border-bottom: 1px solid #ddd;
  cursor: pointer
}

#drawer-inline .tab-child .ttl:nth-of-type(n+2) {
  margin-top: .6em
}

#drawer-inline .tab-child .ttl.line+.sub-inline+.ttl {
  margin-top: 2em
}

#drawer-inline .tab-child .ttl:after {
  position: absolute;
  top: calc(50% - 3px);
  right: 1em;
  content: '';
  display: block;
  width: .6em;
  height: .6em;
  border-right: 1px solid;
  border-bottom: 1px solid;
  transform: translate(-25%, -50%) rotate(43deg);
  transition: .4s
}

#drawer-inline .tab-child .ttl.line:after {
  transform: rotate(224deg)
}

#drawer-inline .tab-child .ttl>span {
  display: block;
  width: calc(100% - 1.6em);
  margin-top: .4em;
  font-size: .86em;
  line-height: 1.4em
}

#drawer-inline .tab-child dt {
  width: 100%;
  margin-top: .4em;
  padding: 1em;
  font-weight: 600;
  letter-spacing: 1px
}

#drawer-inline .tab-child dd+dt {
  margin-top: 1em
}

#drawer-inline .tab-child li, #drawer-inline .tab-child dd {
  position: relative;
  line-height: 1.26em;
  background: #f5f5f5
}

#drawer-inline .tab-child li, #drawer-inline .tab-child dd {
  width: calc(100%/2 - 2px);
  margin: 2px 1px 0
}

#drawer-inline .tab-child li:after, #drawer-inline .tab-child dd:after {
  position: absolute;
  top: calc(50% - 1px);
  right: .4em;
  content: '';
  display: block;
  width: .5em;
  height: .5em;
  border-right: 1px solid #aaa;
  border-bottom: 1px solid #aaa;
  transform: translate(-25%, -50%) rotate(-45deg);
  transition: .4s
}

#drawer-inline .tab-child a {
  display: inline-block;
  align-items: center;
  height: 100%;
  max-height: 4em;
  padding: 0.8em 1.2em 1.2em .6em
}

#drawer-inline .tab-child a img {
  width: 3em;
  height: auto;
  margin-right: .4em
}

#drawer-inline .tab-child a img+p {
  width: calc(100% - 3em)
}

#drawer-inline .tab-child a span {
  display: inline-block;
  font-size: .8em;
  color: #cc4a4a
}

#drawer-inline .tab-child .sub-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  height: auto;
  visibility: visible;
  overflow: hidden;
  transition: .6s
}

#drawer-inline .tab-child dl.sub-inline+ul.sub-inline {
  margin-top: 2em
}

#drawer-inline .tab-child .ttl:not(.open)+.sub-inline {
  height: 0;
  visibility: hidden;
  opacity: 0
}

#drawer-inline .tab-child .sub-inline dt:nth-of-type(n+2) {
  margin-top: .4em
}

#drawer-inline .tab-child dl.cat-aroma dt:nth-of-type(1) {
  background: #fff6e8
}

#drawer-inline .tab-child dl.cat-aroma dt:nth-of-type(2) {
  background: #fffce8
}

#drawer-inline .tab-child dl.cat-aroma dt:nth-of-type(3) {
  background: #f5fbe6
}

#drawer-inline .tab-child dl.cat-aroma dt:nth-of-type(4) {
  background: #f0e5f1
}

#drawer-inline .tab-child dl.cat-aroma dt:nth-of-type(5) {
  background: #f9e7ef
}

#drawer-inline .tab-child dl.cat-aroma dt:nth-of-type(6) {
  background: #e9f9ff
}

#drawer-inline .tab-child .cat-name dt {
  font-weight: 600
}

#drawer-inline .tab-child .cat-name dt:after {
  content: '\884C';
  margin-left: .2em;
  font-size: .8em
}

@media screen and (max-width:425px) {
  #drawer-inline .tab-parent ul {
    width: 47.2em;
    padding: 0 1em
  }
  #drawer-inline .tab-child a p {
    font-size: .96em
  }
}

@media screen and (max-width:375px) {
  #drawer-inline .tab-parent li {
    padding: 1em .4em
  }
  #drawer-inline .tab-child li, #drawer-inline .tab-child dd {
    width: 100%
  }
}

#index-contents.top #category {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
  width: calc(100% - 2em);
  max-width: 1160px;
  margin-top: 2em
}

#index-contents.top #category li {
  text-align: center;
  border-left: 1px solid;
  position: relative
}

#index-contents.top #category li:nth-of-type(-n+2) {
  width: calc(100%/2 - .4em);
  border: 0
}

#index-contents.top #category li:nth-of-type(n+3) {
  margin-top: 1em
}

#index-contents.top #category li a {
  display: block;
  padding: .8em .1em;
  border-radius: .2em
}

#index-contents.top #category li a::after {
  position: absolute;
  top: 40%;
  right: 5%;
  text-align: right;
  content: "〉"
}

@media screen and (max-width:500px) {
  #index-contents.top #category li a::after {
    right: 0
  }
}

#index-contents.top #category li:nth-of-type(-n+2) a {
  padding: 1.6em 0;
  background: var(--aromic-bg)
}

#index-contents.top #category li a:hover {
  text-decoration: underline;
  background: 0
}

#index-contents.top #category li a>* {
  display: block;
  line-height: 1em
}

#index-contents.top #category li b {
  margin-bottom: .4em;
  font-size: 1.1em;
  font-weight: 600;
  letter-spacing: 1px
}

#index-contents.top #category li:nth-of-type(n+3) span {
  font-size: .9em
}

#index-contents.top #category li svg {
  margin-left: 3px;
  width: 8px;
  stroke-width: 6px
}

@media screen and (min-width:769px) {
  #index-contents.top #category li {
    width: calc(100%/6)
  }
  #index-contents.top #category.sale li:nth-of-type(n+3) {
    width: calc(100%/6)
  }
  #index-contents.top #category li:nth-of-type(3) {
    border: 0
  }
}

@media screen and (max-width:768px) {
  #index-contents.top #category li {
    width: calc(100%/3)
  }
  #index-contents.top #category:not(.sale) li:nth-of-type(3n) {
    border: 0
  }
  #index-contents.top #category.sale li:nth-of-type(n+6) {
    width: calc(100%/3)
  }
  #index-contents.top #category.sale li:nth-of-type(3), #index-contents.top #category.sale li:nth-of-type(6) {
    border: 0
  }
}

@media screen and (max-width:425px) {
  #index-contents.top #category {
    width: calc(100% - 1.2em);
    margin-top: 1.2em;
    font-size: .8em
  }
  #index-contents.top #category li:nth-of-type(-n+2) {
    width: calc(100%/2 - .3em)
  }
}

@media screen and (max-width:320px) {
  #index-contents.top #category.sale {
    justify-content: center;
    width: calc(100% - .8em)
  }
  #index-contents.top #category.sale li:first-of-type {
    margin-right: .4em
  }
  #index-contents.top #category li:nth-of-type(n+3) span {
    font-size: 12px
  }
}

#index-contents.top .list li a {
  display: block;
  background: #fff
}

#index-contents.top .list li a>picture {
  display: block
}

#index-contents.top .list li a>picture img {
  display: block;
  width: 100%
}

#index-contents.top .list li a>div {
  padding: 1em
}

#index-contents.top .list li p[class] {
  line-height: 1em
}

#index-contents.top .list li p:not([class]) {
  line-height: 1.5em
}

#index-contents.top .list li p+p {
  margin-top: .4em
}

#index-contents.top .list li .icon {
  font-size: .9em
}

#index-contents.top .list li .icon i {
  display: inline-block;
  margin: .2em;
  padding: .3em .4em;
  background: #f5f5f5
}

@media screen and (min-width:1025px) {
  #index-contents.top .list:not([class*='swiper']) {
    max-width: 1440px
  }
}

@media screen and (max-width:1024px) {
  #index-contents.top .list:not([class*='swiper']) {
    width: calc(100% - 8vw);
    max-width: 750px
  }
}

@media screen and (max-width:768px) {
  #index-contents.top .list li a {
    font-size: .9em
  }
}

@media screen and (max-width:425px) {
  #index-contents.top .list:not([class*='swiper']) {
    width: calc(100% - 2em)
  }
  #index-contents.top .list.diffuser-list-wrapper {
    width: calc(100% - 1em)
  }
}

#index-contents.top [class*='block'] {
  margin-left: auto;
  margin-right: auto
}

#index-contents.top .block2 li picture {
  aspect-ratio: 2/1
}

#index-contents.top .block3, #index-contents.top .block4 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: calc(100% - 4em)
}

#index-contents.top #diffuser .block4 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: calc(100% - 2em)
}

#index-contents.top #item .block4 .diffuser-list {
  display: block;
  padding: 1em;
  margin-bottom: 2em;
  border: thin #bbb solid;
  border-radius: 5px
}

#index-contents.top .block4 .diffuser-list h3 {
  text-align: center;
  margin: 0 auto .5em;
  font-size: 1.2em;
  font-weight: 500
}

#index-contents.top .block4 .diffuser-list ul {
  display: flex;
  justify-content: center;
  width: 100%
}

#index-contents.top .block4 .diffuser-list>ul>li {
  width: 100%;
  dispray: block
}

#index-contents.top .list.block3 {
  max-width: 1160px
}

#index-contents.top .block3 li picture, #index-contents.top .block4 li picture {
  aspect-ratio: 1/1
}

@media screen and (min-width:1025px) {
  #index-contents.top .block2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: calc(100% - 4em)
  }
  #index-contents.top .block2 li {
    width: calc(100%/2 - .8em)
  }
  #index-contents.top .block2 li:nth-of-type(2n+2) {
    margin-left: 1.6em
  }
  #index-contents.top .block2 li:nth-of-type(n+3) {
    margin-top: 2em
  }
  #index-contents.top .block3 li {
    width: calc(100%/3 - 1.2em)
  }
  #index-contents.top .block3 li:not(:nth-of-type(3n+1)) {
    margin-left: 1.8em
  }
  #index-contents.top .block3 li:nth-of-type(n+4) {
    margin-top: 2em
  }
  #index-contents.top .block4 li {
    width: calc(100%/4 - 1.2em)
  }
  #index-contents.top #diffuser .block4 li {
    width: calc(100%/2 - 1.2em)
  }
  #index-contents.top .block4 li:not(:nth-of-type(4n+1)) {
    margin-left: 1.6em
  }
  #index-contents.top #diffuser.block4 li:not(:nth-of-type(2n+1)) {
    margin-left: 1.6em
  }
  #index-contents.top #diffuser .block4 li:nth-of-type(2n+1) {
    margin-left: 0
  }
}

@media screen and (max-width:1024px) {
  #index-contents.top .block2 li {
    width: 100%
  }
  #index-contents.top .block2 li:nth-of-type(n+2) {
    margin-top: 1.6em
  }
  #index-contents.top .block3 li, #index-contents.top .block4 li:not(.diffuser-list) {
    width: calc(100%/2 - 1.6vw)
  }
  #index-contents.top .block3 li:nth-of-type(2n+2), #index-contents.top .block4 li:nth-of-type(2n+2):not(.diffuser-list) {
    margin-left: 3.2vw
  }
  #index-contents.top #item .block4 .diffuser-list {
    margin-bottom: 1em
  }
  #index-contents.top .block3 li:nth-of-type(n+3), #index-contents.top .block4 li {
    margin-top: 1em
  }
}

@media screen and (max-width:768px) {
  #index-contents.top .block3 li a>div, #index-contents.top .block4 li a>div {
    padding: 1em .4em
  }
}

@media screen and (max-width:425px) {
  #index-contents.top .block2 {
    font-size: .96em
  }
  #index-contents.top .block3, #index-contents.top .block4 {
    font-size: .93em
  }
  #index-contents.top .block3 li:nth-of-type(n+3), #index-contents.top .block4 li:nth-of-type(n+3) {
    margin-top: 1.6em
  }
}

#index-contents .link-box {
  width: calc(100% - 4em);
  max-width: 1200px;
  margin: 3em auto 0
}

#index-contents .link-box a {
  position: relative;
  display: block;
  max-width: 600px;
  margin: auto;
  aspect-ratio: 2/1
}

#index-contents .link-box a>* {
  position: absolute;
  display: block
}

#index-contents .link-box picture {
  top: 0;
  left: 0;
  aspect-ratio: 2/1;
  border: 2px solid #fff
}

#index-contents .link-box picture img {
  display: block;
  width: 100%
}

#index-contents .link-box p {
  bottom: 1em;
  right: 1em;
  display: table;
  margin: auto;
  padding: 1em 1.6em;
  text-align: center;
  line-height: 1.6em;
  background: #fff;
  box-shadow: .2em .2em .4em rgba(0, 0, 0, .1);
  z-index: 1
}

#index-contents .link-box a svg {
  margin-left: .3em
}

@media screen and (min-width:769px) {
  #index-contents .link-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: center
  }
  #index-contents .link-box a {
    width: calc(100%/2 - .6em)
  }
  #index-contents .link-box a:nth-of-type(2n+2) {
    margin-left: 1.2em
  }
  #index-contents .link-box a:nth-of-type(n+3) {
    margin-top: 1.2em
  }
}

@media screen and (max-width:768px) {
  #index-contents .link-box a:nth-of-type(n+2) {
    margin-top: 1.2em
  }
}

@media screen and (max-width:425px) {
  #index-contents .link-box {
    padding-bottom: 2.4em;
    font-size: .9em
  }
  #index-contents .link-box a:nth-of-type(n+2) {
    margin-top: 4em
  }
  #index-contents .link-box p {
    bottom: -2.4em;
    padding: .8em 1em;
    line-height: 1.4em
  }
  #index-contents .link-box a svg {
    width: 10px
  }
}

.link-column {
  width: calc(100% - 3em);
  max-width: 400px;
  margin: 1em auto
}

.link-column:before {
  position: relative;
  top: .5em;
  content: 'Column';
  display: block;
  width: 6em;
  margin: auto;
  text-align: center;
  font-size: 1.2em;
  font-weight: 400;
  letter-spacing: .16em;
  background: #fff;
  z-index: 1
}

.link-column a {
  position: relative;
  display: flex;
  align-items: flex-start;
  padding: 1em;
  color: var(--txt)!important;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, .1);
  border: 1px solid;
  border-radius: .4em
}

.link-column a:before, .link-column a:after {
  position: absolute
}

.link-column a:before {
  right: 2em;
  bottom: 1em;
  display: inline-block;
  content: '\8A18\4E8B\3092\8AAD\3080';
  line-height: 1em;
  color: var(--link)
}

.link-column a:after {
  top: auto;
  right: 1em;
  bottom: 1.2em;
  content: '';
  display: inline-block;
  width: .7em;
  height: .7em;
  background: url(/svg/link-ext_nv.svg) 100% / contain no-repeat
}

.link-column a:hover {
  box-shadow: none
}

.link-column a img {
  width: 120px!important
}

.link-column a p {
  width: calc(100% - 120px - 1em);
  margin-left: 1em;
  line-height: 1.4em!important
}

#item #campaign a {
  display: block
}

#item #campaign a picture {
  display: block;
  width: 100%;
  aspect-ratio: 1/1
}

#item #campaign a p {
  margin-top: .8em;
  line-height: 1.5em
}

#item #campaign a svg {
  width: .6em;
  margin-left: .3em
}

#item #campaign a time {
  display: block;
  margin-top: .6em;
  font-size: 12px;
  line-height: 1em;
  letter-spacing: 1px
}

#index-contents.top #item>section {
  margin: auto
}

#index-contents.top #item>section:nth-of-type(n+2) {
  margin-top: 5em
}

/*#index-contents.top #item h2.ttl b {
  color: var(--txt)
}*/

#index-contents.top #item li {
  position: relative;
  display: flex
}

#index-contents.top #item li[class^='oil-']:before {
  position: absolute;
  top: -10%;
  display: block;
  width: 100%;
  padding: .2em 0;
  text-align: center;
  background: #fff;
  border: 1px solid;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
  z-index: 1
}

#index-contents.top #item li.oil-present:before {
  content: '\30AA\30A4\30EB\7121\6599\30D7\30EC\30BC\30F3\30C8\4E2D';
  color: rgb(var(--txt-red));
  font-size: .8em
}

#index-contents.top #item li.oil-set:before {
  content: '\5C02\7528\30AA\30A4\30EB\4ED8'
}

#index-contents.top #item button {
  width: calc(100% - 2em);
  max-width: 22em
}

#index-contents.top #item button a {
  color: #fff;
  background: var(--txt)
}

#index-contents.top #item button a svg {
  stroke: #fff
}

#index-contents.top #item button a:hover {
  opacity: .7
}

@media screen and (max-width:520px) {
  #index-contents.top #item li[class^='oil-']:before {
    padding: .1em 0;
    font-size: .6em
  }
}

@media screen and (max-width:425px) {
  #index-contents.top #item>section:nth-of-type(n+2) {
    margin-top: 4em
  }
  #index-contents.top #item button {
    max-width: 12em
  }
  #index-contents.top #item button span {
    display: none
  }
}

#item>#ranking ol {
  counter-reset: number 0
}

#item>#ranking li {
  height: auto
}

#item>#ranking li:before {
  position: absolute;
  top: .6em;
  left: .6em;
  counter-increment: number 1;
  content: 'No.' counter(number);
  display: block;
  width: 3.6em;
  height: 3.6em;
  text-align: center;
  line-height: 3.6em;
  color: #fff;
  background: rgba(var(--aromic-rgb), .8);
  border-radius: 50vh;
  z-index: 1
}

#item>#ranking li a {
  display: block;
  height: 100%;
  background: #fff
}

#item>#ranking a>picture {
  display: block
}

#item>#ranking a>picture img {
  display: block;
  width: 100%
}

#item>#ranking a>div {
  padding: 1em
}

@media screen and (min-width:1025px) {
  #item>#ranking>div {
    padding: 0 2em
  }
}

@media screen and (max-width:425px) {
  #item>#ranking ol {
    font-size: .96em
  }
  #item>#ranking li:before {
    font-size: 13px;
    font-weight: 600
  }
}


#index-contents.top #column li {
  padding-top: .2em
}

#index-contents.top #column li a {
  position: relative;
  display: block;
  color: var(--txt)
}

#index-contents.top #column li img {
  display: block;
  width: 100%;
  height: 240px;
  object-fit: cover
}

#index-contents.top #column li p {
  padding: .6em 0 0;
  font-size: .96em;
  line-height: 1.5em
}

#index-contents.top #column i {
  position: absolute;
  top: -.2em;
  left: .4em;
  padding: .4em .8em;
  font-size: .96em;
  font-style: normal;
  line-height: 1em;
  color: var(--aromic);
  background: #fff;
  border: 1px solid;
  transition: .4s;
  z-index: 1
}

#index-contents.top #column li a:hover i {
  color: #fff;
  background: var(--aromic);
  border-color: var(--aromic)
}

@media screen and (max-width:1440px) {
  #index-contents.top #column li img {
    height: 180px
  }
}

@media screen and (max-width:1024px) {
  #index-contents.top #column li img {
    height: 26vw;
    min-height: 120px
  }
}

#index-contents.top #guide {
  background: rgba(var(--aromic-bg-rgb), .4)
}

#index-contents.top #guide ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  margin: 0 auto 2em
}

#index-contents.top #guide li {
  width: 320px;
  height: 320px;
  margin: 0 1.6em;
  text-align: center
}

#index-contents.top #guide li a {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  height: 100%;
  color: var(--txt);
  background: #fff;
  border-radius: 50%
}

#index-contents.top #guide li a:hover {
  background: 0
}

#index-contents.top #guide li a>* {
  width: 100%;
  margin: auto
}

#index-contents.top #guide li svg {
  width: 6em;
  max-width: 120px;
  fill: none;
  stroke: var(--aromic);
  stroke-width: 3px
}

#index-contents.top #guide li:nth-of-type(2) svg {
  width: 5.4em
}

#index-contents.top #guide li p {
  margin-top: 1em;
  font-size: 1.2em;
  line-height: 2em
}

#index-contents.top #guide li p b {
  display: block;
  font-size: 1.4em;
  letter-spacing: 1px
}

@media screen and (max-width:768px) {
  #index-contents.top #guide ul {
    width: calc(100% - 2vw);
    font-size: .9em
  }
  #index-contents.top #guide li {
    width: 46vw;
    max-width: 300px;
    height: 46vw;
    max-height: 300px;
    margin: 0 1vw
  }
  #index-contents.top #guide li:last-of-type {
    margin-top: -4vw
  }
  #index-contents.top #guide li p {
    line-height: 1.5em
  }
  #index-contents.top #guide li:not(:nth-of-type(2)) p {
    margin-top: .4em
  }
}

@media screen and (max-width:425px) {
  #index-contents.top #guide ul {
    font-size: .8em
  }
  #index-contents.top #guide li svg {
    width: 4.6em
  }
  #index-contents.top #guide li:nth-of-type(2) svg {
    width: 4em
  }
  #index-contents.top #guide li p {
    font-size: .96em
  }
  #index-contents.top #guide li p b {
    font-size: 1.4em
  }
}

#aromicstyle #news .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  max-width: 40em;
  margin: auto
}

#aromicstyle #news input.tab {
  display: none
}

#aromicstyle #news label {
  margin-left: .4em;
  padding: .8em 0;
  text-align: center;
  background: #f3f3f3;
  border: 1px solid transparent;
  cursor: pointer
}

#aromicstyle #news label:first-of-type {
  margin-left: 0
}

#aromicstyle #news label:hover, #aromicstyle #news input.tab:focus+label {
  color: var(--aromic)
}

#aromicstyle #news input.tab:checked+label {
  color: var(--aromic);
  background: rgba(255, 255, 255, .6);
  border-color: var(--aromic);
  z-index: 1
}

#aromicstyle #news label p b {
  margin-right: .2em;
  font-size: 1.2em
}

#aromicstyle #news .tabpanels {
  width: 100%
}

#aromicstyle #news ul {
  margin: 2em auto 0
}

#aromicstyle #news li {
  padding-bottom: 1em;
  border-bottom: 1px dashed
}

#aromicstyle #news li:nth-of-type(n+2) {
  margin-top: 1.4em
}

#aromicstyle #news li a {
  position: relative;
  display: block;
  color: var(--txt)
}

#aromicstyle #news li a[target='_blank'] p:after, #aromicstyle #news li a.modal p:after {
  position: relative;
  top: .1em;
  display: inline-block;
  width: .9em;
  height: .9em;
  content: ''
}

#aromicstyle #news li a[target='_blank'] p:after {
  background: url(/svg/link-ext.svg) center / 100% no-repeat
}

#aromicstyle #news li a.modal p:after {
  background: url(/svg/link-modal.svg) center / 100% no-repeat
}

#aromicstyle #news li time {
  display: inline-block;
  margin-bottom: .6em;
  font-size: .9em;
  line-height: 1em;
  letter-spacing: 1px;
  color: var(--aromic)
}

#aromicstyle #news li p {
  line-height: 1.5em
}

#aromicstyle #news #news-tab1 li:nth-of-type(n+7), #aromicstyle #news #news-tab2 li:not(.info), #aromicstyle #news #news-tab3 li:not(.product), #aromicstyle #news #news-tab4 li:not(.media), #aromicstyle #news #news-tab5 li:not(.store) {
  display: none!important
}

#aromicstyle #news .tabpanels>button {
  display: none;
  width: calc(100% - 5em)
}

#aromicstyle #news #news-tab4~button.media, #aromicstyle #news #news-tab5~button.store {
  display: block
}

#aromicstyle #news li p:before {
  position: relative;
  top: -.1em;
  margin-right: .4em;
  padding: .2em .4em;
  font-size: .9em;
  color: var(--aromic);
  background: var(--aromic-bg)
}

#aromicstyle #news #news-tab1 li.info p:before {
  content: '\304A\77E5\3089\305B'
}

#aromicstyle #news #news-tab1 li.product p:before {
  content: '\88FD\54C1\60C5\5831'
}

#aromicstyle #news li.pr p:before {
  content: '\30D7\30EC\30B9\30EA\30EA\30FC\30B9'!important
}

#aromicstyle #news #news-tab1 li.media p:before {
  content: '\30E1\30C7\30A3\30A2\63B2\8F09'
}

#aromicstyle #news #news-tab1 li.store p:before {
  content: '\5E97\8217\60C5\5831'
}

#aromicstyle #news li.store.new p:before {
  content: '\65B0\5E97\8217'!important
}

@media screen and (min-width:769px) {
  #aromicstyle #news label {
    width: calc(100%/5 - .32em);
    margin-left: .4em
  }
}

@media screen and (max-width:768px) {
  #aromicstyle #news .container {
    width: calc(100% - 2em)
  }
  #aromicstyle #news label {
    width: calc(100%/3 - .2em);
    max-width: 10em;
    margin-left: .3em
  }
  #aromicstyle #news label:nth-of-type(n+4) {
    margin-top: .26em
  }
  #aromicstyle #news label:nth-of-type(3n+1) {
    margin-left: 0
  }
}

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


#index-contents.top>#aroma-test{
  margin: 3em auto 0;
}
/*
#aroma-test{
  margin: 0 auto 3em; 
}
*/


#aroma-test>a{
  display:block;
  width: 300px;
  text-align: center;
  margin: 0 auto;
}

#aromicstyle>#index-footer {
  margin:0 auto 0 
}
#index-footer {
  background: #f5f5f5
}

#index-footer p {
  text-align: center
}

#index-footer .contact {
  padding: 3em 0
}

#index-footer .contact p {
  line-height: 1.5em
}

#index-footer .contact p.concierge {
  font-size: 1.1em;
  letter-spacing: .1em
}

#index-footer .contact p.holiday {
  margin-top: 1em
}

#index-footer .contact p a {
  padding: 0 .1em;
  text-decoration: underline;
  color: var(--link)
}

#index-footer .contact p a svg {
  position: relative;
  top: -.2em;
  width: 12px;
  stroke: var(--link);
  stroke-width: 4px
}

#index-footer .contact p a:hover svg {
  stroke: #fff;
  background: var(--link);
  border-radius: 50vh
}

#index-footer .contact ul {
  width: calc(100% - 2em);
  margin: 0 auto 1.4em
}

#index-footer .contact p+ul {
  margin-top: 1.4em
}

#index-footer .contact li a {

  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
  padding: .8em 0;
  background: #fff;
  border-radius: 50vh
}

#index-footer .contact li a:hover {
  background: 0
}

#index-footer .contact li a p {
  display: inline-block;
  text-align: left;
  line-height: 1.2em
}

#index-footer .contact li:first-child a p {
  letter-spacing: .04em
}

#index-footer .contact li a svg {
  width: 2em;
  margin-right: 1em
}

#index-footer .contact li a[href*='tel']+p {
  margin-top: .4em;
  text-align: left;
  font-size: .9em
}

#index-footer .sns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 1.6em 0;
  border-top: 1px solid
}

#index-footer .sns dt {
  font-size: 1.1em;
  letter-spacing: 1px
}

#index-footer .sns dd {
  margin-left: 1.6em
}

#index-footer .sns dd a {
  display: block
}

#index-footer .sns dd picture {
  display: block;
  width: 1.6em;
  aspect-ratio: 1/1
}

#index-footer .sns dd a:hover picture {
  opacity: .6
}

#index-footer .sns dd picture img {
  display: block;
  width: 100%
}

#index-footer .concept {
  max-width: 300px;
  height: auto;
  margin: 0 auto;
  display: block;
  margin-bottom: 2em
}

#index-footer .link {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  border-top: 1px solid
}

#index-footer .link a {
  display: block;
  padding: 1.2em 0;
  text-align: center;
  color: var(--txt)
}

#index-footer .link a:hover {
  text-decoration: underline
}

#index-footer .copy {
  margin: auto;
  padding: 1.4em 0;
  text-align: center;
  font-size: .9em;
  color: #fff;
  background: rgba(0, 0, 0, .6);
  box-sizing: border-box
}

#index-footer .copy ul {
  display: flex;
  justify-content: center;
  margin-bottom: .4em
}

#index-footer .copy li:nth-of-type(n+2) {
  border-left: 1px solid
}

#index-footer .copy li a {
  margin: 0 1em;
  color: #fff
}

#index-footer .copy li a:hover {
  opacity: .8
}

@media screen and (min-width:1025px) {
  #index-footer .link li {
    width: calc(100%/4);
    border-left: 1px solid
  }
  #index-footer .link li:nth-of-type(4n+1) {
    border-left: 0
  }
  #index-footer .link li:nth-of-type(n+5) {
    border-top: 1px solid
  }
}

@media screen and (max-width:1024px) {
  #index-footer .link li {
    width: calc(100%/2)
  }
  #index-footer .link li:nth-of-type(2n+2) {
    border-left: 1px solid
  }
  #index-footer .link li:nth-of-type(n+3) {
    border-top: 1px solid
  }
}

@media screen and (min-width:769px) {
  #index-footer .contact ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: 35em
  }
  #index-footer .contact li {
    width: calc(100%/2 - .4em)
  }
  #index-footer .contact li a {
    height: 4.2em
  }
  #index-footer .contact li a p {
    font-size: 1.1em
  }
}

@media screen and (max-width:768px) {
  #index-footer .contact ul {
    max-width: 16em
  }
  #index-footer .contact li:nth-of-type(n+2) {
    margin-top: 1em
  }
  #index-footer .contact li:first-child a p {
    font-size: 1.2em
  }
  #index-footer .contact li:last-of-type a {
    width: 13em
  }
  #index-footer .sns dd {
    margin-left: 1em
  }
  #index-footer .sns dd.mail {
    width: 100%;
    margin: .6em auto 0
  }
  #index-footer .sns dd a[aria-label='mail'] {
    width: 10.6em;
    margin: auto;
    padding: .6em 1.2em .5em
  }
}

@media screen and (max-width:425px) {
  #index-footer {
    font-size: .9em
  }
  #index-footer .contact {
    padding: 2em 0
  }
  #index-footer .sns dt {
    font-size: 12px
  }
  #index-footer .sns dd {
    margin-left: .8em
  }
  #index-footer .sns dd picture {
    width: 2.2em
  }
  #index-footer .copy {
    font-size: 12px
  }
}

#campaign picture, #spray .list picture, #item>#ranking picture, #diffuser .diffuser-list picture {
  position: relative
}

#campaign img, #spray .list picture img, #item>#ranking picture img, #diffuser .diffuser-list picture img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

#item>#ranking picture, #diffuser .diffuser-list picture {
  position: relative
}

#item>#ranking picture::after, #diffuser .diffuser-list picture::after, #campaign picture::after, #spray .list picture::after {
  position: absolute;
  bottom: 3%;
  right: 2%;
  color: #eee;
  font-weight: 700;
  font-size: 24px;
  text-align: right;
  content: "〉"
}

@media screen and (max-width:600px) {
  #item>#ranking picture::after, #diffuser .diffuser-list picture::after, #campaign picture::after, #spray .list picture::after {
    font-size: 18px;
    right: 1%
  }
}