@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@400;500;700;800;900&display=swap');


/* ===================================================
 Reset
=====================================================*/
html {overflow-y: scroll;}
div, dl, dt, dd, ul, ul li, h1, h2, h3, h4, h5, h6,
pre, form, fieldset, input, textarea, p, blockquote, th, td,
section, nav, article, aside, hgroup, header, address,
figure, figcaption, ul, ol {margin: 0; padding: 0;}
address, caption, cite, code, dfn, em, strong, th, var {font-style: normal; font-weight: normal;}
table{ border-collapse: collapse; border-spacing: 0;}
caption, th {text-align: left;}
q:before ,q:after {content: '';}
object, embed {vertical-align: top;}
hr, legend {display: none;}
h1, h2, h3, h4, h5, h6 {font-size: 100%; font-weight: normal;}
img, abbr, acronym, fieldset {border: 0;}
img {vertical-align: top; -ms-interpolation-mode: bicubic;}
ul li, ol li {list-style-type: none; margin: 0px; padding: 0px;}


/* ===================================================
 common
=====================================================*/
body{
	margin: 0;
	padding: 0;
	/*min-width:1100px;safari 右側の途切れ解決*/
   _display: inline;/*safari 右側の途切れ解決*/
   _zoom:1;/*safari 右側の途切れ解決*/
   }
html {
    font-family: YuGothic, "Yu Gothic medium", sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック";
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	font-size: 62.5%;/* 10px */
}

/* Fluid-img----------------------------------- */
img {max-width : 100%; border: 0}


/* clearfix----------------------------------- */
.clearfix:after {content: ""; display: block; clear: both; visibility: hidden;}

/* 禁則処理の追加----------------------------------- */
p,li,dt,dd,th,td,pre{
-ms-line-break: strict;
line-break: strict;
-ms-word-break: break-strict;
word-break: break-strict}

a {outline: none; color: #333333; transition: all 0.3s; text-decoration: none}
a:visited {text-decoration: none; color: #333333;}
a:hover {text-decoration: underline;}
a:active {text-decoration: none;}

a[href*="tel:"] {
pointer-events: none;
cursor: default;
text-decoration: none;
}


/*フォント----------------------------------- */
h1, h2, h3, h4{font-family: 'M PLUS 1p';}
h1.sec {
font-size : 4.8rem;
font-weight: bold;
color: #265AAC;
background-color: #C5DBEB;
text-align: center;
padding-top: 0.8em;
padding-bottom: 0.8em;
} 

h1.ttl, 
h2.ttl{font-size: 3.6rem; font-weight: bold; margin-bottom: 1em; text-align: center;}

p{line-height:1.8; font-size: 1.6rem; font-weight: 500; font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif"}

p.lead{font-size : 2rem; line-height:2.4;}


/* ===================================================
for PC
=====================================================*/
html{color:#333333; }
body { font-size: 1.6rem; } /* 16px */

section, 
article{width:100%; margin : 0 auto; padding-top:6%; padding-bottom:6%;}
article.sec{padding-top: 0; padding-bottom: 6%}
body#company article.sec, 
body#solution article.sec{padding-bottom: 0}

section.blue, 
article.blue{background-color: #E9F0F7}

.wrap{width:980px; margin : 0 auto;}
.wrap:after {content: ""; display: block; clear: both; visibility: hidden;}

.sp{display: none}

#pankzu{padding-top: 0.8em; padding-bottom: 0.5em; font-size: 1.2rem; margin-bottom:6%; font-weight: 500;}
#pankzu .inner{width:980px; margin : 0 auto;}
#pankzu a{text-decoration: underline}
#solution #pankzu, #solution #pankzu a, 
#company #pankzu, #company #pankzu a{ color: #FFFFFF;}

/*----------------------------------------------------
header
------------------------------------------------------*/
#sp_header{display: none}

#pc_header{
	width: 100%;
	margin : 0 auto;
    height: 80px;
}
#pc_header:after {content: ""; display: block; clear: both; visibility: hidden;}

#pc_header .logo {float: left}
#pc_header .logo a{height: 80px; display:table-cell; vertical-align: middle;}
#pc_header .logo img{ width:290px; height:auto; margin-left: 10px}
#pc_header .logo a img{transition: all 0.3s;}
#pc_header .logo a:hover img{ opacity:0.7}

#pc_header nav {float: right;}
#pc_header nav ul{font-size: 0;  }
#pc_header nav li{
font-size: 1.6rem;
transition: all 0.3s;
text-align: center;
font-weight: bold;
height: 80px;
display: table-cell;
vertical-align: middle;
font-family: 'M PLUS 1p';
line-height: 1.6;
}
#pc_header nav li span.ja{font-size: 1.1rem; display: block; font-weight: 500; font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans";}
#pc_header nav li:fiest-child{padding-left: 0}
#pc_header nav li a{display:block; margin-right:40px; }
#pc_header nav li a:hover{text-decoration:none; color:#2f70ba;}

#pc_header nav li#btn_contact_card{
background-color: #FF5514;
box-sizing: border-box;
height: 80px; 
font-weight: 600;
font-family: 'M PLUS 1p';
}
#pc_header nav li#btn_contact_card a{
margin-right:0px;
color: #FFFFFF;
box-sizing: border-box;
padding: 10px 25px 10px 25px;
}
#pc_header nav li#btn_contact_card span{display: block}
#pc_header nav li#btn_contact_card:hover{opacity: .7;}


/*----------------------------------------------------
footer
------------------------------------------------------*/
footer {
background-color: #FFFFFF;
width: 100%;
padding-top: 5%;
padding-bottom: 5%;
text-align: center;
border-top: 1px solid #E9F0F7;
font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo;
font-weight: 500;
}
footer #co_name{font-size: 2.2rem; font-weight: bold; color: #265AAB; line-height: 1; font-family: 'M PLUS 1p'; vertical-align: middle}
footer #co_name .icon_mark{
width:51px;
height: 28px;
display: inline-block;
background-image: url(../images/icon_logomark.png);
background-repeat: no-repeat;
background-size: contain;
vertical-align: middle;
margin-right: 0.5em;
}
footer address{font-size: 1.4rem; margin-top:1.5%;}
footer #sns img{width: 30px; height: 30px; margin-top:1.5%;}
footer #sns a:hover{opacity: .7}
footer #copyright{ font-size:1.2rem; margin-top:1.5%; }


