/*! HTML5 Boilerplate v6.1.0 | MIT License | https://html5boilerplate.com/ */
.servicelowpageMainVisialArea{
  background: 
  url(../img/fig-img03counselor.png) left 2% center / 16% auto no-repeat, 
  url(../img/fig-img09binder.png) right 4% center / 14% auto no-repeat, #dcefeb;
}
.servicelowpageMainVisialArea .pageTitle h1{ width: 83%;}
.pageNav{ text-align: center;}
.pageNav li{  border-bottom: 1px solid #e9e8d6; position: relative; }
.pageNav li a{ color: #000; font-size: 0.9em; font-weight: bold; display: block; width: 100%; line-height: 2.8; position: relative;}
.pageNav li a:after{
  content: ""; width: 0.9em; height: 0.9em ;
  border-right: 1px solid #afae9f; border-bottom: 1px solid #afae9f;
  position: absolute; transform: rotate(45deg) translate( 0, -110%); right: 8%; top: 50%; 
}

@media screen and (min-width: 560px) {
  .pageNav li { border-bottom: none; display: inline-block; padding: 0 2%;}
  .pageNav li a:after{ display: none;}
  .pageNav li + li:before{
    content: ""; display: block;
    border: none; width: 1px; height: 1em; background: #000; transform: rotate(30deg) translate( -500%, -40%); 
    left: 0%; top: 50%; position: absolute;
  } 
}

@media screen and (min-width: 900px) {
  .servicelowpageMainVisialArea { background: url(../img/fig-img03counselor.png) left 9% center / 16% auto no-repeat, url(../img/fig-img09binder.png) right 16.3% center / auto 59.9% no-repeat, #dcefeb;}
}

.serviceBox{ margin-top: 13vw;}
.serviceBoxImg{ background: #fedec5; border-radius: 50%; width: 70%; height: 0; padding-bottom: 70%; margin: 0 auto; position: relative;}
.serviceBoxImg img{ width: 96%; margin: 0px auto 0 8%; display: block; position: absolute; top: -11%;}
.serviceBox figcaption{
  font-size: 1.3125em; font-weight: bold; text-align: center; letter-spacing: 0.3ch; line-height: 1.4; margin-top: 2%;
  position: absolute; width: 100%; top: 75%;
}
.serviceBox.serviceBox01 figcaption{top: 70%;}
.serviceBox02 .serviceBoxImg img{ width: 89.7%; top: -5%; margin: 0 auto; left: 5.35%;}
.serviceBox03 .serviceBoxImg img{ width: 88.16%; top: -2%; margin: 0 auto; left: 2%;}
.serviceBox04 .serviceBoxImg img{ width: 85.7%; top: -6%; margin: 0 auto; left: 6.15%;}
.serviceBox05 .serviceBoxImg img{ width: 98.9%; top: 10%; margin: 0 auto; left: 7.55%;}

.serviceBox06 .serviceBoxImg img{ width: 53.98%; top: -15%; margin: 0 auto; left: 23%;}

.serviceBoxTxt{ margin-top: 8.333%;}
.serviceBoxTxt li{ line-height: 1.4; padding-left: 1ch; text-indent: -1ch; }
.serviceBoxTxt li + li{ margin-top: 0.4em;}
.serviceBoxTxt span{ font-size: 0.8em; }

@media screen and (min-width: 560px) {
  .contentsAreaServiceS01 .sectionTitle{ margin-bottom: 0;}
  .serviceArea{ text-align: center;}
  .serviceBox{ margin-top: 13vw; text-align: left; width: 30%; margin: 5.55vw 1% 0 ; display: inline-block; vertical-align: top; }
  .serviceBoxImg { width: 90%; height: auto; padding-bottom: 0%; max-width: 295px;}
  .serviceBoxImg:before{ content: ""; background: #fedec5; width: 100%; height: 0; padding-bottom: 100%; display: block; border-radius: 50%; }
}
@media screen and (min-width: 900px) {
  .serviceBoxImg { width: 60.4%; max-width: none;}
}

.whatsUserArea{ background: #fff3e7; padding: 4.2%; margin-top: 8vw;}
.whatsUserArea h3{ font-size: 1.2em; font-weight: bold;}
.whatsUserAreaBox{
  background: #fedec6; padding: 9.87%; padding: 4.8%; border-radius: 12px; margin-top: 3.33%;  text-align: center;
  position: relative;
}
.whatsUserAreaBox .boxTl{ padding: 0.4em 0.6em 0.4em 1.2em;}
.whatsUserAreaBox ul{ text-align: left; margin-top: 0.8em;}
.whatsUserAreaBox li{ line-height: 1.4; padding-left: 1ch; text-indent: -1ch; }
.whatsUserAreaBox li + li{ margin-top: 0.4em;}

.whatsUserFig{ position: absolute; }
.whatsUserFig01{  width: 13.58%; top: 5%; left: -10%;}
.whatsUserFig02{  width: 26.4%; bottom: -60%; right: -6%; z-index: 10; width: 24%;}
.whatsUserFig03{  width: 63.4%; position: relative; margin: -10% -13% -18% auto; margin: 4% auto -25% 0; z-index: 10;}
.whatsUserFig04{  width: 50.8%; position: relative; margin: -6% 0 -26% auto;}
.whatsUserFigBlindness{ width: 16.419%;  width: 14.419%; top: -7%; right: 5%;}


@media screen and (min-width: 560px) {
  .whatsUserArea{ text-align: center; padding: 4.444% 3.333%; margin-top: 4.1vw;}
  .whatsUserAreaBoxS{ margin: 2.7vw -1.5% 0;}
  .whatsUserArea h3{ margin-bottom: ;}
  .whatsUserAreaBox{ width: 31%; display: inline-block; vertical-align: top; margin: 0 0.75%; padding: 3.333% 1.5%;}
  .whatsUserFig01 { width: 14.58%; top: -12%; left: 5%;}
  .whatsUserFig02 { right: -4%; width: 27%; bottom: -20%;}
  .whatsUserFig03 { width: 80.4%; margin: 4% 0 -25% auto;}
  .whatsUserFig04 { width: 60.8%; margin: 4% 4% -31% auto;}
}

@media screen and (min-width: 900px) {
  .whatsUserAreaBox {height: auto; position: relative; background: none; padding: 0; }
  .whatsUserAreaBox:before{ content: ""; display: block; width: 100%; padding-bottom: 83.95% ; background: #fedec6; border-radius: 12px; }
  .whatsUserAreaBoxInner{ padding: 9.8% 11.1%; position: absolute; top: 0; width: 100%; }
  .whatsUserAreaBox li + li { margin-top: 0.6em;}

  .whatsUserAreaBoxS{ margin: 2.08vw -1.5% 0;}
  .whatsUserFig01 { width: 13.58%; top: 0; left: 6.9%; margin-top: -16%;}
  .whatsUserFig02 { right: 5%; width: 27%; bottom: 0; margin-bottom: -23%;}
  .whatsUserFig03 { width: 63.4%; margin: 0 0 -11.1%; right: 4%; bottom: 0; position: absolute;}
  .whatsUserFig04 { width: 50.8%; margin: 0 0 -24%; position: absolute; right: 4%; bottom: 0;}
  .whatsUserFigBlindness{ width: 16.419%;  width: 14.419%; top: 5%; right: 10%;}
}

.contentsAreaServiceS02{ background: #dcefeb; text-align: center;}
.contentsAreaServiceS02 .imgArea{ background: #fff; border-radius: 12px; padding: 6.66%; margin-top: 8vw; position: relative;}
.linkBtn a{
    color: #f77750;
    border-bottom: 1px solid #f77750;
    line-height: 1.2;
    display: inline-block;
    margin: 5px auto;
    transition: 0.3s;
}
.linkBtn a:hover{
  opacity: 0.6;
}
.imgArea .linkBtn{
  position: absolute;
    bottom: auto;
    left: 61%;
    top: 83.2%;
    line-height: 1.2;
    font-size: 2.8vw;
}
.imgArea .linkBtn:hover{  color: #000;}
@media screen and (min-width: 560px) {
  .imgArea .linkBtn{
      left: 78.7%;
      top: 26%;
      line-height: 1.2;
      font-size: 1vw;
  }
}

.servicePointBox{ width: 80%; margin: 8vw auto;}
.servicePointBox figure{ background: #dcefeb; border-radius: 12px 12px 0 0; height: 0; padding-bottom: 57.14%; position: relative;}
.servicePointTxt{ background: #2c4e76; border-radius: 0 0 12px 12px; color: #fff; height: 0; padding-bottom: 35.71%; position: relative;}
.servicePointTxt h3{
  font-size: 1.312em; position: absolute; text-align: center; font-weight: bold;
  position: absolute; top: 50%; transform: translate( 0, -50%); width: 100%; line-height: 1.6;
}
.servicePointBox figure img{ width: 48.21%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.servicePointBox2 figure img{ width: 59.64%; }
.servicePointBox3 figure img{ width: 33%; }

@media screen and (min-width: 560px) {
  .contentsAreaServiceS02 .imgArea{ margin-top: 2.777vw;}
  .servicePoint{ margin: 2.777vw -1.1111% 0; text-align: center;}
  .servicePointBox { width: 31.111%; margin: 0 0.9%; display: inline-block;}
}

.targetBox .boxTl{ margin-bottom: 2%;}
.targetBox figure{ width: 50%; margin: 3% auto;}
.targetBox:last-child figure{ width: 70%; margin: 3% auto;}
.targetBox + .targetBox{ margin-top: 8vw;}

.combinationTable{ margin-top: 4vw;}
.combinationArea{ background: #dcefeb; margin-top: 8vw; padding: 6.666%; border-radius: 12px;}
.combinationArea h3{ font-size: 1.2em; font-weight: bold; text-align: center; color: #2c4e76; }

.combinationLine{ font-size: 0;   text-align: center;}
.combinationLine + .combinationLine{ margin-top: 4vw; padding-top: 4vw; border-top: 1px solid #2c4e76;}

.combinationBox{
  color: #2c4e76; font-weight: bold; font-size: 1.125rem; text-align: center; background: #fff; width: 40%; height: auto; border-radius: 8px; margin: 0 auto; padding: 2.4%; position: relative;
  line-height: 1.3; display: inline-block; vertical-align: top;
}
.combinationBox.line1{line-height: 2.6;}
.combinationBox + .combinationBox{ margin-left: 10%;}
.combinationBox + .combinationBox:before{
  content:""; width: 1em; height: 1em; background: #000;
  background: url(../img/iconPlus1.png) center center / 100% auto no-repeat;
  display: block; position: absolute; left: -10%; top: 50%; transform: translate(-0.65em, -50%);
}
.result{ color: #2c4e76; font-weight: bold; font-size: 1.125rem; margin-top: 2vw; line-height: 1.4;}
.dlTxt{ text-align: center; font-weight: bold; color: #2c4e76; margin-top: 8vw;}
.dlBtn{ text-align: center; margin-top: 4vw;}
.dlBtn a{
  font-size: 1.125em; text-align: center; font-weight: bold; border: 2px solid #2c4e76;
  padding: 0.7em 3.33em; line-height: 1; background: #fff; color: #2c4e76; position:relative;
  border-radius: 1.4em; display: inline-block;
}
.dlBtn a:after{ 
  content: ""; display: block; width: 1em; height: 1em;
  background: url(../img/iconDl.png) center center / 100% auto no-repeat; 
  position: absolute; top: 50%; right: 1.1em; transform: translate( 0%, -50%);
}

@media screen and (min-width: 560px) {
  .combinationArea{ margin-top: 4.1vw;}
  .targetArea{ margin-top: 4.166vw; }
  .targetBox{ position: relative;}
  .targetBox h3{ }
  .targetBox:first-child figure{ width: 10.55%; position: absolute; margin: 0; top: 0; left: 55%;}
  .targetBox + .targetBox{ margin-top: 2.777vw;}
  .targetBox + .targetBox{ padding-right: 12.5%;  padding-right: 20%;}
  .targetBox + .targetBox figure{ width: 18%; position: absolute; margin: 0; top: 20%; left: auto; right: 0;}

  .combinationTable{ margin-top: 2.08vw;}
  .combinationBox { width: 25.64%; margin: 0 auto; padding: 2% 0; line-height: 1; vertical-align: middle; font-size: 1rem;}
  .combinationBox + .combinationBox { margin-left: 7.692%;}
  .combinationBox.line1{ line-height: 1;}
  .result {margin-top: 0; display: inline-block; width: 41%; padding-left: 5%; vertical-align: middle; text-align: left; font-size: 1rem;}
  .combinationLine + .combinationLine { margin-top: 2.5%; padding-top: 0; border-top: none;}

  .dlTxt{ margin-top: 2.77vw;}
  .dlBtn{ margin-top: 2.08vw;}
}

.exsampleArea{ margin-top: 8vw;}
.exsampleArea .read{
  font-weight: bold; font-size: 1.125em; color: #2c4e76; line-height: 1.4; display: inline-block; vertical-align: top;
}
.exsampleArea figure{ text-align: center;}
.exsampleArea figure img{ width: 93%; margin: 2% auto 0;}
.exsampleArea figcaption{
  display: inline-block; vertical-align: top;
  width: 28%; color: #2c4e76 ; font-weight: bold; 
  font-size: 0.9em; letter-spacing: -0.05ch; text-align: center;
}
.exsampleArea figcaption + figcaption{ margin-left: 6.5%; }
.exsampleTable{
  margin-top: 4vw; border: 2px solid #2c4e76; background: #dcefeb; border-radius: 12px;
}
.exsampleTableCalculation{ padding-top: 6.14%; font-size: 1.125em; color: #2c4e76; font-weight: bold; }
.exsampleTableCalculation dt{
  display: inline-block; width: 50%; vertical-align: top; 
  padding: 1% 0 1% 7.14%;
}
.exsampleTableCalculation dd{
  display: inline-block; width: 50%; text-align: right; vertical-align: top; padding: 1% 7.14% 1% 0; 
}
.exsampleTableResult{ padding: 0 7.14%; color: #2c4e76; position: relative;}
.exsampleTableResult.bgWhite:before{ content: ""; height: 4px; width: 85.72%; background: #2c4e76; display: block; position: absolute; top: 0; left: 7.14%;}
.exsampleTableDescription{
  width: 50%; display: inline-block; line-height: 1.4; vertical-align: middle;
  padding: 5% 0;
}
.exsampleTableResultValue{
  width: 47.5%; display: inline-block; text-align: right; vertical-align: middle;
  color: #2c4e76; font-size: 1.5em; font-weight: bold;
}
.exsampleTableResultValue span{ font-size: 1rem;}
.exsampleTableResult.bgWhite .exsampleTableResultValue{ color: #f7815f;}

.refundArea{ margin-top: 8vw;}
.refundArea figure{ width: 36%; float: left; margin-right: 4%;}
.refundArea .boxTl{margin-bottom: 4vw;}
.refundTxt p + p{ margin-top: 1.08vw;}


@media screen and (min-width: 560px) {
  .exsampleArea { margin-top: 4.1vw;}
  .exsampleArea .boxTl{ display: inline-block; vertical-align: middle; margin-right: 1%; margin-bottom: 2.08vw;}
  .exsampleArea .read{ vertical-align: middle; margin-bottom: 2.08vw;}
  .exsampleImg{ width: 66.66%; display: inline-block; text-align: left;}
  .exsampleTable { width: 31.111%; display: inline-block; vertical-align: top; margin-left: 1%; margin-top: 0;}

  .exsampleArea figure { text-align: left;}
  .exsampleArea figcaption { text-align: left; font-size: 1em;}
  .refundArea { margin-top: 4.16vw; overflow: hidden;}
  .refundArea figure { width: 12%; margin-left: 2.77%; margin-right: 5%;}
  .refundArea .boxTl { margin-bottom: 2.777vw;}
}