/* ---------------------------------------- topImageContainer ---------------------------------------- */

#topImageContainer {
/*
  max-width: 120rem;
  margin: 0 auto 7rem;
*/
  text-align: center;
  background: url(/campaign/lp/2022_07/images/topimage_bg.jpg) center center no-repeat;
  background-size: cover;
}

@media screen and (max-width: 559px) {

  #topImageContainer {
    width: 100%;
    margin: 0 0 0;
    text-align: center;
    background: url("/campaign/lp/2022_07/images/topimage_bg_mobile.jpg") center center no-repeat;
    background-size: cover;
  }

}

/* ---------------------------------------- パンくずリスト ---------------------------------------- */

#breadcrumb {
  font-size: 1.3rem;
  font-weight: 300;
  margin-top: 3rem;
  margin-bottom: 3rem;
  max-width: 120rem;
  margin-left: auto;
  margin-right: auto;
}

@media screen and (max-width: 1250px) {

#breadcrumb {
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 2.5rem;
}

}

#breadcrumb ul {
  margin-bottom: 0;
}

#breadcrumb ul li {
  display: inline;
  color: #666666;
}

#breadcrumb ul li a {
  display: inline;
  color: #666666;
	transition-duration: 0.2s;
}

@media (hover: hover) {

#breadcrumb ul li a:hover {
  color: #0083B3;
	transition-duration: 0.2s;
}

}

#breadcrumb ul li:after {
	font-family: "Font Awesome 5 Free";
	content: "\f105";
	font-weight: 900;
  margin: 0 0.147em 0 0.588em;
  color: #cccccc;
}

#breadcrumb ul li:last-child:after {
    content: "";
}

/* ---------------------------------------- 見出し ---------------------------------------- */

/* ---------------------------------------- リンク ---------------------------------------- */

a {
  opacity: 1.0;
  transition-duration: 0.3s;
}

@media (hover: hover) {

a:hover {
  opacity: 0.8;
  transition-duration: 0.3s;
}

}

/* ---------------------------------------- 通常ボタン ---------------------------------------- */

.linkBtn01 {
  color: var(--green-800);
  background-color: #ffffff;
  text-align: center;
  padding: 1.5rem 4.0rem 1.6rem;
  font-size: 1.8rem;
  line-height: 2.8rem;
  font-weight: 500;
  position: relative;
  display: table;
  border: 1px solid var(--green-800);
}

.linkBtn01:hover {
  opacity: 1.0;
}

.linkBtn01 .linkBtn01InnerContainer {
  position: relative;
  z-index: 2;
  transition-duration: 0.2s;
}

.linkBtn01:after {
  content: "";
  position: absolute;
  right: 1.6rem;
  top: calc(50% - 0.4rem);
  width: 1.2rem;
  height: 0.8rem;
  background-color: var(--green-800);
  -webkit-mask-image: url("../images/linkBtn01Arrow.png");
  mask-image: url("../images/linkBtn01Arrow.png");
  -webkit-mask-size: cover;
  mask-size: cover;
  transition-duration: 0.2s;
  z-index: 2;
  transform: rotate(-90deg);
}

.linkBtn01.linkBtnDown01:after {
  transform: rotate(0);
}

/* ---------------------------------------- 外部リンクボタン ---------------------------------------- */

.linkBtn01External {
  /* 通常ボタンと共通のスタイル */
  color: var(--green-800);
  background-color: #ffffff;
  text-align: center;
  padding: 1.5rem 6.0rem 1.6rem;
  font-size: 1.7rem;
  line-height: 2.7rem;
  font-weight: 500;
  position: relative;
  display: table;
  border: 1px solid var(--green-800);
}

.linkBtn01External:hover {
  opacity: 1.0;
}

.linkBtn01External .linkBtn01InnerContainer {
  position: relative;
  z-index: 2;
  transition-duration: 0.2s;
}

.linkBtn01External:after {
  /* アイコン画像のみPDF用に変更 */
  content: "";
  position: absolute;
  right: 2.0rem;
  top: calc(50% - 0.9rem);
  width: 1.8rem;
  height: 1.8rem;
  background-color: var(--green-800);
  -webkit-mask-image: url("../images/linkBtn01External.png");
  mask-image: url("../images/linkBtn01External.png");
  -webkit-mask-size: cover;
  mask-size: cover;
  transition-duration: 0.2s;
  z-index: 2;
}

.linkBtn01External.linkBtnDown01:after {
  transform: rotate(0);
}

/* ---------------------------------------- 共通ホバースタイル（PC用） ---------------------------------------- */

