@charset "UTF-8";
/* LP */

p{
margin-bottom: 1em;
}
/* ==================================
　PC  レイアウト
================================== */
#contents01,#contents02,#contents03,#contents04,#contents05,#contents06,#contents07,#contents08{
/*max-width: 100rem;*/
width: 100%;
margin: 0 auto;
}
.box{
width: 960px;
margin: 0 auto;
}
#contents02{
width: 960px;
}
#contents03{
width: 960px;
background-color: #fafafa;
margin: 30px auto;
padding: 30px 0;
position: relative;
}
#contents04,#contents06{
background-color: #f4f7fa;
}
.clearfix::after {
    content: " ";
    display: block;
    clear: both;
}
.mb_30{
margin-bottom: 30px;
}
/* ==================================
　PC  h2 - h6
================================== */
/* 汎用 */
.h2_box{
text-align: center;
}
.e_ttl_lv2{
font-size: 3rem;
margin-bottom: 1.5em;
padding: 1rem 0;
text-align: center;
}
.e_ttl_lv2 .e_ttl_small{
font-size: 2rem;
font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
}

.e_ttl_lv03{
font-size: 3rem;
text-align: center;
}
.text_caption{
text-align: center;
}
.m_penetrate_header {
margin: 30px 0;
position: relative;
}
.link_button{
position: absolute;
left: 5%;
bottom: -1px;
width: 43%;
padding: 1% 1% 0 1%;
background-color: #fff;
display: flex;
justify-content: space-around;
}
.link_button .button_01,.link_button .button_02{
/*float: left;*/
width: 45%;
box-sizing: border-box;
}
.link_button .button_01 img,.link_button .button_02 img{
width: 100%;
}
.link_button .button_01{
/*margin-right: 5px;*/
}
.m_column_col2{
display: flex;
justify-content: space-between;
marign-left:10px;
}
.m_column_col2 .m_column_item{
box-sizing: border-box;
width: 460px;
background-color: #fafafa;
border-top: 3px solid #336699;
padding:20px 2em 480px;
/*float: left;*/
}
/*.m_column_col2 .m_column_item:first-child(){
margin-right: 20px;
}*/
.m_column_col2 .e_ttl_lv03{
color: #336699;
text-align: center;
font-size: 2rem;
margin-top: 2em;
}
.m_column_col2 .text_caption{
color: #336699;
text-align: center;
}
.m_plan_sp{
display: none;
}
.m_plan_box{
position: relative;
}
.m_plan {
width: 1000px;
text-align: center;
position: absolute;
left: -20px;
bottom:0;
margin: 0 auto;
}
.m_plan_item{
background-color: #336699;
border: 3px solid #336699;
margin-bottom: 1em;
display: flex;
justify-content: space-between;
align-items: center;
}
.m_plan_item .col_1{ 
margin-left: 60px;
}

