@charset "UTF-8";
/* =====================
  リセット・共通系
 ======================= */
/** -------------------- 変数定義 -------------------- **/
:root {
  /*---------- カラー定義 ---------- */
  /* common color */
  --c_base: #00A1E9;
  --c_bg01: #EDF9FF;
  --c_bg02: #EEF2F4;
  --c_red: #EC1212;
  --c_black: #000000;
  --c_gray01: #333333;
  --c_gray02: #4F4F4F;
  --c_gray03: #828282;
  --c_gray04: #BDBDBD;
  --c_gray05: #E0E0E0;
  --c_gray06: #F3F3F3;
  --c_wht: #ffffff;
  /* text color */
  --c_text: #1D1D1D;
  --c_text_g: #686868;
  /* tag color */
  --c_tag01: #F85858;
  --c_tag02: #4DB7E6;
  --c_tag03: #5c5c5c;
  --c_tag04: #f5f390;
  --c_tag05: #c9fbb0;
  
	
  /*---------- フォント定義 ---------- */
  --font_ja: "Noto Sans JP", sans-serif;
  --font_eng: "Roboto", sans-serif;
  --font_mix: "Roboto", "Noto Sans JP", sans-serif;
  /*---------- transition定義 ---------- */
  --anim: all 0.4s ease-in-out;
  /*---------- filter定義
     https://codepen.io/sosuke/pen/Pjoqqp ---------- */
  /* #000 → #00A1E9 */
  --filter_base: invert(56%) sepia(40%) saturate(6168%) hue-rotate(168deg) brightness(96%) contrast(102%);
  /* #000 → #EC1212 */
  --filter_red: invert(15%) sepia(71%) saturate(6998%) hue-rotate(356deg) brightness(96%) contrast(93%);
  /* #000 → #fff */
  --filter_wht: invert(93%) sepia(93%) saturate(28%) hue-rotate(48deg) brightness(106%) contrast(109%);
  /* #000 → #1D1D1D */
  --filter_text: invert(2%) sepia(11%) saturate(3%) hue-rotate(314deg) brightness(100%) contrast(81%);
  /* #000 → #828282 */
  --filter_gray03: invert(57%) sepia(1%) saturate(0%) hue-rotate(116deg) brightness(90%) contrast(87%);
  /* #000 → #686868 */
  --filter_text_g: invert(39%) sepia(0%) saturate(1339%) hue-rotate(250deg) brightness(101%) contrast(92%);
}

/** -------------------- reset -------------------- **/
ul, ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: 400;
  line-height: normal;
}

figure {
  margin: 0;
}

a, button {
  -webkit-transition: var(--anim);
  transition: var(--anim);
}
a:hover, button:hover {
  text-decoration: none;
  opacity: 0.7;
}

small {
  font-size: 100%;
}

dl, dt, dd {
  margin: 0;
}

p {
  margin: 0;
}

img {
  vertical-align: middle;
}

body {
  font-family: var(--font_ja);
  font-size: 1.4rem;
  font-optical-sizing: auto;
  font-weight: 400;
  letter-spacing: 0.05em;
  line-height: 1.6428571429;
  -webkit-font-smoothing: antialiased;
  color: var(--c_text);
}

/** -------------------- ログイン状態 -------------------- **/
.fs-clientInfo--true .fs-clientInfo--falseOnly {
  display: none !important;
}

.fs-clientInfo--false .fs-clientInfo--trueOnly {
  display: none !important;
}

/** -------------------- レイアウト -------------------- **/
.l-inner {
  padding: 0 15px;
  max-width: 1130px;
  margin: 0 auto;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}
.l-inner--narrow {
  padding: 0 30px;
  max-width: 1160px;
}

.l-section {
  padding: 25px 0;
}

/** -------------------- 見出し -------------------- **/
.c-heading01 {
  font-size: 2.1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin-bottom: 16px;
}

.c-heading02 {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 16px;
}

.c-heading03 {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 16px;
}

.c-ttl {
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: normal;
  padding: 32px 0;
}

.c-ttl-bg {
  background: var(--c_bg02);
  padding: 8px 16px;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.6;
  margin: 0 -15px 8px;
}
.c-ttl-bg:last-child {
  margin-bottom: 0;
}

.c-ttl-border {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: normal;
  padding: 0 0 8px;
  border-bottom: 1px solid currentColor;
  margin: 16px 0 24px;
}
.c-ttl-border:first-child {
  margin-top: 0;
}
.c-ttl-border:last-child {
  margin-bottom: 0;
}

