@charset "utf-8";

.section_inner{
  max-width: 980px;
  margin: 20px auto 50px;
}

/* headLine1 */
.title{
  display: flex;
  width: 100%;
  border-top: 1px solid #999;
  border-bottom: 1px solid #999;
}
.title_image{
  width: 50%;
}
.title_inner{
  width: 50%;
  margin-left: auto;
  padding: 20px 0 20px 25px;
  padding-right: 0;
  background: #efefef;
  border-left: 1px solid #999;
}
@media all and (max-width: 980px) {
  .title_image,
  .title_inner{
    width: 490px;
  }
}
.title_text{
  padding: 8px 0;
  padding-left: 10px;
  border-left: 6px solid #0066cc;
  line-height: 1.3;
}
.title_text h1{
  font-size: 4vw;
  font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif; 
}
.title_text span{
  margin-left: 4px;
  color: #0066cc;
  font-weight: bold;
}
@media screen and (min-width:641px)  and (max-width:980px) {
  .title_text h1{
    font-size: 3vw;
  }
}
@media screen and (min-width:981px) {
  .title_text h1{
    font-size: 2.2em;
  }
}


/* ページ別背景 */
.method.spr .title_image{
  background: url("/asset/img/top_slider_01.jpg") no-repeat center center;
  background-size: cover;
}
.method.omega .title_image{
  background: url("/asset/img/top_slider_04.jpg") no-repeat center center;
  background-size: cover;
}
.method.sprnx .title_image{
  background: url("/asset/img/top_slider_02.jpg") no-repeat center center;
  background-size: cover;
}
.method.sprse .title_image{
  background: url("/asset/img/top_slider_03.jpg") no-repeat center center;
  background-size: cover;
}
.member .title_image{
  background: url("/asset/img/titlebg_member.jpg") no-repeat bottom center;
  background-size: cover;
}
.news .title_image{
  background: url("/asset/img/titlebg_news.jpg") no-repeat center center;
  background-size: cover;
}
.contact .title_image{
  background: url("/asset/img/titlebg_contact.jpg") no-repeat center center;
  background-size: cover;
}
.seminar .title_image{
  background: url("/asset/img/titlebg_seminar.jpg") no-repeat center center;
  background-size: cover;
}
.request .title_image{
  background: url("/asset/img/titlebg_request.jpg") no-repeat center center;
  background-size: cover;
}


