@charset "utf-8";
/* top css */

/*-------------------------------------------------
loading
-------------------------------------------------*/

body.is-lock {
overflow: hidden;
}
#opening {
position: fixed;
inset: 0;
/*background: #003F7A;*/
background: #003791;
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
transform: translateX(0);
transition: transform .75s cubic-bezier(.86,0,.07,1);
will-change: transform;
}
.opening_inner {
text-align: center;
transition: opacity .6s ease;
}
.spinner {
width: 30px;
height: 30px;
margin: 20px auto 0;
border-radius: 50%;
border: 2px solid rgba(255,255,255,0.25);
border-top: 2px solid #fff;
animation: spin 1s linear infinite;
}

@keyframes spin {
to { transform: rotate(360deg); }
}



/*-------------------------------------------------
スライド kv
-------------------------------------------------*/

.header_top {
width: 100%;
position: relative;
height: 100vh;
z-index: 1;
transform: none !important;
perspective: none !important;
filter: none !important; 
contain: none !important;
}
.kv_slide {
width: 100%;
height: 100vh;
position: fixed;
top: 0;
left: 0;
z-index: 0;
overflow: hidden;
backface-visibility: hidden;
transform: scale(1.05); 
transform-origin: center center;
will-change: filter;
}

@media all and (max-width : 767px ){
.header_top,
.kv_slide {
height: 100dvh; 
}
}


/*-------------------------------------------------
スライド画像
-------------------------------------------------*/

.fv-images {
position: absolute;
inset: 0;
overflow: hidden;
z-index: 1;
will-change: filter;
}
.fv-image {
position: absolute;
inset: 0;
opacity: 0;
}
.fv-image::after {
content: "";
display: block;
background: url("../img/common/bg_grid_30.png");
background-repeat: repeat;
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 2;
pointer-events: none;
}
.fv-image picture,
.fv-image img {
position: absolute;
top: 0;
left: 50%;
width: 110%;
height: 100%;
object-fit: cover;
transform: translateX(-50%) scale(1);
}
.fv-image.is-active {
opacity: 1;
}
.fv-image.is-active img {
animation: fvPan 6s ease-out forwards;
}
@keyframes fvPan {
from {
transform: translateX(-50%) scale(1);
}
to {
transform: translateX(calc(-50% - 2%)) scale(1.03);
}
}


/*-------------------------------------------------
黒カーテン
-------------------------------------------------*/

.fv-image-curtain {
position: absolute;
inset: 0;
background: #000;
transform: translateY(100%);
transition: transform 0.6s cubic-bezier(.77,0,.175,1);
z-index: 5;
}
.fv-image-curtain.is-cover {
transform: translateY(0);
}
.fv-image-curtain.is-open {
transform: translateY(-100%);
}


/*-------------------------------------------------
fv-slide
-------------------------------------------------*/

.slide-content {
max-width: 700px;
position: absolute;
bottom: 5%;
left: 7%;
z-index: 10;
color: #fff;
}
.fv-slides {
position: absolute;
inset: 0;
z-index: 10;
}
.fv-slide {
position: absolute;
inset: 0;
opacity: 0;
pointer-events: none; 
}
.fv-slide.is-active {
opacity: 1;
pointer-events: auto;
}

@media all and (max-width : 768px ){
.slide-content {
max-width: 650px;
}
}

@media all and (max-width : 767px ){
.slide-content {
max-width: 340px;
}
}


/* ===============================
テキスト白カーテン 
================================ */

.js-block {
position: relative;
display: inline-block;
overflow: hidden;
}
.white-curtain {
position: absolute;
inset: 1px;
background: #fff;
z-index: 999;
will-change: transform;
}
.js-block > *:not(.white-curtain) {
position: relative;
z-index: 1;
}
.text {
position: relative;
z-index: 1;
}


/*-------------------------------------------------
ページネーション
-------------------------------------------------*/

.fv-pagination {
position: absolute;
right: 70px;
bottom: 50px;
z-index: 20;
display: flex;
gap: 16px;
}
.fv-dot {
width: 25px;
height: 25px;
position: relative;
}
.fv-dot svg {
width: 100%;
height: 100%;
transform: rotate(-90deg);
}

