@charset "utf-8";

/*
━━━━━━━━━━━━━━━━━━━━━━━━━━━━
K.UNO BRIDAL TOP

:20200331
━━━━━━━━━━━━━━━━━━━━━━━━━━━━
*/

/*———————————
base?
———————————*/

#container #main {
  margin-top: 50px !important;
}
.boxWrap.txtOnly {
  margin-bottom: 70px;
}
#container p.txt span.pc {
  display: inline-block !important;
}
#container p.txt span.sp {
  display: none !important;
}
.largeTitle {
  margin-bottom: 25px;
}
.new {
  position: relative;
}
.new::after {
  content: "NEW";
  font-family: "Playfair Display", serif !important;
  padding: 3px 10px;
  position: absolute;
  top: 0;
  left: 0;
  font-size: 15px;
  background-color: #e5bba7;
  color: #fff;
}
.gold {
  color: #7a5b29;
}
.slick-slide {
  outline: none;
}
.btn {
  background: #ededed;
}
.bold {
  font-weight: bold;
}
@media screen and (max-width: 767px) {
  .sp_center {
    text-align: center;
  }
  #container .sp {
    display: block !important;
  }
  #container .pc {
    display: none !important;
  }
  .flexBox3 {
    flex-wrap: wrap;
  }
  .flexBox3 .flexCell {
    width: 100%;
  }
}
@media screen and (max-width: 640px) {
  .outerWrap.kv {
    padding: 0;
  }
  #container #main {
    margin-top: 0px !important;
  }
  #container p.txt span.pc {
    display: none !important;
  }
  #container p.txt span.sp {
    display: inline-block !important;
  }
  .gSlider .slick-next {
    right: -25px !important;
  }
  .gSlider .slick-prev {
    left: -25px !important;
  }
  .gSlider .slick-dots {
    font-size: 0;
    bottom: 0px;
  }
  .btnBox2 + .btnBox2 {
    margin-top: 0;
  }
}
@media screen and (max-width: 640px) {
  .flexBox3 {
    flex-wrap: wrap;
  }
}

/*———————————
HowToSelect_Ring
———————————*/
.bg {
  background-color: #fafafa;
}
.outerWrap.bg {
  max-width: 1024px;
  box-sizing: border-box;
  padding-top: 75px;
  padding: 75px 0;
}
.outerWrap.bg section {
  max-width: 900px;
  padding: 0 5%;
  margin: 0 auto 120px;
  box-sizing: content-box;
}
.outerWrap.bg section:last-of-type {
  margin-bottom: 0;
}
@media screen and (max-width: 768px) {
  .outerWrap.bg {
    padding-top: 60px;
    padding: 60px 0;
  }
  .outerWrap.bg section {
    margin: 0 auto 100px;
  }
}

/*
mainBlock
--------------------------------------- */
.mainBlock {
  margin-bottom: 2%;
}
.mainBlock .outerWrap {
  max-width: 1024px;
}
.mainBlock .img {
  margin-bottom: 0;
}
.mainBlock .bg {
  padding: 5% 15%;
  height: 100%;
}
.mainBlock .main_bg {
  background: url(/bridal/common/img/service/howtoselect/ring/kv_pc.jpg)
    no-repeat;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  background-position: center;
}
.mainBlock .flexCell {
  align-self: stretch;
}
.mainBlock .flexCell .bg > .img {
  margin-bottom: 10px;
}
.mainBlock h1.largeTitle {
  font-size: 32px;
  margin-bottom: 15px;
}
.mainBlock h1.largeTitle span {
  font-size: 18px;
}
.mainBlock .topImg {
  margin-top: 25px;
}
.topImg .flexBox2 .flexCell:nth-child(even) {
  margin-left: 10px;
}
.topImg .flexCell .flexBox2:first-of-type {
  margin-bottom: 10px;
}
@media screen and (max-width: 768px) {
  .mainBlock .flexCell {
    margin-bottom: 0;
  }
  .mainBlock .bg {
    padding: 5% 0 30px 0;
  }
  .mainBlock .inner {
    padding: 20px 10% 25px;
    display: flex;
    flex-wrap: wrap;
  }
  .mainBlock .inner .img {
    width: 100%;
    order: 1;
  }
  .mainBlock .inner .largeTitle {
    width: 100%;
  }
  .mainBlock .inner p.txt {
    width: 100%;
  }
  .mainBlock .slider01 .slick-slide {
    margin: 0 7px;
  }
}

