@charset "utf-8";

@import url('https://fonts.googleapis.com/css?family=Work+Sans:400&display=swap');

html {
font-size: 75%;/*14px*/
line-height: 2;/*32px*/
-webkit-text-size-adjust: 100%;
background-color:white;
font-family: Work Sans,Helvetica,Arial,"ヒラギノ角ゴシック",YuGothic,Yu Gothic,"メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic";
letter-spacing:.125em;
animation: fadeIn 2s ease 0s 1 normal;
-webkit-animation: fadeIn 2s ease 0s 1 normal;
}

body, ul, ol, dl, dd,tr,th,td,footer{
margin: 0;
padding: 0;
}

li{
list-style-position:inside;
}

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

img,iframe,video {
vertical-align: bottom;
}

/* -- contents -- */

.contents{
width: 91.6666%;
margin: 0 auto;
padding: .75em 0;
}

.contents>h1,.contents>h2,.contents>h3{
margin-top:0;
}

.contents section {
margin: .75em 0;
}

/* -- font -- */

html,h1,h2,h3{
font-weight:500;
}

html,a{
color: black;
}

h1 {
font-size: 250%;/*40px*/
line-height: 1.2;/*48px*/
}
h2 {
font-size: 200%;/*32px*/
line-height: 1.5;/*48px*/
}
h3 {
font-size: 150%;/*24px*/
line-height: 1.3333;
}

a {
text-decoration: none;
background: transparent;
}

.ssmall {
font-size: .5em;
}
.small {
font-size: .75em;
}

.big {
font-size: 1.5em;
}

.text_r{
text-align: right;
}

.title{
text-align: center;
}

/* -- color bg -- */

.usgray{
color: #606060;
}
.gray{
color: gray;
}

.b_black,.b_black a{
color: white;
}

.b_black,.b_black a{
background-color: black;
}
.b_usgray,.b_usgray a{
background-color: #ebeaea;
}

.bg_inspe,.bg_clt,.bg_house,.bg_psv,.bg_docter,.bg_hagino{
background-repeat:no-repeat;
background-size: cover;
}

.bg_inspe,.bg_clt,.bg_house,.bg_psv,.bg_docter{
background-position:center right;
}
.bg_inspe{
background-image: url(../images/slide/bg_inspe.jpg);
}
.bg_clt{
background-image:url(../images/slide/bg_clt.jpg);
}
.bg_house{
background-image:url(../images/slide/bg_house.jpg);
}

.bg_psv{
background-image:url(../images/slide/bg_psv.jpg);
}
.bg_docter{
background-image:url(../images/slide/bg_docter.jpg);
}

.bg_hagino{
background-image:url(../images/slide/bg_hagino.jpg);
background-position:center center;
}

.bg_second{
	width:100%;
	height:50vh;
}

/* -- img -- */

.pc {
display:none;
}

.sp {
display:block;
}

/* -- movie -- */

.video{
position: relative;
width: 100%;
padding-top: 56.25%;
}

.video video{
position: absolute;
top: 0;
right: 0;
width: 100% !important;
height: 100% !important;
}

/* -- ico -- */

.i_arrow,.i_insta,.i_insta_w,
.i_mail,.i_mail_w{
position: relative;
display: inline-block;
}

.i_arrow:before,
.i_arrow:after{
position: absolute;
top: 0;
bottom: 0;
content: "";
}

.i_arrow:before{
top: 1em;
right: -1.125em;
width: .75em;
height: .125em;
background-color: black;
}

.i_arrow:after{
top: 37.5%;
left: .5em;
width: .5em;
height: .5em;
border-top: .125em solid black;
border-right: .125em solid black;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}

.i_insta,.i_insta_w,.i_mail,.i_mail_w,.i_kenkyu,.i_saps,.i_ws{
height:1em;
left: 0;
display:inline-block;
background-size:contain;
background-position:center center;
background-repeat:no-repeat;
}

.i_insta,.i_insta_w,.i_mail,.i_mail_w{
width:1em;
}

.i_insta{
background-image:url(../images/ico/i_insta.svg);
}

.i_insta_w{
background-image:url(../images/ico/i_insta_w.svg);
}

.i_mail{
background-image:url(../images/ico/i_mail.svg);
}

.i_mail_w{
background-image:url(../images/ico/i_mail_w.svg);
}

.i_kenkyu,.i_saps,.i_ws{
width:1.25em;
}

.i_kenkyu{
background-image:url(../images/ico/i_kenkyu.png);
}

.i_saps{
background-image:url(../images/ico/i_saps.png);
}

.i_ws{
background-image:url(../images/ico/i_ws.png);
}


/* ----- cta ----- */

