@charset "utf-8";
/* このファイルはUTF-8のBOMなし(UTF-8N)で保存しています */

/**
 * CSS Information
 * ===============================================================
 *
 * Site URL:  http://
 * File name: base.css
 * Summary:   ベーススタイル
 * Author:    CrEa., Inc.
 *
 * -----------------------------------
 *
 * TOC:
 *     =1    html & body
 *     =2    box model styles
 *     =3    float/align styles
 *     =4    text styles
 *     =5    link styles
 *     =6    list styles
 *     =7    heading styles
 *     =8    table styles
 *     =9    other selectors
 *     =10   clearfix
 *
 * ===============================================================
*/

/*==-----------------------------------------------
フルードメディア
-------------------------------------------------*/
img,
video,
input {
  height: auto;
  max-width: 100%;
  vertical-align: bottom;
}

/** =1
 * ========================================
 * html & body
 * ========================================
 */

html {
  height: 100%;
  font-size: 62.5%; /*基準10px=1em*/
}

body {
  height: 100%;
  line-height: 1.5;
  color: #555555;
  word-break: break-all;
  font-family: "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN",
    "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "游ゴシック", YuGothic,
    "メイリオ", Meiryo, sans-serif;
  font-size: 14px; /*CSS3未対応ブラウザ対策*/
  font-size: 1.4rem; /*CSS3単位 実質14px*/
  background: #fff url(../../../src/default/pc/image/common/bg.gif) 0 0 repeat;
}

/* -- >>> styles for narrow layout ----- */
@media screen and (max-width: 599px) {
  html {
  }

  body {
  }
}

/* -- >>> styles for medium layout ----- */
@media screen and (min-width: 600px) and (max-width: 959px) {
  html {
  }

  body {
  }
}

/* -- >>> styles for wide layout ----- */
@media screen and (min-width: 960px) {
  html {
  }

  body {
  }
}

/** =2
 * ========================================
 * box model styles
 * ========================================
 */

#contents article {
  clear: both;
  background: #fff;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border: solid 3px #d2d2d2;
}
#contents article:not(:last-child) {
  margin-bottom: 20px;
}

#contents section {
  clear: both;
  margin: 0 0 10px;
}

/* -- >>> styles for narrow layout ----- */
@media screen and (max-width: 599px) {
  #contents article {
  }

  #contents section {
    padding: 10px 10px 0 10px;
  }
}

/* -- >>> styles for medium layout ----- */
@media screen and (min-width: 600px) and (max-width: 959px) {
  #contents article {
  }

  #contents section {
    padding: 15px 15px 5px 15px;
  }
}

/* -- >>> styles for wide layout ----- */
@media screen and (min-width: 960px) {
  #contents article {
  }

  #contents section {
    padding: 20px 30px 10px 30px;
  }
}

/** =3
 * ========================================
 * float/align styles
 * ========================================
 */

.flo_left {
  float: left;
}
.flo_right {
  float: right;
}

.txt_left {
  text-align: left;
}
.txt_center {
  text-align: center;
}
.txt_right {
  text-align: right;
}

/** =4
 * ========================================
 * text styles
 * ========================================
 */

strong {
  font-weight: bold;
  color: #ea4722;
}
strong * {
  color: inherit !important;
}

.fwBold {
  font-weight: bold;
}
.fcRed {
  color: #ea4722;
}
.fcBlue {
  color: #0072bc;
}
.underLine {
  text-decoration: underline;
}

.fs125per {
  font-size: 125%;
}
.fs150per {
  font-size: 150%;
}
.fs200per {
  font-size: 200%;
}

/** =5
 * ========================================
 * link styles
 * ========================================
 */

a,
a:link,
a:visited,
a:hover,
a:active {
  text-decoration: underline;
  outline: none;
}
a {
  color: #06731d;
}
@media (any-hover: hover) {
  a:not([class]):hover {
    opacity: 0.8;
  }
}

/** =6
 * ========================================
 * list styles
 * ========================================
 */

#contents p,
#contents ul,
#contents ol,
#contents dl,
#contents table {
  margin: 0 0 10px 0;
}

/*==== 6-1 unordered list & ordered list ====*/
#contents ul {
  padding-left: 2em;
}
#contents .list_btn ul {
  padding-left: 0;
}
ul li {
  list-style-type: none;
}
ul.disc li {
  list-style: disc;
}
#contents ol {
  padding-left: 2em;
}
ol li {
  list-style-type: decimal;
}
/* -- >>> styles for narrow layout ----- */
@media screen and (max-width: 599px) {
  ul li {
  }
  ol li {
  }
}

