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

/*

layout_index.css - global style sheet for San-ai Ginza website.

-----History----------------------------------------------------------------------------------------
	2021/03/30 ver1.1
----------------------------------------------------------------------------------------------------
*/


body {
	background:#fafafa;
	color:#333333;
}

.mB30{
	margin-bottom:30px;
}

p{margin-bottom:20px;}
p.right{text-align:right;}
p.small{font-size: 11px; font-size: 1.1rem;}


@font-face {
  font-family: 'fsc';
  src: url('../font/fsc.eot?66901521');
  src: url('../font/fsc.eot?66901521#iefix') format('embedded-opentype'),
       url('../font/fsc.woff?66901521') format('woff'),
       url('../font/fsc.ttf?66901521') format('truetype'),
       url('../font/fsc.svg?66901521#out') format('svg');
  font-weight: normal;
  font-style: normal;
}

.pdfDownload{
	background:url(../images/base/reader.png) no-repeat 20px 20px #f3f3f3;
	padding:20px 20px 20px 120px;
	font-size: 11px; font-size: 1.1rem;
}


#page-top {
	position: fixed;
	bottom: 0px;
	right: 15px;
	opacity:0.7;
	filter: alpha(opacity=70);        /* ie lt 8 */
	-ms-filter: "alpha(opacity=10)";  /* ie 8 */
	-moz-opacity:0.7;                 /* FF lt 1.5, Netscape */
	-khtml-opacity: 0.7;              /* Safari 1.x */
}
#page-top a {
	font-size: 8px; font-size: 0.8rem;
	background: #666;
	text-decoration: none;
	color: #fff;
	padding: 5px 10px;
	text-align: center;
	display: block;
	border-radius: 5px;
	margin-bottom:0px;
}

#page-top a:before {
	content:"t";
	font-family: 'fsc';
	display:block;
	font-size:40px;
	padding:5px 0;
	font-weight:100;
	line-height:1em;
}

#page-top a:hover {
	text-decoration: none;
	background: #999;
}

ol.number{
	margin:10px 0 30px 0;
}

ol.number li{
	list-style-type:decimal !important;
	margin:5px 0 5px 30px;
}




/* titleArea
--------------------------------------------------------------------------------------------------------------------*/


.titleArea{
	background:#9dcec9;
	padding:10px 0 5px 0;
}


.titleArea .inner{
	position: relative;
}


.titleArea nav{
	position:absolute;
	right:0px;
	top:30px;
}


.titleArea nav li{
	float:left;
	font-size: 14px; font-size: 1.4rem;
	letter-spacing: 0.05px; letter-spacing: 0.05rem;
	margin-right:5px;
	font-family: 'Meiryo', 'ＭＳ Ｐゴシック', 'Hiragino Kaku Gothic Pro', 'Osaka', helvetica, sans-serif ;
	font-weight:lighter;
}

.titleArea nav li last-child{
	margin-right:0px;
}

.titleArea nav li.active{
	background:#fff;
	border-color:#fff;
	padding:10px;
	color:#08c4ae;
	-webkit-border-radius: 5px;     /* for Safari and Chrome */
	-moz-border-radius: 5px;    /* for Firefox */
	-o-border-radius: 5px;  /* when Opera Presto 2.3 or later is released */
	-khtml-border-radius:5px;   /* Linux browsers */
	border-radius: 5px;     /* CSS3 */
	behavior: url(border-radius.htc);   /* for IE */
}

.titleArea nav li a{
	padding:10px;
	display:block;
	color:#fff;
	text-decoration:none;
}


.titleArea nav li a:hover{
	background:#fff;
	border-color:#fff;
	border-color:#fff;
	padding:10px;
	color:#08c4ae;
	-webkit-border-radius: 5px;     /* for Safari and Chrome */
	-moz-border-radius: 5px;    /* for Firefox */
	-o-border-radius: 5px;  /* when Opera Presto 2.3 or later is released */
	-khtml-border-radius:5px;   /* Linux browsers */
	border-radius: 5px;     /* CSS3 */
	behavior: url(border-radius.htc);   /* for IE */
}



/* layout
--------------------------------------------------------------------------------------------------------------------*/


