
/*----------------------------------------------
 reset
----------------------------------------------*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
border: 0;
margin: 0;
padding: 0;
vertical-align: bottom;
}

h1, h2, h3, h4, h5, h6 {
clear: both;
font-weight: normal;
}

ol, ul {
list-style: none;
}

table {
border-collapse: collapse;
border-spacing: 0;
}

a img {
border: none;
}

* {
box-sizing: border-box;
}


@media all and (-ms-high-contrast:none){
    body {
        overflow-x: hidden;
    }
}

/*----------------------------------------------
 fonts
----------------------------------------------*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
color: #333;
font-size: 100%;
font-family: Meiryo, "ƒƒCƒŠƒI", "Hiragino Kaku Gothic Pro W3", Verdana, Arial, Osaka, "MS P Gothic", "‚l‚r ‚oƒSƒVƒbƒN", sans-serif;
line-height: 1.87;
}

/*----------------------------------------------
 body
----------------------------------------------*/
body {
background: #fff;
font-size: 100%;
}

img{
max-width: 100%;
}

.image-pc {
display: block;
}
.image-sp {
display: none;
}
@media screen and (max-width: 768px) {
.image-pc {
display: none;
}
.image-sp {
display: block;
}

}

.pc-inline {
display: inline;
}
@media screen and (max-width: 768px) {
.pc-inline {
display: block;
}
.contents {
max-width: 640px;
margin: 0 auto;
}
}
a {
color: #2b5cc0;
text-decoration: underline;
}

a:hover {
text-decoration: none;
}

/*----------------------------------------------
 modules
----------------------------------------------*/
sup {
font-size: 72.2%;
vertical-align: top;
position: relative;
top: -.05em;
}

/* header
----------------------------------------------*/
header {
background: #fff;
padding: 23px 0 18px;
position: relative;
}
header .inner {
display: table;
margin: 0 auto;
width: 100%;
max-width: 1000px;
text-align: center;
}
header .inner .logo {
display: table-cell;
text-align: left;
vertical-align: top;
width: 303px;
margin: 0 auto;
}
header .inner .logo img {
width: 100%;
}
header .inner .logo .logo-pc {
display: block;
}
header .inner .logo .logo-sp {
display: none;
}
header .inner .list-btn {
display: table;
float: right;
}
header .inner .list-btn li {
display: table-cell;
padding-left: 10px;
}
a.btn-01,
a.btn-02 {
border-radius: 3px;
color: #fff;
display: inline-block;
padding: 8px 27px 6px;
text-decoration: none;
text-align: center;
}
a.btn-01 {
background: #0061a8;
}
a.btn-02 {
background: #14ad8e;
}
a.btn-01:hover,
a.btn-02:hover{
opacity: 0.7;
}
@media screen and (max-width: 640px) {
header .inner .list-btn {
display: none;
}
a.btn-01,
a.btn-02 {
padding: 5px 20px 3px;
}
a.btn-01:hover,
a.btn-02:hover{
opacity: 1;
}
}
@media screen and (max-width: 640px) {
.mainvisual {
height: auto;
}
header .inner .logo {
width: 180px;
}
header .inner .logo .logo-pc {
display: none;
}
header .inner .logo .logo-sp {
display: block;
}
}

/* .mainvisual
----------------------------------------------*/
.mainvisual {
background: url(/contents/lp/securite/img/bg_main.png) repeat-x center top;
background-size: contain;
}
.mainbox {
margin: 0 auto;
max-width: 1030px;
padding: 0 15px;
}

@media screen and (max-width: 768px) {
.mainvisual {
background: url(/contents/lp/securite/img/bg_main_sp.png) repeat-x center top;
background-size: contain;
overflow: hidden;
}
.mainbox {
padding: 0;
margin: 0 -10px;
}
}
.hdg-l1-01 img{
margin: 0 auto;
}

