@charset "utf-8";
@media screen and (max-width: 750px) {
 body {
  width: 100%;
  min-width: 100%;
 }
 .pc_view {
  display: none !important;
 }
 .sp_view {
  display: block !important;
 }
.sp_none{
	display: none;
}
 .fleft {
  float: none;
 }
 .fright {
  float: none;
 }
 .box {
  display: block;
  width: 100%;
  position: relative;
  box-sizing: border-box;
  float: none;
  margin: 0;
  padding: 0;
 }
 .box img {
  display: block;
  width: 100%;
  height: auto;
 }
 .box.pc6unit {
  width: 100%;
 }
 .box.pad100 {
  padding: 0;
 }
 .box.pad120 {
  padding: 0;
 }
 .box.pad200 {
  padding: 0;
 }
 /*=============================
		common
===============================*/
 .wrap {
  width: 100%;
  margin: 0 auto;
 }
.button,
.button2 {
	float: none;
	clear: both;
	width: 100%;
	margin: 0 auto;
 }
.button a,
.button2 a{
	display: block;
	width: 68.2vw;
	height: 12vw;
	border-radius: 12vw;
	border: 0.3vw solid #565656;
	text-align: center;
	font-size: 4.2vw;
	font-weight: bold;
	letter-spacing: 0.15em;
	color: #565656;
	padding: 3.8vw 0;
    background: url(../images/ic_detail.png) no-repeat right 5.3vw center, transparent;
    background-size: 2.6vw auto;
    transition: all .3s ease;
	line-height: 1;
	margin: 0 auto;
}
.button a:hover,
.button2 a:hover{
    background: url(../images/ic_detail.png) no-repeat right 5.3vw center, #999;
    background-size: 2.6vw auto;
}
.tx_desc {
	clear: both;
	width: 100%;
	padding: 0 5.3vw;
	margin: 0 auto 8vw;
}
.title {
	width: 100%;
	font-size: 9.6vw;
	margin: 0px auto 6.6vw;
	line-height: 1;
}
.title span, .title2 span{
	font-size: 4.2vw;
	line-height: 1;
    margin-top: 2.6vw;
}
 .title2 {
  width: 100%;
  font-size: 9.6vw;
 }
#top_header {
	clear: both;
	overflow: hidden;
	width: 100%;
	height: 100%;
	min-height: 100vw;
	background: url("../images/mainvisual.jpg") no-repeat top -27vw center;
	background-size: auto 170%;
}
#mainvisual {
	width: 100%;
	height: 110vw;
    padding: 50vw 0 0 0;
}
#logo {
    float: none;
	position: absolute;
	left: 0;
	top: 0;
    width: 35vw;
    height: auto;
    padding: 3.2vw 4vw;
    background-color: #FFF;
    text-align: center;
    vertical-align: middle;
    box-sizing: border-box;
    margin-bottom: 0;
	z-index: 2;
}
 #logo img {
  display: block;
  width: 100%;
  height: auto;
 }
 nav#hnavi {
  display: none;
 }
 nav#hnavi ul {
  display: none;
 }
 #mainvisual h2 {
  clear: both;
  width: 89.4vw;
  margin: 0 auto;
 }
 #mainvisual h2 img {
  display: block;
  width: 100%;
  height: auto;
 }
 .inner_ms {
  display: none;
 }
/*=============================
		mainvisual
===============================*/
#main_bar {
	padding: 0;
	margin: 0;
}
 #main_bar section dl {
  width: 100%;
  display: block;
  padding: 5.3vw;
 }
 #main_bar section dl dt {
    display: block;
    width: 100%;
    text-align: left;
    font-weight: bold;
    font-size: 4.2vw;
    border-right: none;
    margin-right: 0;
    line-height: 1;
    padding: 0px 0 2vw;
    border-bottom: 0.3vw solid #689cd0;
    margin-bottom: 2vw;
 }
 #main_bar section dl dt span {
    display: inline-block;
    font-size: 3.7vw;
    font-weight: normal;
    margin-left: 3vw;
    vertical-align: 0.4vw;
 }
#main_bar section dl dd {
	display: block;
	width: 100%;
	font-size: 3.7vw;
	font-weight: bold;
	padding: 0px 0px 0px 0px;
	line-height: 1.3;
}
#main_bar section dl dd span{
	display: inline-block;
	float: none;
    line-height: 1;
    margin-bottom: 2vw;
    margin-right: 0;
}
#main_bar section dl dd span.cat{
    display: inline-block;
    padding: 0.8vw 1vw 0.3vw;
    font-size: 3.2vw;
	margin-left: 2vw;
}
#main_bar section dl dd span.news_title{
	display: block;
	margin-bottom: 0;
	width: 100%;
}
#main_bar {
	margin: 0px 0px 0px 0px;
}
#main_bar section {
	width: 100%;
	margin: 0px auto;
}

