@charset "utf-8"; @import url('https://fonts.googleapis.com/css?family=Poiret+One&display=swap'); @import url(slide.css); body,html {width: 100%;height: 100%;} body { margin: 0px; padding: 0px; color: #fff; font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-size: 14px; line-height: 2; background: #fff; -webkit-text-size-adjust: none;} h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,form,figure,form,input,textarea {margin: 0px;padding: 0px;font-size: 100%;font-weight: normal;} ul {list-style-type: none;} img {border: none;max-width: 100%;height: auto;vertical-align: middle;} table {border-collapse:collapse;font-size: 100%;border-spacing: 0;} iframe {width: 100%;} a { color: #fff; transition: 0.4s;} a:hover { color: #448db3; text-decoration: none;} #container { position: fixed; width: 100%; height: 100%;} .company #container { background: url(../images/1.jpg) no-repeat center center; background: url(../images/1.jpg) no-repeat center center / cover;} .works #container { background: url(../images/2.jpg) no-repeat center center; background: url(../images/2.jpg) no-repeat center center / cover;} .link #container { background: url(../images/3.jpg) no-repeat center center; background: url(../images/3.jpg) no-repeat center center / cover;} .contact #container { background: #000;} #contents { height: 100%; width: 100%;} .home #contents { height: auto; position: absolute; width: 100%; bottom: 0px; right: 0%;} header.pc { position: fixed; left: 0px; top:0px; z-index: 100; width: 100px; /*幅*/ height: 100%; border-right: 1px solid #fff; border-right: 1px solid rgba(255,255,255,0.3); transition: 1s;} header.pc:hover { width: 20%; /*幅*/ overflow: auto; background-color: #000; background-color: rgba(0,0,0,0.7);} header.pc .logo { text-align: center; border-bottom: 1px solid #fff; border-bottom: 1px solid rgba(255,255,255,0.3); height: 100px;} header.pc .logo img { width: 100px;} header.pc p { padding: 10px;} #menubar li { font-size: 12px; position: relative;} #menubar li a { display: block;text-decoration: none; border-bottom: 1px solid #fff; border-bottom: 1px solid rgba(255,255,255,0.3); width: auto; /*幅*/ height: 100px; padding-left: 80px;} header:hover #menubar li a:hover { background-color: #448db3; color: #fff;} #menubar li.current a { background-color: rgba(68,141,179,0.5);} #menubar li a span { display: none;} header:hover #menubar li a span { display: block; padding-top: 40px;} .menuimg a { width: 60px; /*幅*/ height: 60px; display: inline-block; background-image: url(../images/icon.png); background-repeat: no-repeat; background-size: 60px 300px;} .menu1 a { background-position: 20px 20px;} .menu2 a { background-position: 20px -40px;} .menu3 a { background-position: 20px -100px;} .menu4 a { background-position: 20px -160px;} .menu5 a { background-position: 20px -220px;} #menubar-s {display: none;} #menubar_hdr {display: none;} header .icon { text-align: center; border-bottom: 1px solid #fff; border-bottom: 1px solid rgba(255,255,255,0.3); padding: 10px 0;} header .icon li { display: inline;} header .icon img { width: 20%;} @keyframes main { 0% { opacity: 0; top: 20px;} 100% { opacity: 1; top: 0px;}} #main { overflow: auto; padding: 2% 5% 0 15%; height: 98%; animation-duration: 0.5S; animation-fill-mode: both; animation-name: main; animation-delay: 0.8s; position: relative;} #main h2 { clear: both; margin-bottom: 20px; font-size: 24px; letter-spacing: 0.2em; color: #c1bc9e;} #main h2::first-letter { border-left: 3px solid #c1bc9e; padding-left: 20px;} #main h2.title { font-family: 'Poiret One'; font-size: 60px; margin-bottom: 40px; border-bottom: 1px solid #c1bc9e;} #main h2.title::first-letter { border-left: none; padding-left: 0;} #main h2.title span { display: block; font-size: 15px; float: right; margin-top: 60px;} #main h3 { clear: both; margin-bottom: 20px; font-size: 20px;} #main p { padding: 0 20px 20px;} #main p + p { margin-top: -5px;} #main h2 + p, #main h3 + p { margin-top: -10px;} #main section + section { clear: both; padding-top: 40px;} .list { position: relative; float: left; width: 30%; /*幅*/ margin-left: 2.5%; margin-bottom: 20px; background: #000;} .list a { display: block; text-decoration: none;} .list a:hover { color: #fff;} .list a::after { content: "→"; position: absolute; right: 10px; top: 10px; font-size: 12px; line-height: 30px; width: 30px; border-radius: 50%; background: #ccc; color: #000; text-align: center;} .list a figure { opacity: 0.6;} .list a:hover figure { opacity: 1;} .list h4 { position: absolute; bottom: 0px; left: 0px; width: 100%; background: #000; background: rgba(0,0,0,0.5); text-align: center; padding: 10px 0;} footer { clear: both; text-align: right; padding: 30px 0;} .home footer {padding-bottom: 10px;} footer a {text-decoration: none;} #new dl { height: 100px; overflow: hidden;} #new dl:hover { overflow: auto;} #new dt { float: left; width: 9em; /*幅*/ letter-spacing: 0.1em;} #new dd { padding-left: 9em;} .ta1 caption { border: 1px solid #fff; border-bottom: none; text-align: left; font-weight: bold; padding: 10px; background: #000;} .ta1 th.tamidashi { width: auto; text-align: left; background: #000;} .ta1 { table-layout: fixed; width: 100%; margin: 0 auto 20px;} .ta1, .ta1 td, .ta1 th { word-break: break-all; border: 1px solid #fff; padding: 10px;} .ta1 th { width: 140px; /*幅*/ text-align: center;} input[type="submit"].btn, input[type="button"].btn, input[type="reset"].btn { padding: 5px 20px; border-radius: 3px; background: #eee; color: #333;} input[type="submit"].btn:hover, input[type="button"].btn:hover, input[type="reset"].btn:hover { background: #fff;} input,textarea { outline: none;background: transparent; border: 1px solid #666; color: #fff;} input:focus,textarea:focus { border: 1px solid #fff;} p.check { background: #ff0000; color:#fff; padding: 10px 25px !important; margin-bottom: 20px;} p.check a {color: #fff;} .home .nav-fix-pos-pagetop a { display: none;} .nav-fix-pos-pagetop a { display: block;text-decoration: none;text-align: center;z-index: 100;position: fixed; width: 40px; line-height: 40px; bottom: 20px; right: 3%; background: #448db3; color: #fff; border-radius: 50%;} .nav-fix-pos-pagetop a:hover { background: #fff; color: #448db3;} .newicon { background: #F00; color: #FFF; font-size: 70%; line-height: 1.5; padding: 2px 5px; border-radius: 2px; margin: 0px 5px; vertical-align: text-top;} ul.disc { list-style: disc; padding: 0 20px 20px 45px;} ol { padding: 0 20px 20px 45px;} .box { background: #000; background: rgba(0,0,0,0.7); padding: 5%; margin-bottom: 30px; border: 1px solid #fff; border: 1px solid rgba(255,255,255,0.3);} .look {background: #000;padding: 5px 10px;border-radius: 4px;border: 1px solid #666;color: #fff;} .mb15,.mb1em {margin-bottom: 15px !important;} .mb30 {margin-bottom: 30px !important;} .clear {clear: both;} .color1, .color1 a {color: #448db3 !important;} .pr {font-size: 10px;} .wl {width: 96%;} .ws {width: 50%;} .c {text-align: center;} .r {text-align: right;} .l {text-align: left;} .fl {float: left;} .fr {float: right;} .mini1 {font-size: 11px;display: inline-block;line-height: 1.5;} .sh {display: none;} #pagetop {display: block;margin-top: -2%;padding-top: 2%;} @media screen and (max-width:800px){ header.sh .logo { width: 80px;} @keyframes menubar { 0% {opacity: 0;} 100% {opacity: 1;}} #menubar-s { display: block; position: fixed; z-index: 3; top: 0px; width: 100%; height: 100%; overflow: auto; background: rgba(0,0,0,0.8); animation-name: menubar; animation-duration: 0.5s; animation-fill-mode: both; border-top: 1px solid #fff;} #menubar-s nav { border-bottom: 1px solid #fff; overflow: auto;} #menubar-s nav li a { display: block;text-decoration: none;width: 100%; border-bottom: 1px solid #fff; font-size: 16px; height: 100px; height: 60px;} #menubar-s nav li:last-child a { border-bottom: none;} #menubar-s nav li a span { display: block; padding-top: 15px; padding-left: 80px;} .menu1 a { background-position: 20px 0px;} .menu2 a { background-position: 20px -60px;} .menu3 a { background-position: 20px -120px;} .menu4 a { background-position: 20px -180px;} .menu5 a { background-position: 20px -240px;} #menubar {display: none;} #menubar_hdr { display: block; position: fixed;z-index: 50; top: 10px; right: 10px;} #menubar_hdr.close, #menubar_hdr.open { width: 50px; /*幅*/ height: 50px; border-radius: 50%; border: 1px solid #fff;} #menubar_hdr.close { background: #000 url(../images/icon_menu.png) no-repeat center top/50px;} #menubar_hdr.open { background: #000 url(../images/icon_menu.png) no-repeat center bottom/50px; top: 5px;} .list { position: relative; float: left; width: 45%; /*幅*/ margin-left: 2.5%; margin-bottom: 20px; background: #000;} .list a { display: block; text-decoration: none;} .list a:hover { color: #fff;} .list a::after { content: "→"; position: absolute; right: 10px; top: 10px; font-size: 12px; line-height: 30px; width: 30px; border-radius: 50%; background: #ccc; color: #000; text-align: center;} .list a figure { opacity: 0.6;} .list a:hover figure { opacity: 1;} .list h4 { position: absolute; bottom: 0px; left: 0px; width: 100%; background: #000; background: rgba(0,0,0,0.5); text-align: center; padding: 10px 0;} header .icon { clear: left; border-bottom: 1px solid #fff;} header .icon img { width: 50px;} #main { padding-left: 3%; padding-right: 3%;} #main h2 { font-size: 20px; letter-spacing: normal;} #main h2.title { font-size: 30px; margin-bottom: 20px;} #main h2.title span { margin-top: 20px;} footer {padding-bottom: 100px;} footer .pr {display: block;} #new dl { overflow: auto;} .sh {display:block;} .pc {display:none;}} @media screen and (orientation: landscape) and (max-height:500px){ #menubar-s nav li a { float: left; width: 50%; /*幅*/ }} @media screen and (max-width:480px){ #main h2 { font-size: 16px;} #main h2.title { font-size: 20px;} #main h2.title span { font-size: 11px; margin-top: 10px;} #main h3 { font-size: 14px;} #main p { padding: 0 10px 20px;} #main section + section { padding-top: 20px;} .list a::after { right: 2px; top: 2px; line-height: 20px; width: 20px;} .list h4 { padding: 0;} .ta1 caption { padding: 5px;} .ta1, .ta1 td, .ta1 th { padding: 5px;} .ta1 th { width: 100px;} ul.disc { list-style: disc; padding: 0 10px 20px 30px;} ol { padding: 0 10px 20px 30px;} .ws,.wl {width: 94%;}}