@charset "UTF-8";
/* =======
	文字化け確認用
	cw:content width
	ar:arrow right
	gn:global navi
======= */
/* CSS 初期化 */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  font-weight: normal;
}

*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  position: relative;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

ol, ul {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
  border: 0;
  vertical-align: top;
}

a {
  color: inherit;
  text-decoration: none;
  -webkit-transition: opacity .7s;
  transition: opacity .7s;
  border: 0;
  cursor: pointer;
}

a.hover:hover {
  opacity: 0.5;
}

sup {
  position: relative;
  top: -0.1em;
  font-size: 70%;
  vertical-align: top;
}

sub {
  position: relative;
  top: 0.1em;
  font-size: 70%;
  vertical-align: bottom;
}

.clearfix::after {
  content: '';
  clear: both;
  display: block;
}

.max-width {
  width: 1200px;
  margin: 0 auto;
}

.ah_pc {
  display: block;
}

.ah_sp, .menu_sp {
  display: none;
}

.ta_c {
  text-align: center;
}

.ta_l {
  text-align: left;
}

.ta_r {
  text-align: right;
}

.script_line {
  fill: none;
  stroke: #fff;
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
}

.more-link a {
  position: relative;
  display: inline-block;
  padding-right: 30px;
  background: url(/assets/img/common/arw_icon1.svg) right 0 no-repeat;
  color: #E2528E;
  font-size: 12px;
  font-family: copperplate, serif;
  font-weight: 300;
  letter-spacing: 0.1em;
  line-height: 19px;
}

.more-link a:hover {
  opacity: 0.5;
}

.anker-link {
  padding-left: 20px;
  background: url(/assets/img/common/arw_icon3.svg) 0 center no-repeat;
  font-size: 13px;
  font-family: "Noto Serif JP", serif;
  letter-spacing: 0.2em;
}

.ttl-h-3 {
  padding-bottom: 12px;
  border-bottom: 1px solid #E2528E;
  color: #E2528E;
  font-size: 18px;
  font-family: "Noto Serif JP", serif;
  letter-spacing: 0.2em;
}

.date {
  font-size: 12px;
  font-family: "Noto Serif JP", serif;
  letter-spacing: 0.05em;
}

.tag {
  display: inline-block;
  margin-left: 10px;
  padding: 3px 20px;
  border: 1px solid #E2528E;
  border-radius: 4px;
  color: #E2528E;
  font-size: 10px;
  font-family: "Noto Serif JP", serif;
  letter-spacing: 0.1em;
  line-height: 1;
}

/* =========================== media =============================== */
@media screen and (max-width: 768px) {
  html, body {
    height: 100%;
  }
  .ah_pc {
    display: none;
  }
  .ah_sp {
    display: block;
  }
  img[src$=".svg"] {
    width: 100%;
    height: auto;
  }
}

#container {
  position: relative;
  margin: 0 auto;
  padding: 70px 0 0;
  min-width: 1200px;
  opacity: 0;
}

.pagetop {
  display: none;
  position: fixed;
  bottom: 40px;
  right: 40px;
  z-index: 90;
}

.pagetop a {
  position: relative;
  display: block;
  border: 1px solid #787878;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  background-color: rgba(255, 255, 255, 0.7);
}

.pagetop a::after, .pagetop a::before {
  content: "";
  position: absolute;
  top: 16px;
  left: 50%;
  width: 1px;
  height: 28px;
  background-color: #787878;
  -webkit-transform-origin: 0 top;
  transform-origin: 0 top;
}

.pagetop a::after {
  -webkit-transform: rotate(35deg);
  transform: rotate(35deg);
}

.pagetop a::before {
  -webkit-transform: rotate(-35deg);
  transform: rotate(-35deg);
}

.pagetop a:hover {
  opacity: 0.5;
}

@media screen and (max-width: 768px) {
  #container {
    min-width: initial;
    min-width: auto;
  }
  .more-link a {
    padding-right: 25px;
    background-size: 15px 15px;
    font-size: 10px;
    line-height: 15px;
  }
  .pagetop {
    bottom: 20px;
    right: 20px;
  }
  .pagetop a {
    width: 40px;
    height: 40px;
  }
  .pagetop a::after, .pagetop a::before {
    top: 12px;
    width: 1px;
    height: 16px;
  }
}

/* =========================== header =============================== */
#header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  border-bottom: 1px solid #eee;
  background-color: #fff;
  z-index: 100;
}

#header .role_inner {
  margin: 0 auto;
  width: 1200px;
}

#header #menu {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin: 0 auto;
  max-width: 980px;
  height: 70px;
}

#header #menu #logo {
  position: relative;
  line-height: 1;
  z-index: 120;
}

#header #menu .navgroup {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding-left: 38px;
  width: 100%;
}

#header #menu ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  max-width: 650px;
  width: 100%;
}

#header #menu ul li a {
  color: #444;
  font-family: copperplate, serif;
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0.1em;
}

#header #menu ul li a:hover {
  opacity: 0.5;
}

#header #menu #toec a {
  position: relative;
  display: block;
  border: 1px solid #E2528E;
  width: 137px;
  height: 50px;
  line-height: 46px;
  text-align: center;
}

#header #menu #toec a span {
  position: relative;
  color: #fff;
  font-size: 13px;
  font-family: copperplate, serif;
  font-weight: 300;
  letter-spacing: 0.1em;
  -webkit-transition: color 0.3s;
  transition: color 0.3s;
  z-index: 2;
}

#header #menu #toec a::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #E2528E;
  -webkit-transform-origin: right 0;
  transform-origin: right 0;
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
  z-index: 1;
}

#header #menu #toec a:hover span {
  color: #E2528E;
}

#header #menu #toec a:hover::after {
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
}

#header #menu_sp {
  display: none;
}

