@charset "utf-8";
/* CSS Document */

/*===============================================
●共通
===============================================*/
/* common */
#mfp * {
  min-height: 0vw;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

#mfp :is(h1, h2, h3, h4, h5, p, figure) {
  margin: 0;
  padding: 0;
  list-style: none;
  display: block;
}

#mfp :is(ul, ol, li, dl, dt, dd) {
  margin: 0;
  list-style: none;
  padding: 0;
}

#mfp :is(a:link, a:visited, a:hover, a:active, a:focus) {
  text-decoration: none;
}

#mfp :is(button, a) {
  all: unset;
  display: block;
  cursor: pointer;
  box-sizing: border-box;
}

#mfp img {
  max-width: 100%;
  width: auto;
  height: auto;
  display: block;
  aspect-ratio: attr(width) / attr(height);
}

:root {
  --fm-green: #008132;
  --fm-blue: #007db8;
  --bg-light: #f0f8ff;
  --bg-base: #f5f5f5;
  --text-main: #313131;
  --text-sub: #fff;
  --h-light-color: #eee;
  --h-dark-color: #d2d2d2;

}

#mfp {
  width: min(100%, 954px);
  margin: 0 auto;
  background: #fff;
  color: var(--text-main);
  overflow: hidden;
  font-feature-settings: "palt", "tnum";
  letter-spacing: 0.05em;
}

#mfp .outline-tab-area {
  display: flex;
  align-items: center;
  column-gap: .5rem;
}

#mfp .outline-tab-area .outline-tab {
  width: 100%;
  text-align: center;
  background: var(--bg-base);
  padding: 1rem;
  color: var(--text-mainb);
  font-weight: 600;
  font-size: clamp(.9rem, 2vw, 1.3rem);
  border-top: 8px solid var(--fm-green);
}

#mfp .outline-tab-area .outline-tab.active {
  background: var(--bg-light);
  color: var(--text-main);
  border-top: 8px solid var(--fm-blue);
  position: relative;
  z-index: 2;
}

#mfp :is(#other, #admin).sub-tab {
  display: none;
  background: var(--bg-light);
  padding: 2.5rem 1.5rem 1.5rem;
}

#mfp #other.sub-tab {
  padding: 2.5rem 1.5rem 1.8rem;
}

#mfp .sub-tab.active {
  display: block;
}

#mfp .sub-content {
  display: none;
}

#mfp .sub-content.show {
  display: block;
  animation: fadeIn 0.3s ease;
}

/* ======= copy_print-area ======= */
#mfp .copy_print-area {
  background: var(--bg-light);
  padding: 1.5rem;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}

#mfp .sub-tab .copy_print-wrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
}

#mfp .sub-tab .copy_print-item button {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  column-gap: .5rem;
  width: 100%;
  height: 100%;
  padding: 1rem;
  box-sizing: border-box;
  background: var(--text-sub);
}

#mfp .sub-tab .copy_print-item span {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  height: 30px;
  line-height: 1.5;
  width: 100%;
  font-size: clamp(0.75rem, 1.6vw, 1.05rem);
  font-weight: 600;
  font-feature-settings: "palt";
  letter-spacing: 0.05em;
}

#mfp .sub-tab .copy_print-item {
  flex: 1;
  color: var(--text-main);
  border-bottom: 5px solid var(--h-light-color);

}

#mfp .sub-tab .copy_print-item.active {
  color: var(--fm-blue);
  border-bottom: 5px solid var(--fm-blue);
}

#mfp .sub-tab .copy_print-item .fa-solid {
  font-size: 2rem;
}

#mfp .copy_print-container {
  background: var(--bg-light);
  padding: 2rem 0 0;
}

#mfp .ttl_h2 {
  font-size: clamp(1.1rem, 1.8vw, 1.2rem);
  background: var(--h-light-color);
  margin-left: -1.5rem;
  margin-right: -1.5rem;
  padding: 0.5rem 1.5rem;
  border-top: 2px solid var(--fm-blue);
  border-bottom: 2px solid var(--fm-blue);
  grid-column: 1/-1;
}

#mfp .ttl_h3 {
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  background: var(--h-light-color);
  margin: -1.5rem -1.5rem 1rem -1.5rem;
  padding: 0.7rem 1.2rem;
  border-radius: 1rem 1rem 0 0;
  display: flex;
  align-items: center;
}

