@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300..700&family=Noto+Sans+JP:wght@100..900&display=swap');


body {
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 400;
  font-size: calc(24 / 750 * 100vw); line-height: 0;
  letter-spacing: calc(75em / 1000);
  color: hsl(0, 0%, 0%);
  background: hsl(300, 3%, 94%);
}


/* ===== ヘッダー ===== */
header {
  width: 100%;
  box-sizing: border-box;
  padding: calc(19 / 750 * 100vw) 0 calc(19 / 750 * 100vw) calc(31 / 750 * 100vw);
  background: hsl(0, 0%, 100%);
}

header > h1 {
  width: calc(140 / 750 * 100vw); height: auto;
  margin: 0;
}
header > h1 > a {
  display: block;
}
header > h1 > a > img {
  width: 100%; height: auto;
}


/* ===== 本文 ===== */
main {
  width: 100%;
  box-sizing: border-box;
  padding: calc(61 / 750 * 100vw) 0 calc(100 / 750 * 100vw);
  background: hsl(0, 0%, 100%);
}


/* ===== 見出し ===== */
main > hgroup:has(> h2) {/* -- ARSOA SALON SEARCH / DETAIL */
  margin: 0 auto;
}
main > hgroup:has(> h2) > h2 {
  width: fit-content;
  margin: 0 auto;
  font-family: 'Cormorant Garamond', serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 400;
  font-size: calc(50 / 750 * 100vw); line-height: 1;
  letter-spacing: calc(150em / 1000);
  color: hsl(0, 0%, 27%);
}
main > hgroup:has(> h2) > p {
  width: fit-content;
  margin: calc(15 / 750 * 100vw) auto 0;
  font-weight: 500;
  line-height: 1;
  letter-spacing: calc(150em / 1000);
  color: hsl(0, 0%, 27%);
}

main > hgroup:has(> h3) {/* -- あなたに～ご案内いたします / 検索結果 */
  margin: calc(68 / 750 * 100vw) auto 0;
}
main > hgroup:has(> h3) > h3 {
  width: fit-content;
  margin: 0 auto;
  font-weight: 500;
  font-size: calc(28 / 750 * 100vw); line-height: 1;
  letter-spacing: calc(25em / 1000);
  color: hsl(240, 100%, 1%);
}
main > hgroup:has(> h3) > p {
  width: fit-content;
  margin: calc(29 / 750 * 100vw) auto 0;
  font-size: calc(20 / 750 * 100vw); line-height: 1;
  letter-spacing: calc(50em / 1000);
  color: hsl(240, 100%, 1%);
}


/* ===== 検索 ===== */
main > form {
  display: grid;
  grid-template: auto auto / auto;
  width: 100%;
  margin: 0 auto;
}
main > form > dl {
  grid-row: 2 / 3; grid-column: 1 / 2;
  width: 100%;
  margin: calc(150 / 750 * 100vw) auto 0;
}
main > form > dl.top {
  grid-row: 1 / 2; grid-column: 1 / 2;
  margin: 0 auto;
}
main > form:not(:has(> section)) > dl {
  grid-row: 1 / 2; grid-column: 1 / 3;
  justify-self: center;
  width: fit-content;
}
main > form > dl > dt {
  width: fit-content;
  margin: calc(87 / 750 * 100vw) auto 0;
  font-weight: 700;
  font-size: calc(24 / 750 * 100vw); line-height: calc(38 / 750 * 100vw);
  letter-spacing: calc(100em / 1000);
  text-align: center;
  color: hsl(240, 100%, 1%);
}
main > form > dl > dt:first-of-type {/* -- キーワードから */
  margin: calc(66 / 750 * 100vw) auto 0;
}
main > form > dl > dt:nth-of-type(4) {/* -- 市区町村から */
  margin: calc(37 / 750 * 100vw) auto 0;
}
main > form > dl > dt > small {
  display: block;
  font-weight: 400;
  font-size: calc(18 / 750 * 100vw);
}
main > form > dl > dd {
  display: grid;
  grid-template: auto auto / auto;
  width: fit-content;
  margin: calc(23 / 750 * 100vw) auto 0;
}
main > form > dl > dd > input {
  appearance: none;
  box-sizing: border-box;
  font-family: 'Noto Sans JP', sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  background: none transparent;
  border: none;
  outline: none;
}
main > form > dl > dd > input[type="text"] {
  grid-row: 1 / 2; grid-column: 1 / 2;
  width: calc(490 / 750 * 100vw);
  padding: calc(16 / 750 * 100vw) calc(1 / 750 * 100vw);
  font-weight: 700;
  font-size: calc(24 / 750 * 100vw); line-height: 1;
  letter-spacing: calc(50em / 1000);
  color: hsl(0, 0%, 0%);
  border-bottom: calc(2 / 750 * 100vw) solid hsl(0, 0%, 71%);
}
main > form > dl > dd > input[type="text"]::placeholder {
  color: hsl(0, 0%, 71%);
}
main > form > dl > dd > input[type="button"] {
  grid-row: 2 / 3; grid-column: 1 / 2;
  width: calc(100 / 750 * 100vw);
  margin: calc(30 / 750 * 100vw) auto 0; padding: calc(12 / 750 * 100vw) 0;
  font-weight: 700;
  font-size: calc(24 / 750 * 100vw); line-height: 1;
  letter-spacing: calc(50em / 1000);
  color: hsl(0, 0%, 0%);
  border-bottom: calc(2 / 750 * 100vw) solid hsl(0, 0%, 0%);
}
main > form > dl > dd > select {
  appearance: none;
  grid-row: 1 / 2; grid-column: 1 / 2;
  width: calc(490 / 750 * 100vw);
  box-sizing: border-box;
  padding: calc(16 / 750 * 100vw) calc(51 / 750 * 100vw) calc(16 / 750 * 100vw) calc(1 / 750 * 100vw);
  font-family: 'Noto Sans JP', sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 500;
  font-size: calc(24 / 750 * 100vw); line-height: 1;
  letter-spacing: calc(50em / 1000);
  color: hsl(0, 0%, 0%);
  background: url(../img/renewal_select_01.svg) right calc(20 / 750 * 100vw) center / calc(20 / 750 * 100vw) no-repeat transparent;
  border: none;
  border-bottom: calc(2 / 750 * 100vw) solid hsl(0, 0%, 71%);
  outline: none;
}
main > form > dl > dd > select:has(> option[value=""]:checked) {/* -- value が空の option が選択された時 */
  color: hsl(0, 0%, 71%);
}
main > form > dl > dd > select:has(> option:first-of-type:checked) {/* -- 直下の最初の option が選択された時 */
  color: hsl(0, 0%, 71%);
}
main > form > dl > dd > select option {/* -- [#1] ブラウザの picker をオーバーライドするので。適用されないパラメータ有 */
  font-family: 'Noto Sans JP', sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 500;
  font-size: calc(24 / 750 * 100vw); line-height: 1;
  color: hsl(0, 0%, 0%);
  background: hsl(0, 0%, 97%);
}
main > form > dl > dd > select option[value=""] {/* -- [#1] value が空の項目 */
  color: hsl(0, 0%, 71%);
  background: hsl(0, 0%, 100%);
}
main > form > dl > dd > select > option:first-of-type {/* -- [#1] picker 直下の最初の項目 */
  color: hsl(0, 0%, 71%);
  background: hsl(0, 0%, 100%);
}
main > form > dl > dd > select option:disabled {/* -- [#1] */
  color: hsl(0, 0%, 71%);
}
main > form > dl > dd > select optgroup {/* -- [#1] */
  font-family: 'Noto Sans JP', sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 500;
  font-size: calc(24 / 750 * 100vw); line-height: 1;
  color: hsl(0, 1%, 49%);
  background: hsl(0, 0%, 97%);
}