/* 外周円の線の太さ*/
.fv-dot circle {
fill: none;
stroke-width: 3;
}

/* 外枠は通常非表示 */
.fv-dot .bg {
display: none;
}

/* プログレスも通常は非表示 */
.fv-dot .progress {
stroke: #fff;
stroke-dasharray: 100;
stroke-dashoffset: 100;
opacity: 0;
}

/* アクティブ時のみ表示 */
.fv-dot.is-active .progress {
opacity: 1;
animation:
circleProgress 6s linear forwards,
circleOut 1s cubic-bezier(.43,.05,.17,1) 6.3s forwards;
}

/* 中央の白丸 */
.fv-dot::after {
content: "";
position: absolute;
width: 6px;
height: 6px;
background: #fff;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(1);
}
/* アクティブ時だけ大きく */
.fv-dot.is-active::after {
animation:
dotScaleUp .4s cubic-bezier(.43,.05,.17,1) forwards,
dotScaleDown 1s cubic-bezier(.43,.05,.17,1) 6.4s forwards;
}

@keyframes circleProgress {
  from { stroke-dashoffset: 100; }
  to   { stroke-dashoffset: 0; }
}

/* 時計回りに消える */
@keyframes circleOut {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -100; }
}

@keyframes dotScaleUp {
  from { transform: translate(-50%, -50%) scale(1); }
  to   { transform: translate(-50%, -50%) scale(2); }
}

@keyframes dotScaleDown {
  from { transform: translate(-50%, -50%) scale(2); }
  to   { transform: translate(-50%, -50%) scale(1); }
}


@media all and (max-width : 767px ){
.fv-pagination {
position: absolute;
right: 20px;
bottom: 40px;
gap: 10px;
}
.fv-dot {
width: 20px;
height: 20px;
}
.fv-dot::after {
content: "";
position: absolute;
width: 4px;
height: 4px;
}
}


/* キャプション中身
-------------------------------------------------- */

