/* FONT size
---------------------------------------------------------------------
[ px ]	[ % ]
10px 	72  %		19px 	136 %
11px 	79  %		20px 	143 %
12px 	86 %		21px 	150 %
13px 	93 %		22px 	158 %
14px 	100 %		23px 	165 %
15px 	108 %		24px 	172 %
16px 	115 %		25px 	179 %
17px 	122 %		26px 	186 %
18px 	129 %
---------------------------------------------------------------------*/
#over_wrap {
  overflow: hidden;
}

.project1 .c1 h4 {
  background-image: url(../img/project/pj1_ch01_bg.jpg);
}

.project1 .c2 h4 {
  background-image: url(../img/project/pj1_ch02_bg.jpg);
}

.project1 .c3 h4 {
  background-image: url(../img/project/pj1_ch03_bg.jpg);
}

.project1 .c4 h4 {
  background-image: url(../img/project/pj1_ch04_bg.jpg);
}

.project1 .c5 h4 {
  background-image: url(../img/project/pj1_ch05_bg.jpg);
}

.project1 .c6 h4 {
  background-image: url(../img/project/pj1_ch06_bg.jpg);
}

.project1 .c7 h4 {
  background-image: url(../img/project/pj1_ch07_bg.jpg);
}

.project2 .c1 h4 {
  background-image: url(../img/project/pj2_ch01_bg.jpg);
}

.project2 .c2 h4 {
  background-image: url(../img/project/pj2_ch02_bg.jpg);
}

.project2 .c3 h4 {
  background-image: url(../img/project/pj2_ch03_bg.jpg);
}

.project2 .c4 h4 {
  background-image: url(../img/project/pj2_ch04_bg.jpg);
}

.project2 .c5 h4 {
  background-image: url(../img/project/pj2_ch05_bg.jpg);
}

.project2 .c6 h4 {
  background-image: url(../img/project/pj2_ch06_bg.jpg);
}

.new_project1 .c1 h4 {
  background-image: url(../img/project/pj1_ch01_bg.jpg);
}

.new_project1 .c2 h4 {
  background-image: url(../img/project/pj1_ch02_bg.jpg);
}

.new_project1 .c3 h4 {
  background-image: url(../img/project/pj1_ch03_bg.jpg);
}

.new_project1 .c4 h4 {
  background-image: url(../img/project/pj1_ch04_bg.jpg);
}

.new_project1 .c5 h4 {
  background-image: url(../img/project/pj1_ch05_bg.jpg);
}

.new_project1 .c6 h4 {
  background-image: url(../img/project/pj1_ch06_bg.jpg);
}

