@charset "UTF-8";
/* ----------------共通------------------ */
.layout-area {
  gap: var(--LAYOUT_AREA_GAP);
}

.layout-area h2,
.layout-area h3 {
  font-family: "Shippori Mincho", serif;
}

.layout-area h2.fs-c-productListItem__productName {
  font-size: 14px;
  letter-spacing: 0;
  font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}

.layout-area h2.gothic, .layout-area h3.gothic {
  font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}

.mt5 {
  margin-top: 5px !important;
}

.fs30 {
  font-size: 30% !important;
}

.fs40 {
  font-size: 40% !important;
}

.fs50 {
  font-size: 50% !important;
}

.fs60 {
  font-size: 60% !important;
}

.fs70 {
  font-size: 70% !important;
}

.fs80 {
  font-size: 80% !important;
}

.fs90 {
  font-size: 90% !important;
}

.fs110 {
  font-size: 110% !important;
}

.fs120 {
  font-size: 120% !important;
}

.fs130 {
  font-size: 130% !important;
}

.fs140 {
  font-size: 140% !important;
}

.fs150 {
  font-size: 150% !important;
}

.fs160 {
  font-size: 160% !important;
}

.fs170 {
  font-size: 170% !important;
}

.fs180 {
  font-size: 180% !important;
}

.fs200 {
  font-size: 200% !important;
}

.fcr {
  color: #e2041b;
}

.fcp {
  color: #e95295;
}

.fcb {
  color: #19448e;
}

.fcy {
  color: #c89932;
}

.fcg {
  color: #007b43;
}

.fcv {
  color: #7f1184;
}

.fwb {
  font-weight: bold !important;
}

.fac {
  text-align: center !important;
}

.ffm {
  font-family: "Shippori Mincho", serif !important;
}

.ffg {
  font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif !important;
}

.mgt10 {
  margin-top: 10px !important;
}

.mgt20 {
  margin-top: 20px !important;
}

.mgt40 {
  margin-top: 40px !important;
}

.mgt60 {
  margin-top: 60px !important;
}

.red {
  color: #c50505;
}

@media screen and (min-width: 768px) {
  .contents_wrap {
    line-height: 1.8;
  }
  .layout-area {
    display: grid;
    --LAYOUT_AREA_GAP: 60px;
    --TWO_COLUMN_GAP: 30px;
    max-width: 840px;
    margin: 0 auto;
  }
  .contentssec {
    margin-top: 40px;
  }
  .textinner {
    padding: 0px 50px;
  }
  .txtcontents {
    margin-top: 30px;
  }
  .pcmgt100 {
    margin-top: 100px;
  }
  .layout-area h3.pagetitle {
    font-size: 27px;
    margin: 34px 0 25px;
  }
  .mgt100 {
    margin-top: 100px;
  }
}
@media screen and (max-width: 767px) {
  .layout-area {
    --LAYOUT_AREA_GAP: 50px;
    --TWO_COLUMN_GAP: 20px;
  }
  .contentssec {
    margin-top: 25px;
  }
  .txtcontents {
    margin-top: 25px;
  }
  .spmgt50 {
    margin-top: 50px;
  }
  .mgt100 {
    margin-top: 70px;
  }
  .spfont20 {
    font-size: 20px !important;
  }
}
.subtitle {
  font-size: 1.4em;
  margin: 15px 0;
}

#productlist01, #productlist02, #productlist03 {
  margin-top: -40px;
}

.newtag {
  display: block;
  font-size: 0.8em;
}

.dotlistcontents {
  margin: 30px 0;
}

.dotlistcontents dt {
  font-weight: bold;
  font-size: 1.12em;
  margin-bottom: 8px;
}

.dotlistcontents dt::before {
  content: "・";
  padding-right: 3px;
}

.dotlistcontents dd {
  margin-bottom: 18px;
}

.contentstitle {
  font-family: "Shippori Mincho", serif;
}

.fs-c-productList__list {
  margin-top: 0 !important;
}

.rub {
  font-size: 0.65em;
  display: block;
}

h3.subtitle {
  font-size: 1.3em;
  font-weight: bold;
  margin: 20px 0;
}

@media screen and (min-width: 768px) {
  .contentstitle {
    font-size: 27px;
    margin: 34px 0 25px;
  }
  .pccenter {
    text-align: center;
  }
}
@media screen and (max-width: 767px) {
  .contentstitle {
    font-size: 22px;
    margin: 20px auto;
  }
}
/* ----------------01------------------ */
@media screen and (min-width: 768px) {
  .layout01 h2 {
    font-size: 27px;
    margin: 34px 0 25px;
  }
}
@media screen and (max-width: 767px) {
  .layout01 {
    /*
        width: 100vw;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    */
    margin-bottom: var(--LAYOUT_AREA_GAP);
  }
  .layout01 h2,
  .layout01 p {
    margin-left: auto;
    margin-right: auto;
  }
  .layout01 h2 {
    font-size: 22px;
    margin: 20px auto;
  }
  .spinnertext {
    width: 88%;
    margin-left: auto;
    margin-right: auto;
  }
}
/* ----------------02------------------ */
.layout02 {
  display: grid;
  gap: var(--LAYOUT_AREA_GAP);
}

