@charset "utf-8";

/* PARTS */
h2 img {
  display: block;
}
@media (min-width: 768px) {
  
}
@media not all and (min-width: 768px) {
  h2 img {
    height: 8vw;
    margin: 0 auto;
  }
}
.underLine {
  text-decoration: underline;
  text-underline-offset: 0.3em;
}
.underLine.lineRed {
  text-decoration-color: #960000;
}
.markerLine {
  background-image: linear-gradient(0deg, #ffe100 35%, #fff 35%);
  white-space: nowrap;
  padding-left: 0.2em;
}
@media (min-width: 768px) {
  .mt-pc20_sp12 {
    margin-top: 20px;
  }
  .taR-pc {
    text-align: right;
  }
  .fsS {
    font-size: calc(15 / 16 * 1rem);
  }
}
@media not all and (min-width: 768px) {
  .mt-pc20_sp12 {
    margin-top: 12px;
  }
  .fsS {
    font-size: calc(13 / 16 * 1rem);
  }
}

/* === #mv === */
#mv .mvBg {
  background: url('/saving/fund/img/packone02_mv_bg.png') #cee3be repeat;
}
#mv .mvImg img {
  display: block;
  margin: 0 auto;
}
@media (min-width: 768px) {
  #mv .mvBg {
    padding: 40px 0;
  }
}
@media not all and (min-width: 768px) {
  #mv .container__under02 {
    padding: 0;
  }
  #mv .mvBg {
    padding: 12px 0;
  }
}

/* === .planRateArea === */
.planRateArea {
  display: -webkit-box;
  display: flex;
}
.planRateArea figure {
  width: calc(100% / 3);
}
.planRateArea figure img {
  display: block;
}
@media (min-width: 768px) {
  .planRateArea {
    width: 800px;
    margin: -40px auto 0;
  }
}
@media not all and (min-width: 768px) {
  .planRateArea {
    margin-top: -20px;
    padding: 0 12px;
  }
}

/* === #tab === */
#tab ul {
  display: -webkit-box;
  display: flex;
}
#tab ul li {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  color: #fff;
  font-weight: bold;
  line-height: 1.3;
  letter-spacing: 0;
  text-align: center;
  transition: opacity 0.3s ease;
  cursor: pointer;
}
#tab ul li:first-child {
  margin-left: 0;
}
#tab ul li.active {
  cursor: auto;
}
#tab ul li#tabBegin.active,
#tab ul li#tabFund.active,
#tab ul li#tabInheritance.active {
  background-color: #fff;
}
#tab ul li#tabBegin {
  background-color: #008247;
}
#tab ul li#tabBegin.active {
  color: #008247;
}
#tab ul li#tabFund {
  background-color: #427bbf;
}
#tab ul li#tabFund.active {
  color: #427bbf;
}
#tab ul li#tabInheritance {
  background-color: #a74275;
}
#tab ul li#tabInheritance.active {
  color: #a74275;
}
#tab ul li:hover {
  opacity: 0.7;
}
#tab ul li.active:hover {
  opacity: inherit;
}
@media (min-width: 768px) {
  #tab ul li {
    font-size: calc(20 / 16 * 1rem);
    width: calc((100% - 24px) / 3);
    height: 100px;
    margin-left: 12px;
    padding: 4px 12px;
  }
  #tab ul li#tabBegin.active {
    border: 4px solid #008247;
  }
  #tab ul li#tabFund.active {
    border: 4px solid #427bbf;
  }
  #tab ul li#tabInheritance.active {
    border: 4px solid #a74275;
  }
}
@media not all and (min-width: 768px) {
  #tab ul li {
    font-size: calc(15 / 16 * 1rem);
    width: calc((100% - 12px) / 3);
    height: 80px;
    margin-left: 6px;
    padding: 4px 6px;
  }
  #tab ul li#tabBegin.active {
    border: 2px solid #008247;
  }
  #tab ul li#tabFund.active {
    border: 2px solid #427bbf;
  }
  #tab ul li#tabInheritance.active {
    border: 2px solid #a74275;
  }
}

