/* variable definition */ 
:root {
  --var-sans-serif: 'Noto Sans JP', "游ゴシック体", 'YuGothic', "Yu Gothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", 'Meiryo', "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
  --var-serif: 'Noto Serif JP', "游明朝体", "YuMincho", "Yu Mincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ 明朝", serif;
  --var-sans-alphabet: helvetica, 'arial black', arial, sans-serif;
  --var-color-base: #252525;
  --var-color-sub01: #cacaca;
  --var-color-sub02: #c6c6c6;
  --var-color-sub03: #444444;
  --var-color-a: #242424;
  --var-color-a-button-hover01: #f4d2a2 ;
  --var-color-a-button-hover02: #aad8f2;
  --var-color-a-button-hover03: #b2e6b6;
  --var-color-strong: #242424;
  --var-bg-base: #fff;
  --var-bg-sub: #f3f3f3;
  --var-bg-gradient01: linear-gradient(to top, #cdd2d5, #ffffff);
  --var-bg-gradient02: linear-gradient(to right, #4e4e4e, transparent);
  --var-bg-gradient03: linear-gradient(to top, #ccd1d4, #ebedf0 50%, #fbfbfc);
  --var-border-padding: 25px;
}
/* / variable definition */
html {
  /* tap hightlight color customize */
  -webkit-tap-highlight-color: transparent;
  /* / tap hightlight color customize */
  scroll-behavior: smooth;
  font-size: 10px;
}
body {
  transition: .3s;
  background: var(--var-bg-base);
  /* text renderign optimize */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
  /* / text renderign optimize */
  /* text kerning automation */
  -moz-font-feature-settings: "palt";
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
  /* / text kerning automation */
  /* smartphone(horizontal) text size adjust */
  -webkit-text-size-adjust: 100%;
  /* /smartphone(horizontal) text size adjust */
  font-family: var(--var-serif);
  font-size: 1.6rem;
  color: var(--var-color-base);
  letter-spacing: 0.045rem;
  line-height: 2;
}
h1, h2, h3, h4, h5, h6 {
  font-weight: 400;
  letter-spacing: .2rem;
}
h1 {
  font-size: 3rem;
}
h2 {
  font-size: 2rem;
  margin: 0 0 2rem 0;
}
p {
  margin: 0 0 1em 0;
  margin: 0;
}
strong,
strong a{
  color: var(--var-color-strong);
}
a {
  color: var(--var-color-a);
  text-decoration: underline;
}
a:hover {
  opacity: .8;
  text-decoration: none;
}
figure {
/*  margin: 0 0 1.5rem 0;*/
}
figure figcaption {
  font-size: 1.2rem;
}
figure figcaption:before,
figure figcaption:after {
  content: '"';
}
img {
  display: block;
  width: 100%;
/*  max-width: 100%;*/
  height: auto;
  vertical-align: bottom;
}
ul, ol {
  padding: 0;
}
ul {
  list-style: disc inside;
}
dl {
  margin: 0;
}
.hidden {
  display: none;
}
.flexbox,
.flexwrap,
.innerflexbox {
  display: flex;
}
.spbr {
  display: block;
}
@media print, screen and (min-width: 768px) {
  .spbr {
    display: none;
  }
}


/*
 *
 * layout
 *
 ****************/

/*
 *
 * header
 *
 ****************/
#header {
  position: relative;
  width: 100%;
  margin: 0 0 100px 0;
  padding: 50px 0 25px 0;
  background: url("../img/bg_header.jpg") no-repeat center center;
  background-size: cover;
}

@media print, screen and (min-width: 768px) {
  #header {
    margin: 0 0 230px 0;
    padding: 0;
  }
}

#header h1 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 190px;
  height: 100px;
  margin: 0 auto 15px auto;
  padding: 0 35px;
  background: #fff;
}

@media print, screen and (min-width: 768px) {
  #header h1 {
    position: absolute;
    z-index: 9999;
    top: 35px;
    left: 35px;
    width: 300px;
    height: auto;
    margin: 0 auto 30px auto;
    padding: 0;
  }
}

@media print, screen and (min-width: 1380px) {
  #header h1 {
    width: 380px;
  }
}

#header h1 img {
  width: 100%;
  max-width: 240px;
  height: auto;
}

@media print, screen and (min-width: 768px) {
  #header h1 img {
    padding: 50px 62px;
    max-width: none;
  }
}

#header .header_copy,
#header .header_txt {
  color: #fff;
  text-shadow: 0px 0px 7px #000;
}

#header .header_copy {
  margin: 0 0 40px 0;
  text-align: center;
}

@media print, screen and (min-width: 768px) {
  #header .header_copy {
    position: absolute;
    z-index: 9999;
    top: 38.9%;
    left: 150px;
    margin: 0;
    text-align: left;
  }
}

#header .header_copy h2 {
  font-size: 3rem;
  font-weight: 400;
  margin: 0 0 10px 0;
}

@media print, screen and (min-width: 768px) {
  #header .header_copy h2 {
    font-size: 5rem;
  }
}

#header .header_txt p {
  font-size: 1.25rem;
  text-align: center;
  margin: 0 0 20px 0;
}

@media print, screen and (min-width: 768px) {
  #header .header_txt p {
    position: absolute;
    z-index: 9999;
    top: 54.5%;
    left: 150px;
    margin: 0;
    font-size: 1.6rem;
    text-align: left;
  }
}

#header .header_link {
  font-family: var(--var-sans-serif);
}

@media print, screen and (min-width: 768px) {
  #header .header_link {
    position: absolute;
    bottom: 55px;
    left: 150px;
  }
}

#header .header_link a {
  position: relative;
  display: block;
  text-decoration: none;
  width: 285px;
  height: 35px;
  margin: 0 auto;
  border-bottom: 1px solid var(--var-color-sub03);
  font-size: 1.5rem;
}

@media print, screen and (min-width: 768px) {
  #header .header_link a {
    width: 300px;
    height: 50px;
    margin: 0;
    font-size: 2rem;
  }
}

#header .header_link a:after {
  position: absolute;
  top: 0;
  right: 0;
  content: "→";
}

