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

html {
    height: 100%;
}

body {
	height: 100%;
	margin: 0;
}

img {
	border: 0; 
	-ms-interpolation-mode: bicubic; 
	vertical-align: middle;
    max-width: 100%;
    /* height: auto;
    width :auto; */
}

iframe {
    vertical-align: bottom;
}

h1 {
	margin: 0px;
}

h2 {
	font-size: 150%;
	font-weight: bold;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
	color: #565D98;
	box-sizing: border-box;
	margin-top: 5px;
	margin-bottom: 5px;
}




a.white:link {
	text-decoration: none;
	color : #FFFFFF;
}
a.white:visited {
	color : #FFFFFF;
}
a.white:hover {
	text-decoration: none;
	color: #FFFF00;
}

a.black:link {
	color: #000000;
}
a.black:visited {
	color: #000000;
}
a.black:hover {
	color: #999999;
}


.switch { visibility: hidden; }
.resize { width: 100vw; }
.center { text-align: center; }
.right { text-align: right; }


/* 非表示-------------*/

.putout_1 { display: none; }
.putout_2 {  }


/* グローバルメニュー -------------*/

.page-top0 { float: left; }
#page-top1 { float: left; }
#page-top2 { float: left; }
#page-top3 { float: left; }
#page-top4 { float: left; }
#page-top5 { float: left; }



/* マウスオーバー時に拡大する画像 */

.img_wrap {
	border: 1px solid rgba(0,0,0,0.0);
	height: auto;
	margin: 0 auto;
	overflow: hidden;
	cursor: pointer;
}
.img_wrap img {
  width: 100%;
  transition-duration: 0.5s;
}
.img_wrap:hover img {
  transform: scale(1.2);
  transition-duration: 0.5s;
}



/* 大枠 コンテンツ
.column_left {
	float: left;
	width: calc(100% - 0px);
	overflow: auto;
	box-sizing: border-box;
	animation: 1s fadeIn2 forwards;  /* ← フェードイン 
}
@keyframes fadeIn2 { 
  from { opacity: 0; }
  to { opacity: 1; }
}
*/

/* 大枠 右メニュー
.column_right {
	float: right;
	width: 150px;
	overflow: auto;
	box-sizing: border-box;
	padding: 20px;
	height: 100%;
	position: fixed;
	right: 0;
	background-color: #f7f7f7;
	box-shadow:0px 0px 10px rgba(0,0,0,0.5);
}

.column_right center {
	position: absolute;
    right: 0;
    bottom: 50%;
	width: 150px;
}

.column_right under {
	position: absolute;
    right: 0;
    bottom: 0;
	width: 150px;
}
*/

.column_header {
	width: 100%;
	clear: both;
	background-color: #FFFFFF;
	clear: both;
	overflow: auto;
	box-sizing: border-box;
	padding: 0px;
	height: 100px;
	position: fixed;
	z-index: 3;
	box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
}

.column_header_logo {
	float: left;
}

.column_header_bo {
	float: right;
	padding-right: 15px;
}

a:hover img {
  opacity: 0.5;
  filter: alpha(opacity=60);
}

.column_header center {
	position: absolute;
	top: 0px;
	right: 100px;
	width: 48px;
	padding: 10px;
}



.column_content {
	width: 100%;
	clear: both;
	overflow: auto;
	box-sizing: border-box;
	animation: 1s fadeIn2 forwards;
}
@keyframes fadeIn2 { 
  from { opacity: 0; }
  to { opacity: 2; }
}


/* back ----------------------------- */

.back_black {
	width: 100%;
	background-color: #000;
	overflow: auto;
	box-sizing: border-box;
}

.back_white {
	width: 100%;
	background-color: #FFF;
	clear: both;
	overflow: auto;
}

.back_orange {
	width: 100%;
	background-color: #FF9933;
	overflow: auto;
	box-sizing: border-box;
}

.back_blue {
	width: 100%;
	background-color: #3B6EBF;
	overflow: auto;
	box-sizing: border-box;
}

.back_red {
	width: 100%;
	background-color: #FCF3EB;
	overflow: auto;
	box-sizing: border-box;
	background-image: url(../images/back_01.jpg);
	background-position: center bottom;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
}

