@charset "UTF-8";
/*

template project
@jun akagi

*/
/*body {background: url(../../master.jpg) 0 7px;}*/
#mainVisual {
  /*	height: 584px;*/
  position: relative;
  background: #eee;
  clear: both;
}

#mainVisual img {
  max-width: 100%;
}

#slick li.slick-slide,
#slickmobile {
  text-align: center;
  background: #2D77CE;
}

#slick li img {
  display: inline;
  vertical-align: bottom;
}

.slick-prev,
.slick-next {
  z-index: 99;
  width: 50px;
  height: 100%;
  opacity: 0.6;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus,
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before {
  opacity: 1;
}

.slick-prev:before,
.slick-next:before,
.slick-prev:after,
.slick-next:after {
  content: "";
  position: absolute;
  top: 50%;
  opacity: 1;
  width: 8px;
  height: 30px;
  background: #fff;
  z-index: 100;
}

.slick-prev:before,
.slick-prev:after {
  left: 10px;
}

.slick-next:before,
.slick-next:after {
  right: 10px;
}

.slick-prev {
  left: 0;
}

[dir=rtl] .slick-prev {
  right: 0;
  left: auto;
}

.slick-prev:before,
[dir=rtl] .slick-prev:after {
  -webkit-transform: translateY(0) rotate(-45deg);
      -ms-transform: translateY(0) rotate(-45deg);
          transform: translateY(0) rotate(-45deg);
  -webkit-transform-origin: top left;
      -ms-transform-origin: top left;
          transform-origin: top left;
}

.slick-prev:after,
[dir=rtl] .slick-prev:before {
  -webkit-transform: translateY(-100%) rotate(45deg);
      -ms-transform: translateY(-100%) rotate(45deg);
          transform: translateY(-100%) rotate(45deg);
  -webkit-transform-origin: bottom left;
      -ms-transform-origin: bottom left;
          transform-origin: bottom left;
}

.slick-next {
  right: 0;
}

[dir=rtl] .slick-next {
  right: auto;
  left: 0;
}

.slick-next:before,
[dir=rtl] .slick-next:after {
  -webkit-transform: translateY(0) rotate(45deg);
      -ms-transform: translateY(0) rotate(45deg);
          transform: translateY(0) rotate(45deg);
  -webkit-transform-origin: top right;
      -ms-transform-origin: top right;
          transform-origin: top right;
}

.slick-next:after,
[dir=rtl] .slick-next:before {
  -webkit-transform: translateY(-100%) rotate(-45deg);
      -ms-transform: translateY(-100%) rotate(-45deg);
          transform: translateY(-100%) rotate(-45deg);
  -webkit-transform-origin: bottom right;
      -ms-transform-origin: bottom right;
          transform-origin: bottom right;
}

.slick-dotted.slick-slider {
  font-size: 1em;
}

.slick-dots {
  background: #20518C;
  font-size: 1em;
  line-height: 1;
  padding: 1em 0px;
  height: 1em;
  bottom: -3em;
}
@media only screen and (max-width: 767px) {
  .slick-dots {
    padding: 0.3em 0;
    bottom: auto;
    height: auto;
  }
}

.slick-dots li {
  width: 1em;
  height: 1em;
  margin: 0 18px;
}
@media only screen and (max-width: 767px) {
  .slick-dots li {
    margin: 0 10px;
  }
}

.slick-dots li button {
  width: 100%;
  height: 100%;
  padding: 0;
}

.slick-dots li button:before {
  font-family: "slick";
  font-size: 20px;
  line-height: 0.2;
  width: 100%;
  height: 100%;
  opacity: 0.25;
  color: #fff;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
@media only screen and (max-width: 767px) {
  .slick-dots li button:before {
    font-size: 12px;
    line-height: 1;
  }
}

.slick-dots li.slick-active button:before {
  opacity: 0.75;
  color: #fff;
}

#movie {
  overflow: hidden;
  max-width: 920px;
  padding: 14px 0;
  margin: 0 auto 18px;
}

@supports (display: grid) {
  #movie {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 10px 1fr 10px 1fr;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
  }
}
#movie li {
  float: left;
  width: 300px;
  margin-right: 10px;
  padding: 0;
}

@supports (display: grid) {
  #movie li {
    float: none;
    width: 100%;
    margin: 0;
  }
}
#movie li:last-child {
  margin-right: 0px;
}

#moviemobile {
  padding: 20px 0;
  display: none;
}

#moviemobile h3 {
  font-size: 120%;
  text-align: center;
  margin-bottom: 9px;
}

.movie a {
  display: block;
  width: 100%;
  border: #666 1px solid;
  text-align: center;
  position: relative;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.movie img {
  vertical-align: bottom;
}

#movie a.general,
#moviemobile a.general {
  background: #006CB8;
}

#movie a.traffic,
#moviemobile a.traffic {
  background: #E73656;
}

#movie a.car,
#moviemobile a.car {
  background: #007BC7;
}

#movie a.triple,
#moviemobile a.triple {
  background: #dc5310;
}

.movie a:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateY(-50%) translateX(-50%);
      -ms-transform: translateY(-50%) translateX(-50%);
          transform: translateY(-50%) translateX(-50%);
  background: #000;
  width: 150px;
  height: 150px;
  border-radius: 75px;
  opacity: 0.2;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

.movie a:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateY(-50%) translateX(-30%);
      -ms-transform: translateY(-50%) translateX(-30%);
          transform: translateY(-50%) translateX(-30%);
  border: transparent 40px solid;
  border-left-color: #fff;
  border-left-width: 50px;
  border-right: none;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  opacity: 0.4;
}

.movie a:hover:before {
  opacity: 0.6;
}

.movie a:hover:after {
  border-width: 50px;
  border-left-width: 70px;
  border-right: none;
  opacity: 1;
}

@media only screen and (max-width: 767px) {
  #movie {
    display: none;
  }
  #moviemobile {
    display: block;
  }
  .movie a:before {
    width: 50px;
    height: 50px;
    border-radius: 25px;
    opacity: 0.4;
  }
  .movie a:after,
  .movie a:hover:after {
    border: transparent 10px solid;
    border-left-color: #fff;
    border-left-width: 15px;
    border-right: none;
    opacity: 1;
  }
}
#main {
  overflow: hidden;
}

@media only screen and (max-width: 767px) {
  #main {
    font-size: 94% !important;
  }
}
@media only screen and (max-width: 399px) {
  #main {
    font-size: 83.3% !important;
  }
}
body {
  -webkit-text-size-adjust: 100%;
}

body#top #main article,
body.other #main article {
  float: none;
  width: 100%;
  margin-bottom: 90px;
}

#main > aside {
  position: absolute;
  width: 100%;
  background: #fff;
  z-index: 200;
  left: calc(((100% - 960px) / 2 + 320px) * -1);
  width: calc((100% - 960px) / 2 + 320px);
  height: 100%;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

#main article article {
  width: 740px;
}

#main article aside {
  width: 190px;
  margin: 0 0 10px 10px;
}

#main article aside figure figcaption {
  text-align: left;
}

.snavactive #main aside {
  left: 0;
  width: calc((100% - 960px) / 2 + 320px);
}

@media only screen and (max-width: 767px) {
  #main .flex,
  #main .flex {
    display: block;
  }
  #main .flex article,
  #main .flex aside {
    width: 100%;
    margin: 0;
  }
}
#main article .unit > div {
  padding: 40px 20px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

#main article .unit div.table-responsive {
  border-color: #666;
}

#main article .unit div.table-responsive,
#main article .unit div.table-wrapper div {
  padding: 0;
  margin-bottom: 0;
}

#main article .unit div.table-responsive > div,
#main article .unit .table-wrapper .btn-toolbar {
  display: none;
}

#main article .unit:nth-child(2n) {
  background: #eee;
}

#top #main article .unit:nth-child(2n) {
  background: none;
}

#main article .unit:last-child {
  margin-bottom: 50px;
}

#main article .unit + .unit,
#footer article .unit + .unit {
  margin-top: 36px;
}

@media only screen and (max-width: 768px) {
  #main article .unit div {
    padding: 18px 9px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  #main article .unit:nth-child(2n) {
    background: #eee;
  }
  #main article .unit:last-child {
    margin-bottom: 50px;
  }
  #main article .unit + .unit,
  #footer article .unit + .unit {
    margin-top: 18px;
  }
}
#main.accent article h3 {
  font-size: 190%;
  text-align: center;
  color: #444;
  margin-bottom: 18px;
}

#main.standard article h3 {
  font-size: 150%;
  color: #1D7EC2;
  margin-bottom: 18px;
  display: inline-block;
  position: relative;
}

#main.standard article p + h3,
#main.standard article ul + h3,
#main.standard article ol + h3,
#main.standard article table + h3,
#main.standard article div + h3,
#main.standard article dl + h3 {
  margin-top: 18px;
}

body#newsitem #main.standard article h3,
body.column #main.standard article h3 {
  display: block;
  clear: both;
}

#main article h3 span,
#main article h4 span {
  font-size: 75%;
  color: inherit;
}

#main.standard article td h3 {
  display: block;
}

#main.standard article h3.texticon {
  display: inline-block;
  position: relative;
}

#main.standard article h3.texticon:after {
  content: attr(data-text);
  position: absolute;
  font-size: 50%;
  width: 5em;
  height: 5em;
  top: 50%;
  right: -5.5em;
  -webkit-transform: translateY(-50%) rotate(15deg);
      -ms-transform: translateY(-50%) rotate(15deg);
          transform: translateY(-50%) rotate(15deg);
  background: #e50150;
  border-radius: 2.5em;
  border: #fff 2px solid;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #fff;
  font-weight: bold;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  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;
}

@media only screen and (max-width: 399px) {
  #main.accent article h3 {
    font-size: 130%;
  }
  #main.standard article h3 {
    font-size: 130%;
  }
}
#main aside h3 {
  background: #00A1E9;
  color: #fff;
  padding: 9px 10px;
  margin-bottom: 18px;
  font-size: 115%;
  line-height: 1.5;
  position: relative;
}

#main article h4 {
  color: #333;
  border-bottom: #333 1px solid;
  margin-bottom: 18px;
  padding: 0 0.5em;
  font-size: 120%;
  line-height: 1.5;
  position: relative;
}

#main article * + h4,
#main article * + h5 {
  margin-top: 36px;
}

#main article h3 + h4,
#main article h4 + h5 {
  margin-top: 0px;
}

#main article h5 {
  color: #333;
  font-weight: bold;
  margin-bottom: 18px;
  font-size: 94%;
}

#main article h6 {
  background: #eee;
  padding: 5px 10px 5px;
  margin-bottom: 18px;
  line-height: 1.5;
}

article hr {
  height: 2px;
  border: none;
  background: #999;
  margin: 36px 0;
}

article p {
  line-height: 1.8;
  margin-bottom: 18px;
  font-size: 94%;
}

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

article strong {
  font-weight: bold;
}

article blockquote,
article pre {
  background: #eee;
  padding: 1em 3em 1em;
  margin-bottom: 18px;
}

article blockquote p:last-child {
  margin-bottom: 0;
}

article pre {
  -webkit-box-shadow: #ccc 0 0 50px inset;
          box-shadow: #ccc 0 0 50px inset;
  text-align: left;
  overflow-x: auto;
  border-radius: 10px;
  font-size: 83.3%;
  line-height: 1.3;
}

article figure {
  line-height: 1.8;
  margin-bottom: 18px;
  font-size: 94%;
  text-align: center;
}

#main figure.c-figure-aside {
  float: right;
  width: 200px;
  max-width: 33vw;
  margin-left: 1em;
}

#main figure.c-figure-aside img {
  margin-bottom: 1em;
}

#main figure.c-figure-aside figcaption {
  text-align: left;
}

article figure img,
article figure video {
  width: auto !important;
  max-width: 100%;
}

article figure video {
  background: #fff;
}

#main article figure {
  margin: 0 0 18px;
  width: 100%;
}

#main article figure img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

#main article figure img[src$=".svg"] {
  height: 100%;
}

#main article figure figcaption {
  text-align: left;
  font-size: 83.3%;
}

#main article figure figcaption.txtAlignC {
  text-align: center;
}

#main article figure.txtAlignC figcaption {
  text-align: center;
}

#main article figure figcaption.txtAlignR {
  text-align: right;
}

#main article figure.txtAlignR figcaption {
  text-align: right;
}

#main article figure.floatContentsR,
#main article figure.floatContentsL {
  margin: 0 10px 18px 0;
  width: auto;
  max-width: calc(33.3% - 10px);
}

#main article figure.floatContentsR {
  margin: 0 0 18px 10px;
}

#main article figure.floatContentsL {
  margin: 0 10px 18px 0;
}

@media only screen and (max-width: 767px) {
  #main article figure.floatContentsR,
  #main article figure.floatContentsL {
    margin: 0 0 18px;
    width: 100%;
    max-width: 100%;
    float: none;
  }
}
article table {
  border-top: #666 1px solid;
  border-left: #666 1px solid;
  width: 100%;
  margin-bottom: 18px;
  font-size: 94%;
}

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

article .flex > table {
  width: auto;
}

article table.harf {
  width: 50%;
}

article table th,
article table td {
  border-right: #666 1px solid;
  border-bottom: #666 1px solid;
  padding: 0.5em 10px;
  line-height: 1.3;
  text-align: left;
}

article table caption {
  line-height: 1.3;
}

article table td {
  background: #fff;
}

#newsitem article table.zero th,
#newsitem article table.zero td {
  vertical-align: top;
}

article table.fixth th {
  width: 20%;
}

article table thead th {
  background: #ccc;
  text-align: center;
}

article table tbody th {
  background: #eee;
  font-weight: normal;
}

article table span {
  font-size: 83.3%;
}

article table.zero,
article table.zero th,
article table.zero td {
  padding: 0;
  line-height: 1.8;
  border: none;
}

article table.example_table th,
article table.example_table td {
  border-top: none;
  border-left: none;
}

article table.example_table,
article table.example_table th,
article table.example_table td {
  border-color: #016bb7;
}

article .tablesizesetting table th {
  width: 80%;
}

@media only screen and (max-width: 767px) {
  article table {
    font-size: 83.3%;
  }
  article table.harf {
    width: 75%;
  }
}
@media only screen and (max-width: 580px) {
  article table.harf {
    width: 100%;
  }
}
@media only screen and (max-width: 399px) {
  article table {
    font-size: 75%;
  }
  article table th,
  article table td {
    padding: 3px;
  }
}
article dl,
article ul,
article ol {
  margin-bottom: 18px;
}

article ul {
  padding-left: 1.2em;
}

article ol {
  padding-left: 1.5em;
}

article li > ul,
article li > ol {
  margin-top: 9px;
  margin-bottom: 0;
}

article ul li,
article ol li {
  line-height: 1.8;
  margin-bottom: 9px;
  font-size: 94%;
  position: relative;
}

article ul li li,
article ol li li {
  font-size: inherit;
}

article ol > li {
  list-style: decimal;
}

article ol ul li,
article ul[style] {
  list-style: none !important;
}

article ul li:before {
  position: absolute;
  left: -1.2em;
  color: #1d7ec2;
}

article ul > li:before {
  content: "●";
}

article ul ul > li:before,
article ul[style="list-style-type: circle;"] > li:before {
  content: "○";
}

article ul ul ul > li:before {
  content: "■";
}

article ol.zengokakko {
  counter-reset: zengokakko;
  padding-left: 2em;
}

article ol.zengokakko > li {
  list-style: none;
}

article ol.zengokakko > li:before {
  counter-increment: zengokakko;
  content: "(" counter(zengokakko) ")";
  position: absolute;
  left: -2em;
  color: #333;
}

article ol.chu {
  counter-reset: chu;
  padding-left: 3em;
  margin-bottom: 18px;
  font-size: 83.3%;
}

article ol.chu > li {
  list-style: none;
}

article ol.chu > li:before {
  counter-increment: chu;
  content: "(注" counter(chu) ")";
  position: absolute;
  left: -3em;
  color: #333;
}

article ol.iroha {
  counter-reset: iroha;
  padding-left: 2em;
}

article ol.iroha > li {
  list-style: none;
}

article ol.iroha > li:before {
  counter-increment: iroha;
  content: counter(iroha, katakana-iroha) "．";
  position: absolute;
  left: -2em;
  color: #333;
}

article ol.katakana {
  counter-reset: katakana;
  padding-left: 2em;
}

article ol.katakana > li {
  list-style: none;
}

article ol.katakana > li:before {
  counter-increment: katakana;
  content: counter(katakana, katakana) "．";
  position: absolute;
  left: -2em;
  color: #333;
}

article ul.comeList,
article ul.comeListUl,
article dl.accordion .active ul.comeList,
article dl.accordion .active ul.comeListUl,
article ul[style="list-style-type: square;"] {
  padding-left: 1em;
  margin-bottom: 18px;
  font-size: 83.3%;
}

article dl.accordion ul.comeList,
article dl.accordion ul.comeListUl {
  margin-bottom: 0;
}

article ul.comeListUl,
article ul[style="list-style-type: square;"] {
  padding-left: 2.2em;
}

article ol.chu > li,
article ul.comeList > li,
article ul[style="list-style-type: square;"] > li {
  margin-bottom: 0;
  font-size: 100%;
}

article ul.comeList > li:before,
article ul[style="list-style-type: square;"] > li:before {
  left: -1em;
  color: inherit;
  content: "※";
}

article ul.comeListUl > li.comeListItem,
article ul.comeListUl > li.chuListItem {
  margin-bottom: 0;
  font-size: 100%;
}

article ul.comeListUl > li.comeListItem:before,
article ul.comeListUl > li.chuListItem:before {
  left: -2.2em;
  color: inherit;
}

article ul.comeListUl > li.comeListItem:before {
  content: "※";
}

article ul.comeListUl > li.chuListItem:before {
  content: "(注)";
}

article .comeList li > ul,
article .comeList li > ol {
  margin-top: 0;
}

article ul.comeList li li {
  margin-bottom: 0;
}

article ul.cautionList {
  padding-left: 3em;
  font-size: 83.3%;
}

article ul.cautionList > li {
  margin-bottom: 0;
  font-size: 100%;
}

article ul.cautionList > li:before {
  left: -3em;
  color: inherit;
  content: "（注）";
}

article .cautionList li > ul,
article .cautionList li > ol {
  margin-top: 0;
}

article ul.cautionList li li {
  margin-bottom: 0;
}

.emphasis {
  background: #fff;
  display: block;
  padding: 10px 10px 10px 30px;
  border-radius: 10px;
  position: relative;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  border: #1d7ec2 2px solid;
  margin-bottom: 0;
}

.emphasis:before {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  left: 7px;
  border: none;
  content: "●";
  color: #1d7ec2;
}

article table ul,
article table ol,
article table li {
  margin-bottom: 0;
  font-size: inherit;
}

/*-------------------------------------------------------

unit

designセクションでは吸収しきれない個別スタイルをここで設定する

-------------------------------------------------------*/
#main .sitemap_data {
  overflow: hidden;
}

#main .sitemap_data li {
  margin-bottom: 9px;
  float: left;
  width: 100%;
}

#main .sitemap_data li:before {
  content: none;
}

#main .sitemap_data > ul > li {
  margin-top: 9px;
  margin-bottom: 9px;
}

#main .sitemap_data ul > li:last-child {
  margin-bottom: 0;
}

#main .sitemap_data li a {
  display: block;
  background: #eee;
  line-height: 1.2;
  padding: 0.5em;
  border-radius: 5px;
  text-decoration: none;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

#main .sitemap_data li span {
  display: block;
  border: #ddd 1px solid;
  line-height: 1.2;
  padding: 0.5em;
  border-radius: 5px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

#main .sitemap_data li:hover > a {
  background: #ccc;
}

#main .sitemap_data li a:hover {
  background: #2554b0;
  color: #fff;
}

#main .sitemap_data li a .short {
  display: none;
}

#main .sitemap_data li ul {
  padding-top: 9px;
  padding-left: 36px;
  margin-top: 0;
  overflow: hidden;
}

#main .sitemap_data li ul li {
  position: relative;
  float: left;
  width: calc(50% - 18px);
}

#main .sitemap_data li ul li:nth-child(2n) {
  float: right;
  clear: right;
}

#main .sitemap_data li ul li:nth-child(2n-1) {
  clear: left;
}

#main .sitemap_data li ul li:before,
#main .sitemap_data li ul li:after {
  content: "";
  display: block;
  background: #eee;
  position: absolute;
  z-index: 1;
  -webkit-transition: background 0.05s, z-index 0.05s 0.05s;
  transition: background 0.05s, z-index 0.05s 0.05s;
}

#main .sitemap_data li ul li:before {
  width: 1px;
  height: auto;
  position: absolute;
  top: -1000px;
  bottom: calc(100% - 0.6em - 0.5em);
  left: -18px;
}

#main .sitemap_data li ul li:after {
  width: 18px;
  height: 1px;
  position: absolute;
  top: calc(1.65em - 9px);
  left: -18px;
}

#main .sitemap_data li ul li:hover:before,
#main .sitemap_data li ul li:hover:after {
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  background: #2554b0;
  z-index: 1000;
}

#main .sitemap_data li ul li li,
#main .sitemap_data li ul li li:nth-child(2n) {
  position: relative;
  float: none;
  width: 100%;
}

#main .sitemap_data .nositemap,
#main .sitemap_data i.def {
  display: none;
}

@media only screen and (max-width: 767px) {
  #main .sitemap_data {
    overflow: hidden;
  }
  #main .sitemap_data li ul ul li {
    float: none !important;
    width: 100%;
    position: relative;
  }
}
@media only screen and (max-width: 639px) {
  #main .sitemap_data {
    overflow: hidden;
  }
  #main .sitemap_data li ul li {
    float: none;
    width: 100%;
    clear: both;
  }
  #main .sitemap_data li ul li:nth-child(2n-1) {
    clear: both;
  }
  #main .sitemap_data li ul ul li {
    float: none !important;
    width: 100%;
    position: relative;
  }
}
@media only screen and (max-width: 399px) {
  #main .sitemap_data {
    overflow: hidden;
  }
  #main .sitemap_data li ul {
    padding-left: 19px;
  }
  #main .sitemap_data li ul li {
    float: none;
    width: 100%;
    clear: both;
  }
  #main .sitemap_data li ul li:nth-child(2n-1) {
    clear: both;
  }
  #main .sitemap_data li ul ul li {
    float: none !important;
    width: 100%;
    position: relative;
  }
  #main .sitemap_data li ul li:before {
    left: -9px;
    bottom: calc(100% - 0.6em - 0.4em);
  }
  #main .sitemap_data li ul li:after {
    width: 9px;
    left: -9px;
  }
}
.cautionnews {
  padding: 0 20px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
@media only screen and (max-width: 767px) {
  .cautionnews {
    padding-inline: 0;
    position: relative;
  }
}
.cautionnews h3 {
  border-top: #E50150 5px solid;
  padding: 0;
  color: #E50150;
  font-size: 150%;
  font-weight: bold;
  padding: 10px 5px 0;
  text-align: left;
  margin-bottom: 9px;
}
@media only screen and (max-width: 767px) {
  .cautionnews h3 {
    font-size: 120%;
    border-top-width: 3px;
    padding-top: 5px;
  }
}
.cautionnews ul {
  background: #eee;
  padding: 5px 10px;
  margin: 0;
}
.cautionnews li {
  border-bottom: #666 1px dotted;
}
.cautionnews li::before {
  content: "";
}
.cautionnews li:last-child {
  border: none;
  margin-bottom: 0;
}
.cautionnews a {
  display: block;
  padding: 10px 10px 10px 30px;
  text-decoration: none;
  position: relative;
}
@media only screen and (max-width: 767px) {
  .cautionnews a {
    font-size: 94%;
    padding: 5px 5px 5px 35px;
    line-height: 1.5;
  }
}
.cautionnews a::before, .cautionnews a::after {
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-55%);
      -ms-transform: translateY(-55%);
          transform: translateY(-55%);
}
.cautionnews a::before {
  left: 6px;
  font-size: 90%;
  width: 18px;
  height: 18px;
  text-align: center;
  border-radius: 6px;
  background: #E50150;
  color: #fff;
  -webkit-transform: translateY(-55%);
      -ms-transform: translateY(-55%);
          transform: translateY(-55%);
}
.cautionnews a::after {
  left: 12px;
  width: 0;
  height: 0;
  border: transparent 5px solid;
  border-right: none;
  border-left-color: #fff;
  border-left-width: 9px;
  -webkit-transform: translateY(-55%);
      -ms-transform: translateY(-55%);
          transform: translateY(-55%);
}

