﻿
 /*-----デフォルト------------------------------*/
 @charset "UTF-8";

  html {
    font-size: 62.5%;
  }

  body {
    width: 100%;
  }

  img,
  video,
  svg {
    width: 100%;
    height: auto;
  }
/*---//デフォルト-------------------------------*/

/* パンくず 追加スタイル PC */
@media only screen and (min-width: 768px) {
  .breadcrumb__list {
    padding-bottom: 1.6rem;
  }
}
/* //パンくず 追加スタイル PC */
#juynko_RING-MOTIF a{
  display: inline;
}

#juynko_RING-MOTIF .price span {
  display: inline;
}

#juynko_RING-MOTIF * {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

/*==========================
      共通
=========================*/


/*
.back_pc{
    background: url(../img/PC.jpg); 
    background-repeat: no-repeat;
    background-position: center;
    background-size: 136.6rem;
    background-position-y: -13.9rem;
}
*/

#juynko_RING-MOTIF {
  margin: auto;
  font-size: 1.4rem;
  letter-spacing: 0.075em;
  line-height: 1.857;
  font-family: "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HiraMinProN", "游明朝体", "Yu Mincho", YuMincho, "MS P明朝", "MS PMincho", source-han-serif-japanese, serif;
  font-weight: 300;
  font-style: normal;
  color: #291F0D;
}

h3.sect_ttl{
  margin: 0 auto;
}

h4.sect_sub-ttl{
  font-size: 1.8rem;
  letter-spacing: 0.075em;
  line-height: 1;
  font-family: "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HiraMinProN", "游明朝体", "Yu Mincho", YuMincho, "MS P明朝", "MS PMincho", source-han-serif-japanese, serif;
  font-weight: 300;
  font-style: normal;
  color: #291F0D;
  margin-top: 3rem;
  margin-bottom: 1.4rem;
}

.text-box{
  font-size: 1.4rem;
  letter-spacing: 0.075em;
  line-height: 1.857;
  font-family: "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HiraMinProN", "游明朝体", "Yu Mincho", YuMincho, "MS P明朝", "MS PMincho", source-han-serif-japanese, serif;
  font-weight: 300;
  font-style: normal;
  color: #291F0D;
}

.ta_c{
  text-align: center;
}

.flex_column{
  display: flex;
  justify-content: space-between;
}

.prod_list{
  margin: 0 auto;
  margin-top: 3.3rem;
}

.prod_img{
  width: 30rem;
}

.price{
  font-size: 1.2rem;
  letter-spacing: 0.075em;
  line-height: 1.5;
  font-family: "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HiraMinProN", "游明朝体", "Yu Mincho", YuMincho, "MS P明朝", "MS PMincho", source-han-serif-japanese, serif;
  font-weight: 300;
  font-style: normal;
  color: #291F0D;
  text-decoration: underline;
  margin-top: 0.6rem;
}
/*==========================
          top
=========================*/
.top{
  width: 136.6rem;
  margin: 0 auto;
  margin-bottom: 9rem;
}

.TOP_ttl{
  width: 24.88rem;
  margin: 0 auto;
  margin-top: 1rem;
  margin-bottom: 2.29rem;
}

.top-img{
  width: 100%;
  margin-bottom: 8rem;
}

.TOP_sub{
  width: 96.2rem;
  margin: 0 auto;
  align-items: center;
}

.TOP_description-box{
  width: 45rem;
}

.top .text-box{
  width: 45rem;
}

.print_img{
  width: 48rem;
}
/*=======//top==============================================*/

.sect_list{
  background-color: #FDFCF8;
  padding-top: 7.34rem;
  padding-bottom: 8rem;
}

/*==========================
      section01
=========================*/
.sect01{
  width: 97.6rem;
  margin: 0 auto;
  margin-bottom: 9.2rem;
}

.sect01 h3.sect_ttl{
  width: 30.95rem;
}

.sect01 .prod_list{
  width: 97.6rem;
}
/*=======//section01==============================================*/


/*==========================
      section02
=========================*/ 
.sect02{
  width: 95.6rem;
  margin: 0 auto;
  margin-bottom: 8rem;
}

.sect02 h3.sect_ttl{
  width: 30.95rem;

}

.sect02 h4.sect_sub-ttl{
  margin-top: 2rem!important;
}

.sect02 .prod_list{
  width: 63rem;
}

.sect02 .list02{
  margin-right: -0.8rem;
}
/*=======//section02==============================================*/


/*==========================
      section03
=========================*/ 
.sect03{
  width: 95.6rem;
  margin: 0 auto;
  margin-bottom: 8rem;
}

.sect03 h3.sect_ttl{
  width: 34.5rem;
}

.sect03 .prod_list{
  width: 63.3rem;
}

.sect03 .list02{
  margin-right: -0.8rem;
}
/*=======//section03==============================================*/


/*==========================
      button
=========================*/
.button{
  width: 40rem;
  margin: 0 auto;
}

.button-A{
  width: 100%;
  margin-bottom: 2rem;
}

.button-B{
  width: 100%;
}
/*=======//button==============================================*/




/*=====PCのみ==============================*/
@media screen and (min-width: 768px) {
  .sp_only {
    display: none;
  }

  .pc-order01 {
    order: 1;
  }

  .pc-order02 {
    order: 2;
  }


}

/*=====//PCのみ==============================*/

/*=====タブレットのみ==============================*/
@media screen and (min-width: 768px) and (max-width: 1366px) {
  html {
    font-size: calc(10*(100vw/1366)) !important;
  }

}

/*=====//タブレットのみ==============================*/