@media screen and (max-width: 768px) {
  #header .role_inner {
    position: relative;
    width: auto;
  }
  #header #menu {
    position: relative;
    display: block;
    padding: 10px;
    height: 70px;
  }
  #header #menu #logo {
    width: 107px;
    height: 50px;
  }
  #header #menu .navgroup {
    overflow: hidden;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    padding: 70px 0 0;
    height: 0;
    background-color: #fff;
    -webkit-transition: height 0.5s;
    transition: height 0.5s;
    z-index: 105;
  }
  #header #menu ul {
    display: block;
    max-width: initial;
    max-width: auto;
  }
  #header #menu ul li {
    margin-top: 9.33333vw;
    text-align: center;
    opacity: 0;
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
  }
  #header #menu ul li a {
    display: block;
  }
  #header #menu #toec {
    margin-top: 10.66667vw;
  }
  #header #menu #toec a {
    margin: 0 auto;
    opacity: 0;
    -webkit-transition: opacity 0.3s 0.6s;
    transition: opacity 0.3s 0.6s;
  }
  #header #menu_sp {
    position: absolute;
    display: block;
    top: 14px;
    right: 14px;
    width: 42px;
    height: 42px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    z-index: 120;
  }
  #header #menu_sp span {
    position: absolute;
    display: block;
    left: calc(50% - 16.5px);
    width: 33px;
    height: 2px;
    background-color: #E2528E;
    -webkit-transition: top 0.2s 0.5s,bottom 0.2s 0.5s,-webkit-transform 0.5s;
    transition: top 0.2s 0.5s,bottom 0.2s 0.5s,-webkit-transform 0.5s;
    transition: transform 0.5s,top 0.2s 0.5s,bottom 0.2s 0.5s;
    transition: transform 0.5s,top 0.2s 0.5s,bottom 0.2s 0.5s,-webkit-transform 0.5s;
  }
  #header #menu_sp span:first-of-type {
    top: 15px;
  }
  #header #menu_sp span:last-of-type {
    bottom: 15px;
  }
  .menu_open #header {
    border-bottom: none;
  }
  .menu_open #header #menu .navgroup ul li {
    opacity: 1;
  }
  .menu_open #header #menu .navgroup ul li:nth-of-type(1) {
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s;
  }
  .menu_open #header #menu .navgroup ul li:nth-of-type(2) {
    -webkit-transition-delay: 0.35s;
    transition-delay: 0.35s;
  }
  .menu_open #header #menu .navgroup ul li:nth-of-type(3) {
    -webkit-transition-delay: 0.4s;
    transition-delay: 0.4s;
  }
  .menu_open #header #menu .navgroup ul li:nth-of-type(4) {
    -webkit-transition-delay: 0.45s;
    transition-delay: 0.45s;
  }
  .menu_open #header #menu .navgroup ul li:nth-of-type(5) {
    -webkit-transition-delay: 0.5s;
    transition-delay: 0.5s;
  }
  .menu_open #header #menu .navgroup ul li:nth-of-type(6) {
    -webkit-transition-delay: 0.55s;
    transition-delay: 0.55s;
  }
  .menu_open #header #menu .navgroup #toec a {
    opacity: 1;
  }
  .menu_open #header #menu_sp span {
    -webkit-transition: top 0.2s,bottom 0.2s,-webkit-transform 0.5s 0.2s;
    transition: top 0.2s,bottom 0.2s,-webkit-transform 0.5s 0.2s;
    transition: top 0.2s,bottom 0.2s,transform 0.5s 0.2s;
    transition: top 0.2s,bottom 0.2s,transform 0.5s 0.2s,-webkit-transform 0.5s 0.2s;
  }
  .menu_open #header #menu_sp span:first-of-type {
    top: 20px;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
  }
  .menu_open #header #menu_sp span:last-of-type {
    bottom: 20px;
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
  }
}

/* =========================== footer =============================== */
#footer {
  margin-top: 170px;
}

#footer #footer_1 {
  padding-bottom: 50px;
}

#footer #footer_1 ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
}

#footer #footer_1 ul li {
  margin-right: 10px;
  width: 100px;
  text-align: center;
}

#footer #footer_1 ul li a {
  display: block;
}

#footer #footer_1 ul li a:hover {
  opacity: 0.5;
}

#footer #footer_1 ul li.tw a {
  padding-bottom: 8px;
}

#footer #footer_1 ul li.fb a {
  padding-bottom: 10px;
}

#footer #footer_1 ul li:last-of-type {
  margin-right: 0;
}

#footer #footer_1 ul li span {
  display: block;
  margin-top: 10px;
  color: #E2528E;
  font-size: 12px;
  font-family: copperplate, serif;
  font-weight: 300;
  letter-spacing: 0.1em;
}

#footer #footer_2 {
  padding: 30px 0;
  border-top: 1px solid #eee;
}

#footer #footer_2 .logo {
  text-align: center;
}

#footer #footer_2 .links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-top: 40px;
}

#footer #footer_2 .links a {
  color: #666;
  font-size: 10px;
  font-family: "Noto Serif JP", serif;
  letter-spacing: 0.16em;
}

#footer #footer_2 .links a + a {
  margin-left: 20px;
}

#footer #footer_2 .links a:hover {
  opacity: 0.5;
}

#footer #footer_2 #copyright {
  margin-top: 10px;
  text-align: center;
}

#footer #footer_2 #copyright span {
  color: #666;
  font-family: "Noto Serif JP", serif;
  font-size: 10px;
  letter-spacing: 0.04em;
}

@media screen and (max-width: 768px) {
  #footer {
    margin-top: 70px;
  }
  #footer #footer_1 {
    padding-bottom: 30px;
  }
  #footer #footer_1 ul li {
    margin-right: 5px;
  }
  #footer #footer_1 ul li a {
    margin: 0 auto;
    width: 52px;
  }
  #footer #footer_1 ul li.fb a {
    padding: 8px 0;
  }
  #footer #footer_1 ul li.fb a img {
    width: 19px;
  }
  #footer #footer_1 ul li span {
    margin-top: 2px;
    font-size: 11px;
  }
  #footer #footer_2 {
    padding: 30px 0;
  }
  #footer #footer_2 .logo {
    text-align: center;
  }
  #footer #footer_2 .links {
    margin-top: 20px;
  }
  #footer #footer_2 .links a {
    letter-spacing: 0.4em;
  }
  #footer #footer_2 #copyright {
    margin-top: 5px;
  }
}

/* =========================== common-cts =============================== */
.common-cts {
  margin: 0 auto;
  max-width: 1200px;
  color: #666;
}

.common-cts .hgroup {
  position: relative;
  padding: 90px 0 0;
}

.common-cts .hgroup h2 {
  color: #E2528E;
  font-size: 36px;
  font-family: copperplate, serif;
  font-weight: 300;
  letter-spacing: 0.1em;
  text-align: center;
}