/*----------------------------------------------------
toPageTopの設定
----------------------------------------------------*/
#toPageTop {
	position: fixed;
	bottom: 100px;
	right: 8%;
    z-index: 1000;
}
#toPageTop a {
	display: block;
	width: 80px;
	height: 80px;
	background-image: url(../images/icon_pagetop.png);
	background-repeat: no-repeat;
	background-color: transparent;
	background-size: 80px 80px;
}
#toPageTop a:hover { background-color:transparent; opacity:0.7}

/*----------------------------------------------------
TOP
------------------------------------------------------*/
#top #main_img{
height: 600px;
width: 100%;
background-color: #83b6ce;
background-image: url(../images/main_pc.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
#top .ttl{text-align: center}

#top #merit .ttl img{width: 75%}
#top #merit #series{
font-size: 1.8rem;
font-weight: bold;
margin-top: 1.5em;
width: 100%;
margin-left: auto;
margin-right: auto;
text-align: center;
font-family: 'M PLUS 1p';
}
#top #merit #series .personal, 
#top #merit #series .business{display: inline-block; line-height: 1.8; border-bottom: 1px solid #CCCCCC; border-top: 1px solid #CCCCCC;}
#top #merit #series .business{ margin-left: 1.5em}
#top #merit #series .personal span.square{color: #FF9000; }
#top #merit #series .business span.square{color: #009FE8}
#top #merit #series span.small{font-size: 1.4rem; font-weight: 500; padding-left: 1em;}

#top #merit p.lead{text-align: center; margin-top: 5%; margin-bottom: 5%}
#top #merit p.lead span{display: block}

#top #merit ul{font-size: 0}
#top #merit li{
text-align: center;
display: inline-block;
border: 1px solid #CCCCCC;
width: 32%;
margin-right: 2%;
box-sizing: border-box;
margin-bottom: 2%;
}
#top #merit li img{width: 50%}
#top #merit li:nth-child(3), 
#top #merit li:nth-child(6){margin-right: 0}
#top #merit li p{margin-bottom: 1em; font-size: 1.8rem; line-height: 1.6;}
#top #merit li p span.bold{font-size: 2.8rem; font-weight: bold; font-family: 'M PLUS 1p';}
#top #merit li p span.new_line{display: block}
#top #merit li p span.space{letter-spacing: -0.05em}