/* .contents
----------------------------------------------*/
.contents {
background: #f2f1e9;
}
.contents .inner {
max-width: 1000px;
padding: 0 0 60px;
margin: 0 auto;
position: relative;
}
@media screen and (max-width: 1040px) {
  .contents .inner {
    padding: 0 30px 30px;
  }
}
@media screen and (max-width: 768px) {
  .contents .inner {
    padding: 0 15px 30px;
  }
}

.contents .inner p {
margin-bottom: 10px;
}

.hdg-l2-01 {
background: #0d3f78;
color: #fff;
font-family: "ƒqƒ‰ƒMƒm–¾’© ProN W3", "Hiragino Mincho ProN", "Ÿà–¾’©", YuMincho, "HG–¾’©E", "MS P–¾’©", "MS –¾’©", serif;
font-size: 25px;
font-weight: normal;
text-align: center;
margin-bottom: 25px;
padding: 9px 15px;
}
@media screen and (max-width: 768px) {
.hdg-l2-01 {
font-size: 20px;
margin-bottom: 20px;
}
}
.hdg-l3-01 {
color: #003b7f;
font-size: 22px;
font-weight: normal;
text-align: center;
margin-bottom: 38px;
padding-bottom: 7px;
position: relative;
}
.hdg-l3-01::after {
content: "";
display: block;
background: #003b7f;
height: 2px;
width: 54px;
position: absolute;
bottom: 0;
left: 50%;
margin-left: -27px;
}
.lyt-list-table + .hdg-l3-01 {
margin-top: 40px;
}
@media screen and (max-width: 768px) {
.hdg-l3-01 {
font-size: 18px;
}
}

.hdg-l3-02 {
color: #003b7f;
font-size: 19px;
font-weight: normal;
margin-bottom: 10px;
line-height: 1.57;
}
@media screen and (max-width: 768px) {
.hdg-l3-02 {
text-align: center;
font-size: 100%;
}
}

.lyt-item-l {
margin-bottom: 30px;
}
.lyt-item-l::after {
content: "";
display: block;
clear: both;
}
.lyt-item-l .item {
float: left;
width: 24.5%;
}
.lyt-item-l .txt {
float: right;
padding-left: 3%;
width: 75.5%;
}
@media screen and (max-width: 768px) {
.lyt-item-l {
margin-bottom: 15px;
}
.lyt-item-l .item {
float: none;
margin-bottom: 15px;
width: 100%;
}
.lyt-item-l .item img {
margin: 0 auto;
}
.lyt-item-l .txt {
float: none;
padding-left: 0;
width: 100%;
}
}

.lyt-list-table {
margin-bottom: 20px;
}
.lyt-list-table dl {
display: table;
width: 100%;
border-bottom: 1px solid #989688;
}
.lyt-list-table dl:first-child {
border-top: 1px solid #989688;
}
.lyt-list-table dl dt,
.lyt-list-table dl dd {
display: table-cell;
padding: 10px 32px;
vertical-align: top;
}
.lyt-list-table dl dt {
background: #e5e3d1;
width: 24.5%;
}
@media screen and (max-width: 768px) {
.lyt-list-table dl {
display: block;
}
.lyt-list-table dl dt,
.lyt-list-table dl dd {
display: block;
padding: 10px 32px;
width: 100%;
}
.lyt-list-table dl dt {
border-bottom: 1px solid #989688;
}
}

.lyt-col2 {
display: table;
width: 100%;
margin-bottom: 40px;
}
.lyt-col2 > .col {
display: table-cell;
width: 50%;
vertical-align: top;
}
.lyt-col2 > .col:first-child {
padding-right: 45px;
}
.lyt-col2 > .col:last-child {
padding-left: 45px;
}
.lyt-col2 > .col .hdg-l3-01 {
margin-bottom: 30px;
}
.lyt-col2 > .col .item {
margin-bottom: 10px;
}

