@charset "UTF-8";
html {
line-height: 1.15;
-webkit-text-size-adjust: 100%;
}  body {
margin: 0;
} main {
display: block;
} h1 {
font-size: 2em;
margin: 0.67em 0;
}  hr {
box-sizing: content-box;
height: 0;
overflow: visible;
} pre {
font-family: monospace, monospace;
font-size: 1em;
}  a {
background-color: transparent;
} abbr[title] {
border-bottom: none;
text-decoration: underline;
text-decoration: underline dotted;
} b,
strong {
font-weight: bolder;
} code,
kbd,
samp {
font-family: monospace, monospace;
font-size: 1em;
} small {
font-size: 80%;
} sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}  img {
border-style: none;
}  button,
input,
optgroup,
select,
textarea {
font-family: inherit;
font-size: 100%;
line-height: 1.15;
margin: 0;
} button,
input {
overflow: visible;
} button,
select {
text-transform: none;
} button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
} button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
} button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
} fieldset {
padding: 0.35em 0.75em 0.625em;
} legend {
box-sizing: border-box;
color: inherit;
display: table;
max-width: 100%;
padding: 0;
white-space: normal;
} progress {
vertical-align: baseline;
} textarea {
overflow: auto;
} [type="checkbox"],
[type="radio"] {
box-sizing: border-box;
padding: 0;
} [type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
} [type="search"] {
-webkit-appearance: textfield;
outline-offset: -2px;
} [type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
} ::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit;
}  details {
display: block;
} summary {
display: list-item;
}  template {
display: none;
} [hidden] {
display: none;
}  *,
*::before,
*::after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
}  body,
button,
input,
select,
optgroup,
textarea {
color: #404040;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
font-size: 1rem;
line-height: 1.5;
}
h1,
h2,
h3,
h4,
h5,
h6 {
clear: both;
}
p {
margin-bottom: 1.5em;
}
dfn,
cite,
em,
i {
font-style: italic;
}
blockquote {
margin: 0 1.5em;
}
address {
margin: 0 0 1.5em;
}
pre {
background: #eee;
font-family: "Courier 10 Pitch", courier, monospace;
line-height: 1.6;
margin-bottom: 1.6em;
max-width: 100%;
overflow: auto;
padding: 1.6em;
}
code,
kbd,
tt,
var {
font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}
abbr,
acronym {
border-bottom: 1px dotted #666;
cursor: help;
}
mark,
ins {
background: #fff9c0;
text-decoration: none;
}
big {
font-size: 125%;
} body {
background: #fff;
}
hr {
background-color: #ccc;
border: 0;
height: 1px;
margin-bottom: 1.5em;
}
ul,
ol {
margin: 0 0 1.5em 3em;
}
ul {
list-style: disc;
}
ol {
list-style: decimal;
}
li > ul,
li > ol {
margin-bottom: 0;
margin-left: 1.5em;
}
dt {
font-weight: 700;
}
dd {
margin: 0 1.5em 1.5em;
} embed,
iframe,
object {
max-width: 100%;
}
img {
height: auto;
max-width: 100%;
}
figure {
margin: 1em 0;
}
table {
margin: 0 0 1.5em;
width: 100%;
} a {
color: #4169e1;
}
a:visited {
color: #800080;
}
a:hover,
a:focus,
a:active {
color: #191970;
}
a:focus {
outline: thin dotted;
}
a:hover,
a:active {
outline: 0;
} button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
border: 1px solid;
border-color: #ccc #ccc #bbb;
border-radius: 3px;
background: #e6e6e6;
color: rgba(0, 0, 0, 0.8);
line-height: 1;
padding: 0.6em 1em 0.4em;
}
button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
border-color: #ccc #bbb #aaa;
}
button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
border-color: #aaa #bbb #bbb;
}
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
color: #666;
border: 1px solid #ccc;
border-radius: 3px;
padding: 3px;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
color: #111;
}
select {
border: 1px solid #ccc;
}
textarea {
width: 100%;
}   .main-navigation {
display: block;
width: 100%;
}
.main-navigation ul {
display: none;
list-style: none;
margin: 0;
padding-left: 0;
}
.main-navigation ul ul {
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
float: left;
position: absolute;
top: 100%;
left: -999em;
z-index: 99999;
}
.main-navigation ul ul ul {
left: -999em;
top: 0;
}
.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
display: block;
left: auto;
}
.main-navigation ul ul a {
width: 200px;
}
.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
left: auto;
}
.main-navigation li {
position: relative;
}
.main-navigation a {
display: block;
text-decoration: none;
} .menu-toggle,
.main-navigation.toggled ul {
display: block;
}
@media screen and (min-width: 37.5em) {
.menu-toggle {
display: none;
}
.main-navigation ul {
display: flex;
}
}
.site-main .comment-navigation,
.site-main
.posts-navigation,
.site-main
.post-navigation {
margin: 0 0 1.5em;
}
.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
display: flex;
}
.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
flex: 1 0 50%;
}
.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
text-align: end;
flex: 1 0 50%;
} .sticky {
display: block;
}
.post,
.page {
margin: 0 0 1.5em;
}
.updated:not(.published) {
display: none;
}
.page-content,
.entry-content,
.entry-summary {
margin: 1.5em 0 0;
}
.page-links {
clear: both;
margin: 0 0 1.5em;
} .comment-content a {
word-wrap: break-word;
}
.bypostauthor {
display: block;
} .widget {
margin: 0 0 1.5em;
}
.widget select {
max-width: 100%;
} .page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
border: none;
margin-bottom: 0;
margin-top: 0;
padding: 0;
} .custom-logo-link {
display: inline-block;
} .wp-caption {
margin-bottom: 1.5em;
max-width: 100%;
}
.wp-caption img[class*="wp-image-"] {
display: block;
margin-left: auto;
margin-right: auto;
}
.wp-caption .wp-caption-text {
margin: 0.8075em 0;
}
.wp-caption-text {
text-align: center;
} .gallery {
margin-bottom: 1.5em;
display: grid;
grid-gap: 1.5em;
}
.gallery-item {
display: inline-block;
text-align: center;
width: 100%;
}
.gallery-columns-2 {
grid-template-columns: repeat(2, 1fr);
}
.gallery-columns-3 {
grid-template-columns: repeat(3, 1fr);
}
.gallery-columns-4 {
grid-template-columns: repeat(4, 1fr);
}
.gallery-columns-5 {
grid-template-columns: repeat(5, 1fr);
}
.gallery-columns-6 {
grid-template-columns: repeat(6, 1fr);
}
.gallery-columns-7 {
grid-template-columns: repeat(7, 1fr);
}
.gallery-columns-8 {
grid-template-columns: repeat(8, 1fr);
}
.gallery-columns-9 {
grid-template-columns: repeat(9, 1fr);
}
.gallery-caption {
display: block;
}   .infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
display: none;
} .infinity-end.neverending .site-footer {
display: block;
}   .screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute !important;
width: 1px;
word-wrap: normal !important;
}
.screen-reader-text:focus {
background-color: #f1f1f1;
border-radius: 3px;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
clip: auto !important;
clip-path: none;
color: #21759b;
display: block;
font-size: 0.875rem;
font-weight: 700;
height: auto;
left: 5px;
line-height: normal;
padding: 15px 23px 14px;
text-decoration: none;
top: 5px;
width: auto;
z-index: 100000;
} #primary[tabindex="-1"]:focus {
outline: 0;
} .alignleft { float: left; margin-right: 1.5em;
margin-bottom: 1.5em;
}
.alignright { float: right; margin-left: 1.5em;
margin-bottom: 1.5em;
}
.aligncenter {
clear: both;
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 1.5em;
}
   .off1300,
.off1100,
.off991,
.off767,
.off640,
.off480,
.off375,
.off360,
.off320 {
display: block !important;
}
.on1300,
.on1100,
.on991,
.on767,
.on640,
.on480,
.on375,
.on360,
.on320 {
display: none !important;
}
@media (max-width: 1300px) {
.off1300 {
display: none !important;
}
.on1300 {
display: block !important;
}
}
@media (max-width: 1100px) {
.off1100 {
display: none !important;
}
.on1100 {
display: block !important;
}
}
@media (max-width: 991px) {
.off991 {
display: none !important;
}
.on991 {
display: block !important;
}
}
@media (max-width: 767px) {
.off767 {
display: none !important;
}
.on767 {
display: block !important;
}
}
@media (max-width: 640px) {
.off640 {
display: none !important;
}
.on640 {
display: block !important;
}
}
@media (max-width: 480px) {
.off480 {
display: none !important;
}
.on480 {
display: block !important;
}
}
@media (max-width: 375px) {
.off375 {
display: none !important;
}
.on375 {
display: block !important;
}
}
@media (max-width: 360px) {
.off360 {
display: none !important;
}
.on360 {
display: block !important;
}
}
@media (max-width: 320px) {
.off320 {
display: none !important;
}
.on320 {
display: block !important;
}
}
body {
-webkit-animation-name: fadein;
animation-name: fadein;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
@-webkit-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}  html {
line-height: 1.15;
-webkit-text-size-adjust: 100%;
font-size: 10px;
font-size: 62.5%;
}
body {
font-size: 16px;
font-size: 1.6rem;
line-height: 1.6;
font-family: 'M PLUS 1p', sans-serif;
font-weight: 300;
margin-bottom: 0 !important;
color: #000;
border-left: solid 1rem  #00a0e9;
letter-spacing: 0.12em;
}
body::before {
background-color: #00a0e9;
z-index: 99999;
content: "";
display: block;
width: 100%;
height: 0.2rem;
position: absolute;
top: 0;
left: 0;
}
@media (max-width: 767px) {
body {
font-size: 14px;
font-size: 1.4rem;
line-height: 1.4;
}
}
p, ol, ul, li, h1, h2, h3, h4, h5 {
margin: 0;
padding: 0;
list-style: none;
}
a {
color: #000;
text-decoration: none;
}
a:hover {
color: #000;
}
a:visited {
color: #000;
}
b, strong {
font-weight: 700;
}
h2.section-title {
font-size: 3rem;
}
@media (max-width: 991px) {
h2.section-title {
font-size: 3rem;
}
}
@media (max-width: 767px) {
h2.section-title {
font-size: 2rem;
}
}
@media (max-width: 480px) {
h2.section-title {
font-size: 1.8rem;
}
} #content {
width: 100%;
} #page {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
-webkit-flex-direction: column;
-moz-box-orient: vertical;
-moz-box-direction: normal;
flex-direction: column;
min-height: 100vh;
overflow: hidden;
background: rgba(231, 231, 231, 0.4);
}
#colophon {
margin-top: auto;
padding-bottom: 0;
} header#masthead {
position: fixed;
top: 0;
left: 0;
background: #fff;
z-index: 999;
color: #fff;
width: 24rem;
border-left: solid 0.3rem #00a0e9;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
-o-transition: all .3s ease;
transition: all .3s ease;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
border-bottom-right-radius: 20px;
}
header#masthead.scrollUp {
opacity: .2;
left: -150px;
}
@media (max-width: 767px) {
header#masthead.scrollUp {
left: 0;
}
}
header#masthead:hover {
opacity: 1;
-webkit-box-shadow: 1px 1px 1px #e6e6e6;
box-shadow: 1px 1px 1px #e6e6e6;
left: 0;
}
@media (max-width: 767px) {
header#masthead {
width: 80px;
}
}
@media (max-width: 767px) {
header#masthead .site-branding .custom-logo-link {
width: 100%;
}
}
header#masthead .site-branding .custom-logo-link img {
padding: 20px;
width: 100%;
}
@media (max-width: 767px) {
header#masthead .site-branding .custom-logo-link img {
margin: auto;
display: block;
padding: 0.5rem 0;
width: 66px;
}
}
header#masthead nav#site-navigation.main-navigation ul#primary-menu {
display: inline-block;
}
@media (max-width: 767px) {
header#masthead nav#site-navigation.main-navigation ul#primary-menu {
margin: 4rem 0 0;
}
}
header#masthead nav#site-navigation.main-navigation ul#primary-menu li.menu-item {
display: inline-block;
width: 100%;
-o-transition: all .3s ease;
transition: all .3s ease;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
position: relative;
font-size: 1.6rem;
}
@media (max-width: 767px) {
header#masthead nav#site-navigation.main-navigation ul#primary-menu li.menu-item {
font-size: 1.8rem;
}
}
header#masthead nav#site-navigation.main-navigation ul#primary-menu li.menu-item a {
padding: 1.25rem 0 1.25rem 1rem;
}
header#masthead nav#site-navigation.main-navigation ul#primary-menu li.menu-item a:hover {
color: #fff;
}
header#masthead nav#site-navigation.main-navigation ul#primary-menu li.menu-item.parent > a:before {
content: '';
position: absolute;
top: 45%;
right: 1.5rem;
width: 7px;
height: 7px;
margin-left: -18px;
border-left: 2px solid #00a0e9;
border-bottom: 2px solid #00a0e9;
-webkit-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
transform: rotate(-135deg);
}
header#masthead nav#site-navigation.main-navigation ul#primary-menu li.menu-item.parent a:hover::before {
border-left: 2px solid #ffffff;
border-bottom: 2px solid #ffffff;
}
header#masthead nav#site-navigation.main-navigation ul#primary-menu li.menu-item ul.sub-menu li.child:before {
top: 45%;
}
header#masthead nav#site-navigation.main-navigation ul#primary-menu li.menu-item.parent:hover {
z-index: 9999;
}
header#masthead nav#site-navigation.main-navigation ul#primary-menu li.menu-item:hover > ul,
header#masthead nav#site-navigation.main-navigation ul#primary-menu li.menu-item.focus > ul {
left: 23.7rem;
top: -3rem;
display: block;
width: 250px;
background: rgba(0, 0, 0, 0.5);
border-radius: 20px;
padding: 3rem 0;
}
header#masthead nav#site-navigation.main-navigation ul#primary-menu li.menu-item ul.sub-menu li {
background: #3d3d3d;
}
header#masthead nav#site-navigation.main-navigation ul#primary-menu li.menu-item ul.sub-menu li a {
color: #fff;
border-bottom: dotted 1px #555;
}
header#masthead nav#site-navigation.main-navigation ul#primary-menu li.menu-item ul.sub-menu li.child {
margin: 0 !important;
opacity: 1;
z-index: 99999;
}
header#masthead nav#site-navigation.main-navigation ul#primary-menu li.menu-item ul.sub-menu li.child:hover {
opacity: 1 !important;
z-index: 99999;
position: relative;
}
header#masthead nav#site-navigation.main-navigation ul#primary-menu li.menu-item ul.sub-menu li.child a {
width: 250px;
}
header#masthead nav#site-navigation.main-navigation ul#primary-menu li.menu-item.parent a,
header#masthead nav#site-navigation.main-navigation ul#primary-menu li.menu-item ul.sub-menu li.child a {
position: relative;
}
header#masthead nav#site-navigation.main-navigation ul#primary-menu li.menu-item.parent > a:after,
header#masthead nav#site-navigation.main-navigation ul#primary-menu li.menu-item ul.sub-menu li.child > a:after {
content: '';
display: inline-block;
position: absolute;
left: 0;
bottom: 0;
z-index: -1;
width: 100%;
height: 5rem;
background: #00a0e9;
-webkit-transform: scaleX(0);
-ms-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: right top;
-ms-transform-origin: right top;
transform-origin: right top;
-webkit-transition: -webkit-transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: -webkit-transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
-o-transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
header#masthead nav#site-navigation.main-navigation ul#primary-menu li.menu-item ul.sub-menu li.child > a:after {
background: #03bff4;
}
header#masthead nav#site-navigation.main-navigation ul#primary-menu li.menu-item ul.sub-menu li.child.menu-item-object-custom > a:after {
background: #3d3d3d;
}
header#masthead nav#site-navigation.main-navigation ul#primary-menu li.menu-item ul.sub-menu li.child.menu-item-object-custom:hover > a:after {
background: #03bff4;
}
header#masthead nav#site-navigation.main-navigation ul#primary-menu li.menu-item.parent:hover > a,
header#masthead nav#site-navigation.main-navigation ul#primary-menu li.menu-item.parent.current_page_item > a,
header#masthead nav#site-navigation.main-navigation ul#primary-menu li.menu-item.parent.current_page_parent > a,
header#masthead nav#site-navigation.main-navigation ul#primary-menu li.menu-item ul.sub-menu li.child:hover > a,
header#masthead nav#site-navigation.main-navigation ul#primary-menu li.menu-item ul.sub-menu li.child.current-menu-item > a {
-webkit-transform-origin: left top;
-ms-transform-origin: left top;
transform-origin: left top;
-webkit-transform: scaleX(1);
-ms-transform: scaleX(1);
transform: scaleX(1);
color: #fff;
}
header#masthead nav#site-navigation.main-navigation ul#primary-menu li.menu-item.parent:hover > a::before,
header#masthead nav#site-navigation.main-navigation ul#primary-menu li.menu-item.parent.current_page_item > a::before,
header#masthead nav#site-navigation.main-navigation ul#primary-menu li.menu-item.parent.current_page_parent > a::before {
border-left: 2px solid #ffffff;
border-bottom: 2px solid #ffffff;
}
header#masthead nav#site-navigation.main-navigation ul#primary-menu li.menu-item.parent:hover a:after,
header#masthead nav#site-navigation.main-navigation ul#primary-menu li.menu-item.parent.current_page_item a:after,
header#masthead nav#site-navigation.main-navigation ul#primary-menu li.menu-item.parent.current_page_parent a:after,
header#masthead nav#site-navigation.main-navigation ul#primary-menu li.menu-item ul.sub-menu li.child:hover a:after,
header#masthead nav#site-navigation.main-navigation ul#primary-menu li.menu-item ul.sub-menu li.child.current-menu-item a:after {
-webkit-transform-origin: left top;
-ms-transform-origin: left top;
transform-origin: left top;
-webkit-transform: scaleX(1);
-ms-transform: scaleX(1);
transform: scaleX(1);
}
header#masthead nav#site-navigation.main-navigation .nav-contact {
text-align: center;
padding-top: 20px;
padding-bottom: 25px;
border-top: dotted 1px #ddd;
}
header#masthead nav#site-navigation.main-navigation .nav-contact a {
display: inline-block;
padding: 1.5rem 3rem;
background: #ddd;
-webkit-box-shadow: 0 0.1rem 0.5rem rgba(0, 0, 0, 0.1);
box-shadow: 0 0.1rem 0.5rem rgba(0, 0, 0, 0.1);
-o-transition: all .3s ease;
transition: all .3s ease;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
}
header#masthead nav#site-navigation.main-navigation .nav-contact a span {
color: #000;
font-size: 1.3rem;
width: 100%;
display: block;
line-height: 1;
-o-transition: all .3s ease;
transition: all .3s ease;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
}
header#masthead nav#site-navigation.main-navigation .nav-contact a:hover {
background: #00a0e9;
-webkit-transform: translateY(-2px);
-ms-transform: translateY(-2px);
transform: translateY(-2px);
-webkit-box-shadow: 0 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.3);
box-shadow: 0 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.3);
}
header#masthead nav#site-navigation.main-navigation .nav-contact a:hover span {
color: #fff;
}
header#masthead nav#site-navigation.sp-navi #drawer-checkbox {
display: none;
}
header#masthead nav#site-navigation.sp-navi #drawer-checkbox:checked ~ #drawer-icon span {
background: rgba(51, 51, 51, 0);
}
header#masthead nav#site-navigation.sp-navi #drawer-checkbox:checked ~ #drawer-icon span::before,
header#masthead nav#site-navigation.sp-navi #drawer-checkbox:checked ~ #drawer-icon span::after {
content: "";
display: block;
height: 100%;
left: 50%;
margin: -8% 0 0 -42%;
position: absolute;
top: 50%;
width: 100%;
}
header#masthead nav#site-navigation.sp-navi #drawer-checkbox:checked ~ #drawer-icon span::before {
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
header#masthead nav#site-navigation.sp-navi #drawer-checkbox:checked ~ #drawer-icon span::after {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
header#masthead nav#site-navigation.sp-navi #drawer-checkbox:checked ~ #drawer-content {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
-webkit-box-shadow: 6px 0 24px rgba(0, 0, 0, 0.16);
box-shadow: 6px 0 24px rgba(0, 0, 0, 0.16);
}
header#masthead nav#site-navigation.sp-navi #drawer-checkbox:checked ~ #drawer-close {
display: block;
opacity: 0.3;
}
header#masthead nav#site-navigation.sp-navi #drawer-icon {
cursor: pointer;
display: inline-block;
height: 30px;
position: relative;
width: 100%;
}
header#masthead nav#site-navigation.sp-navi #drawer-icon span {
background: #333;
border-radius: 4px;
display: block;
height: 1px;
left: 0;
right: 0;
margin: auto;
position: absolute;
top: 1.5rem;
-webkit-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
width: 35px;
}
header#masthead nav#site-navigation.sp-navi #drawer-icon span::before, header#masthead nav#site-navigation.sp-navi #drawer-icon span::after {
-webkit-transform: rotate(0);
background: #333;
border-radius: 4px;
content: "";
display: block;
height: 100%;
left: 50%;
margin: -8% 0 0 -50%;
position: absolute;
top: 50%;
-ms-transform: rotate(0);
transform: rotate(0);
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
width: 100%;
}
header#masthead nav#site-navigation.sp-navi #drawer-icon span::before {
margin-top: -29%;
}
header#masthead nav#site-navigation.sp-navi #drawer-icon span::after {
margin-top: 25%;
}
header#masthead nav#site-navigation.sp-navi #drawer-text {
color: #000;
display: block;
text-align: center;
font-size: 1.4rem;
padding-bottom: 1rem;
}
header#masthead nav#site-navigation.sp-navi #drawer-content {
overflow: auto;
position: fixed;
top: 0;
left: 0;
z-index: 40;
max-width: 90%;
height: 100%;
background: #fff;
-webkit-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
}
header#masthead nav#site-navigation.sp-navi #drawer-content .drawer-header {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
}
header#masthead nav#site-navigation.sp-navi #drawer-content .drawer-header .site-branding {
width: calc(100% - 100px);
}
header#masthead nav#site-navigation.sp-navi #drawer-content .drawer-header .site-branding a.custom-logo-link {
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
}
header#masthead nav#site-navigation.sp-navi #drawer-content .drawer-header .site-branding a.custom-logo-link img.custom-logo {
width: 90%;
height: 90%;
max-width: 300px;
padding-bottom: 0;
margin: 0 0 0 5px;
}
header#masthead nav#site-navigation.sp-navi #drawer-content .drawer-header .btn {
width: 100px;
-webkit-appearance: none;
background-color: #01a0e9;
border-radius: 0;
-webkit-box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.16);
box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.16);
color: #fff;
cursor: pointer;
font-size: 16px;
margin: 0;
padding: 8px 0;
text-align: center;
text-decoration: none;
-webkit-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-box-align: center;
align-items: center;
border-bottom-left-radius: 30px;
}
header#masthead nav#site-navigation.sp-navi #drawer-content .menu-menu-1-container {
margin-top: 5rem;
}
header#masthead nav#site-navigation.sp-navi #drawer-content .nav-contact {
text-align: center;
padding-bottom: 10rem;
}
header#masthead nav#site-navigation.sp-navi #drawer-content .nav-contact a {
display: inline-block;
padding: 1.5rem 3rem;
background: #ddd;
-webkit-box-shadow: 0 0.1rem 0.5rem rgba(0, 0, 0, 0.1);
box-shadow: 0 0.1rem 0.5rem rgba(0, 0, 0, 0.1);
-o-transition: all .3s ease;
transition: all .3s ease;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
}
header#masthead nav#site-navigation.sp-navi #drawer-content .nav-contact a span {
color: #000;
font-size: 1.3rem;
width: 100%;
display: block;
line-height: 1;
-o-transition: all .3s ease;
transition: all .3s ease;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
}
header#masthead nav#site-navigation.sp-navi #drawer-content .nav-contact a:hover {
background: #00a0e9;
-webkit-transform: translateY(-2px);
-ms-transform: translateY(-2px);
transform: translateY(-2px);
-webkit-box-shadow: 0 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.3);
box-shadow: 0 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.3);
}
header#masthead nav#site-navigation.sp-navi #drawer-content .nav-contact a:hover span {
color: #fff;
}
header#masthead nav#site-navigation.sp-navi #drawer-close {
display: none;
position: fixed;
z-index: 39;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0;
-webkit-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
header#masthead nav#site-navigation.sp-navi ul#primary-menu {
padding: 0 0 0 30px;
}
header#masthead nav#site-navigation.sp-navi ul#primary-menu li.menu-item.parent {
margin-bottom: 3rem;
}
header#masthead nav#site-navigation.sp-navi ul#primary-menu li.menu-item.parent a {
position: relative;
font-size: 1.8rem;
padding-bottom: 1rem;
display: block;
}
header#masthead nav#site-navigation.sp-navi ul#primary-menu li.menu-item.parent a:hover {
color: #fff;
}
header#masthead nav#site-navigation.sp-navi ul#primary-menu li.menu-item.parent > a:before {
content: '';
position: absolute;
top: 1rem;
width: 7px;
height: 7px;
margin-left: -18px;
border-left: 2px solid #00a0e9;
border-bottom: 2px solid #00a0e9;
-webkit-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
transform: rotate(-135deg);
}
header#masthead nav#site-navigation.sp-navi ul#primary-menu li.menu-item.parent > a:hover::before {
border-left: 2px solid #ffffff;
border-bottom: 2px solid #ffffff;
}
header#masthead nav#site-navigation.sp-navi ul#primary-menu li.menu-item.parent:last-child {
border-bottom: none;
padding-bottom: 1rem;
}
header#masthead nav#site-navigation.sp-navi ul#primary-menu li.menu-item.parent ul.sub-menu {
width: 100%;
margin-left: 0;
position: relative;
}
header#masthead nav#site-navigation.sp-navi ul#primary-menu li.menu-item.parent ul.sub-menu li.child a {
position: relative;
display: block;
font-size: 1.4rem;
padding: 1.35rem 0 1.35rem;
margin-left: 2rem;
}
header#masthead nav#site-navigation.sp-navi ul#primary-menu li.menu-item.parent ul.sub-menu li.child a:hover {
color: #fff;
}
header#masthead nav#site-navigation.sp-navi ul#primary-menu li.parent > a:after,
header#masthead nav#site-navigation.sp-navi ul#primary-menu li.child > a:after {
content: '';
display: inline-block;
position: absolute;
left: 0;
bottom: 0;
z-index: -1;
width: 100%;
height: 4.5rem;
background: #00a0e9;
left: -30px;
width: calc(100% + 3rem);
-webkit-transform: scaleX(0);
-ms-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: right top;
-ms-transform-origin: right top;
transform-origin: right top;
-webkit-transition: -webkit-transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: -webkit-transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
-o-transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
header#masthead nav#site-navigation.sp-navi ul#primary-menu li.child > a:after {
background: #03bff4;
}
header#masthead nav#site-navigation.sp-navi ul#primary-menu li.parent:hover > a:before,
header#masthead nav#site-navigation.sp-navi ul#primary-menu li.parent.parent.current_page_item > a:before,
header#masthead nav#site-navigation.sp-navi ul#primary-menu li.parent.parent.current_page_parent > a:before {
border-left: 2px solid #ffffff;
border-bottom: 2px solid #ffffff;
}
header#masthead nav#site-navigation.sp-navi ul#primary-menu li.parent:hover > a,
header#masthead nav#site-navigation.sp-navi ul#primary-menu li.parent.current_page_item > a,
header#masthead nav#site-navigation.sp-navi ul#primary-menu li.parent.current_page_parent > a,
header#masthead nav#site-navigation.sp-navi ul#primary-menu li.child:hover > a,
header#masthead nav#site-navigation.sp-navi ul#primary-menu li.child.current-menu-item > a {
-webkit-transform-origin: left top;
-webkit-transform: scaleX(1);
-ms-transform: scaleX(1);
transform: scaleX(1);
}
header#masthead nav#site-navigation.sp-navi ul#primary-menu li.parent:hover > a,
header#masthead nav#site-navigation.sp-navi ul#primary-menu li.parent.current_page_item > a,
header#masthead nav#site-navigation.sp-navi ul#primary-menu li.parent.current_page_parent > a,
header#masthead nav#site-navigation.sp-navi ul#primary-menu li.child.current-menu-item > a {
color: #FFF;
}
header#masthead nav#site-navigation.sp-navi ul#primary-menu li.parent:hover > a:after,
header#masthead nav#site-navigation.sp-navi ul#primary-menu li.parent.current_page_item > a:after,
header#masthead nav#site-navigation.sp-navi ul#primary-menu li.parent.current_page_parent > a:after,
header#masthead nav#site-navigation.sp-navi ul#primary-menu li.child:hover > a:after,
header#masthead nav#site-navigation.sp-navi ul#primary-menu li.child.current-menu-item > a:after {
-webkit-transform-origin: left top;
-ms-transform-origin: left top;
transform-origin: left top;
-webkit-transform: scaleX(1);
-ms-transform: scaleX(1);
transform: scaleX(1);
} footer#colophon {
background: #fff;
}
footer#colophon section#footer-map {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
-moz-box-pack: justify;
justify-content: space-between;
max-width: 1300px;
margin: auto;
padding: 5rem 3rem;
}
@media (max-width: 991px) {
footer#colophon section#footer-map {
-ms-flex-pack: distribute;
-webkit-justify-content: space-around;
justify-content: space-around;
padding: 5rem 3rem 3rem;
}
}
footer#colophon section#footer-map .logoarea {
width: 40%;
-webkit-box-ordinal-group: 1;
-ms-flex-order: 1;
-webkit-order: 1;
-moz-box-ordinal-group: 2;
order: 1;
}
@media (max-width: 991px) {
footer#colophon section#footer-map .logoarea {
width: 100%;
-webkit-box-ordinal-group: 2;
-ms-flex-order: 2;
-webkit-order: 2;
-moz-box-ordinal-group: 3;
order: 2;
margin-top: 8rem;
text-align: center;
}
}
footer#colophon section#footer-map .logoarea .company {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
footer#colophon section#footer-map .logoarea .company p.logo {
width: 100%;
}
footer#colophon section#footer-map .logoarea .company p.address {
width: 100%;
margin: 1rem 0 0 1rem;
}
@media (max-width: 991px) {
footer#colophon section#footer-map .logoarea .company p.address {
margin: 2rem 0 0;
}
}
footer#colophon section#footer-map .logoarea .company p.address a {
position: relative;
font-size: 2rem;
margin-left: 3rem;
}
footer#colophon section#footer-map .logoarea .company p.address a::before {
content: "";
display: inline-block;
background: url(//hoshizaki-shonan.co.jp/wps/wp-content/themes/hoshizaki-shonan/img/map.png);
background-repeat: no-repeat;
width: 2.5rem;
background-size: 100%;
position: absolute;
left: -3rem;
top: 0px;
bottom: 0;
margin: auto;
}
footer#colophon section#footer-map .logoarea .company .icon_area {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
min-height: 16vh;
position: relative;
}
@media (max-width: 991px) {
footer#colophon section#footer-map .logoarea .company .icon_area {
min-height: auto;
margin-top: 5rem;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
justify-content: center;
}
}
footer#colophon section#footer-map .logoarea .company .icon_area p.icon {
width: 88px;
margin: auto 1rem 0;
padding-bottom: 0;
}
@media (max-width: 991px) {
footer#colophon section#footer-map .logoarea .company .icon_area p.icon {
margin: auto 1rem 2rem;
}
}
footer#colophon section#footer-map .logoarea .company .icon_area p.icon img {
width: 100%;
height: auto;
-o-object-fit: contain;
object-fit: contain;
font-family: "object-fit: contain;";
}
footer#colophon section#footer-map nav#footer_nav {
width: 25%;
margin-top: 2rem;
-webkit-box-ordinal-group: 2;
-ms-flex-order: 2;
-webkit-order: 2;
-moz-box-ordinal-group: 3;
order: 2;
}
@media (max-width: 991px) {
footer#colophon section#footer-map nav#footer_nav {
-webkit-box-ordinal-group: 1;
-ms-flex-order: 1;
-webkit-order: 1;
-moz-box-ordinal-group: 2;
order: 1;
width: 50%;
max-width: 230px;
}
}
@media (max-width: 480px) {
footer#colophon section#footer-map nav#footer_nav {
width: 100%;
max-width: 100%;
padding-left: 1rem;
margin-top: 0;
}
}
footer#colophon section#footer-map nav#footer_nav ul#footer01 li.parent,
footer#colophon section#footer-map nav#footer_nav ul#footer02 li.parent {
margin-bottom: 1.5rem;
width: 100%;
-o-transition: all .3s ease;
transition: all .3s ease;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
position: relative;
}
footer#colophon section#footer-map nav#footer_nav ul#footer01 li.parent:before,
footer#colophon section#footer-map nav#footer_nav ul#footer02 li.parent:before {
content: '';
position: absolute;
top: 10px;
width: 6px;
height: 6px;
margin-left: -18px;
border-left: 1px solid #00a0e9;
border-bottom: 1px solid #00a0e9;
-webkit-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
transform: rotate(-135deg);
}
footer#colophon section#footer-map nav#footer_nav ul#footer01 li.parent ul.sub-menu,
footer#colophon section#footer-map nav#footer_nav ul#footer02 li.parent ul.sub-menu {
margin-top: 1rem;
margin-left: 2rem;
}
@media (max-width: 480px) {
footer#colophon section#footer-map nav#footer_nav ul#footer01 li.parent ul.sub-menu,
footer#colophon section#footer-map nav#footer_nav ul#footer02 li.parent ul.sub-menu {
margin-top: 2rem;
}
}
footer#colophon section#footer-map nav#footer_nav ul#footer01 li.parent ul.sub-menu li.child,
footer#colophon section#footer-map nav#footer_nav ul#footer02 li.parent ul.sub-menu li.child {
margin-bottom: 1rem;
-o-transition: all .3s ease;
transition: all .3s ease;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
position: relative;
}
@media (max-width: 480px) {
footer#colophon section#footer-map nav#footer_nav ul#footer01 li.parent ul.sub-menu li.child,
footer#colophon section#footer-map nav#footer_nav ul#footer02 li.parent ul.sub-menu li.child {
margin-bottom: 2rem;
}
}
footer#colophon section#footer-map nav#footer_nav ul#footer01 li.parent ul.sub-menu li.child:before,
footer#colophon section#footer-map nav#footer_nav ul#footer02 li.parent ul.sub-menu li.child:before {
content: '';
position: absolute;
top: 10px;
width: 6px;
height: 6px;
margin-left: -18px;
border-left: 1px solid #00a0e9;
border-bottom: 1px solid #00a0e9;
-webkit-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
transform: rotate(-135deg);
}
footer#colophon section#footer-map nav#footer_nav ul#footer01 li.parent ul.sub-menu li.child a,
footer#colophon section#footer-map nav#footer_nav ul#footer02 li.parent ul.sub-menu li.child a {
position: relative;
}
@media (max-width: 480px) {
footer#colophon section#footer-map nav#footer_nav ul#footer01 li.parent ul.sub-menu li.child a,
footer#colophon section#footer-map nav#footer_nav ul#footer02 li.parent ul.sub-menu li.child a {
font-size: 1.6rem;
}
}
footer#colophon section#footer-map nav#footer_nav ul#footer01 li.parent ul.sub-menu li.child > a:after,
footer#colophon section#footer-map nav#footer_nav ul#footer02 li.parent ul.sub-menu li.child > a:after {
content: '';
display: inline-block;
position: absolute;
left: 0;
bottom: -2px;
width: 100%;
height: 1px;
background: #00a0e9;
-webkit-transform: scaleX(0);
-ms-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: right top;
-ms-transform-origin: right top;
transform-origin: right top;
-webkit-transition: -webkit-transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: -webkit-transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
-o-transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
footer#colophon section#footer-map nav#footer_nav ul#footer01 li.parent ul.sub-menu li.child:hover a,
footer#colophon section#footer-map nav#footer_nav ul#footer02 li.parent ul.sub-menu li.child:hover a {
-webkit-transform-origin: left top;
-webkit-transform: scaleX(1);
-ms-transform: scaleX(1);
transform: scaleX(1);
}
footer#colophon section#footer-map nav#footer_nav ul#footer01 li.parent ul.sub-menu li.child:hover a:after,
footer#colophon section#footer-map nav#footer_nav ul#footer02 li.parent ul.sub-menu li.child:hover a:after {
-webkit-transform-origin: left top;
-ms-transform-origin: left top;
transform-origin: left top;
-webkit-transform: scaleX(1);
-ms-transform: scaleX(1);
transform: scaleX(1);
}
footer#colophon section#footer-map nav#footer_nav ul#footer01 li.parent a,
footer#colophon section#footer-map nav#footer_nav ul#footer02 li.parent a {
position: relative;
}
@media (max-width: 480px) {
footer#colophon section#footer-map nav#footer_nav ul#footer01 li.parent a,
footer#colophon section#footer-map nav#footer_nav ul#footer02 li.parent a {
font-size: 1.6rem;
}
}
footer#colophon section#footer-map nav#footer_nav ul#footer01 li.parent > a:after,
footer#colophon section#footer-map nav#footer_nav ul#footer02 li.parent > a:after {
content: '';
display: inline-block;
position: absolute;
left: 0;
bottom: -2px;
width: 100%;
height: 1px;
background: #00a0e9;
-webkit-transform: scaleX(0);
-ms-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: right top;
-ms-transform-origin: right top;
transform-origin: right top;
-webkit-transition: -webkit-transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: -webkit-transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
-o-transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
footer#colophon section#footer-map nav#footer_nav ul#footer01 li.parent:hover a,
footer#colophon section#footer-map nav#footer_nav ul#footer02 li.parent:hover a {
-webkit-transform-origin: left top;
-webkit-transform: scaleX(1);
-ms-transform: scaleX(1);
transform: scaleX(1);
}
footer#colophon section#footer-map nav#footer_nav ul#footer01 li.parent:hover a:after,
footer#colophon section#footer-map nav#footer_nav ul#footer02 li.parent:hover a:after {
-webkit-transform-origin: left top;
-ms-transform-origin: left top;
transform-origin: left top;
-webkit-transform: scaleX(1);
-ms-transform: scaleX(1);
transform: scaleX(1);
}
footer#colophon .site-info {
background: #02a1e9;
color: #fff;
text-align: center;
padding: 50px 0;
}  .swiper-slide-active .Opening__img,
.swiper-slide-duplicate-active .Opening__img,
.swiper-slide-prev .Opening__img {
-webkit-animation: zoomUp 10s linear 0s;
animation: zoomUp 10s linear 0s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.swiper-container {
width: 93%;
height: 90vh;
margin-left: 7%;
position: relative;
background-color: #FFF;
margin-bottom: 10rem;
}
@media (max-width: 991px) {
.swiper-container {
margin-bottom: 5rem;
}
}
@media (max-width: 640px) {
.swiper-container {
width: 100%;
height: 100vh;
margin-left: 0%;
}
}
.swiper-container .swiper-wrapper {
padding: 0;
margin: 0;
}
.swiper-container .swiper-wrapper .swiper-slide {
position: relative;
overflow: hidden;
width: 100%;
text-align: center;
}
.swiper-container .swiper-wrapper .swiper-slide img.Opening__img {
width: 100vw;
height: 100vh;
-o-object-fit: cover;
object-fit: cover;
}
.swiper-container .swiper-wrapper .swiper-slide img.Opening__img.position-100 {
-o-object-position: 100%;
object-position: 100%;
font-family: 'object-fit: cover; object-position: 100%;';
}
.swiper-container .swiper-wrapper .swiper-slide img.Opening__img.position-90 {
-o-object-position: 90%;
object-position: 90%;
font-family: 'object-fit: cover; object-position: 90%;';
}
.swiper-container .swiper-wrapper .swiper-slide img.Opening__img.position-80 {
-o-object-position: 80%;
object-position: 80%;
font-family: 'object-fit: cover; object-position: 80%;';
}
.swiper-container .swiper-wrapper .swiper-slide img.Opening__img.position-70 {
-o-object-position: 70%;
object-position: 70%;
font-family: 'object-fit: cover; object-position: 70%;';
}
.swiper-container .swiper-wrapper .swiper-slide img.Opening__img.position-60 {
-o-object-position: 60%;
object-position: 60%;
font-family: 'object-fit: cover; object-position: 60%;';
}
.swiper-container .swiper-wrapper .swiper-slide img.Opening__img.position-50 {
-o-object-position: 50%;
object-position: 50%;
font-family: 'object-fit: cover; object-position: 50%;';
}
.swiper-container .swiper-wrapper .swiper-slide img.Opening__img.position-40 {
-o-object-position: 40%;
object-position: 40%;
font-family: 'object-fit: cover; object-position: 40%;';
}
.swiper-container .swiper-wrapper .swiper-slide img.Opening__img.position-30 {
-o-object-position: 30%;
object-position: 30%;
font-family: 'object-fit: cover; object-position: 30%;';
}
.swiper-container .swiper-wrapper .swiper-slide img.Opening__img.position-20 {
-o-object-position: 20%;
object-position: 20%;
font-family: 'object-fit: cover; object-position: 20%;';
}
.swiper-container .swiper-wrapper .swiper-slide img.Opening__img.position-10 {
-o-object-position: 10%;
object-position: 10%;
font-family: 'object-fit: cover; object-position: 10%;';
}
.swiper-container .swiper-wrapper .swiper-slide img.Opening__img.position-0 {
-o-object-position: 0%;
object-position: 0%;
font-family: 'object-fit: cover; object-position: 0%;';
}
.swiper-container .swiper-wrapper .swiper-slide .Opening__text {
position: absolute;
top: 50%;
left: 50%;
margin: auto;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
width: 100%;
}
@media (max-width: 991px) {
.swiper-container .swiper-wrapper .swiper-slide .Opening__text {
top: 80%;
}
}
@media (max-width: 640px) {
.swiper-container .swiper-wrapper .swiper-slide .Opening__text {
top: 50%;
}
}
.swiper-container .swiper-wrapper .swiper-slide .Opening__text .h1_text { color: #fff;
text-shadow: 0 0 3px rgba(0, 0, 0, 0.3), 0 0 3px rgba(0, 0, 0, 0.3), 0 0 3px rgba(0, 0, 0, 0.3), 0 0 3px rgba(0, 0, 0, 0.3), 0 0 3px rgba(0, 0, 0, 0.3);
font-size: 5rem;
}
@media (max-width: 1200px) {
.swiper-container .swiper-wrapper .swiper-slide .Opening__text .h1_text {
font-size: 4rem;
}
}
@media (max-width: 640px) {
.swiper-container .swiper-wrapper .swiper-slide .Opening__text .h1_text {
font-size: 3rem;
}
}
@media (max-width: 360px) {
.swiper-container .swiper-wrapper .swiper-slide .Opening__text .h1_text {
font-size: 2.5rem;
}
} section {   }
section.left, section.right, section.center {
margin-bottom: 0;
padding: 10rem 0;
}
@media (max-width: 1200px) {
section.left, section.right, section.center {
padding: 7.5rem 0;
}
}
@media (max-width: 991px) {
section.left, section.right, section.center {
padding: 5rem 0;
}
}
@media (max-width: 991px) {
section#customer_content {
padding: 8rem 0 10rem;
}
}
@media (max-width: 991px) {
section#company_content {
padding: 8rem 0;
}
}
@media (max-width: 991px) {
section#related_sites {
padding: 8rem 0;
}
}
section#customer_content, section#news_area {
background: rgba(130, 130, 130, 0.1);
}
section.left a .top, section.right a .top {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-ms-flex-wrap: nowrap;
-webkit-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
-moz-box-pack: justify;
justify-content: space-between;
}
@media (max-width: 991px) {
section.left a .top, section.right a .top {
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
}
section.left a .top .bg_img, section.right a .top .bg_img {
width: 63.33333vw;
max-width: 63.33333vw;
height: 45vw !important;
max-height: 40vw !important;
border-radius: 3px;
}
@media (max-width: 1200px) {
section.left a .top .bg_img, section.right a .top .bg_img {
width: 53.33333vw;
max-width: 53.33333vw;
height: 50vw !important;
max-height: 50vw !important;
}
}
@media (max-width: 991px) {
section.left a .top .bg_img, section.right a .top .bg_img {
width: 100vw;
max-width: 100vw;
}
}
section.left a .top .bg_img img, section.right a .top .bg_img img {
-webkit-transition: -webkit-transform 2s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: -webkit-transform 2s cubic-bezier(0.215, 0.61, 0.355, 1);
-o-transition: transform 2s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: transform 2s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: transform 2s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 2s cubic-bezier(0.215, 0.61, 0.355, 1);
-webkit-transform: scale(1) rotate(0.0001deg);
-ms-transform: scale(1) rotate(0.0001deg);
transform: scale(1) rotate(0.0001deg);
height: 110%;
-o-object-fit: cover;
object-fit: cover;
font-family: 'object-fit: cover;';
}
@media (max-width: 991px) {
section.left a .top .bg_img img, section.right a .top .bg_img img {
height: auto;
}
}
section.left a .top .text, section.right a .top .text {
width: 36.66667vw;
max-width: 36.66667vw;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-moz-box-orient: vertical;
-moz-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
position: relative;
z-index: 1;
}
@media (max-width: 1200px) {
section.left a .top .text, section.right a .top .text {
width: 46.66667vw;
max-width: 46.66667vw;
}
}
@media (max-width: 991px) {
section.left a .top .text, section.right a .top .text {
width: 100vw;
max-width: 100vw;
margin: auto;
}
}
section.left a .top .text .text_inner, section.right a .top .text .text_inner {
position: relative;
background: rgba(255, 255, 255, 0.8);
padding: 3rem;
text-align: center;
border-radius: 10px;
-o-transition: all .3s ease;
transition: all .3s ease;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
}
@media (max-width: 991px) {
section.left a .top .text .text_inner, section.right a .top .text .text_inner {
padding: 2rem;
}
}
section.left a .top .text .text_inner h2:after, section.right a .top .text .text_inner h2:after {
content: '';
width: 150px;
height: 2px;
margin: 20px auto 0;
display: block;
top: 50px;
background: -webkit-gradient(linear, left top, right top, from(#03A9F4), to(#3F51B5));
background: -webkit-linear-gradient(left, #03A9F4, #3F51B5);
background: -o-linear-gradient(left, #03A9F4, #3F51B5);
background: linear-gradient(90deg, #03A9F4, #3F51B5);
}
section.left a .top .text .text_inner p, section.right a .top .text .text_inner p {
margin-top: 2.5rem;
font-size: 1.6rem;
letter-spacing: 0.12em;
text-align: left;
}
@media (max-width: 1300px) {
section.left a .top .text .text_inner p, section.right a .top .text .text_inner p {
font-size: 1.4rem;
}
}
section.left a .top .text .text_inner .item, section.right a .top .text .text_inner .item {
margin: 30px auto 0;
}
section.left:hover a .top .bg_img img, section.right:hover a .top .bg_img img {
-webkit-transition-duration: 10s;
-o-transition-duration: 10s;
transition-duration: 10s;
-webkit-transform: scale(1.06) rotate(0.01deg);
-ms-transform: scale(1.06) rotate(0.01deg);
transform: scale(1.06) rotate(0.01deg);
}
section.left:hover a .top .text_inner, section.right:hover a .top .text_inner {
-webkit-transform: translateY(-2px);
-ms-transform: translateY(-2px);
transform: translateY(-2px);
-webkit-box-shadow: 0.5rem 0.5rem 2rem rgba(0, 0, 0, 0.3), inset 0 0 5rem white;
box-shadow: 0.5rem 0.5rem 2rem rgba(0, 0, 0, 0.3), inset 0 0 5rem white;
}
section.left:hover a .top .item, section.right:hover a .top .item {
background: #00a0e9;
-webkit-transform: translateY(-2px);
-ms-transform: translateY(-2px);
transform: translateY(-2px);
-webkit-box-shadow: 0 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.3);
box-shadow: 0 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.3);
}
section.left:hover a .top .item .more-btn::before, section.right:hover a .top .item .more-btn::before {
width: 2.5rem;
height: 2px;
right: 1rem;
}
section.left:hover a .top .item .more-btn::after, section.right:hover a .top .item .more-btn::after {
width: 1.5rem;
height: 2px;
right: 0.8rem;
top: 43%;
}
@media (max-width: 991px) {
section.left {
padding: 5rem 0 0;
}
}
section.left a {
display: block;
}
section.left a .top .bg_img h2 {
position: absolute;
top: 0;
right: 0;
text-align: right;
padding: 10px;
margin: 0;
}
@media (max-width: 767px) {
section.left a .top .bg_img h2 {
text-align: center;
left: 0;
}
}
section.left a .top .text .text_inner {
margin: 0 10% 0 0;
left: -10%;
width: 100%;
}
@media (max-width: 1300px) {
section.left a .top .text .text_inner {
width: 100%;
}
}
@media (max-width: 991px) {
section.left a .top .text .text_inner {
margin: 0;
left: 0;
top: -70px;
width: 70%;
}
}
@media (max-width: 767px) {
section.left a .top .text .text_inner {
top: -30px;
width: 80%;
}
}
@media (max-width: 480px) {
section.left a .top .text .text_inner {
width: 90%;
}
}
@media (max-width: 991px) {
section.right a .top {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: -webkit-box;
display: -ms-flexbox;
display: -moz-box;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
}
@media (max-width: 991px) {
section.right a .top .bg_img {
-webkit-box-ordinal-group: 1;
-ms-flex-order: 1;
-webkit-order: 1;
-moz-box-ordinal-group: 2;
order: 1;
}
}
section.right a .top .bg_img h2 {
position: absolute;
top: 0;
left: 0;
text-align: right;
padding: 10px;
margin: 0;
}
@media (max-width: 991px) {
section.right a .top .bg_img h2 {
right: 10px;
left: auto;
}
}
@media (max-width: 767px) {
section.right a .top .bg_img h2 {
text-align: center;
left: 0;
}
}
@media (max-width: 991px) {
section.right a .top .text {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 2;
-webkit-order: 2;
-moz-box-ordinal-group: 3;
order: 2;
}
}
section.right a .top .text .text_inner {
margin: 0;
padding: 3rem;
right: -10%;
width: 100%;
}
@media (max-width: 1300px) {
section.right a .top .text .text_inner {
width: 100%;
}
}
@media (max-width: 991px) {
section.right a .top .text .text_inner {
margin: 0;
left: 0;
top: -70px;
width: 70%;
}
}
@media (max-width: 767px) {
section.right a .top .text .text_inner {
top: -30px;
width: 80%;
}
}
@media (max-width: 480px) {
section.right a .top .text .text_inner {
width: 90%;
}
}
section.center .section_inner {
text-align: center;
max-width: 1200px;
margin: auto;
}
@media (max-width: 1400px) {
section.center .section_inner {
max-width: 1000px;
}
}
@media (max-width: 1200px) {
section.center .section_inner {
max-width: 800px;
}
}
@media (max-width: 767px) {
section.center .section_inner {
width: 100%;
max-width: 100%;
padding: 0 10%;
}
}
@media (max-width: 480px) {
section.center .section_inner {
padding: 0 5%;
}
}
section.center .section_inner h2.section-title:after {
content: '';
width: 150px;
height: 2px;
margin: 20px auto 0;
display: block;
top: 50px;
background: -webkit-gradient(linear, left top, right top, from(#03A9F4), to(#3F51B5));
background: -webkit-linear-gradient(left, #03A9F4, #3F51B5);
background: -o-linear-gradient(left, #03A9F4, #3F51B5);
background: linear-gradient(90deg, #03A9F4, #3F51B5);
} #notice-area {
padding: 0;
}
#notice-area .notice-box {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
justify-content: center;
margin: 0 10%;
}
@media (max-width: 1200px) {
#notice-area .notice-box {
margin: 0 8%;
}
}
@media (max-width: 767px) {
#notice-area .notice-box {
margin: 0 5%;
}
}
@media (max-width: 640px) {
#notice-area .notice-box {
margin: 0 3%;
}
}
@media (max-width: 480px) {
#notice-area .notice-box {
margin: 0 2%;
}
}
#notice-area .notice-box a {
-o-transition: all .3s ease;
transition: all .3s ease;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
}
#notice-area .notice-box .notice {
border: 2px solid #E91E63;
padding: 5px;
position: relative;
background: #fff;
border-radius: 1rem;
}
#notice-area .notice-box .notice .notice-inner {
padding: 1.5em;
position: relative;
-o-transition: all .3s ease;
transition: all .3s ease;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
}
#notice-area .notice-box .notice .notice-inner h2 {
text-align: center;
margin-bottom: 3rem;
}
#notice-area .notice-box .notice .notice-inner h2::after {
content: '';
width: 150px;
height: 2px;
margin: 20px auto 0;
display: block;
top: 50px;
background: -webkit-gradient(linear, left top, right top, from(#FFC107), to(#E91E63));
background: -webkit-linear-gradient(left, #FFC107, #E91E63);
background: -o-linear-gradient(left, #FFC107, #E91E63);
background: linear-gradient(90deg, #FFC107, #E91E63);
}
#notice-area .notice-box .notice .notice-inner p.text {
text-align: left;
}
#notice-area .notice-box .notice .notice-inner p.text_right {
text-align: right;
}
#notice-area .notice-box a .notice .notice-inner {
-webkit-box-shadow: 0.3rem 0.3rem 1rem rgba(0, 0, 0, 0.3), inset 0 0 3rem white;
box-shadow: 0.3rem 0.3rem 1rem rgba(0, 0, 0, 0.3), inset 0 0 3rem white;
border-radius: 1rem;
}
#notice-area .notice-box a:hover {
-webkit-transform: translateY(-1px);
-ms-transform: translateY(-1px);
transform: translateY(-1px);
}
#notice-area .notice-box a:hover .notice .notice-inner {
-webkit-box-shadow: 0.5rem 0.5rem 3rem rgba(0, 0, 0, 0.3), inset 0 0 5rem white;
box-shadow: 0.5rem 0.5rem 3rem rgba(0, 0, 0, 0.3), inset 0 0 5rem white;
} .customer_box, .company_box {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
-moz-box-pack: justify;
justify-content: space-between;
margin: 3% 10% 0;
}
@media (max-width: 1200px) {
.customer_box, .company_box {
margin: 3% 8% 0;
}
}
@media (max-width: 480px) {
.customer_box, .company_box {
margin: 3% 5% 0;
}
}
.customer_box a, .company_box a {
width: 48%;
}
.customer_box .box, .company_box .box {
width: 100%;
position: relative;
}
.customer_box .box .box_head, .company_box .box .box_head {
position: relative;
overflow: hidden;
padding-top: 70%;
margin: 0;
}
.customer_box .box .box_head img, .company_box .box .box_head img {
-webkit-transition: -webkit-transform 2s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: -webkit-transform 2s cubic-bezier(0.215, 0.61, 0.355, 1);
-o-transition: transform 2s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: transform 2s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: transform 2s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 2s cubic-bezier(0.215, 0.61, 0.355, 1);
-webkit-transform: scale(1) rotate(0.0001deg);
-ms-transform: scale(1) rotate(0.0001deg);
transform: scale(1) rotate(0.0001deg);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
font-family: "object-fit: cover;";
}
.customer_box .box:hover .box_head img, .company_box .box:hover .box_head img {
-webkit-transition-duration: 10s;
-o-transition-duration: 10s;
transition-duration: 10s;
-webkit-transform: scale(1.06) rotate(0.01deg);
-ms-transform: scale(1.06) rotate(0.01deg);
transform: scale(1.06) rotate(0.01deg);
}
.customer_box .box .box_body, .company_box .box .box_body {
background: rgba(255, 255, 255, 0.8);
padding: 3rem 2rem 5rem;
position: relative;
top: -1rem;
margin: 0 10px;
border-radius: 10px;
}
.customer_box .box .box_body .title, .company_box .box .box_body .title {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-moz-box-orient: vertical;
-moz-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
z-index: 1;
}
.customer_box .box .box_body .title:after, .company_box .box .box_body .title:after {
content: '';
width: 150px;
height: 2px;
margin: 1rem auto 0;
display: block;
top: 50px;
background: -webkit-gradient(linear, left top, right top, from(#03A9F4), to(#3F51B5));
background: -webkit-linear-gradient(left, #03A9F4, #3F51B5);
background: -o-linear-gradient(left, #03A9F4, #3F51B5);
background: linear-gradient(90deg, #03A9F4, #3F51B5);
}
.customer_box .box .box_body .title span, .company_box .box .box_body .title span {
color: #000;
font-size: 2.5rem;
font-weight: 700;
}
@media (max-width: 767px) {
.customer_box .box .box_body .title span, .company_box .box .box_body .title span {
font-size: 2rem;
}
}
.customer_box .box .box_body p, .company_box .box .box_body p {
margin-top: 2rem;
}
@media (max-width: 767px) {
.customer_box .box .box_body p, .company_box .box .box_body p {
font-size: 1.4rem;
}
}
.customer_box .box:hover .box_body, .company_box .box:hover .box_body {
-webkit-transform: translateY(-2px);
-ms-transform: translateY(-2px);
transform: translateY(-2px);
-webkit-box-shadow: 0.5rem 0.5rem 2rem rgba(0, 0, 0, 0.3), inset 0 0 5rem white;
box-shadow: 0.5rem 0.5rem 2rem rgba(0, 0, 0, 0.3), inset 0 0 5rem white;
}
.customer_box .box .item, .company_box .box .item {
position: absolute;
margin: auto;
right: 0;
left: 0;
bottom: -2rem;
}
.customer_box .box:hover .item, .company_box .box:hover .item {
background: #00a0e9;
-webkit-transform: translateY(-2px);
-ms-transform: translateY(-2px);
transform: translateY(-2px);
-webkit-box-shadow: 0 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.3);
box-shadow: 0 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.3);
}
.customer_box .box:hover .item .more-btn::before, .company_box .box:hover .item .more-btn::before {
width: 2.5rem;
height: 2px;
right: 1rem;
}
.customer_box .box:hover .item .more-btn::after, .company_box .box:hover .item .more-btn::after {
width: 1.5rem;
height: 2px;
right: 0.8rem;
top: 43%;
}
@media (max-width: 767px) {
.customer_box a {
width: 100%;
}
.customer_box a:first-child {
margin-bottom: 8rem;
}
.customer_box a .box .box_head {
padding-top: 50%;
}
}
.company_box a {
width: 30%;
}
@media (max-width: 1200px) {
.company_box a {
width: 100%;
}
}
@media (max-width: 1200px) {
.company_box .box {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-box-align: center;
align-items: center;
margin-bottom: 8rem;
}
}
@media (max-width: 480px) {
.company_box .box {
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
}
@media (max-width: 1200px) {
.company_box .box .box_head {
width: 25rem;
padding-top: 25rem;
}
}
@media (max-width: 480px) {
.company_box .box .box_head {
width: 100%;
}
}
@media (max-width: 1200px) {
.company_box .box .box_body {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
width: calc(100% - 24rem);
top: 0;
margin: 0;
left: -1rem;
}
}
@media (max-width: 480px) {
.company_box .box .box_body {
width: 95%;
left: 0;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
justify-content: center;
margin: auto;
top: -1rem;
}
}
@media (max-width: 1200px) {
.company_box .box .item {
right: 3rem;
left: auto;
}
}
@media (max-width: 480px) {
.company_box .box .item {
right: 0;
left: 0;
}
} .news_list {
padding: 0;
margin: 0;
border-top: dotted 1px #ddd;
list-style: none;
}
@media (max-width: 991px) {
.news_list {
margin: 0 10%;
}
}
@media (max-width: 767px) {
.news_list {
margin: 0;
}
}
.news_list:first-child {
margin-top: 3rem;
border-top: none;
}
.news_list a {
-o-transition: all .3s ease;
transition: all .3s ease;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
padding: 2rem 1rem;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-box-align: center;
align-items: center;
}
.news_list a:hover {
opacity: .8;
-webkit-transform: translateY(-1px);
-ms-transform: translateY(-1px);
transform: translateY(-1px);
}
@media (max-width: 991px) {
.news_list a {
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
}
@media (max-width: 767px) {
.news_list a {
padding: 2rem 0;
}
}
.news_list a .category {
background: #607d8b;
padding: 0.5rem 1rem;
padding-left: 3.5rem;
width: 13rem;
text-align: center;
border-radius: 0.5rem;
margin-right: 1rem;
color: #fff;
position: relative;
}
.news_list a .category::before {
content: "";
display: inline-block;
width: 2.5rem;
height: 2.5rem;
position: absolute;
left: 8px;
top: 0;
bottom: 0;
margin: auto;
}
.news_list a .category#news {
background: #4CAF50;
}
.news_list a .category#news::before {
background: url(//hoshizaki-shonan.co.jp/wps/wp-content/themes/hoshizaki-shonan/img/news.png);
background-size: 100%;
}
.news_list a .category#events {
background: #ff9800;
}
.news_list a .category#events::before {
background: url(//hoshizaki-shonan.co.jp/wps/wp-content/themes/hoshizaki-shonan/img/event.png);
background-size: 100%;
}
.news_list a .category#product {
background: #02a1e9;
}
.news_list a .category#product::before {
background: url(//hoshizaki-shonan.co.jp/wps/wp-content/themes/hoshizaki-shonan/img/product.png);
background-size: 100%;
left: 6px;
}
.news_list a .category#recruit {
background: #E91E63;
}
.news_list a .category#recruit::before {
width: 2rem;
height: 2rem;
background: url(//hoshizaki-shonan.co.jp/wps/wp-content/themes/hoshizaki-shonan/img/recruit.png);
background-size: 100%;
}
.news_list a .category#seminar {
background: #FFEB3B;
color: #000;
}
.news_list a .category#seminar::before {
width: 2rem;
height: 2rem;
background: url(//hoshizaki-shonan.co.jp/wps/wp-content/themes/hoshizaki-shonan/img/seminar.png);
background-size: 100%;
}
.news_list a .news_date {
font-size: 1.8rem;
width: 19rem;
}
@media (max-width: 991px) {
.news_list a .news_date {
font-size: 1.6rem;
text-align: left;
width: 16rem;
}
}
@media (max-width: 480px) {
.news_list a .news_date {
font-size: 1.4rem;
width: 15rem;
}
}
.news_list a .news_title {
list-style: none;
font-size: 1.8rem;
padding-left: 2rem;
text-align: left;
width: calc(100% - 33rem);
}
@media (max-width: 991px) {
.news_list a .news_title {
margin-top: 1rem;
font-size: 1.6rem;
width: 100%;
text-align: left;
}
}
@media (max-width: 767px) {
.news_list a .news_title {
font-size: 1.4rem;
padding-left: 1rem;
}
}
#news_area a .item {
width: 35rem;
}
#news_area a:hover .item {
background: #00a0e9;
-webkit-transform: translateY(-2px);
-ms-transform: translateY(-2px);
transform: translateY(-2px);
-webkit-box-shadow: 0 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.3);
box-shadow: 0 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.3);
}
#news_area a:hover .item .more-btn::before {
width: 2.5rem;
height: 2px;
right: 1rem;
}
#news_area a:hover .item .more-btn::after {
width: 1.5rem;
height: 2px;
right: 0.8rem;
top: 43%;
} @media (max-width: 991px) {
#related_sites .section_inner {
padding: 0 10%;
}
}
@media (max-width: 480px) {
#related_sites .section_inner {
padding: 0 5%;
}
}
.related_box {
margin-top: 3rem;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: start;
-ms-flex-pack: start;
-webkit-justify-content: flex-start;
-moz-box-pack: start;
justify-content: flex-start;
}
@media (max-width: 991px) {
.related_box {
-ms-flex-pack: distribute;
-webkit-justify-content: space-around;
justify-content: space-around;
}
}
.related_box .related {
width: 23%;
display: block;
margin-right: 2.66%;
margin-bottom: 2.66%;
-o-transition: all 1s ease;
transition: all 1s ease;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
}
@media (max-width: 991px) {
.related_box .related {
width: 42%;
margin-right: 0;
margin-bottom: 8%;
}
}
.related_box .related:nth-child(4), .related_box .related:nth-child(4n) {
margin-right: 0;
}
@media (max-width: 991px) {
.related_box .related:last-child, .related_box .related:nth-last-child(2) {
margin-bottom: 0;
}
}
.related_box .related .img-box {
position: relative;
overflow: hidden;
padding-top: 67%;
margin: 0;
-webkit-box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
}
.related_box .related .img-box img {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
height: 100%;
width: 100%;
-o-object-fit: contain;
object-fit: contain;
font-family: "object-fit: contain;";
}
.related_box .related:hover {
-webkit-box-shadow: 0.5rem 0.5rem 2rem rgba(0, 0, 0, 0.3), inset 0 0 5rem white;
box-shadow: 0.5rem 0.5rem 2rem rgba(0, 0, 0, 0.3), inset 0 0 5rem white;
} .elder-template-default #key-img,
.case-template-default #key-img,
.post-template-default #key-img,
.after-services-case-template-default #key-img,
.archive #key-img,
.page-template-default #key-img {
background-color: #000;
width: 100%;
height: 40vh;
min-height: 40vh;
margin: 0 auto;
position: relative;
background-size: cover;
}
@media (max-width: 991px) {
.elder-template-default #key-img,
.case-template-default #key-img,
.post-template-default #key-img,
.after-services-case-template-default #key-img,
.archive #key-img,
.page-template-default #key-img {
height: 65vw;
min-height: 65vw;
}
}
.elder-template-default #key-img .entry-title,
.case-template-default #key-img .entry-title,
.post-template-default #key-img .entry-title,
.after-services-case-template-default #key-img .entry-title,
.archive #key-img .entry-title,
.page-template-default #key-img .entry-title {
position: absolute;
right: 0;
bottom: 2rem;
padding: 1rem 1rem 1rem 3rem;
background: #02a1e9;
color: #fff;
border-top-left-radius: 50px;
border-bottom-left-radius: 50px;
margin-left: 240px;
}
@media (max-width: 991px) {
.elder-template-default #key-img .entry-title,
.case-template-default #key-img .entry-title,
.post-template-default #key-img .entry-title,
.after-services-case-template-default #key-img .entry-title,
.archive #key-img .entry-title,
.page-template-default #key-img .entry-title {
font-size: 2.5rem;
}
}
@media (max-width: 767px) {
.elder-template-default #key-img .entry-title,
.case-template-default #key-img .entry-title,
.post-template-default #key-img .entry-title,
.after-services-case-template-default #key-img .entry-title,
.archive #key-img .entry-title,
.page-template-default #key-img .entry-title {
margin-left: 70px;
font-size: 2rem;
}
}
@media (max-width: 480px) {
.elder-template-default #key-img .entry-title,
.case-template-default #key-img .entry-title,
.post-template-default #key-img .entry-title,
.after-services-case-template-default #key-img .entry-title,
.archive #key-img .entry-title,
.page-template-default #key-img .entry-title {
font-size: 1.8rem;
}
}
@media (max-width: 360px) {
.elder-template-default #key-img .entry-title,
.case-template-default #key-img .entry-title,
.post-template-default #key-img .entry-title,
.after-services-case-template-default #key-img .entry-title,
.archive #key-img .entry-title,
.page-template-default #key-img .entry-title {
font-size: 1.6rem;
}
}
.elder-template-default.page-id-173 #key-img,
.case-template-default.page-id-173 #key-img,
.post-template-default.page-id-173 #key-img,
.after-services-case-template-default.page-id-173 #key-img,
.archive.page-id-173 #key-img,
.page-template-default.page-id-173 #key-img {
background-position: right;
}
.page-id-156.page-template-default #key-img {
background-position: top;
} #seniors {
background: #fff;
}
#seniors .section_inner {
margin: 0 8%;
}
@media (max-width: 640px) {
#seniors .section_inner {
margin: 0 2%;
}
}
@media (max-width: 480px) {
#seniors .section_inner {
margin: 0;
}
}
#seniors .section_inner .seniors-area {
padding: 8rem 0 0;
max-width: 1600px;
margin: auto;
}
#seniors .section_inner .seniors-area:last-child {
padding-bottom: 8rem;
}
#seniors .section_inner .seniors-area h2.section-title {
text-align: center;
margin-bottom: 4rem;
}
#seniors .section_inner .seniors-area h2.section-title::after {
content: '';
width: 150px;
height: 2px;
margin: 1.5rem auto 0;
display: block;
top: 50px;
background: -webkit-gradient(linear, left top, right top, from(#03A9F4), to(#3F51B5));
background: -webkit-linear-gradient(left, #03A9F4, #3F51B5);
background: -o-linear-gradient(left, #03A9F4, #3F51B5);
background: linear-gradient(90deg, #03A9F4, #3F51B5);
}
#seniors .section_inner .seniors-area .list-area {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
margin-bottom: 4rem;
}
@media (max-width: 991px) {
#seniors .section_inner .seniors-area .list-area {
margin-bottom: 0;
}
}
#seniors .section_inner .seniors-area .list-area .list-item {
width: 25%;
position: relative;
}
@media (max-width: 991px) {
#seniors .section_inner .seniors-area .list-area .list-item {
width: 50%;
margin-bottom: 6rem;
}
}
#seniors .section_inner .seniors-area .list-area .list-item::before {
content: "";
width: 90%;
height: 90%;
background: #ddd;
display: inline-block;
z-index: 0;
position: absolute;
bottom: -2rem;
left: 0;
right: 0;
}
#seniors .section_inner .seniors-area .list-area .list-item a {
height: auto;
width: 90%;
display: block;
position: relative;
overflow: hidden;
padding-top: 130%;
margin: auto;
}
@media (max-width: 991px) {
#seniors .section_inner .seniors-area .list-area .list-item a {
padding-top: 100%;
}
}
#seniors .section_inner .seniors-area .list-area .list-item a::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0);
z-index: 2;
-webkit-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
#seniors .section_inner .seniors-area .list-area .list-item a .info {
position: absolute;
bottom: 0;
left: 0;
z-index: 3;
padding: 1rem;
}
#seniors .section_inner .seniors-area .list-area .list-item a .info .name {
color: #fff;
font-weight: 700;
}
#seniors .section_inner .seniors-area .list-area .list-item a .info .department {
color: #fff;
font-weight: 700;
}
#seniors .section_inner .seniors-area .list-area .list-item a .info .date {
color: #fff;
}
#seniors .section_inner .seniors-area .list-area .list-item a figure {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
z-index: 1;
margin: 0;
}
#seniors .section_inner .seniors-area .list-area .list-item a figure img {
height: 100%;
width: 100%;
-o-object-fit: cover;
object-fit: cover;
font-family: "object-fit: cover;";
}
#seniors .section_inner .seniors-area .list-area .list-item a:hover::after {
background-color: rgba(0, 0, 0, 0.3);
}
#seniors .section_inner .seniors-area.area01 { }
#seniors .section_inner .seniors-area.area01 h2.section-title::after {
background: -webkit-gradient(linear, left top, right top, from(rgba(255, 152, 0, 0.3)), to(#ff9800));
background: -webkit-linear-gradient(left, rgba(255, 152, 0, 0.3), #ff9800);
background: -o-linear-gradient(left, rgba(255, 152, 0, 0.3), #ff9800);
background: linear-gradient(90deg, rgba(255, 152, 0, 0.3), #ff9800);
}
#seniors .section_inner .seniors-area.area01 .list-area .list-item::before {
background: #ff9800;
}
#seniors .section_inner .seniors-area.area02 { }
#seniors .section_inner .seniors-area.area02 h2.section-title::after {
background: -webkit-gradient(linear, left top, right top, from(rgba(244, 67, 54, 0.3)), to(#f44336));
background: -webkit-linear-gradient(left, rgba(244, 67, 54, 0.3), #f44336);
background: -o-linear-gradient(left, rgba(244, 67, 54, 0.3), #f44336);
background: linear-gradient(90deg, rgba(244, 67, 54, 0.3), #f44336);
}
#seniors .section_inner .seniors-area.area02 .list-area .list-item::before {
background: #f44336;
}
#seniors .section_inner .seniors-area.area03 { }
#seniors .section_inner .seniors-area.area03 h2.section-title::after {
background: -webkit-gradient(linear, left top, right top, from(rgba(0, 150, 136, 0.3)), to(#009688));
background: -webkit-linear-gradient(left, rgba(0, 150, 136, 0.3), #009688);
background: -o-linear-gradient(left, rgba(0, 150, 136, 0.3), #009688);
background: linear-gradient(90deg, rgba(0, 150, 136, 0.3), #009688);
}
#seniors .section_inner .seniors-area.area03 .list-area .list-item::before {
background: #009688;
}
#seniors .section_inner .seniors-area.area04 { }
#seniors .section_inner .seniors-area.area04 h2.section-title::after {
background: -webkit-gradient(linear, left top, right top, from(rgba(0, 188, 212, 0.3)), to(#00bcd4));
background: -webkit-linear-gradient(left, rgba(0, 188, 212, 0.3), #00bcd4);
background: -o-linear-gradient(left, rgba(0, 188, 212, 0.3), #00bcd4);
background: linear-gradient(90deg, rgba(0, 188, 212, 0.3), #00bcd4);
}
#seniors .section_inner .seniors-area.area04 .list-area .list-item::before {
background: #00bcd4;
} .elder_details {
background: #fff;
}
.elder_details section.interview {
margin: 0 5%;
padding-top: 8rem;
}
@media (max-width: 640px) {
.elder_details section.interview {
padding-top: 4rem;
}
}
.elder_details section.interview.area1 {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
-moz-box-pack: justify;
justify-content: space-between;
}
.elder_details section.interview.area1 .img-area {
width: 49%;
display: block;
position: relative;
overflow: hidden;
padding-top: 35%;
}
@media (max-width: 1100px) {
.elder_details section.interview.area1 .img-area {
width: 100%;
}
}
.elder_details section.interview.area1 .img-area .prof-img {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
z-index: 0;
-o-object-fit: cover;
object-fit: cover;
font-family: "object-fit: cover;";
}
.elder_details section.interview.area1 .text-area {
width: 49%;
}
@media (max-width: 1100px) {
.elder_details section.interview.area1 .text-area {
width: 100%;
}
}
.elder_details section.interview.area1 .text-area .label-area {
margin-bottom: 2rem;
}
.elder_details section.interview.area1 .text-area .label-area p.label {
display: inline-block;
padding: 1rem 3rem;
color: #fff;
-webkit-box-shadow: 3px 3px #ddd;
box-shadow: 3px 3px #ddd;
font-weight: 700;
font-size: 3rem;
border-top-left-radius: 2rem;
border-bottom-right-radius: 2rem;
}
@media (max-width: 640px) {
.elder_details section.interview.area1 .text-area .label-area p.label {
font-size: 2rem;
}
}
.elder_details section.interview.area1 .text-area .label-area p.label.administration { background: #00bcd4;
}
.elder_details section.interview.area1 .text-area .label-area p.label.sales { background: #ff9800;
}
.elder_details section.interview.area1 .text-area .label-area p.label.service { background: #f44336;
}
.elder_details section.interview.area1 .text-area .label-area p.label.support { background: #009688;
}
.elder_details section.interview.area1 .text-area .profile-area {
margin-bottom: 2rem;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
}
@media (max-width: 480px) {
.elder_details section.interview.area1 .text-area .profile-area {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
-moz-box-pack: justify;
justify-content: space-between;
}
}
.elder_details section.interview.area1 .text-area .profile-area p.name,
.elder_details section.interview.area1 .text-area .profile-area p.department,
.elder_details section.interview.area1 .text-area .profile-area p.date {
font-size: 2.2rem;
width: 15rem;
height: 15rem;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
border: solid 1px;
border-radius: 50%;
text-align: center;
}
@media (max-width: 640px) {
.elder_details section.interview.area1 .text-area .profile-area p.name,
.elder_details section.interview.area1 .text-area .profile-area p.department,
.elder_details section.interview.area1 .text-area .profile-area p.date {
font-size: 1.8rem;
width: 12rem;
height: 12rem;
}
}
@media (max-width: 480px) {
.elder_details section.interview.area1 .text-area .profile-area p.name,
.elder_details section.interview.area1 .text-area .profile-area p.department,
.elder_details section.interview.area1 .text-area .profile-area p.date {
font-size: 1.4rem;
width: 10rem;
height: 10rem;
}
}
@media (max-width: 360px) {
.elder_details section.interview.area1 .text-area .profile-area p.name,
.elder_details section.interview.area1 .text-area .profile-area p.department,
.elder_details section.interview.area1 .text-area .profile-area p.date {
width: 9rem;
height: 9rem;
}
}
.elder_details section.interview.area1 .text-area .profile-area p.name.administration,
.elder_details section.interview.area1 .text-area .profile-area p.department.administration,
.elder_details section.interview.area1 .text-area .profile-area p.date.administration { border-color: #00bcd4;
}
.elder_details section.interview.area1 .text-area .profile-area p.name.sales,
.elder_details section.interview.area1 .text-area .profile-area p.department.sales,
.elder_details section.interview.area1 .text-area .profile-area p.date.sales { border-color: #ff9800;
}
.elder_details section.interview.area1 .text-area .profile-area p.name.service,
.elder_details section.interview.area1 .text-area .profile-area p.department.service,
.elder_details section.interview.area1 .text-area .profile-area p.date.service { border-color: #f44336;
}
.elder_details section.interview.area1 .text-area .profile-area p.name.support,
.elder_details section.interview.area1 .text-area .profile-area p.department.support,
.elder_details section.interview.area1 .text-area .profile-area p.date.support { border-color: #009688;
}
.elder_details section.interview.area1 .text-area .profile-area p.name {
margin-right: 2rem;
}
@media (max-width: 480px) {
.elder_details section.interview.area1 .text-area .profile-area p.name {
margin-right: 1rem;
}
}
.elder_details section.interview.area1 .text-area .profile-area p.department {
margin-right: 2rem;
opacity: 0.7;
}
@media (max-width: 480px) {
.elder_details section.interview.area1 .text-area .profile-area p.department {
margin-right: 1rem;
}
}
.elder_details section.interview.area1 .text-area .profile-area p.date {
font-size: 1.6rem;
opacity: 0.4;
}
@media (max-width: 480px) {
.elder_details section.interview.area1 .text-area .profile-area p.date {
font-size: 1.2rem;
}
}
.elder_details section.interview.area1 .text-area .img-area {
display: block;
position: relative;
overflow: hidden;
padding-top: 50%;
width: 100%;
margin-bottom: 2rem;
}
.elder_details section.interview.area1 .text-area .img-area img {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
z-index: 0;
-o-object-fit: cover;
object-fit: cover;
font-family: "object-fit: cover;";
}
.elder_details section.interview.area1 .interview-area .interview-head, .elder_details section.interview.area2 .interview-area .interview-head, .elder_details section.interview.area3 .interview-area .interview-head {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-box-align: center;
align-items: center;
margin-bottom: 2rem;
}
@media (max-width: 480px) {
.elder_details section.interview.area1 .interview-area .interview-head, .elder_details section.interview.area2 .interview-area .interview-head, .elder_details section.interview.area3 .interview-area .interview-head {
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
}
.elder_details section.interview.area1 .interview-area .interview-head span.number, .elder_details section.interview.area2 .interview-area .interview-head span.number, .elder_details section.interview.area3 .interview-area .interview-head span.number {
font-size: 6rem;
font-weight: 700;
width: 13rem;
}
@media (max-width: 991px) {
.elder_details section.interview.area1 .interview-area .interview-head span.number, .elder_details section.interview.area2 .interview-area .interview-head span.number, .elder_details section.interview.area3 .interview-area .interview-head span.number {
font-size: 4rem;
width: 9.5rem;
}
}
@media (max-width: 640px) {
.elder_details section.interview.area1 .interview-area .interview-head span.number, .elder_details section.interview.area2 .interview-area .interview-head span.number, .elder_details section.interview.area3 .interview-area .interview-head span.number {
font-size: 3rem;
width: 6.5rem;
}
}
@media (max-width: 480px) {
.elder_details section.interview.area1 .interview-area .interview-head span.number, .elder_details section.interview.area2 .interview-area .interview-head span.number, .elder_details section.interview.area3 .interview-area .interview-head span.number {
width: 100%;
}
}
.elder_details section.interview.area1 .interview-area .interview-head h2, .elder_details section.interview.area2 .interview-area .interview-head h2, .elder_details section.interview.area3 .interview-area .interview-head h2 {
font-size: 4rem;
width: calc(100% - 13rem);
border-left: solid 1px;
margin-left: 0.5rem;
padding-left: 1rem;
}
@media (max-width: 991px) {
.elder_details section.interview.area1 .interview-area .interview-head h2, .elder_details section.interview.area2 .interview-area .interview-head h2, .elder_details section.interview.area3 .interview-area .interview-head h2 {
font-size: 3rem;
width: calc(100% - 9.5rem);
}
}
@media (max-width: 640px) {
.elder_details section.interview.area1 .interview-area .interview-head h2, .elder_details section.interview.area2 .interview-area .interview-head h2, .elder_details section.interview.area3 .interview-area .interview-head h2 {
font-size: 2.5rem;
width: calc(100% - 6.5rem);
}
}
@media (max-width: 480px) {
.elder_details section.interview.area1 .interview-area .interview-head h2, .elder_details section.interview.area2 .interview-area .interview-head h2, .elder_details section.interview.area3 .interview-area .interview-head h2 {
width: 100%;
}
}
.elder_details section.interview.area3 {
padding-bottom: 3rem;
}
.elder_details .page-navi {
background: #fff;
}
.elder_details .page-navi .navi-inner {
padding: 10rem 1rem 5rem;
margin: auto 8rem;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
-moz-box-pack: justify;
justify-content: space-between;
}
@media (max-width: 767px) {
.elder_details .page-navi .navi-inner {
padding: 5rem 1rem;
margin: auto;
}
}
.elder_details .page-navi .navi-inner .navi-item {
width: 25rem;
}
@media (max-width: 991px) {
.elder_details .page-navi .navi-inner .navi-item {
width: 100%;
}
}
.elder_details .page-navi .navi-inner .navi-item a {
padding: 2rem 3rem;
border: solid 1px #02a1e9;
width: 25rem;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
position: relative;
color: #02a1e9;
-webkit-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
@media (max-width: 991px) {
.elder_details .page-navi .navi-inner .navi-item a {
width: 100%;
max-width: 350px;
}
}
@media (max-width: 480px) {
.elder_details .page-navi .navi-inner .navi-item a {
max-width: 230px;
}
}
.elder_details .page-navi .navi-inner .navi-item a:hover {
background-color: #02a1e9;
color: #fff;
}
.elder_details .page-navi .navi-inner .navi-item.before-link a::before {
content: "";
width: 1.5rem;
position: absolute;
background-color: #02a1e9;
height: 1px;
top: 50%;
left: 3rem;
-webkit-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
.elder_details .page-navi .navi-inner .navi-item.before-link a::after {
content: "";
width: 8px;
position: absolute;
background-color: #02a1e9;
height: 1px;
left: 3rem;
top: 45%;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
.elder_details .page-navi .navi-inner .navi-item.before-link a:hover::before {
width: 2.5rem;
background-color: #fff;
left: 2rem;
}
.elder_details .page-navi .navi-inner .navi-item.before-link a:hover::after {
width: 15px;
background-color: #fff;
left: 1.9rem;
top: 40%;
}
@media (max-width: 991px) {
.elder_details .page-navi .navi-inner .navi-item.list-link {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
justify-content: center;
margin: 2rem 0;
}
}
.elder_details .page-navi .navi-inner .navi-item.list-link a::before {
content: "";
width: 1px;
position: absolute;
background-color: #02a1e9;
height: 1.5rem;
top: 45%;
left: 3rem;
-webkit-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
.elder_details .page-navi .navi-inner .navi-item.list-link a::after {
content: "";
width: 1px;
position: absolute;
background-color: #02a1e9;
height: 8px;
left: 3.3rem;
top: 45%;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
.elder_details .page-navi .navi-inner .navi-item.list-link a:hover::before {
height: 2.5rem;
background-color: #fff;
top: 30%;
}
.elder_details .page-navi .navi-inner .navi-item.list-link a:hover::after {
height: 15px;
background-color: #fff;
top: 28%;
left: 3.6rem;
}
@media (max-width: 991px) {
.elder_details .page-navi .navi-inner .navi-item.after-link {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
-webkit-justify-content: flex-end;
-moz-box-pack: end;
justify-content: flex-end;
}
}
.elder_details .page-navi .navi-inner .navi-item.after-link a::before {
content: "";
width: 1.5rem;
position: absolute;
background-color: #02a1e9;
height: 1px;
top: 50%;
right: 3rem;
-webkit-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
.elder_details .page-navi .navi-inner .navi-item.after-link a::after {
content: "";
width: 8px;
position: absolute;
background-color: #02a1e9;
height: 1px;
right: 3rem;
top: 45%;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
.elder_details .page-navi .navi-inner .navi-item.after-link a:hover::before {
width: 2.5rem;
background-color: #fff;
right: 2rem;
}
.elder_details .page-navi .navi-inner .navi-item.after-link a:hover::after {
width: 15px;
background-color: #fff;
right: 1.9rem;
top: 40%;
} .archive main#primary {
background: #fff;
margin-top: 1.5rem;
padding: 5rem 0;
}
.archive main#primary header.page-header,
.archive main#primary .news-box {
max-width: 1200px;
margin: auto;
padding: 0rem 1rem;
}
.archive main#primary header.page-header .page-title {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-moz-box-orient: vertical;
-moz-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
z-index: 1;
}
.archive main#primary header.page-header .page-title:after {
content: '';
width: 150px;
height: 2px;
margin: 1rem auto 0;
display: block;
top: 50px;
background: -webkit-gradient(linear, left top, right top, from(#03A9F4), to(#3F51B5));
background: -webkit-linear-gradient(left, #03A9F4, #3F51B5);
background: -o-linear-gradient(left, #03A9F4, #3F51B5);
background: linear-gradient(90deg, #03A9F4, #3F51B5);
}
.archive main#primary .news-box nav.navigation.posts-navigation {
margin-top: 5rem;
margin-right: calc(50% - 50vw);
margin-left: calc(50% - 50vw);
background: #f5f5f5;
padding: 3rem;
}
.archive main#primary .news-box nav.navigation.posts-navigation .nav-links {
max-width: 1200px;
margin: auto;
padding: 1rem;
}
.archive main#primary .news-box nav.navigation.posts-navigation .nav-links .nav-next a,
.archive main#primary .news-box nav.navigation.posts-navigation .nav-links .nav-previous a {
background: #fff;
padding: 1rem 3rem;
border: solid 1px #02a1e9;
border-radius: 5rem;
-webkit-box-shadow: 0 0 2rem rgba(2, 161, 233, 0.2);
box-shadow: 0 0 2rem rgba(2, 161, 233, 0.2);
-o-transition: all .3s ease;
transition: all .3s ease;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
}
.archive main#primary .news-box nav.navigation.posts-navigation .nav-links .nav-next a:hover,
.archive main#primary .news-box nav.navigation.posts-navigation .nav-links .nav-previous a:hover {
color: #fff;
background: #02a1e9;
-webkit-box-shadow: 0 0 3rem rgba(2, 161, 233, 0.5);
box-shadow: 0 0 3rem rgba(2, 161, 233, 0.5);
} ul.cat-box {
max-width: 1200px;
margin: 3rem auto;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
ul.cat-box li.cat-item {
gap: 1rem;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
}
ul.cat-box li.cat-item a {
width: 15rem;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
background: #dddddd;
-webkit-box-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
border: solid 1px #dddddd;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 0.5rem;
border-radius: 50px;
cursor: pointer;
}
@media (hover: hover) {
ul.cat-box li.cat-item a:hover {
background: #fff;
border: solid 1px #00a1e9;
color: #00a1e9;
}
}
@media (hover: none) {
ul.cat-box li.cat-item a:active {
background: #fff;
border: solid 1px #00a1e9;
color: #00a1e9;
}
}
ul.cat-box li.cat-item.current-cat > a {
background: #fff;
border: solid 1px #00a1e9;
color: #00a1e9;
cursor: default;
}
ul.cat-box li.cat-item.cat-item-1 > a {
display: none;
}
ul.cat-box li.cat-item.cat-item-1 ul.children {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
gap: 1rem;
margin: 0;
-webkit-box-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
@media (max-width: 767px) {
ul.cat-box li.cat-item.cat-item-1 ul.children {
max-width: 460px;
}
} .post-template-default article .entry-content .content-inner {
margin: 0 15%;
padding: 8rem 0;
}
@media (max-width: 767px) {
.post-template-default article .entry-content .content-inner {
margin: 0 10%;
}
}
@media (max-width: 480px) {
.post-template-default article .entry-content .content-inner {
padding: 3rem 1rem;
margin: 0;
}
}
.post-template-default article .entry-content .event-text {
background: #fff;
}
.post-template-default article .entry-content .event-text h2 {
border-bottom: dotted 1px #02a1e9;
padding-bottom: 1rem;
margin-bottom: 1rem;
}
@media (max-width: 480px) {
.post-template-default article .entry-content .event-text h2 {
font-size: 2rem;
}
}
.post-template-default article .entry-content .pdf-view {
background: #fff;
}
.post-template-default article .entry-content .pdf-view .content-inner {
max-width: 640px;
margin: auto;
padding: 8rem 1rem;
text-align: center;
}
@media (max-width: 480px) {
.post-template-default article .entry-content .pdf-view .content-inner {
padding: 3rem 1rem;
}
}
.post-template-default article .entry-content .pdf-view .content-inner a.btn {
background: #fff;
padding: 1rem 3rem;
color: #02a1e9;
border: solid 1px #02a1e9;
border-radius: 0.5rem;
margin: 3rem auto 0;
display: inline-block;
-webkit-box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
-webkit-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.post-template-default article .entry-content .pdf-view .content-inner a.btn:hover {
background: #02a1e9;
color: #fff;
-webkit-box-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.3);
box-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.3);
}  section {                  }
section h2 {
color: #333;
}
@media (max-width: 991px) {
section h2 {
font-size: 2rem;
}
}
section .section_inner .key-area {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
margin: 0 0 5%;
padding: 5rem 0;
position: relative;
}
@media (max-width: 991px) {
section .section_inner .key-area {
padding: 5rem 0 0;
}
}
section .section_inner .key-area:after {
display: block;
content: "";
width: 100%;
height: 100%;
position: absolute;
background: #fff;
border-radius: 1rem;
z-index: 1;
top: 0;
right: -5rem;
z-index: 0;
}
@media (max-width: 991px) {
section .section_inner .key-area:after {
right: 0;
}
}
section .section_inner .key-area .img-area {
width: 45%;
max-width: 45%;
z-index: 1;
}
@media (max-width: 991px) {
section .section_inner .key-area .img-area {
width: 100%;
max-width: 100%;
}
}
section .section_inner .key-area .img-area img {
position: relative;
left: -1rem;
}
@media (max-width: 1200px) {
section .section_inner .key-area .img-area img {
height: 30vw;
-o-object-fit: cover;
object-fit: cover;
font-family: "object-fit: cover;";
}
}
@media (max-width: 991px) {
section .section_inner .key-area .img-area img {
width: 100vw;
height: 45vw;
}
}
section .section_inner .key-area .text-area {
width: 55%;
max-width: 55%;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-box-align: center;
align-items: center;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
position: relative;
z-index: 1;
}
@media (max-width: 991px) {
section .section_inner .key-area .text-area {
width: 100%;
max-width: 100%;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
justify-content: center;
}
}
section .section_inner .key-area .text-area .text_inner {
max-width: 85%;
position: relative;
padding: 3rem;
}
@media (max-width: 1400px) {
section .section_inner .key-area .text-area .text_inner {
max-width: 95%;
}
}
@media (max-width: 991px) {
section .section_inner .key-area .text-area .text_inner {
max-width: 85%;
}
}
@media (max-width: 767px) {
section .section_inner .key-area .text-area .text_inner {
max-width: 100%;
}
}
@media (max-width: 640px) {
section .section_inner .key-area .text-area .text_inner {
padding: 2rem;
}
}
section .section_inner .key-area .text-area .text_inner p {
font-size: 2rem;
}
@media (max-width: 1400px) {
section .section_inner .key-area .text-area .text_inner p {
font-size: 1.8rem;
}
}
section#business-information a.box {
display: block;
margin: 0 10% 5%;
}
@media (max-width: 1200px) {
section#business-information a.box {
margin: 0 7% 5%;
}
}
@media (max-width: 480px) {
section#business-information a.box {
margin: 0 3% 5%;
}
}
section#business-information a.box .contents01,
section#business-information a.box .contents02 {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-box-align: center;
align-items: center;
}
section#business-information a.box .contents02 {
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
-webkit-flex-direction: row-reverse;
-moz-box-orient: horizontal;
-moz-box-direction: reverse;
flex-direction: row-reverse;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-moz-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
section#business-information a.box .contents01 .text-area,
section#business-information a.box .contents02 .text-area {
width: 55.33333%;
max-width: 55.33333%;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-moz-box-orient: vertical;
-moz-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
position: relative;
z-index: 2;
}
@media (max-width: 767px) {
section#business-information a.box .contents01 .text-area,
section#business-information a.box .contents02 .text-area {
width: 100%;
max-width: 100%;
-webkit-box-ordinal-group: 2;
-ms-flex-order: 2;
-webkit-order: 2;
-moz-box-ordinal-group: 3;
order: 2;
}
}
section#business-information a.box .contents01 .text-area .text_inner,
section#business-information a.box .contents02 .text-area .text_inner {
position: relative;
background: rgba(255, 255, 255, 0.8);
padding: 3rem;
border-radius: 10px;
-o-transition: all 1s ease;
transition: all 1s ease;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
left: 3rem;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-justify-content: center;
-moz-box-pack: center;
justify-content: center;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 100%;
}
@media (max-width: 767px) {
section#business-information a.box .contents01 .text-area .text_inner,
section#business-information a.box .contents02 .text-area .text_inner {
left: 0;
margin: 0 10px;
top: -1rem;
}
}
section#business-information a.box .contents01 .text-area .text_inner h2,
section#business-information a.box .contents02 .text-area .text_inner h2 {
text-align: center;
margin-bottom: 2rem;
}
section#business-information a.box .contents01 .text-area .text_inner h2:after,
section#business-information a.box .contents02 .text-area .text_inner h2:after {
content: '';
width: 150px;
height: 2px;
margin: 1rem auto 0;
display: block;
top: 50px;
background: -webkit-gradient(linear, left top, right top, from(#03A9F4), to(#3F51B5));
background: -webkit-linear-gradient(left, #03A9F4, #3F51B5);
background: -o-linear-gradient(left, #03A9F4, #3F51B5);
background: linear-gradient(90deg, #03A9F4, #3F51B5);
}
section#business-information a.box .contents01 .text-area .text_inner .item-box,
section#business-information a.box .contents02 .text-area .text_inner .item-box {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
}
section#business-information a.box .contents01 .text-area .text_inner .item-box .item,
section#business-information a.box .contents02 .text-area .text_inner .item-box .item {
margin-top: 4%;
margin-left: auto;
margin-right: auto;
}
section#business-information a.box .contents01 .img-area,
section#business-information a.box .contents02 .img-area {
width: 44.66667%;
max-width: 44.66667%;
border-radius: 3px;
}
@media (max-width: 767px) {
section#business-information a.box .contents01 .img-area,
section#business-information a.box .contents02 .img-area {
width: 100%;
max-width: 100%;
-webkit-box-ordinal-group: 1;
-ms-flex-order: 1;
-webkit-order: 1;
-moz-box-ordinal-group: 2;
order: 1;
}
}
section#business-information a.box .contents01 .img-area .img-wrap,
section#business-information a.box .contents02 .img-area .img-wrap {
position: relative;
overflow: hidden;
padding-top: 70%;
}
@media (max-width: 767px) {
section#business-information a.box .contents01 .img-area .img-wrap,
section#business-information a.box .contents02 .img-area .img-wrap {
padding-top: 50%;
}
}
section#business-information a.box .contents01 .img-area .img-wrap img,
section#business-information a.box .contents02 .img-area .img-wrap img {
-webkit-transition: -webkit-transform 2s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: -webkit-transform 2s cubic-bezier(0.215, 0.61, 0.355, 1);
-o-transition: transform 2s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: transform 2s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: transform 2s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 2s cubic-bezier(0.215, 0.61, 0.355, 1);
-webkit-transform: scale(1) rotate(0.0001deg);
-ms-transform: scale(1) rotate(0.0001deg);
transform: scale(1) rotate(0.0001deg);
-o-object-fit: cover;
object-fit: cover;
font-family: 'object-fit: cover;';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
section#business-information a.box .contents02 .text-area .text_inner {
left: -3rem;
}
@media (max-width: 767px) {
section#business-information a.box .contents02 .text-area .text_inner {
left: 0;
}
}
section#business-information a.box .contents02 .text-area .text_inner .item-box {
-webkit-box-pack: end;
-ms-flex-pack: end;
-webkit-justify-content: flex-end;
-moz-box-pack: end;
justify-content: flex-end;
}
section#business-information a.box:hover .text-area .text_inner {
-webkit-transform: translateY(-2px);
-ms-transform: translateY(-2px);
transform: translateY(-2px);
-webkit-box-shadow: 0.5rem 0.5rem 2rem rgba(0, 0, 0, 0.3), inset 0 0 5rem white;
box-shadow: 0.5rem 0.5rem 2rem rgba(0, 0, 0, 0.3), inset 0 0 5rem white;
}
section#business-information a.box:hover .text-area .text_inner .item {
background: #00a0e9;
-webkit-transform: translateY(-2px);
-ms-transform: translateY(-2px);
transform: translateY(-2px);
-webkit-box-shadow: 0 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.3);
box-shadow: 0 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.3);
}
section#business-information a.box:hover .text-area .text_inner .item .more-btn::before {
width: 2.5rem;
height: 2px;
right: 1rem;
}
section#business-information a.box:hover .text-area .text_inner .item .more-btn::after {
width: 1.5rem;
height: 2px;
right: 0.8rem;
top: 43%;
}
section#business-information a.box:hover .img-area .img-wrap img {
-webkit-transition-duration: 10s;
-o-transition-duration: 10s;
transition-duration: 10s;
-webkit-transform: scale(1.06) rotate(0.01deg);
-ms-transform: scale(1.06) rotate(0.01deg);
transform: scale(1.06) rotate(0.01deg);
}
section#business-information .area04 {
background: #e9e9e9;
padding: 5% 0;
}
section#business-information .area04 .tiles4 {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
-moz-box-pack: justify;
justify-content: space-between;
margin: 0 10%;
}
@media (max-width: 1200px) {
section#business-information .area04 .tiles4 {
margin: 0 7%;
}
}
@media (max-width: 480px) {
section#business-information .area04 .tiles4 {
margin: 0 3%;
}
}
section#business-information .area04 .tiles4 a.box2 {
width: 45%;
margin: 2% 0;
}
@media (max-width: 1200px) {
section#business-information .area04 .tiles4 a.box2 {
width: 48%;
}
}
@media (max-width: 991px) {
section#business-information .area04 .tiles4 a.box2 {
width: 100%;
margin-bottom: 8rem;
}
section#business-information .area04 .tiles4 a.box2:last-child {
margin-bottom: 3rem;
}
}
section#business-information .area04 .tiles4 a.box2 .tile-box {
width: 100%;
position: relative;
}
section#business-information .area04 .tiles4 a.box2 .tile-box .box_head {
position: relative;
overflow: hidden;
padding-top: 70%;
margin: 0;
}
section#business-information .area04 .tiles4 a.box2 .tile-box .box_head img {
-webkit-transition: -webkit-transform 2s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: -webkit-transform 2s cubic-bezier(0.215, 0.61, 0.355, 1);
-o-transition: transform 2s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: transform 2s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: transform 2s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 2s cubic-bezier(0.215, 0.61, 0.355, 1);
-webkit-transform: scale(1) rotate(0.0001deg);
-ms-transform: scale(1) rotate(0.0001deg);
transform: scale(1) rotate(0.0001deg);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
font-family: "object-fit: cover;";
}
section#business-information .area04 .tiles4 a.box2 .tile-box:hover .box_head img {
-webkit-transition-duration: 10s;
-o-transition-duration: 10s;
transition-duration: 10s;
-webkit-transform: scale(1.06) rotate(0.01deg);
-ms-transform: scale(1.06) rotate(0.01deg);
transform: scale(1.06) rotate(0.01deg);
}
section#business-information .area04 .tiles4 a.box2 .tile-box .box_body {
background: rgba(255, 255, 255, 0.8);
padding: 3rem 2rem 5rem;
position: relative;
top: -1rem;
margin: 0 10px;
border-radius: 10px;
}
section#business-information .area04 .tiles4 a.box2 .tile-box .box_body .title {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-moz-box-orient: vertical;
-moz-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
z-index: 1;
}
section#business-information .area04 .tiles4 a.box2 .tile-box .box_body .title:after {
content: '';
width: 150px;
height: 2px;
margin: 1rem auto 0;
display: block;
top: 50px;
background: -webkit-gradient(linear, left top, right top, from(#03A9F4), to(#3F51B5));
background: -webkit-linear-gradient(left, #03A9F4, #3F51B5);
background: -o-linear-gradient(left, #03A9F4, #3F51B5);
background: linear-gradient(90deg, #03A9F4, #3F51B5);
}
section#business-information .area04 .tiles4 a.box2 .tile-box .box_body .title span {
color: #000;
font-size: 2.5rem;
font-weight: 700;
}
@media (max-width: 767px) {
section#business-information .area04 .tiles4 a.box2 .tile-box .box_body .title span {
font-size: 2rem;
}
}
section#business-information .area04 .tiles4 a.box2 .tile-box .box_body p {
margin-top: 2rem;
}
@media (max-width: 767px) {
section#business-information .area04 .tiles4 a.box2 .tile-box .box_body p {
font-size: 1.4rem;
}
}
section#business-information .area04 .tiles4 a.box2 .tile-box:hover .box_body {
-webkit-transform: translateY(-2px);
-ms-transform: translateY(-2px);
transform: translateY(-2px);
-webkit-box-shadow: 0.5rem 0.5rem 2rem rgba(0, 0, 0, 0.3), inset 0 0 5rem white;
box-shadow: 0.5rem 0.5rem 2rem rgba(0, 0, 0, 0.3), inset 0 0 5rem white;
}
section#business-information .area04 .tiles4 a.box2 .tile-box .item {
position: absolute;
margin: auto;
right: 0;
left: 0;
bottom: -2rem;
}
section#business-information .area04 .tiles4 a.box2 .tile-box:hover .item {
background: #00a0e9;
-webkit-transform: translateY(-2px);
-ms-transform: translateY(-2px);
transform: translateY(-2px);
-webkit-box-shadow: 0 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.3);
box-shadow: 0 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.3);
}
section#business-information .area04 .tiles4 a.box2 .tile-box:hover .item .more-btn::before {
width: 2.5rem;
height: 2px;
right: 1rem;
}
section#business-information .area04 .tiles4 a.box2 .tile-box:hover .item .more-btn::after {
width: 1.5rem;
height: 2px;
right: 0.8rem;
top: 43%;
}
section#design-planning {
background: #fff;
}
section#design-planning .section_inner {
margin: 0 8%;
padding: 5rem 0;
}
@media (max-width: 767px) {
section#design-planning .section_inner {
margin: 0;
padding: 5rem 3rem;
}
}
@media (max-width: 480px) {
section#design-planning .section_inner {
padding: 5rem 1rem;
}
}
section#design-planning .section_inner p.sub_read {
padding: 2rem 3rem 3rem;
margin-bottom: 8rem;
font-size: 2rem;
background: #fff;
border: solid #ddd;
-webkit-box-shadow: 1rem 1rem #ddd;
box-shadow: 1rem 1rem #ddd;
}
@media (max-width: 480px) {
section#design-planning .section_inner p.sub_read {
padding: 2rem 1rem;
font-size: 1.6rem;
}
}
section#design-planning .section_inner p.sub_read span.red {
font-size: 3rem;
font-weight: 700;
color: #E91E63;
}
section#design-planning .section_inner p.sub_read span.blue {
font-size: 3rem;
font-weight: 700;
color: #03A9F4;
}
section#design-planning .section_inner .area01, section#design-planning .section_inner .area02, section#design-planning .section_inner .area03, section#design-planning .section_inner .area04 {
margin-bottom: 10rem;
}
section#design-planning .section_inner .area01 h2, section#design-planning .section_inner .area02 h2, section#design-planning .section_inner .area03 h2, section#design-planning .section_inner .area04 h2 {
text-align: center;
margin-bottom: 5rem;
}
section#design-planning .section_inner .area01 h2:after, section#design-planning .section_inner .area02 h2:after, section#design-planning .section_inner .area03 h2:after, section#design-planning .section_inner .area04 h2:after {
content: '';
width: 150px;
height: 2px;
margin: 20px auto 0;
display: block;
top: 50px;
background: -webkit-gradient(linear, left top, right top, from(#03A9F4), to(#3F51B5));
background: -webkit-linear-gradient(left, #03A9F4, #3F51B5);
background: -o-linear-gradient(left, #03A9F4, #3F51B5);
background: linear-gradient(90deg, #03A9F4, #3F51B5);
}
section#design-planning .section_inner section.area01 { }
section#design-planning .section_inner section.area01 .read-area {
background: #fff;
border: solid 2px #02a1e9;
padding: 5rem;
margin: auto;
font-size: 2rem;
font-weight: 700;
color: #02a1e9;
-webkit-box-shadow: 1rem 1rem #ddd;
box-shadow: 1rem 1rem #ddd;
}
@media (max-width: 1300px) {
section#design-planning .section_inner section.area01 .read-area {
padding: 5rem 4rem;
}
}
@media (max-width: 767px) {
section#design-planning .section_inner section.area01 .read-area {
padding: 3rem;
}
}
@media (max-width: 480px) {
section#design-planning .section_inner section.area01 .read-area {
padding: 2rem 1rem;
font-size: 1.6rem;
}
}
section#design-planning .section_inner section.area01 .concept {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-box-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
-moz-box-pack: justify;
justify-content: space-between;
margin-top: 8rem;
}
section#design-planning .section_inner section.area01 .concept .concept1, section#design-planning .section_inner section.area01 .concept .concept2 {
width: 48%;
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
justify-content: center;
border: solid 1px #FF9800;
border-radius: 1rem;
padding: 5rem;
}
@media (max-width: 1300px) {
section#design-planning .section_inner section.area01 .concept .concept1, section#design-planning .section_inner section.area01 .concept .concept2 {
padding: 5rem 4rem;
}
}
@media (max-width: 991px) {
section#design-planning .section_inner section.area01 .concept .concept1, section#design-planning .section_inner section.area01 .concept .concept2 {
width: 100%;
margin-bottom: 8rem;
-webkit-box-pack: start;
-ms-flex-pack: start;
-webkit-justify-content: flex-start;
-moz-box-pack: start;
justify-content: flex-start;
}
}
@media (max-width: 767px) {
section#design-planning .section_inner section.area01 .concept .concept1, section#design-planning .section_inner section.area01 .concept .concept2 {
padding: 4rem 3rem 3rem;
}
}
@media (max-width: 480px) {
section#design-planning .section_inner section.area01 .concept .concept1, section#design-planning .section_inner section.area01 .concept .concept2 {
padding: 3rem 1rem 2rem;
font-size: 1.6rem;
}
}
section#design-planning .section_inner section.area01 .concept .concept1 h3, section#design-planning .section_inner section.area01 .concept .concept2 h3 {
position: absolute;
top: -3rem;
background: #FF9800;
color: #fff;
padding: 1rem 2rem;
border-radius: 1rem;
font-size: 2.5rem;
left: 10%;
right: 10%;
text-align: center;
}
@media (max-width: 1200px) {
section#design-planning .section_inner section.area01 .concept .concept1 h3, section#design-planning .section_inner section.area01 .concept .concept2 h3 {
font-size: 2rem;
}
}
@media (max-width: 991px) {
section#design-planning .section_inner section.area01 .concept .concept1 h3, section#design-planning .section_inner section.area01 .concept .concept2 h3 {
left: auto;
right: auto;
}
}
@media (max-width: 480px) {
section#design-planning .section_inner section.area01 .concept .concept1 h3, section#design-planning .section_inner section.area01 .concept .concept2 h3 {
font-size: 1.8rem;
}
}
@media (max-width: 320px) {
section#design-planning .section_inner section.area01 .concept .concept1 h3, section#design-planning .section_inner section.area01 .concept .concept2 h3 {
font-size: 1.6rem;
}
}
section#design-planning .section_inner section.area01 .concept .concept3 {
width: 100%;
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
border: solid 1px #02a1e9;
border-radius: 1rem;
padding: 5rem;
margin-top: 8rem;
}
@media (max-width: 1300px) {
section#design-planning .section_inner section.area01 .concept .concept3 {
padding: 5rem 4rem;
}
}
@media (max-width: 991px) {
section#design-planning .section_inner section.area01 .concept .concept3 {
margin-top: 0;
}
}
@media (max-width: 767px) {
section#design-planning .section_inner section.area01 .concept .concept3 {
padding: 4rem 3rem 3rem;
}
}
@media (max-width: 480px) {
section#design-planning .section_inner section.area01 .concept .concept3 {
padding: 4rem 1rem 1rem;
}
}
section#design-planning .section_inner section.area01 .concept .concept3 h3 {
position: absolute;
top: -3rem;
background: #02a1e9;
color: #fff;
padding: 1rem 2rem;
border-radius: 1rem;
font-size: 2.5rem;
}
@media (max-width: 1200px) {
section#design-planning .section_inner section.area01 .concept .concept3 h3 {
font-size: 2rem;
}
}
@media (max-width: 640px) {
section#design-planning .section_inner section.area01 .concept .concept3 h3 {
top: -5rem;
text-align: center;
}
}
@media (max-width: 480px) {
section#design-planning .section_inner section.area01 .concept .concept3 h3 {
font-size: 1.8rem;
}
}
@media (max-width: 320px) {
section#design-planning .section_inner section.area01 .concept .concept3 h3 {
font-size: 1.6rem;
}
}
section#design-planning .section_inner section.area01 .concept .concept3 p.strong {
width: 100%;
color: #02a1e9;
text-align: center;
font-weight: 700;
font-size: 2.3rem;
margin-bottom: 3rem;
}
@media (max-width: 640px) {
section#design-planning .section_inner section.area01 .concept .concept3 p.strong {
margin-bottom: 1rem;
}
}
@media (max-width: 480px) {
section#design-planning .section_inner section.area01 .concept .concept3 p.strong {
font-size: 1.6rem;
text-align: left;
}
}
section#design-planning .section_inner section.area01 .concept .concept3 .item-box {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-pack: distribute;
-webkit-justify-content: space-around;
justify-content: space-around;
}
section#design-planning .section_inner section.area01 .concept .concept3 .item-box p {
padding: 1rem 5rem;
border: solid #00a1e9;
color: #2196F3;
border-radius: 1rem;
font-size: 2.5rem;
font-weight: 700;
-webkit-box-shadow: 0.5rem 0.5rem #ddd;
box-shadow: 0.5rem 0.5rem #ddd;
}
@media (max-width: 1200px) {
section#design-planning .section_inner section.area01 .concept .concept3 .item-box p {
padding: 1rem 4rem;
font-size: 2rem;
}
}
@media (max-width: 991px) {
section#design-planning .section_inner section.area01 .concept .concept3 .item-box p {
padding: 1rem 2rem;
font-size: 1.8rem;
}
}
@media (max-width: 767px) {
section#design-planning .section_inner section.area01 .concept .concept3 .item-box p {
font-size: 1.6rem;
}
}
@media (max-width: 640px) {
section#design-planning .section_inner section.area01 .concept .concept3 .item-box p {
margin: 1rem 0;
}
}
@media (max-width: 480px) {
section#design-planning .section_inner section.area01 .concept .concept3 .item-box p {
width: 100%;
text-align: center;
}
}
section#design-planning .section_inner section.area02 { }
section#design-planning .section_inner section.area02 .img-area {
text-align: center;
border: solid 1px #ccc;
border-radius: 1rem;
padding: 5rem;
}
@media (max-width: 767px) {
section#design-planning .section_inner section.area02 .img-area {
padding: 3rem;
}
}
@media (max-width: 480px) {
section#design-planning .section_inner section.area02 .img-area {
padding: 2rem 1rem;
}
}
section#design-planning .section_inner section.area03 { margin-bottom: 0;
}
section#design-planning .section_inner section.area03 .box1, section#design-planning .section_inner section.area03 .box2, section#design-planning .section_inner section.area03 .box3, section#design-planning .section_inner section.area03 .box4 {
margin-bottom: 10rem;
}
section#design-planning .section_inner section.area03 .box1 .box-text, section#design-planning .section_inner section.area03 .box2 .box-text, section#design-planning .section_inner section.area03 .box3 .box-text, section#design-planning .section_inner section.area03 .box4 .box-text {
width: 100%;
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
border: solid 1px #ccc;
border-radius: 1rem;
padding: 5rem 5rem 3rem;
margin: 8rem 0 3rem;
}
@media (max-width: 1200px) {
section#design-planning .section_inner section.area03 .box1 .box-text, section#design-planning .section_inner section.area03 .box2 .box-text, section#design-planning .section_inner section.area03 .box3 .box-text, section#design-planning .section_inner section.area03 .box4 .box-text {
padding: 5rem 4rem 3rem;
}
}
@media (max-width: 767px) {
section#design-planning .section_inner section.area03 .box1 .box-text, section#design-planning .section_inner section.area03 .box2 .box-text, section#design-planning .section_inner section.area03 .box3 .box-text, section#design-planning .section_inner section.area03 .box4 .box-text {
padding: 4rem 3rem 3rem;
}
}
@media (max-width: 480px) {
section#design-planning .section_inner section.area03 .box1 .box-text, section#design-planning .section_inner section.area03 .box2 .box-text, section#design-planning .section_inner section.area03 .box3 .box-text, section#design-planning .section_inner section.area03 .box4 .box-text {
padding: 3rem 1rem 1rem;
}
}
section#design-planning .section_inner section.area03 .box1 .box-text h3, section#design-planning .section_inner section.area03 .box2 .box-text h3, section#design-planning .section_inner section.area03 .box3 .box-text h3, section#design-planning .section_inner section.area03 .box4 .box-text h3 {
position: absolute;
top: -3rem;
background: #02a1e9;
color: #fff;
padding: 1rem 2rem;
border-radius: 1rem;
font-size: 2.5rem;
}
@media (max-width: 1200px) {
section#design-planning .section_inner section.area03 .box1 .box-text h3, section#design-planning .section_inner section.area03 .box2 .box-text h3, section#design-planning .section_inner section.area03 .box3 .box-text h3, section#design-planning .section_inner section.area03 .box4 .box-text h3 {
font-size: 2rem;
}
}
@media (max-width: 480px) {
section#design-planning .section_inner section.area03 .box1 .box-text h3, section#design-planning .section_inner section.area03 .box2 .box-text h3, section#design-planning .section_inner section.area03 .box3 .box-text h3, section#design-planning .section_inner section.area03 .box4 .box-text h3 {
font-size: 1.8rem;
}
}
section#design-planning .section_inner section.area03 .box1 .box-text p, section#design-planning .section_inner section.area03 .box2 .box-text p, section#design-planning .section_inner section.area03 .box3 .box-text p, section#design-planning .section_inner section.area03 .box4 .box-text p {
font-size: 2rem;
}
@media (max-width: 767px) {
section#design-planning .section_inner section.area03 .box1 .box-text p, section#design-planning .section_inner section.area03 .box2 .box-text p, section#design-planning .section_inner section.area03 .box3 .box-text p, section#design-planning .section_inner section.area03 .box4 .box-text p {
font-size: 1.8rem;
}
}
@media (max-width: 480px) {
section#design-planning .section_inner section.area03 .box1 .box-text p, section#design-planning .section_inner section.area03 .box2 .box-text p, section#design-planning .section_inner section.area03 .box3 .box-text p, section#design-planning .section_inner section.area03 .box4 .box-text p {
font-size: 1.6rem;
}
}
section#design-planning .section_inner section.area03 .box1 .contents, section#design-planning .section_inner section.area03 .box2 .contents, section#design-planning .section_inner section.area03 .box3 .contents, section#design-planning .section_inner section.area03 .box4 .contents {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
-moz-box-pack: justify;
justify-content: space-between;
}
section#design-planning .section_inner section.area03 .box1 .contents .box .img-wrap, section#design-planning .section_inner section.area03 .box2 .contents .box .img-wrap, section#design-planning .section_inner section.area03 .box3 .contents .box .img-wrap, section#design-planning .section_inner section.area03 .box4 .contents .box .img-wrap {
display: block;
position: relative;
overflow: hidden;
padding-top: 80%;
margin: 0;
}
section#design-planning .section_inner section.area03 .box1 .contents .box .img-wrap img, section#design-planning .section_inner section.area03 .box2 .contents .box .img-wrap img, section#design-planning .section_inner section.area03 .box3 .contents .box .img-wrap img, section#design-planning .section_inner section.area03 .box4 .contents .box .img-wrap img {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 0rem;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
font-family: "object-fit: contain;";
}
section#design-planning .section_inner section.area03 .box1 .contents .box a, section#design-planning .section_inner section.area03 .box2 .contents .box a, section#design-planning .section_inner section.area03 .box3 .contents .box a, section#design-planning .section_inner section.area03 .box4 .contents .box a {
-o-transition: all .3s ease;
transition: all .3s ease;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
}
section#design-planning .section_inner section.area03 .box1 .contents .box a:hover, section#design-planning .section_inner section.area03 .box2 .contents .box a:hover, section#design-planning .section_inner section.area03 .box3 .contents .box a:hover, section#design-planning .section_inner section.area03 .box4 .contents .box a:hover {
opacity: 0.8;
}
section#design-planning .section_inner section.area03 .box1 .contents h4, section#design-planning .section_inner section.area03 .box2 .contents h4, section#design-planning .section_inner section.area03 .box3 .contents h4, section#design-planning .section_inner section.area03 .box4 .contents h4 {
text-align: right;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
-webkit-justify-content: flex-end;
-moz-box-pack: end;
justify-content: flex-end;
width: 100%;
margin-top: 1rem;
}
section#design-planning .section_inner section.area03 .box4 {
margin-bottom: 0;
}
section#design-planning .section_inner section.area03 .box1 .contents .left {
width: 48%;
}
@media (max-width: 991px) {
section#design-planning .section_inner section.area03 .box1 .contents .left {
width: 100%;
margin-bottom: 3rem;
}
}
section#design-planning .section_inner section.area03 .box1 .contents .left .box {
width: 100%;
}
section#design-planning .section_inner section.area03 .box1 .contents .left .box .img-wrap {
padding-top: 73%;
}
@media (max-width: 991px) {
section#design-planning .section_inner section.area03 .box1 .contents .left .box .img-wrap {
padding-top: 55.5%;
}
}
section#design-planning .section_inner section.area03 .box1 .contents .right {
width: 48%;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
-moz-box-pack: justify;
justify-content: space-between;
}
@media (max-width: 991px) {
section#design-planning .section_inner section.area03 .box1 .contents .right {
width: 100%;
}
}
section#design-planning .section_inner section.area03 .box1 .contents .right .box {
width: 48%;
padding: 1rem 0;
}
@media (max-width: 640px) {
section#design-planning .section_inner section.area03 .box1 .contents .right .box {
width: 90%;
margin: 5% auto 0;
}
}
@media (max-width: 480px) {
section#design-planning .section_inner section.area03 .box1 .contents .right .box {
width: 95%;
}
}
@media (max-width: 320px) {
section#design-planning .section_inner section.area03 .box1 .contents .right .box {
width: 100%;
}
}
section#design-planning .section_inner section.area03 .box1 .contents .right .box .img-wrap {
padding-top: 70%;
}
section#design-planning .section_inner section.area03 .box1 .contents .right .box .img-wrap img {
-o-object-fit: cover;
object-fit: cover;
font-family: "object-fit: cover;";
}
section#design-planning .section_inner section.area03 .box2 .contents {
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
justify-content: center;
margin-bottom: 3rem;
}
@media (max-width: 991px) {
section#design-planning .section_inner section.area03 .box2 .contents {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
-moz-box-pack: justify;
justify-content: space-between;
}
}
section#design-planning .section_inner section.area03 .box2 .contents .left, section#design-planning .section_inner section.area03 .box2 .contents .right {
width: 31%;
margin-right: 2%;
}
@media (max-width: 991px) {
section#design-planning .section_inner section.area03 .box2 .contents .left, section#design-planning .section_inner section.area03 .box2 .contents .right {
width: 48%;
margin-right: 0;
}
}
@media (max-width: 640px) {
section#design-planning .section_inner section.area03 .box2 .contents .left, section#design-planning .section_inner section.area03 .box2 .contents .right {
width: 90%;
margin: 5% auto 0;
}
}
@media (max-width: 480px) {
section#design-planning .section_inner section.area03 .box2 .contents .left, section#design-planning .section_inner section.area03 .box2 .contents .right {
width: 95%;
}
}
@media (max-width: 320px) {
section#design-planning .section_inner section.area03 .box2 .contents .left, section#design-planning .section_inner section.area03 .box2 .contents .right {
width: 100%;
}
}
section#design-planning .section_inner section.area03 .box2 .contents .left .box, section#design-planning .section_inner section.area03 .box2 .contents .right .box {
width: 100%;
}
section#design-planning .section_inner section.area03 .box2 .contents .left .box .img-wrap, section#design-planning .section_inner section.area03 .box2 .contents .right .box .img-wrap {
padding-top: 75%;
}
section#design-planning .section_inner section.area03 .box2 .contents .left .box .img-wrap img, section#design-planning .section_inner section.area03 .box2 .contents .right .box .img-wrap img {
-o-object-fit: cover;
object-fit: cover;
font-family: "object-fit: cover;";
}
section#design-planning .section_inner section.area03 .box2 .contents:last-child {
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
justify-content: center;
}
@media (max-width: 991px) {
section#design-planning .section_inner section.area03 .box2 .contents:last-child {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
-moz-box-pack: justify;
justify-content: space-between;
}
}
section#design-planning .section_inner section.area03 .box2 .contents:last-child .left, section#design-planning .section_inner section.area03 .box2 .contents:last-child .center, section#design-planning .section_inner section.area03 .box2 .contents:last-child .right {
width: 20%;
margin-left: 2%;
margin-right: 0;
}
@media (max-width: 991px) {
section#design-planning .section_inner section.area03 .box2 .contents:last-child .left, section#design-planning .section_inner section.area03 .box2 .contents:last-child .center, section#design-planning .section_inner section.area03 .box2 .contents:last-child .right {
width: 31%;
margin-left: 0;
margin-right: 0;
}
}
@media (max-width: 640px) {
section#design-planning .section_inner section.area03 .box2 .contents:last-child .left, section#design-planning .section_inner section.area03 .box2 .contents:last-child .center, section#design-planning .section_inner section.area03 .box2 .contents:last-child .right {
width: 90%;
margin: 5% auto 0;
}
}
@media (max-width: 480px) {
section#design-planning .section_inner section.area03 .box2 .contents:last-child .left, section#design-planning .section_inner section.area03 .box2 .contents:last-child .center, section#design-planning .section_inner section.area03 .box2 .contents:last-child .right {
width: 95%;
}
}
@media (max-width: 320px) {
section#design-planning .section_inner section.area03 .box2 .contents:last-child .left, section#design-planning .section_inner section.area03 .box2 .contents:last-child .center, section#design-planning .section_inner section.area03 .box2 .contents:last-child .right {
width: 100%;
}
}
section#design-planning .section_inner section.area03 .box2 .contents:last-child .left .box, section#design-planning .section_inner section.area03 .box2 .contents:last-child .center .box, section#design-planning .section_inner section.area03 .box2 .contents:last-child .right .box {
width: 100%;
}
section#design-planning .section_inner section.area03 .box2 .contents:last-child .left .box .img-wrap, section#design-planning .section_inner section.area03 .box2 .contents:last-child .center .box .img-wrap, section#design-planning .section_inner section.area03 .box2 .contents:last-child .right .box .img-wrap {
padding-top: 135%;
}
section#design-planning .section_inner section.area03 .box2 .contents:last-child .left .box .img-wrap img, section#design-planning .section_inner section.area03 .box2 .contents:last-child .center .box .img-wrap img, section#design-planning .section_inner section.area03 .box2 .contents:last-child .right .box .img-wrap img {
-o-object-fit: cover;
object-fit: cover;
font-family: "object-fit: cover;";
}
section#design-planning .section_inner section.area03 .box2 .contents:last-child .left {
margin-left: 0;
}
@media (max-width: 640px) {
section#design-planning .section_inner section.area03 .box2 .contents:last-child .left {
margin: 5% auto 0;
}
}
@media (max-width: 480px) {
section#design-planning .section_inner section.area03 .box2 .contents:last-child .left {
width: 95%;
}
}
@media (max-width: 320px) {
section#design-planning .section_inner section.area03 .box2 .contents:last-child .left {
width: 100%;
}
}
section#design-planning .section_inner section.area03 .box2 .contents:last-child h4 {
width: 64%;
}
@media (max-width: 991px) {
section#design-planning .section_inner section.area03 .box2 .contents:last-child h4 {
width: 100%;
}
}
section#design-planning .section_inner section.area03 .box3 .contents .left, section#design-planning .section_inner section.area03 .box3 .contents .right {
width: 48%;
}
@media (max-width: 640px) {
section#design-planning .section_inner section.area03 .box3 .contents .left, section#design-planning .section_inner section.area03 .box3 .contents .right {
width: 90%;
margin: 5% auto 0;
}
}
@media (max-width: 480px) {
section#design-planning .section_inner section.area03 .box3 .contents .left, section#design-planning .section_inner section.area03 .box3 .contents .right {
width: 95%;
}
}
@media (max-width: 320px) {
section#design-planning .section_inner section.area03 .box3 .contents .left, section#design-planning .section_inner section.area03 .box3 .contents .right {
width: 100%;
}
}
section#design-planning .section_inner section.area03 .box3 .contents .left .box, section#design-planning .section_inner section.area03 .box3 .contents .right .box {
width: 100%;
}
section#design-planning .section_inner section.area03 .box3 .contents .left .box .img-wrap, section#design-planning .section_inner section.area03 .box3 .contents .right .box .img-wrap {
padding-top: 61.5%;
}
section#design-planning .section_inner section.area03 .box3 .contents .left .box .img-wrap img, section#design-planning .section_inner section.area03 .box3 .contents .right .box .img-wrap img {
-o-object-fit: cover;
object-fit: cover;
font-family: "object-fit: cover;";
}
section#design-planning .section_inner section.area03 .box3 .contents .left h4, section#design-planning .section_inner section.area03 .box3 .contents .right h4 {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
-webkit-justify-content: flex-end;
-moz-box-pack: end;
justify-content: flex-end;
}
section#design-planning .section_inner section.area03 .box3 .contents .right .box .img-wrap {
padding-top: 72%;
}
section#design-planning .section_inner section.area03 .box4 .contents {
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
justify-content: center;
margin-bottom: 3rem;
}
section#design-planning .section_inner section.area03 .box4 .contents .setumei {
width: 100%;
}
@media (max-width: 640px) {
section#design-planning .section_inner section.area03 .box4 .contents .setumei {
width: 90%;
}
}
@media (max-width: 480px) {
section#design-planning .section_inner section.area03 .box4 .contents .setumei {
width: 95%;
}
}
@media (max-width: 320px) {
section#design-planning .section_inner section.area03 .box4 .contents .setumei {
width: 100%;
}
}
@media (max-width: 991px) {
section#design-planning .section_inner section.area03 .box4 .contents .setumei {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-box-align: center;
align-items: center;
}
}
section#design-planning .section_inner section.area03 .box4 .contents .setumei span {
width: 79%;
margin: auto;
display: block;
background: #00a1e9;
padding: 0.5rem;
text-align: center;
color: #fff;
font-size: 1.6rem;
font-weight: 700;
}
@media (max-width: 1200px) {
section#design-planning .section_inner section.area03 .box4 .contents .setumei span {
width: 100%;
}
}
section#design-planning .section_inner section.area03 .box4 .contents .left, section#design-planning .section_inner section.area03 .box4 .contents .center, section#design-planning .section_inner section.area03 .box4 .contents .right {
width: 25%;
margin-right: 2%;
}
@media (max-width: 1200px) {
section#design-planning .section_inner section.area03 .box4 .contents .left, section#design-planning .section_inner section.area03 .box4 .contents .center, section#design-planning .section_inner section.area03 .box4 .contents .right {
width: 32%;
}
}
@media (max-width: 640px) {
section#design-planning .section_inner section.area03 .box4 .contents .left, section#design-planning .section_inner section.area03 .box4 .contents .center, section#design-planning .section_inner section.area03 .box4 .contents .right {
width: 90%;
margin: 0 auto;
}
}
@media (max-width: 480px) {
section#design-planning .section_inner section.area03 .box4 .contents .left, section#design-planning .section_inner section.area03 .box4 .contents .center, section#design-planning .section_inner section.area03 .box4 .contents .right {
width: 95%;
}
}
@media (max-width: 320px) {
section#design-planning .section_inner section.area03 .box4 .contents .left, section#design-planning .section_inner section.area03 .box4 .contents .center, section#design-planning .section_inner section.area03 .box4 .contents .right {
width: 100%;
}
}
section#design-planning .section_inner section.area03 .box4 .contents .left .box, section#design-planning .section_inner section.area03 .box4 .contents .center .box, section#design-planning .section_inner section.area03 .box4 .contents .right .box {
width: 100%;
}
section#design-planning .section_inner section.area03 .box4 .contents .left .box .img-wrap, section#design-planning .section_inner section.area03 .box4 .contents .center .box .img-wrap, section#design-planning .section_inner section.area03 .box4 .contents .right .box .img-wrap {
padding-top: 135%;
}
section#design-planning .section_inner section.area03 .box4 .contents .left .box .img-wrap img, section#design-planning .section_inner section.area03 .box4 .contents .center .box .img-wrap img, section#design-planning .section_inner section.area03 .box4 .contents .right .box .img-wrap img {
-o-object-fit: cover;
object-fit: cover;
font-family: "object-fit: cover;";
}
section#design-planning .section_inner section.area03 .box4 .contents .right {
margin-right: 0;
}
section#design-planning .section_inner section.area03 .box4 .contents h4 {
width: 79%;
}
@media (max-width: 1200px) {
section#design-planning .section_inner section.area03 .box4 .contents h4 {
width: 100%;
}
}
section#design-planning .section_inner section.area03 .box4 .contents:last-child {
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
justify-content: center;
}
section#design-planning .section_inner section.area03 .box4 .contents:last-child .setumei {
background: #00a1e9;
margin-right: 0;
}
@media (max-width: 640px) {
section#design-planning .section_inner section.area03 .box4 .contents:last-child .setumei {
width: 100%;
}
}
section#design-planning .section_inner section.area03 .box4 .contents:last-child .setumei span {
width: 100%;
}
section#design-planning .section_inner section.area03 .box4 .contents:last-child .dummy {
width: 25%;
margin-left: 2%;
}
@media (max-width: 1200px) {
section#design-planning .section_inner section.area03 .box4 .contents:last-child .dummy {
width: 32%;
}
}
@media (max-width: 640px) {
section#design-planning .section_inner section.area03 .box4 .contents:last-child .dummy {
display: none;
}
}
section#design-planning .section_inner section.area03 .box4 .contents:last-child .left {
display: none;
width: 25%;
margin-left: 0;
margin-right: 0;
}
@media (max-width: 1200px) {
section#design-planning .section_inner section.area03 .box4 .contents:last-child .left {
width: 32%;
}
}
@media (max-width: 640px) {
section#design-planning .section_inner section.area03 .box4 .contents:last-child .left {
width: 90%;
margin: 5% auto 0;
}
}
@media (max-width: 480px) {
section#design-planning .section_inner section.area03 .box4 .contents:last-child .left {
width: 95%;
}
}
@media (max-width: 320px) {
section#design-planning .section_inner section.area03 .box4 .contents:last-child .left {
width: 100%;
}
}
section#design-planning .section_inner section.area03 .box4 .contents:last-child .left .box {
width: 100%;
}
section#design-planning .section_inner section.area03 .box4 .contents:last-child .left .box .img-wrap {
padding-top: 138%;
}
section#design-planning .section_inner section.area03 .box4 .contents:last-child .left .box .img-wrap img {
-o-object-fit: cover;
object-fit: cover;
font-family: "object-fit: cover;";
}
section#design-planning .section_inner section.area03 .box4 .contents:last-child .right {
width: 52%;
margin-right: 0;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
-moz-box-pack: justify;
justify-content: space-between;
}
@media (max-width: 1200px) {
section#design-planning .section_inner section.area03 .box4 .contents:last-child .right {
width: 66%;
}
}
@media (max-width: 640px) {
section#design-planning .section_inner section.area03 .box4 .contents:last-child .right {
width: 90%;
margin: 5% auto 0;
}
}
@media (max-width: 480px) {
section#design-planning .section_inner section.area03 .box4 .contents:last-child .right {
width: 95%;
}
}
@media (max-width: 320px) {
section#design-planning .section_inner section.area03 .box4 .contents:last-child .right {
width: 100%;
}
}
section#design-planning .section_inner section.area03 .box4 .contents:last-child .right .inner-left {
width: 48%;
}
@media (max-width: 640px) {
section#design-planning .section_inner section.area03 .box4 .contents:last-child .right .inner-left {
width: 100%;
margin: 0 auto 0;
}
}
section#design-planning .section_inner section.area03 .box4 .contents:last-child .right .inner-left .img-wrap {
padding-top: 138%;
}
section#design-planning .section_inner section.area03 .box4 .contents:last-child .right .inner-left h4 {
width: 100%;
}
section#design-planning .section_inner section.area03 .box4 .contents:last-child .right .inner-right {
width: 48%;
}
@media (max-width: 640px) {
section#design-planning .section_inner section.area03 .box4 .contents:last-child .right .inner-right {
width: 100%;
margin: 2rem auto 0;
}
}
section#design-planning .section_inner section.area03 .box4 .contents:last-child .right .inner-right .img-wrap {
padding-top: 138%;
}
section#design-planning .section_inner section.area03 .box4 .contents:last-child .right .inner-right h4 {
width: 100%;
}
section a.js-smartPhoto.img-wrap:after {
content: "";
background: url(//hoshizaki-shonan.co.jp/wps/wp-content/themes/hoshizaki-shonan/img/kakudai.png);
background-repeat: no-repeat;
background-position: center;
background-color: rgba(255, 255, 255, 0.8);
border: solid 1px #02a1e9;
width: 5rem;
height: 5rem;
display: inline-block;
z-index: 9;
position: absolute;
right: 5px;
top: 0;
background-size: 70%;
padding: 1rem;
-webkit-box-shadow: 0.5rem 0.5rem rgba(2, 161, 233, 0.5);
box-shadow: 0.5rem 0.5rem rgba(2, 161, 233, 0.5);
}
section#consulting {
background: #fff;
}
section#consulting .section_inner {
margin: 0 8%;
padding: 5rem 0;
}
@media (max-width: 767px) {
section#consulting .section_inner {
margin: 0;
padding: 5rem 3rem;
}
}
@media (max-width: 480px) {
section#consulting .section_inner {
padding: 5rem 1rem;
}
}
section#consulting p.sub_read {
max-width: 1200px;
padding: 3rem 5rem;
margin: auto;
font-size: 2rem;
background: #fff;
border: solid #ddd;
-webkit-box-shadow: 1rem 1rem #ddd;
box-shadow: 1rem 1rem #ddd;
}
@media (max-width: 1300px) {
section#consulting p.sub_read {
padding: 3rem 4rem;
}
}
@media (max-width: 767px) {
section#consulting p.sub_read {
padding: 3rem;
}
}
@media (max-width: 480px) {
section#consulting p.sub_read {
padding: 2rem 1rem;
font-size: 1.6rem;
}
}
section#consulting .area01 h2, section#consulting .area02 h2, section#consulting .area03 h2, section#consulting .area04 h2 {
text-align: center;
margin-bottom: 5rem;
}
section#consulting .area01 h2:after, section#consulting .area02 h2:after, section#consulting .area03 h2:after, section#consulting .area04 h2:after {
content: '';
width: 150px;
height: 2px;
margin: 20px auto 0;
display: block;
top: 50px;
background: -webkit-gradient(linear, left top, right top, from(#03A9F4), to(#3F51B5));
background: -webkit-linear-gradient(left, #03A9F4, #3F51B5);
background: -o-linear-gradient(left, #03A9F4, #3F51B5);
background: linear-gradient(90deg, #03A9F4, #3F51B5);
}
section#consulting .area01 .read-area, section#consulting .area02 .read-area, section#consulting .area03 .read-area, section#consulting .area04 .read-area {
background: #fff;
border: solid 2px #02a1e9;
padding: 5rem;
margin: auto;
font-size: 2rem;
font-weight: 700;
color: #02a1e9;
-webkit-box-shadow: 1rem 1rem #ddd;
box-shadow: 1rem 1rem #ddd;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-box-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
-moz-box-pack: justify;
justify-content: space-between;
}
@media (max-width: 1300px) {
section#consulting .area01 .read-area, section#consulting .area02 .read-area, section#consulting .area03 .read-area, section#consulting .area04 .read-area {
padding: 3rem;
}
}
@media (max-width: 991px) {
section#consulting .area01 .read-area, section#consulting .area02 .read-area, section#consulting .area03 .read-area, section#consulting .area04 .read-area {
font-size: 1.8rem;
}
}
@media (max-width: 767px) {
section#consulting .area01 .read-area, section#consulting .area02 .read-area, section#consulting .area03 .read-area, section#consulting .area04 .read-area {
padding: 2.5rem;
}
}
@media (max-width: 480px) {
section#consulting .area01 .read-area, section#consulting .area02 .read-area, section#consulting .area03 .read-area, section#consulting .area04 .read-area {
padding: 2rem 1rem;
font-size: 1.6rem;
}
}
section#consulting .area01 .area01-box {
margin-bottom: 8rem;
}
section#consulting .area01 .area01-box:last-child {
margin-bottom: 0;
}
section#consulting .area01 .area01-box .link-area {
margin-top: 3rem;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: end;
-ms-flex-pack: end;
-webkit-justify-content: flex-end;
-moz-box-pack: end;
justify-content: flex-end;
}
@media (max-width: 991px) {
section#consulting .area01 .area01-box .link-area {
width: 100%;
}
}
section#consulting .area01 .area01-box .link-area a {
position: relative;
display: block;
font-size: 2rem;
font-weight: 300;
background-color: #4c4d55;
padding: 1rem 5rem;
border-radius: 1rem;
color: #fff;
-webkit-box-shadow: 0 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.1);
-o-transition: all .3s ease;
transition: all .3s ease;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
}
section#consulting .area01 .area01-box .link-area a::before {
content: "";
width: 1.5rem;
position: absolute;
background-color: #fff;
height: 1px;
top: 50%;
right: 3rem;
-webkit-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
section#consulting .area01 .area01-box .link-area a::after {
content: "";
width: 8px;
position: absolute;
background-color: #fff;
height: 1px;
right: 3rem;
top: 45%;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
section#consulting .area01 .area01-box .link-area a:hover {
background: #00a0e9;
-webkit-box-shadow: 0 0 2rem rgba(0, 160, 233, 0.5);
box-shadow: 0 0 2rem rgba(0, 160, 233, 0.5);
}
section#consulting .area01 .area01-box .link-area a:hover::before {
width: 2.5rem;
right: 1rem;
}
section#consulting .area01 .area01-box .link-area a:hover::after {
width: 1.5rem;
right: 0.8rem;
top: 41%;
}
section#consulting .area01 .area01-box .read-area .bg_img {
width: 30%;
}
@media (max-width: 640px) {
section#consulting .area01 .area01-box .read-area .bg_img {
width: 100%;
}
}
section#consulting .area01 .area01-box .read-area .bg_img .img-wrap {
position: relative;
overflow: hidden;
padding-top: 60%;
margin: 0;
}
@media (max-width: 991px) {
section#consulting .area01 .area01-box .read-area .bg_img .img-wrap {
padding-top: 80%;
}
}
@media (max-width: 640px) {
section#consulting .area01 .area01-box .read-area .bg_img .img-wrap {
padding-top: 60%;
margin-bottom: 2rem;
}
}
section#consulting .area01 .area01-box .read-area .bg_img .img-wrap img {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 0rem;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
font-family: "object-fit: cover;";
}
section#consulting .area01 .area01-box .read-area .text {
width: calc(100% - 32%);
}
@media (max-width: 640px) {
section#consulting .area01 .area01-box .read-area .text {
width: 100%;
}
}
section#consulting .area01 .area01-box .seminar_info .seminar-box {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-box-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
-moz-box-pack: justify;
justify-content: space-between;
margin-top: 8rem;
}
section#consulting .area01 .area01-box .seminar_info .seminar-box .seminar {
width: 48%;
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
border: solid 1px #FF9800;
border-radius: 1rem;
padding: 5rem 3rem 2rem;
margin-bottom: 6rem;
}
@media (max-width: 991px) {
section#consulting .area01 .area01-box .seminar_info .seminar-box .seminar {
width: 100%;
margin-bottom: 8rem;
-webkit-box-pack: start;
-ms-flex-pack: start;
-webkit-justify-content: flex-start;
-moz-box-pack: start;
justify-content: flex-start;
}
}
@media (max-width: 767px) {
section#consulting .area01 .area01-box .seminar_info .seminar-box .seminar {
padding: 4rem 3rem 2rem;
}
section#consulting .area01 .area01-box .seminar_info .seminar-box .seminar:nth-child(5) {
margin-bottom: 2rem;
}
}
@media (max-width: 480px) {
section#consulting .area01 .area01-box .seminar_info .seminar-box .seminar {
padding: 3rem 2rem 2rem;
font-size: 1.6rem;
}
}
section#consulting .area01 .area01-box .seminar_info .seminar-box .seminar h3 {
position: absolute;
top: -3rem;
background: #FF9800;
color: #fff;
padding: 1rem 5rem;
border-radius: 1rem;
font-size: 2rem;
}
@media (max-width: 1200px) {
section#consulting .area01 .area01-box .seminar_info .seminar-box .seminar h3 {
font-size: 2rem;
}
}
@media (max-width: 480px) {
section#consulting .area01 .area01-box .seminar_info .seminar-box .seminar h3 {
font-size: 1.8rem;
}
}
@media (max-width: 320px) {
section#consulting .area01 .area01-box .seminar_info .seminar-box .seminar h3 {
font-size: 1.6rem;
}
}
section#consulting .area01 .area01-box .seminar_info .seminar-box .seminar ul {
width: 100%;
margin-top: 0.5rem;
border-top: dashed 1px #ddd;
padding-top: 0.5rem;
}
section#consulting .area01 .area01-box .seminar_info .seminar-box .seminar ul li {
text-indent: -2rem;
padding-left: 2rem;
color: #4c4e55;
font-weight: 500;
}
section#consulting .area03 .contents {
margin: 8rem 5rem 0rem;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
-moz-box-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-box-align: center;
align-items: center;
}
@media (max-width: 1200px) {
section#consulting .area03 .contents {
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
justify-content: center;
}
}
@media (max-width: 991px) {
section#consulting .area03 .contents {
margin: 8rem 0 0;
}
}
section#consulting .area03 .contents .area03-jirei {
width: 52%;
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
border: solid 1px #FF9800;
border-radius: 1rem;
padding: 5rem 3rem 3rem;
}
@media (max-width: 1200px) {
section#consulting .area03 .contents .area03-jirei {
padding: 4rem 2rem 2rem;
width: 100%;
max-width: 80rem;
margin-bottom: 5rem;
}
}
@media (max-width: 480px) {
section#consulting .area03 .contents .area03-jirei {
padding: 4rem 1.5rem 1.5rem;
}
}
section#consulting .area03 .contents .area03-jirei h3 {
position: absolute;
top: -3rem;
background: #FF9800;
color: #fff;
padding: 1rem 2rem;
border-radius: 1rem;
font-size: 2.3rem;
}
@media (max-width: 1200px) {
section#consulting .area03 .contents .area03-jirei h3 {
font-size: 2rem;
}
}
@media (max-width: 640px) {
section#consulting .area03 .contents .area03-jirei h3 {
font-size: 1.8rem;
}
}
@media (max-width: 480px) {
section#consulting .area03 .contents .area03-jirei h3 {
font-size: 1.6rem;
}
}
section#consulting .area03 .contents .area03-jirei ul.list-inner {
width: 100%;
}
section#consulting .area03 .contents .area03-jirei ul.list-inner li {
text-indent: -2.5rem;
padding-left: 2.5rem;
border-bottom: dotted 1px #ddd;
padding-bottom: 0.5rem;
margin-bottom: 0.5rem;
font-size: 2rem;
}
@media (max-width: 767px) {
section#consulting .area03 .contents .area03-jirei ul.list-inner li {
font-size: 2rem;
}
}
@media (max-width: 640px) {
section#consulting .area03 .contents .area03-jirei ul.list-inner li {
font-size: 1.8rem;
}
}
@media (max-width: 480px) {
section#consulting .area03 .contents .area03-jirei ul.list-inner li {
font-size: 1.6rem;
}
}
section#consulting .area03 .contents .area03-jirei ul.list-inner li:last-child {
border-bottom: none;
margin: 0;
}
section#consulting .area03 .contents .contact {
width: 46%;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-box-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
justify-content: center;
}
@media (max-width: 1200px) {
section#consulting .area03 .contents .contact {
width: 100%;
max-width: 70rem;
}
}
section#consulting .area03 .contents .contact p.name {
margin: 1rem 3rem;
font-size: 3rem;
font-weight: 700;
}
@media (max-width: 640px) {
section#consulting .area03 .contents .contact p.name {
font-size: 1.8rem;
}
}
@media (max-width: 480px) {
section#consulting .area03 .contents .contact p.name {
margin-right: 0;
margin-left: 0;
margin-bottom: 2rem;
width: 100%;
text-align: center;
}
}
section#consulting .area03 .contents .contact p.phone {
background: #00a1e9;
-webkit-box-shadow: 0 0 2rem rgba(0, 161, 233, 0.5);
box-shadow: 0 0 2rem rgba(0, 161, 233, 0.5);
padding: 1rem 2rem;
font-size: 2rem;
font-weight: 700;
color: #fff;
}
@media (max-width: 640px) {
section#consulting .area03 .contents .contact p.phone {
font-size: 1.8rem;
}
}
section#consulting .area02 .onayami {
margin: 8rem 5rem 0rem;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
-moz-box-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-box-align: center;
align-items: center;
}
@media (max-width: 1200px) {
section#consulting .area02 .onayami {
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
justify-content: center;
}
}
@media (max-width: 991px) {
section#consulting .area02 .onayami {
margin: 8rem 0 0;
}
}
section#consulting .area02 .onayami .onayami-list {
width: 52%;
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
border: solid 1px #FF9800;
border-radius: 1rem;
padding: 5rem 3rem 3rem;
}
@media (max-width: 1200px) {
section#consulting .area02 .onayami .onayami-list {
padding: 4rem 2rem 2rem;
width: 100%;
max-width: 80rem;
margin-bottom: 5rem;
}
}
@media (max-width: 480px) {
section#consulting .area02 .onayami .onayami-list {
padding: 4rem 1.5rem 1.5rem;
}
}
section#consulting .area02 .onayami .onayami-list h3 {
position: absolute;
top: -3rem;
background: #FF9800;
color: #fff;
padding: 1rem 2rem;
border-radius: 1rem;
font-size: 2.3rem;
}
@media (max-width: 1200px) {
section#consulting .area02 .onayami .onayami-list h3 {
font-size: 2rem;
}
}
@media (max-width: 640px) {
section#consulting .area02 .onayami .onayami-list h3 {
font-size: 1.8rem;
}
}
@media (max-width: 480px) {
section#consulting .area02 .onayami .onayami-list h3 {
font-size: 1.6rem;
}
}
section#consulting .area02 .onayami .onayami-list ul {
width: 100%;
}
section#consulting .area02 .onayami .onayami-list ul li {
text-indent: -2rem;
padding-left: 2rem;
border-bottom: dotted 1px #ddd;
padding-bottom: 0.5rem;
margin-bottom: 0.5rem;
font-size: 2rem;
}
@media (max-width: 640px) {
section#consulting .area02 .onayami .onayami-list ul li {
font-size: 1.8rem;
}
}
@media (max-width: 480px) {
section#consulting .area02 .onayami .onayami-list ul li {
font-size: 1.6rem;
}
}
section#consulting .area02 .onayami .onayami-list ul li:last-child {
border-bottom: none;
margin: 0;
}
section#consulting .area02 .onayami .onayami-text {
width: 46%;
}
@media (max-width: 1200px) {
section#consulting .area02 .onayami .onayami-text {
width: 100%;
max-width: 70rem;
}
}
section#consulting .area02 .onayami .onayami-text p {
font-size: 2rem;
}
section#consulting .area02 .onayami .onayami-text p span {
display: block;
font-weight: 700;
text-indent: -2rem;
padding-left: 2rem;
}
@media (max-width: 640px) {
section#consulting .area02 .onayami .onayami-text p {
font-size: 1.8rem;
}
}
section#consulting .area02 .area02-jirei {
margin: 8rem auto 0;
max-width: 90rem;
}
section#consulting .area02 .area02-jirei h3 {
background: #02a1e9;
color: #fff;
text-align: center;
margin-bottom: 2rem;
padding: 0.5rem 1rem;
}
section#consulting .area02 .area02-jirei .jirei-box ul {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
-moz-box-pack: justify;
justify-content: space-between;
}
section#consulting .area02 .area02-jirei .jirei-box ul li:first-child {
font-size: 1.6rem;
width: calc(100% - 33rem);
}
@media (max-width: 640px) {
section#consulting .area02 .area02-jirei .jirei-box ul li:first-child {
width: 100%;
}
}
section#consulting .area02 .area02-jirei .jirei-box ul li:last-child {
width: 30rem;
text-align: center;
}
@media (max-width: 640px) {
section#consulting .area02 .area02-jirei .jirei-box ul li:last-child {
width: 100%;
max-width: 40rem;
margin: 1rem auto;
}
}
section#consulting .area02 .area02-jirei .jirei-box ul li:last-child p {
font-size: 1.6rem;
}
section#consulting .area04 .related_box2 {
margin: 8rem 5rem 0rem;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: start;
-ms-flex-pack: start;
-webkit-justify-content: flex-start;
-moz-box-pack: start;
justify-content: flex-start;
}
@media (max-width: 991px) {
section#consulting .area04 .related_box2 {
-ms-flex-pack: distribute;
-webkit-justify-content: space-around;
justify-content: space-around;
}
}
@media (max-width: 991px) {
section#consulting .area04 .related_box2 {
margin: 8rem 0 0;
}
}
@media (max-width: 480px) {
section#consulting .area04 .related_box2 {
margin: 5rem 0 0;
}
}
section#consulting .area04 .related_box2 .related {
width: 30%;
display: block;
margin-right: 5%;
margin-bottom: 5%;
-o-transition: all 1s ease;
transition: all 1s ease;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
}
@media (max-width: 991px) {
section#consulting .area04 .related_box2 .related {
width: 42%;
margin-right: 0;
margin-bottom: 8%;
}
}
@media (max-width: 480px) {
section#consulting .area04 .related_box2 .related {
width: 80%;
}
}
section#consulting .area04 .related_box2 .related:nth-child(3), section#consulting .area04 .related_box2 .related:nth-child(3n) {
margin-right: 0;
}
section#consulting .area04 .related_box2 .related .img-box {
position: relative;
overflow: hidden;
padding-top: 67%;
margin: 0;
-webkit-box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
}
section#consulting .area04 .related_box2 .related .img-box img {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
height: 100%;
width: 100%;
-o-object-fit: contain;
object-fit: contain;
font-family: "object-fit: contain;";
}
section#consulting .area04 .related_box2 .related:hover {
-webkit-box-shadow: 0.5rem 0.5rem 2rem rgba(0, 0, 0, 0.3), inset 0 0 5rem white;
box-shadow: 0.5rem 0.5rem 2rem rgba(0, 0, 0, 0.3), inset 0 0 5rem white;
}
section#sanitation {
background: #fff;
}
section#sanitation .section_inner {
margin: 0 8%;
padding: 5rem 0;
}
@media (max-width: 767px) {
section#sanitation .section_inner {
margin: 0;
padding: 5rem 3rem;
}
}
@media (max-width: 480px) {
section#sanitation .section_inner {
padding: 5rem 1rem;
}
}
section#sanitation .section_inner p.sub_read {
max-width: 1200px;
padding: 3rem 5rem;
margin: auto;
margin-bottom: 8rem;
font-size: 2rem;
background: #fff;
border: solid #ddd;
-webkit-box-shadow: 1rem 1rem #ddd;
box-shadow: 1rem 1rem #ddd;
}
@media (max-width: 1300px) {
section#sanitation .section_inner p.sub_read {
padding: 3rem 4rem;
}
}
@media (max-width: 767px) {
section#sanitation .section_inner p.sub_read {
padding: 3rem;
}
}
@media (max-width: 480px) {
section#sanitation .section_inner p.sub_read {
padding: 2rem 1rem;
font-size: 1.6rem;
}
}
section#sanitation .section_inner section {
margin-bottom: 8rem;
}
section#sanitation .section_inner section h2 {
text-align: center;
margin-bottom: 5rem;
}
section#sanitation .section_inner section h2:after {
content: '';
width: 150px;
height: 2px;
margin: 20px auto 0;
display: block;
top: 50px;
background: -webkit-gradient(linear, left top, right top, from(#03A9F4), to(#3F51B5));
background: -webkit-linear-gradient(left, #03A9F4, #3F51B5);
background: -o-linear-gradient(left, #03A9F4, #3F51B5);
background: linear-gradient(90deg, #03A9F4, #3F51B5);
}
section#sanitation .section_inner section.area01 .read-area { background: #fff;
border: solid 2px #02a1e9;
padding: 3rem 5rem;
margin: auto;
font-size: 2rem;
font-weight: 700;
color: #02a1e9;
-webkit-box-shadow: 1rem 1rem #ddd;
box-shadow: 1rem 1rem #ddd;
max-width: 1200px;
margin: auto;
margin-bottom: 8rem;
}
@media (max-width: 1300px) {
section#sanitation .section_inner section.area01 .read-area {
padding: 3rem 4rem;
}
}
@media (max-width: 767px) {
section#sanitation .section_inner section.area01 .read-area {
padding: 3rem;
}
}
@media (max-width: 480px) {
section#sanitation .section_inner section.area01 .read-area {
padding: 2rem 1rem;
font-size: 1.6rem;
}
}
section#sanitation .section_inner section.area01 .hierarchy { margin-bottom: 8rem;
}
section#sanitation .section_inner section.area01 .hierarchy .img-wrap img {
margin: auto;
display: block;
}
section#sanitation .section_inner section.area01 .ten-list { position: relative;
max-width: 700px;
margin: auto;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
justify-content: center;
border: solid 1px #FF9800;
border-radius: 1rem;
padding: 5rem 3rem 3rem;
}
@media (max-width: 480px) {
section#sanitation .section_inner section.area01 .ten-list {
padding: 4rem 2rem 2rem;
}
}
section#sanitation .section_inner section.area01 .ten-list h3 {
position: absolute;
top: -3rem;
background: #FF9800;
color: #fff;
padding: 1rem 2rem;
border-radius: 1rem;
font-size: 2.5rem;
}
@media (max-width: 640px) {
section#sanitation .section_inner section.area01 .ten-list h3 {
font-size: 2rem;
}
}
@media (max-width: 480px) {
section#sanitation .section_inner section.area01 .ten-list h3 {
font-size: 1.8rem;
}
}
section#sanitation .section_inner section.area01 .ten-list ul.list-inner li {
text-indent: -2rem;
padding-left: 2rem;
border-bottom: dotted 1px #ddd;
padding-bottom: 1rem;
margin-bottom: 1rem;
font-size: 2.3rem;
}
@media (max-width: 767px) {
section#sanitation .section_inner section.area01 .ten-list ul.list-inner li {
font-size: 2rem;
}
}
@media (max-width: 640px) {
section#sanitation .section_inner section.area01 .ten-list ul.list-inner li {
font-size: 1.8rem;
}
}
@media (max-width: 480px) {
section#sanitation .section_inner section.area01 .ten-list ul.list-inner li {
font-size: 1.6rem;
}
}
section#sanitation .section_inner section.area01 .ten-list ul.list-inner li:last-child {
border-bottom: none;
margin: 0;
}
section#sanitation .section_inner section.area02 { }
section#sanitation .section_inner section.area02 .management-area {
max-width: 1200px;
margin: auto;
margin-top: 8rem;
}
section#sanitation .section_inner section.area02 .management-area .management-box {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
-moz-box-pack: justify;
justify-content: space-between;
}
section#sanitation .section_inner section.area02 .management-area .management-box .management-item {
width: 31%;
border: solid 1px #02a1e9;
border-radius: 1rem;
margin-bottom: 5%;
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
justify-content: center;
}
section#sanitation .section_inner section.area02 .management-area .management-box .management-item:nth-child(10) {
margin-bottom: 0;
}
@media (max-width: 1300px) {
section#sanitation .section_inner section.area02 .management-area .management-box .management-item {
width: 48%;
margin-bottom: 6%;
}
section#sanitation .section_inner section.area02 .management-area .management-box .management-item:nth-child(9) {
margin-bottom: 0;
}
}
@media (max-width: 640px) {
section#sanitation .section_inner section.area02 .management-area .management-box .management-item {
width: 100%;
margin-bottom: 5rem;
}
section#sanitation .section_inner section.area02 .management-area .management-box .management-item:nth-child(9) {
margin-bottom: 5rem;
}
}
section#sanitation .section_inner section.area02 .management-area .management-box .management-item h3 {
width: 90%;
background: #02a1e9;
text-align: center;
padding: 1rem 2rem;
position: absolute;
top: -3rem;
color: #fff;
border-radius: 1rem;
font-size: 1.6rem;
left: 5%;
right: 5%;
}
@media (max-width: 640px) {
section#sanitation .section_inner section.area02 .management-area .management-box .management-item h3 {
top: -2rem;
}
}
section#sanitation .section_inner section.area02 .management-area .management-box .management-item p {
padding: 4rem 2rem 2rem;
}
section#sanitation .section_inner section.area02 .management-area .management-box .management-item2 {
width: 62%;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: end;
-ms-flex-pack: end;
-webkit-justify-content: flex-end;
-moz-box-pack: end;
justify-content: flex-end;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-box-align: center;
align-items: center;
}
@media (max-width: 1300px) {
section#sanitation .section_inner section.area02 .management-area .management-box .management-item2 {
width: 100%;
margin-top: 5rem;
}
}
section#sanitation .section_inner section.area02 .management-area .management-box .management-item2 p.note {
font-size: 2rem;
}
@media (max-width: 1300px) {
section#sanitation .section_inner section.area02 .management-area .management-box .management-item2 p.note {
width: 100%;
text-align: right;
margin-bottom: 2rem;
}
}
@media (max-width: 640px) {
section#sanitation .section_inner section.area02 .management-area .management-box .management-item2 p.note {
font-size: 1.6rem;
}
}
section#sanitation .section_inner section.area02 .management-area .management-box .management-item2 .info {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-box-align: center;
align-items: center;
}
@media (max-width: 480px) {
section#sanitation .section_inner section.area02 .management-area .management-box .management-item2 .info {
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
justify-content: center;
}
}
section#sanitation .section_inner section.area02 .management-area .management-box .management-item2 .info p.name {
margin-right: 3rem;
font-size: 3rem;
font-weight: 700;
}
@media (max-width: 640px) {
section#sanitation .section_inner section.area02 .management-area .management-box .management-item2 .info p.name {
font-size: 1.8rem;
}
}
@media (max-width: 480px) {
section#sanitation .section_inner section.area02 .management-area .management-box .management-item2 .info p.name {
margin-right: 0;
margin-bottom: 2rem;
width: 100%;
text-align: center;
}
}
section#sanitation .section_inner section.area02 .management-area .management-box .management-item2 .info p.phone {
background: #00a1e9;
-webkit-box-shadow: 0 0 2rem rgba(0, 161, 233, 0.5);
box-shadow: 0 0 2rem rgba(0, 161, 233, 0.5);
padding: 1rem 2rem;
font-size: 2rem;
font-weight: 700;
color: #fff;
}
@media (max-width: 640px) {
section#sanitation .section_inner section.area02 .management-area .management-box .management-item2 .info p.phone {
font-size: 1.8rem;
}
}
section#sanitation .section_inner section.area03 { }
section#sanitation .section_inner section.area03 .content-area {
max-width: 1200px;
margin: auto;
border: solid #ddd;
border-radius: 1rem;
padding: 3rem 5rem;
}
@media (max-width: 640px) {
section#sanitation .section_inner section.area03 .content-area {
padding: 2rem;
}
}
@media (max-width: 480px) {
section#sanitation .section_inner section.area03 .content-area {
padding: 1rem 1rem 2rem;
}
}
section#sanitation .section_inner section.area03 .content-area p.content-text {
font-size: 2rem;
margin-bottom: 3rem;
}
@media (max-width: 640px) {
section#sanitation .section_inner section.area03 .content-area p.content-text {
font-size: 1.6rem;
}
}
section#sanitation .section_inner section.area03 .content-area .content-detaile h3 {
font-size: 3rem;
color: #607D8B;
text-align: center;
margin-bottom: 3rem;
}
@media (max-width: 991px) {
section#sanitation .section_inner section.area03 .content-area .content-detaile h3 {
font-size: 2.5rem;
}
}
@media (max-width: 767px) {
section#sanitation .section_inner section.area03 .content-area .content-detaile h3 {
font-size: 2rem;
}
}
@media (max-width: 640px) {
section#sanitation .section_inner section.area03 .content-area .content-detaile h3 {
font-size: 1.8rem;
}
}
section#sanitation .section_inner section.area03 .content-area .content-detaile h3 span {
color: #00a1e9;
}
section#sanitation .section_inner section.area03 .content-area .content-detaile .detailed-box {
border: solid 1px #00a1e9;
padding: 1rem 2rem;
border-radius: 1rem;
font-size: 1.8rem;
margin-bottom: 5rem;
}
section#sanitation .section_inner section.area03 .content-area .content-detaile .detailed-box h4 {
font-size: 3rem;
margin-bottom: 2rem;
}
@media (max-width: 991px) {
section#sanitation .section_inner section.area03 .content-area .content-detaile .detailed-box h4 {
font-size: 2.5rem;
}
}
@media (max-width: 767px) {
section#sanitation .section_inner section.area03 .content-area .content-detaile .detailed-box h4 {
font-size: 2rem;
}
}
@media (max-width: 640px) {
section#sanitation .section_inner section.area03 .content-area .content-detaile .detailed-box h4 {
font-size: 1.8rem;
}
}
section#sanitation .section_inner section.area03 .content-area .content-detaile .detailed-box h4 span.strong {
color: #FF9800;
}
section#sanitation .section_inner section.area03 .content-area .content-detaile .detailed-box h4 span.small {
font-size: 2rem;
}
@media (max-width: 640px) {
section#sanitation .section_inner section.area03 .content-area .content-detaile .detailed-box h4 span.small {
font-size: 1.6rem;
}
}
@media (max-width: 480px) {
section#sanitation .section_inner section.area03 .content-area .content-detaile .detailed-box h4 span.small {
font-size: 1.4rem;
}
}
section#sanitation .section_inner section.area03 .content-area .content-detaile .detailed-box p {
font-size: 2rem;
}
@media (max-width: 640px) {
section#sanitation .section_inner section.area03 .content-area .content-detaile .detailed-box p {
font-size: 1.6rem;
}
}
section#sanitation .section_inner section.area03 .content-area .content-detaile .item-area {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-pack: distribute;
-webkit-justify-content: space-around;
justify-content: space-around;
}
section#sanitation .section_inner section.area03 .content-area .content-detaile .item-area .item-box {
width: 40%;
text-align: center;
margin-bottom: 5rem;
}
@media (max-width: 991px) {
section#sanitation .section_inner section.area03 .content-area .content-detaile .item-area .item-box {
width: 45%;
}
}
@media (max-width: 767px) {
section#sanitation .section_inner section.area03 .content-area .content-detaile .item-area .item-box {
width: 100%;
}
}
section#sanitation .section_inner section.area03 .content-area .content-detaile .item-area .item-box h4 {
font-size: 3rem;
background: #d2f1ff;
border: solid #00a1e9;
border-radius: 1rem;
padding: 1rem;
margin-bottom: 2rem;
color: #005fac;
-webkit-box-shadow: 0.5rem 0.5rem #ddd;
box-shadow: 0.5rem 0.5rem #ddd;
}
@media (max-width: 991px) {
section#sanitation .section_inner section.area03 .content-area .content-detaile .item-area .item-box h4 {
font-size: 2.5rem;
}
}
@media (max-width: 640px) {
section#sanitation .section_inner section.area03 .content-area .content-detaile .item-area .item-box h4 {
font-size: 2rem;
}
}
section#sanitation .section_inner section.area03 .content-area .content-detaile .item-area .item-box p {
font-size: 2rem;
position: relative;
color: #005fac;
display: inline-block;
}
section#sanitation .section_inner section.area03 .content-area .content-detaile .item-area .item-box p::before {
content: "";
width: 10px;
height: 10px;
position: absolute;
top: 20%;
left: -25px;
margin: auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border: 10px solid transparent;
border-left: 15px solid #005fac;
}
section#sanitation .section_inner section.area03 .content-area .content-detaile .point-area {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
justify-content: center;
position: relative;
}
section#sanitation .section_inner section.area03 .content-area .content-detaile .point-area p {
font-size: 2.5rem;
font-weight: 700;
text-align: center;
color: #607D8B;
margin-bottom: 5rem;
}
@media (max-width: 991px) {
section#sanitation .section_inner section.area03 .content-area .content-detaile .point-area p {
font-size: 2rem;
}
}
@media (max-width: 640px) {
section#sanitation .section_inner section.area03 .content-area .content-detaile .point-area p {
font-size: 1.8rem;
}
}
@media (max-width: 480px) {
section#sanitation .section_inner section.area03 .content-area .content-detaile .point-area p {
font-size: 1.6rem;
}
}
section#sanitation .section_inner section.area03 .content-area .content-detaile .point-area p span {
color: #FF9800;
}
section#sanitation .section_inner section.area03 .content-area .content-detaile .point-area .img-box {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
-moz-box-pack: justify;
justify-content: space-between;
padding: 2rem;
background: #d2f1ff;
}
@media (max-width: 480px) {
section#sanitation .section_inner section.area03 .content-area .content-detaile .point-area .img-box {
padding: 1rem;
}
}
section#sanitation .section_inner section.area03 .content-area .content-detaile .point-area .img-wrap {
width: 32%;
display: block;
position: relative;
overflow: hidden;
padding-top: 25%;
margin: 0;
}
section#sanitation .section_inner section.area03 .content-area .content-detaile .point-area .img-wrap img {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 0rem;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
font-family: "object-fit: cover;";
}
section#sanitation .section_inner section.area03 .content-area .content-detaile .point-area .important {
position: absolute;
bottom: 0;
right: -25px;
background: #FF5722;
padding: 0.3rem 1.5rem;
font-size: 2.5rem;
color: #fff;
font-weight: 700;
-webkit-box-shadow: 0.5rem 0.5rem #ddd;
box-shadow: 0.5rem 0.5rem #ddd;
-webkit-transform: rotate(-20deg);
-ms-transform: rotate(-20deg);
transform: rotate(-20deg);
}
@media (max-width: 480px) {
section#sanitation .section_inner section.area03 .content-area .content-detaile .point-area .important {
bottom: -20px;
right: -15px;
font-size: 2rem;
}
}
section#sanitation .section_inner section.area03 .content-area .content-detaile .contact-area {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: end;
-ms-flex-pack: end;
-webkit-justify-content: flex-end;
-moz-box-pack: end;
justify-content: flex-end;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-box-align: center;
align-items: center;
margin-top: 5rem;
}
@media (max-width: 480px) {
section#sanitation .section_inner section.area03 .content-area .content-detaile .contact-area {
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
justify-content: center;
}
}
section#sanitation .section_inner section.area03 .content-area .content-detaile .contact-area p.note {
font-size: 2rem;
}
@media (max-width: 640px) {
section#sanitation .section_inner section.area03 .content-area .content-detaile .contact-area p.note {
font-size: 1.6rem;
}
}
section#sanitation .section_inner section.area03 .content-area .content-detaile .contact-area p.note span {
color: #E91E63;
font-weight: 700;
}
section#sanitation .section_inner section.area03 .content-area .content-detaile .contact-area .info {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-box-align: center;
align-items: center;
margin-top: 3rem;
}
@media (max-width: 480px) {
section#sanitation .section_inner section.area03 .content-area .content-detaile .contact-area .info {
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
justify-content: center;
}
}
section#sanitation .section_inner section.area03 .content-area .content-detaile .contact-area .info p.name {
margin-right: 3rem;
font-size: 3rem;
font-weight: 700;
}
@media (max-width: 640px) {
section#sanitation .section_inner section.area03 .content-area .content-detaile .contact-area .info p.name {
font-size: 1.8rem;
}
}
@media (max-width: 480px) {
section#sanitation .section_inner section.area03 .content-area .content-detaile .contact-area .info p.name {
margin-right: 0;
margin-bottom: 2rem;
width: 100%;
text-align: center;
}
}
section#sanitation .section_inner section.area03 .content-area .content-detaile .contact-area .info p.phone {
background: #00a1e9;
-webkit-box-shadow: 0 0 2rem rgba(0, 161, 233, 0.5);
box-shadow: 0 0 2rem rgba(0, 161, 233, 0.5);
padding: 1rem 2rem;
font-size: 2rem;
font-weight: 700;
color: #fff;
}
@media (max-width: 640px) {
section#sanitation .section_inner section.area03 .content-area .content-detaile .contact-area .info p.phone {
font-size: 1.8rem;
}
}
section#sanitation .section_inner section.area-bana {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-pack: distribute;
-webkit-justify-content: space-around;
justify-content: space-around;
max-width: 1200px;
margin: auto;
}
section#sanitation .section_inner section.area-bana .bana-box {
width: 35%;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
justify-content: center;
}
@media (max-width: 640px) {
section#sanitation .section_inner section.area-bana .bana-box {
width: 100%;
margin-bottom: 5rem;
}
section#sanitation .section_inner section.area-bana .bana-box:last-child {
margin-bottom: 0;
}
}
section#sanitation .section_inner section.area-bana .bana-box.display {
display: block;
}
section#sanitation .section_inner section.area-bana .bana-box.hide {
display: none;
}
section#sanitation .section_inner section.area-bana .bana-box .title-box {
width: 100%;
}
section#sanitation .section_inner section.area-bana .bana-box .title-box h2 {
margin-bottom: 3rem;
}
section#sanitation .section_inner section.area-bana .bana-box p {
width: 100%;
}
section#sanitation .section_inner section.area-bana .bana-box .bana-style {
border: solid 1px;
height: 235px;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-top: 1rem;
padding: 3rem;
border-radius: 1rem;
background: #f7f7f7;
-o-transition: all .3s ease;
transition: all .3s ease;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
}
section#sanitation .section_inner section.area-bana .bana-box a {
-o-transition: all .3s ease;
transition: all .3s ease;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
}
section#sanitation .section_inner section.area-bana .bana-box a:hover {
opacity: 0.8;
background: #fff;
}
section#sanitation .section_inner section.area-bana .bana-box a:hover .bana-style {
opacity: 0.8;
background: #fff;
}
section#site_use {
background: #fff;
}
section#site_use .section_inner {
margin: 0 8%;
padding: 5rem 0;
}
@media (max-width: 767px) {
section#site_use .section_inner {
margin: 0;
padding: 5rem 3rem;
}
}
@media (max-width: 480px) {
section#site_use .section_inner {
padding: 5rem 1rem;
}
}
section#site_use .section_inner p.sub_read {
padding: 2rem 3rem 3rem;
margin-bottom: 8rem;
font-size: 2rem;
background: #fff;
border: solid #ddd;
-webkit-box-shadow: 1rem 1rem #ddd;
box-shadow: 1rem 1rem #ddd;
}
@media (max-width: 480px) {
section#site_use .section_inner p.sub_read {
padding: 2rem 1rem;
font-size: 1.6rem;
}
}
section#site_use .section_inner p.sub_read span.red {
font-size: 3rem;
font-weight: 700;
color: #E91E63;
}
section#site_use .section_inner p.sub_read span.blue {
font-size: 3rem;
font-weight: 700;
color: #03A9F4;
}
section#site_use .section_inner .use-item h3 {
font-size: 2.5rem;
border-bottom: solid #00a1e9;
display: inline-block;
padding-bottom: 1rem;
}
@media (max-width: 767px) {
section#site_use .section_inner .use-item h3 {
font-size: 2.3rem;
}
}
@media (max-width: 640px) {
section#site_use .section_inner .use-item h3 {
font-size: 2.2rem;
}
}
@media (max-width: 480px) {
section#site_use .section_inner .use-item h3 {
font-size: 2rem;
}
}
@media (max-width: 360px) {
section#site_use .section_inner .use-item h3 {
font-size: 1.8rem;
}
}
section#site_use .section_inner .use-item .item-box {
padding: 2rem 2rem 3rem;
margin-bottom: 3rem;
border-bottom: dashed 1px #ddd;
}
section#site_use .section_inner .use-item .item-box:last-child {
border: none;
}
section#site_use .section_inner .use-item .item-box > p {
margin-bottom: 1rem;
}
section#site_use .section_inner .use-item .item-box .link-list {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
section#site_use .section_inner .use-item .item-box .link-list li {
margin: 1rem;
}
section#site_use .section_inner .use-item .item-box .link-list li a {
position: relative;
display: block;
font-size: 2rem;
font-weight: 300;
background-color: #4c4d55;
padding: 1rem 5rem;
border-radius: 1rem;
color: #fff;
-webkit-box-shadow: 0 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.1);
-o-transition: all .3s ease;
transition: all .3s ease;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
}
section#site_use .section_inner .use-item .item-box .link-list li a::before {
content: "";
width: 1.5rem;
position: absolute;
background-color: #fff;
height: 1px;
top: 50%;
right: 3rem;
-webkit-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
section#site_use .section_inner .use-item .item-box .link-list li a::after {
content: "";
width: 8px;
position: absolute;
background-color: #fff;
height: 1px;
right: 3rem;
top: 45%;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
section#site_use .section_inner .use-item .item-box .link-list li a:hover {
background: #00a0e9;
-webkit-box-shadow: 0 0 2rem rgba(0, 160, 233, 0.5);
box-shadow: 0 0 2rem rgba(0, 160, 233, 0.5);
}
section#site_use .section_inner .use-item .item-box .link-list li a:hover::before {
width: 2.5rem;
right: 1rem;
}
section#site_use .section_inner .use-item .item-box .link-list li a:hover::after {
width: 1.5rem;
right: 0.8rem;
top: 41%;
}
section#supplies {
background: #fff;
}
section#supplies .section_inner {
margin: 0 8%;
padding: 5rem 0;
}
@media (max-width: 767px) {
section#supplies .section_inner {
margin: 0;
padding: 5rem 3rem;
}
}
@media (max-width: 480px) {
section#supplies .section_inner {
padding: 5rem 1rem;
}
}
section#supplies .section_inner p.sub_read {
padding: 2rem 3rem 3rem;
margin-bottom: 8rem;
font-size: 2rem;
background: #fff;
border: solid #ddd;
-webkit-box-shadow: 1rem 1rem #ddd;
box-shadow: 1rem 1rem #ddd;
}
@media (max-width: 480px) {
section#supplies .section_inner p.sub_read {
padding: 2rem 1rem;
font-size: 1.6rem;
}
}
section#supplies .section_inner p.sub_read span.red {
font-size: 3rem;
font-weight: 700;
color: #E91E63;
}
section#supplies .section_inner p.sub_read span.blue {
font-size: 3rem;
font-weight: 700;
color: #03A9F4;
}
section#supplies .section_inner .product-area h2 {
text-align: center;
margin-bottom: 5rem;
}
section#supplies .section_inner .product-area h2:after {
content: '';
width: 150px;
height: 2px;
margin: 20px auto 0;
display: block;
top: 50px;
background: -webkit-gradient(linear, left top, right top, from(#03A9F4), to(#3F51B5));
background: -webkit-linear-gradient(left, #03A9F4, #3F51B5);
background: -o-linear-gradient(left, #03A9F4, #3F51B5);
background: linear-gradient(90deg, #03A9F4, #3F51B5);
}
section#supplies .section_inner .quick_rder {
text-align: center;
margin-bottom: 5rem;
}
section#supplies .section_inner section.product-area {
margin: 0 0 3rem;
padding: 5rem 0;
}
section#supplies .section_inner section.product-area .read-area {
border: 0.5rem solid #eee;
margin: 1rem 1rem 3rem; padding: 2rem;
position: relative;
z-index: 0;
}
@media (max-width: 480px) {
section#supplies .section_inner section.product-area .read-area {
padding: 2rem 1rem;
}
}
section#supplies .section_inner section.product-area .read-area:before {
border-top: 5px solid #03A9F4;
border-left: 5px solid #03A9F4;
content: '';
display: block;
position: absolute;
top: -5px;
left: -5px;
width: 20px;
height: 20px;
z-index: 1;
}
section#supplies .section_inner section.product-area .read-area h3 {
text-align: center;
padding-bottom: 1.5rem;
margin-bottom: 2rem;
border-bottom: dashed 1px #ddd;
}
section#supplies .section_inner section.product-area .detergent-list { display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: baseline;
-ms-flex-align: baseline;
-webkit-align-items: baseline;
-moz-box-align: baseline;
align-items: baseline;
}
section#supplies .section_inner section.product-area .detergent-list .img-area {
width: 16.6666%;
padding: 0 2% 2%;
}
@media (max-width: 767px) {
section#supplies .section_inner section.product-area .detergent-list .img-area {
width: 33.3333%;
margin-bottom: 5%;
}
}
section#supplies .section_inner section.product-area .product-list {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-pack: distribute;
-webkit-justify-content: space-around;
justify-content: space-around;   }
section#supplies .section_inner section.product-area .product-list .products {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
padding: 1rem 2rem;
}
section#supplies .section_inner section.product-area .product-list .products p {
width: 100%;
margin-bottom: 2rem;
text-align: center;
}
section#supplies .section_inner section.product-area .product-list .products p span {
background: #FFC107;
padding: 1rem;
width: 20rem;
display: block;
font-weight: 700;
text-align: center;
margin: auto;
border-radius: 5rem;
}
section#supplies .section_inner section.product-area .product-list .products .product {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-webkit-box-align: end;
-ms-flex-align: end;
-webkit-align-items: flex-end;
-moz-box-align: end;
align-items: flex-end;
margin-top: 2rem;
}
section#supplies .section_inner section.product-area .product-list .products .product .img-area {
width: 100%;
height: auto;
}
section#supplies .section_inner section.product-area .product-list .products .product .img-area .img-wrap {
position: relative;
overflow: hidden;
padding-top: 160%;
margin: 0;
}
section#supplies .section_inner section.product-area .product-list .products .product .img-area .img-wrap img {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 0rem;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
font-family: "object-fit: contain;";
}
section#supplies .section_inner section.product-area .product-list .products .product .img-area p {
margin-top: 2rem;
margin-bottom: 0;
}
section#supplies .section_inner section.product-area .product-list .products .product .item:hover {
background: #00a0e9;
-webkit-transform: translateY(-2px);
-ms-transform: translateY(-2px);
transform: translateY(-2px);
-webkit-box-shadow: 0 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.3);
box-shadow: 0 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.3);
}
section#supplies .section_inner section.product-area .product-list .products .product .item:hover .more-btn::before {
width: 2.5rem;
height: 2px;
right: 1rem;
}
section#supplies .section_inner section.product-area .product-list .products .product .item:hover .more-btn::after {
width: 1.5rem;
height: 2px;
right: 0.8rem;
top: 42%;
}
section#supplies .section_inner section.product-area .product-list.tea {
margin-top: 10rem;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-box-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
justify-content: center;
}
section#supplies .section_inner section.product-area .product-list.tea .teatime {
display: inline-table;
position: relative;
background: #f0f8e7;
padding: 5rem 5rem 3rem;
margin: 1rem 3rem;
}
@media (max-width: 480px) {
section#supplies .section_inner section.product-area .product-list.tea .teatime {
padding: 5rem 4rem 3rem;
margin: 1rem;
}
}
section#supplies .section_inner section.product-area .product-list.tea .teatime .ochappa {
position: relative;
display: block;
}
section#supplies .section_inner section.product-area .product-list.tea .teatime .ochappa p {
position: absolute;
background: #739f41;
color: #fff;
font-weight: 700;
padding: 0.5rem 2rem;
border-radius: 50%;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 115px;
}
section#supplies .section_inner section.product-area .product-list.tea .teatime .ochappa p:first-child {
left: -7rem;
top: -6rem;
-webkit-transform: rotate(35deg);
-ms-transform: rotate(35deg);
transform: rotate(35deg);
}
section#supplies .section_inner section.product-area .product-list.tea .teatime .ochappa p:nth-child(2) {
width: 1rem;
height: auto;
top: -12rem;
left: 3rem;
line-height: 1.3;
padding: 1.5rem 1.8rem;
}
section#supplies .section_inner section.product-area .product-list.tea .teatime .ochappa p:last-child {
left: 5rem;
top: -6rem;
-webkit-transform: rotate(-35deg);
-ms-transform: rotate(-35deg);
transform: rotate(-35deg);
}
section#supplies .section_inner section.product-area .product-list.tea .teatime .list ul li {
position: relative;
font-size: 1.8rem;
font-weight: 700;
color: #73a041;
padding: 0.5rem 0;
}
@media (max-width: 480px) {
section#supplies .section_inner section.product-area .product-list.tea .teatime .list ul li {
font-size: 1.4rem;
}
}
section#supplies .section_inner section.product-area .product-list.tea .teatime .list ul li::after {
content: '';
display: block;
position: absolute;
top: 40%;
left: -1.5em;
width: 10px;
height: 5px;
border-left: 2px solid #73a041;
border-bottom: 2px solid #73a041;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
section#supplies .section_inner section.product-area .product-list.tea a.bana {
margin: 1rem 3rem;
}
@media (max-width: 480px) {
section#supplies .section_inner section.product-area .product-list.tea a.bana {
margin: 1rem;
}
}
section#supplies .section_inner section.product-area .product-list.drink .products { }
section#supplies .section_inner section.product-area .product-list.drink .products:nth-child(1) {
width: 40%;
margin-bottom: 3rem;
}
@media (max-width: 767px) {
section#supplies .section_inner section.product-area .product-list.drink .products:nth-child(1) {
width: 80%;
margin-bottom: 8rem;
}
}
@media (max-width: 480px) {
section#supplies .section_inner section.product-area .product-list.drink .products:nth-child(1) {
width: 100%;
margin-bottom: 5rem;
}
}
section#supplies .section_inner section.product-area .product-list.drink .products:nth-child(1) .product .img-area .img-wrap {
padding-top: 200%;
}
section#supplies .section_inner section.product-area .product-list.drink .products:nth-child(2) {
width: 30%;
margin-bottom: 3rem;
}
@media (max-width: 767px) {
section#supplies .section_inner section.product-area .product-list.drink .products:nth-child(2) {
width: 80%;
margin-bottom: 8rem;
}
}
@media (max-width: 480px) {
section#supplies .section_inner section.product-area .product-list.drink .products:nth-child(2) {
width: 100%;
margin-bottom: 5rem;
}
}
section#supplies .section_inner section.product-area .product-list.drink .products:nth-child(2) .product .img-area .img-wrap {
padding-top: 160%;
}
section#supplies .section_inner section.product-area .product-list.drink .products:nth-child(3) {
width: 30%;
margin-bottom: 3rem;
}
@media (max-width: 767px) {
section#supplies .section_inner section.product-area .product-list.drink .products:nth-child(3) {
width: 80%;
margin-bottom: 8rem;
}
}
@media (max-width: 480px) {
section#supplies .section_inner section.product-area .product-list.drink .products:nth-child(3) {
width: 100%;
margin-bottom: 5rem;
}
}
section#supplies .section_inner section.product-area .product-list.drink .products:nth-child(3) .product .img-area .img-wrap {
padding-top: 160%;
}
section#supplies .section_inner section.product-area .product-list.drink .products:nth-child(4) {
width: 50%;
}
@media (max-width: 767px) {
section#supplies .section_inner section.product-area .product-list.drink .products:nth-child(4) {
width: 80%;
margin-bottom: 8rem;
}
}
@media (max-width: 480px) {
section#supplies .section_inner section.product-area .product-list.drink .products:nth-child(4) {
width: 100%;
margin-bottom: 5rem;
}
}
section#supplies .section_inner section.product-area .product-list.drink .products:nth-child(4) .product .img-area .img-wrap {
padding-top: 200%;
}
section#supplies .section_inner section.product-area .product-list.drink .products:nth-child(5) {
width: 50%;
}
@media (max-width: 767px) {
section#supplies .section_inner section.product-area .product-list.drink .products:nth-child(5) {
width: 80%;
}
}
@media (max-width: 480px) {
section#supplies .section_inner section.product-area .product-list.drink .products:nth-child(5) {
width: 100%;
}
}
section#supplies .section_inner section.product-area .product-list.drink .products:nth-child(5) .product .img-area .img-wrap {
padding-top: 200%;
}
section#supplies .section_inner section.product-area .product-list.water .products { }
section#supplies .section_inner section.product-area .product-list.water .products:nth-child(1) {
width: 40%;
}
@media (max-width: 767px) {
section#supplies .section_inner section.product-area .product-list.water .products:nth-child(1) {
width: 80%;
margin-bottom: 8rem;
}
}
@media (max-width: 480px) {
section#supplies .section_inner section.product-area .product-list.water .products:nth-child(1) {
width: 100%;
margin-bottom: 5rem;
}
}
section#supplies .section_inner section.product-area .product-list.water .products:nth-child(1) .product .img-area .img-wrap {
padding-top: 200%;
}
section#supplies .section_inner section.product-area .product-list.water .products:nth-child(2) {
width: 40%;
}
@media (max-width: 767px) {
section#supplies .section_inner section.product-area .product-list.water .products:nth-child(2) {
width: 80%;
}
}
@media (max-width: 480px) {
section#supplies .section_inner section.product-area .product-list.water .products:nth-child(2) {
width: 100%;
}
}
section#supplies .section_inner section.product-area .product-list.water .products:nth-child(2) .product .img-area .img-wrap {
padding-top: 200%;
}
section#supplies .section_inner section.product-area .product-list.vacuum .products { }
section#supplies .section_inner section.product-area .product-list.vacuum .products:nth-child(1) {
width: 30%;
}
@media (max-width: 767px) {
section#supplies .section_inner section.product-area .product-list.vacuum .products:nth-child(1) {
width: 33.333%;
padding: 1rem 0.2rem;
}
}
@media (max-width: 480px) {
section#supplies .section_inner section.product-area .product-list.vacuum .products:nth-child(1) {
width: 80%;
padding: 1rem 0;
}
}
section#supplies .section_inner section.product-area .product-list.vacuum .products:nth-child(1) .product .img-area .img-wrap {
padding-top: 120%;
}
section#supplies .section_inner section.product-area .product-list.vacuum .products:nth-child(2) {
width: 30%;
}
@media (max-width: 767px) {
section#supplies .section_inner section.product-area .product-list.vacuum .products:nth-child(2) {
width: 33.333%;
padding: 1rem 0.2rem;
}
}
@media (max-width: 480px) {
section#supplies .section_inner section.product-area .product-list.vacuum .products:nth-child(2) {
width: 80%;
padding: 1rem 0;
}
}
section#supplies .section_inner section.product-area .product-list.vacuum .products:nth-child(2) .product .img-area .img-wrap {
padding-top: 120%;
}
section#supplies .section_inner section.product-area .product-list.vacuum .products:nth-child(3) {
width: 30%;
}
@media (max-width: 767px) {
section#supplies .section_inner section.product-area .product-list.vacuum .products:nth-child(3) {
width: 33.333%;
padding: 1rem 0.2rem;
}
}
@media (max-width: 480px) {
section#supplies .section_inner section.product-area .product-list.vacuum .products:nth-child(3) {
width: 80%;
padding: 1rem 0;
}
}
section#supplies .section_inner section.product-area .product-list.vacuum .products:nth-child(3) .product .img-area .img-wrap {
padding-top: 120%;
}
section#sales, section#category_list {
background: #fff;
}
section#sales .section_inner, section#category_list .section_inner {
margin: 0 8%;
padding: 5rem 0;
}
@media (max-width: 767px) {
section#sales .section_inner, section#category_list .section_inner {
margin: 0;
padding: 5rem 3rem;
}
}
@media (max-width: 480px) {
section#sales .section_inner, section#category_list .section_inner {
padding: 5rem 2rem;
}
}
section#sales .section_inner h2, section#category_list .section_inner h2 {
text-align: center;
margin-bottom: 5rem;
}
section#sales .section_inner h2:after, section#category_list .section_inner h2:after {
content: '';
width: 150px;
height: 2px;
margin: 20px auto 0;
display: block;
top: 50px;
background: -webkit-gradient(linear, left top, right top, from(#03A9F4), to(#3F51B5));
background: -webkit-linear-gradient(left, #03A9F4, #3F51B5);
background: -o-linear-gradient(left, #03A9F4, #3F51B5);
background: linear-gradient(90deg, #03A9F4, #3F51B5);
}
section#sales .section_inner .list, section#category_list .section_inner .list {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
section#sales .section_inner .list .product-box, section#category_list .section_inner .list .product-box {
width: 22.75%;
display: block;
margin-bottom: 3%;
margin-right: 3%;
}
@media (max-width: 1500px) {
section#sales .section_inner .list .product-box, section#category_list .section_inner .list .product-box {
width: 30%;
margin-right: 5%;
}
}
@media (max-width: 1400px) {
section#sales .section_inner .list .product-box, section#category_list .section_inner .list .product-box {
width: 32%;
margin-right: 2%;
margin-bottom: 2%;
}
}
@media (max-width: 991px) {
section#sales .section_inner .list .product-box, section#category_list .section_inner .list .product-box {
width: 48%;
margin-right: 4%;
margin-bottom: 4%;
}
}
section#sales .section_inner .list .product-box:nth-child(4n), section#category_list .section_inner .list .product-box:nth-child(4n) {
margin-right: 0;
}
@media (max-width: 1500px) {
section#sales .section_inner .list .product-box:nth-child(4n), section#category_list .section_inner .list .product-box:nth-child(4n) {
margin-right: 5%;
}
}
@media (max-width: 1400px) {
section#sales .section_inner .list .product-box:nth-child(4n), section#category_list .section_inner .list .product-box:nth-child(4n) {
margin-right: 2%;
}
}
@media (max-width: 1500px) {
section#sales .section_inner .list .product-box:nth-child(3n), section#category_list .section_inner .list .product-box:nth-child(3n) {
margin-right: 0;
}
}
@media (max-width: 991px) {
section#sales .section_inner .list .product-box:nth-child(3n), section#category_list .section_inner .list .product-box:nth-child(3n) {
margin-right: 4%;
}
}
@media (max-width: 991px) {
section#sales .section_inner .list .product-box:nth-child(2n), section#category_list .section_inner .list .product-box:nth-child(2n) {
margin-right: 0;
}
}
section#sales .section_inner .list .product-box .product, section#category_list .section_inner .list .product-box .product {
-webkit-box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
border-radius: 1rem;
background: #fff;
display: block;
overflow: hidden;
}
section#sales .section_inner .list .product-box .product .img-area .img-wrap, section#category_list .section_inner .list .product-box .product .img-area .img-wrap {
position: relative;
overflow: hidden;
padding-top: 90%;
margin: 0;
background: #fff;
}
section#sales .section_inner .list .product-box .product .img-area .img-wrap img, section#category_list .section_inner .list .product-box .product .img-area .img-wrap img {
-webkit-transition: -webkit-transform 2s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: -webkit-transform 2s cubic-bezier(0.215, 0.61, 0.355, 1);
-o-transition: transform 2s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: transform 2s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: transform 2s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 2s cubic-bezier(0.215, 0.61, 0.355, 1);
-webkit-transform: scale(1) rotate(0.0001deg);
-ms-transform: scale(1) rotate(0.0001deg);
transform: scale(1) rotate(0.0001deg);
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 3rem;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
font-family: "object-fit: contain;";
}
section#sales .section_inner .list .product-box .product .text-area, section#category_list .section_inner .list .product-box .product .text-area {
position: relative;
width: 100%;
margin: auto;
background: #ddd;
padding: 1.5rem;
overflow: hidden;
}
@media (max-width: 320px) {
section#sales .section_inner .list .product-box .product .text-area, section#category_list .section_inner .list .product-box .product .text-area {
padding-left: 1rem;
}
}
section#sales .section_inner .list .product-box .product .text-area.color1, section#category_list .section_inner .list .product-box .product .text-area.color1 {
background: #00a0e9;
}
section#sales .section_inner .list .product-box .product .text-area.color2, section#category_list .section_inner .list .product-box .product .text-area.color2 {
background: #96cd58;
}
section#sales .section_inner .list .product-box .product .text-area.color3, section#category_list .section_inner .list .product-box .product .text-area.color3 {
background: #c9661a;
}
section#sales .section_inner .list .product-box .product .text-area.color4, section#category_list .section_inner .list .product-box .product .text-area.color4 {
background: #8dc6cc;
}
section#sales .section_inner .list .product-box .product .text-area.color5, section#category_list .section_inner .list .product-box .product .text-area.color5 {
background: #fb7e82;
}
section#sales .section_inner .list .product-box .product .text-area .text_inner h3, section#category_list .section_inner .list .product-box .product .text-area .text_inner h3 {
color: #fff;
}
section#sales .section_inner .list .product-box .product .text-area::before, section#category_list .section_inner .list .product-box .product .text-area::before {
content: "";
width: 1.5rem;
position: absolute;
background-color: #fff;
height: 1px;
top: 50%;
right: 1.5rem;
-webkit-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
section#sales .section_inner .list .product-box .product .text-area::after, section#category_list .section_inner .list .product-box .product .text-area::after {
content: "";
width: 8px;
position: absolute;
background-color: #fff;
height: 1px;
right: 1.5rem;
top: 45%;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
@media (max-width: 480px) {
section#sales .section_inner .list .product-box .product .text-area h3, section#category_list .section_inner .list .product-box .product .text-area h3 {
text-align: left;
font-size: 1.4rem;
}
}
@media (max-width: 320px) {
section#sales .section_inner .list .product-box .product .text-area h3, section#category_list .section_inner .list .product-box .product .text-area h3 {
font-size: 1.2rem;
}
}
section#sales .section_inner .list .product-box:hover .product .img-area .img-wrap img, section#category_list .section_inner .list .product-box:hover .product .img-area .img-wrap img {
-webkit-transition-duration: 10s;
-o-transition-duration: 10s;
transition-duration: 10s;
-webkit-transform: scale(1.06) rotate(0.01deg);
-ms-transform: scale(1.06) rotate(0.01deg);
transform: scale(1.06) rotate(0.01deg);
}
section#sales .section_inner .list .product-box:hover .product .text-area::before, section#category_list .section_inner .list .product-box:hover .product .text-area::before {
width: 2rem;
right: 0.5rem;
}
section#sales .section_inner .list .product-box:hover .product .text-area::after, section#category_list .section_inner .list .product-box:hover .product .text-area::after {
width: 12px;
right: 0.3rem;
top: 43%;
}
section#category_list .section_inner .readtext {
text-align: center;
margin-bottom: 5rem;
}
@media (max-width: 480px) {
section#category_list .section_inner .list a.product-box {
width: 100%;
margin-right: 0;
margin-bottom: 8%;
}
}
@media (max-width: 480px) {
section#category_list .section_inner .list a.product-box:nth-child(3n) {
margin-right: 0;
}
}
@media (max-width: 480px) {
section#category_list .section_inner .list a.product-box:nth-child(2n) {
margin-right: 0;
}
}
section#category_list .section_inner .list a.product-box .product {
-webkit-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
section#category_list .section_inner .list a.product-box .product .img-area .img-wrap {
padding-top: 50%;
}
section#category_list .section_inner .list a.product-box .product .img-area .img-wrap img {
padding: 0;
-o-object-fit: cover;
object-fit: cover;
font-family: "object-fit: cover;";
}
section#category_list .section_inner .list a.product-box .product .case-cate {
position: relative;
}
section#category_list .section_inner .list a.product-box .product .case-cate p {
position: absolute;
bottom: 0;
color: #fff;
z-index: 9;
right: 0;
padding: 0.1rem 1rem;
}
section#category_list .section_inner .list a.product-box .product .text-area {
background: #fff;
padding: 0;
}
section#category_list .section_inner .list a.product-box .product .text-area .text_inner p.title_height {
font-weight: 500;
padding: 1rem 1.5rem;
}
section#category_list .section_inner .list a.product-box .product .text-area .text_inner p.products_height {
background: #efefef;
padding: 1rem 1.5rem;
}
section#category_list .section_inner .list a.product-box .product .text-area .text_inner p.page_lead_height {
padding: 1rem 1.5rem;
font-size: 1.4rem;
}
section#category_list .section_inner .list a.product-box .product .text-area::before, section#category_list .section_inner .list a.product-box .product .text-area::after {
content: none;
}
section#category_list .section_inner .list a.product-box:hover .product {
-webkit-box-shadow: 0 0 2rem rgba(0, 0, 0, 0.1);
box-shadow: 0 0 2rem rgba(0, 0, 0, 0.1);
}
section#category_list .more-btn-area {
text-align: center;
width: 100%;
}
section#category_list .more-btn-area a .more-btn {
-webkit-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
section#category_list .more-btn-area a:hover .more-btn {
background-color: #04a0e9;
}
section#category_list .more-btn-area a:hover .more-btn::before {
width: 2.5rem;
height: 1px;
right: 1rem;
}
section#category_list .more-btn-area a:hover .more-btn::after {
width: 1.5rem;
height: 1px;
right: 0.8rem;
top: 43%;
}
section#case {
background: #fff;
}
section#case .case_studies {
margin-bottom: 8rem;
}
section#case .case_studies:last-child {
margin-bottom: 0;
}
section#case .case_studies .case-head {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-box-align: center;
align-items: center;
margin-bottom: 2rem;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
-moz-box-pack: justify;
justify-content: space-between;
}
section#case .case_studies .case-head .case-info {
display: inline-block;
position: relative;
padding: 1rem 2rem;
background-color: #fff;
border: 1px solid;
border-radius: 0.5rem;
}
@media (max-width: 767px) {
section#case .case_studies .case-head .case-info {
width: 100%;
}
}
section#case .case_studies .case-head .case-info::before, section#case .case_studies .case-head .case-info::after {
position: absolute;
top: 100%;
left: 30px;
content: '';
height: 0;
width: 0;
border: 10px solid transparent;
}
section#case .case_studies .case-head .case-info::before {
border-top: 15px solid;
}
section#case .case_studies .case-head .case-info::after {
margin-top: -2px;
border-top: 15px solid #fff;
}
section#case .case_studies .case-head .case-info h2.case-name {
display: inline;
}
section#case .case_studies .case-head .case-info p.case-cate {
background: -webkit-linear-gradient(left, rgba(67, 180, 237, 0.3) 50%, transparent 50%);
background: -webkit-gradient(linear, left top, right top, color-stop(50%, rgba(67, 180, 237, 0.3)), color-stop(50%, transparent));
background: -o-linear-gradient(left, rgba(67, 180, 237, 0.3) 50%, transparent 50%);
background: linear-gradient(left, rgba(67, 180, 237, 0.3) 50%, transparent 50%);
background-repeat: no-repeat;
background-size: 200% .8em;
background-position: 100% .5em;
-webkit-transition: 2s;
-o-transition: 2s;
transition: 2s;
font-weight: 500;
margin-left: 3rem;
}
section#case .case_studies .case-head .case-info p.case-cate.is-active {
background-position: 0% 1.5rem;
display: inline;
white-space: nowrap;
}
section#case #gallery {
width: 100%; }
section#case #gallery.ps_area {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
-moz-box-pack: justify;
justify-content: space-between;
max-width: 100%;
margin: 0 auto;
}
section#case #gallery.ps_area .main-area {
width: 46%;
}
@media (max-width: 991px) {
section#case #gallery.ps_area .main-area {
width: 100%;
}
}
section#case #gallery.ps_area .main-area .case-images {
position: relative;
}
@media (max-width: 991px) {
section#case #gallery.ps_area .main-area .case-images {
margin-bottom: 4%;
}
}
section#case #gallery.ps_area .main-area .case-images a {
display: block;
overflow: hidden;
padding-top: 65%;
margin: 0;
}
@media (max-width: 1300px) {
section#case #gallery.ps_area .main-area .case-images a {
padding-top: 75%;
}
}
@media (max-width: 1200px) {
section#case #gallery.ps_area .main-area .case-images a {
padding-top: 85%;
}
}
@media (max-width: 991px) {
section#case #gallery.ps_area .main-area .case-images a {
padding-top: 50%;
}
}
section#case #gallery.ps_area .main-area .case-images img {
-webkit-transition: -webkit-transform 2s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: -webkit-transform 2s cubic-bezier(0.215, 0.61, 0.355, 1);
-o-transition: transform 2s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: transform 2s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: transform 2s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 2s cubic-bezier(0.215, 0.61, 0.355, 1);
-webkit-transform: scale(1) rotate(0.0001deg);
-ms-transform: scale(1) rotate(0.0001deg);
transform: scale(1) rotate(0.0001deg);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
font-family: "object-fit: cover;";
}
section#case #gallery.ps_area .main-area .case-images:hover img {
-webkit-transition-duration: 10s;
-o-transition-duration: 10s;
transition-duration: 10s;
-webkit-transform: scale(1.06) rotate(0.01deg);
-ms-transform: scale(1.06) rotate(0.01deg);
transform: scale(1.06) rotate(0.01deg);
}
section#case #gallery.ps_area .sub-area {
width: 52%;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
-moz-box-pack: justify;
justify-content: space-between;
}
@media (max-width: 991px) {
section#case #gallery.ps_area .sub-area {
width: 100%;
}
}
section#case #gallery.ps_area .sub-area .case-images {
width: 48%;
}
section#case #gallery.ps_area .sub-area .case-images a {
display: block;
position: relative;
overflow: hidden;
padding-top: 60%;
margin: 0;
}
section#case #gallery.ps_area .sub-area .case-images img {
-webkit-transition: -webkit-transform 2s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: -webkit-transform 2s cubic-bezier(0.215, 0.61, 0.355, 1);
-o-transition: transform 2s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: transform 2s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: transform 2s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 2s cubic-bezier(0.215, 0.61, 0.355, 1);
-webkit-transform: scale(1) rotate(0.0001deg);
-ms-transform: scale(1) rotate(0.0001deg);
transform: scale(1) rotate(0.0001deg);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
font-family: "object-fit: cover;";
}
section#case #gallery.ps_area .sub-area .case-images:hover img {
-webkit-transition-duration: 10s;
-o-transition-duration: 10s;
transition-duration: 10s;
-webkit-transform: scale(1.06) rotate(0.01deg);
-ms-transform: scale(1.06) rotate(0.01deg);
transform: scale(1.06) rotate(0.01deg);
}
section#case #gallery.ps_area .sub-area .text {
margin-top: 3%;
}
section#case #gallery.ps_area .sub-area .text h3 {
padding-bottom: 1rem;
margin-bottom: 1rem;
border-bottom: solid;
}
section#case #gallery.ps_area .sub-area .text p.link-btn {
width: 100%;
margin-top: 2rem;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
-webkit-justify-content: flex-end;
-moz-box-pack: end;
justify-content: flex-end;
}
section#case #gallery.ps_area .sub-area .text p.link-btn a {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-box-align: center;
align-items: center;
background: #ddd;
padding: 0.5rem 2rem;
border-radius: 0.5rem;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
section#case #gallery.ps_area .sub-area .text p.link-btn a:before {
content: "";
display: inline-block;
width: 2rem;
height: 2rem;
background: url(//hoshizaki-shonan.co.jp/wps/wp-content/themes/hoshizaki-shonan/img/click_off.png);
background-size: 2rem;
background-repeat: no-repeat;
margin-right: 1rem;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
section#case #gallery.ps_area .sub-area .text p.link-btn a:hover {
background: #00a1e9;
color: #fff;
}
section#case #gallery.ps_area .sub-area .text p.link-btn a:hover:before {
content: "";
display: inline-block;
width: 2rem;
height: 2rem;
background: url(//hoshizaki-shonan.co.jp/wps/wp-content/themes/hoshizaki-shonan/img/click_on.png);
background-size: 2rem;
background-repeat: no-repeat;
margin-right: 0.5rem;
}
section#case #gallery.ps_area a:hover {
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
cursor: zoom-in;
}
section#case .no-display {
display: none;
}
section#case .section_inner {
margin: 0 10%;
padding: 5rem 0;
}
@media (max-width: 767px) {
section#case .section_inner {
margin: 0;
padding: 5rem 3rem;
}
}
@media (max-width: 480px) {
section#case .section_inner {
padding: 5rem 1rem;
}
}
section#afterservice {
background: #fff;
}
section#afterservice .section_inner {
margin: 0 10%;
padding: 5rem 0;
}
@media (max-width: 767px) {
section#afterservice .section_inner {
margin: 0;
padding: 5rem 3rem;
}
}
@media (max-width: 480px) {
section#afterservice .section_inner {
padding: 5rem 1rem;
}
}
section#afterservice .section_inner .service_box {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-pack: distribute;
-webkit-justify-content: space-around;
justify-content: space-around;
}
section#afterservice .section_inner .service_box .box {
width: 46%;
position: relative;
margin-bottom: 2%;
}
@media (max-width: 991px) {
section#afterservice .section_inner .service_box .box {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-box-align: center;
align-items: center;
margin-bottom: 8%;
}
}
@media (max-width: 767px) {
section#afterservice .section_inner .service_box .box {
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
margin-bottom: 4%;
}
}
section#afterservice .section_inner .service_box .box .box_head {
position: relative;
overflow: hidden;
padding-top: 50%;
margin: 0;
}
@media (max-width: 991px) {
section#afterservice .section_inner .service_box .box .box_head {
padding-top: 40%;
width: 30rem;
}
}
@media (max-width: 767px) {
section#afterservice .section_inner .service_box .box .box_head {
width: 100%;
}
}
@media (max-width: 480px) {
section#afterservice .section_inner .service_box .box .box_head {
padding-top: 60%;
}
}
section#afterservice .section_inner .service_box .box .box_head img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
font-family: "object-fit: cover;";
}
section#afterservice .section_inner .service_box .box .box_body {
background: rgba(255, 255, 255, 0.8);
border: solid 1px #00a1e9;
padding: 3rem 2rem;
position: relative;
top: -5rem;
margin: 0 10px;
border-radius: 10px;
}
@media (max-width: 991px) {
section#afterservice .section_inner .service_box .box .box_body {
left: -1rem;
width: calc(100% - 30rem);
top: 0;
margin: 0;
}
}
@media (max-width: 767px) {
section#afterservice .section_inner .service_box .box .box_body {
width: 100%;
left: 0;
top: -3rem;
margin: 0 1rem;
}
}
@media (max-width: 767px) {
section#afterservice .section_inner .service_box .box .box_body {
margin: 0 0.5rem;
}
}
section#afterservice .section_inner .service_box .box .box_body .title {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-moz-box-orient: vertical;
-moz-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
z-index: 1;
}
section#afterservice .section_inner .service_box .box .box_body .title:after {
content: '';
width: 150px;
height: 2px;
margin: 1rem auto 0;
display: block;
top: 50px;
background: -webkit-gradient(linear, left top, right top, from(#03A9F4), to(#3F51B5));
background: -webkit-linear-gradient(left, #03A9F4, #3F51B5);
background: -o-linear-gradient(left, #03A9F4, #3F51B5);
background: linear-gradient(90deg, #03A9F4, #3F51B5);
}
section#afterservice .section_inner .service_box .box .box_body .title span {
color: #000;
font-size: 2.5rem;
font-weight: 700;
text-align: center;
}
@media (max-width: 767px) {
section#afterservice .section_inner .service_box .box .box_body .title span {
font-size: 2rem;
}
}
@media (max-width: 480px) {
section#afterservice .section_inner .service_box .box .box_body .title span {
font-size: 1.8rem;
}
}
section#afterservice .section_inner .service_box .box .box_body p {
margin-top: 2rem;
}
@media (max-width: 767px) {
section#afterservice .section_inner .service_box .box .box_body p {
font-size: 1.4rem;
}
}
section#afterservice .section_inner .hoshu {
margin-top: -3rem;
margin-bottom: 3rem;
}
section#afterservice .section_inner .hoshu .title-box {
width: 100%;
text-align: center;
margin-bottom: 5rem;
}
section#afterservice .section_inner .hoshu h2:after {
content: '';
width: 150px;
height: 2px;
margin: 20px auto 0;
display: block;
top: 50px;
background: -webkit-gradient(linear, left top, right top, from(#03A9F4), to(#3F51B5));
background: -webkit-linear-gradient(left, #03A9F4, #3F51B5);
background: -o-linear-gradient(left, #03A9F4, #3F51B5);
background: linear-gradient(90deg, #03A9F4, #3F51B5);
}
@media (max-width: 640px) {
section#afterservice .section_inner .hoshu h2 {
font-size: 2.8rem;
}
}
@media (max-width: 480px) {
section#afterservice .section_inner .hoshu h2 {
font-size: 2rem;
width: 100%;
padding: 1rem 0rem calc(1rem + 10px);
}
}
section#afterservice .section_inner .hoshu .sub_read { padding: 2rem 3rem 3rem;
margin-bottom: 8rem;
font-size: 2rem;
background: #fff;
border: solid #ddd;
-webkit-box-shadow: 1rem 1rem #ddd;
box-shadow: 1rem 1rem #ddd;
}
@media (max-width: 480px) {
section#afterservice .section_inner .hoshu .sub_read {
padding: 2rem 1rem;
font-size: 1.6rem;
}
}
section#afterservice .section_inner .hoshu .sub_read h3 {
text-align: center;
color: #04a0e9;
margin-bottom: 1rem;
font-size: 2.5rem;
}
@media (max-width: 767px) {
section#afterservice .section_inner .hoshu .sub_read h3 {
font-size: 2rem;
}
}
@media (max-width: 480px) {
section#afterservice .section_inner .hoshu .sub_read h3 {
font-size: 1.8rem;
}
}
section#afterservice .section_inner .hoshu .contents {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
-moz-box-pack: justify;
justify-content: space-between;
}
section#afterservice .section_inner .hoshu .contents .point {
width: 48%;
background: #c9e4f0;
padding: 2rem;
border-radius: 1rem;
}
section#afterservice .section_inner .hoshu .contents .point h3 {
text-align: center;
color: #136083;
font-size: 2.5rem;
border-bottom: dashed 1px #136083;
padding-bottom: 1rem;
margin-bottom: 1rem;
}
@media (max-width: 767px) {
section#afterservice .section_inner .hoshu .contents .point h3 {
font-size: 2rem;
}
}
@media (max-width: 480px) {
section#afterservice .section_inner .hoshu .contents .point h3 {
font-size: 1.8rem;
}
}
section#afterservice .section_inner .hoshu .contents .point p {
color: #136083;
font-size: 2rem;
font-weight: 500;
}
@media (max-width: 767px) {
section#afterservice .section_inner .hoshu .contents .point p {
font-size: 1.8rem;
}
}
@media (max-width: 480px) {
section#afterservice .section_inner .hoshu .contents .point p {
font-size: 1.6rem;
}
}
section#afterservice .section_inner .hoshu .contents .point h4 {
background: #fff;
margin-top: 1rem;
padding: 1rem;
color: #04a0e9;
font-size: 2rem;
}
@media (max-width: 767px) {
section#afterservice .section_inner .hoshu .contents .point h4 {
font-size: 1.8rem;
}
}
@media (max-width: 480px) {
section#afterservice .section_inner .hoshu .contents .point h4 {
font-size: 1.6rem;
}
}
section#afterservice .section_inner .hoshu .contents.double {
margin-bottom: 5rem;
}
@media (max-width: 1200px) {
section#afterservice .section_inner .hoshu .contents.double .point {
width: 100%;
}
section#afterservice .section_inner .hoshu .contents.double .point:first-child {
margin-bottom: 5rem;
}
}
section#afterservice .section_inner .hoshu .contents.single {
background: #c9e4f0;
border-radius: 1rem;
}
section#afterservice .section_inner .hoshu .contents.single .point, section#afterservice .section_inner .hoshu .contents.single .patterns {
width: 48%;
background: #c9e4f0;
}
section#afterservice .section_inner .hoshu .contents.single .point {
border-top-left-radius: 1rem;
border-bottom-left-radius: 1rem;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
@media (max-width: 1600px) {
section#afterservice .section_inner .hoshu .contents.single .point {
width: calc(96% - 61rem);
}
}
@media (max-width: 1400px) {
section#afterservice .section_inner .hoshu .contents.single .point {
width: calc(100% - 61rem);
}
}
@media (max-width: 1200px) {
section#afterservice .section_inner .hoshu .contents.single .point {
width: 100%;
border-radius: 1rem;
}
}
section#afterservice .section_inner .hoshu .contents.single .patterns {
padding: 2rem;
border-top-right-radius: 1rem;
border-bottom-right-radius: 1rem;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
@media (max-width: 1600px) {
section#afterservice .section_inner .hoshu .contents.single .patterns {
width: 61rem;
}
}
@media (max-width: 1200px) {
section#afterservice .section_inner .hoshu .contents.single .patterns {
width: 100%;
border-radius: 1rem;
}
}
section#afterservice .section_inner .hoshu .contents.single .patterns .pattern {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
section#afterservice .section_inner .hoshu .contents.single .patterns .pattern h3 {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-box-align: center;
align-items: center;
width: 100%;
margin-bottom: 1rem;
color: #ae0c00;
}
section#afterservice .section_inner .hoshu .contents.single .patterns .pattern h3 span {
width: 0;
height: 0;
border-style: solid;
border-width: 10px 0 10px 20px;
margin-right: 1rem;
border-color: transparent transparent transparent #ae0c00;
}
section#afterservice .section_inner .hoshu .contents.single .patterns .pattern .process {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
section#afterservice .section_inner .hoshu .contents.single .patterns .pattern .process p {
background: #009688;
color: #fff;
border-radius: 0.5rem;
padding: 0.5rem 1rem;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-right: 3.2rem;
margin-bottom: 1rem;
position: relative;
}
section#afterservice .section_inner .hoshu .contents.single .patterns .pattern .process p::before {
content: '';
width: 12px;
height: 12px;
border: 0px;
border-top: solid 2px #136083;
border-right: solid 2px #136083;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
right: -25px;
}
section#afterservice .section_inner .hoshu .contents.single .patterns .pattern .process p::after {
position: absolute;
content: "";
height: 2px;
width: 25px;
background: #136083;
display: block;
right: -25px;
}
section#afterservice .section_inner .hoshu .contents.single .patterns .pattern .process p:first-child {
background: #ae0e01;
}
section#afterservice .section_inner .hoshu .contents.single .patterns .pattern .process p:last-child {
margin-right: 0;
}
section#afterservice .section_inner .hoshu .contents.single .patterns .pattern .process p:last-child::before, section#afterservice .section_inner .hoshu .contents.single .patterns .pattern .process p:last-child::after {
content: none;
}
section#afterservice .section_inner .hoshu .contents.single .patterns .pattern:first-child {
margin-bottom: 3rem;
}
section#afterservice .section_inner .hoshu .contents.single .patterns .pattern:first-child .process p:nth-child(3), section#afterservice .section_inner .hoshu .contents.single .patterns .pattern:first-child .process p:last-child {
background: #d57f00;
}
section#afterservice .section_inner .support_box {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
justify-content: center;
margin-bottom: 3rem;
}
section#afterservice .section_inner .support_box .title-box {
width: 100%;
text-align: center;
margin-bottom: 5rem;
}
section#afterservice .section_inner .support_box h2:after {
content: '';
width: 150px;
height: 2px;
margin: 20px auto 0;
display: block;
top: 50px;
background: -webkit-gradient(linear, left top, right top, from(#03A9F4), to(#3F51B5));
background: -webkit-linear-gradient(left, #03A9F4, #3F51B5);
background: -o-linear-gradient(left, #03A9F4, #3F51B5);
background: linear-gradient(90deg, #03A9F4, #3F51B5);
}
@media (max-width: 640px) {
section#afterservice .section_inner .support_box h2 {
font-size: 2.8rem;
}
}
@media (max-width: 480px) {
section#afterservice .section_inner .support_box h2 {
font-size: 2rem;
width: 100%;
padding: 1rem 0rem calc(1rem + 10px);
}
}
section .after_case_box {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
justify-content: center;
margin-bottom: 3rem;
}
section .after_case_box .title-box {
width: 100%;
text-align: center;
margin-bottom: 5rem;
}
section .after_case_box h2:after {
content: '';
width: 150px;
height: 2px;
margin: 20px auto 0;
display: block;
top: 50px;
background: -webkit-gradient(linear, left top, right top, from(#03A9F4), to(#3F51B5));
background: -webkit-linear-gradient(left, #03A9F4, #3F51B5);
background: -o-linear-gradient(left, #03A9F4, #3F51B5);
background: linear-gradient(90deg, #03A9F4, #3F51B5);
}
@media (max-width: 640px) {
section .after_case_box h2 {
font-size: 2.8rem;
}
}
@media (max-width: 480px) {
section .after_case_box h2 {
font-size: 2rem;
width: 100%;
padding: 1rem 0rem calc(1rem + 10px);
}
}
section .after_case_box .sub_read { padding: 2rem 3rem 3rem;
margin-bottom: 8rem;
font-size: 2rem;
background: #fff;
border: solid #ddd;
-webkit-box-shadow: 1rem 1rem #ddd;
box-shadow: 1rem 1rem #ddd;
}
@media (max-width: 480px) {
section .after_case_box .sub_read {
padding: 2rem 1rem;
font-size: 1.6rem;
}
}
section .after_case_box .sub_read h3 {
text-align: center;
color: #04a0e9;
margin-bottom: 1rem;
font-size: 2.5rem;
}
@media (max-width: 767px) {
section .after_case_box .sub_read h3 {
font-size: 2rem;
}
}
@media (max-width: 480px) {
section .after_case_box .sub_read h3 {
font-size: 1.8rem;
}
}
section .after_case_box .case-list {
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 5rem 4%;
padding: 0 5%;
}
section .after_case_box .case-list a.product-box {
width: 48%;
-webkit-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
@media (max-width: 640px) {
section .after_case_box .case-list a.product-box {
width: 100%;
}
}
section .after_case_box .case-list a.product-box .product {
-webkit-box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
border-radius: 1rem;
background: #fff;
display: block;
overflow: hidden;
}
section .after_case_box .case-list a.product-box .product .img-area {
position: relative;
overflow: hidden;
padding-top: 90%;
margin: 0;
background: #fff;
}
section .after_case_box .case-list a.product-box .product .img-area img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
font-family: "object-fit: cover;";
}
section .after_case_box .case-list a.product-box .product .text-area {
position: relative;
width: 100%;
margin: auto;
background: #ddd;
padding: 1.5rem;
overflow: hidden;
font-size: 120%;
font-weight: 600;
text-align: center;
}
section .after_case_box .case-list a.product-box:hover {
opacity: 0.8;
}
section#test-kitchen {
margin-bottom: 10rem;
}
@media (max-width: 1200px) {
section#test-kitchen .key-area img {
height: 45vw;
}
}
section#test-kitchen .area02 {
background: #02a1e9;
background: -webkit-linear-gradient(to top, #60ceff, #02a1e9);
background: -webkit-gradient(linear, left bottom, left top, from(#60ceff), to(#02a1e9));
background: -webkit-linear-gradient(bottom, #60ceff, #02a1e9);
background: -o-linear-gradient(bottom, #60ceff, #02a1e9);
background: linear-gradient(to top, #60ceff, #02a1e9);
border-top-right-radius: 20rem;
border-bottom-left-radius: 20rem;
}
@media (max-width: 991px) {
section#test-kitchen .area02 {
border-top-right-radius: 15rem;
border-bottom-left-radius: 15rem;
}
}
@media (max-width: 767px) {
section#test-kitchen .area02 {
border-top-right-radius: 10rem;
border-bottom-left-radius: 10rem;
}
}
@media (max-width: 480px) {
section#test-kitchen .area02 {
border-top-right-radius: 8rem;
border-bottom-left-radius: 8rem;
}
}
section#test-kitchen .area02 .area-inner {
padding: 8rem 0;
margin: 0 10%;
}
@media (max-width: 767px) {
section#test-kitchen .area02 .area-inner {
margin: auto;
padding: 8rem 3rem;
}
}
@media (max-width: 480px) {
section#test-kitchen .area02 .area-inner {
padding: 8rem 2rem;
}
}
section#test-kitchen .area02 .area-inner h2 {
text-align: center;
color: #fff;
margin-bottom: 8rem;
}
section#test-kitchen .area02 .area-inner h2:after {
content: '';
width: 150px;
height: 2px;
margin: 20px auto 0;
display: block;
top: 5rem;
background: -webkit-gradient(linear, left top, right top, from(#fff), to(#FFEB3B));
background: -webkit-linear-gradient(left, #fff, #FFEB3B);
background: -o-linear-gradient(left, #fff, #FFEB3B);
background: linear-gradient(90deg, #fff, #FFEB3B);
}
section#test-kitchen .area02 .area-inner h2 img {
width: 3.5rem;
height: auto;
margin-right: 1rem;
}
section#test-kitchen .area02 .area-inner h2 img:last-child {
margin-left: 1rem;
margin-right: 0;
}
section#test-kitchen .area02 .area-inner .text-box {
max-width: 1000px;
margin: 3rem auto;
border: solid 1px #fff;
border-radius: 1rem;
padding: 5rem;
color: #fff;
}
@media (max-width: 767px) {
section#test-kitchen .area02 .area-inner .text-box {
padding: 3rem;
}
}
@media (max-width: 480px) {
section#test-kitchen .area02 .area-inner .text-box {
padding: 2rem;
}
}
section#test-kitchen .area02 .area-inner .events {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-pack: distribute;
-webkit-justify-content: space-around;
justify-content: space-around;
}
section#test-kitchen .area02 .area-inner .events p.preparation {
text-align: center;
font-size: 3rem;
margin: 4rem auto 0;
font-weight: 300;
color: #fff;
border-top: solid 1px;
border-bottom: solid 1px;
padding: 4rem;
}
section#test-kitchen .area02 .area-inner .events article {
width: 32%;
}
@media (max-width: 1200px) {
section#test-kitchen .area02 .area-inner .events article {
width: 100%;
}
}
@media (max-width: 1200px) {
section#test-kitchen .area02 .area-inner .events article .entry-content a.prf-link {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
}
@media (max-width: 1200px) {
section#test-kitchen .area02 .area-inner .events article .entry-content a.prf-link .img-area {
width: 40%;
}
}
@media (max-width: 480px) {
section#test-kitchen .area02 .area-inner .events article .entry-content a.prf-link .img-area {
width: 100%;
}
}
section#test-kitchen .area02 .area-inner .events article .entry-content a.prf-link .img-area .img-wrap {
border-radius: 1rem;
position: relative;
overflow: hidden;
padding-top: 70%;
margin: 0;
}
section#test-kitchen .area02 .area-inner .events article .entry-content a.prf-link .img-area .img-wrap img {
-webkit-transition: -webkit-transform 2s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: -webkit-transform 2s cubic-bezier(0.215, 0.61, 0.355, 1);
-o-transition: transform 2s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: transform 2s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: transform 2s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 2s cubic-bezier(0.215, 0.61, 0.355, 1);
-webkit-transform: scale(1) rotate(0.0001deg);
-ms-transform: scale(1) rotate(0.0001deg);
transform: scale(1) rotate(0.0001deg);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
font-family: "object-fit: contain;";
}
section#test-kitchen .area02 .area-inner .events article .entry-content a.prf-link .img-area .img-wrap p.noimg {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #0fa2ea;
}
section#test-kitchen .area02 .area-inner .events article .entry-content a.prf-link .img-area .img-wrap p.noimg span {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
height: 100%;
font-size: 2rem;
color: #fff;
opacity: 0.5;
}
section#test-kitchen .area02 .area-inner .events article .entry-content a.prf-link .text-area {
width: 90%;
margin: auto;
padding: 1.5rem 2rem;
border-radius: 1rem;
position: relative;
top: 0;
}
@media (max-width: 1200px) {
section#test-kitchen .area02 .area-inner .events article .entry-content a.prf-link .text-area {
width: 60%;
}
}
@media (max-width: 480px) {
section#test-kitchen .area02 .area-inner .events article .entry-content a.prf-link .text-area {
width: 90%;
top: -0.5rem;
-webkit-box-shadow: 0.2rem 0.2rem 1rem rgba(0, 0, 0, 0.2), inset 0 0 3rem white;
box-shadow: 0.2rem 0.2rem 1rem rgba(0, 0, 0, 0.2), inset 0 0 3rem white;
}
}
section#test-kitchen .area02 .area-inner .events article .entry-content a.prf-link .text-area h3 {
margin: 0 0 1rem;
}
section#test-kitchen .area02 .area-inner .events article .entry-content a.prf-link:hover .img-area .img-wrap img {
-webkit-transition-duration: 10s;
-o-transition-duration: 10s;
transition-duration: 10s;
-webkit-transform: scale(1.06) rotate(0.01deg);
-ms-transform: scale(1.06) rotate(0.01deg);
transform: scale(1.06) rotate(0.01deg);
}
section#test-kitchen .area02 .area-inner .events article .entry-content a.prf-link:hover .text-area {
background: #fff;
top: -1rem;
-webkit-box-shadow: 0.5rem 0.5rem 2rem rgba(0, 0, 0, 0.3), inset 0 0 5rem white;
box-shadow: 0.5rem 0.5rem 2rem rgba(0, 0, 0, 0.3), inset 0 0 5rem white;
}
section#product-list h2.test-kitchens {
text-align: center;
margin-bottom: 8rem;
}
section#product-list h2.test-kitchens:after {
content: '';
width: 150px;
height: 2px;
margin: 20px auto 0;
display: block;
top: 5rem;
background: -webkit-gradient(linear, left top, right top, from(#03A9F4), to(#3F51B5));
background: -webkit-linear-gradient(left, #03A9F4, #3F51B5);
background: -o-linear-gradient(left, #03A9F4, #3F51B5);
background: linear-gradient(90deg, #03A9F4, #3F51B5);
}
section#product-list h2.test-kitchens img {
position: relative;
bottom: -1rem;
}
section#product-list h2.test-kitchens img.left {
left: -1rem;
}
section#product-list h2.test-kitchens img.right {
right: -1rem;
}
section#product-list .product-area {
margin: 0 10% 5%;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
@media (max-width: 991px) {
section#product-list .product-area {
margin: 0 8% 5%;
}
}
@media (max-width: 767px) {
section#product-list .product-area {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
-moz-box-pack: justify;
justify-content: space-between;
margin: 0 4% 3%;
}
}
section#product-list .product-area .product {
width: 32%;
margin-right: 2%;
margin-bottom: 2%;
-webkit-box-shadow: 0.5rem 0.5rem #ccd8dd;
box-shadow: 0.5rem 0.5rem #ccd8dd;
background: #fff;
}
@media (max-width: 767px) {
section#product-list .product-area .product {
width: 48%;
margin-right: 0;
margin-bottom: 5%;
}
}
@media (max-width: 480px) {
section#product-list .product-area .product {
width: 100%;
margin-bottom: 10%;
}
}
section#product-list .product-area .product:nth-child(3n) {
margin-right: 0;
}
section#product-list .product-area .product .img-area .img-wrap {
position: relative;
overflow: hidden;
padding-top: 90%;
margin: 0;
background: #fff;
}
section#product-list .product-area .product .img-area .img-wrap img {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 3rem 3rem 1rem;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
font-family: "object-fit: contain;";
}
section#product-list .product-area .product .text-area {
padding: 1rem;
background: #fff;
text-align: center;
border-top: dashed 1px #ccd8dd;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-box-align: center;
align-items: center;
}
section#offices-list h2.test-kitchens {
text-align: center;
margin-bottom: 8rem;
}
section#offices-list h2.test-kitchens:after {
content: '';
width: 150px;
height: 2px;
margin: 20px auto 0;
display: block;
top: 5rem;
background: -webkit-gradient(linear, left top, right top, from(#03A9F4), to(#3F51B5));
background: -webkit-linear-gradient(left, #03A9F4, #3F51B5);
background: -o-linear-gradient(left, #03A9F4, #3F51B5);
background: linear-gradient(90deg, #03A9F4, #3F51B5);
}
section#offices-list h2.test-kitchens img {
width: 3.5rem;
height: auto;
margin-right: 1rem;
}
section#offices-list h2.test-kitchens img:last-child {
margin-left: 1rem;
margin-right: 0;
}
@media (max-width: 480px) {
section#offices-list h2.test-kitchens {
padding: 0 2rem;
}
section#offices-list h2.test-kitchens img {
width: 3rem;
height: auto;
}
}
section#test_kitchen-list {
background: #fff;
padding: 8rem 0 1rem;
}
section#test_kitchen-list .section_inner h2.test-kitchens {
text-align: center;
margin-bottom: 8rem;
}
section#test_kitchen-list .section_inner h2.test-kitchens:after {
content: '';
width: 150px;
height: 2px;
margin: 20px auto 0;
display: block;
top: 5rem;
background: -webkit-gradient(linear, left top, right top, from(#03A9F4), to(#3F51B5));
background: -webkit-linear-gradient(left, #03A9F4, #3F51B5);
background: -o-linear-gradient(left, #03A9F4, #3F51B5);
background: linear-gradient(90deg, #03A9F4, #3F51B5);
}
section#test_kitchen-list .section_inner h2.test-kitchens img {
width: 3.5rem;
height: auto;
margin-right: 1rem;
}
section#test_kitchen-list .section_inner h2.test-kitchens img:last-child {
margin-left: 1rem;
margin-right: 0;
}
@media (max-width: 480px) {
section#test_kitchen-list .section_inner h2.test-kitchens {
padding: 0 2rem;
}
section#test_kitchen-list .section_inner h2.test-kitchens img {
width: 3rem;
height: auto;
}
}
section#test_kitchen-list .section_inner .list {
margin: 0 auto 5%;
padding: 0 5%;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
max-width: 1100px;
}
@media (max-width: 767px) {
section#test_kitchen-list .section_inner .list {
margin: 0 auto 5%;
padding: 0 3rem;
max-width: 550px;
}
}
@media (max-width: 480px) {
section#test_kitchen-list .section_inner .list {
padding: 0 2rem;
}
}
section#test_kitchen-list .section_inner .list .detales.test-kitchen {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
border: solid 1px #ddd;
position: relative;
margin-bottom: 3rem;
border-radius: 1rem;
overflow: hidden;
width: 100%;
}
@media (max-width: 767px) {
section#test_kitchen-list .section_inner .list .detales.test-kitchen {
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
}
section#test_kitchen-list .section_inner .list .detales.test-kitchen .office-img {
width: 100%;
max-width: 350px;
}
@media (max-width: 767px) {
section#test_kitchen-list .section_inner .list .detales.test-kitchen .office-img {
max-width: 100%;
}
}
section#test_kitchen-list .section_inner .list .detales.test-kitchen .office-img figure {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
margin: 0;
width: 100%;
padding-top: 70%;
position: relative;
}
section#test_kitchen-list .section_inner .list .detales.test-kitchen .office-img figure img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
font-family: "object-fit: cover;";
}
section#test_kitchen-list .section_inner .list .detales.test-kitchen .office-info {
width: calc(100% - 350px);
position: relative;
}
@media (max-width: 767px) {
section#test_kitchen-list .section_inner .list .detales.test-kitchen .office-info {
width: 100%;
}
}
section#test_kitchen-list .section_inner .list .detales.test-kitchen .office-info ul#info li {
padding: 1rem 2rem;
}
section#test_kitchen-list .section_inner .list .detales.test-kitchen .office-info ul#info li p span {
padding-right: 10px;
}
section#test_kitchen-list .section_inner .list .detales.test-kitchen .office-info ul#info li.name {
background: #efefef;
width: 100%;
font-weight: 600;
}
section#test_kitchen-list .section_inner .list .detales.test-kitchen .office-info ul#adderess li {
padding: 1rem 2rem;
}
section#test_kitchen-list .section_inner .list .detales.test-kitchen .office-info p.map-link {
position: absolute;
right: 5px;
bottom: 5px;
}
@media (max-width: 767px) {
section#test_kitchen-list .section_inner .list .detales.test-kitchen .office-info p.map-link {
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-webkit-justify-content: end;
-moz-box-pack: end;
-ms-flex-pack: end;
justify-content: end;
}
}
section#test_kitchen-list .section_inner .list .detales.test-kitchen .office-info p.map-link a {
background: #f2f2f2;
-webkit-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
display: block;
width: 100px;
height: 50px;
text-align: center;
border-radius: 6px;
}
section#test_kitchen-list .section_inner .list .detales.test-kitchen .office-info p.map-link a span::before {
color: #02a1e9;
padding: 1rem;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
height: 100%;
content: "MAP";
-webkit-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
background-position: center;
margin: auto;
width: 100px;
}
section#test_kitchen-list .section_inner .list .detales.test-kitchen .office-info p.map-link a:hover {
background: #02a1e9;
}
section#test_kitchen-list .section_inner .list .detales.test-kitchen .office-info p.map-link a:hover span:before {
color: #fff;
content: "";
background: url(//hoshizaki-shonan.co.jp/wps/wp-content/themes/hoshizaki-shonan/img/map-w.png);
background-size: 3.5rem;
background-repeat: no-repeat;
background-position: center;
}
section#corporate-info section .section_inner {
margin: 0 8%;
padding: 5rem 0;
}
@media (max-width: 480px) {
section#corporate-info section .section_inner {
margin: 0 4%;
}
}
@media (max-width: 360px) {
section#corporate-info section .section_inner {
margin: 0 2%;
}
}
section#corporate-info section .section_inner .title-box {
text-align: center;
margin-bottom: 5rem;
}
section#corporate-info section .section_inner .title-box h2::after {
content: '';
width: 150px;
height: 2px;
margin: 20px auto 0;
display: block;
top: 50px;
background: -webkit-gradient(linear, left top, right top, from(#03A9F4), to(#3F51B5));
background: -webkit-linear-gradient(left, #03A9F4, #3F51B5);
background: -o-linear-gradient(left, #03A9F4, #3F51B5);
background: linear-gradient(90deg, #03A9F4, #3F51B5);
}
section#corporate-info #messages {
display: none;
background: #fff;
}
section#corporate-info #philosophy {
background: -webkit-linear-gradient(top, white 0%, rgba(255, 255, 255, 0) 100%);
background: -webkit-gradient(linear, left top, left bottom, from(white), to(rgba(255, 255, 255, 0)));
background: -o-linear-gradient(top, white 0%, rgba(255, 255, 255, 0) 100%);
background: linear-gradient(to bottom, white 0%, rgba(255, 255, 255, 0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 );
}
section#corporate-info #philosophy .panel-box {
width: 90rem;
margin: 5rem auto 0;
}
@media (max-width: 991px) {
section#corporate-info #philosophy .panel-box {
width: 100%;
}
}
section#corporate-info #philosophy .panel-box .policy_panel {
background: #02a1e9;
padding: 2rem 3rem 10rem;
margin-bottom: 15rem;
position: relative;
width: 80rem;
}
@media (max-width: 991px) {
section#corporate-info #philosophy .panel-box .policy_panel {
width: 100%;
padding: 2rem 3rem;
}
}
@media (max-width: 480px) {
section#corporate-info #philosophy .panel-box .policy_panel {
padding: 1rem;
}
}
section#corporate-info #philosophy .panel-box .policy_panel h3 {
color: #fff;
font-size: 3rem;
}
@media (max-width: 360px) {
section#corporate-info #philosophy .panel-box .policy_panel h3 {
font-size: 2.3rem;
}
}
section#corporate-info #philosophy .panel-box .policy_panel .text-box {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
-moz-box-pack: justify;
justify-content: space-between;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
position: absolute;
top: 6rem;
right: -10rem;
left: 5rem;
}
@media (max-width: 991px) {
section#corporate-info #philosophy .panel-box .policy_panel .text-box {
position: relative;
left: 0;
top: 0;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
}
section#corporate-info #philosophy .panel-box .policy_panel .text-box .text {
background: #fff;
border: solid #00a1e9;
border-radius: 1rem;
padding: 2rem;
margin: 2rem;
width: 100%;
}
@media (max-width: 480px) {
section#corporate-info #philosophy .panel-box .policy_panel .text-box .text {
margin: 1rem 0;
}
}
section#corporate-info #philosophy .panel-box .policy_panel .text-box .text p.title {
text-align: center;
color: #00a1e9;
font-size: 2rem;
font-weight: 700;
margin-bottom: 0rem;
}
section#corporate-info #philosophy .panel-box .policy_panel .sub-title {
position: absolute;
width: 100%;
bottom: -10rem;
right: -10rem;
left: 7rem;
}
@media (max-width: 991px) {
section#corporate-info #philosophy .panel-box .policy_panel .sub-title {
right: 0;
left: 0;
}
}
section#corporate-info #philosophy .panel-box .policy_panel .sub-title h4 {
font-size: 3rem;
text-align: center;
color: #00a1e9;
}
@media (max-width: 480px) {
section#corporate-info #philosophy .panel-box .policy_panel .sub-title h4 {
font-size: 2.5rem;
}
}
@media (max-width: 360px) {
section#corporate-info #philosophy .panel-box .policy_panel .sub-title h4 {
font-size: 2.3rem;
}
}
@media (max-width: 320px) {
section#corporate-info #philosophy .panel-box .policy_panel .sub-title h4 {
font-size: 2rem;
}
}
section#corporate-info #philosophy .panel-box .policy_panel:last-child {
margin-bottom: 31rem;
}
@media (max-width: 991px) {
section#corporate-info #philosophy .panel-box .policy_panel:last-child {
margin-bottom: 1rem;
}
}
section#corporate-info #philosophy .panel-box .policy_panel:last-child .text p {
margin-bottom: 1rem;
}
section#corporate-info #philosophy .panel-box .policy_panel:last-child .text p.title {
text-align: left;
margin-bottom: 0rem;
}
section#corporate-info #group {
background: #fff;
}
section#corporate-info #group .gr-content {
text-align: center;
}
section#corporate-info #group .gr-content p {
width: 100%;
max-width: 750px;
margin: auto;
text-align: right;
}
section#corporate-info #profile .pr-content {
width: 90rem;
margin: auto;
}
@media (max-width: 1200px) {
section#corporate-info #profile .pr-content {
width: 80rem;
}
}
@media (max-width: 991px) {
section#corporate-info #profile .pr-content {
width: 100%;
}
}
section#corporate-info #profile .pr-content ul.profile {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: baseline;
-ms-flex-align: baseline;
-webkit-align-items: baseline;
-moz-box-align: baseline;
align-items: baseline;
border-bottom: dotted 1px #cfcfcf;
}
section#corporate-info #profile .pr-content ul.profile:last-child {
border-bottom: none;
}
section#corporate-info #profile .pr-content ul.profile > li {
padding: 1rem 0;
}
section#corporate-info #profile .pr-content ul.profile li:first-child {
width: 140px;
}
@media (max-width: 640px) {
section#corporate-info #profile .pr-content ul.profile li:first-child {
width: 100%;
padding: 1rem 0 0;
}
}
section#corporate-info #profile .pr-content ul.profile li:last-child {
width: calc(100% - 140px);
}
@media (max-width: 640px) {
section#corporate-info #profile .pr-content ul.profile li:last-child {
width: 100%;
padding: 0 0 1rem;
}
}
section#corporate-info #profile .pr-content ul.profile li:last-child p {
padding: 0.5rem 0;
}
section#corporate-info #profile .pr-content ul.profile li:last-child p.indent {
text-indent: -2.7rem;
padding-left: 2.7rem;
}
section#corporate-info #profile .pr-content ul.profile li ul {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
margin-left: 0;
}
section#corporate-info #profile .pr-content ul.profile li ul li:first-child {
width: 130px;
}
@media (max-width: 640px) {
section#corporate-info #profile .pr-content ul.profile li ul li:first-child {
padding: 1rem 0 0;
}
}
section#corporate-info #profile .pr-content ul.profile li ul li:last-child {
width: calc(100% - 150px);
}
@media (max-width: 640px) {
section#corporate-info #profile .pr-content ul.profile li ul li:last-child {
width: calc(100% - 130px);
padding: 1rem 0 0;
}
}
section#corporate-info #history {
background: #fff;
}
section#corporate-info #history .hi-content {
width: 90rem;
margin: auto;
}
@media (max-width: 1200px) {
section#corporate-info #history .hi-content {
width: 80rem;
}
}
@media (max-width: 991px) {
section#corporate-info #history .hi-content {
width: 100%;
}
}
section#corporate-info #history .hi-content ul.history {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: baseline;
-ms-flex-align: baseline;
-webkit-align-items: baseline;
-moz-box-align: baseline;
align-items: baseline;
border-bottom: dotted 1px #cfcfcf;
}
section#corporate-info #history .hi-content ul.history:last-child {
border-bottom: none;
}
section#corporate-info #history .hi-content ul.history > li {
padding: 1rem 0;
}
section#corporate-info #history .hi-content ul.history li:first-child {
width: 180px;
}
@media (max-width: 640px) {
section#corporate-info #history .hi-content ul.history li:first-child {
width: 100%;
padding: 1rem 0 0;
}
}
section#corporate-info #history .hi-content ul.history li:last-child {
width: calc(100% - 180px);
}
@media (max-width: 640px) {
section#corporate-info #history .hi-content ul.history li:last-child {
width: 100%;
padding: 0 0 1rem;
}
}
section#corporate-info #history .hi-content ul.history li:last-child p {
padding: 0.5rem 0;
}
section#corporate-info #social-contribution .content {
width: 90rem;
margin: 0 auto 4rem;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
@media (max-width: 1200px) {
section#corporate-info #social-contribution .content {
width: 80rem;
}
}
@media (max-width: 991px) {
section#corporate-info #social-contribution .content {
width: 100%;
}
}
section#corporate-info #social-contribution .content h3 {
width: 100%;
margin-bottom: 1rem;
}
section#corporate-info #social-contribution .content img {
width: 20rem;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
font-family: "object-fit: contain;";
}
@media (max-width: 480px) {
section#corporate-info #social-contribution .content img {
width: 80%;
margin: 0 auto 1rem;
}
}
section#corporate-info #social-contribution .content .text-area {
width: calc(100% - 20rem);
padding-left: 2rem;
}
@media (max-width: 480px) {
section#corporate-info #social-contribution .content .text-area {
width: 100%;
padding-left: 0;
}
}
section#corporate-info #social-contribution p.link {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-webkit-box-align: baseline;
-ms-flex-align: baseline;
-webkit-align-items: baseline;
-moz-box-align: baseline;
align-items: baseline;
}
section#corporate-info #social-contribution p a {
padding: 1rem 0;
text-decoration: underline;
}
section#corporate-info #social-contribution p a:hover {
color: #02a1e9;
}
section#corporate-info #sdgs {
background: #fff;
}
section#corporate-info #sdgs .content {
width: 90rem;
margin: 0 auto 4rem;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
@media (max-width: 1200px) {
section#corporate-info #sdgs .content {
width: 80rem;
}
}
@media (max-width: 991px) {
section#corporate-info #sdgs .content {
width: 100%;
}
}
section#corporate-info #sdgs .content p.message {
padding: 2rem 3rem;
border: 8px solid #e9e9e9;
margin-bottom: 5rem;
}
section#corporate-info #sdgs .content .sdgs-list .sdgs {
margin-top: 8rem;
}
section#corporate-info #sdgs .content .sdgs-list .sdgs h3 {
position: relative;
padding: 0.5rem 1rem 1rem;
font-size: 3rem;
text-align: center;
background: #02a1e9;
color: #fff;
margin-bottom: 2rem;
}
@media (max-width: 640px) {
section#corporate-info #sdgs .content .sdgs-list .sdgs h3 {
font-size: 2.5rem;
}
}
@media (max-width: 480px) {
section#corporate-info #sdgs .content .sdgs-list .sdgs h3 {
font-size: 2rem;
}
}
section#corporate-info #sdgs .content .sdgs-list .sdgs .sdgs-icon {
margin-bottom: 2rem;
}
section#corporate-info #sdgs .content .sdgs-list .sdgs .sdgs-icon ul {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
justify-content: center;
}
section#corporate-info #sdgs .content .sdgs-list .sdgs .sdgs-icon ul li {
width: 25%;
text-align: center;
}
@media (max-width: 767px) {
section#corporate-info #sdgs .content .sdgs-list .sdgs .sdgs-icon ul li {
width: 35%;
}
}
@media (max-width: 640px) {
section#corporate-info #sdgs .content .sdgs-list .sdgs .sdgs-icon ul li {
width: 40%;
}
}
@media (max-width: 480px) {
section#corporate-info #sdgs .content .sdgs-list .sdgs .sdgs-icon ul li {
width: 50%;
}
}
section#corporate-info #sdgs .content .sdgs-list .sdgs .sdgs-icon ul li img {
margin: 1rem;
}
@media (max-width: 360px) {
section#corporate-info #sdgs .content .sdgs-list .sdgs .sdgs-icon ul li img {
margin: 0;
padding: 0.5rem;
}
}
section#corporate-info #sdgs .content .sdgs-list .sdgs .sdgs-body {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
section#corporate-info #sdgs .content .sdgs-list .sdgs .sdgs-body .imgarea {
width: 40%;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
}
@media (max-width: 767px) {
section#corporate-info #sdgs .content .sdgs-list .sdgs .sdgs-body .imgarea {
width: 50%;
}
}
@media (max-width: 640px) {
section#corporate-info #sdgs .content .sdgs-list .sdgs .sdgs-body .imgarea {
width: 100%;
-webkit-box-ordinal-group: 1;
-ms-flex-order: 1;
-webkit-order: 1;
-moz-box-ordinal-group: 2;
order: 1;
}
}
section#corporate-info #sdgs .content .sdgs-list .sdgs .sdgs-body .imgarea img {
width: 100%;
border: solid 1px #e9e9e9;
-o-object-fit: contain;
object-fit: contain;
font-family: "object-fit: contain;";
}
section#corporate-info #sdgs .content .sdgs-list .sdgs .sdgs-body .textarea {
width: 60%;
border: solid 1px #ddd;
border-left: none;
padding: 2rem;
background: #fafafa;
}
@media (max-width: 767px) {
section#corporate-info #sdgs .content .sdgs-list .sdgs .sdgs-body .textarea {
width: 50%;
}
}
@media (max-width: 640px) {
section#corporate-info #sdgs .content .sdgs-list .sdgs .sdgs-body .textarea {
width: 100%;
border: solid 1px #ddd;
border-bottom: none;
}
}
section#corporate-info #certification .content {
width: 90rem;
margin: auto;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-box-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
-moz-box-pack: justify;
justify-content: space-between;
}
@media (max-width: 1200px) {
section#corporate-info #certification .content {
width: 80rem;
}
}
@media (max-width: 991px) {
section#corporate-info #certification .content {
width: 100%;
}
}
section#corporate-info #certification .content .img-area {
width: 200px;
}
@media (max-width: 640px) {
section#corporate-info #certification .content .img-area {
width: 100%;
text-align: center;
}
section#corporate-info #certification .content .img-area img {
max-width: 200px;
height: auto;
}
}
section#corporate-info #certification .content .text-area {
width: calc(100% - 250px);
}
@media (max-width: 640px) {
section#corporate-info #certification .content .text-area {
width: 100%;
}
}
section#SDGs {
background: #fff;
}
section#SDGs .section_inner {
margin: 0 8%;
padding: 5rem 0;
}
@media (max-width: 480px) {
section#SDGs .section_inner {
margin: 0 4%;
}
}
@media (max-width: 360px) {
section#SDGs .section_inner {
margin: 0 2%;
}
}
section#SDGs .section_inner .title-box {
text-align: center;
margin-bottom: 5rem;
}
section#SDGs .section_inner .title-box h2::after {
content: '';
width: 150px;
height: 2px;
margin: 20px auto 0;
display: block;
top: 50px;
background: -webkit-gradient(linear, left top, right top, from(#03A9F4), to(#3F51B5));
background: -webkit-linear-gradient(left, #03A9F4, #3F51B5);
background: -o-linear-gradient(left, #03A9F4, #3F51B5);
background: linear-gradient(90deg, #03A9F4, #3F51B5);
}
section#SDGs .content {
width: 90rem;
margin: 0 auto 4rem;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
@media (max-width: 1200px) {
section#SDGs .content {
width: 80rem;
}
}
@media (max-width: 991px) {
section#SDGs .content {
width: 100%;
}
}
section#SDGs .content p.message {
padding: 2rem 3rem;
border: 8px solid #e9e9e9;
margin-bottom: 5rem;
}
section#SDGs .content .sdgs-list .sdgs {
margin-top: 8rem;
}
section#SDGs .content .sdgs-list .sdgs h3 {
position: relative;
padding: 0.5rem 1rem 1rem;
font-size: 3rem;
text-align: center;
background: #02a1e9;
color: #fff;
margin-bottom: 2rem;
}
@media (max-width: 640px) {
section#SDGs .content .sdgs-list .sdgs h3 {
font-size: 2.5rem;
}
}
@media (max-width: 480px) {
section#SDGs .content .sdgs-list .sdgs h3 {
font-size: 2rem;
}
}
section#SDGs .content .sdgs-list .sdgs .sdgs-icon {
margin-bottom: 2rem;
}
section#SDGs .content .sdgs-list .sdgs .sdgs-icon ul {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
justify-content: center;
}
section#SDGs .content .sdgs-list .sdgs .sdgs-icon ul li {
width: 25%;
text-align: center;
}
@media (max-width: 767px) {
section#SDGs .content .sdgs-list .sdgs .sdgs-icon ul li {
width: 35%;
}
}
@media (max-width: 640px) {
section#SDGs .content .sdgs-list .sdgs .sdgs-icon ul li {
width: 40%;
}
}
@media (max-width: 480px) {
section#SDGs .content .sdgs-list .sdgs .sdgs-icon ul li {
width: 50%;
}
}
section#SDGs .content .sdgs-list .sdgs .sdgs-icon ul li img {
margin: 1rem;
}
@media (max-width: 360px) {
section#SDGs .content .sdgs-list .sdgs .sdgs-icon ul li img {
margin: 0;
padding: 0.5rem;
}
}
section#SDGs .content .sdgs-list .sdgs .sdgs-body {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
section#SDGs .content .sdgs-list .sdgs .sdgs-body .imgarea {
width: 40%;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
}
@media (max-width: 767px) {
section#SDGs .content .sdgs-list .sdgs .sdgs-body .imgarea {
width: 50%;
}
}
@media (max-width: 640px) {
section#SDGs .content .sdgs-list .sdgs .sdgs-body .imgarea {
width: 100%;
-webkit-box-ordinal-group: 1;
-ms-flex-order: 1;
-webkit-order: 1;
-moz-box-ordinal-group: 2;
order: 1;
}
}
section#SDGs .content .sdgs-list .sdgs .sdgs-body .imgarea img {
width: 100%;
border: solid 1px #e9e9e9;
-o-object-fit: contain;
object-fit: contain;
font-family: "object-fit: contain;";
}
section#SDGs .content .sdgs-list .sdgs .sdgs-body .textarea {
width: 60%;
border: solid 1px #ddd;
border-left: none;
padding: 2rem;
background: #fafafa;
}
@media (max-width: 767px) {
section#SDGs .content .sdgs-list .sdgs .sdgs-body .textarea {
width: 50%;
}
}
@media (max-width: 640px) {
section#SDGs .content .sdgs-list .sdgs .sdgs-body .textarea {
width: 100%;
border: solid 1px #ddd;
border-bottom: none;
}
}
section#offices-list {
background: #fff;
padding: 8rem 0 1rem;
}
section#offices-list .section_inner .list {
margin: 0 10% 5%;
}
@media (max-width: 767px) {
section#offices-list .section_inner .list {
margin: 0 auto 5%;
padding: 0 3rem;
}
}
@media (max-width: 480px) {
section#offices-list .section_inner .list {
padding: 0 2rem;
}
}
section#offices-list .section_inner .list .detales {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
border: solid 1px #ddd;
position: relative;
margin-bottom: 3rem;
border-radius: 1rem;
overflow: hidden;
}
section#offices-list .section_inner .list .detales .office {
width: 460px;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
border-right: solid 1px #ddd;
}
@media (max-width: 1200px) {
section#offices-list .section_inner .list .detales .office {
width: 265px;
}
}
@media (max-width: 640px) {
section#offices-list .section_inner .list .detales .office {
width: calc(100% - 5rem);
}
}
section#offices-list .section_inner .list .detales .office ul {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
border-bottom: dashed 1px #ccc;
}
section#offices-list .section_inner .list .detales .office ul:last-child {
border-bottom: none;
}
section#offices-list .section_inner .list .detales .office ul li {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-box-align: center;
align-items: center;
}
section#offices-list .section_inner .list .detales .office ul li.name {
width: 265px;
padding: 2rem;
background: #efefef;
}
@media (max-width: 1200px) {
section#offices-list .section_inner .list .detales .office ul li.name {
width: 100%;
padding: 1rem 2rem;
}
}
section#offices-list .section_inner .list .detales .office ul li:last-child {
width: 190px;
padding: 2rem;
}
@media (max-width: 1200px) {
section#offices-list .section_inner .list .detales .office ul li:last-child {
width: 100%;
padding: 1rem 2rem;
}
}
section#offices-list .section_inner .list .detales .office ul li p span {
display: block;
}
section#offices-list .section_inner .list .detales .address {
width: calc(100% - 460px);
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
padding: 2rem;
}
@media (max-width: 1200px) {
section#offices-list .section_inner .list .detales .address {
width: calc(100% - 265px);
}
}
@media (max-width: 640px) {
section#offices-list .section_inner .list .detales .address {
width: calc(100% - 4.5rem);
border-top: dashed 1px #ccc;
background: #efefef;
}
}
section#offices-list .section_inner .list .detales .address ul {
width: calc(100% - 4rem);
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
}
@media (max-width: 640px) {
section#offices-list .section_inner .list .detales .address ul {
width: 100%;
}
}
section#offices-list .section_inner .list .detales .address ul li:first-child {
width: 100%;
}
@media (max-width: 640px) {
section#offices-list .section_inner .list .detales .address ul li:first-child {
width: 100%;
}
}
section#offices-list .section_inner .list .detales .address ul li:first-child span {
display: inline-block;
}
section#offices-list .section_inner .list .detales .address ul li:last-child {
width: 6rem;
position: absolute;
right: 0;
top: 0;
bottom: 0;
background: #ddd;
color: #fff;
}
section#offices-list .section_inner .list .detales .address ul li:last-child a {
position: absolute;
background: #f2f2f2;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin-left: 1px;
border-bottom-right-radius: 0.8rem;
border-top-right-radius: 0.8rem;
-webkit-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
section#offices-list .section_inner .list .detales .address ul li:last-child a span:before {
color: #02a1e9;
padding: 1rem;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
height: 100%;
content: "MAP";
-webkit-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
background-position: center;
}
section#offices-list .section_inner .list .detales .address ul li:last-child a:hover {
background: #02a1e9;
}
section#offices-list .section_inner .list .detales .address ul li:last-child a:hover span:before {
color: #fff;
content: "";
background: url(//hoshizaki-shonan.co.jp/wps/wp-content/themes/hoshizaki-shonan/img/map-w.png);
background-size: 3.5rem;
background-repeat: no-repeat;
background-position: center;
}
section#offices-list .section_inner .list .detales.test-kitchen .office {
width: 725px;
}
@media (max-width: 1200px) {
section#offices-list .section_inner .list .detales.test-kitchen .office {
width: 265px;
}
}
@media (max-width: 640px) {
section#offices-list .section_inner .list .detales.test-kitchen .office {
width: calc(100% - 5rem);
}
}
section#offices-list .section_inner .list .detales.test-kitchen .office ul li.kitchen-img {
width: 265px;
position: relative;
padding-top: 25%;
}
@media (max-width: 1200px) {
section#offices-list .section_inner .list .detales.test-kitchen .office ul li.kitchen-img {
padding-top: 60%;
}
}
@media (max-width: 640px) {
section#offices-list .section_inner .list .detales.test-kitchen .office ul li.kitchen-img {
width: 100%;
padding-top: 50%;
}
}
section#offices-list .section_inner .list .detales.test-kitchen .office ul li.kitchen-img img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
font-family: "";
}
section#offices-list .section_inner .list .detales.test-kitchen .address {
width: calc(100% - 725px);
}
@media (max-width: 1200px) {
section#offices-list .section_inner .list .detales.test-kitchen .address {
width: calc(100% - 265px);
}
}
@media (max-width: 640px) {
section#offices-list .section_inner .list .detales.test-kitchen .address {
width: calc(100% - 4.5rem);
border-top: dashed 1px #ccc;
background: #efefef;
}
}
section#contact-us .section_inner, section#entry-career .section_inner {
margin: 0 8%;
padding: 5rem 0;
}
@media (max-width: 767px) {
section#contact-us .section_inner, section#entry-career .section_inner {
margin: 0;
padding: 5rem 3rem;
}
}
@media (max-width: 480px) {
section#contact-us .section_inner, section#entry-career .section_inner {
padding: 5rem 2rem;
}
}
section#contact-us .section_inner h2, section#entry-career .section_inner h2 {
text-align: center;
margin-bottom: 5rem;
}
section#contact-us .section_inner h2:after, section#entry-career .section_inner h2:after {
content: '';
width: 150px;
height: 2px;
margin: 20px auto 0;
display: block;
top: 50px;
background: -webkit-gradient(linear, left top, right top, from(#03A9F4), to(#3F51B5));
background: -webkit-linear-gradient(left, #03A9F4, #3F51B5);
background: -o-linear-gradient(left, #03A9F4, #3F51B5);
background: linear-gradient(90deg, #03A9F4, #3F51B5);
}
section#recruit-information {
background: #fff;
}
section#recruit-information .section_inner {
margin: 0 8%;
padding: 5rem 0 8rem;
}
@media (max-width: 767px) {
section#recruit-information .section_inner {
margin: 0;
padding: 5rem 3rem;
}
}
@media (max-width: 480px) {
section#recruit-information .section_inner {
padding: 5rem 1rem;
}
}
section#recruit-information .section_inner .open-area.open {
display: block;
}
section#recruit-information .section_inner .open-area.closed {
display: none;
}
section#recruit-information .section_inner .closed-area.open {
display: none;
}
section#recruit-information .section_inner .closed-area.closed {
display: block;
}
section#recruit-information .section_inner .closed-area.closed .closed-message {
max-width: 900px;
margin: auto;
border: double 4px #ddd;
border-radius: 1rem;
padding: 8rem;
background: none;
line-height: 2;
position: relative;
-webkit-box-shadow: 0px 0px 0px 1px #ddd;
box-shadow: 0px 0px 0px 1px #ddd;
}
section#recruit-information .section_inner .messages {
max-width: 1200px;
background: #fff;
border: solid 2px #02a1e9;
padding: 5rem;
margin: 0 auto 8rem;
-webkit-box-shadow: 1rem 1rem #ddd;
box-shadow: 1rem 1rem #ddd;
}
@media (max-width: 640px) {
section#recruit-information .section_inner .messages {
padding: 3rem;
}
}
@media (max-width: 480px) {
section#recruit-information .section_inner .messages {
padding: 1.5rem;
}
}
section#recruit-information .section_inner .messages p {
font-size: 2rem;
}
@media (max-width: 640px) {
section#recruit-information .section_inner .messages p {
font-size: 1.8rem;
}
}
@media (max-width: 480px) {
section#recruit-information .section_inner .messages p {
font-size: 1.6rem;
}
}
section#recruit-information .section_inner .messages p.message_title {
font-size: 2.4rem;
font-weight: 700;
padding-bottom: 2rem;
border-bottom: double #43b5ed 4px;
margin-bottom: 2rem;
color: #02a1e9;
text-align: center;
}
@media (max-width: 640px) {
section#recruit-information .section_inner .messages p.message_title {
font-size: 2rem;
}
}
@media (max-width: 480px) {
section#recruit-information .section_inner .messages p.message_title {
font-size: 1.8rem;
}
}
@media (max-width: 320px) {
section#recruit-information .section_inner .messages p.message_title {
font-size: 1.6rem;
}
}
section#recruit-information .section_inner h2.section-title {
font-size: 3rem;
margin-bottom: 5rem;
text-align: center;
}
section#recruit-information .section_inner h2.section-title:after {
content: '';
width: 150px;
height: 2px;
margin: 20px auto 0;
display: block;
top: 50px;
background: -webkit-gradient(linear, left top, right top, from(#03A9F4), to(#3F51B5));
background: -webkit-linear-gradient(left, #03A9F4, #3F51B5);
background: -o-linear-gradient(left, #03A9F4, #3F51B5);
background: linear-gradient(90deg, #03A9F4, #3F51B5);
}
section#recruit-information .section_inner .recruit-list {
max-width: 1200px;
margin: 0 auto 8rem;
}
section#recruit-information .section_inner .recruit-list .tab_box {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 1%;
}
section#recruit-information .section_inner .recruit-list .tab_box .tab {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin-bottom: 2rem;
color: #333;
border: solid 1px #42b4ee;
padding: 10px 12px;
-webkit-box-ordinal-group: 0;
-webkit-order: -1;
-moz-box-ordinal-group: 0;
-ms-flex-order: -1;
order: -1;
font-weight: 600;
width: 24.25%;
font-size: 2rem;
text-align: center;
-webkit-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
@media (max-width: 991px) {
section#recruit-information .section_inner .recruit-list .tab_box .tab {
width: 49.5%;
}
}
@media (max-width: 640px) {
section#recruit-information .section_inner .recruit-list .tab_box .tab {
width: 100%;
}
}
@media (hover: hover) {
section#recruit-information .section_inner .recruit-list .tab_box .tab:hover {
background: rgba(66, 180, 238, 0.5);
}
}
@media (hover: none) {
section#recruit-information .section_inner .recruit-list .tab_box .tab:active {
background: rgba(66, 180, 238, 0.5);
}
}
section#recruit-information .section_inner .recruit-list .tab_box .tab.active {
background: rgba(66, 180, 238, 0.5);
}
section#recruit-information .section_inner .recruit-list .tab-content {
margin-top: 50px;
width: 100%;
display: none;
}
section#recruit-information .section_inner .recruit-list .tab-content.active {
display: block;
}
section#recruit-information .section_inner .recruit-list:last-child {
margin-bottom: 0;
}
section#recruit-information .section_inner .recruit-list .list-item {
margin-bottom: 4rem;
}
section#recruit-information .section_inner .recruit-list h3 {
font-size: 2.5rem;
margin-bottom: 1rem;
position: relative;
padding-left: 4rem;
}
section#recruit-information .section_inner .recruit-list h3::before {
position: absolute;
display: block;
content: "";
width: 3rem;
height: 3rem;
background: #ffffff;
left: 0;
border-radius: 5rem;
border: solid 8px #43b5ed;
top: 5px;
}
section#recruit-information .section_inner .recruit-list ul {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
section#recruit-information .section_inner .recruit-list ul li {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-box-align: center;
align-items: center;
padding: 2rem;
border: solid 1px #ddd;
border-bottom: none;
}
section#recruit-information .section_inner .recruit-list ul li.title {
width: 200px;
border-right: none;
background-color: #43b4ed;
color: #fff;
font-weight: 400;
}
@media (max-width: 991px) {
section#recruit-information .section_inner .recruit-list ul li.title {
width: 170px;
}
}
@media (max-width: 640px) {
section#recruit-information .section_inner .recruit-list ul li.title {
width: 100%;
}
}
section#recruit-information .section_inner .recruit-list ul li.contents {
width: calc(100% - 200px);
}
@media (max-width: 991px) {
section#recruit-information .section_inner .recruit-list ul li.contents {
width: calc(100% - 170px);
}
}
@media (max-width: 640px) {
section#recruit-information .section_inner .recruit-list ul li.contents {
width: 100%;
}
}
section#recruit-information .section_inner .recruit-list ul li.contents p.title {
display: block;
width: 100%;
color: #43b5ed;
font-weight: 700;
}
section#recruit-information .section_inner .recruit-list ul li.contents span.under-lint {
display: block;
width: 100%;
height: 1px;
background: #ddd;
}
section#recruit-information .section_inner .recruit-list ul li.contents.job_type {
font-size: 120%;
}
section#recruit-information .section_inner .recruit-list ul:last-child li {
border-bottom: solid 1px #ddd;
}
@media (max-width: 640px) {
section#recruit-information .section_inner .recruit-list ul:last-child li.title {
border-bottom: none;
}
}
section#recruit-information .section_inner .recruit-list .tyuto-list {
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
border: solid 1px #ddd;
border-left: none;
}
section#recruit-information .section_inner .recruit-list .tyuto-list ul {
width: 20%;
}
section#recruit-information .section_inner .recruit-list .tyuto-list ul li {
width: 100%;
}
section#recruit-information .section_inner .recruit-list .tyuto-list ul li.year {
background-color: #43b4ed;
color: #fff;
height: 66px;
-webkit-box-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
border: none;
border-left: solid 1px #ddd;
}
section#recruit-information .section_inner .recruit-list .tyuto-list ul li.percent {
height: 91px;
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
-moz-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
border: none;
border-left: solid 1px #ddd;
}
section#recruit-information .section_inner .recruit-list .tyuto-list ul:first-child {
width: 40%;
}
section#recruit-information .section_inner .recruit-list .tyuto-list ul:first-child li.percent {
-webkit-box-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
text-align: center;
}
@media (max-width: 640px) {
section#recruit-information .section_inner .recruit-list .tyuto-list ul {
width: 100%;
border-bottom: solid 1px #ddd;
}
section#recruit-information .section_inner .recruit-list .tyuto-list ul li {
width: 50%;
}
section#recruit-information .section_inner .recruit-list .tyuto-list ul li.year {
height: 60px;
}
section#recruit-information .section_inner .recruit-list .tyuto-list ul li.percent {
height: 60px;
}
section#recruit-information .section_inner .recruit-list .tyuto-list ul:first-child {
width: 100%;
}
section#recruit-information .section_inner .recruit-list .tyuto-list ul:first-child li.percent {
padding: 0;
}
section#recruit-information .section_inner .recruit-list .tyuto-list ul:last-child {
border-bottom: none;
}
}
section#recruit-information .section_inner .recruit-list .koukaibi {
text-align: right;
margin-top: 1rem;
}
section#recruit-information .entry-form {
text-align: center;
padding-bottom: 8rem;
}
section#recruit-information .entry-form a.button {
text-align: center;
line-height: 4rem;
border-radius: 0.5rem;
-webkit-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
color: #fff;
background-color: #4c4d55;
display: inline-block;
-webkit-box-shadow: 0 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.1);
}
section#recruit-information .entry-form a.button span {
position: relative;
display: block;
padding: 1rem 6rem;
font-size: 1.8rem;
}
section#recruit-information .entry-form a.button span:before {
content: "";
width: 1.5rem;
position: absolute;
background-color: #fff;
height: 1px;
top: 50%;
right: 3rem;
-webkit-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
section#recruit-information .entry-form a.button span:after {
content: "";
width: 8px;
position: absolute;
background-color: #fff;
height: 1px;
right: 3rem;
top: 45%;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
section#recruit-information .entry-form a.button:hover {
background: #00a0e9;
-webkit-transform: translateY(-2px);
-ms-transform: translateY(-2px);
transform: translateY(-2px);
-webkit-box-shadow: 0 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.3);
box-shadow: 0 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.3);
}
section#recruit-information .entry-form a.button:hover span::before {
width: 2.5rem;
height: 2px;
right: 1rem;
}
section#recruit-information .entry-form a.button:hover span::after {
width: 1.5rem;
height: 2px;
right: 0.8rem;
top: 43%;
}
section#recruit-information .entry-form.mynavi a img {
border-radius: 1rem;
-webkit-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
-webkit-box-shadow: 0 0 3rem rgba(0, 160, 233, 0.5);
box-shadow: 0 0 3rem rgba(0, 160, 233, 0.5);
}
section#recruit-information .entry-form.mynavi a:hover img {
opacity: 0.8;
-webkit-transform: translateY(-2px);
-ms-transform: translateY(-2px);
transform: translateY(-2px);
-webkit-box-shadow: 0 0 5rem #00a0e9;
box-shadow: 0 0 5rem #00a0e9;
} #contact_area .section_inner {
text-align: center;
margin: 0 10%;
padding: 5rem 0;
}
@media (max-width: 767px) {
#contact_area .section_inner {
margin: 0;
padding: 5rem 3rem;
}
}
@media (max-width: 480px) {
#contact_area .section_inner {
padding: 5rem 2rem;
}
}
#contact_area .section_inner h2 {
position: relative;
padding: 0 5rem;
text-align: center;
}
@media (max-width: 480px) {
#contact_area .section_inner h2 {
padding: 0;
}
}
#contact_area .section_inner h2:before {
position: absolute;
top: calc(50% - 1px);
left: 0;
width: 100%;
height: 2px;
content: '';
background: -webkit-gradient(linear, left top, right top, from(#03A9F4), to(#3F51B5));
background: -webkit-linear-gradient(left, #03A9F4, #3F51B5);
background: -o-linear-gradient(left, #03A9F4, #3F51B5);
background: linear-gradient(90deg, #03A9F4, #3F51B5);
}
#contact_area .section_inner h2 span {
position: relative;
padding: 0 1em;
background: #f5f5f5;
display: inline-block;
}
@media (max-width: 320px) {
#contact_area .section_inner h2 span {
font-size: 1.8rem;
padding: 0 0.5rem;
}
}
#contact_area .section_inner div#link_item {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
-moz-box-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-box-align: center;
align-items: center;
margin-top: 5rem;
}
#contact_area .section_inner div#link_item .box {
width: 48%;
border: solid 1px #ddd;
border-radius: 2rem;
padding: 4rem 2rem;
display: block;
position: relative;
-o-transition: all 1s ease;
transition: all 1s ease;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
}
@media (max-width: 640px) {
#contact_area .section_inner div#link_item .box {
width: 100%;
}
#contact_area .section_inner div#link_item .box:first-child {
margin-bottom: 3rem;
}
}
@media (max-width: 320px) {
#contact_area .section_inner div#link_item .box {
padding: 2rem 1rem;
}
}
#contact_area .section_inner div#link_item .box p {
font-size: 2rem;
}
#contact_area .section_inner div#link_item .box .item-box .item {
width: 40rem;
}
@media (max-width: 1200px) {
#contact_area .section_inner div#link_item .box .item-box .item {
width: 100%;
}
}
#contact_area .section_inner div#link_item .box a {
color: #fff;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
#contact_area .section_inner div#link_item .box:hover {
background: #fff;
-webkit-transform: translateY(-2px);
-ms-transform: translateY(-2px);
transform: translateY(-2px);
-webkit-box-shadow: 0.5rem 0.5rem 2rem rgba(0, 0, 0, 0.3), inset 0 0 5rem white;
box-shadow: 0.5rem 0.5rem 2rem rgba(0, 0, 0, 0.3), inset 0 0 5rem white;
}
#contact_area .section_inner div#link_item .box:hover .item-box .item {
background: #00a0e9;
-webkit-transform: translateY(-2px);
-ms-transform: translateY(-2px);
transform: translateY(-2px);
-webkit-box-shadow: 0 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.3);
box-shadow: 0 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.3);
}
#contact_area .section_inner div#link_item .box:hover .item-box .item .more-btn::before {
width: 2.5rem;
height: 2px;
right: 1rem;
}
#contact_area .section_inner div#link_item .box:hover .item-box .item .more-btn::after {
width: 1.5rem;
height: 2px;
right: 0.8rem;
top: 43%;
} #recruit {
background-color: #fff;
}
#recruit .area-inner {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
-moz-box-pack: justify;
justify-content: space-between;
}
#recruit .area-inner .link {
position: absolute;
bottom: 0;
right: 3rem;
z-index: 1;
padding: 3rem;
}
#recruit .area-inner .link.pink a {
color: #02a1e9;
background: transparent;
background-color: rgba(255, 255, 255, 0.5);
border-width: 2px;
border-style: solid;
border-color: #02a1e9;
position: relative;
margin: 1rem;
display: inline-block;
padding: 0.5em 1em;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
text-align: center;
font-family: comfortaa;
font-weight: bold;
font-size: 1.5vw;
}
@media (max-width: 991px) {
#recruit .area-inner .link.pink a {
font-size: 1.8rem;
}
}
#recruit .area-inner .link.pink a::before, #recruit .area-inner .link.pink a::after {
content: '';
display: block;
position: absolute;
border-color: #02a1e9;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border-style: solid;
width: 1em;
height: 1em;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
#recruit .area-inner .link.pink a::before {
top: -6px;
left: -6px;
border-width: 2px 0 0 2px;
z-index: 5;
}
#recruit .area-inner .link.pink a::after {
bottom: -6px;
right: -6px;
border-width: 0 2px 2px 0;
}
#recruit .area-inner .link.pink a:hover {
color: #fff;
background-color: #02a1e9;
border-color: #02a1e9;
}
#recruit .area-inner .link.pink a:hover::before, #recruit .area-inner .link.pink a:hover::after {
width: calc(100% + 12px);
height: calc(100% + 12px);
border-color: #02a1e9;
}
#recruit .area-inner.area01 { padding-top: 10rem;
-ms-flex-wrap: nowrap;
-webkit-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-align: end;
-ms-flex-align: end;
-webkit-align-items: flex-end;
-moz-box-align: end;
align-items: flex-end;
}
@media (max-width: 991px) {
#recruit .area-inner.area01 {
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
}
#recruit .area-inner.area01 .text-area {
width: 60vw;
max-width: 60vw;
padding-left: 8rem;
}
@media (max-width: 1200px) {
#recruit .area-inner.area01 .text-area {
padding-left: 5rem;
}
}
@media (max-width: 991px) {
#recruit .area-inner.area01 .text-area {
width: 100vw;
max-width: 100vw;
}
}
@media (max-width: 767px) {
#recruit .area-inner.area01 .text-area {
padding-left: 3rem;
}
}
@media (max-width: 480px) {
#recruit .area-inner.area01 .text-area {
padding-left: 1rem;
}
}
#recruit .area-inner.area01 .text-area .text-area-inner {
padding: 2vw;
position: relative;
}
@media (max-width: 1200px) {
#recruit .area-inner.area01 .text-area .text-area-inner {
padding-left: 0;
}
}
@media (max-width: 480px) {
#recruit .area-inner.area01 .text-area .text-area-inner {
padding: 0;
}
}
#recruit .area-inner.area01 .text-area .text-area-inner p.message-label {
color: rgba(2, 161, 233, 0.1);
font-weight: 700;
font-size: 10vw;
position: absolute;
top: -5vw;
line-height: 1;
left: -4.5vw;
z-index: 0;
}
@media (max-width: 1200px) {
#recruit .area-inner.area01 .text-area .text-area-inner p.message-label {
padding-left: 0;
}
}
@media (max-width: 767px) {
#recruit .area-inner.area01 .text-area .text-area-inner p.message-label {
font-size: 10rem;
top: -5rem;
left: -3rem;
}
}
#recruit .area-inner.area01 .text-area .text-area-inner h2 {
font-size: 3vw;
text-shadow: 3px 3px #f1f1f1;
letter-spacing: 5px;
}
@media (max-width: 767px) {
#recruit .area-inner.area01 .text-area .text-area-inner h2 {
font-size: 3rem;
}
}
@media (max-width: 480px) {
#recruit .area-inner.area01 .text-area .text-area-inner h2 {
font-size: 2.5rem;
}
}
#recruit .area-inner.area01 .text-area .text-area-inner .message-box {
position: relative;
padding: 2rem;
margin: 2rem 0;
}
@media (max-width: 480px) {
#recruit .area-inner.area01 .text-area .text-area-inner .message-box {
padding: 1rem;
}
}
#recruit .area-inner.area01 .text-area .text-area-inner .message-box p {
font-size: 1.8rem;
}
#recruit .area-inner.area01 .text-area .text-area-inner .signature { width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
-webkit-justify-content: flex-end;
-moz-box-pack: end;
justify-content: flex-end;
text-align: right;
}
#recruit .area-inner.area01 .text-area .text-area-inner .signature svg {
max-width: 20rem;
height: auto;
}
#recruit .area-inner.area01 .img-area {
width: 40vw;
max-width: 40vw;
border-top-left-radius: 3rem;
border-bottom-left-radius: 3rem;
}
@media (max-width: 991px) {
#recruit .area-inner.area01 .img-area {
width: 100%;
max-width: 100%;
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
justify-content: center;
-webkit-box-align: baseline;
-ms-flex-align: baseline;
-webkit-align-items: baseline;
-moz-box-align: baseline;
align-items: baseline;
border-radius: 0;
}
}
@media (max-width: 640px) {
#recruit .area-inner.area01 .img-area {
display: block;
}
}
#recruit .area-inner.area01 .img-area img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: 70%;
object-position: 70%;
font-family: "object-fit: cover;object-position: 70%;";
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
border-top-left-radius: 3rem;
border-bottom-left-radius: 3rem;
}
@media (max-width: 991px) {
#recruit .area-inner.area01 .img-area img {
max-width: 45rem;
border-radius: 3rem;
}
}
@media (max-width: 640px) {
#recruit .area-inner.area01 .img-area img {
margin: auto;
}
}
@media (max-width: 480px) {
#recruit .area-inner.area01 .img-area img {
padding: 1rem;
}
}
#recruit .area-inner.area01 .img-area .signature {
width: 100%;
max-width: 110px;
margin: 1rem 2rem;
float: right;
}
#recruit .area-inner.area02 { padding-top: 5%;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
@media (max-width: 640px) {
#recruit .area-inner.area02 {
padding-top: 0;
}
}
#recruit .area-inner.area02 .panel {
height: auto;
width: 90%;
display: block;
position: relative;
overflow: hidden;
padding-top: 25%;
margin: auto;
margin-bottom: 10rem;
}
@media (max-width: 991px) {
#recruit .area-inner.area02 .panel {
padding-top: 35%;
}
}
@media (max-width: 480px) {
#recruit .area-inner.area02 .panel {
width: 100%;
padding-top: 50%;
margin-bottom: 3rem;
}
}
@media (max-width: 360px) {
#recruit .area-inner.area02 .panel {
padding-top: 55%;
}
}
@media (max-width: 320px) {
#recruit .area-inner.area02 .panel {
padding-top: 65%;
}
}
#recruit .area-inner.area02 .panel .info {
position: absolute;
z-index: 1;
padding: 4rem 5rem;
top: 0;
}
@media (max-width: 991px) {
#recruit .area-inner.area02 .panel .info {
padding: 2rem 3rem;
}
}
@media (max-width: 480px) {
#recruit .area-inner.area02 .panel .info {
padding: 1rem;
}
}
#recruit .area-inner.area02 .panel .info h2 {
font-size: 5vw;
color: #fff;
text-shadow: 0 0 2rem #607d8b;
letter-spacing: 8px;
}
@media (max-width: 991px) {
#recruit .area-inner.area02 .panel .info h2 {
font-size: 5rem;
}
}
@media (max-width: 640px) {
#recruit .area-inner.area02 .panel .info h2 {
font-size: 3rem;
}
}
@media (max-width: 480px) {
#recruit .area-inner.area02 .panel .info h2 {
font-size: 2.4rem;
}
}
#recruit .area-inner.area02 .panel .info h2 span {
font-size: 4vw;
font-weight: 500;
}
@media (max-width: 991px) {
#recruit .area-inner.area02 .panel .info h2 span {
font-size: 4rem;
}
}
@media (max-width: 640px) {
#recruit .area-inner.area02 .panel .info h2 span {
font-size: 2.5rem;
}
}
@media (max-width: 480px) {
#recruit .area-inner.area02 .panel .info h2 span {
font-size: 2rem;
}
}
#recruit .area-inner.area02 .panel .info p {
font-size: 2vw;
color: #fff;
text-shadow: 0 0 2rem #000;
letter-spacing: 3px;
font-weight: 500;
}
@media (max-width: 991px) {
#recruit .area-inner.area02 .panel .info p {
font-size: 2rem;
}
}
@media (max-width: 640px) {
#recruit .area-inner.area02 .panel .info p {
font-size: 1.8rem;
}
}
@media (max-width: 480px) {
#recruit .area-inner.area02 .panel .info p {
font-size: 1.6rem;
}
}
@media (max-width: 991px) {
#recruit .area-inner.area02 .panel .link {
right: 0;
padding: 1rem;
}
}
#recruit .area-inner.area02 .panel .view {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
z-index: 0;
}
#recruit .area-inner.area02 .panel .view img {
height: 100%;
width: 100%;
-o-object-fit: cover;
object-fit: cover;
font-family: "object-fit: cover;";
}
#recruit .area-inner.area03 { padding-top: 10rem;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
#recruit .area-inner.area03 .recruit,
#recruit .area-inner.area03 .about,
#recruit .area-inner.area03 .work {
width: 100%;
margin: auto 5%;
margin-bottom: 15rem;
padding: 0 3rem;
}
@media (max-width: 991px) {
#recruit .area-inner.area03 .recruit,
#recruit .area-inner.area03 .about,
#recruit .area-inner.area03 .work {
margin: 0 auto 15%;
}
}
@media (max-width: 480px) {
#recruit .area-inner.area03 .recruit,
#recruit .area-inner.area03 .about,
#recruit .area-inner.area03 .work {
padding: 0;
}
}
#recruit .area-inner.area03 .recruit .title-head,
#recruit .area-inner.area03 .about .title-head,
#recruit .area-inner.area03 .work .title-head {
position: relative;
border-bottom: solid #02a1e9;
margin-bottom: 4rem;
padding-bottom: 2rem;
}
@media (max-width: 480px) {
#recruit .area-inner.area03 .recruit .title-head,
#recruit .area-inner.area03 .about .title-head,
#recruit .area-inner.area03 .work .title-head {
margin: 0 1rem 2rem;
padding: 0 0 1rem;
}
}
#recruit .area-inner.area03 .recruit .title-head .message-label,
#recruit .area-inner.area03 .about .title-head .message-label,
#recruit .area-inner.area03 .work .title-head .message-label {
color: rgba(2, 161, 233, 0.1);
font-weight: 700;
font-size: 10vw;
position: absolute;
top: -4vw;
line-height: 1;
left: -7vw;
z-index: 0;
}
@media (max-width: 991px) {
#recruit .area-inner.area03 .recruit .title-head .message-label,
#recruit .area-inner.area03 .about .title-head .message-label,
#recruit .area-inner.area03 .work .title-head .message-label {
font-size: 10rem;
top: -5rem;
left: -3rem;
}
}
#recruit .area-inner.area03 .recruit .title-head h2,
#recruit .area-inner.area03 .about .title-head h2,
#recruit .area-inner.area03 .work .title-head h2 {
position: relative;
font-size: 3vw;
text-shadow: 3px 3px #f1f1f1;
letter-spacing: 5px;
}
@media (max-width: 767px) {
#recruit .area-inner.area03 .recruit .title-head h2,
#recruit .area-inner.area03 .about .title-head h2,
#recruit .area-inner.area03 .work .title-head h2 {
font-size: 3rem;
}
}
@media (max-width: 480px) {
#recruit .area-inner.area03 .recruit .title-head h2,
#recruit .area-inner.area03 .about .title-head h2,
#recruit .area-inner.area03 .work .title-head h2 {
font-size: 2.5rem;
}
}
#recruit .area-inner.area03 .recruit .contents,
#recruit .area-inner.area03 .about .contents,
#recruit .area-inner.area03 .work .contents {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
-moz-box-pack: justify;
justify-content: space-between;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
#recruit .area-inner.area03 .recruit .contents .recruit-item {
width: 32%;
position: relative;
padding-top: 25%;
}
@media (max-width: 767px) {
#recruit .area-inner.area03 .recruit .contents .recruit-item {
width: 100%;
padding-top: 35%;
margin-bottom: 5rem;
}
}
@media (max-width: 640px) {
#recruit .area-inner.area03 .recruit .contents .recruit-item {
margin-bottom: 7rem;
}
}
@media (max-width: 480px) {
#recruit .area-inner.area03 .recruit .contents .recruit-item {
padding-top: 55%;
margin-bottom: 3rem;
}
}
@media (max-width: 360px) {
#recruit .area-inner.area03 .recruit .contents .recruit-item {
padding-top: 65%;
}
}
@media (max-width: 320px) {
#recruit .area-inner.area03 .recruit .contents .recruit-item {
padding-top: 75%;
}
}
#recruit .area-inner.area03 .recruit .contents .recruit-item .item-inner {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
z-index: 1;
}
#recruit .area-inner.area03 .recruit .contents .recruit-item .info {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
padding: 2rem 1rem;
height: 90%;
width: 90%;
background-color: rgba(0, 0, 0, 0.2);
}
#recruit .area-inner.area03 .recruit .contents .recruit-item .info h3 {
font-size: 2.2vw;
color: #fff;
}
@media (max-width: 767px) {
#recruit .area-inner.area03 .recruit .contents .recruit-item .info h3 {
font-size: 2.5rem;
}
}
#recruit .area-inner.area03 .recruit .contents .recruit-item .info .message {
margin-top: 1rem;
border-top: solid #fff;
padding-top: 1rem;
}
#recruit .area-inner.area03 .recruit .contents .recruit-item .info .message p {
font-size: 1.6vw;
color: #fff;
}
@media (max-width: 767px) {
#recruit .area-inner.area03 .recruit .contents .recruit-item .info .message p {
font-size: 1.8rem;
}
}
#recruit .area-inner.area03 .recruit .contents .recruit-item .link {
position: absolute;
bottom: 0;
right: 0;
padding: 1rem;
}
@media (max-width: 1200px) {
#recruit .area-inner.area03 .recruit .contents .recruit-item .link {
padding: 0;
}
}
@media (max-width: 991px) {
#recruit .area-inner.area03 .recruit .contents .recruit-item .link {
bottom: -30px;
right: -17px;
}
}
@media (max-width: 767px) {
#recruit .area-inner.area03 .recruit .contents .recruit-item .link {
bottom: 0;
right: 0;
padding: 1rem;
}
}
@media (max-width: 640px) {
#recruit .area-inner.area03 .recruit .contents .recruit-item .link {
bottom: -1rem;
right: -1rem;
}
}
#recruit .area-inner.area03 .recruit .contents .recruit-item .link.pink a {
margin: 1rem;
}
#recruit .area-inner.area03 .recruit .contents .recruit-item img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
font-family: "object-fit: cover;";
}
#recruit .area-inner.area03 .about .title-head, #recruit .area-inner.area03 .work .title-head {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: baseline;
-ms-flex-align: baseline;
-webkit-align-items: baseline;
-moz-box-align: baseline;
align-items: baseline;
}
@media (max-width: 480px) {
#recruit .area-inner.area03 .about .contents, #recruit .area-inner.area03 .work .contents {
margin: 0 2rem;
}
}
#recruit .area-inner.area03 .about .contents a, #recruit .area-inner.area03 .work .contents a {
width: 48%;
color: #02a1e9;
background: transparent;
background-color: #fff;
border-width: 2px;
border-style: solid;
border-color: #02a1e9;
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
justify-content: center;
padding: 1rem;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
text-align: center;
font-family: comfortaa;
font-weight: bold;
font-size: 1.5vw;
height: 12rem;
}
@media (max-width: 991px) {
#recruit .area-inner.area03 .about .contents a, #recruit .area-inner.area03 .work .contents a {
font-size: 1.8rem;
}
}
@media (max-width: 640px) {
#recruit .area-inner.area03 .about .contents a, #recruit .area-inner.area03 .work .contents a {
width: 100%;
margin-bottom: 3rem;
}
}
#recruit .area-inner.area03 .about .contents a::before, #recruit .area-inner.area03 .about .contents a::after, #recruit .area-inner.area03 .work .contents a::before, #recruit .area-inner.area03 .work .contents a::after {
content: '';
display: block;
position: absolute;
border-color: #02a1e9;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border-style: solid;
width: 1em;
height: 1em;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
#recruit .area-inner.area03 .about .contents a::before, #recruit .area-inner.area03 .work .contents a::before {
top: -6px;
left: -6px;
border-width: 2px 0 0 2px;
z-index: 5;
}
#recruit .area-inner.area03 .about .contents a::after, #recruit .area-inner.area03 .work .contents a::after {
bottom: -6px;
right: -6px;
border-width: 0 2px 2px 0;
}
#recruit .area-inner.area03 .about .contents a:hover, #recruit .area-inner.area03 .work .contents a:hover {
color: #fff;
background-color: #02a1e9;
border-color: #02a1e9;
}
#recruit .area-inner.area03 .about .contents a:hover::before, #recruit .area-inner.area03 .about .contents a:hover::after, #recruit .area-inner.area03 .work .contents a:hover::before, #recruit .area-inner.area03 .work .contents a:hover::after {
width: calc(100% + 12px);
height: calc(100% + 12px);
border-color: #02a1e9;
}
#recruit .area-inner.area03 .about .contents a span, #recruit .area-inner.area03 .work .contents a span {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-box-align: center;
align-items: center;
} #company-initiatives {
background: #fff;
}
#company-initiatives img {
height: 100%;
width: 100%;
}
#company-initiatives section {
margin: 0 8%;
padding: 5rem 0;
}
@media (max-width: 767px) {
#company-initiatives section {
margin: 0;
padding: 5rem 3rem;
}
}
@media (max-width: 480px) {
#company-initiatives section {
padding: 5rem 1rem;
}
}
#company-initiatives section h2.section-title {
text-align: center;
margin-bottom: 5rem;
}
#company-initiatives section h2.section-title:after {
content: '';
width: 150px;
height: 2px;
margin: 20px auto 0;
display: block;
top: 50px;
background: -webkit-gradient(linear, left top, right top, from(#03A9F4), to(#3F51B5));
background: -webkit-linear-gradient(left, #03A9F4, #3F51B5);
background: -o-linear-gradient(left, #03A9F4, #3F51B5);
background: linear-gradient(90deg, #03A9F4, #3F51B5);
}
#company-initiatives section .read-area {
width: 100%;
background: #fff;
border: solid 2px #02a1e9;
padding: 3rem 4rem;
margin: auto;
font-size: 2rem;
font-weight: 700;
color: #02a1e9;
-webkit-box-shadow: 1rem 1rem #ddd;
box-shadow: 1rem 1rem #ddd;
}
@media (max-width: 767px) {
#company-initiatives section .read-area {
padding: 3rem;
}
}
@media (max-width: 480px) {
#company-initiatives section .read-area {
padding: 2rem 1rem;
font-size: 1.6rem;
}
}
#company-initiatives section .sub_read {
padding: 3rem 4rem;
margin: auto;
background: #fff;
border: solid #ddd;
-webkit-box-shadow: 1rem 1rem #ddd;
box-shadow: 1rem 1rem #ddd;
max-width: 1300px;
margin: 0 auto 8rem;
}
@media (max-width: 767px) {
#company-initiatives section .sub_read {
padding: 3rem;
margin-bottom: 4rem;
}
}
@media (max-width: 480px) {
#company-initiatives section .sub_read {
padding: 2rem 1rem;
font-size: 1.6rem;
}
}
#company-initiatives section .sub_read .catch {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -moz-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
font-weight: 500;
margin-bottom: 1rem;
font-size: 2rem;
}
#company-initiatives section .area-block {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
-moz-box-pack: justify;
justify-content: space-between;
max-width: 1300px;
margin: 0 auto 8rem;
}
#company-initiatives section .area-block .block-head {
width: 100%;
}
#company-initiatives section .area-block .block-head h3 {
text-align: center;
margin-bottom: 3rem;
}
#company-initiatives section .area-block .block-head h3::after {
content: '';
width: 150px;
height: 2px;
margin: 20px auto 0;
display: block;
top: 50px;
background: -webkit-gradient(linear, left top, right top, from(#ddf4ff), to(#ddf4ff));
background: -webkit-linear-gradient(left, #ddf4ff, #ddf4ff);
background: -o-linear-gradient(left, #ddf4ff, #ddf4ff);
background: linear-gradient(90deg, #ddf4ff, #ddf4ff);
}
#company-initiatives section .area-block .text-area {
width: 48%;
}
#company-initiatives section .area-block .img-area {
width: 48%;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
justify-content: center;
}
#company-initiatives section.area01 .area-block.section1 {
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-box-align: center;
align-items: center;
}
@media (max-width: 991px) {
#company-initiatives section.area01 .area-block.section1 .text-area {
width: 100%;
}
}
@media (max-width: 991px) {
#company-initiatives section.area01 .area-block.section1 .img-area {
width: 100%;
}
}
#company-initiatives section.area01 .area-block.section2 .text-area {
width: 100%;
}
#company-initiatives section.area01 .area-block.section2 .text-area .box-area-pc { }
#company-initiatives section.area01 .area-block.section2 .text-area .box-area-pc .first-area {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-pack: distribute;
-webkit-justify-content: space-around;
justify-content: space-around;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-box-align: center;
align-items: center;
margin-right: 23%;
z-index: 2;
}
@media (max-width: 1500px) {
#company-initiatives section.area01 .area-block.section2 .text-area .box-area-pc .first-area {
margin-right: 14%;
}
}
@media (max-width: 1100px) {
#company-initiatives section.area01 .area-block.section2 .text-area .box-area-pc .first-area {
margin-right: 14%;
}
}
#company-initiatives section.area01 .area-block.section2 .text-area .box-area-pc .first-area .label-box {
position: relative;
display: table;
z-index: 2;
}
#company-initiatives section.area01 .area-block.section2 .text-area .box-area-pc .first-area .label-box h4 {
font-size: 2rem;
padding: 0.5rem 3rem;
background: #00a1e9;
border: solid 1px #00a1e9;
color: #fff;
border-top-left-radius: 1rem;
border-top-right-radius: 1rem;
text-align: center;
}
@media (max-width: 1100px) {
#company-initiatives section.area01 .area-block.section2 .text-area .box-area-pc .first-area .label-box h4 {
font-size: 1.8rem;
padding: 0.5rem 2rem;
}
}
#company-initiatives section.area01 .area-block.section2 .text-area .box-area-pc .first-area .label-box p {
padding: 0.5rem 3rem;
background: #fff;
border: solid 1px #00a1e9;
border-bottom-right-radius: 1rem;
border-bottom-left-radius: 1rem;
text-align: center;
}
@media (max-width: 1100px) {
#company-initiatives section.area01 .area-block.section2 .text-area .box-area-pc .first-area .label-box p {
padding: 0.5rem 2rem;
}
}
#company-initiatives section.area01 .area-block.section2 .text-area .box-area-pc .first-area .arrow-right {
display: inline-block;
width: 4rem;
height: 4rem;
border-top: dotted 2px #697b91;
border-right: dotted 2px #697b91;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
position: relative;
z-index: 3;
}
@media (max-width: 1300px) {
#company-initiatives section.area01 .area-block.section2 .text-area .box-area-pc .first-area .arrow-right {
margin-right: 2%;
}
}
#company-initiatives section.area01 .area-block.section2 .text-area .box-area-pc .second-area {
z-index: 1;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
-moz-box-pack: justify;
justify-content: space-between;
}
#company-initiatives section.area01 .area-block.section2 .text-area .box-area-pc .second-area .contents-box {
background: #dcf4ff;
padding: 4rem 2.5rem 2.5rem;
border-radius: 1rem;
position: relative;
top: -2rem;
z-index: 1;
}
#company-initiatives section.area01 .area-block.section2 .text-area .box-area-pc .second-area .contents-box:first-child {
width: 53%;
}
#company-initiatives section.area01 .area-block.section2 .text-area .box-area-pc .second-area .contents-box:last-child {
width: 43%;
}
#company-initiatives section.area01 .area-block.section2 .text-area .box-area-sp { display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
text-align: center;
margin-top: 1rem;
}
#company-initiatives section.area01 .area-block.section2 .text-area .box-area-sp .arrow-bottom {
display: inline-block;
width: 4rem;
height: 4rem;
margin: 0 10px;
border-bottom: dotted 2px #697b91;
border-right: dotted 2px #697b91;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
#company-initiatives section.area01 .area-block.section2 .text-area .box-area-sp .second-area {
margin-top: 3rem;
}
#company-initiatives section.area01 .area-block.section2 .text-area .box-area-sp .first-area,
#company-initiatives section.area01 .area-block.section2 .text-area .box-area-sp .second-area {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-box-align: center;
align-items: center;
}
#company-initiatives section.area01 .area-block.section2 .text-area .box-area-sp .first-area .label-box,
#company-initiatives section.area01 .area-block.section2 .text-area .box-area-sp .second-area .label-box {
position: relative;
display: table;
z-index: 2;
}
@media (max-width: 640px) {
#company-initiatives section.area01 .area-block.section2 .text-area .box-area-sp .first-area .label-box,
#company-initiatives section.area01 .area-block.section2 .text-area .box-area-sp .second-area .label-box {
width: 80%;
}
#company-initiatives section.area01 .area-block.section2 .text-area .box-area-sp .first-area .label-box:nth-child(3),
#company-initiatives section.area01 .area-block.section2 .text-area .box-area-sp .second-area .label-box:nth-child(3) {
margin-top: 2rem;
}
}
@media (max-width: 480px) {
#company-initiatives section.area01 .area-block.section2 .text-area .box-area-sp .first-area .label-box,
#company-initiatives section.area01 .area-block.section2 .text-area .box-area-sp .second-area .label-box {
width: 90%;
}
}
#company-initiatives section.area01 .area-block.section2 .text-area .box-area-sp .first-area .label-box h4,
#company-initiatives section.area01 .area-block.section2 .text-area .box-area-sp .second-area .label-box h4 {
font-size: 2rem;
padding: 0.5rem 3rem;
background: #00a1e9;
border: solid 1px #00a1e9;
color: #fff;
border-top-left-radius: 1rem;
border-top-right-radius: 1rem;
text-align: center;
}
@media (max-width: 767px) {
#company-initiatives section.area01 .area-block.section2 .text-area .box-area-sp .first-area .label-box h4,
#company-initiatives section.area01 .area-block.section2 .text-area .box-area-sp .second-area .label-box h4 {
font-size: 1.8rem;
padding: 0.5rem 0;
}
}
#company-initiatives section.area01 .area-block.section2 .text-area .box-area-sp .first-area .label-box p,
#company-initiatives section.area01 .area-block.section2 .text-area .box-area-sp .second-area .label-box p {
padding: 0.5rem 3rem;
background: #fff;
border: solid 1px #00a1e9;
border-bottom-right-radius: 1rem;
border-bottom-left-radius: 1rem;
text-align: center;
}
#company-initiatives section.area01 .area-block.section2 .text-area .box-area-sp .first-area .contents-box,
#company-initiatives section.area01 .area-block.section2 .text-area .box-area-sp .second-area .contents-box {
background: #dcf4ff;
padding: 4rem 2.5rem 2.5rem;
border-radius: 1rem;
position: relative;
top: -2rem;
text-align: left;
z-index: 1;
}
#company-initiatives section.area01 .area-block.section2 .text-area .box-area-sp .first-area .arrow-right {
display: inline-block;
width: 4rem;
height: 4rem;
border-top: dotted 2px #697b91;
border-right: dotted 2px #697b91;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
position: relative;
z-index: 3;
margin: 0 5rem;
}
@media (max-width: 767px) {
#company-initiatives section.area01 .area-block.section2 .text-area .box-area-sp .first-area .arrow-right {
margin: 0 2rem;
}
}
@media (max-width: 640px) {
#company-initiatives section.area01 .area-block.section2 .text-area .box-area-sp .first-area .arrow-right {
border-top: none;
border-right: none;
border-bottom: dotted 2px #697b91;
border-right: dotted 2px #697b91;
margin: 0 5rem;
}
}
@media (max-width: 640px) {
#company-initiatives section.area01 .area-block.section2 .text-area .box-area-sp .first-area .contents-box {
padding-top: 17rem;
margin-top: -13rem;
}
}
#company-initiatives section.area01 .area-block.section3 {
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
justify-content: center;
}
#company-initiatives section.area01 .area-block.section3 .text-area {
width: 100%;
}
@media (max-width: 991px) {
#company-initiatives section.area01 .area-block.section3 .text-area .sub_read {
margin-bottom: 3rem;
}
}
#company-initiatives section.area01 .area-block.section3 .img-area {
width: 100%;
text-align: center;
margin-top: 3rem;
}
@media (max-width: 480px) {
#company-initiatives section.area01 .area-block.section3 .img-area {
margin-top: 0;
}
}
#company-initiatives section.area01 .area-block.section3 .img-area img {
max-width: 750px;
}
#company-initiatives section.area02 .list-area {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
-moz-box-pack: justify;
justify-content: space-between;
width: 100%;
max-width: 1300px;
margin: auto;
}
#company-initiatives section.area02 .list-area .list-block {
width: 45%;
margin-bottom: 5rem;
}
@media (max-width: 640px) {
#company-initiatives section.area02 .list-area .list-block {
width: 100%;
margin: 0 auto 5rem;
padding: 0 4rem;
}
}
@media (max-width: 480px) {
#company-initiatives section.area02 .list-area .list-block {
padding: 0;
}
}
#company-initiatives section.area02 .list-area .list-block.contents5 {
margin-bottom: 1rem;
}
@media (max-width: 640px) {
#company-initiatives section.area02 .list-area .list-block.contents5 {
margin: 0 auto 5rem;
}
}
#company-initiatives section.area02 .list-area .list-block.contents6 {
margin-bottom: 1rem;
}
#company-initiatives section.area02 .list-area .list-block h3 {
text-align: center;
margin-bottom: 3rem;
}
#company-initiatives section.area02 .list-area .list-block h3::after {
content: '';
width: 150px;
height: 2px;
margin: 20px auto 0;
display: block;
top: 50px;
background: -webkit-gradient(linear, left top, right top, from(#03A9F4), to(#3F51B5));
background: -webkit-linear-gradient(left, #03A9F4, #3F51B5);
background: -o-linear-gradient(left, #03A9F4, #3F51B5);
background: linear-gradient(90deg, #03A9F4, #3F51B5);
}
#company-initiatives section.area02 .list-area .list-block p .vivid {
font-size: 18px;
font-weight: 700;
color: #e61e75;
}
#company-initiatives section.area02 .list-area .list-block p a {
margin-top: 2rem;
padding: 1rem 0;
background: #e94087;
width: 222px;
float: right;
text-align: center;
border-radius: 5rem;
color: #fff;
position: relative;
-webkit-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
#company-initiatives section.area02 .list-area .list-block p a::before {
content: "";
width: 1.5rem;
position: absolute;
background-color: #fff;
height: 1px;
top: 50%;
right: 2rem;
-webkit-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
#company-initiatives section.area02 .list-area .list-block p a:after {
content: "";
width: 8px;
position: absolute;
background-color: #fff;
height: 1px;
right: 2rem;
top: 44%;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
#company-initiatives section.area02 .list-area .list-block p a:hover {
opacity: 0.8;
}
#company-initiatives section.area02 .list-area .list-block p a:hover::before {
width: 2.2rem;
top: 50%;
right: 1.3rem;
}
#company-initiatives section.area02 .list-area .list-block p a:hover:after {
width: 13px;
right: 1rem;
top: 40%;
}
#company-initiatives section.area02 .list-area .list-block ul li {
position: relative;
padding-left: 3rem;
margin-bottom: 1rem;
}
#company-initiatives section.area02 .list-area .list-block ul li::before {
position: absolute;
display: block;
content: "";
width: 2rem;
height: 2rem;
background: #ffffff;
left: 0;
border-radius: 5rem;
border: solid 4px #43b5ed;
top: 3px;
}
#company-initiatives section.area02 .list-area .list-block.contents1 h3::after {
background: -webkit-gradient(linear, left top, right top, from(#ff8080), to(#d03838));
background: -webkit-linear-gradient(left, #ff8080, #d03838);
background: -o-linear-gradient(left, #ff8080, #d03838);
background: linear-gradient(90deg, #ff8080, #d03838);
}
#company-initiatives section.area02 .list-area .list-block.contents1 ul li::before {
border: solid 4px #ff8080;
}
#company-initiatives section.area02 .list-area .list-block.contents2 h3::after {
background: -webkit-gradient(linear, left top, right top, from(#c0a0f7), to(#7d58bd));
background: -webkit-linear-gradient(left, #c0a0f7, #7d58bd);
background: -o-linear-gradient(left, #c0a0f7, #7d58bd);
background: linear-gradient(90deg, #c0a0f7, #7d58bd);
}
#company-initiatives section.area02 .list-area .list-block.contents2 ul li::before {
border: solid 4px #c0a0f7;
}
#company-initiatives section.area02 .list-area .list-block.contents3 h3::after {
background: -webkit-gradient(linear, left top, right top, from(#a1dca4), to(#387c3b));
background: -webkit-linear-gradient(left, #a1dca4, #387c3b);
background: -o-linear-gradient(left, #a1dca4, #387c3b);
background: linear-gradient(90deg, #a1dca4, #387c3b);
}
#company-initiatives section.area02 .list-area .list-block.contents3 ul li::before {
border: solid 4px #a1dca4;
}
#company-initiatives section.area02 .list-area .list-block.contents4 h3::after {
background: -webkit-gradient(linear, left top, right top, from(#e380af), to(#e6016e));
background: -webkit-linear-gradient(left, #e380af, #e6016e);
background: -o-linear-gradient(left, #e380af, #e6016e);
background: linear-gradient(90deg, #e380af, #e6016e);
}
#company-initiatives section.area02 .list-area .list-block.contents4 ul li::before {
border: solid 4px #e380af;
}
#company-initiatives section.area02 .list-area .list-block.contents5 h3::after {
background: -webkit-gradient(linear, left top, right top, from(#e7b873), to(#cd861d));
background: -webkit-linear-gradient(left, #e7b873, #cd861d);
background: -o-linear-gradient(left, #e7b873, #cd861d);
background: linear-gradient(90deg, #e7b873, #cd861d);
}
#company-initiatives section.area02 .list-area .list-block.contents5 ul li::before {
border: solid 4px #e7b873;
}
#company-initiatives section.area02 .list-area .list-block.contents6 h3::after {
background: -webkit-gradient(linear, left top, right top, from(#94dde7), to(#2a9faf));
background: -webkit-linear-gradient(left, #94dde7, #2a9faf);
background: -o-linear-gradient(left, #94dde7, #2a9faf);
background: linear-gradient(90deg, #94dde7, #2a9faf);
}
#company-initiatives section.area02 .list-area .list-block.contents6 ul li::before {
border: solid 4px #94dde7;
}
#company-initiatives section.area02 .list-area .list-block.contents5 .bg_img, #company-initiatives section.area02 .list-area .list-block.contents6 .bg_img {
position: relative;
padding-top: 70%;
}
#company-initiatives section.area02 .list-area .list-block.contents5 .bg_img img, #company-initiatives section.area02 .list-area .list-block.contents6 .bg_img img {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
font-family: "object-fit: cover;";
padding: 2rem;
}
#company-initiatives section.area03 .area-block {
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-box-align: center;
align-items: center;
}
@media (max-width: 991px) {
#company-initiatives section.area03 .area-block .text-area {
width: 100%;
}
}
#company-initiatives section.area03 .area-block .text-area .sub_read {
margin-bottom: 0;
}
@media (max-width: 991px) {
#company-initiatives section.area03 .area-block .text-area .sub_read {
margin-bottom: 3rem;
}
}
@media (max-width: 991px) {
#company-initiatives section.area03 .area-block .img-area {
width: 100%;
}
}  #pan-out {
margin-left: 230px;
position: relative;
}
@media (max-width: 767px) {
#pan-out {
margin-left: 0;
}
}
#pan-out #pan {
padding: 10px 0 0 10px;
}
@media (max-width: 480px) {
#pan-out #pan {
display: none;
}
}
#pan-out #pan ul {
list-style: none;
margin: 0;
padding: 0;
}
#pan-out #pan ul li {
display: inline-block;
margin-right: 10px;
}
#pan-out #pan ul li span {
color: #9E9E9E;
}
#pan-out #pan ul li a span {
color: #00a1e9;
font-weight: bold;
}
#pan-out #pan ul li:after {
content: ">";
margin-left: 10px;
}
#pan-out #pan ul li:last-child::after {
content: none;
}
#pan-out h2.page_lead {
margin: 0;
padding: 20px 10px;
font-size: 4rem;
}
@media (max-width: 991px) {
#pan-out h2.page_lead {
font-size: 3rem;
}
}
@media (max-width: 767px) {
#pan-out h2.page_lead {
font-size: 2.3rem;
}
}
@media (max-width: 480px) {
#pan-out h2.page_lead {
font-size: 2rem;
}
}
#pan-out h2.page_lead span {
font-size: 2.5rem;
}
@media (max-width: 991px) {
#pan-out h2.page_lead span {
font-size: 2rem;
}
}
@media (max-width: 767px) {
#pan-out h2.page_lead span {
font-size: 1.8rem;
}
}
@media (max-width: 480px) {
#pan-out h2.page_lead span {
font-size: 1.3rem;
}
}
#pan-out ul.anchor_link {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
margin: 2rem 1rem;
}
@media (max-width: 767px) {
#pan-out ul.anchor_link {
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
justify-content: center;
}
}
#pan-out ul.anchor_link li {
margin-bottom: 2rem;
}
#pan-out ul.anchor_link li a {
background: #fff;
border: solid 1px #00a1e9;
padding: 1rem 3rem;
border-radius: 5rem;
margin-right: 2rem;
display: block;
font-size: 2rem;
-webkit-box-shadow: 0 0 1rem rgba(0, 161, 233, 0.3);
box-shadow: 0 0 1rem rgba(0, 161, 233, 0.3);
-o-transition: all .3s ease;
transition: all .3s ease;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
}
@media (max-width: 480px) {
#pan-out ul.anchor_link li a {
font-size: 1.6rem;
margin-right: 0.5rem;
padding: 1rem 1.5rem;
}
}
#pan-out ul.anchor_link li a:hover {
background: #00a1e9;
color: #fff;
-webkit-box-shadow: 0 0 4rem rgba(0, 161, 233, 0.5);
box-shadow: 0 0 4rem rgba(0, 161, 233, 0.5);
}
#pan-out ul.anchor_link li:last-child a {
margin-right: 0;
}
@media (max-width: 480px) {
.page-id-1331 #pan-out h2.page_lead,
.page-id-1333 #pan-out h2.page_lead,
.page-id-1531 #pan-out h2.page_lead {
text-align: center;
}
} .item {
width: 25rem;
text-align: center;
line-height: 4rem;
border-radius: 0.5rem;
-webkit-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
color: #fff;
background-color: #4c4d55;
display: inline-block;
margin-top: 3%;
-webkit-box-shadow: 0 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.1);
}
.item .more-btn {
position: relative;
display: block;
padding: 10px;
font-size: 1.8rem;
}
@media (max-width: 991px) {
.item .more-btn {
font-size: 1.6rem;
}
}
.item .more-btn::before {
content: "";
width: 1.5rem;
position: absolute;
background-color: #fff;
height: 1px;
top: 50%;
right: 3rem;
-webkit-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
.item .more-btn::after {
content: "";
width: 8px;
position: absolute;
background-color: #fff;
height: 1px;
right: 3rem;
top: 45%;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
} .post-template-default article .entry-content .form .content-inner {
margin: 0 auto;
}
.contact-form {
max-width: 720px;
position: relative;
margin: auto;
padding: 5rem 3.5rem;
background: #fff;
-webkit-box-shadow: 0px 0px 0px 5px #fff;
box-shadow: 0px 0px 0px 5px #fff;
border: dashed 2px #ddd;
}
.contact-form.entry {
max-width: 960px;
}
@media (max-width: 991px) {
.contact-form.entry {
max-width: 100%;
margin: 0 2rem;
}
}
@media (max-width: 640px) {
.contact-form.entry {
margin: 0;
padding: 2rem;
}
}
@media (max-width: 480px) {
.contact-form.entry {
margin: 0;
padding: 1.5rem;
}
}
@media (max-width: 360px) {
.contact-form.entry {
margin: 0;
padding: 1rem;
}
}
@media (max-width: 767px) {
.contact-form {
max-width: 100%;
margin: 0 2rem;
}
}
@media (max-width: 480px) {
.contact-form {
padding: 4rem 2rem;
}
}
@media (max-width: 360px) {
.contact-form {
padding: 4rem 1rem;
margin: 0 1rem;
}
}
.contact-form:after {
position: absolute;
content: '';
right: -7px;
top: -7px;
border-width: 0 15px 15px 0;
border-style: solid;
border-color: #ddd #f5f5f5 #ddd;
-webkit-box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15);
box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15);
}
.contact-form .form-item {
margin-bottom: 3rem;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.contact-form .form-item .label-area {
width: 200px;
}
@media (max-width: 640px) {
.contact-form .form-item .label-area {
width: 100%;
margin-bottom: 1rem;
}
}
.contact-form .form-item .label-area label {
padding: 0.5rem;
display: block;
}
@media (max-width: 640px) {
.contact-form .form-item .label-area label {
padding: 0;
}
}
.contact-form .form-item .label-area label span {
font-size: 1.4rem;
color: #b70e0e;
margin-left: 0.5rem;
}
.contact-form .form-item .label-area label span.left {
margin-left: 0.0;
margin-right: 0.5rem;
}
.contact-form .form-item .form-area {
width: calc(100% - 200px);
}
@media (max-width: 640px) {
.contact-form .form-item .form-area {
width: 100%;
}
}
.contact-form .form-item .form-area input[type="text"], .contact-form .form-item .form-area input[type="email"], .contact-form .form-item .form-area input[type="url"], .contact-form .form-item .form-area input[type="password"], .contact-form .form-item .form-area input[type="search"], .contact-form .form-item .form-area input[type="number"], .contact-form .form-item .form-area input[type="tel"], .contact-form .form-item .form-area input[type="range"], .contact-form .form-item .form-area input[type="date"], .contact-form .form-item .form-area input[type="month"], .contact-form .form-item .form-area input[type="week"], .contact-form .form-item .form-area input[type="time"], .contact-form .form-item .form-area input[type="datetime"], .contact-form .form-item .form-area input[type="datetime-local"], .contact-form .form-item .form-area input[type="color"], .contact-form .form-item .form-area textarea, .contact-form .form-item .form-area select, .contact-form .form-item .form-area input[type="file"] {
padding: 0.5rem;
font-size: 1.6rem;
width: 100%;
}
.contact-form .form-item .form-area span.upfile input#upload {
padding: 0.5rem 0 2rem;
}
.contact-form .form-item .form-area.double {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
-moz-box-pack: justify;
justify-content: space-between;
}
.contact-form .form-item .form-area.double .form {
width: 48%;
}
.contact-form .form-item .form-area.triple {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.contact-form .form-item .form-area #seminar-date input,
.contact-form .form-item .form-area #seminar-date select,
.contact-form .form-item .form-area #zipcode input,
.contact-form .form-item .form-area #address1 select {
max-width: 13rem;
}
@media (max-width: 480px) {
.contact-form .form-item .form-area #seminar-date {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
-moz-box-pack: justify;
justify-content: space-between;
}
}
.contact-form .form-item .form-area #seminar-date select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
line-height: 1.1em;
margin-left: 1rem;
padding: 0.8rem;
border-radius: 3px;
}
@media (max-width: 320px) {
.contact-form .form-item .form-area #seminar-date select {
width: 12rem;
margin-left: 0;
}
}
.contact-form .form-item .form-area #address1 select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
line-height: 1.1em;
padding: 0.8rem;
border-radius: 3px;
}
.contact-form .form-item .form-area #zipcode,
.contact-form .form-item .form-area #address1,
.contact-form .form-item .form-area #address2 {
margin-bottom: 1.5rem;
}
.contact-form .form-item .form-area.address {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.contact-form .form-item .form-area.address #zipcode {
width: 150px;
margin-bottom: 2rem;
margin-right: 40rem;
}
@media (max-width: 1200px) {
.contact-form .form-item .form-area.address #zipcode {
margin-right: calc(100% - 150px);
}
}
.contact-form .form-item .form-area.address #zipcode input {
width: 13rem;
}
.contact-form .form-item .form-area.address #address1 {
width: 150px;
margin-bottom: 2rem;
}
.contact-form .form-item .form-area.address #address1 select[name="address1"] {
width: 150px;
border-radius: 3px;
padding: 6.8px;
}
.contact-form .form-item .form-area.address #address2 {
width: calc(100% - 15rem);
margin-bottom: 1.5rem;
}
@media (max-width: 480px) {
.contact-form .form-item .form-area.address #address2 {
width: 100%;
}
}
.contact-form .form-item .form-area.address #address3 {
width: 100%;
}
.contact-form .form-item .form-area #sex {
width: 100%;
}
.contact-form .form-item .form-area #sex .sex {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
@media (max-width: 767px) {
.contact-form .form-item .form-area #sex .sex .wpcf7-list-item {
width: 46%;
margin: 0 2% 3%;
}
}
.contact-form .form-item .form-area #sex .sex input {
display: none;
}
.contact-form .form-item .form-area #sex .sex input:checked + .wpcf7-list-item-label {
background: #fe8919;
color: #fff !important;
border: 1px solid #7b5648;
}
.contact-form .form-item .form-area #sex .sex input:checked + .wpcf7-list-item-label::before {
border: 1px solid #795548;
}
.contact-form .form-item .form-area #sex .sex input:checked + .wpcf7-list-item-label::after {
left: 1.9rem;
background: #fe8919;
}
@media (max-width: 1200px) {
.contact-form .form-item .form-area #sex .sex input:checked + .wpcf7-list-item-label::after {
left: 1.6vw;
}
}
@media (max-width: 767px) {
.contact-form .form-item .form-area #sex .sex input:checked + .wpcf7-list-item-label::after {
left: 1.9rem;
}
}
.contact-form .form-item .form-area #sex .sex .wpcf7-list-item-label {
position: relative;
padding: 1.5rem 1rem 1.5rem 4.5rem;
-webkit-transition: .3s;
-o-transition: .3s;
transition: .3s;
color: #fff;
background: #999;
border-radius: 1rem;
border: 1px solid #999;
display: inline-block;
line-height: 1;
cursor: pointer;
-webkit-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
min-width: 88px;
font-weight: 500;
}
@media (max-width: 1200px) {
.contact-form .form-item .form-area #sex .sex .wpcf7-list-item-label {
padding: 1.3vw 0.85vw 1.3vw 3.75vw;
}
}
@media (max-width: 767px) {
.contact-form .form-item .form-area #sex .sex .wpcf7-list-item-label {
padding: 1.5rem 1rem 1.5rem 4.5rem;
width: 100%;
}
}
.contact-form .form-item .form-area #sex .sex .wpcf7-list-item-label:hover {
opacity: 0.8;
}
.contact-form .form-item .form-area #sex .sex .wpcf7-list-item-label::before {
content: "";
display: block;
left: 0.6rem;
width: 3rem;
height: 2rem;
border-radius: 2rem;
border: 1px solid #aaa;
background: #fff;
position: absolute;
}
@media (max-width: 1200px) {
.contact-form .form-item .form-area #sex .sex .wpcf7-list-item-label::before {
left: 0.5vw;
width: 2.5vw;
height: 1.65vw;
}
}
@media (max-width: 767px) {
.contact-form .form-item .form-area #sex .sex .wpcf7-list-item-label::before {
left: 0.6rem;
width: 3rem;
height: 2rem;
}
}
.contact-form .form-item .form-area #sex .sex .wpcf7-list-item-label::after {
content: "";
display: block;
position: absolute;
top: 1.8rem;
left: 0.8rem;
width: 1.4rem;
height: 1.4rem;
background: #aaa;
border-radius: 50%;
-webkit-transition: .2s;
-o-transition: .2s;
transition: .2s;
display: block;
}
@media (max-width: 1200px) {
.contact-form .form-item .form-area #sex .sex .wpcf7-list-item-label::after {
top: 1.5vw;
left: 0.7vw;
width: 1.2vw;
height: 1.2vw;
}
}
@media (max-width: 767px) {
.contact-form .form-item .form-area #sex .sex .wpcf7-list-item-label::after {
top: 1.8rem;
left: 0.8rem;
width: 1.4rem;
height: 1.4rem;
}
}
.contact-form .form-item .form-area #sex .sex .wpcf7-list-item.first input:checked + .wpcf7-list-item-label {
background: #E91E63;
}
.contact-form .form-item .form-area #sex .sex .wpcf7-list-item.first input:checked + .wpcf7-list-item-label::after {
background: #E91E63;
}
.contact-form .form-item .form-area #sex .sex .wpcf7-list-item.last input:checked + .wpcf7-list-item-label {
background: #2196f3;
}
.contact-form .form-item .form-area #sex .sex .wpcf7-list-item.last input:checked + .wpcf7-list-item-label::after {
background: #2196f3;
}
.contact-form .form-item .form-area #birth-year {
position: relative;
width: 100px;
margin-right: 5rem;
}
.contact-form .form-item .form-area #birth-year:after {
content: "年";
position: absolute;
top: 8px;
right: -25px;
}
@media (max-width: 360px) {
.contact-form .form-item .form-area #birth-year:after {
top: 16px;
right: -20px;
}
}
@media (max-width: 480px) {
.contact-form .form-item .form-area #birth-year {
margin-right: 3rem;
}
}
.contact-form .form-item .form-area #birth-month {
position: relative;
width: 80px;
margin-right: 5rem;
}
.contact-form .form-item .form-area #birth-month:after {
content: "月";
position: absolute;
top: 8px;
right: -25px;
}
@media (max-width: 360px) {
.contact-form .form-item .form-area #birth-month:after {
top: 16px;
right: -20px;
}
}
@media (max-width: 480px) {
.contact-form .form-item .form-area #birth-month {
margin-right: 3rem;
width: 50px;
}
}
.contact-form .form-item .form-area #birth-day {
position: relative;
width: 80px;
}
.contact-form .form-item .form-area #birth-day:after {
content: "日";
position: absolute;
top: 8px;
right: -25px;
}
@media (max-width: 360px) {
.contact-form .form-item .form-area #birth-day:after {
top: 16px;
right: -20px;
}
}
@media (max-width: 480px) {
.contact-form .form-item .form-area #birth-day {
width: 50px;
}
}
.contact-form .privacy-area {
border-top: dotted 1px #02a1e9;
padding: 5rem 0 0;
max-width: 1000px;
margin: auto;
}
@media (max-width: 1200px) {
.contact-form .privacy-area {
width: 100%;
}
}
@media (max-width: 991px) {
.contact-form .privacy-area {
padding: 3rem 0;
}
}
.contact-form .privacy-area #privacy {
width: 100%;
margin-top: 2rem;
}
.contact-form .privacy-area #privacy .policy {
width: 100%;
height: 30rem;
overflow: auto;
background: #fff;
padding: 4rem;
border: double 4px #233c86;
}
@media (max-width: 480px) {
.contact-form .privacy-area #privacy .policy {
height: 50rem;
padding: 2rem 1rem;
}
}
.contact-form .privacy-area #privacy .policy h2 {
text-align: center;
font-size: 2.5rem;
margin-bottom: 2rem;
}
@media (max-width: 480px) {
.contact-form .privacy-area #privacy .policy h2 {
font-size: 2rem;
}
}
.contact-form .privacy-area #privacy .policy h3 {
font-size: 2rem;
border-top: dotted 1px #ccc;
padding-top: 2rem;
margin-top: 2rem;
}
@media (max-width: 480px) {
.contact-form .privacy-area #privacy .policy h3 {
font-size: 1.8rem;
}
}
.contact-form .privacy-area #privacy .policy ol {
padding: 1rem 0;
}
.contact-form .privacy-area #privacy .policy ol li {
text-indent: -2rem;
padding-left: 6rem;
margin-bottom: 1rem;
}
@media (max-width: 480px) {
.contact-form .privacy-area #privacy .policy ol li {
text-indent: -2.5rem;
padding-left: 3rem;
font-size: 1.6rem;
}
}
.contact-form .privacy-area #privacy .policy p {
text-indent: 0rem;
padding-left: 4rem;
margin: 1rem 0;
}
@media (max-width: 480px) {
.contact-form .privacy-area #privacy .policy p {
font-size: 1.6rem;
padding-left: 1rem;
}
}
.contact-form .privacy-area #privacy .policy p a {
float: right;
padding: 1rem;
background: #3caee6;
color: #fff;
margin: 1rem 0;
border-radius: 0.5rem;
-o-transition: all .3s ease;
transition: all .3s ease;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
}
.contact-form .privacy-area #privacy .policy p a:hover {
opacity: 0.8;
}
.contact-form .privacy-area #privacy .policy .infomation {
margin-top: 5rem;
}
.contact-form .privacy-area #privacy .policy .infomation h4 {
padding-left: 4rem;
}
@media (max-width: 480px) {
.contact-form .privacy-area #privacy .policy .infomation h4 {
padding: 0;
}
}
@media (max-width: 480px) {
.contact-form .privacy-area #privacy .policy .infomation {
margin-top: 3rem;
border-top: dotted 1px #ccc;
padding-top: 3rem;
}
.contact-form .privacy-area #privacy .policy .infomation p {
padding: 0;
}
}
.contact-form .privacy-area .your-consent {
display: block;
text-align: center;
margin-top: 1rem;
}
.contact-form .submit-area {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
justify-content: center;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.contact-form .submit-area span.wpcf7-form-control-wrap {
width: 100%;
text-align: center;
padding-bottom: 2rem;
}
.contact-form .submit-area span.wpcf7-spinner {
position: absolute;
}
.contact-form .submit-area .your-consent {
display: block;
width: 100%;
text-align: center;
margin: 0 0 3rem;
}
.contact-form .submit-area .submit-btn2 {
position: relative;
}
.contact-form .submit-area .submit-btn2 input {
cursor: pointer;
padding: 2rem 3rem;
min-width: 20rem;
font-size: 1.8rem;
background: #02a1e9;
border: solid 1px #02a1e9;
color: #fff;
-o-transition: all .3s ease;
transition: all .3s ease;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-webkit-box-shadow: 0 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.1);
}
.contact-form .submit-area .submit-btn2 input:hover {
background: #fff;
color: #02a1e9;
border: solid 1px #02a1e9;
-webkit-transform: translateY(-2px);
-ms-transform: translateY(-2px);
transform: translateY(-2px);
-webkit-box-shadow: 0.5rem 0.5rem 2rem rgba(0, 0, 0, 0.3), inset 0 0 5rem white;
box-shadow: 0.5rem 0.5rem 2rem rgba(0, 0, 0, 0.3), inset 0 0 5rem white;
}
.contact-form .submit-area .submit-btn2 input[type="submit"][disabled],
.contact-form .submit-area .submit-btn2 input[type="submit"][disabled]:hover,
.contact-form .submit-area .submit-btn2 input[type="submit"][disabled]:focus {
cursor: not-allowed;
background: #9e9e9e;
border: solid 1px #ccc;
color: #fff;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
-webkit-box-shadow: none;
box-shadow: none;
}
.contact-form .submit-area .submit-btn2 .ajax-loader {
position: absolute;
top: 35%;
}
@media (max-width: 991px) {
.contact-form.entry .label-area, .contact-form.entry .form-area {
width: 100%;
}
}
.contact-form.entry #address1 select[name="address1"] {
max-width: 100%;
}
@media (max-width: 480px) {
.contact-form.entry #address2 {
width: 100%;
margin-bottom: 2rem;
}
}
@media (max-width: 480px) {
.contact-form.entry #address3 {
width: 100%;
}
}
.contact-form.entry #phone {
width: 48%;
}
@media (max-width: 480px) {
.contact-form.entry #phone {
width: 100%;
}
}
@media (max-width: 480px) {
.contact-form.entry #email, .contact-form.entry #email_confirml {
width: 100%;
}
}
@media (max-width: 480px) {
.contact-form.entry #email {
margin-bottom: 2rem;
}
}
.contact-form.entry .submit-area {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
justify-content: center;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
padding: 4rem 0 0;
margin-top: 0;
}
@media (max-width: 640px) {
.contact-form.entry .submit-area {
padding: 0 0 2rem;
}
}
.contact-form.entry .submit-area .submit-btn, .contact-form.entry .submit-area .submit-btn2 {
position: relative;
}
@media (max-width: 640px) {
.contact-form.entry .submit-area .submit-btn, .contact-form.entry .submit-area .submit-btn2 {
width: 100%;
}
}
.contact-form.entry .submit-area .submit-btn input[type="submit"][disabled],
.contact-form.entry .submit-area .submit-btn input[type="submit"][disabled]:hover,
.contact-form.entry .submit-area .submit-btn input[type="submit"][disabled]:focus, .contact-form.entry .submit-area .submit-btn2 input[type="submit"][disabled],
.contact-form.entry .submit-area .submit-btn2 input[type="submit"][disabled]:hover,
.contact-form.entry .submit-area .submit-btn2 input[type="submit"][disabled]:focus {
background: #9e9e9e;
}
.contact-form.entry .submit-area .submit-btn input[type="button"],
.contact-form.entry .submit-area .submit-btn input[type=submit], .contact-form.entry .submit-area .submit-btn2 input[type="button"],
.contact-form.entry .submit-area .submit-btn2 input[type=submit] {
width: 500px;
padding: 2rem 10rem;
background: #223c86;
color: #fff;
border-radius: 10px;
font-size: 2.4rem;
font-weight: 800;
position: relative;
-o-transition: all .3s ease;
transition: all .3s ease;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
}
.contact-form.entry .submit-area .submit-btn input[type="button"]:hover,
.contact-form.entry .submit-area .submit-btn input[type=submit]:hover, .contact-form.entry .submit-area .submit-btn2 input[type="button"]:hover,
.contact-form.entry .submit-area .submit-btn2 input[type=submit]:hover {
opacity: 0.8;
}
@media (max-width: 640px) {
.contact-form.entry .submit-area .submit-btn input[type="button"],
.contact-form.entry .submit-area .submit-btn input[type=submit], .contact-form.entry .submit-area .submit-btn2 input[type="button"],
.contact-form.entry .submit-area .submit-btn2 input[type=submit] {
width: 100%;
padding: 2rem;
}
}
@media (max-width: 480px) {
.contact-form.entry .submit-area .submit-btn input[type="button"],
.contact-form.entry .submit-area .submit-btn input[type=submit], .contact-form.entry .submit-area .submit-btn2 input[type="button"],
.contact-form.entry .submit-area .submit-btn2 input[type=submit] {
width: 100%;
padding: 2rem 4rem 2rem 2rem;
font-size: 1.8rem;
}
}
@media (max-width: 320px) {
.contact-form.entry .submit-area .submit-btn input[type="button"],
.contact-form.entry .submit-area .submit-btn input[type=submit], .contact-form.entry .submit-area .submit-btn2 input[type="button"],
.contact-form.entry .submit-area .submit-btn2 input[type=submit] {
padding: 2rem 3rem 2rem 2rem;
font-size: 1.6rem;
}
}
.contact-form.entry .submit-area .submit-btn2 input[type="button"] {
background: #24408e;
width: 200px;
padding: 2rem;
margin: 0 2rem;
}
.contact-form.entry .submit-area .submit-btn2 input[type="button"]:hover {
opacity: 0.8;
}
@media (max-width: 640px) {
.contact-form.entry .submit-area .submit-btn2 input[type="button"] {
width: 100%;
margin-bottom: 3rem;
}
}
.contact-form.entry .submit-area .submit-btn2 input[type=submit] {
background: #e91e63;
width: 200px;
padding: 2rem;
margin: 0 2rem;
}
.contact-form.entry .submit-area .submit-btn2 input[type=submit]:hover {
opacity: 0.8;
}
@media (max-width: 640px) {
.contact-form.entry .submit-area .submit-btn2 input[type=submit] {
width: 100%;
}
} .nav-subtitle-inner {
max-width: 1200px;
padding: 3rem 1rem 2rem;
margin: 0 auto;
}
@media (max-width: 480px) {
.nav-subtitle-inner .nav-links {
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
}
.nav-subtitle-inner .nav-links .nav-previous,
.nav-subtitle-inner .nav-links .nav-next {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
}
@media (max-width: 480px) {
.nav-subtitle-inner .nav-links .nav-previous,
.nav-subtitle-inner .nav-links .nav-next {
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-flex: 1;
-webkit-flex: 1 0 100%;
-moz-box-flex: 1;
-ms-flex: 1 0 100%;
flex: 1 0 100%;
}
}
.nav-subtitle-inner .nav-links .nav-previous a,
.nav-subtitle-inner .nav-links .nav-next a {
width: 95%;
border: solid 1px #02a1e9;
background: #fff;
padding: 2rem 2rem 0.5rem;
position: relative;
-o-transition: all .3s ease;
transition: all .3s ease;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-webkit-box-shadow: 0 0 1rem rgba(33, 150, 243, 0.2), inset 0 0 3rem rgba(0, 0, 0, 0.1);
box-shadow: 0 0 1rem rgba(33, 150, 243, 0.2), inset 0 0 3rem rgba(0, 0, 0, 0.1);
}
.nav-subtitle-inner .nav-links .nav-previous a span.navi,
.nav-subtitle-inner .nav-links .nav-next a span.navi {
position: absolute;
top: -25px;
background: #fff;
border: solid 1px #02a1e9;
color: #02a1e9;
border-radius: 5rem;
padding: 0.5rem 1.5rem;
font-size: 3rem;
font-weight: 700;
line-height: 1;
-webkit-box-shadow: 0 0 1rem rgba(33, 150, 243, 0.2), inset 0 0 3rem rgba(0, 0, 0, 0.1);
box-shadow: 0 0 1rem rgba(33, 150, 243, 0.2), inset 0 0 3rem rgba(0, 0, 0, 0.1);
-o-transition: all .3s ease;
transition: all .3s ease;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
}
.nav-subtitle-inner .nav-links .nav-previous a span.date,
.nav-subtitle-inner .nav-links .nav-next a span.date {
display: block;
text-align: left;
border-bottom: dashed 1px #02a1e9;
padding-bottom: 0.5rem;
margin-bottom: 0.5rem;
}
.nav-subtitle-inner .nav-links .nav-previous a:hover,
.nav-subtitle-inner .nav-links .nav-next a:hover {
background: #02a1e9;
color: #fff;
-webkit-box-shadow: 0 0 2rem rgba(33, 150, 243, 0.2);
box-shadow: 0 0 2rem rgba(33, 150, 243, 0.2);
}
.nav-subtitle-inner .nav-links .nav-previous a:hover span.navi,
.nav-subtitle-inner .nav-links .nav-next a:hover span.navi {
background: #02a1e9;
border: solid 1px #fff;
color: #fff;
}
.nav-subtitle-inner .nav-links .nav-previous a:hover span.date,
.nav-subtitle-inner .nav-links .nav-next a:hover span.date {
border-bottom: dashed 1px #fff;
}
.nav-subtitle-inner .nav-links .nav-previous {
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-moz-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
@media (max-width: 480px) {
.nav-subtitle-inner .nav-links .nav-previous {
margin-bottom: 5rem;
}
}
.nav-subtitle-inner .nav-links .nav-previous a span.navi {
left: 2rem;
}
.nav-subtitle-inner .nav-links .nav-previous a span.navi::after {
content: "";
display: block;
width: 4rem;
height: 6rem;
position: absolute;
background-image: url(//hoshizaki-shonan.co.jp/wps/wp-content/themes/hoshizaki-shonan/img/pencil1.png);
background-repeat: no-repeat;
background-size: contain;
top: -1.5rem;
right: -3.5rem;
-webkit-transition: .5s;
-o-transition: .5s;
transition: .5s;
-webkit-transform: rotateZ(0deg);
-ms-transform: rotate(0deg);
transform: rotateZ(0deg);
}
.nav-subtitle-inner .nav-links .nav-previous a:hover span.navi {
left: 0;
}
.nav-subtitle-inner .nav-links .nav-previous a:hover span.navi::after {
-webkit-transform: rotateZ(360deg);
-ms-transform: rotate(360deg);
transform: rotateZ(360deg);
}
.nav-subtitle-inner .nav-links .nav-next {
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
-moz-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
text-align: left;
}
.nav-subtitle-inner .nav-links .nav-next a span.navi {
right: 2rem;
}
.nav-subtitle-inner .nav-links .nav-next a span.navi::before {
content: "";
display: block;
width: 4rem;
height: 6rem;
position: absolute;
background-image: url(//hoshizaki-shonan.co.jp/wps/wp-content/themes/hoshizaki-shonan/img/pencil2.png);
background-repeat: no-repeat;
background-size: contain;
top: -1.5rem;
left: -2rem;
-webkit-transition: .5s;
-o-transition: .5s;
transition: .5s;
-webkit-transform: rotateZ(0deg);
-ms-transform: rotate(0deg);
transform: rotateZ(0deg);
}
.nav-subtitle-inner .nav-links .nav-next a:hover span.navi {
right: 0;
}
.nav-subtitle-inner .nav-links .nav-next a:hover span.navi::before {
-webkit-transform: rotateZ(360deg);
-ms-transform: rotate(360deg);
transform: rotateZ(360deg);
} #page-top {
display: none;
position: fixed;
bottom: 107px;
right: 10px;
z-index: 1000;
}
@media (max-width: 767px) {
#page-top {
bottom: 103px;
}
}
#page-top a {
width: 50px;
height: 50px;
border: solid #00a1e9;
border-radius: 50%;
padding: 20px 0;
text-align: center;
display: block;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#page-top a::before {
content: "";
width: 0;
height: 0;
position: absolute;
bottom: 16px;
left: 0;
right: 0;
margin: auto;
border: 13px solid transparent;
border-bottom: 18px solid #00a1e9;
}
#page-top a::after {
content: "";
width: 0;
height: 0;
position: absolute;
bottom: 16px;
left: 0;
right: -8px;
margin: auto;
border-right: 8px solid transparent;
border-bottom: 18px solid #fff;
}
#page-top a:hover::before, #page-top a:hover::after {
-webkit-animation: vertical 0.05s ease-in-out infinite alternate;
animation: vertical 0.05s ease-in-out infinite alternate;
} @-webkit-keyframes vertical {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: translateY(-2px);
transform: translateY(-2px);
}
}
@keyframes vertical {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: translateY(-2px);
transform: translateY(-2px);
}
}
@-webkit-keyframes vertical-out {
0% {
-webkit-transform: translateY(-2px);
transform: translateY(-2px);
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes vertical-out {
0% {
-webkit-transform: translateY(-2px);
transform: translateY(-2px);
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
} .smartphoto {
background: rgba(0, 0, 0, 0.8);
}  @-webkit-keyframes zoomUp {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
}
@keyframes zoomUp {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
}
@-webkit-keyframes zoomOut {
0% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes zoomOut {
0% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
} .off.bg_img {
opacity: 0;
-webkit-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
overflow: hidden;
position: relative;
}
.off.bg_img:before {
content: '';
display: block;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.6);
position: absolute;
top: 0;
left: 0;
z-index: 2;
-webkit-transition: opacity, visibility, -webkit-transform;
transition: opacity, visibility, -webkit-transform;
-o-transition: opacity, transform, visibility;
transition: opacity, transform, visibility;
transition: opacity, transform, visibility, -webkit-transform;
-webkit-transition-duration: 1.3s;
-o-transition-duration: 1.3s;
transition-duration: 1.3s;
-webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
-o-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
-webkit-transition-delay: 0.5s;
-o-transition-delay: 0.5s;
transition-delay: 0.5s;
}
.off.bg_img:after {
content: '';
display: block;
width: 100%;
height: 100%;
background-color: white;
position: absolute;
top: 0;
left: 0;
z-index: 3;
-webkit-transition: opacity, visibility, -webkit-transform;
transition: opacity, visibility, -webkit-transform;
-o-transition: opacity, transform, visibility;
transition: opacity, transform, visibility;
transition: opacity, transform, visibility, -webkit-transform;
-webkit-transition-duration: 0.85s;
-o-transition-duration: 0.85s;
transition-duration: 0.85s;
-webkit-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
-o-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
}
.off.bg_img.on {
opacity: 1;
-webkit-transform: none;
-ms-transform: none;
transform: none;
}
.off.bg_img.on:before, .off.bg_img.on:after {
opacity: 0;
-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%);
visibility: hidden;
}
.off.text {
opacity: 0;
-webkit-transform: translate(0, 45px);
-ms-transform: translate(0, 45px);
transform: translate(0, 45px);
-webkit-transition: 1s all ease 0s;
-o-transition: 1s all ease 0s;
transition: 1s all ease 0s;
}
.off.text.on {
opacity: 1;
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
} .off {
opacity: 0;
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
-webkit-transition: 0.8s all ease 0s;
-o-transition: 0.8s all ease 0s;
transition: 0.8s all ease 0s;
}
.off.up {
opacity: 0;
-webkit-transform: translate(0, 45px);
-ms-transform: translate(0, 45px);
transform: translate(0, 45px);
-webkit-transition: 0.8s all ease 0s;
-o-transition: 0.8s all ease 0s;
transition: 0.8s all ease 0s;
}
.off.up1 {
opacity: 0;
-webkit-transform: translate(0, 45px);
-ms-transform: translate(0, 45px);
transform: translate(0, 45px);
-webkit-transition: 0.8s all ease 0s;
-o-transition: 0.8s all ease 0s;
transition: 0.8s all ease 0s;
}
.off.up2 {
opacity: 0;
-webkit-transform: translate(0, 45px);
-ms-transform: translate(0, 45px);
transform: translate(0, 45px);
-webkit-transition: 0.8s all ease 0s;
-o-transition: 0.8s all ease 0s;
transition: 0.8s all ease 0s;
-webkit-transition-delay: 0.5s;
-o-transition-delay: 0.5s;
transition-delay: 0.5s;
}
@media (max-width: 991px) {
.off.up2 {
-webkit-transition-delay: 0;
-o-transition-delay: 0;
transition-delay: 0;
}
}
.off.up3 {
opacity: 0;
-webkit-transform: translate(0, 45px);
-ms-transform: translate(0, 45px);
transform: translate(0, 45px);
-webkit-transition: 0.8s all ease 0s;
-o-transition: 0.8s all ease 0s;
transition: 0.8s all ease 0s;
-webkit-transition-delay: 1s;
-o-transition-delay: 1s;
transition-delay: 1s;
}
@media (max-width: 991px) {
.off.up3 {
-webkit-transition-delay: 0;
-o-transition-delay: 0;
transition-delay: 0;
}
}
.off.down {
opacity: 0;
-webkit-transform: translate(0, -45px);
-ms-transform: translate(0, -45px);
transform: translate(0, -45px);
-webkit-transition: 0.8s all ease 0s;
-o-transition: 0.8s all ease 0s;
transition: 0.8s all ease 0s;
}
.off.left {
opacity: 0;
-webkit-transform: translate(-45px, 0);
-ms-transform: translate(-45px, 0);
transform: translate(-45px, 0);
-webkit-transition: 0.8s all ease 0s;
-o-transition: 0.8s all ease 0s;
transition: 0.8s all ease 0s;
}
.off.left1 {
opacity: 0;
-webkit-transform: translate(-45px, 0);
-ms-transform: translate(-45px, 0);
transform: translate(-45px, 0);
-webkit-transition: 0.8s all ease 0s;
-o-transition: 0.8s all ease 0s;
transition: 0.8s all ease 0s;
}
.off.left2 {
opacity: 0;
-webkit-transform: translate(-45px, 0);
-ms-transform: translate(-45px, 0);
transform: translate(-45px, 0);
-webkit-transition: 0.8s all ease 0s;
-o-transition: 0.8s all ease 0s;
transition: 0.8s all ease 0s;
-webkit-transition-delay: 0.5s;
-o-transition-delay: 0.5s;
transition-delay: 0.5s;
}
@media (max-width: 991px) {
.off.left2 {
-webkit-transition-delay: 0;
-o-transition-delay: 0;
transition-delay: 0;
}
}
.off.left3 {
opacity: 0;
-webkit-transform: translate(-45px, 0);
-ms-transform: translate(-45px, 0);
transform: translate(-45px, 0);
-webkit-transition: 0.8s all ease 0s;
-o-transition: 0.8s all ease 0s;
transition: 0.8s all ease 0s;
-webkit-transition-delay: 1s;
-o-transition-delay: 1s;
transition-delay: 1s;
}
@media (max-width: 991px) {
.off.left3 {
-webkit-transition-delay: 0;
-o-transition-delay: 0;
transition-delay: 0;
}
}
.off.right {
opacity: 0;
-webkit-transform: translate(45px, 0);
-ms-transform: translate(45px, 0);
transform: translate(45px, 0);
-webkit-transition: 0.8s all ease 0s;
-o-transition: 0.8s all ease 0s;
transition: 0.8s all ease 0s;
}
.off.right1 {
opacity: 0;
-webkit-transform: translate(45px, 0);
-ms-transform: translate(45px, 0);
transform: translate(45px, 0);
-webkit-transition: 0.8s all ease 0s;
-o-transition: 0.8s all ease 0s;
transition: 0.8s all ease 0s;
}
.off.right2 {
opacity: 0;
-webkit-transform: translate(45px, 0);
-ms-transform: translate(45px, 0);
transform: translate(45px, 0);
-webkit-transition: 0.8s all ease 0s;
-o-transition: 0.8s all ease 0s;
transition: 0.8s all ease 0s;
-webkit-transition-delay: 0.5s;
-o-transition-delay: 0.5s;
transition-delay: 0.5s;
}
@media (max-width: 991px) {
.off.right2 {
-webkit-transition-delay: 0;
-o-transition-delay: 0;
transition-delay: 0;
}
}
.off.right3 {
opacity: 0;
-webkit-transform: translate(45px, 0);
-ms-transform: translate(45px, 0);
transform: translate(45px, 0);
-webkit-transition: 0.8s all ease 0s;
-o-transition: 0.8s all ease 0s;
transition: 0.8s all ease 0s;
-webkit-transition-delay: 1s;
-o-transition-delay: 1s;
transition-delay: 1s;
}
@media (max-width: 991px) {
.off.right3 {
-webkit-transition-delay: 0;
-o-transition-delay: 0;
transition-delay: 0;
}
}
.off.on {
opacity: 1;
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
}