/* trouble */

#trouble{
  margin-top:90px;
  padding-bottom:70px;
}

#trouble h3.main_h3::after{
  content: url(../image/trouble/trouble_woman.png);
  display: inline-block;
  position: absolute;
  bottom: -10px;
  right: 15px;
}

#trouble div.contents{
  background-color:#fff;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  position:relative;
  margin-bottom:25px;
  padding:0 0 25px 0;
}

#trouble div.contents::before{
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -23px;
  border: 23px solid transparent;
  border-top: 38px solid #fff;
}

#trouble div.contents ul.ratio{
  padding:0;
  display:flex;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  -webkit-box-pack: center;
     -ms-flex-pack: center;
   justify-content: center;
}

#trouble div.contents ul.ratio li{
  width:412px;
  height:327px;
  border-radius:10px;
  box-shadow:0 2px 20px #ccc;
  margin:20px;
}

#trouble div.contents ul.ratio li:nth-child(1){ background-color:#AA4C38; }
#trouble div.contents ul.ratio li:nth-child(2){ background-color:#AA8B2A; }
#trouble div.contents ul.ratio li:nth-child(3){ background-color:#7BA532; }
#trouble div.contents ul.ratio li:nth-child(4){ background-color:#5287A4; }
#trouble div.contents ul.ratio li:nth-child(5){ background-color:#7F5BA4; }
#trouble div.contents ul.ratio li:nth-child(6){ background-color:#AA5069; }

#trouble div.contents ul.ratio li div.white{
  background-color:#fff;
  height:256px;
  line-height:1;
}

#trouble div.contents ul.ratio li p.title{
  color:#fff;
  font-size:23px;
  font-weight:bold;
  text-align:center;
  height:58px;
  line-height:58px;
  background-image:url(../image/trouble/thunder.png);
  background-position:95% top;
  background-repeat:no-repeat;
}

#trouble div.contents ul.ratio li div.ratioMain{
  display:flex;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  align-items: center;
  -ms-flex-align: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding:10px;
}

#trouble div.contents ul.ratio li div.ratioMain div.exsample{
  border:2px #bfbfbf dotted;
  padding:7px 12px;
  width:145px;
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  margin-top:10px;
  border-radius:3px;
}

#trouble div.contents ul.ratio li div.ratioMain div.exsample::before{
  content: '';
  position: absolute;
  display: block;
  width: 18px;
  height: 18px;
  left: 0;
  right: 0;
  top: -13px;
  margin: 0 auto;
  border-top: 2px dotted #bfbfbf;
  border-right: 2px dotted #bfbfbf;
  background-color: #fff;
  transform: rotate(-45deg);
}


#trouble div.contents ul.ratio li div.ratioMain div.exsample ul.exsampleList li{
  width:auto;
  height:auto;
  margin:5px 0;
  padding:8px 0;
  background-color:#727171;
  text-align:center;
  font-size:17px;
  font-weight:bold;
  color:#fff;
  border-radius:3px;
  box-shadow: none;
}

#trouble div.contents ul.ratio li div.ratioMain div.ratioCircle{
  display:flex;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  align-items: center;
  -ms-flex-align: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  flex:1;
  -ms-flex: 1;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
}

#trouble div.contents ul.ratio li div.ratioMain div.ratioCircle p.txt_1,
#trouble div.contents ul.ratio li div.ratioMain div.ratioCircle p.txt_2{
  font-size:24px;
  font-weight:bold;
  color:#727171;
}

#trouble div.contents ul.ratio li div.ratioMain div.ratioCircle p.txt_1{
  margin-right:10px;
}

#trouble div.contents ul.ratio li div.ratioMain div.ratioCircle p.txt_2{
  margin-left:10px;
}

#trouble div.contents ul.ratio li div.ratioMain div.ratioCircle div.fraction{
  background-color:#AA4C38;
  border-radius:50%;
  width:160px;
  height:160px;
  text-align:center;
}

#trouble div.contents ul.ratio li:nth-child(1) div.ratioMain div.ratioCircle div.fraction{ background-color:#AA4C38; }
#trouble div.contents ul.ratio li:nth-child(2) div.ratioMain div.ratioCircle div.fraction{ background-color:#AA8B2A; }
#trouble div.contents ul.ratio li:nth-child(3) div.ratioMain div.ratioCircle div.fraction{ background-color:#7BA532; }
#trouble div.contents ul.ratio li:nth-child(4) div.ratioMain div.ratioCircle div.fraction{ background-color:#5287A4; }
#trouble div.contents ul.ratio li:nth-child(5) div.ratioMain div.ratioCircle div.fraction{ background-color:#7F5BA4; }
#trouble div.contents ul.ratio li:nth-child(6) div.ratioMain div.ratioCircle div.fraction{ background-color:#AA5069; }

