
@import url(//fonts.googleapis.com/css?family=Roboto:400,500,700);
@import url(//fonts.googleapis.com/css?family=Roboto+Condensed:400,700);
@import url(//fonts.googleapis.com/icon?family=Material+Icons);

/*!
 * Font Awesome Free 5.2.0 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 */
/*!
 * Font Awesome Free 5.2.0 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 */
@font-face {
  font-family: 'fa_s';
  font-style: normal;
  font-weight: 900;
  src: url("/common_v3/css/fontawesome/webfonts/fa-solid-900.eot");
  src: url("/common_v3/css/fontawesome/webfonts/fa-solid-900.woff2") format("woff2"), url("/common_v3/css/fontawesome/webfonts/fa-solid-900.woff") format("woff"), url("/common_v3/css/fontawesome/webfonts/fa-solid-900.ttf") format("truetype"), url("/common_v3/css/fontawesome/webfonts/fa-solid-900.svg#fontawesome") format("svg"); }

.fa,
.fas {
  font-family: 'fa_s';
  font-weight: 900; }

/*!
 * Font Awesome Free 5.2.0 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 */
@font-face {
  font-family: 'fa_r';
  font-style: normal;
  font-weight: 400;
  src: url("/common_v3/css/fontawesome/webfonts/fa-regular-400.eot");
  src: url("/common_v3/css/fontawesome/webfonts/fa-regular-400.woff2") format("woff2"), url("/common_v3/css/fontawesome/webfonts/fa-regular-400.woff") format("woff"), url("/common_v3/css/fontawesome/webfonts/fa-regular-400.ttf") format("truetype"), url("/common_v3/css/fontawesome/webfonts/fa-regular-400.svg#fontawesome") format("svg"); }

.far {
  font-family: 'fa_r';
  font-weight: 400; }

@font-face {
  font-family: 'icomoon';
  src: url("/common_v3/css/fonts/imanori/icomoon.eot?rx1ysu");
  src: url("/common_v3/css/fonts/imanori/icomoon.ttf?rx1ysu") format("truetype"), url("/common_v3/css/fonts/imanori/icomoon.woff?rx1ysu") format("woff");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'cars';
  src: url("/common_v3/css/fonts/cars/icomoon.eot?rx1ysu");
  src: url("/common_v3/css/fonts/cars/icomoon.ttf?rx1ysu") format("truetype"), url("/common_v3/css/fonts/cars/icomoon.woff?rx1ysu") format("woff");
  font-weight: normal;
  font-style: normal; }

.ico-fa:before {
  display: inline-block;
  font-style: normal;
  -webkit-font-feature-settings: normal;
          font-feature-settings: normal;
  font-variant: normal;
  line-height: 1;
  vertical-align: baseline;
  font-weight: normal;
  font-family: 'fa_s'; }

.ico-far:before {
  display: inline-block;
  font-style: normal;
  -webkit-font-feature-settings: normal;
          font-feature-settings: normal;
  font-variant: normal;
  line-height: 1;
  vertical-align: baseline;
  font-weight: normal;
  font-family: 'fa_r'; }

.ico-fa-after:after {
  display: inline-block;
  font-style: normal;
  -webkit-font-feature-settings: normal;
          font-feature-settings: normal;
  font-variant: normal;
  line-height: 1;
  vertical-align: baseline;
  font-weight: normal;
  font-family: 'fa_s'; }

.ico-far-after:after {
  display: inline-block;
  font-style: normal;
  -webkit-font-feature-settings: normal;
          font-feature-settings: normal;
  font-variant: normal;
  line-height: 1;
  vertical-align: baseline;
  font-weight: normal;
  font-family: 'fa_r'; }

.example:before {
  content: "\f007"; }

.ico-moon:before {
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  display: inline-block;
  vertical-align: middle; }

.ico-moon-after:after {
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  display: inline-block;
  vertical-align: middle; }

@keyframes gnav_fixed {
  0% {
    transform: translateY(-100%); }
  50% {
    transform: translateY(-100%); }
  100% {
    transform: translateY(0); } }

@keyframes step_fixed {
  0% {
    transform: translateY(0%); }
  50% {
    transform: translateY(-10%); }
  100% {
    transform: translateY(0); } }

.for-xs-up,
.for-sm-up,
.for-md-up,
.for-lg-up,
.for-xl-up,
.for-xxl-up {
  display: none !important; }

.p-demerit-main .pi-title {
  background-color: #F5FBFF;
  padding-top: 1em;
  padding-bottom: 1em;
  background-image: radial-gradient(0% 100%, #E8F5FD 0%, #F5FBFF 100%);
  position: relative;
  z-index: 1;
  overflow: hidden; }

.p-demerit-main .pi-title:before {
  content: "";
  display: block;
  position: absolute;
  width: 65%;
  padding-top: 65%;
  background-color: rgba(25, 139, 219, 0.1);
  left: 100%;
  top: 100%;
  z-index: -1;
  transform: translateY(-50%) translateX(-50%) rotate(-45deg); }

.p-demerit-main .pi-title h1 {
  font-size: 27.428px;
  font-size: 1.71429rem; }

.p-demerit-main .pi-title p {
  font-size: 20.571px;
  font-size: 1.28571rem;
  color: #096FBF;
  display: -ms-flexbox;
  display: flex;
  line-height: 1.3; }

.p-demerit-main .pi-title p:before {
  content: '\f303';
  font-size: 28px;
  font-size: 1.75rem;
  margin-right: .25em;
  color: #00ACEA; }

.p-demerit-main .pi-title small {
  font-size: 14px;
  font-size: 0.875rem; }

.p-demerit-main .pi-hajimeni figure {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  margin-top: 0;
  margin-bottom: .5em;
  text-align: center; }

.p-demerit-main .pi-hajimeni figure img {
  margin-left: auto;
  margin-right: auto;
  width: 100%; }

.p-demerit-main .pi-index dt {
  position: relative;
  background-color: #E8F5FD;
  font-size: 21px;
  font-size: 1.3125rem;
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding: .5em .75em; }

.p-demerit-main .pi-index dt:before {
  content: "\f0cb";
  position: absolute;
  font-size: 104px;
  font-size: 6.5rem;
  transform: translateY(60%) translateX(30%) rotate(15deg);
  bottom: 0;
  right: 0;
  color: #9EC8E9; }

.p-demerit-main .pi-index dd {
  -ms-flex-positive: 1;
      flex-grow: 1;
  margin-left: 0; }

.p-demerit-main .pi-index a {
  text-decoration: none;
  border: solid 1px #E6E6E6;
  display: block;
  border-radius: .5em;
  overflow: hidden; }

.p-demerit-main .pi-index ul {
  list-style: none;
  padding-left: 0; }

.p-demerit-main .pi-index ul span {
  background-color: #096FBF;
  color: #fff;
  padding: .4em 1em .4em .75em;
  font-size: 16px;
  font-size: 1rem;
  font-weight: bold;
  border-radius: .2em;
  display: block;
  margin-top: -1px;
  margin-left: -1px;
  margin-right: -1px;
  text-align: center;
  position: relative; }

.p-demerit-main .pi-index ul span:before {
  content: "\f063";
  font-size: 24px;
  font-size: 1.5rem;
  color: #00ACEA;
  margin-right: .5em;
  vertical-align: middle;
  position: absolute;
  left: .5em; }

.p-demerit-main .pi-index ul strong {
  font-size: 24px;
  font-size: 1.5rem;
  color: #096FBF;
  padding: .5em;
  display: block;
  line-height: 1.3; }

.c-text-common.p-demerit-contents {
  padding-top: 1px;
  padding-bottom: 3em; }

.c-text-common.p-demerit-contents h2 {
  font-size: 24px;
  font-size: 1.5rem; }

.c-text-common.p-demerit-contents h2 strong span {
  display: inline-block; }

.p-demerit-contents hr {
  border-color: #E6E6E6; }

.p-demerit-contents.pi-bg-alt {
  background-color: #E8F5FD; }

.p-demerit-contents.pi-h2-bottom h2:after {
  display: none; }

.p-demerit-contents.pi-h2-bottom h2 strong {
  background-color: transparent; }

.p-avt {
  text-align: center;
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: end;
      align-items: flex-end; }

.pi-left .p-avt {
  -ms-flex-pack: start;
      justify-content: flex-start;
  text-align: left;
  padding-left: 6em; }

.pi-right .p-avt {
  -ms-flex-direction: row-reverse;
      flex-direction: row-reverse;
  text-align: right;
  padding-right: 6em; }

.p-avt img {
  display: block;
  margin-bottom: .5em;
  width: 44px; }

.p-avt strong {
  display: block;
  margin-bottom: .7em;
  padding-left: .5em;
  padding-right: .5em; }

.p-commu-box {
  margin-bottom: 2em;
  max-width: 1056px;
  margin-left: auto;
  margin-right: auto; }

.p-commu-box .pi-text {
  padding-left: 1em;
  padding-right: 1em; }

.p-commu-box .pi-text-inner {
  background-color: #E8F5FD;
  padding: 1.5em 1.5em;
  border-radius: 1.25em;
  position: relative; }

.pi-bg-alt .p-commu-box .pi-text-inner {
  background-color: #fff; }

.p-commu-box .pi-text-inner p {
  font-weight: bold;
  font-size: 19.428px;
  font-size: 1.21429rem;
  margin-top: 0;
  margin-bottom: 0; }

.p-commu-box .pi-text-inner:before {
  content: "";
  position: absolute;
  display: block;
  border-style: solid;
  border-width: 14px;
  border-color: transparent #E8F5FD #E8F5FD transparent;
  bottom: 100%; }

.pi-bg-alt .p-commu-box .pi-text-inner:before {
  border-color: transparent #fff #fff transparent; }

.p-commu-box.pi-left .pi-text {
  color: #096FBF; }

.p-commu-box.pi-left .pi-text-inner:before {
  left: 1.5em; }

.p-commu-box.pi-right {
  -ms-flex-direction: row-reverse;
      flex-direction: row-reverse; }

.p-commu-box.pi-right .pi-text {
  margin-right: 0; }

.p-commu-box.pi-right .pi-text-inner:before {
  transform: scaleX(-1);
  right: 1.5em; }

.p-memo {
  margin-top: 2em;
  margin-bottom: 2em;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto; }

.p-memo .pi-icon {
  display: none; }

.p-memo .pi-icon:before {
  content: "\f14b";
  font-size: 42px;
  font-size: 2.625rem;
  color: #00ACEA; }

.p-memo .pi-text {
  font-size: 18px;
  font-size: 1.125rem; }

.p-memo .pi-text p {
  margin-top: 0; }

.p-memo .pi-text strong {
  font-weight: bold;
  color: #FF3455;
  text-decoration: underline; }

.p-kakomi {
  background-color: #FBE9E7;
  padding: 1em; }

.p-kakomi .p-kakomi-inner .p-avt {
  -ms-flex-pack: center;
      justify-content: center;
  text-align: left; }

.p-kakomi .pi-text h3 {
  text-align: center;
  font-size: 27.428px;
  font-size: 1.71429rem;
  position: relative;
  margin-top: .25em;
  position: relative;
  z-index: 1;
  padding-bottom: .2em;
  line-height: 1.3; }

.p-kakomi .pi-text h3 strong {
  display: inline-block; }

.p-kakomi .pi-text h3:before {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  height: .7em;
  z-index: -1;
  width: 100%;
  background-color: #FFD6C8;
  border-bottom: solid 3px #FFBAA2; }

.p-kakomi .pi-text p {
  font-size: 18px;
  font-size: 1.125rem;
  font-weight: bold; }

.p-kakomi .pi-text p.c-notes {
  font-size: 14px;
  font-size: 0.875rem;
  font-weight: normal; }

.p-kakomi .pi-text h4 {
  text-align: center; }

.p-kakomi .pi-box {
  background-color: #fff;
  padding: 1.5em .5em;
  margin-top: 2em;
  border-radius: .5em;
  margin-bottom: .5em; }

.p-kakomi .pi-box.mdf-button {
  padding-top: 1em;
  padding-bottom: 1em; }

.p-kakomi .pi-box h4 {
  font-size: 24px;
  font-size: 1.5rem;
  margin-top: 0; }

.p-kakomi .pi-box h4 strong {
  position: relative; }

.p-kakomi .pi-box h4 strong img {
  display: block;
  margin-left: auto;
  margin-right: auto; }

.p-kakomi .pi-box .pi-list {
  list-style: none;
  padding-left: 0px;
  text-align: center;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  margin-bottom: .25em; }

.p-kakomi .pi-box .pi-list a {
  color: #000;
  font-size: 11.428px;
  font-size: 0.71429rem; }

.p-kakomi .pi-box .pi-list li {
  padding-left: .5em;
  padding-right: .5em; }

.p-kakomi .pi-box .pi-list img {
  display: block;
  margin-left: auto;
  margin-right: auto; }

.p-kakomi .pi-box .pi-list strong {
  display: block;
  margin-top: .5em; }

.p-kakomi .pi-box .c-button--lg--bd--sh,
.p-kakomi .pi-box .c-button--lg--bd-green--sh {
  width: 18em; }

.p-to-feature-wrap {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center; }

.p-to-feature {
  margin-top: 1.5em;
  margin-bottom: 2em;
  background-color: #096FBF;
  margin-left: auto;
  margin-right: auto;
  padding: 1em;
  text-decoration: none;
  color: #fff;
  border-radius: .2em;
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.2);
  position: relative;
  z-index: 1; }

.p-to-feature:hover {
  background-color: #0a7ad2; }

.p-to-feature:active {
  top: 4px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); }

.p-to-feature__txt {
  font-weight: bold;
  padding-top: 1em;
  position: relative;
  z-index: 1; }

.p-to-feature__txt h4 {
  margin-top: 0;
  line-height: 1;
  margin-bottom: .75em; }

.p-to-feature__txt h4 span {
  background-color: #FFFB00;
  color: #000;
  padding: .4em .5em;
  border-radius: .2em;
  display: inline-block; }

.p-to-feature__txt p {
  font-size: 21px;
  font-size: 1.3125rem;
  margin-bottom: 0; }

.p-to-feature__txt:before {
  display: inline-block;
  font-style: normal;
  -webkit-font-feature-settings: normal;
          font-feature-settings: normal;
  font-variant: normal;
  line-height: 1;
  vertical-align: baseline;
  font-weight: normal;
  font-family: 'fa_s'; }

.p-to-feature__txt:before {
  content: '\f061';
  position: absolute;
  right: .1em;
  top: .2em;
  font-size: 72px;
  font-size: 4.5rem;
  z-index: -1;
  line-height: .9;
  opacity: .4;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; }

.p-to-feature img {
  width: auto;
  display: block; }

@media print, screen and (min-width: 21em){
  .xs-v-v{
    visibility: visible; }
  .for-xs-down{
    display: none !important; }
  .for-xs-up{
    display: block !important; } }

@media print, screen and (min-width: 35.5em){
  .sm-v-v{
    visibility: visible; }
  .for-sm-down{
    display: none !important; }
  .for-sm-up{
    display: block !important; }
  .p-to-feature{
    -ms-flex-align: center;
        align-items: center;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
        justify-content: center; }
  .p-to-feature__txt{
    padding-left: 2em;
    padding-right: 1em;
    padding-top: 0; }
  .p-to-feature__txt:before{
    top: 0; }
  .p-to-feature img{
    width: 200px; } }

@media print, screen and (min-width: 48em){
  .md-v-v{
    visibility: visible; }
  .for-md-down{
    display: none !important; }
  .for-md-up{
    display: block !important; }
  .p-demerit-main .pi-title h1{
    font-size: 2.25rem; }
  .p-demerit-main .pi-title p{
    font-size: 1.3125rem; }
  .p-demerit-main .pi-hajimeni{
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row-reverse;
        flex-direction: row-reverse; }
  .p-demerit-main .pi-hajimeni figure{
    padding-left: 3em; }
  .p-demerit-main .pi-hajimeni figure img{
    width: 383px; }
  .p-demerit-main .pi-index dl{
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center; }
  .p-demerit-main .pi-index dt{
    width: 170px;
    height: 170px;
    padding-left: 1em;
    padding-top: 1em; }
  .p-demerit-main .pi-index dt:before{
    font-size: 8.6875rem;
    transform: translateY(20%) translateX(30%) rotate(15deg); }
  .p-demerit-main .pi-index a{
    border: none; }
  .p-demerit-main .pi-index ul{
    padding-left: 2em; }
  .p-demerit-main .pi-index ul a{
    padding-top: .25em;
    padding-bottom: .25em;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center; }
  .p-demerit-main .pi-index ul span{
    margin: 0; }
  .p-demerit-main .pi-index ul span:before{
    position: relative;
    left: 0; }
  .p-demerit-main .pi-index ul strong{
    padding-left: .75em;
    padding-top: 0;
    padding-bottom: 0; }
  .c-text-common.p-demerit-contents h2{
    font-size: 1.75rem; }
  .p-avt{
    display: block;
    width: 100px;
    -ms-flex-negative: 0;
        flex-shrink: 0; }
  .pi-left .p-avt{
    text-align: center;
    padding-left: 0; }
  .pi-right .p-avt{
    text-align: center;
    padding-right: 0; }
  .p-avt img{
    width: auto;
    margin-left: auto;
    margin-right: auto; }
  .p-commu-box{
    display: -ms-flexbox;
    display: flex; }
  .p-commu-box .pi-text{
    margin-right: 100px;
    padding-left: 3em;
    padding-right: 3em; }
  .p-commu-box .pi-text-inner{
    padding: 1.5em 2em; }
  .p-commu-box .pi-text-inner p{
    font-size: 1.3125rem; }
  .p-commu-box .pi-text-inner:before{
    top: 1.5em;
    border-width: 20px;
    bottom: auto; }
  .p-commu-box.pi-left .pi-text-inner:before{
    right: 100%;
    left: auto; }
  .p-commu-box.pi-right .pi-text{
    margin-left: 100px; }
  .p-commu-box.pi-right .pi-text-inner:before{
    left: 100%;
    right: auto; }
  .p-memo{
    display: -ms-flexbox;
    display: flex; }
  .p-memo .pi-icon{
    display: block; }
  .p-memo .pi-text{
    padding-left: 1em; }
  .p-kakomi{
    padding: 2em; }
  .p-kakomi .p-kakomi-inner{
    display: -ms-flexbox;
    display: flex; }
  .p-kakomi .p-kakomi-inner .p-avt{
    text-align: center; }
  .p-kakomi .pi-text{
    margin-right: 100px;
    padding-left: 2em;
    padding-right: 2em; }
  .p-kakomi .pi-text h3{
    font-size: 1.875rem; }
  .p-kakomi .pi-box{
    padding: 1.5em; }
  .p-kakomi .pi-box.mdf-button{
    padding-top: 2.5em;
    padding-bottom: 2.5em; }
  .p-kakomi .pi-box h4 strong img{
    position: absolute;
    left: 100%;
    margin-left: .5em; }
  .p-kakomi .pi-box .pi-list a{
    font-size: 1rem; }
  .p-kakomi .pi-box .pi-list li{
    padding-left: 1em;
    padding-right: 1em; } }

@media print, screen and (min-width: 64em){
  .lg-v-v{
    visibility: visible; }
  .for-lg-down{
    display: none !important; }
  .for-lg-up{
    display: block !important; } }

@media print, screen and (min-width: 80em){
  .xl-v-v{
    visibility: visible; }
  .for-xl-down{
    display: none !important; }
  .for-xl-up{
    display: block !important; } }

@media print, screen and (min-width: 96em){
  .xxl-v-v{
    visibility: visible; }
  .for-xxl-down{
    display: none !important; }
  .for-xxl-up{
    display: block !important; } }

@media print, screen and (max-width: 96em){
  .max-xxl-v-v{
    visibility: visible; } }

@media print, screen and (max-width: 80em){
  .max-xl-v-v{
    visibility: visible; } }

@media print, screen and (max-width: 64em){
  .max-lg-v-v{
    visibility: visible; } }

@media print, screen and (max-width: 48em){
  .max-md-v-v{
    visibility: visible; } }

@media print, screen and (max-width: 35.5em){
  .max-sm-v-v{
    visibility: visible; } }

@media print, screen and (max-width: 21em){
  .max-xs-v-v{
    visibility: visible; } }

@media print{
  html{
    font-size: 12px; } }
