@charset "utf-8";
/* CSS Document */

body { font-size:12px; }

.half {
    width: 100%;
}
.pc_v {
	display:none;
}
.sp_v {
	display:block;
}
.icon {
    width: 8%;
	margin-bottom: 4px;
}
.sp_wrap::before {
	content: "\A";
	white-space: pre;
}
.ttl_icon {
    width: 12%;
}
.fs12 {
    font-size: 1.2em;
}
.fs14 {
    font-size: 1.25em;
}
.fs15 {
	font-size: 1.3em;
}
.fs20 {
    font-size: 1.5em;
    margin: 0;
}
.fs28 {
    font-size: 1.75em;
}
.h_ttl {
    font-size: 2em;
	margin: 0.5em 0 ;
}
.sp_wrap::before {
	content: "\A";
	white-space: pre;
}
/********** header *******************/
header#header h1 {
    width: 37%;
	line-height: 2.5rem;
	margin-bottom: 0;
}
header#header h1 img.logo {
    max-width: 131px;
    width: 70%;
}
header#header h1 img.text_logo {
    max-width: 165px;
    width: 88%;
}
header#header a.h_contact {
    margin: 1.5em 0em 0 0em;
	font-size: 0.875em;
}
/*********************** nav *******************************/
header#header nav.right {
    margin-top: 0;
}
#head_nav nav {
	position:relative;
    display: block;
    padding-top: 0;
    width: 100%;
}

#head_nav #spnav a {
	color:#000;
}
header#header nav {
    width: 100%;
}

header#header nav ul#nav {
	display:none;padding-left: 1em;
	background-color: #F8F8Fb;
	padding: 0.8em 0.5em 1.5em 1em;
}	
#head_nav nav ul#nav {
	position:absolute;
	right:0;
	z-index:2000;
	width:100%;
	margin:0 0 1px 0; padding:0;
	display:none;
}


header#header nav ul#nav li {
    display: block;
    margin:0;
    width: 98%;   
   	padding-left:0;
	padding-right:2px;
	font-size:1.3em;
	border-bottom: 1px solid #999;
	line-height: 2em;
}

header#header nav ul#nav li a  {
	padding:0;
	color: #212121;
	font-size: 1.1em;
}
header #spnav {
    right: 2%;
    top: 59px;
    position: absolute;
    display: block;
    font-size: 2.6em;
}
header#header nav#menu {
    margin-top: 0;
    width: auto;
}


header h1 a{
    width: 100%;
}
header#header .nav_box {
	margin-top: 6.5em;
	float: none;
}
header#header nav#menu ul {
    width: 85.5%;
    font-size: 2em;
    background-color: #fff;
    text-align: left;
    padding: 8%;
    line-height: 1.8em;
	border-radius: 0.5em;
    -moz-border-radius: 0.5em;
    -webkit-border-radius: 0.5em;
}

header#header nav {
    padding-right: auto;
}
header#header i {
	text-align: center;
	vertical-align: middle;
}
header#header div#spnav i {
	color: #333333;
}
header#header div#spnav span {
	display: block;
    font-size: 0.35em;
    margin-left: 0.2em;
	line-height: 0;
	color: #333333;
}

/********************************* top       **********************************/
.flex {
	display: block;
}

a.s_button {
    width: 15em;
}
a.m_button {
    width: 16.5em;
    padding: 0.8em 0.5em 0.8em 1em;
	font-size: 1.2em;
}
body#top h2 span.fs, section#page_contact h2 span.fs {
    font-size: 0.5em;
    font-weight: normal;
}
div.v_line {
    border-left: 1px solid #333;
    height: 40px;
    width: 1px;
    margin-top: 2em;
}

section#top_infomation .flex01 {
    margin-bottom: 0.5em;
    margin-top: 2em;
}
section#top_infomation div.quadrant dt span.fs14 {
	font-size:0.75em;
}


