@charset "UTF-8";







.topics {width: 1000px; padding: 100px 0;margin: auto;position: relative;}
.topics h1{text-align: center;}
.topics ul {border-top: 1px solid #755f27;}
.topics ul li {border-bottom: 1px solid #755f27;padding: 25px 0;}
.topics ul li:last-child {margin-bottom: 0;}
.topics ul li dl {
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
font-family: "Noto Serif JP", serif;
font-size: 16px;
line-height: 1.6;
text-align: left;}
.topics ul li dl dt {width: 140px;}
.topics ul li dl dd {width: 860px;}
.topics ul li dl dd a {text-decoration: underline;color: #755f27;}
.topics ul li dl dd a:hover {text-decoration: none;}
@media screen and (max-width: 1060px) {
.topics {width: 90%; padding: 10% 0;margin:0 auto;position: relative;}
.topics h2{text-align: left;}
.topics ul {border-top: 1px solid #755f27;}
.topics ul li {border-bottom: 1px solid #755f27;padding: 25px 0;}
.topics ul li:last-child {margin-bottom: 0;}
.topics ul li dl {
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
font-family: "Noto Serif JP", serif;
font-size: 16px;
text-align: left;}
.topics ul li dl dt {width: 15%;}
.topics ul li dl dd {width: 85%;}
.topics ul li dl dd a {text-decoration: underline;color: #755f27;}
.topics ul li dl dd a:hover {text-decoration: none;}
}
@media screen and (max-width: 767px) {
.topics {width: 90%; padding: 10% 0;margin:0 auto;position: relative;}
.topics h2{text-align: left;}
.topics ul {border-top: 1px solid #755f27;}
.topics ul li {border-bottom: 1px solid #755f27;padding: 5vw 0;}
.topics ul li:last-child {margin-bottom: 0;}
.topics ul li dl {
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
font-family: "Noto Serif JP", serif;
font-size: 3vw;
text-align: left;}
.topics ul li dl dt {width: 100%;margin: 0 0 2.5vw;}
.topics ul li dl dd {width: 100%;}
.topics ul li dl dd a {text-decoration: underline;color: #755f27;}
.topics ul li dl dd a:hover {text-decoration: none;}

}


.detail_title {text-align: left;margin: 0 0 40px;padding: 40px 0; border-bottom: 1px solid #755f27;}
.detail_title h1.title,
.detail_title h2.title {font-size: 32px;line-height: 1.6;font-family: 'Noto Serif JP', serif;}
.detail_title p.day {font-size: 14px;line-height: 1.6;margin: 0 0 10px;}
@media screen and (max-width: 1060px) {

}
@media screen and (max-width:767px){
.detail_title {text-align: left;margin: 0 0 5%;padding: 5% 0; border-bottom: 1px solid #755f27;}
.detail_title h1.title,
.detail_title h2.title {font-size: 4.4vw;line-height: 1.6;}
.detail_title p.day {font-size: 3vw;line-height: 1.6;margin: 0 0 2.5vw;}
}









.pager {padding: 80px 0 0;}
.pager .pagination {text-align: center;display: inline-flex;border: none;}
.pager .pagination li {
font-weight: 700;
margin: 0 2px;
padding: 0;
display: inline-block;
background:#755f27;
width: 40px;
height: 40px;
text-align: center;
position: relative;
border: none;
}
.pager .pagination li:nth-child(2n) {margin: 0 2px;}
.pager .pagination li a{
font-size: 12px;
vertical-align: middle;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
display:table;
color: #fff;
text-decoration: none;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all  0.3s ease;

}
.pager .pagination li a span{display:table-cell;vertical-align:middle;}
.pager .pagination li a:hover,
.pager .pagination li a.active{color: #755f27;background: #fff;border:1px solid #755f27;}
@media screen and (max-width: 1060px) {
.pager {padding: 5% 0 0;}
.pager .pagination {text-align: center;display: inline-flex;}
.pager .pagination li {
font-weight: 700;
margin: 0 2px;
padding: 0;
display: inline-block;
background:#755f27;
width: 40px;
height: 40px;
text-align: center;
position: relative;

}
.pager .pagination li:nth-child(2n) {margin: 0 2px;}
.pager .pagination li a{
font-size: 12px;
vertical-align: middle;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
display:table;
color: #fff;
text-decoration: none;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all  0.3s ease;

}
.pager .pagination li a span{display:table-cell;vertical-align:middle;}
.pager .pagination li a:hover,
.pager .pagination li a.active{color: #755f27;background: #fff;border:1px solid #755f27;}
}
@media screen and (max-width: 767px) {
.pager {padding: 20px 0 0;}
.pager .pagination {text-align: center;display: inline-flex;}
.pager .pagination li {
font-weight: 700;
margin: 0 2px;
padding: 0;
display: inline-block;
background:#755f27;
width: 40px;
height: 60px;
text-align: center;
position: relative;

}
.pager .pagination li:nth-child(2n) {margin: 0 2px;}
.pager .pagination li a{
font-size: 12px;
vertical-align: middle;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
display:table;
color: #fff;
text-decoration: none;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all  0.3s ease;

}
.pager .pagination li a span{display:table-cell;vertical-align:middle;}
.pager .pagination li a:hover,
.pager .pagination li a.active{color: #755f27;background: #fff;border:1px solid #755f27;}
}






#main_pic {position: relative;}
#main_pic .main_pic_back {width: 100%; height: auto;position: relative;
overflow: hidden;
}

#main_pic .main_pic_back::before {
  content: '';
  display: block;
  padding-top: 30%;
}

#main_pic .main_pic_back img {
width: 100%;
height: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%) translateX(-50%);
opacity: 0.6;}



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

#main_pic {position: relative;}
#main_pic .main_pic_back {width: 100%; height: auto;position: relative;
overflow: hidden;
}
#main_pic .main_pic_back img {
width: 100%;
height: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%) translateX(-50%);}

}
@media screen and (max-width:767px){
#main_pic {position: relative;}
#main_pic .main_pic_back {width: 100%; height: auto;position: relative;
overflow: hidden;
}
#main_pic .main_pic_back::before {
  content: '';
  display: block;
  padding-top: 50%;
}
#main_pic .main_pic_back img {
width: auto;
height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%) translateX(-50%);}

}


.topic_path {background: rgba(51, 51, 51, 0.1);padding: 5px;}
.topic_path ul {}
.topic_path ul li {font-weight: 100;}
.topic_path ul li a {color: #755f27;text-decoration: underline;}
.topic_path ul li a:hover {color:#755f27;}

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

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

.topic_path ul {overflow-x: scroll;
    word-break: keep-all;
    white-space: nowrap;}
.topic_path ul::-webkit-scrollbar {
    display: none;
  }

}




.detail_title {width: 1000px; text-align: left;margin: 0 auto 40px;padding: 40px 0; border-bottom: 1px solid #755f27;}
.detail_title h2.title {font-size: 32px;line-height: 1.6;font-family: 'Noto Serif JP', serif;}
.detail_title p.day {font-size: 14px;line-height: 1.6;margin: 0 0 10px;}
@media screen and (max-width: 1060px) {

}
@media screen and (max-width:767px){
.detail_title {width: 90%;text-align: left;margin: 0 auto 5%;padding: 5% 0; border-bottom: 1px solid #755f27;}
.detail_title h2.title {font-size: 4.4vw;line-height: 1.6;}
.detail_title p.day {font-size: 3vw;line-height: 1.6;margin: 0 0 2.5vw;}
}





.point {width: 1000px;margin: auto;}
.point h3 {margin: 0 0 2%;}
.point ul {}
.point ul li {margin: 0 0 5%;text-align: left;}
.point ul li:last-child {margin: 0;}
.point ul li .point_pic {width: 100%; position: relative;overflow: hidden;}
.point ul li .point_pic::before {
content: '';
display: block;
padding-top:66.67%;
}
.point ul li .point_pic img {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%) translateX(-50%);
}
.point ul li img {width: 100%;height: auto;}
.point ul li h4 {font-size: 18px;line-height: 1.6;font-weight: 700;}
.point ul li p {font-size: 14px;line-height: 1.6;margin: 0 0 2.5%;}

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

}
@media screen and (max-width:767px){
.point {width: 90%;margin: auto;}
.point h3 {margin: 0 0 5%;}
.point ul {}
.point ul li {margin: 0 0 5%;text-align: left;}
.point ul li:last-child {margin: 0;}
.point ul li .point_pic {width: 100%; position: relative;overflow: hidden;}
.point ul li .point_pic::before {
content: '';
display: block;
padding-top:66.67%;
}
.point ul li .point_pic img {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%) translateX(-50%);
}
.point ul li img {width: 100%;height: auto;}
.point ul li h4 {font-size: 3.6vw;line-height: 1.6;font-weight: 700;}
.point ul li p {font-size: 3vw;line-height: 1.6;}
}




.btn_block {padding: 80px 0;}

.btn_block ul {}
.btn_block ul li {margin: 0 0 40px;}
.btn_block ul li:last-child {margin: 0;}


.btn a {
position: relative;
display: inline-block;
width: auto;
padding: 1em 3em 1em 2em;
background-color: #755f27;
font-size: 24px;letter-spacing: 0.1em;
font-weight: 700;
color: #fff;
text-decoration: none;
text-align: center;margin: auto;
transition-duration:0.5s;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
}
.btn a:hover {opacity: .5;}
.btn-arrow-right a::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
right: 27px;
width: 9px;
height: 9px;
margin: auto;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
transform: rotate(45deg);
box-sizing: border-box;
}

.btn2 a {
position: relative;
display: inline-block;
width: auto;
padding: 1em 3em 1em 2em;
background-color: #999999;
font-size: 14px;letter-spacing: 0.1em;
font-weight: 700;
color: #fff;
text-decoration: none;
text-align: center;margin: auto;
transition-duration:0.5s;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
}
.btn2 a:hover {opacity: .5;}



@media screen and (max-width: 1060px) {
.btn_block {padding: 5% 0;}

.btn_block ul {}
.btn_block ul li {margin: 0 0 5%;}
.btn_block ul li:last-child {margin: 0;}


.btn a {
position: relative;
display: inline-block;
width: auto;
padding: 0.8em 2.6em 0.8em 1.6em;
background-color: #755f27;
font-size: 24px;letter-spacing: 0.1em;
font-weight: 700;
color: #fff;
text-decoration: none;
text-align: center;margin: auto;
transition-duration:0.5s;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
}
.btn a:hover {opacity: .5;}
.btn-arrow-right a::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
right: 27px;
width: 9px;
height: 9px;
margin: auto;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
transform: rotate(45deg);
box-sizing: border-box;
}
}
@media screen and (max-width: 767px) {
.btn_block {padding: 5% 0;}
.btn a {
position: relative;
display: inline-block;
width: auto;
padding: 1em 3em 1em 2em;
background-color: #755f27;
font-size: 4vw;letter-spacing: 0.1em;
font-weight: 700;
color: #fff;
text-decoration: none;
text-align: center;margin: auto;
transition-duration:0.5s;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
}
.btn a:hover {opacity: .5;}
.btn-arrow-right a::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
right: 27px;
width: 9px;
height: 9px;
margin: auto;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
transform: rotate(45deg);
box-sizing: border-box;
}

.btn2 a {
position: relative;
display: inline-block;
width: auto;
padding: 1em 3em 1em 2em;
background-color: #999999;
font-size: 4vw;letter-spacing: 0.1em;
font-weight: 700;
color: #fff;
text-decoration: none;
text-align: center;margin: auto;
transition-duration:0.5s;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
}
.btn2 a:hover {opacity: .5;}



}