@charset "utf-8";

/* ==================================================
Common CSS
================================================== */

@media(max-width:959px){

/*STYLE*/
.pc {
display:none;
}

p {
font-size:4vw;
line-height:150%;
letter-spacing:0.2vw;
}

img {
width:100%;
height:auto;
}

.topline {
width:100%;
height:1vw;
background:#0087b4;
}

.bottomline {
width:100%;
height:1vw;
background:#0087b4;
}

h1 {
width:60vw;
position:relative;
z-index:999 !important;
}

.fon {
font-family: 'Oswald', sans-serif;
}

.container {
width:90%;
margin:0 auto 100px;
}

.wrap {
overflow-x:hidden;
-webkit-overflow-scrolling:touch;
padding-top:14vw;
}



/*HEADER*/
header {
width:100%;
height:15vw;
background:rgba(255,255,255,0.9);
position:fixed;
top:0;
z-index:98;
}

header .header_area {
width:100%;
height:15vw;
margin:auto;
display:flex;
align-items:center;
padding:0 0 2vw 3vw;
}


/*GROBAL*/
.fixed {
position:fixed;
width:100%;
height:100%;
}

#grobal {
position:fixed;
top:1.5vw;
left:0;
z-index:99;
}

#grobal .nav_btn {
position:relative;
width:15vw;
height:15vw;
overflow:hidden;
top:0;
margin-left:85vw;
background:#transparent;
cursor:pointer;
}

#grobal .nav_btn span {
width:60%;
height:0.8vw;
background:#0087b4;
position:absolute;
left:0;
right:0;
margin:auto;
}

#grobal .nav_btn span:nth-child(1) { top:3vw; }
#grobal .nav_btn span:nth-child(2) { top:6vw; }
#grobal .nav_btn span:nth-child(3) { top:9vw; }

#grobal .nav_close {
display:none;
position:fixed;
width:100%;
height:100%;
top:0;
left:0;
background:#000;
opacity:0;
z-index:98;
cursor:pointer;
}

#grobal .grobal_nav {
position:fixed;
top:18vw;
left:100%;
width:50vw;
z-index:999;
overflow-y:scroll;
transition:0.4s;
cursor:pointer;
}

#grobal .grobal_nav.active {
left:50vw;
transition:0.4s;
}

#grobal .grobal_nav nav {
background:rgba(255,255,255,0.95);
margin-bottom:2vw;
border:#0087b4 1px solid;
border-right:none;
}

#grobal .grobal_nav nav:first-child {
}

#grobal .grobal_nav nav a {
text-decoration:none;
font-weight:normal;
color:#0087b4;
display:block;
padding:3.5vw 4vw;
font-size:4.5vw;
text-align:center;
}


/*MV*/
.mv {
width:100%;
height:90vh;
background:url(../img/mv_bg_sp.jpg) no-repeat center;
background-size:cover;
margin-bottom:7vw;
position:relative;
}

.mv .mv_cts_area {
text-align:center;
position:absolute;
top:8vw;
left:0;
right:0;
margin:auto;
}

.mv .mv_cts_area .mv_cts {

}

.mv .mv_cts_area .mv_cts .topdiamond {
width:4vw;
margin:0 auto 1vw;
}

.mv .mv_cts_area .mv_cts .subcopy {
font-size:4vw;
}

.mv .mv_cts_area .mv_cts .maincopy {
font-size:12vw;
padding-bottom:3vw;
line-height:100%;
}

.mv .mv_cts_area .mv_cts .ex {
font-size:4.5vw;
line-height:150%;
}


/*TOP_INTRO*/
#top_intro {
width:90%;
margin:0 auto 10vw;
}

#top_intro h2 {
font-size:5vw;
font-weight:bold;
color:#0087b4;
text-align:center;
padding-bottom:1vw;
}

#top_intro .subcopy {
padding-bottom:5vw;
}

#top_intro .services {
display:flex;
justify-content:space-between;
flex-wrap:wrap;
}

