#content::before{ background-image: url(../images/introduction/main.jpg); background-repeat: no-repeat; background-position: center center; background-size:cover; content:""; display: block; width:100%; height:260px; }
#service{ background: url(../images/common/service_list/service_bg.jpg) center center no-repeat; background-size:cover; }
#service h3{ background-color: rgba(255, 255, 255, .3); display:inline-block; margin:0; padding:10px 0; outline: 1px solid #fff; outline-offset: -5px; position: absolute; left: 50%; top:50%; transform: translateX(-50%) translateY(-50%); width:90%; max-width:320px; z-index:11; }
#service h3>*{ display: block; font-weight: normal; color:#fff; }
#service li a{ display: block; width:100%; height:100%; overflow: hidden; position: relative; -webkit-transition: all .3s; transition: all .3s;}
#service li a::after{ content:""; display: block; width:100%; height:100%; position: absolute; top:0; left:0; z-index:10;  -webkit-transition: all .3s; transition: all .3s;}
@media screen and (min-width: 600px){/* ＰＣ & タブレット */
    #strengths .text{ text-align:left;}
    #strengths>div{ position: relative; max-height:385px; height:32vw; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; align-items: center; }
    #strengths .image{ position: absolute; max-width:50%; max-height:100%; }
    #strengths .no01 .image, #strengths .no03 .image{ right:0; }
    #strengths .no02 .text>*{ margin-left: auto; margin-right: 0; }
    #strengths .no01 a, #strengths .no03 a{ margin:0 0 0 22.5%; transform: translateX(-50%);}
    #strengths .no02 a{ float:right; margin:0 22.5% 0 0;  transform: translateX(-50%);}
    #strengths .text p{ margin-bottom:40px; }
    #strengths .text h3, #strengths .text p{ width:45%; }
    #service{ padding-bottom:40px; }
    #service li{ flex-basis: 48%; margin-bottom:20px; }
    #flow .image.no01{ max-width: 57.1%; }
    #flow .image.no02{ max-width: 42.9%; }
    #flow img, #table img{ margin-top:30px;}
    /* hoverアニメーション */
    #service li a:hover::after{ background-color:rgba( 0,0,0,.6 ); }
}
@media screen and (max-width: 599px){/* スマートフォン（ディスプレイ幅599px以下）より小さい画面 */
    h2+p.wrap{ text-align:left; }
    #strengths .text a{ margin: auto; }
    #strengths .text h3, #strengths .text p{ text-align:left; }
    #service{ padding-bottom:20px; }
    #service li{ flex-basis: 100%; margin-bottom:10px; }
    .list.menu li{ flex-basis: 100%; }
    #flow .list{ width:98%; -webkit-justify-content: flex-start; justify-content: flex-start; }
    #flow img, #table img{ margin-top:20px;}
    #flow .image.no02{ max-width: 71%; }
}