/*	12 COLUMN : RESPONSIVE GRID SYSTEM
	DEVELOPER : DENIS LEBLANC
	URL : http://responsive.gs
	VERSION : 3.0
	LICENSE : GPL & MIT */


/* 	SET ALL ELEMENTS TO BOX-SIZING : BORDER-BOX */
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	*behavior: url(/scripts/boxsizing.htc);
	/*	If you need support for IE7 and lower make
		sure the boxsizing.htc file is linked properly.
		More info here:  https://github.com/Schepp/box-sizing-polyfill */
}


/*	MAIN CONTAINER
	Set the width to whatever you want the width of your site to be. */
.container {
	max-width: 960px;
	margin: 0 auto;
}



/*	SELF CLEARING FLOATS - CLEARFIX METHOD */
.container:after,
.row:after,
.col:after,
.clr:after,
.group:after {
	content: "";
	display: table;
	clear: both;
}

/* 	DEFAULT ROW STYLES
	Set bottom padding according to preference */
.row { padding-bottom: 0em;
}


/* DEFAULT COLUMN STYLES */
.col {
	display: block;
	float: left;
	width: 100%;
}

/*----------------------------------------------------
	#header（ヘッダー）
----------------------------------------------------*/

header a:link { text-decoration: none; none; color: #999999; }

header a:visited { text-decoration: none; none; color: #999999; }

header a:hover { text-decoration: underline; color: #ffa500; }

header a:active { text-decoration: underline; none; color: #855ebf; }

header ul.gnav-tooltips a:link { text-decoration: none; none; color: #4e4e4e; }

header ul.gnav-tooltips a:visited { text-decoration: none; none; color: #4e4e4e; }

header ul.gnav-tooltips a:hover { text-decoration: underline; color: #ffa500; }

header ul.gnav-tooltips a:active { text-decoration: underline; none; color: #855ebf; }

header {
	padding: 30px;
	color: #777;
}

header.row {
	padding-bottom: 20px;
}

header h1 {
	margin-bottom: 20px;
}

header nav ul li {
	float: left;
}

header nav ul li a {
	display: block;
	margin-right: 22px;
	margin-bottom :10px;
	font-weight: bold;
}

header nav ul li a.end {
	margin-right: 0px;
}

.header_bg {
	height:10px;
	border-top: 1px solid #b1b3b6;
	background: url(../img/header_bg.gif) top center repeat-x;
}

/*	tooltip menu */

#gnav li {
  position:relative;
}
ul.gnav-tooltips {
  display: none;
  position: absolute;
  z-index: 9999;
  padding: 0.5em 1em;
  color: #999999;
  border:1px solid #cccccc;
  background: #ffffff;
     filter:alpha(opacity=95);
     -moz-opacity:0.95;
     -khtml-opacity: 0.95;
     opacity:0.95;
     -webkit-border-radius: 0.5em;
     -moz-border-radius: 0.5em;
	border-radius: 0.5emx;
	-moz-box-shadow: 0 0 5px gray; /* Firefox */
    -webkit-box-shadow: 0 0 5px gray; /* Safari and Chrome */
    filter: progid:DXImageTransform.Microsoft.Shadow(color='#272229', Direction=90, Strength=2); /* IE */
    box-shadow: 0 0 5px gray; /* Browsers that Support it like Opera */
  width: 150px;
}
ul.gnav-tooltips ul.snav {
  margin-left: 1em;
}
ul.gnav-tooltips li {
  float: none;
  line-height: 150%;
  margin-bottom: 0.3em;
}
ul.gnav-tooltips li a {
	display: block;
	margin-right: 0px;
	margin-bottom :0px;
}
#gnav li:hover .gnav-tooltips {
  display: block;
}

/*----------------------------------------------------
	#main（メイン）
----------------------------------------------------*/

article {
}

aside {
}

article#read_area h1 {
	margin:20px 0 10px 30px;
}

article#cont_area {
	padding: 30px 30px 0px 30px;
}

article#cont_area_wide {
	padding: 30px 30px 0px 30px;
}

section#main_cont {
	padding: 0px 30px 0px 30px;
}

div#photo_area {
	width: 83.5%;
	margin: 0 auto 30px;
}

div#photo_area div div.col {
	margin-bottom: 1rem;
}

