@charset "UTF-8";
@use 'pages' as var;

@media screen and (min-width: 751px) {
body #contents #main article .content-detail1400, body #contents #main section .content-detail1400 {
  max-width: 1400px;
}
}

body #contents #main #train {
  text-align: left;
  background: url(../img/design/bg2.jpg) repeat-y;
  background-size: 100%;
}
  body #contents #main #body-design h3,
  body #contents #main #landplan h3,
  body #contents #main #greenplan h3{
    margin:0 0 30px;
    padding: 20px 0;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;}
  body #contents #main #body-design h3>span,
  body #contents #main #landplan h3>span,
  body #contents #main #greenplan h3>span{
    display: none;
  }
  body #contents #main #body-design h3{
  background-image: url(../img/design/ttl01.png);
  }
  body #contents #main #landplan h3{
    margin-top: 70px;
  background-image: url(../img/design/ttl02.png);
  }
  body #contents #main #greenplan h3{
    margin-top: 70px;
  background-image: url(../img/design/ttl03.png);    
  }

.white-grade-bg{
  background-image: linear-gradient(0deg, transparent, #ffffff);
}

/* lead  */

body #contents #main section#lead.bg-design {
  background: #231f21;
  color: #fff;
  text-align: left;
  position: relative;
}
body #contents #main section#lead.bg-design:after {
  content: '';
  display: block;
  background: url(../img/design/bg1.png) no-repeat;
  background-size: 100%;
  width: 360px;
  height: 760px;
  position: absolute;
  right: 0;
  top: 0;
}

  /* design */
body #contents #main #body-design{
  text-align: left;
  background: url(../img/design/bg3.jpg) repeat-y;
  background-size: cover;
  color: #595757;
  padding-top: 70px;
}
body #contents #main #body-design p {
  color: #595757;
  text-align: left;
}

body #contents #main #body-design>section{
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom center;
  background-image: url(../img/design/bg-content-cg2.png);
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding-bottom: 645px;
}

body #contents #main #body-design>section .bg-bird{
  margin: 70px auto 60px;
  width: 100%;
  background-repeat: no-repeat;
  background-position: top center;
  background-size: contain;
  background-image: url(../img/design/bg3-bird.png);
}

body #contents #main #body-design>section .bg-bird p,
body #contents #main #landplan>section p,
body #contents #main #greenplan>section p{
  text-align: center;
}
body #contents #main #body-design>section .bg-bird p.main-lead,
body #contents #main #landplan>section p.main-lead,
body #contents #main #greenplan>section p.main-lead{
  font-size: 31px;
  line-height: 36px;
  padding-bottom: 70px;
}

body #contents #main #body-design>section .bg-bird p{
font-size: 18px;
  line-height: 36px;
}


body #contents #main article .content-detail.white-grade-bg{
  padding: 45px 60px;
}

body #contents #main article .content-detail.white-grade-bg>.flex2{
  padding: 0 0 0 0;
}
body #contents #main article .content-detail.white-grade-bg>.flex2>dl{
  width: calc(50% - 40px);
}

@media screen and (max-width: 750px) {
  body #contents #main article .content-detail.white-grade-bg{
    width: calc(90% - 40px);
  padding: 45px 20px;
}
body #contents #main article .content-detail.white-grade-bg>.flex2>dl{
  width: 100%;
  margin-bottom: 40px;
}
}

body #contents #main article .content-detail .gold-ttl-line{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
}
body #contents #main article .content-detail .gold-ttl-line>div{
  width: calc(100% - 27px);

}
body #contents #main article .content-detail .gold-ttl-line:before{
content: "";
display: block;
padding: 7px 7px 0 0;
  background-image: linear-gradient(0deg, #804a0f, #ffed61 50%, #804a0f);
}

body #contents #main article .content-detail .gold-ttl-line>div>p{
  text-align: left!important;
}

body #contents #main article .content-detail .gold-ttl-line>div>p.gold-ttl-line-ttl{
  font-size: 20px!important;
  letter-spacing: 0.1em;
  line-height: 30px;
  padding-bottom: .75em;
}

