@charset "UTF-8";
/*2020追加*/
.gallery-top a{display:inline-block;width: 960px;height: 640px;margin-left: 70px}
@media only screen and (max-width: 767px) {
    .gallery-top a{width: 100%;height:100;margin-left:0}
}

/* section_slider */
section.section_slider{
	width: 100%;
	max-width: 1100px ;
	margin: 0 auto 0px;}

@media only screen and (max-width: 767px) {
	section.section_slider{
		margin: 0 auto 20px}
}
/* swiper */
.swiper{ 
    position: relative;
	width: 1100px;
	margin: 0 auto}
@media only screen and (max-width: 1009px) {
	.swiper{width: 100%}
}

.swiper-container {overflow: hidden;
    width: 100%;}
.gallery-top {
    height: 720px;overflow: hidden;
    width: 960px;
    margin: -40px auto 20px
    }

/*背景画像の位置*/
.gallery-top .swiper-slide {
    background-position: center;
    background-size: contain;
    background-repeat:  no-repeat;}

/* ----- thumbs の設定 ----- */

.swiper-container.gallery-thumbs {
    width:960px;
    height: 150px;
    box-sizing:content-box;
    margin-left:auto;
    margin-right:auto;
    padding: 10px 0}

.gallery-thumbs .swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  box-sizing: content-box;
}

.gallery-thumbs .swiper-slide{
    background-position: center;
    background-size:cover
}
.gallery-thumbs .swiper-slide {
    height: 100%;
	-webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
    opacity:0.7;
}
@media all and (-ms-high-contrast: none) { /* IE10以降 */
    .gallery-thumbs .swiper-slide{opacity:0.5;}
}
.gallery-thumbs .swiper-slide-thumb-active {
    -webkit-filter: grayscale(0%);
  -moz-filter: grayscale(0%);
  -ms-filter: grayscale(0%);
  -o-filter: grayscale(0%);
  filter: grayscale(0%);
    opacity:1
}


/* swiper-button */
.swiper-button-prev {z-index: 99999;
    background: url(../img/archt/prev.png) no-repeat center center ;
    background-size:20px;
    
    }
.swiper-button-next {
    background: url(../img/archt/next.png) no-repeat center center ;
    background-size:20px}
.swiper-button-next:after,
.swiper-button-prev:after {font-size: 0}
/* swiper-button IE  */
@media all and (-ms-high-contrast: none) { /* IE10以降 */
    .swiper-button-prev::before {
    position: relative;
    content: "";
    padding: 8px 12px;
    opacity: 1;
    /*font-size: 1.2em;*/
}
.swiper-button-next::before {
    position: relative;
    content: "";
    padding: 8px 12px;
    opacity: 1;
    /*font-size: 1.2em;*/}
}


/* detail contents */
section.section_detail{
	width: 90%;
	max-width: 1100px;}
.section_detail h3{
    padding-top:0;
    letter-spacing: 0.05em;
    margin-bottom: 40px}

@media only screen and (max-width: 767px) {
	.swiper-container{}
	.gallery-top {
        padding:0;
		width:90%;
    	height: 250px}
	.swiper-container.gallery-thumbs {
        padding-top:0;
		width: 90%;
		height: 55px}
	/*next prev button */
	:root {--swiper-navigation-size:30px}
	.swiper-button-next{
		top: 51%;
		right: 25px}
	.swiper-button-prev{
		top: 51%;
		left: 25px}
	/* detail テキスト */
	section.section_detail h3{text-align: left;padding-top:0}
    section.section_detail .detail_txt{text-align: left}
	.contact_us{text-align: center}
}