/* === table === */
table th,
table td {
  font-weight: normal;
  vertical-align: middle;
}
table th {
  background-color: #efece7;
  text-align: left;
}
table th.thSub {
  background-color: #fff7eb;
}
@media screen and (min-width: 768px){
  table {
    margin-bottom: 36px;
  }
  table th,
  table td {
    border: 2px solid #d1d1d1;
    padding: 8px;
  }
  .targetTable th {
    width: calc(100% * 0.3);
  }
  .targetTable td {
    width: calc(100% * 0.7);
  }
  .productsTable th {
    width: calc(100% * 0.13);
  }
  .productsTable th.thSub {
    width: calc(100% * 0.17);
  }
  .productsTable td {
    width: calc(100% * 0.7);
  }
}
@media not all and (min-width: 768px){
  table {
    margin-bottom: 24px;
  }
  table th,
  table td {
    display: block;
    width: 100%;
  }
  table th {
    font-weight: bold;
    padding: 4px;
  }
  table th.thSub {
    font-weight: bold;
    margin-top: 8px;
  }
  table td {
    padding: 4px 0;
  }
}

/* === .formula === */
.formula {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  letter-spacing: 0;
}
.numerator {
  border-bottom: 1px solid #000;
  white-space: nowrap;
}
.denominator {
  text-align: center;
  white-space: nowrap;
}
@media not all and (min-width: 768px) {
  .formula {
    font-size: 3.4vw;
  }
}
/* === .notes === */
.notes dl.indentNum dt {
  text-indent: -2.5em;
  padding-left: 2.5em;
}
.notes dl.indentNum dd {
  padding-left: 2.5em;
}
@media not all and (min-width: 768px) {
  .notes p {
    font-size: calc(13 / 16 * 1rem);
  }
}

/* === plan commonStyle === */

/* --- .h2Area --- */
.h2Area .h2AreaInner .leadTxt {
  background-color: rgba(255, 255, 255, 0.8);
  line-height: 1.5;
  font-weight: bold;
}
.h2Area .h2AreaInner .leadTxt ul li {
  font-size: calc(15 / 16 * 1rem);
}
.h2Area .leadTxt02 {
  color: #fff;
  font-weight: bold;
  margin-top: 12px;
}
@media (min-width: 768px) {
  .h2Area {
    border-radius: 0 30px 30px 0;
    padding: 20px;
  }
  .h2Area .h2AreaInner {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    align-items: center;
  }
  .h2Area .h2AreaInner .leadTxt {
    border-radius: 12px;
    padding: 4px 12px;
  }
}
@media not all and (min-width: 768px) {
  .h2Area {
    border-radius: 20px 20px 0 0;
    padding: 12px;
  }
  .h2Area .h2AreaInner .leadTxt {
    border-radius: 8px;
    margin-top: 12px;
    padding: 8px 12px;
  }
}

/* --- .condition --- */
.condition figure img {
  display: block;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .condition {
    margin-top: 32px;
  }
}
@media not all and (min-width: 768px) {
  .condition {
    margin-top: 16px;
  }
}

/* --- .rate --- */
.rate figure img {
  display: block;
  margin: 0 auto;
}
.rate .rateInner01 p span.colTxt {
  display: block;
  color: #e60012;
  font-weight: bold;
  
}
.rate .rateInner01 p span.colTxt span {
  font-size: 150%;
}
@media (min-width: 768px) {
  .rate {
    margin-top: 32px;
  }
  .rate .rateInner01 {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    align-items: center;
    border-radius: 20px;
    padding: 20px 32px;
  }
  .rate .rateInner01 p span.colTxt {
    margin-top: 12px;
    font-size: calc(24 / 16 * 1rem);
    line-height: 1;
  }
  .rate .rateInner01 figure {
    margin-left: 24px;
  }
  .rate .rateInner02 {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    margin-top: 32px;
  }
  .rate .rateInner02 figure {
    width: 750px;
  }
  .rate .rateInner02 p {
    font-size: calc(18 / 16 * 1rem);
    flex: 1;
    margin-left: 28px;
  }
}
@media not all and (min-width: 768px) {
  .rate {
    margin-top: 16px;
  }
  .rate .rateInner01 {
    border-radius: 12px;
    padding: 12px;
  }
  .rate .rateInner01 p span.colTxt {
    margin-top: 8px;
    font-size: calc(18 / 16 * 1rem);
    line-height: 1.2;
  }
  .rate .rateInner01 figure {
    margin-top: 12px;
  }
  .rate .rateInner02 {
    margin-top: 24px;
  }
  .rate .rateInner02 p {
    margin-top: 12px;
  }
}