/* -- >>> styles for medium layout ----- */
@media screen and (min-width: 600px) and (max-width: 959px) {
  ul li {
  }
  ol li {
  }
}

/* -- >>> styles for wide layout ----- */
@media screen and (min-width: 960px) {
  ul li {
  }
  ol li {
  }
}

/** =7
 * ========================================
 * heading styles
 * ========================================
 */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: bold;
}
#contents h2 {
  background: #06731d url(../../../src/default/pc/image/common/h2_icon_sp.png)
    10px 50% no-repeat;
  background-size: 20px 20px;
  padding: 8px 12px 8px 35px;
  margin: 0 auto 10px auto;
  color: #ffffff;
  font-size: 110%;
  border: solid 2px #fff;
  border-radius: 6px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
}
#contents h2.mb0 {
  margin-bottom: 0;
}

#contents h3 {
  background: #4c9456;
  color: #fff;
  padding: 7px 10px;
  font-size: 105%;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  -webkit-border-top-left-radius: 4px;
  -webkit-border-top-right-radius: 4px;
  -moz-border-radius-topleft: 4px;
  -moz-border-radius-topright: 4px;
  border: solid 1px #fff;
}

#contents h4 {
  color: #06731d;
  margin: 0 0 10px 0;
  padding: 0 0 5px 0;
  border-bottom: solid 2px #06731d;
}

/* -- >>> styles for narrow layout ----- */
@media screen and (max-width: 599px) {
  #contents h2 {
  }
}

/* -- >>> styles for medium layout ----- */
@media screen and (min-width: 600px) and (max-width: 959px) {
  #contents h2 {
  }
}

/* -- >>> styles for wide layout ----- */
@media screen and (min-width: 960px) {
  #contents h2 {
    font-size: 125%;
    background: #06731d url(../../../src/default/pc/image/common/h2_icon.png)
      12px 50% no-repeat;
    padding: 10px 15px 10px 42px;
  }
  #contents h3 {
    font-size: 105%;
  }
}

/** =8
 * ========================================
 * table styles
 * ========================================
 */

table {
  border-collapse: collapse;
}

th {
  font-weight: bold;
}

/** =9
 * ========================================
 * other selectors
 * ========================================
 */

hr {
  clear: both;
}

/** =9
/*==-----------------------------------------------
form
-------------------------------------------------*/
#contents form span {
  color: #f00;
}
#contents form .error {
  color: #ff3333;
}
#contents form dl dt span {
  color: #ff7335;
  font-size: 90%;
}
#contents form dl dt span.red {
  color: #cc0000;
}
#contents form span.required {
  display: inline-block;
  color: #fff101;
  font-weight: bold;
  font-size: 75%;
}
#contents form .error {
  font-weight: bold;
}

#contents .list_btn ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

#contents .btn a,
#contents .btn input,
#contents .btn button,
#contents .list_btn ul li a,
#contents .list_btn ul li input,
#contents .list_btn ul li button {
  width: 240px;
  display: block;
  padding: 15px;
  border: none;
  border-radius: 6px;
  box-shadow: inset 0 0 0 2px #4c9456, inset 0 0 0 4px #fff;
  background: #4c9456;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  color: #fff;
  font-weight: bold;
  font-size: inherit;
  text-align: center;
  text-decoration: none;
  -webkit-appearance: none;
  cursor: pointer;
}
#contents .btn a,
#contents .btn input,
#contents .btn button {
  margin-block: 0 10px;
  margin-inline: auto;
}
#contents .list_btn ul li a,
#contents .list_btn ul li input,
#contents .list_btn ul li button {
  margin: 0;
}
#contents .btn_long a,
#contents .btn_long input,
#contents .btn_long button {
  width: 280px;
}
#contents .btn_small a,
#contents .btn_small input,
#contents .btn_small button {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid #838485;
  border-radius: 3px;
  background-color: #ddd;
  color: #333;
  cursor: pointer;
}

#contents .btn a:disabled,
#contents .btn input:disabled,
#contents .btn button:disabled {
  opacity: 0.5;
  pointer-events: none;
}

