@charset "UTF-8";
#collection.page .kv .pageTtl span {
 display: block;
 font-size: 60%;
 line-height: 1.6;
}
#collection .inner {
 max-width: 80%;
}
#collection .flexBox.left {
 flex: 1 0 30%;
 max-width: 30%;
}
#collection .flexBox.right {
 flex: 1 0 70%;
 max-width: 70%;
 padding-left: 3rem;
}
#collection #collectionAbout .subTtl, #collection #practical .subTtl, #collection #cocoa .subTtl {
 margin: 3rem 0 1.5rem;
 font-weight: 600;
 font-size: 2.8rem;
 line-height: 1.2;
 position: relative;
}
#collection #permanent .flexBox {
 flex: 1 0 calc(50% - 1.5rem);
 max-width: calc(50% - 1.5rem);
}
#collection #permanent .cardBody .ph {
 margin-bottom: 1.5rem;
}
#collection #permanent .card, #collection #facilities .card, #collection #rental .card, #collection #review .card {
 background: #fcfcfc;
 /*padding: 1rem 2rem;*/
 border-radius: 4px;
 margin-bottom: 3rem;
 box-shadow: rgb(0 0 0 / 10%) 0px 1px 3px 0px, rgb(0 0 0 / 6%) 0px 1px 2px 0px;
 overflow: hidden;
}
#collection #rental .card.left, #collection #rental .card.right {
 flex: 1 0 calc(50% - 1.5rem);
 max-width: calc(50% - 1.5rem);
 padding: 0;
}
#collection #permanent .card h3, #collection #facilities .card h3, #collection #rental .card h4, #collection #review .card h3 {
 color: #fcfcfc;
 background: #525252;
 font-size: 2rem;
 padding: 1rem 2rem;
 line-height: 1.5;
}
#collection #rental .card h4 {
 font-size: 1.6rem;
}
#collection #permanent .cardBody, #collection #facilities .cardBody, #collection #rental .cardBody, #collection #review .cardBody {
 padding: 2rem;
}
#collection #facilities .cardBody .left {
 flex: 1 0 50%;
 max-width: 50%;
 padding-right: 1.5rem;
}
#collection #facilities .cardBody .right {
 flex: 1 0 50%;
 max-width: 50%;
 padding-left: 1.5rem;
}
#collection #facilities .cardBody .right.ph {
 flex: 1 0 30%;
 max-width: 30%;
}
#collection #facilities .cardBody ul li {
 position: relative;
 font-size: 1.4rem;
 text-indent: -1em;
 padding-left: 1em;
 line-height: 1.5;
 margin-bottom: 0.25em;
}
#collection #facilities .cardBody ul li:before {
 content: "・";
 display: inline;
}
#collection .cardBody .mb20 {
 margin-bottom: 2rem;
}
#collection #facilities .cardBody .guidemap {
 margin: 2rem 0 1rem;
}
#collection #archives .inner {
 position: relative;
}
/*#collection #archives .inner:before {
 content: "";
 height: 1px;
 width: calc(100% - 80px);
 position: absolute;
 top: -2%;
 left: 0;
 right: 0;
 margin: 0 auto;
 border-top: dashed 1px #aaa;
}*/
#collection #archives h3 {
 font-weight: 600;
 font-size: 2.8rem;
 line-height: 1.2;
 margin-bottom: 2rem;
}
#collection #cocoa, #collection #selection {
 min-height: 60vh;
}
#collection #cocoa .flexBox.left, #collection #selection .flexBox.left {
 flex: 1 0 30%;
 max-width: 30%;
}
#collection #cocoa .flexBox.right, #collection #selection .flexBox.right {
 flex: 1 0 70%;
 max-width: 70%;
 padding-left: 3rem;
}
#specialExhibition .image {
 position: relative;
 width: 100%;
 padding-top: 50%;
 overflow: hidden;
 margin-bottom: 1.5rem;
}
#specialExhibition .image img {
 width: 100%;
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 left: 0;
 right: 0;
 margin: 0 auto;
}
#archives .btn_area {
 display: flex;
 justify-content: center;
 align-content: center;
 flex-wrap: wrap;
 padding-bottom: 5rem;
}
#archives .btn_area .tab_btn {
 padding: 1.25rem 2rem;
 background: #373d45;
 color: #fff;
 line-height: 1.2;
 border-radius: 4px;
 text-align: center;
 box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
 margin: 0 0.75rem 1rem;
 cursor: pointer;
 display: flex;
 align-items: center;
}
#archives .btn_area .tab_btn:first-of-type {
 white-space: nowrap;
}
#archives .btn_area .tab_btn.active {
 background: #f8b62d;
}
.tab_box .panel_area .tab_panel {
 display: none;
}
.tab_box .panel_area .tab_panel.active {
 display: block;
}
.archivesList ul {
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
}
.archivesList ul li {
 margin-bottom: 1.5rem;
 flex: 1 0 calc(50% - 0.75rem);
 max-width: calc(50% - 0.75rem);
}
.archivesList ul li a {
 font-size: 1.4rem;
 border-radius: 3px;
 box-shadow: rgb(0 0 0 / 10%) 0px 1px 3px 0px, rgb(0 0 0 / 6%) 0px 1px 2px 0px;
 background: #fcfcfc;
 color: #444;
 line-height: 1.5;
 display: flex;
 align-items: center;
}
.archivesList ul li a:hover {
 background: #dfdfdf;
}
.archivesList ul li a .thumb {
 flex: 1 0 10rem;
 max-width: 10rem;
 position: relative;
 padding-top: 10rem;
 line-height: 1;
 overflow: hidden;
 background: #fafafa;
 border-right: solid 1px #ececec;
}
.archivesList ul li a .thumb img {
 position: absolute;
 width: auto;
 height: 100%;
 margin: 0 auto;
 left: -50%;
 top: 50%;
 transform: translateY(-50%);
 right: -50%;
}
.archivesList ul li a .ttl {
 flex: 1 0 calc(100% - 10rem);
 max-width: calc(100% - 10rem);
 padding: 0.5rem 1rem 0.5rem 2rem;
}
#collection #rental .subTtl, #collection #review .subTtl {
 margin: 0 0 2.5rem;
 font-weight: 600;
 font-size: 2.2rem;
 line-height: 1.2;
 position: relative;
}
#collection #rental .flex {
 margin: 3rem auto 0;
}
/*#collection #rental .flex .flexBox {
 flex: 1 0 calc(50% - 1.5rem);
 max-width: calc(50% - 1.5rem);
}*/
#collection #review .cardBody p img {
 float: right;
 width: 24rem;
 margin: 0 0 0.5em 1.5rem;
}
#collection #review .cardBody p:after {
 content: "";
 display: block;
 clear: both;
}
#collection #review .cardFooter {
 padding: 2rem;
 background: #efefef;
}
#collection #review .cardFooter h4 {
 font-weight: 600;
 font-size: 1.8rem;
}
#collection #review .cardFooter ul li {
 font-size: 1.4rem;
}
#collection #review .cardFooter ul li:before {
 content: "・";
}
#collection #faq .inner > dl {
 margin-bottom: 3rem;
}
#collection #faq .inner > dl dt {
 color: #fcfcfc;
 background: #525252;
 font-size: 2rem;
 padding: 1rem 2rem;
 line-height: 1.5;
 position: relative;
 border-radius: 4px 4px 0 0;
}
#collection #faq .inner > dl dt:before {
 content: "Q.";
 color: #f8b62d;
 font-size: 110%;
 display: inline-block;
 padding-right: 0.25em;
 font-weight: 700;
 font-family: 'Jost', sans-serif;
}
#collection #faq .inner > dl dd {
 padding: 2rem;
 background: #fcfcfc;
 position: relative;
}
#collection #faq .inner > dl dd span {
 display: inline-block;
 margin-right: 0.75em;
 font-size: 1.5rem;
}
#collection #faq .inner > dl dd span a {
 display: inline;
 padding-left: 0.5em;
}
#collection #faq .inner > dl dd p {
 margin-bottom: 1em;
}
#collection #faq .inner > dl dd > ul > li {
 margin-bottom: 1.0rem;
}
#collection #faq .inner > dl dd h4 {
 font-weight: 700;
 font-size: 1.7rem;
}
#collection #faq .inner > dl dd > ul > li p {
 padding-left: 2rem;
}
.collectionDetail .inner {
 background: #fff;
 padding: 40px;
}
.collectionDetail .inner h2 {
 line-height: 1.5;
 margin-bottom: 3rem;
 font-size: 3.2rem;
 color: #111;
 font-weight: 500;
 letter-spacing: .025em;
 position: relative;
 padding-bottom: 0.45em;
}
.collectionDetail .inner h2:before {
 content: "";
 display: block;
 height: 4px;
 width: 10rem;
 background: #f8b62d;
 position: absolute;
 bottom: 0;
 left: 0;
 z-index: 2;
}
.collectionDetail .inner h2:after {
 content: "";
 display: block;
 height: 4px;
 width: 100%;
 background: #ccc;
 position: absolute;
 bottom: 0;
 left: 0;
 z-index: 1;
}
.collectionDetail .inner h2 .subTtl01 {
 font-size: 50%;
 display: block;
}
.collectionDetail .inner h2 .subTtl02 {
 font-size: 50%;
 display: block;
}
@media screen and (max-width: 1000px) {
 #collection .inner {
  max-width: 100%;
 }
 .pageNav .flex li a em {
  font-size: 100%;
 }
 #collection .flex {
  display: block;
 }
 #collection .flexBox.left {
  flex: none;
  max-width: 100%;
 }
 #collection .flexBox.right {
  flex: none;
  max-width: 100%;
  padding: 1.5rem 0 0;
 }
 #collection #collectionAbout .flexBox.left {
  flex: none;
  max-width: 1100%;
 }
 #collection #collectionAbout .flexBox.right {
  flex: none;
  max-width: 100%;
  padding: 1.5rem 0 0;
 }
 #collection #collectionAbout .subTtl, #collection #practical .subTtl, #collection #cocoa .subTtl {
  font-size: 1.8rem;
 }
 #collection #permanent .flexBox {
  flex: none;
  max-width: 100%;
 }
 #collection #permanent .card, #collection #facilities .card, #collection #rental .card, #collection #review .card {
  margin-bottom: 1.5rem;
 }
 #collection #permanent .card h3, #collection #facilities .card h3, #collection #rental .card h4, #collection #review .card h3 {
  font-size: 1.6rem;
  padding: 1rem 1.5rem;
 }
 #collection #rental .card h4 {
  font-size: 1.5rem;
 }
 #collection #permanent .cardBody, #collection #facilities .cardBody, #collection #rental .cardBody, #collection #review .cardBody {
  padding: 1.5rem;
 }
 #collection #facilities .cardBody .left {
  flex: none;
  padding: 0;
  max-width: 100%;
 }
 #collection #facilities .cardBody .right {
  flex: none;
  padding: 1.5rem 0 0;
  max-width: 100%;
 }
 #collection #facilities .cardBody .right.ph {
  flex: none;
  max-width: 100%;
 }
 #collection #archives .inner:before {
  width: calc(100% - 3rem);
  top: -2.5rem;
 }
 #collection #archives .inner:before {
  width: calc(100% - 3rem);
  top: -2.5rem;
 }
 #collection #archives h3 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
 }
 #collection #cocoa, #collection #selection {
  min-height: 60vh;
 }
 #collection #cocoa .flexBox.left, #collection #selection .flexBox.left {
  flex: none;
  max-width: 100%;
 }
 #collection #cocoa .flexBox.right, #collection #selection .flexBox.right {
  flex: none;
  max-width: 100%;
  padding: 1.5rem 0 0;
 }
 #archives .btn_area {
  padding-bottom: 2.5rem;
 }
 .archivesList ul {
  display: block;
 }
 .archivesList ul li {
  margin-bottom: 0.75rem;
  flex: none;
  max-width: 100%;
 }
 .archivesList ul li a {
  font-size: 1.3rem;
 }
 #collection #rental .subTtl, #collection #review .subTtl {
  margin: 0 0 1.5rem;
  font-size: 1.8rem;
 }
 #collection #rental .flex {
  margin: 2rem auto 0;
 }
 #collection #rental .card.left, #collection #rental .card.right {
  flex: none;
  max-width: 100%;
  padding: 0;
 }
 /*#collection #rental .flex .flexBox {
  flex: none;
  max-width: 100%;
 }*/
 #collection #review .cardBody p img {
  width: 50%;
  margin: 0 0 0.25em 0.5rem;
 }
 #collection #review .cardFooter {
  padding: 1.5rem;
 }
 #collection #review .cardFooter h4 {
  font-size: 1.6rem;
 }
 #collection #review .cardFooter ul li {
  font-size: 1.3rem;
 }
 #collection #faq .inner > dl {
  margin-bottom: 2rem;
 }
 #collection #faq .inner > dl dt {
  font-size: 1.6rem;
  padding: 1rem 1.5rem;
 }
 #collection #faq .inner > dl dd {
  padding: 1.5rem;
 }
 #collection #faq .inner > dl dd span {
  display: block;
  margin-right: 0;
  font-size: 1.4rem;
 }
 #collection #faq .inner > dl dd h4 {
  font-size: 1.6rem;
 }
 #collection #faq .inner > dl dd > ul > li p {
  padding-left: 0;
 }
 .collectionDetail .inner {
  padding: 1.5rem;
 }
 .collectionDetail .inner h2 {
  font-size: 2.2rem;
  padding-bottom: 0.5em;
 }
 .collectionDetail .inner h2:before {
  width: 6.8rem;
 }
}