.cont_title {
	margin: 0px 30px 0px 30px;
	padding-bottom:3px;
	border-bottom: 1px solid #555555;
	font-size:116%;
	color: #555555;
}

.cont_title_shop {
	margin: 0 auto;
	font-size:116%;
	color: #555555;
}

.margin_0 {
	margin: 0px;
}

.noline {
	border: none;
}

article#image_area {
}

article#image_area div {
	text-align:center;
}

article#image_area ul {
	list-style-type:none;
}

article#image_area ul li {
	margin:0px 30px 20px 30px;
}

article#image_area ul li.no_margin_b {
	margin:0px 30px 0px 30px;
}

article#image_area ul li.mgn_tf_b20 {
	margin:0px 0px 20px 0px;
}

article#image_area ul li.end {
	margin:0px 30px 0px 30px;
}


/*	Mobile STYLES
2023.04.27追加 */

.mbcont_off{
	display:none;
}
.mbcont_on{
	display:block;
}


/*	main image Caption */

.cap_main_image_att {
position: relative;
top:10px;
left:30px;
overflow: hidden;
margin-right:30px;
}

.cap_main_image_brand {
position: relative;
top:10px;
left:10%;
overflow: hidden;
width: 80%;
}

#main_image {
	text-align:center;
}

article#cont_area_l div.two_stage {
	padding: 0 30px 30px 30px;
}

article#cont_area_r div.two_stage {
	padding: 0 30px 30px 30px;
}

article#cont_area_l div.two_stage_all {
	padding: 0 30px 30px 30px;
}

article#cont_area_r div.two_stage_all {
	padding: 0 30px 30px 30px;
}

#movie_area {
	text-align: center;
}

#movie_area div.youtube_movie {
	text-align: center;
	position: relative ;
	margin-top: 1.2em ;
	margin-bottom: 1.2em ;
	margin-left:auto;
	margin-right: auto;
	padding-top: 69px ;
	padding-bottom: 50% ;
	overflow: hidden ;
	width:80%;
}

#movie_area div.youtube_movie iframe {
	position: absolute ;
	top: 0 ;
	left: 0 ;
	height: 100% ;
	width: 100% ;
}

#cont_area_l div.youtube_movie,
#cont_area_r div.youtube_movie {
	text-align: center;
	position: relative ;
	margin-top: 0em ;
	margin-bottom: 0em ;
	margin-left:auto;
	margin-right: auto;
	padding-top: 69px ;
	padding-bottom: 50% ;
	overflow: hidden ;
	width:80%;
}

#cont_area_l div.youtube_movie iframe,
#cont_area_r div.youtube_movie iframe {
	position: absolute ;
	top: 0 ;
	left: 0 ;
	height: 100% ;
	width: 100% ;
}


/*Top */

/*slider */

div.bg_img {
    width: 80%;
        max-width: 740px;
    margin: 0 auto 0;
}

ul#slider {
	width:100%;
}
article#read_area div.bg_img ul#slider li {
	width:140px !important;
	margin-right: 10px;
}

/*News&Topics */

ul#news_topics {
	margin: 0px 30px 0px 30px;
	padding: 0px;
}

ul#news_topics li {
	padding: 8px 0px 8px 0px;
	line-height: 150%;
	border-bottom: 1px dotted #555555;
}

ul#news_topics li.news_topics_end {
	padding: 8px 0px 8px 0px;
	line-height: 150%;
	border-bottom: 1px solid #555555;
}

ul#news_topics ul.news_topics_sub li {
	padding: 0px;
	line-height: 150%;
	border-bottom: none;
}

/*attention
2023.04.27追加 */

#attention {
	padding: 0 30px 30px;
}

#attention h2 {
	font-size: 14px;
  font-size: 1.4rem;
  line-height: 1.6;
  font-weight: 600;
	color: rgba(177,1,39,1);
}