.btn_detail, 
.btn_info{
width: 100%;
margin-left: auto;
margin-right: auto;
text-align: center;
margin-top: 6%;
}
.btn_detail a, 
.btn_info a{
display: inline-block;
position: relative;
border: 4px solid #265AAB;
text-align: center;
color: #265AAB;
font-size: 2rem;
font-weight: 500;
width: 40%;
box-sizing: border-box;
padding: 0.8em 1.2em 0.8em 1.2em;
}
.btn_detail a{border: 4px solid #265AAB; color: #265AAB;}
.btn_info a{border: 4px solid #989898; color: #333333; background-color: #FFFFFF}

.btn_detail a::before, 
.btn_info a::before{
    content: '';
    width: 10px;
    height: 10px;
    border: 0px;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    top: 50%;
    right: 25px;
    margin-top: -5px;
}
.btn_detail a::before{border-top: solid 1px #265AAB; border-right: solid 1px #265AAB;}
.btn_info a::before{border-top: solid 1px #989898; border-right: solid 1px #989898;}

.btn_detail a:hover,
.btn_info a:hover{color: #FFFFFF; text-decoration: none}

.btn_detail a:hover{background-color: #265AAB;}
.btn_info a:hover{background-color: #989898;}
 
.btn_detail a:hover::before, 
.btn_info a:hover::before{
    border-top: solid 1px #FFFFFF;
    border-right: solid 1px #FFFFFF;
}

#top #info dl{margin-bottom: 1.5em; font-weight: 500;}
#top #info dl:after {content: ""; display: block; clear: both; visibility: hidden;}
#top #info dt, 
#top #info dd{float: left; line-height: 1.8}
#top #info dt{width: 13%; font-weight: bold}
#top #info dd{width: 87%}
#top #info dd a{text-decoration: underline}
#top #info dd a:hover{color: #265AAB}



/*----------------------------------------------------
solution
------------------------------------------------------*/
#solution #contact_card_bk h1.ttl img{width: 80%}

#solution #contact_card_bk p{text-align: center; font-size: 1.6rem; line-height: 2.4}
#solution #contact_card_bk p span.new_line{display: block}
#solution #contact_card_bk span.b{font-weight: bold}

#solution #contact_card_bk{
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
background-image: url(../images/solution_bk.png);
padding-bottom: 6%;
}

#solution #contact_card_bk section{padding: 0}
#solution #contact_card_bk .wrap{
-webkit-box-shadow: 3px 3px 3px #666666;
box-shadow: 3px 3px 3px #666666;
padding: 4% 4% 3% 4%;
background-image: url(../images/bk.png);
box-sizing: border-box;
}

#solution #contact_card_bk p{margin-bottom: 1.5em; line-height: 2.4}
#solution #contact_card_bk p.last{margin-bottom: 0}

#solution section .contents{border: 1px solid #265AAC;}
#solution section .contents .ttl{background-color: #265AAC; font-size: 2.4rem; padding: 0.2em 0.3em 0.2em 0.7em; color: #FFFFFF; font-weight: bold;}
#solution section .contents ol{float: left; width: 48%}
#solution section .contents ol.r{margin-left: 4%}
#solution section .contents li{font-size: 1.8rem; line-height: 1.6; margin-bottom: 25px; margin-top: 25px; font-weight: 500;}
#solution section .contents li a{text-decoration: underline; position: relative; padding-left: 25px}
#solution section .contents li a:hover{color: #265AAC}
#solution section .contents li a::before{
    content: '';
    width: 8px;
    height: 8px;
    border: 0px;
    border-top: solid 2px #265AAB;
    border-right: solid 2px #265AAB;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -5px;
}

#solution section .contents .inner{padding: 3%}
#solution section .contents .inner:after {content: ""; display: block; clear: both; visibility: hidden;}

#solution .detail h1.ttl{text-align: left; margin-bottom: 0.5em}
#solution .detail h1.ttl span{display: block}

#solution .detail .bk_photo_sp{display: none}
#solution .detail p{line-height: 2.6}
#solution .detail p.b{font-weight: bold; font-size: 1.8rem; line-height: 2}
#solution .detail p.bot{margin-bottom: 1.5em}
#solution .detail .bk_photo{
width: 100%;
background-repeat: no-repeat;
background-size: 65% auto;
box-sizing: border-box;
padding-bottom: 4%;
padding-top: 4%;}
#solution .detail .bk_photo.r{background-position: right center;}
#solution .detail .bk_photo.l{background-position: left center;}
#solution .detail .bk_photo.img01{background-image: url(../images/solution_img01.png);}
#solution .detail .bk_photo.img03{background-image: url(../images/solution_img03.png);}
#solution .detail .bk_photo.img04{background-image: url(../images/solution_img04.png);}
#solution .detail .bk_photo.img05{background-image: url(../images/solution_img05.png);}
#solution .detail .bk_photo.img06{background-image: url(../images/solution_img06.png);}
#solution .detail .bk_photo.img07{background-image: url(../images/solution_img07.png);}
#solution .detail .bk_photo.img08{background-image: url(../images/solution_img08.png);}
#solution .detail .bk_photo.img09{background-image: url(../images/solution_img09.png);}
#solution .detail .bk_photo.img010{background-image: url(../images/solution_img010.png);}

#solution .detail .text_area{
width: 60%;
box-sizing: border-box;
padding: 3%;
background-repeat: repeat;
background-image: url(../images/bk.png);
-webkit-box-shadow: 3px 3px 3px #666666;
box-shadow: 3px 3px 3px #666666;
}

#solution .detail .text_area.r{margin-left: 40%}

#solution #contents02.detail li{line-height: 1.8; margin-top: 1em; margin-bottom: 1em; text-indent: -1em; margin-left: 1em; font-weight: 500;}
#solution #contents02.detail li span{font-size: 1.8rem; font-weight: bold; color: #265AAC}

#solution #contents06.detail .l_area{width: 65%; float: left}
#solution #contents06.detail .r_area{
width: 30%;
float: right;
background-repeat: no-repeat;
background-position: center top;
background-size: contain;
background-image: url(../images/solution_img06.png);
padding-top: 100%;
}
#solution #contents06.detail .ex_area .box{border: 1px solid #265AAC; margin-top: 2%}
#solution #contents06.detail .ex_area .box .ttl{background-color:#265AAC; color: #FFFFFF; font-size: 2.1rem; padding: 0.2em 0.2em 0.2em 0.5em; font-weight: bold; font-family: 'M PLUS 1p';}
#solution #contents06.detail .ex_area .box .clearfix{padding: 2.5%}
#solution #contents06.detail .ex_area .box .icon{width: 8%; float: left}
#solution #contents06.detail .ex_area .box p{width: 89%; float: right; line-height: 1.8}

#solution .detail .zu{
margin-top: 4%;
background-repeat: no-repeat;
background-size: contain;
background-position: center top;
background-image: url(../images/solution_img011.png);
padding-top: 17.43027%;
}