#mfp .ttl_h3.doc {
  margin: -1rem -1.5rem 1rem -1.5rem
}

#mfp div .ttl_h3::before {
  margin-right: 0.5em;
  color: var(--text-sub);
  background-color: var(--fm-green);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}


/* ======= admin ======= */
#mfp #admin .content-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin: 1.5rem auto 0;
}

#mfp .admin-box.no01 .ttl_h3::before {
  content: '1';
}

#mfp .admin-box.no02 .ttl_h3::before {
  content: '2';
}

#mfp .admin-box.no03 .ttl_h3::before {
  content: '3';
}

#mfp .admin-box.no01 {
  grid-column: -1/1;
}

#mfp .admin-box {
  background: var(--text-sub);
  margin: 0 auto;
  padding: 1.5rem;
  border-radius: 1rem;
}

#mfp .admin-contact {
  grid-column: 1/-1;
  background: var(--text-sub);
  padding: 1.5rem;
  border-radius: 1rem;
}

#mfp .admin-contact .contact-title {
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  font-weight: 600;
}

#mfp .admin-contact dl div,
#mfp .admin-contact dl {
  display: flex;
}

#mfp .admin-contact dl div:not(:last-child) {
  margin-right: 1rem;
}

#mfp .admin-contact .contact-tel {
  font-size: clamp(1.1rem, 1.3vw, 1.3rem);
}

#mfp .admin-contact dt {
  position: relative;
  font-weight: 600;
  border-bottom: none;
  margin: 0;
  padding-bottom: 0;
  width: 100%;
}

#mfp .admin-contact dt,
#mfp .admin-contact dd {
  width: auto;
}

#mfp .admin-contact dt::before {
  content: none;
}

#mfp .admin-contact .tel {
  font-size: clamp(1.1rem, 1.3vw, 1.3rem);
  font-weight: 600;
}

#mfp .admin-contact .contact-desc {
  margin: .5rem 0 1rem;
}

#mfp .leadT {
  font-size: clamp(.9rem, 2vw, 1.05rem);
}

#mfp ul {
  margin-top: 0.8rem;
}

#mfp .kome,
#mfp ul .kome,
#mfp ul .maru {
  font-size: clamp(0.8rem, 0.85vw, 0.88rem);
  position: relative;
  margin-left: 1rem;
}

#mfp .kome::before,
#mfp ul .kome::before {
  content: '\203b';
  position: absolute;
  left: -1rem;
}

#mfp ul .maru::before {
  content: '\2022';
  position: absolute;
  left: -1rem;
}

#mfp ol .num {
  position: relative;
  margin-left: 2.5rem;
}

#mfp ol .num:has(:last-child) {
  margin-bottom: 0.5rem;
}

#mfp ol .num small {
  display: block;
}

#mfp ol .num:first-child:before {
  content: '（1）';
  position: absolute;
  left: -2.5rem;
}

#mfp ol .num:last-child:before {
  content: '（2）';
  position: absolute;
  left: -2.5rem;
}

#mfp .content-inner .admin-box dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 1.5rem;
  row-gap: 2rem;
  margin: 1rem 0 0;
}

#mfp .cert.fir {
  grid-column: -1/1;
}

#mfp dt {
  position: relative;
  font-weight: 600;
  border-bottom: var(--fm-blue) solid 2px;
  margin: 0 0 1.2rem;
  padding-bottom: .3rem;
  width: 100%;
}

#mfp dt::before {
  position: absolute;
  bottom: -6px;
  content: '';
  width: 100%;
  border-bottom: var(--fm-blue) solid 1px;
}

#mfp dd {
  width: 100%;
}

#mfp .cert .cert02-list ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin: 1rem 0 0;
}

#mfp .cert .cert02-list ul li {
  padding: 1rem 0;
  background: var(--h-light-color);
  border: var(--text-main) dashed 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(0.8rem, 0.85vw, 0.88rem);
}

/* ======= content-copy ======= */

#mfp :is(#content-copy, #content-contents) .content-inner {
  padding: 1rem 1.5rem 1.5rem;
  margin: 0 0 2rem;
  background: #fff;
  border-radius: 0 0 1rem 1rem;
}

#mfp #content-contents .content-inner {
  margin: 0;
  padding-bottom: 1.5rem;
}

