@media only screen and (max-width:768px){

body { font-size:100%;}
#header {}
#content{ width:100%;}
#footer { width:100%;}
#page, #page a { width:70px; height:70px; }
#page a::after { background-size:13px 21px; }

#wrapper {}
#base { width:auto; margin:0 !important;}

.pc { display:none;}
.sm { display:block;}


/*====================================================================================================
  HEADER
====================================================================================================*/

#header { padding-block:15px; }
/* LOGO */
#header h1 { margin-left:20px; }
/* DRAWER BUTTON */
#header .menu_toggle {
	position: fixed;
	top: 10px;
	right: 10px;
	width: 89px;
	height: 89px;
	z-index: 999;
	cursor: pointer;
	border-radius: 50%;
	transition: all 0.3s;
	text-indent: -9999px;
	background: #3689BB url(../image/menu_open.svg) no-repeat 32px center;
}
#header .drawer_btn {
	z-index: 998;
	background: #005787 url(../image/menu_close.svg) no-repeat center 33px;
}
#header .opened { z-index:1005; }

/* PC NAV */
#Nav { display:none; }

/* DRAWER NAV */
#header .drawer {
	width: 100%;
	height: 100vh;
	z-index: 1000;
	top: 0;
	position: fixed;
	overflow-y: auto;
	background: #3689BB;
	transition: 0.3s all;
	transform: translateX(100%);
}
#header .drawer .home { width: 86px; height: 72px; display: block; }
#header .drawer .home a {
	width: 86px;
	height: 72px;
	display: block;
	text-indent: -9999px;
	border-radius: 0 0 21px 0;
	background: #005787 url(../image/icon_home.svg) no-repeat center;
}
#header .drawer ul.drawer-list { padding-bottom:15px; }
#header .drawer ul.drawer-list li { width:80%; margin-block:22px; }
#header .drawer ul.drawer-list li a { position:relative; display:block; text-decoration:none; color:#FFF; }
#header .drawer ul.drawer-list li a::before,
#header .drawer ul.drawer-list li a::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	transition: 0.2s ease;
}
#header .drawer ul.drawer-list li a::before { background: #FFF; }
#header .drawer ul.drawer-list li a::after {
	background: url(../image/arrow_right1.svg) no-repeat center 45%;
}
#header .drawer ul.drawer-list li a:hover::before { transform: scale(1.2); }
#header .drawer ul.drawer-list li a:hover::after { background-position:60% 45%; }

#header .drawer ul.drawer-list li b {}
#header .drawer ul.drawer-list li small img { width:100%; border-radius:0 80px 80px 0; }
#header .drawer ul.drawer-list li span {
	bottom: 0;
	width: 44.3%;
	height: 44px;
	display: flex;
	font-size:106.3%;
	font-weight: 600;
	position: absolute;
	background: #3689BB;
	align-items: flex-end;
	justify-content: center;
	border-radius: 0 28px 0 0;
}

#header .drawer ul.drawer-list li:nth-child(2) { margin-left:auto; text-align:right; }
#header .drawer ul.drawer-list li:nth-child(2) small img { border-radius:100px 0 0 100px; }
#header .drawer ul.drawer-list li:nth-child(2) span { right: 0; border-radius:28px 0 0 0; }
#header .drawer ul.drawer-list li:nth-child(2) a::before,
#header .drawer ul.drawer-list li:nth-child(2) a::after { left:0; }

#header .drawer dl { padding-block:35px 44px; border-block:1px solid #AFD0E4; }
#header .drawer dl dt { text-align:center; margin-bottom:13px; }
#header .drawer dl dd { width:72.8%; max-width: 273px; margin:auto; }
#header .drawer dl dd+dd { margin-top:13px; }
#header .drawer dl dd a {
	z-index: 1;
	color: #FFF;
	height: 53px;
	display: flex;
	font-size: 106.3%;
	font-weight: 600;
	line-height: 120%;
	border-radius: 27px;
	background: #4BBDC1;
	align-items: center;
	text-decoration: none;
}
#header .drawer dl dd.form a {
	padding:0 5% 0 24.5%;
	background: #4BBDC1 url(../image/icon_mail.svg) no-repeat 10%;
}
#header .drawer dl dd.phone a {
	padding: 0 5% 0 33%;
	background: #4BBDC1 url(../image/icon_tel2.svg) no-repeat 10%;
}
#header .drawer dl dd a:hover { opacity:0.9; }