#solution #contents012.detail .recruitment{border: 1px dotted #306FB9; padding: 2.5%; margin-top: 6%}
#solution #contents012.detail .period{font-size: 2.6rem; font-weight: bold; color: #FF0004; text-align: center;  margin-top: 6%; font-family: 'M PLUS 1p'}
#solution #contents012.detail .kome{text-align: right; margin-top: 1em; font-size: 1.4rem; font-weight: 500; font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans";}
#solution #contents012.detail .icon_campaign{ background-color: #FB0004; color: #FFFFFF; padding: 0.2em 0.6em 0.2em 0.6em; font-size: 2.2rem; display: inline-block; margin-bottom: 0.5em; font-family: 'M PLUS 1p'; font-weight: bold}

#solution #contents012.detail .box{ padding: 2%; border-radius: 6px; margin-top: 3%; font-weight: 500; font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans";}
#solution #contents012.detail .box.personal{border: 3px solid #306FB9;}
#solution #contents012.detail .box.enterprise{border: 3px solid #FF5514;}
#solution #contents012.detail .box .ttl{
color: #FFFFFF;
padding: 0.2em 1.5em 0.2em 1.5em;
font-size: 2.2rem;
display: inline-block;
font-weight: 600;
border-radius: 30px;
box-sizing: border-box;
width: 13em;
text-align: center;
margin-bottom: 0.5em;
font-family: 'M PLUS 1p';
}
#solution #contents012.detail .box.personal .ttl{background-color: #306FB9;}
#solution #contents012.detail .box.enterprise .ttl{background-color: #FF5514;}
#solution #contents012.detail .box table{width: 100%}
#solution #contents012.detail .box th{width: 9em; font-weight: bold;}
#solution #contents012.detail .box th, 
#solution #contents012.detail .box td{padding: 0.5em}
#solution #contents012.detail .box tr.cam{background-color: #FAD8DB; font-size: 1.8rem; color: #FF0004;}
#solution #contents012.detail .box td.sec{width: 30em}
#solution #contents012.detail .box tr.tr_sec th, 
#solution #contents012.detail .box tr.tr_sec td{padding-bottom: 1em}

a.anchor {
    display: block;
    padding-top: 0;
    margin-top: 0;
}

.btn_apply{
width: 100%;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.btn_apply a{
display: inline-block;
position: relative;
text-align: center;
color: #FFFFFF;
font-size: 2.4rem;
font-weight: 500;
box-sizing: border-box;
padding: 1em 3.5em 1em 2em;
background-color: #FF5514;
}

.btn_apply a::before{
content: '';
width: 25px;
height: 27px;
border: 0px;
position: absolute;
top: 50%;
right: 2em;
margin-top: -13px;
background-image: url(../images/icon_arrow.png);
background-repeat: no-repeat;
background-size: 25px 27px;
}

.btn_apply a:hover{opacity: .7; text-decoration: none}


/*----------------------------------------------------
company
------------------------------------------------------*/
#company iframe{height: 500px}
#company table{font-weight: 500;}
#company table th{width: 6em; font-weight: bold;}
#company table th, 
#company table td{padding-bottom: 1em; padding-top: 1em; vertical-align: top; line-height: 1.8; box-sizing: border-box}
#company table td span{padding-left: 2em}
#company table td ol{margin-left: 20px}
#company table td li{list-style: disc}

#company #greeting_bk{
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
background-image: url(../images/company_bk.png);
padding-bottom: 8%;
}

#company #greeting_bk section{padding: 0}
#company #greeting_bk .wrap{
-webkit-box-shadow: 3px 3px 3px #666666;
box-shadow: 3px 3px 3px #666666;
padding: 4%;
background-image: url(../images/bk.png);
box-sizing: border-box;
}

#company #greeting_bk p{margin-bottom: 1.5em; line-height: 2.4}
#company #greeting_bk p.last{margin-bottom: 0}

/*----------------------------------------------------
information
------------------------------------------------------*/
#info_page nav#archives, 
#info_page .list{float: left}
#info_page nav#archives{width: 20%}
#info_page .list{width: 75%; margin-left: 5%}
#info_page h2{
font-size: 3.6rem;
font-weight: bold;
border-bottom: 2px solid #CCCCCC;
margin-bottom: 1em;
line-height: 1;
padding-bottom: 0.2em;
}
#info_page h3{font-size: 1.8rem; margin-bottom: 1.5em; line-height: 1.8; font-weight: bold; font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans";}
#info_page h3 span{display: block; border-bottom: dotted 1px #CCCCCC; padding-bottom: 0.3em; margin-bottom: 0.3em;}
#info_page p{line-height: 2.8}

#info_page nav#archives li{margin-bottom: 5%}
#info_page nav#archives li a{display: block; border: 1px solid #CCCCCC; font-size: 1.8rem; padding: 0.7em 0.5em 0.7em 0.5em; position: relative;}
#info_page nav#archives li a::before{
    content: '';
    width: 10px;
    height: 10px;
    border: 0px;
    border-top: solid 2px #CCCCCC;
    border-right: solid 2px #CCCCCC;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    top: 50%;
    right: 15px;
    margin-top: -5px;
}
#info_page nav#archives li a:hover{text-decoration: none; background-color: #E9F0F7;}
#info_page nav#archives li a.active{background-color: #E9F0F7;}

