*,*::after,*::before{ box-sizing:border-box; }
[hidden]:not([hidden="until-found" i]) { display: none !important; }
:where(:root) { font-family:sans-serif; line-height:1.65; text-autospace:normal; line-break:strict;  overflow-wrap: anywhere; -webkit-text-size-adjust:100%; scrollbar-gutter:stable; }
:where(html,body){ margin: unset; padding: unset; }
:where(body) {min-block-size: 100dvb; margin: unset; }
:where(h1,h2,h3,h4,h5,h6) { text-wrap: pretty; }
:where(dt){ font-weight:bolder; }
:where(code, kbd, samp){ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,"Liberation Mono", "Courier New", monospace; font-size:unset; font-variant-ligatures: none; }
@media (forced-colors: active) {
  :where(mark){ background-color: Highlight; color: HighlightText; }
}
:where(a:any-link) { color: unset; text-decoration:1px underline; text-underline-offset: .2em; text-decoration-thickness: from-font; }
:where(img,svg,picture,video,canvas,model,iframe) { block-size: auto; max-inline-size: 100%; vertical-align: bottom; }
:where(label:has(:is(input,textarea))){ display:block; }
:where(button, input, select, textarea),::file-selector-button {
  border-width: 1px;
  border-style: solid;
  border-color: unset;
  border-radius: unset;
  color: unset;
  font: unset;
  letter-spacing: unset;
  text-align: unset;
  max-inline-size: 100%;
}
:where(textarea) { margin-block: unset; resize: block; max-height: 80svh; }
:where(button,input:is([type="button" i], [type="submit" i], [type="reset" i])),
::file-selector-button { background-color: unset; }
:where(button,input:is([type="button" i], [type="submit" i], [type="reset" i])),
::file-selector-button { touch-action: manipulation; }
:where( button:enabled,label[for],select:enabled,
input:is([type="button" i],[type="submit" i],[type="reset" i],[type="radio" i],[type="checkbox" i]):enabled,),
:where(:enabled)::file-selector-button { cursor: pointer; }
:where(summary){list-style-type: ""; cursor:pointer; }
:where(summary)::-webkit-details-marker { display: none; }
:where(:focus-visible) { outline-offset: 2px; }
[tabindex="-1"]:focus { outline: none !important; }
:where(dialog, [popover]) { overscroll-behavior-block: contain; padding: unset; border: unset; }
:where(dialog:not([open], [popover]), [popover]:not(:popover-open)) { display: none !important; }
:where(dialog,[data-dialog]) { max-inline-size: unset; max-block-size: unset; max-width:70vw; max-height:70vh; 
  box-shadow:0 0 10px oklch(0% 0 0deg / 60%); position: fixed; inset: 0; 
  @media ( width < 480px ){
    max-width:86vw; max-height: 90svh;
  }
  &:has(div.body){
    display:grid; grid-template-rows: auto minmax(0, 1fr);
    div.body{ overflow:auto; overscroll-behavior:contain; }
  }
}
:where(dialog)::backdrop { background-color: oklch(0% 0 0deg / 40%); }
:where([popover]) { margin: unset; }
html,body{ margin:0; padding:0; }

:root{
  --base-color: oklch(63.383% 0.13802 157.676);
  --base-bg: light-dark(#F9f9f9, #262626);
  --base-font: light-dark(#262626, #F0F0F0);
  --link-color: color-mix(in srgb, var(--base-color) 80%, var(--base-font));

  background-color: var(--base-bg); color: var(--base-font);
  border-block-start: 6px solid var(--base-color);
}

a:any-link{
  color: var(--link-color); text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--base-color) 60%, transparent);
  &:focus{ text-decoration-thickness: 3px; }
  /* &:visited{ color: color-mix(in srgb, var(--link-color) 20%, var(--base-font));} */
  @media(any-hover:hover){ &:hover{ text-decoration-thickness: 2px; } }
}
button{ 
  padding-inline:.5em; padding-block:.2em;
  background: var(--base-color); color: var(--base-bg); 
  border-bottom:2px solid color-mix(in srgb, var(--base-color) 50%, var(--base-font));
  &:focus{ background-color: color-mix(in srgb, var(--base-color) 90%, var(--base-bg)); }
  @media (any-hover:hover){ 
    &:hover{ background-color: color-mix(in srgb, var(--base-color) 90%, var(--base-bg)); }
  }
}
svg{ 
  fill: currentColor; display:block; margin-inline:auto;
}
dl{
  dt{}
  dd + dt{ margin-block-start: 1rem; }
  & > div{ display:flex; gap: 1em; align-items:baseline }
}