/* ===== トップページ ===== */
main > #top {
  margin: calc(95 / 750 * 100vw) 0 0;
}

main > #top > hgroup:has(> h2) {/* -- OUR SERVICE */
  width: fit-content;
  margin: 0 auto;
}
main > #top > hgroup:has(> h2) > h2 {
  width: fit-content;
  margin: 0 auto;
  font-family: 'Cormorant Garamond', serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 400;
  font-size: calc(50 / 750 * 100vw); line-height: 1;
  letter-spacing: calc(150em / 1000);
  color: hsl(0, 0%, 27%);
}
main > #top > hgroup:has(> h2) > p {
  width: fit-content;
  margin: calc(15 / 750 * 100vw) auto 0;
  font-weight: 500;
  line-height: 1;
  letter-spacing: calc(150em / 1000);
  color: hsl(0, 0%, 27%);
}

main > #top > ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(89 / 750 * 100vw);
  margin: calc(78 / 750 * 100vw) auto 0; padding: 0;
}
main > #top > ul > li > figure {
  width: fit-content;
  margin: 0 auto;
}
main > #top > ul > li > figure > figcaption {
  width: fit-content;
  margin: 0 auto;
  font-weight: 500;
  font-size: calc(26 / 750 * 100vw); line-height: 1;
  letter-spacing: calc(100em / 1000);
  color: hsl(357, 100%, 39%);
}
main > #top > ul > li > figure > img {
  display: block;
  width: calc(262 / 750 * 100vw); height: auto;
  margin: calc(73 / 750 * 100vw) auto 0;
}
main > #top > ul > li > p {
  width: fit-content;
  margin: calc(54 / 750 * 100vw) auto 0;
  font-weight: 500;
  font-size: calc(24 / 750 * 100vw); line-height: calc(46 / 750 * 100vw);
  letter-spacing: calc(100em / 1000);
  text-align: center;
  color: hsl(0, 0%, 0%);
}

main > #top > p {
  width: fit-content;
  margin: calc(139 / 750 * 100vw) auto 0;
  font-weight: 500;
  font-size: calc(24 / 750 * 100vw); line-height: calc(46 / 750 * 100vw);
  letter-spacing: calc(100em / 1000);
  text-align: center;
  color: hsl(0, 0%, 0%);
}


/* ===== 駅名の検索結果 ===== */
main > form > #station {
  grid-row: 1 / 2; grid-column: 1 / 2;
  justify-self: start;
  width: calc(700 / 750 * 100vw);
  margin: 0 auto;
}

main > form > #station > div {
  display: grid;
  grid-template: min-content min-content min-content / auto;
  width: 100%;
  margin: 0;
}

main > form > #station > div > p {
  width: fit-content;
  margin:calc(32 / 750 * 100vw) 0 0;
  font-weight: 500;
  font-size: calc(24 / 750 * 100vw); line-height: 1;
  color: hsl(0, 0%, 0%);
}

main > form > #station > div > ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: calc(77 / 750 * 100vw) 0;
  width: calc(626 / 750 * 100vw);
  margin: calc(32 / 750 * 100vw) auto 0; padding: 0;
}
main > form > #station > div > ul > li {
  width: 100%;
}
main > form > #station > div > ul > li:first-of-type {/* -- PCのヘッダ */
  display: none;
}
main > form > #station > div > ul > li > a {
  display: grid;
  grid-template: auto auto auto / auto;
  width: 100%;
  text-decoration: none;
  color: hsl(0, 0%, 0%);
}
main > form > #station > div > ul > li p:nth-of-type(1) {/* -- 路線 */
  display: grid;
  grid-template: auto / auto 1fr;
  width: 100%;
  margin: 0;
  font-size: calc(28 / 750 * 100vw); line-height: calc(36 / 28);
}
main > form > #station > div > ul > li p:nth-of-type(1)::before {
  content: '路線';
  display: block;
  grid-rows: 1 / 2; grid-columns: 1 / 2;
  width: calc(160 / 750 * 100vw);
}
main > form > #station > div > ul > li p:nth-of-type(2) {/* -- 住所 */
  display: grid;
  grid-template: auto / auto 1fr;
  width: 100%;
  margin: calc(23 / 750 * 100vw) 0 0;
  font-size: calc(28 / 750 * 100vw); line-height: calc(36 / 28);
}
main > form > #station > div > ul > li p:nth-of-type(2)::before {
  content: '住所';
  display: block;
  grid-rows: 1 / 2; grid-columns: 1 / 2;
  width: calc(160 / 750 * 100vw);
}
main > form > #station > div > ul > li p:nth-of-type(3) {/* -- 周辺のサロンを見る */
  justify-self: end;
  width: fit-content;
  margin: calc(4 / 750 * 100vw) 0 0; padding: calc(10 / 750 * 100vw) 0;
  font-size: calc(28 / 750 * 100vw); line-height: calc(36 / 28);
  border-bottom: calc(2 / 750 * 100vw) solid hsl(0, 0%, 0%);
}

main > form > #station > div > div {
  justify-self: center;
  display: flex;
  gap: calc(72 / 750 * 100vw);
  justify-content: center;
  width: fit-content;
  margin: calc(80 / 750 * 100vw) auto 0;
  font-weight: 700;
  font-size: calc(40 / 750 * 100vw); line-height: 1;
  color: hsl(0, 0%, 27%);
}
main > form > #station > div > div > a {
  text-decoration: none;
  color: hsl(0, 0%, 27%);
}


/* ===== 検索結果 ===== */
main > form > #result {/* -- 検索結果 */
  grid-row: 1 / 2; grid-column: 1 / 2;
  justify-self: start;
  width: calc(700 / 750 * 100vw);
  margin: 0 auto;
}

main > form > #result > div {
  display: grid;
  grid-template: min-content min-content min-content / auto;
  width: 100%;
  margin: calc(63 / 750 * 100vw) 0 0;
}