/* ++++++++++++++++++++++++++++++++++++++++++++++    PC    ++++++++++++++++++++++++++++++++++++++++++++++  */
/* 801px ~ */
@media screen and (min-width: 801px), print {
  /* ========== index ========== */
  .index .intro {
    font-weight: bold;
    text-align: center;
    margin-bottom: 55px;
  }
  .index .intro p {
    margin-top: 35px;
  }
  .index .intro p:nth-of-type(1) {
    color: #009CE5;
    font-size: 143%;
  }
  .index .intro p:nth-of-type(2) {
    font-size: 115%;
  }
  .index .banner_link {
    margin-top: 60px;
  }
  .index .banner_link a {
    display: block;
  }
  .index .banner_link a + a {
    margin-top: 25px;
  }
  /* ========== project ========== */
  #sd_content.project .h2 {
    margin-bottom: 0;
  }
  .h3_wrap img {
    width: 100%;
  }
  /* ========== project  member ========== */
  .pj_member {
    position: relative;
    z-index: 2;
    background-color: #009CE5;
    margin-top: -90px;
    padding-top: 70px;
    padding-bottom: 50px;
    padding: 50px 3em 50px;
    text-align: center;
    color: #fff;
    font-weight: bold;
    border-radius: 5px;
  }
  .pj_member dt {
    margin-bottom: 25px;
  }
  .project1 .pj_member dd ul li {
    display: inline-block;
    vertical-align: top;
    width: 340px;
  }
  .pj_member dd ul li p.pm1 {
    font-size: 93%;
    margin-top: 15px;
    height: 2.5em;
    line-height: 1.6em;
  }
  .pj_member dd ul li p.pm2 {
    margin-top: 20px;
    font-size: 172%;
  }
  .pj_member dd ul li p.pm3 {
    margin-top: 10px;
    line-height: 1.6em;
    font-size: 93%;
  }
  .project2 .pj_member {
    padding-bottom: 30px;
  }
  .project2 .pj_member dd {
    margin-top: 60px;
  }
  .project2 .pj_member dd ul li {
    display: inline-block;
    vertical-align: top;
    width: 480px;
    position: relative;
    padding-left: 190px;
    box-sizing: border-box;
    text-align: left;
  }
  .project2 .pj_member dd ul li img {
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -85px;
  }
  .project2 .pj_member dd ul li p.pm1 {
    font-size: 93%;
    margin-top: 0px;
    height: auto;
    line-height: 1.6em;
  }
  .project2 .pj_member dd ul li p.pm2 {
    margin-top: 5px;
  }
  .new_project1 .pj_member {
    padding-bottom: 50px;
  }
  .new_project1 .pj_member dd {
    margin-top: 60px;
  }
  .new_project1 .pj_member dd ul li {
    display: inline-block;
    vertical-align: top;
    width: 480px;
    position: relative;
    padding-left: 190px;
    box-sizing: border-box;
    text-align: left;
  }
  .new_project1 .pj_member dd ul li img {
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -85px;
  }
  .new_project1 .pj_member dd ul li p.pm1 {
    font-size: 93%;
    margin-top: 0px;
    height: auto;
    line-height: 1.6em;
  }
  .new_project1 .pj_member dd ul li p.pm2 {
    margin-top: 5px;
  }
  .pj_member .cap {
    margin-top: 55px;
    margin-inline-start: auto;
    width: -moz-fit-content;
    width: fit-content;
    text-align: left;
  }
  .new_project1 .pj_s {
    padding-left: 50px;
    padding-right: 50px;
  }
  .new_project1 .pj_s dd ul {
    display: flex;
    justify-content: space-between;
  }
  .new_project1 .pj_s dd ul:after {
    display: none;
  }
  .new_project1 .pj_s dd ul li {
    width: auto;
    padding-left: 155px;
  }
  .new_project1 .pj_s dd ul li img {
    width: 140px;
    margin-top: -65px;
  }
  .new_project1 .pj_s dd ul li p.pm1, .new_project1 .pj_s dd ul li p.pm3 {
    font-size: 86%;
  }
  .new_project1 .pj_s dd ul li p.pm2 {
    font-size: 165%;
  }
  .pm_l {
    margin-top: 100px;
  }
  /* ========== project  chapter ========== */
  .chapter {
    margin-top: 135px;
  }
  .chapter p.cap {
    margin-top: 20px;
  }
  .chapter p.cap + .cap {
    margin-top: 10px;
  }
  .chapter p.cap.indent {
    padding-left: 2.8em;
    text-indent: -2.8em;
  }
  .chapter h4 {
    background-position: center;
    background-size: cover;
    text-align: center;
    padding: 50px 0 60px;
  }
  .chapter h4 span {
    display: block;
    font-size: 204%;
    color: #fff;
    font-weight: bold;
    line-height: 1.6em;
  }
  .chapter h4 span + span {
    margin-top: 15px;
  }
  .chapter .pht_text_box {
    position: relative;
    margin-top: 70px;
    line-height: 2.8em;
  }
  .project1 .chapter .pht_text_box .text {
    min-height: 420px;
  }
  .chapter .pht_text_box.pht_right .text {
    padding-right: 436px;
  }
  .chapter .pht_text_box.pht_left .text {
    padding-left: 436px;
  }
  .chapter .pht_text_box .pht {
    position: absolute;
  }
  .chapter .pht_text_box.pht_right .pht {
    right: -120px;
    top: 0;
  }
  .chapter .pht_text_box.pht_left .pht {
    left: -138px;
    top: 0;
  }
  .chapter .pht_text_box .pht + img {
    margin-top: 50px;
  }
  .chapter .pht_text_box.pht_100 .pht {
    position: relative;
    margin-top: 70px;
  }
  .chapter .pht_text_box.pht_100 .text {
    min-height: auto;
  }
  /* pj1 */
  .project1 .c2 .pht_text_box .pht,
  .project1 .c4 .pht_text_box .pht,
  .project1 .c6 .pht_text_box .pht {
    top: -30px;
  }
  .project1 .c3 .pht_text_box .pht {
    top: 120px;
  }
  /* pj2 */
  .project2 .c2 .pht_text_box .pht,
  .project2 .c4 .pht_text_box .pht {
    top: -30px;
  }
  .project2 .c3 .pht_text_box .pht,
  .project2 .c5 .pht_text_box .pht {
    top: 120px;
  }
  /* new_pj1 */
  .new_project1 .text {
    min-height: 420px;
  }
  .new_project1 .c1 .pht_text_box + .pht_text_box .text {
    padding-top: 90px;
  }
  .new_project1 .c1 .pht_text_box + .pht_text_box .pht {
    top: -10px;
  }
  .new_project1 .c3 .pht_text_box .pht,
  .new_project1 .c5 .pht_text_box .pht {
    /* top:120px; */
  }
  /* pj1 btn */
  #over_wrap .btn {
    display: block;
    background-color: #009CE5;
    margin: 20px 0;
    width: 370px;
    padding: 10px 20px 10px 20px;
    color: #fff;
    font-weight: bold;
    position: relative;
  }
  #over_wrap .btn span {
    font-size: 12px;
  }
  #over_wrap .btn:after {
    content: "";
    position: absolute;
    width: 16px;
    height: 6px;
    top: 50%;
    margin-top: -3px;
    background-image: url("../../common/img/arrow_w.png");
    background-repeat: no-repeat;
    background-size: 16px 3px;
    right: 20px;
    transition: 0.4s;
  }
  #over_wrap .btn:hover {
    color: #F2FAFE;
  }
  #over_wrap .btn:hover:after {
    right: 15px;
  }
}
/* ++++++++++++++++++++++++++++++++++++++++++++++    sp    ++++++++++++++++++++++++++++++++++++++++++++++  */
/* ~ 800px */
@media only screen and (max-width: 800px) {
  /* ========== index ========== */
  .index .intro {
    font-weight: bold;
    margin-bottom: 35px;
  }
  .index .intro p {
    margin-top: 25px;
  }
  .index .intro p:nth-of-type(1) {
    color: #009CE5;
    font-size: 111%;
  }
  .index .banner_link {
    margin-top: 30px;
  }
  .index .banner_link a {
    display: block;
  }
  .index .banner_link a + a {
    margin-top: 25px;
  }
  .index .banner_link a img {
    max-width: 100%;
  }
  /* ========== project ========== */
  #sd_content.project .h2 {
    margin-bottom: 0;
  }
  .project .h3_wrap img {
    width: 100%;
  }
  .project1 .h3_wrap .wrap {
    padding: 0;
  }
  /* ========== project  member ========== */
  .pj_member {
    background-color: #009CE5;
    padding-top: 25px;
    padding-bottom: 30px;
    margin: 0 15px;
    margin-top: -20px;
    position: relative;
    z-index: 2;
    text-align: center;
    color: #fff;
    font-weight: bold;
    border-radius: 5px;
  }
  .pj_member dt {
    margin-bottom: 25px;
  }
  .pj_member dt img {
    max-width: 70%;
  }
  .pj_member dd ul li:not(:first-child) {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.4);
  }
  .pj_member dd ul li {
    position: relative;
    padding-left: 120px;
    text-align: left;
  }
  .pj_member dd ul li img {
    width: 100px;
    position: absolute;
    left: 0;
  }
  .pj_member dd ul li p.pm1 {
    font-size: 93%;
    line-height: 1.6em;
  }
  .pj_member dd ul li p.pm2 {
    margin-top: 5px;
    font-size: 132%;
  }
  .pj_member dd ul li p.pm3 {
    margin-top: 5px;
    line-height: 1.6em;
    font-size: 93%;
  }
  .pj_member .cap {
    margin-top: 30px;
    text-align: left;
  }
  /* ========== project  chapter ========== */
  .chapter {
    margin-top: 85px;
  }
  .chapter p.cap {
    margin-top: 20px;
  }
  .chapter p.cap + .cap {
    margin-top: 10px;
  }
  .chapter p.cap.indent {
    padding-left: 2.8em;
    text-indent: -2.8em;
  }
  .chapter h4 {
    background-position: center;
    background-size: cover;
    text-align: center;
    padding: 20px 10px 20px;
  }
  .chapter h4 span {
    display: block;
    font-size: 130%;
    color: #fff;
    font-weight: bold;
    line-height: 1.6em;
  }
  .chapter h4 span + span {
    margin-top: 15px;
  }
  .chapter .pht_text_box {
    position: relative;
    margin-top: 30px;
    line-height: 2em;
  }
  .chapter .pht_text_box.pht_right .text img {
    float: right;
    width: 50%;
    margin-left: 10px;
  }
  .chapter .pht_text_box.pht_left .text img {
    float: left;
    margin-right: 10px;
    width: 50%;
  }
  .chapter .pht_text_box .pht {
    text-align: center;
    margin-top: 20px;
  }
  .chapter .pht_text_box .pht img {
    width: 100%;
  }
  .chapter .pht_text_box .pht + img {
    margin-top: 30px;
    width: 100%;
  }
  .chapter .pht_text_box.pht_100 .pht {
    margin-top: 30px;
  }
  /* pj1 btn */
  #over_wrap .btn {
    display: block;
    background-color: #009CE5;
    margin: 20px 0;
    width: 100%;
    padding: 10px 20px 10px 20px;
    color: #fff;
    font-weight: bold;
    position: relative;
    box-sizing: border-box;
    line-height: 1.3;
  }
  #over_wrap .btn span {
    font-size: 12px;
  }
  #over_wrap .btn:after {
    content: "";
    position: absolute;
    width: 16px;
    height: 6px;
    top: 50%;
    margin-top: -3px;
    background-image: url("../../common/img/arrow_w.png");
    background-repeat: no-repeat;
    background-size: 16px 3px;
    right: 15px;
    transition: 0.4s;
  }
}/*# sourceMappingURL=project.css.map */