@charset "UTF-8";

html {
  scroll-padding-top: 16px;
}

#wrapper{
  display: flex;
	max-width:1000px;
	background-color:#FFF;
	margin:0 auto;
	padding:0 25px;
  gap: 20px;
}

.layout {
  display: flex;
  justify-content: space-between;
  align-items: start;
}

main {
  flex: 1 1 0;
  width: 60%;
}
 
#anchor-link h2 {
  font-size: 2.0rem;
  color: var(--primary-color);
  margin-bottom: 20px;
}

.os-selector{
  display: grid;
  grid-template-columns: repeat(2,1fr);
  border: 1px solid var(--primary-color);
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
}

/* 各セル（ボタン） */
.os-item{
  appearance: none; -webkit-appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: center;
  color: var(--text);
  padding: 16px 16px 32px;      /* 下に余白を多め → ▼が入る */
  position: relative;
}

/* 文字サイズは状況に合わせて調整 */
.os-label{
  font-size: 1.6rem;
}

.os-label-supplement {
  font-size: 1.2rem;
}

a.os-item {
  display: block;
  text-decoration: none;
  transition: background-color .25s ease, color .25s ease;
}

a.os-item:hover {
  color: var(--primary-color);
  background-color: #F0F5F8;
}

/* ▼マーク（CSS三角形） */
.os-item .caret{
  position: absolute;
  left: 50%; bottom: 12px;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid var(--primary-color);
}

/* 仕切り線（上段の下線／右列の縦線） */
.os-item:nth-child(-n+2){        /* 1,2: 上段 */
  border-bottom: 1px solid var(--primary-color);
}
.os-item:nth-child(2),
.os-item:nth-child(4){            /* 2,4: 右列 */
  border-left: 1px solid var(--primary-color);
}

/* アクセシビリティ（キーボードフォーカス） */
.os-item:focus-visible{
  outline: 3px solid rgba(42,120,182,.45);
  outline-offset: -3px;
}

/* モバイルは1カラムにして縦の仕切りを消す */
@media (max-width: 768px){
  .os-selector{ grid-template-columns: 1fr; }
  .os-item{ border-left: 0 !important; }
  .os-item:not(:last-child){ border-bottom: 1px solid var(--primary-color); }
}

section.os-name {
  margin-top: 60px;
}

section.os-name h3 {
  color: #fff;
  background-color: var(--primary-color);
  padding: 8px 16px;
}

section.os-name h4 {
  border-left: 5px solid #333;
  padding-left: 8px;
  margin-top: 16px;
}

section.os-name h4 span {
  font-size: 1.2rem;
}

section.os-name h4.mt36 {
	margin-top: 36px;
}

section.os-name .setting-link {
  display: flex;
  justify-content: space-between;
  align-items: start;
}

section.os-name .setting-link li {
  background-color: var(--secondary-color);
  color: var(--primary-color);
}

section.os-name .setting-link li a {
  display: block;
  padding: 12px 16px;
}

.link-grid {
  margin: 16px 0 0 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.link-grid li {
  font-size: 1.5rem;
}

.link-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--secondary-color);
  border-radius: 6px;
  color: var(--primary-color);
  transition: background-color .2s ease, box-shadow .2s ease;
}

/* 右向き矢印（CSS三角形） */
.link-card::after {
  content: "";
  width: 0; height: 0;
  border-left: 8px solid currentColor;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

/* ホバー/フォーカス */
.link-card:hover,
.link-card:focus-visible {
  background: #f2f8ff;
}

/* スマホは1カラムに */
@media (max-width: 768px) {
  .link-grid{ grid-template-columns: 1fr; }
}



/*-- SP --*/
@media (max-width: 768px) {

  main {
    width: 100%;
  }

  .layout {
    display: block;
  }

  .os-item {
    padding: 16px;
  }

  .os-item .caret {
    right: 8px;
    top: 43%;
    left: unset;
    bottom: unset;
  }

}

:root{
  --header-h: 126px;
}

@media (min-width: 769px){
  .sp-nav-toggle, .sp-nav-btn, .sp-sidenav { display: none !important; }
}

@media (max-width: 768px){
  .sp-nav-toggle{
    position: absolute;
    width:0;
    height:0;
    opacity:0;
    pointer-events:none;
  }

  .sp-nav-btn{
    position: relative;
    display: grid; place-content: center;
    width: 44px; height: 44px; border-radius: 10px;
    background: var(--primary-color);
    margin: 10px 12px 12px auto;
    z-index: 1600;
    overflow: visible;
    cursor: pointer;
  }

  .sp-nav-btn .bar{
    position: absolute;
    left: 50%;
    width: 22px; height: 2px;
    background: #fff;
    border-radius: 1px;
    transition: transform .25s ease, opacity .25s ease, top .25s ease, bottom .25s ease;
  }
  /* 上・中・下の位置 */
  .sp-nav-btn .bar:nth-child(1){ top: 13px; transform: translateX(-50%); }
  .sp-nav-btn .bar:nth-child(2){ top: 50%; transform: translate(-50%, -50%); }
  .sp-nav-btn .bar:nth-child(3){ bottom: 13px; transform: translateX(-50%); }

  /* 開いたとき → ✖️ に変形（上と下を中央へ寄せてクロス／中線は消す） */
  #sp-nav-toggle:checked + .sp-nav-btn .bar:nth-child(1){
    top: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
  }
  #sp-nav-toggle:checked + .sp-nav-btn .bar:nth-child(2){
    opacity: 0;
  }
  #sp-nav-toggle:checked + .sp-nav-btn .bar:nth-child(3){
    bottom: auto;
    top: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
  }

  /* 左からフル幅で覆うメニュー（ヘッダーは見せたまま） */
  .sp-sidenav{
    position: absolute;
    left:0;
    right:0;
    top: var(--header-h);
    height: 100dvh;
    background: rgba(20,28,36,.98);
    color:#e9f1fb;
    transform: translateX(-100%);
    transition: transform .25s ease;
    z-index: 1500;
    display: grid; grid-template-rows: auto 1fr; overflow: hidden;
    will-change: transform;
  }

  #sp-nav-toggle:checked ~ .sp-sidenav{ transform: translateX(0); }

  /* メニュー内ヘッダー */
  .sp-sidenav .menu-head{
    padding: 32px 0px;
    background: rgba(255,255,255,.08);
  }

  /* メニュー項目 */
  .sp-sidenav .menu-list{ margin:0; padding:0; list-style:none; overflow:auto; }
  .sp-sidenav .menu-list li{ border-top: 1px solid rgba(255,255,255,.18); }
  .sp-sidenav .menu-list a{
    display:flex; align-items:center; justify-content:space-between;
    padding: 16px; text-decoration:none; color:#dfeaf7; font-weight:700;
  }
  .sp-sidenav .menu-list a:hover{ background: rgba(255,255,255,.08); }
  
  .sp-sidenav .menu-list a::after{
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    border-right: 3px solid #fff;
    border-bottom: 3px solid #fff;
    transform: rotate(-45deg);
    margin-left: 10px;
    flex: 0 0 auto;
  }

  /* 開いている間は本体スクロールを止める（対応ブラウザ） */
  html:has(#sp-nav-toggle:checked) {
    overflow: hidden;
  }
}

/* 動きを抑える端末向け */
@media (prefers-reduced-motion: reduce) {
  .sp-nav-btn .bar,
  .sp-sidenav {
    transition: none !important;
  }
}


/* キャプチャ画像並列 */
  .image-parallel {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  @media (max-width: 768px){
      .image-parallel {
      display: block;
      justify-content: unset;
      align-items: unset;
    }
  }