#mfp .sub-tab .copy_print-item .fa-solid {
  font-size: 1.5rem;
}

#mfp #content-copy .content-inner.last {
  margin: 0;
}

#mfp :is(#content-copy, #content-photo, #content-contents) .leadT {
  margin-bottom: 1rem;
}

#mfp .copy-box dl {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

#mfp .copy-box ul {
  display: flex;
  gap: 1rem;
  font-size: clamp(.9rem, 2vw, 1rem);
}

#mfp .copy-box ul li {
  background: var(--h-light-color);
  border-radius: 50%;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

#mfp :is(table, td) {
  border: 1px solid #595959;
  border-collapse: collapse;
  width: 90%;
  font-size: clamp(0.8rem, 0.85vw, 0.88rem);
}

#mfp :is(td, th) {
  padding: .2rem;
  width: 30px;
  height: 25px;
  text-align: center;
}

#mfp th {
  background: var(--h-light-color);
  border-top: 1px solid #595959;
  border-left: 1px solid #595959;
  border-right: 1px solid #595959;
  border-bottom: 2px dotted #595959;
}

#mfp .head {
  border-bottom: 1px solid #595959;
  text-align: left;
}

#mfp table caption {
  display: none;
}

#mfp .kome.gaibu a {
  width: fit-content;
  color: #0171a6;
  transition: all .3s ease-in-out;
}

#mfp .kome.gaibu a::after {
  content: '\e905';
  font-family: "icn_font";
  font-weight: normal;
}

#mfp .btn.gaibu a::after {
  content: '\e905';
  font-family: "icn_font";
  font-weight: normal;
  position: absolute;
  right: 15px;
}

#mfp #content-copy .btn.gaibu {
  margin: 1rem 0 0;
}

#mfp #admin .admin-contact .btn.gaibu a,
#mfp #content-copy .btn.gaibu a {
  display: block;
  background: #fff;
  border: var(--h-dark-color) 2px solid;
  padding: 1rem;
  border-radius: 50px;
  text-align: center;
  box-shadow: 0px 3px 0px var(--h-dark-color);
  position: relative;
  transition: all .2s ease-in-out;
}


/* ======= content-print ======= */
#mfp #content-print .content-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin: 1.5rem auto;
}

#mfp #content-print .print-box {
  background: #fff;
  margin: 0 auto;
  padding: 1.5rem;
  border-radius: 1rem;
}

#mfp #content-print .print-box.col1 {
  grid-column: 1/-1;
  width: 100%;
  padding: 1rem 1.5rem 1.5rem;
}

#mfp #content-print .leadT {
  margin-bottom: 1rem;
}

#mfp #content-print dl {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

#mfp #content-print .nwp dl {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

#mfp #content-print ul {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 0;
}

#mfp #content-print .print .app {
  display: grid;
  grid-template-columns: 1fr 3.5fr;
  align-items: center;
  justify-items: flex-start;
  margin-bottom: 1rem;
}

#mfp #content-print .print.nwp .app {
  grid-template-columns: 1fr 9fr;
  justify-items: left;
}

#mfp #content-print .nwp div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-items: center;
  margin-bottom: 0;
}

#mfp #content-print .btn a {
  display: block;
  background: #fff;
  border: var(--h-dark-color) 2px solid;
  padding: 1rem;
  border-radius: 50px;
  text-align: center;
  box-shadow: 0px 3px 0px var(--h-dark-color);
  position: relative;
  transition: all .2s ease-in-out;
}

#mfp #content-print .btn a::after {
  content: '\e903';
  font-family: "icn_font";
  font-weight: normal;
  position: absolute;
  right: 10px;
}

#mfp #content-print .btn.gaibu a::after {
  content: '\e905';
  font-family: "icn_font";
  font-weight: normal;
  position: absolute;
  right: 15px;
}

#mfp #content-print .col1 .media {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 1rem;
  margin-bottom: 1.5rem;
}

#mfp #content-print .col1 .media .ttl_h3 {
  justify-content: center;
  background: #fff;
  margin: 0;
  border-radius: 50px;
  font-size: clamp(1rem, 1.3vw, 1.05rem);
}

#mfp #content-print .col1 .media dt {
  grid-column: 1/-1;
}

