@charset "utf-8";

header#header2{
	height:30vh;
	width: 100%;
	position:relative;
	padding: 0;
	box-sizing: border-box;
	margin: 50px 0 0 0;
	background-image:url(https://arcty.net/images/banner/header2.jpg);
	background-size:cover;
	background-position: center;
}
@media only screen and (max-width:644px){
	header#header2{
		margin: 44px 0 0 0;
		background-image:url(https://arcty.net/images/banner/header2-sp.jpg);
	}
}
.y_marchby_list{
	width:100%;
	text-align:center;
}
.y_marchby_list_ul{
	display: inline-flex;
	width: 42%;
	margin:3%;
	padding:2%;
	box-sizing:border-box;
	border:1px solid #ccc;
	border-radius:3px;
	box-shadow:0px 2px 5px rgba(0,0,0,0.2);
}
.y_marchby_list_li{
	position: relative;
	display: inline-flex;
	box-sizing:border-box;
}
.y_marchby_list_li_inner{
	display:flex;
	flex-direction: column;
}
.y_marchby_list_li span{
	display:flex;
}
.y_marchby_list_li span img{
	max-height: 300px;
    margin: 0 auto;
}
.y_marchby_list_link{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
}
.y_marchby_filter{
	margin: 0 auto 15px auto;
    width: 90%;
}
.y_marchby_select{
	border: 2px solid #413f40;
    margin: 15px 0 5px 15px;
    padding: 5px;
}
@media only screen and (max-width:959px){
	.y_marchby_list_li span img{
		width: 100%;
		max-height: unset;
	}
}

.appear{
    animation-duration: 0.7s;
    animation-name: fade-in;
    animation-fill-mode: forwards;
}
.hidden{
    display: none !important;
    visibility: hidden !important;
}


/* =Reset default browser CSS.
Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {border: 0;font-family: "メイリオ", Meiryo, Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;font-size: 102%; font-style: inherit;font-weight: inherit;margin: 0;outline: 0;padding: 0;vertical-align: baseline;}
:focus {outline: 0;}
@media only screen and (max-width:959px){
	html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {font-size:100%;}
}

ol, ul {list-style: none;}
table {border-collapse: separate;border-spacing: 0;}
caption, th, td {font-weight: normal;text-align: left;}
blockquote:before, blockquote:after,q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}
a img {border: 0;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}

body{
font-family: "メイリオ", Meiryo, Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-size:90%;
color:#1A1919;
-webkit-text-size-adjust: none;
width: 100%;
}


/* リンク設定
------------------------------------------------------------*/
a{
margin:0;
padding:0;
text-decoration:none;
outline:0;
vertical-align:baseline;
background:transparent;
font-size:100%;
color:#777;
}

a:hover, a:active{
-webkit-transition:opacity 1s;-moz-transition:opacity 1s;-o-transition:opacity 1s;
outline: none;
color:#999;
}


/**** Clearfix ****/
nav .panel:after, nav#mainNav:after, .bg:after{content:""; display: table;clear: both;}
nav .panel,nav#mainNav,.bg{zoom: 1;}



/* レイアウト
------------------------------------------------------------*/
#wrapper, .inner{
margin:0 auto;
width:960px;
}

#header,
#header3{
height:100vh;
width: 100%;
position:relative;
padding: 0;
box-sizing: border-box;
margin: 0;
background-image:url(images/banner/header.jpg);
background-size:cover;
background-position: center;
}
@media only screen and (max-width:644px){
#header{
background-image:url(images/banner/header-sp.jpg);
}
}

#header2{
height:30vh;
width: 100%;
position:relative;
padding: 0;
box-sizing: border-box;
margin: 50px 0 0 0;
background-image:url(images/banner/header2.jpg);
background-size:cover;
background-position: center;
}
@media only screen and (max-width:644px){
#header2{
margin: 44px 0 0 0;
background-image:url(images/banner/header2-sp.jpg);
}
}

#header3{
background-image:url(images/banner/header_notfound.jpg);
}
@media only screen and (max-width:644px){
#header3{
background-image:url(images/banner/header_notfound-sp.jpg);
}
}

#header4{
height:30vh;
width: 100%;
position:relative;
padding: 0;
box-sizing: border-box;
margin: 50px 0 0 0;
background-image:url(images/banner/header_areaa.jpg);
background-size:cover;
background-position: center;
}
@media only screen and (max-width:644px){
#header4{
margin: 44px 0 0 0;
background-image:url(images/banner/header_areaa-sp.jpg);
}
}