main > form > #result > div > select {
  appearance: none;
  justify-self: end;
  width: calc(190 / 750 * 100vw);
  box-sizing: border-box;
  padding: calc(10 / 750 * 100vw) calc(18 / 750 * 100vw) calc(10 / 750 * 100vw) calc(1 / 750 * 100vw);
  font-family: 'Noto Sans JP', sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 500;
  font-size: calc(20 / 750 * 100vw); line-height: 1;
  letter-spacing: calc(50em / 1000);
  color: hsl(0, 0%, 0%);
  background: url(../img/renewal_select_01.svg) right calc(1 / 750 * 100vw) center / calc(17 / 750 * 100vw) no-repeat transparent;
  border: none;
  border-bottom: calc(2 / 750 * 100vw) solid hsl(0, 1%, 45%);
  outline: none;
}
main > form > #result > div > select option {/* -- [#1] ブラウザの picker をオーバーライドするので。適用されないパラメータ有 */
  font-family: 'Noto Sans JP', sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 500;
  font-size: calc(24 / 750 * 100vw); line-height: 1;
  color: hsl(0, 0%, 0%);
  background: hsl(0, 0%, 97%);
}

main > form > #result > div > p {
  width: fit-content;
  margin:calc(7 / 750 * 100vw) 0 0;
  font-weight: 500;
  font-size: calc(24 / 750 * 100vw); line-height: 1;
  color: hsl(0, 0%, 0%);
}

main > form > #result > div > ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: calc(77 / 750 * 100vw) 0;
  width: 100%;
  margin: calc(32 / 750 * 100vw) 0 0; padding: 0;
}
main > form > #result > div > ul > li {
  width: 100%;
}
main > form > #result > div > ul > li > a {
  display: grid;
  grid-template: auto auto auto auto / auto 1fr;
  gap: 0 calc(23 / 750 * 100vw);
  width: 100%;
  text-decoration: none;
  color: hsl(0, 0%, 0%);
}
main > form > #result > div > ul > li > a > div {
  grid-row: 1 / 5; grid-column: 1 / 2;
  width: calc(275 / 750 * 100vw); height: calc(186 / 750 * 100vw);
  margin: calc(6 / 750 * 100vw) 0 0;
  background: url(../img/renewal_result_01.webp) center / contain no-repeat;
}
main > form > #result > div > ul > li > a > div > img {
  width: calc(275 / 750 * 100vw); height: calc(186 / 750 * 100vw);
  object-fit: cover;
}
main > form > #result > div > ul > li > a > p:nth-of-type(1) {/* -- 店舗名 */
  grid-row: 1 / 2; grid-column: 2 / 3;
  width: fit-content;
  margin: 0;
  font-size: calc(28 / 750 * 100vw); line-height: calc(36 / 28);
  letter-spacing: calc(100em / 1000);
}
main > form > #result > div > ul > li > a > p:nth-of-type(2) {/* -- アルソアサロン？ */
  grid-row: 2 / 3; grid-column: 2 / 3;
  width: fit-content;
  margin: 0;
}
main > form > #result > div > ul > li > a > p:nth-of-type(2):has(img) {
  margin: calc(27 / 750 * 100vw) 0 0;
}
main > form > #result > div > ul > li > a > p:nth-of-type(2) > img {
  width: calc(170 / 750 * 100vw); height: auto;
}
main > form > #result > div > ul > li > a > p:nth-of-type(2) > span {
  display: none;
}
main > form > #result > div > ul > li > a > p:nth-of-type(3) {/* -- 住所 */
  grid-row: 3 / 4; grid-column: 2 / 3;
  width: fit-content;
  margin: calc(18 / 750 * 100vw) 0 0;
  font-size: calc(24 / 750 * 100vw); line-height: calc(36 / 24);
  letter-spacing: calc(50em / 1000);
}
main > form > #result > div > ul > li > a > p:nth-of-type(4) {/* -- 店舗詳細へ */
  grid-row: 4 / 5; grid-column: 2 / 3;
  justify-self: end;
  width: fit-content;
  margin: calc(18 / 750 * 100vw) 0 0; padding: calc(10 / 750 * 100vw) calc(1 / 750 * 100vw);
  font-size: calc(24 / 750 * 100vw); line-height: 1;
  letter-spacing: calc(50em / 1000);
  border-bottom: calc(2 / 750 * 100vw) solid hsl(0, 0%, 0%);
}

main > form > #result > div > div {
  justify-self: center;
  display: flex;
  gap: calc(72 / 750 * 100vw);
  justify-content: center;
  width: fit-content;
  margin: calc(80 / 750 * 100vw) auto 0;
  font-weight: 700;
  font-size: calc(40 / 750 * 100vw); line-height: 1;
  color: hsl(0, 0%, 27%);
}
main > form > #result > div > div > a {
  text-decoration: none;
  color: hsl(0, 0%, 27%);
}

/* ===== サロン詳細 ===== */
main > #detail {
  display: grid;
  grid-template: auto auto auto auto auto auto / auto;
  width: calc(700 / 750 * 100vw);
  margin: calc(68 / 750 * 100vw) auto 0;
}

main > #detail > hgroup {
  grid-row: 1 / 2; grid-column: 1 / 2;
  width: 100%;
  position: relative;
  margin: 0; padding: 0 0 calc(29 / 750 * 100vw);
  border-bottom: calc(2 / 750 * 100vw) solid hsl(0, 1%, 45%);
}
main > #detail > hgroup > h3 {
  width: fit-content;
  margin: 0 auto;
  font-weight: 700;
  font-size: calc(28 / 750 * 100vw); line-height: 1;
  color: hsl(240, 100%, 1%);
}
main > #detail > hgroup > a {
  display: none;
}

main > #detail > dl {
  grid-row: 2 / 3; grid-column: 1 / 2;
  display: grid;
  grid-template: auto / auto 1fr;
  gap: calc(16 / 750 * 100vw) 0;
  width: calc(590 / 750 * 100vw);
  box-sizing: border-box;
  margin: calc(31 / 750 * 100vw) auto 0;
}
main > #detail > dl > dt {
  grid-row: auto; grid-column: 1 / 2;
  width: calc(160 / 750 * 100vw);
  line-height: calc(36 / 24);
}
main > #detail > dl > dd {
  grid-row: auto; grid-column: 2 / 3;
  width: calc(430 / 750 * 100vw);
  margin: 0;
  line-height: calc(36 / 24);
}
main > #detail > dl > dd > a {
  text-decoration: none;
  color: #000000;
}
main > #detail > dl > dd > a + span {
  margin: 0 0 0 1em;
}

/* ----- MAP ----- */
main > #detail > div {
  grid-row: 3 / 4; grid-column: 1 / 2;
  width: calc(590 / 750 * 100vw);
  margin: calc(70 / 750 * 100vw) auto 0;
}
main > #detail > div > .dummy_map {
  width: 100%; height: auto;
}

main > #detail > nav:nth-of-type(1) {/* -- 印刷メニュー */
  display: none;
}

main > #detail > h4 {
  grid-row: 4 / 5; grid-column: 1 / 2;
  width: 100%;
  margin: calc(78 / 750 * 100vw) 0 0;
  font-weight: 400;
  line-height: 1;
  letter-spacing: calc(75em / 1000);
}