.report_sum,
.report_sum .heading {
	margin:0 auto;
}
body#top div.quadrant {
	width:100%;
	margin-left: 0%;
}
body#top div.trichotomy {
	width:100%;
	margin-left: 0%;
	margin-bottom: 3em;
}
section#top_works .flex03 {
    margin-bottom: 0em;
}
section#top_works .design_ad {
    margin-bottom: 0em;
}
section#top_works div.design_ad img {
    display: block;
    margin: 0 auto;
}
section#top_works div.design_ad h4 {
	font-size: 1.3em;
	margin-bottom: 0;
}
section#top_works div.design_ad  div.quadrant {
    margin-left: 0%;
    margin-bottom: 3em;
}
section#top_works div.design_ad  div.quadrant p {
	margin: 0;
}
section#top_works div.out_line p.tal {
	text-align: left;
}
section#top_works div.outsourcing {
    width: 100%;
    margin: 2em auto 2em auto;
}
section#top_works div.outsourcing div.quadrant {
    width: 50%;
    margin-left: 0%;
}
section#top_works div.outsourcing div.quadrant h5.fs17 {
	font-size: 1.2em
}
section#top_service div.out_line {
    border: 10px solid #ff9900;
    padding: 3em 1em 1.5em 1em;
    margin-top: 3em;
}
section#top_works div.out_line {
    border: 10px solid #ffCC00;
    padding: 1.5em 1em 3em 1em;
    margin-top: 3em;
}

div.attracting_customers_top .farm_bnr {
    float: none;
    position: relative;
    display: block;
    width: 90%;
    margin: auto;
}
div.attracting_customers_top .farm_bnr dl dt{
    font-size: min(calc(26* 0.2vw), 26px);
}

/***************************  swiper  ***************************************/
section#slide .sp_slide1 {
	background-image: url(../images/top/slide_sp_01.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: top center;
}
section#slide .sp_slide2 {
	background-image: url("../images/top/slide_sp_02.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: top center;
}
section#slide .sp_slide3 {
	background-image: url(../images/top/slide_sp_03.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: top center;
}
section#slide .sp_slide4 {
	background-image: url(../images/top/slide_sp_04.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: top center;
}
section#slide .swiper-slide {
    padding: 64% 0 64% 0;
}
/***********************   outsourcing   *******************************************/
body#outsourcing h2 {
    font-size: 2em;
}
section#outsourcing_content div.help h3.fs34 {
    font-size: 2em;
}
section#outsourcing_content div.help p.fs24 {
    font-size: 1.5em;
    text-align: left;
	margin: 2em 0.5em 0.5em 0.5em;
}
section#outsourcing_content div.help p:last-of-type {
	text-align: left;
	margin: 0 0.8em;
}
section#outsourcing_content div.human_resources {
    margin-top: 3em;
}
section#outsourcing_content div.human_resources h3 span {
    font-size: 2rem;
}
section#outsourcing_content div.human_resources p.center.fs20 {
    margin-bottom: 0.5em;
    text-align: left;
}
section#outsourcing_content div.human_resources p.center.fs20.tc {
	text-align: center;
}
section#outsourcing_content div.half img.strategy {
    width: 96%;
    display: block;
    margin: 0 auto 2em auto;
}
section#outsourcing_content div.help p.border_r {
    display: block;
    width: 15em;
    margin: 0.5em auto;
}
section#outsourcing_content div.right.half {
    width: 100%;
}
section#outsourcing_content div.check_box {
	float: none;
}
section#outsourcing_content div.half ul {
    padding: 0.8em 0 0.8em 2em;
}
section#outsourcing_content div.right.half p.left.fs14 {
    float: none;
    text-align: center;
}
/************************* service *****************************************/
section#service_content h2 {
    font-size: 2em;
}
section#service_content div.left {
    width: 100%;
    float: none;
}
section#service_content div.right {
    width: 100%;
    float: none;
}
section#service_content h3.grid_bg_04 {
    line-height: 1.2em;
    font-size: 2em;
	padding:0.5em 0.5em 0.3em 0.5em;
}
section#service_content h3 span {
    font-size: 1rem;
}
section#service_content h3 span::before {
	content: "\A";
	white-space: pre;
}
/************************* design_ad *****************************************/
section#ad_content h2 {
    margin-bottom: 0.85em;
}
section#ad_content div.ad_top {
    margin-top: 0;
}
section#ad_content div.bg_c_y h3.fs34 {
    font-size: 1.9em;
    margin: 1em auto 1em auto;
    line-height: 1.5em;
    text-align: left;
    width: 96%;
}
section#ad_content div.p_box01 p,
section#ad_content div.p_box02 p {
    width: auto;
    margin: 0.1em;
}
section#ad_content div.bg_c_y p.fs24 {
	font-size: 1.5em;
}
section#ad_content div.bg_c_y p.strength {
	text-align: left;
	margin: 0em 0.8em;
}
section#ad_content div.de {
    width: 100%;
}
section#ad_content div.de h4 {
    margin: 1em auto;
    width: 96%;
}
section#ad_content div.de p {
    text-align: left;
    width: 96%;
    margin: 0 auto 1em;
}
section#ad_content section#top_works div.out_line {
    padding: 2em 0 0em 0;
	margin-bottom: 2em;
}
section#ad_content div.ad_box {
    width: 100%;
    float: none;
	margin: 2em 0;
}
section#ad_content div.ad_box,
section#ad_content div.ad_box p,
section#ad_content div.ad_box h5,
section#ad_content div.ad_box img {
	position: static;
}
section#ad_content div.ad_box h5{
	margin-bottom: 0em;
    font-size: 1.2em;
}

