@charset "UTF-8";
/* layout
________________________________________________________*/
html {
  overflow-y: scroll;
}

main div.mainContents {
  /* ----- rest ----- */
  line-height: 1;
  /* ----- rest ----- */
  background: #fff;
  color: #4B4C4D;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
  line-height: 140%;
  font-size: 16px;
  /* ----- link ----- */
  /* ----- font size ----- */
  /* ----- font weight ----- */
  /* ----- under line ----- */
  /* ----- font color ----- */
  /* ----- diseabled ----- */
  /* ----- .mt5～.mt50 ----- */
  /* ----- .mb5～.mb50 ----- */
  /* ----- .ml5～.ml50 ----- */
  /* ----- .mr5～.mr50 ----- */
  /* ----- .pt5～.pt50 ----- */
  /* ----- .pb5～.pb50 ----- */
  /* ----- text-align ----- */
  /* ----- table block table cell ----- */
  /* ----- Chorome link outline ----- */
}
main div.mainContents div,
main div.mainContents span,
main div.mainContents applet,
main div.mainContents object,
main div.mainContents iframe,
main div.mainContents h1,
main div.mainContents h2,
main div.mainContents h3,
main div.mainContents h4,
main div.mainContents h5,
main div.mainContents h6,
main div.mainContents p,
main div.mainContents blockquote,
main div.mainContents pre,
main div.mainContents a,
main div.mainContents abbr,
main div.mainContents acronym,
main div.mainContents address,
main div.mainContents big,
main div.mainContents cite,
main div.mainContents code,
main div.mainContents del,
main div.mainContents dfn,
main div.mainContents em,
main div.mainContents img,
main div.mainContents ins,
main div.mainContents kbd,
main div.mainContents q,
main div.mainContents s,
main div.mainContents samp,
main div.mainContents small,
main div.mainContents strike,
main div.mainContents strong,
main div.mainContents sub,
main div.mainContents sup,
main div.mainContents tt,
main div.mainContents var,
main div.mainContents b,
main div.mainContents u,
main div.mainContents i,
main div.mainContents center,
main div.mainContents dl,
main div.mainContents dt,
main div.mainContents dd,
main div.mainContents ol,
main div.mainContents ul,
main div.mainContents li,
main div.mainContents fieldset,
main div.mainContents form,
main div.mainContents label,
main div.mainContents legend,
main div.mainContents table,
main div.mainContents caption,
main div.mainContents tbody,
main div.mainContents tfoot,
main div.mainContents thead,
main div.mainContents tr,
main div.mainContents th,
main div.mainContents td,
main div.mainContents article,
main div.mainContents aside,
main div.mainContents canvas,
main div.mainContents details,
main div.mainContents embed,
main div.mainContents figure,
main div.mainContents figcaption,
main div.mainContents footer,
main div.mainContents header,
main div.mainContents hgroup,
main div.mainContents menu,
main div.mainContents nav,
main div.mainContents output,
main div.mainContents ruby,
main div.mainContents section,
main div.mainContents summary,
main div.mainContents time,
main div.mainContents mark,
main div.mainContents audio,
main div.mainContents video {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
}
main div.mainContents article,
main div.mainContents aside,
main div.mainContents details,
main div.mainContents figcaption,
main div.mainContents figure,
main div.mainContents footer,
main div.mainContents header,
main div.mainContents hgroup,
main div.mainContents menu,
main div.mainContents nav,
main div.mainContents section {
  display: block;
}
main div.mainContents ol,
main div.mainContents ul {
  list-style: none;
}
main div.mainContents blockquote,
main div.mainContents q {
  quotes: none;
}
main div.mainContents blockquote:before,
main div.mainContents blockquote:after,
main div.mainContents q:before,
main div.mainContents q:after {
  content: "";
  content: none;
}
main div.mainContents table {
  border-collapse: collapse;
  border-spacing: 0;
}
main div.mainContents a {
  text-decoration: none;
  color: #0066cc;
}
main div.mainContents a:visited {
  text-decoration: none;
  color: #0066cc;
}
main div.mainContents a:hover,
main div.mainContents a:active {
  text-decoration: none;
  color: #0066cc;
}
main div.mainContents a:focus {
  text-decoration: none;
}
main div.mainContents a.disable {
  pointer-events: none;
}
main div.mainContents .fontSmall {
  font-size: 0.85rem;
}
main div.mainContents .fontB {
  font-weight: bold;
}
main div.mainContents .fontU {
  border-bottom: 1px solid;
}
main div.mainContents .fontRed {
  color: #f00;
}
main div.mainContents .disabled {
  opacity: 0.6;
}
main div.mainContents .mt5 {
  margin-top: 5px;
}
main div.mainContents .mt10 {
  margin-top: 10px;
}
main div.mainContents .mt15 {
  margin-top: 15px;
}
main div.mainContents .mt20 {
  margin-top: 20px;
}
main div.mainContents .mt30 {
  margin-top: 30px;
}
main div.mainContents .mt40 {
  margin-top: 40px;
}
main div.mainContents .mt50 {
  margin-top: 50px;
}
main div.mainContents .mb5 {
  margin-bottom: 5px;
}
main div.mainContents .mb10 {
  margin-bottom: 10px;
}
main div.mainContents .mb15 {
  margin-bottom: 15px;
}
main div.mainContents .mb20 {
  margin-bottom: 20px;
}
main div.mainContents .mb30 {
  margin-bottom: 30px;
}
main div.mainContents .mb40 {
  margin-bottom: 40px;
}
main div.mainContents .mb50 {
  margin-bottom: 50px;
}
main div.mainContents .ml5 {
  margin-left: 5px;
}
main div.mainContents .ml10 {
  margin-left: 10px;
}
main div.mainContents .ml15 {
  margin-left: 15px;
}
main div.mainContents .ml20 {
  margin-left: 20px;
}
main div.mainContents .ml30 {
  margin-left: 30px;
}
main div.mainContents .ml40 {
  margin-left: 40px;
}
main div.mainContents .ml50 {
  margin-left: 50px;
}
main div.mainContents .mr5 {
  margin-right: 5px;
}
main div.mainContents .mr10 {
  margin-right: 10px;
}
main div.mainContents .mr15 {
  margin-right: 15px;
}
main div.mainContents .mr20 {
  margin-right: 20px;
}
main div.mainContents .mr30 {
  margin-right: 30px;
}
main div.mainContents .mr40 {
  margin-right: 40px;
}
main div.mainContents .mr50 {
  margin-right: 50px;
}
main div.mainContents .pt5 {
  padding-top: 5px;
}
main div.mainContents .pt10 {
  padding-top: 10px;
}
main div.mainContents .pt15 {
  padding-top: 15px;
}
main div.mainContents .pt20 {
  padding-top: 20px;
}
main div.mainContents .pt30 {
  padding-top: 30px;
}
main div.mainContents .pt40 {
  padding-top: 40px;
}
main div.mainContents .pt50 {
  padding-top: 50px;
}
main div.mainContents .pb5 {
  padding-bottom: 5px;
}
main div.mainContents .pb10 {
  padding-bottom: 10px;
}
main div.mainContents .pb15 {
  padding-bottom: 15px;
}
main div.mainContents .pb20 {
  padding-bottom: 20px;
}
main div.mainContents .pb30 {
  padding-bottom: 30px;
}
main div.mainContents .pb40 {
  padding-bottom: 40px;
}
main div.mainContents .pb50 {
  padding-bottom: 50px;
}
main div.mainContents .aC {
  text-align: center;
}
main div.mainContents .aR {
  text-align: right;
}
main div.mainContents .aL {
  text-align: left;
}
main div.mainContents .vm {
  vertical-align: middle;
}
main div.mainContents .vb {
  vertical-align: bottom;
}
main div.mainContents .vt {
  vertical-align: top;
}
main div.mainContents .table-block {
  display: table;
}
main div.mainContents .table-block .table-cell {
  display: table-cell;
  vertical-align: middle;
}
main div.mainContents .table-block .table-cell.w100 {
  width: 100%;
}
main div.mainContents .table-block .table-cell.w50 {
  width: 50%;
}
main div.mainContents :focus {
  outline: none;
}
main div.mainContents {
  position: relative;
  overflow: hidden;
  /* common */
  /* common */
  /* index.html
   * Topページ */
  /* index.html
   * Topページ ここまで */
  /* feature modal dialog
   * モーダルダイアログ　*/
  /* feature modal dialog
   * モーダルダイアログ　*/
}
@media (min-width: 481px) {
  main div.mainContents br.spBR {
    display: none;
  }
}
main div.mainContents br.pcBR {
  display: none;
}
@media (min-width: 481px) {
  main div.mainContents br.pcBR {
    display: inline;
  }
}
main div.mainContents div.headerTitleArea {
  width: 100%;
  box-sizing: border-box;
  height: 110px;
  padding: 15px 0;
}
@media (min-width: 481px) {
  main div.mainContents div.headerTitleArea {
    height: 110px;
    padding: 15px 0;
  }
}
main div.mainContents div.headerTitleArea h2 {
  box-sizing: border-box;
  font-weight: bold;
  position: relative;
  height: 80px;
  font-size: 36px;
  padding-left: 100px;
  line-height: 80px;
}
@media (min-width: 481px) {
  main div.mainContents div.headerTitleArea h2 {
    width: 980px;
    height: 80px;
    line-height: 80px;
    margin-left: auto;
    margin-right: auto;
    font-size: 36px;
    padding-left: 100px;
  }
}
main div.mainContents div.headerTitleArea h2::before {
  content: "";
  width: 62px;
  height: 80px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 8px;
  margin: auto;
}
main div.mainContents div.headerTitleArea h2.heat {
  color: #215787;
}
main div.mainContents div.headerTitleArea h2.heat::before {
  background: url("../images/heat/icon_header.png") no-repeat center center;
}
main div.mainContents div.headerTitleArea h2.methane {
  color: #215787;
}
main div.mainContents div.headerTitleArea h2.methane::before {
  background: url("../images/methane/icon_header.png") no-repeat center center;
}
main div.mainContents div.headerTitleArea h2.rdf {
  color: #215787;
}
main div.mainContents div.headerTitleArea h2.rdf::before {
  background: url("../images/rdf/icon_header.png") no-repeat center center;
}
main div.mainContents div.sectionTitleArea {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 40px;
  position: relative;
  z-index: 30;
}
@media (min-width: 481px) {
  main div.mainContents div.sectionTitleArea {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 80px;
  }
}
main div.mainContents div.sectionTitleArea h3 {
  position: relative;
  z-index: 20;
  color: #215787;
  font-family: "Arial", "Helvetica", sans-serif;
  font-size: 14px;
  padding-top: 5px;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
}
@media (min-width: 481px) {
  main div.mainContents div.sectionTitleArea h3 {
    font-size: 16px;
  }
}
main div.mainContents div.sectionTitleArea h2 {
  margin-top: 22px;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  font-weight: bold;
  margin-bottom: 44px;
  font-size: 21px;
  line-height: 31px;
  position: relative;
  z-index: 20;
}
@media (min-width: 481px) {
  main div.mainContents div.sectionTitleArea h2 {
    line-height: 1rem;
    margin-top: 40px;
    font-size: 30px;
    width: 980px;
    margin-bottom: 56px;
    margin-left: auto;
    margin-right: auto;
  }
}
main div.mainContents div.sectionTitleArea h2::after {
  content: "";
  width: 35px;
  height: 4px;
  background: #215787;
  display: block;
  position: absolute;
  right: 0;
  left: 0;
  bottom: -10px;
  margin: auto;
}
@media (min-width: 481px) {
  main div.mainContents div.sectionTitleArea h2::after {
    width: 50px;
    height: 5px;
    bottom: -28px;
  }
}
main div.mainContents div.sectionTitleArea p {
  box-sizing: border-box;
  font-size: 16px;
  line-height: 30px;
  padding: 0 15px;
  text-align: left;
  position: relative;
  z-index: 20;
}
@media (min-width: 481px) {
  main div.mainContents div.sectionTitleArea p {
    padding: 0;
    font-size: 20px;
    line-height: 40px;
    text-align: center;
  }
}
main div.mainContents div.mainImageArea {
  position: relative;
  z-index: 20;
  width: 100%;
  box-sizing: border-box;
  height: 350px;
}
main div.mainContents div.mainImageArea::after {
  content: "";
  width: 100%;
  height: 261px;
  background: url("../images/common/bg_mainImageAreaUnder.png") no-repeat;
  display: block;
  position: absolute;
  z-index: 20;
  bottom: 0;
}
@media (min-width: 481px) {
  main div.mainContents div.mainImageArea {
    height: 1061px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 46px;
  }
}
main div.mainContents div.mainImageArea p {
  width: 100%;
  box-sizing: border-box;
  color: #fff;
  padding: 20px 15px 10px;
  position: relative;
  z-index: 20;
}
@media (min-width: 481px) {
  main div.mainContents div.mainImageArea p {
    width: 980px;
    margin: 0 auto;
    padding: 0;
    font-size: 30px;
    line-height: 50px;
  }
}
main div.mainContents div.mainImageArea .mainImage {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 20;
}
@media (min-width: 481px) {
  main div.mainContents div.mainImageArea .mainImage {
    height: 840px;
  }
}
main div.mainContents div.mainImageArea.heat {
  background-image: url("../images/heat/bg_mainImage.png");
}
main div.mainContents div.mainImageArea.methane {
  background-image: url("../images/methane/bg_mainImage.png");
}
main div.mainContents div.mainImageArea.rdf {
  background-image: url("../images/rdf/bg_mainImage.png");
}
main div.mainContents div.mainImageArea.rdf mainImage img {
  height: 80%;
}
@media (min-width: 481px) {
  main div.mainContents div.mainImageArea.rdf mainImage img {
    height: auto;
  }
}
main div.mainContents div.featuresListArea {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 20px;
  position: relative;
  z-index: 20;
}
@media (min-width: 481px) {
  main div.mainContents div.featuresListArea {
    width: 980px;
    margin-left: auto;
    margin-right: auto;
  }
}
main div.mainContents div.featuresListArea ul.featuresList {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
}
main div.mainContents div.featuresListArea ul.featuresList li {
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  padding-bottom: 20px;
}
@media (min-width: 481px) {
  main div.mainContents div.featuresListArea ul.featuresList li {
    width: 50%;
    height: 350px;
    padding-bottom: 0;
  }
  main div.mainContents div.featuresListArea ul.featuresList li:nth-child(odd) {
    text-align: left;
  }
  main div.mainContents div.featuresListArea ul.featuresList li:nth-child(even) {
    text-align: right;
  }
}
main div.mainContents div.featuresListArea ul.featuresList li:last-child {
  padding-bottom: 0;
}
main div.mainContents div.featuresListArea ul.featuresList li button.featuresBtn {
  border: 0;
  cursor: pointer;
  width: 300px;
  height: 198px;
}
@media (min-width: 481px) {
  main div.mainContents div.featuresListArea ul.featuresList li button.featuresBtn {
    width: 450px;
    height: 297px;
  }
}
main div.mainContents div.featuresListArea ul.featuresList li button.heat01 {
  background-image: url("../images/heat/img_features01.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
main div.mainContents div.featuresListArea ul.featuresList li button.heat02 {
  background-image: url("../images/heat/img_features02.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
main div.mainContents div.featuresListArea ul.featuresList li button.heat03 {
  background-image: url("../images/heat/img_features03.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
main div.mainContents div.featuresListArea ul.featuresList li button.heat04 {
  background-image: url("../images/heat/img_features04.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
main div.mainContents div.featuresListArea ul.featuresList li button.methane01 {
  background-image: url("../images/methane/img_features01.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
main div.mainContents div.featuresListArea ul.featuresList li button.methane02 {
  background-image: url("../images/methane/img_features02.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
main div.mainContents div.featuresListArea ul.featuresList li button.methane03 {
  background-image: url("../images/methane/img_features03sp.png");
  background-repeat: no-repeat;
  background-position: left top;
  height: 356px;
  background-size: cover;
}
@media (min-width: 481px) {
  main div.mainContents div.featuresListArea ul.featuresList li button.methane03 {
    background-image: url("../images/methane/img_features03.png");
    width: 980px;
    height: 297px;
  }
}
main div.mainContents div.featuresListArea ul.featuresList li button.methane04 {
  background-image: url("../images/methane/img_features04.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
main div.mainContents div.featuresListArea ul.featuresList li button.rdf01 {
  background-image: url("../images/rdf/img_features01.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
main div.mainContents div.featuresListArea ul.featuresList li button.rdf02 {
  background-image: url("../images/rdf/img_features02.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
main div.mainContents div.featuresListArea ul.featuresList li button.rdf03 {
  background-image: url("../images/rdf/img_features03.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
main div.mainContents div.featuresListArea ul.featuresList li button.rdf04 {
  background-image: url("../images/rdf/img_features04.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
main div.mainContents div.featuresListArea ul.featuresList li button:hover {
  opacity: 0.6;
}
main div.mainContents div.featuresListArea p {
  padding: 0 15px 40px;
}
@media (min-width: 481px) {
  main div.mainContents div.featuresListArea p {
    padding: 0 0 40px;
    font-size: 20px;
    line-height: 30px;
  }
}
main div.mainContents div.navigationArea {
  width: 100%;
  box-sizing: border-box;
  margin-top: 30px;
  position: relative;
  z-index: 20;
}
@media (min-width: 481px) {
  main div.mainContents div.navigationArea {
    width: 980px;
    margin-top: 50px;
    margin-left: auto;
    margin-right: auto;
  }
}
main div.mainContents div.navigationArea ul.navigationMenu {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
}
main div.mainContents div.navigationArea ul.navigationMenu li {
  width: 100%;
  box-sizing: border-box;
  text-align: center;
}
main div.mainContents div.navigationArea ul.navigationMenu li a {
  box-sizing: border-box;
  display: inline-block;
  color: #fff;
  width: 335px;
  height: 50px;
  line-height: 50px;
  text-align: center;
}
@media (min-width: 481px) {
  main div.mainContents div.navigationArea ul.navigationMenu li a {
    width: 346px;
    height: 80px;
    font-size: 18px;
    line-height: 80px;
  }
}
main div.mainContents div.navigationArea ul.navigationMenu li a:first-child {
  background: url("../images/common/bg_navLeft_sp.png") no-repeat center center;
  margin-bottom: 10px;
}
main div.mainContents div.navigationArea ul.navigationMenu li a:last-child {
  background: url("../images/common/bg_navRight_sp.png") no-repeat center center;
}
@media (min-width: 481px) {
  main div.mainContents div.navigationArea ul.navigationMenu li {
    width: 50%;
  }
  main div.mainContents div.navigationArea ul.navigationMenu li:first-child {
    text-align: left;
  }
  main div.mainContents div.navigationArea ul.navigationMenu li:first-child a {
    background: url("../images/common/bg_navLeft.png");
    padding-left: 94px;
    margin-bottom: 0;
    text-align: left;
  }
  main div.mainContents div.navigationArea ul.navigationMenu li:last-child {
    text-align: right;
  }
  main div.mainContents div.navigationArea ul.navigationMenu li:last-child a {
    background: url("../images/common/bg_navRight.png");
    padding-left: 69px;
    text-align: left;
  }
}
main div.mainContents div.contactsArea {
  width: 100%;
  box-sizing: border-box;
  background: #fff;
  padding-bottom: 50px;
  position: relative;
  padding: 40px 15px 40px;
  position: relative;
  z-index: 20;
}
@media (min-width: 481px) {
  main div.mainContents div.contactsArea {
    margin-top: 80px;
    padding: 40px 0 50px;
  }
}
main div.mainContents div.contactsArea h2 {
  width: 100%;
  box-sizing: border-box;
  font-size: 18px;
  margin-bottom: 10px;
}
@media (min-width: 481px) {
  main div.mainContents div.contactsArea h2 {
    width: 940px;
    margin-left: auto;
    margin-right: auto;
    font-size: 25px;
    margin-bottom: 13px;
  }
}
main div.mainContents div.contactsArea div.contactLink {
  width: 100%;
  box-sizing: border-box;
  border: 4px solid #e6e7e8;
}
@media (min-width: 481px) {
  main div.mainContents div.contactsArea div.contactLink {
    width: 940px;
    height: 116px;
    margin-left: auto;
    margin-right: auto;
  }
}
main div.mainContents div.contactsArea div.contactLink .inner {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  padding: 10px;
  background: #fff;
  align-items: center;
  font-size: 14px;
}
@media (min-width: 481px) {
  main div.mainContents div.contactsArea div.contactLink .inner {
    padding: 30px 25px 30px 105px;
    background: #fff url("/common_new/img/contact_ic01.png") no-repeat 25px 50%;
  }
}
main div.mainContents div.contactsArea div.contactLink .inner span {
  width: calc(100% - 146px);
  padding: 0 10px 0 0;
}
@media (min-width: 481px) {
  main div.mainContents div.contactsArea div.contactLink .inner span {
    width: auto;
    padding: 0;
  }
}
main div.mainContents div.contactsArea div.contactLink .inner a {
  background: #4d4d4f;
  color: #fff;
  display: flex;
  position: relative;
  width: 146px;
  height: 42px;
  line-height: 42px;
  padding-left: 15px;
}
main div.mainContents div.contactsArea div.contactLink .inner a::after {
  content: "";
  width: 10px;
  height: 10px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  transform: translateY(-50%) rotate(45deg);
  display: block;
  position: absolute;
  top: 50%;
  left: auto;
  right: 18px;
}
@media (min-width: 481px) {
  main div.mainContents div.contactsArea div.contactLink .inner a {
    width: 164px;
    height: 45px;
    font-size: 18px;
    margin-left: auto;
    margin-right: 0;
    line-height: 45px;
    padding-left: 18px;
  }
}
main div.mainContents div.youtube {
  position: relative;
  z-index: 20;
}
main div.mainContents div.youtube iframe {
  width: calc(100% - 30px);
  height: auto;
  aspect-ratio: 16/9;
}
@media (min-width: 481px) {
  main div.mainContents div.youtube iframe {
    width: 800px;
    min-width: 800px;
  }
}
main div.mainContents div.movieLink {
  padding: 0 15px;
  margin-bottom: 20px;
}
@media (min-width: 481px) {
  main div.mainContents div.movieLink {
    padding: 0;
    margin-bottom: 70px;
  }
}
main div.mainContents div.bgAnime1 {
  display: none;
}
@media (min-width: 481px) {
  main div.mainContents div.bgAnime1 {
    display: block;
    position: absolute;
    width: 1600px;
    height: 100vh;
    top: 550px;
    left: -20%;
    z-index: 10;
  }
}
main div.mainContents div.bgAnime2 {
  display: none;
}
@media (min-width: 481px) {
  main div.mainContents div.bgAnime2 {
    display: block;
    position: absolute;
    width: 1920px;
    height: 100vh;
    top: 800px;
    right: -40%;
    z-index: 10;
  }
}
main div.mainContents div.bgAnime3 {
  display: none;
}
@media (min-width: 481px) {
  main div.mainContents div.bgAnime3 {
    display: block;
    position: absolute;
    width: 1920px;
    height: 100vh;
    top: 350px;
    left: -40%;
    z-index: 10;
  }
}
main div.mainContents div.bgAnime4 {
  display: none;
}
@media (min-width: 481px) {
  main div.mainContents div.bgAnime4 {
    display: block;
    position: absolute;
    width: 1920px;
    height: 100vh;
    top: 150px;
    right: -40%;
    z-index: 10;
  }
}
main div.mainContents div.bgAnime5 {
  display: none;
}
@media (min-width: 481px) {
  main div.mainContents div.bgAnime5 {
    display: block;
    position: absolute;
    width: 1920px;
    height: 100vh;
    top: 630px;
    left: -30%;
    z-index: 10;
  }
}
main div.mainContents div.bgAnime6 {
  display: none;
}
@media (min-width: 481px) {
  main div.mainContents div.bgAnime6 {
    display: block;
    position: absolute;
    width: 1920px;
    height: 100vh;
    top: 650px;
    right: -40%;
    z-index: 10;
  }
}
main div.mainContents div.bgAnime7 {
  display: none;
}
@media (min-width: 481px) {
  main div.mainContents div.bgAnime7 {
    display: block;
    position: absolute;
    width: 1920px;
    height: 100vh;
    top: 2050px;
    right: -40%;
    z-index: 10;
  }
}
main div.mainContents div.bgAnime8 {
  display: none;
}
@media (min-width: 481px) {
  main div.mainContents div.bgAnime8 {
    display: block;
    position: absolute;
    width: 1920px;
    height: 100vh;
    top: 2350px;
    left: -20%;
    z-index: 10;
  }
}
main div.mainContents ul.rdfList {
  text-indent: -2rem;
  padding-left: 2rem;
  margin-top: 10px;
  margin-bottom: 50px;
}
@media (min-width: 481px) {
  main div.mainContents ul.rdfList {
    font-size: 22px;
    line-height: 30px;
  }
}
@media (min-width: 481px) {
  main div.mainContents ul.rdfList li {
    margin-bottom: 10px;
  }
}
main div.mainContents ul.rdfList li::before {
  content: "▲";
  text-indent: 0rem;
  padding-left: 0rem;
  display: inline-block;
  position: relative;
  color: #7DC2BD;
  vertical-align: baseline;
  transform: rotate(90deg);
  width: 20px;
  height: 17px;
}
main div.mainContents hr {
  width: 90%;
  display: block;
  margin: 0 auto;
  height: 0;
  border-top: 5px solid #D2D2D2;
}
@media (min-width: 481px) {
  main div.mainContents hr {
    width: 980px;
    margin: 0 auto;
    border-top: 10px solid #D2D2D2;
  }
}
main div.mainContents div.heroImageArea {
  width: 100%;
  height: 450px;
  box-sizing: border-box;
  background-color: #81C784;
  background-image: url("../images/index/bg_hearoImage_sp.png");
  background-position: center center;
  display: flex;
  justify-content: center;
}
@media (min-width: 481px) {
  main div.mainContents div.heroImageArea {
    background-image: url("../images/index/bg_hearoImage.png");
    background-position: center center;
    height: 900px;
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
  }
}
main div.mainContents div.heroImageArea #animation_container {
  display: none;
}
@media (min-width: 481px) {
  main div.mainContents div.heroImageArea #animation_container {
    display: block;
  }
}
main div.mainContents div.heroImageUnder {
  width: 100%;
  height: 0;
  position: relative;
  box-sizing: border-box;
  margin: 0;
}
main div.mainContents div.heroImageUnder.visible::after {
  opacity: 1;
}
main div.mainContents div.heroImageUnder::after {
  content: "";
  width: 100%;
  height: 232px;
  background: url("../images/index/bg_hearoImageUnder.png") no-repeat;
  display: block;
  position: absolute;
  top: -231px;
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
}
main div.mainContents div.menuArea {
  width: 100%;
  box-sizing: border-box;
  position: relative;
  z-index: 20;
}
@media (min-width: 481px) {
  main div.mainContents div.menuArea {
    width: 980px;
    margin-left: auto;
    margin-right: auto;
  }
}
main div.mainContents div.menuArea ul.menuList {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  z-index: 20;
}
main div.mainContents div.menuArea ul.menuList li.menu {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  padding-bottom: 10px;
  justify-content: center;
}
@media (min-width: 481px) {
  main div.mainContents div.menuArea ul.menuList li.menu {
    width: 33.33%;
    padding-bottom: 30px;
    justify-content: left;
  }
}
main div.mainContents div.menuArea ul.menuList li.menu a {
  display: flex;
  width: 336px;
  height: 50px;
  align-items: center;
  color: #4C4948;
  padding-left: 60px;
  background: url("../images/index/bg_menu04_sp.png");
  font-size: 18px;
  position: relative;
}
@media (min-width: 481px) {
  main div.mainContents div.menuArea ul.menuList li.menu a {
    background: url("../images/index/bg_menu04.png");
    padding-left: 92px;
    font-size: 24px;
    line-height: 30px;
    width: 310px;
    height: 100px;
  }
}
main div.mainContents div.menuArea ul.menuList li.menu a.fontSmallMenu {
  font-size: 15px;
}
@media (min-width: 481px) {
  main div.mainContents div.menuArea ul.menuList li.menu a.fontSmallMenu {
    font-size: 21px;
  }
}
main div.mainContents div.menuArea ul.menuList li.menu a.site::after {
  content: "";
  width: 16px;
  height: 14px;
  position: absolute;
  right: 10px;
  background: url("../images/index/icon_linksite_sp.png") no-repeat center center;
}
@media (min-width: 481px) {
  main div.mainContents div.menuArea ul.menuList li.menu a.site::after {
    width: 24px;
    height: 21px;
    position: initial;
    background: url("../images/index/icon_linksite.png") no-repeat center center;
    margin-left: 8px;
  }
}
main div.mainContents div.menuArea ul.menuList li.menu a.pdf {
  padding-left: 0;
  justify-content: center;
}
main div.mainContents div.menuArea ul.menuList li.menu a.pdf::after {
  content: "";
  margin-left: 8px;
  width: 16px;
  height: 16px;
  background: url("../images/index/icon_pdf_sp.png") no-repeat center center;
}
@media (min-width: 481px) {
  main div.mainContents div.menuArea ul.menuList li.menu a.pdf::after {
    width: 24px;
    height: 24px;
    background: url("../images/index/icon_pdf.png") no-repeat center center;
  }
}
@media (min-width: 481px) {
  main div.mainContents div.menuArea ul.menuList li.menu:nth-child(3n+2) {
    justify-content: center;
  }
}
@media (min-width: 481px) {
  main div.mainContents div.menuArea ul.menuList li.menu:nth-child(3n+3) {
    justify-content: end;
  }
}
main div.mainContents div.menuArea ul.menuList li.menu01 a {
  background: url("../images/index/bg_menu01_sp.png");
  color: #fff;
}
@media (min-width: 481px) {
  main div.mainContents div.menuArea ul.menuList li.menu01 a {
    background: url("../images/index/bg_menu01.png");
  }
}
main div.mainContents div.menuArea ul.menuList li.menu02 a {
  background: url("../images/index/bg_menu02_sp.png");
  color: #fff;
}
@media (min-width: 481px) {
  main div.mainContents div.menuArea ul.menuList li.menu02 a {
    background: url("../images/index/bg_menu02.png");
  }
}
main div.mainContents div.menuArea ul.menuList li.menu03 a {
  background: url("../images/index/bg_menu03_sp.png");
  color: #fff;
}
@media (min-width: 481px) {
  main div.mainContents div.menuArea ul.menuList li.menu03 a {
    background: url("../images/index/bg_menu03.png");
  }
}
@media (min-width: 481px) {
  main div.mainContents div.menuArea ul.menuList li.menu05 {
    width: 50%;
  }
}
@media (min-width: 481px) {
  main div.mainContents div.menuArea ul.menuList li.menu05:last-child {
    text-align: right;
  }
}
main div.mainContents div.menuArea ul.menuList li.menu05 a {
  width: 335px;
  height: 50px;
  padding-left: 127px;
  background: url("../images/index/bg_menu05_sp.png");
  color: #fff;
  line-height: 50px;
}
@media (min-width: 481px) {
  main div.mainContents div.menuArea ul.menuList li.menu05 a {
    width: 485px;
    height: 80px;
    padding-left: 105px;
    background: url("../images/index/bg_menu05.png");
  }
}
main div.mainContents div.menuArea ul.menuList li.menu06 a {
  width: 335px;
  height: 50px;
  background: url("../images/index/bg_menu06_sp.png");
  color: #fff;
  line-height: 50px;
}
@media (min-width: 481px) {
  main div.mainContents div.menuArea ul.menuList li.menu06 a {
    width: 318px;
    height: 80px;
    padding-left: 72px;
    background: url("../images/index/bg_menu06.png");
  }
}
main div.mainContents div.menuArea ul.menuList li.menu07 a {
  background: url("../images/index/bg_menu07_sp.png");
  color: #fff;
}
@media (min-width: 481px) {
  main div.mainContents div.menuArea ul.menuList li.menu07 a {
    background: url("../images/index/bg_menu07.png");
  }
}
main div.mainContents div.menuArea ul.menuList li.menu08 a {
  background: url("../images/index/bg_menu08_sp.png");
  color: #fff;
}
@media (min-width: 481px) {
  main div.mainContents div.menuArea ul.menuList li.menu08 a {
    background: url("../images/index/bg_menu08.png");
  }
}
main div.mainContents div.menuArea ul.menuList li.menu09 a {
  background: url("../images/index/bg_menu09_sp.png");
  color: #fff;
}
@media (min-width: 481px) {
  main div.mainContents div.menuArea ul.menuList li.menu09 a {
    background: url("../images/index/bg_menu09.png");
  }
}
main div.mainContents div.underConstructionArea {
  background: #E2F4EA;
  position: relative;
  margin-top: 50px;
  margin-bottom: 50px;
  z-index: 20;
}
@media (min-width: 481px) {
  main div.mainContents div.underConstructionArea {
    margin-top: 150px;
    margin-bottom: 150px;
  }
}
main div.mainContents div.underConstructionArea .cardBase {
  box-sizing: border-box;
  background: #fff;
  border: none;
  overflow: hidden;
  position: relative;
  box-shadow: 3px 3px 10px -5px rgba(0, 0, 0, 0.16);
  width: 230px;
  height: 276px;
  border-radius: 10px;
  cursor: grab;
}
main div.mainContents div.underConstructionArea .cardBase:active {
  cursor: grabbing;
}
@media (min-width: 481px) {
  main div.mainContents div.underConstructionArea .cardBase {
    width: 350px;
    height: 420px;
  }
}
main div.mainContents div.underConstructionArea .cardBase::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  width: 20px;
  height: 20px;
  background: url("../images/index/icon_zoomIn.png") no-repeat center center;
  z-index: 200;
}
main div.mainContents div.underConstructionArea .cardBase .photo {
  width: 100%;
  height: 180px;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
}
@media (min-width: 481px) {
  main div.mainContents div.underConstructionArea .cardBase .photo {
    height: 273px;
  }
}
main div.mainContents div.underConstructionArea .cardBase .photo span {
  position: absolute;
  color: #fff;
  bottom: 2px;
  right: 8px;
  z-index: 10;
  font-size: 7px;
  border-radius: 2px;
  padding-left: 5px;
  padding-right: 5px;
  background-color: rgba(38, 50, 56, 0.4);
}
@media (min-width: 481px) {
  main div.mainContents div.underConstructionArea .cardBase .photo span {
    bottom: 8px;
    font-size: 11px;
  }
}
main div.mainContents div.underConstructionArea .cardBase .photo .photoBtn {
  cursor: zoom-in;
}
main div.mainContents div.underConstructionArea .cardBase dl {
  width: 100%;
  box-sizing: border-box;
  padding: 5px 10px 0 13px;
  font-size: 12px;
  line-height: 16px;
}
@media (min-width: 481px) {
  main div.mainContents div.underConstructionArea .cardBase dl {
    padding: 10px 10px 0 20px;
    font-size: 20px;
    line-height: 30px;
  }
}
main div.mainContents div.underConstructionArea .cardBase dl dt {
  padding-bottom: 3px;
}
main div.mainContents div.underConstructionArea .cardBase ul.link {
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  position: absolute;
  left: 13px;
  bottom: 13px;
}
@media (min-width: 481px) {
  main div.mainContents div.underConstructionArea .cardBase ul.link {
    left: 15px;
    bottom: 15px;
  }
}
main div.mainContents div.underConstructionArea .cardBase ul.link li {
  padding-right: 10px;
}
main div.mainContents div.underConstructionArea .cardBase ul.link li a {
  width: 70px;
  height: 20px;
  font-size: 9px;
  line-height: 20px;
  display: block;
  box-sizing: border-box;
  border: 1px solid #D9DEE2;
  background: #fff;
  display: flex;
  justify-content: center;
  color: #4C4948;
  position: relative;
  border-radius: 6px;
}
@media (min-width: 481px) {
  main div.mainContents div.underConstructionArea .cardBase ul.link li a {
    width: 105px;
    height: 30px;
    font-size: 14px;
    line-height: 30px;
  }
}
main div.mainContents div.underConstructionArea .cardBase ul.link li a::before {
  content: "";
  width: 4px;
  height: 4px;
  left: 5px;
  border-top: 1px solid #BC3A39;
  border-right: 1px solid #BC3A39;
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  transform: rotate(45deg);
}
@media (min-width: 481px) {
  main div.mainContents div.underConstructionArea .cardBase ul.link li a::before {
    width: 8px;
    height: 8px;
    left: 6px;
  }
}
main div.mainContents div.underConstructionArea .cardBase ul.link li a.disable {
  pointer-events: none;
  cursor: default;
  color: #78909C;
  text-decoration: none;
}
main div.mainContents div.underConstructionArea .cardBase ul.link li a.disable::before {
  border-top: 1px solid #78909C;
  border-right: 1px solid #78909C;
}
main div.mainContents div.underConstructionArea::before {
  content: "";
  width: 100%;
  height: 50px;
  background: url("../images/index/bg_underConstruction.png") no-repeat left bottom;
  display: block;
  position: absolute;
  top: -49px;
  z-index: 0;
}
@media (min-width: 481px) {
  main div.mainContents div.underConstructionArea::before {
    height: 206px;
    top: -205px;
  }
}
main div.mainContents div.underConstructionArea::after {
  content: "";
  width: 100%;
  height: 206px;
  background: url("../images/index/bg_underConstruction.png") no-repeat;
  display: block;
  position: absolute;
  bottom: -205px;
  transform: rotate(180deg);
  z-index: 0;
}
main div.mainContents div.inOperationArea {
  position: relative;
  margin-bottom: 50px;
}
@media (min-width: 481px) {
  main div.mainContents div.inOperationArea {
    margin-bottom: 150px;
  }
}
main div.mainContents div.inOperationArea .cardBase {
  box-sizing: border-box;
  background: #fff;
  border: none;
  overflow: hidden;
  position: relative;
  box-shadow: 5px 5px 20px -5px rgba(0, 0, 0, 0.3);
  width: 230px;
  height: 276px;
  border-radius: 10px;
  cursor: grab;
}
main div.mainContents div.inOperationArea .cardBase:active {
  cursor: grabbing;
}
@media (min-width: 481px) {
  main div.mainContents div.inOperationArea .cardBase {
    width: 350px;
    height: 420px;
  }
}
main div.mainContents div.inOperationArea .cardBase .photo {
  width: 100%;
  height: 180px;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
}
@media (min-width: 481px) {
  main div.mainContents div.inOperationArea .cardBase .photo {
    height: 273px;
  }
}
main div.mainContents div.inOperationArea .cardBase .photo span {
  position: absolute;
  color: #fff;
  bottom: 2px;
  right: 8px;
  z-index: 10;
  font-size: 7px;
  border-radius: 2px;
  padding-left: 5px;
  padding-right: 5px;
  background-color: rgba(38, 50, 56, 0.4);
}
@media (min-width: 481px) {
  main div.mainContents div.inOperationArea .cardBase .photo span {
    bottom: 8px;
    font-size: 11px;
  }
}
main div.mainContents div.inOperationArea .cardBase dl {
  width: 100%;
  box-sizing: border-box;
  padding: 5px 10px 0 13px;
  font-size: 12px;
  line-height: 16px;
}
@media (min-width: 481px) {
  main div.mainContents div.inOperationArea .cardBase dl {
    padding: 10px 10px 0 20px;
    font-size: 20px;
    line-height: 30px;
  }
}
main div.mainContents div.inOperationArea .cardBase dl dt {
  padding-bottom: 3px;
}
main div.mainContents div.inOperationArea .cardBase ul.link {
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  position: absolute;
  left: 13px;
  bottom: 13px;
}
@media (min-width: 481px) {
  main div.mainContents div.inOperationArea .cardBase ul.link {
    left: 15px;
    bottom: 15px;
  }
}
main div.mainContents div.inOperationArea .cardBase ul.link li {
  padding-right: 10px;
}
main div.mainContents div.inOperationArea .cardBase ul.link li a {
  width: 100%;
  height: 20px;
  font-size: 9px;
  line-height: 20px;
  display: block;
  box-sizing: border-box;
  padding: 0 15px 0 25px;
  border: 1px solid #D9DEE2;
  background: #fff;
  display: flex;
  justify-content: center;
  color: #4C4948;
  position: relative;
  border-radius: 6px;
}
@media (min-width: 481px) {
  main div.mainContents div.inOperationArea .cardBase ul.link li a {
    height: 30px;
    font-size: 14px;
    line-height: 30px;
  }
}
main div.mainContents div.inOperationArea .cardBase ul.link li a::before {
  content: "";
  width: 4px;
  height: 4px;
  left: 5px;
  border-top: 1px solid #BC3A39;
  border-right: 1px solid #BC3A39;
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  transform: rotate(45deg);
}
@media (min-width: 481px) {
  main div.mainContents div.inOperationArea .cardBase ul.link li a::before {
    width: 8px;
    height: 8px;
    left: 6px;
  }
}
main div.mainContents div.inOperationArea .cardBase ul.link li a.disable {
  pointer-events: none;
  cursor: default;
}
main div.mainContents div.inOperationArea .cardBase ul.link li a.disable::before {
  border-top: 1px solid #757575;
  border-right: 1px solid #757575;
}
main div.mainContents div.indexContactsArea {
  width: 100%;
  box-sizing: border-box;
  background: #E9E6DE;
  padding-bottom: 50px;
  border-bottom: 1px solid #fff;
  position: relative;
  padding: 40px 15px 40px;
  z-index: 20;
}
@media (min-width: 481px) {
  main div.mainContents div.indexContactsArea {
    margin-top: 150px;
    padding: 40px 0 50px;
  }
}
main div.mainContents div.indexContactsArea h2 {
  width: 100%;
  box-sizing: border-box;
  font-size: 18px;
  margin-bottom: 10px;
}
@media (min-width: 481px) {
  main div.mainContents div.indexContactsArea h2 {
    width: 940px;
    margin-left: auto;
    margin-right: auto;
    font-size: 25px;
    margin-bottom: 13px;
  }
}
main div.mainContents div.indexContactsArea div.contactLink {
  width: 100%;
  box-sizing: border-box;
  background: #e6e7e8;
  border: 2px solid #d2d0ca;
  padding: 4px;
  overflow: hidden;
}
@media (min-width: 481px) {
  main div.mainContents div.indexContactsArea div.contactLink {
    width: 940px;
    height: 116px;
    margin-left: auto;
    margin-right: auto;
  }
}
main div.mainContents div.indexContactsArea div.contactLink .inner {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  padding: 10px;
  background: #fff;
  align-items: center;
  font-size: 14px;
}
@media (min-width: 481px) {
  main div.mainContents div.indexContactsArea div.contactLink .inner {
    padding: 30px 25px 30px 105px;
    background: #fff url("/common_new/img/contact_ic01.png") no-repeat 25px 50%;
  }
}
main div.mainContents div.indexContactsArea div.contactLink .inner span {
  width: calc(100% - 146px);
  padding: 0 10px 0 0;
}
@media (min-width: 481px) {
  main div.mainContents div.indexContactsArea div.contactLink .inner span {
    width: auto;
    padding: 0;
  }
}
main div.mainContents div.indexContactsArea div.contactLink .inner a {
  background: #4d4d4f;
  color: #fff;
  display: flex;
  position: relative;
  width: 146px;
  height: 42px;
  line-height: 42px;
  padding-left: 15px;
}
main div.mainContents div.indexContactsArea div.contactLink .inner a::after {
  content: "";
  width: 10px;
  height: 10px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  transform: translateY(-50%) rotate(45deg);
  display: block;
  position: absolute;
  top: 50%;
  left: auto;
  right: 18px;
}
@media (min-width: 481px) {
  main div.mainContents div.indexContactsArea div.contactLink .inner a {
    width: 164px;
    height: 45px;
    font-size: 18px;
    margin-left: auto;
    margin-right: 0;
    line-height: 45px;
    padding-left: 18px;
  }
}
main div.mainContents div.indexContactsArea::before {
  content: "";
  width: 100%;
  height: 206px;
  background: url("../images/index/bg_contact.png") no-repeat;
  display: block;
  position: absolute;
  top: -205px;
  overflow: hidden;
}
main div.mainContents div#splide-track {
  position: relative;
}
main div.mainContents div#splide-track::before {
  content: "";
  position: absolute;
  background-image: linear-gradient(90deg, rgb(226, 244, 234) 20%, rgba(226, 244, 234, 0));
  z-index: 100;
  top: 0;
  left: 0;
  width: 50px;
  height: 320px;
}
@media (min-width: 481px) {
  main div.mainContents div#splide-track::before {
    width: 150px;
    height: 500px;
  }
}
main div.mainContents div#splide-track::after {
  content: "";
  position: absolute;
  background-image: linear-gradient(90deg, rgba(226, 244, 234, 0), rgb(226, 244, 234) 80%);
  z-index: 100;
  top: 0;
  right: 0;
  width: 50px;
  height: 320px;
}
@media (min-width: 481px) {
  main div.mainContents div#splide-track::after {
    width: 150px;
    height: 500px;
  }
}
main div.mainContents div#splide2-track {
  position: relative;
}
main div.mainContents div#splide2-track::before {
  content: "";
  position: absolute;
  background-image: linear-gradient(90deg, rgb(255, 255, 255) 20%, rgba(255, 255, 255, 0));
  z-index: 100;
  top: 0;
  left: 0;
  width: 50px;
  height: 320px;
}
@media (min-width: 481px) {
  main div.mainContents div#splide2-track::before {
    width: 150px;
    height: 500px;
  }
}
main div.mainContents div#splide2-track::after {
  content: "";
  position: absolute;
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgb(255, 255, 255) 80%);
  z-index: 100;
  top: 0;
  right: 0;
  width: 50px;
  height: 320px;
}
@media (min-width: 481px) {
  main div.mainContents div#splide2-track::after {
    width: 150px;
    height: 500px;
  }
}
main div.mainContents div.modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
}
main div.mainContents div.modal .modalContent {
  width: 100%;
  background: #fff;
  box-sizing: border-box;
  padding: 0;
  box-shadow: 5px 5px 15px 5px rgba(0, 0, 0, 0.16);
  margin: 5% auto;
}
@media (min-width: 481px) {
  main div.mainContents div.modal .modalContent {
    width: 850px;
    max-height: 950px;
    overflow-y: scroll;
    padding: 15px;
  }
}
main div.mainContents div.modal .modalContent dl.modalTitle {
  width: calc(100% - 20px);
  height: 40px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: nowrap;
  color: #fff;
  margin: 10px;
}
@media (min-width: 481px) {
  main div.mainContents div.modal .modalContent dl.modalTitle {
    width: 800px;
    height: 60px;
    margin: 0;
  }
}
main div.mainContents div.modal .modalContent dl.modalTitle dt {
  width: 30px;
  font-family: Arial;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  line-height: 40px;
}
@media (min-width: 481px) {
  main div.mainContents div.modal .modalContent dl.modalTitle dt {
    width: 52px;
    font-size: 30px;
    line-height: 60px;
  }
}
main div.mainContents div.modal .modalContent dl.modalTitle dd {
  width: calc(100% - 30px);
  display: flex;
  flex-wrap: nowrap;
  line-height: 40px;
}
@media (min-width: 481px) {
  main div.mainContents div.modal .modalContent dl.modalTitle dd {
    width: calc(100% - 52px);
    line-height: 60px;
  }
}
main div.mainContents div.modal .modalContent dl.modalTitle dd h2 {
  font-size: 16px;
  font-weight: bold;
  padding-left: 16px;
  width: calc(100% - 25px);
}
@media (min-width: 481px) {
  main div.mainContents div.modal .modalContent dl.modalTitle dd h2 {
    font-size: 24px;
    padding-left: 30px;
  }
}
main div.mainContents div.modal .modalContent dl.modalTitle dd span.closeBtn {
  cursor: pointer;
  width: 20px;
  height: 20px;
  margin-top: 10px;
  margin-right: 10px;
  display: block;
  background: url("../images/common/icon_modalCloseBtn.png") no-repeat center center;
}
@media (min-width: 481px) {
  main div.mainContents div.modal .modalContent dl.modalTitle dd span.closeBtn {
    width: 25px;
    height: 25px;
    margin-right: 18px;
    margin-top: 18px;
  }
}
main div.mainContents div.modal .modalContent dl.modalTitle dd span.closeBtn:hover {
  opacity: 0.8;
}
main div.mainContents div.modal .modalContent dl.modalTitle.heat {
  background-image: url("../images/heat/bg_modalTitle.png");
}
main div.mainContents div.modal .modalContent dl.modalTitle.methane {
  background-image: url("../images/methane/bg_modalTitle.png");
}
main div.mainContents div.modal .modalContent dl.modalTitle.rdf {
  background-image: url("../images/rdf/bg_modalTitle.png");
}
main div.mainContents div.modal .modalContent div.modalMainImage {
  text-align: center;
  width: 100%;
  padding: 5px;
  box-sizing: border-box;
  position: relative;
}
main div.mainContents div.modal .modalContent div.heatFeatImage, main div.mainContents div.modal .modalContent div.methaneFeatImage {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  box-sizing: border-box;
  padding: 5px;
  top: 0;
  left: 0;
  animation: modalMainImage 0.85s infinite alternate;
}
@keyframes modalMainImage {
  0% {
    opacity: 0.1;
  }
  100% {
    opacity: 1;
  }
}
main div.mainContents div.modal .modalContent div.modalExplanationImage {
  width: 100%;
  box-sizing: border-box;
  position: relative;
}
@media (min-width: 481px) {
  main div.mainContents div.modal .modalContent div.modalExplanationImage {
    width: 800px;
  }
}
main div.mainContents div.modal .modalContent div.modalExplanationImage iframe {
  width: 100%;
  aspect-ratio: 1/0.5225;
}
@media (min-width: 481px) {
  main div.mainContents div.modal .modalContent div.modalExplanationImage iframe {
    width: 800px;
    height: 420px;
    aspect-ratio: unset;
  }
}
main div.mainContents div.modal .modalContent ul.modalList {
  width: calc(100% - 20px);
  box-sizing: border-box;
  margin: 10px;
}
@media (min-width: 481px) {
  main div.mainContents div.modal .modalContent ul.modalList {
    width: 100%;
    margin: 10px 0 0;
  }
}
main div.mainContents div.modal .modalContent ul.modalList li {
  width: 100%;
  box-sizing: border-box;
  font-size: 17px;
  padding-left: 2.5rem;
  text-indent: -2.5rem;
  padding-bottom: 10px;
  text-align: left;
  color: #000;
  font-weight: bold;
}
@media (min-width: 481px) {
  main div.mainContents div.modal .modalContent ul.modalList li {
    font-size: 19px;
  }
}
main div.mainContents div.modal .modalContent ul.modalList li::before {
  content: "◯ ";
}
main div.mainContents div.modal .modalContent ul.modalList li:last-child {
  padding-bottom: 0;
}
main div.mainContents div.modal .modalContent ul.modalLayout2column {
  width: 100%;
  box-sizing: border-box;
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
}
main div.mainContents div.modal .modalContent ul.modalLayout2column li.column {
  width: 100%;
  box-sizing: border-box;
  text-align: center;
}
main div.mainContents div.modal .modalContent ul.modalLayout2column li.column:nth-child(even) {
  padding-bottom: 40px;
}
@media (min-width: 481px) {
  main div.mainContents div.modal .modalContent ul.modalLayout2column li.column {
    width: 50%;
  }
  main div.mainContents div.modal .modalContent ul.modalLayout2column li.column:nth-child(odd) {
    text-align: left;
    padding-right: 5px;
  }
  main div.mainContents div.modal .modalContent ul.modalLayout2column li.column:nth-child(even) {
    padding-left: 5px;
    padding-bottom: 0;
  }
}
@media (min-width: 481px) {
  main div.mainContents div.modal .modalContent ul.modalLayout2column li.w100 {
    width: 100%;
  }
}
main div.mainContents div.modal .modalContent ul.methane {
  margin-top: 0;
}
main div.mainContents div.modal .modalContent h3.modalSubTitle {
  width: 100%;
  background: #C2D9A1;
  display: block;
  font-weight: bold;
  color: #1A1311;
  text-align: left;
  margin-top: 20px;
  margin-bottom: 10px;
}
@media (min-width: 481px) {
  main div.mainContents div.modal .modalContent h3.modalSubTitle {
    font-size: 24px;
    height: 40px;
    line-height: 40px;
    padding-left: 10px;
    margin-top: 30px;
    margin-bottom: 10px;
  }
}
main div.mainContents div.modal .photoModalContent {
  width: 100%;
  background: #fff;
  box-sizing: border-box;
  padding: 15px;
  box-shadow: 5px 5px 15px 5px rgba(0, 0, 0, 0.16);
  margin: 5% auto;
  position: relative;
}
@media (min-width: 481px) {
  main div.mainContents div.modal .photoModalContent {
    width: 80vw;
    padding: 15px;
  }
}
main div.mainContents div.modal .photoModalContent span.closeBtn {
  cursor: pointer;
  width: 20px;
  height: 20px;
  margin-top: 10px;
  margin-right: 10px;
  display: block;
  background: url("../images/common/icon_modalCloseBtnBK.png") no-repeat center center;
  position: absolute;
  top: 10px;
  right: 10px;
}
main div.mainContents div.modal .photoModalContent span.closeBtn:hover {
  opacity: 0.8;
}
main div.mainContents div.modal .photoModalContent img {
  display: block;
}
main div.mainContents div.modal .methane03 {
  height: 100vh;
  overflow-y: scroll;
}

#footerLinkArea {
  margin-top: 0;
}

.Pagetop {
  z-index: 300;
}/*# sourceMappingURL=style.css.map */