@charset "UTF-8";
/*--------------------------------------------
FONTS
---------------------------------------------*/
@font-face {
  font-family: "Noto Sans JP";
  src : local( "Noto Sans JP" ) , local( "NotoSansJP" ) , local( "NotoSansJP-Regular" ) , url( "../fonts/Noto_Sans_JP/NotoSansJP-VariableFont_wght.woff2" ) format( "woff2" );
  font-optical-sizing: auto;
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
:root{
	--fontFamily : "Noto Sans JP", sans-serif;
}
@font-face {
  font-family: "Barlow";
  src : url( "../fonts/Barlow/Barlow-Bold.woff2" ) format( "woff2" );
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
.barlow {
  font-family: "Barlow", sans-serif;
}

/*--------------------------------------------
UNIT
---------------------------------------------*/

@media screen and ( width <= 768px ){
  :root{
    --breakPoint : 375;
    --contentWidth : 350;
    --gutter : 12.5;
    --remBase : 100vw / 375;
    --viewportBase : 100% / var(--breakPoint);
  }
}
@media print,screen and ( width > 768px ){
  :root{
    --breakPoint : 1120;
    --contentWidth : 1080;
    --gutter : 20;
    --remBase : min( 1px , 100vw / 1120 );
    --viewportBase : min( 1px , 100% / var(--breakPoint) );
  }
}
:root{
  --contentBase :  100% / var(--contentWidth);
}

/*--------------------------------------------
COLOR
---------------------------------------------*/
@property --base {
  syntax: "<color>";
  inherits: false;
  initial-value: black;
}
@property --blue {
  syntax: "<color>";
  inherits: false;
  initial-value: #234398;
}
@property --lightBlue {
  syntax: "<color>";
  inherits: false;
  initial-value: #D4EDFC;
}
@property --green {
  syntax: "<color>";
  inherits: false;
  initial-value: #0B8078;
}
@property --lightGreen {
  syntax: "<color>";
  inherits: false;
  initial-value: #F6FEE2;
}
@property --yellow {
  syntax: "<color>";
  inherits: false;
  initial-value: #F1EF64;
}
@property --red {
  syntax: "<color>";
  inherits: false;
  initial-value: #CC271F;
}
@property --lineColor {
  syntax: "<color>";
  inherits: false;
  initial-value: #00B900;
}

/*--------------------------------------------
FILTER COLOR
---------------------------------------------*/
@property --filterWhite{
  syntax:"*";
  inherits: false;
  initial-value:invert(99%) sepia(28%) saturate(2%) hue-rotate(3deg) brightness(108%) contrast(100%);
}
@property --filterBlue{
  syntax:"*";
  inherits: false;
  initial-value: invert(21%) sepia(53%) saturate(2150%) hue-rotate(208deg) brightness(94%) contrast(96%);
}
@property --filterGreen{
  syntax:"*";
  inherits: false;
  initial-value: invert(29%) sepia(46%) saturate(5206%) hue-rotate(161deg) brightness(87%) contrast(91%);
}
@property --filterRed{
  syntax:"*";
  inherits: false;
  initial-value: invert(32%) sepia(64%) saturate(1909%) hue-rotate(337deg) brightness(76%) contrast(114%);
}
@property --filterLineColor{
  syntax:"*";
  inherits: false;
  initial-value: invert(41%) sepia(71%) saturate(1482%) hue-rotate(88deg) brightness(99%) contrast(111%);
}
/*--------------------------------------------
TRANSITION
---------------------------------------------*/
:root{
  --hoverDuration : .3s;
  --hoverTimingFunction : linear;
  --transitionBase : var(--hoverDuration) var(--hoverTimingFunction)
}

@media screen and ( width <= 768px ){
  :root{
    --breakPoint : 480;
    --contentWidth : 456;
    --gutter : 12;
    --remBase : 100vw / 480;
    --viewportBase : 100% / var(--breakPoint);
  }
}
@media print,screen and ( width > 768px ){
  :root{
    --breakPoint : 1320;
    --contentWidth : 1280;
    --gutter : 20;
    --remBase : min( 1px , 100vw / 1320 );
    --viewportBase : min( 1px , 100% / var(--breakPoint) );
  }
}
:root{
  --contentBase :  100% / var(--contentWidth);
}
:root{
  --hoverDuration : .3s;
  --hoverTimingFunction : linear;
  --transitionBase : var(--hoverDuration) var(--hoverTimingFunction)
}

/*--------------------------------------------
POSTS
---------------------------------------------*/
#postAuthor{
  background-color: #f8f9fa;
  overflow: hidden;
  box-shadow: 0 calc( 2 * var(--remBase ) ) calc( 8 * var(--remBase ) ) color-mix( in srgb , black 4% , transparent );
  outline : solid 1px #d1d5db;
  margin-top : calc( 80 * var(--remBase ) );
  border-radius : calc( 12 * var(--remBase ) );
  outline-offset : -1px;
  .authorTitle{
    align-content: center;
    background-color: var(--green);
    font-weight: 700;
    color:white;
    padding-block : calc( 8 * var(--remBase ) );
    text-box: trim-both cap alphabetic;
    text-align: center;
    text-align: left;
  }
  > div{
    padding-block : calc( 24 * var(--remBase ) );
    display: grid;
    grid-template-rows: auto 1fr;
  }
  picture{
    border-radius: 50%;
    aspect-ratio: 1;
    width: auto;
    overflow: hidden;
    img{
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: center;
      filter:box-shadow( calc( 2 * var(--remBase) ) calc( 2 * var(--remBase) ) calc( 2 * var(--remBase) ) color-mix( in srgb , black 20% , transparent ) );
    }
  }
  .names{
    font-weight: 700;
    font-size: calc( 16 * var(--remBase ) );;
    line-height: 1.4;
    letter-spacing: 0.05em;
  }
  .description{
    letter-spacing: 0.05em;
    text-align: left;
  }
  @media screen and ( width <= 768px ){
    .authorTitle{
      padding-inline : calc( 24 * var(--contentBase ) );
      font-size : calc( 16 * var(--remBase ) );
      height : calc( 32 * var(--remBase ) );
    }
    > div{
      padding-inline : calc( 24 * var(--contentBase ) );
      grid-template-columns: calc( 80 * 100% / 408 ) 1fr;
      column-gap : calc( 20 * 100% / 408 );
      align-items: center;
      row-gap : calc( 12 * var(--remBase ) );
    }
    picture{
      height : calc( 80 * var(--remBase ) );
      grid-column: 1;
      grid-row: 1
    }
    .names{
      font-size: calc( 18 * var(--remBase ) );;
      line-height: 1.6;
      grid-column: 2;
      grid-row: 1
    }
    .description{
      font-size: calc( 15 * var(--remBase ) );;
      line-height: 1.6;
      grid-column: 1/-1;
      grid-row: 2;
    }
  }
  @media print,screen and ( width > 768px ){
    .authorTitle{
      padding-inline : calc( 24 * 100% / 940 );
      height : calc( 52 * var(--remBase ) );
      font-size: calc( 20 * var(--remBase ) );;
    }
    > div{
      padding-inline : calc( 40 * 100% / 940 );
      grid-template-columns: auto 1fr;
      column-gap : calc( 40 * 100% / 860 );
      align-items: start;
      row-gap : calc( 12 * var(--remBase ) );
    }
    picture{
      height : calc( 134 * var(--remBase ) );
      grid-column: 1;
      grid-row: 1/-1;
      align-self: start;
    }
    .names{
      font-size: calc( 18 * var(--remBase ) );;
      line-height: 1.6;
      grid-column: 2;
      grid-row: 1;
    }
    .description{
      font-size: calc( 15 * var(--remBase ) );;
      line-height: 1.6;
      grid-column: 2;
      grid-row: 2;
    }
  }
}

#paginationSingle{
  .prev, .next{
    grid-row: 1;
    display: grid;
    grid-auto-flow: column;
    align-items: center;
    text-align: left;
    img{
      width: auto;
    }
  }
  .prev{
    justify-content: start;
    &:before{
      content:"";
      display: block;
      font-size: 0;
      background : url( "../images/ui/arrow/prev02.svg" ) left top / contain no-repeat;
      filter: invert(98%) sepia(67%) saturate(1422%) hue-rotate(193deg) brightness(130%) contrast(73%);
      aspect-ratio: 14/21;
      width: auto;
    }
  }
  .next{
    justify-content: end;
    &:after{
      content:"";
      display: block;
      font-size: 0;
      background : url( "../images/ui/arrow/next02.svg" ) left top / contain no-repeat;
      filter: invert(98%) sepia(67%) saturate(1422%) hue-rotate(193deg) brightness(130%) contrast(73%);
      aspect-ratio: 14/21;
      width: auto;
    }
  }
  .archive{
    display: block;
    text-align: center;
    align-content: center;
    color:white;
    text-box: trim-both cap alphabetic;
    background-color: var(--green);
  }
  @media screen and ( width <= 768px ){
    margin-top : calc( 30 * var(--remBase ) );
    .prev , .next{
      padding-inline : calc( 16 * 100% / 456 );
      column-gap : calc( 10 * 100% / 424 );
      font-size: calc( 12.8 * var(--remBase ) );;
      line-height: calc( 15.36 / 12.8 );;
      border-inline : solid 1px #ccc;
      border-block : solid 1px #ccc;
      height : calc( 100 * var(--remBase ) );
      img{
        height : calc( 72 * var(--remBase ) );
      }
    }
    .prev{
      &:before{
        height : calc( 24 * var(--remBase ) );
      }
    }
    .next{
      &:after{
        height : calc( 24 * var(--remBase ) );
      }
    }
    .prev + .next{
      border-top: 0;
    }
    .archive{
      width : calc( 282 * 100% / 456 );
      height : calc( 48 * var(--remBase ) );
      margin-inline : auto;
      font-size : calc( 18 * var(--remBase ) );
      margin-top : calc( 30 * var(--remBase ) );
    }
  }
  @media print,screen and ( width > 768px ){
    display: grid;
    grid-template-columns: repeat( 2 , 50% );
    margin-top : calc( 40 * var(--remBase ) );
    grid-template-rows: calc( 116 * var(--remBase) ) calc( 60 * var(--remBase) );
    row-gap : calc( 32 * var(--remBase ) );
    .prev , .next{
      padding-inline : calc( 16 * 100% / 470 );
      column-gap : calc( 10 * 100% / 438 );
      font-size: calc( 14.4 * var(--remBase ) );;
      line-height: calc( 17.28 / 14.4 );;
      border-block : solid 1px #ccc;
      border-inline : solid 1px #ccc;
      img{
        height : calc( 74 * var(--remBase ) );
      }
    }
    .prev{
      grid-column: 1;
      &:before{
        height : calc( 26 * var(--remBase ) );
      }
    }
    .next{
      grid-column: 2;
      &:after{
        height : calc( 26 * var(--remBase ) );
      }
    }
    .prev + .next{
      border-left: 0;
    }
    .archive{
      height: 100%;
      width : calc( 312 * 100% / 940 );
      font-size : calc( 18 * var(--remBase ) );
      grid-column: 1/-1;
      grid-row: 2;
      justify-self: center;
    }
  }
}