#header .drawer ul.sns {
	width: 89.3%;
	row-gap: 15px;
	flex-wrap: wrap;
	margin:25px auto;
}
#header .drawer ul.sns li.b_more { margin-left:0; flex-shrink:0; }
#header .drawer ul.sns li.b_more a { font-size:100%; padding-right:52px; }
#header .drawer ul.sns li.sns_insta { margin:0 5% 0 10%; }

#header .drawer .copy {
	color: #FFF;
	font-size: 81.3%;
	font-weight: 600;
	text-align: center;
	letter-spacing: 0.2em;
	padding-block: 12px 13px;
	border-top: 1px solid #AFD0E4;
	font-family: "fot-udkakugo-large-pr6n", sans-serif;
}

#header .drawer.active { transform:translateX(0); }



/*====================================================================================================
  CONTENT
====================================================================================================*/

#content {}

.container { width:90%; }

.b_more { margin-left:5%; }
.b_more a { font-size:106.3%; padding-right:55px; }
.b_more a::before, .b_more a::after { width:45px; height:45px; }
.b_more a::after { background-size:18px 11px; }

/*====================================================================================================
  CONTACT
====================================================================================================*/
#contact_box { width: 100%; display:block; padding-bottom:83px; }
#contact_box .form { width:90%; margin:auto; padding:30px 4.5% 35px; }
#contact_box .form h4 b { font-size:162.5%; }
#contact_box .form h4 small { font-size:62.5%; line-height:100%; }
#contact_box .form .come { font-size:93.8%; text-align:left; margin-block:25px 15px; }
#contact_box .form .form_btn a { padding: 15px; font-size:112.5%; line-height:130%; }
#contact_box .phone { width:90%; margin:25px auto 0; padding:30px 4.5% 35px; }
#contact_box .phone dl { width:100%; }
#contact_box .phone dl dt { font-size:100%; line-height:150%; }
#contact_box .phone dl dd b a { font-size:193.8%; }
#contact_box .phone dl dd small { font-size:87.5%; }



/*====================================================================================================
  FOOTER
====================================================================================================*/
#footer {}
#footer .container { width: 100%; display:block; padding:45px 9% 0; }
#footer .f_info .address { font-size:93.8%; margin-block:25px; }
#footer .f_info ul.sns { margin-bottom:35px; flex-wrap:wrap; row-gap:10px; }
#footer .f_info ul.sns li.b_more { margin-left:0; }
#footer .f_info ul.sns li.b_more a { font-size:93.8%; padding-right:52px; }
#footer .f_info ul.sns li.sns_twitter { margin:0 18px 0 30px; }
#footer ul.f_nav {
	columns: 2;
	-moz-columns: 2;
	-webkit-columns: 2;
}
#footer ul.f_nav li:nth-child(even) { margin-top:0; }
#footer ul.f_nav li a { font-size:93.8%; padding-block:3px; }
#footer .copy { font-size:75%; padding-block:23px 20px; margin-top:38px; }

/*====================================================================================================
  TOP PAGE
====================================================================================================*/

#toppage .photo-outlined { width:165px; height:165px; }
#toppage .photo-outlined::before { width: 305px; height: 305px; border-width:40px; }

#toppage .box { display:block; position:relative; }
#toppage .box .title_box { position:absolute; top:30px; left: 0; right: 0; width:90%; margin:auto; }
#toppage .box .txt .come { font-size:93.8%; }


