@charset "UTF-8";
/*===================================================
    土台作成用CSS
===================================================*/
/*//////////////////////////////////////////////////
    Base set
///////////////////////////////////////////////////*/

* {
  box-sizing: border-box;
  -ms-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
}

img {
  width: 100%;
}

body {
  font-family: Meiryo, "メイリオ", Hiragino Kaku Gothic Pro, "ヒラギノ角ゴシック Pro", Osaka, MS PGothic, "ＭＳ Ｐゴシック", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  word-break: break-all;
  text-align: left;
  color: #1E1E1E;
  background-color: #ffffff;
  position: relative;
  z-index: 1;
}


/* --------------------------------------------------
    トップページ（#main）
-------------------------------------------------- */
#main {
  display: block;
  background-color: #FAFAFA;
  padding: 239px 0 100px;
}

#main .titleWrap {
  margin-bottom: 31px;
}

#main .titleWrap h1 {
  display: flex;
  flex-direction: column;
  row-gap: 5px;
  align-items: center;
  justify-content: center;
}

#main .titleWrap a {
  margin: 2px 40px 0 0;
}

#main .titleWrap img {
  width: 200px;
  height: auto;
}

#main .titleWrap .title {
  font-size: 40px;
  color: #00145B;
}

#main .explainTxt {
  background-color: #ffffff;
  text-align: center;
  font-size: 20px;
  padding: 15px 0 14px;
  margin-bottom: 62px;
}

#go {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 260px;
  height: 50px;
  font-size: 16px;
  color: #ffffff;
  background-color: #F5444D;
  border-radius: 6px;
  text-decoration: none;
  margin: 0 auto;
  transition: background-color .3s ease-out;
}

#go:hover{
  background-color: #FC7C83;
  transition: background-color .3s ease-out;
}

/* --------------------------------------------------
    診断ページ(#simulation)
-------------------------------------------------- */

/* ヘッダー */
header {
  position: fixed;
  top: 0;
  background-color: #ffffff;
  width: 100%;
  height: 60px;
  z-index: 100;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}

header .headerInner {
  max-width: 1010px;
  height: 100%;
  padding: 0 20px;
  margin: 0 auto;
}

header h1 {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
}

header h1 img {
  width: 120px;
  height: auto;
}

header h1 .title {
  font-size: 16px;
  color: #00145B;
  margin: 0 0 0 20px;
}

/* メインコンテンツ */

#simulation {
  display: block;
  padding: 80px 0 80px;
}

#simulation .container {
  max-width: 1008px;
  padding: 0 20px;
  margin: 0 auto;
}

#simulation form .titleWrap {
  text-align: center;
}

#simulation form .titleWrap h2 {
  font-size: 32px;
  color: #00145B;
  margin-bottom: 20px;
}

#simulation .contentsWrap {
  margin-top: 32px;
}

/* コンテンツ共通部分 */

#simulation .contents {
  display: flex;
  width: 100%;
  margin: 32px 0;
}

#simulation h3 {
  text-align: center;
  font-size: 14px;
  margin-top: 20px;
  padding: 10px 0;
  background-color: #F8F8F8;
}

#simulation .chat{
  margin-top: 60px;
}

#simulation .contents h4 {
  margin-bottom: 10px;
}

#simulation .contents dl {
  width: calc((100% - 57px) / 3);
}

#simulation .contents dl:not(:first-child) {
  margin-left: 19px;
}

#simulation .contents dt {
  position: relative;
  font-size: 16px;
  margin: 0 0 10px 35px;
}

#simulation .contents dt::before {
  position: absolute;
  top: 0;
  left: -35px;
  display: block;
  content: "";
  border-radius: 50%;
}

#simulation .contents .font-gray dt{
  color: #8E8E8E;
  font-weight: bold;
}

#simulation .contents .font-yellow dt{
  color: #E89A36;
  font-weight: bold;
}

#simulation .contents .font-pink dt{
  color: #E06486;
  font-weight: bold;
}

#simulation .contents .font-blue dt{
  color: #3CA094;
  font-weight: bold;
}

#simulation .contents .gray dt::before{
  border: 12px solid #8E8E8E;
}

#simulation .contents .yellow dt::before {
  border: 12px solid #E89A36;
}

#simulation .contents .pink dt::before{
  border: 12px solid #E06486;
}

#simulation .contents .blue dt::before {
  border: 12px solid #3CA094;
}

/* おおよその金額をそれぞれ入力してみましょう。 */

#simulation .contents dl dd span:not(.unit) {
  display: block;
  font-size: 12px;
  color: #5E5E5E;
}

#simulation .contents dl dd .unit {
  font-size: 16px;
  color: #1E1E1E;
}

#simulation .contents .inputMoney {
  width: 180px;
  height: 40px;
  font-family: Arial;
  font-size: 20px;
  text-align: right;
  border: 1px solid #CCCCCC;
  border-radius: 3px;
  padding-right: 18px;
  margin: 5px 10px 0 0;
}

/* 整理したお金ごとに、運用方法を考えていきましょう。 */

#simulation .contents ul li a {
  position: relative;
  display: block;
  color: #1E1E1E;
  width: 100%;
  padding: 20px 20px 19px;
  text-decoration: none;
  border: 1px solid #CCCCCC;
  border-radius: 3px;
  transition: color, background .3s ease-out;
}

#simulation .contents dd ul li a:hover {
  background: #6279CC;
  border: 1px solid #6279CC;
  color: #fff;
  transition: all .3s ease-out;
}

#simulation .contents dd ul li a::after {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  display: block;
  content: "";
  width: 6px;
  height: 11px;
  background: url(../image/ico_arrow_right.png) no-repeat center;
  background-size: 6px 12px;
  margin-right: 10px;
}