#header .header_special_link {
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 9999;
  width: 100%;
  cursor: pointer;
}

@media print, screen and (min-width: 768px) {
  #header .header_special_link {
    display: block !important;
    position: absolute;
    right: 30px;
    bottom: 30px;
    width: auto;
  }
}

#header .header_special_link img {
  max-width: 220px;
  margin: 0 auto 20px auto;
}

@media print, screen and (min-width: 768px) {
  #header .header_special_link img {
    max-width: none;
    margin: 0;
  }
}

#header .header_slider {
  list-style: none;
  margin: 0 0 20px 0;
}

@media print, screen and (min-width: 768px) {
  #header .header_slider {
    margin: 0;
    padding: 70px 0 0 75px;
  }
}

#header .header_slider_counter {
  display: none;
  position: absolute;
  top: 50%;
  right: 20px;
  margin: -55px 0 0 0;
  color: var(--var-color-sub03);
  font-size: 16px;
  font-family: var(--var-sans-serif);
}

@media print, screen and (min-width: 768px) {
  #header .header_slider_counter {
    display: block;
    right: 55px;
    margin: -100px 0 0 0;
  }
}

#header .header_slider_counter:before {
  content: "";
  position: relative;
  left: 6px;
  display: block;
  height: 55px;
  width: 1px;
  margin: 0 0 5px 0;
  background: var(--var-color-sub03);
}

@media print, screen and (min-width: 768px) {
  #header .header_slider_counter:before {
    height: 110px;
  }
}

#header .header_slider_counter span {
  display: block;
  width: 15px;
  text-align: center;
}

#header .header_slider_counter .current {
  
}

#header .header_slider_counter .total {
  
}

#header .header_slider_counter .total:before {
  content: "";
  display: block;
  height: 1px;
  width: 15px;
  margin: 3px 0;
  background: var(--var-color-sub03);
}



/*
 *
 * main
 *
 ****************/
#main .content {
  font-family: var(--var-sans-serif);
  margin: 0 auto 75px auto;
  padding: 0 15px;
}

@media print, screen and (min-width: 768px) {
  #main .content {
    padding: 0;
    margin: 0 auto 200px auto;
  }
}

#main .content h2,
#main .content h3,
#main .content h4 {
  font-family: var(--var-serif);
}

#main .content:not(#mission) h2 {
  position: relative;
  padding: 0 0 0 35px;
  margin: 0 0 40px 0;
  line-height: 1.5;
  font-size:  2.5rem;
}

@media print, screen and (min-width: 768px) {
  #main .content:not(#mission) h2 {
    padding: 0 0 0 50px;
    margin: 0 auto 90px auto;
  }
}

#main .content:not(#mission) h2:before {
  content: "";
  display: block;
  position: absolute;
  top :0;
  left: 0;
  height: 100%;
  width: 10px;
  background: var(--var-bg-gradient01);
}

@media print, screen and (min-width: 768px) {
  #main .content:not(#mission) h2:before {
    width: 15px;
    background: var(--var-bg-gradient01);
  }
}

#main .content h2:after {
  content: "";
  display: block;
  padding:  10px 0 0 0;
  font-size: 1.5rem;
  font-family: var(--var-sans-serif);
  color: var(--var-color-sub01);
  text-transform: capitalize;
  line-height: 1;
}

@media print, screen and (min-width: 768px) {
  #main .content h2:after {
    padding:  35px 0 0 0;
    font-size: 2rem;
  }
}

#main #mission h2:after {
  content: "our mission";
}

#main #gallery h2:after {
  content: "photo gallery";
}

#main #tranditional h2:after {
  content: "about tranditional works";
}

#main #commitment h2:after {
  content: "our commitment";
}

#main #points h2:after {
  content: "product points";
}

#main #fragrant h2:after {
  content: "just fragrant";
}

#main #holder h2:after {
  content: "about incense holder";
}

#main #use h2:after {
  content: "how to use diffuser";
}

/*#main #scene h2:after {
  content: "aaaaa";
}*/

#main #instagram h2:after {
  content: "instagram gallery";
}

/*#main #organizations h2:after {
  content: "aaaaa";
}*/

/*#main #products h2:after {
  content: "aaaaa";
}*/

#main .content h3 {
  margin: 0 0 35px 0;
}

@media print, screen and (min-width: 768px) {
  #main .content h3 {
    margin: 0 0 100px 0;
  }
}

@media print, screen and (min-width: 768px) {
  #main .pattern01,
  #main .pattern02 {
    position: relative;
    border: 1px solid var(--var-color-sub02);
    padding: 100px;
    width: calc(100% - 350px);
  }
}

@media print, screen and (min-width: 768px) {
  #main .pattern01 {
    border-right: none;
    margin: 0 0 145px 350px;
  }
}

@media print, screen and (min-width: 768px) {
  #main .pattern02 {
    border-left: none;
    margin: 0 350px 145px 0;
  }
}

#main .pattern01 .flexbox,
#main .pattern02 .flexbox {
  align-items: flex-start;
}

#main .pattern01 figure,
#main .pattern02 figure {
  position: relative;
}

@media print, screen and (min-width: 768px) {
  #main .pattern01 figure {
    left: -150px;
  }
}

@media print, screen and (min-width: 768px) {
  #main .pattern02 figure {
    right: -150px;
  }
}

@media print, screen and (min-width: 768px) {
  #main .pattern01 .txt {
    paddin: 0 300px 0 0;
  }
}

@media print, screen and (min-width: 768px) {
  #main .pattern02 .txt {
    paddin: 0 300px 0 0;
  }
}


/*
 * mission
 ****************/

#mission {
  
}

#mission h2 {
  margin: 0 0 45px 0;
  font-size: 2.5rem;
  text-align: center;
  line-height: 1.7;
}

@media print, screen and (min-width: 768px) {
  #mission h2 {
    font-size: 3.5rem;
    margin: 0 0 100px 0;
  }
}

#mission h2:after {
  font-size: 2rem;
}