.p-indexnav__wrap {
  border-top: #2554B0 1px solid;
  display: none;
}
@media only screen and (max-width: 979px) {
  .p-indexnav__wrap {
    display: block;
  }
}
.p-indexnav__list {
  width: 100%;
  max-width: 980px;
  margin-inline: auto;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[5];
  grid-template-columns: repeat(5, 1fr);
}
.p-indexnav__link {
  display: block;
  text-align: center;
  padding-block: 10px;
  height: 72px;
  line-height: 130px;
  line-height: calc(144px - 1.8em);
  background-repeat: no-repeat;
  background-position: 50% 15px;
  background-size: 3.5em;
  text-decoration: none;
  font-size: 83.3%;
}
.p-indexnav__link--products {
  background-image: url(../img/gnav/products.png);
}
.p-indexnav__link--mitsumori {
  background-image: url(../img/gnav/mitsumori.png);
}
.p-indexnav__link--support {
  background-image: url(../img/gnav/siryo.png);
}
.p-indexnav__link--event {
  background-image: url(../img/gnav/event.png);
}
.p-indexnav__link--seikyu {
  background-image: url(../img/gnav/seikyu.png);
}
.p-indexnav__link--enjoy {
  background-image: url(../img/gnav/enjoy.png);
}
.p-indexnav__link--mypage {
  background-image: url(../img/gnav/mypage.png);
}

#top .headline {
  text-align: center;
  font-size: 190%;
  padding: 0 0 18px;
  color: #0278c2;
}

#top .whitch {
  padding-top: 22px;
}

#top .whitchbox {
  padding: 0;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[2];
  grid-template-columns: repeat(2, 1fr);
}
@media only screen and (max-width: 768px) {
  #top .whitchbox {
    display: block;
  }
}

#top .whitchbox li {
  list-style: none;
  padding: 0;
  margin: 0;
}
#top .whitchbox li::before {
  content: none;
}

#top .whitch .whitchbox a {
  width: 100%;
  height: 100%;
  overflow: hidden;
  text-decoration: none;
  display: -ms-grid;
  display: grid;
}
#top .whitch .whitchbox a::after {
  content: "";
  display: block;
}
@media only screen and (max-width: 768px) {
  #top .whitch .whitchbox a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

#top .whitch .whitchbox figure {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
  margin: 0;
  max-width: 490px;
  padding: 16px 0;
  grid-area: fig;
}

#top .whitch .whitchbox figcaption {
  text-align: center;
  font-size: 170%;
  line-height: 1.5;
  font-weight: bold;
  margin-bottom: 8px;
  position: relative;
}

#top .whitch .whitchbox figcaption:before,
#top .whitch .whitchbox figcaption:after {
  content: "";
  position: absolute;
  width: 25px;
  height: 8px;
  top: 50%;
  right: 50%;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

#top .whitch .whitchbox li:hover figcaption:before,
#top .whitch .whitchbox li:hover figcaption:after {
  right: 48%;
}

#top .whitch .whitchbox figcaption:before {
  -webkit-transform-origin: top right;
      -ms-transform-origin: top right;
          transform-origin: top right;
  -webkit-transform: translateY(-50%) translateX(7em) translateY(4px) rotate(45deg);
      -ms-transform: translateY(-50%) translateX(7em) translateY(4px) rotate(45deg);
          transform: translateY(-50%) translateX(7em) translateY(4px) rotate(45deg);
}

#top .whitch .whitchbox figcaption:after {
  -webkit-transform-origin: bottom right;
      -ms-transform-origin: bottom right;
          transform-origin: bottom right;
  -webkit-transform: translateY(-50%) translateX(7em) translateY(-4px) rotate(-45deg);
      -ms-transform: translateY(-50%) translateX(7em) translateY(-4px) rotate(-45deg);
          transform: translateY(-50%) translateX(7em) translateY(-4px) rotate(-45deg);
}

#top .whitch .whitchbox img {
  vertical-align: bottom;
}

#top .whitch .whitchbox p {
  -ms-grid-row: 2;
  -ms-grid-column: 2;
  text-align: center;
  font-size: 144%;
  line-height: 1.5;
  font-weight: normal;
  margin-bottom: 8px;
  color: #fff;
  grid-area: text;
}

#top .whitch .products {
  background: #3393d8;
}
#top .whitch .products a {
  -ms-grid-rows: auto auto;
  -ms-grid-columns: 1fr min(470px, 100%);
      grid-template: "after fig" "after text" auto/1fr min(470px, 100%);
}

#top .whitch .lifeevent {
  background: #ffae00;
}
#top .whitch .lifeevent a {
  -ms-grid-rows: auto auto;
  -ms-grid-columns: min(470px, 100%) 1fr;
      grid-template: "fig after" "text after" auto/min(470px, 100%) 1fr;
}

#top .whitch .before figure {
  float: right;
}

#top .whitch .after figure {
  float: left;
}

#top .whitch .products figcaption,
#top .whitch .lifeevent figcaption {
  color: #fff;
}

#top .whitch .products figcaption:before,
#top .whitch .products figcaption:after,
#top .whitch .lifeevent figcaption:before,
#top .whitch .lifeevent figcaption:after {
  background: #1f3b82;
  background: #fff;
}

@media print {
  #top .whitchbox {
    display: block;
    overflow: hidden;
  }
  #top .whitchbox > * {
    width: 50% !important;
  }
}
#top #main div.news,
section.news {
  padding: 14px 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-top: #0186D1 5px solid;
  position: relative;
}

div.news,
div.newsbox,
section.news,
section.newsbox {
  max-width: 940px;
}

@media print {
  div.news,
  #main div.newsbox,
  section.news,
  #main section.newsbox {
    max-width: 100%;
    display: block;
    overflow: hidden;
  }
  #main div.newsbox > *,
  #main section.newsbox > * {
    width: 48% !important;
  }
}
#top #main section.news div.dyn-load-container {
  border-top: none;
  padding: 0;
}

section.news h3 {
  background: none;
  border: none;
  padding: 0;
  color: #0186D1;
  font-size: 150%;
  font-weight: bold;
  padding: 0 5px;
  text-align: left;
  margin-bottom: 9px;
}

div.news h3:before,
section.news h3:before {
  content: none;
}

section.news nav {
  position: absolute;
  top: 0;
  right: 0;
}

section.news nav a {
  background: #0186D1;
  padding: 3px 10px;
  color: #fff;
  text-decoration: none;
}

.kumiainews {
  margin-top: 0 !important;
}
.kumiainews dl {
  border-bottom: #ccc 1px dotted;
  overflow: hidden;
  font-size: 90%;
}
.kumiainews dt {
  border-top: #ccc 1px dotted;
  float: left;
  width: 140px;
  padding: 5px 0 5px 15px;
  line-height: 1.8;
  font-weight: bold;
}
.kumiainews dd {
  border-top: #ccc 1px dotted;
  line-height: 1.8;
  padding: 5px 0;
  margin-left: 160px;
}

.updatenews dl {
  border-bottom: #ccc 1px dotted;
  overflow: auto;
  font-size: 90%;
}

#top .updatenews dl {
  height: 12em;
}

.updatenews dt {
  border-top: #ccc 1px dotted;
  padding: 5px 15px 0;
  line-height: 1.8;
  color: #0186D1;
}

.updatenews dt span:before {
  display: block;
  font-size: 75%;
  margin-left: 1em;
  line-height: 2em;
  width: 6em;
  text-align: center;
  border-radius: 5px;
  color: #fff;
  display: inline-block;
}

.updatenews dt span.update:before {
  content: "更新";
  background: #0306CF;
}

.updatenews dt span.topic:before {
  content: "トピックス";
  background: #24A4A5;
}

.updatenews dt span.disaster:before {
  content: "災害";
  background: #d91313;
}

.updatenews dt span.new:before {
  content: "NEW";
  background: #E3630A;
}

.updatenews dd {
  padding: 0 15px 5px;
  line-height: 1.5;
  /*			font-size: 90%;*/
  float: none;
}

.eventnews ul {
  border-bottom: #ccc 1px dotted;
  font-size: 90%;
}

#top .eventnews ul {
  overflow: auto;
  height: 12em;
}

.eventnews li {
  border-top: #ccc 1px dotted;
  line-height: 1.5;
  font-size: 90%;
  padding: 10px 15px 10px 80px;
  position: relative;
}

.eventnews li span {
  position: absolute;
  top: 10px;
  left: 5px;
  width: 70px;
  text-align: center;
  color: #fff;
  background: #0306CF;
}

.eventnews li:before {
  content: none;
}

.eventnews li span.new {
  background: #E3630A;
  position: static;
  font-size: 83.3%;
  margin-left: 1em;
  line-height: 2em;
  width: 6em;
  text-align: center;
  border-radius: 5px;
  color: #fff;
  display: inline-block;
}

.eventnews li span.new:before {
  content: "NEW";
}

@media only screen and (max-width: 767px) {
  #top .news {
    padding: 5px 0;
    border-top-width: 3px;
  }
  #top .news,
  #top .newsbox {
    max-width: 940px;
  }
  #top .news h3 {
    font-size: 120%;
    padding: 0 5px;
  }
  #top .news nav a {
    font-size: 83.3%;
  }
  .kumiainews dl {
    border-bottom: #ccc 1px dotted;
    overflow: hidden;
    font-size: 100%;
  }
  .kumiainews dt {
    float: none;
    width: 100%;
    padding: 5px 5px 0;
    font-size: 94%;
    line-height: 1.5;
  }
  .kumiainews dd {
    border-top: none;
    line-height: 1.5;
    padding: 5px;
    margin: 0 0 9px;
    font-size: 94%;
  }
  #top .updatenews dl {
    border-bottom: #ccc 1px dotted;
    overflow: auto;
    height: 12em;
    font-size: 90%;
  }
  #top .updatenews dt {
    border-top: #ccc 1px dotted;
    padding: 5px 15px 0;
    line-height: 1.8;
    color: #0186D1;
  }
  #top .updatenews dt:after {
    font-size: 75%;
    margin-left: 1em;
    line-height: 2em;
    width: 6em;
    text-align: center;
    border-radius: 5px;
    color: #fff;
    display: inline-block;
  }
  #top .updatenews dt.newsentry:after {
    content: "NEWS";
    background: #E3630A;
  }
  #top .updatenews dt.topics:after {
    content: "トピックス";
    background: #24A4A5;
  }
  #top .updatenews dd {
    padding: 0 15px 5px;
    line-height: 1.5;
    font-size: 90%;
    float: none;
  }
  .eventnews ul {
    border-bottom: #ccc 1px dotted;
    font-size: 90%;
  }
  #top .eventnews ul {
    overflow: auto;
    height: 12em;
  }
  .eventnews li {
    border-top: #ccc 1px dotted;
    line-height: 1.5;
    font-size: 90%;
    padding: 10px 15px 10px 80px;
    position: relative;
  }
  .eventnews li span {
    position: absolute;
    top: 10px;
    left: 5px;
    width: 70px;
    text-align: center;
    color: #fff;
    background: #0306CF;
  }
}
#top #main article .unit.seikyu,
#top #main article .unit.voice {
  background: #D5EFFE;
  padding: 25px 0;
}

@media only screen and (max-width: 400px) {
  #top #main article .unit.toppage.kanyu {
    padding: 0;
  }
}

#top #main article .unit.toppage.kento {
  background: #D5EFFE;
  padding: 25px 0;
}
@media only screen and (max-width: 400px) {
  #top #main article .unit.toppage.kento {
    padding: 0 0 25px;
    margin: 0;
  }
  #top #main article .unit.toppage.kento + .unit {
    margin-top: 0;
  }
}

.voice .fixwidth,
#top .seikyu .fixwidth {
  max-width: 940px;
}

#top #main .seikyu h3 {
  text-align: center;
  font-size: 180%;
  color: #1d7ec2;
  margin-bottom: 18px;
}

#top #main .seikyu ul {
  padding: 0;
  display: -ms-grid;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
}

#main .seikyu li {
  margin-bottom: 0;
}

#main .seikyu li:before {
  content: none;
}

#top #main .seikyu a {
  display: block;
  color: #fff;
  background: #0186D1;
  text-decoration: none;
  font-size: 140%;
  font-weight: bold;
  line-height: 1;
  border: #0186D1 2px solid;
  border-radius: 10px;
  padding: 1em 1em 1em 2.5em;
  position: relative;
}
#top #main .seikyu a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 1em;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  border: 0.5em solid transparent;
  border-right: none;
  border-left: 1em solid #fff;
}

#main .seikyu img {
  max-width: 100%;
  width: auto;
  vertical-align: bottom;
}

.voice ul.flexbasic {
  padding: 0;
  margin-bottom: 0;
}

.voice .flexbasic li {
  background: #fff;
  border: #999 1px solid;
  padding: 10px 25px 10px;
}

.voice .flexbasic li:before {
  content: none;
}

.voice .name {
  background-position: 50% 0;
  background-repeat: no-repeat;
  padding-top: 80px;
  text-align: center;
  font-weight: bold;
  font-size: 110%;
}

.voice .woman {
  background-image: url(../../topContents/top_voice_woman.png);
}

.voice .man {
  background-image: url(../../topContents/top_voice_man.png);
}

.voice .user {
  background-image: url(../../topContents/top_voice_user.png);
}

.voice .memo {
  background-image: url(../../topContents/top_voice_icon.png);
}

.voice .text {
  line-height: 1.8;
  height: 5.4em;
  overflow: hidden;
}

#voice .voice .text {
  height: auto;
}

#voice .voice .more {
  display: none;
}

@media only screen and (max-width: 784px) {
  .voice .flexbasic li li {
    padding: 10px;
  }
  .voice li:before {
    content: none;
  }
  .voice .name {
    font-size: 94%;
    width: 12em;
    float: left;
    margin: 0 10px 0 0;
  }
  .voice .text {
    height: 5.08em;
  }
}
@media only screen and (max-width: 500px) {
  .voice .flexbasic li {
    padding: 5px 10px;
  }
  .voice li:before {
    content: none;
  }
  .voice .name {
    background: none;
    padding-top: 0;
    margin-right: 0;
    margin-bottom: 9px;
    float: none;
    width: 100%;
    text-align: left;
    font-weight: bold;
  }
  .voice .text {
    font-size: 83.3%;
    margin-bottom: 9px;
  }
  .voice .more a {
    font-size: 83.3%;
  }
}
#main .guidebook nav ul {
  padding: 17px 17px 0;
  margin-bottom: 0;
}

#main .guidebook figure img {
  width: 100%;
  max-width: auto;
  margin-bottom: 19px;
}

#main .guidebook figcaption {
  font-size: 100%;
}

#main .guidebook figcaption span {
  font-size: 115%;
  display: block;
  margin-bottom: 10px;
  text-align: center;
  color: #fff;
  font-weight: bold;
  height: 30px;
  line-height: 30px;
  background: #2d3191;
}

@media only screen and (max-width: 784px) {
  #main .guidebook nav ul {
    padding: 0;
  }
  #main .guidebook figure img {
    margin-bottom: 1em;
  }
  #main .guidebook figcaption {
    font-size: 100%;
  }
  #main .guidebook figcaption:before {
    max-width: 100px;
    height: 20px;
    line-height: 20px;
    margin-bottom: 5px;
  }
}
@media only screen and (max-width: 399px) {
  #main .guidebook figcaption {
    font-size: 94%;
  }
  #main .guidebook figcaption:before {
    font-size: 83.3%;
    max-width: 70px;
    height: 18px;
    line-height: 18px;
  }
}
.contact.fixwidth {
  max-width: 940px;
  margin-top: 1em !important;
}

.contact ul {
  padding: 0;
  display: -ms-grid;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
}

.contact li {
  display: block;
  background: #F9EFC0;
  border-radius: 10px;
  padding: 1em;
  text-align: center;
}

.contact li:before {
  content: none;
}

.contact img {
  max-width: 100%;
  width: auto;
  vertical-align: bottom;
}
@media only screen and (max-width: 509px) {
  .contact img {
    max-height: 80px;
  }
}

.contact a {
  font-weight: inherit;
  color: inherit;
  text-decoration: none;
}

.p-topnav__wrap {
  display: -ms-grid;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}
.p-topnav__link {
  display: block;
  border-radius: 10px;
  padding: min(30px, 5vw);
  position: relative;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  opacity: 1;
  text-decoration: none;
  color: #fff;
}
.p-topnav__link--mypage {
  background: #e99412;
}
.p-topnav__link--petition {
  background: #00a0e9;
}
.p-topnav__link:hover {
  opacity: 0.5;
}
.p-topnav__title {
  color: #fff;
  font-weight: bold;
  font-size: 144%;
  -webkit-padding-before: 1em;
          padding-block-start: 1em;
  -webkit-padding-start: min(3em, 15vw);
          padding-inline-start: min(3em, 15vw);
  -webkit-margin-after: 0.5em;
          margin-block-end: 0.5em;
  background-size: min(3em, 15vw);
  background-position: 0% 50%;
  background-repeat: no-repeat;
}
.p-topnav__title--mypage {
  background-image: url(../../topContents/top_user.svg);
}
.p-topnav__title--petition {
  background-image: url(../../topContents/top_henko.svg);
}
.p-topnav__text {
  color: #fff;
  font-size: 120%;
  -webkit-margin-after: 0;
          margin-block-end: 0;
}

.petition section {
  background: #d5effe url(../../topContents/top_henko.svg) 100% 50% no-repeat;
  background-position: calc(100% - 60px) 50%;
  background-size: 250px auto;
  border-radius: 10px;
  padding: 30px;
  position: relative;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  opacity: 1;
}

.petition section:hover {
  opacity: 0.5;
}

.petition section h3 {
  color: #016bb7;
  font-size: 220%;
  margin-bottom: 18px;
}

.petition section ul {
  padding: 0;
  margin-bottom: 0;
  width: calc(100% - 320px);
}

.petition section li {
  color: #016bb7;
  background: #fff;
  padding: 5px 5px 5px 2em;
  border-radius: 2em;
  font-weight: bold;
}

#main .petition section li:before {
  left: 0.5em;
  content: "●";
}

.petition section .more a {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: left;
  text-indent: -9999px;
}

.petition section .more a:before,
.petition section .more a:after {
  content: none;
}

@media only screen and (max-width: 767px) {
  .petition section {
    background-position: calc(100% - 60px) 20px;
    background-size: auto 65px;
  }
  .petition section h3 {
    font-size: 180%;
  }
  .petition section ul {
    width: 100%;
  }
}
@media only screen and (max-width: 600px) {
  .petition section {
    background-position: calc(100% - 10px) 5px;
    background-size: auto 45px;
    padding: 15px;
  }
  .petition section h3 {
    font-size: 120%;
  }
}
#main article .unit.fullsizenav {
  margin-bottom: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1px;
}
#main article .unit.fullsizenav > * {
  margin: 0;
}

#main article .unit.fullsizenav .fixwidth {
  min-height: 282px;
  margin-inline: auto;
  padding: 80px 400px 0 23px;
}

#main article .unit.tebiki,
#main article .unit.online,
#main article .unit.episode {
  padding-block: 0;
}

#main article .unit.tebiki {
  background: #2d916d !important;
}

#main article .unit.tebiki .fixwidth {
  background: #2d916d url(../img/bg_bottom_tebiki.png) 100% no-repeat;
}

#main article .unit.online {
  background: #016BB7 !important;
}

#main article .unit.online .fixwidth {
  background: #016BB7 url(../img/bg_bottom_enjoy.png) 100% 0 no-repeat;
}

#main article .unit.episode .fixwidth {
  background: #15bad0 url(../img/bg_bottom_episode.png) 100% 0 no-repeat;
}

#main article .unit.episode {
  background: #15bad0 !important;
}

#main article .unit.fullsizenav h3 {
  margin-bottom: 18px;
  text-align: center;
}

#main article .unit.fullsizenav p.text {
  color: #fff;
  font-size: 120%;
  line-height: 1.2;
  text-shadow: 0 1px 1px #2d916d;
}

#main article .unit.fullsizenav img {
  vertical-align: bottom;
  max-width: 100%;
  width: auto;
}

#main article .unit.fullsizenav a {
  color: #fff;
  border-color: #fff;
  width: 50%;
}

#main article .unit.fullsizenav a:before,
#main article .unit.fullsizenav a:after {
  background: #fff;
}

@media only screen and (max-width: 784px) {
  #main article .unit.fullsizenav .fixwidth {
    background-position: 50% 100%;
    background-size: auto 200px;
    min-height: 282px;
    padding: 30px 20px;
    text-align: center;
    position: relative;
  }
  #main article .unit.fullsizenav h3 {
    margin-bottom: 5px;
  }
  #main article .unit.fullsizenav p.text {
    font-size: 100%;
  }
  #main article .unit.fullsizenav img {
    width: auto;
  }
  #main article .unit.fullsizenav a {
    position: absolute;
    bottom: 30px;
    left: 50%;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
  }
  #main article .unit.online a {
    background: rgba(1, 107, 183, 0.8);
  }
  #main article .unit.tebiki a {
    background: rgba(45, 145, 109, 0.8);
  }
  #main article .unit.episode a {
    background: rgba(21, 186, 208, 0.8);
  }
}
.toppage,
.mitsusiryo {
  max-width: 940px;
  margin-bottom: 36px;
}
.toppage ul,
.mitsusiryo ul {
  padding: 0;
}
.toppage li:before,
.mitsusiryo li:before {
  content: none;
}
.toppage li:first-child:last-child,
.mitsusiryo li:first-child:last-child {
  padding: 2rem 0 0;
}
.toppage li:first-child:last-child a,
.mitsusiryo li:first-child:last-child a {
  min-width: -webkit-fit-content;
  min-width: -moz-fit-content;
  min-width: fit-content;
  max-width: 50%;
  margin-left: auto;
  margin-right: auto;
}
.toppage a,
.mitsusiryo a {
  display: block;
  height: 100px;
  line-height: 100px;
  padding-left: 80px;
  border-radius: 10px;
  text-align: center;
  color: #fff;
  font-size: 180%;
  text-decoration: none;
  background-repeat: no-repeat;
  background-position: 30px 50%;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.8em;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: #36ACDA;
}
.toppage a:hover,
.mitsusiryo a:hover {
  opacity: 0.6;
}
.toppage .kakekin a,
.mitsusiryo .kakekin a {
  background-color: #36A988;
  background-image: url(../../topContents/footer_mitsumori.png);
}
.toppage .siryo a,
.mitsusiryo .siryo a {
  background-color: #9FC94B;
  background-image: url(../../topContents/footer_siryo.png);
}

