@charset "utf-8";
/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/

:root {
    --color-light-green: #4AAF67;
    --color-deep-green: #004B17;
    --color-red: #D54444;
    --color-yellow : #D7BE00;
    --color-gold : linear-gradient(-90deg,#413900,#807100);
    --color-gold1:#413900;
    --color-gold2:#807100;

    --color-oren : #FF9D00;
    --color-blue: #0D7ABE;
    --color-green: #00AD7C;
    --bgColor-yellow: #F4EDB7;
    --bgColor-blue: #E1F0F9;
    --bgColor-green: #E1F9EA;
    --base-shadow: 0 0.25rem 0.625rem rgba(0, 0, 0, 0.1);
    --body-space: clamp(15px,2rem,20px);
    --speed-normal: 0.3s;
    --speed-scale: .3s cubic-bezier(0.33, 1, 0.68, 1); 
    --link-icon-w: 1.25rem;
    --sec-margin: 3.125rem;
    --arrow-move: 3px;
}


html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

ul,
ol {
    list-style: none;
}

html {
    font-size: 17px;
    scroll-behavior: smooth;
    overflow-y: scroll;
}
body {
    line-height: 1.6;
    background: #fff;
    overflow-x: hidden;
    color: #000;
    font-family: "Shippori Mincho", sans-serif;
    /* font-weight: 500; */
    /* padding: 4.6875rem 0 0 3.125rem; */
    position: relative;
    font-weight: 400;
}
* {
    font-family: "Shippori Mincho", sans-serif;
    box-sizing: border-box;
}
img {
    vertical-align: bottom;
    max-width: 100%;
}


article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
    display: block;
}

nav ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

a {
    margin: 0;
    padding: 0;
    font-size: 100%;
    background: transparent;
    text-decoration: none;
    color: #0049BA;
    transition: var(--speed-normal) text-decoration-thickness;
    text-decoration: underline;
}
a.link {
    /* color: var(--main-color2); */
    /* color: #bc0022; */
    /* text-decoration: underline; */
}
a.link.color2 {
    color: #0a5dbb;
}
a:hover {
    text-decoration-thickness: 3px;
}
a:focus {
    outline: none
}

a:hover img {
    /* opacity: .85 */
}

/* change colours to suit your needs */
ins {
    background-color: #ff9;
    color: #000;
    text-decoration: none;
}

/* change colours to suit your needs */
mark {
    /* background-color: #ff9; */
    /* color: #000; */
    /* font-style: italic; */
    /* font-weight: bold; */
}

del {
    text-decoration: line-through;
}

abbr[title],
dfn[title] {
    border-bottom: 1px dotted;
    cursor: help;
}

table {
    border-collapse: separate;
    border-spacing: 0;
    border-collapse: collapse;
    /* table-layout: fixed; */
    /* word-break: keep-all; */
    /* background: #fff; */
}

/* change border colour to suit your needs */
hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #cccccc;
    margin: 1em 0;
    padding: 0;
}

input,select {
    width: 100%;
    -webkit-appearance: none;
    outline: none;
    margin: 0;
    font-family: 'Shippori Mincho',sans-serif;
}
button {
    -webkit-appearance: none;
    outline: none;
    margin: 0;
    font-family: 'Shippori Mincho',sans-serif;
}
label input[type="radio"],label [type="checkbox"] {
    display: none
}
input:not([type="radio"],[type="checkbox"]),
select {
    vertical-align: middle;
    padding: 0;
    border: 2px solid #ccc;
    background-color: #fff;
    height: 2.95rem;
    font-size: 1.125rem;
    padding: 0.3rem 1.8rem 0.3rem .8rem;
    border-radius: var(--base-radius);
}

@media (max-width: 1470px) {
    
}
@media (max-width: 1280px) {
    html { font-size: 1.35vw; }
}
@media (max-width: 1024px) {
    html { font-size: 1.5vw; }
}
@media (max-width: 810px) {
    html { font-size: 2.4vw; }
}
@media (max-width: 640px) {
    html { font-size: 2.6vw; }
}
@media (max-width: 480px) {
    html { font-size: 3.2vw; }
}