@media print, screen and (min-width: 768px) {
  #mission h2:after {
    font-size: 2.5rem;
  }
}

#mission .summery {
  margin: 0 0 50px 0;
}

@media print, screen and (min-width: 768px) {
  #mission .summery {
    margin: 0 0 140px 0;
  }
}

#mission .summery h3 {
  width: 160px;
  margin: 0 auto 50px auto;
}

@media print, screen and (min-width: 768px) {
  #mission .summery h3 {
    width: 320px;
    margin: 0 auto 70px auto;
  }
}

#mission .summery figure {
  width: 100%;
  margin: 0 auto 40px auto;
}

@media print, screen and (min-width: 768px) {
  #mission .summery figure {
    width: 865px;
    margin: 0 auto 90px auto;
  }
}

#mission .summery p {
  text-align: center;
}

#mission .benefit {
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  margin: 0 auto;
}

@media print, screen and (min-width: 768px) {
  #mission .benefit {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: calc(1320px + var(--var-border-padding) * 2);
    margin: 0 auto;
    padding: 0 var(--var-border-padding);
  }
}

#mission .benefit .txt {
  order: 2;
}

@media print, screen and (min-width: 768px) {
  #mission .benefit .txt {
    order: 1;
  }
}

#mission .benefit figure {
  order: 1;
  margin: 0 0 40px 0;
}

@media print, screen and (min-width: 768px) {
  #mission .benefit figure {
    order: 2;
    margin: 0;
  }
}


/*
 * gallery
 ****************/

#gallery h2 {
  width:  calc(100% - var(--var-border-padding) * 2);
  max-width: 1470px;
  margin:  0 auto 100px auto;
}

#gallery .gallery_slider {
  width: calc(100% + 30px);
  margin: 0 -15px;
  list-style: none;
}

@media print, screen and (min-width: 768px) {
  #gallery .gallery_slider {
    margin: 0 auto;
    width: 100%;
    max-width: 100%;

  }
}

#gallery .gallery_slider figure {
    margin: 0 0 50px 0;
}

#gallery .gallery_slider dl {
  padding: 0 25px
}

#gallery .gallery_slider dl dt {
  font-family: var(--var-serif);
  font-size: 2rem;
}

#gallery .gallery_slider dl dt .slash {
  padding: 1rem;
}

#gallery .gallery_slider dl dt .tax {
  font-size: 1.6rem;
}

#gallery img {
  margin: 0 auto;
}

#gallery .slick-slide {
  width: 100vw;
}

@media print, screen and (min-width: 768px) {
  #gallery .slick-slide {
    max-width: 1000px;
    width: 100%;
    transform: scale(.6);
    transition:  all .5s ease-out;
  }
}

#gallery .slick-current {
  transform: scale(1);
  transition:  all .5s ease-out;
}

#gallery .arrow {
  position: absolute;
  top: 50%;
  z-index: 9999;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-content: center;
  height: 50px;
  width: 50px;
  margin: -25px 0 0 0;
  line-height: 50px;
  font-size: 2.5rem;
  color: #fff;
  text-shadow: 0px 0px 7px #000;
}

#gallery .arrow.prev {
  left: 150px;  
}

#gallery .arrow.next {
  right: 150px;
}

/*
 * tranditional
 ****************/

#tranditional {
  margin-bottom: 75px !important;
}

@media print, screen and (min-width: 768px) {
  #tranditional {
    margin-bottom: 300px !important;
  }
}

#tranditional .flexbox {
  flex-direction: column;
}

@media print, screen and (min-width: 768px) {
  #tranditional .flexbox {
    flex-direction: row;
    justify-content: flex-start;
  }
}

#tranditional .txt {
  order: 1;
  margin: 0 0 45px 0;
}

@media print, screen and (min-width: 768px) {
  #tranditional .txt {
    order: 2;
    max-width: 600px;
    margin: 0 15.6% 0 0;
  }
}

#tranditional figure {
  order: 2;
  width: 100%;
}

@media print, screen and (min-width: 768px) {
  #tranditional figure {
    order: 1;
    max-width: 600px;
  }
  
  #tranditional figure img {
    position: absolute;
    top: -150px;
  }
}

/*
 * commitment
 ****************/

@media print, screen and (min-width: 768px) {
  #commitment.pattern02 {
    padding: 150px 100px;
  }
}

#commitment .flexbox {
  flex-direction: column;
}

@media print, screen and (min-width: 768px) {
  #commitment .flexbox {
    flex-direction: row;
    justify-content: flex-end;
  }
}

#commitment .txt {
  width: 100%;
  margin: 0 0 45px 0;
}

@media print, screen and (min-width: 768px) {
  #commitment .txt {
    max-width: 600px;
    margin: 0;
  }
}

#commitment figure {
  width: 100%;
}

@media print, screen and (min-width: 768px) {
  #commitment figure {
    width: 530px;
  }
  
  #commitment figure img {
    position: absolute;
    top: -250px;
  }
}

/*
 * fragrant
 ****************/

@media print, screen and (min-width: 768px) {
  #fragrant {
    margin-bottom: 300px !important;
  }
  #fragrant.pattern01 {
    min-height: 595px;
  }
}

#fragrant .flexbox {
  flex-direction: column;
}

@media print, screen and (min-width: 768px) {
  #fragrant .flexbox {
    flex-direction: row;
  }
}

#fragrant .txt {
  order: 1;
  width: 100%;
  margin: 0 0 45px 0;
}

@media print, screen and (min-width: 768px) {
  #fragrant .txt {
    order: 2;
    max-width: 600px;
    margin: 0;
  }
}

#fragrant figure {
  order: 2;
  width: 100%;
}

@media print, screen and (min-width: 768px) {
  #fragrant figure {
    order: 1;
    width: 530px;
  }
  
  #fragrant figure img {
    position: absolute;
    top: -250px;
  }
}



/*
 * holder
 ****************/

#holder {
  
}

@media print, screen and (min-width: 768px) {
  #holder {
    min-height: 620px;
  }
}

#holder .flexbox {
  flex-direction: column;
}