#attention p {
	line-height: 1.6;
}

#attention p.read {
	font-size: 10px;
  font-size: 1rem;
}

#attention div.inner {
	padding: 1rem;
	border: 1px solid rgba(128,128,128,1);
}

/*access_map
2023.04.27追加 */

div.access_map {
margin: 0 auto;
position: relative;
padding-bottom: 56.25%;
width: 90%;
height: 0;
overflow: hidden;
}

div.access_map iframe,
div.access_map object,
div.access_map embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}


/*Online Shop */

div.top_banner_area {
	width: 80%;
	margin: 0px auto 0px;
}

ul.top_banner {
	width: 100%;
    max-width: 415px;
	margin: 0px auto 0px;
}

ul.top_banner li {
	width: 100%;
	margin: 0px 0px 5px 0px;
}


/*	STORY */

/* 沿　革 */

dl.his_list dt {
float:left;
width:11em;
padding-top:10px;
padding-bottom:10px;
padding-right:0;
line-height: 200%;
}

dl.his_list dd {
padding-left:11em;
border-bottom:1px solid #999;
padding-top:10px;
padding-bottom:10px;
line-height: 200%;
}

dl.his_list dd.list_top{
padding-left:11em;
border-top:1px solid #999;
border-bottom:1px solid #999;
padding-top:10px;
padding-bottom:10px;
line-height: 200%;
}

/*	CONCEPT */

/* 製造への姿勢 */

article#cont_area_l div.two_stage .ceo {
	text-align: center;
	font-size:108%;
}

article#cont_area_r div.two_stage .ceo {
	text-align: center;
	font-size:108%;
}


/*	PRODUCTS */

/* 製造工程 */

p.cont_text span.process_title {
	font-weight: bold;
}


/* 製造体制 */

span.factory_name {
	font-size:123.1%;
	font-weight: bold;
}


/* ブランド */

article#cont_area_l  #product_brand,
article#cont_area_r  #product_brand,
article#cont_area_l  .product_brand,
article#cont_area_r  .product_brand  {
	padding: 0px 20px 10px 10px;
	border-right: 1px solid #999999;
	border-bottom: 1px solid #999999;
}

h2#brand_title {
	width:47%;
}

p#brand_photo {
	width:47%;
}

#main_image img.rogo {
	width: 80%;
}

#main_image img.rogo.logo_border {
	border: 1px solid rgba(128,128,128,1);
}

/*	STAFF */

/* スタッフメッセージ */

h1#sta_message_title {
	padding: 30px 0 30px 15px ;
	border-left:1px solid #999;
	font-size: 153.9%;
}

h2#sta_message_read {
	padding: 0px 0 30px 0px ;
	font-size: 138.5%;
	line-height: 200%;
}

article#image_area ul#side_nav li {
	float:left;
	margin:0px 0px 20px 30px;
}

article#image_area ul#side_nav li.end {
	float:left;
	margin:0px 30px 20px 30px;
}


/*	Company */

/* 会社概要 */

div#charter {
	padding: 30px 30px 20px 30px;
	background-color:#e0e0e0;
}

div#charter h2 {
	font-size: 138.5%;
	line-height: 200%;
	font-weight: bold;
}

div#charter ul {
	list-style: disc;
	margin-left:20px;
}

div#charter ul li {
	font-size: 116%;
	line-height: 200%;
	font-weight: bold;
}

dl.com_list dt {
float:left;
width:8em;
font-size: 108%;
padding-top:5px;
padding-bottom:5px;
padding-right:0;
line-height: 120%;
}

dl.com_list dd {
margin-left:8em;
font-size: 108%;
padding-top:5px;
padding-bottom:5px;
line-height: 120%;
}

div.tokyo_office {
	width: 75%;
	margin: 0 auto 30px;
}

section#organization_chart {
	width: 80%;
	margin: 30px auto;
}


/* 地域貢献活動 */

article#cont_area_l div.two_stage .lca {
	text-align: center;
	font-size:108%;
}

article#cont_area_r div.two_stage .lca {
	text-align: center;
	font-size:108%;
}