/*=============================
		concept
===============================*/
#top_concept {
	padding: 12vw 5.3vw;
	clear: both;
	width: 100%;
	height: auto;
	background: url("../images/bg_mark.jpg") no-repeat right 70% bottom;
	background-size: auto 50%;
 }
#top_concept .box_wrap{
	display: flex;
	flex-direction: column-reverse;
}
#top_concept h2 {
	clear: both;
	font-size: 6.8vw;
	line-height: 1.4em;
	color: #363636;
	font-weight: bold;
	letter-spacing: 0;
	margin: 0 0 8vw;
}
#top_concept p {
	width: 100%;
	line-height: 2.3em;
	margin: 0 auto 5.3vw;
	text-align: justify;
	text-justify: inter-ideograph;
}
.bt_more_top, .bt_more_top:hover {
	width: 40vw;
    height: 40vw;
    padding: 27vw 0 0;
    text-align: center;
    text-indent: -6vw;
    border: 0.3vw solid #919191;
    border-radius: 50%;
    background: url(../images/ic_concept.png) no-repeat center 6vw, url(../images/icmore2.png) no-repeat right 11.5vw top 29.5vw;
    background-size: 23vw auto, 4vw auto;
    margin: 8vw auto 12vw;
    transition: all .3s ease;
 }
#top_concept .box > img:first-child {
    height: 52vw;
    object-fit: cover;
    margin-bottom: 5.3vw;
}
.top_photo {
	clear: both;
	position: relative;
	display: block;
	margin-top: 0px;
	width: 100%;
	height: 40vw;
	min-height: auto;
}
.top_photo .tp_01 {
	position: absolute;
	width: 52.5%;
	max-width: 100%;
	left: 0;
	top: 0;
}
.top_photo .tp_02 {
	position: absolute;
	width: 52.5%;
	max-width: 100%;
	margin-bottom: 0;
	right: 0;
	bottom: 0;
	top: auto;
	left: auto;
}
/*=============================
		service
===============================*/
#top_service {
	padding: 12vw 0px;
    background-position: 0px 10.6vw;
}
.tx_service {
	margin-bottom: 12vw;
    text-align: justify;
    text-justify: inter-ideograph;
}
.flex_wrap {
    display: flex;
	flex-wrap: wrap;
    flex-direction: column;
	padding: 0 5.3vw;
	margin: 0px auto;
	row-gap: 6.6vw;
	width: 100%;
 }
.sec .flex_wrap{
	padding: 0;
}
.flex_2column {
	display: block;
	width: 100%;
	margin: 0;
	row-gap: 5.3vw;
}
 .flex_2column img {
  display: block;
  width: 100%;
  height: auto;
 }
 .flex_2column h3 {
	display: block;
	width: 100%;
	font-size: 8.2vw;
	letter-spacing: 0.4vw;
	margin: 0 0 5.3vw;
	position: static;
 }
 .flex_2column h3::after {
  display: none;
 }
 .flex_2column h3 span {
  display: block;
  font-size: 3.7vw;
  line-height: 1;
  letter-spacing: 0.1vw;
  margin: 2.6vw 0 0;
 }

/*=============================
		works
===============================*/
#top_works{
	clear: both;
	overflow: hidden;
	width: 100%;
	padding: 10.6vw 0 16vw;
}
#works_slider {
	width: 100%;
	margin-bottom: 0;
}
#works_wrapper_cont {
	height: 100%;
}
/*=============================
		recruit
===============================*/
.title2 {
	width: 100%;
	font-size: 9.6vw;
	line-height: 1;
	letter-spacing: 0.1em;
	padding: 0;
	font-family: 'Noto Sans JP', sans-serif;
	background: url("../images/bar_recruit.jpg") no-repeat left 6.6vw center;
	background-size: 2vw auto;
	margin: 0px 0px 0;
	padding: 0 5.3vw 0 15.9vw;
}
#recruit {
    clear: both;
    overflow: hidden;
    width: 100%;
    padding: 5.3vw 0px 0px 0px;
    background: url(../images/rec_bg_border01.png) no-repeat left 75vw top;
    background-size: auto 20vw;
}
#recruit h3 {
	font-size: 6.2vw;
	line-height: 1.4em;
	letter-spacing: 0.5vw;
	margin: 5.3vw 0;
	padding: 0 8vw;
}
.rec_photo {
	display: none;
}
.rec_photo img {
	width: 100%;
	height: auto;
}
#recruit .box_wrap {
	margin-bottom: 16vw;
}
	