#info_page dl{margin-bottom: 2em}
#info_page dl:after {content: ""; display: block; clear: both; visibility: hidden;}
#info_page dt, 
#info_page dd{float: left; line-height: 1.8}
#info_page dt{width: 18%; font-weight: 600}
#info_page dd{width: 82%}
#info_page dd a{text-decoration: underline}
#info_page dd a:hover{color: #265AAB;}


/* ===================================================
1024px for tablet and SP
=====================================================*/
@media screen and (max-width : 1024px) {

body{ min-width:initial;}
.wrap{width:100%; box-sizing: border-box}

section, 
article{box-sizing: border-box;}

body#top article, 
body#company section,
body#info_page .wrap, 
body#contact .wrap, 
body#thanks .wrap, 
body#solution .wrap, 
body#solution #contact_card_bk section{padding-left: 4%; padding-right: 4%}

h1.ttl, 
h2.ttl{font-size: 3rem;}

#pankzu .inner{width:100%; padding-left: 4%; padding-top: 1.5%; box-sizing: border-box}


/*フォント----------------------------------- */
h1.sec {
font-size : 3.6rem;
padding-top:0.8em;
padding-bottom: 0.8em;
} 

#top #merit p.lead{font-size: 1.6rem}

#pc_header{height: 70px;}
#pc_header .logo a{height: 70px;}
#pc_header .logo img{ width:220px;}

#pc_header nav li{height: 70px;}
#pc_header nav li a{margin-right:30px; }
#pc_header nav li#btn_contact_card{height: 70px; font-size: 1.4rem}
#pc_header nav li#btn_contact_card a{padding: 10px;}


/*----------------------------------------------------
footer
------------------------------------------------------*/
footer #co_name{font-size: 1.8rem;}
footer #co_name .icon_mark{width:44px; height: 24px;}
footer address{font-size: 1.3rem;}
footer #sns img{width: 25px; height: 25px;}
footer #copyright{ font-size:1.1rem;}

/*----------------------------------------------------
toPageTopの設定
----------------------------------------------------*/
#toPageTop a {
	width: 60px;
	height: 60px;
	background-size: 60px 60px;
}

/*----------------------------------------------------
TOP
------------------------------------------------------*/
#top #main_img{height: 400px; width: 100%;}

#top #merit #series{font-size: 1.6rem;}
#top #merit #series span.small{font-size: 1.2rem;}
#top #merit li p{font-size: 1.4rem;}
#top #merit li p span.bold{font-size: 2rem;}

.btn_detail a, 
.btn_info a{font-size: 1.8rem; padding: 0.8em;}
.btn_detail a{border: 3px solid #265AAB;}
.btn_info a{border: 3px solid #989898;}

#top #info dl{margin-bottom: 1.5em}
#top #info dt, 
#top #info dd{float: none;}
#top #info dt{width: 100%;}
#top #info dd{width: 100%}

/*----------------------------------------------------
solution
------------------------------------------------------*/
#solution #contact_card_bk h1.ttl img{width: 80%}
#solution #contact_card_bk p{font-size: 1.6rem}

#solution section .contents .ttl{ont-size: 2rem;}
#solution section .contents li{font-size: 1.6rem; text-indent: -25px; margin: 25px;}

#solution .detail h1.ttl{font-size: 2.8rem}
#solution .detail h1.ttl span{display: inline}
#solution .detail p{line-height: 2}
#solution .detail p.b{font-size: 1.6rem;}

#solution #contents02.detail li span{font-size: 1.6rem;}
#solution #contents06.detail .ex_area .box .ttl{font-size: 1.8rem;}
#solution #contents06.detail .ex_area .box p{font-size: 1.5rem;}

#solution .detail .text_area p{font-size: 1.4rem;}

#solution #contents012.detail .period{font-size: 2.4rem;}
#solution #contents012.detail .kome{font-size: 1.3rem}
#solution #contents012.detail .icon_campaign{font-size: 2rem;}

#solution #contents012.detail .box .ttl{width: 100%}
#solution #contents012.detail .box th{width: 100%; display: block; font-weight: bold}
#solution #contents012.detail .box td{display: inline-block}
#solution #contents012.detail .box th, 
#solution #contents012.detail .box td{padding: 0.2em 0.5em 0.2em 0.5em; }
#solution #contents012.detail .box td.sec{width: inherit}
#solution #contents012.detail .box tr.tr_sec th{padding-bottom: 0}

/*----------------------------------------------------
information
------------------------------------------------------*/
#info_page h2{font-size: 2.8rem;}

#info_page nav#archives li{margin-bottom: 8%}
#info_page nav#archives li a{font-size: 1.6rem; padding: 0.4em 0.5em 0.4em 0.5em;}
#info_page nav#archives li a::before{
    width: 7px;
    height: 7px;
    right: 10px;
    margin-top: -4px;
}

#info_page dt, 
#info_page dd{float: none;}
#info_page dt{width: 100%;}
#info_page dd{width: 100%}

/*----------------------------------------------------
company
------------------------------------------------------*/
#company iframe{height: 400px}
#company #greeting_bk section{padding:4%}


}/*1024px for tablet and SP*/


