@charset "UTF-8";
.js-image-switch{}
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

article, aside, details, figcaption, figure, footer, header, menu, nav, section {
	display: block;
}

ul, ol, li, dl, dt, dd {
	list-style-type: none;
	list-style-position: outside;
}

mark {
	background-color: #ff9;
	color: #000;
	font-style: italic;
	font-weight: bold;
}

a {
	margin: 0;
	padding: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
	color: #333;
	border: 0;
	font-size: 100%;
	text-decoration: none;
}

a:hover {
	color: #0d7fb4;
}

@media screen and (min-width: 640px) {
  a {
    -webkit-transition: all .2s linear;
    transition: all .2s linear; }

  .alpha {
    -webkit-transition: all .2s linear;
    transition: all .2s linear; }

  .alpha:hover {
    opacity: .7;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; }
}


table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* =================================================================== 
 * style info : html
 * =================================================================== */
html {
	/*overflow-y: hidden;*/
	overflow-y: scroll;
	height: 100%;
}

@media all and (max-width: 768px) {
html {
	overflow-y: scroll;
}
}
/* =================================================================== 
 * style info : body
 * =================================================================== */
body {
	min-width: 1300px;
	height: 100%;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;
	font-size: 16px;
	line-height: 1.8;
	-webkit-text-size-adjust: 100%;
	color: #333;
}

@media all and (max-width: 768px) {
body {
	min-width: 320px;
	font-size: 14px;
}
}


/*	clearfix
--------------------------------------*/
.clearfix {
  /**zoom: 1;*/
}
.clearfix:before {
  content: " ";
  display: table;
}
.clearfix:after {
  content: " ";
  display: table;
  clear: both;
}

.cb {
	clear: both;
}

/*	title font
--------------------------------------*/
h1,h2,h3,h4,h5,h6 {
	font-weight: normal;
}

.bold {
	font-weight: bold;
}
.pc {
	display: none; }
  
  .sp {
	display: block; }
  
  @media only screen and (min-width: 640px) {
	.pc {
	  display: block; }
  
	.sp {
	  display: none; } }
  

/*	image
--------------------------------------*/
img {
	margin: 0px;
	padding: 0px;
	border: none;
	vertical-align:bottom;
	max-width: 100%;
	height: auto;
}

a img{
	border: 0px;
	max-width: 100%;
}


/*	hover
-------------------------------------*/
.toimg a:hover img{
	filter: alpha(opacity=75);
	-moz-opacity:0.75;
	opacity:0.75;
}


/*	斜め文字と太字の初期化
--------------------------------------*/
address,caption,cite,code,dfn,em,var {
	font-style: normal;
	font-weight: normal;
}