.toppage {
  max-width: 100%;
  padding: 25px 0;
}
.toppage .headline {
  font-size: clamp(14px, 4vw, 144%) !important;
  font-weight: bold;
}
.toppage p {
  font-size: 120%;
}
.toppage ul {
  max-width: 940px;
  margin-inline: auto;
}
.toppage a {
  text-align: center;
  gap: 0.6em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 1em 80px;
  border-radius: 10px;
  text-align: center;
  color: #fff;
  font-size: 180%;
  text-decoration: none;
  background-repeat: no-repeat;
  background-position: 30px 50%;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  position: relative;
  text-align: center;
}
.toppage a strong {
  font-size: calc(1.3rem + (1vw - 0.32rem) * 1.3636363636);
  font-weight: normal;
  line-height: 1.2;
  display: block;
}
.toppage a span {
  font-size: 1.2rem;
  color: #fff;
  line-height: 1.2;
  display: block;
}
@media only screen and (max-width: 400px) {
  .toppage a span {
    font-size: 0.8rem;
  }
}
.toppage .kanyu a {
  background-color: #36ACDA;
}
.toppage .kento a {
  background-color: #2554B0;
}

@media only screen and (min-width: 981px) {
  .toppage .kanyu a,
  .toppage .kento a {
    padding: 0.4em 2em;
    height: auto;
    min-height: 2em;
    font-size: 2.2rem;
  }
}
.toppage .arrow a,
.mitsusiryo .arrow a {
  padding-inline: 2em;
}
.toppage .arrow a:before, .toppage .arrow a:after,
.mitsusiryo .arrow a:before,
.mitsusiryo .arrow a:after {
  content: "";
  position: absolute;
  top: 50%;
  opacity: 1;
  width: 0.2em;
  height: 0.8em;
  background: #fff;
  z-index: 100;
  right: 0.6em;
}
.toppage .arrow a:before,
.mitsusiryo .arrow a:before {
  -webkit-transform: translateY(0) rotate(45deg);
      -ms-transform: translateY(0) rotate(45deg);
          transform: translateY(0) rotate(45deg);
  -webkit-transform-origin: top right;
      -ms-transform-origin: top right;
          transform-origin: top right;
}
.toppage .arrow a:after,
.mitsusiryo .arrow a:after {
  -webkit-transform: translateY(-100%) rotate(-45deg);
      -ms-transform: translateY(-100%) rotate(-45deg);
          transform: translateY(-100%) rotate(-45deg);
  -webkit-transform-origin: bottom right;
      -ms-transform-origin: bottom right;
          transform-origin: bottom right;
}

@media only screen and (max-width: 767px) {
  .toppage a,
  .mitsusiryo a {
    height: 80px;
    line-height: 80px;
    padding-left: 50px;
    border-radius: 10px;
    font-size: 120%;
    background-position: 10px 50%;
    background-size: 50px;
  }
}
@media only screen and (max-width: 399px) {
  .toppage a,
  .mitsusiryo a {
    height: 50px;
    line-height: 50px;
    padding-left: 40px;
    font-size: 100%;
    text-align: left;
    background-position: 10px 50%;
    background-size: 25px;
  }
  .mitsusiryo a {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: start;
  }
}
#main .visualTitle {
  min-height: 360px;
  background-repeat: no-repeat;
  background-position: 100% 100%;
  padding-bottom: 0 !important;
}

#main .visualTitle .bd_box {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  max-width: calc(100% - 350px);
  font-size: 94%;
  color: #000;
  font-weight: normal;
  padding: 0.8rem;
}
@media only screen and (max-width: 768px) {
  #main .visualTitle .bd_box {
    display: none;
  }
}

#main .fixwidth .bd_box.sp {
  display: none;
  padding: 0.8rem;
}
@media only screen and (max-width: 768px) {
  #main .fixwidth .bd_box.sp {
    display: block;
  }
}

#main .bd_box {
  border: 1px solid #000;
  padding: 1.6rem;
  font-size: 94%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.vehicle #main .visualTitle {
  min-height: 0;
}

#main .visualTitle p,
#main .visualTitle .linklist,
#main .visualTitle figure {
  width: calc(100% - 350px);
  text-align: left;
}

#main .visualTitle .linklist {
  padding-left: 0;
}

#main article .visualTitle figure img[src$=".svg"] {
  width: 150px;
  max-width: 400px;
  max-height: 60px;
  height: 60px;
}

#index #main .visualTitle figure img {
  width: 150px;
  max-width: 400px;
  max-height: 200px;
  height: auto;
}

body#index.vehicle #main article .visualTitle figure img[src$=".svg"] {
  width: 112.5px;
  max-width: 300px;
  max-height: 150px;
}

#main.accent article .visualTitle h3,
#main.standard article .visualTitle h3 {
  font-size: 400%;
  font-weight: bold;
  margin-top: 10px;
  line-height: 1;
  color: #1D7EC2;
  margin-bottom: 18px;
  display: inline-block;
  position: relative;
}

#main .visualTitle p {
  color: #999;
  margin-top: 10px;
  font-size: 120%;
  font-weight: bold;
}

#main .visualTitle p span {
  color: inherit;
  font-weight: inherit;
}

#main .visualTitle .caution {
  border: red 1px solid;
  padding: 0.5em;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
}

#main .visualTitle .caution p,
#main .visualTitle .caution a {
  color: red;
  font-weight: normal;
  font-size: 94%;
  line-height: 1.3;
  margin: 0;
  width: 100%;
}

.car #main .visualTitle {
  background-image: url(../../products/car/img/bg.png);
}

.general #main .visualTitle {
  background-image: url(../../products/general/img/bg.png);
  background-size: auto 280px;
}

.fire #main .visualTitle {
  background-image: url(../../products/fire/img/bg.png);
}

.triple #main .visualTitle {
  background-image: url(../../products/triple/img/bg.png);
}

.traffic #main .visualTitle {
  background-image: url(../../products/traffic/img/bg.png);
}

.life #main .visualTitle {
  background-image: url(../../products/life/img/bg.png);
}

.pension #main .visualTitle {
  background-image: url(../../products/pension/img/bg.png);
}

@media only screen and (max-width: 979px) {
  #main .visualTitle {
    min-height: 175px;
    background-size: 150px auto;
  }
  #main .fixwidth .bd_box.sp {
    padding: 0.5em;
    font-size: 83.3%;
    line-height: 1.3;
  }
  body.life #main .visualTitle {
    min-height: 175px;
    background-size: auto 175px;
  }
  #main .visualTitle figure {
    max-width: 200px;
    width: calc(100% - 160px);
    margin-bottom: 9px;
  }
  #index #main .visualTitle figure {
    max-width: 400px;
  }
  #main article .visualTitle figure img[src$=".svg"] {
    width: 150px;
    max-width: 100%;
    max-height: 100%;
    height: auto;
  }
  #index #main .visualTitle figure img {
    width: 150px;
    max-width: 100%;
    max-height: 100%;
    height: auto;
  }
  #main.accent article .visualTitle h3,
  #main.standard article .visualTitle h3 {
    font-size: 250%;
    font-weight: bold;
    margin-bottom: 0;
    line-height: 1;
  }
  #main .visualTitle .supportList,
  #index #main .visualTitle figure #main .visualTitle .caution {
    width: calc(100% - 160px);
  }
  #main .visualTitle .caution {
    max-width: calc(100% - 160px);
  }
  #main .visualTitle p,
  #main .visualTitle .linklist {
    font-size: 100%;
    width: calc(100% - 160px);
  }
  .general #main .visualTitle {
    background-size: auto 150px;
  }
  .general #main .visualTitle figure,
  .general#index #main .visualTitle figure,
  .general#index #main .visualTitle p,
  .general #main .visualTitle .supportList {
    width: calc(100% - 280px);
  }
  .car #main .visualTitle figure,
  .car#index #main .visualTitle figure,
  .car#index #main .visualTitle p,
  .car #main .visualTitle .supportList {
    width: calc(100% - 160px);
  }
}
@media only screen and (max-width: 639px) {
  .general #main .visualTitle {
    background-size: auto 100px;
  }
  .general #main .visualTitle figure,
  .general#index #main .visualTitle figure,
  .general#index #main .visualTitle p,
  .general #main .visualTitle .supportList {
    width: calc(100% - 200px);
  }
}
@media only screen and (max-width: 399px) {
  #main .visualTitle {
    min-height: 110px;
    background-size: 100px auto;
  }
  body.life #main .visualTitle {
    min-height: 110px;
    background-size: auto 110px;
  }
  #main .visualTitle figure {
    width: calc(100% - 110px);
  }
  #main.accent article .visualTitle h3,
  #main.standard article .visualTitle h3 {
    font-size: 180%;
    font-weight: bold;
  }
  #index #main .visualTitle figure {
    width: calc(100% - 110px);
  }
  #main .visualTitle p {
    font-size: 100%;
    width: calc(100% - 110px);
    line-height: 1.5;
  }
  .general #main .visualTitle {
    background-size: contain;
    padding-bottom: 50% !important;
  }
  .general #main .visualTitle figure,
  .general#index #main .visualTitle figure,
  .general #main .visualTitle h3,
  .general #main .visualTitle p,
  .general#index #main .visualTitle p,
  .general #main .visualTitle .supportList {
    width: 100%;
  }
  .car #main .visualTitle figure,
  .car#index #main .visualTitle figure,
  .car#index #main .visualTitle p,
  .car #main .visualTitle .supportList {
    width: calc(100% - 100px);
  }
  #main .visualTitle .caution {
    max-width: calc(100% - 100px);
  }
}
.general #main .supportList {
  counter-reset: counter;
}

.general #main .supportList li {
  list-style: none;
}

.general #main .supportList figure {
  margin: 0 auto;
  position: relative;
  max-width: 110px;
}

.general #main .supportList figure:before {
  counter-increment: counter;
  content: counter(counter);
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50px) translateX(-1.5em) translateY(-1em);
      -ms-transform: translateX(-50px) translateX(-1.5em) translateY(-1em);
          transform: translateX(-50px) translateX(-1.5em) translateY(-1em);
  background: #004098;
  border-radius: 2em;
  border: #fff 2px solid;
  color: #fff;
  line-height: 1;
  width: 2em;
  text-align: center;
  padding: 0.5em 0;
}

.ua-safari .general #main .supportList figure:before,
.no-flexbox #main .supportList figure:before {
  -webkit-transform: translateX(-50px) translateX(-1.5em);
      -ms-transform: translateX(-50px) translateX(-1.5em);
          transform: translateX(-50px) translateX(-1.5em);
}

.general #main .supportList a {
  display: block;
  text-decoration: none;
}

.general #main .supportList img {
  margin-bottom: 3px;
}

.general #main .supportList figcaption {
  text-align: center;
  font-size: 130%;
  line-height: 1.2;
}

.general #main .supportList span {
  font-size: 66%;
}

@media only screen and (max-width: 399px) {
  .general #main .supportList {
    overflow: visible;
  }
  .general #main .supportList figure {
    max-width: 80px;
  }
  .general #main .supportList figure:before {
    -webkit-transform: translateX(-40px) translateX(-1.5em) translateY(-1em);
        -ms-transform: translateX(-40px) translateX(-1.5em) translateY(-1em);
            transform: translateX(-40px) translateX(-1.5em) translateY(-1em);
  }
  .general #main .supportList figcaption {
    font-size: 100%;
  }
  .general #main .supportList span {
    font-size: 75%;
  }
}
.general #main .point {
  padding: 0;
  counter-reset: pointnumber;
}

.general #main .point > li {
  list-style: none;
  position: relative;
  padding: 10px 10px 10px 60px;
}

.general #main .point > li:before,
.general #main .point > li:after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  color: #fff;
  width: 50px;
}

.general #main .point > li:before {
  content: "POINT";
  bottom: 50%;
  z-index: 2;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  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-transform: rotate(-15deg);
      -ms-transform: rotate(-15deg);
          transform: rotate(-15deg);
  font-size: 110%;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

.general #main .point > li:after {
  counter-increment: pointnumber;
  content: counter(pointnumber);
  background: #1d7ec2;
  border-radius: 5px;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  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;
  font-size: 150%;
  z-index: 1;
}

.general #main .point > li:hover:before {
  -webkit-transform: rotate(-20deg);
      -ms-transform: rotate(-20deg);
          transform: rotate(-20deg);
  font-size: 120%;
}

.general #main .point strong {
  color: #1d7ec2;
}

.general #main .point span {
  font-size: 75%;
}

.general #main .point ul {
  margin-bottom: 0;
}

#main .imageNav ul {
  padding: 30px 0;
}

#main .imageNav li {
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

#main .imageNav li:before {
  content: none;
}

#main .imageNav li a figure:hover {
  opacity: 0.4;
}

#main .imageNav li > a {
  text-decoration: none;
}

#main .imageNav li > a.onlypc {
  display: block;
}

#main .imageNav li > a.moble {
  display: none;
}

#main .imageNav figure {
  margin: 0;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

#main .imageNav img {
  border: #333 1px solid;
  vertical-align: bottom;
}

#main .imageNav figcaption {
  text-align: center;
  font-size: 120%;
  display: inline-block;
  position: relative;
}

#main .imageNav a figcaption:before,
#main .imageNav a figcaption:after {
  content: "";
  position: absolute;
  right: -15px;
  top: 45%;
  width: 2px;
  height: 0.5em;
  background: #333;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

#main .imageNav figcaption:before {
  -webkit-transform-origin: top right;
      -ms-transform-origin: top right;
          transform-origin: top right;
  -webkit-transform: skewX(40deg) translateY(-95%);
      -ms-transform: skewX(40deg) translateY(-95%);
          transform: skewX(40deg) translateY(-95%);
}

#main .imageNav figcaption:after {
  -webkit-transform-origin: top right;
      -ms-transform-origin: top right;
          transform-origin: top right;
  -webkit-transform: skewX(-40deg) translateY(0%);
      -ms-transform: skewX(-40deg) translateY(0%);
          transform: skewX(-40deg) translateY(0%);
}

#main .imageNav li:hover figcaption:before,
#main .imageNav li:hover figcaption:after {
  right: -20px;
  width: 4px;
}

#main .imageNav li:hover figcaption:before {
  -webkit-transform: skewX(45deg) translateY(-95%);
      -ms-transform: skewX(45deg) translateY(-95%);
          transform: skewX(45deg) translateY(-95%);
}

#main .imageNav li:hover figcaption:after {
  -webkit-transform: skewX(-45deg) translateY(0%);
      -ms-transform: skewX(-45deg) translateY(0%);
          transform: skewX(-45deg) translateY(0%);
}

@media only screen and (max-width: 979px) {
  #main .imageNav li > a.onlypc {
    display: none;
  }
  #main .imageNav li > a.moble {
    display: block;
  }
}
@media only screen and (max-width: 767px) {
  #main .imageNav figcaption:before,
  #main .imageNav figcaption:after {
    content: none;
  }
}
.freedial {
  padding: 0;
}

.freedial__item {
  border: #999 1px solid;
  padding: 1.5em;
  text-align: center;
  line-height: 1.5;
  text-align: center;
  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;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.freedial__item > * {
  width: 100%;
}

.freedial__item > *:first-child {
  margin-top: auto;
}

.freedial__item > *:last-child {
  margin-bottom: auto;
}

.freedial__item > *:not(:last-child) {
  margin-bottom: 0.5em;
}

.freedial__item:before {
  content: none;
}

.freedial__item--bg {
  background: #ccc;
  border: none;
}

.freedial__link--arrow {
  position: relative;
}

.freedial__link--arrow:before {
  position: absolute;
  top: 50%;
  -webkit-transform: translateX(-1.2em) translateY(-50%);
      -ms-transform: translateX(-1.2em) translateY(-50%);
          transform: translateX(-1.2em) translateY(-50%);
  content: "";
  border: transparent 5px solid;
  border-left: #fff 10px solid;
  border-right: none;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

.freedial img {
  vertical-align: middle;
}

.freedial span {
  font-size: 94%;
}

.infotable .place {
  width: 18%;
  min-width: 110px;
}

.infotable .zip {
  width: 10%;
  min-width: 110px;
}

.infotable .tel {
  width: 15%;
  min-width: 110px;
}

.infotable.breaking tr {
  border-bottom: #333 1px solid;
  padding: 10px 10px 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin-bottom: 0;
}

.infotable.breaking tr:last-child {
  border-bottom: none;
}

.infotable.breaking .place,
.infotable.breaking .place a {
  font-weight: bold;
  margin-bottom: 0;
  border: none;
}

.infotable.breaking .tel {
  margin-bottom: 9px;
}

.infotable.breaking .tel:before {
  content: "TEL:";
}

.infotable br {
  display: none;
}

dl.normal {
  font-size: 94%;
}

dl.normal dt,
dl.normal dd {
  position: relative;
  padding: 0.5em 0.5em 0.5em 1.5em;
  line-height: 1.8;
}

dl.normal dt {
  border-bottom: #333 1px solid;
}

dl.normal dd {
  margin-bottom: 18px;
}

dl.normal dt:before,
dl.normal dd:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0.75em;
  width: 1px;
  background: #333;
}

dl.table {
  font-size: 94%;
  margin-bottom: 18px;
}

dl.table dt,
dl.table dd {
  border-bottom: #3393d8 1px solid;
  padding: 3px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

dl.table dt {
  width: 33.3%;
  float: left;
}

dl.history {
  border-bottom: #333 1px dotted;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 100px 1fr;
  grid-template-columns: 100px 1fr;
}

dl.history dt,
dl.history dd {
  border-top: #333 1px dotted;
  padding: 10px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

dl.history dd {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1em 180px;
  grid-template-columns: 1fr 180px;
  gap: 1em;
}

dl.history dd ul {
  margin-bottom: 0;
}

dl.history dd li {
  margin-bottom: 0;
}

dl.history dd figure {
  margin: 0 !important;
}

@media only screen and (max-width: 767px) {
  dl.history {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
  dl.history dd {
    border-top: none;
    padding-top: 0;
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    gap: 10px;
  }
  dl.history dd figure {
    width: 100% !important;
    text-align: center;
  }
  dl.history dd img {
    width: 50vw !important;
    max-width: 240px;
  }
}
@media only screen and (max-width: 520px) {
  dl.history {
    padding-top: 0;
  }
  dl.history:before {
    content: none;
  }
  dl.history dd {
    padding-right: 0;
  }
  dl.history dt.minheight,
  dl.history dd.minheight {
    min-height: 0;
  }
}
.takata li {
  border: #666 1px solid;
  border-radius: 5px;
  padding: 10px;
}

#main .takata li figure {
  margin-bottom: 0;
}

#main .takata figcaption {
  text-align: left;
}

#map_area {
  background: transparent url("../img/map.png") no-repeat scroll left top;
  height: 360px;
  margin: 0 auto 18px;
  padding: 0;
  position: relative;
  width: 550px;
}

#main #map_area li:before {
  content: none;
}

#main #map_area a,
#main #map_area span {
  position: absolute;
  height: 35px;
  width: 35px;
  font-size: 9px;
  text-align: center;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-align-items: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: #fff;
  text-decoration: none;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

@media only screen and (max-width: 590px) {
  #map_area {
    width: auto;
    height: auto;
    margin-block: 0;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 6px 1fr 6px 1fr 6px 1fr 6px 1fr;
    grid-template-columns: repeat(5, 1fr);
    background: none;
    gap: 6px;
  }
  #map_area li.HK {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }
  #map_area li.AO {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
  }
  #map_area li.IT {
    -webkit-box-ordinal-group: 5;
        -ms-flex-order: 4;
            order: 4;
  }
  #map_area li.MG {
    -webkit-box-ordinal-group: 7;
        -ms-flex-order: 6;
            order: 6;
  }
  #map_area li.AK {
    -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
            order: 3;
  }
  #map_area li.YG {
    -webkit-box-ordinal-group: 6;
        -ms-flex-order: 5;
            order: 5;
  }
  #map_area li.FS {
    -webkit-box-ordinal-group: 8;
        -ms-flex-order: 7;
            order: 7;
  }
  #map_area li.IB {
    -webkit-box-ordinal-group: 10;
        -ms-flex-order: 9;
            order: 9;
  }
  #map_area li.TC {
    -webkit-box-ordinal-group: 9;
        -ms-flex-order: 8;
            order: 8;
  }
  #map_area li.GU {
    -webkit-box-ordinal-group: 11;
        -ms-flex-order: 10;
            order: 10;
  }
  #map_area li.ST {
    -webkit-box-ordinal-group: 12;
        -ms-flex-order: 11;
            order: 11;
  }
  #map_area li.CB {
    -webkit-box-ordinal-group: 13;
        -ms-flex-order: 12;
            order: 12;
  }
  #map_area li.TY {
    -webkit-box-ordinal-group: 14;
        -ms-flex-order: 13;
            order: 13;
  }
  #map_area li.KN {
    -webkit-box-ordinal-group: 15;
        -ms-flex-order: 14;
            order: 14;
  }
  #map_area li.NI {
    -webkit-box-ordinal-group: 19;
        -ms-flex-order: 18;
            order: 18;
  }
  #map_area li.TM {
    -webkit-box-ordinal-group: 20;
        -ms-flex-order: 19;
            order: 19;
  }
  #map_area li.IS {
    -webkit-box-ordinal-group: 21;
        -ms-flex-order: 20;
            order: 20;
  }
  #map_area li.FI {
    -webkit-box-ordinal-group: 22;
        -ms-flex-order: 21;
            order: 21;
  }
  #map_area li.YN {
    -webkit-box-ordinal-group: 16;
        -ms-flex-order: 15;
            order: 15;
  }
  #map_area li.NA {
    -webkit-box-ordinal-group: 17;
        -ms-flex-order: 16;
            order: 16;
  }
  #map_area li.GI {
    -webkit-box-ordinal-group: 24;
        -ms-flex-order: 23;
            order: 23;
  }
  #map_area li.SZ {
    -webkit-box-ordinal-group: 18;
        -ms-flex-order: 17;
            order: 17;
  }
  #map_area li.AI {
    -webkit-box-ordinal-group: 23;
        -ms-flex-order: 22;
            order: 22;
  }
  #map_area li.ME {
    -webkit-box-ordinal-group: 25;
        -ms-flex-order: 24;
            order: 24;
  }
  #map_area li.SI {
    -webkit-box-ordinal-group: 26;
        -ms-flex-order: 25;
            order: 25;
  }
  #map_area li.KY {
    -webkit-box-ordinal-group: 27;
        -ms-flex-order: 26;
            order: 26;
  }
  #map_area li.OS {
    -webkit-box-ordinal-group: 30;
        -ms-flex-order: 29;
            order: 29;
  }
  #map_area li.HG {
    -webkit-box-ordinal-group: 31;
        -ms-flex-order: 30;
            order: 30;
  }
  #map_area li.NR {
    -webkit-box-ordinal-group: 28;
        -ms-flex-order: 27;
            order: 27;
  }
  #map_area li.WA {
    -webkit-box-ordinal-group: 29;
        -ms-flex-order: 28;
            order: 28;
  }
  #map_area li.TT {
    -webkit-box-ordinal-group: 32;
        -ms-flex-order: 31;
            order: 31;
  }
  #map_area li.SM {
    -webkit-box-ordinal-group: 34;
        -ms-flex-order: 33;
            order: 33;
  }
  #map_area li.OY {
    -webkit-box-ordinal-group: 33;
        -ms-flex-order: 32;
            order: 32;
  }
  #map_area li.HS {
    -webkit-box-ordinal-group: 35;
        -ms-flex-order: 34;
            order: 34;
  }
  #map_area li.YA {
    -webkit-box-ordinal-group: 36;
        -ms-flex-order: 35;
            order: 35;
  }
  #map_area li.TK {
    -webkit-box-ordinal-group: 38;
        -ms-flex-order: 37;
            order: 37;
  }
  #map_area li.KA {
    -webkit-box-ordinal-group: 37;
        -ms-flex-order: 36;
            order: 36;
  }
  #map_area li.EH {
    -webkit-box-ordinal-group: 39;
        -ms-flex-order: 38;
            order: 38;
  }
  #map_area li.KO {
    -webkit-box-ordinal-group: 40;
        -ms-flex-order: 39;
            order: 39;
  }
  #map_area li.FO {
    -webkit-box-ordinal-group: 41;
        -ms-flex-order: 40;
            order: 40;
  }
  #map_area li.SG {
    -webkit-box-ordinal-group: 42;
        -ms-flex-order: 41;
            order: 41;
  }
  #map_area li.NS {
    -webkit-box-ordinal-group: 43;
        -ms-flex-order: 42;
            order: 42;
  }
  #map_area li.KU {
    -webkit-box-ordinal-group: 45;
        -ms-flex-order: 44;
            order: 44;
  }
  #map_area li.OI {
    -webkit-box-ordinal-group: 44;
        -ms-flex-order: 43;
            order: 43;
  }
  #map_area li.MZ {
    -webkit-box-ordinal-group: 46;
        -ms-flex-order: 45;
            order: 45;
  }
  #map_area li.KG {
    -webkit-box-ordinal-group: 47;
        -ms-flex-order: 46;
            order: 46;
  }
  #map_area li.OK {
    -webkit-box-ordinal-group: 48;
        -ms-flex-order: 47;
            order: 47;
  }
  #main #map_area a,
  #main #map_area span {
    position: static;
    height: auto;
    width: auto;
    font-size: 12px;
    padding: 0.5em 0;
  }
}
#main #map_area a {
  background: #1d7ec2;
}