main > #detail > ul {
  grid-row: 5 / 6; grid-column: 1 / 2;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: calc(10 / 750 * 100vw);
  width: 100%;
  margin: calc(21 / 750 * 100vw) auto 0; padding: 0;
}
main > #detail > ul > li {
  width: calc(226 / 750 * 100vw);
}
main > #detail > ul > li > img {
  width: calc(226 / 750 * 100vw); height: calc(169 / 750 * 100vw);
  object-fit: cover;
}

main > #detail > nav:nth-of-type(2) {/* -- SNSメニュー */
  grid-row: 6 / 7; grid-column: 1 / 2;
  list-style: none;
  display: flex;
  justify-content: center;
  width: 100%;
  margin: calc(50 / 750 * 100vw) auto 0; padding: 0;
}
main > #detail > nav:nth-of-type(2) > li > a {
  display: block;
  width: fit-content;
  padding: calc(10 / 750 * 100vw) calc(1 / 750 * 100vw);
  font-weight: 500;
  line-height: 1;
  letter-spacing: calc(50em / 1000);
  text-decoration: none;
  color: hsl(0, 0%, 0%);
  border-bottom: calc(2 / 750 * 100vw) solid hsl(0, 0%, 0%);
}


/* ===== アクセス方法 ===== */
main > #access {
  width: calc(700 / 750 * 100vw);
  margin: calc(99 / 750 * 100vw) auto 0;
}

main > #access > h3 {
  width: 100%;
  margin: 0; padding: 0 0 calc(29 / 750 * 100vw);
  font-weight: 700;
  font-size: calc(28 / 750 * 100vw); line-height: 1;
  text-align: center;
  color: hsl(240, 100%, 1%);
  border-bottom: calc(2 / 750 * 100vw) solid hsl(0, 1%, 45%);
}

main > #access > p {
  width: 100%;
  margin: calc(26 / 750 * 100vw) 0 0;
  font-size: calc(22 / 750 * 100vw); line-height: calc(48 / 24);
  letter-spacing: 0;
  text-align: center;
  color: hsl(0, 0%, 0%);
}

main > #access > #tab1 {
  list-style: none;
  display: flex;
  width: 100%;
  margin: calc(27 / 750 * 100vw) 0 0;
}
main > #access > #tab1 > li {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%; height: calc(50 / 750 * 100vw);
  font-weight: 500;
  font-size: calc(18 / 750 * 100vw); line-height: 1;
  letter-spacing: calc(50em / 1000);
  background: hsl(0, 0%, 96%);
  transition: background-color 0.3s;
  user-select: none;
}
main > #access > #tab1 > li.active {
  background-color: hsl(0, 0%, 92%);
}

main > #access > ul {
  list-style: none;
  display: grid;
  width: 100%;
  overflow: hidden;
  margin: 0; padding: 0;
}
main > #access > ul > li {
  display: none;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  padding: calc(29 / 750 * 100vw) 0 calc(32 / 750 * 100vw);
  background: hsl(0, 0%, 100%);
  border: calc(10 / 750 * 100vw) solid hsl(0, 0%, 92%);
}
main > #access > #tab1:has(> li:nth-of-type(1).active) + ul > li:nth-of-type(1) {
  display: block;
}
main > #access > #tab1:has(> li:nth-of-type(2).active) + ul > li:nth-of-type(2) {
  display: block;
}
main > #access > ul > li > div {
  width: calc(660 / 750 * 100vw);
  margin: 0 auto;
}
main > #access > ul > li > div > ol {
  list-style: none;
  counter-reset: counter;
  display: flex;
  flex-wrap: wrap;
  gap: calc(46 / 750 * 100vw) 0;
  width: calc(625 / 750 * 100vw);
  margin: 0; padding: 0;
}
main > #access > ul > li > div > ol > li {
  counter-increment: counter;
  width: 100%;
}
main > #access > ul > li > div > ol > li > a {
  display: grid;
  grid-template: auto / auto 1fr auto;
  width: 100%;
  position: relative;
  line-height: calc(36 / 24);
  letter-spacing: calc(25em / 1000);
  text-decoration: none;
  color: hsl(0, 0%, 0%);
}
main > #access > ul > li > div > ol > li > a::before {
  content: '';
  width: 100%; height: max(calc(1 / 750 * 100vw), 1px);
  position: absolute;
  inset: calc(50% - max(calc(0.5 / 750 * 100vw), 0.5px) + 0.1em) auto auto 0; z-index: 0;
  background: hsl(0, 0%, 79%);
}
main > #access > ul > li > div > ol > li > a::after {
  content: counter(counter);
  display: flex;
  justify-content: end;
  align-items: center;
  grid-row: 1 / 2; grid-column: 1 / 2;
  width: calc(62 / 750 * 100vw);
  box-sizing: border-box;
  z-index: 1;
  padding: 0 calc(22 / 750 * 100vw) 0 0;
  text-align: right;
  background: hsl(0, 0%, 100%);
}
main > #access > ul > li > div > ol > li > a > p:nth-of-type(1) {/* -- ルート名称 */
  display: flex;
  align-items: center;
  width: fit-content;
  max-width: calc(450 / 750 * 100vw);
  box-sizing: border-box;
  z-index: 1;
  margin: 0; padding: 0 calc(8 / 750 * 100vw) 0 0;
  background: hsl(0, 0%, 100%);
}
main > #access > ul > li > div > ol > li > a > p:nth-of-type(2) {/* -- 距離 */
  display: flex;
  justify-content: end;
  align-items: center;
  width: fit-content;
  max-width: calc(100 / 750 * 100vw);
  box-sizing: border-box;
  z-index: 1;
  margin: 0; padding: 0 0 0 calc(8 / 750 * 100vw);
  background: hsl(0, 0%, 100%);
}

main > #access > a {
  display: block;
  width: fit-content;
  box-sizing: border-box;
  margin: calc(79 / 750 * 100vw) 0 0; padding: 0 0 0.1em calc(22 / 750 * 100vw);
  font-size: calc(20 / 750 * 100vw); line-height: 1;
  letter-spacing: calc(150em / 1000);
  text-decoration: none;
  color: hsl(0, 0%, 0%);
  background: url(../img/renewal_anchor_01.svg) left center / calc(10 / 750 * 100vw) no-repeat;
}


/* ===== エラー ===== */
main > #error {
  width: calc(700 / 750 * 100vw);
  margin: calc(68 / 750 * 100vw) auto 0;
}

main > #error > hgroup > h2 {
  font-weight: 400;
  font-size: calc(38 / 750 * 100vw); line-height: calc(54 / 38);
  text-align: center;
}
main > #error > hgroup > h2::after {
  content: '';
  display: block;
  width: calc(100 / 750 * 100vw); height: calc(5 / 750 * 100vw);
  margin: calc(24 / 750 * 100vw) auto 0;
  background: hsl(357, 100%, 39%);
}
main > #error > hgroup > p {
  font-size: calc(24 / 750 * 100vw); line-height: calc(36 / 24);
  text-align: center;
}