@media (hover: hover) {
  
  /* テキストカラーを変更 */
  .linkBtn01:hover .linkBtn01InnerContainer, .linkBtn01External:hover .linkBtn01InnerContainer {
    color: #ffffff;
    transition-duration: 0.2s;
  }

  /* アイコンカラーを変更 */
  .linkBtn01:hover:after, .linkBtn01External:hover:after {
    background-color: #ffffff;
    transition-duration: 0.2s;
  }

  /* 背景のアニメーション */
  .linkBtn01:before, .linkBtn01External:before {
    content: "";
    display: block;
    width: 0;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: var(--green-800);
    transition-duration: 0.2s;
    opacity: 0;
    z-index: 1;
  }

  .linkBtn01.linkBtnDown01:before, .linkBtn01External.linkBtnDown01:before {
    width: 100%;
    height: 0;
  }

  .linkBtn01:hover:before, .linkBtn01External:hover:before {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    transition-duration: 0.2s;
    opacity: 1;
  }

}

/* ---------------------------------------- モバイル用スタイル ---------------------------------------- */

@media (max-width: 559px) {

  /* モバイル用のスタイルを共通化 */
  .linkBtn01, .linkBtn01External {
    text-align: center;
    position: relative;
    display: block;
    font-size: 1.6rem;
    line-height: 2.4rem;
    width: 100%;
  }

}


.linkBtn02 {
  color: var(--green-800);
  background-color: #ffffff;
  text-align: center;
  padding: 0.2rem 1.2rem 0.4rem;
  font-size: 1.4rem;
  line-height: 2.4rem;
  position: relative;
  display: table;
  border: 1px solid var(--green-800);
  border-radius: 0.6rem;
}

.linkBtn02:hover {
  opacity: 1.0;
}

.linkBtn02 .linkBtn02InnerContainer {
  position: relative;
  z-index: 2;
	transition-duration: 0.2s;
}

@media (hover: hover) {

  .linkBtn02:hover .linkBtn02InnerContainer, .linkBtn02:hover .linkBtn02InnerContainer * {
    color: #ffffff;
    transition-duration: 0.2s;
  }

  .linkBtn02:before {
    content: "";
    display: block;
    width: 0;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: var(--green-800);
    transition-duration: 0.2s;
    opacity: 0;
    z-index: 1;
    border-radius: 0.5rem;
  }

  .linkBtn02.linkBtnDown02:before {
    width: 100%;
    height: 0;
  }

  .linkBtn02:hover:before {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    transition-duration: 0.2s;
    opacity: 1;
  }

}

@media (max-width: 559px) {

.linkBtn02 {
  text-align: center;
  position: relative;
  display: block;
  padding: 1rem 4rem;
  font-size: 1.7rem;
  line-height: 2.7rem;
  width: 100%;
}

}

/* ---------------------------------------- テキストリンク ---------------------------------------- */

a.text-link_btn {
  color: var(--green-800);           /* テキストの色 */
  text-decoration: underline;  /* 下線を常に表示 */
  transition: color 0.3s ease; /* 色の変化にトランジションを適用 */
}

@media (hover: hover) {

a.text-link_btn:hover {
  color: rgba(var(--green-800), 0.7);  /* 文字色を少し薄くする（70%の不透明度） */
  text-decoration: underline;   /* ホバー時も下線を残す */
  cursor: pointer;              /* カーソルをポインターに変更 */
}

}

/* ---------------------------------------- リスト ---------------------------------------- */

.lsDisc {
  list-style-type: disc;
  margin-left: 1.5em;
}

.lsNone {
  list-style: none;
}

.lsDecimal {
  list-style-type: decimal;
  margin-left: 1.3em;
}

.lsDecimal li {
  padding-left: 0.3em;
}

/* ---------------------------------------- テキスト ---------------------------------------- */

/* -------------------- 一塊にしたい文字列やフレーズ -------------------- */

.wdPh, .wdPh_invalid_mobile, .wdPh_invalid_tm {
  display: inline-block;
  line-height: inherit;
  font-size: inherit;
  text-indent: 0;
}

@media (max-width: 959px) {

.wdPh_invalid_tm {
  display: inline;
}

}

@media (max-width: 559px) {

.wdPh_invalid_mobile {
  display: inline;
}

}

/* -------------------- 文字色 -------------------- */

