@charset "UTF-8";
:root {
  --white: #f0f0f0;
  --gray: #BBB;
  background-color: var(--white);
  color: var(--black);
}


/* 251021〜 */
body {
  background-color: var(--white);
  font-family: "helvetica-neue-lt-pro","dnp-shuei-gothic-gin-std";
}

h1 {
  line-height: 1.21875;
}

/* mv */
.mv {
  display: grid;
  /* display: none; */
  grid-template-columns: repeat(4,1fr);
}

.mv .gr2 {
  grid-row: 2;
}

.mv .title {
  grid-column: 1 / 3;
  align-self: center;
  justify-self: start;
  padding-inline-start: calc(40 / 1440 * 100vw);
  padding-inline-start: 2.5rem;
  font-size: 4rem;
  text-transform: uppercase;
}

.fadein {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.fadein.show {
  opacity: 1;
  transform: translateY(0);
}

.mv .mvRight {
  grid-column: 3/5;
  display: flex;
}

.mv .mvTop {
  grid-column: 2;
  height: calc(150/1440*100vw);
}

.mv .mvTop img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom;
}

/* パンくず */
.outer {
  margin-block-start: 2.5rem;
  padding-inline: calc(40 / 1440 * 100vw);
}

.breadcrumbs {
  text-transform: uppercase;
  color: var(--gray);
}

