@charset "utf-8";
/* ------------------------------------------------------------ common */
#wrapper { overflow: hidden; padding: 0 0 120px; }

#wrapper .inner { width: 1100px; }

#bread { padding: 20px 0 90px; }

#fv { background: url(../images/news/fv.jpg) center center no-repeat; background-size: cover; padding: 180px 0; margin: 40px 0 0; }
#fv h3 { text-align: center; color: #fff; font-size: 20px; letter-spacing: 3px; }
#fv h3 span { font-size: 80px; font-family: 'Abyssopelagic'; letter-spacing: 10px; display: block; line-height: 100%; }

#main { float: left; width: 720px; padding: 0 0 50px; }
#main .date { font-size: 20px; color: #c4c4c4; display: inline-block; }
#main .cat { font-size: 14px; color: #a78671; display: inline-block; background: #f6f3f1; padding: 1px 15px 2px; border-radius: 15px; -webkit-border-radius: 15px; margin: 0 0 0 10px; vertical-align: text-bottom; }
#main .contents { padding: 15px 0 0; }
#main .contents h3 { font-size: 30px; font-weight: 500; line-height: 140%; padding: 0 0 30px; }
#main .contents img.photo {  }
#main .contents h4 { font-size: 22px; color: #a78671; padding: 30px 0 10px; border-bottom: 1px solid #dcdcdc; line-height: 130%; margin: 0 0 20px; }
#main .contents p { font-size: 16px; color: #333333; }
#main .contents figure { padding: 0; margin: 0; }

#main .tagname{ display: flex; align-items: center; gap: 15px; flex-wrap: wrap; padding-bottom: 10px; }
#main .tagname li{ display: inline-block; margin: 0; padding: 5px 20px 7px; border: 2px solid #A78671; font-size: 18px; color: #A78671; line-height: 1; }

#main .news_btn{ display: block; width: 100%; text-align: center; }
#main a:link{ display: inline-block; font-size: 16px; background: #a78671; color: #fff; margin-top: 10px; padding: 15px 10px; min-width: 150px; text-align: center; }
#main a:visited{ color: #fff; }
.btn_back { padding: 30px 0 0; }

.related { margin-top: 100px; padding: 70px 80px 100px; background: #F4F0EE; }
.related__head { position: relative; text-align: center; margin-bottom: 40px; padding-bottom: 15px; color: #A78671; }
.related__head:before{ content: ""; position: absolute; bottom: 0; left: 50%; transform: translate(-50%,0); content: ""; width: 110px; height: 2px; background: #A78671; }
.related__title { font-size: 47px; font-family: 'Abyssopelagic'; line-height: 100%; }
.related__sub { margin: 5px 0 0; font-size: 20px; }

.related__list { display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; gap: 30px; }
.related__item { width: calc((100% - 60px) / 3); }
 
.related__img{ overflow: hidden; }
.related__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
.related__img:hover img { transform: scale(1.2); }
 
.related__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 15px; }
.related__tag { display: inline-block; padding: 7px 12px; border: 2px solid #A78671; line-height: 100%; background: #fff; font-size: 14px; color: #A78671; transition: all 0.2s; }
.related__tag:hover { color: #ae9d87; border-color: #ae9d87; }
 
.related__text { margin-top: 10px; font-size: 17px; }
.related__text:hover { text-decoration: underline; }
 
.related a:focus-visible { outline: 2px solid #ae9d87; outline-offset: 3px; }


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

#wrapper { padding: 0 0 60px; }
#wrapper .inner { width: 94%; }

#bread { padding: 20px 0; }

#fv { padding: 100px 0; margin: 20px 0 0; }
#fv h3 { font-size: 17px; }
#fv h3 span { font-size: 45px; }


#main { float: none; width: 100%; padding: 0 0 50px; }
#main .date { font-size: 15px; }
#main .cat { font-size: 12px; }
#main .contents { padding: 15px 0 0; }
#main .contents h3 { font-size: 20px; padding: 0 0 30px; }
#main .contents img.photo { width: 100%; height: auto; }
#main .contents h4 { font-size: 16px; padding: 20px 0 10px; margin: 0 0 10px; }
#main .contents p { font-size: 14px; }

#main .tagname { gap: 5px; }
#main .tagname li { padding: 3px 10px 5px; border-width: 1px; font-size: 14px; }

#main a:link { font-size: 14px; margin-top: 7px; padding: 15px 10px; min-width: 150px; }


.related { margin-top: 50px; padding: 50px 20px 60px; }
.related__head { margin-bottom: 30px; padding-bottom: 12px; }
.related__head:before{ width: 80px; }
.related__title { font-size: 36px; }
.related__sub { font-size: 16px; }

.related__list { display: block; }
.related__item { width: 100%; }
.related__item + .related__item { margin-top: 35px; }

.related__tags { gap: 6px; margin-top: 12px; }
.related__tag { padding: 6px 10px; font-size: 12px; }

.related__text { margin-top: 8px; font-size: 15px; }


}