#trouble div.contents ul.ratio li div.ratioMain div.ratioCircle div.fraction p{
  color:#fff;
  font-size:44px;
  font-weight:bold;
}

#trouble div.contents ul.ratio li div.ratioMain div.ratioCircle div.fraction p.up{
  margin:25px auto 0 auto;
  padding:0 0 10px 0;
  border-bottom:1px #fff solid;
  width:90%;
}

#trouble div.contents ul.ratio li div.ratioMain div.ratioCircle div.fraction p.down{
  padding:5px 0 0 0;
}

#trouble div.contents ul.ratio li div.ratioMain div.ratioCircle div.right p{
  margin:30px 0 30px 10px;
}


#trouble div.contents ul.ratio li div.ratioNum{
  display:flex;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  align-items: center;
  -ms-flex-align: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  width:95%;
  margin:0 auto;
}

#trouble div.contents ul.ratio li div.ratioNum p{
  color:#727171;
}

#trouble div.contents ul.ratio li div.ratioNum p.ratioTitle{
  font-size:15px;
}

#trouble div.contents ul.ratio li div.ratioNum p.num{
  font-size:17px;
}

#trouble div.contents ul.ratio li div.ratioNum p.num span.heebo{
  font-size:32px;
  font-weight:bold;
  margin:0 10px;
  position:relative;
  bottom:-3px;
}

#trouble div.contents ul.ratio li p.reference{
  color:#727171;
  font-size:12px;
  width:95%;
  text-align:center;
  margin:15px auto;
  line-height:130%;
}

#trouble div.contents ul.ratio li:nth-child(3) p.reference,
#trouble div.contents ul.ratio li:nth-child(4) p.reference,
#trouble div.contents ul.ratio li:nth-child(6) p.reference{
  line-height:120%;
  position:relative;
  top: -5px;
}


#trouble div.contents p.nextArrow{
  width:410px;
  height:103px;
  background-image:url(../image/trouble/nextArrow.png);
  background-position:center;
  background-repeat:no-repeat;
  margin:30px auto;
  text-align:center;
  color:#00426B;
  font-size:30px;
  font-weight:bold;
  line-height:85px;
}



#trouble div.contents div.barGraph{
  width:900px;
  border:1px #5287A4 solid;
  margin:50px auto 0 auto;
}

#trouble div.contents div.barGraph div.graph_wrap{
  display:flex;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  width:90%;
  margin:10px auto;
  line-height:1;
}

#trouble div.contents div.barGraph p.title{
  background-color:#5287A4;
  color:#fff;
  font-size:22px;
  font-weight:bold;
  text-align:center;
  padding:10px 0;
}

#trouble div.contents div.barGraph ul.list{
  flex:1;
  -ms-flex: 1;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
}

#trouble div.contents div.barGraph ul.graph{
  width:484px;
  height:300px;
  background-image:url(../image/trouble/graph.png);
  background-position:center;
  background-repeat:no-repeat;
}

#trouble div.contents div.barGraph ul.list li{
  text-align:right;
  margin:25.2px 15px 0 0;
  font-size:17px;
}

#trouble div.contents div.barGraph ul.list li:nth-child(1){ color:#5287A4; font-weight:bold; }

#trouble div.contents div.barGraph ul.graph li{
  margin:22.5px 0 0 15px;
  font-size:20px;
  position:relative;
  color:#5287A4;
  display:inline-block;
}

#trouble div.contents div.barGraph ul.graph li:nth-child(1){ right:-304px; font-weight:bold; }
#trouble div.contents div.barGraph ul.graph li:nth-child(2){ right:-111px; bottom:-42px; }
#trouble div.contents div.barGraph ul.graph li:nth-child(3){ right:57px; bottom:-84px; }
#trouble div.contents div.barGraph ul.graph li:nth-child(4){ right:129px; bottom:-126px; }
#trouble div.contents div.barGraph ul.graph li:nth-child(5){ right:135px; bottom:-168px; }
#trouble div.contents div.barGraph ul.graph li:nth-child(6){ right:354px; bottom:-211px; }


#trouble div.contents div.overseas{
  margin:0 0 40px 0;
}

#trouble div.contents div.overseas p.title{
  font-size:22px;
  font-weight:bold;
  color:#5287A4;
  text-align:center;
  margin:40px 0 20px 0;
}

#trouble div.contents div.overseas div.penetration{
  display:flex;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  align-items: center;
  -ms-flex-align: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  width:87%;
  margin:0 auto;
}

#trouble div.contents div.overseas div.penetration div.germany div.txt,
#trouble div.contents div.overseas div.penetration div.england div.txt{
  display:flex;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  align-items: center;
  -ms-flex-align: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  width:88%;
  margin:8px auto;
}