.mainInner{
	padding-top:30px;
	font-family: 'Meiryo', 'ＭＳ Ｐゴシック', 'Hiragino Kaku Gothic Pro', 'Osaka', helvetica, sans-serif ;
	font-size: 14px; font-size: 1.4rem;
	letter-spacing: 0.2em; letter-spacing: 0.1rem;
	line-height:1.7em;line-height:2.5rem;
}


.leftArea{
	float:left;
	width:250px;
	font-family: "ヒラギノ丸ゴ Pro W4","Hiragino Maru Gothic Pro",'Meiryo', 'ＭＳ Ｐゴシック', 'Hiragino Kaku Gothic Pro', 'Osaka', helvetica, sans-serif ;
}

.rightArea{
	float:right;
	width:670px;
}



.singleColumn{
	width:820px;
	margin:0 auto;
	padding:20px 0 0 0 ;
}



.mainInner h2{
	margin-bottom:20px;
}

.mainInner h2{
	margin-bottom:30px;
	font-family: "ヒラギノ丸ゴ Pro W4","Hiragino Maru Gothic Pro",'Meiryo', 'ＭＳ Ｐゴシック', 'Hiragino Kaku Gothic Pro', 'Osaka', helvetica, sans-serif ;
	font-size: 24px; font-size: 2.4rem;
	line-height:28px;
}

.mainInner h3{
	font-size: 24px; font-size: 2.4rem;
	font-family: "ヒラギノ丸ゴ Pro W4","Hiragino Maru Gothic Pro",'Meiryo', 'ＭＳ Ｐゴシック', 'Hiragino Kaku Gothic Pro', 'Osaka', helvetica, sans-serif ;
	font-weight:lighter;
	margin:40px 0 10px 0;
	border-bottom:1px solid #9f9f9f;
	padding-bottom:5px;
}

.mainInner h4{
	font-size: 14px; font-size: 1.4rem;
	font-family: "ヒラギノ丸ゴ Pro W4","Hiragino Maru Gothic Pro",'Meiryo', 'ＭＳ Ｐゴシック', 'Hiragino Kaku Gothic Pro', 'Osaka', helvetica, sans-serif ;
	font-weight:lighter;
	padding-bottom:5px;
}


.mainInner .noDecolation{
	border:none;
}



.rightContents small{
	font-size: 11px; font-size: 1.1rem;
	display:block;
}


.mainInner a[href$=".pdf"]:after{
	font-family: 'fsc';
	content: ' p';
	color:#C30;
}

a.blank:after{
	font-family: 'fsc';
	content: ' b';
	color:#00a592;
}




/* table
--------------------------------------------------------------------------------------------------------------------*/

table{
	width:100%;
}

table td,table th{
	border-bottom:1px dotted #bdc0c1;
}

table td{
	padding:15px 0 15px 10px;
}

table th{
	padding:15px 10px 15px 0;
	text-align:center;
	color:#989898;
	font-weight:lighter;
	vertical-align: middle;
}



.grayBox{
	background:#ececec;
	padding:20px 20px 5px 20px;
	margin-bottom:20px;
}


.grayBox p{
	font-size: 11px; font-size: 1.1rem;
	line-height:1.5em;
}

#privacy table th{
	width: 25%;
	text-align: left;
}





/* companyIndex
--------------------------------------------------------------------------------------------------------------------*/


#companyIndex .message{
	margin:10px 0 0 0;
	border-top:solid 1px #979797;
	padding-top:30px;
	background: url(../images/company/index/img02.png) no-repeat right -1px;
	padding-right:120px;
}


#companyIndex .leftArea p.name{
	display:block;
	background:url(../images/company/index/img03.png) no-repeat right 3px;
}

#companyIndex .leftArea p.name span{
	display:block;
	font-size: 11px; font-size: 1.1rem;
	line-height:0.7em;
	padding-top:10px;
}


/* companyOutline
--------------------------------------------------------------------------------------------------------------------*/

#companyOutline .map{
	margin-bottom:20px;
}


#companyOutline .map:last-child{
	border-top:1px dotted #bdc0c1;
	padding-top:20px;
}

#companyOutline .yakuinTd span{
	width:11em;
	display:inline-block;
    *display: inline;
    *zoom: 1;
}

/* company history
--------------------------------------------------------------------------------------------------------------------*/