.m_plan_item .col_2{ 
color: #fff;
width: 140px;
background-color: #336699;
}
.m_plan_item .col_3{ 
margin-right: 60px;
}
.m_plan_item .col_1,.m_plan_item .col_3{
color: #222222;
width: 330px;
background-color: #fff;
font-size: 1.8rem;
}
.m_plan_item .col_1, .m_plan_item .col_2, .m_plan_item .col_3{
vertical-align: middle;
padding:1em;
box-sizing: border-box;
}
.m_plan_item .col_height{
padding: 12px 0;
}
.m_plan_item .col_height-{
padding: 30px 0;
}
.m_plan .m_plan_item .blue, .m_plan_sp .m_plan_item .blue{
color: #336699;
font-size: 1.5em;
}
.m_plan .m_plan_item dl,.m_plan_sp .m_plan_item dl{
  display: flex;
  justify-content: space-between;
}
.m_plan .m_plan_item dl dt,.m_plan_sp .m_plan_item dl dt{
font-size: 1.8rem;
margin-left: 40px;
}
.m_plan .m_plan_item dl dd, .m_plan_sp .m_plan_item dl dd{
border: 1px solid #333;
border-radius: 30px;
padding:0 1em;
margin-bottom: 0.5em;
font-size: 1.2rem;
margin-right: 40px;
}
.m_plan .m_plan_item dl dd span.small{
font-size: 0.8rem;
}
/* 　オプション */
.img_option_bg{
position: absolute;
top: -22px;
left: 0;
right: 0;
margin: auto;
}
.m_option_list{
margin: 30px auto 40px;
width: 860px;
}
.m_option_list .option_item{
background-color: #fff;
clear: both;
margin-bottom: 20px;
}
.m_option_list .option_item .option_text{
display: inline-block;
padding: 30px 0 0 50px;
width: 520px;
}
.m_option_list .option_item .option_heading{
font-weight: bold;
font-size: 1.8rem;
display: inline-block;
}
.m_option_list .option_item .option_heading span{
border-radius: 50%;
color: #fff;
background-color: #ffcc33;
font-size: 1.8rem;
display: inline-block;
margin: 0 1em 1em 0;
width: 1.8em;
height: 1.8em;
padding-top: 0.3em;
text-align: center;
vertical-align: baseline;
}
.m_option_list img{
float:right;
margin-left: 30px;
}
/* ==================================
　業務スタートまでのフロー以下
================================== */
#contents04 .contents_inner, #contents05 .contents_inner, #contents06 .contents_inner{
position: relative;
width: 960px;
padding: 60px 0;
margin: 0 auto;
}

 .penetrate_area_02{
 padding: 0;
 }
 #contents04 .contents_inner .e_ttl_lv03,#contents05 .contents_inner .e_ttl_lv03,#contents06 .contents_inner .e_ttl_lv03{
 color: #fff;
 width: 960px;
 margin: 0 auto;
 background-image: url('/penetrate/assets/imgs/bg_h3.png') ;
 position: absolute;
 top: -30px;
 }
.m_step{
padding: 0 0 0 150px;
 }
.m_step dl{
margin: 0 auto;
 }
.m_step dl dt {
 float: left;
 display: inline-block;
 }
.m_step .arrow_s{
float: none;
margin-bottom: 20px;
}
.m_step .arrow_s dt{
float: none;
margin: 10px 0 0 55px ;
width: 20px;
}

.m_step dl dd{
margin: 20px 0 0 20px;
display: inline-block;
}
.m_step dl dd p{
font-weight: bold;
font-size:  2rem;
}

.m_step dl dd ul{
list-style: disc;
margin: 1em 0 0 20px;
}
/* 診断項目 */
#contents05{
padding: 100px 0;
}
.m_diagnose{
width: 860px;
margin: 0 auto;
border-bottom: solid 2px #336699;
}
.m_diagnose dt, .m_diagnose dd{
  padding: 1em 0;
}
.m_diagnose dt{
  padding-left: 2em;
  float: left;
  font-weight: bold;
}
.m_diagnose dd{
  margin-left: 240px;
}

/*Q&A*/

.acd_check{
  display: none;
}
.acd_box{
  box-shadow: 0 5px 16px 0 rgba(0,0,0,0.05);
  background-color: #fff;
  margin-bottom: 20px;
  }
.acd_label{
  display: block;
  margin-bottom: 1px;
  padding: 10px 10px 10px 80px;
  background: url("/penetrate/assets/imgs/question.png") no-repeat 3%;
}
.acd_content{
  height: 0;
  opacity: 0;
  transition: padding-bottom 0.5s, padding-top 0.5s;
  visibility: hidden;
/*  background-color: #fffcf5;*/
  }
.acd_bo .acd_label {
  cursor :pointer;
  display: block;
  text-decoration: none;
  line-height: 1;
  position: relative;
  margin: 0 0 10px;
  padding: 10px;
  background-color: #333;
}

.acd_content ul{
list-style: disc;
margin-left: 2em;
}
.acd_check:checked + .acd_label + .acd_content{
  height: 100%; 
  opacity: 1;
  padding: 30px 40px;
  visibility: visible;
}
.acd_check .acd_label:after{
  content:"";
  display:block;
  width:8px;
  height:8px;
  border-top: #333 2px solid;
  border-right: #333 2px solid;
  -webkit-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  transform: rotate(135deg);
  position:absolute;
  right: 2%;
  top: 0;
  bottom: 15%;
  margin: auto;
}
/*開いた状態の矢印描画*/
.acd_check input[type=checkbox]:checked + label:after{
  content:"";
  display:block;
  width:8px;
  height:8px;
  border-top: #333 2px solid;
  border-right: #333 2px solid;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
  position:absolute;
  right: 2%;
  top: 7%;
  bottom: 0;
  margin: auto;
}