#main #map_area span {
  background: #eee;
  color: #999;
  cursor: default;
}

#main #map_area a:hover {
  background: #00a0e9;
}

#main #map_area a {
  display: none;
}

#main #map_area span {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

#main #map_area .active a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

#main #map_area .active span {
  display: none;
}

.HK a,
.HK span {
  top: 14px;
  left: 501px;
}

.AO a,
.AO span {
  top: 61px;
  left: 501px;
}

.IT a,
.IT span {
  top: 98px;
  left: 501px;
}

.MG a,
.MG span {
  top: 135px;
  left: 501px;
}

.AK a,
.AK span {
  top: 98px;
  left: 464px;
}

.YG a,
.YG span {
  top: 135px;
  left: 464px;
}

.FS a,
.FS span {
  top: 172px;
  left: 501px;
}

.IB a,
.IB span {
  top: 209px;
  left: 501px;
}

.TC a,
.TC span {
  top: 172px;
  left: 464px;
}

.GU a,
.GU span {
  top: 172px;
  left: 427px;
}

.ST a,
.ST span {
  top: 209px;
  left: 464px;
}

.CB a,
.CB span {
  top: 246px;
  left: 501px;
}

.TY a,
.TY span {
  top: 246px;
  left: 464px;
}

.KN a,
.KN span {
  top: 246px;
  left: 427px;
}

.NI a,
.NI span {
  top: 135px;
  left: 427px;
}

.TM a,
.TM span {
  top: 172px;
  left: 390px;
}

.IS a,
.IS span {
  top: 172px;
  left: 353px;
}

.FI a,
.FI span {
  top: 209px;
  left: 316px;
}

.YN a,
.YN span {
  top: 209px;
  left: 427px;
}

.NA a,
.NA span {
  top: 209px;
  left: 390px;
}

.GI a,
.GI span {
  top: 209px;
  left: 353px;
}

.SZ a,
.SZ span {
  top: 246px;
  left: 390px;
}

.AI a,
.AI span {
  top: 246px;
  left: 353px;
}

.ME a,
.ME span {
  top: 246px;
  left: 316px;
}

.SI a,
.SI span {
  top: 209px;
  left: 279px;
}

.KY a,
.KY span {
  top: 172px;
  left: 279px;
}

.OS a,
.OS span {
  top: 209px;
  left: 242px;
}

.HG a,
.HG span {
  top: 172px;
  left: 205px;
}

.NR a,
.NR span {
  top: 246px;
  left: 279px;
}

.WA a,
.WA span {
  top: 246px;
  left: 242px;
}

.TT a,
.TT span {
  top: 172px;
  left: 168px;
}

.SM a,
.SM span {
  top: 172px;
  left: 131px;
}

.OY a,
.OY span {
  top: 209px;
  left: 205px;
}

.HS a,
.HS span {
  top: 209px;
  left: 168px;
}

.YA a,
.YA span {
  top: 209px;
  left: 131px;
}

.TK a,
.TK span {
  top: 297px;
  left: 181px;
}

.KA a,
.KA span {
  top: 260px;
  left: 181px;
}

.EH a,
.EH span {
  top: 260px;
  left: 144px;
}

.KO a,
.KO span {
  top: 297px;
  left: 144px;
}

.FO a,
.FO span {
  top: 174px;
  left: 81px;
}

.SG a,
.SG span {
  top: 174px;
  left: 44px;
}

.NS a,
.NS span {
  top: 174px;
  left: 7px;
}

.KU a,
.KU span {
  top: 211px;
  left: 44px;
}

.OI a,
.OI span {
  top: 211px;
  left: 81px;
}

.MZ a,
.MZ span {
  top: 248px;
  left: 81px;
}

.KG a,
.KG span {
  top: 248px;
  left: 44px;
}

.OK a,
.OK span {
  top: 301px;
  left: 44px;
}

#school_list {
  padding: 0;
}

#main #school_list li:before {
  content: none;
}

#school_list a {
  display: block;
  background: #fff;
  border: #0278C2 1px solid;
  padding: 5px;
  border-radius: 10px;
  text-decoration: none;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

#school_list a:hover {
  background: #36ACDA;
}

.course {
  max-width: 768px;
  margin: 0 auto 18px;
}

.course > div {
  position: relative;
  width: 40%;
}

.ua-safari .course,
.no-flexbox .course {
  overflow: visible;
}

.ua-safari .course > div,
.no-flexbox .course > div {
  float: left;
}

.ua-safari .course > div:nth-child(2n),
.no-flexbox .course > div:nth-child(2n) {
  float: right;
}

.course > div:before {
  content: none;
}

#main .course div .btn span,
#main .course div .btn a {
  width: 40%;
  display: block;
  padding: 0.6em 1em;
  background: #ff972f;
  width: 100%;
  text-align: center;
  border: none;
  color: #fff;
  font-weight: bold;
  font-size: 200%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.triple #main .course div .btn a {
  width: 100%;
  font-size: 120%;
}

#main .course div .btn a:before,
#main .course div .btn a:after {
  background: #fff;
}

.course div.texticon {
  position: relative;
}

.course div.texticon:before {
  content: attr(data-text);
  position: absolute;
  z-index: 100;
  top: 0;
  left: 0;
  width: 6em;
  height: 6em;
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(15deg);
      -ms-transform: translateX(-50%) translateY(-50%) rotate(15deg);
          transform: translateX(-50%) translateY(-50%) rotate(15deg);
  background: #e50150;
  border: #ff972f 3px solid;
  border-radius: 3em;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  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;
  color: #fff;
  font-weight: bold;
  font-size: 120%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.course div strong {
  font-size: 115%;
  background: #ff972f;
  color: #fff;
  padding: 0 3px;
  margin: 0 3px;
}

.course ul li {
  font-size: 120%;
}

@media only screen and (max-width: 767px) {
  .ua-safari .flex.course {
    overflow: visible;
    padding-left: 0;
  }
  .course div {
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  .course div.texticon:before {
    -webkit-transform: translateX(-20%) translateY(-50%) rotate(15deg);
        -ms-transform: translateX(-20%) translateY(-50%) rotate(15deg);
            transform: translateX(-20%) translateY(-50%) rotate(15deg);
    font-size: 100%;
  }
  #main .course div .btn span,
  #main .course div .btn a {
    font-size: 160%;
  }
}
@media only screen and (max-width: 399px) {
  .course div {
    border-width: 2px;
  }
  .course div strong {
    font-size: 105%;
  }
  #main .course div .btn span,
  #main .course div .btn a {
    padding: 0.3em 1em;
  }
}
.hosholist li {
  text-align: center;
  border-radius: 10px;
  padding: 5px 15px;
  color: #fff;
  display: block;
  text-decoration: none;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  border: #117EC1 2px solid;
  background: #fff;
  color: #117EC1;
}

.hosholist li a {
  text-decoration: none;
  color: inherit;
  font-size: 94%;
}

.hosholist a:hover {
  opacity: 0.6;
}

.hosholist li span {
  font-size: 75%;
  color: inherit;
}

#main .unit .hosholist li a img {
  width: 100%;
  min-width: 0;
  max-width: 120px;
  height: auto;
}

#main .hosholist figure {
  margin: 0;
}

#main .hosholist figcaption {
  color: inherit;
  font-size: 120%;
  text-align: center;
}

.hosholist.red li a {
  background: #e63c3c;
}

.hosholist.orange li a {
  background: #F39801;
}

@media only screen and (max-width: 767px) {
  #main .hosholist figcaption {
    font-size: 100%;
  }
  .hosholist li a img {
    max-width: 70px;
  }
}
@media only screen and (max-width: 399px) {
  .hosholist li {
    padding: 5px 5px;
  }
  .hosholist li a img {
    max-width: 50px;
  }
}
.tebikilist {
  padding: 28px 0 18px;
}

.tebikilist li {
  text-align: center;
  height: 4em;
  position: relative;
}

.tebikilist a {
  border-radius: 10px;
  color: #fff;
  background: #0278c2;
  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;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  text-decoration: none;
  line-height: 1.3;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

.tebikilist a:hover {
  opacity: 0.6;
}

.tebikilist i {
  color: #fff;
  font-size: 110%;
  margin-left: 0.5em;
}

@media only screen and (max-width: 399px) {
  .tebikilist a {
    font-size: 94%;
  }
}
.example_table thead th {
  width: 10%;
}

.example_table tbody th {
  min-width: 20%;
  white-space: nowrap;
}

.example_table tbody .nocount {
  background: #ddd;
}

@media only screen and (max-width: 767px) {
  .example_table tbody th {
    min-width: 0;
    white-space: normal;
  }
  .example_table tbody th[nowrap] {
    white-space: nowrap;
  }
}
.joseikin_table tbody th {
  white-space: nowrap;
}
@media only screen and (max-width: 767px) {
  .joseikin_table tbody th {
    white-space: unset;
    width: 40%;
  }
}

.toukyu div table tbody th,
.toukyu div table tbody td {
  text-align: center;
}

.toukyu table tbody td.premium,
.toukyu table tbody td.discount {
  width: 1em;
  font-size: 150%;
}

.toukyu table tbody td.premium {
  background: #FACD89;
}

.toukyu table tbody td.discount {
  background: #B2DAB8;
}

#main .toukyu h4.original {
  position: relative;
  padding-right: 110px;
}

.toukyu h4.original:after {
  position: absolute;
  content: url(../../products/car/img/icon_original.png);
  top: 50%;
  right: 5px;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}

@media only screen and (max-width: 979px) {
  #main .unit.toukyu div div {
    padding-right: 80px;
  }
}
@media only screen and (max-width: 399px) {
  #main .unit.toukyu div div {
    padding-right: 50px;
  }
  #main .toukyu h4.original {
    padding-right: 67px;
  }
  .toukyu h4.original:after {
    -webkit-transform: translateY(-50%) scale(0.6);
        -ms-transform: translateY(-50%) scale(0.6);
            transform: translateY(-50%) scale(0.6);
    -webkit-transform-origin: right;
        -ms-transform-origin: right;
            transform-origin: right;
  }
}
#index.fire .fireindex img {
  margin-bottom: 10px;
}

#index.fire .fireindex ul li {
  font-size: 150%;
}

@media only screen and (max-width: 767px) {
  #index.fire .fireindex img {
    width: calc(33.3% - 5px) !important;
    float: left;
  }
  #index.fire .fireindex figcaption {
    width: calc(66.6% - 5px);
    float: right;
  }
  #index.fire .fireindex ul li {
    font-size: 120%;
  }
}
#example.fire h4.arrow {
  text-align: center;
  border: none;
  position: relative;
  z-index: 999;
  font-weight: bold;
  font-size: 150%;
}

#example.fire h4.arrow:before,
#example.fire h4.arrow:after {
  position: absolute;
  z-index: 1;
  color: transparent;
}

#example.fire h4.arrow:after {
  content: attr(data-text);
  width: 100%;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
      -ms-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
  z-index: 100;
  color: #333;
}

#example.fire h4.arrow i {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
      -ms-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
  font-size: 400%;
  color: #333;
  opacity: 0.1;
  z-index: 1;
}

@media only screen and (max-width: 767px) {
  #example.fire h4.arrow {
    font-size: 120%;
  }
  #example.fire h4.arrow:before,
  #example.fire h4.arrow:after,
  #example.fire h4.arrow i {
    display: none;
  }
}
#example.fire #main .icon {
  display: inline-block;
  margin-right: 0.5em;
  font-size: 0.8em;
  padding: 0.1em 0.3em;
  color: #fff;
}

#example.fire #main .icon.tatemono {
  background: #0c8e75;
}

#example.fire #main .icon.kazai {
  background: #8e0c48;
}

#example.fire #main .cost br {
  display: none;
}

@media only screen and (max-width: 767px) {
  #example.fire #main .cost {
    font-size: 140%;
  }
}
@media only screen and (max-width: 399px) {
  #example.fire #main .cost {
    text-align: left;
    display: inline-block;
    width: auto;
  }
  #example.fire #main .fireex div {
    text-align: center;
  }
  #example.fire #main .cost br {
    display: inline;
  }
}
#example.fire #main div.fukidashi {
  width: 66.6% !important;
  padding: 10px 20px;
  border-radius: 15px;
  text-align: center;
  margin: 0 auto;
  width: auto;
  background: #cfe7f7;
  position: relative;
}

#example.fire div.fukidashi:before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-100%);
      -ms-transform: translateX(-50%) translateY(-100%);
          transform: translateX(-50%) translateY(-100%);
  border: transparent 25px solid;
  border-top: none;
  border-bottom: #cfe7f7 15px solid;
}

#example.fire div.fukidashi p {
  margin-bottom: 0.5em;
}

#main div.fukidashi .linklist {
  overflow: hidden;
  margin-bottom: 0;
}

#main div.fukidashi .linklist li {
  float: right;
}

@media only screen and (max-width: 767px) {
  #example.fire #main div.fukidashi {
    width: 100% !important;
    padding: 10px 15px;
    border-radius: 10px;
  }
}
#shizen .firesizenhosho {
  margin-bottom: 0;
}

.firesizenhosho > li {
  border: #1d7ec2 2px solid;
  position: relative;
  background: #fff;
}

#main .firesizenhosho h4 {
  padding: 10px 10px 0;
  margin-bottom: 0;
  border: none;
  font-weight: bold;
  color: #d91313;
  font-size: 180%;
}

#main .firesizenhosho li ul {
  padding: 0 10px 0;
  overflow: visible;
}

#main .firesizenhosho li figure {
  text-align: center;
  color: #117EC1;
  margin-bottom: 0;
}

.firesizenhosho li li img {
  display: block;
  width: 100%;
  background: #fff;
  margin-bottom: 0.5em;
  padding: 5px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: #117EC1 2px solid;
  border-radius: 8px;
}

#main .firesizenhosho figcaption {
  text-align: left;
  font-weight: bold;
  line-height: 1.4;
}

.firesizenhosho p {
  padding: 0 10px;
}

.firesizenhosho .kyosaikin {
  background: #1d7ec2;
}

#fire .firesizenhosho .kyosaikin {
  position: absolute;
  left: -2px;
  right: -2px;
  top: 100%;
}

.ua-safari #shizen .firesizenhosho > li:last-child {
  padding-bottom: 139px;
}

#shizen .firesizenhosho > li:first-child {
  /* padding-bottom: 123px; */
}

#shizen .firesizenhosho li .kyosaikin {
  position: absolute;
  left: -2px;
  right: -2px;
  bottom: 0;
}

.firesizenhosho .kyosaikin p {
  padding: 10px 0;
  margin-bottom: 0;
  color: #fff;
  text-align: center;
  font-size: 100%;
}

.firesizenhosho .kyosaikin strong {
  font-size: 150%;
}

.firesizenhosho .kyosaikin i {
  display: block;
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  font-size: 220%;
  color: #bbb;
}

#shizen .firesizenhosho .kyosaikin i {
  font-size: 120%;
  font-weight: bold;
}

.firesizenhosho .kyosaikin .icon {
  font-size: 80%;
  display: inline-block;
  margin-right: 0.2em;
  padding: 0.2em 0.5em;
  color: #fff;
  vertical-align: middle;
  border: 2px solid #fff;
  margin-left: 0.3em;
}

.firesizenhosho .kyosaikin .big.icon {
  background: #f39801;
}

.firesizenhosho .kyosaikin .normal.icon {
  background: #e3630a;
}

.firesizenhosho .kyosaikin .basic.icon {
  background: #0068b7;
}

.firesizenhosho .kyosaikin .economy.icon {
  background: #00afec;
}

@media only screen and (max-width: 979px) {
  .firesizenhosho {
    margin-bottom: 102px;
  }
  #main .firesizenhosho h4 {
    font-size: 150%;
  }
  #main .firesizenhosho .kyosaikin {
    padding: 0;
  }
  .firesizenhosho .kyosaikin p {
    font-size: 94%;
  }
  .firesizenhosho .kyosaikin strong {
    font-size: 120%;
  }
  .firesizenhosho .kyosaikin i {
    font-size: 180%;
  }
}
@media only screen and (max-width: 767px) {
  .firesizenhosho {
    margin-bottom: 0;
  }
  #fire .firesizenhosho > li {
    margin-bottom: 18px !important;
  }
  #main .firesizenhosho h4 {
    font-size: 150%;
  }
  #main .firesizenhosho .kyosaikin,
  #shizen #main .firesizenhosho .kyosaikin {
    position: static;
  }
  .firesizenhosho .kyosaikin p {
    font-size: 94%;
  }
  .firesizenhosho .kyosaikin strong {
    font-size: 120%;
  }
  .firesizenhosho .kyosaikin i {
    font-size: 180%;
  }
  #shizen .firesizenhosho > li:last-child {
    padding-bottom: 0;
  }
}
.firecostbox > *:first-child {
  width: 70%;
}

.firecostbox > *:last-child {
  width: 20%;
}

#main .firecostbox div {
  padding: 0;
}

.ua-safari .firecostbox > * {
  float: left;
}

.firecostbox > *:first-child {
  margin-right: 10px;
}

.firecostbox > *:last-child {
  margin-left: 10px;
}

@media only screen and (max-width: 979px) {
  #main .firecostbox div {
    padding: 0;
  }
}
@media only screen and (max-width: 767px) {
  .firecostbox > *:first-child {
    width: 100%;
  }
  .firecostbox > *:last-child {
    width: 100%;
  }
}
.fireex {
  overflow: hidden;
}

#main .fireex figure {
  width: 200px;
  float: left;
  margin: 0;
}

#main .unit .fireex > div {
  width: calc(100% - 210px);
  float: right;
  margin: 0;
  padding: 0;
}

@media only screen and (max-width: 767px) {
  #main .fireex figure {
    width: 20%;
  }
  #main .unit .fireex > div {
    width: calc(80% - 10px);
  }
}
@media only screen and (max-width: 399px) {
  #main .fireex figure {
    display: none;
  }
  #main .unit .fireex > div {
    width: 100%;
    float: none;
  }
}
.fireexample > dt {
  font-size: 120%;
  color: #fff;
}

.fireexample dt.extext span {
  position: absolute;
  bottom: calc(0.2em + 22px);
  right: 60px;
  background: #ccc;
  /*	font-size: 75%;*/
  padding: 5px 15px;
  border-radius: 30px;
  color: #fff;
}

.fireexample dt.extext span:before {
  position: absolute;
  content: "";
  width: 100px;
  height: 20px;
  top: 80%;
  right: 150px;
  border-right: #000 10px solid;
  border-radius: 0 0 20px 0;
}

#main .fireexample dt.big:hover,
#main .fireexample dt.big.active,
.fireexample dt.big {
  background: #2554b0;
}

.fireexample dt.big span:before {
  border-color: #e63c3c;
}

.fireexample dt.big span {
  background: #e63c3c;
}

#main .fireexample dt.normal:hover,
#main .fireexample dt.normal.active,
.fireexample dt.normal {
  background: #00a1e9;
}

.fireexample dt.normal span:before {
  border-color: #e3630a;
}

.fireexample dt.normal span {
  background: #e3630a;
}

#main .fireexample dt.fireonly:hover,
#main .fireexample dt.fireonly.active,
.fireexample dt.fireonly {
  background: #e3630a;
}

.fireexample > dt:hover,
.fireexample > dt.active {
  -webkit-filter: brightness(1.2);
          filter: brightness(1.2);
}

.fireexample > dd {
  border: #bbb 3px solid;
  border-top: none;
  margin: 0 10px 18px;
  padding: 0 15px 15px;
  border-radius: 0 0 10px 10px;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

#main .fireexample > dd p {
  margin-bottom: 0;
  line-height: 0;
  overflow: hidden;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

#main .fireexample > dd h6 {
  background: #666;
  color: #fff;
  margin-bottom: 0;
  line-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

#main .fireexample > dd dl {
  padding: 0 10px;
}

#main .fireexample > dd table,
#main .fireexample > dd tbody,
#main .fireexample > dd tr,
#main .fireexample > dd th,
#main .fireexample > dd td,
#main .fireexample > dd span,
#main .fireexample > dd dl,
#main .fireexample > dd dt,
#main .fireexample > dd dd,
#main .fireexample > dd sup {
  border-top-width: 0;
  border-bottom-width: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 0;
  overflow: hidden;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

.fireexample > dd th {
  white-space: nowrap;
  vertical-align: top;
}

#main .fireexample > dd span,
#main .fireexample > dd sup {
  display: block;
}

.fireexample > dd.active {
  padding: 10px 15px;
  border-radius: 0 0 10px 10px;
}

#main .fireexample > dd.active p {
  margin-bottom: 9px;
  line-height: 1.5;
}

#main .fireexample > dd.active h6 {
  background: #666;
  color: #fff;
  margin-bottom: 9px;
  padding-top: 5px;
  padding-bottom: 5px;
  line-height: 1.5;
}

#main .fireexample > dd.active table,
#main .fireexample > dd.active tbody,
#main .fireexample > dd.active tr,
#main .fireexample > dd.active th,
#main .fireexample > dd.active td,
#main .fireexample > dd.active span,
#main .fireexample > dd.active dl,
#main .fireexample > dd.active dt,
#main .fireexample > dd.active dd,
#main .fireexample > dd.active sup {
  border-top-width: 1px;
  border-bottom-width: 1px;
  line-height: 1.8;
}

#main .fireexample > dd.active table,
#main .fireexample > dd.active dl {
  margin-bottom: 9px;
}

#main .fireexample > dd.active th,
#main .fireexample > dd.active td,
#main .fireexample > dd.active dt,
#main .fireexample > dd.active dd {
  padding-top: 5px;
  padding-bottom: 5px;
}

#main .fireexample > dd.active dl {
  padding: 0 10px;
}

