@charset "UTF-8";

/* =========================================================
　　Flex Layout 1column
========================================================= */
html {
  scroll-behavior: smooth;
}

#content {
  flex-basis: 100%;
}

.piece:not(#siteLogo):not(#pageTop):not(#subject):not(#award):not(#breadCrumbs):not(#pageTitle) {
  padding: 50px;
  border: 4px solid var(--mono-color-3);
}

.piece:not(:last-child) {
  margin-bottom: 20px;
}

@media only screen and (max-width: 959px),
print {
  .piece:not(#siteLogo):not(#pageTop):not(#subject):not(#award):not(#breadCrumbs):not(#pageTitle) {
    padding: 20px;
  }
}

@media only screen and (max-width: 375px) {
  .piece:not(#siteLogo):not(#pageTop):not(#subject):not(#award):not(#breadCrumbs):not(#pageTitle) {
    padding: 20px 10px;
  }
}

/* =========================================================
  link color
========================================================= */
a {
  color: var(--a-color);
}

a:hover {
  color: var(--a-hover-color);
  text-decoration: none;
}

a:visited {
  color: var(--a-visited-color);
}

/* =========================================================
  site layout
========================================================= */
#container {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  max-width: var(--site-width);
  margin: 0 auto;
}

#pageHeader {
  margin-bottom: 20px;
}

#main {
  flex-grow: 1;
}

#wrapper {
  display: flex;
  margin-bottom: 20px;
}

@media only screen and (max-width: 959px),
print {
  #container {
    max-width: 100%;
  }

  #pageHeader {
    display: inline-block;
    margin: 20px 20px 0;
  }

  #main {
    margin: 0;
    padding: 20px;
  }

  #wrapper {
    flex-wrap: wrap;
    margin-bottom: 0;
  }

  #pageFooter {
    margin: 0 20px 20px;
  }
}

@media screen and (max-width: 375px) {
  #pageHeader {
    margin: 10px 10px 0;
  }

  #main {
    padding: 20px 10px;
  }

  #pageFooter {
    margin: 0 10px 10px;
  }
}

/* =========================================================
  Piece
========================================================= */
/* pageTop
----------------------------------------------- */
#pageTop {
  position: fixed;
  right: 10px;
  bottom: 10px;
  width: 55px;
  height: 55px;
  overflow: hidden;
  transition: all 0.2s;
  z-index: 999;
}

@media only screen and (max-width: 959px),
print {
  #pageTop {
    display: none;
  }
}

/* site-logo
----------------------------------------------- */
#siteLogo {
  position: relative;
  height: 564px;
  border: 4px solid var(--mono-color-3);
  background: var(--main-color-1) url("./images/header-id2025.webp") no-repeat center top / auto 100%;
}

#siteLogo h1 {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

#siteLogo .period {
  position: absolute;
  left: calc(50% - 12rem);
  bottom: 80px;
}

#siteLogo .period h2 {
  margin: 0;
}

#siteLogo .period .date {
  line-height: 1;
  font-size: 1.5rem;
  font-weight: bold;
}

#siteLogo .period .date .num {
  font-size: 2rem;
}

#siteLogo .period .arrival {
  font-size: 1.15rem;
  font-weight: bold;
  text-align: right;
}

#siteLogo .note {
  margin: 20px 0;
  text-align: center;
}

#siteLogo .note p {
  display: inline-block;
  padding: 20px;
  border: 4px solid var(--mono-color-3);
  border-radius: 15px;
  background-color: var(--mono-color-5);
  color: #ee0000;
}

#siteLogo .about {
  padding-top: 10px;
}

#siteLogo .about p {
  margin-bottom: 1em;
}

#siteLogo .closed {
  color: #ee0000;
  font-size: 1.5rem;
  font-weight: bold;
}

@media only screen and (min-width: 960px),
print {
  #siteLogo .closed {
    margin-left: 0.25em;
  }
}

@media only screen and (max-width: 959px) {
  #siteLogo {
    height: auto;
    background-size: contain;
  }

  #siteLogo .period {
    position: static;
    padding: 180px 0 1.5em;
  }

  #siteLogo .period h2 {
    margin: 0 5px 0 20px;
  }

  #siteLogo .period .date>span {
    display: inline-block;
  }

  #siteLogo .period .arrival {
    text-align: center;
  }
}