main > #error > a {
  display: flex;
  justify-content: center;
  align-items:center;
  width: calc(600 / 750 * 100vw); height: calc(90 / 750 * 100vw);
  box-sizing: border-box;
  margin: calc(120 / 750 * 100vw) auto 0;
  font-size: calc(24 / 750 * 100vw); line-height: calc(36 / 24);
  text-decoration: none;
  color: hsl(357, 100%, 39%);
  outline: calc(1 / 750 * 100vw) solid hsl(357, 100%, 39%);
  border-radius: calc(90 / 2 / 750 * 100vw);
}


/* ===== フッタ ===== */
footer {
  width: 100%;
  padding: calc(26 / 750 * 100vw) 0;
}

footer > small {
  display: block;
  width: fit-content;
  margin: 0 auto;
  font-size: calc(16 / 750 * 100vw); line-height: 1;
  letter-spacing: calc(50em / 1000);
}



/* ##### SPのみ ##### */
@media screen and (max-width: 767px) {/* -- SP */

.pc {
  display: none;
}

}



/* ##### PC、印刷 ##### */
@media screen and (min-width: 768px), print {/* -- PC */

body {
  font-size: min(calc(16 / 1460 * 100vw), 16px);
}

.sp {
  display: none;
}


/* ===== ヘッダー ===== */
header {
  padding: min(calc(24 / 1460 * 100vw), 36px) 0 min(calc(24 / 1460 * 100vw), 36px) min(calc(100 / 1460 * 100vw), 100px);
}

header > h1 {
  width: min(calc(176 / 1460 * 100vw), 163px);
}


/* ===== 本文 ===== */
main {
  padding: min(calc(64 / 1460 * 100vw), 62px) min(calc(30 / 1460 * 100vw), 30px) min(calc(120 / 1460 * 100vw), 120px);
}


/* ===== 見出し ===== */
main > hgroup:has(> h2) > h2 {
  margin: 0 auto;
  font-size: min(calc(40 / 1460 * 100vw), 40px);
}
main > hgroup:has(> h2) > p {
  margin: min(calc(19 / 1460 * 100vw), 19px) auto 0;
  letter-spacing: calc(100em / 1000);
}

main > hgroup:has(> h3) {/* -- あなたに～ご案内いたします / 検索結果 */
  margin: min(calc(68 / 1460 * 100vw), 68px) auto 0;
}
main > hgroup:has(> h3) > h3 {
  font-size: min(calc(24 / 1460 * 100vw), 24px);
  letter-spacing: calc(50em / 1000);
}
main > hgroup:has(> h3) > p {
  margin: min(calc(29 / 1460 * 100vw), 29px) auto 0;
  font-size: min(calc(16 / 1280 * 100vw), 16px);
}


/* ===== 検索 ===== */
main > form {
  grid-template: auto / auto auto;
  gap: 0 min(calc(100 / 1460 * 100vw), 100px);
  width: min(calc(1400 / 1460 * 100vw), 1400px);
}
main > form > dl {
  grid-row: 1 / 2; grid-column: 1 / 2;
  justify-self: end;
  margin: 0;
}
main > form > dl > dt {
  margin: min(calc(82 / 1460 * 100vw), 82px) 0 0;
  font-size: min(calc(18 / 1460 * 100vw), 18px); line-height: min(calc(18 / 1460 * 100vw), 18px);
  text-align: left;
}
main > form > dl > dt:first-of-type {/* -- キーワードから */
  margin: min(calc(82 / 1460 * 100vw), 82px) 0 0;
}
main > form > dl > dt:nth-of-type(3) {/* -- 都道府県から */
  margin: min(calc(100 / 1460 * 100vw), 100px) 0 0;
}
main > form > dl > dt:nth-of-type(4) {/* -- 市区町村から */
  margin: min(calc(40 / 1460 * 100vw), 40px) 0 0;
}
main > form > dl > dt > small {
  display: inline;
  margin: 0 0 0 min(calc(20 / 1460 * 100vw), 20px);
  font-size: min(calc(12 / 1460 * 100vw), 12px);
  letter-spacing: calc(50em / 1000);
}
main > form > dl > dd {
  grid-template: auto auto / auto auto;
  margin: min(calc(32 / 1460 * 100vw), 32px) 0 0;
}
main > form > dl > dd:has(> select) {
  margin: min(calc(21 / 1460 * 100vw), 21px) 0 0;
}
main > form > dl > dd > input[type="text"] {
  grid-row: 1 / 2; grid-column: 1 / 2;
  width: min(calc(300 / 1460 * 100vw), 300px);
  padding: min(calc(10 / 1460 * 100vw), 10px) min(calc(1 / 1460 * 100vw), 1px);
  font-size: min(calc(16 / 1460 * 100vw), 16px);
  letter-spacing: 0;
  border-bottom: min(calc(1 / 1460 * 100vw), 1px) solid hsl(0, 0%, 71%);
}
main > form > dl > dd > input[type="button"] {
  grid-row: 1 / 2; grid-column: 2 / 3;
  width: min(calc(70 / 1460 * 100vw), 70px);
  margin: 0; padding: min(calc(9 / 1460 * 100vw), 9px) 0;
  font-size: min(calc(18 / 1460 * 100vw), 18px);
  border-bottom: min(calc(1 / 1460 * 100vw), 1px) solid hsl(0, 0%, 0%);
  cursor: pointer;
  transition: color 0.3s, border-color 0.3s;
}
main > form > dl > dd > input[type="button"]:hover {
  color: #727171;
  border-color: #727171;
}
main > form > dl > dd:nth-of-type(4) > input[type="button"] {/* -- 市区町村から */
  grid-row: 2 / 3; grid-column: 1 / 3;
  justify-self: end;
  margin: min(calc(10 / 1460 * 100vw), 10px) 0 0;
}
main > form > dl > dd > select {
  grid-row: 1 / 2; grid-column: 1 / 2;
  width: min(calc(370 / 1460 * 100vw), 370px);
  padding: min(calc(20 / 1460 * 100vw), 20px) min(calc(47 / 1460 * 100vw), 47px) min(calc(20 / 1460 * 100vw), 20px) min(calc(20 / 1460 * 100vw), 20px);
  font-size: min(calc(16 / 1460 * 100vw), 16px);
  background: url(../img/renewal_select_01.svg) right min(calc(20 / 1460 * 100vw), 20px) center / min(calc(16 / 1460 * 100vw), 16px) no-repeat transparent;
  border-bottom: min(calc(1 / 1460 * 100vw), 1px) solid hsl(0, 0%, 71%);
  cursor: pointer;
  transition: border-color 0.3s;
}
main > form > dl > dd > select:hover {
  border-color: #727171;
}
main > form > dl > dd > select option {/* -- [#1] ブラウザの picker をオーバーライドするので。適用されないパラメータ有 */
  font-size: min(calc(16 / 1460 * 100vw), 16px);
}
main > form > dl > dd > select optgroup {/* -- [#1] */
  font-size: min(calc(16 / 1460 * 100vw), 16px);
}


main > form > dl.top {
  grid-column: 1 / 3;
  display: grid;
  grid-template: auto auto auto auto / auto auto;
  gap: 0 min(calc(81 / 1460 * 100vw), 81px);
  margin: min(calc(120 / 1460 * 100vw), 120px) auto 0;
}
main > form > dl.top > dt:nth-of-type(1) {/* -- キーワードから */
  grid-row: 1 / 2; grid-column: 1 / 2;
  margin: 0;
}
main > form > dl.top > dd:nth-of-type(1) {
  grid-row: 2 / 3; grid-column: 1 / 2;
  align-self: start;
}
main > form > dl.top > dt:nth-of-type(2) {/* -- 駅名から */
  grid-row: 3 / 4; grid-column: 1 / 2;
  margin: min(calc(79 / 1460 * 100vw), 79px) 0 0;
}
main > form > dl.top > dd:nth-of-type(2) {
  grid-row: 4 / 5; grid-column: 1 / 2;
  align-self: start;
}
main > form > dl.top > dt:nth-of-type(3) {/* -- 都道府県から */
  grid-row: 1 / 2; grid-column: 2 / 3;
  margin: 0;
}
main > form > dl.top > dd:nth-of-type(3) {
  grid-row: 2 / 3; grid-column: 2 / 3;
}
main > form > dl.top > dt:nth-of-type(4) {/* -- 市区町村から */
  grid-row: 3 / 4; grid-column: 2 / 3;
  margin: min(calc(79 / 1460 * 100vw), 79px) 0 0;
}
main > form > dl.top > dd:nth-of-type(4) {
  grid-row: 4 / 5; grid-column: 2 / 3;
}


/* ===== トップページ ===== */
main > #top {
  margin: min(calc(92 / 1460 * 100vw), 92px) auto 0;
}