#main .fireexample > dd.active span,
#main .fireexample > dd.active sup {
  display: inline;
}

@media only screen and (max-width: 767px) {
  .fireexample dt.extext span {
    display: none;
  }
  .fireexample > dd {
    border-width: 2px;
    margin: 0 8px 18px;
    padding: 0 12px 15px;
  }
  .fireexample > dd.active {
    padding: 10px 12px;
    border-radius: 0 0 10px 10px;
  }
  .fireexample > dd.active dl dt,
  .fireexample > dd.active dl dd {
    font-size: 94%;
  }
}
@media only screen and (max-width: 399px) {
  .fireexample > dt {
    padding: 3px 5px;
    font-size: 100%;
  }
  .fireexample > dd {
    border-width: 2px;
    margin: 0 0 9px;
    padding: 0 10px 15px;
  }
  .fireexample > dd.active {
    padding: 10px 10px;
  }
  #main .fireexample > dd h6 {
    font-size: 83.3%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .fireexample > dd p {
    font-size: 83.3%;
  }
  .fireexample > dd p.px11 {
    font-size: 75%;
  }
  .fireexample > dd dl {
    font-size: 83.3%;
    padding: 0 !important;
  }
  .fireexample > dd dt,
  .fireexample > dd dd {
    float: none;
    display: inline;
    padding: 0;
    border: none;
  }
  .fireexample > dd dt:after {
    content: "：";
  }
  .fireexample > dd dd:after {
    content: "\a";
    white-space: pre;
  }
}
.triplehosho img {
  max-width: 300px;
}

.triplehosho li li {
  font-size: 110%;
}

.example > section {
  width: 48%;
  width: calc(50% - 20px);
}

#main .example h5 {
  background: #1D7EC2;
  color: #fff;
  text-align: center;
  font-size: 120%;
}

.example .kakekin ul {
  padding: 0;
}

.example .kakekin li {
  width: 48%;
  width: calc(50% - 5px);
  background: #e3630a;
  color: #fff;
  text-align: center;
  line-height: 1.3;
  padding: 0.8em 0px;
  border-radius: 100px;
}

.example .kakekin li:before {
  content: none;
}

.example .kakekin strong {
  display: block;
  font-size: 180%;
}

p.comment {
  --_bg: #ccc;
  --_color: #333;
  background: var(--_bg);
  color: var(--_color);
  border-radius: 30px;
  padding: 0.5em 1em;
  margin: 0 50px 18px 200px;
  min-height: 98px;
  font-size: 115%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
}
p.comment-gray {
  --_bg: #ccc;
  --_color: #333;
}
p.comment-blue {
  --_bg: #d5effe;
}
p.comment-cream {
  --_bg: #ffffcd;
}

p.comment.noflex {
  display: block;
}

p.comment:before {
  content: url(../../products/triple/img/face.png);
  position: absolute;
  top: 0;
  left: -150px;
}

p.comment:after {
  content: "";
  position: absolute;
  left: -30px;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  border: transparent 10px solid;
  border-left: none;
  border-right: var(--_bg) 30px solid;
}

p.comment a {
  color: inherit;
}

@media only screen and (max-width: 979px) {
  .example {
    overflow: hidden;
  }
  .example > section {
    float: left;
    width: calc(50% - 10px);
  }
  .example > section:nth-child(2n) {
    float: right;
  }
  .example .kakekin li {
    float: left;
    width: calc(50% - 5px);
  }
  .example .kakekin li:nth-child(2n) {
    float: right;
  }
}
@media only screen and (max-width: 639px) {
  #main article .unit .example {
    padding: 0;
  }
  .example > section,
  .example > section:nth-child(2n) {
    float: none;
    width: 100%;
    overflow: hidden;
    margin-bottom: 18px;
  }
  #main .example h5 {
    margin-bottom: 9px;
  }
  #main .example table {
    margin-bottom: 0;
  }
  p.comment {
    margin: 0 0 18px 130px;
    min-height: 97px;
    font-size: 105%;
  }
  p.comment:before {
    left: -130px;
  }
}
@media only screen and (max-width: 399px) {
  #main article .unit .example {
    padding: 0;
  }
  .example .kakekin li,
  .example .kakekin li:nth-child(2n) {
    float: none;
    width: 100%;
    overflow: hidden;
    margin-bottom: 9px;
  }
  .example .kakekin li {
    padding: 0.3em 0;
  }
  .example .kakekin li strong {
    display: inline;
    margin-left: 0.5em;
  }
  p.comment {
    border-radius: 10px;
    padding: 0.5em 1em;
    margin-right: 0;
    margin-left: 70px;
    min-height: 0;
    font-size: 100%;
  }
  p.comment.noflex {
    display: block;
  }
  p.comment:before {
    top: 0;
    left: -70px;
    -webkit-transform-origin: left top;
        -ms-transform-origin: left top;
            transform-origin: left top;
    -webkit-transform: scale(0.5);
        -ms-transform: scale(0.5);
            transform: scale(0.5);
  }
  p.comment:after {
    top: 15px;
    bottom: auto;
    left: -15px;
    -webkit-transform: none;
        -ms-transform: none;
            transform: none;
    border: transparent 5px solid;
    border-left: none;
    border-right: #ccc 15px solid;
  }
}
#main .iryolist {
  padding: 0;
  overflow: hidden;
}

.iryolist li {
  display: inline-block;
  background: #facd89;
  padding: 0.5em 1em;
  font-size: 110%;
  line-height: 1.2;
}

.iryolist.doubleline li {
  padding: 0.45em 1em;
  font-size: 110%;
}

.iryolist.singleline li {
  padding: 1em 1em;
  margin-top: 0.8em;
  margin-bottom: 0.8em;
}

.iryolist li:first-child {
  padding: 1em 1em;
  margin: 0;
  font-size: 120%;
}

.iryolist li:before {
  content: none;
}

.iryolist li:first-child {
  display: block;
  float: left;
  text-align: center;
  margin-right: 100px;
  position: relative;
}

.iryolist li:first-child:before,
.iryolist li:first-child:after {
  display: block;
  position: absolute;
  background: #1d7ec2;
  border-radius: 5px;
}

.iryolist li:first-child:before {
  content: "";
  width: 26px;
  height: 4em;
  top: 5px;
  left: auto;
  right: -63px;
}

.iryolist li:first-child:after {
  height: 1.5em;
  width: 80px;
  content: "プラス";
  color: #fff;
  font-size: 11px;
  line-height: 15px;
  padding: 5px 0;
  top: 30px;
  right: -90px;
}

@media only screen and (max-width: 979px) {
  .iryolist {
    text-align: center;
  }
  .iryolist.singleline li,
  .iryolist.doubleline li {
    font-size: 100%;
    margin: 0 2px 4px;
    padding: 0.8em 1em;
  }
  .iryolist li:first-child {
    float: none;
    margin-right: 0;
    margin-bottom: 100px;
    position: relative;
  }
  .iryolist li:first-child:before {
    top: auto;
    left: 50%;
    right: auto;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
    bottom: -90px;
  }
  .iryolist li:first-child:after {
    top: auto;
    left: 50%;
    right: auto;
    bottom: -63px;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
  }
  .iryolist li:first-child br {
    display: none;
  }
}
@media only screen and (max-width: 399px) {
  .iryolist {
    text-align: center;
  }
  .iryolist li {
    font-size: 94%;
  }
  .iryolist li:first-child {
    float: none;
    margin-right: 0;
    margin-bottom: 60px;
    position: relative;
  }
  .iryolist li:first-child:before {
    height: 50px;
    bottom: -55px;
  }
  .iryolist li:first-child:after {
    width: 50px;
    padding: 4px 0;
    bottom: -43px;
  }
  .iryolist li:first-child br {
    display: none;
  }
}
.exsample .popular {
  position: relative;
}

.exsample .popular:after {
  position: absolute;
  top: 50%;
  right: 10px;
  -webkit-transform: translateY(-50%) rotate(-5deg);
      -ms-transform: translateY(-50%) rotate(-5deg);
          transform: translateY(-50%) rotate(-5deg);
  content: "よくある\a事例";
  white-space: pre;
  text-align: center;
  font-size: 75%;
  line-height: 1.2;
  color: #e63c3c;
  font-weight: bold;
  border: #e63c3c 1px solid;
  border-radius: 10px;
  padding: 3px 6px;
  background: #fff;
}

.ua-safari .exsample .popular:after {
  top: 0;
  -webkit-transform: rotate(-5deg);
      -ms-transform: rotate(-5deg);
          transform: rotate(-5deg);
  -webkit-transform-origin: right top;
      -ms-transform-origin: right top;
          transform-origin: right top;
  font-size: 64%;
}

#main .exsample figcaption {
  font-size: 110%;
}

.pensionflow {
  width: 66%;
  padding: 0;
  margin: 0 auto;
}

.pensionflow > li {
  list-style: none;
  margin-left: 100px;
  margin-bottom: 0;
}

.pensionflow span {
  position: relative;
  font-size: 120%;
  border: #1d7ec2 1px solid;
  display: block;
  padding: 5px 10px;
  margin-bottom: 0;
}

.pensionflow span:before {
  content: attr(data-text);
  background: #1d7ec2;
  color: #fff;
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: -100px;
  width: 100px;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-align-items: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.pensionflow ul {
  padding-top: 10px;
  padding-bottom: 10px;
  margin: 0;
  position: relative;
}

.pensionflow li:first-child ul:before,
.pensionflow li:first-child ul:after {
  content: "";
  position: absolute;
  bottom: 0;
}

.pensionflow li:first-child ul:before {
  background: #1d7ec2;
  color: #fff;
  top: 0;
  bottom: 5px;
  left: -48px;
  width: 4px;
}

.pensionflow li:first-child ul:after {
  border: transparent 10px solid;
  border-top: #1d7ec2 25px solid;
  border-bottom: none;
  bottom: 0;
  left: -56px;
}

@media only screen and (max-width: 767px) {
  .pensionflow {
    width: 100%;
  }
}
@media only screen and (max-width: 399px) {
  .pensionflow > li {
    margin-left: 0;
  }
  .pensionflow span {
    font-size: 100%;
    margin-top: 30px;
  }
  .pensionflow span:before {
    content: attr(data-text);
    background: #1d7ec2;
    color: #fff;
    position: absolute;
    top: -30px;
    bottom: auto;
    left: -1px;
    height: 30px;
  }
  .pensionflow ul {
    padding-top: 10px;
    padding-bottom: 10px;
    margin: 0;
    position: relative;
  }
  .pensionflow li:first-child ul:before,
  .pensionflow li:first-child ul:after {
    content: "";
    position: absolute;
    bottom: 0;
  }
  .pensionflow li:first-child ul:before {
    background: #1d7ec2;
    color: #fff;
    top: 0;
    bottom: 5px;
    left: -48px;
    width: 4px;
  }
  .pensionflow li:first-child ul:after {
    border: transparent 10px solid;
    border-top: #1d7ec2 25px solid;
    border-bottom: none;
    bottom: 0;
    left: -56px;
  }
}
.retirebox div {
  width: 45%;
  width: calc(50% - 40px);
}

#main .retirebox h4 {
  background: #1d7ec2;
  color: #fff;
  border-bottom: none;
  text-align: center;
  padding: 10px 0;
  border-radius: 30px;
}

@media only screen and (max-width: 767px) {
  .retirebox {
    display: block;
  }
  .retirebox div {
    width: 100%;
    padding: 0 !important;
  }
  #main .retirebox h4 {
    background: #1d7ec2;
    color: #fff;
    border-bottom: none;
    text-align: center;
    padding: 10px 0;
    border-radius: 30px;
  }
}
.pensiontype h4 {
  clear: both;
}

#main .pensiontype article {
  width: 66%;
  width: calc(66.6% - 10px);
}

#main .pensiontype figure.floatContentsR {
  max-width: 100%;
  width: 33%;
  width: calc(33.3% - 10px);
  padding-top: 20px;
}

#main .pensiontype figure img {
  width: 100% !important;
}

#main .pensiontype h5 {
  background: #1d7ec2;
  padding: 10px 15px;
  color: #fff;
  margin-top: 20px;
  position: relative;
}

#main .pensiontype h5:before {
  content: "こんな方におすすめします";
  position: absolute;
  top: -20px;
  left: 0;
  border: #1d7ec2 1px solid;
  padding: 0 10px;
  height: 20px;
  line-height: 20px;
  font-size: 83.3%;
  color: #1d7ec2;
}

#main .pensiontype th {
  white-space: nowrap;
  vertical-align: top;
}

@media only screen and (max-width: 767px) {
  .pensiontype h4 {
    clear: both;
  }
  #main .pensiontype article,
  #main .pensiontype figure.floatContentsR {
    width: 100%;
    float: none;
  }
  #main .pensiontype figure {
    margin: 0 !important;
    padding: 0 !important;
  }
  #main .pensiontype figure img {
    max-width: 200px;
  }
  #main .pensiontype h5 {
    background: #1d7ec2;
    padding: 10px 15px;
    color: #fff;
    margin-top: 20px;
    position: relative;
  }
  #main .pensiontype h5:before {
    content: "こんな方におすすめします";
    position: absolute;
    top: -20px;
    left: 0;
    border: #1d7ec2 1px solid;
    padding: 0 10px;
    height: 20px;
    line-height: 20px;
    font-size: 83.3%;
    color: #1d7ec2;
  }
  #main .pensiontype th {
    white-space: nowrap;
    vertical-align: top;
  }
}
.ex_flow {
  margin-bottom: 18px;
}

.ex_flow .ex_flow_left {
  float: left;
  width: 30%;
  background: #1d7ec2;
  padding: 10px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center;
}

.ex_flow .ex_flow_left p {
  color: #fff;
  margin-bottom: 0;
  /*			font-size: 83.3%;*/
}

.ex_flow .ex_flow_left p strong {
  line-height: 1.3;
  font-size: 180%;
}

.ex_flow .ex_flow_right {
  float: right;
  width: 70%;
  padding: 10px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.ex_flow .ex_flow_right dl {
  margin-bottom: 18px;
  position: relative;
}

.ex_flow .ex_flow_right dl:last-child {
  margin-bottom: 0;
}

.ex_flow .ex_flow_right dt {
  font-size: 94%;
}

.ex_flow .ex_flow_right dl:nth-child(1) .getsugaku {
  width: 35%;
}

.ex_flow .ex_flow_right dl:nth-child(2) .getsugaku {
  width: 45%;
}

.ex_flow .ex_flow_right dl:nth-child(3) .getsugaku {
  width: 55%;
}

.ex_flow .ex_flow_right dd.getsugaku,
.ex_flow .ex_flow_right dd.fukidashi {
  font-size: 100%;
  color: #fff;
  padding: 3px 20px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.ex_flow .ex_flow_right dd.getsugaku {
  background: #1d7ec2;
}

.ex_flow .ex_flow_right dd.fukidashi {
  position: absolute;
  bottom: 0;
  background: #e63c3c;
  margin-left: 15px;
  border-radius: 30px;
}

.ex_flow .ex_flow_right dd.fukidashi:before {
  position: absolute;
  content: "";
  left: -13px;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  border: transparent 5px solid;
  border-right: #e63c3c 15px solid;
  border-left: none;
}

.ex_flow .ex_flow_right dl:nth-child(1) .fukidashi {
  left: 35%;
}

.ex_flow .ex_flow_right dl:nth-child(2) .fukidashi {
  left: 45%;
}

.ex_flow .ex_flow_right dl:nth-child(3) .fukidashi {
  left: 55%;
}

.ex_flow .ex_flow_right dd.getsugaku strong,
.ex_flow .ex_flow_right dd.fukidashi strong {
  font-size: 130%;
}

@media only screen and (max-width: 639px) {
  #main .unit .ex_flow {
    margin-bottom: 0;
    padding: 0;
  }
  #main .ex_flow .ex_flow_left,
  #main .ex_flow .ex_flow_right {
    float: none;
    width: 100%;
    padding: 5px;
    margin-bottom: 9px;
  }
  .ex_flow .ex_flow_left p {
    font-size: 83.3%;
    line-height: 1.3;
  }
  .ex_flow .ex_flow_left p strong {
    line-height: 1.3;
    font-size: 130%;
  }
  .ex_flow .ex_flow_right dl {
    margin-bottom: 18px;
    position: relative;
  }
  .ex_flow .ex_flow_right dl:last-child {
    margin-bottom: 0;
  }
  .ex_flow .ex_flow_right dt {
    font-size: 83.3%;
  }
  .ex_flow .ex_flow_right dl:nth-child(1) .getsugaku {
    width: 35%;
  }
  .ex_flow .ex_flow_right dl:nth-child(2) .getsugaku {
    width: 40%;
  }
  .ex_flow .ex_flow_right dl:nth-child(3) .getsugaku {
    width: 45%;
  }
  .ex_flow .ex_flow_right dd.getsugaku,
  .ex_flow .ex_flow_right dd.fukidashi {
    font-size: 83.3%;
  }
  .ex_flow .ex_flow_right dd.getsugaku {
    padding: 3px 10px;
  }
  .ex_flow .ex_flow_right dd.fukidashi {
    padding: 3px 15px;
  }
  .ex_flow .ex_flow_right dl:nth-child(1) .fukidashi {
    left: 35%;
  }
  .ex_flow .ex_flow_right dl:nth-child(2) .fukidashi {
    left: 40%;
  }
  .ex_flow .ex_flow_right dl:nth-child(3) .fukidashi {
    left: 45%;
  }
  .ex_flow .ex_flow_right dd.getsugaku strong,
  .ex_flow .ex_flow_right dd.fukidashi strong {
    font-size: 110%;
  }
}
@media only screen and (max-width: 399px) {
  .ex_flow .ex_flow_right dl:nth-child(1) .getsugaku {
    width: 40%;
  }
  .ex_flow .ex_flow_right dl:nth-child(2) .getsugaku {
    width: 45%;
  }
  .ex_flow .ex_flow_right dl:nth-child(3) .getsugaku {
    width: 50%;
  }
  .ex_flow .ex_flow_right dd.getsugaku,
  .ex_flow .ex_flow_right dd.fukidashi {
    font-size: 83.3%;
  }
  .ex_flow .ex_flow_right dd.getsugaku {
    padding: 3px 10px;
  }
  .ex_flow .ex_flow_right dd.fukidashi {
    padding: 3px 15px;
  }
  .ex_flow .ex_flow_right dl:nth-child(1) .fukidashi {
    left: 40%;
  }
  .ex_flow .ex_flow_right dl:nth-child(2) .fukidashi {
    left: 45%;
  }
  .ex_flow .ex_flow_right dl:nth-child(3) .fukidashi {
    left: 50%;
  }
  .ex_flow .ex_flow_right dd.getsugaku strong,
  .ex_flow .ex_flow_right dd.fukidashi strong {
    font-size: 120%;
  }
}
.traffic #main .supportList li {
  background: #fff;
  margin-bottom: 0;
  border: #1d7ec2 2px solid;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 5px;
  border-radius: 10px;
}

.traffic #main .supportList li.disable {
  -webkit-filter: saturate(0%) contrast(0.2) brightness(1.5);
          filter: saturate(0%) contrast(0.2) brightness(1.5);
}

.traffic #main .supportList li figure {
  margin: 0;
}

.traffic #main .supportList figure img {
  max-height: 80px;
}

.traffic #main .supportList figure figcaption {
  font-size: 94%;
  text-align: center;
  color: #1d7ec2;
}

.trafficList img {
  max-width: 100%;
}

.contractbox li {
  border: #1d7ec2 3px solid;
  border-radius: 15px;
  padding: 20px;
}

#main .contractbox h5 {
  color: #1d7ec2;
  font-size: 150%;
  margin-bottom: 0;
}

#main .contractbox p {
  margin-bottom: 0;
}

#main .kumiawase {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: auto 1em auto 1em auto;
  grid-template-columns: repeat(3, auto);
  gap: 1em;
  padding: 0;
  margin: 0 0 18px;
}
@media only screen and (max-width: 767px) {
  #main .kumiawase {
    -ms-grid-columns: auto;
    grid-template-columns: repeat(1, auto);
    gap: 0.5em;
    max-width: 360px;
    margin-inline: auto;
  }
}
#main .kumiawase > li {
  border: #1d7ec2 1px solid;
  padding: 1em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.5em;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
#main .kumiawase > li::before {
  content: none;
}
#main .kumiawase h4 {
  color: #1d7ec2;
  font-size: 105%;
  padding: 0;
  border: none;
  margin-bottom: 0;
  text-align: left;
}
#main .kumiawase .shiki {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: auto 1em auto 1em auto;
  grid-template-columns: auto auto auto;
  gap: 1em;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0;
  margin: 0;
}
#main .kumiawase .shiki li {
  height: 100%;
  padding: 0;
  margin: 0;
  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;
  text-align: center;
}
#main .kumiawase .shiki li::before {
  content: none;
}
#main .kumiawase .icon {
  display: inline-block;
  font-size: 110%;
  color: #fff;
  padding: 0.3em 1em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
  line-height: 1.3;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
#main .kumiawase .icon.tatemono {
  background: #24a4a5;
}
#main .kumiawase .icon.kazai {
  background: #e3630a;
}
#main .kumiawase .icon.kasai {
  background: #ff0000;
}
#main .kumiawase .icon.basic {
  background: #0068b7;
}
#main .kumiawase .icon.economy {
  background: #00afec;
}

#main .kumiawase p {
  text-align: center;
  margin-bottom: 0;
}

article .unit.discount ul li:before {
  content: none;
}

#main article .unit.discount ul li a {
  text-decoration: none;
}

#main article .unit.discount ul li img {
  margin-bottom: 9px;
}

#main article .unit.discount ul li figcaption {
  font-size: 120%;
  color: #e50150;
  font-weight: bold;
  text-align: center !important;
}

#discountbox .fixwidth {
  overflow: hidden;
}

#discountbox.unit aside {
  width: 150px;
  float: left;
  margin: 0;
}

#discountbox.unit article {
  width: 770px;
  width: calc(100% - 170px);
  float: right;
}

#discountbox.unit aside img {
  width: 100%;
  height: 150px;
}

#discountbox h4 {
  clear: both;
}

#discountbox.unit p.accent {
  padding: 0.5em 0px;
  border-radius: 10px;
  text-align: center;
  font-size: 120%;
  background: #cfe7f7;
  color: #2d3191;
}

@media only screen and (max-width: 767px) {
  #discountbox.unit aside {
    width: 100px;
  }
  #discountbox.unit article {
    width: calc(100% - 120px);
  }
  #discountbox.unit aside img {
    width: 100%;
  }
  #discountbox.unit p.accent {
    padding: 0.5em 10px;
    font-size: 100%;
  }
}
@media only screen and (max-width: 399px) {
  #discountbox.unit aside,
  #discountbox.unit article {
    width: 100%;
    float: none;
  }
  #discountbox.unit aside figure {
    width: 150px;
    margin: 0 auto 9px;
  }
  #discountbox.unit p.accent {
    padding: 0.3em 10px;
    font-size: 94%;
  }
}
.cartable th img[src$=".svg"] {
  height: 2.5em;
  vertical-align: baseline;
}

@media only screen and (max-width: 580px) {
  .cartable th img[src$=".svg"] {
    height: 1.5em;
  }
  .cartable th img[src$=".svg"]:after {
    content: "\a";
    white-space: pre;
  }
}
#accident .flexbasic li {
  border: #1d7ec2 2px solid;
  border-radius: 10px;
  padding: 5px;
  background: #fff;
}

#accident .flexbasic figure {
  margin: 0;
}

