@charset "utf-8";

.page__kv{margin-bottom: 40px;}

.links__btn li a span {
    font-size: 1.8rem;
    font-weight: bold;
    padding-bottom: 32px;
}

/* work 仕事について */
.bana_project {background: url('../../work/img/bana_project_bg.png') center center / cover no-repeat #eee ;text-align: center; padding: 60px 0;}
.bana_project a { }
.bana_project a img { }

.work-head__wrap img {max-width: 100%;}
.work__halfbox {width: 60%;}
.work__icon {position: relative;}
.iconbox {position: absolute; right: 0; top: 20px; width: 50%; height: 100%; pointer-events: none; }
.iconbox img {position: absolute; z-index: 2; height: auto; }
.iconbox::before,.iconbox::after {position: absolute; content: ''; display: block;border-radius: 50%; z-index: 1;}

.iconbox::before {width: 110px; height: 110px;}
.iconbox::after {width: 230px; height: 230px;}

.iconbox01::before {background-color:#c7b9d8; top: 50%; right: 49%; }
.iconbox01 img:nth-child(1){top: 5%; right: 35%;}
.iconbox01 img:nth-child(2){top: 60%; right: 48%;}
.iconbox01 img:nth-child(3){top: 45%; right: 1%;}
.iconbox01::after {background-color:#dfd6eb; top: 20%; right: 10%; }

.iconbox02::before {background-color:#f4d1b5; top: 58%; right: 5%; }
.iconbox02 img:nth-child(1){top: 1%; right: 33%;}
.iconbox02 img:nth-child(2){top: 55%; right: 47%;}
.iconbox02 img:nth-child(3){top: 42%; right: 1%;}
.iconbox02::after {background-color:#ffefe1; top: 25%; right: 32%; }

.iconbox03::before {background-color:#cbdfa0; top: 55%; right: 9%; }
.iconbox03 img:nth-child(1){top: 10%; right: 10%;}
.iconbox03 img:nth-child(2){top: 40%; right: 70%;}
.iconbox03 img:nth-child(3){top: 60%; right: 25%;}
.iconbox03::after {background-color:#e4f1ca; top: 20%; right: 35%; }

.iconbox04::before {background-color:#f4bfb5; top: 65%; right: 25%; }
.iconbox04 img:nth-child(1){top: 23%; right: 1%;}
.iconbox04 img:nth-child(2){top: 60%; right: 57%;}
.iconbox04 img:nth-child(3){top: 12%; right: 50%;}
.iconbox04::after {background-color:#ffe5e1; top: 22%; right: 40%; }

/* work イラストのanimation */
.icon_in::before,.iconbox::after,.iconbox img:nth-child(1),.iconbox img:nth-child(2),.iconbox img:nth-child(3){
	-webkit-animation-fill-mode: both;-moz-animation-fill-mode: both;-ms-animation-fill-mode: both;
}
.icon_in::before{animation: icon_in 1s ease-out 1s both;}
.icon_in::after{animation: icon_in 1s ease-out 1.1s both;}
.icon_in img:nth-child(1){animation: icon_in 1s ease-out 1.8s both;}
.icon_in img:nth-child(2){animation: icon_in 1s ease-out 1.9s both;}
.icon_in img:nth-child(3){animation: icon_in 1s ease-out 2.0s both;}
@keyframes icon_in {
  0% {transform: scale(0.5); opacity: 0;}
  30% {transform: scale(1.1); opacity: 1;}
  60% {transform: scale(0.95);}
  90% {transform: scale(1.0);}
  100% {transform: scale(1.0);}
}
/* work Voiceの移植 */
.work__voice{ text-align: center; margin: 0 auto; padding-top: 10px!important;}
.work__voice::after{content: ''; display: block; clear: both;}
.work__voice .voice__item{display: inline-grid; width: 30%; margin: 0 1.5%;}
.work__voice .voice__item a{transition: 0.5s;}
.work__voice .voice__item a:hover{opacity: 0.6;}
.work__voice .voice__item a figure img{ width: 200px; height: 200px; border-radius: 100px;}
.work__voice .voice__item a p{font-size: 1.2rem; line-height: 1.4;}
.work__voice .voice__item a p.readtext{color:#555;}
.work__voice .voice__item a p.pref{color:#1e9cd9;}
.work__voice .voice__item a p.btn__more{background-color: #eee;  border-radius: 20px; display: inline-block;color: #555;padding: 10px 40px 10px 14px;transition: ease 0.5s;position: relative;margin: auto;}
.work__voice .voice__item a p.btn__more::after{content: '';display: inline-block;width: 24px;height: 8px;background: url('../img/common/arrow.svg') center center no-repeat;background-size: contain;position: absolute;right: 10px;top: 50%;transform: translateY(-50%);transition: ease right 0.2s;}
.work__voice .voice__item a:hover p.btn__more{background-color: #01abd3; color: #fff;}
.work__voice .voice__item a:hover p.btn__more::after{background: url('../img/common/arrow-wh.svg') center center no-repeat;}

/* color change */
.title__border--purple { color: #7a609a; }
.title__border--purple::after { background: #7a609a; }
.title__border--orange { color: #f79646; }
.title__border--orange::after { background: #f79646; }
.title__border--lime { color: #81a636; }
.title__border--lime::after { background: #81a636; }
.title__border--brown { color: #c0504d; }
.title__border--brown::after { background: #c0504d; }

.links__btn li { border: 1px solid #fff; }
.links__btn li a { color: #fff!important; }
.links__btn li a span::after { color: #fff!important; }


@media screen and (min-width: 769px), print {
    /* 調整追加 */
    #anc01 .work__voice .voice__item { width: 21%; }
}
@media screen and (max-width: 768px) {
    .work__icon { z-index: 1; }
    .iconbox { z-index: -1; top: 8%; opacity: 0.3!important; }
    .work__voice { text-align: left; }
    #anc04 .work__voice { text-align: center; }
    .work__voice .voice__item { margin: 2% 1%; width: 47%; text-align: center; }
    .work__voice .voice__item a figure img { width: 100%; height: 100%; }
    
    /* position調整 */
    .iconbox01 img:nth-child(1) { right: 10%; width: 40vw; }
    .iconbox01 img:nth-child(2) { top: 82%; width: 40vw; }
    .iconbox02 img:nth-child(1) { right: 8%; top: 3%; width: 50vw; }
    .iconbox02 img:nth-child(2) { top: 95%; right: 45%; }
    .iconbox02 img:nth-child(3) { top: 68%; width: 30vw; }
    .iconbox03 img:nth-child(1) { top: 8%; width: 44vw; }
    .iconbox03 img:nth-child(2) { top: 42%; width: 27vw; }
    .iconbox03 img:nth-child(3) { right: 3%; width: 27vw; }
    .iconbox04 img:nth-child(1) { width: 40vw; top: 42%; }
    .iconbox04 img:nth-child(2) { top: 70%; }
}