main > #top > hgroup:has(> h2) > h2 {
  font-size: min(calc(40 / 1460 * 100vw), 40px);
}
main > #top > hgroup:has(> h2) > p {
  margin: min(calc(19 / 1460 * 100vw), 19px) auto 0;
  letter-spacing: calc(100em / 1000);
}

main > form > #top > p {
  width: fit-content;
  font-weight: 500;
  font-size: min(calc(24 / 1460 * 100vw), 16px); line-height: 1;
  color: hsl(0, 0%, 71%);
}

main > #top > ul {
  gap: 0;
  width: min(calc(1200 / 1460 * 100vw), 1200px);
  margin: min(calc(89 / 1460 * 100vw), 89px) auto 0;
}
main > #top > ul > li {
  width: min(calc(400 / 1460 * 100vw), 400px);
}
main > #top > ul > li > figure > figcaption {
  font-size: min(calc(20 / 1460 * 100vw), 20px);
}
main > #top > ul > li > figure > img {
  width: min(calc(174 / 1460 * 100vw), 174px);
  margin: min(calc(43 / 1460 * 100vw), 43px) auto 0;
}
main > #top > ul > li > p {
  margin: min(calc(37 / 1460 * 100vw), 37px) auto 0;
  font-size: min(calc(16 / 1460 * 100vw), 16px); line-height: min(calc(34 / 1460 * 100vw), 34px);
}

main > #top > p {
  margin: min(calc(92 / 1460 * 100vw), 92px) auto 0;
  font-size: min(calc(16 / 1460 * 100vw), 16px); line-height: 1;
}


/* ===== 駅名の検索結果 ===== */
main > form > #station {
  grid-row: 1 / 2; grid-column: 2 / 3;
  width: min(calc(930 / 1460 * 100vw), 930px);
  margin: min(calc(72 / 1460 * 100vw), 72px) auto 0;
}

main > form > #station > div {
  width: 100%; height: min(calc(770 / 1460 * 100vw), 770px);
  overflow: auto visible;
}

main > form > #station > div > p {
  margin:0;
  font-size: min(calc(16 / 1460 * 100vw), 16px);
}

main > form > #station > div > ul {
  gap: min(calc(30 / 1460 * 100vw), 30px) 0;
  width: min(calc(880 / 1460 * 100vw), 880px);
  margin: min(calc(27 / 1460 * 100vw), 27px) 0;
}
main > form > #station > div > ul > li:first-of-type {/* -- PCのヘッダ */
  display: grid;
  grid-template: auto / auto 1fr auto;
  width: 100%;
}
main > form > #station > div > ul > li > a {
  grid-template: auto / auto 1fr auto;
  transition: color 0.3s;
}
main > form > #station > div > ul > li > a:hover {
  color: #727171;
}
main > form > #station > div > ul > li p:nth-of-type(1) {/* -- 路線 */
  display: block;
  width: min(calc(310 / 1460 * 100vw), 310px);
  font-size: min(calc(18 / 1460 * 100vw), 18px); line-height: calc(27 / 18);
}
main > form > #station > div > ul > li p:nth-of-type(1)::before {
  display: none;
}
main > form > #station > div > ul > li p:nth-of-type(2) {/* -- 住所 */
  display: block;
  margin: 0;
  font-size: min(calc(18 / 1460 * 100vw), 18px); line-height: calc(27 / 18);
}
main > form > #station > div > ul > li p:nth-of-type(2)::before {
  display: none;
}
main > form > #station > div > ul > li p:nth-of-type(3) {/* -- 周辺のサロンを見る */
  margin: 0; padding: min(calc(7 / 1460 * 100vw), 7px) min(calc(4 / 1460 * 100vw), 4px);
  font-size: min(calc(14 / 1460 * 100vw), 14px); line-height: 1;
  border-bottom: 1px solid hsl(0, 0%, 0%);
  transition: border-bottom 0.3s;
}
main > form > #station > div > ul > li >a:hover > p:nth-of-type(3) {
  border-bottom: 1px solid #727171;
}

main > form > #station > div > div {
  gap: min(calc(30 / 1460 * 100vw), 30px);
  margin: min(calc(32 / 1460 * 100vw), 32px) min(calc(50 / 1460 * 100vw), 50px) 0 0;
  font-size: min(calc(20 / 1460 * 100vw), 20px); line-height: 1;
}


/* ===== 検索結果 ===== */
main > form > #result {/* -- 検索結果 */
  grid-row: 1 / 2; grid-column: 2 / 3;
  width: min(calc(930 / 1460 * 100vw), 930px);
  margin: min(calc(10 / 1460 * 100vw), 10px) auto 0;
}

main > form > #result > div {
  width: 100%; height: min(calc(770 / 1460 * 100vw), 770px);
  overflow: auto visible;
  margin: min(calc(29 / 1460 * 100vw), 29px) 0 0;
}