@media (any-hover: hover) {
  #contents .btn a:hover,
  #contents .btn input:hover,
  #contents .btn button:hover,
  #contents .list_btn ul li a:hover,
  #contents .list_btn ul li input:hover,
  #contents .list_btn ul li button:hover {
    box-shadow: inset 0 0 0 2px rgb(from #4c9456 r g b / 0.7),
      inset 0 0 0 4px #fff;
    background: rgb(from #4c9456 r g b / 0.7);
  }

  #contents .btn_small a:hover,
  #contents .btn_small input:hover,
  #contents .btn_small button:hover {
    opacity: 0.8;
  }
}

#contents .btn_event a,
#contents .btn_event input,
#contents .btn_event button,
#contents .list_btn ul li.btn_event a,
#contents .list_btn ul li.btn_event input,
#contents .list_btn ul li.btn_event button {
  box-shadow: inset 0 0 0 2px #4c9456, inset 0 0 0 4px #fff;
  background: #4c9456;
}

#contents .btn_event a.disabled {
  opacity: 0.5;
  pointer-events: none;
}

@media (any-hover: hover) {
  #contents .btn_event a:hover,
  #contents .btn_event input:hover,
  #contents .btn_event button:hover,
  #contents .list_btn ul li.btn_event a:hover,
  #contents .list_btn ul li.btn_event input:hover,
  #contents .list_btn ul li.btn_event button:hover {
    box-shadow: inset 0 0 0 2px rgb(from #4c9456 r g b / 0.7),
      inset 0 0 0 4px #fff;
    background: rgb(from #4c9456 r g b / 0.7);
  }
}

#contents .list_btn ul li input.attention,
#contents .list_btn ul li button.attention {
  box-shadow: inset 0 0 0 2px #f29a03, inset 0 0 0 4px #fff;
  background: #f29a03;
}

@media (any-hover: hover) {
  #contents .list_btn ul li input.attention:hover,
  #contents .list_btn ul li button.attention:hover {
    box-shadow: inset 0 0 0 2px rgb(from #f29a03 r g b / 0.7),
      inset 0 0 0 4px #fff;
    background: rgb(from #f29a03 r g b / 0.7);
  }
}

#contents .btn_metpo a {
  box-shadow: inset 0 0 0 2px #059dcb, inset 0 0 0 4px #fff;
  background: #059dcb;
}
@media (any-hover: hover) {
  #contents .btn_metpo a:hover {
    box-shadow: inset 0 0 0 2px rgb(from #059dcb r g b / 0.7),
      inset 0 0 0 4px #fff;
    background: rgb(from #059dcb r g b / 0.7);
  }
}

#contents dl dd input.text,
#contents dl dd select,
#contents dl dd textarea {
  max-width: 100%;
  padding: 5px;
  border: solid 2px #ddd;
  border-radius: 0;
  box-sizing: border-box;
  font-family: inherit;
  color: inherit;
  font-size: 16px;
}
#contents dl dd input.text:focus,
#contents dl dd select:focus,
#contents dl dd textarea:focus {
  border: solid 2px #f29668;
}
#contents dl dd input.text:disabled,
#contents dl dd select:disabled,
#contents dl dd textarea:disabled {
  background: #eee;
}
#contents dl dd select {
  background: #fff;
}

/* Chrome・Safari・Edge */
::-webkit-input-placeholder {
  opacity: 1;
  color: #aaa;
}
/* Firefox */
:-moz-placeholder,
::-moz-placeholder {
  opacity: 1;
  color: #aaa;
}
/* CSS4標準 */
::placeholder {
  opacity: 1;
  color: #aaa;
}

#contents dl dd input {
  vertical-align: middle;
}

input[type="radio"],
input[type="checkbox"] {
  margin-block: 3px 0;
  margin-inline: 3px;
  vertical-align: baseline !important;
}
@media (any-hover: hover) {
  input[type="radio"],
  input[type="checkbox"] {
    vertical-align: text-bottom !important;
  }
}

/* -- >>> styles for narrow layout ----- */
@media screen and (max-width: 599px) {
  #contents .list_btn ul {
    flex-direction: column;
  }

  #contents .table {
    margin: 0 0 20px 0;
  }
  #contents .table .entry dl {
    margin: 0 0 10px 0;
  }
  #contents .table .entry dl dt {
    background: #f29a03;
    border-bottom: solid 2px #f29a03;
    color: #fff;
    margin: 0 0 10px 0;
    padding: 3px 10px;
    font-weight: bold;
  }
  #contents .table .entry dl dt span {
    margin: 0 0 0 5px;
  }

  #contents .box .entry {
    margin-bottom: 20px;
  }
  #contents .box:not(:first-child) .entry {
    margin-top: 20px;
  }
}

