@charset "utf-8";
/*------------------------------------------
* Media Query
------------------------------------------*/
@media only screen and (min-width: 1680px) {
#page-message .sec-message .sec-in, .page-header-in, .sec-message-top .sec-in {
width: 100%!important;
}
#page-member .sec-employee .sec-in::after, #page-work .sec-root .sec-root-three .sec-in::before {
left: -35%;
}
#page-message .sec-message .sec-in::before, .page-header-in::before, .sec-message-top .sec-in::before {
left: 0!important;
}
.page-header-in::after, .sec-message-top .sec-in::after {
right: 0!important;
}
}
@media only screen and (max-width: 1320px) {
/*------------------------------------------
* Header
------------------------------------------*/
#header .header-in {
display: flex;
align-items: center;
padding: 0 0 0 30px;
box-sizing: border-box;
}
#nav-global .nav-global-in li {
margin: 0 20px 0 0;
}
#header #nav-global .nav-global-in li a {
font-size: 13px;
}
#nav-global .area-btn {}
#nav-global .area-btn a {
position: relative;
display: block;
width: 150px;
height: 48px;
line-height: 48px;
text-align: center;
font-size: 14px;
font-weight: bold;
color: #fff;
}
}
@media only screen and (max-width: 1130px) {
body.is-show #header #nav-global .nav-global-in li a {
font-size: 12px;
}
}
@media only screen and (max-width: 1082px) {
body.is-show #header #nav-global .nav-global-in li a {
font-size: 11px;
}
}
@media only screen and (max-width: 1060px) {
#header .header-in {
padding: 0 0 0 20px;
}
#nav-global .nav-global-in li {
margin: 0 16px 0 0;
}
}
@media only screen and (max-width: 834px) {
body {
min-width: inherit;
font-size: 13px;
}
.is-pc {
display: none;
}
.is-sp {
display: block;
}
.is-sp-block {
display: block!important;
}
#js-loading .area-loading .img {
margin-top: -46px;
}
#js-loading .area-loading .img img {
width: 160px;
height: 92px;
}
/*------------------------------------------
* Header
------------------------------------------*/
#header {
position: relative;
background: transparent;
z-index: 1001;
}
body.nav-global-show #header, body.is-show #header {
position: fixed;
top: 0;
left: -360px;
height: 100%;
padding: 0 14px;
box-sizing: border-box;
transition: all .4s cubic-bezier(0.190, 1.000, 0.220, 1.000);
width: auto;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
min-width: auto;
}
body.is-show #header .logo, body.is-show #header .header-child {
opacity: 1;
visibility: visible;
}
body.nav-global-show #header, body.is-show.nav-global-show #header {
position: fixed;
left: 0;
background: #1569e7;
width: 100%;
}
#header .header-in {
display: block;
padding: 0;
min-width: inherit;
}
body.nav-global-show #header .header-in, body.is-show.nav-global-show #header .header-in {
display: block;
padding: 30px 0 0;
}
#header .header-in .logo {
margin-right: auto;
padding: 3px 10px 0;
position: relative;
top: -2px;
}
#page-home #header .header-in .logo {
position: absolute;
}
#header .header-in .logo a {
display: flex;
align-items: center;
}
#header .header-in .logo a img {
width: 185px;
height: auto;
padding: 0;
}
body.nav-global-show #header .logo, body.is-show.nav-global-show #header .logo {
opacity: 0;
position: absolute;
}
#header .header-in .logo span {
display: block;
margin: 0 0 0 4px;
font-size: 10px;
font-weight: bold;
letter-spacing: 0.1em;
color: #666;
position: relative;
top: 2px;
}
#header .header-child {
display: none;
}
body.nav-global-show #header .header-child {
opacity: 1;
visibility: visible;
display: block;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
#nav-global {
display: none;
}
body.nav-global-show #header #nav-global, body.is-show.nav-global-show #header #nav-global {
display: block;
}
#nav-global .nav-global-in {
display: flex;
}
body.nav-global-show #header #nav-global .nav-global-in, body.is-show.nav-global-show #header #nav-global .nav-global-in {
display: block;
}
#nav-global .nav-global-in li {
margin: 0 40px 0 0;
}
#nav-global .nav-global-in .nav-home {
display: none;
}
body.nav-global-show #header #nav-global .nav-global-in li, body.is-show.nav-global-show #header #nav-global .nav-global-in li {
margin: 0 0 28px;
}
body.nav-global-show #header #nav-global .nav-global-in .nav-home, body.is-show.nav-global-show #header #nav-global .nav-global-in .nav-home {
display: block;
}
#nav-global .nav-global-in li a {
display: block;
font-size: 15px;
font-weight: bold;
}
#nav-global .nav-global-in li a span {
display: none;
margin: 0 0 6px;
}
body.nav-global-show #nav-global .nav-global-in li a, body.is-show.nav-global-show #nav-global .nav-global-in li a {
color: #fff;
}
body.nav-global-show #header #nav-global .nav-global-in li a, body.is-show.nav-global-show #header #nav-global .nav-global-in li a {
letter-spacing: 0.03em;
font-size: 15px;
}
body.nav-global-show #nav-global .nav-global-in li a span, body.is-show.nav-global-show #nav-global .nav-global-in li a span {
display: block;
}
body.nav-global-show #nav-global .nav-global-in li a span svg, body.is-show.nav-global-show #nav-global .nav-global-in li a span svg {
height: 18px;
fill: #fff;
transition: all .15s ease-in-out 0s;
}
body.nav-global-show #nav-global .area-btn .is-sp {
margin: 0 auto 45px;
padding: 24px 32px 14px;
background-color: #fff;
box-sizing: border-box;
}
body.nav-global-show #nav-global .area-btn .is-sp p {
margin-bottom: 15px;
text-align: center;
font-size: 16px;
font-weight: 600;
letter-spacing: .03em;
}
body.nav-global-show #nav-global .area-btn a, body.is-show.nav-global-show #nav-global .area-btn a {
width: 100%;
margin: 0 auto 10px;
/* text-align: left; */
/* padding-left: 30px; */
box-sizing: border-box;
}
body.nav-global-show #nav-global .area-btn a span, body.is-show.nav-global-show #nav-global .area-btn a span {
font-size: 12px;
}
body.nav-global-show #nav-global .area-btn .fresh, body.is-show.nav-global-show #nav-global .area-btn .fresh {
background: #fff;
color: #1569e7;
}
body.nav-global-show #nav-global .area-btn .fresh:hover span, body.is-show.nav-global-show #nav-global .area-btn .fresh:hover span {
color: #fff;
}
body.nav-global-show #nav-global .area-btn .fresh::after, body.is-show.nav-global-show #nav-global .area-btn .fresh::after {
border-left-color: #1569e7;
}
body.nav-global-show #nav-global .area-btn .fresh:hover::after, body.is-show.nav-global-show #nav-global .area-btn .fresh:hover::after {
border-left-color: #fff;
}
body.nav-global-show #nav-global .nav-global-in li .home:hover, body.is-show.nav-global-show #nav-global .nav-global-in li .home:hover {
color: #222;
}
body.nav-global-show #nav-global .nav-global-in li .home:hover span svg, body.is-show.nav-global-show #nav-global .nav-global-in li .home:hover span svg {
fill: #222;
}
#nav-global .nav-global-in li .message:hover, body.nav-global-show #nav-global .nav-global-in li .message:hover, body.is-show.nav-global-show #nav-global .nav-global-in li .message:hover {
color: #f32e1c;
}
body.nav-global-show #nav-global .nav-global-in li .message:hover span svg, body.is-show.nav-global-show #nav-global .nav-global-in li .message:hover span svg {
fill: #f32e1c;
}
#nav-global .nav-global-in li .about:hover, body.nav-global-show #nav-global .nav-global-in li .about:hover, body.is-show.nav-global-show #nav-global .nav-global-in li .about:hover {
color: #f0cc0d;
}
body.nav-global-show #nav-global .nav-global-in li .about:hover span svg, body.is-show.nav-global-show #nav-global .nav-global-in li .about:hover span svg {
fill: #f0cc0d;
}
#nav-global .nav-global-in li .work:hover, body.nav-global-show #nav-global .nav-global-in li .work:hover, body.is-show.nav-global-show #nav-global .nav-global-in li .work:hover {
color: #fb76ba;
}
body.nav-global-show #nav-global .nav-global-in li .work:hover span svg, body.is-show.nav-global-show #nav-global .nav-global-in li .work:hover span svg {
fill: #fb76ba;
}
#nav-global .nav-global-in li .member:hover, body.nav-global-show #nav-global .nav-global-in li .member:hover, body.is-show.nav-global-show #nav-global .nav-global-in li .member:hover {
color: #039ada;
}
body.nav-global-show #nav-global .nav-global-in li .member:hover span svg, body.is-show.nav-global-show #nav-global .nav-global-in li .member:hover span svg {
fill: #039ada;
}
#nav-global .nav-global-in li .environment:hover, body.nav-global-show #nav-global .nav-global-in li .environment:hover, body.is-show.nav-global-show #nav-global .nav-global-in li .environment:hover {
color: #0ec07c;
}
body.nav-global-show #nav-global .nav-global-in li .environment:hover span svg, body.is-show.nav-global-show #nav-global .nav-global-in li .environment:hover span svg {
fill: #0ec07c;
}
#nav-global .nav-global-in li .faq:hover, body.nav-global-show #nav-global .nav-global-in li .faq:hover, body.is-show.nav-global-show #nav-global .nav-global-in li .faq:hover {
color: #30c5d5;
}
body.nav-global-show #nav-global .nav-global-in li .faq:hover span svg, body.is-show.nav-global-show #nav-global .nav-global-in li .faq:hover span svg {
fill: #30c5d5;
}
#nav-global .area-btn {
margin: 0;
}
#nav-global .area-btn a {
width: 180px;
font-size: 16px;
font-weight: bold;
}
#nav-global .area-btn a::after {
position: absolute;
top: 50%;
right: 20px;
content: '';
margin-top: -3px;
border: 6px solid transparent;
border-top-width: 3px;
border-bottom-width: 3px;
border-left-color: #fff;
}
/*------------------------------------------
* Hamburger
------------------------------------------*/
#header .area-menu {
opacity: 1;
visibility: visible;
position: fixed;
top: 0;
right: 0;
z-index: 10;
background: #1569e7;
padding: 24px 20px;
width: 50px;
height: 50px;
box-sizing: border-box;
transition: all .4s ease;
cursor: pointer;
}
body.is-show #header .area-menu {
opacity: 1;
visibility: visible;
background: #1569e7;
}
body.is-show #header .area-menu div {
display: inline-block;
vertical-align: top;
}
.drawer-hamburger {
z-index: 100;
top: 0;
display: block;
box-sizing: content-box;
width: 40px;
-webkit_-transition: all .4s cubic-bezier(0.190, 1.000, 0.220, 1.000);
transition: all .4s cubic-bezier(0.190, 1.000, 0.220, 1.000);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
border: 0;
outline: 0;
background-color: transparent;
}
.drawer-hamburger-icon {
position: relative;
display: block;
margin-top: 0;
}
.drawer-hamburger-icon, .drawer-hamburger-icon:before, .drawer-hamburger-icon:after {
width: 25px;
height: 2px;
-webkit-transition: all .4s cubic-bezier(0.190, 1.000, 0.220, 1.000);
transition: all .4s cubic-bezier(0.190, 1.000, 0.220, 1.000);
background-color: #fff;
left: -6px;
}
.drawer-hamburger-icon:before, .drawer-hamburger-icon:after {
position: absolute;
top: -8px;
left: 0;
content: ' ';
}
.drawer-hamburger-icon:after {
top: 8px;
}
.nav-global-show {
height: 100%;
position: relative;
z-index: 100;
}
.nav-global-show .drawer-hamburger-icon {
background-color: transparent;
}
.nav-global-show .drawer-hamburger-icon:before, .nav-global-show .drawer-hamburger-icon:after {
top: 0;
}
.nav-global-show .drawer-hamburger-icon:before {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.nav-global-show .drawer-hamburger-icon:after {
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/*------------------------------------------
* pagetop
------------------------------------------*/
.pagetop {
display: none;
position: fixed;
bottom: 10px;
right: 10px;
z-index: 10;
}
.pagetop.fixed {
bottom: 100px;
}
.pagetop a {
display: block;
width: 40px;
height: 40px;
background-color: #1569e7;
border-radius: 40px;
text-align: center;
color: #fff;
font-size: 10px;
text-decoration: none;
line-height: 40px;
}
/*------------------------------------------
* Footer
------------------------------------------*/
#footer {
height: 80px;
background: #222;
box-sizing: border-box;
position: relative;
z-index: 2;
display: flex;
align-items: center;
}
#footer .footer-in {
position: relative;
display: block;
width: 97px;
margin: 0 0 0 16px;
}
#footer .footer-in .logo {
position: static;
}
#footer .footer-in .logo svg {
width: 97px;
height: 54px;
}
#footer .footer-in .logo .st0 {
fill: #fff
}
#footer .footer-in .logo img {
width: 144px;
}
#footer #nav-global .nav-global-in li a {
color: #fff;
}
#footer .copyright {
font-size: 10px;
line-height: 1.4;
text-align: left;
color: #808080;
padding: 0 0 0 8px;
}
/*------------------------------------------
* Main
------------------------------------------*/
#main {
width: 100%;
height: 100%;
margin: 0 auto;
overflow: hidden;
}
body.nav-global-show #main {
margin: 50px auto 0;
}
#page-home.nav-global-show #main {
margin: 0 auto;
}
body.is-show #main {
padding: 48px 0 0;
}
#main img {
max-width: 100%;
/* height: auto; */
}
/*------------------------------------------
* Button
------------------------------------------*/
.btn {
position: relative;
display: block;
border: none;
line-height: 1;
text-align: center;
text-decoration: none;
vertical-align: middle;
outline: none;
cursor: pointer;
}
.btn-scroll {
top: 70%;
}
body.nav-global-show .btn-scroll {
z-index: 0;
}
.btn-scroll span {
font-size: 11px;
color: #3d3d3d;
position: absolute;
top: 0;
left: -18px;
}
.btn-scroll i {
position: absolute;
top: 20px;
left: 50%;
width: 26px;
height: 40px;
margin-left: -13px;
border: none;
}
.btn-scroll i::before {
position: absolute;
top: 5px;
left: 50%;
content: '';
width: 1px;
height: 20px;
margin-left: -1px;
background-color: #7f7f7f;
animation: sdb 2s infinite;
box-sizing: border-box;
}
.area-btn {
margin: 20px auto 0;
}
.area-btn a {
position: relative;
display: block;
height: 48px;
margin: 0 auto;
line-height: 48px;
text-align: center;
color: #fff;
}
.area-btn a:hover {
opacity: 1;
}
.area-btn a::before {
content: none;
}
.area-btn a:hover::before {
width: 100%;
left: 0;
}
.area-btn a span {
position: relative;
z-index: 1;
}
.nav-page .area-btn a span:first-child {
top: -5px;
}
.area-btn a .is-sp {
position: absolute;
left: 50%;
margin-left: -4px;
top: auto;
bottom: 2px;
}
.area-btn a .is-sp svg {
width: 9px;
height: 9px;
}
.area-btn .fresh {
background: #1569e7;
}
.area-btn .fresh::before {
background: #0654c9;
}
.area-btn .career {
background: #ff9600;
}
.area-btn .career::before {
background: #ff6c00;
}
.area-btn .more {
width: 240px;
background: #222;
}
.sec-message-top .area-btn .more::before {
background: #ff6d60;
}
.sec-work-top .area-btn .more::before {
background: #ff97cc;
}
.sec-member-top .area-btn .more::before {
background: #09acf1;
}
.area-btn .more::after {
position: absolute;
top: 50%;
right: 1em;
content: '';
margin-top: -4px;
background: url(../images/common/ico_arrow_right.svg) center center no-repeat;
width: 8px;
height: 8px;
}
/*------------------------------------------
* Layout
------------------------------------------*/
.sec {
height: 100%;
}
.sec-in {
margin: 0 auto;
padding: 0 10px;
width: 100%;
height: 100%;
position: relative;
box-sizing: border-box;
}
.tit-sec {
margin: 0 auto 20px;
font-size: 21px;
font-weight: bold;
text-align: center;
position: relative;
}
.tit-sec .en svg {
height: 26px;
}
.tit-sec .jp {
display: inline-block;
position: relative;
margin: 10px auto 0;
}
#page-faq .tit-sec .jp {
margin: 0 auto;
}
/*------------------------------------------
* TOP
------------------------------------------*/
.sec-mv-wrap {
min-height: 100vh;
margin: 0 auto 52px;
}
.sec-mv {
position: relative;
width: 100%;
height: 592px;
min-height: inherit;
/* max-height: inherit; */
margin: 0 auto 40px;
/* z-index: -1; */
}
.sec-mv .svg .st0 {
fill-rule: evenodd;
clip-rule: evenodd;
fill: #fddd34;
}
.sec-mv .svg .st8 {
fill: #fff;
}
.sec-mv .svg .st15 {
fill: #fda39d;
}
.sec-mv .svg .st20 {
fill: #b8f6ff;
}
.sec-mv .svg .st22 {
fill: #ffc7fc;
}
.sec-mv .svg .st23 {
fill: #a1f7b1;
}
.sec-mv .svg .st24 {
fill: #ffeb8c;
}
.sec-mv .svg .st25 {
fill: #ffcfcf;
}
.sec-mv .svg .st26, .sec-mv .svg .st27, .sec-mv .svg .st28, .sec-mv .svg .st29, .sec-mv .svg .st30 {
fill-rule: evenodd;
clip-rule: evenodd;
fill: #5bdff3;
enable-background: new;
}
.sec-mv .svg .st27, .sec-mv .svg .st28, .sec-mv .svg .st29, .sec-mv .svg .st30 {
fill: #feb0f9;
}
.sec-mv .svg .st28, .sec-mv .svg .st29, .sec-mv .svg .st30 {
fill: #ffdd25;
}
.sec-mv .svg .st29, .sec-mv .svg .st30 {
fill: #7cf264;
}
.sec-mv .svg .st30 {
fill: #f9b69b;
}
.sec-mv #canvas-triangle {
top: 0;
}
.sec-mv .triangle {
position: absolute;
opacity: 0;
margin: 0 auto 0;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
body.is-loadend .sec-mv .triangle {
animation: fade1 1s cubic-bezier(0.55, -0.1, 0.51, 1.1) 2s forwards, fade 1s ease-out 2s forwards;
}
.sec-mv .mv-slider {
display: none;
}
.sec-mv .mv-slider-sp {}
.sec-mv .mv-slider-sp li {
position: absolute;
top: 30px;
left: 50%;
}
#main .sec-mv .mv-slider-sp li img {
max-width: inherit;
}
.sec-mv .mv-slider-sp li:nth-of-type(1) {
margin: 55px 0 0 -159px;
}
.sec-mv .mv-slider-sp li:nth-of-type(1) img {
width: 90px;
height: 70px;
}
.sec-mv .mv-slider-sp li:nth-of-type(2) {
margin: 53px 0 0 78px;
}
.sec-mv .mv-slider-sp li:nth-of-type(2) img {
width: 85px;
height: 86px;
}
.sec-mv .mv-slider-sp li:nth-of-type(3) {
margin: 427px 0 0 -136px;
}
.sec-mv .mv-slider-sp li:nth-of-type(3) img {
width: 67px;
height: 70px;
}
.sec-mv .mv-slider-sp li:nth-of-type(4) {
margin: 432px 0 0 60px;
}
.sec-mv .mv-slider-sp li:nth-of-type(4) img {
width: 86px;
height: 88px;
}
.sec-mv .mv-slider-sp li img {
transition: opacity .2s linear;
position: absolute;
}
.sec-mv .mv-slider-sp li img.hide {
opacity: 0;
}
.sec-mv .triangle-bdr {}
.sec-mv .triangle-bdr {
position: absolute;
top: 31px;
width: 100%;
height: 542px;
background: url(../images/top/bg_triangle_bdr.png) center center no-repeat;
background-size: 440px 542px;
}
.sec-mv .triangle-bdr li {
display: none;
}
.sec-mv .triangle-color-sp {
position: absolute;
top: 0;
left: 50%;
opacity: 0;
}
body.is-loadend .triangle-color-sp {
animation: fade 1s ease-in-out 3s forwards;
}
.sec-mv .triangle-color-sp li {
position: absolute;
top: 20px;
width: 100%;
height: 100%;
}
.sec-mv .triangle-color-sp li:first-child svg {
/* green */
margin: 220px 0 0 -197px;
transform-origin: 43px 25px;
}
.sec-mv .triangle-color-sp li:nth-child(2) svg {
/* pink */
margin: 392px 0 0 -150px;
transform-origin: 54px 49px;
}
.sec-mv .triangle-color-sp li:nth-child(3) svg {
/* yellow */
margin: 40px 0 0 -141px;
transform-origin: 49px 40px;
}
.sec-mv .triangle-color-sp li:nth-child(4) svg {
/* blue */
margin: 225px 0 0 140px;
transform-origin: 24px 33px;
}
.sec-mv .sec-in {
height: 100vh;
min-height: inherit;
max-height: inherit;
}
.sec-mv .copy {
position: absolute;
top: 25vh;
left: 0;
width: 100%;
margin: 0 auto;
text-align: center;
z-index: 10;
}
.sec-mv .copy svg {
width: 205px;
height: auto;
}
.copy path {
opacity: 0;
}
body.is-loadend .copy path {
animation: DASH 2s ease-in-out 0s forwards;
}
.sec-mv .copy .st0 {
fill: #09acf1;
}
.sec-mv .copy .st1 {
fill: #ff6d60;
}
.sec-mv .copy .st2 {
fill: #31da99;
}
.sec-mv .copy .st3 {
fill: #fddd34;
}
.sec-mv .copy .st4 {
fill: #52d4e2;
}
.sec-mv .copy .st5 {
fill: #ff97cc;
}
body.is-loadend .copy .path1 {
animation-delay: 0.06s;
}
body.is-loadend .copy .path2 {
animation-delay: 0.12s;
}
body.is-loadend .copy .path3 {
animation-delay: 0.18s;
}
body.is-loadend .copy .path4 {
animation-delay: 0.24s;
}
body.is-loadend .copy .path5 {
animation-delay: 0.3s;
}
body.is-loadend .copy .path6 {
animation-delay: 0.36s;
}
body.is-loadend .copy .path7 {
animation-delay: 0.60s;
}
body.is-loadend .copy .path8 {
animation-delay: 0.66s;
}
body.is-loadend .copy .path9 {
animation-delay: 0.72s;
}
body.is-loadend .copy .path10 {
animation-delay: 0.78s;
}
body.is-loadend .copy .path11 {
animation-delay: 0.88s;
}
body.is-loadend .copy .path12 {
animation-delay: 0.94s;
}
body.is-loadend .copy .path13 {
animation-delay: 1s;
}
body.is-loadend .copy .path14 {
animation-delay: 1.06s;
}
body.is-loadend .copy .path15 {
animation-delay: 1.12s;
}
body.is-loadend .copy .path16 {
animation-delay: 1.18s;
}
.sec-mv .copy .txt-blind {
position: relative;
display: inline-block;
font-size: 19px;
font-weight: bold;
/*
opacity: 0;
animation: fade .6s ease-in-out 2.2s forwards;
*/
text-align: center;
margin: 10px auto;
opacity: 0;
}
body.is-loadend .sec-mv .copy .txt-blind {
opacity: 1;
}
body.is-loadend .sec-mv .copy .txt-blind::after {
content: '';
position: absolute;
right: 0;
top: 0;
width: 100%;
height: 100%;
background: #fff;
animation: blind 1.2s ease-in-out 1.3s forwards;
opacity: 1;
}
@keyframes blind {
0% {
width: 100%;
}
100% {
width: 0;
}
}
.sec-mv .sec-mv-slider {
position: absolute;
top: 96px;
right: 0;
left: 0;
z-index: -10;
}
.sec-mv .sec-mv-slider ul li {
position: relative;
}
.sec-mv .sec-mv-slider ul li:first-child {
top: 128px;
right: 666px;
}
.sec-mv .sec-mv-slider ul li:nth-child(2) {
top: 30px;
left: 196px;
}
.sec-mv .sec-mv-slider ul li:nth-child(3) {
top: 358px;
left: 484px;
}
.sec-mv .sec-mv-slider ul li:nth-child(4) {
top: 732px;
right: 545px;
}
.sec-mv .sec-mv-slider ul li:nth-child(5) {
top: 763px;
left: 252px;
}
.sec-mv .sec-mv-slider ul li img {
transition: opacity .2s linear;
position: absolute;
}
.sec-mv .sec-mv-slider ul li img.hide {
opacity: 0;
}
.sec-message-top {
position: relative;
margin: -80px auto 80px;
padding: 80px 0 0;
text-align: center;
}
.sec-message-top .sec-in {
position: relative;
}
body.is-show.nav-global-show .sec-message-top {}
.sec-message-top .sec-in::before {
position: absolute;
bottom: -161px;
left: 0;
right: 0;
content: '';
background: url(../images/top/bg_message_bottom_left_sp.png) center center no-repeat;
background-size: 163px 258px;
width: 163px;
height: 258px;
}
.sec-message-top .sec-in::after {
position: absolute;
bottom: -60px;
right: 0;
content: '';
background: url(../images/top/bg_message_bottom_right_sp.png) bottom right no-repeat;
background-size: 90px 165px;
width: 90px;
height: 165px;
z-index: -1;
}
.sec-message-top .tit-sec {
width: 303px;
}
.sec-message-top .tit-sec .en::after {
background: #ff6d60;
}
#page-message .tit-sec svg path, .sec-message-top .tit-sec svg path {
fill: #ff6d60;
}
.sec-message-top .txt-message {
font-size: 15px;
line-height: 2;
}
.sec-message-top .txt-message {
transition-delay: 1s;
}
.sec-message-top .area-btn {
transition-delay: 1s;
}
.sec-about-top {
position: relative;
overflow: hidden;
padding: 104px 0 270px;
margin: 0 auto 80px;
}
.sec-about-top::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 120%;
height: 80%;
margin: 2% -10% 0;
background: #31da99;
-webkit-transform-origin: right center;
-ms-transform-origin: right center;
transform-origin: right center;
-webkit-transform: rotate(-3.5deg);
-ms-transform: rotate(-3.5deg);
transform: rotate(-3.5deg);
z-index: -1;
}
.sec-about-top .tit-sec {
width: 100%;
}
.sec-about-top .tit-sec .en::after {
background: #fddd34;
}
#page-about .tit-sec svg path, .sec-about-top .tit-sec svg path {
fill: #fddd34;
}
.sec-about-top .txt {
transition-delay: 1s;
font-size: 14px;
text-align: left;
}
.list-select {
display: block;
justify-content: space-between;
margin: 24px 0 0;
transition-delay: 1s;
}
.list-select li {
margin: 0 0 20px;
}
.list-select li a:hover {
opacity: 1;
}
.list-select li figure {
position: relative;
}
.list-select li figure img {
width: 100%;
}
.list-select li figcaption {
position: absolute;
right: 0;
bottom: 0;
left: 0;
font-size: 14px;
font-weight: bold;
color: #fff;
padding: 0 0 24px;
text-align: center;
}
.list-select li figcaption span {
position: relative;
z-index: 1;
padding: 0 16px 8px;
border-bottom: 2px solid #fff;
box-sizing: border-box;
transition: .3s;
}
.list-select li a:hover figcaption span {
padding: 0 32px 8px 16px;
}
.list-select li figcaption span::after {
position: absolute;
bottom: 0;
right: 0;
content: '';
margin-top: -4px;
background: url(../images/common/ico_arrow_right.png) center center no-repeat;
width: 12px;
height: 8px;
}
.sec-about-top .list-select li figcaption::after {
position: absolute;
left: 0;
bottom: 0;
content: '';
background: url(../images/top/bg_about02.png) center center no-repeat;
background-size: cover;
width: 100%;
height: 58px;
}
.sec-about-top .list-select li:first-child figcaption::after {
background: url(../images/top/bg_about01_sp.png) center center no-repeat;
background-size: cover;
height: 61px;
}
.sec-work-top {
position: relative;
margin: 0 auto;
}
.sec-work-top .sec-in::before {
position: absolute;
top: -376px;
left: 0;
content: '';
background: url(../images/top/bg_work_top_left_sp.png) bottom left no-repeat;
background-size: 167px 172px;
width: 167px;
height: 172px;
z-index: -1;
}
.sec-work-top .sec-in::after {
position: absolute;
top: -376px;
left: auto;
right: 0;
content: '';
background: url(../images/top/bg_work_top_right_sp.png) top center no-repeat;
background-size: 135px 149px;
width: 135px;
height: 149px;
}
.sec-work-top .tit-sec {
width: 100%;
position: absolute;
top: -120px;
left: 0;
opacity: 1;
}
.sec-work-top .tit-sec.sf-visible .en::before, .sec-work-top .tit-sec.sf-visible .jp::before {
content: none;
}
.sec-work-top .tit-sec .en::after {
background: #ff97cc;
}
#page-work .tit-sec svg path, .sec-work-top .tit-sec svg path {
fill: #ff97cc;
}
.sec-work-top .txt {
transition-delay: 0s;
font-size: 14px;
text-align: left;
}
.sec-work-top .area-btn {
transition-delay: 0s;
}
.sec-work-top .sec-in {
display: block;
align-items: center;
justify-content: space-between;
margin: 0px auto 80px;
position: relative;
}
.sec-work-top .sec-in .img {
position: relative;
top: -40px;
left: auto;
}
.sec-work-top .sec-in .img img {
width: 100%;
}
.sec-work-top .area-load {
position: relative;
text-align: right;
width: 100%;
margin: 0 0 80px auto;
padding: 0 0 0 5px;
box-sizing: border-box;
}
.sec-work-top .area-load span {
position: absolute;
top: auto;
bottom: 20%;
right: 53%;
transition: all 1s ease-in-out .5s;
}
.sec-work-top .area-load.sf-visible span {
top: auto;
bottom: 12%;
left: auto;
right: 25%;
}
.sec-work-top .area-load.sf-visible span img {
width: 54px;
}
.sec-work-top .area-load .list-person li {
position: absolute;
top: 0;
left: 0;
}
.sec-work-top .area-load .list-person li:first-child {
top: 0;
right: 10%;
left: auto;
transition: all .5s ease-in-out 1s;
}
.sec-work-top .area-load .list-person li:first-child img {
width: 143px;
}
.sec-work-top .area-load .list-person li:nth-child(2) {
top: -34px;
left: 553px;
transition: all 1s ease-in-out 2s;
}
.sec-work-top .area-load .list-person li:nth-child(3) {
top: -10px;
left: auto;
right: 347px;
transition: all 1s ease-in-out 3s;
}
.sec-work-top .area-load .list-person li:nth-child(4) {
top: 14px;
left: auto;
right: 20px;
transition: all 1s ease-in-out 4s;
}
.sec-work-top .sec-in .content {
width: 100%;
}
.sec-member-top {
margin: 0 auto;
}
.sec-member-top .sec-in {
position: relative;
}
.sec-member-top .tit-sec {
width: 294px;
}
#page-home .sec-member-top .tit-sec {
margin: 0 auto 65px;
}
.sec-member-top .tit-sec .en::after {
background: #09acf1;
}
#page-member .tit-sec svg path, .sec-member-top .tit-sec svg path {
fill: #09acf1;
}
.list-member {
display: block;
margin: 0 auto;
position: relative;
z-index: 1;
}
.list-member li {
margin: 0 auto 20px;
}
.list-member li.js-sf-item {
transition-delay: 1s;
}
.list-member li a {
display: block;
position: relative;
top: 0;
left: 0;
}
.list-member li a img {
width: 100%;
}
.list-member li a:hover {
position: relative;
top: -6px;
left: -6px;
opacity: 1;
}
.list-member li:nth-of-type(1) a:hover {
box-shadow: 3px 3px #96fcd5;
}
.list-member li:nth-of-type(2) a:hover {
box-shadow: 3px 3px #ffdbed;
}
.list-member li:nth-of-type(3) a:hover {
box-shadow: 3px 3px #b3f6fd;
}
.sec-member-top {
position: relative;
}
.sec-member-top .sec-in::before {
position: absolute;
bottom: -76px;
left: 0;
content: '';
background: url(../images/top/bg_member_bottom_left_sp.png) bottom left no-repeat;
background-size: 101px 172px;
width: 101px;
height: 172px;
}
.sec-member-top .sec-in::after {
position: absolute;
bottom: -181px;
left: auto;
right: 0;
content: '';
background: url(../images/top/bg_member_bottom_right_sp.png) bottom right no-repeat;
background-size: 130px 278px;
width: 130px;
height: 278px;
z-index: 0;
}
.sec-member-top .area-btn {
transition-delay: 1.2s;
z-index: 1;
position: relative;
}
.sec-environment-top {
position: relative;
overflow: hidden;
padding: 100px 0 0;
margin: 0 auto -130px;
}
.sec-environment-top .sec-in {
padding: 100px 10px 240px;
}
.sec-environment-top .sec-in::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 120%;
height: 80%;
margin: 2% -10% 0;
background: #fff378;
-webkit-transform-origin: right center;
-ms-transform-origin: right center;
transform-origin: right center;
-webkit-transform: rotate(-3.5deg);
-ms-transform: rotate(-3.5deg);
transform: rotate(-3.5deg);
z-index: -1;
}
.sec-environment-top .tit-sec {
width: 100%;
}
.sec-environment-top .tit-sec .en::after {
background: #31da99;
}
#page-environment .tit-sec svg path, .sec-environment-top .tit-sec svg path {
fill: #31da99;
}
.sec-environment-top .list-select {
transition-delay: 1s;
}
.sec-environment-top .list-select li figcaption::after {
position: absolute;
left: 0;
bottom: 0;
content: '';
background: url(../images/top/bg_environment02.png) center center no-repeat;
width: 100%;
height: 59px;
background-size: cover;
}
.sec-environment-top .list-select li:first-child figcaption::after {
background: url(../images/top/bg_environment01_sp.png) center center no-repeat;
background-size: cover;
height: 61px;
}
.sec-environment-top .txt {
transition-delay: 1s;
font-size: 14px;
text-align: left;
}
.sec-entry {
margin: 0 auto 80px;
}
.sec-entry .sec-in {
width: 100%;
}
.sec-entry .txt-entry {
font-size: 15px;
line-height: 1.75;
}
.sec-entry .area-btn {
display: block;
justify-content: space-between;
margin: 30px auto 0;
}
.sec-entry .area-btn.is-sp {
display: block;
}
.sec-entry .area-btn.is-sp span {
font-size: 12px;
}
.sec-entry .area-btn li {
width: 100%;
}
.sec-entry .area-btn li:first-child {
margin: 0 0 10px;
}
.sec-entry .area-btn li + li {
margin-left: 0;
}
.sec-entry .area-btn a {
height: 64px;
line-height: 64px;
font-size: 17px;
font-weight: bold;
}
.sec-entry .area-btn a::before {
height: 90px;
}
.sec-entry .area-btn a::after {
position: absolute;
top: 50%;
right: .2em;
content: '';
margin-top: -5px;
border: 8px solid transparent;
border-top-width: 4px;
border-bottom-width: 4px;
border-left-color: #fff;
}
.page-header {
position: relative;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
#page-message .page-header-in::before {
content: none;
}
#page-message .page-header-in::after {
content: none;
}
.page-header .page-header-in {
width: 100%;
position: absolute;
top: auto;
right: 0;
left: 0;
bottom: -45px;
text-align: center;
margin: 0 auto;
}
.page-header .tit-sec {
margin: 0 auto;
font-size: 20px;
display: inline-block;
}
.page-header .tit-sec svg {
height: 27px;
padding: 0 2px;
}
#page-faq .page-header .page-header-in {
bottom: -35px;
}
#page-message .page-header {
background-image: url(../images/message/bg_page_header_sp.jpg);
height: 175px;
margin: 0 0 72px 0;
}
.page-header .tit-sec svg, .page-header .tit-sec span {
/* opacity: 0; */
/* animation: DASH 1.2s ease-in-out 0s forwards; */
}
#page-message .page-header .tit-sec svg:nth-of-type(1) {
/* animation-delay: .12s; */
}
#page-message .page-header .tit-sec svg:nth-of-type(2) {
animation-delay: .24s;
}
#page-message .page-header .tit-sec svg:nth-of-type(3) {
animation-delay: .36s;
}
#page-message .page-header .tit-sec svg:nth-of-type(4) {
animation-delay: .48s;
}
#page-message .page-header .tit-sec svg:nth-of-type(5) {
animation-delay: .60s;
}
#page-message .page-header .tit-sec svg:nth-of-type(6) {
animation-delay: .72s;
}
#page-message .page-header .tit-sec svg:nth-of-type(7) {
animation-delay: .84s;
}
#page-message .page-header .tit-sec span:nth-of-type(1) {
animation-delay: .96s;
}
#page-message .page-header .tit-sec span:nth-of-type(2) {
animation-delay: 1.08s;
}
#page-message .page-header .tit-sec span:nth-of-type(3) {
animation-delay: 1.2s;
}
#page-message .page-header .tit-sec span:nth-of-type(4) {
animation-delay: 1.32s;
}
#page-message .page-header .tit-sec span:nth-of-type(5) {
animation-delay: 1.44s;
}
#page-message .sec-message {
position: relative;
margin: 0 auto 60px;
text-align: center;
}
#page-message .sec-message .sec-in {
position: relative;
}
#page-message .sec-message .sec-in::before {
content: none;
}
#page-message .sec-message .tit-message {
font-size: 17px;
font-weight: bold;
color: #20ce8b;
line-height: 1.6;
transform: translate3d(0, 30px, 0);
/* transition: all .6s ease 1.5s; */
transition: all .6s ease 0.8s;
opacity: 0;
}
#page-message .sec-message .tit-message span[class^="c-"] {
font-size: 23px;
}
#page-message .sec-message .tit-message.current {
transform: translate3d(0, 0, 0);
opacity: 1;
}
#page-message .sec-message .svg-bdr {
padding: 20px 0;
transform: translate3d(0, 30px, 0);
/* transition: all .6s ease 1.7s; */
transition: all .6s ease 0.9s;
opacity: 0;
}
#page-message .sec-message .svg-bdr.current {
transform: translate3d(0, 0, 0);
opacity: 1;
}
#page-message .sec-message .txt-message {
font-size: 15px;
line-height: 2;
transform: translate3d(0, 30px, 0);
transition: all .6s ease 1s;
opacity: 0;
text-align: left;
}
#page-message .sec-message .txt-message br {
display: none;
}
#page-message .sec-message .txt-message.current {
transform: translate3d(0, 0, 0);
opacity: 1;
}
#page-message .sec-message .txt-message span {
display: block;
padding: 6px 0;
}
#page-message .sec-entry {
position: relative;
overflow: hidden;
padding: 80px 0 100px;
margin: 0 auto;
}
#page-message .sec-entry::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 120%;
height: 80%;
margin: 2% -10% 0;
background: #fdf7f5;
-webkit-transform-origin: right center;
-ms-transform-origin: right center;
transform-origin: right center;
-webkit-transform: rotate(-3.5deg);
-ms-transform: rotate(-3.5deg);
transform: rotate(-3.5deg);
z-index: -1;
}
#page-message .sec-entry::after {
content: '';
display: block;
position: absolute;
top: 50%;
right: 0;
width: 100%;
height: 100%;
background: #fdf7f5;
z-index: -2;
}
/* page-faq */
#page-faq .page-header {
background-image: url(../images/faq/bg_page_header_sp.jpg);
height: 165px;
margin: 0 0 80px;
}
#page-faq .page-header .tit-sec svg {
width: 71px;
}
#page-faq .page-header .tit-sec:before {
background: #30c5d5;
}
#page-faq .page-header .tit-sec svg {
fill: #30c5d5;
}
#page-faq .sec-faq {
margin: 0 auto 40px;
}
#page-faq .sec-faq .list-faq dt, #page-faq .sec-faq .list-faq dd {
display: flex;
align-items: flex-start;
justify-content: space-between;
position: relative;
}
#page-faq .sec-faq .list-faq dt {
margin: 0 0 16px;
}
#page-faq .sec-faq .list-faq dt::before {
content: '';
width: 44px;
height: 44px;
}
#page-faq .sec-faq .list-faq dt:nth-of-type(2n-1)::before {
background: url(../images/faq/ico_man1.png) no-repeat;
background-size: 44px 44px;
}
#page-faq .sec-faq .list-faq dt:nth-of-type(2n)::before {
background: url(../images/faq/ico_woman1.png) no-repeat;
background-size: 44px 44px;
}
#page-faq .sec-faq .list-faq dd {
margin: 0 0 40px 0;
}
#page-faq .sec-faq .list-faq dd::after {
content: '';
width: 44px;
height: 44px;
}
#page-faq .sec-faq .list-faq dd:nth-of-type(2n-1)::after {
background: url(../images/faq/ico_man2.png) no-repeat;
background-size: 44px 44px;
}
#page-faq .sec-faq .list-faq dd:nth-of-type(2n)::after {
background: url(../images/faq/ico_woman2.png) no-repeat;
background-size: 44px 44px;
}
#page-faq .sec-faq .list-faq dt div, #page-faq .sec-faq .list-faq dd div {
position: relative;
width: 80%;
border-radius: 25px;
box-sizing: border-box;
}
#page-faq .sec-faq .list-faq dt div {
padding: 16px 24px 16px 36px;
margin: 0 0 0 auto;
background: #c6f5ff;
font-size: 14px;
line-height: 1.57;
}
#page-faq .sec-faq .list-faq dt div::before {
content: '';
position: absolute;
top: 0;
left: 16px;
color: #09acf1;
margin: 16px 0 0;
width: 14px;
height: 19px;
background: url(../images/faq/ico_q.svg) no-repeat;
background-size: 14px 19px;
}
#page-faq .sec-faq .list-faq dt div::after {
content: '';
position: absolute;
top: 31px;
bottom: auto;
left: -13px;
width: 15px;
height: 8px;
background: url(../images/faq/ico_balloon_blue.svg) no-repeat;
background-size: 15px 8px;
}
#page-faq .sec-faq .list-faq dd div {
padding: 16px 24px 16px 36px;
background: #ffecdb;
line-height: 1.64;
}
#page-faq .sec-faq .list-faq dd div::before {
content: '';
position: absolute;
top: 0;
left: 14px;
color: #ff6d60;
margin: 16px 0 0;
width: 15px;
height: 18px;
background: url(../images/faq/ico_a.svg) no-repeat;
background-size: 15px 18px;
}
#page-faq .sec-faq .list-faq dd div::after {
content: '';
position: absolute;
top: 35px;
bottom: auto;
right: -16px;
width: 18px;
height: 10px;
background: url(../images/faq/ico_balloon_red.svg) no-repeat;
background-size: 18px 10px;
}
#page-faq .sec-faq .list-faq dd a {
color: #e31b1b;
text-decoration: underline;
}
#page-faq .sec-faq .list-faq dd ul {
margin: 10px 0 0 1.3em;
}
#page-faq .sec-faq .list-faq dd ul li {
position: relative;
}
#page-faq .sec-faq .list-faq dd ul li::after {
display: block;
content: '';
position: absolute;
top: .6em;
left: -1em;
width: 4px;
height: 4px;
background-color: #ff6d60;
border-radius: 100%;
}
/* page-about */
#page-about .nav-page .area-btn a {
background: #f7d72e;
}
#page-about .nav-page .area-btn a::before {
background: #ffcc00;
}
#page-about .page-header {
/* background-image: url(../images/about/bg_page_header_sp.jpg); */
height: 175px;
margin: 0 0 80px 0;
}
#page-about .page-header-in::before {
content: none;
}
#page-about .page-header-in::after {
content: none;
}
.sec-head {
margin: 0 auto 20px;
text-align: center;
}
.sec-head img {
width: 58px;
}
#page-environment .sec-head {
padding: 30px 0 0;
margin: 0 auto 28px;
}
.sec-head .tit-number {
margin: 10px 0 20px;
font-size: 21px;
font-weight: bold;
}
.sec-head p {
font-size: 14px;
line-height: 1.71;
padding: 0 10px;
box-sizing: border-box;
text-align: left;
}
#page-environment .sec-carrer .sec-head p {
padding: 0;
}
#page-about .sec-number {
padding: 0 10px;
margin: 0 auto;
box-sizing: border-box;
}
#page-about .sec-number .svg {
text-align: center;
}
#page-about .sec-number .sec-number-in {
position: relative;
width: 100%;
margin: 0 auto;
}
#page-about .sec-number .sec-number-in::before {
content: none;
}
#page-about .sec-number .column-two {
display: block;
}
#page-about .sec-number .column-three {
display: flex;
margin: 0 auto 18px;
}
#page-about .sec-number .column-three [class^="bdr"] {
width: 48%;
height: auto;
padding: 65px 0 0;
box-sizing: border-box;
}
#page-about .sec-number .column-three.column-three [class^="bdr"] {
padding: 15px 0;
height: 98px;
}
#page-about .sec-number .column-two {
margin: 0 auto;
height: auto;
}
#page-about .sec-number .column-two-one .column-two {
display: flex;
justify-content: space-between;
width: 100%;
margin: 0 auto 16px;
}
#page-about .sec-number .column-two span, #page-about .sec-number .column-three span {
display: block;
margin: 0 auto 16px;
text-align: center;
color: #666;
font-size: 10px;
}
#page-about .sec-number .column-two h3, #page-about .sec-number .column-three h3 {
font-size: 16px;
font-weight: bold;
text-align: center;
margin: 0 auto 6px;
}
#page-about .sec-number .column-three h3 {
margin: 0 auto 15px;
}
#page-about .sec-number .column-two p, #page-about .sec-number .column-three p {
font-size: 12px;
text-align: left;
line-height: 1.5;
}
#page-about .sec-number .column-two-first {
height: 100%;
margin: 0 auto 30px;
}
#page-about .sec-number .column-two-first .bdr-red .svg {
margin: 0 auto 20px;
}
#page-about .sec-number .column-two-first .bdr-red svg {
width: 121px;
}
#page-about .sec-number .column-two-first .bdr-red svg path {
fill: #ff6d60;
}
#page-about .sec-number .column-two-first .bdr-sky svg {
width: 162px;
}
#page-about .sec-number .column-two-first .bdr-sky svg path {
fill: #52d4e2;
}
#page-about .sec-number [class^="bdr"] .ff-kaku {
font-size: 50px;
font-weight: bold;
margin: 0 0 0 10px;
line-height: 1.2;
}
#page-about .sec-number .column-two-first .bdr-sky .ff-kaku {
color: #52d4e2;
}
#page-about .sec-number .column-two-in {
display: flex;
align-items: flex-end;
justify-content: center;
margin: 0 0 28px;
}
#page-about .sec-number .column-two [class^="bdr"] {
padding: 20px;
margin: 0 auto 16px;
box-sizing: border-box;
}
#page-about .sec-number .column-two .txt-about-link {
font-weight: normal;
}
#page-about .sec-number .column-two-first .bdr-red {
width: 100%;
border: 1px solid #ff7266;
background: url(../images/about/bg_bdr_red_sp.png) top 56px right 60% no-repeat;
background-size: 235px 71px;
/* background-size: cover; */
box-shadow: 3px 3px #ffc9c4;
}
#page-about .sec-number .column-two-first .bdr-sky {
width: 100%;
border: 1px solid #5cd7e4;
background: url(../images/about/bg_bdr_sky_sp.png) bottom 10px center no-repeat;
background-size: 279px 140px;
/* background-size: cover; */
box-shadow: 3px 3px #b3f6fd;
padding: 33px 0;
}
#page-about .sec-number .column-two-second .bdr-yellow {
width: 48%;
padding-top: 16px!important;
padding: 16px 4px;
margin: 0 auto 18px;
border: 1px solid #f6e426;
box-shadow: 3px 3px #fff8ab;
}
#page-about .sec-number .column-two-second .bdr-yellow h3 {
margin: 0 auto 10px;
}
#page-about .sec-number .column-two-second .bdr-yellow .svg {
margin: 20px 0
}
#page-about .sec-number .column-two-second .bdr-yellow svg {
width: 125px;
}
#page-about .sec-number .column-two-second .bdr-yellow svg path {
fill: #f5e31c;
}
#page-about .sec-number .column-two-second .bdr-yellow .ff-kaku {
font-size: 40px;
color: #f5e31c;
}
#page-about .sec-number .column-multi {
width: auto;
display: flex;
justify-content: space-between;
}
#page-about .sec-number .column-multi [class^="bdr"] {
height: auto;
padding-top: 16px;
}
#page-about .sec-number .column-two-second .bdr-blue {
width: 48%;
border: 1px solid #17b1f2;
box-shadow: 3px 3px #c5eeff;
background: none;
padding: 16px 8px;
}
#page-about .sec-number .column-two-second .bdr-blue .svg {
margin: 20px auto;
}
#page-about .sec-number .column-two-second .bdr-blue svg {
width: 88px;
}
#page-about .sec-number .column-two-second .bdr-blue svg path {
fill: #09acf1;
}
#page-about .sec-number .column-two-second .bdr-blue .ff-kaku {
color: #09acf1;
}
#page-about .sec-number .column-two-second .bdr-blue .ff-kaku:nth-of-type(1) {
font-size: 30px;
}
#page-about .sec-number .column-two-second .bdr-blue .ff-kaku:nth-of-type(2) {
font-size: 50px;
}
#page-about .sec-number .column-two-second .bdr-green {
margin-top: 46px;
width: 100%;
border: 1px solid #48dea5;
box-shadow: 3px 3px #96fcd5;
background: url(../images/about/bg_bdr_green.png) center center no-repeat;
background-size: 182px 209px;
}
#page-about .sec-number .column-two-second .bdr-green .svg {
margin: 20px auto;
}
#page-about .sec-number .column-two-second .bdr-green svg {
width: 152px;
}
#page-about .sec-number .column-two-second .bdr-green .ff-kaku {
font-size: 50px;
color: #3ddc9f;
}
#page-about .sec-number .column-two-second .bdr-green .column-two-in {
margin: 100px auto 80px;
}
#page-about .sec-number .column-two-third {
margin: 0 auto;
height: auto;
}
#page-about .sec-number .column-two-third [class^="bdr"] {
width: 100%;
padding: 36px 0 30px;
/* margin: 0 auto; */
}
#page-about .sec-number .column-two-third .bdr-sky {
border: 1px solid #58d6e4;
box-shadow: 3px 3px #b3f6fd;
background: url(../images/about/bg_bdr_sky2_sp.png) bottom center no-repeat;
background-size: cover;
}
#page-about .sec-number .column-two-third .bdr-sky h3 {
margin: 0 0 10px;
}
#page-about .sec-number .column-two-third .bdr-sky svg {
width: 158px;
}
#page-about .sec-number .column-two-third .bdr-sky svg path {
fill: #52d4e2;
}
#page-about .sec-number .column-two-third .bdr-sky .ff-kaku {
color: #52d4e2;
}
#page-about .sec-number .column-two-third .bdr-pink {
padding: 20px 0 16px;
border: 1px solid #ff9bce;
box-shadow: 3px 3px #ffdbed;
background: url(../images/about/bg_bdr_pink_sp.png) center bottom 10px no-repeat;
background-size: 292px 74px;
margin: 0 auto -16px;
}
#page-about .sec-number .column-two-third .bdr-pink svg {
width: 118px;
}
#page-about .sec-number .column-two-third .bdr-pink svg path {
fill: #fe96cb;
}
#page-about .sec-number .column-two-third .bdr-pink .ff-kaku {
color: #fe96cb;
}
#page-about .sec-number .column-three .bdr-green {
border: 1px solid #48dea5;
box-shadow: 3px 3px #96fcd5;
}
#page-about .sec-number .column-three .bdr-green svg {
width: 122px;
}
#page-about .sec-number .column-three .bdr-green .ff-kaku {
color: #3ddc9f;
}
#page-about .sec-number .column-three .bdr-green .ff-kaku:nth-of-type(1) {
margin: 0 10px 0 0;
font-size: 28px;
}
#page-about .sec-number .column-three .bdr-green .ff-kaku:nth-of-type(2) {
font-size: 42px;
}
#page-about .sec-number .column-three .bdr-yellow {
border: 1px solid #f6e321;
box-shadow: 3px 3px #fff8ab;
}
#page-about .sec-number .column-three .bdr-yellow svg {
width: 61px;
}
#page-about .sec-number .column-three .bdr-yellow .ff-kaku {
color: #f5e31c;
font-size: 42px;
}
#page-about .sec-number .column-three .bdr-blue {
border: 1px solid #14b0f2;
box-shadow: 3px 3px #c5eeff;
}
#page-about .sec-number .column-three .bdr-blue svg {
width: 75px;
}
#page-about .sec-number .column-three .bdr-blue .ff-kaku {
color: #09acf1;
font-size: 42px;
}
#page-about .sec-number .column-three .column-two-in {
margin: 0 auto 20px;
}
#page-about .sec-number .column-three .possible {
margin: 4px 0 0;
font-size: 11px;
font-weight: bold;
text-align: center;
}
#page-about .sec-number .column-three .bdr-red {
border: 1px solid #ff7266;
box-shadow: 3px 3px #ffc9c4;
}
#page-about .sec-number .column-three .bdr-red svg {
width: 43px;
}
#page-about .sec-number .column-three .bdr-red .ff-kaku {
color: #ff6d60;
font-size: 42px;
}
#page-about .sec-number .column-three .bdr-sky {
border: 1px solid #5cd7e4;
box-shadow: 3px 3px #b3f6fd;
}
#page-about .sec-number .column-three .bdr-sky svg {
width: 111px;
}
#page-about .sec-number .column-three .bdr-sky .ff-kaku {
color: #52d4e2;
font-size: 42px;
}
#page-about .sec-number .column-three .bdr-sky .ff-kaku:nth-of-type(1) {
margin: 0 10px 0 0;
font-size: 28px;
}
#page-about .sec-number .column-three .bdr-green2 {
border: 1px solid #42dea2;
box-shadow: 3px 3px #96fcd5;
}
#page-about .sec-number .column-three .bdr-green2 svg {
width: 107px;
}
#page-about .sec-number .column-three .bdr-green2 .ff-kaku {
color: #3ddc9f;
font-size: 42px;
}
#page-about .sec-number .column-three .bdr-green2 .ff-kaku:nth-of-type(1) {
margin: 0 10px 0 0;
font-size: 28px;
}
#page-about .truck {
display: none;
}
#page-about .truck1 {
top: 30%;
right: 91%;
transition: all 3s ease-in-out 0s;
}
#page-about .truck1.sf-visible {
right: 45px;
transform: translate3d(0, 0, 0);
}
#page-about .truck2 {
top: 60.2%;
right: 4px;
transition: all 3s ease-in-out 0s;
}
#page-about .truck2.sf-visible {
right: 80%;
transform: translate3d(0, 0, 0);
}
#page-about .truck3 {
bottom: -4.2%;
right: 91%;
transition: all 3s ease-in-out 0s;
}
#page-about .truck3.sf-visible {
right: 150px;
transform: translate3d(0, 0, 0);
}
#page-about .sec-history {
position: relative;
padding: 120px 0 10px;
margin: 70px auto 80px;
}
#page-about .sec-history::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 180%;
height: 100%;
margin: 2% -40% 0;
background: #fdf7f5;
-webkit-transform-origin: right center;
-ms-transform-origin: right center;
transform-origin: right center;
-webkit-transform: rotate(-3.5deg);
-ms-transform: rotate(-3.5deg);
transform: rotate(-3.5deg);
z-index: -1;
}
#page-about .sec-history .sec-in {
position: relative;
}
#page-about .sec-history .sec-in::after {
content: none;
}
#page-about .sec-history .sec-head .tit-number+.img {
width: 256px;
margin: 0px auto 20px;
}
#page-about .sec-history .sec-head .tit-number+.img img {
width: 256px;
}
#page-about .sec-history .sec-head p {
font-size: 14px;
line-height: 1.71;
}
#page-about .sec-history .list-history {
position: relative;
margin: 60px 0 0;
}
#page-about .sec-history .list-history li {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin: 0 auto 16px;
}
#page-about .sec-history .list-history li:first-child::before, #page-about .sec-history .list-history li::before {
content: '';
position: absolute;
top: 50px;
left: 24px;
width: 1px;
height: 100%;
background: url(../images/about/bg_history_arrow_sp.png) repeat-y;
background-size: 1px 3px;
}
#page-about .sec-history .list-history li::after {
content: '';
position: absolute;
top: 50px;
left: 1.49em;
width: 10px;
height: 100%;
background: url(../images/about/ico_arrow_down.png);
background-size: 10px 42px;
background-repeat: space;
}
#page-about .sec-history .list-history li:last-child::before, #page-about .sec-history .list-history li:last-child::after {
content: none;
}
#page-about .sec-history .list-history li .year::before,
#page-about .sec-history .list-history li .year::after {
display: none;
}
#page-about .sec-history .list-history li .year-wrap {
border: solid 1px #ff6d60;
border-color: #ff6d60;
border-radius: 50%;
height: 56px;
width: 56px;
position: relative;
top: 0;
left: -5px;
background-color: #fff;
}
#page-about .sec-history .list-history li .year {
position: relative;
width: 50px;
height: 50px;
border-radius: 50%;
background: #ff6d60;
}
#page-about .sec-history .list-history li .year-wrap .year {
position: relative;
top: 3px;
left: 3px;
}
#page-about .sec-history .list-history li .event h3 {
font-size: 13px;
font-weight: bold;
line-height: 1.71;
margin: 0 auto 4px;
}
#page-about .sec-history .list-history li .year span {
display: block;
color: #fff;
text-align: center;
line-height: 50px;
font-size: 11px;
font-weight: bold;
}
#page-about .sec-history .list-history li .event {
position: relative;
width: 78%;
padding: 10px;
border: 1px solid #f9bcb7;
box-sizing: border-box;
border-radius: 10px;
}
#page-about .sec-history .list-history li .event-red {
border: 1px solid #ff6d60;
background: #ff6d60;
color: #fff;
text-align: center;
}
#page-about .sec-history .list-history li .event:after, #page-about .sec-history .list-history li .event:before {
position: absolute;
top: 26px;
left: -9px;
content: '';
width: 9px;
height: 9px;
margin-top: -5px;
}
#page-about .sec-history .list-history li .event:after {
background: url(../images/about/ico_arrow_white.png) center left no-repeat;
background-size: 9px 9px;
}
#page-about .sec-history .list-history li .event-red:after {
background: url(../images/about/ico_arrow_pink.png) center left no-repeat;
}
#page-about .sec-history .list-history .column-two {
display: block;
align-items: center;
/* justify-content: space-between; */
}
#page-about .sec-history .list-history .column-two .img {
margin: 0 auto 10px;
}
#page-about .sec-history .list-history .column-two .content+.img {
margin: 0 0 0 12px;
}
#page-about .sec-history .list-history .column-two .content {
/* margin: 0 10px; */
}
#page-about .sec-history .list-history .column-two p {
/* margin: 0 10px; */
font-size: 13px;
line-height: 1.6;
}
#page-about .sec-history .list-history li .event-red h3 {
font-size: 17px;
line-height: 1.5;
margin: 10px auto;
}
#page-about .sec-history .list-history li .event-red .ff-lora {
line-height: 1.4;
}
.nav-page {
margin: 0 auto 52px;
}
.sec-work .nav-page {
margin: 0 auto;
}
.sec-work .nav-page .area-btn a {
height: 65px;
}
.nav-page .area-btn {
display: flex;
justify-content: center;
margin: 0 auto 50px;
width: 100%;
}
.nav-page .area-btn li {
padding: 0 4px;
width: 50%;
}
.nav-page .area-btn a {
display: flex;
align-items: center;
justify-content: center;
width: auto;
height: 60px;
line-height: 1.23;
font-size: 13px;
font-weight: bold;
}
.nav-page .area-btn .two-line a {
line-height: 1.38;
padding: 0;
box-sizing: border-box;
}
.nav-page .area-btn a::after {
content: none;
}
/* 0222add */
#page-about .sec-number .column-two.column-two-fourth {
display: block;
margin: 30px auto 0;
}
#page-about .sec-number .column-two .bdr-holiday {
width: 100%;
height: auto;
border: 1px solid #14b0f2;
box-shadow: 3px 3px #c5eeff;
background: url(../images/about/bg_bdr_hodiday.png) center center no-repeat;
background-size: 104px 104px;
padding: 30px 0;
}
#page-about .sec-number .bdr-holiday svg {
width: 75px;
height: auto;
}
#page-about .sec-number .column-two .bdr-work {
width: 55%;
height: 100%;
border: 1px solid #42dea2;
box-shadow: 3px 3px #96fcd5;
padding: 24px 12px;
margin: 0;
}
#page-about .sec-number .column-two .bdr-work h3 {
margin: 0 auto 8px;
}
#page-about .sec-number .bdr-work svg {
width: 110px;
height: auto;
}
#page-about .sec-number .bdr-work svg path {
fill: #3ddc9f;
}
#page-about .sec-number .column-two .bdr-year {
width: 42%;
height: 100%;
border: 1px solid #f6e426;
box-shadow: 3px 3px #fff8ab;
padding: 24px 16px 15px;
margin: 0;
}
#page-about .sec-number .bdr-year svg {
width: 64px;
height: auto;
}
#page-about .sec-number .column-two .bdr-member {
display: block;
border: 1px solid #5cd7e4;
box-shadow: 3px 3px #b3f6fd;
padding: 16px 0 40px;
margin: 0 auto;
}
#page-about .sec-number .bdr-member .content {
padding: 0;
}
#page-about .sec-number .bdr-member svg {
width: 190px;
height: auto;
}
#page-about .sec-number .bdr-member svg path {
fill: #52d4e2;
}
/* page-work */
#page-work .page-header {
background-image: url(../images/work/bg_page_header_sp.jpg);
height: 175px;
margin: 0 0 65px 0;
}
#page-work .page-header-in::before {
content: none;
}
#page-work .page-header-in::after {
content: none;
}
#page-work .nav-page .area-btn a {
background: #ff97cc;
}
#page-work .nav-page .area-btn a::before {
background: #ff64b3;
}
#page-work .sec-root .sec-in>.img img {
width: 100%;
}
#page-work .sec-root .sec-head {
margin: -24px auto 20px;
}
#page-work .sec-root .sec-root-flow .sec-head {
margin: 0 auto;
}
.sec-head .tit-sub {
font-size: 18px;
font-weight: bold;
}
.sec-head .tit-sub::after {
content: "";
height: 2px;
width: 40px;
border-bottom: 2px solid #222;
margin: 0 auto 12px;
padding: 0 0 8px;
display: block;
}
.sec-head .c-pink {
font-weight: bold;
color: #ff73ba;
}
#page-work .sec-root .area-summary {
border: 1px dotted #000;
text-align: center;
}
#page-work .sec-root .area-summary .area-summary-in {
position: relative;
margin: 3px;
padding: 10px 0 10px;
background: #fff8fc;
}
#page-work .sec-root .area-summary .img {
position: static;
}
#page-work .sec-root .area-summary h4 {
margin: 20px auto 10px;
font-size: 25px;
}
#page-work .sec-root .area-summary p {
font-size: 13px;
font-weight: bold;
}
#page-work .sec-root .sec-root-three {
position: relative;
padding: 200px 0 180px;
margin: 40px auto 0;
background: url(../images/work/bg_truck1_sp.png) top left 10px no-repeat;
background-size: contain;
}
#page-work .sec-root .sec-root-three::after {
content: '';
background: url(../images/work/bg_truck2_sp.png) bottom center no-repeat;
background-size: cover;
width: 100%;
height: 185px;
position: absolute;
left: auto;
bottom: 0;
}
#page-work .sec-root .sec-root-three .sec-in {
position: relative;
}
#page-work .sec-root .sec-root-three .sec-in::before {
position: absolute;
bottom: -655px;
left: -318px;
content: '';
background: none;
width: 618px;
height: 404px;
}
#page-work .sec-root .sec-root-three .sec-in::after {
content: none;
}
#page-work .area-truck {
display: none;
}
#page-work .truck {
position: absolute;
}
#page-work .truck1 {
top: 0;
right: 83%;
transition: all 3s ease-in-out 0s;
}
#page-work .truck1.sf-visible {
right: 80px;
transform: translate3d(0, 0, 0);
}
#page-work .person {
position: absolute;
}
#page-work .person1.sf-visible {
top: 0;
right: -40px;
transition: all 2s ease-in-out 2s;
}
#page-work .truck2 {
bottom: -17.5%;
right: 90px;
transition: all 3s ease-in-out 0s;
}
#page-work .truck2.sf-visible {
right: 83.2%;
transform: translate3d(0, 0, 0);
}
#page-work .person2.sf-visible {
bottom: -16.4%;
left: -67px;
transition: all 2s ease-in-out 2s;
}
#page-work .sec-root-three h2 {
margin: 0 auto 30px;
font-size: 21px;
line-height: 0.6;
font-weight: bold;
color: #ff73ba;
text-align: center;
display: block;
align-items: flex-end;
justify-content: center;
}
#page-work .sec-root-three h2 span:first-of-type {
display: block;
}
#page-work .sec-root-three h2 .svg {
/* display: block; */
position: relative;
top: 4px;
/* margin: 0 6px; */
}
#page-work .sec-root-three h2 .svg+span {
display: inline-block;
padding: 4px 4px 0 0;
position: relative;
top: 2px;
}
#page-work .sec-root-three h2 .svg+span img {
width: 37px;
}
#page-work .sec-root-three h2 .svg svg {
width: 58px;
height: 40px;
}
#page-work .sec-root-three .list-root {
display: block;
margin: 0 auto 40px;
}
#page-work .sec-root-three .list-root li {
width: 100%;
padding: 10px;
margin: 0 auto 20px;
box-sizing: border-box;
}
#page-work .sec-root-three .list-root li>.img img {
width: 100%;
}
#page-work .sec-root-three .list-root li:nth-of-type(1) {
background: #fff0ef;
}
#page-work .sec-root-three .list-root li:nth-of-type(2) {
background: #eefdf7;
}
#page-work .sec-root-three .list-root li:nth-of-type(3) {
background: #fffbeb;
}
#page-work .sec-root-three .list-root .title {
margin: -28px auto -10px;
font-size: 23px;
font-weight: bold;
text-align: center;
}
#page-work .sec-root-three .list-root .column-two {
display: flex;
justify-content: space-between;
margin: 8px auto 12px;
height: 100%;
}
#page-work .sec-root-three .list-root .column-two .img {
margin: auto 0 0;
}
#page-work .sec-root-three .list-root .column-two .txt {
padding: 0 0 0 16px;
box-sizing: border-box;
}
#page-work .sec-root-three .list-root .area-type {
position: relative;
min-height: 180px;
}
#page-work .sec-root-three .list-root .area-type .tit-type {
padding: 8px 0;
margin: 0 auto 10px;
border-radius: 25px;
background: #202020;
font-size: 13px;
font-weight: bold;
text-align: center;
color: #fff;
}
#page-work .sec-root .sec-root-three .area-summary {
text-align: left;
}
#page-work .sec-root .sec-root-three .area-summary-in {
padding: 40px 0 0;
}
#page-work .sec-root .sec-root-three .area-summary-in .column-two {
display: block;
align-items: center;
justify-content: space-between;
margin: 0 auto 10px;
}
#page-work .sec-root .sec-root-three .area-summary-in .balloon {
position: relative;
width: 100%;
height: 54px;
background: url(../images/work/bg_balloon_pink_sp.png) center no-repeat;
background-size: contain;
margin: 0 auto 12px;
}
#page-work .sec-root .sec-root-three .area-summary-in .balloon span {
font-size: 14px;
font-weight: bold;
color: #fff;
line-height: 1.42;
position: absolute;
top: 15%;
left: 0;
right: 0;
text-align: center;
}
#page-work .sec-root .sec-root-three .area-summary-in .point ul {
padding: 0 10px;
}
#page-work .sec-root .sec-root-three .area-summary-in .point ul li:nth-of-type(1) {
margin: 0 0 12px;
text-indent: -2.1em;
margin-left: 2em;
}
#page-work .sec-root .sec-root-three .area-summary-in .point ul li:nth-of-type(1) svg {
width: 29px;
height: 19px;
}
#page-work .sec-root .sec-root-three .area-summary-in .point ul li:nth-of-type(2) svg {
width: 27px;
height: 19px;
}
#page-work .sec-root .sec-root-three .area-summary-in .point ul li {
font-size: 17px;
line-height: 1.4;
font-weight: bold;
text-indent: -2em;
margin-left: 2em;
}
#page-work .sec-root .sec-root-three .area-summary-in .point ul li span {
margin: 0 0 0 10px;
position: relative;
top: -2px;
}
#page-work .sec-root .sec-root-three .area-summary-child {
display: block;
justify-content: space-between;
padding: 20px;
margin: 0 10px;
background: #ffedf7;
border-radius: 15px;
}
#page-work .sec-root .sec-root-three .area-summary-child .img {
position: static;
width: 130px;
float: left;
padding: 0 10px 0 0;
}
#page-work .sec-root .sec-root-three .area-summary-child .content {
padding: 0;
width: auto;
}
#page-work .sec-root .sec-root-three .area-summary-child .content p {
font-size: 13px;
font-weight: normal;
line-height: 1.53
}
#page-work .sec-root-flow {
position: relative;
padding: 100px 0 100px;
margin: 50px auto 80px;
/* padding: 0 0 200px; */
}
#page-work .sec-root-flow::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 180%;
height: 100%;
margin: 2% -30% 0;
background: #fff484;
-webkit-transform-origin: right center;
-ms-transform-origin: right center;
transform-origin: right center;
-webkit-transform: rotate(-3.5deg);
-ms-transform: rotate(-3.5deg);
transform: rotate(-3.5deg);
z-index: -1;
}
#page-work .sec-root-flow::after {
position: absolute;
top: -30px;
right: 30px;
content: '';
background: url(../images/work/bg_flow_top_right_sp.png) top center no-repeat;
background-size: 105px 81px;
width: 105px;
height: 81px;
z-index: 1;
}
#page-work .nav-flow {
margin: 0 auto 100px;
}
#page-work .nav-flow ul {
display: flex;
justify-content: space-between;
align-items: center;
flex-flow: row wrap;
}
#page-work .nav-flow ul li {
width: 49%;
padding: 0;
}
#page-work .nav-flow ul li a {
position: relative;
display: block;
font-size: 13px;
text-align: center;
border: 1px solid #222222;
height: 48px;
line-height: 48px;
box-sizing: border-box;
font-weight: bold;
}
#page-work .nav-flow ul li:first-child a {
padding: 2px 0 0;
line-height: 2.3;
}
#page-work .nav-flow ul li .current, #page-work .nav-flow ul li a:hover {
background: #121212;
color: #fff;
}
#page-work .nav-flow ul li .current:after, #page-work .nav-flow ul li a:hover:after {
position: absolute;
top: 100%;
right: 50%;
content: '';
margin-top: 0;
border-top: 10px solid #222;
border-right: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 6px solid transparent;
margin-right: -5px;
}
#page-work .nav-flow ul li a:hover {
opacity: 1;
}
#page-work .nav-flow ul li a span {
display: block;
font-size: 11px;
line-height: 0;
}
#page-work .sec-routine {
position: relative;
}
#page-work .sec-routine .img-jb {
position: absolute;
top: -90px;
left: 4px;
width: 69px;
}
#page-work .sec-routine .img-person {
position: absolute;
bottom: -120px;
left: 10px;
width: 275px;
}
#page-work .sec-routine::before {
position: absolute;
top: -21px;
left: 43px;
content: '';
}
#page-work .sec-routine.sec-routine-first::before {
background: url(../images/work/bg_color.png) top left no-repeat;
width: 5px;
height: 100%;
/* background-size: cover; */
}
#page-work .sec-routine.sec-routine-second::before {
background: url(../images/work/bg_color.png) top left no-repeat;
width: 5px;
height: 100%;
}
#page-work .sec-routine .list-routine {
padding: 58px 0 0;
margin: 0 0 0 60px;
}
#page-work .sec-routine .list-routine li {
display: block;
margin: 0 auto 20px;
position: relative;
top: -48px;
}
#page-work .sec-routine-first.sf-visible .list-routine li:nth-of-type(3) {
margin: 0 auto 20px;
}
#page-work .sec-routine-first.sf-visible .list-routine li:nth-of-type(4) {
margin: 0 auto 20px;
}
#page-work .sec-routine .list-routine li::before {
width: 100%;
height: 100%;
content: '';
position: absolute;
top: 10%;
left: -17px;
}
#page-work .sec-routine .list-routine li:nth-of-type(1)::before {
background: url(../images/work/tit_routine01.png) top left no-repeat;
background-size: 118px 55px;
}
#page-work .sec-routine .list-routine li:nth-of-type(2)::before {
background: url(../images/work/tit_routine02.png) top left no-repeat;
background-size: 121px 59px;
}
#page-work .sec-routine .list-routine li:nth-of-type(3)::before {
background: url(../images/work/tit_routine03.png) top left no-repeat;
background-size: 121px 41px;
}
#page-work .sec-routine .list-routine li:nth-of-type(4)::before {
background: url(../images/work/tit_routine04.png) top left no-repeat;
background-size: 121px 39px;
top: 6%;
}
#page-work .sec-routine .list-routine li:nth-of-type(5)::before {
background: url(../images/work/tit_routine05.png) top left no-repeat;
background-size: 121px 38px;
}
#page-work .sec-routine .list-routine li:nth-of-type(6)::before {
background: url(../images/work/tit_routine06.png) top left no-repeat;
background-size: 121px 38px;
}
#page-work .sec-routine .img {
/* position: absolute; */
margin: 0 0 0 50%;
}
#page-work .sec-routine .content {
width: 100%;
padding: 8px 0 0 20px;
box-sizing: border-box;
}
#page-work .sec-routine .content .txt-image {
display: block;
}
#page-work .sec-routine .content .txt-image .img {
display: none;
}
#page-work .sec-routine .content h3 {
display: block;
position: relative;
background-color: #fcc5a3;
padding: 8px;
margin: 0 auto 10px;
box-sizing: border-box;
font-size: 17px;
font-weight: bold;
color: #fff;
background-color: #ff97cc;
border-radius: 30px;
text-align: center;
}
#page-work .sec-routine .content h3::before {
content: none;
}
#page-work .sec-routine .content p {
line-height: 1.53;
}
/* page-member */
#page-member .sec-talk {
margin: 0 auto 60px;
}
#page-member .sec-talk .sec-header {
margin: 0 auto 60px;
}
#page-member .sec-talk-movie {
display: block;
margin: 0 auto 20px;
}
#page-member .sec-talk-movie .area-video {
margin: 0 0 12px;
}
#page-member .sec-talk-movie .area-video .video {
height: 100%;
}
#page-member .sec-talk-movie .area-video .video video {
width: 100%;
height: auto;
}
#page-member .sec-talk-movie .area-video p {
font-size: 11px;
line-height: 1.36;
}
#page-member .sec-talk-movie .chapter {
order: 2;
}
#page-member .sec-talk-movie .chapter ul {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
padding: 0 0 8px;
}
#page-member .sec-talk-movie .chapter ul li {
display: flex;
align-items: center;
position: relative;
width: 48.6%;
/* height: 48px; */
margin: 0 0 8px;
box-sizing: border-box;
background-color: #fff;
border: 1px solid #3ddc9f;
font-size: 12px;
font-weight: bold;
line-height: 1.4;
cursor: pointer;
transition: all .15s ease-in-out 0s;
}
#page-member .sec-talk-movie .chapter ul li:nth-of-type(4) a, #page-member .sec-talk-movie .chapter ul li:nth-of-type(5) a {
/* height: 56px */
}
#page-member .sec-talk-movie .chapter ul li a::before {
display: none;
}
#page-member .sec-talk-movie .chapter ul li a::after {
display: none;
}
#page-member .sec-talk-movie .chapter ul li br {
display: none;
}
#page-member .sec-talk-movie .chapter ul li span {
position: absolute;
top: 50%;
left: 8px;
margin: -6px 0 0;
color: #3ddc9f;
transition: all .15s ease-in-out 0s;
}
#page-member .sec-talk-movie .chapter ul li a {
display: flex;
align-items: center;
width: 100%;
height: 48px;
padding: 0 10px 0 33px;
}
#page-member .sec-talk-movie .chapter ul li.current a,
#page-member .sec-talk-movie .chapter ul li a:hover {
opacity: 1;
color: #fff;
background-color: #3ddc9f;
}
#page-member .sec-talk-intro {
padding: 40px 10px 32px;
margin: 0 auto;
box-sizing: border-box;
background: #fffbf3;
z-index: -1;
}
#page-member .sec-talk-intro h3 {
margin: 0 auto 30px;
font-size: 24px;
font-weight: bold;
letter-spacing: 0.05em;
color: #09acf1;
text-align: center;
}
#page-member .sec-talk-intro h3 span {
position: relative;
}
#page-member .sec-talk-intro h3 span:before, #page-member .sec-talk-intro h3 span:after {
content: '';
position: absolute;
top: 12px;
left: auto;
display: inline-block;
width: 24px;
height: 1px;
background-color: #30b8f1;
}
#page-member .sec-talk-intro h3 span:before {
left: -29px;
transform: rotate(-115deg);
}
#page-member .sec-talk-intro h3 span:after {
transform: rotate(-60deg);
}
#page-member .sec-talk-intro ul {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
#page-member .sec-talk-intro ul li {
width: 48.6%;
margin: 0 0 20px;
}
#page-member .sec-talk-intro .img {
margin: 0 0 8px;
}
#page-member .sec-talk-intro .img img {
width: 100%;
}
#page-member .sec-talk-intro h4 {
margin: 0 0 8px;
font-size: 13px;
}
#page-member .sec-talk-intro h4 span {
display: block;
padding: 6px 0 0;
font-size: 10px;
}
#page-member .sec-talk-intro p {
font-size: 11px;
line-height: 1.42;
}
#page-member .employee-member1 .li-member-first {
transform: translate3d(0, 30px, 0);
transition: all .3s ease .8s;
opacity: 0;
position: relative;
top: -30px;
}
#page-member .employee-member1 .li-member-first.current {
transform: translate3d(0, 0, 0);
opacity: 1;
}
#page-member .nav-page .area-btn a {
background: #09acf1;
}
#page-member .nav-page .area-btn a::before {
background: #0976f1;
}
#page-member .page-header {
background-image: url(../images/member/bg_page_header_sp.jpg);
height: 175px;
margin: 0 0 80px;
}
#page-member .page-header-in::before {
content: none;
}
#page-member .page-header-in::after {
content: none;
}
/*-----page-member-detail-----*/
body[id^="page-member-detail"] .sec-message {
transform: rotate(-3.5deg);
}
body[id^="page-member-detail"] .sec-message p {
/* transform: rotate(3.5deg); */
}
body[id^="page-member-detail"] .page-header {
background-image: url(../images/member/bg_page_header_sp.jpg);
height: 175px;
margin: 0 0 80px;
}
body[id^="page-member-detail"] .page-header .page-header-in::before {
content: none;
}
body[id^="page-member-detail"] .page-header .page-header-in::after {
content: none;
}
body[id^="page-member-detail"] .sec-member {
background-repeat: no-repeat;
height: 200px;
position: relative;
background-position: center;
margin: 0 10px;
background-size: cover;
}
#page-member-detail1 .sec-member {
background-image: url(../images/member/bg_member_sp.png);
}
#page-member-detail2 .sec-member {
background-image: url(../images/member/bg_fujiwara_sp.png);
}
#page-member-detail3 .sec-member {
background-image: url(../images/member/bg_niitsu_sp.png);
}
#page-member-detail4 .sec-member {
background-image: url(../images/member/bg_yanai.png);
}
#page-member-detail5 .sec-member {
background-image: url(../images/member/bg_fukuda_sp.png);
}
#page-member-detail6 .sec-member {
background-image: url(../images/member/bg_yasuda_sp.png);
}
body[id^="page-member-detail"] .inner {
background-repeat: no-repeat;
padding: 24px 16px;
margin: 0 auto;
position: relative;
: 122px top:;
width: 90%;
box-sizing: border-box;
background-size: 100% 100%;
}
#page-member-detail1 .inner {
background-image: url(../images/member/bg_name_endo_sp.png);
}
#page-member-detail2 .inner {
background-image: url(../images/member/bg_name_fujiwara_sp.png);
}
#page-member-detail3 .inner {
background-image: url(../images/member/bg_name_niitsu_sp.png);
}
#page-member-detail4 .inner {
background-image: url(../images/member/bg_name_yanai.png);
}
#page-member-detail5 .inner {
background-image: url(../images/member/bg_name_fukuda_sp.png);
}
#page-member-detail6 .inner {
background-image: url(../images/member/bg_name_yasuda_sp.png);
height: auto;
}
body[id^="page-member-detail"] .inner p {
font-size: 12px;
font-weight: bold;
color: #fff;
padding: 0 0 0 20px;
}
body[id^="page-member-detail"] .inner p:nth-of-type(1) {
margin-bottom: 5px;
line-height: 20px;
font-weight: bold;
}
body[id^="page-member-detail"] .inner p:nth-of-type(2) {
margin-bottom: 10px;
}
body[id^="page-member-detail"] .inner p:nth-of-type(3) {
line-height: 1.5em;
}
#page-member-detail4 .inner p {
color: #000;
}
body[id^="page-member-detail"] .name-jp {
font-size: 20px;
font-weight: bold;
}
body[id^="page-member-detail"] .name-en {
font-size: 10px;
font-weight: bold;
}
body[id^="page-member-detail"] h2 {
display: inline-block;
font-size: 21px;
font-weight: bold;
margin-top: 90px;
position: relative;
line-height: 1.4;
}
body[id^="page-member-detail"] h2+br+h2 {
padding: 15px 0 0;
}
#page-member-detail1 h2 {
color: #ff7fc0;
margin: 90px 0 30px;
}
#page-member-detail2 h2 {
color: #31da99;
}
#page-member-detail3 h2 {
color: #ff7fc0;
margin-bottom: 30px;
}
#page-member-detail4 h2 {
color: #52d4e2;
}
#page-member-detail4 h2:nth-of-type(1) {
margin-bottom: 30px;
}
#page-member-detail4 h2:nth-of-type(2) {
margin-top: 0;
margin-bottom: 30px;
}
#page-member-detail5 h2 {
color: #52d4e2;
}
#page-member-detail5 .h2-wrap {
margin: 30px auto;
}
#page-member-detail5 h2:nth-of-type(1) {
height: 70px;
}
#page-member-detail5 h2:nth-of-type(2) {
margin-top: 5px;
}
#page-member-detail6 h2 {
color: #09acf1;
margin: 110px auto 30px;
}
body[id^="page-member-detail"] .h2-wrap {
margin: 30px 0 0;
text-align: center;
}
body[id^="page-member-detail"] h3 {
/* margin-bottom: 30px; */
position: relative;
padding: 0;
font-size: 17px;
line-height: 1.32;
}
body[id^="page-member-detail"] .line {
margin: 2px auto 6px;
width: 100%;
}
#page-member-detail1 .line {
border: solid 1px #ff7fc0;
}
#page-member-detail2 .line {
border: solid 1px #31da99;
margin: 10px auto 60px auto;
}
#page-member-detail3 .line {
border: solid 1px #ff7fc0;
}
#page-member-detail4 .line {
border: solid 1px #52d4e2;
}
#page-member-detail5 .line {
border: solid 1px #52d4e2;
}
#page-member-detail6 .line {
border: solid 1px #09acf1;
}
body[id^="page-member-detail"] [class^="q"] h3 {
position: relative;
padding: 0 0 0 45px;
}
body[id^="page-member-detail"] [class^="q"] h3::before {
content: '';
position: absolute;
top: 50%;
left: 0;
color: #09acf1;
margin: -15px 0 0;
width: 50px;
height: 31px;
background-size: 23px 31px;
}
body[id^="page-member-detail"] [class^="sec-q"] {
margin: 0 auto 50px;
}
body[id^="page-member-detail"] [class^="sec-q"] p {
font-size: 13px;
}
body[id^="page-member-detail"] .sec-q1 .sec-in {
display: block;
}
body[id^="page-member-detail"] .sec-q1 .sec-in .flex-colum {
margin: 0 auto 20px;
}
body[id^="page-member-detail"] .sec-q1 .sec-in img {
margin: 0;
}
body[id^="page-member-detail"] [class^="sec-q"] p {
line-height: 1.87;
letter-spacing: 0.03em;
}
body[id^="page-member-detail"] .sec-q1 {
margin: 0 auto 60px;
}
body[id^="page-member-detail"] .sec-q1 .sec-in, body[id^="page-member-detail"] .sec-q3 .sec-in {
display: block;
}
body[id^="page-member-detail"] .sec-q .sec-in {
position: relative;
}
body[id^="page-member-detail"] .sec-q .sec-in .content {
position: relative;
padding: 20px 24px;
box-sizing: border-box;
background: #fff;
}
body[id^="page-member-detail"] .sec-q1 .sec-in .content {
width: 96%;
margin: -30px auto 0;
border-top: 1px solid #b5e6fb;
border-right: 4px solid #b5e6fb;
border-bottom: 4px solid #b5e6fb;
border-left: 1px solid #b5e6fb;
}
body[id^="page-member-detail"] .sec-q2 .sec-in .content {
width: 96%;
margin: -52px auto 0;
border-top: 1px solid rgb(255, 214, 235);
border-right: 4px solid rgb(255, 214, 235);
border-bottom: 4px solid rgb(255, 214, 235);
border-left: 1px solid rgb(255, 214, 235);
}
body[id^="page-member-detail"] .sec-q3 .sec-in .content {
width: 96%;
height: auto;
margin: -30px auto 0;
border-top: 1px solid rgba(10, 172, 242, 0.3);
border-right: 6px solid rgba(10, 172, 242, 0.3);
border-bottom: 6px solid rgba(10, 172, 242, 0.3);
border-left: 1px solid rgba(10, 172, 242, 0.3);
}
body[id^="page-member-detail"] .sec-q .sec-in .content::before, body[id^="page-member-detail"] .sec-q .sec-in .content::after {
position: absolute;
width: 37px;
height: 37px;
content: '';
}
body[id^="page-member-detail"] .sec-q .sec-in .content::before {
top: -15px;
right: -12px;
}
body[id^="page-member-detail"] .sec-q .sec-in .content::after {
bottom: -16px;
left: -12px;
}
body[id^="page-member-detail"] .sec-q1 .sec-in .content::before {
background: url(../images/member/ico_q1_clip1.png) 0 0 no-repeat;
background-size: 37px 37px;
}
body[id^="page-member-detail"] .sec-q1 .sec-in .content::after {
background: url(../images/member/ico_q1_clip2.png) 0 0 no-repeat;
background-size: 37px 37px;
}
body[id^="page-member-detail"] .sec-q2 .sec-in .content::before {
background: url(../images/member/ico_q2_clip1.png) 0 0 no-repeat;
background-size: 37px 37px;
}
body[id^="page-member-detail"] .sec-q2 .sec-in .content::after {
background: url(../images/member/ico_q2_clip2.png) 0 0 no-repeat;
background-size: 37px 37px;
}
body[id^="page-member-detail"] .sec-q3 .sec-in .content::before {
background: url(../images/member/ico_q3_clip1.png) 0 0 no-repeat;
background-size: 37px 37px;
}
body[id^="page-member-detail"] .sec-q3 .sec-in .content::after {
background: url(../images/member/ico_q3_clip2.png) 0 0 no-repeat;
background-size: 37px 37px;
}
body[id^="page-member-detail"] .sec-q1 .sec-in .content-in:first-child, body[id^="page-member-detail"] .sec-q2 .sec-in .content-in:first-child {
margin: 0 0 30px;
}
body[id^="page-member-detail"] .sec-q1 .img {
position: static;
width: 100%;
height: 100%;
margin: 0;
}
body[id^="page-member-detail"] .sec-q3 .img {
position: static;
}
body[id^="page-member-detail"] .sec-q2 {
margin: 0 auto 60px;
}
body[id^="page-member-detail"] .sec-q2 .sec-in {}
body[id^="page-member-detail"] .sec-q3 {
margin: 0 auto 90px;
}
body[id^="page-member-detail"] .flex {
display: flex;
flex-flow: inherit;
justify-content: space-between;
width: 100%;
}
body[id^="page-member-detail"] .sec-offtime .flex img {
width: 124px;
height: 135px;
margin: 0;
}
body[id^="page-member-detail"] .sec-offtime .sec-in {
background-color: #f8f7f3;
box-sizing: border-box;
padding: 0 10px 30px;
margin: 20px 0 0;
border: none;
}
body[id^="page-member-detail"] .sec-offtime p {
font-size: 13px;
padding-left: 12px;
line-height: 1.71;
width: auto;
box-sizing: border-box;
background: none;
padding: 0;
margin: 0 0 0 16px;
position: static;
}
body[id^="page-member-detail"] .ttl-offtime {
text-align: center;
padding: 0;
}
body[id^="page-member-detail"] .ttl-offtime img {
padding-top: 20px;
padding-bottom: 16px;
text-align: center;
width: 74px;
height: 19px;
}
body[id^="page-member-detail"] .sec-offtime {
margin-bottom: 160px;
}
body[id^="page-member-detail"] .sec-message {
margin-bottom: 80px;
}
body[id^="page-member-detail"] .sec-message p {
color: #fff;
}
body[id^="page-member-detail"] .sec-message {
position: relative;
z-index: 0;
}
body[id^="page-member-detail"] .snt-message {
font-weight: bold;
font-size: 15px;
line-height: 1.7;
}
body[id^="page-member-detail"] .sec-message .flex {
display: block;
flex-direction: row;
align-items: center;
justify-content: space-between;
position: relative;
}
body[id^="page-member-detail"] .ttl-message {
font-weight: bold;
font-size: 16px;
padding-bottom: 20px;
}
body[id^="page-member-detail"] .sec-message img {
/* position: static; */
px;
*/ bottom: 0;
width: 203px;
margin: 0 auto;
text-align: center;
display: block;
left: -10px;
}
body[id^="page-member-detail"] .sec-message::before {
position: absolute;
top: -50px;
left: auto;
height: 100%;
width: 120%;
padding-bottom: 50px;
margin-left: -30px;
z-index: 0;
content: "";
transform-origin: right center;
background-color: #09acf1;
}
body[id^="page-member-detail"] .sec-message>img {
position: absolute;
top: -380px;
left: 0;
}
body[id^="page-member-detail"] .sec-in-wrap .sec-in {
position: relative;
}
body[id^="page-member-detail"] .sec-in-wrap .sec-in:before {
content: none;
}
body[id^="page-member-detail"] .sec-in-wrap .sec-in:after {
content: "";
background: url(../images/member/img_tri_sp.png) no-repeat;
background-size: 130px 96px;
position: absolute;
right: 0;
top: -86px;
width: 130px;
height: 96px;
}
body[id^="page-member-detail"] .sec-in-wrap .flex-colum {
position: relative;
/* margin: -130px 0 0; */
width: 100%;
transform: rotate(3.5deg);
padding: 0 8px 20px;
}
body[id^="page-member-detail"] .prev a {
display: block;
padding: 0 20px 0 0;
}
body[id^="page-member-detail"] .prev a img {
transition: all .15s ease-in-out 0s;
}
body[id^="page-member-detail"] .next a {
display: block;
position: relative;
padding: 0 0 0 20px;
}
body[id^="page-member-detail"] .next a img {
right: 0;
transition: all .15s ease-in-out 0s;
}
body[id^="page-member-detail"] .prev .flex-colum>img {
padding-left: 50px;
padding-bottom: 20px;
}
body[id^="page-member-detail"] .next .flex-colum>img {
padding-left: 50px;
padding-bottom: 20px;
}
body[id^="page-member-detail"] .prev .flex-colum p:nth-of-type(1) {
position: absolute;
top: -24px;
left: 0;
text-align: center;
margin: 0 0 10px;
}
body[id^="page-member-detail"] .next .flex-colum p:nth-of-type(1) {
position: absolute;
top: -24px;
left: auto;
right: 0;
text-align: center;
margin: 0 auto 10px;
}
body[id^="page-member-detail"] .prev p {
font-size: 10px;
line-height: 20px;
}
body[id^="page-member-detail"] .next p {
font-size: 10px;
line-height: 20px;
}
body[id^="page-member-detail"] .prev .flex-colum {
padding-top: 10px;
padding-left: 0;
}
body[id^="page-member-detail"] .next .flex-colum {
padding-top: 10px;
padding-right: 0;
}
body[id^="page-member-detail"] .sec-other {
margin: 0 0 60px;
}
body[id^="page-member-detail"] .sec-other .sec-in {
position: relative;
}
body[id^="page-member-detail"] .sec-other .sec-child {
display: flex;
flex-direction: row;
justify-content: space-between;
/* position: relative; */
margin: 0 auto 24px;
}
body[id^="page-member-detail"] span {
font-size: 14px;
font-weight: bold;
}
body[id^="page-member-detail"] .index {
/* padding: 95px 55px; */
position: static;
}
body[id^="page-member-detail"] .index a:hover {
opacity: 1;
}
body[id^="page-member-detail"] .index img {
/* padding: 75px 0 95px 30px; */
}
body[id^="page-member-detail"] .sec-entry {
position: relative;
overflow: hidden;
padding: 80px 0 100px;
margin: 0 auto;
}
body[id^="page-member-detail"] .sec-entry::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 120%;
height: 80%;
margin: 2% -10% 0;
background: #fdf7f5;
transform-origin: right center;
transform: rotate(-3.5deg);
z-index: -1;
}
body[id^="page-member-detail"] .ff-roboto span {
font-size: 14px;
padding: 0 6px;
letter-spacing: 0.15em;
}
body[id^="page-member-detail"] .sec-other svg path {
fill: #333;
transition: all .15s ease-in-out 0s;
}
body[id^="page-member-detail"] .sec-other svg path:nth-of-type(2) {
fill: #fff!important;
}
body[id^="page-member-detail"] .next a:hover {
opacity: 1;
}
body[id^="page-member-detail"] .prev a:hover {
opacity: 1;
}
#page-member-detail1 .prev a:hover {
color: #fe6d60;
}
#page-member-detail1 .prev a:hover path {
fill: #fe6d60;
}
#page-member-detail2 .prev a:hover {
color: #3dda9e;
}
#page-member-detail2 .prev a:hover path {
fill: #3dda9e;
}
#page-member-detail3 .prev a:hover {
color: #ff97cc;
}
#page-member-detail3 .prev a:hover path {
fill: #ff97cc;
}
#page-member-detail4 .prev a:hover {
color: #52d4e2;
}
#page-member-detail4 .prev a:hover path {
fill: #52d4e2;
}
#page-member-detail5 .prev a:hover {
color: #fdec34;
}
#page-member-detail5 .prev a:hover path {
fill: #fdec34;
}
#page-member-detail6 .prev a:hover {
color: #09aaee;
}
#page-member-detail6 .prev a:hover path {
fill: #09aaee;
}
#page-member-detail1 .next a:hover {
color: #ff97cc;
}
#page-member-detail1 .next a:hover path {
fill: #ff97cc;
}
#page-member-detail2 .next a:hover {
color: #52d4e2;
}
#page-member-detail2 .next a:hover path {
fill: #52d4e2;
}
#page-member-detail3 .next a:hover {
color: #fdec34;
}
#page-member-detail3 .next a:hover path {
fill: #fdec34;
}
#page-member-detail4 .next a:hover {
color: #09aaee;
}
#page-member-detail4 .next a:hover path {
fill: #09aaee;
}
#page-member-detail5 .next a:hover {
color: #fe6d60;
}
#page-member-detail5 .next a:hover path {
fill: #fe6d60;
}
#page-member-detail6 .next a:hover {
color: #3dda9e;
}
#page-member-detail6 .next a:hover path {
fill: #3dda9e;
}
body[id^="page-member-detail"] .sec-entry::after {
content: '';
display: block;
position: absolute;
top: 50%;
right: 0;
width: 100%;
height: 100%;
background: #fdf7f5;
z-index: -2;
}
/*-----page-member-----*/
#page-member .sec-header p {
text-align: center;
margin-bottom: 22px;
width: 58px;
margin: 0 auto 10px;
}
#page-member h2 {
margin-bottom: 12px;
font-size: 21px;
font-weight: bold;
text-align: center;
}
#page-member h2+span {
font-size: 12px;
}
#page-member .employee-member1 {
display: block;
margin: 0 auto;
}
#page-member .employee-member1 li.js-sf-item, #page-member .employee-member2 li.js-sf-item {
transition-delay: 0s;
}
#page-member .employee-member1 li, #page-member .employee-member2 li {
margin: 0 auto 20px;
}
#page-member .employee-member1 li a {
display: block;
position: relative;
top: 0;
left: 0;
}
#page-member .employee-member1 li a img {
width: 100%;
}
#page-member .employee-member1 li a:hover {
position: relative;
top: -6px;
left: -6px;
opacity: 1;
}
#page-member .employee-member2 li a {
display: block;
position: relative;
top: 0;
left: 0;
}
#page-member .employee-member2 li a img {
width: 100%;
}
#page-member .employee-member2 li a:hover {
position: relative;
top: -6px;
left: -6px;
opacity: 1;
}
#page-member .employee-member2 {
display: block;
margin-bottom: 0;
}
#page-member .sec-employee .sec-in {
position: relative;
padding: 30px 10px 180px;
}
#page-member .sec-employee .sec-in::before {
content: "";
background: url(../images/member/bg_deco_left_02_sp.png) no-repeat bottom center;
position: absolute;
bottom: 0;
left: 0;
width: 188px;
height: 169px;
background-size: 188px 169px;
}
#page-member .sec-employee .sec-in::after {
content: "";
background: url(../images/member/bg_deco_right_02_sp.png) no-repeat bottom center;
position: absolute;
bottom: 45px;
left: auto;
right: 0;
width: 63px;
height: 130px;
background-size: 63px 130px;
}
#page-member .sec-branch::before {
position: absolute;
top: -5%;
left: -20%;
content: "";
background-color: #fbf8f2;
width: 140%;
height: 110%;
z-index: -10;
transform: rotate(-3.5deg);
}
#page-member .sec-branch p {
text-align: center;
margin-bottom: 22px;
width: 58px;
margin: 0 auto 10px;
}
#page-member .sec-branch {
position: relative;
padding: 40px 0 0;
margin-bottom: 160px;
}
#page-member .sec-branch h2 {
margin-bottom: 10px;
}
#page-member .sec-branch h2 span {
display: block;
font-size: 15px;
line-height: 2;
}
#page-member .branch-member1 {
position: relative;
display: flex;
flex-direction: row;
justify-content: center;
margin-bottom: 180px;
}
#page-member .sec-branch h2.sf-visible+.branch-member1::before {
width: 50%;
}
#page-member .branch-member2 {
position: relative;
display: flex;
flex-direction: row;
justify-content: center;
margin-bottom: 30px;
}
#page-member .branch-member3 {
position: relative;
display: flex;
flex-direction: row;
justify-content: center;
}
#page-member .branch-member1 li:nth-of-type(1) {
position: relative;
left: -25px;
}
#page-member .branch-member1 li:nth-of-type(2) {
position: relative;
}
#page-member .branch-member1 li:nth-of-type(3) {
position: relative;
top: 50px;
right: -25px;
}
#page-member .branch-member2 li:nth-of-type(1) {
position: relative;
left: 190px;
top: 10px;
}
#page-member .branch-member2 li:nth-of-type(2) {
position: relative;
left: 215px;
top: -140px;
}
#page-member .branch-member2 li:nth-of-type(3) {
position: relative;
left: 220px;
top: -90px
}
#page-member .branch-member2 li:nth-of-type(4) {
position: relative;
left: 250px;
top: -27px;
z-index: 1;
}
#page-member .branch-member2 li:nth-of-type(5) {
position: relative;
left: -70px;
top: -170px;
}
#page-member .branch-member3 li:nth-of-type(1) {
position: relative;
}
#page-member .branch-member3 li:nth-of-type(2) {
position: relative;
left: 47px;
top: -4px;
z-index: 10;
}
#page-member .branch-member3 li:nth-of-type(3) {
position: relative;
top: 80px;
}
#page-member .branch-member3 li:nth-of-type(4) {
position: relative;
left: -28px;
top: 290px;
}
#page-member .branch-member1::before {
content: "";
position: absolute;
height: 168px;
width: 0;
bottom: 30px;
left: 40%;
background-color: #09acf1;
z-index: 0;
transition: all .4s cubic-bezier(0.190, 1.000, 0.220, 1.000);
}
#page-member .branch-member2::before {
content: "";
position: absolute;
height: 168px;
width: 0;
bottom: 70px;
right: 38%;
background-color: #09acf1;
z-index: 0;
transition: all .4s cubic-bezier(0.190, 1.000, 0.220, 1.000);
}
#page-member .sec-branch h2.sf-visible+.branch-member1+.branch-member2::before {
width: 50%;
}
#page-member .name {
position: absolute;
top: -20px;
left: 260px;
}
#page-member .comment p:nth-of-type(2) {
font-size: 20px;
font-weight: bold;
color: #fff;
padding-top: 25px;
line-height: 1.5em;
}
#page-member .comment {
position: absolute;
left: -50px;
top: -70px;
width: 345px;
/* height:125px; */
background-color: #ff97cc;
border-radius: 8px;
}
#page-member .comment::before {
position: absolute;
top: -17px;
left: 48%;
content: '';
background: url(../images/common/svg_balloon_pink.svg) bottom left no-repeat;
background-size: 15px 18px;
width: 15px;
height: 18px;
}
#page-member .hada {
position: relative;
}
#page-member .employee-member1 li:nth-of-type(1) a:hover {
box-shadow: 6px 6px #96fcd5;
}
#page-member .employee-member1 li:nth-of-type(2) a:hover {
box-shadow: 6px 6px #ffdbed;
}
#page-member .employee-member1 li:nth-of-type(3) a:hover {
box-shadow: 6px 6px #b3f6fd;
}
#page-member .employee-member2 li:nth-of-type(1) a:hover {
box-shadow: 6px 6px #fff8ab;
}
#page-member .employee-member2 li:nth-of-type(2) a:hover {
box-shadow: 6px 6px #c5eeff;
}
#page-member .employee-member2 li:nth-of-type(3) a:hover {
box-shadow: 6px 6px #ffc9c4;
}
/* page-environment */
#page-environment .page-header {
background-image: url(../images/environment/bg_page_header_sp.jpg);
height: 175px;
margin: 0 0 80px 0;
}
#page-environment .page-header-in::before {
content: none;
}
#page-environment .page-header-in::after {
content: none;
}
#page-environment .nav-page .area-btn a {
background: #2dd494;
}
#page-environment .nav-page .area-btn a::before {
background: #0cb48e;
}
#page-environment .sec-flow {
margin: 0 auto 120px;
position: relative;
}
#page-environment .sec-flow::before {
position: absolute;
bottom: -232px;
left: -10px;
content: '';
background: url(../images/environment/bg_carrer_top_left_sp.png) bottom left no-repeat;
width: 188px;
height: 169px;
background-size: 188px 169px;
}
#page-environment .sec-flow-in {
width: 100%;
border: 1px dotted #0f0f0f;
padding: 20px 10px;
box-sizing: border-box;
}
#page-environment .sec-flow-in .img {
margin: 0 auto 16px;
padding: 0 0 0 25px;
box-sizing: border-box;
text-align: right;
}
#page-environment .sec-flow-in h3 {
margin: 0 auto 10px;
font-size: 14px;
font-weight: bold;
}
#page-environment .sec-flow-in p {
line-height: 1.71;
}
#page-environment .sec-flow-in {
position: relative;
margin: 0 auto;
}
#page-environment .sec-flow-in:nth-of-type(1) {
margin: 0;
}
#page-environment .sec-flow-in:nth-of-type(2) {
margin: 0 auto;
transition: all .4s ease;
}
#page-environment .sec-flow-in:nth-of-type(2)::after {
content: none;
}
#page-environment .sec-flow-in:nth-of-type(3) {
margin: 0 auto;
transition: all .4s ease;
}
#page-environment .sec-flow-in:nth-of-type(3)::after {
content: none;
}
#page-environment .sec-flow-in:nth-of-type(4) {
margin: 0 auto;
transition: all .4s ease;
}
#page-environment .sec-flow-in:nth-of-type(4)::after {
content: none;
}
#page-environment .sec-flow-in:nth-of-type(5) {
margin: 0 auto;
transition: all .4s ease;
}
#page-environment .sec-flow-in:nth-of-type(5)::after {
content: none;
}
#page-environment .sec-flow-in+.is-sp {
position: relative;
z-index: -1;
}
#page-environment .area-pop {
display: none;
}
#page-environment .sec-flow-in:nth-of-type(1).sf-visible+.is-sp+.sec-flow-in:nth-of-type(2)::after {
display: none;
}
#page-environment .area-pop .truck {
position: absolute;
bottom: 112px;
left: 0;
transition: all 3s ease-in-out 0s;
}
#page-environment .area-pop .truck.sf-visible {
left: 125px;
transform: translate3d(0, 0, 0);
}
#page-environment .area-pop .pop {
position: absolute;
}
#page-environment .area-pop .pop1 {
bottom: 82px;
left: 227px;
}
#page-environment .area-pop .pop2 {
bottom: -5px;
left: 35px;
}
#page-environment .area-pop .pop3 {
bottom: -5px;
right: 15px;
}
#page-environment .area-pop .pop4 {
bottom: -5px;
left: -15px;
}
#page-environment .sec-carrer {
position: relative;
padding: 120px 0 40px;
margin: 0 auto 100px;
}
#page-environment .sec-carrer::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 150%;
height: 100%;
margin: 2% -25% 0;
background: #52d4e2;
-webkit-transform-origin: right center;
-ms-transform-origin: right center;
transform-origin: right center;
-webkit-transform: rotate(-3.5deg);
-ms-transform: rotate(-3.5deg);
transform: rotate(-3.5deg);
z-index: -1;
}
#page-environment .sec-carrer::after {
position: absolute;
top: -60px;
right: 0;
left: auto;
content: '';
background: url(../images/environment/bg_carrer_top_right_sp.png) center center no-repeat;
background-size: 63px 130px;
width: 63px;
height: 130px;
z-index: 1;
}
#page-environment .sec-carrer .list-carrer {
display: block;
align-items: center;
justify-content: space-between;
margin: 0 auto;
}
#page-environment .sec-carrer .list-carrer li {
margin: 40px auto 0;
padding: 0 30px;
text-align: center;
}
#page-environment .sec-carrer .list-carrer li h3 {
margin: 16px auto 10px;
font-size: 16px;
font-weight: bold;
}
/* 0226 slot */
#page-about .area-operator {
background: url(../images/about/bg_operator.png) center left 36% no-repeat;
background-size: 92px 47px;
text-align: center;
margin: 0 auto 20px;
}
#page-about .area-operator .num {
padding: 0;
left: 48px;
}
#page-about .area-operator .num::before {
font-size: 46px;
}
#page-about .sec-number .column-two .place .num::before {
/* letter-spacing: 0.1em; */
}
#page-about .area-service {
background: url(../images/about/bg_service.png) bottom 25px right 20px no-repeat;
background-size: 58px 29px;
padding: 8px 0;
text-align: center;
margin: 0 auto;
width: 264px;
position: relative;
left: -32px;
}
#page-about .area-service .num::before {
font-size: 42px;
/* letter-spacing: 0.2em; */
}
/* #page-about .area-group {
background: url(../images/about/bg_group.png) left 100% bottom 33px no-repeat;
background-size: 58px 20px;
padding: 17px 0 0;
text-align: center;
margin: 0 0 0 -14px;
} */
#page-about .sec-number .column-two .area-group .year {
display: inline-block;
background: url(../images/about/bg_group_year.png) center center no-repeat;
background-size: 19px 20px;
width: 19px;
height: 20px;
content: '';
margin: 0 auto 14px;
}
#page-about .sec-number .column-two .area-group .month {
display: inline-block;
background: url(../images/about/bg_group_month.png) center center no-repeat;
background-size: 17px 19px;
width: 17px;
height: 19px;
margin: 0 auto 14px;
}
#page-about .area-group .num::before {
font-size: 21px;
letter-spacing: -0.1em;
}
#page-about .area-group .place-4 {
padding: 0;
}
#page-about .area-market {
background: url(../images/about/bg_market.png) bottom 15px left 60% no-repeat;
background-size: 90px 24px;
padding: 20px 0 0;
text-align: center;
margin: 0 0 0 -16px;
}
#page-about .area-market .num::before {
font-size: 31px;
letter-spacing: -0.2em;
}
#page-about .area-proceed {
background: url(../images/about/bg_proceed.png) bottom 8px right no-repeat;
background-size: 30px 30px;
width: 170px;
text-align: center;
margin: -6px auto 0;
}
#page-about .sec-number .column-two .comma {
display: inline-block;
background: url(../images/about/ico_comma.png) center center no-repeat;
background-size: 11px 21px;
width: 11px;
height: 21px;
margin: 0 auto;
position: relative;
left: -30px;
}
#page-about .area-proceed .num {
position: relative;
top: 10px;
left: -24px;
}
#page-about .area-proceed .num::before {
font-size: 42px;
}
#page-about .area-item {
background: url(../images/about/bg_item.png) center bottom 10px no-repeat;
background-size: contain;
padding: 0 60px 0 0;
text-align: center;
margin: 0 auto;
width: 200px;
}
#page-about .area-item .num::before {
font-size: 42px;
}
#page-about .sec-number .column-two .area-item span {
position: relative;
top: 3px;
left: 3px;
}
#page-about .area-recycl {
background: url(../images/about/bg_recycl.png) center center no-repeat;
background-size: contain;
padding: 0 56px 0 0;
text-align: center;
margin: 0 auto;
width: 194px;
}
#page-about .sec-number .column-two .area-recycl .dot {
display: inline-block;
background: url(../images/about/ico_dot.png) center bottom no-repeat;
background-size: 11px 11px;
width: 11px;
16px: 37px height:;
height: 11px;
}
#page-about .area-recycl .num::before {
font-size: 42px;
}
#page-about .area-holiday {
background: url(../images/about/ico_day.png) bottom 15px left 75% no-repeat;
background-size: 23px 29px;
padding: 0 30px 0 0;
text-align: center;
margin: 0 auto;
width: 210px;
}
#page-about .area-holiday .num::before {
font-size: 42px;
}
#page-about .area-work {
background: url(../images/about/bg_primary.png) center bottom no-repeat;
background-size: 112px 20px;
text-align: center;
margin: 0 auto;
}
#page-about .sec-number .column-two .area-work .num {
margin: 0 auto;
}
#page-about .area-work .num::before {
font-size: 20px;
}
#page-about .area-year {
background: url(../images/about/bg_year.png) bottom 16px right no-repeat;
background-size: 21px 20px;
padding: 0;
text-align: center;
margin: 0 auto;
width: 92px;
position: relative;
left: -10px;
}
#page-about .area-year .num::before {
font-size: 24px;
}
#page-about .area-member {
background: url(../images/about/bg_member.png) center bottom no-repeat;
padding: 0;
text-align: center;
margin: 0 auto;
position: relative;
top: 8px;
left: 0;
}
#page-about .area-member .num::before {
font-size: 42px;
position: relative;
top: -2px;
}
#page-about .sec-number .column-two .area-member .comma {
background-size: 7px 12px;
width: 7px;
top: -6px;
left: 0;
}
/* page-workplace */
#page-workplace .page-header {
background-image: url(../images/workplace/bg_page_header_sp.jpg);
height: 175px;
margin: 0 0 90px 0;
}
#page-workplace .page-header-in::before {
content: none;
}
#page-workplace .page-header-in::after {
content: none;
}
#page-workplace .sec-workplace {
margin: 0 auto 40px;
}
#page-workplace .sec-workplace .sec-in {
padding: 0;
}
#page-workplace .sec-workplace .sec-head h2 {
margin: 0 auto;
font-size: 19px;
line-height: 1.52;
}
#page-workplace .tit-sec svg path {
fill: #fdbc3e;
}
#page-workplace .sec-workplace .sec-map {
display: none;
}
#page-workplace .sec-workplace .sec-location {
border-top: 1px solid #aaa;
}
#page-workplace .sec-workplace .sec-location-in {
margin: 0;
border-bottom: 1px solid #aaa;
}
#page-workplace .sec-workplace .sec-location .title {
position: relative;
width: 100%;
margin: 0;
padding: 16px 10px;
box-sizing: border-box;
font-weight: bold;
transition: all .15s ease-in-out 0s;
pointer-events: auto;
}
#page-workplace .sec-workplace .sec-location .title.is-open {
background: #fffaf0;
border-bottom: 1px solid #ffdf9e;
}
#page-workplace .sec-workplace .sec-location .title h3 {
padding: 0 30px 0 0;
margin: 0;
font-size: 15px;
border-bottom: none;
}
#page-workplace .sec-workplace .sec-location .title i {
position: absolute;
top: 50%;
right: 10px;
width: 16px;
height: 16px;
margin-top: -8px;
}
#page-workplace .sec-workplace .sec-location .title i::before, #page-workplace .sec-workplace .sec-location .title i::after {
content: "";
position: absolute;
background-color: #ff9600;
transition: transform 0.3s ease-out;
}
#page-workplace .sec-workplace .sec-location .title i::before {
top: 0;
left: 45%;
width: 2px;
height: 100%;
}
#page-workplace .sec-workplace .sec-location .title i::after {
top: 45%;
left: 0;
width: 100%;
height: 2px;
}
#page-workplace .sec-workplace .sec-location .title.is-open i::before {
transform: rotate(90deg);
}
#page-workplace .sec-workplace .sec-location .title.is-open i::after {
transform: rotate(180deg);
}
#page-workplace .sec-workplace .sec-location .area9 .title h3 {
color: #f5ad6d;
}
#page-workplace .sec-workplace .sec-location .title p {
display: inline-block;
padding: 8px 70px 0 0;
font-weight: normal;
line-height: 1.16;
color: #222;
background: none;
}
#page-workplace .sec-workplace .sec-location .content {
display: none;
padding: 0 10px 60px;
box-sizing: border-box;
}
#page-workplace .sec-workplace .sec-location .content h4 {
position: relative;
margin: 16px 0 10px;
padding: 0 0 0 10px;
font-size: 13px;
font-weight: bold;
color: #f9b42d;
}
#page-workplace .sec-workplace .sec-location .content h4::after {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
content: '';
width: 8px;
height: 2px;
background-color: #f9b42d;
}
#page-workplace .sec-workplace .sec-location .content .head p {
margin: 6px 0 0;
line-height: 1.38;
}
#page-workplace .sec-workplace .sec-location .content .office {
width: 100%;
margin: 24px 0 0;
}
#page-workplace .sec-workplace .sec-location .sec-location-union .content .office {
width: 100%;
}
#page-workplace .sec-workplace .sec-location .content .office .list-office {
margin: 0 auto;
border-top: 1px solid #ffe8ba;
border-right: 1px solid #ffe8ba;
border-left: 1px solid #ffe8ba;
}
#page-workplace .sec-workplace .sec-location .sec-location-union .content .office .list-office {
margin: 0 auto 16px;
}
#page-workplace .sec-workplace .sec-location .sec-location-union .content .office .list-office+p {
line-height: 1.41;
}
#page-workplace .sec-workplace .sec-location .content .office .list-office li {
display: block;
align-items: center;
padding: 0;
border-bottom: 1px solid #ffe8ba;
line-height: 2;
}
#page-workplace .sec-workplace .sec-location .content .office .list-office li:nth-of-type(2n-1) {
background: none;
}
#page-workplace .sec-workplace .sec-location .content .office .list-office .shop {
width: 100%;
padding: 10px 16px;
text-align: left;
line-height: 1.41;
border-bottom: 1px solid #ffe8ba;
background: #fffaf0;
}
#page-workplace .sec-workplace .sec-location .content .office .list-office .address {
width: 100%;
padding: 8px 16px 12px;
box-sizing: border-box;
line-height: 1.41;
}
#page-workplace .sec-workplace .sec-location .sec-location-union .content .office .list-office .shop {
width: 100%;
}
#page-workplace .sec-workplace .sec-location .sec-location-union .content .office .list-office .address {
width: 100%;
padding-bottom: 2px;
}
#page-workplace .sec-workplace .sec-location .content .office .list-office .tel {
width: 140px;
padding: 0 16px;
}
#page-workplace .sec-workplace .sec-location .content .office .list-office .fax {
width: 140px;
padding: 0 16px 12px;
}
#page-workplace .sec-workplace .sec-location .txt-now {
margin: 16px 10px 0 10px;
font-size: 13px;
text-align: right;
}
#page-workplace .area2 h3 {
color: #40cddc;
}
#page-workplace #a-area3-tokyo.area3 h3 {
color: #f5ad6d;
}
#page-workplace #a-area4.area4 h3 {
color: #ff97cc;
}
#page-workplace #a-area6.area6 h3 {
color: #40cddc;
}
#page-workplace #a-area8.area8 h3 {
color: #31da99;
}
#page-workplace .area10 h3 {
color: #ff97cc;
}
.area-btn-modal,
.mfp-bg,
.mfp-wrap,
.js-modal {
display: none!important;
}
}
@media only screen and (max-width: 767px) {
#js-loading-video {
width: 100%;
height: 100%;
}
#page-member .sec-talk-movie .area-video .video {
width: 100%;
height: 54.6vw;
background: url(../images/member/top/img_talk_sp.jpg) no-repeat;
background-size: 100%;
}
#page-member .sec-talk-movie .area-video .video video {
width: 100%;
display: none;
}
#page-member.is-android .sec-talk-movie .area-video .video {
/* height: 100%; */
background: none;
}
#page-member.is-android .sec-talk-movie .area-video .video video {
display: block;
}
}
@media only screen and (max-width: 320px) {
#nav-global .area-btn a::after {
right: 5px;
}
#page-member .sec-talk-movie .chapter ul li a {
height: 56px;
}
#page-work .sec-root-three .list-root li .area-type img {
position: absolute;
bottom: 0;
}
#page-work .sec-root-three .list-root li:nth-of-type(1) .area-type img {
width: 75px;
}
#page-work .sec-root-three .list-root li:nth-of-type(2) .area-type img {
width: 72px;
}
#page-work .sec-root-three .list-root li:nth-of-type(3) .area-type img {
width: 75px;
}
}