/* CSS Document */

.text14cha{
	font-size: 14px;
	color: #3B3330;
}

.text14white{
	font-size: 14px;
	color: #FFFFFF;
}
.lineheight1{
	line-height: 1.5;
}
.lineheight2{
	line-height: 2;
}
.lineheight3{
	line-height: 2.5;
}
.lineheight4{
	line-height: 3;
}


.rollover img {
  display: block;
  width: 100%;
  height: auto;
}

.rollover img:nth-child(2) {
  display: none;
}

/* PC のホバー + タッチデバイスのフォーカス */
.rollover:hover img:nth-child(1),
.rollover:focus img:nth-child(1) {
  display: none;
}
.rollover:hover img:nth-child(2),
.rollover:focus img:nth-child(2) {
  display: block;
}

/* フォーカス時の青いアウトラインが不要なら */
.rollover:focus {
  outline: none;
}


/*.rollover {
      position: relative;
      display: inline-block;
      overflow: hidden;
    }
    .rollover img {
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: auto;
      transition: opacity 0.3s ease;
    }
    .rollover img:nth-child(1) { opacity: 1; z-index: 1; }
    .rollover img:nth-child(2) { opacity: 0; z-index: 2; }

    /* ホバー時とフォーカス時に切り替え 
    .rollover:hover img:nth-child(1),
    .rollover:focus img:nth-child(1) {
      opacity: 0;
    }
    .rollover:hover img:nth-child(2),
    .rollover:focus img:nth-child(2) {
      opacity: 1;
    }
	*/

    /* フォーカス時のアウトラインを消す（お好みで）
    .rollover:focus { outline: none; }
	*/

/* Bootstrap 側の .rounded-1 とぶつからない 
.custom-rounded-1 {
  border-radius: 1rem !important;
}

*/

body::before {
  /* background: none; は疑似要素ではなく body 本体に効かせたいので、以下のように */
  background: url('../images/main/top-img01-02.jpg') center/cover no-repeat;
  content: "";
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: -1;
}
body {
  /* body 本体の背景指定をクリア */
  background: none;
}
.page-content {
  position: relative;
  z-index: 1;
}

.rounded-1 {
  border-radius: 1rem !important;
}