/*
outline
--------------------------------------- */
.outline .slick-slide {
  padding: 0 6px;
}
.outline .slick-slide p.txt {
  padding: 0 10px;
}

/* ringtype
--------------------------------------- */
.ringtype .innerBox {
  margin-bottom: 60px;
}
#container .ringtype .outerWrap > .innerBox > p > span.pc {
  display: inline;
}
.ringtypeBox {
  margin-bottom: 40px;
}
.ringtype .gSlider {
  margin-bottom: 15px;
}
.ringtype .slider-nav {
  margin: 40px auto 15px;
}
.ringtype .slider-nav li {
  padding: 0 8px;
}
.ringtype .slider-nav-box {
  border: 1px solid #b4b4b4;
  text-align: center;
  height: 60px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
}
.ringtype .slider-nav-box p {
  line-height: 1.5;
  margin-bottom: 0;
  position: relative;
  padding-left: 32%;
}
.ringtype .slider-nav-box p::before {
  content: "";
  background-image: url(/bridal/common/img/service/howtoselect/ring/icon01.svg);
  width: 43px;
  height: 14px;
  position: absolute;
  background-repeat: no-repeat;
  top: 0;
  bottom: 0;
  margin: auto;
  left: 0px;
}
.ringtype .icon02 .slider-nav-box p::before {
  background-image: url(/bridal/common/img/service/howtoselect/ring/icon02.svg);
}
.ringtype .icon03 .slider-nav-box p::before {
  background-image: url(/bridal/common/img/service/howtoselect/ring/icon03.svg);
  height: 16px;
}
.ringtype .icon04 .slider-nav-box p::before {
  background-image: url(/bridal/common/img/service/howtoselect/ring/icon04.svg);
  height: 6px;
}
.ringtype .icon05 .slider-nav-box p::before {
  background-image: url(/bridal/common/img/service/howtoselect/ring/icon05.svg);
  height: 16px;
}
.ringtype .slider-nav .slick-current .slider-nav-box {
  border-color: #f5ece7;
  background-color: #f5ece7;
  position: relative;
}
.ringtype .slider-nav .slick-current {
  padding-bottom: 10px;
}
.ringtype .slider-nav .slick-current .slider-nav-box::after {
  content: "";
  position: absolute;
  bottom: -15px;
  width: 0px;
  height: 0px;
  border-top: 8px solid #f5ece7;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
  border-bottom: 8px solid transparent;
  right: 0;
  left: 0;
  margin: 0 auto;
}
.ringtype .slider02.gSlider {
  margin-bottom: 10px;
  background-color: #fff;
  padding: 25px;
}
.ringtype .slider02.gSlider > ul {
  padding-bottom: 0px;
  margin-bottom: 0;
}
.ringtype .slider02.gSlider .flexBox2 .flexCell:nth-child(even) {
  max-width: 381px;
  margin: 0 auto;
}
#container .ringtype .slider02 .flexBox2 .flexCell:nth-child(even) .smallTitle {
  margin-bottom: 5px;
}
#container
  .ringtype
  .slider02
  .flexBox2
  .flexCell:nth-child(even)
  p:last-of-type {
  margin-top: 10px;
}
#container
  .ringtype
  .familyCircle
  .ringtypeBox:last-of-type
  .flexBox2
  .flexCell:first-of-type
  .img {
  margin-bottom: 0;
}
#container .ringtype .fairBox {
  padding: 30px 25px;
  background-color: #fafafa;
}
#container .ringtype .fairBox .smallTitle {
  margin-bottom: 18px;
}
@media screen and (max-width:840px) {
  #container .slider-nav {
    display: none!important;
  }
  .ringtype .slider02.gSlider > ul {
    padding-bottom: 30px;
  }
}
@media screen and (max-width: 768px) {
  .ringtype .flexBox2 .flexCell {
    width: 100%;
    margin-bottom: 20px;
}
  .ringtype .txtLink {
    margin-top: 20px;
    margin-bottom: 20px;
  }

  #container .ringtype .dumbo .flexCell:first-of-type,
  #container
    .ringtype
    .familyCircle
    .ringtypeBox:last-of-type
    .flexBox2
    .flexCell:first-of-type {
    margin-bottom: 0;
  }
  #container
    .ringtype
    .familyCircle
    .ringtypeBox:last-of-type
    .flexBox2
    .flexCell:first-of-type
    .img {
    margin-bottom: 20px;
  }
  #container .ringtype .familyCircle .flexBox2 .flexCell:first-of-type .img {
    margin-bottom: 20px;
  }
  #container .ringtype span.attention {
    padding-top: 15px;
    display: block;
  }
  .ringtype .slider02.gSlider > ul {
    margin: 0 1%;
    padding-bottom: 0px;
  }
  /* .ringtype .slider02.gSlider .slick-next,
  .ringtype .slider02.gSlider .slick-prev {
    top: 40% !important;
  } */
  .ringtype .slider-nav {
    margin: 40px auto 15px;
  }
  .ringtype .slider-nav li {
    padding: 0 5px;
  }
  .ringtype .slider02.gSlider > ul {
    padding-bottom: 30px;
  }
}