/*報告書*/
#contents07 .contents_inner{
width: 960px;
 margin: 60px auto;
}
#contents07 .contents_inner .e_ttl_lv03{
 color: #fff;
 margin: 60px auto 20px;
 background-image: url('/penetrate/assets/imgs/bg_h3.png') ;
}
#contents07 .contents_inner .main_txt{
color: #336699;
font-weight: bold;
font-size: 2rem;
text-align: center;
}
#contents07 .contents_inner figure{
text-align: center;
}
.m_report {
padding: 1em 3em 1em 4em;
background-color: #f4f7fa;
margin-bottom: 40px;
}
.m_report li{
color: #336699;
display: inline-block;
width: 240px;
background: url("/penetrate/assets/imgs/img_report_list.png") no-repeat;
padding-left: 20px;
}
.m_report li:nth-last-child(3n-1){
margin-left:2.5em;
}

#contents07 .contents_inner .txt{
margin-top: 40px 0 20px 0;
font-size: 2rem;
text-align: center;
}
#contents07 .contents_inner .e_contact_btn {
    width: 540px;
    margin: 0 auto;
}
/* ==================================
　ペネトレーションテスト
================================== */
#contents08{
background-image: url("/penetrate/assets/imgs/bg_h3_g.png") ;
padding: 20px 0 0;
margin-bottom: 0;
}
#contents08 .contents_inner{
width: 1100px;
margin: 0 auto;
background-color: #fff;
}
#contents08 .contents_inner .h2_box img {
margin-top: 80px;
}
.contents_inner .h2_box .e_ttl_lv2 {
padding: 1rem 0 0 0;
margin-bottom: 0;
}
.contents_inner .h2_box .text_caption {
margin: 0 auto 2em;
}
.c_column_col3{
display: flex;
justify-content: space-between;
margin-bottom: 40px;
background-color: #f4f7fa;
padding: 20px;
}
.c_column_col3 .c_column_item{
position: relative;
}
.c_column_col3 .c_column_item .text_caption{
position: absolute;
margin: auto;
bottom: -30px;
left: 0;
right: 0;
padding: 0.5em 1em;
background-color: #ffcc33;
color: #fff;
width: 180px;
font-size: 1.8rem;
font-weight: bold;
}
.m_example{
background-color: #fafafa;
padding:20px 40px;
color: #339999;
}
.m_example .m_example_list{
display: flex;
justify-content:space-around;
flex-wrap: wrap;
padding-left: 2em;
}
.m_example .exampe_list_item{
width: 33%;
}