a.cta{
text-align:center;
padding:.75em 1em;
display:block;
-webkit-transition: color .3s, background-color .3s, box-shadow .3s, -webkit-transform .3s;
transition: color .3s, background-color .3s, box-shadow .3s, transform .3s;
border-radius:1.5em;
}

a.cta:hover {
background-color:black;
box-shadow:none;
-webkit-transform: translateY(.125em);
transform: translateY(.125em);
}

.cta:active {
transition-duration: .1s;
}

/* ----- waku ----- */

.waku{
box-sizing: border-box;
padding: 1.5em 4.1666%;
background-color:white;
}
.l_gray{
border-bottom:.0125em solid gray;
}

.waku_gray{
border:.0125em solid gray;
}

/*--col--*/

.col_koshi>li,
.col2>li,.col3>li,.gallery>li{
list-style: none;
box-sizing: border-box;
position:relative;
}

.col_koshi>li img,
.col2>li img,
.col3>li img,.gallery>li{
width: 100%;
}

.col2>li,.col3>li{
margin: 1.5em 2.5%;
float: left;
}

.col2,.col3{
margin:0 -2.5%;
}

.col2>li{
width: 45%;
}

.col3>li{
width: 28.3333%;
}

.col_koshi>li{
background-color: #ebeaea;
}

.col_koshi>li:nth-child(odd) {
background-color: white;
color: black;
}

.col_koshi>li p {
font-size:112.5%;/*18px*/
}

.col_koshi>li section{
padding:1.5em 8.3333%;
}

.col_koshi>li a:first-child{
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index:1000;
}

/*--map--*/

#map{
width:100%;
height:50vh;
}

/*--gallery pager--*/

.pager a,
.pager a.current{
border-radius: .125em;
margin:0 .25em;
padding: .25em .5em;
border: 1px solid black;
}

.pager a.current,
.pager a:hover{
background-color:black;
color: white;
}

/*--chu-syaku--*/

.iist_kome{
list-style:none;
}

.iist_kome li{
padding-right:.5em;
}

.iist_kome li:before{
content: '※';
padding-right:.25em;
}

/* ----- anime ----- */

.anime_line_right,
.anime_line_left{
position: relative;
}

.anime_line_right:after,
.anime_line_left:after {
display: inline;
content: '';
position: absolute;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
-webkit-transform: scaleX(0);
transform: scaleX(0);
background-color: #eee;
background-color: rgba(204,204,204,.5);
}

.anime_line_right .hide,
.anime_line_left .hide {
-webkit-transition: all 0s 1.75s ease;
-moz-transition: all 0s 1.75s ease;
transition: all 0s 1.75s ease;
opacity: .75;
}
.anime_line_right.on .hide,
.anime_line_left.on .hide{
opacity: 1;
}

.anime_line_right.on:after{
-webkit-animation: anime_line_right 1.75s ease .875s 1 normal both running;
animation: anime_line_right 1.75s ease .875s 1 normal both running;
}

@-webkit-keyframes anime_line_right {
0% {
-webkit-transform-origin:left center;
-webkit-transform:scaleX(0);
}
50% {
-webkit-transform-origin:left center;
-webkit-transform:scaleX(1);
}
50.001% {
-webkit-transform-origin:right center;
-webkit-transform:scaleX(1);
}
100% {
-webkit-transform-origin:right center;
-webkit-transform:scaleX(0);
}
}

@keyframes anime_line_right {
0% {
transform-origin:left center;
transform:scaleX(0)
}
50% {
transform-origin:left center;
transform:scaleX(1)
}
50.001% {
transform-origin:right center;
transform:scaleX(1)
}
100% {
transform-origin:right center;
transform:scaleX(0)
}
}

.anime_line_left.on:after {
-webkit-animation: anime_line_left 1.75s ease .875s 1 normal both running;
animation: anime_line_left 1.75s ease .875s 1 normal both running;
}

@-webkit-keyframes anime_line_left {
0% {
-webkit-transform-origin:right center;
-webkit-transform:scaleX(0);
}
50% {
-webkit-transform-origin:right center;
-webkit-transform:scaleX(1);
}
50.001% {
-webkit-transform-origin:left center;
-webkit-transform:scaleX(1);
}
100% {
-webkit-transform-origin:left center;
-webkit-transform:scaleX(0);
}
}

@keyframes anime_line_left {
0% {
transform-origin:right center;
transform:scaleX(0)
}
50% {
transform-origin:right center;
transform:scaleX(1)
}
50.001% {
transform-origin:left center;
transform:scaleX(1)
}
100% {
transform-origin:left center;
transform:scaleX(0)
}
}

.anime_fadein{
transform:translatey(3em);
opacity:.75;
transition:opacity 2s,transform 1.25s;
}

.anime_fadein.on{
opacity:1;
transform:translateX(0);
}

