@charset "UTF-8";
/* ==========================================================================
   ページ　コンテンツ内
   ========================================================================== */
/* Components
   ----------------------------------------------------------------- */
/**
 * パンくず
 * ex. <div class="p-breadcrumb">
      　<p class="l-inner"><a class="p-breadcrumb__item"…
 */
.p-breadcrumb {
  font-size: 1.6rem;
  padding: 0.7em;
  text-align: center;
}
.p-breadcrumb__item {
  text-decoration: none;
  display: inline-block;
}
.p-breadcrumb__item a:hover {
  text-decoration: underline;
}
.p-breadcrumb__item:not(:last-child)::after {
  content: url(../img/common/icon-arrow_02.svg);
  padding: 0 0.5em;
}
.base-color__black .p-breadcrumb__item:not(:last-child)::after, .base-color__blue .p-breadcrumb__item:not(:last-child)::after {
  content: url(../img/common/icon-arrow_02--white.svg);
}
@media screen and (max-width: 768px) {
  .p-breadcrumb {
    font-size: 1.2rem;
    padding: 0.7em 0.1em;
    text-align: left;
  }
}
/**
 * リンクボタン
 * ex. <p><span class="btn-01">開館日カレンダー</span></p>
 */
.btn-01 {
  font-family: "BIZ UDPMincho", serif;
  font-size: 1.6rem;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
  padding: 5px 2em;
  width: 14em;
  border-radius: 2em;
  border: 1px solid #707070;
  color: var(--txt-color__black);
  background: #fff url("../img/common/icon-link_01.svg") no-repeat center right 10px/1em;
  background-color: var(--bg-color__white);
  text-decoration: none;
  text-align: center;
  font-weight: 300;
  line-height: 1.3;
}
.btn-01--anchor {
  background: url("../img/common/icon-link_01_down.svg") no-repeat center right 10px/1em;
}
.btn-01--anchor:not(.btn-01--huge) {
  background-size: 0.7em !important;
}
body.base-color__black .btn-01, body.base-color__blue .btn-01 {
  background-image: url("../img/common/icon-link_01_white.svg")
}
body.base-color__black .btn-01--anchor, body.base-color__blue .btn-01--anchor {
  background-image: url("../img/common/icon-link_01_down_white.svg")
}
.btn-01 a {
  text-decoration: none;
  color: var(--txt-color__black);
}
.btn-01:hover {
  background: var(--bg-color__gray-allround) url("../img/common/icon-link_01.svg") no-repeat center right 7px/1em;
  transition: 0.2s;
}
.btn-01--anchor:hover {
  background: var(--bg-color__gray-allround) url("../img/common/icon-link_01_down.svg") no-repeat top 1.2em right 10px/1em;
}
/*<p class="btn-01">等の中に入るとき、親の大きさ一杯に*/
a.btn-01--inner {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
/*大きいボタン*/
.btn-01--huge {
  min-width: calc(33.3% - 1.05rem);
  padding: calc(1em - 0.2rem) 2em;
  padding-left: 1.5em;
  /* フォントサイズが大きいときは割合を減らす */
}
/*幅は合わす*/
.btn-01--widthauto {
  width: auto;
  width-width: 14em;
}
/*見出しの中に入る場合
 (floatさせるので見出し本文より前に置くこと)*/
.btn-01--within {
  float: right;
}
/*ページTOPへ*/
.btn-01--top {
  margin-right: 0;
  background: none;
  background-image: none !important;
  position: relative;
}
.btn-01--top img {
  width: 0.8em;
  transform: rotate(-90deg);
  position: absolute;
  top: 0.6em;
  right: 0.5em;
}
/*複数ボタン
　ex. <div class="btns"><a class="btn-01 */
.btns {
  display: flex;
  justify-content: center;
  gap: 1em;
  flex-wrap: wrap;
}
.btns .btn-01 {
  margin: inherit;
}
@media screen and (max-width: 768px) {
  .btns {
    flex-direction: column;
  }
  .btns .btn-01 {
    margin: auto;
    width: 90%;
  }
  .btn-01--huge {
    min-width: 90%;
  }
}
/**
 * 囲みボックス
 */
.c-box {
  padding: 2.8em;
  border: 3px solid var(--bg-color__light-gray);
}
.c-box--takeshima {
    border-color:  var(--color__takeshima);
}
.c-box2 {
  padding: 2.8em;
  background: #e7f5f9;
  border-radius: 1em;
}
.c-box3 {
  padding: 2.8em;
}
.c-box4 {
  padding: 2.8em;
  border: 1px solid #707070;
  background: var(--bg-color__white);
}
.c-box5 {
  padding: 2.8em;
  background: var(--bg-color__gray-allround);
  border: var(--bg-color__gray-allround) 1px solid;
}
.c-box6 {
  padding: 2.8em;
  border: 0.5em solid #00b3f6;
  border-radius: 2em;
}
@media screen and (max-width: 768px) {
  .c-box {
    padding: 1.2em; /*要注意(for/claims/)*/
  }
  .c-box3, .c-box4,.c-box6 {
    padding: 1.2em; /*要注意*/
  }
  .c-box5 {
    padding: 2.0em;
  }
}
/*下向き三角。基本はBOXにつくと思うので…*/
.with-arrow {
  position: relative;
  margin-bottom: 2.6em;
}
.with-arrow::after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  bottom: -2.6em;
  left: 50%;
  transform: translateX(-50%);
  border-left: 3em solid transparent;
  border-right: 3em solid transparent;
  border-top: #888 3em solid;
  border-top-color: inherit;
}
/**
 * contents内にある要素のベーシックスタイル
 */
