@charset "UTF-8";

/*-------------------------
__about_jigyo_style
-------------------------*/
.contents .page_title{ background-image: url(../../images/back_gray.png),url(../images/title_back.jpg); background-repeat: repeat, no-repeat; background-size: auto, cover; background-position: center,center;}

.first_text{width:1000px;margin:0 auto 50px;display:flex;align-items:center;}
.first_text .text_box{font-size:1.6em;line-height:2.0em;}
.first_text .text_box .link_txt{display:block;}
.first_text .text_box .link_txt a{color:#000;transition:opacity .3s;}
@media screen and (min-width: 768px) {
  .first_text .text_box .link_txt a:hover{opacity:0.7;}
}
.first_text .img_box{width:180px;margin-left:80px;}
.first_text .img_box img{width:100%;height:auto;}

#kyougikai_list{ background-color: #f5f5e1; padding: 50px 0;}
#kyougikai_list .kyougikai_box{ background-color: #fff; width: 1000px; margin: 0 auto; padding: 50px 50px 30px; box-sizing: border-box; margin-bottom: 50px;}
#kyougikai_list .kyougikai_box.format01 .kyougikai_top{ margin-bottom: 30px; zoom:1;}
#kyougikai_list .kyougikai_box.format01 .kyougikai_top:after{content:"";display:block;clear:both;}
#kyougikai_list .kyougikai_box .kyougikai_top p{ font-size: 1.6em; line-height: 1.7em; flex: 1;}
#kyougikai_list .kyougikai_box.format01 .kyougikai_top.photo_left .photo{ margin-right: 20px; float: left;}
#kyougikai_list .kyougikai_box.format01 .kyougikai_top.photo_left p{ float: right; width: 100%; margin-left: -380px; padding-left: 380px; box-sizing: border-box;}
#kyougikai_list .kyougikai_box.format01 .kyougikai_top.photo_right .photo{ margin-left: 20px; float: right;}
#kyougikai_list .kyougikai_box.format01 .kyougikai_top.photo_right p{ float: left; width: 100%; margin-right: -380px; padding-right: 380px; box-sizing: border-box;}
#kyougikai_list .kyougikai_box .kyougikai_top .photo{ width: 360px; height: 230px; overflow: hidden;}
#kyougikai_list .kyougikai_box .kyougikai_top .photo img{ width: 100%; height: auto;}

#kyougikai_list .kyougikai_box.format02 .kyougikai_btm{ margin-bottom: 30px;}
#kyougikai_list .kyougikai_box.format02 .kyougikai_btm ul{ display: flex; justify-content: center; margin: 0 -15px;}
#kyougikai_list .kyougikai_box.format02 .kyougikai_btm ul li{ font-size: 1px; line-height: 0; width: calc(33.33333% - 30px); margin: 0 15px; height: 212px; position:relative; overflow: hidden;}
#kyougikai_list .kyougikai_box.format02 .kyougikai_btm ul li img{ position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 100%; height: auto;}
#kyougikai_list .kyougikai_box .archive_btn{ text-align: center; margin-top: 30px;}
#kyougikai_list .kyougikai_box .archive_btn a{ display: inline-block; border: 1px solid #9b814b; box-sizing: border-box; color: #9b814b; text-decoration: none; font-size: 1.5em; line-height: 1.3em; padding: 15px 25px; cursor: pointer;}

/* ポップアップ内容 */
.popup_box{ background-color: #fff; width: 80%; max-width: 700px; margin: 30px auto; padding: 40px 30px; box-sizing: border-box;}
.popup_box h3{ text-align: center; font-size: 2em; line-height: 1.5em; margin-bottom: 20px; color: #9b814b; font-weight: 700;}
.popup_box ul{ display: flex; flex-wrap: wrap;}
.popup_box ul li{ width: calc(33.33333% - 20px); margin-right: 30px; margin-bottom: 30px;}
@media screen and (min-width: 768px) {
.popup_box ul li:nth-child(3n){ margin-right: 0;}
}
.popup_box ul li .pic{ position: relative; margin-bottom: 5px;}
.popup_box ul li .pic:before { content: ""; display: block; padding-top: 100%;}
.popup_box ul li .pic p{ position: absolute; top: 0;  left: 0; width: 100%; height: 100%; padding: 10px; box-sizing: border-box; border: 1px solid #e6e6e6; box-sizing: border-box; background-color: #fff;}
.popup_box ul li .pic p span{ display: block; margin-bottom: 30px; width: 100%; height: 100%; overflow: hidden; position: relative;}
.popup_box ul li .pic p span img{ position: absolute; width: auto; height: auto; top: 50%; left: 50%; max-width: 100%; max-height: 100%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);}
.popup_box ul li .pic p span img:after{ background-repeat: no-repeat; box-sizing: inherit;}
.popup_box p{ text-align: center; font-size: 1.6em; line-height: 1.7em;}
.popup_box .mfp-close{ text-align: center; z-index: 10; position: relative; font-size: 1.3em; display: block; background-color: #000; margin: 0 auto; padding: 0; cursor: pointer; color: #fff; width: 100px; height: 44px;}


@media screen and (min-width: 1000px) {
#kyougikai_list .kyougikai_box .archive_btn a{webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;}
#kyougikai_list .kyougikai_box .archive_btn a:hover{ background-color: #9b814b; color: #fff;}
}


@media screen and (min-width: 768px) {
#kyougikai_list .kyougikai_box.format02 .kyougikai_top{ display: flex; margin-bottom: 30px;}
#kyougikai_list .kyougikai_box.format02 .kyougikai_top ul.material{ background-color: #e7e0d2; padding: 15px; box-sizing: border-box; display: inline-block; margin-left: 20px; max-height: 154px;}
#kyougikai_list .kyougikai_box.format02 .kyougikai_top ul.material li{ background-color: #fff; width: 124px; height: 124px; display: inline-block; margin-right: 10px; vertical-align: top;}
#kyougikai_list .kyougikai_box.format02 .kyougikai_top ul.material li:last-child{ margin-right: 0;}
#kyougikai_list .kyougikai_box.format02 .kyougikai_top ul.material li p{ position: relative;}
#kyougikai_list .kyougikai_box.format02 .kyougikai_top ul.material li p img{ display: block; max-width: 112px; max-height: 112px; width: auto; height: auto; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: auto; height: auto; margin-top: 62px;}
#kyougikai_list .kyougikai_box .kyougikai_btm .banner a img{ transition: opacity .3s ease;}
#kyougikai_list .kyougikai_box .kyougikai_btm .banner a:hover img{ opacity: 0.6;}
}


@media screen and (max-width: 767px) {
.contents .page_btn_list ul li a{ font-size: 1.2em;}
.first_text{width:100%;margin:0 auto 20px;box-sizing:border-box;padding:0 15px;}
.first_text .text_box{font-size:1.4em;line-height:1.7em;width:calc(100% - 120px);}
.first_text .text_box .link_txt{padding-top:0.8em;}
.first_text .text_box .link_txt a{display:block;}
.first_text .img_box{width:100px;margin-left:20px;}
#kyougikai_list{ padding: 30px 15px; box-sizing: border-box;}
#kyougikai_list .kyougikai_box{ width: 100%; padding: 20px 15px 5px; margin-bottom: 10px;}
#kyougikai_list .kyougikai_box.format01 .kyougikai_top{ display: block; margin-bottom: 10px;}
#kyougikai_list .kyougikai_box .kyougikai_top p{ font-size: 1.4em; line-height: 1.7em; margin-bottom: 10px;}
#kyougikai_list .kyougikai_box.format01 .kyougikai_top.photo_left .photo{ margin-right: 0; float: none;}
#kyougikai_list .kyougikai_box.format01 .kyougikai_top.photo_left p{ float: none; width: 100%; margin-left: 0; padding-left: 0; box-sizing: border-box;}
#kyougikai_list .kyougikai_box.format01 .kyougikai_top.photo_right .photo{ margin-left: 0; float: none;}
#kyougikai_list .kyougikai_box.format01 .kyougikai_top.photo_right p{ float: none; width: 100%; margin-right: 0; padding-right: 0; box-sizing: border-box;}
#kyougikai_list .kyougikai_box .kyougikai_top .photo{ width: 100%; height: auto;}
#kyougikai_list .kyougikai_box .kyougikai_top .photo img{ position: relative; top: auto; left: auto; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); width: 100%; height: auto;}

#kyougikai_list .kyougikai_box.format02 .kyougikai_top ul.material{ background-color: #e7e0d2; padding: 10px; box-sizing: border-box; display: inline-block; width: 100%;}
#kyougikai_list .kyougikai_box.format02 .kyougikai_top ul.material{ display: flex; justify-content: center;}
#kyougikai_list .kyougikai_box.format02 .kyougikai_top ul.material li{ background-color: #fff; position: relative; width: calc(33.33333% - 0px); margin-right: 10px;}
#kyougikai_list .kyougikai_box.format02 .kyougikai_top ul.material li:last-child{ margin-right: 0;}
#kyougikai_list .kyougikai_box.format02 .kyougikai_top ul.material li:before { content: ""; display: block; padding-top: 100%;}
#kyougikai_list .kyougikai_box.format02 .kyougikai_top ul.material li p{ position: absolute; top: 0;  left: 0; width: 100%; height: 100%; padding: 5px; box-sizing: border-box;}
#kyougikai_list .kyougikai_box.format02 .kyougikai_top ul.material li p span{ display: block; margin-bottom: 30px; width: 100%; height: 100%; max-width: 500px; overflow: hidden; position: relative;}
#kyougikai_list .kyougikai_box.format02 .kyougikai_top ul.material li p span img{ position: absolute; width: auto; height: auto; top: 50%; left: 50%; max-width: 100%; max-height: 100%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
#kyougikai_list .kyougikai_box.format02 .kyougikai_top ul.material li p span img:after{ background-repeat: no-repeat; box-sizing: inherit;}
#kyougikai_list .kyougikai_box.format02 .kyougikai_btm{ margin-bottom: 10px;}
#kyougikai_list .kyougikai_box.format02 .kyougikai_btm ul{ display: block; margin: 0;}
#kyougikai_list .kyougikai_box.format02 .kyougikai_btm ul li{ width: 100%; margin: 0 0 10px; height: auto; overflow: auto;}
#kyougikai_list .kyougikai_box.format02 .kyougikai_btm ul li img{ position: relative; top: auto; left: auto; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); width: 100%; height: auto;}
#kyougikai_list .kyougikai_box .archive_btn{ margin: 15px 0 10px;}
#kyougikai_list .kyougikai_box .archive_btn a{ font-size: 1.4em; line-height: 1.3em; padding: 15px 20px; }

/* ポップアップ内容 */
.popup_box{ width: 100%; padding:20px 15px; box-sizing: border-box;}
.popup_box h3{ font-size: 1.7em; margin-bottom: 15px;}
.popup_box ul li{ width: calc(50% - 5px); margin-right: 10px; margin-bottom: 15px;}
.popup_box ul li:nth-child(2n){ margin-right: 0;}
.popup_box ul li .pic p{ padding: 3px;}
.popup_box p{ font-size: 1.4em; line-height: 1.4em;}
}