/* diamond
--------------------------------------- */
.target section:last-of-type {
  margin-bottom: 20px;
}
.target .smallTitle {
  margin-bottom: 15px;
}
.target h3 {
  position: relative;
  padding: 12px 40px;
  border: solid #b4b4b4;
  cursor: pointer;
  border-width: 1px 0 1px 0;
}
.target section:last-of-type h3 {
  border-width: 1px 0 1px 0;
}
.target h3 span {
  position: relative;
  padding-right: 35px;
}
.target h3 span:before,
.target h3 span:after {
  content: "";
  display: block;
  position: absolute;
  background: #707070;
}
.target h3 span:before {
  top: 50%;
  right: 10px;
  width: 12px;
  height: 2px;
  margin-top: -2px;
}
.target h3 span:after {
  top: 50%;
  right: 15px;
  width: 2px;
  height: 12px;
  margin-top: -7px;
}
.target h3.act {
  border-width: 1px 0 1px 0;
  border-bottom: dotted 1px #b4b4b4;
}
.target h3.act span:after {
  display: none;
}

.target .body {
  display: none;
  font-size: 1.4rem;
}

.target .body .inner {
  padding: 30px 19px;
}

.target .t_right {
  text-align: right;
}
.target .t_right a {
  text-decoration: underline;
}
.target .t_right a:hover {
  text-decoration: none;
}

@media screen and (max-width: 768px) {
  .target .body .inner {
    padding: 20px 0 50px;
    margin: 0;
  }
  .target section:nth-last-of-type(1) .body .inner {
    padding: 20px 0 30px;
  }
  .target h3 {
    padding: 12px 7px;
  }
  .target .flexCell > .img {
    margin-bottom: 0;
  }
  .tbslider .flexBox2 .flexCell:first-of-type {
    margin-bottom: 10px;
  }
  .target h3 span {
    padding-right: 0;
    width: 100%;
    display: block;
  }
}

/* material
--------------------------------------- */
.material .img {
  margin-bottom: 0;
}
@media screen and (max-width: 768px) {
  .material .midTitle,
  .material p.txt {
    padding: 0 15px;
  }
}

