@charset "UTF-8";
@import url(//hello.myfonts.net/count/346e77);
@font-face {font-family: 'UniversLT-Condensed';src: url(//compoundinc.jp/cms2/wp-content/themes/compound_ver3/webfonts/346E77_0_0.eot);src: url(//compoundinc.jp/cms2/wp-content/themes/compound_ver3/webfonts/346E77_0_0.eot?#iefix) format('embedded-opentype'),url(//compoundinc.jp/cms2/wp-content/themes/compound_ver3/webfonts/346E77_0_0.woff2) format('woff2'),url(//compoundinc.jp/cms2/wp-content/themes/compound_ver3/webfonts/346E77_0_0.woff) format('woff'),url(//compoundinc.jp/cms2/wp-content/themes/compound_ver3/webfonts/346E77_0_0.ttf) format('truetype');}
@font-face {font-family: 'UniversLT-CondensedBold';src: url(//compoundinc.jp/cms2/wp-content/themes/compound_ver3/webfonts/346E77_1_0.eot);src: url(//compoundinc.jp/cms2/wp-content/themes/compound_ver3/webfonts/346E77_1_0.eot?#iefix) format('embedded-opentype'),url(//compoundinc.jp/cms2/wp-content/themes/compound_ver3/webfonts/346E77_1_0.woff2) format('woff2'),url(//compoundinc.jp/cms2/wp-content/themes/compound_ver3/webfonts/346E77_1_0.woff) format('woff'),url(//compoundinc.jp/cms2/wp-content/themes/compound_ver3/webfonts/346E77_1_0.ttf) format('truetype');}
@font-face {font-family: 'UniversLTStd-LightCn';src: url(//compoundinc.jp/cms2/wp-content/themes/compound_ver3/webfonts/346E77_2_0.eot);src: url(//compoundinc.jp/cms2/wp-content/themes/compound_ver3/webfonts/346E77_2_0.eot?#iefix) format('embedded-opentype'),url(//compoundinc.jp/cms2/wp-content/themes/compound_ver3/webfonts/346E77_2_0.woff2) format('woff2'),url(//compoundinc.jp/cms2/wp-content/themes/compound_ver3/webfonts/346E77_2_0.woff) format('woff'),url(//compoundinc.jp/cms2/wp-content/themes/compound_ver3/webfonts/346E77_2_0.ttf) format('truetype');}

* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-family: UniversLT-CondensedBold, "TBゴシック M", sans-serif;
font-weight: normal;
font-style: normal;
letter-spacing: 0.05rem;
vertical-align: middle;
}
button {
background: none;
border: none;
outline: none;
}
ul {
list-style: none;
}
html,
body {
height: 100%;
overflow: hidden;
letter-spacing: 0.05rem;
line-height: 1.75;
background: #fff;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
font-size: 14px;
color: #2b2b2b;
}
@media screen and (min-width: 768px) {
html,
body {
font-size: 16px;
}
}
a {
color: #555;
text-decoration: none;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
a:hover {
color: #000;
} .v_pc {
display: none;
}
@media screen and (min-width: 768px) {
.v_pc {
display: block;
}
}
i {
padding: 1rem 0;
}
i.arr_pre, i.arr_post {
position: relative;
}
i.arr_pre:after, i.arr_post:after {
content: "";
position: absolute;
top: 0.25rem;
width: 1.5rem;
height: 1.5rem;
border-top: 1px #ddd solid;
border-right: 1px #ddd solid;
}
i.arr_pre:after {
-webkit-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
transform: rotate(-135deg);
}
i.arr_post:after {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
i.divider {
position: relative;
margin-left: 0.5rem;
padding-left: 0.5rem;
}
i.divider:after {
content: "";
position: absolute;
top: 0;
left: 0;
border-left: 1px solid #ddd;
height: 2rem;
}
.wrapper { }
header {
position: absolute;
top: -0.05rem;
left: 0;
z-index: 1;
width: 100%;
line-height: 3rem;
mix-blend-mode: multiply;
padding: 0 1.5rem;
}
@media screen and (min-width: 768px) {
header {
padding: 0 3rem;
}
}
header > * {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
max-width: 1100px;
margin: 0 auto;
}
header > a,
header i {
display: block;
}
header i.arr_post:after {
left: -1.5rem;
}
header h1 {
position: relative;
top: 6px;
margin: 0 auto;
max-width: 70vw;
}
@media screen and (min-width: 768px) {
header h1 {
max-width: none;
}
}
header h1 img {
max-width: 100%;
width: 380px;
}
header .nav_wrapper {
position: relative;
white-space: nowrap;
overflow-y: hidden;
overflow-x: auto;
-ms-overflow-style: none;
-webkit-overflow-scrolling: touch;
}
header .nav_wrapper::-webkit-scrollbar {
display: none;
}
header .nav_wrapper .scroller {
height: 3em;
width: auto;
position: absolute;
top: 0;
z-index: -1;
}
header .hnav {
height: 3rem;
-webkit-transition: all 0.75s ease-in-out;
-o-transition: all 0.75s ease-in-out;
transition: all 0.75s ease-in-out;
font-size: 15px;
line-height: 1.5rem;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
width: 100%;
}
@media screen and (max-width: 1099px) {
header .hnav {
opacity: 0;
}
}
@media screen and (min-width: 860px) {
header .hnav {
-webkit-justify-content: space-around;
-ms-flex-pack: distribute;
justify-content: space-around;
}
}
@media screen and (min-width: 1100px) {
header .hnav {
width: 100%;
}
}
header .hnav > a,
header .hnav i {
display: inline-block;
line-height: 1rem;
position: relative;
letter-spacing: 0;
}
header .hnav a {
padding: 1rem 0.75rem;
position: relative;
}
header .hnav a:before {
content: "";
background: #0ff;
position: absolute;
opacity: 0;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
bottom: 6px;
left: 50%;
width: 6px;
height: 6px;
border-radius: 3px;
text-align: center;
margin: 0 0 0 -3px;
}
header .hnav a:hover:before {
opacity: 1;
}
header .hnav a:active:before {
opacity: 0;
}
header .hnav a.active {
color: #2b2b2b;
}
header .hnav a.active:before {
background: #2b2b2b;
opacity: 1;
}
.lower .inner,
.upper .inner {
max-width: 1100px;
margin: 0 auto;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
@media screen and (min-width: 768px) {
.lower .inner,
.upper .inner {
display: grid;
grid-template-columns: 3fr 1fr;
}
}
.lower .inner ul li,
.upper .inner ul li {
display: inline-block;
}
.lower .inner ul li.grid-sizer, .lower .inner ul li.grid-item,
.upper .inner ul li.grid-sizer,
.upper .inner ul li.grid-item {
width: 50%;
}
@media screen and (min-width: 768px) {
.lower .inner ul li.grid-sizer, .lower .inner ul li.grid-item,
.upper .inner ul li.grid-sizer,
.upper .inner ul li.grid-item {
width: 33.333%;
}
}
.lower .inner ul li img,
.upper .inner ul li img {
max-width: 100%;
height: auto;
vertical-align: top;
}
.lower .inner ul.item_news,
.upper .inner ul.item_news {
display: none;
-webkit-column-count: 1;
-moz-column-count: 1;
column-count: 1;
-webkit-column-gap: 0px;
-moz-column-gap: 0px;
column-gap: 0px;
text-align: center;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.lower .inner ul.item_news li,
.upper .inner ul.item_news li {
margin-bottom: 1rem;
}
@media screen and (min-width: 768px) {
.lower .inner ul.item_news,
.upper .inner ul.item_news {
display: block;
padding: 1rem;
}
}
.lower .inner.hidden ul,
.upper .inner.hidden ul {
opacity: 0;
z-index: -1;
}
.lower .inner .text,
.upper .inner .text {
-webkit-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
transition: all 2s ease-in-out;
padding: 1.5rem;
color: #2b2b2b;
}
.lower .inner .text h2,
.upper .inner .text h2 {
font-size: 1.5rem;
letter-spacing: 0.05rem;
}
.lower .inner .text .title_jp,
.upper .inner .text .title_jp {
font-size: 0.85rem;
letter-spacing: 0.025rem;
margin-top: 0.25rem;
font-family: "TBゴシック M", sans-serif;
}
.lower .inner .text .tags,
.upper .inner .text .tags {
font-size: 0.65rem;
margin-top: 0.5rem;
}
.lower .inner .text .tags li,
.upper .inner .text .tags li {
margin-right: 0.5rem;
}
.lower .inner .text .tags li a,
.upper .inner .text .tags li a {
letter-spacing: 0.05rem;
font-family: "TBゴシック M", sans-serif;
color: #0ff;
}
.lower .inner .text .tags li a:hover,
.upper .inner .text .tags li a:hover {
color: #2b2b2b;
}
.lower .inner .text .info,
.upper .inner .text .info {
margin-top: 1rem;
}
.lower .inner .text .info > *,
.upper .inner .text .info > * {
font-size: 0.75rem;
font-family: "TBゴシック M", sans-serif;
word-break: break-word;
}
.lower .inner .text .info a,
.upper .inner .text .info a {
font-family: "TBゴシック M", sans-serif;
}
.lower .inner .text .info a:hover,
.upper .inner .text .info a:hover {
opacity: 0.65;
}
.lower .inner .text .desc > *,
.upper .inner .text .desc > * {
font-size: 0.75rem;
line-height: 1.75;
font-family: "TBゴシック M", sans-serif;
margin-top: 1rem;
word-break: break-word;
text-align: justify;
}
.lower .inner .text .desc .txt_en,
.upper .inner .text .desc .txt_en {
font-family: "TBゴシック M", sans-serif;
}
.lower .inner .images img,
.upper .inner .images img {
width: 100%;
max-width: 100%;
vertical-align: bottom;
padding: 1rem 1rem 0 1rem;
}
.lower .inner .images img:last-child,
.upper .inner .images img:last-child {
padding-bottom: 1rem;
}
@media screen and (min-width: 768px) {
.lower .inner .images img,
.upper .inner .images img {
width: auto;
padding: 1rem 0 0 1rem;
}
.lower .inner .images img:last-child,
.upper .inner .images img:last-child {
padding-bottom: 1rem;
}
}
.lower .inner .neighbours,
.upper .inner .neighbours {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
font-size: 0.65rem;
line-height: 1.5;
margin-top: 2.5rem;
width: 100%;
}
.lower .inner .neighbours > *,
.upper .inner .neighbours > * {
padding: 0 0 1.5rem 0;
display: inline-block;
width: 50%;
position: relative;
}
.lower .inner .neighbours > a,
.upper .inner .neighbours > a {
color: #999;
}
.lower .inner .neighbours > a img,
.upper .inner .neighbours > a img {
width: 60%;
}
.lower .inner .neighbours > a:after,
.upper .inner .neighbours > a:after {
position: absolute;
z-index: 1;
top: 50%;
margin-top: -0.6rem;
background: #ccc;
line-height: 1;
padding: 0.325rem 0.5rem 0.065rem;
display: block;
text-align: center;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
font-size: 1.15rem;
color: #2b2b2b;
}
.lower .inner .neighbours > a:first-child,
.upper .inner .neighbours > a:first-child {
padding: 0 1rem 0 1.5rem;
}
.lower .inner .neighbours > a:first-child:after,
.upper .inner .neighbours > a:first-child:after {
content: "PREV";
left: 0;
}
@media screen and (min-width: 768px) {
.lower .inner .neighbours > a:first-child,
.upper .inner .neighbours > a:first-child {
padding: 0 0 0 1rem;
}
}
.lower .inner .neighbours > a:last-child,
.upper .inner .neighbours > a:last-child {
padding: 0 1.5rem 0 1rem;
text-align: right;
}
.lower .inner .neighbours > a:last-child:after,
.upper .inner .neighbours > a:last-child:after {
content: "NEXT";
right: 0;
}
@media screen and (min-width: 768px) {
.lower .inner .neighbours > a:last-child,
.upper .inner .neighbours > a:last-child {
padding: 0 1rem 0 0;
}
}
.lower .inner .neighbours > a:hover,
.upper .inner .neighbours > a:hover {
color: #2b2b2b;
}
.lower .inner .neighbours > a:hover:after,
.upper .inner .neighbours > a:hover:after {
color: #0ff;
}
.lower .inner .neighbours > a:hover:first-child:after,
.upper .inner .neighbours > a:hover:first-child:after {
left: -0.5rem;
}
.lower .inner .neighbours > a:hover:last-child:after,
.upper .inner .neighbours > a:hover:last-child:after {
right: -0.5rem;
}
.lower {
font-size: 3rem;
background: #fff;
width: 100%;
opacity: 0;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
height: 100%;
padding: 6rem 1.5rem 1.5rem;
}
.lower .inner {
-webkit-filter: grayscale(1);
filter: grayscale(1);
}
.lower .inner > * {
-webkit-filter: blur(8px);
filter: blur(8px);
opacity: 1;
}
.lower .caption {
display: none;
text-align: justify;
}
@media screen and (min-width: 768px) {
.lower .inner .text h2,
.lower .inner .text p,
.lower .inner .text ul,
.lower .inner .text *,
.lower .inner .text .title_jp,
.lower .inner .text .info,
.lower .inner .text .desc {
font-size: 3rem;
}
}
.lower .inner .neighbours {
display: none;
}
.upper {
position: absolute;
top: 6rem;
left: 0;
width: 100%;
height: calc(100% - (3rem * 2.65));
}
.upper .inner {
width: calc(100% - (3rem));
height: 100%;
overflow: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
opacity: 0;
padding: 0;
background: #fff;
opacity: 1;
}
.upper .inner ul li a {
display: block;
}
.upper .inner ul li img {
position: relative;
}
.upper .inner ul li.visible {
opacity: 1;
}
.upper .inner ul li.hovered {
z-index: 10;
}
.upper .inner ul li.hovered .caption {
top: 0;
opacity: 1;
-webkit-transition: all 0.75s ease-in-out;
-o-transition: all 0.75s ease-in-out;
transition: all 0.75s ease-in-out;
}
.upper .inner ul.item_works .caption {
font-size: 26px;
line-height: 1.5;
text-align: left;
color: #0ff;
letter-spacing: 0.05rem;
opacity: 0;
position: absolute;
z-index: 1;
width: 100%;
top: 3px;
left: 0;
font-weight: bold;
display: block;
padding: 0.75rem 1rem;
-webkit-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
.upper .inner ul.item_works .cat {
display: block;
position: relative;
}
.upper .inner ul.item_news .caption {
font-family: UniversLT-CondensedBold, "TBゴシック M", sans-serif;
font-size: 11px;
text-align: left;
letter-spacing: 0;
line-height: 1.65;
padding-top: 0.5rem;
z-index: 1;
width: 100%;
display: block;
}
.upper .inner ul.item_news .caption a {
font-family: UniversLT-CondensedBold, "TBゴシック M", sans-serif;
display: block;
word-break: break-all;
letter-spacing: 0;
}
.upper .inner ul.item_news .caption a:hover {
color: #0ff;
}
.upper .inner ul.item_news img {
max-width: 100%;
}
.upper .inner.hidden {
overflow: hidden;
-webkit-overflow-scrolling: none;
}
.upper .inner.hidden * {
display: none;
}
.upper .inner2 {
overflow: auto;
opacity: 0;
-webkit-align-content: center;
-ms-flex-line-pack: center;
align-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
position: fixed;
top: 6rem;
left: 0;
z-index: -1;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
align-items: center;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
height: calc(100vh - (3rem * 2.65));
width: 100%;
}
.upper .inner2 > div {
width: calc(100% - 1.5rem * 2);
height: 100%;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
max-width: 1100px;
background: #fff;
padding: 1.5rem;
}
.upper .inner2 p {
margin-bottom: 1rem;
}
.upper .inner2 img {
max-width: 100%;
}
.upper .inner2.visible {
opacity: 1;
}
.upper .inner2.z-index1 {
z-index: 1;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.upper .inner2 .item_news {
-webkit-column-count: 1;
-moz-column-count: 1;
column-count: 1;
-webkit-column-gap: 0px;
-moz-column-gap: 0px;
column-gap: 0px;
text-align: center;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.upper .inner2 .item_news li {
margin-bottom: 1rem;
padding-bottom: 1rem;
border-bottom: 1px solid #ddd;
}
.upper .inner2 .item_news li .caption {
font-family: "TBゴシック M", sans-serif;
font-size: 0.75rem;
line-height: 1.65;
text-align: left;
letter-spacing: 0.05rem;
padding-top: 0.5rem;
z-index: 1;
width: 100%;
display: block;
}
@media screen and (max-width: 767px) {
.upper .inner2 .item_news li .caption {
padding-top: 0;
}
}
.upper .inner2 .item_news li .caption a {
word-break: break-all;
text-align: justify;
display: block;
}
@media screen and (min-width: 768px) {
.upper .inner2 .item_news {
display: block;
padding: 1.5rem;
}
}
.upper .inner2.about > div {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.upper .inner2.about > div > div {
width: 39.5rem;
max-width: 100%;
margin: 0 auto;
}
@media screen and (max-width: 767px) {
.upper .inner2.about br {
display: none;
}
}
.upper .inner2.contact > div {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
@media screen and (max-width: 767px) {
.upper .inner2.contact > div div .pc {
display: none;
}
}
@media screen and (max-width: 767px) {
.upper .inner2.contact > div div .sp {
display: block;
}
}
.upper .inner2.contact > div div a {
font-size: 1.2rem;
margin-top: 1.2rem;
display: block;
}
.upper .inner2.overh > div {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
::-webkit-full-page-media,
_:future,
:root .upper .inner2 {
height: calc(87vh - (3rem * 2.8));
}
.others {
-webkit-filter: blur(8px);
filter: blur(8px);
}
.others img {
-webkit-filter: grayscale(1);
filter: grayscale(1);
}
footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
padding: 0 1.5rem;
}
@media screen and (min-width: 768px) {
footer {
padding: 0 3rem;
}
}
.copyright {
text-align: center;
color: #fff;
}
@media screen and (min-width: 768px) {
.copyright {
text-align: right;
}
}
.copyright small {
font-size: 0.5rem;
} .loaded {
background: #d8d8d8;
}
.loaded .lower,
.loaded .upper {
opacity: 1; }
.loaded .lower {
background: #d8d8d8;
-webkit-transition: 0.2s background ease-out;
-o-transition: 0.2s background ease-out;
transition: 0.2s background ease-out;
}
@media screen and (max-width: 1099px) {
.loaded .hnav {
opacity: 1;
}
} @media screen and (min-width: 768px) {
.second .lower .inner,
.second .upper .inner {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
grid-template-columns: none;
}
.second .lower .inner > *,
.second .upper .inner > * {
width: 50%;
}
}
.second .upper .inner2.news {
padding: 0;
-webkit-box-pack: start;
-webkit-justify-content: start;
-ms-flex-pack: start;
justify-content: start;
}
.second .upper .inner2 .item_news {
text-align: center;
-webkit-column-count: unset;
-moz-column-count: unset;
column-count: unset;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding: 0;
}
.second .upper .inner2 .item_news li {
width: 100%;
padding: 0.5rem;
}
@media screen and (min-width: 768px) {
.second .upper .inner2 .item_news li {
width: 50%;
}
}
@media screen and (min-width: 1024px) {
.second .upper .inner2 .item_news li {
width: 33.3%;
}
}
.wufoo-form-container {
width: 100%;
}
@media screen and (min-width: 768px) {
.wufoo-form-container {
width: 700px !important;
}
}