@charset "utf-8";

/*--------------------------------------------------------------
  共通パーツ
--------------------------------------------------------------*/


body {
  background: #FFF;
}

#page {
  overflow: hidden;
}

#container {
  margin-top: 0;
}


.br-pc{
  display: inline-block;
}
@media only screen and (max-width:641px) {
  .br-pc{
    display: none;
  }
}

.br-sp{
  display: none;
}
@media only screen and (max-width:641px) {
  .br-sp{
    display: inline-block;
  }
}

.pc-only{
  display: block;
}
@media only screen and (max-width:641px) {
  .pc-only{
    display: none;
  }
}

.sp-only{
  display: none;
}
@media only screen and (max-width:641px) {
  .sp-only{
    display: block;
  }
}


.slider-block {
  cursor: pointer;
}


img {
  width: auto;
  height: auto;
  max-width: 100%;
}


.icon-new {
  color: #fff;
  background: #D50000;
  border: 1px solid #D50000;
  border-radius: 100px;
  font-size: 1.0rem;
  font-weight: bold;
  text-align: center;
  display: inline-block;
  padding: .25rem 1rem;
  margin: 0.2rem 0.8rem 0.2rem 1rem;
  line-height: 1;
  position: relative;
}
@media only screen and (max-width:641px) {
  .icon-new {
    font-size: .7rem;
    padding: .125rem .5rem;
    margin: 0.2rem 0.8rem;
  }

}

/*------------   ttl-sec   --------------*/

.ttl-sec {
  font-size: 2rem;
	font-family: "M PLUS Rounded 1c",'Noto Sans JP', sans-serif;
  margin-bottom: 1em;
}
@media only screen and (max-width:641px) {
  .ttl-sec {
    font-size: 1.8rem;
    margin-bottom: .5em;
  }
}

.ttl-sec span {
  font-size: 1.2rem;
  display: block;
}
@media only screen and (max-width:641px) {
  .ttl-sec span {
    font-size: 1.2rem;
  }
}


/*------------   header-wrap   --------------*/

.btn-base {
  display: inline-block;
  background: #541a11;
  color: #FFF;
  font-size: 1.1rem;
  border-radius: 10px;
  padding: .75em 60px .75em 1.25em;
  position: relative;
  text-decoration: none;
  text-align: left;
  cursor: pointer;
  transition: .25s;
}

@media only screen and (max-width:641px) {
  .btn-base {
    width: 70%;
    min-width: 210px;
    font-size: .9rem;
    padding: .75em 40px .75em 1.25em;
  }
}
.btn-base:hover {
  background: #FFF100;
  color: #541a11;
}
.btn-base:after {
	content: "";
	width: 1em;
	height: 1em;
	background: url(../img/common/icon_arrow_white.svg) no-repeat center center;
	background-size: contain;
	display: block;
	position: absolute;
	top: 50%;
	right: 1em;
	margin-top: -.5em;
}

.btn-base:hover:after {
	background: url(../img/common/icon_arrow_brown.svg) no-repeat center center;
}




.btn-base.search {
  padding: 0 2em;
  border-radius: 0 10px 10px 0;
  border: none;
  font-weight: bold;
  border:2px solid #541A11;
}

@media only screen and (max-width:641px) {
  .btn-base.search {
    padding: 0 1em;
    border-radius: 0 6px 6px 0;
    font-size: 1.1rem;
  }
}

.btn-base.search:after {
  display: none;
}

.btn-base.search:before {
  content: "";
  width: 1em;
  height: 1em;
  display: inline-block;
  mask-position: center center;
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-image: url(../img/common/ico_search.svg);
  background: #fff;
  margin-right: 0.5em;
  vertical-align: text-bottom;
}

.btn-base.search:hover:before {
  mask-position: center center;
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-image: url(../img/common/ico_search_brown.svg);
  background: #541A11;
}



.btn-base.clear {
  border-radius: 10px;
  border: none;
  font-weight: bold;
  border:2px solid #DAD7D7;
  background: #DAD7D7;
  color:#541A11; ;
}

.btn-base.clear:hover {
  border:2px solid #541A11;
  background: #000;
  color:#FFF; ;
}

.btn-base.clear:after {
	content: "";
	width: 1em;
	height: 1em;
	background: url(../img/common/icon_clear_brown.svg) no-repeat center center;
	background-size: contain;
	display: block;
	position: absolute;
	top: 50%;
	right: 1em;
	margin-top: -.5em;
}
.btn-base.clear:hover:after {
	background: url(../img/common/icon_clear_white.svg) no-repeat center center;
}