section#ad_content div.ad_box {
    width: 100%;
    float: none;
    margin: 2em auto;
}
section#ad_content div.ad_box:first-of-type {
	height: 340px;
}
section#ad_content div.ad_box:nth-of-type(3) {
	height: 340px;
}
section#ad_content div.ad_box:nth-of-type(n + 7) {
	height: 340px;
}
section#ad_content div.ad_box:nth-of-type(n + 9) {
    margin-top: 0;
}
section#ad_content div.ad_box.l {
	margin-bottom: 0;
}
.movie-wrap {
     position: static;
}
 
.movie-wrap iframe {
     position: static;
     left: 0;
     width: 100%;
     height: 63%;
	bottom: 7em;
}
/************************* company *****************************************/
section#company_content,
section#news_content {
    padding-top: 1em;
}
section#company_content div.company_top h2.h_ttl,
section#news_content div.news_top h2.h_ttl {
	margin-bottom: 0.875em;
}
h2 span.fs {
    font-size: 0.5em;
}
section#philosophy p.fs20,
section#conduct p.fs20 {
	text-align: left;
}
section#conduct img.sp_v {
	margin-top: 2em;
}
section#summary div.middle_inner {
    margin: 0 auto;
    padding: 2em 0 0.5em 0;
}
section#summary dl,
section#summary dl dt,
section#summary dl dd {
	display: block;
	padding-left: 0;
}
section#summary .bs_01 {
    width: 96%;
    margin: 0 2%;
}
section#summary .bs_01 dt, 
section#summary .bs_02 dt,
section#summary .bs_03 dt,
section#summary .bs_04 dt {
    width: 10em;
    padding-right: 0;
    padding-left: 0;
    padding-top: 1em;
}
section#summary .bs_01 dd,
section#summary .bs_02 dd,
section#summary .bs_03 dd,
section#summary .bs_04 dd {
    padding-left: 0;
    padding-top: 1em;
    margin-left: 0;
}
section#summary .bs_02 {
    width: 96%;
    margin: 0 2%;
}
section#summary .bs_03 {
    width: 96%;
    margin: 0em 2%;
}
section#summary .bs_03 dd span.fs14 {
    margin-left: 1em;
    font-size: 1em;
}
section#summary .bs_03 dd span.br::after {
	content: "\A";
	white-space: pre;
}
section#summary .bs_03 dd span.fs12 {
    margin-left: 1.5em;
    font-size: 1em;
}
section#summary .bs_03 dd.f,
section#summary .bs_03 dd.s,
section#summary .bs_03 dd.l {
    width: 100%;
}
section#summary .bs_03 dd.l,
section#summary .bs_03 dd.s {
    margin-left: 0;
}
section#summary .bs_04 dd.l {
    width: 100%;
}
/************************* policy *****************************************/
section#policy_content section.policy.bg_c {
    padding: 1em 0;
    margin: 3em 0 1em 0;
}
section#policy_content section.policy.bg_c div.bg_c {
    width: 96%;
    padding: 0 2% 1em 2%;
}
section#policy_content section.policy h3.fs24 {
    padding-top: 1.5em;
    font-size: 1.5em;
}
section#policy_content section.policy p.implementation {
    margin-bottom: 1em;
}
section#policy_content section.policy ul {
    padding-left: 0;
    margin-top: 1em;
    margin-bottom: 2em;
}
section#policy_content section.policy ul.underlayer li.underlayer {
    margin-bottom: 1em;
}
section#policy_content section.policy ul.get li.get, 
section#policy_content section.policy ul.correspondence li.correspondence,
section#policy_content section.policy ul.establishment li.establishment,
section#policy_content section.policy ul.correspondence li.correspondence {
	margin-left: 2em;
    text-indent: -2.6em;
}
section#policy_content section.policy table {
    border-collapse: collapse;
    margin-left: -2em;
}
section#policy_content section.policy th {
    display: block;
    width: 100%;
    border: 1px solid #CCC;
    padding: 0.63em 2%;
    text-indent: 0;
}
section#policy_content section.policy td {
    display: block;
    width: 100%;
    border: 1px solid #CCC;
    padding: 1em 2%;
    text-indent: 0;
}
section#policy_content section.policy ul.establishment ul.consultation {
    margin-left: 0;
}
section#policy_content section.policy ol.consultation_desk {
    padding-left: 1em;
}
section#policy_content section.policy ul.in_ul li {
    text-indent: -1em;
    padding-inline-start: 1em;
}
section#policy_content section.policy ul.in_ul {
    margin-block-start: 0.25em;
}
/********************************  web  **********************************/
section#attracting_customers h3.fs34 {
    font-size: 1.9em;
    margin: 1em auto 1em auto;
    line-height: 1.5em;
    text-align: left;
    width: 96%;
}
section#attracting_customers div.p_box01 p.border_r {
    width: 13em;
    display: block;
    padding: 0.2em 1.5em;
    margin-left: auto;
    margin-right: auto;
}