/*	txt
--------------------------------------*/
.em{ font-weight: bold;}
.txtLeft  { text-align: left;}
.txtCenter{ text-align: center;}
.txtRight { text-align: right;}
.orange { color: #ff7700;}
.blue {	color: #2b39af;}

/*	float
--------------------------------------*/
.left { float: left;}
.right{ float: right;}
.clear{ float: none; clear: both;}
/*	font
--------------------------------------*/
@import url('https://fonts.googleapis.com/css?family=Open+Sans');

/* =================================================================== 
 * style info : common
 * =================================================================== */
.inner_base{
	max-width: 1200px;
	margin: 0 auto;
}

@media all and (max-width: 768px){
.inner_base{
	width: 96%;
	margin: 0 2%;
}
	
}
/*	title
--------------------------------------*/
.ttl_content {
	text-align: center;
	margin-bottom: 65px;
}
@media screen and (max-width: 768px) {
.ttl_content {
	margin-bottom: 50px;
}
}
	
@media screen and (max-width: 680px) {
.ttl_content {
	margin-bottom: 30px;
}
.ttl_content img{
	width: auto;
	height: 29px;
}
}

.ttl_txt_center {
	text-align: center;
	margin-bottom: 45px;
	font-size: 24px;
}
	
@media screen and (max-width: 680px) {
.ttl_txt_center {
	text-align: center;
	margin-bottom: 25px;
	font-size: 20px;
}
}

/*	cutch_txt
--------------------------------------*/
.cutch_txt {
	text-align: center;
	margin-bottom: 50px;
}
@media screen and (max-width: 768px) {
.cutch_txt {
	text-align: center;
	margin-bottom: 40px;
}
}
	
@media screen and (max-width: 680px) {
.cutch_txt {
	text-align: center;
	margin-bottom: 25px;
}
}





/* =================================================================== 
 * style info : header
 * =================================================================== */
.header_area {
	position: relative;
	padding: 10px 10px 25px;
}

.hd_logoarea {
	font-size: 14px;
}

@media screen and (max-width: 1300px) {
.header_area {
	max-width: 1300px;
}
}


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

}
	
@media screen and (max-width: 680px) {
.header_area {
	position: relative;
	padding: 15px 10px 25px;
}
.hd_logoarea {
	font-size: 13px;
}
}
@media screen and (max-width: 460px) {
.hd_logoarea {
	font-size: 9px;
}
}

/* =================================================================== 
 * style info : campany_info
 * =================================================================== */
.campany_info_wrap {
	background: url(../image/campany_info_bg.png) center center no-repeat;
	background-size:  cover;
}

.campany_info li {
	width: 50%;
	padding: 270px 0;
	float: left;	
}

.campany_info li:nth-child(2) {
	text-align: right;
}

@media screen and (max-width: 768px) {
.campany_info_wrap {
	background: url(../image/campany_info_tab_bg.png) center center no-repeat;
	background-size:  cover;
}

.campany_info li {
	padding: 150px 0;
}
.campany_info li:nth-child(1) img {
	width: 75px;
	height: auto;
}
.campany_info li:nth-child(2) img {
	width: 114px;
	height: auto;
}
	
}
@media screen and (max-width: 600px) {
.campany_info li {
	padding: 100px 0;
}

}
/* =================================================================== 
 * style info : content padding
 * =================================================================== */
.art_center, .contact {
	padding: 120px 0;
}
.art_center_service {
	padding: 120px 0 30px;
}

.company {
	padding: 0 0 30px;
}

@media screen and (max-width: 768px) {
.art_center, .contact {
	padding: 50px 0;
}
.art_center_service {
	padding: 50px 0 30px;
}
.company {
	padding: 0 0 30px;
}
}
	
@media screen and (max-width: 680px) {
.art_center, .art_center_service, .contact {
	padding: 40px 0;
}
.art_center_service {
	padding: 40px 0 20px;
}
.company {
	padding: 0 0 20px;
}
}

/* =================================================================== 
 * style info : art_center
 * =================================================================== */
.cutch {
	background: url(../image/art_center_bg.png) left top no-repeat;
	padding: 0 0 120px;
}

@media screen and (max-width: 768px) {
.cutch {
	background-size: 450px auto;
	padding: 0 0 60px;
}
}
	
@media screen and (max-width: 680px) {
.cutch {
	background-size: 299px auto;
	padding: 0 0 40px;
}

}

.art_center_pict li {
	width: 22%;
	float: left;
	margin-left: 4%;
	text-align: center;
}

.art_center_pict li:first-child {
	margin-left: 0;
}

.art_center_pict li p {
	font-size: 11px;
	padding: 5px 0 0;
}


@media screen and (max-width: 680px) {
.art_center_pict li {
	width: 50%;
	float: left;
	text-align: center;
	margin: 0 0 20px 0;
	padding: 0 1%;
}

.art_center_pict li:nth-child(odd) {
	margin-left: 0;
	clear: both;
}

.art_center_pict li p {
	font-size: 11px;
	padding: 5px 0 0;
}
}

.ohara_link {
	text-align: right;
}

.ohara_link a {
	background: url(../image/point_sky.png) 0 50% no-repeat;
	padding-left: 15px;
	color: #0d7fb4;
}

.ohara_link a:hover {
	color: #84bdd7;
}
/*	art_center_goods
--------------------------------------*/
.art_center_goods {
	margin-bottom: 120px;
}
.art_center_goods .cutch_txt {
	padding: 0 2%;
}

.art_center_goodsimage img {
	width: 100%;
}
@media screen and (max-width: 768px) {
.art_center_goods {
	margin-bottom: 60px;
}
}
	
@media screen and (max-width: 680px) {
.art_center_goods {
	margin-bottom: 40px;
}
}

/*	art_center_frame
--------------------------------------*/
.art_center_frame li {
	width: 50%;
}
.art_center_frame li:nth-child(1) {
	float: right;
	padding: 120px 70px 0;
}

.art_center_frame li:nth-child(2) {
	float: left;
	padding: 0 70px 0;
}

.art_center_frame li h2 {
	font-size: 24px;
	margin-bottom: 35px;
}

@media screen and (max-width: 768px) {
.art_center_frame li:nth-child(1) {
	float: right;
	padding: 20px 20px 0;
}

.art_center_frame li:nth-child(2) {
	float: left;
	padding: 0 20px 0;
}

.art_center_frame li h2 {
	font-size: 20px;
	margin-bottom: 25px;
}
}
	
@media screen and (max-width: 680px) {
.art_center_frame li {
	width: 100%;
}
.art_center_frame li:nth-child(1) {
	float:none;
	padding: 0;
}

.art_center_frame li:nth-child(2) {
	float: none;
	padding: 0 0 30px;
}
}

/* =================================================================== 
 * style info : art_center_service
 * =================================================================== */
.art_center_service {
	background: #eeeeee;
}

.art_center_service_cutch {
	text-align: center;
	margin-bottom: 35px;
}

.art_center_service_cutch dt {
	margin-bottom: 35px;
}
@media screen and (max-width: 680px) {
.art_center_service_cutch {
	text-align: center;
	margin-bottom: 30px;
}

.art_center_service_cutch dt {
	margin-bottom: 20px;
}
}
/*	art_center_service_pict
--------------------------------------*/
.art_center_service_pict {
	margin-bottom: 100px;
}

.art_center_service_pict li {
	float: left;
	margin-left: 35px;
	text-align: center;
}

.art_center_service_pict li:first-child {
	margin-left: 0;
}

.art_center_service_pict li p {
	margin-top: 10px;
	font-size: 11px;
}
@media screen and (max-width: 768px) {
.art_center_service_pict {
	margin-bottom: 60px;
}

.art_center_service_pict li {
	width: 35%;
	float: left;
	margin-left: 2%;
}
	
.art_center_service_pict li:nth-child(2) {
	width: 26%;
	}
}
	
@media screen and (max-width: 680px) {
.art_center_service_pict {
	margin-bottom: 40px;
}

.art_center_service_pict li {
	width: 100%;
	float: none;
	margin-left: 0;
	margin-bottom: 20px;
}
	
.art_center_service_pict li:nth-child(2) {
	width: 100%;
	}
}

/*	history
--------------------------------------*/
.history {
	overflow: hidden;
	margin-bottom: 30px;
}

.history li {
	width: 50%;
}

.history li:nth-child(odd) {
	float: right;
	padding: 0 0 0 50px;
}

.history li:nth-child(even) {
	float: left;
	text-indent: -9999px;
	overflow: hidden;
}

.history li.history_00 {
	height: 350px;
	background: url(../image/history_00_b.png) center center no-repeat;
	background-size: cover;
}
.history li.history_01 {
	height: 350px;
	background: url(../image/history_01_bg.png) center center no-repeat;
	background-size: cover;
}
.history li.history_02 {
	height: 320px;
	background: url(../image/history_02_bg.png) center center no-repeat;
	background-size: cover;
}
.history li.history_03 {
	height: 380px;
	background: url(../image/history_03_bg.png) center center no-repeat;
	background-size: cover;
}
.history li.history_20 {
	height: 350px;
	background: url(../image/history_20_bg.png) center center no-repeat;
	background-size: cover;
}
.history li.history_21 {
	height: 350px;
	background: url(../image/history_21_bg.png) center center no-repeat;
	background-size: cover;
}
.history li.history_22 {
	height: 350px;
	background: url(../image/history_22_bg.png) center center no-repeat;
	background-size: cover;
}


.history li.history_23 {
	height: 350px;
	background: url(../image/history_23_bg.png) center center no-repeat;
	background-size: cover;
}

.history li.history_24 {
	height: 350px;
	background: url(../image/history_24_bg.png) center center no-repeat;
	background-size: cover;
}

.history li.history_25 {
	height: 350px;
	background: url(../image/history_25_bg.png) center center no-repeat;
	background-size: cover;
}


.history h3 {
	margin-bottom: 30px;
}

.history dt {
	font-weight: bold;
	margin-bottom: 10px;
	font-size: 13px;
}
.history dd {
	font-size: 13px;
	line-height: 1.2;
	margin-bottom: 12px;
	padding-bottom: 10px;
	border-bottom: 1px dotted #ccc;
}
.btn_more {
	display: inline-block;
	background: #0D7FBB;
	color: #fff;
	padding: 2px 10px 3px;
	margin-left: 5px;
}
.btn_more:hover {
	color: #ccc;
}
@media screen and (max-width: 768px) {
.history {
	overflow: hidden;
	margin-bottom: 30px;
}

.history li {
	width: 100%;
}

.history li:nth-child(odd) {
	float: none;
	padding: 0;
	margin-bottom: 20px;
}

.history li:nth-child(even) {
	float: none;
	text-indent: 0;
	overflow: hidden;
}

.history li.history_bgnone,history_01,.history li.history_02,.history li.history_03 {
	height: auto;
	background: none;
}

.history h3 {
	margin-bottom: 20px;
}

.history dt {
	font-weight: bold;
	margin-bottom: 10px;
	font-size: 13px;
}
.history dd {
	font-size: 13px;
}
}
/* =================================================================== 
 * style info : art_center_service
 * =================================================================== */
.campany_wrap_in {
	background: url(../image/company_bg.png) 0 0 no-repeat;
	padding: 120px 0 40px;
}
@media screen and (max-width: 768px) {
.campany_wrap_in {
	background: url(../image/company_bg.png) 0 0 no-repeat;
	background-size: 768px auto;
	padding: 60px 0 40px;
}
}
	
@media screen and (max-width: 680px) {
.campany_wrap_in {
	background: url(../image/company_bg.png) 0 0 no-repeat;
	background-size: 680px auto;
	padding: 40px 0 30px;
}
}
/*	campany table
--------------------------------------*/
.company_art_center, .company_art_center_service {
	width: 50%;
	float: left;
}

.company_art_center {
	padding: 0 10px 0 130px;
}

.company_art_center_service {
	padding: 0 130px 0 10px;
}

.company_table {
	width: 100%;
	color: #858585;
	font-size: 14px;
}
.company_table tr {
	border-bottom: 1px solid #e9e9e9;
}
.company_table tr:last-child {
	border-bottom: none;
}

.company_table th {
	font-weight: normal;
	vertical-align: top;
	border-right: 1px solid #e9e9e9;
	padding: 10px 15px;
	width: 100px;
}
.company_table td {
	padding: 10px 15px;
}
@media screen and (max-width: 768px) {
.company_art_center {
	padding: 0 10px 0 10px;
}

.company_art_center_service {
	padding: 0 10px 0 10px;
}
}
	
@media screen and (max-width: 680px) {
.company_art_center, .company_art_center_service {
	width: 100%;
	float: none;
}

.company_art_center,.company_art_center_service {
	padding: 0 10px;
}
	
.company_art_center {
	margin-bottom: 50px;
}
	
.company_table {
	width: 100%;
	font-size: 13px;
}

.company_table th {
	font-weight: normal;
	vertical-align: top;
	border-right: 1px solid #e9e9e9;
	padding: 10px 15px;
	width: 100px;
}
.company_table td {
	padding: 10px 15px;
}
}

/*	campany_address 
--------------------------------------*/
.campany_address {
	text-align: center;
}

.campany_address li {
	width: 32%;
	float: left;
	margin-left: 2%;
}

.campany_address li:first-child {
	margin-left: 0;
}

.campany_address li address {
	font-size: 13px;
	margin-bottom: 10px;
}
.gmap { 
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	margin-bottom: 30px;
	height: 0;
	overflow: hidden;
	max-width: 100%;
	height: auto;
}

.gmap iframe, .gmap object, .gmap embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
	
@media screen and (max-width: 680px) {
.campany_address li {
	width: 80%;
	float: none;
	margin: 0 10% 20px;
}

.campany_address li:first-child {
	margin: 0 10% 20px;
}

}
/* =================================================================== 
 * style info : news
 * =================================================================== */
.news {
	background: #000;
	padding: 55px 0;
}

.news ul {
	display: table;
	width: 100%;
}

.news ul li {
	display: table-cell;
	color: #fff;
}

.news ul li:first-child {
	width: 40%;
	vertical-align: middle;
}

.news dt {
	padding : 10px 0 10px 10px;
	width : 7em;
	float : left;
	clear : both;
	font-family: 'Open Sans', sans-serif;
	font-size: 15px;
}
 
.news dd {
	padding : 10px 0 10px 9em;
	font-size: 15px;
}

@media screen and (max-width: 680px) {
.news {
	padding: 35px 0;
}

.news ul {
	display: block;
	width: 96%;
	margin: 0 auto;
}

.news ul li {
	display: block;
}

.news ul li:first-child {
	width: 100%;
	text-align: center;
	margin-bottom: 20px;
}
	
.news ul li:first-child img {
	width: auto;
	height: 28px;
}

.news dt {
	padding : 10px 0 10px 10px;
	width : 7em;
	float : left;
	clear : both;
	font-family: 'Open Sans', sans-serif;
	font-size: 11px;
}
 
.news dd {
	padding : 10px 0 10px 9em;
	font-size: 11px;
}
}
/* =================================================================== 
 * style info : works
 * =================================================================== */
.ttl_center {
	margin-bottom: 30px;
}
.ttl_center .en {
	display: block;
	text-align: center;
	font-size: 22px;
}
.ttl_center .jp {
	display: block;
	text-align: center;
	font-size: 14px;
	color: #0d7fb4;
}
@media only screen and (min-width: 640px) {
.ttl_center {
	margin-bottom: 60px;
}
.ttl_center .en {
	font-size: 40px;
}
.ttl_center .jp {
	font-size: 14px;
}
}

.year {
	margin-bottom: 30px;
}
@media only screen and (min-width: 640px) {
.year {
	width: 1000px;
	margin: 0 auto 30px;
}
}

.year_tit {
	font-size: 18px;
	padding-bottom: 3px;
	margin-bottom: 15px;
	border-bottom: 1px solid #555;
}
@media only screen and (min-width: 640px) {
.year_tit {
	font-size: 24px;
	padding-bottom: 5px;
	margin-bottom: 25px;
}
}

.works_set {
	margin-bottom: 30px;
}
/*.works_set:last-child {
	margin-bottom: 0;
}*/
.works_set_tit {
	font-size: 16px;
	margin-bottom: 10px;
}
@media only screen and (min-width: 640px) {
.works_set {
	margin-bottom: 60px;
}
.works_set_tit {
	font-size: 18px;
	margin-bottom: 15px;
}
}

.modal_wrap {
	display: flex;
	flex-wrap: wrap;
}
.modal_wrap .item {
	width: 32%;
	margin-left: 2%;
}
.modal_wrap .item:nth-child(3n+1) {
	margin-left: 0;
}
.modal_wrap .item:nth-child(n+4) {
	margin-top: 10px;
}
@media only screen and (min-width: 640px) {
.modal_wrap .item {
	width: 320px;
	margin-left: 20px;
}
.modal_wrap .item:nth-child(3n+1) {
	margin-left: 0;
}
.modal_wrap .item:nth-child(n+4) {
	margin-top: 20px;
}
}



/* =================================================================== 
 * style info : footer
 * =================================================================== */
.footer_nav {
	background: #eee;
	padding: 7px 0 7px;
}

.footer_nav ul {
	text-align: center;
}

.footer_nav ul li {
	display: inline;
	padding: 0 15px;
	font-size: 14px;
}
	
@media screen and (max-width: 680px) {
.footer_nav {
	background: #eee;
	padding: 0;
}

.footer_nav ul {
	text-align: center;
}

.footer_nav ul li {
	width: 50%;
	display: block;
	float: left;
	padding: 12px 20px 12px;
	font-size: 14px;
	border-bottom: 1px solid #ddd;
}
	
.footer_nav ul li:nth-child(odd) {
	border-right: 1px solid #ddd;
}

}
/*	footeer_add 
--------------------------------------*/
.footeer_add {
	background: #094e6f;
	padding: 40px 0 80px;
}
@media screen and (max-width: 768px) {
.footeer_add {
	background: #094e6f;
	padding: 40px 0 60px;
}
}
	
@media screen and (max-width: 680px) {
.footeer_add {
	background: #094e6f;
	padding: 30px 0 30px;
}
}

.footer_logo {
	text-align: center;
	margin-bottom: 45px;
}

.footeer_add ul {
	width: 50%;
	margin: 0 auto;
}

.footeer_add li {
	width: 50%;
	float: left;
	padding-left: 30px;
	font-size: 14px;
	color: #fff;
}

.footeer_add li h2 {
	margin-bottom: 15px;
}

.footeer_add li span {
	color: #fff;
}
@media screen and (max-width: 768px) {
.footeer_add ul {
	width: 90%;
	margin: 0 auto;
}

.footeer_add li {
	width: 50%;
	float: left;
	padding-left: 10px;
	font-size: 14px;
	color: #fff;
}
	
.footeer_add li a {
	color: #fff;
}
}
	
@media screen and (max-width: 680px) {
.footer_logo {
	margin-bottom: 25px;
}

.footeer_add ul {
	width: 100%;
	margin: 0 auto;
}

.footeer_add li {
	width: 100%;
	float: none;
	padding-left: 0;
	text-align: center;
}
	
.footeer_add li:first-child {
	margin-bottom: 25px;
}

.footeer_add li h2 {
	margin-bottom: 10px;
}
}
.copy {
	background: #444444;
	padding: 5px 0 5px;
	text-align: center;
	color: #fff;
	font-size: 13px;
}
#page-top {
    position: fixed;
    bottom: 180px;
    right: 20px;
    width: 130px;
	height: auto;
}
@media screen and (max-width: 768px) {
#page-top {
    position: fixed;
    bottom: 60px;
    right: 10px;
    width: 50px;
	height: auto;
}
}