/*--------------------------------------------------------------
  .slider
--------------------------------------------------------------*/
.slider-block .swiper .swiper-slide {
  overflow:hidden;
  position: relative;

}
.slider-block .swiper .swiper-slide img {
  width:100%;
  border-radius: 10px;
  transition: .25s;
}
.slider-ratio .swiper-slide a>img,
.slider-ratio .swiper-slide>img {
  background:#e2e5ec;
  width:100%;
  height:100%;
  max-width:none;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%) scale(1);
  transition:all 0.7s;
  object-fit:contain
}

.ratio-1-1 .swiper-slide .ph-part{
  aspect-ratio:1/1!important;
  object-fit:contain!important
}
.ratio-3-2 .swiper-slide .ph-part{
  aspect-ratio:3/2!important;
  object-fit:contain!important
}
.ratio-3-4 .swiper-slide .ph-part{
  aspect-ratio:3/4!important;
  object-fit:contain!important
}
.ratio-4-3 .swiper-slide .ph-part{
  aspect-ratio:4/3!important;
  object-fit:contain!important
}
.ratio-16-9 .swiper-slide .ph-part{
  aspect-ratio:16/9!important;
  object-fit:contain!important
}


/*--------------------------------------------------------------
  .main-area-top  
--------------------------------------------------------------*/

.main-area-top {
  padding: 90px 0 0;
  background: url(/img/common/diagonal_line_yellow01.svg) repeat;
  position: relative;
}

@media only screen and (max-width:641px) {
  .main-area-top {
    padding: 60px 25px 0;
    box-sizing: border-box;
  }
}
.main-area-top:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height:0 ;
  padding-top: 5.625%;
  background: url(/img/common/bg_cloud_top.svg) no-repeat bottom;
  background-size: contain;
  display: block;
  z-index: 11;
}

.main-area-top:after {
  content: "";
  margin-top: -100px;
  left: 0;
  width: 100%;
  height:200px;
  background: url(/img/common/bg_cloud_bottom.svg) no-repeat bottom;
  background-size:100% auto;
  display: block;
}

@media only screen and (max-width:641px) {
  .main-area-top:after {
    content: "";
    margin-top: -60px;
    margin-left: -10%;
    width: 120%;
    height:0 ;
    padding-top: 12%;
    background: url(/img/common/bg_cloud_bottom.svg) no-repeat bottom;
    background-size: cover;
    display: block;
  }

}
.main-area-top .slider-block {
  position:relative;
  padding-bottom:4em;
  position: relative;
  z-index: 10;
}
.main-area-top .slider-block .swiper-operation {
  position:absolute;
  right:50%;
  bottom:0;
  transform:translateX(50%);
  display:flex;
  align-items:flex-start;
  flex-wrap:nowrap
}
.main-area-top .slider-block .swiper-operation .swiper-pagination {
  position:relative;
  width:auto;
  text-align:center;
  bottom:1.5rem
}


.slider-block .swiper-button-next,
.slider-block .swiper-button-prev {
  position:absolute;
  z-index:10;
  cursor:pointer;
  background: none;
  top: 45%;
}
@media only screen and (max-width:641px) {
  .slider-block .swiper-button-next,
  .slider-block .swiper-button-prev {
    top: 40%;
  }
}
.slider-block .swiper-button-next:before,
.slider-block .swiper-button-prev:before {
  content:"";
  width:60px;
  height:60px;
  background:#541A11;
  position:absolute;
  border-radius:50%;
  transition:all 0.3s
}

.slider-block .swiper-button-next:hover:before,
.slider-block .swiper-button-prev:hover:before {
  background:#FFF100;
}

@media only screen and (max-width:641px) {
  .slider-block .swiper-button-next:before,
  .slider-block .swiper-button-prev:before {
    width:2.5rem;
    height:2.5rem
  }
}
.slider-block .swiper-button-next:after,
.slider-block .swiper-button-prev:after {
  content:"";
  width:2rem;
  height:1.5rem;
  display:block;
  border:none;
  transform:rotate(0);
  background:url(../img/common/icon_arrow_white.svg) no-repeat center center/contain;
}

.slider-block .swiper-button-next:hover:after,
.slider-block .swiper-button-prev:hover:after {
  background:url(../img/common/icon_arrow_brown.svg) no-repeat center center/contain;
}

