@charset "UTF-8";
  @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;1,800&display=swap");
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
html {
font-size: 62.5%;
}
body {
font-family: 'Noto Sans JP', 'Montserrat', -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #1F1F1F;
font-size: 1.6rem;
line-height: 3;
letter-spacing: 0;
}
a {
text-decoration: none;
outline: none;
color: #1F1F1F;
opacity: 1;
transition: all 0.5s;
}
a:hover {
opacity: 0.8;
} .wrapper {
display: block;
margin: 0px auto;
padding: 0px;
min-height: 100vh; }
.pc_visible {
display: inline-block;
}
.sp_visible {
display: none;
}
@media screen and (max-width: 768px) {
.pc_visible {
display: none;
}
.sp_visible {
display: inline-block;
}
}
.heading-main {
font-weight: 800;
font-style: italic;
font-family: 'Montserrat','Noto Sans JP', sans-serif;
font-size: 4.2rem;
text-align: center;
line-height: 1;
}
.heading-sub {
font-size: 1.5rem;
text-align: center;
font-weight: 700;
line-height: 2.5;
}
@media (min-width: 768px) {
a[href*="tel:"] {
pointer-events: none;
cursor: default;
text-decoration: none;
}
} *,
*::before,
*::after {
box-sizing: border-box;
}
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
margin: 0;
}
ul[role="list"],
ol[role="list"] {
list-style: none;
}
html {
scroll-behavior: auto;
}
body {
min-height: 100vh;
text-rendering: optimizeSpeed;
}
a:not([class]) {
text-decoration-skip-ink: auto;
}
img,
picture {
max-width: 100%;
display: block;
height: auto;
vertical-decoration: none; }
input,
button,
textarea,
select {
font: inherit;
} @keyframes menu-container-appeared {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(0);
}
}
@keyframes menu-container-leaved {
0% {
transform: translateX(0);
}
100% {
transform: translateX(100%);
}
}
@keyframes menu-overlay-appeared {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes menu-overlay-leaved {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
} @keyframes modal-photo-open {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes modal-photo-close {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}   .bgextend {
animation-name: bgextendAnimeBase;
animation-duration: 1s;
animation-fill-mode: forwards;
-ms-animation-name: bgextendAnimeBase;
-ms-animation-duration: 1s;
-ms-animation-fill-mode: forwards;
position: relative;
overflow: hidden; opacity: 0;
}
@keyframes bgextendAnimeBase {
from {
opacity: 0;
}
to {
opacity: 1;
}
} .bgappear {
animation-name: bgextendAnimeSecond;
animation-duration: 1s;
animation-delay: 0.6s;
animation-fill-mode: forwards;
-ms-animation-name: bgextendAnimeSecond;
-ms-animation-duration: 1s;
-ms-animation-delay: 0.6s;
-ms-animation-fill-mode: forwards;
opacity: 0;
}
@keyframes bgextendAnimeSecond {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
} .bgLRextend::before {
animation-name: bgLRextendAnime;
animation-duration: 1s;
animation-fill-mode: forwards;
-ms-animation-name: bgLRextendAnime;
-ms-animation-duration: 1s;
-ms-animation-fill-mode: forwards;
content: "";
position: absolute;
width: 100%;
height: 100%;
background-color: #666; bottom: 0;
}
@keyframes bgLRextendAnime {
0% {
transform-origin: left;
transform: scaleX(0);
}
50% {
transform-origin: left;
transform: scaleX(1);
}
50.001% {
transform-origin: right;
}
100% {
transform-origin: right;
transform: scaleX(0);
}
} .bgappearTrigger,
.bgLRextendTrigger {
opacity: 0;
}  .fadeUp {
animation-name: fadeUpAnime;
animation-duration: 0.5s;
animation-fill-mode: forwards;
-ms-animation-name: fadeUpAnime;
-ms-animation-duration: 0.5s;
-ms-animation-fill-mode: forwards;
opacity: 0;
}
@keyframes fadeUpAnime {
from {
opacity: 0;
transform: translateY(100px);
-ms-transform: translateY(100px);
}
to {
opacity: 1;
transform: translateY(0);
-ms-transform: translateY(0);
}
} .fadeUpTrigger {
opacity: 0;
}
.fadeUpTrigger02 {
opacity: 0;
}
.fadeUpTrigger03 {
opacity: 0;
}
.fadeUpTrigger04 {
opacity: 0;
} .glo_nav {
width: 100%;
top: 0;
left: 0;
position: fixed;
background-repeat: repeat-x;
background-position: 50% -17px;
background-image: url(//storage-t.co.jp/wp-content/themes/storage/img/header_bg.png);
z-index: 99;
display: flex;
padding-bottom: 50px;
}
.glo_nav > ul {
width: 100%;
height: 70px;
margin: 0;
display: flex;
justify-content: flex-end;
align-items: stretch;
}
.glo_nav > ul > li#logo {
flex-grow: 2;
}
.glo_nav > ul > li#logo > a {
opacity: 1;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.glo_nav > ul > li#logo > a:hover {
opacity: .8;
}
.glo_nav > ul > li#logo > a img {
width: 110px;
}
.glo_nav > ul > li {
font-weight: 800;
font-style: italic;
font-family: 'Montserrat','Noto Sans JP', sans-serif;
display: flex;
padding-right: 18px;
line-height: 2;
}
.glo_nav > ul > li.mail-btn {
padding-right: 0;
}
.glo_nav > ul > li#nav__service::after, .glo_nav > ul > li#nav__virutect::after, .glo_nav > ul > li#nav__company::after {
content: "";
position: relative;
top: calc(50% + 10px);
left: 0.5rem;
width: 6px;
height: 6px;
margin-top: -13px;
border-top: 1px solid #8D877D;
border-right: 1px solid #8D877D;
transform: rotate(135deg);
}
@media screen and (max-width: 479px) {
.glo_nav > ul > li#nav__service::after, .glo_nav > ul > li#nav__virutect::after, .glo_nav > ul > li#nav__company::after {
top: calc(50% - 0px);
}
}
.glo_nav > ul > li > a {
color: #1F1F1F;
padding: 20px 3px;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.glo_nav > ul > li > a:hover {
color: #8D877D;
}
.glo_nav .glo_nav__child {
display: flex;
justify-content: flex-end;
width: 100%;
height: 50px;
position: absolute;
top: 70px;
left: 0;
font-size: 1.3rem;
font-weight: 400;
background: #E6E6E6;
visibility: hidden;
opacity: 0;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.glo_nav .glo_nav__child > li {
display: flex;
}
.glo_nav .glo_nav__child > li:nth-child(n+2)::after {
content: "/";
position: absolute;
top: 4px;
}
.glo_nav .glo_nav__child > li > a {
padding: 4px 10px;
opacity: 1;
transition: opacity .5s;
}
.glo_nav .glo_nav__child > li > a:hover {
color: #8D877D;
}
.glo_nav__menu:hover .glo_nav__child {
visibility: visible;
opacity: 1;
}
#top .glo_nav {
top: calc(100vh - 70px);
position: absolute;
}
@media screen and (max-width: 479px) {
#top .glo_nav {
top: 0;
}
}
#top .glo_nav.fixed {
position: fixed;
top: 0;
}
#logo_sp {
display: none;
}
.mail-btn a {
width: 70px;
background-color: #000;
opacity: 1;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.mail-btn a img {
width: 18px;
margin: 10px auto;
}
.mail-btn a:hover {
opacity: .5;
}
#hanburger {
display: none;
}
@media screen and (max-width: 768px) {
#logo_sp {
display: block;
top: 7vw;
left: 5vw;
position: relative;
width: 36vw;
}
.menu_button {
width: 50px;
height: 50px;
position: fixed;
top: 20px;
right: 20px;
background: #1F1F1F;
z-index: 40;
}
.menu_button::before {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'liga';
content: "\e5d2";
font-size: 2rem;
position: absolute;
color: #fff;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#hanburger:checked + .menu_button::before { font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'liga';
content: "\e5cd";
}
.glo_nav {
position: fixed;
top: 0;
left: -80%;
overflow: hidden;
width: 80%;
height: 100%;
padding: 0;
transition: left .5s, right .5s;
background-color: #1f1f1f;
background-image: none;
}
.glo_nav.fixed {
left: -80%;
}
.glo_nav > ul {
height: 100%;
flex-direction: column;
justify-content: center;
margin-top: 20rem;
padding-inline-start: 3rem;
}
.glo_nav > ul > li#logo {
display: none;
}
.glo_nav > ul > li {
font-size: 1.5rem;
margin-top: 2rem;
}
.glo_nav > ul > li > a {
color: #fff;
}
.glo_nav .glo_nav__menu .glo_nav__child {
flex-direction: column;
visibility: visible;
opacity: 1;
position: relative;
height: auto;
padding-inline-start: 0;
width: 90%;
top: 3vh;
left: 10%;
background: #1F1F1F;
}
.glo_nav .glo_nav__menu .glo_nav__child li > a {
color: #fff;
}
.glo_nav ul > li#nav__service::after,
.glo_nav ul > li#nav__virutect::after,
.glo_nav ul > li#nav__company::after {
display: none;
}
.glo_nav #nav__news, .glo_nav #nav__blog, .glo_nav #nav__mail {
margin-top: 0;
}
.glo_nav .mail-btn a {
margin-bottom: 5rem;
}
#hanburger:checked ~ .glo_nav { visibility: visible; left: 0;
overflow-y: scroll;
}
}
.topbutton {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
position: fixed;
bottom: 100px;
right: 70px;
z-index: -1000;
width: 50px;
height: 50px;
font-size: 10px;
font-weight: 400;
line-height: 1.6;
color: #1F1F1F;
background: #fff;
border-radius: 50%;
opacity: 0;
cursor: pointer;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15);
-webkit-transition: all .5s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
@media screen and (max-width: 479px) {
.topbutton {
bottom: 10vw;
right: 5vw;
}
}
.topbutton.active {
opacity: 1;
z-index: 1000;
}
.topbutton:before {
display: block;
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 0 3px 11px 3px;
border-color: transparent transparent #1F1F1F transparent;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
font-size: 1.1rem;
}
.topbutton:after {
content: 'TOP';
display: block;
padding: 4px 0px;
}
.topbutton:hover {
background: #121212;
color: #fff;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15);
}
.topbutton:hover:before {
transform: translateY(-4px);
border-color: transparent transparent #fff transparent;
}
#topbutton { position: fixed; bottom: 6vw; right: 5vw;  display: none; background-color: #2525aa; opacity: 0.75; border-radius: 24px; text-align: center; font-size: 120%; font-weight: bold; margin: 0px; padding: 10px; align-items: center;
justify-content: center;
flex-direction: column;
width: 50px;
height: 50px;
font-size: 10px;
font-weight: 400;
line-height: 1.6;
color: #1F1F1F;
background: #fff;
border-radius: 50%;
cursor: pointer;
z-index: 1000;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15);
-webkit-transition: all .5s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
#topbutton.active {
opacity: 1;
}
#topbutton:before {
display: block;
content: "";
width: 0;
height: 0;
margin: 0 auto;
border-style: solid;
border-width: 0 3px 11px 3px;
border-color: transparent transparent #1F1F1F transparent;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
font-size: 1.1rem;
}
#topbutton:after { display: block;
padding: 4px 0px;
color: #fff;
}
#topbutton:hover {
background: #121212;
color: #fff;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15);
}
#topbutton:hover:before {
transform: translateY(-4px);
border-color: transparent transparent #fff transparent;
}
.mainvisual {
position: relative;
overflow: hidden;
background-color: #000;
}
.mainvisual::before {
content: '';
display: block;
width: 100%;
height: 100vh;
background-image: url(//storage-t.co.jp/wp-content/themes/storage/img/main_visual.jpg);
background-image: image-set(url(//storage-t.co.jp/wp-content/themes/storage/img/main_visual.jpg) 1x, url(//storage-t.co.jp/wp-content/themes/storage/img/main_visual@2x.jpg) 2x);
background-image: -webkit-image-set(url(//storage-t.co.jp/wp-content/themes/storage/img/main_visual.jpg) 1x, url(//storage-t.co.jp/wp-content/themes/storage/img/main_visual@2x.jpg) 2x);
background-size: cover;
background-position: top;
background-repeat: no-repeat;
-webkit-animation: zoom 15s 10　alternate;
animation: zoom 15s 10 alternate;
animation-fill-mode: forwards;
}
@media screen and (max-width: 479px) {
.mainvisual::before {
background-position: -55rem top;
}
}
@keyframes zoom {
0% {
transform: scale(1);
}
100% {
transform: scale(1.2);
}
}
.mainvisual__container {
display: flex;
flex-direction: column;
min-height: 100vh;
max-width: 1366px;
margin: 0 auto;
position: absolute;
left: 5vw;
top: 0;
color: #fff;
}
@media screen and (max-width: 479px) {
.mainvisual__container {
left: 1.5vw;
}
}
.mainvisual__text-sub {
font-weight: 800;
font-style: italic;
font-family: 'Montserrat','Noto Sans JP', sans-serif;
font-size: 2.4rem;
position: relative;
margin-left: 2.5%;
top: 43vh;
}
.mainvisual__text-sub span {
display: inline-block;
opacity: 0;
animation: main-type .5s forwards;                               }
.mainvisual__text-sub span:nth-of-type(1) {
animation-delay: 1.1s;
}
.mainvisual__text-sub span:nth-of-type(2) {
animation-delay: 1.2s;
}
.mainvisual__text-sub span:nth-of-type(3) {
animation-delay: 1.3s;
}
.mainvisual__text-sub span:nth-of-type(4) {
animation-delay: 1.4s;
}
.mainvisual__text-sub span:nth-of-type(5) {
animation-delay: 1.5s;
}
.mainvisual__text-sub span:nth-of-type(6) {
animation-delay: 1.6s;
}
.mainvisual__text-sub span:nth-of-type(7) {
animation-delay: 1.7s;
}
.mainvisual__text-sub span:nth-of-type(8) {
animation-delay: 1.8s;
}
.mainvisual__text-sub span:nth-of-type(9) {
animation-delay: 1.9s;
}
.mainvisual__text-sub span:nth-of-type(10) {
animation-delay: 2s;
}
.mainvisual__text-sub span:nth-of-type(11) {
animation-delay: 2.1s;
}
.mainvisual__text-sub span:nth-of-type(12) {
animation-delay: 2.2s;
}
.mainvisual__text-sub span:nth-of-type(13) {
animation-delay: 2.3s;
}
.mainvisual__text-sub span:nth-of-type(14) {
animation-delay: 2.4s;
}
.mainvisual__text-sub span:nth-of-type(15) {
animation-delay: 2.5s;
}
.mainvisual__text-sub span:nth-of-type(16) {
animation-delay: 2.6s;
}
.mainvisual__text-sub span:nth-of-type(17) {
animation-delay: 2.7s;
}
.mainvisual__text-sub span:nth-of-type(18) {
animation-delay: 2.8s;
}
.mainvisual__text-sub span:nth-of-type(19) {
animation-delay: 2.9s;
}
.mainvisual__text-sub span:nth-of-type(20) {
animation-delay: 3s;
}
.mainvisual__text-sub span:nth-of-type(21) {
animation-delay: 3.1s;
}
.mainvisual__text-sub span:nth-of-type(22) {
animation-delay: 3.2s;
}
.mainvisual__text-sub span:nth-of-type(23) {
animation-delay: 3.3s;
}
.mainvisual__text-sub span:nth-of-type(24) {
animation-delay: 3.4s;
}
.mainvisual__text-sub span:nth-of-type(25) {
animation-delay: 3.5s;
}
.mainvisual__text-sub span:nth-of-type(26) {
animation-delay: 3.6s;
}
.mainvisual__text-sub span:nth-of-type(27) {
animation-delay: 3.7s;
}
.mainvisual__text-sub span:nth-of-type(28) {
animation-delay: 3.8s;
}
.mainvisual__text-sub span:nth-of-type(29) {
animation-delay: 3.9s;
}
.mainvisual__text-sub span:nth-of-type(30) {
animation-delay: 4s;
}
@keyframes main-type {
0% {
opacity: 0;
transform: scale(2);
}
100% {
opacity: 1;
transform: scale(1);
}
}
@media screen and (max-width: 768px) {
.mainvisual__text-sub {
top: 73vw;
}
}
@media screen and (max-width: 479px) {
.mainvisual__text-sub {
top: 63vh;
font-size: 1.5rem;
}
}
.mainvisual__text-main {
width: 100%;
font-weight: 700;
font-size: 10rem;
line-height: 1.15;
margin-left: 2.5%;
position: relative;
top: 43vh;
}
.mainvisual__text-main span {
display: inline-block;
opacity: 0;
animation: main-type .5s forwards;                               }
.mainvisual__text-main span.pict_font {
position: relative;
width: 10rem;
top: 1rem;
}
@media screen and (max-width: 479px) {
.mainvisual__text-main span.pict_font {
width: 5rem;
}
}
.mainvisual__text-main span:nth-of-type(1) {
animation-delay: 1.1s;
}
.mainvisual__text-main span:nth-of-type(2) {
animation-delay: 1.2s;
}
.mainvisual__text-main span:nth-of-type(3) {
animation-delay: 1.3s;
}
.mainvisual__text-main span:nth-of-type(4) {
animation-delay: 1.4s;
}
.mainvisual__text-main span:nth-of-type(5) {
animation-delay: 1.5s;
}
.mainvisual__text-main span:nth-of-type(6) {
animation-delay: 1.6s;
}
.mainvisual__text-main span:nth-of-type(7) {
animation-delay: 1.7s;
}
.mainvisual__text-main span:nth-of-type(8) {
animation-delay: 1.8s;
}
.mainvisual__text-main span:nth-of-type(9) {
animation-delay: 1.9s;
}
.mainvisual__text-main span:nth-of-type(10) {
animation-delay: 2s;
}
.mainvisual__text-main span:nth-of-type(11) {
animation-delay: 2.1s;
}
.mainvisual__text-main span:nth-of-type(12) {
animation-delay: 2.2s;
}
.mainvisual__text-main span:nth-of-type(13) {
animation-delay: 2.3s;
}
.mainvisual__text-main span:nth-of-type(14) {
animation-delay: 2.4s;
}
.mainvisual__text-main span:nth-of-type(15) {
animation-delay: 2.5s;
}
.mainvisual__text-main span:nth-of-type(16) {
animation-delay: 2.6s;
}
.mainvisual__text-main span:nth-of-type(17) {
animation-delay: 2.7s;
}
.mainvisual__text-main span:nth-of-type(18) {
animation-delay: 2.8s;
}
.mainvisual__text-main span:nth-of-type(19) {
animation-delay: 2.9s;
}
.mainvisual__text-main span:nth-of-type(20) {
animation-delay: 3s;
}
.mainvisual__text-main span:nth-of-type(21) {
animation-delay: 3.1s;
}
.mainvisual__text-main span:nth-of-type(22) {
animation-delay: 3.2s;
}
.mainvisual__text-main span:nth-of-type(23) {
animation-delay: 3.3s;
}
.mainvisual__text-main span:nth-of-type(24) {
animation-delay: 3.4s;
}
.mainvisual__text-main span:nth-of-type(25) {
animation-delay: 3.5s;
}
.mainvisual__text-main span:nth-of-type(26) {
animation-delay: 3.6s;
}
.mainvisual__text-main span:nth-of-type(27) {
animation-delay: 3.7s;
}
.mainvisual__text-main span:nth-of-type(28) {
animation-delay: 3.8s;
}
.mainvisual__text-main span:nth-of-type(29) {
animation-delay: 3.9s;
}
.mainvisual__text-main span:nth-of-type(30) {
animation-delay: 4s;
}
@keyframes main-type {
0% {
opacity: 0;
transform: scale(2);
}
100% {
opacity: 1;
transform: scale(1);
}
}
@media screen and (max-width: 768px) {
.mainvisual__text-main {
top: 73vw;
}
}
@media screen and (max-width: 479px) {
.mainvisual__text-main {
font-size: 4.3rem;
top: 63vh;
}
}
#scroll_down {
font-weight: 800;
font-style: italic;
font-family: 'Montserrat','Noto Sans JP', sans-serif;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
position: absolute;
left: calc(100% - 50px);
top: calc(50% - 80px);
font-size: 1.2rem;
color: #fff;
}
#scroll_down:after {
content: "";
width: 0;
height: 0;
position: absolute;
border-style: solid;
border-width: 0 1px 60px 0px;
right: 18px;
margin-top: 1rem;
}
.page-heading__content {
margin: 0;
padding: 0;
}
.page-heading__content--left {
text-align: left;
}
.page-heading__content--center {
text-align: center;
}
.page-heading__content--right {
text-align: right;
}
.page-heading__text-main {
font-weight: 800;
font-style: italic;
font-family: 'Montserrat','Noto Sans JP', sans-serif;
font-size: 4.0rem;
}
.page-heading__text-main:after {
display: block;
max-width: 240px;
padding-top: 2.4rem;
border-bottom: 3px solid #000;
content: "";
}
.page-heading__content--left .page-heading__text-main::after {
margin-left: 0;
margin-right: auto;
}
.page-heading__content--center .page-heading__text-main::after {
margin-left: auto;
margin-right: auto;
}
.page-heading__content--right .page-heading__text-main::after {
margin-left: auto;
margin-right: 0;
}
.page-heading__text-sub {
font-weight: 400;
font-size: 1.6rem;
color: #000;
padding-top: 2.4rem;
}
.page-heading__message {
max-width: 800px;
margin: 0 auto;
padding-top: 6.4rem;
color: #8D877D;
font-weight: 400;
font-size: 1.6rem;
text-align: center;
}
.page-heading-sub__content {
margin: 0;
padding: 0;
}
.page-heading-sub__content--left {
text-align: left;
}
.page-heading-sub__content--center {
text-align: center;
}
.page-heading-sub__content--right {
text-align: right;
}
.page-heading-sub__text {
position: relative;
font-size: 2.4rem;
}
.page-heading-sub__text:before {
display: inline-block;
vertical-align: middle;
width: 6px;
height: 1.6em;
margin-right: .8rem;
border-radius: 3px;
background: #1F1F1F;
content: "";
}
.page-heading-sub__message {
margin: 0 auto;
padding-top: 1.6rem;
color: #8D877D;
font-weight: 400;
font-size: 1.6rem;
}
#contact {
background-image: url(//storage-t.co.jp/wp-content/themes/storage/img/bg.jpg);
background-size: cover;
background-position: center 0;
background-repeat: no-repeat;
min-height: 460px;
overflow: hidden;
position: relative;
}
@media screen and (max-width: 479px) {
#contact {
background-position: center 0;
}
}
.contact__container {
position: relative;
max-width: 1366px;
margin: 0 auto;
padding: 12.4rem 5vw;
overflow: hidden;
padding: 9rem 5vw;
}
@media screen and (max-width: 479px) {
.contact__container {
padding: 6.2rem 5vw;
}
}
.contact__heading {
display: flex;
align-items: center;
line-height: .9;
color: #fff;
}
@media screen and (max-width: 479px) {
.contact__heading {
flex-direction: column;
}
}
.contact__heading-main {
font-weight: 800;
font-style: italic;
font-family: 'Montserrat','Noto Sans JP', sans-serif;
font-size: 10rem;
margin-right: 4rem;
}
@media screen and (max-width: 479px) {
.contact__heading-main {
font-size: 5rem;
}
}
.contact__heading-sub {
font-size: 1.8rem;
}
@media screen and (max-width: 479px) {
.contact__heading-sub {
font-size: 1.5rem;
}
}
.contact__content {
display: flex;
justify-content: space-between;
margin-top: 50px; }
@media screen and (max-width: 1200px) {
.contact__content {
flex-direction: column;
align-items: center;
}
}
.contact__content .button {
justify-content: center;
align-items: center;
position: relative;
border: none;
line-height: 1;
text-decoration: none;
text-align: center;
outline: none;
cursor: pointer;
transition: box-shadow .8s, text-shadow .8s, background-color .8s, border-color .8s, opacity .8s;
font-weight: 800;
font-style: italic;
font-family: 'Montserrat','Noto Sans JP', sans-serif;
width: 570px;
height: 100px;
background-color: #fff;
}
.contact__content .button a {
display: flex;
align-items: center;
justify-content: center;
}
@media screen and (max-width: 479px) {
.contact__content .button a {
flex-direction: column;
}
}
.contact__content .button:hover {
background-color: #8D877D;
color: #fff;
}
.contact__content .button:hover a {
color: #fff;
}
.contact__content .button:hover .tel::before {
content: url(//storage-t.co.jp/wp-content/themes/storage/img/icon_phone_white.svg);
transition: opacity .8s;
}
.contact__content .button:hover .contact_form::before {
content: url(//storage-t.co.jp/wp-content/themes/storage/img/icon_mail_white.svg);
transition: opacity .8s;
}
.contact__content .button img {
max-width: 50px;
}
@media screen and (max-width: 479px) {
.contact__content .button {
width: 90vw;
height: 32vw;
margin-bottom: 5vw;
}
}
.contact__content .tel-to {
padding: 30px 0;
margin-bottom: 20px;
}
.contact__content .time {
font-size: 1.5rem;
line-height: 1.5;
margin-right: 20px;
}
.contact__content .time span {
font-size: 1.2rem;
}
.contact__content .tel {
font-size: 3.2rem;
display: flex;
}
@media screen and (max-width: 479px) {
.contact__content .tel {
justify-content: center;
}
}
.contact__content .tel::before {
content: url(//storage-t.co.jp/wp-content/themes/storage/img/icon_phone.svg);
display: inline-block;
vertical-align: middle;
-webkit-transform: scale(1);
transform: scale(1);
}
.contact__content .form-to {
font-size: 2.5rem;
padding: 35px 0;
}
@media screen and (max-width: 479px) {
.contact__content .form-to {
padding: 48px 0;
}
}
.contact__content .form-to .contact_form::before {
content: url(//storage-t.co.jp/wp-content/themes/storage/img/icon_mail_black.svg);
display: inline-block;
vertical-align: middle;
-webkit-transform: scale(1);
transform: scale(1);
margin-right: 7rem;
}
@media screen and (max-width: 479px) {
.contact__content .form-to .contact_form::before {
margin-right: 2rem;
}
}
.footer {
background-color: #E2D5C4;
}
.footer__container {
max-width: 1366px;
margin: 0 auto;
}
.footer__content__top {
position: relative;
max-width: 1366px;
margin: 0 auto;
padding: 12.4rem 5vw;
overflow: hidden;
padding: 3.5rem 5vw;
display: flex;
justify-content: space-between;
}
@media screen and (max-width: 479px) {
.footer__content__top {
padding: 6.2rem 5vw;
}
}
@media screen and (max-width: 1050px) {
.footer__content__top {
flex-direction: column;
align-items: center;
}
}
@media screen and (max-width: 479px) {
.footer__content__top {
flex-direction: column;
padding: 5rem 5vw;
}
}
.footer__content__top .contents__l {
font-size: 1.4rem;
}
@media screen and (max-width: 1050px) {
.footer__content__top .contents__l {
text-align: center;
margin-bottom: 3rem;
}
}
.footer__content__top #logo_foot {
margin-bottom: 50px;
}
@media screen and (max-width: 1050px) {
.footer__content__top #logo_foot {
margin: 0 auto;
}
}
.footer__content__top #logo_title {
font-weight: 700;
margin-bottom: 10px;
}
.footer__content__top p {
line-height: 1.6;
}
.footer__content__top #icon_insta {
margin-top: 20px;
}
@media screen and (max-width: 479px) {
.footer__content__top #icon_insta img {
margin: 0 auto;
}
}
.footer__content__top .contents__r {
display: flex;
}
@media screen and (max-width: 479px) {
.footer__content__top .contents__r {
display: block;
width: 100%;
}
}
@media screen and (max-width: 479px) {
.footer__content__top .contents__r dl {
display: inline-block;
margin: 1rem;
vertical-align: top;
}
}
.footer__content__top .contents__r dl:not(:first-child) {
margin-left: 50px;
}
@media screen and (max-width: 479px) {
.footer__content__top .contents__r dl:not(:first-child) {
margin-left: 1rem;
}
}
.footer__content__top .contents__r dt {
font-size: 1.5rem;
font-weight: 700;
}
.footer__content__top .contents__r dd {
font-size: 1.3rem;
margin-left: 2rem;
line-height: 2.5;
}
.footer__menu {
display: flex;
flex-direction: column;
list-style: none;
}
@media screen and (max-width: 479px) {
.footer__menu {
padding-left: 7rem;
display: inline-block;
}
}
.footer__menu-item {
margin-left: 50px;
font-size: 1.5rem;
font-weight: 700;
}
@media screen and (max-width: 479px) {
.footer__menu-item {
margin-left: 0;
}
}
.footer__menu-item:first-child {
line-height: .5;
margin-bottom: 20px;
}
.footer__menu-item:not(:first-child) {
line-height: 3;
}
.footer__menu-item-link {
-webkit-transition: all .5s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.footer__copy {
padding: 1.6rem 0;
color: #8D877D;
font-size: 1.2rem;
text-align: center;
}
.footer #footer__content__bottom {
display: flex;
justify-content: space-between;
background-color: #fff;
}
@media screen and (max-width: 479px) {
.footer #footer__content__bottom {
flex-direction: column;
}
}
.footer #footer__content__bottom ul {
display: flex;
}
@media screen and (max-width: 479px) {
.footer #footer__content__bottom ul {
margin: 0 0 0 -1.4rem;
}
}
.footer #footer__content__bottom ul li {
list-style: none;
margin-right: 3rem;
font-size: 1.2rem;
}
@media screen and (max-width: 479px) {
.footer #footer__content__bottom ul li {
margin-right: 1rem;
display: inline-block;
}
}
.footer #footer__content__bottom ul li a {
color: #8D877D;
}
.footer #footer__content__bottom .footer__copy {
margin-right: 50px;
font-weight: 800;
color: #1F1F1F;
font-family: 'Montserrat', sans-serif;
}
@media screen and (max-width: 479px) {
.footer #footer__content__bottom .footer__copy {
padding: 0;
width: 100%;
}
}
.button-guide {
display: flex;
width: 320px;
height: 70px;
background-color: #fff;
justify-content: center;
align-items: center;
position: relative;
border: none;
line-height: 1;
text-decoration: none;
text-align: center;
outline: none;
cursor: pointer;
transition: all 0.5s ease;
top: 60px;
display: flex;
width: 100%;
max-width: 60rem;
margin: 0 auto;
padding: 1.6rem;
border: none;
border-radius: 8px;
background: #8D877D;
color: #000;
font-weight: 400;
font-size: 1.6rem;
}
.button-guide::before {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 5px 0 5px 18px;
border-color: transparent transparent transparent #1F1F1F;
position: relative;
right: 3rem;
transition: all 0.5s ease;
}
.button-guide:hover {
background-color: #8D877D;
}
.button-guide:hover a {
color: #fff;
}
.button-guide:hover::before {
border-color: transparent transparent transparent #fff;
right: 2rem;
}
@media screen and (max-width: 479px) {
.button-guide {
width: 80vw;
height: 8vh;
top: 5vw;
}
}
.button-guide:hover, .button-guide:focus {
background: #1F1F1F;
color: #ffffff;
}
.button-detail {
display: flex;
flex-wrap: wrap;
max-width: 60rem;
margin: 0 auto;
}
.button-detail .button-detail__button, .button-detail .button-detail__button--back, .button-detail .button-detail__button--prev, .button-detail .button-detail__button--next {
display: flex;
width: 320px;
height: 70px;
background-color: #fff;
justify-content: center;
align-items: center;
position: relative;
border: none;
line-height: 1;
text-decoration: none;
text-align: center;
outline: none;
cursor: pointer;
transition: all 0.5s ease;
top: 60px;
margin-bottom: 2.4rem;
padding: 1.6rem 2.4rem;
border-radius: 0.4rem;
background: #8D877D;
color: #000;
}
.button-detail .button-detail__button::before, .button-detail .button-detail__button--back::before, .button-detail .button-detail__button--prev::before, .button-detail .button-detail__button--next::before {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 5px 0 5px 18px;
border-color: transparent transparent transparent #1F1F1F;
position: relative;
right: 3rem;
transition: all 0.5s ease;
}
.button-detail .button-detail__button:hover, .button-detail .button-detail__button--back:hover, .button-detail .button-detail__button--prev:hover, .button-detail .button-detail__button--next:hover {
background-color: #8D877D;
}
.button-detail .button-detail__button:hover a, .button-detail .button-detail__button--back:hover a, .button-detail .button-detail__button--prev:hover a, .button-detail .button-detail__button--next:hover a {
color: #fff;
}
.button-detail .button-detail__button:hover::before, .button-detail .button-detail__button--back:hover::before, .button-detail .button-detail__button--prev:hover::before, .button-detail .button-detail__button--next:hover::before {
border-color: transparent transparent transparent #fff;
right: 2rem;
}
@media screen and (max-width: 479px) {
.button-detail .button-detail__button, .button-detail .button-detail__button--back, .button-detail .button-detail__button--prev, .button-detail .button-detail__button--next {
width: 80vw;
height: 8vh;
top: 5vw;
}
}
.button-detail .button-detail__button:hover, .button-detail .button-detail__button--back:hover, .button-detail .button-detail__button--prev:hover, .button-detail .button-detail__button--next:hover, .button-detail .button-detail__button:focus, .button-detail .button-detail__button--back:focus, .button-detail .button-detail__button--prev:focus, .button-detail .button-detail__button--next:focus {
background: #1F1F1F;
color: #fff;
}
.button-detail__button--back {
width: 100%;
}
.button-detail__button--back:before {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'liga';
content: "\e896";
margin-right: 0.8rem;
}
.button-detail__button--prev {
width: 100%;
}
@media screen and (min-width: 1366px) {
.button-detail__button--prev {
width: calc(50% - 15px);
margin-right: 15px;
}
}
.button-detail__button--prev:before {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'liga';
content: "\e5cb";
margin-right: 0.8rem;
}
.button-detail__button--next {
width: 100%;
}
@media screen and (min-width: 1366px) {
.button-detail__button--next {
width: calc(50% - 15px);
margin-left: 15px;
}
}
.button-detail__button--next:after {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'liga';
content: "\e5cc";
margin-left: 0.8rem;
}
#intro-service .intro__container {
background-image: url(//storage-t.co.jp/wp-content/themes/storage/img/intro_service.jpg);
}
#intro-virutect .intro__container {
background-image: url(//storage-t.co.jp/wp-content/themes/storage/img/intro_virutect.jpg);
}
#intro-about-storage .intro__container {
background-image: url(//storage-t.co.jp/wp-content/themes/storage/img/intro_about-storage.jpg);
}
#intro-process .intro__container {
background-image: url(//storage-t.co.jp/wp-content/themes/storage/img/intro_process.jpg);
}
#intro-works .intro__container {
background-image: url(//storage-t.co.jp/wp-content/themes/storage/img/intro_works.jpg);
}
#intro-at-254 .intro__container {
background-image: url(//storage-t.co.jp/wp-content/themes/storage/img/intro_at-254.jpg);
}
#intro-works-article .intro__container {
background-image: url(//storage-t.co.jp/wp-content/themes/storage/img/intro_works-article.jpg);
}
#intro-company .intro__container {
background-image: url(//storage-t.co.jp/wp-content/themes/storage/img/intro_company.jpg);
}
#intro-message .intro__container {
background-image: url(//storage-t.co.jp/wp-content/themes/storage/img/intro_message.jpg);
}
#intro-member .intro__container {
background-image: url(//storage-t.co.jp/wp-content/themes/storage/img/intro_member.jpg);
}
#intro-news .intro__container {
background-image: url(//storage-t.co.jp/wp-content/themes/storage/img/intro_news.jpg);
}
#intro-detail .intro__container {
background-image: url(//storage-t.co.jp/wp-content/themes/storage/img/intro_detail.jpg);
}
#intro-blog .intro__container {
background-image: url(//storage-t.co.jp/wp-content/themes/storage/img/intro_blog.jpg);
}
#intro-contact .intro__container {
background-image: url(//storage-t.co.jp/wp-content/themes/storage/img/intro_contact.jpg);
}
#intro-about_site .intro__container {
background-image: url(//storage-t.co.jp/wp-content/themes/storage/img/intro_about_site.jpg);
}
#intro-sitemap .intro__container {
background-image: url(//storage-t.co.jp/wp-content/themes/storage/img/intro_sitemap.jpg);
}
#intro-poricy .intro__container {
background-image: url(//storage-t.co.jp/wp-content/themes/storage/img/intro_poricy.jpg);
}
.intro {
margin-top: 70px;
height: 568px;
background-repeat: no-repeat;
background-position: calc(50% - 534px) bottom;
background-image: url(//storage-t.co.jp/wp-content/themes/storage/img/corner.svg);
}
@media screen and (max-width: 479px) {
.intro {
margin-top: 50px;
}
}
.intro__container {
max-width: 1225px;
height: 500px;
margin: 0 auto;
background-repeat: no-repeat;
background-position: 50% 0;
}
.intro__text {
display: flex;
flex-direction: column;
height: 100%;
color: #fff;
text-align: center;
background-repeat: no-repeat;
background-position: 50%;
background-image: url(//storage-t.co.jp/wp-content/themes/storage/img/logo_line.svg);
padding-top: 180px;
line-height: 1.5;
}
@media screen and (max-width: 479px) {
.intro__text {
padding-top: 57%;
}
}
.intro__text-main {
font-weight: 800;
font-style: italic;
font-family: 'Montserrat','Noto Sans JP', sans-serif;
font-size: 8rem;
line-height: 1;
}
@media screen and (max-width: 479px) {
.intro__text-main {
font-size: 5rem;
}
}
.intro__text-sub {
font-size: 1.2rem;
}
.intro__breadcrumb {
width: 1225px;
margin: 0 auto;
padding: 0;
list-style: none;
text-align: right;
}
@media screen and (max-width: 479px) {
.intro__breadcrumb {
width: 90%;
margin: 1rem auto;
line-height: 1.1;
}
}
.intro__breadcrumb li {
display: inline; list-style: none;
font-size: 1.2rem;
}
.intro__breadcrumb li a {
text-decoration: none;
color: #888;
}
.intro__breadcrumb li a:hover {
text-decoration: underline;
}
.intro__breadcrumb li:after { content: '>';
color: #888;
padding: 0 0.2em;
}
.intro__breadcrumb li:last-child:after {
content: '';
}
.breadcrumb {
width: 1225px;
margin: 0 auto;
padding: 0;
text-align: right;
font-size: 1.2rem;
}
@media screen and (max-width: 479px) {
.breadcrumb {
width: 90%;
margin: 1rem auto;
line-height: 1.1;
}
}
.breadcrumb a {
text-decoration: none;
color: #888;
}
.breadcrumb a:hover {
text-decoration: underline;
}
#service main {
background-color: #1F1F1F;
display: block;
}
#service .breadcrumb {
color: #888;
}
#intro-service:before {
content: "";
position: absolute;
border-bottom: 90px solid transparent;
border-right: calc((100vw - 1243px)/ 2) solid #fff;
border-top: 270px solid #fff;
}
.pagination__list,
.pagination .page-numbers {
display: flex;
flex-wrap: wrap;
justify-content: center;
list-style-type: none;
margin: 0;
padding: 0;
}
.pagination__list-item,
.pagination .page-numbers > li {
margin: 0.3rem;
}
.pagination .pagination__link,
.pagination .page-numbers > li > a, .pagination .pagination__link--prev,
.pagination .page-numbers > li > a--prev,
.pagination .page-numbers > li > a.prev, .pagination .pagination__link--next,
.pagination .page-numbers > li > a--next,
.pagination .page-numbers > li > a.next {
-webkit-transition: background-color 0.5s;
-moz-transition: background-color 0.5s;
-ms-transition: background-color 0.5s;
-o-transition: background-color 0.5s;
transition: background-color 0.5s;
display: flex;
justify-content: center;
align-items: center;
padding: 1.2rem 1.6rem;
border-radius: 6px;
font-weight: 400;
font-size: 1.6rem;
line-height: 1;
text-align: center;
cursor: pointer;
}
.pagination__link,
.pagination .page-numbers > li > a {
background-color: #8D877D;
color: #000;
}
.pagination__link:hover, .pagination__link:focus,
.pagination .page-numbers > li > a:hover,
.pagination .page-numbers > li > a:focus {
background-color: #1F1F1F;
color: #fff;
}
.pagination__link--prev, .pagination__link.prev,
.pagination .page-numbers > li > a--prev,
.pagination .page-numbers > li > a.prev {
min-width: 12rem;
background-color: #8D877D;
color: #000;
}
.pagination__link--prev:before, .pagination__link.prev:before,
.pagination .page-numbers > li > a--prev:before,
.pagination .page-numbers > li > a.prev:before {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'liga';
content: "\e5cb";
display: inline-block;
margin-right: 0.6rem;
transition: transform 0.2s;
}
.pagination__link--prev:hover, .pagination__link--prev:focus, .pagination__link.prev:hover, .pagination__link.prev:focus,
.pagination .page-numbers > li > a--prev:hover,
.pagination .page-numbers > li > a--prev:focus,
.pagination .page-numbers > li > a.prev:hover,
.pagination .page-numbers > li > a.prev:focus {
background-color: #1F1F1F;
color: #fff;
}
.pagination__link--prev:hover:before, .pagination__link--prev:focus:before, .pagination__link.prev:hover:before, .pagination__link.prev:focus:before,
.pagination .page-numbers > li > a--prev:hover:before,
.pagination .page-numbers > li > a--prev:focus:before,
.pagination .page-numbers > li > a.prev:hover:before,
.pagination .page-numbers > li > a.prev:focus:before {
transform: translateX(-4px);
}
.pagination__link--next, .pagination__link.next,
.pagination .page-numbers > li > a--next,
.pagination .page-numbers > li > a.next {
min-width: 12rem;
background-color: #8D877D;
color: #000;
}
.pagination__link--next:after, .pagination__link.next:after,
.pagination .page-numbers > li > a--next:after,
.pagination .page-numbers > li > a.next:after {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'liga';
content: "\e5cc";
display: inline-block;
margin-left: 0.6rem;
transition: transform 0.2s;
}
.pagination__link--next:hover, .pagination__link--next:focus, .pagination__link.next:hover, .pagination__link.next:focus,
.pagination .page-numbers > li > a--next:hover,
.pagination .page-numbers > li > a--next:focus,
.pagination .page-numbers > li > a.next:hover,
.pagination .page-numbers > li > a.next:focus {
background-color: #1F1F1F;
color: #fff;
}
.pagination__link--next:hover:after, .pagination__link--next:focus:after, .pagination__link.next:hover:after, .pagination__link.next:focus:after,
.pagination .page-numbers > li > a--next:hover:after,
.pagination .page-numbers > li > a--next:focus:after,
.pagination .page-numbers > li > a.next:hover:after,
.pagination .page-numbers > li > a.next:focus:after {
transform: translateX(4px);
}
.pagination .pagination__text,
.pagination .page-numbers > li > span, .pagination .pagination__text--current,
.pagination .page-numbers > li > span--current,
.pagination .page-numbers > li > span.current, .pagination .pagination__text--dots,
.pagination .page-numbers > li > span--dots,
.pagination .page-numbers > li > span.dots {
display: flex;
justify-content: center;
align-items: center;
padding: 1.2rem 1.6rem;
border-radius: 6px;
font-weight: 400;
font-size: 1.6rem;
line-height: 1;
text-align: center;
}
.pagination__text,
.pagination .page-numbers > li > span {
background-color: #8D877D;
color: #000;
}
.pagination__text--current, .pagination__text.current,
.pagination .page-numbers > li > span--current,
.pagination .page-numbers > li > span.current {
background-color: #1F1F1F;
color: #fff;
}
.pagination__text--dots, .pagination__text.dots,
.pagination .page-numbers > li > span--dots,
.pagination .page-numbers > li > span.dots {
background-color: #8D877D;
color: #000;
}
.table-overview {
width: 100%;
line-height: 1.8;
text-align: left;
}
.table-overview tr th {
width: 16rem;
padding: .8rem;
vertical-align: top;
}
.table-overview tr td {
width: calc(100% - 16rem);
padding: .8rem 1.6rem;
vertical-align: top;
}
.about-icon {
display: flex;
flex-wrap: wrap;
max-width: 500px;
margin: 0 auto 0 auto;
}
.about-icon__image {
width: 100%;
max-width: 200px;
max-height: 200px;
margin: 0 auto;
margin-bottom: 3.2rem;
overflow: hidden;
border-radius: 100%;
}
@media screen and (min-width: 1366px) {
.about-icon__image {
margin-bottom: 0;
}
}
.about-icon__image img {
display: block;
max-width: 100%;
margin: 0 auto;
}
.about-icon__content {
width: 100%;
text-align: center;
}
@media screen and (min-width: 1366px) {
.about-icon__content {
display: flex;
flex-direction: column;
justify-content: center;
width: calc(100% - 200px);
padding-left: 2.4rem;
text-align: left;
}
}
.about-icon__content-name {
margin-bottom: 0.8rem;
font-weight: bold;
font-size: 3.2rem;
}
.about-icon__content-job {
margin-bottom: 3.2rem;
font-size: 1.6rem;
}
.skillset__item {
display: flex;
align-items: center;
}
.skillset__item:not(:first-child) {
margin-top: 1.6rem;
}
.skillset__image {
display: block;
width: 6.4rem;
height: 6.4rem;
margin-right: 1.6rem;
border-radius: 100%;
}
.skillset__content {
display: block;
width: 100%;
}
.skillset__content-title {
font-weight: 400;
font-size: 1.6rem;
}
.skillset .skillset__content-bar, .skillset .skillset__content-bar--10, .skillset .skillset__content-bar--20, .skillset .skillset__content-bar--30, .skillset .skillset__content-bar--40, .skillset .skillset__content-bar--50, .skillset .skillset__content-bar--60, .skillset .skillset__content-bar--70, .skillset .skillset__content-bar--80, .skillset .skillset__content-bar--90, .skillset .skillset__content-bar--100 {
height: 1.6rem;
margin-top: .8rem;
overflow: hidden;
border-radius: 0.8rem;
box-shadow: 0 0.4rem 0.8rem 0 rgba(0, 0, 0, 0.1);
}
.skillset .skillset__content-bar::after, .skillset .skillset__content-bar--10::after, .skillset .skillset__content-bar--20::after, .skillset .skillset__content-bar--30::after, .skillset .skillset__content-bar--40::after, .skillset .skillset__content-bar--50::after, .skillset .skillset__content-bar--60::after, .skillset .skillset__content-bar--70::after, .skillset .skillset__content-bar--80::after, .skillset .skillset__content-bar--90::after, .skillset .skillset__content-bar--100::after {
display: block;
height: 1.6rem;
border-radius: 0.8rem;
background: #1F1F1F;
content: "";
}
.skillset__content-bar--10::after {
width: 10%;
}
.skillset__content-bar--20::after {
width: 20%;
}
.skillset__content-bar--30::after {
width: 30%;
}
.skillset__content-bar--40::after {
width: 40%;
}
.skillset__content-bar--50::after {
width: 50%;
}
.skillset__content-bar--60::after {
width: 60%;
}
.skillset__content-bar--70::after {
width: 70%;
}
.skillset__content-bar--80::after {
width: 80%;
}
.skillset__content-bar--90::after {
width: 90%;
}
.skillset__content-bar--100::after {
width: 100%;
}
.about-definition {
display: flex;
flex-wrap: wrap;
}
.about-definition__term {
width: 40%;
margin-bottom: .8rem;
font-weight: 700;
font-size: 1.6rem;
}
.about-definition__term:after {
content: "：";
}
.about-definition__description {
width: 60%;
margin-bottom: .8rem;
font-size: 1.6rem;
text-align: right;
}
.works-item {
box-shadow: 0 0 1.6rem 0 rgba(0, 0, 0, 0.15);
-webkit-transition: all .5s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
display: block;
max-width: 600px;
margin: 0 auto;
padding: 0;
overflow: hidden;
border-radius: 0.8rem;
background: #fff;
color: #000;
cursor: pointer;
}
.works-item__thumbnail {
overflow: hidden;
}
.works-item__thumbnail-image {
-webkit-transition: all .5s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
display: block;
max-width: 100%;
margin: 0 auto;
}
.works-item__content {
padding: 0.8rem;
}
@media (min-width: 992px) {
.works-item__content {
padding: 1.6rem;
}
}
.works-item__content-title {
color: #000;
font-weight: 400;
font-size: 1.6rem;
text-align: center;
}
.works-item:hover {
box-shadow: 0 0 2.4rem 0 rgba(0, 0, 0, 0.3);
}
.works-item:hover .works-item__thumbnail-image {
transform: scale(1.1);
}
.works-item:hover .works-item__button-more {
background: #000;
color: #fff;
}
.works-item:hover .works-item__button-more:after {
transform: translateX(4px);
}  #top-flagship {
background-image: url(//storage-t.co.jp/wp-content/themes/storage/img/bg_wood.jpg);
background-size: cover;
background-color: #e8d9c9;
background-position: left 0;
background-repeat: no-repeat;
min-height: 1900px;
overflow: hidden;
}
@media screen and (max-width: 479px) {
#top-flagship {
background-position: center 0;
min-height: 180vh;
}
}
.top-flagship__container {
position: relative;
max-width: 1366px;
margin: 0 auto;
padding: 12.4rem 5vw;
overflow: hidden;
}
@media screen and (max-width: 479px) {
.top-flagship__container {
padding: 6.2rem 5vw;
}
}
.top-flagship__content {
max-width: 1366px;
margin: 0 auto;
position: relative;
}
.top-flagship__heading {
margin-bottom: 6.4rem;
}
.top-flagship__heading h2 {
color: #fff;
font-weight: 800;
font-style: italic;
font-family: 'Montserrat','Noto Sans JP', sans-serif;
font-size: 14rem;
display: flex;
flex-wrap: wrap;
line-height: 13rem;
position: relative;
z-index: 5;
top: 120px;
left: calc(50% - 579px);
width: 918px;
}
@media screen and (max-width: 479px) {
.top-flagship__heading h2 {
font-size: 5rem;
line-height: 5rem;
top: 10vh;
left: calc(50% - 45vw);
}
}
.top-flagship__heading h2 p#txt_flagship {
width: 918px;
}
.top-flagship__heading h2 p.text-sub {
font-size: 2rem;
width: 270px;
text-align: right;
line-height: 5rem;
}
@media screen and (max-width: 479px) {
.top-flagship__heading h2 p.text-sub {
width: 14vw;
font-size: 1rem;
}
}
.top-flagship #txt_vp1 .triangle_tr {
border-style: solid;
border-width: 0 370px 370px 0;
border-color: transparent #1f1f1f transparent transparent;
position: absolute;
left: 460px;
}
@media screen and (max-width: 479px) {
.top-flagship #txt_vp1 .triangle_tr {
border-width: 0 20vw 20vw 0;
left: 47vw;
top: 5vw;
}
}
.top-flagship #txt_vp1 .triangle_bl {
border-style: solid;
border-width: 370px 0 0 370px;
border-color: transparent transparent transparent #1f1f1f;
position: absolute;
top: 245px;
}
@media screen and (max-width: 479px) {
.top-flagship #txt_vp1 .triangle_bl {
border-width: 20vw 0 0 20vw;
top: 32vw;
left: 7vw;
}
}
.top-flagship__img {
position: absolute;
top: 20px;
width: 830px;
}
@media screen and (max-width: 479px) {
.top-flagship__img {
width: 50vw;
}
}
.top-flagship__img img {
position: relative;
z-index: 5;
top: 40px;
left: 45px;
}
.top-flagship #txt_vp {
position: absolute;
width: 100px;
height: 500px;
top: -110px;
right: 150px;
line-height: 9rem;
}
@media screen and (max-width: 479px) {
.top-flagship #txt_vp {
right: 0vw;
width: 20vw;
}
}
.top-flagship #txt_vp p {
font-size: 8rem;
font-weight: 700;
text-align: right;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
display: inline-block;
}
@media screen and (max-width: 479px) {
.top-flagship #txt_vp p {
font-size: 3rem;
line-height: 3rem;
}
}
.top-flagship #txt_real {
width: 450px;
position: absolute;
right: 50px;
top: 410px;
text-align: right;
z-index: 25;
}
.top-flagship #txt_real span {
padding-left: 1.5rem;
}
@media screen and (max-width: 479px) {
.top-flagship #txt_real {
width: 90vw;
right: 0rem;
top: 35vh;
}
}
.top-flagship #txt_real p {
width: 370px;
position: absolute;
top: 150px;
right: 0px;
line-height: 2;
}
@media screen and (max-width: 479px) {
.top-flagship #txt_real p {
width: 90vw;
right: 5vw;
top: 15vh;
}
}
.top-flagship #txt_real h3 {
font-size: 2.4rem;
color: #fff;
line-height: 4.8rem;
background-color: #8D877D;
display: inline;
padding: 5px;
}
@media screen and (max-width: 479px) {
.top-flagship #txt_real h3 {
font-size: 1.7rem;
}
}
.top-flagship__text {
text-align: left;
font-size: 1.8rem;
}
@media screen and (max-width: 479px) {
.top-flagship__text {
font-size: 1.6rem;
background: rgba(255, 255, 255, 0.5);
padding: .55rem;
}
}
.top-flagship #txt_vp2 {
position: absolute;
top: 900px;
}
@media screen and (max-width: 479px) {
.top-flagship #txt_vp2 {
top: 80vh;
}
}
.top-flagship #txt_vp2 p {
width: 370px;
line-height: 2;
position: absolute;
left: 100px;
top: -30px;
}
@media screen and (max-width: 479px) {
.top-flagship #txt_vp2 p {
width: 90vw;
left: 5vw;
}
}
.top-flagship #txt_vp2 .top-flagship__img {
position: absolute;
top: -70px;
left: 535px;
}
@media screen and (max-width: 479px) {
.top-flagship #txt_vp2 .top-flagship__img {
left: 27vw;
top: 20vh;
}
}
.top-flagship #txt_vp2 img {
width: 718px;
top: 50px;
left: 70px;
}
@media screen and (max-width: 479px) {
.top-flagship #txt_vp2 img {
left: 14vw;
}
}
.top-flagship #txt_vp2 .triangle_tr {
right: 0px;
border-style: solid;
border-width: 0 280px 280px 0;
border-color: transparent #1f1f1f transparent transparent;
position: absolute;
}
@media screen and (max-width: 479px) {
.top-flagship #txt_vp2 .triangle_tr {
right: -19vw;
top: 5vh;
border-width: 0 20vw 20vw 0;
}
}
.top-flagship #txt_vp2 .triangle_bl {
border-style: solid;
border-width: 280px 0 0 280px;
border-color: transparent transparent transparent #1f1f1f;
position: absolute;
left: 20px;
top: 165px;
}
@media screen and (max-width: 479px) {
.top-flagship #txt_vp2 .triangle_bl {
border-width: 20vw 0 0 20vw;
top: 12vh;
left: 10vw;
}
}
.top-flagship #txt_vp2 #txt_clean {
position: absolute;
top: 300px;
left: -384px;
z-index: 3;
}
@media screen and (max-width: 479px) {
.top-flagship #txt_vp2 #txt_clean {
top: 11vh;
left: -33vw;
}
}
.top-flagship #txt_vp2 #txt_clean img {
width: 679px;
}
@media screen and (max-width: 479px) {
.top-flagship #txt_vp2 #txt_clean img {
width: 58vw;
}
}
.top-flagship #txt_vp2 #txt_finish {
font-weight: 800;
font-style: italic;
font-family: 'Montserrat','Noto Sans JP', sans-serif;
color: #fff;
font-size: 10rem;
position: absolute;
top: 260px;
right: 100px;
z-index: 10;
}
@media screen and (max-width: 479px) {
.top-flagship #txt_vp2 #txt_finish {
top: 15vh;
right: -10vh;
font-size: 3rem;
}
}
.top-flagship #txt_vp2 #txt_flagship_ss {
font-weight: 800;
font-style: italic;
font-family: 'Montserrat','Noto Sans JP', sans-serif;
color: #FFF;
font-size: 2.4rem;
top: 390px;
display: block;
width: 710px;
text-align: right;
left: 555px;
z-index: 30;
}
@media screen and (max-width: 479px) {
.top-flagship #txt_vp2 #txt_flagship_ss {
font-size: 1.2rem;
top: 44vh;
width: 90vw;
left: 5vw;
}
}
.top-flagship #txt_vp2 #txt_flagship_ss span {
position: relative;
}
.top-flagship #txt_vp2 #txt_flagship_ss span::before {
content: "";
display: inline-block;
width: 450px;
height: 2px;
background-color: #fff;
position: absolute;
top: 15px;
right: 260px;
}
@media screen and (max-width: 479px) {
.top-flagship #txt_vp2 #txt_flagship_ss span::before {
width: 100%;
top: 1vh;
right: 35vw;
}
}
.top-flagship #txt_vp2 #ViruTect_ss {
color: #fff;
font-size: 1.5rem;
top: 430px;
left: 1140px;
z-index: 30;
}
.learn_more {
background-image: url(//storage-t.co.jp/wp-content/themes/storage/img/bg_oldcar.png);
background-size: cover;
background-position: left top;
background-repeat: no-repeat;
min-height: 1130px;
overflow: hidden;
position: relative;
top: -19vw;
margin-bottom: -640px;
}
@media screen and (max-width: 479px) {
.learn_more {
min-height: 130vh;
background-position: -50vw top;
top: -75vw;
}
}
.learn_more__container {
position: absolute;
top: 260px;
width: 100%;
}
@media screen and (max-width: 479px) {
.learn_more__container {
top: 15vh;
}
}
.learn_more__content {
width: 280px;
position: absolute;
top: 120px;
right: 140px;
line-height: 2.3;
color: #fff;
}
@media screen and (max-width: 479px) {
.learn_more__content {
width: 100%;
right: -10vw;
}
}
.learn_more__content .button {
display: inline-flex;
width: 320px;
height: 70px;
background-color: #fff;
justify-content: center;
align-items: center;
position: relative;
border: none;
line-height: 1;
text-decoration: none;
text-align: center;
outline: none;
cursor: pointer;
transition: all 0.5s ease;
top: 60px;
font-weight: 800;
font-style: italic;
font-family: 'Montserrat','Noto Sans JP', sans-serif;
}
.learn_more__content .button::before {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 5px 0 5px 18px;
border-color: transparent transparent transparent #1F1F1F;
position: relative;
right: 3rem;
transition: all 0.5s ease;
}
.learn_more__content .button:hover {
background-color: #8D877D;
}
.learn_more__content .button:hover a {
color: #fff;
}
.learn_more__content .button:hover::before {
border-color: transparent transparent transparent #fff;
right: 2rem;
}
@media screen and (max-width: 479px) {
.learn_more__content .button {
width: 80vw;
height: 8vh;
top: 5vw;
}
}
.learn_more #pict_porsche {
position: absolute;
top: 360px;
left: 90px;
z-index: 20;
}
@media screen and (max-width: 479px) {
.learn_more #pict_porsche {
top: 67vh;
left: 5vw;
width: 40%;
}
}
.learn_more #pict_key {
position: absolute;
top: 507px;
left: 450px;
z-index: 20;
}
@media screen and (max-width: 479px) {
.learn_more #pict_key {
top: 67vh;
left: 55vw;
width: 40%;
}
}
.top-service__container {
position: relative;
max-width: 1366px;
margin: 0 auto;
padding: 12.4rem 5vw;
overflow: hidden;
}
@media screen and (max-width: 479px) {
.top-service__container {
padding: 6.2rem 5vw;
}
}
.top-service__heading {
margin-bottom: 6.4rem;
}
.top-service__list {
background: #fff;
box-shadow: 0 0 1.6rem 0 rgba(0, 0, 0, 0.15);
}
@media screen and (min-width: 1366px) {
.top-service__list {
display: flex;
padding: 3.2rem;
}
}
.top-service__list-item {
padding: 2.4rem 1.6rem;
}
@media screen and (min-width: 1366px) {
.top-service__list-item:not(:first-child) {
border-left: 1px dashed #8D877D;
}
}
.top-service__guide {
padding-top: 6.4rem;
}
#other_service {
background-image: url(//storage-t.co.jp/wp-content/themes/storage/img/other_service.png);
background-size: cover;
background-position: center 0;
background-repeat: no-repeat;
min-height: 2145px;
overflow: hidden;
position: relative;
}
@media screen and (max-width: 479px) {
#other_service {
background-position: center 30px;
min-height: 180vh;
}
}
.other_service__container {
position: relative;
max-width: 1366px;
margin: 0 auto;
padding: 12.4rem 5vw;
overflow: hidden;
top: 20vw;
color: #fff;
font-size: 1.5rem;
}
@media screen and (max-width: 479px) {
.other_service__container {
padding: 6.2rem 5vw;
}
}
@media screen and (max-width: 479px) {
.other_service__container .header {
margin-top: 10vh;
}
}
.other_service__heading {
font-weight: 800;
font-style: italic;
font-family: 'Montserrat','Noto Sans JP', sans-serif;
color: #fff;
font-size: 8rem;
line-height: 1;
}
@media screen and (max-width: 479px) {
.other_service__heading {
font-size: 4rem;
}
}
.other_service__heading-sub {
color: #fff;
font-size: 1.6rem;
}
.other_service__content {
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: space-between;
align-content: space-between;
width: 1200px;
height: 1390px;
}
@media screen and (max-width: 479px) {
.other_service__content {
width: 100%;
height: auto;
}
}
.other_service__article {
width: 570px;
position: relative;
border: #fff 1px solid;
padding: 2rem;
line-height: 3rem;
}
@media screen and (max-width: 479px) {
.other_service__article {
width: 100%;
margin-bottom: 5vh;
}
}
.other_service__article img {
margin: auto;
}
.other_service__article h4 {
background-color: #fff;
color: #000;
width: 300px;
text-align: center;
position: absolute;
top: 25.5rem;
left: 23.4rem;
}
@media screen and (max-width: 479px) {
.other_service__article h4 {
top: 15.5rem;
left: 3.5rem;
}
}
.other_service__article p {
margin-top: 3rem;
padding: 0 3rem;
color: #fff;
}
.other_service #home_repair {
margin-top: 110px;
}
@media screen and (max-width: 479px) {
.other_service #home_repair {
margin-top: 0;
}
}
.other_service .button {
display: inline-flex;
justify-content: space-between;
width: 466px;
height: 100px;
font-size: 2.8rem;
background-color: #1F1F1F;
justify-content: center;
align-items: center;
border: none;
line-height: 1;
text-decoration: none;
text-align: center;
outline: none;
cursor: pointer;
border: #1F1F1F 2px solid;
transition: all 0.5s ease;
font-weight: 800;
font-style: italic;
font-family: 'Montserrat','Noto Sans JP', sans-serif;
}
.other_service .button p {
font-size: 2.8rem;
display: flex;
align-items: center;
justify-content: space-around;
}
.other_service .button .txt_jan {
font-size: 1.4rem;
vertical-align: middle;
display: inline-block;
margin: 0 0 .5rem 2rem;
}
.other_service .button a {
width: 80%;
color: #fff;
}
.other_service .button::before {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 5px 0 5px 18px;
border-color: transparent transparent transparent #fff;
position: relative;
transition: all 0.5s ease;
right: 0rem;
}
@media screen and (max-width: 479px) {
.other_service .button::before {
right: 0rem;
}
}
.other_service .button:hover {
background-color: #fff;
border: #1F1F1F 2px solid;
color: #1F1F1F;
}
.other_service .button:hover a {
color: #1F1F1F;
}
.other_service .button:hover::before {
border-color: transparent transparent transparent #1F1F1F;
right: -1rem;
}
@media screen and (max-width: 479px) {
.other_service .button {
width: 90vw;
height: 8vh;
}
}
.other_service__btn {
display: flex;
justify-content: flex-end;
min-height: 200px;
}
@media screen and (max-width: 479px) {
.other_service__btn {
min-height: auto;
margin-bottom: 6.2rem;
}
}
#pure-playfulness {
min-height: 680px;
overflow: hidden;
}
#pure-playfulness::before {
content: "";
display: block;
position: fixed;
top: 121px;
left: 0;
z-index: -1;
width: 100%;
height: 100vh;
background-repeat: no-repeat;
background-position: 50% -17px;
background-image: url(//storage-t.co.jp/wp-content/themes/storage/img/family.jpg);
background-size: cover;
}
@media screen and (max-width: 479px) {
#pure-playfulness::before {
background-image: url(//storage-t.co.jp/wp-content/themes/storage/img/family_sp.jpg);
top: 0;
}
}
.pure-playfulness__container {
position: relative;
max-width: 1366px;
margin: 0 auto;
padding: 12.4rem 5vw;
overflow: hidden;
}
@media screen and (max-width: 479px) {
.pure-playfulness__container {
padding: 6.2rem 5vw;
}
}
.pure-playfulness h2 {
font-weight: 800;
font-style: italic;
font-family: 'Montserrat','Noto Sans JP', sans-serif;
color: #fff;
font-size: 4.8rem;
height: 270px;
display: flex;
justify-content: center;
margin-top: 80px;
}
@media screen and (max-width: 479px) {
.pure-playfulness h2 {
font-size: 2.8rem;
}
}
.pure-playfulness h2::after {
content: "";
background-image: url(//storage-t.co.jp/wp-content/themes/storage/img/flame_lb.svg);
display: inline-block;
height: 12.1rem;
width: 12.1rem;
vertical-align: middle;
}
@media screen and (max-width: 479px) {
.pure-playfulness h2::after {
background-size: contain;
background-repeat: no-repeat;
height: 7rem;
width: 7rem;
}
}
.pure-playfulness h2 p {
width: 530px;
line-height: 1;
align-self: center;
margin: 0;
}
@media screen and (max-width: 479px) {
.pure-playfulness h2 p {
width: 100%;
}
}
.pure-playfulness h2::before {
content: "";
background-image: url(//storage-t.co.jp/wp-content/themes/storage/img/flame_rt.svg);
display: inline-block;
height: 12.1rem;
width: 12.1rem;
align-self: flex-end;
}
@media screen and (max-width: 479px) {
.pure-playfulness h2::before {
background-size: contain;
background-repeat: no-repeat;
height: 7rem;
width: 7rem;
}
}
#about-stage {
background-image: url(//storage-t.co.jp/wp-content/themes/storage/img/bg_about-strage.svg);
background-size: cover;
background-color: #FFF;
background-position: left 0;
background-repeat: no-repeat;
min-height: 1379px;
overflow: hidden;
}
@media screen and (max-width: 479px) {
#about-stage {
background-position: center -20px;
min-height: 180vh;
}
}
.about-stage__container {
position: relative;
max-width: 1366px;
margin: 0 auto;
padding: 12.4rem 5vw;
overflow: hidden;
padding: 12.4rem 0 0 5vw;
}
@media screen and (max-width: 479px) {
.about-stage__container {
padding: 6.2rem 5vw;
}
}
.about-stage .page-heading {
width: 640px;
position: relative;
left: calc(50% - 0);
}
@media screen and (max-width: 479px) {
.about-stage .page-heading {
width: 100%;
left: 0;
}
}
.about-stage .page-heading #txt_about, .about-stage .page-heading #txt_strage {
font-weight: 800;
font-style: italic;
font-family: 'Montserrat','Noto Sans JP', sans-serif;
font-size: 12rem;
color: #1F1F1F;
line-height: 1;
}
@media screen and (max-width: 479px) {
.about-stage .page-heading #txt_about, .about-stage .page-heading #txt_strage {
font-size: 5rem;
}
}
.about-stage .page-heading #txt_about {
display: inline-block;
}
.about-stage .page-heading #txt_about_jan {
font-size: 1.6rem;
display: inline-block;
}
.about-stage .page-heading #txt_strage {
text-align: right;
}
.about-stage .page-heading #txt_strage .txt_hd {
color: #fff;
}
.about-stage__content {
max-width: 1366px;
margin: 0 auto;
color: #fff;
display: flex;
justify-content: space-between;
}
@media screen and (max-width: 479px) {
.about-stage__content {
display: block;
}
}
.about-stage__content__inr {
border-left: #fff 1px solid;
padding: 50px;
min-height: 550px;
}
@media screen and (max-width: 479px) {
.about-stage__content__inr {
padding: 0 5vw 10vw 5vw;
min-height: auto;
}
}
.about-stage__content article {
width: 50%;
}
@media screen and (max-width: 479px) {
.about-stage__content article {
width: 100%;
}
}
.about-stage__content article h3 {
font-size: 4rem;
line-height: 1.5;
margin-bottom: 7rem;
}
@media screen and (max-width: 479px) {
.about-stage__content article h3 {
font-size: 1.6rem;
margin-bottom: 4rem;
}
}
.about-stage__content article p {
line-height: 2;
font-size: 1.5rem;
}
.about-stage__content article .button {
display: inline-flex;
width: 320px;
height: 70px;
background-color: #fff;
justify-content: center;
align-items: center;
position: relative;
border: none;
line-height: 1;
text-decoration: none;
text-align: center;
outline: none;
cursor: pointer;
transition: all 0.5s ease;
top: 60px;
font-weight: 800;
font-style: italic;
font-family: 'Montserrat','Noto Sans JP', sans-serif;
}
.about-stage__content article .button::before {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 5px 0 5px 18px;
border-color: transparent transparent transparent #1F1F1F;
position: relative;
right: 3rem;
transition: all 0.5s ease;
}
.about-stage__content article .button:hover {
background-color: #8D877D;
}
.about-stage__content article .button:hover a {
color: #fff;
}
.about-stage__content article .button:hover::before {
border-color: transparent transparent transparent #fff;
right: 2rem;
}
@media screen and (max-width: 479px) {
.about-stage__content article .button {
width: 80vw;
height: 8vh;
top: 5vw;
}
}
.about-stage__content article list {
display: flex;
flex-wrap: wrap;
width: 640px;
}
.about-stage__content article list .button {
display: inline-flex;
justify-content: space-between;
width: 466px;
height: 100px;
font-size: 2.8rem;
background-color: #1F1F1F;
justify-content: center;
align-items: center;
border: none;
line-height: 1;
text-decoration: none;
text-align: center;
outline: none;
cursor: pointer;
border: #1F1F1F 2px solid;
transition: all 0.5s ease;
font-weight: 800;
font-style: italic;
font-family: 'Montserrat','Noto Sans JP', sans-serif;
width: 300px;
height: 50px;
border: #fff 1px solid;
margin: 10px;
}
.about-stage__content article list .button p {
font-size: 2.8rem;
display: flex;
align-items: center;
justify-content: space-around;
}
.about-stage__content article list .button .txt_jan {
font-size: 1.4rem;
vertical-align: middle;
display: inline-block;
margin: 0 0 .5rem 2rem;
}
.about-stage__content article list .button a {
width: 80%;
color: #fff;
}
.about-stage__content article list .button::before {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 5px 0 5px 18px;
border-color: transparent transparent transparent #fff;
position: relative;
transition: all 0.5s ease;
right: 0rem;
}
@media screen and (max-width: 479px) {
.about-stage__content article list .button::before {
right: 0rem;
}
}
.about-stage__content article list .button:hover {
background-color: #fff;
border: #1F1F1F 2px solid;
color: #1F1F1F;
}
.about-stage__content article list .button:hover a {
color: #1F1F1F;
}
.about-stage__content article list .button:hover::before {
border-color: transparent transparent transparent #1F1F1F;
right: -1rem;
}
@media screen and (max-width: 479px) {
.about-stage__content article list .button {
width: 90vw;
height: 8vh;
}
}
.about-stage__content article list .button:before {
border-width: 3px 0 3px 12px;
}
.about-stage__content article list .button p {
font-size: 1.8rem;
}
.about-stage__content article list .button .txt_jan {
font-size: 1.2rem;
}
@media screen and (max-width: 479px) {
.about-stage__content article list .button {
width: 85vw;
height: 8vh;
}
}
.about-stage__content article li {
margin-top: 70px;
display: inline-block;
}
.about-stage__content .content__right {
margin-top: 60px;
}
#news {
overflow: hidden;
background-color: #fff;
}
@media screen and (max-width: 479px) {
#news {
background-position: center -120px;
}
}
.news__container {
position: relative;
max-width: 1366px;
margin: 0 auto;
padding: 12.4rem 5vw;
overflow: hidden;
padding: 9rem 5vw;
}
@media screen and (max-width: 479px) {
.news__container {
padding: 6.2rem 5vw;
}
}
.news .page-heading img {
margin: 0 auto;
}
.news .page-heading h2 {
display: flex;
flex-direction: column;
line-height: .9;
position: relative;
top: -30px;
left: 30px;
}
.news .page-heading h2 span {
display: block;
}
.news .page-heading h2 .txt_en {
font-weight: 800;
font-style: italic;
font-family: 'Montserrat','Noto Sans JP', sans-serif;
font-size: 5.2rem;
}
.news .page-heading h2 .txt_jan {
font-size: 1.4rem;
}
.news__content {
display: flex;
justify-content: space-between;
}
@media screen and (max-width: 479px) {
.news__content {
display: block;
}
}
.news__content .button {
display: inline-flex;
width: 100px;
height: 22px;
font-size: 1.3rem;
justify-content: center;
align-items: center;
position: relative;
border: none;
line-height: 1;
text-decoration: none;
text-align: center;
outline: none;
cursor: pointer;
transition: all 0.5s ease;
border-bottom: 1px #1F1F1F solid;
font-weight: 800;
font-style: italic;
font-family: 'Montserrat','Noto Sans JP', sans-serif;
margin: 20px 0 0 32px;
}
.news__content .button::before {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 3px 0 3px 10px;
border-color: transparent transparent transparent #1F1F1F;
position: relative;
right: 1rem;
transition: all 0.5s ease;
}
.news__content .button:hover {
border-bottom: 1px #B9B9B9 solid;
}
.news__content .button:hover a {
color: #B9B9B9;
}
.news__content .button:hover:before {
right: 0.5rem;
border-color: transparent transparent transparent #B9B9B9;
}
@media screen and (max-width: 479px) {
.news__content .button {
width: 70vw;
height: 10vw;
}
}
@media screen and (max-width: 479px) {
.news__content .button {
margin-bottom: 5vw;
}
}
.news__content articre {
width: 82%;
}
.news__content articre a {
transform: all 0.5s;
}
.news__content articre a li {
list-style: none;
border-bottom: #E6E6E6 1px solid;
display: flex;
justify-content: flex-start;
font-size: 1.5rem;
align-items: center;
}
@media screen and (max-width: 479px) {
.news__content articre a li {
align-items: flex-start;
flex-direction: column;
line-height: 2;
}
}
.news__content articre a li .date {
color: #8D877D;
font-size: 1.2rem;
}
.news__content articre a li .category {
background-color: #1F1F1F;
color: #fff;
height: 20px;
width: 100px;
margin: 0 50px 0 30px;
text-align: center;
line-height: 1.5;
font-size: 1.2rem;
}
@media screen and (max-width: 479px) {
.news__content articre a li .category {
margin: 0 50px 0 0;
}
}
.news__content articre a:hover li {
opacity: 0.8;
}
#top_blog {
background-color: #8D877D;
overflow: hidden;
}
@media screen and (max-width: 479px) {
#top_blog {
background-position: center -120px;
}
}
.top_blog__container {
position: relative;
max-width: 1366px;
margin: 0 auto;
padding: 12.4rem 5vw;
overflow: hidden;
}
@media screen and (max-width: 479px) {
.top_blog__container {
padding: 6.2rem 5vw;
}
}
.top_blog .page-heading img {
margin: 0 auto;
}
.top_blog .page-heading h2 {
display: flex;
flex-direction: column;
line-height: 1.3;
color: #fff;
text-align: center;
}
.top_blog .page-heading h2 span {
display: block;
}
.top_blog .page-heading h2 .txt_en {
font-weight: 800;
font-style: italic;
font-family: 'Montserrat','Noto Sans JP', sans-serif;
font-size: 5.2rem;
}
.top_blog .page-heading h2 .txt_jan {
font-size: 1.4rem;
}
.top_blog__content__inr {
display: flex;
justify-content: space-between;
}
@media screen and (max-width: 479px) {
.top_blog__content__inr {
flex-direction: column;
}
}
.top_blog__content article {
width: 30%;
padding: 0;
transition: all 0.5s;
}
.top_blog__content article a {
color: #fff;
}
.top_blog__content article:hover li {
opacity: 0.8;
}
@media screen and (max-width: 479px) {
.top_blog__content article {
width: 100%;
}
}
.top_blog__content li {
list-style: none;
display: flex;
font-size: 1.5rem;
line-height: 2;
flex-wrap: wrap;
align-items: center;
}
@media screen and (max-width: 479px) {
.top_blog__content li {
align-items: flex-start;
flex-direction: column;
}
}
@media screen and (max-width: 479px) {
.top_blog__content li.thumbnail {
margin-top: 10vw;
}
}
.top_blog__content li .date {
font-size: 1.2rem;
margin-top: 15px;
}
.top_blog__content li .category {
margin: 30px 0 15px 1rem;
padding: 0 2.5rem;
text-align: center;
line-height: 1.5;
font-size: 1.2rem;
border: 1px #FFF solid;
background-color: transparent;
}
@media screen and (max-width: 479px) {
.top_blog__content li .category {
margin: 0;
}
}
.top_blog__content .button {
display: inline-flex;
width: 100px;
height: 22px;
font-size: 1.3rem;
justify-content: center;
align-items: center;
position: relative;
border: none;
line-height: 1;
text-decoration: none;
text-align: center;
outline: none;
cursor: pointer;
border-bottom: 1px white solid;
transition: all 0.5s ease;
font-weight: 800;
font-style: italic;
font-family: 'Montserrat','Noto Sans JP', sans-serif;
margin: 0 0 40px calc(100% - 100px);
}
.top_blog__content .button a {
color: #fff;
}
.top_blog__content .button::before {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 3px 0 3px 10px;
border-color: transparent transparent transparent #fff;
position: relative;
right: 1rem;
transition: all 0.5s ease;
}
.top_blog__content .button:hover {
opacity: 0.8;
border-bottom: 1px rgba(255, 255, 255, 0.8) solid;
}
.top_blog__content .button:hover:before {
right: 0.5rem;
}
@media screen and (max-width: 479px) {
.top_blog__content .button {
width: 70vw;
height: 10vw;
}
}
@media screen and (max-width: 479px) {
.top_blog__content .button {
margin: 0 10vw;
}
}
.contact-guide {
padding: 12.4rem 15px;
}
.contact-guide__heading {
margin: 0 0 4.8rem 0;
text-align: center;
}
.contact-guide__heading-main {
font-weight: 800;
font-style: italic;
font-family: 'Montserrat','Noto Sans JP', sans-serif;
font-size: 4.8rem;
}
.contact-guide__heading-main:after {
display: block;
max-width: 300px;
margin: 1.6rem auto 1.6rem auto;
border-bottom: 3px solid #222222;
content: "";
}
.contact-guide__heading-sub {
font-weight: 400;
font-size: 1.4rem;
}
.contact-guide__message {
margin: 0 0 4.8rem 0;
color: #8D877D;
font-size: 1.6rem;
text-align: center;
}
.contact-guide__list-item {
margin: 0 0 2.4rem 0;
text-align: center;
}
.contact-guide__button {
display: inline-flex;
width: 320px;
height: 70px;
background-color: #fff;
justify-content: center;
align-items: center;
position: relative;
border: none;
line-height: 1;
text-decoration: none;
text-align: center;
outline: none;
cursor: pointer;
transition: all 0.5s ease;
width: 100%;
max-width: 600px;
padding: 1.6rem;
border: 1px solid #1F1F1F;
border-radius: 50px;
background: #1F1F1F;
color: #ffffff;
}
.contact-guide__button::before {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 5px 0 5px 18px;
border-color: transparent transparent transparent #1F1F1F;
position: relative;
right: 3rem;
transition: all 0.5s ease;
}
.contact-guide__button:hover {
background-color: #8D877D;
}
.contact-guide__button:hover a {
color: #fff;
}
.contact-guide__button:hover::before {
border-color: transparent transparent transparent #fff;
right: 2rem;
}
@media screen and (max-width: 479px) {
.contact-guide__button {
width: 80vw;
height: 8vh;
top: 5vw;
}
}
.contact-guide__button:hover {
background: #121212;
}
.contact-form__container {
position: relative;
max-width: 1366px;
margin: 0 auto;
padding: 12.4rem 5vw;
overflow: hidden;
}
@media screen and (max-width: 479px) {
.contact-form__container {
padding: 6.2rem 5vw;
}
}
.contact-form__heading {
margin-bottom: 3.2rem;
}
.contact-form__content {
margin: 0 auto;
padding: 3.2rem 1rem;
background: #fff;
border: 4px solid #efefef;
}
@media (min-width: 992px) {
.contact-form__content {
padding: 6.4rem 4rem;
}
}
.contact-form__form {
max-width: 850px;
margin: 0 auto 1.6rem auto;
}
@media (min-width: 992px) {
.contact-form__form {
margin: 0 auto 6.4rem auto;
}
}
.contact-form__button {
text-align: center;
}
.contact-form__button-submit {
display: inline-flex;
width: 320px;
height: 70px;
background-color: #fff;
justify-content: center;
align-items: center;
position: relative;
border: none;
line-height: 1;
text-decoration: none;
text-align: center;
outline: none;
cursor: pointer;
transition: all 0.5s ease;
background: #1F1F1F;
padding: 1em 3em;
color: #fff;
border-radius: 50px;
width: 100%;
max-width: 100%;
}
.contact-form__button-submit::before {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 5px 0 5px 18px;
border-color: transparent transparent transparent #1F1F1F;
position: relative;
right: 3rem;
transition: all 0.5s ease;
}
.contact-form__button-submit:hover {
background-color: #8D877D;
}
.contact-form__button-submit:hover a {
color: #fff;
}
.contact-form__button-submit:hover::before {
border-color: transparent transparent transparent #fff;
right: 2rem;
}
@media screen and (max-width: 479px) {
.contact-form__button-submit {
width: 80vw;
height: 8vh;
top: 5vw;
}
}
@media (min-width: 992px) {
.contact-form__button-submit {
max-width: 240px;
}
}
.contact-form__button-submit:hover, .contact-form__button-submit:focus {
background: #121212;
}
#service .virutect {
background-image: url(//storage-t.co.jp/wp-content/themes/storage/img/hero_virutect.png);
background-position: center 50px;
background-repeat: no-repeat;
overflow: hidden;
position: relative;
}
@media screen and (max-width: 479px) {
#service .virutect {
background-size: 200%;
}
}
#service .virutect__container {
position: relative;
max-width: 1366px;
margin: 0 auto;
padding: 12.4rem 5vw;
overflow: hidden;
padding: 0 5vw;
color: #fff;
}
@media screen and (max-width: 479px) {
#service .virutect__container {
padding: 6.2rem 5vw;
}
}
#service .virutect #txt_service01 {
text-align: right;
font-size: 1.8rem;
margin-top: 5rem;
margin-bottom: 0;
line-height: 2;
}
@media screen and (max-width: 479px) {
#service .virutect #txt_service01 {
font-size: 1.3rem;
}
}
#service .virutect #txt_service01 .txt_jan {
font-size: 4rem;
margin-right: 8rem;
}
@media screen and (max-width: 479px) {
#service .virutect #txt_service01 .txt_jan {
font-size: 2rem;
}
}
#service .virutect #txt_virutect {
font-weight: 800;
font-style: italic;
font-family: 'Montserrat','Noto Sans JP', sans-serif;
font-size: 16rem;
text-align: right;
margin-right: 5rem;
line-height: 1;
}
@media screen and (max-width: 479px) {
#service .virutect #txt_virutect {
font-size: 5rem;
}
}
#service .virutect .txt_bk_white {
align-items: flex-end;
margin-top: 10px;
margin-right: 4rem;
}
@media screen and (max-width: 479px) {
#service .virutect .txt_bk_white {
font-size: 1.4rem;
}
}
.virutect__content {
margin-top: 360px;
}
.virutect__content h3 {
width: 570px;
line-height: 2.2;
font-size: 2.2rem;
}
@media screen and (max-width: 479px) {
.virutect__content h3 {
width: 100%;
line-height: 1.5;
font-size: 1.6rem;
}
}
.virutect__inr {
display: flex;
justify-content: space-between;
}
@media screen and (max-width: 479px) {
.virutect__inr {
flex-direction: column;
}
}
.virutect__inr .txt_jan {
margin-top: 50px;
font-size: 1.5rem;
line-height: 1.5;
}
.virutect__inr .txt_jan p {
margin-bottom: 3rem;
}
.virutect__bnr {
width: 976px;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15);
margin: 60px auto 4px;
z-index: 10;
position: relative;
}
@media screen and (max-width: 479px) {
.virutect__bnr {
width: 100%;
}
}
#service .sub_title {
font-size: 1.8rem;
}
@media screen and (max-width: 479px) {
#service .sub_title {
font-size: 1.2rem;
}
}
#service .sub_title .txt_jan {
font-size: 2.8rem;
}
@media screen and (max-width: 479px) {
#service .sub_title .txt_jan {
font-size: 1.6rem;
}
}
#service .txt_title {
font-weight: 800;
font-style: italic;
font-family: 'Montserrat','Noto Sans JP', sans-serif;
font-size: 10rem;
line-height: 1;
}
@media screen and (max-width: 479px) {
#service .txt_title {
font-size: 4rem;
}
}
#service .txt_bk_white {
color: #1F1F1F;
font-size: 3rem;
display: flex;
flex-direction: column;
align-items: flex-start;
margin-top: 50px;
}
@media screen and (max-width: 479px) {
#service .txt_bk_white {
font-size: 1.3rem;
}
}
#service .txt_bk_white p {
background-color: #fff;
line-height: 1.5;
display: inline-block;
padding: 0 2rem;
margin-bottom: 1rem;
}
#service .content_top {
width: 100%;
}
#service .pict_r {
background-position: right top;
background-repeat: no-repeat;
height: 570px;
}
#service .pict_l {
background-position: left top;
background-repeat: no-repeat;
height: 570px;
text-align: right;
}
#service .pict_l .txt_bk_white {
align-items: flex-end;
}
#service .content_bt {
display: flex;
justify-content: space-between;
}
@media screen and (max-width: 479px) {
#service .content_bt {
flex-direction: column;
}
}
#service .content_bt .txt_r {
width: 670px;
line-height: 2;
margin-top: 40px;
}
@media screen and (max-width: 479px) {
#service .content_bt .txt_r {
width: 100%;
}
}
#service .content_bt .txt_r h3 {
font-size: 2.4rem;
}
@media screen and (max-width: 479px) {
#service .content_bt .txt_r h3 {
font-size: 1.6rem;
}
}
#service .content_bt .txt_r p {
font-size: 1.5rem;
margin-top: 20px;
}
#service .inr {
position: relative;
max-width: 1366px;
margin: 0 auto;
padding: 12.4rem 5vw;
overflow: hidden;
}
@media screen and (max-width: 479px) {
#service .inr {
padding: 6.2rem 5vw;
}
}
#homecleaning {
background-color: #E2D5C4;
position: relative;
top: -70px;
margin-bottom: -70px;
}
.homecleaning__container {
padding: 20rem 5vw 12.4rem;
}
.homecleaning .pict_r {
background-image: url(//storage-t.co.jp/wp-content/themes/storage/img/hero_homecleaning.jpg);
}
#homerepair {
background-color: #F7F3EF;
}
#homerepair .pict_l {
background-image: url(//storage-t.co.jp/wp-content/themes/storage/img/hero_homerepair.jpg);
}
#furniturepainting {
background-color: #E2D5C4;
}
#furniturepainting .pict_r {
background-image: url(//storage-t.co.jp/wp-content/themes/storage/img/hero_painting.jpg);
}
#houserenovation {
background-color: #F7F3EF;
}
#houserenovation .pict_l {
background-image: url(//storage-t.co.jp/wp-content/themes/storage/img/hero_house_renova.jpg);
}
#joinerypainting {
background-color: #E2D5C4;
}
#joinerypainting .pict_r {
background-image: url(//storage-t.co.jp/wp-content/themes/storage/img/hero_joinery.jpg);
}
.virutect_lp {
background-color: #1F1F1F;
display: block;  }
.virutect_lp .fv {
margin-top: 70px;
position: relative;
z-index: 5;
}
@media screen and (max-width: 479px) {
.virutect_lp .fv {
margin-top: 50px;
}
}
.virutect_lp .fv__container {
position: relative;
max-width: 1366px;
margin: 0 auto;
padding: 0 5vw;
overflow: hidden;
color: #000;
}
@media screen and (max-width: 479px) {
.virutect_lp .fv__container {
padding: 0 5vw;
}
}
.virutect_lp .fv #txt_01 {
background-color: #fff;
font-size: 3.4rem;
padding: 0 0 0 2rem;
line-height: 1.7;
display: inline-block;
}
@media screen and (max-width: 479px) {
.virutect_lp .fv #txt_01 {
font-size: 1.7rem;
}
}
.virutect_lp .fv #txt_02 {
color: #fff;
font-size: 8rem;
line-height: 1.7;
margin-bottom: 3rem;
}
@media screen and (max-width: 479px) {
.virutect_lp .fv #txt_02 {
font-size: 2.3rem;
}
}
.virutect_lp .fv .flex {
display: flex;
justify-content: space-around;
color: #fff;
margin-top: 6rem;
}
@media screen and (max-width: 479px) {
.virutect_lp .fv .flex {
flex-direction: column;
}
}
.virutect_lp .fv .flex p {
line-height: 1.7;
}
.virutect_lp .fv .button {
display: inline-flex;
width: 470px;
height: 100px;
background-color: #8D877D;
justify-content: center;
align-items: center;
position: relative;
border: none;
line-height: 1;
text-decoration: none;
text-align: center;
outline: none;
cursor: pointer;
transition: all 0.5s ease;
font-size: 3.2rem;
font-weight: 800;
font-style: italic;
font-family: 'Montserrat','Noto Sans JP', sans-serif;
}
@media screen and (max-width: 479px) {
.virutect_lp .fv .button {
width: 100%;
height: 19vw;
margin-top: 2rem;
}
}
.virutect_lp .fv .button a {
color: #fff;
}
@media screen and (max-width: 479px) {
.virutect_lp .fv .button a p {
line-height: .5;
}
}
.virutect_lp .fv .button span {
font-size: 1.4rem;
font-weight: 400;
display: inline-block;
margin-left: 2rem;
width: 120px;
text-align: left;
}
@media screen and (max-width: 479px) {
.virutect_lp .fv .button span {
margin-left: 0rem;
width: 100%;
text-align: center;
}
}
.virutect_lp .fv .button::after {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 5px 0 5px 18px;
border-color: transparent transparent transparent #fff;
position: relative;
transition: all 0.5s ease;
}
@media screen and (max-width: 479px) {
.virutect_lp .fv .button::after {
margin-right: 2rem;
}
}
.virutect_lp .fv .button::before {
content: url(//storage-t.co.jp/wp-content/themes/storage/img/icon_mail.svg);
display: inline-block;
width: 37px;
vertical-align: middle;
-webkit-transform: scale(1);
transform: scale(1);
margin-right: 2rem;
}
@media screen and (max-width: 479px) {
.virutect_lp .fv .button::before {
margin-left: 2rem;
}
}
.virutect_lp .fv .button:hover {
background-color: #8D877D;
}
.virutect_lp .fv .button:hover a {
color: #fff;
}
.virutect_lp .fv .button:hover::before {
border-color: transparent transparent transparent #fff;
right: 2rem;
}
.virutect_lp .fv .sp_visible {
background-image: url(//storage-t.co.jp/wp-content/themes/storage/img/bg_main_color.svg);
background-position: center -90vh;
background-repeat: no-repeat;
}
.virutect_lp .reasons {
background-color: #E2D5C4;
position: relative;
top: -229px;
padding-bottom: 12.4rem;
}
@media screen and (max-width: 479px) {
.virutect_lp .reasons {
padding-bottom: 0;
}
}
.virutect_lp .reasons__container {
position: relative;
max-width: 1366px;
margin: 0 auto;
padding: 12.4rem 5vw;
overflow: hidden;
}
@media screen and (max-width: 479px) {
.virutect_lp .reasons__container {
padding: 6.2rem 5vw;
}
}
.virutect_lp .reasons h2 {
margin-top: 229px;
margin-bottom: 10rem;
}
@media screen and (max-width: 479px) {
.virutect_lp .reasons h2 {
margin-bottom: 5rem;
}
}
.virutect_lp .reasons__content {
display: flex;
justify-content: space-between;
position: relative;
}
@media screen and (max-width: 479px) {
.virutect_lp .reasons__content {
flex-direction: column;
}
}
.virutect_lp .reasons .fadeUpTrigger {
width: 530px;
}
@media screen and (max-width: 479px) {
.virutect_lp .reasons .fadeUpTrigger {
width: 100%;
}
}
.virutect_lp .reasons .reason_no {
background-color: #1F1F1F;
font-weight: 800;
font-style: italic;
font-family: 'Montserrat','Noto Sans JP', sans-serif;
color: #fff;
font-size: 1.4rem;
line-height: 2;
padding: 0 2rem;
display: inline-block;
margin-top: 7rem;
}
@media screen and (max-width: 479px) {
.virutect_lp .reasons .reason_no {
margin-top: 2rem;
}
}
.virutect_lp .reasons h3 {
font-size: 4.8rem;
line-height: 1.4;
margin-bottom: 5rem;
}
@media screen and (max-width: 479px) {
.virutect_lp .reasons h3 {
font-size: 2.4rem;
margin-bottom: 1rem;
}
}
.virutect_lp .reasons p {
line-height: 1.7;
}
.virutect_lp .reasons .button {
font-weight: 800;
font-style: italic;
font-family: 'Montserrat','Noto Sans JP', sans-serif;
top: 60px;
display: inline-flex;
width: 320px;
height: 70px;
background-color: #fff;
justify-content: center;
align-items: center;
position: relative;
border: none;
line-height: 1;
text-decoration: none;
text-align: center;
outline: none;
cursor: pointer;
transition: all 0.5s ease;
}
.virutect_lp .reasons .button::before {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 5px 0 5px 18px;
border-color: transparent transparent transparent #1F1F1F;
position: relative;
right: 3rem;
transition: all 0.5s ease;
}
.virutect_lp .reasons .button:hover {
background-color: #8D877D;
}
.virutect_lp .reasons .button:hover a {
color: #fff;
}
.virutect_lp .reasons .button:hover::before {
border-color: transparent transparent transparent #fff;
right: 2rem;
}
@media screen and (max-width: 479px) {
.virutect_lp .reasons .button {
width: 80vw;
height: 8vh;
top: 5vw;
}
}
.virutect_lp .reasons #reason_01 .reason_pict::before {
content: "";
display: block;
background-image: url(//storage-t.co.jp/wp-content/themes/storage/img/frame_bl_white.svg);
width: 300px;
height: 300px;
background-repeat: no-repeat;
background-size: contain;
position: absolute;
top: 532px;
left: -72px;
}
@media screen and (max-width: 479px) {
.virutect_lp .reasons #reason_01 .reason_pict::before {
display: none;
}
}
.virutect_lp .reasons #reason_01::after {
content: "";
background-image: url(//storage-t.co.jp/wp-content/themes/storage/img/air_catalyst.svg);
background-repeat: no-repeat;
display: block;
width: 820px;
height: 146px;
position: absolute;
right: 40px;
top: 700px;
}
@media screen and (max-width: 479px) {
.virutect_lp .reasons #reason_01::after {
width: 100%;
height: 9vh;
right: 0px;
top: 107vw;
background-size: contain;
}
}
.virutect_lp .reasons #reason_02 {
margin-top: 200px;
}
@media screen and (max-width: 479px) {
.virutect_lp .reasons #reason_02 {
margin-top: 30vw;
}
}
@media screen and (max-width: 479px) {
.virutect_lp .reasons #reason_02 .fadeUpTrigger {
order: 1;
}
}
.virutect_lp .reasons #reason_02 .reason_pict::before {
content: "";
display: block;
background-image: url(//storage-t.co.jp/wp-content/themes/storage/img/frame_tr_white.svg);
width: 300px;
height: 300px;
background-repeat: no-repeat;
background-size: contain;
position: absolute;
transform: rotate(90deg);
right: -72px;
bottom: -72px;
}
@media screen and (max-width: 479px) {
.virutect_lp .reasons #reason_02 .reason_pict::before {
display: none;
}
}
.virutect_lp .reasons #reason_02::after {
content: "";
background-image: url(//storage-t.co.jp/wp-content/themes/storage/img/visualization.svg);
background-repeat: no-repeat;
display: block;
width: 840px;
height: 146px;
position: absolute;
top: 700px;
}
@media screen and (max-width: 479px) {
.virutect_lp .reasons #reason_02::after {
width: 100%;
height: 9vh;
right: 0px;
top: 107vw;
background-size: contain;
}
}
.virutect_lp .reasons #reason_03 {
margin-top: 200px;
}
@media screen and (max-width: 479px) {
.virutect_lp .reasons #reason_03 {
margin-top: 30vw;
}
}
.virutect_lp .reasons #reason_03 .reason_pict::before {
content: "";
display: block;
background-image: url(//storage-t.co.jp/wp-content/themes/storage/img/frame_bl_white.svg);
width: 300px;
height: 300px;
background-repeat: no-repeat;
background-size: contain;
position: absolute;
bottom: -72px;
left: -72px;
}
@media screen and (max-width: 479px) {
.virutect_lp .reasons #reason_03 .reason_pict::before {
display: none;
}
}
.virutect_lp .reasons #reason_03::after {
content: "";
background-image: url(//storage-t.co.jp/wp-content/themes/storage/img/professionalism.svg);
background-repeat: no-repeat;
display: block;
width: 941px;
height: 134px;
position: absolute;
bottom: -80px;
right: 0;
}
@media screen and (max-width: 479px) {
.virutect_lp .reasons #reason_03::after {
width: 100%;
height: 9vh;
right: 0px;
top: 87vw;
background-size: contain;
}
}
.virutect_lp .process {
margin-top: -230px;
}
.virutect_lp .process__container {
position: relative;
max-width: 1366px;
margin: 0 auto;
padding: 12.4rem 5vw;
overflow: hidden;
}
@media screen and (max-width: 479px) {
.virutect_lp .process__container {
padding: 6.2rem 5vw;
}
}
.virutect_lp .process__heading {
color: #fff;
}
.virutect_lp .process__content {
margin-top: 7rem;
}
.virutect_lp .process .stepcontainer {
display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
color: #fff;
position: relative;
z-index: 15;
}
@media screen and (max-width: 479px) {
.virutect_lp .process .stepcontainer {
flex-direction: column;
}
}
.virutect_lp .process .step {
width: 33.3%;
height: 350px;
position: relative;
}
@media screen and (max-width: 479px) {
.virutect_lp .process .step {
width: 100%;
}
}
.virutect_lp .process .step::before {
content: "";
display: block;
background-image: url(//storage-t.co.jp/wp-content/themes/storage/img/frame_tr_gray.svg);
background-repeat: no-repeat;
background-size: auto;
width: 82px;
height: 82px;
position: absolute;
top: -19px;
right: 31px;
}
@media screen and (max-width: 479px) {
.virutect_lp .process .step::before {
right: -6vw;
}
}
.virutect_lp .process .step::after {
content: "";
display: inline-block;
width: calc(100% - 54px);
border-top: 1px solid #fff;
}
@media screen and (max-width: 479px) {
.virutect_lp .process .step::after {
width: 100%;
}
}
.virutect_lp .process .step .titile {
display: flex;
align-items: center;
margin-top: 3rem;
}
.virutect_lp .process .step .titile .step_no {
display: flex;
flex-direction: column;
font-weight: 800;
font-style: italic;
font-family: 'Montserrat','Noto Sans JP', sans-serif;
text-align: center;
width: 61px;
}
.virutect_lp .process .step .titile .txt_en {
font-size: 1.4rem;
line-height: 1;
}
.virutect_lp .process .step .titile .txt_no {
font-size: 4.8rem;
line-height: 1;
}
.virutect_lp .process .step .titile p {
font-size: 2.4rem;
font-weight: 700;
margin-right: 1rem;
}
@media screen and (max-width: 479px) {
.virutect_lp .process .step .titile p {
font-size: 2rem;
margin-right: 2rem;
}
}
.virutect_lp .process .step p {
margin-right: 5rem;
line-height: 1.7;
margin-right: 0;
}
.virutect_lp .process .step:nth-child(3n+2) {
margin-top: 90px;
}
@media screen and (max-width: 479px) {
.virutect_lp .process .step:nth-child(3n+2) {
margin-top: 35vw;
}
}
@media screen and (max-width: 479px) {
.virutect_lp .process .step:nth-child(4) {
margin-top: 35vw;
}
}
.virutect_lp .process .step:nth-child(3n+3) {
margin-top: 180px;
}
@media screen and (max-width: 479px) {
.virutect_lp .process .step:nth-child(3n+3) {
margin-top: 35vw;
}
}
.virutect_lp .process .for_process {
min-height: 570px;
background-image: url(//storage-t.co.jp/wp-content/themes/storage/img/process_back.png);
background-position: bottom;
background-size: cover;
position: relative;
top: -150px;
margin-bottom: -150px;
}
@media screen and (max-width: 479px) {
.virutect_lp .process .for_process {
top: -20vw;
min-height: auto;
margin-bottom: -20vw;
}
}
.virutect_lp .process .for_process__container {
position: relative;
max-width: 1366px;
margin: 0 auto;
padding: 12.4rem 5vw;
overflow: hidden;
}
@media screen and (max-width: 479px) {
.virutect_lp .process .for_process__container {
padding: 6.2rem 5vw;
}
}
.virutect_lp .process .for_process__contents {
width: 970px;
border: 1px solid #fff;
margin: 50px auto 0;
text-align: center;
padding: 2rem;
color: #fff;
font-size: 1.8rem;
position: relative;
}
@media screen and (max-width: 479px) {
.virutect_lp .process .for_process__contents {
width: 100%;
line-height: 1.5;
font-size: 1.6rem;
}
}
.virutect_lp .process .for_process__contents::before {
content: "";
display: block;
background-image: url(//storage-t.co.jp/wp-content/themes/storage/img/frame_bl_white.svg);
width: 80px;
height: 80px;
background-repeat: no-repeat;
background-size: contain;
position: absolute;
left: calc(50% - 484px);
bottom: 0;
}
.virutect_lp .process .for_process__contents::after {
content: "";
display: block;
background-image: url(//storage-t.co.jp/wp-content/themes/storage/img/frame_bl_white.svg);
width: 80px;
height: 80px;
background-repeat: no-repeat;
background-size: contain;
position: absolute;
transform: rotate(180deg);
left: calc(50% + 404px);
top: 0px;
}
.virutect_lp .process .for_process .button {
font-weight: 800;
font-style: italic;
font-family: 'Montserrat','Noto Sans JP', sans-serif;
display: inline-flex;
justify-content: space-between;
width: 466px;
height: 100px;
font-size: 2.8rem;
background-color: #1F1F1F;
justify-content: center;
align-items: center;
border: none;
line-height: 1;
text-decoration: none;
text-align: center;
outline: none;
cursor: pointer;
border: #1F1F1F 2px solid;
transition: all 0.5s ease;
margin: 2rem 0;
}
.virutect_lp .process .for_process .button p {
font-size: 2.8rem;
display: flex;
align-items: center;
justify-content: space-around;
}
.virutect_lp .process .for_process .button .txt_jan {
font-size: 1.4rem;
vertical-align: middle;
display: inline-block;
margin: 0 0 .5rem 2rem;
}
.virutect_lp .process .for_process .button a {
width: 80%;
color: #fff;
}
.virutect_lp .process .for_process .button::before {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 5px 0 5px 18px;
border-color: transparent transparent transparent #fff;
position: relative;
transition: all 0.5s ease;
right: 0rem;
}
@media screen and (max-width: 479px) {
.virutect_lp .process .for_process .button::before {
right: 0rem;
}
}
.virutect_lp .process .for_process .button:hover {
background-color: #fff;
border: #1F1F1F 2px solid;
color: #1F1F1F;
}
.virutect_lp .process .for_process .button:hover a {
color: #1F1F1F;
}
.virutect_lp .process .for_process .button:hover::before {
border-color: transparent transparent transparent #1F1F1F;
right: -1rem;
}
@media screen and (max-width: 479px) {
.virutect_lp .process .for_process .button {
width: 90vw;
height: 8vh;
}
}
@media screen and (max-width: 479px) {
.virutect_lp .process .for_process .button {
width: 80vw;
}
}
.virutect_lp .case_intro {
background-color: #fff;
background-image: url(//storage-t.co.jp/wp-content/themes/storage/img/bg_main_color.svg);
background-position: center 670px;
background-repeat: repeat-x;
}
@media screen and (max-width: 479px) {
.virutect_lp .case_intro {
background-position: center bottom;
background-size: 420vh;
}
}
.virutect_lp .case_intro__container {
position: relative;
max-width: 1366px;
margin: 0 auto;
padding: 12.4rem 5vw;
overflow: hidden;
margin-bottom: -2.6vw;
}
@media screen and (max-width: 479px) {
.virutect_lp .case_intro__container {
padding: 6.2rem 5vw;
}
}
.virutect_lp .case_intro__content {
margin-top: 6rem;
position: relative;
}
@media screen and (max-width: 479px) {
.virutect_lp .case_intro .heading-main {
font-size: 3.5rem;
}
}
.virutect_lp .case_intro .explanation {
width: 600px;
padding: 3rem 5rem 4rem;
background-color: #8D877D;
color: #fff;
font-size: 1.2rem;
position: absolute;
bottom: -60px;
right: 0;
}
@media screen and (max-width: 479px) {
.virutect_lp .case_intro .explanation {
width: 100%;
position: relative;
bottom: 0;
padding: 1.5rem 2.5rem 4rem;
}
}
.virutect_lp .case_intro .explanation p {
font-size: 1.5rem;
line-height: 1.5;
}
.virutect_lp .case_intro .owner {
font-weight: 800;
font-style: italic;
font-family: 'Montserrat','Noto Sans JP', sans-serif;
font-size: 1.5rem;
}
.virutect_lp .case_intro .owner .txt_jan {
font-size: 2rem;
margin-left: 2rem;
}
.virutect_lp .case_intro .model {
font-weight: 800;
font-style: italic;
font-family: 'Montserrat','Noto Sans JP', sans-serif;
font-size: 1.5rem;
border-bottom: 1px #fff solid;
margin-bottom: 1rem;
padding-bottom: 1.5rem;
}
.virutect_lp .case_intro .model .txt_en {
font-size: 3rem;
margin-left: 2rem;
}
@media screen and (max-width: 479px) {
.virutect_lp .case_intro .model .txt_en {
font-size: 2.5rem;
}
}
.virutect_lp .case_intro .cars {
display: flex;
justify-content: space-between;
margin-top: 122px;
}
@media screen and (max-width: 479px) {
.virutect_lp .case_intro .cars {
flex-direction: column;
margin-top: 10vw;
}
}
.virutect_lp .case_intro .cars img:not(:last-child) {
margin-right: 15px;
}
@media screen and (max-width: 479px) {
.virutect_lp .case_intro .cars img:not(:last-child) {
margin-right: 0;
}
}
.virutect_lp .case_intro .case_confirmation__container {
background-color: #E2D5C4;
text-align: center;
}
@media screen and (max-width: 479px) {
.virutect_lp .case_intro .case_confirmation__container {
margin-bottom: -4.2rem;
}
}
.virutect_lp .case_intro .case_confirmation__container h3 {
position: relative;
top: -42px;
display: inline-block;
z-index: 10;
}
@media screen and (max-width: 479px) {
.virutect_lp .case_intro .case_confirmation__container h3 {
width: 80%;
}
}
.virutect_lp .case_intro .case_confirmation__content {
width: 970px;
margin: 0 auto;
padding: 2rem;
position: relative;
top: -100px;
background-color: #fff;
}
@media screen and (max-width: 479px) {
.virutect_lp .case_intro .case_confirmation__content {
width: 90%;
}
}
.virutect_lp .case_intro .case_confirmation__content .lead {
font-size: 2rem;
font-weight: 700;
margin-top: 2rem;
}
@media screen and (max-width: 479px) {
.virutect_lp .case_intro .case_confirmation__content .lead {
font-size: 1.8rem;
}
}
.virutect_lp .case_intro .case_confirmation__content::before {
content: "";
display: block;
background-image: url(//storage-t.co.jp/wp-content/themes/storage/img/frame_bl_gray.svg);
width: 80px;
height: 80px;
background-repeat: no-repeat;
background-size: contain;
position: absolute;
left: calc(50% - 485px);
bottom: 0;
}
@media screen and (max-width: 479px) {
.virutect_lp .case_intro .case_confirmation__content::before {
display: none;
}
}
.virutect_lp .case_intro .case_confirmation__content::after {
content: "";
display: block;
background-image: url(//storage-t.co.jp/wp-content/themes/storage/img/frame_bl_gray.svg);
width: 80px;
height: 80px;
background-repeat: no-repeat;
background-size: contain;
position: absolute;
transform: rotate(180deg);
left: calc(50% + 405px);
top: 0px;
}
@media screen and (max-width: 479px) {
.virutect_lp .case_intro .case_confirmation__content::after {
display: none;
}
}
.virutect_lp .case_intro .case_confirmation__content .button {
font-weight: 800;
font-style: italic;
font-family: 'Montserrat','Noto Sans JP', sans-serif;
display: inline-flex;
justify-content: space-between;
width: 466px;
height: 100px;
font-size: 2.8rem;
background-color: #1F1F1F;
justify-content: center;
align-items: center;
border: none;
line-height: 1;
text-decoration: none;
text-align: center;
outline: none;
cursor: pointer;
border: #1F1F1F 2px solid;
transition: all 0.5s ease;
margin: 0 0 2rem;
}
.virutect_lp .case_intro .case_confirmation__content .button p {
font-size: 2.8rem;
display: flex;
align-items: center;
justify-content: space-around;
}
.virutect_lp .case_intro .case_confirmation__content .button .txt_jan {
font-size: 1.4rem;
vertical-align: middle;
display: inline-block;
margin: 0 0 .5rem 2rem;
}
.virutect_lp .case_intro .case_confirmation__content .button a {
width: 80%;
color: #fff;
}
.virutect_lp .case_intro .case_confirmation__content .button::before {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 5px 0 5px 18px;
border-color: transparent transparent transparent #fff;
position: relative;
transition: all 0.5s ease;
right: 0rem;
}
@media screen and (max-width: 479px) {
.virutect_lp .case_intro .case_confirmation__content .button::before {
right: 0rem;
}
}
.virutect_lp .case_intro .case_confirmation__content .button:hover {
background-color: #fff;
border: #1F1F1F 2px solid;
color: #1F1F1F;
}
.virutect_lp .case_intro .case_confirmation__content .button:hover a {
color: #1F1F1F;
}
.virutect_lp .case_intro .case_confirmation__content .button:hover::before {
border-color: transparent transparent transparent #1F1F1F;
right: -1rem;
}
@media screen and (max-width: 479px) {
.virutect_lp .case_intro .case_confirmation__content .button {
width: 90vw;
height: 8vh;
}
}
@media screen and (max-width: 479px) {
.virutect_lp .case_intro .case_confirmation__content .button {
width: 80vw;
}
}
.virutect_lp .faq {
background-color: #fff;
}
.virutect_lp .faq__container {
position: relative;
max-width: 1366px;
margin: 0 auto;
padding: 12.4rem 5vw;
overflow: hidden;
}
@media screen and (max-width: 479px) {
.virutect_lp .faq__container {
padding: 6.2rem 5vw;
}
}
.virutect_lp .qa-list dl {
position: relative;
margin: 20px 0 0;
cursor: pointer;
}
.virutect_lp .qa-list dl:first-child {
margin-top: 0;
}
.virutect_lp .qa-list dl::after {
position: absolute;
top: 27px;
right: 26px;
display: block;
width: 20px;
height: 20px;
margin: auto;
content: '';
background-image: url(//storage-t.co.jp/wp-content/themes/storage/img/add.svg);
background-position: center;
background-repeat: no-repeat;
}
.virutect_lp .qa-list .open::after {
background-image: url(//storage-t.co.jp/wp-content/themes/storage/img/remove.svg);
}
.virutect_lp .qa-list dl dt {
position: relative;
margin: 0;
padding: 9px 20px 9px 60px;
color: #fff;
font-size: 1.8rem;
font-weight: bold;
background: #8D877D;
transition: all 0.5;
}
.virutect_lp .qa-list dl.open dt {
background-color: #1F1F1F;
}
.virutect_lp .qa-list dl dt::before {
font-size: 22px;
line-height: 1;
position: absolute;
top: 25px;
left: 20px;
display: block;
font-weight: 800;
font-style: italic;
font-family: 'Montserrat','Noto Sans JP', sans-serif;
content: 'Q';
}
.virutect_lp .qa-list dl dd {
position: relative;
margin: 0;
padding: 40px 45px 50px;
background-color: #F7F3EF;
}
.virutect_lp .qa-list dl dd p {
margin: 30px 0 0;
font-size: 1.5rem;
line-height: 1.5;
}
.virutect_lp .qa-list dl dd p:first-child {
margin-top: 0;
}
@media screen and (max-width: 768px) {
.virutect_lp .qa-list dl {
margin: 10px 0 0;
}
.virutect_lp .qa-list dl:after {
top: 20px;
right: 20px;
width: 7px;
height: 7px;
}
.virutect_lp .qa-list dl dt {
padding: 16px 26px 16px 50px;
font-size: 14px;
line-height: 1.5;
}
.virutect_lp .qa-list dl dt::before {
font-size: 14px;
top: 20px;
left: 20px;
}
.virutect_lp .qa-list dl dd::before {
font-size: 14px;
left: 20px;
margin-top: 5px;
}
.virutect_lp .qa-list dl dd {
margin: 0;
padding: 16px;
font-size: 14px;
}
.virutect_lp .qa-list dl dd p {
margin: 30px 0 0;
}
.virutect_lp .qa-list dl dd p:first-child {
margin-top: 0;
}
}
#process .falldown {
margin: 8rem 0;
}
@media screen and (max-width: 479px) {
#process .falldown {
margin: 4rem 0;
}
}
#process .process {
position: relative;
max-width: 1366px;
margin: 0 auto;
padding: 6.2rem 5vw;
overflow: hidden;
}
@media screen and (max-width: 479px) {
#process .process {
padding: 3.1rem 5vw;
}
}
#process .process__container {
display: flex;
justify-content: space-between;
}
@media screen and (max-width: 479px) {
#process .process__container {
flex-direction: column;
}
}
#process .process__container article {
width: 494px;
}
@media screen and (max-width: 479px) {
#process .process__container article {
width: 100%;
order: 1;
margin-top: 2rem;
}
}
#process .process h3 {
display: flex;
margin-bottom: 3rem;
}
#process .process h3 .txt_no {
font-weight: 800;
font-style: italic;
font-family: 'Montserrat','Noto Sans JP', sans-serif;
font-size: 4.2rem;
line-height: 0;
display: inline-block;
position: relative;
margin-right: 5rem;
margin-left: 2.1rem;
}
#process .process h3 .txt_no::before {
content: "";
display: block;
background-image: url(//storage-t.co.jp/wp-content/themes/storage/img/frame_bl_gray.svg);
width: 50px;
height: 50px;
background-repeat: no-repeat;
background-size: contain;
position: relative;
right: 23px;
top: 50px;
}
#process .process h3 .txt_no::after {
content: "";
display: block;
background-image: url(//storage-t.co.jp/wp-content/themes/storage/img/frame_bl_gray.svg);
width: 50px;
height: 50px;
background-repeat: no-repeat;
background-size: contain;
position: relative;
transform: rotate(180deg);
bottom: 50px;
left: 27px;
}
#process .process h3 .txt_jan {
display: block;
font-size: 3.6rem;
line-height: 1.4;
}
@media screen and (max-width: 479px) {
#process .process h3 .txt_jan {
font-size: 2.3rem;
}
}
#process .process h3 .txt_en {
display: block;
font-weight: 800;
font-style: italic;
font-family: 'Montserrat','Noto Sans JP', sans-serif;
font-size: 1.4rem;
}
#process .process .txt {
font-size: 1.5rem;
line-height: 2;
}
#process .process .process__image {
position: relative;
}
#process .process .process__image .img_no {
font-weight: 800;
font-style: italic;
font-family: 'Montserrat','Noto Sans JP', sans-serif;
font-size: 25rem;
color: rgba(226, 213, 193, 0.49);
position: absolute;
top: 25px;
right: 0;
z-index: 5;
line-height: 0;
}
@media screen and (max-width: 479px) {
#process .process .process__image .img_no {
font-size: 12.5rem;
}
}
#process .process:nth-child(even) article {
order: 1;
}
#process .process:nth-child(even) .img_no {
right: 363px;
}
@media screen and (max-width: 479px) {
#process .process:nth-child(even) .img_no {
right: 0;
}
}
#process .gallery {
display: flex;
margin-top: 4.5rem;
}
@media screen and (max-width: 479px) {
#process .gallery {
flex-direction: column;
}
}
#process .gallery img {
margin-right: 2rem;
}
@media screen and (max-width: 479px) {
#process .gallery img {
margin-right: 0;
}
}
#process .process:nth-child(odd) .gallery {
justify-content: flex-end;
}
#process .process:nth-child(odd) .gallery img {
margin-right: 0;
margin-left: 2rem;
}
@media screen and (max-width: 479px) {
#process .process:nth-child(odd) .gallery img {
margin-left: 0;
}
}
.case_confirmation__container {
background-color: #E2D5C4;
text-align: center;
}
@media screen and (max-width: 479px) {
.case_confirmation__container {
margin-bottom: -4.2rem;
}
}
.case_confirmation__container h3 {
position: relative;
top: -42px;
display: inline-block;
z-index: 10;
}
@media screen and (max-width: 479px) {
.case_confirmation__container h3 {
width: 80%;
top: -31px;
}
}
.case_confirmation__content {
width: 970px;
margin: 0 auto;
padding: 2rem;
position: relative;
top: -100px;
background-color: #fff;
}
@media screen and (max-width: 479px) {
.case_confirmation__content {
width: 90%;
top: -65px;
}
}
.case_confirmation__content .lead {
font-size: 2rem;
font-weight: 700;
margin-top: 2rem;
}
@media screen and (max-width: 479px) {
.case_confirmation__content .lead {
font-size: 1.8rem;
margin-top: 0;
}
}
.case_confirmation__content::before {
content: "";
display: block;
background-image: url(//storage-t.co.jp/wp-content/themes/storage/img/frame_bl_gray.svg);
width: 80px;
height: 80px;
background-repeat: no-repeat;
background-size: contain;
position: absolute;
left: calc(50% - 485px);
bottom: 0;
}
@media screen and (max-width: 479px) {
.case_confirmation__content::before {
display: none;
}
}
.case_confirmation__content::after {
content: "";
display: block;
background-image: url(//storage-t.co.jp/wp-content/themes/storage/img/frame_bl_gray.svg);
width: 80px;
height: 80px;
background-repeat: no-repeat;
background-size: contain;
position: absolute;
transform: rotate(180deg);
left: calc(50% + 405px);
top: 0px;
}
@media screen and (max-width: 479px) {
.case_confirmation__content::after {
display: none;
}
}
.case_confirmation__content .button {
font-weight: 800;
font-style: italic;
font-family: 'Montserrat','Noto Sans JP', sans-serif;
display: inline-flex;
justify-content: space-between;
width: 466px;
height: 100px;
font-size: 2.8rem;
background-color: #1F1F1F;
justify-content: center;
align-items: center;
border: none;
line-height: 1;
text-decoration: none;
text-align: center;
outline: none;
cursor: pointer;
border: #1F1F1F 2px solid;
transition: all 0.5s ease;
margin: 0 0 2rem;
}
.case_confirmation__content .button p {
font-size: 2.8rem;
display: flex;
align-items: center;
justify-content: space-around;
}
.case_confirmation__content .button .txt_jan {
font-size: 1.4rem;
vertical-align: middle;
display: inline-block;
margin: 0 0 .5rem 2rem;
}
.case_confirmation__content .button a {
width: 80%;
color: #fff;
}
.case_confirmation__content .button::before {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 5px 0 5px 18px;
border-color: transparent transparent transparent #fff;
position: relative;
transition: all 0.5s ease;
right: 0rem;
}
@media screen and (max-width: 479px) {
.case_confirmation__content .button::before {
right: 0rem;
}
}
.case_confirmation__content .button:hover {
background-color: #fff;
border: #1F1F1F 2px solid;
color: #1F1F1F;
}
.case_confirmation__content .button:hover a {
color: #1F1F1F;
}
.case_confirmation__content .button:hover::before {
border-color: transparent transparent transparent #1F1F1F;
right: -1rem;
}
@media screen and (max-width: 479px) {
.case_confirmation__content .button {
width: 90vw;
height: 8vh;
}
}
@media screen and (max-width: 479px) {
.case_confirmation__content .button {
width: 80vw;
}
}
@media screen and (max-width: 479px) {
#about-storage .intro__text-main {
font-size: 3.5rem;
}
}
#about-storage .philosophy {
background-color: #F7F3EF;
padding-bottom: 100px;
}
#about-storage .philosophy__container {
position: relative;
max-width: 1366px;
margin: 0 auto;
padding: 12.4rem 5vw;
overflow: hidden;
background-image: url(//storage-t.co.jp/wp-content/themes/storage/img/meeting_room.jpg);
background-repeat: no-repeat;
background-position: right 12.4rem;
}
@media screen and (max-width: 479px) {
#about-storage .philosophy__container {
padding: 6.2rem 5vw;
}
}
@media screen and (max-width: 479px) {
#about-storage .philosophy__container {
background-position: center top;
background-size: contain;
}
}
#about-storage .philosophy .page-heading {
margin-top: 450px;
}
@media screen and (max-width: 479px) {
#about-storage .philosophy .page-heading {
margin-top: 50vw;
}
}
#about-storage .philosophy h2 {
display: flex;
}
#about-storage .philosophy h2::before {
content: "";
width: 3px;
height: 6rem;
background-color: #1F1F1F;
transform: rotate(25deg);
margin-left: 2rem;
}
#about-storage .philosophy .inr {
margin-left: 3rem;
}
@media screen and (max-width: 479px) {
#about-storage .philosophy .inr {
text-align: left;
margin-left: 6vw;
}
}
#about-storage .philosophy .txt_en {
font-weight: 800;
font-style: italic;
font-family: 'Montserrat','Noto Sans JP', sans-serif;
font-size: 4.2rem;
line-height: .5;
margin-top: .7rem;
}
@media screen and (max-width: 479px) {
#about-storage .philosophy .txt_en {
font-size: 3.1rem;
}
}
#about-storage .philosophy .txt_jan {
font-size: 1.5rem;
}
#about-storage .philosophy h3 {
font-size: 6rem;
line-height: 1.4;
margin-top: 1rem;
}
@media screen and (max-width: 479px) {
#about-storage .philosophy h3 {
font-size: 2.3rem;
}
}
#about-storage .philosophy article {
font-size: 2rem;
font-weight: 700;
line-height: 2;
margin-top: 7rem;
}
@media screen and (max-width: 479px) {
#about-storage .philosophy article {
font-size: 1.6rem;
margin-top: 1rem;
}
}
#about-storage .history {
background-color: #8D877D;
background-image: url(//storage-t.co.jp/wp-content/themes/storage/img/bg_e2d5c4.svg);
background-repeat: repeat-x;
background-position: center 960px;
}
#about-storage .history__container {
width: 1170px;
margin: auto;
background-color: #fff;
padding: 76px 100px;
position: relative;
top: -120px;
}
@media screen and (max-width: 479px) {
#about-storage .history__container {
width: 100%;
padding: 6.2rem 5vw;
margin-bottom: -120px;
}
}
#about-storage .history__content {
margin-top: 7rem;
}
#about-storage .history .chronology {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
}
#about-storage .history .event {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 220px;
border-bottom: dotted 1px #8D877D;
border-left: dotted 1px #8D877D;
padding-left: 2rem;
margin-bottom: 5rem;
}
@media screen and (max-width: 479px) {
#about-storage .history .event {
width: 100%;
}
}
#about-storage .history dt .txt_en {
font-weight: 800;
font-style: italic;
font-family: 'Montserrat','Noto Sans JP', sans-serif;
font-size: 3rem;
line-height: 1;
}
#about-storage .history dt .txt_jan {
font-size: 1.8rem;
}
#about-storage .history dd {
font-size: 1.3rem;
line-height: 1.7;
}
#about-storage .history .year {
font-weight: 800;
font-style: italic;
font-family: 'Montserrat','Noto Sans JP', sans-serif;
font-size: 6rem;
color: #8D877D;
text-align: right;
line-height: 0.7;
margin-top: 4rem;
}
#about-storage .history .event_img {
position: relative;
}
#about-storage .history .pc_visible {
position: relative;
top: 18rem;
}
#about-storage .company {
background-color: #E2D5C4;
}
#about-storage .company__container {
position: relative;
max-width: 1366px;
margin: 0 auto;
padding: 12.4rem 5vw;
overflow: hidden;
padding: 12.4rem 5vw 0;
}
@media screen and (max-width: 479px) {
#about-storage .company__container {
padding: 6.2rem 5vw;
}
}
#about-storage .company__content {
display: flex;
justify-content: space-between;
width: 970px;
margin: auto;
border-top: 2px solid #1F1F1F;
border-bottom: 2px solid #1F1F1F;
padding: 5rem 0;
}
@media screen and (max-width: 479px) {
#about-storage .company__content {
flex-direction: column;
width: 100%;
}
}
#about-storage .company h2 {
margin-right: 5rem;
}
@media screen and (max-width: 479px) {
#about-storage .company h2 {
margin-right: 0;
}
}
#about-storage .company .heading-sub {
text-align: left;
}
@media screen and (max-width: 479px) {
#about-storage .company .heading-sub {
text-align: center;
}
}
#about-storage .company table {
font-size: 1.5rem;
}
#about-storage .company th {
text-align: left;
}
#about-storage .company td {
line-height: 2;
padding: 1rem;
}
#about-storage .access {
background-color: #E2D5C4;
}
#about-storage .access__container {
position: relative;
max-width: 1366px;
margin: 0 auto;
padding: 12.4rem 5vw;
overflow: hidden;
padding: 6.2rem 5vw 12.4rem;
}
@media screen and (max-width: 479px) {
#about-storage .access__container {
padding: 6.2rem 5vw;
}
}
@media screen and (max-width: 479px) {
#about-storage .access__container {
padding: 0 5vw 6.2rem;
}
}
#about-storage .access__content {
display: flex;
justify-content: space-between;
width: 970px;
margin: auto;
padding: 0;
}
@media screen and (max-width: 479px) {
#about-storage .access__content {
flex-direction: column;
width: 100%;
line-height: 1.5;
}
}
#about-storage .access h2 {
margin-right: 5rem;
}
@media screen and (max-width: 479px) {
#about-storage .access h2 {
margin-right: 0;
}
}
#about-storage .access .heading-sub {
text-align: left;
}
@media screen and (max-width: 479px) {
#about-storage .access .heading-sub {
text-align: center;
}
}
@media screen and (max-width: 479px) {
#about-storage .access .googlemap {
position: relative;
width: 100%;
padding-top: 75%; margin-bottom: 1rem;
}
}
@media screen and (max-width: 479px) {
#about-storage .access .googlemap iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
#about-storage .access table {
font-size: 1.5rem;
}
#about-storage .access table p {
line-height: 1.5;
}
#about-storage .access th {
text-align: left;
}
#about-storage .access td {
line-height: 2;
padding: 1rem;
}
#about-storage .access .button {
display: inline-flex;
width: 320px;
height: 70px;
background-color: #fff;
justify-content: center;
align-items: center;
position: relative;
border: none;
line-height: 1;
text-decoration: none;
text-align: center;
outline: none;
cursor: pointer;
transition: all 0.5s ease;
margin-top: 2rem;
font-weight: 800;
font-style: italic;
font-family: 'Montserrat','Noto Sans JP', sans-serif;
}
#about-storage .access .button::before {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 5px 0 5px 18px;
border-color: transparent transparent transparent #1F1F1F;
position: relative;
right: 3rem;
transition: all 0.5s ease;
}
#about-storage .access .button:hover {
background-color: #8D877D;
}
#about-storage .access .button:hover a {
color: #fff;
}
#about-storage .access .button:hover::before {
border-color: transparent transparent transparent #fff;
right: 2rem;
}
@media screen and (max-width: 479px) {
#about-storage .access .button {
width: 80vw;
height: 8vh;
top: 5vw;
}
}
@media screen and (max-width: 479px) {
#about-storage .access .button {
margin: 0 5vw;
}
}
#about-storage .access .button::before {
right: -17rem;
}
#about-storage .access .button:hover::before {
right: -18rem;
}
#about-storage .access .button::after {
content: "";
display: inline-block;
width: 19px;
height: 26px;
background-image: url(//storage-t.co.jp/wp-content/themes/storage/img/marker_map.svg);
position: relative;
right: 17rem;
}
#about-storage .access .button:hover::after {
background-image: url(//storage-t.co.jp/wp-content/themes/storage/img/marker_map_white.svg);
}
#about-storage .member__container {
position: relative;
max-width: 1366px;
margin: 0 auto;
padding: 12.4rem 5vw;
overflow: hidden;
}
@media screen and (max-width: 479px) {
#about-storage .member__container {
padding: 6.2rem 5vw;
}
}
#about-storage .member .ceo {
width: 770px;
margin: auto;
position: relative;
margin-top: 5rem;
}
@media screen and (max-width: 479px) {
#about-storage .member .ceo {
width: 100%;
}
}
#about-storage .member .ceo::after {
content: "";
display: block;
background-image: url(//storage-t.co.jp/wp-content/themes/storage/img/corner_beige.svg);
width: 300px;
height: 300px;
background-repeat: no-repeat;
background-size: contain;
position: absolute;
right: -72px;
bottom: 18px;
}
@media screen and (max-width: 479px) {
#about-storage .member .ceo::after {
display: none;
}
}
#about-storage .member .name {
font-size: 3rem;
font-weight: 700;
}
@media screen and (max-width: 479px) {
#about-storage .member .name {
font-size: 1.8rem;
}
}
#about-storage .member .txt_jan {
font-size: 1.6rem;
margin-right: 2rem;
}
#about-storage .member .txt_en {
font-size: 1.3rem;
margin-left: 2rem;
color: #8D877D;
}
#about-storage .staff_list {
display: flex;
margin-top: 6rem;
justify-content: space-between;
}
@media screen and (max-width: 479px) {
#about-storage .staff_list {
flex-direction: column;
}
}
#about-storage .staff {
display: flex;
align-items: flex-start;
}
#about-storage .staff .portrait {
background-color: #E2D5C4;
}
#about-storage .staff .txt {
position: relative;
padding-top: 2rem;
}
#about-storage .staff .txt::after {
content: "";
display: block;
background-image: url(//storage-t.co.jp/wp-content/themes/storage/img/corner_beige.svg);
width: 100px;
height: 100px;
background-repeat: no-repeat;
background-size: contain;
transform: rotate(-90deg);
position: relative;
left: 90px;
bottom: 130px;
}
@media screen and (max-width: 479px) {
#about-storage .staff .txt::after {
left: 70px;
}
}
#about-storage .staff .title {
font-size: 1.6rem;
font-weight: 700;
margin-left: 2rem;
}
#about-storage .staff .name {
font-size: 2.4rem;
margin-left: 2rem;
line-height: 1;
}
#about-storage .inr {
text-align: center;
}
#about-storage .inr .button {
display: inline-flex;
justify-content: space-between;
width: 466px;
height: 100px;
font-size: 2.8rem;
background-color: #1F1F1F;
justify-content: center;
align-items: center;
border: none;
line-height: 1;
text-decoration: none;
text-align: center;
outline: none;
cursor: pointer;
border: #1F1F1F 2px solid;
transition: all 0.5s ease;
font-weight: 800;
font-style: italic;
font-family: 'Montserrat','Noto Sans JP', sans-serif;
}
#about-storage .inr .button p {
font-size: 2.8rem;
display: flex;
align-items: center;
justify-content: space-around;
}
#about-storage .inr .button .txt_jan {
font-size: 1.4rem;
vertical-align: middle;
display: inline-block;
margin: 0 0 .5rem 2rem;
}
#about-storage .inr .button a {
width: 80%;
color: #fff;
}
#about-storage .inr .button::before {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 5px 0 5px 18px;
border-color: transparent transparent transparent #fff;
position: relative;
transition: all 0.5s ease;
right: 0rem;
}
@media screen and (max-width: 479px) {
#about-storage .inr .button::before {
right: 0rem;
}
}
#about-storage .inr .button:hover {
background-color: #fff;
border: #1F1F1F 2px solid;
color: #1F1F1F;
}
#about-storage .inr .button:hover a {
color: #1F1F1F;
}
#about-storage .inr .button:hover::before {
border-color: transparent transparent transparent #1F1F1F;
right: -1rem;
}
@media screen and (max-width: 479px) {
#about-storage .inr .button {
width: 90vw;
height: 8vh;
}
}
#at-254 .about_at-254 {
background-image: url(//storage-t.co.jp/wp-content/themes/storage/img/bg_e2d5c4.svg);
background-repeat: repeat-x;
background-position: center 178px;
}
#at-254 .about_at-254__container {
position: relative;
max-width: 1366px;
margin: 0 auto;
padding: 12.4rem 5vw;
overflow: hidden;
background-image: url(//storage-t.co.jp/wp-content/themes/storage/img/bg_e2d5c4_pass.svg);
background-repeat: no-repeat;
background-color: #fff;
background-position: center bottom;
display: flex;
justify-content: space-between;
align-items: center;
}
@media screen and (max-width: 479px) {
#at-254 .about_at-254__container {
padding: 6.2rem 5vw;
}
}
@media screen and (max-width: 479px) {
#at-254 .about_at-254__container {
flex-direction: column;
}
}
#at-254 .about_at-254__content {
font-size: 1.5rem;
line-height: 2;
width: 430px;
}
@media screen and (max-width: 479px) {
#at-254 .about_at-254__content {
width: 100%;
}
}
#at-254 .about_at-254 .about_img {
width: 670px;
}
#at-254 .about_at-254 .heading-sub {
font-weight: 800;
font-style: italic;
font-family: 'Montserrat','Noto Sans JP', sans-serif;
font-size: 10rem;
text-align: left;
line-height: .7;
}
@media screen and (max-width: 479px) {
#at-254 .about_at-254 .heading-sub {
font-size: 7rem;
}
}
#at-254 .about_at-254 h3 {
font-size: 2rem;
line-height: 5;
}
@media screen and (max-width: 479px) {
#at-254 .about_at-254 h3 {
font-size: 1.8rem;
line-height: 1.5;
margin: 2rem 0;
}
}
#at-254 .effect {
background-color: #8D877D;
}
#at-254 .effect__container {
position: relative;
max-width: 1366px;
margin: 0 auto;
padding: 12.4rem 5vw;
overflow: hidden;
color: #fff;
font-size: 1.5rem;
line-height: 2;
}
@media screen and (max-width: 479px) {
#at-254 .effect__container {
padding: 6.2rem 5vw;
}
}
#at-254 .effect .lead {
display: flex;
justify-content: space-between;
margin-top: 8rem;
}
@media screen and (max-width: 479px) {
#at-254 .effect .lead {
flex-direction: column;
margin-top: 2rem;
}
}
#at-254 .effect .lead .txt {
width: 580px;
}
@media screen and (max-width: 479px) {
#at-254 .effect .lead .txt {
width: 100%;
margin-bottom: 2rem;
}
}
#at-254 .effect .lead_img {
width: 570px;
}
#at-254 .effect .mechanism {
display: flex;
justify-content: space-between;
margin-top: 8rem;
}
@media screen and (max-width: 479px) {
#at-254 .effect .mechanism {
flex-direction: column;
margin-top: 4rem;
}
}
@media screen and (max-width: 479px) {
#at-254 .effect .mechanism .imgs {
order: 1;
}
}
#at-254 .effect .mechanism .txt {
width: 380px;
}
@media screen and (max-width: 479px) {
#at-254 .effect .mechanism .txt {
width: 100%;
}
}
#at-254 .effect .mechanism h4 {
font-size: 3rem;
line-height: 1.5;
margin-bottom: 4rem;
}
@media screen and (max-width: 479px) {
#at-254 .effect .mechanism h4 {
line-height: 1;
margin-bottom: 2rem;
}
}
#at-254 .effect .mechanism h4::before {
content: "";
display: inline-block;
width: 2rem;
height: .3rem;
background-color: #fff;
position: relative;
bottom: 2rem;
right: 3rem;
}
@media screen and (max-width: 479px) {
#at-254 .effect .mechanism h4::before {
display: none;
}
}
#at-254 .effect .mechanism h4 span {
position: relative;
bottom: 1rem;
right: 2rem;
}
@media screen and (max-width: 479px) {
#at-254 .effect .mechanism h4 span {
right: 0rem;
}
}
#at-254 .effect .mechanism__img {
width: 470px;
margin: 4rem 0 0 auto;
}
#at-254 .effect .flow h4 {
font-size: 3rem;
line-height: 1.5;
}
@media screen and (max-width: 479px) {
#at-254 .effect .flow h4 {
margin-top: 6rem;
line-height: 0;
}
}
#at-254 .effect .flow h4::before {
content: "";
display: inline-block;
width: 2rem;
height: .3rem;
background-color: #fff;
margin: 0 1rem 1rem 0;
}
#at-254 .effect .flow h4::after {
content: "FLOW";
display: inline-block;
color: rgba(255, 255, 255, 0.15);
font-weight: 800;
font-style: italic;
font-family: 'Montserrat','Noto Sans JP', sans-serif;
font-size: 12rem;
position: relative;
top: 3rem;
right: 10rem;
}
@media screen and (max-width: 479px) {
#at-254 .effect .flow h4::after {
font-size: 6rem;
top: 1rem;
left: 14rem;
}
}
#at-254 .effect .flow .step {
display: flex;
justify-content: space-between;
margin-top: 5rem;
}
@media screen and (max-width: 479px) {
#at-254 .effect .flow .step {
flex-direction: column;
margin-top: 0;
}
}
#at-254 .effect .flow .step dl {
width: 210px;
position: relative;
}
@media screen and (max-width: 479px) {
#at-254 .effect .flow .step dl {
width: 100%;
}
}
#at-254 .effect .flow .step dt {
font-weight: 800;
font-style: italic;
font-family: 'Montserrat','Noto Sans JP', sans-serif;
font-size: 2rem;
text-align: center;
color: #8D877D;
line-height: 0;
}
@media screen and (max-width: 479px) {
#at-254 .effect .flow .step dt span {
display: inline-block;
margin: 0rem 2rem 0;
}
}
#at-254 .effect .flow .step dt::after {
content: "";
display: block;
width: 210px;
height: 45px;
background-image: url(//storage-t.co.jp/wp-content/themes/storage/img/flow_sq.svg);
background-repeat: no-repeat;
position: relative;
bottom: 2.2rem;
z-index: -1;
}
@media screen and (max-width: 479px) {
#at-254 .effect .flow .step dt {
margin-top: 5rem;
right: 1rem;
text-align: left;
}
}
#at-254 .effect .flow .step dd {
position: relative;
top: -1rem;
}
#at-254 .effect .spray {
background-image: url(//storage-t.co.jp/wp-content/themes/storage/img/spray.jpg);
background-repeat: no-repeat;
background-size: cover;
height: 470px;
}
@media screen and (max-width: 479px) {
#at-254 .effect .spray {
background-position: right;
height: 60vw;
}
}
#at-254 .point__container {
position: relative;
max-width: 1366px;
margin: 0 auto;
padding: 12.4rem 5vw;
overflow: hidden;
max-width: 1270px;
}
@media screen and (max-width: 479px) {
#at-254 .point__container {
padding: 6.2rem 5vw;
}
}
#at-254 .point__heading {
font-size: 4.4rem;
line-height: 1.5;
text-align: center;
margin-bottom: 5rem;
}
@media screen and (max-width: 479px) {
#at-254 .point__heading {
font-size: 2.2rem;
}
}
#at-254 .point__content {
font-size: 1.5rem;
}
#at-254 .point__content p {
line-height: 2;
}
#at-254 .point__list {
border: 1px solid #1F1F1F;
margin: 5rem 0;
padding: 5rem 7rem;
}
@media screen and (max-width: 479px) {
#at-254 .point__list {
padding: 2rem 2.5rem;
line-height: 2;
}
}
#at-254 .point__list dl {
display: flex;
align-items: center;
margin: 1rem 0;
}
@media screen and (max-width: 479px) {
#at-254 .point__list dl {
align-items: baseline;
justify-content: space-between;
}
}
@media screen and (max-width: 479px) {
#at-254 .point__list dt {
width: 5%;
}
}
@media screen and (max-width: 479px) {
#at-254 .point__list dd {
width: 90%;
}
}
#at-254 .works {
background-color: #F7F3EF;
}
#at-254 .works__container {
position: relative;
max-width: 1366px;
margin: 0 auto;
padding: 12.4rem 5vw;
overflow: hidden;
}
@media screen and (max-width: 479px) {
#at-254 .works__container {
padding: 6.2rem 5vw;
}
}
#at-254 .works .img_header {
margin-top: 5rem;
}
#at-254 .works .cate {
margin-top: 5rem;
}
#at-254 .works h4 {
color: #fff;
background-color: #1F1F1F;
display: inline-block;
font-size: 1.9rem;
line-height: 2;
padding: 0 1rem;
}
@media screen and (max-width: 479px) {
#at-254 .works h4 {
font-size: 1.6rem;
}
}
#at-254 .works .client {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
@media screen and (max-width: 479px) {
#at-254 .works .client {
flex-direction: column;
}
}
#at-254 .works .client dl {
width: 47.5%;
}
@media screen and (max-width: 479px) {
#at-254 .works .client dl {
width: 100%;
}
}
#at-254 .works dt {
font-size: 1.8rem;
font-weight: 700;
line-height: 1.5;
margin-top: 2rem;
margin-right: 5rem;
}
@media screen and (max-width: 479px) {
#at-254 .works dt {
font-size: 1.5rem;
margin-right: 0;
}
}
#at-254 .works dd {
line-height: 2;
margin-left: 3rem;
}
@media screen and (max-width: 479px) {
#at-254 .works dd {
margin-left: 0;
}
}
#at-254 .works .col_w {
display: flex;
align-items: center;
margin-top: 2rem;
}
@media screen and (max-width: 479px) {
#at-254 .works .col_w {
flex-direction: column;
align-items: flex-start;
}
}
#at-254 .works .col_w dt {
line-height: 0;
margin-top: 0;
}
@media screen and (max-width: 479px) {
#at-254 .works .col_w dt {
line-height: 1.5;
}
}
#at-254 .works .col_over {
display: flex;
}
@media screen and (max-width: 479px) {
#at-254 .works .col_over {
flex-direction: column;
}
}
main#works {
background-image: url(//storage-t.co.jp/wp-content/themes/storage/img/works_bk.svg);
background-repeat: no-repeat;
background-size: cover;
background-position-y: 90vh;
}
.works__container {
position: relative;
max-width: 1366px;
margin: 0 auto;
padding: 12.4rem 5vw;
overflow: hidden;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
@media screen and (max-width: 479px) {
.works__container {
padding: 6.2rem 5vw;
}
}
.works_content {
width: 570px;
min-height: 500px;
position: relative;
margin-bottom: -90px;
}
@media screen and (max-width: 479px) {
.works_content {
width: 100%;
}
}
.works_content:first-child {
margin-top: 0;
}
@media screen and (max-width: 479px) {
.works_content:not(:first-child) {
margin-top: 90px;
}
}
.works_content:nth-child(2n) {
margin-top: 90px;
}
.works_content a {
color: #fff;
}
.works_content .txt {
background-color: #1F1F1F;
padding: 1.5rem 5rem 3rem;
width: 470px;
position: relative;
top: -65px;
min-height: 230px;
}
@media screen and (max-width: 479px) {
.works_content .txt {
width: 100%;
padding: 1.5rem 2.5rem 3rem;
top: 0;
}
}
.works_content .txt h4 {
font-size: 2.4rem;
font-weight: 700;
}
.works_content .txt p {
font-size: 1.5rem;
line-height: 2;
}
.works_content .button {
display: inline-flex;
width: 100px;
height: 22px;
font-size: 1.3rem;
justify-content: center;
align-items: center;
position: relative;
border: none;
line-height: 1;
text-decoration: none;
text-align: center;
outline: none;
cursor: pointer;
border-bottom: 1px white solid;
transition: all 0.5s ease;
font-weight: 800;
font-style: italic;
font-family: 'Montserrat','Noto Sans JP', sans-serif;
width: 130px;
margin: 0;
}
.works_content .button a {
color: #fff;
}
.works_content .button::before {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 3px 0 3px 10px;
border-color: transparent transparent transparent #fff;
position: relative;
right: 1rem;
transition: all 0.5s ease;
}
.works_content .button:hover {
opacity: 0.8;
border-bottom: 1px rgba(255, 255, 255, 0.8) solid;
}
.works_content .button:hover:before {
right: 0.5rem;
}
@media screen and (max-width: 479px) {
.works_content .button {
width: 70vw;
height: 10vw;
}
}
@media screen and (max-width: 479px) {
.works_content .button {
margin: 0 10vw;
}
}
.works .page_nation {
width: 100%;
position: relative;
text-align: center;
}
.works .pagination {
padding: 100px 0;
}
@media screen and (max-width: 479px) {
.works .pagination {
padding: 6.2rem 0;
}
}
.works .pagination ul {
width: 500px;
margin: 0 auto;
padding: 0;
list-style-type: none;
display: flex;
}
@media screen and (max-width: 479px) {
.works .pagination ul {
width: 100%;
justify-content: center;
}
}
.works .pagination a {
display: inline-block;
padding: 10px 17px;
margin: 0 10px;
border: 1px #1F1F1F solid;
line-height: 1.5;
font-weight: 800;
font-style: italic;
font-family: 'Montserrat','Noto Sans JP', sans-serif;
font-weight: bold;
background-color: #fff;
}
@media screen and (max-width: 479px) {
.works .pagination a {
margin: 0 5px;
padding: 5px 10px;
}
}
.works .pagination a:hover {
background-color: #1F1F1F;
color: #fff;
}
.works .pagination .current {
display: inline-block;
padding: 10px 17px;
margin: 0 10px;
border: 1px #1F1F1F solid;
line-height: 1.5;
font-weight: 800;
font-style: italic;
font-family: 'Montserrat','Noto Sans JP', sans-serif;
font-weight: bold;
background-color: #1F1F1F;
color: #fff;
}
@media screen and (max-width: 479px) {
.works .pagination .current {
margin: 0 5px;
padding: 5px 10px;
}
}
.works .p12 .is-active {
background-color: #1F1F1F;
color: #fff;
}
.works .p12 a:first-of-type, .works .p12 a:last-of-type {
padding: 18px 17px 0;
}
@media screen and (max-width: 479px) {
.works .p12 a:first-of-type, .works .p12 a:last-of-type {
padding: 14px 12px 0;
}
}
.works .p12 a:first-of-type:before {
content: "";
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 3.5px 12px 3.5px 0;
border-color: transparent #1F1F1F transparent transparent;
}
.works .p12 a:hover:first-of-type:before {
border-color: transparent #fff transparent transparent;
}
.works .p12 a:last-of-type:before {
content: "";
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 3.5px 0 3.5px 12px;
border-color: transparent transparent transparent #1F1F1F;
}
.works .p12 a:hover:last-of-type:before {
border-color: transparent transparent transparent #fff;
}
.works-article::before {
content: "";
display: block;
background-image: url(//storage-t.co.jp/wp-content/themes/storage/img/frame_light_beige.svg);
width: 1135px;
height: 1135px;
background-repeat: no-repeat;
background-size: contain;
position: absolute;
right: 0;
top: 572px;
z-index: -1;
}
@media screen and (max-width: 479px) {
.works-article::before {
display: none;
}
}
.works-article__heading {
position: relative;
max-width: 1366px;
margin: 0 auto;
padding: 12.4rem 5vw;
overflow: hidden;
max-width: 1000px;
padding-bottom: 0;
}
@media screen and (max-width: 479px) {
.works-article__heading {
padding: 6.2rem 5vw;
}
}
@media screen and (max-width: 479px) {
.works-article__heading {
padding: 0 5vw 3.1rem;
}
}
.works-article__heading .model {
font-weight: 800;
font-style: italic;
font-family: 'Montserrat','Noto Sans JP', sans-serif;
background-color: #E2D5C4;
display: inline-block;
padding: 0 3rem;
line-height: 2.5;
}
.works-article__heading h2 {
font-weight: 800;
font-style: italic;
font-family: 'Montserrat','Noto Sans JP', sans-serif;
font-size: 6rem;
line-height: 1.5;
}
@media screen and (max-width: 479px) {
.works-article__heading h2 {
font-size: 4rem;
line-height: 1;
}
}
.works-article__heading h3 {
font-weight: 800;
font-style: italic;
font-family: 'Montserrat','Noto Sans JP', sans-serif;
font-size: 1.4rem;
line-height: 1;
}
.works-article__heading h3 .txt_en {
font-size: 3rem;
margin-left: 2rem;
}
.works-article__heading h3 .txt_jan {
font-size: 2rem;
}
.works-article__heading h3::before {
content: "";
display: inline-block;
background-color: #1F1F1F;
height: 1px;
width: 50px;
margin: 0 1rem .5rem 0;
}
.works-article_content {
position: relative;
max-width: 1366px;
margin: 0 auto;
padding: 12.4rem 5vw;
overflow: hidden;
max-width: 970px;
padding: 12.4rem 0vw;
}
@media screen and (max-width: 479px) {
.works-article_content {
padding: 6.2rem 5vw;
}
}
@media screen and (max-width: 479px) {
.works-article_content {
padding: 0 5vw;
}
}
.works-article .main_img {
position: relative;
}
.works-article .main_img::before {
content: "";
display: block;
background-image: url(//storage-t.co.jp/wp-content/themes/storage/img/corner_beige_l.svg);
width: 417px;
height: 417px;
background-repeat: no-repeat;
background-size: contain;
position: absolute;
left: 20px;
bottom: -100px;
z-index: -1;
}
@media screen and (max-width: 479px) {
.works-article .main_img::before {
display: none;
}
}
.works-article .main_img img {
position: relative;
left: 120px;
}
@media screen and (max-width: 479px) {
.works-article .main_img img {
left: 0;
}
}
.works-article .b-a {
margin-top: 16rem;
}
@media screen and (max-width: 479px) {
.works-article .b-a {
margin-top: 3rem;
}
}
.works-article .caption {
display: flex;
align-items: center;
font-weight: 800;
font-style: italic;
font-family: 'Montserrat','Noto Sans JP', sans-serif;
font-size: 3.6rem;
width: 970px;
margin: auto;
justify-content: space-evenly;
}
@media screen and (max-width: 479px) {
.works-article .caption {
width: 100%;
line-height: 1;
}
}
@media screen and (max-width: 479px) {
.works-article .caption span {
width: 16%;
}
}
.works-article .b-a_img {
display: flex;
width: 970px;
margin: auto;
justify-content: space-between;
}
@media screen and (max-width: 479px) {
.works-article .b-a_img {
width: 100%;
font-size: 2.5rem;
}
.works-article .b-a_img img {
width: 49%;
}
}
.work_report {
text-align: center;
background-color: #E2D5C4;
padding-bottom: 12.4rem;
}
@media screen and (max-width: 479px) {
.work_report {
margin-top: 6.2rem;
padding-bottom: 3.1rem;
}
}
.work_report h2 {
display: inline-block;
position: relative;
top: -5rem;
}
@media screen and (max-width: 479px) {
.work_report h2 {
top: -2.5rem;
width: 90%;
}
}
.work_report ul {
display: flex;
width: 1200px;
margin: auto;
flex-wrap: wrap;
justify-content: space-between;
}
@media screen and (max-width: 479px) {
.work_report ul {
width: 90%;
padding-inline-start: 0;
}
}
.work_report li {
list-style: none;
margin-bottom: 30px;
}
.comment {
position: relative;
max-width: 1366px;
margin: 0 auto;
padding: 12.4rem 5vw;
overflow: hidden;
max-width: 970px;
}
@media screen and (max-width: 479px) {
.comment {
padding: 6.2rem 5vw;
}
}
.comment img {
margin-top: 5rem;
}
.comment .txt {
margin-top: 5rem;
border: 1px #1F1F1F solid;
padding: 60px 55px 130px;
line-height: 2;
font-size: 1.5rem;
}
@media screen and (max-width: 479px) {
.comment .txt {
margin-top: 2.5rem;
padding: 2rem;
}
}
.comment .page_nation {
width: 100%;
position: relative;
text-align: center;
}
.comment .pagination {
padding: 6rem 0 0;
}
@media screen and (max-width: 479px) {
.comment .pagination {
padding: 3.1rem 0;
}
}
.comment .pagination ul {
width: 100%;
margin: 0 auto;
padding: 0;
list-style-type: none;
display: flex;
justify-content: space-between;
}
@media screen and (max-width: 479px) {
.comment .pagination ul {
width: 100%;
justify-content: center;
}
}
.comment .pagination a {
display: inline-block;
padding: 10px 17px;
margin: 0;
border: 1px #1F1F1F solid;
line-height: 1.5;
font-weight: 800;
font-style: italic;
font-family: 'Montserrat','Noto Sans JP', sans-serif;
font-weight: bold;
background-color: #fff;
width: 33%;
}
@media screen and (max-width: 479px) {
.comment .pagination a {
margin: 0;
padding: 5px 10px;
width: 45%;
}
}
.comment .pagination a:hover {
background-color: #1F1F1F;
color: #fff;
}
@media screen and (max-width: 479px) {
.comment .pagination a.btl {
margin: 0 5%;
}
}
.comment .p12 a[rel="prev"], .comment .p12 a[rel="next"] {
padding: 2px 17px 0;
display: flex;
align-items: center;
}
@media screen and (max-width: 479px) {
.comment .p12 a[rel="prev"], .comment .p12 a[rel="next"] {
padding: 0 1.5rem;
width: 24%;
}
}
.comment .p12 a[rel="prev"] {
justify-content: flex-start;
}
.comment .p12 a[rel="next"] {
justify-content: flex-end;
}
.comment .p12 a[rel="prev"]:before {
content: "";
display: block;
width: 0;
height: 0;
margin: 0 7rem 0 1rem;
border-style: solid;
border-width: 3.5px 12px 3.5px 0;
border-color: transparent #1F1F1F transparent transparent;
}
@media screen and (max-width: 479px) {
.comment .p12 a[rel="prev"]:before {
margin: 0 0.5rem 0 -1rem;
}
}
.comment .p12 a:hover:first-of-type:before {
border-color: transparent #fff transparent transparent;
}
.comment .p12 a[rel="next"]:after {
content: "";
display: block;
width: 0;
height: 0;
margin: 0 1rem 0 7rem;
border-style: solid;
border-width: 3.5px 0 3.5px 12px;
border-color: transparent transparent transparent #1F1F1F;
}
@media screen and (max-width: 479px) {
.comment .p12 a[rel="next"]:after {
margin: 0 -1rem 0 0.5rem;
}
}
.comment .p12 a:hover:last-of-type:after {
border-color: transparent transparent transparent #fff;
}
@media screen and (max-width: 479px) {
#message .intro {
height: auto;
}
}
@media screen and (max-width: 479px) {
#message .intro__container {
background-size: contain;
height: 160px;
}
}
#message h2 {
font-size: 3.4rem;
line-height: 1.5;
margin-bottom: 6rem;
}
@media screen and (max-width: 479px) {
#message h2 {
font-size: 1.8rem;
margin-bottom: 3rem;
}
}
#message .first, #message .light_beige, #message .beige {
font-size: 1.5rem;
line-height: 2;
}
#message .first {
position: relative;
max-width: 1366px;
margin: 0 auto;
padding: 12.4rem 5vw;
overflow: hidden;
padding-bottom: 0;
}
@media screen and (max-width: 479px) {
#message .first {
padding: 6.2rem 5vw;
}
}
@media screen and (max-width: 479px) {
#message .first {
padding: 6.2rem 5vw;
}
}
#message .first__container {
width: 1170px;
background-image: url(//storage-t.co.jp/wp-content/themes/storage/img/0162-5d4a8258v_2.jpg);
background-repeat: no-repeat;
background-position: right top;
min-height: 57rem;
padding-top: 7rem;
}
@media screen and (max-width: 479px) {
#message .first__container {
width: 100%;
background-size: contain;
padding-top: 90vw;
}
}
#message .first__content {
width: 630px;
}
@media screen and (max-width: 479px) {
#message .first__content {
width: 100%;
}
}
#message .light_beige {
background-image: url(//storage-t.co.jp/wp-content/themes/storage/img/bg_triangle2d5c4.svg);
background-position: center 0;
background-size: cover;
}
#message .second {
position: relative;
max-width: 1366px;
margin: 0 auto;
padding: 12.4rem 5vw;
overflow: hidden;
padding-bottom: 0;
}
@media screen and (max-width: 479px) {
#message .second {
padding: 6.2rem 5vw;
}
}
#message .second__container {
display: flex;
justify-content: flex-end;
width: 1170px;
background-image: url(//storage-t.co.jp/wp-content/themes/storage/img/second_bk.png);
background-repeat: no-repeat;
background-position: left top;
min-height: 57rem;
}
@media screen and (max-width: 479px) {
#message .second__container {
width: 100%;
background-size: contain;
}
}
#message .second .block {
width: 530px;
}
@media screen and (max-width: 479px) {
#message .second .block {
margin-top: 100vw;
width: 100%;
}
}
#message .third {
position: relative;
max-width: 1366px;
margin: 0 auto;
padding: 12.4rem 5vw;
overflow: hidden;
padding-bottom: 0;
}
@media screen and (max-width: 479px) {
#message .third {
padding: 6.2rem 5vw;
}
}
@media screen and (max-width: 479px) {
#message .third {
padding: 0 5vw;
}
}
#message .third__container {
width: 1170px;
background-image: url(//storage-t.co.jp/wp-content/themes/storage/img/0182-5d4a8433v_2.jpg);
background-repeat: no-repeat;
background-position: right top;
min-height: 57rem;
}
@media screen and (max-width: 479px) {
#message .third__container {
width: 100%;
background-size: contain;
}
}
#message .third__content {
width: 650px;
margin-top: 6rem;
}
@media screen and (max-width: 479px) {
#message .third__content {
width: 100%;
margin-top: 3rem;
}
}
#message .third h2 {
padding-top: 23rem;
}
@media screen and (max-width: 479px) {
#message .third h2 {
padding-top: 18rem;
}
}
#message .beige {
background-image: url(//storage-t.co.jp/wp-content/themes/storage/img/bg_beige.svg);
background-position: center 0;
background-size: cover;
background-color: #F7F3EF;
padding-bottom: 12.4rem;
}
@media screen and (max-width: 479px) {
#message .beige {
padding-bottom: 0;
}
}
#message .fourth {
position: relative;
max-width: 1366px;
margin: 0 auto;
padding: 12.4rem 5vw;
overflow: hidden;
}
@media screen and (max-width: 479px) {
#message .fourth {
padding: 6.2rem 5vw;
}
}
#message .fourth__container {
display: flex;
justify-content: flex-end;
width: 1170px;
background-image: url(//storage-t.co.jp/wp-content/themes/storage/img/0226-5d4a8563v_2.jpg);
background-repeat: no-repeat;
background-position: left top;
min-height: 76rem;
}
@media screen and (max-width: 479px) {
#message .fourth__container {
width: 100%;
background-size: contain;
}
}
#message .fourth .block {
width: 63rem;
margin-top: 14rem;
}
@media screen and (max-width: 479px) {
#message .fourth .block {
margin-top: 130vw;
width: 100%;
}
}
#message .profile {
width: 1170px;
margin: 0 auto;
padding: 0 5rem 5rem;
background-color: #fff;
}
@media screen and (max-width: 479px) {
#message .profile {
width: 100%;
padding: 0 2.5rem 5rem;
}
}
#message .profile .block {
display: flex;
align-items: center;
justify-content: space-evenly;
}
@media screen and (max-width: 479px) {
#message .profile .block {
flex-direction: column;
margin-top: 5rem;
}
}
@media screen and (max-width: 479px) {
#message .profile .block img {
order: 1;
}
}
#message .profile .txt {
width: 530px;
}
@media screen and (max-width: 479px) {
#message .profile .txt {
width: 100%;
order: 2;
}
}
#message .profile h2 {
font-size: 6rem;
font-weight: 400;
line-height: 0;
margin-left: 5rem;
}
@media screen and (max-width: 479px) {
#message .profile h2 {
margin-left: 0;
text-align: center;
font-size: 4rem;
}
}
#message .profile .title {
font-size: 1.5rem;
font-weight: 700;
}
#message .profile .txt_jan {
font-size: 2.8rem;
font-weight: 700;
}
#message .profile .txt_en {
font-size: 1.2rem;
}
#member .intro {
background-color: #E2D5C4;
}
#member .member:before {
content: "";
position: absolute;
border-bottom: 90px solid transparent;
border-right: calc((100vw - 1243px)/ 2) solid #fff;
border-top: 270px solid #fff;
}
.interview {
background-color: #E2D5C4;
background-image: url(//storage-t.co.jp/wp-content/themes/storage/img/bg_triangle2d5c4.svg);
background-position: center 720px;
background-repeat: no-repeat;
background-size: cover;
}
.interview__container {
position: relative;
max-width: 1366px;
margin: 0 auto;
padding: 12.4rem 5vw;
overflow: hidden;
max-width: 1300px;
}
@media screen and (max-width: 479px) {
.interview__container {
padding: 6.2rem 5vw;
}
}
.interview_content {
display: flex;
width: 1063px;
justify-content: space-between;
align-items: flex-start;
}
@media screen and (max-width: 479px) {
.interview_content {
width: 100%;
flex-direction: column;
}
}
.interview .first_half {
width: 525px;
}
@media screen and (max-width: 479px) {
.interview .first_half {
width: 100%;
}
}
.interview__header {
display: flex;
justify-content: space-between;
width: 523px;
}
@media screen and (max-width: 479px) {
.interview__header {
width: 100%;
margin-top: 2rem;
}
}
.interview .header_txt h3 {
background-color: #1F1F1F;
color: #fff;
font-size: 2rem;
line-height: 2;
padding: 0 1rem;
display: inline-block;
}
@media screen and (max-width: 479px) {
.interview .header_txt h3 {
font-size: 1.2rem;
}
}
.interview .header_txt h4 {
font-size: 4rem;
font-weight: bold;
line-height: 2;
}
@media screen and (max-width: 479px) {
.interview .header_txt h4 {
font-size: 1.8rem;
}
}
.interview .header_txt h4 span {
font-size: 1.5rem;
font-weight: normal;
}
@media screen and (max-width: 479px) {
.interview .header_txt h4 span {
font-size: 1.2rem;
}
}
.interview .header_txt h4 span::before {
content: "/";
margin: 0 1rem;
}
.interview .portrait {
width: 140px;
}
@media screen and (max-width: 479px) {
.interview .portrait {
width: 33vw;
}
}
.interview dt {
background-color: #fff;
font-size: 1.8rem;
line-height: 1.8;
padding: 0 1rem;
margin-top: 3rem;
display: inline-block;
}
@media screen and (max-width: 479px) {
.interview dt {
font-size: 1.6rem;
}
}
.interview dt span {
line-height: 2;
}
.interview dd {
font-size: 1.5rem;
line-height: 2;
}
@media screen and (max-width: 479px) {
.interview dd {
line-height: 1.8;
}
}
.interview .second_list dd {
margin-bottom: 1.8rem;
}
.archive article {
position: relative;
max-width: 1366px;
margin: 0 auto;
padding: 12.4rem 5vw;
overflow: hidden;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
padding-bottom: 0;
}
@media screen and (max-width: 479px) {
.archive article {
padding: 6.2rem 5vw;
}
}
@media screen and (max-width: 479px) {
.archive article {
padding: 0 5vw;
}
}
.archive .one_article {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 370px;
min-height: 42rem; }
@media screen and (max-width: 479px) {
.archive .one_article:nth-of-type(2), .archive .one_article:nth-of-type(3) {
border-top: 2px solid #1F1F1F;
padding-top: 5rem;
}
}
.archive .one_article:nth-of-type(3n + 2) {
margin: 0 auto 0 5rem;
padding-bottom: 3rem;
}
@media screen and (max-width: 479px) {
.archive .one_article:nth-of-type(3n + 2) {
margin: 0;
}
}
.archive .one_article:nth-of-type(n + 4) {
border-top: 2px solid #1F1F1F;
padding-top: 5rem;
}
.archive .one_article:nth-last-of-type(-n+3) {
border-bottom: 2px solid #1F1F1F; }
@media screen and (max-width: 479px) {
.archive .one_article:nth-last-of-type(-n+3) {
border-bottom: none;
padding-bottom: 0;
}
}
.archive .one_article:last-child { min-height: 47rem;
}
.archive .article_thumbnail {
margin-bottom: 2rem;
}
.archive .category {
background-color: #1F1F1F;
color: #fff;
font-size: 1.4rem;
line-height: 1;
padding: .5rem 3rem .5rem 1rem;
}
.archive .date {
font-size: 1.2rem;
font-weight: normal;
color: #1F1F1F;
}
.archive .overview {
font-size: 2rem;
font-weight: bold;
line-height: 1.5;
}
.archive .page_nation {
width: 100%;
position: relative;
text-align: center;
}
.archive .pagination {
padding: 100px 0;
}
@media screen and (max-width: 479px) {
.archive .pagination {
padding: 6.2rem 0;
}
}
.archive .pagination ul {
width: 500px;
margin: 0 auto;
padding: 0;
list-style-type: none;
display: flex;
}
@media screen and (max-width: 479px) {
.archive .pagination ul {
width: 100%;
justify-content: center;
}
}
.archive .wp-pagenavi {
padding: 100px 0;
width: 500px;
margin: 0 auto;
list-style-type: none;
display: flex;
justify-content: center;
}
@media screen and (max-width: 479px) {
.archive .wp-pagenavi {
padding: 6.2rem 0;
width: 100%;
justify-content: center;
}
}
.archive .pagination a {
display: inline-block;
padding: 10px 17px;
margin: 0 10px;
border: 1px #1F1F1F solid;
line-height: 3;
font-weight: 800;
font-style: italic;
font-family: 'Montserrat','Noto Sans JP', sans-serif;
font-weight: bold;
background-color: #fff;
}
@media screen and (max-width: 479px) {
.archive .pagination a {
margin: 0 5px;
padding: 5px 10px;
}
}
.archive .pagination a:hover {
background-color: #1F1F1F;
color: #fff;
}
.archive .wp-pagenavi a {
display: inline-block;
padding: 10px 17px;
margin: 0 10px;
border: 1px #1F1F1F solid;
line-height: 3;
font-weight: 800;
font-style: italic;
font-family: 'Montserrat','Noto Sans JP', sans-serif;
font-weight: bold;
background-color: #fff;
}
@media screen and (max-width: 479px) {
.archive .wp-pagenavi a {
margin: 0 5px;
padding: 5px 10px;
}
}
.archive .wp-pagenavi a:hover {
background-color: #1F1F1F;
color: #fff;
}
.archive .wp-pagenavi span.current {
display: inline-block;
padding: 10px 17px;
margin: 0 10px;
border: 1px #1F1F1F solid;
line-height: 3;
font-weight: 800;
font-style: italic;
font-family: 'Montserrat','Noto Sans JP', sans-serif;
font-weight: bold;
background-color: #1F1F1F;
color: #fff;
}
@media screen and (max-width: 479px) {
.archive .wp-pagenavi span.current {
margin: 0 5px;
padding: 5px 10px;
}
}
.archive .p12 .is-active {
background-color: #1F1F1F;
color: #fff;
}
.archive .p12 a:first-of-type, .archive .p12 a:last-of-type {
padding: 18px 17px 0;
}
@media screen and (max-width: 479px) {
.archive .p12 a:first-of-type, .archive .p12 a:last-of-type {
padding: 14px 12px 0;
}
}
.archive .p12 a:first-of-type:before {
content: "";
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 3.5px 12px 3.5px 0;
border-color: transparent #1F1F1F transparent transparent;
}
.archive .p12 a:hover:first-of-type:before {
border-color: transparent #fff transparent transparent;
}
.archive .p12 a:last-of-type:before {
content: "";
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 3.5px 0 3.5px 12px;
border-color: transparent transparent transparent #1F1F1F;
}
.archive .p12 a:hover:last-of-type:before {
border-color: transparent transparent transparent #fff;
}
.detail__container {
position: relative;
max-width: 1366px;
margin: 0 auto;
padding: 12.4rem 5vw;
overflow: hidden;
width: 920px;
}
@media screen and (max-width: 479px) {
.detail__container {
padding: 6.2rem 5vw;
}
}
@media screen and (max-width: 479px) {
.detail__container {
width: 100%;
padding: 0 5vw 6.2rem;
}
}
.detail__header__sub {
display: flex;
justify-content: space-between;
border-bottom: 3px #1F1F1F solid;
padding-bottom: 2rem;
}
.detail__header__sub .category {
background-color: #1F1F1F;
color: #fff;
font-size: 1.4rem;
line-height: 2.5;
padding: 0 3rem 0rem 1rem;
}
.detail__header__sub .date {
font-size: 1.2rem;
font-weight: normal;
color: #1F1F1F;
}
.detail__header .overview {
font-size: 3rem;
line-height: 1.5;
margin: 3rem 0 3.5rem;
}
@media screen and (max-width: 479px) {
.detail__header .overview {
font-size: 1.6rem;
}
}
.detail__content h2 {
border-top: 2px solid #1F1F1F;
border-bottom: 2px solid #1F1F1F;
text-align: center;
font-size: 3rem;
margin: 6rem 0 1rem;
}
@media screen and (max-width: 479px) {
.detail__content h2 {
font-size: 1.6rem;
margin: 3rem 0 .5rem;
}
}
.detail__content h3 {
border-bottom: dotted 1px #1F1F1F;
font-size: 2.4rem;
line-height: 4.8rem;
margin: 2rem 0;
}
@media screen and (max-width: 479px) {
.detail__content h3 {
font-size: 1.5rem;
line-height: 2.4rem;
margin: 1rem 0;
}
}
.detail__content h4 {
font-size: 2rem;
}
@media screen and (max-width: 479px) {
.detail__content h4 {
font-size: 1.6rem;
}
}
.detail__content h4::before {
content: "";
display: inline-block;
width: 1.6rem;
height: 2px;
background-color: #1F1F1F;
vertical-align: middle;
margin-right: 1rem;
}
.detail__content .point__list dl {
display: flex;
align-items: center;
margin: 1rem 0;
align-items: flex-start;
}
@media screen and (max-width: 479px) {
.detail__content .point__list dl {
align-items: baseline;
justify-content: space-between;
}
}
.detail__content .point__list dt {
content: "";
background-image: url(//storage-t.co.jp/wp-content/themes/storage/img/marker_check.svg);
background-repeat: no-repeat;
width: 25px;
height: 25px;
display: inline-block;
margin-right: 1rem;
}
@media screen and (max-width: 479px) {
.detail__content .point__list dt {
width: 20px;
background-size: contain;
background-position: center 1rem;
}
}
.detail__content .point__list dd {
line-height: 2;
}
@media screen and (max-width: 479px) {
.detail__content .point__list dd {
width: 90%;
}
}
.detail__content ol {
padding-inline-start: 0;
margin-left: 3rem;
}
.detail__content ol li span {
position: relative;
right: 2rem;
}
.detail__content ol li::before {
content: "";
display: inline-block;
background-color: #1F1F1F;
width: 3.5rem;
height: 3.5rem;
position: relative;
top: 1rem;
right: 3rem;
z-index: -1;
}
.detail__content ol ::marker {
color: #fff;
}
.detail__content a {
font-weight: bold;
text-decoration: underline;
}
.detail__content .preformatted, .detail__content .wp-block-preformatted {
border: 2px solid #1F1F1F;
padding: 2.5rem 5rem 5rem;
}
@media screen and (max-width: 479px) {
.detail__content .preformatted, .detail__content .wp-block-preformatted {
padding: 1.25rem 2.5rem 2.5rem;
}
}
.detail__content table {
border-collapse: collapse;
width: 100%;
}
.detail__content th, .detail__content td {
padding: 10px;
border: solid 1px #fff;
text-align: center;
box-sizing: border-box;
line-height: 2;
}
.detail__content th {
background: #1F1F1F;
color: #fff;
}
.detail__content tr:nth-of-type(2n) {
background-color: #E6E6E6;
}
.detail__content tr:last-child {
border-bottom: solid 1px #1F1F1F;
}
.detail__content .tb02 th, .detail__content .tb02 td {
text-align: left;
}
.detail__content .tb02 tr:nth-of-type(n+1) {
background-color: #fff;
}
.detail__content .tb02 tr:nth-of-type(2n+1) {
background-color: #E6E6E6;
}
.detail__content .related {
background-color: #F7F3EF;
padding: 2.5rem;
display: flex;
align-items: flex-start;
justify-content: space-between;
}
@media screen and (max-width: 479px) {
.detail__content .related {
flex-direction: column;
}
}
.detail__content .related img {
width: 220px;
}
@media screen and (max-width: 479px) {
.detail__content .related img {
width: 100%;
}
}
.detail__content .related .txt {
font-size: 2rem;
line-height: 1.5;
width: 60%;
}
@media screen and (max-width: 479px) {
.detail__content .related .txt {
width: 100%;
}
}
.detail__content .related .txt p {
margin: 2rem 0;
}
.detail__content .related .txt .btn {
background-color: #1F1F1F;
}
.detail__content .related .txt .btn span {
color: #fff;
font-size: 1.4rem;
}
.detail__content .related .button {
display: inline-flex;
justify-content: space-between;
width: 466px;
height: 100px;
font-size: 2.8rem;
background-color: #1F1F1F;
justify-content: center;
align-items: center;
border: none;
line-height: 1;
text-decoration: none;
text-align: center;
outline: none;
cursor: pointer;
border: #1F1F1F 2px solid;
transition: all 0.5s ease;
font-weight: 800;
font-style: italic;
font-family: 'Montserrat','Noto Sans JP', sans-serif;
width: 150px;
height: 35px;
}
.detail__content .related .button p {
font-size: 2.8rem;
display: flex;
align-items: center;
justify-content: space-around;
}
.detail__content .related .button .txt_jan {
font-size: 1.4rem;
vertical-align: middle;
display: inline-block;
margin: 0 0 .5rem 2rem;
}
.detail__content .related .button a {
width: 80%;
color: #fff;
}
.detail__content .related .button::before {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 5px 0 5px 18px;
border-color: transparent transparent transparent #fff;
position: relative;
transition: all 0.5s ease;
right: 0rem;
}
@media screen and (max-width: 479px) {
.detail__content .related .button::before {
right: 0rem;
}
}
.detail__content .related .button:hover {
background-color: #fff;
border: #1F1F1F 2px solid;
color: #1F1F1F;
}
.detail__content .related .button:hover a {
color: #1F1F1F;
}
.detail__content .related .button:hover::before {
border-color: transparent transparent transparent #1F1F1F;
right: -1rem;
}
@media screen and (max-width: 479px) {
.detail__content .related .button {
width: 90vw;
height: 8vh;
}
}
.detail__content .related .button p {
font-size: 1.4rem;
}
.detail__content .related .button a {
text-decoration: none;
width: auto;
margin-left: 0.5rem;
}
.detail__content .related__btn {
display: flex;
justify-content: flex-end;
min-height: 200px;
min-height: 35px;
}
@media screen and (max-width: 479px) {
.detail__content .related__btn {
min-height: auto;
}
}
.detail .page_nation {
width: 100%;
position: relative;
text-align: center;
}
.detail .pagination {
padding: 6rem 0 0;
}
@media screen and (max-width: 479px) {
.detail .pagination {
padding: 3.1rem 0;
}
}
.detail .pagination ul {
width: 100%;
margin: 0 auto;
padding: 0;
list-style-type: none;
display: flex;
justify-content: space-between;
}
@media screen and (max-width: 479px) {
.detail .pagination ul {
width: 100%;
justify-content: center;
}
}
.detail .pagination a {
display: flex;
align-items: center;
justify-content: center;
padding: 10px 17px;
margin: 0;
border: 1px #1F1F1F solid;
line-height: 1.5;
font-weight: 800;
font-style: italic;
font-family: 'Montserrat','Noto Sans JP', sans-serif;
font-weight: bold;
background-color: #fff;
width: 33%;
height: 5rem;
}
@media screen and (max-width: 479px) {
.detail .pagination a {
margin: 0;
padding: 5px 10px;
width: 45%;
}
}
.detail .pagination a:hover {
background-color: #1F1F1F;
color: #fff;
}
@media screen and (max-width: 479px) {
.detail .pagination a.btl {
margin: 0 5%;
}
}
.detail .p12 a[rel="prev"], .detail .p12 a[rel="next"] {
padding: 2px 17px 0;
width: 30%;
display: flex;
align-items: center;
}
@media screen and (max-width: 479px) {
.detail .p12 a[rel="prev"], .detail .p12 a[rel="next"] {
padding: 0 1.5rem;
width: 24%;
}
}
.detail .p12 a[rel="prev"] {
justify-content: flex-start;
}
.detail .p12 a[rel="next"] {
justify-content: flex-end;
}
.detail .p12 a[rel="prev"]:before {
content: "";
display: block;
width: 0;
height: 0;
margin: 0 7rem 0 1rem;
border-style: solid;
border-width: 3.5px 12px 3.5px 0;
border-color: transparent #1F1F1F transparent transparent;
}
@media screen and (max-width: 479px) {
.detail .p12 a[rel="prev"]:before {
margin: 0 0.5rem 0 -1rem;
}
}
.detail .p12 a:hover:first-of-type:before {
border-color: transparent #fff transparent transparent;
}
.detail .p12 a[rel="next"]:after {
content: "";
display: block;
width: 0;
height: 0;
margin: 0 1rem 0 7rem;
border-style: solid;
border-width: 3.5px 0 3.5px 12px;
border-color: transparent transparent transparent #1F1F1F;
}
@media screen and (max-width: 479px) {
.detail .p12 a[rel="next"]:after {
margin: 0 -1rem 0 0.5rem;
}
}
.detail .p12 a:hover:last-of-type:after {
border-color: transparent transparent transparent #fff;
}
@media screen and (max-width: 640px) {
.tb01 .head {
display: none;
}
table.tb01 td:first-child {
background: #1F1F1F;
color: #fff;
font-weight: bold;
}
table.tb01 th,
table.tb01 td {
display: block;
width: 100%;
border-bottom: none;
}
}