.anime_fadeindown,.fixed{
-webkit-animation-name: fadeindown;
animation-name: fadeindown;
}

.anime_fadeindown{
-webkit-animation-duration:2s;
animation-duration:2s;
}

/*---speed---*/

.slow01 {
transition-delay:200ms !important;
-webkit-transition-delay:200ms !important;
}
.slow02 {
transition-delay:400ms !important;
-webkit-transition-delay:400ms !important;
}

/* --selection---*/

::selection {
background: #ebeaea;
}
::-moz-selection {
background: #ebeaea;
}

/*---header_index---*/

#header,
#index li,
#drawer_menu li{
width:100%;
}

#header {
z-index: 9998;
position: fixed;
box-sizing: border-box;
background-color: white;
top: 0;
}

/*#header.fixed {
animation-name: fadein;
animation-duration: 1.5s;
}

@keyframes fadein {
from {opacity: 0;}
to {opacity: 1;}
}
*/

#header_pc{
position: relative;
}

#drawer_menu,
#header_pc{
margin:0 auto;
}

#logo{
margin:0;
padding: .25em 0 .25em 1em;
border-bottom: .0125em solid gray;
}

#logo span{
padding-left:.25em;
}

#drawer_menu {
display: none;
width:83.3333%;
}

#index {
width:83.3333%;
margin:4.5em auto 1.5em auto;
}

#index li,
#drawer_menu li {
list-style: none;
}

#index li a,
#drawer_menu li a{
display: block;
padding:.75em;
box-sizing:border-box;
border-bottom: 1px solid #ebeaea;
color:black;
}

#drawer_menu.block{
display: block;
}

#index li a:hover,
#drawer_menu li a:hover{
color: white;
background-color: gray;
}

#index li:last-child a,
#drawer_menu li:last-child a{
border-bottom:none;
}

#index .sp,
#drawer_menu .sp {
display:inline-block;
margin-left:.5em;
}

#top_main h1{
margin:0;
padding:50vh 0;
text-align:center;
color:white;
}

/**menu_btn**/

#menu_btn {
position: absolute;
padding: 2em;
top:0;
right:0;
z-index: 9990;
background-color: gray;
}

#menu_btn span{
top: 1.75em;
left: .75em;
}

#menu_btn span,
#menu_btn span:before,
#menu_btn span:after {
cursor: pointer;
border-radius: .5em;
width: 2.5em;
height: .25em;
background-color: white;
position: absolute;
display: block;
content: "";
transition: all 300ms ease-in-out;
}

#menu_btn span:before {
top: -.75em;
}
#menu_btn span:after {
bottom: -.75em;
}

#menu_btn.active span {
background-color: transparent;
}
#menu_btn.active span:before, #menu_btn.active span:after {
top: 0;
}
#menu_btn.active span:before {
transform: rotate(45deg);
}
#menu_btn.active span:after {
transform: rotate(-45deg);
}

/*--index_menu--*/

#index{
position:relative;
}

#index #header.fixed #drawer_menu{
display: none;
}

#index #drawer_menu,
#index #header.fixed #menu_btn{
display: block;
}

#index #header.fixed{
position:fixed;
}

#index #header.fixed #drawer_menu.block{
display: block !important;
}

/*--more--*/

.more {
position: relative;
display: flex;
justify-content: flex-end;
padding-right: 1.5em;
}

.more:after {
position: absolute;
bottom: -.125em;
right: 0;
content: '';
width: 9em;
height: .125em;
background-color:gray;
transform: scale(0, 1);
transform-origin: right top;
transition: transform .3s;
}

.more:hover:after {
transform: scale(1, 1);
}

/* --recruit---*/

#mail table{
width: 100%;
border-collapse: collapse;
word-break: break-all;
box-sizing:border-box;
background-color:white;
}

#mail table,#mail th,#mail td{
border: 1px gray solid;
}

#mail th,#mail td {
display: block;
}

#mail th{
background-color:#333;
padding: 1em 4.1666%;
text-align: center;
color:white;
}

#mail td{
padding: 1.5em 4.1666%;
}

#mail table strong{
margin-left:.5em;
padding:.25em 1em;
background-color:gray;
}

#mail table br{
display:inline-block !important;
}

input[type=date], option, 
input[type=text], input[type=email], input[type=tel],input[type=name],textarea,select,
input[type="button"], input[type="reset"], input[type="submit"] {
font-size: 1.5em;
}

input[type=date], option, 
input[type=text], input[type=email], input[type=tel],input[type=name],textarea,select {
font-size: 1.5em;
padding:.75em 2.0833%;
box-sizing: border-box;
}
input[type=date], input[type=text], option, 
input[type=email], input[type=name], input[type=tel],textarea,select {
display: inline-block;
width: 100%;
}

