@charset "UTF-8";

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

制作コンテンツ

info:
- レスポンシブの場合は、ブレイクポイント 768px で記述してください。
- SP用CSSを先に記述する方法を推奨します。下記の記述は例です。
- PCのみの場合は、記述を削除してください。

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

/*---------- common ----------*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
  scroll-padding-top: 20px;
}
html {
  width: 100%;
}
body {
  background: #fff;
}

.section_inner {
  max-width: 990px;
  width: 100%;
  margin: 0 auto;
}
.section_ttl {
  width: 100%;
  margin: 0 auto 30px;
}
.section_ttl img {
  width: 100%;
}
.tiback{
background-image: url("../images/bg_sectioinTop.png");
background-size: cover;
background-position: center;
min-height: 400px;
}
.tiback2{
background-image: url("../images/bg_sectioinTop2.png");
background-size: cover;
background-position: center;
min-height: 400px;
}
.tiback3{ 
background-image: url("../images/bg_sectioinTop3.png");
background-size: cover;
background-position: center;
min-height: 400px;
}

.ttl{width: 800px;
  margin:100px auto 0;
  position: relative;
top:-50px;
}

.contents_back{background-image: url('../images/contents_back.png');
background-position:top 250px center;
background-size: cover;
}

.contents_back2{background-image: url('../images/contents_back2.png');
background-position:top 250px center;
background-size: cover;
}

.contents_back3{background-image: url('../images/contents_back3.png');
background-position:top 250px center;
background-size: cover;
}

.list {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-top: -100px;
}
.list > div {
  display: flex;
  width: 100%;
}
.list_content-01 {
  flex-direction: column;
}
.txtArea {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 40px;
}
.list_content-01 .txtArea {
  flex-direction: row;
  align-items: end;
}
.txtArea a {
  display: block;
  width: 300px;
  height: auto;
}
.txtArea a img {
  width: 100%;
}

/*---------- ふるさとお得クーポンGET! ----------*/
.fixedBtn {
  position: fixed;
  top: 26px;
  right: 32px;
  z-index: 999;
}

/*---------- top ----------*/
.top {
  position: relative;
  width: 100%;
  margin-bottom: 48px;
  background: url(../images/img_fv.jpg) no-repeat;
  background-size: 100%;
}
.top h1 {
  width: 100%;
  margin-bottom: 16px;
  color: transparent;
  font-size: 0;
}
.top h1 img {
  width: 100%;
}
.top a img {
  width: 100%;
}
.top_txt {
  width: 590px;
  margin: 0 auto;
}
.top_txt img {
  width: 100%;
}

/*---------- cta area ----------*/
.ctaArea {
  width: 100%;
}
.ctaArea_inner {
  position: relative;
  max-width: 800px;
  width: 100%;
  margin: 0 auto 0;
}
.ctaArea_ttl {
  width: 540px;
  padding: 48px 0 28px;
  margin: 0 auto;
}
.ctaArea_ttl img {
  width: 100%;
}
.ctaArea_btn {
  display: flex;
  flex-direction: column;
  gap: 22px;
  width: 760px;
  margin: 0 auto;
}
.ctaArea_btn a {
  display: block;
  width: 100%;
  height: auto;
}
.ctaArea_btn a:first-child {
  padding-bottom: 22px;
}
.ctaArea_btn a img {
  width: 100%;
}

/*---------- Landscape ----------*/

.landscape img:nth-of-type(1) {
  top: 706px;
  left: calc(50% + 100px);
}
.landscape img:nth-of-type(2) {
  bottom: 420px;
  right: calc(50% + 260px);
  width: 530px;
  transform: rotate(60deg);
}
.landscape img:nth-of-type(3) {
  bottom: 0;
  left: calc(50% + 200px);
  width: 570px;
  transform: rotate(30deg);
}
.landscape .list_content-01 {
  gap: 24px;
  margin-bottom: 57px;
}
.landscape .list_content-01 > img {
    width: 927px;
    margin: 0 auto;
}
.landscape .list_content-01 .txtArea {
gap: 50px;
    margin-top: -110px;
}
.landscape .list_content-02 {
  align-items: end;
  gap: 30px;
  margin-bottom: 48px;
}
.landscape .list_content-02 > img {
  width: 570px;
  object-fit: cover;
}
.landscape .list_content-02 .txtArea {
  align-items: center;
  gap: 40px;
  width: 300px;
}
.landscape .list_content-02 .txtArea img {
  width: 100%;
}
.landscape .list_content-03 {
  flex-direction: row-reverse;
  align-items: end;
  gap: 30px;
  margin-bottom: 45px;
}
.landscape .list_content-03 > img {
  width: 570px;
}
.landscape .list_content-03 .txtArea {
  gap: 40px;
width: 300px;
}
.landscape .list_content-04 {
  gap: 30px;
}
.landscape .list_content-04 > img {
  width: 550px;
}
.landscape .list_content-04 .txtArea {
  gap: 40px;
  align-items: end;
}