/*--------------------------------------------
COLUMN
---------------------------------------------*/
#related{
  h3{
    margin: 0;
    padding: 0;
    background-color: transparent;
    font-weight: 700;
    border-bottom : solid 1px #ccc;
    text-align: left;
  }
  ul , li{
    list-style: none;
    margin: 0;
  }
  li , a{
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 4;
    row-gap: 0;
  }
  a{
    outline : solid 1px #ccc;
    outline-offset : -1px;
    background-color: white;
    box-shadow: calc( 4 * var(--remBase) ) calc( 4 * var(--remBase) ) calc( 4 * var(--remBase) ) color-mix( in srgb , black 12.5% , transparent );
    width: 100%;
    height: 100%;
    position: relative;
  }
  picture{
    width: 100%;
    aspect-ratio: 1376/768;
    height: auto;
    display: block;
    overflow: hidden;
    img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }
  }
  h4{
    margin-bottom: 0;
    padding-bottom: 0;
    color:#333;
    font-weight: 600;
    border-bottom : 0;
  }
  .category{
    color:var(--green);
    font-weight: 500;
  }
  dl{
    display: grid;
    justify-content: end;
    align-items: baseline;
    grid-auto-flow: column;
    font-weight: 400;
    color:#a1a1a1;
  }
  @media screen and ( width <= 768px ){
    margin-top : calc( 64 * var(--remBase ) );
    padding-bottom : calc( 48 * var(--remBase ) );
    h3{
      font-size : calc( 24 * var(--remBase ) );
      padding-bottom : calc( 8 * var(--remBase ) );
    }
    ul{
      margin-top : calc( 28 * var(--remBase ) );
      display: grid;
      align-items: stretch;
      grid-template-columns: repeat( 2 , calc( 222 * 100% / 456 ) );
      justify-content: space-between;
      row-gap : calc( 24 * var(--remBase ) );
    }
    a{
      padding-bottom : calc( 20 * var(--remBase ) );
    }
    h4{
      margin-top : calc( 12 * var(--remBase ) );
      padding-inline : calc( 12 * 100% / 222 );
      font-size: calc( 14 * var(--remBase ) );;
      line-height: calc( 20 / 14 );;
    }
    .category{
      margin-top : calc( 20 * var(--remBase ) );
      font-size: calc( 14 * var(--remBase ) );;
      line-height: calc( 18 / 14 );;
      padding-inline : calc( 12 * 100% / 222 );
    }
    dl{
      margin-top : calc( 4 * var(--remBase ) );
      font-size : calc( 14 * var(--remBase ) );
      padding-inline : calc( 12 * 100% / 222 );
    }
  }
  @media print,screen and ( width > 768px ){
    margin-top : calc( 64 * var(--remBase ) );
    padding-inline : calc( 15 * 100% / 810 );
    padding-bottom : calc( 48 * var(--remBase ) );
    h3{
      font-size : calc( 24 * var(--remBase ) );
      padding-bottom : calc( 12 * var(--remBase ) );
    }
    ul{
      margin-top : calc( 32 * var(--remBase ) );
      display: grid;
      align-items: stretch;
      grid-template-columns: repeat( 3 , calc( 240 * 100% / 780 ) );
      justify-content: space-between;
      row-gap : calc( 20 * var(--remBase ) );
    }
    a{
      padding-bottom : calc( 20 * var(--remBase ) );
    }
    h4{
      margin-top : calc( 14 * var(--remBase ) );
      padding-inline : calc( 8 * 100% / 240 );
      font-size: calc( 14 * var(--remBase ) );;
      line-height: calc( 18 / 14 );;
    }
    .category{
      margin-top : calc( 24 * var(--remBase ) );
      font-size: calc( 12 * var(--remBase ) );;
      line-height: calc( 16 / 12 );;
      padding-inline : calc( 16 * 100% / 240 );
    }
    dl{
      margin-top : calc( 4 * var(--remBase ) );
      font-size : calc( 12 * var(--remBase ) );
      padding-inline : calc( 16 * 100% / 240 );
    }
  }
}