/* MAINIMG */
#toppage .mainimg { height: auto; margin-block:150px 0; padding-top:232px; }
#toppage .mainimg ul.top_slider { width:91%; border-radius:0 40px 40px 0; }
#toppage .mainimg ul.top_slider li img { height:270px; border-radius:0 40px 40px 0; }
#toppage .mainimg .main_tit { width:77.1%; margin:auto; left:0; right:0; top:42%; transform:translateY(-58%); }
#toppage .mainimg .main_tit h2 img { width:100%; }
#toppage .mainimg .main_tit p { font-size:62.5%; margin-top:0; }
#toppage .mainimg .scroll { left:0; bottom:19px; font-size:87.5%; }
#toppage .mainimg .scroll::after { height:155px; }
#toppage .mainimg .news {
	left: 0;
	right: 0;
	bottom:-6px;
	margin: auto;
	height: auto;
	max-width:82%;
	flex-wrap:wrap;
	position: relative;
	padding: 14px 13px;
}
#toppage .mainimg .news h4 { order:unset; margin:0; }
#toppage .mainimg .news ul { order:unset; display:block; flex-basis:100%; margin-top:10px; }
#toppage .mainimg .news ul li { font-size:87.5%; }
#toppage .mainimg .news ul li.date { line-height:140%; }
#toppage .mainimg .news .b_list { order:unset; }
#toppage .mainimg .news .b_list a { font-size:87.5%; padding-right: 25px; background-size:16px 10px; }


/* OVERVIEW */
#toppage .overview { max-width:100%; padding:52px 0 48px; }
#toppage .overview .come { font-size:93.8%; max-width:53.3%; margin-left:13.3%; }
#toppage .overview .come+.come { margin-left:37.3%; }
#toppage .overview .photo-outlined.p1 { right:-46px; top:-10px; }
#toppage .overview .photo-outlined.p2 { left:-15px; bottom:57px; }

/* ABOUT */
#toppage .about { padding-block:196px 43px; }
#toppage .about .photo { position: relative; right: -35px; top: 0; height:270px; }
#toppage .about .photo::after { left: -23px; bottom: -45px; width:130px; height: 130px; border-width:8px; }
#toppage .about .photo img { border-radius:40px 0 0 40px; }
#toppage .about .txt h3 { width: 100%; margin:25px auto 0; }
#toppage .about .txt p { width:100%; top:0; }
#toppage .about .txt .come { max-width:90%; margin:65px auto 48px; }

/* MESSAGE */
#toppage .message { padding-block:210px 85px; }
#toppage .message .photo { left:-35px; height:270px; margin-top:0; }
#toppage .message .photo::after { right: -23px; bottom: -45px; width:130px; height:130px; border-width:8px; }
#toppage .message .photo img { object-position: initial; border-radius:0 40px 40px 0; }
#toppage .message .txt { margin-right:0; }
#toppage .message .txt h3 { width: 100%; margin:30px auto 0; }
#toppage .message .txt p { width:100%; top:0; }
#toppage .message .txt .come { max-width:90%; margin:70px auto 45px; }

/* CASE STUDY */
#toppage .case { width:100%; padding-block:50px 65px; }
#toppage .case .txt { margin-left:5%; position:initial; }
#toppage .case .txt img { width:100%; }
#toppage .case .txt h3 { position: relative; max-width: 326px; margin-top:30px; }
#toppage .case .txt p { top:53px; width: auto; }
#toppage .case .txt .come { max-width:90%; margin-block:20px 40px; }
#toppage .case .txt .b_more { margin-left:0; }
#toppage .case .txt .photo-outlined { width:157px; height:157px; left: auto; right:10px; top:250px; bottom:auto; }
#toppage .case ul {
	right:0;
	width:100%;
	display: block;
	margin-top: 65px;
	position:relative;
}
#toppage .case ul::before {
	left: auto;
	right: 0;
	width: 95%;
	height: 92.7%;
}
#toppage .case ul li { width:79.2%; margin:0 5% 0 auto; }
#toppage .case ul li+li { margin-top:30px; }
#toppage .case ul li img { height:186px; }

