/*
  オープニング アニメーション
*/
#opening {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background: url(../image/bg/ultramarine.jpg) left top/100% auto;
  overflow: hidden;
  z-index:10000;
  animation: 1s fadeout-title linear 2s;
  animation-fill-mode: forwards;
}

#opening div {
  color:white;
  width: 200%;
  background-image: url(../image/bg/sky.jpg);
  background-size: contain;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  position: absolute;
  top: 40%;
  margin-top: -.5em;
  font-size: 18vw;
  font-family: san-serif;
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
  transform: scale(0.5, 1) translate(-50%, 0);
  animation: 3s zoom-title ease-out;
  animation-fill-mode: forwards;
}

@keyframes zoom-title {
  from {
    font-size: 18vw;
    letter-spacing: -0.1em;
  }
  to {
    font-size: 20vw;
    letter-spacing: .3em;
  }
}

@keyframes fadeout-title {
  from {
    opacity: 1;
    display: block;
  }
  to {
    opacity: 0;
    display: none;
  }
}

/*
  ヘッダー ＆ メニュー
*/
header {
  position: relative;
  width: 100%;
  overflow: hidden;
}

header img {
  width: 100%;
  max-width: 100%;
  height: auto;
}

header img:nth-child(2) {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  animation: 20s crossfade linear infinite;
}

@keyframes crossfade {
  0%   { opacity: 0; }
  50%  { opacity: 1; }
  100% { opacity: 0; }
}

/*
  コンテンツ 共通
*/
section {
  margin-block-start: 2rem;
}

.section_title {
  text-align: center;
  letter-spacing: 0.125em;
  font-weight: bold;
  text-shadow: 3px 3px 2px rgb(255, 255, 255);
  padding: 0.25em 0;
  margin: 0 auto;
  margin-block-end: 1.5rem !important;
  border-left: 12px solid khaki;
  border-right: 12px solid khaki;
  background-image: url(../image/bg/wave_green.png);
  box-shadow: 10px 5px 5px rgb(0, 0, 0, 0.3);;
  overflow: hidden;
  white-space: nowrap;
}

.section_title2 {
  text-align: center;
  letter-spacing: 0.125em;
  font-weight: bold;
  text-shadow: 3px 3px 2px rgb(255, 255, 255);
  padding: 0.25em 0;
  margin: 0 auto;
  margin-block-end: 1.5rem !important;
  border-left: 12px solid maroon;
  border-right: 12px solid maroon;
  background-image: url(../image/bg/momiji.png);
  box-shadow: 10px 5px 5px rgb(0, 0, 0, 0.3);;
  overflow: hidden;
  white-space: nowrap;
}

/* 長体 */
.lb-1 {
  display: inline-block;
  transform: scale(0.9, 1.0);
}

.lb-2 {
  display: inline-block;
  transform: scale(0.8, 1.0);
}

/* ページトップ */
.nav-fix-pos-pagetop {
  position: fixed;
  width: 4rem;
  height: 4rem;
  right: 2rem;
  bottom: 2rem;
  border: solid 3px #777;
  border-radius: 2em;
  background-color: #fff;
  box-shadow: inset 3px 3px rgba(112,112,112, 0.3), 3px 3px rgba(112,112,112, 0.3);
  z-index: 300;
}

.nav-fix-pos-pagetop > a {
  display: block;
  width: 100%;
  height:100%;
  text-decoration: none;
  text-align: center;
  line-height: 1rem;
  padding-top: 1rem;
  color:#444;
  font-weight: bold;
}

/* 著作表示 */
.copyright {
  text-align: center;
  font-size: smaller;
  color: #777;
}

/* 表彰式カウントダウン */
.countdown {
  background: url(../image/countdown.png) no-repeat 0 2em;
  height: calc(2em + 200px);
}

.days {
  margin-block-start: 2rem;
  margin-inline-start: 0.5rem;
}

.days > strong {
  font-size: 4rem;
  font-style: italic;
  letter-spacing: -0.06em;
  display: inline-block;
  transform: scalex(0.9);
}

.subtitle {
  font-weight: bold;
  letter-spacing: 0.25em;
  padding-inline-start: 1rem;
  background: linear-gradient(transparent 40%, #a2d8ee 60%);
  text-shadow: 2px 2px 0px rgb(255, 255, 255);
  width: 7em;
}

/*
  * トップページ
*/
/* 西区展ギャラリー */
.swiper {
  position: relative;
  width: 100%;
  aspect-ratio: 1706 / 960;

  overflow: hidden;
}

.swiper-slide {
  width: 100%;
  aspect-ratio: 1706 / 960;
  overflow: hidden;
}

.swiper-slide img {
  width: 100%;
  height: auto;
  aspect-ratio: 1706 / 960;
}

.swiper-slide .text {
  min-width: 40%;
  width: 40%;
  max-width: 600px;
  padding: 1.5em;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.5);
  overflow: hidden;
  position: absolute;
  top: 40%;
  left: 10%;
}