.breadcrumbsItem {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.breadcrumbs a {
  color: #bbb;
}


.nav.linkBox li a {
  font-weight: normal;
}

.breadcrumbsItem li+li:before {
  content: "-";
  margin: 0 .5em;
  color: var(--gray);
}

.breadcrumbs a.current {
  color: var(--black);
}


.profileBtn {
  opacity: .2;
}

figure {
  margin: 0;
}

a:hover {
  text-decoration: none;
}

.blog a:hover .title {
  text-decoration: underline;
}

.blog img,
.singlepage .article .author img {
  width: 100%;
  height: auto;
}

.catchcopy {
  font-size: min(5vw,60px);
  color: #2f2f2f;
  text-align: center;
}

.blog.block {
  /* max-width: 1200px; */
  display: grid;
  grid-template-columns: 1fr calc(1040/1440*100vw);

  width: calc(1360/1440*100vw);
  margin: auto;
  margin-block-start: 12.5rem;
  border-bottom: 1px solid #f2f2f2;
}

/* catBox */
.catBox button{
  text-transform: uppercase;
  cursor: pointer;
}

.catBox ul {
  position: sticky;
  top: 1rem;
  left: 0;

  display: grid;
  gap: 1.25rem;
}

.catBox button {
  color: #bbb;
  /* font-weight: 600; */
}

.catBox button.act {
  color: var(--black);
}

.blog .article {
  border-top: 1px solid #bbb;
}

.blog .article:last-of-type {
  border-bottom: 1px solid #bbb;
}


.blog .title {
  font-size: clamp(1rem,calc(16/1440*100vw),2rem);
}

.blog .note {
  display: flex;
  align-items: center;
  margin-block-start: 1.25rem;
  gap: 1.25rem;
  font-size: 1rem;
}

.blog .note .date {
  line-height: 1.25rem;
}

.blog .note .cat
,.single .cat {
  padding-inline: .3125rem;
  background-color: var(--black);
  color: var(--white);
  line-height: 1.25;
  text-transform: uppercase;
}


.blog .tx {
  margin-block-start: 1.25rem;
  font-size: .875rem;
}

.blog .article > a {
  display: grid;
  /* grid-template-columns: repeat(auto-fill,minmax(500px,1fr)); */
  grid-template-columns: max-content 1fr;
  gap: 2rem;
  padding: 1.25rem 0 1.25rem;
  border-top: 1px solid #f2f2f2;
}

.blog .article .content {
  box-sizing: border-box;
  display: grid;
  grid-template-rows: repeat(2,max-content);
  padding: 0 10px;
}

.blog .article .thm {
  overflow: hidden;
  display: grid;
  width: calc(240/1440*100vw);
}

.blog .article .thm > img {
  max-width: 415px;
  transition: .3s;
}

.blog .article > a:hover .thm > img {
  transform: scale(1.1);
}

.wp-block-gallery-is-layout-flex {
  gap: 16px;
}

.wp-block-gallery-is-layout-flex > figure {
  display: flex;
  align-items: center;
}



.article .author {
  display: grid;
  grid-template-columns: 2rem 1fr;
  align-items: center;
  gap: 10px;
  margin: 10px 0 0 0;
  padding: 0 10px;
}

.article .author .name {
  font-size: .9rem;
  color: #7e7e7e;
}

.fill-white-70 {
  fill: #bdbdbd;
}

.article .author .imgbox {
  max-width: 2rem;
  max-height: 2rem;
  border-radius: 2rem;
  overflow: hidden;
}

.article .heart {
  display: grid;
  grid-template-columns: repeat(2,max-content);
  align-items: end;
  gap: 7px;
  margin: 10px 0 0;
}

.article .heart .num{
  color: #7e7e7e;
  line-height: 1;
}

.singlepage .article {
  max-width: 55rem;
  margin: 6.25rem auto 0;
  padding-inline: 1.25rem;
}

.singlepage .article .title {
  /* padding: 0 10px; */
  /* font-size: min(5vw,50px); */
  font-size: 2rem;
}

.singlepage .article .thm {
  overflow: hidden;
  display: grid;
  margin: 6.25rem 0 0;
  border-radius: 4px;
}

.singlepage .article .thm > img {
  width: 100%;
  height: auto;
}

.singlepage .article .content {
  margin-block-start: 6.25rem;
  /* margin: 52px 0 68px; */
  /* padding: 0 10px 40px; */
  /* border-bottom: 1px solid #2f2f2f1a; */
  font-size: 1.2rem;
}

.singlepage .article .content h3 {
  font-size: 1.5rem;
}

.singlepage .article .content h2 {
  font-size: 2.5rem;
}

.singlepage .article .content img {
  max-width: 100%;
  height: auto;
}

.singlepage .article .content figure > img {
  border-radius: 8px;
}

.singlepage .article .content figcaption {
  font-size: .8rem;
  color: #7e7e7e;
  text-align: right;
}

.singlepage .article .content p{
  margin: 0 0 1.5rem;
  line-height: 2.1;
  font-size: 1rem;
}

.singlepage .article .content .note{
  font-size: 0.875rem;
  background-color: #ececec;
  padding: 1.5rem 2rem;
}

.share {
  display: grid;
  grid-template-columns: repeat(2,max-content) 1fr;
  margin:0 0 28px 0;
  padding: 0 15px;
  gap: 1.1rem;
}

.share .btn.fb {
  box-sizing: border-box;
  height: 28px;
  padding: 1px 12px 1px 12px;
  border-radius: 9999px;
  background: #3b5998;
}

.share .btn.fb a{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: 100%;
  height: 100%;
  color: #fefefe;
}

.share .btn.fb svg{
  width: 18px;
  height: 18px;
}

.article .share .heart {
  margin: 0;
  justify-self: end;
  align-self: center;
}

.singlepage .article .prf {
  padding: 28px 2rem 32px;
  background: #ececec;
  border-radius: 8px;
}

.singlepage .article .prf .author {
  grid-template-columns: 3.75rem 1fr;
  gap: 2px 20px;
}

.singlepage .article .prf .author .imgbox {
  grid-row: 1/3;
  max-width: 3.75rem;
  max-height: 3.75rem;
  border-radius: 3.75rem;
}

.singlepage .article .prf .author .name {
  font-size: 1.2rem;
  font-weight: bold;
  color: #2f2f2f;
}

.singlepage .article .prf .detail {
  grid-column: 2;
  color: #7e7e7e;
  font-weight: bold;
}

.user_description {
  margin: 23px 0 0;
  font-size: 1rem;
  line-height: 2;
}

.picup {
  width: calc(100% - 7.8rem);
  margin: 108px auto 0 ;
  padding: 68px 0 104px;
  border-top: 1px solid #2f2f2f1a;
}

.picup > .title {
  display: grid;
  grid-template-columns: 1fr max-content;
  align-items: center;
}

.picup > .title h1 {
  font-size: 2.5rem;
}

.picup > .title .link {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 14px 30px;
  border: 1px solid #2f2f2f;
  border-radius: 4px;
}

.picup > .title .link > a {
  font-size: 1rem;
}

.picup .thm img {
  max-width: 100%;
  height: auto;
}

.picup-item {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 1.1rem;
}

.picup-item .thm {
  overflow: hidden;
  display: grid;
  justify-content: center;
  align-items: center;
  margin: 28px 0 0;
  border-radius: 4px;
  background: #000;
}

.picup-item .title {
  margin-top: 15px;
}

.picup-item a {
  display: grid;
  grid-auto-rows: min-content;
  grid-template-rows: max-content 1fr max-content;
  height: 100%;
}

.author > .imgbox > img {
  max-width: 100%;
}

.picup-item .article .author {
  grid-template-columns: max-content 1fr max-content;
  padding: 0;
}

.picup-item .article .heart {
  margin: 0;
}

/* ページネーション */
.pagination {
  grid-column: 2;

  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3.125rem;

  margin-block-start: 6.25rem;

  font-size: 1.5rem;
}

.pagination button {
  display: flex;

  font-size: inherit;
  font-weight: 600;
}

.page-btn {
  color: var(--gray);
}

.page-btn.act {
  color: var(--black);
}
/* END ページネーション */

/* single */
.single .breadcrumbs {
  margin-block-start: 10rem;
  padding-inline-start: 2.5rem;
}

.single .cat {
  width: fit-content;
}

.single .cat a{
  color: var(--white);
}

.single .note {
  display: flex;
  align-items: center;
  gap: 1.5625rem;

  margin-block-start: 3.125rem;
}

.single .top-link {
  max-width: 55rem;
  margin: 6.25rem auto 0;
  padding-inline: 1.25rem;
}

.single .top-link a {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  
  font-size: 1.5rem;
}

.single .top-link span {
  display: flex;
}
/* END single */

@media screen and (max-width:767px) {
.blog .logo {
  font-size: 1rem;
}

.mv {
  margin-block-start: 5rem;
  padding-inline-start: 1rem;
}

.mv .mvTop {
  grid-column: 1/3;
  aspect-ratio: 172/114;
  width: 100%;
  height: 100%;
}

.mv .title {
  font-size: 2rem;
  padding-inline-start: 0;
}


.mv .mvRight {
  aspect-ratio: 185.5 / 320;
}

.mv .mvRight img{
  object-fit: cover;
  object-position: 62%;
}

.outer {
  margin-block-start: 1.25rem;
}

.blog.block {
  display: block;
  margin-block-end: 10rem;
  margin-block-start: 5rem;
}

.catBox ul{
  overflow-x: scroll;
  padding-block-end: 1.25rem;
}

.catBox ul {
  display: flex;

}

#posts {
  margin-block-start: 2.5rem;
}

.blog .note .date,.blog .note .cat {
  font-size: .75rem;
}

.blog .note {
  gap: .375rem;
}




.catchcopy {
  margin: -20px 0 0 0;
  font-size: 50px;
}

.wp-block-gallery-is-layout-flex {
  flex-wrap: wrap;
}

.blog .article .thm {
  width: 100%;
}

.blog .title {
  max-width: 640px;
}

.blog .article > a {
  grid-template-columns: calc(96/375*100vw) 1fr;
  padding: .625rem 0;
  gap: 10px;
}

.blog .article .content {
  grid-template-columns: 1fr;
  align-content: space-between;
  max-width: 415px;
  min-height: 6.25rem;
  width: 100%;
  margin: auto;
}

.blog .article .content .title {
  /* grid-column: 1 / 3; */
  font-size: .875rem;
}

.blog .article .heart {
  align-self: center;
  justify-self: end;
}

.singlepage .article {
  margin: 5rem auto 0;
  padding-inline: 1rem;
}

.singlepage .article .content {
  max-width: 500px;
  margin: 26px auto 40px;
  /* padding-left: 1rem; */
  /* padding-right: 1rem; */
  font-size: 1rem;
}

.singlepage .article .thm {
  margin: 2.5rem 0 0;
}

.singlepage .article .content h2 {
  font-size: 1.7rem;
}

.singlepage .article .prf {
  box-sizing: border-box;
  width: calc(100% - 30px);
  margin: auto;
  padding: 14px;
}

.user_description {
  font-size: .876rem;
  line-height: 1.65;
}

.picup-item {
  grid-template-columns: 1fr;
}


/* ページネーション */
.pagination {
  margin-block-start: 3.125rem;
  font-size: 1.25rem;
}

.page-btn img {
  width: 1.5rem;
  height: 1.5rem;
}
/* END ページネーション */

/*  single */
.single .breadcrumbs {
  margin-block-start: 5rem;
  padding-inline-start: 1rem;
  
  font-size: .875rem;
}

.single .note {
  margin-block-start: 1.25rem;
}

.single .top-link {
  margin-block-start: 2.5rem;
  padding-inline: 1rem;
  
}

.single .top-link a{
  gap: .625rem;
  font-size: 1rem;
}

.single .top-link a img {
  width: 1.5rem;
}
/* END single */


}