#accident .flexbasic figure img[src$=".svg"] {
  width: 100%;
  height: auto;
  max-height: 80px;
  max-width: 80px;
}

#accident .flexbasic figcaption {
  text-align: center;
  line-height: 1.2;
  color: #1d7ec2;
  font-size: 65%;
}

@media only screen and (max-width: 399px) {
  #accident .flexbasic figure img[src$=".svg"] {
    height: 40px;
    width: 40px;
  }
}
.caseList > li {
  border: #1d7ec2 3px solid;
  border-radius: 10px;
}

#main .caseList h4 {
  border-bottom: none;
  background: #1d7ec2;
  color: #fff;
  font-weight: bold;
  font-size: 110%;
  padding: 5px 10px;
  margin: 0;
}

#main .caseList figure {
  margin: 0;
  padding: 10px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

#main .caseList img {
  width: 100%;
  height: auto;
  max-height: 100px;
}

#main .caseList ul {
  padding: 0 10px;
  margin: 0;
}

#main .caseList ul li {
  width: 48%;
  width: calc(50% - 3px);
  margin: 0 6px 6px 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 75%;
  border: #1d7ec2 1px solid;
  list-style: 1.2;
  padding: 0 5px;
  background: #1d7ec2;
  color: #fff;
  text-align: center;
}

#main .caseList ul li:nth-child(2n) {
  margin-right: 0;
}

.caseList ul li:before {
  content: none;
}

#main .caseList .disable {
  border-color: #999;
  color: #999;
  background: #ddd;
}

.caseList .more {
  display: none;
}

@media only screen and (max-width: 767px) {
  .caseList > li {
    overflow: hidden;
  }
  #main .caseList h4 {
    font-size: 105%;
    padding: 3px 5px;
  }
  #main .caseList figure {
    padding: 5px;
    float: left;
    width: 80px;
  }
  #main .caseList ul {
    float: right;
    width: calc(100% - 85px);
    padding: 5px 5px 0 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  #main .caseList ul li {
    float: left;
    font-size: 75%;
  }
}
@media only screen and (max-width: 639px) {
  .caseList > li {
    border-width: 1px;
  }
  #main .caseList h4 {
    font-size: 100%;
    font-weight: normal;
  }
  #main .caseList ul li,
  #main .caseList ul li:nth-child(2n) {
    float: none;
    width: 100%;
    margin-right: 0;
    font-size: 75%;
    background: #fff;
    color: #1d7ec2;
  }
  #main .caseList ul li.disable {
    display: none;
  }
}
@media only screen and (max-width: 399px) {
  #main .caseList figure {
    width: 40px;
  }
  #main .caseList ul {
    width: calc(100% - 45px);
    padding-right: 0;
  }
  #main .caseList ul li,
  #main .caseList ul li:nth-child(2n) {
    float: left;
    width: calc(50% - 5px);
    margin-right: 5px;
  }
}
.c-grid__list {
  --_columns: 2;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: ;
  grid-template-columns: repeat(var(--_columns), 1fr);
  gap: 10px;
  padding: 0;
}
.c-grid__list > li {
  list-style: none;
}
.c-grid__list > li::before {
  content: none;
}

.faq .accordion {
  font-size: 94%;
  margin-bottom: 18px;
}
.faq dt {
  border: #ccc 1px solid;
  background: #fff;
  margin-top: 5px;
  min-height: 3em;
  line-height: 1.8;
  position: relative;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  padding: 10px 4.67em 10px 20px;
}
.faq dt:has(i) {
  padding: 10px 4.67em;
}
@media only screen and (max-width: 639px) {
  .faq dt {
    padding: 0.3em 3.5em 0.3em 0.6em;
    min-height: 2.2em;
    line-height: 1.6;
  }
  .faq dt:has(i) {
    padding: 0.3em 3.5em;
  }
}
.faq dt i {
  position: absolute;
  display: block;
  text-align: center;
  width: 1.5em;
  line-height: 1;
  top: 50%;
  left: 1.17em;
  -webkit-transform: translateY(-0.5em) translateX(-0.75em);
      -ms-transform: translateY(-0.5em) translateX(-0.75em);
          transform: translateY(-0.5em) translateX(-0.75em);
  font-size: 200%;
  color: #9fc94b;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
@media only screen and (max-width: 639px) {
  .faq dt i {
    width: 1.5em;
    left: 1em;
    -webkit-transform: translateY(-0.5em) translateX(-0.5em);
        -ms-transform: translateY(-0.5em) translateX(-0.5em);
            transform: translateY(-0.5em) translateX(-0.5em);
    font-size: 150%;
  }
}
.faq dt:before, .faq dt:after {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  width: 1em;
  height: 0.4em;
  background: #9fc94b;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
@media only screen and (max-width: 639px) {
  .faq dt:before, .faq dt:after {
    right: 1.25em;
    width: 0.75em;
  }
}
.faq dt:before {
  -webkit-transform-origin: right;
      -ms-transform-origin: right;
          transform-origin: right;
  -webkit-transform: translateX(-0.5em) skewY(45deg);
      -ms-transform: translateX(-0.5em) skewY(45deg);
          transform: translateX(-0.5em) skewY(45deg);
}
@media only screen and (max-width: 639px) {
  .faq dt:before {
    -webkit-transform: translateX(-0.35em) skewY(45deg);
        -ms-transform: translateX(-0.35em) skewY(45deg);
            transform: translateX(-0.35em) skewY(45deg);
  }
}
.faq dt:after {
  -webkit-transform-origin: left;
      -ms-transform-origin: left;
          transform-origin: left;
  -webkit-transform: translateX(0.5em) skewY(-45deg);
      -ms-transform: translateX(0.5em) skewY(-45deg);
          transform: translateX(0.5em) skewY(-45deg);
}
@media only screen and (max-width: 639px) {
  .faq dt:after {
    -webkit-transform: translateX(0.38em) skewY(-45deg);
        -ms-transform: translateX(0.38em) skewY(-45deg);
            transform: translateX(0.38em) skewY(-45deg);
  }
}
.faq dt:hover {
  background: #eee;
}
.faq dt.active {
  color: #fff;
  background: #9fc94b;
}
.faq dt.active i {
  color: #fff;
}
.faq dt.active:before, .faq dt.active:after {
  background: #fff;
}
.faq dt.active:before {
  -webkit-transform: translateY(-14px) translateX(-0.5em) skewY(-45deg);
      -ms-transform: translateY(-14px) translateX(-0.5em) skewY(-45deg);
          transform: translateY(-14px) translateX(-0.5em) skewY(-45deg);
}
@media only screen and (max-width: 639px) {
  .faq dt.active:before {
    -webkit-transform: translateY(-14px) translateX(-0.35em) skewY(-45deg);
        -ms-transform: translateY(-14px) translateX(-0.35em) skewY(-45deg);
            transform: translateY(-14px) translateX(-0.35em) skewY(-45deg);
  }
}
.faq dt.active:after {
  -webkit-transform: translateY(-14px) translateX(0.5em) skewY(45deg);
      -ms-transform: translateY(-14px) translateX(0.5em) skewY(45deg);
          transform: translateY(-14px) translateX(0.5em) skewY(45deg);
}
@media only screen and (max-width: 639px) {
  .faq dt.active:after {
    -webkit-transform: translateY(-14px) translateX(0.38em) skewY(45deg);
        -ms-transform: translateY(-14px) translateX(0.38em) skewY(45deg);
            transform: translateY(-14px) translateX(0.38em) skewY(45deg);
  }
}
.faq dd {
  border: #9fc94b 3px solid;
  border-top: none;
  overflow: hidden;
  line-height: 0;
  border-top-width: 0;
  border-bottom-width: 0;
  margin: 0 10px;
  padding: 0 1.3em;
  border-radius: 0 0 10px 10px;
  color: #fff;
  background: #fff;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  position: relative;
}
@media only screen and (max-width: 639px) {
  .faq dd {
    margin: 0 5px;
    padding: 0 1em;
    border-radius: 0 0 5px 5px;
  }
}
.faq dd.active {
  border-bottom-width: 3px;
  border-top: none;
  line-height: 1.8;
  margin-bottom: 1em;
  padding-top: 1.3em;
  padding-bottom: 1.3em;
  color: #333;
}
@media only screen and (max-width: 639px) {
  .faq dd.active {
    padding-top: 0.5em;
    padding-bottom: 0.5em;
  }
}
.faq dd a, .faq dd span {
  line-height: inherit;
  font-size: inherit;
}
.faq dd i {
  position: absolute;
}
.faq dd ul, .faq dd li, .faq dd img, .faq dd figure {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0 !important;
}
.faq dd figure {
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.faq dd figure img {
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  -o-object-fit: contain;
     object-fit: contain;
}
.faq dd .c-grid__list {
  -ms-grid-rows: 0fr;
  grid-template-rows: 0fr;
  gap: 0 10px;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.faq dd .c-grid__list > li {
  overflow: hidden;
}
.faq dd.active .c-grid__list {
  -ms-grid-rows: 1fr;
  grid-template-rows: 1fr;
  gap: 10px 10px;
}

dl.standard {
  font-size: 94%;
  margin-bottom: 18px;
}

dl.standard > dt {
  background: #ddd;
  border-radius: 1.5em;
  padding: 0.55em 3em 0.55em 1.5em;
  margin-top: 5px;
  line-height: 1.8;
}

dl.standard.accordion > dt {
  position: relative;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

dl.standard.accordion > dt:before,
dl.standard.accordion > dt:after {
  content: "";
  position: absolute;
  top: 50%;
}

dl.standard.accordion > dt:before {
  right: 0.2em;
  width: 2.5em;
  height: 2.5em;
  background: #fff;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  border-radius: 30px;
}

dl.standard.accordion > dt:after {
  right: 1.45em;
  width: 0;
  height: 0;
  -webkit-transform: translateY(-50%) translateX(50%);
      -ms-transform: translateY(-50%) translateX(50%);
          transform: translateY(-50%) translateX(50%);
  border: transparent 0.6em solid;
  border-bottom: none;
  border-top: #bbb 1em solid;
  -webkit-transition: -webkit-transform 0.2s;
  transition: -webkit-transform 0.2s;
  transition: transform 0.2s;
  transition: transform 0.2s, -webkit-transform 0.2s;
}

dl.standard.accordion > dt.active,
dl.standard.accordion > dt:hover {
  background: #bbb;
}

dl.standard.accordion > dt.active:after {
  -webkit-transform: translateY(-50%) translateX(50%) rotate(180deg);
      -ms-transform: translateY(-50%) translateX(50%) rotate(180deg);
          transform: translateY(-50%) translateX(50%) rotate(180deg);
}

dl.standard > dd {
  border: #bbb 3px solid;
  border-top: none;
  overflow: hidden;
  line-height: 0;
  border-top-width: 0;
  border-bottom-width: 0;
  margin: 0 1.6em;
  padding: 0 1.3em;
  border-radius: 0 0 10px 10px;
  color: #fff;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

dl.standard > dd.active {
  border-bottom-width: 3px;
  border-top: none;
  line-height: 1.8;
  margin-bottom: 1em;
  padding-top: 1.3em;
  padding-bottom: 1.3em;
  color: #333;
}

#main .standard > dd > ul,
#main .standard > dd > ol {
  overflow: hidden;
  margin-bottom: 0;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

#main .standard > dd > ul > li,
#main .standard > dd > ol > li,
#main .standard > dd > ul > li > * > li,
#main .standard > dd > ol > li > * > li {
  margin-bottom: 0;
  line-height: 0;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

#main .standard > dd.active > ul > li,
#main .standard > dd.active > ol > li,
#main .standard > dd.active > ul > li > * > li,
#main .standard > dd.active > ol > li > * > li {
  margin-bottom: 5px;
  line-height: 1.5;
}

.ua-gecko #main .standard > dd > ul > li,
.ua-gecko #main .standard > dd > ol > li {
  font-size: 0;
}

.ua-gecko #main .standard > dd.active > ul > li,
.ua-gecko #main .standard > dd.active > ol > li {
  font-size: inherit;
}

#main .standard > dd li > ul,
#main .standard > dd li > ol {
  margin-top: 0;
}

#main .standard > dd.active > li > ul,
#main .standard > dd.active > li > ol {
  margin-top: 9px;
}

#main .standard > dd > h4,
#main .standard > dd > h5,
#main .standard > dd > p {
  margin-top: 0;
  margin-bottom: 0;
  line-height: 0;
  border-width: 0;
  padding: 0;
  overflow: hidden;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

#main .standard > dd.active > h4,
#main .standard > dd.active > h5,
#main .standard > dd.active > p {
  border-bottom-width: 1px;
  margin-bottom: 18px;
  line-height: 1.5;
}

#main .standard > dd > table,
#main .standard > dd > table > thead > tr > th,
#main .standard > dd > table > tbody > tr > th,
#main .standard > dd > table > tbody > tr > td {
  border-top-width: 0;
  border-bottom-width: 0;
  line-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: 0;
  overflow: hidden;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

#main .standard > dd.active > table,
#main .standard > dd.active > table > thead > tr > th,
#main .standard > dd.active > table > tbody > tr > th,
#main .standard > dd.active > table > tbody > tr > td {
  border-width: 1px;
  border-bottom-width: 1px;
  line-height: 1.5;
  padding: 5px;
  margin-bottom: 18px;
}

#main dl.standard > dd.active > table {
  margin-bottom: 18px;
  overflow: auto;
  padding: 0;
}

#main .standard > dd > dl,
#main .standard > dd > dl > dt,
#main .standard > dd > dl > dd {
  line-height: 0;
  margin-bottom: 0;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

#main .standard > dd.active > dl,
#main .standard > dd.active > dl > dt,
#main .standard > dd.active > dl > dd {
  line-height: 1.8;
}

.ua-gecko #main .standard > dd > dl,
.ua-gecko #main .standard > dd > dl > dt,
.ua-gecko #main .standard > dd > dl > dd {
  font-size: 0;
}

.ua-gecko #main .standard > dd.active > dl,
.ua-gecko #main .standard > dd.active > dl > dt,
.ua-gecko #main .standard > dd.active > dl > dd {
  font-size: inherit;
}

#main .standard > dd.active > dl > dt {
  margin-bottom: 0;
}

#main .standard > dd.active > dl,
#main .standard > dd.active > dl > dd {
  margin-bottom: 9px;
}

#main dl.standard > dd > dd sup,
#main dl.standard > dd.active > dd sup,
#main dl.standard > dd span {
  line-height: 0;
  vertical-align: bottom;
}

#main dl.standard dd.active sup,
#main dl.standard > dd.active span {
  line-height: 1;
  vertical-align: baseline;
}

#main dl.standard > dd > sup {
  font-size: 75%;
}

#main .standard > dd > figure {
  margin: 0;
  padding: 0;
  font-size: 0;
}

#main .standard > dd > figure img {
  width: auto;
  height: 0;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

#main .standard > dd.active > figure img {
  height: 100%;
}

@media only screen and (max-width: 639px) {
  dl.standard {
    font-size: 94%;
    margin-bottom: 18px;
  }
  dl.standard > dt {
    border-radius: 1.2em;
    padding: 0.3em 3em 0.3em 1em;
  }
  dl.standard.accordion > dt {
    position: relative;
    cursor: pointer;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
  }
  dl.standard.accordion > dt:before {
    width: 2em;
    height: 2em;
  }
  dl.standard.accordion > dt:after {
    right: 1.2em;
    border: transparent 0.5em solid;
    border-bottom: none;
    border-top: #bbb 0.8em solid;
  }
  dl.standard > dd {
    margin: 0 1em;
    padding: 0 0.8em;
    border-radius: 0 0 10px 10px;
    color: #fff;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
  }
  dl.standard > dd.active {
    padding-top: 0.5em;
    padding-bottom: 0.5em;
  }
}
dl.simple {
  font-size: 94%;
  margin-bottom: 18px;
}

dl.simple > dt {
  line-height: 1.8;
  display: inline-block;
}

dl.simple.accordion > dt {
  position: relative;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  padding-left: 2.2em;
}

dl.simple.accordion > dt:before {
  content: "+";
  position: absolute;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  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;
  top: 50%;
  left: 2px;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  text-align: center;
  width: 1.5em;
  height: 1.5em;
  background: #fff;
  border: #666 1px solid;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

dl.simple.accordion > dt.active:before {
  content: "-";
}

dl.simple > dd {
  border: #bbb 1px solid;
  border-top: none;
  border-right: none;
  overflow: hidden;
  line-height: 0;
  border-top-width: 0;
  border-bottom-width: 0;
  margin: 0 0.8em;
  padding: 0 0.5em 0 1.3em;
  border-radius: 0 0 0 10px;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

dl.simple > dd.active {
  border-bottom-width: 1px;
  border-top: none;
  line-height: 1.8;
  margin-bottom: 1em;
  padding-top: 5px;
  padding-bottom: 10px;
  color: #333;
}

#main .simple > dd ul,
#main .simple > dd ol {
  overflow: hidden;
  margin-bottom: 0;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

#main .simple > dd ul li,
#main .simple > dd ol li {
  margin-bottom: 0;
  line-height: 0;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

#main .simple > dd.active ul li,
#main .simple > dd.active ol li {
  margin-bottom: 5px;
  line-height: 1.5;
}

.ua-gecko #main .simple > dd ul li,
.ua-gecko #main .simple > dd ol li {
  font-size: 0;
}

.ua-gecko #main .simple > dd.active ul li,
.ua-gecko #main .simple > dd.active ol li {
  font-size: inherit;
}

#main .simple > dd h4,
#main .simple > dd p {
  margin-top: 0;
  margin-bottom: 0;
  line-height: 0;
  border-width: 0;
  padding: 0;
  overflow: hidden;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

#main .simple > dd.active h4,
#main .simple > dd.active p {
  border-bottom-width: 1px;
  margin-bottom: 18px;
  line-height: 1.5;
}

#main .simple > dd a {
  line-height: 0;
}

#main .simple > dd.active a {
  line-height: inherit;
}

#main .simple > dd table,
#main .simple > dd th,
#main .simple > dd td {
  border-top-width: 0;
  border-bottom-width: 0;
  line-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin: 0;
  overflow: hidden;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

#main .simple > dd.active table,
#main .simple > dd.active th,
#main .simple > dd.active td {
  border-width: 1px;
  border-bottom-width: 1px;
  line-height: 1.5;
  padding: 5px;
  margin-bottom: 18px;
}

#main dl.simple > dd.active table {
  margin-bottom: 18px;
  overflow: auto;
  padding: 0;
}

#main .simple > dd dl,
#main .simple > dd dt,
#main .simple > dd dd {
  line-height: 0;
  margin: 0;
  overflow: hidden;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

#main .simple > dd.active dl,
#main .simple > dd.active dt,
#main .simple > dd.active dd {
  line-height: 1.5;
  margin-bottom: 9px;
}

#main dl.simple > dd span {
  line-height: 0;
  display: block;
}

#main dl.simple > dd.active span {
  line-height: inherit;
}

#main dl.simple > dd ol {
  margin-top: 0;
}

#main dl.simple > dd.active ol {
  margin-top: 9px;
}

.mailmagaginebox {
  height: 20em;
  overflow: auto;
  border: #666 1px solid;
  padding: 1em !important;
  font-size: 83.3%;
  margin-bottom: 18px;
}

.mailmagaginebox div,
div.kiyaku {
  padding: 0 !important;
}

.mailmagaginebox dl,
div.kiyaku dl {
  margin-bottom: 18px;
}

.mailmagaginebox dl dt,
div.kiyaku dl dt {
  width: 4em;
  float: left;
}

.mailmagaginebox dl dd,
div.kiyaku dl dd {
  margin-left: 4.5em;
}

.mailmagaginebox dl dd ul,
.mailmagaginebox dl dd ol,
.mailmagaginebox dl dd li,
div.kiyaku dl dd ul,
div.kiyaku dl dd ol,
div.kiyaku dl dd li {
  margin: 0;
}

.mailmagaginebox dl dd li:before {
  color: #333;
}

nav#products ul {
  padding: 0;
  overflow: hidden;
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: auto 10px auto 10px auto 10px auto 10px auto;
  -ms-grid-columns: 1fr 10px 1fr;
      grid-template: "general triple" "general car" "fire traffic" "life pension" "vehicle ." auto/1fr 1fr;
  gap: 10px;
}
nav#products ul .general {
  -ms-grid-row: 1;
  -ms-grid-row-span: 3;
  -ms-grid-column: 1;
  grid-area: general;
}
nav#products ul .balance {
  grid-area: balance;
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: auto 10px auto;
  -ms-grid-columns: auto;
      grid-template: "triple" "car" auto/auto;
  gap: 10px;
}
nav#products ul .triple {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
  grid-area: triple;
}
nav#products ul .car {
  -ms-grid-row: 3;
  -ms-grid-column: 3;
  grid-area: car;
}
nav#products ul .fire {
  -ms-grid-row: 5;
  -ms-grid-column: 1;
  grid-area: fire;
}
nav#products ul .traffic {
  -ms-grid-row: 5;
  -ms-grid-column: 3;
  grid-area: traffic;
}
nav#products ul .life {
  -ms-grid-row: 7;
  -ms-grid-column: 1;
  grid-area: life;
}
nav#products ul .pension {
  -ms-grid-row: 7;
  -ms-grid-column: 3;
  grid-area: pension;
}
nav#products ul .vehicle {
  -ms-grid-row: 9;
  -ms-grid-column: 1;
  grid-area: vehicle;
}

nav#products > ul > li,
nav#products > ul > li > div {
  border: #1D7EC2 2px solid;
  padding: 10px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
}

nav#products > ul > li {
  margin-bottom: 0;
  display: -ms-grid;
  display: grid;
}

nav#products li.balance {
  border: none;
  padding: 0;
}

nav#products > ul > li > div:last-child {
  margin-bottom: 0;
}

nav#products li:before {
  content: none;
}

nav#products .text {
  -ms-grid-row: 2;
  -ms-grid-column: 2;
  padding: 10px;
  border: none;
  grid-area: text;
}

nav#products h3 figure {
  text-align: center;
  margin: 0 0 18px;
  padding: 0 5% 0 10%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

nav#products .vehicle h3 figure {
  padding: 0 20%;
}

nav#products h3 figure img {
  vertical-align: bottom;
}

nav#products figure.amrin {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  grid-area: amrin;
  margin: 0 auto;
}

nav#products .triple figure.amrin {
  max-width: 320px;
}

nav#products .traffic figure.amrin {
  max-width: 320px;
}

nav#products .fire figure.amrin {
  max-width: 160px;
}

nav#products .pension figure.amrin {
  max-width: 160px;
}

nav#products .life figure.amrin {
  max-width: 160px;
}

nav#products .car figure.amrin {
  max-width: 210px;
}

nav#products .more {
  display: none;
}

nav#products p {
  text-align: center;
  color: #1d7ec2;
  font-size: 100%;
  line-height: 1.5;
  margin: 0;
}

nav#products p strong {
  font-size: 150%;
}

nav#products p.balloon {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  width: 7em;
  height: 7em;
  text-align: center;
  color: #fff;
  padding: 2.5em 0 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: #1D7EC2;
  border-radius: 70px;
  font-size: 120%;
  grid-area: balloon;
}

nav#products p.balloon strong {
  color: #fff;
  font-size: 130%;
  display: block;
  line-height: 1;
}

nav#products .general p.balloon {
  width: 200px;
  height: 100px;
  margin-inline: auto;
  background: #1D7EC2;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0.5em 0 0;
  text-align: center;
  color: #fff;
  font-size: 150%;
  border-radius: 0 0 100px 100px;
}

