@charset "UTF-8";

#town .main_title{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
position: relative;
}

#town .main_title div{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 33%;
}


#town h1 {
font-size: 30px;
background: none;
background: none;
line-height: 1.5;
display: inline-block;
padding: 0 0;
width: 100%;
text-align: center;
letter-spacing: 2px;
}

#town p.topText {
font-size: 17px;
line-height: 2;
}

#town .town_img{
display: flex;
justify-content: center;
align-items: flex-end;
flex-wrap: wrap;
width: 100%;
}

#town .town_img div{
position: relative;
top: -60px;
width:80%;
max-width: 896px;
background-color: rgb(255, 255, 255);
padding: 30px 10px;
text-align: center;
border-radius: 10px;
}

#town .town_img div h2 {
font-size: 26px;
line-height: 1;
color: #333;
margin: 0 0 40px 0;
background: none;
line-height: 1.5;
display: inline-block;
padding: 0 0;
width: 100%;
text-align: center;
font-weight: 700;
}

#town .town_box{
width: 100%;
display: flex;
justify-content: center;
align-items: flex-start;
flex-wrap: wrap;
}


#town .town_pickup{
width: 100%;
display: flex;
justify-content: center;
align-items: flex-start;
flex-wrap: wrap;
padding: 40px;
}


#town .town_pickup h3 {
font-size: 25px;
margin: 0 0 20px 0;
}

#town .town_pickup h3 span {
font-size: 17px;
display: block;
}

#town .town_pickup h4 {
font-size: 20px;
margin: 0 0 10px 0;
}


#town .bg_achieve{
background-color: #f9f7f4;
width: 100%;
}

#town .town_title{
padding: 20px 50px;
background-color: #f9f7f4;
border-radius: 10px 10px 0 0;
position: relative;
top: -50px;
margin-bottom: -50px;
}

#town .town_title h2 {
font-size: 23px;
line-height: 2;
display: block;
text-align: center;
width: 100%;
letter-spacing: 1em;
background: none;
font-weight: 700;
}

#town .town_title h2 span {
border-top: 2px #000 solid;
display: block;
padding: 10px 0;
letter-spacing: 0;
font-family:"Noto Sans JP","游ゴシック","Yu Gothic",YuGothic,"Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Pro","メイリオ ",Meiryo,"MS ゴシック",sans-serif;
}

#town .town_list_btn{
display: flex;
justify-content: center;
align-items: flex-start;
flex-wrap: wrap;
width: 100%;
}

#town .town_list_btn ul{
background-color: #fff;
margin: 0 0;
padding: 20px 20px;
display: flex;
justify-content: center;
align-items: flex-start;
flex-wrap: wrap;
list-style: none;
width: 100%;
}

#town .town_list_btn ul li{
width: 29%;
margin: 0 2%;
cursor: pointer;
transition : all 0.5s ease 0s;
border-radius: 10px;
}

#town .town_list_btn ul li img{
border-radius: 10px;
transition : all 0.5s ease 0s;
border: 2px solid #fff;
opacity: 0.9;
}

#town .town_list_btn ul li:hover,
#town .town_list_btn ul li.town_list_btn_act img{
box-shadow: 0px 0px 15px 0 #777;
opacity: 1;
}

#town .town_tab{
width: 100%;
margin: 40px 0 0 0;
}

#town .town_tab_box{
width: 100%;
}

#town .town_tab_box02{
width: 100%;
display: none;
}

#town .town_list_img{
width: 80%;
margin: 20px 10%;
}

#town .town_list{
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
width: 100%;
background-color: #fff;
padding: 20px;
}

#town .town_list p.town_list_kansai{
width: calc(100% - 20px);
border: 2px solid #d2642a;
outline: solid 1px #d2642a;
outline-offset: 2px;
color: #d2642a;
border-radius: 5px;
padding: 10px;
font-size: 17px;
font-weight: 700;
margin: 0 10px 10px 10px;
}

#town .town_list p.town_list_kanto{
width: calc(100% - 20px);
border: 2px solid #2f5c97;
outline: solid 1px #2f5c97;
outline-offset: 2px;
color: #2f5c97;
border-radius: 5px;
padding: 10px;
font-size: 17px;
font-weight: 700;
margin: 0 10px 10px 10px;
}

#town .town_list div a{
position: relative;
transition : all 0.5s ease 0s;
display: block;
}

#town .town_list div a:hover{
box-shadow: 0px 0px 10px 0px #777777;
}

#town .town_list div a:after{
content: url('../img/search-plus-solid.png');
background-color: rgba(102, 102, 102, 0.7);
border-radius: 5px;
height: 40px;
width: 40px;
font-size: 20px;
line-height: 1;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
right: 20px;
top: 20px;
}

#town .town_btn{
width: 100%;
display: flex;
justify-content: center;
align-items: center;
margin: 40px 0;
}

#town .town_btn a{
display: block;
width: 40%;
padding: 20px 10px;
text-align: center;
color: #fff;
background-color: #435764;
font-size: 18px;
line-height: 1;
letter-spacing: 2px;
border-radius: 29px;
position: relative;
transition : all 0.5s ease 0s;
border: 1px solid #435764;
}

#town .town_btn a:hover{
background-color: #ffffff;
color: #435764;
}

#town .town_btn a:before{
  content: url('../img/arrow.png');
  display: inline-block;
  width: 25px;
  height: 25px;
position: absolute;
left: 25px;
top: 50%;
  transform: translateY(-50%);
}

#town .town_btn a:hover::before{
  content: url('../img/arrow2.png');
}



