@charset "UTF-8";
/*
#overview
Base

基本設定は下記になります。
*/
/*
#colors

@$font_color #21262b
@$accent_color_1 #f78128
@$accent_color_2 #305889
@$accent_color_3 #0e8ce0
*/
/*
#styleguide
基本サイト幅

980px
*/
/*
#styleguide
基本フォントサイズ

PC：1.4rem（14px）
SP：1.4rem（14px）
*/
/* reset
--------------------------------------------------------------*/
::-webkit-input-placeholder {
  color: inherit;
}

:-moz-placeholder {
  color: inherit;
}

button, input, select, textarea {
  font: inherit;
}

button:focus, input:focus, select:focus, textarea:focus {
  outline: none;
}

sup {
  vertical-align: super;
  font-size: smaller;
}

sub {
  vertical-align: sub;
  font-size: smaller;
}

/* font
--------------------------------------------------------------*/
@font-face {
  font-family: 'fontello';
  src: url("/resources/font/fontello.eot?45648141");
  src: url("/resources/font/fontello.eot?45648141#iefix") format("embedded-opentype"), url("/resources/font/fontello.woff2?45648141") format("woff2"), url("/resources/font/fontello.woff?45648141") format("woff"), url("/resources/font/fontello.ttf?45648141") format("truetype"), url("/resources/font/fontello.svg?45648141#fontello") format("svg");
  font-weight: normal;
  font-style: normal;
}

/* Base
--------------------------------------------------------------*/
* {
  box-sizing: border-box;
}

html {
  height: 100%;
  font-size: 62.5%;
  -webkit-text-size-adjust: 100%;
}

@media screen and (max-width: 640px) {
  html {
    overflow-x: hidden;
  }
  html.is_navbarShow {
    overflow: auto;
    height: 100%;
  }
}

body {
  -webkit-font-smoothing: antialiased;
  background: #fff;
  min-width: 990px;
  font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", Verdana, sans-serif;
  font-size: 1.4rem;
  line-height: 2;
  color: #21262b;
}

@media screen and (max-width: 640px) {
  body {
    min-width: 0;
    font-size: 1.4rem;
    line-height: 2;
  }
  .is_navbarShow body {
    overflow: hidden;
    height: 100%;
  }
}

@media screen and (max-width: 640px) {
  img {
    width: 100%;
    height: auto;
  }
}

/* Link
--------------------------------------------------------------*/
a {
  color: #f78128;
  text-decoration: underline;
}

a:not([href^="tel:"]):hover {
  text-decoration: none;
}

a:not([href^="tel:"]):hover img {
  opacity: 0.7;
}

a[href^="mailto:"], a[href^="tel:"] {
  color: inherit;
  text-decoration: none;
}

a[href^="tel:"] {
  cursor: text;
}

a.js_modal:hover img {
  opacity: 1;
}

/* テキスト選択
--------------------------------------------------------------*/
::-moz-selection {
  color: #fff;
  background: #f78128;
}
::selection {
  color: #fff;
  background: #f78128;
}

::-moz-selection {
  color: #fff;
  background: #f78128;
}

/* clearfix
--------------------------------------------------------------*/
.clearfix:after {
  content: "";
  clear: both;
  display: block;
}

/* PC,SP
--------------------------------------------------------------*/
@media screen and (min-width: 641px), print {
  .spCont {
    display: none;
  }
}

@media screen and (max-width: 640px) {
  .pcCont {
    display: none;
  }
}

/* width
--------------------------------------------------------------*/
.w1per {
  width: 1%;
}

.w2per {
  width: 2%;
}

.w3per {
  width: 3%;
}

.w4per {
  width: 4%;
}

.w5per {
  width: 5%;
}

.w6per {
  width: 6%;
}

.w7per {
  width: 7%;
}

.w8per {
  width: 8%;
}

.w9per {
  width: 9%;
}

.w10per {
  width: 10%;
}

.w11per {
  width: 11%;
}

.w12per {
  width: 12%;
}

.w13per {
  width: 13%;
}

.w14per {
  width: 14%;
}

.w15per {
  width: 15%;
}

.w16per {
  width: 16%;
}

.w17per {
  width: 17%;
}

.w18per {
  width: 18%;
}

.w19per {
  width: 19%;
}

.w20per {
  width: 20%;
}

.w21per {
  width: 21%;
}

.w22per {
  width: 22%;
}

.w23per {
  width: 23%;
}

.w24per {
  width: 24%;
}

.w25per {
  width: 25%;
}

.w26per {
  width: 26%;
}

.w27per {
  width: 27%;
}

.w28per {
  width: 28%;
}

.w29per {
  width: 29%;
}

.w30per {
  width: 30%;
}

.w31per {
  width: 31%;
}

.w32per {
  width: 32%;
}

.w33per {
  width: 33%;
}

.w34per {
  width: 34%;
}

.w35per {
  width: 35%;
}

.w36per {
  width: 36%;
}

.w37per {
  width: 37%;
}

.w38per {
  width: 38%;
}

.w39per {
  width: 39%;
}

.w40per {
  width: 40%;
}

.w41per {
  width: 41%;
}

.w42per {
  width: 42%;
}

.w43per {
  width: 43%;
}

.w44per {
  width: 44%;
}

.w45per {
  width: 45%;
}

.w46per {
  width: 46%;
}

.w47per {
  width: 47%;
}

.w48per {
  width: 48%;
}

.w49per {
  width: 49%;
}

.w50per {
  width: 50%;
}

/* margin調整
--------------------------------------------------------------*/
.mt_-20{
  margin-top: -20px;
}

/* toggleのiphone対応
--------------------------------------------------------------*/
.js_toggleHead {
  cursor: pointer;
}

@media screen and (min-width: 641px), print {
  .js_toggleHead_spOnly + .js_toggleCont {
    display: block !important;
  }
}

@media screen and (max-width: 640px) {
  .js_toggleHead_spOnly {
    cursor: pointer;
  }
  .js_toggleHead_spOnly + .js_toggleCont {
    display: none;
  }
}

/* area_container
--------------------------------------------------------------*/
.area_container {
  width: 980px;
  margin: 0 auto 100px;
}

.area_container:after {
  content: "";
  clear: both;
  display: block;
}

@media screen and (max-width: 640px) {
  .area_container {
    width: 100%;
    margin: 0 auto 50px;
  }
}

.area_container .area_main {
  width: 680px;
  float: left;
}

@media screen and (max-width: 640px) {
  .area_container .area_main {
    width: 100%;
    padding: 0 15px;
  }
}

.area_container .area_main.typeSingle {
  width: 100%;
  float: none;
}

@media screen and (max-width: 640px) {
  .area_container .area_main.typeSingle {
    padding: 0 15px;
  }
}

/* area_side
--------------------------------------------------------------*/
.area_side {
  width: 240px;
  float: right;
}

@media screen and (max-width: 640px) {
  .area_side {
    width: 100%;
    padding: 0 15px;
  }
}

/* area_topContainer
--------------------------------------------------------------*/
.area_topContainer {
  width: 980px;
  margin: 0 auto;
}

@media screen and (max-width: 640px) {
  .area_topContainer {
    width: 100%;
    padding: 0 15px;
  }
}

/* area_topContainer
--------------------------------------------------------------*/

/*
#overview
Grid
*/
/*
#styleguide

Grid pc:1col sp:1col
```
<div class="grid grid_gutters grid_1of1">
  <div class="grid_cell">
    <img src="/resources/img/adire/tomakomai/img1.jpg" alt="">
  </div>
  <div class="grid_cell">
    <img src="/resources/img/adire/tomakomai/img2.jpg" alt="">
  </div>
  <div class="grid_cell">
    <img src="/resources/img/adire/tomakomai/img1.jpg" alt="">
  </div>
  <div class="grid_cell">
    <img src="/resources/img/adire/tomakomai/img2.jpg" alt="">
  </div>
</div>
```
*/
/*
#styleguide
Grid pc:1col sp:2col
```
<div class="grid grid_gutters grid_1of2">
  <div class="grid_cell">
    <img src="/resources/img/adire/tomakomai/img1.jpg" alt="">
  </div>
  <div class="grid_cell">
    <img src="/resources/img/adire/tomakomai/img2.jpg" alt="">
  </div>
  <div class="grid_cell">
    <img src="/resources/img/adire/tomakomai/img1.jpg" alt="">
  </div>
  <div class="grid_cell">
    <img src="/resources/img/adire/tomakomai/img2.jpg" alt="">
  </div>
</div>
```
*/
/*
#styleguide
Grid pc:1col sp:3col
```
<div class="grid grid_gutters grid_1of3">
  <div class="grid_cell">
    <img src="/resources/img/adire/tomakomai/img1.jpg" alt="">
  </div>
  <div class="grid_cell">
    <img src="/resources/img/adire/tomakomai/img2.jpg" alt="">
  </div>
  <div class="grid_cell">
    <img src="/resources/img/adire/tomakomai/img1.jpg" alt="">
  </div>
  <div class="grid_cell">
    <img src="/resources/img/adire/tomakomai/img2.jpg" alt="">
  </div>
</div>
```
*/
/*
#styleguide
Grid pc:1col sp:4col
```
<div class="grid grid_gutters grid_1of4">
  <div class="grid_cell">
    <img src="/resources/img/adire/tomakomai/img1.jpg" alt="">
  </div>
  <div class="grid_cell">
    <img src="/resources/img/adire/tomakomai/img2.jpg" alt="">
  </div>
  <div class="grid_cell">
    <img src="/resources/img/adire/tomakomai/img1.jpg" alt="">
  </div>
  <div class="grid_cell">
    <img src="/resources/img/adire/tomakomai/img2.jpg" alt="">
  </div>
</div>
```
*/
/*
#styleguide
Grid pc:2col sp:1col
```
<div class="grid grid_gutters grid_2of1">
  <div class="grid_cell">
    <img src="/resources/img/adire/tomakomai/img1.jpg" alt="">
  </div>
  <div class="grid_cell">
    <img src="/resources/img/adire/tomakomai/img2.jpg" alt="">
  </div>
  <div class="grid_cell">
    <img src="/resources/img/adire/tomakomai/img1.jpg" alt="">
  </div>
  <div class="grid_cell">
    <img src="/resources/img/adire/tomakomai/img2.jpg" alt="">
  </div>
</div>
```
*/
/*
#styleguide
Grid pc:2col sp:2col
```
<div class="grid grid_gutters grid_2of2">
  <div class="grid_cell">
    <img src="/resources/img/adire/tomakomai/img1.jpg" alt="">
  </div>
  <div class="grid_cell">
    <img src="/resources/img/adire/tomakomai/img2.jpg" alt="">
  </div>
  <div class="grid_cell">
    <img src="/resources/img/adire/tomakomai/img1.jpg" alt="">
  </div>
  <div class="grid_cell">
    <img src="/resources/img/adire/tomakomai/img2.jpg" alt="">
  </div>
</div>
```
*/
/*
#styleguide
Grid pc:2col sp:3col
```
<div class="grid grid_gutters grid_2of3">
  <div class="grid_cell">
    <img src="/resources/img/adire/tomakomai/img1.jpg" alt="">
  </div>
  <div class="grid_cell">
    <img src="/resources/img/adire/tomakomai/img2.jpg" alt="">
  </div>
  <div class="grid_cell">
    <img src="/resources/img/adire/tomakomai/img1.jpg" alt="">
  </div>
  <div class="grid_cell">
    <img src="/resources/img/adire/tomakomai/img2.jpg" alt="">
  </div>
</div>
```
*/
/*
#styleguide
Grid pc:2col sp:4col
```
<div class="grid grid_gutters grid_2of4">
  <div class="grid_cell">
    <img src="/resources/img/adire/tomakomai/img1.jpg" alt="">
  </div>
  <div class="grid_cell">
    <img src="/resources/img/adire/tomakomai/img2.jpg" alt="">
  </div>
  <div class="grid_cell">
    <img src="/resources/img/adire/tomakomai/img1.jpg" alt="">
  </div>
  <div class="grid_cell">
    <img src="/resources/img/adire/tomakomai/img2.jpg" alt="">
  </div>
</div>
```
*/
/*
#styleguide
Grid pc:3col sp:1col
```
<div class="grid grid_gutters grid_3of1">
  <div class="grid_cell">
    <img src="/resources/img/adire/tomakomai/img1.jpg" alt="">
  </div>
  <div class="grid_cell">
    <img src="/resources/img/adire/tomakomai/img2.jpg" alt="">
  </div>
  <div class="grid_cell">
    <img src="/resources/img/adire/tomakomai/img1.jpg" alt="">
  </div>
  <div class="grid_cell">
    <img src="/resources/img/adire/tomakomai/img2.jpg" alt="">
  </div>
</div>
```
*/
/*
#styleguide
Grid pc:3col sp:2col
```
<div class="grid grid_gutters grid_3of2">
  <div class="grid_cell">
    <img src="/resources/img/adire/tomakomai/img1.jpg" alt="">
  </div>
  <div class="grid_cell">
    <img src="/resources/img/adire/tomakomai/img2.jpg" alt="">
  </div>
  <div class="grid_cell">
    <img src="/resources/img/adire/tomakomai/img1.jpg" alt="">
  </div>
  <div class="grid_cell">
    <img src="/resources/img/adire/tomakomai/img2.jpg" alt="">
  </div>
</div>
```
*/
/*
#styleguide
Grid pc:3col sp:3col
```
<div class="grid grid_gutters grid_3of3">
  <div class="grid_cell">
    <img src="/resources/img/adire/tomakomai/img1.jpg" alt="">
  </div>
  <div class="grid_cell">
    <img src="/resources/img/adire/tomakomai/img2.jpg" alt="">
  </div>
  <div class="grid_cell">
    <img src="/resources/img/adire/tomakomai/img1.jpg" alt="">
  </div>
  <div class="grid_cell">
    <img src="/resources/img/adire/tomakomai/img2.jpg" alt="">
  </div>
</div>
```
*/
/*
#styleguide
Grid pc:3col sp:4col
```
<div class="grid grid_gutters grid_3of4">
  <div class="grid_cell">
    <img src="/resources/img/adire/tomakomai/img1.jpg" alt="">
  </div>
  <div class="grid_cell">
    <img src="/resources/img/adire/tomakomai/img2.jpg" alt="">
  </div>
  <div class="grid_cell">
    <img src="/resources/img/adire/tomakomai/img1.jpg" alt="">
  </div>
  <div class="grid_cell">
    <img src="/resources/img/adire/tomakomai/img2.jpg" alt="">
  </div>
</div>
```
*/
/*
#styleguide
Grid pc:4col sp:1col
```
<div class="grid grid_gutters grid_4of1">
  <div class="grid_cell">
    <img src="/resources/img/adire/tomakomai/img1.jpg" alt="">
  </div>
  <div class="grid_cell">
    <img src="/resources/img/adire/tomakomai/img2.jpg" alt="">
  </div>
  <div class="grid_cell">
    <img src="/resources/img/adire/tomakomai/img1.jpg" alt="">
  </div>
  <div class="grid_cell">
    <img src="/resources/img/adire/tomakomai/img2.jpg" alt="">
  </div>
</div>
```
*/
/*
#styleguide
Grid pc:4col sp:2col
```
<div class="grid grid_gutters grid_4of2">
  <div class="grid_cell">
    <img src="/resources/img/adire/tomakomai/img1.jpg" alt="">
  </div>
  <div class="grid_cell">
    <img src="/resources/img/adire/tomakomai/img2.jpg" alt="">
  </div>
  <div class="grid_cell">
    <img src="/resources/img/adire/tomakomai/img1.jpg" alt="">
  </div>
  <div class="grid_cell">
    <img src="/resources/img/adire/tomakomai/img2.jpg" alt="">
  </div>
</div>
```
*/
/*
#styleguide
Grid pc:4col sp:3col
```
<div class="grid grid_gutters grid_4of3">
  <div class="grid_cell">
    <img src="/resources/img/adire/tomakomai/img1.jpg" alt="">
  </div>
  <div class="grid_cell">
    <img src="/resources/img/adire/tomakomai/img2.jpg" alt="">
  </div>
  <div class="grid_cell">
    <img src="/resources/img/adire/tomakomai/img1.jpg" alt="">
  </div>
  <div class="grid_cell">
    <img src="/resources/img/adire/tomakomai/img2.jpg" alt="">
  </div>
</div>
```
*/
/*
#styleguide
Grid pc:4col sp:4col
```
<div class="grid grid_gutters grid_4of4">
  <div class="grid_cell">
    <img src="/resources/img/adire/tomakomai/img1.jpg" alt="">
  </div>
  <div class="grid_cell">
    <img src="/resources/img/adire/tomakomai/img2.jpg" alt="">
  </div>
  <div class="grid_cell">
    <img src="/resources/img/adire/tomakomai/img1.jpg" alt="">
  </div>
  <div class="grid_cell">
    <img src="/resources/img/adire/tomakomai/img2.jpg" alt="">
  </div>
</div>
```

*/
/* grid
---------------------------*/
.grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

/* grid
---------------------------*/
/* With gutters */
.grid_gutters {
  margin: 0 0 0 -1em;
}

.grid_gutters > .grid_cell {
  padding: 1% 0 0 2%;
}

.grid_gutters > .grid_cell img {
  max-width: 100%;
  height: auto;
}

@media screen and (max-width: 640px) {
  .grid_gutters {
    margin-left: -15px;
  }
  .grid_gutters .grid_cell {
    padding: 1% 0 0 15px;
  }
  .grid_gutters .grid_cell img {
    max-width: 100%;
    height: auto;
  }
}

/* Alignment per row */
.grid_top {
  /*--- safari（PC）用 ---*/
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

.grid_bottom {
  /*--- safari（PC）用 ---*/
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.grid_center {
  /*--- safari（PC）用 ---*/
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.grid_space {
  /*--- safari（PC）用 ---*/
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

/* Alignment per cell */
.grid_cell_top {
  -ms-flex-item-align: start;
      align-self: flex-start;
}

.grid_cell_bottom {
  -ms-flex-item-align: end;
      align-self: flex-end;
}

.grid_cell_center {
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
}

/* Base classes for all media */
.grid_fit > .grid_cell {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  max-width: inherit;
}

.grid_1of1 > .grid_cell,
.grid_1of2 > .grid_cell,
.grid_1of3 > .grid_cell,
.grid_1of4 > .grid_cell {
  max-width: 100%;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 100%;
          flex: 0 0 100%;
}

.grid_2of1 > .grid_cell,
.grid_2of2 > .grid_cell,
.grid_2of3 > .grid_cell,
.grid_2of4 > .grid_cell {
  max-width: 50%;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 50%;
          flex: 0 0 50%;
}

.grid_3of1 > .grid_cell,
.grid_3of2 > .grid_cell,
.grid_3of3 > .grid_cell,
.grid_3of4 > .grid_cell {
  max-width: 33.3333%;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 33.3333%;
          flex: 0 0 33.3333%;
}

.grid_4of1 > .grid_cell,
.grid_4of2 > .grid_cell,
.grid_4of3 > .grid_cell,
.grid_4of4 > .grid_cell {
  max-width: 25%;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 25%;
          flex: 0 0 25%;
}

/* Small to medium screens */
@media screen and (max-width: 640px) {
  .grid_1of1 > .grid_cell,
  .grid_2of1 > .grid_cell,
  .grid_3of1 > .grid_cell,
  .grid_4of1 > .grid_cell {
    max-width: 100%;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
  }
  .grid_1of2 > .grid_cell,
  .grid_2of2 > .grid_cell,
  .grid_3of2 > .grid_cell,
  .grid_4of2 > .grid_cell {
    max-width: 50%;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
            flex: 0 0 50%;
  }
  .grid_1of3 > .grid_cell,
  .grid_2of3 > .grid_cell,
  .grid_3of3 > .grid_cell,
  .grid_4of3 > .grid_cell {
    max-width: 33.3333%;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 33.3333%;
            flex: 0 0 33.3333%;
  }
  .grid_1of4 > .grid_cell,
  .grid_2of4 > .grid_cell,
  .grid_3of4 > .grid_cell,
  .grid_4of4 > .grid_cell {
    max-width: 25%;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 25%;
            flex: 0 0 25%;
  }
}

/*
#overview
Article
*/
/* Article
--------------------------------------------------------------*/
/*
#styleguide

下層articleコンテンツ用
```
<div class="article">
  <p>pタグにはmargin-bottom: 2em;が付与されます。</p>
</div>
```
*/
.article p {
  margin-bottom: 2em;
}

.article ol + p {
  margin-top: 2em;
}

/*
#overview
Label
*/
/*
#styleguide

Label
```
<span class="label label_kids">キッズスペース</span>
<span class="label label_parking">無料駐車場</span>
<span class="label label_case">ケース１１１</span>
```
*/
/* Label
--------------------------------------------------------------*/
.label {
  display: inline-block;
  border-radius: 5px;
  font-size: 1.2rem;
  padding: 6px 10px;
  line-height: 1;
}

@media screen and (max-width: 640px) {
  .label {
    border-radius: 2px;
    font-size: 1rem;
    padding: 5px 10px;
  }
}

.label_kids {
  background: #e7f4fc;
}

.label_parking {
  background: #ffe0e0;
}

.label_case {
  background: #305889;
  color: #fff;
}

@media screen and (max-width: 640px) {
  .label_case {
    padding: 4px 6px 3px;
  }
}

/*
#overview
Headline
*/
/*
#styleguide

headline1
```
<div class="headline1_wrap">
  <div class="headline1">
    <h1 class="headline1_inner">入通院に関する損害</h1>
  </div>
</div>
```
*/
.headline1_wrap {
  width: 100%;
  background: #eaeef3;
  color: #0e8ce0;
  background: url(/resources/img/common/headline/headlline1_pc.jpg) no-repeat center;
  background-size: cover;
}

.headline1_wrap .headline1 {
  padding: 42px 0;
  width: 980px;
  max-width: 990px;
  margin: 0 auto;
}

.headline1_wrap .headline1 .headline1_inner {
  font-size: 2.5rem;
  line-height: 1.4;
  font-weight: bold;
  color: #0e8ce0;
}

@media screen and (max-width: 640px) {
  .headline1_wrap {
    margin-bottom: 20px;
    background: url(/resources/img/common/headline/headlline1_sp.jpg) no-repeat center;
    background-size: cover;
  }
  .headline1_wrap .headline1 {
    padding: 20px 17px;
    width: 100%;
  }
  .headline1_wrap .headline1 .headline1_inner {
    font-size: 1.8rem;
  }
}

/*
#styleguide

heading2
```
<h2 class="headline2">損はさせない保証</h2>
<div class="headline_col2">
  <div class="headline_itemLeft">
    <div class="block_circle_wrap">
      <p class="block_circle">第１回</p>
    </div>
  </div>
  <div class="headline_itemRight">
    <h2 class="headline2">「交通事故で大怪我？！　保険会社との交渉は大丈夫？」</h2>
  </div>
</div>
```
*/
.article > .headline2:first-child {
  margin-top: 0;
}

.article > *:first-child .headline2 {
  margin-top: 0;
}

.article .headline2 + ul,
.article .headline3 + ul {
  margin-top: 0;
}

.headline2 {
  font-weight: bold;
  font-size: 2.4rem;
  width: 100%;
  padding: .75em;
  background-image: url("/resources/img/common/headline/headline2.gif");
  line-height: 1.3;
  border-top: 2px solid #0e8ce0;
  border-bottom: 1px solid #ddd;
  margin: 50px 0 25px;
}

@media screen and (max-width: 640px) {
  .headline2 {
    font-size: 1.7rem;
    padding: .75em;
    margin: 30px 0 15px;
  }
}

.headline_col2 {
  margin: 50px 0 25px;
  display: table;
  width: 100%;
}

.headline_col2 .headline_itemLeft,
.headline_col2 .headline_itemRight {
  display: table-cell;
  vertical-align: middle;
  padding-right: .4em;
}

.headline_col2 .headline_itemLeft {
  width: 10%;
}

.headline_col2 .headline_itemRight {
  width: 90%;
}

.headline_col2 .headline_itemRight .headline2 {
  margin: 0;
}

@media screen and (max-width: 640px) {
  .headline_col2 .headline_itemRight {
    padding-left: 10px;
  }
}

.block_circle_wrap {
  width: 50px;
  height: 50px;
  display: table;
  border-radius: 50%;
  position: relative;
  background-color: #ffe66d;
}

.block_circle_wrap > .block_circle {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  font-weight: bold;
}

.block_circle_wrap:after {
  margin-top: -8px;
  top: 50%;
  content: '';
  display: inline-block;
  position: absolute;
  border: solid transparent;
  border-width: 8px;
  border-left-color: #ffe66d;
  right: -14px;
}

/*
#styleguide

headline3
```
<h3 class="headline3">関連Ｑ＆Ａ<span class="small">交通事故全般</span></h3>
<h3 class="headline3">駐車場<span class="label label_parking">無料</span></h3>
```
*/
.headline3 {
  position: relative;
  font-weight: bold;
  font-size: 2rem;
  line-height: 1.3;
  width: 100%;
  padding: .5em .625em .5em 2em;
  border-top: 2px solid #ddd;
  border-bottom: 1px dotted #ddd;
  background-color: #f6f6f6;
  margin: 25px 0 10px;
}

@media screen and (max-width: 640px) {
  .headline3 {
    margin: 15px 0 5px;
  }
}

.headline3:before {
  position: absolute;
  top: 50%;
  left: .625em;
  content: '';
  width: .5em;
  height: .5em;
  border-radius: 50%;
  border: 3px solid #0e8ce0;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}

.headline3 > span {
  display: inline-block;
}

.headline3 .xsmall {
  font-size: 0.7em;
}

.headline3 .small {
  padding-left: 21px;
  font-size: 1.6rem;
  display: inline;
}

.headline3 .label {
  vertical-align: middle;
  -webkit-transform: translateY(-1px);
      -ms-transform: translateY(-1px);
          transform: translateY(-1px);
  margin-left: 5px;
}

.headline3 .number {
  margin-right: 20px;
}

@media screen and (max-width: 640px) {
  .headline3 {
    font-size: 1.6rem;
    padding: .35em .625em .35em 2em;
  }
  .headline3 .small {
    padding-left: 17px;
    font-size: 1.2rem;
  }
  .headline3.type_accordion {
    padding: 1em 2em;
  }
  .headline3.type_accordion .number {
    position: absolute;
    left: 20px;
    top: .7em;
  }
  .headline3.type_accordion:after {
    display: block;
    content: "";
    font-family: "fontello";
    font-style: normal;
    color: #305889;
    font-size: 1.8rem;
    position: absolute;
    top: 50%;
    right: 7px;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
  }
  .headline3.type_accordion.active:after {
    content: "";
    font-family: "fontello";
    font-style: normal;
  }
}

/*
#styleguide

headline4
```
<h4 class="headline4">I．自賠責保険基準</h4>
```
*/
.headline4 {
  position: relative;
  font-weight: bold;
  font-size: 1.8rem;
  line-height: 1.3;
  width: 100%;
  padding-left: .75em;
  border-left: 4px solid #0e8ce0;
  margin: 25px 0 16px;
}

.headline4:before {
  position: absolute;
  left: -4px;
  bottom: -6px;
  display: block;
  content: '';
  width: 100%;
  border-bottom: 3px double #ddd;
}

@media screen and (max-width: 640px) {
  .headline4 {
    margin: 15px 0 11px;
    font-size: 1.5rem;
    padding-left: .7em;
  }
  .headline4.type_accordion {
    padding: 1em 2em 1em .7em;
  }
  .headline4.type_accordion:after {
    display: block;
    content: "";
    font-family: "fontello";
    font-style: normal;
    color: #305889;
    font-size: 1.8rem;
    position: absolute;
    top: 50%;
    right: 7px;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
  }
  .headline4.type_accordion.active:after {
    content: "";
    font-family: "fontello";
    font-style: normal;
  }
}

/*
#styleguide

headline5
```
<h3 class="headline5">弁護士費用特約が付いていない方も<br>ご安心ください！</h3>
```
*/
.headline5 {
  font-size: 1.4rem;
  font-weight: bold;
  line-height: 1.2;
  background: url(/resources/img/common/headline/headline5.png) repeat-y top left;
  padding-left: 24px;
  margin: 25px 0 10px;
}

@media screen and (max-width: 640px) {
  .headline5 {
    margin: 15px 0 5px;
    padding-left: .75em;
  }
}

/*
#styleguide

headline6
```
<h2 class="headline6"><span class="headline6_inner"><span class="em">交通事故</span>の<span class="em">解決事例</span></span></h2>
```
*/
.headline6 {
  font-size: 4rem;
  line-height: 1.25;
  color: #305889;
  font-weight: bold;
  text-align: center;
  position: relative;
  margin-bottom: 40px;
}

@media screen and (max-width: 640px) {
  .headline6 {
    font-size: 2rem;
    margin-bottom: 20px;
    min-height: 45px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

.headline6 .em {
  color: #f78128;
}

.headline6.typeInvert {
  color: #fff;
}

.headline6_inner {
  position: relative;
  padding: 0 42px;
  display: inline-block;
}

@media screen and (max-width: 640px) {
  .headline6_inner {
    padding: 0 25px;
  }
}

.headline6_inner:before, .headline6_inner:after {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-55%);
      -ms-transform: translateY(-55%);
          transform: translateY(-55%);
  content: '';
  display: block;
  width: 12px;
  height: 75%;
  border: solid 5px #305889;
}

@media screen and (max-width: 640px) {
  .headline6_inner:before, .headline6_inner:after {
    border-width: 3px;
    width: 5px;
    height: 45px;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
  }
}

.typeInvert .headline6_inner:before, .typeInvert .headline6_inner:after {
  border-color: #fff;
}

.headline6_inner:before {
  border-right: none;
  left: 0;
}

.headline6_inner:after {
  border-left: none;
  right: 0;
}

/*
#styleguide

headline7
```
<h3 class="headline7"><span class="headline7_inner">ケガの部位別</span></h3>
```
*/
.headline7 {
  font-size: 2.2rem;
  text-align: center;
  font-weight: bold;
  color: #305889;
  margin: 50px 0 30px;
}

@media screen and (max-width: 640px) {
  .headline7 {
    font-size: 1.3rem;
    margin: 20px 0 15px;
  }
}

.headline7_inner {
  padding: 0 35px;
  position: relative;
}

@media screen and (max-width: 640px) {
  .headline7_inner {
    padding: 0 22px;
  }
}

.headline7_inner:before, .headline7_inner:after {
  content: '';
  display: inline-block;
  width: 3px;
  height: 25px;
  background: #305889;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-55%);
      -ms-transform: translateY(-55%);
          transform: translateY(-55%);
}

@media screen and (max-width: 640px) {
  .headline7_inner:before, .headline7_inner:after {
    width: 2px;
    height: 15px;
  }
}

.headline7_inner:before {
  left: 0;
}

.headline7_inner:after {
  right: 0;
}

/*
#styleguide

headline_case
交通事故の解決事例集で使用しています。
```
<h1 class="headline_caseWrap">
  <span class="label label_case">ケース３２９</span>
  <span class="headline_case">SAMPLE TITLE SAMPLE TITLE SAMPLE TITLE</span>
</h1>
```
*/
.headline_caseWrap {
  font-weight: bold;
  margin-bottom: 20px;
}

.headline_caseWrap .label {
  margin-bottom: 10px;
}

.headline_case {
  font-size: 2rem;
  display: block;
  line-height: 1.4;
}

/*
#styleguide

headline_initial
用語集ページで使用
```
<h3 class="headline_initial" id="target1"><span class="btn_initial disabled">あ</span></h3>
```
*/
/* headline_initial
---------------------------*/
.headline_initial {
  margin: 25px 0 10px;
}

@media screen and (max-width: 640px) {
  .headline_initial {
    margin: 15px 0 10px;
  }
}

/*
#styleguide

headline_balloon
交通事故の解決事例集で使用しています。
```
<h1 class="headline_balloon">
  <span class="avatar"><img src="/resources/img/common/avatar/avatar_shinoda.png" width="91" height="154" alt="アバター"></span>
  <span>皆様と同じように，交通事故の被害に遭われて弁護士への依頼を検討されている方，そもそも相手方から提示された賠償金額が必ずしも適正ではないことをご存知ない方に向けて，メッセージをお願いいたします。</span>
</h1>

<h1 class="headline_balloon typeFaq">
  <i class="icon_faq typeQ">Q</i>
  <span>ご依頼者様に対する弊事務所の弁護士や事務員の対応はいかがでしたでしょうか。</span>
</h1>
```
*/
.article > .headline_balloon:first-child {
  margin-top: 0;
}

.article > *:first-child .headline_balloon {
  margin-top: 0;
}

.headline_balloon {
  background: #eaeef3;
  color: #305889;
  font-size: 1.8rem;
  position: relative;
  font-weight: bold;
  margin: 50px 0 40px;
  padding: 25px 20px;
  border-radius: 5px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  line-height: 1.6;
}

@media screen and (max-width: 640px) {
  .headline_balloon {
    font-size: 1.6rem;
    padding: 15px;
  }
  .headline_balloon.typeFaq {
    padding-top: 30px;
    font-size: 1.4rem;
  }
}

.headline_balloon .avatar {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 68px;
  height: 105px;
  margin-right: 20px;
  overflow: hidden;
}

.headline_balloon .avatar img {
  width: 100%;
  height: auto;
}

.headline_balloon .icon_faq {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  margin-right: 10px;
}

@media screen and (max-width: 640px) {
  .headline_balloon .icon_faq {
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }
}

.headline_balloon:before {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 18px 18px 0 18px;
  border-color: #eaeef3 transparent transparent transparent;
  position: absolute;
  left: 50%;
  bottom: 0;
  -webkit-transform: translate(-50%, 100%);
      -ms-transform: translate(-50%, 100%);
          transform: translate(-50%, 100%);
}

/*
#styleguide

headline_map
アディーレ法律事務所の弁護士紹介で使用しています。
```
<h4 class="headline_map">北海道・東北</h4>
```
*/
.headline_map {
  font-size: 1.8rem;
  font-weight: bold;
  margin-top: 20px;
  padding: 20px 0 10px;
  border-bottom: 2px solid #305889;
}

.headline_map:before {
  color: #0e8ce0;
  content: "";
  font-family: "fontello";
  font-style: normal;
  margin-right: 10px;
}

/*
#styleguide

headline_reason
アディーレが選ばれる理由で使用しています。
```
<h2 class="headline_reason type_number js_toggleHead_spOnly"><span class="number">5</span>治療中から後遺障害の認定までフルサポート</h2>
<h2 class="headline_reason js_toggleHead_spOnly">最後に</h2>
```
*/
.headline_reason {
  position: relative;
  font-weight: bold;
  font-size: 1.7rem;
  line-height: 1.3;
  width: 100%;
  padding: 9px 10px 9px 10px;
  border-top: 2px solid #ddd;
  background-color: #f6f6f6;
  margin: 25px 0 10px;
}

@media screen and (max-width: 640px) {
  .headline_reason {
    margin: 15px 0 5px;
    padding: 18px 30px 18px 7px;
    font-size: 1.4rem;
    margin: 0;
  }
}

.headline_reason + .js_toggleCont {
  padding-top: 15px;
}

.headline_reason.type_number {
  padding-left: 80px;
}

@media screen and (max-width: 640px) {
  .headline_reason.type_number {
    padding-left: 70px;
  }
}

@media screen and (max-width: 640px) {
  .headline_reason:after {
    display: block;
    content: "";
    font-family: "fontello";
    font-style: normal;
    color: #305889;
    font-size: 1.8rem;
    position: absolute;
    top: 50%;
    right: 7px;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
  }
}

@media screen and (max-width: 640px) {
  .headline_reason.active:after {
    content: "";
    font-family: "fontello";
    font-style: normal;
  }
}

.headline_reason .number {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 1px solid #305889;
  color: #305889;
  font-weight: normal;
  background: #eaeef3;
  text-align: center;
  font-size: 1.5rem;
  line-height: 20px;
  position: absolute;
  left: 50px;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}

@media screen and (max-width: 640px) {
  .headline_reason .number {
    font-size: 1.1rem;
    width: 16px;
    height: 16px;
    line-height: 16px;
    left: 45px;
  }
}

.headline_reason .number:before {
  content: "Reason";
  font-size: 1.2rem;
  position: absolute;
  top: 50%;
  left: -5px;
  -webkit-transform: translate(-100%, -50%);
      -ms-transform: translate(-100%, -50%);
          transform: translate(-100%, -50%);
}

@media screen and (max-width: 640px) {
  .headline_reason .number:before {
    font-size: 1rem;
  }
}

/*
#overview
Button
*/
/*
#styleguide

btn
.btn_groupで囲むとセンター寄せ、横並びになります。
幅は一旦未調整なので・・・。
```
<a href="#" class="btn_primary btn_color1">btn_primary</a>
<a href="#" class="btn_primary btn_color2">btn_primary</a>
<a href="#" class="btn_primary btn_color1"><span class="inner_arrow">btn_primary arrow</span></a>
<a href="#" class="btn_primary btn_color2"><span class="inner_arrow">btn_primary arrow</span></a>
<a href="#" class="btn_primary btn_color1 btn_vertical"><i class="icon-file-pdf"></i>btn_primary icon<span class="btn_txtSub">（sub）</span></a>
<a href="#" class="btn_primary btn_color2 btn_horizontal"><i class="icon-file-pdf"></i>btn_primary icon<span class="btn_txtSub">（sub）</span></a>
<a href="#" class="btn_primary btn_color1 btn_vertical"><span class="inner_arrow"><i class="icon-file-pdf"></i>btn_primary arrow icon</span></a>
<a href="#" class="btn_primary btn_color1 btn_horizontal"><span class="inner_arrow"><i class="icon-file-pdf"></i>btn_primary arrow icon</span></a>

<a href="#" class="btn_secondary btn_color1">btn_secondary</a>
<a href="#" class="btn_secondary btn_color2">btn_secondary</a>
<a href="#" class="btn_secondary btn_color1"><span class="inner_arrow">btn_secondary arrow</span></a>
<a href="#" class="btn_secondary btn_color2"><span class="inner_arrow">btn_secondary arrow</span></a>

<a href="#" class="btn_tertiary btn_color1">btn_tertiary</a>
<a href="#" class="btn_tertiary btn_color2">btn_tertiary</a>
<a href="#" class="btn_tertiary btn_color1"><span class="inner_arrow">btn_tertiary arrow</span></a>
<a href="#" class="btn_tertiary btn_color2"><span class="inner_arrow">btn_tertiary arrow</span></a>
<a href="#" class="btn_tertiary btn_color1" target="_blank"><span class="inner_blank">btn_tertiary blank</span></a>
<a href="#" class="btn_tertiary btn_color2" target="_blank"><span class="inner_blank">btn_tertiary blank</span></a>

<p class="btn_moreCase"><span class="inner_arrow">btn_moreCase</span></p>

<a class="btn_ctaColor_primary">btn_ctaColor_primary</a>
<a class="btn_ctaColor_secondary">btn_ctaColor_secondary</a>
<a class="btn_ctaColor_primary"><span class="inner_arrow">btn_ctaColor_primary arrow</span></a>
<a class="btn_ctaColor_secondary"><span class="inner_arrow">btn_ctaColor_secondary arrow</span></a>
```
*/
/* btns
---------------------------*/
/* btn group */
.btn_box {
  text-align: center;
  margin: 20px 0;
}

@media screen and (max-width: 640px) {
  .btn_box .btn_primary,
  .btn_box .btn_secondary,
  .btn_box .btn_tertiary,
  .btn_box .btn_ctaColor_primary,
  .btn_box .btn_ctaColor_primary {
    margin: 0 auto;
    margin: 7px 5px;
  }
}

.btn_box .btn_primary:nth-child(n+2),
.btn_box .btn_secondary:nth-child(n+2),
.btn_box .btn_tertiary:nth-child(n+2),
.btn_box .btn_ctaColor_primary:nth-child(n+2),
.btn_box .btn_ctaColor_primary:nth-child(n+2) {
  margin-left: 20px;
}

@media screen and (max-width: 640px) {
  .btn_box .btn_primary:nth-child(n+2),
  .btn_box .btn_secondary:nth-child(n+2),
  .btn_box .btn_tertiary:nth-child(n+2),
  .btn_box .btn_ctaColor_primary:nth-child(n+2),
  .btn_box .btn_ctaColor_primary:nth-child(n+2) {
    margin: 7px 5px;
  }
}

/* btn type */
.btn_primary {
  display: inline-block;
  font-size: 1.6rem;
  line-height: 1.5;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  outline: none;
  border-radius: 8px;
  cursor: pointer;
  padding: 13px 38px;
  position: relative;
  color: #fff;
  min-width: 218px;
  border: none;
  box-shadow: 2px 2px rgba(0, 0, 0, 0.15);
  margin-bottom: 2px;
}

@media screen and (max-width: 640px) {
  .btn_primary {
    font-size: 1.3rem;
    border-radius: 4px;
    padding: 10px 25px;
    min-width: 80%;
  }
}

.btn_primary .inner_arrow:after {
  content: "";
  font-family: "fontello";
  font-style: normal;
  display: block;
  font-size: 2.6rem;
  font-weight: normal;
  position: absolute;
  right: 14px;
  top: 50%;
  margin-top: -1px;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}

@media screen and (max-width: 640px) {
  .btn_primary .inner_arrow:after {
    font-size: 2rem;
    right: 9px;
  }
}

.btn_primary.btn_color1 {
  background: #f78128;
}

.btn_primary.btn_color2 {
  background: #0e8ce0;
}

.btn_primary.btn_preparation {
  background: #e2e2e2;
  color: #999;
  pointer-events: none;
}

.btn_txtReady{
  font-size: 1.4rem;
}

@media screen and (min-width: 641px), print {
  .btn_primary:hover {
    opacity: 0.7;
  }
}

.btn_secondary {
  display: inline-block;
  font-size: 1.6rem;
  line-height: 1.5;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  outline: none;
  border-radius: 8px;
  cursor: pointer;
  padding: 13px 38px;
  position: relative;
  border-width: 1px;
  border-style: solid;
  background: #fff;
  min-width: 218px;
  box-shadow: 2px 2px #d9d9d9;
  margin-bottom: 2px;
}

@media screen and (max-width: 640px) {
  .btn_secondary {
    font-size: 1.3rem;
    border-radius: 4px;
    padding: 10px 25px;
    min-width: 80%;
  }
}

.btn_secondary .inner_arrow {
  display: inline-block;
}

.btn_secondary .inner_arrow:after {
  content: "";
  font-family: "fontello";
  font-style: normal;
  display: block;
  font-size: 2.6rem;
  font-weight: normal;
  position: absolute;
  right: 14px;
  top: 50%;
  margin-top: -1px;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}

@media screen and (max-width: 640px) {
  .btn_secondary .inner_arrow:after {
    font-size: 2rem;
    right: 9px;
  }
}

.btn_secondary .inner_blank {
  display: inline-block;
  padding-right: 14px;
}

@media screen and (max-width: 640px) {
  .btn_secondary .inner_blank {
    padding-right: 9px;
  }
}

.btn_secondary .inner_blank:after {
  content: "";
  font-family: "fontello";
  font-style: normal;
  display: block;
  font-size: 1.8rem;
  font-weight: normal;
  position: absolute;
  right: 14px;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}

@media screen and (max-width: 640px) {
  .btn_secondary .inner_blank:after {
    font-size: 1.5rem;
    right: 9px;
  }
}

.btn_secondary.btn_color1 {
  border-color: #f78128;
  color: #f78128;
}

@media screen and (min-width: 641px), print {
  .btn_secondary.btn_color1:hover {
    background: #f78128;
    color: #fff;
  }
}

.btn_secondary.btn_color2 {
  border-color: #0e8ce0;
  color: #0e8ce0;
}

@media screen and (min-width: 641px), print {
  .btn_secondary.btn_color2:hover {
    background: #0e8ce0;
    color: #fff;
  }
}

.btn_tertiary {
  display: inline-block;
  font-size: 1.4rem;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  outline: none;
  border-radius: 5px;
  cursor: pointer;
  padding: 6px 12px;
  position: relative;
  border-width: 1px;
  border-style: solid;
  background: #fff;
}

@media screen and (max-width: 640px) {
  .btn_tertiary {
    font-size: 1.2rem;
    border-radius: 4px;
    padding: 5px 8px;
  }
}

.btn_tertiary .inner_arrow {
  display: inline-block;
  padding: 0 18px 0 12px;
}

@media screen and (max-width: 640px) {
  .btn_tertiary .inner_arrow {
    padding: 0 14px 0 8px;
  }
}

.btn_tertiary .inner_arrow:after {
  content: "";
  font-family: "fontello";
  font-style: normal;
  display: block;
  font-size: 2rem;
  font-weight: normal;
  position: absolute;
  right: 12px;
  top: 50%;
  margin-top: -1px;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}

@media screen and (max-width: 640px) {
  .btn_tertiary .inner_arrow:after {
    font-size: 1.6rem;
    right: 8px;
  }
}

.btn_tertiary .inner_blank {
  display: inline-block;
  padding: 0 28px 0 12px;
}

@media screen and (max-width: 640px) {
  .btn_tertiary .inner_blank {
    padding: 0 21px 0 8px;
  }
}

.btn_tertiary .inner_blank:after {
  content: "";
  font-family: "fontello";
  font-style: normal;
  display: block;
  font-size: 1.6rem;
  font-weight: normal;
  position: absolute;
  right: 12px;
  top: 50%;
  margin-top: -1px;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}

@media screen and (max-width: 640px) {
  .btn_tertiary .inner_blank:after {
    font-size: 1.3rem;
    right: 8px;
  }
}

.btn_tertiary.btn_color1 {
  border-color: #f78128;
  color: #f78128;
}

@media screen and (min-width: 641px), print {
  .btn_tertiary.btn_color1:hover {
    background: #f78128;
    color: #fff;
  }
}

.btn_tertiary.btn_color2 {
  border-color: #0e8ce0;
  color: #0e8ce0;
}

@media screen and (min-width: 641px), print {
  .btn_tertiary.btn_color2:hover {
    background: #0e8ce0;
    color: #fff;
  }
}

.btn_moreCase {
  display: inline-block;
  font-size: 1.6rem;
  line-height: 1.5;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  outline: none;
  border-radius: 8px;
  cursor: pointer;
  padding: 13px 38px;
  position: relative;
  color: #305889;
  border: 1px solid #305889;
  min-width: 260px;
}

@media screen and (max-width: 640px) {
  .btn_moreCase {
    font-size: 1.3rem;
    border-radius: 4px;
    min-width: 180px;
    padding: 10px 21px;
  }
}

.btn_moreCase .inner_arrow {
  display: inline-block;
  position: relative;
  padding-right: 28px;
}

@media screen and (max-width: 640px) {
  .btn_moreCase .inner_arrow {
    padding-right: 22px;
  }
}

.btn_moreCase .inner_arrow:after {
  content: "";
  font-family: "fontello";
  font-style: normal;
  display: inline-block;
  font-size: 2.6rem;
  font-weight: normal;
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -1px;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}

@media screen and (max-width: 640px) {
  .btn_moreCase .inner_arrow:after {
    font-size: 2rem;
  }
}

@media screen and (min-width: 641px), print {
  .btn_moreCase:hover {
    background: #305889;
    color: #fff;
  }
}

/* CTAボタンの色を一括変更 */
.btn_ctaColor_primary {
  display: inline-block;
  background: #0e8ce0;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  box-shadow: 2px 2px #d9d9d9;
  margin-bottom: 2px;
  border-radius: 8px;
  padding: 10px 38px;
  position: relative;
  font-size: 1.6rem;
}

@media screen and (max-width: 640px) {
  .btn_ctaColor_primary {
    border-radius: 4px;
    padding: 6px 25px;
    font-size: 1.3rem;
  }
}

.btn_ctaColor_primary * {
  color: #fff;
}

.btn_ctaColor_primary:before, .btn_ctaColor_primary:after {
  color: #fff;
}

@media screen and (min-width: 641px), print {
  .btn_ctaColor_primary:hover {
    opacity: 0.7;
  }
}

.btn_ctaColor_primary .inner_arrow {
  display: inline-block;
}

.btn_ctaColor_primary .inner_arrow:after {
  content: "";
  font-family: "fontello";
  font-style: normal;
  display: block;
  font-size: 2.6rem;
  font-weight: normal;
  position: absolute;
  right: 14px;
  top: 50%;
  margin-top: -1px;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}

@media screen and (max-width: 640px) {
  .btn_ctaColor_primary .inner_arrow:after {
    font-size: 2rem;
    right: 9px;
  }
}

.btn_ctaColor_secondary {
  display: inline-block;
  background: #fff;
  color: #0e8ce0;
  font-weight: bold;
  text-decoration: none;
  border-radius: 8px;
  border: 1px solid #0e8ce0;
  padding: 10px 37px;
  position: relative;
  font-size: 1.6rem;
}

@media screen and (max-width: 640px) {
  .btn_ctaColor_secondary {
    border-radius: 4px;
    padding: 6px 25px;
    font-size: 1.3rem;
  }
}

.btn_ctaColor_secondary * {
  color: #0e8ce0;
}

.btn_ctaColor_secondary:before, .btn_ctaColor_secondary:after {
  color: #0e8ce0;
}

@media screen and (min-width: 641px), print {
  .btn_ctaColor_secondary:hover {
    background: #0e8ce0;
    color: #fff;
  }
  .btn_ctaColor_secondary:hover * {
    color: #fff;
  }
  .btn_ctaColor_secondary:hover:before, .btn_ctaColor_secondary:hover:after {
    color: #fff;
  }
}

.btn_ctaColor_secondary .inner_arrow {
  display: inline-block;
}

.btn_ctaColor_secondary .inner_arrow:after {
  content: "";
  font-family: "fontello";
  font-style: normal;
  display: block;
  font-size: 2.6rem;
  font-weight: normal;
  position: absolute;
  right: 14px;
  top: 50%;
  margin-top: -1px;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}

@media screen and (max-width: 640px) {
  .btn_ctaColor_secondary .inner_arrow:after {
    font-size: 2rem;
    right: 9px;
  }
}

.btn_vertical,
.btn_horizontal {
  position: relative;
}

.btn_vertical i,
.btn_horizontal i {
  display: block;
  font-size: 1.6rem;
}

.btn_vertical i {
  position: absolute;
  top: 50%;
  left: 10px;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}

@media screen and (max-width: 640px) {
  .btn_vertical i {
    left: 5px;
  }
}

.btn_txtSub {
  font-size: 1.4rem;
  color: #ffe66d;
}

.btn_txtEm {
  font-size: 2.2rem;
}

@media screen and (max-width: 640px) {
  .btn_txtEm {
    font-size: 2rem;
  }
}

/*
#styleguide

btn_index
```
<!-- contents -->
<div class="btn_index_wrap">
  <a href="#" class="btn_index">
    <div class="feature">
      <img src="/resources/img/shougai/img1.png" width="200" height="200" alt="画像">
    </div>
    <div class="caption">
      <p class="title">休業に関する損害</p>
      <p class="text">事故によるけがで，治癒あるいは症状固定までのあいだ，働くことができず収入が減少した場合の損害です。給与所得者や事業所得者だけでなく，主婦（主夫）など家事従事者にも認められます。</p>
    </div>
  </a>
  <a href="#" class="btn_index">
    <div class="feature">
      <img src="/resources/img/shougai/img2.png" width="200" height="200" alt="画像">
    </div>
    <div class="caption">
      <p class="title">休業に関する損害</p>
      <p class="text">事故によるけがで，治癒あるいは症状固定までのあいだ，働くことができず収入が減少した場合の損害です。給与所得者や事業所得者だけでなく，主婦（主夫）など家事従事者にも認められます。</p>
    </div>
  </a>
  <a href="#" class="btn_index">
    <div class="feature">
      <img src="/resources/img/shougai/img3.png" width="200" height="200" alt="画像">
    </div>
    <div class="caption">
      <p class="title">休業に関する損害</p>
      <p class="text">事故によるけがで，治癒あるいは症状固定までのあいだ，働くことができず収入が減少した場合の損害です。給与所得者や事業所得者だけでなく，主婦（主夫）など家事従事者にも認められます。</p>
    </div>
  </a>
  <a href="#" class="btn_index">
    <div class="feature">
      <img src="/resources/img/shougai/img4.png" width="200" height="200" alt="画像">
    </div>
    <div class="caption">
      <p class="title">休業に関する損害</p>
      <p class="text">事故によるけがで，治癒あるいは症状固定までのあいだ，働くことができず収入が減少した場合の損害です。給与所得者や事業所得者だけでなく，主婦（主夫）など家事従事者にも認められます。</p>
    </div>
  </a>
  <a href="#" class="btn_index">
    <div class="feature">
      <img src="/resources/img/shougai/img5.png" width="200" height="200" alt="画像">
    </div>
    <div class="caption">
      <p class="title">休業に関する損害</p>
      <p class="text">事故によるけがで，治癒あるいは症状固定までのあいだ，働くことができず収入が減少した場合の損害です。給与所得者や事業所得者だけでなく，主婦（主夫）など家事従事者にも認められます。</p>
    </div>
  </a>
</div>
```
*/
/* アーカイブページにあるindexボタン
---------------------------*/
.btn_index {
  border-radius: 7px;
  width: 100%;
  text-decoration: none;
  box-shadow: 5px 5px #d9d9d9;
  font-size: 1.4rem;
  display: table;
  border: 1px solid #dddddd;
  padding: 15px 0 20px 0;
  position: relative;
  margin-bottom: 20px;
}

.btn_index:after {
  content: "";
  color: #0e8ce0;
  font-size: 2.5rem;
  content: "";
  font-family: "fontello";
  font-style: normal;
  right: 23px;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}

.btn_index .feature {
  display: table-cell;
  vertical-align: middle;
  width: 147px;
  padding-left: 10px;
  padding: 10px 0 0 10px;
}

.btn_index .feature img {
  width: 100%;
  height: auto;
}

.btn_index .caption {
  padding: 0 74px 0 23px;
  display: table-cell;
  vertical-align: middle;
}

.btn_index .caption .title {
  margin-bottom: .3em;
  font-size: 2rem;
  color: #0e8ce0;
  font-weight: bold;
}

.btn_index .caption .text {
  margin-bottom: 0;
  line-height: 2.1;
  color: #292f36;
}

.btn_index:hover {
  background-color: #f4f9fc;
}

@media screen and (max-width: 640px) {
  .btn_index {
    height: 90px;
    padding: 0;
    margin-bottom: 10px;
    box-shadow: 3px 3px #d9d9d9;
  }
  .btn_index:after {
    right: 10px;
  }
  .btn_index .feature {
    width: 90px;
    padding: 10px 0 0 10px;
  }
  .btn_index .caption {
    padding: 0 26px 0 10px;
  }
  .btn_index .caption .title {
    font-size: 1.5rem;
  }
  .btn_index .caption .text {
    display: none;
  }
}

/* btn_initial
---------------------------*/
.btn_initial {
  border-radius: 5px;
  border: 2px solid #0e8ce0;
  display: inline-block;
  color: #0e8ce0;
  padding: 5px 10px;
  font-size: 1.6rem;
  font-weight: bold;
  text-decoration: none;
  line-height: 1.6;
}

.btn_initial:hover {
  color: #fff;
  background-color: #0e8ce0;
}

@media screen and (max-width: 640px) {
  .btn_initial {
    font-size: 1.4rem;
    padding: 2px 6px;
  }
}

.btn_initial.disabled:hover {
  background-color: #fff;
  color: #0e8ce0;
}

/* #styleguide

btn_index2
```
<div class="btn_index2_wrap">
  <ul>
    <li class="btn_index2">
      <a href="/knowledge/jidousha.html">
        <div class="btn_inner">
          <img src="/resources/img/knowledge/jidousha/img1.jpg" width="480" height="480" alt="自動車保険イメージ">
          <p class="btn_title">自動車保険について<br><span class="sub">(自賠責保険と任意保険の違い)</span></p>
        </div>
      </a>
    </li>
    <li class="btn_index2">
      <a href="/knowledge/kenkou.html">
        <div class="btn_inner">
          <img src="/resources/img/knowledge/kenkou/img1.jpg" width="480" height="480" alt="健康保険イメージ">
          <p class="btn_title">交通事故で<br>健康保険を使うには</p>
        </div>
      </a>
    </li>
    <li class="btn_index2">
      <a href="/knowledge/rousai.html">
        <div class="btn_inner">
          <img src="/resources/img/knowledge/rousai/img1.jpg" width="480" height="480" alt="労災保険イメージ">
          <p class="btn_title">交通事故で<br>労災保険を使うには</p>
        </div>
      </a>
    </li>
  </ul>
</div>
```
*/
/* knowledgeに使われているリンクボタン
-------------------------------------*/
.btn_index2_wrap ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

@media screen and (max-width: 640px) {
  .btn_index2_wrap ul {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-flow: column nowrap;
            flex-flow: column nowrap;
  }
}

.btn_index2_wrap .btn_title {
  margin-bottom: 0;
}

.btn_index2_wrap .btn_title .sub {
  font-size: 1.5rem;
  font-weight: normal;
}

@media screen and (max-width: 640px) {
  .btn_index2_wrap .btn_title .sub {
    font-size: 1.2rem;
    line-height: 1.3;
  }
}

.btn_index2 {
  width: 49%;
  margin-bottom: 14px;
  position: relative;
}

@media screen and (max-width: 640px) {
  .btn_index2 {
    width: 100%;
    margin-bottom: 10px;
  }
}

.btn_index2::after {
  content: "";
  position: absolute;
  content: "";
  font-family: "fontello";
  font-style: normal;
  color: #0e8ce0;
  font-size: 2rem;
  right: 13px;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}

.btn_index2 a {
  display: block;
  text-decoration: none;
  color: #0e8ce0;
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 1.3;
  padding: 10px 25px 10px 10px;
  border-radius: 7px;
  border: 1px solid #ddd;
  box-shadow: 2px 2px #d9d9d9;
}

.btn_index2 a:hover {
  background: #f4f9fc;
}

@media screen and (max-width: 640px) {
  .btn_index2 a {
    font-size: 15px;
    line-height: 1.07;
  }
}

.btn_index2 .btn_inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.btn_index2 .btn_inner img {
  width: 70px;
  height: 70px;
  margin-right: 10px;
}

@media screen and (max-width: 640px) {
  .btn_index2 .btn_inner img {
    width: 60px;
    height: 60px;
  }
}

/*
#styleguide

TOPと事例の詳細ページで使われてるボタン。
```
<ul class="btn_caseList">
  <li>
    <a href="/case/head.html" class="btn_case">
      <div class="btn_case_inner">
        <div class="btn_case_head">頭部<span class="text_small">眼・耳・鼻・口・顔・脳</span></div>
        <div class="btn_case_body"><img src="/resources/img/common/icon/icon_head.png" alt=""></div>
      </div>
    </a>
  </li>
  <li>
    <a href="/case/neck.html" class="btn_case">
      <div class="btn_case_inner">
        <div class="btn_case_head">頸部</div>
        <div class="btn_case_body"><img src="/resources/img/common/icon/icon_neck.png" alt=""></div>
      </div>
    </a>
  </li>
  <li>
    <a href="/case/body.html" class="btn_case">
      <div class="btn_case_inner">
        <div class="btn_case_head"><span>体幹・脊柱</span><span class="text_small">胸部・背部・腰部・臀部・脊柱</span></div>
        <div class="btn_case_body"><img src="/resources/img/common/icon/icon_body.png" alt=""></div>
      </div>
    </a>
  </li>
  <li>
    <a href="/case/mind.html" class="btn_case">
      <div class="btn_case_inner">
        <div class="btn_case_head"><span>心</span><span class="text_small">心的外傷</span></div>
        <div class="btn_case_body"><img src="/resources/img/common/icon/icon_heart.png" alt=""></div>
      </div>
    </a>
  </li>
  <li>
    <a href="/case/upper.html" class="btn_case">
      <div class="btn_case_inner">
        <div class="btn_case_head"><span>上肢</span><span class="text_small">肩から手指まで</span></div>
        <div class="btn_case_body"><img src="/resources/img/common/icon/icon_hand.png" alt=""></div>
      </div>
    </a>
  </li>
  <li>
    <a href="/case/lower.html" class="btn_case">
      <div class="btn_case_inner">
        <div class="btn_case_head"><span>下肢</span><span class="text_small">股から足指まで</span></div>
        <div class="btn_case_body"><img src="/resources/img/common/icon/icon_foot.png" alt=""></div>
      </div>
    </a>
  </li>
</ul>
```
*/
.btn_caseList {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

@media screen and (min-width: 641px), print {
  .btn_caseList {
    margin: 0 0 0 -3%;
  }
  .btn_caseList > li {
    max-width: 33.3333%;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 33.3333%;
            flex: 0 0 33.3333%;
    padding: 20px 0 0 3%;
  }
  .btn_caseList > li:nth-child(-n+3) {
    padding-top: 0;
  }
}

@media screen and (max-width: 640px) {
  .btn_caseList {
    margin: 0 0 0 -7px;
  }
  .btn_caseList > li {
    max-width: 50%;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
            flex: 0 0 50%;
    padding: 3.5% 0 0 8px;
  }
  .btn_caseList > li:nth-child(-n+2) {
    padding-top: 0;
  }
}

.btn_case {
  display: block;
  width: 100%;
  box-shadow: 2px 2px #d9d9d9;
  border: 1px solid #dddddd;
  border-radius: 6px;
  text-decoration: none;
  background-color: #fff;
}

.btn_case:hover {
  opacity: 0.7;
}

.btn_case .btn_case_inner {
  text-align: center;
  padding: 4px 4px 0;
}

.btn_case .btn_case_head {
  height: 44px;
  background-color: #305889;
  border-radius: 3px;
  color: #fff;
  line-height: 1.1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.btn_case .btn_case_head > span {
  font-size: 1.8rem;
  font-weight: bold;
}

.btn_case .btn_case_head .text_small {
  display: inline-block;
  font-size: 1.1rem;
  font-weight: normal;
  line-height: 1.6;
}

.btn_case .btn_case_body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.btn_case .btn_case_body > img {
  width: auto;
  height: 60px;
}

@media screen and (max-width: 640px) {
  .btn_case .btn_case_head > span {
    font-size: 1.2rem;
  }
  .btn_case .btn_case_head .text_small {
    font-size: 1rem;
    letter-spacing: -.1em;
  }
  .btn_case .btn_case_body > img {
    height: 36px;
  }
}

/*
#styleguide

TOPと事例の詳細ページで使われてるボタン。
```
<div class="btn_case_numberList_wrap">
  <ul class="btn_case_numberList">
    <li>
      <a href="/case/residual-14.html" class="btn_case_number"><span class="text_num">14</span> 級</a>
    </li>
    <li>
      <a href="/case/residual-13.html" class="btn_case_number"><span class="text_num">13</span> 級</a>
    </li>
    <li>
      <a href="/case/residual-12.html" class="btn_case_number"><span class="text_num">12</span> 級</a>
    </li>
    <li>
      <a href="/case/residual-11.html" class="btn_case_number"><span class="text_num">11</span> 級</a>
    </li>
    <li>
      <a href="/case/residual-10.html" class="btn_case_number"><span class="text_num">10</span> 級</a>
    </li>
    <li>
      <a href="/case/residual-9.html" class="btn_case_number"><span class="text_num">9</span> 級</a>
    </li>
    <li>
      <a href="/case/residual-8.html" class="btn_case_number"><span class="text_num">8</span> 級</a>
    </li>
    <li>
      <a href="/case/residual-7.html" class="btn_case_number"><span class="text_num">7</span> 級</a>
    </li>
    <li>
      <a href="/case/residual-5.html" class="btn_case_number"><span class="text_num">5</span> 級</a>
    </li>
    <li>
      <a href="/case/residual-4.html" class="btn_case_number"><span class="text_num">4</span> 級</a>
    </li>
    <li>
      <a href="/case/residual-3.html" class="btn_case_number"><span class="text_num">3</span> 級</a>
    </li>
  </ul>
</div>
<ul class="btn_case_numberList type2col">
  <li>
    <a href="/case/tokuyaku-bentoku.html" class="btn_case_number"><span class="text">弁護士費用特約あり</span></a>
  </li>
  <li>
    <a href="/case/residual-applicable.html" class="btn_case_number"><span class="text">後遺障害あり</span></a>
  </li>
</ul>
```
*/
.btn_case_numberList_wrap {
  border-bottom: 1px solid #ddd;
  padding-bottom: 20px;
  margin-bottom: 20px;
}

.btn_case_numberList {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

@media screen and (min-width: 641px), print {
  .btn_case_numberList {
    margin: 0 0 0 -2.5%;
  }
  .btn_case_numberList > li {
    max-width: 20%;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 20%;
            flex: 0 0 20%;
    padding: 16px 0 0 2.5%;
  }
  .btn_case_numberList > li:nth-child(-n+5) {
    padding-top: 0;
  }
}

@media screen and (max-width: 640px) {
  .btn_case_numberList {
    margin: 0 0 0 -7px;
  }
  .btn_case_numberList > li {
    max-width: 25%;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 25%;
            flex: 0 0 25%;
    padding: 2.5% 0 0 8px;
  }
  .btn_case_numberList > li:nth-child(-n+4) {
    padding-top: 0;
  }
}

.btn_case_numberList.type2col > li {
  max-width: 50%;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 50%;
          flex: 0 0 50%;
}

.btn_case_numberList.type2col > li:nth-child(-n+2) {
  padding-top: 0;
}

.btn_case_numberList.type2col > li .btn_case_number {
  padding: 9px 0;
}

@media screen and (max-width: 640px) {
  .btn_case_numberList.type2col > li {
    max-width: 50%;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
            flex: 0 0 50%;
  }
  .btn_case_numberList.type2col > li:nth-child(-n+2) {
    padding-top: 0;
  }
}

.btn_case_number {
  display: inline-block;
  font-size: 1.6rem;
  text-align: center;
  text-decoration: none;
  border-radius: 8px;
  padding: 5px 10px 5px 0;
  width: 100%;
  border: 1px solid #ddd;
  box-shadow: 2px 2px #d9d9d9;
  margin-bottom: 2px;
  color: #305889;
  position: relative;
  line-height: 1.6;
  background-color: #fff;
}

.btn_case_number:hover {
  opacity: 0.7;
}

.btn_case_number:after {
  content: "";
  font-family: "fontello";
  font-style: normal;
  position: absolute;
  top: 50%;
  right: 13px;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  font-size: 2.2rem;
  color: #0e8ce0;
}

.btn_case_number .text {
  font-weight: bold;
  font-size: 2rem;
  line-height: 1.6;
}

.btn_case_number .text_num {
  font-weight: bold;
  font-size: 2.4rem;
  line-height: 1.6;
}

@media screen and (max-width: 640px) {
  .btn_case_number {
    font-size: 1rem;
    border-radius: 4px;
    box-shadow: 1px 1px #d9d9d9;
  }
  .btn_case_number .text_num {
    font-size: 1.5rem;
  }
  .btn_case_number .text {
    font-size: 1.2rem;
  }
  .btn_case_number:after {
    font-size: 1.1rem;
    right: 6px;
  }
}

/* btn_adobe
---------------------------*/
.btn_adobe_wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.btn_adobe_wrap .btn_adobe {
  padding-right: 20px;
}

.btn_adobe_wrap .btn_adobe img {
  vertical-align: bottom;
}

.btn_adobe_wrap .text {
  margin-bottom: 0;
  font-size: 1.2rem;
}

@media screen and (max-width: 640px) {
  .btn_adobe_wrap {
    display: none;
  }
  .btn_adobe_wrap .btn_adobe img {
    width: 139px;
  }
}

/* pageTopbutton
---------------------------*/
.btn_pageTop {
  display: block;
  padding: 6px 5px;
  width: 40px;
  height: 42px;
  position: fixed;
  z-index: 10;
  bottom: 110px;
  right: 80px;
  border: 2px solid #0e8ce0;
  border-radius: 6px;
  background-color: #fff;
  box-shadow: 0 3px 0 #0e8ce0;
  margin-bottom: 3px;
  text-align: center;
  text-decoration: none;
}

.btn_pageTop > i {
  font-size: 1.7rem;
  color: #0e8ce0;
  line-height: 1;
}

@media screen and (min-width: 641px), print {
  .btn_pageTop:hover {
    box-shadow: 0 1px 0 #0e8ce0;
    bottom: 108px;
  }
}

@media screen and (max-width: 640px) {
  .btn_pageTop {
    bottom: 150px;
    right: 15px;
  }
  .is_navbarShow .btn_pageTop {
    display: none;
  }
}

/*
#overview
Text
*/
/*
#styleguide

text_marker
```
<p class="text_marker type1">text_marker type1</p>
<p class="text_marker type2">text_marker type2</p>
```
*/
.text_marker {
  font-weight: bold;
  display: inline;
}

.text_marker.type1 {
  background: -webkit-linear-gradient(top, transparent 0%, transparent 67%, #ffcf28 67%, #ffcf28 100%);
  background: linear-gradient(to bottom, transparent 0%, transparent 67%, #ffcf28 67%, #ffcf28 100%);
}

.text_marker.type2 {
  background: -webkit-linear-gradient(top, transparent 0%, transparent 67%, #fccfad 67%, #fccfad 100%);
  background: linear-gradient(to bottom, transparent 0%, transparent 67%, #fccfad 67%, #fccfad 100%);
}

/*
#styleguide

text_bold
```
<p class="text_bold">text_bold</p>
```
*/
.text_bold {
  font-weight: bold;
}

/*
#styleguide

text_center
```
<p class="text_center">text_center</p>
```
*/
.text_center {
  text-align: center;
}

/*
#styleguide

text_right
```
<p class="text_right">text_right</p>
```
*/
.text_right {
  text-align: right;
}

/*
#styleguide

text_small
```
<p class="text_small">text_small</p>
```
*/
.text_small {
  font-size: 1rem;
}

/*
#styleguide

text_medium
```
<p class="text_medium">text_medium</p>
```
*/
.text_medium {
  font-size: 1.6rem;
}

/*
#styleguide

text_large
```
<p class="text_large">text_large</p>
```
*/
.text_large {
  font-size: 2rem;
}

/*
#styleguide

text_em
```
<p class="text_em">text_em</p>
```
*/
.text_em {
  color: #d95a38;
  font-weight: bold;
}

/*
#styleguide

text_note
```
<p class="text_note">text_note</p>
```
*/
.text_note {
  color: #999999;
}

/*
#styleguide

txt_caseProfile
交通事故の解決事例集で使用しているプロフィールエリアです。
```
<div class="txt_caseProfile"><p>SAMPLE PROFILE</p></div>
```
*/
.txt_caseProfile {
  background: #f6f6f6;
  padding: 10px 20px;
  margin-bottom: 15px;
}

@media screen and (max-width: 640px) {
  .txt_caseProfile {
    padding: 5px 10px;
  }
}

.txt_caseProfile p {
  margin-bottom: 0;
}

/*
#styleguide

text_annotation
交通事故被害の弁護士費用で使用。
```
<ul>
  <li class="text_annotation">※訴訟を提起する場合は，訴訟費用が別途かかります。詳しくはお問い合わせください。</li>
  <li class="text_annotation">※弁護士費用が高額となる死亡/重度障害案件に関しては別途ご相談ください。</li>
  <li class="text_annotation">※委任事務を終了するまでは契約を解除できます。この場合，解除までの費用として事案の進行状況に応じた弁護士費用をお支払いただきます。</li>
  <li class="text_annotation">※税法の改正により消費税等の税率が変動した場合，改正以降における消費税相当額は変動後の税率により計算します。</li>
</ul>
```
*/
.text_annotation {
  font-size: 1.3rem;
}

@media screen and (max-width: 640px) {
  .text_annotation {
    font-size: 1.2rem;
  }
}

/*
#overview
Icon
*/
/*
#styleguide

Icon
```
<div class="grid grid_gutters small_grid_1of2">
  <div class="grid_cell"><a href="#" class="icon-up-big">\e800</a></div>
  <div class="grid_cell"><a href="#" class="icon-location">\e801</a></div>
  <div class="grid_cell"><a href="#" class="icon-edit">\e802</a></div>
  <div class="grid_cell"><a href="#" class="icon-right-hand">\e803</a></div>
  <div class="grid_cell"><a href="#" class="icon-chat">\e804</a></div>
  <div class="grid_cell"><a href="#" class="icon-search">\e805</a></div>
  <div class="grid_cell"><a href="#" class="icon-right-dir">\e806</a></div>
  <div class="grid_cell"><a href="#" class="icon-phone">\e807</a></div>
  <div class="grid_cell"><a href="#" class="icon-cancel">\e808</a></div>
  <div class="grid_cell"><a href="#" class="icon-download">\e809</a></div>
  <div class="grid_cell"><a href="#" class="icon-ok">\e80a</a></div>
  <div class="grid_cell"><a href="#" class="icon-link-ext">\f08e</a></div>
  <div class="grid_cell"><a href="#" class="icon-mail-alt">\f0e0</a></div>
  <div class="grid_cell"><a href="#" class="icon-doc-text">\f0f6</a></div>
  <div class="grid_cell"><a href="#" class="icon-angle-double-right">\f101</a></div>
  <div class="grid_cell"><a href="#" class="icon-angle-left">\f104</a></div>
  <div class="grid_cell"><a href="#" class="icon-angle-right">\f105</a></div>
  <div class="grid_cell"><a href="#" class="icon-angle-up">\f106</a></div>
  <div class="grid_cell"><a href="#" class="icon-angle-down">\f107</a></div>
  <div class="grid_cell"><a href="#" class="icon-angle-circled-left">\f137</a></div>
  <div class="grid_cell"><a href="#" class="icon-angle-circled-right">\f138</a></div>
  <div class="grid_cell"><a href="#" class="icon-angle-circled-up">\f139</a></div>
  <div class="grid_cell"><a href="#" class="icon-angle-circled-down">\f13a</a></div>
  <div class="grid_cell"><a href="#" class="icon-yen">\f157</a></div>
  <div class="grid_cell"><a href="#" class="icon-doc-inv">\f15b</a></div>
  <div class="grid_cell"><a href="#" class="icon-file-pdf">\f1c1</a></div>
</div>
```
*/
/* icon (font)
--------------------------------------------------------------*/
[class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  font-variant: normal;
  text-transform: none;
  line-height: 1em;
  margin-left: .2em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-up-big:before {
  content: '\e800';
}

/* '' */
.icon-location:before {
  content: '\e801';
}

/* '' */
.icon-edit:before {
  content: '\e802';
}

/* '' */
.icon-right-hand:before {
  content: '\e803';
}

/* '' */
.icon-chat:before {
  content: '\e804';
}

/* '' */
.icon-search:before {
  content: '\e805';
}

/* '' */
.icon-right-dir:before {
  content: '\e806';
}

/* '' */
.icon-phone:before {
  content: '\e807';
}

/* '' */
.icon-cancel:before {
  content: '\e808';
}

/* '' */
.icon-download:before {
  content: '\e809';
}

/* '' */
.icon-ok:before {
  content: '\e80a';
}

/* '' */
.icon-link-ext:before {
  content: '\f08e';
}

/* '' */
.icon-mail-alt:before {
  content: '\f0e0';
}

/* '' */
.icon-doc-text:before {
  content: '\f0f6';
}

/* '' */
.icon-angle-double-right:before {
  content: '\f101';
}

/* '' */
.icon-angle-left:before {
  content: '\f104';
}

/* '' */
.icon-angle-right:before {
  content: '\f105';
}

/* '' */
.icon-angle-up:before {
  content: '\f106';
}

/* '' */
.icon-angle-down:before {
  content: '\f107';
}

/* '' */
.icon-angle-circled-left:before {
  content: '\f137';
}

/* '' */
.icon-angle-circled-right:before {
  content: '\f138';
}

/* '' */
.icon-angle-circled-up:before {
  content: '\f139';
}

/* '' */
.icon-angle-circled-down:before {
  content: '\f13a';
}

/* '' */
.icon-yen:before {
  content: '\f157';
}

/* '' */
.icon-doc-inv:before {
  content: '\f15b';
}

/* '' */
.icon-file-pdf:before {
  content: '\f1c1';
}

/* '' */
/*
#styleguide

Icon FAQ
```
<i class="icon_faq typeQ">Q</i>
<i class="icon_faq typeA">A</i>
```
*/
.icon_faq {
  width: 37px;
  height: 37px;
  border-radius: 50%;
  color: #fff;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  font-weight: bold;
  font-size: 1.8rem;
  line-height: 37px;
}

@media screen and (max-width: 640px) {
  .icon_faq {
    width: 34px;
    height: 34px;
    line-height: 35px;
    font-size: 1.6rem;
  }
}

.icon_faq.typeQ {
  background: #305889;
}

.icon_faq.typeA {
  background: #ff6b6b;
}

.icon_faq.large {
  width: 42px;
  height: 42px;
}

/*
#overview
List
*/
/*
#styleguide

list
```
<ul class="list_check">
  <li>チェック</li>
  <li>チェック</li>
  <li>チェック</li>
</ul>

<ul class="list_check2">
  <li>チェック</li>
  <li>チェック</li>
  <li>チェック</li>
</ul>

```
*/
.list_check > li {
  padding-left: 20px;
  background: url("/resources/img/common/icon/icon_check.png") no-repeat left center;
}

.list_check2 li {
  padding-left: 36px;
  font-size: 1.6rem;
  line-height: 2;
  position: relative;
}

@media screen and (max-width: 640px) {
  .list_check2 li {
    font-size: 1.2rem;
    line-height: 1.54;
    padding-left: 23px;
    font-weight: normal;
  }
  .list_check2 li:nth-child(n+2) {
    margin-top: 5px;
  }
}

.list_check2 li:before {
  content: "";
  display: inline-block;
  width: 17px;
  height: 15px;
  background: url("/resources/img/common/icon/icon_check3.png") no-repeat;
  background-size: contain;
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -8px;
}

@media screen and (max-width: 640px) {
  .list_check2 li:before {
    width: 15px;
    height: 13px;
    margin-top: -6px;
  }
}

/*
#styleguide

list
```
<ul class="list_circle">
  <li>リストテキストリストテキストリストテキストリストテキスト<br>
    リストテキストリストテキストリストテキストリストテキストリストテキスト</li>
  <li>リストテキストリストテキストリストテキストリストテキストリストテキストリストテキストリストテキストリストテキスト</li>
  <li>リストテキストリストテキスト</li>
  <li>リストテキスト</li>
</ul>

```
*/
/* list
---------------------------*/
.list_circle {
  margin: 2em 0 2em 13px;
}

.list_circle li,
.list_circle dt {
  text-indent: -13px;
}

.list_circle li::before,
.list_circle dt::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #0e8ce0;
  margin-right: 6px;
  vertical-align: middle;
}

table .list_circle {
  margin: 0 0 0 13px;
}

table .list_circle + p {
  margin-top: 2em;
}

/*
#styleguide

list news
ニュースのリストです。
```
<div class="list_news">
  <dl>
    <dt>2017.03.29</dt>
    <dd><a href="http://www.adire.jp/media/press/2017/0329.html" target="_blank">「てるみくらぶ」から内定を取り消された皆さまへ　アディーレが、選考なしで採用いたします！</a></dd>
  </dl>
  <dl>
    <dt>2017.03.29</dt>
    <dd><a href="http://www.adire.jp/media/press/2017/0329.html" target="_blank">「てるみくらぶ」から内定を取り消された皆さまへ　アディーレが、選考なしで採用いたします！</a></dd>
  </dl>
</div>
```
*/
/* list news
---------------------------*/
.list_news dl {
  padding: 12px 0;
  border-bottom: 1px dashed #d0d0d0;
}

.list_news dl:after {
  content: "";
  clear: both;
  display: block;
}

.list_news dl:first-child {
  border-top: 1px dashed #d0d0d0;
}

.list_news dt {
  width: 140px;
  float: left;
  clear: left;
}

@media screen and (max-width: 640px) {
  .list_news dt {
    float: none;
    width: 100%;
    margin-bottom: 2px;
  }
}

.list_news dd {
  padding-left: 140px;
}

@media screen and (max-width: 640px) {
  .list_news dd {
    padding-left: 0;
  }
}

.list_news dd a {
  color: #305889;
  text-decoration: underline;
}

.list_news dd a:hover {
  text-decoration: none;
}

/* list Relation
---------------------------*/
/*
#styleguide

list Relation
関連リンク一覧リスト
```
<ul class="list_relationLink">
  <li><a href="#">物損事故から人身事故へ切り替えるには具体的にどうしたらよいのですか？</a></li>
  <li><a href="#">警察から「交通事故から時間が経っているので，物損事故から人身事故への切り替えはできない」と言われてしまいました。どうしたらよいですか？</a></li>
  <li><a href="#">加害者は，どうして交通事故を物損事故扱いにしようとするのですか？</a></li>
</ul>

<ul class="list_relationLink typeAlternate">
  <li><a href="#">物損事故から人身事故へ切り替えるには具体的にどうしたらよいのですか？</a></li>
  <li><a href="#">警察から「交通事故から時間が経っているので，物損事故から人身事故への切り替えはできない」と言われてしまいました。どうしたらよいですか？</a></li>
  <li><a href="#">加害者は，どうして交通事故を物損事故扱いにしようとするのですか？</a></li>
</ul>

<aside>
  <h2 class="headline3">関連ページ</h2>
  <ul class="list_relationLink typeFaq">
    <li><a href="#"><i class="icon_faq typeQ">Q</i><span>交通事故に遭ったら，まずどうすればいいのでしょうか？</span></a></li>
    <li><a href="#"><i class="icon_faq typeQ">Q</i><span>警察への交通事故の届け出が物損事故扱いになっています。今後の手続において不利にはなりませんか？</span></a></li>
    <li><a href="#"><span>物損事故から人身事故へ切り替えるには具体的にどうしたらよいのですか？</span></a></li>
    <li><a href="#"><span>警察から「交通事故から時間が経っているので，物損事故から人身事故への切り替えはできない」と言われてしまいました。どうしたらよいですか？</span></a></li>
    <li><a href="#"><span>加害者は，どうして交通事故を物損事故扱いにしようとするのですか？</span></a></li>
  </ul>
</aside>
```
*/
.list_relationLink {
  margin-bottom: 2em;
}

.list_relationLink li {
  border-bottom: dotted 2px #d0d0d0;
}

.list_relationLink a {
  display: block;
  color: #305889;
  text-decoration: none;
  padding: 12px 43px 12px 7px;
  position: relative;
}

.list_relationLink a:hover {
  background: #eaeef3;
}

.list_relationLink a:after {
  content: "";
  font-family: "fontello";
  font-style: normal;
  color: #305889;
  font-size: 1.8rem;
  position: absolute;
  top: 50%;
  right: 7px;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}

.list_relationLink .icon_faq {
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  margin-right: 20px;
}

.list_relationLink.typeAlternate li:nth-child(even) {
  background: #f6f7f7;
}

.list_relationLink.typeFaq a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

/*
#styleguide

list definition
dlのリストです。
デフォルトでは縦並びの配置でdlに.columnを追加すると、ddがdtの横に配置されます。
```
<dl class="list_definition column">
<dt>資格</dt>
<dd>弁護士</dd>
<dt>所属</dt>
<dd>青森県弁護士会</dd>
<dt>出身</dt>
<dd>東京都</dd>
</dl>
```
*/
/* definition
---------------------------*/
.list_definition {
  line-height: 2;
}

.list_definition dt {
  font-weight: bold;
}

.list_definition.column dt {
  margin-right: 16px;
  float: left;
}

/* list_initial
---------------------------*/
/*
#styleguide

list_initial
用語集で使用しているリスト
```
<div class="list_initial_wrap">
  <p class="text_initial">頭文字で探す</p>
  <ul class="list_initial">
    <li><a href="#target1" class="btn_initial">あ</a></li>
    <li><a href="#target2" class="btn_initial">い</a></li>
    <li><a href="#target3" class="btn_initial">う</a></li>
    <li><a href="#target4" class="btn_initial">え</a></li>
    <li><span class="btn_initial disabled">お</span></li>
  </ul>
</div>
```
*/
.list_initial_wrap {
  margin: 25px 0;
  display: table;
}

.text_initial {
  display: table-cell;
  vertical-align: middle;
  padding-right: 20px;
  color: #0e8ce0;
}

.list_initial {
  display: table-cell;
}

.list_initial > li {
  margin-right: 9px;
  display: inline-block;
}

.list_initial > li:last-child {
  margin-right: 0;
}

.list_initial > li .disabled {
  opacity: .7;
}

@media screen and (max-width: 640px) {
  .list_initial > li {
    margin-bottom: .2em;
    margin-right: 0;
  }
  .list_initial > li > a {
    font-size: 1.4rem;
    line-height: 1.6;
    padding: 2px 6px;
  }
}

/* list_contact
---------------------------*/
/*
#styleguide

list_contact
相談窓口などの連絡先リスト
```
<dl class="list_contact">
  <dt>MAIL：</dt>
  <dd><img src="/resources/img/common/mail.gif" width="91" height="13" alt="メールアドレス"></dd>
  <dt>TEL：</dt>
  <dd>03-5950-0268</dd>
  <dt>FAX：</dt>
  <dd>03-5950-0269</dd>
  <dt>郵送：</dt>
  <dd>〒170-6033　東京都豊島区東池袋3-1-1　サンシャイン60</dd>
</dl>
```
*/
.list_contact:after {
  content: "";
  clear: both;
  display: block;
}

.list_contact dt {
  float: left;
  clear: left;
}

.list_contact img {
  width: auto;
}

/* list_number
---------------------------*/
/*
#styleguide

list_number
後遺障害の基礎知識などで使用しているナンバリング用
```
<ol class="list_number">
  <li>
    <i class="num"><img src="/resources/img/inspection/icon_number1.png" width="36" height="36" alt="1"></i>
    <span class="multi">神経学的検査</span>
    <ul>
      <li><a href="/dictionary/ka.html#kashishintenkenjo">下肢伸展挙上テスト（ＳＬＲ）</a></li>
      <li><a href="/dictionary/ta.html#daitaishinkei">大腿神経伸長テスト（ＦＮＳ）</a></li>
    </ul>
  </li>
  <li>
    <i class="num"><img src="/resources/img/inspection/icon_number2.png" width="36" height="36" alt="2"></i>
    <span class="multi">腱反射テスト</span>
    <ul>
      <li><a href="/dictionary/#achilles">アキレス腱反射テスト（ＡＴＲ）</a></li>
      <li><a href="/dictionary/sa.html#shitsugaikeihansha">膝蓋腱反射テスト（ＰＴＲ）</a></li>
    </ul>
  </li>
  <li>
    <i class="num"><img src="/resources/img/inspection/icon_number3.png" width="36" height="36" alt="3"></i>
    <span class="multi">病的反射テスト</span>
    <ul>
      <li><a href="/dictionary/ha.html#hizaclonus">膝クローヌステスト</a></li>
      <li><a href="/dictionary/#ashiclonus">足クローヌステスト</a></li>
      <li><a href="/dictionary/ha.html#babinski">バビンスキー反射テスト</a></li>
    </ul>
  </li>
  <li>
    <i class="num"><img src="/resources/img/inspection/icon_number4.png" width="36" height="36" alt="4"></i>
    <span><a href="/dictionary/ta.html#toshukinryokukensa">徒手筋力検査（ＭＭＴ）</a></span>
  </li>
  <li>
    <i class="num"><img src="/resources/img/inspection/icon_number5.png" width="36" height="35" alt="5"></i>
    <span><a href="/dictionary/ka.html#kinishuku">筋萎縮検査</a></span>
  </li>
  <li>
    <i class="num"><img src="/resources/img/inspection/icon_number6.png" width="36" height="36" alt="6"></i>
    <span><a href="/dictionary/ta.html#chikakukensa">知覚検査</a></span>
  </li>
</ol>
```
*/
.list_number {
  padding-left: 36px;
}

.list_number > li {
  margin-top: 6px;
}

.list_number > li:first-child {
  margin-top: 0;
}

.list_number li {
  position: relative;
}

.list_number li .num {
  display: inline-block;
  width: 21px;
  position: absolute;
  top: 4px;
  left: -35px;
}

.list_number li .num img {
  width: 100%;
  height: auto;
}

.list_number li > span {
  color: #21262b;
  font-weight: bold;
}

.list_number li a {
  color: #305889;
  text-decoration: underline;
}

.list_number li a:hover {
  text-decoration: none;
}

@media screen and (max-width: 640px) {
  .list_number > li {
    margin-top: 12px;
    font-size: 1.2rem;
  }
  .list_number > li .num {
    width: 17px;
  }
  .list_number > li > span {
    font-size: 1.2rem;
    line-height: 1.25;
  }
}

/*
#overview
Table
*/
/* Table
--------------------------------------------------------------*/
.table {
  width: 100%;
  margin: 2em 0;
}

.table caption {
  text-align: left;
}

.table th, .table td {
  border: solid 1px #c2c2c2;
  padding: 12px 16px;
  vertical-align: middle;
}

@media screen and (max-width: 640px) {
  .table th, .table td {
    padding: 3px 10px;
  }
}

.table thead th, .table thead td {
  text-align: center;
  padding-top: 25px;
  padding-bottom: 25px;
}

@media screen and (max-width: 640px) {
  .table thead th, .table thead td {
    padding-top: 5px;
    padding-bottom: 5px;
  }
}

.table .alignMiddle {
  vertical-align: middle;
}

@media screen and (max-width: 640px) {
  .table_font_sp td, .table_font_sp th {
    font-size: 1.1rem;
  }
}

.caption + .grid .table {
  margin-top: 0;
}

/* Table Basic
--------------------------------------------------------------*/
/*
#styleguide

Table Basic
標準テーブル。
各列の幅用のクラスは_base.scssに1%～50%まで用意しています。
w5per→5%
w30per→30%

```
<table class="table table_basic">
  <caption>表のタイトル</caption>
  <colgroup>
    <col class="w30per">
    <col class="w70per">
  </colgroup>
  <thead>
    <tr>
      <th>テキストテキストテキストテキストテキスト</th>
      <th>テキスト</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>テキスト</th>
      <td>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</td>
    </tr>
    <tr>
      <th>テキスト</th>
      <td>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</td>
    </tr>
  </tbody>
</table>
```
*/
.table_basic thead th, .table_basic thead td {
  background: #dedede;
}

.table_basic tbody th {
  background: #f6f6f6;
  text-align: center;
}

.table_basic tbody td {
  text-align: left;
}

.table_basic tbody td.text_center {
  text-align: center;
}

.table_basic.typeOffice .cell_inner {
  position: relative;
}

.table_basic.typeOffice .cell_btn {
  position: absolute;
  right: 0;
  top: 8px;
}

/* Table Sex
--------------------------------------------------------------*/
/*
#styleguide

Table Sex
性別用テーブル。
各列の幅用のクラスは_base.scssに1%～50%まで用意しています。
w5per→5%
w30per→30%

```
<table class="table table_sex typeMan">
  <colgroup>
    <col class="w20per">
    <col class="w30per">
    <col class="w20per">
    <col class="w30per">
  </colgroup>
  <thead>
    <tr>
      <th colspan="4">男</th>
    </tr>
    <tr>
      <th>年齢</th>
      <th>平均余命</th>
      <th>年齢</th>
      <th>平均余命</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>0週</th>
      <td>80.21</td>
      <th>50</th>
      <td>31.92</td>
    </tr>
  </tbody>
</table>

<table class="table table_sex typeWoman">
  <colgroup>
    <col class="w20per">
    <col class="w30per">
    <col class="w20per">
    <col class="w30per">
  </colgroup>
  <thead>
    <tr>
      <th colspan="4">女</th>
    </tr>
    <tr>
      <th>年齢</th>
      <th>平均余命</th>
      <th>年齢</th>
      <th>平均余命</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>0週</th>
      <td>80.21</td>
      <th>50</th>
      <td>31.92</td>
    </tr>
  </tbody>
</table>
```
*/
.table_sex th, .table_sex td {
  text-align: center;
}

.table_sex.typeMan thead th, .table_sex.typeMan thead td {
  background: #d2eff3;
}

.table_sex.typeMan tbody th {
  background: #e8f4f7;
}

.table_sex.typeWoman thead th, .table_sex.typeWoman thead td {
  background: #f5d7db;
}

.table_sex.typeWoman tbody th {
  background: #f8eaec;
}

/* Table Case
--------------------------------------------------------------*/
/*
#styleguide

Table Case
解決事例集用テーブル。
下記ページで使用しています。
/case/01.html
```
<table class="table table_case">
  <colgroup>
    <col class="w23per">
    <col class="w30per">
    <col class="w17per">
    <col class="w30per">
  </colgroup>
  <thead>
    <tr>
      <th>&nbsp;</th>
      <th>提示金額</th>
      <th><span class="pcCont">増額（倍）</span></th>
      <th>弁護士交渉後</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>治療費</th>
      <td>¥0</td>
      <td class="increase"><span class="pcCont">&nbsp;</span></td>
      <td>¥730,000</td>
    </tr>
    <tr>
      <th>入通院慰謝料</th>
      <td>¥400,000</td>
      <td class="increase"><span class="pcCont">3.1</span></td>
      <td>¥730,000</td>
    </tr>
    <tr>
      <th>後遺症慰謝料</th>
      <td>¥450,000</td>
      <td class="increase"><span class="pcCont">3.1</span></td>
      <td>¥730,000</td>
    </tr>
    <tr>
      <th>逸失利益</th>
      <td>¥350,000</td>
      <td class="increase"><span class="pcCont">3.1</span></td>
      <td>¥730,000</td>
    </tr>
    <tr class="total">
      <th>合計</th>
      <td>¥1,200,000</td>
      <td class="increase"><span class="pcCont">3.1</span></td>
      <td>¥730,000</td>
    </tr>
    <tr class="total">
      <th colspan="3">増額分</th>
      <td class="totalNum">¥2,570,000</td>
    </tr>
  </tbody>
</table>
```
*/
.table_case thead th, .table_case thead td {
  background: #dedede;
}

.table_case tbody th, .table_case tbody td {
  text-align: right;
}

.table_case tbody th {
  background: #f6f6f6;
}

.table_case .increase {
  background: url(/resources/img/common/icon/table_arrow_left_pc.png) center center no-repeat;
  text-align: center;
}

@media screen and (max-width: 640px) {
  .table_case .increase {
    background: url(/resources/img/common/icon/table_arrow_left_sp.png) center center/25px auto no-repeat;
  }
}

.table_case .total th {
  background: #d4fafa;
}

.table_case .totalNum {
  font-size: 1.6rem;
}

.table_case .col1 {
  width: 23%;
}

@media screen and (max-width: 640px) {
  .table_case .col1 {
    width: 25%;
  }
}

.table_case .col2, .table_case .col4 {
  width: 30%;
}

@media screen and (max-width: 640px) {
  .table_case .col2, .table_case .col4 {
    width: 33%;
  }
}

.table_case .col3 {
  width: 17%;
}

@media screen and (max-width: 640px) {
  .table_case .col3 {
    width: 6%;
  }
}

/* Table_fraction
--------------------------------------------------------------*/
/*
#styleguide

Table fraction
分数用テーブル。
```
<table class="table_fraction" cellspacing="0">
<tr>
<td class="molecule">（事故前３ヵ月の給与の合計額）</td>
<td rowspan="2" class="rowspan">×（休業日数）＝休業損害</td>
</tr>
<tr>
<td class="denominator">９０</td>
</tr>
</table>
```
*/
.table_fraction {
  font-size: 1.3rem;
  margin: 20px auto;
}

@media screen and (max-width: 640px) {
  .table_fraction {
    font-size: 1.2rem;
  }
}

.table_fraction td {
  padding: 0 2px;
}

.table_fraction .align_middle {
  vertical-align: middle;
}

.table_fraction .molecule {
  text-align: center;
}

.table_fraction .denominator {
  text-align: center;
  border-top: 1px solid #000;
}

/*
#overview
Link
*/
/*
#styleguide

link_blank
```
<p><a href="#" class="link_blank">外部テキスト</a></p>
<p><a href="#" class="link_blank accent">外部テキスト</a></p>
<p><a href="#" class="link_blank accent2">外部テキスト</a></p>
```
*/
.link_blank:after {
  margin: 0 .5em;
  display: inline-block;
  text-decoration: none;
}

.link_blank:after {
  content: "";
  font-family: "fontello";
  font-style: normal;
}

.link_blank.accent {
  color: #305889;
}

.link_blank.accent2 {
  color: #0e8ce0;
}

/*
#styleguide

link_pdf
```
<p><a href="#" class="link_pdf">PDFテキスト</a></p>
```
*/
.link_pdf:after {
  margin: 0 .5em;
  display: inline-block;
  text-decoration: none;
}

.link_pdf:after {
  content: "";
  font-family: "fontello";
  font-style: normal;
}

/*
#styleguide

link_accent
```
<p><a href="#" class="link_accent">本文テキストリンク</a></p>
```
*/
.link_accent {
  color: #305889;
}

/*
#styleguide

link_arrow
```
<p><a href="#" class="link_arrow accent">アイコン付きテキストリンク：ブルー</a></p>
<p><a href="#" class="link_arrow">アイコン付きテキストリンク：オレンジ</a></p>
<p><a href="#" class="link_arrow2">アイコン付きテキストリンク</a></p>
```
*/
.link_arrow {
  text-decoration: none;
}

.link_arrow:after {
  margin: 0 .5em;
  display: inline-block;
  text-decoration: none;
}

.link_arrow:after {
  content: "";
  font-family: "fontello";
  font-style: normal;
}

.link_arrow.accent {
  color: #305889;
}

.link_arrow2:after {
  content: "";
  font-family: "fontello";
  font-style: normal;
}

/*
#styleguide

link_logo
```
<a href="http://www.adire.jp/logo.html" target="_blank" class="link_logo"><img src="/resources/img/common/header/logo_adire_1.svg" alt="弁護士法人 アディーレ法律事務所"></a>
```
*/
.link_logo {
  margin: 6px 0;
}

.link_logo img {
  width: 368px;
  height: auto;
}

@media screen and (max-width: 640px) {
  .link_logo img {
    max-width: 240px;
    width: 100%;
    height: auto;
  }
}

/*
#overview
Box
*/
/*
#styleguide

box
スタンダードなサイト内汎用モジュールのボックスです。
```
<div class="box box_primary">
  <p class="head">ボックスのタイトル</p>
  <div class="text">
    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
  </div>
</div>

<div class="box box_secondary">
  <p class="head">ボックスのタイトル</p>
  <div class="text">
    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
  </div>
  <div class="movie">
    <iframe src="https://www.youtube.com/embed/AC6aDPEhUK0" allowfullscreen></iframe>
  </div>
</div>

```
*/
/* box
--------------------------------------------------------------*/
.box {
  padding: 13px 20px;
  margin: 20px 0;
}

@media screen and (max-width: 640px) {
  .box {
    padding: 8px 15px;
  }
}

.box img {
  max-width: 100%;
  height: auto;
}

.box .head {
  font-weight: bold;
  margin-bottom: 6px;
}

@media screen and (max-width: 640px) {
  .box .head {
    margin-bottom: 4px;
  }
}

.box .text + .movie {
  margin: 13px auto 7px;
}

.box .movie {
  width: 90%;
  position: relative;
  padding-bottom: 50.5%;
}

@media screen and (max-width: 640px) {
  .box .movie {
    width: 100%;
    padding-bottom: 56.2%;
  }
}

.box .movie iframe {
  width: 100%;
  height: 100%;
  position: absolute;
}

.box.box_primary {
  background: #f6f6f6;
}

.box.box_secondary {
  background: #fff;
  border: 1px solid #c2c2c2;
}

/*
#styleguide

box_image
テキストと画像の横並びです。SPでは1カラムになります。
- デフォルト
PC：テキスト右 + 画像左
SP：画像上 + テキスト下

- 「.pc_reverse」をつけると、
PC：画像右 + テキスト左

- 「.sp_reverse」をつけると、
SP：テキスト上 + 画像下

```
<div class="box_image">
  <div class="box_image_img">
    <img src="/resources/img/flow/photo_img.jpg" width="200" height="200" alt="画像">
  </div>
  <div class="box_image_text">
    <p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
    <p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
  </div>
</div>

```
*/
/* box_image
--------------------------------------------------------------*/
.box_image:after {
  content: "";
  clear: both;
  display: block;
}

.box_image .box_image_img {
  display: block;
  margin: 0 0 1em 1.5em;
  float: right;
}

@media screen and (max-width: 640px) {
  .box_image .box_image_img {
    float: none;
    margin: 0;
    width: 100%;
    padding: 0 10%;
  }
}

.box_image .box_image_img img {
  vertical-align: middle;
}

@media screen and (min-width: 641px), print {
  .box_image .box_image_img img {
    max-width: 200px;
    height: auto;
  }
  .box_image .box_image_img .thumb_brochure {
    max-width: 300px;
    height: auto;
  }
}

.box_image .box_image_img .inner {
  background: inherit;
  position: relative;
  z-index: 2;
  margin-left: 20px;
}

@media screen and (max-width: 640px) {
  .box_image .box_image_text {
    margin-top: 2em;
  }
}

.box_image.pc_reverse .box_image_img {
  float: left;
  margin: 0 1.5em 1em 0;
}

@media screen and (max-width: 640px) {
  .box_image.pc_reverse .box_image_img {
    float: none;
    margin: 0;
  }
}

@media screen and (max-width: 640px) {
  .box_image.sp_reverse {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
  }
}

@media screen and (max-width: 640px) {
  .box_image.sp_reverse .box_image_text {
    margin-top: 0;
  }
}

@media screen and (max-width: 640px) {
  .box_image.sp_reverse .box_image_img {
    margin-bottom: 2em;
  }
}

.box_image.noWraparound .box_image_text {
  overflow: hidden;
}

/*
#styleguide

box_gmape


```
<div class="box_gmap">
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3019.090445139587!2d140.737554!3d40.825977!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x5f9b9f1d94db3415%3A0xd94c9a9dd30513c8!2z5pel5pysLCDjgJIwMzAtMDgwMSDpnZLmo67nnIzpnZLmo67luILmlrDnlLrvvJLkuIHnm67vvJHiiJLvvJHvvJEg77yl77yz77y044OT44Or!5e0!3m2!1sja!2sjp!4v1492162940516" allowfullscreen></iframe>
</div>

```
*/
/* box_gmap
--------------------------------------------------------------*/
.box_gmap {
  width: 680px;
  height: 400px;
  overflow: hidden;
}

.box_gmap iframe {
  width: 100%;
  height: 100%;
}

@media screen and (max-width: 640px) {
  .box_gmap {
    width: 100%;
    height: 200px;
  }
}

/*
#styleguide

box_shinoda


```
<div class="box_point">
<div class="head">ワンポイントワンポイントワンポイントワンポイントワンポイントワンポイントワンポイント</div>
<div class="body">
<p class="subhead">硬膜外自家血注入（Ｅｐｉｄｕｒａｌ Ｂｌｏｏｄ Ｐａｔｃｈ：ＥＢＰ）</p>
<p>一般的にブラッドパッチと呼ばれている治療法です。背骨の一番外側の膜を脊髄硬膜と呼びます。脊髄硬膜の内と外の間には，脂肪分を多く含んだ隙間があります。この隙間を脊髄硬膜外腔と呼びます。髄液が漏れている部分の脊髄硬膜外腔に，自家静脈血を注入して，髄液の漏れをふさぐのが硬膜外自家血注入と呼ばれる治療法です。</p>
</div>
</div>

```
*/
/* box_point
--------------------------------------------------------------*/
.box_point {
  border-radius: 10px;
  box-shadow: 4px 4px #d6dee7;
  margin: 75px 0 28px;
}

@media screen and (max-width: 640px) {
  .box_point {
    font-size: 1.2rem;
    line-height: 1.8;
    margin: 90px 0 20px;
    box-shadow: 2px 2px #d6dee7;
  }
}

.box_point .head {
  font-size: 2.2rem;
  font-weight: bold;
  line-height: 1.2;
  color: #fff;
  background: #305889;
  padding: 16px 14px 16px 130px;
  border-radius: 10px 10px 0 0;
  position: relative;
}

@media screen and (max-width: 640px) {
  .box_point .head {
    font-size: 1.4rem;
    padding: 10px 10px 10px 95px;
  }
}

.box_point .head::before {
  content: "";
  position: absolute;
  width: 75px;
  height: 116px;
  left: 35px;
  bottom: 0;
  background: url(/resources/img/common/avatar/avatar_shinoda2.png) no-repeat left bottom;
  background-size: contain;
}

@media screen and (max-width: 640px) {
  .box_point .head::before {
    width: 69px;
    height: 107px;
    left: 15px;
  }
}

.box_point .body {
  border: 2px solid #97acc4;
  border-top: none;
  border-radius: 0 0 10px 10px;
  padding: 27px 20px 27px 45px;
}

@media screen and (max-width: 640px) {
  .box_point .body {
    border: 1px solid #97acc4;
    padding: 18px 13px;
  }
}

.box_point .body .subhead {
  font-size: 1.8rem;
  font-weight: bold;
  color: #305889;
  margin-bottom: 8px;
}

@media screen and (max-width: 640px) {
  .box_point .body .subhead {
    font-size: 14px;
    line-height: 1.5;
  }
}

.box_point .body p {
  margin-bottom: 0px;
}



/* box_attention 2020/04/14 追加（トップページ　コロナ関連のお知らせ）
--------------------------------------------------------------*/
.box_attention {
  border-radius: 10px;
  /*box-shadow: 4px 4px #d6dee7;*/
  margin: 30px 0 60px;
  text-align: center;
}

@media screen and (max-width: 640px) {
  .box_attention {
    font-size: 1.2rem;
    line-height: 1.8;
    margin: 20px 0 30px;
    box-shadow: 2px 2px #d6dee7;
  }
}

.box_attention .head {
  font-size: 3.0rem;
  font-weight: bold;
  line-height: 1.2;
  color: #fff;
  background: #0e8ce0;
  padding: 16px;
  border-radius: 10px 10px 0 0;
  position: relative;
}
.box_attention .head .attention{
	width: 15%;
    margin: 0 auto 10px;
    font-size: 2rem;
	background: #fff;
	padding: 5px 0;
	color: #0e8ce0;
	border-radius: 5px;
}
@media screen and (max-width: 640px) {
  .box_attention .head {
    font-size: 1.8rem;
    padding: 10px;
  }
	.box_attention .head .attention{
		width: 50%;
	}
}

/*.box_point .head::before {
  content: "";
  position: absolute;
  width: 75px;
  height: 116px;
  left: 35px;
  bottom: 0;
  background: url(/resources/img/common/avatar/avatar_shinoda2.png) no-repeat left bottom;
  background-size: contain;
}

@media screen and (max-width: 640px) {
  .box_point .head::before {
    width: 69px;
    height: 107px;
    left: 15px;
  }
}*/

.box_attention .body {
  border: 2px solid #97acc4;
  border-top: none;
  border-radius: 0 0 10px 10px;
  padding: 20px;
}

@media screen and (max-width: 640px) {
  .box_attention .body {
    border: 1px solid #97acc4;
    padding: 20px;
  }
}

.box_attention .body .subhead {
  font-size: 1.8rem;
  font-weight: bold;
  color: #305889;
  margin-bottom: 8px;
}

@media screen and (max-width: 640px) {
  .box_attention .body .subhead {
    font-size: 14px;
    line-height: 1.5;
  }
}

.box_attention .body p {
  margin-bottom: 0px;
  text-align: center;
  font-size: 1.6rem;
}

@media screen and (max-width: 640px) {
	.box_attention .body p  {
		margin-bottom: 0px;
		text-align: center;
		font-size: 1.4rem;
  }
}










/*
#overview
Modal
*/
/*
#styleguide

Modal
```
<p><a class="js_modal" href="https://placehold.jp/600x600.png"><img src="https://placehold.jp/150x150.png"></a></p>
```
*/
#cboxLoadedContent {
  border: none;
}

#cboxOverlay, #cboxWrapper, #colorbox {
  z-index: 999;
  overflow: visible;
}

#cboxClose,
#cboxNext,
#cboxPrevious {
  background: none;
  text-indent: 0;
}

#cboxClose:before,
#cboxNext:before,
#cboxPrevious:before {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

#cboxClose {
  background: none;
  top: auto;
  bottom: -40px;
  right: 0;
  width: 40px;
  height: 40px;
}

#cboxClose:before {
  content: "";
  font-family: "fontello";
  font-style: normal;
  color: #fff;
  font-size: 3rem;
}

@media screen and (max-width: 640px) {
  #cboxNext,
  #cboxPrevious {
    top: auto;
    bottom: -50px;
    margin-top: 0;
  }
}

#cboxNext:before,
#cboxPrevious:before {
  color: #fff;
  font-size: 6rem;
}

@media screen and (max-width: 640px) {
  #cboxNext:before,
  #cboxPrevious:before {
    font-size: 4rem;
  }
}

#cboxNext {
  right: -30px;
}

@media screen and (max-width: 640px) {
  #cboxNext {
    right: auto;
    left: 100px;
  }
}

#cboxNext:before {
  content: "";
  font-family: "fontello";
  font-style: normal;
}

#cboxPrevious {
  left: -30px;
}

@media screen and (max-width: 640px) {
  #cboxPrevious {
    left: 0;
  }
}

#cboxPrevious:before {
  content: "";
  font-family: "fontello";
  font-style: normal;
}

.js_modal {
  position: relative;
  text-decoration: none;
  display: inline-block;
}

.js_modal:hover {
  opacity: 1;
}

.js_modal:before {
  content: "";
  font-family: "fontello";
  font-style: normal;
  color: #0e8ce0;
  font-size: 1.6rem;
  position: absolute;
  bottom: 5px;
  right: 5px;
}

/*
#overview
Img
*/
/*
#styleguide

円形
```
<img src="http://placehold.jp/150x150.png" class="img_circle">
```
*/
.img_circle {
  border-radius: 50%;
}

/*
#overview
Spacing

間隔用です。
marginやpaddingが必要な時はこちらを参照してください。
*/
/* Spacing
--------------------------------------------------------------*/
/*
#styleguide

margin
```
<p class="mtl">margin top 大 PC:34px SP:25px</p>
<p class="mtm">margin top 2em</p>
<p class="mts">margin top 1em</p>
<p class="mt0">margin top 0</p>

<p class="mbl">margin bottom 大 PC:34px SP:25px</p>
<p class="mbm">margin bottom 2em</p>
<p class="mbs">margin bottom 1em</p>
<p class="mb0">margin bottom 0</p>

<p class="mll">margin left 大 PC:34px SP:25px</p>
<p class="mlm">margin left 2em</p>
<p class="mls">margin left 1em</p>
<p class="ml0">margin left 0</p>
```
*/
.article {
  /* margin-top ------------- */
  /* margin-bottom ---------- */
  /* margin-left ------------ */
}

.article .mtl {
  margin-top: 34px;
}

@media screen and (max-width: 640px) {
  .article .mtl {
    margin-top: 25px;
  }
}

.article .mtm {
  margin-top: 2em;
}

.article .mts {
  margin-top: 1em;
}

.article .mt0 {
  margin-top: 0;
}

.article .mbl {
  margin-bottom: 34px;
}

@media screen and (max-width: 640px) {
  .article .mbl {
    margin-bottom: 25px;
  }
}

.article .mbm {
  margin-bottom: 2em;
}

.article .mbs {
  margin-bottom: 1em;
}

.article .mb0 {
  margin-bottom: 0;
}

.article .mll {
  margin-left: 34px;
}

@media screen and (max-width: 640px) {
  .article .mll {
    margin-left: 25px;
  }
}

.article .mlm {
  margin-left: 2em;
}

.article .mls {
  margin-left: 1em;
}

.article .ml0 {
  margin-left: 0;
}

/*
#overview
Header
*/
/* header
--------------------------------------------------------------*/
/*
#styleguide

サイト内共通ヘッダー
```
<?php include($_SERVER['DOCUMENT_ROOT']."/resources/inc/header.html"); ?>
```
*/
@media screen and (max-width: 640px) {
  .header_global {
    position: relative;
    height: 60px;
    z-index: 100;
    /* .is_navbarShow &{
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
    } */
  }
}

.header_global img {
  vertical-align: bottom;
}

.header_globalInner {
  width: 980px;
  padding: 17px 0 22px;
  margin: 0 auto;
}

.header_globalInner:after {
  content: "";
  clear: both;
  display: block;
}

@media screen and (max-width: 640px) {
  .header_globalInner {
    width: 100%;
    padding: 13px;
    border-bottom: solid 1px #0e8ce0;
  }
}

.header_logo {
  float: left;
}

.header_logo .logoCompany {
  display: block;
  width: 222px;
  margin-bottom: 12px;
}

@media screen and (max-width: 640px) {
  .header_logo .logoCompany {
    width: 130px;
    margin-bottom: 4px;
  }
}

.header_logo .logoCompany img {
  display: block;
  width: 100%;
  height: auto;
}

.header_logo .logoSite {
  display: block;
  width: 424px;
  height: auto;
}

@media screen and (max-width: 640px) {
  .header_logo .logoSite {
    width: 227px;
  }
}

.header_description {
  font-size: 1.2rem;
  color: #838383;
  text-align: right;
  line-height: 1;
}

@media screen and (max-width: 640px) {
  .header_description {
    display: none;
  }
}

.header_contact {
  width: 389px;
  text-align: right;
  float: right;
  margin-top: 11px;
}

@media screen and (max-width: 640px) {
  .header_contact {
    display: none;
  }
}

.header_contact img {
  width: 100%;
  height: auto;
}

/*
#overview
Footer
*/
/* footer
--------------------------------------------------------------*/
/*
#styleguide

サイト内共通フッター
```
<?php include($_SERVER['DOCUMENT_ROOT']."/resources/inc/footer.html"); ?>
```
*/
/* footer_global
---------------------------*/
.footer_globalWrap {
  width: 100%;
}

@media screen and (min-width: 641px), print {
  .footer_globalWrap {
    background-color: #444;
    padding-bottom: 95px;
  }
    .footer_contact{
        padding-bottom: 0;
    }
}

/*@media screen and (max-width: 640px) {
  .footer_globalWrap {
    padding-bottom: 50px;
  }
}*/

.footer_global {
  width: 990px;
  margin: 0 auto;
  padding: 33px 10px 33px;
}

.footer_global:after {
  content: "";
  clear: both;
  display: block;
}

@media screen and (max-width: 640px) {
  .footer_global {
    width: 100%;
    padding: 0;
  }
}

/* footer_group
---------------------------*/
.footer_group {
  background-color: #646464;
}
.footer_group .footer_navList {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack:justify;
      -ms-flex-pack:justify;
          justify-content:space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.footer_group .footer_navList > li {
  width: calc(100%/3);
}


/* footer_bottom
---------------------------*/
.footer_bottom {
  width: 100%;
  background-color: #444;
}

.footer_bottom .footer_bottomInner {
  width: 990px;
  margin: 0 auto;
  text-align: center;
  padding: 10px 20px 60px;
}

.footer_bottom .footer_bottomList {
  margin-bottom: 8px;
}

.footer_bottom .footer_bottomList:after {
  content: "";
  clear: both;
  display: block;
}

.footer_bottom .footer_bottomList > li {
  display: inline-block;
  margin: 0 .5em;
  position: relative;
}

.footer_bottom .footer_bottomList > li:first-child {
  margin-left: 0;
}

.footer_bottom .footer_bottomList > li > a {
  color: #fff;
}

.footer_bottom .text_copyRight {
  color: #fff;
  text-align: center;
  font-size: 1.2rem;
  margin-bottom: 0;
}

@media screen and (max-width: 640px) {
  .footer_bottom .footer_bottomInner {
    width: 100%;
	padding: 10px 20px 150px;
  }
  .footer_bottom .footer_bottomList {
    font-size: 1.3rem;
  }
  .footer_bottom .text_copyRight {
    font-size: 1.1rem;
  }
}

/* アドレスエリア
---------------------------*/
.footer_address {
  float: left;
  width: 350px;
  margin-bottom: 40px;
}

.footer_address .footer_logo {
  width: 100%;
  height: auto;
}

.footer_address .footer_txtGroup {
  text-align: right;
  font-size: 1rem;
  color: #fff;
}

.footer_address > p {
  color: #fff;
  line-height: 1.6;
  font-size: 1.4rem;
}

@media screen and (max-width: 640px) {
  .footer_address {
    background-color: #444;
    float: none;
    width: 100%;
    padding: 10px 15px 20px;
    margin-bottom: 0;
  }
  .footer_address > p {
    font-size: 1.2rem;
  }
}
@media screen and (min-width: 641px), print {
    .footer_contact .footer_address{
        margin-bottom: 0;
    }
	.footer_contact .footer_bottom .footer_bottomInner{
		padding: 10px;
	}
}
/* サイトナビエリア
---------------------------*/
.footer_nav {
  float: right;
  width: 500px;
}

.footer_nav:after {
  content: "";
  clear: both;
  display: block;
}

.footer_nav .footer_navLeft {
  float: left;
}

.footer_nav .footer_navRight {
  float: right;
  padding-top: 30px;
}

.footer_nav .footer_navRight .footer_nav_title {
  margin-top: 40px;
}

@media screen and (max-width: 640px) {
  .footer_nav {
    float: none;
    width: 100%;
  }
  .footer_nav .footer_navLeft {
    float: none;
  }
  .footer_nav .footer_navRight {
    float: none;
    padding-top: 0;
  }
  .footer_nav .footer_navRight .footer_nav_title {
    margin-top: 0;
  }
}

/* 支店エリア
---------------------------*/
.footer_branch {
  float: left;
  width: 350px;
  background: url("/resources/img/common/footer/footer_map.png") no-repeat center right;
}

@media screen and (max-width: 640px) {
  .footer_branch {
    display: none;
  }
}

/* 支店エリアのSP
---------------------------*/
@media screen and (min-width: 641px), print {
  .footer_branchSpWrap {
    display: none;
  }
}

@media screen and (max-width: 640px) {
  .footer_titleShop .footer_titleShopInner {
    padding: 15px 0;
    display: block;
    text-decoration: none;
    font-weight: bold;
    color: #305889;
    border-top: 1px solid #305889;
    border-bottom: 1px solid #305889;
    position: relative;
  }
  .footer_titleShop .footer_titleShopInner:after {
    content: "";
    font-family: "fontello";
    font-style: normal;
    position: absolute;
    color: #305889;
    font-size: 2rem;
    top: 50%;
    right: 10px;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
  }
  .footer_titleShop.active .footer_titleShopInner {
    border-bottom: none;
  }
  .footer_titleShop.active .footer_titleShopInner:after {
    content: "";
    font-family: "fontello";
    font-style: normal;
  }
  .footer_branchSpWrap {
    padding: 0 10px 20px;
    background-color: #eee;
  }
  .footer_branchSpWrap .footer_branchSp {
    border-bottom: 1px solid #305889;
    display: none;
  }
  .footer_branchSpWrap .footer_branchSp_title {
    color: #305889;
    font-weight: bold;
    margin: 6% 0 1%;
  }
  .footer_branchSpWrap .footer_branchSp_list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .footer_branchSpWrap .footer_branchSp_list:last-child {
    margin-bottom: 20px;
  }
  .footer_branchSpWrap .footer_branchSp_list > li {
    background: #305889;
    border-radius: 7px;
    width: 31%;
    text-align: center;
    margin: 1% 2% 1% 0;
  }
  .footer_branchSpWrap .footer_branchSp_list > li > a {
    color: #fff;
    width: 100%;
    font-size: 1.4rem;
    line-height: 1.5;
    padding: 7px 0%;
    text-decoration: none;
    display: block;
  }
}

/* footer_nav_title
---------------------------*/
.footer_nav_title {
  color: #fff;
  font-weight: bold;
  border-left: 3px solid #01c3e7;
  line-height: 1.3;
  padding-left: 10px;
  margin-bottom: 12px;
}

.footer_nav_title > a {
  color: #fff;
  font-weight: bold;
  text-decoration: none;
}

@media screen and (max-width: 640px) {
  .footer_nav_title {
    background: #305889;
    color: #fff;
    border-left: none;
    padding: 13px 15px;
    font-size: 1.4rem;
    margin-bottom: 0;
  }
}

/* footer_nav_subTitle
---------------------------*/
.footer_nav_subTitle {
  color: #fff;
  font-weight: bold;
  line-height: 1.4;
}

/* footer_navList
---------------------------*/
.footer_navList > li {
  color: #fff;
  margin-bottom: .5em;
  position: relative;
  padding-left: 10px;
}

.footer_navList > li:before {
  content: "";
  font-family: "fontello";
  font-style: normal;
  color: #fff;
  font-size: 1.4rem;
  margin-right: 5px;
  position: absolute;
  left: 0;
  top: 0;
}

.footer_navList > li:first-child {
  margin-left: 0;
}

.footer_navList > li > a {
  color: #fff;
  font-size: 1.3rem;
  display: inline-block;
}

@media screen and (max-width: 640px) {
  .footer_navList {
    padding: 0px 15px;
  }
  .footer_navList > li {
    color: #21262b;
    margin-bottom: 0;
    padding-left: 0;
    /* SP表示時に右矢印を非表示にしている。
         listを入れ子にした際に右矢印の位置がずれるため。
      ---------------------------*/
    /* sp表示時高さ等を出すためにspanでくくっている
      ---------------------------*/
  }
  .footer_navList > li > a {
    padding: 11px 0 9px;
    display: inline-block;
    width: 100%;
    color: #21262b;
    position: relative;
    border-bottom: 1px solid #c2c2c2;
    text-decoration: none;
    font-size: 1.2rem;
    /* border-bottomを消すクラス。
           last-childで対応したかったが、
           マークアップ上できないため無理やりマルチクラスで対応している。
        ---------------------------*/
  }
  .footer_navList > li > a.spborderNone {
    border-bottom: none;
  }
  .footer_navList > li.spArrowNone:before {
    display: none;
  }
  .footer_navList > li > span {
    font-weight: normal;
    padding: 11px 0 9px;
    font-size: 1.2rem;
    display: block;
    border-bottom: 1px solid #c2c2c2;
  }
  .footer_navList > li:before {
    color: #305889;
    left: inherit;
    right: 10px;
    top: 50%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    margin-right: 0;
  }
}

/* footer_navList_child
---------------------------*/
.footer_navListChild > li {
  margin-left: 11px;
}

.footer_navListChild > li > a {
  color: #fff;
  font-size: 1.2rem;
  display: inline-block;
}

@media screen and (max-width: 640px) {
  .footer_navListChild > li {
    margin-left: 0;
  }
  .footer_navListChild > li > a {
    color: #21262b;
    padding: 8px 22px 7px;
    position: relative;
    display: block;
    border-bottom: 1px dashed #c2c2c2;
    text-decoration: none;
  }
  .footer_navListChild > li > a:before {
    content: "";
    font-family: "fontello";
    font-style: normal;
    color: #305889;
    position: absolute;
    right: 10px;
    top: 50%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    margin-right: 0;
    font-size: 1.4rem;
  }
}

/* footer_navListBranch
---------------------------*/
.footer_navListBranch {
  width: 100%;
}

.footer_navListBranch:after {
  content: "";
  clear: both;
  display: block;
}

.footer_navListBranch > li {
  float: left;
  margin-left: 11px;
}

.footer_navListBranch > li:first-child {
  margin-left: 0;
}

.footer_navListBranch > li > a {
  color: #fff;
  font-size: 1.2rem;
  display: inline-block;
}

/* PC footerFixed
---------------------------*/
.fixed_container {
  padding: 15px 10px;
  z-index: -1;
  width: 100%;
  bottom: 0;
  left: 0;
  position: fixed;
  background: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  opacity: 0;
  -webkit-transition: opacity .3s ease;
  transition: opacity .3s ease;
}

.fixed_container.scroll {
  z-index: 10;
  opacity: 1;
}

.fixed_container .fixed_container_inner {
  width: 990px;
  margin: 0 auto;
}

.fixed_container .fixed_container_inner:after {
  content: "";
  clear: both;
  display: block;
}

@media screen and (min-width: 641px), print {
  .fixed_container {
    display: block !important;
  }
}

@media screen and (max-width: 640px) {
  .fixed_container {
    display: none !important;
  }
}

.fixed_container_number {
  float: left;
  width: 308px;
  margin-right: 18px;
}

.fixed_container_number img {
  display: inline-block;
  vertical-align: middle;
  width: 308px;
  height: auto;
}

.fixed_container_detail {
  float: left;
  width: 247px;
}

.fixed_container_detail .contact_detail_info {
  padding-top: 10px;
  letter-spacing: 2px;
  line-height: 1.3;
}

.fixed_container_detail .contact_detail_info .orange {
  color: #f78128;
}

.fixed_container_buttons {
  float: left;
  width: 415px;
  padding: 12px 10px;
}

.fixed_container_buttons:after {
  content: "";
  clear: both;
  display: block;
}

.fixed_container_buttons > a {
  display: block;
  float: left;
  width: 100%;
  border-radius: 7px;
  font-size: 1.6rem;
  box-shadow: 3px 3px #d9d9d9;
  position: relative;
  /*padding: 4px 12px 4px 26px;*/
  text-align: center;
  margin-right: 10px;
  text-decoration: none;
  position: relative;
}

.fixed_container_buttons > a:last-child {
  margin-right: 0;
}

.fixed_container_buttons > a:after {
  content: "";
  font-family: "fontello";
  font-style: normal;
  position: absolute;
  right: 20px;
  top: 50%;
  margin-top: -1px;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  font-size: 2.2rem;
  font-weight: normal;
}

.fixed_container_buttons > a:before {
  color: #fff;
  position: absolute;
  left: 30px;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  font-size: 2rem;
}

/*.fixed_container_buttons > a.btn_mail:before {
  font-weight: normal;
  content: "";
  font-family: "fontello";
  font-style: normal;
}*/

.fixed_container_buttons > a.btn_file:before {
  font-weight: normal;
  content: "";
  font-family: "fontello";
  font-style: normal;
}



/* PC web仮予約ボタン用*/

.label-primary {
	padding: 5px;
    margin-right: 10px;
    background-color: #ddf0fd;
    border-radius: 5px;
    color: #0e8ce0;
}

@media screen and (max-width: 640px) {
.contactSPhead {
    padding: 10px 0;
    background-color: #f6f6f6;
    border-top: solid 1px #ddd;
    border-bottom: solid 1px #ddd;
}

.contactSPhead ul {
    overflow: hidden;
    margin-bottom: 0;
}

.container-fix:after, .container-fix:before, .container-wrap:after, .container-wrap:before {
    content: ' ';
    display: table;
}

.contactSPhead-tel {
    width: 49%;
    float: left;
}

.contactSPhead-mail {
    width: 49%;
    float: right;
}
}



/* SP footerFixed
---------------------------*/
.fixed_container_sp {
  padding: 10px 10px 8px 10px;
  line-height: 1.0;
  z-index: -1;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: #fff;
  /*background-color: rgba(255,255,255,0.5);*/
  opacity: 0;
  -webkit-transition: opacity .3s ease;
  transition: opacity .3s ease;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.fixed_container_sp.scroll {
  z-index: 10;
  opacity: 1;
}

@media screen and (min-width: 641px), print {
  .fixed_container_sp {
    display: none !important;
  }
}

@media screen and (max-width: 640px) {
  .fixed_container_sp {
    display: block !important;
  }
  .is_navbarShow .fixed_container_sp {
    position: static;
  }
	
.baloonCheer {
    position: relative;
    /* display: inline-block; */
    /* padding: 0 45px; */
    padding: 10px 0 15px;
    margin: 0 auto;
    width: 70%;
}
	
	.baloonCheer p{
		font-weight:bold;
	}

.baloonCheer:before {
    position: absolute;
    left: 0;
    -webkit-transform: rotate(60deg);
    -moz-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    transform: rotate(60deg);
}

.baloonCheer:after {
    position: absolute;
    right: 0;
    -webkit-transform: rotate(-60deg);
    -moz-transform: rotate(-60deg);
    -ms-transform: rotate(-60deg);
    transform: rotate(-60deg);
}

.baloonCheer:after, .baloonCheer:before {
    top: 50%;
    display: inline-block;
    width: 25px;
    height: 2px;
    content: '';
    background-color: #333;
}	
	
}

.fixed_container_sp_item {
  float: left;
  width: 50%;
}

.fixed_container_sp_item > a {
  display: block;
  padding: 10px;
  text-align: center;
  line-height: 1;
  border-radius: 0;
  border: none;
}

@media screen and (max-width: 640px) {
  .fixed_container_sp_item > a {
    padding: 5px;
  }
}

.fixed_container_sp_item > a:before {
  font-size: 2.4rem;
  line-height: 1;
  display: inline-block;
  margin-bottom: 5px;
}

.fixed_container_sp_item > a .text {
  font-size: 1.1rem;
}

.fixed_container_sp_item.call > a {
  box-shadow: none;
  margin-bottom: 0;
}

.fixed_container_sp_item.call > a:before {
  content: "";
  font-family: "fontello";
  font-style: normal;
}

.fixed_container_sp_item.msg > a:before {
  content: "";
  font-family: "fontello";
  font-style: normal;
}

/*
#overview
Sidebar
*/
/* sidebar
--------------------------------------------------------------*/
/*
#styleguide

サイト内共通サイドバー

```
<?php include($_SERVER['DOCUMENT_ROOT']."/resources/inc/sidebar.html"); ?>
```
*/
.sidebar {
  width: 100%;
}

.sidebar_contact {
  border: 1px solid #98acc4;
  padding: 2px 2px 14px;
  margin-bottom: 20px;
}

@media screen and (max-width: 640px) {
  .sidebar_contact {
    display: none;
  }
}

.sidebar_contact .head {
  font-size: 1.8rem;
  color: #305889;
  font-weight: bold;
  line-height: 1.3;
  text-align: center;
  background: #eaeef3;
  padding: 13px 0;
}

.sidebar_contact .head span {
  color: #f78128;
}

.sidebar_contact .body {
  padding: 0 10px;
  text-align: center;
}

.sidebar_contact .body a {
  cursor: pointer;
}

.sidebar_contact .item_tel {
  margin: 16px 0;
}

.sidebar_contact .item_tel a {
  cursor: text;
}

.sidebar_contact .item_tel img {
  width: 100%;
  height: auto;
}

.sidebar_contact .item_btn {
  margin: 16px 0 0;
}

.sidebar_contact .item_btn a {
  font-size: 1.3rem;
  border-radius: 6px;
  width: 100%;
  position: relative;
  padding: 7px;
}

.sidebar_contact .item_btn a span {
  position: relative;
}

.sidebar_contact .item_btn a i {
  font-size: 1.5rem;
  margin-right: 5px;
  position: absolute;
  left: 0;
  top: 50%;
  margin: -1px 0 0 -2px;
  -webkit-transform: translate(-100%, -50%);
      -ms-transform: translate(-100%, -50%);
          transform: translate(-100%, -50%);
}

.sidebar_contact .item_btn a:after {
  content: "";
  font-family: "fontello";
  font-style: normal;
  display: block;
  font-size: 2rem;
  font-weight: normal;
  position: absolute;
  right: 12px;
  top: 50%;
  margin-top: -1px;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}

.toppage .sidebar_navBlock {
  display: none;
}

@media screen and (max-width: 640px) {
  .sidebar_navBlock {
    display: none;
  }
}

.sidebar_navBlock .head {
  font-size: 1.5rem;
  line-height: 1.2;
  font-weight: bold;
  color: #fff;
  background: #444444;
  padding: 12px;
}

.sidebar_navBlock .body a {
  font-size: 1.4rem;
  color: inherit;
  text-decoration: none;
  display: block;
  padding: 9px 12px;
  position: relative;
}

.sidebar_navBlock .body a:hover {
  background: #eaeef3;
}

.sidebar_navBlock .body a::after {
  content: "";
  font-family: "fontello";
  font-style: normal;
  color: #305889;
  font-size: 1.2rem;
  font-weight: bold;
  position: absolute;
  right: 12px;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}

.sidebar_navBlock .body span {
  font-size: 1.2rem;
  vertical-align: middle;
  letter-spacing: -0.1em;
}

.sidebar_navBlock .body li:nth-child(n+2) {
  border-top: 1px dotted #97abc4;
}

.sidebar_navBlock .body li.last {
  border-bottom: 1px dotted #97abc4;
}

.toppage .sidebar_navBlock_dictionary {
  display: block;
}

@media screen and (max-width: 640px) {
  .toppage .sidebar_navBlock_dictionary {
    display: none;
  }
}

.sidebar_navBlock_dictionary {
  display: none;
  margin: 20px 0 28px;
}

.sidebar_navBlock_dictionary .head {
  font-size: 1.6rem;
  line-height: 1.5;
  font-weight: bold;
  color: #305889;
  text-align: center;
  margin-bottom: 15px;
}

.sidebar_navBlock_dictionary .head::before {
  content: "";
  display: inline-block;
  width: 23px;
  height: 19px;
  background: url("/resources/img/common/icon/icon_dictionary.png") no-repeat;
  margin: 0 5px -3px 0;
}

.sidebar_navBlock_dictionary .body:after {
  content: "";
  clear: both;
  display: block;
}

.sidebar_navBlock_dictionary .body a {
  display: block;
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 1;
  color: #0e8ce0;
  text-decoration: none;
  padding: 9px 10px;
  border: 1px solid #0e8ce0;
  border-radius: 7px;
  background: #fff;
  box-shadow: 2px 2px #d9d9d9;
  text-align: center;
}

.sidebar_navBlock_dictionary .body a:hover {
  background: #0e8ce0;
  color: #fff;
}

.sidebar_navBlock_dictionary .body li {
  float: left;
  width: 42px;
  margin: 0 0 7px 7px;
}

.sidebar_navBlock_dictionary .body li:nth-child(5n+1) {
  margin-left: 1px;
}

@media screen and (max-width: 640px) {
  .toppage .sidebar_navBlock_pickup {
    display: block;
  }
}

.sidebar_navBlock_pickup {
  margin: 30px 0;
  border-bottom: 1px solid #c1cddc;
}

@media screen and (max-width: 640px) {
  .sidebar_navBlock_pickup {
    display: none;
    border-bottom: 2px solid #305889;
  }
}

.sidebar_navBlock_pickup a {
  width: 100%;
  display: table;
  padding: 10px 16px 10px 8px;
  color: inherit;
  text-decoration: none;
  font-size: 1.6rem;
  font-weight: bold;
  position: relative;
}

.sidebar_navBlock_pickup a:hover {
  background: #eaeef3;
}

.sidebar_navBlock_pickup a:hover img {
  opacity: 1;
}

@media screen and (max-width: 640px) {
  .sidebar_navBlock_pickup a {
    font-size: 1.9rem;
    padding: 15px 10px;
  }
}

.sidebar_navBlock_pickup a:after {
  content: "";
  font-family: "fontello";
  font-style: normal;
  color: #305889;
  font-size: 1.2rem;
  position: absolute;
  top: 50%;
  right: 16px;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}

@media screen and (max-width: 640px) {
  .sidebar_navBlock_pickup a:after {
    font-size: 2rem;
    right: 20px;
  }
}

.sidebar_navBlock_pickup li {
  border-top: 1px solid #c1cddc;
}

@media screen and (max-width: 640px) {
  .sidebar_navBlock_pickup li {
    border-top: 2px solid #305889;
  }
}

.sidebar_navBlock_pickup .text_small {
  display: block;
  font-size: 1.2rem;
  font-weight: normal;
  line-height: 1.7;
}

@media screen and (max-width: 640px) {
  .sidebar_navBlock_pickup .text_small {
    font-size: 1.3rem;
    line-height: 1.4;
  }
}

.sidebar_navBlock_pickup .thumbnail {
  width: 48px;
  height: auto;
  display: table-cell;
  vertical-align: middle;
}

@media screen and (max-width: 640px) {
  .sidebar_navBlock_pickup .thumbnail {
    width: 58px;
  }
}

.sidebar_navBlock_pickup .text {
  display: table-cell;
  width: 100%;
  vertical-align: middle;
  text-align: left;
  padding-left: 5px;
}

@media screen and (max-width: 640px) {
  .sidebar_navBlock_pickup .text {
    padding-left: 15px;
    line-height: 1.2;
  }
}

/*
#overview
Hero
*/
/* hero
--------------------------------------------------------------*/
/*
#styleguide

トップページにあるメインビジュアル
```
<h1 class="hero"><img src="/resources/img/top/main_pc.png" width="2400" height="1108" alt="解決実績10,000件以上!(2017年4月時点)交通事故にあったら弁護士に無料相談" class="js_mediaSwitchImg"></h1>
```
*/
.hero {
  background: #fafafa;
  background: -webkit-linear-gradient(top, #fafafa 0%, #ebebeb 100%);
  background: linear-gradient(to bottom, #fafafa 0%, #ebebeb 100%);
  overflow: hidden;
  max-width: 100%;
  height: 554px;
  position: relative;
}

@media screen and (max-width: 640px) {
  .hero {
    height: auto;
  }
}

.hero img {
  display: block;
  width: 1200px;
  height: auto;
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
}

@media screen and (max-width: 640px) {
  .hero img {
    position: static;
    width: 100%;
    -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
            transform: translateX(0);
  }
}

/*
#overview
Nav
*/
/* Navbar
--------------------------------------------------------------*/
.navbar {
  background: #305889;
  color: #fff;
  font-weight: bold;
  font-size: 1.6rem;
  text-align: center;
  line-height: 1.4;
  border-bottom: solid 2px #afafaf;
}

.navbar:after {
  content: "";
  clear: both;
  display: block;
}

@media screen and (max-width: 640px) {
  .navbar {
    background: #fff;
    color: inherit;
    font-size: 1.2rem;
    font-weight: normal;
    text-align: left;
    border-bottom: none;
    display: none;
  }
  .is_navbarShow .navbar {
    display: block;
  }
}

.navbar li {
  position: relative;
}

.navbar a {
  color: inherit;
  text-decoration: none;
}

.navbar_inner {
  width: 980px;
  margin: 0 auto;
}

@media screen and (max-width: 640px) {
  .navbar_inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow: auto;
    padding-top: 60px;
    background: #fff;
  }
}

.navbar_category {
  display: block;
  padding: 15px 0;
}

@media screen and (max-width: 640px) {
  .navbar_layer1 {
    padding-bottom: 100px;
  }
}

@media screen and (min-width: 641px), print {
  .navbar_layer1 > li {
    float: left;
    width: 163px;
  }
  .navbar_layer1 > li:last-child:after, .navbar_layer1 > li:before {
    content: '';
    display: block;
    width: 1px;
    height: 36px;
    background: #98acc4;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
  }
  .navbar_layer1 > li:last-child:after {
    right: 0;
  }
  .navbar_layer1 > li:before {
    left: 0;
  }
}

@media screen and (max-width: 640px) {
  .navbar_layer1 > li:last-child .navbar_layer2 > li:last-child {
    border-bottom: solid 1px #c2c2c2;
  }
  .navbar_layer1 > li > .navbar_category {
    background: #305889;
    color: #fff;
    font-weight: bold;
    font-size: 1.4rem;
    padding: 15px;
  }
}

@media screen and (min-width: 641px), print {
  .navbar_layer1 a {
    height: 65px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .navbar_layer1 a:hover, .navbar_layer1 a.cur {
    background: #384f6a;
  }
}

@media screen and (max-width: 640px) {
  .navbar_layer1 a {
    display: block;
    padding: 15px 20px 15px 0;
    position: relative;
  }
  .navbar_layer1 a:after {
    content: "";
    font-family: "fontello";
    font-style: normal;
    position: absolute;
    top: 50%;
    right: 0;
    color: #305889;
    font-size: 1.6rem;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
  }
}

@media screen and (max-width: 640px) {
  .navbar_layer2 {
    padding: 0 15px;
  }
  .navbar_layer2 > li:not(:last-child) {
    border-bottom: solid 1px #c2c2c2;
  }
}

@media screen and (max-width: 640px) {
  .navbar_layer3 {
    border-top: solid 1px #c2c2c2;
  }
  .navbar_layer3 > li:not(:last-child) {
    border-bottom: dotted 1px #c2c2c2;
  }
  .navbar_layer3 > li > a {
    padding-left: 23px;
  }
}

.navbar_trigger {
  display: none;
}

@media screen and (max-width: 640px) {
  .navbar_trigger {
    display: block;
    width: 40px;
    height: 40px;
    position: absolute;
    right: 11px;
    top: 10px;
    cursor: pointer;
    background: #0e8ce0;
    z-index: 2;
  }
  .navbar_trigger span {
    width: 18px;
    height: 2px;
    background: #fff;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transition: all .4s;
    transition: all .4s;
  }
  .navbar_trigger span:nth-of-type(1) {
    -webkit-transform: translate(-50%, -7px);
        -ms-transform: translate(-50%, -7px);
            transform: translate(-50%, -7px);
  }
  .navbar_trigger span:nth-of-type(2) {
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }
  .navbar_trigger span:nth-of-type(3) {
    -webkit-transform: translate(-50%, 5px);
        -ms-transform: translate(-50%, 5px);
            transform: translate(-50%, 5px);
  }
  .is_navbarShow .navbar_trigger span:nth-of-type(1) {
    -webkit-transform: translate(-50%, -50%) rotate(-45deg);
        -ms-transform: translate(-50%, -50%) rotate(-45deg);
            transform: translate(-50%, -50%) rotate(-45deg);
  }
  .is_navbarShow .navbar_trigger span:nth-of-type(2) {
    opacity: 0;
  }
  .is_navbarShow .navbar_trigger span:nth-of-type(3) {
    -webkit-transform: translate(-50%, -50%) rotate(45deg);
        -ms-transform: translate(-50%, -50%) rotate(45deg);
            transform: translate(-50%, -50%) rotate(45deg);
  }
}

.navbar_back {
  display: none;
}

@media screen and (max-width: 640px) {
  .navbar_back {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background: #fff;
    border-bottom: solid 2px #305889;
    z-index: 1;
  }
  .navbar_back a {
    display: block;
    width: 120px;
    margin: 17px 0 0 15px;
  }
}

/*
#styleguide

nav_category
カテゴリーナビです。「.cur」がカレントのスタイルが適用されます。
- 「.column5」
PC/SPともに5カラム

- 「.column6」PC
PC：6カラム
SP：2カラム
```
<nav class="nav_category column6">
  <ul class="nav_category_inner">
    <li><a href="#"><span>北海道・東北</span></a></li>
    <li><a href="#"><span>関東</span></a></li>
    <li><a href="#"><span>中部</span></a></li>
    <li><a href="#"><span>関西</span></a></li>
    <li><a href="#"><span>中国・四国</span></a></li>
    <li><a href="#"><span>九州・沖縄</span></a></li>
  </ul>
</nav>

<nav class="nav_category column5">
  <ul class="nav_category_inner">
    <li><a href="#" class="cur"><span class="large">あ</span>行</a></li>
    <li><a href="#"><span class="large">か</span>行</a></li>
    <li><a href="#"><span class="large">さ</span>行</a></li>
    <li><a href="#"><span class="large">た</span>行</a></li>
    <li><a href="#"><span class="large">な</span>行</a></li>
    <li><a href="#"><span class="large">は</span>行</a></li>
    <li><a href="#"><span class="large">ま</span>行</a></li>
    <li><a href="#"><span class="large">や</span>行</a></li>
    <li><a href="#"><span class="large">ら</span>行</a></li>
    <li><a href="#"><span class="large">わ</span>行</a></li>
  </ul>
</nav>
```
*/
/* nav_category
--------------------------------------------------------------*/
.nav_category {
  margin-bottom: 25px;
}

@media screen and (max-width: 640px) {
  .nav_category {
    margin-bottom: 20px;
  }
}

.nav_category .nav_category_inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.nav_category li {
  padding-bottom: 3px;
}

.nav_category.column5 li {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 19%;
          flex: 0 0 19%;
}

.nav_category.column5 li:nth-child(n+6) {
  padding-top: 6px;
}

.nav_category.column6 li {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 15.5%;
          flex: 0 0 15.5%;
}

.nav_category.column6 li:nth-child(n+7) {
  padding-top: 1.4%;
}

@media screen and (max-width: 640px) {
  .nav_category.column6 li {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 48.5%;
            flex: 0 0 48.5%;
  }
  .nav_category.column6 li:nth-child(n+3) {
    padding-top: 12px;
  }
}

.nav_category a {
  background: #fff;
  color: #0e8ce0;
  text-decoration: none;
  text-align: center;
  display: block;
  border: 2px solid #0e8ce0;
  border-radius: 2px;
  box-shadow: 0px 3px 0 0 #d9d9d9;
  font-weight: normal;
  font-size: 1.5rem;
  line-height: 1.5;
  padding: 5px;
}

@media screen and (max-width: 640px) {
  .nav_category a {
    padding: 4px;
  }
}

.nav_category a.cur, .nav_category a:hover {
  background: #0e8ce0;
  color: #fff;
}

.nav_category span {
  font-weight: bold;
}

.nav_category span.large {
  font-size: 1.8rem;
}

@media screen and (max-width: 640px) {
  .nav_category span.large {
    font-size: 1.6rem;
  }
}

/*
#styleguide

nav_faq
FAQ下層に設置しているナビです。
SPの時はアコーディオン。
```
<?php include($_SERVER['DOCUMENT_ROOT']."/resources/inc/nav_faq.html"); ?>
```
*/
/* nav_faq
--------------------------------------------------------------*/
.nav_faq {
  background: #f6f6f6;
  margin-top: 73px;
  padding: 20px 10px 40px;
}

@media screen and (max-width: 640px) {
  .nav_faq {
    margin-top: 40px;
    padding: 14px 6px 20px;
  }
}

.nav_faq .nav_faq_block:nth-child(n+2) {
  margin-top: 40px;
}

@media screen and (max-width: 640px) {
  .nav_faq .nav_faq_block:nth-child(n+2) {
    margin-top: 15px;
  }
}

.nav_faq .head {
  background: #eaedf2;
  box-shadow: 1px 1px #d1d1d1;
  color: #305889;
  font-weight: bold;
  font-size: 2rem;
  margin-bottom: 0;
  padding: 5px 15px;
}

@media screen and (max-width: 640px) {
  .nav_faq .head {
    font-size: 1.5rem;
    padding: 15px 25px 15px 10px;
    position: relative;
  }
}

@media screen and (max-width: 640px) {
  .nav_faq .head:after {
    content: "";
    font-family: "fontello";
    font-style: normal;
    font-size: 2rem;
    position: absolute;
    top: 50%;
    right: 6px;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
  }
}

@media screen and (max-width: 640px) {
  .nav_faq .head.active:after {
    content: "";
    font-family: "fontello";
    font-style: normal;
    font-size: 2rem;
    position: absolute;
    top: 50%;
    right: 6px;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
  }
}

.nav_faq .body {
  padding: 0 6px;
  margin-top: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

@media screen and (max-width: 640px) {
  .nav_faq .body {
    padding: 0 4px 5px;
    margin-top: 15px;
  }
}

.nav_faq li {
  width: 316px;
}

.nav_faq li:nth-child(n+3) {
  margin-top: 14px;
}

@media screen and (max-width: 640px) {
  .nav_faq li:nth-child(n+2) {
    margin-top: 8px;
  }
}

@media screen and (max-width: 640px) {
  .nav_faq li {
    width: 100%;
  }
}

.nav_faq a {
  background: #fff;
  text-decoration: none;
  color: inherit;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100%;
  border: 1px solid #dddddd;
  border-radius: 8px;
  font-size: 1.5rem;
  line-height: 1.5;
  padding: 20px 20px 20px 23px;
  position: relative;
}

@media screen and (max-width: 640px) {
  .nav_faq a {
    font-size: 1.3rem;
    border-radius: 4px;
    padding: 12px 24px 12px 12px;
  }
}

.nav_faq a:hover {
  opacity: 0.7;
}

.nav_faq a:after {
  content: "";
  font-family: "fontello";
  font-style: normal;
  font-size: 2.6rem;
  color: #0e8ce0;
  position: absolute;
  right: 12px;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}

@media screen and (max-width: 640px) {
  .nav_faq a:after {
    font-size: 2rem;
  }
}

/*
#overview
Breadcrumb
*/
/* breadcrumb
--------------------------------------------------------------*/
/*
#styleguide

パンくずリスト
パンくずリストです。下層ページで使用します。

```
<div class="breadcrumb">
  <div class="breadcrumb_inner">
    <ol itemscope="" itemtype="http://schema.org/BreadcrumbList">
      <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
        <a itemprop="item" href="#">
          <span itemprop="name">パンくず1</span>
        </a>
        <meta itemprop="position" content="1">
      </li>
      <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
        <a itemprop="item" href="#">
          <span itemprop="name">パンくず2</span>
        </a>
        <meta itemprop="position" content="2">
      </li>
      <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
        <span itemprop="name">パンくず3</span>
        <meta itemprop="position" content="3">
      </li>
    </ol>
  </div>
</div>
```
*/
.breadcrumb {
  width: 100%;
  margin: 8px 0 36px;
}

@media screen and (max-width: 640px) {
  .breadcrumb  {
    margin: 0 0 20px;
    line-height: 1.5 !important;
  }
}

.breadcrumb_inner {
  width: 980px;
  margin: 0 auto;
}

@media screen and (max-width: 640px) {
  .breadcrumb_inner {
    width: 100%;
    padding: 0 15px;
  }
}

.breadcrumb_inner li {
  display: inline;
}

.breadcrumb_inner li:nth-child(n+2):before {
  content: "";
  display: inline-block;
  height: 0;
  width: 0;
  border-bottom: 4px solid transparent;
  border-left: 4px solid #c2c2c2;
  border-top: 4px solid transparent;
  margin-left: 5px;
}

.breadcrumb_inner li > a {
  color: #305889;
  font-size: 1rem;
  text-decoration: none;
}

.breadcrumb_inner li > span {
  color: #838383;
  font-size: 1rem;
}

/* request
--------------------------------------------------------------*/
.article .request_plusTxt {
  text-align: center;
  margin: 20px 0;
}

@media screen and (max-width: 640px) {
  .article .request_plusTxt {
    width: 100px;
    margin: 0 auto 10px;
  }
}

/* Icon
--------------------------------------------------------------*/
.form_iconRequired {
  color: red;
}

/* Box
--------------------------------------------------------------*/
.form_box {
  display: table;
  width: 100%;
  margin-bottom: 20px;
}

@media screen and (max-width: 640px) {
  .form_box {
    display: block;
  }
}

.form_box p {
  margin-bottom: 0;
}

.form_box dt, .form_box dd {
  display: table-cell;
  vertical-align: top;
}

@media screen and (max-width: 640px) {
  .form_box dt, .form_box dd {
    display: block;
  }
}

.form_box dt {
  width: 25%;
  font-weight: bold;
}

@media screen and (max-width: 640px) {
  .form_box dt {
    width: 100%;
    margin-bottom: 5px;
  }
}

.form_box dd {
  width: 75%;
  color: #6a7a8a;
}

@media screen and (max-width: 640px) {
  .form_box dd {
    width: 100%;
  }
}

.form_boxNotes {
  overflow-y: auto;
  background: #f9f9f9;
  border: solid 1px #d3d9de;
  margin-bottom: 15px;
  padding: 10px;
  height: 200px;
}

@media screen and (max-width: 640px) {
  .form_boxNotes {
    font-size: 1.2rem;
  }
}

/* Form Parts
--------------------------------------------------------------*/
.form_input,
.form_select {
  width: 100%;
  padding: 6px 12px;
  border: solid 1px #ccc;
  border-radius: 5px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  color: #6a7a8a;
  margin-bottom: 8px;
}

@media screen and (min-width: 641px), print {
  .form_input:first-child,
  .form_select:first-child {
    margin-top: -6px;
  }
}

.form_select {
  height: 41px;
}

/* Box
--------------------------------------------------------------*/
.form_grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

@media screen and (max-width: 640px) {
  .form_grid {
    display: block;
  }
}

.form_grid .col2 {
  width: 49%;
}

@media screen and (max-width: 640px) {
  .form_grid .col2 {
    width: 100%;
  }
}

/*
#overview
Banner
*/
/*
#styleguide

バナー
```
<div class="grid_cell banner_wrap">
  <a href="/kouken/"><img src="/resources/img/common/banner/banner_support.png" width="576" height="204" alt="成年後見申立から示談交渉まで安心フルサポート！"></a>
</div>
```
*/
.banner_wrap {
  text-align: center;
}

@media screen and (max-width: 640px) {
  .banner_wrap img {
    max-width: 280px;
  }
}

@media screen and (max-width: 640px) {
  .banner_wrap.grid_cell img {
    max-width: 280px;
  }
}

/* banner_media
---------------------------*/
/*
#styleguide

Banner Media
メディアバナーリスト
```
<div class="banner_media">
  <ul>
    <li><a href="http://www.adire.jp/media/book/dummy.html" target="_blank"><img src="/resources/img/common/banner/banner_media1.png" width="345" height="100" alt="後遺障害・慰謝料 無料診断サービス"></a></li>
    <li><a href="http://www.adire.jp/media/book/1book.html" target="_blank"><img src="/resources/img/common/banner/banner_media2.png" width="345" height="100" alt="成年後見申立から示談交渉まで安心フルサポート！"></a></li>
  </ul>
</div>
```
*/
.banner_media {
  margin: 0 auto;
}

@media screen and (min-width: 641px), print {
  .banner_media.typeSmall li {
    width: 288px;
  }
}

@media screen and (max-width: 640px) {
  .banner_media {
    width: 280px;
    margin: 0 auto 16px;
  }
}

.banner_media ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

@media screen and (max-width: 640px) {
  .banner_media ul {
    display: block;
  }
}

.banner_media li {
  margin: 0 2%;
}

@media screen and (max-width: 640px) {
  .banner_media li {
    margin: 7px 0;
  }
}

.banner_media img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

/* bottom-buttons
--------------------------------------------------------------*/
.toppage .bottom_buttons_box {
  display: none;
}

.bottom_buttons_box {
  width: 100%;
  margin: 0 auto;
  background: #eee;
  border-top: 1px solid #ddd;
}

.bottom_buttons_wrap {
  width: 980px;
  margin: 0 auto;
  padding: 30px;
}

.bottom_buttons_head {
  font-size: 28px;
  font-weight: bold;
  text-align: center;
  line-height: 28px;
}

.bottom_buttons {
  margin-top: 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.bottom_buttons_button {
  width: 223px;
  background: #fff;
  border-radius: 7px;
}

.bottom_buttons_button a {
  color: #000;
  font-size: 1.8rem;
  font-weight: bold;
  padding: .7em 0;
  border: 1px solid #f78128;
  border-radius: 7px;
  position: relative;
  width: 100%;
  display: inline-block;
  line-height: 1.5;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  outline: none;
  border-radius: 8px;
  cursor: pointer;
}

.bottom_buttons_button a::after {
  content: "";
  font-family: "fontello";
  font-style: normal;
  position: absolute;
  top: 50%;
  right: 10px;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  font-size: 25px;
  font-weight: normal;
  color: #f78128;
}

.bottom_buttons_button a:hover {
  color: #fff;
  background: #f78128;
  opacity: 10;
}

.bottom_buttons_button a:hover::after,
.bottom_buttons_button a:hover i {
  color: #fff;
}

.bottom_buttons_button a i {
  position: absolute;
  top: 50%;
  left: 15px;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  color: #f78128;
  font-size: 25px;
  font-weight: bold;
}

.bottom_buttons_button .bottom_button_text {
  display: inline-block;
  margin-left: 15px;
}

@media screen and (max-width: 640px) {
  .bottom_buttons_wrap {
    width: 100%;
    padding: 15px;
  }
  .bottom_buttons_head {
    font-size: 17px;
    line-height: 23px;
  }
  .bottom_buttons {
    margin-top: 15px;
  }
  .bottom_buttons_button {
    width: 49%;
    margin-bottom: 2.5%;
  }
  .bottom_buttons_button:nth-child(odd) {
    margin-right: 2%;
  }
  .bottom_buttons_button:nth-child(n+3) {
    margin-bottom: 0;
  }
  .bottom_buttons_button a {
    padding: 12px 0;
    font-size: 12px;
  }
  .bottom_buttons_button a::after {
    font-size: 22px;
    right: 8%;
  }
  .bottom_buttons_button a i {
    font-size: 20px;
    left: 8%;
  }
}

/* bottom-banner
--------------------------------------------------------------*/
.bottom_banner_box {
  width: 100%;
  margin: 0 auto;
  background: #eee;
  border-top: 1px solid #ddd;
}

@media screen and (max-width: 640px) {
  .bottom_banner_box {
    border-top: none;
  }
}

.bottom_banner_wrap {
  width: 980px;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
	  -ms-flex-align: center;
	      align-items: center;
}

.bottom_banner_item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 240px;
  height: 70px;
  margin: 14px 0 16px;
  padding: 10px;
  border: 1px solid #ddd;
  background: #fff;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  color: #21262b;
  text-decoration: none;
}

.bottom_banner_item::after {
  content: "";
  font-family: "fontello";
  font-style: normal;
  position: absolute;
  top: 50%;
  right: 6px;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  color: #f78128;
}

.bottom_banner_item img {
  width: 75px;
  height: auto;
  margin-right: 10px;
}

.link_banner .bottom_banner_item img {
  width: 100%;
}
.bottom_banner_wrap .link_banner {
	height: auto;
}
.bottom_banner_wrap .link_banner .bottom_banner_item {
	border: none;
	background: none;
	padding: 0;
	height: auto;
	width: 100%;
}

@media screen and (min-width: 641px) {
	.bottom_banner_wrap .link_banner .bottom_banner_item {
		width: 240px;
	}
}

.link_banner .bottom_banner_item:after  {
	display: none;
}

.bottom_banner_item.typeBlank:after {
  content: "";
  font-family: "fontello";
  font-style: normal;
}

.bottom_banner_head {
  font-size: 13px;
  font-weight: bold;
  line-height: 20px;
}

.bottom_banner_head .bottom_banner_text {
  display: block;
  font-size: 12px;
  font-weight: normal;
}

@media screen and (max-width: 640px) {
  .bottom_banner_wrap {
    width: 320px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    padding: 16px 20px 17px;
  }
  .bottom_banner_wrap li,
  .bottom_banner_wrap .bottom_banner_item {
    width: 100%;
    height: 63px;
    margin: 0 auto 8px;
  }
  .bottom_banner_wrap li img,
  .bottom_banner_wrap .bottom_banner_item img {
    width: 67.5px;
    margin-right: 8px;
  }
  .bottom_banner_head {
    font-size: 12px;
    line-height: 17px;
  }
  .bottom_banner_head .bottom_banner_text {
    font-size: 10.8px;
    line-height: 12px;
  }
  .link_banner .bottom_banner_item img {
    width: 100%;
  }
}

/* contact_banner_wrap
---------------------------*/
.contact_banner_wrap {
  margin: 40px 0 50px;
  width: 100%;
  /* contact_banner_head
  ---------------------------*/
  /* contact_banner_body
  ---------------------------*/
}

.contact_banner_wrap .contact_banner {
  width: 990px;
  margin: 0 auto;
  border: 2px solid #97abc4;
  padding: 4px;
  position: relative;
}

.contact_banner_wrap .contact_banner .img {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 1;
}

.contact_banner_wrap .contact_banner_head {
  padding: 20px 30px;
  background-color: #eaeef3;
}

.contact_banner_wrap .contact_banner_head .heading {
  color: #305889;
  font-size: 3.8rem;
  border-bottom: 1px solid #305889;
  padding-bottom: 14px;
  margin-bottom: 15px;
  font-weight: bold;
  line-height: 1.2em;
}

.contact_banner_wrap .contact_banner_head .heading > span {
  color: #f78128;
  font-size: 4.4rem;
}

.contact_banner_wrap .contact_banner_head .contact {
  width: 420px;
}

.contact_banner_wrap .contact_banner_head .contact > img {
  vertical-align: bottom;
  width: 100%;
  height: auto;
}

.contact_banner_wrap .contact_banner_head .button {
  margin-top: 20px;
  width: 100%;
  position: relative;
  z-index: 3;
}

.contact_banner_wrap .contact_banner_head .button > .button_inner {
  display: block;
  /*padding: 10px 45px 10px 55px;*/
  padding: 10px 50px;
  font-size: 1.8rem;
  border-radius: 8px;
  position: relative;
}

.contact_banner_wrap .contact_banner_head .button > .button_inner:after, .contact_banner_wrap .contact_banner_head .button > .button_inner:before {
  color: #fff;
  position: absolute;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  font-size: 2.4rem;
  font-weight: normal;
}

.contact_banner_wrap .contact_banner_head .button > .button_inner:after {
  content: "";
  font-family: "fontello";
  font-style: normal;
  right: 20px;
  top: 50%;
}

/*.contact_banner_wrap .contact_banner_head .button > .button_inner:before {
  content: "";
  font-family: "fontello";
  font-style: normal;
  left: 20px;
  top: 50%;
}*/

.contact_banner_wrap .contact_banner_headInner {
  width: 740px;
}

.contact_banner_wrap .contact_banner_headInner:after {
  content: "";
  clear: both;
  display: block;
}

.contact_banner_wrap .contact_banner_headLeft {
  float: left;
}

.contact_banner_wrap .contact_banner_headRight {
  float: right;
}

.contact_banner_wrap .contact_banner_body {
  padding: 20px 20px 15px;
}

.contact_banner_wrap .contact_banner_body:after {
  content: "";
  clear: both;
  display: block;
}

.contact_banner_wrap .contact_banner_body .list_check > li {
  line-height: 1.2;
  margin-bottom: 6px;
}

.contact_banner_wrap .contact_banner_body .info {
  position: relative;
  z-index: 2;
  text-shadow: -1px 0 #fff, 0 2px #fff, 3px 0 #fff, 0 -1px #fff;
}

.contact_banner_wrap .contact_banner_body .info .name {
  font-size: 1.6rem;
  line-height: 1.5;
  letter-spacing: 2px;
}

.contact_banner_wrap .contact_banner_body .info .group {
  font-size: 1.1rem;
  line-height: 1.5;
}

.contact_banner_wrap .contact_banner_bodyLeft {
  width: 550px;
  float: left;
}

.contact_banner_wrap .contact_banner_bodyRight {
  width: 340px;
  float: right;
}

@media screen and (max-width: 640px) {
  .contact_banner_wrap {
    display: none;
  }
}

/*
#overview
FAQ
*/
/* blockFaq
--------------------------------------------------------------*/
/*
#styleguide

交通事故全般のよくある質問下層ページ用
```
<div class="blockFaq">
  <h1 class="blockFaq_head"><i class="icon_faq typeQ">Q</i>警察から「交通事故から時間が経っているので，物損事故から人身事故への切り替えはできない」と言われてしまいました。どうしたらよいですか？</h1>
  <div class="blockFaq_body">
    <i class="icon_faq typeA">A</i>
    <p>交通事故から長期間経過してしまった場合には，ケガと事故との因果関係が明らかではない等の理由から，物損事故から人身事故への切り替えができないことがあります。</p>
    <p>このような場合には，もはや人身事故の交通事故証明書を入手することはできません。しかし，自賠責保険金については「人身事故証明書入手不能理由書」という書類を提出すれば，請求できる余地があります。この理由書については，保険会社に問い合わせてみてください。</p>
  </div>
</div>
```
*/
.blockFaq .icon_faq {
  position: absolute;
  top: 20px;
  left: 0;
}

@media screen and (max-width: 640px) {
  .blockFaq .icon_faq {
    position: static;
    display: block;
    margin: 18px auto 15px;
  }
}

.blockFaq .box_secondary .box_image_img img {
  max-width: 290px;
}

.blockFaq .box_secondary .box_image_text p:last-child {
  margin-bottom: 0;
}

@media screen and (min-width: 641px), print {
  .blockFaq .grid_3of1 .grid_cell > a {
    border-right: 1px dotted #dbdbdb;
    display: block;
    padding-right: 10px;
  }
  .blockFaq .grid_3of1 .grid_cell:last-child > a {
    border-right: none;
  }
}

@media screen and (max-width: 640px) {
  .blockFaq .grid_3of1 .grid_cell > a {
    border-bottom: 1px solid #eee;
  }
  .blockFaq .grid_3of1 .grid_cell:last-child > a {
    border-bottom: none;
  }
}

.blockFaq_head,
.blockFaq_body {
  position: relative;
  padding: 25px 25px 25px 55px;
}

@media screen and (max-width: 640px) {
  .blockFaq_head,
  .blockFaq_body {
    padding: 0 8px 15px;
  }
}

.blockFaq_head {
  border-bottom: 1px solid #e0e0e0;
  color: #305889;
}

@media screen and (max-width: 640px) {
  .blockFaq_head {
    font-weight: bold;
  }
}

/*
#styleguide

faqのindexページで使用しているスタイル
```
<div class="box_faq">
  <div class="box_faq_item">
    <div class="box_faq_itemInner">
      <h3 class="headline3 js_toggleHead_spOnly">後遺障害認定手続のよくある質問</h3>
      <div class="js_toggleCont">
        <ul class="list_relationLink typeFaq">
          <li><a href="/faq/ninteitetsuzuki_01.html"><i class="icon_faq typeQ">Q</i><span>なぜ後遺障害の等級認定の申請をする必要があるのですか？</span></a></li>
          <li><a href="/faq/ninteitetsuzuki_02.html"><i class="icon_faq typeQ">Q</i><span>後遺障害の等級認定は，いつ申請すればよいですか？</span></a></li>
          <li><a href="/faq/ninteitetsuzuki_03.html"><i class="icon_faq typeQ">Q</i><span>症状固定は，誰が判断するのですか？</span></a></li>
        </ul>
        <p class="text_more"><a href="/faq/ninteitetsuzuki.html" class="link_arrow">このカテゴリすべての質問を見る</a></p>
      </div>
    </div>
  </div>
  <div class="box_faq_item">
    <div class="box_faq_itemInner">
      <h3 class="headline3 js_toggleHead_spOnly">死亡事故のよくある質問</h3>
      <div class="js_toggleCont">
        <ul class="list_relationLink typeFaq">
          <li><a href="/faq/shiboujiko_01.html"><i class="icon_faq typeQ">Q</i><span>被害者が亡くなってしまった場合，誰が加害者や保険会社に損害賠償を請求するのですか？</span></a></li>
          <li><a href="/faq/shiboujiko_02.html"><i class="icon_faq typeQ">Q</i><span>交通事故で大切な夫を失ってしまいました。加害者に対して損害賠償だけではなく，刑事責任を追及したいのですができますか？</span></a></li>
          <li><a href="/faq/shiboujiko_03.html"><i class="icon_faq typeQ">Q</i><span>交通事故で母親を亡くしました。保険会社からは母親に過失が１０％あると言われているのですが，本人が亡くなっているため，事故時の状況がわからず，この過失割合に納得ができません。母親の事故の状況を知る方法はありますか？</span></a></li>
        </ul>
        <p class="text_more"><a href="/faq/shiboujiko.html" class="link_arrow">このカテゴリすべての質問を見る</a></p>
      </div>
    </div>
  </div>
</div>
```
*/
.box_faq {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-bottom: 130px;
}

.box_faq .box_faq_item {
  width: 470px;
  border-bottom: 1px solid #305889;
  padding-bottom: 70px;
  position: relative;
}

.box_faq .box_faq_item .list_relationLink li {
  border-bottom: none;
}

.box_faq .box_faq_item .list_relationLink a {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.box_faq .box_faq_itemInner {
  margin-bottom: 10px;
}

@media screen and (min-width: 641px), print {
  .box_faq .box_faq_item .text_more {
    position: absolute;
    right: 0;
    bottom: -40px;
    margin-bottom: 0;
  }
  .box_faq .box_faq_item .js_toggleCont {
    display: block !important;
  }
}

@media screen and (max-width: 640px) {
  .box_faq {
    display: block;
    margin-bottom: 0;
  }
  .box_faq .box_faq_item {
    width: 100%;
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 1em;
  }
  .box_faq .box_faq_item .js_toggleCont {
    display: none;
  }
  .box_faq .box_faq_item .list_relationLink {
    margin-bottom: 1em;
  }
  .box_faq .box_faq_item .list_relationLink a {
    border-bottom: 1px #cbcbcb dashed;
  }
  .box_faq .box_faq_item .text_more {
    text-align: center;
    margin-bottom: 0;
  }
}

/* block_faqList
--------------------------------------------------------------*/
/*
#styleguide

faqリスト。
```
<div class="block_faqList">
  <div class="block_faqList_item">
    <div class="block_faqList_q">
      <div class="itemIcon"><i>Q</i></div>
      <div class="itemText">成年後見人を選任せずに，保険会社と示談交渉しても問題ないですか？</div>
    </div>
    <div class="block_faqList_a">
      <div class="itemIcon"><i>A</i></div>
      <div class="itemText">
        <p>ご本人に意思疎通ができず判断能力が失われている場合，損害賠償請求や示談交渉はできません。<br>また代理人として弁護士が行っても，判断能力が欠けている本人からの依頼は無効とされます。<br>そのため，成年後見人を選任する必要があります。</p>
      </div>
    </div>
  </div><!-- block_faqList_item -->
</div>

<div class="block_faqList type2">
  <div class="block_faqList_item js_dataLink" data-link="/faq/songai_a01.html">
    <div class="block_faqList_q js_toggleHead_spOnly">
      <i class="itemArrow"></i>
      <div class="itemIcon"><i>Q</i></div>
      <div class="itemText">タイトルタイトル</div>
    </div>
    <div class="js_toggleCont">
      <div class="block_faqList_a">
        <div class="itemIcon"><i>A</i></div>
        <div class="itemText">
          <p>テキストテキスト</p>
          <p class="itemMore_wrap js_dataLink" data-link="/faq/songai_a01.html"><span class="itemMore">続きを読む</span></p>
        </div>
      </div>
    </div>
  </div><!-- block_faqList_item -->
</div>
```
*/
.block_faqList {
  border-top: 2px solid #305889;
  border-bottom: 2px solid #305889;
}

.block_faqList.type2 {
  border-top: 2px solid #fff;
  border-bottom: 1px dashed #fff;
}

.block_faqList.type2 .block_faqList_item {
  cursor: pointer;
  position: relative;
}

.block_faqList.type2 .block_faqList_item:hover {
  background: #4f719b;
}

.block_faqList.type2 .block_faqList_item:nth-child(n+2) {
  border-color: #fff;
}

.block_faqList.type2 .block_faqList_item .itemArrow {
  display: block;
  width: 41px;
  height: 41px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  right: 26px;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}

@media screen and (max-width: 640px) {
  .block_faqList.type2 .block_faqList_item .itemArrow {
    width: 25px;
    height: 25px;
    right: 0;
  }
}

.block_faqList.type2 .block_faqList_item .itemArrow:after {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-top: 2px solid #305889;
  border-right: 2px solid #305889;
  position: absolute;
  -webkit-transform: translate(-75%, -50%) rotate(45deg);
      -ms-transform: translate(-75%, -50%) rotate(45deg);
          transform: translate(-75%, -50%) rotate(45deg);
  left: 50%;
  top: 50%;
}

@media screen and (max-width: 640px) {
  .block_faqList.type2 .block_faqList_item .itemArrow:after {
    width: 6px;
    height: 6px;
    border-width: 1px;
    -webkit-transform: translate(-50%, -75%) rotate(135deg);
        -ms-transform: translate(-50%, -75%) rotate(135deg);
            transform: translate(-50%, -75%) rotate(135deg);
  }
}

.block_faqList.type2 .itemText {
  color: #fff;
}

.block_faqList.type2 .block_faqList_q i {
  color: #305889;
  background: #fff;
}

@media screen and (max-width: 640px) {
  .block_faqList.type2 .block_faqList_q {
    position: relative;
  }
}

.block_faqList.type2 .block_faqList_q.active .itemArrow:after {
  -webkit-transform: translate(-50%, -50%) rotate(-45deg);
      -ms-transform: translate(-50%, -50%) rotate(-45deg);
          transform: translate(-50%, -50%) rotate(-45deg);
}

@media screen and (max-width: 640px) {
  .block_faqList.type2 .block_faqList_q,
  .block_faqList.type2 .block_faqList_a {
    padding-right: 30px;
  }
}

.block_faqList_item {
  width: 100%;
  display: table;
}

@media screen and (min-width: 641px), print {
  .block_faqList_item {
    padding-right: 70px;
  }
}

.block_faqList_item:nth-child(n+2) {
  border-top: 1px dashed #617fa5;
}

.block_faqList_item .itemIcon {
  width: 107px;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

@media screen and (max-width: 640px) {
  .block_faqList_item .itemIcon {
    width: 45px;
    text-align: left;
    vertical-align: top;
  }
}

.block_faqList_item .itemIcon i {
  display: inline-block;
  border-radius: 50%;
  font-weight: bold;
  text-align: center;
  color: #fff;
}

.block_faqList_item .itemText {
  display: table-cell;
}

.block_faqList_q {
  padding: 40px 0 15px;
}

@media screen and (max-width: 640px) {
  .block_faqList_q {
    padding: 15px 0;
  }
}

.block_faqList_q .itemIcon i {
  width: 74px;
  height: 74px;
  font-size: 3.5rem;
  background: #305889;
}

@media screen and (max-width: 640px) {
  .block_faqList_q .itemIcon i {
    width: 30px;
    height: 30px;
    font-size: 1.5rem;
  }
}

.block_faqList_q .itemText {
  font-size: 2rem;
  font-weight: bold;
  color: #305889;
  vertical-align: middle;
}

@media screen and (max-width: 640px) {
  .block_faqList_q .itemText {
    font-size: 1.2rem;
  }
}

.block_faqList_a {
  padding-bottom: 40px;
}

.block_faqList_a p {
  margin-bottom: 0;
}

@media screen and (max-width: 640px) {
  .block_faqList_a {
    padding-bottom: 15px;
  }
}

.block_faqList_a .itemText {
  vertical-align: top;
}

@media screen and (max-width: 640px) {
  .block_faqList_a .itemText {
    font-size: 1.2rem;
  }
}

.block_faqList_a .itemIcon i {
  width: 48px;
  height: 48px;
  font-size: 2.3rem;
  background: #f78128;
}

@media screen and (max-width: 640px) {
  .block_faqList_a .itemIcon i {
    width: 30px;
    height: 30px;
    font-size: 1.5rem;
  }
}

.block_faqList_a .itemMore_wrap {
  text-align: right;
  display: none;
}

@media screen and (max-width: 640px) {
  .block_faqList_a .itemMore_wrap {
    display: block;
    margin: 15px 0 0 0;
  }
}

.block_faqList_a .itemMore {
  display: inline-block;
  background: #fbfbfb;
  border: none;
  padding: 3px 15px;
  border-radius: 3px;
  color: #305889;
  text-decoration: none;
  font-size: 1.2rem;
  line-height: 1.4;
}

/*
#overview
Block Map Merit
*/
/*
#styleguide
/map/で使用しているブロックパーツです。
```
<div class="block_merit">
  <div class="merit_box">
    <div class="merit_icon icon_balance">
      <img src="/resources/img/common/icon/icon_balance.png" width="51" height="44" alt="増額">
    </div>
    <p class="head">賠償金の増額が<br>期待できます</p>
    <p class="text">弁護士が介入すると裁判所基準で示談金額を算定し、保険会社に請求するため、多くの場合、示談金額を増額することができます。</p>
  </div>
  <div class="merit_box">
    <div class="merit_icon icon_foot2">
      <img src="/resources/img/common/icon/icon_foot2.png" width="30" height="50" alt="通院中">
    </div>
    <p class="head">通院中のお悩みにも<br>お答えします</p>
    <p class="text">治療経過をお伺いしながら、通院中のお悩みについてもアドバイスできるので、安心して治療に専念することができます。</p>
  </div>
  <div class="merit_box icon_handshake">
    <div class="merit_icon">
      <img src="/resources/img/common/icon/icon_handshake.png" width="54" height="38" alt="交渉">
    </div>
    <p class="head">交渉の煩わしさから<br>解放されます</p>
    <p class="text">保険会社との交渉を弁護士に依頼することができるため、精神的な負担を軽減することができます。</p>
  </div>
</div>
```
*/
/* block_merit
--------------------------------------------------------------*/
.block_merit {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin: 30px auto 60px;
  padding: 56px 0 4px;
}

@media screen and (max-width: 640px) {
  .block_merit {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-flow: column nowrap;
            flex-flow: column nowrap;
    margin: 0 auto 40px;
    padding: 0;
  }
}

.block_merit .merit_box {
  width: 216px;
  margin-right: 14px;
  padding: 53px 20px 20px;
  border: 1px solid #305889;
  border-radius: 10px;
  box-shadow: 4px 4px #cecece;
  background: #fff;
  position: relative;
}

.block_merit .merit_box:last-child {
  margin-right: 4px;
}

.block_merit .merit_box::before {
  content: "";
  position: absolute;
  width: 110px;
  height: 55px;
  top: -56px;
  left: 53px;
  border-top: 1px solid #305889;
  border-right: 1px solid #305889;
  border-left: 1px solid #305889;
  border-radius: 55px 55px 0 0;
  background: #fff;
}

@media screen and (max-width: 640px) {
  .block_merit .merit_box {
    width: 100%;
    padding: 20px 15px 25px;
    border-top: none;
    border-right: none;
    border-left: none;
    border-bottom: 2px dotted #305889;
    border-radius: 0;
    box-shadow: none;
    clear: both;
  }
  .block_merit .merit_box:last-child {
    margin: 0;
  }
  .block_merit .merit_box::before {
    display: none;
  }
}

.block_merit .merit_box .head {
  display: block;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  line-height: 1.5em;
  color: #305889;
  margin-bottom: 20px;
}

@media screen and (max-width: 640px) {
  .block_merit .merit_box .head {
    color: #000;
    text-align: left;
    margin-top: 5px;
  }
}

.block_merit .merit_box .text {
  line-height: 2em;
  margin-bottom: 0;
}

.block_merit .merit_box .merit_icon {
  width: 86px;
  height: 86px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-radius: 50%;
  background: #305889;
  margin: 0 auto;
  position: absolute;
  top: -45px;
  left: 66px;
  z-index: 200;
}

@media screen and (max-width: 640px) {
  .block_merit .merit_box .merit_icon {
    width: 60px;
    height: 60px;
    position: static;
    float: left;
    margin-right: 15px;
  }
}

@media screen and (max-width: 640px) {
  .block_merit .icon_balance img {
    width: 50%;
  }
  .block_merit .icon_foot2 img {
    width: 35%;
  }
  .block_merit .icon_handshake img {
    width: 70%;
  }
}

/* block_map_adire
---------------------------*/
.block_mapWrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
  margin-bottom: 20px;
}

.block_mapWrap .block_map {
  display: block;
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
  position: relative;
  width: 320px;
  height: 320px;
  background: url(/resources/img/adire/bg_japan.png) no-repeat center center;
  text-shadow: 1px 1px 0 #fff;
}

.block_mapWrap .block_map .text_heading {
  position: absolute;
  top: 80px;
  left: 0;
  font-weight: bold;
  font-size: 1.8rem;
  line-height: 1.3;
}

.block_mapWrap .block_map .text_heading .note {
  font-size: 1.3rem;
}

.block_mapWrap .block_map .text_heading .text_em {
  color: #305889;
  font-size: 2.2rem;
}

.block_mapWrap .block_map_eastwest {
  width: 320px;
}

.block_mapWrap .navmap_title {
  font-weight: bold;
  margin-bottom: 4px;
}

.block_mapWrap .navmap_title:before {
  content: "";
  font-family: "fontello";
  font-style: normal;
  color: #0d8cdf;
  margin-right: .3em;
}

.block_mapWrap .navmap_inner {
  margin-bottom: 10px;
}

.block_mapWrap .navmap_inner > li {
  display: inline-block;
  margin-bottom: .5em;
  text-align: center;
}

.block_mapWrap .navmap_inner > li > a {
  color: #333;
  line-height: 1.3;
  position: relative;
  display: block;
  background-color: #fff;
  border: 1px solid #0e8ce0;
  border-radius: 5px;
  box-shadow: 0 3px 0 #ddd;
  text-decoration: none;
  width: 5.2em;
  padding: .6em .7em .6em 0;
  font-size: 1.4rem;
}

.block_mapWrap .navmap_inner > li > a:after {
  content: "";
  font-family: "fontello";
  font-style: normal;
  position: absolute;
  color: #0e8ce0;
  right: 8px;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}

.block_mapWrap .navmap_inner > li > a:hover {
  background-color: #0e8ce0;
  color: #fff;
}

.block_mapWrap .navmap_inner > li > a:hover:after {
  color: #fff;
}

@media screen and (max-width: 640px) {
  .block_mapWrap {
    display: none;
  }
}

/*
#overview
Block Voice
*/
/*
#styleguide
block_voice
「ご相談者の声」のボックスです。

```
<div class="block_voice_wrap">
  <div class="block_voice">
    <div class="avatar"><img src="/resources/img/common/avatar/avatar_men1.jpg" width="90" height="120" alt="アバター"></div>
    <div class="text">
      <p class="head">
        <span class="pcCont">北海道にお住まいのＳ・Ｉさんの感想</span>
        <span class="head_item">Ｓ・Ｉさん／北海道</span>
      </p>
      <div class="body">
        <p>ご相談者の声テキストご相談者の声テキストご相談者の声テキストご相談者の声テキストご相談者の声テキストご相談者の声テキスト</p>
        <p>ご相談者の声テキストご相談者の声テキストご相談者の声テキストご相談者の声テキストご相談者の声テキストご相談者の声テキストご相談者の声テキストご相談者の声テキストご相談者の声テキスト</p>
      </div>
    </div>
  </div><!-- .block_voice -->
</div>
```
*/
/* block_voice
--------------------------------------------------------------*/
.block_voice_wrap {
  margin-top: 30px;
}

@media screen and (max-width: 640px) {
  .block_voice_wrap {
    margin-top: 20px;
  }
}

.block_voice {
  width: 100%;
  padding-top: 18px;
  border-bottom: 2px solid #305889;
}

.block_voice:after {
  content: "";
  clear: both;
  display: block;
}

@media screen and (max-width: 640px) {
  .block_voice {
    padding: 18px 8px;
  }
}

.block_voice:first-child {
  border-top: 2px solid #305889;
}

.block_voice .avatar {
  width: 90px;
  float: left;
  margin-bottom: 18px;
}

@media screen and (max-width: 640px) {
  .block_voice .avatar {
    width: 18%;
    min-width: 70px;
    max-width: 90px;
    margin: 0 18px 0 0;
  }
}

.block_voice .avatar img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

.block_voice .text {
  margin: 0 0 18px 110px;
}

@media screen and (max-width: 640px) {
  .block_voice .text {
    margin: 0;
  }
}

.block_voice .text p:last-child {
  margin-bottom: 0;
}

.block_voice .head {
  font-size: 2rem;
  line-height: 1.5;
  font-weight: bold;
  margin-bottom: 10px;
}

@media screen and (max-width: 640px) {
  .block_voice .head {
    margin-bottom: 6px;
  }
}

.block_voice .head span {
  display: block;
}

@media screen and (max-width: 640px) {
  .block_voice .head span.pcCont {
    display: none;
  }
}

.block_voice .box {
  clear: both;
  margin-bottom: 18px;
  padding: 0;
}

@media screen and (max-width: 640px) {
  .block_voice .box {
    display: none;
  }
}

/*
#overview
Block Office
*/
/*
#styleguide
block_officeList

支店リストのブロックパーツです。
```
<ul class="block_officeList">
  <li class="officeList_item">
    <a href="/adire/sapporo.html">
      <dl>
        <dt class="office_name">札幌支店</dt>
        <dd class="office_info">
          <div class="image"><img src="http://www.adire.jp/adire/img/img_sapporo.jpg" width="177" height="140" alt="札幌支店"></div>
          <div class="body">
            <p>&#12306;０６０−０００５<br>北海道札幌市中央区北５条西２−５<br>ＪＲタワーオフィスプラザさっぽろ１５F <br>あああああああああああああああああああああああああ</p>
            <div class="conditions">
              <span class="label label_kids">キッズOK</span>
              <span class="label label_parking">無料駐車場</span>
            </div>
          </div>
        </dd>
      </dl>
    </a>
  </li>
  <li class="officeList_item">
    <a href="/adire/sapporo.html">
      <dl>
        <dt class="office_name">札幌支店</dt>
        <dd class="office_info">
          <div class="image"><img src="http://www.adire.jp/adire/img/img_sapporo.jpg" width="177" height="140" alt="札幌支店"></div>
          <div class="body">
            <p>&#12306;０６０−０００５<br>北海道札幌市中央区北５条西２−５<br>ＪＲタワーオフィスプラザさっぽろ１５F <br>あああああああああああああああああああああああああ</p>
            <div class="conditions">
              <span class="label label_kids">キッズOK</span>
              <span class="label label_parking">無料駐車場</span>
            </div>
          </div>
        </dd>
      </dl>
    </a>
  </li>
  <li class="officeList_item">
    <a href="/adire/sapporo.html">
      <dl>
        <dt class="office_name">札幌支店</dt>
        <dd class="office_info">
          <div class="image"><img src="http://www.adire.jp/adire/img/img_sapporo.jpg" width="177" height="140" alt="札幌支店"></div>
          <div class="body">
            <p>&#12306;０６０−０００５<br>北海道札幌市中央区北５条西２−５<br>ＪＲタワーオフィスプラザさっぽろ１５F <br>あああああああああああああああああああああああああ</p>
            <div class="conditions">
              <span class="label label_kids">キッズOK</span>
              <span class="label label_parking">無料駐車場</span>
            </div>
          </div>
        </dd>
      </dl>
    </a>
  </li>
  <li class="officeList_item">
    <a href="/adire/sapporo.html">
      <dl>
        <dt class="office_name">札幌支店</dt>
        <dd class="office_info">
          <div class="image"><img src="http://www.adire.jp/adire/img/img_sapporo.jpg" width="177" height="140" alt="札幌支店"></div>
          <div class="body">
            <p>&#12306;０６０−０００５<br>北海道札幌市中央区北５条西２−５<br>ＪＲタワーオフィスプラザさっぽろ１５F <br>あああああああああああああああああああああああああ</p>
            <div class="conditions">
              <span class="label label_kids">キッズOK</span>
              <span class="label label_parking">無料駐車場</span>
            </div>
          </div>
        </dd>
      </dl>
    </a>
  </li>
</ul>
```
*/
/* block_officeList
--------------------------------------------------------------*/
.block_officeList {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-top: 30px;
}

@media screen and (max-width: 640px) {
  .block_officeList {
    width: 100%;
    margin-top: 20px;
  }
}

.block_officeList p {
  margin-bottom: 0;
}

.block_officeList .officeList_item {
  width: 475px;
  margin-bottom: 20px;
  border: 2px solid #ddd;
  box-shadow: 0 2px 0 #ddd;
}

@media screen and (max-width: 640px) {
  .block_officeList .officeList_item {
    width: 100%;
  }
}

.block_officeList .officeList_item a {
  text-decoration: none;
  color: inherit;
  display: block;
}

.block_officeList .officeList_item a:hover {
  opacity: 0.7;
}

.block_officeList .office_name {
  font-weight: bold;
  border-bottom: 1px solid #ddd;
  padding: 0.5em 3%;
  background: #f6f6f6;
  position: relative;
}

.block_officeList .office_name::after {
  content: "";
  font-family: "fontello";
  font-style: normal;
  position: absolute;
  right: 3%;
  font-weight: normal;
  color: #305889;
}

.block_officeList .office_info {
  display: block;
  padding: 15px;
}

.block_officeList .office_info:after {
  content: "";
  clear: both;
  display: block;
}

.block_officeList .office_info .image {
  width: 100px;
  height: 100px;
  overflow: hidden;
  margin-right: 15px;
  float: left;
}

@media screen and (max-width: 640px) {
  .block_officeList .office_info .image {
    width: 70px;
    height: 70px;
    margin-right: 3%;
  }
}

.block_officeList .office_info .image img {
  width: 130%;
  height: auto;
  position: relative;
  left: -10px;
}

.block_officeList .office_info .body {
  font-size: 1.3rem;
  line-height: 1.4;
  overflow: hidden;
}

.block_officeList .office_info .conditions {
  margin-top: 5px;
}

/*
#styleguide
block_officeHead

/map/下層で使用しているヘッドパーツです。
```
<div class="block_officeHead">
  <p class="block_officeHead_item"><span>沖縄県</span>の交通事故被害は<br><span class="text_marker type1">アディーレ</span>にご相談ください！</p>
</div>
```
*/
/* block_officeHead
--------------------------------------------------------------*/
.block_officeHead {
  font-size: 3rem;
  font-weight: bold;
  text-align: center;
  margin-top: 20px;
}

@media screen and (max-width: 640px) {
  .block_officeHead {
    font-size: 1.4rem;
  }
}

.block_officeHead span {
  font-size: 4rem;
  line-height: 1;
}

@media screen and (max-width: 640px) {
  .block_officeHead span {
    font-size: 1.8rem;
  }
}

.block_officeHead .text_marker {
  color: #d40000;
}

.block_officeHead .block_officeHead_item {
  display: inline-block;
  padding-left: 130px;
  position: relative;
  margin-bottom: 0;
  text-align: left;
}

@media screen and (max-width: 640px) {
  .block_officeHead .block_officeHead_item {
    padding-left: 60px;
  }
}

.block_officeHead .block_officeHead_item:before {
  content: "";
  display: inline-block;
  width: 91px;
  height: 154px;
  background: url("/resources/img/common/avatar/avatar_shinoda.png") no-repeat;
  position: absolute;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}

@media screen and (max-width: 640px) {
  .block_officeHead .block_officeHead_item:before {
    width: 47px;
    height: 80px;
    background-size: 47px auto;
  }
}

/*
#styleguide
block_officeTable

/map/下層で使用している支店テーブルパーツです。
テーブルとラベルはそれぞれモジュールパーツを使用
```
<div class="block_officeTable">
  <table class="table table_basic">
    <colgroup>
      <col class="w40per">
      <col class="w60per">
    </colgroup>
    <thead>
      <tr>
        <th>支店名</th>
        <th>住所</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <div class="box_image pc_reverse">
            <div class="box_image_img">
              <a href="/adire/naha.html">
                <img src="http://www.adire.jp/adire/img/img_naha.jpg" width="100" height="79" alt="那覇支店">
              </a>
            </div>
            <div class="box_image_text">
              <a href="/adire/naha.html">那覇支店</a>
            </div>
          </div>
          <span class="label label_kids">キッズスペース</span>
          <span class="label label_parking">無料駐車場</span>
        </td>
        <td>
          <div class="cell_inner">
            〒９００－００１５<br>沖縄県那覇市久茂地１－１－１<br>パレットくもじ３Ｆ<br>※受付は４Ｆになります。
            <p class="cell_btn"><a href="#" class="btn_tertiary btn_color2">アクセス</a></p>
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="box_image pc_reverse">
            <div class="box_image_img">
              <a href="/adire/okinawa.html">
                <img src="http://www.adire.jp/adire/img/img_okinawa.jpg" width="100" height="79" alt="沖縄胡屋支店">
              </a>
            </div>
            <div class="box_image_text">
              <a href="/adire/okinawa.html">沖縄胡屋支店</a>
            </div>
          </div>
          <span class="label label_kids">キッズスペース</span>
          <span class="label label_parking">無料駐車場</span>
        </td>
        <td>
          <div class="cell_inner">
            〒９０４－０００４<br>沖縄県沖縄市中央１－１－９<br>冨里ビル２Ｆ
            <p class="cell_btn"><a href="#" class="btn_tertiary btn_color2">アクセス</a></p>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>
```
*/
/* block_officeTable
--------------------------------------------------------------*/
.block_officeTable a {
  text-decoration: none;
}

.block_officeTable .box_image_text a:hover {
  text-decoration: underline;
}

@media screen and (max-width: 640px) {
  .block_officeTable .box_image_text {
    text-align: center;
  }
}

@media screen and (max-width: 640px) {
  .block_officeTable .label {
    width: 100%;
    text-align: center;
  }
}

.block_officeTable .cell_inner {
  position: relative;
  padding-right: 90px;
}

@media screen and (max-width: 640px) {
  .block_officeTable .cell_inner {
    padding-right: 0;
  }
}

.block_officeTable .cell_btn {
  position: absolute;
  top: 8px;
  right: 0;
}

@media screen and (max-width: 640px) {
  .block_officeTable .cell_btn {
    position: static;
    text-align: right;
    margin: 5px 0 7px;
  }
}

/*
#styleguide
block_officeImage

/map/下層で使用している画像+テキストパーツです。
モジュールの画像+テキストパーツを使用して、支店ページ用にカスタマイズしたもの。
```
<div class="block_officeImage">
  <h3 class="headline3">住所</h3>
  <div class="box_image">
    <div class="box_image_img"><img src="http://www.adire.jp/adire/img/img_aomori.jpg" width="177" height="140" alt="青森支店"></div>
    <div class="box_image_text">
      <p>〒０３０－０８０１<br>青森県青森市新町２－１－１１<br>ＥＳＴビル９Ｆ</p>
    </div>
  </div>
</div>
```
*/
/* block_officeImage
--------------------------------------------------------------*/
.block_officeImage .box_image {
  margin: 0 auto;
}

@media screen and (max-width: 640px) {
  .block_officeImage .box_image .box_image_img {
    margin: 0 auto;
    padding: 5% 28% 0;
  }
}

.block_officeImage .box_image .box_image_text p {
  margin-bottom: 15px;
}

@media screen and (max-width: 640px) {
  .block_officeImage .box_image .box_image_text p {
    margin-bottom: 10px;
  }
}

.block_officeImage .box_image .box_image_text p > a {
  text-decoration: none;
}

/*
#overview
Block Accordion
*/
/*
#styleguide

用語集ページなどで使用
```
<section class="block_accordion">
  <div class="head js_toggleHead_spOnly">
    <h4 class="headline_accordion">ＲＳＤ <span class="small">[あーるえすでぃー]</span></h4>
  </div>
  <div class="body js_toggleCont">
    <p>ＲＳＤとは，「Ｔｈｅ　Ｒｅｆｌｅｘ　Ｓｙｍｐａｔｈｅｔｉｃ　Ｄｙｓｔｒｏｐｈｙ」の略であり，日本語で「反射性交感神経性ジストロフィー」と呼ばれます。具体的な症状としては，激しく焼けるような痛みや患部の腫れ，軽い接触による過敏な反応，皮膚の変化，骨の萎縮，発汗の異常など症状が挙げられます。</p>
    <p>人は，外傷を受けた場合，交感神経の反射により痛みを感じます。そして，外傷が治れば交感神経の反射がなくなり，痛みも治まるとされています。しかし，交通事故の外傷により，この交感神経の反射機能に異常が生じた結果，外傷が治った後も交感神経の反射が続いてしまうことがあり，これがＲＳＤの原因とされています。</p>
    <p>ＲＳＤの診断や治療については医師であってもその判断が難しく，後遺障害の認定にあたっても，その立証が難しいとされています。後遺障害認定のためには，ＲＳＤが疑われる場合には早期に専門医を探し，受診しておくことが重要となります。</p>
  </div>
</section>
```
*/
.block_accordion .head {
  padding: 18px 0;
  width: 100%;
  font-size: 1.8rem;
  margin-bottom: 28px;
  display: inline-block;
  font-weight: bold;
  color: #21262b;
  line-height: 1.7;
  border-top: solid 2px #305889;
  border-bottom: solid 1px #305889;
}

.block_accordion .head .small {
  margin-left: 10px;
  font-size: 1.3rem;
  color: #646464;
}

@media screen and (min-width: 641px), print {
  .block_accordion:last-child {
    margin-bottom: 55px;
  }
  .block_accordion .body {
    display: block !important;
  }
}

@media screen and (max-width: 640px) {
  .block_accordion:last-child {
    border-bottom: 2px solid #305889;
  }
  .block_accordion .head {
    font-size: 1.4rem;
    margin-bottom: 0;
    line-height: 1.5;
    padding: 20px 40px 20px 0;
    border-bottom: none;
    position: relative;
  }
  .block_accordion .head:after {
    content: "";
    font-family: "fontello";
    font-style: normal;
    font-size: 2.2rem;
    font-weight: bold;
    position: absolute;
    top: 50%;
    right: 10px;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    -webkit-transition: -webkit-transform .3s ease;
    transition: -webkit-transform .3s ease;
    transition: transform .3s ease;
    transition: transform .3s ease, -webkit-transform .3s ease;
    color: #305889;
  }
  .block_accordion .head.active:after {
    -webkit-transform: translateY(-50%) rotateZ(180deg);
        -ms-transform: translateY(-50%) rotate(180deg);
            transform: translateY(-50%) rotateZ(180deg);
  }
  .block_accordion .body {
    border-top: solid 2px #305889;
    padding-top: 20px;
    display: none;
  }
}

/*
#overview
Block Office
*/
/*
#styleguide
block_flow

「アディーレにご相談する場合の流れ」のインクルードパーツです。
```
<?php include($_SERVER['DOCUMENT_ROOT']."/resources/inc/block_flow.html"); ?>
```
*/
.block_flow .block_flowLink {
  text-align: right;
  margin-bottom: 1em;
}

@media screen and (max-width: 640px) {
  .block_flow .block_flowLink {
    text-align: center;
  }
}

/*
#overview
Block Precedent
*/
/*
#styleguide

block_precedent
裁判例紹介ブロックです。
```
<section class="block_precedent">
  <h3 class="head">ブロックのタイトル</h3>
  <div class="body">
    <section>
      <h4 class="headline4">判例のタイトル</h4>
      <section>
        <h5 class="headline5">タイトル</h5>
        <p>テキスト</p>
      </section>
      <section>
        <h5 class="headline5">タイトル</h5>
        <dl class="list_circle list_definition">
          <dt>テキスト</dt>
          <dd>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd>
        </dl>
      </section>
    </section>
    <section>
      <h4 class="headline4">判例のタイトル</h4>
      <section>
        <h5 class="headline5">タイトル</h5>
        <p>テキスト</p>
      </section>
      <section>
        <h5 class="headline5">タイトル</h5>
        <dl class="list_circle list_definition">
          <dt>テキスト</dt>
          <dd>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd>
        </dl>
      </section>
    </section>
  </div>
</section>
```
*/
/* block_precedent
--------------------------------------------------------------*/
.block_precedent {
  border: 1px solid #c2c2c2;
  margin: 2em 0;
}

.block_precedent .head {
  background: #d7eef5;
  font-size: 1.6rem;
  padding: 5px 10px;
  border-bottom: 1px solid #c2c2c2;
}

.block_precedent .body {
  padding: 0 20px;
}

@media screen and (max-width: 640px) {
  .block_precedent .body {
    padding: 0 15px;
  }
}

.block_precedent .list_circle {
  margin-top: 1em;
}

.block_precedent .list_circle dt {
  margin-top: 1em;
}

/*
#overview
Block Sitemap
*/
/*
#styleguide
block_sitemap

サイトマップで使用しているブロックです。
```
<ul class="block_sitemap">
  <li>
    <a href="/media/">メディア情報・社会貢献活動<i class="icon-angle-circled-right"></i></a>
  </li>
  <li><a href="http://www.adire.jp/pmark/" target="_blank">プライバシーマーク取得のお知らせ<i class="icon-angle-circled-right"></i></a></li>
  <li><a href="/docs/copyright.html">当サイトの利用について<i class="icon-angle-circled-right"></i></a></li>
  <li><a href="/privacy/kojin.html">個人情報保護方針<i class="icon-angle-circled-right"></i></a></li>
</ul>
```
*/
.block_sitemap {
  margin-bottom: 40px;
}

.block_sitemap a,
.block_sitemap span {
  color: #305889;
  text-decoration: none;
  padding: 20px 5px 20px 5px;
  display: block;
  border-bottom: 1px solid #c2c2c2;
  line-height: 1.5;
}

@media screen and (max-width: 640px) {
  .block_sitemap a,
  .block_sitemap span {
    font-size: 1.2rem;
    padding: 15px 25px 15px 5px;
    line-height: 1.5;
  }
}

.block_sitemap a {
  position: relative;
}

.block_sitemap a:hover {
  text-decoration: underline;
  background-color: #eaeef3;
}

.block_sitemap a > i {
  position: absolute;
  right: 10px;
  top: 50%;
  margin-top: -8px;
}

.block_sitemap .block_sitemapChild {
  padding-left: 4rem;
  border-bottom: 1px solid #c2c2c2;
}

.block_sitemap .block_sitemapChild > li:last-child > a {
  border-bottom: none;
}

@media screen and (max-width: 640px) {
  .block_sitemap .block_sitemapChild {
    padding-left: 1rem;
  }
}

.block_sitemap .block_sitemapChildNext {
  border-top: 1px solid #c2c2c2;
  width: 100%;
  padding-left: 4rem;
}

.block_sitemap .block_sitemapChildNext > li {
  float: left;
  width: 45%;
  margin: 0 0 0 5%;
}

.block_sitemap .block_sitemapChildNext > li:last-child > a, .block_sitemap .block_sitemapChildNext > li:nth-last-of-type(2) > a {
  border-bottom: none;
}

.block_sitemap .block_sitemapChildNext:after {
  display: block;
  content: "";
  clear: both;
}

@media screen and (max-width: 640px) {
  .block_sitemap .block_sitemapChildNext {
    padding-left: 1rem;
  }
}

/* block_inspection
--------------------------------------------------------------*/
.block_inspection {
  margin-top: 24px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.block_inspection .block_inspection_item {
  width: 330px;
  border: 1px solid #305889;
}

.block_inspection .block_inspection_item.typeColumn {
  border: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.block_inspection .block_inspection_item.typeColumn > .box_inspection {
  margin-top: 20px;
  min-height: 216px;
  height: 33.3333%;
  border: 1px solid #305889;
}

.block_inspection .block_inspection_item.typeColumn > .box_inspection:first-child {
  margin-top: 0;
}

@media screen and (max-width: 640px) {
  .block_inspection {
    display: block;
    margin-top: 0;
  }
  .block_inspection .block_inspection_item {
    margin-top: 20px;
    width: 100%;
  }
  .block_inspection .block_inspection_item.typeColumn {
    display: block;
  }
  .block_inspection .block_inspection_item.typeColumn > .box_inspection {
    height: auto;
    min-height: inherit;
  }
}

.box_inspection .head {
  background: #eaeef3;
  border-bottom: 1px solid #305889;
  text-align: center;
  height: 72px;
  width: 100%;
  display: table;
  position: relative;
  padding-left: 70px;
}

.box_inspection .head > span {
  color: #305889;
  font-size: 1.8rem;
  font-weight: bold;
  display: table-cell;
  vertical-align: middle;
  width: 100%;
}

.box_inspection .head > i {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}

.box_inspection .head > i img {
  vertical-align: middle;
}

.box_inspection .head > i.neck {
  width: 56px;
  left: 58px;
}

.box_inspection .head > i.waist {
  width: 52px;
  left: 53px;
}

.box_inspection .head > i.eye {
  width: 47px;
  left: 115px;
}

.box_inspection .head > i.ear {
  width: 28px;
  left: 122px;
}

.box_inspection .head > i.nose {
  width: 32px;
  left: 124px;
}

.box_inspection .head > i.mouth {
  width: 44px;
  left: 108px;
}

.box_inspection .head > i.nerve {
  width: 37px;
  left: 26px;
}

.box_inspection .head > i.spine {
  width: 34px;
  left: 19px;
}

.box_inspection .head > i.upper {
  width: 33px;
  left: 110px;
}

.box_inspection .head > i.lower {
  width: 38px;
  left: 108px;
}

.box_inspection .head > i img {
  width: 100%;
  height: auto;
}

.box_inspection .body {
  padding: 15px 24px;
}

@media screen and (max-width: 640px) {
  .box_inspection .head {
    height: 60px;
  }
  .box_inspection .head span {
    font-size: 1.4rem;
  }
  .box_inspection .head > i.neck {
    width: 46px;
    left: 50%;
    margin-left: -84px;
  }
  .box_inspection .head > i.waist {
    width: 42px;
    left: 50%;
    margin-left: -88px;
  }
  .box_inspection .head > i.eye {
    width: 39px;
    left: 50%;
    margin-left: -44px;
  }
  .box_inspection .head > i.ear {
    width: 23px;
    left: 50%;
    margin-left: -32px;
  }
  .box_inspection .head > i.nose {
    width: 26px;
    left: 50%;
    margin-left: -35px;
  }
  .box_inspection .head > i.mouth {
    width: 36px;
    left: 50%;
    margin-left: -42px;
  }
  .box_inspection .head > i.nerve {
    width: 31px;
    left: 50%;
    margin-left: -116px;
  }
  .box_inspection .head > i.spine {
    width: 28px;
    left: 50%;
    margin-left: -124px;
  }
  .box_inspection .head > i.upper {
    width: 27px;
    left: 50%;
    margin-left: -38px;
  }
  .box_inspection .head > i.lower {
    width: 31px;
    left: 50%;
    margin-left: -38px;
  }
  .box_inspection .body {
    padding: 15px 20px;
  }
}

.top_contLead {
  text-align: center;
}

@media screen and (max-width: 640px) {
  .top_contLead {
    text-align: left;
  }
}

.top_btnBox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-top: 50px;
}

@media screen and (max-width: 640px) {
  .top_btnBox {
    margin-top: 20px;
  }
}

.top_btnBox li {
  width: 316px;
  margin-bottom: 16px;
}

@media screen and (min-width: 641px), print {
  .top_btnBox li:not(:nth-child(3n)) {
    margin-right: 16px;
  }
}

@media screen and (max-width: 640px) {
  .top_btnBox li {
    width: 48%;
    margin-bottom: 2%;
  }
  .top_btnBox li:not(:nth-child(2n)) {
    margin-right: 2%;
  }
}

.top_btnBox .btn_primary {
  width: 100%;
  text-align-last: left;
  line-height: 1.2;
  height: 68px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-left: 23px;
  font-size: 2rem;
}

@media screen and (max-width: 640px) {
  .top_btnBox .btn_primary {
    font-size: 1.2rem;
    height: 43px;
  }
}

.top_btnBox .btn_primary .subText {
  display: block;
  font-size: 1.2rem;
}

@media screen and (max-width: 640px) {
  .top_btnBox .btn_primary .subText {
    font-size: 1rem;
  }
}

/* どうして交通事故を弁護士に相談するべきなの？
--------------------------------------------------------------*/
.top_areaAppeal {
  position: relative;
  padding-bottom: 70px;
}

@media screen and (max-width: 640px) {
  .top_areaAppeal {
    padding: 0 0 28px;
  }
}

.top_appeaLead {
  position: relative;
  font-size: 3.6rem;
  text-align: center;
  font-weight: bold;
  background: #fff;
  border: solid 6px #305889;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  padding: 10px;
  margin-bottom: 20px;
}

@media screen and (max-width: 640px) {
  .top_appeaLead {
    font-size: 1.4rem;
    border-width: 3px;
    line-height: 1.2;
    padding: 6px;
    margin-bottom: 0;
  }
}

.top_appeaLead:after, .top_appeaLead:before {
  content: '';
  top: 100%;
  left: 50%;
  border: solid transparent;
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.top_appeaLead:after {
  border-color: rgba(255, 255, 255, 0);
  border-top-color: #fff;
  border-width: 22px;
  margin-left: -22px;
  -webkit-transform: translateY(-2px);
      -ms-transform: translateY(-2px);
          transform: translateY(-2px);
}

@media screen and (max-width: 640px) {
  .top_appeaLead:after {
    border-width: 8px;
    margin-left: -8px;
  }
}

.top_appeaLead:before {
  border-color: rgba(48, 88, 137, 0);
  border-top-color: #305889;
  border-width: 28px;
  margin-left: -28px;
}

@media screen and (max-width: 640px) {
  .top_appeaLead:before {
    border-width: 10px;
    margin-left: -10px;
  }
}

.top_appeaLead .em {
  color: #0e8ce0;
}

@media screen and (max-width: 640px) {
  .top_appeaImg {
    padding: 0 13px;
  }
}

.top_appeaBanner {
  text-align: center;
  margin-top: 50px;
}

@media screen and (max-width: 640px) {
  .top_appeaBanner {
    margin-top: 12px;
  }
}

.top_appeaBanner img {
  box-shadow: 4px 4px 0 0 #d9d9d9;
  border-radius: 7px;
  vertical-align: top;
}

@media screen and (max-width: 640px) {
  .top_appeaBanner img {
    box-shadow: 2px 2px 0 0 #d9d9d9;
    border-radius: 4px;
    max-width: 280px;
  }
}

/* 交通事故被害で請求できる損害・慰謝料
--------------------------------------------------------------*/
.top_areaSongai {
  background: #f2f2f2;
  padding: 115px 0 98px;
}

@media screen and (max-width: 640px) {
  .top_areaSongai {
    padding: 25px 0 40px;
  }
}

.top_areaSongai .btn_primary {
  position: absolute;
  bottom: 37px;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
}

@media screen and (max-width: 640px) {
  .top_areaSongai .btn_primary {
    position: static;
    -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
            transform: translateX(0);
    width: 100%;
    margin-top: 15px;
  }
}

.top_songaiBoxWrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 130px;
}

@media screen and (max-width: 640px) {
  .top_songaiBoxWrap {
    display: block;
    margin-top: 32px;
    padding: 0 15px;
  }
}

.top_songaiBox {
  width: 312px;
  background: #fff;
  position: relative;
  padding: 85px 47px 124px;
  border-radius: 8px;
  box-shadow: 4px 4px 0 0 #cecece;
  font-size: 1.8rem;
  line-height: 1.1;
}

@media screen and (max-width: 640px) {
  .top_songaiBox {
    width: 100%;
    padding: 38px 38px 28px;
    border-radius: 5px;
    box-shadow: 3px 3px 0 0 #cecece;
    font-size: 1.3rem;
    text-align: center;
  }
}

.top_songaiBox:not(:first-child) {
  margin-left: 22px;
}

@media screen and (max-width: 640px) {
  .top_songaiBox:not(:first-child) {
    margin: 8px 0 0;
  }
}

.top_songaiBox .list_check {
  margin-top: 24px;
}

@media screen and (max-width: 640px) {
  .top_songaiBox .list_check {
    margin-top: 38px;
    text-align: left;
  }
}

.top_songaiBox .list_check li {
  background-position: left top;
}

@media screen and (max-width: 640px) {
  .top_songaiBox .list_check li {
    padding-top: 2px;
    padding-bottom: 2px;
  }
}

.top_songaiBox .list_check li:not(:last-child) {
  margin-bottom: 1em;
}

@media screen and (max-width: 640px) {
  .top_songaiBox .list_check li:not(:last-child) {
    margin-bottom: .5em;
  }
}

.top_songaiBoxIcon {
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

@media screen and (max-width: 640px) {
  .top_songaiBoxIcon {
    width: 56px;
    top: 50%;
    left: 0;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
  }
}

.top_songaiBoxHead {
  font-size: 2.4rem;
  font-weight: bold;
  color: #305889;
  text-align: center;
}

@media screen and (max-width: 640px) {
  .top_songaiBoxHead {
    font-size: 1.5rem;
  }
}

@media screen and (max-width: 640px) {
  .top_songaiBoxHeadInner {
    position: relative;
    padding-left: 70px;
  }
}

/* 交通事故被害で請求できる損害・慰謝料
--------------------------------------------------------------*/
.top_areaCase {
  background: #eaeef3;
  padding: 115px 0 69px 0;
}

@media screen and (max-width: 640px) {
  .top_areaCase {
    padding: 40px 0;
  }
}

.top_reportWrap {
  padding: 15px 0 15px 51px;
  border: solid 2px #305889;
  background: #fff;
  margin-top: 67px;
}

.top_reportWrap:after {
  content: "";
  clear: both;
  display: block;
}

@media screen and (max-width: 640px) {
  .top_reportWrap {
    padding: 0;
    border-width: 1px;
    margin-top: 25px;
  }
}

.top_reportHead {
  text-align: center;
  position: relative;
  font-weight: bold;
  font-size: 2.7rem;
  width: 215px;
  line-height: 1.3;
  color: #305889;
  float: left;
  border-right: solid 1px #305889;
  padding: 11px 25px 4px 40px;
}

@media screen and (max-width: 640px) {
  .top_reportHead {
    border-right: none;
    border-bottom: solid 1px #305889;
    width: 92%;
    font-size: 2.4rem;
    float: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding: 15px 0 10px;
    margin: 0 auto;
  }
}

.top_reportHead:before {
  content: '';
  display: block;
  background: url(/resources/img/common/icon/icon_report.png) center center/cover no-repeat;
  width: 41px;
  height: 54px;
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}

@media screen and (max-width: 640px) {
  .top_reportHead:before {
    position: static;
    -webkit-transform: translateY(-2px);
        -ms-transform: translateY(-2px);
            transform: translateY(-2px);
    width: 28px;
    height: 37px;
  }
}

.top_reportHead span {
  font-size: 1.4rem;
  display: block;
}

@media screen and (max-width: 640px) {
  .top_reportHead span {
    margin: 0 5px 0 10px;
  }
}

.top_reportCont {
  overflow: hidden;
  padding-left: 45px;
  height: 67px;
}

@media screen and (max-width: 640px) {
  .top_reportCont {
    padding: 5px 30px 10px;
    height: auto;
    line-height: 1.6;
    font-size: 1.1rem;
  }
}

.top_reportCont li {
  padding-top: 5px;
}

.top_reportCont a {
  color: #305889;
}

.top_reportCont .txt {
  display: block;
}

.top_reportCont .prevArrow,
.top_reportCont .nextArrow {
  position: absolute;
  top: 50%;
  font-size: 1.8rem;
  color: #305889;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}

.top_reportCont .prevArrow {
  left: -30px;
}

.top_reportCont .nextArrow {
  right: -30px;
}

/* 気になる後遺障害ピックアップ
--------------------------------------------------------------*/
.top_areaPickup {
  padding: 100px 0 0;
}

@media screen and (max-width: 640px) {
  .top_areaPickup {
    padding: 40px 0 0;
  }
}

/* 交通事故の基礎知識
--------------------------------------------------------------*/
.top_areaKnowledge {
  padding: 100px 0 110px;
}

@media screen and (max-width: 640px) {
  .top_areaKnowledge {
    padding: 40px 0 35px;
  }
}

.top_areaKnowledge .btn_index2_wrap {
  margin: 52px 0 20px;
}

@media screen and (max-width: 640px) {
  .top_areaKnowledge .btn_index2_wrap {
    margin: 20px 0;
  }
}

.top_areaKnowledge .btn_index2 {
  width: 32%;
}

@media screen and (max-width: 640px) {
  .top_areaKnowledge .btn_index2 {
    width: 100%;
  }
}

.top_areaKnowledge .btn_title .sub {
  font-size: 1.3rem;
}

@media screen and (max-width: 640px) {
  .top_areaKnowledge .btn_title .sub {
    font-size: 1.2rem;
  }
}

.top_areaKnowledge .link_arrow {
  font-size: 1.5rem;
}

/* 弁護士だからできるサポート！
--------------------------------------------------------------*/
.top_areaSupport {
  background: #f2f2f2;
  padding: 0 0 54px;
}

@media screen and (max-width: 640px) {
  .top_areaSupport {
    padding: 0 0 15px;
  }
}

.top_supportLead {
  position: relative;
  border-bottom: solid 1px #305889;
  height: 246px;
  margin-bottom: 33px;
}

@media screen and (max-width: 640px) {
  .top_supportLead {
    height: auto;
    margin-bottom: 12px;
  }
}

.top_supportLead:before, .top_supportLead:after {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background: #305889;
  position: absolute;
}

.top_supportLead:before {
  bottom: -5px;
}

@media screen and (max-width: 640px) {
  .top_supportLead:before {
    bottom: -3px;
  }
}

.top_supportLead:after {
  bottom: -9px;
}

@media screen and (max-width: 640px) {
  .top_supportLead:after {
    bottom: -5px;
  }
}

.top_supportLeadImg {
  position: absolute;
  bottom: 0;
  left: 0;
}

@media screen and (max-width: 640px) {
  .top_supportLeadImg {
    width: 144px;
  }
}

.top_supportLeadImg img {
  vertical-align: bottom;
}

.top_supportLeadTxt {
  position: absolute;
  top: 50%;
  left: 365px;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  font-weight: bold;
  font-size: 3.1rem;
  color: #305889;
  line-height: 1.2;
}

@media screen and (max-width: 640px) {
  .top_supportLeadTxt {
    position: static;
    -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
            transform: translateY(0);
    font-size: 1.3rem;
    padding-left: 144px;
    padding: 30px 0 20px 144px;
  }
}

.top_supportLeadTxt .underLine {
  background: url(/resources/img/top/underline_pc.png) left bottom no-repeat;
  color: #000;
  padding-bottom: 10px;
  display: inline-block;
}

@media screen and (max-width: 640px) {
  .top_supportLeadTxt .underLine {
    display: inline;
    line-height: 1.6;
    background: url(/resources/img/top/underline_sp.png) left top/auto 19px repeat;
    padding-bottom: 7px;
  }
}

.top_supportLeadTxt .txtBottom {
  display: block;
  margin-top: 10px;
}

@media screen and (max-width: 640px) {
  .top_supportLeadTxt .txtBottom {
    margin-top: 5px;
  }
}

.top_supportLeadTxt .em {
  color: #0e8ce0;
  font-size: 4.5rem;
}

@media screen and (max-width: 640px) {
  .top_supportLeadTxt .em {
    font-size: 2rem;
  }
}

.top_supportBox {
  padding: 40px 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

@media screen and (max-width: 640px) {
  .top_supportBox {
    display: block;
    padding: 15px 0;
    position: relative;
  }
}

.top_supportBox:not(:last-child) {
  border-bottom: solid 1px #d7d7d7;
}

.top_supportBox.reverse {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}

.top_supportBoxImg {
  width: 255px;
}

@media screen and (max-width: 640px) {
  .top_supportBoxImg {
    width: 90px;
    position: absolute;
    top: 15px;
    left: 0;
  }
}

.top_supportBoxImg img {
  vertical-align: bottom;
  width: 100%;
  height: auto;
}

.top_supportBoxTxt {
  width: 685px;
}

@media screen and (max-width: 640px) {
  .top_supportBoxTxt {
    width: auto;
  }
}

.top_supportBoxTxt .head {
  font-size: 2.4rem;
  font-weight: bold;
  color: #305889;
  margin-bottom: 18px;
  line-height: 1.2;
}

@media screen and (max-width: 640px) {
  .top_supportBoxTxt .head {
    font-size: 1.5rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    min-height: 90px;
    margin-bottom: 0;
    padding: 0 20px 0 104px;
    position: relative;
    z-index: 1;
  }
  .top_supportBoxTxt .head:before {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    right: 0;
    content: "";
    font-family: "fontello";
    font-style: normal;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    font-size: 1.8rem;
  }
  .top_supportBoxTxt .head.active:before {
    content: "";
    font-family: "fontello";
    font-style: normal;
  }
}

@media screen and (max-width: 640px) {
  .top_supportBoxTxt .body {
    padding: 16px 0 0 0;
    font-size: 1.2rem;
  }
}

@media screen and (max-width: 640px) {
  .top_supportBoxTxt .body .link {
    display: block;
    text-align: right;
  }
}

.top_supportBoxTxt .link_arrow2 {
  margin-left: 1em;
}

@media screen and (max-width: 640px) {
  .top_supportBoxTxt .link_arrow2 {
    font-size: 1.4rem;
  }
}

/* 事故発生から示談の流れ
--------------------------------------------------------------*/
.top_areaFlow {
  padding: 100px 0 110px;
}

@media screen and (max-width: 640px) {
  .top_areaFlow {
    padding: 40px 0 25px;
  }
}

.top_areaFlow .btn_box {
  margin-top: 70px;
  margin-bottom: 0;
}

@media screen and (max-width: 640px) {
  .top_areaFlow .btn_box {
    margin-top: 24px;
  }
}

.top_flowList {
  margin-top: 70px;
}

@media screen and (max-width: 640px) {
  .top_flowList {
    margin-top: 50px;
  }
}

.top_flowList li {
  background: #eaeef3;
  border-radius: 6px;
  position: relative;
  height: 128px;
  padding-left: 258px;
  line-height: 1.7;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

@media screen and (max-width: 640px) {
  .top_flowList li {
    border-radius: 3px;
    height: auto;
    padding: 35px 14px 20px;
    display: block;
    font-size: 1.2rem;
  }
}

.top_flowList li:not(:last-child) {
  margin-bottom: 17px;
}

@media screen and (max-width: 640px) {
  .top_flowList li:not(:last-child) {
    margin-bottom: 37px;
  }
}

.top_flowList li:not(:last-child):before {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 13px 15px 0 15px;
  border-color: #eaeef3 transparent transparent transparent;
  position: absolute;
  bottom: 0;
  left: 50%;
  -webkit-transform: translate(-50%, 100%);
      -ms-transform: translate(-50%, 100%);
          transform: translate(-50%, 100%);
}

@media screen and (max-width: 640px) {
  .top_flowList li:not(:last-child):before {
    border-width: 10px 10px 0 10px;
  }
}

.top_flowList li .num {
  display: block;
  color: #fff;
  background: #305889;
  border-radius: 50%;
  width: 82px;
  height: 82px;
  font-weight: bold;
  font-size: 4.2rem;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 26px;
  line-height: 82px;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}

@media screen and (max-width: 640px) {
  .top_flowList li .num {
    width: 40px;
    height: 40px;
    font-size: 2.1rem;
    line-height: 40px;
    top: 0;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }
}

.top_flowList li .num:before {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent #305889;
  position: absolute;
  top: 50%;
  right: 1px;
  -webkit-transform: translate(100%, -50%);
      -ms-transform: translate(100%, -50%);
          transform: translate(100%, -50%);
}

@media screen and (max-width: 640px) {
  .top_flowList li .num:before {
    border-width: 6px 4px 0 4px;
    border-color: #305889 transparent transparent transparent;
    top: 100%;
    right: 50%;
    -webkit-transform: translate(50%, -50%);
        -ms-transform: translate(50%, -50%);
            transform: translate(50%, -50%);
  }
}

.top_flowList li .flowIcon {
  position: absolute;
  top: 50%;
  left: 149px;
  width: 70px;
  text-align: center;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}

@media screen and (max-width: 640px) {
  .top_flowList li .flowIcon {
    left: 0;
    display: inline-block;
    -webkit-transform: translateY(-57%);
        -ms-transform: translateY(-57%);
            transform: translateY(-57%);
    width: 34px;
  }
}

.top_flowList li .flowIcon img {
  vertical-align: bottom;
}

.top_flowList li .head {
  font-weight: bold;
  color: #305889;
  font-size: 2.7rem;
  display: block;
  line-height: 1.2;
}

@media screen and (max-width: 640px) {
  .top_flowList li .head {
    font-size: 1.5rem;
    text-align: center;
    margin-bottom: 5px;
  }
}

@media screen and (max-width: 640px) {
  .top_flowList li .head_inner {
    position: relative;
    padding-left: 42px;
  }
}

/* よくあるご質問
--------------------------------------------------------------*/
.top_areaFaq {
  background: #305889;
  color: #fff;
  padding: 116px 0 42px;
}

@media screen and (max-width: 640px) {
  .top_areaFaq {
    padding: 32px 0 8px;
  }
}

.top_areaFaq .block_faqList {
  margin-top: 50px;
}

@media screen and (max-width: 640px) {
  .top_areaFaq .block_faqList {
    margin-top: 15px;
  }
}

.top_areaFaq .btn_box {
  margin-top: 55px;
}

@media screen and (max-width: 640px) {
  .top_areaFaq .btn_box {
    margin-top: 23px;
  }
}

/* お知らせ
--------------------------------------------------------------*/
.top_areaNews {
  width: 680px;
  float: left;
  padding: 92px 0 50px;
}

@media screen and (max-width: 640px) {
  .top_areaNews {
    width: 100%;
    float: none;
    padding: 30px 0 0;
  }
}

.top_areaNews .newsHeadWrap {
  position: relative;
  margin-bottom: 25px;
}

.top_areaNews .newsHead {
  font-size: 2.8rem;
  font-weight: bold;
  line-height: 1.2;
  border-left: solid 3px #305889;
  padding-left: 28px;
  color: #305889;
}

@media screen and (max-width: 640px) {
  .top_areaNews .newsHead {
    font-size: 1.5rem;
    border-width: 2px;
    padding-left: 15px;
  }
}

.top_areaNews .newsLink {
  position: absolute;
  top: 5px;
  right: 0;
  line-height: 1.2;
}

@media screen and (max-width: 640px) {
  .top_areaNews .newsLink {
    top: 0;
    font-size: 1.3rem;
  }
}

/* サイドナビ
--------------------------------------------------------------*/
.top_areaSide {
  padding: 92px 0 50px;
}

@media screen and (max-width: 640px) {
  .top_areaSide {
    padding: 0;
  }
}

/* バナーエリア
--------------------------------------------------------------*/
.top_areaBanner {
  text-align: center;
}

.top_areaBanner li {
  display: inline-block;
}

/* 下記にページごとのscssファイルをインポート
---------------------*/
/* flowページ固有スタイル
--------------------------------------------------------------*/
@media screen and (max-width: 640px) {
  .article_flow {
    padding: 0 15px;
  }
}

.flow_listWrap {
  margin-bottom: 40px;
}

@media screen and (max-width: 640px) {
  .flow_listWrap {
    display: none;
  }
}

.flow_listWrap .flow_head {
  font-size: 3rem;
  font-weight: bold;
  text-align: center;
}

.flow_listbox {
  font-size: 0;
  padding-bottom: 25px;
  margin-top: 75px;
}

.flow_listbox li {
  display: inline-block;
  width: 16%;
}

.flow_listbox li a {
  display: inline-block;
}

.flow_listbox li a:hover {
  opacity: 0.7;
}

.flow_listbox li:first-child {
  margin-left: 3.6%;
}

.flow_timingBox {
  border: 4px solid #b9b9b9;
  padding: 20px 50px 20px;
  margin-top: 24px;
  background: #fff;
}

@media screen and (max-width: 640px) {
  .flow_timingBox {
    width: 100%;
    padding: 18px 15px;
    border-width: 2px;
  }
}

.flow_timingBox .flow_timingBox_head {
  font-size: 1.8rem;
  font-weight: 600;
  text-align: center;
  margin-bottom: 15px;
}

@media screen and (max-width: 640px) {
  .flow_timingBox .flow_timingBox_head {
    font-size: get-vw(44px);
    text-align: left;
    padding: 0 12px;
  }
}

@media screen and (max-width: 640px) {
  .flow_timingBox .box_image_img {
    text-align: center;
  }
}

.flow_timingBox .box_image_img img {
  width: 130px;
}

@media screen and (max-width: 640px) {
  .flow_timingBox .box_image_img img {
    width: 80%;
    margin: 0 auto;
  }
}

.flow_timingBox p:last-child {
  margin-bottom: 0;
}

.flow_block {
  padding-top: 30px;
}

@media screen and (max-width: 640px) {
  .flow_block {
    background: #eaeef3;
    border-radius: 5px;
    padding: 25px 12px;
    margin-top: 50px;
    position: relative;
  }
}

.flow_block:last-child {
  padding-bottom: 100px;
}

@media screen and (max-width: 640px) {
  .flow_block:last-child {
    padding-bottom: 25px;
  }
}

.flow_block:last-child .flow_blockHead {
  margin-bottom: 0;
}

.flow_block:last-child:after {
  display: none;
}

@media screen and (max-width: 640px) {
  .flow_block:after {
    content: "";
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    left: 50%;
    bottom: -17px;
    border-style: solid;
    border-width: 17px 17px 0 17px;
    border-color: #eaeef3 transparent transparent transparent;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}

.flow_blockHead {
  margin: 20px 0;
  background-color: #eaeef3;
  font-size: 2.3rem;
  font-weight: bold;
  color: #305889;
  position: relative;
  margin-left: 10px;
  padding: 2px 0 2px 95px;
}

@media screen and (max-width: 640px) {
  .flow_blockHead {
    font-size: 2rem;
    padding: 0;
    margin: 0 0 10px 0;
    text-align: center;
    width: 100%;
    position: relative;
  }
}

.flow_blockHead span {
  font-family: 'Helvetica', sans-serif;
  width: 82px;
  height: 82px;
  background: #305889;
  text-align: center;
  line-height: 82px;
  color: #fff;
  font-size: 3.8rem;
  font-weight: bolder;
  border-radius: 82px;
  position: absolute;
  top: 0;
  left: -10px;
  margin-top: -16px;
}

@media screen and (max-width: 640px) {
  .flow_blockHead span {
    width: 35px;
    height: 35px;
    font-size: 17px;
    line-height: 35px;
    left: 50%;
    top: 0;
    margin: -42px 0 0 -17px;
  }
}

.flow_blockSubhead {
  font-size: 2rem;
  background: #eaeef3;
  font-weight: bold;
  margin-bottom: 34px;
  padding: 10px 12px;
  line-height: 1.5;
}

@media screen and (max-width: 640px) {
  .flow_blockSubhead {
    font-size: 1.5rem;
    text-align: center;
    border: 1px solid #305889;
    margin: 0;
    background: #fff;
    padding: 6px;
  }
}

.flow_blockInner {
  position: relative;
}

.flow_blockInner:nth-child(n+2) {
  margin-top: 108px;
}

@media screen and (max-width: 640px) {
  .flow_blockInner:nth-child(n+2) {
    margin-top: 60px;
  }
}

.flow_blockInner:nth-child(n+2):before {
  content: "";
  display: block;
  width: 0;
  border: 76px solid transparent;
  border-top: 38px solid #d9d9d9;
  position: absolute;
  left: 50%;
  top: -70px;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
}

@media screen and (max-width: 640px) {
  .flow_blockInner:nth-child(n+2):before {
    border: 20px solid transparent;
    border-top: 20px solid #305889;
    border-bottom: 0px;
    top: -45px;
  }
}

.flow_blockBody {
  margin: 50px 0 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

@media screen and (max-width: 640px) {
  .flow_blockBody {
    display: block;
    margin: 0;
  }
}

.flow_blockBody .inner {
  width: 795px;
  padding-top: 10px;
}

@media screen and (max-width: 640px) {
  .flow_blockBody .inner {
    width: 100%;
    padding: 0;
  }
}

.flow_blockBody .arrow {
  width: 175px;
  padding-left: 60px;
  position: relative;
}

@media screen and (max-width: 640px) {
  .flow_blockBody .arrow {
    display: none;
  }
}

.flow_blockBody .arrow span {
  display: block;
  width: 32px;
  height: calc(100% - 35px);
  background: #d9d9d9;
  position: absolute;
}

.flow_blockBody .arrow span:after {
  content: "";
  display: block;
  position: absolute;
  border: 35px solid transparent;
  border-top: 40px solid #d9d9d9;
  left: -18px;
  bottom: -60px;
}

.flow_blockItem:nth-child(n+2) {
  margin-top: 30px;
}

@media screen and (max-width: 640px) {
  .flow_blockItem:nth-child(n+2) {
    margin-top: 2em;
  }
}

.flow_blockItem .head {
  height: 60px;
  font-size: 1.8rem;
  letter-spacing: 1px;
  padding-left: 50px;
  padding-bottom: 13px;
  border-bottom: 1px solid #ccc;
  background: url("/resources/img/flow/caution.png") no-repeat;
  margin: 0 0 26px 0;
  font-weight: bold;
  line-height: 1.3;
  display: table;
}

@media screen and (max-width: 640px) {
  .flow_blockItem .head {
    background: none;
    padding: 0;
    font-size: 1.4rem;
    border: none;
    margin-bottom: 10px;
    height: 100%;
    display: block;
  }
}

.flow_blockItem .head span {
  display: table-cell;
  vertical-align: middle;
}

.flow_blockItem .body p:last-child {
  margin-bottom: 0;
}

@media screen and (max-width: 640px) {
  .flow_blockItem .box_image_img {
    text-align: center;
  }
}

.flow_blockItem .box_image_img .img1 {
  width: 125px;
}

@media screen and (max-width: 640px) {
  .flow_blockItem .box_image_img .img1 {
    width: 100%;
  }
}

/* /campaign/shindan.htmlページ固有スタイル
--------------------------------------------------------------*/
.shindan_article {
  margin-bottom: 100px;
}

@media screen and (max-width: 640px) {
  .shindan_article {
    margin-bottom: 30px;
  }
}

.shindan_wrap {
  min-width: 990px;
  width: 100%;
  padding-bottom: 60px;
}

.shindan_wrap.index1 {
  background-color: #f2f2f2;
  position: relative;
  padding: 90px 0 110px;
}

.shindan_wrap.index1:after {
  display: block;
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 32px 32px 0 32px;
  border-color: #ffffff transparent transparent transparent;
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -32px;
  z-index: 10;
}

.shindan_wrap.index2 {
  background-color: #e0e6ed;
  padding: 85px 0 130px;
}

.shindan_wrap.index3 {
  background-color: #4f719b;
  padding: 60px 0 95px;
}

.shindan_wrap.index4 {
  padding: 75px 0 30px;
}

@media screen and (max-width: 640px) {
  .shindan_wrap {
    min-width: inherit;
    padding-bottom: 28px;
  }
  .shindan_wrap.index1 {
    padding: 40px 0 24px;
  }
  .shindan_wrap.index1:after {
    border-width: 19px 20px 0 20px;
    margin-left: -20px;
  }
  .shindan_wrap.index2 {
    padding: 30px 0 30px;
  }
  .shindan_wrap.index3 {
    padding: 29px 0 32px;
  }
  .shindan_wrap.index4 {
    padding: 30px 0 30px;
  }
}

.shindan_inner {
  width: 990px;
  margin: 0 auto;
}

@media screen and (max-width: 640px) {
  .shindan_inner {
    width: 100%;
    padding: 0 16px;
  }
}

/* kv */
.shindan_kvWrap {
  width: 100%;
  min-width: 990px;
  height: 418px;
  position: relative;
  overflow: hidden;
}

.shindan_kvWrap .shindan_kv {
  width: 1600px;
  left: 50%;
  top: 0;
  -ms-transform: translateX(-50%);
      transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  position: absolute;
  margin-bottom: 20px;
}

@media screen and (max-width: 640px) {
  .shindan_kvWrap {
    min-width: inherit;
    height: auto;
  }
  .shindan_kvWrap .shindan_kv {
    width: 100%;
    height: auto;
    -webkit-transform: none;
        -ms-transform: none;
            transform: none;
    position: static;
    margin-bottom: 30px;
  }
}

.shindan_article {
  /* head */
  /* shindan_step */
  /* icon */
  /* text */
  /* lead */
  /* figure */
  /* figureAndText */
  /* btn
  ---------------------------*/
  /* label */
  /* list */
  /* shindan_panelList
  ---------------------------*/
  /* shindan_stepBox */
  /* shindan_supportBox */
}

.shindan_article .shindan_supportHead {
  font-size: 48px;
  line-height: 1.4;
  color: #fff;
  text-align: center;
  font-weight: bold;
  margin-bottom: 23px;
}

.shindan_article .shindan_supportHead .yellow {
  color: #ffcf28;
}

.shindan_article .shindan_supportHead .small {
  color: #fff;
}

@media screen and (max-width: 640px) {
  .shindan_article .shindan_supportHead {
    font-size: 22px;
    line-height: 1.1;
    margin-bottom: 20px;
  }
  .shindan_article .shindan_supportHead .small {
    font-size: 18px;
  }
}

.shindan_article .shindan_serviceHead {
  margin: 41px 0 60px;
}

@media screen and (max-width: 640px) {
  .shindan_article .shindan_serviceHead {
    margin: 30px 0 15px;
  }
}

.shindan_article .shindan_adireHead {
  margin: 0 0 20px;
}

@media screen and (max-width: 640px) {
  .shindan_article .shindan_adireHead {
    margin: 0;
  }
  .shindan_article .shindan_adireHead + .shindan_adireLead {
    line-height: 1;
    margin-bottom: 17px;
  }
}

.shindan_article .shindan_flowHead {
  text-align: center;
  margin-bottom: 60px;
}

.shindan_article .shindan_flowHead .bracket_left,
.shindan_article .shindan_flowHead .bracket_right {
  font-size: 52px;
  color: #305889;
}

.shindan_article .shindan_flowHead .bracket_left {
  margin-right: 20px;
}

.shindan_article .shindan_flowHead .bracket_right {
  margin-left: 20px;
}

.shindan_article .shindan_flowHead .bracket_text {
  font-size: 40px;
  font-weight: bold;
}

.shindan_article .shindan_flowHead .bracket_text .blue {
  color: #305889;
}

.shindan_article .shindan_flowHead .bracket_text .orange {
  color: #f78128;
}

@media screen and (max-width: 640px) {
  .shindan_article .shindan_flowHead {
    margin-bottom: 25px;
  }
  .shindan_article .shindan_flowHead .bracket_left,
  .shindan_article .shindan_flowHead .bracket_right {
    font-size: 24px;
    line-height: 30px;
    vertical-align: middle;
    position: relative;
    top: -3px;
  }
  .shindan_article .shindan_flowHead .bracket_left {
    margin-right: 6px;
  }
  .shindan_article .shindan_flowHead .bracket_right {
    margin-left: 6px;
  }
  .shindan_article .shindan_flowHead .bracket_text {
    font-size: 21px;
  }
}

.shindan_article .shindan_totalHead {
  margin-bottom: 8px;
  text-align: center;
}

@media screen and (max-width: 640px) {
  .shindan_article .shindan_totalHead {
    margin-bottom: 0;
  }
}

.shindan_article .shindan_step {
  display: table;
  height: 75px;
}

@media screen and (max-width: 640px) {
  .shindan_article .shindan_step {
    display: block;
    height: auto;
  }
}

.shindan_article .shindan_stepHead {
  display: table-cell;
  vertical-align: middle;
  font-size: 24px;
  color: #305889;
  font-weight: bold;
  padding: 11px 0;
  line-height: 1.2;
}

@media screen and (max-width: 640px) {
  .shindan_article .shindan_stepHead {
    display: block;
    font-size: 12px;
    text-align: center;
    line-height: 1.3;
    padding: 15px 0 0;
  }
}

.shindan_article .shindan_iconStep {
  background-color: #305889;
  border-radius: 7px;
  padding: 12px 11px 13px;
  width: 75px;
  height: 75px;
}

.shindan_article .shindan_iconStep .text,
.shindan_article .shindan_iconStep .number {
  color: #fff;
  text-align: center;
  font-weight: bold;
  line-height: 1;
}

.shindan_article .shindan_iconStep .text {
  font-size: 18px;
  margin-bottom: 5px;
}

.shindan_article .shindan_iconStep .number {
  font-size: 30px;
  line-height: 1;
}

@media screen and (max-width: 640px) {
  .shindan_article .shindan_iconStep {
    display: block;
    width: 100%;
    height: auto;
    text-align: center;
    padding: 2px 11px 2px;
    border-radius: 4px;
  }
  .shindan_article .shindan_iconStep .text,
  .shindan_article .shindan_iconStep .number {
    display: inline-block;
    font-size: 13px;
    margin: 0;
  }
}

.shindan_article .shindan_textCenter {
  text-align: center;
  font-size: 16px;
  line-height: 1.9;
}

@media screen and (max-width: 640px) {
  .shindan_article .shindan_textCenter {
    font-size: 14px;
  }
}

.shindan_article .shindan_textUnderline {
  text-align: center;
  margin: 17px 0 18px;
}

.shindan_article .shindan_textUnderline .inner {
  border-bottom: 2px solid #ffcf28;
  color: #0d8cdf;
  font-size: 21px;
  font-weight: bold;
  line-height: 1.7;
}

@media screen and (max-width: 640px) {
  .shindan_article .shindan_textUnderline {
    margin: 15px 0 0;
    line-height: 1.8;
  }
  .shindan_article .shindan_textUnderline .inner {
    font-size: 13px;
  }
}

.shindan_article .shindan_textAnnotation {
  font-size: 11px;
  line-height: 1.4;
  margin-top: 13px;
}

@media screen and (max-width: 640px) {
  .shindan_article .shindan_textAnnotation {
    font-size: 10px;
    margin-top: 4px;
  }
}

.shindan_article .shindan_textAddress {
  line-height: 1.5;
}

@media screen and (max-width: 640px) {
  .shindan_article .shindan_textAddress {
    text-align: center;
    line-height: 1.3;
    font-size: 12px;
  }
}

.shindan_article .shindan_leadAnnotation {
  font-size: 15px;
  font-weight: bold;
  color: #305889;
  line-height: 1;
  margin-bottom: 7px;
}

@media screen and (max-width: 640px) {
  .shindan_article .shindan_leadAnnotation {
    text-align: center;
    font-size: 10px;
    line-height: 1.5;
    margin: 10px 0 9px;
  }
}

.shindan_article .shindan_leadTotal {
  font-size: 12px;
  text-align: center;
  margin-top: 8px;
}

@media screen and (max-width: 640px) {
  .shindan_article .shindan_leadTotal {
    font-size: 10px;
    line-height: 1.2;
    margin-top: 0;
  }
}

.shindan_article .shindan_figure {
  margin-bottom: 42px;
}

@media screen and (max-width: 640px) {
  .shindan_article .shindan_figure {
    margin-bottom: 21px;
  }
}

.shindan_article .shindan_figureAndText {
  width: 100%;
  display: table;
  margin: 60px 0 63px;
}

.shindan_article .shindan_figureAndText .figureBox {
  width: 367px;
  display: table-cell;
}

.shindan_article .shindan_figureAndText .textBox {
  padding-left: 2px;
  display: table-cell;
  vertical-align: middle;
}

.shindan_article .shindan_figureAndText .textBox > p {
  font-size: 16px;
  line-height: 2;
}

@media screen and (max-width: 640px) {
  .shindan_article .shindan_figureAndText {
    display: block;
    margin: 15px 0 25px;
  }
  .shindan_article .shindan_figureAndText .figureBox,
  .shindan_article .shindan_figureAndText .textBox {
    display: block;
    width: 100%;
  }
  .shindan_article .shindan_figureAndText .figureBox {
    text-align: center;
    margin-bottom: 15px;
  }
  .shindan_article .shindan_figureAndText .figureBox img {
    width: 63%;
  }
  .shindan_article .shindan_figureAndText .textBox {
    margin-bottom: 13px;
    padding-left: 0;
  }
  .shindan_article .shindan_figureAndText .textBox > p {
    font-size: 14px;
    line-height: 1.8;
  }
}

.shindan_article .shindan_btnBox {
  width: 100%;
  max-width: 532px;
  margin: 5px 0;
}

@media screen and (max-width: 640px) {
  .shindan_article .shindan_btnBox {
    margin: 0;
  }
}

.shindan_article .shindan_btn {
  text-align: center;
  display: block;
  border-radius: 8px;
  border: 2px solid #86c5ef;
  padding: 5px 0;
  color: #0d8cdf;
  font-weight: bold;
  text-decoration: none;
  font-size: 15px;
  position: relative;
}

.shindan_article .shindan_btn .text-small {
  font-size: 12px;
  color: #0d8cdf;
}

.shindan_article .shindan_btn .icon-angle-right {
  font-size: 2.1rem;
  color: #0d8cdf;
  line-height: 1;
  top: 2px;
  position: relative;
}

.shindan_article .shindan_btn:hover {
  opacity: .8;
}

@media screen and (max-width: 640px) {
  .shindan_article .shindan_btn {
    padding: 5px 0;
    line-height: 1.2;
    font-size: 12px;
  }
  .shindan_article .shindan_btn .icon-angle-right {
    font-size: 17px;
    position: relative;
    top: -7px;
  }
}

.shindan_article .shindan_mailBtnBox {
  width: 100%;
  max-width: 252px;
}

@media screen and (max-width: 640px) {
  .shindan_article .shindan_mailBtnBox {
    max-width: inherit;
  }
}

.shindan_article .shindan_mailBtn {
  box-sizing: border-box;
  background-color: #0d8cdf;
  color: #fff;
  border-radius: 7px;
  position: relative;
  padding: 11px 9px 10px 16px;
  box-sizing: border-box;
  display: block;
  text-align: center;
  font-size: 14px;
  text-decoration: none;
}

.shindan_article .shindan_mailBtn:hover {
  opacity: .8;
}

.shindan_article .shindan_mailBtn > i {
  font-size: 2.1rem;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  line-height: 1;
}

.shindan_article .shindan_mailBtn .icon-mail-alt {
  top: -2px;
}

.shindan_article .shindan_mailBtn .icon-angle-right {
  top: -2px;
}

@media screen and (max-width: 640px) {
  .shindan_article .shindan_mailBtn {
    padding: 11px 9px 10px 17px;
    font-size: 12px;
    border-radius: 4px;
  }
  .shindan_article .shindan_mailBtn > i {
    font-size: 17px;
  }
  .shindan_article .shindan_mailBtn .icon-mail-alt {
    top: -1px;
    margin-right: 4px;
  }
  .shindan_article .shindan_mailBtn .icon-angle-right {
    top: -2px;
    margin-left: 6px;
  }
}

.shindan_article .shindan_label {
  display: block;
}

@media screen and (max-width: 640px) {
  .shindan_article .shindan_label {
    text-align: center;
  }
}

.shindan_article .shindan_label .inner {
  display: inline-block;
  content: "";
  padding: 4px 31px 4px 17px;
  background-color: #305889;
  color: #fff;
  font-size: 14px;
  line-height: 1.4;
  position: relative;
  font-weight: bold;
  border-radius: 0;
}

.shindan_article .shindan_label .inner:after {
  display: block;
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 13px 0 14px 14px;
  border-color: transparent transparent transparent #305889;
  right: -14px;
  top: 0;
  position: absolute;
}

@media screen and (max-width: 640px) {
  .shindan_article .shindan_label .inner {
    padding: 3px 16px 1px;
    font-size: 10px;
  }
  .shindan_article .shindan_label .inner:after {
    display: none;
  }
}

.shindan_article .shindan_annotationList > li {
  font-size: 11px;
  line-height: 1.9;
}

@media screen and (max-width: 640px) {
  .shindan_article .shindan_annotationList {
    margin-left: -7px;
  }
  .shindan_article .shindan_annotationList > li {
    font-size: 12px;
    line-height: 1.5;
    padding-left: 1rem;
    text-indent: -12px;
  }
}

.shindan_article .shindan_figureList {
  width: 100%;
  margin-top: 26px;
}

.shindan_article .shindan_figureList:after {
  display: block;
  content: "";
  clear: both;
}

.shindan_article .shindan_figureList img {
  width: 100%;
  height: auto;
}

.shindan_article .shindan_figureList > li {
  float: left;
  background-color: #305889;
  width: 312px;
  margin-left: 22px;
  padding: 0 3px 3px;
  border-radius: 10px;
}

.shindan_article .shindan_figureList > li:first-child {
  margin-left: 0;
}

.shindan_article .shindan_figureList > li:first-child .body:after {
  background-image: url(/resources/img/campaign/shindan/icon_feature1.png);
}

.shindan_article .shindan_figureList > li:nth-child(2) .body:after {
  background-image: url(/resources/img/campaign/shindan/icon_feature2.png);
}

.shindan_article .shindan_figureList > li:nth-child(3) .body:after {
  background-image: url(/resources/img/campaign/shindan/icon_feature3.png);
}

.shindan_article .shindan_figureList > li .head {
  font-size: 22px;
  font-weight: bold;
  text-align: center;
  line-height: 1.7;
  padding: 11px 0 9px;
  color: #fff;
}

.shindan_article .shindan_figureList > li .body {
  background-color: #fff;
  position: relative;
  padding: 20px 21px 25px;
  border-radius: 0 0 8px 8px;
  min-height: 509px;
}

.shindan_article .shindan_figureList > li .body:after {
  display: block;
  content: "";
  position: absolute;
  width: 91px;
  height: 92px;
  background-repeat: no-repeat;
  background-size: contain;
  right: -13px;
  top: -34px;
}

.shindan_article .shindan_figureList > li .body .title {
  font-size: 24px;
  color: #305889;
  line-height: 1.25;
  text-align: center;
  font-weight: bold;
  margin: 12px 0 10px 0;
}

.shindan_article .shindan_figureList > li .body > p {
  padding: 0 5px;
  margin-bottom: 21px;
  line-height: 1.5;
}

.shindan_article .shindan_figureList > li .body > p:last-child {
  margin-bottom: 0;
}

@media screen and (max-width: 640px) {
  .shindan_article .shindan_figureList {
    margin-top: 0;
  }
  .shindan_article .shindan_figureList > li {
    float: none;
    width: 100%;
    margin-left: 0;
    margin-bottom: 7px;
  }
  .shindan_article .shindan_figureList > li:last-child {
    margin-bottom: 0;
  }
  .shindan_article .shindan_figureList > li .head {
    font-size: 20px;
    padding: 7px 0 2px;
  }
  .shindan_article .shindan_figureList > li .body {
    min-height: inherit;
    padding: 18px 20px 15px;
  }
  .shindan_article .shindan_figureList > li .body .title {
    font-size: 18px;
    margin-bottom: 8px;
  }
  .shindan_article .shindan_figureList > li .body > p {
    font-size: 11px;
    margin-bottom: 0;
    line-height: 1.7;
    padding: 0 3px;
  }
  .shindan_article .shindan_figureList > li .body:after {
    width: 82px;
    height: 82px;
    right: -17px;
    top: -30px;
  }
}

.shindan_article .shindan_flowList {
  width: 100%;
}

.shindan_article .shindan_flowList > li {
  background-color: #fff;
  position: relative;
  border-radius: 14px;
  padding: 30px 37px 32px 130px;
  margin-bottom: 56px;
  box-shadow: 5px 5px #b3b8be;
  /*step1
      ---------------------------*/
  /* step2
      ---------------------------*/
}

.shindan_article .shindan_flowList > li .shindan_iconStep {
  position: absolute;
  left: 36px;
  top: 33px;
}

.shindan_article .shindan_flowList > li:after {
  display: block;
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 30px 47px 0 47px;
  border-color: #839bb8 transparent transparent transparent;
  position: absolute;
  left: 50%;
  bottom: -43px;
  margin-left: -47px;
}

.shindan_article .shindan_flowList > li:last-child {
  margin-bottom: 0;
}

.shindan_article .shindan_flowList > li:last-child:after {
  display: none;
}

.shindan_article .shindan_flowList > li .shindan_mailBtnBox {
  position: absolute;
  right: 48px;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}

.shindan_article .shindan_flowList > li .shindan_tel {
  margin: 6px 0 12px;
}

.shindan_article .shindan_flowList > li > .text {
  padding-left: 56px;
}

.shindan_article .shindan_flowList > li .shindan_label {
  position: absolute;
  top: -10px;
  left: 3px;
}

@media screen and (max-width: 640px) {
  .shindan_article .shindan_flowList > li {
    padding: 21px 16px 15px;
    box-shadow: 2px 2px #b3b8be;
    margin-bottom: 36px;
  }
  .shindan_article .shindan_flowList > li .shindan_iconStep {
    position: static;
  }
  .shindan_article .shindan_flowList > li .shindan_mailBtnBox {
    position: static;
    -webkit-transform: inherit;
        -ms-transform: inherit;
            transform: inherit;
  }
  .shindan_article .shindan_flowList > li > .text {
    padding-left: 0;
    text-align: center;
    line-height: 1.2;
    margin: 12px 0;
    font-size: 11px;
  }
  .shindan_article .shindan_flowList > li .shindan_leadAnnotation {
    text-align: center;
  }
  .shindan_article .shindan_flowList > li .shindan_label {
    position: static;
    margin-bottom: 2px;
  }
  .shindan_article .shindan_flowList > li:after {
    bottom: -25px;
    border-width: 16px 30.5px 0 30.5px;
    margin-left: -30px;
  }
}

.shindan_article .shindan_pagerList {
  background-color: #fff;
  border-radius: 14px;
  padding: 34px 58px 48px;
  margin-top: 23px;
  box-shadow: 5px 5px #3f5a7c;
}

.shindan_article .shindan_pagerList > li {
  border-bottom: 2px solid #cdd7e3;
  padding: 16px 0;
}

.shindan_article .shindan_pagerList > li:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

@media screen and (max-width: 640px) {
  .shindan_article .shindan_pagerList {
    margin-top: 20px;
    padding: 0 16px 21px;
  }
  .shindan_article .shindan_pagerList > li {
    border-bottom: 1px solid #cdd7e3;
    padding: 22px 0 18px;
  }
}

.shindan_article .shindan_panelList {
  width: 100%;
  margin: 38px 0 0;
}

.shindan_article .shindan_panelList:after {
  display: block;
  content: "";
  clear: both;
}

.shindan_article .shindan_panelList > li {
  float: left;
  width: 49%;
  margin-bottom: 25px;
  background-color: #eef2f6;
  padding: 29px 40px 28px 37px;
}

.shindan_article .shindan_panelList > li:nth-child(2n) {
  margin-left: 2%;
}

@media screen and (max-width: 640px) {
  .shindan_article .shindan_panelList {
    margin: 20px 0 0;
  }
  .shindan_article .shindan_panelList > li {
    float: none;
    width: 100%;
    padding: 20px 12px 19px 13px;
    margin-bottom: 8px;
  }
  .shindan_article .shindan_panelList > li:nth-child(2n) {
    margin-left: 0;
  }
}

.shindan_article .panelItem {
  width: 100%;
  display: table;
}

.shindan_article .panelItem .figureBox {
  display: table-cell;
  width: 144px;
}

.shindan_article .panelItem .textBox {
  display: table-cell;
  vertical-align: middle;
  padding-left: 30px;
}

.shindan_article .panelItem .textBox p {
  font-size: 13px;
  line-height: 1.7;
}

.shindan_article .panelItem .textBox .name {
  font-size: 16px;
  font-weight: bold;
  color: #305889;
  margin-bottom: 4px;
}

@media screen and (max-width: 640px) {
  .shindan_article .panelItem .figureBox {
    vertical-align: middle;
    width: 26%;
  }
  .shindan_article .panelItem .textBox {
    width: 74%;
    padding-left: 12px;
  }
  .shindan_article .panelItem .textBox p {
    font-size: 10px;
    line-height: 1.6;
  }
  .shindan_article .panelItem .textBox .name {
    font-size: 12px;
    margin-bottom: 0;
  }
}

.shindan_article .shindan_stepBox {
  width: 100%;
  margin-top: 10px;
}

.shindan_article .shindan_stepBox:after {
  display: block;
  content: "";
  clear: both;
}

.shindan_article .shindan_stepBox .shindan_stepBoxItem {
  float: left;
  padding: 28px 0 0;
  position: relative;
}

.shindan_article .shindan_stepBox .shindan_stepBoxItem:first-child {
  width: 430px;
  border-right: 2px solid #d0d9e4;
}

.shindan_article .shindan_stepBox .shindan_stepBoxItem:last-child {
  margin-left: 40px;
  width: 353px;
}

@media screen and (max-width: 640px) {
  .shindan_article .shindan_stepBox {
    margin-top: 0;
  }
  .shindan_article .shindan_stepBox .shindan_stepBoxItem {
    padding: 6px 0 0;
    margin-bottom: 0;
  }
  .shindan_article .shindan_stepBox .shindan_stepBoxItem:first-child {
    width: 100%;
    border-right: none;
  }
  .shindan_article .shindan_stepBox .shindan_stepBoxItem:last-child {
    width: 100%;
    margin-left: 0;
    margin-bottom: 0;
  }
}

.shindan_article .shindan_supportBox {
  display: table;
  width: 100%;
}

.shindan_article .shindan_supportBox .figureBox {
  display: table-cell;
  width: 134px;
}

.shindan_article .shindan_supportBox .textBox {
  display: table-cell;
  vertical-align: middle;
  width: 710px;
  padding-left: 30px;
}

@media screen and (max-width: 640px) {
  .shindan_article .shindan_supportBox .figureBox {
    display: block;
    width: 100%;
    margin-bottom: 17px;
  }
  .shindan_article .shindan_supportBox .textBox {
    display: block;
    vertical-align: inherit;
    width: 100%;
    padding-left: 0;
  }
  .shindan_article .shindan_supportBox .textBox > p {
    font-size: 12px;
    line-height: 1.5;
  }
}

/* soudan/でしか使わないスタイルを記載しています。
---------------------------*/
/* soudan/で使用している
---------------------------*/
.soudan_list_card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-bottom: 50px;
}

.soudan_list_card > li {
  width: 330px;
  border: 1px solid #305889;
  position: relative;
}

.soudan_list_card > li .head {
  background: #eaeef3;
  text-align: center;
  color: #305889;
  font-size: 1.8rem;
  font-weight: bold;
  padding: 12px 0;
}

.soudan_list_card > li .body {
  padding: 20px 22px 60px;
}

.soudan_list_card > li .body img {
  width: 100%;
  height: auto;
}

.soudan_list_card > li .body .btn_box {
  width: 100%;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  bottom: 20px;
  margin: 0;
}

@media screen and (max-width: 640px) {
  .soudan_list_card {
    display: block;
    margin-bottom: 35px;
  }
  .soudan_list_card > li {
    width: 100%;
    margin-top: 20px;
  }
  .soudan_list_card > li .head {
    font-size: 1.5rem;
    padding: 6px 0;
  }
  .soudan_list_card > li .body {
    padding: 25px 17px;
  }
  .soudan_list_card > li .body p {
    margin-bottom: 1em;
  }
  .soudan_list_card > li .body .btn_box {
    position: static;
    -webkit-transform: none;
        -ms-transform: none;
            transform: none;
  }
}

/* soudan/tel.htmlで使用している
---------------------------*/
.soudan_list_flow {
  margin-bottom: 35px;
  border: 1px solid #305889;
  position: relative;
}

.soudan_list_flow:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 24px 38px 0 38px;
  border-color: #c6c6c6 transparent transparent transparent;
  position: absolute;
  bottom: -25px;
  left: 50%;
  margin-left: -38px;
}

@media screen and (max-width: 640px) {
  .soudan_list_flow:after {
    border-width: 12px 18px 0 18px;
    bottom: -22px;
    margin-left: -18px;
  }
}

.soudan_list_flow:last-child {
  margin-bottom: 0;
}

.soudan_list_flow:last-child:after {
  display: none;
}

.soudan_list_flowHead {
  font-size: 2.2rem;
  line-height: 1.3;
  font-weight: bold;
  color: #305889;
  padding: 16px 0 16px 78px;
  background: #eaeef3;
  border-bottom: 1px solid #305889;
  position: relative;
}

@media screen and (max-width: 640px) {
  .soudan_list_flowHead {
    font-size: 1.2rem;
    padding: 10px 5px 10px 37px;
  }
}

.soudan_list_flowHead > i {
  position: absolute;
  left: 18px;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 38px;
  height: 38px;
}

@media screen and (max-width: 640px) {
  .soudan_list_flowHead > i {
    width: 21px;
    height: 21px;
    left: 7px;
  }
}

.soudan_list_flowHead > i img {
  width: 100%;
  height: auto;
}

.soudan_list_flowBody {
  padding: 19px;
}

.soudan_list_flowBody .imgAndtext {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

@media screen and (max-width: 640px) {
  .soudan_list_flowBody .imgAndtext {
    display: block;
  }
}

.soudan_list_flowBody .imgAndtext .imgBox {
  width: 200px;
}

@media screen and (max-width: 640px) {
  .soudan_list_flowBody .imgAndtext .imgBox {
    width: 100%;
  }
}

.soudan_list_flowBody .imgAndtext .imgBox img {
  width: 100%;
  height: auto;
}

.soudan_list_flowBody .imgAndtext .textBox {
  padding-left: 20px;
  width: 440px;
}

@media screen and (max-width: 640px) {
  .soudan_list_flowBody .imgAndtext .textBox {
    width: 100%;
    padding-left: 0;
  }
}

.soudan_list_flowBody .imgAndtext .textBox p {
  margin-bottom: 1em;
}

.soudan_list_flowBody .imgAndtext .textBox p:last-child {
  margin-bottom: 0;
}

.soudan_list_flowBody .box:last-child {
  margin-bottom: 0;
}

/* soudan_btn_call tel.htmlとvisit.htmlで使用している、「お電話でのご予約」下のテキスト画像部分
---------------------------*/
.soudan_btn_callWrap {
  margin-bottom: 1em;
}

@media screen and (max-width: 640px) {
  .soudan_btn_callWrap {
    display: block;
    width: 100%;
    margin: 12px auto;
    text-align: center;
  }
}

.soudan_btn_call > img {
  vertical-align: bottom;
}

@media screen and (max-width: 640px) {
  .soudan_btn_call {
    display: inline-block;
    background: #f78128;
    width: 230px;
    border-radius: 5px;
    box-shadow: 3px 3px #d9d9d9;
    padding: 8px 10px;
    text-align: center;
    margin: 5px auto;
  }
}

/* soudan_dl_flow tel.htmlで使用している、faxの場合、郵送の場合箇所
---------------------------*/
.soudan_dl_flowWrap {
  margin-top: 22px;
}

.soudan_dl_flowWrap .soudan_dl_flow {
  border-top: 1px solid #d2d2d2;
  padding: 17px 10px;
}

.soudan_dl_flowWrap .soudan_dl_flow dt {
  background: #f78128;
  color: #fff;
  font-size: 1.8rem;
  line-height: 1.33;
  width: 82px;
  height: 82px;
  border-radius: 50%;
  text-align: center;
  padding-top: 20px;
  float: left;
}

.soudan_dl_flowWrap .soudan_dl_flow dd {
  padding-left: 110px;
  padding-top: 8px;
  text-align: left;
}

.soudan_dl_flowWrap .soudan_dl_flow dd > img {
  width: 260px;
  height: auto;
}

.soudan_dl_flowWrap .soudan_dl_flow dd p {
  margin-bottom: 0;
  font-size: 1.3rem;
  line-height: 1.3;
}

@media screen and (max-width: 640px) {
  .soudan_dl_flowWrap .soudan_dl_flow {
    text-align: center;
  }
  .soudan_dl_flowWrap .soudan_dl_flow dt {
    float: none;
    width: auto;
    height: auto;
    padding: 4px 28px;
    border-radius: 12px;
    font-size: 1.2rem;
    display: inline-block;
    margin: 0 auto 8px;
  }
  .soudan_dl_flowWrap .soudan_dl_flow dd {
    text-align: left;
    padding-left: 0;
  }
  .soudan_dl_flowWrap .soudan_dl_flow dd > img {
    width: 100%;
    max-width: 225px;
  }
}

/* soudan_dl_address visit.htmlで使用している、「ご来所」箇所の住所部分
---------------------------*/
.soudan_dl_address dt {
  display: none;
}

.soudan_dl_address dd .soudan_dl_addressInner:after {
  clear: both;
  content: "";
  display: block;
}

.soudan_dl_address dd .text {
  line-height: 1.3;
  float: left;
}

.soudan_dl_address dd .btnWrap {
  float: right;
  margin-top: 20px;
  width: 90px;
  border-radius: 5px;
  box-shadow: 3px 3px #d9d9d9;
  text-align: center;
  margin-bottom: 5px;
  background: #f78128;
}

.soudan_dl_address dd .btnWrap .btn {
  display: block;
  padding: 10px 40px 10px 17px;
  font-size: 1.6rem;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  position: relative;
}

.soudan_dl_address dd .btnWrap .btn:after {
  font-size: 2.6rem;
  line-height: 1;
  position: absolute;
  top: 50%;
  right: 15px;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  content: "";
  font-family: "fontello";
  font-style: normal;
}

.soudan_dl_address dd .btnWrap:hover {
  opacity: 0.7;
}

@media screen and (max-width: 640px) {
  .soudan_dl_address dt {
    display: block;
    width: 120px;
    color: #fff;
    text-align: center;
    font-size: 1.2rem;
    line-height: 1.5;
    background: #f78128;
    margin: 0 auto 15px;
    padding: 3px 0;
    border-radius: 11px;
  }
  .soudan_dl_address dd .text {
    float: none;
  }
  .soudan_dl_address dd .btnWrap {
    float: none;
    margin-top: 15px;
    box-shadow: 3px 3px #d9d9d9;
    width: 230px;
    margin: 0 auto;
  }
  .soudan_dl_address dd .btnWrap .btn {
    font-size: 1.2rem;
    padding: 10px;
  }
}

/* soudan_box_check detail.htmlのチェックボックス
---------------------------*/
.soudan_box_check {
  margin-bottom: 25px;
  padding: 4px;
  border: 1px solid #305889;
}

.soudan_box_check .head {
  background-color: #eaeef3;
  padding: 13px 20px 20px;
  margin-bottom: 25px;
}

.soudan_box_check .head .title {
  font-size: 2rem;
  text-align: center;
  padding: 17px 0;
  background-color: #305889;
  color: #fff;
  font-weight: bold;
  margin-bottom: 25px;
  position: relative;
}

.soudan_box_check .head .title:after {
  position: absolute;
  display: block;
  content: "";
  bottom: -10px;
  left: 50%;
  margin-left: -16px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 16px 16px 0 16px;
  border-color: #305889 transparent transparent transparent;
}

.soudan_box_check .head .lead {
  padding-left: 12px;
  color: #305889;
  font-weight: bold;
  line-height: 1.7;
  margin-bottom: 0;
}

.soudan_box_check .body {
  padding: 0 36px;
}

.soudan_box_check .list_check {
  margin: 7px 0 0;
  padding-bottom: 10px;
}

.soudan_box_check .list_check > li {
  border-bottom: 2px dotted #d0d0d0;
  background: url(/resources/img/common/icon/icon_check2.png) no-repeat left 4px top 17px;
  padding: 15px 0 15px 55px;
  line-height: 1.3;
  font-size: 1.6rem;
}

.soudan_box_check .list_check > li:last-child {
  border-bottom: none;
}

/* soudan_list_comment detail.htmlの対話部分
---------------------------*/
.soudan_list_comment {
  width: 100%;
  box-shadow: 5px 5px #d9d9d9;
  border: 1px solid #c2c2c2;
  padding: 22px 40px 43px 0;
}

.soudan_list_comment > li {
  display: table;
  margin-bottom: 22px;
}

.soudan_list_comment > li:last-child {
  margin-bottom: 0;
}

.soudan_list_comment > li p {
  margin-bottom: 0;
}

.soudan_list_comment > li .img {
  display: table-cell;
  text-align: center;
  width: 127px;
}

.soudan_list_comment > li .img img {
  width: 52px;
  height: 77px;
}

.soudan_list_comment > li .comment {
  display: table-cell;
  vertical-align: middle;
  width: 560px;
}

@media screen and (max-width: 640px) {
  .soudan_list_comment {
    padding: 20px 12px 20px 0;
  }
  .soudan_list_comment > li .img {
    width: 60px;
  }
  .soudan_list_comment > li .img img {
    height: 43px;
    width: auto;
  }
  .soudan_list_comment > li .comment {
    width: auto;
  }
  .soudan_list_comment > li .comment p {
    font-size: 1.2rem;
    line-height: 1.5;
  }
}

/* soudan_box_descriptionWrap
---------------------------*/
.soudan_box_descriptionWrap {
  border: 4px solid #e6e3de;
  background-color: #f2f0ec;
  padding: 27px 30px 40px 20px;
  margin: 45px auto;
}

.soudan_box_descriptionWrap .title {
  text-align: center;
  font-size: 2.2rem;
  color: #305889;
  margin-bottom: 35px;
  font-weight: bold;
}

.soudan_box_descriptionWrap .box_description {
  width: 100%;
}

.soudan_box_descriptionWrap .box_description:after {
  display: block;
  content: "";
  clear: both;
}

.soudan_box_descriptionWrap .box_description .img {
  float: left;
  width: 175px;
  text-align: center;
}

.soudan_box_descriptionWrap .box_description .text {
  float: left;
  width: 444px;
  background-color: #fff;
  padding: 30px 35px 18px;
  border-radius: 3px;
  position: relative;
}

.soudan_box_descriptionWrap .box_description .text:after {
  display: block;
  content: "";
  position: absolute;
  left: -30px;
  top: 55px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 16px 38px 16px 0;
  border-color: transparent #ffffff transparent transparent;
}

@media screen and (max-width: 640px) {
  .soudan_box_descriptionWrap {
    margin: 30px auto;
    padding: 15px 10px;
    border-width: 2px;
  }
  .soudan_box_descriptionWrap .title {
    font-size: 1.5rem;
    margin-bottom: 17px;
  }
  .soudan_box_descriptionWrap .box_description {
    width: 100%;
  }
  .soudan_box_descriptionWrap .box_description .img {
    display: none;
  }
  .soudan_box_descriptionWrap .box_description .text {
    width: 100%;
    padding: 16px 18px;
  }
  .soudan_box_descriptionWrap .box_description .text:after {
    display: none;
  }
  .soudan_box_descriptionWrap .box_description .text p {
    font-size: 1.2rem;
    line-height: 1.5;
    margin-bottom: 0;
  }
  .soudan_box_descriptionWrap .box_description .text img {
    float: left;
    width: 78px;
    height: 86px;
  }
}

/* soudan_table hiyou.htmlで使用している
---------------------------*/
.soudan_table_wrap {
  margin-bottom: 30px;
}

.soudan_table {
  width: 100%;
  border-top: 1px solid #c2c2c2;
  border-left: 1px solid #c2c2c2;
}

.soudan_table th {
  width: 150px;
  background: #f3f3f3;
  text-align: center;
  vertical-align: middle;
  font-size: 1.8rem;
  font-weight: bold;
  border-right: 1px solid #c2c2c2;
  border-bottom: 1px solid #c2c2c2;
}

.soudan_table td {
  padding: 16px 40px;
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
  width: 530px;
  border-right: 1px solid #c2c2c2;
  border-bottom: 1px solid #c2c2c2;
}

.soudan_table .text_important {
  color: #f78128;
  font-size: 3.6rem;
}

.soudan_table .soudan_table_list:after {
  display: block;
  content: "";
  clear: both;
}

.soudan_table .soudan_table_list .item_left {
  float: left;
  margin-top: 8px;
}

.soudan_table .soudan_table_list .item_left > li {
  line-height: 2;
}

.soudan_table .soudan_table_list .item_left > li:first-child:after {
  content: "＋";
  color: #0e8ce0;
  display: block;
  line-height: 0.4;
  margin: 6px 0px;
}

.soudan_table .soudan_table_list .item_right {
  width: 210px;
  margin: 14px 0 16px;
  float: right;
  text-align: left;
  padding: 12px 0 12px 80px;
  background: #e7f4fc url(/resources/img/common/icon/icon_hand2.png) no-repeat 25px center;
}

.soudan_table .soudan_table_list .item_right > span {
  color: #0e8ce0;
  display: block;
  line-height: 1.25;
  font-size: 1.4rem;
}

@media screen and (max-width: 640px) {
  .soudan_table th {
    font-size: 1.3rem;
    width: 30%;
  }
  .soudan_table td {
    font-size: 1.3rem;
    padding: 14px 13px;
    width: 70%;
  }
  .soudan_table .text_important {
    font-size: 2.6rem;
  }
  .soudan_table .soudan_table_list .item_left {
    float: none;
  }
  .soudan_table .soudan_table_list .item_right {
    background-size: 17px auto;
    background-position: 11px;
    padding: 8px 0 5px 32px;
    margin: 10px auto;
    display: inline-block;
    float: none;
  }
  .soudan_table .soudan_table_list .item_right > span {
    font-size: 1rem;
  }
}

/* soudan_box_example hiyou.htmlで使用している
---------------------------*/
.soudan_box_example {
  background: #f3f3f3;
  padding: 20px 30px 25px;
  border-radius: 10px;
  color: #333333;
  margin: 37px 0 20px;
}

.soudan_box_example .text {
  font-size: 1.4rem;
  display: block;
  margin-bottom: 2px;
}

.soudan_box_example .text_money {
  font-size: 3rem;
  font-weight: bold;
  display: inline-block;
}

.soudan_box_example .text_yen {
  font-size: 1.8rem;
  font-weight: bold;
  display: inline-block;
}

.soudan_box_example .text_hiyou {
  font-size: 2.2rem;
  font-weight: bold;
  text-align: center;
  margin-bottom: 0;
}

.soudan_box_example .text_hiyou > span {
  font-size: 2.6rem;
}

.soudan_box_example .text_hiyou2_wrap {
  position: relative;
}

.soudan_box_example .text_hiyou2_wrap:after {
  content: "";
  display: inline-block;
  width: 68px;
  height: 118px;
  background: url(/resources/img/soudan/hiyou/arrow_down.png) no-repeat;
  background-size: contain;
  position: absolute;
  left: 50%;
  bottom: -40px;
  z-index: 1;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
}

.soudan_box_example .text_hiyou2 {
  background: #f78128;
  color: #fff;
  font-size: 2.2rem;
  font-weight: bold;
  text-align: center;
  border-radius: 5px;
  width: 508px;
  margin: 20px auto 40px;
  padding: 6px 0;
  position: relative;
  z-index: 2;
}

.soudan_box_example .color_accent1 {
  color: #f78128;
}

.soudan_box_example .color_accent2 {
  color: #305889;
}

.soudan_box_example .color_accent3 {
  color: #0e8ce0;
}

.soudan_box_example .color_accent4 {
  color: #999999;
}

@media screen and (max-width: 640px) {
  .soudan_box_example {
    margin: 18px 0 8px;
    padding: 15px 20px 20px;
  }
  .soudan_box_example .text {
    font-size: 1.1rem;
  }
  .soudan_box_example .text_money {
    font-size: 2.5rem;
  }
  .soudan_box_example .text_yen {
    font-size: 1.5rem;
  }
  .soudan_box_example .text_hiyou {
    font-size: 1.4rem;
  }
  .soudan_box_example .text_hiyou > span {
    font-size: 1.7rem;
  }
  .soudan_box_example .text_hiyou2_wrap:after {
    width: 42px;
    height: 66px;
    bottom: -20px;
  }
  .soudan_box_example .text_hiyou2 {
    font-size: 1.4rem;
    width: 100%;
    padding: 2px 0;
    margin: 14px auto 30px;
  }
}

.soudan_box_primary,
.soudan_box_secondary {
  margin-top: 20px;
}

.soudan_box_primary:after,
.soudan_box_secondary:after {
  display: block;
  content: "";
  clear: both;
}

.soudan_box_primary .item,
.soudan_box_secondary .item {
  width: 292px;
  float: left;
}

.soudan_box_primary .item:first-child,
.soudan_box_secondary .item:first-child {
  margin-right: 36px;
}

.soudan_box_primary {
  margin-bottom: 30px;
}

.soudan_box_primary .item {
  background: #fff;
  border: 1px solid #0e8ce0;
  border-radius: 5px;
  position: relative;
}

.soudan_box_primary .item:first-child:after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: -30px;
  margin-top: -20px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 23px 0 23px 16px;
  border-color: transparent transparent transparent #0d8bdf;
}

.soudan_box_primary .item .head {
  text-align: center;
  background: #0e8ce0;
  color: #fff;
  font-size: 1.8rem;
  font-weight: bold;
  padding: 8px 0;
}

.soudan_box_primary .item .body {
  padding: 20px 28px 25px;
  text-align: center;
}

.soudan_box_primary .item .body .body_head > p,
.soudan_box_primary .item .body .body_bottom > p {
  margin-bottom: 0;
}

.soudan_box_primary .item .body .body_head > p > span,
.soudan_box_primary .item .body .body_bottom > p > span {
  line-height: 1.5;
}

.soudan_box_primary .item .body .body_head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 245px;
  border-bottom: 1px solid #d4dde7;
  margin-bottom: 10px;
}

@media screen and (max-width: 640px) {
  .soudan_box_primary .item {
    width: 100%;
  }
  .soudan_box_primary .item:first-child {
    margin-right: 0;
    margin-bottom: 37px;
  }
  .soudan_box_primary .item:first-child:after {
    top: auto;
    bottom: -27px;
    border-width: 16px 23px 0 23px;
    border-color: #0d8bdf transparent transparent transparent;
    margin-top: 0;
    right: auto;
    left: 50%;
    margin-left: -23px;
  }
  .soudan_box_primary .item .body {
    padding: 10px 25px 15px;
  }
  .soudan_box_primary .item .body .body_head {
    display: block;
    height: auto;
    padding-bottom: 8px;
  }
}

.soudan_box_secondary {
  margin-bottom: 0;
}

.soudan_box_secondary .item .head {
  text-align: center;
  color: #0e8ce0;
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.3;
  letter-spacing: -1px;
  margin-bottom: 10px;
}

.soudan_box_secondary .item .body {
  background-color: #fff;
}

.soudan_box_secondary .item .body .body_head > p,
.soudan_box_secondary .item .body .body_bottom > p {
  margin-bottom: 0;
}

.soudan_box_secondary .item .body .body_head > p > span,
.soudan_box_secondary .item .body .body_bottom > p > span {
  line-height: 1.5;
}

.soudan_box_secondary .item .body .body_head img {
  width: 100%;
  height: auto;
}

.soudan_box_secondary .item .body .body_bottom {
  padding: 20px 38px 25px;
}

.soudan_box_secondary .item .body .body_bottom > dl dt {
  text-align: center;
  font-weight: bold;
  font-size: 1.6rem;
  color: #0e8ce0;
}

.soudan_box_secondary .item .body .body_bottom .text_caution {
  font-weight: bold;
  font-size: 1.6rem;
  color: #0e8ce0;
  line-height: 1.5;
  margin-top: 50px;
  position: relative;
  text-align: center;
}

.soudan_box_secondary .item .body .body_bottom .text_caution:after {
  content: "";
  display: block;
  width: 28px;
  height: 32px;
  background: url(/resources/img/soudan/hiyou/arrow_down2.png) no-repeat;
  background-size: contain;
  position: absolute;
  top: -34px;
  left: 50%;
  margin-left: -14px;
}

@media screen and (max-width: 640px) {
  .soudan_box_secondary .item {
    width: 100%;
  }
  .soudan_box_secondary .item:last-child {
    margin-top: 18px;
  }
  .soudan_box_secondary .item .head {
    font-size: 1.4rem;
  }
  .soudan_box_secondary .item .body .body_bottom {
    padding: 0 17px 20px;
  }
  .soudan_box_secondary .item .body .body_bottom > dl dt {
    font-size: 1.3rem;
  }
  .soudan_box_secondary .item .body .body_bottom > dl dd {
    font-size: 1.1rem;
    line-height: 1.5;
  }
  .soudan_box_secondary .item .body .body_bottom .text_caution {
    font-size: 1.3rem;
    margin-top: 30px;
  }
  .soudan_box_secondary .item .body .body_bottom .text_caution:after {
    width: 21px;
    height: 24px;
    top: -27px;
  }
}

.soudan_text_muryou {
  font-size: 2.2rem;
  font-weight: bold;
  text-align: center;
  line-height: 1.4;
  margin: 20px 0 30px;
  position: relative;
}

.soudan_text_muryou:after, .soudan_text_muryou:before {
  content: "";
  display: block;
  width: 50px;
  height: 60px;
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  bottom: -4px;
}

.soudan_text_muryou:after {
  background-image: url(/resources/img/soudan/hiyou/right.png);
  right: 43px;
}

.soudan_text_muryou:before {
  background-image: url(/resources/img/soudan/hiyou/left.png);
  left: 43px;
}

.soudan_text_muryou span {
  font-size: 3rem;
  color: #f78128;
}

@media screen and (max-width: 640px) {
  .soudan_text_muryou {
    font-size: 1.3rem;
    width: 195px;
    margin: 15px auto 20px;
  }
  .soudan_text_muryou:after, .soudan_text_muryou:before {
    width: 44px;
    height: 45px;
    bottom: 0;
  }
  .soudan_text_muryou:after {
    right: -45px;
  }
  .soudan_text_muryou:before {
    left: -45px;
  }
  .soudan_text_muryou span {
    font-size: 2rem;
  }
}

.soudan_box_alert {
  border: 1px solid #f78128;
  border-radius: 5px;
  padding: 20px 32px;
  margin: 20px auto 30px;
  background: url("/resources/img/soudan/hiyou/icon_alert.png") no-repeat left 32px center;
}

.soudan_box_alert .img {
  float: left;
}

.soudan_box_alert .list_check {
  margin-left: 70px;
}

.soudan_box_alert .list_check > li {
  padding-left: 26px;
  font-size: 1.3rem;
  background: url("/resources/img/common/icon/icon_check2.png") no-repeat left top 5px;
  background-size: 19px;
}

@media screen and (max-width: 640px) {
  .soudan_box_alert {
    padding: 45px 24px 8px;
    margin: 12px auto;
    background-position: top 8px center;
    background-size: 26px;
  }
  .soudan_box_alert .list_check {
    margin-left: 0;
  }
}

.soudan_headline_balloon_wrap {
  border: 1px solid #0e8ce0;
  font-size: 1.8rem;
  font-weight: bold;
  text-align: center;
  border-radius: 6px;
  padding: 15px 10px;
  position: relative;
  margin-bottom: 18px;
}

.soudan_headline_balloon_wrap .soudan_headline_balloon {
  color: #0e8ce0;
}

.soudan_headline_balloon_wrap:after {
  content: "";
  display: block;
  position: absolute;
  height: 15px;
  width: 15px;
  bottom: -9px;
  left: 50%;
  margin-left: -7px;
  border-top: 1px solid #0e8ce0;
  border-right: 1px solid #0e8ce0;
  background-color: #fff;
  -webkit-transform: rotate(135deg);
      -ms-transform: rotate(135deg);
          transform: rotate(135deg);
}

@media screen and (max-width: 640px) {
  .soudan_headline_balloon_wrap {
    font-size: 1.3rem;
    line-height: 1.38;
    border-width: 2px;
  }
  .soudan_headline_balloon_wrap:after {
    border-width: 2px;
    bottom: -10px;
  }
}

.soudan_box_illust {
  margin-top: 65px;
  padding-bottom: 15px;
  position: relative;
}

.soudan_box_illust .head {
  background: #305889;
  color: #fff;
  font-weight: bold;
  display: inline-block;
  padding: 0 28px;
  border-radius: 15px;
  margin-left: 60px;
}

.soudan_box_illust .text {
  font-size: 3rem;
  font-weight: bold;
  margin: 15px 0 0 80px;
}

.soudan_box_illust .text > span {
  font-size: 4rem;
  color: #f78128;
  border-bottom: 5px solid #ffcf28;
}

.soudan_box_illust .img {
  position: absolute;
  right: 84px;
  bottom: 0;
}

.soudan_box_illust .img > img {
  vertical-align: bottom;
}

@media screen and (max-width: 640px) {
  .soudan_box_illust {
    width: 290px;
    margin: 50px auto 0;
  }
  .soudan_box_illust .head {
    width: 100%;
    margin: 0 0 10px 0;
    font-size: 1.1rem;
    padding: 3px 0;
    text-align: center;
  }
  .soudan_box_illust .inner {
    display: block;
    width: 290px;
  }
  .soudan_box_illust .text {
    font-size: 1.5rem;
    margin: 8px 0 0 25px;
  }
  .soudan_box_illust .text > span {
    font-size: 2rem;
    border-width: 3px;
    padding-bottom: 2px;
  }
  .soudan_box_illust .img {
    width: 62px;
    height: auto;
    right: 30px;
  }
}

/* recordページ固有スタイル
--------------------------------------------------------------*/
.record_table thead th, .record_table thead td {
  background: #dedede;
}

.record_table tbody td {
  text-align: left;
  vertical-align: top;
}

.record_table .table_date {
  font-size: 1.1rem;
  background: #f6f6f6;
}

.record_table .table_count {
  vertical-align: middle;
  text-align: center;
  font-size: 1.6rem;
  font-weight: bold;
  background: #f6f6f6;
}

@media screen and (max-width: 640px) {
  .record_table .table_count {
    font-size: 1.4rem;
  }
}

.record_table .table_link {
  float: right;
}

.record_table .table_link p {
  margin-bottom: 0;
}

.record_image {
  width: 185px;
  text-align: center;
}

@media screen and (max-width: 640px) {
  .record_image {
    width: 180px;
    margin: 10px auto 0;
  }
}

.record_image .head {
  margin-bottom: 15px;
}

@media screen and (max-width: 640px) {
  .record_image .head {
    width: 119px;
    margin: 0 auto 15px;
  }
}

.record_image .body {
  padding-top: 12px;
  background: url("/resources/img/record/bg_img.gif") no-repeat center top;
  min-height: 90px;
}

.record_image .record_count {
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1;
  margin-bottom: 5px;
}

.record_image .record_count span {
  font-size: 4.5rem;
  font-weight: bold;
  color: #cc4500;
  font-family: Helvetica,Arial;
}

.record_image .record_note {
  font-size: 1.2rem;
  line-height: 1;
}

.record_article .headline2 {
  margin-top: 0;
}

/* koukenページ固有スタイル
--------------------------------------------------------------*/
/* mainvisual */
.kouken_mainvisual {
  width: 100%;
  height: 348px;
  background: url("/resources/img/kouken/mainvisual_bg_pc.jpg") no-repeat center center;
  background-size: cover;
}

@media screen and (max-width: 640px) {
  .kouken_mainvisual {
    height: auto;
    background: none;
    margin-bottom: 28px;
  }
}

.kouken_mainvisual .kouken_mainvisual_inner {
  width: 980px;
  margin: 0 auto;
}

@media screen and (max-width: 640px) {
  .kouken_mainvisual .kouken_mainvisual_inner {
    width: 100%;
  }
}

/* kouken_list */
.kouken_list {
  margin-bottom: 0px;
}

.kouken_list:after {
  content: "";
  clear: both;
  display: block;
}

@media screen and (max-width: 640px) {
  .kouken_list {
    margin-bottom: 0px;
  }
}

.kouken_list .kouken_list_item {
  width: 155px;
  float: left;
  overflow: hidden;
  box-sizing: border-box;
  border-radius: 4px;
  border: 2px solid #0e8ce0;
}

@media screen and (max-width: 640px) {
  .kouken_list .kouken_list_item {
    width: 48.5%;
    border-width: 1px;
  }
}

.kouken_list .kouken_list_item:hover {
  opacity: 0.7;
}

.kouken_list .kouken_list_item:nth-child(n+2) {
  margin-left: 10px;
}

@media screen and (max-width: 640px) {
  .kouken_list .kouken_list_item:nth-child(n+2) {
    margin-left: 0;
  }
}

@media screen and (max-width: 640px) {
  .kouken_list .kouken_list_item:nth-child(even) {
    margin-left: 3%;
  }
}

@media screen and (max-width: 640px) {
  .kouken_list .kouken_list_item:nth-child(n+3) {
    margin-top: 12px;
  }
}

.kouken_list .kouken_list_item a {
  display: block;
  width: 100%;
  text-decoration: none;
  text-align: center;
  padding-bottom: 10px;
  color: inherit;
}

@media screen and (max-width: 640px) {
  .kouken_list .kouken_list_item a {
    padding: 0 0 8px 0;
  }
}

.kouken_list .head {
  background: #0e8ce0;
  height: 50px;
  display: table;
  width: 100%;
  margin-bottom: 0;
}

@media screen and (max-width: 640px) {
  .kouken_list .head {
    height: 45px;
  }
}

.kouken_list .head span {
  width: 100%;
  display: table-cell;
  margin: 0;
  padding: 0;
  vertical-align: middle;
  color: #fff;
  font-size: 1.3rem;
  line-height: 1.25;
  box-sizing: border-box;
}

@media screen and (max-width: 640px) {
  .kouken_list .head span {
    font-size: 1.2rem;
  }
}

.kouken_list .image {
  display: block;
  height: 56px;
}

@media screen and (max-width: 640px) {
  .kouken_list .image {
    height: 50px;
  }
}

.kouken_list .image img {
  height: 100%;
  width: auto;
}

.kouken_list .text {
  font-size: 1.6rem;
  color: #0e8ce0;
  font-weight: bold;
  line-height: 1.1;
  display: block;
  margin: 8px 0 0;
}

@media screen and (max-width: 640px) {
  .kouken_list .text {
    font-size: 1.4rem;
  }
}

.kouken_list .detail {
  font-size: 1.2rem;
  font-weight: bold;
  position: relative;
  padding-right: 15px;
}

@media screen and (max-width: 640px) {
  .kouken_list .detail {
    font-size: 1rem;
  }
}

.kouken_list .detail:after {
  content: "";
  font-family: "fontello";
  font-style: normal;
  display: inline-block;
  font-size: 1.5rem;
  color: #f78128;
  position: absolute;
  top: 50%;
  right: 0;
  margin: 1px 0 0;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}

@media screen and (max-width: 640px) {
  .kouken_list .detail:after {
    font-size: 1.3rem;
  }
}

/* kouken_merit */
.kouken_merit {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-bottom: 40px;
}

@media screen and (max-width: 640px) {
  .kouken_merit {
    display: block;
  }
}

.kouken_merit .kouken_merit_item {
  width: 312px;
  background: #eef2f6;
  border-radius: 8px;
}

@media screen and (max-width: 640px) {
  .kouken_merit .kouken_merit_item {
    width: 100%;
    margin-top: 8px;
  }
}

.kouken_merit .inner {
  padding: 22px 30px;
}

@media screen and (max-width: 640px) {
  .kouken_merit .inner {
    padding: 20px;
  }
}

.kouken_merit .number {
  display: block;
  width: 88px;
  margin: 0 auto 15px;
}

.kouken_merit .number img {
  vertical-align: middle;
}

@media screen and (max-width: 640px) {
  .kouken_merit .number {
    width: 61px;
    float: left;
  }
}

.kouken_merit .head {
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 1.33;
  text-align: center;
  margin: 6px 0 15px;
  color: #305889;
}

@media screen and (max-width: 640px) {
  .kouken_merit .head {
    font-size: 1.4rem;
    text-align: left;
    margin: 5px 0 15px;
    padding-left: 73px;
  }
}

.kouken_merit .text {
  color: #305889;
  font-size: 1.3rem;
  line-height: 1.76;
  margin-bottom: 0;
}

@media screen and (max-width: 640px) {
  .kouken_merit .text {
    clear: both;
  }
}

/* kouken_hiyou */
.kouken_hiyou {
  background: #fff9e5;
  margin: 40px auto 20px;
  text-align: center;
  width: 800px;
  padding: 10px 0;
}

@media screen and (max-width: 640px) {
  .kouken_hiyou {
    width: 100%;
    padding: 20px 0;
    margin: 10px auto 15px;
  }
}

.kouken_hiyou p {
  font-size: 3rem;
  font-weight: bold;
  margin-bottom: 0;
}

@media screen and (max-width: 640px) {
  .kouken_hiyou p {
    font-size: 1.8rem;
    line-height: 1.5;
  }
}

.kouken_hiyou p span.emphasis {
  font-size: 4rem;
  color: #f78128;
  border-bottom: 5px solid #ffcf28;
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
}

@media screen and (max-width: 640px) {
  .kouken_hiyou p span.emphasis {
    font-size: 2.4rem;
    border-width: 3px;
  }
}

.kouken_hiyou_note {
  text-align: center;
}

@media screen and (max-width: 640px) {
  .kouken_hiyou_note {
    text-align: left;
  }
}

.kouken_hiyou_note li {
  font-size: 1.2rem;
  line-height: 1.5;
  color: #999999;
}

@media screen and (max-width: 640px) {
  .kouken_hiyou_note li {
    font-size: 1.1rem;
    padding-left: 1em;
    text-indent: -1em;
  }
}


/* kouken 幅800px*/
.kouken_flow_inner01 {
  width: 800px;
  margin: 40px auto;
  padding-top: 2px;

}

@media screen and (max-width: 640px) {
.kouken_flow_inner01 {
    width: 100%;
    margin: 30px auto;
    background: none;
    padding-top: 0;
  }
}


/*kouken　青囲み枠*/
.accentBox {
  border: 4px solid #0D8CE0;
  padding: 20px 50px 20px;
  margin-top: 24px;
  background: #fff;
}

@media screen and (max-width: 640px) {
  .accentBox {
    width: 100%;
    padding: 18px 15px;
    border-width: 2px;
  }
}

.accentBox .accentBox_head {
  font-size: 1.8rem;
  font-weight: 600;
  text-align: center;
  margin-bottom: 15px;
}

@media screen and (max-width: 640px) {
  .accentBox .accentBox_head {
    font-size: get-vw(44px);
    text-align: left;
    padding: 0 12px;
  }
}


/* kouken_flow */
.kouken_flow .kouken_flow_inner {
  width: 800px;
  margin: 40px auto;
  padding-top: 2px;
  background: url("/resources/img/kouken/border.png") repeat-x left top;
}

@media screen and (max-width: 640px) {
  .kouken_flow .kouken_flow_inner {
    width: 100%;
    margin: 30px auto;
    background: none;
    padding-top: 0;
    border-top: 1px dotted #305889;
  }
}

.kouken_flow .kouken_flow_item {
  padding: 40px 0;
  background: url("/resources/img/kouken/border.png") repeat-x left bottom;
  display: table;
  width: 100%;
}

.kouken_flow .kouken_flow_item:after {
  content: "";
  clear: both;
  display: block;
}

@media screen and (max-width: 640px) {
  .kouken_flow .kouken_flow_item {
    background: none;
    border-bottom: 1px dotted #305889;
    padding: 15px 0 10px;
  }
}

.kouken_flow .head {
  font-size: 2.3rem;
  line-height: 1.3;
  color: #305889;
  font-weight: bold;
  display: block;
  margin-bottom: 5px;
}

@media screen and (max-width: 640px) {
  .kouken_flow .head {
    font-size: 1.2rem;
    margin-bottom: 2px;
  }
}

.kouken_flow .number {
  width: 125px;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
}

@media screen and (max-width: 640px) {
  .kouken_flow .number {
    width: 63px;
    vertical-align: top;
    text-align: left;
    padding-left: 8px;
  }
}

.kouken_flow .number img {
  width: 51px;
}

@media screen and (max-width: 640px) {
  .kouken_flow .number img {
    width: 25px;
  }
}

.kouken_flow .body {
  display: table-cell;
  vertical-align: middle;
}

@media screen and (max-width: 640px) {
  .kouken_flow .body {
    vertical-align: top;
  }
}

.kouken_flow .text {
  font-size: 1.4rem;
  line-height: 1.5;
}

@media screen and (max-width: 640px) {
  .kouken_flow .text {
    font-size: 1.2rem;
    line-height: 1.2;
  }
}

/* kouken_flow_text */
.kouken_flow_text {
  font-size: 3rem;
  line-height: 1.7;
  font-weight: bold;
  text-align: center;
}

@media screen and (max-width: 640px) {
  .kouken_flow_text {
    font-size: 1.2rem;
  }
}

.kouken_flow_text span {
  font-size: 4rem;
  color: #f78128;
  border-bottom: 5px solid #ffcf28;
  line-height: 1;
  display: inline-block;
  vertical-align: middle;
}

@media screen and (max-width: 640px) {
  .kouken_flow_text span {
    font-size: 1.6rem;
    border-width: 2px;
  }
}

/* kouken_qa */
.kouken_qa {
  width: 800px;
  margin: 40px auto;
}

@media screen and (max-width: 640px) {
  .kouken_qa {
    width: 100%;
    margin: 20px auto;
  }
}

.kouken_qa .kouken_qa_item {
  padding: 35px 17px;
}

@media screen and (max-width: 640px) {
  .kouken_qa .kouken_qa_item {
    padding: 15px 0;
  }
}

.kouken_qa .kouken_qa_item:nth-child(n+2) {
  border-top: 2px dotted #617fa5;
}

@media screen and (max-width: 640px) {
  .kouken_qa .kouken_qa_item:nth-child(n+2) {
    border-width: 1px;
  }
}

.kouken_qa .kouken_qa_q {
  width: 100%;
  display: table;
  font-size: 2rem;
  font-weight: bold;
  color: #305889;
  padding-left: 90px;
  position: relative;
}

@media screen and (max-width: 640px) {
  .kouken_qa .kouken_qa_q {
    font-size: 1.2rem;
    padding-top: 5px;
    padding-left: 45px;
    min-height: 45px;
  }
}

.kouken_qa .kouken_qa_q:before {
  content: "Q";
  display: inline-block;
  width: 74px;
  height: 74px;
  background: #305889;
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  color: #fff;
  font-weight: bold;
  font-size: 3.5rem;
  text-align: center;
  line-height: 74px;
}

@media screen and (max-width: 640px) {
  .kouken_qa .kouken_qa_q:before {
    width: 36px;
    height: 36px;
    font-size: 1.8rem;
    line-height: 36px;
    -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
            transform: translateY(0);
    top: 10px;
  }
}

.kouken_qa .kouken_qa_q span {
  display: table-cell;
  vertical-align: middle;
}

.kouken_qa .kouken_qa_a {
  display: table;
  width: 100%;
  margin-top: 20px;
  padding-left: 90px;
  position: relative;
}

@media screen and (max-width: 640px) {
  .kouken_qa .kouken_qa_a {
    margin-top: 10px;
    padding-left: 45px;
  }
}

.kouken_qa .kouken_qa_a:before {
  content: "A";
  display: inline-block;
  width: 48px;
  height: 48px;
  background: #f78128;
  border-radius: 50%;
  position: absolute;
  left: 13px;
  top: 0;
  font-size: 2.3rem;
  font-weight: bold;
  color: #fff;
  text-align: center;
  line-height: 48px;
}

@media screen and (max-width: 640px) {
  .kouken_qa .kouken_qa_a:before {
    width: 24px;
    height: 24px;
    font-size: 1.2rem;
    line-height: 24px;
    left: 6px;
    top: 4px;
  }
}

.kouken_qa .kouken_qa_a span {
  display: table-cell;
  vertical-align: middle;
  font-size: 1.5rem;
}

@media screen and (max-width: 640px) {
  .kouken_qa .kouken_qa_a span {
    font-size: 1.2rem;
  }
}

/* kouken_contact */
.kouken_contact {
  margin-bottom: 36px;
}

@media screen and (max-width: 640px) {
  .kouken_contact {
    margin-bottom: 20px;
  }
}

.kouken_contact .kouken_contact_note {
  text-align: center;
  line-height: 1.5;
}

@media screen and (max-width: 640px) {
  .kouken_contact .kouken_contact_note {
    text-align: left;
  }
}

.kouken_contact .kouken_contact_note.important {
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.87;
  color: #305889;
  margin-top: 5px;
}

@media screen and (max-width: 640px) {
  .kouken_contact .kouken_contact_note.important {
    font-size: 1.4rem;
    line-height: 1.5;
    text-align: center;
  }
}

.kouken_contact .kouken_contact_pc {
  width: 800px;
  border: 4px solid #fbc093;
  padding: 21px 45px 20px 53px;
  margin: 10px auto 44px;
  position: relative;
}

.kouken_contact .kouken_contact_pc .kouken_contact_head {
  font-size: 2.8rem;
  font-weight: bold;
  line-height: 1.34;
  color: #305889;
  margin-bottom: 0;
}

.kouken_contact .kouken_contact_pc .kouken_contact_call {
  margin-bottom: 0;
  width: 378px;
}

.kouken_contact .kouken_contact_pc .kouken_contact_call img {
  width: 100%;
  height: auto;
}

.kouken_contact .kouken_contact_mail {
  position: absolute;
  bottom: 35px;
  right: 60px;
  margin-bottom: 0;
}

@media screen and (max-width: 640px) {
  .kouken_contact .kouken_contact_mail {
    position: static;
    max-width: 80%;
    margin: 0 auto 22px;
  }
  .kouken_contact .kouken_contact_mail a {
    width: 100%;
    text-align: center;
  }
}

.kouken_contact .kouken_contact_mail i {
  font-size: 2rem;
  position: absolute;
  top: 50%;
  left: 10px;
  margin-top: -1px;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}

@media screen and (max-width: 640px) {
  .kouken_contact .kouken_contact_mail i {
    font-size: 1.5rem;
  }
}

.kouken_contact .kouken_contact_sp .kouken_contact_head {
  text-align: center;
  font-size: 1.3rem;
  font-weight: bold;
  line-height: 1.18;
  color: #305889;
  margin-bottom: 5px;
}

.kouken_contact .kouken_contact_sp .kouken_contact_btn {
  width: 100%;
  border: 2px solid #f78128;
  border-radius: 5px;
  box-shadow: 2px 2px #c1c1c1;
  margin-bottom: 15px;
}

.kouken_contact .kouken_contact_sp .kouken_contact_btn a {
  display: block;
  width: 100%;
  text-decoration: none;
  text-align: center;
  padding: 11px 13px 8px;
}

.kouken_contact .kouken_contact_sp .kouken_contact_label {
  background: #f78128;
  color: #fff;
  font-size: 1rem;
  font-weight: bold;
  text-align: center;
  border-radius: 10px;
  margin-bottom: 7px;
}

.kouken_contact .kouken_contact_sp .kouken_contact_call {
  margin-bottom: 0;
}

@media screen and (max-width: 640px) {
  .kouken_article {
    padding: 0 15px;
  }
}


/* kouken_table kouken.htmlで使用している
---------------------------*/
.kouken_table_wrap {
  margin-bottom: 30px;
}

.kouken_table {
  width: 100%;
  border-top: 1px solid #c2c2c2;
  border-left: 1px solid #c2c2c2;
}

.kouken_table th {
  width: 150px;
  background: #f3f3f3;
  text-align: center;
  vertical-align: middle;
  font-size: 1.8rem;
  font-weight: bold;
  border-right: 1px solid #c2c2c2;
  border-bottom: 1px solid #c2c2c2;
}

.kouken_table td {
  padding: 16px 40px;
  width: 530px;
  border-right: 1px solid #c2c2c2;
  border-bottom: 1px solid #c2c2c2;
}

.kouken_table .text_important {
  color: #f78128;
  font-size: 3.6rem;
}

.kouken_table .soudan_table_list:after {
  display: block;
  content: "";
  clear: both;
}

.kouken_table .kouken_table_list .item_left {
  float: left;
  margin-top: 8px;
}

.kouken_table .kouken_table_list .item_left > li {
  line-height: 2;
}

.kouken_table .kouken_table_list .item_left > li:first-child:after {
  content: "＋";
  color: #0e8ce0;
  display: block;
  line-height: 0.4;
  margin: 6px 0px;
}

.kouken_table .kouken_table_list .item_right {
  width: 210px;
  margin: 14px 0 16px;
  float: right;
  text-align: left;
  padding: 12px 0 12px 80px;
  background: #e7f4fc url(/resources/img/common/icon/icon_hand2.png) no-repeat 25px center;
}

.kouken_table .kouken_table_list .item_right > span {
  color: #0e8ce0;
  display: block;
  line-height: 1.25;
  font-size: 1.4rem;
}

@media screen and (max-width: 640px) {
  .kouken_table th {
    font-size: 1.3rem;
    width: 30%;
  }
  .kouken_table td {
    font-size: 1.3rem;
    padding: 14px 13px;
    width: 70%;
  }
  .kouken_table .text_important {
    font-size: 2.6rem;
  }
  .kouken_table .kouken_table_list .item_left {
    float: none;
  }
  .kouken_table .kouken_table_list .item_right {
    background-size: 17px auto;
    background-position: 11px;
    padding: 8px 0 5px 32px;
    margin: 10px auto;
    display: inline-block;
    float: none;
  }
  .kouken_table .kouken_table_list .item_right > span {
    font-size: 1rem;
  }
}








/* adire/* の固有スタイル
--------------------------------------------------------------*/
/* adire
---------------------------*/
@media screen and (max-width: 640px) {
  .area_adire .headline3 {
    margin: 0;
  }
  .area_adire .headline4 {
    margin-top: 0;
  }
  .area_adire .js_toggleHead_spOnly + .js_toggleCont {
    padding-top: 15px;
  }
}

/* reason.html
---------------------------*/
.reason_kv {
  margin: 0 0 2.1em;
  padding: 0;
  position: relative;
  background: url(/resources/img/adire/reason/bg.jpg) no-repeat bottom center;
  height: 400px;
  background-size: auto;
}

.reason_kv .title_lead {
  text-align: center;
}

.reason_kv .list_lead {
  padding: 1em 3%;
  display: block;
  position: absolute;
  bottom: 0;
  width: 100%;
  background-color: rgba(48, 88, 137, 0.8);
  color: #fff;
  line-height: 1.2;
}

.reason_kv .list_lead:after {
  content: "";
  clear: both;
  display: block;
}

.reason_kv .list_lead .list_left {
  float: left;
  width: 48%;
}

.reason_kv .list_lead .list_right {
  float: left;
  width: 50%;
}

.reason_kv .list_lead li {
  margin: 0 0 .2em 0;
  color: #fff;
}

.reason_kv .list_lead li:before {
  margin: 0 .3em 0 0;
  color: #fed766;
  content: "";
  font-family: "fontello";
  font-style: normal;
}

@media screen and (max-width: 640px) {
  .reason_kv {
    margin: 0px;
    padding: 58% 0 0 0;
    height: 0;
    background-size: 100% auto;
  }
  .reason_kv .title_lead {
    position: absolute;
    top: 5%;
    margin: 0 .7em 0 .7em;
  }
  .reason_kv .list_lead {
    display: none;
  }
}

/* meritページ固有スタイル
--------------------------------------------------------------*/
.merit_container img {
  vertical-align: middle;
}

@media screen and (max-width: 640px) {
  .merit_container .area_main {
    padding: 0;
  }
}

@media screen and (max-width: 640px) {
  .merit_container .merit_article {
    padding: 0 15px;
  }
}

.merit_container .merit_figure {
  width: 120px;
  text-align: center;
  padding-right: 20px;
}

@media screen and (max-width: 640px) {
  .merit_container .merit_figure {
    display: none;
  }
}

/* mainvisual */
.merit_mainvisual {
  margin-bottom: 44px;
}

@media screen and (max-width: 640px) {
  .merit_mainvisual {
    background: #eaeef3;
    width: 100%;
    text-align: center;
    margin: -20px auto 0;
  }
}

@media screen and (max-width: 640px) {
  .merit_mainvisual .merit_mainvisual_img {
    margin-bottom: 0;
  }
}

@media screen and (max-width: 640px) {
  .merit_mainvisual .merit_mainvisual_text {
    font-size: 14px;
    line-height: 1.5;
    font-weight: bold;
    padding: 18px 10px 22px;
  }
}

@media screen and (max-width: 640px) {
  .merit_mainvisual .merit_mainvisual_text span {
    display: block;
    font-size: 21px;
    line-height: 1.2;
    color: #0e8ce0;
    margin-bottom: 5px;
  }
}

/* merit_caseFigure */
.merit_caseFigure .box_primary {
  background: #eef2f6;
}

.merit_caseFigure .box_image {
  padding: 10px;
}

@media screen and (max-width: 640px) {
  .merit_caseFigure .box_image {
    padding: 5px 0 0;
    margin-bottom: 0;
  }
}

.merit_caseFigure .box_image_img {
  width: 342px;
}

@media screen and (max-width: 640px) {
  .merit_caseFigure .box_image_img {
    width: 100%;
    padding: 10px 0 0;
  }
}

.merit_caseFigure .box_image_img img {
  max-width: 100%;
  height: auto;
}

.merit_caseFigure .box_image_text {
  padding-top: 10px;
}

.merit_caseFigure .box_image_text p {
  margin-bottom: 0;
}

/* merit_supportImg */
.merit_supportImg {
  margin: 0 0 25px 108px;
}

.merit_supportImg:after {
  content: "";
  clear: both;
  display: block;
}

@media screen and (max-width: 640px) {
  .merit_supportImg {
    margin: 0 auto 25px;
    text-align: center;
  }
}

.merit_supportImg .merit_supportImg_img {
  width: 180px;
  float: left;
  margin-right: 24px;
}

@media screen and (max-width: 640px) {
  .merit_supportImg .merit_supportImg_img {
    float: none;
    width: 56%;
    margin: 0 auto;
  }
}

.merit_supportImg .merit_supportImg_img img {
  width: 100%;
  height: auto;
}

.merit_supportImg .merit_supportImg_text {
  font-size: 18px;
  line-height: 1.77;
  font-weight: bold;
  color: #0e8ce0;
  padding-top: 53px;
}

@media screen and (max-width: 640px) {
  .merit_supportImg .merit_supportImg_text {
    font-size: 15px;
    line-height: 1.46;
    padding-top: 12px;
  }
}

/* merit_support */
.merit_support {
  margin: 28px 0;
}

@media screen and (max-width: 640px) {
  .merit_support {
    margin: 20px 0;
  }
}

.merit_support .merit_support_head {
  padding-left: 70px;
  margin-bottom: 19px;
  position: relative;
}

@media screen and (max-width: 640px) {
  .merit_support .merit_support_head {
    text-align: center;
    margin-bottom: 14px;
  }
}

.merit_support .merit_support_head span {
  font-size: 2.2rem;
  line-height: 1.36;
  font-weight: bold;
  color: #0e8ce0;
}

@media screen and (max-width: 640px) {
  .merit_support .merit_support_head span {
    font-size: 1.5rem;
    position: relative;
  }
}

.merit_support .merit_support_head i {
  display: inline-block;
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
  left: 7px;
}

@media screen and (max-width: 640px) {
  .merit_support .merit_support_head.hiyou {
    padding-left: 20px;
  }
}

.merit_support .merit_support_head.hiyou i {
  width: 43px;
  height: 43px;
  background-image: url("/resources/img/common/icon/icon_hiyou.png");
  top: -14px;
}

@media screen and (max-width: 640px) {
  .merit_support .merit_support_head.hiyou i {
    width: 30px;
    height: 30px;
    left: -41px;
    top: -7px;
  }
}

@media screen and (max-width: 640px) {
  .merit_support .merit_support_head.support {
    padding-left: 15px;
  }
}

.merit_support .merit_support_head.support i {
  width: 43px;
  height: 32px;
  background-image: url("/resources/img/common/icon/icon_support.png");
  top: -1px;
}

@media screen and (max-width: 640px) {
  .merit_support .merit_support_head.support i {
    width: 29px;
    height: 22px;
    left: -43px;
    top: -3px;
  }
}

@media screen and (max-width: 640px) {
  .merit_support .merit_support_head.soudan {
    padding-left: 20px;
  }
}

.merit_support .merit_support_head.soudan i {
  width: 47px;
  height: 40px;
  background-image: url("/resources/img/common/icon/icon_soudan.png");
  top: -2px;
}

@media screen and (max-width: 640px) {
  .merit_support .merit_support_head.soudan i {
    width: 32px;
    height: 26px;
    left: -43px;
    top: -3px;
  }
}

.merit_support .merit_support_text {
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.87;
}

@media screen and (max-width: 640px) {
  .merit_support .merit_support_text {
    font-weight: normal;
    font-size: 1.4rem;
  }
}

.merit_support .merit_support_text .text_marker {
  font-size: 2rem;
  color: #305889;
  line-height: 1;
}

@media screen and (max-width: 640px) {
  .merit_support .merit_support_text .text_marker {
    font-size: 1.4rem;
  }
}

.merit_support .merit_support_text .text-small {
  font-size: 8px;
  line-height: inherit;
  font-weight: normal;
}

/* merit_point */
@media screen and (max-width: 640px) {
  .merit_point .box_point {
    margin-top: 60px;
  }
}

.merit_point .list_check2 .text_marker {
  font-size: 2rem;
  line-height: 1;
  color: #305889;
}

@media screen and (max-width: 640px) {
  .merit_point .list_check2 .text_marker {
    font-size: 1.5rem;
  }
}

/* reason.html
---------------------------*/
.bottom_bnr_ks{
  width: 100%;
}

.bottom_bnr_ks img{
  width: 100%;
}

/* profileのindexページで使用しています。
---------------------------*/
/*margin-topがあると、jsの挙動がおかしくなるのでこのページのみ修正
---------------------------*/
@media screen and (max-width: 640px) {
  .area_profile .headline5 {
    margin-top: 0;
  }
}

.area_profile .js_toggleHead_spOnly + .js_toggleCont {
  padding-top: 15px;
}

.box_profile_wrap {
  padding-bottom: 35px;
}

@media screen and (max-width: 640px) {
  .box_profile_wrap {
    padding-bottom: 20px;
  }
}

.box_profile_wrap:after {
  content: "";
  clear: both;
  display: block;
}

.box_profile {
  width: 49%;
  float: left;
  border: 1px solid #d9d9d9;
  border-radius: 5px;
  padding: 4px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.box_profile .box_profile_image {
  width: 130px;
}

.box_profile .box_profile_image img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

.box_profile .box_profile_text {
  padding-left: 30px;
}

.box_profile .box_profile_text .box_profile_head {
  font-size: 1.6rem;
  font-weight: bold;
  margin-bottom: 15px;
}

@media screen and (min-width: 641px), print {
  .box_profile:nth-child(even) {
    margin-left: 2%;
  }
  .box_profile:nth-child(n+3) {
    margin-top: 2%;
  }
}

@media screen and (max-width: 640px) {
  .box_profile {
    width: 100%;
    float: none;
    margin-top: 15px;
  }
  .box_profile .box_profile_image {
    width: 75px;
  }
  .box_profile .box_profile_text {
    padding-left: 6%;
  }
  .box_profile .box_profile_text .box_profile_head {
    font-size: 1.4rem;
    margin-bottom: 10px;
  }
  .box_profile .box_profile_text .btn_tertiary {
    padding-right: 12px;
  }
}

.body-container__wrapper {
  width: 980px;
  margin: 0 auto;
}

@media screen and (max-width: 640px) {
  .body-container__wrapper {
    width: 100%;
  }
}

@media screen and (max-width: 640px) {
  .body-container__content {
    width: 100%;
    padding: 10px 15px 36px;
  }
}


/*支店ページ テンプレ―ト調整CSS*/
.area_map h3 {
  position: relative;
  font-weight: bold;
  font-size: 2rem;
  line-height: 1.3;
  width: 100%;
  padding: .5em .625em .5em 2em;
  border-top: 2px solid #ddd;
  border-bottom: 1px dotted #ddd;
  background-color: #f6f6f6;
  margin: 25px 0 10px;
}
.area_map h3:before {
  position: absolute;
  top: 50%;
  left: .625em;
  content: '';
  width: .5em;
  height: .5em;
  border-radius: 50%;
  border: 3px solid #0e8ce0;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}
.area_map ul {
  margin: 0 0 2em 13px;
}
.area_map ul li{
  text-indent: -13px;
}
.area_map ul li::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #0e8ce0;
  margin-right: 6px;
  vertical-align: middle;
}
@media screen and (max-width: 640px) {
  .area_map h3 {
    margin: 15px 0 5px;
    font-size: 1.6rem;
    padding: .35em .625em .35em 2em;
  }
}

.area_parking h3 {
  position: relative;
  font-weight: bold;
  font-size: 2rem;
  line-height: 1.3;
  width: 100%;
  padding: .5em .625em .5em 2em;
  border-top: 2px solid #ddd;
  border-bottom: 1px dotted #ddd;
  background-color: #f6f6f6;
  margin: 25px 0 10px;
}
.area_parking h3:before {
  position: absolute;
  top: 50%;
  left: .625em;
  content: '';
  width: .5em;
  height: .5em;
  border-radius: 50%;
  border: 3px solid #0e8ce0;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}
.area_parking h3 > span {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateY(-1px);
      -ms-transform: translateY(-1px);
          transform: translateY(-1px);
  margin-left: 5px;
  background: #ffe0e0;
  display: inline-block;
  border-radius: 5px;
  font-size: 1.2rem;
  padding: 6px 10px;
  line-height: 1;
}
.area_parking dl {
  line-height: 2;
}
.area_parking dl dt {
  font-weight: bold;
}
@media screen and (max-width: 640px) {
  .area_parking h3 {
    margin: 15px 0 5px;
    font-size: 1.6rem;
    padding: .35em .625em .35em 2em;
  }
}

/*------------------------------
PCサイドバー　アコーディオン
------------------------------*/
.acd_check{
    display: none;
}
.acd_head{
    display: block;
    position: relative;
}
.acd_head:before,
.acd_head:after{
    content: "";
    display: block;
    position: absolute;
    background: #fff;    
    top: 50%;
}
.acd_head:before{
    height: 12px;
    width: 2px;
    right: 17px;
    margin-top: -6px;
}
.acd_head:after{
    height: 2px;
    width: 12px;
    right: 12px;
    margin-top: -1px;
}
.acd_body{
    height: 0;
    opacity: 0;
    transition: .5s;
    visibility: hidden;
}
.acd_check:checked + .acd_head + .acd_body{
    height: 310px;
    opacity: 1;
    visibility: visible;
}
.acd_check:checked + .acd_head:before{
    display: none;
    transition: .5s;
}