/* CSS Document */ /*------------------------------------------------------ slider ------------------------------------------------------*/ #sliderWrap { position: relative;} .bxslider { position: static !important; z-index: 0;} .bxslider::before { content: ''; position: absolute; background: url("../top/bg_movie.png") repeat left top; width: 100%; height: 100%; left: 0; top: 0;} .bxslider::after { content: ''; position: absolute; background: url("../top/bg_movie2.svg") no-repeat center bottom; background-size: 100% auto; width: 100%; height: 100%; left: 0; bottom: 0; z-index: 999;} .bxslider li img { width: 100%;} .bxslider li img { -moz-transition: -moz-transform 4s linear; -webkit-transition: -webkit-transform 4s linear; -o-transition: -o-transform 4s linear; -ms-transition: -ms-transform 4s linear; transition: transform 8s linear; } .bxslider li img.on { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } #sliderText { position: absolute; z-index: 10; width: 100%; max-width: 640px;} .bx-wrapper { border: none; margin: 0; box-shadow: none;} @media (min-width: 768px) { #sliderSP { display: none;} #sliderText { height: 30px; right: 4%; bottom: 26%;} } @media (max-width: 767px) { #slider { display: none;} #sliderSP { display: block;} #sliderText { width: 75%; left: 0; right: 0; bottom: 12%; margin: auto;} } /*------------------------------------------------------ mission ------------------------------------------------------*/ #mission { background-color: #e9f0f4; position: relative;} #mission::before { content: ''; position: absolute; width: 150%; height: 100%; background-color: #133d6b; transform: rotate(2deg); left: -25%; z-index: 1; } #mission::after { content: ''; position: absolute; width: 150%; height: 100%; background-color: #e9f0f4; transform: rotate(-4deg); top: 0; left: -25%; z-index: 1; } #mission .container { position: relative; z-index: 2;} #mission .topTitle {} #mission .text { line-height: 2; } @media (min-width: 768px) { #mission .container { padding-top: 70px; padding-bottom: 70px;} } @media (max-width: 767px) { #mission .container { padding-top: 20px; padding-bottom: 30px; } } /*------------------------------------------------------ ------------------------------------------------------*/ .topTitle { text-align: center; color: #133d6b;} .topTitle2 { text-align: center; color: #fff; position: relative;} .topTitle2::after { content: ''; width: 100px; height: 4px; background-color: #2f90bd; display: block; margin-left: auto; margin-right: auto; margin-top: 2px;} .topTitle3 { text-align: center; color: #133d6b; position: relative;} .topTitle3::before { content: url("../top/arrow.svg"); display: inline-block; line-height: 1; vertical-align: -4px; padding-right: 6px;} .topTitle3::after { content: url("../top/arrow.svg"); transform: rotate(-180deg); display: inline-block; line-height: 1; padding-right: 6px; vertical-align: -1px;} @media (min-width: 768px) { .topTitle { font-size: 3.8rem;} .topTitle2 { font-size: 2.8rem;} .topTitle3 { font-size: 2.2rem;} } @media (max-width: 767px) { .topTitle { font-size: 3.4rem;} .topTitle2 { font-size: 2rem;} .topTitle3 { font-size: 2.4rem;} .topTitle3::before { vertical-align: -5px;} .topTitle3::after { vertical-align: -3px;} } /*------------------------------------------------------ komon ------------------------------------------------------*/ #komon { background: url("../top/bg_komon.jpg") no-repeat center center; background-size: cover; position: relative;} #komon .container {} #komon .topTitle2 { margin-bottom: 20px; text-shadow: 0px 0px 7px rgba(19,61,107,0.9);} #komon h3 { color: #FFFFFF; display: block; margin-bottom: 10px; } #komon .body { text-align: center; background-color: rgba(0,0,0,0.3);} #komon .body .text { color: #fff; margin-bottom: 15px;} #komon .body > ul {} #komon .body > ul li { background-color: rgba(255,255,255,0.85); position: relative; overflow: hidden; } #komon .body > ul li > span { width:100%; height:100%; left: 0; top:100%; background:#133d6b; position:absolute; z-index:1; } #komon .body > ul li a { display: block; height: 100%; text-decoration: none; color: #133d6b; font-weight: bold; position: relative; z-index: 2;} #komon .body > ul > li:last-child { background: none; } #komon .body > ul > li:first-child {} #komon .body > ul > li:first-child a {} #komon .body > ul > li:first-child a::before { content: ''; left: -14px; width: 10px; height: 10px; border-top: 2px solid #133d6b; border-right: 2px solid #133d6b; -webkit-transform: rotate(45deg); transform: rotate(45deg); display: inline-block; top: -3px; position: relative; } #komon .body > ul > li:first-child a::after { content: ''; right: -14px; width: 10px; height: 10px; border-top: 2px solid #133d6b; border-right: 2px solid #133d6b; -webkit-transform: rotate(-135deg); transform: rotate(-135deg); display: inline-block; top: -3px; position: relative; } #komon .body > ul ul {} #komon .body > ul ul li {} #komon .body > ul ul li a {} #komon .body > ul ul li a span { display: block; margin-bottom: 10px;} #komon .komondecoration { background: url("../top/bg_common2.png") no-repeat left top; position: absolute;} @media (min-width: 768px) { #komon { padding: 50px 0 65px; margin-bottom: 70px;} #komon h3 { font-size: 2rem; } #komon .body { padding: 30px;} #komon .body > ul > li:first-child { margin-bottom: 30px;} #komon .body > ul > li:first-child a { font-size: 2rem; padding: 35px 10px;} #komon .body > ul ul li { width: 33%; max-width: 328px;} #komon .body > ul ul li a { font-size: 1.8rem; padding: 49px 10px;} #komon .body > ul ul li a span { font-size: 4.5rem;} #komon .komondecoration { width: 100%; height: 80px; bottom: -30px !important; } /**/ #komon .body ul > li > span { transition:all .15s ease; } #komon .body ul > li > a { transition:all .15s ease; } #komon .body ul > li:hover > span { top: 0; } #komon .body ul > li:hover > a { color:#fff; } #komon .body > ul > li:first-child:hover a::before { transition:all .15s ease; border-color: #fff; } #komon .body > ul > li:first-child:hover a::after { transition:all .15s ease; border-color: #fff; } } @media (max-width: 767px) { #komon { margin-bottom: 50px; padding: 30px 0 10%; background-position: right center;} #komon .container { margin-left: 0; margin-right: 0;} #komon h3 { font-size: 1.8rem; } #komon .body { padding: 10px;} #komon .body .text { font-size: 1.4rem; text-align: left; } #komon .body > ul > li:first-child { margin-bottom: 20px;} #komon .body > ul > li:first-child a { font-size: 1.8rem; padding: 10px 10px;} #komon .body > ul > li:first-child a::before , #komon .body > ul > li:first-child a::after { top: -1px; } #komon .body > ul ul li { width: 33%;} #komon .body > ul ul li a { font-size: 1.3rem; padding: 10px 0;} #komon .body > ul ul li a span { font-size: 4rem;} #komon .komondecoration { width: 100%; background-size: 100% auto; left: 0; height: auto; top: auto; padding-bottom: 11.5%; } } /*------------------------------------------------------ contentsNav ------------------------------------------------------*/ #contentsNav {} #contentsNav > section { background-color: #f6f6f6; position: relative;} #contentsNav > section::before { content: ''; position: absolute; width: 100%; height: 60px; background-color: #fff; left: 0; top: 0;} #contentsNav .left {} #contentsNav .right {} #contentsNav .img { text-align: left; margin-bottom: 0; position: relative;} #contentsNav .img img { width: 100%; max-width: 422px;} #contentsNav .body { position: relative;} #contentsNav .title { color: #4d4d4d; margin-bottom: 12px;} #contentsNav .text {} #contentsNav .effect { position: absolute; right: 0; bottom: 0; margin-bottom: -20px; margin-right: 20px; } #contentsNav .effect span {} #contentsNav .effect a { padding-top: 10px; padding-bottom: 10px; } @media (min-width: 768px) { #contentsNav { margin-bottom: 100px;} #contentsNav > section { width: 50%; max-width: 516px; } #contentsNav .body { padding: 15px 30px 50px;} #contentsNav .title { font-size: 2rem;} } @media (max-width: 767px) { #contentsNav { margin-bottom: 100px;} #contentsNav .left { margin-bottom: 50px;} #contentsNav .img img { width: 90%; } #contentsNav .body { padding: 15px 20px 40px; } #contentsNav .title { font-size: 1.8rem;} } /*------------------------------------------------------ pickup ------------------------------------------------------*/ #pickup {} #pickup h3 { color: #133d6b; } .infostyle {} .infostyle .heading04 {} .infostyle .body { margin-bottom: 15px;} .infostyle dl {} .infostyle dl dt { color: #999999;} .infostyle dl dd { line-height: 2;} .infostyle .more { text-align: right;} .infostyle .more a {} @media (min-width: 768px) { #pickup { margin-bottom: 50px; } .infostyle .heading04 { margin-bottom: 30px;} .infostyle dl dt { font-size: 2.2rem;} .infostyle dl dd { font-size: 1.5rem;} .infostyle .body dl:not(:last-child) { margin-bottom: 25px;} } @media (max-width: 767px) { #pickup { margin-bottom: 70px; } .infostyle dl dt { font-size: 1.8rem;} .infostyle dl dd { font-size: 1.4rem;} .infostyle .body dl:not(:last-child) { margin-bottom: 20px;} .infostyle .more a { padding-right: 1em; font-size: 1.4rem;} } /*------------------------------------------------------ practice ------------------------------------------------------*/ #practice {} #practice .topTitle { margin-bottom: 15px;} #practice section {} #practice .topTitle3 { margin-bottom: 15px; letter-spacing: 2px; } #practice .body { background-color: #f6f6f6;} #practice .body ul {} #practice .enterprise ul {} #practice .enterprise ul li {} #practice .enterprise ul li a {} #practice .btnWrap { text-align: center;} #practice .btnWrap .effect {} #practice .btnWrap a { min-width: 328px;} #practice #personal ul {} #practice #personal ul li {} #practice #personal ul li a {} @media (min-width: 768px) { #practice { margin-bottom: 90px;} #practice .topTitle { font-size: 3.8rem;} #practice .body { padding: 40px 0 30px;} #practice .body ul { margin-bottom: 20px;} #practice .enterprise { margin-bottom: 65px; } #practice .enterprise ul { justify-content: flex-start; -webkit-justify-content: flex-start; } #practice .enterprise ul li { width: 31%; max-width: 328px; margin-bottom: 10px; } #practice .enterprise ul li:nth-child(3n+2) { margin-left: 3.5%; margin-right: 3.5%;} #practice #personal ul li { width: calc(99.9% / 3); max-width: 328px; margin-bottom: 10px; } #practice #personal ul li a { padding-top: 18px; padding-bottom: 18px;} } @media (max-width: 767px) { #practice { margin-bottom: 45px;} #practice .body { padding: 10px 0;} #practice .body ul li { width: 100%; margin-bottom: 5px; font-size: 1.5rem;} #practice .enterprise { margin-bottom: 50px; } #practice .btnWrap .effect { display: block; font-size: 1.5rem;} } /*------------------------------------------------------ information ------------------------------------------------------*/ #information {} #information .topTitle {} #information .bg { background: url("../images/bg_dot.png") repeat left top;} #information .bnr {} #information .bnr li { max-width: 516px; } #information .bnr li a {} #information .bnr li img {} #news {} #news .left {} #news .right {} #news h3 { color: #133d6b; } /*ここから採用情報*/ #information .recruit { position: relative; white-space: nowrap; margin-bottom: 50px; } #information .recruit { border: 1px solid #133d6b; } #information .recruit a { display: block; height: 100%; color: #133d6b; text-decoration: none; line-height: 1.2; padding: 10px 10px; text-align: left; overflow: hidden; position: relative; font-weight: bold; background-color: #fff; } #information .recruit span { display: block; background: none;} #information .recruit a * { position: relative; display: inline-block;} #information .recruit a::before { content: ""; z-index: 0; position: absolute; width: 100%; height: 100%; top: 0; left: -100%; background-color: #133d6b;} #information .recruit::after { content: ''; width: 10px; height: 10px; position: absolute; top: -webkit-calc(50% - 5px); top: calc(50% - 5px); right: 10px; border-top: 2px solid #fff; border-right: 2px solid #fff; -webkit-transform: rotate(45deg); transform: rotate(45deg); z-index: 1; } #information .recruit:hover::after { border-color: #fff;} #information .recruit::after { transition: all .15s ease; border-color: #133d6b; } @media (min-width: 768px) { #information .recruit a { -webkit-transition: all .15s ease-in-out; -o-transition: all .15s ease-in-out; transition: all .15s ease-in-out; text-align: center; } #information .recruit span { font-size: 5.2rem;} #information .recruit .text { font-size: 2.2rem;} #information .recruit .subTitle { font-size: 1.8rem; } #information .recruit a * { -webkit-transition: all .15s ease-in-out; -o-transition: all .15s ease-in-out; transition: all .15s ease-in-out; } #information .recruit a::before { -webkit-transition: all .15s ease-in-out; -o-transition: all .15s ease-in-out; transition: all .15s ease-in-out; } #information .recruit a:hover { color: #fff; } #information .recruit a:hover * { color: #fff; z-index: 1; } #information .recruit a:hover::before { left: 0; } #information .recruit span { margin-bottom: 20px;} #information .recruit a { padding: 20px 33px 0;} #information .recruit span { font-size: 3.6rem; vertical-align: -8px; padding-right: 10px; } } @media (max-width: 767px) { #information .recruit a { padding: 15px 10px; text-align: center; } #information .recruit .text { font-size: 1.6rem;} #information .recruit span { font-size: 2.4rem; vertical-align: -4px; padding-right: 5px; } } /*ここまで*/ @media (min-width: 768px) { #information .topTitle { margin-bottom: 40px;} #information .bg { padding: 40px 0; margin-bottom: 45px;} #information .bnr li { width: 50%; } #news > section { width: -webkit-calc(50% - 15px); width: calc(50% - 15px);} } @media (max-width: 767px) { #information .topTitle { margin-bottom: 20px;} #information .bg { padding: 30px 0; margin-bottom: 30px;} #information .bnr li { width: 100%; margin-left: auto; margin-right: auto;} #information .bnr li:first-child { margin-bottom: 15px;} #news .left { margin-bottom: 70px;} } /*------------------------------------------------------ ------------------------------------------------------*/ @media (min-width: 768px) { } @media (max-width: 767px) { }