article#cont_area_r p.lca_youtube_caption {
	text-align: center;
	font-size:108%;
	margin-top: 10px;
}

/*	Online Shop */

ul#online_shop_banner li {
		margin-bottom: 30px;
		text-align: center;
}

ul#online_shop_banner li.list_end {
		margin-bottom: 60px;
		text-align: center;
}


/*	Contact US */

/* 電話*/

span.contact_tell01 {
	font-size: 197%;
	vertical-align:middle;
	white-space: nowrap;
}

span.contact_tell02 {
	position: relative;
	left :0;
}

span.text_nowrap {
	white-space: nowrap;
}

/* メールフォーム*/

/* spec_table */
table#contact_us_form{
	margin:0px auto 0px;
	width:100%;
	border-collapse:collapse;
	border:0px;
}
table#contact_us_form tr {
	padding:0;
}
table#contact_us_form caption{
	margin-bottom:5px;
	color:#4b4b4b;
}
table#contact_us_form th{
	font-size:108%;
	padding:15px;
	background:#cccccc;
	vertical-align:top;
	text-align:left;
	font-weight:bold;
	border:1px solid #a8a8a8;
	border-right: none;
	color:#4b4b4b;
	vertical-align: middle;
}
table#contact_us_form td{
	font-size:93%;
	padding:10px;
	background:#fff;
	vertical-align:top;
	text-align:left;
	font-weight:normal;
	border:1px solid #a8a8a8;
	border-left: none;
	color:#4b4b4b;
	vertical-align: middle;
}
.input_size {
	width:100%;
}
.width_35 {
	width: 35%;
}
.width_65 {
	width: 65%;
}
td textarea {
	border:1px solid #a8a8a8;
}
.indispensable {
	color: #bd0404;
}
input.image_btn {
	width: 200px;
	height: 40px;
	margin: 10px 10px 0px 0px;
    border: 0px;
	background: url(../contact/img/btn_bg.png) left top no-repeat;
	color: #ffffff;
	cursor:pointer;
}


/* /spec_table */



/*----------------------------------------------------
	#footer（フッター）
----------------------------------------------------*/

footer {
}




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

	.gutters .col {
		margin-left: 2%;
	}

	.gutters .col:first-child {
		margin-left: 0;
	}

}




/*	COLUMN WIDTH ON DISPLAYS +768px
	You might need to play with media queries here to suite your design. */
@media ( min-width : 768px ) {
	.span_1 { width: 8.33333333333%; }
	.span_2 { width: 16.6666666667%; }
	.span_3 { width: 25%; }
	.span_4 { width: 33.3333333333%; }
	.span_5 { width: 41.6666666667%; }
	.span_6 { width: 50%; }
	.span_7 { width: 58.3333333333%; }
	.span_8 { width: 66.6666666667%; }
	.span_9 { width: 75%; }
	.span_10 { width: 83.3333333333%; }
	.span_11 { width: 91.6666666667%; }
	.span_12 { width: 100%; }

	.gutters .span_1 { width: 6.5%; }
	.gutters .span_2 { width: 15.0%; }
	.gutters .span_3 { width: 23.5%; }
	.gutters .span_4 { width: 32.0%; }
	.gutters .span_5 { width: 40.5%; }
	.gutters .span_6 { width: 49.0%; }
	.gutters .span_7 { width: 57.5%; }
	.gutters .span_8 { width: 66.0%; }
	.gutters .span_9 { width: 74.5%; }
	.gutters .span_10 { width: 83.0%; }
	.gutters .span_11 { width: 91.5%; }
	.gutters .span_12 { width: 100%; }

/*----------------------------------------------------
	#page（ページ全体）
----------------------------------------------------*/

div.container {
	margin-top: 0px;
}

.align_right_wide {
text-align: right;
margin-right: auto;
}

/*	main image Caption */

.cap_main_image_his {
position: relative;
top:10px;
left:78%;
overflow: hidden;
}

.cap_main_image_att {
position: relative;
top:10px;
left:8.8%;
overflow: hidden;
margin-right:8.8%;
}

.cap_main_image_proce {
position: relative;
top:10px;
left:8.8%;
overflow: hidden;
}

/*----------------------------------------------------
	#header（ヘッダー）
----------------------------------------------------*/

header h1 {
	float: left;
	margin-bottom:0px ;
}

header nav {
	float: right;
	margin-top: 30px;
}

header nav ul li {
}

header nav ul li a {
}

/*----------------------------------------------------
	#main（メイン）
----------------------------------------------------*/

#main_image {
	text-align:center;
}

