@charset "UTF-8"; /*============================= 00.common 01.main 02.about 03.designers 04.worls 05.company 06.recruit 07.contact =============================*/ /* 00.common */ .float { -moz-transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1); -webkit-transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1); -ms-transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1); -webkit-transform: translate(0, 30px); -moz-transform: translate(0, 30px); -ms-transform: translate(0, 30px); transform: translate(0, 30px); opacity: 0; } .action { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); opacity: 1; } /* 01.main */ #main { overflow: hidden; top: 0; left: 0; position: fixed; width: 100%; /* min-width: 900px;*/ height: 100%; } #main .fullImg { width: 100%; height: 100%; background: url(/images/top/mainvis.jpg) no-repeat center center; background-size: cover; } #main .fullImg img { width: 100%; height: auto; } #main #scrIcon { position: absolute; width: 57px; left: 0; right: 0; bottom: 80px; margin: auto; z-index: 99; opacity: 0; filter: alpha(opacity=0); } #main #overlay { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: #FFF; opacity: 0.6; filter: alpha(opacity=60); } #about { /* width: 1210px;*/ /* min-width: 768px;*/ width: 794px; /* width: 100%;*/ margin: 0 auto; padding-top: 200px; text-align: center; } #about h1{ font-family: "ゴシックMB101 B", 'Gothic MB101 Bold', sans-serif; /* font-size: 34px;*/ font-size: 28px; color: #000; letter-spacing: 0.6px; } #about h2{ font-family: "ゴシックMB101 DB", 'Gothic MB101 DemiBold', sans-serif; font-size: 20px; letter-spacing: 0.8px; padding-top: 46px; } #about p { margin-top: 50px; font-family: "ゴシックMB101 DB", 'Gothic MB101 DemiBold', sans-serif; font-size: 15px; line-height: 2.4em; letter-spacing: 0.8px; } #designers { margin-top: 100px; background: #fbfbfe; padding: 100px 0 130px; } #designers h1{ font-family: "ゴシックMB101 B", 'Gothic MB101 Bold', sans-serif; font-size: 22px; color: #000; } #designers .inner { /* width: 1210px;*/ min-width: 768px; margin: 0 auto; text-align: center; } #designers .inner h2 { margin-top: 100px; font-family: "ゴシックMB101 B", 'Gothic MB101 Bold', sans-serif; color: #ACACAC; font-size: 22px; } #designers .inner .txt01 { margin-top: 20px; font-size: 14px; font-size: 0.875rem; line-height: 2.2; } #designers .inner .txt02 { margin-top: 15px; } #designers .inner .img01 { margin-top: 34px; } #designers .inner .designersList { margin-top: 28px; text-align: center; font-size: 0; } #designers .inner .designersList li { display: inline-block; font-size: 12px; font-size: 0.75rem; position: relative; -moz-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); -ms-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); -webkit-transform: translate(0, 30px); -moz-transform: translate(0, 30px); -ms-transform: translate(0, 30px); transform: translate(0, 30px); opacity: 0; filter: alpha(opacity=0); /* margin-bottom: 10px;*/ padding-bottom: 24px; } #designers .inner .designersList li.action { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); opacity: 1; } #designers .inner .designersList li#webDevelopes { margin-right: 33px; } #designers .inner .designersList li#webDevelopes p { right: -0px; } #designers .inner .designersList li#designer { margin-right: 35px; } #designers .inner .designersList li#designer p { right: -25px; } #designers .inner .designersList li#producer { margin-right: 33px; } #designers .inner .designersList li#producer p { right: -28px; } #designers .inner .designersList li#director { margin-right: 47px; } #designers .inner .designersList li#director p { right: -33px; } #designers .inner .designersList li#planner { margin-right: 38px; } #designers .inner .designersList li#planner p { right: -32px; } #designers .inner .designersList li#artDirector { margin-right: 34px; } #designers .inner .designersList li#artDirector p { right: -15px; } #designers .inner .designersList li#copywriter { margin-right: 36px; } #designers .inner .designersList li#copywriter p { right: -15px; } #designers .inner .designersList li#illustrator { margin-right: 21px; } #designers .inner .designersList li#illustrator p { right: -12px; } #designers .inner .designersList li#artist { margin-right: 25px; } #designers .inner .designersList li#artist p { right: -10px; } #designers .inner .designersList li#photographer { margin-right: 23px; } #designers .inner .designersList li#photographer p { right: -4px; } #designers .inner .designersList li#videographer { margin-right: 0px; } #designers .inner .designersList li#videographer p { right: -20px; } #designers .inner .designersList li img { display: inline-block; text-align: center; vertical-align: bottom; } #designers .inner .designersList li .positionName { display: block; text-align: center; margin-top: 8px; /* font-family: "Helvetica Neue", Helvetica, Arial, Verdana, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, Osaka, "MS Pゴシック", Arial, sans-serif;*/ font-size: 10px; font-size: 0.625rem; letter-spacing: 0.5px; } #designers .inner .designersList li p { position: absolute; opacity: 0; filter: alpha(opacity=0); top: -5px; } #designers .inner .outputList { padding-top: 28px; text-align: center; font-size: 0; width: 1200px; margin: 0 auto; } #designers .inner .outputList:last-child { margin-top: 0; } #designers .inner .outputList li { display: inline-block; font-size: 12px; font-size: 0.75rem; /* margin-right: 24px;*/ margin: 0 12px; padding-bottom: 20px; } /* #designers .inner .outputList li:last-child { margin-right: 0; } */ #designers .inner .outputList li img { display: inline-block; text-align: center; vertical-align: bottom; } #designers .inner .outputList li .outputName { display: block; text-align: center; margin-top: 7px; font-size: 10px; font-size: 0.625rem; letter-spacing: 0.5px; } #designers .inner .outputList li:nth-child(9){ } #works { width: 1210px; margin: 150px auto 0; text-align: center; } @media screen and (min-width:768px) and ( max-width:1024px) { } @media screen and (max-width:1200px) { #works { width: 768px; } #clients .listWrap{ width: 700px; margin: 0 auto; padding-left: 100px; } } @media screen and (max-width:1300px) { #designers .inner .designersList { width: 768px; margin-left: auto; margin-right: auto; } #designers .inner .outputList{ width: 868px; margin-left: auto; margin-right: auto; } } #works h1{ font-family: "ゴシックMB101 B", 'Gothic MB101 Bold', sans-serif; font-size: 34px; color: #000; } #works .worksWrap { margin-top: 50px; text-align: center; font-size: 0; } #works .worksWrap .worksThumb { width: 250px; height: 250px; display: inline-block; /* margin-right: 70px;*/ position: relative; vertical-align: top; margin: 0 20px 40px 20px; } #works .worksWrap .worksThumb:last-child { /* margin-right: 0;*/ } #works .worksWrap .worksThumb a { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; width: 250px; height: 250px; position: relative; } #works .worksWrap .worksThumb a img { position: absolute; top: 0; left: 0; } #works .worksWrap .worksThumb a ul { font-size: 16px; font-size: 1rem; font-weight: bold; align-self: center; margin: auto; z-index: 11; opacity: 0; filter: alpha(opacity=0); transition: all .7s ease; } #works .worksWrap .worksThumb a ul li { color: #FFF; letter-spacing: 2px; margin-bottom: 15px; font-weight: bold; font-family: "Noto Sans Japanese", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, Osaka, "MS Pゴシック", Arial, sans-serif; } #works .worksWrap .worksThumb a ul li:last-child { margin-bottom: 0; } #works .worksWrap .worksThumb a::before { content: ""; width: 100%; height: 100%; position: absolute; box-shadow: 0 0 0 0 transparent inset; z-index: 10; transition: all .7s ease; } #works .worksWrap .worksThumb a:hover ul { opacity: 1; filter: alpha(opacity=100); } #works .worksWrap .worksThumb a:hover::before { box-shadow: 0 0 0 125px rgba(0, 0, 0, 0.5) inset; } #works .worksWrap .worksThumb h3 { /* font-family: "Helvetica Neue", Helvetica, Arial, Verdana, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, Osaka, "MS Pゴシック", Arial, sans-serif;*/ font-family: "Noto Sans Japanese", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, Osaka, "MS Pゴシック", Arial, sans-serif; font-size: 12px; /* font-size: 0.7rem;*/ font-weight: 500; text-align: left; position: absolute; bottom: -20px; } #works #moreBtn { display: block; width: 600px; margin: 80px auto 0; line-height: 58px; font-size: 20px; font-size: 1.25rem; /* font-family: "Helvetica Neue", Helvetica, Arial, Verdana, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, Osaka, "MS Pゴシック", Arial, sans-serif;*/ font-family: "Noto Sans Japanese", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, Osaka, "MS Pゴシック", Arial, sans-serif; font-weight: bold; border: #000 solid 1px; text-align: center; -moz-transition: all 0.6s; -webkit-transition: all 0.6s; -ms-transition: all 0.6s; transition: all 0.6s; } #works #moreBtn:hover { color: #FFF; background: #000; } #company { margin-top: 150px; padding-top: 150px; text-align: center; background: #fbfbfe; font-size: 14px; font-size: 0.875rem; } #company h1{ font-family: "ゴシックMB101 B", 'Gothic MB101 Bold', sans-serif; font-size: 34px; color: #000; } #company .inner { /* width: 1210px;*/ min-width: 768px; margin: 0 auto; } #company ul { margin-top: 38px; } #company ul li { margin-bottom: 30px; } #company ul li:last-child { margin-bottom: 0; } #company #map { margin-top: 64px; } #company #map p { width: 100%; height: 20px; margin: 0 auto; padding-left: 15px; line-height: 1.3; background: url("/images/top/sec_company_icon01.gif") no-repeat 525px 0px; } #company #map #mapBody { width: 100%; height: 500px; margin-top: 30px; } #clients { width: 1210px; margin: 150px auto 0; } #clients h1 { text-align: center; font-family: "ゴシックMB101 B", 'Gothic MB101 Bold', sans-serif; font-size: 34px; color: #000; } #clients .listWrap { margin-top: 50px; font-size: 0; } #clients .listWrap ul { display: inline-block; width: 300px; text-align: left; font-size: 12px; font-size: 0.75rem; vertical-align: top; } #clients .listWrap ul li { margin-bottom: 20px; } #clients .listWrap ul li:last-child { /* margin-bottom: 0;*/ } @media screen and (max-width:1024px) { #clients { width: 768px; margin: 150px auto 0 auto; } /* #clients .listWrap ul li:last-child { margin-bottom: 20px; } */ } #service { /* width: 1210px;*/ min-width: 768px; margin: 200px auto 0; text-align: center; } #service h1 { text-align: center; font-family: "ゴシックMB101 B", 'Gothic MB101 Bold', sans-serif; font-size: 34px; color: #000; } #service h2 { margin-top: 46px; } #service .img { width: 500px; margin: 15px auto 0; padding: 4px; border: 1px solid #000; position: relative; } #service .img .bg { display: block; width: 490px; height: 250px; position: absolute; top: 4px; left: 4px; box-shadow: 0 0 0 0 transparent inset; z-index: 10; transition: all .7s ease; } #service .img .bg::after { content: "FREE SPACE"; display: block; position: absolute; height: 19px; top: 0; bottom: 0; left: 0; right: 0; margin: auto; color: #FFF; font-size: 18px; font-size: 1.125rem; font-weight: bold; letter-spacing: 1px; opacity: 0; transition: all .7s ease .5s; } #service .img .bg:hover { box-shadow: 0 0 0 125px rgba(0, 0, 0, 0.5) inset; } #service .img .bg:hover::after { opacity: 1; } #service .img img { display: block; vertical-align: bottom; position: relative; } #recruit { /* width: 1210px;*/ min-width: 768px; padding-top: 150px; margin: 50px auto 0; text-align: center; } #recruit h1 { text-align: center; font-family: "ゴシックMB101 B", 'Gothic MB101 Bold', sans-serif; font-size: 34px; color: #000; } #recruit .inner { width: 800px; margin: 0 auto; padding: 40px 0 30px; /* border: 1px solid #000;*/ } #recruit .inner p { margin-top: 20px; font-size: 14px; font-size: 0.875rem; line-height: 3; } #recruit .inner .txt a { display: block; width: 250px; height: 50px; line-height: 48px; font-size: 18px; border: #000 solid 1px; text-align: center; -moz-transition: all 0.6s; -webkit-transition: all 0.6s; -ms-transition: all 0.6s; transition: all 0.6s; margin: 0 auto; letter-spacing: 2px; } #recruit .inner .txt a:hover { color: #FFF; background: #000; } #contact { /* width: 1210px;*/ min-width: 768px; margin: 50px auto 0; padding-top: 150px; text-align: center; } #contact h1 { text-align: center; font-family: "ゴシックMB101 B", 'Gothic MB101 Bold', sans-serif; font-size: 34px; color: #000; } #contact .inner { margin-top: 52px; font-size: 0; } #contact .inner .box { display: inline-block; padding: 0 60px; font-size: 14px; font-size: 0.875rem; vertical-align: top; } #contact .inner #tel .txt { margin-top: 28px; display: block; font-size: 28px; font-weight: bold; text-align: center; /* font-family: "Helvetica Neue", Helvetica, Arial, Verdana, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, Osaka, "MS Pゴシック", Arial, sans-serif;*/ letter-spacing: 1px; } #contact .inner #mail .txt { margin-top: 15px; } #contact .inner #mail .txt a { display: block; width: 250px; height: 50px; line-height: 48px; font-size: 18px; border: #000 solid 1px; text-align: center; /* font-family: "Helvetica Neue", Helvetica, Arial, Verdana, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, Osaka, "MS Pゴシック", Arial, sans-serif;*/ -moz-transition: all 0.6s; -webkit-transition: all 0.6s; -ms-transition: all 0.6s; transition: all 0.6s; } #contact .inner #mail .txt a:hover { color: #FFF; background: #000; }