/****************************************

		基本

*****************************************/

@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);

section , article , footer , aside { display:block; }

* {
    margin:0;
	padding:0;
	border:none;
	list-style:none;
	text-decoration:none;
}

body {
	background:#fff;
	letter-spacing:1px;
	font:18px/1.8 'Noto Sans JP',"メイリオ","Meiryo","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","Osaka","ＭＳ Ｐゴシック","MS PGothic",Sans-Serif,"verdana";
	color: #333;
}

.wrap {
    overflow: hidden;
}

a {
    color: #7F283C;
    text-decoration: none;
}

.aright {
    text-align: right;
}
.aleft {
    text-align: left;
}
.acenter {
    text-align:center;
}
.acenter2 {
    display: block;
    width: 200px;
    margin: auto;
}

.clear {
    clear: both;
}

#hamburger {
    display: none;
}


/****************************************

		ヘッダーフッター

*****************************************/

/* ロゴ */
.logo {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 101;
}
.logo img {
    height: 40px;
}

/* ヘッダー */
nav {
    position: relative;
    height: 80px;
    margin: 10px ;
    text-align: right;
    font-size: 16px;
    font-weight: 500;
    z-index: 100;
}

nav a {
    position: relative;
    top: 15px;
    margin: 0 30px 0 0;
    transition: 0.2s linear;
    color: #fff
}
nav a:hover {
    opacity: 0.5;
}

.about nav a, .service nav a, .company nav a {
    color: #000;
}

/* フッター */
#f_navi {
    padding: 0 0 20px 0;
    text-align: center;
}
#f_navi a {
    padding: 0 30px 0 30px;
    color: #333;
    font-size: 16px;
    background: url(../images/polygon.png) no-repeat right;
    background-size: 6px;
}
#f_navi a:last-child {
    background: none;
}

footer {
    padding: 45px 0 5px 0;
    background: #333;
    text-align: center;
}

footer img {
    width: 50px;
}
footer img.tomirai {
    width: auto;
    height: 35px;
}

footer span {
    display: inline-block;
    margin: 0 0 40px 0;
    color: #fff;
    font-family: serif;
    font-size: 18px;
}
footer p {
    margin: 0 0 40px 0;
    color: #999;
    font-size: 18px;
    line-height: 35px;
}
footer div {
    color: #999;
    font-size: 12px;
}

#page-top a {
    display: inline-block;
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 40px;
    line-height: 40px;
    background: #f5f5f5;
    border-radius: 3px;
    text-align: center;
    font-size: 20px;
    color: #7F283C;
    transition: 0.3s linear;
}
#page-top a:hover {
    bottom: 30px;
}



/****************************************

		トップページ

*****************************************/

/* メインビジュアル */
#mainvisual {
    position: relative;
    width: 100%;
    min-height: 640px;
    margin: -100px 0 0 0;
    background: url(../images/main.jpg) no-repeat;
    background-size: cover;
}

#mainvisual h1 {
    position: relative;
    top: 170px;
    left: 90px;
    font-family: serif;
    font-weight: 400;
    font-size: 36px;
}
#mainvisual h1 span {
    display: block;
    position: relative;
    top: 10px;
    left: 500px;
    font-size: 24px;
    transition: 0.3s linear;
}
#mainvisual h1 span a {
    color: #333;
}
#mainvisual h1 span:hover {
    left: 510px;
}

#mainvisual h1 br {
    display:none;
}

#mainvisual #mv-navi {
    position: absolute;
    bottom: 20px;
    width: 100%;
    text-align: center;
}

#mainvisual #mv-navi a {
    display: inline-block;
    min-width: 23%;
    height: 45px;
    margin: 0 1%;
    padding: 15px 0 0 0;
    background: #fff;
    border-radius: 3px;
    opacity: 0.9;
    text-align: center;
    font-size: 15px;
    font-family: serif;
    line-height: 1.2;
    color: #000;
    transition: 0.2s linear;
}
#mainvisual #mv-navi a:hover {
    opacity: 0.8;
}
#mainvisual #mv-navi a span {
    display: block;
    font-size: 11px;
    font-family: sans-serif;
    color: #7F283C;
}

/* YBSホールディングスについて */
#top_about, #top_company {
    position: relative;
    margin: 0 8% 30px 8%;
}

#top_about h1, #top_company h1 {
    position: relative;
    height: 200px;
    margin: 0 0 40px 0;
    background: url(../images/headline.png) no-repeat;
    background-position: bottom left;
    font-family: serif;
    font-weight: 400;
}
#top_about h1 div, #top_company h1 div {
    position: absolute;
    top: 100px;
    left: 50px;
    font-size: 28px;
    z-index: 100;
}
#top_about h1 span, #top_company h1 span {
    position: absolute;
    top: 0;
    display: block;
    font-size: 110px;
    color: #f5f5f5;
}

#top_about #right {
    position: absolute;
    right: 0;
    top: 140px;
}

#top_about #text {
    width: calc(100% - 500px);
    margin: 0 0 0 100px;
}
#top_about #text h2 {
    margin: 0 0 30px 0;
    font-size: 20px;
    font-family: serif;
    font-weight: bold;
}