main > form > #result > div > select {
  width: min(calc(153 / 1460 * 100vw), 153px);
  margin: 0 min(calc(53 / 1460 * 100vw), 53px) 0 0; padding: min(calc(7 / 1460 * 100vw), 7px) min(calc(18 / 1460 * 100vw), 18px) min(calc(7 / 1460 * 100vw), 7px) min(calc(2 / 1460 * 100vw), 2px);
  font-weight: 400;
  font-size: min(calc(16 / 1460 * 100vw), 16px);
  background: url(../img/renewal_select_01.svg) right min(calc(4 / 1460 * 100vw), 4px) center / min(calc(12 / 1460 * 100vw), 12px) no-repeat transparent;
  border-bottom: min(calc(1 / 1460 * 100vw), 1px) solid hsl(0, 1%, 45%);
  cursor: pointer;
  transition: border-color 0.3s;
}
main > form > #result > div > select:hover {
  border-color: #727171;
}
main > form > #result > div > select option {/* -- [#1] ブラウザの picker をオーバーライドするので。適用されないパラメータ有 */
  font-weight: 400;
  font-size: min(calc(16 / 1460 * 100vw), 16px);
}

main > form > #result > div > p {
  margin:0;
  font-size: min(calc(16 / 1460 * 100vw), 16px);
}

main > form > #result > div > ul {
  gap: min(calc(29 / 1460 * 100vw), 29px) 0;
  width: min(calc(877 / 1460 * 100vw), 877px);
  margin: min(calc(27 / 1460 * 100vw), 27px) 0 0;
}
main > form > #result > div > ul > li > a {
  grid-template: auto auto auto / auto 1fr auto;
  gap: 0 min(calc(40 / 1460 * 100vw), 40px);
}
main > form > #result > div > ul > li > a > div {
  grid-row: 1 / 4; grid-column: 1 / 2;
  width: min(calc(240 / 1460 * 100vw), 240px); height: min(calc(160 / 1460 * 100vw), 160px);
  margin: min(calc(6 / 1460 * 100vw), 6px) 0 0;
}
main > form > #result > div > ul > li > a > div > img {
  width: min(calc(240 / 1460 * 100vw), 240px); height: min(calc(160 / 1460 * 100vw), 160px);
}
main > form > #result > div > ul > li > a > p:nth-of-type(1) {/* -- 店舗名 */
  grid-row: 1 / 2; grid-column: 2 / 3;
  font-size: min(calc(18 / 1460 * 100vw), 18px); line-height: calc(27 / 18);
  transition: color 0.3s;
}
main > form > #result > div > ul > li > a:hover > p:nth-of-type(1) {
  color: #727171;
}
main > form > #result > div > ul > li > a > p:nth-of-type(2) {/* -- アルソアサロン？ */
  grid-row: 1 / 2; grid-column: 3 / 4;
}
main > form > #result > div > ul > li > a > p:nth-of-type(2):has(img) {
  margin: 0;
}
main > form > #result > div > ul > li > a > p:nth-of-type(2) > img {
  width: min(calc(110 / 1460 * 100vw), 110px);
}
main > form > #result > div > ul > li > a > p:nth-of-type(3) {/* -- 住所 */
  grid-row: 2 / 3; grid-column: 2 / 4;
  margin: min(calc(18 / 1460 * 100vw), 18px) 0 0;
  font-size: min(calc(16 / 1460 * 100vw), 16px); line-height: calc(30 / 16);
  transition: color 0.3s;
}
main > form > #result > div > ul > li > a:hover > p:nth-of-type(3) {
  color: #727171;
}
main > form > #result > div > ul > li > a > p:nth-of-type(4) {/* -- 店舗詳細へ */
  grid-row: 3 / 4; grid-column: 2 / 4;
  padding: min(calc(7 / 1460 * 100vw), 7px) min(calc(6 / 1460 * 100vw), 6px);
  font-size: min(calc(14 / 1460 * 100vw), 14px);
  border-bottom: min(calc(1 / 1460 * 100vw), 1px) solid hsl(0, 0%, 0%);
  transition: color 0.3s, border-color 0.3s;
}
main > form > #result > div > ul > li > a:hover > p:nth-of-type(4) {
  color: #727171;
  border-color: #727171;
}

main > form > #result > div > div {
  gap: min(calc(30 / 1460 * 100vw), 30px);
  margin: min(calc(32 / 1460 * 100vw), 32px) min(calc(50 / 1460 * 100vw), 50px) 0 0;
  font-size: min(calc(20 / 1460 * 100vw), 20px); line-height: 1;
}


/* ===== サロン詳細 ===== */
main > #detail {
  grid-template: auto auto 1fr auto auto auto / 1fr auto;
  width: min(calc(1400 / 1460 * 100vw), 1400px);
  margin: min(calc(58 / 1460 * 100vw), 58px) auto 0;
}

main > #detail > hgroup {
  grid-row: 1 / 2; grid-column: 1 / 3;
  padding: 0 0 min(calc(30 / 1460 * 100vw), 30px);
  border-bottom: min(calc(1 / 1460 * 100vw), 1px) solid hsl(0, 1%, 45%);
}
main > #detail > hgroup > h3 {
  font-size: min(calc(24 / 1460 * 100vw), 24px);
}
main > #detail > hgroup > a {
  display: block;
  width: fit-content;
  box-sizing: border-box;
  position: absolute;
  inset: auto auto min(calc(25 / 1460 * 100vw), 25px) 0;
  padding: 0 0 0.1em min(calc(14 / 1460 * 100vw), 14px);
  font-size: min(calc(14 / 1460 * 100vw), 14px); line-height: 1;
  letter-spacing: calc(150em / 1000);
  text-decoration: none;
  color: hsl(0, 0%, 0%);
  background: url(../img/renewal_anchor_01.svg) left center / min(calc(8 / 1460 * 100vw), 8px) no-repeat;
  transition: color 0.3s;
}
main > #detail > hgroup > a:hover {
  color:  #727171;
}

main > #detail > dl {
  grid-row: 2 / 4; grid-column: 1 / 2;
  display: grid;
  grid-template: min-content / min-content auto;
  gap: min(calc(27 / 1460 * 100vw), 27px) 0;
  width: min(calc(880 / 1460 * 100vw), 880px);
  margin: min(calc(45 / 1460 * 100vw), 45px) 0 0; padding: 0 0 0 min(calc(100 / 1460 * 100vw), 100px);
}
main > #detail > dl > dt {
  width: min(calc(100 / 1460 * 100vw), 100px);
  line-height: calc(26 / 16);
}
main > #detail > dl > dd {
  width: min(calc(680 / 1460 * 100vw), 680px);
  line-height: calc(26 / 16);
}
main > #detail > dl > dd > a:hover {
  text-decoration: underline;
}

/* ----- MAP ----- */
main > #detail > div {
  grid-row: 2 / 3; grid-column: 2 / 3;
  justify-self: start;
  width: min(calc(420 / 1460 * 100vw), 420px);
  margin: min(calc(50 / 1460 * 100vw), 50px) min(calc(100 / 1460 * 100vw), 100px) 0 0;
}
main > #detail > div > .dummy_map {
  width: 100%; height: auto;
}

