@charset "utf-8";

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

Common Setting

---------------------------------------------------------- */
/*pc + sp*/
.pc   {display:block}
.sp   {display:none}
@media only screen and (max-width:768px) {
.pc   {display:none}
.sp   {display:block}
}

div,h1,h2,h3,h4,h5,h6,p,ul,ol,li,dl,dt,dd  {
  position: relative;
  word-break:break-all;
  padding:0;
  margin:0;
  box-sizing:border-box;
  outline:none;
  /*font-family: "Noto Sans JP", sans-serif;*/
  font-style: normal;
}

h1,h2,h3,h4,h5,h6   {
  font-weight:normal;
  padding:0;
  margin:0
}

.ja.tsukua ,
.en.tsukua  {
  font-family: "fot-tsukuaoldmin-pr6n", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.en.montserrat {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

.en.ashegia {
  font-family: 'Ashegia', sans-serif;
}

.ja.ryumin  {
  font-family: "a-otf-ryumin-pr6n", serif;
  font-weight: 300;
  font-style: normal;
}

.en.ratio {
  font-family: "ratiomodern", serif;
  font-weight: 400;
  font-style: normal;
}

.en.garamond {
  font-family: "adobe-garamond-pro", serif;
  font-weight: 400;
  font-style: normal;
}


/*ul dl*/
ul,ul li  {
  list-style:none;
  padding:0;
  margin:0
}

ul.disc li {
  list-style: disc;
  margin-left: 1em;
}

ol  {
  margin-left: 1em;
}

/*position*/
.center {
  text-align:center
}

.left {
  text-align:left
}

.right  {
  text-align:right
}

.block  {
  display: block;
}

.large {
  font-size: 120%;
}

.small {
  font-size: 90%;
}


/*link*/
a,
a:hover {
  cursor:pointer;
  color: inherit;
  transition-property: opacity;
  transition-duration: 0.5s;
  transition: 0.2s all;
}

a:hover {
  opacity: 0.7; 
}

@media (min-width: 768px) {
  a[href^="tel:"] {
      pointer-events: none;
      cursor: default;
  }
}

@media only screen and (max-width: 768px) {
  a:hover {
    opacity: 1.0; 
  }
}

/*img*/
img {
  vertical-align:middle;
  -ms-interpolation-mode:bicubic;
  max-width:100%
}

figure  {
  padding-left: 0;
  margin-right: 0;
  margin-left: auto;
  margin-right: auto;
}

img.radius {
  border-radius: 36px;
}

@media only screen and (max-width:768px) {
  img.radius {
    border-radius:calc(36px / 2);
  }
}

img.round {
  border-radius: 100%;
}

.alignnone,
.alignleft,
.alignright,
.aligncenter  {
  margin:0;
}

.alignleft  {
  display:inline;
  float:left;
  margin-top:9px;
  margin-right:36px;
  margin-bottom:18px
}

.alignright {
  display:inline;
  float:right;
  margin-top:9px;
  margin-left:36px;
  margin-bottom:18px
}

.aligncenter  {
  clear:both;
  display:block;
  margin-left:auto;
  margin-right:auto;
  text-align:center
}

@media only screen and (max-width:768px) {
  .alignnone,
  .alignleft,
  .alignright,
  .aligncenter  {
    display:block;
    float:none;t
    ext-align:center;
    margin:1em auto
  }
}

/*loading */
.loader-bg {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 123456789;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loader {
  font-size: 10px;
  margin: auto;
  text-indent: -9999em;
  width: 5em;
  height: 5em;
  border-radius: 50%;
  background: #ffffff;
  background: -moz-linear-gradient(left, #999 10%, rgba(255, 255, 255, 0) 42%);
  background: -webkit-linear-gradient(left, #999 10%, rgba(255, 255, 255, 0) 42%);
  background: -o-linear-gradient(left, #999 10%, rgba(255, 255, 255, 0) 42%);
  background: -ms-linear-gradient(left, #999 10%, rgba(255, 255, 255, 0) 42%);
  background: linear-gradient(to right, #999 10%, rgba(255, 255, 255, 0) 42%);
  position: relative;
  -webkit-animation: load3 1.4s infinite linear;
  animation: load3 1.4s infinite linear;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}

.loader:before {
  width: 50%;
  height: 50%;
  background: #fff;
  border-radius: 100% 0 0 0;
  position: absolute;
  top: 0;
  left: 0;
  content: '';
}

.loader:after {
  background: #fff;
  width: 75%;
  height: 75%;
  border-radius: 50%;
  content: '';
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
@-webkit-keyframes load3 {
  0% {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  }
  100% {
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
  }
}
@keyframes load3 {
  0% {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  }
  100% {
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
  }
}


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

Layout Setting

---------------------------------------------------------- */
html {
  font-size: 62.5%;
}

body  {
  position: relative;
  line-break:strict!important;
  overflow-wrap:break-word!important;
  word-wrap:break-word!important;
  box-sizing:border-box;
  width:100%;
  color: #191919;
  font-weight: normal;
  font-size: 1.6rem;
  letter-spacing: 0.025em;
  line-height: 2.2;
  margin:auto;

  padding-top: 2.5em;
  padding-bottom: 2.5em;
}

#wrapper {
  position: relative;
  /*
  overflow-x: hidden;
  */
}

main {
  position: relative
}

.container__fluid  {
  width:100%;
  margin:auto;
  max-width: 1920px;
}

.container__wide {
  width:100%;
  margin:auto;
  box-sizing: border-box;
  padding-left: 2.5em;
  padding-right:2.5em;/*
  max-width: 1920px;*/
}

.container  {
  max-width:1440px;
  margin:auto;
}

.container__middle {
  max-width:1128px;
  margin:auto;
}

.container__narrow {
  width:940px;
  margin:auto;
}

.container__xnarrow  {
  width:880px;
  margin:auto;
}

.container__xxnarrow {
  max-width:780px;
  margin:auto;
}

.container__xxxnarrow {
  max-width:620px;
  margin:auto;
}

.container__xxxxnarrow {
  max-width:580px;
  margin:auto;
}

.container__xxxxxnarrow {
  max-width:468px;
  margin:auto;
}

@media only screen and (min-width:769px) and (max-width:1024px) {
  body  {
    padding:0;
  }

  .container__wide {
    width:100%;
    max-width:100%;
    padding-left:0;
    padding-right:0;
    box-sizing:border-box
  }

  .container,
  .container__middle,
  .container__narrow,
  .container__xnarrow,
  .container__xxnarrow,
  .container__xxxnarrow,
  .container__xxxxnarrow,
  .container__xxxxxnarrow {
    width:100%;
    max-width:100%;
    padding-left:1em;
    padding-right:1em;
    box-sizing:border-box
  }
}

@media only screen and (max-width:768px) {
  body  {
    min-width:1px;
    line-height: 1.89;
    -webkit-text-size-adjust:100%;
    -webkit-overflow-scrolling:touch;
    font-size:calc(1.6rem / 1.1);
    padding-top:0;
    padding-bottom:0;
    box-sizing:border-box
  }

  .container__wide {
    width:100%;
    max-width:100%;
    padding-left:0;
    padding-right:0;
    box-sizing:border-box
  }

  .container,
  .container__middle,
  .container__narrow,
  .container__xnarrow,
  .container__xxnarrow,
  .container__xxxnarrow,
  .container__xxxxnarrow,
  .container__xxxxxnarrow {
    width:100%;
    max-width:100%;
    padding-left:1em;
    padding-right:1em;
    box-sizing:border-box
  }

  .container .container,
  .container .container__middle,
  .container .container__narrow,
  .container .container__xnarrow,
  .container .container__xxnarrow,
  .container .container__xxxnarrow,
  .container .container__xxxxnarrow,
  .container .container__xxxxxnarrow {
    padding-left:0;
    padding-right:0;
  }

}

/*iPhone横*/
@media (orientation: landscape) and (max-width:900px)　{
  body  {
    min-width:1180px;
  }
}

/*iPad用*/
@media screen and (device- width : 768px ) and (device- height : 1024px ) and (-webkit-device-pixel-ratio: 2 ) {
  body  {
    min-width: 1024px;
  }
}

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

Header Setting

---------------------------------------------------------- */
/*header*/
header {
  position: relative;
}

@media only screen and (max-width: 768px) {
  .header {
    width: 100%;
  }

}

/*topbar*/
.topbar {
  padding: 18px 54px;
}

.topbar .logo img {
  width: calc(202px / 2);
}

@media only screen and (max-width: 768px) {
  .topbar {
    padding: calc(18px /2) 0;
  }

  .topbar .logo img {;
    display: none;
  }
}

/*mainvisual*/
.mainvisual__container {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: top;
  padding:calc(calc(90px + 63px) * 2.5) 0
}

.mainvisual__img  {
  order: 1;
  margin-left: -18px;
  margin-top: 18px;
  margin-bottom: -18px;
  width: calc(348px/ 2);
}

.mainvisual__title  {
  order:2;
  margin-left: -54px;
  width:calc(971px / 2);
}

.mainvisual__title img ,
.mainvisual__img img {
  width: 100%;
}


@media only screen and (min-width: 981px) and (max-width: 1024px) {
}


@media only screen and (max-width: 980px) {
  .mainvisual {
    height: 100vh;
  }

  .mainvisual__container {
    display: block;
    height: auto;
    overflow-x: hidden;
    padding:  0;
  }
}

.image {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
  z-index: -1;
  background-size: cover;
  background-position: 0 0;
  background-repeat: no-repeat;
  
  animation: image-switch-animation 25s infinite;
}

.src1 {
  background-image: url(../img/header1__pc.jpg);
}
.src2 {
  background-image: url(../img/header2__pc.jpg);
}
.src3 {
  background-image: url(../img/header3__pc.jpg);
}
.src4 {
  background-image: url(../img/header4__pc.jpg);
}
.src5 {
  background-image: url(../img/header4__pc.jpg);
}


@media only screen and (min-width: 981px) and (max-width: 1180px) {
  body {
    padding: 0;
  }

  header.container__wide {
    width:100%;
    max-width:100%;
    padding-left:0;
    padding-right:0;
    box-sizing:border-box
  }

  .image {
    background-size: auto 95%;/*
    background-size: contain;*/
  }
}


@media only screen and (max-width: 980px) {
  .image {
    background-size:  100%;/*
    background-size: contain;*/
  }

  .src1 {
    background-image: url(../img/header1__sp.jpg);
  }
  .src2 {
    background-image: url(../img/header2__sp.jpg);
  }
  .src3 {
    background-image: url(../img/header3__sp.jpg);
  }
  .src4 {
    background-image: url(../img/header4__sp.jpg);
  }
  .src5 {
    background-image: url(../img/header5__sp.jpg);
  }

}


.image:nth-of-type(1) {
  animation-delay: 0s;
}
.image:nth-of-type(2) {
  animation-delay: 5s;
}
.image:nth-of-type(3) {
  animation-delay: 10s;
}
.image:nth-of-type(4) {
  animation-delay: 15s;
}
.image:nth-of-type(5) {
  animation-delay: 20s;
}

@keyframes image-switch-animation {
  0%{ opacity: 0;}
  5%{ opacity: 1;}
  25%{ opacity: 1;}
  30%{ opacity: 0;}
  100%{ opacity: 0;}
}

/*header__side__menu*/
.header__side__menu {
  position: absolute;
  z-index: 4;
  top:calc(35% - calc(180px / 2));
  right: 7.5px;
  height:100%;
  letter-spacing: 0.05em;
  writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  }

.header__side__menu span {
  display: block;
  font-size: 1.2rem;
}

@media only screen and (max-width: 768px) {
  .header__side__menu {
    top:45vh;
    text-align: right;
  }

  .header__side__menu span {
    font-size: 1rem;
    color: #fff;
  }
}

/*scroll*/
.scroll {
  position: absolute;
  right: 50%;
  top: 10%;
  writing-mode: vertical-rl;
}

.scroll::before {
  animation: scroll 2s infinite;
  background-color: #533A16;
  bottom: -115px;
  content: "";
  height: 100px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  width: 1px;
}

@media only screen and (max-width: 768px) {
  .scroll::before {
    background-color: #fff!important;
  }

}

@keyframes scroll {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  51% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}

/*gnav*/
.gnav {
  position: relative;
  z-index: 1;
  padding-top: 13.5px;
  padding-bottom: 13.5px;
}

.gnav__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: top;
}

.gnav__list li a {
  padding: 18px 36px 18px 27px;
  line-height: 1.456789;
  box-sizing: border;
  display: block;
  text-align: center;
  text-decoration: none;

  background-position: calc(100% - 9px) 50%;
  background-repeat: no-repeat;
  background-size: calc(24px /2);
  background-image: url(../img/icon__arrow1.png);
}

.gnav__list li a span {
  display: block;
}

.gnav__list li a span.ja {
  font-size: 1.4rem;;
}




@media only screen and (max-width: 768px) {
  .gnav {
    padding-top: 36px;
    padding-bottom: 36px;
  }

  .gnav__list {
    justify-content: center;
  }

  .gnav__list li a {
    padding: 18px 22.5px 18px 13.5px;
    background-size: calc(24px /3);
  }

  .gnav__list li a span.ja {
    font-size:1.1rem
  }

}


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

Section Setting

---------------------------------------------------------- */
/*section*/
section {
  position: relative;
}

.section {
  padding:90px 0 ;
}

.section.border__bottom {
  border-bottom: 1px solid #ccc;
}

.mask {
  background-image: url(../img/bg__mask3.png);
  background-position:75% 0;
  background-repeat: no-repeat;
  background-size: 200%;
  position: relative;
  margin-top: -120px;
  z-index: 12;
  padding-top: 150px
}

p.leed {
  font-size: 18px;
}

p.leed.center {
  text-align: center;
}

@media only screen and (max-width:768px) {
  .section {
    padding:calc(90px / 2) 0;
  }

  .mask {
    background-position:top left;
    margin-top:0;
    margin-top: -45px;
    position: relative;
    padding-top: calc(150px / 2);
    z-index: 1234;
  }

  p.leed {
    font-size: calc(17px / 1.17)
  }

}

/*padding margin*/
.mt-4  {
  margin-top: -4.5px
}

.mt-9  {
  margin-top: -9px
}

.mt-18  {
  margin-top: -18px
}

.mt-27  {
  margin-top: -27px
}

.mt-36 {
  margin-top: -36px
}

.mt-45 {
  margin-top: -45px
}

.mt-54 {
  margin-top: -54px
}

.mt-63 {
  margin-top: -63px
}

.mt-72 {
  margin-top: -72px
}

.mt-81 {
  margin-top: -81px
}

.mt-90 {
  margin-top: -90px
}

.mt-120 {
  margin-top: -120px;
}

.mt-150 {
  margin-top: -150px;
}

.mt-180 {
  margin-top: -180px;
}

.mb-9  {
  margin-bottom: -9px
}

.mb-18  {
  margin-bottom: -18px
}

.mb-27  {
  margin-bottom: -27px
}

.mb-36 {
  margin-bottom: -36px
}

.mb-45 {
  margin-bottom: -45px
}

.mb-54 {
  margin-bottom: -54px
}

.mb-63 {
  margin-bottom: -63px
}

.mb-72 {
  margin-bottom: -72px
}

.mb-81 {
  margin-bottom: -81px
}

.mb-90 {
  margin-bottom: -90px
}

.mt0 {
  margin-top: 0!important;
}

.mt9 {
  margin-top: 9px;
}

.mt18 {
  margin-top: 18px;
}

.mt27 {
  margin-top: 27px;
}

.mt36 {
  margin-top: 36px;
}

.mt45 {
  margin-top: 45px;
}

.mt54 {
  margin-top: 54px;
}

.mt63 {
  margin-top: 63px;
}

.mt72 {
  margin-top: 72px;
}

.mt81 {
  margin-top: 81px;
}

.mt90 {
  margin-top: 90px;
}

.mb0 {
  margin-bottom: 0!important;
}

.mb9 {
  margin-bottom: 9px;
}

.mb18 {
  margin-bottom: 18px;
}

.mb27 {
  margin-bottom: 27px;
}

.mb36 {
  margin-bottom: 36px;
}

.mb45 {
  margin-bottom: 45px;
}

.mb54 {
  margin-bottom: 54px;
}

.mb63 {
  margin-bottom: 63px;
}

.mb72 {
  margin-bottom: 72px;
}

.mb81 {
  margin-bottom: 81px;
}

.mb90 {
  margin-bottom: 90px;
}

.pt0 {
  padding-top: 0;
}

.pt9 {
  padding-top: 9px;
}

.pt18 {
  padding-top: 18px;
}

.pt27 {
  padding-top: 27px;
}

.pt36 {
  padding-top: 36px;
}

.pt45 {
  padding-top: 45px;
}

.pt54 {
  padding-top: 54px;
}

.pt63 {
  padding-top: 63px;
}

.pt72 {
  padding-top: 72px;
}

.pt81 {
  padding-top: 81px;
}

.pt90 {
  padding-top: 90px;
}

.pt120 {
  padding-top: 120px;
}

.pt150 {
  padding-top: 150px;
}

.pt180 {
  padding-top: 180px;
}

.pb0 {
  padding-bottom: 0;
}

.pb9 {
  padding-bottom: 9px;
}

.pb18 {
  padding-bottom: 18px;
}

.pb27{
  padding-bottom: 27px;
}

.pb36 {
  padding-bottom: 36px;
}

.pb45 {
  padding-bottom: 45px;
}

.pb54 {
  padding-bottom: 54px;
}

.pb63 {
  padding-bottom: 63px;
}

.pb72 {
  padding-bottom: 72px;
}

.pb81 {
  padding-bottom: 81px;
}

.pb90 {
  padding-bottom: 90px;
}

.pb180 {
  padding-bottom: 180px;
}

.pb210 {
  padding-bottom: 210px;
}

.pd9 {
  padding: 9px;
}

.pd18 {
  padding: 18px;
}

.pd27 {
  padding: 27px;
}

.pd36 {
  padding: 36px;
}

.pd45 {
  padding: 45px;
}

.pd54 {
  padding: 54px;
}

.pd63 {
  padding: 63px;

}

@media only screen and (max-width:768px) {
  .mt-4  {
    margin-top: calc(-4.5px / 2)
  }

  .mt-9  {
    margin-top: calc(-9px / 2)
  }

  .mt-18  {
    margin-top: calc(-18px / 2)
  }

  .mt-27  {
    margin-top: calc(-27px / 2)
  }

  .mt-36 {
    margin-top: calc(-36px / 2)
  }

  .mt-45 {
    margin-top: calc(-45px / 2)
  }

  .mt-54 {
    margin-top: calc(-54px / 2)
  }

  .mt-63 {
    margin-top: calc(-63px / 2)
  }

  .mt-72 {
    margin-top: calc(-72px / 2)
  }

  .mt-81 {
    margin-top: calc(-81px / 2)
  }

  .mt-90 {
    margin-top: calc(-90px / 2)
  }

  .mt-120 {
    margin-top: calc(-120px / 2)
  }

  .mt-150 {
    margin-top: calc(-150px / 2)
  }

  .mt-180 {
    margin-top: calc(-180px / 2)
  }

  .mb-9  {
    margin-bottom: calc(-9px / 2)
  }

  .mb-18  {
    margin-bottom: calc(-18px / 2)
  }

  .mb-27  {
    margin-bottom: calc(-27px / 2)
  }

  .mb-36 {
    margin-bottom: calc(-36px / 2)
  }

  .mb-45 {
    margin-bottom: calc(-45px / 2)
  }

  .mb-54 {
    margin-bottom: calc(-54px / 2)
  }

  .mb-63 {
    margin-bottom: calc(-63px / 2)
  }

  .mb-72 {
    margin-bottom: calc(-72px / 2)
  }

  .mb-81 {
    margin-bottom: calc(-81px / 2)
  }

  .mb-90 {
    margin-bottom: calc(-90px / 2)
  }

  .mt9 {
    margin-top: calc(9px / 2)
  }

  .mt18 {
    margin-top: calc(18px / 2)
  }

  .mt27 {
    margin-top: calc(27px / 2)
  }

  .mt36 {
    margin-top: calc(36px / 2)
  }

  .mt45 {
    margin-top: calc(45px / 2)
  }

  .mt54 {
    margin-top: calc(54px / 2)
  }

  .mt63 {
    margin-top: calc(63px / 2)
  }

  .mt72 {
    margin-top: calc(72px / 2)
  }

  .mt81 {
    margin-top: calc(81px / 2)
  }

  .mt90 {
    margin-top: calc(90px / 2)
  }

  .mb9 {
    margin-bottom: calc(9px / 2)
  }

  .mb18 {
    margin-bottom: calc(18px / 2)
  }

  .mb27 {
    margin-bottom: calc(27px / 2)
  }

  .mb36 {
    margin-bottom: calc(36px / 2)
  }

  .mb45 {
    margin-bottom: calc(45px / 2)
  }

  .mb54 {
    margin-bottom: calc(54px / 2)
  }

  .mb63 {
    margin-bottom: calc(63px / 2)
  }

  .mb72 {
    margin-bottom: calc(72px / 2)
  }

  .mb81 {
    margin-bottom: calc(81px / 2)
  }

  .mb90 {
    margin-bottom: calc(90px / 2)
  }

  .pt9 {
    padding-top: calc(9px / 2)
  }

  .pt18 {
    padding-top: calc(18px / 2)
  }

  .pt27 {
    padding-top: calc(27px / 2)
  }

  .pt36 {
    padding-top: calc(36px / 2)
  }

  .pt45 {
    padding-top: calc(45px / 2)
  }

  .pt54 {
    padding-top: calc(54px / 2)
  }

  .pt63 {
    padding-top: calc(63px / 2)
  }

  .pt72 {
    padding-top: calc(72px / 2)
  }

  .pt81 {
    padding-top: calc(81px / 2)
  }

  .pt90 {
    padding-top: calc(90px / 2)
  }

  .pt120 {
    padding-top: calc(120px / 2)
  }

  .pt150 {
    padding-top: calc(150px / 2)
  }

  .pt180 {
    padding-top: calc(180px / 2)
  }

  .pb9 {
    padding-bottom: calc(9px / 2)
  }

  .pb18 {
    padding-bottom: calc(18px / 2)
  }

  .pb27{
    padding-bottom: calc(27px / 2)
  }

  .pb36 {
    padding-bottom: calc(36px / 2)
  }

  .pb45 {
    padding-bottom: calc(45px / 2)
  }

  .pb54 {
    padding-bottom: calc(54px / 2)
  }

  .pb63 {
    padding-bottom: calc(63px / 2)
  }

  .pb72 {
    padding-bottom: calc(72px / 2)
  }

  .pb81 {
    padding-bottom: calc(81px / 2)
  }

  .pb90 {
    padding-bottom: calc(90px / 2)
  }

  .pb180 {
    padding-bottom: calc(180px / 2)
  }

  .pb210 {
    padding-bottom: calc(210px / 2)
  }

  .pd9 {
    padding: calc(9px / 2)
  }

  .pd18 {
    padding: calc(18px / 2)
  }

  .pd27 {
    padding: calc(27px / 2)
  }

  .pd36 {
    padding: calc(36px / 2)
  }

  .pd45 {
    padding: calc(45px / 2)
  }

  .pd54 {
    padding: calc(54px / 2)
  }

  .pd63 {
    padding: calc(63px / 2)
  }

}

/*section__title*/
.section__title {
  text-align: center;
  margin: auto;
  position: relative;
}

.section__title span {
  display: block;
  text-align: center;
  margin: auto;
  position: relative;
}

.section__title span.ja {
  font-size: 2.7rem;
  line-height: 1.56789;
}

  .section__title span.ja.large {
    font-size: 3.9rem;
    line-height: 1.56789;
  }

.section__title span.en {
  font-size: 2.2rem;
  padding-bottom: 90px;
}

  .collection .section__title span.en {
    margin-top: calc(90px + 27px);
  }

.section__title span.en:after {
  position: absolute;
  content: '';
  height: 81px;
  top:90px;
  left: calc(50% - 1px);
  border-left: 1px solid #707070;
}

.section__title span.en.noborder:after {
  display: none;
}

@media only screen and (min-width:769px) and (max-width:1024px) {
  .section__title span.ja {
    font-size: 2.2rem;
  }

  .section__title span.ja.large {
    font-size: 3.4rem;
  }

  .section__title span.en {
    font-size: 1.7rem;
  }

}

@media only screen and (max-width: 768px) {
  .section__title span.ja {
    font-size: 1.4rem;
  }

  .section__title span.ja.large {
    font-size: 2.2rem
  }

    .effect .section__title span.ja.large {
      font-size: 1.9rem
    }

  .section__title span.en {
    font-size: 1.3rem;
    padding-bottom:calc(90px /2);
    z-index: 567;
    position: relative;
  }

    .section__title span.en.small {
      font-size: 1rem;
      padding-top: 4.5px
    }

    .collection .section__title span.en {
      margin-top:calc(90px / 1);
    }

  .section__title span.en:after {
    position: absolute;
    content: '';
    height: calc(81px / 1.5);
    z-index: 23;
    top:calc(90px / 2);
    left: calc(50% - 1px);
  }

    .product .section__title span.en:after {
      position: absolute;
      content: '';
      height: calc(81px / 1);
      z-index: 23;
      top:-90px;
      left: calc(50% - 1px);
    }

}


/*marker*/
.marker1 {
  padding-bottom: 4.5px;
  border-bottom: 5px solid #e5b13e;
}

.marker2 {
  padding-bottom: 11.5px;
  border-bottom:5px solid #fff;
}

@media only screen and (max-width: 768px) {
  .marker1 {
    padding-bottom: calc(4.5px / 2);
    border-bottom: 2.5px solid #e5b13e;
  }

  .marker2 {
    padding-bottom: calc(11.5px / 2);
    border-bottom:2.5px solid #fff;
  }
}


/*side__title*/
.side__title {
  transform: rotate(-270deg);
  position: absolute;
  z-index: 45;
}

  .product__section .side__title {
    top:calc(35% - calc(180px / 2));
    left: -40.5px;
  }

  .effec__section .side__title {
    top:calc(50% - calc(180px / 2));
    left: -43.5px;
  }


.side__title:after {
  position: absolute;
  transform: rotate(-270deg);
  content: '';
  height: 171px;
  margin: 0;
  top: 12.25px;
  right: -180px;
  z-index: 67;
  transform-origin: top left;
  border-left: 1px solid #707070;
}

.side__title span {
  display: block;
  font-size: 1.2rem; 
}

@media only screen and (min-width:769px) and (max-width:1024px) {
  .side__title {
    display: none;
  }
}

@media only screen and (max-width: 768px) {
  .side__title {
    display: none;
  }
}


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

Collection Setting

---------------------------------------------------------- */
/*collection*/
.section.collection {
  position: relative;/*
  background: rgba(247, 241, 234, 0.43);
  background: linear-gradient(180deg,rgba(247, 241, 234, 0.43) 0%, rgba(239, 235, 225, 0.43) 100%);
  */
  background-color: rgba(235, 225, 210, 0.77);
  margin-top: 36px;
  padding-top: 158px;
  z-index: 12;
  overflow: hidden;
}

.collection__container {
  padding:calc(180px + 36px) 0 0;
}

.collection__list__container {
  position: relative;
}

  .collection__list__container1 ,
  .collection__list__container3 {
    margin-bottom:18px;
  }

  .collection__list__container2,
  .collection__list__container4 {
    margin-bottom:calc(90px + 90px + 9px);
  }

.collection__list__container1:after {
  position: absolute;
  content: '';
  top: -18px;
  margin: 0;
  width:100% ;
  max-width:calc(100% - calc(calc(100% - 1380px)/ 2));
  margin-right:calc(calc(100% - 1380px)/ 2);
  height: 377.1px;
  background-color: rgba(235, 225, 210, 1.0);
}

.collection__list__container3:after {
  position: absolute;
  content: '';
  top: 0%;
  margin: 0;
  width:100% ;
  max-width:calc(100% - calc(calc(100% - 1380px)/ 2));
  margin-left:calc(calc(100% - 1380px)/ 2);
  height: 442.66px;
  background-color: rgba(245, 231, 242, 0.7);
}

.collection__list__container5:after {
  position: absolute;
  content: '';
  top: 0%;
  margin: 0;
  width:100%;
  height: 377.1px;
  background-color: rgba(235, 225, 210, 1.0);
}

.collection__list__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content:space-between;
  align-items: top;
}

@media only screen and (min-width:769px) and (max-width:1024px) {
  .section.collection {
    position: relative;
    margin-top: 36px;
    padding-top: calc(158px / 2);
  }

  .collection__list__container1:after {
    width:100% ;
    max-width:100%;
    margin-right:auto;
  }

  .collection__list__container3:after {
    width:100% ;
    max-width:100%;
    margin-left:auto;
  }

}

@media only screen and (max-width: 768px) {
  .section.collection {
    margin-top: 36px;
    padding-top:calc(158px / 1.5);
  }

  .collection__container {
    padding:36px 0;
    position: relative;
    width: 100%;
    height: 100%;/*
    background-color: #efe7da;*/
    /*
    background: linear-gradient(180deg, #efe7da 0%, #efe7da 50%, #F9ECDC 50%, #F9ECDC 100%);  */
    background: linear-gradient(180deg, #E9E0D7 0%, #E9E0D7 40%, #F9ECDC 40%, #F9ECDC 75%, #F2EEE5 75%, #F2EEE5 100%);
  }

  .collection__container:after {
    position: absolute;
    content: '';
    top: 1900px;
    width:100% ;
    z-index: 1;
    max-width:100%;
    margin:auto;
    height: 1320px;
    background: linear-gradient(180deg,rgba(239, 204, 174, 1) 0%, rgba(235, 214, 192, 1) 100%);
  }

  .collection__list__container1 {
    margin-top: 18px;
    margin-bottom:18px;
  }

  .collection__list__container2,
  .collection__list__container3,
  .collection__list__container4,
  .collection__list__container5 {
    margin-bottom:18px;
    position: relative;
    z-index: 345;
  }

  .collection__list__container1:after ,
  .collection__list__container3:after,
  .collection__list__container5:after {
    display: none;
  }

  .collection__list__inner {
    display: block
  }

  .collection__list.collection__list6:after  {
    background-color: rgba(235, 214, 192, 1);
    position: absolute;
    top: 0;
    z-index: -1;
    content: '';
    padding-bottom: 45px;
    left: -1.5em;
    right: -1.5em;
    height: 100%;
    width: calc(100% + 3em);
  }


}

/*collection__list*/
.collection__list {
  flex-basis: calc(50% - 90px);
  position: relative;
  z-index: 67;
}

.collection__list.collection__list2 ,
.collection__list.collection__list4 ,
.collection__list.collection__list6 ,
.collection__list.collection__list8 ,
.collection__list.collection__list10 {
  margin-left: 90px
}

  .collection__list.collection__list1 {
    margin-top: calc(-90px - 63px);
  }

  .collection__list.collection__list2 {
    margin-top: -45px;
  }

  .collection__list.collection__list3 ,
  .collection__list.collection__list7 {
    z-index: 23;
  }

  .collection__list.collection__list4 ,
  .collection__list.collection__list8 {
    z-index: 1;
    margin-top: 72px;
  }

  .collection__list.collection__list3:after ,
  .collection__list.collection__list7:after {
    position: absolute;
    content: '';
    top: calc(90px + 27px);
    z-index: -1;
    margin: 0;
    width:calc(1380px / 2);
    left: calc(-90px - 36px);
    height: 400px;
    background-color: rgba(235, 225, 210, 1);
  }

  .collection__list.collection__list4:after ,
  .collection__list.collection__list8:after {
    position: absolute;
    content: '';
    top: calc(90px + 27px);
    z-index: -1;
    margin: 0;
    width:calc(1540px / 2);
    right: calc(-90px - 27px);
    height: 400px;
    background-color: rgba(222, 222, 222, 0.7);
  }

  .collection__list.collection__list5 {
    margin-top: -98px;
  }

  .collection__list.collection__list6 {
    margin-top:27px;
  }

  .collection__list.collection__list9 {
    margin-top: -138px;
  }

  .collection__list.collection__list10 {
    margin-top: -45px;
  }


@media only screen and (min-width:769px) and (max-width:1024px) {
  .collection__list {
    flex-basis: 50%;
  }

  .collection__list.collection__list1,
  .collection__list.collection__list2,
  .collection__list.collection__list3,
  .collection__list.collection__list4,
  .collection__list.collection__list5,
  .collection__list.collection__list6,
  .collection__list.collection__list7,
  .collection__list.collection__list8,
  .collection__list.collection__list9,
  .collection__list.collection__list10 {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 10;
  }

  .collection__list.collection__list4:after,
  .collection__list.collection__list8:after {
    display: none;
  }

  .collection__list__container2:after {
    position: absolute;
    content: '';
    top: calc(90px + 90px + 36px);
    z-index: -1;
    margin: 0;
    width:calc(1540px / 2);
    right: calc(-90px - 27px);
    height: 400px;
    background-color: rgba(222, 222, 222, 0.7);
  }

  .collection__list__container4:after {
    position: absolute;
    content: '';
    top: calc(90px + 90px);
    z-index: -1;
    margin: 0;
    width:calc(1540px / 2);
    right: calc(-90px - 27px);
    height: 400px;
    background-color: rgba(222, 222, 222, 0.7);
  }

}


@media only screen and (max-width: 768px) {
  .collection__list {
    flex-basis: 100%;
    width: 100%;
    padding: 0 1em;
    box-sizing: border-box;
  }

  .collection__list.collection__list1,
  .collection__list.collection__list2,
  .collection__list.collection__list3,
  .collection__list.collection__list4,
  .collection__list.collection__list5,
  .collection__list.collection__list6,
  .collection__list.collection__list7,
  .collection__list.collection__list8,
  .collection__list.collection__list9,
  .collection__list.collection__list10 {
    margin-top:auto;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 72px;
    position: relative;
    z-index: 456;
  }

  .collection__list.collection__list3:after ,
  .collection__list.collection__list7:after,
  .collection__list.collection__list4:after ,
  .collection__list.collection__list8:after {
    display: none
  }

  .collection__list.collection__list7:after  {/*
    background-color: rgba(235, 214, 192, 1);*/
    background-color: #000!important;
    position: absolute;
    top: 0;
    z-index: -1;
    content: '';
    padding-bottom: 45px;
    left: -1.5em;
    right: -1.5em;
    height: 100%;
    width: calc(100% + 3em);
  }

  .collection__list.collection__list8 {
    z-index: auto;
  }

  .collection__list.collection__list8:before {
    position: absolute;
    content: '';
    top: 0;
    z-index: -1;
    padding-bottom: 45px;
    left: -1.5em;
    right: -1.5em;
    height: 50%;
    width: calc(100% + 3em);
    background-color: #F9ECDC;
  }

}

/*collection__img*/
.collection__img  {
  position: relative;
  margin-left: 36px;
}

.collection__img img {
  width: 340px;
  pointer-events: none;
}

@media only screen and (max-width: 768px) {
  .collection__img  {
    margin-left: auto;
  }

  .collection__img img {
    width: 100%;
  }
}

/*collection__num*/
.collection__num {
  position: absolute;
  z-index: 34;
  top: -9px;
}

  .collection__list1 .collection__num {
    left: calc(340px - 18px);
  }

  .collection__list2 .collection__num {
    left: calc(340px - 54px);
  }

  .collection__list3 .collection__num {
    left: calc(270px - 45px);
  }

  .collection__list4 .collection__num ,
  .collection__list5 .collection__num ,
  .collection__list6 .collection__num ,
  .collection__list8 .collection__num {
    left: calc(340px - 45px);
  }

    .collection__list5 .collection__num {
      top: -45px;
    }

  .collection__list7 .collection__num {
    left:calc(270px - 36px);
  }

  .collection__list9 .collection__num {
    left:calc(270px - 45px);
  }

  .collection__list10 .collection__num {
    left:calc(340px - 72px);
    top: -72px
  }

.collection__num span.en {
  display: block;
  line-height: 1.456789;
  font-size: 6.3rem;
  color: #533A16;
}

  .collection__list2 .collection__num span.en,
  .collection__list3 .collection__num span.en,
  .collection__list6 .collection__num span.en,
  .collection__list7 .collection__num span.en,
  .collection__list9 .collection__num span.en  {
    color: #fff;
  }

.collection__num span.en strong {
  font-size: 9rem;
}

@media only screen and (min-width:769px) and (max-width:1024px) {
  .collection__list2 .collection__num,
  .collection__list2 .collection__num,
  .collection__list3 .collection__num,
  .collection__list4 .collection__num,
  .collection__list5 .collection__num ,
  .collection__list6 .collection__num ,
  .collection__list7 .collection__num ,
  .collection__list8 .collection__num ,
  .collection__list9 .collection__num {
    left: calc(180px + 81px);
  }

  .collection__list1 .collection__num {
    left: calc(180px + 99px);
  }

  .collection__list10 .collection__num {
    left: calc(180px + 54px);
    top: -45px;
  }

  .collection__num span.en {
    font-size: 4.5rem;
  }

  .collection__num span.en strong {
    font-size:7.1rem;
  }

}


@media only screen and (max-width: 768px) {
  .collection__num {
    top: 0;
  }

  .collection__list1 .collection__num,
  .collection__list2 .collection__num,
  .collection__list3 .collection__num,
  .collection__list4 .collection__num,
  .collection__list5 .collection__num,
  .collection__list6 .collection__num,
  .collection__list7 .collection__num,
  .collection__list8 .collection__num,
  .collection__list9 .collection__num ,
  .collection__list10 .collection__num {
    top:87.5%;
    left: 1.5em;
  }

  .collection__num span.en {
    font-size: 5.5rem;
  }

  .collection__list1 .collection__num span.en,
  .collection__list2 .collection__num span.en,
  .collection__list4 .collection__num span.en,
  .collection__list5 .collection__num span.en,
  .collection__list8 .collection__num span.en,
  .collection__list10 .collection__num span.en {
    color: #533A16;
  }

  .collection__list3 .collection__num span.en,
  .collection__list6 .collection__num span.en,
  .collection__list7 .collection__num span.en,
  .collection__list9 .collection__num span.en  {
    color: #fff;
  }

  .collection__num span.en strong {
    font-size:8.1rem;
  }
}


/*collection__name*/
.collection__name1 {
  writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  position: absolute;
  top: 0;
  color: #533A16;
  left:-22.5px;
  z-index: 45;
}

.collection__name2 {
  writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  position: absolute;
  bottom:-1em;
  color: #533A16;
  left:calc(287px + calc(48px/ 1.45));
  /*right:calc(90px + 13.5px);*/
  z-index: 45;
}

.collection__name1:before {
  background-color: #533A16;
  top: 150px;
  content: "";
  height: 100px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  width: 0.25px;
}

.collection__name2:before {
  background-color: #533A16;
  top: -115px;
  content: "";
  height: 100px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  width: 0.25px;
}

  /*collection__name1*/
  .collection__list1 .collection__name1:before ,
  .collection__list2 .collection__name1:before {
    top: 150px;
  }

  .collection__list3 .collection__name1:before {
    top: 120px;
  }

  .collection__list4 .collection__name1:before {
    top: 160px;
  }

  .collection__list10 .collection__name1:before {
    top: 180px;
  }

  .collection__list6 .collection__name1:before, 
  .collection__list9 .collection__name1:before {
    top: 190px;
  }

  /*collection__name2*/
  .collection__list5 .collection__name2 {
    bottom:-3em;
  }

  .collection__list2 .collection__name2,
  .collection__list3 .collection__name2,
  .collection__list6 .collection__name2,
  .collection__list7 .collection__name2,
  .collection__list9 .collection__name2 {
    color: #fff;
  }

  .collection__list2 .collection__name2:before ,
  .collection__list3 .collection__name2:before ,
  .collection__list6 .collection__name2:before ,
  .collection__list7 .collection__name2:before,
  .collection__list9 .collection__name2:before {
    background-color: #fff;
  }

.collection__name span {
  display: block;
  font-size: 1.2rem;
  line-height: 1.3456789;
  text-align: left;
}


@media only screen and (min-width:769px) and (max-width:1024px) {
  .collection__name2 {/*
    right:inherit;*/
    left:calc(285px + calc(48px/ 1.45));
  }

  .collection__name1:before {
    width: 0.5px;
  }

  .collection__name2:before {
    width: 0.5px;
    margin-right: 4.5px;
  }

}

@media only screen and (max-width: 768px) {
  .collection__name1 {
    left:-22.5px;
    top: 25%;
  }

  .collection__name2 {
    left:inherit;
    right:1em;
    bottom: 3em;
  }

  .collection__name1:before ,
  .collection__name2:before {
    width: 0.5px;
  }

  /*collection__name2*/
  .collection__list2 .collection__name2 {
    color: initial;
  }

  .collection__list5 .collection__name2 {
    bottom:3em;
  }

    .collection__list3 .collection__name2,
    .collection__list6 .collection__name2,
    .collection__list7 .collection__name2 {
      color: #fff;
    }

    .collection__list3 .collection__name2:before ,
    .collection__list6 .collection__name2:before ,
    .collection__list7 .collection__name2:before {
      background-color: #fff;
    }

}


/*collection__title*/
.collection__title {
  margin-top: 9px;
  margin-left: 36px;
}

.collection__title img {
  width: calc(626px /2);
  pointer-events: none;
}

@media only screen and (max-width: 768px) {
  .collection__title {
    position: absolute;
    top:13.5px;
    left: 0;
  }

  .collection__list3 .collection__title span,
  .collection__list6 .collection__title span,
  .collection__list7 .collection__title span,
  .collection__list9 .collection__title span {
    color: #fff;
  }

  .collection__title img {
    width: calc(518px /2);
    pointer-events: none;
  }

}

/*collection__btn*/
.collection__btn {
  position: absolute;
  left:calc(340px + calc(48px/ 4));
  z-index: 345;
}

.collection__btn img {
  width: calc(48px/ 2);
}

  .collection__list1 .collection__btn {
    bottom: calc(45px + 54px);
  }

  .collection__list3 .collection__btn {
    bottom: calc(45px + 9px);
  }

  .collection__list5 .collection__btn  {
    bottom: calc(45px + 36px);
  }

  .collection__list7 .collection__btn {
    bottom: calc(45px + 9px);
  }

  .collection__list9 .collection__btn {
    bottom: calc(45px + 36px);
  }

  .collection__list2 .collection__btn,
  .collection__list4 .collection__btn,
  .collection__list6 .collection__btn,
  .collection__list8 .collection__btn,
  .collection__list10 .collection__btn {
    bottom:  -4.5px
  }


@media only screen and (max-width: 768px) {
  .collection__btn {
    left:auto;
    right: 1.65em;
    top: 92.5%;
  }

  .collection__list1 .collection__btn ,
  .collection__list2 .collection__btn ,
  .collection__list3 .collection__btn ,
  .collection__list4 .collection__btn ,
  .collection__list5 .collection__btn,
  .collection__list6 .collection__btn ,
  .collection__list7 .collection__btn ,
  .collection__list8 .collection__btn ,
  .collection__list9 .collection__btn ,
  .collection__list10 .collection__btn {
    bottom: 0;
  }

}


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

Product Setting

---------------------------------------------------------- */
/*product*/
.section.product {/*
  background-color: rgba(242, 233, 230, 1.0);
  */
  background: linear-gradient(180deg, #F2E9E6 0%, #F2E9E6 50%, #E4D0CE 50%, #E4D0CE 100%);
  padding-top: 154px;
  padding-bottom: 90px;
  position: relative;
  z-index: 345;
  overflow-x: hidden;
}

.product__container {
  position: relative;
}

.product__container:after {
  position: absolute;
  content: '';
  width: 100%;
  height: 1156px;
  left: 0;
  top: 590px;
  background-color:rgba(230, 221, 218, 1.0) ;
}

.product__list__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: top;
  left: 5%;
  box-sizing: border-box;
}

  .product__list__container1 .product__list__inner,
  .product__list__container3 .product__list__inner,
  .product__list__container5 .product__list__inner {
    margin-left:9px;
  }

  .product__list__container2 .product__list__inner,
  .product__list__container4 .product__list__inner {
    margin-right: 9px;
  }

@media only screen and (min-width:769px) and (max-width:1024px) {
  .section.product {
    padding-top: calc(154px / 2);
    padding-bottom: 90px;
  }

  .product__container:after {
    position: absolute;
    content: '';
    width: 100%;
    height: 872.32px;
    left: 0;
    top: 690px;
    background-color:rgba(234, 198, 157, 0.810) ;
  }

  .product__list__inner {
    left:1.5%;
    padding-top: 90px;
  }

  .product__list__container1 .product__list__inner,
  .product__list__container2 .product__list__inner,
  .product__list__container3 .product__list__inner,
  .product__list__container4 .product__list__inner,
  .product__list__container5 .product__list__inner {
    margin-left: auto;
    margin-right:auto;
  }
}


@media only screen and (max-width: 768px) {
  .section.product {
    padding-top: 63px;
    padding-bottom:36px;
    margin-top: -90px;
    background-color: #F2E9E6;
    background: linear-gradient(0deg, #E4D0CE 0%, #E4D0CE 50%, #F2E9E6 50%, #F2E9E6 99.5%, #F2EEE5 99.5%, #F2EEE5 100%);
/*
    background-color:rgba(221, 172, 141, 0.61) ;
*/  }

  .product__container:after {
    position: absolute;
    content: '';
    width: 100%;
    height: 1700px;
    left: 0;
    top: 1280px;/*
    background-color:rgba(239, 203, 161, 1) ;
    */
  }

  .product__list__inner {
    left: 0;
  }

  .product__list__container1 .product__list__inner,
  .product__list__container2 .product__list__inner,
  .product__list__container3 .product__list__inner,
  .product__list__container4 .product__list__inner, 
  .product__list__container5 .product__list__inner{
    margin-left: auto;
    margin-right: auto;
  }

}

/*product__list*/
.product__list {
  position: relative;
  z-index: 67;
  margin-bottom: 72px;
  flex-basis: calc(50% - 27px);
}

.product__list2,
.product__list4,
.product__list6,
.product__list8,
.product__list10  {
  margin-left: 27px
}

.product__title  {
  margin: 0 0 -9px;
}

.product__title span {
  display: block;
  text-align: left;
  font-size: 3.7rem;
  line-height: 1.23456789;
}

.product__detail {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: top;
  min-height: 256px;
}

.product__detail:after {
  position: absolute;
  z-index: -1;
  content: '';
  margin: auto;
  background: #fff;
  width: 360px;
  height: 360px;
  top: -90px;
  border-radius: 100%;
}

  .product__list__container2 ,
  .product__list__container4 {
    margin-bottom: 72px;
  }

  .product__list__container1 .product__detail:after ,
  .product__list__container3 .product__detail:after ,
  .product__list__container5 .product__detail:after {
    left: 98px;
  }

  .product__list__container2 .product__detail:after ,
  .product__list__container4 .product__detail:after {
    left: -54px;
  }

  .product__list6 .product__title {
    margin-top: -36px;
  } 


@media only screen and (min-width:769px) and (max-width:1024px) {
  .product__list {
    flex-basis: calc(50% - 1em);
    margin-bottom:0;
  }

    .product__list__container2 ,
    .product__list__container4 {
      margin-bottom: 0;
    }

  .product__list2,
  .product__list4,
  .product__list6,
  .product__list8,
  .product__list10  {
    margin-left: 1em;
  }

  .product__title  {
    margin: 0 0 -9px;
  }

  .product__title span {
    font-size: 2.5rem;
  }

  .product__detail {
    min-height: 256px;
  }

  .product__detail:after {
    width: 350px;
    height: 350px;
    top: -99px;
    border-radius: 100%;
  }

  .product__list__container1 .product__detail:after ,
  .product__list__container3 .product__detail:after ,
  .product__list__container5 .product__detail:after {
    left: 1.5em;
  }

  .product__list__container2 .product__detail:after ,
  .product__list__container4 .product__detail:after {
    left: -1.5em;
  }

  .product__list6 .product__title {
    margin-top: -36px;
  } 


}

@media only screen and (max-width: 768px) {
  .product__list {
    margin-bottom: 36px;
    flex-basis: 100%;
    width: 100%;
  }

  .product__list__container2 ,
  .product__list__container4 {
    margin-bottom: auto;
  }

  .product__list1,
  .product__list2,
  .product__list3,
  .product__list4,
  .product__list5,
  .product__list6,
  .product__list7,
  .product__list8,
  .product__list9,
  .product__list10  {
    padding: 0 1em;
    max-width: 375px;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 36px;
  }

  .product__title  {
    margin: 0 0 9px;
  }

  .product__title span {
    font-size: 3rem;
  }

  .product__detail {
    clear: both;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: top;
    min-height: 256px;
  }

  .product__detail:after {
    position: absolute;
    z-index: -1;
    content: '';
    margin: auto;
    background: #fff;
    width: 290px;
    height: 290px;
    top: -54px;
    border-radius: 100%;
  }

  .product__list__container1 .product__detail:after ,
  .product__list__container3 .product__detail:after ,
  .product__list__container5 .product__detail:after {
    left: auto;
  }

  .product__list__container2 .product__detail:after ,
  .product__list__container4 .product__detail:after {
    left: auto;
  }

  .product__list1 .product__detail:after ,
  .product__list3 .product__detail:after ,
  .product__list5 .product__detail:after ,
  .product__list7 .product__detail:after ,
  .product__list9 .product__detail:after {
    left: 17.5%;
  }

  .product__list2 .product__detail:after ,
  .product__list4 .product__detail:after ,
  .product__list6 .product__detail:after ,
  .product__list8 .product__detail:after ,
  .product__list10 .product__detail:after {
    right: 17.5%;
  }

  .product__list6 .product__title,
  .product__list10 .product__title {
    margin-top:auto;
  }

}

/*product__img*/
.product__img {
  flex-basis: 165px;
}

@media only screen and (max-width: 768px) {
  .product__img {
    flex-basis: 32.5%;
  }

}

/*product__text*/
.product__text {
  flex-basis:calc(100% - calc(165px + 36px));
}

  .product__list__container1 .product__img ,
  .product__list__container3 .product__img ,
  .product__list__container5 .product__img {
    order: 1;
  }

  .product__list__container1 .product__text ,
  .product__list__container3 .product__text ,
  .product__list__container5 .product__text {
    order: 2;
    margin-left: 18px;
  }

  .product__list__container2 .product__img ,
  .product__list__container4 .product__img {
    order: 2;
    margin-left: -54px;
  }

  .product__list__container2 .product__text ,
  .product__list__container4 .product__text {
    order: 1;
  }

.product__text span ,
.product__text p {
  display: block;
  text-align: left;
  line-height: 1.6789;
}

.product__text span.number {
  font-size: 0.8rem;
  margin-top: 22.5px;
}

.product__text span.title {
  font-size: 1.3rem;
}

.product__text span.price {
  font-size: 1.1rem;
  margin: 9px 0 22.5px;
}

.product__text p.comment {
  font-size: 1.2rem;
}

@media only screen and (min-width:769px) and (max-width:1024px) {
  .product__img {
    flex-basis: 128px;
  }

  .product__list__container1 .product__img ,
  .product__list__container3 .product__img ,
  .product__list__container5 .product__img {
    order: 1;
    margin-right: 18px;
    margin-left: -18px;
  }

  .product__list__container1 .product__text ,
  .product__list__container3 .product__text,
  .product__list__container5 .product__text {
    order: 2;
    margin-right: auto;
    margin-left: auto;
    flex-basis:calc(100% - 128px);
  }

  .product__list__container2 .product__img ,
  .product__list__container4 .product__img {
    order: 2;
    margin-left: auto;
  }

  .product__list__container2 .product__text ,
  .product__list__container4 .product__text {
    order: 1;
    margin-left: auto;
    margin-right: -36px;
    flex-basis:calc(100% - 128px);
  }

  .product__text span ,
  .product__text p {
    line-height: 1.6789;
  }

  .product__text span.number {
    font-size: 0.8rem;
  }

  .product__text span.title {
    font-size: 1.2rem;
  }

  .product__text span.price {
    font-size: 1.0rem;
    margin: 9px 0 22.5px;
  }

  .product__text p.comment {
    font-size: 1rem!important
  }

}


@media only screen and (max-width: 768px) {
  .product__text {
    flex-basis:70%;
  }

  .product__list__container1 .product__img ,
  .product__list__container3 .product__img ,
  .product__list__container5 .product__img ,
  .product__list__container1 .product__text ,
  .product__list__container3 .product__text ,
  .product__list__container5 .product__text,
  .product__list__container2 .product__img ,
  .product__list__container4 .product__img ,
  .product__list__container2 .product__text ,
  .product__list__container4 .product__text {
    order: initial;
    margin-left: auto;
    margin-right: auto;
  }

  .product__list1 .product__img ,
  .product__list3 .product__img ,
  .product__list5 .product__img ,
  .product__list7 .product__img ,
  .product__list9 .product__img {
    order: 1;
    margin-left: -7.5%;
  }

  .product__list2 .product__img ,
  .product__list4 .product__img ,
  .product__list6 .product__img ,
  .product__list8 .product__img ,
  .product__list10 .product__img {
    order: 2;
    margin-right: -7.5%;
  }

  .product__list1 .product__text ,
  .product__list3 .product__text ,
  .product__list5 .product__text ,
  .product__list7 .product__text ,
  .product__list9 .product__text {
    order: 2;
  }

  .product__list2 .product__text ,
  .product__list4 .product__text ,
  .product__list6 .product__text ,
  .product__list8 .product__text ,
  .product__list10 .product__text {
    order: 1;
  }

  /*product__list1*/
  .product__list1 .product__img {
    order: 1;
    margin-top: 27px;
    flex-basis: 50%;
    margin-left: -5%;
  }

  .product__list1 .product__text {
    order: 2;
    margin-top:18px;
    flex-basis: 55%;
  }

  /*product__list2*/
  .product__list2 .product__img {
    order: 2;
    margin-top: 18px;
    flex-basis: 50%;
  }

  .product__list2 .product__title {
    float: right;
  }

  .product__list2 .product__text {
    order: 1;
    margin-left: 24px!important;
    margin-right: -24px!important;
    margin-top:12px;
    flex-basis:55%;
  }

  /*product__list3*/
  .product__list3 .product__img {
    order: 1;
    margin-top: 27px;
    flex-basis: 50%;
    margin-left: -5%;
  }

  .product__list3 .product__text {
    order: 2;
    margin-top:9px;
    flex-basis: 55%;
  }

  /*product__list4*/
  .product__list4 .product__img {
    order: 2;
    margin-top: 36px;
    flex-basis: 45%;
  }

  .product__list4 .product__title {
    float: right;
  }

  .product__list4 .product__text {
    order: 1;
    margin-left: 18px;
    margin-right: -18px;
    margin-top:18px;
    flex-basis:60%;
  }

  /*product__list5*/
  .product__list5 .product__img {
    order: 1;
    margin-top: 72px;
    flex-basis: 40%;
    margin-left: -5%;
  }

  .product__list5 .product__text {
    order: 2;
    flex-basis: 60%;
  }

  /*product__list6*/
  .product__list6 .product__img {
    order: 2;
    margin-top: 9px;
    flex-basis: 50%;
  }

  .product__list6 .product__title {
    float: right;
  }

  .product__list6 .product__text {
    order: 1;
    margin-left: 27px!important;
    margin-right: -27px!important;
    flex-basis:55%;
  }

  /*product__list7*/
  .product__list7 .product__img {
    order: 1;
    margin-top: 18px;
    flex-basis: 45%;
  }

  .product__list7 .product__text {
    order: 2;
    margin-top:9px;
    flex-basis: 60%;
  }

  /*product__list8*/
  .product__list8 .product__img {
    order: 2;
    margin-top: 9px;
    flex-basis: 45%;
  }

  .product__list8 .product__title {
    float: right;
  }

  .product__list8 .product__text {
    order: 1;
    margin-left: 18px;
    margin-right: -18px;
    margin-top:18px;
    flex-basis:60%;
  }

  /*product__list9*/
  .product__list9 .product__img {
    order: 1;
    margin-top: 18px;
    flex-basis: 45%;
  }

  .product__list9 .product__text {
    order: 2;
    margin-top: 9px;
    flex-basis: 60%;
  }

  /*product__list10*/
  .product__list10 .product__img {
    order: 2;
    margin-top: 36px;
    flex-basis: 50%;
  }

  .product__list10 .product__title {
    float: right;
  }

  .product__list10 .product__text {
    order: 1;
    margin-left: 18px;
    margin-right: -18px;
    margin-top: 27px;
    flex-basis: 55%;
  }

  .product__text span.number {
    font-size: 0.8rem;
    margin-top: calc(22.5px / 2);
  }

  .product__text span.title {
    font-size: 1.1rem;
  }

  .product__text span.price {
    font-size: 1rem;
    margin: calc(9px / 2) 0 calc(22.5px / 2);
  }

  .product__text p.comment {
    font-size: 1rem;
  }

}

/*product__btn*/
.product__btn {
  position: relative;
  z-index: 345;
}

  .product__list__container1 .product__btn ,
  .product__list__container3 .product__btn ,
  .product__list__container5 .product__btn {
    margin-top:36px;
    margin-left:299px;
  }

  .product__list__container2 .product__btn ,
  .product__list__container4 .product__btn {
    margin-top:0;
    margin-left: calc(299px + 9px);
  }

.product__btn a {
  display: block;
  text-decoration: none;
  width: 128px;
  font-size: 1.3rem;
  color: #fff;
  background-color:#D14848;
  text-align: center;
  line-height:1.56789;
  padding:  0;
}

@media only screen and (min-width:769px) and (max-width:1024px) {
  .product__btn {
    text-align: center;
    float: right;
    margin-top: 0!important;
    margin-right: 1em!important;
    width: 128px;
  }
    .product__list__container1 .product__btn ,
    .product__list__container2 .product__btn ,
    .product__list__container3 .product__btn ,
    .product__list__container4 .product__btn,
    .product__list__container5 .product__btn {
      margin-top:36px;
      margin-left:0;
    }

}

@media only screen and (max-width: 768px) {
  .product__btn  {
    text-align: center;
    float: right;
    margin-top: 0!important;
    width: 128px;
  }

  .product__btn a {
    width: 100%;
    font-size: 0.8rem;
    padding: 9px 0;
  }

}


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

Whats  Setting

---------------------------------------------------------- */
/*whats*/
.section.whats {
  position: relative;
  width: 100%;
  z-index: 1;
  padding:calc(180px + 36px) 0 calc(90px + 45px);
  background-color: rgba(232, 218, 199, 0.61);
  overflow: hidden;
}

.section.whats:after {
  position: absolute;
  content: '';
  z-index: -1;
  width:calc(100% + 90em);
  height: 100%;
  top: 0;
  left: -90em;
  background-position:top center;
  background-repeat: no-repeat;
  background-image: url(../img/effect__bg.png);
  background-size: 1228px;
  opacity: 0.8;
  padding:calc(180px + 36px) 0;
}

.whats__container  {
  padding: 45px 0;
  position: relative;
  z-index: 3;
  margin: auto;
}

.whats__container p {
  font-size: 2.9rem;
  text-align: center;
  margin: auto;
}

.whats__container p span.dots {
  -webkit-text-emphasis: filled;
  text-emphasis: filled;
}

@media only screen and (min-width:769px) and (max-width:1024px) {
  .section.whats {
    padding:calc(180px / 2) 2.5em calc(180px / 3);
    box-sizing: border-box;
  }

  .section.whats:after {
    position: absolute;
    content: '';
    z-index: -1;
    width: 100%;
    height: 100%;
    top: 2.5em;
    left: -20em;
    background-position:top center;
    background-repeat: no-repeat;
    background-image: url(../img/whats__bg.png);
    background-size: 100%;
    opacity: 0.8;
    padding:90px 0;
  }

  .whats__container p {
    font-size: 2.2rem;
  }
}

@media only screen and (max-width: 768px) {
  .section.whats {
    padding:45px 0 ;
  }

  .section.whats:after {
    position: absolute;
    content: '';
    z-index: -1;
    width: 100%;
    height: 100%;
    top: 2.5em;
    left: -10em;
    background-position:top center;
    background-repeat: no-repeat;
    background-image: url(../img/whats__bg.png);
    background-size:  100%;
    opacity: 0.8;
    padding:90px 0;
  }

  .whats__container  {
    padding: calc(45px / 1) 0 calc(45px / 2) ;
  }

  .whats__container p {
    font-size: 1.2rem;
    text-align: center;
    margin: auto;
  }
}


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

Feature Setting

---------------------------------------------------------- */
/*feature*/
.section.feature {
  position: relative;
  width: 100%;
  z-index: 2;
  padding:81px 0 ;
  background-color: #fff;
  overflow-x: hidden;
}

.feature__container {
  padding: 0;
  margin-top: -27px;
  position: relative;
}

.feature__list li {
  font-size: 2.4rem;
  margin: 0 0 36px;
  line-height: 1.6789;
  padding-left:calc(calc(79px /2) + 18px) ;
  background-position: 0 4.5px;
  background-repeat: no-repeat;
  background-size: calc(79px /2);
  background-image: url(../img/icon__check1.png);
}

@media only screen and (min-width:769px) and (max-width:1024px) {
  .section.feature {
    padding:calc(81px / 1.5) 7.5em;
    box-sizing: border-box;
  }

  .feature__list li {
    font-size: 2rem;
    margin: 0 0 27px;
    padding-left:calc(calc(79px /3) + 18px) ;
    background-position: 0 6.25px;
    background-size: calc(79px / 3);
  }
}

@media only screen and (max-width: 768px) {
  .section.feature {
    padding:45px 0 18px;
    box-sizing: border-box;
  }

  .feature__container {
    margin-top: -12.5px;
  }

  .feature__container.container__xxxnarrow {
    padding-left: 2em;
    padding-right: 2em;
  }

  .feature__list li {
    font-size: 1.2rem;
    margin: 0 0 calc(36px / 1.5);
    line-height: 1.6789;
    padding-left:calc(calc(calc(79px /2) + 18px) /2) ;
    background-size: calc(calc(79px /2) /2);
  }

}

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

Effect Setting

---------------------------------------------------------- */
/*effect*/
.section.effect {
  position: relative;
  width: 100%;
  z-index: 1;
  padding:108px 0 ;
  background-color: rgba(232, 218, 199, 0.61);
  overflow: hidden;
}

.section.effect:after {
  position: absolute;
  content: '';
  z-index: 1;
  width:calc(100% + 90em);
  height: 100%;
  top: 0;
  right: -90em;
  background-position:top center;
  background-repeat: no-repeat;
  background-image: url(../img/effect__bg.png);
  background-size: 1128px;
  opacity: 0.8;
  padding:calc(180px + 36px) 0;
}

.effect__text {
  padding: 72px 0;
  position: relative;
  z-index: 23;
  text-align: center;
  margin: auto;
}

.effect__text p {
  font-size: 2.4rem;
  line-height: 2.23456;
}

.effect__message {
  padding: 90px 0 0;
  text-align: center;
  margin: auto;
}

.effect__message p {
  font-size: 3.9rem;
}

.effect__img {
  position: absolute;
  right:36px;
  top:72px;
  z-index: 12;
}

.effect__img img {
  width: calc(703px /2);
}

@media only screen and (min-width:769px) and (max-width:1024px) {
  .section.effect {
    padding:90px 0 45px;
  }

  .effect__text p {
    font-size: 2rem;
  }

  .effect__message {
    padding:calc(90px / 1.5) 0 0;
    text-align: center;
    margin: auto;
  }

  .effect__message p {
    font-size: 3rem;
  }

  .effect__img {
    display: none;
  }
}

@media only screen and (max-width: 768px) {
  .section.effect {
    padding:45px 0 27px;
  }

  .section.effect:after {
    position: absolute;
    content: '';
    z-index: 1;
    width:calc(100% + 70em);
    height: 100%;
    top: 0;
    right: -70em;
    background-position:top center;
    background-repeat: no-repeat;
    background-image: url(../img/effect__bg.png);
    background-size: 1128px;
    opacity: 0.8;
    padding:calc(180px + 36px) 0;
  }

  .effect__text {
    padding:calc(72px / 2) 0;
  }

  .effect__text p {
    font-size:1.1rem ;
    line-height: 2;
  }

  .effect__message {
    padding: calc(90px / 2) 0 0;
  }

  .effect__message p {
    font-size:1.9rem
  }

  .effect__img {
    display: none;
  }

}

/*effect__detail*/
.effect__detail {
  padding: 0 0 54px;
  z-index: 56;
  position: relative;
  background-color: #fff;
}

.effect__detail__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: top;
  padding-top: 72px;
}

.effect__detail__list li {
  flex-basis: 420px;
  position: relative;
}

.effect__detail__list li span.caption {
  display: block;
  font-size: 2.4rem;
}

.effect__detail__list li.before:after {
  position: absolute;
  content: '';
  left: 108%;
  top: 50%;
  width: calc(76px /2);
  height: calc(86px /2);
  background-position:0;
  background-repeat: no-repeat;
  background-size: calc(76px /2) calc(86px /2);
  background-image: url(../img/icon__arrow4.png);
}

.effect__detail__message {
  text-align: center;
  margin: 0 auto;
  padding: 54px 0 45px;
}

.effect__detail__message p {
  font-size: 2.5rem;
}

.effect__detail__caution {
  text-align: center;
  margin: 0 auto;
  padding: 0 0;
}

.effect__detail__caution p {
  font-size: 1rem;
}

@media only screen and (min-width:769px) and (max-width:1024px) {
  .effect__detail {
    padding-left:2.5em;
    padding-right:2.5em;
    box-sizing: border-box;
  }

  .effect__detail__list  {
    padding-top: 27px;
  }

  .effect__detail__list li {
    flex-basis: 45%;
  }

  .effect__detail__list li.before:after {
    position: absolute;
    content: '';
    left: 108%;
    top: 50%;
    width: calc(76px /3);
    height: calc(86px /3);
    background-position:0;
    background-repeat: no-repeat;
    background-size: calc(76px /3) calc(86px /3);
    background-image: url(../img/icon__arrow4.png);
  }

  .effect__detail__list li span.caption {
    font-size:1.6rem;
  }

  .effect__detail__message p {
    font-size: 1.9rem
  }

}

@media only screen and (max-width: 768px) {
  .effect__detail {
    padding: 0 0 ;
    background-color: transparent;
  }

  .effect__detail__list {
    padding: 2.5em 2.5em 0
  }

  .effect__detail__list li {
    flex-basis: 100%;
    margin-bottom: 45.0px;
    position: relative;
  }

    .effect__detail__list li:nth-child(even)  {
      margin-bottom: 0px;
    }

  .effect__detail__list li span.caption {
    font-size:1.2rem;
  }

  .effect__detail__list li.before:after {
    position: absolute;
    content: '';
    left: calc(50% - calc(calc(76px / 3) /2));
    top: 100%;
    width: calc(76px /3);
    height: calc(86px /4);
    background-position:0;
    background-size: calc(76px /3) calc(86px /4);
    background-image: url(../img/icon__arrow2.png);
    margin: 18px auto;
  }

  .effect__detail__message {
    padding: 27px 0 ;
  }

  .effect__detail__message p {
    font-size: 1.5rem;
  }

}


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

Footer Setting

---------------------------------------------------------- */
/*footer*/
footer {
  position: relative;
}

.footer__container address {
  font-style: normal;
  font-size: 1.2rem;
  text-align: center;
  display: block;
  margin:auto
}


@media only screen and (max-width: 768px) {
  .footer__container {
    padding: 2.5em 0;
  }
  
  .footer__container address {
    font-size: 1rem;
  }

}

/*footer__side__menu*/
.footer__side__menu {
  transform: rotate(-270deg);
  display: block;
  position: fixed;
  z-index: 12345;
  bottom: 3em;
  right: -11.5px;
}

.footer__side__menu:before {
  position: fixed;
  transform: rotate(-270deg);
  content: '';
  height: 72px;
  margin: 0;
  top: 12.5px;
  left: -9px;
  z-index: 67;
  transform-origin: top left;
  border-left: 1px solid #707070;
}

.footer__side__menu span {
  display: block;
  font-size: 1.2rem; 
}

.footer__side__menu a {
  display: block;
  text-decoration: none;
}

@media only screen and (max-width:768px) {
  .footer__side__menu {
    transform: rotate(-270deg);
    position: fixed;
    z-index: 45;
    bottom: 3em;
    right: -0.55em;
    z-index: 12345;
  }

  .footer__side__menu:before {
    position: fixed;
    transform: rotate(-270deg);
    content: '';
    height:calc(171px /2);
    margin: 0;
    top: 9px;
    left: -9px;
    z-index: 67;
    transform-origin: top left;
    border-left: 1px solid #707070;
  }

  .footer__side__menu span {
    font-size: 1rem; 
  }

}