#mfp #content-print .col1 .media dd {
  background: var(--h-light-color);
  padding: 1rem;
  border-radius: 1rem;
}

#mfp #content-print .col1 .media .media-list {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: center;
  gap: 0;
  margin: 1rem 0;
}

#mfp #content-print .col1 .media .media-item {
  grid-column: span 3;
  text-align: center;
}

#mfp #content-print .col1 .media .media-item.is-small {
  grid-column: span 2;
  text-align: center;
}

#mfp #content-print .media-item figcaption {
  font-size: clamp(.7rem, 1.3vw, .9rem);
  font-feature-settings: "palt"1;
}

/*=======content-photo=======*/
#mfp #content-print .photo .content-inner {
  grid-template-columns: 1fr;
  gap: 0;
  padding: 1rem 1.5rem 1.5rem;
  margin: 0;
  background: #fff;
  border-radius: 0 0 1rem 1rem;
}

#mfp #content-print .photo dl {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

#mfp #content-print .photo ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 1rem;
  row-gap: 1.5rem;
}

#mfp #content-print .photo .ttl_h3 {
  font-size: clamp(.9rem, 1.3vw, 1.1rem);
  background: var(--h-dark-color);
  margin: 0;
}

#mfp #content-print .photo .function {
  display: flex;
  flex-direction: column;
}

#mfp #content-print .photo .function div {
  background: var(--h-light-color);
  padding: 1rem;
  border-radius: 0 0 1rem 1rem;
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 1rem;
  align-items: center;
  flex-grow: 1;
}

/* ======= content-contens ======= */

#mfp #content-contents dl {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

#mfp #content-contents .contents .contents-box ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  background: var(--h-light-color);
  padding: 1rem;
  border-radius: 1rem;
}

#mfp #content-contents .contents .contents-box .btn img {
  transition: all .3s ease-in-out;
}

#mfp #content-contents .contents .contents-box ul figcaption {
  font-size: clamp(.7rem, 1.3vw, .9rem);
  font-feature-settings: "palt";
}


/* ======= other ======= */

#mfp #other .other-wrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  margin: 1.5rem auto 2.5rem;
  width: 95%;
}

#mfp #other .other-item a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  background: #fff;
  padding: .2rem 1rem 1rem;
  border: var(--fm-blue) 3px solid;
  border-radius: 1rem;
  box-shadow: 0px 4px 0px var(--fm-blue);
  min-height: 175px;
  gap: .3rem;
  transition: all .2s ease-in-out;
}

#mfp #other .other-item a .card-arrow {
  align-self: flex-end;
  font-size: .8rem;
}

/* ========= 矢印の基本スタイル ========= */
#mfp #other .other-item a .fa-arrow-right {
  width: 23px;
  height: 23px;
  position: absolute;
  bottom: 6%;
  right: 5%;
  overflow: hidden;
  background: var(--fm-blue);
  border-radius: 50%;
}

#mfp #other .other-item a .fa-arrow-right::before,
#mfp #other .other-item a .fa-arrow-right::after {
  content: '\f061';
  font-family: 'Font Awesome 7 Free';
  font-weight: 900;
  color: #fff;
  background-color: transparent;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 23px;
  height: 23px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#mfp #other .other-item a .fa-arrow-right::before {
  transform: translate(-50%, -50%);
}

#mfp #other .other-item a .fa-arrow-right::after {
  transform: translate(-300%, -50%);
}

#mfp #other .btn a {
  background: #fff;
  border: var(--h-dark-color) 2px solid;
  padding: 1rem;
  border-radius: 50px;
  text-align: center;
  box-shadow: 0px 3px 0px var(--h-dark-color);
  position: relative;
  width: 95%;
  margin: 0 auto;
  transition: all .2s ease-in-out;
}

#mfp #other .btn a::after {
  content: '\e905';
  font-family: "icn_font";
  font-weight: normal;
  position: absolute;
  right: 15px;
}

#mfp #other .other-title {
  font-size: clamp(.85rem, 1.3vw, 1rem);
  font-weight: 700;
}

#mfp #other .other-text {
  font-size: clamp(.7rem, 1.3vw, .8rem);
}

