.box{ border:1px solid #dedede; padding:10px}

.photoList li,.newsDateMain {
    box-sizing: border-box
}

.photoList .item,.photoList li,.newsDateMain,.newsDateMain:after,.newsDateMain strong,.newsList .item {
    transition: all 0.4s
}

.photoList,.photoList .item,.photoList .Txt .top,.photoListSec .Txt,.newsDateMain,.newsList .item,.newsList .Txt .top,.titleArea {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}


.photoList {
    width: 100%
}

.photoList li {
    width: calc(100%/4 - 10px);
    border: 1px solid #cfcfcf;
    background-color: #fff;
    margin-right: 5px;
    margin-bottom: 30px;
    padding: 12px 15px
}

.photoList li:nth-child(3n) {
    margin-right: 5px
}

@media (min-width: 1201px) {
    .photoList li:hover {
        box-shadow:0 0 20px rgba(0,0,0,0.15)
    }
}

@media (max-width: 1024px) {
	.photoList li {
    width: calc(100%/3 - 20px);
    border: 1px solid #cfcfcf;
    background-color: #fff;
    margin-right: 30px;
    margin-bottom: 30px;
    padding: 12px 15px
}

.photoList li:nth-child(3n) {
    margin-right: 0
}
}

@media (max-width: 640px) {
    .photoList li {
        width:calc(100%/2 - 15px);
        margin-right: 30px
    }

    .photoList li:nth-child(3n) {
        margin-right: 30px
    }

    .photoList li:nth-child(2n) {
        margin-right: 0
    }

    .photoList .Txt h3 a {
        font-size:18px
    }
	
	.photoList .Txt p {
        font-size:15px
    }
}


/*@media (max-width: 360px) {
    .photoList li {
        width:100%;
        margin-right: 0
    }

    .photoList li:nth-child(3n) {
        margin-right: 0
    }

    .photoList li:nth-child(2n) {
        margin-right: 0
    }
}*/

.photoList .Img {
    width: 100%
}

.photoList .Img img {
    display: block;
    width: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.photoList .Txt {
    width: 100%;
    padding: 20px 0
}

.photoList .Txt .top {
    -ms-flex-align: center;
    align-items: center;
    padding-bottom: 10px
}

.photoList .Txt .top span {
    border-right: 1px solid #cfcfcf;
    color: #c49d62;
    display: inline-block;
    padding-right: 10px;
    margin-right: 10px
}

.photoList .Txt .top h3 {
    color: #000;
    font-size: 18px;
    font-weight: 400;
    /* max-height: 32px */
}


.photoList .Txt p {
    /* max-height: 56px; */
    color: #656565;
    font-size: 15px;
    line-height: 1.5
}



@media (min-width: 1201px) {
    .photoList .Txt h3 a:hover {
        color:#c49d62
    }
}




@media (max-width: 480px) {

	 .photoList .Txt h3 a {
        font-size:16px
    }
	
	.photoList .Txt p {
        font-size:14px;
		display:none;
    }
	
	.photoList .Txt {
    width: 100%;
    padding:10px 0
}
}



/*-moduleBox--*/
.moduleBox {
  position: fixed;
  left: 50%;
  top: 48%;
  z-index: 1005;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  -webkit-transition-property: top, opacity, visibility;
  -o-transition-property: top, opacity, visibility;
  transition-property: top, opacity, visibility;
  -webkit-transition-duration: .5s;
  -o-transition-duration: .5s;
  transition-duration: .5s;
  -webkit-transition-timing-function: ease-in-out;
  -o-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
}

.moduleBox.show {
  top: 50%;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.moduleMask,
.moduleMask2 {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1003;
  background-color: rgba(0, 0, 0, 0.7);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  -webkit-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
}

.moduleMask.show,
.moduleMask2.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.moduleCloseStyle {
  position: absolute;
  right: 45px;
  top: -17px;
  width: 65px;
  height: 65px;
  background-color: #916f2d;
  border: none;
}



.moduleCloseStyle::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -12px;
  margin-top: -12px;
  width: 24px;
  height: 24px;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  background-image: -webkit-gradient(linear, left top, right top, to(#fff)), -webkit-gradient(linear, left top, left bottom, to(#fff));
  background-image: -webkit-linear-gradient(left, #fff 100%), -webkit-linear-gradient(top, #fff 100%);
  background-image: -o-linear-gradient(left, #fff 100%), -o-linear-gradient(top, #fff 100%);
  background-image: linear-gradient(to right, #fff 100%), linear-gradient(to bottom, #fff 100%);
  background-repeat: no-repeat;
  background-size: 100% 1px, 1px 100%;
  background-position: left center, center top;
}

.moduleBox2 {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10001;
  width: 100%;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  -webkit-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
}

.moduleBox2 .insArea {
  position: relative;
  z-index: 1006;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 100%;
  min-height: 90vh;
  max-width: 800px;
  padding: 50px 0;
  margin-left: auto;
  margin-right: auto;
  margin-top: 100vh;
  background-color: #fff;
  -webkit-transition: all 1.2s ease-in-out;
  -o-transition: all 1.2s ease-in-out;
  transition: all 1.2s ease-in-out;
}

.moduleBox2 .insArea .insAreaTitle{
  margin-bottom: 20px;
  font-size: 18px;
  letter-spacing: .02em;
  text-align: center;
  font-weight: 600;
  color:#630;
}
.moduleBox2 .insArea .insAreaTitle a{
  color: #916f2d;
}

.moduleBox2 .wrap {
  display: inline-block;
  width: inherit;
  padding-left: 50px;
  padding-right: 50px;
}



.moduleBox2.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.moduleBox2.show .insArea {
  margin-top: 10vh;
}



.moduleBox2.show .moduleMask2 {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}


@media (max-width: 1180px) {
   .moduleCloseStyle {
    right: 0;
    top: 0;
  }
    
  
  .moduleBox2 .insArea {
    padding-top: 70px;
    padding-bottom: 70px;
    max-width: 100%;
    min-height: 100vh;
  }
  
   .moduleBox2 .wrap {
    padding-left: 20px;
    padding-right: 20px;
  }
  
  .moduleBox2.show .insArea {
    margin-top: 0;
  }
}

@media (max-width: 640px) {
.moduleBox2 .insArea {
    padding-top: 0px;
    padding-bottom: 40px;
    max-width: 100%;
    min-height: 100vh;
  }

}

.titleBox {
  margin:30px 0;
}

.titleBox h3 {
  font-size:25px;
  padding-bottom:30px;
  letter-spacing:0.075em;
  font-weight: 400;
  border-bottom:1px solid #dcdcdc;
}



.titleBox.left {
  text-align: left;
}

.titleBox .title {
  font-weight: 400;
  font-size: 25px;
  letter-spacing: .15em;
  padding-bottom: 5px;
}