.m_example .exampe_list_item .e_example_text{
border: solid 1px #339999;
padding: 1em;
background-color: #fff;
color: #333;
font-weight: bold;
font-size: 1.2rem;
width: 22rem;
text-align: center;
box-shadow: 0 5px 16px 0 rgba(0,0,0,0.05);
}
.m_example .exampe_list_item .e_example_ttl{
margin-bottom: -0.5em;
}
.m_example .exampe_list_item .e_example_ttl em{
margin-left: 0.2em;
font-size: 2.5rem;
}
/* ペネトレーションテストの流れ */
 #contents08 .e_ttl_lv03{
 color: #fff;
 width: 960px;
 margin: 60px auto;
 background-image: url('/penetrate/assets/imgs/bg_h3_g.png') ;
}
.m_heading_point{
padding: 1em 2em;
font-size: 1.5rem;
box-shadow: 0 5px 16px 0 rgba(0,0,0,0.05);
width: 800px;
margin: 40px auto 80px;
position: relative;
}
.m_heading_point .e_img_arrow{
position: absolute;
margin: 0 auto;
text-align: center;
left: 0;
right: 0;
bottom: -46px;
}
.m_heading_point .m_heading_icon p{
margin-bottom: 0;
color: #339999;
font-size: 1.5rem;
float: left;
}
.m_heading_point .m_heading_icon p span{
border-bottom: solid 2px #339999;
padding-top: 0.2em;
display: inline-block;
}
.m_heading_point .m_heading_icon p em{
font-size: 2.5rem;
margin-left: 0.2em;
vertical-align: top;
}
.m_heading_point .m_heading_ttl{
font-size: 2rem;
font-weight: bold;
margin-left: 100px;
}
.m_heading_point .m_heading_text{
clear: left;
}
.l_penetrate_step .text_caption{
padding:0 0 40px;
}
.e_contact_btn {
margin: -20px 0 0 0;
}
/* ==================================
　SP
================================== */
@media only screen and (max-width: 768px){
.box, #contents02, #contents03,#contents04,#contents06,#contents04 .contents_inner, #contents05 .contents_inner, #contents06 .contents_inner,
 #contents04 .contents_inner .e_ttl_lv03,#contents05 .contents_inner .e_ttl_lv03,#contents06 .contents_inner .e_ttl_lv03, #contents07 .contents_inner,#contents07 .contents_inner .e_contact_btn, #contents08 .contents_inner, #contents08 .e_ttl_lv03, .m_heading_point, .m_plan, .m_option_list .option_item .option_text, .m_diagnose, .m_option_list, .m_column_col2 .m_column_item{
 margin: 0 auto;
 width: auto;
 }
 #contents04 .contents_inner .e_ttl_lv03, #contents05 .contents_inner .e_ttl_lv03, #contents06 .contents_inner .e_ttl_lv03,#contents04 .contents_inner, #contents05 .contents_inner, #contents06 .contents_inner{
 position: inherit;
 top: auto;
 }
#contents04 .contents_inner, #contents05 .contents_inner, #contents06 .contents_inner{
padding: 0;
}
.e_ttl_lv03, .contents_inner .h2_box .e_ttl_lv2{
font-size: 2rem;
}
 .m_column_col2{
margin: auto;
display: inline-block;
padding: 0 0 1em;
}
.m_plan{
display: none;
}
.m_plan_sp{
display: inline-block;
width: 100%;
}
.m_column_col2 .m_column_item  {
padding: 1em;
}
.m_plan_item .col_1, .m_plan_item .col_3{
width: 60%;
margin: 0;
text-align: center;
}
.m_plan_item .col_2{
width: 40%;
text-align: center;
font-size: 1.2rem;
}
.m_plan_sp .m_plan_item dl dt{
font-size: 1rem;
margin-left: 0;
}
.m_plan_sp .m_plan_item dl dd{
margin-right: 0;
}
/*sp オプション*/
.m_option_list .option_item .option_heading{
margin-top: 1em;
}
.m_option_list .option_item .option_text{
padding: 0 1em;
}
.m_option_list img{
float: none;
margin-left: 0;
width: 100%;
}
/*  業務スタートまでのフロー  */
.penetrate_area_02{
padding: 0 10px;
}
.m_step{
padding: 1em;
}
.m_step dl dd p{
margin-bottom: 0;
}
.m_step dl dt{
margin-right: 30px;
}
.m_step dl dd{
margin: 0;
display: inline;
}
.m_step dl dd ul{
margin: 0;
}
.m_diagnose dt{
padding-left: 0.5em;
}
.m_diagnose dd{
margin-left: 11em;
}
.m_report {
padding: 1em;
}
.m_report li{
width: auto;
margin-right: 1em;
}
.m_report li:nth-last-child(3n-1){
margin-left: 0;
}
#contents08{
margin: 0;
background: none;
}
.c_column_col3 .c_column_item .text_caption{
padding: 0.5em;
width: auto;
font-size: 0.4rem;
}
.c_column_col3{
padding:0;
background-color: #fff;
}
.c_column_col3 .c_column_item:nth-child(2n){
padding: 0 5px;
}
.m_example, .m_example .m_example_list{
padding: 0;
}
.m_example .text_caption{
margin: 0;
padding-top: 1em;
}
.l_penetrate_step .m_heading_point{
margin-bottom: 40px;
}
.m_example .exampe_list_item .e_example_text{
width: auto;
}
}