#companyHistory .historyWrapper{
	background:url(../images/company/history/bg_tl.png) repeat-y 120px;
}


#companyHistory .yearblock {
	margin: 0 0 0 0;
}

#companyHistory .yearblock .left {
	width: 110px;
	height: 26px;
	margin: 0 0 0 0;
	padding: 10px 0 0 0;
	background: url(../images/company/history/blowoff.png) top left no-repeat;
	text-align: center;
	font-family: "ヒラギノ丸ゴ Pro W4","Hiragino Maru Gothic Pro",'Meiryo', 'ＭＳ Ｐゴシック', 'Hiragino Kaku Gothic Pro', 'Osaka', helvetica, sans-serif ;
	font-size: 16px; font-size: 1.6rem;
	color: #fff;
	line-height:1.3em;
	float:left;
}

#companyHistory .yearblock .right{
	float:left;
	width:660px;
	margin-left:10px;
	margin-top:-10px;
}

#companyHistory .yearblock .right ul {
	margin: 20px 0 30px 0;
}

#companyHistory .yearblock .right li {
	margin: 0 0 0 0;
	padding: 0 0 0 34px;
	background: url(../images/company/history/list_mark.png) 0px 2px no-repeat;
}

#companyHistory .yearblock .right li span {
	float: left;
	width: 50px;
	color: #a2aeb0;
	display:block;
	white-space: nowrap;
}

#companyHistory .yearblock .right li p {
	float: left;
	width: 560px;
	margin: 0 0 20px 0;
}




/* companyPhilosophy
--------------------------------------------------------------------------------------------------------------------*/

#companyPhilosophy .singleColumn p{
	padding-left:20px;
}










/* business index
--------------------------------------------------------------------------------------------------------------------*/


#businessIndex .singleColumn{
	text-align:center;
}


#businessIndex .singleColumn img.obj01{
	margin:0 0 10px 0;
}

#businessIndex .singleColumn h2.second{
	margin-top:60px;
}


#businessIndex .singleColumn .outline h3{
	margin:0 0 10px 0;
	padding-bottom:0px;
	line-height:0px;
	border:none;
}

#businessIndex .singleColumn ul.outline{
	margin-bottom:30px;
}

#businessIndex .singleColumn ul.outline li{
	width:255px;
	float:left;
	font-size: 12px; font-size: 1.2rem;
	line-height:1.5em;
	color:#667174;
}

#businessIndex .singleColumn ul.outline img{
	margin-bottom:10px;
}


#businessIndex .singleColumn ul.outline li:nth-child(2){
	margin:0 25px;
}



.singleColumn .outlineDetail{
	margin-bottom:30px;
	position: relative;
	background:#fff;
	border:1px solid #CCC;
	padding:40px 20px 20px 20px;
	-webkit-border-radius: 5px;     /* for Safari and Chrome */
	-moz-border-radius: 5px;    /* for Firefox */
	-o-border-radius: 5px;  /* when Opera Presto 2.3 or later is released */
	-khtml-border-radius:5px;   /* Linux browsers */
	border-radius: 5px;     /* CSS3 */
	behavior: url(border-radius.htc);   /* for IE */
	margin-top:-10px;
}


.singleColumn .outlineDetail li{
	width:360px;
	float:left;
	font-size: 12px; font-size: 1.2rem;
	line-height:1.5em;
	position:relative;
	padding:0 20px 0 0;
}

.singleColumn .outlineDetail li:nth-child(2){
	margin-right:none;
	width:359px;
	padding:0 0 0 20px;
	border-left:solid 1px #d0d7d9;
}

.singleColumn .outlineDetail li .obj{
	float:left;
	width:100px;
}

.singleColumn .outlineDetail li .inner{
	float:left;
	width:229px;
	text-align:left;
	padding-left:30px;
}



/* businessService
--------------------------------------------------------------------------------------------------------------------*/


#businessService .singleColumn{
	text-align:center;
}

#businessService .singleColumn .outlineDetail li .obj{
	float:left;
	width:127px;
}

#businessService .singleColumn .outlineDetail li .inner{
	float:left;
	width:200px;
	text-align:left;
	padding-left:0px;
}