.back_green {
	width: 100%;
	background-color: #228C00;
	overflow: auto;
	box-sizing: border-box;
}

.back_gray {
	width: 100%;
	background-color: #F5F5F5;
	overflow: auto;
	box-sizing: border-box;
}

.back_gray2 {
	width: 100%;
	background-color: #E3EBE0;
	overflow: auto;
	box-sizing: border-box;
}

.back_header {
	width: 100%;
	clear: both;
	background-color: #FAE3DD;
	overflow: auto;
}

.back_footer {
	width: 100%;
	clear: both;
	overflow: auto;
	background-image: url(../images/temp/menu_foot_back.jpg);
	background-size: cover;
}

.back_sec1 {
	width: 100%;
	background-color: #dde3ea;
	overflow: auto;
	box-sizing: border-box;
}

.back_sec2 {
	width: 100%;
	background-color: #008e8e;
	overflow: auto;
	box-sizing: border-box;
}

.back_sec3 {
	width: 100%;
	background-color: #dbefef;
	overflow: auto;
	box-sizing: border-box;
}

.back_sec4{
	width: 100%;
	background-color: #001a33;
	overflow: auto;
	box-sizing: border-box;
}

.back_copylight {
	width: 100%;
	background-color: #000913;
	overflow: auto;
	box-sizing: border-box;
}

/* column */

.column_12 {
	float: left;
	width: 100%;
	overflow: auto;
}

.column_06 {
	float: left;
	width: 50%;
	overflow: auto;
}

.column_04 {
	float: left;
	width: 33.3333333333%;
	overflow: auto;
}

.column_03 {
	float: left;
	width: 25%;
	overflow: auto;
}


/* column内のcolumn ----------------------------- */

.column_bit {
	float: left;
	overflow: auto;
	width: 84%;
	padding-top: 4%;
	padding-right: 8%;
	padding-bottom: 4%;
	padding-left: 8%;
}

.column_bit_foot {
	float: left;
	overflow: auto;
	width: 84%;
	padding-top: 1%;
	padding-right: 8%;
	padding-bottom: 1%;
	padding-left: 8%;
}

.column_bit_100 {
	float: left;
	width: 100%;
	padding: 15px;
	box-sizing: border-box;
	overflow: auto;
}

.column_bit_50 {
	float: left;
	width: 50%;
	padding: 15px;
	box-sizing: border-box;
}

.column_bit_40 {
	float: left;
	width: 34%;
	padding: 15px;
	box-sizing: border-box;
}

.column_bit_33 {
	width: 30.9%;
	margin: 1%;
	box-sizing: border-box;
	display: inline-block;  /* インラインブロック化 */
	vertical-align: top; /* 下端を揃える */
	
}

.column_bit_25 {
	display: inline-block;
	vertical-align: top; 
	width: 22.5%;
	margin: 1%;
	box-sizing: border-box;
}

.column_bit_20 {
	float: left;
	width: 22%;
	padding: 15px;
	box-sizing: border-box;
}

.column_bit_16 {
	float: left;
	width: 16.66666%;
	padding: 15px;
	box-sizing: border-box;
}

.column_2 {
	float: left;
	width: 60%;
	margin-right: 0px;
	margin-bottom: 0px;
	box-sizing: border-box;
}

.column_3line {
	float: right;
	width: 30%;
	box-sizing: border-box;
	border-left: 1px dotted #FFFFFF;
	color: #FFFFFF;
	padding-left: 25px;
}

/* その他 */







/* ヘッダー画像 */

.headerbox {
	width: 100%;/* --------------- ヘッダー画像 */
	overflow: auto;
	position:relative; 
}

.headerbox_under {
	position: absolute;
	bottom: 0px;
	right: 0px;
	font-size: 13px;
	font-weight: bolder;
	background-image: url(../images/temp/headerbox_under.png);
	background-repeat: repeat;
	padding-top: 10px;
	padding-right: 25px;
	padding-bottom: 10px;
	padding-left: 25px;
}



/* トップイメージ -----------------------*/
.box { /* 画像にする場合 */
	background: url(../images/topimage.jpg) no-repeat center;
	background-size: cover; 
	xoverflow: hidden;
	position: relative;
}

video { /* 動画にする場合 */
	object-fit: cover;
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
}

