.button-external-arrow {
position:relative;
}
.button-external-arrow::after {
content: "";
display: block;
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2215.212%22%20height%3D%2215.219%22%20viewBox%3D%220%200%2015.212%2015.219%22%3E%20%3Cg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_491%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%20491%22%20transform%3D%22translate(-1000.69%20-132.588)%22%3E%20%3Cg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_377%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%20377%22%20transform%3D%22translate(997.161%20143.572)%20rotate(-45)%22%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_424%22%20data-name%3D%22%E3%83%91%E3%82%B9%20424%22%20d%3D%22M0%2C0H14.826%22%20transform%3D%22translate(0%205.49)%22%20fill%3D%22none%22%20stroke%3D%22%23111%22%20stroke-width%3D%221%22%2F%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_425%22%20data-name%3D%22%E3%83%91%E3%82%B9%20425%22%20d%3D%22M0%2C0%2C5.49%2C5.49%2C0%2C10.98%22%20transform%3D%22translate(8.973%200)%22%20fill%3D%22none%22%20stroke%3D%22%23111%22%20stroke-width%3D%221%22%2F%3E%20%3C%2Fg%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_426%22%20data-name%3D%22%E3%83%91%E3%82%B9%20426%22%20d%3D%22M1000.932%2C133.015h14.5v14.479%22%20transform%3D%22translate(-0.157%200.074)%22%20fill%3D%22none%22%20stroke%3D%22%23111%22%20stroke-width%3D%221%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E");
width: 18px;
height: 15px;
margin-left: 8px;
position: absolute;
right: -28px;
top: 3px;
background-repeat: no-repeat;
background-position:50% 100%
}
.layout-main {
width: 90.27778vw;
margin:auto;
font-size:15px;
}
@media (max-width: 767px) {
.layout-main {
width: 100%;
padding:0 4.26667vw
}
.footer__bottom-policy,.footer__bottom-policy:hover { color:#00; }
}
/* .footer__access-map.white { color:#fff; } */
.footer-contact {
color: #000;
background-image: url(../ARXIA_img/_2/bg-gray.jpg);
background-size: cover;
padding: 112px 0 87px;
text-align:center
}
/* .footer-contact__inner { color:#fff; } */
@media (max-width: 767px) {
.footer-contact {
padding:16vw 0
}
}
.footer-contact__title {
font-size: 50px;
color:#000;
letter-spacing:.07em
}
@media (max-width: 767px) {
.footer-contact__title svg {
width: 52.53333vw;
height:9.33333vw
}
}
.footer-contact__text {
margin-top: 16px;
font-size: 15px;
line-height: 1.9;
letter-spacing:.06em
}
@media (max-width: 767px) {
.footer-contact__text {
font-size: 3.73333vw;
margin-top: 5.33333vw;
line-height: 2;
padding: 0 4.26667vw;
text-align:left
}
}
.footer-contact__button {
border-color: #000;
margin:33px auto 0
}
@media (max-width: 767px) {
.footer-contact__button {
margin:8.8vw auto 0
}
}
.footer-tel {
text-align: center;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
padding: 49px 0;
display: -webkit-box;
display:flex
}
@media (max-width: 767px) {
.footer-tel {
padding: 6.66667vw 0 8vw;
flex-wrap:wrap
}
}
.footer-tel__text {
font-size: 17px;
margin-right: 29px;
letter-spacing:.06em
}
@media (max-width: 767px) {
.footer-tel__text {
font-size: 3.73333vw;
margin-right:0
}
}
.footer-tel__image {
width: 235px;
margin-right:25px
}
@media (max-width: 767px) {
.footer-tel__image {
width: 73.6vw;
margin:5.33333vw 0 0
}
}
.footer {
background-image: url(../ARXIA_img/_2/bg-gray.jpg);
color:#000
}
.footer__inner {
display: -webkit-box;
display: flex;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: justify;
justify-content: space-between;
padding:100px 0
}
@media (max-width: 767px) {
.footer__inner {
flex-wrap: wrap;
padding:17.33333vw 0 9.33333vw
}
}
.footer__logo {
display: -webkit-box;
display: flex;
-webkit-box-align: center;
align-items:center
}
@media (max-width: 767px) {
.footer__logo {
flex-wrap:wrap;
align-items: center;
justify-content: center;
}
}
.footer__logo-image {
width: 142px;
height:53px
}
@media (max-width: 767px) {
.footer__logo-image {
width: 30.4vw;
height: 11.2vw;
margin:auto
}
}
/* .footer__gnav a { color:#fff; } */
.footer__sns-list {
margin-left:40px;
}
.sns ul {
display: flex;
gap: 10px;
align-items: center;
list-style: none;
padding: 0;
margin: 0;
}
@media (max-width: 767px) {
.footer__sns-list {
width: 100%;
text-align: center;
display: none;
margin:7.33333vw 0 0
}
}
.footer__sns {
border: 1px solid #efefef;
border-radius: 50%;
position: relative;
width: 28px;
height: 28px;
display: -webkit-inline-box;
display: inline-flex;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content:center
}
.footer__sns + .footer__sns {
margin-left:3px
}
@media (max-width: 767px) {
.footer__sns + .footer__sns {
margin-left:2.4vw
}
}
.footer__sns-border {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
fill: none;
stroke: #000;
stroke-width: .8;
stroke-dasharray: 0 90;
-webkit-transition: stroke-dasharray 2s cubic-bezier(.215, .61, .355, 1);
transition: stroke-dasharray 2s cubic-bezier(.215, .61, .355, 1);
position: absolute;
top: -2px;
left:-1px
}
.footer__sns-icon {
width: 14px;
height:11px
}
.footer__menu {
margin-top: 80px;
display: -webkit-box;
display:flex
}
@media (min-width: 768px) {
.footer__menu-link {
position:relative
}
.footer__menu-link:hover:before {
-webkit-transform-origin: left top;
transform-origin: left top;
-webkit-transform: scale(1);
transform:scale(1)
}
.footer__menu-link:before {
content: "";
position: absolute;
left: 0;
bottom: -5px;
width: 100%;
background-color: #fff;
height: 1px;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: right top;
transform-origin: right top;
-webkit-transition: -webkit-transform .5s;
transition: -webkit-transform .5s;
transition: transform .5s;
transition:transform .5s, -webkit-transform .5s
}
}
.footer__menu-link:after {
right: -23px;
top:0
}
.footer__menu-link + .footer__menu-link {
margin-left:56px
}
@media (min-width: 768px) and(max-width: 1025px) {
.footer__menu-link + .footer__menu-link {
margin-left: 16px;
font-size:12px
}
}
.footer__access {
padding:34px 62px 0 0
}
@media (min-width: 768px) and(max-width: 1025px) {
.footer__access {
padding:34px 0 0
}
}
.footer__access-title {
color:#000
}
.footer__access-text {
margin-top: 16px;
line-height: 1.8;
font-size:14px
}
@media (max-width: 767px) {
.footer__access-text {
width: 100%;
text-align: center;
font-size: 2.93333vw;
margin-top: 7.2vw;
line-height: 2;
letter-spacing:.01em
}
}
.footer__access-map {
display: inline-block;
margin-top: 10px;
font-size: 13px;
position:relative
}
.footer__access-map:before {
content: "";
display: block;
width: 100%;
height: 1px;
position: absolute;
bottom: -1px;
left: 0;
background-color: #111;
background-image: -webkit-gradient(linear, left top, right top, color-stop(33%, #000), color-stop(33%, #fff), color-stop(66%, #fff), color-stop(66%, #000), to(#000));
background-image: linear-gradient(90deg, #000 33%, #fff 0, #fff 66%, #000 0, #000);
background-position: 100%;
background-origin: right;
background-size:300%
}
.footer__access-map:hover:before {
background-position: 0;
-webkit-transition: background-position 1s;
transition:background-position 1s
}
/* .footer__access-map.white:before {
background-image: -webkit-gradient(linear, left top, right top, color-stop(33%, #fff), color-stop(33%, #000), color-stop(66%, #000), color-stop(66%, #fff), to(#fff));
background-image:linear-gradient(90deg, #fff 33%, #000 0, #000 66%, #fff 0, #fff)
} */
.footer__access-map svg {
width: 10px;
height:13px
}
@media (max-width: 767px) {
.footer__access-map {
font-size: 3.2vw;
margin:1.6vw auto
}
}
.footer__bottom {
font-size: 12px;
display: -webkit-box;
display: flex;
-webkit-box-pack: justify;
justify-content: space-between;
padding:13px 70px
}
@media (max-width: 767px) {
.footer__bottom {
padding: 4vw 0;
-webkit-box-pack: center;
justify-content:center
}
}
.footer__bottom-copy {
color: #666;
font-size:12px
}
@media (max-width: 767px) {
.footer__bottom-copy {
font-size:2.66667vw
}
}
.footer__bottom-policy {
position:relative
}
.footer__bottom-policy:hover:before {
-webkit-transform-origin: left top;
transform-origin: left top;
-webkit-transform: scale(1);
transform:scale(1)
}
.footer__bottom-policy:before {
content: "";
position: absolute;
left: 0;
bottom: -5px;
width: 100%;
background-color: #111;
height: 1px;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: right top;
transform-origin: right top;
-webkit-transition: -webkit-transform .5s;
transition: -webkit-transform .5s;
transition: transform .5s;
transition:transform .5s, -webkit-transform .5s
}
@media (max-width: 767px) {
.footer__bottom-policy {
font-size: 2.66667vw;
text-decoration: underline;
margin:7.73333vw auto 0
}
}
.button-circle {
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
width: 320px;
height: 61px;
border: 1px solid #111;
font-size: 20px;
overflow: hidden;
position: relative;
-webkit-transition: color .5s;
transition:color .5s
}
@media (max-width: 767px) {
.button-circle {
width: 80vw;
height: 14.66667vw;
font-size: 4.8vw;
padding-right:6.66667vw
}
}
.button-circle span {
position:relative
}
.button-circle span:after {
content: "";
display: block;
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2218.202%22%20height%3D%2213.989%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22currentColor%22%3E%3Cpath%20d%3D%22M0%206.995h17.934%22%2F%3E%3Cpath%20d%3D%22M10.854.354l6.641%206.641-6.641%206.641%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
width: 18px;
height: 15px;
margin-left: 8px;
position: absolute;
right: -24px;
top: 8px;
background-repeat: no-repeat;
background-position:50%
}
@media (max-width: 767px) {
.button-circle span:after {
width: 4.53333vw;
height: 3.46667vw;
background-size: contain;
margin-left: 2.13333vw;
right: -7.46667vw;
top:1.6vw
}
}
.button-circle:before {
content: "";
display: block;
width: 100%;
height: 100%;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
-webkit-transition: .5s;
transition: .5s;
position: absolute;
top: 0;
left:0
}
.button-circle:hover:before {
-webkit-animation: mouseShowCircle .6s ease forwards;
animation:mouseShowCircle .6s ease forwards
}
.button-circle.is-mouse-leave:before {
-webkit-animation: mouseLeaveCircle .6s ease;
animation:mouseLeaveCircle .6s ease
}
.button-circle.white {
color:#000;
border-color:#fff
}
/* .button-circle.white span:after {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2218.202%22%20height%3D%2213.989%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23fff%22%3E%3Cpath%20d%3D%22M0%206.995h17.934%22%2F%3E%3Cpath%20d%3D%22M10.854.354l6.641%206.641-6.641%206.641%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")
} */
.button-circle.white:before {
background-color:#fff
}
.button-circle.white:hover {
color:#111
}
.button-circle.white:hover span:after {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2218.202%22%20height%3D%2213.989%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22currentColor%22%3E%3Cpath%20d%3D%22M0%206.995h17.934%22%2F%3E%3Cpath%20d%3D%22M10.854.354l6.641%206.641-6.641%206.641%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")
}
.button-circle.white {
border-color:#000
}
/* .button-circle.white span:after {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2218.202%22%20height%3D%2213.989%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23fff%22%3E%3Cpath%20d%3D%22M0%206.995h17.934%22%2F%3E%3Cpath%20d%3D%22M10.854.354l6.641%206.641-6.641%206.641%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")
} */
.button-circle.white:before {
background-color:#fff
}
.button-circle.white:hover {
background: #fff;
color:#111;
}
.button-circle.white:hover span:after {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2218.202%22%20height%3D%2213.989%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22currentColor%22%3E%3Cpath%20d%3D%22M0%206.995h17.934%22%2F%3E%3Cpath%20d%3D%22M10.854.354l6.641%206.641-6.641%206.641%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")
}
@charset "UTF-8";
/* --------
[コーディングルール]
・基本classのみ使用し、idはアンカーやJSで使用
・class名、フォルダ名、ファイル名はハイフン(-）区切り
・トップページはロゴを、他のページはロゴを
でページタイトルを
にする
・メディアクエリーはPCファーストで、@media (max-width: 767px) {}を使用
-------- */
/* reset -------- */
*,
*:before,
*:after {
box-sizing: border-box;
}
body {
line-height: 1.5;
margin: 0;
padding: 0;
/*font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;*/
font-size: 13px;
color: #000;
/*
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
*/
}
article,
aside,
figure,
footer,
header,
hgroup,
nav,
section {
display: block;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
th,
td,
address,
small,
i {
margin: 0;
padding: 0;
font-size: 100%;
font-weight: normal;
font-style: normal;
}
ol,
ul,
dl,
dt,
dd {
list-style-type: none;
margin: 0;
padding: 0;
}
img,
object,
embed {
border: 0;
vertical-align: bottom;
}
img {
max-width: 100%;
}
table {
border-spacing: 0;
border-collapse: collapse;
}
th {
text-align: left;
}
em {
font-style: normal;
font-weight: bold;
}
a {
color: #000;
text-decoration: none;
}
a:hover {
color: #000;
}
/* all -------- */
.clearfix {
zoom: 1;
}
.clearfix:after {
content: "";
display: block;
clear: both;
}
.container {
max-width: 990px;
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
.display-inline {
display: inline;
}
.display-inline-block {
display: inline-block;
}
.display-block {
display: block;
}
.display-table {
display: table;
}
.display-table-cell {
display: table-cell;
}
.bg-cover {
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
height: 0;
padding-top: 71.42%;
}
@media (max-width: 767px) {
.pc {
display: none;
}
.container {
padding-left: 20px;
padding-right: 20px;
}
}
@media (min-width: 768px) {
.sp {
display: none;
}
.over {
transition: opacity 0.3s;
}
.over:hover {
opacity: 0.7;
filter: alpha(opacity=70);
-ms-filter: "alpha( opacity=70 )";
}
}
/* footer -------- */
.footer-inner {
position: relative;
/* max-width: 990px; */
max-width: 1100px;
margin: 0 auto;
padding: 0 15px;
min-height: 180px;
}
.footer .logo {
position: relative;
z-index: 2;
float: left;
padding-top: 35px;
}
.footer .gnav {
position: absolute;
left: 230px;
/*0*/
z-index: 1;
top: 48px;
/*44px*/
/*width: 100%;
text-align: center;*/
}
.footer .gnav li {
display: inline-block;
}
.footer .gnav a {
display: inline-block;
padding: 10px 6px;
/*font-family: "Barlow Condensed";*/
font-size: 18px;
/*23px*/
color: #fff;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
.footer .sns {
position: relative;
z-index: 2;
float: right;
padding-top: 120px;
/*59px→100px */
}
.footer .sns li {
float: left;
margin-left: 19px;
/*15px*/
}
.footer .sns li a {
display: inline-block;
}
.footer .sns li.contact {
position: relative;
top: -5px;
margin-left: 32px;
/*24px*/
}
.footer .sns li.contact a {
padding: 0 22px;
/*font-family: "Barlow Condensed";*/
font-size: 20px;
background-color: #fff;
}
.footer .sns li.privacy {
position: absolute;
right: 5px;
bottom: -30px;
/*-70px*/
}
.footer .sns li.privacy a {
line-height: 1;
padding: 0 9px;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
/*font-family: "Barlow Condensed";*/
font-size: 15px;
color: #fff;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
.footer .copyright {
clear: both;
padding-top: 35px;
padding-bottom: 10px;
text-align: center;
font-size: 14px;
/*font-family: "Barlow Condensed";*/
color: #fff;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
@media (max-width: 1000px) {
/* .footer .logo {
width: 125px;
padding-top: 47px;
}
.footer .gnav {
padding-left: 170px;
font-size: 20px;
text-align: left;
}
.footer .gnav a {
padding: 10px 4px;
}*/
}
@media (max-width: 950px) {
/* .footer .sns {
padding-top: 99px;
}
.footer .sns li.privacy {
bottom: -30px;
}*/
}
@media (max-width: 930px) {
/* .footer .gnav {
padding-left: 100px;
}*/
/* .footer .sns {
padding-top: 99px;
}*/
.footer .sns li.privacy {
bottom: -30px;
}
}
@media (max-width: 767px) {
.footer-inner {
height: 370px;
/*384px*/
padding: 0 20px;
}
.footer .logo {
position: absolute;
left: 20px;
bottom: 34px;
float: none;
padding: 0;
}
.footer .gnav {
position: relative;
left: auto;
top: auto;
text-align: left;
padding: 22px 0 0 7px;
}
.footer .gnav li {
display: block;
float: left;
width: 50%;
}
.footer .gnav a {
display: block;
padding: 10px 6px;
font-size: 18px;
}
.footer .sns {
float: none;
padding-top: 15px;
padding-left: 12px;
padding-bottom: 20px;
/*25px*/
border-bottom: 1px solid #fff;
}
.footer .sns li {
margin-left: 0;
margin-right: 15px;
}
.footer .sns li.contact {
position: relative;
float: right;
top: -5px;
width: 50%;
margin: 0;
}
.footer .sns li.contact a {
padding: 0 45px 0 10px;
font-size: 18px;
}
.footer .sns li.privacy {
right: 5px;
bottom: -97px;
margin: 0;
}
.footer .sns li.privacy a {
padding: 0 5px;
font-size: 12px;
}
.footer .copyright {
position: absolute;
left: 20px;
bottom: 10px;
font-size: 8px;
/*font-family: "Barlow Condensed";*/
color: #fff;
}
}
.totop {
text-align: center;
margin-top: 100px;
}
.totop a {
display: inline-block;
/*font-family: "Barlow Condensed";*/
font-size: 18px;
text-decoration: none;
}
.totop a:before {
content: "";
display: block;
width: 1px;
height: 80px;
background-color: #000000;
margin-left: auto;
margin-right: auto;
}
/* header -------- */
.header-wrap {
height: 100px;
}
.header {
position: fixed;
left: 0;
top: 0;
z-index: 15;
width: 100%;
background-color: #fff;
opacity: 0.85;
}
.header-inner {
position: relative;
/* max-width: 990px; */
max-width: 1100px;
margin: 0 auto;
padding: 0 0 0 10px;
/* 0 15px*/
height: 100px;
}
.header-inner h1 {
display: block;
width: 400px;
position: absolute;
top: 21px;
left: 180px;
color: #555;
}
@media (max-width: 767px) {
.header-inner h1 {
display: block;
width: 100%;
top: 55px;
left: 0;
color: #fff;
font-size: 0.7em;
text-align: center;
background-color: #111;
}
}
.header .logo {
position: relative;
z-index: 2;
float: left;
padding-top: 7px;
/*17px*/
}
.header .gnav {
position: absolute;
left: 0;
z-index: 1;
top: 50px;
/*22px*/
width: 100%;
text-align: center;
letter-spacing: -0.4em;
}
.header .gnav li {
display: inline-block;
letter-spacing: normal;
width: 12.5%;
/*16.6666667%*/
}
@media (min-width: 768px) {
.header .gnav li.sp {
display: none;
}
}
.header .gnav a {
position: relative;
display: inline-block;
padding: 10px 0;
/*10px 6px*/
/*font-family: "Barlow Condensed";*/
font-size: 20px;
/*23px*/
}
.header .sns {
position: relative;
z-index: 2;
float: right;
padding-top: 15px;
/*37px*/
}
.header .sns li {
float: left;
margin-left: 10px;
/*17px*/
}
.header .sns li a {
display: block;
}
.header .icon-tel {
position: absolute;
top: -33px;
width: 205px;
height: 22px;
}
.header .icon-tel img {
width: 205px;
height: auto;
}
.header .logo img.pc {
width: 130px;
height: auto;
}
@media (min-width: 768px) {
body.admin-bar .header {
top: 32px;
}
.header .gnav a:after {
content: "";
display: block;
position: absolute;
left: 50%;
top: 50%;
width: 0;
height: 2px;
margin-top: -1px;
/* background-color: #cf1e28; */
transition: all 0.3s;
-webkit-transition: all 0.3s;
}
.header .gnav a:hover:after {
left: 0;
width: 100%;
}
.header .gnav a.current:after {
left: 0;
width: 100%;
}
}
@media (max-width: 850px) {
.header .gnav {
padding-left: 0;
/* 100px*/
}
}
@media (max-width: 767px) {
.header-wrap {
height: 55px;
}
body.admin-bar .header-wrap {
height: 0;
}
.header-inner {
height: 55px;
}
.header .logo {
padding-top: 10px;
}
.header .gnav {
display: none;
top: 0;
left: auto;
right: 0;
width: 200px;
/*160px*/
padding-left: 0;
background-color: #000;
}
.header .gnav ul {
padding: 60px 0 20px;
}
.header .gnav li {
display: block;
width: inherit;
}
.header .gnav a {
display: block;
padding: 8px 20px;
color: #fff;
font-size: 18px;
/* text-align: left; */
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
.header .gnav li.contact a span {
display: block;
background-color: #fff;
text-align: center;
}
.header .gnav li.lang {
text-align: center;
}
.header .gnav li.lang a {
display: inline-block;
position: relative;
}
.header .gnav li.lang a.jp {
padding: 10px 8px 10px 10px;
}
.header .gnav li.lang a.jp:after {
content: "";
position: absolute;
right: 0;
top: 15px;
display: block;
width: 1px;
height: 17px;
background-color: #fff;
}
.header .gnav li.lang a.en {
padding: 10px 10px 10px 5px;
}
.header .sns {
padding: 17px 60px 0 0;
/*17px 40px 0 0*/
}
.header .sns li {
margin-left: 13px;
}
.header .sns li a {
position: relative;
}
.header .sns li a .close {
display: block;
position: absolute;
left: 0;
top: 0;
opacity: 0;
transition: 0.3s;
}
body.is-sp-nav-open .header .sns li a .close {
opacity: 1;
}
.header .sp-menu {
position: absolute;
right: 0;
top: 0;
z-index: 2;
}
.header .sp-menu a {
display: block;
width: 55px;
height: 55px;
}
.header .sp-menu span,
.header .sp-menu span:before,
.header .sp-menu span:after {
position: absolute;
top: 50%;
left: 0;
right: 0;
display: block;
margin: 0 auto;
width: 20px;
height: 2px;
margin-top: -1px;
background: #000;
transition: 0.3s;
}
.header .sp-menu span:before {
content: "";
margin-top: -8px;
}
.header .sp-menu span:after {
content: "";
margin-top: 6px;
}
body.is-sp-nav-open .header .sp-menu span {
background: transparent;
}
body.is-sp-nav-open .header .sp-menu span:before {
margin-top: -2px;
margin-left: -2px;
height: 2px;
width: 26px;
background: #fff;
transform: rotate(-135deg);
}
body.is-sp-nav-open .header .sp-menu span:after {
margin-top: -2px;
margin-left: -2px;
height: 2px;
width: 26px;
background: #fff;
transform: rotate(-45deg);
}
}
/* --------
[content.cssについて]
・コンテンツの共通レイアウトと共通タグを記述
・共通タグは必ず.page-allを付ける（.page-allを外すと解除できるため）
-------- */
/* layout -------- */
.content {
line-height: 1.86;
font-size: 15px;
}
.content-inner {
overflow: hidden;
padding: 0 0 40px;
}
.content-title {
line-height: 1;
padding: 20px 0;
font-size: 120px;
/*font-family: "Barlow Condensed";*/
text-align: center;
}
.content-bread ul {
max-width: 980px;
margin: 0 auto;
padding: 15px;
}
.content-bread li {
display: inline-block;
}
@media (max-width: 767px) {
.content {
font-size: 11px;
}
.content-title {
font-size: 45px;
}
.content-inner {
padding: 0 0 30px;
}
}
/* wordpress editor -------- */
.page-all .aligncenter {
display: block;
margin: 0 auto;
}
.page-all .alignright {
float: right;
}
.page-all .alignleft {
float: left;
}
.page-all img[class*=wp-image-],
.page-all img[class*=attachment-] {
max-width: 100%;
height: auto;
}
/* tag -------- */
.page-all a {
color: #03c;
text-decoration: none;
}
.page-all a:hover {
color: #69f;
}
.page-all h2 {
margin: 30px 0 20px;
font-size: 80px;
/*font-family: "Barlow Condensed";*/
letter-spacing: 0.02em;
text-align: center;
}
.page-all h3 {
margin: 30px 0 20px;
font-size: 50px;
/*font-family: "Barlow Condensed";*/
text-align: center;
}
.page-all p,
.page-all ul,
.page-all ol,
.page-all table {
margin-bottom: 20px;
}
.page-all li {
margin-bottom: 10px;
}
.page-all ul {
list-style-type: disc;
padding-left: 1.5em;
}
.page-all ol {
list-style-type: decimal;
padding-left: 1.5em;
}
.page-all hr {
margin: 20px 0;
border: none;
border-top: 1px solid #999;
}
.page-all table {
width: 100%;
}
.page-all th {
width: 150px;
padding: 10px 20px;
border: 1px solid #999;
background-color: #eee;
}
.page-all td {
padding: 10px 20px;
border: 1px solid #999;
}
@media (max-width: 767px) {
.page-all h2 {
font-size: 27px;
}
}
/* --------
[page.cssについて]
・各ページごとのCSSを記述
・必ず.page-homeなど各ページごとのclassを付ける
-------- */
/* common -------- */
.visual img {
width: 100%;
}
.visual-slider {
width: 100%;
}
.visual-slider .slick-slide {
padding: 0;
}
.visual-slider .slick-slide img {
width: 100%;
}
.page-title {
/*font-family: "Barlow Condensed";*/
font-size: 85px;
line-height: 1;
text-align: center;
margin: 30px 0px;
}
.totop {
text-align: center;
margin-top: 100px;
}
.totop a {
display: inline-block;
/*font-family: "Barlow Condensed";*/
font-size: 18px;
text-decoration: none;
}
.totop a:before {
content: "";
display: block;
width: 1px;
height: 80px;
background-color: #000000;
margin-left: auto;
margin-right: auto;
}
@media (max-width: 767px) {
.page-title {
margin: 20px 0 10px;
font-size: 45px;
}
.totop {
margin-top: 40px;
}
.totop a {
font-size: 14px;
}
.totop a:before {
height: 40px;
}
}
/* pagenav */
.pagenav {
text-align: center;
}
.pagenav a,
.pagenav .current {
display: inline-block;
width: 48px;
height: 48px;
margin: 10px;
padding: 0;
border: 1px solid #000000;
text-align: center;
line-height: 48px;
/*font-family: "Barlow Condensed";*/
font-size: 30px;
text-decoration: none;
color: #000000;
}
.pagenav a:hover,
.pagenav .current {
width: 48px;
height: 48px;
border: 1px solid #000000;
background-color: #000000;
text-align: center;
line-height: 48px;
/*font-family: "Barlow Condensed";*/
font-size: 30px;
text-decoration: none;
color: #ffffff;
}
.pagenav .previouspostslink,
.pagenav .nextpostslink {
line-height: 48px;
/*font-family: "Barlow Condensed";*/
font-size: 30px;
text-decoration: none;
color: #000000;
border: none;
}
.pagenav .extend {
border: none;
}
.pagenav .extend:before {
content: "・・・";
}
@media (max-width: 767px) {
.pagenav a,
.pagenav span,
.pagenav a:hover,
.pagenav .current,
.pagenav .previouspostslink,
.pagenav .nextpostslink {
margin: 5px;
width: 25px;
height: 25px;
line-height: 25px;
font-size: 17px;
}
}
/* page-home -------- */
.page-home .content-inner {
overflow: hidden;
}
/* sec */
.page-home .sec .container {
position: relative;
}
.page-home .sec h2 {
position: absolute;
right: 100%;
top: 0;
z-index: 5;
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
transform-origin: right top;
-webkit-transform-origin: right top;
line-height: 1;
font-size: 120px;
/*font-family: "Barlow Condensed";*/
}
.page-home .about-sec h2,
.page-home .project-sec h2 {
right: 130px;
}
.page-home .sec .ini {
position: absolute;
left: 50%;
top: 0;
z-index: 5;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
/*font-family: "Barlow Condensed";*/
}
@media (min-width: 768px) {
.page-home .sec a.image-over:hover {
display: block;
opacity: 0.7;
filter: alpha(opacity=70);
-ms-filter: "alpha( opacity=70 )";
transition: opacity 0.3s;
}
}
.page-home .sec .link span {
display: inline-block;
background-color: #000;
width: 130px;
line-height: 1.7;
text-align: center;
color: #fff;
font-size: 20px;
/*font-family: "Barlow Condensed";*/
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
.page-home .sec .wide {
position: relative;
height: 0;
padding-top: 24.84%;
}
.page-home .sec .wide p {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
.page-home .sec .wide p:last-child {
opacity: 0;
animation: home-wide 5s 1.5s infinite alternate linear;
-webkit-animation: home-wide 5s 1.5s infinite alternate linear;
}
@keyframes home-wide {
0% {
opacity: 0;
}
30% {
opacity: 0;
}
70% {
opacity: 1;
}
100% {
opacity: 1;
}
}
.page-home .sec .wide img {
width: 100%;
}
@media (max-width: 767px) {
.page-home .sec h2 {
right: 100%;
margin-right: 10px;
font-size: 55px;
}
.page-home .about-sec h2,
.page-home .project-sec h2 {
right: 50px;
margin-right: 0;
}
.page-home .sec .ini img {
max-height: 110px;
}
.page-home .sec .link span {
font-size: 16px;
}
.page-home .sec .wide {
padding-top: 40%;
overflow: hidden;
}
.page-home .sec .wide p {
margin: 0 -30%;
}
}
/* visual-sec */
.page-home .visual-sec {
display: none;
position: relative;
}
.page-home .visual-sec .skip {
position: absolute;
right: 50px;
bottom: 40px;
z-index: 10;
}
.page-home .visual-sec .skip a {
color: #fff;
font-size: 20px;
/*font-family: "Barlow Condensed";*/
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
.page-home .visual-sec .scroll {
position: absolute;
left: 50%;
bottom: 40px;
z-index: 10;
width: 100px;
margin-left: -50px;
text-align: center;
font-size: 18px;
/*font-family: "Barlow Condensed";*/
}
.page-home .visual-sec .scroll:after {
content: "";
position: absolute;
left: 50%;
bottom: -80px;
width: 1px;
height: 80px;
background-color: #000;
}
@media (max-width: 767px) {
.page-home .visual-sec {
overflow: visible;
}
.page-home .visual-sec .skip {
right: 27%;
bottom: 5px;
}
.page-home .visual-sec .skip a {
font-size: 16px;
}
.page-home .visual-sec .scroll {
position: relative;
bottom: auto;
padding-top: 8px;
font-size: 14px;
}
.page-home .visual-sec .scroll:after {
bottom: -40px;
height: 40px;
}
}
/* visual-sec2 */
.page-home .visual-sec2 .home-slider .slick-slide {
padding: 0;
text-align: center;
background-color: #000;
}
.page-home .visual-sec2 .home-slider .slick-slide img {
margin-left: auto;
margin-right: auto;
}
.page-home .visual-sec2 .home-slider .slick-slide .image {
width: 100%;
height: 700px;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
.page-home .visual-sec2 .text-wrap {
position: absolute;
left: 0;
right: 0;
top: 0;
width: 100%;
max-width: 980px;
margin: 0 auto;
padding: 0 15px;
}
.page-home .visual-sec2 .text {
margin-bottom: 70px;
padding-top: 164px;
}
.page-home .visual-sec2 .btn span {
display: inline-block;
background-color: #fff;
}
.page-home .visual-sec2 .btn a {
display: inline-block;
width: 130px;
background-color: #fff;
color: #000;
font-size: 20px;
/*font-family: "Barlow Condensed";*/
text-align: center;
}
.page-home .visual-sec2 .scroll {
position: absolute;
left: 50%;
bottom: 40px;
z-index: 10;
width: 100px;
margin-left: -50px;
text-align: center;
font-size: 18px;
/*font-family: "Barlow Condensed";*/
}
.page-home .visual-sec2 .scroll:after {
content: "";
position: absolute;
left: 50%;
bottom: -80px;
width: 1px;
height: 80px;
background-color: #000;
}
@media (max-width: 767px) {
.page-home .visual-sec2 .home-slider .slick-slide .image {
height: 340px;
}
.page-home .visual-sec2 .text-wrap {
text-align: center;
}
.page-home .visual-sec2 .text {
margin-bottom: 40px;
padding-top: 70px;
}
.page-home .visual-sec2 .btn span {
display: inline-block;
background-color: #fff;
}
.page-home .visual-sec2 .btn a {
width: 110px;
font-size: 16px;
}
.page-home .visual-sec2 .scroll {
position: relative;
bottom: auto;
padding-top: 8px;
font-size: 14px;
}
.page-home .visual-sec2 .scroll:after {
bottom: -40px;
height: 40px;
}
}
/* news-sec */
.page-home .news-sec {
padding: 130px 0 30px;
}
.page-home .news-sec .container {
min-height: 385px;
}
.page-home .news-sec h2 {
top: 30px;
}
.page-home .news-sec .news-list {
position: absolute;
right: 0;
top: 85px;
width: 35%;
}
.page-home .news-sec .news-list a {
display: block;
}
.page-home .news-sec .news-list .date {
margin-bottom: 10px;
font-size: 23px;
/*font-family: "Barlow Condensed";*/
}
.page-home .news-sec .news-list .date span {
display: block;
max-width: 200px;
border-bottom: 1px solid #000;
}
.page-home .news-sec .news-list .text {
font-size: 18px;
}
@media (max-width: 767px) {
.page-home .news-sec {
padding: 65px 0 10px;
}
.page-home .news-sec .container {
min-height: 262px;
}
.page-home .news-sec h2 {
top: 60px;
}
.page-home .news-sec .news-list {
top: 144px;
width: 100%;
padding-left: 60px;
}
.page-home .news-sec .news-list .date {
margin-bottom: 5px;
font-size: 12px;
}
.page-home .news-sec .news-list .date span {
max-width: 100px;
}
.page-home .news-sec .news-list .text {
font-size: 12px;
}
}
/* page-news -------- */
.page-news .box {
margin-bottom: 100px;
-webkit-display: flex;
-ms-display: flex;
-webkit-display: flex;
display: flex;
}
.page-news .box .thumb {
width: 400px;
padding-right: 50px;
}
.page-news .box .text-wrap {
width: 560px;
position: relative;
}
.page-news .box .text-wrap .date {
/*font-family: "Barlow Condensed";*/
line-height: 1;
font-size: 20px;
letter-spacing: 0.06em;
margin-bottom: 20px;
}
.page-news .box .text-wrap .title {
line-height: 1.2;
margin-bottom: 20px;
}
.page-news .box .text-wrap .title .label {
/*font-family: "Barlow Condensed";*/
line-height: 1;
font-size: 20px;
letter-spacing: 0.06em;
display: inline-block;
padding-right: 15px;
}
.page-news .box .text-wrap .title h2 {
font-size: 16px;
display: inline-block;
}
.page-news .box .text-wrap .text {
font-size: 14px;
line-height: 1.86;
padding-bottom: 40px;
}
.page-news .box .text-wrap .more {
position: absolute;
left: 0px;
bottom: 0px;
}
.page-news .box .text-wrap .more a {
display: inline-block;
width: 130px;
height: 30px;
line-height: 30px;
color: #ffffff;
/*font-family: "Barlow Condensed";*/
font-size: 20px;
letter-spacing: 0.06em;
text-align: center;
background-color: #000000;
text-decoration: none;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
@media screen and (max-width: 767px) {
.page-news .page-title {
margin-bottom: 40px;
}
.page-news .box {
max-width: 390px;
margin: 0 auto 45px;
-webkit-display: block;
-ms-display: block;
-webkit-display: block;
display: block;
}
.page-news .box .thumb {
width: auto;
padding: 0 20px 20px;
}
.page-news .box .text-wrap {
width: auto;
}
.page-news .box .text-wrap .date {
margin-bottom: 12px;
font-size: 12px;
}
.page-news .box .text-wrap .date .label {
display: inline-block;
margin-left: 10px;
}
.page-news .box .text-wrap .title h2 {
font-size: 13px;
}
.page-news .box .text-wrap .text {
padding-bottom: 20px;
font-size: 11px;
}
.page-news .box .text-wrap .more {
position: relative;
text-align: right;
}
.page-news .box .text-wrap .more a {
font-size: 16px;
}
}
/* about-sec */
.page-home .about-sec {
padding-bottom: 185px;
}
.page-home .about-sec .box1 {
position: relative;
clear: both;
max-width: 1110px;
margin: 0 auto;
padding-top: 40px;
}
.page-home .about-sec .box1 .image {
float: left;
width: 52.25%;
}
.page-home .about-sec .box1 .text1 {
position: absolute;
left: 57.65%;
bottom: 70px;
font-size: 20px;
}
.page-home .about-sec .box1 .link {
position: absolute;
left: 57.65%;
bottom: 0;
}
@media (max-width: 767px) {
.page-home .about-sec {
padding-bottom: 69px;
}
.page-home .about-sec h2 {
top: 60px;
}
.page-home .about-sec .box1 {
padding-top: 56px;
}
.page-home .about-sec .box1 .image {
float: none;
width: auto;
padding-right: 50px;
}
.page-home .about-sec .box1 .box-inner {
padding: 15px 15px 0 20px;
}
.page-home .about-sec .box1 .text1 {
position: relative;
left: auto;
bottom: auto;
margin-bottom: 20px;
font-size: 13px;
}
.page-home .about-sec .box1 .link {
position: relative;
left: auto;
bottom: auto;
text-align: right;
padding-right: 20px;
}
}
/* goodstory-sec */
.page-home .goodstory-sec {
padding-top: 120px;
padding-bottom: 130px;
}
.page-home .goodstory-sec .ini {
top: 160px;
}
.page-home .goodstory-sec h2 {
width: 530px;
}
.page-home .goodstory-sec .topmes {
position: absolute;
left: 19%;
top: 0;
font-size: 20px;
}
.page-home .goodstory-sec .box .box-inner {
position: relative;
}
.page-home .goodstory-sec .box .text1 {
line-height: 1.2;
margin-bottom: 20px;
font-size: 50px;
/*font-family: "Barlow Condensed";*/
}
.page-home .goodstory-sec .box .text2 {
line-height: 1.2;
margin-bottom: 10px;
font-size: 28px;
}
.page-home .goodstory-sec .box .text3 {
max-width: 600px;
font-size: 18px;
}
.page-home .goodstory-sec .box1 {
float: right;
max-width: 787px;
padding: 290px 0 125px;
}
.page-home .goodstory-sec .box1 .image {
margin-bottom: 40px;
}
.page-home .goodstory-sec .box1 .link {
position: absolute;
right: 0;
top: 15px;
}
.page-home .goodstory-sec .box2 {
position: relative;
clear: both;
max-width: 1030px;
margin: 0 auto 145px;
padding: 0 0 0;
}
.page-home .goodstory-sec .box2 .image {
float: left;
width: 59%;
}
.page-home .goodstory-sec .box2 .box-inner {
float: right;
width: 38.5%;
}
.page-home .goodstory-sec .box2 .text1 {
margin-top: -10px;
}
.page-home .goodstory-sec .box2 .link {
position: absolute;
left: 61.5%;
bottom: 0;
}
@media (max-width: 767px) {
.page-home .goodstory-sec {
padding-top: 60px;
padding-bottom: 69px;
}
.page-home .goodstory-sec .ini {
top: 0;
}
.page-home .goodstory-sec h2 {
width: 300px;
}
.page-home .goodstory-sec .topmes {
position: relative;
left: auto;
font-size: 13px;
padding: 140px 0 0 40px;
}
.page-home .goodstory-sec .box .text1 {
margin-bottom: 18px;
font-size: 22px;
}
.page-home .goodstory-sec .box .text2 {
margin-bottom: 9px;
font-size: 18px;
}
.page-home .goodstory-sec .box .text3 {
font-size: 12px;
}
.page-home .goodstory-sec .box1 {
padding: 55px 0 42px;
}
.page-home .goodstory-sec .box1 .image {
margin: 20px -20px 20px 25px;
}
.page-home .goodstory-sec .box1 .link {
position: relative;
top: auto;
right: auto;
margin-top: 15px;
text-align: right;
}
.page-home .goodstory-sec .box2 {
margin-bottom: 59px;
}
.page-home .goodstory-sec .box2 .image {
float: none;
width: auto;
margin: 0 40px 25px 0;
}
.page-home .goodstory-sec .box2 .box-inner {
float: none;
width: auto;
padding: 0 20px;
}
.page-home .goodstory-sec .box2 .text1 {
margin-top: 0;
}
.page-home .goodstory-sec .box2 .link {
position: relative;
left: auto;
bottom: auto;
margin-top: 15px;
padding: 0 20px;
text-align: right;
}
}
/* page-goodstory -------- */
.page-goodstory .sec2 {
padding-top: 15px;
}
.page-goodstory .sec2 .box {
margin-bottom: 10px;
}
.page-goodstory .sec2 .box a {
display: block;
}
.page-goodstory .sec2 .box-inner {
position: relative;
height: 350px;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
.page-goodstory .sec2 .box .info {
position: absolute;
left: 25px;
top: 50%;
transform: translateY(-50%);
font-size: 20px;
color: #fff;
}
.page-goodstory .sec2 .box .info h2 {
line-height: 1.2;
/*font-family: "Barlow Condensed";*/
font-size: 50px;
}
@media screen and (max-width: 767px) {
.page-goodstory .sec2 .box-inner {
height: 150px;
}
.page-goodstory .sec2 .box .info {
left: 15px;
top: 50%;
font-size: 14px;
}
.page-goodstory .sec2 .box .info h2 {
font-size: 36px;
}
}
/* project-sec */
.page-home .project-sec .sec-inner {
padding: 165px 0 155px;
text-align: center;
}
.page-home .project-sec .link {
margin-top: -30px;
margin-left: 16.8%;
text-align: left;
}
@media (max-width: 767px) {
.page-home .project-sec h2 {
top: 64px;
}
.page-home .project-sec .sec-inner {
padding: 134px 0 70px;
}
.page-home .project-sec .image {
margin: 0 -20px;
}
.page-home .project-sec .link {
margin-top: 20px;
margin-left: 0;
text-align: right;
}
}
/* page-project -------- */
.page-project .catnav-sec {
z-index: 9;
}
.page-project .catnav-sec .catnav {
padding-top: 20px;
margin-bottom: 3%;
}
.page-project .catnav-sec .catnav li {
float: left;
width: 19.5%;
margin-right: 0.5%;
margin-bottom: 1%;
}
.page-project .catnav-sec .catnav li:nth-child(6n+1) {
/*clear: both;*/
}
.page-project .catnav-sec .catnav li:nth-child(9n) {
margin-right: 0;
}
.page-project .catnav-sec .catnav a {
display: block;
height: 30px;
line-height: 30px;
color: #ffffff;
/*font-family: "Barlow Condensed";*/
font-size: 20px;
letter-spacing: 0.06em;
text-align: center;
background-color: #b4b4b5;
text-decoration: none;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
.page-project .catnav-sec .catnav .current a {
background-color: #000000;
}
@media screen and (max-width: 1000px) {
.page-project .catnav-sec .catnav {
padding-bottom: 20px;
}
.page-project .catnav-sec .catnav li {
width: 32%;
margin-right: 2%;
margin-bottom: 2%;
}
.page-project .catnav-sec .catnav li:nth-child(3n+1) {
clear: both;
}
.page-project .catnav-sec .catnav li:nth-child(3n) {
margin-right: 0;
}
.page-project .catnav-sec .catnav a {
font-size: 16px;
}
}
@media screen and (max-width: 767px) {
.page-project .catnav-sec .catnav {
padding-bottom: 40px;
}
.page-project .catnav-sec .catnav li {
width: 48.75%;
margin-right: 2.5%;
margin-bottom: 2.5%;
}
.page-project .catnav-sec .catnav li:nth-child(3n+1) {
clear: none;
}
.page-project .catnav-sec .catnav li:nth-child(3n) {
margin-right: 2.5%;
}
.page-project .catnav-sec .catnav li:nth-child(2n+1) {
clear: both;
}
.page-project .catnav-sec .catnav li:nth-child(2n) {
margin-right: 0;
}
}
@media (min-width: 768px) {
.page-project .boxes {
display: flex;
justify-content: space-between;
}
}
.page-project .box {
position: relative;
margin-bottom: 42px;
width: 32%;
}
.page-project .box .wide-images {
margin-bottom: 30px;
}
.page-project .box .wide-images .image1 {
position: relative;
float: left;
width: 44%;
overflow: hidden;
}
.page-project .box .wide-images .image1 span {
position: relative;
display: block;
height: 1px;
padding-top: 80%;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
.page-project .box.is-even .wide-images .image1 {
width: 55%;
}
.page-project .box.is-even .wide-images .image1 span {
padding-top: 64%;
}
.page-project .box .wide-images .image2 {
position: relative;
float: right;
width: 55%;
overflow: hidden;
}
.page-project .box .wide-images .image2 span {
position: relative;
display: block;
height: 1px;
padding-top: 64%;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
.page-project .box.is-even .wide-images .image2 {
width: 44%;
}
.page-project .box.is-even .wide-images .image2 span {
padding-top: 80%;
}
.page-project .box .wide-images span {
transition: all 0.3s;
cursor: pointer;
}
.page-project .box .wide-images span:hover {
z-index: 1;
transform: scale(1.05);
}
.page-project .box-inner {
position: relative;
-webkit-display: flex;
-ms-display: flex;
-webkit-display: flex;
display: flex;
flex-direction: column;
cursor: pointer;
}
.page-project .box-inner .text-wrap.sp {
cursor: pointer;
}
.page-project .box-inner:hover .text-wrap.pc h2 {
color: #fff;
background-color: #b4b4b5;
transition: background-color 0.5s;
transition: color 0.3s;
}
.page-project .box-inner:hover .text-wrap.pc .btn-more {
opacity: 0.6;
transition: opacity 0.3s;
}
.page-project .box .thumb {
order: 1;
}
.page-project .box .text-wrap {
order: 2;
}
.page-project .box.is-odd .thumb {
order: 1;
}
@media all and (-ms-high-contrast: none) {
.page-project .box.is-odd .thumb {
order: 1;
height: 100%;
}
}
.page-project .box.is-odd .text-wrap {
order: 2;
}
.page-project .box.is-even .thumb {
order: 2;
}
.page-project .box.is-even .text-wrap {
order: 1;
}
.page-project .box .text-wrap-inner {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
}
.page-project .box .btn-more {
position: absolute;
left: 60%;
bottom: 5px;
}
.page-project .box .thumb {
width: 100%;
}
.page-project .box.is-even .thumb {
padding-right: 0;
padding-left: 50px;
}
.page-project .box .thumb .project-slider .slick-slide {
padding: 0;
}
.page-project .box .thumb .bg {
background-size: cover;
background-repeat: no-repeat;
background-position: center top;
transition: opacity 0.3s;
}
.page-project .box .thumb .bg img {
width: 100%;
}
.project-slider-modal .slick-slide span {
display: block;
height: 0;
padding-top: 66.64%;
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
.project-slider-modal .slick-slide img {
width: 100%;
}
.project-slider-modal-arrows div.slick-prev,
.project-slider-modal-arrows div.slick-next,
.project-slider-modal-arrows .slick-prev:before,
.project-slider-modal-arrows .slick-next:before {
display: none;
}
.project-slider-modal-arrows .slick-prev {
left: 20px;
transform: translateX(0);
width: 20px;
height: 20px;
}
.project-slider-modal-arrows .slick-prev:after {
content: "＜";
display: inline-block;
font-size: 20px;
color: #fff;
height: 20px;
line-height: 20px;
}
.project-slider-modal-arrows .slick-next {
right: 20px;
transform: translateX(0);
width: 20px;
height: 20px;
}
.project-slider-modal-arrows .slick-next:after {
content: "＞";
display: inline-block;
font-size: 20px;
color: #fff;
height: 20px;
line-height: 20px;
}
.page-project .box .text-wrap {
width: 100%;
position: relative;
}
.page-project .box .text-wrap-inner {
position: relative;
}
.page-project .box .text-wrap .cat {
min-height: 30px;
margin-top: 5px;
}
.page-project .box .text-wrap .cat a {
width: 90px;
height: 22px;
line-height: 22px;
font-size: 14px;
display: inline-block;
margin-right: 5px;
color: #ffffff;
/*font-family: "Barlow Condensed";*/
letter-spacing: 0.06em;
text-align: center;
background-color: #000000;
text-decoration: none;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
transition: opacity 0.3s;
}
.page-project .box .text-wrap .cat a:hover {
opacity: 0.7;
filter: alpha(opacity=70);
-ms-filter: "alpha( opacity=70 )";
}
.page-project .box .text-wrap .title {
line-height: 1.2;
margin-bottom: 20px;
}
.page-project .box .text-wrap .title .label {
/*font-family: "Barlow Condensed";*/
line-height: 1;
font-size: 20px;
letter-spacing: 0.06em;
display: inline-block;
padding-right: 15px;
}
.page-project .box .text-wrap h2 {
display: inline-block;
font-size: 12px;
line-height: 1.5;
}
.page-project .box .text-wrap .label {
margin-bottom: -5px;
/*font-family: "Barlow Condensed";*/
font-size: 10px;
color: #9fa0a0;
}
.page-project .box .text-wrap .more {
position: absolute;
left: 0px;
bottom: 0px;
}
.page-project .box .text-wrap .more a {
display: inline-block;
width: 130px;
height: 30px;
line-height: 30px;
color: #ffffff;
/*font-family: "Barlow Condensed";*/
font-size: 20px;
letter-spacing: 0.06em;
text-align: center;
background-color: #000000;
text-decoration: none;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
.page-project .box .text-wrap .arrow {
position: absolute;
right: 0;
top: 50%;
}
.page-project .box .text-wrap .arrow .slick-prev {
display: none;
}
.page-project .box .text-wrap .arrow .slick-next {
right: auto;
transform: none;
width: auto;
height: auto;
line-height: 1.5;
position: relative;
top: auto;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
width: 59px;
height: 25px;
background: url(../images/project/slider-next.png) no-repeat center center;
background-size: 59px 25px;
}
.page-project .box.is-even .text-wrap .arrow .slick-next {
background-image: url(../images/project/slider-next2.png);
}
.page-project .box .text-wrap .total {
display: none;
position: absolute;
right: 0;
bottom: 0;
width: 82px;
height: 82px;
font-size: 50px;
/*font-family: "Barlow Condensed";*/
line-height: 1;
}
.page-project .box .text-wrap .total .num1 {
position: absolute;
left: 4px;
top: -16px;
}
.page-project .box .text-wrap .total .num2 {
position: absolute;
right: 0;
bottom: -10px;
}
.page-project .box .text-wrap .total:before {
content: "";
display: block;
position: absolute;
left: 0;
bottom: 0;
width: 114px;
height: 2px;
background-color: #000;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform-origin: left top;
-webkit-transform-origin: left top;
}
@media screen and (max-width: 767px) {
.page-project .page-title {
margin-bottom: 40px;
}
.page-project .page-title img {
width: 185px;
}
.page-project .box .text-wrap .cat {
min-height: 30px;
margin-top: -20px;
/*margin-bottom: 5px;*/
}
/* .page-project .sec2{
padding-left: 25px;
padding-right: 25px;
}*/
.page-project .project-slider-sp {
margin-bottom: 30px;
}
.page-project .box {
max-width: 490px;
margin: -55px auto 45px;
padding-top: 55px;
width: 100%;
}
.page-project .box-inner {
-webkit-display: block;
-ms-display: block;
-webkit-display: block;
display: block;
padding: 0;
}
.page-project .box .thumb {
width: auto;
padding: 0 0 20px;
}
.page-project .box.is-even .thumb {
padding: 0 0 20px;
}
.page-project .box .text-wrap {
width: auto;
}
.page-project .box .text-wrap .cat {
/*margin-bottom: 10px;*/
}
.page-project .box .text-wrap .cat a {
width: 90px;
height: 22px;
line-height: 22px;
font-size: 14px;
}
.page-project .box .text-wrap h2 {
font-size: 14px;
}
.page-project .box .text-wrap .label {
font-size: 11px;
}
.page-project .box .text-wrap .more {
position: relative;
text-align: right;
margin-top: -32px;
}
.page-project .box .text-wrap .more a {
font-size: 16px;
}
.page-project .box .text-wrap .arrow {
top: 0;
}
.page-project .box.is-even .text-wrap .arrow .slick-next {
background-image: url(../images/project/slider-next.png);
}
.page-project .box .text-wrap .total {
bottom: auto;
top: 45px;
font-size: 25px;
width: 50px;
height: 50px;
}
.page-project .box .text-wrap .total:before {
width: 64px;
}
.page-project .box .text-wrap .total .num1 {
top: -2px;
}
.page-project .box .text-wrap .total .num2 {
bottom: -5px;
right: 4px;
}
.project-slider-modal .slick-slide {
padding: 0;
}
.project-slider-modal-arrows .slick-prev {
left: 8px;
}
.project-slider-modal-arrows .slick-next {
right: 8px;
}
.project-slider-sp-wrap {
position: relative;
}
.project-slider-sp .slick-slide span {
display: block;
height: 0;
padding-top: 66.64%;
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
.project-slider-sp .slick-slide img {
width: 100%;
}
.project-slider-sp-arrows div.slick-prev,
.project-slider-sp-arrows div.slick-next,
.project-slider-sp-arrows .slick-prev:before,
.project-slider-sp-arrows .slick-next:before {
display: none;
}
.project-slider-sp-arrows .slick-prev {
left: 20px;
transform: translateX(0);
width: 20px;
height: 20px;
}
.project-slider-sp-arrows .slick-prev:after {
content: "＜";
display: inline-block;
font-size: 20px;
line-height: 20px;
height: 20px;
color: #000;
}
.project-slider-sp-arrows .slick-next {
right: 20px;
transform: translateX(0);
width: 20px;
height: 20px;
}
.project-slider-sp-arrows .slick-next:after {
content: "＞";
display: inline-block;
font-size: 20px;
line-height: 20px;
height: 20px;
color: #000;
}
.project-slider-sp .slick-slide {
padding: 0;
}
.project-slider-sp-arrows .slick-prev {
left: -22px;
}
.project-slider-sp-arrows .slick-next {
right: -22px;
}
}
/* page-project-single -------- */
.page-project-single h2 {
font-size: 80px;
text-align: center;
margin: 30px 0 25px;
/*font-family: "Barlow Condensed";*/
}
.page-project-single .box {
margin-bottom: 100px;
-webkit-display: flex;
-ms-display: flex;
-webkit-display: flex;
display: flex;
}
.page-project-single .box.is-odd .thumb {
order: 1;
}
.page-project-single .box.is-odd .text-wrap {
order: 2;
}
.page-project-single .box.is-even .thumb {
order: 2;
}
.page-project-single .box.is-even .text-wrap {
order: 1;
}
.page-project-single .box .thumb {
width: 530px;
padding-right: 50px;
}
.page-project-single .box.is-even .thumb {
padding-right: 0;
padding-left: 50px;
}
.page-project-single .box .thumb .project-slider .slick-slide {
padding: 0;
}
.page-project-single .box .thumb .bg {
background-repeat: no-repeat;
background-position: center center;
}
.page-project-single .box .thumb .bg img {
width: 100%;
}
.page-project-single .box .text-wrap {
width: 430px;
position: relative;
}
.page-project-single .box .text-wrap .cat {
min-height: 30px;
margin-bottom: 25px;
}
.page-project-single .box .text-wrap .cat a {
display: inline-block;
width: 130px;
height: 30px;
margin-right: 5px;
line-height: 30px;
color: #ffffff;
/*font-family: "Barlow Condensed";*/
font-size: 20px;
letter-spacing: 0.06em;
text-align: center;
background-color: #000000;
text-decoration: none;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
transition: opacity 0.3s;
}
.page-project-single .box .text-wrap .cat a:hover {
opacity: 0.7;
filter: alpha(opacity=70);
-ms-filter: "alpha( opacity=70 )";
}
.page-project-single .box .text-wrap .title {
line-height: 1.2;
margin-bottom: 20px;
}
.page-project-single .box .text-wrap .title .label {
/*font-family: "Barlow Condensed";*/
line-height: 1;
font-size: 20px;
letter-spacing: 0.06em;
display: inline-block;
padding-right: 15px;
}
.page-project-single .box .text-wrap .copy {
margin-top: -8px;
margin-bottom: 50px;
font-size: 18px;
}
.page-project-single .box .text-wrap h3 {
font-size: 18px;
}
.page-project-single .box .text-wrap .label {
margin-top: 10px;
margin-bottom: -5px;
/*font-family: "Barlow Condensed";*/
font-size: 16px;
color: #9fa0a0;
}
.page-project-single .box .text-wrap .more {
position: absolute;
left: 0px;
bottom: 0px;
}
.page-project-single .box .text-wrap .more a {
display: inline-block;
width: 130px;
height: 30px;
line-height: 30px;
color: #ffffff;
/*font-family: "Barlow Condensed";*/
font-size: 20px;
letter-spacing: 0.06em;
text-align: center;
background-color: #000000;
text-decoration: none;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
.page-project-single .box .text-wrap .arrow {
position: absolute;
right: 0;
top: 50%;
}
.page-project-single .box .text-wrap .arrow .slick-prev {
display: none;
}
.page-project-single .box .text-wrap .arrow .slick-next {
right: auto;
transform: none;
width: auto;
height: auto;
line-height: 1.5;
position: relative;
top: auto;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
width: 59px;
height: 25px;
background: url(../images/project/slider-next.png) no-repeat center center;
background-size: 59px 25px;
}
.page-project-single .box.is-even .text-wrap .arrow .slick-next {
background-image: url(../images/project/slider-next2.png);
}
.page-project-single .box .text-wrap .total {
position: absolute;
right: 0;
bottom: 0;
width: 82px;
height: 82px;
font-size: 50px;
/*font-family: "Barlow Condensed";*/
line-height: 1;
}
.page-project-single .box .text-wrap .total .num1 {
position: absolute;
left: 4px;
top: -16px;
}
.page-project-single .box .text-wrap .total .num2 {
position: absolute;
right: 0;
bottom: -10px;
}
.page-project-single .box .text-wrap .total:before {
content: "";
display: block;
position: absolute;
left: 0;
bottom: 0;
width: 114px;
height: 2px;
background-color: #000;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform-origin: left top;
-webkit-transform-origin: left top;
}
.page-project-single .story-con p {
line-height: 1.9;
margin-bottom: 45px;
}
.page-project-single .story-con .image p {
margin: 90px 0;
}
.page-project-single .story-con .text-image-cols .col1 {
float: left;
width: 45%;
}
.page-project-single .story-con .text-image-cols .col2 {
float: right;
width: 50%;
}
.page-project-single .story-con .image-text-cols .col1 {
float: left;
width: 50%;
}
.page-project-single .story-con .image-text-cols .col2 {
float: right;
width: 45%;
}
.page-project-single .story-con .text-simage-cols .col1 {
float: left;
width: 58.5%;
}
.page-project-single .story-con .text-simage-cols .col2 {
float: right;
width: 36.5%;
}
.page-project-single .story-con .simage-text-cols .col1 {
float: left;
width: 36.5%;
}
.page-project-single .story-con .simage-text-cols .col2 {
float: right;
width: 58.5%;
}
.page-project-single .story-con .image-image-cols .col1 {
float: left;
width: 48%;
}
.page-project-single .story-con .image-image-cols .col2 {
float: right;
width: 48%;
}
.page-project-single .story-con .image-ltext-cols {
position: relative;
}
.page-project-single .story-con .image-ltext-cols .col1 {
width: 58.5%;
}
.page-project-single .story-con .image-ltext-cols .col1 p {
margin: 70px 0;
}
.page-project-single .story-con .image-ltext-cols .col2 {
position: absolute;
left: 63%;
right: 0;
top: 0;
bottom: 0;
}
.page-project-single .story-con .image-ltext-cols .col2 p {
position: absolute;
left: 0;
top: 50%;
font-size: 23px;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
.page-project-single .story-con .ltext p {
margin: 55px 0;
font-size: 23px;
text-align: center;
}
.page-project-single .next-sec {
display: none;
}
.page-project-single .next-sec .box {
position: relative;
border: 2px solid #040000;
}
.page-project-single .next-sec .bg-cover {
padding-top: 45%;
}
.page-project-single .next-sec .thumb {
width: 440px;
padding-right: 40px;
}
.page-project-single .next-sec .text-wrap1 {
width: 170px;
padding-right: 20px;
padding-top: 30px;
}
.page-project-single .next-sec .text-wrap2 {
width: 350px;
padding-top: 15px;
}
.page-project-single .next-sec .link {
position: absolute;
right: 25px;
bottom: 25px;
font-size: 20px;
/*font-family: "Barlow Condensed";*/
}
@media screen and (max-width: 767px) {
.page-project-single h2 {
margin: -10px 0 10px;
font-size: 27px;
}
.page-project-single .page-title {
margin-bottom: 40px;
}
.page-project-single .sec1 .copy {
max-width: 390px;
margin: 0 auto 30px;
font-size: 12px;
}
.page-project-single .sec2 {
padding-left: 25px;
padding-right: 25px;
}
.page-project-single .story-con .image {
overflow: hidden;
margin: 70px -20px 45px;
}
.page-project-single .story-con .image p {
margin: 0 -30% 0;
}
.page-project-single .story-con .text-image-cols .col1 {
float: none;
width: auto;
}
.page-project-single .story-con .text-image-cols .col2 {
float: none;
width: auto;
}
.page-project-single .story-con .text-image-cols .col2 p {
margin-bottom: 20px;
padding: 0 20px;
text-align: center;
}
.page-project-single .story-con .image-text-cols .col1 {
float: none;
width: auto;
}
.page-project-single .story-con .image-text-cols .col1 p {
margin-bottom: 20px;
padding: 0 20px;
text-align: center;
}
.page-project-single .story-con .image-text-cols .col2 {
float: none;
width: auto;
}
.page-project-single .story-con .text-simage-cols .col1 {
float: none;
width: auto;
}
.page-project-single .story-con .text-simage-cols .col2 {
float: none;
width: auto;
}
.page-project-single .story-con .text-simage-cols .col2 p {
margin-bottom: 20px;
margin-left: -20px;
padding-right: 125px;
}
.page-project-single .story-con .simage-text-cols .col1 {
float: none;
width: auto;
}
.page-project-single .story-con .simage-text-cols .col1 p {
margin-bottom: 20px;
margin-right: -20px;
padding-left: 125px;
text-align: right;
}
.page-project-single .story-con .simage-text-cols .col2 {
float: none;
width: auto;
}
.page-project-single .story-con .image-image-cols .col1 {
float: none;
width: auto;
}
.page-project-single .story-con .image-image-cols .col1 p {
margin-bottom: 20px;
margin-left: -20px;
padding-right: 70px;
}
.page-project-single .story-con .image-image-cols .col2 {
float: none;
width: auto;
}
.page-project-single .story-con .image-image-cols .col2 p {
margin-right: -20px;
padding-left: 70px;
text-align: right;
}
.page-project-single .story-con .image-ltext-cols {
position: relative;
}
.page-project-single .story-con .image-ltext-cols .col1 {
width: auto;
}
.page-project-single .story-con .image-ltext-cols .col1 p {
margin: 20px 0;
}
.page-project-single .story-con .image-ltext-cols .col2 {
position: relative;
left: auto;
right: auto;
top: auto;
bottom: auto;
}
.page-project-single .story-con .image-ltext-cols .col2 p {
position: relative;
left: auto;
top: auto;
margin-bottom: 20px;
font-size: 13px;
transform: translateY(0);
-webkit-transform: translateY(0);
}
.page-project-single .story-con .ltext p {
margin: 45px 0;
font-size: 13px;
}
.page-project-single .box {
max-width: 390px;
margin: 0 auto 45px;
-webkit-display: block;
-ms-display: block;
-webkit-display: block;
display: block;
}
.page-project-single .box .thumb {
width: auto;
padding: 0 10px 20px;
}
.page-project-single .box.is-even .thumb {
padding: 0 0 20px;
}
.page-project-single .box .text-wrap {
width: auto;
}
.page-project-single .box .text-wrap .cat {
margin-bottom: 10px;
}
.page-project-single .box .text-wrap .cat a {
width: 90px;
height: 22px;
line-height: 22px;
font-size: 14px;
}
.page-project-single .box .text-wrap h3 {
font-size: 14px;
}
.page-project-single .box .text-wrap .label {
font-size: 11px;
}
.page-project-single .box .text-wrap .more {
position: relative;
text-align: right;
margin-top: -32px;
}
.page-project-single .box .text-wrap .more a {
font-size: 16px;
}
.page-project-single .box .text-wrap .arrow {
top: 0;
}
.page-project-single .box.is-even .text-wrap .arrow .slick-next {
background-image: url(../images/project/slider-next.png);
}
.page-project-single .box .text-wrap .total {
bottom: auto;
top: 45px;
font-size: 25px;
width: 50px;
height: 50px;
}
.page-project-single .box .text-wrap .total:before {
width: 64px;
}
.page-project-single .box .text-wrap .total .num1 {
top: -2px;
}
.page-project-single .box .text-wrap .total .num2 {
bottom: -5px;
right: 4px;
}
.page-project-single .box .text-wrap .add-col .col1 {
float: left;
width: 49%;
}
.page-project-single .box .text-wrap .add-col .col2 {
float: right;
width: 49%;
}
.page-project-single .next-sec .box .thumb {
padding: 0;
}
.page-project-single .next-sec .box .text-wrap .cat {
min-height: 0;
}
.page-project-single .next-sec .box .text-wrap1 {
padding: 10px 10px 10px 15px;
}
.page-project-single .next-sec .box .text-wrap2 {
padding: 0;
}
.page-project-single .next-sec .box .text-wrap2 p {
display: none;
}
.page-project-single .next-sec .box .text-wrap2 .link {
display: block;
font-size: 18px;
right: 15px;
bottom: 5px;
}
}
/* page-goodstory -------- */
.page-goodstory .sec2 {
padding-top: 15px;
}
.page-goodstory .sec2 .box {
margin-bottom: 10px;
}
.page-goodstory .sec2 .box a {
display: block;
}
.page-goodstory .sec2 .box-inner {
position: relative;
height: 350px;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
.page-goodstory .sec2 .box .info {
position: absolute;
left: 25px;
top: 50%;
transform: translateY(-50%);
font-size: 20px;
color: #fff;
}
.page-goodstory .sec2 .box .info h2 {
line-height: 1.2;
/*font-family: "Barlow Condensed";*/
font-size: 50px;
}
@media screen and (max-width: 767px) {
.page-goodstory .sec2 .box-inner {
height: 150px;
}
.page-goodstory .sec2 .box .info {
left: 15px;
top: 50%;
font-size: 14px;
}
.page-goodstory .sec2 .box .info h2 {
font-size: 36px;
}
}
/* member-sec */
.page-home .member-sec .sec-inner {
padding: 240px 0 120px;
text-align: center;
}
.page-home .member-sec .image-wrap {
position: relative;
max-width: 601px;
margin: 0 auto;
}
.page-home .member-sec .image {
position: relative;
height: 0;
padding-top: 93.34%;
}
.page-home .member-sec .image img {
display: block;
position: absolute;
left: 0;
top: 0;
z-index: 0;
width: 100%;
opacity: 0;
transition: opacity 1.5s 0s linear;
-webkit-transition: opacity 1.5s 0s linear;
}
.page-home .member-sec .image img.is-current {
opacity: 1;
}
/*
.page-home .member-sec .image img {
display: block;
position: absolute;
left: 0;
top: 0;
z-index: 1;
width: 100%;
}
.page-home .member-sec .image img:nth-child(1) {
animation: home-member1 15s 0s infinite normal linear;
-webkit-animation: home-member1 15s 0s infinite normal linear;
}
@keyframes home-member1 {
0% {opacity: 1; z-index: 1;}
84% {opacity: 1; z-index: 1;}
85% {opacity: 0; z-index: 1;}
86.66% {opacity: 0; z-index: 2;}
100% {opacity: 1; z-index: 2;}
}
@-webkit-keyframes home-member1 {
0% {opacity: 1; z-index: 1;}
84% {opacity: 1; z-index: 1;}
85% {opacity: 0; z-index: 1;}
86.66% {opacity: 0; z-index: 2;}
100% {opacity: 1; z-index: 2;}
}
.page-home .member-sec .image img:nth-child(2) {
opacity: 0;
animation: home-member2 15s 0s infinite normal linear;
-webkit-animation: home-member2 15s 0s infinite normal linear;
}
@keyframes home-member2 {
0% {opacity: 0;}
20% {opacity: 0;}
33.33% {opacity: 1;}
100% {opacity: 1;}
}
@-webkit-keyframes home-member2 {
0% {opacity: 0;}
20% {opacity: 0;}
33.33% {opacity: 1;}
100% {opacity: 1;}
}
.page-home .member-sec .image img:nth-child(3) {
opacity: 0;
animation: home-member3 15s 0s infinite normal linear;
-webkit-animation: home-member3 15s 0s infinite normal linear;
}
@keyframes home-member3 {
0% {opacity: 0;}
53.33% {opacity: 0;}
66.66% {opacity: 1;}
100% {opacity: 1;}
}
@-webkit-keyframes home-member3 {
0% {opacity: 0;}
20% {opacity: 0;}
33.33% {opacity: 1;}
100% {opacity: 1;}
}
*/
.page-home .member-sec .next {
position: absolute;
right: -2px;
bottom: -8px;
z-index: 3;
}
@media (max-width: 767px) {
.page-home .member-sec h2 {
top: 64px;
}
.page-home .member-sec .sec-inner {
padding: 140px 0 87px;
}
.page-home .member-sec .image {
margin: 0 -10px;
}
.page-home .member-sec .next {
right: -10px;
bottom: -25px;
}
}
/* bnr-sec */
.page-home .bnr-sec .bnr {
position: relative;
width: 49%;
height: 0;
padding-top: 16.66%;
}
.page-home .bnr-sec .bnr1 {
float: left;
}
.page-home .bnr-sec .bnr2 {
float: right;
}
.page-home .bnr-sec .bnr a {
display: block;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background-size: cover;
color: #fff;
font-size: 40px;
/*font-family: "Barlow Condensed";*/
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
.page-home .bnr-sec .bnr1 a {
background-image: url(../images/home/bnr-bg1.jpg);
}
.page-home .bnr-sec .bnr2 a {
background-image: url(../images/home/bnr-bg2.jpg);
}
.page-home .bnr-sec .bnr a span {
display: block;
width: 50%;
height: 100%;
left: 0;
top: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.6);
}
.page-home .bnr-sec .bnr a span b {
display: block;
position: absolute;
left: 6%;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
.text-sec {
max-width: 960px;
margin-top: 50px;
margin-left: auto;
margin-right: auto;
}
.text-sec p {
font-size: 20px;
}
@media (max-width: 767px) {
.page-home .bnr-sec .bnr {
width: 100%;
margin-bottom: 20px;
padding-top: 34%;
}
.page-home .bnr-sec .bnr a {
font-size: 18px;
}
.text-sec {
max-width: 90%;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
}
.text-sec p {
font-size: 13px;
}
}
/* page-privacy -------- */
.page-privacy h2 {
font-size: 18px;
font-weight: normal;
line-height: 1.8;
border-bottom: 1px solid #000000;
margin: 40px 0px 20px;
}
.page-privacy p {
font-size: 15px;
line-height: 1.6;
}
.page-privacy ul {
list-style-type: disc;
padding-left: 1.5em;
}
.page-privacy ul li {
font-size: 15px;
line-height: 1.6;
}
@media (max-width: 767px) {
.page-privacy .page-title {
margin-top: 30px;
font-size: 27px;
}
.page-privacy h2 {
font-size: 12px;
margin: 40px 0px 10px;
}
.page-privacy p {
font-size: 11px;
}
.page-privacy ul li {
font-size: 11px;
}
}
/* page-about -------- */
.page-about .sec {
margin-bottom: 100px;
}
.page-about .sec .subtitle {
/*font-family: "Barlow Condensed";*/
font-size: 50px;
line-height: 1;
margin-bottom: 50px;
text-align: center;
letter-spacing: 0.02em;
}
.page-about .visual-slider {
background: url(../images/about/visual-bg.jpg);
background-size: cover;
}
.underline {
position: relative;
padding-bottom: 20px;
}
.underline:after {
content: "";
display: inline-block;
width: 100px;
height: 3px;
background-color: #000000;
position: absolute;
left: 50%;
bottom: 0px;
transform: translateX(-50%);
}
.page-about .text {
font-size: 19px;
line-height: 2;
text-align: left;
}
.page-about .catch {
/*font-family: "Barlow Condensed";*/
font-size: 60px;
line-height: 1;
text-align: center;
margin-bottom: 10px;
}
.page-about .catch-text {
font-size: 28px;
font-weight: bold;
line-height: 2;
text-align: center;
margin-bottom: 50px;
}
.page-about .block01 {
overflow: hidden;
}
.page-about .block01 .thumb {
float: left;
width: 31.45%;
}
.page-about .block01 .thumb-cap {
margin-top: 10px;
line-height: 1.5;
}
.page-about .block01 .sign {
display: block;
text-align: right;
margin-top: 20px;
}
.page-about .block01 .text-wrap {
float: right;
width: 63.33%;
}
.page-about .block01 .text-wrap .text {
text-align: left;
margin-bottom: 1em;
}
.page-about .block01 .text-wrap .text:last-child {
margin-bottom: 0px;
}
.page-about .block02 {
overflow: hidden;
margin-top: 60px;
}
.page-about .block02 .img {
margin-bottom: 30px;
}
.page-about .block02 .left {
width: 33.33%;
float: left;
padding: 0 2%;
}
.page-about .block02 .left2 {
width: 33.33%;
float: left;
padding: 0 2%;
}
.page-about .block02 .right {
width: 33.33%;
float: left;
padding: 0 2%;
}
.page-about .block02 .tex02 {
font-size: 15px;
line-height: 1.87;
}
.page-about table {
width: 100%;
}
.page-about table th {
width: 280px;
background-color: #efefef;
text-align: left;
font-size: 18px;
font-weight: bold;
line-height: 1.67;
padding: 20px 0px 10px;
border-bottom: 1px solid #040000;
}
.page-about table td {
text-align: left;
font-size: 18px;
line-height: 1.67;
padding: 20px 0px 10px 40px;
border-bottom: 1px solid #040000;
}
.page-about table a {
text-decoration: underline;
}
.page-about table a:hover {
text-decoration: none;
}
.page-about .map {
text-align: center;
}
.page-about #gmap {
width: 100%;
height: 365px;
}
.page-about .sec1 {
margin-bottom: 70px;
}
.page-about .sec6 {
margin-bottom: 150px;
}
.page-about .sec7 .subtitle {
margin-bottom: 50px;
}
.page-about .sec8 {
margin-bottom: -30px;
}
@media (max-width: 767px) {
.page-about .visual-slider {
background: url(../images/about/sp-visual-bg.jpg);
background-size: cover;
}
.page-about .sec {
margin-bottom: 40px;
}
.page-about .sec .page-title {
margin-top: 20px;
}
.page-about .sec .subtitle {
margin-bottom: 15px;
font-size: 27px;
}
.underline {
padding-bottom: 15px;
}
.underline:after {
width: 50px;
height: 2px;
}
.page-about .catch {
font-size: 30px;
}
.page-about .catch-text {
margin-bottom: 10px;
font-size: 13.5px;
}
.page-about .text {
font-size: 12px;
text-align: left;
}
.page-about .sec1 {
margin-bottom: 40px;
}
.page-about .block01 .thumb {
float: none;
width: 75%;
max-width: 350px;
margin: 0 auto 20px;
}
.page-about .block01 .sign {
margin-top: 10px;
}
.page-about .block01 .sign img {
max-width: 120px;
}
.page-about .block01 .text-wrap {
float: none;
width: auto;
margin-bottom: 25px;
}
.page-about .block02 {
margin-top: 40px;
}
.page-about .block02 .img {
margin-bottom: 15px;
text-align: center;
}
.page-about .block02 .left {
float: none;
width: auto;
margin-bottom: 30px;
}
.page-about .block02 .left2 {
float: none;
width: auto;
margin-bottom: 30px;
}
.page-about .block02 .right {
float: none;
width: auto;
}
.page-about .block02 .tex02 {
font-size: 12px;
}
.page-about table th {
width: 77px;
font-size: 10px;
padding: 10px 0px 10px;
}
.page-about table td {
font-size: 10px;
padding: 10px 0px 10px 15px;
}
}
/* page-recruit -------- */
.page-recruit .sec {
margin-bottom: 100px;
}
.page-recruit .sec .subtitle {
/*font-family: "Barlow Condensed";*/
font-size: 80px;
line-height: 1;
margin-bottom: 25px;
text-align: center;
}
.page-recruit .text {
font-size: 20px;
line-height: 2;
text-align: center;
}
.page-recruit .page-title {
margin-bottom: 50px;
}
.page-recruit .catch {
/*font-family: "Barlow Condensed";*/
font-size: 115px;
line-height: 1;
text-align: center;
margin-bottom: 10px;
}
.page-recruit .catch-text {
font-size: 28px;
font-weight: bold;
line-height: 2;
text-align: center;
margin-bottom: 30px;
}
@media (max-width: 767px) {
.page-recruit .sec {
margin-bottom: 40px;
}
.page-recruit .sec .page-title {
margin-top: 20px;
}
.page-recruit .sec .subtitle {
margin-bottom: 15px;
font-size: 27px;
}
.page-recruit .text {
font-size: 12px;
}
.page-recruit .catch {
margin-top: 20px;
font-size: 34px;
}
.page-recruit .catch-text {
margin: 30px 0 20px;
font-size: 16px;
}
}
.page-recruit .intervie {
margin-top: 60px;
}
.page-recruit .intervie li {
float: left;
width: 31.25%;
margin-right: 3.12%;
margin-bottom: 5%;
}
.page-recruit .intervie li:nth-child(3n) {
margin-right: 0;
}
.page-recruit .intervie li a {
display: block;
}
.page-recruit .intervie li .inner {
position: relative;
min-height: 110px;
line-height: 1.2;
padding-top: 5px;
text-align: right;
}
.page-recruit .intervie li .num {
position: absolute;
left: 0;
top: 9px;
line-height: 1;
/*font-family: "Barlow Condensed";*/
}
.page-recruit .intervie li .text1 {
margin-bottom: 8px;
font-size: 20px;
/*font-family: "Barlow Condensed";*/
}
.page-recruit .intervie li .text1 small {
display: block;
font-size: 15px;
}
.page-recruit .intervie li .text2 {
margin-bottom: 5px;
}
.page-recruit .intervie li .text1.ls-s {
letter-spacing: -1px;
}
@media (max-width: 767px) {
.page-recruit .intervie {
max-width: 350px;
margin: 20px auto 0;
padding: 0 25px;
}
.page-recruit .intervie li {
float: none;
width: auto;
margin-right: 0;
margin-bottom: 20%;
}
.page-recruit .intervie li .inner {
min-height: 0;
}
.page-recruit .intervie li .num img {
width: 50px;
}
.page-recruit .intervie li .text1 {
margin-bottom: 3px;
font-size: 18px;
}
.page-recruit .intervie li .text1 small {
font-size: 13px;
}
.page-recruit .intervie li .text2 {
margin-bottom: 5px;
}
}
.body-recruit .remodal {
background-color: #000;
color: #fff;
text-align: left;
}
.body-recruit .remodal .col1 {
position: relative;
width: 40.69%;
float: left;
padding: 56px 0 76px;
}
.body-recruit .remodal .col2 {
width: 53.48%;
float: right;
padding: 56px 0 76px;
}
.body-recruit .remodal .num {
position: absolute;
left: 0;
top: 9px;
line-height: 1;
/*font-family: "Barlow Condensed";*/
}
.body-recruit .remodal .text1 {
position: absolute;
right: 0;
top: 0;
font-size: 22px;
/*font-family: "Barlow Condensed";*/
}
.body-recruit .remodal .text1 small {
display: block;
font-size: 15px;
}
.body-recruit .remodal .names {
position: absolute;
left: 0;
bottom: 0;
}
.body-recruit .remodal .text2 {
font-size: 18px;
}
.body-recruit .remodal .text3 {
font-size: 22px;
}
.body-recruit .remodal .text {
font-size: 18px;
line-height: 1.8;
}
@media (max-width: 767px) {
.body-recruit .remodal .cols {
max-width: 350px;
margin: 0 auto;
}
.body-recruit .remodal .col1 {
width: auto;
float: none;
padding: 36px 0 56px;
}
.body-recruit .remodal .col2 {
width: auto;
float: none;
padding: 20px 0 0;
}
.body-recruit .remodal .num {
position: absolute;
left: 0;
top: 9px;
line-height: 1;
/*font-family: "Barlow Condensed";*/
}
.body-recruit .remodal .num img {
width: 50px;
}
.body-recruit .remodal .text1 {
position: absolute;
right: 0;
top: 0;
font-size: 18px;
/*font-family: "Barlow Condensed";*/
}
.body-recruit .remodal .text1 small {
display: block;
font-size: 11px;
}
.body-recruit .remodal .names {
position: absolute;
left: 0;
bottom: 0;
}
.body-recruit .remodal .text2 {
font-size: 12px;
}
.body-recruit .remodal .text3 {
font-size: 13px;
}
.body-recruit .remodal .text {
font-size: 12px;
line-height: 1.8;
}
}
.page-recruit .about {
margin-top: 60px;
}
.page-recruit .about .box {
display: table;
width: 100%;
margin-bottom: 80px;
}
.page-recruit .about .box .thumb {
display: table-cell;
width: 50%;
vertical-align: middle;
}
.page-recruit .about .box .text-wrap {
display: table-cell;
width: 50%;
vertical-align: middle;
}
.page-recruit .about .box .text-wrap.right {
padding-left: 90px;
}
.page-recruit .about .box .text-wrap.left {
padding-right: 90px;
}
.page-recruit .about .box .text-wrap .title {
font-size: 20px;
line-height: 2;
margin-bottom: 20px;
}
.page-recruit .about .box .text-wrap .text01 {
font-size: 15px;
line-height: 1.87;
}
@media (max-width: 767px) {
.page-recruit .about {
margin-top: 25px;
}
.page-recruit .about .box {
max-width: 480px;
margin: 0 auto 30px;
}
.page-recruit .about .box .thumb {
display: block;
width: auto;
}
.page-recruit .about .box .text-wrap {
display: block;
width: auto;
padding: 20px 0 0 20px;
}
.page-recruit .about .box .text-wrap.right {
padding-left: 20px;
}
.page-recruit .about .box .text-wrap.left {
padding-right: 0;
}
.page-recruit .about .box .text-wrap .title {
font-size: 13px;
line-height: 2;
margin-bottom: 10px;
}
.page-recruit .about .box .text-wrap .text01 {
font-size: 11px;
line-height: 1.87;
}
}
.page-recruit .sec4 .subtitle-text1 {
font-size: 20px;
line-height: 2;
margin-bottom: 20px;
text-align: center;
}
.page-recruit .sec4 .subtitle-text2 {
margin-bottom: 50px;
font-size: 15px;
line-height: 1.87;
text-align: center;
}
@media (max-width: 767px) {
.page-recruit .sec4 .subtitle-text1 {
font-size: 13px;
margin-bottom: 10px;
}
.page-recruit .sec4 .subtitle-text2 {
font-size: 11px;
}
}
.page-recruit .entry {
margin-top: 80px;
}
.page-recruit .entry .block {
margin-bottom: 100px;
}
.page-recruit .entry .block:last-child {
margin-bottom: 0px;
}
.page-recruit .entry .title {
margin-bottom: 20px;
text-align: center;
font-size: 30px;
font-weight: bold;
letter-spacing: 0.21em;
}
.page-recruit .entry a.ac-menu {
display: block;
text-decoration: none;
position: relative;
}
.page-recruit .entry a.ac-menu:after {
content: "";
display: block;
background: url(../images/recruit/icon_plus.png) left top no-repeat;
width: 14px;
height: 14px;
position: absolute;
right: 0px;
top: 50%;
transform: translateY(-50%);
}
.page-recruit .entry a.ac-menu.active:after {
background-image: url(../images/recruit/icon_minus.png);
}
.page-recruit .entry .ac-content {
background-color: #000000;
color: #ffffff;
padding: 0px 30px 30px;
font-size: 18px;
letter-spacing: 0.11em;
display: none;
}
/*.page-recruit .entry .ac-content.open{
display: block;
}*/
.page-recruit .entry .label {
padding: 15px 0px;
border-bottom: 1px solid #000000;
font-size: 18px;
letter-spacing: 0.11em;
}
.page-recruit .entry .label .en {
/*font-family: "Barlow Condensed";*/
line-height: 1;
font-size: 25px;
letter-spacing: 0.06em;
padding-right: 10px;
}
.page-recruit .entry .label .en .small {
font-size: 75%;
}
.page-recruit .entry .label .ja {
font-size: 15px;
}
.page-recruit .entry table.job {
width: 100%;
}
.page-recruit .entry table.job th {
width: 220px;
padding: 15px 0px;
border-bottom: 1px solid #ffffff;
vertical-align: top;
}
.page-recruit .entry table.job td {
padding: 15px 0px;
border-bottom: 1px solid #ffffff;
vertical-align: top;
}
.page-recruit .entry .btn-wrap {
text-align: center;
margin-top: 30px;
}
.page-recruit .entry .btn-wrap a.btn {
display: inline-block;
width: 300px;
height: 40px;
line-height: 40px;
text-align: center;
background-color: #ffffff;
text-decoration: none;
}
.page-recruit .entry table.faq {
width: 100%;
}
.page-recruit .entry table.faq tr.a th,
.page-recruit .entry table.faq tr.a td {
border-bottom: 1px solid #ffffff;
}
.page-recruit .entry table.faq th {
width: 220px;
padding-top: 20px;
vertical-align: top;
}
.page-recruit .entry table.faq td {
padding-top: 20px;
vertical-align: top;
}
@media (max-width: 767px) {
.page-recruit .entry {
margin-top: 40px;
}
.page-recruit .entry .block {
margin-bottom: 40px;
}
.page-recruit .entry .title {
margin-bottom: 0;
font-size: 16px;
}
.page-recruit .entry .label {
padding: 15px 0px 5px;
font-size: 11px;
}
.page-recruit .entry .label .en {
display: block;
font-size: 18px;
}
.page-recruit .entry .label .ja {
display: block;
font-size: 11px;
}
.page-recruit .entry a.ac-menu:after {
top: auto;
bottom: 2px;
}
.page-recruit .entry .ac-content {
padding: 0 10px 30px;
font-size: 10px;
}
.page-recruit .entry table.job th {
width: 70px;
padding: 10px 0;
}
.page-recruit .entry table.job td {
padding: 10px 0;
}
.page-recruit .entry .btn-wrap a.btn {
width: 220px;
font-size: 14px;
line-height: 30px;
height: 30px;
}
.page-recruit .entry table.faq th {
width: 70px;
padding: 10px 0;
}
.page-recruit .entry table.faq td {
padding: 10px 0;
}
}
table.apply {
width: 100%;
}
table.apply th {
width: 250px;
border-bottom: 1px solid #000000;
padding: 15px 0px;
font-size: 18px;
line-height: 1.67;
letter-spacing: 0.11em;
text-align: left;
vertical-align: top;
}
table.apply td {
border-bottom: 1px solid #000000;
padding: 15px 0px;
font-size: 18px;
line-height: 1.67;
letter-spacing: 0.11em;
vertical-align: top;
}
@media (max-width: 767px) {
table.apply th {
font-size: 10px;
width: 70px;
padding: 10px 0;
}
table.apply td {
font-size: 10px;
padding: 10px 0;
}
}
.slick-slide {
padding-left: 25px;
padding-right: 25px;
}
@media (max-width: 767px) {
.slick-slide {
padding-left: 0;
padding-right: 0;
}
}
.slick-slide a {
display: block;
}
.slick-prev {
left: 50%;
transform: translateX(-385px);
}
.slick-next {
right: 50%;
transform: translateX(385px);
}
.page-recruit .work {
position: relative;
margin-top: 50px;
}
.page-recruit .work .slick-prev:before,
.slick-next:before {
content: none;
}
.slick-dots {
display: inline-block;
top: -30px;
right: 50%;
width: auto;
height: 30px;
transform: translateX(350px);
}
.slick-dots li {
margin: 0px;
}
@media (max-width: 767px) {
.slick-dotted.slick-slider {
margin-bottom: 70px;
}
.slick-prev {
width: 12px;
left: 12px;
transform: translateX(-50%);
}
.slick-next {
width: 12px;
right: 12px;
transform: translateX(50%);
}
.slick-dots {
display: inline-block;
top: -30px;
right: 20px;
width: auto;
height: 30px;
transform: translateX(0);
}
}
/* page-contact -------- */
.page-contact .container {
max-width: 700px;
}
.page-contact .sec3.container {
max-width: 990px;
}
.page-contact .sec {
position: relative;
z-index: 2;
margin-bottom: 100px;
}
.page-contact .sec3 {
z-index: 1;
}
.page-contact .sec p {
margin-bottom: 1em;
}
.page-contact .sec a {
color: #007aaa;
}
.page-contact .sec a:hover {
text-decoration: underline;
}
.page-contact .sec .subtitle {
/*font-family: "Barlow Condensed";*/
font-size: 80px;
line-height: 1;
margin-bottom: 25px;
text-align: center;
letter-spacing: 0.02em;
}
.page-contact .wpcf7-form {
margin-top: -140px;
padding-top: 140px;
}
.page-contact .wpcf7-form table {
width: 100%;
}
.page-contact .wpcf7-form table th {
width: 280px;
background-color: #efefef;
text-align: left;
font-size: 18px;
font-weight: bold;
line-height: 1.67;
padding: 20px 0px 10px;
border-bottom: 1px solid #040000;
}
.page-contact .wpcf7-form table td {
text-align: left;
font-size: 18px;
line-height: 1.67;
padding: 20px 0px 10px 40px;
border-bottom: 1px solid #040000;
}
.page-contact .wpcf7-form .req {
color: #e50012;
}
.page-contact .wpcf7-form .wpcf7-not-valid-tip {
font-size: 13px;
}
.page-contact .wpcf7-form input[type=text],
.page-contact .wpcf7-form input[type=tel],
.page-contact .wpcf7-form input[type=email],
.page-contact .wpcf7-form textarea {
border: 1px solid #ddd;
margin-bottom: 8px;
padding: 5px 10px;
font-size: 15px;
width: 100%;
}
.page-contact .wpcf7-form span.wpcf7-list-item {
margin: 0 1em 0 0;
}
.page-contact .wpcf7-form .submit-wrap {
margin-top: 30px;
text-align: center;
}
.page-contact .wpcf7-form input[type=submit],
.page-contact .wpcf7-form input[type=button] {
display: inline-block;
background-color: #000;
width: 180px;
line-height: 1.7;
text-align: center;
color: #fff;
font-size: 13px;
margin: 0 10px;
padding: 8px;
cursor: pointer;
}
.page-contact .wpcf7-form .ajax-loader {
display: block;
margin: 10px auto 0;
}
.page-contact .wpcf7-form .wpcf7c-conf {
background: none;
border: none;
}
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset;
}
@media (max-width: 767px) {
.page-contact .sec {
margin-bottom: 40px;
}
.page-contact .sec .page-title {
margin-top: 20px;
}
.page-contact .sec .subtitle {
margin-bottom: 15px;
font-size: 27px;
}
.page-contact .wpcf7-form table th {
display: block;
width: 100%;
font-size: 10px;
padding: 10px 10px 10px;
border-bottom: none;
}
.page-contact .wpcf7-form table td {
display: block;
width: 100%;
font-size: 10px;
padding: 10px 0;
}
.page-contact .wpcf7-form .wpcf7-not-valid-tip {
font-size: 10px;
}
.page-contact .wpcf7-form input[type=text],
.page-contact .wpcf7-form input[type=tel],
.page-contact .wpcf7-form input[type=email],
.page-contact .wpcf7-form textarea {
margin-bottom: 0;
padding: 5px;
font-size: 12px;
}
.page-contact .wpcf7-form input[type=submit],
.page-contact .wpcf7-form input[type=button] {
margin: 0 10px 10px;
}
}
/* page-contact
float-contact
-------- */
.float-contact table {
font-size: 18px;
border-top: 1px solid #000;
width: 100%;
}
.float-contact table th {
line-height: 1.6em;
width: 240px;
padding: 25px 10px 15px;
vertical-align: top;
font-weight: bold;
border-bottom: 1px solid #000;
background-color: #efefef;
}
.float-contact table td {
line-height: 1.6em;
padding: 25px 0 15px 10px;
vertical-align: top;
border-bottom: 1px solid #000;
background-color: #fff;
}
.float-contact table td .kome {
line-height: 1.4em;
}
.float-contact .req {
color: #e50012;
}
.float-contact .error {
font-size: 16px;
color: #e50012;
}
.float-contact .mwform-radio-field {
display: inline-block;
}
.float-contact p.submit-wrap {
text-align: center;
margin-top: 30px;
}
.float-contact .horizontal-item + .horizontal-item {
margin-left: 0;
margin-right: 10px;
}
/* iOSでのデフォルトスタイルをリセット */
.float-contact input[type=submit],
.float-contact input[type=button] {
border-radius: 0;
-webkit-box-sizing: content-box;
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
border: none;
box-sizing: border-box;
cursor: pointer;
}
.float-contact input[type=submit]::-webkit-search-decoration,
.float-contact input[type=button]::-webkit-search-decoration {
display: none;
}
.float-contact input[type=submit]::focus,
.float-contact input[type=button]::focus {
outline-offset: -2px;
}
.float-contact input[type=text],
.float-contact input[type=tel],
.float-contact input[type=email],
.float-contact textarea {
border: 1px solid #ddd;
margin-bottom: 8px;
padding: 5px 10px;
font-size: 15px;
width: 100%;
}
.float-contact input[type=text].your-tel {
width: inherit;
}
.page-contact .float-contact input[type=submit].your-send {
display: none;
}
.float-contact input[type=submit],
.float-contact input[type=button] {
display: inline-block;
background-color: #000;
width: 180px;
line-height: 1.7;
text-align: center;
color: #fff;
font-size: 13px;
margin: 0 10px;
padding: 8px;
cursor: pointer;
}
.page-contact-send .message-box {
border: 1px solid #aaa;
background-color: #fafafa;
padding: 15px 0;
margin-bottom: 15px;
}
.page-contact-send .message-box p {
text-align: center;
}
.page-contact-send .thanks-box p {
margin-bottom: 1em;
}
.page-contact-send .thanks-box a {
color: #19aaeb;
text-decoration: underline;
}
.page-contact-send .thanks-box a:hover {
text-decoration: none;
}
@media screen and (max-width: 767px) {
.float-contact table {
font-size: 12px;
border-top: none;
border-bottom: 1px solid #000;
}
.float-contact table th {
display: block;
width: auto;
padding: 5px 10px;
border-top: 1px solid #000;
border-bottom: none;
}
.float-contact table td {
display: block;
padding: 15px 10px;
border-bottom: none;
}
.float-contact .error {
font-size: 12px;
}
.float-contact input[type=text],
.float-contact input[type=tel],
.float-contact input[type=email],
.float-contact textarea {
margin-bottom: 5px;
padding: 5px;
font-size: 12px;
}
.float-contact input[type=submit],
.float-contact input[type=button] {
margin: 0 10px 10px;
}
}
/* page-staff -------- */
.page-staff .sec,
.page-staff-new .sec{
margin-bottom: 100px;
}
.page-staff .sec .subtitle,
.page-staff-new .sec .subtitle {
/*font-family: "Barlow Condensed";*/
font-size: 50px;
line-height: 1;
margin-bottom: 25px;
text-align: center;
}
.page-staff .text,
.page-staff-new .text {
font-size: 20px;
line-height: 2;
text-align: center;
}
.page-staff .page-title,
.page-staff-new .page-title {
margin-bottom: 50px;
}
.page-staff .catch,
.page-staff-new .catch {
/*font-family: "Barlow Condensed";*/
font-size: 60px;
line-height: 1;
text-align: center;
margin-bottom: 10px;
}
.page-staff .catch-text,
.page-staff-new .catch-text{
font-size: 28px;
font-weight: bold;
line-height: 2;
text-align: center;
margin-bottom: 30px;
}
@media (max-width: 767px) {
.page-staff .sec,
.page-staff-new .sec {
margin-bottom: 40px;
}
.page-staff .sec2.container,
.page-staff-new .sec2.container {
padding-left: 0;
padding-right: 0;
}
.page-staff .sec .page-title,
.page-staff-new .sec .page-title {
margin-top: 20px;
}
.page-staff .sec .subtitle,
.page-staff-new .sec .subtitle {
margin-bottom: 15px;
font-size: 27px;
}
.page-staff .text,
.page-staff-new .text {
font-size: 12px;
}
.page-staff .catch,
.page-staff-new .catch {
margin-top: 20px;
font-size: 30px;
}
.page-staff .catch-text,
.page-staff-new .catch-text {
margin: 30px 0 20px;
font-size: 16px;
}
}
.page-staff .intervie,
.page-staff-new .intervie {
margin-top: 60px;
}
.page-staff .intervie li,
.page-staff-new .intervie li {
float: left;
width: 31.25%;
margin-right: 3.12%;
margin-bottom: 5%;
}
.page-staff .intervie li:nth-child(3n),
.page-staff-new .intervie li:nth-child(3n) {
margin-right: 0;
}
.page-staff .intervie li a,
.page-staff-new .intervie li a {
display: block;
}
.page-staff .intervie li .inner,
.page-staff-new .intervie li .inner {
position: relative;
min-height: 110px;
line-height: 1.2;
padding-top: 5px;
text-align: right;
}
/*renew*/
/*
.page-staff-new .intervie li .inner { text-align: left; }
*/
.page-staff .intervie li .num,
.page-staff-new .intervie li .num {
float: left;
padding-top: 9px;
/*position: absolute;
left: 0;
top: 9px;*/
line-height: 1;
/*font-family: "Barlow Condensed";*/
}
.page-staff .intervie li .text1,
.page-staff-new .intervie li .text1 {
margin-bottom: 8px;
font-size: 20px;
/*font-family: "Barlow Condensed";*/
}
/*renew*/
.page-staff-new .intervie li .text1 { font-size: 24px; }
.page-staff .intervie li .text1 small,
.page-staff-new .intervie li .text1 small {
display: block;
font-size: 15px;
}
.page-staff .intervie li .text2,
.page-staff-new .intervie li .text2 {
margin-bottom: 5px;
font-size: 10px;
}
/*renew*/
.page-staff .intervie li .text2,
.page-staff-new .intervie li .text2 { font-size: 12px; }
.page-staff .intervie li .text3,
.page-staff-new .intervie li .text3 {
font-weight: bold;
/*font-family:
"Hiragino Kaku Gothic ProN",
"Hiragino Sans",
Meiryo,
sans-serif;*/
}
/*renew*/
.page-staff .intervie li .text3,
.page-staff-new .intervie li .text3 { font-size: 18px; font-weight: 700; }
.page-staff .intervie li .text1.ls-s,
.page-staff-new .intervie li .text1.ls-s {
letter-spacing: -1px;
}
@media (max-width: 767px) {
.page-staff .intervie,
.page-staff-new .intervie {
/*max-width: 350px;*/
margin: 20px auto 0;
padding: 0 0;
/*0 25px*/
letter-spacing: -0.4em;
}
.page-staff .intervie li,
.page-staff-new .intervie li {
float: none;
display: inline-block;
letter-spacing: normal;
vertical-align: top;
width: 46%;
margin-right: 2%;
margin-left: 2%;
margin-bottom: 5%;
/*20%*/
}
.page-staff .intervie li .inner,
.page-staff-new .intervie li .inner {
min-height: 0;
}
.page-staff .intervie li .num img,
.page-staff-new .intervie li .num img {
width: 50px;
}
.page-staff .intervie li .text1,
.page-staff-new .intervie li .text1 {
margin-bottom: 3px;
font-size: 15px;
/*18px*/
}
/*renew*/
.page-staff .intervie li .text1,
.page-staff-new .intervie li .text1 { font-size: 16px; }
.page-staff .intervie li .text1 small,
.page-staff-new .intervie li .text1 small {
font-size: 13px;
}
.page-staff .intervie li .text2,
.page-staff-new .intervie li .text2 {
margin-bottom: 5px;
}
/*renew*/
.page-staff .intervie li .text2,
.page-staff-new .intervie li .text2 { font-size: 10px; }
.page-staff .intervie li .text3,
.page-staff-new .intervie li .text3 {
font-size: 14px;
font-weight: bold;
font-family:
"Hiragino Kaku Gothic ProN",
"Hiragino Sans",
Meiryo,
sans-serif;
}
/*renew*/
.page-staff .intervie li .text3,
.page-staff-new .intervie li .text3 { font-size: 15px; }
.page-staff .intervie li:nth-child(3n),
.page-staff-new .intervie li:nth-child(3n) {
margin-right: 2%;
}
}
.body-staff .remodal,
.body-staff-new .remodal {
background-color: #000;
color: #fff;
text-align: left;
}
.body-staff .remodal .col1,
.body-staff-new .remodal .col1 {
position: relative;
width: 40.69%;
float: left;
padding: 56px 0 76px;
}
.body-staff .remodal .col2,
.body-staff-new .remodal .col2 {
width: 53.48%;
float: right;
padding: 56px 0 76px;
}
/*renew*/
.body-staff-new .remodal .col1 { width: 53.48%; }
.body-staff-new .remodal .col2 { width: 40.69%; }
.body-staff .remodal .num,
.body-staff-new .remodal .num {
position: absolute;
left: 0;
top: 9px;
line-height: 1;
/*font-family: "Barlow Condensed";*/
}
.body-staff .remodal .text1,
.body-staff-new .remodal .text1 {
position: absolute;
right: 0;
top: 0;
font-size: 22px;
/*font-family: "Barlow Condensed";*/
text-align: right;
line-height: 1.2em;
margin-left: 94px;
}
/*renew*/
.body-staff .remodal .text1,
.body-staff-new .remodal .text1 { position: static; margin-left: 0; margin-bottom: .5em; font-size: 24px; text-align: left; }
.body-staff .remodal .text1 small,
.body-staff-new .remodal .text1 small {
display: block;
font-size: 15px;
}
.body-staff .remodal .names,
.body-staff-new .remodal .names {
position: absolute;
left: 0;
bottom: 0;
}
/*renew*/
.body-staff .remodal .names,
.body-staff-new .remodal .names { position: static; margin-bottom: .5em; }
.body-staff .remodal .text2,
.body-staff-new .remodal .text2 {
font-size: 14px;
/*18px*/
}
.body-staff .remodal .text3,
.body-staff-new .remodal .text3 {
font-size: 22px;
font-weight: bold;
/*font-family:
"Hiragino Kaku Gothic ProN",
"Hiragino Sans",
Meiryo,
sans-serif;*/
}
/*renew*/
.body-staff .remodal .text3,
.body-staff-new .remodal .text3 { margin-bottom: 1.5em; font-size: 28px; }
.body-staff .remodal .text,
.body-staff-new .remodal .text {
font-size: 18px;
line-height: 1.8;
}
@media (max-width: 767px) {
.body-staff .remodal .cols,
.body-staff-new .remodal .cols {
max-width: 350px;
margin: 0 auto;
}
.body-staff .remodal .col1,
.body-staff-new .remodal .col1 {
width: auto;
float: none;
padding: 36px 0 56px;
}
/*renew*/
.body-staff .remodal .col1,
.body-staff-new .remodal .col1 { padding: 24px 0 15px; }
.body-staff .remodal .col2,
.body-staff-new .remodal .col2 {
width: auto;
float: none;
padding: 20px 0 0;
}
.body-staff .remodal .num,
.body-staff-new .remodal .num {
position: absolute;
left: 0;
top: 9px;
line-height: 1;
/*font-family: "Barlow Condensed";*/
}
.body-staff .remodal .num img,
.body-staff-new .remodal .num img {
width: 50px;
}
.body-staff .remodal .text1,
.body-staff-new .remodal .text1 {
position: absolute;
right: 0;
top: 0;
font-size: 18px;
/*font-family: "Barlow Condensed";*/
margin-left: 50px;
}
/*renew*/
.body-staff .remodal .text1,
.body-staff-new .remodal .text1 { position: static; margin-bottom: .5em; font-size: 22px; margin-left: 0; }
.body-staff .remodal .text1 small,
.body-staff-new .remodal .text1 small {
display: block;
font-size: 11px;
}
.body-staff .remodal .names,
.body-staff-new .remodal .names {
position: absolute;
left: 0;
bottom: 0;
}
/*renew*/
.body-staff .remodal .names,
.body-staff-new .remodal .names { position: static; margin-bottom: .5em; }
.body-staff .remodal .text2,
.body-staff-new .remodal .text2 {
font-size: 12px;
}
.body-staff .remodal .text3,
.body-staff-new .remodal .text3 {
font-size: 13px;
}
/*renew*/
.body-staff .remodal .text3,
.body-staff-new .remodal .text3 { margin-bottom: 1em; font-size: 20px; }
.body-staff .remodal .text,
.body-staff-new .remodal .text {
font-size: 12px;
line-height: 1.8;
}
}
@media (max-width: 767px) {
.proList li {
width: 100%;
margin-bottom: 100px;
}
.proList li:nth-child(3n) {
margin-right: 0;
}
.proList li a {
display: block;
width: 100%;
}
.proList li a .bg {
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
position: relative;
height: 250px;
}
.proList li a .text-wrap {
display: block;
text-align: center;
color: #FFF;
width: 100%;
position: absolute;
bottom: -80px;
left: 0px;
}
.proList li a .text-wrap .text-wrap-inner {
padding: 1em;
background-color: black;
}
.proList li a .text-wrap .cat {
opacity: 1;
padding: 0.3em 2em;
margin-bottom: 0.5em;
/*font-family: "Barlow Condensed";*/
background-color: #FFF;
color: #111;
font-size: 1em;
line-height: 1;
display: inline-block;
}
.proList li a .text-wrap h2 {
opacity: 1;
margin-bottom: 0.5em;
font-size: 1.3em;
font-weight: bold;
display: block;
}
.proList li a .text-wrap p {
opacity: 1;
margin-bottom: 0em;
font-size: 0.8em;
display: block;
}
}
@media (min-width: 768px) {
.proList {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
}
.proList li {
width: 33%;
margin-right: 0.5%;
margin-bottom: 0.5%;
}
.proList li:nth-child(3n) {
margin-right: 0;
}
.proList li a {
display: block;
width: 100%;
}
.proList li a .bg {
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
height: 300px;
}
.proList li a .text-wrap {
padding: 5em 2em 0;
background-color: rgba(0, 0, 0, 0);
text-align: center;
color: #FFF;
width: 100%;
height: 300px;
transition: all 0.05s ease-in-out 0.05s;
}
.proList li a .text-wrap .cat {
opacity: 0;
padding: 0.3em 2em;
margin-bottom: 0.5em;
/*font-family: "Barlow Condensed";*/
background-color: #FFF;
color: #111;
font-size: 1em;
line-height: 1;
display: inline-block;
transition: all 0.05s ease-in-out 0.05s;
}
.proList li a .text-wrap h2 {
opacity: 0;
transition: all 0.05s ease-in-out 0.05s;
}
.proList li a .text-wrap p {
opacity: 0;
transition: all 0.05s ease-in-out 0.05s;
}
.proList li a:hover .text-wrap {
display: block;
padding: 5em 2em 0;
background-color: rgba(0, 0, 0, 0.7);
text-align: center;
color: #FFF;
width: 100%;
height: 300px;
transition: all 0.05s ease-in-out 0.05s;
}
.proList li a:hover .text-wrap .cat {
opacity: 1;
padding: 0.3em 2em;
margin-bottom: 0.5em;
/*font-family: "Barlow Condensed";*/
background-color: #FFF;
color: #111;
font-size: 1em;
line-height: 1;
display: inline-block;
transition: all 0.05s ease-in-out 0.05s;
}
.proList li a:hover .text-wrap h2 {
opacity: 1;
margin-bottom: 0.5em;
font-size: 1.3em;
font-weight: bold;
display: block;
transition: all 0.05s ease-in-out 0.05s;
}
.proList li a:hover .text-wrap p {
opacity: 1;
margin-bottom: 0em;
font-size: 0.8em;
display: block;
transition: all 0.05s ease-in-out 0.05s;
}
}
.page-about .block02 .left,
.page-about .block02 .left2,
.page-about .block02 .right {
width: calc((100% / 3) - 4%);
}
@media (max-width: 767px) {
.page-about .block02 .left,
.page-about .block02 .left2,
.page-about .block02 .right {
width: 100%;
padding: 0;
}
}
/*
.post-type-archive-project .header .gnav li.contact a,
.tax-project-category .header .gnav li.contact a,
.single-project .header .gnav li.contact a {
line-height: 0;
}
*/
.page-project .catnav-sec .catnav li span {
opacity: 0;
}
.page-project .catnav-sec .catnav li.current a {
background-color: #000 !important;
}
.page-project .catnav-sec .catnav li.all a {
background:#b4b4b5 url(/wp-content/themes/ak-co/images/project/cat01.svg) no-repeat center/auto 12px;
}
.page-project .catnav-sec .catnav li.food a {
background:#b4b4b5 url(/wp-content/themes/ak-co/images/project/cat02.svg) no-repeat center/auto 12px;
}
.page-project .catnav-sec .catnav li.nightclub a {
background:#b4b4b5 url(/wp-content/themes/ak-co/images/project/cat03.svg) no-repeat center/auto 12px;
}
.page-project .catnav-sec .catnav li.salon a {
background:#b4b4b5 url(/wp-content/themes/ak-co/images/project/cat04.svg) no-repeat center/auto 12px;
}
.page-project .catnav-sec .catnav li.clinic a {
background:#b4b4b5 url(/wp-content/themes/ak-co/images/project/cat05.svg) no-repeat center/auto 12px;
}
.page-project .catnav-sec .catnav li.office a {
background:#b4b4b5 url(/wp-content/themes/ak-co/images/project/cat06.svg) no-repeat center/auto 12px;
}
.page-project .catnav-sec .catnav li.shop a {
background:#b4b4b5 url(/wp-content/themes/ak-co/images/project/cat07.svg) no-repeat center/auto 12px;
}
.page-project .catnav-sec .catnav li.house a {
background:#b4b4b5 url(/wp-content/themes/ak-co/images/project/cat08.svg) no-repeat center/auto 12px;
}
.page-project .catnav-sec .catnav li.others a {
background:#b4b4b5 url(/wp-content/themes/ak-co/images/project/cat09.svg) no-repeat center/auto 12px;
}
@charset "utf-8";
/*@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200;300;400;500;600;700;900&display=swap');*/
/* --------
[コーディングルール]
・基本classのみ使用し、idはアンカーやJSで使用
・class名、フォルダ名、ファイル名はハイフン(-）区切り
・トップページはロゴを、他のページはロゴを
でページタイトルを
にする
・メディアクエリーはPCファーストで、@media (max-width: 767px) {}を使用
-------- */
/* reset -------- */
*, *:before, *:after {
box-sizing: border-box;
}
body {
line-height: 1.5;
margin: 0;
padding: 0;
/*font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;*/
font-family: "Noto Serif JP", YuMincho, Yu Mincho, serif;
font-size: 13px;
color: #000;
/*
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
*/
}
article h1,
.header .gnav li a { letter-spacing: .08em; }
.footer__menu { letter-spacing: .1em; }
article, aside, figure, footer, header, hgroup, nav, section {
display: block;
}
h1, h2, h3, h4, h5, h6, p, th, td, address, small, i {
margin: 0;
padding: 0;
font-size: 100%;
font-weight: normal;
font-style: normal;
}
ol, ul, dl, dt, dd {
list-style-type: none;
margin: 0;
padding: 0;
}
img, object, embed {
border: 0;
vertical-align: bottom;
}
img {
max-width: 100%;
}
table {
border-spacing: 0;
border-collapse: collapse;
}
th {
text-align: left;
}
em {
font-style: normal;
font-weight: bold;
}
a {
color: #000;
text-decoration: none;
}
a:hover {
color: #000;
}
@media (max-width: 767px) {
}
/* all -------- */
.clearfix {zoom: 1;}
.clearfix:after {
content: "";
display: block;
clear: both;
}
.container {
max-width: 990px;
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
}
.text-center {text-align: center;}
.text-right {text-align: right;}
.display-inline {display: inline;}
.display-inline-block {display: inline-block;}
.display-block {display: block;}
.display-table {display: table;}
.display-table-cell {display: table-cell;}
.bg-cover {
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
height: 0;
padding-top: 71.42%;
}
@media (max-width: 767px) {
.pc {display: none !important;}
.container {
padding-left: 20px;
padding-right: 20px;
}
}
@media (min-width: 768px) {
.sp {display: none !important;}
.over {
transition: opacity .3s;
}
.over:hover {
opacity: 0.7;
filter: alpha(opacity=70);
-ms-filter: "alpha( opacity=70 )";
}
}
/* header -------- */
.header-wrap {
height: 100px;
}
.header {
position: fixed;
left: 0;
top: 0;
z-index: 15;
width: 100%;
background-color: #fff;
opacity: 0.85;
}
.header-inner {
position: relative;
/* max-width: 990px; */
max-width: 1100px;
margin: 0 auto;
padding: 0 0 0 10px; /* 0 15px*/
height: 100px;
}
.header-inner h1{
display: block;
width: 400px;
position: absolute;
top:21px;
left: 180px;
color: #555;
}
@media (max-width: 767px) {
.header-inner h1{
display: block;
width: 100%;
top:55px;
left: 0;
color: #FFF;
font-size: 0.7em;
text-align: center;
background-color: #111;
}
}
.header .logo {
position: relative;
z-index: 2;
float: left;
padding-top: 7px; /*17px*/
}
.header .gnav {
position: absolute;
left: 0;
z-index: 1;
top: 50px; /*22px*/
width: 100%;
text-align: center;
letter-spacing:-.40em;
}
.header .gnav li {
/*display: inline-block;*/
/* float: left; */
letter-spacing:normal;
width:12.5%; /*16.6666667%*/
}
.header .gnav a {
position: relative;
display: inline-block;
padding: 10px 0; /*10px 6px*/
/*font-family: 'Barlow Condensed';*/
font-size: 20px; /*23px*/
}
.header .gnav a .fonts {
padding: 8px 0;
display: block;
}
.header .gnav a img {
display: block;
}
.header .gnav li.contact a img {
display: inline-block;
vertical-align: middle;
}
.header .sns {
position: relative;
z-index: 2;
float: right;
padding-top:15px; /*37px*/
}
.header .sns li {
float: left;
margin-left: 10px;
}
.header .sns li a {
display: block;
}
.header .icon-tel img{
width:205px;
height:auto;
}
.header .logo img.pc {
width:130px;
height:auto;
}
@media (min-width: 768px) {
body.admin-bar .header {
top: 32px;
}
.header .gnav a:after {
content: '';
display: block;
position: absolute;
left: 50%;
top: 50%;
width: 0;
height: 2px;
margin-top: -1px;
/* background-color: #cf1e28; */
transition: all .3s;
-webkit-transition: all .3s;
}
.header .gnav a:hover:after {
left: 0;
width: 100%;
}
.header .gnav a.current:after {
left: 0;
width: 100%;
}
}
@media (max-width: 850px) {
.header .gnav {
padding-left:0; /* 100px*/
}
}
@media (max-width: 767px) {
.header-wrap {
height: 55px;
}
body.admin-bar .header-wrap {
height: 0;
}
.header-inner {
height: 55px;
}
.header .logo {
padding-top: 10px;
}
.header .gnav {
display: none;
top: 0;
left: auto;
right: 0;
width: 200px; /*160px*/
padding-left: 0;
background-color: #000;
}
.header .gnav ul {
padding: 60px 0 20px;
}
.header .gnav li {
display: block;
width: inherit;
}
.header .gnav li.contact a span {
display: block;
background-color: #fff;
text-align: center;
}
.header .gnav li.lang {
text-align: center;
}
.header .gnav li.lang a {
display: inline-block;
position: relative;
}
.header .gnav li.lang a.jp {
padding: 10px 8px 10px 10px;
}
.header .gnav li.lang a.jp:after {
content: '';
position: absolute;
right: 0;
top: 15px;
display: block;
width: 1px;
height: 17px;
background-color: #fff;
}
.header .gnav li.lang a.en {
padding: 10px 10px 10px 5px;
}
.header .sns {
padding:17px 60px 0 0; /*17px 40px 0 0*/
}
.header .sns li {
margin-left: 13px;
}
.header .sns li a {
position: relative;
}
.header .sns li a .close {
display: block;
position: absolute;
left: 0;
top: 0;
opacity: 0;
-webkit-transition: .3s;
transition: .3s;
}
body.is-sp-nav-open .header .sns li a .close {
opacity: 1;
}
.header .sp-menu {
position: absolute;
right: 0;
top: 0;
z-index: 2;
}
.header .sp-menu a {
display: block;
width: 55px;
height: 55px;
}
.header .sp-menu span,
.header .sp-menu span:before,
.header .sp-menu span:after {
position: absolute;
top: 50%;
left: 0;
right: 0;
display: block;
margin: 0 auto;
width: 20px;
height: 2px;
margin-top: -1px;
background: #000;
-webkit-transition: .3s;
transition: .3s;
}
.header .sp-menu span:before {
content: "";
margin-top: -8px;
}
.header .sp-menu span:after {
content: "";
margin-top: 6px;
}
body.is-sp-nav-open .header .sp-menu span {
background: transparent;
}
body.is-sp-nav-open .header .sp-menu span:before {
margin-top: -2px;
margin-left: -2px;
height: 2px;
width: 26px;
background: #fff;
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
}
body.is-sp-nav-open .header .sp-menu span:after {
margin-top: -2px;
margin-left: -2px;
height: 2px;
width: 26px;
background: #fff;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
}
/* footer -------- */
.footer-inner {
position: relative;
/* max-width: 990px; */
max-width: 1100px;
margin: 0 auto;
padding: 0 15px;
min-height: 180px;
}
.footer .logo {
position: relative;
z-index: 2;
float: left;
padding-top: 35px;
}
.footer .gnav {
position: absolute;
left: 230px; /*0*/
z-index: 1;
top: 48px; /*44px*/
/*width: 100%;
text-align: center;*/
}
.footer .gnav li {
display: inline-block;
}
.footer .gnav a {
display: inline-block;
padding: 10px 6px;
/*font-family: 'Barlow Condensed';*/
font-size: 18px; /*23px*/
color: #fff;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
.footer .gnav a img {
vertical-align: middle;
}
.footer .sns {
position: relative;
z-index: 2;
float: right;
padding-top: 120px; /*59px→100px */
}
.footer .sns li {
float: left;
margin-left: 19px; /*15px*/
}
.footer .sns li a {
display: inline-block;
}
.footer .sns li.contact {
position: relative;
top: -5px;
margin-left: 32px; /*24px*/
}
.footer .sns li.contact a {
padding: 0 22px;
/*font-family: 'Barlow Condensed';*/
font-size: 20px;
background-color: #fff;
}
.footer .sns li.contact a img {
vertical-align: middle;
}
.footer .sns li.privacy {
position: absolute;
right: 5px;
bottom: -30px; /*-70px*/
}
.footer .sns li.privacy a img {
vertical-align: middle;
}
.footer .sns li.privacy a {
line-height: 1;
padding: 0 9px;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
/*font-family: 'Barlow Condensed';*/
font-size: 15px;
color: #fff;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
.footer .copyright {
clear: both;
padding-top: 35px;
padding-bottom: 10px;
text-align: center;
font-size: 14px;
/*font-family: 'Barlow Condensed';*/
color: #fff;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
.footer .copyright img {
vertical-align: middle;
}
@media (max-width: 1000px) {
/* .footer .logo {
width: 125px;
padding-top: 47px;
}
.footer .gnav {
padding-left: 170px;
font-size: 20px;
text-align: left;
}
.footer .gnav a {
padding: 10px 4px;
}*/
}
@media (max-width: 950px) {
/* .footer .sns {
padding-top: 99px;
}
.footer .sns li.privacy {
bottom: -30px;
}*/
}
@media (max-width: 930px) {
/* .footer .gnav {
padding-left: 100px;
}*/
/* .footer .sns {
padding-top: 99px;
}*/
.footer .sns li.privacy {
bottom: -30px;
}
}
@media (max-width: 767px) {
.footer-inner {
height: 370px; /*384px*/
padding: 0 20px;
}
.footer .logo {
position: absolute;
left: 20px;
bottom: 34px;
float: none;
padding: 0;
}
.footer .gnav {
position: relative;
left: auto;
top: auto;
text-align: left;
padding: 22px 0 0 7px;
}
.footer .gnav li {
display: block;
float: left;
width: 50%;
}
.footer .gnav a {
display: block;
padding: 10px 6px;
font-size: 18px;
}
.footer .sns {
float: none;
padding-top: 15px;
padding-left: 12px;
padding-bottom: 20px; /*25px*/
border-bottom: 1px solid #fff;
}
.footer .sns li {
margin-left: 0;
margin-right: 15px;
}
.footer .sns li.contact {
position: relative;
float: right;
top: -5px;
width: 50%;
margin: 0;
}
.footer .sns li.contact a {
padding: 0 45px 0 10px;
font-size: 18px;
}
.footer .sns li.privacy {
right: 5px;
bottom: -97px;
margin: 0;
}
.footer .sns li.privacy a {
padding: 0 5px;
font-size: 12px;
}
.footer .copyright {
position: absolute;
left: 20px;
bottom: 10px;
font-size: 8px;
/*font-family: 'Barlow Condensed';*/
color: #fff;
}
}
@media screen and (max-width: 767px) {
.footer__inner {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
}
/* @media screen and (max-width: 767px) {
.clearfix {
display: none;
}
} */
*,*:before,*:after{box-sizing:border-box}body{line-height:1.5;margin:0;padding:0;/*font-family:'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;*/font-size:13px;color:#000}article,aside,figure,footer,header,hgroup,nav,section{display:block}h1,h2,h3,h4,h5,h6,p,th,td,address,small,i{margin:0;padding:0;font-size:100%;font-weight:normal;font-style:normal}ol,ul,dl,dt,dd{list-style-type:none;margin:0;padding:0}img,object,embed{border:0;vertical-align:bottom}img{max-width:100%}table{border-spacing:0;border-collapse:collapse}th{text-align:left}em{font-style:normal;font-weight:bold}a{color:#000;text-decoration:none}a:hover{color:#000}.clearfix{zoom:1}.clearfix:after{content:'';display:block;clear:both}.container{max-width:990px;margin-left:auto;margin-right:auto;padding-left:15px;padding-right:15px}.text-center{text-align:center}.text-right{text-align:right}.display-inline{display:inline}.display-inline-block{display:inline-block}.display-block{display:block}.display-table{display:table}.display-table-cell{display:table-cell}.bg-cover{background-repeat:no-repeat;background-position:center center;background-size:cover;height:0;padding-top:71.42%}
@media (max-width: 767px){.pc{display:none}.container{padding-left:20px;padding-right:20px}}
@media (min-width: 768px){.sp{display:none}.over{transition:opacity 0.3s}.over:hover{opacity:0.7;filter:alpha(opacity=70);-ms-filter:'alpha( opacity=70 )'}}
.footer-inner{position:relative;max-width:1100px;margin:0 auto;padding:0 15px;min-height:180px}.footer .logo{position:relative;z-index:2;float:left;padding-top:35px}.footer .gnav{position:absolute;left:230px;z-index:1;top:48px}.footer .gnav li{display:inline-block}.footer .gnav a{display:inline-block;padding:10px 6px;/*font-family:'Barlow Condensed';*/font-size:14px;color:#fff;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.footer .sns{position:relative;z-index:2;float:right;padding-top:120px}.footer .sns li{float:left;margin-left:19px}.footer .sns li a{display:inline-block}.footer .sns li.contact{position:relative;top:-5px;margin-left:32px}.footer .sns li.contact a{padding:0 22px;/*font-family:'Barlow Condensed';*/font-size:20px;background-color:#fff}.footer .sns li.privacy{position:absolute;right:5px;bottom:-30px}.footer .sns li.privacy a{line-height:1;padding:0 9px;border-left:1px solid #fff;border-right:1px solid #fff;/*font-family:'Barlow Condensed';*/font-size:15px;color:#fff;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.footer .copyright{clear:both;padding-top:35px;padding-bottom:10px;text-align:center;font-size:14px;/*font-family:'Barlow Condensed';*/color:#fff;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}
@media (max-width: 930px){.footer .sns li.privacy{bottom:-30px}}
@media (max-width: 767px){
body { word-break: break-all; }
.page-project { overflow-x: hidden; }
.footer-inner{height:370px;padding:0 20px}.footer .logo{position:absolute;left:20px;bottom:34px;float:none;padding:0}.footer .gnav{position:relative;left:auto;top:auto;text-align:left;padding:22px 0 0 7px}.footer .gnav li{display:block;float:left;width:50%}.footer .gnav a{display:block;padding:10px 6px;font-size:15px}.footer .sns{float:none;padding-top:15px;padding-left:12px;padding-bottom:20px;border-bottom:1px solid #fff}.footer .sns li{margin-left:0;margin-right:15px}.footer .sns li.contact{position:relative;float:right;top:-5px;width:50%;margin:0}.footer .sns li.contact a{padding:0 45px 0 10px;font-size:18px}.footer .sns li.privacy{right:5px;bottom:-97px;margin:0}.footer .sns li.privacy a{padding:0 5px;font-size:12px}.footer .copyright{position:absolute;left:20px;bottom:10px;font-size:8px;/*font-family:'Barlow Condensed';*/color:#fff}}
.totop{text-align:center;margin-top:100px}.totop a{display:inline-block;/*font-family:'Barlow Condensed';*/font-size:18px;text-decoration:none}.totop a:before{content:'';display:block;width:1px;height:80px;background-color:#000000;margin-left:auto;margin-right:auto}.header-wrap{height:100px}.header{position:fixed;left:0;top:0;z-index:15;width:100%;background-color:#fff;opacity:1}.header-inner{position:relative;max-width:1100px;padding:0 0 0 10px;height:100px}.header-inner h1{display:block;width:400px;position:absolute;top:21px;left:240px;color:#555}
@media (max-width: 767px){.header-inner h1{display:block;width:100%;top:55px;left:0;color:#fff;font-size:0.7em;text-align:center;background-color:#111}}
.header .logo{position:relative;z-index:2;float:left;padding-top:7px}.header .gnav{position:absolute;left:0;z-index:1;top:50px;width:100%;text-align:center;letter-spacing:-0.4em}.header .gnav li{display:inline-block;letter-spacing:normal;width:12.5%}
@media (min-width: 768px) {
.header .gnav li.sp {
display: none
}
}
.header .gnav a {
position: relative;
display: inline-block;
padding: 10px 0; /*font-family:'Barlow Condensed';*/ font-size: 17px
}
.header .sns {
position: relative;
right: 0;
z-index: 2;
float: right;
padding-top: 15px;
margin-top: 40px;
/* margin-right: 40px; */
}
.header .sns li {
float: left;
margin-left: 10px!important
}
.header .sns li.ico_facebook {
margin-top: -1px
}
.header .sns li.ico_instagram {
margin-left: 9px!important
}
.header .sns li a {
display: block
}
.header .icon-tel {
position: absolute;
top: -33px;
right: 10px;
width: 205px;
height: 22px;
z-index: 3;
}
.header .icon-tel .icon-tel-link {
display: block;
padding: 0;
}
.header .icon-tel .icon-tel-link::after { content: none; }
@media (hover: hover) {
.header .icon-tel .icon-tel-link {
pointer-events: none;
}
}
.header .icon-tel img {
width: 205px;
height: auto
}
.header .logo img.pc {
width: 130px;
height: auto;
}
@media (min-width: 768px){body.admin-bar .header{top:32px}.header .gnav a:after{content:'';display:block;position:absolute;transition:all 0.3s;-webkit-transition:all 0.3s}.header .gnav a:hover:after{left:0;width:100%}.header .gnav a.current:after{left:0;width:100%}}
@media (max-width: 850px){.header .gnav{padding-left:0}}
@media (max-width: 767px) {
.header-wrap {
height: 55px
}
body.admin-bar .header-wrap {
height: 0
}
.header-inner {
height: 55px
}
.header .logo {
padding-top: 10px
}
.header .gnav {
display: none;
top: 0;
left: auto;
right: 0;
width: 250px;
padding-left: 0;
background-color: #000
}
.header .gnav ul {
padding: 60px 0 20px
}
.header .gnav li {
display: block;
width: inherit
}
.header .gnav li.contact a span {
display: block;
background-color: #fff;
text-align: center
}
.header .gnav li.lang {
text-align: center
}
.header .gnav li.lang a {
display: inline-block;
position: relative
}
.header .gnav li.lang a.jp {
padding: 10px 8px 10px 10px
}
.header .gnav li.lang a.jp:after {
content: '';
position: absolute;
right: 0;
top: 15px;
display: block;
width: 1px;
height: 17px;
background-color: #fff
}
.header .gnav li.lang a.en {
padding: 10px 10px 10px 5px
}
.header .sns {
margin-top: 0;
padding: 17px 60px 0 0
}
.header .sns li {
margin-left: 13px
}
.header .sns li a {
position: relative
}
.header .sns li a .close {
display: block;
position: absolute;
left: 0;
top: 0;
opacity: 0;
-webkit-transition: 0.3s;
transition: 0.3s
}
body.is-sp-nav-open .header .sns li a .close {
opacity: 1
}
.header .sp-menu {
position: absolute;
right: 0;
top: 0;
z-index: 2
}
.header .sp-menu a {
display: block;
width: 55px;
height: 55px
}
.header .sp-menu span, .header .sp-menu span:before, .header .sp-menu span:after {
position: absolute;
top: 50%;
left: 0;
right: 0;
display: block;
margin: 0 auto;
width: 20px;
height: 2px;
margin-top: -1px;
background: #000;
-webkit-transition: 0.3s;
transition: 0.3s
}
.header .sp-menu span:before {
content: '';
margin-top: -8px
}
.header .sp-menu span:after {
content: '';
margin-top: 6px
}
body.is-sp-nav-open .header .sp-menu span {
background: transparent
}
body.is-sp-nav-open .header .sp-menu span:before {
margin-top: -2px;
margin-left: -2px;
height: 2px;
width: 26px;
background: #fff;
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg)
}
body.is-sp-nav-open .header .sp-menu span:after {
margin-top: -2px;
margin-left: -2px;
height: 2px;
width: 26px;
background: #fff;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg)
}
}
.page-service .content-inner {
padding: 0 0 40px;
overflow: hidden
}
.page-service .page-title { /*font-family:'Barlow Condensed';*/ font-size: 120px;
line-height: 1;
text-align: center;
margin: 30px 0 80px;
text-transform: uppercase
}
.page-service .page-title--sub {
display: block;
padding: 16px 0 0;
font-size: 20px
}
@media (max-width: 767px){
.page-service .page-title{margin:40px 0;font-size:45px}
}
.page-service .container{
max-width:1500px;
margin:0 auto
}
@media (max-width: 767px){
.page-service .ServiceNav__list{
}
.page-service .ServiceNav__item{
width:100%;
height:auto;
margin-bottom:20px
}
.page-service .ServiceNav__link{
display:flex;
flex-direction:column;
width:100%;
height:auto;
background-color: #F5F5F5;
}
.page-service .ServiceNav__link:hover .ServiceNav__image::before{visibility:visible;opacity:1}
.page-service .ServiceNav__image{
display:block;
width:100%;
height:200px;
object-fit: cover;
background-color:#999;background-size:cover;background-position:center;margin:0;padding:0}
.page-service .ServiceNav__image::before{content:'View Detail';display:flex;justify-content:center;align-items:center;width:100%;height:100%;color:#fff;/*font-family:'Barlow Condensed';*/font-size:18px;font-weight:300;letter-spacing:0.1em;background:rgba(0,0,0,0.4);visibility:hidden;opacity:0;transition:all 0.3s ease-out}
.page-service .ServiceNav__title{
display:inline-block;
font-size:20px;
padding:10px 30px 0;
}
.page-service .ServiceNav__txt{
display:inline-block;
font-size:12px;
font-weight: normal;
padding:0 30px 20px;
}
.page-service.isChild .page-service-image{display:block;width:100%;height:400px;background-color:#999;background-size:cover;background-position:center;margin:0;padding:0}.page-service.isChild .content-inner{max-width:1000px;margin:0 auto}.page-service.isChild .content-inner p{display:flex;justify-content:flex-start;align-items:flex-start;margin:24px 0;line-height:1.75;font-size:14px}.page-service.isChild .content-inner img{width:100%;height:auto}.page-service.isChild .content-inner h2,.page-service.isChild .content-inner h3,.page-service.isChild .content-inner h4,.page-service.isChild .content-inner h5,.page-service.isChild .content-inner h6{font-weight:600}.page-service.isChild .content-inner h2{font-size:32px;margin:48px 0 16px}.page-service.isChild .content-inner h3{font-size:24px;margin:32px 0 16px}.page-service.isChild .content-inner h4{font-size:18px;margin:24px 0 10px}.page-service.isChild .content-inner h5{font-size:16px;margin:20px 0 8px}.page-service.isChild .content-inner h6{font-size:14px;margin:10px 0}.page-service.isChild .content-inner ul li,.page-service.isChild .content-inner ol li{font-size:14px;line-height:1.75;letter-spacing:0.1em}.page-service.isChild .content-inner ol{padding-left:24px;list-style:decimal}.page-service.isChild .content-inner ul li{display:flex;justify-content:flex-start;align-items:center}.page-service.isChild .content-inner ul li::before{content:'';display:inline-block;width:12px;height:1px;background:#aaa;margin-right:12px}.amp-nav{z-index:100}.sp-menu .hamburger{display:block;width:55px;height:55px}amp-sidebar{position:relative;background-color:rgba(0,0,0,0.8);width:200px}amp-sidebar .hamburger{display:block;width:55px;height:55px}amp-sidebar ul{padding:60px 0 20px}amp-sidebar ul li a{display:block;padding:8px 20px;color:#fff;font-size:18px;text-align:left;font-family:'Barlow Condensed'}amp-sidebar ul li.contact a{padding-top:10px;color:#000}amp-sidebar ul li.contact a span{display:block;background-color:#fff;text-align:center}
}
@media (min-width: 768px){
.page-service .ServiceNav__list{display:flex;justify-content:space-between;flex-wrap:wrap}
.page-service .ServiceNav__item{
width:calc((100% / 2) - 8px);
height:520px;
margin-bottom:40px
}
.page-service .ServiceNav__link{
display:flex;
flex-direction:column;
width:100%;
height:auto;
background-color: #F5F5F5;
}
.page-service .ServiceNav__link:hover .ServiceNav__image::before{visibility:visible;opacity:1}
.page-service .ServiceNav__image{
display:block;
width:100%;
height:400px;
object-fit: cover;
background-color:#999;background-size:cover;background-position:center;margin:0;padding:0}
.page-service .ServiceNav__image::before{content:'View Detail';display:flex;justify-content:center;align-items:center;width:100%;height:100%;color:#fff;/*font-family:'Barlow Condensed';*/font-size:18px;font-weight:300;letter-spacing:0.1em;background:rgba(0,0,0,0.4);visibility:hidden;opacity:0;transition:all 0.3s ease-out}
.page-service .ServiceNav__title{
display:inline-block;
font-size:24px;
padding:10px 30px 0;
}
.page-service .ServiceNav__txt{
display:inline-block;
font-size:12px;
font-weight: normal;
padding:0 30px 20px;
}
.page-service.isChild .page-service-image{display:block;width:100%;height:400px;background-color:#999;background-size:cover;background-position:center;margin:0;padding:0}.page-service.isChild .content-inner{max-width:1000px;margin:0 auto}
.page-service.isChild .content-inner p{
display:flex;justify-content:flex-start;align-items:flex-start;
margin:24px 0;line-height:1.75;
font-size:1em;
}
.page-service.isChild .content-inner img{width:100%;height:auto}.page-service.isChild .content-inner h2,.page-service.isChild .content-inner h3,.page-service.isChild .content-inner h4,.page-service.isChild .content-inner h5,.page-service.isChild .content-inner h6{font-weight:600}.page-service.isChild .content-inner h2{font-size:32px;margin:48px 0 16px}.page-service.isChild .content-inner h3{font-size:24px;margin:32px 0 16px}.page-service.isChild .content-inner h4{font-size:18px;margin:24px 0 10px}.page-service.isChild .content-inner h5{font-size:16px;margin:20px 0 8px}.page-service.isChild .content-inner h6{font-size:14px;margin:10px 0}.page-service.isChild .content-inner ul li,.page-service.isChild .content-inner ol li{font-size:14px;line-height:1.75;letter-spacing:0.1em}.page-service.isChild .content-inner ol{padding-left:24px;list-style:decimal}.page-service.isChild .content-inner ul li{display:flex;justify-content:flex-start;align-items:center}.page-service.isChild .content-inner ul li::before{content:'';display:inline-block;width:12px;height:1px;background:#aaa;margin-right:12px}.amp-nav{z-index:100}.sp-menu .hamburger{display:block;width:55px;height:55px}amp-sidebar{position:relative;background-color:rgba(0,0,0,0.8);width:200px}amp-sidebar .hamburger{display:block;width:55px;height:55px}amp-sidebar ul{padding:60px 0 20px}amp-sidebar ul li a{display:block;padding:8px 20px;color:#fff;font-size:18px;text-align:left;font-family:'Barlow Condensed'}amp-sidebar ul li.contact a{padding-top:10px;color:#000}amp-sidebar ul li.contact a span{display:block;background-color:#fff;text-align:center}
}
@charset "utf-8";
.anibg {
position: absolute;
}
.anibg path{
fill: transparent;
}
.anibg.is-set path{
stroke: #737373;
/* -webkit-transition: stroke-dashoffset 1s linear;
transition: stroke-dashoffset 1s linear;*/
}
.anibg.is-ani path{
/*stroke-dashoffset: 0 !important;*/
}
/* sec */
.sec {
position: relative;
}
.anibg-wrap {
position: absolute;
left: 50%;
top: 0;
bottom: 0;
z-index: 1;
pointer-events:none;
}
.anibg {
pointer-events:none;
}
.page-home .anibg1 {left: 252px; top: -183px;}
.page-home .anibg2 {left: 454px; top: 20px;}
.page-home .anibg3 {right: 205px; top: 39px;}
.page-home .anibg4 {right: 362px; top: 320px;}
.page-home .anibg5 {right: 170px; top: 410px;}
.page-home .anibg6 {left: -504px; top: -195px;}
.page-home .anibg7 {left: -533px; top: -55px;}
.page-home .anibg8 {left: 386px; top: 140px;}
.page-home .anibg9 {left: 336px; top: 491px;}
.page-home .anibg10 {left: 156px; top: 401px;}
.page-home .anibg11 {right: 192px; top: 755px;}
.page-home .anibg12 {right: 452px; top: 830px;}
.page-home .anibg13 {right: 358px; top: 931px;}
.page-home .anibg14 {left: 248px; top: 1350px;}
.page-home .anibg15 {left: 497px; top: 1600px;}
.page-home .anibg16 {left: 28px; top: -203px;}
.page-home .anibg17 {left: 412px; top: 177px;}
.page-home .anibg18 {right: 459px; top: 403px;}
.page-home .anibg19 {right: 360px; top: 492px;}
@media (max-width: 767px) {
.anibg.is-ani path{
stroke-width: 2px;
}
.anibg {
transform: scale(0.36);
}
.page-home .anibg1 {left: -47px; top: 17px;}
.page-home .anibg2 {left: 69px; top: 132px;}
.page-home .anibg3 {right: -85px; top: -207px;}
.page-home .anibg4 {right: 46px; top: -29px;}
.page-home .anibg5 {right: -55px; top: -122px;}
.page-home .anibg6 {left: -271px; top: -185px;}
.page-home .anibg7 {left: -223px; top: -115px;}
.page-home .anibg8 {left: 56px; top: 190px;}
.page-home .anibg9 {left: 71px; top: 410px;}
.page-home .anibg10 {left: -114px; top: 255px;}
.page-home .anibg11 {right: -94px; top: 222px;}
.page-home .anibg12 {right: 53px; top: 302px;}
.page-home .anibg13 {right: -40px; top: 1041px;}
.page-home .anibg14 {left: -89px; top: 1150px;}
.page-home .anibg15 {left: 81px; top: 1320px;}
.page-home .anibg16 {left: auto; right: -99px; top: -403px;}
.page-home .anibg17 {left: auto; right: -69px; top: -195px;}
.page-home .anibg18 {right: 59px; top: 293px;}
.page-home .anibg19 {right: -3px; top: 204px;}
}
.page-about .anibg1 {left: 252px; top: -136px; display: none;}
.page-about .anibg2 {left: 384px; top: 440px;}
.page-about .anibg3 {left: -725px; top: 630px;}
.page-about .anibg4 {left: 252px; top: 1010px;}
.page-about .anibg5 {left: -790px; top: -100px;}
.page-about .anibg6 {left: 370px; top: 320px;}
@media (max-width: 767px) {
.page-about .anibg1 {left: -28px; top: -172px;}
.page-about .anibg2 {left: -16px; top: 440px;}
.page-about .anibg3 {left: -405px; top: 680px; display: none;}
.page-about .anibg4 {left: -18px; top: 920px; display: none;}
.page-about .anibg5 {left: -307px; top: -171px;}
.page-about .anibg6 {left: -41px; top:510px;}
}
.page-recruit .anibg1 {left: -632px; top: -136px;}
.page-recruit .anibg2 {left: 234px; top: 1970px;} /*top: 600px;*/
.page-recruit .anibg3 {left: -685px; top: 230px;}
.page-recruit .anibg4 {left: 262px; top: 1220px;}
.page-recruit .anibg5 {left: -650px; top: 50px;} /*left: -650px; top: -120px;*/
@media (max-width: 767px) {
.page-recruit .anibg1 {left: -272px; top: -200px;}
.page-recruit .anibg2 {display: none;}
.page-recruit .anibg3 {left: -45px; top: 110px;}
.page-recruit .anibg4 {left: -85px; top: 861px;}
.page-recruit .anibg5 {left: -300px; top: -50px;} /*left: -300px; top: -164px;*/
}
.page-staff .anibg1 {left: -632px; top: -136px;}
.page-staff .anibg2 {left: 234px; top: 3300px;}
@media (max-width: 767px) {
.page-staff .anibg1 {left: -272px; top: -200px;}
.page-staff .anibg2 {display: none;}
}
.page-news .anibg1 {left: 402px; top: 4px;}
.page-news .anibg2 {left: -644px; top: 730px;}
.page-news .anibg3 {left: 265px; top: 1120px;}
.page-news .anibg4 {left: -602px; bottom: -220px;}
.page-column .anibg1 {left: 402px; top: 4px;}
.page-column .anibg2 {left: -644px; top: 730px;}
.page-column .anibg3 {left: 265px; top: 1120px;}
.page-column .anibg4 {left: -602px; bottom: -220px;}
.page-column-single .anibg1 {left: 402px; top: 4px;}
.page-column-single .anibg2 {left: -644px; top: 730px;}
.page-column-single .anibg3 {left: 265px; top: 1120px;}
.page-column-single .anibg4 {left: -602px; bottom: -220px;}
@media (max-width: 767px) {
.page-news .anibg1 {left: -15px; top: -229px;}
.page-news .anibg2 {display: none;}
.page-news .anibg3 {display: none;}
.page-news .anibg4 {left: -269px; bottom: -192px;}
.page-column .anibg1 {left: -15px; top: -229px;}
.page-column .anibg2 {display: none;}
.page-column .anibg3 {display: none;}
.page-column .anibg4 {left: -269px; bottom: -192px;}
.page-column-single .anibg1 {left: -15px; top: -229px;}
.page-column-single .anibg2 {display: none;}
.page-column-single .anibg3 {display: none;}
.page-column-single .anibg4 {left: -269px; bottom: -192px;}
}
.page-project .anibg1 {left: 630px; bottom: -212px;}
.page-project .anibg2 {left: -1000px; bottom: -733px;}
.page-project .anibg3 {right: -684px; bottom: -750px;}
@media (max-width: 767px) {
.page-project .anibg1 {display: none;}
.page-project .anibg2 {display: none;}
.page-project .anibg3 {display: none;}
}
.page-project-single .anibg1 {left: -742px; top: -312px;}
.page-project-single .anibg2 {left: 194px; top: 150px;}
.page-project-single .anibg3 {left: 345px; top: 610px;}
.page-project-single .anibg4 {left: -672px; top: 1650px;}
.page-project-single .anibg5 {left: 180px; top: 2670px;}
@media (max-width: 767px) {
.page-project-single .anibg1 {left: -426px; top: -371px;}
.page-project-single .anibg2 {left: -66px; top: 20px;}
.page-project-single .anibg3 {left: -45px; top: 740px;}
.page-project-single .anibg4 {left: -312px; top: 1570px;}
.page-project-single .anibg5 {left: -480px; top: 2590px;}
}
@media (min-width: 768px) {
.page-goodstory .anibg1 {right: 330px; top: -50px;}
.page-goodstory .anibg2 {left: 350px; bottom: -190px;}
}
@media (max-width: 767px) {
.page-goodstory .anibg-wrap {
left: 0;
width: 100%;
}
.page-goodstory .anibg1 {left: -155px; top: -130px;}
.page-goodstory .anibg2 {right: -140px; bottom: -190px;}
}
@media (max-width: 767px) {
}
@media (min-width: 768px) {
.page-goodstory-single .anibg1 {left: 330px; top: 90px;}
.page-goodstory-single .anibg2 {left: 402px; bottom: -70px;}
.page-goodstory-single .anibg3 {right: 330px; top: -90px;}
.page-goodstory-single .anibg4 {right: 250px; top: -270px;}
}
@media (max-width: 767px) {
.page-goodstory-single .anibg-wrap {
left: 0;
width: 100%;
}
.page-goodstory-single .anibg1 {right: -130px; bottom: -150px;}
.page-goodstory-single .anibg2 {right: -220px; bottom: -180px;}
.page-goodstory-single .anibg3 {left: -240px; top: -140px;}
.page-goodstory-single .anibg4 {left: -190px; top: -216px;}
}
/* activeが付いたらアニメーションする */
.contact-svg.active {
animation: fadeInOutline 1.5s ease-out forwards, toBlackText 1s ease-in forwards;
animation-delay: 0s, 1.5s;
}
/* 出現アニメーション */
@keyframes fadeInOutline {
to {
opacity: 1;
transform: translateY(0);
}
}
/* 色変化アニメーション */
@keyframes toBlackText {
0% {
color: white;
text-shadow:
-1px -1px 0 black,
1px -1px 0 black,
-1px 1px 0 black,
1px 1px 0 black;
}
100% {
color: black;
text-shadow: none;
}
}
@media (max-width: 767px) {
.contact-svg {
font-size: 2.4rem;
text-align: center;
white-space: normal;
}
}
/* 最初は非表示にしておく */
.sp-br {
display: none;
}
/* スマホサイズ（例：767px以下）で改行を表示 */
@media screen and (max-width: 767px) {
.sp-br {
display: inline;
}
}
.contact-svg {
opacity: 0;
transition: opacity 0.3s ease;
}
/* アニメーションが定義済みの場合 */
.contact-svg.active {
opacity: 1;
animation: fadeInOutline 1.5s ease-out forwards, toBlackText 1s ease-in forwards;
animation-delay: 0s, 1.5s;
}
body {
opacity: 0;
transition: opacity 2.5s; /* 1秒でフェードイン */
}
body.fade-in {
opacity: 1;
}
/* 最初は非表示 */
.sec {
opacity: 0;
transform: translateY(30px); /* 下から少し浮かび上がる感じ */
transition: opacity 2.5s ease, transform 2.5s ease; /* 3秒かけて表示 */
}
/* 表示状態 */
.sec.visible {
opacity: 1;
transform: translateY(0);
}