@media only screen and (max-width:641px) {
  .slider-block .swiper-button-next:after,
  .slider-block .swiper-button-prev:after {
    width:2rem;
    height:1rem
  }
}
.slider-block .swiper-button-next.swiper-button-disabled,
.slider-block .swiper-button-prev.swiper-button-disabled {
  opacity:0
}
.slider-block .swiper-button-next {
  right:22%
}
@media only screen and (max-width:641px) {
  .slider-block .swiper-button-next {
    right:-10px;
  }
}
.slider-block .swiper-button-prev {
  left:22%;
}
@media only screen and (max-width:641px) {
  .slider-block .swiper-button-prev {
    left:-10px;
  }
}
.slider-block .swiper-button-prev:after {
  transform:rotate(-180deg)
}

.slider-block .btn-swiper {
  display:flex;
  align-items:center;
  position:absolute;
  left:0.5em;
  bottom:0.5em;
  z-index:15
}
.slider-block .btn-swiper p+p {
  margin-left:0.5em
}
.slider-block .btn-swiper p button.btn {
  width:2.5em;
  height:2.5em;
  color:#FFF;
  background:#000;
  text-indent:-200px;
  padding:0.5em;
  border-radius:50%;
  display:flex;
  align-items:center;
  border:none
}
@media only screen and (max-width:641px) {
  .slider-block .btn-swiper p button.btn {
    width:2em;
    height:2em
  }
}
.slider-block .btn-swiper p button.btn.play:after,
.slider-block .btn-swiper p button.btn.stop:after {
  content:"";
  width:0.8em;
  height:0.8em;
  display:block;
  margin:0 auto;
  background:url(../img/common/ico_stop_w.svg) no-repeat center center/contain
}
@media only screen and (max-width:641px) {
  .slider-block .btn-swiper p button.btn.play:after,
  .slider-block .btn-swiper p button.btn.stop:after {
    width:0.6em;
    height:0.6em
  }
}
.slider-block .btn-swiper p button.btn.play:after {
  background:url(../img/common/ico_play_w.svg) no-repeat center center/contain
}
.slider-block .btn-swiper p button.btn.active {
  background:#1D7775
}
.slider-block .swiper-pagination-bullet-active {
  background:#000
}
.slider-block {
  width:100%;
  position:relative
}
.slider-block .swiper .swiper-wrapper {
  height:auto
}
.slider-block .swiper .swiper-slide {
  overflow:hidden;
  position: relative;

}
.slider-block .swiper .swiper-slide img {
  width:100%;
  border-radius: 10px;
  transition: .25s;
  object-fit: contain !important;
  height: 100%;
}
.slider-block.slider-ratio .swiper-slide a>img,
.slider-block.slider-ratio .swiper-slide>img {
  background:#e2e5ec;
  width:100%;
  height:100%;
  max-width:none;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%) scale(1);
  transition:all 0.7s;
  object-fit:contain
}

.swiper-slide .ph-part {
  overflow: hidden;
  border-radius: 10px;
  background: #FFF;
}
.swiper-slide:hover .ph-part img {
  transform:scale(1.1);
}


.slider-block .swiper .swiper-slide .txt-part .date {
  font-size: .9rem;
  margin: 5px 0;
}

@media only screen and (max-width:641px) {
  .slider-block .swiper .swiper-slide .txt-part .date {
    font-size: .8rem;
  }
}

.slider-block .swiper .swiper-slide .txt-part .ttl a {
  font-size: 1.1rem;
  text-decoration: none;
  color: #541A11;
  line-height: 1.3;
  font-weight: bold;
  display: inline-block;
}

@media only screen and (max-width:641px) {
  .slider-block .swiper .swiper-slide .txt-part .ttl a {
    font-size: .9rem;
  }
}

.slider-block .swiper .swiper-slide .txt-part .ttl a:before {
content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
}
.slider-block .swiper .swiper-slide .txt-part .ttl a:hover {
  text-decoration: underline;
}

.swiper-pagination-bullet {
  width: 10px !important;
  height: 10px !important;
  background: rgba(84, 26, 17, 0.50) !important;
}
.swiper-pagination-bullet-active {
  background: #541A11 !important;
}

@media only screen and (max-width:641px) {
  .swiper-pagination-bullet {
    width: 6px !important;
    height: 6px !important;
  }
}



/*--------------------------------------------------------------
  .search-area
--------------------------------------------------------------*/

.search-area {
  position: relative;
  z-index: 2;
  margin-top: -60px;
}
@media only screen and (max-width:641px) {
  .search-area {
    margin-top: 0px;
  }
}