@media only screen and (max-width: 559px) {
  #siteLogo .period .date {
    display: block;
    width: 11em;
    margin: 0 auto;
  }
}

@media print {
  #siteLogo {
    height: auto;
    background-size: auto 100%;
  }

  #siteLogo .period {
    position: static;
    padding: 250px 0 1.5em;
    text-align: center;
  }

  #siteLogo .period h2 {
    margin: 0 0 0 -10rem;
  }

  #siteLogo .period .date {
    display: block;
    width: 11em;
    margin: 0 auto;
  }

  #siteLogo .period .date>span {
    display: inline-block;
  }

  #siteLogo .period .arrival {
    text-align: center;
  }
}

/* h2
----------------------------------------------- */
.period h2,
.pieceHeader h2,
.pieceBody h2,
#comment h3 {
  display: inline-block;
  line-height: 1;
  margin-bottom: 0.5em;
  padding: 6px 12px;
  border-radius: 15px;
  background-color: var(--mono-color-2);
  color: var(--mono-color-5);
  white-space: nowrap;
}

@media only screen and (max-width: 959px),
print {

  .period h2,
  .pieceHeader h2,
  .pieceBody h2,
  #comment h3 {
    white-space: normal;
  }
}

/* table
----------------------------------------------- */
.cke_editable table,
.body table {
  border-collapse: separate;
  width: 100%;
  border: 1px solid transparent;
}

.cke_editable th,
.cke_editable td,
.body th,
.body td {
  padding: 2px 15px;
  border: 1px solid transparent;
  word-break: break-word;
}

.cke_editable th,
.body th {
  background-color: var(--mono-color-4);
  text-align: center;
  white-space: nowrap;
}

.cke_editable td,
.body td {
  background-color: var(--mono-color-5);
}

@media only screen and (max-width: 959px),
print {

  .cke_editable th,
  .cke_editable td,
  .body th,
  .body td {
    padding: 2px 4px;
  }
}

/* contentArticleDoc
----------------------------------------------- */
#pageTitle {
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
}

.dir-poki-contest-news #pageTitle {
  display: none;
}

#pageTitle h1,
.header h1 {
  margin-bottom: 0.5rem;
  font-size: 1.5rem;
  border-bottom: 2px solid var(--mono-color-3);
}

.publishedAt {
  margin-bottom: 1.5rem;
  text-align: right;
}

.cke_editable table,
.contentGpArticleDoc .body table {
  table-layout: auto;
  border-collapse: collapse;
}

.cke_editable table,
.cke_editable th,
.cke_editable td,
.contentGpArticleDoc .body table,
.contentGpArticleDoc .body th,
.contentGpArticleDoc .body td {
  border: 1px solid var(--mono-color-7);
}

.cke_editable th,
.cke_editable td,
.contentGpArticleDoc .body th,
.contentGpArticleDoc .body td {
  padding: 14px 20px;
  vertical-align: middle;
}

.cke_editable p+h2,
.cke_editable p+h3,
.cke_editable p+h4,
.cke_editable table+h2,
.cke_editable table+h3,
.cke_editable table+h4,
.cke_editable ul+h2,
.cke_editable ul+h3,
.cke_editable ul+h4,
.cke_editable ol+h2,
.cke_editable ol+h3,
.cke_editable ol+h4,
.contentArticleDoc .body p+h2,
.contentGpArticleDoc .body p+h3,
.contentGpArticleDoc .body p+h4,
.contentGpArticleDoc .body table+h2,
.contentGpArticleDoc .body table+h3,
.contentGpArticleDoc .body table+h4,
.contentGpArticleDoc .body ul+h2,
.contentGpArticleDoc .body ul+h3,
.contentGpArticleDoc .body ul+h4,
.contentGpArticleDoc .body ol+h2,
.contentGpArticleDoc .body ol+h3,
.contentGpArticleDoc .body ol+h4 {
  margin-top: 2rem;
}

.cke_editable h2,
.cke_editable h3,
.cke_editable h4,
.cke_editable p,
.contentGpArticleDoc .body h2,
.contentGpArticleDoc .maps h2,
.contentGpArticleDoc .rels h2,
.contentGpArticleDoc .tags h2,
.contentGpArticleDoc .body h3,
.contentGpArticleDoc .maps h3,
.contentGpArticleDoc .body h4,
.contentGpArticleDoc .body p,
#content:not(.artwork) .body p {
  margin-bottom: 1rem;
}

