@charset “UTF-8”;
.u-beta {
color: #11ffaa !important;
}
-
{ margin: 0; padding: 0;
}
html {
--link-color:rgb(0, 112, 201); --main-background-color:#FFF; --footer-color:#FFF; --main-text-color:#000; --post-title-color:#282828; --message-border-color:#000; --author-color:#212529; &[data-theme="light"] { --link-color:rgb(0, 112, 201); --main-background-color:#FFF; --footer-color:#FFF; --light-color:#cfcfcf; --main-text-color:#000; --post-title-color:#282828; --message-border-color:#000; --author-color:#212529; } &[data-theme="dark"] { --link-color:rgb(100, 210, 255); --main-background-color:#171717; --footer-color:#282828; --light-color:#4a4a4a; --main-text-color:#FFF; --post-title-color:#FFF; --message-border-color:#282828; --author-color:#FFF; }
}
@media (prefers-color-scheme: dark) {
html { --link-color:rgb(0, 112, 201); --main-background-color:#FFF; --footer-color:#FFF; --light-color:#cfcfcf; --main-text-color:#000; --post-title-color:#282828; --message-border-color:#000; --author-color:#212529; &[data-theme="light"] { --link-color:rgb(0, 112, 201); --main-background-color:#FFF; --footer-color:#FFF; --light-color:#cfcfcf; --main-text-color:#000; --post-title-color:#282828; --message-border-color:#000; --author-color:#212529; } &[data-theme="dark"] { --link-color:rgb(100, 210, 255); --main-background-color:#171717; --footer-color:#282828; --light-color:#4a4a4a; --main-text-color:#FFF; --post-title-color:#FFF; --message-border-color:#282828; --author-color:#FFF; } }
}
body {
margin: 0; padding: 0; background: var(--main-background-color) !important; background-color: var(--main-background-color) !important; // font-family: Segoe UI,SegoeUI,Helvetica Neue, Helvetica, Arial, "PingFang SC","Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, Meiryo, sans-serif !important; font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Arial", "PingFang SC", "Hiragino Sans GB", "STHeiti", "Microsoft YaHei", "Microsoft JhengHei", "Source Han Sans SC", "Noto Sans CJK SC", "Source Han Sans CN", "Noto Sans SC", "Source Han Sans TC", "Noto Sans CJK TC", "WenQuanYi Micro Hei", SimSun, sans-serif; font-weight: 400; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; line-height: 100%; box-sizing: border-box; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; -webkit-font-feature-settings: normal\9; font-feature-settings: normal\9; scroll-behavior: smooth !important;
} body::-webkit-scrollbar {
width: 10px;
}
body::-webkit-scrollbar-track {
background: transparent;
}
body::-webkit-scrollbar-thumb {
background: transparent; -webkit-border-radius: 4px; border-radius: 4px;
}
body:hover::-webkit-scrollbar-thumb {
background: var(--light-color);
} body::-webkit-scrollbar-thumb:hover {
background: var(--link-color);
}
/* .home-message__ttl a h2:hover{
border-bottom:1px solid var(--link-color)!important;
} */
hr {
height: 1px; background-color: var(--main-text-color); border: none;
}
.inverted {
filter: invert(100%);
}
.next a {
color: var(--main-text-color);
}
/*which was 165px in common.css*/
a {
&:hover { text-decoration: underline; color: var(--link-color); } color: var(--text);
}
@supports (-ms-ime-align: auto) {
body { -webkit-font-feature-settings: normal; font-feature-settings: normal; }
}
::-moz-selection, ::selection {
color: var(--main-background-color); background: var(--author-color); text-shadow: none;
}
h2 sup, h1 sup {
color: #e83e8c; font-size: 20px; font-style: italic;
}
a {
-webkit-tap-highlight-color: rgba(255, 255, 255, 0.5);
}
h1, h2, h3, h4, h5 {
margin: 0; padding: 0; font-weight: normal;
}
img {
border: none; vertical-align: text-bottom;
}
figure {
font-size: 0; line-height: 0;
}
input {
&[type="button"], &[type="checkbox"], &[type="email"], &[type="radio"], &[type="submit"], &[type="text"] { border-radius: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
}
textarea {
border-radius: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none;
}
@media screen and (min-width: 769px) {
.sp { display: none !important; } body { min-width: 1000px; }
}
@media screen and (max-width: 768px) {
.pc { display: none !important; }
}
.about-mission01__list li:before {
font-family: Helvetica Neue, Helvetica, Arial, "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, Meiryo, sans-serif; font-weight: normal;
}
.about-mission02__txt .u-ttl__01 span {
&:after, &:before { font-family: Helvetica Neue, Helvetica, Arial, "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, Meiryo, sans-serif; font-weight: normal; }
}
.u-regular {
font-family: Helvetica Neue, Helvetica, Arial, "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, Meiryo, sans-serif; font-weight: normal;
}
.about-ttl__label h2:before, .artist-why__block .u-ttl__02:before, .u-listLink, .u-m {
font-family: "HelveticaNeueMedium", "HelveticaNeue-Medium", "Helvetica Neue Medium", "HelveticaNeue", "Helvetica Neue", "Helvetica", "Arial", sans-serif; font-weight: 500; font-stretch: normal;
}
.about-ttl__label .lang-ja h2:before, .artist-why__block .lang-ja .u-ttl__02:before {
font-family: Helvetica Neue, Helvetica, Arial, "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, Meiryo, sans-serif;
}
.lang-ja {
.about-ttl__label h2:before, .artist-why__block .u-ttl__02:before, .u-listLink, .u-m { font-family: Helvetica Neue, Helvetica, Arial, "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, Meiryo, sans-serif; }
}
.u-clearfix:after {
visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;
}
.u-anchor {
margin-top: -112px; padding-top: 112px; &#home-visual { margin-top: -37px; padding-top: 37px; }
}
.u-ttl__01 {
color: #282828; font-size: 30px; line-height: 1.5; letter-spacing: 0.05em;
}
.u-ttl__02 {
color: #282828; font-size: 32px; line-height: 1.5; font-weight: 500; letter-spacing: 0.05em;
}
.u-ttl__03 {
color: #282828; font-size: 40px; line-height: 1.2;
}
.u-ttl__04 {
color: #282828; font-size: 52px; line-height: 1.2;
}
.u-ttl__dot {
position: relative; &:before { content: ""; position: absolute; top: 18px; left: -34px; width: 12px; height: 12px; border-radius: 50%; background: #282828; }
}
.u-txt__label {
color: #777; font-size: 18px; line-height: 1.75; letter-spacing: 0.05em;
}
.lang-ja .u-txt__label {
font-size: 16px;
}
.u-txt__link {
font-size: 14px; line-height: 1; letter-spacing: 0.1em; font-weight: bold; a { display: inline-block; text-decoration: none; color:white; padding-bottom: 10px; border-bottom: #fff 4px solid; position: relative; transition: all 0.1s cubic-bezier(0.445, 0.05, 0.55, 0.95); &:before { content: ""; position: absolute; bottom: -4px; left: 0px; width: 0; height: 4px; background: #777; transition: all 0.1s cubic-bezier(0.445, 0.05, 0.55, 0.95); } &:hover { color: rgb(197, 197, 197); &:before { width: 100%; } } } &.u-txt__link--white { color: #fff; a { color: #fff; border-bottom: #fff 4px solid; &:before { background: #ccc; } &:hover { color: #ccc; } } }
}
.u-txt__link–blank {
a { position: relative; transition: all 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95); &:after { content: ""; position: absolute; top: -11px; right: -16px; width: 10px; height: 10px; background: url(/assets/img/logo_Nest.png) no-repeat 0 0 / 100% auto; } &:hover:after { opacity: 0.8; } } &.u-txt__link--white a:after { background: url(./../images/icon_blank_white.png) no-repeat 0 0 / 100% auto; }
}
.u-listLink {
color: #000; font-size: 18px; line-height: 1.2; letter-spacing: 0.05em; a { color: #000; text-decoration: none; display: block; padding: 35px 0; border-bottom: #000 1px solid; position: relative; transition: all 0.1s cubic-bezier(0.445, 0.05, 0.55, 0.95); &:after { content: ""; position: absolute; right: 20px; top: 50%; width: 13px; height: 13px; border-top: 1px solid #777; border-right: 1px solid #777; -webkit-transform: rotate(45deg); transform: rotate(45deg); margin-top: -7px; } &:before { content: ""; position: absolute; bottom: -1px; left: 0px; width: 0; height: 1px; background: #777; transition: all 0.1s cubic-bezier(0.445, 0.05, 0.55, 0.95); } &:hover { color: #777; &:before { width: 100%; } } }
}
.u-center {
text-align: center;
}
.u-right {
text-align: right;
}
.u-white {
color: #fff; a { color: #fff; text-decoration: none; }
}
.u-black {
color: #282828; a { color: #282828; text-decoration: none; }
}
.u-gray {
color: #777; a { color: #777; text-decoration: none; }
}
.u-txt {
line-height: 2; letter-spacing: 0.05em;
}
.u-txt__10 {
font-size: 10px;
}
.u-txt__11 {
font-size: 11px;
}
.u-txt__12 {
font-size: 12px;
}
.u-txt__13 {
font-size: 13px;
}
.u-txt__14 {
font-size: 14px;
}
.u-txt__15 {
font-size: 15px;
}
.u-txt__16 {
font-size: 16px;
}
.u-txt__17 {
font-size: 17px;
}
.u-txt__18 {
font-size: 18px;
}
.u-txt__19 {
font-size: 19px;
}
.u-txt__20 {
font-size: 20px;
}
.u-txt__21 {
font-size: 21px;
}
.u-txt__22 {
font-size: 22px;
}
.u-txt__23 {
font-size: 23px;
}
.u-txt__24 {
font-size: 24px;
}
.u-txt__25 {
font-size: 25px;
}
.u-txt__26 {
font-size: 26px;
}
.u-txt__27 {
font-size: 27px;
}
.u-txt__28 {
font-size: 28px;
}
.u-txt__29 {
font-size: 29px;
}
.u-txt__30 {
font-size: 30px;
}
.u-artworks {
margin-top: 220px; padding: 130px 0 110px; background: #282828; position: relative; &:after { content: ""; position: absolute; left: 0; right: 0; margin: 0 auto; width: 4px; height: 64px; } &:before { content: ""; position: absolute; left: 0; right: 0; margin: 0 auto; width: 4px; height: 64px; top: -64px; background: #282828; } &:after { top: 0; background: #fff; } .u-ttl__03 { color: #fff; font-weight: 500; } .u-txt_16 { margin: 25px 20px 0; br { display: none; } } .u-txt__link { margin-top: 85px; }
}
.u-pagenavi {
margin-top: 160px; padding-bottom: 40px; display: flex; justify-content: center; align-items: center;
}
.u-pagenavi__wrap {
a { text-decoration: none; display: block; width: 12px; height: 12px; font-size: 0; line-height: 0; position: relative; transition: all 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95); &:hover { opacity: 0.8; } &:before { content: ""; position: absolute; top: -6px; right: 0; width: 12px; height: 12px; border-top: 1px solid #000; border-right: 1px solid #000; } } &:first-of-type { margin-right: 30px; a:before { -webkit-transform: rotate(225deg); transform: rotate(225deg); } } &:nth-of-type(2) { margin-left: 40px; a:before { -webkit-transform: rotate(45deg); transform: rotate(45deg); } }
}
.u-pagenavi__pager {
.wp-pagenavi { display: flex; justify-content: center; } a { text-decoration: none; transition: all 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95); &:hover { opacity: 0.8; } } .current, .first, .last, .page { margin: 0 18px; display: flex; justify-content: center; align-items: center; color: #000; font-size: 14px; letter-spacing: 0.05em; padding: 0 4px 10px; border-bottom: transparent 3px solid; } .first, .last { position: relative; } .first:after, .last:after { content: ""; display: block; position: absolute; width: 30px; height: 1px; background: #ccc; top: 8px; } .first { margin-right: 120px; &:after { right: -84px; } } .last { margin-left: 120px; &:after { left: -82px; } } .current { box-sizing: border-box; border-bottom: #000 3px solid; }
}
.u-pageTtl {
margin-top: 20px;
}
.u-pageTtl__txt {
max-width: none; margin-left: auto; margin-right: auto; padding-left: 4.33%; padding-right: 4.33%; box-sizing: border-box;
}
@media screen and (max-width: 1280px) {
.u-pageTtl__txt { padding-left: 4.16%; padding-right: 4.16%; }
}
.lang-ja .u-pageTtl__txt .u-txt__label {
font-size: 16px; color: #777; margin-top: 17px;
}
.u-pageTtl__txtLabel {
color: #282828; font-size: 40px; line-height: 1.2;
}
.u-pageTtl__line {
max-width: none; margin-left: auto; margin-right: auto; padding-left: 4.33%; padding-right: 4.33%; box-sizing: border-box; margin-top: 45px; width: 100%; height: 14px; position: relative; span { display: block; width: 100%; height: 14px; background: #e8e8e8; } &:after { content: ""; position: absolute; top: 0; right: 0; width: calc(50%); height: 14px; background: #e8e8e8; }
}
@media screen and (max-width: 1280px) {
.u-pageTtl__line { padding-left: 4.16%; padding-right: 4.16%; }
}
.js-fadein {
opacity: 0;
}
.js-fadein-anime {
-webkit-animation-name: fadeinAnime; animation-name: fadeinAnime; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-duration: 0.4s; animation-duration: 0.4s; -webkit-animation-delay: 0.2s; animation-delay: 0.2s; -webkit-animation-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95); animation-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95); visibility: visible !important;
}
@-webkit-keyframes fadeinAnime {
0% { opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px); } to { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }
}
@keyframes fadeinAnime {
0% { opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px); } to { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }
}
.js-ttl {
opacity: 0; span { display: inline-block; }
}
.js-ttl-anime {
overflow: hidden; -webkit-animation-name: ttlAnime__wrap; animation-name: ttlAnime__wrap; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); visibility: visible !important; span { -webkit-animation-name: ttlAnime__letter; animation-name: ttlAnime__letter; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-duration: 0.6s; animation-duration: 0.6s; -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); visibility: visible !important; &[data-delay="25"] { -webkit-animation-delay: 25ms; animation-delay: 25ms; } &[data-delay="50"] { -webkit-animation-delay: 50ms; animation-delay: 50ms; } &[data-delay="75"] { -webkit-animation-delay: 75ms; animation-delay: 75ms; } &[data-delay="100"] { -webkit-animation-delay: 100ms; animation-delay: 100ms; } &[data-delay="125"] { -webkit-animation-delay: 125ms; animation-delay: 125ms; } &[data-delay="150"] { -webkit-animation-delay: 150ms; animation-delay: 150ms; } &[data-delay="175"] { -webkit-animation-delay: 175ms; animation-delay: 175ms; } &[data-delay="200"] { -webkit-animation-delay: 200ms; animation-delay: 200ms; } &[data-delay="225"] { -webkit-animation-delay: 225ms; animation-delay: 225ms; } &[data-delay="250"] { -webkit-animation-delay: 250ms; animation-delay: 250ms; } &[data-delay="275"] { -webkit-animation-delay: 275ms; animation-delay: 275ms; } &[data-delay="300"] { -webkit-animation-delay: 300ms; animation-delay: 300ms; } &[data-delay="325"] { -webkit-animation-delay: 325ms; animation-delay: 325ms; } &[data-delay="350"] { -webkit-animation-delay: 350ms; animation-delay: 350ms; } &[data-delay="375"] { -webkit-animation-delay: 375ms; animation-delay: 375ms; } &[data-delay="400"] { -webkit-animation-delay: 400ms; animation-delay: 400ms; } &[data-delay="425"] { -webkit-animation-delay: 425ms; animation-delay: 425ms; } &[data-delay="450"] { -webkit-animation-delay: 450ms; animation-delay: 450ms; } &[data-delay="475"] { -webkit-animation-delay: 475ms; animation-delay: 475ms; } &[data-delay="500"] { -webkit-animation-delay: 500ms; animation-delay: 500ms; } &[data-delay="525"] { -webkit-animation-delay: 525ms; animation-delay: 525ms; } &[data-delay="550"] { -webkit-animation-delay: 550ms; animation-delay: 550ms; } &[data-delay="575"] { -webkit-animation-delay: 575ms; animation-delay: 575ms; } &[data-delay="600"] { -webkit-animation-delay: 600ms; animation-delay: 600ms; } &[data-delay="625"] { -webkit-animation-delay: 625ms; animation-delay: 625ms; } &[data-delay="650"] { -webkit-animation-delay: 650ms; animation-delay: 650ms; } &[data-delay="675"] { -webkit-animation-delay: 675ms; animation-delay: 675ms; } &[data-delay="700"] { -webkit-animation-delay: 700ms; animation-delay: 700ms; } &[data-delay="725"] { -webkit-animation-delay: 725ms; animation-delay: 725ms; } &[data-delay="750"] { -webkit-animation-delay: 750ms; animation-delay: 750ms; } &[data-delay="775"] { -webkit-animation-delay: 775ms; animation-delay: 775ms; } &[data-delay="800"] { -webkit-animation-delay: 800ms; animation-delay: 800ms; } &[data-delay="825"] { -webkit-animation-delay: 825ms; animation-delay: 825ms; } &[data-delay="850"] { -webkit-animation-delay: 850ms; animation-delay: 850ms; } &[data-delay="875"] { -webkit-animation-delay: 875ms; animation-delay: 875ms; } &[data-delay="900"] { -webkit-animation-delay: 900ms; animation-delay: 900ms; } &[data-delay="925"] { -webkit-animation-delay: 925ms; animation-delay: 925ms; } &[data-delay="950"] { -webkit-animation-delay: 950ms; animation-delay: 950ms; } &[data-delay="975"] { -webkit-animation-delay: 975ms; animation-delay: 975ms; } &[data-delay="1000"] { -webkit-animation-delay: 1000ms; animation-delay: 1000ms; } }
}
@-webkit-keyframes ttlAnime__wrap {
0% { opacity: 0; } to { opacity: 1; }
}
@keyframes ttlAnime__wrap {
0% { opacity: 0; } to { opacity: 1; }
}
@-webkit-keyframes ttlAnime__letter {
0% { -webkit-transform: translateY(1.5em); transform: translateY(1.5em); } to { -webkit-transform: translateY(0); transform: translateY(0); }
}
@keyframes ttlAnime__letter {
0% { -webkit-transform: translateY(1.5em); transform: translateY(1.5em); } to { -webkit-transform: translateY(0); transform: translateY(0); }
}
.menu.js-fadeOut, footer.js-fadeOut, main.js-fadeOut {
-webkit-animation-name: fadeOutAnime; animation-name: fadeOutAnime; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-duration: 0.6s; animation-duration: 0.6s; -webkit-animation-delay: 0; animation-delay: 0; -webkit-animation-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95); animation-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
@-webkit-keyframes fadeOutAnime {
0% { opacity: 1; } to { opacity: 0; }
}
@keyframes fadeOutAnime {
0% { opacity: 1; } to { opacity: 0; }
}
.home {
.home-lead__logoSymbol { opacity: 0; -webkit-transform: translateY(10px); transform: translateY(10px); transition: opacity 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0.1s, -webkit-transform 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0.1s; transition: opacity 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0.1s, transform 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0.1s; transition: opacity 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0.1s, transform 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0.1s, -webkit-transform 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0.1s; } .home-lead__logoTxt { opacity: 0; -webkit-transform: translateY(10px); transform: translateY(10px); transition: opacity 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0.2s, -webkit-transform 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0.2s; transition: opacity 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0.2s, transform 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0.2s; transition: opacity 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0.2s, transform 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0.2s, -webkit-transform 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0.2s; } .home-lead__txt { opacity: 0; transition: opacity 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95) 1s; } .header__navi li { opacity: 0; -webkit-transform: translateY(-4px); transform: translateY(-4px); &:first-child { transition: opacity 0.1s cubic-bezier(0.445, 0.05, 0.55, 0.95) 1s, -webkit-transform 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95) 1s; transition: opacity 0.1s cubic-bezier(0.445, 0.05, 0.55, 0.95) 1s, transform 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95) 1s; transition: opacity 0.1s cubic-bezier(0.445, 0.05, 0.55, 0.95) 1s, transform 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95) 1s, -webkit-transform 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95) 1s; } &:nth-child(2) { transition: opacity 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95) 1.02s, -webkit-transform 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95) 1.02s; transition: opacity 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95) 1.02s, transform 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95) 1.02s; transition: opacity 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95) 1.02s, transform 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95) 1.02s, -webkit-transform 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95) 1.02s; } &:nth-child(3) { transition: opacity 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95) 1.04s, -webkit-transform 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95) 1.05s; transition: opacity 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95) 1.04s, transform 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95) 1.05s; transition: opacity 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95) 1.04s, transform 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95) 1.05s, -webkit-transform 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95) 1.05s; } &:nth-child(4) { transition: opacity 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95) 1.06s, -webkit-transform 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95) 1.06s; transition: opacity 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95) 1.06s, transform 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95) 1.06s; transition: opacity 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95) 1.06s, transform 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95) 1.06s, -webkit-transform 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95) 1.06s; } &:nth-child(5) { transition: opacity 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95) 1.08s, -webkit-transform 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95) 1.08s; transition: opacity 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95) 1.08s, transform 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95) 1.08s; transition: opacity 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95) 1.08s, transform 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95) 1.08s, -webkit-transform 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95) 1.08s; } &:nth-child(6) { transition: opacity 0.6s cubic-bezier(0.445, 0.05, 0.55, 0.95) 1.1s, -webkit-transform 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95) 1.1s; transition: opacity 0.6s cubic-bezier(0.445, 0.05, 0.55, 0.95) 1.1s, transform 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95) 1.1s; transition: opacity 0.6s cubic-bezier(0.445, 0.05, 0.55, 0.95) 1.1s, transform 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95) 1.1s, -webkit-transform 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95) 1.1s; } &:nth-child(7) { transition: opacity 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95) 1.12s, -webkit-transform 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95) 1.12s; transition: opacity 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95) 1.12s, transform 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95) 1.12s; transition: opacity 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95) 1.12s, transform 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95) 1.12s, -webkit-transform 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95) 1.12s; } } .header__sns li { opacity: 0; transition: opacity 1.3s cubic-bezier(0.445, 0.05, 0.55, 0.95) 1.3s; } .home-lead__link { opacity: 0; transition: opacity 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95) 2s; } &.js-loaded { .header__sns li, .home-lead__link, .home-lead__txt { opacity: 1; } .header__navi li, .home-lead__logoSymbol, .home-lead__logoTxt { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } }
}
.menuBtn {
opacity: 0;
}
.home .menuBtn {
transition: opacity 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95) 2s;
}
.menuBtn .menuBtn__inner a span {
background: var(--main-text-color) !important;
}
.js-loaded .menuBtn {
opacity: 1;
}
header {
position: fixed; left: 0; top: 0; width: 100%; min-width: 1000px; box-sizing: border-box; background: var(--main-background-color); z-index: 2;
}
.header__inner {
max-width: none; margin-left: auto; margin-right: auto; padding-left: 4.33%; padding-right: 4.33%; box-sizing: border-box;
}
@media screen and (max-width: 1280px) {
.header__inner { padding-left: 4.16%; padding-right: 4.16%; }
}
.header__navi, .header__sns {
padding: 110px 0 50px; transition: padding-top 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
.js-header-stick {
.header__navi, .header__sns { padding-top: 50px; }
}
.header__navi ul, .header__sns ul {
list-style: none;
}
.header__navi ul li, .header__sns ul li {
float: left; color: var(--main-text-color); font-size: 12px; line-height: 1;
}
.header__navi ul li a, .header__sns ul li a {
display: block; color: var(--main-text-color); text-decoration: none; transition: all 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
.header__navi ul li a:hover, .header__sns ul li a:hover {
opacity: 0.8;
}
.header__navi {
float: left; ul li { margin-right: 41px; letter-spacing: 0.1em; &:last-child { margin-right: 0; } a { position: relative; } &:not(.navi__lang) a:before { content: ""; position: absolute; top: -54px; margin: 0 auto; left: 0; right: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--main-text-color); opacity: 0; visibility: hidden; -webkit-transform: scale(1.25); transform: scale(1.25); transition: top 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95), opacity 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95), visibility 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95), -webkit-transform 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: top 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95), opacity 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95), visibility 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95), transform 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: top 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95), opacity 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95), visibility 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95), transform 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95), -webkit-transform 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); } }
}
.js-header-stick .header__navi ul li:not(.navi__lang) a:before {
top: -25px;
}
.js-loaded .header__navi ul li:not(.navi__lang).is-current a:before {
-webkit-transform: scale(1); transform: scale(1); opacity: 1; visibility: visible;
}
.header__navi ul li {
&:not(.navi__lang).is-active a:hover:before { -webkit-transform: scale(1); transform: scale(1); opacity: 1; visibility: visible; } &.navi__lang { padding-left: 35px; position: relative; &:before { content: ""; position: absolute; top: -3px; left: 0; width: 1px; height: 18px; background: #e8e8e8; } .navi__langLink { padding-right: 26px; &:after { content: ""; position: absolute; top: 0; right: 0; width: 6px; height: 6px; border-top: 1px solid var(--main-text-color); border-right: 1px solid var(--main-text-color); -webkit-transform: rotate(135deg); transform: rotate(135deg); } &.js-active:after { top: 4px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } } .navi__langList { padding: 23px 20px 20px; box-sizing: border-box; position: absolute; top: 12px; left: 15px; background: var(--main-background-color); opacity: 0; visibility: hidden; transition: all 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); span { display: inline-block; margin-bottom: 12px; a { color: var(--main-text-color); display: block; transition: all 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95); &:hover { opacity: 0.8; } } &:last-child { margin-bottom: 0; } } &.js-active { opacity: 1; visibility: visible; } } }
}
.header__sns {
float: right; ul li { letter-spacing: 0.05em; a { position: relative; } &:first-child a { padding-left: 20px; &:before { content: ""; position: absolute; top: -2px; left: 0; width: 7px; height: 14px; /* background: url(./../images/icon_facebook.png) no-repeat 0 0/100% auto; */ } } }
}
.header__logo {
float: right; height: 130px; margin: 30px 0; box-sizing: border-box; overflow: hidden; transition: height 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95), margin 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); a { display: block; p { font-size: 0; line-height: 0; margin-left: auto; margin-right: auto; img { width: 100%; height: auto; } &.header__logoSymbol { width: 86px; transition: -webkit-transform 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: transform 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: transform 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95), -webkit-transform 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); -webkit-transform-origin: 50% 0; transform-origin: 50% 0; } &.header__logoTxt { margin-top: 8px; width: 180px; } } }
}
.js-header-stick .header__logo {
height: 70px; margin: 21px -50px 0 0; a p.header__logoSymbol { -webkit-transform: scale(0.8139); transform: scale(0.8139); }
}
footer {
background-color: var(--footer-color) !important;
}
.footer__link {
border-top: #e8e8e8 2px solid; padding: 46px 0 44px; box-sizing: border-box;
}
.footer_mt .footer__link {
margin-top: 110px;
}
.footer__link p {
text-align: center; color: #282828; font-size: 16px; line-height: 1; letter-spacing: 0.05em; a { color: var(--main-text-color); text-decoration: none; padding-bottom: 1px; transition: all 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95); &:hover { opacity: 0.8; color: var(--link-color); } } span { margin: 0 10px; }
}
.footer__copy {
border-top: #e8e8e8 2px solid; padding: 40px 0 52px; box-sizing: border-box; small { display: block; text-align: center; color: var(--post-title-color); font-size: 12px; line-height: 1.5; letter-spacing: 0.05em; br { display: none; } } ul { margin-top: 56px; text-align: center; li { display: inline-block; width: 19px; /*9px*/ font-size: 0; line-height: 0; img { width: 100%; height: auto; } a { display: block; transition: all 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95); &:hover { opacity: 0.8; } } } } a i { color: var(--main-text-color); &:hover { color: var(--link-color); } }
}
.home-lead {
margin-top: 300px; position: relative;
}
.home-lead__inner {
max-width: none; margin-left: auto; margin-right: auto; padding-left: 4.33%; padding-right: 4.33%; box-sizing: border-box;
}
@media screen and (max-width: 1280px) {
.home-lead__inner { padding-left: 4.16%; padding-right: 4.16%; }
}
.home-lead__logoSymbol {
width: 120px; font-size: 0; line-height: 0; img { width: 100%; height: auto; }
}
.home-lead__logoTxt {
margin-top: 53px; width: 266px; font-size: 0; line-height: 0; img { width: 100%; height: auto; }
}
.home-lead__txt {
margin-top: 46px; p { letter-spacing: 0.1em; a { font-weight: bold; padding-bottom: 1px; border-bottom: #777 1px solid; transition: all 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95); &:hover { opacity: 0.8; } } }
}
.home-lead__link {
position: absolute; right: 4.33%; bottom: 0; color: #000; font-size: 14px; line-height: 1; letter-spacing: 0.2em; -webkit-transform: rotate(90deg); transform: rotate(90deg); -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; a { display: block; color: #000; text-decoration: none; position: relative; padding-bottom: 18px; padding-right: 80px; &:after { content: ""; position: absolute; bottom: 0; left: 0; width: 130px; height: 1px; background: rgb(255, 255, 255); /*the under line of home-lead*/ } }
}
@media screen and (max-width: 1280px) {
.home-lead__link { right: calc(4.16% + 30px); }
}
.home-visual {
margin-top: 50px; width: 100%; height: 722px; background-repeat: no-repeat; background-position: 50% -1%; /* background-image: url(./../img/flower1.jpg); */ background-size: 100% auto; position: relative; overflow: hidden; &:after { content: ""; position: absolute; top: 0px; right: 0px; width: 100%; height: 100%; background: var(--main-background-color); transition: width 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95) 1s; }
}
.js-loaded .home-visual:after {
width: 0;
}
.home-message {
margin-top: 180px; /* 165px is the origin */ max-width: 1080px; // min-height: 70vh; margin-left: auto; margin-right: auto; /* padding-left: 4.33%; padding-right: 4.33%; */ box-sizing: content-box;
}
@media screen and (max-width: 1280px) {
.home-message { padding-left: 4.16%; padding-right: 4.16%; }
}
.home-message__ttl {
padding-bottom: 34px; border-bottom: var(--message-border-color) 2px solid; h2 { color: var(--main-text-color); font-size: 32px; line-height: 1; font-weight: 500; letter-spacing: 0.05em; }
}
.post-meta {
color: var(--author-color);
}
.home-message__ttl .u-txt__label {
margin-top: 18px;
}
.home-message__txt {
margin-top: 80px; .u-txt__link { margin-top: 70px; text-align: right; }
}
.home-message__txt–main {
width: 960px; margin-left: auto; margin-right: auto; color: #282828; font-size: 30px; line-height: 1.9; letter-spacing: 0.075em; text-align: justify;
}
.lang-ja .home-message__txt–main {
font-size: 23px; font-weight: bold;
}
.home-message__txt–main a {
color: #000; text-decoration: none; border-bottom: #000 2px solid; transition: all 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95); &:hover { opacity: 0.8; }
}
.home-artist {
margin-top: 118px; position: relative; &:after { content: ""; position: absolute; bottom: -160px; left: 0; width: calc(50% - 574px); height: 265px; background: #fff; z-index: 1; }
}
@media screen and (max-width: 1180px) {
.home-artist:after { width: 4.16%; }
}
.home-artist__slider {
width: 100%; height: 541px; background-image: url(./img/slider.jpg); background-repeat: repeat-x; background-position: 0 0; background-size: 2625px auto; -webkit-animation: home_artist_slider 22s infinite cubic-bezier(0.5, 0.5, 0.5, 0.5); animation: home_artist_slider 22s infinite cubic-bezier(0.5, 0.5, 0.5, 0.5);
}
@-webkit-keyframes home_artist_slider {
0% { background-position: 0 0; } to { background-position: -2625px 0; }
}
@keyframes home_artist_slider {
0% { background-position: 0 0; } to { background-position: -2625px 0; }
}
.home-artist__ttl {
position: absolute; bottom: -160px; left: calc(50% - 574px); background: #fff; padding: 75px 62px 0 30px; box-sizing: border-box; z-index: 2; .u-txt__label { margin-top: 18px; } .u-txt__link { margin-top: 40px; }
}
@media screen and (max-width: 1280px) {
.home-artist__ttl { padding: 75px 62px 0 64px; }
}
@media screen and (max-width: 1180px) {
.home-artist__ttl { left: 16px; }
}
.home-news {
margin-top: 374px; padding: 135px 0 100px; box-sizing: border-box; background: #e8e8e8;
}
.home-news__inner {
max-width: 1080px; margin-left: auto; margin-right: auto; padding-left: 4.33%; padding-right: 4.33%; box-sizing: content-box; .u-txt__link { margin-top: 40px; text-align: center; }
}
@media screen and (max-width: 1280px) {
.home-news__inner { padding-left: 4.16%; padding-right: 4.16%; }
}
@media screen and (max-width: 1280px) {
.home-news__inner { padding-left: 80px; padding-right: 80px; }
}
.home-news__ttl .u-txt__label {
margin-top: 18px;
}
.home-news__list {
margin-top: 105px; list-style: none; display: flex; flex-wrap: wrap; li { width: 45%; margin-bottom: 74px; margin-right: 10%; &:nth-child(2n) { margin-right: 0; } a { display: block; text-decoration: none; transition: all 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95); &:hover { opacity: 0.8; } figure { font-size: 0; line-height: 0; overflow: hidden; position: relative; width: 100%; height: 20%; padding-top: 74%; img { width: 100%; height: auto; width: auto; height: 100%; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } } } }
}
.home-news__listTxt {
margin-top: 22px; p { color: #777; font-size: 12px; line-height: 1; letter-spacing: 0.05em; span { margin-right: 18px; &:last-child { margin-right: 0; } } } h3 { margin-top: 12px; color: #282828; font-size: 18px; line-height: 1.5; letter-spacing: 0.05em; }
}
.lang-ja .home-news__listTxt h3 {
font-weight: bold;
}
.home-kanban {
width: 100%; margin-bottom: 50px; background: url(./../img/bridge.jpg) no-repeat 50% (50% / cover);
}
.home-kanban__inner {
max-width: 1200px; margin-left: auto; margin-right: auto; padding-left: 4.33%; padding-right: 4.33%; box-sizing: border-box; position: relative; // height: 100%;
}
@media screen and (max-width: 1280px) {
.home-kanban__inner { padding-left: 4.16%; padding-right: 4.16%; }
}
.home-kanban__ttl {
// position: absolute; // top: 50%; // left: 0; // -webkit-transform: translateY(-50%); // transform: translateY(-50%); border-color:white; border-width: 1.5ex 1.5ex 2.5ex; border-style: solid; padding: 60px 60px 65px; box-sizing: border-box; backdrop-filter: brightness(75%); .u-txt__label { margin-top: 30px; color: white; } .u-txt__link { margin-top: 35px; color: white; }
}
@media screen and (max-width: 1280px) {
.home-kanban__ttl { left: 80px; }
}
.content {
display: block; padding-top: 190px;
}
.about-ttl__label {
max-width: 960px; margin-left: auto; margin-right: auto; padding-left: 4.33%; padding-right: 4.33%; box-sizing: content-box; h2 { position: relative; &:before { position: absolute; top: 11px; left: -60px; color: #777; font-size: 16px; line-height: 1; } } .u-txt__label { margin-top: 2px; font-size: 24px; letter-spacing: 0; }
}
@media screen and (max-width: 1280px) {
.about-ttl__label { padding-left: 4.16%; padding-right: 4.16%; }
}
@media screen and (max-width: 1280px) {
.about-ttl__label h2:before { display: none; }
}
.lang-ja .about-ttl__label .u-txt__label {
margin-top: 8px; font-size: 20px; letter-spacing: 0.1em;
}
.about-ttl__label {
&.about-ttl__label--01 h2:before { content: "01."; } &.about-ttl__label--02 h2:before { content: "02."; }
}
.about-ttl__line {
margin-top: 45px; width: 100%; height: 14px; position: relative; &:after { content: ""; position: absolute; top: 0; right: 0; width: calc(50% - 480px); height: 14px; background: #e8e8e8; } span { max-width: 960px; margin-left: auto; margin-right: auto; padding-left: 4.33%; padding-right: 4.33%; box-sizing: border-box; display: block; width: 100%; height: 14px; background: #e8e8e8; }
}
@media screen and (max-width: 1280px) {
.about-ttl__line span { padding-left: 4.16%; padding-right: 4.16%; }
}
.about-visual {
width: 100%; height: 100%; position: relative;
}
.about-visual__img {
width: 70.8333333333333%; float: right; font-size: 0; line-height: 0; img { width: 100%; height: auto; }
}
.about-visual__inner {
width: 100%; height: 100%; position: absolute; top: 0; left: 0;
}
.about-visual__copy {
position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: 12.4966666666667%; h1 { color: #282828; font-size: 60px; line-height: 1.2; } .u-txt__label { margin-top: 35px; font-size: 20px; font-weight: bold; letter-spacing: 0.05em; }
}
@media screen and (max-width: 1280px) {
.about-visual__copy { left: 4.16%; }
}
.about-link {
max-width: 960px; margin-left: auto; margin-right: auto; padding-left: 4.33%; padding-right: 4.33%; box-sizing: content-box; width: 100%; position: relative; z-index: 1;
}
@media screen and (max-width: 1280px) {
.about-link { padding-left: 4.16%; padding-right: 4.16%; }
}
@media screen and (max-width: 1280px) {
.about-link { box-sizing: border-box; }
}
.about-link__block {
float: right; margin-top: -180px; width: 37.5%; font-size: 0; line-height: 0; img { width: 100%; height: auto; }
}
.about-link__inner {
position: relative; .u-txt__link { position: absolute; bottom: 0; right: 0; background: #fff; padding-left: 26px; padding-top: 22px; }
}
.about-message {
margin-top: -98px;
}
.about-message__txt {
max-width: 720px; margin-left: auto; margin-right: auto; padding-left: 4.33%; padding-right: 4.33%; box-sizing: content-box; margin-top: 62px; p { line-height: 2.3; margin-bottom: 2em; &:last-child { margin-bottom: 0; } }
}
@media screen and (max-width: 1280px) {
.about-message__txt { padding-left: 4.16%; padding-right: 4.16%; }
}
.about-mission01 {
margin-top: 100px; max-width: 1200px; margin-left: auto; margin-right: auto; padding-left: 4.33%; padding-right: 4.33%; box-sizing: content-box;
}
@media screen and (max-width: 1280px) {
.about-mission01 { padding-left: 4.16%; padding-right: 4.16%; }
}
.about-mission01__img {
float: left; width: 30%; font-size: 0; line-height: 0; img { width: 100%; height: auto; }
}
.about-mission01__txt {
float: right; width: 50%; margin: 0 10% 0 0; h3 { letter-spacing: 0; }
}
.about-mission01__list {
margin-top: 72px; padding-left: 87px; padding-bottom: 3px; border-left: #e8e8e8 4px solid; list-style: none; li { color: #282828; line-height: 1.5; letter-spacing: 0; margin-bottom: 20px; position: relative; &:last-child { margin-bottom: 0; } &:before { position: absolute; top: 6px; left: -40px; color: #777; font-size: 20px; line-height: 1; } &:first-child:before { content: "1."; } &:nth-child(2):before { content: "2."; } &:nth-child(3):before { content: "3."; } &:nth-child(4):before { content: "4."; } &:nth-child(5):before { content: "5."; } }
}
.about-mission02 {
position: relative; width: 100%;
}
.about-mission02__txt {
max-width: 720px; margin-left: auto; margin-right: auto; padding-left: 4.33%; padding-right: 4.33%; box-sizing: content-box; margin-top: 130px; .u-ttl__01 { line-height: 1.2; }
}
@media screen and (max-width: 1280px) {
.about-mission02__txt { padding-left: 4.16%; padding-right: 4.16%; }
}
.lang-ja .about-mission02__txt .u-ttl__01 {
font-weight: bold;
}
.about-mission02__txt {
.u-ttl__01 span { position: relative; &:after { position: absolute; color: #e8e8e8; font-size: 50px; font-weight: bold; } &:before { position: absolute; color: #e8e8e8; font-size: 50px; font-weight: bold; content: "“"; top: -16px; left: -28px; } &:after { content: "”"; bottom: -32px; right: -30px; } } .u-txt { margin-top: 45px; line-height: 2.3; }
}
.about-mission2__img {
margin-top: 100px; float: right; width: calc(50% + 360px); font-size: 0; line-height: 0; img { width: 100%; height: auto; }
}
.about-artists {
margin-top: 132px;
}
.about-artists__txt {
max-width: 720px; margin-left: auto; margin-right: auto; padding-left: 4.33%; padding-right: 4.33%; box-sizing: content-box; margin-top: 62px; p { &:not(.u-txt__link) { line-height: 2.3; margin-bottom: 2em; &:last-child { margin-bottom: 0; } } &.u-txt__link { margin-top: 62px; } }
}
@media screen and (max-width: 1280px) {
.about-artists__txt { padding-left: 4.16%; padding-right: 4.16%; }
}
.about-company {
background: #282828; margin-top: 140px; padding: 124px 0 180px;
}
.about-company__inner {
max-width: 960px; margin-left: auto; margin-right: auto; padding-left: 4.33%; padding-right: 4.33%; box-sizing: content-box; .u-ttl__dot { color: #fff; font-size: 28px; line-height: 1.5; font-weight: bold; &:before { top: 16px; left: -32px; width: 10px; height: 10px; background: #fff; } } .u-txt__label { margin-top: 5px; color: #fff; font-size: 14px; }
}
@media screen and (max-width: 1280px) {
.about-company__inner { padding-left: 4.16%; padding-right: 4.16%; }
}
.about-company__infoGroup {
width: 45%; float: left; &:nth-child(2) { width: 50%; float: right; } .about-company__table { margin-top: 65px; tr { th { width: 180px; font-size: 14px; } td { padding-top: 5px; } } } &:nth-child(2) { float: right; ol li { margin-bottom: 7px; } p:last-child { margin-top: 20px; } }
}
.about-company__office {
margin-top: 116px; .about-company__table { margin-top: 70px; border-top: #525252 1px solid; tr { td, th { padding: 40px 0; border-bottom: #525252 1px solid; } td.bb0, th.bb0 { border-bottom: none; } &.pt0 { td, th { padding-top: 0; } } &.pb0 { td, th { padding-bottom: 1em; } } th { width: 50%; } td:first-of-type { width: 12.5%; } } }
}
.about-company__table {
width: 100%; border-collapse: collapse; tr { td, th { text-align: left; vertical-align: top; color: #fff; font-size: 14px; line-height: 1.7; letter-spacing: 0.05em; } td a, th a { color: #fff; text-decoration: none; border-bottom: #fff 1px solid; transition: all 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95); } td a:hover, th a:hover { opacity: 0.8; } }
}
.artist-visual__img {
width: 100%; height: 600px; background: url(./../images/artist_visual.jpg) no-repeat right 0 bottom (0 / cover);
}
.artist-why__inner {
max-width: none; margin-left: auto; margin-right: auto; padding-left: 4.33%; padding-right: 4.33%; box-sizing: border-box; max-width: 1200px; margin-left: auto; margin-right: auto; padding-left: 4.33%; padding-right: 4.33%; box-sizing: content-box;
}
@media screen and (max-width: 1280px) {
.artist-why__inner { padding-left: 4.16%; padding-right: 4.16%; }
}
@media screen and (max-width: 1280px) {
.artist-why__inner { padding-left: 4.16%; padding-right: 4.16%; }
}
.artist-why__img {
width: 50%;
}
.artist-why__block {
.u-ttl__02 { font-size: 34px; letter-spacing: 0; position: relative; &:before { position: absolute; top: -79px; left: 60px; color: #777; font-size: 16px; line-height: 1; } } .u-txt__label { margin-top: 6px; }
}
.artist-why__blockTxt {
max-width: 420px; margin: 65px 0 0 60px; p { letter-spacing: 0.025em; }
}
.artist-why01 {
.artist-why__img { float: left; max-width: 540px; ul { margin-top: -80px; margin-left: -5%; list-style: none; li { font-size: 0; line-height: 0; img { width: 100%; height: auto; } } } } .artist-why__block { width: 47.5%; float: right; margin-top: 180px; .u-ttl__02:before { content: "01."; } }
}
.artist-why02 {
margin-top: 195px; position: relative; .artist-why__img { position: absolute; top: 0; right: 0; height: 630px; background: url(./../images/artist_why_02.jpg) no-repeat right 0 bottom (0 / cover); } .artist-why__block { width: 47.5%; float: left; margin-top: 73px; .u-ttl__02:before { content: "02."; } }
}
.artist-why__blockLink {
max-width: 420px; margin: 60px 0 0 60px;
}
.artist-why__pager {
color: #000; font-size: 13px; line-height: 1; a { display: block; width: 120px; color: #000; text-decoration: none; position: relative; padding-bottom: 20px; .artist-why__pager--current { font-size: 18px; } .artist-why__pager--sep, .artist-why__pager--total { margin-left: 10px; } &:after { content: ""; position: absolute; background: #000; } &:before { content: ""; position: absolute; background: #000; bottom: 1px; right: 0; width: 1px; height: 14px; -webkit-transform: rotate(-57deg); transform: rotate(-57deg); -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; } &:after { bottom: 0; left: 0; width: 120px; height: 1px; } }
}
.artist-murakami__visual {
width: 100%; height: 500px; background: url(./../images/artist-murakami_visual.jpg) no-repeat right 0 top (0 / cover);
}
.artist-murakami__visualInner {
max-width: 1080px; margin-left: auto; margin-right: auto; padding-left: 4.33%; padding-right: 4.33%; box-sizing: border-box; height: 100%; position: relative;
}
@media screen and (max-width: 1280px) {
.artist-murakami__visualInner { padding-left: 4.16%; padding-right: 4.16%; }
}
.artist-murakami__visualTtl {
color: #fff; font-size: 48px; line-height: 1; position: absolute; top: 50%; right: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%);
}
.artist-murakami__biography {
max-width: 1080px; margin-left: auto; margin-right: auto; padding-left: 4.33%; padding-right: 4.33%; box-sizing: content-box; margin-top: 115px;
}
@media screen and (max-width: 1280px) {
.artist-murakami__biography { padding-left: 4.16%; padding-right: 4.16%; }
}
.artist-murakami__biographyInfo {
width: 300px; float: left; .u-ttl__02 { line-height: 1.4; letter-spacing: 0; }
}
.artist-murakami__biographySns {
margin-top: 65px; list-style: none; li { color: #777; font-size: 12px; line-height: 1.2; margin-bottom: 30px; &:last-child { margin-bottom: 0; } a { padding-left: 30px; color: #777; text-decoration: none; position: relative; &:before { content: ""; position: absolute; top: -2px; left: 0px; width: 16px; height: 16px; } } &:first-child a:before { background: url(./../images/sns_insta_black.png) no-repeat 0 0 / 100% auto; } &:nth-child(2) a:before { background: url(./../images/sns_fb_black.png) no-repeat 0 0 / 100% auto; } &:nth-child(3) a:before { background: url(./../images/sns_tw_black.png) no-repeat 0 0 / 100% auto; } }
}
.artist-murakami__biographyTxt {
width: 600px; float: right; p { margin-bottom: 2.25em; &:last-child { margin-bottom: 0; } }
}
.artist-murakami__history {
max-width: 1080px; margin-left: auto; margin-right: auto; padding-left: 4.33%; padding-right: 4.33%; box-sizing: content-box; margin-top: 115px; .u-ttl__02 { line-height: 1.4; letter-spacing: 0; }
}
@media screen and (max-width: 1280px) {
.artist-murakami__history { padding-left: 4.16%; padding-right: 4.16%; }
}
.artist-murakami__historyList {
margin-top: 110px;
}
.artist-murakami__historyGroup {
margin-bottom: 90px; &:last-child { margin-bottom: 0; }
}
.artist-murakami__historyYear {
margin-top: -0.5em; width: 5.5555555555556%; float: left; color: #282828; font-size: 16px; line-height: 1; font-weight: bold; letter-spacing: 0.025em;
}
.artist-murakami__historyTxt {
width: 50%; float: left; border-top: #000 1px solid; padding-top: 45px; p { margin-right: 60px; }
}
.artist-murakami__historyImg {
width: 38.8888888888889%; float: right; list-style: none; display: flex; flex-wrap: wrap; &.artist-murakami__history__center { justify-content: center; li { text-align: center; figcaption { text-align: left; } } } li { font-size: 0; line-height: 0; margin-top: 40px; width: 46.6666666666667%; &:nth-child(-n + 2) { margin-top: 0; } &:nth-child(2n) { margin-left: 6.1904761904762%; } figure { font-size: 0; line-height: 0; img { width: 100%; height: auto; } figcaption { margin-top: 8px; color: #777; font-size: 10px; line-height: 1.3; letter-spacing: 0.01em; } } &.artist-murakami__historyImg--portrait img { width: 91.8367346938776%; height: auto; } &.artist-murakami__historyImg--border figure img { border: #ccc 1px solid; box-sizing: border-box; } }
}
.artist-other__ttl {
margin-top: 120px; &:first-child { margin-top: 0; }
}
.artist-other__list {
max-width: 1200px; margin-left: auto; margin-right: auto; padding-left: 4.33%; padding-right: 4.33%; box-sizing: content-box; margin-top: 88px; ul { list-style: none; display: flex; flex-wrap: wrap; li { max-width: 22%; font-size: 0; line-height: 0; margin-top: 62px; margin-right: 4%; &:nth-child(-n + 4) { margin-top: 0; } &:nth-child(4n) { margin-right: 0; } a { display: block; text-decoration: none; p { font-size: 0; line-height: 0; position: relative; img { width: 100%; height: auto; } span { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(40, 40, 40, 0.6); visibility: hidden; opacity: 0; transition: all 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); &:after { content: ""; position: absolute; background: #fff; transition: all 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95); } &:before { content: ""; position: absolute; background: #fff; transition: all 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95); right: 29px; bottom: 16px; width: 1px; height: 20px; } &:after { right: 20px; bottom: 26px; width: 20px; height: 1px; } } } h3 { margin-top: 15px; color: #000; font-size: 14px; line-height: 1.5; transition: all 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); } &:hover { p span { visibility: visible; opacity: 1; &:before { bottom: 21px; } &:after { bottom: 31px; } } h3 { opacity: 0.8; } } } } }
}
@media screen and (max-width: 1280px) {
.artist-other__list { padding-left: 4.16%; padding-right: 4.16%; }
}
.js-modal-open {
.artist-other__list, .u-artworks, .u-pageTtl, footer, header { display: none; } .content { padding-top: 0; }
}
.artist-other__modalOver {
width: 100%; height: 100vh; position: fixed; top: 0; left: 0; background: #282828; z-index: 11; opacity: 0; visibility: hidden; transition: opacity 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0.2s, visibility 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0.2s; &.js-open { opacity: 1; visibility: visible; transition: opacity 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95), visibility 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); }
}
.artist-other__modalClose {
position: fixed; top: 26px; right: 20px; width: 30px; height: 30px; z-index: 12; opacity: 0; visibility: hidden; transition: all 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); .artist-other__modalCloseInner { position: relative; a { display: block; width: 100%; height: 30px; span { width: 30px; height: 1px; background: #fff; position: absolute; left: 0; &:first-child { top: 0; -webkit-transform: translateY(14px) rotate(-45deg); transform: translateY(14px) rotate(-45deg); } &:nth-child(2) { top: 12px; -webkit-transform: translateY(2px) rotate(45deg); transform: translateY(2px) rotate(45deg); } } } } &.js-open { opacity: 1; visibility: visible; }
}
.artist-other__modal {
position: absolute; top: 0; left: 0; right: 0; z-index: 11; opacity: 0; visibility: hidden; max-height: 100vh; padding: 100px 0 0; box-sizing: border-box; overflow: hidden; -webkit-overflow-scrolling: touch; transition: opacity 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95), visibility 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95), -webkit-transform 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: opacity 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95), visibility 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95), transform 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: opacity 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95), visibility 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95), transform 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95), -webkit-transform 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); &.js-open { overflow: scroll; opacity: 1; visibility: visible; -webkit-transform: translateY(0); transform: translateY(0); transition: opacity 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0.1s, visibility 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0.1s, -webkit-transform 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0.1s; transition: opacity 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0.1s, visibility 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0.1s, transform 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0.1s; transition: opacity 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0.1s, visibility 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0.1s, transform 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0.1s, -webkit-transform 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0.1s; }
}
.artist-other__modalInner {
max-width: 960px; margin-left: auto; margin-right: auto; padding-left: 4.33%; padding-right: 4.33%; box-sizing: content-box; padding-bottom: 100px;
}
@media screen and (max-width: 1280px) {
.artist-other__modalInner { padding-left: 4.16%; padding-right: 4.16%; }
}
.artist-other__modalTtl {
font-weight: 500;
}
.artist-other__modalTtl–label {
margin-top: 10px; font-size: 18px; font-weight: 500;
}
.artist-other__modalBlock {
margin-top: 105px;
}
.artist-other__modalImg {
width: 45%; float: left; p { font-size: 0; line-height: 0; img { width: 100%; height: auto; } } small { display: block; margin-top: 8px; color: #fff; font-size: 12px; line-height: 1.4; letter-spacing: 0.025em; }
}
.artist-other__modalTxt {
width: 45%; float: right; h3 { margin-top: 30px; color: #fff; font-size: 16px; line-height: 1.4; letter-spacing: 0.025em; &:first-child { margin-top: 0; } } div { margin-top: 22px; p { color: #fff; font-size: 13px; line-height: 2; letter-spacing: 0.025em; margin-bottom: 1em; &:last-child { margin-bottom: 0; } } table { border-collapse: collapse; tr { td { vertical-align: top; text-align: left; color: #fff; font-size: 13px; line-height: 1.7; font-weight: normal; letter-spacing: 0.025em; padding-bottom: 10px; } th { vertical-align: top; text-align: left; color: #fff; font-size: 13px; line-height: 1.7; font-weight: normal; letter-spacing: 0.025em; padding-bottom: 10px; min-width: 50px; } } } } .u-txt__link { margin-top: 30px; } .artist-other__modalLink { margin-top: 40px; } .artist-other__modalLink--blank { margin-top: 0; float: left; p { margin-top: 10px; &:first-child { margin-top: 0; } a:after { top: 0; } } } .artist-other__modalLink--sns { width: auto; margin-top: 8px; float: right; padding-left: 48px; box-sizing: border-box; position: relative; &:before { content: "SNS : "; position: absolute; top: 0px; left: 0px; width: 48px; height: 16px; color: #777; font-size: 12px; line-height: 16px; } ul { list-style: none; font-size: 0; line-height: 0; li { display: inline-block; margin-right: 20px; &:last-child { margin-right: 0; } a { width: 16px; height: 16px; display: block; transition: all 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95); &:hover { opacity: 0.8; } } } } }
}
.news__ttl {
position: relative; z-index: 1; .u-pageTtl__txtLabel { float: left; } .news__select { float: right; margin-top: 26px; }
}
.lang-ja .news__ttl .u-txt__label {
max-width: none; margin-left: auto; margin-right: auto; padding-left: 4.33%; padding-right: 4.33%; box-sizing: border-box; font-size: 16px; color: #777; margin-top: 17px;
}
@media screen and (max-width: 1280px) {
.lang-ja .news__ttl .u-txt__label { padding-left: 4.16%; padding-right: 4.16%; }
}
.news__select {
position: relative; p { float: left; margin-right: 20px; color: #282828; font-size: 14px; line-height: 1; letter-spacing: 0.05em; }
}
.news__selectList {
display: flex; align-items: stretch; list-style: none; font-size: 0; line-height: 0;
}
.news__selectItem {
position: relative; text-align: center; cursor: pointer; margin-right: 20px;
}
.news__selectInner {
display: inline-block; font-size: 14px; line-height: 1; letter-spacing: 0.05em; color: #000; text-decoration: none; position: relative; padding-left: 10px; padding-right: 20px; transition: all 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95); &:hover { opacity: 0.8; } &:after { content: ""; position: absolute; top: 3px; right: 0; width: 6px; height: 6px; border-top: 1px solid #000; border-right: 1px solid #000; -webkit-transform: rotate(135deg); transform: rotate(135deg); } &.js-active:after { top: 7px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
}
.news__selectContent {
z-index: 2; position: absolute; bottom: -10px; left: 50%; -webkit-transform: translate(-50%, 100%); transform: translate(-50%, 100%); background: #282828; padding: 30px 32px; opacity: 0; visibility: hidden; &.js-active { opacity: 1; visibility: visible; }
}
.news__selectContentLabel {
display: block; color: #fff; font-size: 14px; line-height: 1; letter-spacing: 0.05em; margin-bottom: 25px; cursor: pointer; transition: all 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95); &:last-child { margin-bottom: 0; } &:hover { opacity: 0.8; } input { display: none; }
}
.news__selectContentText {
color: #fff; display: block;
}
.news__list {
max-width: 1200px; margin-left: auto; margin-right: auto; padding-left: 4.33%; padding-right: 4.33%; box-sizing: content-box; margin-top: 100px; ul { list-style: none; display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; li { max-width: 30%; font-size: 0; line-height: 0; margin-top: 80px; margin-right: 5%; &:nth-child(-n + 3) { margin-top: 0; } &:nth-child(3n) { margin-right: 0; } a { text-decoration: none; transition: all 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95); display: block; &:hover { opacity: 0.8; } figure { font-size: 0; line-height: 0; img { width: 100%; height: auto; } } } } }
}
@media screen and (max-width: 1280px) {
.news__list { padding-left: 4.16%; padding-right: 4.16%; }
}
.news__listTxt {
margin-top: 26px; p { color: #777; font-size: 12px; line-height: 1; letter-spacing: 0.05em; span { margin-right: 18px; &:last-child { margin-right: 0; } } } h3 { margin-top: 8px; color: #282828; font-size: 16px; line-height: 1.5; letter-spacing: 0.05em; }
}
.lang-ja .news__listTxt h3 {
font-weight: bold;
}
.news-single__meta {
margin-top: 80px; max-width: 960px; margin-left: auto; margin-right: auto; padding-left: 4.33%; padding-right: 4.33%; box-sizing: content-box; h1 { letter-spacing: 0; font-weight: normal; } h2 { margin-top: 20px; line-height: 1.4; letter-spacing: 0; } p { margin-top: 52px; span { margin-right: 20px; &:last-child { margin-right: 0; } a { transition: all 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95); &:hover { opacity: 0.8; } } } }
}
@media screen and (max-width: 1280px) {
.news-single__meta { padding-left: 4.16%; padding-right: 4.16%; }
}
.news-single__img {
margin-top: 50px; max-width: 960px; margin-left: auto; margin-right: auto; padding-left: 4.33%; padding-right: 4.33%; box-sizing: content-box; font-size: 0; line-height: 0; img { width: 100%; height: auto; }
}
@media screen and (max-width: 1280px) {
.news-single__img { padding-left: 4.16%; padding-right: 4.16%; }
}
.news-single__content {
margin-top: 85px; max-width: 600px; margin-left: auto; margin-right: auto; padding-left: 4.33%; padding-right: 4.33%; box-sizing: content-box;
}
@media screen and (max-width: 1280px) {
.news-single__content { padding-left: 4.16%; padding-right: 4.16%; }
}
.pageContents {
color: #282828; font-size: 16px; line-height: 2; letter-spacing: 0.025em; * { margin-top: 2.25em; } :first-child { margin-top: 0; } a { color: #000; transition: all 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95); &:hover { opacity: 0.8; } } h1, h2, h4, h5, h6 { color: #282828; font-weight: bold; } h1 { font-size: 40px; line-height: 1.4; } h2 { font-size: 32px; line-height: 1.6; font-weight: bold; } h3 { font-size: 28px; line-height: 1.6; font-weight: bold; } h4, h5, h6 { font-size: 20px; line-height: 1.6; } p { margin-top: 2.25em; color: #282828; font-size: 16px; line-height: 2; &.u-caption { margin-top: 0.25em; color: #777; line-height: 1.5; } } ol, ul { padding-left: 1.4em; } ol li, ul li { margin-top: 0; } table { margin-top: 3em; width: 100%; border-collapse: collapse; tr { td { padding: 15px 20px 16px; border: #777 1px solid; border-left: 0; border-right: 0; color: #282828; font-size: 16px; line-height: 1.5; text-align: left; } th { padding: 15px 20px 16px; border: #777 1px solid; border-left: 0; border-right: 0; color: #282828; font-size: 16px; line-height: 1.5; text-align: left; width: 25%; } } } img { margin-top: 2.5em; max-width: 100%; height: auto; &.alignleft, &.alignnone { margin-top: 2.5em; } &.aligncenter { display: block; margin: 2.5em auto; } &.alignright { display: block; margin: 2.5em 0 0 auto; } }
}
.news-single__navi {
margin-top: 160px; padding-bottom: 40px; max-width: 600px; margin-left: auto; margin-right: auto; padding-left: 4.33%; padding-right: 4.33%; box-sizing: content-box; list-style: none; text-align: center; font-size: 0; line-height: 0; li { display: inline-block; color: #000; font-size: 14px; line-height: 1; a { color: #000; text-decoration: none; transition: all 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95); &:hover { opacity: 0.8; } } &.news-single__navi--next a, &.news-single__navi--prev a { position: relative; } &.news-single__navi--next a { &:after, &:before { content: ""; position: absolute; } } &.news-single__navi--prev a { &:after, &:before { content: ""; position: absolute; } } &.news-single__navi--next a:before, &.news-single__navi--prev a:before { top: 8px; width: 30px; height: 1px; background: #ccc; } &.news-single__navi--next a:after { top: 1px; width: 12px; height: 12px; border-top: 1px solid #000; border-right: 1px solid #000; } &.news-single__navi--prev a { &:after { top: 1px; width: 12px; height: 12px; border-top: 1px solid #000; border-right: 1px solid #000; } &:before { right: -72px; } &:after { left: -52px; -webkit-transform: rotate(225deg); transform: rotate(225deg); } } &.news-single__navi--next a { &:before { left: -72px; } &:after { right: -52px; -webkit-transform: rotate(45deg); transform: rotate(45deg); } } &.news-single__navi--home { margin-left: 156px; margin-right: 156px; } }
}
@media screen and (max-width: 1280px) {
.news-single__navi { padding-left: 4.16%; padding-right: 4.16%; }
}
.contact__form {
margin-top: 110px; max-width: 960px; margin-left: auto; margin-right: auto; padding-left: 4.33%; padding-right: 4.33%; box-sizing: border-box;
}
@media screen and (max-width: 1280px) {
.contact__form { padding-left: 4.16%; padding-right: 4.16%; }
}
.contact__radio {
width: 37.5%; float: left; color: #282828; font-size: 14px; line-height: 1; font-weight: bold; letter-spacing: 0.025em; input[type="radio"] { display: none; } .mwform-radio-field-text { display: inline-block; height: 45px; padding-left: 33px; position: relative; transition: all 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95); &:hover { opacity: 0.8; cursor: pointer; } &:after, &:before { position: absolute; content: ""; display: block; top: 8px; transition: all 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95); } &:after { left: 0; margin-top: -10px; width: 18px; height: 18px; background: #ccc; border-radius: 50%; } &:before { left: 6px; margin-top: -4px; width: 6px; height: 6px; background: #e8e8e8; border-radius: 50%; opacity: 0; z-index: 1; } } input[type="radio"]:checked + .mwform-radio-field-text { &:after { background: #282828; } &:before { opacity: 1; } }
}
.contact__input {
width: 62.5%; float: right; table { width: 100%; border-collapse: collapse; tr { td, th { text-align: left; color: #282828; font-size: 14px; line-height: 1.2; letter-spacing: 0.025em; font-weight: normal; vertical-align: top; padding-bottom: 20px; } &:last-child { td, th { padding-bottom: 0; } } th { width: 30%; span { font-size: 11px; } } td { width: 70%; input { &[type="email"], &[type="text"] { width: 100%; border: #e8e8e8 2px solid; color: #282828; font-size: 14px; line-height: 1; letter-spacing: 0.025em; padding: 15px 10px; box-sizing: border-box; transition: all 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95); } &[type="email"]:focus, &[type="text"]:focus { outline: 0; border: #ccc 2px solid; } } } } }
}
.contact__form02 {
margin-top: 60px;
}
.contact__textarea {
h3 { color: #282828; font-size: 14px; line-height: 1.1; letter-spacing: 0.025em; font-weight: normal; span { font-size: 11px; margin-left: 10px; } } textarea { margin-top: 18px; width: 100%; height: 258px; border: #e8e8e8 2px solid; color: #282828; font-size: 14px; line-height: 1.5; letter-spacing: 0.025em; padding: 15px 10px; box-sizing: border-box; transition: all 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95); &:focus { outline: 0; border: #ccc 2px solid; } }
}
.contact__form03 {
margin-top: 60px; text-align: center; p { color: #282828; font-size: 14px; line-height: 1.4; letter-spacing: 0.025em; br { display: none; } a { color: #000; font-weight: bold; text-decoration: none; border-bottom: #282828 1px solid; transition: all 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95); &:hover { opacity: 0.8; } } }
}
.contact__checkbox {
margin-top: 46px; input[type="checkbox"] { display: none; } .mwform-checkbox-field-text { color: #999; font-size: 18px; line-height: 1; letter-spacing: 0.025em; font-weight: bold; padding-left: 33px; position: relative; transition: all 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95); &:hover { opacity: 0.8; cursor: pointer; } &:after, &:before { position: absolute; content: ""; display: block; top: 8px; transition: all 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95); } &:after { left: 0; margin-top: -9px; width: 24px; height: 24px; background: #e8e8e8; } &:before { left: 8px; margin-top: -5px; width: 5px; height: 10px; border-right: 3px solid #fff; border-bottom: 3px solid #fff; -webkit-transform: rotate(45deg); transform: rotate(45deg); z-index: 1; } } input[type="checkbox"]:checked + .mwform-checkbox-field-text { color: #282828; &:after { background: #282828; } }
}
.contact__form04 {
margin-top: 60px;
}
.contact__submit {
text-align: center; font-size: 0; line-height: 0; p { display: inline-block; } input[type="submit"] { display: inline-block; padding: 31px 148px; border: 0; color: #fff; font-size: 18px; line-height: 1; font-weight: bold; letter-spacing: 0.025em; background: #282828; outline: 0; transition: all 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95); &:hover { opacity: 0.8; cursor: pointer; } }
}
.mw_wp_form {
.error { margin-top: 8px !important; color: #ff3608 !important; font-size: 14px !important; line-height: 1 !important; font-weight: bold !important; letter-spacing: 0.025em !important; } .contact__checkbox .error { margin-top: 20px !important; }
}
.mw_wp_form_confirm {
.contact__radio { font-weight: normal; } .contact__input tr th { color: #ccc; br, span { display: none; } } .contact__textarea h3 { color: #ccc; span { display: none; } } .contact__textareaContent { margin-top: 20px; color: #282828; font-size: 14px; line-height: 1.6; letter-spacing: 0.025em; } .contact__form03 { margin-top: 0; height: 0; opacity: 0; visibility: hidden; } .contact__submit p { margin-right: 30px; &:last-child { margin-right: 0; } [name="submitBack"] { background: #777; } }
}
.page-id-15 .contact__txt, .page-id-16 .contact__txt {
margin-top: 110px;
}
.page-id-15 .contact__form, .page-id-16 .contact__form {
margin-top: 80px;
}
.u-text__block {
margin-top: 110px; max-width: 960px; margin-left: auto; margin-right: auto; padding-left: 4.33%; padding-right: 4.33%; box-sizing: border-box; .u-ttl__02 { font-size: 28px; font-weight: normal; } .u-ttl__01 { font-size: 20px; font-weight: normal; } .u-txt { margin-top: 10px; p { font-size: 16px; a { text-decoration: underline; transition: all 0.1s cubic-bezier(0.445, 0.05, 0.55, 0.95); &:hover { color: #777; } } } }
}
@media screen and (max-width: 1280px) {
.u-text__block { padding-left: 4.16%; padding-right: 4.16%; }
}
.privacypolicy__group {
margin-bottom: 50px; &:last-child { margin-bottom: 0; }
}
// .album-container.scroll{ // perspective: 1px;
// transform-style: preserve-3d; // .album-section{ // transform: translate3D(-50%, -120px, -1px) scale(2); // } // } .album-section{
background-size: cover; background-position: center; a{ text-decoration:none; } a:hover{ text-decoration:none; } .album-title{ color: white !important; } .album-corner{ margin-top: 3rem; height: 25rem; width: 18rem; border-style: solid; border-color: white; border-width: 1.5ex 1.5ex 2.5ex; -webkit-transition: 0.5s; transition: 0.5s; backdrop-filter: brightness(0.9); } .album-corner:hover{ background-color: rgba(255, 255, 255, 0.397); padding-top: -3ex; } .album-enter{ color: white !important; transform: translateY(-3em); }
} .slick-dots{
transform: translateY(-16rem);
}
section.v-section {
margin-top: 0px; width: 100%; height: 100vh; background-repeat: no-repeat; background-position: 50% -1%; background-size: 100% auto; position: relative; overflow: hidden; background-attachment: scroll; display: flex; justify-content: center; align-items: center; background-color: white;
} section.v-section-70 {
margin-top: 0px; width: 100%; height: 70vh; background-repeat: no-repeat; background-position: 50% -1%; background-size: 100% auto; position: relative; overflow: hidden; background-attachment: scroll; display: flex;
} section.v-section-cover{
margin-top: -100vh; width: 50%; height: 100vh; background-repeat: no-repeat; background-position: 0 0; background-size: 100vw auto; position: relative; overflow: clip; background-attachment: scroll; display: flex; justify-content: center; align-items: center; /*transition: width 2s;*/ border-right: 5px solid #FFF;
}
@media screen and (max-width: 768px){
section.v-section { margin-top: 0px; width: 100%; height:100vh; background-repeat: no-repeat; background-position: 0 0; background-size: auto 100%; position: relative; overflow: hidden; background-attachment: scroll; display: flex; justify-content: center; align-items: center; } section.v-section-cover{ margin-top: -100vh; width: 10%; height:100vh; background-repeat: no-repeat; background-position: 0 0 ; background-size: auto 100%; position: relative; overflow: hidden; background-attachment: scroll; display: flex; justify-content: center; align-items: center; transition: width 1s; border-right: 5px solid #FFF; } section.v-section-70 { margin-top: 0px; width: 100%; background-repeat: no-repeat; background-position: 50% -1%; background-size: auto 100%; position: relative; overflow: hidden; background-attachment: scroll; display: flex; }
} .down-arrow{
transform: translateY(-3em); font-size: 4rem; font-weight: bold; text-align: center; animation: blink 2s linear infinite; -webkit-animation: blink 2s linear infinite; -moz-animation: blink 2s linear infinite; -ms-animation: blink 2s linear infinite; -o-animation: blink 2s linear infinite;
} @keyframes blink {
0% { color: white; } 50% { color: transparent; } 100% { color: white; }
}