/*===============================================
●hover
===============================================*/
@media (hover: hover) {
  #mfp #other .other-item a:hover .fa-arrow-right::before {
    transform: translate(100%, -50%);
    transition: transform 0.3s ease-in-out;
  }

  #mfp #other .other-item a:hover .fa-arrow-right::after {
    transform: translate(-50%, -50%);
    transition: transform 0.3s ease-in-out;
  }

  #mfp #other .other-item a:hover .fa-arrow-right::before,
  #mfp #other .other-item a:hover .fa-arrow-right::after {
    background-color: var(--fm-blue);
    color: var(--text-sub);
    transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out, transform 0.3s ease-in-out;
  }

  #mfp .kome.gaibu a:hover {
    text-decoration: underline;
  }

  #mfp #admin .admin-contact .btn.gaibu a:hover,
  #mfp #content-copy .btn.gaibu a:hover,
  #mfp #content-print .btn a:hover,
  #mfp #content-print .btn.gaibu a:hover,
  #mfp #other .btn a:hover {
    transform: translateY(3px);
    box-shadow: 0px 0 0px var(--h-dark-color);
  }

  #mfp #other .other-item a:hover {
    transform: translateY(3px);
    box-shadow: 0px 0 0px var(--fm-blue);
  }

  #mfp #content-contents .contents .contents-box .btn a:hover img {
    transform: scale(1.05);
  }

  #mfp #content-contents .contents .contents-box .btn a:hover figcaption {
    color: var(--fm-blue);
  }
}

/*===============================================
●スマホ用タップアクション (:active)
===============================================*/
@media (hover: none) {
  #mfp #other .other-item a:active .fa-arrow-right::before {
    transform: translate(100%, -50%);
    transition: transform 0.1s ease-in-out;
  }

  #mfp #other .other-item a:active .fa-arrow-right::after {
    transform: translate(-50%, -50%);
    transition: transform 0.1s ease-in-out;
  }

  #mfp #other .other-item a:active .fa-arrow-right::before,
  #mfp #other .other-item a:active .fa-arrow-right::after {
    background-color: var(--fm-blue);
    color: var(--text-sub);
    transition: color 0.1s ease-in-out, background-color 0.1s ease-in-out, transform 0.1s ease-in-out;
  }

  #mfp .kome.gaibu a:active {
    text-decoration: underline;
  }

  /* ボタンがタップされた時に少し沈み込む動き */

  #mfp #content-copy .btn.gaibu a:active,
  #mfp #content-print .btn a:active,
  #mfp #content-print .btn.gaibu a:active,
  #mfp #other .btn a:active {
    transform: translateY(3px);
    box-shadow: 0px 0 0px var(--h-dark-color);
    transition: all 0.1s ease-in-out;
  }

  #mfp #other .other-item a:active {
    transform: translateY(3px);
    box-shadow: 0px 0 0px var(--fm-blue);
    transition: all 0.1s ease-in-out;
  }

  #mfp #content-contents .contents .contents-box .btn img:active {
    transform: scale(0.95);
    transition: transform 0.1s ease-in-out;
  }
}

/*===============================================
●pc.css 画面の横幅が737px以上
===============================================*/
@media screen and (width >=737px) {

  /* ==== common ==== */
  #mfp .pc-none {
    display: none;
  }


}