@media screen and (min-width: 768px) {
  .layout02 li {
    display: flex;
    align-items: center;
    gap: var(--TWO_COLUMN_GAP);
  }
  .layout02 li:nth-child(even) {
    flex-direction: row-reverse;
  }
  .layout02 li > * {
    flex: 1;
  }
  .layout02 h3 {
    font-size: 20px;
    margin-bottom: 10px;
  }
}
@media screen and (max-width: 767px) {
  .layout02 {
    margin-bottom: var(--LAYOUT_AREA_GAP);
  }
  .layout02 h3 {
    font-size: 22px;
    margin: 20px auto;
  }
}
/* 左 */
.layout02-left {
  display: grid;
  gap: var(--LAYOUT_AREA_GAP);
}

@media screen and (min-width: 768px) {
  .layout02-left li {
    display: flex;
    align-items: center;
    gap: var(--TWO_COLUMN_GAP);
  }
  .layout02-left li > * {
    flex: 1;
  }
  .layout02-left h3 {
    font-size: 23px;
    margin-bottom: 10px;
    font-weight: bold;
  }
}
@media screen and (max-width: 767px) {
  .layout02-left {
    margin-bottom: var(--LAYOUT_AREA_GAP);
  }
  .layout02-left h3 {
    font-size: 23px;
    margin: 20px auto;
  }
}
/* 右 */
.layout02-right {
  display: grid;
  gap: var(--LAYOUT_AREA_GAP);
}

@media screen and (min-width: 768px) {
  .layout02-right li {
    display: flex;
    align-items: center;
    gap: var(--TWO_COLUMN_GAP);
  }
  .layout02-right li {
    flex-direction: row-reverse;
  }
  .layout02-right li > * {
    flex: 1;
  }
  .layout02-right h3 {
    font-size: 23px;
    margin-bottom: 10px;
    font-weight: bold;
  }
}
@media screen and (max-width: 767px) {
  .layout02-right {
    margin-bottom: var(--LAYOUT_AREA_GAP);
  }
  .layout02-right h3 {
    font-size: 23px;
    margin: 20px auto;
  }
}
.layout-leftimg {
  display: flex;
  align-items: center;
  margin-bottom: 50px;
}

.layout-rightimg {
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
}

.layout-leftimg h3, .layout-rightimg h3 {
  margin-bottom: 10px;
}

@media screen and (min-width: 768px) {
  .layout-leftimg .imgcontents, .layout-rightimg .imgcontents {
    width: 50%;
  }
  .layout-leftimg .contents, .layout-rightimg .contents {
    flex: 1;
  }
  .layout-leftimg {
    gap: var(--TWO_COLUMN_GAP);
  }
  .layout-rightimg {
    gap: var(--TWO_COLUMN_GAP);
  }
  .layout-leftimg h3, .layout-rightimg h3 {
    font-size: 23px;
    font-weight: bold;
  }
}
@media screen and (max-width: 767px) {
  .layout-leftimg, .layout-rightimg {
    flex-direction: column;
  }
  .layout-leftimg .imgcontents, .layout-rightimg .imgcontents {
    margin-bottom: 20px;
  }
  .layout-leftimg h3, .layout-rightimg h3 {
    font-size: 20px;
    font-weight: bold;
  }
}
/* ----------------03------------------ */
.layout03 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--TWO_COLUMN_GAP);
}

@media screen and (min-width: 768px) {
  .layout03 h3 {
    font-size: 20px;
    margin: 12px 0 10px;
  }
}
@media screen and (max-width: 767px) {
  .layout03 {
    margin-bottom: var(--LAYOUT_AREA_GAP);
  }
  .layout03 h3 {
    font-size: 17px;
    margin: 12px 0 10px;
  }
}
/* ----------------04------------------ */
.layout04 ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

@media screen and (min-width: 768px) {
  .layout04 h3 {
    font-size: 27px;
    margin: 20px 0 15px;
  }
}
@media screen and (max-width: 767px) {
  .layout04 {
    margin-bottom: var(--LAYOUT_AREA_GAP);
  }
  .layout04 h3 {
    font-size: 17px;
    margin: 12px 0 10px;
  }
}
/* ----------------05------------------ */
.layout05 {
  margin: 15px 0;
}

.layout05-flex02 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  overflow: unset;
}

.layout05-flex02, .layout05-flex03, .layout05-flex04 {
  margin: 15px 0;
}

@media screen and (min-width: 768px) {
  .layout05-flex02 {
    gap: 20px;
  }
  .layout05-flex03 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    overflow: unset;
  }
  .layout05-flex04 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    overflow: unset;
  }
}
@media screen and (max-width: 767px) {
  .layout05-flex02 {
    gap: 10px;
  }
  .layout05-flex03 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    overflow: unset;
  }
  .layout05-flex04 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    overflow: unset;
  }
}
/* ----------------06------------------ */
.layout06 ul {
  display: grid;
}