.link a {
    display: inline-block;
    width: 200px;
    margin: 40px 0;
    line-height: 40px;
    border-radius: 3px;
    background: #7F283C;
    text-align: center;
    font-size: 13px;
    color: #fff;
    transition: 0.2s linear;
}
.link a:hover {
    background: #A04E61;
}

/* 事業内容 */
#top_service {
    position: relative;
    margin: 0;
    padding: 0 8%;
    height: 480px;
    background: #F5F5F5;
}

#top_service h1 {
    position: relative;
    height: 200px;
    margin: 0 0 40px 0;
    background: url(../images/headline2.png) no-repeat;
    background-position: bottom right;
    font-family: serif;
    font-weight: 400;
}
#top_service h1 div {
    position: absolute;
    top: 100px;
    right: 0px;
    font-size: 28px;
    z-index: 100;
}
#top_service h1 span {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    font-size: 110px;
    color: #fff;
}

#top_service #left {
    position: absolute;
    left: 8%;
    top: 140px;
}

#top_service #text {
    position: absolute;
    top: 240px;
    right: 8%;
    width: 45%;
}

#top_service .link a {
    position: absolute;
    right: 0;
}

/* 会社案内 */
.table {
    display: flex;
	flex-wrap: wrap;
	align-items: stretch;	
	width: 90%;
    margin: 0 0 0 90px;
}
.table dt {
	padding: 20px 10px;
	width: 200px;
	border-bottom: 1px solid #eee;
    font-weight: 700;
}
.table dd {
	padding: 20px 10px;
	width: calc(100% - 250px);
	border-bottom: 1px solid #eee;
}





/****************************************

		個別ページ

*****************************************/

/* 下層共通 */
#under_head {
    position: relative;
}

#under_head h1 {
    position: relative;
    height: 250px;
    margin: 0 0 0 5%;
    font-family: serif;
    font-weight: 400;
}
#under_head h1 div {
    position: absolute;
    top: 100px;
    left: 50px;
    font-size: 28px;
    z-index: 100;
}
#under_head h1 span {
    position: absolute;
    top: 0;
    display: block;
    font-size: 110px;
    color: #f5f5f5;
}

#under_head #pan {
    position: absolute;
    right: 2%;
    top: 120px;
    font-size: 14px;
    font-weight: 500;
}

/* YBSホールディングスについて */
.about .wrap {
    background: url(../images/bg_ybs.png) no-repeat;
    background-position: right top;
    background-attachment: fixed;
}

#mission {
    margin: 0 0 200px 0;
    text-align: center;
    font-family: serif;
}

#mission h1 {
    margin: 0 0 90px 0;
    font-size: 30px;
    font-weight: 400;
}
#mission h2 {
    margin: 0 0 90px 0;
    font-size: 26px;
    font-weight: 700;
}
#mission p {
    margin: 0 0 40px 0;
    font-size: 24px;
    font-family: sans-serif;
    font-weight: 400;
}


/* 事業内容 */
#service {
    margin: 0 0 200px 0;
}

#service #text {
    margin: 0 5% 40px 5%;
}
#service #text p {
    margin: 0 0 20px 0;
}

#service #property {
    padding: 3% 5%;
    background: #f5f5f5;
}

#service #property h1 {
    margin: 0 0 20px 0;
    font-size: 20px;
    font-weight: 700;
}

#service #property div {
    display: inline-block;
    width: 43%;
    margin: 0 3%;
}
#service #property div img {
    width: 100%;
    border-radius: 3px;
}
#service #property div strong {
    display: block;
    font-size: 16px;
    font-weight: 500;
}
#service #property div span {
    display: block;
    color: #999;
    font-size: 14px;
    font-weight: 400;
}

/* 会社案内 */
#overview {
    margin: 0 5% 80px 10%;
}

#overview h2 {
    display: inline-block;
    width: 160px;
    padding: 0 0 30px 0;
    border-bottom: 1px solid #000;
    font-size: 22px;
    font-weight: 700;
}
#overview h2 span {
    display: block;
    color: #7F283C;
    font-size: 16px;
    font-weight: 700;
}

#overview .table {
    width: 70%;
    margin: -120px 0 0 270px;
}
#overview .table dt {
    font-weight: 500;
}
#overview iframe {
    margin: 10px 0 0 0;
    border-radius: 3px;
}

#history {
    margin: 0 0 50px 0;
    padding: 5% 5% 10px 10%;
    background: #f5f5f5;
}

#history h2 {
    display: inline-block;
    width: 160px;
    padding: 0 0 30px 0;
    border-bottom: 1px solid #000;
    font-size: 22px;
    font-weight: 700;
}
#history h2 span {
    display: block;
    color: #7F283C;
    font-size: 16px;
    font-weight: 700;
}

#history div {
    width: 70%;
    margin: -110px 0 0 270px;
}

#history h3 {
    font-size: 20px;
    font-weight: 700;
}

#history .table {
    width: auto;
    margin: 20px 0 70px 0px;
}
#history .table dt {
    width: 250px;
    border-bottom: 1px solid #fff;
    font-weight: 500;
}
#history .table dd {
    width: calc(100% - 300px);
    border-bottom: 1px solid #fff;
}