.search-area .ttl-sec {
  text-align: center;
}
@media only screen and (max-width:641px) {
  .search-area .ttl-sec {
    line-height: 1.2;
    margin-bottom: 20px;
  }
    .search-area .ttl-sec span{
    margin-bottom: 10px;
  }
}
.tab-wrap {
  position:relative;
}

@media only screen and (max-width:641px) {
  .tab-wrap:before {
    width:100%;
    left:0;
    overflow:auto
  }
}

.tab-wrap .tab-area {
  display:flex;
  justify-content:space-between;
  max-width: 1080px;
  margin: 0 auto;
}
.tab-wrap .tab-area>li {
  margin-right:2%;
  display:flex;
  flex:1
}
@media only screen and (max-width:641px) {
  .tab-wrap .tab-area>li {
    margin:0 1%
  }
}
.tab-wrap .tab-area>li:last-child {
  margin-right:0
}
@media only screen and (max-width:641px) {
  .tab-wrap .tab-area>li:last-child {
    margin-right:1%
  }
}
.tab-wrap .tab-area>li a {
  background:#FFFCCA;
  border-bottom:none;
  font-weight:bold;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:15px;
  text-decoration: none;
  font-size: 1.2rem;
  color: #541A11;
  border-radius: 10px 10px 0 0;
}

@media only screen and (max-width:641px) {
  .tab-wrap .tab-area>li a {
    font-weight:bold;
    padding:10px 0;
    font-size: .9rem;
    border-radius: 6px 6px 0 0;
    font-size: .9rem;
    letter-spacing: 0;
  }
}

.tab-wrap .tab-area>li a:hover {
  margin-top: 10px;
  padding: 10px 15px;
}
@media only screen and (max-width:641px) {
  .tab-wrap .tab-area>li a:hover {
    margin-top: 5px;
    padding: 5px 15px;
  }
}
.tab-wrap .tab-area>li a.active {
  background:#FFF100;
  border-bottom:none;
  position:relative;
  z-index:1
}
.tab-wrap .tab-area>li a.active:hover {
  margin-top: 0px;
  padding: 15px;
}
@media only screen and (max-width:641px) {
  .tab-wrap .tab-area>li a.active:hover {
    margin-top: 0px;
    padding:10px 5px;
  }
}


.tab-contents {
  padding: 60px;
  background: url(/img/common/diagonal_line_yellow02.svg) repeat;
  position: relative;
  margin-bottom: 80px;
  position: relative;
}

@media only screen and (max-width:641px) {
  .tab-contents {
    padding: 20px 10px 40px;
    position: relative;
    margin-bottom: 60px;
    position: relative;
  }
}

.tab-contents .pct01{
  position: absolute;
  top: -80px;
  right: 90%;
  width: 130px;
}

@media only screen and (max-width:641px) {
  .tab-contents .pct01{
  top: -200px;
  right: 80%;
  width:70px;
  }
}
.tab-contents .pct02{
  position: absolute;
  top: 90%;
  right: 5%;
  width: 120px;
}
@media only screen and (max-width:641px) {
  .tab-contents .pct02{
    top: 95%;
    right: 5%;
    width: 70px;
  }
}

.tab-contents > div {
  display:none;
  max-width: 1280px;
  margin: 0 auto;
}

.tab-contents>div.active {
  display:block
}


.tab-contents > div .tab-list {
  display: flex;
  flex-wrap: wrap;
}

.tab-contents > div .tab-list li {
  margin: 1.3%;
  width: 14%;
}
@media only screen and (max-width:641px) {
  .tab-contents > div .tab-list li {
    margin: 1.5%;
    width: 30%;
  }
}


.tab-contents > div .tab-list li a{
  width: 100%;
  height: 100%;
  background: #FFF;
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #541A11;
  font-size: 1.1rem;
  box-sizing: border-box;
  border: 4px solid #FFF;;
}

@media only screen and (max-width:641px) {
  .tab-contents > div .tab-list li a{
    border-radius: 6px;
    padding: 10px;
    font-size: .8rem;
    border: 2px solid #FFF;;
  }
}

.tab-contents > div .tab-list li a:hover{
  border: 4px solid #541A11;
}
@media only screen and (max-width:641px) {
  .tab-contents > div .tab-list li a:hover{
  border: 2px solid #541A11;
}
}
.tab-contents > div .tab-list li a .icon-img{
  width: 140px;
}
@media only screen and (max-width:641px) {
  .tab-contents > div .tab-list li a .icon-img{
    width: 60%;
  }
}

.tab-contents > div .tab-list li a p{
  line-height: 1.3;
  height: 3.6em;
  display: flex;
  align-items: center;
}