.c-ttl-section {
  margin: 0 0 32px;
  text-align: center;
}
.c-ttl-section__jp {
  font-size: 2.1rem;
  font-weight: 700;
  color: var(--c_black);
}
.c-ttl-section__eng {
  font-family: var(--font_eng);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.1em;
  margin-top: 8px;
  color: var(--c_base);
}
.c-ttl-section__eng:first-child {
  margin-top: 0;
}

/** -------------------- フォント -------------------- **/
.c-color-red {
  color: var(--c_red) !important;
}

.c-color-blue {
  color: var(--c_base) !important;
}

.c-font-eng {
  font-family: var(--font_eng) !important;
}

.c-font-mix {
  font-family: var(--font_mix) !important;
}

.c-font-jp {
  font-family: var(--font_ja) !important;
}

.c-font-bold {
  font-weight: 700 !important;
}

.c-font-normal {
  font-weight: 400 !important;
}

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

.c-align-right {
  text-align: right !important;
}

.c-align-left {
  text-align: left !important;
}

.c-txt-wide {
  line-height: 2;
  margin: 16px 0 24px;
}

/** -------------------- リスト -------------------- **/
.c-list-disc > * {
  position: relative;
  padding-left: 22px;
}
.c-list-disc > *:before {
  content: "";
  width: 0.3571428571em;
  height: 0.3571428571em;
  background: var(--c_base);
  border-radius: 50%;
  position: absolute;
  left: 0.3214285714em;
  top: 0.6428571429em;
}

/** -------------------- リンク・ボタン -------------------- **/
.c-link-arrow {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-column-gap: 4px;
     -moz-column-gap: 4px;
          column-gap: 4px;
  color: var(--c_base);
}
.c-link-arrow:after {
  content: "";
  width: 0.8571428571em;
  height: 0.8571428571em;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  background: url(../images/common/arrow01-right.png) no-repeat center/contain;
  -webkit-filter: var(--filter_base);
          filter: var(--filter_base);
}