/*===============================================
●sp.css  画面の横幅が736pxまで
===============================================*/
@media screen and (width <=736px) {

  /* ==== common ==== */
  #mfp .sp-none {
    display: none;
  }

  #mfp .outline-tab-area {
    align-items: stretch;
    column-gap: 0.5rem;
  }

  #mfp .outline-tab-area .outline-tab {
    padding: 0.5rem 0;
    border-top: 5px solid var(--fm-green);
  }

  #mfp .outline-tab-area .outline-tab.active {
    border-top: 5px solid var(--fm-blue);
  }

  #mfp .ttl_h3 {
    margin: -1rem -1rem 1rem -1rem;
  }

  /* ======= copy_print ======= */

  #mfp .sub-tab .copy_print-wrap {
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    padding-bottom: 0;
    width: 100%;
  }

  #mfp .sub-tab .copy_print {
    flex: 0 0 30%;
  }


  #mfp .sub-tab .copy_print .fa-solid {
    font-size: 1.5rem;
  }

  #mfp .sub-tab .copy_print-item .fa-solid {
    font-size: 1.3rem;
  }

  #mfp .sub-tab .copy_print button {
    row-gap: 0.5rem;
    padding: 0.5rem;
  }

  #mfp .sub-tab .copy_print span {
    height: 35px;
  }

  #mfp #content-admin .content-inner {
    grid-template-columns: 1fr;
  }

  #mfp .admin-area {
    padding: 0.8rem;
  }

  #mfp ol .num {
    margin-left: 1.5rem;
  }

  #mfp ol .num:first-child:before {
    left: -2rem;
  }

  #mfp ol .num:last-child:before {
    left: -2rem;
  }


  #mfp .content-inner .admin-box dl {
    grid-template-columns: 1fr;
    row-gap: 1.5rem;
  }

  #mfp .cert .cert02-list ul li {
    max-height: 50px;
  }

  #mfp #content-print .print-box {
    padding: 1rem;
  }

  #mfp #content-print .print-box.col1 {
    padding: 1rem 1rem 1.5rem;
  }

  /* ======= content-copy ======= */

  #mfp :is(#content-copy, #content-contents) .content-inner {
    padding: 1rem 1rem 1.2rem;
  }

  #mfp #content-contents .content-inner {
    margin: 0 0 .5rem;
  }

  #mfp .copy-box ul {
    gap: 0.5rem;
  }

  #mfp .copy-box ul li {
    width: 75px;
    height: 75px;
  }

  #mfp table {
    width: 100%;
  }

  #mfp ul .kome,
  #mfp ul .maru {
    font-feature-settings: "palt"1;
    letter-spacing: 0.05em;
  }

  #mfp #content-print .col1 .media .media-list.sec {
    margin: 1rem 0 0;
  }

  /* ======= content-photo ======= */
  #mfp #content-print .photo .content-inner {
    padding: 1rem;
    margin: 0 0 .5rem;
  }

  #mfp #content-print .photo ul {
    grid-template-columns: 1fr;
    row-gap: 1rem;
  }

  #mfp #content-print .photo .ttl_h3 {
    justify-content: center;
  }

  /* ======= content-print ======= */
  #mfp .copy_print-area {
    padding: .8rem 1rem 1.5rem;
  }

  #mfp .sub-tab .copy_print-item button {
    flex-direction: column;
    padding: .6rem 0 .2rem;
  }

  #mfp #content-print .content-inner {
    grid-template-columns: 1fr;
  }

  #mfp #content-print .print-box {
    padding: 1rem 1rem 1.5rem;
  }

  #mfp #content-print .print div {
    gap: .5rem;
    margin: 0;
  }

  #mfp #content-print .col1 .media {
    margin-bottom: .5rem;
  }

  #mfp #content-print .col1 .media .media-list {
    grid-template-columns: repeat(6, 1fr);
  }

  #mfp #content-print .col1 .media dd {
    padding: .8rem;
  }

  #mfp #content-print .col1 .media dd:nth-of-type(1) {
    margin-bottom: 1rem;
  }

  #mfp #content-print .nwp dl {
    grid-template-columns: 1fr;
  }

  #mfp #content-print .print.nwp .app {
    grid-template-columns: 1fr 3.5fr;
  }

  #mfp .sub-tab .copy_print-item span {
    justify-content: center;
    height: 33px;
    line-height: 1.2;
    padding: 0 .2rem;
  }

  #mfp #content-print .btn.gaibu a::after {
    right: 9px;
  }

  /* ======= content-contents ======= */
  #mfp #content-contents .contents .contents-box ul {
    grid-template-columns: repeat(2, 1fr);
  }


  /* ======= admin other ======= */
  #mfp .admin-contact,
  #mfp .admin-box {
    padding: 1.2rem;
  }

  #mfp .admin-contact .contact-title,
  #mfp .admin-box .ttl_h3 {
    margin: -1.2rem -1.2rem 1rem -1.2rem;
  }

  #mfp .admin-contact dl {
    flex-direction: column;
    margin-bottom: .5rem;
  }

  #mfp .admin-contact .contact-hours dl div:last-child {
    display: grid;
    grid-template-columns: max-content 1fr;
  }

  #mfp .admin-contact dt {
    padding-bottom: 0;
  }

  #mfp #admin .admin-contact .btn.gaibu a {
    padding: 1rem 3rem 1rem 1rem;
  }

  #mfp .btn.gaibu a::after {
    top: 33%;
  }

  #mfp :is(#other, #admin).sub-tab {
    padding: 2rem 1rem 1.5rem;
  }

  #mfp #other.sub-tab {
    padding: 2rem 1rem 1.8rem;
  }

  #mfp #admin .content-inner {
    grid-template-columns: 1fr;
    margin: 1rem 0 0;
  }

  #mfp #other .other-wrap {
    grid-template-columns: repeat(2, 1fr);
    column-gap: .5rem;
    row-gap: 1rem;
    margin: 1rem 0 2rem;
    width: 100%;
  }

  #mfp #other .other-title {
    font-feature-settings: "palt"1;
    letter-spacing: 0.03em;
    margin-bottom: .3rem;
  }

  #mfp #other .other-item a {
    padding: 0 0.5rem .5rem;
    min-height: 155px;
    gap: 0;
  }

  #mfp #other .other-item a .fa-arrow-right {
    width: 18px;
    height: 18px;
    bottom: 4%;
    right: 4%;
  }

  #mfp #other .other-item a .fa-arrow-right::before,
  #mfp #other .other-item a .fa-arrow-right::after {
    width: 17px;
    height: 17px;
  }

  #mfp #other .other-item a .card-arrow {
    font-size: .6rem;
  }

  .others {
    padding: 0 0.8rem;
  }

}