/* ===================================================
767px for SP
=====================================================*/
@media screen and (max-width : 767px) {

body{ min-width:initial;}
html {
    font-family: 'M PLUS 1p', sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック";
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	font-size: 62.5%;/* 10px */
}

.wrap{width:100%; box-sizing: border-box}

section, 
article{padding: 12% 0 12% 0;}
article.sec{padding-top: 50px;}

body#top article, 
body#company section{padding-left: 4%; padding-right: 4%;}
body#info_page .wrap{padding-left: 4%; padding-right: 4%}

body#thanks article{padding-bottom: 12%}
.sp{display: block}




#pankzu{font-size: 1rem}

/*フォント----------------------------------- */
h1.sec {
font-size : 2.6rem;
padding-top:0.5em;
padding-bottom: 0.5em;
} 
h1.ttl, 
h2.ttl{font-size: 2.6rem; font-weight: bold; margin-bottom: 1em}
p{font-weight: normal;}
p.lead{font-size: 1.6rem;}


/*----------------------------------------------------
header
------------------------------------------------------*/
#pc_header{display: none}
#sp_header{display: block;}
#sp_header .header_head{
padding: 0px;
position: fixed;
height: 50px;
width: 100%;
box-sizing: border-box;
z-index: 1000;
background-color: #FFFFFF;
border-bottom: 1px solid #C5DBEB;
}

#sp_header .logo{ width:160px; padding-left: 5%; display: table-cell; height: 50px; vertical-align: middle}
#sp_header .logo img{vertical-align: middle}
#sp_header .header_head #btn_contact_card02{position: absolute; right: 0}
#sp_header .header_head #btn_contact_card02 a{
display: block;
height: 50px;
color: #FFFFFF;
background-color: #FF5514;
text-align: center;
font-size: 1.2rem;
font-weight: bold;
box-sizing: border-box;
padding: 0.5em 0.6em 0.2em 0.6em;
width: 120px;
}
#sp_header .header_head #btn_contact_card02 a span{display: block}

/*メニュー表示の際の非表示設定*/
#sp_header .header_head.bgc{background-color:#333; border-bottom:none;}
#sp_header .header_head.bgc .logo, 
#sp_header .header_head.bgc #btn_contact_card02{display: none}


/*toggle
-------------------------------------------------------------------*/

#toggle {
    display: block;
    width: 50px;
    height: 50px;
    position: absolute;
	z-index:1000;
    right: 130px;
    top:0;
    background-color: transparent;
  }
#sp_header .header_head.bgc #toggle {right: 2%;}

  .toggle__link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    text-align: center;
    box-sizing: border-box;
    padding-top: 0px;
  }

  .toggle__link:hover {opacity: 1;}

  .toggle-icon {
    display: block;
    position: absolute;
    top: 47%;
    left: 50%;
    width: 25px;
    height: 3px;
    margin: 0px 0 0 -12px;
    background: #333333;
    transition: .2s;
  }

  .toggle-text {
    display: block;
    position: absolute;
    left: 50%;
    bottom: 10px;
    width: 27px;
    height: 8px;
    margin: 0 0 0 -13px;
    background-size: 27px auto;
  }

  .toggle-text.close {
    display: block;
    position: absolute;
    left: 50%;
    bottom: 5px;
    width: 30px;
    height: 8px;
    margin: 0 0 0 -15px;
    background-size: 30px auto;
  }

  .toggle-text:after {
    display: block;
    position: absolute;
    top: 5px;
    left: 50%;
    font-size: 8px;
    width: 50px;
    margin-left: -25px;
	color:#333333;
  }

  .toggle-text.close:after {
    content: '閉じる';
	color:#FFFFFF;
  }

  .toggle-icon:before, .toggle-icon:after {
    display: block;
    content: "";
    position: absolute;
    top: 2px;
    left: 0;
    width: 25px;
    height: 3px;
    background: #333333;
    transition: .3s;
  }

.toggle-icon:before {margin-top: -10px;}
.toggle-icon:after {margin-top: 6px;}
#toggle .toggle-icon.close {background: transparent;}
#toggle .toggle-icon.close:before, 
#toggle .toggle-icon.close:after {margin-top: 0;}

  #toggle .toggle-icon.close:before {
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
	background: #FFFFFF;
  }

  #toggle .toggle-icon.close:after {
    -moz-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
	background: #FFFFFF;
  }
  
  .toggle_menu {
    width: 100%;
	height: calc(100vh - 0px);
    position: fixed;
    top:0px;
    left: 0;
    display: none;
    background-color:#333333;
	z-index:100;
    font-size: 2.2rem;
    font-weight: bold;
  }
  .toggle_menu li span{font-size: 1.4rem; display: inline-block; margin-left: 1em; font-weight: normal;}

  .header-bottom-inner {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 70px 0 30px 0;
    box-sizing: border-box;
  }