/* type
--------------------------------------- */
.type .outerWrap {
  max-width: 900px;
}
.type .flexBox3 {
  margin: 60px auto 60px;
}
.type .flexBox3 .flexWrap {
    width: 32%;
    margin-right: 2%;
}
.type .flexBox3 .flexWrap:last-of-type {
    margin-right: 0;
}
.type .flexBox3 .flexCell {
    width: 100%;
    margin-right: 0;
}
.type .flexBox3 .flexWrap .smallTitle {
  margin-bottom: 0;
}
.type .flexBox3 p.txt {
  padding: 0 15px;
}
.type table,
.type td,
.type th {
  border: 1px solid #dedede;
  border-collapse: collapse;
}
.type td,
.type th {
  text-align: center;
  padding-left: 5px;
  padding-right: 5px;
}
.type table {
  width: 100%;
  border: none;
}
.type th {
  background: #f5ece7;
  padding: 19px 0;
}
.type td {
  padding: 29px 5px;
}
.type tr td:first-of-type {
  background-color: #fafafa;
}
@media screen and (max-width: 768px) {
  .flexBox3 .flexCell {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 0 auto 30px;
  }
  .type .flexBox3 .flexWrap {
      width: 100%;
      margin-right: 0%;
  }
  .type .flexBox3 p.txt {
    padding: 0;
  }
  .type .outerWrap .outerWrap {
    padding: 0 9%;
  }
  .type_txt {
    margin-left: 3%;
    align-self: center;
  }
  .type .flexBox3 {
    margin: 35px auto 30px;
  }
  .type td {
    padding: 25px 5px;
    font-size: 12px;
    font-size: 1.2rem;
  }
  /* .type .pc_center {
    text-align: left;
  } */
  .type tr td:first-of-type {
    background-color: #f5ece7;
  }
  .type th {
    background-color: #fafafa;
  }
}

/* concierge
--------------------------------------- */
.concierge .flexBox2 {
  background-color: #fafafa;
}
.concierge .flexBox2 .img {
  margin-bottom: 0;
}
.concierge .flexBox2 .flexCell {
  align-self: stretch;
  display: flex;
}
.concierge .flexBox2 .flexCell:first-of-type {
  background: url(/bridal/common/img/service/howtoselect/ring/img07_pc.jpg)
    no-repeat;
  justify-content: space-between;
  flex-direction: column;
  background-position: center top;
  background-size: cover;
}
.concierge .flexBox2 .flexCell:nth-child(even) {
  padding: 3%;
  min-height: 314px;
}
.concierge .flexBox2 .inner {
  align-self: center;
}
.concierge .txtLinkBox {
  max-width: 245px;
  margin: 25px auto 0 0;
}
@media screen and (max-width: 768px) {
  #container .pc {
    display: block !important;
  }
  #container .sp {
    display: none !important;
  }
  .concierge .txtLinkBox {
    margin: 20px auto 0;
  }
}
@media screen and (max-width: 640px) {
  .concierge .flexBox2 .flexCell:nth-child(even) {
    padding: 0 5% 35px;
    min-height: unset;
  }
  #container .sp {
    display: block !important;
  }
  #container .pc {
    display: none !important;
  }
}

/* story
--------------------------------------- */
.story .inner {
  max-width: 870px;
  margin: 0 auto;
  padding: 0 5%;
  box-sizing: content-box;
}
.story .flexBox2 + p.txt {
  margin: 10px auto 30px;
}
@media screen and (max-width: 768px) {
  .story .flexBox2 + p.txt {
    margin: 20px auto 40px;
    padding: 0 3%;
  }
  .story .inner .flexBox2 p.txt {
    padding: 0 3%;
  }
  .story .img {
    margin-bottom: 0;
  }
}

/* banner
--------------------------------------- */

.banner .outerWrap {
  max-width: 900px;
}