.tab-contents > div:nth-child(2) .tab-list li a p{
  height: 1.3em;
}

.tab-keyword {
  max-width: 1280px;
  border-radius: 40px;
  border: 5px solid #FFF100;
  background: #FFF;
  padding: 40px;
}

@media only screen and (max-width:641px) {
  .tab-keyword {
    border-radius: 20px;
    padding: 20px;
  }
}
.ttl-tab {
  color: #541A11;
  font-size: 1.4rem;
  font-family: "Rounded Mplus 1c Bold";
  text-align: center;
  margin-bottom: 20px;
  font-weight: bold;
}


.tab-keyword form{
  display:flex;
  max-width: 900px;
  margin: 0 auto 40px;
}



.word-input {
  flex: 1;
}

.tab-keyword .btn-base{
  width: auto;
  min-width: auto;
}


.word-input label {
  display:none
}
@media only screen and (max-width:641px) {
  .search-block form .word-input label {
    display:block;
    margin-bottom:0.8rem
  }
}

.word-input input {
  font-size:1.1rem;
  border:2px solid #541a11;
  border-radius:10px;
  padding:1em;
  width: 100%;
}

@media only screen and (max-width:641px) {
  .word-input input {
    border-radius:6px;
    padding:.75em;
  }
}



.list-keyword {
  display: flex;
  max-width: 1080px;
  flex-wrap: wrap;
  justify-content: center;
}

@media only screen and (max-width:641px) {
  .list-keyword {
    justify-content:flex-start;
  }

}
.list-keyword li {
  margin: 5px;
}

@media only screen and (max-width:641px) {
  .list-keyword li {
    margin: 2.5px 5px;
  }
}

.list-keyword li a{
  display: block;
  background: #FFFCCA;
  color: #541a11;
  font-size: 1rem;
  text-align: center;
  padding: .5em 1em;
  text-decoration: none;
  border-radius: 10px;
}



.tab-facility {
  max-width: 1280px;
  border-radius: 40px;
  border: 5px solid #FFF100;
  background: #FFF;
  padding: 40px;
}

@media only screen and (max-width:641px) {
  .tab-facility {
    border-radius: 20px;
    padding: 20px 20px 40px;
  }
}

.tab-facility dl {
  display: flex;
}

@media only screen and (max-width:641px) {
  .tab-facility dl {
    display: block;
  }
}
.tab-facility dl dt {
  padding: .75em 1em .75em 0;
  width: 9em;
  font-size: 1.3rem;
  font-weight: bold;
}
@media only screen and (max-width:641px) {
  .tab-facility dl dt {
    width: 9em;
    padding: .5em 1em .5em 0;
    font-size: 1.1rem;
  }
}
.tab-facility dl dd {
  margin: 0;
  padding: 0 0 1em;
  flex: 1;
}
@media only screen and (max-width:641px) {
.tab-facility dl dd {
  padding: 0;
}
}
.tab-facility dl.keyword {
  margin-bottom: 1.5em;
}
.tab-facility dl.keyword dd {
  padding: 0;
}

.tab-facility dl.keyword dt {
  padding: .5em 1em .5em 0;
}
.tab-facility dl.keyword dd {
  padding: 0;
}


.tab-facility dl dd legend{
  display: none;
}

.input-search {
  display: flex;
}


@media only screen and (max-width: 641px) {
  .input-search .btn-base {
    padding: 0 1em;
    border-radius: 0 6px 6px 0;
    font-size: 1.1rem;
    width: auto;
  min-width: auto;
  }
}
.form-list {
  display:flex;
  flex-wrap:wrap;
}

.form-list.btn-check span {
  display: block;
  position:relative;
  width: 19%;
  margin: 0 1% 1% 0;
}
.form-list.btn-check span>input {
  opacity:0;
  position:absolute;
  z-index:-1;
}

.form-list.btn-check span>label {
  font-weight:bold;
  line-height:1.2;
  text-align:center;
  padding:1rem .25rem;
  border-radius:10px;
  cursor:pointer;
  display:flex;
  justify-content:center;
  align-items:center;
  color:#541A11;
  background:#FFFCCA;
  border:5px solid#FFFCCA;
  width: 100%;
  box-sizing: border-box;
  font-size: 1.0rem;
  height: 100%;
}
@media only screen and (max-width:641px) {
  .form-list.btn-check span>label {
    font-size:.9rem;
    padding:.5em .25rem;
    border:2px solid#FFFCCA;
    border-radius:6px;
  }
}
.form-list.btn-check span>input:checked+label {
  color:#541A11;
  background:#FFF100;
  border:5px solid#541A11;
}
@media only screen and (max-width:641px) {
.form-list.btn-check span>input:checked+label {
  border:2px solid#541A11;
}
}
.form-list.btn-check span>input:disabled+label {
  background:#BFBFBF;
  border-color:#BFBFBF;
  color:#221815;
  cursor:default
}