.contents {
  padding-bottom: 5em;
  padding-right: 1em;
  padding-left: 1em;
  border-bottom: #BEBEBE 1px solid;
  min-height: 62em;
  padding-top: 267px; /*JSでやってるが、「ズレ」対策にこちらでも設定*/
  transition: padding-top 0.2s ease; /* 0.2秒でスムーズに変化 */
}
.contents a[target="_blank"]:after {
  content: "";
  height: 1em;
  width: 1.3em;
  width: 3em; /*ボタン内のテキストが多いときなど、これくらい欲しい（https://www.cas.go.jp/jp/ryodo/tenjikan/group_reservations.html）*/
  background: url(../img/common/icon-link-blank.svg) no-repeat center center;
  display: inline-block;
  margin-left: 0.2em;
}
/**
 * .leader ページ冒頭のリード文。
 */
.c-leader {
  text-align: center;
  padding: 0 0 3em;
  font-size: 1.8rem;
}
@media screen and (max-width: 768px) {
  .c-leader {
    font-size: 1.6rem;
    text-align: left;
  }
  .c-leader .u-no-wrap {
    display: inline !important;
  }
}
/**
 * リスト
　　ex. <dl class="c-list">, <ul class="c-list">
 */
.c-list {
  margin-bottom: 1em;
}
.c-list dt {
  margin: 1em 0 0.25em;
  font-size: 1.8rem;
  font-weight: 700;
}
.c-list li, .c-list dd {
  margin-bottom: 0.3em;
  margin-left: 1em;
  text-indent: -1em;
}
.c-list li::before, .c-list dd::before {
  content: "・ ";
}
/**
 * 埋め込み地図
 */
.c-map {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #9C9C9C;
}
.c-map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/**
 * テーブル型リスト
ex.<dl class="c-table">
 */
.c-table {
  width: 100%;
  overflow: hidden;
  border-bottom: 1px solid #ccc;
  border-top: none;
  background: var(--bg-color__light-gray);
  margin-bottom: 40px;
}
.c-table dt {
  width: 20%;
  float: left;
  margin: 0;
  padding: 5px 10px;
  border-top: 1px solid #ccc;
  box-sizing: border-box;
}
.c-table dd {
  margin: 0 0 0 20%;
  padding: 5px 10px;
  border-left: 1px solid #ccc;
  border-top: 1px solid #ccc;
  background: var(--bg-color__white);
}
.c-table dd:after {
  display: block;
  content: "";
  clear: both;
}
@media screen and (max-width: 768px) {
  .c-table dt {
    width: 100%;
    float: none;
  }
  .c-table dd {
    margin-left: auto;
    border-left: none;
  }
}
/**
 * おしらせ一覧
 * ex. <dl class="c-news-list">
 */
.c-news-list {
  line-height: 1.8;
}
.c-news-list dt {
  padding-top: 1em;
  font-size: 90%;
  margin-bottom: 0.5em;
}
.c-news-list dd {
  border-bottom: #D4D4D4 1px solid;
  padding-bottom: 1em;
}
/**
 * カレンダーリスト.p-calendar-list
 * ex. <div class="p-calendar-list"> 
        <!--10月-->
        <div class="c-calendar">…
 */
