@charset "UTF-8";

/************************
* foundation
************************/
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local('Montserrat Medium'), local('Montserrat-Medium'), url(https://fonts.gstatic.com/s/montserrat/v14/JTURjIg1_i6t8kCHKm45_ZpC3gTD_vx3rCubqg.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local('Montserrat Medium'), local('Montserrat-Medium'), url(https://fonts.gstatic.com/s/montserrat/v14/JTURjIg1_i6t8kCHKm45_ZpC3g3D_vx3rCubqg.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local('Montserrat Medium'), local('Montserrat-Medium'), url(https://fonts.gstatic.com/s/montserrat/v14/JTURjIg1_i6t8kCHKm45_ZpC3gbD_vx3rCubqg.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local('Montserrat Medium'), local('Montserrat-Medium'), url(https://fonts.gstatic.com/s/montserrat/v14/JTURjIg1_i6t8kCHKm45_ZpC3gfD_vx3rCubqg.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local('Montserrat Medium'), local('Montserrat-Medium'), url(https://fonts.gstatic.com/s/montserrat/v14/JTURjIg1_i6t8kCHKm45_ZpC3gnD_vx3rCs.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat_bold';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Montserrat Bold'), local('Montserrat-Bold'), url(https://fonts.gstatic.com/s/montserrat/v14/JTURjIg1_i6t8kCHKm45_dJE3gTD_vx3rCubqg.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Montserrat_bold';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Montserrat Bold'), local('Montserrat-Bold'), url(https://fonts.gstatic.com/s/montserrat/v14/JTURjIg1_i6t8kCHKm45_dJE3g3D_vx3rCubqg.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Montserrat_bold';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Montserrat Bold'), local('Montserrat-Bold'), url(https://fonts.gstatic.com/s/montserrat/v14/JTURjIg1_i6t8kCHKm45_dJE3gbD_vx3rCubqg.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Montserrat_bold';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Montserrat Bold'), local('Montserrat-Bold'), url(https://fonts.gstatic.com/s/montserrat/v14/JTURjIg1_i6t8kCHKm45_dJE3gfD_vx3rCubqg.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat_bold';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Montserrat Bold'), local('Montserrat-Bold'), url(https://fonts.gstatic.com/s/montserrat/v14/JTURjIg1_i6t8kCHKm45_dJE3gnD_vx3rCs.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

*{
  margin:0;
  padding:0;
}
body{
  color:#333333;
  font-family:'Montserrat', 'Noto Sans JP',"ヒラギノ角ゴ Pro W6","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック",MS PGothic,sans-serif;
  font-size:12px;
  line-height:20px;
}
img{
  max-width:100%;
}
a{
  color:#333333;
  text-decoration:none;
}

.container{
  width:660px;
  margin:0 auto;
}
.title-area{
  background-color:white;
  padding:15px 0;
  overflow:hidden;
  margin-top: 14px;
  margin-bottom: 32px;
}
.title-area h1{
  font-size:48px;
  font-weight:bold;
  text-align:center;
  color: #cfc29d;
  font-family: 'Montserrat_bold';;
}
.title-area h1 small{
  font-size:11px;
  color:#c2b28d;
  margin-left:7px;
  display:inline-block;
  vertical-align:top;

  -webkit-transform-origin: 0 0;
  -webkit-transform: scale(1, 1.01);
  -moz-transform-origin: 0 0;
  -moz-transform: scale(1, 1.01);
  -ms-transform-origin: 0 0;
  -ms-transform: scale(1, 1.01);
  -o-transform-origin: 0 0;
  -o-transform: scale(1, 1.01);
}
.close-wrap .head-close {
  position: absolute;
  top: 22px;
  right: 18px;
  display: block;
  margin: 0;
  width: 33px;
  height: 33px;
}
.close-wrap .head-close::before,
.close-wrap .head-close::after {
  content: "";
  position: absolute;
  top: 0;
  display: block;
  width: 44px;
  height: 1px;
  background: #9d9d9d;
}
.close-wrap .head-close::before {
  transform: rotate( 45deg );
  transform-origin: top left;
}
.close-wrap .head-close::after {
  transform: rotate( -45deg );
  transform-origin: top right;
  right: 2px;
}
.select-wrap{
  padding:20px 0;
  /* border-bottom:solid 1px #efead5; */
}
.select-wrap h2{
  font-size:22px;
  font-weight:bold;
  text-align:center;
  color:#c2b28d;
  padding-bottom: 40px;
  letter-spacing: 0.08em;
}
.select-list{
  list-style:none;
  overflow:hidden;
}
.select-list > li{
  float:left;
}
.select-list > li > a {
  display:block;
  width:200px;
  padding:18px 0;
  text-align:center;
  font-size:11px;
}
.select-list > li > a:hover{
  background-color:#f7f1e3;
}
.attention{
  font-size:11px;
  line-height:27px;
  margin-bottom:80px;
  padding-top:20px;
  padding-left:5px;
}
.attention .note{
  display:block;
  text-indent:-1.5em;
  padding-left:1.5em;
  font-size: 13px;
}
.size-section h3{
  font-size:12px;
  font-weight:bold;
  background-color:#f7f1e3;
  padding:7px 25px;
  -webkit-transform-origin: 0 0;
  -webkit-transform: scale(1, 1.01);
  -moz-transform-origin: 0 0;
  -moz-transform: scale(1, 1.01);
  -ms-transform-origin: 0 0;
  -ms-transform: scale(1, 1.01);
  -o-transform-origin: 0 0;
  -o-transform: scale(1, 1.01);
}
.size-section .figure{
  text-align:center;
}
.size-section .backlink{
  text-align:right;
  padding-right:25px;
  margin-bottom:10px;
}

.size-section .backlink a {
  font-size:10px;
  border-bottom:solid 1px #333;
}
.close-wrap {
  border-top:solid 1px #efead5;
  padding:35px 0;
}
.close-wrap .btn {
  display: block;
  width:100%;
  color: #999999;
  text-align: center;
  text-decoration:none;
  margin:0 auto;
  padding:0;
  vertical-align: middle;
  font-size: 14px;
}
.close-wrap .btn > img {
  display: inline-block;
  vertical-align: middle;
  width: 12px;
  margin-right: 10px;
}

.select-wrap li a {
  font-size: 14px;
  color: #333333;
}

.select-list li a {
  border-bottom: solid 1px #f3ecdb;
  margin:0 10px;
}

.select-list .b-top a {
  border-top: solid 1px #f3ecdb;
  margin:0 10px;
}

.select-wrap ul {
  padding-inline-start: 0%;
}

.size-section h3 {
  font-size: 18px;
  text-align: center;
  padding: 30px 25px;
}
.size-section {
  position: relative;
}

.backlink {
  position: absolute;
  top: 25px;
  right: 20px;
}

.size-section .backlink{
  padding-right:10px;
}
.size-section .backlink a{
  font-size:8px;
  border-bottom:none;
  display:inline-block;
  background:url("/sizechart/images/pagetop.png") no-repeat 100% 50%;
  background-size:100%;
  width: 30px;
  border-bottom: solid #cfc29d;;
  padding-bottom: 4px;
}

.size-section .backlink .sign{
  display:none;
}

.title-area > .container {
  padding-left: 0;
}

/*smartphone only***********************************/
@media (max-width: 767px) {
  .container{
    margin:0;
    width:100%;
  }
  .title-area{
    margin :0;
    padding:10px 0;
    background-color: #fff;
  }
  .title-area h1{
    font-size:13px;
    text-align:left;
    padding:5px 0 5px;
  }
  .title-area h1 small{
    font-size:9px;
  }
  .close-wrap .head-close {
    top: 14px;
    right: 10px;
    width: 22px;
    height: 22px;
  }
  .close-wrap .head-close::before,
  .close-wrap .head-close::after {
    width: 29px;
  }
  .select-wrap{
    padding:0;
    /* border-top:solid 1px #f0e6d0;
    border-bottom:solid 1px #e6d5b1; */
    margin-bottom:1px;
  }
  .select-wrap h2{
    padding:10px 0;
    margin-bottom:0;
  }
  .select-wrap.last{
    /* border-bottom:solid 1px #f0e6d0; */
  }
  .size-section h3{
    font-size:11px;
    padding:5px 0px 5px 15px; 
  }
  .select-list{
    /* border-top:solid 1px #f0e6d0; */
  }
  .select-list li a{
    float:left;
    width:50%;
    border-bottom:solid 1px #f0e6d0;
  }
  .select-list li.b-none{
    border-bottom:none;
  }
  .select-list > li > a{
    background-repeat:no-repeat;
    background-position:100% 50%;
    background-size:22px 7px;
    font-size:9px;
    text-align:left;
    padding:10px 22px 10px 10px;
    width:auto;
  }

  .attention{
    font-size:9px;
    line-height:18px;
    padding:19.5px 15px 20.5px;
    margin-bottom:0;
  }
  .size-section .backlink{
    padding-right:10px;
  }
  .size-section .backlink a{
    font-size:8px;
    border-bottom:none;
    display:inline-block;
    background:url("/sizechart/images/pagetop.png") no-repeat 100% 50%;
    background-size: 100%;
    width: 15px;
    height: 8px;
    border-bottom: solid 1.5px #cfc29d;
    padding-bottom: 4px;
  }
  .size-section .backlink .sign{
    display:none;
  }
  .close-wrap {
    padding:15px 0 30px;
  }
  .close-wrap .btn {
    font-size: 12px;
  }
  .close-wrap .btn > img {
    width: 10px;
  }

  .title-area h1{
    font-size:28px;
    font-weight:bold;
    text-align:center;
    color: #cfc29d;
  }
  .container{
    width:425px;
    margin:0 auto;
  }

  .select-list > li > a{
    display:block;
    width:192px;
    padding:10px 0;
    text-align:center;
    font-size:11px;
    /*
    -webkit-transform-origin: 0 0;
    -webkit-transform: scale(1, 1.01);
    -moz-transform-origin: 0 0;
    -moz-transform: scale(1, 1.01);
    -ms-transform-origin: 0 0;
    -ms-transform: scale(1, 1.01);
    -o-transform-origin: 0 0;
    -o-transform: scale(1, 1.01);
    */
  }

  .select-list li:nth-child(n+3) a {
    border-top: none;
  }

  .select-wrap h2{
    font-size:30px;
    font-weight:bold;
    text-align:center;
    color:#c2b28d;
    margin-top: 20px;
    margin-bottom: 10px;
  }

  .select-wrap li a {
    font-size: 12px;
    color: #333333;
    margin-top: 1px;
  }

  .select-wrap h2{
    font-size:18px;
    font-weight:bold;
    text-align:center;
    color:#c2b28d;
  }

  .attention {
    font-size: 11px;
    line-height: 27px;
    padding-top: 30px;
    padding-left: 15px;
    padding-bottom: 40px;
  }

  .size-section {
    position: relative;
  }

  .backlink {
    position: absolute;
    top: 6px;
    right: 3px;
  }

  .title-area > .container {
    padding-left: 22px;
  }
  .title-area > .container {
    padding-left: 0px;
  }

}

@media (max-width: 425px) {
  .container{
    max-width: 375px;
    margin: 0 auto;
    width: auto;
  }
  .select-list > li {
    width: 50%;
  }
  .select-list > li > a{
    display:block;
    width: calc( 100% - 20px );
    width: -webkit-calc( 100% - 20px );
    padding:10px 0;
    text-align:center;
    font-size:11px;
    -webkit-transform-origin: 0 0;
    -webkit-transform: scale(1, 1.01);
    -moz-transform-origin: 0 0;
    -moz-transform: scale(1, 1.01);
    -ms-transform-origin: 0 0;
    -ms-transform: scale(1, 1.01);
    -o-transform-origin: 0 0;
    -o-transform: scale(1, 1.01);
  }

  .select-wrap li a {
    font-size: 10px;
    color: #333333;
    margin-top: 1px;
  }
  
}

.jewelry-sizechart .title-area h1{
  color: #cccccc;
}

.jewelry-sizechart .select-wrap h2{
  color: #000000;
}

.jewelry-sizechart .size-section h3{
  color: #ffffff;
  background-color: #181818;
}

.jewelry-sizechart .size-section .backlink a{
  background:url("/sizechart/images/jewelry-pagetop.png") no-repeat 100% 50%;
  border-bottom: solid #666666;
  background-size: 100%;
}

.jewelry-sizechart .select-list .b-top a{
  border-top: solid 1px #eeeeee;
}

.jewelry-sizechart .select-list > li > a:hover{
  background-color: #eee;
}