#top_intro .services .service {
width:48.5%;
background:#fff;
box-shadow:0 0 10px #e1e1e1;
padding:0 0 4vw;
margin-bottom:3vw;
}

#top_intro .services .service .icon {
margin:0 auto 10px;
}

#top_intro .services .service .item_en {
font-size:5.5vw;
text-align:center;
}

#top_intro .services .service .item_jp {
font-size:3vw;
text-align:center;
padding-bottom:5px;
}

#top_intro .services .service .diamond {
width:15px;
margin:0 auto 2vw;
}

#top_intro .services .service .ex {
font-size:3.5vw;
padding:0 4vw;
}


/*INFORMATION*/
#top_info {
width:100%;
padding-bottom:10vw;
}

#top_info .item {
display:flex;
align-items:center;
margin-bottom:2vw;
}

#top_info .item h3 {
border-left:#0087b4 5px solid;
padding:1vw 0 1vw 2.5vw;
font-weight:normal;
font-size:6vw;
line-height:100%;
}

#top_info .item .kana {
font-size:3vw;
border-left:#c8c8c8 1px solid;
margin-left:3vw;
padding:1vw 0 1vw 3vw;
}

#top_info .informations {
}

#top_info .informations .info {
background:#fff;
box-shadow:0 0 10px #e1e1e1;
margin-bottom:3vw;
padding:3vw 4vw;
}

#top_info .informations .info:last-child {
margin-bottom:0;
}

#top_info .informations .info p {
font-size:4vw;
}

#top_info .informations .info .date {
font-weight:bold;
padding-right:15px;
}

#top_info .informations .info .date:before {
content:"◆";
color:#00aadc;
padding-right:1vw;
}


/*BANNER*/
#top_links {
width:100%;
}

#top_links .item {
font-size:4vw;
background:#0087b4;
padding:2vw 3vw;
color:#fff;
margin-bottom:3vw;
}

#top_links .banner {
width:80%;
margin:0 auto 3vw;
box-shadow:0 0 10px #e1e1e1;
}

#top_links .banner:last-child {
margin-bottom:0;
}


/*PAGES*/
.cts {
width:90%;
margin:0 auto 5vw;
}

.titles {
text-align:center;
padding:10vw 0 5vw;
}

.titles .diamond {
width:4vw;
margin:auto;
}

.titles h2 {
font-size:6vw;
padding-bottom:2.5vw;
}

.titles h2 span {
border-bottom:#c8c8c8 1px solid;
padding:0 1vw;
padding-bottom:1.5vw;
}

.titles .kana {
font-size:3vw;
}

.pages_links {
text-align:center;
padding-bottom:7vw;
}

.pages_links a {
font-size:3.5vw;
}

h3 {
border-left:#0087b4 5px solid;
padding:1vw 0 1vw 2.5vw;
margin-bottom:1.5vw;
}

section {
background:#fff;
box-shadow:0 0 10px #e8e8e8;
}


/*PHILOSOPHY*/
#philosophy #greeting {
margin-bottom:10vw;
}

#philosophy #greeting section {
padding:5vw 5vw 7vw;
}

#philosophy #greeting .photo {
width:50%;
margin:auto;
padding-bottom:4vw;
}

#philosophy #greeting .detail {
width:100%;
}

#philosophy #greeting .detail h4 {
font-size:5vw;
color:#0087b4;
padding-bottom:3vw;
}

#philosophy #greeting .detail {

}

#philosophy #greeting .detail .ex {
padding-bottom:5vw;
}

#philosophy #greeting .detail .signs {
display:flex;
justify-content:flex-end;
align-items:center;
padding-top:15vw;
}

#philosophy #greeting .detail .signs .item {
padding-right:3vw;
padding-bottom:0;
font-size:3.5vw;
}

#philosophy #greeting .detail .signs .sign {
width:30vw;
}

#philosophy #concept {
margin-bottom:10vw;
}

#philosophy #concept .detail {
padding:6vw 5vw 4vw;
text-align:center;
}

