@media (max-width:600px){.mobile-only{display:block; position:relative}

.pc-only{display:none}

}

@media (min-width:601px){.mobile-only{display:none}

.pc-only{display:block; position:relative}

}

.swiper{  width:100%;   height:auto}

.swiper-slide{  height:auto;   text-align:center}
.swiper-box{  height:100%}

.swiper-box img{  max-width:100%}

.header-text{  position:absolute;   z-index:2}

.header-text img{  max-width:100%}

@media (min-width:1301px){.header-text img{  --widthA:calc(100vw - 1300px);   --widthB:calc(var(--widthA) / 4);   --widthC:calc(var(--widthA) / 10);  padding-left:var(--widthB);  padding-top:var(--widthC)}

}

main{ background:#fafafa}

.flex-wrapper{display:-webkit-flex;  display:-moz-flex;  display:-ms-flex;  display:-o-flex;  display:flex; -webkit-flex-direction:row; flex-direction: row; -webkit-flex-wrap:wrap; flex-wrap: wrap; -webkit-justify-content:flex-start; justify-content: flex-start; -webkit-align-items:stretch; align-items: stretch; -webkit-align-content:stretch; align-content: stretch;  width:100%;  max-width:1240px;  margin:0 auto;  padding:0 20px;  -webkit-box-sizing:border-box; box-sizing:border-box}

.flex-container{display:-webkit-flex;  display:-moz-flex;  display:-ms-flex;  display:-o-flex;  display:flex; -webkit-flex-direction:row; flex-direction: row; -webkit-flex-wrap:wrap; flex-wrap: wrap; -webkit-justify-content:flex-start; justify-content: flex-start; -webkit-align-items:flex-start; align-items: flex-start; -webkit-align-content:stretch; align-content: stretch;  width:100%;  margin:0 auto 30px;  border:#ccc solid 1px;  background:#fff;  padding:17px;  -webkit-box-sizing:border-box; box-sizing:border-box}

.flex-box1{ width:40%;  -webkit-box-sizing:border-box; box-sizing:border-box}

.flex-box2{ width:60%;  padding-left:30px;  -webkit-box-sizing:border-box; box-sizing:border-box; display:-webkit-flex;  display:-moz-flex;  display:-ms-flex;  display:-o-flex;  display:flex; -webkit-flex-direction:row; flex-direction: row; -webkit-flex-wrap:wrap; flex-wrap: wrap; -webkit-justify-content:flex-start; justify-content: flex-start; -webkit-align-items:stretch; align-items: stretch; -webkit-align-content:stretch; align-content: stretch}

.flex-box1 img{ max-width:100%}

.flex-box2 h2{ width:100%;  height:60px;  background-repeat:no-repeat;  padding-left:115px;  line-height:50px;  font-size:22px;  font-family:'M PLUS 1p',sans-serif;  font-weight:500;  margin-bottom:15px}

.flex-box2 .box-l{ width:54%;  -webkit-box-sizing:border-box; box-sizing:border-box;  padding-right:25px}

.flex-box2 .box-r{ width:46%;  -webkit-box-sizing:border-box; box-sizing:border-box;  border-left:#ddd solid 1px;  padding-left:25px;  line-height:1.2em}

.flex-box2 .box-l h3{ padding:0 0 5px;  font-size:16px;  line-height:1.4em;  font-weight:600}

.flex-box2 .box-l div{  font-size:13px;  line-height:1.5em}

.flex-box2 .box-r a{ color:#cf1328;  font-size:11px}

.flex-box2 .box-r img.img_link{ display:inline-block;  height:14px; width:auto; position:relative; padding-right:4px}

@media (min-width:768px){.header-pc{    display:block}

.header-sp{    display:none}

main .topicPath ul{  width:100%}

main .topicPath{  margin-top:10px;   margin-left:30px}

main .intro{  margin:30px auto}

main .intro h1{background:url(../img/border.png) no-repeat center center; font-size:22px; font-weight:bold; text-align:center;  margin-bottom:10px}

main .intro p{ text-align:center;  font-size:15px !important; line-height:1.7; padding:0 20px}

.flex-container{-webkit-align-items:stretch; align-items: stretch}

.flex-box2 .box-l,
.flex-box2 .box-r{ height:calc(100% - 80px)}

.solution-a{padding:8px 20px; border:solid 1px #757575; display:inline-block; margin:10px 0 0; color:#333}

}

@media (max-width:767px){.header-pc{ display:none}

.header-sp{ display:block}

.nav-block{padding-bottom:calc(8vw+34px)}

main .intro{ margin:20px auto}

main .intro h1{font-size:16px; font-weight:bold; text-align:center;  margin-bottom:10px}

main .intro p{ text-align:center;  font-size:15px !important; line-height:1.7; padding:0 15px}

.flex-wrapper{ padding:0 15px}

.flex-container{ margin:0 auto 20px;  padding:15px}

.flex-box1{ width:100%;  margin-bottom:15px}

.flex-box2{ width:100%;  padding-left:0}

.flex-box2 .box-l{ width:100%;  padding-right:0;  margin-bottom:17px}

.flex-box2 .box-r{ width:100%;  border-left:none;  padding-left:0;  line-height:1.2em}

.flex-box2 .box-r a{ font-size:13px;  padding-bottom:15px;  display:block}

.solution-a{ padding:10px 20px;  border:solid 1px #757575;  display:inline-block;  margin:15px 0 5px;  color:#333}

}

@media (max-width:500px){.flex-box2 h2{ width:100%;  height:auto;  padding-left:0px !important;  line-height:1.2em;  font-size:22px;  padding-top:13vw;  margin-bottom:15px;  background-size:100%}

}