@charset "UTF-8";

/* index ===================== */

.slick-slider {
opacity:0;}
.slick-initialized {
opacity:1 !important;}
.slick-dotted.slick-slider {
margin-bottom:0;}
.slider-index {
width:100%;
margin:0 auto;}
.slider-index .slick-slide {
width:100%;
height:420px;
background:url("../../images/index0001_02.jpg") left bottom / cover;}
.slider-index .slick-slide:nth-child(2) {
background:url("../../images/index0001_02.jpg") left bottom / cover;}

.index00 {
position:relative;}
.index00 .ttl {
position:absolute;
width:98%;
max-width:700px;
top:45%;
left:50%;
transform:translate(-50%,-50%);}
.index00 .kanban {
position:absolute;
width:21%;
max-width:280px;
bottom:-16%;
right:3%;}

@media only screen and (max-width:1023px) {

.index00 .kanban {
display:none;}

}

@media only screen and (max-width:480px) {

.slider-index .slick-slide {
height:380px;}

}

.index01 {
background:#fff;}
.index01 .logo {
transform:translate(0,-65px);
background:url("../../images/index0100.png") no-repeat center bottom / cover;}
.index01 .logo img {
max-width:85%;}

.index02 {
position:relative;
z-index:2;}
.index02::before , .index02::after {
content:"";
position:absolute;
z-index:-1;
width:100%;
height:100%;
left:0;
top:0;
background:url("../../images/bg03.png") repeat left center / 3px;}
.index02::after {
z-index:-2;
background:url("../../images/bg02.jpg") repeat left top / cover;}
.index02 .img {
position:absolute;
width:38.5%;
right:-1.5%;
bottom:0;}
.index02 .name {
position:absolute;
padding:22px 0 0 0;
width:105px;
height:105px;
right:-4%;
bottom:-5%;
background:#e82b7b;
color:#fff;
font-size:80%;
line-height:25px;
white-space: nowrap;
overflow:hidden;
border-radius:50%;}
.index02 .txt {
text-align:left;
padding:2.5% 37% 6.5% 0;}
.index02 .ttl {
margin:0 0 3.5% 0;}

@media only screen and ( max-width:800px) {

.index02 {
padding:0 0 50px 0;}
.index02::before {
background:url("../../images/bg03.png") repeat left center / 2px;}
.index02 .img {
position:static;
position:relative;
right:0;
width:100%;
padding:0;
border-bottom:1px solid #444;}
.index02 .img img {
width:70%;}
.index02 .name {
left:50%;
bottom:0;
transform: translate(-50%,50%);}
.index02 .txt {
padding:85px 0 0 0;}
.index02 .txt br {
display:none;}
.index02 .ttl {
width:96%;
text-align:center;
margin:0 auto 4.5% auto;}

}

.index03 {}
.index03 h1 {
position:relative;
padding:0 0 10px;
margin:0 0 15px 0;
font-size:280%;
line-height:1.3;
font-weight:normal;
letter-spacing:-0.05em;}
.index03 h1::after {
content:"";
position:absolute;
left:0;
bottom:0;
width:100%;
height:1px;
background:-moz-linear-gradient(left, #efeeee, #400, #efeeee); 
background:-webkit-linear-gradient(left, #efeeee, #400, #efeeee); 
background:linear-gradient(to right, #efeeee, #400, #efeeee);}
.index03 ul {
margin:35px auto;
max-width:980px;
justify-content:space-between;}
.index03 li {
width:32%;}
.index03 li img {
border-radius:50%;
box-shadow:1px 1px 2px 0 rgba(0,0,0,0.1);}

@media only screen and ( max-width:640px) {

.index03 li {
width:48%;}
.index03 li:last-child {
width:100%;
padding:0 26%;}

}

.index04 {}
.index04 .img {
position:absolute;
width:56%;
right:-1.5%;
top:50%;
transform:translate(0,-50%);}
.index04 .txt {
text-align:left;
padding:1% 59% 1% 0;}
.index04 .txt ul {
margin:22px 0 0 0;
max-width:360px;
justify-content: space-between;}
.index04 .txt ul li {
width:47.5%;;}

@media only screen and ( max-width:1023px) {

.index04 .img {
position:static;
width:100%;
transform:translate(0,0);}
.index04 .img img {
width:100%;}
.index04 .txt {
padding:35px 0 0 0;}

}

/* works =========================== */

.works01 {}
.works01 ul {
width:100%;
margin:40px 0;
text-align:left;}
.works01 li {
width:33.333333%;}
.works01 li p {
position:relative;
margin:5px;
padding:20px 15px 20px 30px;
line-height:1.3;
font-weight:bold;
white-space:nowrap;
overflow:hidden;
background:rgba(255,255,255,0.67);
box-shadow:1px 1px 2px 0 rgba(0,0,0,0.1);}
.works01 li p::before {
position:absolute;;
content:"";
width:13px;
height:13px;
left:10px;
top:50%;
background:#e82b7b;
border-radius:50%;
transform: translate(0,-50%);
box-shadow:1px 1px 2px 0 rgba(0,0,0,0.1);}
.works01 .ttl {
margin:13px 0;
font-size:150%;
line-height:1.5;
font-weight:bold;
color:#e82b7b;}
.works02 {
margin:30px 0 0 0;
padding:28px;
width:100%;
text-align:left;
background:rgba(255,255,255,0.67);
box-shadow:1px 1px 2px 0 rgba(0,0,0,0.1);}
.works02 ul {
width:100%;
margin:0 0 35px 0;
text-align: center;
justify-content:space-between;
font-size:80%;
line-height:1.6;}
.works02 li {
width:32%;
margin:1.5% 0 0 0;}
.works02 li img {
margin:0 0 10px 0;}
.works03 {
width:100%;
margin:0 auto;
justify-content:space-between;
font-size:80%;
line-height:1.6;}
.works03::after , .works03::before {
content:"";
display: block;
width:24%;
height:0;}
.works03::before {
order:1;}
.works03 li {
width:24%;
margin:2% 0 0 0;
padding:28px;
background:rgba(255,255,255,0.67);
box-shadow:1px 1px 2px 0 rgba(0,0,0,0.1);}
.works03 li img {
margin:0 0 10px 0;}

@media only screen and ( max-width:1023px) {

.works01 li {
width:50%;}
.works02 li {
width:49%;}
.works03 li {
width:49%;}

}

@media only screen and ( max-width:640px) {

.works01 ul {
margin:30px 0;}
.works01 li {
width:100%;}
.works02 li {
width:100%;
margin:15px 0 0 0;}

}

/* access =========================== */

.access01 {
width:100%;
margin:0 auto;}
.access01 .img {
float:right;
width:60%;}
.access01 .txt {
float:left;
text-align:left;
width:37%;}
.access01 .txt .ttl {
margin:0 0 20px 0;
font-size:180%;
line-height:1.3;
font-weight:bold;}

@media only screen and ( max-width:1023px) {

.access01 {
max-width:800px;}
.access01 .img {
float:none;
width:100%;}
.access01 .txt {
float:none;
width:100%;
padding:50px 0 0 0;}

}

/* profile =========================== */

.profile01 {}
.profile01 h1 {
margin:33px 0;}
.profile02 {
margin:0 0 30px 0;}
.profile02 .img {
float:right;
width:40%;
text-align:center;}
.profile02 .txt {
float:left;
width:55%;}
.profile02 .txt .ttl {
margin:0 0 15px 0;
padding:0 0 5px 0;
font-size:220%;
line-height:1.3;
font-weight:bold;
border-bottom:1px solid #444;}
.profile02 .txt dl {
font-size:90%;
line-height:1.5;
margin:1.5em 0;}
.profile02 .txt dt {
width:20px;
white-space:nowrap;
padding:2px 0;}
.profile02 .txt dd {
width: calc(100% - 20px);
padding:2px 0;}
.profile03 {
margin:30px 0 0 0;
width:100%;
text-align:left;
justify-content:space-between;}
.profile03 li {
width:32.3333%;
padding:25px;
background:rgba(255,255,255,0.67);
box-shadow:1px 1px 2px 0 rgba(0,0,0,0.1);}
.profile03 li .ttl {
margin:0 0 15px 0;
font-size:130%;
line-height:1.4;
font-weight:bold;
min-height:60px;
color:#441100;}
.profile03 li .img {
text-align:center;
padding:5px;
margin:0 0 15px 0;}
.profile03 dl {
font-size:80%;
line-height:1.5;
margin:18px 0 0 0;}
.profile03 dt {
width:16px;
white-space:nowrap;
padding:2px 0;}
.profile03 dd {
width: calc(100% - 16px);
padding:2px 0;}

@media only screen and ( max-width:1023px) {

.profile02 .img {
float:none;
width:100%;}
.profile02 .img img {
width:80%;}
.profile02 .txt {
float:none;
width:100%;
padding:50px 0 0 0;}

}

@media only screen and ( max-width:800px) {

.profile03 li {
width:100%;
margin:5px 0;}
.profile03 li .ttl {
min-height:auto;}

}