#philosophy #concept .detail .diamond {
width:4vw;
margin:auto;
}

#philosophy #concept .detail .title {
font-size:8vw;
line-height:135%;
color:#0087b4;
padding-bottom:2vw;
}

#philosophy #concept .detail h4 {
font-size:5vw;
padding-bottom:10px;
}

#philosophy #concept .photos {
display:flex;
}

#philosophy #concept .photos .photo {
width:25%;
}

#philosophy #management section {
padding:5vw 5vw;
}

#philosophy #management h4 {
font-size:5vw;
color:#0087b4;
padding-bottom:10vw;
}

#philosophy #management .managements {
margin-bottom:
}

#philosophy #management .managements .management {
position:relative;
padding:7vw 5vw 4vw;
border:#0087b4 1px solid;
background:url(../philosophy/img/management_bg.png);
margin-bottom:8.5vw;
}

#philosophy #management .managements .management:last-child {
margin-bottom:0;
}

#philosophy #management .managements .management .number {
width:10vw;
position:absolute;
top:-5vw;
left:0;
right:0;
margin:auto;
}

#philosophy #management .managements .management .detail {
}


/*COMPANY*/
#company {
}

#company #profile {
margin-bottom:10vw;
}

#company #profile section {
padding:5vw;
}

#company #profile .profiles {
width:100%;
margin:auto;
}

#company #profile .profiles .profile {
margin-bottom:4vw;
}

#company #profile .profiles .profile:last-child {
margin-bottom:0;
}

#company #profile .profiles .profile .item {
width:100%;
background:#0087b4;
color:#fff;
padding:1.5vw 3vw;
display:flex;
align-items:center;
justify-content:center;
font-size:4vw;
}

#company #profile .profiles .profile .detail {
width:100%;
background:#e5f3f7;
padding:3vw 4vw;
}

#company #profile .profiles .profile .detail p {
display:flex;
}

#company #access {
}

#company #access .map {
width:100%;
height:100vw;
}

#company #access .data {
padding:5vw 5vw;
}

#company #access .data .name {
font-weight:bold;
}

#company #access .data .address {
}

#company #access .data .access {
}

#company #access .data .access span {
color:#ccc;
}



/*BUSINESS*/
#business {
}

#business #environment {
margin-bottom:10vw;
}

#business #environment .environments {
padding:5vw 5vw;
}

#business #environment .environments .set {
padding-bottom:7vw;
}

#business #environment .environments .set .environment {
width:100%;
}

#business #environment .environments .set .environment:first-child {
margin-bottom:7vw;
}

#business #environment .environments .environment h4 {
border-left:#0087b4 5px solid;
padding:1vw 0 1vw 2vw;
margin-bottom:1.5vw;
}

#business #environment .environments .environment .line {
width:100%;
height:5px;
background:url(../business/img/line_bg.png);
margin-bottom:2vw;
}

#business #environment .environments .environment .detail {
}

#business #configuration {
margin-bottom:10vw;
}

#business #configuration .configuration {
padding:5vw 5vw;
}

#business #configuration .configuration p {
display:flex;
padding-bottom:5vw;
}

#business #configuration .configuration p:last-child {
padding-bottom:0;
}

#business #results {
}

#business #results section {
padding:5vw;
}

#business #results .results {
}

#business #results .results .result {
border-bottom:#e8e8e8 1px solid;
padding-bottom:5vw;
margin-bottom:5vw;
}

#business #results .results .result:last-child {
border-bottom:none;
padding-bottom:0;
margin-bottom:0;
}

#business #results .results .result .photo {
width:100%;
padding-bottom:4vw;
}

#business #results .results .result .details {
width:100%;
}

#business #results .results .result .details .copy {
font-size:5vw;
font-weight:bold;
color:#0087b4;
padding-bottom:2vw;
}

#business #results .results .result .details .detail {
padding-bottom:3vw;
}

#business #results .results .result .details .cases {
}

#business #results .results .result .details .case {
background:#d9edf4;
padding:2.5vw 4vw;
margin-bottom:3vw;
}

