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

#exhibition h3#pageTitle{ border-bottom: 1px solid #ccc;}
#exhibition .anchorLink{ margin:-230px 0 0 0 !important; padding:230px 0 0 0 !important;}

#exhibition_navi{ background-color: #fff; padding: 30px 50px 20px; /*border-bottom: 1px solid #ccc;*/ width: 100%; box-sizing: border-box; z-index: 99998;}
#exhibition_navi .inner{ width: 960px; margin: 0 auto; display: flex; align-items: center; align-content: center; justify-content: flex-start; flex-direction: row; flex-wrap: wrap; max-width: 100%;}
#exhibition_navi .inner a{ width: calc(( 100% - 20px)/3); color: #4d4d4d;border: 1px solid #4d4d4d; padding: 15px 30px 15px 100px; position: relative; margin: 0 10px 10px 0; box-sizing: border-box; align-items: center; line-height: 1.3; letter-spacing: 0;}
#exhibition_navi .inner a:after{ font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f0d7";position: absolute; right:10px; top: 50%; transform: translateY(-50%);}
#exhibition_navi .inner a span.tit{ width: 100px; text-align: center; font-weight: bold; font-size: 18px; display: inline-block; position: absolute; top: 0; left: 0; height: 100%; display: flex; align-content: center; align-items: center; justify-content: center; line-height: 1;}
#exhibition_navi .inner a span.txt{ display: flex; justify-content: flex-start; align-content: center; align-items: center; }
#exhibition_navi .inner a:nth-child(3n){ margin-right: 0;}
#exhibition_navi .inner a:hover{ color: #fff; background-color: #4d4d4d;}
#exhibition_navi.fixed{ position: fixed; top:0; transform: translateY(-150%); transition: all .4s; padding: 5px 50px 0px;}
#exhibition_navi.fixed.is-show {transform: translateY(95px);/* box-shadow: 0px 5px 10px hsla(0,0%,0%,0.10);*/ }
#exhibition_navi.fixed .inner a{ padding: 5px 30px 5px 100px; margin: 0 5px 5px 0; width: calc(( 100% - 10px)/3); }
#exhibition_navi.fixed .inner a:nth-child(3n){ margin-right: 0;}
#exhibition_navi.fixed .inner a span.tit{ font-size: 16px; }