input:focus::-webkit-input-placeholder,
textarea:focus::-webkit-input-placeholder {
color: transparent;
}

input:focus::-moz-placeholder,
textarea:focus::-moz-placeholder {
color: transparent;
}

input[type="button"], input[type="reset"], input[type="submit"] {
-webkit-appearance: button;
cursor: pointer;
border: 0;
color:white;
padding:.75em 8.3333%;
background-color:gray;
border-radius: 1em;
}

input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover {
background-color:black;
}

::-webkit-input-placeholder { /*chorome*/
color: #ccc;
font-style: italic;
}
::-moz-placeholder { /*Firefox*/
color: #ccc;
font-style: italic;
}
::-ms-input-placeholder { /*IE10+*/
color: #ccc !important;
font-style: italic;
}


/*---footer---*/

#footer{
position:relative;
}

#footer_r{
position: absolute;
font-size: 1.5em;
top: 25%;
right: 0;
}

#footer_r li{
list-style:none;
float:left;
margin:0 .25em;
}


#footer_l{
font-size:.75em;
}

#footer_l br{
display:inline-block;
content:none;
}

#copy{
font-size:.5em;
padding:1.5em 0;
text-align:center;
}

/*--clear--*/

#main:after, #index:after,.col_koshi:after, 
.col2:after,.col2_half:after,.col3:after,.gallery:after,
.float_r:after,.float_r_image:after,
.float_l:after,.float_l_image:after{
display: block;
clear: both;
content: '';
}

@media screen and (min-width:375px) {
html {
font-size: 87.5%;
}
}

@media screen and (min-width:480px) {
.contents {
width: 83.3333%;
}

#mail th,#mail td{
display:table-cell;
}

#mail table th{
width: 30%;
color: white;
}

#mail table br{
display:inline-block;
}

#mail table strong{
margin-left:0;
}
}

@media screen and (min-width:640px) {
#index li{
width:50%;
float:left;
}

#index li{
width:50%;
float:left;
}

#index li:nth-last-child(2) a{
border-bottom:none;
}
}

@media screen and (min-width:960px) {
html{
font-size:100%;
}

.contents {
padding: 1.5em 0;
}
.contents section {
margin: 3em 0;
}

#header{
width:45%;
overflow: auto;
height: 100vh;
}

#main{
width:55%;
float:right;
box-sizing:border-box;
overflow:hidden;
}

/**header anime stop*/
@keyframes fadein {
from {opacity: 1;}
}

#header_pc {
width: 83.3333%;
padding: 3em 0;
}

#logo{
padding-left:.25em;
}

#drawer_menu{
margin-top:1.5em;
width:100%;
}

#drawer_menu li{
position: static;
width:auto;
}

#drawer_menu li a{
border-bottom:none;
background-color:transparent !important;
}

#drawer_menu li a:hover{
color: gray;
}

#drawer_menu,.pc {
display:block;
}

#menu_btn,#index {
display:none;
}

#map{
height:100vh;
}

#footer_l{
font-size: 1em;
}

#footer_r{
font-size: 3em;
}

.anime_line_right .hide,
.anime_line_left .hide {
-webkit-transition: all 0s 1.5s ease;
-moz-transition: all 0s 1.5s ease;
transition: all 0s 1.5s ease;
}

.anime_line_right.on:after{
-webkit-animation: anime_line_right 1s ease 2s 1 normal both running;
animation: anime_line_right 1s ease 1s 1 normal both running;
}
.anime_line_left.on:after {
-webkit-animation: anime_line_left 1s ease 2s 1 normal both running;
animation: anime_line_left 1s ease 1s 1 normal both running
}

.anime_fadein{
transition:opacity 1s,transform .75s;
}
.anime_fadeindown{
-webkit-animation-duration:1s;
animation-duration:1s;
}
}

@media screen and (min-width:1280px) {
br {
display:none;
}
#header{
width:33.3333%;
}

#main{
width:66.6666%;
}

.col_koshi>li{
width:50%;
float: left;
padding:3em 4.1666%;
}

.col_koshi>li:nth-child(1n) {
background-color: #ebeaea;
color: #111;
}

.col_koshi>li:nth-child(4n+1),
.col_koshi>li:nth-child(4n+4) {
background-color: white;
color: black;
}
}

@media screen and (min-width:1600px) {
#header_pc,
.contents{
width: 75%;
}

.contents {
padding: 3em 0;
}
.contents section {
margin: 6em 0;
}
}

@media screen and (min-width:1900px) {
#header_pc {
width: 66.6666%;
}
}

/*IE*/
@media all and (-ms-high-contrast: none) {
body {
font-family: Meiryo, sans-serif;
}
}