/*=============================
		contact
===============================*/
#contact {
    clear: both;
    overflow: hidden;
    width: 100%;
    height: auto;
    padding: 11.3vw 10.6vw 11.3vw;
    margin: 0px auto 0px;
    background-image: url(../images/bg_contact_in.png), url(../images/bg_contact.jpg);
    background-repeat: no-repeat, no-repeat;
    background-position: top 5.3vw left 5.3vw, center center;
    background-size: 92vw 95.5%, cover;
}
.button_contact{
	width: 95%;
	margin: 8vw auto 0;
}
#contact p {
	font-size: 3.2vw;
	line-height: 1;
}
#contact p.txt_con {
	font-size: 4.2vw;
	line-height: 1.4;
	margin-bottom: 6.6vw;
    text-align: justify;
    text-justify: inter-ideograph;
}
#contact p#con_tel {
	font-size: 10vw;
	font-weight: bold;
	line-height: 1.5em;
	padding: 0px 0px 0px 0px;
	font-family: 'Oswald', sans-serif;
	line-height: 1;
	margin-bottom: 1.3vw;
}
#contact p#con_tel::before {
	content: '☎';
	font-family: '游ゴシック', YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo,　sans-serif;
	margin: 0px 1.3vw 0px 0px;
}
.button_contact a{
    width: 100%;
    height: 12vw;
    border-radius: 12vw;
    border: 0.3vw solid #565656;
    text-align: center;
    font-size: 4.2vw;
    font-weight: bold;
    letter-spacing: 0.15em;
    padding: 4vw 4vw 3.6vw 14vw;
    background: url(../images/ic_mail.png) no-repeat left 10vw center;
    background-size: 5.8vw auto;
    line-height: 1;
}
.button_contact a:hover {
    color: #565656;
    padding: 4vw 4vw 3.6vw 14vw;
    border: 0.3vw solid #fff;
    background: url(../images/ic_mail.png) no-repeat left 10vw center, #fff;
	background-size: 5.8vw auto;
}
	
/*=============================
		footer
===============================*/
footer {
	padding: 10.6vw 5.3vw 5.3vw;
}
.flex_wrap_footer {
	width: 100%;
	margin: 0px auto 8vw;
	display: block;
	justify-content: space-between;
}
.ff_left {
	clear: both;
	overflow: hidden;
	width: 100%;
	text-align: center;
	margin-bottom: 10.6vw;
}
.ff_left p{
	font-size: 3.7vw;
	line-height: 1.5em;
	padding-left: 0;
	letter-spacing: 0;
}
#flogo {
	width: 78.7vw;
	margin: 0 auto 2.6vw;
}
#flogo img {
	display: block;
	width: 100%;
	height: auto;
}
#f_tel {
	font-size: 10vw;
	font-weight: bold;
	line-height: 1;
	padding: 0px 0px 0px 0px;
	margin-top: 5.3vw;
}
#f_tel::before{
	margin: 0 2.6vw 0 0;
}
 .ff_right {
  width: 100%;
 }
.ff_right_flex {
	display: flex;
	column-gap: 5.3vw;
}
.ff_right dl {
	width: 50%;
}
.ff_right dl dt{
	margin-bottom: 0;
	border-bottom: 0.3vw solid #689cd0;
}
.ff_right dl dt a {
	font-size: 3.7vw;
	background: none;
	padding: 4vw 2.6vw;
	margin-bottom: 0;
	line-height: 1;
}
.ff_right dl dt a:hover {
	color: #FFFF00;
	background: none;
}
.ff_right dl dd {
	padding: 0 2.6vw;
    margin: 2.6vw 0 1.3vw;
}
.ff_right dl dd.mb20{
	margin-bottom: 4vw;
}
.ff_right dl dd a {
	font-size: 3.7vw;
	padding: 0;
	margin-bottom: 0;
}
.ff_right dl dd ul li a{
	padding: 0px 0px 0px 4.8vw;
}
#copyright {
	width: 100%;
	display: flex;
	flex-direction: column-reverse;
	row-gap: 0;
	border-top: none;
	padding: 0;
}
#copyright p {
	clear: both;
	display: block;
	width: 100%;
	color: #FFF;
	text-align: center;
	margin-bottom: 0;
	font-size: 3.2vw;
	margin-top: 6.6vw;
}
#copyright ul {
	clear: both;
	display: flex;
	column-gap: 4vw;
	width: 100%;
	text-align: center;
	justify-content: center;
}
#copyright ul li {
	display: inline-block;
	text-align: left;
	margin: 0;
	line-height: 1;
}
#copyright ul li a,
#copyright ul li a:hover{
    font-size: 3.2vw;
    background: url(../images/ic_fmenu_sub.png) no-repeat left center;
    background-size: 1.3vw auto;
    padding: 0px 0px 0px 2.6vw;
}
html.fixed, body.fixed{
	position: fixed;
}
.sp_header_navi{
	display: flex;
	flex-direction: column;
	align-items: center;
	flex-wrap: wrap;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}