/* RECRUIT */
#toppage .recruit { padding-block: 110px 0; }
#toppage .recruit .photo { height:384px; width:95%; margin:0; }
#toppage .recruit .photo img.person { width:221px; right:auto; left:10px; bottom:0; }
#toppage .recruit .photo img.balloon { width:108px; bottom:60px; right:auto; left:194px; }
#toppage .recruit .txt {
	max-width:100%;
	margin: 0;
	padding:123px 5% 200px;
	background: url(../../image/top/recruit_txt-bg-sm.png) no-repeat center;
}
#toppage .recruit .txt h3 { position: initial; right:auto; }
#toppage .recruit .txt p { bottom:calc(100% - 110px); width:87.5%; }
#toppage .recruit .txt .come { max-width:100%; margin-block:30px 50px; margin-right:0; }

/* WORK LIFE BALANCE CERTIFIED */
#toppage .certified { display:block; padding:40px 4.5% 65px; margin-block:52px 22px; }
#toppage .certified .photo { margin:auto; }
#toppage .certified .txt .mid { margin-top:25px; font-size:131.3%; line-height: 180%; }
#toppage .certified .txt .mid span { background-size:100% 11px; background-position:center 20px; }
#toppage .certified .txt .come { font-size:93.8%;  }


/*====================================================================================================
  SUB PAGE
====================================================================================================*/
#subpage {}

.page_cont { border-radius:20px; padding:30px 5%; margin-block:50px 80px; }

/* PAGE TITLE */
#page_title { height:290px; margin-top:50px; }
#page_title::after { max-width:100%; width:95%; height: 230px; border-radius:40px 0 0 40px; }
#page_title h2 { width:90%; font-size:162.5%; padding-left:33px; margin-block:200px 60px; }
#page_title h2::before { width:26px; height:26px; border-width:8px; }
#page_title h2::after { bottom: -58px; }
/* ABOUT TITLE */
#page_title.about_tit h2::after {
	width: 329px;
	height: 39px;
/*	background: url(../../image/sub/about_sub_tit1-sm.svg) no-repeat;*/
/*	background-size: contain;*/
}
/* CASE TITLE */
#page_title.case_tit h2::after {
	width: 335px;
	height: 31px;
/*	background: url(../../image/sub/case_sub_tit1-sm.svg) no-repeat;*/
/*	background-size: contain;*/
}
/* NEWS TITLE */
#page_title.news_tit h2::after {
	width: 177px;
	height: 38px;
/*	background: url(../../image/sub/news_sub_tit1-sm.svg) no-repeat;*/
/*	background-size: contain;*/
}
/* CONTACT TITLE */
#page_title.contact_tit h2::after {
	width: 295px;
	height: 35px;
/*	background: url(../../image/sub/contact_sub_tit1-sm.svg) no-repeat;*/
/*	background-size: contain;*/
}

/* PAGINATION */
.page_box { width:90%; padding-block:25px 50px; }


/* PAGE NAVI */
.wp-pagenavi {}
.nav-links .navi, .wp-pagenavi a, .wp-pagenavi span {
	width: 35px;
	height: 35px;
	margin:0 4px;
	font-size: 93.8%;
}
.nav-links .navi.prev,
.nav-links .navi.next,
.wp-pagenavi a.previouspostslink,
.wp-pagenavi a.nextpostslink { width:51px; height:51px; background-size:20px 12px; }
.page_box .list { height:35px; width:100px; font-size:87.5%; }

/* ARTICLE */
.kiji_box { border-radius:20px; padding:20px 15px; }
/* ARTICLE TITLE */
.title_box { margin-bottom:30px; }
.title_box .title { font-size:150%; }
/* ARTICLE CONTENT */
.content_box h3 { font-size:187.5%; line-height:120%; }
.content_box h3.is-style-h3-line { font-size:137.5%; line-height:120%; }
.content_box h4 { font-size:150%; line-height:130%; }

