@charset "UTF-8";
/* CSS Document */
/*PC*/
@media print, screen and (min-width: 769px) {

.headArea {
background: url("../images/strength/hed_img.jpg") center center no-repeat;
background-size: cover;
}

/*strength
---------------------------------*/
.sec3_wrap {
position:relative;
margin: 0 auto 100px;
}

.section03_wrap {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
position: relative;
margin: 0 auto;
}

.section03_wrap::before {
content:"";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 500px;
background:#f3f4f5;
z-index: -1;
}

.section03_wrap_box {
position: relative;
width: 32%;
}

.section03_wrap_box a{
display: block;
transition: box-shadow .0s;
}

.section03_wrap_box a .img{
margin: 0;
overflow: hidden;
position: relative;
}

.section03_wrap_box a .img img{
transition: all 1s cubic-bezier(0.23, 1, 0.32, 1) 0s;
}
.section03_wrap_box a:hover img{
transform: scale(1.1);
transition: all 1s cubic-bezier(0.23, 1, 0.32, 1) 0s;
}

.section03_wrap_box a .img .point{
position: absolute;
bottom: 0;
right: 0;
background: #212a37;
padding: 3px;
line-height: 1;
font-size: 18px;
font-weight: 700;
font-family: 'Lato', sans-serif;
color: #FFF;
display: inline-block;
z-index: 3;
width: 55px;
}

.section03_wrap_box a .img .point span{
font-size: 12px;
}


.section03_wrap_box a .txt_box {
background: #212a37;
width: 96%;
margin: 0 0 0 auto;
padding: 20px;
box-sizing: border-box;
color: #FFF;
}

.section03_wrap_box a .txt_box h4{
font-size: 22px;
line-height: 1.6;
margin: 0 auto 20px;
}

.section03_wrap_box a p{
font-size: 0.9em;
}

.section03_wrap_box a .txt_box .com_btn3 {
display: block;
border: 1px solid #FFF;
padding: 10px;
position: relative;
color: #FFF;
width: 200px;
box-sizing: border-box;
text-align: center;
font-weight: 600;
font-size: 0.8em;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}

.section03_wrap_box a .txt_box .com_btn3::before {
content: "";
display: block;
width: 18px;
height: 1px;
background: #0087ff;
position: absolute;
right: 15px;
top: 45%;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}

.section03_wrap_box a .txt_box .com_btn3:hover::before {
right: -10px;
}




/*detail
---------------------------------------*/
.sec1_wrap {
padding:0; 
display: -webkit-box;
display: -ms-flexbox;
display: flex;
background-color: #005bac;
position:relative;
margin: 0 auto 100px;
}

.sec1_wrap_box1 {
width: 45%;
background-color: #FFF;
padding: 100px 0 0 0;
}

.sec1_wrap_box1_inner {
background-color: #005bac;
padding: 150px 16% 150px 16%;
box-sizing: border-box;
}


.sec1_wrap_box2 {
width: 55%;
position: relative;
overflow: hidden;
}

.sec1_wrap_box2_bgvisual {
position: absolute;
z-index: 1;
display: block;
width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-image:url("../images/strength/point01/bgvisual.jpg");
}

.sec1_wrap_box3_bgvisual {
position: absolute;
z-index: 1;
display: block;
width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-image:url("../images/strength/point02/bgvisual.jpg");
}

.sec1_wrap_box4_bgvisual {
position: absolute;
z-index: 1;
display: block;
width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-image:url("../images/strength/point03/bgvisual.jpg");
}


.sec1_wrap_box1 .c_title_en{
color: #FFF;
font-size: 16px;
margin-bottom: 30px;
}

.sec1_wrap_box1 .c_title_en::before{
background: #FFF;
}

.sec1_wrap_box1 .c_title,
.sec1_wrap_box1 .c_txt{
color: #FFF;
}


.tec_wrap {
margin: 0 auto 120px;
}

.tec_wrap1 {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 0 auto;
flex-direction: row-reverse;
position: relative;
}

.tec_wrap1::before {
content: "";
position: absolute;
bottom: -50px;
left: 0;
width: 120%;
height: 300px;
background: #f3f4f5;
z-index: -1;
}

.tec_wrap2 {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 0 auto;
position: relative;
}

.tec_wrap2::before {
content: "";
position: absolute;
bottom: 0px;
left: 0;
width: 120%;
height: 300px;
background: #f3f4f5;
z-index: -1;
}

.tec_wrap_box1 {
position: relative;
max-width: 55%;
}

.tec_wrap_box1_img {
position: relative;
width: 100%;
height: 100%;
max-height: 460px;
overflow: hidden;
}

.tec_wrap_box2 {
position: relative;
width: 370px;
margin: 0 auto;
padding: 80px 0;
}

.pt_img {
width: 70%;
margin: 30px auto 0;
}

.pt_img p{
font-size: 0.8em;
}


.po2_illust_img {
width:800px;
margin: 0 auto 100px;
}

.po3_illust_img {
width:100%;
margin:30px auto 0;
}


.po03_photo_wrap {
width: 1200px;
display: flex;
flex-wrap: wrap;
margin: 0 auto 100px;
}

.po03_photo_wrap_box{
width: 31.33%;
margin-right: 3%;
margin-bottom: 3%;
}

.po03_photo_wrap_box:nth-child(3n){
margin-right: 0;
}

.po03_photo_wrap_box p{
padding: 10px 0 0;
text-align: center;
font-size: 0.8em;
}

.closeup_wrap {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 0 auto;
}

.closeup_wrap_box {
width: 46%;
position: relative;
margin-bottom: 8%;
}

.closeup_wrap_box:nth-child(3n),
.closeup_wrap_box:nth-child(4n){
margin-bottom: 0;
}

.about_wrap_box2 {
position: relative;
width: 100%;
margin: 0 auto;
padding:40px 6% 120px;
box-sizing: border-box;
}

.about_tit {
width: 260px;
margin: 0 0 30px;
}

.about_wrap_box2 h4{
border-top: 1px solid #005bac;
font-size: 18px;
margin: 30px 0 30px;
line-height: 1;
padding-top: 10px;
}

.about_wrap_box2 h4 span{
font-family: 'Lato', sans-serif;
font-weight: 300;
font-size: 0.6em;
display: block;
color: #005bac;
padding-bottom:10px;
}


}