/*---------- staying ----------*/
.staying {
  z-index: 2;
  padding-bottom: 200px;
}
.staying_list > div:nth-of-type(even) {
  flex-direction: row-reverse;
gap:20px;
}
.staying .list_content-01 {
  margin-bottom: 45px;
}
.staying .list_content-01 > img {
  width: 927px;
  margin: 0 auto;
}
.staying .list_content-01 .txtArea {
  gap: 40px;
  margin-top: -70px;
}
.staying .list_content-02 {
  margin-top: 10px;
}
.staying .list_content-02 > img {
  width: 580px;
}
.staying .list_content-02 .txtArea {
width: 300px;
}
.staying .list_content-03 {
  gap: 40px;
margin-top: 30px;
}
.staying .list_content-03 > img {
  width: 550px;
  margin-top: 20px;
}
.staying .list_content-03 .txtArea {
  align-items: end;
}
.staying .list_content-04 {
  gap: 10px;
  margin-top: 30px;
  margin-bottom: 8px;
}
.staying .list_content-04 > img {
  width: 580px;
}
.staying .list_content-05 {
  margin-bottom: 55px;
}
.staying .list_content-05 > img {
  width: 583px;
}
.staying .list_content-05 .txtArea {
  justify-content: flex-start;
  align-items: end;
  margin: 60px 0 0 -24px;
}
.staying_inner > img {
  display: block;
  margin: 0 auto;
}

/*---------- Experience ----------*/
.experience {
  padding-bottom: 110px;
  margin-top: -200px;
}

.experience .list_content-01 {
  margin-bottom: 30px;
}
.experience .list_content-01 > img {
  width: 910px;
  margin: 0 auto;
}
.experience .list_content-01 .txtArea {
  margin: -150px 0 0 0;
}
.experience .list_content-02 {
  margin-bottom: 52px;
	gap:40px;
}
.experience .list_content-02 > img {
  width: 560px;
  margin-top: 30px;
}
.experience .list_content-02 .txtArea {
  justify-content: flex-start;
  align-items: end;
  margin: 48px 0 0 0;
}
.experience .list_content-03 {
  flex-direction: row-reverse;
  gap: 0px;
}
.experience .list_content-03 > img {
  width: 580px;
}
.experience .list_content-03 .txtArea  {
  justify-content: flex-start;
	margin-top: 80px;
}
.experience .list_content-04 {
  gap: 30px;
	  margin: 80px 0 0 0;
}
.experience .list_content-04 > img {
  width: 550px;
}
.experience .list_content-04 .txtArea {
  align-items: end;
}
.experience .list_content-05 {
  flex-direction: row-reverse;
  gap: 0px;
}
.experience .list_content-05 > img {
  width: 580px;
margin-top: 50px;
position: relative;
}
.experience .list_content-05 .txtArea  {
  justify-content: flex-start;
	margin-top: 80px;
}

/*---------- map ----------*/
.map {
  position: relative;
  z-index: -2;
  width: 100%;
  padding-bottom: 64px;
  margin-bottom: 50px;
  background: #EDF6FF;
}
.map > img {
  top: -490px;
  right: calc(50% + 200px);
  width: 573px;
  transform: rotate(50deg);
}
.map_inner {
  position: relative;
padding: 0;
}
.map_inner img:nth-of-type(1) {
  position: absolute;
  top: -25px;
  left: 0px;
  width: 207px;
}
.map_inner img:nth-of-type(2) {
  width: 800px;
  margin: 64px 0 25px 80px;
}
.map_inner img:nth-of-type(3) {
  display: block;
  width: 990px;
  margin: 0 auto;
	padding: 0 2%;
}
/*---------- caution ----------*/
.caution img{width: 760px;margin:70px auto 0;}