@charset 'UTF-8';

.box.-fundtumitate-products-container {
  position: relative;
  margin-top: 2.5em;
  padding: 0 15px 15px;
  border-top: 2px solid #ee733d;
  background: #fdeee4;
}

.box.-fundtumitate-products-container>.title {
  font-size: .2rem;
  line-height: 1.64;
  padding: 15px 0;
  text-align: center;
}

.box.-fundtumitate-products-container>.contents {
  padding: 10px;
  background: #fff;
}

.box.-fundtumitate-products-container.-us {
  border-top-color: #33a1db;
  background: #e6f4fd;
}

.box.-fundtumitate-products-container.-japan {
  border-top-color: #11a84e;
  background: #deeedc;
}

.box.-fundtumitate-products-container.-other {
  border-top-color: #9c4998;
  background: #f2e9f4;
}

.box.-fundtumitate-products-container.-balance {
  border-top-color: #c78312;
  background: #f8efe2;
}

.box.-fundtumitate-product {
  padding: 0;
  background: #fff;
}

.box.-fundtumitate-product:not(:first-child) {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #ccc;
}

.box.-fundtumitate-product .toggle-panel {
  width: 100%;
}

.box.-fundtumitate-product .toggle-panel>.title {
  padding-top: 0;
  padding-bottom: 0;
  border: none;
}