#exhibition{ background-color: #f0e7e0;}
h3.exhiTit{ background: #000; text-align: center; color: #fff; font-weight: bold; padding: 40px 50px;}
h3.exhiTit .tit{ font-size: 25px; border-bottom: 1px solid #fff; padding: 0 0 10px 0; margin: 0 0 30px 0; display: inline-block;}
h3.exhiTit .txt{ font-size: 23px;}

.quotation{ background-image: url("../../exhibition/img/bg_paper.png"); background-position: center top; background-repeat: repeat-y; background-size: 960px auto; padding: 30px; display: flex; align-items: center; justify-content: center; font-feature-settings:normal; letter-spacing: 0em;}
.quotation .inner{ /*font-weight: bold;*/ font-size: 18px; line-height: 2.2; box-sizing: border-box; writing-mode: vertical-rl; -ms-writing-mode: tb-rl; height: 16em; margin-left: 9px; font-family: dnp-shuei-mincho-pr6n, sans-serif; font-weight: 600; font-style: normal;}
.quotation .inner .source{ font-size: 13px; text-align: right; margin-right: 5px;}
.quotation .inner .source span{ display: inline-block;}
.quotation .inner.source_line02{ margin-left: -16px;}
	@media all and (-ms-high-contrast: none) {.quotation .inner.source_line02{margin-left: 21px;}}
.quotation .inner.adjust01{ margin-left: -31px;}
.quotation .inner.adjust02{ margin-left: 22px;}
.typing { opacity: 0; }
.typing span { opacity: 0; }
.typing01 { opacity: 0; }
.typing01 span { opacity: 0; }
.typing02 { opacity: 0; }
.typing02 span { opacity: 0; }
.typing03 { opacity: 0; }
.typing03 span { opacity: 0; }
.typing04 { opacity: 0; }
.typing04 span { opacity: 0; }
.typing05 { opacity: 0; }
.typing05 span { opacity: 0; }


.txtArea{ margin: 60px auto; font-size: 16px;}
.txtArea p{ margin-bottom: 2em;}

.imgArea{ padding: 10px; box-sizing: border-box; display: flex; justify-content: flex-start; position: relative; flex-direction: row; }
.imgArea_bg{ position: absolute; top: 0; left: 0; width: 100%; height:0; padding-top: 29.1%; background-image: url("../../exhibition/img/hondana01_pc.png"); background-repeat: no-repeat; background-size: 100% auto; background-position: left top; filter: drop-shadow(0 0px 10px rgba(0, 0, 0, .6)); z-index: 3;}
	_::-webkit-full-page-media, _:future, :root .imgArea_bg{padding-top: 29.9%;}
.imgArea .item{ margin: 0 10px 0 0; z-index: 4;}
.imgArea .item:last-child{ margin-right: 0;}
.imgArea .item .imgBox{ position: relative; text-align: center; }
.imgArea .item .imgBox .zoom{ background-color: hsla(0,0%,0%,0.60); color: #fff; text-align: center; width: 25px; height: 25px; position: absolute; right: 5%; bottom: 10px; display: flex; align-items: center; justify-content: center; cursor: pointer;}
.imgArea .item .imgBox .zoom:after{ font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f00e";}
.imgArea .item .imgBox:hover .zoom{ background-color:  hsla(0,0%,0%,1);}
.imgArea .item .imgBox a{ position: absolute; top:0; left: 0; width: 100%; height: 100%; color: hsla(0,0%,0%,0.00);}
.imgArea .item .works_caption { background-color: #fff; display: block; text-align: center; font-size: 12px; line-height: 1.5; margin: 40px auto 0; padding: 10px; box-sizing: border-box; width: 180px; display: flex; align-items: center; justify-content: center; flex-direction: column; filter: none;}
.imgArea .item .works_caption .title{ font-size: 14px; margin-bottom: 10px;}
.imgArea .item .works_caption p{ margin: 0;}
.imgArea .item .works_caption .year{ width: 100%; border-top:1px solid #333; text-align: right; padding-top: 10px;}

.imgArea.wide02{}
.imgArea.wide02 .imgArea_bg{background-image: url("../../exhibition/img/hondana02_pc.png");}
.imgArea.wide02 .item{ width: calc((100% - 10px)/2);}
.imgArea.wide02 .item .imgBox img{ width: 66%; }
.imgArea.wide02 .item .imgBox img.wide{ width: 77%; }

/*モーダル*/
.modalWindow{ }
.modalWindow .modal_bg{ position: fixed; top: 0; left: 0; height: 100%; width: 100%; opacity: 0.9; background-image: url( "../img/bg_wood.jpg"); background-repeat: repeat;}
.modalWindow .content_modal .imgBox{ width: 55%; text-align: center; }
.modalWindow .content_modal .imgBox img{ filter: drop-shadow(0 0px 3px rgba(5, 0, 0, .5));}
.modalWindow .content_modal .imgBox.no_shadow img{ filter: none;}
.modalWindow .content_modal .imgBox .caption{ text-align: right; margin-top: 10px; color: #000; font-size: 14px; line-height: 22px;}

.modalWindow .content_modal .txtBox{ font-size: 14px; line-height: 28px; width: 33%; margin: 0 0 0 4%; }

.modaltitle{ padding: 20px ; margin: 0 auto; text-align: center; background-color: #fff; box-shadow: 10px 5px 10px hsla(0,0%,0%,0.10); width: 100%; box-sizing: border-box; }
.modaltitle .works_title{ font-weight: bold; font-size: 16px; line-height: 28px; margin: 0 0 20px 0; min-height: 80px; display: flex; flex-direction: column; justify-content: center; align-items: center;}
.modaltitle .works_title .title{ font-size: 125%; margin-bottom: 10px;}
.modaltitle .works_title .title span{ display: inline-block;}
.modaltitle .works_title .year{ width: 100%; border-top:1px solid #333; text-align: right; padding-top: 10px;}
.letterSpace_adjast01{ letter-spacing: -0.03em;}
.modaltitle .works_title .title:last-child{ margin-bottom: 0px;}
.modaltitle .comment{ margin: 0 0 0 0; text-align: left; font-size: 16px;}
.modaltitle .comment .txt_quote{ font-size: 13px; margin: 20px 0 0 0 !important; line-height: 1.6; padding: 1em; background-color: #eee;}
.modaltitle .comment .txt_quote .tit{ display: block; margin-bottom: 10px;}

.modalWindow .content_modal.img_multi .imgBox{ width: 100%; text-align: center; max-height: 50vh; }
.modalWindow .content_modal.img_multi .txtBox{ width: 80%; margin: 30px auto 0;}
.img_multi .modaltitle .works_title{ height: auto;}

.modalWindow .content_modal .imgBox.zoomImg{ position: relative; cursor: zoom-in;}

.modalWindow#modal_chapter02_02 .content_modal .imgBox{ width: 42%; margin-left:10%;}
.modalWindow#modal_introduction_01 .content_modal .imgBox{ width: 32%; margin-left:15%; margin-right: 5%;}
.modalWindow#modal_conclusion_01 .content_modal .imgBox{ width: 32%; margin-left:15%; margin-right: 5%;}

.sp_txt{ display: none; margin: 0 0 5px 0; font-size: 14px; line-height: 1.6;}

_:-ms-lang(x)::-ms-backdrop, .txt_ie
{transform: rotate(90deg) translateY(14px);}

@media screen and (max-width:1200px) {
#exhibition_navi .inner a{ padding: 10px 30px 10px 80px; }
#exhibition_navi .inner a span.tit{ width: 80px; font-size: 16px; }
#exhibition_navi .inner a span.txt{ display: flex; justify-content: flex-start; align-content: center; align-items: center; }
/*#exhibition_navi.fixed.is-show {transform: translateY(80px); }*/
#exhibition_navi.fixed .inner a{ padding: 5px 30px 5px 80px; }
#exhibition_navi.fixed .inner a span.tit{ width: 80px; font-size: 16px; }
#exhibition_navi.fixed .inner a span.txt{ display: flex; justify-content: flex-start; align-content: center; align-items: center; }

.imgArea .item { margin-right: 1%; width:32.6%; }
.imgArea.wide02 .item{ width: 49.5%; }
}

@media screen and (max-width:768px) {
#exhibition .anchorLink{ margin:-210px 0 0 0 !important; padding:210px 0 0 0 !important;}
#exhibition_navi,#exhibition_navi.fixed{ padding: 15px 20px 0; }
#exhibition_navi .inner a{ flex-direction: column; padding: 2vw 3vw 2vw 11.5vw; font-size:2.2vw; margin: 0 5px 5px 0; width: calc(( 100% - 10px)/3);}
#exhibition_navi.fixed .inner a{ flex-direction: column; padding: 2vw 3vw 2vw 11.5vw; font-size:2.2vw; margin: 0 5px 5px 0; width: calc(( 100% - 10px)/3);}
#exhibition_navi .inner a span.tit{ font-size: 2.3vw; width: 11.5vw; }
#exhibition_navi.fixed .inner a span.tit{ font-size: 2.3vw; width: 11.5vw; }
#exhibition_navi .inner a:after{ right:5px}

.modalWindow .content_modal .inner{ flex-wrap: wrap; justify-content: flex-start;}
.modalWindow .content_modal .imgBox{ width: 80%; margin: 10vh auto 30px; }
.modalWindow .content_modal .txtBox{ width: 75%; margin: 0 auto 10vh;}
.modaltitle .works_title{ min-height: 100px; }
/*.modalWindow .content_modal.img_multi .imgBox{ width: 80%; }
.modalWindow .content_modal.img_multi .txtBox{ width: 75%; margin: 0 auto;}*/
.img_multi .modaltitle .works_title{ min-height: auto; height: auto; }
.modalWindow#modal_chapter02_02 .content_modal .imgBox{ width: 100%; margin: 10vh auto 30px;}
.modalWindow#modal_chapter02_02 .content_modal .imgBox img{ width: 70%; margin:0 auto;}
.modalWindow#modal_introduction_01 .content_modal .imgBox{ width: 70%; margin: 10vh auto 30px;}
.modalWindow#modal_conclusion_01 .content_modal .imgBox{ width: 70%; margin: 10vh auto 30px;}

.sp_txt{ display: block;}

}

@media screen and (max-width:640px) {
#exhibition_navi.fixed.is-show {transform: translateY(70px); }
h3.exhiTit{ background: #000; text-align: center; color: #fff; font-weight: bold; padding: 5vw 30px;}
h3.exhiTit .tit{ font-size: 4vw; padding: 0 0 1vw 0; margin: 0 0 3vw 0; }
h3.exhiTit .txt{ font-size: 3.3vw;}
	
.quotation{ background-size: 200vw auto; padding: 5vw; }
.quotation .inner{font-size: 3.8vw; margin-left: 1.8vw; height: 16.5em;}
.quotation .inner .source{ font-size: 2.5vw; margin-right: 1vw;}
.quotation .inner.source_line02{ margin-left: 4.5vw;}
	_::-webkit-full-page-media, _:future, :root .quotation .inner.source_line02{ margin-left: -2.5vw;}
	@media all and (-ms-high-contrast: none) {.quotation .inner.source_line02{ margin-left: -2.5vw;}}
.quotation .inner.adjust01{ margin-left: 10vw;}
.quotation .inner.adjust02{ margin-left: 4.4vw;}
	
.imgArea { flex-direction: column;}
.imgArea_bg{  display: none; /*width: 100%;  width: 60%; height:0; padding-top: 216.35%; background-image: url("../../exhibition/img/hondana01_sp.png");*/ }
.imgArea .item{ width: 100% !important; display: flex; flex-direction: column; align-items: center; background-image: url("../../exhibition/img/hondana01_sp.png"); background-repeat: no-repeat; background-size: contain; margin-bottom: 10vw; }
.imgArea .item .imgBox{ width: 100%; padding-top: 69%; position: relative; margin-top: 2.5%; }
.imgArea .item .imgBox img{ position: absolute; top: 0; left: 50%; transform: translateX(-50%); height: 100%; width: auto;}
.imgArea .item .works_caption{ width: 60%; margin: 5vw auto 0 ; font-size: 2.5vw;}
.imgArea .item .works_caption .title{ font-size: 3.1vw;}
	
.imgArea.wide02 .item .imgBox img{ width: auto; }
	_::-webkit-full-page-media, _:future, :root .imgArea.wide02 .item .imgBox img{ width: auto;}
.imgArea.wide02 .item .imgBox img.wide{ width: auto; }
	
.modalWindow .content_modal .imgBox{ width: 100%; }
.modalWindow .content_modal .txtBox{ width: 100%; }
.modalWindow .content_modal .inner.img_multi .imgBox{ width: 100%; }

}