/* CSS Document */

/* 下層メインビジュアル
---------------------------------------------------------- */
.sub_main_visual {
  background: url("/product_data/squid_fishing_machine/squid_system/img/mainimg_img_01.jpg") center no-repeat;
}

/* コピー
---------------------------------------------------------- */
.txt_copy_01 {
  font-size: 38px;
  letter-spacing: 0em;

}




/* 仕組み一覧
---------------------------------------------------------- */
.box_squid_system_01 {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  color: #1b1464;
  margin: 0 0 100px;
}
.box_squid_system_01 > li {
  width: 300px;
  background-color: #fff;
  text-align: center;
  padding: 20px 0;
  display: flex;
  flex-direction: column;
}
.box_squid_system_01 .txt_squid_system_name {
  font-size: 22px;
  font-weight: 500;
  margin-top: 15px;
  margin-bottom: 20px;
  letter-spacing: 0.01em;
  line-height: 140%;
}
.box_squid_system_01 > li > ul {
  margin-bottom: 25px;
}
.box_squid_system_01 > li > ul > li {
  font-weight: 500;
  text-align: left;
  width: 240px;
  line-height: 160%;
  margin-left: 40px;
}
.box_squid_system_01 > li > ul > li:before {
  content: "●";
  font-size: 14px;
  margin-left: -14px;
}

.box_squid_system_01 .btn_01 {
  width: 60%;
  margin-top: auto;
  background-color: #002063;
}


/* sec共通
---------------------------------------------------------- */
img {
  max-width: 100%;
  height: auto;

}
.sec_01,
.sec_02,
.sec_03 {
  background:url("/assets/img/img_border_04.png") center top no-repeat;
  padding: 100px 0 80px;
}
h3 {
  font-size: 30px;
  margin-bottom: 40px;
  color: #fff;
  font-weight: 700 !important;
  border-left: #d8282b 10px solid;
  padding:10px;
  border-bottom: #ffffff 1px solid;
}
h4 {
  font-size: 21px;
  margin-bottom: 20px;
  font-weight: 700 !important;
}

.box_wht_01 {
  background-color: #FFFFFF;
  text-align: center;
  margin: 20px auto;
}
.box_wht_01 .icon_img_01,
.box_illust_01 .icon_img_01{
  display: none;
}
.box_illust_01 {
  text-align: center;
  margin: 80px auto 20px;
}

/* sec01
---------------------------------------------------------- */
.sec_01 {
}
.sec_01 .box_leftarea {
  width: 42%;
}
.sec_01 ul {
  width: 56%;
  justify-content: space-between;
}
.sec_01 ul li {
  width: 275px;
} 
.sec_01 ul li p {
  line-height: 140%;
  font-size: 14px;
  letter-spacing: 0.02em;
  margin-top: 10px;
}

/* sec02
---------------------------------------------------------- */
.sec_02 {
} 
.sec_02 .box_sec_01,
.sec_02 .box_sec_02,
.sec_02 .box_sec_03 {
  margin-bottom: 100px;
}
.sec_02 .box_leftarea_01 {
  width: 580px;
}
.sec_02 .box_leftarea_01 .movie_01 {
  width: 340px;
  margin-left: 230px;
}
.sec_02 .box_leftarea_01 .movie_01 iframe {
 width:340px;
height:190px;
}
.sec_02 .box_leftarea_01 ul li p,
.sec_02 .box_leftarea_01 .movie_01 p{
  line-height: 140%;
  font-size: 14px;
  letter-spacing: 0.02em;
  margin-top: 10px;
}
.sec_02 .box_sec_02 ul {
  margin-top: 30px;
}
.sec_02 .box_sec_02 ul li {
  width: 480px;
  text-align: center;
}
.sec_02 .box_sec_02 ul li p{
  line-height: 140%;
  font-size: 14px;
  letter-spacing: 0.02em;
  margin-top: 10px;
  text-align: left;
}

.sec_02 .box_leftarea_03 {
  width: 570px;
}
.sec_02 .movie_03 {
  width: 420px;
}
.sec_02 .movie_03 iframe {
 width:420px;
height:236px;
}



/* sec03
---------------------------------------------------------- */
.sec_03 .box_sec_01,
.sec_03 .box_sec_02 {
  margin-bottom: 100px;
}
.sec_03 {
} 
.sec_03 .box_sec_01 .box_leftarea_01 {
  margin-bottom: 30px;
}
.sec_03 .box_sec_01 ul {
  width: 100%;
  justify-content: space-around;
}
.sec_03 .box_sec_01 ul li {
  width: 370px;
} 
.sec_03 .box_sec_02 .box_leftarea_02 {
  margin-bottom: 30px;
}
.sec_03 .box_sec_02 ul {
}
.sec_03 .box_sec_02 ul.box_hosei_01 {
  width: 100%;
  margin-bottom: 30px;
}
.sec_03 .box_sec_02 ul.box_hosei_01 h5 {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}
.sec_03 .box_sec_02 ul.box_hosei_01 li:nth-child(1) {
  width: 500px;
}
.sec_03 .box_sec_02 ul.box_hosei_01 li:nth-child(2) {
  width: 450px;
  border: 1px solid #fff;
  border-radius: 14px;
  text-align: center;
  padding: 15px 0;
}
.sec_03 .box_sec_02 ul.box_hosei_02 {
  width: 100%;
  border: 1px solid #fff;
  border-radius: 14px;
}
.sec_03 .box_sec_02 ul.box_hosei_02 li {
  margin: 15px 0;
  padding: 0 20px;
}
.sec_03 .box_sec_02 ul.box_hosei_02 li:nth-child(1) {
  border-right:1px dashed #fff;
}

