/*
//projects
*/

main a, main a > span {
  color: #01B5D0;
}

/* key_visual */
.ttl_key_visual {
    color: #01B6D0;
}
.area_line {
    padding: 0 0 30px 0;
    font-weight: normal;
}
.sec_line {
    position: relative;
    margin: auto;
}
.item_line {
    font-family: 'Oswald', sans-serif;
    letter-spacing: 12.47px;
    color: #FFFFFF;
}
.item_line.left {
    width: 50%;
    font-size: 43px;
    letter-spacing: 12.47px;
}
.item_line.right {
    width: 100%;
    font-size: 43px;
    margin-left: 110px;
    text-align: right;
}
.item_line.right span {
     font-size: 30px;
     font-weight: 400;
     margin: 0 10px 0 0;
     letter-spacing: 5.7px;
}
.item_line.right .small {
    font-size: 1.125rem;
    padding: 20px 5px 0 0;
    font-family: 'Noto Sans JP', sans-serif;
    letter-spacing: 4.5px;
}
.item_line.right .small span {
    font-size: 1.125rem;
}
.sec_line .line_horizontal {
    background: transparent linear-gradient(246deg, #FFFFFF 0%, rgba(0,0,0,0) 100%) 0% 0% no-repeat padding-box;
    border: none;
    margin: 17px auto 17px 16%;
    width: 60%;
    height: 2px;
}
.sec_line .line_diagonal {
    background: transparent linear-gradient(246deg, rgba(0,0,0,0) 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box;
    position: absolute;
    width: 78px;
    height: 2px;
    left: 52%;
    bottom: 46%;
    transform: rotate(136deg);
    border-top: 0px;
}
.img_key_visual {
    position: relative;
    padding: 0 0 60px 0;
}
.img_key_visual img {
    width: 100%;
}
.area_key_visual {
    display: flex;
    justify-content: center;
}
.box_key_visual {
    width: 50%;
    padding: 0 0 30px 0;
}
.box_key_visual.left {
    text-align: right;
    margin-right: 3%;
}
.box_key_visual.left .ttl_key_visual {
    font-size: 33px;
    letter-spacing: 1.58px;
    font-family: 'Noto Sans JP', sans-serif;
}
.box_key_visual.left .txt_key_visual {
    font-size: 18px;
    letter-spacing: 0.28125rem;
}

.ttl_key_visual {
    padding: 0 0 20px 0;
    font-family: 'Oswald', sans-serif;
    font-size: 30px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.16875rem;
}

.txt_key_visual {
    font-family: 'Oswald', sans-serif;
    font-size: 17.01px;
    font-weight: 300;
    letter-spacing: 1.53px;
    line-height: 44px;
    color: #595757;
}
.box_key_visual.left .txt_key_visual {
    letter-spacing: 0.3rem;
    font-family: 'Noto Sans JP', sans-serif;
}

.pc_line_wa {
    position: relative;
}
.pc_line_in {
    position: absolute;
    top: -30vw;
    left: 4.5%;
    width: 26%;
    min-width: 345px;
    max-width: 345px;
    line-height:1;
}

@media screen and (max-height: 640px) {
    .pc_line_in {
      top: -34vw;
    }
}
main {
  color: #595757;
}


/* projects */
.pc_line_wa.projects {
    height: 360px;
    padding-top: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.projects .area_line {
    padding: 0 0;
}

.projects .pc_line_in {
    position: initial;
    width: auto;
    max-width: 100%;
}
.projects .sec_line {
    position: relative;
    width: 90%;
    max-width: 445px;
    margin: auto;
}
.projects .sec_line .line_horizontal {
    background: transparent linear-gradient(246deg, #00A9C6 0%, rgba(0,0,0,0) 100%) 0% 0% no-repeat padding-box;
}
.projects .sec_line .line_diagonal {
    background: transparent linear-gradient(246deg, rgba(0,0,0,0) 0%, #00A9C6 100%) 0% 0% no-repeat padding-box;
}
.projects .item_line {
    color: #13768D;
}
.projects .item_line .small span {
    color: #13768D;
}
.projects .item_line .small {
    color: #595757;
    margin-right: -10px;
}


.projects .nav_breadcrumbs {
    padding-top: 0px;
}

/* key_visual end */

.area_content {
    max-width: 1920px;
    margin: 0 auto;
}

.ttl_projects {
    width:100%;
    max-width:1200px;
    margin:0 auto;
    padding: 60px 0 40px 0;
    font-family: 'Noto Sans JP';
    font-size: 1.8125rem;
    font-weight: 100;
    letter-spacing: 0.3rem;
    text-align: center;
    color: #595757;
}

/* h2 */
.ttl_section {
    font-family: 'Oswald', sans-serif;
    text-align: center;
    font-size: 42px;
    letter-spacing: 2.25px;
    text-transform: uppercase;
    color: #01B5D0;
    font-weight: 400
  }
  .line_horizontal {
      background: transparent linear-gradient(90deg, #00A9C6 0%,rgba(0,0,0,0)) 0% 0% no-repeat padding-box;
      border: none;
      margin: 12px auto;
      width: 35%;
      height: 2px;
      margin-right: 25%;
  }
  .sub_ttl_section {
      font-size: 1.25rem;
      text-align: center;
      letter-spacing: 5px;
      color: #595757;
  }
  /* h2 end*/

.area_slider_projects_01 {
    max-width: 1170px;  /* swipe + 10px */
    margin: 0 auto;
}

.area_other_cases {
    padding: 50px 0;
    background-color: #EEEEEE;
    margin-bottom: 95px;
}

.area_projects_info {
    width: 70%;
    margin: auto;
    padding: 50px 0;
    color: #595757;
}

/*  */
.sec_projects {
    max-width: 1080px;
    padding: 50px 0 80px 0;
    margin: auto;
}
.box_projects {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.item_projects {
    display: flex;
    align-items:center;
    border-bottom: 1px solid #595757;
    padding:25px 0;
}
.item_projects_left {
    display: inline-block;
    width: 210px;
    font-size: 1.125rem;
}
.item_projects_right {
    display: inline-block;
    width: 307px;
    font-size: 1.125rem;
}
.box_projects a {
    margin-left: 20px;
    padding: 5px 10px;
    border: 1px solid #595757;
    color: #595757;
}
.box_projects a::after {
    content: '';
    display: inline-block;
    width: 9px;
    height: 9px;
    border-top: 2px solid #595757;
    border-right: 2px solid #595757;
    transform: rotate(45deg);
    margin: 0 5px;
}
/* end */

/* projects text */
.sec_projects_txt {
    max-width: 1080px;
    margin: auto;
}
.sec_projects_txt > div {
    padding: 0 0 30px 0;
}

.box_projects_txt {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 18px;
    letter-spacing: 3.5px;
    line-height: 36px;
}
.box_projects_txt_sub {
    font-family: 'Oswald', sans-serif;
    font-size: 1.0625rem;
    letter-spacing: 1.53px;
    line-height: 2rem;
}
.item_projects_txt > * {
    /*line-height: 1.5rem;*/
}
/* projects text end */

/* lightbox */
/* .lightbox .lb-image {
    border: none;
}
.lb-nav a.lb-next,
.lb-nav a.lb-prev {
    opacity: 1;
} */
/* lightbox end */

.area_slider_projects_01,
.area_slider_projects_02{
    display:none;
}

@media (max-width: 768px) {
    /* スマートフォン以下専用スタイル */
    area_content {
    line-height: 1.8rem;
    }
    /* key_visual */
    .pc_line_wa {
        position: static;
    }
    .pc_line_in {
        position: static;
        top: auto;
    }
    .area_line {
        margin: 0 auto;
        padding: 50px 0;
        min-width: 350px;
    }
    .sec_line {
        position: relative;
        max-width: 200px;
        margin: auto;
    }
    .projects .sec_line {
        position: relative;
        max-width: 200px;
        margin: auto;
    }
    .item_line {
        font-family: 'Oswald';
        letter-spacing: 7.99px;
        color: #13768D;
    }
    .item_line.left {
        width: 50%;
        font-size: 1.375rem;
        letter-spacing: 3.3px;
    }
    .item_line.left p {
        text-align: right;
        margin-right: 2rem;
    }
    .item_line.right {
        width: 90%;
        font-size: 1.375rem;
        margin-left: auto;
        letter-spacing: 3.3px;
        text-align: right;
    }
    .item_line.right span {
        font-size: 0.875rem;
        font-weight: 400;
        margin: 0 5px 0 0;
        letter-spacing:2.5px;
    }
    .item_line.right p {
        text-align: right;
    }
    
    
    .item_line.right .small {
        padding-top: 20px;
        font-size: 14px;
        color: #595757;
        margin-right: 5px;
    }
    .item_line.right .small span {
        font-size: 0.875rem;
        color: #13768D;
    }
    .sec_line .line_horizontal {
        background: transparent linear-gradient(246deg, #00a9c6 0%, rgba(0,0,0,0) 100%) 0% 0% no-repeat padding-box;
        border: none;
        margin: 17px auto;
        width: 70%;
        height: 2px;
    }
    .sec_line .line_diagonal {
        background: transparent linear-gradient(246deg, rgba(0,0,0,0) 0%, #00a9c6 100%) 0% 0% no-repeat padding-box;
        position: absolute;
        width: 50px;
        height: 2px;
        left: 35%;
        bottom: 55px;
        transform: rotate(130deg);
        border-top: 0px;
    }
    .img_key_visual {
        margin-top:65px;
        padding: 0;
    }
    .area_key_visual {
        display: block;
    }
    .box_key_visual {
        width: 90%;
        margin: auto;
        padding: 0 0 30px 0;
    }
    .box_key_visual.left {
        text-align: left;
        margin-right: auto;
    }
    .ttl_key_visual {
        padding: 0 0 10px 0;
        font-family: 'Oswald';
        font-size: 1.125rem;
        font-weight: 500;
        letter-spacing: 0.05rem;
        line-height: 2rem;
    }
    .box_key_visual.left .ttl_key_visual {
        font-family: "Noto Sans JP", sans-serif;
        font-size: 1.125rem;
        letter-spacing: 0.1875rem;
    }
    
    .txt_key_visual {
        font-family: 'Oswald', sans-serif;
        font-size: 0.75rem;
        letter-spacing: 1.4px;
        line-height: 1.6rem;
    }
    .box_key_visual.left .txt_key_visual {
	    font-family: "Noto Sans JP", sans-serif;
        font-size: 0.875rem;
        letter-spacing: 0.0875rem;
        line-height: 1.6rem;
    }
    /* projects */
    .pc_line_wa.projects {
        padding: 0;
        height:auto;
    }
    /* key_visual end */
    
    .area_slider_projects_01{
        display: block;
    }
    
    /*  */
    .box_projects {
        display: block;
    }
    .ttl_projects {
        padding: 14px 0 32px 0;
        width: 90%;
        margin: auto;
        font-size: 1rem;
        font-weight: 100;
        letter-spacing: 1.6px;
        text-align: left;
        line-height: 1.6rem;
    }
    .box_projects a {
        padding: 9px 10px;
    }
    .box_projects_txt {
        font-size: 1rem;
        letter-spacing: 1px;
    }
    /*  */
    .area_projects_info {
        width: 90%;
        padding: 0;
    }
    .area_other_cases {
        padding: 50px 0;
        background-color: #FFF;
        margin-bottom: 40px;
    }
    .area_slider_projects_02_inner {
        background-color: #EEE;
        padding: 45px 0;
    }
    
    .item_projects {
        display: flex;
        width: 100%;
        align-items: center;
        margin: 0;
        /*height: 60px;*/
        padding: 10px 0;
    }
    .item_projects_left {
        width: 25%;
        /*font-size: 0.805rem;*/
    }
    .item_projects_right {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 50%;
        min-width: 240px;
        /*font-size: 0.805rem;*/
    }
    /* end */
    
    /* h2 */
    .ttl_section {
      font-family: 'Oswald', sans-serif;
      text-align: center;
      font-size: 22px;
      text-transform: uppercase;
      color: #01B5D0;
    }
    .line_horizontal {
        width: 90%;
        margin: 3% auto;
    }
    .sub_ttl_section {
        font-size: 0.875rem;
    }
    /* h2 end*/
    
    /*.slick-list, .slick-track { touch-action:pan-y; }*/
    .swipebox{ pointer-events: none; }

}

/*SMT改修分*/
.sec_projects{
    margin:60px auto;
    width:100%;
    max-width:1080px;
}
.projects-tbl{
    width:100%;
    margin:0 auto 80px;
    display: flex;
    flex-wrap:wrap;
    justify-content: space-between;
}
.projects-tbl li{
    width:calc(50% - 20px);
    display: flex;
    flex-wrap:wrap;
    align-items:center;
    font-size:18px;
    font-size: clamp(14px,2vw,18px);
    padding:35px 0;
    border-bottom:solid 1px #231815;
}
.projects-tbl li span{
    display: flex;
    align-items:center;
    min-height:40px;
}
.projects-tbl li .item-name{
    width:33%;
}
.projects-tbl li .item-name+span{
    width:67%;
    justify-content: space-between;
    padding:0 1em;
}
.projects-tbl li a{
    font-size: 14px;;
    border:solid 1px #595757;
    display: inline-block;
    padding:10px 12px;
    color:#595757;
    text-align: center;
}
.projects-tbl li a:hover{
    color:#01B5D0;
}

.projects-tbl li a::after {
  content: '';
  display: inline-block;
  width: 9px;
  height: 9px;
  border-top: 2px solid #595757;
  border-right: 2px solid #595757;
  transform: rotate(45deg);
  margin: 0 5px;
}

@media screen and (max-width: 1080px) {
    .sec_projects{
        width:94%;
    }
    .projects-tbl li .item-name{
        padding-left:0.5em;
    }
}

@media screen and (max-width: 768px) {
    .projects-tbl li{
        font-size:14px;
        width:100%;
        padding:18px 0;
        justify-content: space-between;
    }
    .projects-tbl li .item-name{
        font-size:14px;
    }
}