#business #results .results .result .details .case:last-child {
margin-bottom:0;
}


/*RECRUIT*/
#recruit {
}

#recruit section {
padding:5vw;
}

#recruit .intro {
padding-bottom:5vw;
}

#recruit .intro .photo {
width:100%;
padding-bottom:4vw;
}

#recruit .intro .details {
width:100%;
}

#recruit .intro .details .copy {
font-size:5vw;
font-weight:bold;
color:#0087b4;
padding-bottom:2vw;
}

#recruit .intro .details .detail {
}

#recruit .recruits {
}

#recruit .recruits .recruit {
margin-bottom:3vw;
}

#recruit .recruits .recruit:last-child {
margin-bottom:0;
}

#recruit .recruits .recruit .item {
width:100%;
background:#0087b4;
color:#fff;
padding:2vw 5vw;
display:flex;
align-items:center;
justify-content:center;
}

#recruit .recruits .recruit .detail {
width:100%;
background:#e5f3f7;
padding:3vw 4vw;
}

#recruit .recruits .recruit .detail p {
display:flex;
}

#recruit .entry_btn {
display:flex;
justify-content:center;
margin:5vw 0 7vw;
}

#recruit .entry_btn a {
background:#e61e1e;
color:#fff;
display:block;
padding:4vw 7vw;
border-radius:30vw;
font-size:4.5vw;
font-weight:bold;
}

#recruit .entry_btn i {
padding-right:2vw;
font-size:5vw;
}


/*PRIVACY POLICY*/
#policy {
}

#policy section {
padding:5vw;
}

#policy .policies {
}

#policy .policies .policy {
border-bottom:#c8c8c8 1px dotted;
margin-bottom:3vw;
padding-bottom:3vw;
}

#policy .policies .policy:last-child {
border-bottom:none;
margin-bottom:0;
padding-bottom:0;
}

#policy .policies .policy .item {
font-weight:bold;
padding-bottom:1vw;
}

#policy .policies .policy .detail {
}

#policy .policies .policy p {
display:flex;
}


/*ENTRY*/
#entry {
}

#entry section {
padding:5vw;
}

#entry .copy {
}

#entry .attention {
font-size:3vw;
color:#e61e1e;
padding-bottom:3vw;
}

#entry .entries {
}

#entry .entries .entry {
margin-bottom:3vw;
}

#entry .entries .entry:last-child {
margin-bottom:0;
}

#entry .entries .entry .item {
width:100%;
background:#0087b4;
color:#fff;
padding:2vw 3vw;
display:flex;
align-items:center;
justify-content:center;
}

#entry .entries .entry .detail {
width:100%;
background:#e5f3f7;
padding:3vw 4vw;
}

#entry .entries .entry .detail.flex {
display:flex;
align-items:center;
justify-content:space-between;
}

#entry .entries .entry .detail.flex p {
padding-bottom:0;
}

#entry .entries .entry .detail.flex p:first-child {
margin-right:3vw;
}

#entry .entries .entry .detail.flex label {
width:48.5%;
margin-bottom:0;
}

#entry .entries .entry .detail p {
display:flex;
align-items:center;
padding-bottom:2vw;
}

#entry .entries .entry .detail p:last-child {
padding-bottom:0;
}

#entry .name_style {
width:100%;
}

#entry #seinen1 {
width:20vw;
margin-right:1vw;
background:#fff;
}

#entry #seinen2 , #entry #seinen3 {
width:12vw;
margin:0 1vw;
background:#fff;
}

#entry .post_style {
width:40vw;
margin-left:2vw;
}

#entry .address_style {
width:100%;
}

#entry .tel_style {
width:100%;
}

#entry .mail_style {
width:100%;
margin-bottom:2vw;
}

#entry .hour , #entry .minute {
width:13vw;
margin:0 2vw;
}

#entry .station_style {
width:100%;
}

#entry input[type="text"] ,
#entry input[type="tel"] ,
#entry input[type="email"] ,
#entry select {
padding:3vw 3vw;
font-size:100%;
}