@media print, screen and (min-width: 768px) {
  #holder .flexbox {
    flex-direction: row;
    justify-content: flex-end;
  }
}

#holder .txt {
  width: 100%;
  margin: 0 0 45px 0;
}

@media print, screen and (min-width: 768px) {
  #holder .txt {
    max-width: 600px;
    margin: 0;
  }
}

#holder figure {
  width: 100%;
}

@media print, screen and (min-width: 768px) {
  #holder figure {
    width: 530px;
  }
  
  #holder figure img {
    position: absolute;
    top: -250px;
  }
}



/*
 * points
 ****************/

#points {
  padding: 70px 15px 0 15px !important;
  background: url("../img/bg_points_01.jpg") no-repeat top center;
  background-size: auto 1910px;
}

@media print, screen and (min-width: 768px) {
  #points {
    padding: 200px 0 0 0 !important;
    background: url("../img/bg_points_01.jpg") no-repeat top center;
    background-size: auto 1450px;
  }
}

#points h2 {
  width: 100%;
  max-width: calc(1240px + var(--var-border-padding) * 2);
  margin:  0 auto 60px auto !important;
  padding: 0 var(--var-border-padding);
}

@media print, screen and (min-width: 768px) {
  #points h2 {
    margin:  0 auto 100px auto !important;
  }
}

#points .flexbox {
  flex-direction: column;
}

@media print, screen and (min-width: 768px) {
#points .flexbox {
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
  }
}

#points .points {
  list-style: none;
  width: 100%;
  max-width: 1220px;
  margin: 0 auto;
}

#points .points li {
  display: flex;
  flex-direction: column;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
  width: 100%;
  margin: 0 0 60px 0;
  padding: 0 15px 40px 15px;
  text-align: center;
}

#points .points li:last-child {
  margin: 0;
}

@media print, screen and (min-width: 768px) {
  #points .points li {
    flex-direction: column;
    width: calc(50% - 55px);
    margin: 0 0 110px 0 !important;
    padding: 0 100px 100px 100px;
  }
}

#points .points li.fragrance {
  background: url() no-repeat top 95px center #fff;
}

#points .points li.nofire {
  background: url() no-repeat top 95px center #fff;
}

#points .points li.nosmoke {
  background: url() no-repeat top 95px center #fff;
}

#points .points li.material {
  background: url() no-repeat top 95px center #fff;
}

#points .points li h3 {
  order: 2;
  padding: 0 0 10px 0;
  margin: 0;
}

@media print, screen and (min-width: 768px) {
  #points .points li h3 {
    padding: 0 0 45px 0;
  }
}

#points .points li .icon {
  order: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 190px;
}

@media print, screen and (min-width: 768px) {
  #points .points li .icon {
    height: 260px;
  }
}

#points .points li .icon img {
  width: auto;
}

#points .points li p {
  order: 3;
  margin: 0;
}

/*
 * use
 ****************/

#use {
  width: 100%;
  max-width: calc(1640px + var(--var-border-padding) * 2);
  margin:  0 auto 100px auto;
  padding: 0 var(--var-border-padding);
}

#use .flexbox {
  flex-direction: column;
}

@media print, screen and (min-width: 768px) {
  #use .flexbox {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

#use .txt h3 {
  
}

#use .flow {
  margin: 0 0 100px 0;
}

#use .flow .txt {
  order: 2;
}

@media print, screen and (min-width: 768px) {
  #use .flow .txt,
  #use .flow figure {
    width: calc(50% - 65px);
  }
  #use .flow .txt {
    padding: 0 25px 0 0;
  }
}

#use .flow .txt ol {
  list-style: none;
}

#use .flow .txt ol li {
  counter-increment: item;
  padding-left:45px;
  text-indent:-45px;
  line-height: 1.7;
}

@media print, screen and (min-width: 768px) {
  #use .flow .txt ol li {
    padding-left:92px;
    text-indent:-92px;
    font-size: 2rem;
  }
}

#use .flow .txt ol li:before {
  content: counter(item);
  position: relative;
  top: 7px;
  font-size: 3rem;
  font-family: var(--var-serif);
  font-style: italic;
  padding: 0 30px 0 0;
}

@media print, screen and (min-width: 768px) {
  #use .flow .txt ol li:before {
    padding: 0 70px 0 0;
    font-size: 4rem;
  }
}

#use .flow figure {
  order: 1;
}

#use .senko {
  margin: 0 0 50px 0;
}

@media print, screen and (min-width: 768px) {
  #use .senko {
    margin: 0;
  }
}

#use .senko,
#use .giftbox {
  
}

#use .senko .flexbox,
#use .giftbox .flexbox {
  justify-content: space-between;
  align-items: center;
}

#use .senko .txt,
#use .giftbox .txt {
  margin: 0 0 30px 0;
}

@media print, screen and (min-width: 768px) {
  #use .senko .txt,
  #use .giftbox .txt {
    width: calc(50% - 64px);
    margin: 0;
    padding: 0 0 0 25px;
  }
}

#use .senko figure,
#use .giftbox figure {
  margin: 0 -15px;
}

@media print, screen and (min-width: 768px) {
  #use .senko figure,
  #use .giftbox figure {
    width: calc(50% - 64px);
    margin: 0;
  }
}


/*
 * use
 ****************/

#scene {
  
}

#scene ul {
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

@media print, screen and (min-width: 768px) {
  #scene ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0 25px;
  }
}

#scene li {
  display: flex;
  flex-direction: column;
  position: relative;
  counter-increment: item;
  width: 100%;
  margin: 0 0 35px 0;
}

@media print, screen and (min-width: 768px) {
  #scene li {
    position: relative;
    counter-increment: item;
    width: calc(100% / 3 - 45px);
    margin: 0 0 100px 0;
  }
}

#scene li:before {
  position: absolute;
  left: 0;
  top: 0;
  content: "Scene" counter(item, decimal-leading-zero);
  display: block;
  height: 65px;
  width: 250px;
  padding: 0 0 0 20px;
  background: var( --var-bg-gradient02);
  font-size: 3rem;
  font-family: var(--var-serif);
  color: #fff;
  line-height: 65px;
}