@media ( hover : hover ){
  #related{
    a:hover{
      background-color: color-mix( in srgb , black 5% , transparent );
      opacity: 1;
      box-shadow: none;
      text-decoration: none;
      picture{
        img{
          scale: 1.2;
        }
      }
      h4{
        font-weight: 900;
      }
    }
  }
}
@media ( prefers-reduced-motion : no-preference ){
  #related{
    a{
      transition: box-shadow var(--transitionBase) , background-color var(--transitionBase);
    }
    img{
      transition: scale var(--transitionBase);
    }
    h4{
      font-weight: scale var(--transitionBase);
    }
  }
}

/*--------------------------------------------
CONTACT FORMS
---------------------------------------------*/
#contactForm {
  dl{
    dd{
      :is( input[type="text"] , input[type="email"] , input[type="tel"] ){
        width: 100%;
        padding-block : 0;
      }
      textarea{
        width: 100%!important;
      }
    }
  }
  @media screen and ( width <= 768px ){
    dl{
      dd{
        :is( input[type="text"] , input[type="email"] , input[type="tel"] ){
          height : calc( 56 * var(--remBase ) );
        }
      }
    }
    .wpcf7-turnstile{
      margin-bottom : calc( 40 * var(--remBase ) );
    }
  }
  @media print,screen and ( width > 768px ){
    dl{
      dt{
        p{
          span{
            margin-left: 0.5em;
          }
        }
      }
      dd{
        padding-inline : calc( 30 * 100% / 820 )!important;
        :is( input[type="text"] , input[type="email"] , input[type="tel"] ){
          height : calc( 48 * var(--remBase ) );
        }
      }
    }
    .wpcf7-turnstile{
      margin-bottom : calc( 48 * var(--remBase ) );
    }
  }
}