/*===============================================
●tablet.css  画面の横幅が737px～
===============================================*/
@media screen and (width >=1024px) and (width <=1200px) {
  #mfp .outline-tab-area {
    column-gap: 0.2rem;
  }

  #mfp :is(#other, #admin).sub-tab,
  #mfp .copy_print-area {
    padding: 1.3rem;
  }

  #mfp .outline-tab-area .outline-tab {
    padding: 0.8rem 0.2rem;

    font-size: clamp(0.9rem, 1.9vw, 1.1rem);
    word-break: keep-all;
  }

  #mfp .sub-tab .copy_print-item button {
    padding: 0.8rem 0.5rem;
    flex-direction: column;
    row-gap: 0.5rem;
    justify-content: center;
  }

  #mfp .sub-tab .copy_print-item span {
    font-size: clamp(0.9rem, 1.4vw, 0.95rem);
    height: auto;
    line-height: 1.3;
    justify-content: center;
    letter-spacing: 0.03em;
  }

  #mfp .ttl_h2 {
    font-size: clamp(0.9rem, 1.8vw, 1.1rem);
  }

  #mfp .leadT {
    font-size: clamp(0.9rem, 1.8vw, 1.03rem);
  }

  #mfp .txt {
    font-size: clamp(0.9rem, 1.8vw, 1.03rem);
  }

  #mfp .photo .txt {
    min-height: 93px;
  }

  #mfp #content-print .photo .function div {
    grid-template-columns: 1fr;
  }

  #mfp .sub-tab .copy_print-item .fa-solid {
    font-size: 1.3rem;
  }

  #mfp .copy-box {
    font-size: clamp(0.9rem, 1.8vw, 1.03rem);
  }

  #mfp table {
    width: 100%;
  }

  #mfp .ttl_h3 {
    margin: -1.5rem -1.3rem 1rem -1.3rem;
    font-size: clamp(0.9rem, 1.8vw, 1.03rem);
  }

  #mfp #admin .ttl_h3 {
    margin: -1.5rem -1.5rem 1rem -1.5rem;
  }

  #mfp #content-contents .content-inner {
    margin: 0;
    padding-bottom: 1.5rem;
  }

  #mfp #content-print .print-box.col1 {
    padding: 1rem 1rem 1.2rem;
  }

  #mfp #content-print .nwp dl {
    gap: 1rem;
  }

  #mfp #content-print .content-inner {
    column-gap: 1rem;
    row-gap: 1.5rem;
  }

  #mfp #content-print .print-box {
    padding: 1rem;
  }

  #mfp #content-print .print .app,
  #mfp #content-print .print.nwp .app {
    gap: 1rem;
  }

  #mfp .content-inner .admin-box dl {
    grid-template-columns: 1fr;
  }

  #mfp .admin-box {
    padding: 1.5rem;
  }

  #mfp #other .other-wrap {
    width: 100%;
  }

  #mfp #other .btn a {
    width: 100%;
  }

  #mfp #content-print .btn a,
  #mfp #content-print .btn.gaibu a,
  #mfp #content-copy .btn.gaibu a {
    font-size: clamp(0.85rem, 1.5vw, 0.9rem);
  }
}