.p-calendar-list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.p-calendar-list .c-calendar {
  width: 31%;
  padding-top: 4em;
}
@media screen and (max-width: 860px) {
  .p-calendar-list .c-calendar {
    width: 48%;
  }
}
@media screen and (max-width: 600px) {
  .p-calendar-list .c-calendar {
    width: 98%;
    margin: auto;
  }
}
/**
 * ひとつきカレンダー.c-calendar
 */
.c-calendar ul {
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid #cccac8;
  border-left: 1px solid #cccac8;
}
.c-calendar__title {
  font-family: "BIZ UDPMincho", serif;
  letter-spacing: 0;
  text-align: center;
}
.c-calendar__year {
  font-size: 1.6rem;
  padding-right: 0.5em;
  font-weight: 400;
}
.c-calendar__month {
  font-size: 2.2rem;
}
.c-calendar__day {
  background: var(--bg-color__light-gray2);
}
.c-calendar__day li {
  border-bottom: none !important;
}
.c-calendar__date {
  border-top: none;
}
.c-calendar li {
  width: 14.28%;
  padding: 3% 8px;
  border-bottom: 1px solid #cccac8;
  border-right: 1px solid #cccac8;
  text-align: center;
  line-height: 1.5;
  /*font-family: "BIZ UDPGothic", sans-serif;*/
  font-weight: 700;
  letter-spacing: 0;
}
.c-calendar__off {
  background: var(--bg-color__light-gray3);
}
.c-calendar .sat {
  color: #228ada;
}
.c-calendar .sun, .c-calendar .holiday {
  color: #d40f05;
}
/**
 * 埋め込み動画.c-movie
 * ex. <div class="c-movie">
 */
.movie-list {
  /*display: flex; 縦積みに変更*/
  justify-content: space-between;
  flex-wrap: wrap;
}
.movie-list__item {
  width: 588px;
  width: 47%; /*boxに入れるとき等は％の方がいいか*/
  width: 70%; /*縦積みに変更に伴う大型化*/
  margin: auto;
}
.c-movie {
  width: 100%;
  margin: auto;
  aspect-ratio: 16 / 9;
  background: var(--bg-color__light-gray3);
}
.c-movie iframe {
  width: 100%;
  height: 100%;
  border: #C4C4C4 1px solid;
}
@media screen and (max-width: 700px) {
  .movie-list__item {
    width: 90%;
  }
}
/**
 * お知らせ個別
 * ex.
 */
p.news-date {
  margin-bottom: 2em !important;
  background: url("../img/common/icon-clock.svg") no-repeat top left/1.6em;
  padding-left: 2em;
}
/**
 * 画像ボックス
 * class名つけた方がいい ここは整理しなくてはいけません！
 * ex.
 */
.flex-box {
  display: flex;
  justify-content: space-between;
  /*align-items: center; 「北方領土・竹島・尖閣諸島（相手国・地域の主張などのQ＆A）」では上揃えがベター*/
  gap: 1em;
  /* align-items: flex-start; 子の高さが揃わなくなる（＠effort.htmlの〇×セクション） */
}
@media screen and (max-width: 768px) {
  .flex-box--sp-colmn {
    flex-direction: column;
  }
}
/*.flex-box .flex-box__item, .flex-box img {
  min-width: 0;
}*/
.flex-box .flex-box__item {
  display: flex;
  flex-direction: column;
  align-items: center; /* 中央寄せを維持 */
}
.flex-box .flex-box__img {
  flex-grow: 1;
  height: 100%;
}
figcaption {
  font-family: "BIZ UDPGothic", sans-serif;
  font-size: 1.4rem;
  line-height: 1.4;
  margin-top: 0.7em;
  width: 100%;
  text-align: left;
}
.figcaption__title {
  font-size: 110%;
  font-weight: 700;
  display: block;
    line-height: 1.3;
    margin-bottom: 0.3em;
}
/**
 * 幅100画像＆テキストボックス
 * class名つけた方がいい ここは整理しなくてはいけません！
 * ex.
 */