.sec_03 .box_sec_03 .box_leftarea_03 {
  width: 45%;
}
.sec_03 .box_sec_03 ul {
  width: 50%;
  justify-content: space-around;
}
.sec_03 .box_sec_03 ul li {
  width: 240px;
  text-align: center;
} 
.sec_03 .box_sec_03 ul li p {
  line-height: 140%;
  font-size: 14px;
  letter-spacing: 0.02em;
  margin-top: 10px;
}




/* ==========================================================================//
//
//　SP 560px以下
//
// ========================================================================== */

@media screen and (max-width: 560px) {

/* 共通
---------------------------------------------------------- */
.txt_copy_01 {
  font-size: 30px;
  }
.flex {
  display: block;
}
h3 {
  font-size: 28px;
  font-weight: 500 !important;
  padding:5px 10px;
  line-height: 140%;
}
h4 {
  font-weight: 500 !important;
  line-height: 160%;
}
.sec_01,
.sec_02 {
  padding: 80px 0 80px;
}
.sec_03 {
   padding: 80px 0 0;
}
.box_wht_01 {
  position: relative;
  margin: 0;
}
.box_illust_01 {
  position: relative;
  margin: 50px 0 0;
}

.box_wht_01 .icon_img_01,
.box_illust_01 .icon_img_01 {
  display: block;
  position: absolute;
  top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
  }
  

/* 仕組み一覧
---------------------------------------------------------- */
.box_squid_system_01 {
  display: block;
  margin: 0 0 80px;
}
.box_squid_system_01 > li {
  width: 90%;
  display: block;
  margin:0 auto 20px;
}

.box_squid_system_01 .btn_01 {
  width: 80%;
}

  
/* sec01
---------------------------------------------------------- */

.sec_01 .box_leftarea {
  width: 100%;
  margin-bottom: 20px;
}
.sec_01 ul {
  width: 100%;
}
.sec_01 ul li {
  width: 100%;
  margin-bottom: 15px;
} 
.sec_01 ul li img {
  width: 100%;
  height: auto;
  }
  
  

/* sec02
---------------------------------------------------------- */
.sec_02 .box_sec_01,
.sec_02 .box_sec_02 {
  margin-bottom: 50px;
}
.sec_02 .box_leftarea_01 {
  width: 100%;
  margin-bottom: 15px;
}
.sec_02 .box_leftarea_01 .movie_01 {
  width: 100%;
  position: relative;
  padding-bottom: 56.25%;
  margin: 0 !important;
}
.sec_02 .box_leftarea_01 .movie_01 iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

}

.sec_02 .box_sec_02 ul {
  margin-top: 30px;
}
.sec_02 .box_sec_02 ul li:first-child {
  margin-bottom: 30px;
  }
.sec_02 .box_sec_02 ul li {
  width: 100%;
}

.sec_02 .box_sec_03 {
  margin-bottom: 0;
  }
.sec_02 .box_leftarea_03 {
  width: 100%;
}
.sec_02 .movie_03 {
  width: 100%;
  position: relative;
  padding-bottom: 56.25%;
}
.sec_02 .movie_03 iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

  
/* sec03
---------------------------------------------------------- */
.sec_03 .box_sec_01,
.sec_03 .box_sec_02 {
  margin-bottom: 80px;
}
.sec_03 .box_sec_01 ul li {
  width: 100%;
  margin-bottom: 15px;
} 
  
.sec_03 .box_sec_02 ul.box_hosei_01 {
  margin-top: 30px;
}
.sec_03 .box_sec_02 ul.box_hosei_01 li:nth-child(1) {
  width: 100%;
}
.sec_03 .box_sec_02 ul.box_hosei_01 li:nth-child(2) {
  width: 100%;
}
.sec_03 .box_sec_02 ul.box_hosei_02 li {
  margin: 15px 0;
  padding: 0 20px;
}
.sec_03 .box_sec_02 ul.box_hosei_02 li:nth-child(1) {
  border-right:none;
  border-bottom:1px dashed #fff;
  padding-bottom: 15px;
}
  
  
  
  
  
  
.sec_03 .box_sec_02 .box_leftarea_02 {
 margin-bottom: 15px;
}
.sec_03 .box_sec_03 .box_leftarea_03 {
  width: 100%;
}
.sec_03 .box_sec_03 ul {
  width: 100%;
}
.sec_03 .box_sec_03 ul li {
  width: 100%;
} 
.sec_03 .box_sec_03 ul li img {
  width: 100%;
  height: auto;
  }


  
  
  
  
  
}