section#attracting_customers div.bg_c_y p.strength {
    text-align: left;
    margin: 0 0.8em;
}
section#attracting_customers div.bg_c_y p.fs24 {
    font-size: 1.5em;
    text-align: left;
    margin: 2em 0.5em 0.5em 0.5em;
}
section#attracting_customers div.de {
    width: 100%;
    float: none;
    margin-right: 0;
    margin-bottom: 3em;
}
section#attracting_customers div.web_box {
    float: none;
    width: 100%;
    margin: 4em 0 3em 0;
}
section#attracting_customers div.web_box h5 {
	font-size: 1.6em;
    margin-bottom: 0.5em;
    margin-top: 0.5em;
}
section#top_works em.c_text {
    display: block;
    text-align: left;
    margin-top: 2em;
}
/************************* page_contact *****************************************/
section#page_contact div.contact_box {
    width: 100%;
}
section#page_contact div.data {
    width: 100%;
    padding: 0;
}
section#top_service p.center.fs20,
section#page_contact p.center.fs20 {
	text-align: left;
}
section#page_contact div.staff_about {
    width: 100%;
    padding: 1em 0;
    margin: 0;
}
section#page_contact div.staff_about img {
    width: 100%;
}
section#page_contact div.contact_box a.tel {
    border: 1px solid #ff9900;
    padding: 0.2em 5%;
    display: block;
    margin: 0 auto;
    width: 90%;
    text-align: center;
	float: none;
}
section#page_contact div.contact_box a.mail {
    padding: 0.5em 2em;
    float: none;
    display: block;
    margin: 2em auto;
    text-align: center;
}
section#page_contact iframe {
	height: 260px;
}
section#page_contact div.glid_bg_m {
    margin: 1em 0 2em 0;
    padding-bottom: 2em;
}
section#page_contact h4 {
    position: relative;
}
section#page_contact h4 a img.logo {
	width: 38%;
	display:block;
	margin-left:2%;
	padding-bottom:1em;
}
section#page_contact h4 a img.text_logo {
	margin-left: 2%;
	display:block;
}
section#page_contact h4 a {
	display: block;
	width:60%;
	/*text-align: center;*/
}
section#page_contact h4 a.plivacy_logo_link {
    padding-left: 0em;
    position: absolute;
    top: 0;
    right: -2%;
	width:20%;
	display:block;
}
section#page_contact div.sapporo {
	margin: 0em 2% ;
	width: 96%
}
section#page_contact div.asahikawa {
    margin: 0em 2% 2em 2%;
    width: 96%;
}
section#page_contact div.data dd {
    margin-left: 0;
    font-size: 1.25em;
}
section#page_contact div.staff_about {
    width: 96%;
    padding: 1em 0;
    margin: 0;
	float: left;
}
section#page_contact div.staff_about img.left {
    margin-top: 0.3em;
}
section#page_contact div.staff_about div.staff_contact p {
    font-size: 1em;
}
section#page_contact div.staff_about a {
    width: 10em;
}
/***********************  contact  *************************/
section#contact div.inner {
    padding: 1em 0;
    margin-top: 3em;
}
section#contact form {
    padding-bottom: 3em;
    padding-top: 1em;
}
#contact form input[type=submit] {
	width:70%; font-size:1em;
}
#contact form input[type=submit].center {
	display:block; margin:0 auto;
}

