@charset "utf-8";
/* guide css */

/*-------------------------------------------------
コンテンツ領域
-------------------------------------------------*/

html { 
scroll-behavior: smooth;
scroll-padding-top: 55px;
}
.box_s {
max-width: 980px;
margin: 0 auto;
}

@media all and (max-width : 1024px ){
.box_s {
padding: 0 30px;
}
}

@media all and (max-width : 767px ){
.box_s {
padding: 0 20px;
}
}

.box_m {
max-width: 1280px;
margin: 0 auto;
}

@media all and (max-width : 1280px ){
.box_m {
padding: 0 30px;
}
}

@media all and (max-width : 767px ){
.box_m {
padding: 0 20px;
}
}

.box_l {
width: 100%;
margin: 0 auto;
}


/*-------------------------------------------------
intro
-------------------------------------------------*/

.intro_copy {
font-family:'F+UD TsukuMin R';
font-size: 2.6rem;
font-weight: 500;
letter-spacing: 0.2em;
line-height: 100%;
padding-bottom: 32px;
position: relative;
display: block;
text-align: center;
margin-bottom: 50px;
}

@media all and (max-width : 1260px ){
.intro_copy {
font-size: 2.2rem;
}
}

@media all and (max-width : 1024px ){
.intro_copy {
font-size: 2.0rem;
margin-bottom: 40px;
}
}

.intro_copy::after {
content: "";
display: block;
background-color: #C14911;
width: 15px;
height: 1px;
position: absolute;
left: 50%;
bottom: 0;
}
.intro_txt {
font-size: 1.5rem;
line-height: 200%;
letter-spacing: 0.2em;
display: block;
text-align: center;
margin-bottom: 50px;
}

@media all and (max-width : 1024px ){
.intro_txt {
font-size: 1.4rem;
line-height: 180%;
}
}

@media all and (max-width : 820px ){
.intro_txt {
font-size: 1.4rem;
line-height: 180%;
letter-spacing: 0.15em;
margin-bottom: 40px;
}
}

@media all and (max-width : 767px ){
.sec_intro {
margin-bottom: 35px;
}
.intro_copy {
font-size: 1.6rem;
line-height: 160%;
padding-bottom: 25px;
margin-bottom: 30px;
}
.intro_copy::after {
width: 12px;
height: 1px;
position: absolute;
left: 49%;
bottom: 0;
}
.intro_txt {
font-size: 1.25rem;
line-height: 180%;
letter-spacing: 0.1em;
margin-bottom: 30px;
}
}


/*-------------------------------------------------
page navi
-------------------------------------------------*/

.page_navi {
display: flex;
justify-content: center;
align-content: center;
padding: 20px 0;
margin-bottom: 90px;
border-top: solid 1px #DEDEDE;
border-bottom: solid 1px #DEDEDE;
}
.page_navi li {
padding: 0 50px;
font-family:'F+UD TsukuMin R';
font-size: 1.5rem;
border-right: solid 1px #DEDEDE;
}

@media screen and (max-width:1200px) {
.page_navi li {
padding: 0 40px;
font-size: 1.4rem;
}
}

@media screen and (max-width:1024px) {
.page_navi li {
padding: 0 30px;
font-size: 1.3rem;
white-space: nowrap;
}
}

@media screen and (max-width:820px) {
.page_navi li {
padding: 0 20px;
letter-spacing: 0.05em;
}
}

.page_navi li:last-of-type {
border-right: none;
}
.page_navi li a {
color: #000;
transition: all 0.3s	
}
.page_navi li a:hover {
color: #8E7742;
transition: all 0.3s
}
.u_line_gold {
position: relative;
z-index: 1;
}
.u_line_gold:after {
content: '';
position: absolute;
left: 0;
bottom: -8px;
width: 0%;
height: 1px;
background: #8E7742;
z-index: -1;
transition: all 0.3s;
}
.line_effect:hover .u_line_gold:after {
width: 100%;
}

@media all and (max-width : 767px ){
.page_navi {
padding: 15px 0 0px;
margin-bottom: 50px;
flex-wrap: wrap;
}
.page_navi li {
padding: 0 20px;
margin-bottom: 15px;
font-size: 1.2rem;
white-space: nowrap;
}
}

/*-------------------------------------------------
content title
-------------------------------------------------*/

.cont_ttl {
padding: 65px 0;
position: relative;
}
.cont_ttl::before {
content: "";
width: 100%;
height: 1px;
background: #d9d9d9;
position: absolute;
left: 0;
top: 0;
}
.cont_ttl .ttl {
display: inline-block;
font-family:'F+UD TsukuMin R';
font-weight: 400;
font-size: 3.2rem;
line-height: 1.4;
letter-spacing: 0.2em;
color: #111;
}