main > #detail > nav:nth-of-type(1) {/* -- 印刷メニュー */
  grid-row: 3 / 4; grid-column: 2 / 3;
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 0 min(calc(30 / 1460 * 100vw), 30px);
  width: min(calc(420 / 1460 * 100vw), 420px);
  margin: min(calc(13 / 1460 * 100vw), 13px) min(calc(100 / 1460 * 100vw), 100px) 0 0; padding: 0;
}
main > #detail > nav:nth-of-type(1) > li > a {
  display: block;
  width: min(calc(190 / 1460 * 100vw), 190px);
  box-sizing: border-box;
  padding: min(calc(17 / 1460 * 100vw), 17px) min(calc(1 / 1460 * 100vw), 1px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: calc(50em / 1000);
  text-align: center;
  text-decoration: none;
  color: hsl(0, 0%, 0%);
  border-bottom: min(calc(1 / 1460 * 100vw), 1px) solid hsl(0, 0%, 0%);
  transition: color 0.3s, border-bolor 0.3s;
}
main > #detail > nav:nth-of-type(1) > li > a:hover {
  color:  #727171;
  border-color:  #727171;
}

main > #detail > h4 {
  grid-row: 4 / 5; grid-column: 1 / 3;
  box-sizing: border-box;
  margin: min(calc(38 / 1460 * 100vw), 38px) 0 0; padding: 0 min(calc(100 / 1460 * 100vw), 100px);
  font-weight: 500;
}

main > #detail > ul {
  grid-row: 5 / 6; grid-column: 1 / 3;
  gap: min(calc(10 / 1460 * 100vw), 10px);
  box-sizing: border-box;
  margin: min(calc(20 / 1460 * 100vw), 20px) auto 0; padding: 0 min(calc(100 / 1460 * 100vw), 100px);
}
main > #detail > ul > li {
  width: min(calc(232 / 1460 * 100vw), 232px);
}
main > #detail > ul > li > img {
  width: min(calc(232 / 1460 * 100vw), 232px); height: min(calc(172 / 1460 * 100vw), 172px);
}

main > #detail > nav:nth-of-type(2) {/* -- SNSメニュー */
  grid-row: 6 / 7; grid-column: 1 / 3;
  margin: min(calc(52 / 1460 * 100vw), 52px) auto 0;
}
main > #detail > nav:nth-of-type(2) > li > a {
  padding: min(calc(17 / 1460 * 100vw), 17px) min(calc(1 / 1460 * 100vw), 1px);
  border-bottom: min(calc(1 / 1460 * 100vw), 1px) solid hsl(0, 0%, 0%);
  transition: color 0.3s, border-bolor 0.3s;
}
main > #detail > nav:nth-of-type(2) > li > a:hover {
  color: #727171;
  border-color: #727171;
}


/* ===== アクセス方法 ===== */
main > #access {
  width: min(calc(1400 / 1460 * 100vw), 1400px);
  margin: min(calc(69 / 1460 * 100vw), 69px) auto 0;
}

main > #access > h3 {
  margin: 0; padding: 0 0 min(calc(30 / 1460 * 100vw), 30px);
  font-size: min(calc(24 / 1460 * 100vw), 24px);
  border-bottom: min(calc(1 / 1460 * 100vw), 1px) solid hsl(0, 1%, 45%);
}

main > #access > p {
  margin: min(calc(33 / 1460 * 100vw), 33px) 0 0;
  font-size: min(calc(16 / 1460 * 100vw), 16px); line-height: calc(28 / 16);
}

main > #access > #tab1 {
  width: min(calc(860 / 1460 * 100vw), 860px);
  margin: min(calc(32 / 1460 * 100vw), 32px) auto 0;
}
main > #access > #tab1 > li {
  width: 50%; height: min(calc(49 / 1460 * 100vw), 49px);
  font-size: min(calc(18 / 1460 * 100vw), 18px);
  cursor: pointer;
  transition: color 0.3s, background-color 0.3s;
}
main > #access > #tab1 > li:hover {
  color:  #727171;
}

main > #access > ul {
  width: min(calc(860 / 1460 * 100vw), 860px);
  margin: 0 auto;
}
main > #access > ul > li {
  padding: min(calc(27 / 1460 * 100vw), 27px) 0;
}
main > #access > ul > li > div {
  width: min(calc(780 / 1460 * 100vw), 780px); height: min(calc(167 / 1460 * 100vw), 167px);
  overflow: auto visible;
}
main > #access > ul > li > div > ol {
  gap: min(calc(11 / 1460 * 100vw), 11px) 0;
  width: min(calc(710 / 1460 * 100vw), 710px);
}
main > #access > ul > li > div > ol > li > a {
  line-height: calc(24 / 16);
  transition: color 0.3s;
}
main > #access > ul > li > div > ol > li > a:hover {
  color:  #727171;
}
main > #access > ul > li > div > ol > li > a::before {
  height: 1px;
  inset: calc(50% - max(calc(0.5 / 1460 * 100vw), 0.5px) + 0.1em) auto auto 0;
}
main > #access > ul > li > div > ol > li > a::after {
  width: min(calc(115 / 1460 * 100vw), 115px);
  padding: 0 min(calc(36 / 1460 * 100vw), 36px) 0 0;
}
main > #access > ul > li > div > ol > li > a > p:nth-of-type(1) {/* -- ルート名称 */
  max-width: min(calc(450 / 1460 * 100vw), 450px);
  padding: 0 min(calc(16 / 1460 * 100vw), 16px) 0 0;
}
main > #access > ul > li > div > ol > li > a > p:nth-of-type(2) {/* -- 距離 */
  max-width: min(calc(100 / 1460 * 100vw), 100px);
  padding: 0 0 0 min(calc(16 / 1460 * 100vw), 16px);
}

main > #access > a {
  display: none;
}


/* ===== エラー ===== */
main > #error {
  width: min(calc(1400 / 1460 * 100vw), 1400px);
  margin: min(calc(34 / 1460 * 100vw), 34px) auto 0;
}

main > #error > hgroup > h2 {
  font-size: min(calc(38 / 1460 * 100vw), 38px);
}
main > #error > hgroup > h2::after {
  width: min(calc(80 / 1460 * 100vw), 80px); height: min(calc(3 / 1460 * 100vw), 3px);
  margin: min(calc(24 / 1460 * 100vw), 24px) auto 0;
}
main > #error > hgroup > p {
  font-size: min(calc(16 / 1460 * 100vw), 16px); line-height: calc(24 / 16);
}

main > #error > a {
  width: min(calc(300 / 1460 * 100vw), 300px); height: min(calc(45 / 1460 * 100vw), 45px);
  margin: min(calc(120 / 1460 * 100vw), 120px) auto 0;
  font-size: min(calc(16 / 1460 * 100vw), 16px); line-height: calc(24 / 16);
  outline: 1px solid hsl(357, 100%, 39%);
  border-radius: min(calc(45 / 2 / 1460 * 100vw), calc(45px / 2));
  transition: color 0.3s, background-color: 0.3s;
}
main > #error > a:hover {
  color: hsl(0, 0%, 100%);
  background-color: hsl(357, 100%, 39%);
}


/* ===== フッタ ===== */
footer {
  padding: min(calc(29 / 1460 * 100vw), 29px) 0;
}

footer > small {
  font-size: min(calc(14 / 1460 * 100vw), 14px);
}

}/* -- /@media screen and (min-width: 768px), print */