/*-------------------------------------------------------------------
flowstyle.css
フローチャート用
-------------------------------------------------------------------*/

@charset "utf-8";

/*------------------------------------------------------------------
段組み
-------------------------------------------------------------------*/
.stepbox_out  {
  /*float: left;*/
  /*display:inline-block; */
  width:900px;
  /*height:200px;*/
  border:solid 1px #13274c; background-color: #eeeeff;
  /*position: absolute;*/
  position: relative;
}

.stepbox_out p {
  padding:10px 30px 5px 30px;
  font-size: 14px;
  line-height: 22px;
}


/*------------------------------------------------------------------
タグ風見出し
-------------------------------------------------------------------*/
.taglbl_idx {
  background: #13274c;
  color: #fff;
  font-size: 22px;
  font-weight: bold;
  display: inline-block;
  line-height: 36px;
  width: 60px;
  padding: 0 2em 0 2em;
  position: relative;
}

.taglbl_cap {
  background: #3366cc;
  color: #fff;
  font-size: 22px;
  font-weight: bold;
  text-align: center;
  display: inline-block;
  line-height: 36px;
  padding: 0 2em 0 3em;
  position: relative;
  width: 622px;

}
.taglbl_cap::before {
  border: 18px solid transparent;
  border-left-color: #3366cc;
  border-right-width: 0;
  content: '';
  display: block;
  height: 0;
  position: absolute;
  right: -18px;
  top:0;
  width: 0;
}



/*------------------------------------------------------------------
フローチャート内商品画像
-------------------------------------------------------------------*/
.flow_product{
    text-align: left;
    margin:3px 10px 5px 30px;
}

.flow_product figure {
    display: inline-block;
    /*display: table-cell*/
    max-width: 30%; 
    margin:3px 10px 5px 10px;
}
.flow_product figure img {
    vertical-align: top;
    border:solid 1px #ccc;
}
.flow_product figure figcaption {
    text-align: center;
    font-size: 16px;
    color: #fff;
    font-weight: bold;
    background: #194912;
    padding: 3px;
}





/*------------------------------------------------------------------
商品バナー画像
-------------------------------------------------------------------*/
.flow_banner{
    text-align: left;
    margin:2px 10px 5px 100px;

}

.flow_banner figure {
    display: inline-block;
    margin:5px 10px;
}
.flow_banner figure img {
    vertical-align: top;
    border:solid 1px #ccc;
}
.flow_banner figure figcaption {
    text-align: center;
    font-weight: bold;
}

.ans_imageclear{
    clear: both;	/*横並びを解除*/
}


/*------------------------------------------------------------------
商品バナー画像（説明あり）
-------------------------------------------------------------------*/
.flow_items {
  display: flex;
  /*justify-content: space-between;*/
  flex-flow: row wrap;
  justify-content: flex-start;
}
.flow_items .item {
  width: 30%;
  margin-bottom:20px;
}

.flow_items img {
  border:solid 1px #ccc;
}
.item-img {
  padding: 0;
  text-align: center;
}
.item-body {
  padding: 0;
}
.item-title {
  /*margin: 0 0 2px;*/
  font-size: 14px;
  font-weight: bold;
  text-align: center;
}
.item-body p {
  font-size: 12px;
  /*text-align: center;*/
}


/*------------------------------------------------------------------
区切り線
-------------------------------------------------------------------*/
.hr_dott01 {
  border-width: 1px 0 0 0;
  border-style: dashed;
  border-color: #3366cc;
  /*width: 80%;*/
  margin: 20px;
}


/*------------------------------------------------------------------
オプション見出し
-------------------------------------------------------------------*/
.optmds_h2 {
  font-size: 14px;
  color: #000;/*文字色*/
  padding: 5px 10px;
  margin: 20px 20px;
  border-top: solid 3px #3366cc;/*上線*/
  border-bottom: solid 3px #3366cc;/*下線*/
}


/*------------------------------------------------------------------
見出し 円＋バー
-------------------------------------------------------------------*/
.midashi_circle {
  left: 40px;
  width: 760px;
  position: relative;
  /*background: #669933;*/
  padding: 10px 5px 10px 40px;
  font-size: 18px;
  font-weight: bold;
  color: #fff;
}