.form-list.btn-check span>label:hover {
  border-color:#FFF100;
}

@media only screen and (max-width:641px) {
  .form-list.btn-check span {
    width:32%;
    margin:0 2% 2% 0
  }
}
@media only screen and (max-width:641px) {
  .form-list.btn-check span:first-child,
  .form-list.btn-check span:nth-child(3n+1) {
    margin-right:0
  }
}
.form-list.btn-icon {
  display:flex;
  align-items:stretch;
  flex-wrap:wrap;
  margin-bottom:1em
}
.form-list.btn-icon legend {
  font-size:1.6rem;
  font-weight:bold;
  margin-bottom:0.5em;
  display:none
}
.form-list.btn-icon.ds-legend legend {
  display:block
}
.form-list.btn-icon div,
.form-list.btn-icon span {
  margin:0;
  display:block
}
.form-list.btn-icon div>input,
.form-list.btn-icon span>input {
  opacity:0;
  position:absolute;
  z-index:-1
}
.form-list.btn-icon div>input:checked+label,
.form-list.btn-icon span>input:checked+label {
  background:#B5B5B5
}
.form-list.btn-icon div>label,
.form-list.btn-icon span>label {
  display:flex;
  flex-direction:column;
  align-items:center;
  height:100%;
  font-weight:bold;
  text-align:center;
  padding:1em 1.5em;
  background:#FFF;
  border:none;
  border-radius:15px;
  box-shadow:0 0 2px 2px rgba(0,0,0,0.1);
  cursor:pointer
}
@media only screen and (max-width:641px) {
  .form-list.btn-icon span>label {
    font-size:1.6rem
  }
}


.search-area .bnr-area {
  margin: 20px auto 0;
  display: flex;
  justify-content: center;
}


.search-area .bnr-area .btn-base {
  width: 240px;
  border: none;
  margin: 0 20px;
  box-sizing: border-box;
  font-weight: bold;
}
@media only screen and (max-width:641px) {
  .search-area .bnr-area .btn-base {
    width: 160px;
    margin: 0 10px;
    min-width:auto;
  }
}

/*--------------------------------------------------------------
  .bnr-area
--------------------------------------------------------------*/

.bnr-area {
  margin: 0 auto 80px;
  display: flex;
  justify-content: center;
}

@media only screen and (max-width:641px) {
  .bnr-area {
    width: 92%;
    margin: 0 auto 40px;
  }
}
.bnr-area ul{
  display: flex;
  flex-wrap: wrap;
}


.bnr-area ul li{
  margin: 0 10px;
}

@media only screen and (max-width:641px) {
  .bnr-area ul li{
    width: 48%;
    margin: 1%;
  }
}


/*--------------------------------------------------------------
  .news-area
--------------------------------------------------------------*/

.news-area {
  max-width:1080px;
  margin: 0 auto 100px;
  display: flex;
  position: relative;
}

@media only screen and (max-width:641px) {
  .news-area {
    width: 92%;
    margin: 0 auto 60px;
    display: block;
    padding-bottom: 80px;
  }
}


.news-area:before {
  content: "";
  background: url(/img/top/bg_deco01.svg) no-repeat center center;
  background-size: contain;
  display: block;
  position: absolute;
  left: -300px;
  top: -300px;
  width: 350px;
  height: 450px;
  z-index: -1;
}
@media only screen and (max-width:641px) {
  .news-area:before {
    left: -50px;
    top: -50px;
    width: 175px;
    height: 225px;
  }
}

.news-area:after {
  content: "";
  background: url(/img/top/bg_deco02.svg) no-repeat center center;
  background-size: contain;
  display: block;
  position: absolute;
  right: -200px;
  bottom: -100px;
  width: 340px;
  height: 420px;
  z-index: -1;
}
@media only screen and (max-width:641px) {
  .news-area:after {
    right: -50px;
    bottom: -50px;
    width: 170px;
    height: 210px;
  }
}

@media only screen and (max-width:641px) {
  .news-area .ttl-sec {
    text-align: center;
  }
}


@media only screen and (max-width:641px) {
  .news-area .news-btn{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
  }
}


.news-area .right-area {
  flex: 1;
  margin-left: 40px;
}
@media only screen and (max-width:641px) {
  .news-area .right-area {
    margin-left: 0;
  }
}