.common-cts .hgroup h2.jp {
  font-family: "Noto Serif JP", serif;
  letter-spacing: 0.2em;
}

@media screen and (max-width: 768px) {
  .common-cts {
    padding: 0 8.53333vw;
  }
  .common-cts .hgroup {
    padding-top: 10.66667vw;
  }
  .common-cts .hgroup h2 {
    font-size: 8vw;
  }
}

/* =========================== common-tab =============================== */
.common-tab {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin: 90px auto 0;
  max-width: 660px;
}

.common-tab li {
  position: relative;
  width: calc(150 / 660 * 100%);
  height: 38px;
  text-align: center;
  font-size: 13px;
  font-family: "Noto Serif JP", serif;
  letter-spacing: 0.2em;
  line-height: 38px;
  cursor: pointer;
}

.common-tab li::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #E2528E;
  -webkit-transform-origin: center;
  transform-origin: center;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}

.common-tab li:hover::after, .common-tab li.selected::after {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

.common-tab li.disabled {
  cursor: auto;
  opacity: 0.5;
}

.common-tab li.disabled::after {
  content: none;
}

@media screen and (max-width: 768px) {
  .common-tab {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-top: 10.66667vw;
  }
  .common-tab li {
    width: 48%;
    height: 10.66667vw;
    line-height: 10.66667vw;
  }
  .common-tab li:nth-of-type(n + 3) {
    margin-top: 5.33333vw;
  }
}

/* =========================== col-group-area =============================== */
.col-group-area {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  /*&.center {
    justify-content: center;
  }*/
}

.col-group-area.col-num-2 .col-box {
  margin-top: 90px;
  width: calc(394 / 830 * 100%);
}

.col-group-area.col-num-3 .col-box {
  margin-top: 90px;
  width: calc(235 / 830 * 100%);
}

.col-group-area.col-num-3::after {
  content: "";
  width: 30%;
}

.col-group-area.col-num-4 {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.col-group-area.col-num-4 .col-box {
  margin: 90px 0 0;
  width: 250px;
}

.col-group-area.col-num-5 {
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  margin-right: -30px;
}

.col-group-area.col-num-5 .col-box {
  margin: 90px calc(20 / 830 * 100%) 0 0;
  max-width: calc(150 / 830 * 100%);
}

.col-group-area .col-box {
  position: relative;
}

.col-group-area .col-box a {
  display: block;
}

.col-group-area .col-box .txt1 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-top: 15px;
}

.col-group-area .col-box .txt2 {
  margin-top: 10px;
}

.col-group-area .col-box .txt2 p {
  font-size: 13px;
  font-family: "Noto Serif JP", serif;
  letter-spacing: 0.2em;
  line-height: 1.8;
}

.col-group-area .col-box:only-of-type {
  margin-right: auto;
  margin-left: auto;
}

@media screen and (max-width: 768px) {
  .col-group-area {
    display: block;
  }
  .col-group-area .pic {
    text-align: center;
  }
  .col-group-area.col-num-2 .col-box {
    margin-top: 10.66667vw;
    width: auto;
  }
  .col-group-area.col-num-3 .col-box {
    margin-top: 10.66667vw;
    width: auto;
  }
  .col-group-area.col-num-3::after {
    content: none;
  }
  .col-group-area.col-num-5 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin: 0 auto;
    max-width: 320px;
  }
  .col-group-area.col-num-5 .col-box {
    margin: 10.66667vw 0 0;
    width: calc(150 / 310 * 100%);
    max-width: initial;
    max-width: 100%;
  }
  .col-group-area .col-box .txt1 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-top: 15px;
  }
  .col-group-area .col-box .txt2 {
    margin-top: 10px;
  }
  .col-group-area .col-box .txt2 p {
    font-size: 13px;
    font-family: "Noto Serif JP", serif;
    letter-spacing: 0.2em;
    line-height: 1.8;
  }
}

/* =========================== pagination =============================== */
.pagination {
  margin: 100px auto 0;
  max-width: 830px;
}

.pagination ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.pagination ul li {
  padding: 10px 15px;
  font-size: 13px;
  font-family: "Noto Serif JP", serif;
}

.pagination ul li a:hover {
  opacity: 0.5;
}

@media screen and (max-width: 768px) {
  .pagination {
    margin-top: 16vw;
  }
}

/* =========================== product-common-box =============================== */
.product-common-box {
  width: 150px;
}

.product-common-box .txt {
  margin-top: 10px;
  text-align: center;
}

.product-common-box .txt p {
  font-size: 12px;
  font-family: "Noto Serif JP", serif;
  letter-spacing: 0.1em;
  line-height: 1.3;
}

/* =========================== artilce-cts =============================== */
.article-cts .article-head {
  margin-top: 90px;
}