/*--------------------
  工法概要 共通
----------------------------------------*/
/* ビデオ */
.video_wrap{
  position: relative;
  padding-top: 56.25%;
  overflow: hidden;
}
.video_wrap video{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* 左右分割 */
.left_content,
.right_content{
  display: inline-block;
  width: 100%;
  vertical-align: top;
}

@media screen and (min-width:481px) {
  .left_content,
  .right_content{
    width: 48%;
  }
  .left_content{margin-right: 1%;}
  .right_content{margin-left: 1%;}
}
/*  ----- 概要 -----  */
.main > section{
  padding: 20px 15px;
}
@media screen and (min-width:981px){
  .main > section{
    padding: 50px 0;
  }
}

.overview .headline{
  position: relative;
}
.overview .headline::before{
  content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: 15px;
  width: 1px;
  height: 2px;
  background: #0066cc;
  animation: 1s linear 1.5s liner;
  animation-fill-mode: forwards;
}
@keyframes liner {
  0% { width: 1px; }
  100%   { width: 100%; }
}

.overview .headline h2{
  display: inline-block;
  position: relative;
  background: #fff;
  color: #0066cc;
  font-size: 3.125rem;
  font-weight: normal;
  z-index: 2;
}
.overview .headline + p{
  font-size: 1.25rem;
}
.overview .image{
  display: table;
  width: 100%;
}
.overview .image figure{
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
/* .overview .image figure img{
  height: 90%;
} */

.sprse .overview .image figure{
  background: #f3f3f3;
  border: 1px solid #bbb;
  border-radius: 12px;
  height: 270px;
}

.video_frame{
  border: 1px solid #ccc;
}


/*  ----- 特長 ----- */
.method_feature_section{
  background-color: #eef2f5;
}
.method_feature ul{
  display: flex;
  flex-wrap: wrap;
  list-style: none;
}
.method_feature li{
  position: relative;
  width: 100%;
  margin-bottom: 20px;
  padding: 20px 20px 20px 35px;
  border-radius: 0 30px 30px 30px;
  border: 2px solid #235a91;
  background-color: #fff;
  overflow: hidden;
}
.method_feature li .number{
  position: absolute;
  top: 0;
  left: 0;
}
.method_feature li .number p{
  position: relative;
  padding: 0px 0.75rem;
  font-weight: bold;
  text-align: center;
  z-index: 2;
  line-height: 1.2;
  color: #fff;
  font-size: 2rem;
}
/* .method_feature li .number p::first-letter{
  color: #fff;
  font-size: 2rem;
} */
.method_feature li .number p::before{
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border: 30px solid transparent;
  border-top: 30px solid #235a91;
  border-left: 30px solid #235a91;
  z-index: -1;
}
@media screen and (min-width:481px) {
  .method_feature li{
    width: 49%;
    margin-right: 1%;
  }
}a

.method_feature .headLine3{
  padding-left: 1em;
  color: #0066cc;
  font-size: 1.375rem;
}
.method_feature li figure{
  margin-top: 20px;
  text-align: center;
}

/*spr-nxのみ*/
.sprnx .method_feature li:last-child{
  width: 100%;
  margin-right: 0;
}

.sprse .sprse_memo{
  display: inline-block;
  padding: 2px 14px;
  background: #ed275e;
  color: #fff;
  font-size: 1.125rem;
}
/* ----- 基本仕様 ----- */
.method .method_spec table{
  border-collapse: collapse;
  width: 100%;
}
.method .method_spec table th,
.method .method_spec table td{
  padding: 8px;
  border: 1px solid #8ea6bd;;
}
.method .method_spec table th{
  background-color: #ecf2f7;
}

/* ----- 施工手順 -----*/
.process_flow_section{
  background-color: #eef2f5;
}

/* 施工手順 下矢印 */
.process_flow{
  width: 90%;
  margin-right: auto;
  margin-left: auto;
}
.process_arrow{
  position: relative;
  border: 3px solid #6ea8e3;
  background-color: #fff;
  padding: 20px;
  margin-top: 20px;
}
.process_arrow::before,
.process_arrow::after{
  content: "";
  position: absolute;
  left: 50%;
  display: block;
  width: 0;
  z-index: 1;
  transform: translateX(-50%);
}
.process_arrow::before{
  bottom: -90px;
  border: 50px solid transparent;
  border-top: 40px solid #6ea8e3;
}
.process_arrow::after{
  bottom: -86px;
  border: 50px solid transparent;
  border-top: 40px solid #fff;
}
.process_flow .process_arrow:last-child::before,
.process_flow .process_arrow:last-child::after{
  display: none;
}

/*施工手順タイトル*/
.process_arrow .headLine3{
  border-bottom: 1px dotted #6ea8e3;
  font-size: 1.375rem;
}
.process_arrow .headLine3::first-letter{
  color: #0066cc;
}

/* 施工手順 2分割 */
.process_arrow .pipemaking_method{
  padding: 0 10px;
  background-color: #fff;
  vertical-align: text-top;
}

@media screen and (min-width:501px){
  .process_arrow .pipemaking_method{
    display: inline-block;
    width: 48%;
  }
  .process_arrow .pipemaking_method:nth-child(2){
    margin-right: 5px;
    border-right: 1px solid #ccc;
  }
  .process_arrow .pipemaking_method:nth-child(3){
    margin-left: 5px;
  }
}

.pipemaking_method .name{
  position: relative;
  padding-left: 20px;
}
.pipemaking_method .name::before{
  color: #0066cc;
  content: '＞';
  font-size: 1rem;
  font-weight: bold;
  left: 0;
  margin: 0 0 0;
  position: absolute;
  top: 50%;
  -webkit-transform: scale(.6,1);
  -ms-transform: scale(.6,1);
  transform: scale(.6,1) translate(0, -50%);
}

.process_arrow .pipemaking_method ol{
  padding-left: 1em;
  text-indent: -1em;
}


/* NEW アイコン */
.icon_new{
  display: inline-block;
  background-color: #c00;
  color: #fff;
  padding: 1px 8px 0;
  font-size: 0.85em;
  margin-right: 8px;
}

/* point ブロック */
.flex_twoblock{
  display: block;
}

.point_block{
  position: relative;
  width: 100%;
  margin-top: 30px;
  padding: 16px;
  border: 3px solid #6ea8e3;
  border-radius: 0 10px 10px 10px;
  background-color: #f5faff;
}
.point_block::before {
  content: 'POINT';
  position: absolute;
  top: -20px;
  left: -3px;
  height: 20px;
  padding: 3px 1em 0;
  border-radius: 10px 10px 0 0;
  background: #0066cc;
  color: #fff;
  line-height: 1;
  font-size: 13px;
}
@media screen and (min-width:481px) {
  .flex_twoblock{
    display: flex;
  }
  .point_block{
    width: 49%;
  }
  .flex_twoblock .leftblock,
  .flex_twoblock .mr{margin-right: 1%;}
  .flex_twoblock .ml{margin-left: 1%;}
}

/*--------------------
  会員情報
----------------------------------------*/
.member .memberlist{
  width: 100%;
  margin-top: 20px;
  border-collapse: collapse;
}
.memberlist th,
.memberlist td{
  padding: 15px;
  border: 1px solid #cfcfcf;
  vertical-align: text-top;
}
.memberlist thead th{
  background: #f2f9fd;
}

.memberlist thead th:nth-last-child(2),
.memberlist thead th:last-child{
  width: 430px;
}
/*--------------------
  お問い合わせ 共通
----------------------------------------*/
/* テーブル */
form table{
  width: 100%;
  margin-top: 20px;
  border-collapse: collapse;
  table-layout: fixed;
  word-break: break-all;
  word-wrap: break-all;
}
form table th,
form table td{
  width: 50%;
  padding: 15px;
  border: 1px solid #cfcfcf;
}
form table th{
  border-right: 1px solid transparent;
  background: #dff3ff;
}
form table td{
  border-left: 1px solid transparent;
}
form table .required{
  display: inline-block;
  margin-left: 6px;
  padding: 2px 5px;
  background-color: #c00;
  color: #fff;
  font-size: 0.9em;
}
@media screen and (min-width:481px) {
  form table th{
    width: 30%;
  }
  form table td{
    width: 70%;
  }
}

input{
  padding: 8px;
}
input[type="radio"]{
  margin-right: 5px;
}
input[type="text"],
input[type="e-mail"],
textarea{
  width: 100%;
}
input[type="submit"]{
  padding: 10px 20px;
  border: none;
  border-radius: 2em;
  background-color: #0066cc;
  color: #fff;
  font-size: 1.25rem;
}

.submit_area{
  text-align: center;
}
input[type="submit"]:hover{
  background-color: #e94d6d;
  cursor: pointer;
}

#form td{
  position: relative;
}


/* thanks */
.thanks_btn_area{
  text-align: center;
}
.thanks_btn{
  display: inline-block;
  padding: 10px 20px;
  border-radius: 5px;
  background-color: #0066cc;
  color: #fff;
}
.thanks_btn:hover{
  background-color: #e94d6d;
}
/*--------------------
  お問い合わせ お問い合わせ
----------------------------------------*/
.contact p,
.seminar p,
.request p{
  margin-top: 20px;
}


/*--------------------
  requestページ
--------------------------------*/
.request .download_sheet{
  margin-top: 20px;
  border: 2px solid #18936D;
  padding: 15px;
}
.request .download_sheet p{
  margin: 0;
}
.request .download_sheet_btn{
  text-align: center;
}
.request .download_sheet_btn a{
  display: block;
  width: 230px;
  padding: 10px 0;
  border-radius: 5px;
  color: #fff;
  text-align: center;
}

.request .download_sheet_btn a:hover{
  background-color: #e94d6d !important;
}
.request .download_sheet_btn a:first-child{
  background-color: #32ad3d;
  margin-right: auto;
  margin-left: auto;
}
.request .download_sheet_btn a:nth-child(2){
  background-color: #18936e;
  margin-top: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media screen and (min-width:641px) {
  .request .download_sheet_btn a{
    display: inline-block;
    width: auto;
    padding: 10px;
  }
  .request .download_sheet_btn a:first-child{
    margin-right: 10px;
  }
  .request .download_sheet_btn a:nth-child(2){
    margin-top: 0;
    margin-left: 10px;
  }
}

/*--------------------
  seminarページ
--------------------------------*/
.seminar .cpds_text{
  padding: 0.5rem;
  border: 1px dashed #bbb;
  background: #efefef;
  color: #000;
}

.seminar table tr:last-child td{
  border-left: 1px solid #cfcfcf;
  text-align: center;
}
.seminar input[type="checkbox"]{
  display: inline-block;
  margin-left: 30px;
  transform: scale(2.5);
}


.main a img{ border: 1px solid #eee;}