#content0,
#content1,
#content2,
#content3,
#content4,
#content5,
#content6,
#content7{
width:90%;
padding:4% 5%;
font-size: 100%;
}
@media only screen and (max-width:959px){
	#content0,
	#content1,
	#content2,
	#content3,
	#content4,
	#content5,
	#content6,
	#content7{
		display:-webkit-flex;
		display:-ms-flexbox;
		display:flex;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
		font-size: 100%;
	}
}

#footer{
clear:both;
position:relative;
background-color:#e03030;
}


/* サイト説明文
----------------------------------*/
#header h1,
#header3 h1{
width: 100%;
padding:3px 0;
color: #fff;
font-size:100%;
font-weight:normal;
text-align:center;
position: absolute;
top:55px;
text-shadow: 2px 2px 3px #888;
}
@media only screen and (max-width: 959px){
#header h1,
#header3 h1{
font-size: 80%;
padding: 0;
top:50px;
text-shadow:none;
	}
}
#header2 h1,
#header4 h1{
width: 100%;
padding:3px 0;
color: #fff;
font-size:100%;
font-weight:normal;
text-align:center;
position: absolute;
top:0px;
text-shadow: 2px 2px 3px #888;
}
@media only screen and (max-width: 959px){
#header2 h1,
#header4 h1{
font-size: 80%;
padding: 0;
top:0px;
text-shadow:none;
	}
}


/* タイポグラフィ
*****************************************************/
h2.title{
clear:both;
margin:25px 0 0;
padding:7px 10px;
font-size:110%;
color:#fff;
text-align:center;
border:1px solid #dadada;
border-bottom:0;
border-radius:30px 30px 0 0;
}

h2.first{}

h3{
font-weight: bold;
margin: 1%;
border-bottom: 2px solid #e03030;
}

.alignright{float:right;}
.alignleft{float: left;}

