/* Theme Name: YUTA-NAKAJIMA Original style Theme URI: Description: A original theme to YUTA-NAKAJIMA. Author: Masayuki Kawakubo Author URI: http://knight-dl.jp Version: 1 */ /* ------------------------------------------------------------------------ */ /* INITIAL /* ------------------------------------------------------------------------ */ *{word-break:break-all; -webkit-touch-callout:none; -webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-text-size-adjust:none; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box;} html{margin:0; padding:0;} body{position:relative; background:#FFF; margin:0; padding:0; font:12px/22px "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; color:#333; text-align:center;} 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, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:1em; font-weight:normal; background:transparent; } article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;} ul,ol{list-style:none;} blockquote, q{quotes:none;} blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;} abbr[title], dfn[title]{border-bottom:1px dotted #000; cursor:help;} table{border-collapse:collapse; border-spacing:0;} hr{display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0;} img{vertical-align:bottom; border-style:none;} a{-webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -ms-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out;} a,a:link,a:visited{color:#000; outline:none; text-decoration:none;} a:hover,a:active,a:focus{color:#ff4200; outline:none; text-decoration:none;} .fntSml{font-size:0.87em; line-height:1.7;} .fntLrg{font-size:1.125em;} .fntBold{font-weight:bold;} strong{font-weight:bold;} sub, sup{font-size:75%; line-height:0; position:relative;} sup{top:-0.5em;} sub{bottom:-0.25em;} pre, code, kbd, samp {font-family:monospace, sans-serif;} .clickable, label, input[type=button], input[type=submit], button {cursor:pointer;} /* Webkit browsers add a 2px margin outside the chrome of form elements */ button, input, select, textarea {margin:0;} /* make buttons play nice in IE */ button {width:auto; overflow:visible;} /* scale images in IE7 more attractively */ .ie7 img {-ms-interpolation-mode:bicubic;} /* prevent BG image flicker upon hover */ .ie6 html {filter:expression(document.execCommand("BackgroundImageCache", false, true));} ::selection{background:#ffff41; color:#000;} ::-moz-selection {background:#ffff41; color:#000;} .flt-R{float:right;} .flt-L{float:left;} .flt-C{text-align:center; margin-left:auto; margin-right:auto;} .tb-L{margin-left:0; margin-right:auto; text-align:left;} .tb-R{margin-right:0; margin-left:auto; text-align:right;} .clr-L{clear:left;} .clr-R{clear:right;} .clr-B{clear:both;} .noshow{display:none;} .clearfix:before, .clearfix:after{content:'\0020'; display:block; overflow:hidden; visibility:hidden; width:0; height:0;} .clearfix:after{clear: both;} .clearfix{zoom:1;} .clear{clear:both; visibility:hidden; width:0; height:0;} .font-Min{font-family:"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif; letter-spacing:0.1em;} .font-Go{font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;} .wfntR{font-family:'tgt-R';} .wfntB{font-family:'tgt-B';} /* -------------------------------------------------------------------------------*/ /* COMMON /* -------------------------------------------------------------------------------*/ html{overflow-y:scroll;} body{background:#FFF;} body.bodyHideFirst{opacity:0;} .bodyClr{position:relative; background-color:#FFF; width:100%;} #MkCnt{position:fixed; width:100%; height:100%; z-index:500; background-color:#FFF; display:none;} .wrapAll{position:relative; margin:0 auto; padding:0 50px 40px; display:block; max-width:1200px;} #Page-home .wrapAll{padding-bottom:0;} .innerWrap, .baseW{clear:both; position:relative ;margin-right:auto; margin-left:auto; text-align:left; max-width:1200px; padding-left:0; padding-right:0; } .innerWrap.narrowW{max-width:780px;} .innerWrap.thinW{max-width:580px;} .content:before, .content:after, .row:before, .row:after{content:'\0020'; display:block; overflow:hidden; visibility:hidden; width:0; height:0;} .content:after,.row:after{clear: both;} .content,.row{zoom:1;} .linkbox{cursor:pointer;} .linkbox .readmore{display:none;} .linkbox{-webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -ms-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out;} .linkbox.hovered{filter:alpha(opacity=50); -moz-opacity:.5; opacity:.5;} .listInlineBlock{letter-spacing:-.4em;} .listInlineBlock li{letter-spacing:normal; display:inline-block; _display:inline; _zoom:1;} .listInlineBlock li a{display:block;} .listInlineBlock.alnL{text-align:left;} .listInlineBlock.alnL li:first-child{margin-left:0;} .listInlineBlock.alnC{text-align:center;} .listInlineBlock.alnR{text-align:right;} .listInlineBlock.alnR li:last-child{margin-right:0;} .dlFlt{position:relative; margin-bottom:2em; line-height:1.6;} .dlFlt:before, .dlFlt:after{content:'\0020'; display:block; overflow:hidden; visibility:hidden; width:0; height:0;} .dlFlt:after{clear: both;} .dlFlt{zoom:1;} .dlFlt dt{float:left; width:7em; padding:0 0 .5em; color:#666;} .dlFlt dd{padding:0 0 .5em 7em;} .dlFlt.hasBorder{border-bottom:1px solid #E7E7E7;} .dlFlt.hasBorder dt{padding:.5em 0;} .dlFlt.hasBorder dd{padding:.5em 0 .5em 7em; border-top:1px solid #E7E7E7;} .dlFlt.hasBorder dt.first-child, .dlFlt.hasBorder dd.first-child{border-top:none; padding-top:0;} .alpha{margin-left:0;} .delta{margin-right:0;} img{max-width:100%; height:auto;} .only480{display:none;} .onlySMP{display:none;} .onlyPC{display:inherit;} .hideFirst{opacity:0;} /* -------------------------------------------------------------------------------*/ /* GLOBA-HEADER /* -------------------------------------------------------------------------------*/ #GlobalHeader{position:relative; width:100%; height:130px; text-align:left; margin-bottom:70px;} #Page-home #GlobalHeader, #Page-work #GlobalHeader{margin-bottom:50px;} #Page-home #GlobalHeader{margin-bottom:0; height:100px;} #GlobalHeader h1{position:relative; float:left; margin-right:10px; width:320px;} #GlobalHeader h1 a{display:block;} #GlobalHeader h1 a img {width:100%; height: auto;} a object{pointer-events:none;} object[type="image/svg+xml"]{pointer-events:none;} object[type="image/svg+xml"] + img{display:none;} #GlobalNavSlide{display:none;} #BtnOpenNav{display:none; position:relative; width:40px; height:38px; cursor:pointer;} #BtnOpenNav object{pointer-events:none;} #GlobalNav{float:right;} #GlobalNav .listInlineBlock{position:relative;} #GlobalNav .listInlineBlock li{margin-left:40px; font-family:'tgt-R'; font-size:1.5em; line-height:1.5; letter-spacing:.15em;} #LocalNav{position:absolute; bottom:0; left:0; font-family:'tgt-R'; font-size:1.25em; letter-spacing:.15em;} #LocalNav ul{position:relative; overflow:hidden; *zoom:1;} #LocalNav li{float:left; margin-right:31px;} #LocalNav.lnWork{} #LocalNav.lnWork.home li{cursor:pointer; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -ms-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out;} #LocalNav #CurrentLocalNav{position:relative; width:100%; border-top:3px solid #000; border-bottom:3px solid #000; padding:.5em 0; text-align:center; font-family:'tgt-R'; letter-spacing:.15em; font-size:1.25em; line-height:1.2; color:#000; display:none; cursor:pointer;} #BtnLnavClose{position:fixed; top:20px; right:20px; width:40px; height:38px; display:none; z-index:501; cursor:pointer;} #GlobalNav .current a, #LocalNav .current a, #GlobalNav a:hover, #LocalNav a:hover, #LocalNav.lnWork.home li.current, #LocalNav.lnWork.home li:hover{color:#ff4200;} #GlobalNavSlide{position:absolute; top:0; left:0; width:100%; text-align:center; z-index:500; display:block; display:none;} #BtnGnavClose{position:relative; text-align:right; overflow: hidden; padding:20px 20px 5px; cursor:pointer;} #BtnGnavClose a{display:inline-block;} #GlobalNavSlide ul{margin:0 20px; text-align:center;} #GlobalNavSlide li{font-family:'tgt-R'; font-size:1.5em; line-height:1.5; letter-spacing:.15em; color:#000; padding:1em 0; display:block; border-bottom:2px solid #D5D5D5;} #GlobalNavSlide li a{color:#000; display:block;} #GlobalNavSlide li a:hover{color:#ff4200;} /* -------------------------------------------------------------------------------*/ /* GLOBA-FOOTER /* -------------------------------------------------------------------------------*/ #GlobalFooter{position:relative; clear:both; background:#FFF; font-size:.83em; line-height:1.5; color:#666;} #GlobalFooter.innerWrap{padding-right:50px; padding-left:50px;} #GlobalFooter .innerFooter{border:3px solid #ffde03; border-bottom:none; padding:20px 25px; min-height:120px;} #GlobalFooter ul{float:left;} #GlobalFooter ul li{float:left; padding:0 10px; border-right:1px solid #DDD;} #GlobalFooter ul li a{color:#666;} #GlobalFooter ul li a:hover{color:#ff4200;} #GlobalFooter .copyright{float:left; margin-left:10px;} /* -------------------------------------------------------------------------------*/ /* CONTENT /* /* /* -------------------------------------------------------------------------------*/ #HomeMainVis{position:relative; width:100%; margin-bottom:0; margin-top:-60px;} #HomeMainVis img{width:100%; height:auto;} .homeimg-pc{display:block;} .homeimg-smp{display:none;} #HomeMainVis .unable-dl{position:absolute; top:0; left:0; width:100%; height:100%; z-index:1; display:block;} .wrapMain{position:relative; display:block; padding-top:40px; background-repeat:no-repeat; background-position:left 40px; width:100%; /*background-size:100% auto; -webkit-background-size:100% auto; -moz-background-size:100% auto; -ms-background-size:100% auto; -o-background-size:100% auto;*/} #Page-about .wrapMain{background-image:url(img/content/h-about.png);} #Page-work .wrapMain{background-image:url(img/content/h-work.png);} #Page-note .wrapMain{background-image:url(img/content/h-note.png);} #Page-privacy .wrapMain{background-image:url(img/content/h-privacy.png);} #Page-contact .wrapMain{background-image:url(img/content/h-contact.png);} @media all and (-webkit-min-device-pixel-ratio : 1.5){ .wrapMain{background-size:880px auto; -webkit-background-size:880px auto; -moz-background-size:880px auto; -ms-background-size:880px auto; -o-background-size:880px auto;} #Page-about .wrapMain{background-image:url(img/content/h-about@2x.png);} #Page-work .wrapMain{background-image:url(img/content/h-work@2x.png);} #Page-note .wrapMain{background-image:url(img/content/h-note@2x.png);} #Page-privacy .wrapMain{background-image:url(img/content/h-privacy@2x.png);} #Page-contact .wrapMain{background-image:url(img/content/h-contact@2x.png);} } #InfoBar{position:absolute; display:block; top:40px; right:0; width:50px;} #InfoLogo{margin:20px auto 15px;} #InfoSolarTerm, #InfoPastday{font-size:1em; line-height:1; color:#ff4200; font-family:"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif; margin:0 auto;} #InfoSolarTerm{width:1em; margin-bottom:10px; font-size:1em; line-height:1.5em;} #BtnPageTop{position:absolute; top:95%; right:18px; height:13px; width:15px; z-index:400;} #Page-home #BtnPageTop{display:none;} #BtnPageTop a{display:inline-block;} .content{position:relative; text-align:left; padding-right:0;} .atlPage{position:relative;} .atlPage p{margin-bottom:2em;} .atlPage .withTopBorder{position:relative; clear:both; border-top:3px solid #EAEAEA; margin-top:2.5em; padding-top:3.5em;} .atlPage.atlError{padding-bottom:5em;} .halfW{position:relative; width:50%;} .halfW.left{float:left; padding-right:28px;} .halfW.right{float:right; padding-left:7px; padding-right:20px;} .listNorm{margin-left:2em; margin-bottom:2em;} ol.listNorm{list-style:decimal;} ul.listNorm{list-style:disc;} .atlPage.atlError h3{font-size:1.25em; margin-bottom:.5em;} /* -------------------------------------------------------------------------------*/ /* ABOUT /* -------------------------------------------------------------------------------*/ #Page-about{} .scnProfile{} .scnProfile h1{font-size:1.5em; line-height:1.5; letter-spacing:.2em; margin-bottom:.5em;} .scnProfile.blockEN h1{letter-spacing:.2em;} .scnProfile h2.title{margin-bottom:2em;} .scnAddr,.scnAccess{margin-bottom:2em;} .blockAddr h2, .blockAccess h2{font-size:1.25em; letter-spacing:.05em; margin-bottom:2em;} .blockAddr h3, .blockAccess h3{margin-bottom:1em;} #GoogleMap{position:relative; padding-bottom:28.5%; height:0; width:100%; overflow:hidden;} #map_canvas{position:absolute; top:0; left:0; width:100%!important; height:100%!important;} #GoogleMap iframe, #GoogleMap object, #GoogleMap embed{position:absolute; top:0; left:0; width:100%!important; height:100%!important;} /* -------------------------------------------------------------------------------*/ /* PRIVACY-POLICY /* -------------------------------------------------------------------------------*/ #Page-privacy{} #Page-privacy .atlPage{max-width:660px;} #Page-privacy .atlPage h1{font-size:1.5em; margin-bottom:.25em;} #Page-privacy .atlPage h2{font-size:1.25em; margin-bottom:.25em;} /* ------------------------------------------------------------------------ */ /* CONTACT /* ------------------------------------------------------------------------ */ #Page-contact{} .atlPage .dlContact{} .atlPage .dlContact dt{position:relative; float:left; width:18em; margin-bottom:15px; padding:5px 0 0;} .atlPage .dlContact dt .mention{position:absolute; top:165px; left:0; font-size:92%; line-height:1; letter-spacing:0;} .atlPage .dlContact dt .asterisk{padding-left:5px; font-size:120%; line-height:1; color:#111;} .atlPage .dlContact dd{margin-left:18em; margin-bottom:15px;} .atlPage .dlContact input, .atlPage .dlContact textarea{font-size:110%; border:1px solid #CCC; padding:5px; appearance:none; -webkit-appearance:none; -moz-appearance:none; border-radius:0; -webkit-border-radius:0; -moz-border-radius:0; -o-border-radius:0; -ms-border-radius:0; box-shadow:inner 0 0 4px rgba(0,0,0,.2); -webkit-box-shadow:inner 0 0 4px rgba(0,0,0,.2); -moz-box-shadow:inner 0 0 4px rgba(0,0,0,.2); -o-box-shadow:inner 0 0 4px rgba(0,0,0,.2); -ms-box-shadow:inner 0 0 4px rgba(0,0,0,.2);} .atlPage .dlContact .iptName, .atlPage .dlContact .iptCom, .atlPage .dlContact .iptDiv, .atlPage .dlContact .iptMail, .atlPage .dlContact .iptTel{width:45%;} .atlPage .dlContact textarea{width:75%;} .chk-interest .wpcf7-list-item{display:block;} .chk-subject .wpcf7-list-item{margin-right:20px;} .dropSubject{min-width:45%; padding:7px; border:1px solid #CCC; background:#FFF url(img/common/arrow-dropdownmenu.png) no-repeat right center; appearance:none; -webkit-appearance:none; -moz-appearance:none; border-radius:0; -webkit-border-radius:0; -moz-border-radius:0; -o-border-radius:0; -ms-border-radius:0; box-shadow:inner 0 0 4px rgba(0,0,0,.2); -webkit-box-shadow:inner 0 0 4px rgba(0,0,0,.2); -moz-box-shadow:inner 0 0 4px rgba(0,0,0,.2); -o-box-shadow:inner 0 0 4px rgba(0,0,0,.2); -ms-box-shadow:inner 0 0 4px rgba(0,0,0,.2);} .atlPage .btnSubmit{text-align:center; margin:20px auto;} .atlPage .btnSubmit input{display:inline-block; text-align:center; padding:10px 40px; border:none; background:#FFF; font-size:100%; line-height:1; color:#111; font-weight:normal; appearance:none; -webkit-appearance:none; -moz-appearance:none;} .atlPage .btnSubmit input:hover{background:#FFF;} div.wpcf7 {margin: 0;padding: 0;} div.wpcf7-response-output {margin:2em 0.5em 1em;padding:0.2em 1em;} div.wpcf7-mail-sent-ok {border:1px solid #84c6fe; background:#fff;} div.wpcf7-mail-sent-ng {border:1px solid #ff0000; background:#FFF;} div.wpcf7-spam-blocked {border:1px solid #ffa500; background:#FFF;} div.wpcf7-validation-errors {border:1px solid #888; background:#FFF;} span.wpcf7-form-control-wrap {position: relative;} span.wpcf7-not-valid-tip {position: absolute;top:90%;left:65%; z-index: 100;background: #fff;border: 1px solid #ff0000;font-size: 10px;width: 280px;padding: 2px;} span.wpcf7-not-valid-tip-no-ajax {color: #f00;font-size: 10px;display: block;} span.wpcf7-list-item {margin-left: 0.5em;} .wpcf7-display-none {display: none;} div.wpcf7 img.ajax-loader {border: none;vertical-align: middle;margin-left: 4px;} div.wpcf7 .watermark {color: #888;} span.wpcf7-form-control-wrap.attachfile{} input.wpcf7-form-control.wpcf7-file.atcfile{} /* ------------------------------------------------------------------------ */ /* NOTE /* ------------------------------------------------------------------------ */ #Page-note{} .atlPost{position:relative; margin-bottom:4em; padding-bottom:2.5em; border-bottom:3px solid #EAEAEA;} .atlPost h1{font-size:1.5em; line-height:1.6; margin-bottom:.5em;} .atlPost .postMeta{font-size:.92em; line-height:1.6; margin-bottom:2.5em;} .atlPost .scnPost{position:relative;} .atlPost h2{font-size:1.25em; line-height:1.6; margin-bottom:.25em;} .atlPost h3{font-size:1.15em; line-height:1.6; margin-bottom:.25em;} .atlPost h4{font-size:1em; margin-bottom:.25em;} .atlPost p{margin-bottom:1.5em;} .atlPost strong{font-weight:bold;} .atlPost .halfW.right.imgarea{text-align:right; padding-right:0;} .atlPost .postImg{width:100%; text-align:right; margin-bottom:1.5em;} /* ------------------------------------------------------------------------ */ /* WORK /* ------------------------------------------------------------------------ */ #Page-work .wrapMain{min-height:90vh;} .content.workIndex{overflow:hidden;} .workIndex,.workSingle{opacity:1;} .listWorkThumbs{position:relative; margin-left:-12px; margin-right:-12px; overflow:hidden; *zoom:1;} .listWorkThumbs li{position:relative; float:left; width:25%; padding:0 12px 24px;} .listWorkThumbs li{} /*.listWorkThumbs li.hideThumb{display:none;}*/ .listWorkThumbs li a{position:relative; display:block; width:100%;} .listWorkThumbs li img{width:100%; height:auto; opacity:1; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -ms-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out;} .listWorkThumbs li figure{position:relative; width:100%;} .listWorkThumbs li .workTitle{position:absolute; top:50%; left:0; margin-top:-.75em; width:100%; text-align:center; font-size:1em; line-height:1.5; color:#000; padding:0 1em; opacity:0; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -ms-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out;} .listWorkThumbs li a:hover{} .listWorkThumbs li a:hover img{opacity:.1;} .listWorkThumbs li a:hover .workTitle{opacity:1; color:#000;} .atlWorkPost .clmL{position:relative; float:left; width:70%;} .atlWorkPost .scnImgs{} .atlWorkPost .scnImg{position:relative; margin-bottom:4.5em; padding-bottom:1.75em; border-bottom:3px solid #EAEAEA;} .atlWorkPost .postImg{margin-bottom:2.25em;} .atlWorkPost .nameCtg{position:relative; margin-top:10px; text-align:right;} .atlWorkPost .clmR{position:relative; float:right; width:30%; padding-left:30px;} .atlWorkPost .scnWorkInfo h1{font-size:1.5em; line-height:1.6; margin-bottom:1em;} .atlWorkPost .scnWorkInfo h3{} .atlWorkPost .scnWorkInfo p{margin-bottom:1.5em;} #HomeFooterNav{position:relative; text-align:center;} /*#SingleFooterNav{position:relative; width:100%; margin:0; text-align:center;}*/ #SingleFooterNav{position:absolute; bottom:72px; right:10px; width:100%; margin:0;} #HomeFooterNav .navInner, #SingleFooterNav .navInner{display:table; margin:0 auto;} #SingleFooterNav .navInner{display:table; margin-right:0;} #HomeFooterNav .navInner div, #SingleFooterNav .navInner div{display:table-cell; font-size:1px; line-height:1; width:32px; height:32px; overflow:hidden; margin:0 5px;} #HomeFooterNav .navInner div a, #SingleFooterNav .navInner div a{position:relative; width:32px; height:32px; display:block; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -ms-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out;} #HomeFooterNav .navInner div a:hover, #SingleFooterNav .navInner div a:hover{opacity:.5;} #SingleFooterNav div.prevSingle a, #SingleFooterNav div.nextSingle a{background-position:0 0; background-repeat:no-repeat; text-indent:-99999px; overflow:hidden; -webkit-background-size:32px; -moz-background-size:32px; -ms-background-size:32px; -o-background-size:32px; background-size:32px;} #HomeFooterNav div.prevCtg, #SingleFooterNav div.prevCtg{} #SingleFooterNav div.prevSingle a{background-image:url(img/work/cntrl/arrow-left.png);} #HomeFooterNav div.nextCtg, #SingleFooterNav div.nextCtg{} #SingleFooterNav div.nextSingle a{background-image:url(img/work/cntrl/arrow-right.png);} #HomeFooterNav div.backindex, #SingleFooterNav div.backindex{} @media all and (-webkit-min-device-pixel-ratio : 1.5){ #SingleFooterNav div.prevSingle a{background-image:url(img/work/cntrl/arrow-left@2x.png);} #SingleFooterNav div.nextSingle a{background-image:url(img/work/cntrl/arrow-right@2x.png);} }