@charset "UTF-8";
/* ruby */
.home-product .product-name {
  position: absolute;
  top: 2rem;
  left: 2rem;
  margin: 0;
  padding: 1em 0.5em;
  width: 50%;
  max-width: 18rem;
  font-size: 2.3rem;
}

.tatami-contents rt {
  font-size: 50%;
}

@media screen and (min-width: 880px){
  .home-product rt {
    margin-bottom: 0.5em;
    transform: translateY(-0.5em);
  }
}

.product-link-button a{
  position: relative;
  padding: 0.5em 3.5em;
  max-width: 48rem;
  display: block;
  border-radius: 4rem;
  background-color: #fff;
  border: 0.2rem solid #071e1a;
  color: #071e1a;
  font-size: 1.8rem;
  line-height: 1.6;
  text-align: center;
}

.product-link-button a::before{
  position: absolute;
  top: 0;
  bottom: 0;
  right: 3rem;
  margin: auto;
  padding: 0;
  display: block;
  content: "";
  z-index: 999;
  width: 1.5rem;
  height: 1.5rem;
  border: 0.2rem solid;
  border-color: #071e1a #071e1a transparent transparent;
  transform: rotate(45deg);
}

.product-link-button a::after{
  position: absolute;
  top: 0;
  bottom: 0;
  right: 2.2rem;
  margin: auto;
  padding: 0;
  display: block;
  content: "";
  z-index: 999;
  width: 1.5rem;
  height: 1.5rem;
  border: 0.2rem solid;
  border-color: #071e1a #071e1a transparent transparent;
  transform: rotate(45deg);
}


@media (hover: hover) {
.product-link-button a:hover{
  background-color: #071e1a;
  color: #fff;
}

.product-link-button a:hover::before{
  border-color: #fff #fff transparent transparent;
}

.product-link-button a:hover::after{
  border-color: #fff #fff transparent transparent;
}
}

.product-link-button02{
  position: relative;
  max-width: 18rem;
  padding: 0.5em 3em 0.5em 3.6em;
  display: block;
  border-radius: 4rem;
  border: 0.2rem solid #071e1a;
  background-color: #fff;
  color: #071e1a;
  font-size: 1.8rem;
  line-height: 1.6;
  text-align: center;
  cursor: pointer;
  transition: all .5s ease;
}

.product-link-button02::before{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 1.5rem;
  margin: auto;
  padding: 0;
  width: 2.2rem;
  height: 2.8rem;
  display: block;
  background: url(/tatami/shop/ciss/img/megane.svg) center center no-repeat;
  background-size: contain;
  content: "";
  z-index: 100;
}


@media (hover: hover) {
.product-link-button02:hover{
  background-color: #071e1a;
  color: #fff;
}

.product-link-button02:hover::before{
  background: url(/tatami/shop/ciss/img/megane-white.svg) center center no-repeat;
  background-size: contain;
}
}

@media screen and (max-width: 767px){
  #FLOW .product-link-button {
    min-width: 36rem;
  }
}

@media screen and (max-width: 450px){
  #FLOW .product-link-button {
    min-width: 32rem;
  }

  .product-link-button a {
    font-size: 1.6rem;
    line-height: normal;
    padding: 1.4rem 0 1.2rem;
  }

  .product-link-button a::before {
    right: 2rem;
    width: 1.3rem;
    height: 1.3rem;
  }

  .product-link-button a::after {
    right: 1.2rem;
    width: 1.3rem;
    height: 1.3rem;
  }
}

/* modal ------------------------------------------*/
.modal {
  display: none;
  position: fixed;
  z-index: 99999;
  height: 100%;
  width: 100%;
  background-color: rgba(0,0,0,0.5);
  margin: auto;
  box-sizing: border-box;
  top: 0;
  left: 0;
  overflow-x: auto;
  overflow-y: hidden;
}

.modal.active{display:flex;}

.modal-box {
  position: relative;
  background-color: #f4f4f4;
  margin: auto;
  padding: 2rem 4rem;
  max-width: 50rem;
  box-shadow: 0 0.5rem 0.8rem 0 rgba(0,0,0,0.2), 0 0.7rem 2rem 0 rgba(0,0,0,0.17);
  animation-name: modalopen;
  animation-duration: 1s;
}

.modal-box p{
  text-align: left;
}

.modal-box .color-name{
  color: #4d8d01;
  font-weight: bold;
  font-size: 1.3em;
}

@keyframes modalopen {
  from {opacity: 0}
  to {opacity: 1}
}

.modalClose {
  position: absolute;
  font-size: 4rem;
  font-weight: bold;
  top: -5rem;
  right: 0;
  color: #fff;
}

@media (hover: hover) {
.modalClose:hover {
  cursor: pointer;
}
}

.modal-name{
  color: #4d8d01;
  font-weight: bold;
  font-size: 1.3em;
}

.modal-box img.big-img{
  max-width: 30rem;
}


@media screen and (max-width: 767px) {

.tatami-product-main-title .product-name em{ font-size: 1.6rem;}

.tatami-product-main-title .product-name strong{ font-size: 2.6rem;}

.tatami-product-intro .intro-inner dl{ width: 100%;}
.tatami-product-intro .intro-inner dt h2{ font-size: 2.2rem;}
.tatami-product-intro .intro-inner dd{ font-size: 1.6rem;}


.tatami-product-intro .intro-inner .intro-link{
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.tatami-product-intro .intro-inner .intro-link li{
  margin: 0;
  padding: 1em 0;
  width: calc(50% - 0.5em);
}

.product-link-button a{ font-size: 1.6rem;}

}/* End max 767 */


@media screen and (max-width: 600px) {

.tatami-product-intro .photo-caption{
  margin: auto;
  padding: 1em 0;
  font-size: 1.4rem;
  text-align: left;
}

}/* End max 600 */



@media screen and (max-width: 480px) {

.tatami-product-intro .intro-inner .intro-link li{
  margin: 0;
  padding: 0.5em 0;
  width: 100%;
}
.tatami-product-intro .intro-inner .intro-link li:first-child{ margin: 1em 0 0;}
.product-link-button a{ font-size: 1.6rem;}

}/* End max 480 */




/* tatami-product-section-inner */

.tatami-product-section-inner{
  position: relative;
  margin: auto;
  padding: 2em 0 4em;
  width: 94%;
  max-width: 120rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
}



@media screen and (max-width: 767px) {

.tatami-product-section-inner{
  position: relative;
  margin: auto;
  padding: 2em 0;
  width: 94%;
  max-width: 120rem;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

}/* End max 767 */


/* End IE */

.tatami-section .tatami-section-title rt {
  letter-spacing:0.5em;
}

.color-directory,.color2-directory{ display: none !important;}