@charset "UTF-8";
/*-----------------------

         変数

-----------------------*/ :root {
  --baseColor: #1a1a1a;
  --mainColor: #8e2f33;
  --subColor: #1b1464;
  --accentColor: #;
  --colorW: #fff;
  --base50Color: #8c8c8c;
  --main50Color: #c69799;
  --sub50Color: #8d89b1;
  --accent50Color: #;
  --base10Color: #e8e8e8;
  --main10Color: #f4eaeb;
  --sub10Color: #e8e7ef;
  --accent10Color: #;
}

body {
  width: 100%;
  color: var(--baseColor);
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: 0.05em;
  font-feature-settings: "palt";
  /* 読みやすくモダンなゴシック体 */
  font-family: "Noto Sans JP", sans-serif;
  /* 明朝体。落ち着いた印象 */
  /* font-family: 'Noto Serif JP', serif; */
  /* 丸みのある親しみやすいゴシック体 */
  /* font-family: 'Zen Maru Gothic', sans-serif; */
}

@media screen and (max-width:1440px) {}
@media screen and (max-width:1368px) {}
@media screen and (max-width:1280px) {}
@media screen and (max-width:1024px) {}
@media screen and (max-width:559px) {}
@media screen and (max-width:375px) {}
@media screen and (max-width:361px) {}


#siEntryForm .display-block a {
  text-decoration: underline;
  color: var(--mainColor);
}
/*
.box-footer a:not(a.btn) {
  text-decoration: underline;
  color: var(--mainColor);
}
*/
.box-footer p a {
  text-decoration: underline;
  color: var(--mainColor);
}

.portfolio-item .card .card-title a {
    font-size: clamp(1.8rem, 1.7029126214rem + 0.2588996764vw, 2.2rem);
    font-weight: 600;
    line-height: 1.4;
    color: var(--mainColor);
}

.portfolio-item .card .card-title div {
    margin-top: 1rem;
}

/* SHOPログインのリンク */
.shop-panel-body .subtext a {
  text-decoration: underline;
  color: var(--mainColor);
}

/* 退会フォームの件名インデント */
.defect-page p {
	padding-left: 15px;
}

/* SHOPのカテゴリのリンク表示 */
.breadcrumb a {
  color: var(--mainColor);
}
.breadcrumb a:hover {
  text-decoration: underline;
}

.product-category a {
  color: var(--mainColor);
}
.product-category a:hover {
  text-decoration: underline;
}

/* マイページタイムラインのリンク */
.timeline > li > .timeline-item > .timeline-header a {
  color: var(--mainColor);
}
.timeline > li > .timeline-item > .timeline-header a:hover {
  text-decoration: underline;
}

/* コンテンツの前後ページ */
.body-shelf-list .flex-c, .body-info-detail .flex-c {
    flex-direction: row;
}

/* 再生リストチェックボックス */
.body-shelf-comment input[type="checkbox"] {
  -webkit-appearance: auto;
  -moz-appearance: auto;
  appearance: auto;
  border-radius: 0;
  margin-top:0.8rem;
}

.container {
  margin-bottom: clamp(4rem, 2.5437rem + 6.2136vw, 10rem);
}

/* パスワードの大きさ調整 */
input[type=password] {
    font-size: 16px;
    transform: scale(1.0);
}

/* アンケートフォームのマージン調整 */
.body-form-detail .answer .form-control {
  margin-left:0.5rem;
}

/* アンケートフォームのマージン調整 */
.body-form-detail [data-event="file-text"] {
  margin-left:0.5rem;
}

/* プロフィールのマージン調整 */
.body-profile-edit .content .row .col-lg-3:nth-child(2) {
  margin-top: 0;
}

/* フォームの選択アライン */
.body-form-detail th.quantity {
  text-align: center;
}

/* 縦長ロゴの際のヘッダー調整 */
@media (min-width: 769px) {
header h1 img, header p.logo img {
  height: 5vw; /*適宜調整も可能*/
  width: auto;
  max-height: 8rem; /*適宜調整も可能*/
}
}
@media screen and (max-width: 1440px) {
  .hdr-inner {
    align-items: start;
  }
  .right-Area.flex {
    padding-top: 0.5vw;
  }
}
@media screen and (max-width: 559px) {
    header h1 img, header p.logo img {
        max-width: 10rem; /*適宜調整も可能*/
        width: 24vw; /*適宜調整も可能*/
    }
}