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

         変数

-----------------------*/ :root {
/*
  --baseColor: #a8a8a8;
  --mainColor: #f26d3d;
  --subColor: #;
  --accentColor: #;
  --colorW: #fff;
  --base50Color: #d4d4d4;
  --main50Color: #f8b68e;
  --sub50Color: #;
  --accent50Color: #;
  --base10Color: #fffdfd;
  --main10Color: #fff0e9;
  --sub10Color: #;
  --accent10Color: #;
*/
  --baseColor: #6e6e6e;
  --mainColor: #f26d3d;
  --subColor: #;
  --accentColor: #;
  --colorW: #fff;
  --base50Color: #d4d4d4;
  --main50Color: #f8b68e;
  --sub50Color: #;
  --accent50Color: #;
  --base10Color: #fffdfd;
  --main10Color: #fff0e9;
  --sub10Color: #;
  --accent10Color: #;


}
/*-----------------------

         COMMON

-----------------------*/
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);
}

/* パスワードの大きさ調整 */
textarea {
    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;
}
/* ラジオを読み取り専用に */
.radio-readonly {
  pointer-events: none;  /* クリック・ドラッグ不可 */
  opacity: 0.7;          /* 任意：readonly感 */
}
/* 案件のタブの上部にマージン */
.body-mypage-item-edt .tab-content {
  margin-top: 2rem;
}

/* 案件のタブ下線なしに */
.body-mypage-item-edt .nav-tabs-custom {
  box-shadow: none;
}

/* 案件のマージンを調整 */
.body-mypage-item-edt .row:before,
.body-mypage-item-edt .row:after {
  content: none;
}

/* 縦長ロゴの際のヘッダー調整 */
@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; /*適宜調整も可能*/
    }
}