header #btn_nav_wrapper {
    display: none;
}
header nav{
	display: block;
	opacity: 0;
	z-index: -1;
	position: fixed;
	top: 0;
	left: -100%;
	background: #fff;
	background-size: 70vw auto, 24vw auto, auto;
	width: 100%;
	height: 100%;
	color: #fff;
	box-sizing: border-box;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overflow-scrolling: touch;
	transition: left 0s linear 0s, opacity 0.2s linear 0s;
	padding: 12vw 0;
}
header nav.active{
	left: 0;
	opacity: 1;
	z-index: 1000;
	transition: left 0s linear 0s, opacity 0.2s linear 0s;
}
/*btn_nav_wrapper*/
header #btn_nav_wrapper{
	position: absolute;
	right: 0;
	top: 0;
	display: block;
	width: 16vw;
	height: 16vw;
    background: rgba(0, 93, 171, 0.98);
	z-index: 9998;
	cursor: pointer;
}
/*btn_nav_wrapper*/
header #btn_nav_wrapper{
	width: 16vw;
	height: 16vw;
}
header #btn_nav_wrapper.active{
	background: transparent;
	background: transparent; 
	position: fixed;
}
header #btn_nav_wrapper .btn_nav{
	position: relative;
	background: #fff;
	width: 8vw;
	height: 0.3vw;
    top: 50%;
    left: 50%;
	margin-top: -0.2vw;
	margin-left: -4vw;
	transition: width 0.6s cubic-bezier(0.165, 0.84, 0.44, 1), margin-left 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
header #btn_nav_wrapper .btn_nav.active {
    background: rgba(0,0,0,0);
	transition: background 0 linear;
}

header #btn_nav_wrapper:hover .btn_nav{
   width: 8vw;
}
header #btn_nav_wrapper .btn_nav::after,
header #btn_nav_wrapper .btn_nav::before{
	content: "";
	position: absolute;
	height: 0.3vw;
	width: 8vw;
	background: #fff;
	transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
header #btn_nav_wrapper .btn_nav::before {
	right: 0;
	bottom: 2vw;
}
header #btn_nav_wrapper .btn_nav::after{
	right: 0;
	top: 2vw;
}
header #btn_nav_wrapper .btn_nav.active:after{
	top: 0;
	background: rgba(0, 93, 171, 0.98);
	transform: rotate(28deg);
	transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
header #btn_nav_wrapper .btn_nav.active:before{
	bottom: 0;
	background: rgba(0, 93, 171, 0.98);
	transform: rotate(-28deg);
	transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

header .sp_header_navi ul{
	width: 100%;
}
header .sp_header_navi ul li{
    width: 100%;
    text-align: center;
    border-top: 0.3vw solid #eaeaea;
    border-bottom: 0.3vw solid #eaeaea;
}
header .sp_header_navi ul li.logo{
	margin-bottom: 5.3vw;
}
header .sp_header_navi ul li.logo img{
	width: 28vw;
	height: auto;
}
header .sp_header_navi ul li:first-child{
	border-top: 0;
	border-bottom: 0;
}
header .sp_header_navi ul li{
	border-bottom: 0.3vw solid #eaeaea;
}
header .sp_header_navi ul li a{
    padding: 4vw 0;
	width: 100%;
	display: block;
	line-height: 1;
	color: #353535;
	font-weight: bold;
}
header .nav_wrap{
	width: 100%;
}
header .tel_box{
	color: #353535;
	text-align: center;
	margin-top: 5.3vw;
}
header .tel_box .tel {
    font-size: 8vw;
    font-weight: bold;
    line-height: 1.5em;
    padding: 0px 0px 0px 0px;
    font-family: 'Oswald', sans-serif;
    line-height: 1;
    margin-bottom: 1.3vw;
}
header .tel_box .tel::before {
    content: '☎';
    font-family: '游ゴシック', YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo,　sans-serif;
    margin: 0px 1.3vw 0px 0px;
}
header .tel_box .time{
    font-size: 3.2vw;
    line-height: 1;
}
	#clogo{
		z-index: 99;
	}
}