/* --- .interestEx --- */
.interestEx dl dt {
  color: #fff;
  font-weight: bold;
}
.interestEx dl dd .formulaArea ul li span {
  color: #e60012;
}
.interestEx dl dd .formulaArea .fomuraResult {
  background-color: #ecddc1;
  border: 4px solid #fff;
  border-radius: 12px;
  box-shadow: 0 0 8px rgba(188, 191, 188, 0.7);
  padding: 16px 24px;
  font-size: calc(18 / 16 * 1rem);
  text-align: center;
}
.interestEx dl dd .formulaArea .fomuraResult span {
  color: #e60012;
}
.interestEx dl dd .formulaArea .fomuraResult span strong {
  display: block;
  font-size: 150%;
  font-weight: bold;
  white-space: nowrap;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .interestEx {
    margin-top: 32px;
  }
  .interestEx dl {
    display: -webkit-box;
    display: flex;
  }
  .interestEx dl dt {
    width: 200px;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    border-radius: 0 12px 12px 0;
    padding: 4px 12px;
  }
  .interestEx dl dd {
    flex: 1;
    margin-left: 24px;
  }
  .interestEx dl dd .formulaArea {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    margin: 12px 0;
  }
}
@media not all and (min-width: 768px) {
  .interestEx {
    margin-top: 16px;
  }
  .interestEx dl dt {
    font-size: calc(16 / 16 * 1rem);
    border-radius: 8px;
    margin-bottom: 8px;
    padding: 2px 8px;
  }
  .interestEx dl dd .formulaArea {
    font-size: calc(15 / 16 * 1rem);
    margin-top: 8px;
  }
  .interestEx dl dd .formulaArea .fomuraResult {
    margin-top: 8px;
  }
}
/* --- .detail --- */
@media (min-width: 768px) {
  .detail {
    margin-top: 32px;
  }
}
@media not all and (min-width: 768px) {
  .detail {
    margin-top: 16px;
  }
}

/* === #planBegin === */
#planBegin .h2Area {
  background-color: #008147;
  background-image: radial-gradient(rgba(2, 130, 71, 1) 10%, rgba(91, 156, 107, 1));
}
#planBegin .h2Area .h2AreaInner .leadTxt {
  color: #008147;
}
#planBegin .rate .rateInner01 {
  background-color: #cbddcc;
}
#planBegin .interestEx dl dt {
  background-image: linear-gradient(90deg, rgba(2, 130, 71, 1) 10%, rgba(91, 156, 107, 1));
}
#planBegin .interestEx .formula .icn__01::before {
  color: #80af87;
}

/* === #planFund === */
#planFund {
  display: none;
}
#planFund .h2Area {
  background-color: #417bbf;
  background-image: radial-gradient(rgba(65, 123, 191, 1) 10%, rgba(115, 148, 204, 1));
}
#planFund .h2Area .h2AreaInner .leadTxt {
  color: #417bbf;
}
#planFund .rate .rateInner01 {
  background-color: #cdd6ed;
}
#planFund .interestEx dl dt {
  background-image: linear-gradient(90deg, rgba(65, 123, 191, 1) 10%, rgba(115, 148, 204, 1));
}
#planFund .interestEx .formula .icn__01::before {
  color: #96acd9;
}

/* === #planInheritance === */
#planInheritance {
  display: none;
}
#planInheritance .h2Area {
  background-color: #a74275;
  background-image: radial-gradient(rgba(167, 66, 117, 1) 10%, rgba(185, 111, 144, 1));
}
#planInheritance .h2Area .h2AreaInner .leadTxt {
  color: #a74275;
}
#planInheritance .rate .rateInner01 {
  background-color: #e7d1db;
}
#planInheritance .interestEx dl dt {
  background-image: linear-gradient(90deg, rgba(167, 66, 117, 1) 10%, rgba(185, 111, 144, 1));
}
#planInheritance .interestEx .formula .icn__01::before {
  color: #c78fa6;
}

/* === notes style === */
#cmnNotes .icn__01::before {
  color: #008247;
}
#notesGaika {
  display: none;
}

/* === .contact === */
.contact ruby rt {
  font-weight: normal;
  font-size: calc(11 / 16 * 1rem);
}