section#main_cont {
	padding: 0px 80px 0px 80px;
	text-align: center;
}

article#read_area h1 {
	margin:35px 0 30px 80px ;
}

.cont_title {
	margin: 0px 80px 0px 80px;
}

.con_title_top {
	margin: 0px 30px 0px 30px;
}

.margin_0 {
	margin: 0px;
}

article#cont_area {
	padding: 30px 0px 30px 80px;
}

article#cont_area_wide {
	padding: 30px 80px 0px 80px;
}

article#cont_area_l {
	padding: 0px 0px 30px 80px;
}

article#cont_area_r {
	padding: 0px 80px 30px 0px;
}

article#cont_area_l div.two_stage_all,
article#cont_area_r div.two_stage_all {
	width:100%;
	padding:0;
}

article#cont_area_l div.two_stage,
article#cont_area_r div.two_stage {
	width:95%;
	padding:0;
}

article#cont_area_l div.two_stage,
article#cont_area_r div.two_stage {
	width:95%;
	padding:0;
}

article#cont_area_l div.two_stage {
	margin-right: auto;
}

article#cont_area_r div.two_stage {
	margin-left: auto;
}


#movie_area div.youtube_movie {
	text-align: center;
	position: relative ;
	margin-top: 1.2em ;
	margin-bottom: 1.2em ;
	margin-left:auto;
	margin-right: auto;
	padding-top: 69px ;
	padding-bottom: 50% ;
	overflow: hidden ;
	width: 70%;
	height: 70%;
}

#movie_area div.youtube_movie iframe {
	position: absolute ;
	top: 0 ;
	left: 0 ;
	height: 70% ;
	width: 100% ;
}

#cont_area_l div.youtube_movie,
#cont_area_r div.youtube_movie {
	text-align: center;
	position: relative ;
	margin-top: 0em ;
	margin-bottom: 0em ;
	margin-left:auto;
	margin-right: 0;
	padding-top: 69px ;
	padding-bottom: 50% ;
	overflow: hidden ;
	width: 95%;
	height: 95%;
}

/*	Mobile STYLES
2023.04.27追加 */

.mbcont_off{
	display:block;
}
.mbcont_on{
	display:none;
}

/*Top */

/*	access map
2023.04.27追加 */

div.access_map {
position: relative;
padding-bottom: 100.25%;
width: 100%;
height: 0;
overflow: hidden;
}


/*Online Shop */


/*	STORY */

article#image_area {
	padding: 30px 80px 0px 0px;
}

article#image_area ul li {
	margin:0px 0px 20px 0px;
}

article#image_area ul li.no_margin_b {
	margin:0px;
}

article#image_area ul li.mgn_tf_b20 {
	margin:0px;
}

article#image_area ul#bottom_image {
	margin: 0 0px 0 90px;
}
article#image_area ul#bottom_image li {
	margin-right: 30px;
	width:30.7%;
	float: left;
}

article#image_area ul li.end {
	margin:0px;
}

article#image_area ul#bottom_image li.end {
	margin-right: 0px;
}

/*	CONCEPT */

/* 製造への姿勢 */


/*	STAFF */

/* スタッフメッセージ */

article#image_area ul#side_nav li {
	float:none;
	margin:0px 0px 20px 0px;
}

article#image_area ul#side_nav li.end {
	float:none;
	margin:0px;
}

/*	PRODUCTS */

/* ブランド */

#main_image img.rogo {
	width: 100%;
	max-width: 570px;
}

.cap_main_image_brand {
position: relative;
top:10px;
left:20%;
overflow: hidden;
width: 60%;
}




}