#contact form input[type=submit]:hover ,
#contact form input[type=button]:hover {
	opacity:0.8;
	filter:alpha(opacity=80);
	-ms-filter: "alpha( opacity=80 )";
	
}

#contact form label {
	display:inline-block; margin-right:20px; margin-bottom:10px;
}
#contact form input[type="radio"] 
{font-size:200%;height:18px;width:18px; } 
#contact form input[type="checkbox"] 
{font-size:200%;height:18px;width:18px; }

form a.back {
	display:inline-block;
	text-align:center;
	text-decoration:none;
	line-height:48px;
	width:30%; margin-bottom:31px; height:48px; font-size:20px;
	background-color:#888; border:#666 solid 1px;
	color:#FFF; cursor:pointer;
	box-shadow:0px 0px 13px -5px rgba(0, 0, 0, 0.8);
	border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	-o-border-radius: 2px;
	-ms-border-radius: 2px;
}
form a.post {
	display:inline-block;
	text-align:center;
	text-decoration:none;
	line-height:48px;
	width:30%; margin-bottom:31px; height:48px; font-size:20px;
	background-color:#0099CB; border:solid 1px #4682A2;
	color:#FFF; cursor:pointer;
	box-shadow:0px 0px 13px -5px rgba(0, 0, 0, 0.8);
	border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	-o-border-radius: 2px;
	-ms-border-radius: 2px;
}

form input[type=text] {
	width:95%; padding:8px; font-size:100%;
}

form input[type=number]{
	width:40%; padding:8px; font-size:100%;
}
form select{
	width:90%; padding:8px; font-size:100%;
}

form input[type=radio]{
	width:18px; height:18px; margin-left:10px;
}
form textarea {
	width:95%; height:140px; padding:5px; font-size:100%;
}
section#contact form input[type="submit"] {
	width: 90%;
	font-size: 1.2em;
}
section#contact form dl dd {
    margin: 0.5em auto;
    padding: 0 0.5em;
}
section#contact form p.click {
	text-align: left;
	margin: 0 0.8em;
}
/************************* footer *************************/
footer#footer section.footer div.bannar {
    width: 90%;
}
footer#footer section.footer a.bannar {
    margin-right: 0em;
	margin-bottom: 2%;
	float: left;
	width: 48%
}
footer#footer section.footer a.bannar:nth-of-type(even) {
	margin-left: 4%;
}
footer#footer section.footer a.bannar img {
    width: 100%;
}
footer#footer p.copy {
	font-size: 0.8em; text-align:center;
}
/*footer#footer img.plivacy_logo {
    width: 100%;
    max-width: 56px;
    margin: 0 1em;
}
*/
footer#footer nav {
	float: none;
}
footer#footer ul {
    width: 100%;
}
footer#footer ul li {
	float: none; text-align:left;
	margin:0;
	padding-bottom: 1em;
}
footer#footer ul li a {
    display: block;
    width: 100%;
	font-size:1em;
}
/************************ recruit ***************************************/