@media print, screen and (min-width: 768px) {
  #scene li:before {
    height: 80px;
    line-height: 80px;
  }
}

@media print, screen and (min-width: 768px) {
  #scene li:nth-of-type(1),
  #scene li:nth-of-type(4),
  #scene li:nth-of-type(7) {
    top: 0;
  }
}

@media print, screen and (min-width: 768px) {
  #scene li:nth-of-type(2),
  #scene li:nth-of-type(5),
  #scene li:nth-of-type(8) {
    top: 30px;
  }
}

@media print, screen and (min-width: 768px) {
  #scene li:nth-of-type(3),
  #scene li:nth-of-type(6),
  #scene li:nth-of-type(9) {
    top: 60px;
  }
}

#scene li figure {
  order: 1;
  margin: 0 0 25px 0;
}

@media print, screen and (min-width: 768px) {
  #scene li figure {
    margin: 0 0 35px 0;
  }
}

#scene li h3 {
  order: 2;
  margin: 0 0 15px 0 !important;
}

@media print, screen and (min-width: 768px) {
  #scene li h3 {
    margin: 0 0 35px 0 !important;
  }
}

#scene li p {
  order: 3;
}

/*
 * Instagram
 ****************/

#instagram {
  width: 100%;
  max-width: 1320px;
}
.instagrams_wrap {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: auto;
  margin: 0 auto;
}
@media print, screen and (min-width: 768px) {
  .instagrams_wrap {
    flex-direction: row;
  }
}
.instagrams_wrap ul {
  list-style: none;
}
.instagrams {
  width: 100%;
  margin: 0 0 15px 0;
}
@media print, screen and (min-width: 768px) {
  .instagrams {
    width: calc(50% - 15px);
    margin: 0;
  }
}

.instagram_detail_items {
  position: relative;
}

.instagram_detail_items .name {
  transition: opacity 0.3s ease-out;
  opacity: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 0;
  top: 0;
  height: calc(100% - 20px);
  width: calc(100% - 20px);
  margin: 10px;
  background: rgba(255,255,255,.9);
  font-weight: bold;
  font-size: 1.4rem;
  text-align: center;
}

@media print, screen and (min-width: 768px) {
  .instagram_detail_items .name {
    font-size: 1.8rem;
  }
}

.instagram_detail_items:hover .name {
  transition: opacity 0.3s ease-out;
  opacity: 1;
}

.instagrams.min {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
}
.instagrams.min .instagrams_items {
  width: calc(50% - 7.5px);
  padding: 0 0 15px 0;
}
@media print, screen and (min-width: 768px) {
  .instagrams.min .instagrams_items {
    width: calc(50% - 15px);
    padding: 0 0 20px 0;
  }
}
.instagrams.min .instagrams_items:nth-of-type(3),
.instagrams.min .instagrams_items:nth-of-type(4) {
  padding: 0;
}

/*
 * organizations
 ****************/

#organizations {
  padding: 0 !important;
}

#organizations .flexbox {
  flex-direction: column;
}

@media print, screen and (min-width: 768px) {
  #organizations .flexbox {
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
  }
}

#organizations .txt h3 {
  margin: 0 0 30px 0;
  padding: 40px 0 0 0;
  font-size: 2.5rem;
  line-height: 1.7;
}

@media print, screen and (min-width: 768px) {
  #organizations .txt h3 {
    margin: 0 0 100px 0;
    padding: 0;
    font-size: 4rem;
  }
  
  #organizations .create .txt h3 {
    margin: 0 0 50px 0;
  }
}

#organizations .txt h3 span {
  display: block;
  font-size: 1.4rem;
}

@media print, screen and (min-width: 768px) {
  #organizations .txt h3 span {
    font-size: 2.5rem;
  }
}

#organizations .produce .flexbox {
  flex-direction: column;
}

@media print, screen and (min-width: 768px) {
  #organizations .produce .flexbox {
    width: 100%;
  }
}

#organizations .create .flexbox {
  
}

#organizations .produce {
  display: block;
  width: 100%;
  padding: 0 0 300px 0;
  background: url("../img/img_organizations_01_sp.png") no-repeat center bottom, url("../img/bg_organizations_02.jpg") repeat center center;
  background-size: auto 300px, cover;
}

@media print, screen and (min-width: 768px) {
  #organizations .produce {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 0;
    background: url("../img/img_organizations_01.png") no-repeat right 0 center, url("../img/bg_organizations_02.jpg") repeat center center;
    background: url("../img/bg_organizations_02.jpg") repeat center center;
    background-size: 52% auto, cover;
    background-size: cover;
  }
}

#organizations .produce .txt {
  width: calc(100% - 52%);
}

#organizations .produce .bk {
  display: none;
  width: 52%;
  height: 100%;
  background: url("../img/img_organizations_01.png") no-repeat left center;
  background-size: cover;
}

@media print, screen and (min-width: 768px) {
  #organizations .produce .bk {
    display: block;
  }
}

@media print, screen and (min-width: 768px) {
  #organizations .create {
    width: 50%;
    overflow: hidden;
  }
}

#organizations .produce .txt {
  width: 100%;
  padding: 0 15px 50px 15px;
  background: url("../img/img_butsucochan.png") no-repeat right 15px bottom 50px; 
  background-size: 190px auto ; 
}

@media print, screen and (min-width: 768px) {
  #organizations .produce .txt {
    width: calc(100% - 52%);
    padding:  180px 150px;
    background: url("../img/img_butsucochan.png") no-repeat right 70px bottom 270px;
    background-size: auto;
    font-size: 1.8rem;
  }
}

@media print, screen and (min-width: 1536px) {
  #organizations .produce .txt {
    font-size: 2.5rem;
  }
}

#organizations .create .txt {
  padding: 0 15px;
  color: #fff;
}

@media print, screen and (min-width: 768px) {
  #organizations .create .txt {
    min-height: 785px;
    padding: 100px 125px 0 125px;
    font-size: 1.8rem;
  }
}

@media print, screen and (min-width: 1536px) {
  #organizations .create .txt {
    font-size: 2.5rem;
  }
}