#businessService  .outlineDetail li .inner{
	text-align:left;
	float:right;
	width:220px;
	margin-left:10px;
}

#businessService  .outlineDetail li img.obj{
	margin-top:-10px;
	padding-bottom:40px;
}




#businessService .outlineDetail li a{
	position:absolute;
	bottom:0px;
	display:block;
	width:339px;

	background-color:#f39c12;
	padding:20px 10px;
	font-size: 14px; font-size: 1.4rem;
	text-decoration:none;
	border:#f39c12;
	-webkit-border-radius: 5px;     /* for Safari and Chrome */
	-moz-border-radius: 5px;    /* for Firefox */
	-o-border-radius: 5px;  /* when Opera Presto 2.3 or later is released */
	-khtml-border-radius:5px;   /* Linux browsers */
	border-radius: 5px;     /* CSS3 */
	color:#FFF;
}

#businessService .outlineDetail li a:hover{
	color:#fff;
}

#businessService .outlineDetail li.bl-hover a{
	text-decoration:underline;
}


#businessService .outlineDetail li a{
	background-color:#f39c12;
	background-image: url(../images/base/blank.png);
	background-repeat:no-repeat;
	background-position:330px 20px;
}
/* modal
--------------------------------------------------------------------------------------------------------------------*/

html.modalset {
	overflow-y: hidden;
}

.modal {
	display: none;
	width: 100%;
	height: 100vh;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 9999;
}

.modal-wrap {
	width: 100%;
	height: 100%;
	text-align: center;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	-ms-overflow-style: none;
	overflow: -moz-scrollbars-none;
	white-space: nowrap;
}

.modal-wrap::-webkit-scrollbar {
	display: none;
}

.modal-wrap:after {
	content: '';
	display: inline-block;
	vertical-align: middle;
	width: 1px;
	height: 100%;
}

.modal-bg {
	position: absolute;
	left: 0;
	top: 0;
	background: rgba(0, 0, 0, 0.2);
	width: 100%;
	height: 100%;
}

.modal-open{
	cursor: pointer;
}

.modal-box {
	display: inline-block;
	vertical-align: middle;
	position: relative;
	background: rgba(0, 0, 0, 0.75);
	padding: 40px 40px 25px;
	border-radius: 16px;
}

.modal-box .logo {
	padding-bottom: 45px;
}

.modal-box .service-list {
	display: flex;
}

.modal-box .service-list li+li {
	margin-left: 45px;
}

.modal-box .modal-close {
	color: #FFF;
	font-size: 14px;
	cursor: pointer;
	display: inline-block;
	padding-top: 20px;
}

.modal-box .modal-close::before {
	content: url(../images/business/index/icon_close.png);
	width: 19px;
	height: 19px;
	padding-right: 9px;
	position: relative;
	top: 5px;
}

/* news
--------------------------------------------------------------------------------------------------------------------*/



#news .mainInner{
	background:url(../images/news/line.png) repeat-y 250px;
}


.subMenu li{
	font-size: 15px; font-size: 1.5rem;
	margin-bottom:15px;
	text-decoration:none;
	display:block;
}

.subMenu li a{
	color:#b2bbbd;
}

.subMenu li.active a,
.subMenu li a:hover{
	color:#08c4ae;
	text-decoration:none;
}





.newsList{
	margin-bottom:60px;
}

.newsList li{
	border-bottom:1px solid #dedede;
	padding-bottom:20px;
	margin-bottom:20px;
}

.newsList li:last-child{
	margin-bottom:0px;
	padding-bottom:0px;
	border:none;
}

.newsList li span{
	width:140px;
	float:left;
	color:#a0a0a0;
}


.newsList li a{
	width:500px;
	float:left;
}

#news .rightArea .newsTitle{
	font-size: 20px; font-size: 2.0rem;
	font-family: "ヒラギノ丸ゴ Pro W4","Hiragino Maru Gothic Pro",'Meiryo', 'ＭＳ Ｐゴシック', 'Hiragino Kaku Gothic Pro', 'Osaka', helvetica, sans-serif ;
	margin-bottom:10px;
	border:none;
	margin-top:0px;
}


#news .rightArea .date{
	font-size: 11px; font-size: 1.1rem;
	border-bottom:#999 solid 1px;
	padding-bottom:10px;
	margin-bottom:20px;
	display:block;
}