/*===============================================
●tablet.css  画面の横幅が737px～1023px
===============================================*/
@media screen and (width >=737px) and (width <=1023px) {

  #mfp .outline-tab-area {
    column-gap: 0.2rem;
  }

  #mfp .copy_print-area {
    padding: 1rem;
  }

  #mfp .outline-tab-area .outline-tab {
    padding: 0.8rem 0.2rem;

    font-size: clamp(0.85rem, 1.5vw, 1rem);
    word-break: keep-all;
  }

  #mfp .sub-tab .copy_print-item button {
    padding: 0.8rem 0.5rem;
    flex-direction: column;
    row-gap: 0.5rem;
    justify-content: center;
  }

  #mfp .sub-tab .copy_print-item span {
    font-size: clamp(0.75rem, 1.2vw, 0.85rem);
    height: auto;
    line-height: 1.3;
    justify-content: center;
    letter-spacing: 0.03em;
  }

  #mfp :is(#content-copy, #content-contents) .content-inner {
    padding: 1rem 1rem 1.1rem;
  }

  #mfp .ttl_h2 {
    font-size: clamp(0.9rem, 1.8vw, 1rem);
  }

  #mfp .leadT {
    font-size: clamp(0.8rem, 1.8vw, 1rem);
  }

  #mfp .txt {
    font-size: clamp(0.75rem, 1.7vw, 0.9rem);
  }

  #mfp .photo .txt {
    min-height: 100px;
  }

  #mfp .sub-tab .copy_print-item .fa-solid {
    font-size: 1.3rem;
  }

  #mfp .copy-box ul {
    font-size: clamp(.8rem, 1.6vw, .9rem);
  }

  #mfp .copy-box ul li {
    width: 90px;
    height: 90px;
  }

  #mfp #content-print .print.nwp .app {
    grid-template-columns: 1fr 5fr;
    justify-items: left;
    align-items: self-start;
    gap: 1rem;
  }

  #mfp #content-print .col1 .media {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  #mfp :is(dt, dd) {
    font-size: clamp(0.8rem, 1.8vw, 1rem);
  }

  #mfp ol .num {
    margin-left: 2rem;
  }

  #mfp table {
    width: 100%;
  }

  #mfp .ttl_h3 {
    margin: -1.5rem -1rem 1rem -1rem;
    font-size: clamp(0.8rem, 1.9vw, 1rem);
  }

  #mfp #content-print .print-box.col1 {
    padding: 1rem 1rem 1.2rem;
  }

  #mfp #content-print .nwp dl {
    grid-template-columns: 1fr;
    gap: 1rem;
    font-size: clamp(0.8rem, 1.8vw, .9rem);
  }

  #mfp #content-print .print-box {
    padding: 1rem;
    width: 100%;
  }

  #mfp #content-print .print .app {
    grid-template-columns: 1fr 5fr;
    gap: 1rem;
  }

  #mfp #content-print .photo .content-inner {
    padding: 1rem 1rem 1.5rem;
  }

  #mfp #content-print .col1 .media dt {
    margin-bottom: 0;
  }

  #mfp #content-print .content-inner {
    grid-template-columns: 1fr;
    column-gap: 1rem;
    row-gap: 1.5rem;
  }

  #mfp #content-print .photo .function div {
    grid-template-columns: 1fr;
    align-items: flex-start;
  }

  #mfp #admin .content-inner {
    grid-template-columns: 1fr;
    margin: 1.5rem auto 0;
  }

  #mfp .content-inner .admin-box dl {
    grid-template-columns: 1fr;
  }

  #mfp :is(#other, #admin).sub-tab {
    padding: 2.5rem 1rem 1rem;
  }

  #mfp #content-contents .contents .contents-box ul {
    grid-template-columns: repeat(3, 1fr);
  }

  #mfp #other .other-wrap {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    width: 100%;
  }

  #mfp #other .btn a {
    width: 100%;
  }

  #mfp #content-print .btn a,
  #mfp #content-print .btn.gaibu a,
  #mfp #content-copy .btn.gaibu a {
    font-size: clamp(0.8rem, 1.2vw, 0.88rem);
  }


}