.box__centered{
	/* width: 70%; ←ロゴのサイズ */
	top: 35%;
	left: 50%;
	position: absolute;
	z-index: 3;
}

.box__contents{
	text-align: center;
	transform: translate(-50%,-50%);
}

.box__under{
	position: absolute;
	bottom: 0%;
	left: 0%;
	width: 33%;
	font-size: 13px;
	font-weight: bolder;
	background-image: url(../images/temp/headerbox_under.png);
	background-repeat: repeat;
	box-sizing: border-box;
	text-align: center;
	padding: 20px;
}


.column_bit_space_1 {
	padding: 3%;
	box-sizing: border-box;
}

.parts_photo {
	background-image: url(../images/img_05.jpg);
	background-size: cover;
	overflow: hidden;
	position: relative;
	height: 850px;
	background-color: #FAE3DD;
}

@media only screen and (min-width: 1921px) {
	
.parts_photo {
	height: 950px;
}

}

@media only screen and (max-width: 1200px) {
	
.column_bit_space_1 {
	padding: 10%;
}

}


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

.parts_photo {
	height: 350px;
}

.bit_index_1 {
	height: 250px;
}

}


/*表組みのパーツ--------------------------------------*/

.bit_cell {
	overflow: auto;
	clear: both;
	margin-bottom: 10px;
	padding-bottom: 10px;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #CCC;
}

.bit_cell_left {
	float: left;
	clear: left;
	font-size: 14px;
	line-height: 25px;
	padding-right: 20px;
	width: 100px;
}

.bit_cell_left2 {
	float: left;
	clear: left;
	font-size: 16px;
	line-height: 24px;
	padding-right: 20px;
	width: 140px;
}

.bit_cell_left3 {
	float: left;
	clear: left;
	font-size: 13px;
	line-height: 25px;
	padding-right: 20px;
	width: 20%;
}

.bit_cell_left4 {
	font-size: 13px;
	line-height: 23px;
	padding-right: 20px;

}

.bit_cell_right {
	float: left;
	font-size: 14px;
	line-height: 25px;
	padding-right: 20px;
	width: 280px;
}

.bit_cell_right2 {
	float: left;
	font-size: 16px;
	line-height: 26px;
	padding-right: 20px;
}

.bit_cell_right3 {
	float: left;
	font-size: 16px;
	line-height: 25px;
	width: 75%;
}

.bit_cell_right4 {
	font-size: 14px;
	line-height: 24px;
	padding-right: 20px;
}



#googlemap{
    width: 100%;
    height: 400px;
}

.bar_none_foot {
	width: 100%;
	height: 135px;
	clear: both;
}



.movie-wrap {
     position: relative;
     padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
     height: 0;
     overflow: hidden;
}
 
.movie-wrap iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
}


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


/* 非表示-------------*/

.putout_1 { display: block; }
.putout_2 { display: none; }


/* グローバルメニュー -------------*/

#page-top1 { float: none; clear: both; }
#page-top2 { float: none; clear: both; }
#page-top3 { float: none; clear: both; }
#page-top4 { float: none; clear: both; }
#page-top5 { float: none; clear: both; }

.column_header {
	height: 60px;
}

.column_left {
	float: left;
	width: calc(100% - 0px);
	margin-top: 70px;
}

.column_12 {
	clear: both;
	width: 100%;
}

.column_06 {
	clear: both;
	width: 100%;
}

.column_04 {
	width: 33.3333333333%;
}

.column_03 {
	width: 50%;
}

.column_01 {
	float: left;
	width: 33.3333333333%;
	overflow: auto;
}
	
.column_2 {
	clear: both;
	width: 100%;
}	
.column_3line {
	clear: both;
	width: 100%;
	margin-right: 0px;
	margin-bottom: 0px;
	border-left-width: 0px;
	border-left-style: solid;
	border-left-color: #FFFFFF;
	padding-left: 0px;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #FFFFFF;
	padding-top: 30px;
}

/* column内のcolumn */

.column_bit {
	width: 90%;
	padding: 5%;
}

.column_bit_foot {
	padding-top: 3%;
	padding-bottom: 3%;
}

.column_bit_100 {
}

.column_bit_50 {
	clear: both;
	width: 92%;
	margin: 4%;
	padding: 0px;
}