/*sp*/
@media only screen and (max-width: 768px) {

.headArea {
background: url("../images/strength/hed_img.jpg") center center no-repeat;
background-size: cover;
}

/*strength
---------------------------------*/
.sec3_wrap {
position:relative;
margin: 0 auto 100px;
}

.section03_wrap {
width: 90%;
position: relative;
margin: 0 auto;
}

.section03_wrap::before {
content:"";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 500px;
background:#f3f4f5;
z-index: -1;
}

.section03_wrap_box {
position: relative;
width: 100%;
margin: 0 0 30px;
}

.section03_wrap_box:last-child {
margin-bottom: 0;
}

.section03_wrap_box a{
display: block;
transition: box-shadow .0s;
}

.section03_wrap_box a .img{
margin: 0;
overflow: hidden;
position: relative;
}

.section03_wrap_box a .img img{
transition: all 1s cubic-bezier(0.23, 1, 0.32, 1) 0s;
}
.section03_wrap_box a:hover img{
transform: scale(1.1);
transition: all 1s cubic-bezier(0.23, 1, 0.32, 1) 0s;
}

.section03_wrap_box a .img .point{
position: absolute;
bottom: 0;
right: 0;
background: #212a37;
padding: 3px;
line-height: 1;
font-size: 18px;
font-weight: 700;
font-family: 'Lato', sans-serif;
color: #FFF;
display: inline-block;
z-index: 3;
width: 55px;
}

.section03_wrap_box a .img .point span{
font-size: 12px;
}


.section03_wrap_box a .txt_box {
background: #212a37;
width: 96%;
margin: 0 0 0 auto;
padding: 20px;
box-sizing: border-box;
color: #FFF;
}

.section03_wrap_box a .txt_box h4{
font-size: 18px;
line-height: 1.6;
margin: 0 auto 20px;
}

.section03_wrap_box a p{
font-size: 0.9em;
}

.section03_wrap_box a .txt_box .com_btn3 {
display: block;
border: 1px solid #FFF;
padding: 10px;
position: relative;
color: #FFF;
width: 200px;
box-sizing: border-box;
text-align: center;
font-weight: 600;
font-size: 0.8em;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}

.section03_wrap_box a .txt_box .com_btn3::before {
content: "";
display: block;
width: 18px;
height: 1px;
background: #0087ff;
position: absolute;
right: 15px;
top: 45%;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}

.section03_wrap_box a .txt_box .com_btn3:hover::before {
right: -10px;
}


/*detail
---------------------------------*/
.sec1_wrap {
background-color: #005bac;
position:relative;
margin: 0 auto 40px;
}

.sec1_wrap_box1 {
width: 100%;
background-color: #FFF;
padding: 30px 0 0 0;
}

.sec1_wrap_box1_inner {
background-color: #005bac;
padding:8% 4% 4%;
box-sizing: border-box;
}


.sec1_wrap_box2 {
width: 100%;
height: 300px;
position: relative;
overflow: hidden;
}

.sec1_wrap_box2_bgvisual {
position: absolute;
z-index: 1;
display: block;
width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-image:url("../images/strength/point01/bgvisual.jpg");
}


.sec1_wrap_box3_bgvisual {
position: absolute;
z-index: 1;
display: block;
width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-image:url("../images/strength/point02/bgvisual.jpg");
}

.sec1_wrap_box4_bgvisual {
position: absolute;
z-index: 1;
display: block;
width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-image:url("../images/strength/point03/bgvisual.jpg");
}



.sec1_wrap_box1 .c_title_en{
color: #FFF;
font-size: 14px;
margin: 0 0 20px;
}

.sec1_wrap_box1 .c_title_en::before{
background: #FFF;
}

.sec1_wrap_box1 .c_title,
.sec1_wrap_box1 .c_txt{
color: #FFF;
}

.tec_wrap {
margin: 0 auto 80px;
}

.tec_wrap1,
.tec_wrap2{
margin: 0 auto 30px;
}

.tec_wrap_box1 {
position: relative;
max-width: 100%;
margin: 0 auto 20px;
}

.tec_wrap_box1_img {
position: relative;
width: 100%;
height: 100%;
max-height: 200px;
overflow: hidden;
}

.tec_wrap_box2 {
width: 90%;
margin: 0 auto;
}

.pt_img {
width: 80%;
margin: 30px auto 0;
}

.pt_img p{
font-size: 0.8em;
}

.po2_illust_img {
width:90%;
margin: 0 auto 30px;
}

.po3_illust_img {
width:100%;
margin:30px auto 0;
}

.po03_photo_wrap {
width: 80%;
margin: 0 auto 30px;
}

.po03_photo_wrap_box{
width: 100%;
margin-bottom: 3%;
}


.po03_photo_wrap_box p{
padding: 10px 0 0;
text-align: center;
font-size: 0.8em;
}


.closeup_wrap {
width: 90%;
margin: 0 auto;
}

.closeup_wrap_box {
width: 100%;
position: relative;
margin-bottom: 8%;
}


.about_wrap_box2 {
position: relative;
width: 90%;
margin: 0 auto 60px;
padding:30px 0 0;
box-sizing: border-box;
}

.about_tit {
width: 150px;
margin: 0 0 20px;
}

.about_wrap_box2 h4{
border-top: 1px solid #005bac;
font-size: 16px;
margin: 30px 0 30px;
line-height: 1.4;
padding-top: 10px;
}

.about_wrap_box2 h4 span{
font-family: 'Lato', sans-serif;
font-weight: 300;
font-size: 0.6em;
display: block;
color: #005bac;
padding-bottom:10px;
}


}