.link_box{
	display: block;
	padding: 2%;
	margin: 1% 0;
    box-shadow: 0px 0px 5px 2px #ffd0d0;
	position: relative;
	overflow: auto;
}
.link_box a{
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.link_box ul,
.link_box p{
	margin: 1% 2% 2% 2%;
}

.btn{
	width: 30%;
	margin: 2% auto;
	text-align: center;
	font-size: 120%;
	color: #fff;
	box-shadow: 0px 2px 2px 2px #bbb;
	background-color: #e03030;
    transition-duration: 0.5s;
}
.btn:hover{
	color:#e03030;
	background-color:#fff;
}

.link_box_wrap{
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-justify-content: space-around;
	-ms-flex-pack: distribute;
	justify-content: space-around;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

.btn_hori{
	width: 25%;
	min-width: 185px;
	text-align: center;
	font-size: 120%;
	color: #fff;
	box-shadow: 0px 2px 2px 2px #bbb;
	background-color: #e03030;
    transition-duration: 0.5s;
}
.btn_hori:hover{
	color:#e03030;
	background-color:#fff;
}


.top_areaa{
	background-image: url(images/parts/areaa_btn.jpg);
	color: #fff;
}
@media only screen and (max-width: 959px){
.top_areaa{
	background-image: url(images/parts/areaa_btn-sp.jpg);
	background-size: cover;
	background-position: center;
	color: #fff;
}
}

.serv_areaa{
	background-image: url(images/parts/serv_areaa_btn.jpg);
	color: #fff;
}
@media only screen and (max-width: 959px){
.serv_areaa{
	background-image: url(images/parts/serv_areaa_btn-sp.jpg);
	background-size: cover;
	background-position: center;
	color: #fff;
}
}

.serv_honyecome{
	background-image: url(images/parts/serv_honeycome_btn.jpg);
	color: #fff;
}
@media only screen and (max-width: 959px){
.serv_honyecome{
	background-image: url(images/parts/serv_honeycome_btn-sp.jpg);
	background-size: cover;
	background-position: center;
	color: #fff;
}
}

.serv_ar{
	background-image: url(images/parts/serv_ar_btn.jpg);
	color: #fff;
}
@media only screen and (max-width: 959px){
.serv_ar{
	background-image: url(images/parts/serv_ar_btn-sp.jpg);
	background-size: cover;
	background-position: center;
	color: #fff;
}
}

.serv_rubber{
	background-image: url(images/parts/serv_rubber_btn.jpg);
	color: #fff;
}
@media only screen and (max-width: 959px){
.serv_rubber{
	background-image: url(images/parts/serv_rubber_btn-sp.jpg);
	background-size: cover;
	background-position: center;
	color: #fff;
}
}

.serv_akuriru{
	background-image: url(images/parts/serv_akuriru_btn.jpg);
	color: #fff;
}
@media only screen and (max-width: 959px){
.serv_akuriru{
	background-image: url(images/parts/serv_akuriru_btn-sp.jpg);
	background-size: cover;
	background-position: center;
	color: #fff;
}
}

.serv_can{
	background-image: url(images/parts/serv_can_btn.jpg);
	color: #fff;
}
@media only screen and (max-width: 959px){
.serv_can{
	background-image: url(images/parts/serv_can_btn-sp.jpg);
	background-size: cover;
	background-position: center;
	color: #fff;
}
}

.serv_yokai{
	background-image: url("images/parts/serv_yokai_btn.jpg");
	color: #fff;
	background-size: cover;
}
@media only screen and (max-width: 959px){
.serv_yokai{
	background-image: url(images/parts/serv_yokai_btn-sp.jpg);
	background-size: cover;
	background-position: center;
	color: #fff;
}
}
#gmap{height: 50vh;}


/* ニュース
*****************************************************/
.news{}

.news ul{
	display: table;
}
.news li{
	display: table-cell;
	padding:10px 2% 0 10px;
	white-space: nowrap;
}
.news li:first-child{
	width:200px;
}

@media only screen and (max-width: 959px){
.news ul{
	display: block;
}
.news li{
	display: block;
	white-space: normal;
}
}

.news img{
	width: 50%;
	margin: 0 auto;
	display: block;
}


/* 事業方針
*****************************************************/
.ir{}

.ir h4{margin: 1% 0;}

.ir p{margin: 1%;}

.ir ul{
	display: table;
}
.ir li{
	display: table-cell;
	padding:10px 10px 0 10px;
	white-space: nowrap;
}
.ir li:first-child{
	width:100px;
}

@media only screen and (max-width: 959px){
.ir ul{
	display: block;
}
.ir li{
	display: block;
	white-space: normal;
}
}


/* 会社概要
*****************************************************/
.com{}

.com p{margin: 1%;}

.com ul{
	display: table;
}
.com li{
	display: table-cell;
	padding:10px 10px 0 10px;
	white-space: nowrap;
}
.com li:first-child{
	width:120px;
	text-align: left;
}

@media only screen and (max-width: 959px){
.com ul{
	display: block;
}
.com li{
	display: block;
	white-space: normal;
}
.com li:last-child{
	padding-left: 10px;
}
}



/* AreaA
*****************************************************/
.areaa_usage{}
.areaa_usage ul{display: table;}
.areaa_usage li:first-child{
	width:200px;
	text-align: left;
}
.areaa_usage li{
	display: table-cell;
	padding: 2% 0 0 2%;
}
.areaa_usage p{margin: 2%;}
@media only screen and (max-width: 959px){
.areaa_usage ul{
	display: block;
}
.areaa_usage li:first-child{
	border-bottom: 1px solid #1A1919;
	width: 100%;
}
.areaa_usage li{
	display: block;
	white-space: normal;
}
.areaa_usage li:last-child{
	padding-left: 15px;
	padding-bottom: 10px;
}
}

.areaa_amenity{}
.areaa_amenity ul{display: table;}
.areaa_amenity li:first-child{
	width:400px;
	text-align: left;
}
.areaa_amenity li{
	display: table-cell;
	white-space: nowrap;
	padding: 2% 0 0 0;
}
@media only screen and (max-width: 959px){
.areaa_amenity ul{
	display: block;
}
.areaa_amenity li{
	display: block;
	white-space: normal;
}
.areaa_amenity li:first-child{
	border-bottom: 1px solid #1A1919;
	width: 100%;
}
.areaa_amenity li:last-child{
	padding-left: 10px;
}
}

.areaa_IO{}
.areaa_IO ul{display: table;}
.areaa_IO li:first-child{
	width:100px;
	text-align: left;
}
.areaa_IO li{
	display: table-cell;
	white-space: nowrap;
	padding: 2% 0 0 2%;
}
@media only screen and (max-width: 959px){
.areaa_IO ul{
	display: block;
}
.areaa_IO li:first-child{
	border-bottom: 1px solid #1A1919;
	width: 100%;
}
.areaa_IO li{
	display: block;
	white-space: normal;
}
.areaa_IO li:last-child{
	padding-left: 10px;
}
}

.areaa_cad{}
.areaa_cad img{max-width: 100%;}
@media only screen and (max-width: 959px){
.areaa_cad img{width: 100%;}
}

.areaa_fee{}
.areaa_fee p{padding: 0 0 1% 1%}
.areaa_fee ul{display: table;}
.areaa_fee li:first-child{
	width:400px;
	text-align: left;
}
.areaa_fee li{
	white-space: nowrap;
	margin: 2% 0 1% 2%;
}
@media only screen and (max-width: 959px){
.areaa_fee ul{
	display: block;
}
.areaa_fee li{
	display: block;
	width: 100%;
	white-space: normal;
	border-bottom: 1px solid #1A1919;
}
.areaa_fee li:first-child{
	width: 100%;
}
}


.kiyaku_a{}
.kiyaku_a h4{margin:  1% 0;}
.kiyaku_a p{margin:  1%;}
.kiyaku_a ul{margin: 1%;}
.kiyaku_a ul li{margin: 1% 3%;list-style-type: decimal;}
.kiyaku_a ul li ol{}
.kiyaku_a ul li ol li{list-style-type: lower-roman;}
@media only screen and (max-width: 959px){
.kiyaku_a{}
.kiyaku_a h4{}
.kiyaku_a p{font-size: 90%;}
.kiyaku_a ul{margin: 0 4%;}
.kiyaku_a ul li{font-size: 90%}
.kiyaku_a ul li ol{}
.kiyaku_a ul li ol li{}
}


/* 採用情報
*****************************************************/
.esp{}

.esp h4{
	margin: 3% 0 1% 0;
	width:100%;
	background-color: #e03030;
	padding: 0 1%;
	color: #fff;
}

.esp p{margin: 1%;}

.esp ul{
	display: table;
}
.esp li{
	display: table-cell;
	padding:2% 10px 0 10px;
	border-bottom: 1px solid #888;
}
.esp li:first-child{
	width:20%;
}
.esp li:last-child{
	width:75vw;
}


@media only screen and (max-width: 959px){
.esp ul{
	display: block;
}
.esp li{
	display: block;
	width:auto;
}
.esp li:first-child{
	width:auto;
}
.esp li:last-child{
	width:auto;
	padding-left: 20px;
}
}


/* トップメッセージ
*****************************************************/
.topmssg{}

.topmssg h4{margin: 1% 0;}

.topmssg p{margin: 2% 0;}


/* ガイドライン
*****************************************************/
.guidln{}

.guidln h4{
	margin: 3% 0 1% 0;
	width:100%;
	background-color: #e03030;
	padding: 0 1%;
	color: #fff;
}

.guidln p{margin: 1%;}

.guidln ul{
	padding: 0 0 0 3em;
	list-style:decimal-leading-zero;
}
.guidln li{
	padding:2% 10px 0 10px;
}


@media only screen and (max-width: 959px){
.guidln ul{
	display: block;
}
.guidln li{
	width:auto;
}
.guidln li:first-child{
	width:auto;
}
.guidln li:last-child{
	width:auto;
	padding-left: 20px;
}
}


/* お問い合わせフォーム
*****************************************************/
.form_aka{
	color: #f00;
	font-weight: bold;
}


/* ページトップボタン
*****************************************************/
#pageTop {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1;
}
 
#pageTop a {
  display: block;
  padding: 4% 1% 0 1%;
  border-radius: 4%;
  width: 50px;
  height: 50px;
  background-color: #e03030;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
	font-size: 200%;
}
 