/*=====SPのみ==============================*/
@media screen and (max-width: 767px) {
  .pc_only {
    display: none;
  }


  /*==========================
      共通
=========================*/

  /*.back_sp {
    background: url(../img/SP.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-position-y: -95px;
    background-size: 100%;
  }
*/

#juynko_RING-MOTIF {
  margin: auto;
  font-size: calc(28*(100vw/750));
  letter-spacing: 0.075em;
  line-height: 1.71;
  font-family: "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HiraMinProN", "游明朝体", "Yu Mincho", YuMincho, "MS P明朝", "MS PMincho", source-han-serif-japanese, serif;
  font-weight: 300;
  font-style: normal;
  color: #291F0D;
}

h3.sect_ttl{
  margin: 0 auto;
}

h4.sect_sub-ttl{
  font-size: calc(36*(100vw/750));
  letter-spacing: 0.075em;
  line-height: 1;
  font-family: "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HiraMinProN", "游明朝体", "Yu Mincho", YuMincho, "MS P明朝", "MS PMincho", source-han-serif-japanese, serif;
  font-weight: 300;
  font-style: normal;
  color: #291F0D;
  margin-top: calc(40*(100vw/750));
  margin-bottom: calc(22*(100vw/750));
}

.text-box{
  font-size: calc(28*(100vw/750));
  letter-spacing: 0.075em;
  line-height: 1.71;
  font-family: "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HiraMinProN", "游明朝体", "Yu Mincho", YuMincho, "MS P明朝", "MS PMincho", source-han-serif-japanese, serif;
  font-weight: 300;
  font-style: normal;
  color: #291F0D;
}

.ta_c{
  text-align: center;
}

.flex_column{
  display: flex;
  justify-content: start;
  flex-direction: column;
}

.prod_list{
  margin: 0 auto;
  margin-top: calc(30*(100vw/750));
}

.prod_img{
  width: calc(570*(100vw/750));
  margin: 0 auto;
}

.prod_mb{
  margin-bottom: calc(51*(100vw/750));
}

.price{
  font-size: calc(24*(100vw/750));
  letter-spacing: 0.075em;
  line-height: 1.5;
  font-family: "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HiraMinProN", "游明朝体", "Yu Mincho", YuMincho, "MS P明朝", "MS PMincho", source-han-serif-japanese, serif;
  font-weight: 300;
  font-style: normal;
  color: #291F0D;
  text-decoration: underline;
  margin-top: calc(-6*(100vw/750));
}
/*==========================
          top
=========================*/
.top{
  width: calc(750*(100vw/750));
  margin: 0 auto;
  margin-bottom: calc(100*(100vw/750));
}

.TOP_ttl{
  width: calc(350*(100vw/750));
  margin: 0 auto;
  margin-top: calc(100*(100vw/750));
  margin-bottom: calc(29.8*(100vw/750));
}

.top-img{
  width: 100%;
  margin-bottom: 0;
}

.TOP_sub{
  width: calc(630*(100vw/750));
  margin: 0 auto;
  align-items: center;
}

.TOP_description-box{
  width: calc(632*(100vw/750));
}

.top .text-box{
  width: calc(632*(100vw/750));
}

.print_img{
  width: calc(630*(100vw/750));
  margin-top: calc(31.2*(100vw/750));
}
/*=======//top==============================================*/

.sect_list{
  background-color: #FDFCF8;
  padding-top: calc(100*(100vw/750));
  padding-bottom: calc(245*(100vw/750));
}

/*==========================
      section01
=========================*/
.sect01{
  width: calc(630*(100vw/750));
  margin: 0 auto;
  margin-bottom: calc(96*(100vw/750));
}

.sect01 h3.sect_ttl{
  width: calc(481.6*(100vw/750));
}

.sect01 .prod_list{
  width: calc(570*(100vw/750));
}
/*=======//section01==============================================*/


/*==========================
      section02
=========================*/ 
.sect02{
  width: calc(630*(100vw/750));
  margin: 0 auto;
  margin-bottom: calc(97*(100vw/750));
}

.sect02 h3.sect_ttl{
  width: calc(481.6*(100vw/750));

}

.sect02 h4.sect_sub-ttl{
  margin-top: 2rem!important;
}

.sect02 .prod_list{
  width: calc(570*(100vw/750));
  margin-top: calc(34*(100vw/750));
}

.sect02 .prod_img{
  width: calc(560*(100vw/750));
  margin-bottom: calc(7*(100vw/750));
}

.sect02 .list02{
  margin-right: calc(0*(100vw/750));
  margin-top: calc(4*(100vw/750));
}
/*=======//section02==============================================*/


/*==========================
      section03
=========================*/ 
.sect03{
  width: calc(630*(100vw/750));
  margin: 0 auto;
  margin-bottom: calc(85*(100vw/750));
}

.sect03 h3.sect_ttl{
  width: calc(534*(100vw/750));
}

.sect03 .prod_list{
  width: calc(570*(100vw/750));
  margin-top: calc(83*(100vw/750));
}

.sect03 .list02{
  margin-right: calc(0*(100vw/750));
}

.sect03 .img06 {
  margin-bottom: calc(-11*(100vw/750));
}

.sect03 .img07{
  width: calc(563*(100vw/750));
  margin-bottom: calc(6*(100vw/750));
}
/*=======//section03==============================================*/



/*==========================
      button
=========================*/
.button{
  width: calc(630*(100vw/750));
  margin: 0 auto;
}

.button-A{
  width: 100%;
  margin-bottom: calc(40*(100vw/750));
}

.button-B{
  width: 100%;
}
/*=======//button==============================================*/




}
/*=====//SPのみ==============================