/*
Theme Name: roundtable
Text Domain: roundtable
Version: 999999999999999999999
Author: Roundtable
*/
@charset "UTF-8"; html { margin: auto; overflow-x: hidden; background: #000; font-size: 15px; color: #fff; line-height: 1.4em; } body{}body, input, textarea, select, button { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -moz-font-feature-settings: "liga", "kern"; } body { margin: 52px 0 0 0; color: #fff; font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "Noto Sans Japanese", "ヒラギノ角ゴ ProN W3", Meiryo, sans-serif; overflow-x: hidden; } @media (min-width: 769px) { html { font-size: 17px; } body { margin: 0; } } * { margin: 0; padding: 0; border: none; font-size: 1em; letter-spacing: 0.06em; list-style: none; } img { max-width: 100%; } a { color: #fff; text-decoration: underline; 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; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; */ } a:link { text-decoration: none; } a:hover, a:active { text-decoration: none; } a:visited { text-decoration: none; color: #fff; } hr { clear: both; } table { padding: 8px 0 24px; } th,td { vertical-align: top; padding: 4px 8px; text-align: left; } th p,td p { padding: 0 !important; margin: 0 !important; line-height: initial !important; } tr { padding: 8px 0; } td { } .none { display: none; } .font, .font * { font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "Noto Sans Japanese", "ヒラギノ角ゴ ProN W3", Meiryo, sans-serif !important; letter-spacing: 0.08em; } @media (max-width: 769px) { #load { display: none; } .spnone { display: none; } } @media (min-width: 769px) { .none { display: none; } } #load { position: fixed; z-index: 999; top: 0; left: 0; width: 100vw; height: 100vh; margin: auto; text-align: center; background: #000; color: #555; cursor: pointer; display: flex; display: -webkit-flex; flex-wrap: nowrap; flex-direction: column; justify-content: center; align-items: center; align-content: center; font-size: .7rem; } #load:after { content: ''; display: block; background: url("https://scontent-nrt1-1.xx.fbcdn.net/v/t31.0-8/18077245_1640147799336427_776837895048078905_o.jpg?oh=1363279d7598d20b41581831334fb830&oe=5B16E35B") 50% 50%; width: 400vw; height: 200vh; position: fixed; top: -100vh; left: -100vw; background-size: cover; z-index: -1; opacity: .7; filter: blur(6px); -webkit-filter: blur(6px); animation: fadebg 50s Linear 0s forwards; -webkit-animation: fadebg 50s Linear 0s forwards; } @media (max-width: 769px) { #load:after { width: 400vw; height: 104vh; top: -2vh; left: -100vw; } } @keyframes fadebg { 0% { -moz-transform: translateX(0px); -webkit-transform: translateX(0px); -o-transform: translateX(0px); -ms-transform: translateX(0px); transform: translateX(0px); } 100% { -moz-transform: translateX(-100vw); -webkit-transform: translateX(-100vw); -o-transform: translateX(-100vw); -ms-transform: translateX(-100vw); transform: translateX(-100vw); } } @-webkit-keyframes fadebg { 0% { -moz-transform: translateX(0px); -webkit-transform: translateX(0px); -o-transform: translateX(0px); -ms-transform: translateX(0px); transform: translateX(0px); } 100% { -moz-transform: translateX(-100vw); -webkit-transform: translateX(-100vw); -o-transform: translateX(-100vw); -ms-transform: translateX(-100vw); transform: translateX(-100vw); } } #load>div { animation: fadeIn 2s ease 2s forwards; -webkit-animation: fadeIn 2s ease 2s forwards; width: 100%; } @keyframes fadeIn { 0% { opacity: 0; -moz-transform: translateY(-16px); -webkit-transform: translateY(-16px); -o-transform: translateY(-16px); -ms-transform: translateY(-16px); transform: translateY(-16px); } 100% { opacity: 1; -moz-transform: translateY(0px); -webkit-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); } } @-webkit-keyframes fadeIn { 0% { opacity: 0; -moz-transform: translateY(-16px); -webkit-transform: translateY(-16px); -o-transform: translateY(-16px); -ms-transform: translateY(-16px); transform: translateY(-16px); } 100% { opacity: 1; -moz-transform: translateY(0px); -webkit-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); } } #load svg { width: 36%; height: 38px; max-width: 240px; fill: #fff; display: block; margin: 0 auto 32px; } #load span { display: block; position: relative; width: 20px; height: 20px; margin: auto; -webkit-animation: rotate 1s linear infinite; -moz-animation: rotate 1s linear infinite; -ms-animation: rotate 1s linear infinite; -o-animation: rotate 1s linear infinite; animation: rotate 1s linear infinite; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; border-top: 1px solid #545a6a; border-bottom: 1px solid #d4d4db; border-left: 1px solid #545a6a; border-right: 1px solid #d4d4db; opacity: 1; } @keyframes rotate { 0% { transform: rotateZ(-360deg); -webkit-transform: rotateZ(-360deg); -moz-transform: rotateZ(-360deg); -o-transform: rotateZ(-360deg); } 100% { transform: rotateZ(0deg); -webkit-transform: rotateZ(0deg); -moz-transform: rotateZ(0deg); -o-transform: rotateZ(0deg); } } @-webkit-keyframes rotate { 0% { transform: rotateZ(-360deg); -webkit-transform: rotateZ(-360deg); -moz-transform: rotateZ(-360deg); -o-transform: rotateZ(-360deg); } 100% { transform: rotateZ(0deg); -webkit-transform: rotateZ(0deg); -moz-transform: rotateZ(0deg); -o-transform: rotateZ(0deg); } } @-moz-keyframes rotate { 0% { transform: rotateZ(-360deg); -webkit-transform: rotateZ(-360deg); -moz-transform: rotateZ(-360deg); -o-transform: rotateZ(-360deg); } 100% { transform: rotateZ(0deg); -webkit-transform: rotateZ(0deg); -moz-transform: rotateZ(0deg); -o-transform: rotateZ(0deg); } } @-o-keyframes rotate { 0% { transform: rotateZ(-360deg); -webkit-transform: rotateZ(-360deg); -moz-transform: rotateZ(-360deg); -o-transform: rotateZ(-360deg); } 100% { transform: rotateZ(0deg); -webkit-transform: rotateZ(0deg); -moz-transform: rotateZ(0deg); -o-transform: rotateZ(0deg); } } #load span { } .loaded #load div { animation: fadeOutLogo 3s ease 3s forwards; -webkit-animation: fadeOutLogo 3s ease 3s forwards; } @keyframes fadeOutLogo { 0% { opacity: 1; -moz-transform: translateY(0px); -webkit-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); } 100% { opacity: 0; -moz-transform: translateY(16px); -webkit-transform: translateY(16px); -o-transform: translateY(16px); -ms-transform: translateY(16px); transform: translateY(16px); } } @-webkit-keyframes fadeOutLogo { 0% { opacity: 1; -moz-transform: translateY(0px); -webkit-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); } 100% { opacity: 0; -moz-transform: translateY(16px); -webkit-transform: translateY(16px); -o-transform: translateY(16px); -ms-transform: translateY(16px); transform: translateY(16px); } } .loaded #load { animation: fadeOut 1.5s ease .5s forwards; -webkit-animation: fadeOut 1.5s ease .5s forwards; z-index: 2; } @keyframes fadeOut { 0% { opacity: 1 } 99% { opacity: 0; -moz-transform: translateY(0px); -webkit-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); } 100% { opacity: 0; -moz-transform: translateY(-200vh); -webkit-transform: translateY(-200vh); -o-transform: translateY(-200vh); -ms-transform: translateY(-200vh); transform: translateY(-200vh); } } @-webkit-keyframes fadeOut { 0% { opacity: 1 } 99% { opacity: 0; -moz-transform: translateY(0px); -webkit-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); } 100% { opacity: 0; -moz-transform: translateY(-200vh); -webkit-transform: translateY(-200vh); -o-transform: translateY(-200vh); -ms-transform: translateY(-200vh); transform: translateY(-200vh); } } #top #load { display: block; } footer { padding: 24px 7%; width: 100%; box-sizing: border-box; font-size: .75rem; border-top: 1px solid #777; margin: 0; background: #000; } footer p small { font-size: 10px; display: block; margin-top: 32px; opacity: .8; } footer a,#company a { border-bottom: 1px solid #777; } @media (min-width: 769px) { footer section { width: 100%; margin: auto; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-align-content: space-between; -ms-flex-line-pack: justify; align-content: space-between; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; } footer section div { /* width: 50%; */ margin: 0 24px; } footer section>div>address { /* width:50%; */ float: left; margin: 0 32px 0 0; } } footer ul { padding: 2px 0 16px 6px; } footer ul>li { list-style: square inside; margin: 4px 0; } footer p { margin: 1.2em 0; } footer h1 { font-size: 1.1rem; /* border-bottom: 1px solid #777; */ font-weight: normal; display: inline-block; margin: 0.8em 0 0 -1px; padding: 0; /* letter-spacing: -0.03rem; */ line-height: 1.8rem; /* font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", serif; */ } address { font-style: normal; } footer>small { font-size: .5rem; display: block; color: #fff; margin: 2.4em auto .8em; text-align: center; width: 100%; /* letter-spacing: .13em !important; */ } #gotop { display: block; text-align: center; background: #000; padding: 20px 0 8px; } #gotop:before { content: ''; display: block; width: 16px; height: 16px; margin: auto; color: #fff; border-top: 1px solid; border-left: 1px solid; -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } @media (min-width: 769px) { #gotop { display: none; } } /*============================ #header ============================*/ @media (max-width: 769px) { #header { width: 100vh; } #header>h1 { margin: 0 auto; display: block; position: fixed; z-index: 2; width: 100%; top: 0px; left: 0; text-align: center; font-weight: normal; /* background: #000; */ } #header>h1 a { text-decoration: none; font-size: 1.15rem; display: block; padding: 14px 0; /* filter: drop-shadow(0px 1px 1px rgba(255,255,255,0.5)); */ } #header>h1 svg { height: 26px; /* display: block; */ fill: #fff; /* vertical-align: middle; */ margin: 0 auto; -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -ms-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; transition: all .4s ease-in-out; } #header.menu>h1 svg { -moz-transform: scale(1.17) translateY(60px); -webkit-transform: scale(1.17) translateY(60px); -o-transform: scale(1.17) translateY(60px); -ms-transform: scale(1.17) translateY(60px); transform: scale(1.17) translateY(60px); fill: #fff; z-index: 999; } #header>h1 span { letter-spacing: 4px; } #header>.font>a { display: inline-block; margin: auto; padding: 16px 8px; text-decoration: none; text-align: center; } #header>.font>a>svg { fill: #fff; height: 60px; width: 60px; vertical-align: middle; display: inline-block; } #header>.font>a>span { margin-left: 4px; display: inline-block; } #header.menu>h1 { z-index: 9; background: transparent; } #header.menu>.font>a { color: #fff; } #header.menu>.font>a>svg { fill: #fff; } #header.menu>.font>a>span { } #header>.gomenu { width: 20px; margin: 0 0 0 auto; display: block; text-align: left; color: #fff; text-decoration: none; padding: 22px 17px; text-indent: -99999px; position: fixed; z-index: 9; top: 0; right: 0; font-size: 0; } #header>.address { display: none; } #header>.gomenu:before { display: block; content: ""; width: 100%; height: 1px; background: #fff; transition: .3s; box-shadow: 0 6px 0 #fff; } #header>.gomenu:after { display: block; content: ""; width: 100%; height: 1px; background: #fff; transition: .3s; margin: 11px 0 0 0; } #header.menu>.gomenu { color: #fff; z-index: 9; } #header.menu>.gomenu:before { box-shadow: none; -moz-transform: rotate(45deg); margin-top: 6px; -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); background: #fff; box-shadow: transparent; } #header.menu>.gomenu:after { display: block; content: ""; height: 1px; margin-top: 0px; background: #fff; transition: .3s; -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } #header>nav { width: 100vw; height: 100vh; box-sizing: border-box; background: #fff; color: #fff; position: fixed; z-index: 8; top: 0; left: 0; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-content: center; -ms-flex-line-pack: center; align-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -moz-transform: translateX(100vw); -webkit-transform: translateX(100vw); -o-transform: translateX(100vw); -ms-transform: translateX(100vw); transform: translateX(100vw); } #header.menu>nav { -moz-transform: translateX(0px); -webkit-transform: translateX(0px); -o-transform: translateX(0px); -ms-transform: translateX(0px); transform: translateX(0px); opacity: 1; background: transparent; animation: menuon .6s ease 0s forwards; -webkit-animation: menuon .6s ease 0s forwards; } @keyframes menuon { 0% { -moz-transform: translateX(0px); -webkit-transform: translateX(0px); -o-transform: translateX(0px); -ms-transform: translateX(0px); transform: translateX(0px); opacity: 1; background: transparent; } 100% { background: rgba(85, 85, 85, 0.9); } } @-webkit-keyframes menuon { 0% { -moz-transform: translateX(0px); -webkit-transform: translateX(0px); -o-transform: translateX(0px); -ms-transform: translateX(0px); transform: translateX(0px); opacity: 1; background: transparent; } 100% { background: rgba(85, 85, 85, 0.9); } } #header>nav>ul { text-align: center; } #header>nav>ul>li { text-align: center; display: block; opacity: 0; } #header>nav>ul>li>a { text-decoration: none; display: block; padding: 12px; font-size: .9rem; color: #fff; text-transform: uppercase; } #header>nav>ul>li>a small { display: none; } #header>nav>ul>.icon { display: inline-block; margin: 16px 4px; } #header>nav>ul>.icon img { width: 24px; vertical-align: bottom; display: inline-block; margin: 0 0 1px 0; } #header>nav>ul>.icon svg { fill: #fff; height: 16px; width: 16px; } #header>nav>ul>.icon>a { display: inline; } #header.menu>nav>ul>li:nth-child(1) { -webkit-animation: gomenu 0.4s ease 0.5s 1 forwards; animation: gomenu 0.4s ease 0.5s 1 forwards; } #header.menu>nav>ul>li:nth-child(2) { -webkit-animation: gomenu 0.4s ease 0.6s 1 forwards; animation: gomenu 0.4s ease 0.6s 1 forwards; } #header.menu>nav>ul>li:nth-child(3) { -webkit-animation: gomenu 0.4s ease 0.7s 1 forwards; animation: gomenu 0.4s ease 0.7s 1 forwards; } #header.menu>nav>ul>li:nth-child(4) {-webkit-animation: gomenu 0.4s ease 0.8s 1 forwards;animation: gomenu 0.4s ease 0.8s 1 forwards;} #header.menu>nav>ul>li:nth-child(5) { -webkit-animation: gomenu 0.4s ease 1.5s 1 forwards; animation: gomenu 0.4s ease 1.5s 1 forwards; } #header.menu>nav>ul>li:nth-child(6) { -webkit-animation: gomenu 0.4s ease 1.6s 1 forwards; animation: gomenu 0.4s ease 1.6s 1 forwards; } #header.menu>nav>ul>li:nth-child(7) { -webkit-animation: gomenu 0.4s ease 1.7s 1 forwards; animation: gomenu 0.4s ease 1.7s 1 forwards; } #header.menu>nav>ul>li:nth-child(8) { -webkit-animation: gomenu 0.4s ease 1.8s 1 forwards; animation: gomenu 0.4s ease 1.8s 1 forwards; } #header.menu>nav .address { opacity: 0; -webkit-animation: gomenu 0.4s ease 1.9s 1 forwards; animation: gomenu 0.4s ease 1.9s 1 forwards; } #header.menu>nav>ul>li:nth-child(10) { -webkit-animation: gomenu 0.4s ease 2s 1 forwards; animation: gomenu 0.4s ease 2s 1 forwards; } #header.menu>nav>ul>li:nth-child(11) { -webkit-animation: gomenu 0.4s ease 2.1s 1 forwards; animation: gomenu 0.4s ease 2.1s 1 forwards; } #header.menu>nav>ul>li:nth-child(12) { -webkit-animation: gomenu 0.4s ease 2.2s 1 forwards; animation: gomenu 0.4s ease 2.2s 1 forwards; } #header.menu>nav>ul>li:nth-child(13) { -webkit-animation: gomenu 0.4s ease 2.3s 1 forwards; animation: gomenu 0.4s ease 2.3s 1 forwards; } #header.menu>nav>ul>li:nth-child(14) { -webkit-animation: gomenu 0.4s ease 2.4s 1 forwards; animation: gomenu 0.4s ease 2.4s 1 forwards; } @-webkit-keyframes gomenu { 0% { opacity: 0; filter: alpha(opacity=0); -moz-opacity: 0; -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)" -moz-transform: scale(.9) translateY(-8px); -webkit-transform: scale(.9) translateY(-8px); -o-transform: scale(.9) translateY(-8px); -ms-transform: scale(.9) translateY(-8px); transform: scale(.9) translateY(-8px); } 100% { opacity: 1; filter: alpha(opacity=100); -moz-opacity: 1; -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)" -moz-transform: scale(1) translateY(0px); -webkit-transform: scale(1) translateY(0px); -o-transform: scale(1) translateY(0px); -ms-transform: scale(1) translateY(0px); transform: scale(1) translateY(0px); } } @keyframes gomenu { 0% { opacity: 0; filter: alpha(opacity=0); -moz-opacity: 0; -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)" -moz-transform: scale(.9) translateY(-8px); -webkit-transform: scale(.9) translateY(-8px); -o-transform: scale(.9) translateY(-8px); -ms-transform: scale(.9) translateY(-8px); transform: scale(.9) translateY(-8px); } 100% { opacity: 1; filter: alpha(opacity=100); -moz-opacity: 1; -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)" -moz-transform: scale(1) translateY(0px); -webkit-transform: scale(1) translateY(0px); -o-transform: scale(1) translateY(0px); -ms-transform: scale(1) translateY(0px); transform: scale(1) translateY(0px); } } } @media (min-width: 769px) { #header { width: 100%; height: 1px; /* max-width: 1080px; */ margin: 0 auto; filter: drop-shadow(0px 1px 3px rgba(0, 0, 0, .2)); position: fixed; top: 0; left: 0; z-index: 1; } #header>h1 { /* width: 34%; */ /* max-width: 140px; */ margin: auto; padding: 24px 0 0 34px; display: block; float: left; text-align: center; line-height: 3.5em; font-size: .8rem; } #header>.font>a { display: block; padding: 4px; color: #fff; text-align: center; font-size: .75rem; line-height: 3em; text-decoration: none; font-weight: normal; white-space: nowrap; } #header>.font>a span { display: block; margin: auto; } #header>.font>a>svg { fill: #fff; margin: auto; width: 140px; } #header>.gomenu { display: none; } #header>nav { /* width: calc(100% - 340px); */ float: right; padding: 0; } #header>.address { color: #fff; text-align: right; float: right; width: calc(100% - 340px); padding: 2vh 48px 1vh 0; font-size: .8rem; } #header a { color: #fff; text-decoration: none; } #header a svg { fill: #fff; width: 172px; height: 27px; margin: auto; } #header a span { display: block; letter-spacing: 3px; } #header>nav>ul { text-align: right; padding: 16px 26px 0 0; } #header>nav>.address { display: none; } #header>nav>ul>li { display: inline-block; } #header>nav>ul>li.icon img { width: 21px; vertical-align: bottom; margin: 0 0 2px -1px; } #header>nav>ul>li>a { text-decoration: none; display: inline-block; padding: 4px 2px 6px; margin: 11px 8px 0 0; text-align: center; font-size: .7rem; border-bottom: 2px solid transparent; text-transform: uppercase; } #header>nav>ul>li>a:hover { border-bottom-color: #fff; } #header>nav>ul>li>a small { display: block; font-size: .5rem; } #header>nav>ul.icon { padding: 0 .4vh; } #header>nav>ul>.icon svg {fill: #fff;height: 15px;width: 15px;margin: 0 2px -3px 2px;} #header>nav>ul.icon a { display: block; margin: 0; padding: .6vh; } .second #header { filter: drop-shadow(0px 1px 0.5px rgba(255, 255, 255, 1)); } .second #header * { color: #fff; fill: #fff; } .second #header>h1 { } .second #header a svg { width: 48px; float: left; margin: 0 11px 0 0; } .second #header a span { float: left; display: inline-block; } } .outviewClass { transition: transform 1.0s ease, opacity 1.0s ease; transform: translate(0, 10px); opacity: 0.0; } .inviewClass { transition: transform 1.0s ease, opacity 1.0s ease; transform: translate(0, 0); opacity: 1.0; } /*============================ #works ============================*/ #works { padding: 0 9% 40px; } #works>#sort { font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "Noto Sans Japanese", "ヒラギノ角ゴ ProN W3", Meiryo, sans-serif !important; padding: 48px 0; text-align: center; margin: auto; display: block; max-width: 769px; /* position: relative; */ /* z-index: 3; */ } #works>#sort>.close { /* padding: 0; */ opacity: 0; display: inline-block; /* height: 24px; */ position: relative; /* top: 7px; */ } /* #works>#sort>.close:before{ display: block; content: ""; width: 20px; height: 1px; margin: auto; -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); background: #fff; position: relative; top: 10px; } #works>#sort>.close:after{ display: block; content: ""; width: 20px; height: 1px; margin: auto; background: #fff; -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); position: relative; top: 10px; } */ #works>#sort>li { display: inline-block; cursor: pointer; padding: 4px 1%; color: #fff; font-size: .6rem; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; text-transform: uppercase; } #works>#items { width: 100%; position: relative; box-sizing: border-box; margin: 0 auto; } #works>#items>li { position: absolute; display: block; width: 100%; padding: 2px; box-sizing: border-box; overflow: hidden; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } @media (max-width: 769px) { #works { padding: 0 6% 40px; } #works>#sort { z-index: 0; width: 100vw; margin: -8px -7% 0; padding: 24px 0; } #works>#sort>.close { display: block; top: auto; } } #works>#items>li>a { display: block; position: relative; width: 100%; height: 100%; /*min-height: 14vh;*/ background: #eee; } #works>#items>li>a>img { width: 100%; height: 100%; 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; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } #works>#items>li>a>span { display: block; mix-blend-mode: hard-light; opacity: 0; position: absolute; top: 0; left: 0; text-align: center; letter-spacing: 0.1rem; font-size: .8rem; /*font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", serif;*/ width: 100%; height: 100%; z-index: 1; color: #ffffff; text-shadow: 0 0 1px rgba(255, 255, 255, 0.6); background: #383838; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-content: center; -ms-flex-line-pack: center; align-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } #works>#items>li>a:hover>span { /* display: block; */ opacity: 1; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; } #works.sort>#sort>li.close { opacity: 1; } #works.house>#sort>li.house, #works.commercial>#sort>li.commercial, #works.interior>#sort>li.interior, #works.project>#sort>li.project, #works.others>#sort>li.others { opacity: .3; } #works.house>#items>li:not(.house), #works.commercial>#items>li:not(.commercial), #works.interior>#items>li:not(.interior), #works.project>#items>li:not(.project), #works.others>#items>li:not(.others) { display: none; height: 0; margin: 0; padding: 0; } /*============================ #worksentry ============================*/ #worksentry { background: #000; position: relative; padding: 0 6% 40px; margin: calc(50vh - 58px) auto 0; } #worksentry>header { padding: 32px 0 16px; width: 100%; max-width: 800px; margin: auto; } #worksentry>header>h1 { font-size: 1.3rem; font-weight: normal; padding: 0 0 .8rem; /* letter-spacing: -0.03rem; */ line-height: 1.8rem; /* font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", serif; */ } #worksentry>header>h2 { font-size: .85rem; font-weight: normal; padding: 0 0 .8rem; } #worksentry>header>time { text-align: right; display: block; font-size: .85rem; display: none; } #worksentry>.photos { max-width: 800px; margin: auto; } #worksentry>.photos p { display: block; padding: 4px 0; text-align: center; } #worksentry>.photos img { display: block; margin: auto !important; width: 100% !important; height: auto !important; } #worksentry>footer { padding: 40px 0 0; border: 0; margin: 32px auto; font-size: .8rem; display: block; width: auto; max-width: 640px; } #worksentry>footer p { margin: 8px 0; } #worksentry>footer table p { margin: 0; } #worksentry>footer table { padding: 0 24px 24px; } #worksentry>footer>.jp { margin-bottom: 40px; } #worksentry>footer table>tbody { } #worksentry>footer table>tbody>tr { } #worksentry>footer table>tbody>tr>th { font-weight: normal; text-align: left; padding: 0 16px 8px 0; white-space: nowrap; vertical-align: top; } #worksentry>footer table>tbody>tr>td { padding: 0 0 8px 0; } div#workstop { position: fixed; top: 0; width: 100%; z-index: -1; opacity: .9; } div#workstop img { height: calc(50vh); object-fit: cover; width: 100%; } @media (min-width: 769px) { #worksentry>footer>div { } div#workstop img { height: calc(100vh - 160px); } /*IE11*/ _:-ms-fullscreen, :root div#workstop img{ height:auto; } #worksentry { margin: calc(100vh - 160px) auto 0; } } .pn { padding: 0 0 32px; display: block; text-align: center; } .pn>.p, .pn>.n { padding: 20px 0; display: inline-block; line-height: 20px; } .pn>.p:before, .pn>.n:before { content: ''; display: inline-block; width: 16px; height: 16px; border-bottom: 1px solid; color: #fff; border-left: 1px solid; margin: 0px 16px; } .pn>.p:before { -webkit-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .pn>.n:before { -webkit-transform: rotate(135deg); -o-transform: rotate(135deg); -ms-transform: rotate(135deg); transform: rotate(135deg); margin-bottom: -13px; } p.worksend a { width: auto; display: inline-block; text-decoration: none; border: 0; padding: 8px 24px; font-size: .7rem; } p.worksend a:link { text-decoration: none; } /* p.worksend a:before { content: ''; display: inline-block; -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); width: 16px; height: 16px; border-bottom: 1px solid; color: #fff; border-left: 1px solid; margin: 0 6px -3px 0; } */ p.worksend { text-align: center; width: 100%; } /*============================ #profile ============================*/ #profile { max-width: 800px; margin: 104px auto 0; } #profile h1 { font-size: 1.4rem; font-weight: normal; padding: 0 0 .8rem; line-height: 1.8rem; /*font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", serif;*/ } #profile h2 { font-size: 1.1rem; margin: 16px 0 8px; /*font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", serif;*/ } #profile h2 span { display: block; font-weight: normal; font-size: .8rem; } #profile ul { margin-top: 40px; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; flex-wrap: wrap; justify-content: space-between; } #profile ul li { width: 26%; max-height: 320px; font-size: .8rem; margin-bottom: 64px; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; flex-direction: column; display: flex; justify-content: flex-start; } #profile ul li:nth-child(2) {/* width: 63%; */} #profile ul li:nth-child(2) a {/* width: 41.27%; */} #profile ul li img { width: 100%; height: auto; } .lightbox { display: none; } .featherlight:last-of-type { background: rgba(85, 85, 85, 0.9) !important; } .featherlight .featherlight-content { background: #000 !important; padding: 40px !important; } .featherlight .featherlight-close-icon { background: #000 !important; color: #fff !important; line-height: 56px !important; width: 56px !important; font-size: 24px !important; } .featherlight-content { font-size: .85rem; min-width: 50vw; } .featherlight-content img { width: 200px; height: 100%; margin-right: 40px; } .featherlight-content h2 { font-size: 1.1rem; margin-bottom: 24px; /*font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", serif;*/ } .featherlight-content h2 span { display: block; font-weight: normal; font-size: .8rem; } .featherlight-content .profhead { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; } .featherlight-content table { margin-top: 24px; } .featherlight-content table.en { margin-top: 24px; padding-top: 24px; border-top: 1px solid #fff; } .featherlight-content table th { white-space: nowrap; padding: 0 16px 8px 0; } .featherlight-content table th, .featherlight-content table td { vertical-align: top; } .featherlight-content table td span { display: block; } @media (max-width: 769px) { #profile { margin-top: 0; padding: 40px 6%; } #profile ul li { width: 46%; margin-bottom: 24px; } .featherlight-content img { width: 40%; } #profile h2 { margin-top: 16px; } #profile ul li table { margin-top: 16px; } #profile ul li table th { padding-bottom: 0; } #profile ul li:first-child {/* width: 100%; */} #profile ul li:first-child a {/* width: 46%; */} #profile ul li:nth-child(2) { width: 46%; } #profile ul li:nth-child(2) a { width: 100%; } } /*============================ #company ============================*/ #company { max-width: 800px; margin: 104px auto 80px; font-size: .85em; }#company iframe {filter: grayscale(100%);-webkit-filter: grayscale(100%);} #company p { font-weight: normal; padding: .8rem 0; line-height: 1.6rem; } #company h1 { font-size: 1.4rem; font-weight: normal; padding: 0 0 .8rem; line-height: 1.8rem; } #company h2 { font-size: 1.1rem; font-weight: normal; margin-bottom: 16px; } #company h3 { font-weight: normal; margin-top: 24px; font-size: 1rem; } #company h4 { font-weight: normal; margin-top: 24px; } #company .block { margin-top: 40px; } #company address { margin-top: 16px; } .map { height: 40vh; } @media (max-width: 769px) { #company { margin-top: 0; padding: 40px 6%; } }
.tel-link-none {pointer-events: none;text-decoration: none;border-bottom: none}