.cke_editable h2,
.contentGpArticleDoc .body h2,
.contentGpArticleDoc .maps h2,
.contentGpArticleDoc .rels h2,
.contentGpArticleDoc .tags h2 {
  padding: 10px 12px;
  border-left: 8px solid var(--main-color-1);
  background-color: var(--main-color-10);
  font-size: 1.25rem;
}

.cke_editable h3,
.contentGpArticleDoc .body h3,
.contentGpArticleDoc .maps h3 {
  border-bottom: 2px solid var(--main-color-1);
  font-size: 1.15rem;
}

.cke_editable h4,
.contentGpArticleDoc .body h4 {
  font-size: 1rem;
}

.cke_editable ol,
.contentGpArticleDoc .body ol {
  list-style-type: decimal;
  margin: 0 0 1em 1em;
}

.cke_editable ul,
.contentGpArticleDoc .body ul {
  margin-bottom: 1em;
}

.back {
  margin-top: 60px;
  text-align: center;
}

.back a {
  display: inline-block;
  line-height: 1;
  padding: 24px 200px;
  border-radius: 30px;
  border: 1px solid transparent;
  background-repeat: no-repeat;
  background-color: var(--mono-color-5);
  color: var(--mono-color-1);
  box-shadow: 0 3px 3px 3px var(--mono-color-6);
  text-align: center;
  text-decoration: none;
  transition: all 0.2s;
}

.back a:hover,
.back a:focus {
  border-color: var(--mono-color-8);
  box-shadow: none;
}

@media only screen and (max-width: 959px),
print {
  .back {
    margin-top: 20px;
  }

  .back a {
    display: block;
    padding: 24px;
  }

  .cke_editable .scroll,
  .body .scroll {
    width: calc(100vw - 105px);
  }

  .cke_editable .scroll::-webkit-scrollbar-track,
  .body .scroll::-webkit-scrollbar-track {
    background: var(--main-color-1);
  }

  .cke_editable .scroll::-webkit-scrollbar-thumb,
  .body .scroll::-webkit-scrollbar-thumb {
    background: var(--main-color-4);
  }
}

@media screen and (max-width:375px) {

  .cke_editable .scroll,
  .body .scroll {
    width: auto;
    white-space: normal;
    overflow: visible;
  }
}

/* news
----------------------------------------------- */
.attributes .separator,
.attributes .unit {
  display: none;
}

/* linkbtn
----------------------------------------------- */
.dlbtn,
.formbtn,
#news .more a {
  display: block;
  line-height: 1;
  background-repeat: no-repeat;
  background-color: var(--mono-color-5);
  color: var(--mono-color-1);
  box-shadow: 0 3px 3px 3px var(--mono-color-6);
  font-size: 1.05rem;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  transition: all 0.2s;
}

.dlbtn {
  padding: 22px 44px;
  border-radius: 30px;
  background-image: url("./images/ic-download.svg");
  background-position: 20px center;
}

.dlbtn:not(:last-child) {
  margin-bottom: 1em;
}

.formbtn {
  margin-bottom: 1.5em;
  padding: 34px;
  border-radius: 42px;
  background-image: url("./images/ic-arrow.svg");
  background-position: 30px center;
}

.formbtn.anchor {
  background-image: url("./images/ic-anchor.svg");
  background-position: 30px 34px;
  background-size: 30px auto;
}

@media screen and (min-width: 960px) {
  .category .formbtn {
    line-height: normal;
    margin-bottom: 0;
    padding: 34px 61px;
  }
}

#news .more {
  margin-top: 55px;
  text-align: center;
}

#news .more a {
  display: inline-block;
  padding: 22px 160px;
  border-radius: 32px;
}

.dlbtn:hover,
.dlbtn:focus,
.formbtn:hover,
.formbtn:focus,
#news .more a:hover,
#news .more a:focus {
  box-shadow: none;
}

#siteLogo .more {
  margin-top: 1em;
}

#siteLogo .formbtn {
  color: #ee0000;
  font-size: 1.5rem;
}

@media only screen and (max-width: 959px),
print {
  .dlbtn {
    padding: 20px 10px 20px 35px;
    background-position: 10px center;
    word-break: auto-phrase;
  }

  .formbtn {
    padding: 20px;
  }

  #siteLogo .formbtn {
    font-size: 1.15rem;
  }

  .formbtn.anchor {
    background-position: 30px 18px;
  }

  /*
  #news .more {
    margin-top: 20px;
  }
*/
  #news .more a {
    display: block;
    padding: 22px;
  }
}

