@charset "UTF-8";

/* ============================================= 
sp
================================================*/

.top-work-title { margin-bottom: 6vw; color: #fff; text-align: center; }
.top-work-title .en { margin-bottom: 1.5vw; font-size: 14.47vw; font-family: "Prompt", sans-serif;font-weight: 600; display: block; }
.top-work-title .jp { font-size: 3.95vw; font-weight: bold; display: block; }
.top-work-items { width: 100%; counter-reset: number 0; }
.top-work-items li { width: 100%; margin-bottom: 6vw; }
.top-work-item-image { width: 100%; margin-bottom: 5vw; }
.top-work-item-image img { width: 100%; }
.top-work-item-text {width: 90vw;padding: 10vw 6vw 4vw 6vw;margin: auto;background: #fff;-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px;overflow: hidden;position: relative;}
.top-work-item-text:before { content: "" counter(number,decimal-leading-zero); counter-increment: number 1; color: #f76b50; font-size: 22.37vw; font-family: "Prompt", sans-serif;font-weight: 600; letter-spacing: 0.4vw; opacity: 0.1; position: absolute; top: -6vw; right: 4vw; }
.top-work-item-title { padding-left: 18vw; margin-bottom: 4vw; color: var(--red); position: relative; }
.top-work-item-title:before { content: ''; width: 15vw; height: 15vw; background: url(../../images/arrow01-red.png) no-repeat center; background-size: 4vw; border: 1px solid var(--red); -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; pointer-events: none; position: absolute; top: 50%; left: 0; -moz-transform: translateY(-52%); -ms-transform: translateY(-52%); -webkit-transform: translateY(-52%); transform: translateY(-52%); }
.top-work-item-title .jp { margin-bottom: 1.5vw; font-size: 6.32vw; font-weight: bold; display: block; }
.top-work-item-title .en { font-size: 3.5vw; font-family: "Prompt", sans-serif;font-weight: 600; letter-spacing: 0.4vw; display: block; }
.top-work-item-comment p { font-size: 3.6vw; text-align: justify; text-justify: inter-ideograph; font-feature-settings: "palt"; line-height: 1.8; letter-spacing: 0.04em; }
.bnrbox{display: -webkit-box;display: -webkit-flex;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;-webkit-justify-content: center;justify-content: center;margin: 4vw auto 0;width: 100%;}
.bnrbox a{width: 70vw;padding: 3vw 0;font-size: 4vw;font-weight: bold;text-align: center;background: #f0ff4b url(../images/arrow01.png) no-repeat center right 5vw;background-size: 3vw;-moz-border-radius: 15vw;-webkit-border-radius: 15vw;border-radius: 15vw;margin: 0 auto 3vw;position: relative;}
.bnrbox a:after{content: '\f105';margin: 0 2vw;font-family: 'icon';position:absolute;right:2%;}
.bnrbox a:nth-last-child(1){background:var(--red);color:#fff;}



/* ============================================= 
pc
================================================*/
@media screen and (min-width: 736px) { 
	
.top-work-title { margin-bottom: 40px; }
.top-work-title .en { margin-bottom: 10px; font-size: 70px; letter-spacing: 2px; }
.top-work-title .jp { font-size: 16px; }
.top-work-items { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center;justify-content: center;}
.top-work-items li {width: 100%;margin-bottom: 50px;}
.top-work-item-image { margin-bottom: 25px; }
.top-work-item-text { width: 95%; padding: 50px 40px; }
.top-work-item-text:before { font-size: 150px; letter-spacing: 4px; top: 10px; right: 60px; }
.top-work-item-title { padding-left: 85px; margin-bottom: 30px; }
.top-work-item-title:before { width: 70px; height: 70px; background-size: 20px; -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); }
.top-work-item-title .jp { margin-bottom: 10px; font-size: 34px; }
.top-work-item-title .en { font-size: 15px; letter-spacing: 2px; }
.top-work-item-comment p { font-size: 16px; }
.bnrbox{margin-top:20px;}
.bnrbox a{width: 46%;font-size: 19px;padding: 16px 0;background-position: center right 20px;background-size: 16px;margin: 0 8px 10px 8px;}
}



@media screen and (min-width: 1200px) { 
.top-work-items li{width:50%;}
.bnrbox a{font-size: 16px;width: 180px;width: 154px;margin: 0 4px 10px 4px;}
.bnrbox a:after{right: 10px;margin: 0;}
}

@media screen and (min-width: 1280px) { 
.top-work-item-text {min-height: 385px;}
}
@media screen and (min-width: 1800px) {
.top-work-item-text {min-height: 350px;}}

/* retina用 ----------------------------------------------- */ 
@media screen and (min-width: 736px) and (-webkit-min-device-pixel-ratio: 2), screen and (min-width: 736px) and (min-resolution: 2dppx) { 

}