.layout06 .price {
  text-align: right;
}

.layout06 h3.seriestitle {
  font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  font-size: 1.2em;
}

.layout06 p {
  font-size: 0.85em;
}

@media screen and (min-width: 768px) {
  .layout06 ul {
    gap: 24px;
    grid-template-columns: repeat(4, 1fr);
  }
  .layout06 h3 {
    font-size: 16px;
    margin: 20px 0 15px;
  }
  .layout06 .price {
    font-size: 17px;
  }
  .layout06.side03 ul {
    gap: 24px;
    grid-template-columns: repeat(3, 1fr);
  }
  .layout06.side02 ul {
    gap: 24px;
    grid-template-columns: repeat(2, 1fr);
  }
  .layout06.side02 p {
    font-size: 1em;
  }
}
@media screen and (max-width: 767px) {
  .layout06 {
    margin-bottom: var(--LAYOUT_AREA_GAP);
  }
  .layout06 ul {
    gap: 15px;
    grid-template-columns: repeat(2, 1fr);
  }
  .layout06 h3 {
    font-size: 17px;
    margin: 12px 0 10px;
  }
  .layout06 .price {
    font-size: 15px;
  }
}
/* ----------------ボタン------------------ */
.layout-btn {
  display: block;
  margin: 0 auto;
  padding: 10px 0;
  border: 1px solid var(--GRAY01);
  color: var(--BLACK);
  border-radius: 3px;
  text-align: center;
  position: relative;
}

@media screen and (min-width: 768px) {
  .layout-btn {
    width: 320px;
    margin: 30px auto 0;
    border: 1px solid var(--GRAY01);
  }
  .layout-btn:hover {
    color: #fff;
    opacity: 1;
  }
  .layout-btn::before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    content: "";
    border: 1px solid var(--BLACK);
    background: var(--BLACK);
    transform-origin: left top;
    transform: scale(0, 1);
    transition: transform 0.5s;
  }
  .layout-btn:hover::before {
    transform-origin: left top;
    transform: scale(1, 1);
  }
}
@media screen and (max-width: 767px) {
  .layout-btn {
    width: 188px;
    margin: 20px auto 0;
    border: 1px solid var(--GRAY01);
    border-radius: 3px;
    background-color: var(--WHITE);
  }
}
.morebtn a {
  display: block;
  margin: 0 auto;
  padding: 10px 0;
  border: 1px solid var(--GRAY01);
  color: var(--BLACK);
  border-radius: 3px;
  text-align: center;
  position: relative;
}

@media screen and (min-width: 768px) {
  .morebtn {
    width: 320px;
    margin: 0 auto;
  }
  .morebtn a:hover {
    color: #fff;
    opacity: 1;
  }
  .morebtn a::before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    content: "";
    border: 1px solid var(--BLACK);
    background: var(--BLACK);
    transform-origin: left top;
    transform: scale(0, 1);
    transition: transform 0.5s;
  }
  .morebtn a:hover::before {
    transform-origin: left top;
    transform: scale(1, 1);
  }
}
@media screen and (max-width: 767px) {
  .morebtn {
    width: 188px;
    margin: 0 auto;
  }
}
.notetitle {
  font-weight: bold;
  font-size: 1.1em;
}

/* 関連商品と最近チェックした商品 */
.fs_ProductDetails-recommend-sec {
  margin: 0 auto var(--GENERALSEC);
}

.fs_ProductDetails-recommend {
  display: grid;
}

.fs_ProductDetails-recommend article p {
  font-weight: bold;
  text-align: right;
}

@media screen and (min-width: 768px) {
  .fs_ProductDetails-recommend-ttl {
    font-size: 25px;
    margin-bottom: 15px;
  }
  .fs_ProductDetails-recommend {
    grid-template-columns: repeat(4, 1fr);
    column-gap: 15px;
    row-gap: 35px;
  }
  .fs_ProductDetails-recommend article h3 {
    margin: 10px 0;
  }
}
@media screen and (max-width: 767px) {
  .fs_ProductDetails-recommend-ttl {
    font-size: 22px;
    margin-bottom: 20px;
    text-align: center;
  }
  .fs_ProductDetails-recommend article h3 {
    margin: 8px 0;
    font-size: 12px;
  }
  .fs_ProductDetails-recommend {
    white-space: nowrap;
    padding-bottom: 30px;
    padding-left: 0;
    padding-right: 0;
    display: block;
    overflow-x: scroll;
    overflow-y: auto;
    width: var(--INNER_WIDTH);
    margin-left: auto;
    margin-right: auto;
  }
  .fs_ProductDetails-recommend article {
    display: inline-block;
    min-width: 180px;
    max-width: 180px;
    vertical-align: top;
  }
  .fs_ProductDetails-recommend article:not(:last-child) {
    margin-right: 10px;
  }
  .fs_ProductDetails-recommend article h3 {
    white-space: break-spaces;
  }
}/*# sourceMappingURL=layout.css.map */