body #contents #main article .content-detail .gold-ttl-line>div>p.gold-ttl-line-txt{
  font-size: 16px;
  letter-spacing: 0em!important;
  line-height: 30px!important;
}

body #contents #main article .content-detail .flex-design-detail{
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
 margin-top: 60px;
}

body #contents #main article .content-detail .flex-design-detail>.inner-txt{
  width: 240px;
}

body #contents #main article .content-detail .flex-design-detail>.inner-img{
width: calc(100% - 300px);
}

body #contents #main article .content-detail .flex-design-detail>.inner-img>p.ttl{
  color: #fff!important;
  font-size: 14px!important;
 text-align: center!important;
 display: block;
 width: 100%;
 margin-bottom: 10px;
 background: #231815;
}
body #contents #main article .content-detail .flex-design-detail>.inner-img>p.caption-right{
  font-size:12px !important;
  display: block;
  line-height: 12px!important;
text-align: right!important;
padding: 5px 0 10px;
}
body #contents #main article .content-detail .flex-design-detail>.inner-img>.grid4,
body #contents #main article .content-detail .flex-design-detail>.inner-img>.grid5{
  gap: 10px;
  padding-bottom: 0px!important;
  margin-bottom: 0px!important;
}
body #contents #main article .content-detail .flex-design-detail>.inner-img>.grid5{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;}

@media screen and (max-width: 750px) {
  body #contents #main article .content-detail .flex-design-detail{
    display: block;
  }

  body #contents #main article .content-detail .flex-design-detail>.inner-txt{
  width: 100%;
  margin-bottom: 20px;
}

body #contents #main article .content-detail .flex-design-detail>.inner-img{
width: 100%;
}

  body #contents #main article .content-detail .flex-design-detail>.inner-img>.grid4{
  grid-template-columns: 1fr 1fr 1fr 1fr; }
}

body #contents #main article .content-detail .flex-design-detail>.inner-img>.grid4>.white-bg,
body #contents #main article .content-detail .flex-design-detail>.inner-img>.grid5>.white-bg{
  display: flex;
  align-content: flex-end;
  background: #fff;
}
/* LAND PLAN */
/*@media screen and (min-width: 751px) {
  body #contents #main article .content-detail1400>.flex2,
body #contents #main section .content-detail1400>.flex2 {
  flex-wrap: no-wrap;
}
body #contents #main article .content-detail1400>.flex2>.box1,
body #contents #main section .content-detail1400>.flex2>.box1 {
  padding-left: 200px;
}
body #contents #main article .content-detail1400>.flex2>.box2>.inner-txt,
body #contents #main section .content-detail1400>.flex2>.box2>.inner-txt {
  padding-right: 200px;
}
}*/
body #contents #main #landplan {
  text-align: left;
  background: url(../img/design/bg2.jpg) repeat-y;
  background-size: 100%;
  color: #595757;
}
body #contents #main #landplan p {
  color: #595757;
}

body #contents #main #landplan .flex-landplan-icon{
  display: flex;
  flex-wrap: no-wrap;
  justify-content: space-between;
  align-items: flex-end;
}

body #contents #main #landplan .flex-landplan-icon>div{
  width: calc(100% - 190px);
}
body #contents #main #landplan .flex-landplan-icon>.icon-img{
  width: 170px;
}

body #contents #main #landplan .box2>figure,
body #contents #main #landplan .box2>div{
  margin-bottom: 40px;
}

body #contents #main #landplan .landplan-grid2{
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr 1fr;
}

body #contents #main #landplan .landplan-grid2>.large-img{
  grid-column: 1/3;
}
@media screen and (min-width: 751px) {
body #contents #main #landplan .flex2>.box3{
  padding-top: 40px;
}


body #contents #main #landplan .flex2>.box4{
  margin-top: -60px;
}
}
/* GREEN PLAN */
body #contents #main #greenplan {
  text-align: left;
  background-image: linear-gradient(0deg, #418b89, #61c1be);
  color: #fff;
}
body #contents #main #greenplan p {
  color: #fff;
}


/*# sourceMappingURL=access.css.map */