JOHO.css

/-------------------------------------リセットcss-----------------------------/ 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; }

body { line-height:1; }

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

nav ul { list-style:none; }

blockquote, q { quotes:none; }

blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; }

a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }

/ change colours to suit your needs / ins { background-color:#ff9; color:#000; text-decoration:none; }

/ change colours to suit your needs / mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }

del { text-decoration: line-through; }

abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; }

table { border-collapse:collapse; border-spacing:0; }

/ change border colour to suit your needs / hr { display:block; height:1px; border:0;
border-top:1px solid #cccccc; margin:1em 0; padding:0; }

input, select { vertical-align:middle; }

html,body,div,span,iframe,h1,h2,h3,h4,h5,p,a,img,ul,li,table,tr,th,td,tbody,footer,header,main,nav,section { margin: 0; padding: 0; border: 0; font-weight: normal; list-style: none; text-decoration: none; } /---------------------------------リセットcss------------------------------- /

/--------------------------------共通---------------------------------------/ body { font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; } body { width: 100%; }

#header_inner,#section02_inner,#company { width: 960px; margin: 0 auto; } /--------------------------------共通---------------------------------------/

/-------------------------------ヘッダー ------------------------------------------/

#header_inner { height: 85px; width:100%; position: relative; background-color:#c60000; }

#header_logo{ position: absolute; top: 0; bottom: 0; margin: auto; font-size:1.7rem; color:#fff; }

#header_logo { width: 194px; height: 40px; left: 60px; }

/-------------------------------ヘッダー ------------------------------------------/

/------------------------------- メインイメージ------------------------------------------/

#main_image { display: table; width: 100%; height: 482px; background-size: cover; }

#main_image_inner { width: 100%; height: 482px; position: relative; background: url(OG458A8165jpg) no-repeat; background-size:cover; } h1 { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 500px; height: 85px; margin: auto; color: #000000; font-size: 4.3rem; text-align: center; display: table-cell; vertical-align: middle; }

/------------------------------- メインイメージ------------------------------------------/

/------------------------------- スクロール------------------------------------------/ .scroll { height: 87px; width: 100%; background-color: #fd974f; position: relative; display: table; } .scroll:after { content: ""; display: block; width: 0px; height: 0px; bottom: -14px; border-top: 43px solid #fd974f; border-right: 60px solid transparent; border-left: 60px solid transparent; left: 0; right: 0; margin: auto; position: absolute; } .scroll h2 { color: #fff; font-size: 1.9rem; text-align: center; display: table-cell; vertical-align: middle; }

/-------------------------------スクロール ------------------------------------------/

/------------------------------- メイン------------------------------------------/ nav { height: 396px; width: 100%; margin: 0 auto; background-color:#fef2e4; }

#main_nav { width: 40%; min-width: 687px; height: 396px; overflow: hidden; margin: 0 auto; padding: 88px 0; }

#main_nav li { float: left; height: 225px; width: 225px; border: 2px solid #000; border-radius: 50%; position: relative; background-color:#fd974f; }

#main_nav li:hover { background-color:#e73f0b; }

#main_nav li:after { content: ""; display: block; position: absolute; bottom: 22px; right: 0; left: 0; width: 21px; height: 21px; margin: auto; border-right: 3px solid #000; border-bottom: 3px solid #000; transform: rotate(45deg); }

#main_nav li:last-of-type { float: none; margin: 0 auto; }

#main_nav li:nth-of-type(2) { float: right; }

#main_nav a { color: #000; font-size: 1.5rem; position: absolute; top: 0; left: 0; width: 100%; border-radius: 50%; text-align: center; padding: 83px 0 100px; }

#div03 { margin-bottom: 100px; }

.contents { height: 400px; width:960px; margin:0 auto; padding:70px 0px; overflow: hidden; } .contents:nth-child(2){ padding-top:0px; } .left { float: left; height: 400px; width: 50%; background-repeat: no-repeat; background-size: cover; }

#photo01 { background-color:#2e8b57; }

#photo02 { background-color:#2e8b57; } .right { float: right; width: 50%; height: 400px; } .text { background-color: #fef2e4; position:relative; } .contents p,h4 { margin: 30px 120px 0 21px; color: #000000; } h4 { font-size: 1.25rem; }

.main_contact_inner { width: 30%; height: 140px; position: absolute; bottom:10px; right:50%; }

.contact_right { float: right; } .contact_right_inner { display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 243px; height: 33px; margin: auto; padding: 25px 65px 25px 20px; background-color: #c60000;
transition: 0.4s; } .contact_right_inner:hover { transform: scale(1.1,1.1); } .contact_right p { float: right; color: #fff; font-size: 1.3rem; margin:5px 50px; }

/------------------------------- メイン------------------------------------------/

/------------------------------- フッター------------------------------------------/ footer { height: 93px; background-color:#c60000; } footer p { margin-left: 119px; font-size: 0.75rem; line-height: 93px; color:#fff; }

/------------------------------- フッター------------------------------------------/

/------------------------------- ページ1、2------------------------------------------/

.section-ttl { font-size:2.4rem; font-weight:bold; text-align: center; margin-bottom: 50px; border-bottom:double 5px #c60000; }

#about h3 { text-align:center; font-size:1.8rem; margin-bottom:20px; }

#about p { font-size:1.4rem; line-height:1.5; text-align:center; } .section-wrapper { padding:100px 10% 50px; } /-------------------------------ページ1，2 ------------------------------------------/