.c-link-border {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.c-btn {
  display: block;
  width: 180px;
  text-align: center;
  margin: 0 auto;
  line-height: normal;
  letter-spacing: 0.1em;
  padding: 10px;
  background: var(--c_wht);
  border: 1px solid var(--c_gray05);
  border-radius: 50px;
  color: var(--c_text);
}
.c-btn:active, .c-btn:visited {
  color: var(--c_text);
}
.c-btn:hover {
  background: var(--c_base);
  color: var(--c_wht);
  border-color: var(--c_base);
  opacity: 1;
}

/** -------------------- 画像 -------------------- **/
.c-img {
  margin: 8px auto 16px;
}
.c-img:first-child {
  margin-top: 0;
}
.c-img:last-child {
  margin-bottom: 0;
}
.c-img img {
  display: block;
  height: auto;
}

/** -------------------- 背景色 -------------------- **/
.c-bg-blue {
  background: var(--c_bg01);
}

.c-bg-gray {
  background: var(--c_bg02);
  margin: 0 10px;
}

/** -------------------- キャンペーンバナー -------------------- **/
.p-campaign__bnr {
  padding: 16px 0;
}
.p-campaign__bnr:nth-child(n+2) {
  padding-top: 0;
}
.p-campaign__bnr__link {
  display: block;
  text-align: center;
}
.p-campaign__bnr__txt {
  display: block;
  font-size: 1.6rem;
  margin-top: 8px;
  color: var(--c_text);
}

/** -------------------- 商品タグ -------------------- **/
.c-tag-red {
  background: var(--c_tag01);
  color: var(--c_wht);
  font-weight: 700;
}

.c-tag-blue {
  background: var(--c_tag02);
  color: var(--c_wht);
  font-weight: 700;
}

.c-tag-black {
  background: var(--c_tag03);
  color: var(--c_wht);
  font-weight: 700;
}

.c-tag-yellow {
  background: var(--c_tag04);
  color: var(--c_gray02);
  font-weight: 700;
}

.c-tag-green {
  background: var(--c_tag05);
  color: var(--c_gray02);
  font-weight: 700;
}


/** ---------- アコーディオン（水色） ---------- **/

.accordiontop {
  margin: 5px 10px;
}
.accordiontop__summary {
  display: block;
  background: #e8f4fc; /* 見出しの背景色 */
  font-weight: bold;
  position: relative;
  list-style: none; /* 矢印を消す */
  cursor: pointer;
  padding: 5px 10px 5px 10px;
  border-radius: 10px;
  text-align:center;
  font-size:12px;
  margin: -5px auto;
  max-width:360px;
  
}
.accordiontop__summary::-webkit-details-marker {
  display: none;
}
.accordiontop__summary::after {
  content: "+";
  font-size: 1.4em; /* 記号のサイズ */
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}
.accordiontop[open] .accordion__summary::after {
  content: "−";
}
.accordiontop__detail {
  padding: 4px 10px;
  margin: 10px 0;
}
.accordiontop__text {
  margin: 0;
}


/** ----- アコーディオン（水色）ここまで----- **/



/** -------- カテゴリページお知らせ -------- **/

.c_news {
  padding: 10px 0;
  background: #EEF2F4;
  margin-top:10px;
}
.c_inner {
  width: 90%;
  background-color: #fff;
  margin: 0 auto;
  padding: 10px 0;
  overflow-y: scroll;
  max-height: 180px;
}
.c_sub_ttl {
  font-size: 16px;
  text-align: center;
  margin-bottom: 5px;
}
.c_news_list a {
    text-decoration: none!important;
    color: #333;
	margin-top:-10px;
}
.c_news_list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* ここからがニュース記事のCSS */

.c_news_list {
  margin: 0 5%;
}
.c_news_list_item {
  padding: 5px 0;
  border-bottom: 1px solid #E6E6E6;
  text-align:left;
}
.news_list_item:first-child {
  border-top: 1px solid #E6E6E6;
}
.c_news_list_item a {
 position: relative;
 display: flex;
 padding-right: 30px;
 font-weight:400 !important;
}
.c_news_list_date {
  font-size: 15px;
  display: flex;
  margin-right: 15px;
  align-items: center;
}
.c_news_item {
  background: #b6e5fa;
  border-radius: 14px;
  width: 6em;
  /* 親要素の文字サイズを基準 */
  text-align: center;
  margin-left: 20px;
  font-size:12px;
}
.arrow {
  width: 25px;
  height: 1px;
  background: #707070;
  position: absolute;
  top: 50%;
  right: 0;
}
.arrow::after {
  content: "";
  display: block;
  width: 6px;
  height: 1px;
  background: #707070;
  transform: rotate(45deg);
  position: absolute;
  right: 0px;
  bottom: 2px;
}

@media screen and (max-width: 1024px) {
    .c_news_list_item a {
        display: block;
    }
}
@media screen and (max-width: 769px) {
    .c_news_list_item a  {
        font-size: 14px;
    }
}
@media screen and (max-width: 480px) {
    .c_news_list_item a {
        padding-right: 0;
        margin: -40px 0 7px 0;
		font-size:13px;
    }
	.c_news_list_date {
  font-size: 13px;
}

	.c_sub_ttl {
  margin-bottom: -15px;
}
}

/** ----- カテゴリページお知らせここまで ----- **/



/* スマホのみ
  ------------------------ */
@media (max-width: 767px) {
  .u-onlyPC {
    display: none !important;
  }
  .c-align-center--sp {
    text-align: center !important;
  }
  .c-align-right--sp {
    text-align: right !important;
  }
  .c-align-left--sp {
    text-align: left !important;
  }
}
/* タブレット・PC
  ------------------------ */
@media (min-width: 768px) {
  .u-onlySP {
    display: none !important;
  }
  /** -------------------- レイアウト -------------------- **/
  .l-section {
    padding: 64px 0;
  }
  /** -------------------- 見出し -------------------- **/
  .c-heading01 {
    font-size: 2.8rem;
    margin-bottom: 16px;
  }
  .c-heading02 {
    font-size: 2.1rem;
  }
  .c-heading03 {
    font-size: 1.8rem;
  }
  .c-ttl {
    font-size: 2.1rem;
    padding: 40px 0;
  }
  .c-ttl-bg {
    padding: 12px 24px;
    font-size: 1.8rem;
    line-height: 1.6;
    margin: 0 0 16px;
  }
  .c-ttl-border {
    margin: 16px 0 24px;
  }
  .c-ttl-section {
    margin: 0 0 40px;
  }
  .c-ttl-section__jp {
    font-size: 2.8rem;
  }
  .c-ttl-section__eng {
    font-size: 1.4rem;
  }
  /** -------------------- フォント -------------------- **/
  .c-align-center--pc {
    text-align: center !important;
  }
  .c-align-right--pc {
    text-align: right !important;
  }
  .c-align-left--pc {
    text-align: left !important;
  }
  /** -------------------- リンク・ボタン -------------------- **/
  .c-btn {
    width: 320px;
    padding: 16px;
    font-size: 1.6rem;
  }
  /** -------------------- 画像 -------------------- **/
  .c-img {
    margin: 16px auto 24px;
  }
}
/* PCのみ
  ------------------------ *//*# sourceMappingURL=common.css.map */