.box.-fundtumitate-product .toggle-panel>.title:after {
  font-size: 15px;
  right: 0;
  width: 25px;
  height: 25px;
  content: '';
  transition: background-size 200ms ease,transform 200ms ease;
  transform: none;
  color: #fff;
  border: none;
  border-radius: 50%;
  background: center center no-repeat #433d3c;
  background-image: linear-gradient(to right,#fff 0,#fff 100%),linear-gradient(to right,#fff 0,#fff 100%);
  background-size: 13px 1px,1px 13px;
}

.box.-fundtumitate-product .toggle-panel>.title.-active:after {
  transform: rotate(-90deg);
  background-size: 0,1px 13px;
}

.box.-fundtumitate-product .toggle-panel>.title .ico-label.-fund-detail-ranking.-nisa {
  font-weight: 700;
  color: #333;
  border-radius: 0;
  background: #f2efec;
}

.box.-fundtumitate-product .toggle-panel>.title .ico-label.-fund-detail-ranking.-nisa.-emphasis {
  padding-left: 27px;
}

.box.-fundtumitate-product .toggle-panel>.title .ico-label.-fund-detail-ranking.-nisa.-emphasis:before {
  border: 1px solid #f2efec;
  background-color: #f2efec;
}

.box.-fundtumitate-product .toggle-panel>.title .ico-label.-fund-detail-ranking.-nisa>.rank {
  color: #e01815;
}

.box.-fundtumitate-product .toggle-panel>.title .ico-label.-status.-red {
  font-size: .15rem;
  margin: 0;
  padding: 3px 6px 5px;
  border-radius: 4px;
}

.box.-fundtumitate-product .toggle-panel>.contents {
  padding-top: 5px;
  padding-bottom: 0;
}

.box.-fundtumitate-product .container {
  margin-top: 20px;
}

.box.-fundtumitate-product .container>.description {
  grid-area: description;
}

.box.-fundtumitate-product .container>.detail {
  grid-area: detail;
  flex: 1 1 auto;
}

.box.-fundtumitate-product .container>.detail .btn.-tertiary {
  font-size: .16rem;
  width: 100%;
  min-width: 0;
  max-width: 270px;
  border: none;
}

.box.-fundtumitate-product .container>.detail .btn.-tertiary:not(:hover) {
  background: linear-gradient(to bottom,#b20000,#c00000);
}

.box.-fundtumitate-product .container>.detail .btn.-tertiary:hover {
  color: #fff;
  background: linear-gradient(to bottom,#c90101,#c90101);
}

.box.-fundtumitate-product .container>.detail .btn.-tertiary:hover:before {
  border-color: #fff;
}

.box.-fundtumitate-product .container>.detail .btn.-tertiary:hover>.ico-font {
  color: #fff;
}

.box.-fundtumitate-product .container>.thumbnail {
  position: relative;
  margin-top: 10px;
}

.box.-fundtumitate-product .container>.thumbnail>.fig {
  width: 200px;
}

.box.-fundtumitate-product .ico-label.-lt-white {
  line-height: 1;
  min-width: 0;
  padding: 5px;
  color: #7f6805;
  border-color: #7f6805;
}

.btn.-fundtumitate-products {
  width: 100%;
  min-width: 0;
  padding: 10px 30px 10px 10px;
  background: #fdeee4;
}

.btn.-fundtumitate-products:before {
  position: absolute;
  top: 0;
  right: 10px;
  bottom: 0;
  display: block;
  width: 18px;
  height: 18px;
  margin: auto;
  content: '';
  border-radius: 50%;
  background: #ee733d;
}

.btn.-fundtumitate-products:after {
  position: absolute;
  top: 0;
  top: -2px;
  right: 16px;
  bottom: 0;
  display: inline-block;
  width: 4px;
  height: 4px;
  margin: auto;
  content: '';
  transform: rotate(135deg);
  vertical-align: middle;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  border-bottom-color: transparent!important;
  border-left-color: transparent!important;
}

.btn.-fundtumitate-products.-us {
  background: #e6f4fd;
}

.btn.-fundtumitate-products.-us:before {
  background: #33a1db;
}

.btn.-fundtumitate-products.-japan {
  background: #deeedc;
}

.btn.-fundtumitate-products.-japan:before {
  background: #11a84e;
}

.btn.-fundtumitate-products.-other {
  background: #f2e9f4;
}

.btn.-fundtumitate-products.-other:before {
  background: #9c4998;
}

.btn.-fundtumitate-products.-balance {
  background: #f8efe2;
}

.btn.-fundtumitate-products.-balance:before {
  background: #c78312;
}

.-campaign-fundtumitate .box.-fundtumitate-product:not(:first-child) {
  padding-top: 0;
}

.-campaign-fundtumitate .box.-fundtumitate-products-container {
  padding: 30px;
  border: 1px solid #e3e3e3;
  background-color: #f8f8f8;
}

.-campaign-fundtumitate .box.-fundtumitate-products-container>.title {
  padding: 0 0 20px;
  text-align: left;
}

.-campaign-fundtumitate .box.-fundtumitate-products-container>.contents {
  padding: 0;
  background-color: initial;
}

.-campaign-fundtumitate .box.-fundtumitate-product {
  border: 1px solid #e3e3e3;
}

.-campaign-fundtumitate .box.-fundtumitate-product .container {
  margin-top: 0;
  padding: 30px 30px 20px;
}

.-campaign-fundtumitate .box.-fundtumitate-product .container>.brand {
  grid-area: brand;
}

.-campaign-fundtumitate .box.-fundtumitate-product .container>.brand .title .ico-label.-fund-detail-ranking.-nisa {
  font-weight: 700;
  color: #333;
  border-radius: 0;
  background: #f2efec;
}

.-campaign-fundtumitate .box.-fundtumitate-product .container>.brand .title .ico-label.-fund-detail-ranking.-nisa.-emphasis {
  padding-left: 27px;
}

.-campaign-fundtumitate .box.-fundtumitate-product .container>.brand .title .ico-label.-fund-detail-ranking.-nisa.-emphasis:before {
  border: 1px solid #f2efec;
  background-color: #f2efec;
}

.-campaign-fundtumitate .box.-fundtumitate-product .container>.brand .title .ico-label.-fund-detail-ranking.-nisa>.rank {
  color: #e01815;
}

.-campaign-fundtumitate .box.-fundtumitate-product .detail {
  text-align: center;
  border-top: 1px solid #e3e3e3;
}

.-campaign-fundtumitate .box.-fundtumitate-product .detail .row {
  margin-bottom: 0;
}

.-campaign-fundtumitate .box.-fundtumitate-product .detail .-fundtumitate-detail {
  padding: 20px 20px 30px;
}

@media print,screen and (min-width:768px) {
  .box.-fundtumitate-products-container>.title {
    font-size: .26rem;
    line-height: 1.49231;
  }

  .box.-fundtumitate-products-container>.contents {
    padding: 30px 25px;
  }

  .box.-fundtumitate-product {
    display: flex;

    flex-wrap: wrap;
  }

  .box.-fundtumitate-product:not(:first-child) {
    margin-top: 20px;
    padding-top: 20px;
  }

  .box.-fundtumitate-product .toggle-panel>.title {
    font-size: .24rem;
    font-weight: 400;
    line-height: 1.53333;
  }

  .box.-fundtumitate-product .container {
    display: grid;

    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    grid-auto-rows: 1fr;
    grid-template-columns: 200px auto;
    grid-template-rows: auto;
    gap: 20px 20px;
    grid-template-areas: 'thumbnail description' 'thumbnail detail';
  }

  .box.-fundtumitate-product .container>.detail .row.-adjustheight .dlist.-general {
    display: flex;
    flex-direction: column;

    justify-content: space-between;
  }

  .box.-fundtumitate-product .container>.thumbnail {
    max-width: 200px;
    margin: 0;

    grid-area: thumbnail;
    flex: 0 0 auto;
  }

  .-campaign-fundtumitate .box.-fundtumitate-product:not(:first-child) {
    padding-top: 0;
  }

  .-campaign-fundtumitate .box.-fundtumitate-product .container {
    grid-template-columns: 250px auto;
    gap: 20px 30px;
    grid-template-areas: 'thumbnail brand' 'thumbnail description';
  }

  .-campaign-fundtumitate .box.-fundtumitate-product .container>.brand .title {
    font-size: .24rem;
    font-weight: 400;
    line-height: 1.33333;
    margin-top: 10px;
  }

  .-campaign-fundtumitate .box.-fundtumitate-product .container>.thumbnail {
    max-width: 100%;
  }

  .-campaign-fundtumitate .box.-fundtumitate-product .container>.thumbnail>.fig {
    width: 250px;
  }

  .-campaign-fundtumitate .box.-fundtumitate-product .detail .-fundtumitate-detail:nth-child(odd) {
    border-right: 1px solid #e3e3e3;
  }

  .-campaign-fundtumitate .box.-fundtumitate-product .detail .-fundtumitate-detail.col-24 {
    border-right: none;
  }

  .-campaign-fundtumitate .-two-lines {
    height: 48px;
  }
}

@media screen and (max-width:767px) {
  .box.-fundtumitate-products-container {
    margin-right: -10px;
    margin-left: -10px;
  }

  .box.-fundtumitate-product .toggle-panel {
    display: flex;
    flex-direction: column;
    min-height: 3.5em;
    transition: min-height 200ms ease;

    justify-content: center;
  }

  .box.-fundtumitate-product .toggle-panel>.title .ico-label.-fund-detail-ranking {
    font-weight: 400;
  }

  .box.-fundtumitate-product .toggle-panel>.title .ico-label.-status.-red {
    font-weight: 400;
  }

  .box.-fundtumitate-product .toggle-panel>.contents {
    padding-bottom: 5px;
  }

  .box.-fundtumitate-product .container>.detail {
    margin-top: 20px;
  }

  .box.-fundtumitate-product .container>.detail .btn.-tertiary {
    padding: 9px 0;
    border-width: 2px;
  }

  .box.-fundtumitate-product .container>.detail .row.-adjustheight .dlist.-general {
    text-align: center;
  }

  .box.-fundtumitate-product .container>.thumbnail {
    display: flex;

    align-items: center;
  }

  .box.-fundtumitate-product .container>.thumbnail>.fig {
    width: 130px;
    margin-right: 10px;
  }

  .box.-fundtumitate-product .container>.thumbnail>.link-list {
    margin-top: 0;
  }

  .box.-fundtumitate-product .ico-label.-lt-white {
    margin-bottom: 5px;
  }

  .-campaign-fundtumitate .box.-fundtumitate-products-container {
    padding: 15px;
    border: none;
  }

  .-campaign-fundtumitate .box.-fundtumitate-products-container>.contents .toggle-panel {
    padding: 0;
  }

  .-campaign-fundtumitate .box.-fundtumitate-products-container>.contents .toggle-panel>.title {
    padding: 15px 40px 15px 15px;
  }

  .-campaign-fundtumitate .box.-fundtumitate-products-container>.contents .toggle-panel>.title:after {
    right: 12px;
    width: 8px;
    height: 8px;
    transform: rotate(135deg);
    border-top: 1px solid #ca2420;
    border-right: 1px solid #ca2420;
    border-bottom-color: transparent!important;
    border-left-color: transparent!important;
    border-radius: 0;
    background: none;
  }

  .-campaign-fundtumitate .box.-fundtumitate-products-container>.contents .toggle-panel>.title.-active:after {
    top: 8px;
    transform: rotate(-45deg);
  }

  .-campaign-fundtumitate .box.-fundtumitate-product .container {
    padding: 15px;
    border-top: 1px solid #e3e3e3;
  }

  .-campaign-fundtumitate .box.-fundtumitate-product .container>.description {
    margin-top: 10px;
  }

  .-campaign-fundtumitate .box.-fundtumitate-product .container>.brand .txt.-category {
    margin-top: 0;
  }

  .-campaign-fundtumitate .box.-fundtumitate-product .container>.thumbnail {
    display: block;
    margin-top: 15px;
  }

  .-campaign-fundtumitate .box.-fundtumitate-product .container>.thumbnail>.fig {
    width: 100%;
    margin-right: 0;
  }

  .-campaign-fundtumitate .box.-fundtumitate-product .container>.thumbnail>.link-list {
    margin-top: 10px;
  }

  .-campaign-fundtumitate .box.-fundtumitate-product .detail .-fundtumitate-detail {
    padding: 20px;
  }

  .-campaign-fundtumitate .box.-fundtumitate-product .detail .-fundtumitate-detail+.-fundtumitate-detail {
    border-top: 1px solid #e3e3e3;
  }

  .-campaign-fundtumitate .box.-fundtumitate-product:not(:first-child) {
    padding-top: 0;
  }
}

@media screen and (min-width:768px) and (max-width:1299px) {
  .-campaign-fundtumitate .box.-fundtumitate-product .container {
    grid-template-columns: 200px auto;
  }

  .-campaign-fundtumitate .box.-fundtumitate-product .container>.thumbnail>.fig {
    width: 200px;
  }
}