.slide-content .inner a {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.slide_title {
font-size: 3.6rem;
font-weight: 300;
letter-spacing: 0.2em;
margin-bottom: 20px;
transition-duration: 0.5s;
}
.slide_desc {
position: relative;
font-weight: 400;
font-size: 1.5rem;
letter-spacing: 0.2em;
line-height: 1.45;
margin-bottom: 30px;
}
.slide_desc .text {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.slide_link {
font-family: "Rajdhani", sans-serif;
font-weight: 500;
font-size: 1.6rem;
letter-spacing: 0.1em;
display: inline-flex;
align-items: center;
gap: 12px;
text-decoration: none;
position: relative;
}
.slide_link .text {
position: relative;
padding-right: 10px;
padding-bottom: 8px;
}
.slide_link .icon_arrow {
width: 13px;
height: auto;
margin-left: 6px;
transform: translateY(6px); 
transition: transform .4s cubic-bezier(.77,0,.175,1);
}
.slide-content .inner a:hover .icon_arrow {
transform: translateY(6px) translateX(6px);
}
.link_label {
position: relative;
display: inline-block;
}
.slide_link .text::after {
content: "";
position: absolute;
left: 0;
bottom: 0px;
width: 100%;
height: 1px;
opacity: 0;
background: currentColor;
transform: scaleX(0);
transform-origin: left;
transition: all .3s cubic-bezier(.77,0,.175,1);
}
.slide-content .inner a:hover .text::after {
transform: scaleX(1);
opacity: 1;
}


@media all and (max-width : 820px ){
.slide_title {
font-size: 3.0rem;
}
.slide_desc {
font-size: 1.4rem;
}
}

@media all and (max-width : 767px ){
.slide_title {
font-size: 2.2rem;
letter-spacing: 0.15em;
margin-bottom: 15px;
}
.slide_desc {
font-size: 1.2rem;
letter-spacing: 0.1em;
margin-bottom: 20px;
}
.slide_link {
font-size: 1.4rem;
}
}


/*-------------------------------------------------
kv copy
-------------------------------------------------*/

.kv_copybox {
position: absolute;
top: 40%;
left: 5%;
transform: translate3d(60px, -50%, 0);
opacity: 0;
z-index: 10;
will-change: transform, opacity;
transition:
transform .9s ease,
opacity .9s ease;
transition-delay: .1s;
}
body.is-kvcopy-start .kv_copybox {
opacity: 1;
transform: translateY(-50%) translateX(0);
}
.kv_copy {
max-width: 459px;
height: auto;
}
.kv_copy img {
width: 100%;
}

@media all and (max-width : 820px ){
.kv_copy {
max-width: 400px;
}
}

@media all and (max-width : 767px ){
.kv_copybox {
position: absolute;
top: 30%;
left: 5%;
}
.kv_copy {
max-width: 280px;
}
}


/*------------------------------------------------- 
scroll bar
------------------------------------------------- */

.scroll_bar a {
position: fixed;
bottom: 0;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
z-index: 4;
padding: 10px 10px 110px;
color: #ddd;
}
.scroll_bar a::after {
content: '';
position: absolute;
bottom: -100px;
left: 50%;
width: 1px;
height: 200px;
background: #ddd;
}
.scroll_bar a::before {
content: '';
position: absolute;
bottom: -100px;
left: 50%;
width: 1px;
height: 200px;
background-color: rgba(131, 131, 127, 0.4);
}
.scroll_bar a::after {
animation: sdl 1.5s cubic-bezier(1, 0, 0, 1) infinite;
}

@keyframes sdl {
0% {
transform: scale(1, 0);
transform-origin: 0 0;
}
50% {
transform: scale(1, 1);
transform-origin: 0 0;
}
50.1% {
transform: scale(1, 1);
transform-origin: 0 100%;
}
100% {
transform: scale(1, 0);
transform-origin: 0 100%;
}
}

@media all and (max-width : 767px ){
.scroll_bar a::after {
bottom: -30px;
height: 60px;
}
.scroll_bar a::before {
bottom: -30px;
height: 60px;
}
}


/*-------------------------------------------------
コンセプトエリア
-------------------------------------------------*/

.header_bottom {
position: relative;
z-index: 2;
transition: 1.3s;
}
.content_side {
width: 100%;
max-width: 720px;
color: #fff;
margin: 80vh 0 0 auto;
padding-bottom: 250px;
}
.kv_intro_title {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.kv_intro_title dt {
font-family: "Rajdhani", sans-serif;
font-weight: 600;
font-size: 1.8rem;
letter-spacing: 0.05em;
color: #CD0C0C;
line-height: 100%;
}
.kv_intro_title dd {
position: relative;
font-size: 1.2rem;
font-weight: 500;
color: #fff;
line-height: 100%;
padding-left: 15px;
margin-left: 10px;
}
.kv_intro_title dd::before {
content: "/";
display: inline-block;
font-size: 1.0rem;
color: #fff;
position: absolute;
left: 0;
top: 0;
}
.kv_copy_en {
font-family: "balboa", sans-serif;
font-weight: 300;
font-size: 8.0rem;
letter-spacing: 0.05em;
margin-bottom: 40px;
line-height: 120%;
}
.kv_copy_jp {
font-size: 2.6rem;
font-weight: 700;
letter-spacing: 0.3em;
margin-bottom: 40px;
}
.concept_txt {
font-size: 1.6rem;
font-weight: 500;
letter-spacing: 0.2em;
line-height: 200%;
margin-bottom: 100px;
}
.content_side .all_more .all_more_inner .all_more_line {
color: #fff;
}
.content_side .all_more .all_more_inner .all_more_icon {
border: none;
}
.content_side .all_more .all_more_inner .all_more_line:after {
background: #fff;
}

@media all and (max-width : 1260px ){
#page_about .title_box {
padding-left: 0;
}
}

@media all and (max-width : 1024px ){
.kv_copy_en {
font-size: 6.0rem;
margin-bottom: 30px;
}
.kv_copy_jp {
font-size: 2.4rem;
}
.concept_txt {
font-size: 1.5rem;
letter-spacing: 0.15em;
}
}

@media all and (max-width : 820px ){
.content_side {
max-width: 650px;
margin: 70vh 0 0 auto;
padding-bottom: 200px;
}
.kv_copy_en {
font-size: 5.0rem;
}
.kv_copy_jp {
font-size: 2.2rem;
}
}

@media all and (max-width : 768px ){
.concept_txt {
font-size: 1.45rem;
letter-spacing: 0.1em;
}
}

@media all and (max-width : 767px ){
.content_side {
width: 95%; 
margin: 50vh 0 0 auto;
padding-bottom: 100px;
}
.kv_copy_en {
font-size: 3.6rem;
margin-bottom: 20px;
}
.kv_copy_jp {
font-size: 1.8rem;
letter-spacing: 0.2em;
margin-bottom: 20px;
}
.concept_txt {
font-size: 1.4rem;
letter-spacing: 0.1em;
line-height: 180%;
margin-bottom: 50px;
}
}


/*-------------------------------------------------
main content
-------------------------------------------------*/

main {
background: #FAFAFA;
}
.sec_title {
display: flex;
align-items: center;
margin-bottom: 40px;
}
.sec_title dt {
font-family: 'PressioTEST-No.35';
font-weight: normal;
font-size: 8.0rem;
letter-spacing: 0.05em;
line-height: 100%;
color: #17448A;
margin-right: 15px;
}
.sec_title dd {
position: relative;
font-size: 1.4rem;
font-weight: 500;
letter-spacing: 0.15em;
padding-left: 13px;
margin-top: 32px;
line-height: 100%;
}
.sec_title dd::before {
content: "/";
display: inline-block;
font-size: 1.2rem;
position: absolute;
left: 0;
top: 0;
}

@media all and (max-width : 767px ){
.sec_title {
margin-bottom: 25px;
}
.sec_title dt {
font-family: 'PressioTEST-No.33';
font-size: 5.0rem;
margin-right: 10px;
}
.sec_title dd {
font-size: 1.1rem;
letter-spacing: 0.1em;
padding-left: 12px;
margin-top: 26px;
}
.sec_title dd::before {
font-size: 1.0rem;
}
}


/*-------------------------------------------------
sec_news
-------------------------------------------------*/

.sec_news {
padding: 20px 0 80px;
}
.news_box {
width: calc(25% - 90px / 4);
margin-right: 30px;
}

@media all and (max-width : 1260px ){
.news_box {
width: calc(25% - 60px / 4);
margin-right: 20px;
}
}

@media all and (max-width : 820px ){
.sec_news {
margin-bottom: 40px;
}
.news_box {
width: calc(25% - 45px / 4);
margin-right: 15px;
}
}

@media all and (max-width : 767px ){
.sec_news {
padding: 40px 0 40px;
margin-bottom: 0px;
}
}

.news_box:nth-child(4n) {
margin-right: 0px;
}

@media all and (max-width : 767px ){
.news_box {
width: calc(50% - 15px / 2);
margin-right: 15px;
margin-bottom: 20px;
}
.news_box:nth-child(2n) {
margin-right: 0px;
}
}

.news_thum {
width: 100%;
height: auto;
position: relative;
background: #000;
overflow: hidden;
margin-bottom: 15px;
}
.news_thum img {
width: 100%;
transition-duration: 0.7s;	
aspect-ratio: 3 / 2;
object-fit: cover;
transform: translateZ(0);
backface-visibility: hidden;
will-change: transform;
}
.news_thum img:hover {
transform: scale(1.05);
transition-duration: 0.7s;
opacity: .8;
}
.date_box_wrap .date {
font-family: "Rajdhani", sans-serif;
font-weight: 600;
font-size: 1.2rem;
letter-spacing: 0.05em;
line-height: 100%;
padding-right: 15px;
position: relative;
margin-right: 10px;
}

@media all and (max-width : 767px ){
.date_box_wrap .date {
font-size: 1.0rem;
padding-right: 10px;
margin-right: 10px;
}
}

.date_box_wrap .date::after {
content: "|";
display: inline-block;
color: #999;
position: absolute;
right: 0;
top: 0;
}
.date_box_wrap .news_cate {
font-size: 1.0rem;
font-weight: 400;
line-height: 100%;
}
.date_box_wrap .news_cate span {
color: #C4302B;
font-weight: 700;
}
.date_box_wrap {
display: flex;
align-items: center;
margin-bottom: 12px;
}
.head_date_box {
margin-bottom: 10px;
}
.news_title {
font-weight: 500;
font-size: 1.5rem;
width: 100%;
letter-spacing: 0.2em;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
}
.news_box_wrap {
display: flex;
margin-bottom: 50px;
}
.txt_right {
display: flex;
justify-content: flex-end;
}

@media all and (max-width : 767px ){
.news_cat_box {
display: flex;
font-size: 1.0rem;
margin-bottom: 5px;
}
.news_title {
font-size: 1.2rem;
}
.news_box_wrap {
display: flex;
flex-wrap: wrap;
margin-bottom: 20px;
}
}


/*-------------------------------------------------
sec_service
-------------------------------------------------*/

.sec_service {
width: 100%;
background: #0069AC;
padding: 80px 0;
color: #fff;
}
.sec_service .sec_title dt {
color: #fff;
}
.intro_txt {
font-size: 1.5rem;
line-height: 200%;
margin-bottom: 80px;
}
.service_box_wrap{
position: relative;
width:100%;
margin:0 auto;
text-align:center;
display: flex;
justify-content: space-between;
}
.service_imgbox {
width: 55%;
height: 80vh; 
min-height: 450px; /* 小さくなりすぎないように制限 */
max-height: 700px; /* 大きくなりすぎないように制限 */
display: flex;
align-items: center;
position: sticky;
position: -webkit-sticky;
top:15vh;
}
.service_imgbox img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.service_imgbox p {
height: 100%; 
width: 100%;
display: block;
visibility: hidden;
position: absolute;
top: 0;
bottom: 0;
transition: .8s !important;
opacity: 0;
}
.service_imgbox p:first-child,
.service_imgbox p.active {
visibility: visible;
opacity: 1;
}
.service_txtbox {
width: 40%;
counter-reset: number;
}
.service_txtbox .scroll_area {
padding-top: 50vh;
padding-right: 10vh;
counter-increment: number;
}
.service_txtbox .scroll_area:first-child {
padding-top: 20px;
margin-bottom: 10vh;
}
.service_txtbox .scroll_area:last-child {
padding-bottom: 22vh;
}

@media all and (max-width : 980px ){
.service_box_wrap{
position: relative;
display: flex;
flex-direction: column;
}
.service_imgbox {
display: none;
}
.service_txtbox {
width: 100%;
padding: 0 20px;
}
.service_txtbox .scroll_area {
padding-top: 0px;
padding-right: 0;
margin-bottom: 10vh;
}
.service_txtbox .scroll_area:last-child {
padding-bottom: 0;
margin-bottom: 0;
}
}

@media all and (max-width : 767px ){
.sec_service {
padding: 40px 0;
}
.intro_txt {
font-size: 1.3rem;
line-height: 180%;
margin-bottom: 40px;
}
}


/* work_title
-------------------------------------------------- */

.work_title_wrap {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 50px;
}
.work_title {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.work_title::before {
content: counter(number, decimal-leading-zero);
position: absolute;
right: calc(100% + 0.5rem);
bottom: 100%;
font-family: "Rajdhani", sans-serif;
font-weight: 600;
color: #fff;
white-space: nowrap;
letter-spacing: 0;
}
.work_title::after {
content: "";
position: absolute;
right: calc(100% - 0.5rem);
bottom: calc(100% + .5rem);
width: 1.75rem;
height: 0.0625rem;
background-color: #9c9992;
rotate: -45deg;
}
.work_title dt {
font-weight: 400;
font-size: 3.0rem;
letter-spacing: 0.2em;
line-height: 100%;
margin-bottom: 10px;
}
.work_title dd {
font-family: "Rajdhani", sans-serif;
font-weight: 600;
font-size: 1.4rem;
letter-spacing: 0.05em;
}

@media all and (max-width : 767px ){
.work_title_wrap {
margin-bottom: 30px;
}
.work_title dt {
font-size: 1.8rem;
margin-bottom: 8px;
}
.work_title dd {
font-size: 1.1rem;
}
}

.tb_img {
max-width: 980px;
height: auto;
padding: 0 10px;
margin: 0 auto 25px;
display: none;
}
.work_txt {
font-size: 1.5rem;
line-height: 200%;
margin: 30px 0 40px;
display: block;
text-align:left;
}
.work_list {
padding: 20px 20px 20px 10px;
border-bottom: solid 1px rgba(255, 255, 255, 0.6);
}
.work_list a {
display: flex;
justify-content: space-between;
align-items: center;
}
.w_cate_title {
font-size: 2.0rem;
font-weight: 500;
letter-spacing: 0.2em;
transition: all 0.5s ease 0s;
}
.work_link_btn {
z-index: 3;
display: block;
width: 40px;
height: 40px;
margin-left: 15px;
position: relative;
border-width: 1px;
border-style: solid;
border-color: rgba(255, 255, 255, 0.9);
border-image: initial;
border-radius: 50%;
transition: all 0.5s ease 0s;
}
.work_link_btn::before {
position: absolute;
z-index: 2;
display: block;
content: "";
top: 0px;
left: 15px;
bottom: 0px;
width: 6.5px;
height: 6.5px;
transform: rotate(45deg);
margin: auto;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
transition: all 0.12s ease-in 0s;
}
.work_list a:hover .work_link_btn {
opacity: 1;
background-color: #fff;
border: solid 1px #fff;
transition: all 0.5s ease 0s;
}
.work_list a:hover .work_link_btn::before {
border-top: 2px solid #034E95;
border-right: 2px solid #034E95;
}
.work_list a:hover .w_cate_title {
color: #ccc;
transition: all 0.5s ease 0s;
}

@media all and (max-width : 980px ){
.tb_img {
display: block;
}
.work_list {
border-top: solid 1px rgba(255, 255, 255, 0.6);
}
/* 2番目以降の.work_listの上の線を消す */
.work_list + .work_list {
border-top: none;
}
}

@media all and (max-width : 767px ){
.tb_img {
padding: 0;
margin: 0 auto 0px;
}
.work_txt {
font-size: 1.3rem;
line-height: 180%;
margin: 20px 0 30px;
}
.work_list {
padding: 15px 5px 15px 5px;
}
.w_cate_title {
font-size: 1.5rem;
letter-spacing: 0.1em;
}
.work_link_btn {
width: 30px;
height: 30px;
margin-left: 0px;
}
.work_link_btn::before {
left: 11px;
width: 5.5px;
height: 5.5px;
}
}

/*-------------------------------------------------
sec_case_study
-------------------------------------------------*/

.sec_case_study {
padding: 60px 0;
}
.sec_title_flex {
display: flex;
justify-content: space-between;
align-items: center;
}
.sec_case_study .intro_txt {
margin-bottom: 70px;
}
.works_wrap {
position: relative;
overflow: hidden;
padding-bottom: 60px;
}
.works_wrap_inner {
max-width: 1260px;
margin: 0 auto;
width: 100%;
position: relative;
}


@media all and (max-width : 1260px ){
.works_wrap_inner {
padding-left: 20px;
}
}

.slide_works {
/*width: 100vw;*/
width: calc(100% + (100vw - 100%) / 2);
margin-right: calc(50% - 50vw);
overflow: hidden;
}


@media all and (max-width : 767px ){
.slide_works .item_box {
max-width: 350px;
}
.sec_case_study {
padding: 40px 0 30px;
}
.sec_title_flex {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 15px;
}
.sec_case_study .sec_title {
margin-bottom: 15px;
}
.sec_case_study .intro_txt {
margin-bottom: 30px;
}
.works_wrap {
padding-bottom: 40px;
}
}

.slide_works .item_imgbox {
width: 100%;
height: auto;
position: relative;
overflow: hidden;
background: #000;
margin-bottom: 15px;
}
.slide_works .item_imgbox img {
width: 100%;
transition-duration: 0.7s;
aspect-ratio: 3 / 2;
object-fit: cover;
transform: translateZ(0);
backface-visibility: hidden;
will-change: transform;
}
.slide_works .item_imgbox img:hover {
transform: scale(1.05);
transition-duration: 0.7s;
opacity: .8;
}
.slide_works .item_title {
font-size: 1.6rem;
font-weight: 700;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 10px;
}
.slide_works .item_type {
font-size: 1.2rem;
font-weight: 500;
letter-spacing: 0.15em;
margin-bottom: 20px;
display: flex;
flex-wrap: wrap;
}
.slide_works .item_type li {
padding-left: 12px;
margin-left: 7px;
position: relative;
}
.slide_works .item_type li:first-of-type {
padding-left: 0px;
margin-left: 0px;
}
.slide_works .item_type li::before {
content: "/";
display: inline-block;
color: #000;
position: absolute;
left: 0;
top: 0;
}
.slide_works .item_type li:first-of-type::before {
content: none;
}
.slide_works .item_category {
display: flex;
padding-right: 15px;
}
.slide_works .item_category li {
font-size: 1.1rem;
font-weight: 500;
padding: 8px 15px 8px;
line-height: 110%;
}
.slide_works .cate_main {
background-color: #034E95;
border: solid 1px #034E95;
color: #fff;
border-radius: 3px;
margin-right: 10px;
}
.slide_works .cate_sub {
background-color: #eee;
color: #000;
border: solid 1px #ccc;
border-radius: 3px;
}
.works_wrap .swiper-slide img {
width: 100%;
height: auto;
}

@media all and (max-width : 767px ){
.works_wrap .item_title {
font-size: 1.5rem;
}
.works_wrap .item_type {
margin-bottom: 15px;
}
.works_wrap .item_category li {
font-size: 1.0rem;
padding: 6px 12px 6px;
line-height: 110%;
}
.works_wrap .cate_main {
margin-right: 8px;
}
}

@media screen and (min-width: 1921px) {
.box_m, 
.works_wrap_inner {
max-width: 1800px; 
}
}


/* ページネーション
-------------------------------------------------*/

.works_wrap .swiper-pagination-bullet {
width: 5px;
height: 5px;
display: inline-block;
border-radius: 100%;
background: #000;
opacity: .2;
margin-right: 10px;
}
.works_wrap .swiper-pagination-bullet:last-child {
margin-right: 0px;
}
.works_wrap .swiper-pagination-bullet-active {
opacity: 1;
background: #005CA2;
}
.works_wrap .swiper-pagination {
position: absolute;
bottom: 0px;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
}
.works_wrap .swiper-pagination-bullet:hover {
cursor: pointer;
}


/*-------------------------------------------------
sec_about_us
-------------------------------------------------*/

.sec_about_us {
width: 100%;
position: relative;
background-image: url("../img/top/about_bg.jpg");
background-repeat: no-repeat;
background-position: center top;
color: #fff;
padding: 80px 0 300px;
}
.sec_about_us::before {
content: "";
display: block;
background-color: #000;
opacity: 0.25;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.sec_about_us .sec_title dt {
color: #fff;
}
.sec_about_us .intro_txt {
margin-bottom: 50px;
}
.sec_about_us .all_more .all_more_inner .all_more_line {
color: #fff;
}
.sec_about_us .all_more .all_more_inner .all_more_icon {
border: none;
}
.sec_about_us .all_more .all_more_inner .all_more_line:after {
background: #fff;
}
.content {
padding: 40px 0 0px;
}
footer {
margin-top: -155px;
background: transparent;
}

@media all and (max-width : 767px ){
.sec_about_us {
background-image: url("../img/top/about_bg_sp.jpg");
background-repeat: no-repeat;
background-position: left top;
background-size: contain;
padding: 40px 0 199px;
}
.sec_about_us .intro_txt {
margin-bottom: 20px;
}
.content {
padding: 0px;
}
}