.tcBlk { color: #000000; }
.tcWht { color: #ffffff; }
.tcGry { color: #808080; }
.tcGrn { color: var(--green-900); }
.tcYlw { color: var(--yellow-200); }
.tcPYlw { color: var(--yellow-50); }

.bgWht { background-color: #ffffff; }
.bgGrn { background-color: var(--green-800); }
.bgOrg { background-color: var(--orange-400); }
.bgDYlw { background-color: var(--yellow-800); }
.bgPYlw { background-color: var(--yellow-50); }
.bgPYlw2 { background-color: #F6FFD7; }

.bcYlw { border-color: var(--yellow-200); }

/* -------------------- 強調 -------------------- */

.textEmphasis {
  color: #cc0000;
  font-weight: bold;
}

/* -------------------- annotation -------------------- */

.textAnnotation {
  font-size: 1.2rem;
  line-height: 2.0rem;
}

/* ---------------------------------------- 全幅表示したい要素 ---------------------------------------- */

.fullVw {
  margin-left: calc((100% - 100vw) / 2);
  margin-right: calc((100% - 100vw) / 2);
}

.contentsContainer {
    display: block;
    width: 100%;
    max-width: 120rem;
    margin-left: auto;
    margin-right: auto;
}

@media screen and (max-width: 1250px){

.contentsContainer {
    width: calc(100% - 5rem);
    margin-left: 2.5rem;
    margin-right: 2.5rem;
}

}

/* -------------------- 画面幅よる表示・非表示 -------------------- */

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

@media screen and (min-width: 560px) and (max-width: 959px) {
  .hideTablet {
    display: none !important;
  }
}

@media (min-width: 960px) {
  .hidePc {
    display: none !important;
  }

}

/* ---------------------------------------- 要素表示時のエフェクト ---------------------------------------- */

/* -------------------- loadEffect01 -------------------- */

.loadEffect01 {
  opacity: 0;
}

.loadEffect01.loadAnimation {
  opacity: 1;
  transition: 0.5s ease-out 0.0s;
}

/* -------------------- loadEffect02 -------------------- */

.loadEffect02 {
  visibility: hidden;
}

_:-ms-lang(x)::-ms-backdrop, .loadEffect02 {
  visibility: visible;
}

.loadEffect02.loadAnimation {
  animation: img-opacity02 0.5s cubic-bezier(.4, 0, .6, 1);
  overflow: hidden;
  position: relative;
  visibility: visible;
}

.loadEffect02.loadAnimation:before {
  animation: img-animation02 0.5s cubic-bezier(.4, 0, .6, 1) forwards;
  background: #ffffff;
  bottom: 0;
  content: '';
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}

@keyframes img-opacity02 {
  0% {
    opacity: 0;
  }
}

@keyframes img-animation02 {
  100% {
    transform: translateX(100%);
  }
}

/* -------------------- loadEffect03 -------------------- */

.loadEffect03 {
  visibility: hidden;
  opacity: 0;
  top: -50rem;
}

_:-ms-lang(x)::-ms-backdrop, .loadEffect03 {
  visibility: visible;
}

.loadEffect03.loadAnimation {
  overflow: hidden;
  position: relative;
  visibility: visible;
  opacity: 1;
  top: 0;
  transition: 1.0s ease-out 0.2s;
}

/* -------------------- loadEffect04 -------------------- */

.loadEffect04 {
  visibility: hidden;
  opacity: 0;
  transform: scale(0)
}

_:-ms-lang(x)::-ms-backdrop, .loadEffect04 {
  visibility: visible;
  opacity: 1;
}

.loadEffect04.loadAnimation {
  animation: loadEffect04-animation 0.7s cubic-bezier(.44,.18,.28,.99) forwards;
  visibility: visible;
  opacity: 1;
  transform: scale(1)
}

@keyframes loadEffect04-animation {
  0% {
    visibility: hidden;
    opacity: 0;
    transform: scale(0)
  }
  50% {
    transform: scale(1.05)
  }
  70% {
    visibility: visible;
    opacity: 1;
    transform: scale(0.97)
  }
  100% {
    transform: scale(1)
  }
}

/* -------------------- loadEffect05 -------------------- */

.loadEffect05::after {
  opacity: 0;
}

.loadEffect05.loadAnimation::after {
  opacity: 1;
  transition: 1.0s ease-out 0.5s;
}

/* ---------------------------------------- ページトップへ戻るボタン ---------------------------------------- */

#btnGoTop {
  display: none;
  opacity: 1.0;
  width: 8.0rem;
  height: 8.0rem;
  position: fixed;
  bottom: 3rem;
  right: 3rem;
  cursor: pointer;
  z-index: 10;
	transition-duration: 0.5s;
}

@media (hover: hover) {

#btnGoTop:hover {
  opacity: 0.8;
	transition-duration: 0.5s;
}

}

@media screen and (max-width: 959px) {

  #btnGoTop {
    width: 6.0rem;
    height: 6.0rem;
    bottom: 1rem;
    right: 1rem;
  }

}