@media only screen and (max-width: 360px) {
  #siteLogo .formbtn {
    background-position: 15px center;
  }
}

/* breadCrumbs
----------------------------------------------- */
#breadCrumbs {
  margin: -15px 0 20px;
}

#breadCrumbs ol,
#breadCrumbs li {
  list-style: none;
}

#breadCrumbs li {
  display: inline-block;
}

#breadCrumbs li:not(:first-child)::before {
  content: ">";
  margin: 0 5px;
}

@media only screen and (max-width: 959px) {
  #breadCrumbs {
    display: none;
  }
}

/* content
----------------------------------------------- */
.piece:not(:last-child) {
  margin-bottom: 20px;
}

/*#content {
  flex-basis: 100%;
}*/

#content.doc,
#content .piece {
  border: 4px solid var(--mono-color-3);
}

#content.doc {
  padding: 100px;
}

.dir-poki-contest-news #content.doc {
  padding: 0;
}

.contentGpArticleDocs,
#content .piece {
  padding: 50px;
}

.contentGpArticleDocs,
.body>.piece:nth-child(4n),
.body>#comment.piece,
#content>.piece:nth-child(4n+1) {
  background-color: var(--main-color-2);
  background-image: url("./images/bg-dots_bottom.png");
  background-position: left bottom;
  background-repeat: repeat-x;
}

.body>.piece:nth-child(4n+1):not(#comment):not(#format),
#content>.piece:nth-child(4n+2) {
  background-color: var(--main-color-3);
  background-image: url("./images/bg-diagonal_line.png");
}

.body>.piece:nth-child(4n+2),
#content>.piece:nth-child(4n+3) {
  background-color: var(--main-color-4);
  background-image: url("./images/bg-diagonal_line.png");
}

.body>.piece:nth-child(4n+3),
#content>.piece:nth-child(4n) {
  background-color: var(--main-color-5);
  background-image: url("./images/bg-faq.png");
  background-position: left top;
  background-repeat: repeat-y;
}

.contentGpArticleDocs,
.body>#news.piece,
.body>#format.piece,
#content>#news.piece,
#content>#format.piece {
  background-image: url("./images/bg-dots_top.png"), url("./images/bg-dots_bottom.png");
  background-position: left top, left bottom;
  background-repeat: repeat-x;
}

.body>#format.piece {
  background-color: var(--main-color-3);
}

.body>.category .piece,
#content>.category .piece {
  background-color: var(--main-color-3);
  background-image: url("./images/bg-diagonal_line.png");
}

.body>#award.piece,
.body>#organizer.piece,
#content>#award.piece,
#content>#organizer.piece {
  padding: 50px 15px 50px 50px;
  background-image: url("./images/bg-diagonal_line.png");
  background-repeat: repeat;
}

.body>#subject.piece,
#content>#subject.piece {
  height: 237px;
  padding: 0;
  border: 0;
  background: url("./images/bg-boshu_green.png") no-repeat left top;
}

.body>#period.piece,
#content>#period.piece {
  background-image:
    url("./images/bg-kazari01.svg"),
    url("./images/bg-kazari02.svg"),
    url("./images/bg-kazari03.svg"),
    url("./images/bg-kazari04.svg"),
    url("./images/bg-concentrated_line.png");
  background-position: left 60px top 10px, right 20px top 10px, left 45px bottom 10px, right 25px bottom 5px, left top;
  background-repeat: no-repeat;
}

.body>.piece[id^="apply"],
#content>.piece[id^="apply"] {
  background-image: url("./images/bg-slanting_dots.png");
  background-position: left top;
  background-repeat: no-repeat;
}

.body>#faq.piece,
#content>#faq.piece {
  background-image: url("./images/bg-faq.png") !important;
  background-position: left top;
  background-repeat: repeat;
}

@media only screen and (max-width: 959px),
print {

  .body>.piece,
  .body>#award.piece,
  .body>#organizer.piece,
  #content>.piece,
  #content>#award.piece,
  #content>#organizer.piece,
  .contentGpArticleDocs,
  #content.doc {
    padding: 20px;
  }

  .body>.piece[id^="apply"] .formbtn,
  #content>.piece[id^="apply"] .formbtn {
    background-image: none;
  }

  #result {
    background-color: var(--main-color-3) !important;
  }
}

