@charset "utf-8";

/* ==========================================================

title : 【ホテル多度温泉】天然記念物について
scope : /tado_onsen/kankou/picturebook/natural-monument-birds/natural-monument/

last modify : 2020/08/17 TCV_ヴィ/ Doan Thi Tuong Vi 

========================================================== */
/* MV */
.main_visual {
  background: url(../image/img-main-pc.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}

@media screen and (max-width: 812px) {
  .main_visual {
    background: url(../image/img-main-sp.png);
    background-repeat: no-repeat;
    background-size: cover;
  }
}

/* Content */
.content {
  margin-top: 4.8%;
}

@media screen and (max-width: 812px) {
  .content {
    margin-top: 12%;
  }
}

.content:nth-child(n+2) {
  margin-top: 5.1%;
}

@media screen and (max-width: 812px) {
  .content:nth-child(n+2) {
    margin-top: 12%;
  }
}

/* Content Lead */
.wrap_lead {
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
  margin-top: 3%;
  max-width: 710px;
  padding-right: 1.6%;
}

@media screen and (max-width: 812px) {
  .wrap_lead {
    margin-top: 4%;
  }
}

.wrap_lead .lead_sentence .text:nth-child(n+2) {
  margin-top: 3.7%;
}

.top_lead .lead_sentence .text:nth-child(1) {
  letter-spacing: -.005em;
}

.top_lead .lead_sentence .text:nth-child(2) {
  letter-spacing: -.005em;
}

.top_lead .lead_sentence .text:nth-child(3) {
  letter-spacing: -.011em;
}

.wrap_lead .lead_sentence .text a {
  color: #242cff;
}

/* .wrap_content */

.wrap_content {
  margin: 3% auto 0;
  max-width: 860px;
}

@media screen and (max-width: 812px) {
  .wrap_content {
    margin: 10% auto 0;
  }
}

.wrap_content:nth-child(n+2) {
  margin: 3.3% auto 0;
}

@media screen and (max-width: 812px) {
  .wrap_content:nth-child(n+2) {
    margin: 10% auto 0;
  }
}


.wrap_content.box {
  border: 1px solid #95884a;
  box-sizing: border-box;
  padding: 4px;
}

.wrap_content.box.not_lead {
  margin: 3.4% auto 0;
}

@media screen and (max-width: 812px) {
  .wrap_content.box.not_lead {
    margin: 10% auto 0;
  }
}

.wrap_content.column {
  display: flex;
  justify-content: center;
  margin: 3.4% auto 0;
}

@media screen and (max-width: 812px) {
  .wrap_content.column {
    display: block;
    margin-top: 10%;
  }
}

.wrap_content.column .col {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  width: calc(420 / 860 * 100%);
}

.wrap_content.column .col:nth-child(n+2) {
  margin-left: calc(20 / 860 * 100%);
}

@media screen and (max-width: 812px) {
  .wrap_content.column .col:nth-child(n+2) {
    margin-left: 0;
    margin-top: 10%;
  }
}

.wrap_content.column .col .wrap_head {
  flex: 0 0 auto;
  width: 100%;
}

.wrap_block {
  background: #fbf7e4;
  padding: 3.05% calc(26 / 850 * 100%) 3%;
}

@media screen and (max-width: 812px) {
  .wrap_block {
    background: #fbf7e4;
    padding: 4% calc(26 / 850 * 100%);
  }
}


.wrap_block:not(.flex) {
  padding: 2.7% calc(26 / 850 * 100%) 2.8%;
}

.wrap_block.animals {
  background: url(../image/bg-animals.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}

.wrap_block.plant {
  background: url(../image/bg-plant.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}

.wrap_block.geology_mineral {
  background: url(../image/bg-geology-mineral.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}

.wrap_block.nature_reserve {
  background: url(../image/bg-nature-reserve.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}

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

  .wrap_block.nature_reserve,
  .wrap_block.geology_mineral,
  .wrap_block.plant,
  .wrap_block.animals {
    background: #fbf7e4;
    background-image: inherit;
  }
}


@media screen and (max-width: 812px) {
  .wrap_block:not(.flex) {
    display: block;
  }
}

.wrap_block .left {
  box-sizing: border-box;
  padding-right: calc(10 / 798 * 100%);
  width: calc(384 / 798 * 100%);
}

@media screen and (max-width: 812px) {
  .wrap_block .left {
    padding-right: 0;
  }
}

.wrap_block .right {
  width: calc(384 / 798 * 100%);
}

@media screen and (max-width: 812px) {
  .wrap_block .right {
    display: flex;
    justify-content: space-between;
    margin-top: 6%;
  }
}

.wrap_block .right .image {
  margin-top: 1%;
}

@media screen and (max-width: 812px) {
  .wrap_block .right .image {
    margin-top: 0%;
  }

  .wrap_block .right .image.col {
    width: 48%;
  }
}

.wrap_block .right .image:nth-child(n+2) {
  margin-top: 2.6%;
}

@media screen and (max-width: 812px) {
  .wrap_block .right .image:nth-child(n+2) {
    margin-top: 0;
  }
}

/* .list_number */
.list_number {
  font-size: 17px;
}

.list_number li {
  display: flex;
}

.list_number li:nth-child(n+2) {
  margin-top: 2.3%;
}

@media screen and (max-width: 812px) {
  .list_number li:nth-child(n+2) {
    margin-top: 3%;
  }
}

.list_number span {
  display: inline-block;
}

.list_number .number {
  color: #7d7137;
  font-weight: 600;
  line-height: 1.5;
  margin-right: 1%;
  min-width: 1.529em;
  text-align: right;
}

@media screen and (max-width: 812px) {
  .list_number .number {
    min-width: 1.7em;
  }
}

.list_number .text {
  color: #000;
}

@media screen and (max-width: 812px) {
  .list_number .text {
    letter-spacing: -.02em;
  }
}

/* .list_dotted */
.list_dotted.col {
  display: flex;
  flex-wrap: wrap;
}

@media screen and (max-width: 812px) {
  .list_dotted {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
}

.list_dotted.col li:nth-child(2n+1) {
  width: 25%;
}

@media screen and (max-width: 812px) {
  .list_dotted li:nth-child(2n+1),
  .list_dotted.col li:nth-child(2n+1) {
    box-sizing: border-box;
    width: 48%;
    margin-bottom: 3%;
  }
}

.list_dotted.col li:nth-child(2n+2) {
  width: 60%;
}

@media screen and (max-width: 812px) {
  .list_dotted li:nth-child(2n+2),
  .list_dotted.col li:nth-child(2n+2) {
    box-sizing: border-box;
    width: 48%;
    margin-bottom: 3%;
  }
}

.list_dotted:nth-child(n+2) {
  margin-top: 1em;
}

@media screen and (max-width: 812px) {
  .list_dotted:nth-child(n+2) {
    margin-left: 0;
    margin-top: 3%;
  }
}

.list_dotted li {
  line-height: 1;
  padding-left: .824em;
  position: relative;
}

@media screen and (max-width: 812px) {
  .list_dotted li {
    font-size: 3.8vw;
    letter-spacing: -.1em;
    line-height: 1.5;
  }
}

.list_dotted li::after {
  background: #95884a;
  border-radius: 50%;
  content: "";
  height: .589em;
  left: 0;
  position: absolute;
  top: .235em;
  width: .589em;
}

@media screen and (max-width: 812px) {
  .list_dotted li::after {
    top: .495em;
  }
}

.list_dotted li:nth-child(n+2) {
  margin-top: 1em;
  margin-bottom: 0;
}

@media screen and (max-width: 812px) {
  .list_dotted li:nth-child(n+2) {
    margin-bottom: 3%;
    margin-top: 0;
  }
}

.list_dotted.col li:nth-child(n+2) {
  margin-bottom: 1em;
  margin-top: 0;
}

.list_dotted.col li:nth-last-of-type(1) {
  margin-bottom: 0;
}

@media screen and (max-width: 812px) {
  .list_dotted.col li:nth-child(n+2) {
    margin-bottom: 3%;
    margin-top: 0;
  }
}

.wrap_img {
  margin-top: 1%;
}

/* .list_dotted.col */
/* .wrap_block.col {
  display: flex;
} */

/* @media screen and (max-width: 812px) {
  .col .list_dotted {
    width: 48%;
  }
}

.col .list_dotted:nth-child(n+2) {
  margin-left: 6%;
  margin-top: 0;
}

@media screen and (max-width: 812px) {
  .col .list_dotted:nth-child(n+2) {
    margin-left: 0;
  }
}
.col .list_dotted li {
  padding-left: .824em;
  position: relative;
  line-height: 1;
}
@media screen and (max-width: 812px) {
  .col .list_dotted li {
    line-height: 1.5;
    letter-spacing: -.02em;
  }
}
.col .list_dotted li::after {
  position: absolute;
  content: "";
  top: .235em;
  left: 0;
  width: .589em;
  height: .589em;
  background: #95884a;
  border-radius: 50%;
}

@media screen and (max-width: 812px) {
  .col .list_dotted li::after {
    top: .495em;
  }
}

.col .list_dotted li:nth-child(n+2) {
  margin-top: 1em;
}

@media screen and (max-width: 812px) {
  .col .list_dotted li:nth-child(n+2) {
    margin-top: 3%;
  }
} */

.wrap_text {
  margin: 4% auto 0;
  width: calc(386 / 420 * 100%);
}

.wrap_text .text {
  flex: 0 0 auto;
  line-height: 1.55;
}

.wrap_image {
  align-self: flex-start;
  flex: 0 0 auto;
  margin-left: auto;
  margin-right: auto;
  margin-top: auto;
  padding-top: 3.5%;
  width: calc(386 / 420 * 100%);
}

@media screen and (max-width: 812px) {
  .wrap_image {
    padding-top: 6%;
  }
}

/* Head */
.head_3_center {
  background-position: bottom left;
  background-repeat: repeat;
  background-size: 5px;
  padding-bottom: 8px;
}

.head_3_center span {
  color: #fff;
  display: block;
  font-size: 23px;
  font-weight: 600;
  padding: .304em;
  text-align: center;
}

.meiryo .head_3_center span {
  padding: .404em 0 .204em;
}

@media all and (-ms-high-contrast:none) {
  .head_3_center span {
    padding: .404em 0 .204em;
  }

  .meiryo .head_3_center span {
    padding: .404em 0 .204em;
  }
}

@-moz-document url-prefix() {
  .meiryo .head_3_center span {
    padding: .404em 0 .204em;
  }
}

@media screen and (max-width: 812px) {
  .head_3_center span {
    font-size: 5vw;
  }
}

.head_3_center.small span {
  font-size: 21px;
  padding: .333em;
}

.meiryo .head_3_center.small span {
  padding: .383em 0 .283em;
}

@media all and (-ms-high-contrast:none) {
  .head_3_center.small span {
    padding: .433em 0 .233em;
  }

  .meiryo .head_3_center.small span {
    padding: .383em 0 .283em;
  }
}

@-moz-document url-prefix() {
  .meiryo .head_3_center.small span {
    padding: .383em 0 .283em;
  }
}

/* .pink */
.head_3_center.pink {
  background-image: url(../image/bg-head-3-pink.jpg);
}

.head_3_center.pink span {
  background: #ad7a8c;
}

/* .green */
.head_3_center.green {
  background-image: url(../image/bg-head-3-green.jpg);
}

.head_3_center.green span {
  background: #648974;
}

/* .brown */
.head_3_center.brown {
  background-image: url(../image/bg-head-3-brown.jpg);
}

.head_3_center.brown span {
  background: #a78461;
}

/* .blue */
.head_3_center.blue {
  background-image: url(../image/bg-head-3-blue.jpg);
}

.head_3_center.blue span {
  background: #848fbf;
}

/* .wrap_banner */
.wrap_banner {
  margin-top: 2.7%;
}

@media screen and (max-width: 812px) {
  .wrap_banner {
    margin-top: 6%;
  }
}

.wrap_banner ul li {
  max-width: 510px;
  margin: 0 auto;
}

.wrap_banner ul li a {
  max-width: 460px;
  margin: 0 auto;
}

.wrap_banner ul li .caption {
  margin-top: 1.6%;
  text-align: center;
}

.wrap_banner ul li:nth-child(n+2) {
  margin-top: 2%;
}