/*#organizations .tokyokodo {
  background: url("../img/img_organizations_02.jpg") no-repeat bottom 5px center;
  background-size: contain;
}

#organizations .shibukusa {
  background: url("../img/img_organizations_03.jpg") no-repeat bottom 5px center;
  background-size: contain;
}*/

#organizations .tokyokodo .txt {
  background: url("../img/img_logo_tokyokodo.png") no-repeat right 20px bottom 5px #000;
  background-size: 190px auto;
}

@media print, screen and (min-width: 768px) {
  #organizations .tokyokodo .txt {
    background: url("../img/img_logo_tokyokodo.png") no-repeat right 150px bottom 80px #000;
    background-size: auto;
  }
}

#organizations .shibukusa .txt {
  background: url("../img/img_logo_shibukusa.png") no-repeat right 20px bottom 5px #151b4f;
  background-size: 190px auto;
}

@media print, screen and (min-width: 768px) {
  #organizations .shibukusa .txt {
    background: url("../img/img_logo_shibukusa.png") no-repeat right 140px bottom 30px #151b4f;
    background-size: auto;
  }
}

#organizations .produce .link,
#organizations .create .link {
  margin: 30px 0 0 0;
}

@media print, screen and (min-width: 768px) {
  #organizations .produce .link,
  #organizations .create .link {
    margin: 60px 0 0 0;
  } 
}

#organizations .produce .link a,
#organizations .create .link a {
  position: relative;
  display: block;
  text-decoration: none;
  width: 215px;
  height: 38px;
  border-bottom: 1px solid var(--var-color-sub03);
  font-size: 1.5rem;
}
#organizations .create .link a {
  color: #fff;
  border-bottom: 1px solid #fff;
}

@media print, screen and (min-width: 768px) {
  #organizations .produce .link a,
  #organizations .create .link a {
    width: 300px;
    height: 45px;
    margin: 0;
    font-size: 2rem;
  }
}

#organizations .produce .link a:after,
#organizations .create .link a:after {
  position: absolute;
  top: 0;
  right: 0;
  content: "→";
}


/*
 * products
 ****************/

#products {
  
}

@media print, screen and (min-width: 768px) {
  #products .kind {
    width: 100%;
    max-height: 1750px;
    max-width: calc(1180px + 600px);
    padding: 130px var(--var-border-padding) 130px 32%;
  }
}

@media print, screen and (min-width: 768px) {
  #products .yasuragi {
    background: url("../img/bg_products_01.jpg") no-repeat left top;
    background-size: 22.5% 100%;
  }
}

@media print, screen and (min-width: 768px) {
  #products .seseragi {
    background: url("../img/bg_products_02.jpg") no-repeat left top;
    background-size: 22.5% 100%;
  }
}

@media print, screen and (min-width: 768px) {
  #products .komorebi {
    margin: 0 0 150px 0;
    background: url("../img/bg_products_03.jpg") no-repeat left top;
    background-size: 22.5% 100%;
  }
}

#products .kind h3,
#products .giftbox h3 {
  font-size: 2.5rem;
  margin: 0 0 15px 0;
}

@media print, screen and (min-width: 768px) {
  #products .kind h3,
  #products .giftbox h3 {
    margin: 0 0 75px 0;
  } 
}

#products .flexwrap {
  display: block;
}

@media print, screen and (min-width: 768px) {
  #products .flexwrap {
    display: flex;
    justify-content: space-between;
  }
}

#products .flexbox {
  flex-direction: column;
}

#products .innerflexbox {
  flex-direction: column;
}

@media print, screen and (min-width: 768px) {
  #products .innerflexbox {
    flex-direction: row;
    justify-content: space-between;
  }
}

@media print, screen and (min-width: 768px) {
  #products .product {
    width: calc(50% - 110px);
  }
}

#products .product .innerflexbox {
  order: 2;
  margin: 0 0 10px 0;
}

@media print, screen and (min-width: 768px) {
  #products .product .innerflexbox {
    margin: 0 0 40px 0;
  }
}

#products .product h4 {
  font-size: 2rem;
}

@media print, screen and (min-width: 768px) {
  #products .product h4 {
    font-size: 2.0rem;
  }
}

#products .product h4 + p {
  font-family: var(--var-serif);
  font-size: 2rem;
}

#products .product h4 + p span {
  font-size: 1.6rem;
}

#products .product figure {
  margin: 0 0 15px 0;
}

@media print, screen and (min-width: 768px) {
  #products .product figure {
    order: 1;
    margin: 0 0 60px 0;
  }
}

#products .product .spec {
  order: 3;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 0 50px 0;
/*  border-top: 1px solid #e3e3e3;*/
}

/* #products .product .spec dt,
#products .product .spec dd {
  margin: 0 0 15px 0;
}*/

#products .product .spec dt {
  width: 100%;
  padding: 5px 0 0 0;
  font-family: var(--var-serif);
}

@media print, screen and (min-width: 768px) {
  #products .product .spec dt {
    width: 47%;
    padding: 10px 4% 10px 0;
    border-bottom: 1px solid #e3e3e3;
  }
}

#products .product .spec dd {
  width: 100%;
  padding: 0 0 5px 0;
  border-bottom: 1px solid #e3e3e3;
}

@media print, screen and (min-width: 768px) {
  #products .product .spec dd {
    max-width: 53%;
    padding: 10px 0 10px 0;
  }
}

#products .product .link {
  order: 4;
  list-style: none;
}

#products .product .link a {
  position: relative;
  display: block;
  height: 70px;
  width: 100%;
  margin: 0 0 20px 0;
  border: 1px solid var(--var-color-sub01);
  font-family: var(--var-serif);
  font-size: 2rem;
  color: var(--var-color-sub01);
  text-align: center;
  text-decoration: none;
  line-height: 70px;
}

#products .product .link a:after {
  content: "";
  position: absolute;
  top: 0;
  right: 21px;
  height: 100%;
  width: 21px;
  background: url("../img/icon_cart_d.png") no-repeat center center;
  background-size: 21px auto;
}