@media screen and (max-width:375px) {

  .body>.piece,
  .body>#award.piece,
  .body>#organizer.piece,
  #content>.piece,
  #content>#award.piece,
  #content>#organizer.piece,
  .contentGpArticleDocs,
  #content.doc {
    padding: 10px;
  }
}

/* お知らせ
----------------------------------------------- */
#news h2 {
  margin-bottom: 2.5rem;
}

.contentGpArticleDocs .docs,
#news ul {
  position: relative;
  padding: 1em;
  border: 2px solid var(--mono-color-3);
  border-radius: 6px;
  background-color: var(--mono-color-5);
}

.contentGpArticleDocs .docs::before,
#news ul::before {
  content: "";
  position: absolute;
  top: -20px;
  left: 5px;
  width: 65px;
  height: 20px;
  background-image: url("./images/q-fukidashi.svg");
  background-position: left top;
  background-repeat: no-repeat;
}

.contentGpArticleDocs li>*:first-child,
#news li>*:first-child {
  margin-right: 0.5em;
}

body[class^="dir-poki-contest-news"] {
  min-height: 0;
}

#news li,
.contentGpArticleDocs .docs li {
  padding: 0.5em 0 0.5em 1em;
  text-indent: -1em;
}

#news li::before,
.contentGpArticleDocs .docs li::before {
  content: "・";
}

.contentGpArticleDocs li a,
#news li a {
  color: var(--ac-color);
}

.contentGpArticleDocs li a:hover,
#news li a:hover {
  color: var(--ac-hover-color);
}

.contentGpArticleDocs li .new_mark,
#news li .new_mark {
  color: #ee0000;
  font-weight: bold;
}

/* purpose
----------------------------------------------- */
#purpose p>span {
  display: inline-block;
}

@media only screen and (max-width: 959px),
print {
  #purpose p>span {
    display: inline;
  }
}

/* 審査員
----------------------------------------------- */
#judge ul,
#attention ul,
.category ul,
.body ul {
  line-height: 1.8;
}

.body #subject ul {
  line-height: normal;
}


.cke_editable ul.icon,
.body ul.icon {
  list-style-type: none;
  padding-left: 0;
}

.cke_editable ul.icon>li,
.body ul.icon>li {
  padding-left: 1em;
  text-indent: -1em;
}

.cke_editable ul.icon>li::before,
.body ul.icon>li::before {
  content: none;
}

#judge li::before,
#attention li::before,
#sponsor li::before,
.category li::before,
.body ul li::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 0.3em;
  border-radius: 50%;
  background-color: var(--mono-color-2);
  vertical-align: 0.1em;
}

.body .piece:not(#general):not(#junior) ul li::before {
  content: none;
}

#judge li,
#attention li,
#sponsor li,
.body ul li {
  padding-left: 1em;
  text-indent: -1em;
}

.body .piece:not(#general):not(#junior) ul li {
  padding-left: 0;
  text-indent: 0;
}

@media screen and (min-width: 960px) {
  .body #subject.piece:not(#general):not(#junior) ul li:first-child {
    padding-left: 50px;
  }
}

@media screen and (max-width: 959px),
print {
  .body #subject.piece:not(#general):not(#junior) ul li {
    padding-left: 20px;
  }
}

#judge ul+h2,
#attention ul+h2,
#judge p+h2,
#attention p+h2,
#sponsor p+h2,
#sponsor ul+h2,
.category ul+h4,
.category ul+p {
  margin-top: 1.5em;
}

/* 賞および賞品について
----------------------------------------------- */
#award .pieceHeader h2 {
  margin-bottom: 0;
}

#award .flex {
  display: flex;
  justify-content: space-between;
}

#award .flex>div {
  flex-basis: calc(50% - 10px);
}

#award caption,
.category>.piece h3 {
  margin-top: 10px;
  padding-top: 22px;
  background: url("./images/ic-title.svg") no-repeat left top;
  font-size: 1.25rem;
  font-weight: bold;
  white-space: nowrap;
  text-align: left;
}

.category>.piece h3 {
  margin-bottom: 1rem;
}

#award caption span {
  font-size: 0.875rem;
}