#trouble div.contents div.overseas div.penetration div.germany div.txt p,
#trouble div.contents div.overseas div.penetration div.england div.txt p{
  color:#181818;
  font-size:14px;
}

#trouble div.contents div.overseas div.penetration div.germany div.txt p span.heebo,
#trouble div.contents div.overseas div.penetration div.england div.txt p span.heebo{
  font-size:32px;
  color:#5287A4;
  display: inline-block;
  vertical-align: middle;
  margin: 0 7px;
}

#trouble div.contents div.overseas div.penetration div.england div.txt p.country{
  position:relative;
  left: -4px;
}

#trouble div.contents div.case p.h3_sub{
  text-align:center;
  font-size:18px;
  color:#181818;
}

#trouble div.contents div.case p.desc{
  background-color:#5287A4;
  border-radius:5px;
  padding:10px;
  margin:30px auto 10px auto;
  font-size:16px;
  color:#fff;
  text-align:center;
  width:600px;
  line-height:140%;
}

#trouble div.contents div.case div.overview{
  display:flex;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  align-items: center;
  -ms-flex-align: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  width:900px;
  margin:30px auto;
}

#trouble div.contents div.case div.overview div.left,
#trouble div.contents div.case div.overview div.right{
  flex:1;
  -ms-flex: 1;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  text-align:center;
  margin:0 20px;
}


#trouble div.contents div.case div.overview div.left p.price{
  background-color:#B20014;
  border-radius:3px;
  color:#fff;
  font-size:18px;
  padding:20px 0;
}

#trouble div.contents div.case div.overview div.left p.price span.heebo{
  font-size:40px;
  display:inline-block;
  vertical-align:middle;
  margin:0 5px;
}

#trouble div.contents div.case div.overview div.left p.detail{
  font-size:12px;
  color:#181818;
  margin:10px 0;
}

#trouble div.contents div.case div.overview div.left p.detail span.heebo{
  font-size:25px;
  display:inline-block;
  vertical-align:middle;
}

#trouble div.contents div.case div.overview div.left p.reference{
  font-size:12px;
  color:#9FA0A0;
}

#trouble div.contents div.case div.overview div.right p.price{
  background-color:#00426B;
  border-radius:3px;
  color:#fff;
  font-size:18px;
  padding:10px 0;
  position:relative;
}

#trouble div.contents div.case div.overview div.right p.price span.rightTitle{
  font-weight:bold;
  display:inline-block;
  margin-bottom:5px;
}

#trouble div.contents div.case div.overview div.right p.price span.heebo{
  font-size:38px;
  margin-right:5px;
}

#trouble div.contents div.case div.overview div.right p.price span.unit{
  font-size: 12px;
  display: inline-block;
  position: absolute;
  left: 205px;
  top: 35px;
}

#trouble div.contents div.case div.overview div.right p.detail{
  font-size:12px;
  color:#181818;
  margin:10px 0;
  line-height:175%;
}

#trouble div.contents div.case div.overview div.right p.detail span.heebo{
  font-size:25px;
  display:inline-block;
  vertical-align:middle;
  margin:0 10px 0 0;
}

#trouble div.contents div.case div.next{
  text-align:center;
  position:relative;
  right:-16px;
  margin-bottom:40px;
}

#trouble div.contents div.case div.next span,
#trouble div.contents div.case div.next img{
  display:inline-block;
  vertical-align:middle;
  color:#181818;
  font-size:18px;
}

#trouble div.contents div.case div.next img{
  margin:0 10px;
}



/* result */
#trouble div.contents ul.result{
  display:flex;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  justify-content:center;
  -ms-justify-content: center;
  -webkit-justify-content: center;
  -webkit-box-pack:justify;
}

#trouble div.contents ul.result li{
  width:290px;
  line-height:1;
}

#trouble div.contents ul.result li:nth-child(2){
  margin:0 10px;
}

#trouble div.contents ul.result li p.title{
  width:290px;
  height:45px;
  background-repeat:no-repeat;
  background-position:center;
  text-align:center;
  line-height:45px;
  color:#fff;
  font-size:25px;
  font-weight:bold;
}

#trouble div.contents ul.result li:nth-child(1) p.title{ background-image:url(../image/trouble/win_back.png); }
#trouble div.contents ul.result li:nth-child(2) p.title{ background-image:url(../image/trouble/halfwin_back.png); }
#trouble div.contents ul.result li:nth-child(3) p.title{ background-image:url(../image/trouble/lose_back.png); }

#trouble div.contents ul.result li div.formula{
  width:290px;
  box-sizing: border-box;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  padding:8px 10px 2px 10px;
  background-image:url(../image/trouble/result_back.png);
}

#trouble div.contents ul.result li:nth-child(1) div.formula{ border:2px #B20014 solid; }
#trouble div.contents ul.result li:nth-child(2) div.formula{ border:2px #00426B solid; }
#trouble div.contents ul.result li:nth-child(3) div.formula{ border:2px #555555 solid; }