.media-box {
  display: flex;
  justify-content: space-between;
  gap: 2em;
  align-items: center;
}
.media-box__image {
  width: calc(50% - 2em);
  background: #DBDBDB;
  padding: 1em;
  text-align: center;
}
.media-box__image img {
  max-height: 320px;
}
.media-box__text {
  width: 50%;
}
/*画像が幅広（100％）の場合*/
.media-box--img100 {
  flex-direction: column;
  gap: 0.5em;
}
.media-box--img100 .media-box__image, .media-box--img100 .media-box__text {
  width: 100%;
}
.media-box--img100 .media-box__image img {
  max-height: none;
}
/**/
.float-right {
  float: right;
  padding-left: 2em;
}
.float-left {
  float: left;
  padding-right: 2em;
}
@media screen and (max-width: 768px) {
  .media-box {
    flex-direction: column;
    gap: 1em;
  }
  .media-box__image {
    width: 100%;
  }
  .media-box__image img {
    max-height: 260px; /*noneでもいい？*/
  }
  .media-box__text {
    width: 100%;
  }
}
/**
 * イベント一覧
 * ex. <dl class="c-news-list">
 */
.c-event-list {
  line-height: 1.8;
}
.c-event-list__item__inner {
  border-top: #D4D4D4 1px solid;
  padding-top: 1em;
  padding-bottom: 1em;
  padding-right: 2em;
  display: flex;
  align-items: center;
  gap: 1em;
  background: url("../img/common/icon-link_white_01.svg") no-repeat right 0.25em center/1.4em;
}
.c-event-list__item:first-child .c-event-list__item__inner {
  border-top: none;
}
.c-event-list__data {
  flex: 1;
}
.c-event-list__date {
  display: block;
}
.c-event-list__image {
  width: 100px;
  border: 1px solid #ccc;
}
/**
 * イベントページのポスター画像
 * ex. <figure class="c-poster"><img…
 */
.c-poster {
  display: block;
  width: 700px;
  margin: auto;
  border: #C4C4C4 1px solid;
}
/**
 * イベントボックス
 * ※過去の企画展<個別ページ>　だが、そもそもイベントこれにしてはどうでしょう
 * ex.
 */
.c-eventbox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-items: self-start;
  gap: 4em;
}
.c-eventbox__image {
  width: 44%;
  border: #C4C4C4 1px solid;
}
.c-eventbox__data {
  flex: 1;
}
.c-eventbox__files-list__item {
  display: flex;
  align-items: center;
  gap: 0;
  border-bottom: #D4D4D4 1px solid;
  padding-bottom: 1em;
  margin-top: 1em;
}
.c-eventbox__files-list {
  border-top: #D4D4D4 1px solid;
}
.c-eventbox__files-tmb {
  width: 90px;
  margin-right: 1.5em;
  border: #C4C4C4 1px solid;
  background-image: linear-gradient(180deg, rgba(217, 217, 217, 1) 44%, rgba(187, 187, 187, 1) 88%);
}
@media screen and (max-width: 1000px) {
  .c-eventbox {
    flex-direction: column;
    gap: 2em;
  }
  .c-eventbox__image {
    width: 440px;
  }
}
/**
 * 画像群（複数（or1枚？））
 * ex. <figure class="c-photos"><img …
 */
.c-photos {
  display: flex;
  gap: 1em;
  justify-content: center;
  flex-wrap: wrap;
}
.c-photos__item {
  width: calc((100% - 1em) / 2);
  height: auto;
  flex-shrink: 0;
}
.c-photos__item img {
  width: 100%;
}
@media screen and (max-width: 700px) {
  .c-photos__item {
    width: 100%;
  }
}
/**
 * 画像キャプション
 * ex. <span class="c-caption">
 */
.c-caption {
  display: block;
  width: 100%;
  text-align: center;
}
/**
 * キャラクター吹き出しボックス
 */