.column_bit_33 {
	clear: both;
	width: 92%;
	margin: 4%;
	
}

.column_bit_25 {
	width: 45%;
	margin: 2%;
}

.column_bit_16 {
	float: left;
	width: 33.33333%;
	padding: 5px;
}

/* index */

.box__centered{
	width: 100%; /* ←元50% */
	top: 60%;
	left: 0%; /* ←元50% */
	position: absolute;
	z-index: 4;
}

.box__contents{
	transform: translate(-0%,-100%); /* ←元(-50%,-100%) */
}


.box__under{

}

.column_index_01 {
	clear: both;
	width: 100%;
	background-image: url(../images/img_top_01_sp.jpg);
	height: 200px;
}

.column_index_02 {
	clear: both;
	width: 100%;
	height: auto;
}

/* about */

.column_about_01 {
	width: 100%;
	padding: 0%;
}

.column_about_01_bit {
	border-bottom-width: 2px;
	border-bottom-style: dotted;
}

.bit_about_left {
	font-size: 12px;
	width: 35%;
}
.bit_about_right {
	font-size: 12px;
	width: 60%;
}


/* contact */

.bit_contact_bit {
	width: 90%;
	margin-right: 0%;
	margin-left: 0%;
	padding: 5%;
}

.column_contact_01_bit {
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 10px;
	padding-left: 0px;
}

.bit_contact_left {
	font-size: 16px;
	font-weight: bolder;
	float: left;
	width: 100%;
	text-align: left;
}
.bit_contact_right {
	font-size: 16px;
	font-weight: bolder;
	float: left;
	width: 100%;
	text-align: left;
}


/* recruit */

.bit_recruit_bit {
	width: 100%;
	margin-right: 0%;
	margin-left: 0%;
	padding: 5%;
}

.bit_cell_right {
	float: none;
	font-size: 12px;
	line-height: 22px;
	padding-right: 20px;
	clear: both;
}

.bit_cell_right2 {
	float: none;
	font-size: 12px;
	line-height: 22px;
	padding-right: 20px;
	clear: both;
}

.bit_cell_left3 {
	clear: both;
	width: 94%;
}

.bit_cell_right3 {
	float: none;
	font-size: 12px;
	line-height: 22px;
	padding-right: 20px;
	width: 94%;
	clear: both;
}

}


/* 文字の要素 */

.p_body {
	font-size: 20px;
	line-height: 38px;
	font-weight: bold;
}

.p_33 {
	font-size: 33px;
	line-height: 36px;
	font-weight: bold;
}

.p_23 {
	font-size: 23px;
	line-height: 36px;
	font-weight: bold;
}
.p_22 {
	font-size: 22px;
	line-height: 22px;
}
.p_21 {
	font-size: 21px;
	line-height: 32px;
}
.p_20 {
	font-size: 20px;
	line-height: 40px;
}
.p_19 {
	font-size: 19px;
	line-height: 32px;
}
.p_19r {
	font-size: 19px;
	line-height: 32px;
	color: #C00000;
}
.p_19g {
	font-size: 19px;
	line-height: 28px;
	color: #0066CC;
}
.p_19b {
	font-size: 19px;
	line-height: 28px;
	color: #006666;
}

.p_18 {
	font-size: 18px;
	margin: 0px 0px 5px 0px;
}

.p_17 {
	font-size: 17px;
	line-height: 30px;
}
.p_16 {
	font-size: 16px;
	line-height: 35px;
}
.p_15 {
	font-size: 15px;
	line-height: 30px;
}
.p_14 {
	font-size: 14px;
	line-height: 28px;
}

.p_13 {
	font-size: 13px;
	line-height: 28px;
}

.p_12 {
	font-size: 12px;
	line-height: 20px;
}
.p_11 {
	font-size: 11px;
	line-height: 15px;
}
.p_10 {
	font-size: 10px;
	line-height: 18px;
}

.p_red {
	color: #D80000;
}

.p_orange {
	color: #FA5100;
}

.p_blue {
	color: #D3DFED;
}

.p_green {
	color: #009933;
}

.p_bluegreen {
	color: #006666;
}

.p_gray {
	color: #ECD2B9;
}
.p_gray2 {
	color: #8FA6AD;
}

.p_white {
	color: #FFFFFF
}