#award th {
  font-weight: 500;
}

#award th:first-child {
  width: 6.5em;
  color: var(--mono-color-5);
}

.body>#award.piece:nth-child(4n+2) th:first-child,
#content>#award.piece:nth-child(4n+3) th:first-child {
  background-color: var(--main-color-6);
}

.body>#award.piece:nth-child(4n+3) th:first-child,
#content>#award.piece:nth-child(4n) th:first-child {
  background-color: var(--main-color-7);
}

#award th:nth-child(2) {
  width: 5em;
  padding: 2px;
}

#award td span {
  display: inline-block;
}

@media only screen and (max-width: 959px),
print {
  #award {
    padding: 50px;
  }

  #award .flex {
    flex-wrap: wrap;
  }

  #award .flex>div {
    flex-basis: 100%;
  }

  #award caption {
    padding-top: 1rem;
    white-space: normal;
  }

  #award caption span {
    font-size: 1rem;
  }
}

@media only screen and (max-width: 559px) {
  #award {
    padding: 20px;
  }

  #award caption span {
    display: block;
  }

  #award th,
  #award td {
    vertical-align: middle;
  }

  #award th {
    white-space: nowrap;
  }
}

@media screen and (max-width:375px) {
  #award th {
    white-space: normal;
  }

  #award th:first-child {
    width: 5em;
  }

  #award th:nth-child(2) {
    width: 4.5em;
  }
}

/* 募集対象
----------------------------------------------- */
#subject ul {
  display: flex;
  justify-content: space-between;
}

#subject li {
  position: relative;
  height: 230px;
  padding: 40px;
}

#subject li p {
  position: absolute;
}

#subject li:first-child p {
  width: 245px;
  left: 185px;
  top: 110px;
}

#subject li:last-child p {
  width: 310px;
  right: 140px;
  top: 95px;
}

@media only screen and (max-width: 959px),
print {
  #subject {
    height: auto !important;
    margin-bottom: 20px;
    background: none !important;
  }

  #subject ul {
    flex-wrap: wrap;
  }

  #subject li {
    flex-basis: 100%;
    height: auto;
    padding: 20px;
    border: 4px solid var(--mono-color-1);
    background: url("./images/bg-diagonal_line.png");
  }

  #subject li:first-child {
    margin-bottom: 20px;
    background-color: var(--main-color-2);
  }

  #subject li:last-child {
    background-color: var(--main-color-3);
  }

  #subject li p {
    position: static;
    width: auto !important;
    height: auto !important;
  }
}

/* 応募条件
----------------------------------------------- */
#format p.title {
  margin: 10px 0;
  padding-top: 22px;
  background: url("./images/ic-title.svg") no-repeat left top;
  font-size: 1.25rem;
  font-weight: bold;
  text-align: left;
}

#format h2 {
  margin-bottom: 0;
}

#format h3+p,
#apply h3+p {
  padding-left: 1em;
}

#format .flex {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}

#format .image {
  flex-basis: 440px;
  margin-right: 20px;
}

#format .image+p {
  flex-basis: calc(100% - 460px);
}

#format .detail {
  margin-bottom: 1.5em;
}

ul.asterisk li::before {
  content: "※";
}

ul.asterisk li {
  padding-left: 1em;
  text-indent: -1em;
}

#format p span {
  display: inline-block;
}

#format h3+p span:not(:last-child) {
  margin-right: 1em;
}

@media only screen and (max-width: 959px),
print {
  #format {
    background-color: var(--main-color-4) !important;
  }
}

@media only screen and (max-width: 559px) {
  #format .temp1 {
    margin-bottom: 1.5rem;
  }

  #format .flex {
    flex-wrap: wrap;
  }

  #format .image,
  #format .image+p {
    flex-basis: 100%;
  }

  #format .image {
    margin: 0 0 1rem;
  }
}

/* 応募期間
----------------------------------------------- */
#period .pieceContainer {
  display: flex;
  justify-content: center;
  padding-top: 17px;
}

#period .pieceHeader h2 {
  margin: 0 10px 0 0;
}

#period .pieceBody {
  margin-top: -17px;
}

#period .date {
  line-height: 1;
  font-size: 2rem;
  font-weight: bold;
}

#period .date .num {
  font-size: 3rem;
}

#period .arrival {
  font-size: 1.15rem;
  font-weight: bold;
  text-align: right;
}