/*====================================================================================================
  会社案内
====================================================================================================*/
#about {}
#about .sb_main { padding-block:56px 73px; }
#about .sb_main .title_box { max-width:81.3%; margin-bottom:35px; }
#about .sb_main .title_box p img { max-width:100%; }
#about .sb_main .title_box p+p { font-size:2.7vw; margin-top:3%; }
#about .sb_main .business { padding:0 15px 35px; border-radius:20px; }
#about .sb_main dl { display:block; }
#about .sb_main dl dt {
	width:169px;
	margin:auto;
	font-size:162.5%;
	text-align: left;
	text-indent: 22px;
	padding:15px 0 30px;
}
#about .sb_main dl dt::before {
	width: 169px;
	height: 83px;
	background: url(../../image/sub/about_ribbon-sm.png) no-repeat;
	background-size: contain;
}
#about .sb_main dl dd { color:#606B71; font-size:93.8%; margin-top:35px; }
#about .sb_main .cont_list { display:block; margin-top:45px; }
#about .sb_main ul { width:100%; margin:auto; }
#about .sb_main ul+ul { margin-top:32px; }
#about .sb_main ul li.photo { max-width:250px; margin:auto; }
#about .sb_main ul li.title { height:auto; margin-block:30px 20px; }
#about .sb_main ul li b { font-size:237.5%; }
#about .sb_main ul li small { font-size:131.3%; }
#about .sb_main ul li.come { font-size:93.8%; color:#606B71; }

#about .nature {
	overflow:hidden;
	padding-block:92px 73px;
	background: url(../../image/sub/about_bg2-sm.jpg) no-repeat top;
	background-size: cover;
}
#about .nature .mid img { max-width:282px; }
#about .nature .mid::before { width:57px; height:91px; left:-29px; bottom:59px; }
#about .nature .mid::after { width: 53px; height: 79px; right:-24px; bottom:60px; }
#about .nature .catch { font-size:93.8%; padding:0 5%; margin-block:48px 45px; }
#about .nature .come { font-size:93.8%; padding:0 5%; }

#about .projects { flex-wrap:wrap; row-gap: 5px; column-gap:1.4%; margin-block:1.4%; }
#about .projects li { width:49.3%; }

#about .message { display:block; padding-block:85px 62px; }
#about .message .txt_box { max-width:90%; padding:0; margin:auto; }
#about .message .txt_box .come { margin-block:57px 30px; }
#about .message .txt_box .etymology { padding:30px 15px; }
#about .message .txt_box .etymology .et1 { font-size:106.3%; }
#about .message .txt_box .etymology .et2 { font-size:175%; margin-top:10px; }
#about .message .txt_box .etymology .et3 { font-size:93.8%; line-height:160%; margin-block:10px; }
#about .message .txt_box .etymology .et4 { font-size:81.3%; line-height:160%; }
#about .message .photo_box { max-width:95%; margin-top:40px; }
#about .message .photo_box .photo img { height:324px; border-radius:0 40px 40px 0; }
#about .message .photo_box .photo::after { width:123px; height:123px; border-width:8px; right:-5%; bottom:-17px; }
#about .message .photo_box .sub_title { max-width:332px; margin-left:5px; }
#about .message .author_box { max-width:90%; margin:15px auto 0; padding:0; }
#about .message .author_box small { font-size:93.8%; }
#about .message .author_box span { font-size:187.5%; }

#about .info { margin-block:73px 88px; }
#about .info h3 { height: 69px; font-size: 156.3%; border-radius:20px 20px 0 0; }
#about .info h3::before { width:185px; height:185px; top:-23px; }
#about .info .info_list { padding-bottom:50px; border-radius:0 0 20px 20px; }
#about .info table tr:nth-child(even) { background:none; }
#about .info table tr th {
	width: 100%;
	display: block;
	font-size: 93.8%;
	background: #E9F2F8;
	padding: 20px 15px 15px;
}
#about .info table tr td { display:block; width:100%; font-size:93.8%; line-height: 170%; padding: 20px 15px 15px; }