.p_purple {
	color: #9F72A2;
}




/* 角丸テーブル ------------------------*/

.table-01 {
	border-collapse: separate;
	border-spacing: 0;
	border-radius: 35px;
	color: #000000;
	border-top-width: 0px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 0px;
	border-bottom-style: solid;
	border-bottom-color: #000;
	border-right-style: solid;
	border-right-color: #000;
	font-size: 16px;
	line-height: 30px;
	color: #000000;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
}
.table-01 thead th,
.table-01 tbody th,
.table-01 tbody td {
	border-top-width: 1px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #000000;
	border-right-color: #000000;
	border-bottom-color: #000000;
	border-left-color: #000000;
}
.table-01 thead th {
	background-color: #FFF;
	font-weight: normal;
}
.table-01 tbody th {
  background-color: #FFF;
  font-weight: normal;
}
.table-01 thead th + th,
.table-01 tbody td {
	border-top-width: 1px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #000000;
	border-right-color: #000000;
	border-bottom-color: #000000;
	border-left-color: #000000;
}
.table-01 tbody tr:last-child th,
.table-01 tbody tr:last-child td {
  border-bottom: none;
}
.table-01 thead tr:first-child th:first-child {
  border-radius: 35px 0 0 0;
}
.table-01 thead tr:first-child th:last-child {
  border-radius: 0 35px 0 0;
}
.table-01 tbody tr:last-child th:first-child {
  border-radius: 0 0 0 35px;
}
.table-01 tbody tr:last-child th:last-child {
  border-radius: 0 0 35px 0;
}


/* bar --------------------------------*/

.bar_none_1 {
	width: 100%;
	height: 0px;
	clear: both;
}

.bar_none_5 {
	width: 100%;
	height: 5px;
	clear: both;
}

.bar_none_10 {
	width: 100%;
	height: 12px;
	clear: both;
}

.bar_none_15 {
	width: 100%;
	height: 15px;
	clear: both;
}

.bar_none_20 {
	width: 100%;
	height: 20px;
	clear: both;
}

.bar_none_30 {
	width: 100%;
	height: 30px;
	clear: both;
}

.bar_none_1p {
	width: 100%;
	height: 1%;
	clear: both;
}

.bar_01 {
	width: 100%;
	clear: both;
	border-top-width: 1px;
	border-top-style: dotted;
	border-top-color: #999999;
}

.bar_02 {
	width: 100%;
	height: 18px;
	clear: both;
	border-top-width: 1px;
	border-top-style: dotted;
	border-top-color: #FFFFFF;
	margin-top: 15px;
}

.bar_03 {
	width: 100%;
	height: 13px;
	clear: both;
	border-top-width: 1px;
	border-top-style: dotted;
	border-top-color: #666666;
}

.bar_04 {
	width: 100%;
	height: 20px;
	clear: both;
	border-top-width: 3px;
	border-top-style: dotted;
	border-top-color: #CCCCCC;
	margin-top: 20px;
}

.bar_05 {
	width: 100%;
	height: 20px;
	clear: both;
	border-top-width: 6px;
	border-top-style: double;
	border-top-color: #E6E6E6;
	margin-top: 15px;
}


/* スライダー --------------------------------*/




/*フォーム装飾------------------------*/

input[type="text"],
textarea {
    padding: 0.6em;
    outline: none;
    border: 1px solid #DDD;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    font-size: 13px;
}
textarea {
    width: 300px;
}
input[type="text"]:focus,
texture:focus {
    box-shadow: 0 0 7px #3498db;
    border: 1px solid #3498db;
}
input[type="text"] {
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s;
    width: 200px;
}
input[type="text"]:focus {
    width: 300px;
}
input.sysNextSubmit {
	border-radius: 0;
	background: -moz-linear-gradient(top, #FFF 0%, #EEE);
	background: -webkit-gradient(linear, left top, left bottom, from(#005db0), to(#005db0));
	border: 0px solid #DDD;
	color: #FFF;
	padding: 10px 30px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
input.sysNextSubmit:hover {
    background: -moz-linear-gradient(top, #872D47 0%, #872D47);
    background: -webkit-gradient(linear, left top, left bottom, from(#872D47), to(#872D47));
}


.visual_photo {
    border-radius: 30px;
}