@media only screen and (max-width: 959px),
print {
  #period {
    background-color: var(--main-color-5) !important;
    background-position: left 20px top 10px, right 5px top 10px, left 20px bottom 5px, right 5px bottom 5px, left top;
    background-size: 45px auto, 66px auto, 66px auto, 39px auto, 100% auto;
  }

  #period .pieceContainer {
    justify-content: flex-start;
    flex-wrap: wrap;
    padding-top: 0;
  }

  #period .pieceHeader h2 {
    margin: 0 0 1.5em;
  }

  #period .pieceBody {
    margin: 0 0 0 10px;
  }

  #period .date {
    font-size: 1.5rem;
  }

  #period .date>span {
    display: inline-block;
  }

  #period .date .num {
    font-size: 2rem;
  }

  #period .arrival {
    margin-top: 0.5em;
    text-align: left;
  }
}

@media only screen and (max-width: 559px) {
  #period {
    padding-bottom: 40px !important;
  }

  #period .pieceContainer>div {
    flex-basis: 100%;
  }

  #period .pieceBody {
    margin: -17px 0 0;
  }
}

/* 応募方法
----------------------------------------------- */
.piece[id^="apply"] p:not(:last-child) {
  margin-bottom: 1em;
}

.piece[id^="apply"] p span {
  display: inline-block;
}

.piece[id^="apply"] p span:not(:last-child) {
  margin-right: 1em;
}

@media only screen and (max-width: 959px),
print {
  .piece[id^="apply"] {
    background-color: var(--main-color-2) !important;
  }
}

/* よくあるご質問
----------------------------------------------- */
#faq h2 {
  margin-bottom: 2.5rem;
}

#faq dt,
#faq dd {
  position: relative;
  padding: 1em 1em 1em 2.5em;
  border: 2px solid var(--mono-color-3);
  border-radius: 6px;
  background-color: var(--mono-color-5);
  text-indent: -1.6em;
}

#faq dt {
  margin: 0 50px 20px 0;
  font-weight: normal;
}

#faq dd {
  margin: 0 0 50px 50px;
}

#faq dd:last-child {
  margin-bottom: 0;
}

#faq dt::before,
#faq dd::before {
  content: "";
  position: absolute;
  top: -20px;
  width: 65px;
  height: 20px;
  background-position: left top;
  background-repeat: no-repeat;
}

#faq dt::before {
  left: 5px;
  background-image: url("./images/q-fukidashi.svg");
}

#faq dd::before {
  right: 5px;
  background-image: url("./images/a-fukidashi.svg");
}

#faq dt>span,
#faq dd>span {
  margin-right: 0.25em;
  font-size: 1.5rem;
  font-weight: 500;
  vertical-align: -0.1em;
}

#faq dt>span {
  color: var(--main-color-8);
}

#faq dd>span {
  color: var(--main-color-9);
}

@media only screen and (max-width: 959px),
print {
  #faq {
    background-color: var(--main-color-4) !important;
  }

  #faq dt,
  #faq dd {
    text-indent: -1rem;
  }

  #faq dt {
    margin-right: 20px;
  }

  #faq dd {
    margin-left: 20px;
    margin-bottom: 40px;
  }

  #faq dt>span,
  #faq dd>span {
    font-size: 1rem;
  }
}

/* 注意事項 / 主催
----------------------------------------------- */
#pageFooter>.piece {
  padding: 50px;
  border: 4px solid var(--mono-color-3);
}

#attention p+h2,
#sponsor p+h2 {
  margin-top: 1.5em;
}

@media only screen and (max-width: 959px),
print {
  #pageFooter>.piece {
    padding: 20px;
  }
}

/* お問い合わせ
----------------------------------------------- */
#inquiry.piece {
  margin-bottom: 0;
}

#inquiry {
  background-color: var(--main-color-1);
}

#inquiry p span {
  display: inline-block;
}

#inquiry p span:not(:last-child) {
  margin-right: 1rem;
}

#inquiry a {
  color: var(--mono-color-1);
}

.copyright {
  margin-top: 1em;
}

.copyright small {
  font-size: 0.875rem;
}

@media only screen and (max-width: 959px),
print {
  #inquiry .pieceBody {
    flex-wrap: wrap;
  }

  #inquiry .pieceBody>* {
    flex-basis: 100%;
  }

  .copyright {
    margin-top: 1em;
    text-align: center;
  }
}

