@charset "utf-8";
img { max-width: 100%; height: auto; vertical-align: bottom; }
.mt3em { margin-top: 3em; }
.mt2em { margin-top: 2em; }
.mt1em { margin-top: 1em; }
.mt1hem { margin-top: 1.5em; }

.br-wrap {  word-break: keep-all; overflow-wrap: anywhere;}

.t-gothic { font-family:"Yu Gothic", "YuGothic", "游ゴシック", 'Noto Sans JP', sans-serif;}
.t-center { text-align: center; }
.t-underline { text-decoration: underline; }

.btn-block,
.btn-block-wrap a { width: fit-content; display: block; border: 1px solid #AAAAAA; padding: .5em 1em; text-decoration: none!important; }
.btn-block::after,
.btn-block-wrap a::after { content: '→'; font-size: .8125em; margin-left: 2em;  } 
.btn-block.-center { margin: 0 auto; }




.btn-block.nolink { color: #F00; }
.btn-block.nolink::after { display: none; }

.border-b { border-bottom: 1px solid #CCCCCC; }

.fullimg { width: 100%; height: auto; }

.title-section { font-size: 2.5rem; margin-bottom: .5em; line-height: 1.6; }
.title-section.-center { text-align: center; }
.title-sub { font-size: 1.5rem; font-weight: bold; margin-bottom: 1em; }
.title-sub.-center { text-align: center; } 

@media screen and (max-width: 1366px) {
  .title-section { font-size: 3vw; }
  .title-sub { font-size: 2vw; }
}
@media screen and (max-width: 768px) {
  .title-section { font-size: min(6.5vw, 2rem); }
  .title-sub { font-size: min(4vw, 1.3rem); }

}



.page-title-block { display: grid;  grid-template-columns: minmax(0, 1fr) 65%; }
.page-title-block.-text { grid-template-columns: 1fr; }

.page-title-block .text { padding: 70px 0 100px; }
.page-title-block .lead { font-size: 1.25rem; }
.page-title-block .text .inner { margin: 0 0 0 auto; width: 90%; max-width: calc(1200px * 0.35); padding-right: 5%; }


@media screen and (max-width: 1366px) {
  .page-title-block .lead { font-size: 1.5vw; }
}
@media screen and (max-width: 768px) {
  .page-title-block { grid-template-columns: 1fr; }
  .page-title-block .text { padding: 20vw 0; }
  .page-title-block .text .inner { max-width: none; padding: 0; margin: 0 auto; }
  .page-title-block .lead { font-size: min(3.6vw, 1.5rem); }
}


.lr-block { display: grid;  grid-template-columns: minmax(0, 1fr) 52%; }
.lr-block.-reverse { grid-auto-flow: row;  direction: rtl; } 

.lr-block .text .inner { width: 90%; max-width: calc(1200px * 0.48); margin: 0 0 0 auto; padding-right: 5%; direction: ltr; }
.lr-block.-reverse .text .inner { margin: 0 auto 0 0 ; padding: 0 0 0 5%;  }

.lr-block .img.limited { width:  width: 90%; max-width: calc(1200px * 0.52); margin: 0 auto 0 0; }
.lr-block.-reverse .img.limited { margin: 0 0 0 auto; }

@media screen and (max-width: 768px) {
  .lr-block { grid-template-columns: 1fr; gap: 4rem; }
  .lr-block .text .inner { padding: 0; max-width: auto; margin: 0 auto;  }
}

.conts-column3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.conts-column3 .img { position: relative; margin-bottom: 1em; }
.conts-column3 .img::before { content: ''; width: 100%; height: 100%; position: absolute; inset: 0; margin: auto; background: #000; opacity: .2; } 
.conts-column3 .img .caption { color: #FFF; position: absolute; left: 0; bottom: .5em; right: 0; width: 90%; z-index: 2; color: #FFF; text-align: center; font-size: 1.5rem; }
.conts-column3 .text { width: 90%; margin: 0 auto; }

@media screen and (max-width: 768px) {
  .conts-column3  { grid-template-columns: 1fr; gap: 50px; }
}

.related-posts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; margin-top: 2rem;  }
.related-posts .article { border-radius: 10px; box-shadow: 0 3px 6px rgba(0,0,0,.07); background: #FFF; overflow: hidden; }
.related-posts .article .img { width: 100%; aspect-ratio: 16 / 9; position: relative; }
.related-posts .article .img img { width: 100%; height: 100%; object-fit: cover; }
.related-posts .article .text { padding: 1rem 1.25rem 1.25rem; }
.related-posts .article .title { font-size: 1.5rem; margin-bottom: .3em; }
.related-posts .excerpt {  overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 3;}

@media screen and (max-width: 768px) {
  .related-posts { grid-template-columns: 1fr; }
  .related-posts .article .title { font-size: 1.2rem; }
}


.quadrants { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.quadrants > li { position: relative; display: block; }
.quadrants > li::before { content: ''; width: 100%; height: 100%; position: absolute; inset: 0; opacity: .2; background: #000; pointer-events: none; }
.quadrants .title { font-size: 1.25rem; font-weight: bold; position: absolute; left: 1em; top: 1em; margin: auto; z-index: 2;color: #FFF; line-height: 1;  }


@media screen and (max-width: 900px) {
  .quadrants { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


.page-post-wrap { padding: 70px 0 100px; }
.page-post-wrap .eyecatch { margin-bottom: 3rem; }

.page-post-wrap .meta { color: #707070; }
.page-post-wrap .meta .category { display: flex; flex-wrap: wrap; margin-top: .5em;  }
.page-post-wrap .meta .category > li { margin: 0 5px 5px 0; }
.page-post-wrap .meta .category a { display: block; background: #E8E8E8; border-radius: 2em; padding: 0 1em; color: #2E2E2E; }

@media screen and (max-width: 768px) {
  .page-post-wrap { padding: 20vw 0;  }
}


.post-single-body { margin: 40px 0; }
.post-body h2 { font-size: 1.5rem; margin: 2em 0 1em; padding-bottom: 1em; font-weight: bold; border-bottom: 1px solid; }
.post-body h3 { margin: 2em 0 1em; font-size: 1.25rem; font-weight: bold; }
.post-body h4 { font-weight: bold; margin: 2em 0 1em; padding-left: 1em; }
.post-body h4::before { content: '・'; margin-left: -1em; display: inline-block; width: 1em; }
.post-body a { text-decoration: underline; }
.post-body p { margin-bottom: 1.5em; }


.single-linkcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin-top: 100px; }
.single-linkcards .img { position: relative; margin-bottom: .5em; }
.single-linkcards .img::before { content: ''; width: 100%; height: 100%; display: block; background: rgba(0,0,0,.2); position: absolute; inset: 0; margin: auto; }
.single-linkcards .img .title { position: absolute; z-index: 2; color: #FFF; left: .5em; top: .5em; margin: auto; max-width: calc(100% - 2em); }
.single-linkcards .img .title span { font-weight: bold; font-size: 1.25rem; }


.formblock { margin-top: 2em; }
.formblock .item { margin-bottom: 2em; }
.formblock label { margin-bottom: .5em; display: block; font-size: 1.125rem; }
.formblock label .require { font-size: .8em; margin-left: 1em; }
.formblock input[type="text"],
.formblock input[type="email"],
.formblock input[type="tel"],
.formblock textarea { width: 100%; padding: 1em; border: 1px solid #CCC; font-size: 1rem; }
.formblock .name-input{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1em; }

.formblock .btn-block { background: none; margin-top: 3em; font-size: 1rem; line-height: 2; }


.volume-control { border: none; background: none; padding: 0; margin: 1em; display: flex; cursor: pointer; }
.volume-control img { opacity: .5; }
.volume-control .label { width: 5em; font-size: .625rem; padding: 0 .7em; height: 2.2em; line-height: 2.2;  border-radius: 2em; background: #BCBCBC; color: #FFF; font-weight: bold; display: block; margin-left: 1em; text-align: left; position: relative; transition: background .3s; }
.volume-control .label::before { content: ''; width: 1.5em; height: 1.5em; border-radius: 50%; position: absolute; left: 3.2em; top: 0; bottom: 0; margin: auto; background: #FFFF; display: block; transition: left .3s;}

.volume-control.on img { opacity: 1; }
.volume-control.on .label { padding-left: 2.5em; background: #707070; }
.volume-control.on .label::before { left: .4em; right: auto; }

/*en*/

.en-wrapper .title-section { font-family: "Playfair Display", serif; font-size: 1.8rem; }
.en-wrapper .page-title-block .lead { font-size: 1.125rem; }

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