.list-article li a {
  padding:20px 0 10px;
  border-bottom:1px solid #B5B5B5;
  display:flex;
  position:relative;
  color: #541A11;
  font-size: 1.1rem;
  text-decoration: none;
}
@media only screen and (max-width:641px) {
  .list-article li a {
    padding:10px 0 5px;
    display:block;
    text-align: left;
    font-size: 1.0rem;
  }
}
.list-article li a:hover {
  text-decoration: underline;
}
.list-article li a .date-part {
  display:flex;
  align-items:flex-start;
  flex-wrap:wrap;
}
@media only screen and (max-width:641px) {
  .list-article li a .date-part {
    display:block
  }
}
.list-article li a .date-part .date-post {
  font-weight:bold;
  text-decoration:none;
  margin-right:1.6rem;
  margin-bottom:0.8rem;
  text-decoration: none;
}
@media only screen and (max-width:641px) {
  .list-article li a .date-part .date-post {
    margin-right:0;
    margin-bottom:0.25rem;
    font-size: .8rem;
  }
}
.list-article li a .ttl {
  text-decoration:underline;
  margin-bottom:0.8rem;
  text-decoration: none;
  line-height: 1.3;
}
@media only screen and (max-width:641px) {
  .list-article li a .ttl {
    font-size: .9rem;
  }
}



/*--------------------------------------------------------------
  .event-area
--------------------------------------------------------------*/

.event-area {
  width:95%;
  margin: 0 0 80px 5%;
  background:#FFFDD7;
  display: flex;
  position: relative;
  z-index: 1;
  background: #FFFDD7;
  border-radius: 80px 0 0 80px;
  padding: 80px 0 60px 80px;
  position: relative;
  box-sizing: border-box;
}

@media only screen and (max-width:641px) {
  .event-area {
    width:96%;
    margin: 0 0 60px 4%;
    display: block;
    border-radius: 40px 0 0 40px;
    padding: 60px 0 180px 20px;
  }
}


@media only screen and (max-width:641px) {
  .event-area .event-btn{
    position: absolute;
    bottom: 40px;
    left: 0;
    width: 100%;
    text-align: center;
    padding-right: 20px;
    margin-left: -10px;
  }
}


.event-area .pct{
  position: absolute;
  bottom:95%;
  right:80px;
  width: 220px;
}
@media only screen and (max-width:641px) {
    .event-area .pct{
      bottom:95%;
      right:10px;
      width: 120px;
    }
}


.event-area .left-area{
  width: 300px;
}
@media only screen and (max-width:641px) {
  .event-area .left-area{
    width: 92%;
  }
}

.event-area .right-area{
  width: 70%;
}
@media only screen and (max-width:641px) {
  .event-area .right-area{
    width: 92%;
  }
}

.event-area .swiper-control {
  width: 240px;
  display: flex;
  margin: 40px 0;
  align-items: center;
}
@media only screen and (max-width:641px) {
  .event-area .swiper-control {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 20px 0;
    align-items: center;
    position: absolute;
    bottom: 100px;
    left: 0;
  }
}
.event-area .swiper-pagination {
  position: relative !important;
  bottom: auto !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  margin-right: 1rem !important;
}
.event-area .swiper-button-prev {
  position: relative !important;
  bottom: auto !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  width:4rem !important;
  height:4rem !important;
  margin: 0 .5rem !important;
}
.event-area .swiper-button-next {
  position: relative !important;
  bottom: auto !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  width:4rem !important;
  height:4rem !important;
  margin: 0 .5rem !important;
}
@media only screen and (max-width:641px) {
  .event-area .swiper-button-prev {
    position: relative !important;
    bottom: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width:2rem !important;
    height:2rem !important;
    margin: 0 .5rem !important;
  }
  .event-area .swiper-button-next {
    position: relative !important;
    bottom: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width:2rem !important;
    height:2rem !important;
    margin: 0 .5rem !important;
  }
}



.event-area .swiper-button-next:before,
.event-area .swiper-button-prev:before {
  content:"";
  width:60px;
  height:60px;
  background:#541A11;
  position:absolute;
  border-radius:50%;
  transition:all 0.3s
}

.event-area .swiper-button-next:hover:before,
.event-area .swiper-button-prev:hover:before {
  background:#FFF100;
}