@media all and (max-width : 820px ){
.cont_ttl {
padding: 50px 0;
position: relative;
}
.cont_ttl .ttl {
font-size: 2.8rem;
}
}

.cont_ttl .en-ttl {
font-family: "Cormorant Garamond", serif;
font-weight: 400;
font-size: 1.8rem;
display: inline-block;
position: relative;
padding-left: 40px;
margin-left: 8px;
letter-spacing: 0.05em;
}
.cont_ttl .en-ttl::before {
content: "";
width: 20px;
height: 1px;
background: #999;
position: absolute;
left: 0;
top: 50%;
}
.cont_ttl::after {
content: "";
width: 80px;
height: 1px;
background: #8E7742;
position: absolute;
left: 0;
top: 0;
}
.sec_box {
margin-bottom: 120px;
}

@media all and (max-width : 767px ){
.cont_ttl {
padding: 35px 0;
}
.cont_ttl .ttl {
font-size: 2.0rem;
}
.cont_ttl .en-ttl {
font-size: 1.3rem;
padding-left: 22px;
margin-left: 8px;
}
.cont_ttl .en-ttl::before {
content: "";
width: 15px;
height: 1px;
}
.cont_ttl::after {
content: "";
width: 50px;
}
.sec_box {
margin-bottom: 60px;
}
}

/*-------------------------------------------------
ガイド団体情報
-------------------------------------------------*/

.item_box_wrap {
max-width: 1280px;
margin-bottom: 50px;
display: flex;
flex-wrap: wrap;
}
.item_box {
width: calc(50% - 60px / 2);
margin-right: 60px;
margin-bottom: 40px;
padding-bottom: 30px;
border: solid 1px #ddd;
position: relative;
}

@media all and (max-width : 1260px ){
.item_box {
width: calc(50% - 40px / 2);
margin-right: 40px;
margin-bottom: 30px;
padding-bottom: 20px;
}
}

@media all and (max-width : 820px ){
.item_box {
width: calc(50% - 20px / 2);
margin-right: 20px;
margin-bottom: 30px;
padding-bottom: 20px;
}
}

@media all and (max-width : 767px ){
.item_box {
width: 100%;
margin-right: 0px;
margin-bottom: 20px;
padding-bottom: 15px;
}
}

.item_box:nth-child(2n) {
margin-right: 0;
}
.item_img {
width: 100%;
margin-bottom: 20px;
position: relative;
}
.item_img img {
width: 100%;
transition-duration: 0.7s;	
}
.item_box .item_title {
font-family:'F+UD TsukuMin R';
font-weight: 500;
font-size: 2.2rem;
letter-spacing: 0.2em;
margin: 0 0 15px 20px;
}

@media all and (max-width : 767px ){
.item_img {
margin-bottom: 15px;
}
.item_box .item_title {
font-size: 2.0rem;
margin: 0 0 25px 20px;
}
}

.area_txt {
font-family:'F+UD TsukuMin R';
font-weight: 400;
font-size: 1.4rem;
padding: 4px 20px;
letter-spacing: 0.2em;
background-color: rgba(142,119,66,0.95);
text-align: center;
display: block;
color: #fff;
position: absolute;
right: 10px;
bottom: 10px;
border-radius: 3px;
}

@media all and (max-width : 820px ){
.area_txt {
font-size: 1.2rem;
}
}

@media all and (max-width : 767px ){
.area_txt {
font-size: 1.0rem;
}
}

.item_box_inner {
display: flex;
flex-direction: column;
flex-grow: 1;
padding: 0 20px 0 15px;
}
.guide_content {
width: 100%;
display: flex;
font-size: 1.4rem;
margin-bottom: 10px;
}
.guide_content dt {
width: 22%; 
font-weight: 700;
color: #8F6D48;
letter-spacing: 0.1em;
white-space: nowrap;
}
.guide_content dd {
width: 78%;
}
.guide_content dd span {
letter-spacing: 0;
}
.guide_content dd a {
text-decoration: underline;
color: #8E7742;
word-break: break-all;
}
.guide_content dd a:hover {
text-decoration: none;
}

@media all and (max-width : 1260px ){
.item_box_inner {
padding: 0 10px 0 15px;
}
.guide_content dt {
width: 25%; 
}
.guide_content dd {
width: 75%;
}
}

@media all and (max-width : 1023px ){
.item_box_inner {
padding: 0 20px 0 15px;
}
.guide_content {
display: flex;
flex-direction: column;
font-size: 1.4rem;
margin-bottom: 10px;
}
.guide_content dt {
width: 100%; 
margin-bottom: 6px;
}
.guide_content dd {
width: 100%;
margin-left: 10px;
}
}

@media all and (max-width : 767px ){
.guide_content {
font-size: 1.3rem;
margin-bottom: 12px;
}
}