#about .access { margin-bottom:45px; }
#about .access .access_info { display:block; height:auto; width:100%; }
#about .access .access_info .photo { position:relative; right:auto; margin-bottom:130px; }
#about .access .access_info .photo::after { width:145px; height:145px; border-width:8px; left:5%; bottom:-85px; }
#about .access .access_info .txt_box { width:90%; margin:0 auto 100px; }
#about .access .access_info .txt_box h4 { font-size:162.5%; margin:0; z-index:2; }
#about .access .access_info .txt_box .sub_title { bottom:auto; top:-45px; }
#about .access .access_info .txt_box .come { max-width:100%; font-size:93.8%; margin-block:30px 35px; }
#about .access .access_info .txt_box .b_more { margin-left:0; }
#about .access .map iframe { height:470px; }



/*====================================================================================================
  施工実績
====================================================================================================*/
#case { padding-top:45px; }
#case .case_title { display:block; padding-top:0; }
#case .case_title h3 { font-size:162.5%; margin-left:0; }
#case .case_title dl { display:block; margin-top:40px; }
#case .case_title dl dd ul { flex-wrap:wrap; row-gap:7px; }
#case .case_title dl dd ul li { width:75px; }
#case .case_title dl dd ul li a { height: 33px; font-size:87.5%; }

#case .case_list { padding-block:30px; display:block; }
#case .case_list .box { width:100%; border-radius:20px; }
#case .case_list .box+.box { margin-top:34px; }
#case .case_list .box a { padding-bottom:30px; }
#case .case_list .box a > div { margin:0 15px; }
#case .case_list .box .photo { border-radius:20px 20px 0 0; }
#case .case_list .box .title a { font-size:112.5%; }
#case .case_list .box .come { font-size:93.8%; font-weight:400; }
#case .case_list .box .order { font-size:93.8%; }
#case .case_list .box .other p:nth-child(1) { font-size:87.5%; width:94px; height:32px; }

/*====================================================================================================
  PAGE TITLE
====================================================================================================*/

#news { padding-top:45px; }
#news .news_list { border-radius:20px; padding:20px 15px; }
#news .news_list ul { display: block; height: auto; padding:15px; transition:background 0.5s; }
#news .news_list ul:hover { background:#F5FBFD; }
#news .news_list ul::before,
#news .news_list ul::after {
	content: "";
	position: absolute;
	right: 10px;
	left: auto;
	top: 50%;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	transition: 0.2s ease;
	transform: translateY(-50%);
}
#news .news_list ul::before { background: #FFF; }
#news .news_list ul::after { background: url(../image/arrow_right1.svg) no-repeat center 45%; background-size:17px 10px; }
#news .news_list ul:hover::before { width:40px; }

#news .news_list ul li.date { line-height:150%; width:100%; }
#news .news_list ul li.title { width:100%; }
#news .news_list ul li.title a { font-size:112.5%; position:initial; }
#news .news_list ul li.title a::before, #news .news_list ul li.title a::after { display:none; }


/*====================================================================================================
  ERROR
====================================================================================================*/
#error { border-radius:20px; padding:30px; margin-block:100px 50px; }
#error ul { padding:0 30px; }

/*====================================================================================================
  お問い合わせ
====================================================================================================*/
#contact {}
#contact h3 { font-size:162.5%; margin-bottom:20px; }
#contact .box {}
#contact .box table { width: 100%; }
#contact .box table th { 
	display: block; 
	width: 100%;
	text-align: left;
	padding-bottom: 0;
}
#contact .box table th.denwa { padding-right:0; }
#contact .box table td {
	display: block;
	width: 100%;
	padding: 10px 0 10px;
}
#contact .b_inqu { margin-top: 30px; }



}