#pageTop a:hover {
  text-decoration: none;
  opacity: 0.7;
}


/* フッター PC用
*****************************************************/
#footer ul{
font-size:12px;
width:100%;
display:-webkit-inline-flex;
display:-ms-inline-flexbox;
display:inline-flex;
}

#footer ul li{
-ms-flex-preferred-size:100%;
-webkit-flex-basis:100%;
flex-basis:100%;
-ms-flex-negative:1;
-webkit-flex-shrink:1;
flex-shrink:1;
text-align: center;
font-size: 130%;
}

#footer ul li	span{
overflow:hidden;
}

#footer ul li	a{
display:block;
margin: 35px 0;
color: #fff;
width: 100%;
height:100%;
}

#footer ul li a span img{
width:100%;
height:auto;
}

#footer ul li	a:hover{text-decoration:underline;}

#footer ul li li{
display:block;
padding:0;
margin:0 0 0 10px;
background-position:0 5px;
}

*:first-child+html #footer ul li{display:inline;}
*:first-child+html #footer ul ul,*:first-child+html #footer ul li li a,*:first-child+html #footer ul li li{display:none;}

#copyright{
clear:both;
padding:10px;
text-align:center;
font-size:75%;
zoom:1;
color:#1A1919;
}


/* フッター(959px以下)
*****************************************************/
@media only screen and (max-width: 959px){
#footer ul{
font-size:12px;
width:100%;
display:-webkit-inline-flex;
display:-ms-inline-flexbox;
display:inline-flex;
-webkit-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
}