.c-fukidashibox {
  display: block;
  padding: 3em 2em;
  margin: 2em 8.5%;
  position: relative;
  background-image: url("../img/exhibition/hoppo/ptn-fukidashi_01.png"), url("../img/exhibition/hoppo/ptn-fukidashi_02.png");
  background-repeat: repeat-x;
  background-size: 80px;
  background-position: top left, bottom left;
  background-color: #F1F8FC;
  text-align: center;
}
.c-fukidashibox p {
  text-indent: 0 !important;
  font-weight: 700;
  color: var(--color__hoppou);
}
.c-fukidashibox__character {
  position: absolute;
  width: 100px;
  bottom: -20px;
  right: -70px;
}
.c-fukidashibox__character--size-2 {
  width: 140px;
}
.c-fukidashibox--takeshima {
  background-image: url("../img/exhibition/takeshima/ptn-fukidashi_01.png"), url("../img/exhibition/takeshima/ptn-fukidashi_02.png");
  background-color: #f1fcfb;
}
.c-fukidashibox--takeshima p {
  color: var(--color__takeshima);
}
.c-fukidashibox--senkaku {
  background-image: url("../img/exhibition/senkaku/ptn-fukidashi_01.png"), url("../img/exhibition/senkaku/ptn-fukidashi_02.png");
  background-color: #f6f5fb;
}
.c-fukidashibox--senkaku p {
  color: var(--color__senkaku);
}
.c-fukidashibox--seifu {
  background-image: url("../img/exhibition/seifu/ptn-fukidashi_01.png"), url("../img/exhibition/seifu/ptn-fukidashi_02.png");
  background-color: #EEF2F4;
}
.c-fukidashibox--seifu p {
  color: var(--color__seifu);
}
body.base-color__black .c-fukidashibox--takeshima, body.base-color__blue .c-fukidashibox--takeshima, body.base-color__black .c-fukidashibox, body.base-color__blue .c-fukidashibox {
  background-image: url("../img/exhibition/ptn-fukidashi_01.png"), url("../img/exhibition/ptn-fukidashi_02.png");
  background-color: transparent;
}
body.base-color__yellow .c-fukidashibox, body.base-color__yellow .c-fukidashibox {
  background-image: url("../img/exhibition/ptn-fukidashi_01_b.png"), url("../img/exhibition/ptn-fukidashi_02_b.png");
  background-color: transparent;
}
@media screen and (max-width: 768px) {
  .c-fukidashibox {
    padding: 1.5em 1em;
    margin: 2em 1em;
    text-align: left;
  }
  .c-fukidashibox__character {
    width: 74px;
    bottom: -10px;
    right: -35px;
  }
}
@media screen and (max-width: 500px) {
  .c-fukidashibox {
    padding: 1.5em 1em;
    margin: 2em 0em;
  }
}
/**
 * PDFや動画へのカード型リンク（ex.学校関係の方へ）
 * ex. <div class="c-media-links">
        <div class="c-media-links__item">
          <figure class="c-media-links__tmb"><img>
          <span class="c-media-links__txt u-pdflink">北方領土・竹島・尖閣諸島　紹介冊子</span> 
           <a class="c-media-links__url" href="https://www.cas.go.jp/jp/ryodo/img/data/pamph-hoppou.pdf">
 */
.c-media-links {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0.8em;
  flex-wrap: wrap;
}
.c-media-links__item {
  min-width: 20%;
  border-radius: 0.5em;
  border: #b3b3b3 1px solid;
  box-shadow: 1px 4px 0px 0 #aeaeae;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  background: #f5f5f5;
  padding: 0.8em;
}
.c-media-links__item:hover {
  background: #e8e8e8;
  transform: translate(0px, 2px);
  box-shadow: 1px 2px 0px 0 #aeaeae;
  transition: 0.2s;
}
.c-media-links__tmb {
  width: auto;
  height: 136px;
}
.c-media-links__tmb img {
  width: auto;
  height: 100%;
  margin: 0 0.2em;
  border: #cfcfcf 1px solid;
  box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.04);
}
.c-media-links__txt {
  color: #095FAB;
  text-decoration: underline;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.2em;
  text-align: center;
  line-height: 1.3;
}
.c-media-links__url {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.contents a.c-media-links__url[target="_blank"]:after {
  display: block;
  margin-left: auto;
  margin-right: -0.4em;
  margin-top: 0.4em;
}
.c-media-links__item .u-pdflink::before {
  margin-right: 0;
}
/**
 * 複数画像ギャラリー　.c-gallery（ex.北方領土コーナーサブパネル）
 * ex. <div class="c-gallery">
            <figure class="c-gallery__item"><img .../>
              <figcaption><span class="figcaption__title">色丹島....</span>...</figcaption> ......
 */
.c-gallery {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 1.1em;
  flex-wrap: wrap;
}
.c-gallery__item {
  width: 32%;
}
.c-gallery__item {
  display: flex;
  flex-direction: column;
}
.c-gallery--align-height .c-gallery__item img {/*高さをまあまあ揃えたい（北方コンブ縦長のみ？）⇒竹島アワビ表で不具合*/
  aspect-ratio: 3.5 / 2.6/*3.5 / 3 だとキャプションの上に隙間ができる（北方）*/; 
  object-fit: contain; 
}

@media screen and (max-width: 1168px) {
  
.c-gallery__item {
  width: 48%;
}
}