@charset "UTF-8";
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block; }
body {
line-height: 1; }
ol, ul {
list-style: none; }
blockquote, q {
quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none; }
table {
border-collapse: collapse;
border-spacing: 0; }
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;700&display=swap');
/* @font-face {
font-family: "noto-serif-jp";
font-style: normal;
font-weight: 400;
src: url("../fonts/NotoSerifJP-Regular.woff") format("woff"), url("../fonts/NotoSerifJP-Regular.otf") format("opentype"); }
@font-face {
font-family: "noto-serif-jp";
font-style: normal;
font-weight: 700;
src: url("../fonts/NotoSerifJP-Bold.woff") format("woff"), url("../fonts/NotoSerifJP-Bold.otf") format("opentype"); } */
html {
font-size: 62.5%; }
body {
line-height: 1.8;
font-family: "Noto Serif JP", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
letter-spacing: .03em;
font-size: 14px;
color: #000; }
.sp {
display: none !important; }
::-moz-selection {
background: #a7bdcb;
color: #000; }
::selection {
background: #a7bdcb;
color: #000; }
a {
color: #000;
text-decoration: none; }
a:hover {
color: #0d0d0d; }
img {
vertical-align: top; }
ul,
ol {
list-style: none; }
.gothic {
font-family: "Helvetica Neue", Helvetica, Arial, "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif; }
.cf {
zoom: 1; }
.cf:before, .cf:after {
content: '';
display: table; }
.cf:after {
clear: both; }
h1, h2, h3, h4, h5, h6 {
font-weight: 300; }
#wrap {
position: relative;
width: 100%;
overflow: hidden;
min-width: 1024px;
background: #fff;
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }
#wrap section.main {
position: relative;
width: 100%;
padding-right: 60px;
box-sizing: border-box;
z-index: 0; }
#wrap section.main .main-box {
position: relative;
width: 100%; }
#wrap section.main .main-box .slider-box {
position: relative;
background: #000;
border-radius: 0 0 3px 0;
overflow: hidden;
z-index: 0; }
#wrap section.main .main-box .slider-box article {
position: relative;
width: 100%;
height: calc(100vh - 75px);
transition: 1.75s opacity cubic-bezier(0.215, 0.61, 0.355, 1); }
#wrap section.main .main-box .slider-box article:nth-child(2) .image .inner {
background: url("../img/img_kv_2_pc.jpg") center center;
background-size: cover; }
#wrap section.main .main-box .slider-box article:nth-child(3) .image .inner {
background: url("../img/img_kv_3_pc.jpg") center center;
background-size: cover; }
#wrap section.main .main-box .slider-box article:nth-child(4) .image .inner {
background: url("../img/img_kv_4_pc.jpg") center center;
background-size: cover; }
#wrap section.main .main-box .slider-box article:nth-child(5) .image .inner {
background: url("../img/img_kv_5_pc.jpg") center center;
background-size: cover; }
#wrap section.main .main-box .slider-box article:nth-child(6) .image .inner {
background: url("../img/img_kv_6_pc.jpg") center center;
background-size: cover; }
#wrap section.main .main-box .slider-box article:nth-child(7) .image .inner {
background: url("../img/img_kv_7_pc.jpg") center center;
background-size: cover; }
#wrap section.main .main-box .slider-box article:nth-child(8) .image .inner {
background: url("../img/img_kv_8_pc.jpg") center center;
background-size: cover; }
#wrap section.main .main-box .slider-box article:nth-child(n+2) {
position: absolute;
top: 0;
left: 0;
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }
#wrap section.main .main-box .slider-box article .image {
position: relative;
width: 100%;
height: 100%;
border-radius: 0 0 3px 0;
overflow: hidden; }
#wrap section.main .main-box .slider-box article .image .inner {
position: relative;
width: 100%;
height: 100%;
background: url("../img/img_kv_1_pc.jpg") center center;
background-size: cover; }
#wrap section.main .main-box .slider-box article .image .inner img {
width: 100%;
height: auto; }
#wrap section.main .main-box .slider-box article .image .inner.zoom-out {
-webkit-animation: zoomout 6s linear forwards;
animation: zoomout 6s linear forwards; }
@-webkit-keyframes zoomout {
0% {
-webkit-transform: scale(1.1);
transform: scale(1.1); }
100% {
-webkit-transform: scale(1);
transform: scale(1); } }
@keyframes zoomout {
0% {
-webkit-transform: scale(1.1);
transform: scale(1.1); }
100% {
-webkit-transform: scale(1);
transform: scale(1); } }
#wrap section.main .main-box .slider-box article .image .inner.zoom-out-2 {
-webkit-animation: zoomout-2 6s linear forwards;
animation: zoomout-2 6s linear forwards; }
@-webkit-keyframes zoomout-2 {
0% {
-webkit-transform: scale(1.1);
transform: scale(1.1); }
100% {
-webkit-transform: scale(1);
transform: scale(1); } }
@keyframes zoomout-2 {
0% {
-webkit-transform: scale(1.1);
transform: scale(1.1); }
100% {
-webkit-transform: scale(1);
transform: scale(1); } }
#wrap section.main .main-box .slider-box article .text-box {
position: absolute;
bottom: 40px;
right: 0px;
width: 380px;
padding: 26px 0px 26px 34px;
box-sizing: border-box;
background: #fff;
border-radius: 4px 0 0 4px;
overflow: hidden;
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
z-index: 10000; }
#wrap section.main .main-box .slider-box article .text-box h2 {
position: relative;
font-size: 26px;
font-weight: bold;
line-height: 1.5;
letter-spacing: 0.1em; }
#wrap section.main .main-box .slider-box article .text-box p {
position: relative;
font-size: 13px;
margin: 10px 0px 0px;
line-height: 1.9;
letter-spacing: 0.06em; }
#wrap section.main .main-box .slider-box article .text-box.fade-in {
-webkit-animation: fadein 6s linear forwards;
animation: fadein 6s linear forwards; }
@-webkit-keyframes fadein {
0% {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }
20% {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }
30% {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
100% {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } }
@keyframes fadein {
0% {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }
20% {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }
30% {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
100% {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } }
#wrap section.main .l-area {
position: absolute;
top: 0;
left: 0;
width: 20vw;
height: 100%;
cursor: none; }
#wrap section.main .r-area {
position: absolute;
top: 0;
right: 60px;
width: 20vw;
height: 100%;
cursor: none; }
#wrap section.main .cursor {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
display: none; }
#wrap section.main .cursor img {
position: absolute;
top: 0px;
left: 0px;
width: 60px;
-webkit-transform: translate(-30px, -45px);
-ms-transform: translate(-30px, -45px);
transform: translate(-30px, -45px);
height: auto;
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }
#wrap section.main .cursor.hover-left {
display: block;
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
#wrap section.main .cursor.hover-left .prev {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
#wrap section.main .cursor.hover-right {
display: block;
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
#wrap section.main .cursor.hover-right .next {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
#wrap section.main .scroll {
position: fixed;
top: 100vh;
right: 25px;
margin-top: -74px;
z-index: 100; }
#wrap section.main .scroll .line {
position: absolute;
top: 36px;
left: 5px;
width: 1px;
height: 38px;
overflow: hidden; }
#wrap section.main .scroll .line .inner {
position: absolute;
top: 0px;
left: 0px;
height: 38px;
width: 1px;
background: #000; }
#wrap section.main .scroll img {
width: 10px;
height: auto; }
#wrap section.main .logo-sp {
position: absolute;
top: calc(97.333vw - 46px);
left: 26px;
width: 70px; }
#wrap section.main .logo-sp img {
width: 100%;
height: auto; }
#wrap section.main .nav-dot {
position: absolute;
top: 30px;
right: 15px;
display: -webkit-flex;
display: -ms-flexbox;
display: flex; }
#wrap section.main .nav-dot li {
position: relative;
width: 18px;
height: 1px; }
#wrap section.main .nav-dot li .line {
position: relative;
width: 100%;
height: 100%;
background: #fff;
-webkit-transform: scale(0, 1);
-ms-transform: scale(0, 1);
transform: scale(0, 1);
-webkit-transform-origin: 0% 50%;
-ms-transform-origin: 0% 50%;
transform-origin: 0% 50%; }
#wrap section.main .nav-dot li .line.anim {
-webkit-animation: lineanim 5s linear;
animation: lineanim 5s linear; }
@-webkit-keyframes lineanim {
0% {
-webkit-transform: scale(0, 1);
transform: scale(0, 1); }
100% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1); } }
@keyframes lineanim {
0% {
-webkit-transform: scale(0, 1);
transform: scale(0, 1); }
100% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1); } }
#wrap section.main .nav-dot li:before {
position: absolute;
content: "";
top: -3px;
left: -3px;
width: 7px;
height: 7px;
border-radius: 50%;
background: #fff;
-webkit-transform: scale(0.5);
-ms-transform: scale(0.5);
transform: scale(0.5);
transition: 0.25s all ease; }
#wrap section.main .nav-dot li.active:before {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1); }
#wrap header {
position: relative;
max-width: 980px;
width: 85%;
margin: 0 auto;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between; }
#wrap header h1, #wrap header .logo {
position: relative;
width: 130px;
margin-top: -71px; }
#wrap header h1 img, #wrap header .logo img {
width: 100%;
height: auto; }
#wrap header nav {
position: relative;
padding-top: 26px; }
#wrap header nav ul {
position: relative;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
font-size: 13px; }
#wrap header nav ul li {
position: relative; }
#wrap header nav ul li:not(:first-child) {
margin-left: 30px; }
#wrap header nav ul li:last-child {
margin-left: 60px; }
#wrap header nav ul li:last-child:before {
position: absolute;
content: "";
top: 5px;
left: -30px;
width: 1px;
height: 12px;
background: #000; }
#wrap section.concept-box {
position: relative;
width: 100%;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
/* margin-top: 140px; */
}
#wrap section.concept-box .l-box {
position: relative;
width: 45.5%;
padding-top: 100px;
text-align: center; }
#wrap section.concept-box .l-box .catch {
position: relative;
width: 264px;
margin: 0 auto; }
#wrap section.concept-box .l-box .catch img {
width: 100%;
height: auto; }
#wrap section.concept-box .l-box .lead {
position: relative;
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
text-orientation: upright;
text-align: left;
margin: 72px 0 0;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
line-height: 2.82;
font-size: 16px;
letter-spacing: 0.14em;
width: 410px;
height: 340px; }
#wrap section.concept-box .l-box .lead .indent {
margin-top: -8px; }
#wrap section.concept-box .r-box {
position: relative;
width: 54.5%; }
#wrap section.concept-box .r-box .image {
position: relative;
width: 100%; }
#wrap section.concept-box .r-box .image img {
width: 100%;
height: auto; }
#wrap section.concept-box .r-box .map {
position: relative;
margin-top: -110px;
width: 635px; }
#wrap section.concept-box .r-box .map .sp-box {
position: relative;
margin-right: 0px;
margin-left: auto;
width: 92.5%; }
#wrap section.concept-box .r-box .map .sp-box .catch {
width: 49.35%;
height: auto;
margin-right: 4.5%; }
#wrap section.concept-box .r-box .map .sp-box .map {
width: 44.15%;
height: auto;
margin-top: 0px; }
#wrap section.concept-box .r-box .map img {
width: 100%;
height: auto; }
#wrap section.contents-box {
position: relative;
width: 90%;
max-width: 1240px;
/* margin: 160px auto 0; */
margin-left: auto;
margin-right: auto;
}
#wrap section.contents-box ul {
position: relative;
width: 100%;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: left;
-ms-flex-pack: left;
justify-content: left; }
#wrap section.contents-box ul li {
position: relative;
width: 30.5%; }
#wrap section.contents-box ul li:nth-child(3n), #wrap section.contents-box ul li:nth-child(3n-1) {
margin-left: 4.25%; }
#wrap section.contents-box ul li:nth-child(n+4) {
margin-top: 86px; }
#wrap section.contents-box ul li .image {
border-radius: 3px;
overflow: hidden; }
#wrap section.contents-box ul li .image img {
width: 100%;
height: auto; }
#wrap section.contents-box ul li .text-box {
position: relative;
width: 90%;
margin: -25px auto 0;
background: #fff;
padding: 22px 20px 0;
box-sizing: border-box;
border-radius: 3px;
overflow: hidden; }
#wrap section.contents-box ul li .text-box h3 {
position: relative;
font-size: 14px;
font-weight: bold;
padding-left: 20px;
letter-spacing: 0.06em; }
#wrap section.contents-box ul li .text-box h3:before {
position: absolute;
content: "";
top: 5px;
left: 0px;
background: url("../img/ico_mark_contents.svg");
width: 14px;
height: 14px; }
#wrap section.contents-box ul li .text-box p {
font-size: 12px;
letter-spacing: 0.1em;
margin-top: 8px;
line-height: 2;
letter-spacing: 0.1em; }
#wrap section.contents-box .btn-more {
position: relative;
width: 380px;
height: 60px;
line-height: 59px;
border-radius: 3px;
border: #e3e7ea 1px solid;
box-sizing: border-box;
text-align: center;
margin: 90px auto 0;
letter-spacing: 0.1em; }
#wrap section.third-image {
position: relative;
width: 100%;
/* margin: 150px auto 0; */
margin-left: auto;
margin-right: auto;
}
#wrap section.third-image img {
width: 100%;
height: auto; }
#wrap section.works-box {
position: relative;
width: 100%; }
#wrap section.works-box .text-box {
width: 640px;
margin: 108px auto 0;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between; }
#wrap section.works-box .text-box .lead {
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
text-orientation: upright;
text-align: left;
line-height: 2.82;
font-size: 16px;
letter-spacing: 0.14em; }
#wrap section.works-box .text-box h2,
#wrap section.owners-voice .text-box h2 {
position: relative;
width: 108px; }
#wrap section.works-box .text-box h2 img {
width: 100%;
height: auto; }
#wrap section.works-box .works-box {
position: relative;
width: 90%;
max-width: 1240px;
margin: 80px auto 0;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap; }
#wrap section.works-box .works-box article {
position: relative;
width: 25%;
padding: 0 1px;
box-sizing: border-box; }
#wrap section.works-box .works-box article:nth-child(n+5) {
margin: 48px 0 0; }
#wrap section.works-box .works-box article:nth-child(4n) .image {
border-radius: 0 3px 3px 0;
overflow: hidden; }
#wrap section.works-box .works-box article:nth-child(4n-3) .image {
border-radius: 3px 0 0 3px;
overflow: hidden; }
#wrap section.works-box .works-box article .image {
width: 100%; }
#wrap section.works-box .works-box article .image img {
width: 100%;
height: auto; }
#wrap section.works-box .works-box article .text {
position: relative;
text-align: center;
font-size: 12px;
padding: 14px 10px 0;
letter-spacing: 0.1em; }
#wrap section.works-box .btn-more {
position: relative;
width: 380px;
height: 60px;
line-height: 59px;
border-radius: 3px;
border: #e3e7ea 1px solid;
box-sizing: border-box;
text-align: center;
margin: 90px auto 0;
letter-spacing: 0.1em; }
#wrap section.experience-box {
position: relative;
width: 100%;
padding: 174px 0 140px;
background: url("../img/bg_experience.jpg") no-repeat;
background-size: cover;
/* margin: 154px 0 0; */
}
#wrap section.experience-box h2 {
margin-bottom: inherit !important;
}
#wrap section.experience-box:before {
position: absolute;
content: "";
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5); }
#wrap section.experience-box .visual {
position: relative;
width: 100%; }
#wrap section.experience-box .visual img {
width: 100%;
height: auto; }
#wrap section.experience-box .container {
position: relative;
width: 960px;
margin: 0 auto;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between; }
#wrap section.experience-box .container .text-box {
-webkit-order: 2;
-ms-flex-order: 2;
order: 2;
width: 450px;
padding-left: 70px;
padding-top: 24px;
box-sizing: border-box;
color: #fff; }
#wrap section.experience-box .container .text-box h2 {
position: relative;
width: 336px; }
#wrap section.experience-box .container .text-box h2 img {
width: 100%;
height: auto; }
#wrap section.experience-box .container .text-box .text {
font-size: 12px;
margin: 40px 0 0;
line-height: 2.5;
text-align: justify;
letter-spacing: 0.1em; }
#wrap section.experience-box .container .image-box {
position: relative;
-webkit-order: 1;
-ms-flex-order: 1;
order: 1;
width: 510px; }
#wrap section.experience-box .container .image-box ul {
position: relative;
width: 100%;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between; }
#wrap section.experience-box .container .image-box ul li {
position: relative;
width: 245px;
border-radius: 3px;
overflow: hidden; }
#wrap section.experience-box .container .image-box ul li:nth-child(n+3) {
margin-top: 20px; }
#wrap section.experience-box .container .image-box ul li .image img {
width: 100%;
height: auto; }
#wrap section.experience-box .container .image-box ul li .text {
position: relative;
width: 100%;
background: #fff;
padding: 10px 0;
box-sizing: border-box;
font-weight: bold;
text-align: center;
letter-spacing: 0.1em; }
#wrap section.experience-box .container .image-box ul li .text p {
position: relative;
display: inline;
padding-left: 24px; }
#wrap section.experience-box .container .image-box ul li .text p:before {
position: absolute;
content: "";
top: 4px;
left: 0px;
background: url("../img/ico_mark_contents.svg") center center no-repeat;
background-size: 100% 100%;
width: 14px;
height: 14px; }
#wrap section.link-box {
position: relative;
width: 980px;
/* margin: 100px auto 0; */
margin-left: auto;
margin-right: auto;
}
#wrap section.link-box ul.bnr-box {
position: relative; }
#wrap section.link-box ul.bnr-box li {
position: relative;
width: 100%;
border-top: 1px solid #e3e7ea;
letter-spacing: 0.06em; }
#wrap section.link-box ul.bnr-box li:last-child {
border-bottom: 1px solid #e3e7ea; }
#wrap section.link-box ul.bnr-box li.catalog a {
position: relative;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
padding: 50px 0 40px; }
#wrap section.link-box ul.bnr-box li.catalog a .image {
/* width: 320px; 190930reright*/
width: 100%;
margin: 0 64px 0 84px; }
#wrap section.link-box ul.bnr-box li.catalog a .image img {
width: 100%;
height: auto; }
#wrap section.link-box ul.bnr-box li.catalog a .text-box {
position: relative;
padding: 24px 0 0; }
#wrap section.link-box ul.bnr-box li.catalog a .text-box h3 {
width: 340px; }
#wrap section.link-box ul.bnr-box li.catalog a .text-box h3 img {
width: 100%;
height: auto; }
#wrap section.link-box ul.bnr-box li.catalog a .text-box p {
position: relative;
margin: 16px 0 0;
font-size: 12px;
line-height: 2.1; }
#wrap section.link-box ul.bnr-box li.catalog a .text-box .btn-dl {
position: relative;
width: 270px;
height: 50px;
border-radius: 3px;
border: #e3e7ea 1px solid;
box-sizing: border-box;
text-align: center;
margin: 20px 0 0;
line-height: 46px;
transition: 0.2s all ease; }
/* mail ul */
#wrap section.link-box ul.bnr-box li.mail {
position: relative;
background: url("../img/bg_bnr_mail_2.jpg") no-repeat;
background-size: cover;
width: 980px;
height: 274px;
margin-bottom: 45px;
border-bottom: 1px solid #e3e7ea;
}
#wrap section.link-box ul.bnr-box li.mail a {
position: relative;
display: block;
width: 100%;
height: 100%; }
#wrap section.link-box ul.bnr-box li.mail a .text-box {
width: 352px;
margin: 0 auto;
padding-top: 45px; }
#wrap section.link-box ul.bnr-box li.mail a .text-box h3 {
width: 246px;
margin: 0 auto; }
#wrap section.link-box ul.bnr-box li.mail a .text-box h3 img {
width: 100%;
height: auto; }
#wrap section.link-box ul.bnr-box li.mail a .text-box p {
position: relative;
margin-top: 28px;
font-size: 10px;
text-align: center;
line-height: 2; }
/* mail ul */
#wrap section.link-box ul.bnr-box li.hint {
position: relative;
background: url("../img/bg_bnr_line.jpg") no-repeat;
background-size: cover;
width: 980px;
height: 274px;
}
#wrap section.link-box ul.bnr-box li.hint a {
position: relative;
display: block;
width: 100%;
height: 100%; }
#wrap section.link-box ul.bnr-box li.hint a .text-box {
width: 352px;
margin: 0 auto;
padding-top: 45px; }
#wrap section.link-box ul.bnr-box li.hint a .text-box h3 {
width: 246px;
margin: 0 auto; }
#wrap section.link-box ul.bnr-box li.hint a .text-box h3 img {
width: 100%;
height: auto; }
#wrap section.link-box ul.bnr-box li.hint a .text-box p {
position: relative;
margin-top: 28px;
font-size: 10px;
text-align: center;
line-height: 2; }
#wrap section.link-box ul.sns-box {
position: relative;
width: 100%;
margin: 60px 0 0;
border-top: 1px solid #e3e7ea;
border-bottom: 1px solid #e3e7ea;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
height: 66px; }
#wrap section.link-box ul.sns-box li {
position: relative;
width: 25%;
vertical-align: top;
text-align: center; }
#wrap section.link-box ul.sns-box li:nth-child(n+2):before {
position: absolute;
content: "";
top: 25px;
left: 0px;
width: 1px;
height: 15px;
background: #e3e7ea; }
#wrap section.link-box ul.sns-box li a {
position: relative;
width: 100%;
height: 66px;
display: block;
text-align: center; }
#wrap section.link-box ul.sns-box li.facebook img {
width: 110px;
height: auto; }
#wrap section.link-box ul.sns-box li.line img {
width: 72px;
height: auto; }
#wrap section.link-box ul.sns-box li.instagram img {
width: 106px;
height: auto; }
#wrap section.link-box ul.sns-box li.twitter img {
width: 102px;
height: auto; }
#wrap section.link-box ul.sns-box li.youtube {
padding-top: 0; }
#wrap section.link-box ul.sns-box li.youtube img {
width: 102px;
height: auto; }
#wrap section.link-box ul.sns-box li img {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%); }
#wrap section.news-box {
position: relative;
width: 980px;
margin: 160px auto 0;
letter-spacing: 0.1em; }
#wrap section.news-box h2 {
position: relative;
width: 126px;
margin: 0 auto; }
#wrap section.news-box ul {
position: relative;
width: 100%;
margin: 80px auto 0; }
#wrap section.news-box ul li {
border-top: #e3e7ea 1px solid; }
#wrap section.news-box ul li a {
position: relative;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
padding: 20px 20px 21px; }
#wrap section.news-box ul li a time {
display: block;
font-size: 11px;
color: #37536a;
letter-spacing: 0.18em;
width: 155px;
line-height: 2; }
#wrap section.news-box ul li a span.article-ttl {
display: block;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
letter-spacing: 0.1em;
font-size: 13px; }
#wrap section.news-box ul li:last-child {
border-bottom: #e3e7ea 1px solid; }
#wrap footer {
position: relative;
width: 100%;
background: #edeff1;
margin-top: 150px; }
#wrap footer ul.sitemap {
position: relative;
width: 980px;
margin: 0 auto;
color: #37536a;
padding: 68px 0 0;
display: -webkit-flex;
display: -ms-flexbox;
display: flex; }
#wrap footer ul.sitemap > li {
position: relative; }
#wrap footer ul.sitemap > li:nth-child(1) {
width: 230px; }
#wrap footer ul.sitemap > li:nth-child(2) {
width: 325px; }
#wrap footer ul.sitemap > li:nth-child(3) {
width: 290px; }
#wrap footer ul.sitemap > li:nth-child(4) {
width: 135px; }
#wrap footer ul.sitemap > li h2 {
position: relative;
font-size: 14px;
font-weight: bold;
padding-left: 20px; }
#wrap footer ul.sitemap > li h2 + h2 {
margin-top: 14px;
}
#wrap footer ul.sitemap > li h2 a {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
display: block; }
#wrap footer ul.sitemap > li h2:before {
position: absolute;
content: "";
top: 5px;
left: 0px;
width: 14px;
height: 14px;
background: url("../img/ico_mark_contents_navy.svg") no-repeat;
background-size: 100% 100%; }
#wrap footer ul.sitemap > li h2.open:before {
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg); }
#wrap footer ul.sitemap > li ul {
position: relative;
font-size: 12px;
margin: 16px 0 0; }
#wrap footer ul.sitemap > li ul.default-margin {
margin-top: 0;
}
#wrap footer ul.sitemap > li ul li {
position: relative;
padding-left: 10px;
box-sizing: border-box;
line-height: 1.7; }
#wrap footer ul.sitemap > li ul li a {
display: block; }
#wrap footer ul.sitemap > li ul li:not(:first-child) {
margin-top: 5px; }
#wrap footer ul.sitemap > li ul li:before {
position: absolute;
content: "";
top: 9px;
left: 0px;
width: 4px;
height: 1px;
background: #37536a; }
#wrap footer ul.sitemap > li ul li a {
color: #37536a; }
#wrap footer ul.sitemap > li ul li.blank:before {
display: none; }
#wrap footer .contact-box {
position: relative;
width: 980px;
height: 70px;
margin: 50px auto 0; }
#wrap footer .contact-box .container {
position: relative;
height: 100%;
background: #3e5d73;
border-radius: 3px;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between; }
#wrap footer .contact-box .container h2 {
position: relative;
top: 22px;
width: 60%;
text-align: center;
line-height: 1; }
#wrap footer .contact-box .container h2 img {
width: 360px;
height: 23px; }
#wrap footer .contact-box .container hr {
position: relative;
width: 92%;
margin: 14px auto 15px;
border: none;
height: 1px;
background: #788c9b; }
#wrap footer .contact-box .container .tel {
position: relative;
top: 23px;
width: 40%;
text-align: center; }
#wrap footer .contact-box .container .tel a {
display: block; }
#wrap footer .contact-box .container .tel:before {
position: absolute;
content: "";
top: 1px;
left: 0px;
width: 1px;
height: 20px;
background: #788c9b; }
#wrap footer .contact-box .container .tel img {
width: 254px;
height: 21px; }
#wrap footer .foot {
position: relative;
width: 100%;
background: #fff;
margin: 55px auto 0; }
#wrap footer .foot .foot-top {
position: relative;
width: 100%;
border-bottom: 1px solid #e3e7ea;
box-sizing: border-box; }
#wrap footer .foot .foot-top .container {
position: relative;
width: 980px;
margin: 0 auto;
padding: 35px 0 30px;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between; }
#wrap footer .foot .foot-top .container .co-info {
position: relative;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
display: -webkit-flex;
display: -ms-flexbox;
display: flex; }
#wrap footer .foot .foot-top .container .co-info .image {
width: 70px;
margin-right: 20px; }
#wrap footer .foot .foot-top .container .co-info .image img {
width: 100%;
height: auto; }
#wrap footer .foot .foot-top .container .co-info .text-box {
position: relative;
padding: 1px 0 0; }
#wrap footer .foot .foot-top .container .co-info .text-box h2 {
font-size: 15px;
font-weight: bold; }
#wrap footer .foot .foot-top .container .co-info .text-box address {
font-size: 11px;
letter-spacing: 0.1em; }
#wrap footer .foot .foot-top .container .co-info .text-box address p.address {
position: relative;
margin: 2px 0 0; }
#wrap footer .foot .foot-top .container .co-info .text-box address ol {
position: relative;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
margin: 2px 0 0; }
#wrap footer .foot .foot-top .container .co-info .text-box address ol li {
white-space: nowrap; }
#wrap footer .foot .foot-top .container .co-info .text-box address ol li:nth-child(n+2) {
margin-left: 12px; }
#wrap footer .foot .foot-top .container .bnr-box {
position: relative; }
#wrap footer .foot .foot-top .container .bnr-box ul {
display: -webkit-flex;
display: -ms-flexbox;
display: flex; }
#wrap footer .foot .foot-top .container .bnr-box ul li {
width: 210px; }
#wrap footer .foot .foot-top .container .bnr-box ul li:nth-child(n+2) {
margin-left: 10px; }
#wrap footer .foot .foot-top .container .bnr-box ul li img {
width: 100%;
height: auto; }
#wrap footer .foot .foot-bottom {
position: relative;
width: 100%; }
#wrap footer .foot .foot-bottom .container {
position: relative;
width: 980px;
height: 63px;
margin: 0 auto;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between; }
#wrap footer .foot .foot-bottom .container ul.nav {
position: relative;
font-size: 10px;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
top: 23px; }
#wrap footer .foot .foot-bottom .container ul.nav li {
position: relative;
line-height: 1; }
#wrap footer .foot .foot-bottom .container ul.nav li:nth-child(n+2) {
margin-left: 20px;
letter-spacing: 0em; }
#wrap footer .foot .foot-bottom .container p.copyright {
position: relative;
width: 253px;
top: 24px;
right: -8px; }
#wrap footer .foot .foot-bottom .container p.copyright img {
width: 100%;
height: auto; }
body.secondary-page #wrap header {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
max-width: none;
z-index: 100;
display: block;
min-width: 1024px; }
body.secondary-page #wrap header h1, body.secondary-page #wrap header .logo {
position: relative;
top: 35px;
left: 50px;
margin: 0;
width: 190px;
transition: 0.4s all cubic-bezier(0.215, 0.61, 0.355, 1); }
body.secondary-page #wrap header h1 a, body.secondary-page #wrap header .logo a {
position: relative;
width: 190px; }
body.secondary-page #wrap header h1 img, body.secondary-page #wrap header .logo img {
width: 190px;
height: auto; }
body.secondary-page #wrap header h1 img[src$=".svg"], body.secondary-page #wrap header .logo img[src$=".svg"] {
width: 100%;
height: auto; }
body.secondary-page #wrap header nav {
position: absolute;
right: 50px;
padding-top: 10px;
transition: 0.4s all cubic-bezier(0.215, 0.61, 0.355, 1); }
body.secondary-page #wrap header:before {
position: absolute;
content: "";
width: 100%;
height: 75px;
background: #fff; }
body.secondary-page #wrap header.scroll h1, body.secondary-page #wrap header.scroll .logo {
-webkit-transform: translate(-5px, -10px);
-ms-transform: translate(-5px, -10px);
transform: translate(-5px, -10px); }
body.secondary-page #wrap header.scroll nav {
-webkit-transform: translate(5px, -11px);
-ms-transform: translate(5px, -11px);
transform: translate(5px, -11px); }
body.secondary-page #wrap main {
display: block; }
body.secondary-page nav.nav-sp {
position: fixed; }
body.secondary-page nav.nav-sp > .container {
margin: 60px 0 0; }
body.secondary-page nav.nav-sp > .logo {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 60px;
text-align: center;
padding-top: 20px;
border-bottom: #e3e7ea 1px solid;
box-sizing: border-box;
background: #fff; }
body.secondary-page nav.nav-sp > .logo a img {
width: 154px;
height: auto; }
body.secondary-page nav.nav-sp .btn-nav span {
background: #000; }
#wrap.case main > .works-box .text-box {
width: 108px;
margin: 204px auto 0; }
#wrap.case main > .works-box .btn-more {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }
#wrap.case-detail main .ttl-box {
width: 980px;
margin: 140px auto 0; }
#wrap.case-detail main .ttl-box h2 {
font-size: 27px;
font-weight: bold;
letter-spacing: 0.15em; }
#wrap.case-detail main section.main {
margin: 24px 0 0;
width: 100%;
padding: 0; }
#wrap.case-detail main section.main .image-box {
width: 100%; }
#wrap.case-detail main section.main .image-box .image {
width: 100%; }
#wrap.case-detail main section.main .image-box .image img {
width: 100%;
height: auto; }
#wrap.case-detail main section.main .image-box .caption {
width: 100%;
font-size: 10px;
text-align: right;
margin: 14px 0 0;
padding-right: 20px;
box-sizing: border-box;
letter-spacing: 0.1em; }
#wrap.case-detail main section.main .image-box .caption b {
display: inline-block;
margin-right: 4px;
font-weight: bold; }
#wrap.case-detail main section.main .text-box {
padding: 68px 0 0px;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
width: 100%; }
#wrap.case-detail main section.main .text-box h3 {
font-weight: bold;
font-size: 36px;
-webkit-order: 2;
-ms-flex-order: 2;
order: 2;
margin-left: 44px;
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
text-orientation: upright;
text-align: left;
letter-spacing: 0.1em;
line-height: 1.7; }
#wrap.case-detail main section.main .text-box p {
font-size: 12px;
-webkit-order: 1;
-ms-flex-order: 1;
order: 1;
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
text-orientation: upright;
text-align: left;
height: 300px;
line-height: 2.5;
letter-spacing: 0.06em; }
#wrap.case-detail main .works-image {
position: relative; }
#wrap.case-detail main .works-image.yoko-l {
max-width: 1240px;
width: 90%;
margin: 168px auto 0; }
#wrap.case-detail main .works-image.yoko-m-l {
width: 750px;
margin: 168px auto 0 10%; }
#wrap.case-detail main .works-image.yoko-m-r {
width: 750px;
margin: 168px 10% 0 auto; }
#wrap.case-detail main .works-image.set-tate-yoko-l {
width: 90%;
max-width: 1240px;
margin: 168px auto 0; }
#wrap.case-detail main .works-image.set-tate-yoko-l .image-tate {
position: relative;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 100%; }
#wrap.case-detail main .works-image.set-tate-yoko-l .image-tate .image {
width: 51%;
margin: 0 auto 0 0; }
#wrap.case-detail main .works-image.set-tate-yoko-l .image-tate .text {
position: relative;
width: 49%;
text-align: center; }
#wrap.case-detail main .works-image.set-tate-yoko-l .image-tate .text p {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
text-orientation: upright;
text-align: left;
font-size: 22px;
line-height: 2.5;
letter-spacing: 0.1em; }
#wrap.case-detail main .works-image.set-tate-yoko-l .image-yoko {
width: 38%;
margin: -120px 4% 0 auto; }
#wrap.case-detail main .works-image.set-tate-yoko-r {
width: 90%;
max-width: 1240px;
margin: 168px auto 0; }
#wrap.case-detail main .works-image.set-tate-yoko-r .image-tate {
position: relative;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 100%; }
#wrap.case-detail main .works-image.set-tate-yoko-r .image-tate .image {
width: 51%;
margin: 0 auto 0 0; }
#wrap.case-detail main .works-image.set-tate-yoko-r .image-tate .text {
position: relative;
width: 49%;
text-align: center; }
#wrap.case-detail main .works-image.set-tate-yoko-r .image-tate .text p {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
text-orientation: upright;
text-align: left;
font-size: 22px;
line-height: 2.5;
letter-spacing: 0.1em; }
#wrap.case-detail main .works-image.set-tate-yoko-r .image-yoko {
width: 38%;
margin: -120px auto 0 4%; }
#wrap.case-detail main .works-image img {
width: 100%;
height: auto; }
#wrap.case-detail main .works-image.yoko-wide {
width: 100%;
margin: 168px auto 0; }
#wrap.case-detail main .works-movie {
position: relative;
margin: 168px auto 0;
width: 100%;
cursor: pointer; }
#wrap.case-detail main .works-movie .bg-box {
background: #000;
width: 100%;
overflow: hidden; }
#wrap.case-detail main .works-movie .bg-box img {
width: 100%;
height: auto;
opacity: 0.8;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
transition: 0.2s all ease; }
#wrap.case-detail main .works-movie p.btn {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%); }
#wrap.case-detail main .works-copy {
position: relative;
width: 100%;
height: 520px;
margin: 168px auto 0;
text-align: center; }
#wrap.case-detail main .works-copy .text {
display: inline-block;
height: 100%; }
#wrap.case-detail main .works-copy .text p {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
text-orientation: upright;
text-align: left;
font-size: 22px;
line-height: 2.5;
letter-spacing: 0.1em; }
#wrap.case-detail main .googlemaps {
width: 1048px;
margin: 150px auto 0; }
#wrap.case-detail main .googlemaps .map-container {
width: 1048px;
height: 600px;
margin: 0 auto; }
#wrap.case-detail main .googlemaps .map-container iframe {
width: 100%;
height: 100%; }
#wrap.case-detail main .googlemaps .map-container:first-child {
margin-top: 0px; }
#wrap.case-detail main .googlemaps p.caption {
font-size: 10px;
margin: 16px 0 0; }
#wrap.case-detail main .googlemaps p.caption span {
font-weight: bold; }
#wrap.case-detail main .btn-showhome {
position: relative;
width: 380px;
height: 60px;
line-height: 59px;
border-radius: 3px;
border: #e3e7ea 1px solid;
box-sizing: border-box;
text-align: center;
margin: 90px auto 0;
letter-spacing: 0.1em; }
#wrap.case-detail main section.works-box {
margin: 140px auto 0; }
#wrap.case-detail main section.works-box .text-box {
text-align: center;
display: block; }
#wrap.case-detail main section.works-box .text-box h2 {
width: auto;
font-size: 34px;
font-weight: bold;
letter-spacing: 0.12em; }
#wrap.case-detail main section.works-box .works-box {
margin: 54px auto 0; }
nav.nav-sp {
position: fixed;
top: 0px;
left: 0px;
width: 100%; }
nav.nav-sp > .container {
position: relative;
width: 100%;
min-height: 100vh;
background: #fff;
display: none; }
nav.nav-sp > .container .logo {
width: 100%;
height: 60px;
text-align: center;
padding-top: 20px;
border-bottom: #e3e7ea 1px solid;
box-sizing: border-box; }
nav.nav-sp > .container .logo a img {
width: 154px;
height: auto; }
nav.nav-sp > .container ul.nav {
position: relative;
width: 100%; }
nav.nav-sp > .container ul.nav > li {
position: relative;
width: 100%;
padding: 20px 0 20px 45px;
border-bottom: #e3e7ea 1px solid;
box-sizing: border-box; }
nav.nav-sp > .container ul.nav > li h2 {
position: relative;
font-size: 14px;
font-weight: bold; }
nav.nav-sp > .container ul.nav > li h2:before {
position: absolute;
content: "";
top: 5px;
left: -22px;
background: url("../img/ico_sp_nav_arrow.svg");
width: 14px;
height: 14px; }
nav.nav-sp > .container ul.nav > li h2.open:before {
-webkit-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
transform: rotate(-180deg); }
nav.nav-sp > .container ul.nav > li ul.sitemap-li {
position: relative;
margin-top: 7px;
display: none; }
nav.nav-sp > .container ul.nav > li ul.sitemap-li li {
position: relative;
font-size: 11px;
line-height: 2.6;
padding-left: 9px;
color: #323232; }
nav.nav-sp > .container ul.nav > li ul.sitemap-li li:before {
position: absolute;
content: "";
top: 13px;
left: 1px;
width: 4px;
height: 1px;
background: #37536a; }
nav.nav-sp > .container .contact-box {
position: relative;
width: 100%;
padding: 20px 22px 20px 22px;
box-sizing: border-box; }
nav.nav-sp > .container .contact-box .container {
position: relative;
width: 100%;
background: #3e5d73;
border-radius: 3px;
text-align: center;
padding: 20px 0 10px; }
nav.nav-sp > .container .contact-box .container h2 {
width: 250px;
margin: 0 auto;
line-height: 1; }
nav.nav-sp > .container .contact-box .container h2 img {
width: 100%;
height: auto;
line-height: 1; }
nav.nav-sp > .container .contact-box .container hr {
position: relative;
width: 92%;
margin: 14px auto;
border: none;
height: 1px;
background: #788c9b; }
nav.nav-sp > .container .contact-box .container .tel {
width: 222px;
margin: 0 auto; }
nav.nav-sp > .logo-top {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 60px;
text-align: center;
padding-top: 20px;
border-bottom: #e3e7ea 1px solid;
box-sizing: border-box;
background: #fff; }
nav.nav-sp > .logo-top a img {
width: 154px;
height: auto; }
nav.nav-sp > .logo-top[data-scrollflag=false] {
transition: 0.2s all ease;
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
visibility: hidden; }
nav.nav-sp > .logo-top[data-scrollflag=false].scroll {
visibility: visible;
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
transition: 0.2s all ease;
transition-delay: 0ms; }
nav.nav-sp .btn-nav {
position: absolute;
top: 0px;
right: 0px;
height: 60px;
width: 60px;
background: transparent;
cursor: pointer; }
nav.nav-sp .btn-nav span {
position: absolute;
display: block;
width: 24px;
height: 1px;
background: #fff;
top: 50%;
left: 50%;
margin-top: -4px;
margin-left: -12px;
transition: 0.2s all ease; }
nav.nav-sp .btn-nav span:nth-child(2) {
margin-top: 2px; }
nav.nav-sp .btn-nav.active span:first-child {
-webkit-transform: translateY(3px) rotate(45deg);
-ms-transform: translateY(3px) rotate(45deg);
transform: translateY(3px) rotate(45deg);
background: #000; }
nav.nav-sp .btn-nav.active span:nth-child(2) {
-webkit-transform: translateY(-3px) rotate(-45deg);
-ms-transform: translateY(-3px) rotate(-45deg);
transform: translateY(-3px) rotate(-45deg);
background: #000; }
nav.nav-sp .btn-nav.scroll span {
background: #000; }
#youtube {
display: none;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 1005; }
#youtube .cover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
opacity: 0.9;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
cursor: pointer; }
#youtube .box {
position: absolute;
top: 50%;
left: 50%;
width: 980px;
height: 550px;
margin-left: -490px;
margin-top: -275px;
background-color: #000; }
#youtube .box .player {
width: 980px;
height: 550px; }
#youtube .btn-close {
position: absolute;
top: 20px;
right: 20px;
width: 40px;
height: 40px;
cursor: pointer;
transition: all 0.1s ease; }
#youtube .btn-close img {
width: 100%;
height: auto; }
#loading {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%; }
#loading .cover {
position: fixed;
top: 0;
left: 0px;
width: 100%;
height: 100%;
background: #fff; }
#loading .image {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 50px; }
#loading .image img {
width: 100%;
height: auto;
-webkit-animation: spin 0.5s linear infinite;
animation: spin 0.5s linear infinite;
opacity: 0.6;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; }
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg); }
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg); } }
@keyframes spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg); }
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg); } }
@media screen and (max-width: 768px){
.pc{
display: none !important; }
.sp{
display: block !important; }
#wrap{
min-width: 0;
background: #fff; }
#wrap section.main{
padding: 0px; }
#wrap section.main .main-box .slider-box{
background: #fff; }
#wrap section.main .main-box .slider-box article{
height: auto; }
#wrap section.main .main-box .slider-box article .image{
background: none;
border-radius: 0;
height: auto; }
#wrap section.main .main-box .slider-box article .text-box{
position: relative;
background: #fff;
bottom: auto;
right: auto;
width: 100%;
padding: 43px 22px 32px 22px;
z-index: auto; }
#wrap section.main .main-box .slider-box article .text-box h2{
text-align: center;
font-size: 21px;
line-height: 1.7; }
#wrap section.main .main-box .slider-box article .text-box p{
margin: 10px 0px 0px;
text-align: center;
line-height: 2.3; }
#wrap section.main .nav-dot{
top: calc(97.333vw + 18px);
right: 8px; }
#wrap section.main .nav-dot li{
width: 12px; }
#wrap section.main .nav-dot li .line{
display: none;
visibility: hidden; }
#wrap section.main .nav-dot li:before{
background: #e3e7ea;
-webkit-transform: scale(0.6);
-ms-transform: scale(0.6);
transform: scale(0.6); }
#wrap section.main .nav-dot li.active:before{
background: #2d546c;
-webkit-transform: scale(0.75);
-ms-transform: scale(0.75);
transform: scale(0.75); }
#wrap header{
display: none; }
#wrap section.concept-box{
/* margin-top: 60px; */
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
/* margin-top: 44px; */
}
#wrap section.concept-box .l-box{
-webkit-order: 2;
-ms-flex-order: 2;
order: 2;
width: 100%;
padding: 0 22px;
box-sizing: border-box; }
#wrap section.concept-box .l-box .lead{
-webkit-writing-mode: horizontal-tb;
-ms-writing-mode: lr-tb;
writing-mode: horizontal-tb;
margin: 20px auto 0;
font-size: 12px;
line-height: 2.5;
letter-spacing: 0.06em;
text-align: justify;
width: auto;
height: auto;
left: auto;
-webkit-transform: none;
-ms-transform: none;
transform: none; }
#wrap section.concept-box .l-box .lead br {
display: none;
}
#wrap section.concept-box .r-box{
-webkit-order: 1;
-ms-flex-order: 1;
order: 1;
width: 100%;
padding: 0 22px;
box-sizing: border-box; }
#wrap section.concept-box .r-box .image{
border-radius: 3px;
overflow: hidden; }
#wrap section.concept-box .r-box .map{
width: 100%;
margin-top: 30px; }
#wrap section.contents-box{
width: 100%;
padding: 0 22px;
box-sizing: border-box;
margin: 40px auto 0; }
#wrap section.contents-box ul li{
width: 47.5%; }
#wrap section.contents-box ul li:nth-child(3n), #wrap section.contents-box ul li:nth-child(3n-1){
margin-left: 0%; }
#wrap section.contents-box ul li:nth-child(2n){
margin-left: 5%; }
#wrap section.contents-box ul li:nth-child(n+3){
margin-top: 28px; }
#wrap section.contents-box ul li:nth-child(n+4){
margin-top: 28px; }
#wrap section.contents-box ul li .text-box{
width: 100%;
margin: 17px auto 0;
padding: 0; }
#wrap section.contents-box ul li .text-box h3{
font-size: 12px;
padding-left: 19px; }
#wrap section.contents-box ul li .text-box h3:before{
top: 4px; }
#wrap section.contents-box ul li .text-box p{
font-size: 11px;
line-height: 2.2;
text-align: justify; }
#wrap section.contents-box .btn-more{
width: 100%;
height: 48px;
line-height: 45px;
font-size: 12px;
margin: 40px auto 0; }
#wrap section.third-image{
/* margin: 50px auto 0; */
margin-left: auto;
margin-right: auto;
}
#wrap section.works-box .text-box{
width: 100%;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin: 30px auto 0;
padding: 0 22px;
box-sizing: border-box; }
#wrap section.works-box .text-box .lead{
width: 100%;
-webkit-order: 2;
-ms-flex-order: 2;
order: 2;
-webkit-writing-mode: horizontal-tb;
-ms-writing-mode: lr-tb;
writing-mode: horizontal-tb;
font-size: 12px;
line-height: 2.5;
margin: 16px 0 0;
text-align: justify;
letter-spacing: 0.05em; }
#wrap section.works-box .text-box .lead br {
display: none;
}
#wrap section.works-box .text-box h2{
-webkit-order: 1;
-ms-flex-order: 1;
order: 1;
width: 66px;
margin: 0 auto; }
#wrap section.works-box .works-box{
width: 100%;
max-width: none;
margin: 50px auto 0;
display: block;
white-space: nowrap;
overflow: scroll;
letter-spacing: -0.4em;
font-size: 0;
margin-top: 40;
}
#wrap section.works-box .works-box article{
width: 70.666%;
display: inline-block;
padding: 0 3px 0 0; }
#wrap section.works-box .works-box article:nth-child(n+5){
margin: 0; }
#wrap section.works-box .works-box article:first-child{
margin-left: 14.667%; }
#wrap section.works-box .works-box article:last-child{
margin-right: 14.667%; }
#wrap section.works-box .works-box article .text{
padding: 22px 10px 0;
font-size: 10px; }
#wrap section.works-box .btn-more{
width: calc(100% - 44px);
height: 48px;
line-height: 45px;
font-size: 12px;
margin: 40px auto 0; }
#wrap section.experience-box{
background: none;
padding: 0;
/* margin: 50px 0 0; */
}
#wrap section.experience-box:before{
display: none; }
#wrap section.experience-box .container{
width: 100%;
margin: 30px auto 0;
padding: 0 22px;
box-sizing: border-box;
display: block; }
#wrap section.experience-box .container .text-box{
width: 100%;
color: #000;
padding: 0; }
#wrap section.experience-box .container .text-box h2{
width: 220px;
margin: 0 auto; }
#wrap section.experience-box .container .text-box .text{
margin: 30px 0 0; }
#wrap section.experience-box .container .image-box{
width: 100%;
margin: 40px 0 0; }
#wrap section.experience-box .container .image-box ul li{
width: 47.5%;
border-radius: 0; }
#wrap section.experience-box .container .image-box ul li:nth-child(n+3){
margin-top: 28px; }
#wrap section.experience-box .container .image-box ul li .image{
border-radius: 3px;
overflow: hidden; }
#wrap section.experience-box .container .image-box ul li .text{
text-align: left;
font-size: 12px;
padding: 0;
margin-top: 20px; }
#wrap section.experience-box .container .image-box ul li .text p{
padding-left: 20px; }
#wrap section.experience-box .container .image-box ul li .text p:before{
top: 2px; }
#wrap section.link-box{
width: 100%;
padding: 0 22px;
box-sizing: border-box;
margin: 50px auto 0; }
#wrap section.link-box ul.bnr-box li:last-child{
border-bottom: 0; }
#wrap section.link-box ul.bnr-box li.catalog a{
display: block;
padding: 28px 0 40px; }
#wrap section.link-box ul.bnr-box li.catalog a .image{
/* width: 220px; 190930reright */
width: 100%;
margin: 0 auto; }
#wrap section.link-box ul.bnr-box li.catalog a .text-box{
padding: 0;
margin: 20px 0 0; }
#wrap section.link-box ul.bnr-box li.catalog a .text-box h3{
width: 252px;
margin: 0 auto; }
#wrap section.link-box ul.bnr-box li.catalog a .text-box p{
margin: 16px 0 0;
text-align: center; }
#wrap section.link-box ul.bnr-box li.catalog a .text-box .btn-dl{
width: 100%;
height: 48px;
line-height: 45px;
font-size: 12px;
margin: 16px auto 0; }
/* mail li */
#wrap section.link-box ul.bnr-box li.mail{
width: 100%;
height: auto;
background: none;
padding: 32px 0 10px;
margin-bottom: 0;
}
#wrap section.link-box ul.bnr-box li.mail a .image{
width: 100%; }
#wrap section.link-box ul.bnr-box li.mail a .image img{
width: 100%;
height: auto; }
#wrap section.link-box ul.bnr-box li.mail a .text-box{
width: 100%;
height: auto;
background: none;
padding: 0;
margin: 34px auto; }
#wrap section.link-box ul.bnr-box li.mail a .text-box h3{
width: 196px; }
#wrap section.link-box ul.bnr-box li.mail a .text-box p{
margin-top: 22px;
font-size: 11px;
line-height: 2.3; }
/* mail li */
#wrap section.link-box ul.bnr-box li.hint{
width: 100%;
height: auto;
background: none;
padding: 32px 0 10px; }
#wrap section.link-box ul.bnr-box li.hint a .image{
width: 100%; }
#wrap section.link-box ul.bnr-box li.hint a .image img{
width: 100%;
height: auto; }
#wrap section.link-box ul.bnr-box li.hint a .text-box{
width: 100%;
height: auto;
background: none;
padding: 0;
margin: 34px auto; }
#wrap section.link-box ul.bnr-box li.hint a .text-box h3{
width: 196px; }
#wrap section.link-box ul.bnr-box li.hint a .text-box p{
margin-top: 22px;
font-size: 11px;
line-height: 2.3; }
#wrap section.link-box ul.sns-box{
margin: 0; }
#wrap section.link-box ul.sns-box li.facebook img{
width: 20px;
margin: 0 auto; }
#wrap section.link-box ul.sns-box li.line img{
width: 20px;
margin: 0 auto; }
#wrap section.link-box ul.sns-box li.instagram img{
width: 20px;
margin: 0 auto; }
#wrap section.link-box ul.sns-box li.twitter img{
width: 20px;
margin: 0 auto; }
#wrap section.link-box ul.sns-box li.youtube img{
width: 20px;
margin: 0 auto; }
#wrap section.news-box{
width: 100%;
margin: 60px auto 0;
padding: 0 22px;
box-sizing: border-box; }
#wrap section.news-box h2{
width: 108px; }
#wrap section.news-box ul{
margin: 44px auto 0; }
#wrap section.news-box ul li a{
padding: 20px 0px 21px; }
#wrap section.news-box ul li a time{
font-size: 9px;
width: 92px;
line-height: 2.2; }
#wrap section.news-box ul li a span.article-ttl{
font-size: 11px; }
#wrap footer{
margin-top: 60px; }
#wrap footer ul.sitemap{
width: 100%;
display: block;
padding: 0; }
#wrap footer ul.sitemap > li:last-child{
border-bottom: 1px #fff solid; }
#wrap footer ul.sitemap > li:nth-child(n+2){
border-top: 1px #fff solid; }
#wrap footer ul.sitemap > li:nth-child(1){
width: 100%; }
#wrap footer ul.sitemap > li:nth-child(2){
width: 100%; }
#wrap footer ul.sitemap > li:nth-child(3){
width: 100%; }
#wrap footer ul.sitemap > li:nth-child(4){
width: 100%; }
#wrap footer ul.sitemap > li h2 a{
display: none; }
#wrap footer ul.sitemap>li h2.no-child-menu a {
display: block;
}
#wrap footer ul.sitemap > li h2{
position: relative;
padding-left: 0px;
padding: 17px 22px 17px 44px; }
#wrap footer ul.sitemap>li h2 + h2 {
margin-top: 0;
border-top: 1px #fff solid;
}
#wrap footer ul.sitemap > li h2:before{
left: 24px;
top: 22px;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg); }
#wrap footer ul.sitemap > li ul{
padding: 0px 22px 17px 44px;
margin: 0;
display: none; }
#wrap footer .contact-box{
width: 100%;
padding: 0px 22px 0px 22px;
box-sizing: border-box;
height: auto;
margin: 20px auto 0; }
#wrap footer .contact-box .container{
display: block;
padding: 19px 0 18px; }
#wrap footer .contact-box .container h2{
width: 100%;
top: 0px;
line-height: 1; }
#wrap footer .contact-box .container h2 img{
width: 245px;
height: auto; }
#wrap footer .contact-box .container .tel{
width: 100%;
top: 0px;
line-height: 1; }
#wrap footer .contact-box .container .tel:before{
display: none; }
#wrap footer .contact-box .container .tel img{
width: 220px;
height: auto; }
#wrap footer .foot{
margin: 20px auto 0; }
#wrap footer .foot .foot-top .container{
width: 100%;
display: block;
text-align: center;
padding: 24px 0 25px; }
#wrap footer .foot .foot-top .container .co-info{
display: block; }
#wrap footer .foot .foot-top .container .co-info .image{
width: 50px;
margin: 0 auto; }
#wrap footer .foot .foot-top .container .co-info .text-box{
margin: 14px auto 0; }
#wrap footer .foot .foot-top .container .co-info .text-box address{
margin: 6px auto 0; }
#wrap footer .foot .foot-top .container .co-info .text-box address ol{
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
width: 280px;
margin: 3px auto 0; }
#wrap footer .foot .foot-top .container .bnr-box{
width: 100%;
padding: 0 22px;
box-sizing: border-box;
margin: 24px 0 0; }
#wrap footer .foot .foot-top .container .bnr-box ul{
display: block; }
#wrap footer .foot .foot-top .container .bnr-box ul li{
width: 100%; }
#wrap footer .foot .foot-top .container .bnr-box ul li:nth-child(n+2){
margin: 18px 0 0; }
#wrap footer .foot .foot-bottom .container{
width: 100%;
padding: 24px 0px;
box-sizing: border-box;
display: block;
height: auto;
text-align: center; }
#wrap footer .foot .foot-bottom .container ul.nav{
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
top: 0px;
padding: 0 20px;
box-sizing: border-box; }
#wrap footer .foot .foot-bottom .container ul.nav li{
margin: 0 10px; }
#wrap footer .foot .foot-bottom .container ul.nav li:nth-child(n+2){
margin: 0 10px 10px; }
#wrap footer .foot .foot-bottom .container p.copyright{
width: 242px;
margin: 16px auto 0;
top: 0px;
right: auto;
line-height: 1; }
body.secondary-page #wrap header{
display: none; }
#wrap.case main > .works-box .text-box{
margin: 115px auto 0;
padding: 0; }
#wrap.case main > .works-box .text-box h2{
width: 70px; }
#wrap.case main > .works-box > .works-box{
overflow: hidden;
margin: 46px auto 0; }
#wrap.case main > .works-box > .works-box article{
display: block;
margin: 0 auto;
width: 89%; }
#wrap.case main > .works-box > .works-box article:nth-child(n+2){
margin: 40px auto 0; }
#wrap.case main > .works-box > .works-box article:nth-child(n+2) a .image{
border-radius: 3px;
overflow: hidden; }
#wrap.case main > .works-box > .works-box article a .image{
border-radius: 3px; }
#wrap.case main > .works-box > .works-box article a .text{
padding: 18px 10px 0;
font-size: 12px; }
#wrap.case-detail main .ttl-box{
margin: 80px auto 0;
width: 100%; }
#wrap.case-detail main .ttl-box h2{
text-align: center;
font-size: 22px; }
#wrap.case-detail main section.main .image-box .caption{
text-align: center;
padding-right: 0px;
margin: 16px 0 0;
line-height: 1.9; }
#wrap.case-detail main section.main .text-box{
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding: 5px 0 20px; }
#wrap.case-detail main section.main .text-box h3{
-webkit-writing-mode: horizontal-tb;
-ms-writing-mode: lr-tb;
writing-mode: horizontal-tb;
margin: 22px auto 0;
text-align: center;
-webkit-order: 1;
-ms-flex-order: 1;
order: 1;
font-size: 21px; }
#wrap.case-detail main section.main .text-box p{
-webkit-writing-mode: horizontal-tb;
-ms-writing-mode: lr-tb;
writing-mode: horizontal-tb;
margin: 20px auto 0;
text-align: justify;
-webkit-order: 2;
-ms-flex-order: 2;
order: 2;
padding: 0 22px;
box-sizing: border-box;
height: auto; }
#wrap.case-detail main .works-image.yoko-l{
width: 100%;
margin: 26px auto 0;
padding: 0 22px;
box-sizing: border-box; }
#wrap.case-detail main .works-image.yoko-m-l{
width: 100%;
margin: 26px auto 0;
padding: 0 22px;
box-sizing: border-box; }
#wrap.case-detail main .works-image.yoko-m-r{
width: 100%;
margin: 26px auto 0;
padding: 0 22px;
box-sizing: border-box; }
#wrap.case-detail main .works-image.set-tate-yoko-l{
width: 100%;
margin: 26px auto 0;
padding: 0 22px;
box-sizing: border-box; }
#wrap.case-detail main .works-image.set-tate-yoko-l .image-tate{
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap; }
#wrap.case-detail main .works-image.set-tate-yoko-l .image-tate .image{
width: 100%; }
#wrap.case-detail main .works-image.set-tate-yoko-l .image-tate .text{
width: 100%; }
#wrap.case-detail main .works-image.set-tate-yoko-l .image-tate .text p{
position: relative;
-webkit-writing-mode: horizontal-tb;
-ms-writing-mode: lr-tb;
writing-mode: horizontal-tb;
margin: 14px auto 0;
text-align: center;
-webkit-order: 2;
-ms-flex-order: 2;
order: 2;
box-sizing: border-box;
font-size: 12px;
line-height: 1.9;
padding-bottom: 28px; }
#wrap.case-detail main .works-image.set-tate-yoko-l .image-yoko{
width: 100%;
margin: 26px auto 0; }
#wrap.case-detail main .works-image.set-tate-yoko-r{
width: 100%;
margin: 26px auto 0;
padding: 0 22px;
box-sizing: border-box; }
#wrap.case-detail main .works-image.set-tate-yoko-r .image-tate{
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap; }
#wrap.case-detail main .works-image.set-tate-yoko-r .image-tate .image{
width: 100%;
-webkit-order: 1;
-ms-flex-order: 1;
order: 1; }
#wrap.case-detail main .works-image.set-tate-yoko-r .image-tate .text{
width: 100%;
-webkit-order: 2;
-ms-flex-order: 2;
order: 2; }
#wrap.case-detail main .works-image.set-tate-yoko-r .image-tate .text p{
position: relative;
-webkit-writing-mode: horizontal-tb;
-ms-writing-mode: lr-tb;
writing-mode: horizontal-tb;
margin: 14px auto 0;
text-align: center;
box-sizing: border-box;
font-size: 12px;
line-height: 1.9;
padding-bottom: 28px; }
#wrap.case-detail main .works-image.set-tate-yoko-r .image-yoko{
width: 100%;
margin: 26px auto 0; }
#wrap.case-detail main .works-image.yoko-wide{
width: 100%;
margin: 26px auto 0; }
#wrap.case-detail main .works-movie{
margin: 40px auto 0;
height: auto; }
#wrap.case-detail main .works-movie p.btn img{
width: 50px;
height: 50px; }
#wrap.case-detail main .works-copy{
margin: 0px auto 0;
height: auto; }
#wrap.case-detail main .works-copy .text{
display: block;
height: auto; }
#wrap.case-detail main .works-copy .text p{
top: 0px;
-webkit-transform: none;
-ms-transform: none;
transform: none;
position: relative;
-webkit-writing-mode: horizontal-tb;
-ms-writing-mode: lr-tb;
writing-mode: horizontal-tb;
margin: 130px auto;
text-align: center;
font-size: 12px;
line-height: 1.9; }
#wrap.case-detail main .googlemaps{
width: 100%;
margin: 40px auto 0; }
#wrap.case-detail main .googlemaps .map-container{
width: 100%;
height: 250px; }
#wrap.case-detail main .googlemaps p.caption{
text-align: center; }
#wrap.case-detail main .btn-showhome{
width: 88%;
height: 48px;
line-height: 45px;
font-size: 12px;
margin: 40px auto 0; }
#wrap.case-detail main section.works-box{
margin: 40px auto 0; }
#wrap.case-detail main section.works-box .text-box h2{
font-size: 21px; }
#wrap.case-detail main section.works-box .works-box{
margin: 26px auto 0; }
#youtube .box{
width: 100%;
height: 240px;
margin-left: -50%;
margin-top: -120px; }
#youtube .box .player{
width: 100%;
height: 100%; }
#youtube .btn-close{
width: 32px;
height: 32px;
top: 10px;
right: 10px; }
#loading .image{
width: 44px; } }
@media screen and (min-width: 769px){
#wrap header nav ul li{
transition: 0.2s all ease; }
#wrap header nav ul li:hover{
opacity: 0.7;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; }
#wrap section.contents-box ul li{
transition: 0.2s all ease; }
#wrap section.contents-box ul li:hover{
opacity: 0.7;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; }
#wrap section.contents-box .btn-more{
transition: 0.2s all ease; }
#wrap section.contents-box .btn-more a{
display: block;
transition: 0.2s all ease; }
#wrap section.contents-box .btn-more:hover{
border: #3e5d73 1px solid;
background: #3e5d73; }
#wrap section.contents-box .btn-more:hover a{
color: #fff; }
#wrap section.works-box .works-box article{
transition: 0.2s all ease; }
#wrap section.works-box .works-box article:hover{
opacity: 0.7;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; }
#wrap section.works-box .btn-more{
transition: 0.2s all ease; }
#wrap section.works-box .btn-more a{
display: block;
transition: 0.2s all ease; }
#wrap section.works-box .btn-more:hover{
border: #3e5d73 1px solid;
background: #3e5d73; }
#wrap section.works-box .btn-more:hover a{
color: #fff; }
#wrap section.experience-box .container .image-box ul li{
transition: 0.2s all ease; }
#wrap section.experience-box .container .image-box ul li:hover{
opacity: 0.7;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; }
#wrap section.link-box ul.bnr-box li.catalog a{
transition: 0.2s all ease; }
#wrap section.link-box ul.bnr-box li.catalog a:hover{
opacity: 0.7;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; }
#wrap section.link-box ul.bnr-box li.catalog a:hover .btn-dl{
border: #3e5d73 1px solid;
background: #3e5d73;
color: #fff; }
/* mail hover */
#wrap section.link-box ul.bnr-box li.mail{
transition: 0.2s all ease; }
#wrap section.link-box ul.bnr-box li.mail:hover{
opacity: 0.7;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; }
/* mail hover */
#wrap section.link-box ul.bnr-box li.hint{
transition: 0.2s all ease; }
#wrap section.link-box ul.bnr-box li.hint:hover{
opacity: 0.7;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; }
#wrap section.link-box ul.sns-box li{
transition: 0.2s all ease; }
#wrap section.link-box ul.sns-box li:hover{
opacity: 0.7;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; }
#wrap section.news-box ul li a{
transition: 0.2s all ease; }
#wrap section.news-box ul li a:hover{
background: #eceef0; }
#wrap footer ul.sitemap > li h2 a{
transition: 0.2s all ease; }
#wrap footer ul.sitemap > li h2 a:hover{
opacity: 0.7;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; }
#wrap footer ul.sitemap > li ul li{
transition: 0.2s all ease; }
#wrap footer ul.sitemap > li ul li:hover{
opacity: 0.7;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; }
#wrap footer .contact-box .container .tel a{
transition: 0.2s all ease; }
#wrap footer .contact-box .container .tel a:hover{
opacity: 0.7;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; }
#wrap footer .foot .foot-top .container .co-info .text-box address ol li a{
transition: 0.2s all ease; }
#wrap footer .foot .foot-top .container .co-info .text-box address ol li a:hover{
opacity: 0.7;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; }
#wrap footer .foot .foot-top .container .bnr-box ul li{
transition: 0.2s all ease; }
#wrap footer .foot .foot-top .container .bnr-box ul li:hover{
opacity: 0.7;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; }
#wrap footer .foot .foot-bottom .container ul.nav li{
transition: 0.2s all ease; }
#wrap footer .foot .foot-bottom .container ul.nav li:hover{
opacity: 0.7;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; }
body.secondary-page #wrap header h1 a, body.secondary-page #wrap header .logo a {
transition: 0.2s all ease; }
body.secondary-page #wrap header h1 a:hover, body.secondary-page #wrap header .logo a:hover{
opacity: 0.7;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; }
#wrap.case-detail main .works-movie:hover .bg-box img{
opacity: 0.65;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)"; }
#wrap.case-detail main .btn-showhome{
transition: 0.2s all ease; }
#wrap.case-detail main .btn-showhome a{
display: block;
transition: 0.2s all ease;
text-decoration: none; }
#wrap.case-detail main .btn-showhome:hover{
border: #3e5d73 1px solid;
background: #3e5d73; }
#wrap.case-detail main .btn-showhome:hover a{
text-decoration: none;
color: #fff; }
#youtube .btn-close:hover{
opacity: 0.7;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; } }
#wrap.case main > .owners-voice .text-box {
margin: 152px auto 0;
width: 100%;
}
#wrap section.owners-voice .text-box h2 {
margin: 0 auto;
}
.single main .article,
.page main .article {
margin: 100px auto 0 auto;
max-width: 920px;
}
.single main .article .text,
.page main .article .text {
margin-left: auto;
margin-right: auto;
max-width: 720px;
}
.single main .article img,
.page main .article img {
max-width: 100%;
height: auto;
}
.entry-header {
margin: 0 0 24px 0;
}
.entry-header .entry-title {
margin: 0 0 24px 0;
font-size: 27px;
font-weight: bold;
letter-spacing: 0.15em;
}
.entry-header .entry-meta {
margin: -24px 0 16px;
text-align: right;
}
.entry-header .entry-meta .post-date {
font-size: 11px;
color: #37536a;
letter-spacing: 0.18em;
width: 155px;
line-height: 2;
}
.entry-content {
margin: 0 0 24px 0;
}
.entry-content p,
.entry-content figure,
.entry-content ul,
.entry-content ol,
.entry-content table {
margin-bottom: 20px;
}
.entry-content p {
margin: 10px 0 40px 0;
}
.entry-content h2,
.entry-content h3,
.entry-content h4 {
clear: both;
}
.entry-content h2,
.related-list h2 {
margin: 32px 0 16px 0;
font-size: 20px;
font-weight: bold;
letter-spacing: 0.15em;
}
.entry-content h3,
.related-list h3 {
margin: 24px 0 12px 0;
font-size: 16px;
font-weight: bold;
}
.related-list h3 {
margin-top: 12px;
}
.entry-content h4,
.related-list h4 {
margin: 24px 0 12px 0;
font-size: 14px;
font-weight: bold;
}
.entry-content ul {
list-style-type: circle;
list-style-position: inside;
}
.entry-content ol {
list-style-type: decimal;
list-style-position: inside;
}
.entry-content hr {
clear: both;
margin: 40px 0;
visibility: hidden;
}
.entry-content table,
.entry-content th,
.entry-content td {
border-top: 1px solid #e3e7ea;
border-bottom: 1px solid #e3e7ea;
}
.entry-content th,
.entry-content td {
padding: 12px 24px;
}
.entry-content strong {
font-weight: bold;
}
.entry-content a {
text-decoration: underline;
}
.entry-content a:hover {
text-decoration: none;
}
.entry-content .aligncenter {
text-align: center;
}
.entry-content .alignleft {
float: left;
margin-right: 20px;
}
.entry-content .alignright {
float: right;
margin-left: 20px;
}
.entry-content figcaption {
font-size: 85%;
color: #999;
text-align: center;
}
.related-list {
border-bottom: #e3e7ea 1px solid;
}
.related-list .related-entry {
border-top: #e3e7ea 1px solid;
}
.related-list .related-entry a {
display: block;
padding: 12px 0;
}
.related-list .related-entry a:hover {
background: #eceef0;
}
.related-list .related-entry-eyecatch {
overflow: hidden;
float: left;
margin: 0 12px 0 0;
width: 300px;
height: 200px;
}
.related-list .related-entry-eyecatch img {
width: 300px;
height: auto;
}
.works-text {
margin: 60px auto 20px;
width: 100%;
max-width: 600px;
}
.btn-more-entry {
position: relative;
width: 380px;
height: 60px;
line-height: 59px;
border-radius: 3px;
border: #e3e7ea 1px solid;
box-sizing: border-box;
text-align: center;
margin: 90px auto 0;
letter-spacing: 0.1em;
}
#wrap section.news-box {
margin-top: 80px;
padding-bottom: 40px;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
#wrap section.news-box .news-box-l,
#wrap section.news-box .news-box-r {
width: 48%;
}
#wrap section.news-box h2 {
text-align: center;
width: 100%;
font-size: 130%;
}
#wrap section.news-box ul {
margin-top: 40px;
}
#wrap section.news-box .news-box-l {
margin-right: 2%;
}
#wrap section.news-box .news-box-r {
margin-left: 2%;
}
#wrap section.news-box ul li a time {
width: 120px;
}
#event-calendar {
margin-top: 80px;
}
#cta {
display: none;
position: fixed;
left: 0;
bottom: 0;
padding: 10px 0;
/* border-top: #e3e7ea 1px solid;*/
background: #fff;
width: 100%;
}
#cta p {
width: 48%;
margin:0 1%;
}
#cta .button-l {
margin-left: 2%;
}
#cta .button-r {
margin-right: 2%;
}
#cta a {
display: block;
border: #e3e7ea 1px solid;
background: #fff;
line-height: 40px;
height: 40px;
font-size: 12px;
text-align: center;
border-radius: 3px;
}
article#post-658 {
max-width: 600px;
}
article#post-658 a {
text-decoration: underline;
}
.form-area {
margin: 0 0 30px 0;
}
.form-area dt,
.form-area dd {
margin: 0;
padding: 0;
}
.form-area dt {
margin: 0 0 5px 0;
font-weight: bold;
}
.form-area dd {
margin: 0 0 20px 0;
}
.form-area dt .req {
color: #c00;
}
.form-area input,
.form-area textarea {
padding: 10px;
border: #e3e7ea 1px solid;
font-size: 14px;
resize: none;
box-sizing: border-box;
}
.form-area .full input,
.form-area textarea {
width: 100%;
}
.form-area .error {
display: block;
margin: 5px 0 0 0;
padding: 5px 10px;
background: #fee;
}
.form-apply {
text-align: center;
}
.form-apply input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding: 0;
border: none;
outline: none;
background: #3e5d73;
color: #fff;
font-weight: bold;
padding: 0 30px;
font-size: 14px;
line-height: 40px;
border-radius: 40px;
cursor: pointer;
}
.form-apply input.form-back {
margin-right: 20px;
background: #aaa;
}
@media screen and (max-width: 768px){
.btn-more-entry {
width: 88%;
height: 48px;
line-height: 45px;
font-size: 12px;
margin: 40px auto 0;
}
#content main .article {
padding: 0 20px;
}
.related-list .related-entry-eyecatch {
float: none;
width: 100%;
}
.related-list .related-entry-eyecatch img {
width: 100%;
}
#wrap section.news-box .news-box-l,
#wrap section.news-box .news-box-r {
width: 100%;
margin: 0 0 60px;
}
#wrap {
padding-bottom: 40px;
}
.home #wrap {
padding-bottom: 0;
}
#cta {
display: flex !important;
}
#event-calendar {
margin-left: auto;
margin-right: auto;
width: 85vw;
min-width: 300px;
height: 85vw;
min-height: 300px;
}
.entry-header .entry-title {
font-size: 25px;
}
}
@media screen and (min-width: 769px){
.btn-more-entry {
transition: 0.2s all ease; }
.btn-more-entry a{
display: block;
transition: 0.2s all ease; }
.btn-more-entry:hover{
border: #3e5d73 1px solid;
background: #3e5d73; }
.btn-more-entry:hover a{
color: #fff; }
#wrap section.works-box #more-entry-case {
margin-top: 60px;
}
.top-page #wrap section.works-box .text-box .lead {
min-height: 260px;
}
#wrap.case-detail main section.main .image-box {
padding-bottom: 68px;
}
#wrap.case-detail main section.main .text-box {
padding: 0;
}
}
.close-alert {
padding: 10px 0;background: #fee;text-align: center;
}
#wrap.case-detail main .map-event,
#wrap.case-detail main .map-event .map-container {
width: 100%;
max-width: 920px;
}
#wrap.case-detail main .btn-event {
border: none;
background: #3e5d73;
}
#wrap.case-detail main .btn-event a{
border: #3e5d73 1px solid;
text-decoration: none;
color: #fff;
border-radius: 3px;
}
#wrap.case-detail main .btn-event:hover {
border: none;
}
#wrap.case-detail main .btn-event:hover a {
border: #e3e7ea 1px solid;
background: #fff;
color: #000;
}
.wp-pagenavi {
width: 100%;
padding: 20px 0;
text-align: center;
}
.wp-pagenavi a,
.wp-pagenavi span {
border: none !important;
}
.harf-bnr {
display: none;
text-align: center;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.harf-bnr li {
margin: 15px 0;
}
.harf-bnr li img {
width: 100%;
height: auto;
}
/*トップページ news-box*/
.home #wrap section.news-box {
width: 100%;
display: block;
/* padding: 140px 0; */
margin: 0;
}
.home #wrap section.news-box.news-box--blog {
padding: 140px 0;
}
.home #wrap section.news-box .news_list {
width: 90%;
max-width: 1240px;
margin: 50px auto 0;
}
.home #wrap section.news-box .news_list .item {
width: 378px;
margin: 0 calc(106px / 4);
}
.home #wrap section.news-box .news_list .item a {
display: block;
position: relative;
}
.home #wrap section.news-box .news_list .item .thumb {
width: 100%;
height: 248px;
border-radius: 3px;
overflow: hidden;
}
.home #wrap section.news-box .news_list .item .thumb img {
object-fit: cover;
width: 100%;
height: 100%;
object-position: center;
}
.home #wrap section.news-box .news_list .item .info {
background-color: #fff;
width: 300px;
margin: -25px auto 0;
border-radius: 3px;
padding: 18px 20px;
position: relative;
transition: .2s all ease;
}
.home #wrap section.news-box .news_list .item .info time,
.home #wrap section.news-box .news_list .item .info .article-ttl {
display: block;
line-height: 1.57;
}
.slick-slider {
opacity: 0;
transition: opacity .3s linear;
}
.slick-slider.slick-initialized {
opacity: 1;
}
.home #wrap section.news-box .news_list .slick-list {
overflow: visible;
}
.home #wrap section.news-box .news_list .slick-dots {
margin-top: 32px;
display: flex !important;
justify-content: center;
align-items: center;
}
.home #wrap section.news-box .news_list .slick-dots li {
font-size: 0;
line-height: 0;
color: transparent;
margin: 0 15px;
border: none;
}
.home #wrap section.news-box .news_list .slick-dots li button {
cursor: pointer;
font-size: 0;
line-height: 0;
color: transparent;
display: block;
width: 10px;
height: 10px;
border-radius: 50%;
background: #edeff1;
padding: 0;
border: none;
}
.home #wrap section.news-box .news_list .slick-dots li.slick-active button {
background: #37536a;
}
.home #wrap section.news-box .news_list .slick-arrow {
position: absolute;
width: 27px;
height: 27px;
font-size: 0;
border: 0;
padding: 0;
cursor: pointer;
transition: 0.3s;
outline: none;
z-index: 1;
top: 110px;
border-left: 1px solid #111;
border-bottom: 1px solid #111;
background: transparent;
transform-origin: center;
}
.home #wrap section.news-box .news_list .slick-prev {
transform: rotate(45deg);
left: -36px;
}
.home #wrap section.news-box .news_list .slick-next {
transform: rotate(-135deg);
right: -36px;
}
/*blog*/
.home #wrap #sec-blog.news-box {
background-color: #edeff1;
}
.home #wrap #sec-blog.news-box .news_list .item .info {
background-color: #edeff1;
}
.home #wrap #sec-blog.news-box .news_list .item .info time {
display: block;
color: #37536a;
}
.home #wrap #sec-blog.news-box .news_list .slick-dots li:not(.slick-active) button {
background: #fff;
}
@media screen and (min-width: 769px) {
.home #wrap section.news-box .news_list .item a:hover .info {
background-color: #edeff1;
}
.home #wrap #sec-blog.news-box .news_list .item a:hover .info {
background-color: #fff;
}
}
@media screen and (max-width: 768px) {
.home #wrap section.news-box {
/* padding: 55px 0; */
}
.home #wrap section.news-box .news_list {
width: 75.6%;
margin: 35px auto 0;
}
.home #wrap section.news-box .news_list .item {
width: 75.6vw;
margin: 0 2.66vw;
}
.home #wrap section.news-box .news_list .item a {
display: block;
position: relative;
}
.home #wrap section.news-box .news_list .item .thumb {
width: 100%;
height: 49.6vw;
}
.home #wrap section.news-box .news_list .item .info {
width: 80%;
margin: -20px auto 0;
padding: 15px 16px;
}
.home #wrap section.news-box .news_list .item .info time,
.home #wrap section.news-box .news_list .item .info .article-ttl {
font-size: 10.5px;
letter-spacing: 0.05em;
}
.home #wrap section.news-box .news_list .slick-dots {
margin-top: 20px;
}
.home #wrap section.news-box .news_list .slick-dots li {
margin: 0 10px;
}
.home #wrap section.news-box .news_list .slick-dots li button {
width: 8px;
height: 8px;
}
.home #wrap section.news-box .news_list .slick-arrow {
width: 20px;
height: 20px;
top: calc(24.8vw - 10px);
}
.home #wrap section.news-box .news_list .slick-prev {
left: -6vw;
}
.home #wrap section.news-box .news_list .slick-next {
right: -6vw;
}
.home #wrap #sec-blog.news-box {
margin-top: 60px;
}
.home #wrap section.news-box.news-box--blog {
padding: 11vw 0;
}
}
/*トップページ front-page-parts*/
#wrap .front-page-parts {
padding: 133px 0 0;
}
#wrap .front-page-parts > *:first-of-type {
padding: 0;
}
#wrap .front-page-parts .main-image a,
#wrap .front-page-parts .detail .image a{
display: block;
width: 100%;
}
#wrap .front-page-parts img {
/* width: 100%; */
transition: .2s ease;
margin-left: auto;
margin-right: auto;
display: block;
max-width: 100%;
}
#wrap .front-page-parts h2.parts-title {
text-align: center;
width: 100%;
/* font-weight: bold; */
font-size: 130%;
/* margin-top: 4em; */
/* margin-bottom: 4em; */
letter-spacing: .2em;
display: block;
}
#wrap .front-page-parts .news-box h2 {
margin-bottom: 0;
}
#wrap .front-page-parts .main-image {
width: 100%;
/* margin-bottom: 160px; */
}
#wrap .front-page-parts .detail {
width: 90%;
max-width: 1250px;
margin: 0 auto;
}
#wrap .front-page-parts .detail > * + * {
margin-top: 160px;
}
#wrap .front-page-parts .detail > .image {
width: 100%;
max-width: 1124px;
margin-left: auto;
margin-right: auto;
border-radius: 3px;
overflow: hidden;
}
#wrap .front-page-parts .detail .text {
width: 680px;
margin-left: auto;
margin-right: auto;
line-height: 2.14;
text-align: justify;
}
#wrap .front-page-parts .detail .video {
position: relative;
width: 100%;
/* max-width: 1124px; */
height: 0;
padding-top: 56.25%;
margin-left: auto;
margin-right: auto;
}
#wrap .front-page-parts .detail .video iframe {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
#wrap .front-page-parts .detail .col2 {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#wrap .front-page-parts .detail .col2 {
width: 100%;
max-width: 1124px;
margin-left: auto;
margin-right: auto;
/* padding-bottom: 130px; */
}
#wrap .front-page-parts .detail .col2 > * {
width: 48.05%;
max-width: 540px;
}
#wrap .front-page-parts .detail .col2 .image {
width: 100%;
border-radius: 2px;
overflow: hidden;
}
#wrap .front-page-parts .detail .col2 .txtwrap h3 {
/* font-weight: bold; */
font-size: 130%;
line-height: 1.6875;
letter-spacing: 0.15em;
margin: 50px 0 40px;
}
#wrap .front-page-parts .detail .col2 .txtwrap h4 {
/* font-weight: bold; */
font-size: 130%;
line-height: 1.85;
letter-spacing: 0.15em;
margin: 50px 0 40px;
}
#wrap .front-page-parts .detail .col2 .txtwrap p {
line-height: 2.14;
text-align: justify;
}
#wrap .front-page-parts .detail .col2 .txtwrap p + p {
margin-top: 1em;
}
#wrap .front-page-parts .detail .col2 .txtwrap .btn {
margin-top: 50px;
}
#wrap .front-page-parts .detail .col2 .txtwrap .btn a {
display: block;
position: relative;
width: 380px;
height: 60px;
line-height: 59px;
border-radius: 3px;
border: #37536a 1px solid;
box-sizing: border-box;
text-align: center;
font-weight: bold;
letter-spacing: 0.1em;
margin: 0 auto;
transition: 0.2s all ease;
}
#wrap .front-page-parts .detail .col2 .txtwrap .btn a .arw {
width: 1em;
height: 1em;
border: 1px solid #37536a;
border-radius: 50%;
position: absolute;
right: 18px;
top: 22px;
transition: 0.2s all ease;
}
#wrap .front-page-parts .detail .col2 .txtwrap .btn a .arw::before {
content: "";
width: 3px;
height: 3px;
position: absolute;
right: 6px;
top: 5px;
border-right: 1px solid #37536a;
border-bottom: 1px solid #37536a;
transform: rotate(-45deg);
transition: 0.2s all ease;
}
#wrap .front-page-parts .detail .col2.img-right,
#wrap .front-page-parts .detail .col2.img-left {
max-width: 100%;
align-items: center;
}
#wrap .front-page-parts .detail .col2.img-right {
margin-right: 0;
}
#wrap .front-page-parts .detail .col2.img-left {
margin-left: 0;
}
#wrap .front-page-parts .detail .col2.img-right {
flex-direction: row-reverse;
}
#wrap .front-page-parts .detail .col2.img-right .image,
#wrap .front-page-parts .detail .col2.img-left .image {
width: 57.6%;
max-width: 720px;
}
#wrap .front-page-parts .detail .col2.img-right .txtwrap,
#wrap .front-page-parts .detail .col2.img-left .txtwrap {
width: 36%;
max-width: 450px;
}
#wrap .front-page-parts .detail .col2.img-right .txtwrap p,
#wrap .front-page-parts .detail .col2.img-left .txtwrap p,
#wrap .front-page-parts .detail .col2.img-right .txtwrap .btn,
#wrap .front-page-parts .detail .col2.img-left .txtwrap .btn {
padding-right: 2em;
}
#wrap .front-page-parts .blank {
display: block;
/* background: red; */
}
.blankHeight--1 {
height: 30px;
}
.blankHeight--2 {
height: 60px;
}
.blankHeight--3 {
height: 90px;
}
.blankHeight--4 {
height: 120px;
}
.blankHeight--5 {
height: 150px;
}
@media screen and (min-width: 769px) {
#wrap .front-page-parts .main-image a:hover img,
#wrap .front-page-parts .detail .image a:hover img{
opacity: 0.7;
}
#wrap .front-page-parts .detail .col2 .txtwrap .btn a:hover {
color: #fff;
background: #37536a;
}
#wrap .front-page-parts .detail .col2 .txtwrap .btn a:hover .arw,
#wrap .front-page-parts .detail .col2 .txtwrap .btn a:hover .arw::before {
border-color: #fff;
}
#wrap .front-page-parts .detail .col2.img-right .txtwrap *:first-child,
#wrap .front-page-parts .detail .col2.img-left .txtwrap *:first-child {
margin-top: 0;
}
}
@media screen and (max-width: 768px) {
#wrap .front-page-parts {
padding: 50px 0 0;
}
#wrap .front-page-parts h2.parts-title {
font-size: 16px;
/* margin-top: 3em; */
/* margin-bottom: 3em; */
}
#wrap .front-page-parts .main-image {
width: 100%;
/* margin-bottom: 45px; */
}
#wrap .front-page-parts .detail {
width: 91.2%;
}
#wrap .front-page-parts .detail > * + * {
margin-top: 45px;
}
#wrap .front-page-parts .detail .text {
width: 100%;
font-size: 12px;
line-height: 2.5;
}
#wrap .front-page-parts .detail .col2 {
display: block;
/* padding-bottom: 20vw; */
}
#wrap .front-page-parts .detail .col2 > * {
width: 100%;
max-width: inherit;
}
#wrap .front-page-parts .detail .col2 > * + * {
margin-top: 45px;
}
#wrap .front-page-parts .detail .col2 .txtwrap h3 {
font-size: 16px;
line-height: 1.8;
margin: 25px 0 20px;
}
#wrap .front-page-parts .detail .col2 .txtwrap h4 {
font-size: 16px;
line-height: 1.8;
margin: 25px 0 20px;
}
#wrap .front-page-parts .detail .col2 .txtwrap p {
font-size: 9px;
line-height: 2.5;
}
#wrap .front-page-parts .detail .col2 .txtwrap .btn {
margin-top: 25px;
}
#wrap .front-page-parts .detail .col2 .txtwrap .btn a {
width: 227px;
height: 36px;
line-height: 34px;
border-radius: 2px;
font-size: 9px;
}
#wrap .front-page-parts .detail .col2 .txtwrap .btn a .arw {
right: 10px;
top: 12.5px;
}
#wrap .front-page-parts .detail .col2 .txtwrap .btn a .arw::before {
width: 2px;
height: 2px;
right: 3px;
top: 3px;
}
#wrap .front-page-parts .detail .col2.img-right,
#wrap .front-page-parts .detail .col2.img-left {
max-width: 100%;
padding-bottom: 5vw;
}
#wrap .front-page-parts .detail .col2.img-right > * + *,
#wrap .front-page-parts .detail .col2.img-left > * + * {
margin-top: 0;
}
#wrap .front-page-parts .detail .col2.img-right .image,
#wrap .front-page-parts .detail .col2.img-left .image {
width: 100%;
max-width: inherit;
}
#wrap .front-page-parts .detail .col2.img-right .txtwrap,
#wrap .front-page-parts .detail .col2.img-left .txtwrap {
width: 100%;
max-width: inherit;
}
#wrap .front-page-parts .detail .col2.img-right .txtwrap p,
#wrap .front-page-parts .detail .col2.img-left .txtwrap p,
#wrap .front-page-parts .detail .col2.img-right .txtwrap .btn,
#wrap .front-page-parts .detail .col2.img-left .txtwrap .btn {
padding-right: 0;
}
.blankHeight--1 {
height: 3vw;
}
.blankHeight--2 {
height: 6vw;
}
.blankHeight--3 {
height: 9vw;
}
.blankHeight--4 {
height: 12vw;
}
.blankHeight--5 {
height: 15vw;
}
#wrap .front-page-parts .detail .video {
padding-top: 56.25%;
}
}
/*categoryページ news-box*/
.category-tour #wrap section.news-box {
padding: 0;
}
.category-tour #wrap.case-detail main .ttl-box h2 {
text-align: center;
}
.category-tour #wrap section.news-box {
width: 100%;
display: block;
margin: 0;
}
.category-tour #wrap section.news-box .news_list {
width: 90%;
max-width: 1240px;
width: 1240px;
margin: 120px auto 50px;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
.category-tour #wrap section.news-box .news_list .item {
width: 378px;
}
.category-tour #wrap section.news-box .news_list .item a {
display: block;
position: relative;
}
.category-tour #wrap section.news-box .news_list .item .thumb {
width: 100%;
height: 248px;
border-radius: 3px;
overflow: hidden;
}
.category-tour #wrap section.news-box .news_list .item .thumb img {
object-fit: cover;
width: 100%;
height: 100%;
object-position: center;
}
.category-tour #wrap section.news-box .news_list .item .info {
background-color: #fff;
width: 300px;
margin: -25px auto 0;
border-radius: 3px;
padding: 18px 20px;
position: relative;
transition: .2s all ease;
}
.category-tour #wrap section.news-box .news_list .item .info time,
.category-tour #wrap section.news-box .news_list .item .info .article-ttl {
display: block;
line-height: 1.57;
}
@media screen and (min-width: 769px) {
.category #wrap section.news-box .news_list .item + .item:not(:nth-child(3n + 1)) {
margin-left: 53px;
}
.category #wrap section.news-box .news_list .item:nth-child(n + 4) {
margin-top: 45px;
}
.category #wrap section.news-box .news_list .item a:hover .info {
background: #eceef0;
}
}
@media screen and (max-width: 768px) {
.category #wrap section.news-box .news_list {
width: 92%;
margin: 65px auto 30px;
}
.category #wrap section.news-box .news_list .item {
width: 48.4%;
}
.category #wrap section.news-box .news_list .item:nth-child(even) {
margin-left: 3.2%;
}
.category #wrap section.news-box .news_list .item:nth-child(n + 3) {
margin-top: 25px;
}
.category #wrap section.news-box .news_list .item a {
display: block;
position: relative;
}
.category #wrap section.news-box .news_list .item .thumb {
width: 100%;
height: 29.2vw;
}
.category #wrap section.news-box .news_list .item .info {
width: auto;
margin: 0 auto;
padding: 10px;
}
.category #wrap section.news-box .news_list .item .info time,
.category #wrap section.news-box .news_list .item .info .article-ttl {
font-size: 10.5px;
letter-spacing: 0.05em;
}
}
/* wp-custom-css */
.btn-ori a:hover{
opacity: 0.7;
}
.btn-ori-link{
width:65%;
text-decoration: none !important;
}
.youtube {
position: relative;
width: 100%;
padding-top: 56.25%;
}
.youtube iframe {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.cal_wrapper {
max-width: 800px; /* 最大幅 */
min-width: 300px; /* 最小幅 */
margin: 2.0833% auto;
}
.googlecal {
position: relative;
padding-bottom: 100%; /* 縦横比 */
height: 0;
overflow: hidden;
}
.googlecal iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
@media only screen and (min-width: 600px) {
/* 画面幅が600px以上の場合の縦横比の指定 */
.googlecal {
padding-bottom: 75%;
}
}
.wp-embedded-content {
max-width: 100%;
}
#fix-button {
position: fixed;
top: 368px;
right: 0;
z-index: 111;
}
@media only screen and (max-width: 640px) {
#fix-button {
display: none;
}
}