@charset "UTF-8";
/* CSS Document */
body{
	font-family: 'ヒラギノ丸ゴ ProN','Hiragino Maru Gothic ProN','Meiryo UI','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif;
	color:#4d4d4d;
}
img {
  width: 100%;
}
a img:hover {
    opacity:0.7;
}
a {
  text-decoration: none;
}
.container {
  max-width: 900px;
  width: 100%;
  margin: 0 auto 15%;
}
h2{
    margin-bottom:8%;
}
h2.other{
    margin-bottom:0;
}
.point_box{
   padding:4% 8%;
}
.point_mark {
    width: 26%;
    margin: 8% auto 2%;
}
.point_img{
    padding-bottom:8%;
}
span.break{
   display:inline-block;
}
.spec_box {
    display: flex;
    align-items: center;
    padding: 0 10% 13%;
}
.spec_image {
    flex-basis: 50%;
    flex-shrink: 0;
    padding-right: 5%;
    box-sizing: content-box;
}
.spec_text {
    flex-basis: 47%;
    color:#543f31;
}
h3.name {
   font-size: clamp(14px,3vmin,22px);
   margin: 2% 0 1%;
   padding-left:2%;
   font-weight: 700;
}
p.spec {
    font-size: clamp(10px,3vmin,20px);
    line-height: 1.5em;
     padding-left:2%
}
p.price {
    font-size: clamp(14px,3vmin,24px);
    padding-left:2%;
    margin-top: 4%;
}
span.small{
    font-size: clamp(8px,3vmin,16px);
}
p.button:hover{
    background-color: #80613a;
    border:3px solid #80613a;
}
p.button {
    margin: 10% auto 0;
    background-color: #fff;
    text-align: center;
    border: 3px solid #80613a;
    transition-duration: 0.3s;
}
p.button a:hover {
    color: #fff;
}
p.button a {
    display: block;
    text-decoration: none;
    color: #80613a;
     font-size: clamp(11px,3vmin,24px);
    font-weight:bold;
    letter-spacing:0.1em;
    padding: 5% 2%;
    line-height: 1em;
}
section.other{
    background-color:#fff;
}
section.other .spec_text {
    flex-basis: 50%;
    padding-top: 0;
}
.separator{
    padding: 8% 8% 15%;
}

/*-------------------------------fade-in---------------------------*/
.fade-in{
	opacity : 0;
	visibility: hidden;
	transition: 1s;
	transform: translateY(30px);
}
/*アニメーション要素までスクロールした時のスタイル*/
.active{
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
/*-------------------------------backhome_btn---------------------------*/
p.backhome_btn:hover{
    background-color: #fff;
    border:3px solid #e8651b;
}
p.backhome_btn {
    width: 60%;
    margin: 8% auto 35%;
    background-color: #e8651b;
    text-align: center;
    border: 3px solid #fff;
    border-radius: 45px;
    transition-duration: 0.3s;
}
p.backhome_btn a:hover {
    color: #e8651b;
}
p.backhome_btn a {
    display: block;
    text-decoration: none;
    color: #fff;
    font-size: clamp(14px,3vmin,24px);
    font-weight:bold;
    line-height: 1.4em;
    letter-spacing:0.1em;
    padding: 5% 2%;
}
/*------------------------------- to-top---------------------------*/
.to-top {
    position: fixed;
    width: 55px;
    height: auto;
    right: 5%;
    bottom: 3%;
    cursor: pointer;
    opacity:0.7;
    z-index: 1;
}
/*-------------------------------responsive---------------------------*/
@media screen and (max-width:600px){
.spec_text {
    padding-top: 20%;
}
p.button {
    border: 2px solid #80613a;
}
.to-top {
    width: 40px;
    right: 2%;
    bottom: 2%;
}
}
@media screen and (max-width:500px){
.point_box {
    padding: 4% 5%;
}
.spec_box {
    padding: 0 6% 13%;
}
section.other .spec_box {
    padding: 0 5% 20%;
}
section.other .spec_image {
    flex-basis: 45%;
}
section.other .spec_text {
    flex-basis: 55%;
}
p.button a {
    padding: 6% 2%;
}
p.backhome_btn {
    width: 65%;
    margin: 0 auto 35%;
}
}


  .fs-l-main {
    padding-left: 0;
    padding-right: 0;
  }
  .ctm_heading--page {
  display: none;
  }
  .fs-c-productList {
  display: none;
  }
  

  .close_container {
    max-width: 900px;
    margin:  0 auto;

    width: 100%;
  }
/* .close_content {
    margin: 0 8%;
    padding: 3% 0;
} */

/*--------------- sisters ------------*/
.sisters {
  width: 65%;
  margin: 10% auto 0;
}
p.last_btn:hover{
  background-color: #fff;
  border:3px solid #41b6c7;
}
p.last_btn {
  width: 80%;
  margin: -0.5% auto 30%;
  background-color: #41b6c7;
  text-align: center;
  border: 2px solid #41b6c7;
  border-radius: 35px;
  transition-duration: 0.3s;
}
p.last_btn a:hover {
  color: #41b6c7;
}
p.last_btn a {
  display: block;
  text-decoration: none;
  color: #fff;
  font-size: clamp(13px,3.5vmin,24px);
  font-weight:bold;
  letter-spacing:0.1em;
  padding: 4% 2%;
}