#products .product .link a:hover {
  opacity: 1;
}

#products .yasuragi .product .link a:hover {
  border: 1px solid var(--var-color-a-button-hover01);
  color: var(--var-color-a-button-hover01);
}

#products .yasuragi .product .link a:hover:after {
   background: url("../img/icon_cart_y.png") no-repeat center center;
}

#products .seseragi .product .link a:hover {
  border: 1px solid var(--var-color-a-button-hover02);
  color: var(--var-color-a-button-hover02);
}

#products .seseragi .product .link a:hover:after {
   background: url("../img/icon_cart_b.png") no-repeat center center;
}

#products .komorebi .product .link a:hover {
  border: 1px solid var(--var-color-a-button-hover03);
  color: var(--var-color-a-button-hover03);
}

#products .komorebi .product .link a:hover:after {
   background: url("../img/icon_cart_g.png") no-repeat center center;
}

#products .giftbox .product .link a:hover {
  opacity: .8;
}

#products .kind {
  margin: 0 0 50px 0;
}

@media print, screen and (min-width: 768px) {
  #products .kind {
    margin: 0;
  }
  #products .kind:nth-of-type(3) {
    margin: 0 0 200px 0;
  }
}

#products .kind .summery {
  margin: 0 0 45px 0;
}

@media print, screen and (min-width: 768px) {
  #products .kind .summery {
    margin: 0 0 95px 0;
  }
}

#products .giftbox {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto 0 auto;
}

@media print, screen and (min-width: 768px) {
  #products .giftbox {
    padding: 0 var(--var-border-padding);
  }
}

#products .giftbox .flexbox {
  flex-direction: column;
}

@media print, screen and (min-width: 768px) {
  #products .giftbox .flexbox {
    flex-direction: row;
    justify-content: space-between;
  }
}

#products .giftbox .txt {
  order: 2;
}

#products .giftbox figure {
  order: 1;
}

#products .giftbox .product {
  width: 100%;
  margin-bottom: 100px;
}

@media print, screen and (min-width: 768px) {
  #products .giftbox .product .txt {
    width: 485px;
  }
  #products .giftbox .product figure {
    width: calc(100% - 485px - 110px);
  }
}

#products .giftbox .product .spec {
  display: block;
}

@media print, screen and (min-width: 768px) {
  #products .giftbox .product .spec {
    display: flex;
  }
}

@media print, screen and (min-width: 768px) {
  #products .giftbox .product .spec dt {
    width: 200px;
  }
}

@media print, screen and (min-width: 768px) {
  #products .giftbox .product .spec dd {
    width: calc(100% - 200px);
    max-width: none;
  }
}

#products .giftbox .product .link {
  display: flex;
  flex-direction: column;
}

@media print, screen and (min-width: 768px) {
  #products .giftbox .product .link {
    flex-direction: row;
    justify-content: space-between;
  }
}

@media print, screen and (min-width: 768px) {
  #products .giftbox .product .link li {
    width: calc(100% / 3 - 30px);
  }
}

/*
 *
 * aside
 *
 ****************/

/*
 *
 * footer
 *
 ****************/
#footer {
  width: 100%;
  max-width: 1620px;
  padding: 50px 0;
  margin: 0 auto;
  border-top: 1px solid #e3e3e3;
  height: auto;
}

@media print, screen and (min-width: 768px) {
  #footer {
    padding: 0;
    height: 210px;
    line-height: 210px;
  }
}

@media print, screen and (min-width: 768px) {
  #footer {
    padding: 0;
  }
}

#footer .flexbox {
  display: block;
}

@media print, screen and (min-width: 768px) {
  #footer .flexbox {
    display: flex;
    flex-direction: row;
  }
}

#footer figure {
  max-width: 200px;
  margin: 0 auto 45px auto;
}

@media print, screen and (min-width: 768px) {
  #footer figure {
    display: flex;
    align-items: center;
    margin: 0 145px 0 0;
    padding: 0 0 0 25px;
  }
}

#footer .link {
  display: block;
  margin: 0 0 40px 0;
  list-style: none;
}

@media print, screen and (min-width: 768px) {
  #footer .link {
    display: flex;
    margin: 0;
    list-style: none;
  }
}

#footer .link li {
  margin: 0 0 20px 0;
}

@media print, screen and (min-width: 768px) {
  #footer .link li {
    margin: 0 100px 0 0;
  }
}

#footer .link li a {
  text-decoration: none;
  display: block;
  width: 100%;
  max-width: 285px;
  margin: 0 auto;
  border-bottom: 1px solid #858585;
}

@media print, screen and (min-width: 768px) {
  #footer .link li a {
    text-decoration: none;
    border: none;
  }
}

#footer .link li a.blank {
  padding: 0 45px 0 0;
  background: url("../img/icon_blank.png") no-repeat right center;
}

#footer small {
  display: block;
  color: #8c8c8c;
  font-size: 1.2rem;
  text-align: center;
}

@media print, screen and (min-width: 768px) {
  #footer small {
    display: inline;
  }
}

.totop {
  display: none;
  position: fixed;
  right:  25px;
  bottom: 90px;
  z-index: 9999;
}

@media print, screen and (max-width: 767px) {
  .totop {
    display: none !important;
  }
}

.totop a {
  position: relative;
  display: block;
  height: 90px;
  width: 90px;
  padding: 55px 0 0 0;
  background: var(--var-bg-gradient01);
  color: #ffff;
  font-size: 1.2rem;
  font-family: var(--var-sans-serif);
  text-align: center;
  text-decoration: none;
}

.totop a:after {
  content: '↑';
  display: block;
  position: absolute;
  top: 10px;
  left: 0;
  width: 100%;
  color: #b9b9b9;
  font-size: 2.5rem;
  text-align: center;
}

.flexbtn {
  display: none;
  position: fixed;
  left: 0;
  top: 50%;
  z-index: 9999;
  height: 170px;
  width: 300px;
  background: var(--var-bg-gradient03);
  box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
}

@media print, screen and (max-width: 767px) {
  .flexbtn {
    display: none !important;
  }
}