.swiper-slide .title {
  font-weight: bolder;
  font-size: 1.5rem;
  margin-top: 0;
}

/* お知らせ */
.headlines {
  background: url(../image/bg/cosmos.png) no-repeat right bottom;
  min-height: 8em;
}

.headlines dl {
  line-height: 1.5em;
}

/* 西区展の紹介 */
.slide_frame {
  border-radius: 8px;
}

.stationery {
  margin-inline-start: 1rem;
  line-height: 2.5em;
  padding-inline-start: 1.5em;
  padding-inline-end: 1.5em;
  text-indent: 1em;
  background-image: linear-gradient(#ccc 0%, transparent 1%, transparent 97%, #ccc 100%), url(../image/bg/morning.jpg);
  background-repeat: repeat-y, no-repeat;
  background-size: 100% 2.5em, auto auto;
  background-position: 0 0,right bottom;
}

.stationery2 {
  margin-inline-start: 1rem;
  line-height: 2.5em;
  padding-inline-start: 1.5em;
  padding-inline-end: 1.5em;
  text-indent: 1em;
  background-image: linear-gradient(#ccc 0%, transparent 1%, transparent 97%, #ccc 100%), url(../image/bg/maron_pie.png);
  background-repeat: repeat-y, no-repeat;
  background-size: 100% 2.5em, auto auto;
  background-position: 0 0,right bottom;
}

.stationery .lead {
  text-indent: 0;
  font-weight: bold;
  letter-spacing: 0.125em;
}

/* 募集要項 */
.entry_part {
  background: url(../image/bg/shippou_red.jpg) repeat-y right top;
}

.entry_part > p {
  padding-inline-start: 1em;
}

.subtitle-paper {
  font-weight: bold;
  letter-spacing: 0.125em;
  padding-inline-start: 1rem;
  padding-inline-end: 1rem;
  background: linear-gradient(transparent 40%, #a2d8ee 60%);
  text-shadow: 2px 2px 0px rgb(255, 255, 255);
  width: 8em;
}

h4.entry {
	font-size: 1.25rem;
	font-weight: bold;
	letter-spacing: 0.125em;
	text-indent: 1em;
	position: relative;
	padding: 0.5em 0;
  overflow: hidden;
  white-space: nowrap;
}

h4.entry:after {
	content: "";
	display: block;
	height: 4px;
	background: linear-gradient(to right, rgb(233, 71, 9), transparent);
}

#requirements ol > li {
  margin-block-end: 1em
}

#requirements ul {
  list-style: none;
  padding-inline-start: 1em;
}

.award_part {
  background: url(../image/bg/shippou_green.jpg) repeat-y right top;
}

.award_part > p, .award_part > dl, .award_part dl > dd {
  padding-inline-start: 1em;
}

h4.ribbon {
  position: relative;
  padding: 0.5em;
  background: linear-gradient(to right,  #a6d3c8, transparent);
  margin-block-end: 1.5rem;
  letter-spacing: 0.25em;
}

h4.ribbon::before {
  position: absolute;
  content: '';
  top: 100%;
  left: 0;
  border: none;
  border-bottom: solid 15px transparent;
  border-right: solid 20px rgb(149, 158, 155);
}

h4.award {
  position: relative;
  padding: 1.5rem 2rem;
  -webkit-box-shadow: 0 2px 14px rgba(0, 0, 0, .1);
  box-shadow: 0 2px 14px rgba(0, 0, 0, .1);
  letter-spacing: 0.25em;
}

h4.award:before,
h4.award:after {
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  content: '';
  background-image: -webkit-linear-gradient(315deg, #704308 0%, #ffce08 40%, #e1ce08 60%, #704308 100%);
  background-image: linear-gradient(135deg, #704308 0%, #ffce08 40%, #e1ce08 60%, #704308 100%);
}

h4.award:before {
  top: 0;
}

h4.award:after {
  bottom: 0;
}

.award_bg  {
  background: url(../image/bg/award.png) no-repeat right bottom;
}

.award_bg table {
  margin-inline-start: 1em;
  margin-block-end: 1.5rem;
  width: 100%;
}

.award_bg table tr{
  height: 2.5rem;
}

.award_bg table tr td:nth-child(1) {
  width: 2.5rem;
}

.award_bg table tr td:nth-child(2) {
  text-align:justify;
  text-align-last:justify;
  width: 5rem;
}

.award_bg table tr td:nth-child(3) {
  padding-inline-start: 2rem;
}

.award_bg td.same::before {
  content: '';
  padding-inline-start: 4rem;
}

.exhibition dl, dd {
  padding-inline-start: 1em;
}

.exhibition th {
  width: 13rem;
}

.exhibition th:nth-child(1) {
  padding-block-end: 1rem;
}

.exhibition-note {
  background-color: rgba(255, 255, 255, 0.8);
  border: solid 10px black;
  padding: 1rem;
  margin-block-start: 0.5rem;
  border-image: repeating-linear-gradient(45deg, rgb(255, 240, 103), rgb(30, 30, 30), rgb(255, 240, 103) 10px) 10;
}
.exhibition iframe {
  width: 100%;
  height: 30rem;
}

/* 西区展のごあいさつ */
.decorative-top {
  background: url(../image/bg/greet_top.png) no-repeat left top;
  margin-block-start: -2rem;
}

.decorative-gap {
  height: 2rem;
}

.decorative-bottom {
  background: url(../image/bg/maron_pie.png) no-repeat right bottom;
}

.stationery2 p {
  font-size: larger;
  margin-block-end: 0;
}

/* アクセス */
.subtitle2 {
  font-weight: bold;
  font-size: larger;
  letter-spacing: 0.125em;
  padding-inline-start: 1rem;
  background: linear-gradient(transparent 40%, #a2d8ee 60%);
  text-shadow: 2px 2px 0px rgb(255, 255, 255);
  width: 11em;
}

.access iframe {
  width: 100%;
  height: 30rem;
}

h4.parking {
  position: relative;
  background: #dfefff;
  box-shadow: 0px 0px 0px 5px #dfefff;
  border: dashed 2px white;
  padding: 0.2em 0.5em;
  color: #454545;
}

h4.parking:after {
  position: absolute;
  content: '';
  left: -7px;
  top: -7px;
  border-width: 0 0 15px 15px;
  border-style: solid;
  border-color: #fff #fff #a8d4ff;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
}

/* 入賞者速報 */
.award_links span {
  display: inline-block;
  width: 4em;
  text-align:justify;
  text-align-last:justify;
  text-decoration: none;
}

.winners {
  background: url(../image/bg/report_bg.jpg);
}

.winners h2 {
  text-align: center;
  background: url(../image/bg/award_bg.png);
  position: sticky;
  top: 60px;
  height: 2.5em;
  padding-block-start: 0.5em;
  letter-spacing: 0.25em;
  font-weight: bold;
  text-shadow: 2px 2px 1px white, 4px 4px 1px white;
}

.award_list {
  font-size: larger;
}

.award_list div {
  min-width: 16em;
}

.award_list span:nth-child(1), .award_list span:nth-child(2) {
  display: inline-block;
  width: 3.5em;
  text-align:justify;
  text-align-last:justify;
  margin-right: 1.17em;
}

/* 授賞式の出欠確認 */
.greeting {
  text-align:justify;
}

/* ギャラリー関連 */
.work_name {
  text-align: center;
  word-break:keep-all
}

.work_download {
  text-align: right;
  font-size: smaller;
}

.frame_work > div:first-child {
  border: 3px inset #aaa;
}

.frame_work img {
  border-radius: 0;
}

.frame_work .card-body {
  background-color: rgba(255, 255, 255, 1);
}

.texture_invitation {
  background: rgb(109,81,88);
  background: linear-gradient(135deg, rgb(153,117,126) 0%, rgb(109,81,88) 100%);
}

.texture_nishikucho {
  background: rgb(73,55,89);
  background: linear-gradient(135deg, rgb(111,84,136) 0%, rgb(73,55,89) 100%);
}

.texture_taisho {
  background: rgb(196,163,191);
  background: linear-gradient(135deg, rgb(224,209,223) 0%, rgb(196,163,191) 100%);
}

.texture_juntaisho {
  background: rgb(196,163,191);
  background: linear-gradient(135deg, rgb(224,209,223) 0%, rgb(196,163,191) 100%);
}

.texture_kaicho {
  background: rgb(194,0,36);
  background: linear-gradient(135deg, rgb(255,15,60) 0%, rgb(194,0,36) 100%);
}

.texture_rijicho {
  background: rgb(223,113,99);
  background: linear-gradient(135deg, rgb(236,170,162) 0%, rgb(223,113,99) 100%);
}

.texture_renmei {
  background: rgb(0,64,37);
  background: linear-gradient(135deg, rgb(0,143,83) 0%, rgb(0,64,37) 100%);
}

.texture_shorei {
  background: rgb(155,207,151);
  background: linear-gradient(135deg, rgb(205,231,203) 0%, rgb(155,207,151) 100%);
}

.texture_kaiseido {
  background: rgb(42,64,115);
  background: linear-gradient(135deg, rgb(63,96,172) 0%, rgb(42,64,115) 100%);
}

.texture_otendo {
  background: rgb(132,185,203.);
  background: linear-gradient(135deg, rgb(187,216,226) 0%, rgb(132,185,203) 100%);
}

a.luminous {
  cursor: zoom-in;
}

.lum-lightbox {
  z-index: 2000;
}

.lum-lightbox-inner img.lum-img {
  max-width: 95%;
  max-height: 90vh !important;
}

.lum-lightbox-inner .lum-lightbox-caption {
  line-height: 1.25em;
}

.gallery_header {
  position: sticky;
  top: 10px;
  background-color: #fff;
  z-index: 200;
}

.award_filters span {
  display: inline-block;
  width: 4em;
  text-align:justify;
  text-align-last:justify;
  text-decoration: none;
}

.filter_button {
  font-size: smaller;
}