@charset "utf-8";

#main_title{
  background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(../img/feature_bg.jpeg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding:85px 0px;
  
  @media (max-width: 480px){
    padding:50px 0px;
  }

  & p{
    text-align:center;
    font-weight:bold;
    color:#fff;

    &.en{
      font-size:20px;
    }

    &.jp{
      font-size:32px;
      
	    @media (max-width: 480px){
        font-size:25px;
      }

    }

    &.caption{
      font-size:18px;
      font-weight: normal;
      position: relative;
      top: 30px;
      padding: 0 10px;

      @media (max-width: 480px){
        font-size:14px;
      }
    }
  }
}

#breadcrumb{
  padding:25px;
  max-width:1520px;
  margin:0 auto;

  @media (max-width: 1024px) {
    display: block;
    padding:25px;
  }

  & ol{
    display:flex;
    flex-wrap: wrap;
	  list-style: none;

    & li{
      
      &:not(:last-child){
        &::after{
          font-family: "Material Icons";
          content: "\e5cc";
          vertical-align: middle;
	        margin: 0.3em;
        }
      }

      @media (max-width: 1024px) {
        padding:0px;
      }

      & a{
        font-size:14px;

        @media (max-width: 1024px) {
          color:#1A1A1A;
        }
      }

    }
  }
}

.sp{
  display:none;

  @media (max-width: 480px){
    display:block;
  }

}

/***** 以下、固有ページ *****/

/* ArgosView の特長 */
#features{
  /* 8つの特長 */
   & #feature_point{
    max-width:1280px;
    margin:0 auto 100px;

    @media (max-width: 480px){
      margin:0 auto 50px;
    }

    & ul{
      display:flex;
      flex-wrap: wrap;
      list-style: none;
      justify-content: center;
      gap:56px;

      @media (max-width: 480px){
        gap:15px;
      }

      & li{
        width:250px;
        height:250px;
        display:flex;
        flex-flow: column;
        justify-content: center;
        border:3px solid #013567;
        text-align:center;

        @media (max-width: 480px){
          width:160px;
          height:170px;
        }

        & *{
          color:#013567;
          font-weight: bold;
        }

        & img{
          height:97px;
          width:auto;
          object-fit: contain;
        }
      }
    }
  }

  /* 活躍場所マップ */
  & #usecasemap{
    max-width:1280px;
    margin:0 auto;
    position: relative;

    & .usecasemap_detail{
      background: rgba(255, 255, 255, 0.9);
      position: absolute;
      z-index: 50;
      border-radius: 20px;
      width:500px;
      left:55px;
      top:40px;
      padding:30px;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

      @media (max-width: 480px){
        width:90%;
        position: relative;
        left:0px;
        top:0px;
        margin:0 auto;
        border:1px solid #ccc;
      }

      & .usecasemap_title{
        display:flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;  

        & .main{
          font-size:28px;
          font-weight:bold;
        
          @media (max-width: 480px){
            font-size:20px;
          }
        }

        & .sub{
          font-size:14px;
        }
      }
    
      & .usecasemap_place{
        display:none;
        flex-wrap: wrap;
        gap: 8px;
        margin-top:10px;

        @media (max-width: 480px){
          display:flex;
        }
        
        & div{
          border: solid 2px;
          white-space: nowrap;
          max-width: 100%;
          padding:1px 8px;
          font-weight: bold;
          background-color: #FFF;
        }
      }

      & .btn{
        background-color: #28A7E1;
        border-radius: 100px;
        border:0px;
        margin:25px auto;
        width:80%;
        display:flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        padding:22px;

        & *{
          color:#fff;
          font-size:14px;
        }
      }

      & .detail_wrap{
        & .detail_title{
          color:#3D6AAE;
          padding-left:10px;
          margin-bottom:20px;
          font-size:28px;
          font-weight:bold;
          border-left:10px solid #3D6AAE;
          
          @media (max-width: 480px){
            font-size:20px;
          }
        }

        & .detail_img{
          width:auto;
          height:140px;
          object-fit: contain;
          display:block;
          margin:0 auto;
        }
      }
    }

    & .usecasemap_wrap{
      text-align:center;
      overflow: hidden;

      & img{
        max-width:1190px;
        max-height:690px;
        object-fit: cover;
        transition: transform .5s;

        @media (max-width: 480px){
          display:none;
        }
      }
    }
  }

  & #featuer_contact{

      & .contact_info_wrap{
        padding:30px;
        text-align: center;
        
        @media (max-width: 480px){
          text-align: left;
        }

        & .btn_box{
          margin:53px 0px 0px 0px;
          
          @media (max-width: 480px){
            margin:30px 0px 0px 0px;
            justify-content: center;
          }

          & a{
            font-size:28px;
            margin:0px;
            border-radius:10px;

            @media (max-width: 480px){
              font-size:18px;
              padding:15px 20px;
            }

            &::after{
              content:none;
            }
          }
        }
      }
    
  }

  .small{
    font-size:0.8em;
  }
}

#featuer_contact, #scene_contact{
  max-width:1280px;
  margin:125px auto;
  display:flex;
  align-items: stretch;
  flex-wrap: nowrap;
  border:1px solid #000000;

  @media (max-width: 480px){
    width:90%;
    margin:50px auto;
    flex-wrap: wrap;
  }
  
  & .contact_title{
    display: flex;
    align-items: center;
    justify-content: center;
    color:#fff;
    font-weight:bold;
    font-size:30px;
    background-color: #013567;
    width:500px;
    
    @media (max-width: 480px){
      font-size:20px;
      padding:20px;
    }
  }

  & .contact_info{
    margin:0 auto;
  }
}