/* フォーム
----------------------------------------------- */
.surveyForm .questions,
.surveyForm .question,
.surveyForm .question .answer_content input[type="text"],
.surveyForm .question .answer_content input[type="email"],
.surveyForm .question .answer_content select,
.surveyForm .question .answer_content textarea,
.surveyForm .question .question_content+.body p,
.surveyForm .questions+.question,
.captchaForm img,
.captchaForm .reload a,
.captchaForm .talk a,
.surveyForm .submit input[type="submit"] {
  border-color: var(--mono-color-3);
}

.surveyForm .submit input[type="submit"] {
  box-shadow: 0 0 0 3px var(--main-color-1) inset;
}

.surveyForm .question .answer_content {
  background-color: transparent;
}

.surveyForm .question .question_content .note {
  background-color: transparent;
  color: var(--ac-color-red-1);
}

.surveyForm .body:has(+.answer_content) {
  margin-bottom: 0;
}

@media screen and (max-width: 559px) {
  .surveyForm .question .answer_content label {
    display: inline-block;
  }

  #content:not(.artwork) .surveyForm .body p {
    margin-bottom: 0;
  }
}

/* 審査員講評
----------------------------------------------- */
#comment div:not(:last-child) {
  margin-bottom: 1.5em;
}

#comment p {
  text-indent: 1em;
}

#content .body #comment p {
  margin-bottom: 0;
}

#purpose p>span,
#comment p>span {
  display: inline-block;
}

@media only screen and (max-width: 959px),
print {

  #purpose p>span,
  #comment p>span {
    display: inline;
  }
}

/* 審査結果
----------------------------------------------- */
.category {
  display: flex;
  justify-content: space-between;
}

.category>.piece {
  flex-basis: calc(50% - 10px);
  margin-bottom: 0;
}

@media only screen and (max-width: 959px),
print {
  .category {
    flex-wrap: wrap;
  }

  .category>.piece {
    flex-basis: 100%;
  }

  .category>.piece:not(:last-child) {
    margin-bottom: 20px;
  }
}

/* 作品一覧
----------------------------------------------- */
.artwork .body {
  text-align: center;
}

.artwork .body>div {
  margin-bottom: 3em;
  font-size: 1.5rem;
}

.artwork .body p span {
  display: inline-block;
  margin: 0 0.5em;
}

@media only screen and (min-width: 960px) {
  .artwork .body img {
    width: 485px;
  }
}

/* 作品一覧：注意事項
----------------------------------------------- */
.attention {
  margin-top: 1rem;
  color: #cc0000;
  font-size: 1.25rem;
  font-weight: bold;
}

/* 結果発表
----------------------------------------------- */
#siteLogo .result {
  display: flex;
  justify-content: space-between;
}

#siteLogo .result li {
  flex-basis: calc(50% - 10px);
}

@media screen and (max-width: 959px),
print {
  #siteLogo .result {
    justify-content: center;
    flex-wrap: wrap;
  }

  #siteLogo .result li {
    flex-basis: 100%;
  }
}

/* 全作品一覧
----------------------------------------------- */
.gallery .temp4 {
  align-items: flex-start;
  gap: 2em 10px;
  flex-wrap: wrap;
  margin-bottom: 2em;
  text-align: center;
}

.gallery .temp4 dl {
  max-width: 100%;
  margin: 0;
}

.gallery .temp4.col1 dl {
  flex-basis: 100%;
}

.gallery .temp4.col2 dl {
  flex-basis: calc(50% - 5px);
}

.gallery .temp4.col3 dl {
  flex-basis: calc(33.33% - 6.66px);
}

.gallery .temp4.col4 dl {
  flex-basis: calc(25% - 7.5px);
}

.gallery .temp4.col5 dl {
  flex-basis: calc(20% - 8px);
}

@media screen and (min-width: 960px) {
  .lightbox .lb-image {
    max-width: calc(100vw - 50px) !important;
    height: auto !important;
  }
}

@media screen and (max-width: 959px),
print {
  .gallery .temp4:not(.col1) dl {
    flex-basis: calc(50% - 5px) !important;
  }
}

@media screen and (max-width: 360px) {
  .gallery .temp4 {
    gap: 2em 0;
  }

  .gallery .temp4 dl {
    flex-basis: 100% !important;
  }
}