@charset "UTF-8";
@import url("//use.fontawesome.com/releases/v5.7.2/css/all.css");

.design {
  padding-top: 6%;
}
.design h3 {
	text-align: left;
	font-size: 36px;
	line-height: 1.2;
	color: #d1b289;
	margin: 0 0 6%;
	font-family: serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: italic;
}
.design h4 {
	text-align: left;
	font-size: 20px;
	font-weight: normal;
	margin: 0 0 2%;
}
.design h5 {
  text-align: left;
  font-size: 16px;
  font-weight: normal;
  margin: 0 0 2%;
}
.design .imgBox {
	position: relative;
	overflow: hidden;
}
.design .imgBox .imgCaption {
	position: absolute;
	bottom: 0;
	right: 10px;
	left: 10px;
	text-align: right;
	font-size: 10px;
	color: #FFF;
	line-height: 0;
	text-shadow: 0px 0px 3px rgb(0, 0, 0), 0px 0px 3px rgb(0, 0, 0);
}
.design .imgBox .imgCaption2 {
	position: relative;
	text-align: right;
	font-size: 10px;
	color: #fff;
	line-height: 1.3;
	margin-top: 3px;
	padding-right: 10px;
}
.design .inner .desBox {
  margin-bottom: 6%;
}
.design .inner .desBox.p10 {
  padding: 0 10%;
}
.design .desBox2 {
  margin-bottom: 6%;
}
.design .desBox3 {
  margin-bottom: 6%;
}
.design .designerArea {
  width: 100%;
  margin: 0 auto;
}
.design .designerArea .designerTxt {
  text-align: justify;
  font-size: 14px;
  line-height: 1.6;
}
.design .designerArea .designerBox01 {
  margin-bottom: 6%;
}
.design .designerArea .designerBox01 .designer {
  margin: 0;
}
.design .designerArea .designerBox01 .designer li {
  text-align: left;
}
.design .designerArea .designerBox01 .designer li .imgBox {
  max-width: 250px;
}
.design .designerArea .designerBox01 .designer li .nameSub {
  font-size: 11px;
}
.design .designerArea .designerBox01 .designer li .name {
  margin-bottom: 6%;
}
.design .designerArea .designerBox01 .designer li:nth-of-type(1) {
  width: 50%;
  margin: 0 0 6%;
}
.design .designerArea .designerBox02 .imgBox {
  margin-bottom: 6%;
}


.design .view{
	width: 100%;
	margin-bottom: 10%;
}
.design .view .viewImg{
	width: 100%;
	margin: 5% auto 10%;
}
.design .view .viewTxtArea{
	width: 100%;
	margin: 0 auto;
}

.design .view .viewTxtArea .viewTxt{
	margin-bottom: 8%;
}
.design #slide {
    width: 100%;
    height: 319px;
    position: relative;
    margin: 0 auto 60px auto;
    overflow: hidden;
}

.design #slide img.bubbleZu{
    width: 1250px;
    height: auto;
}

.design #slide .slideCell {
    width: 1250px;
    float: left;
    opacity: 1 !important;
}
.design #slide .slideCtrl {
    display: inline-block;
    position: absolute;
    z-index: 100;
    cursor: pointer;
    padding: 15px 15px;
    color: #fff;
	text-shadow: #000 1px 0 5px;
    top: 50%;
    margin-top: -30px;
    transition: .2s linear;
    -webkit-transition: .2s linear;
    -moz-transition: .2s linear;
    -o-transition: .2s linear;
    -ms-transition: .2s linear;
    opacity: .6 !important;
}
.design #slide .slideCtrl:hover {
    color: #ccc;
    opacity: .6 !important;
}
.design #slide .left { left: 5px; }
.design #slide .right { right: 5px; }
.design #slide .caption {
	position: absolute;
	right: 5px;
	bottom: 5px;
	text-align: right;
	font-size: 10px;
	color: #FFF;
	line-height: 1.3;
	text-shadow: 0px 0px 3px rgb(0, 0, 0), 0px 0px 3px rgb(0, 0, 0);
}

.design .uchirokaArea{
	width: 100%;
	margin: 0 auto 6%;
	padding: 4%;
	background-color: #ebebe4;
	box-sizing: border-box;
}
.design .uchirokaArea h4{
	text-align: center;
	color: #000;
}
.design .uchirokaArea h5,
.design .uchirokaArea .txtBlock{
	color: #000;
}
.design .uchirokaArea .uchiLeft{
	margin-bottom: 6%;
}

@media only screen and (min-width: 961px) {

.design .inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
.design .inner .desBox {
    width: 45%;
    margin-bottom: 50px;
  }
.design .inner .desBox.p10 {
    padding: 0 0 0 10%;
  }
.design .desBox2 {
    width: 40%;
    margin: -13% 0 50px;
  }
.design .desBox3 {
    margin-bottom: 6%;
  }
.design .designerArea {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
.design .designerArea .designerBox01 {
    width: 65%;
    margin-bottom: 0;
  }
.design .designerArea .designerBox01 .designer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
.design .designerArea .designerBox01 .designer li .nameSub {
    font-size: 11px;
  }
.design .designerArea .designerBox01 .designer li .name {
    margin-bottom: 6%;
  }
.design .designerArea .designerBox01 .designer li:nth-of-type(1) {
    width: 20%;
    margin: 0;
  }
.design .designerArea .designerBox01 .designer li:nth-of-type(2) {
    width: 75%;
  }
.design .designerArea .designerBox02 {
    width: 25%;
  }
.design .designerArea .designerBox02 .imgBox {
    margin-bottom: 6%;
  }

.design .view{
	width: 100%;
	margin-bottom: 10%;
}
.design .view .viewImg{
	max-width: 1300px;
}
.design .view .viewTxtArea{
	width: 100%;
	display: flex;
	justify-content: space-between;	
	flex-wrap: wrap;
}

.design .view .viewTxtArea .viewTxt{
	width: 100%;
	margin-bottom: 0;
	align-self: center;
}
.design .view .viewTxtArea .viewImg02{
	width: 100%;
	align-self: center;
	margin-top: 4%;
}
.design .designerArea .designerBox01 {
    width: 100%;
    margin-bottom: 0;
}
.design .uchirokaArea{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 6% auto;
	padding: 4%;
}
.design .uchirokaArea h3{
	width: 100%;
}
.design .uchirokaArea .uchiLeft{
	margin-bottom: 0;
	width: 45%;
	align-self: center;
}
.design .uchirokaArea .uchiRight{
	width: 45%;
	align-self: center;
}
.design #slide{
    display: none;
}
}