@charset "UTF-8";
html {
  position: relative;
  scroll-behavior: smooth; }

.c5-introduction {
  text-align: left; }
  @media only screen and (min-width: 767px) {
    .c5-introduction {
      text-align: center; } }

.c5-tabListContent {
  display: block; }
  .c5-tabListContent .c5-tabListContentInner {
    display: flex;
    justify-content: center;
    width: 100%;
    /*margin: 0 20px 15px 0;
    @media only screen and (min-width: 1200px) {
    	&:last-of-type {
    		margin: 0 0 15px 0;
    	}
    }*/ }
    .c5-tabListContent .c5-tabListContentInner a {
      width: 100%;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      padding: 22px 10px;
      border-radius: 5px;
      box-sizing: border-box;
      box-shadow: 0 0 0 2px #113377 inset;
      height: 110px; }
      @media only screen and (min-width: 1200px) {
        .c5-tabListContent .c5-tabListContentInner a {
          padding: 15px; } }
      .c5-tabListContent .c5-tabListContentInner a div p {
        position: relative;
        line-height: 1.4;
        margin: 0;
        font-size: clamp(16px, 1vw, 16px);
        text-align: center;
        font-weight: bold;
        color: #113377; }
        .c5-tabListContent .c5-tabListContentInner a div p::after {
          display: block;
          /*position: absolute;*/
          content: "\02228";
          transform: scale(1, 0.5);
          color: orange;
          font-size: clamp(18px, 2vw, 18px);
          font-weight: bold;
          margin: 2px auto auto 0;
          top: 10px; }
      .c5-tabListContent .c5-tabListContentInner a img {
        width: 65px; }
      .c5-tabListContent .c5-tabListContentInner a:hover {
        text-decoration: none;
        background: #eaecf3; }

@media only screen and (max-width: 1200px) {
  .c5-tabListContent .c5-tabListContentInner a div p {
    font-size: 14px;
    line-height: 1.1; } }
@media only screen and (max-width: 766px) {
  .c5-tabListContent .c5-tabListContentInner a div p {
    font-size: 16px;
    line-height: 1.4; } }
@media only screen and (min-width: 1200px) {
  .c5-tabListContent .c5-tabListContentInner a img {
    width: 76px; } }
@media only screen and (min-width: 767px) {
  .c5-tabListContent {
    display: flex !important;
    justify-content: center;
    flex-wrap: wrap;
    /*gap: 0 15px;*/ } }
.c5-fourColumn {
  display: block; }
  .c5-fourColumn .c5-tabListContentInner {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 20px 0 0 0; }

@media only screen and (min-width: 767px) {
  .c5-fourColumn {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0 20px; } }
@media only screen and (min-width: 767px) {
  .c5-fourColumn .c5-tabListContentInner {
    width: calc(25% - 20px); } }
.capture-box {
  display: block;
  gap: 0;
  padding: 0 15px; }
  @media only screen and (min-width: 767px) {
    .capture-box {
      padding: 0 40px; } }
  .capture-box div {
    display: grid;
    grid-template-columns: 1fr;
    flex: 0 1 calc(50% - 40px);
    margin-top: 0;
    /*img {
    	width: 100%;
    }
    span {
    	width: 100%;
    	display: block;
    	text-align: center;
    	padding: 20px 0;
    	background: rgba(244,243,243,1);
    }*/ }

@media only screen and (min-width: 767px) {
  .capture-box {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0 40px; } }
.grid-item {
  display: grid; }

.grid-item__title {
  grid-column: 1 / 2;
  /*アイテムの配置位置を「列方向：ライン番号1から2の間」に指定*/
  /*grid-row: 1 / 2;*/
  /*アイテムの配置位置を「行方向：ライン番号1から2の間」に指定*/ }
  .grid-item__title p {
    font-size: clamp(17px, 2vw, 21px);
    font-weight: bold;
    padding: 15px 0 0 0;
    margin-bottom: 0; }

.grid-item__img {
  grid-column: 2 / 3;
  /*アイテムの配置位置を「列方向：ライン番号2から3の間」に指定*/
  grid-row: 1 / 2;
  /*アイテムの配置位置を「行方向：ライン番号1から2の間」に指定*/
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0; }
  .grid-item__img img {
    width: 80px;
    padding: 10px 0 0 10px; }

@media only screen and (min-width: 767px) {
  .grid-item__img img {
    width: 122px; } }
@media only screen and (min-width: 767px) {
  .grid-item__img {
    justify-content: center;
    grid-row: 1 / 3;
    /*アイテムの配置位置を「行方向：ライン番号1から3の間」に指定*/ } }
/*@media only screen and (min-width: 767px) {
  .grid-item__img img {
    width: initial; } }*/
.grid-item__text {
  grid-column: 1 / 3;
  /*アイテムの配置位置を「列方向：ライン番号1から3の間」に指定*/
  /*grid-row: 2 / 3;*/
  /*アイテムの配置位置を「行方向：ライン番号3から3の間」に指定*/
  padding: 0 0 15px 0; }
  .grid-item__text p {
    margin-bottom: 0; }
    .grid-item__text p:last-of-type {
      text-align: center;
      margin-bottom: 20px; }

@media only screen and (min-width: 1200px) {
  .grid-item__text {
    grid-column: 1 / 2;
    /*アイテムの配置位置を「列方向：ライン番号1から2の間」に指定*/ } }
@media only screen and (min-width: 767px) {
  .grid-item__text p:last-of-type {
    text-align: left; } }
.margin-control5 {
  margin-left: 5.5vw; }
  @media only screen and (min-width: 767px) {
    .margin-control5 {
      margin-left: 0; } }

.margin-control30 {
  margin: initial; }
  @media only screen and (min-width: 1200px) {
    .margin-control30 {
      margin: -30px 0 0 0; } }

.margin-control80 {
  margin: initial; }
  @media only screen and (min-width: 1200px) {
    .margin-control80 {
      margin: -80px 0 0 0; } }

.border-column, .border-columnSp {
  position: relative; }

.border-column::after, .border-columnSp::after {
  position: absolute;
  bottom: 0;
  left: 1.5%;
  background: #d9d9d9;
  display: block;
  content: "";
  width: 97%;
  height: 1px; }

@media only screen and (min-width: 767px) {
  .border-row {
    position: relative;
    background: transparent; }
    .border-row::before {
      position: absolute;
      top: 10%;
      left: -40px;
      background: #d9d9d9;
      display: block;
      content: "";
      width: 1px;
      height: 80%; } }
@media only screen and (min-width: 767px) {
  .border-columnSp::after {
    background: transparent; } }
/*中央寄せ見出し*/
.is-style-vkp-heading-diagonal-line {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  border: 0;
  font-size: clamp(17px, 3vw, 28px); }
  .is-style-vkp-heading-diagonal-line::before, .is-style-vkp-heading-diagonal-line::after {
    content: '';
    width: 30px;
    height: 3px;
    background-color: currentColor !important;
    /*Lightning見出しデザイン設定のCSS対策*/
    position: unset;
    border: unset;
    margin-left: unset;
    margin-right: unset;
    flex-grow: unset; }
  .is-style-vkp-heading-diagonal-line::before {
    margin-right: 14px;
    transform: rotate(60deg); }
  .is-style-vkp-heading-diagonal-line::after {
    margin-left: 14px;
    transform: rotate(-60deg); }

.c5-title {
  font-size: clamp(26px, 3vw, 42px);
  font-weight: 600;
  letter-spacing: 1.3px;
  line-height: 0.5; }
  @media only screen and (min-width: 767px) {
    .c5-title {
      letter-spacing: 2.1px; } }
  .c5-title p {
    line-height: 140%;
    /* 36.4px */
    margin: 0; }

/*短い左右線*/
.c5-reason-ranking {
  position: relative;
  background: #fcddc1;
  padding: 53px 20px; }
  @media only screen and (min-width: 767px) {
    .c5-reason-ranking {
      padding: 76px 84px; } }
  .c5-reason-ranking__title {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    width: 320px;
    height: 52px;
    border-radius: 26px;
    background: #f58e2f; }
    @media only screen and (min-width: 767px) {
      .c5-reason-ranking__title {
        width: 478px;
        height: 64px;
        border-radius: 32px; } }
    .c5-reason-ranking__title span {
      font-size: clamp(20px, 2vw, 28px);
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%; }
  .c5-reason-ranking__list {
    background: white;
    padding: 25px 10px 35px 10px; }
    @media only screen and (min-width: 767px) {
      .c5-reason-ranking__list {
        padding: 15px 50px 35px 50px; } }
    .c5-reason-ranking__list ul li {
      display: block;
      border-bottom: solid 1px rgba(0, 0, 0, 0.2);
      padding: 15px 0 10px 0; }
      @media only screen and (min-width: 767px) {
        .c5-reason-ranking__list ul li {
          display: flex;
          justify-content: flex-start;
          align-items: center; } }
      .c5-reason-ranking__list ul li:first-of-type {
        align-items: flex-end;
        position: relative; }
        .c5-reason-ranking__list ul li:first-of-type::after {
          display: block;
          content: "";
          position: absolute;
          bottom: 10px;
          left: 45px;
          height: 2px;
          width: 70%;
          background: #fff713; }
          @media only screen and (min-width: 767px) {
            .c5-reason-ranking__list ul li:first-of-type::after {
              bottom: 15px;
              left: 100px;
              width: 62%; } }
      .c5-reason-ranking__list ul li div {
        text-align: center; }
        @media only screen and (min-width: 767px) {
          .c5-reason-ranking__list ul li div {
            text-align: left; } }
        .c5-reason-ranking__list ul li div:first-of-type {
          color: #113377;
          font-weight: 600; }
        .c5-reason-ranking__list ul li div:not(:first-of-type) {
          font-size: clamp(22px, 2vw, 24px);
          color: #113377;
          font-weight: 600; }

.c5-no1 {
  font-size: clamp(17px, 2vw, 20px);
  position: relative;
  bottom: 5px; }

.c5-no {
  font-size: clamp(17px, 2vw, 20px);
  position: relative;
  bottom: 15px; }

.no01 {
  font-size: clamp(25px, 2vw, 30px);
  position: relative;
  bottom: 5px; }

.no02 {
  font-size: clamp(25px, 2vw, 24px);
  position: relative;
  bottom: 15px;
  margin: 0; }
  @media only screen and (min-width: 767px) {
    .no02 {
      margin: 0 35px 0 0; } }

.c5-bigger {
  font-size: clamp(30px, 2vw, 40px);
  color: #f58e2f;
  position: relative;
  margin: 0 20px; }
  .c5-bigger::before {
    display: inline-block;
    content: url("../images/no1_left.png");
    position: absolute;
    top: -10px;
    left: -20px; }
    @media only screen and (min-width: 767px) {
      .c5-bigger::before {
        top: -20px; } }
  .c5-bigger::after {
    display: inline-block;
    content: url("../images/no1_right.png");
    position: absolute;
    top: -10px;
    right: -20px; }
    @media only screen and (min-width: 767px) {
      .c5-bigger::after {
        top: -20px; } }

.c5-medium {
  font-size: clamp(26px, 2vw, 32px);
  color: #f58e2f;
  position: relative;
  margin: 0; }
  @media only screen and (min-width: 767px) {
    .c5-medium {
      margin: 0 20px; } }
  .c5-medium::before {
    display: inline-block;
    content: url("../images/no2-3_left.png");
    position: absolute;
    top: -10px;
    left: -20px; }
    @media only screen and (min-width: 767px) {
      .c5-medium::before {
        top: -20px; } }
  .c5-medium::after {
    display: inline-block;
    content: url("../images/no2-3_right.png");
    position: absolute;
    top: -10px;
    right: 10px; }
    @media only screen and (min-width: 767px) {
      .c5-medium::after {
        top: -20px;
        right: -20px; } }

.icon-image {
  margin: 0 20px 0 20px; }
  @media only screen and (min-width: 767px) {
    .icon-image {
      margin: 0 26px 0 20px; } }

.c5-containar {
  padding: 20px; }
  @media only screen and (min-width: 767px) {
    .c5-containar {
      padding: 40px; } }
  .c5-containar__two-column {
    display: block; }
    @media only screen and (min-width: 767px) {
      .c5-containar__two-column {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 40px; } }
    .c5-containar__two-column__textbox {
      flex: 1;
      text-align: center;
      background: white;
      color: #113377;
      font-size: clamp(22px, 2vw, 26px);
      padding: 30px; }
      .c5-containar__two-column__textbox span {
        color: #f58e2f;
        font-size: clamp(32px, 2vw, 38px); }
    .c5-containar__two-column__comment {
      flex: 0 1 50%;
      margin: 30px 0 0 0; }
      @media only screen and (min-width: 767px) {
        .c5-containar__two-column__comment {
          margin: 0; } }
  .c5-containar__one-column .c5-comment .c5-icon {
    flex: 1;
    text-align: left; }
  .c5-containar__one-column .c5-comment .arrow_box {
    flex: 4;
    padding: 20px 20px; }
    @media only screen and (min-width: 767px) {
      .c5-containar__one-column .c5-comment .arrow_box {
        flex: 11;
        padding: 20px 0 20px 20px; } }

.c5-containar__two-column__comment .c5-comment .arrow_box {
  padding: 20px;
  font-size: clamp(16px, 2vw, 20px); }
  @media only screen and (min-width: 767px) {
    .c5-containar__two-column__comment .c5-comment .arrow_box {
      padding: 40px 40px; } }

/*c5-arrow-in_imgBox*/
.c5-arrow-in_imgBox {
  display: block;
  margin: 20px; }
  @media only screen and (min-width: 767px) {
    .c5-arrow-in_imgBox {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      margin: 0; } }
  .c5-arrow-in_imgBox div:first-of-type {
    flex: 1; }
  .c5-arrow-in_imgBox div:last-of-type {
    position: relative;
    flex: 0 1 50%;
    border-top: solid 2px #f2f3f2;
    border-left: none; }
    @media only screen and (min-width: 767px) {
      .c5-arrow-in_imgBox div:last-of-type {
        border-left: solid 2px #f2f3f2;
        border-top: none; } }
  .c5-arrow-in_imgBox div img {
    max-width: 100%; }

/*c5-arrow-in_imgBox__end*/
/*c5-orangeBox_title*/
.c5-orangeBox_title {
  max-width: 1200px;
  margin: 0 auto;
  background: #f58e2f; }
  .c5-orangeBox_title span {
    color: white;
    font-size: clamp(20px, 2vw, 32px);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 95px;
    font-weight: 600; }
    @media only screen and (min-width: 767px) {
      .c5-orangeBox_title span {
        height: 80px; } }

/*c5-orangeBox_title__end*/
/*OrangeBorderBox*/
.c5-orangeBox {
  box-sizing: border-box;
  box-shadow: 0 0 0 4px #f58e2f inset;
  padding: 20px; }
  @media only screen and (min-width: 767px) {
    .c5-orangeBox {
      padding: 30px; } }
  .c5-orangeBox__img-box {
    display: block; }
    @media only screen and (min-width: 767px) {
      .c5-orangeBox__img-box {
        display: flex;
        justify-content: center;
        flex-wrap: wrap; } }
    .c5-orangeBox__img-box div:first-of-type {
      flex: 1;
      padding: 20px 50px; }
      @media only screen and (min-width: 767px) {
        .c5-orangeBox__img-box div:first-of-type {
          padding: 0; } }
    .c5-orangeBox__img-box div:last-of-type {
      position: relative;
      flex: 0 1 60%;
      border-top: solid 2px #f58e2f;
      border-left: none;
      padding: 40px 0 0 0; }
      @media only screen and (min-width: 767px) {
        .c5-orangeBox__img-box div:last-of-type {
          border-left: solid 2px #f58e2f;
          border-top: none;
          padding: 0 0 0 40px; } }
      .c5-orangeBox__img-box div:last-of-type::before {
        position: absolute;
        display: block;
        content: url("../images/plus-icon.png");
        top: -24px;
        left: 43%; }
        @media only screen and (min-width: 767px) {
          .c5-orangeBox__img-box div:last-of-type::before {
            top: 50%;
            left: -24px; } }
    .c5-orangeBox__img-box div img {
      max-width: 100%; }

/*OrangeBorderBox__end*/
/*左縦線見出し*/
.c5-title_decoration {
  font-size: clamp(20px, 2vw, 24px);
  padding: 0.25em 0.5em;
  color: rgba(0, 0, 0, 0.9);
  background: transparent;
  border-left: solid 5px #f58e2f;
  border-bottom: none; }

/*左縦線見出し__end*/
/*吹き出し+アイコンlayout_pattern01*/
.c5-comment {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px; }

.c5-comment .c5-icon {
  flex: 1;
  text-align: left; }
  .c5-comment .c5-icon img {
    max-width: 100%; }

.c5-comment .arrow_box {
  flex: 4;
  height: auto;
  font-size: clamp(16px, 2vw, 20px); }

.c5-icon_title {
  font-size: clamp(12px, 2vw, 15px);
  white-space: nowrap;
  display: inline-block;
  color: #113377; }

/*吹き出し+アイコンlayout_pattern01__end*/
/* 吹き出し_汎用 */
.arrow_box {
  position: relative;
  background: white;
  padding: 20px 20px;
  border: 2px solid #113276;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px; }
  @media only screen and (min-width: 767px) {
    .arrow_box {
      padding: 40px 30px; } }

.arrow_box:after, .arrow_box:before {
  border: solid transparent;
  content: '';
  height: 0;
  width: 0;
  pointer-events: none;
  position: absolute;
  right: 99.6%;
  top: 49%; }
  @media only screen and (min-width: 767px) {
    .arrow_box:after, .arrow_box:before {
      right: 100%; } }

.arrow_box:after {
  border-color: rgba(255, 255, 255, 0);
  border-top-width: 9px;
  border-bottom-width: 9px;
  border-left-width: 13px;
  border-right-width: 13px;
  margin-top: -9px;
  border-right-color: #FFFFFF; }

.arrow_box:before {
  border-color: rgba(17, 50, 118, 0);
  border-top-width: 11px;
  border-bottom-width: 11px;
  border-left-width: 15px;
  border-right-width: 15px;
  margin-top: -11px;
  margin-right: 2px;
  border-right-color: #113276; }

/* 吹き出し_汎用__end */
/*吹き出し_汎用じゃない*/
.under-arrow_box {
  box-sizing: border-box;
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  height: auto;
  background: #FFFFFF;
  text-align: center;
  border: 4px solid #113377;
  color: #FFFFFF;
  font-size: 20px;
  font-weight: bold;
  padding: 10px; }
  @media only screen and (min-width: 767px) {
    .under-arrow_box {
      padding: 30px; } }

.under-arrow_box:after, .under-arrow_box:before {
  border: solid transparent;
  content: '';
  height: 0;
  width: 0;
  pointer-events: none;
  position: absolute;
  top: 99.7%;
  left: 50%; }
  @media only screen and (min-width: 767px) {
    .under-arrow_box:after, .under-arrow_box:before {
      top: 100%; } }

.under-arrow_box:after {
  border-color: rgba(255, 255, 255, 0);
  border-top-width: 16px;
  border-bottom-width: 16px;
  border-left-width: 16px;
  border-right-width: 16px;
  margin-left: -16px;
  border-top-color: #FFFFFF; }

.under-arrow_box:before {
  border-color: rgba(17, 51, 119, 0);
  border-top-width: 20px;
  border-bottom-width: 20px;
  border-left-width: 20px;
  border-right-width: 20px;
  margin-left: -20px;
  margin-top: 2px;
  border-top-color: #113377; }

/*吹き出し_汎用じゃない__end*/
/*下向き吹き出し_title*/
.c5-under-arrow_title {
  max-width: 1000px;
  margin: 0 auto;
  background: #dee6ec; }
  .c5-under-arrow_title span {
    color: #113273;
    font-size: clamp(21px, 2vw, 36px);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px; }
    @media only screen and (min-width: 767px) {
      .c5-under-arrow_title span {
        height: 70px; } }

/*下向き吹き出し_title__end*/
.c5-under-arrow_font {
  position: relative;
  font-size: clamp(36px, 3vw, 52px);
  font-weight: 600;
  margin: 0;
  line-height: 1.3; }
  .c5-under-arrow_font::after {
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    width: 70%;
    height: 3px;
    background: #F58E2F;
    bottom: 0; }

/*2カラム画像のみレスポンシブ*/
.c5-responsive_box {
  display: block;
  line-height: 0; }
  @media only screen and (min-width: 767px) {
    .c5-responsive_box {
      display: flex;
      flex-wrap: wrap; } }
  .c5-responsive_box div {
    flex: 0 1 50%; }
    .c5-responsive_box div img {
      max-width: 100%; }

/*2カラム画像のみレスポンシブ__end*/
/*borderで囲んだグラフ*/
.c5-graph-example {
  padding: 20px;
  box-sizing: border-box;
  box-shadow: 0 0 0 2px #113377 inset; }
  @media only screen and (min-width: 767px) {
    .c5-graph-example {
      padding: 50px; } }

/*borderで囲んだグラフ__end*/
.c5-table-title {
  font-size: clamp(18px, 2vw, 22px);
  margin: 0; }

/* 横スクロールバー__Start */
.c5-scrollbar_wrap {
  position: relative;
  /*height: 360px;*/
  overflow-x: scroll;
  margin: 2rem 0;
  border: solid 1px rgba(0, 0, 0, 0.1);
  border-radius: 5px; }
  @media only screen and (min-width: 767px) {
    .c5-scrollbar_wrap {
      overflow-x: initial;
      /*height: auto;*/
      border: none; } }
  .c5-scrollbar_wrap__table {
    position: absolute;
    width: 1200px;
    height: 100%; }
    @media only screen and (min-width: 767px) {
      .c5-scrollbar_wrap__table {
        width: 100%;
        position: initial; } }
    .c5-scrollbar_wrap__table table {
      width: 1200px; }
      @media only screen and (min-width: 767px) {
        .c5-scrollbar_wrap__table table {
          width: 100%; } }
      .c5-scrollbar_wrap__table table tr {
        height: 70px;
        text-align: center;
        background: #fff9eb;
        font-size: clamp(14px, 2vw, 16px); }
        @media only screen and (min-width: 767px) {
          .c5-scrollbar_wrap__table table tr {
            height: 100px; } }
        .c5-scrollbar_wrap__table table tr:first-of-type {
          background: #113377;
          color: white; }
        .c5-scrollbar_wrap__table table tr:nth-child(even) {
          background: #ffefdf; }
        .c5-scrollbar_wrap__table table tr td {
          border-top: solid 1px white;
          border-left: solid 1px white; }
  .c5-scrollbar_wrap__graph {
    position: absolute;
    width: 200%;
    height: 100%; }
    @media only screen and (min-width: 767px) {
      .c5-scrollbar_wrap__graph {
        width: 100%;
        position: static; } }
    .c5-scrollbar_wrap__graph img {
      max-width: 100%; }

.half-height {
  height: 35px !important; }
  @media only screen and (min-width: 767px) {
    .half-height {
      height: 50px !important; } }

.heightTable {
  height: 360px; }
  @media only screen and (min-width: 767px) {
    .heightTable {
      height: auto; } }

.heightImg {
  height: 60vh; }
  @media only screen and (min-width: 767px) {
    .heightImg {
      height: auto; } }

.c5-badge {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 22px;
  color: white;
  font-size: 14px;
  border-radius: 2px;
  display: inline-block; }

._blue {
  width: 58px;
  background: #1763C5; }

._pink {
  width: 74px;
  background: #EA4D68; }

/* スクロールバーの幅と高さを設定する */
.scrollbar::-webkit-scrollbar {
  width: 5px;
  height: 5px; }

/* スクロールバーの形を設定する */
.scrollbar-thumb-rounded::-webkit-scrollbar-thumb {
  border-radius: 0.5rem; }

/* スクロールバーの色を設定する */
.scrollbar-thumb-black::-webkit-scrollbar-thumb {
  --bg-opacity: 1;
  background-color: rgba(0, 0, 0, 0.3); }

/* 横スクロールバー__end */
/* カメラ・レンズサービスご利用ナビ */
.c5-other_service {
  display: block;
  padding: 30px 20px;
  background: #eaebec;
  gap: 0; }
  @media only screen and (min-width: 767px) {
    .c5-other_service {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      gap: 20px;
      padding: 50px 80px; } }
  .c5-other_service__img {
    flex: 0 1 55%; }
    .c5-other_service__img img {
      max-width: 100%; }
  .c5-other_service__text {
    flex: 1;
    text-align: center; }
    .c5-other_service__text p {
      font-size: clamp(22px, 2vw, 28px); }

/* カメラ・レンズサービスご利用ナビ__end */
/*ソニーストアでお買い物はこちらから-column*/
.c5-product {
  display: block;
  padding: 0; }

@media only screen and (min-width: 767px) {
  .c5-product {
    display: flex;
    flex-wrap: wrap;
    gap: 0 26px; } }
.c5-product__list {
  list-style: none;
  width: 100%; }
  .c5-product__list img {
    width: 100%; }
  .c5-product__list dl dt {
    font-size: clamp(16px, 2vw, 18px);
    font-weight: bold;
    margin: 0; }
  .c5-product__list dl dd {
    margin: 10px 0 1em 0; }

@media only screen and (min-width: 767px) {
  .c5-product__list {
    width: calc(25% - 20px); } }
/*ソニーストアでお買い物はこちらから-column*/
/*spスペーサー*/
.spacer_sp {
  margin-top: 60px;
  margin-bottom: 40px; }
  @media only screen and (min-width: 767px) {
    .spacer_sp {
      margin-top: 120px;
      margin-bottom: 60px; } }

.c5-pc {
  display: block; }

@media only screen and (max-width: 756px) {
  .c5-pc {
    display: none; } }
.c5-sp {
  display: none; }

@media only screen and (max-width: 756px) {
  .c5-sp {
    display: block; } }
ul {
  padding-left: 0;
  list-style: none; }

.c5-link {
  text-decoration: underline; }

.c5-href {
  display: inline-block;
  color: #3865E0; }
  .c5-href:hover {
    opacity: 0.8;
    text-decoration: underline;
    transition: 1s; }

.c5-orangeText {
  color: #f58e2f; }

.c5-yellow {
  background: #fff9eb; }

.c5-orange {
  background: #ffefdf; }

.c5-caution {
  position: relative;
  color: #c93434;
  padding: 0 0 0 1.1em; }
  .c5-caution::before {
    content: "※";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 1em;
    height: 1em;
    color: #c93434;
    font-size: 14px; }