.lyt-col2-02 {
display: table;
width: 100%;
}
.lyt-col2-02 > .col {
display: table-cell;
width: 50%;
vertical-align: top;
}
.lyt-col2-02 > .col:first-child {
padding-right: 45px;
}
.lyt-col2-02 > .col:last-child {
padding-left: 45px;
}
.lyt-col2-02 > .col .lyt-item-l {
margin-bottom: 10px;
}
.lyt-col2-02 > .col .lyt-item-l .item {
width: 45.5%;
}
.lyt-col2-02 > .col .lyt-item-l .txt {
width: 54.5%;
}

@media screen and (max-width: 768px) {
.lyt-col2 {
display: block;
}
.lyt-col2 > .col {
display: block;
width: 100%;
margin-bottom: 23px;
}
.lyt-col2 > .col:first-child {
padding-right: 0;
}
.lyt-col2 > .col:last-child {
padding-left: 0;
}
.lyt-col2 > .col .item {
text-align: center;
}
.lyt-col2-02 > .col {
display: table-cell;
width: 50%;
vertical-align: top;
}
.lyt-col2-02 > .col:first-child {
padding-right: 7.5px;
}
.lyt-col2-02 > .col:last-child {
padding-left: 7.5px;
}
.lyt-col2-02 > .col .lyt-item-l .item {
width: 100%;
}
.lyt-col2-02 > .col .lyt-item-l .txt {
width: 100%;
}
}

/* .list-bullet */
.list-bullet > li {
font-size: 14px;
position: relative;
padding-left: 1.5em;
}
.list-bullet > li::before {
background: #333;
border-radius: 50%;
content: "";
display: inline-block;
position: absolute;
width: 4px;
height: 4px;
margin: 0.4em 0 0 -1em;
}

/* .list-notice */
.list-notice {
margin-bottom: 10px;
}
.list-notice li {
font-size: 87.5%;
padding-left: 1.5em;
position: relative;
}
.list-notice > li .icon {
position: absolute;
left: 0;
top: 0;
}
.note {
font-size: 87.5%;
}

/*----------------------------------------------
 btn
----------------------------------------------*/
.area-btn {
padding: 40px 0 0;
text-align: center;
}
.area-btn .btn-03 a {
background: #14ad8e;
box-shadow: 0 6px 0 0 #00735c;
border-radius: 7px;
color: #fff;
display: inline-block;
font-family: "ƒqƒ‰ƒMƒm–¾’© ProN W3", "Hiragino Mincho ProN", "Ÿà–¾’©", YuMincho, "HG–¾’©E", "MS P–¾’©", "MS –¾’©", serif;
font-size: 27px;
padding: 12px 45px;
text-decoration: none;
text-align: center;
min-width: 60%;
position: relative;
}
.area-btn .btn-03 a::before,
.area-btn .btn-03 a::after {
content: "";
display: block;
top: 50%;
margin-top: -8px;
position: absolute;
}
.area-btn .btn-03 a::before {
content: "";
display: block;
border-left: 15px solid #fff;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
right: 15px;
}
.area-btn .btn-03 a::after {
content: "";
display: block;
border-left: 9px solid #14ad8e;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
right: 22px;
}
.area-btn .btn-03 a:hover {
opacity: .7;
}
.area-btn > p:last-child{
margin-bottom: 0;
}
@media screen and (max-width: 768px) {
.area-btn {
padding-top: 15px;
}
.area-btn .btn-03 a {
font-size: 20px;
padding: 15px 16px;
width: 100%;
}
.area-btn .btn-03 a::before {
right: 10px;
}
.area-btn .btn-03 a::after {
right: 17px;
}
.area-btn .btn-03 a:hover {
opacity: 1;
}
}

.item-gaiyou {
margin: 50px 0 20px;
}
@media screen and (max-width: 768px) {
.item-gaiyou {
margin: 30px 0 20px;
}
}

/*----------------------------------------------
 footer
----------------------------------------------*/
footer {
background: #fff;
padding: 13px 15px 18px;
width: 100%;
}

footer .copyright {
color: #3b3b3b;
font-size: 11px;
text-align: center;
}
