@charset "utf-8";

main{ padding-top: 113px; }

/* ------------------------------------------------------------ bread */
#bread { display: flex; align-items: center; padding: 25px 4%; }
#bread .title { font-size: 14px; display: block; line-height: 143%;}
#bread a { position: relative; padding: 0 47px 0 0;line-height: 143%; display: block; }
#bread a::before { position: absolute; content: ""; right: 9px; width: 28px; height: 1px; transform: translateY(-50%); top: 50%; background: #000 }

/* ------------------------------------------------------------ pager */
.pagers{ display: flex; justify-content: center; align-items: center; gap: 18px; padding: 80px 0 0; }
.pagers a{ width: 47px; height: 47px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #707070; font-size: 17px; transition: opacity .25s; font-family: "neue-haas-grotesk-display", sans-serif; font-weight: 600; font-style: normal; }
.pagers a:hover{ opacity: .65; }
.pagers a.is-current{ background: #707070; color: #fff; }


/* ------------------------------------------------------------ fv */
#fv.bg_content{padding: 12.87% 98px; position: relative; min-width: 1100px;}
#fv.bg_content:before{content: ""; display: block; width: 30%; height: 100%; position: absolute; background-image: linear-gradient(90deg, #000000, transparent); top: 0px; left: 0px;}
#fv.bg_content h1{position: relative; z-index: 1; color: #fff; font-family: "Zen Old Mincho", serif; font-weight: 600; font-style: normal; font-size: 38px; line-height: 150%;}

#fv.no_bg_content{padding: 112px 0 0; position: relative; text-align: center;}
#fv.no_bg_content h1{ font-family: "Zen Old Mincho", serif; font-weight: 600; font-style: normal; font-size: 38px; line-height: 150%;}

#fv.no_bg_content_2{padding: 112px 0 0; position: relative; text-align: center;}
#fv.no_bg_content_2 h1{ font-size: 17px; line-height: 150%; color: #9D9D9D;}
#fv.no_bg_content_2 h1 span{font-size: 27px; line-height: 156%; color: #000; display: inline-block; padding: 10px 0 0;font-family: "Zen Old Mincho", serif; font-weight: 600; font-style: normal; }

.com_bg{background: url(../images/com/com_bg.jpg) no-repeat center top; background-size: 100%;}

.link_box a.btn{display: block; width: 274px; border: 1px solid #000; text-align: center; font-size: 19px; line-height: 153%; padding: 18px 0 19px; font-family: "Zen Old Mincho", serif; font-weight: 600; font-style: normal; margin: 0 auto;}
/* 記事/動画/写真 本文内のリンクブロック（.box 直下）は文言に合わせて横長に */
.detail_box .box > .link_box a.btn{display: inline-block; width: auto; max-width: 100%; min-width: 274px; padding: 18px 48px 19px; white-space: normal;}
.detail_box .box > .link_box{padding: 28px 0 0; text-align: center;}
.inner_2{max-width: 1300px; min-width: 1100px; padding: 0 50px; margin: 0 auto;}
/* ------------------------------------------------------------ page */
#page.gold_page .pagination{display: flex; gap:0 14px; align-items: center; justify-content: center;}
#page.gold_page .pagination li{width: 48px; height: auto; text-align: center; font-size: 17px;}
#page.gold_page .pagination li span{background: #E7D4AB; border: 1px solid #E7D4AB; display: block; color: #fff; }
#page.gold_page .pagination li a{background: #fff; border: 1px solid #000; display: block; }
#page.gold_page .pagination li span,
#page.gold_page .pagination li a{line-height: 188.2%; padding: 7px 0;}



/* ------------------------------------------------------------ .detail_box ------------------------------------------------------------ */
.detail_box .youtube_box{position: relative; width: 100%; height: auto; padding: 51.59% 0 0;}
.detail_box .youtube_box iframe{position: absolute; top: 0px; width: 100%; height: 100%;}

.detail_box .text_box{padding: 107px 0 0; width: 940px; margin: 0 auto;}
.detail_box .text_box h2{text-align: center; font-size: 27px; line-height: 160%; font-family: "Zen Old Mincho", serif; font-weight: 600; font-style: normal; }
.detail_box .text_box p{line-height: 200%; font-size: 16px; padding: 28px 0 0;}
.detail_box .text_box p + p{padding: 32px 0 0;}
.detail_box .text_box:not(:first-child){padding: 60px 0 0;}


.detail_box .img_box{width: 100%; height: auto;}
.detail_box .img_box img{width: 100%; height: auto; display: block;}
.detail_box .img_box p{padding: 12px 0 0; font-size: 17px; line-height: 150%; color: #9D9D9D;}
.detail_box .img_box:not(:first-child){padding: 80px 0 0;}

.detail_box .recommendation{padding: 140px 0 0;}
.detail_box .recommendation h2{border-bottom: 1px solid #707070; padding: 0 0 26px; font-size: 26px; font-family: "Zen Old Mincho", serif; font-weight: 600; font-style: normal;}
.detail_box .recommendation ul{padding: 22px 0 0;}
.detail_box .recommendation ul li{line-height: 232%; font-size: 16px;}
.detail_box .recommendation .link_box{display: flex; justify-content: space-between; gap: 39px; padding: 115px 0 0;}
.detail_box .recommendation .link_box .btn{font-size: 17px; width: calc(100% / 3 - 30px); height: auto; text-align: center; position: relative; font-family: "Noto Sans JP"; font-weight: 300; padding: 24px 0 26px;}
.detail_box .recommendation .link_box .btn:before{content: ""; display: block; position: absolute; top: 50%; transform: translateY(-50%); left: 27px;}
.detail_box .recommendation .link_box .btn.btn_1:before{background: url(../images/com/icn_1.png) no-repeat center center; background-size: 100%; width: 39px; height: 39px;}
.detail_box .recommendation .link_box .btn.btn_2:before{background: url(../images/com/icn_2.png) no-repeat center center; background-size: 100%; width: 33px; height: 34px;}
.detail_box .recommendation .link_box .btn.btn_3:before{background: url(../images/com/icn_3.png) no-repeat center center; background-size: 100%; width: 45px; height: 45px;}

.detail_box .mover_content a{max-width: 383px; height: auto; display: block;}
.detail_box .mover_content img{width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block;}
.detail_box .mover_content p{font-size: 18px; padding: 21px 0 0; line-height: 150%;}

.detail_box .photograph_content a{max-width: 375px; height: auto; display: block;}
.detail_box .photograph_content a img{width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; display: block;}

.detail_box .article_content a{max-width: 381px; height: auto; display: block;}
.detail_box .article_content a img{width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; display: block;}
.detail_box .article_content a dl{padding: 27px 0 0;text-align: left;}
.detail_box .article_content a dl .ttl{font-size: 22px; font-family: "Noto Sans JP"; font-weight: 500; line-height: 160%;}
.detail_box .article_content a dl .text{padding: 16px 0 0; line-height: 150%; font-family: "Noto Sans JP"; font-weight: 300; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 16px;}
.detail_box .article_content a dl .cat{padding: 21px 0 0 34px; color: #9A9A9A; font-size: 15px;}
/* ------------------------------------------------------------ #content_1 ------------------------------------------------------------ */
#content_1{padding: 136px 0 0;}
#content_1 .bg_box{background: #F7F2E9; padding: 58px 0 74px;}
#content_1 .flex{display: flex; justify-content: space-between; padding: 68px 0 0; gap: 24px;}
#content_1 .bg_box h2{font-size: 36px; font-family: "Zen Old Mincho", serif; font-weight: 600; font-style: normal; text-align: center;}
#content_1 .bg_box .link_box{padding: 75px 0 0;}

/* ------------------------------------------------------------ #content_2 ------------------------------------------------------------ */
#content_2{padding: 98px 0 0;}
#content_2 h2{font-size: 36px; font-family: "Zen Old Mincho", serif; font-weight: 600; font-style: normal; text-align: center;}
#content_2 .swiper{padding: 44px 0 0;}
#content_2 .link_box{padding: 40px 0 0;}

/* ------------------------------------------------------------ #content_3 ------------------------------------------------------------ */
#content_3 {padding: 96px 0 0; overflow: hidden; text-align: center;}
#content_3 h2 { font-size: 36px; font-family: "Zen Old Mincho", serif; font-weight: 600; font-style: normal; text-align: center;}
#content_3 .swiper { width: 100vw; margin-left: calc(50% - 50vw); padding: 45px 0 0; overflow: visible; }
#content_3 .swiper .swiper-slide  
#content_3 .swiper .swiper-slide img {display: block; width: 100%; height: auto;}
#content_3 .link_box {padding: 71px 0 0;}

/* ------------------------------------------------------------ #content_4 ------------------------------------------------------------ */
#content_4 {padding: 96px 0 0; overflow: hidden; text-align: center;}
#content_4 h2 { font-size: 36px; font-family: "Zen Old Mincho", serif; font-weight: 600; font-style: normal; text-align: center;}
#content_4 .swiper { width: 100vw; margin-left: calc(50% - 50vw); padding: 45px 0 0; overflow: visible; }
#content_4 .swiper .swiper-slide  
#content_4 .swiper .swiper-slide img {display: block; width: 100%; height: auto;}
#content_4 .link_box {padding: 71px 0 0;}
/* ----------------------------- mobile ------------------------------- */
@media only screen and (max-width: 768px) {
	
	main{ padding-top: 60px; }
	
/* ------------------------------------------------------------ bread */
	#bread{ padding: 15px 3%; background: var(--gray); }
	#bread a{ padding: 0 30px 0 0; display: block;}
	#bread a::before{ right: 6px; width: 18px; }
	#bread .title{ font-size: 11px; }
	


/* ------------------------------------------------------------ pager */
	.pagers{ gap: 12px; padding: 35px 0 0; flex-wrap: wrap; }
	.pagers a{ width: 40px; height: 40px; font-size: 14px; }
	
/* fv */
	#fv.bg_content { padding: 20% 5%; min-width: auto;}
	#fv.bg_content:before { width: 70%; }
	#fv.bg_content h1 { font-size: 28px; line-height: 160%; }
	#fv.no_bg_content { padding: 60px 5% 0; }
	#fv.no_bg_content h1 { font-size: 28px; line-height: 160%; }
	#fv.no_bg_content_2 { padding: 70px 5% 0; }
	#fv.no_bg_content_2 h1 { font-size: 14px; line-height: 160%; }
	#fv.no_bg_content_2 h1 span { font-size: 20px; line-height: 150%; padding: 8px 0 0; }
	.com_bg { padding-top: 0; background-size: auto 100%; background: url(../images/common/bg_02.png) center top/100% no-repeat; }
	.link_box a.btn { width: 240px; font-size: 16px; padding: 15px 0 16px; }
	.inner_2 { width: 90%; margin: 0 auto; padding: 0; min-width: auto; }

/* page */
	#page.gold_page .pagination { gap: 0 10px; }
	#page.gold_page .pagination li { width: 40px; font-size: 15px; }
	#page.gold_page .pagination li span,
	#page.gold_page .pagination li a { padding: 5px 0; }

/* detail_box */
	.detail_box .youtube_box { padding: 56.25% 0 0; }
	.detail_box .text_box { width: 100%; padding: 55px 0 0; }
	.detail_box .text_box:not(:first-child) { padding: 30px 0 0; }
	.detail_box .text_box h2 { font-size: 20px; line-height: 160%; }
	.detail_box .text_box p { font-size: 13px; line-height: 190%; padding: 15px 0 0; }
	.detail_box .text_box p + p { padding: 25px 0 0; }
	
	.detail_box .img_box p{padding: 12px 0 0; font-size: 14px;}
	.detail_box .img_box:not(:first-child){padding: 55px 0 0;}

	.detail_box .recommendation { padding: 70px 0 0; }
	.detail_box .recommendation h2 { font-size: 22px; padding: 0 0 18px; }
	.detail_box .recommendation ul { padding: 18px 0 0; }
	.detail_box .recommendation ul li { font-size: 15px; line-height: 200%; }
	.detail_box .recommendation .link_box { display: block; padding: 45px 0 0; }
	.detail_box .recommendation .link_box .btn { width: 100%; font-size: 15px; padding: 18px 0 19px; margin: 0 auto; }
	.detail_box .recommendation .link_box .btn + .btn { margin-top: 15px; }
	.detail_box .recommendation .link_box .btn:before { left: 18px; }
	.detail_box .recommendation .link_box .btn.btn_1:before { width: 30px; height: 30px; }
	.detail_box .recommendation .link_box .btn.btn_2:before { width: 27px; height: 28px; }
	.detail_box .recommendation .link_box .btn.btn_3:before { width: 34px; height: 34px; }
	.detail_box .mover_content a { width: 100%; max-width: 100%; }
	.detail_box .mover_content p { font-size: 16px; padding: 15px 0 0; line-height: 160%; }
	.detail_box .photograph_content a { width: 100%; max-width: 100%; }
	.detail_box .article_content a { width: 100%; max-width: 100%; }
	.detail_box .article_content a dl { padding: 18px 0 0; }
	.detail_box .article_content a dl .ttl { font-size: 19px; line-height: 160%; }
	.detail_box .article_content a dl .text { padding: 12px 0 0; font-size: 15px; line-height: 170%; }
	.detail_box .article_content a dl .cat { padding: 15px 0 0 25px; font-size: 14px; }

/* content_1 */
	#content_1 { padding: 70px 0 0; }
	#content_1 .bg_box { padding: 45px 0 55px; }
	#content_1 .flex { display: block; padding: 35px 0 0; }
	#content_1 .flex > * { margin-bottom: 35px; }
	#content_1 .flex > *:last-child { margin-bottom: 0; }
	#content_1 .bg_box h2 { font-size: 28px; line-height: 150%; }
	#content_1 .bg_box .link_box { padding: 40px 0 0; }

/* content_2 */
	#content_2 { padding: 65px 0 0; }
	#content_2 h2 { font-size: 28px; line-height: 150%; }
	#content_2 .swiper { padding: 35px 0 0; }
	#content_2 .link_box { padding: 35px 0 0; }

/* content_3 */
	#content_3 { padding: 65px 0 0; }
	#content_3 h2 { font-size: 28px; line-height: 150%; }
	#content_3 .swiper { padding: 35px 0 0; }
	#content_3 .link_box { padding: 40px 0 0; }
	
/* content_4 */
	#content_4 { padding: 65px 0 0; }
	#content_4 h2 { font-size: 28px; line-height: 150%; }
	#content_4 .swiper { padding: 35px 0 0; }
	#content_4 .link_box { padding: 40px 0 0; }
}