nav#products .general p.balloon strong {
  color: #fff;
  font-size: 130%;
  display: block;
  line-height: 1;
}

nav#products .general {
  -ms-grid-rows: -webkit-max-content -webkit-max-content 1fr;
  -ms-grid-rows: max-content max-content 1fr;
  -ms-grid-columns: 1fr;
      grid-template: "balloon" -webkit-max-content "text" -webkit-max-content "amrin" 1fr/1fr;
      grid-template: "balloon" max-content "text" max-content "amrin" 1fr/1fr;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
  padding-block: 0;
}

nav#products .triple {
  -ms-grid-rows: -webkit-max-content 1fr;
  -ms-grid-rows: max-content 1fr;
  -ms-grid-columns: auto 1fr;
      grid-template: "balloon text" -webkit-max-content "balloon amrin" 1fr/auto 1fr;
      grid-template: "balloon text" max-content "balloon amrin" 1fr/auto 1fr;
}

nav#products .traffic {
  -ms-grid-rows: -webkit-max-content 1fr;
  -ms-grid-rows: max-content 1fr;
  -ms-grid-columns: auto 1fr;
      grid-template: "balloon text" -webkit-max-content "balloon amrin" 1fr/auto 1fr;
      grid-template: "balloon text" max-content "balloon amrin" 1fr/auto 1fr;
}

nav#products .fire {
  -ms-grid-rows: -webkit-max-content 1fr;
  -ms-grid-rows: max-content 1fr;
  -ms-grid-columns: auto 1fr;
      grid-template: "balloon text" -webkit-max-content "amrin text" 1fr/auto 1fr;
      grid-template: "balloon text" max-content "amrin text" 1fr/auto 1fr;
}

nav#products .pension {
  -ms-grid-rows: -webkit-max-content 1fr;
  -ms-grid-rows: max-content 1fr;
  -ms-grid-columns: auto 1fr;
      grid-template: "balloon text" -webkit-max-content "amrin amrin" 1fr/auto 1fr;
      grid-template: "balloon text" max-content "amrin amrin" 1fr/auto 1fr;
}

nav#products .life {
  -ms-grid-rows: -webkit-max-content 1fr;
  -ms-grid-rows: max-content 1fr;
  -ms-grid-columns: auto 1fr;
      grid-template: "balloon text" -webkit-max-content "amrin amrin" 1fr/auto 1fr;
      grid-template: "balloon text" max-content "amrin amrin" 1fr/auto 1fr;
}

nav#products .car {
  -ms-grid-rows: -webkit-max-content 1fr;
  -ms-grid-rows: max-content 1fr;
  -ms-grid-columns: auto 1fr;
      grid-template: "balloon text" -webkit-max-content "amrin amrin" 1fr/auto 1fr;
      grid-template: "balloon text" max-content "amrin amrin" 1fr/auto 1fr;
}

nav#products .vehicle {
  -ms-grid-rows: -webkit-max-content;
  -ms-grid-rows: max-content;
  -ms-grid-columns: auto 1fr;
      grid-template: "balloon text" max-content/auto 1fr;
}

nav#products .general h3 figure {
  padding: 0;
}

nav#products .life p.balloon {
  padding-top: 1.5em;
}

@media only screen and (max-width: 979px) {
  nav#products > ul > li {
    -ms-grid-rows: -webkit-max-content 1fr;
    -ms-grid-rows: max-content 1fr;
    -ms-grid-columns: auto 1fr;
        grid-template: "balloon text" -webkit-max-content "amrin amrin" 1fr/auto 1fr;
        grid-template: "balloon text" max-content "amrin amrin" 1fr/auto 1fr;
  }
  nav#products > ul > li > p {
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    -ms-grid-column: 2;
  }
  nav#products > ul > li > .text {
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    -ms-grid-column: 2;
  }
  nav#products > ul > li > figure.amrin {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
  }
  nav#products > ul > li > p.balloon {
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
  }
}
@media only screen and (max-width: 767px) {
  #main nav#products > ul {
    -ms-grid-rows: auto 10px auto 10px auto 10px auto 10px auto 10px auto 10px auto 10px auto;
    -ms-grid-columns: 1fr;
        grid-template: "general" "triple" "car" "fire" "traffic" "life" "pension" "vehicle" auto/1fr;
    gap: 10px;
  }
  #main nav#products > ul > li,
  #main nav#products > ul > li > div {
    padding: 0;
  }
  #main nav#products li.balance {
    padding: 0;
  }
  #main nav#products > ul > li {
    padding: 10px 20px 10px 0px;
    gap: 20px;
    -ms-grid-rows: -webkit-max-content 20px 1fr;
    -ms-grid-rows: max-content 20px 1fr;
    -ms-grid-columns: auto 20px 1fr;
        grid-template: "balloon text" -webkit-max-content "balloon amrin" 1fr/auto 1fr;
        grid-template: "balloon text" max-content "balloon amrin" 1fr/auto 1fr;
  }
  nav#products > ul > li:nth-child(2n),
  nav#products > ul > li:nth-child(2n-1) {
    float: none;
    width: 100%;
  }
  nav#products h3 figure {
    padding: 0;
  }
  nav#products p {
    padding-left: 0;
  }
  nav#products p strong {
    font-size: 130%;
  }
  nav#products .general figure.amrin,
  nav#products .triple figure.amrin,
  nav#products .traffic figure.amrin,
  nav#products .fire figure.amrin,
  nav#products .pension figure.amrin,
  nav#products .life figure.amrin,
  nav#products .car figure.amrin {
    max-width: 100% !important;
    max-height: 150px;
  }
  nav#products .general figure.amrin img,
  nav#products .triple figure.amrin img,
  nav#products .traffic figure.amrin img,
  nav#products .fire figure.amrin img,
  nav#products .pension figure.amrin img,
  nav#products .life figure.amrin img,
  nav#products .car figure.amrin img {
    height: 100%;
    max-height: 150px;
  }
  nav#products .general p.balloon,
  nav#products .life p.balloon,
  nav#products p.balloon {
    bottom: 10px;
    width: auto;
    height: 100%;
    margin: 0;
    color: #fff;
    padding: 0.8em 0.5em;
    text-align: left;
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    -webkit-transform: none;
        -ms-transform: none;
            transform: none;
    border-radius: 0 6px 6px 0;
    font-size: 115%;
    line-height: 20px;
  }
  nav#products p.balloon strong {
    font-size: 120%;
    line-height: 1.2;
    display: inline !important;
  }
  nav#products p.balloon br {
    display: none;
  }
  #main nav#products > ul > li > p {
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    -ms-grid-column: 3;
  }
  #main nav#products > ul > .general {
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
  }
  #main nav#products > ul > .triple {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
  }
  #main nav#products > ul > .car {
    -ms-grid-row: 5;
    -ms-grid-column: 1;
  }
  #main nav#products > ul > .fire {
    -ms-grid-row: 7;
    -ms-grid-column: 1;
  }
  #main nav#products > ul > .traffic {
    -ms-grid-row: 9;
    -ms-grid-column: 1;
  }
  #main nav#products > ul > .life {
    -ms-grid-row: 11;
    -ms-grid-column: 1;
  }
  #main nav#products > ul > .pension {
    -ms-grid-row: 13;
    -ms-grid-column: 1;
  }
  #main nav#products > ul > .vehicle {
    -ms-grid-row: 15;
    -ms-grid-column: 1;
  }
  #main nav#products > ul > li > .text {
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    -ms-grid-column: 3;
  }
  #main nav#products > ul > li > figure.amrin {
    -ms-grid-row: 3;
    -ms-grid-column: 3;
    -ms-grid-column-span: 1;
  }
  #main nav#products > ul > li > p.balloon {
    -ms-grid-row: 1;
    -ms-grid-row-span: 3;
    -ms-grid-column: 1;
  }
}
@media only screen and (max-width: 399px) {
  #main nav#products > ul > li,
  #main nav#products > ul > li > div {
    position: relative;
  }
  nav#products .general figure.amrin,
  nav#products .triple figure.amrin,
  nav#products .traffic figure.amrin,
  nav#products .fire figure.amrin,
  nav#products .pension figure.amrin,
  nav#products .life figure.amrin,
  nav#products .car figure.amrin {
    max-height: 120px;
  }
  nav#products .general figure.amrin img,
  nav#products .triple figure.amrin img,
  nav#products .traffic figure.amrin img,
  nav#products .fire figure.amrin img,
  nav#products .pension figure.amrin img,
  nav#products .life figure.amrin img,
  nav#products .car figure.amrin img {
    max-height: 120px;
  }
}
#detail.general .unit#baisho {
  counter-reset: numbering 0;
}

#detail.general .unit#jukyo {
  counter-reset: numbering 2;
}

#detail.general .unit#karada {
  counter-reset: numbering 5;
}

#detail.general .unit#other {
  counter-reset: numbering 10;
}

#detail.general .unit h4 {
  position: relative;
  padding: 5px 0 5px 50px;
}

#detail.general .unit h4:before {
  counter-increment: numbering;
  content: counter(numbering);
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 40px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: #004098;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  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;
  font-size: 94%;
  color: #fff;
}

body.products.general table tbody th {
  vertical-align: top;
}

body.products.general table tbody tr:first-child th:first-child {
  width: 50%;
}

body.products.general table tbody td:last-child {
  width: 30%;
}

body.products.general table.tablebreaker.breaking tbody tr:first-child th:first-child {
  width: 100%;
}

body.products.general table.tablebreaker.breaking tbody td:last-child {
  width: 100%;
}

.detail .support {
  font-weight: bold;
  font-size: 120%;
  margin-bottom: 9px;
}

.detail .support span {
  font-weight: inherit;
  color: inherit;
  font-size: 83.3%;
}

@media only screen and (max-width: 639px) {
  .detail p {
    text-align: left;
  }
  .detail .support {
    width: 100%;
    padding: 0 1em;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
}
@media only screen and (max-width: 399px) {
  .detail .support {
    padding: 0.2em 0.8em;
    font-size: 100%;
  }
}
body.case #main .unit {
  overflow: hidden;
}

body.case #main tbody th {
  width: 20%;
  white-space: nowrap;
}

@media only screen and (max-width: 639px) {
  body.case #main tbody th {
    width: auto;
    white-space: normal;
  }
  body.case #main tbody th[nowrap] {
    white-space: nowrap;
  }
}
.enjoybox li {
  background: #ddd;
  padding: 20px;
}

.enjoybox li img {
  margin-bottom: 18px;
}

#main .enjoybox li figcaption {
  font-size: 140%;
  line-height: 1.3;
}

#main .newcolumnlist li {
  border: #1D7EC2 1px solid;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

#main .newcolumnlist figure {
  margin: 0;
  background: #ccc;
}

.newcolumnlist figure img {
  vertical-align: bottom;
  width: 100%;
  display: block;
  height: 200px;
}

.newcolumnlist .text {
  background: #fff;
  padding: 10px 10px 50px;
}

.newcolumnlist .text .date {
  margin-bottom: 0;
}

#main .newcolumnlist .text h4 {
  margin: 0;
  padding: 0;
  border: none;
  font-weight: bold;
  color: #1D7EC2;
  max-height: auto;
}

.newcolumnlist .text .series {
  font-weight: bold;
  color: #bc1dc2;
  margin-bottom: 5px;
  max-height: auto;
}

.newcolumnlist .text p {
  font-size: 75%;
  line-height: 1.8;
  max-height: 3.6em;
  overflow: hidden;
  margin-bottom: 0;
}

.newcolumnlist .text .category,
.newcolumnlist .text .far,
.newcolumnlist .text .fa {
  position: absolute;
  bottom: 10px;
}

.newcolumnlist .text .category {
  color: #1D7EC2;
  margin-bottom: 0;
  line-height: 1;
}

.newcolumnlist .text .far,
.newcolumnlist .text .fa {
  right: 10px;
  line-height: 1;
  font-size: 30px;
}

.text .fa-desktop {
  color: #1D7EC2;
}

.newcolumnlist .text .more a {
  display: none;
}

#catNav {
  padding: 30px 0 0;
}

#catNav li {
  border: #1D7EC2 2px solid;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: #fff;
  position: relative;
  padding-bottom: 1.5em;
  font-size: 120%;
}

#catNav li img {
  max-width: 100px;
  max-height: 100px;
  display: block;
  margin: 0 auto;
  padding: 10px;
}

#catNav li figcaption {
  padding: 0 10px;
}

#catNav .more {
  padding: 0;
  margin: 0;
}

#catNav .more a {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  text-align: center;
  padding: 0.5em 0;
  background: #1D7EC2;
  color: #fff;
  line-height: 1;
}

@media only screen and (max-width: 979px) {
  #catNav li {
    font-size: 105%;
  }
}
@media only screen and (max-width: 399px) {
  #catNav li {
    font-size: 83.3%;
  }
  #catNav li img {
    max-width: 60px;
    max-height: 60px;
  }
}
#smallcatNav {
  padding: 30px 0 0;
}

#smallcatNav li img {
  max-width: 2em;
  max-height: 2em;
  margin-right: 0.3em;
  vertical-align: middle;
}

#smallcatNav li img.white {
  display: none;
}

#smallcatNav li.current img.blue {
  display: none;
}

#smallcatNav li.current img.white {
  display: inline;
}

#smallcatNav .more {
  padding: 0;
  margin: 0;
}

#smallcatNav .more a {
  display: block;
  text-align: center;
  padding: 0.5em 0;
  background: #fff;
  border: #016bb7 2px solid;
  border-radius: 10px;
  color: #016bb7;
  line-height: 1;
  font-size: 110%;
}

#smallcatNav .current .more a {
  background: #1D7EC2;
  color: #fff;
  cursor: default;
}

#smallcatNav .more a:before,
#smallcatNav .more a:after {
  display: none;
}

@media only screen and (max-width: 979px) {
  #smallcatNav li {
    font-size: 83.3%;
  }
  #smallcatNav li img {
    max-width: 1.8em;
    max-height: 1.8em;
  }
}
@media only screen and (max-width: 399px) {
  #smallcatNav li {
    font-size: 83.3%;
  }
  #smallcatNav li img {
    max-width: 1.5em;
    max-height: 1.5em;
  }
}
#serNav li {
  border: none;
  padding: 0;
}

#serNav a {
  border: #016bb7 2px solid;
  background: #fff;
  border-radius: 10px;
  padding: 5px 15px;
  line-height: 1.5;
  min-height: 4.5em;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-align-items: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-decoration: none;
  color: #016bb7;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

#serNav a.current {
  border: #016bb7 2px solid;
  background: #016bb7;
  color: #fff;
}

#smallserNav {
  margin-bottom: 0;
}

#smallserNav li {
  border: none;
  padding: 0;
  margin-bottom: 5px !important;
}

#smallserNav a {
  border: #016bb7 1px solid;
  background: #fff;
  border-radius: 10px;
  padding: 5px 15px;
  line-height: 1.5;
  display: block;
  text-decoration: none;
  color: #016bb7;
  font-size: 83.3%;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

#smallserNav a.current {
  border: #016bb7 2px solid;
  background: #016bb7;
  color: #fff;
}

#unitNav {
  padding: 20px 0 18px;
  text-align: center;
  clear: both;
}

#unitNav a {
  display: inline-block;
  font-size: 94%;
  padding: 5px 10px;
  margin: 0 5px;
  position: relative;
  text-decoration: none;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  cursor: pointer;
  border: #016bb7 1px solid;
  color: #016bb7;
  background: #fff;
}

#unitNav a:hover {
  background: #d5effe;
}

#unitNav a.current,
#unitNav a.current:hover {
  color: #fff;
  background: #016bb7;
  cursor: default;
}

#unitNav a.prev {
  padding-left: 30px;
}

#unitNav a.next {
  padding-right: 30px;
}

#unitNav a.prev:before,
#unitNav a.prev:after,
#unitNav a.next:before,
#unitNav a.next:after {
  content: "";
  position: absolute;
  width: 2px;
  height: 0.6em;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  background: #016bb7;
}

#unitNav a.prev:before,
#unitNav a.prev:after {
  left: 15px;
}

#unitNav a.next:before,
#unitNav a.next:after {
  right: 15px;
}

#unitNav a.prev:hover:before,
#unitNav a.prev:hover:after {
  left: 10px;
}

#unitNav a.next:hover:before,
#unitNav a.next:hover:after {
  right: 10px;
}

#unitNav a.prev:before,
#unitNav a.next:before {
  bottom: 50%;
}

#unitNav a.prev:after,
#unitNav a.next:after {
  top: 50%;
}

#unitNav a.prev:after,
#unitNav a.next:before {
  -webkit-transform: skewX(45deg);
      -ms-transform: skewX(45deg);
          transform: skewX(45deg);
}

#unitNav a.prev:before,
#unitNav a.next:after {
  -webkit-transform: skewX(-45deg);
      -ms-transform: skewX(-45deg);
          transform: skewX(-45deg);
}

#unit:last-child .unitNav .prev,
#unit:first-child .unitNav .next {
  display: none;
}

body.column .unit.teaser p {
  font-size: 130%;
}

.author > div {
  overflow: hidden;
}

#main.standard .author h3 {
  display: block;
}

#main .author figure {
  width: 200px;
  float: left;
}

.author section {
  width: calc(100% - 210px);
  float: right;
}

@media only screen and (max-width: 639px) {
  #main .author figure,
  .author section {
    width: 100%;
    float: none;
  }
}
.columnlist h3 {
  border-bottom: #1D7EC2 3px dotted;
  width: 100%;
  font-weight: bold;
}

.columnlist h3:before {
  display: inline-block;
  width: 2.5em;
  margin-right: 0.5em;
}

#class-column-list h3:before {
  content: url(../../enjoy/column/img/class.svg);
}

#health-column-list h3:before {
  content: url(../../enjoy/column/img/health.svg);
}

#work-column-list h3:before {
  content: url(../../enjoy/column/img/work.svg);
}

#recommend-column-list h3:before {
  content: url(../../enjoy/column/img/recommend.svg);
}

.columnlist li {
  border: #1D7EC2 2px solid;
  padding: 3.8em 10px 15px;
  position: relative;
}

#main .columnlist li:before,
#main .columnlist li:after {
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
}

#main .columnlist li:before {
  width: 100%;
  height: 30px;
  display: block;
  background: #1D7EC2;
  font-size: 100%;
  width: 170px;
  padding: 0.3em 5px 0.3em 3em;
  border-radius: 0 0 10px 0;
}

#main .columnlist li:after {
  width: 2em;
  height: 2em;
  vertical-align: middle;
  padding: 0.2em;
}

#main .columnlist li.class-column:before {
  content: "授業に役立つヒント";
}

#main .columnlist li.class-column:after {
  content: url(../../enjoy/column/img/class_white.svg);
}

#main .columnlist li.health-column:before {
  content: "暮らしと健康";
}

#main .columnlist li.health-column:after {
  content: url(../../enjoy/column/img/health_white.svg);
}

#main .columnlist li.work-column:before {
  content: "育児・介護・働き方";
}

#main .columnlist li.work-column:after {
  content: url(../../enjoy/column/img/work_white.svg);
}

#main .columnlist li.recommend-column:before {
  content: "教職員共済のおすすめ";
}

#main .columnlist li.recommend-column:after {
  content: url(../../enjoy/column/img/recommend_white.svg);
}

#main .columnlist li figure {
  width: 120px;
  float: left;
  text-align: center;
}

#main .columnlist li figure img {
  max-height: 90px;
}

#main .columnlist .text {
  width: calc(100% - 130px);
  float: right;
  padding: 0;
}

#main .columnlist .text h4 {
  padding: 0;
  margin: 0 0 9px;
  border: none;
  font-size: 110%;
  font-weight: bold;
  color: #1D7EC2;
}

.columnlist .text .series {
  font-size: 94%;
  color: #bc1dc2;
  margin-bottom: 0;
}

.columnlist .text p {
  font-size: 94%;
  margin-bottom: 0;
  max-height: 7.2em;
  overflow: hidden;
}

.columnlist .text .date,
.columnlist .text .more {
  position: absolute;
  top: 0;
}

.columnlist .text .more {
  left: 220px;
  font-size: 100%;
  padding: 5px 0;
}

.columnlist .text .more .far,
.columnlist .text .more .fa {
  width: 1.5em;
  text-align: center;
  display: block;
  font-size: 200%;
  vertical-align: middle;
  padding: 0 0.2em 0.2em 0.2em;
}

.columnlist .text .more a {
  display: none;
}

.columnlist .text .date {
  right: 0;
  padding: 10px 10px 0 0;
}

#new-column-list .btn a {
  padding-bottom: 20px;
}

#new-column-list .btn a:before,
#new-column-list .btn a:after {
  content: "";
  width: 13px;
  height: 2px;
  background: #177ecb;
  position: absolute;
  top: auto;
  left: 50%;
  bottom: 13%;
  right: auto;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

#new-column-list .btn a:before {
  -webkit-transform: translateX(-100%) rotate(45deg);
      -ms-transform: translateX(-100%) rotate(45deg);
          transform: translateX(-100%) rotate(45deg);
  -webkit-transform-origin: bottom right;
      -ms-transform-origin: bottom right;
          transform-origin: bottom right;
}

#new-column-list .btn a:after {
  -webkit-transform: translateX(0%) rotate(-45deg);
      -ms-transform: translateX(0%) rotate(-45deg);
          transform: translateX(0%) rotate(-45deg);
  -webkit-transform-origin: bottom left;
      -ms-transform-origin: bottom left;
          transform-origin: bottom left;
}

#new-column-list .btn a:hover {
  opacity: 0.6;
}

#new-column-list .btn a:focus {
  opacity: 0;
}

#new-column-list .btn a:hover:before,
#new-column-list .btn a:hover:after {
  bottom: 5%;
}

@media only screen and (max-width: 399px) {
  .columnlist h3:before {
    width: 1.5em;
    margin-right: 0.3em;
  }
  .columnlist li {
    border-width: 1px;
    padding: 2.8em 10px 10px;
    margin-bottom: 9px !important;
  }
  #main .columnlist li:before {
    width: 100%;
    height: 20px;
    font-size: 83.3%;
    width: 110px;
    padding-left: 2.5em;
    border-radius: 0 0 5px 0;
  }
  #main .columnlist li:after {
    width: 1.2em;
    height: 1.2em;
    padding: 0.4em;
  }
  #main .columnlist li figure {
    width: 100%;
    float: none;
    margin-bottom: 9px;
  }
  #main .columnlist .text {
    width: 100%;
    float: none;
    padding: 0;
  }
  .columnlist .text .series {
    margin-bottom: 4px;
  }
  .columnlist .text p {
    max-height: 5.4em;
    font-size: 83.3%;
  }
  .columnlist .text .more {
    left: 142px;
    font-size: 66%;
    padding: 4px 0;
  }
  .columnlist .text .date {
    right: 0;
    padding-top: 5px;
  }
}
body.column #main table img {
  max-width: 100%;
  width: auto;
}

body.column #main a {
  word-break: break-all;
}

.publishtop > li {
  width: 48%;
  width: calc(50% - 10px);
  margin: 0 0 20px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: #016BB7 2px solid;
  padding: 20px;
}

.publishtop li:before {
  content: none;
}

#main .publishtop li h3 {
  margin-bottom: 9px;
  color: #016BB7;
}

.publishtop li p {
  text-align: center;
}

.publishtop li img {
  max-width: 100%;
}

#main .publishtop li .btn {
  margin-bottom: 9px;
}

#main .btn i {
  font-size: 150%;
  margin-right: 0.2em;
}

.publishtop .title {
  background: #016BB7;
  padding-bottom: 0;
  border: 0;
  position: relative;
}