/* 共通
====================================================*/
body {
    background: #F5F2EE;
    letter-spacing: 0.03rem;
    max-width: 1920px;
    margin: 0 auto;
}

/* --- 
　ヘッダー
 --- */
header{
    background: #fff;
    padding: 0;
    position: relative;
    box-shadow:0 0 1rem rgba(0, 0, 0, .1);
    z-index: 2;
}
header > div{ max-width:1400px; margin:0 auto; display:flex; justify-content:space-between; }
header a{  position:relative; display:inline-block; }
header h1{ width: 16rem; padding:1rem 0; }
header h1 a{ display:block; transition:var(--speed-normal) opacity; }
header h1 a:hover{ opacity: .7;}
header h1 img{ width:100%; }
#nav{ position:relative; padding-left:2rem; }
#nav:before{ content:""; position:absolute; left:0; top:0; width:1500px; height:100%; background:#000; }
#nav ul{ display:flex; gap:2rem; align-items:center; height:100%; position:relative; }
#nav ul > li{ height:100%; display:flex; align-items:center; padding-right:2rem; position:relative; }
#nav ul > li:before{ content:""; position:absolute; right: -1px; top:1rem; width:1px; height:calc(100% - 2rem); background:rgba(255, 255, 255, .3); }
#nav ul > li > a{ font-size:110%; font-weight:500; color:#fff; text-decoration:none; padding:.5rem 0 .5rem 4rem; height:100%; display:flex; align-items:center;  }
#nav ul > li > a:before{ content:""; position:absolute; left:0; top:calc(50% - 1rem); width:3.5rem; height:2rem; background:url(../images/common/icon1.svg) no-repeat center center; background-size:contain; transition: var(--speed-normal) opacity; opacity:.7; }
#nav ul > li > a.g-map:before{ background-image:url(../images/common/icon2.svg); }
#nav ul > li > a.g-link:before{ background-image:url(../images/common/icon3.svg); }

#nav ul > li > a span{ position:relative; }
#nav ul > li > a span:after{ content:""; display: inline-block; width:1rem; height:1rem; background:url(../images/common/icon_modal.svg) no-repeat center center; background-size:contain; opacity:.7; margin-left:.3rem; }

#nav ul > li > a:after{ content:""; position:absolute; left:0; bottom:0; width:0; height:2px; background: var(--color-yellow); transition:var(--speed-scale) width; }
#nav ul > li > a:hover:after,#nav ul > li > a.act:after{ width:100%; }
#nav ul > li > a.act:after{ height:4px; }
#nav ul > li > a.act{ font-weight:700; }
#nav ul > li > a.act:before,#nav ul > li > a:hover:before{ opacity:1; }

@media (max-width: 1450px) {
    header h1{ margin-left:1rem; }
}

footer{ background:#333; margin-top:4rem; }
footer #copy{ text-align:center; padding:1.2rem; color:#fff; font-size:80%; }

.menu-trigger,
.menu-trigger span {
  display: block;
  transition: var(--speed-normal) transform;
  box-sizing: border-box;
}
.menu-trigger {
  position: fixed;  right: 7px; top: calc((var(--sp-head) - 33px) / 2);
  width: 54px;
  height: 33px;
  z-index: 100;
  background: #fff;
  border-radius: 100px;
  z-index: 5;
  display: none;
}
.menu-trigger.active {  }
.menu-trigger :before{}
.menu-trigger span {
  position: absolute;
  left: 18px;
  width: 20px;
  height: 1px;
  background-color: var(--color-blue);
}
.menu-trigger span:nth-of-type(1) {
  top: 12px;
}
.menu-trigger span:nth-of-type(2) {
  top: 16px;
}
.menu-trigger span:nth-of-type(3) {
  bottom: 12px;
}
.menu-trigger.active span {  }
.menu-trigger.active span:nth-of-type(1) {
  transform: translateY(4px) rotate(-32deg);
}
.menu-trigger.active span:nth-of-type(2) {
  opacity: 0;
}
.menu-trigger.active span:nth-of-type(3) {
  transform: translateY(-4px) rotate(32deg);
}
#gnav-bg{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100dvh;
    background: #000;
    opacity: 0;
    z-index: 3;
    pointer-events: none;
    transition: var(--speed-normal) opacity;
}