section#message img.mes02, section#message img.mes03 {
    width: 86%;
}
.sp_txt_l {
	text-align: left;
}

div.intro_box {
    width: calc(96% - 12%);
	padding-top:2em;
}
section#introduction dl.left,
section#introduction dl.right {
    width: 100%;
    float: none;
	margin: 0 auto;
}
.intro_box.line_orange dl.right {
	padding-top: 2em;
}
section#introduction div.line_yellow dl.right,
section#introduction div.line_yellow dl.left {
    padding-top: 1em;
    padding-bottom: 1em;
}
section#introduction dl.left dt {
    margin: 0 auto;
}
section#introduction div.line_yellow dl.left dt {
    padding-top: 1em;
}
section#message {
    padding-bottom: 3em;
}
section#message p.center.fs20.pt1.sp_txt_l {
    font-size: 1.2em;
}
dl.message_txt dt {
    font-size: 1.2em;
}
dl.message_txt dt span {
    padding-bottom: 1em;
	display:block;
}
dt.light_blue.fs18.fwb br {
	display:none;
}
div.gallery_box {
    width: 96%;
    margin: auto;
    padding-left: 3.5%;
}
div.gallery_box ul li {
    width: 46%;
    max-width: 335px;
    margin: 1% 4% 1% 0;
}
section#recruitment {
    padding-bottom: 0px;
    padding-top: 0px;
}
section#recruitment .inner.bg_c .middle_inner {
    width: 86%;
}
section#recruitment table.data {
    margin: 0px;
}
section#recruitment table.data th {
    padding: 0.3em 0 0.3em 0em;
    width: 30%;
}
section#recruitment div.middle_inner {
    background-color: #fff;
    margin: 0em auto;
}
@media (min-width: 376px) and (max-width: 499px) {
section#page_contact h4 a.plivacy_logo_link {
    padding-left: 0em;
    position: absolute;
    top: 0;
    right: -2%;
    width: 16%;
    display: block;
}
}
@media (min-width: 500px) and (max-width: 650px) {	
section#page_contact h4 a.plivacy_logo_link {
    padding-left: 0em;
    position: absolute;
    top: 0;
    right: 1%;
    width: 9%;
    display: block;
}
section#page_contact h4 a {
    display: block;
    width: 56%;
}
section#page_contact h4 a img.logo {
    width: 38%;
    display: inline-block;
    margin-left: 2%;
    padding-bottom: 1em;
}
section#page_contact h4 a img.text_logo {
    margin-left: 2%;
    display: inline-block;
}
}
@media (min-width: 651px) and (max-width: 767px) {
section#page_contact h4 a img.logo {
    width: 38%;
    display: inline-block;
    margin-left: 2%;
    padding-bottom: 1em;
}
section#page_contact h4 a img.text_logo {
    margin-left: 2%;
    display: inline-block;
}
section#page_contact h4 a.plivacy_logo_link {
    padding-left: 0em;
    position: absolute;
    top: 0;
    right: 0%;
    width: 10%;
    display: block;
}
}

/*20240601*/
section#conduct .sub_ttl1,
section#conduct .sub_ttl2 {font-size: 1.5em;}
section#conduct .list_box {display: block;}
section#conduct .left_side,section#conduct .right_side {inline-size: 100%;}
section#philosophy .h_ttl {font-size: 1.85em;}
section#conduct .p_1 {font-size: 1.35em;}