#about .sec3 { padding-left: 100px; padding-right: 100px; }
#about .sec4, #about .sec6 { margin-left: 60px; margin-right: 60px; }
.sec2 { margin-top: 3%; }
.sec3 { margin-top: 5%; }

.sec1 { background: url("../images/sec1-bg03.png") no-repeat top center /100%; }
.sec2 .content { background-color: transparent; }
.sec2 .content .s { padding-top: 20px; padding-bottom: 50px; margin-top: 0; margin-bottom: 20px; position: relative; }
.sec2 .content .s .m-bg { width: 100%; height: 100%; background-color: #FAFAFA; position: absolute; z-index: -1; }
.s-text { padding:20px; margin-top:20px; margin-bottom:20px }
.s-textWrap { max-width: 1100px; background: #FAFAFA; padding:2em; margin: auto; }
[class^='sec'] .text h3 { text-align: center; font-size: 22px; line-height: 2em; margin-bottom:20px }
.sec2 h4,.sec5 h4 { font-size:22px; line-height: 2em; }
.sec2 h4 {background: url("../images/miidera/mark.svg") no-repeat left; background-size: 2.6em; line-height: 3; padding-left: 1.2em;margin-bottom: 15px;}
.sec2 .slick-slider img { width: 100%; height: auto; }
.sec3 { background: url(../images/sec1-bg02.png) no-repeat center center /100%; display: grid; grid-template-columns: repeat(3,1fr); column-gap: 17px; row-gap: 20px; }
.sec3 p { font-size: 15px; }
.sec3 .img { position: relative; }
.sec3 .nr { width: 40px;height: 40px;font-size: 20px;background: black;color:#fff;display: flex;align-items: center;justify-content: center; position: absolute; right: 0;bottom:1px; }
.sec3 .i h3{ padding-top:10px }
.sec3 .i h3:before { content: ''; width: 2em; height: 1.6em; background: url("../images/p-icon.svg") no-repeat left; background-size: 2em; vertical-align: text-bottom; margin-left: -1.2em; display: inline-block; position: relative; top: 0.1em; right: -0.8em; z-index: -1; }
.sec3 .i p { text-align: left; margin: 0 25px; max-width: 500px; padding: 0 5px; margin: 0 auto; }
.main > .s-text .s-textWrap { padding: 20px; }
.main > .s-text .s-textWrap h4{ text-align: center; font-size: 22px; margin-bottom:20px; line-height: 2em; }
.main > .s-text .s-textWrap dl { max-width: 1000px; line-height: 2em; font-size: 15px; margin: 0 auto; display: flex; flex-wrap: wrap; }
.main > .s-text .s-textWrap dl dt { width: 17rem; }
.main > .s-text .s-textWrap dl dd { width: calc( 100% - 18rem ); text-indent: -1em; margin-left: auto; }

.sec4 { display: grid; grid-template-columns: 40% 1fr; column-gap: 5%; }
.sec4 h3 { font-size: 22px; line-height: 2em; margin-bottom:20px; }
.sec4 p,.sec5 p { text-align: left; }
.sec4 img { width: 100%; height: auto; }
.sec4 .row { padding: 0; margin-top:20px; display: grid; align-items: end; }
.sec4 .row .i { display: grid; grid-template-columns:repeat(4,1fr); column-gap: 20px; }

.sec5 { margin-top: 40px; position: relative; }
.sec5:before { content: ""; width: 100%; height: 20vw; background: url(../images/miidera_bg01.svg) no-repeat right bottom; background-size: contain; margin-top: -18vw; display: block; position: absolute; left: 0; z-index: -1; opacity: .3; }
.sec5:after { content: ""; width: 100%; height: 100%; background: url(../images/miidera_bg05.svg) no-repeat -18% 82%; background-size: 30%; display: block; position: absolute; top: 0; left: 0; z-index: -1; opacity: .3; }
.sec5 .row { width: 80%; max-width: 1080px; padding: 0; margin-right: auto; margin-left: auto; }
.sec5 .row .i { display: grid; grid-template-columns: 200px 1fr; grid-template-rows: repeat(6, 16.7%); column-gap: 20px; margin-bottom: 20px; }
.sec5 .row .i h4 { text-align: left; grid-area: 1 / 2 / 2 / 3; }
.sec5 .row .i img { grid-area: 1 / 1 / 7 / 2; }
.sec5 .row .i p { margin-top: 20px; }
.sec5 p { line-height: 2em; letter-spacing: 0; }
.sec5 h4 { text-align: center; padding-bottom: 20px;}
.sec5 .left2 p { padding-top: 0; }
.sec5 .last { background-color: #fafafa; padding: 2em; }
.sec5 .last .bg { display: flex; justify-content: center; flex-wrap: wrap; margin-bottom: 20px; }
.sec5 .last .bg p { padding-top: 0; display: inline-block; margin: 0; }


.sec6 { margin-bottom: 40px; margin-top:40px; margin-bottom: 40px; padding: 0; }
.sec6 .first-row { display: flex; flex-wrap: wrap; margin-right: -10px; margin-left: -10px; }
.sec6 .img { width: 33.333%; padding: 10px; }
.sec6 .img a { width: 100%; height: 100%; display: block; position: relative; overflow: hidden; }
.sec6 .img a img { width: 100%; height: auto; transition: all 1s ease 0s; }
.sec6 .img a:hover img { transform: scale(1.2); }
.sec6 .sec6-overlay { width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); position: absolute; top: 0; left: 0; overflow: hidden; display: block; }
.sec6 .sec6-overlay .text { width: 100%; height: auto; color: #fff; font-size: 18px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.sec6 .sec6-overlay .text p { color: #fff; }

.sec7 { position: relative; margin-bottom: 40px; }
.sec7:before { content: ''; width: 100%; height: 20em; background: url("../images/miidera_bg03.svg") no-repeat 90% top /contain; margin-top: -5em; position: absolute; top: 0; right: 0; z-index: -1; opacity: .4; }
.sec7 #myBtnContainer { margin: 0 auto; margin-bottom: 15px; text-align: center; }
.sec7 .row { max-width: 1200px; margin-right: auto; margin-left: auto; }
.sec7 .row:after { content: ""; display: table; clear: both; }
.sec7 .row > .column { padding: 6px; }
.sec7 .column { float: left; width: 20%; display: none; }/* Hide columns by default */
.sec7 .show { display: block; }
.sec7 .g-btn { padding: 6px 0px; background-color: transparent; cursor: pointer; width: fit-content; width: 110px; border:1px solid #B09833; margin:0 0.2em 5px; font-size: 15px; outline: none; }
.sec7 .g-btn:hover, .sec7 .g-btn.active { color: #fff; background-color: #B09833; }

.sec7 h3 { font-size: 25px; text-align: center; margin-bottom:20px; }
.sec7 .column { opacity:0; animation: fadeIn 0.7s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards; cursor: pointer; }
.sec7 .column:hover img { opacity: .6; }
.sec7 .bg-gallery { width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); position: fixed; left: 0; top: 0; z-index: 999; display: none; }
.sec7 .canvas { width: auto; max-width: 90%; height: auto; text-align: center; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 9999; display: none; }
.sec7 .canvas .figure { position: relative; }
.sec7 .canvas .figure .arr-right { width: 1.5em; height: 1.5em; border-top: #fff solid 4px; border-right: #fff solid 4px; display: inline-block; position: absolute; top: 50%; right: 1em; transform: rotate(45deg); cursor: pointer; }
.sec7 .canvas .figure .arr-left { width: 1.5em; height: 1.5em; border-top: #fff solid 4px; border-right: #fff solid 4px; display: inline-block; position: absolute; top: 50%; left: 1em; transform: rotate(-135deg); cursor: pointer; }
.sec7 .canvas .figure img { background-color: #fff; padding: 5px; margin: auto; border-radius: 5px; }
.sec7 .canvas p { color: #fff; font-size: 1.4rem; line-height: 1.5; }
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@media only screen and (max-width: 1300px) {
  #about .sec3 { padding-left: 40px; padding-right: 40px; }
  .sec6 .sec6-overlay .text p { font-size: 1.2rem; }
  .sec3 { grid-template-columns: repeat(2, 1fr); }
  .sec7 .column { width: 25%; }
}
@media only screen and (max-width:1024px){
  .sec1 { padding: 0 4.8vw; }
  .sec2 .s:nth-child(even) .right .text { padding-left:4.8vw; }
  .sec2 .content .right .text { margin-right: 4.8vw; }
  .sec3 .text h3 { margin: 10px 0; padding: 0; }
  .sec6-overlay p { display: none; }
  .sec6-overlay .text h3 { margin-bottom: 0; }
  .sec7 .column { width: 33.333%; }

@media only screen and (max-width: 940px) {
  .sec4 .row { width: calc( 100% + 81.8% ); margin-left: -81.8%; }
}
@media only screen and (max-width: 767px) {
  .g-btn { width: 25%; }
  #about .sec3 { padding-left: 20px; padding-right: 20px; }
  #about .sec4, #about .sec6 { margin-left: 20px; margin-right: 20px; }
  .sec7 { padding-right: 20px; padding-left: 20px; }
	.sec1 .text p, .sec1 .s-text p, .sec2 .text p, .sec3 p, .sec4 p, .sec5 p { font-size: 14px; }
	.sec1 .s-text { padding: 20px 0; }
  .sec2 h4,.sec5 h4 { font-size:1.8rem; }
  .sec1 .text:nth-child(2) { background-size: 30%; }
  .sec1 .s-text:nth-child(3) { background-size: 25%; }
  .sec2 .content .s { margin-bottom: 20px; padding-bottom: 20px; grid-template-columns: 1fr !important; column-gap: 0; row-gap: 40px; }
  .sec3 { grid-template-columns: repeat(1, 1fr); }
  .main > .s-text .s-textWrap dl { font-size: 14px }
  .main > .s-text .s-textWrap dl dt { width: 100%; }
  .main > .s-text .s-textWrap dl dd { width: calc( 100% - 2em ); margin-left: auto; margin-bottom: 5px; }
  .sec4 { grid-template-columns: 1fr; }
  .sec4 .row { width: 100%; margin-left: 0; }
  .sec4 .row .i { grid-template-columns: repeat(2,1fr); column-gap: 20px; row-gap: 20px; }
  .sec4 .right { margin: 0; }
  .sec5 .row { width: 90%; }
  .sec5 .row .i { display: inherit; }
  .sec5 .row .i h4 { text-align: center; }
  .sec5 .last .bg { justify-content: flex-start; }
  .sec6 .img { width: 100%; }
  .sec7:before { width: 35%; height: 20em; margin-top: -2em; }
  .sec7 .canvas { width: 90%; }
  .sec7 .column { width: 50%; }
	.sec4 h3 { margin: 10px 0; }
	.sec5 h4 { margin-bottom: 10px; }
	.sec5 h4 { padding-bottom: 0;}
}