/* -- >>> styles for medium layout ----- */
@media screen and (min-width: 600px) and (max-width: 959px) {
  #contents .table {
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    margin: 0 10px 20px 10px;
  }

  #contents .table .entry {
    display: table-row-group;
  }
  #contents .table .entry dl {
    display: table-row;
    margin: 0;
  }
  #contents .table .entry dl dt {
    background: #f29a03;
    color: #fff;
    width: 180px;
    text-align: center;
    padding: 0;
  }
  #contents .table .entry dl dt span {
    display: block;
  }
  #contents .table .entry dl dd {
    font-size: 90%;
    width: 75%;
  }
  #contents .table .entry dl dt,
  #contents .table .entry dl dd {
    display: table-cell;
    padding: 5px 10px;
    border-left: 1px solid #ccc;
    border-top: 1px solid #ccc;
    vertical-align: middle;
  }

  #contents .box .entry {
    margin: 0 10px 20px;
    padding: 10px;
    border: 1px solid #ccc;
  }
  #contents .box:not(:first-child) .entry {
    margin-top: 20px;
  }
}

/* -- >>> styles for wide layout ----- */
@media screen and (min-width: 960px) {
  #contents .table {
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    margin: 0 20px 20px 20px;
  }

  #contents .table .entry {
    display: table-row-group;
  }
  #contents .table .entry dl {
    display: table-row;
    margin: 0;
  }
  #contents .table .entry dl dt {
    background: #f29a03;
    color: #fff;
    width: 180px;
    text-align: center;
  }

  #contents .table .entry:has(dl.vertical),
  #contents .table .entry dl.vertical {
    display: block;
  }
  #contents .table .entry dl.vertical dt,
  #contents .table .entry dl.vertical dd {
    display: block;
    width: initial;
    text-align: left;
  }

  #contents .table .entry dl.vertical dd input.text,
  #contents .table .entry dl.vertical dd textarea {
    width: 100%;
  }

  #contents .table .entry dl dd {
    font-size: 90%;
    width: 80%;
  }
  #contents .table .entry dl dt,
  #contents .table .entry dl dd {
    display: table-cell;
    padding: 10px;
    border-left: 1px solid #ccc;
    border-top: 1px solid #ccc;
    vertical-align: middle;
  }

  #contents .box .entry {
    margin: 0 20px 20px;
    padding: 10px;
    border: 1px solid #ccc;
  }
  #contents .box:not(:first-child) .entry {
    margin-top: 20px;
  }
}

/** =10
 * ========================================
 * general styles
 * ========================================
 */

/** =10-1
 * display
 * ----------------------------------
 */

.displayInlineBlock {
  display: inline-block;
}
.displayInline {
  display: inline;
}
.displayBlock {
  display: block;
}
.displayNone {
  display: none;
}

/* -- >>> styles for narrow layout ----- */
@media screen and (max-width: 767px) {
  .displayPc {
    display: none;
  }
  .displayPcInline {
    display: none;
  }
  .displayPcOnlyInline {
    display: none;
  }
  .displaySp {
    display: inherit;
  }
}

/* -- >>> styles for medium layout ----- */
@media screen and (min-width: 768px) and (max-width: 959px) {
  .displayPc {
    display: inherit;
  }
  .displayPcInline {
    display: inline;
  }
  .displayPcOnlyInline {
    display: none;
  }
  .displaySp {
    display: none;
  }
}

/* -- >>> styles for wide layout ----- */
@media screen and (min-width: 960px) {
  .displayPc {
    display: inherit;
  }
  .displaySp {
    display: none;
  }
  .displayPcInline {
    display: inline;
  }
  .displayPcOnlyInline {
    display: inline;
  }
}

/** =10-2
 * clearfix
 * ----------------------------------
 */
/* For modern browsers */
.clearfix:before,
.clearfix:after,
.cf:before,
.cf:after {
  content: "";
  display: table;
}

.clearfix:after,
.cf:after {
  clear: both;
}

/* For IE 6/7 (trigger hasLayout) */
.clearfix,
.cf {
  zoom: 1;
}