/* recruit
--------------------------------------------------------------------------------------------------------------------*/

#recruit .rightArea h2{
	padding-top:85px;
	margin-bottom:0px;
    clear: both;
}

#recruit .rightArea h2#shinsotsu{
	margin-top:-85px;
}

#recruit .rightArea dl{
	clear:both;
}

#recruit .rightArea dt{
	font-size: 12px; font-size: 1.2rem;
	background:url(../images/base/line_sub.png) no-repeat left 10px;
	padding-left:15px;
}

#recruit .rightArea dd{
	padding-left:15px;
	margin-bottom:15px;
}

#recruit .rightArea .small{
	line-height:1.5em;
	padding-left:15px;
}

#recruit .grayBox{
	position: relative;
}
#recruit .grayBox .green_bnr{
	position: absolute;
	right: 25px;
	top: 25px;
}



/* contact
--------------------------------------------------------------------------------------------------------------------*/

#contact .singleColumn .policy{
	height:160px;
	overflow:auto;
	background:#ececec;
	padding:10px 20px;
	margin-bottom:10px;
}

#contact .singleColumn .policy h3{
	font-size: 16px; font-size: 1.6rem;
	margin-bottom:5px;
}

.ness{
	color:#da8517;
	font-size: 11px; font-size: 1.1rem;
}

input[type="text"]{
	padding:5px;
	font-size: 14px; font-size: 1.4rem;
	-webkit-border-radius: 5px;     /* for Safari and Chrome */
	-moz-border-radius: 5px;    /* for Firefox */
	-o-border-radius: 5px;  /* when Opera Presto 2.3 or later is released */
	-khtml-border-radius:5px;   /* Linux browsers */
	border-radius: 5px;     /* CSS3 */
	behavior: url(border-radius.htc);   /* for IE */
	border:#e5e5e5 solid 1px;
	margin:0 15px 0 3px;
}

textarea{
	padding:5px;
	font-size: 14px; font-size: 1.4rem;
	-webkit-border-radius: 5px;     /* for Safari and Chrome */
	-moz-border-radius: 5px;    /* for Firefox */
	-o-border-radius: 5px;  /* when Opera Presto 2.3 or later is released */
	-khtml-border-radius:5px;   /* Linux browsers */
	border-radius: 5px;     /* CSS3 */
	behavior: url(border-radius.htc);   /* for IE */
	border:#e5e5e5 solid 1px;
}


select {
	font-size: 14px; font-size: 1.4rem;
	padding: 5px;
	border:#e5e5e5 solid 1px;
	background: #fff;

}



.form-buttons {
	padding: 30px 0 13px 0;
	text-align: center;
}

.form-buttons input,
.form-buttons button {
	-webkit-border-radius: 5px;     /* for Safari and Chrome */
	-moz-border-radius: 5px;    /* for Firefox */
	-o-border-radius: 5px;  /* when Opera Presto 2.3 or later is released */
	-khtml-border-radius:5px;   /* Linux browsers */
	border-radius: 5px;     /* CSS3 */
	border: none;
	behavior: url(border-radius.htc);   /* for IE */
	width: 230px;
	height: 50px;
	background-color: #a5a9ac;
	font-size: 120%;
	color: #fff;
	margin: 0 10px 0 0;
}

.form-buttons input.submit {
	background-color: #f39c12;
}



.color_red{
	background:#ffecec;
	padding:20px;
	color:#cc3e3e;
}


/* sitemap
--------------------------------------------------------------------------------------------------------------------*/

#sitemap .singleColumn{
	background:url(../images/sitemap/bg.png) center no-repeat;
}

#sitemap .singleColumn a{
	text-decoration:none;
}

#sitemap .singleColumn h3{
	font-size: 17px; font-size: 1.7rem;
	border-top:1px dotted #bdc0c1;
	border-bottom:none;
	margin: 0 0 0 0;
	padding:15px 0  10px 0;

}


#sitemap .singleColumn ul{
	margin-bottom:15px;
	padding-left:20px;
}

#sitemap .singleColumn .leftColumn{
	float:left;
	width:350px;
}

#sitemap .singleColumn .rightColumn{
	float:right;
	width:350px;
}