.toggle_menu a{ color:#FFF; display: block; padding: 1em; border-bottom: 1px solid #666666;}
.toggle_menu a:hover{text-decoration: none}
.toggle_menu ul{border-top: 1px solid #666666}
.toggle_menu li{ position: relative}

.toggle_menu li::before{
    content: '';
    width: 10px;
    height: 10px;
    border: 0px;
    border-top: solid 1px #FFF;
    border-right: solid 1px #FFF;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    top: 50%;
    right: 25px;
    margin-top: -6px;
}

.toggle_menu li.contact_card a{background-color: #FF5514; border:1px solid #FFFFFF; text-align: center}
.toggle_menu li.contact_card{margin: 8% 4% 6% 4%;  font-size: 1.8rem;}
.toggle_menu li.contact_card::before{
    border-top: solid 2px #FFF;
    border-right: solid 2px #FFF;
    right: 15px;
}


/*----------------------------------------------------
footer
------------------------------------------------------*/
footer {padding-top:10%; padding-bottom:10%;}
footer #co_name{font-size: 1.3rem;}
footer #co_name .icon_mark{width:33px; height: 18px;}
footer address{font-size: 1rem;}
footer #sns img{width: 25px; height: 25px; margin-top: 3%}
footer #copyright{ font-size:1rem; margin-top: 3%}


/*----------------------------------------------------
toPageTopの設定
----------------------------------------------------*/
#toPageTop {
	bottom: 30px;
	right: 3%;
}
#toPageTop a {
	width: 50px;
	height: 50px;
	background-size: 50px 50px;
}

/*----------------------------------------------------
TOP
------------------------------------------------------*/
#top #main_img{display: none}
#top #main_sp{padding-top: 50px}

#top #rinen{
background-color: #003780;
color: #FFFFFF;
font-size: 1.2rem;
padding: 6% 4% 6% 4%;
line-height: 2;
}
#top #rinen ul, 
#top #rinen .icon_mission{display: table-cell; vertical-align: middle}
#top #rinen ul{ width: 74%;}
#top #rinen .icon_mission{ width: 22%; padding-right: 4%}

#top #merit .ttl {margin-top: 0}
#top #merit .ttl img{width: 100%}
#top #merit #series{font-size: 1.5rem; text-align: left}
#top #merit #series .personal, 
#top #merit #series .business{width: 100%; box-sizing: border-box; padding-left: 0.3em; border: 1px solid #CCCCCC;}
#top #merit #series .business{ margin-left: 0; margin-top: 0.5em}

#top #merit p.lead{text-align: left;}

#top #merit li{
text-align: center;
display: inline-block;
border: 1px solid #CCCCCC;
width: 49%;
margin-right: 2%;
box-sizing: border-box;
margin-bottom: 2%;
vertical-align: top;
}
#top #merit li img{width: 50%}
#top #merit li:nth-child(3){margin-right: 2%}
#top #merit li:nth-child(2), 
#top #merit li:nth-child(4), 
#top #merit li:nth-child(6){margin-right: 0}
#top #merit li p {font-size: 1.1rem;}
#top #merit li p span.bold{font-size: 1.6rem;}

#top #info dl{font-weight: normal;}

.btn_detail, 
.btn_info{margin-top: 8%;}
.btn_detail a, 
.btn_info a{
font-size: 1.8rem;
width: 100%;
padding: 1em;
}

/*----------------------------------------------------
solution
------------------------------------------------------*/
#solution #contact_card_bk{background-image: url(../images/solution_bk_sp.png);}
#solution #contact_card_bk h1.ttl img{width: 90%}
#solution #contact_card_bk h2.ttl span{display: block;}
#solution #contact_card_bk p{text-align: left; font-size: 1.6rem;}
#solution #contact_card_bk{padding-bottom: 12%;}
#solution #contact_card_bk .wrap{padding: 8% 4% 4% 4%;}
#solution #contact_card_bk p span.new_line{display: inline}

#solution section .contents{border:none}
#solution section .contents .ttl{font-size: 2rem;}
#solution section .contents ol{float: none; width: 100%}
#solution section .contents ol.r{margin-left: 0}
#solution section .contents li{font-size: 1.6rem; margin-bottom: 20px; margin-top: 20px; }
#solution section .contents ol.r li:last-child{margin-bottom: 0px;}
#solution section .contents li a{padding-left: 20px}
#solution section .contents li a::before{width: 6px; height: 6px;}

#solution section .contents .inner{padding: 1%}

#solution .detail .bk_photo_sp{display: block}
#solution section.detail{padding-top: 14%; padding-bottom: 14%}

#solution .detail h1.ttl{text-align: center; margin-bottom: 0.5em; font-size: 2.4rem;}
#solution .detail h1.ttl span{display: block}
#solution .detail p{line-height: 2.2; font-size: 1.4rem;}
#solution .detail p.b{font-size: 1.6rem;}
#solution .detail .bk_photo{
width: 100%;
padding-bottom: 0;
padding-top: 0;
}

#solution .detail .bk_photo.img01, 
#solution .detail .bk_photo.img03, 
#solution .detail .bk_photo.img04,
#solution .detail .bk_photo.img05, 
#solution .detail .bk_photo.img06, 
#solution .detail .bk_photo.img07, 
#solution .detail .bk_photo.img08, 
#solution .detail .bk_photo.img09, 
#solution .detail .bk_photo.img010{background-image:none;}