#main .publishtop li.title h3 {
  margin: 90px 0 300px;
}

#main .publishtop li.title figure {
  margin: 0;
  padding: 0 20px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: absolute;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
}

.letter .body {
  position: relative;
  margin-bottom: 28px;
}

#main .letter .body figure {
  padding-right: 10em;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.letter .body figure img {
  -webkit-transform: rotate(-10deg);
      -ms-transform: rotate(-10deg);
          transform: rotate(-10deg);
  -webkit-box-shadow: 1px 3px 4px rgb(51, 51, 51);
          box-shadow: 1px 3px 4px rgb(51, 51, 51);
}

.letter .body p {
  position: absolute;
  right: 30px;
  top: 50%;
  background: #016bb7;
  color: #fff;
  width: 6em;
  -webkit-transform: translateY(-50%) rotate(5deg);
      -ms-transform: translateY(-50%) rotate(5deg);
          transform: translateY(-50%) rotate(5deg);
  text-align: center;
  font-size: 200%;
  line-height: 1;
  font-weight: bold;
  padding: 0.5em 0;
  border-radius: 30px;
}

.letter .body p span {
  font-size: 75%;
  color: inherit;
}

.letter .body p:before {
  position: absolute;
  content: "NEW";
  left: 0.5em;
  top: -0.5em;
  background: #f39801;
  color: #fff;
  -webkit-transform: translateY(-50%) rotate(-10deg);
      -ms-transform: translateY(-50%) rotate(-10deg);
          transform: translateY(-50%) rotate(-10deg);
  text-align: center;
  font-size: 60%;
  line-height: 1;
  font-weight: bold;
  padding: 0.5em 1em;
  border-radius: 30px;
}

.letter .body p span:before {
  white-space: pre;
  content: "\a";
}

#main .publishtop .pazzle figure,
#main .publishtop .across figure {
  width: 50%;
  margin: 0 auto 18px;
}

.publishtop .pazzle li:first-child {
  display: none;
}

.publishtop .pazzle li {
  padding-left: 25px;
  margin-bottom: 5px;
  position: relative;
  line-height: 1.3;
}

.publishtop .pazzle li:before,
.publishtop .pazzle li:after {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  top: 0.7em;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  border: transparent 5px solid;
  border-right: none;
  border-left: #00A0E9 7px solid;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

.publishtop .pazzle li:before {
  left: 5px;
}

.publishtop .pazzle li:after {
  left: 12px;
}

.publishtop .pazzle li:hover:before {
  left: 8px;
}

.publishtop .pazzle li:hover:after {
  left: 15px;
}

.publishtop .pazzle li a {
  color: #00A0E9;
}

@media only screen and (max-width: 399px) {
  #main .publishtop li.title h3 {
    margin: 30px 0 30px;
  }
  #main .publishtop li.title figure {
    position: static;
    -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
            transform: translateX(0);
  }
  .letter .body {
    margin-bottom: 0;
  }
  #main .letter .body figure {
    margin-bottom: 0;
  }
  .letter .body p {
    right: 0;
    top: 40%;
    font-size: 160%;
  }
  #main .publishtop .pazzle figure,
  #main .publishtop .across figure {
    width: 80%;
  }
}
.pazzle .q {
  position: relative;
}
.pazzle .q img {
  width: 356px;
}
@media only screen and (max-width: 400px) {
  .pazzle .q img {
    width: 264px !important;
  }
}
.pazzle .q .pazzleinput {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
}
.pazzle .q .pazzleinput {
  padding: 0;
  zoom: 1;
}
.pazzle .q .pazzleinput:before, .pazzle .q .pazzleinput:after {
  content: "";
  display: table;
}
.pazzle .q .pazzleinput:after {
  clear: both;
}
.pazzle .q .pazzleinput {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -moz-justify-content: flex-start;
  -ms-justify-content: flex-start;
  -webkit-box-pack: start;
          justify-content: flex-start;
  -ms-flex-pack: flex-start;
}
.pazzle .q .pazzleinput > * {
  float: left;
  margin: 0 0 0 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.pazzle .q .pazzleinput > li:before {
  content: none;
}
@media only screen and (min-width: 769px) {
  .pazzle .q .pazzleinput > * {
    width: calc(100% / 8);
  }
  .pazzle .q .pazzleinput > *:nth-of-type(8n) {
    margin-right: 0;
  }
}
@media only screen and (min-width: 641px) and (max-width: 768px) {
  .pazzle .q .pazzleinput > * {
    width: calc(100% / 8);
  }
  .pazzle .q .pazzleinput > *:nth-of-type(8n) {
    margin-right: 0;
  }
}
@media only screen and (min-width: 401px) and (max-width: 640px) {
  .pazzle .q .pazzleinput > * {
    width: calc(100% / 8);
  }
  .pazzle .q .pazzleinput > *:nth-of-type(8n) {
    margin-right: 0;
  }
}
@media only screen and (max-width: 400px) {
  .pazzle .q .pazzleinput > * {
    width: calc(100% / 8);
  }
  .pazzle .q .pazzleinput > *:nth-of-type(8n) {
    margin-right: 0;
  }
}
@media only screen and (max-width: 768px) {
  .pazzle .q .pazzleinput {
    padding: 18px 9px !important;
  }
}
@media only screen and (max-width: 400px) {
  .pazzle .q .pazzleinput {
    width: 264px !important;
    margin: auto;
  }
}
.pazzle .q .pazzleinput li {
  margin-bottom: 0;
  height: 44.5px;
}
@media only screen and (max-width: 768px) {
  .pazzle .q .pazzleinput li {
    height: 42.25px;
  }
}
@media only screen and (max-width: 400px) {
  .pazzle .q .pazzleinput li {
    height: 33px;
  }
}
.pazzle .q .pazzleinput li:before {
  content: none;
}
.pazzle .q .pazzleinput li input {
  -webkit-appearance: none;
  border-radius: 0;
  background: transparent;
  display: block;
  width: 100%;
  height: 100%;
  padding-left: 0;
  padding-right: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: none;
  text-align: center;
  font-size: 1.6923076923rem;
}
@media only screen and (max-width: 768px) {
  .pazzle .q .pazzleinput li input {
    font-size: 1.4615384615rem;
  }
}
@media only screen and (max-width: 400px) {
  .pazzle .q .pazzleinput li input {
    font-size: 1.2307692308rem;
  }
}
.pazzle .q .pazzleinput li input:focus {
  -webkit-box-shadow: #33bc3d 0 0 20px inset;
          box-shadow: #33bc3d 0 0 20px inset;
}
.pazzle .q .pazzleinput li input:hover {
  background: #33bc3d;
  opacity: 0.6;
}
.pazzle .q .pazzleinput li input:disabled:hover {
  background: transparent;
  opacity: 1;
}

.letterbox {
  overflow: hidden;
}

#main .letterbox figure {
  width: 158px;
  float: left;
  margin: 0 10px 0 0;
}

.letterbox img {
  vertical-align: bottom;
  margin-bottom: 9px;
}

.letterbox section {
  float: right;
  width: calc(100% - 180px);
}

.letterbox .name {
  font-size: 83.3%;
}

@media only screen and (max-width: 639px) {
  #main .letterbox figure,
  .letterbox section {
    float: none;
    width: 100%;
    margin: 0;
  }
}
.letterlist section {
  border: #016bb7 1px solid;
  background: #fff;
}

#main .letterlist h4 {
  border: none;
  background: #016bb7;
  color: #fff;
  padding: 5px 10px;
}

.letterlist section ul {
  padding: 0 10px;
}

.letterlist section li:before {
  content: none;
  width: 100%;
}

#main .letterlist section li a {
  width: 100%;
  padding: 5px 10px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

@media only screen and (max-width: 399px) {
  #main .letterlist h4 {
    margin-bottom: 5px;
  }
  .letterlist section ul {
    padding: 0 5px;
    margin-bottom: 5px;
  }
  .letterlist section li {
    margin-bottom: 2px;
  }
}
#main figure.pazzle,
#main div.pazzle-text-box,
#main .accordion figure.pazzle {
  display: block;
  max-width: 356px;
  margin: 0 auto 18px;
}

#main div.pazzle-text-box {
  border: #206e9e 1px solid;
  padding: 18px 0;
}
#main div.pazzle-text-box p {
  margin: 0;
  line-height: 1.3;
}

#main .accordion figure.pazzle {
  margin-bottom: 0;
  font-size: 0;
}

#main .accordion .active figure.pazzle {
  font-size: 100%;
}

#main .pazzlehint > li {
  margin-bottom: 0;
  padding: 1em;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-width: 3px;
  border-style: solid;
  border-radius: 5px;
}

.pazzlehint > li:before {
  content: none;
}

.pazzlehint .vartical {
  border-color: #0c8e75;
}

.pazzlehint .horizonal {
  border-color: #8e0c48;
}

#main .pazzlehint h4 {
  margin: -0.84em -0.84em 0.84em;
  padding: 10px 0 0.83em;
  font-size: 120%;
  text-align: center;
  border-bottom: none;
  color: #fff;
  font-weight: bold;
}

#main .pazzlehint .vartical h4 {
  background-color: #0c8e75;
}

#main .pazzlehint .horizonal h4 {
  background-color: #8e0c48;
}

.pazzlehint ol {
  padding-left: 2.5em;
}

.pazzlehint ol li {
  font-size: 110%;
  margin-bottom: 4px;
}

.pazzlehint li.empty {
  visibility: hidden;
  height: 0;
  margin-bottom: 0;
}

.standard > dd.active .pazzleAnswer {
  text-align: center;
  font-size: 200%;
}

#main dl.standard > dd .pazzleAnswer span {
  display: inline-block;
  border: #016BB7 2px solid;
  border-top-width: 0;
  border-bottom-width: 0;
  height: 0em;
  width: 1.5em;
  line-height: 0;
  margin-right: 0.2em;
  background: #fff;
  border-radius: 5px;
  font-weight: bold;
  color: #333;
}

#main dl.standard > dd.active .pazzleAnswer span {
  border-top-width: 2px;
  border-bottom-width: 2px;
  height: 1.5em;
  line-height: 1.5em;
}

.pazzleAnswer span:last-child {
  margin-right: 0;
}

#main .unit dl.standard > dd figcaption {
  line-height: 0;
}

#main .unit dl.standard > dd.active figcaption {
  line-height: 1.5em;
}

@media only screen and (max-width: 399px) {
  .pazzleAnswer {
    font-size: 150%;
  }
}
p.more {
  text-align: right;
  margin-bottom: 0;
  font-size: 100%;
}

p.more a {
  padding-right: 20px;
  position: relative;
  display: inline-block;
  text-decoration: none;
  color: #1d7ec2;
  cursor: pointer;
}

p.more a:before,
p.more a:after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 3px;
  height: 13px;
  background: #1d7ec2;
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
}

p.more a:before {
  -webkit-transform-origin: bottom right;
      -ms-transform-origin: bottom right;
          transform-origin: bottom right;
  -webkit-transform: translateY(-0.125em) translateY(-100%) rotate(-45deg);
      -ms-transform: translateY(-0.125em) translateY(-100%) rotate(-45deg);
          transform: translateY(-0.125em) translateY(-100%) rotate(-45deg);
}

p.more a:after {
  -webkit-transform-origin: top right;
      -ms-transform-origin: top right;
          transform-origin: top right;
  -webkit-transform: translateY(-0.125em) rotate(45deg);
      -ms-transform: translateY(-0.125em) rotate(45deg);
          transform: translateY(-0.125em) rotate(45deg);
}

@media only screen and (max-width: 979px) {
  p.more a:before,
  p.more a:after {
    width: 2px;
    height: 10px;
  }
}
.wallpaperbacknumber {
  display: -ms-grid;
  display: grid;
  grid-template: auto/repeat(auto-fill, minmax(180px, 1fr));
  grid-gap: 18px;
}

.wallpaperbacknumber li::before {
  display: none;
}

.wallpaperbacknumber a {
  display: block;
  width: 150px;
  height: 150px;
  margin: auto;
  background-position: 50% 50%;
  background-size: 150px;
  border-radius: 110px;
  font-size: 1%;
  text-indent: -9999px;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.wallpaperbacknumber a:hover {
  background-size: 200px;
}
@media only screen and (max-width: 639px) {
  .wallpaperbacknumber a {
    width: 120px;
    height: 120px;
    background-size: 120px;
    margin-bottom: 10px;
  }
}

#main article .unit .borderbox {
  border: #36ACDA 3px dotted;
  padding: 18px 18px 0;
  border-radius: 10px;
  margin-bottom: 18px;
}
#main article .unit .borderbox--black {
  border-color: #000;
}
#main article .unit .borderbox--solid {
  border-style: solid;
}
#main article .unit .borderbox--1px {
  border-width: 1px;
}

#main article .unit div.border {
  margin: 0 auto 18px;
  border: gray 1px solid;
  padding: 18px;
  overflow: visible;
  width: 75%;
  word-break: break-all;
}

#main article .unit .editorsnote {
  border: #666 2px solid;
  padding: 27px 18px 0;
  border-radius: 10px;
  margin: 27px 0 18px;
  position: relative;
}

#main article .unit .editorsnote:before {
  content: "編集後記";
  position: absolute;
  top: -0.9em;
  line-height: 1.8;
  background: #666;
  padding: 0 1.5em;
  font-size: 120%;
  border-radius: 2em;
  color: #fff;
}

a[href^="tel:"] {
  cursor: default;
  text-decoration: none;
}

.linklist .dlicon,
.linklist .pdficon {
  position: relative;
  padding-left: 11em;
}

.linklist .dlicon:before,
.linklist .pdficon:before {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-block;
  background: #016bb7;
  color: #fff;
  width: 10.5em;
  text-align: center;
  border-radius: 1em;
  height: 1.8em;
  line-height: 1.8;
}

.linklist .dlicon:before {
  content: "型紙ダウンロード";
}

.linklist .pdficon:before {
  content: "PDFをダウンロード";
}

.kirigamiflow figure {
  background: #eee;
  padding: 30px;
  border-radius: 15px;
}

.kirigamiflow figure img {
  max-width: 240px;
  width: 100% !important;
  height: auto;
  margin-bottom: 9px;
}

.kirigamiflow figure figcaption {
  width: 240px;
  display: block;
  margin: 0 auto;
}

#main .p-lifeevent_contents__list {
  padding: 0;
}

#main .p-lifeevent_contents__item {
  list-style: none;
  padding: 3.2rem;
  margin-bottom: 0;
  position: relative;
}

@media only screen and (max-width: 640px) {
  #main .p-lifeevent_contents__item {
    padding: 3.2rem 1.6rem 0;
  }
}
@media only screen and (max-width: 400px) {
  #main .p-lifeevent_contents__item {
    padding: 3.2rem 0.8rem 0.8rem;
  }
}
#main .p-lifeevent_contents__item:not(:last-child)::after {
  content: "";
  width: 0;
  height: 0;
  border: 6.4rem solid transparent;
  border-top: 1.6rem #fff solid;
  border-bottom: none;
  position: absolute;
  bottom: -1.6rem;
  left: 50%;
  z-index: 100;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
}

#main .p-lifeevent_contents__item:nth-child(2n-1) {
  background: #eee;
}

#main .p-lifeevent_contents__item:nth-child(2n-1)::after {
  border-top-color: #eee;
}

#main .p-lifeevent_contents__item:last-child::after,
#main .p-lifeevent_contents__item::before {
  content: none;
}

#main .p-lifeevent_contents__title {
  font-size: 300%;
  font-weight: bold;
  color: #1D7EC2;
}

@media only screen and (max-width: 640px) {
  #main .p-lifeevent_contents__title {
    font-size: 200%;
    margin-bottom: 1.6rem;
  }
}
#main .p-lifeevent_contents__main {
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: auto;
  -ms-grid-columns: 1fr 1.6rem 1.61fr;
      grid-template: "fig text" auto/1fr 1.61fr;
  grid-gap: 1.6rem;
}

@media only screen and (max-width: 768px) {
  #main .p-lifeevent_contents__main {
    -ms-grid-rows: auto 1rem auto;
    -ms-grid-columns: 1fr;
        grid-template: "fig" "text" auto/1fr;
    grid-gap: 1rem;
  }
  #main .p-lifeevent_contents__main > figure {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }
  #main .p-lifeevent_contents__main > p {
    -ms-grid-row: 3;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
  }
  #main .p-lifeevent_contents__main > .text {
    -ms-grid-row: 3;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
  }
}
#main .p-lifeevent_contents__fig {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
  grid-area: fig;
  margin-bottom: 0;
}

@media only screen and (max-width: 768px) {
  #main .p-lifeevent_contents__img {
    max-width: 80%;
  }
}
#main .p-lifeevent_contents__text {
  -ms-grid-row: 2;
  -ms-grid-column: 2;
  grid-area: text;
}
@media only screen and (max-width: 768px){
  #main .p-lifeevent_contents__main > .p-lifeevent_contents__fig {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }
  #main .p-lifeevent_contents__main > .p-lifeevent_contents__text {
    -ms-grid-row: 3;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
  }
}
@media only screen and (max-width: 979px){
  nav#products > ul > li > .p-lifeevent_contents__text {
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    -ms-grid-column: 2;
  }
}
@media only screen and (max-width: 767px){
  #main nav#products > ul > li > .p-lifeevent_contents__text {
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    -ms-grid-column: 3;
  }
}

#main .p-lifeevent_contents__text figure a {
  border: 1px solid #ccc;
  background: #fff;
  padding: 1.6rem 5.4rem;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: block;
  width: 100%;
  position: relative;
}

@media only screen and (max-width: 640px) {
  #main .p-lifeevent_contents__text figure a {
    font-size: 200%;
    padding: 0.8rem 3.2rem;
  }
}
#main .p-lifeevent_contents__text figure a i {
  position: absolute;
  bottom: 0.4rem;
  right: 0.4rem;
  display: block;
  font-size: 200%;
  -webkit-transform: rotate(-20deg);
      -ms-transform: rotate(-20deg);
          transform: rotate(-20deg);
}

@media only screen and (max-width: 640px) {
  #main .p-lifeevent_contents__text figure a i {
    font-size: 100%;
  }
}
#main .p-lifeevent_contents__text p {
  font-size: 120%;
}

#main .p-lifeevent_contents__text *:last-child {
  margin-bottom: 0;
}

#main .p-lifeevent_contents__linkbox {
  background: #dcf0ff;
  padding: 1.6rem;
  text-align: center;
}

#main .p-lifeevent_contents__link {
  border: 1px solid #1D7EC2;
  color: #1D7EC2;
  background: #fff;
  font-size: 120%;
  text-decoration: none;
  padding: 0.5em 1.5em;
  margin: auto;
  display: block;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
}

#main .p-lifeevent_contents__link:hover {
  opacity: 0.6;
}

.p-bd__block {
  display: inline-block;
  border: 1px solid #000;
  padding-inline: 0.5em;
  margin-bottom: 18px;
}
.p-bd__block--red {
  border-color: #b00;
  color: #b00;
}
.p-bd__block.p1e {
  padding: 1em;
}

.tal {
  text-align: left;
}

.tac {
  text-align: center;
}

.tar {
  text-align: right;
}

.taj {
  text-align: justify;
}

.c-kome__list {
  padding: 0;
  font-size: 83.3%;
}
.c-kome__list li {
  padding-left: 1.5em;
  position: relative;
}
.c-kome__list li::before {
  content: "※";
  position: absolute;
  top: 0;
  left: 0;
}

.accordion_standard_title {
  font-size: 94%;
  background: #ddd;
  border-radius: 1.5em;
  padding: 0.55em 3em 0.55em 1.5em;
  margin-top: 5px;
  line-height: 1.8;
  font-weight: normal !important;
  margin-bottom: 9px;
}

#main dl.accordion + .accordion_standard_title {
  -webkit-margin-before: 5px;
          margin-block-start: 5px;
}

#main .p-contractflow__list {
  padding: 0 1.5em 1.5em;
}
#main .p-contractflow__item {
  background: #D5EFFE;
  margin: 0;
  padding: 1.5em;
  display: none;
}
#main .p-contractflow__item::before {
  content: none;
}
#main .p-contractflow__item p {
  font-size: 100%;
}
#main .p-contractflow__item li::before {
  content: "●";
}
#main .p-contractflow__item.active {
  display: block;
}
#main .p-contractflow__anslist {
  margin: 0;
  padding: 0;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1.6rem 1fr;
  grid-template-columns: 1fr 1fr;
  gap: 1.6rem;
}
#main .p-contractflow__ansitem {
  margin: 0;
  padding: 0;
}
#main .p-contractflow__ansitem::before {
  content: none !important;
}
#main .p-contractflow__ansitem a {
  display: block;
  border: #1d7ec2 3px solid;
  background: #fff;
  padding: 0.5em;
  text-align: center;
  text-decoration: none;
  font-size: 120%;
}
#main .p-contractflow__ansitem a:hover {
  background: #1d7ec2;
  color: #fff;
}
#main .p-contractflow__anser {
  color: #1d7ec2;
  font-size: 144% !important;
  text-align: center;
  margin: 0;
}
#main .p-contractflow__reset {
  margin-block: 1em 0;
}

.p-example__wrap {
  border: 3px solid #ddd;
  margin-bottom: 18px;
  padding: 0 !important;
}
.p-example__title {
  margin: 0 0 18px;
  padding: 1em;
  font-weight: bold;
  background: #ddd;
}
.p-example__box {
  padding: 0 1em 1em !important;
}
.p-example__box > *:last-child {
  margin-bottom: 0 !important;
}

.p-dl__titlebg {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: -webkit-max-content 0.8rem 1fr;
  -ms-grid-columns: max-content 0.8rem 1fr;
  grid-template-columns: -webkit-max-content 1fr;
  grid-template-columns: max-content 1fr;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.4rem 0.8rem;
}
.p-dl__titlebg dt {
  background: rgba(0, 0, 0, 0.2);
  padding: 0.2rem 0.8rem;
}
.p-headline__bg {
  border: none !important;
  padding: 0.3em 0.5em !important;
}
.p-headline__bg--gray {
  background: rgba(0, 0, 0, 0.2);
}
.p-headline__bg--basic {
  background: #0068b7;
  color: #fff !important;
  font-weight: bold;
}
.p-headline__bg--economy {
  background: #00afec;
  color: #fff !important;
  font-weight: bold;
}
.p-headline__bg--kasai {
  background: #ed6d46;
  color: #fff !important;
  font-weight: bold;
}

.p-box__line {
  background: #000;
  padding: 1em;
}
.p-box__line h4 {
  border: none !important;
  font-weight: bold;
  padding: 0 !important;
}
.p-box__line ol {
  padding: 0;
}
.p-box__line ol li {
  list-style: none;
}
.p-box__line--qr {
  background: #d9eef2;
}
.p-box__line--qr h4 {
  color: #00a0e9 !important;
}
@media only screen and (max-width: 767px) {
  .p-box__line--qr {
    display: none;
  }
}
.p-box__line--search {
  background: #d6ebd6;
}
.p-box__line--search h4 {
  color: #009944 !important;
}

#main .p-fireplan__fig {
  margin-bottom: 0 !important;
}
#main .p-fireplan__textbox {
  padding: 1em;
}
#main .p-fireplan__textbox--kasaishizen {
  background: #ceeaff;
}
#main .p-fireplan__textbox--kasai {
  background: #ffe3ce;
}
#main .p-fireplan__textbox > * {
  margin: 0;
  padding: 0;
}
#main .p-fireplan__textbox + h4 {
  margin-top: 1em;
}