#entry textarea {
width:100%;
height:50vw;
padding:3vw 3vw;
font-size:100%;
}

#entry .select_style {
font-size:4vw;
width:100%;
padding:2vw 3vw;
margin-bottom:2vw;
background:#fafafa url(../entry/img/form_arrow.png) no-repeat right;
background-size:2vw;
background-position:right 3vw top 4vw;
}

#entry .btns {
display:flex;
justify-content:center;
}

#entry .submit_btn {
text-align:center;
}

#entry .submit_btn button {
background:#e61e1e;
font-size:4.5vw;
padding:3vw 7vw;
border-radius:30vw;
color:#fff;
border:none;
}

#entry .back_btn button,
#entry .back_btn input {
background:#ccc;
font-size:4.5vw;
padding:3vw 7vw;
border-radius:30vw;
color:#fff;
border:none;
margin-right:3vw;
}

#entry .required {
font-size:3vw;
color:#fae600;
padding-left:1.5vw;
}

#entry .caption {
font-size:3vw;
}

#entry input[type="radio"] {
display:none;
}

#entry label {
width:100%;
cursor:pointer;
border-radius:30px;
border:#ccc 1px dotted;
background:#fff;
padding:2vw 5vw;
display:block;
text-align:center;
margin-bottom:2vw;
}

#entry label:last-child {
margin-bottom:0;
}

#entry .sex1 {
display:block;
float:left;
width:30vw;
}

#entry .radiobtn:checked + label {
background:#e61e1e;
color:#fff;
}

#entry .thanks {
text-align:center;
}

#entry .thanks .maincopy {
font-size:5.5vw;
font-weight:bold;
color:#e61e1e;
padding:10vw 0 5vw;
}

#entry .thanks .copy {
padding-bottom:30vw;
}

#entry .thanks .back_btn a {
width:60%;
margin:0 auto 5vw;
display:block;
font-size:4vw;
background:#ccc;
padding:3vw 5vw;
border-radius:30vw;
color:#fff;
}

#entry .thanks .back_btn i {
padding-right:10px;
}


/*WARNING*/
.warning_area {
border:#e61e1e 1px solid;
padding:3vw 4vw;
margin-bottom:4vw;
background:#fef4f4;
}

.warning_area .warning {
font-size:3vw;
color:#e61e1e;
}

.warning_area .warning i {
padding-right:0.5vw;
}



/*BACK TO TOP*/
.BackToTop {
position:fixed;
width:10vw;
height:10vw;
right:5vw;
bottom:5vw;
z-index:100;
display:none;
}



/*ANIMATION*/
.sns {
-webkit-animation:appears 1s ease;
animation:appears 1s ease;
}

@keyframes appears {
0%{transform:translateX(100%);}
100%{transform:translateX(0);}
}


/*INVIEW*/
.inviewTitleRoll {
opacity:0;
transform:translate(0,-50%) rotate(180deg);
transition:0.5s;
}

.TitleRoll {
opacity:1;
transform:translate(0, 0);
}

.inviewfadeInUp {
opacity:0;
transform:translate(0,10%);
transition:1s ease;
}

.fadeInUp {
opacity:1;
transform:translate(0, 0);
}


/*LINKS*/
#links {
width:100%;
margin:0 auto 5vw;
}

#links .navs {
display:flex;
justify-content:center;
flex-wrap:wrap;
}

#links .navs nav {
width:50%;
border-bottom:#ccc 1px dotted;
}

#links .navs nav:nth-child(even) {
border-left:#ccc 1px dotted;
}

#links .navs nav:nth-child(-n+2)  {
border-top:#ccc 1px dotted;
}


#links .navs nav a {
display:block;
text-decoration:none;
font-weight:normal;
color:#464646;
font-size:3.5vw;
text-align:center;
padding:3vw;
}



/*FOOTER*/
footer {
width:90%;
margin:0 auto 3vw;
}

footer .copyright {
font-size:3vw;
color:#969696;
}



}