#simulation .contents dd ul li a:hover::after{
  content: "";
  width: 14px;
  height: 15px;
  background: url(../image/ico_arrow_right_white.png) no-repeat center;
  background-size: 14px 15px;
  margin-right: 6px;
}

#simulation .contents ul li:not(:last-child) {
  margin-bottom: 5px;
}

/* 数値をリセット */
#simulation #reset {
  display: flex;
  margin: 60px auto 0;
  padding: 6px 15px 4px;
  color: #00145B;
  border: 1px solid #00145B;
  border-radius: 6px;
  background: #ffffff;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  transition: color, background .2s ease-out;
}

#simulation #reset:hover{
  color: #fff;
  background: #00145B;
  transition: all .3s ease-out;
}

/* --------------------------------------------------
    グラフ(chartBox)
-------------------------------------------------- */
.sp {
  display: none;
}

#simulation .registerBox {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 40px;
}

#simulation .registerBox .registerBoxChart {
  position: relative;
  max-width: 440px;
  width: 100%;
}

#simulation .registerBox .registerBoxChart .chartBoxInner {
  width: 100%;
  padding-top: 100%;
}

#simulation .registerBox .registerBoxChart .chartBoxInner #registerChart {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}

#simulation .registerBox .registerBoxChart .chartBoxInner #registerChart.total0::after {
  position: absolute;
  content: "";
  top: 0;
  background: url(../image/img_default.png) no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
}

#simulation .registerBox .registerBoxChart .chartBoxInner #totalBox.hide {
  display: none;
}

#simulation .registerBox .registerBoxChart .chartBoxInner #totalBox {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  white-space: nowrap;
}

#simulation .registerBox .registerBoxChart .chartBoxInner #totalBox dt {
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  color: #00145B;
}

#simulation .registerBox .registerBoxChart .chartBoxInner #totalBox #total {
  font-size: 32px;
  font-weight: 400;
  font-family: "Arial";
}

#simulation .registerBox .registerBoxChart .chartBoxInner #totalBox dd {
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  color: #00145B;
}

#simulation figure {
  max-width: 510px;
  width: 100%;
  height: auto;
  margin-left: 30px;
}

#simulation #registerChart .labelTitle {
  display: block;
  padding-left: 20px;
}

/* --------------------------------------------------
    aside
-------------------------------------------------- */
aside {
  border-top: 1px solid #E5E5E5;
}

aside ul {
  max-width: 1000px;
  margin: 0 auto;
  padding: 25px 20px 31px;
  font-size: 12px;
}

aside ul li {
  position: relative;
  font-size: 12px;
  padding-left: 15px;
}

aside ul li:not(:last-child) {
  margin-bottom: 2px;
}

aside ul li::before {
  position: absolute;
  top: 2px;
  left: 0;
  content: "※";
  display: block;
  font-size: 10px;
  margin-right: 4px;
}

/* メディアクエリ調整 */

@media screen and (min-width: 768px) and (max-width: 1060px) {

  #simulation .contents {
    flex-wrap: wrap;
  }

  #simulation .contents .contentsInner>dl:nth-of-type(n + 3) {
    margin-top: 15px;
  }

  #simulation .contents dl {
    width: calc((100% - 20px) / 2);
  }

  #simulation .contents dl:not(:first-child) {
    margin-left: 0;
  }

  #simulation .contents dl:nth-of-type(2n) {
    margin-left: 20px;
  }

  #simulation .contents dl:nth-of-type(n + 3) {
    margin-top: 20px;
  }

  #simulation .contents input[type="text"] {
    width: 240px;
    height: 40px;
  }
}

/* --------------------------------------------------
    フッター(footer)
-------------------------------------------------- */
footer {
  border-top: 1px solid #E5E5E5;
}

footer .footTxt {
  max-width: 1000px;
  margin: 0 auto;
  padding: 25px 20px 35px;
  font-size: 12px;
}

footer .copy {
  padding: 30px 10px 32px;
  font-size: 12px;
  text-align: center;
  border-top: 1px solid #E5E5E5;
}


/* --------------------------------------------------
    chart hover 吹き出し
 -------------------------------------------------- */

.speech_bubble{
  position: relative;
  display: flex;
  align-items: center;
  background: #fff;
  padding: 15px 25px;
  border: 1px solid #E5E5E5;
  border-radius: 8px;
  line-height: 1.2;
}

/* 三角形のborder */
.speech_bubble::before{
  content: "";
  position: absolute;
  transform: translate(-50%,100%);
  bottom: 0;
  left: 50%;
  border-style: solid;
  border-width: 11px 11.5px 0 11.5px;
  border-color: #E5E5E5 transparent transparent transparent;
}

/* 三角形の中身 */
.speech_bubble::after{
  content: "";
  position: absolute;
  transform: translate(-50%,100%);
  bottom: 0;
  left: 50%;
  border-style: solid;
  border-width: 9.5px 10px 0 10px;
  border-color: #fff transparent transparent transparent;
}

.speech_bubble__title{
  font-family: Arial;
  text-align: center;
  font-size: 15px;
  font-weight: bold;
  color: #111;
}

.tooltip_con{
  font-family: Arial;
}

.tooltip_con__text{
  padding-top: 5px;
  font-family: Arial;
  text-align: center;
  font-size: 24px;
}

.tooltip_con__text-unit{
  font-family: Arial;
  font-size: 12px;
  font-weight: bold;
  padding-left: 4px;
}

/* highcharts style reset */
.highcharts-label-box.highcharts-tooltip-box{
  display: none;
}