body{

  &::after{ 
    content:""; display:block; position:fixed; inset:0;
    border-inline-start: 1px solid var(--base-color);  
    inset-inline-start: calc( 50% - 1px ); z-index:-1;
  }

  :is(h2,h3){ margin-block: 1rem; }
  & > *:is( header, nav, article){ 
    max-width: calc( 60em + 60px); padding-inline: 5vw;
    margin-inline: auto; 
  }

  & > header{
    background: var(--base-bg); width:fit-content;
    padding: 2rem 20px 20px;  margin-block-end:2rem;
    color:  var(--base-color);
    h1{ 
      margin:0; font-size: 2rem; 
      background:var(--base-bg);  color:var(--base-bg); 
      -webkit-text-stroke: 4px  var(--base-color); 
      paint-order: stroke;
      &::after,&::before{ content:""; display:block; margin-inline:auto;}
      &::before{ width:1rem; aspect-ratio:1/1; background: var(--base-color); clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }
      &::after{ border-block-end:4px double  var(--base-color); inline-size: 65%; }
    }
  }

  & > nav{ 
    display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap: 50px;
    & > a:any-link{ 
    	display: block; border:1px dotted  var(--base-color); padding: 15px; text-align:center;
    	background: var(--base-color); color: var(--base-bg); text-decoration:none;
    	transition: box-shadow .2s;
    	svg{ display:block; width: 18%; margin-inline:auto; transition: transform .2s ease-in-out; }
    	&:hover svg{ transform: scale(1.1); }
    	@media (any-hover:hover){
    		&:hover{ background-color: color-mix(in srgb, var(--base-color) 90%, var(--base-bg)); }
    	}
    }
  }

  & > footer{
    margin-block-start: 5rem; padding-block: 20px; padding-inline:5vw;
    background: #EEE; 
    border-top:1px solid var(--base-color);
    dl{ margin-block: 3rem 1rem; }
  }

}

article{
  h2{ margin-block: 5rem 1.5rem; padding: .75rem; 
      background:var(--base-bg);   color:var(--base-color); 
      margin-inline:auto; width:fit-content; 
      svg{ width: 2rem; height:2rem; }
    }
  div.inner{ 
	 border: solid var(--base-color); border-block-width:1px; border-inline:0;
	 background-color: var(--base-bg);
	 padding-block: 1rem;

	 @media ( width > 30em ){
	 	border:0; background: transparent;
	    &.column{
	      display: grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
	      gap: max(60px, 2rem); justify-items: stretch; 
	    }
	    &.row{
	      padding: 30px;
	      border-radius: 10px;
	      border:1px solid var(--base-color);
	      background: var(--base-bg);
	    }
	 }
  }
}

dl.site{
	dt{
		display:flex; align-items:center; gap:.5em;
		&::before{ content:""; display:inline-block; width:.75em; border-block-start:2px solid var(--base-color); }
	}
	dd{ margin-inline:0; padding-inline:0; }
	label span{ display:block } 
}

#mailform{
  form.mail{ 
      & > div:not(:last-child){ margin-bottom: .5rem; }
      label{ display:block; }
      svg{ display:inline-block; }
      input,textarea{ background:transparent; border-color: var(--base-color); }
      textarea{ padding: 10px; inline-size:100%; min-block-size:7lh; field-sizing: content; }
      button{ padding:.6em 1em; }
      p{ margin-block:.5rem 0; margin-inline:0;}
  }
  ul.note{ margin:1em 0 0; padding-inline: 35px; padding-block: 1rem; 
    border-top: 1px dashed var(--base-color); }
}
ul.sosial,
ul.scoping{ 
  list-style:""; display:flex; gap:.55rem; align-items:center; 
}
ul.sosial{
	&, li{ margin-inline:0; padding-inline:0; }
  a:has(svg){ display:flex; gap:.2em; }
}