#footer ul li{
-ms-flex-preferred-size:100%;
-webkit-flex-basis:100%;
flex-basis:100%;
-ms-flex-negative:1;
-webkit-flex-shrink:1;
flex-shrink:1;
}

#footer ul li span{
overflow:hidden;
}

#footer ul li a{
display:block;
padding:0;
}

#footer ul li a span img{
width:50%;
height:auto;
}

#footer ul li	a:hover{text-decoration:underline;}

#footer ul li li{
display:block;
padding:0;
margin:0 0 0 10px;
background-position:0 5px;
}

*:first-child+html #footer ul li{display:inline;}
*:first-child+html #footer ul ul,*:first-child+html #footer ul li li a,*:first-child+html #footer ul li li{display:none;}

#copyright{
clear:both;
padding:10px;
text-align:center;
font-size:75%;
zoom:1;
color:#000;
}
}


/* グローバルナビ
------------------------------------------------------------*/
.gnavi{
margin:0;
width:100%;
}

#fixedBox {
position: fixed;
top: 0;
padding: 0;
width: 100%;
background-color: #fff;
z-index: 100;
}
#fixedBox.fixed{background-color: #e03030;}
/*PC用*/
nav#mainNav .fixed ul li a{color: #fff;}
/*スマホ用*/
nav#mainNav .fixed span{color: #fff;}



/* メインメニュー　PC用
------------------------------------------------------------*/
@media only screen and (min-width: 960px){
nav div.panel{
display: block !important;
height: 50px;
width: 100%;
}

a#menu{display:none;}		

nav#mainNav ul{
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
width: 100%;
height:100%;
vertical-align: middle;
}

nav#mainNav ul li{
-ms-flex-preferred-size: 100%;
-webkit-flex-basis: 100%;
flex-basis: 100%;
-ms-flex-negative: 1;
-webkit-flex-shrink: 1;
flex-shrink: 1;
text-align: center;
display: block;
}

nav#mainNav ul li a{
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 100%;
height: 100%;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
color: #5d564a;
text-shadow: 2px 2px 3px #999;
}
	
}


/* メインメニュー iPadサイズ以下から
------------------------------------------------------------*/
@media only screen and (max-width:959px){
nav#mainNav{}

nav#mainNav a.menu{
display:block;
height: 44px;
}

nav#mainNav span{
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 100%;
height: 100%;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
color: #5d564a;
font-size: 120%;
}

nav#mainNav a#menu span img,
nav#mainNav ul li a span.nav1 img{width: 100%;}

nav#mainNav a#menu:hover{cursor:pointer;}

nav#mainNav ul li{
display: block;
height: 44px;
}

nav#mainNav ul li:first-child a{
border-top: 1px solid #888;
}

nav#mainNav ul li a{
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 100%;
height: 100%;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
color: #5d564a;
border-bottom: 1px solid #888;
}

nav#mainNav ul li a span{
display:block;
}

}


/* 959px以下から 1カラム表示
------------------------------------------------------------*/
@media only screen and (max-width: 959px){
  #wrapper, #header, .inner{width:100%;}

	nav#mainNav ul, .thumbWrap{margin:0 auto;}

	nav div.panel{float:none;}
	
	#mainImg img{height:auto;}

	#banners{width:100%;margin:0 auto;text-align:center;}
	#banners p{display:inline;margin:0 auto;}
	#banners p img{width:100%;height:auto;}
	#banners{margin-bottom:20px;}

}


/* 幅644px以下から ヘッダー等微調節
------------------------------------------------------------*/
@media only screen and (max-width: 644px){
	#header h1,#header p,#header ul{float:none;}
	img.alignright, img.alignleft{display: block;	margin:5px auto;}
	.alignright,.alignleft{float:none;}
	#footer{padding-left:15px;}
	#footer ul{text-align:left;}
	#footer ul ul{padding:0;}
}