@media only screen and (max-width:641px) {
  .event-area .swiper-button-next:before,
  .event-area .swiper-button-prev:before {
    width:2.5rem;
    height:2.5rem
  }
}
.event-area .swiper-button-next:after,
.event-area .swiper-button-prev:after {
  content:"";
  width:2rem;
  height:1.5rem;
  display:block;
  border:none;
  transform:rotate(0);
  background:url(../img/common/icon_arrow_white.svg) no-repeat center center/contain;
}
.event-area .swiper-button-prev::after {
  transform: rotate(-180deg);
}
.event-area .swiper-button-next:hover:after,
.event-area .swiper-button-prev:hover:after {
  background:url(../img/common/icon_arrow_brown.svg) no-repeat center center/contain;
}

@media only screen and (max-width:641px) {
  .event-area .swiper-button-next:after,
  .event-area .swiper-button-prev:after {
    width:2rem;
    height:1rem
  }
}



@media only screen and (max-width:641px) {
  .event-area .swiper-button-next:after,
  .event-area .swiper-button-prev:after {
    width:2rem;
    height:1rem
  }
}



/*--------------------------------------------------------------
  .blog-area
--------------------------------------------------------------*/

.blog-area {
  width:100%;
  margin: 0 auto 80px;
  position: relative;
  box-sizing:border-box;
  padding: 0 0 80px;
}
@media only screen and (max-width:641px) {
  .blog-area {
    margin: 0 auto 60px;
    padding: 0 0 140px;
  }
}

.blog-area .pct{
  position: absolute;
  top: 0;
  left:100px;
  width: 160px;
  z-index: 10;
}
@media only screen and (max-width:641px) {
  .blog-area .pct{
    position: absolute;
    bottom: 100%;
    top: -40px;
    left:10px;
    width: 100px;
  }
}

.blog-area:before {
  content: "";
  display: block;
  background: url(/img/common/diagonal_line_gray01.svg) repeat;
  width:100%;
  height: 130%;
  top: -30%;
  left: 0;
  position: absolute;
  z-index: -1;
  opacity: .5;
  border-radius: 0 0 80px 80px;
}
@media only screen and (max-width:641px) {
  .blog-area:before {
    border-radius: 0 0 40px 40px;
  }
}

.blog-area .ttl-area{
  display: flex;
  max-width: 1280px;
  margin: 0 auto;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 5;
}
@media only screen and (max-width:641px) {
  .blog-area .ttl-area{
    position:unset;
  }
}


.blog-area .blog-btn{
  position: absolute;
  right: 0;
  margin-left: auto;
}


@media only screen and (max-width:641px) {
  .blog-area .blog-btn{
    position: absolute;
    bottom: 40px;
    left: 0;
    width: 100%;
    text-align: center;
  }
}





.blog-area .slider-block {
  width: 92%;
  max-width: 1280px;
  margin: 0 auto 1em;
}

.blog-area .slider-block .swiper-slide{
  background: #FFF;
  border-radius: 10px;
}
.blog-area .slider-block .swiper-slide .txt-part{
  padding: 0 10px 20px;
  box-sizing: border-box;
  min-height: 7.6em;
}

.blog-area .slider-block .swiper-button-next  {
  right:-1%;
}

.blog-area .slider-block .swiper-button-prev {
  left: -1%;
}

.blog-area .swiper-pagination {
  bottom: -40px !important;
}




/*--------------------------------------------------------------
  .oita-news-area
--------------------------------------------------------------*/

.oita-news-area {
  max-width: 1080px;
  margin: 0 auto 80px;
  text-align: center;
  position: relative;
}

.oita-news-area .pct {
  position: absolute;
  bottom: 100%;
  right: -20%;
  width: 130px;
}
@media only screen and (max-width:641px) {
  .oita-news-area .pct {

    position: absolute;
    bottom: 100%;
    right: 10px;
    width: 60px;
  }
}

.oita-news-area .list-article {
  margin-bottom:3.2rem
}
@media only screen and (max-width:641px) {
  .oita-news-area .list-article {
    width: 92%;
    margin:0 auto 2.7rem
  }
}





/*--------------------------------------------------------------
  .ad-area
--------------------------------------------------------------*/

.ad-area {
  margin: 0 auto;
  display: flex;
  justify-content: center;
  background: #EEE;
  padding: 40px 0;
  position: relative;
}
@media only screen and (max-width:641px) {
  .ad-area {
    padding: 20px;
  }
}


.ad-area .pct {
  position: absolute;
  bottom: 70%;
  left: 10%;
  width: 160px;
}


@media only screen and (max-width:641px) {
  .ad-area .pct {
    position: absolute;
    bottom: 90%;
    left: 10%;
    width: 70px;
  }
}