div.cdp:has(article.template){
  margin-block-start: 5rem; padding-inline:5vw;
  display:grid; 
  grid-template-columns: repeat(auto-fit, minmax(200px, 2fr));
  gap: 33px;
  article.template{
    padding-inline:0 !important;
    h2{ margin-block:0; font-size:1.2rem; }
    div.thumb{
      position:relative;
      img{ 
        width: 100%; height:180px; object-fit: cover; object-position:0 0;
        box-shadow: 0 0 7px color-mix(in srgb, var(--base-font) 50%, transparent);
      }
    }
    ul{ 
      list-style:""; margin-inline:0; padding:0; 
      li{ display:flex;
      font-size:small; }
    }
  }
  @media(any-hover:hover){
    a:hover > div.thumb::after{ 
      position:absolute; inset: 0; 
      display:grid; place-content: center; place-items: center;
      background: hsl(0 0 0/.6); color:#FFF;
      content: "view"; 
    }
  }
}

dialog{
  overflow:hidden;
  div.toolbar{ 
    display: flex; align-items:center; justify-content: space-between;
    padding-block: .5em; padding-inline: 20px;
    background: var(--base-color); color:#FFF;
    button{ background:transparent; color:currentColor; border:0; }
  }
  div.body{ 
    padding: 30px; 
    @media (width < 30rem){
      ul{ margin-inline:0; padding-inline:0; }
      li{ list-style-position: inside; }
    }
    li:not(:last-child){ margin-block-end: .5rem; }
    p{ text-align:right; }
    button{ display:block; padding: .2em 1em; margin-inline:auto; }
  }
}

ul.scoping {
  margin-inline:0; padding:0; gap: 1rem; 
  a:has(svg){ display:flex; gap:.2em; }
  svg{ width:1.5em; object-fit: 1/1;}
  @media ( width < calc(35rem + 10vw)){
    svg{ width: max(2rem, 34px);  }
    span.label{ display:none; }
  }
}

#toTop{ 
  display:block; margin-inline:auto 0; width: 44px; height: 44px;
  position:fixed; bottom: 3vh; right: 3vw; z-index:-1;
  opacity: 0; transform: translateY(20px); border:0;
  pointer-events: none; border-radius:50%;
  transition:
    opacity 0.5s ease,
    transform 0.5s ease;

  &.fixed{ 
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto; z-index: 999; 
  }
}

/* ページ移動アニメーション */
html.transition-enter{
  &::before,
  &::after{ 
    content:""; display:block; position:fixed; inset:0;
    background: var(--base-color);
    z-index:100;
  }
  &::before{ left: 50%; }
  &::after{ right: 50%; }
  &.transition-open{
      &::before,
      &::after{ 
        transform: scaleX(1);  
        animation-duration: .5s;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards; 
      }
      &::before{ animation-name: PageAnime-curtain01; }
      &::after{ animation-name: PageAnime-curtain02; }
  }
}
@keyframes PageAnime-curtain01 {
  0% {
    transform-origin: right;
    transform: scaleX(1);
  }
  100% {
    transform-origin: right;
    transform: scaleX(0);
  }
}

@keyframes PageAnime-curtain02 {
  0% {
    transform-origin: left;
    transform: scaleX(1);
  }
  100% {
    transform-origin: left;
    transform: scaleX(0);
  }
}


@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
      background-attachment: unset !important;
      scroll-behavior: unset !important;
      transition-delay: unset !important;
      transition-duration: 1ms !important;
      animation-duration: 1ms !important;
      animation-delay: unset !important;
      animation-iteration-count: unset !important;
      view-transition-name: none !important;
  }
}