#trouble div.contents ul.result li div.formula p.red,
#trouble div.contents ul.result li div.formula p.blue,
#trouble div.contents ul.result li div.formula p.gray,
#trouble div.contents ul.result li div.formula p.resultDetail{
  display:flex;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  align-items: center;
  -ms-flex-align: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin:5px 0;
}

#trouble div.contents ul.result li div.formula p.resultDetail{
  padding:5px 0 0 0;
  margin:10px 0 5px 0;
}

#trouble div.contents ul.result li div.formula p.red{ color:#B20014; }
#trouble div.contents ul.result li div.formula p.blue{ color:#00426B; }
#trouble div.contents ul.result li div.formula p.gray{ color:#9FA0A0; }
#trouble div.contents ul.result li:nth-child(3) div.formula p.red{ color:#181818; }
#trouble div.contents ul.result li:nth-child(3) div.formula p.gray{ margin-bottom:29px; }


#trouble div.contents ul.result li div.formula p.red span.name,
#trouble div.contents ul.result li div.formula p.blue span.name,
#trouble div.contents ul.result li div.formula p.gray span.name,
#trouble div.contents ul.result li div.formula p.resultDetail span.name{
  border-radius:3px;
  color:#fff;
  font-size:15px;
  padding:5px;
  display: inline-block;
}

#trouble div.contents ul.result li div.formula p.red span.name{ background-color:#B20014; }
#trouble div.contents ul.result li div.formula p.blue span.name{ background-color:#00426B; }
#trouble div.contents ul.result li div.formula p.gray span.name{ background-color:#9FA0A0; }

#trouble div.contents ul.result li div.formula p.red span.heebo,
#trouble div.contents ul.result li div.formula p.blue span.heebo,
#trouble div.contents ul.result li div.formula p.gray span.heebo,
#trouble div.contents ul.result li div.formula p.resultDetail span.heebo{
  font-size:30px;
  display:inline-block;
  vertical-align:middle;
}

#trouble div.contents ul.result li div.formula p.red span.heebo::before,
#trouble div.contents ul.result li div.formula p.blue span.heebo::before,
#trouble div.contents ul.result li div.formula p.gray span.heebo::before{
  font-size:26px;
  display:inline-block;
  vertical-align:middle;
}

#trouble div.contents ul.result li div.formula p.red span.heebo::before{ content:"+"; }
#trouble div.contents ul.result li div.formula p.blue span.heebo::before{ content:"-"; }
#trouble div.contents ul.result li div.formula p.gray span.heebo::before{ content:"-"; }
#trouble div.contents ul.result li:nth-child(3) div.formula p.red span.heebo::before{ content:""; }
#trouble div.contents ul.result li:nth-child(3) div.formula p.gray span.heebo::before{ content:""; }

#trouble div.contents ul.result li div.formula p.red span.heebo span.unit,
#trouble div.contents ul.result li div.formula p.blue span.heebo span.unit,
#trouble div.contents ul.result li div.formula p.gray span.heebo span.unit,
#trouble div.contents ul.result li div.formula p.resultDetail span.heebo span.unit{
  font-size:14px;
  display:inline-block;
  vertical-align:middle;
  margin-left:5px;
}

#trouble div.contents ul.result li:nth-child(1) div.formula p.resultDetail{ border-top:2px #B20014 dotted; }
#trouble div.contents ul.result li:nth-child(2) div.formula p.resultDetail{ border-top:2px #00426B dotted; }
#trouble div.contents ul.result li:nth-child(3) div.formula p.resultDetail{ border-top:2px #9FA0A0 dotted; }

#trouble div.contents ul.result li div.formula p.resultDetail span.name{
  color:#181818;
}

#trouble div.contents ul.result li:nth-child(1) div.formula p.resultDetail span.heebo{ color:#B20014; }
#trouble div.contents ul.result li:nth-child(2) div.formula p.resultDetail span.heebo{ color:#B20014; }
#trouble div.contents ul.result li:nth-child(3) div.formula p.resultDetail span.heebo{ color:#00426B; }
#trouble div.contents ul.result li:nth-child(3) div.formula p.resultDetail span.heebo::before{ content:"-"; }

#trouble div.contents ul.result li:nth-child(1) div.formula p.resultDetail span.heebo span.unit{ color:#B20014; }
#trouble div.contents ul.result li:nth-child(2) div.formula p.resultDetail span.heebo span.unit{ color:#B20014; }
#trouble div.contents ul.result li:nth-child(3) div.formula p.resultDetail span.heebo span.unit{ color:#00426B; }

#trouble div.contents ul.result li div.formula p.gray_sub{
  font-size:14px;
  color:#9FA0A0;
  text-align:right;
}