@media (max-width: 810px) {
    header > div{ display:block; text-align:center; }
    header h1{ width: 16rem; padding:1rem 0; margin:0 auto; }
    #nav { padding:0; }
    #nav ul{ gap:1rem; justify-content:center; padding:.5rem; }
    #nav ul > li{ padding-right:1rem; }
    #nav ul > li:last-child{ padding-right:0; }
    #nav ul > li:before{ top:.5rem; height:calc(100% - 1rem); }
    #nav ul > li:last-child:before{ display:none; }
    #nav ul > li > a { padding: 1rem 0 1rem 4rem; }
}
@media (max-width: 480px) {
    #nav ul{ gap:1.5rem; }
    #nav ul > li{ padding-right:1.5rem; }
    #nav ul > li:last-child{ padding-right:0; }
    #nav ul > li > a::before { top:.5rem; left:50%; height: 2.3rem; width: 4.5rem; transform:translateX(-50%); }
    #nav ul > li > a { padding: 3rem 0 .7rem !important; }
    #nav ul > li > a.act::after { height:3px; }
}


/* --- 
　ボタン
 --- */
.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100px;
    font-size: 0.9375rem;
    font-size: clamp(14.5px,0.9375rem,20px);
    margin: 0.25rem auto 0;
    font-weight: 600;
    gap: 0.35rem;
    text-decoration: none;
    transition: var(--speed-normal) background,var(--speed-normal) border-color,var(--speed-normal) filter;
}
.btn .arrow{ transition:var(--speed-normal) transform; }
.btn:hover .arrow{ transform:translateX(var(--arrow-move)); }

a.win:after{ content: ""; vertical-align: middle; display: inline-block; width: 1em; height: 1em; background:url(../images/common/icon_win.svg) no-repeat center center; background-size: contain; vertical-align:middle; margin:0 .2em; transform:translateY(-3px); }