.article-cts .article-head .article-head-txt {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.article-cts .article-head h3 {
  margin-top: 10px;
  color: #E2528E;
  font-size: 24px;
  font-family: "Noto Serif JP", serif;
  font-weight: bold;
  letter-spacing: 0.2em;
  line-height: 1.8;
}

.article-cts .article-body {
  margin-top: 25px;
  font-family: "Noto Serif JP", serif;
}

.article-cts .article-body h4 {
  padding: 10px 20px;
  background-color: #E2528E;
  color: #fff;
  font-size: 20px;
  font-family: "Noto Serif JP", serif;
  font-weight: bold;
  letter-spacing: 0.1em;
  line-height: 2;
}

.article-cts .article-body h5 {
  color: #E2528E;
  font-size: 18px;
  font-family: "Noto Serif JP", serif;
  font-weight: bold;
  letter-spacing: 0.1em;
  line-height: 1.8;
}

.article-cts .article-body p {
  font-size: 13px;
  letter-spacing: 0.2em;
  line-height: 1.8;
}

.article-cts .article-body .fs_15 {
  font-size: 15px;
  letter-spacing: 0.2em;
  line-height: 1.8;
}

.article-cts .article-body p {
  font-family: "Noto Serif JP", serif;
}

.article-cts .article-body .article-col {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.article-cts .article-body .article-col.col-num-2 {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.article-cts .article-body .article-col.col-num-2 .article-col-right {
  padding-left: 36px;
}

.article-cts .article-body .article-col .w490 {
  width: 490px;
}

.article-cts .article-body .article-col .w340 {
  width: 340px;
}

.article-cts .related-area {
  margin-top: 120px;
}

.article-cts .related-area h5 {
  margin-bottom: -40px;
  color: #E2528E;
  font-size: 20px;
  font-weight: bold;
  font-family: "Noto Serif JP", serif;
  letter-spacing: 0.1em;
  text-align: center;
}

.sns-btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.sns-btn.pos-right {
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  margin-top: 14px;
}

.sns-btn.pos-right li {
  margin-left: 20px;
}

.sns-btn.pos-foot {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-top: 100px;
}

.sns-btn.pos-foot li {
  margin-right: 20px;
}

.sns-btn.pos-foot li:last-of-type {
  margin-right: 0;
}

.sns-btn.pos-head {
  position: absolute;
  top: calc(50% + 30px);
  right: 170px;
}

.sns-btn.pos-head li {
  margin-left: 20px;
}

.sns-btn + .back-btn {
  margin-top: 60px;
}

@media screen and (max-width: 768px) {
  .article-cts .article-head {
    margin-top: 16vw;
  }
  .article-cts .article-head h3 {
    margin-top: 2.66667vw;
    font-size: 20px;
  }
  .article-cts .article-body {
    margin-top: 6.4vw;
  }
  .article-cts .article-body .article-main-pic {
    margin: 0 -8.53333vw;
  }
  .article-cts .article-body h4 {
    padding: 7px 12px;
    font-size: 16px;
    line-height: 1.5;
  }
  .article-cts .article-body h5 {
    font-size: 16px;
    line-height: 1.5;
  }
  .article-cts .related-area {
    margin-top: 10.66667vw;
  }
  .article-cts .related-area h5 {
    margin-bottom: -5.33333vw;
    font-size: 16px;
  }
  .sns-btn.pos-right {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-top: 6.4vw;
  }
  .sns-btn.pos-right li:first-of-type {
    margin-left: 0;
  }
  .sns-btn.pos-foot {
    margin-top: 16vw;
  }
  .sns-btn.pos-foot li:last-of-type {
    margin-right: 0;
  }
  .sns-btn.pos-head {
    position: static;
    top: auto;
    right: auto;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 9.33333vw 0 -5.33333vw;
  }
  .sns-btn.pos-head li {
    margin-left: 0;
    margin-right: 20px;
  }
  .sns-btn + .back-btn {
    margin-top: 16vw;
  }
}

/* =========================== back-btn =============================== */
.back-btn {
  margin-top: 120px;
}

.back-btn a {
  position: relative;
  display: block;
  border: 1px solid #E2528E;
  margin: 0 auto;
  width: 240px;
  height: 60px;
  text-align: center;
  line-height: 58px;
}

.back-btn a span {
  position: relative;
  color: #E2528E;
  font-size: 14px;
  font-family: copperplate, serif;
  font-weight: 300;
  letter-spacing: 0.1em;
  -webkit-transition: color 0.3s;
  transition: color 0.3s;
  z-index: 2;
}

.back-btn a::after {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 240px;
  height: 60px;
  background-color: #E2528E;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
  z-index: 1;
}

.back-btn a:hover::after {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

.back-btn a:hover span {
  color: #fff;
}

@media screen and (max-width: 768px) {
  .back-btn {
    margin-top: 16vw;
  }
  .back-btn a {
    width: 64vw;
    height: 16vw;
    line-height: 16vw;
  }
  .back-btn a span {
    font-size: 3.73333vw;
  }
  .back-btn a::after {
    width: 64vw;
    height: 16vw;
  }
}

.fs_10 {
  font-size: 10px;
}

.fs_13 {
  font-size: 13px;
}

.fs_15 {
  font-size: 15px;
}

.fs_18 {
  font-size: 18px;
}

.fs_20 {
  font-size: 20px;
}

.fs_24 {
  font-size: 24px;
}

.ff_serif {
  font-family: "Noto Serif JP", serif;
}

.ff_sans {
  font-family: "Noto Sans JP", sans-serif;
}

.c_pink {
  color: #E2528E;
}

.mt10 {
  margin-top: 10px;
}

.mt15 {
  margin-top: 15px;
}

.mt20 {
  margin-top: 20px;
}

.mt25 {
  margin-top: 25px;
}

.mt30 {
  margin-top: 30px;
}

.mt35 {
  margin-top: 35px;
}

.mt40 {
  margin-top: 40px;
}

.mt45 {
  margin-top: 45px;
}

.mt50 {
  margin-top: 50px;
}

.mt60 {
  margin-top: 60px;
}

.mt70 {
  margin-top: 70px;
}

.mt80 {
  margin-top: 80px;
}

.mt90 {
  margin-top: 90px;
}

.mt100 {
  margin-top: 100px;
}

.mt110 {
  margin-top: 110px;
}

.mt120 {
  margin-top: 120px;
}

@media screen and (max-width: 768px) {
  .fs_18 {
    font-size: 16px;
  }
  .fs_20 {
    font-size: 18px;
  }
  .fs_24 {
    font-size: 20px;
  }
  .mt10 {
    margin-top: 2.66667vw;
  }
  .mt15 {
    margin-top: 2.66667vw;
  }
  .mt20 {
    margin-top: 3.2vw;
  }
  .mt25 {
    margin-top: 3.2vw;
  }
  .mt30 {
    margin-top: 3.2vw;
  }
  .mt35 {
    margin-top: 4vw;
  }
  .mt40 {
    margin-top: 4vw;
  }
  .mt45 {
    margin-top: 4.8vw;
  }
  .mt50 {
    margin-top: 5.33333vw;
  }
  .mt60 {
    margin-top: 6.66667vw;
  }
  .mt70 {
    margin-top: 8vw;
  }
  .mt80 {
    margin-top: 8vw;
  }
  .mt90 {
    margin-top: 9.33333vw;
  }
  .mt100 {
    margin-top: 10.66667vw;
  }
  .mt110 {
    margin-top: 13.33333vw;
  }
  .mt120 {
    margin-top: 16vw;
  }
}

/* =========================== pickup-content =============================== */
.pickup-content {
  position: relative;
  margin-top: 90px;
}

.pickup-content .pickup-side-img {
  position: absolute;
  z-index: 2;
  opacity: 0;
}

.pickup-content .pickup-side-img.pickup-side-img-1 {
  top: 56px;
  left: 0;
}

.pickup-content .pickup-side-img.pickup-side-img-2 {
  top: 30px;
  right: 0;
}

.pickup-content .pickup-side-img.pickup-side-img-3 {
  top: 214px;
  left: 0;
}

.pickup-content .pickup-side-img.pickup-side-img-4 {
  top: 48px;
  right: 0;
}

.pickup-content .pickup-side-img.pickup-side-img-5 {
  top: 160px;
  left: 0;
}

.pickup-content .pickup-side-img.pickup-side-img-6 {
  top: 6px;
  right: 0;
}

.pickup-content .pickup-side-img.pickup-side-img-7 {
  top: 414px;
  left: 0;
}

.pickup-content .pickup-content-block {
  display: block;
  margin: 0 auto;
  width: 900px;
}

.pickup-content .pickup-content-block h3 {
  position: relative;
  z-index: 1;
}

.pickup-content .pickup-content-block h3 .sports_line {
  stroke-dasharray: 1100;
}

.pickup-content .pickup-content-block h3 .precious_line {
  stroke-dasharray: 1150;
}

.pickup-content .pickup-content-block h3 .work_line {
  stroke-dasharray: 800;
}

.pickup-content .pickup-content-block h3 .casual_line {
  stroke-dasharray: 1050;
}

.pickup-content .pickup-content-block .pickup-content-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: -18px;
}

.pickup-content .pickup-content-block .pickup-content-inner.pickup-content-inner-1 {
  padding-left: 82px;
}

.pickup-content .pickup-content-block .pickup-content-inner.pickup-content-inner-2 {
  padding-right: 58px;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-flow: row-reverse;
  flex-flow: row-reverse;
}

.pickup-content .pickup-content-block .pickup-content-inner .pickup-product h4 {
  text-align: center;
}

.pickup-content .pickup-content-block .pickup-content-inner .pickup-product-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  width: 100%;
}

.pickup-content.sports .pickup-content-block h3 {
  margin-left: 88px;
}

.pickup-content.sports .pickup-content-block .pickup-content-inner .pickup-product {
  margin-left: 50px;
  padding-top: 65px;
  width: 372px;
}

.pickup-content.sports .pickup-content-block .pickup-content-inner .pickup-product-group {
  margin-top: 54px;
}

.pickup-content.precious .pickup-content-block h3 {
  margin-left: 468px;
}

.pickup-content.precious .pickup-content-block .pickup-content-inner .pickup-product {
  margin-right: 60px;
  padding-top: 50px;
  width: 320px;
}

.pickup-content.precious .pickup-content-block .pickup-content-inner .pickup-product-group {
  margin-top: 52px;
}

.pickup-content.work .pickup-content-block h3 {
  margin-left: 85px;
}

.pickup-content.work .pickup-content-block .pickup-content-inner .pickup-product {
  margin-left: 38px;
  width: 350px;
}

.pickup-content.work .pickup-content-block .pickup-content-inner .pickup-product .product {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  margin-top: 28px;
}

.pickup-content.work .pickup-content-block .pickup-content-inner .pickup-product .product .product-img-2 {
  margin-left: 10px;
}

.pickup-content.work .pickup-content-block .pickup-content-inner .pickup-product .product .product-img-2 .txt {
  text-align: center;
}

.pickup-content.work .pickup-content-block .pickup-content-inner .pickup-product .product .product-img-2 .txt p {
  display: inline-block;
  color: #666;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-align: left;
}

.pickup-content.work .pickup-content-block .pickup-content-inner .pickup-product .product .product-img-2 img {
  margin-top: 10px;
}

.pickup-content.work .pickup-content-block .pickup-content-inner .pickup-product .product .product-txt {
  margin-left: 10px;
}

.pickup-content.casual .pickup-content-block h3 {
  margin-left: 462px;
}

.pickup-content.casual .pickup-content-block .pickup-content-inner .pickup-product {
  margin-right: 34px;
  padding-top: 90px;
  width: 370px;
}

.pickup-content.casual .pickup-content-block .pickup-content-inner .pickup-product-group {
  margin-top: 45px;
}

@media screen and (max-width: 768px) {
  .common-cts .pickup-content {
    margin-top: 13.33333vw;
  }
  .pickup-content {
    overflow: hidden;
    margin-top: 21.33333vw;
  }
  .pickup-content + .pickup-content {
    margin-top: 21.33333vw;
  }
  .pickup-content .pickup-side-img img {
    width: 100%;
  }
  .pickup-content .pickup-side-img.pickup-side-img-1 {
    width: 37.33333vw;
    top: 13.86667vw;
    left: -2.66667vw;
  }
  .pickup-content .pickup-side-img.pickup-side-img-2 {
    width: 25.06667vw;
    top: 15.46667vw;
    right: -2.66667vw;
  }
  .pickup-content .pickup-side-img.pickup-side-img-3 {
    display: none;
  }
  .pickup-content .pickup-side-img.pickup-side-img-4 {
    display: none;
  }
  .pickup-content .pickup-side-img.pickup-side-img-5 {
    width: 30.93333vw;
    top: 31.46667vw;
    left: -13.33333vw;
  }
  .pickup-content .pickup-side-img.pickup-side-img-6 {
    width: 30.93333vw;
    top: 14.4vw;
    right: -11.2vw;
  }
  .pickup-content .pickup-side-img.pickup-side-img-7 {
    display: none;
  }
  .pickup-content .pickup-content-block {
    width: auto;
  }
  .pickup-content .pickup-content-block .pickup-content-inner {
    display: block;
    margin-top: -4.8vw;
  }
  .pickup-content .pickup-content-block .pickup-content-inner .pickup-img img {
    width: 100%;
  }
  .pickup-content .pickup-content-block .pickup-content-inner.pickup-content-inner-1 {
    padding: 0;
  }
  .pickup-content .pickup-content-block .pickup-content-inner.pickup-content-inner-1 .pickup-img {
    padding: 0 6.93333vw 0 24.53333vw;
  }
  .pickup-content .pickup-content-block .pickup-content-inner.pickup-content-inner-2 {
    padding: 0;
  }
  .pickup-content .pickup-content-block .pickup-content-inner.pickup-content-inner-2 .pickup-img {
    padding: 0 24.53333vw 0 6.93333vw;
  }
  .pickup-content .pickup-content-block .pickup-content-inner .pickup-product h4 {
    text-align: center;
  }
  .pickup-content .pickup-content-block .pickup-content-inner .pickup-product-group {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 100%;
  }
  .pickup-content.sports .pickup-content-block h3 {
    margin-left: 25.33333vw;
  }
  .pickup-content.sports .pickup-content-block h3 svg {
    width: 74.13333vw;
    height: 17.86667vw;
  }
  .pickup-content.sports .pickup-content-block .pickup-content-inner h4 img {
    width: 52.8vw;
  }
  .pickup-content.sports .pickup-content-block .pickup-content-inner .pickup-product {
    margin: 10.66667vw auto 0;
    padding: 0;
    width: 82.66667vw;
  }
  .pickup-content.sports .pickup-content-block .pickup-content-inner .pickup-product-group {
    margin-top: 9.33333vw;
  }
  .pickup-content.sports .pickup-content-block .pickup-content-inner .pickup-product-group .product {
    width: 36vw;
  }
  .pickup-content.sports .pickup-content-block .pickup-content-inner .pickup-product-group .product img {
    width: 100%;
  }
  .pickup-content.precious .pickup-content-block h3 {
    margin-left: 8.53333vw;
  }
  .pickup-content.precious .pickup-content-block h3 svg {
    width: 46.13333vw;
    height: 18.66667vw;
  }
  .pickup-content.precious .pickup-content-block .pickup-content-inner h4 img {
    width: 67.2vw;
  }
  .pickup-content.precious .pickup-content-block .pickup-content-inner .pickup-product {
    margin: 10.66667vw auto 0;
    padding: 0;
    width: 77.33333vw;
  }
  .pickup-content.precious .pickup-content-block .pickup-content-inner .pickup-product-group {
    margin-top: 9.33333vw;
  }
  .pickup-content.precious .pickup-content-block .pickup-content-inner .pickup-product-group .product {
    width: 30.93333vw;
  }
  .pickup-content.precious .pickup-content-block .pickup-content-inner .pickup-product-group .product img {
    width: 100%;
  }
  .pickup-content.work .pickup-content-block h3 {
    margin-left: 24.53333vw;
  }
  .pickup-content.work .pickup-content-block h3 svg {
    width: 32.53333vw;
    height: 16.8vw;
  }
  .pickup-content.work .pickup-content-block .pickup-content-inner h4 img {
    width: 55.46667vw;
  }
  .pickup-content.work .pickup-content-block .pickup-content-inner .pickup-product {
    margin: 10.66667vw auto 0;
    padding: 0;
    width: 82.66667vw;
  }
  .pickup-content.work .pickup-content-block .pickup-content-inner .pickup-product .product {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 9.33333vw auto 0;
    width: 56vw;
  }
  .pickup-content.work .pickup-content-block .pickup-content-inner .pickup-product .product .product-img-1 {
    width: 32vw;
  }
  .pickup-content.work .pickup-content-block .pickup-content-inner .pickup-product .product .product-img-1 img {
    width: 100%;
  }
  .pickup-content.work .pickup-content-block .pickup-content-inner .pickup-product .product .product-img-2 {
    margin-left: 2.66667vw;
    width: 20.8vw;
  }
  .pickup-content.work .pickup-content-block .pickup-content-inner .pickup-product .product .product-img-2 .txt p {
    font-size: 2.4vw;
  }
  .pickup-content.work .pickup-content-block .pickup-content-inner .pickup-product .product .product-img-2 img {
    margin-top: 4vw;
    width: 100%;
  }
  .pickup-content.work .pickup-content-block .pickup-content-inner .pickup-product .product .product-txt {
    margin-left: 0;
    width: 100%;
  }
  .pickup-content.casual .pickup-content-block h3 {
    margin-left: 6.66667vw;
  }
  .pickup-content.casual .pickup-content-block h3 svg {
    width: 41.33333vw;
    height: 19.46667vw;
  }
  .pickup-content.casual .pickup-content-block .pickup-content-inner h4 img {
    width: 59.73333vw;
  }
  .pickup-content.casual .pickup-content-block .pickup-content-inner .pickup-product {
    margin: 10.66667vw auto 0;
    padding: 0;
    width: 82.66667vw;
  }
  .pickup-content.casual .pickup-content-block .pickup-content-inner .pickup-product-group {
    margin-top: 9.33333vw;
  }
  .pickup-content.casual .pickup-content-block .pickup-content-inner .pickup-product-group .product {
    width: 36vw;
  }
  .pickup-content.casual .pickup-content-block .pickup-content-inner .pickup-product-group .product img {
    width: 100%;
  }
}

.pickup-animation .pickup-animation-1 {
  opacity: 0;
  -webkit-transition: opacity 1s,-webkit-transform 1s;
  transition: opacity 1s,-webkit-transform 1s;
  transition: transform 1s,opacity 1s;
  transition: transform 1s,opacity 1s,-webkit-transform 1s;
  -webkit-transform: translateY(50px);
  transform: translateY(50px);
}

.pickup-animation .pickup-animation-2 {
  opacity: 0;
  -webkit-transition: opacity 1s 0.5s,-webkit-transform 1s 0.5s;
  transition: opacity 1s 0.5s,-webkit-transform 1s 0.5s;
  transition: transform 1s 0.5s,opacity 1s 0.5s;
  transition: transform 1s 0.5s,opacity 1s 0.5s,-webkit-transform 1s 0.5s;
  -webkit-transform: translateY(50px);
  transform: translateY(50px);
}

.pickup-animation.active .pickup-animation-1 {
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

.pickup-animation.active .pickup-animation-2 {
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

/* =========================== pickup-title =============================== */
.pickup-ttl {
  position: relative;
  height: 800px;
}

.pickup-ttl .pickup-ttl-inner {
  position: relative;
  margin: 0 auto;
  max-width: 1200px;
  height: 800px;
}

.pickup-ttl .pickup-ttl-inner .pickup-ttl-num {
  position: absolute;
  font-size: 26px;
  font-family: copperplate, serif;
  font-weight: 300;
  letter-spacing: 0.1em;
  top: 45px;
  opacity: 0;
}

.pickup-ttl .pickup-ttl-inner .pickup-ttl-frame {
  position: absolute;
  /* border-width: 20px;
            border-style: solid;*/
  top: calc(50% - 310px);
  width: 1000px;
  height: 670px;
  z-index: 3;
}

.pickup-ttl .pickup-ttl-inner .pickup-ttl-frame .border {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.9;
}

.pickup-ttl .pickup-ttl-inner .pickup-ttl-frame .border span {
  position: absolute;
  display: block;
  background-color: #ccc;
}

.pickup-ttl .pickup-ttl-inner .pickup-ttl-frame .border span.border1 {
  width: 20px;
  height: 100%;
  top: 0;
  right: 0;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
}

.pickup-ttl .pickup-ttl-inner .pickup-ttl-frame .border span.border2 {
  width: 100%;
  height: 20px;
  bottom: 0;
  left: 0;
  -webkit-transform-origin: right 0;
  transform-origin: right 0;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
}

.pickup-ttl .pickup-ttl-inner .pickup-ttl-frame .border span.border3 {
  width: 20px;
  height: 100%;
  top: 0;
  left: 0;
  -webkit-transform-origin: 0 bottom;
  transform-origin: 0 bottom;
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
}

.pickup-ttl .pickup-ttl-inner .pickup-ttl-frame .border span.border4 {
  width: 100%;
  height: 20px;
  top: 0;
  left: 0;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
}

.pickup-ttl .pickup-ttl-inner .pickup-ttl-frame .border-left span.border1 {
  left: 0;
  right: auto;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

.pickup-ttl .pickup-ttl-inner .pickup-ttl-frame .border-left span.border2 {
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

.pickup-ttl .pickup-ttl-inner .pickup-ttl-frame .border-left span.border3 {
  right: 0;
  left: auto;
  -webkit-transform-origin: 0 bottom;
  transform-origin: 0 bottom;
}

.pickup-ttl .pickup-ttl-inner .pickup-ttl-frame .border-left span.border4 {
  -webkit-transform-origin: right 0;
  transform-origin: right 0;
}

.pickup-ttl .pickup-ttl-inner .pickup-ttl-frame .pickup-ttl-area {
  position: absolute;
  padding: 70px 20px 0;
  width: 465px;
  opacity: 0;
}

.pickup-ttl .pickup-ttl-inner .pickup-ttl-frame .pickup-ttl-area h3 {
  text-align: center;
}

.pickup-ttl .pickup-ttl-inner .pickup-ttl-frame .pickup-ttl-area .pickup-ttl-products {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin: 50px auto 0;
  width: 310px;
}

.pickup-ttl .pickup-ttl-inner .pickup-ttl-frame .pickup-ttl-area .pickup-ttl-products .product-txt {
  margin-top: 10px;
}

.pickup-ttl .pickup-ttl-inner-right .pickup-ttl-num {
  right: 0;
}

.pickup-ttl .pickup-ttl-inner-right .pickup-ttl-frame {
  right: 0;
}

.pickup-ttl .pickup-ttl-inner-right .pickup-ttl-frame .pickup-ttl-area {
  right: 0;
}

.pickup-ttl .pickup-ttl-image {
  position: absolute;
  top: 0;
  width: calc(50% + 155px);
  height: 100%;
}

.pickup-ttl .pickup-ttl-image-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  background-color: #fff;
}

.pickup-ttl .pickup-ttl-image img {
  position: absolute;
  top: 0;
  opacity: 0;
}

.pickup-ttl .pickup-ttl-image-left {
  left: 0;
}

.pickup-ttl .pickup-ttl-image-left .pickup-ttl-image-box {
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

.pickup-ttl .pickup-ttl-image-left img {
  right: 0;
}

.pickup-ttl .pickup-ttl-image-right {
  right: 0;
}

.pickup-ttl .pickup-ttl-image-right .pickup-ttl-image-box {
  -webkit-transform-origin: right 0;
  transform-origin: right 0;
}

.pickup-ttl .pickup-ttl-image-right img {
  left: 0;
}

.pickup-ttl .pickup-ttl-image.show.pickup-ttl-image-left .pickup-ttl-image-box {
  -webkit-transform-origin: right 0;
  transform-origin: right 0;
}

.pickup-ttl .pickup-ttl-image.show.pickup-ttl-image-right .pickup-ttl-image-box {
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

.pickup-ttl .pickup-ttl-image.show img {
  opacity: 1;
}

.pickup-ttl.precious .pickup-ttl-num {
  color: #DD0026;
}

.pickup-ttl.precious .pickup-ttl-image.show {
  background-color: #DD0026;
}

.pickup-ttl.precious .pickup-ttl-frame .border span {
  background-color: #DD0026;
}

.pickup-ttl.work .pickup-ttl-num {
  top: 0;
  color: #E64E24;
}

.pickup-ttl.work .pickup-ttl-image.show {
  background-color: #E64E24;
}

.pickup-ttl.work .pickup-ttl-frame {
  top: calc(50% - 355px);
  /*border-color: rgba(230,78,36,0.9);*/
}

.pickup-ttl.work .pickup-ttl-frame .border span {
  background-color: #E64E24;
}

.pickup-ttl.casual .pickup-ttl-num {
  top: 5px;
  color: #F86886;
}

.pickup-ttl.casual .pickup-ttl-image.show {
  background-color: #F86886;
}

.pickup-ttl.casual .pickup-ttl-frame {
  top: calc(50% - 350px);
  /*border-color: rgba(248,104,134,0.9);*/
}

.pickup-ttl.casual .pickup-ttl-frame .border span {
  background-color: #F86886;
}

.pickup-ttl.myfavorite .pickup-ttl-num {
  color: #787878;
}

.pickup-ttl.myfavorite .pickup-ttl-image.show {
  background-color: #E95098;
}

.pickup-ttl.myfavorite .pickup-ttl-frame .pickup-ttl-area .pickup-ttl-products {
  margin-top: 30px;
  width: 330px;
}

.pickup-ttl.myfavorite .pickup-ttl-frame .border span {
  background-color: #EFF4F5;
}

/* =========================== pickup-title =============================== */
@media screen and (max-width: 768px) {
  .pickup-ttl {
    height: auto;
  }
  .pickup-ttl .pickup-ttl-inner {
    position: relative;
    margin: 0 auto;
    max-width: 1200px;
    height: 120vw;
  }
  .pickup-ttl .pickup-ttl-inner .pickup-ttl-num {
    font-size: 4.26667vw;
    top: 0;
    letter-spacing: 0.05em;
  }
  .pickup-ttl .pickup-ttl-inner .pickup-ttl-frame {
    top: 6.66667vw;
    width: 74.66667vw;
    height: 122.66667vw;
  }
  .pickup-ttl .pickup-ttl-inner .pickup-ttl-frame .border span.border1 {
    width: 1.86667vw;
  }
  .pickup-ttl .pickup-ttl-inner .pickup-ttl-frame .border span.border2 {
    height: 1.86667vw;
  }
  .pickup-ttl .pickup-ttl-inner .pickup-ttl-frame .border span.border3 {
    width: 1.86667vw;
  }
  .pickup-ttl .pickup-ttl-inner .pickup-ttl-frame .border span.border4 {
    height: 1.86667vw;
  }
  .pickup-ttl .pickup-ttl-inner .pickup-ttl-frame .pickup-ttl-area {
    padding: 59.2vw 0 0;
    width: 100%;
  }
  .pickup-ttl .pickup-ttl-inner .pickup-ttl-frame .pickup-ttl-area h3 {
    margin: 0 auto;
  }
  .pickup-ttl .pickup-ttl-inner .pickup-ttl-frame .pickup-ttl-area .pickup-ttl-products {
    margin: 4vw auto 0;
    width: 42.66667vw;
  }
  .pickup-ttl .pickup-ttl-inner .pickup-ttl-frame .pickup-ttl-area .pickup-ttl-products > div {
    width: 21.33333vw;
    text-align: center;
  }
  .pickup-ttl .pickup-ttl-inner .pickup-ttl-frame .pickup-ttl-area .pickup-ttl-products > div img {
    width: 15.46667vw;
  }
  .pickup-ttl .pickup-ttl-inner .pickup-ttl-frame .pickup-ttl-area .pickup-ttl-products > div .product-txt {
    margin: 1.86667vw auto 0;
  }
  .pickup-ttl .pickup-ttl-inner .pickup-ttl-frame .pickup-ttl-area .pickup-ttl-products > div .product-txt .model {
    font-size: 2.66667vw;
  }
  .pickup-ttl .pickup-ttl-inner .pickup-ttl-frame .pickup-ttl-area .pickup-ttl-products > div .product-txt .price {
    font-size: 2.66667vw;
    -webkit-transform: scale(0.7);
    transform: scale(0.7);
    white-space: nowrap;
  }
  .pickup-ttl .pickup-ttl-inner .pickup-ttl-frame .pickup-ttl-area .pickup-ttl-products img {
    width: 100%;
    max-width: 100%;
    height: auto;
  }
  .pickup-ttl .pickup-ttl-inner-right .pickup-ttl-num {
    right: 5.33333vw;
  }
  .pickup-ttl .pickup-ttl-inner-right .pickup-ttl-frame {
    right: 5.33333vw;
  }
  .pickup-ttl .pickup-ttl-inner-left .pickup-ttl-num {
    left: 5.33333vw;
  }
  .pickup-ttl .pickup-ttl-inner-left .pickup-ttl-frame {
    left: 5.33333vw;
  }
  .pickup-ttl .pickup-ttl-image {
    top: 0;
    width: 82.66667vw;
    height: 62.4vw;
  }
  .pickup-ttl .pickup-ttl-image img {
    height: 62.4vw;
  }
  .pickup-ttl.precious h3 {
    width: 26.66667vw;
  }
  .pickup-ttl.work h3 {
    width: 18.66667vw;
  }
  .pickup-ttl.work .pickup-ttl-num {
    top: 0;
  }
  .pickup-ttl.work .pickup-ttl-frame {
    top: 6.66667vw;
  }
  .pickup-ttl.casual h3 {
    width: 21.33333vw;
  }
  .pickup-ttl.casual .pickup-ttl-num {
    top: 0;
  }
  .pickup-ttl.casual .pickup-ttl-frame {
    top: 6.66667vw;
  }
  .pickup-ttl.myfavorite h3 {
    width: 32vw;
  }
}

.new {
  position: absolute;
  top: 0;
  left: calc(50% + 50px);
  width: 90px;
}

.product-txt {
  margin-top: 24px;
  color: #787878;
  font-family: "Noto Sans JP", sans-serif;
  text-align: center;
}

.product-txt .model {
  font-size: 15px;
  letter-spacing: 0.16em;
}

.product-txt .price {
  font-size: 11px;
  letter-spacing: 0.16em;
}

.product-txt .other {
  font-size: 10px;
  letter-spacing: 0.04em;
}

@media screen and (max-width: 768px) {
  .new {
    left: 72%;
    width: 12vw;
    height: 3.73333vw;
  }
  .product-txt {
    margin-top: 20px;
  }
  .product-txt .model {
    font-size: 13px;
  }
  .product-txt .price {
    font-size: 11px;
  }
  .product-txt .other {
    font-size: 10px;
  }
}

/* =========================== loading =============================== */
#loading {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: #fff;
  z-index: 999;
}

#loading .loader {
  position: absolute;
  border-radius: 50%;
  -webkit-box-shadow: 0 0 0 4px inset;
  box-shadow: 0 0 0 4px inset;
  color: #E2528E;
  top: calc(50% - 15px);
  left: calc(50% - 15px);
  width: 30px;
  height: 30px;
}

#loading .loader::before, #loading .loader::after {
  position: absolute;
  content: "";
}

#loading .loader::before {
  width: 17px;
  height: 32px;
  background-color: #fff;
  top: -1px;
  left: -1px;
  -webkit-transform-origin: 17px 16px;
  transform-origin: 17px 16px;
  -webkit-animation: loader_anime 1.5s infinite ease;
  animation: loader_anime 1.5s infinite ease;
}

#loading .loader::after {
  width: 17px;
  height: 32px;
  background-color: #fff;
  top: -1px;
  left: 16px;
  -webkit-transform-origin: 0 16px;
  transform-origin: 0 16px;
  -webkit-animation: loader_anime 1.5s infinite ease 0.3s;
  animation: loader_anime 1.5s infinite ease 0.3s;
}

@-webkit-keyframes loader_anime {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes loader_anime {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}