#solution .detail .bk_photo_sp{
width: 100%;
height: 240px;
background-repeat: no-repeat;
background-size: cover;
margin-top: 5%;
}
#solution .detail .bk_photo_sp.img01{background-image: url(../images/solution_img01.png);}
#solution .detail .bk_photo_sp.img03{background-image: url(../images/solution_img03.png);}
#solution .detail .bk_photo_sp.img04{background-image: url(../images/solution_img04.png);}
#solution .detail .bk_photo_sp.img05{background-image: url(../images/solution_img05.png);}
#solution .detail .bk_photo_sp.img06{background-image: url(../images/solution_img06.png);}
#solution .detail .bk_photo_sp.img07{background-image: url(../images/solution_img07.png);}
#solution .detail .bk_photo_sp.img08{background-image: url(../images/solution_img08.png);}
#solution .detail .bk_photo_sp.img09{background-image: url(../images/solution_img09.png);}
#solution .detail .bk_photo_sp.img010{background-image: url(../images/solution_img010.png);}

#solution .detail .text_area{
width: 100%;
padding: 0;
background-image:none;
-webkit-box-shadow: none;
box-shadow:none;
}

#solution .detail .text_area.r{margin-left: 0%}
#solution .detail .text_area p{font-size: 1.5rem;}

#solution #contents02.detail li{line-height: 1.8; margin-top: 1em; margin-bottom: 1em; text-indent: -1em; margin-left: 1em; font-size: 1.4rem;}
#solution #contents02.detail li span{font-size: 1.6rem; font-weight: 600; color: #265AAC}

#solution #contents06.detail .l_area{width: 100%; float: none}
#solution #contents06.detail .r_area{
width: 100%;
float: none;
margin-top: 8%;
background-image: url(../images/solution_img06_sp.png);
padding-top: 81.79741%;
}

#solution #contents06.detail .ex_area .box .ttl{font-size: 1.6rem;}
#solution #contents06.detail .ex_area .box .icon{display: none}
#solution #contents06.detail .ex_area .box p{width: 100%; float: none;}

#solution .detail .zu{
margin-top: 4%;
background-image: url(../images/solution_img011_sp.png);
padding-top: 129.77913%;
}

#solution #contents012.detail .period{font-size: 1.8rem; margin-top: 8%}
#solution #contents012.detail .period span{display: block}

#solution #contents012.detail .kome{text-align: left; margin-top: 1em; font-size: 1.2rem}
#solution #contents012.detail .icon_campaign{font-size: 1.6rem; display:block; text-align: center}

#solution #contents012.detail .box{padding: 5%}
#solution #contents012.detail .box .ttl{
font-size: 1.8rem;
display: block;
width: 100%;
}
#solution #contents012.detail .box table{width: 100%; font-size: 1.4rem;}
#solution #contents012.detail .box th{width: 100%;}
#solution #contents012.detail .box th, 
#solution #contents012.detail .box td{padding: 0 0.5em 0 0.5em; display: block}
#solution #contents012.detail .box tr.cam{font-size: 1.5rem;}

#solution #contents012.detail .box td.last, 
#solution #contents012.detail .box td.sec{margin-bottom: 0;}
#solution #contents012.detail .box td.last{margin-bottom: 0.7em; border-top: 1px dotted #CCCCCC;}
#solution #contents012.detail .box tr.cam td.last, 
#solution #contents012.detail .box tr.cam td.sec{margin-bottom: 0}
#solution #contents012.detail .box tr.cam th{padding-top: 0.5em}
#solution #contents012.detail .box tr.cam td.last{padding-bottom: 0.5em; border-top: 1px dotted #ff0000;}
#solution #contents012.detail .box tr.tr_sec td{padding-bottom: 0}

a.anchor {
    padding-top: 50px;
    margin-top: -50px;
}

.btn_apply{padding-right: 4%; padding-left: 4%; box-sizing: border-box}
.btn_apply a{
font-size: 1.7rem;
font-weight: 500;
box-sizing: border-box;
padding: 1em 2em 1em 0.8em;
background-color: #FF5514;
width: 100%;
}

.btn_apply a::before{
content: '';
width: 16px;
height: 17px;
right: 0.8em;
margin-top: -9px;
background-size:16px 17px;
}


/*----------------------------------------------------
information
------------------------------------------------------*/
#info_page nav#archives, 
#info_page .list{float:none; width: 100%}
#info_page .list{margin-left: 0%}

#info_page h2{margin-top: 1.5em;}

#info_page nav#archives ul{font-size: 0}
#info_page nav#archives li{display: inline-block; width: 31%; margin-right: 3.5%; margin-bottom: 3.5%}
#info_page nav#archives li:nth-child(3n){margin-right: 0}
#info_page nav#archives li a{font-size: 1.6rem; padding: 0.5em 0.5em 0.5em 0.5em; position: relative;}
#info_page nav#archives li a::before{
    width: 8px;
    height: 8px;
    border-top: solid 1px #CCCCCC;
    border-right: solid 1px #CCCCCC;
    right: 10px;
    margin-top: -5px;
}

/*----------------------------------------------------
company
------------------------------------------------------*/
#company iframe{height: 300px}
#company table {font-weight: normal; width: 100%; }
#company table th{background-color: #f0f0f0; margin-bottom: 0.3em;}
#company table th, 
#company table td{display: block; padding:0.1em 0.5em 0.1em 0.5em; width: 100%; } 
#company table td{margin-bottom: 1em}
#company table td span{display: block; padding-left: 0}

#company #greeting_bk{background-image: url(../images/company_bk_sp.png);}
#company #greeting_bk section{padding:4%;}
#company #greeting_bk .wrap{padding: 10% 6% 10% 6%}


}