.link-list{ display:flex; gap:1rem; flex-wrap:wrap; }
.link-list.txt{ gap:1rem 2rem; align-items:end; }
.link-list li{}
.link-list li p{ font-size:110%; margin-bottom:0 !important; }
.link-list li a{ position: relative; border-radius:200px; box-shadow: 0 1px 0 rgba(0, 0, 0, .2); padding:.8em 2.5em .8em 1em; background:#fff; text-decoration:none; display:inline-block; color:#000; font-weight:500; transition:var(--speed-normal) color,var(--speed-normal) box-shadow,var(--speed-normal) background; }
.link-list li a:before{ content: ""; position: absolute; top: calc(50% - .7em); right: .5em; background:url(../images/common/icon_arrow.svg) no-repeat center center; background-size:contain; width:1.3em; height:1.3em; filter: brightness(0) saturate(100%) invert(35%) sepia(91%) saturate(915%) hue-rotate(171deg) brightness(91%) contrast(92%); transition:var(--speed-normal) transform; }
.link-list.col1 li a:before{ filter: brightness(0) saturate(100%) invert(67%) sepia(17%) saturate(4975%) hue-rotate(358deg) brightness(98%) contrast(108%); }
.link-list li a:hover{ color:var(--color-blue); box-shadow:none; }
.link-list li a:hover:before{ transform:translateX(var(--arrow-move)); }

.link-list.type1 li{ width:100%; }
.link-list.type1 li a{ padding-left: 0.5em; display:block; border-radius: 0;  }
.link-list.type1 li a:hover{ background:var(--bgColor-blue); border-radius: 3px; }
.link-list li a.file:before{ background-image:url(../images/common/icon_file.svg); }
.link-list li a.win:before{ background-image:url(../images/common/icon_win.svg); }
.link-list.bor li a{ border:1px solid #ddd; }

/* 下層共通
====================================================*/
#maintit{ background:var(--color-gold); color: #fff; padding:2.5rem 0; box-shadow:0 0 1rem rgba(0, 0, 0, .2); position:relative; z-index:1; }
#maintit h1{ font-size:250%; font-weight:500; position:relative; max-width: 1400px; width: 95%; margin: 0 auto; text-shadow: 2px 2px 3px rgba(0, 0, 0, .3);}
#wrap{ max-width:1400px; width:90%; margin:0 auto; }
#breadcrumbs { padding: 1.5rem 0 2rem;}
#breadcrumbs ul {
    margin: 0 auto;
    display: flex;
    padding: 0;
    font-size: 0.875rem;
    gap: 0.5rem;
    flex-wrap: wrap;
}
#breadcrumbs a {  }
#breadcrumbs ul li:not(:first-child):before { content: ">"; margin-right:0.5rem; }

#local{ padding-top:1rem; }
.search-nav{ display:flex; justify-content:space-between; gap:1rem; align-items:center; font-size:110%; max-width:1400px; margin:0 auto 3rem; }
.search-nav a{ text-decoration:none; color:var(--color-gold1); text-align:center; font-weight:500; transition:var(--speed-normal) background, var(--speed-normal) color; }

.search-nav > a{ border:1px solid var(--color-gold2); background:#fff; color:var(--color-gold2); padding:1.2rem 1rem; font-size:110%; width:14rem; }
.search-nav > a:before{content: ""; width: 1.5em; height: 1.5em; display: inline-block; background: url(../images/common/icon_all.svg) no-repeat center center; background-size: contain; vertical-align: middle; margin-right: .3rem; transition:var(--speed-normal) filter;}
.search-nav > a:hover,.search-nav > a.act{ background:var(--color-gold2); color:#fff; }
.search-nav > a:hover:before,.search-nav > a.act:before{ filter: brightness(0) invert(1); }

.search-nav > ul { display:flex; width:calc(100% - 15rem); border:1px solid var(--color-gold1); }
.search-nav > ul > li{ position:relative; border-left:1px solid var(--color-gold1); width:100%; }
.search-nav > ul > li:first-child{ border-left:none; }
.search-nav > ul > li a{  background:#fff; padding:.8rem 1.5rem; box-sizing:border-box; display:block; position:relative; }
.search-nav > ul > li a:hover{ background:var(--bgColor-yellow); }
.search-nav > ul > li a.act{ background:var(--color-gold1); color:#fff; }
.search-nav > ul > li.sub > a:after{ content:""; width:1.2em; height:1.2em; position:absolute; right:.3em; top:50%; transform:translateY(-50%); background: url(../images/common/icon_list.svg) no-repeat center center; background-size: contain; }
.search-nav > ul > li.sub > a.act:after{ filter: brightness(0) invert(1);}
.search-nav > ul > li.sub:hover ul{ display:block; }

.search-nav ul ul{ position:absolute; left:0; top:100%; width:100%; display:none; z-index:3; }
.search-nav ul ul a{ background:rgba(0, 0, 0, .85); color:#fff; text-align:left; padding:.6rem 1rem; font-size:85%; }
.search-nav ul ul a:hover,.search-nav ul ul a.act{ background:var(--color-gold2); }

#navfixed{ position:fixed; top:-5rem; left:0; z-index:5; width:100%; background:rgba(255, 255, 255, .9); font-size:95%; transition: var(--speed-scale) top; padding: 5px;}
#navfixed.on{ top: 0;}
#navfixed .search-nav{ margin:0 auto; }
#navfixed .search-nav > a { padding: .7rem 1rem; }
#navfixed .search-nav > ul > li a { padding:.5rem 1.5rem; }

/* --- 
　INDEX
 --- */
.index-sec{ margin:3rem 0 5rem; }
.index-sec h2{ font-size:180%; font-weight:500; border-bottom:1px solid var(--color-gold2); margin-bottom:1.5rem; padding-bottom:.5rem; }
.index-sec ul{ display:flex; flex-wrap:wrap; gap:2rem; }
.index-sec li{ width:calc((100% - 4rem) / 3); }
.index-sec li a{ text-decoration:none; color:#000; background:#fff; display:block; box-shadow:0 0 1rem rgba(0, 0, 0, .1); transition:var(--speed-normal) box-shadow; height:100%; }
.index-sec li .ph{ overflow:hidden; position:relative; aspect-ratio: 4 / 3; }
.index-sec li .ph img{ object-fit:cover; object-position:top center; width:100%; height:100%; transition:var(--speed-scale) transform,var(--speed-scale) filter; }
.index-sec li .ph.c img{ object-position:center center; }
.index-sec li .ph:before{ content:"国指定"; position:absolute; left:0; bottom:0; z-index:1; background:var(--color-gold); color:#fff; min-width:6em; padding:.2rem 1em; text-align:center; }
.index-sec li .ph.ctg2:before{ content:"国登録";}
.index-sec li .ph.ctg3:before{ content:"国選択";}
.index-sec li .ph.ctg4:before{ content:"東京都指定";}
.index-sec li .ph.ctg5:before{ content:"八丈町指定";}
.index-sec li .txt{ padding:1.5rem; }
.index-sec li .txt h3{ font-size:140%; margin-bottom:.7rem; transition:var(--speed-normal) color; line-height:1.4; }
.index-sec li .txt h3 span{ font-size:85%; font-weight:500; }
.index-sec li .txt dl.sub{ border:none; padding:0; gap: .3em 1em; font-size:95%; }
.index-sec li .txt dl.sub dt{ width:3.5em; font-weight:500; }
.index-sec li .txt dl.sub dd{ width:calc(100% - 4.5em);}
.index-sec li a:hover .ph img{ transform:scale(1.1); filter:brightness(1.15); }
.index-sec li a:hover .txt h3{ color:var(--color-gold2); }
.index-sec li a:hover { box-shadow:none; }

/* --- 
　メインコンテンツ
 --- */
#content { padding: 4%; margin:0 auto; background:#fff; border:1px solid var(--color-gold1); }
.cont-flex{ display:flex; justify-content:space-between; gap:3rem; flex-direction:row-reverse; }
.cont-txt{ max-width:1000px; margin:0 auto; }
.cont-flex .cont-txt{ width:53%; }
.cont-ph{ display:flex; flex-direction:column; gap:1rem; }
.cont-flex .cont-ph{ width:47%; text-align:center; }
.cont-txt .cont-ph{ margin:1rem 0 1.5rem; }
.cont-flex .cont-ph img{ width:100%; height:auto; }
.cont-txt h1{ font-size:220%; font-weight:600; margin:1rem 0; line-height:1.4; }
.cont-txt h1 span{ font-size:85%; }
.cont-txt .txt{ font-weight:500; line-height:1.8; margin-bottom:2rem; }
.cont-txt .txt p{ margin-bottom:1rem; }
#content .map{ margin-top:3rem; }
#content .map iframe{ width:100%; height:35em; }

dl.ctg{ display:flex; align-items:center; gap:1rem; font-weight:500; font-size:110%; }
dl.ctg dt{}
dl.ctg dt a{ display:block; text-decoration:none; color:#fff; background:var(--color-gold); min-width:9em; text-align:center; padding:.3rem 1rem; transition:var(--speed-normal) opacity; }
dl.ctg dt a:hover{ opacity:.7; }
dl.ctg dd{ color:var(--color-gold1); }

dl.sub{ border:1px solid var(--color-gold2); padding:1.5rem; display:flex; gap:.8em 1em; flex-wrap:wrap; }
dl.sub dt{ width:7em; font-weight:600; color:var(--color-gold1); }
dl.sub dd{ width:calc(100% - 8em); color:#222; }

#page{ font-size:110%; display:flex; justify-content:center; gap:4rem; margin-top:3rem; }
#page a{ background:var(--color-gold1); color:#fff; padding:1rem; width: 13em; text-align: center; text-decoration:none; font-weight:500; position:relative; transition:var(--speed-normal) background; }
#page a:before{ content:""; position:absolute; right:10px; top:calc(50% - .5rem); width:1rem; height:1rem; background: url(../images/common/icon_arr.svg) no-repeat center center; background-size:contain; transition:var(--speed-normal) transform; }
#page a:hover{ background:#000; }
#page a:hover:before{ transform:translateX(var(--arrow-move)); }
#page a.prev:before{ right:auto; left:10px; transform:rotate(180deg); }
#page a.prev:hover:before{ transform:translateX(-3px) rotate(180deg); }

a.link{ background:var(--bgColor-yellow); color:#000; display: block; padding:1rem; width: 20em; text-align: center; text-decoration:none; position:relative; transition:var(--speed-normal) background,var(--speed-normal) color; border:1px solid var(--color-gold2); margin:1rem auto 0; font-weight:600; }
a.link:hover{ background:var(--color-gold2); color:#fff; }
a.link.win:after{ transition:var(--speed-normal) filter; }
a.link:hover:after{ filter: brightness(0) invert(1); }

.link-flex{ display:flex; gap:1.5rem; padding:1rem; }
.link-flex > div{ width:100%; }
.link-flex h3{ color:var(--color-gold1); font-size:120%; font-weight:600; border-bottom:1px solid var(--color-gold2); padding-bottom:.3rem; margin-bottom:1rem; }
.link-flex ul{ display:flex; flex-direction:column; gap:.5rem; }
.link-flex ul a{ color:#000; transition:var(--speed-normal) color; }
.link-flex ul a:hover{ color:var(--color-gold2); }

/* --- 
　モーダル
 --- */
.modal {
  position: fixed;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s ease, visibility .4s;
  z-index: 9999;
}
.modal h2{ font-size:150%; font-weight:500; padding-bottom:.7rem; position:relative; padding:1rem 1rem 1rem 5.5rem; background:#000; color:#fff; border-radius:5px 5px 0 0; }
.modal h2:before{ content:""; position:absolute; left:1rem; top:calc(50% - 1.3rem); width:4rem; height:2.5rem; background:url(../images/common/icon2.svg) no-repeat center center; background-size:contain; }
.modal h2.tit1 a.link{ position:absolute; right:2rem; top:50%; transform:translateY(-50%); font-size:60%; margin:0; width: auto; padding: .6rem 1rem; border: none;}
.modal h2.tit2:before{ background-image:url(../images/common/icon3.svg); }

.modal.is-open {
  opacity: 1;
  visibility: visible;
}

.modal-bg {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.8);
}

.modal-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 95%;
  max-width: 1380px;
  max-height: 95dvh;
  background: #fff;
  padding: 0;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  border: 2px solid var(--color-gold2);
}

.modal.is-open .modal-inner {
  transform: translate(-50%, -50%);
  opacity: 1;
}
.modal-cont{ overflow-y: auto; scrollbar-gutter: stable; flex: 1; padding:2rem; }
.modal-cont iframe{ width:100%; height:680px; }

/* 閉じるボタン */
body.is-modal-open {
  overflow-y: hidden;
}
.modal-close {
  position: absolute;
  z-index: 2;
  top: -10px;
  right: -10px;

  width: 36px;
  height: 36px;

  background: var(--color-gold2);
  border-radius: 50%;

  text-decoration: none;
  transition: background .3s ease;
}
.modal-close:hover {
  background: var(--color-gold1);
}

/* 2本の線 */
.modal-close::before,
.modal-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;

  width: 16px;
  height: 2px;

  background: #fff;
}

.modal-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.modal-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}



@media (max-width: 1024px) {
    .search-nav > a{ width:10em; }
    .search-nav > ul { width:calc(100% - 11rem); }
}
@media (max-width: 810px) {
    #maintit h1 { padding:0 1rem; }
    .search-nav { flex-direction:column; }
    .search-nav > a { width: 100%; }
    .search-nav > ul { width:100%; flex-wrap:wrap; }
    .search-nav > ul li{ width:calc(100% / 3); }
    .search-nav > ul li.sub{ width:50%; border-top:1px solid var(--color-gold1); }
    .search-nav > ul li:nth-child(4){ border-left:none; }
    .search-nav > ul > li.sub:hover ul{ display:none; }
    .search-nav > ul > li.sub > a::after { display:none; }
    #navfixed{ top:-7rem; }
    #navfixed .search-nav { flex-direction: initial; align-items:stretch; gap:.5rem; }
    #navfixed .search-nav > a{ width:4rem; display:flex; align-items:center; justify-content:center; }
    #navfixed .search-nav > a span{ display:none; }
    #navfixed .search-nav > a::before { margin:0; }

    .index-sec ul{ gap:1rem }
    .index-sec li { width: calc((100% - 1rem) / 2); }

    .cont-flex { flex-direction:column; }
    .cont-flex .cont-ph,.cont-flex .cont-txt { width: 100%; }
    #page { gap:2rem; }

    .link-flex{ flex-direction: column; }

    .modal h2.tit1 a span{ display:none; }
    .modal-cont iframe{ height:550px; }
}
@media (max-width: 480px) {
    #page { gap:1rem; }
    .index-sec li { width: 100%; }
    .modal-cont{ padding: 1.5rem; }
}



@media (max-width: 768px) {
    .pageLinksList li {
        min-width: calc((100% - 2rem)/3);
    }
    .indexImgList {
        grid-template-columns: max(50px, 20%) 1fr;
        gap: 1.25rem 1.25rem;
    }
    .indexImgList .ttlLink {
        place-content: center
    }
    .indexImgList .img {
        grid-row: 1/2;
    }
    .indexList {
        grid-column: 1/3;
        grid-template-columns: 1fr;
    }
    .indexImgList .moreBtnWrap {
        grid-column: 1 / 3
    }
    .indexList li {
        padding: 0 0.5rem
    }
}
@media (max-width: 500px) {
    .pageLinksList li {
        /* min-width: calc((100% - 1rem)/2); */
    }
}
/* class */
@media screen and (max-width: 810px) {
    .pc {
        display: none !important;
    }
}

@media screen and (min-width: 811px) {
    .sp {
        display: none !important;
    }
}

@media screen and (max-width: 1080px) {
    .o1080 {
        display: none !important;
    }
}

@media screen and (min-width: 1081px) {
    .u1080 {
        display: none !important;
    }
}

@media screen and (max-width: 768px) {
    .o768 {
        display: none !important;
    }
}

@media screen and (min-width: 769px) {
    .u768 {
        display: none !important;
    }
}

@media screen and (max-width: 640px) {
    .o640 {
        display: none !important;
    }
}

@media screen and (min-width: 641px) {
    .u640 {
        display: none !important;
    }
}

@media screen and (max-width: 480px) {
    .o480 {
        display: none !important;
    }
}

@media screen and (min-width: 481px) {
    .u480 {
        display: none !important;
    }
}
.fc-red {
    color: var(--main-color);
}

.dilb {
    display: inline-block;
}

.fll {
    float: left;
}

.tal {
    text-align: left;
}

.tac {
    text-align: center;
}

.tar {
    text-align: right;
}

@keyframes fade{
    0% { opacity:0; }
    to { opacity:1; }
}
@keyframes fadeIn {
    0% { opacity:0; transform:translateY(2rem); }
    to { opacity:1; transform:translateY(0); }
}
@keyframes scale {
  0% {opacity: 0; transform: scale(1.2);}
  to {opacity: 1;  transform: scale(1); }
}

.note{ font-size:.85rem; color:#555; font-weight:normal; }
.note.red{ color:var(--main-color); }
.tar{ text-align:right !important; }
.tac{ text-align:center !important; }
.w60 {width: 60px;}
.w70 {width: 70px;}
.w80 {width: 80px;}
.w100 {width: 100px;}
.w200 {width: 200px;}
.w100p {width: 100%;}
.mxw-60 {max-width: 60px !important;}
.mxw-100 {max-width: 100px !important;}
.mxw-150 {max-width: 150px !important;}
.mxw-200 {max-width: 200px !important;}
.mxw-250 {max-width: 250px !important;}
.mxw-300 {max-width: 300px !important;}
.mxw-380 {max-width: 380px !important;}
.mxw-400 {max-width: 400px !important;}
.mxw-600 {max-width: 600px !important;}

/* margin-top */
.mt1em{ margin-top:1rem; }

.mt0{margin-top: 0 !important;}
.mt1{margin-top: 1px;}
.mt2{margin-top: 2px;}
.mt3{margin-top: 3px;}
.mt4{margin-top: 4px;}
.mt5{margin-top: 5px;}
.mt10{margin-top: 10px !important;}
.mt15{margin-top: 15px !important;}
.mt20{margin-top: 20px !important;}
.mt30{margin-top: 30px !important;}
.mt40{margin-top: 40px !important;}
.mt50{margin-top: 50px !important;}
.mt60{margin-top: 60px !important;}

.mt1rem{margin-top: 1rem;}
.mt2rem{margin-top: 2rem;}
.mt3rem{margin-top: 3rem;}
.mt4rem{margin-top: 4rem;}

/* margin-right */
.mr1{margin-right: 1px;}
.mr2{margin-right: 2px;}
.mr3{margin-right: 3px;}
.mr4{margin-right: 4px;}
.mr5{margin-right: 5px;}
.mr10{margin-right: 10px;}
.mr15{margin-right: 15px;}
.mr20{margin-right: 20px;}
.mr30{margin-right: 30px;}

/* margin-bottom */
.mb0{margin-bottom: 0!important;}
.mb1{margin-bottom: 1px;}
.mb2{margin-bottom: 2px;}
.mb3{margin-bottom: 3px;}
.mb4{margin-bottom: 4px;}
.mb5{margin-bottom: 5px;}
.mb10{margin-bottom: 10px;}
.mb15{margin-bottom: 15px;}
.mb20{margin-bottom: 20px;}
.mb30{margin-bottom: 30px !important;}
.mb50{margin-bottom: 50px !important;}

.mb1rem{margin-bottom: 1rem;}
.mb2rem{margin-bottom: 2rem;}
.mb3rem{margin-bottom: 3rem;}
.mb4rem{margin-bottom: 4rem;}

/* margin-left */
.ml1{margin-left: 1px;}
.ml2{margin-left: 2px;}
.ml3{margin-left: 3px;}
.ml4{margin-left: 4px;}
.ml5{margin-left: 5px;}
.ml10{margin-left: 10px;}
.ml15{margin-left: 15px;}
.ml20{margin-left: 20px;}

/* padding-top */
.pt1{padding-top: 1px;}
.pt2{padding-top: 2px;}
.pt3{padding-top: 3px;}
.pt4{padding-top: 4px;}
.pt5{padding-top: 5px;}
.pt10{padding-top: 10px;}
.pt15{padding-top: 15px;}
.pt20{padding-top: 20px;}
.pt40{padding-top: 40px;}

/* padding-right */
.pr1{padding-right: 1px;}
.pr2{padding-right: 2px;}
.pr3{padding-right: 3px;}
.pr4{padding-right: 4px;}
.pr5{padding-right: 5px;}
.pr10{padding-right: 10px;}
.pr15{padding-right: 15px;}
.pr20{padding-right: 20px;}

/* padding-bottom */
.pb1{padding-bottom: 1px;}
.pb2{padding-bottom: 2px;}
.pb3{padding-bottom: 3px;}
.pb4{padding-bottom: 4px;}
.pb5{padding-bottom: 5px;}
.pb10{padding-bottom: 10px;}
.pb15{padding-bottom: 15px;}
.pb20{padding-bottom: 20px;}

/* padding-left */
.pl1{padding-left: 1px;}
.pl2{padding-left: 2px;}
.pl3{padding-left: 3px;}
.pl4{padding-left: 4px;}
.pl5{padding-left: 5px;}
.pl10{padding-left: 10px;}
.pl15{padding-left: 15px;}
.pl20{padding-left: 20px;}
.pl30{padding-left: 30px;}
.pl40{padding-left: 40px;}

/* padding */
.pg1{padding: 1px;}
.pg2{padding: 2px;}
.pg3{padding: 3px;}
.pg4{padding: 4px;}
.pg5{padding: 5px;}
.pg10{padding: 10px;}
.pg15{padding: 15px;}
.pg20{padding: 20px;}
.pg30{padding: 30px;}
.pg40{padding: 40px;}