.flexbtn .flexbtn_innner {
  position: relative;
}

.flexbtn figure {
  width: 190px;
  position: relative;
  top: -86px;
  margin: 0 auto -70px auto;
  text-align: center;
}

.flexbtn p {
  font-size: 2rem;
  text-align: center;
}

.flexbtn p .tax {
  font-family: var(--var-sans-serif);
  font-size: 1.6rem;
}

.flexbtn a {
  position: relative;
  display: block;
  text-decoration: none;
  width: 185px;
  height: 35px;
  margin: 0 auto;
  border-bottom: 1px solid var(--var-color-sub03);
  font-family: var(--var-sans-serif);
  font-size: 1.4rem;
  text-align: left;
}

.flexbtn a:after {
  position: absolute;
  top: 0;
  right: 0;
  content: "→";
}

.flexbtn .close {
  position: absolute;
  top: -120px;
  right: -18px;
  height: 36px;
  width: 36px;
  background: url("../img/icon_close.png") no-repeat center center rgba(255,255,255,.8);
  box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
  border-radius: 36px;
  cursor: pointer;
}

.flexbtn .close:hover {
  opacity: .8;
}

.popupoverwrap {
  position: relative;
  z-index: 9999;
  display: none;
}

.popupwrap {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.9);
}

.popupbox {
  position: relative;
  width: 100%;
  max-width: 300px;
  height: 450px;
  padding: 20px;
  background: url("../img/bg_popup_sp.png") no-repeat center center transparent;
/*  border: 30px solid rgba(0,0,0,.2);*/
}

@media print, screen and (min-width: 768px) {
  .popupbox {
    max-width: 980px;
    height: 500px;
    padding: 50px 30px 30px 30px;
    background: url("../img/bg_popup.png") no-repeat center center transparent;
  }
}

.popupbox .inner {
  height: 410px;
  overflow-y: auto;
}

@media print, screen and (min-width: 768px) {
  .popupbox .inner {
    height: 405px;
    overflow-y: auto;
  }
}

.popupbox .close {
  position: absolute;
  top: -30px;
  right: -30px;
  width: 60px;
  height: 60px;
/*  border-radius: 60px;*/
  background: url("../img/btn_close.png") no-repeat center center;
/*  border: 3px solid #fff;*/
  cursor: pointer;
}

.popupbox .close:hover {
  opacity: .8;
}

.popupbox h2 {
  font-size: 1.8rem;
  text-align: center;
  color: #fff;
  line-height: 1.5;
  margin: 0;
}

@media print, screen and (min-width: 768px) {
  .popupbox h2 {
    line-height: 1.2;
  }
}

.popupbox h2 strong {
  display: block;
  color: #d5ff00;
  font-weight: normal;
}

@media print, screen and (min-width: 768px) {
  .popupbox h2 strong {
    display: inline;
  }
}

.popupbox h2 strong:before {
  content: '【';
}

.popupbox h2 strong:after {
  content: '】';
}

.popupbox h2 + p {
  margin: 3px 0 5px 0;
  font-size: 1.3rem;
  color: #A9A9A9;
  text-align: center;
}

@media print, screen and (min-width: 768px) {
  .popupbox h2 + p {
    font-size: 1.6rem;
  }
}

.popupbox .limit {
  width: 200px;
  height: 35px;
  margin: 0 auto 30px auto;
  background: #000;
  line-height: 35px;
  font-size: 1.4rem;
  text-align: center;
  color: #fff;
}

.popupbox ul {
  list-style: none;
  display: block;
}

@media print, screen and (min-width: 768px) {
  .popupbox ul {
    display: flex;
    justify-content: space-between;
    padding: 0 50px;
  }
}

.popupbox ul li {
  width: 100%;
  font-size: 1.4rem;
  color: #fff;
  margin: 0 0 50px 0;
}

@media print, screen and (min-width: 768px) {
  .popupbox ul li {
    max-width: 165px;
    margin: 0;
  }
}

.popupbox ul li figure {
  background: url("../img/bg_underline.png") no-repeat center bottom;
}

.popupbox ul li figure img {
  position: relative;
  top: -15px;
  max-width: 130px;
  margin: 0 auto;
}

.popupbox ul li dl {
  margin: 0 0 10px 0;
}

.popupbox ul li dl dt {
  text-align: center;
}

.popupbox ul li:nth-of-type(2) dl dt {
  font-size: 1.2rem;
  letter-spacing: -1px;
}

.popupbox ul li dl dd.normal {
  text-align: center;
}

.popupbox ul li dl dd.normal:after {
  display: block;
  content: '▼';
  transform:scale(.5);
  margin: -3px;
  color: #A9A9A9;
  text-align: center;
  line-height: 1;
}

.popupbox ul li dl dd.special {
  position: relative;
  font-size: 3.8rem;
  line-height: 1;
  text-align: center;
  padding: 0 60px 0 0;
}

.popupbox ul li dl dd.special .tax span {
  display: block;
  position: absolute;
  right: 45px;
  bottom: 0;
  font-size: 1.4rem;
}

@media print, screen and (min-width: 768px) {
  .popupbox ul li dl dd.special .tax span {
    right: 0;
  }
}

.popupbox ul li dl dd.special .tax strong {
  display: block;
  position: absolute;
  top: 3px;
  right: 45px;
  color: #D5FF00;
  font-size: 1.4rem;
}

@media print, screen and (min-width: 768px) {
  .popupbox ul li dl dd.special .tax strong {
    right: 0;
  }
}

.popupbox ul li a {
  position: relative;
  display: block;
  height: 32px;
  padding: 0 10px;
  line-height: 32px;
  border: 1px solid #fff;
  border-left: none;
  border-right: none;
  color: #fff;
  font-size: 1.3rem;
  text-decoration: none;
}

.popupbox ul li a:after {
  content: '→';
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  height: 32px;
  line-height: 32px;
}


/*
 *
 * ---
 *
 ****************/

/*
 *
 ****************/

/*  */

@media print, screen and (min-width: 768px) {}
@media print, screen and (max-width: 767px) {}