#town .town_btn2{
width: 100%;
display: flex;
justify-content: center;
align-items: center;
margin: 40px 0;
}

#town .town_btn2 a{
display: block;
width: 80%;
padding: 20px 10px;
text-align: center;
color: #c30d23;
background-color: #fff;
font-size: 18px;
font-weight: bold;
line-height: 1;
letter-spacing: 2px;
border-radius: 29px;
position: relative;
transition : all 0.5s ease 0s;
border: 1px solid #fff;
box-shadow: 0px 0px 7px 0px #777777;
white-space: nowrap;
}

#town .town_btn2 a:hover{
background-color: #c30d23;
color: #fff;
}

#town .town_btn2 a:before{
  content: url('../img/arrow3.png');
  display: inline-block;
  width: 25px;
  height: 25px;
position: absolute;
left: 25px;
top: 50%;
  transform: translateY(-50%);
}

#town .town_btn2 a:hover::before{
  content: url('../img/arrow4.png');
}


/*----------------------------------------
 town_slide
----------------------------------------*/

.town_slide{
width: 100% !important;
margin: 0 auto 60px auto !important;
display: flex !important;
justify-content: center !important;
align-items: stretch !important;
background-color: #eee !important;
padding: 0 0 40px 0;
}

.town_slide div.town_slide_box{
padding: 15px !important;
margin: 0 0 !important;
width: 100% !important;
}

.town_slide div.town_slide_box .book{
width: 100% !important;
background-color: #fff;
}

.town_slide div.town_slide_box .book img{
width: 100% !important;
margin: 0 0 0 0 !important;
}

.town_slide div.town_slide_box .book p{
width: 100% !important;
padding: 30px 20px;
font-size: 14px;
line-height: 2;
text-align: left;
}

.town_slide div.town_slide_box .book span{
font-weight: bold;
display: block;
line-height: 2.5;
}

.town_slide .slide-arrow {
bottom: 50% !important;
position: absolute !important;
width: 40px !important;
height: 40px !important;
font-size: 1rem !important;
line-height: 40px !important;
cursor: pointer !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
flex-direction: column !important;
background-color: #fff !important;
border: 1px solid #333 !important; 
color: #333 !important;
transition : all 0.5s ease 0s !important;
z-index: 9000 !important;
}

.town_slide .slide-arrow:hover {
background-color: #456473 !important;
color: #fff !important;
}

.town_slide .prev-arrow {
top: 50% !important;
left: 14% !important;
transform: translateY(-50%) !important;
}

.town_slide .next-arrow {
top: 50% !important;
right: 14% !important;
transform: translateY(-50%) !important;
}


.town_slide .slick-dots{
bottom:25px;
}

.town_slide .slick-dots li {
margin: 0 4px !important; 
width: 10px !important;
height: 10px !important;
background-color: #eee !important;
}


.town_slide .slick-dots li button:before {
content:'' !important;
width: 10px !important;
height: 10px !important;
background: #ccc !important;
opacity: 1;
display: block;
border-radius: 50% !important;
}

.town_slide .slick-dots li.slick-active button:before{
  background: #607b85 !important;
}


.slick-list.draggable{
max-width:100% !important;
}






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

#town h1 {
font-size: 20px;
letter-spacing: 1px;
font-weight: bold;
}

#town .main_title{
background-image: url(../img/town_bg01.jpg);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
height: 200px;
}

#town .main_title div{
width: 70%;
}

#town p.topText {
font-size: 14px;
line-height: 2;
text-align: left;
}

#town .town_img div{
width:90%;
max-width: 90%;
padding: 30px 10px 0 10px;
margin: 0 0 -20px 0;
}

#town .town_img div h2 {
font-size: 20px;
}

.town_slide div.town_slide_box .book{
height: 450px;
}

.town_slide div.town_slide_box .book p{
padding: 20px 30px;
}


.town_slide div.town_slide_box .book span{
padding-bottom: 10px;
line-height: 1.7;
}


.town_slide .prev-arrow {
left: 0% !important;
}

.town_slide .next-arrow {
right: 0% !important;
}

#town .town_title{
padding: 20px 30px;
}

#town .town_title h2 {
font-size: 20px;
}

#town .town_title h2 span {
font-size: 13px;
}


#town .town_list_btn ul{
padding: 20px 10px;
}

#town .town_list_btn ul li{
width: 48%;
margin: 0 1%;
}

#town .town_tab{
margin: 20px 0 0 0;
}

#town .town_list{
padding: 10px 5px;
}

#town .town_list div a:after{
height: 30px;
width: 30px;
font-size: 15px;
right: 13px;
top: 13px;
}


#town .town_list_img{
width: 96%;
margin: 10px 2%;
}

#town .town_list p.town_list_kansai{
width: 100%;
font-size: 15px;
margin: 0 0 10px 0;
}

#town .town_list p.town_list_kanto{
width: 100%;
font-size: 15px;
margin: 0 0 10px 0;
}

#town .town_btn a{
font-size: 15px;
letter-spacing: 1px;
width: 90%;
}

#town .town_btn2 a{
font-size: 15px;
letter-spacing: 1px;
width: 90%;
}

#town .town_pickup{
padding: 20px 10px;
}


#town .town_pickup h3 {
font-size: 20px;
}

#town .town_pickup h3 span {
font-size: 14px;
}

#town .town_pickup p {
font-size: 13px;
}

#town .town_pickup h4 {
font-size: 18px;
margin: 0 0 10px 0;
}

/*-
#footIcon{
width: 43% !important;
}

#footIcon li{
width: 26% !important;
}
-*/

}