.midashi_circle:before {
/*  content: "A";*/
  display: inline-block;
  line-height: 40px;
  position: absolute;
  padding: 0em;
  color: white;
/*  background: #669933;*/
  font-size: 18px;
  font-weight: bold;
  width: 40px;
  text-align: center;
  height: 40px;
  line-height: 40px;
  /*left: -1.35em;*/
  left: -20px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  border: solid 5px white; 
  border-radius: 50%;
}

.mtypeA {
  background: #669933;
}

.mtypeA:before {
  content: "1";
  background: #669933;
}

.mtypeB {
  background: #FFB000;
}

.mtypeB:before {
  content: "2";
  background: #FFB000;
}

.mtypeC {
  background: #d16b16;
}

.mtypeC:before {
  content: "3";
  background: #d16b16;
}

.explain01 {
  line-height: normal;
  border:none;
  text-decoration:none;
  font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
  font-size: 14px;
  font-weight:bold;
  text-align: center;
  color: #990016;
}


.kigoplus {
  line-height: normal;
  border:none;
  text-decoration:none;
  font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
  font-size: 36px;
  font-weight:bold;
  text-align: center;
  color: #003399;
}

.kigoor {
  line-height: normal;
  border:none;
  text-decoration:none;
  font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
  font-size: 14px;
  font-weight:bold;
  text-align: center;
  color: #003399;
}


/*------------------------------------------------------------------
テーブル（商品表示）
-------------------------------------------------------------------*/
.boxtbl {
  margin-left:40px;
  border:none;
  border-spacing:collapse;
  padding:0;
  width:805px;
}

.tbltypeA {
  border: solid 3px #669933;
}
.tbltypeB {
  border: solid 3px #FFB000;
}
.tbltypeC {
  border: solid 3px #d16b16;
}

.innerboxtbl {
  border-collapse:separate;   /* セル同士の間隔 */
  border-spacing: 10px 0px;
  border-style: none;
  padding:0;                  /* セル内の余白 */
}

.innerboxcolor {
  text-align: center;
  background: #003399;
}



/*------------------------------------------------------------------
診断テスト
-------------------------------------------------------------------*/
#wrapper {
    max-width: 800px;
    margin: 0 auto;
    padding: 5px 10px;
    box-sizing: border-box;
    font-size: 14px;
}

#wrapper ul {
    /*background: #f1f1f1;*/
    padding: 20px;
    margin: 0 auto;
    box-sizing: border-box;
    list-style:none;
}
#wrapper ul li {
    margin-bottom: 10px;
}
#wrapper ul li:last-child {
    margin-bottom: 0;
}
#wrapper ul li span {
    display: inline-block;
    width: 400px;
}
#wrapper button {
    background: #6F8EC6;
    width: 200px;
    display: block;
    margin: 20px auto 30px;
    text-align: center;
    padding: 10px 10px;
    font-size: 16px;
    font-weight: bold;
    box-shadow: none;
    color: #fff;
    border: none;
    box-sizing: border-box;
    border-radius: 5px;
    cursor: pointer;
}

#wrapper .result {
    padding: 5px;
    border: 3px solid #f1f1f1;
    box-sizing: border-box;
    margin: 0 auto;
    display: none;
}
/*
#wrapper .result h2 {
    text-align: center;
    font-size: 18px;
    margin-bottom: 15px;
}
#wrapper .result h2 strong {
    font-size: 24px;
}
*/

#wrapper .qtitle {
    text-align: center;
    font-size: 18px;
    margin: 0 auto;
    font-weight: bold;
}

#wrapper .attention {
    font-size: 12px;
    font-weight: bold;
    color: #ff0000;
}


.answer {
    display: none;
}

.resbox {
/*    display: inline-block;*/
/*    vertical-align: middle;*/
    display: flex;
    padding: 10px;
    flex-wrap: wrap;
    justify-content:flex-start;
}

.box_1,
.box_2,
.box_3,
.box_4,
.box_5,
.box_6,
.box_7{
    font-size: 14px;
    font-weight: bold;
    color: #FFF;
    width:150px;
    height:150px;
    background-color: #003399;

    text-align: center;
    padding: 5px;
    margin:  10px;
}

.boxplus {
    line-height: normal;
    text-decoration:none;
    font-size: 36px;
    font-weight:bold;
    text-align: center;
    justify-content: center;
    align-items: center;
    color: #003399;
}