@charset "UTF-8";
@media screen and (min-width: 768px),print {

header{ position: absolute; z-index: 3;}
#interview .onecol-contents{max-width: 100%;padding: 0;}
#interview .seo_bread_list{max-width: 1920px;}

#contents-interview-main{position: relative;margin-bottom: 41px;}
#contents-interview-main .img{padding-top: 0px;}
#contents-interview-main .img img{ width: 100%; height: auto; }
#contents-interview-main h1{ font-size: 3.13vw; letter-spacing: -0.4vw; color: #fff; text-shadow: 0px 0px 0.52vw #00000080; position: absolute; top: 25.2vw; width: 100vw; z-index: 3; font-family: "ta-oonishi", sans-serif; font-weight: 300; font-style: normal; text-align: center; }
#contents-interview-main span.entt{font-size: 1.6rem;letter-spacing: 0.16rem;font-weight: bold;position: absolute;bottom: 170px;left: 17px;transform: rotate(90deg);transform-origin: center;color: #fff;}
#contents-interview-main span.entt::before{content: "";display: block;height: 1px;width: 114px;background: #fff;position: absolute;bottom: 15px;left: 125px;}


#contents-interview-01{background: url(../images/interview/contentsinterview01.svg)no-repeat top 185px center;background-size: 100% auto;padding: 150px 0 300px;}
#contents-interview-01 .inner-Box{ width: 800px; margin: 0 auto; }
:root{
--w: 400px;        /* カード幅 */
--h: 480px;        /* カード高さ */
--angle: 10deg;    /* 扇の角度 */
--shift: 70px;     /* ← 48px → 70px に増やして距離を広げた */
--lift: 10px;      /* 少し持ち上げる量 */
--dur: 0.7s;       /* ← STOP前提なので短くして自然に */
--shadow: 0 14px 30px rgba(0,0,0,.16);
}
*{ box-sizing: border-box; }
#contents-interview-01 .stage{ position:relative; width:min(90vw, 720px); height: clamp(240px, 40vw, 360px); display:grid; place-items:center; perspective: 800px; }
/* カード共通 */
#contents-interview-01 .card{ position:absolute; width:var(--w); height:var(--h); /* display:grid; */ place-items:center; border-radius: 27px; color:#fff; font-weight:700; letter-spacing:.08em; box-shadow: var(--shadow); background:#0057AA; transform: translate(-50%, -50%); top:50%; left:50%; will-change: transform, box-shadow; opacity: 1;                /* ← 最初は透明にする（開始が自然） */ transition: opacity .4s ease; }
/* 軸の指定 */
#contents-interview-01 .card--left{transform-origin: 160% 157%;}
#contents-interview-01 .card--right{transform-origin: 60% 261%;}
#contents-interview-01 .card--right{ background:#0057AA; overflow:hidden; }  
/* ▼アニメーション（1回のみを想定） */
@keyframes fanLeftOnce {
0%   { transform: translate(-50%,-50%) rotate(0deg) translateX(0) translateY(0); }
100% { transform: translate(-50%,-50%) rotate(calc(-1 * var(--angle))) translateX(calc(-1 * var(--shift))) translateY(calc(-1 * var(--lift))); }
}
@keyframes fanRightOnce {
0%   { transform: translate(-50%,-50%) rotate(0deg) translateX(0) translateY(0); }
100% { transform: translate(-50%,-50%) rotate(var(--angle)) translateX(var(--shift)) translateY(calc(-1 * var(--lift))); }
}
/* アニメーション開始用クラス */
#contents-interview-01 .card.start-left { opacity: 1; animation: fanLeftOnce var(--dur) ease-out forwards; }
#contents-interview-01 .card.start-right { opacity: 1; animation: fanRightOnce var(--dur) ease-out forwards; }

#contents-interview-01 .cbox{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; }
#contents-interview-01 .cbox h2{font-size: 3.2rem;letter-spacing: 0.32rem;margin-bottom: 6px;}
#contents-interview-01 .cbox p{font-size: 1.4rem;letter-spacing: 0.07rem;font-weight: 400;margin-bottom: 6px;}


#contents-interview-navi {margin: 0 auto 60px;position: relative;}
#contents-interview-navi .inner-Box { margin: 0 auto; position: relative; }
#contents-interview-navi .inner-Box ul.his-list {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center;}
#contents-interview-navi .inner-Box ul.his-list li { position: relative; }
#contents-interview-navi .inner-Box ul.his-list li a {display: inline-block;border: 1px solid #D2D2D2;border-radius: 30px;background: #F3F5FA;position: relative;padding: 10px 32px 10px 24px;margin-right: 10px;transition: all 0.3s ease-in-out;}
#contents-interview-navi .inner-Box ul.his-list li a:hover { background: #fff; }
#contents-interview-navi .inner-Box ul.his-list li a .arr {position: absolute;top: -9px;right: -14px;transition: all 0.3s ease-in-out;}
#contents-interview-navi .inner-Box ul.his-list li a:hover .arr { top: -5px;}
#contents-interview-navi .inner-Box p.listtext {font-size: 1.3rem;line-height: 1.8;font-weight: 400;letter-spacing: 0.08rem;position: relative;}

#contents-interview-02 .interview-block__content h3 {font-size: 2.4rem;margin-bottom: 2.4rem;color: #0057AA;letter-spacing: 0.12rem;font-weight: bold;}
#contents-interview-02 .interview-block__content .text { font-size: 1.6rem; line-height: 1.8; }
#contents-interview-02 .interview-block__content p{ margin-bottom: 20px;}
#contents-interview-02 .interview-block__image img { width: 100%; height: auto; }

#contents-interview-02 .interview-block {padding: 60px 0;}
#contents-interview-02 .type-a .interview-block__inner {display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;max-width: 100%;margin: 0 auto;gap: 6.3%;}
#contents-interview-02 .type-a .interview-block__image { flex: 1 1 45%; max-width: 42.4%; }
#contents-interview-02 .type-a .interview-block__content {flex: 1 1 45%;max-width: 690px;margin-right: auto;padding-right: 50px;}

#contents-interview-02 .type-b .interview-block__inner {display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;max-width: 100%;margin: 0 auto;gap: 6.3%;}
#contents-interview-02 .type-b .interview-block__image {flex: 1 1 45%;max-width: 41.7%;}
#contents-interview-02 .type-b .interview-block__content {flex: 1 1 45%;max-width: 690px;margin-left: auto;margin-right: 0;padding-left: 50px;}

#contents-interview-02 .type-c .interview-block__inner { max-width: 880px; margin: 0 auto; padding: 0 40px; }
#contents-interview-02 .type-c .interview-block__image { margin-bottom: 61px; }
#contents-interview-02 .type-c .interview-block__content {flex: 1 1 45%;margin-left: auto;margin-right: 0;}

/* 交互にする（type-bやtype-dなど） */
#contents-interview-02 .type-b .interview-block__inner { flex-direction: row-reverse; }
#contents-interview-02 .type-a .interview-block__image img{ border-radius: 0 20px 20px 0; }
#contents-interview-02 .type-b .interview-block__image img{ border-radius: 20px 0 0 20px; }
#contents-interview-02 .type-c .interview-block__image img{ border-radius: 20px; }



#contents-interview-03{background: url(../images/interview/contentsinterview01.svg)no-repeat top 216px center #F3F5FA;background-size: 100% auto;padding: 140px 0 160px;}
#contents-interview-03 .inner-Box{width: 1281px;margin: 0 auto;padding: 0 3.2rem 0 5rem;}
#contents-interview-03 .inner-Box h2{font-size: 3.4rem;font-weight: bold;letter-spacing: 0.102rem;margin-left: 0px;margin-bottom: 59px;}
#contents-interview-03 .inner-Box h2 .f-en{font-size: 1.4rem;font-weight: bold;color: #0057AA;display: block;margin-bottom: 13px;position: relative;right: 6px;}
#contents-interview-03 .inner-Box h2 .f-en img{display: inline-block;margin: 0 15px 0 0;position: relative;top: -4px;left: 5px;}

#contents-interview-03 .inner-Box ul{ display: -webkit-box; display: -moz-flex; display: -ms-flex; display: -o-flex; display: -ms-flexbox; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -ms-flex-wrap: wrap; flex-wrap: wrap;}
#contents-interview-03 .inner-Box ul li{width: 23.4%;margin-right: 2.1%;background: #fff;border: 1px solid #D2D2D2;border-radius: 16px;padding: 23px 29px 28px 29px;}
#contents-interview-03 .inner-Box ul li:nth-child(4n){margin-right: 0;}
#contents-interview-03 .inner-Box ul li .yer{font-size: 1.4rem;font-weight: bold;margin-bottom: 15px;}
#contents-interview-03 .inner-Box ul li .yer span{display: block;background: #0057AA;border-radius: 30px;color: #fff;text-align: center;padding: 7px;}
#contents-interview-03 .inner-Box ul li h3{font-size: 1.8rem;font-weight: bold;letter-spacing: 0.09rem;margin-bottom: 11px;color: #0057AA;}
#contents-interview-03 .inner-Box ul li p.ytext{ font-size: 1.5rem; letter-spacing: 0.075rem; line-height: 1.8; margin-right: 1px; }


#contents-interview-04{padding: 140px 0 100px;}
#contents-interview-04 .inner-Box{max-width: 1281px;margin: 0 auto;padding: 0 3.2rem 0 5rem;}
#contents-interview-04 .inner-Box h2{font-size: 3.4rem;font-weight: bold;letter-spacing: 0.102rem;margin-left: 0px;margin-bottom: 98px;}
#contents-interview-04 .inner-Box h2 .f-en{font-size: 1.4rem;font-weight: bold;color: #0057AA;display: block;margin-bottom: 13px;position: relative;right: 6px;}
#contents-interview-04 .inner-Box h2 .f-en img{display: inline-block;margin: 0 15px 0 0;position: relative;top: -4px;left: 5px;}
#contents-interview-04 ul{border-left: #0057AA 1px solid;position: relative;margin-left: 195px;}
#contents-interview-04 ul li{position: relative;top: -10px;padding: 0px 350px 0 37px;margin-bottom: 45px;}
#contents-interview-04 ul li.imgac{ min-height: 220px; }
#contents-interview-04 ul li .time{position: absolute;top: 1px;left: -96px;font-size: 2rem;font-weight: bold;}
#contents-interview-04 ul li .time::before{content: "";display: block;width: 14px;height: 14px;border-radius: 50%;background: #0057AA;position: absolute;top: 4px;left: 84px;border: 4px solid #fff;}
#contents-interview-04 ul li h3{font-size: 2rem;font-weight: bold;color: #0057AA;margin-bottom: 12px;}
#contents-interview-04 ul li .sctext{font-size: 1.6rem;letter-spacing: 0.08rem;line-height: 2;}
#contents-interview-04 ul li figure{position: absolute;top: 0;right: 100px; overflow: hidden; border-radius: 50%;}


#contentsdeplist{background: #F3F5FA;}
#contentsdeplist .inner-Box{max-width: 1260px;margin: 0 auto;padding: 91px 3rem 117px;}
#contentsdeplist .inner-Box h2.ttl{font-size: 2.8rem;letter-spacing: 0.14rem;font-weight: bold;text-align: center;color: #0057AA;margin-bottom: 54px;}
#contentsdeplist .inner-Box .system-list{display: -webkit-box;display: -moz-flex;display: -ms-flex;display: -o-flex;display: -ms-flexbox;display: flex;-webkit-box-lines: multiple;-moz-box-lines: multiple;-ms-flex-wrap: wrap;flex-wrap: wrap;}
#contentsdeplist .inner-Box .system-list li a{width: auto;text-align: left;padding-bottom: 52px;}
#contentsdeplist .inner-Box .system-list li{width: 23.5%;margin-right: 2%;}
#contentsdeplist .inner-Box .system-list li:nth-child(4n){margin-right: 0;}
#contentsdeplist .inner-Box .system-list li .img {width: 100%;aspect-ratio: 282 / 350;overflow: hidden;text-align: center;overflow: hidden;border-radius: 19px;margin-bottom: 9px;position: relative;}
#contentsdeplist .inner-Box .system-list li .img img { width: 100%; height: 100%; object-fit: cover; display: block; }
#contentsdeplist .inner-Box .system-list li h3{text-align: left;color: #0057AA;font-size: 2.2rem;font-weight: bold;letter-spacing: 0.31rem;margin-bottom: 2px;}
#contentsdeplist .inner-Box .system-list .systext{font-size: 1.3rem;line-height: 1.8;letter-spacing: 0.065rem;color: #647381;}
#contentsdeplist .inner-Box .system-list a.link-arr .post-arrow{ top: auto; bottom: 2px; right: 0; }
#contentsdeplist .inner-Box .system-list li .img span{width: 100%;display: block;font-size: 1.8rem;z-index: 3;position: absolute;bottom: 0;left: 0px;text-align: left;padding: 20px;color: #fff;font-weight: bold;}


}

@media screen and (min-width:768px) and ( max-width:1300px) {


}

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

    header{position: absolute;z-index: 3;width: 100%;}
    #interview .onecol-contents{max-width: 100%;padding: 0;}
    #interview .seo_bread_list{}
    
    #contents-interview-main{position: relative;margin-bottom: -0.07vw;}
    #contents-interview-main .img{padding-top: 2vw;}
    #contents-interview-main .img img{ width: 100%; height: auto; }
    #contents-interview-main h1{font-size: 8.00vw;letter-spacing: -0.88vw;color: #fff;text-shadow: 0.0vw 0.0vw 0.52vw #00000080;position: absolute;top: 42.3vw;left: 50%;width: 74vw;z-index: 3;font-family: "ta-oonishi", sans-serif;font-weight: 300;font-style: normal;text-align: center;margin: 0 auto;transform: translateX(-50%);}
    #contents-interview-main span.entt{font-size: 2.93vw;letter-spacing: 0.23vw;font-weight: bold;position: absolute;bottom: 18.03vw;left: -3.77vw;transform: rotate(90deg);transform-origin: center;color: #fff;}
    #contents-interview-main span.entt::before{content: "";display: block;height: 0.27vw;width: 9.4vw;background: #fff;position: absolute;bottom: 2.3vw;left: 22.33vw;}
    
    
    #contents-interview-01{background: url(../images/interview/sp-contentsinterview01.svg)no-repeat top 51.33vw center;background-size: 100% auto;padding: 0vw 0 19.8vw;}
    #contents-interview-01 .inner-Box{  margin: 0 4vw; }
    :root{
    --w: 48.00vw;        /* カード幅 */
    --h: 58.67vw;        /* カード高さ */
    --angle: 10deg;    /* 扇の角度 */
    --shift: 18.67vw;     /* ← 12.8vw → 18.67vw に増やして距離を広げた */
    --lift: 2.67vw;      /* 少し持ち上げる量 */
    --dur: 0.7s;       /* ← STOP前提なので短くして自然に */
    --shadow: 0 3.73vw 8.0vw rgba(0,0,0,.16);
    }
    *{ box-sizing: border-box; }
    #contents-interview-01 .stage{position:relative;width:min(90vw, 0vw);height: clamp(64.0vw, 40vw, 96.0vw);display:grid;place-items:center;perspective: 100vw;width: 100vw;}
    /* カード共通 */
    #contents-interview-01 .card{position:absolute;width:var(--w);height:var(--h);/* display:grid; */place-items:center;border-radius: 3.2vw;color:#fff;font-weight:700;letter-spacing:.08em;box-shadow: var(--shadow);background:#0057AA;transform: translate(-50%, -50%);top:50%;left:50%;will-change: transform, box-shadow;opacity: 1;                /* ← 最初は透明にする（開始が自然） */transition: opacity .4s ease;}
    /* 軸の指定 */
    #contents-interview-01 .card--left{transform-origin: 185% 101%;}
    #contents-interview-01 .card--right{transform-origin: 97% 64%;width: 40.00vw;height: 44.80vw;}
    #contents-interview-01 .card--right{ background:#0057AA; overflow:hidden; }  
    /* ▼アニメーション（1回のみを想定） */
    @keyframes fanLeftOnce {
    0%   { transform: translate(-50%,-50%) rotate(0deg) translateX(0) translateY(0); }
    100% { transform: translate(-50%,-50%) rotate(calc(-1 * var(--angle))) translateX(calc(-1 * var(--shift))) translateY(calc(-1 * var(--lift))); }
    }
    @keyframes fanRightOnce {
    0%   { transform: translate(-50%,-50%) rotate(0deg) translateX(0) translateY(0); }
    100% { transform: translate(-50%,-50%) rotate(var(--angle)) translateX(var(--shift)) translateY(calc(-1 * var(--lift))); }
    }
    /* アニメーション開始用クラス */
    #contents-interview-01 .card.start-left { opacity: 1; animation: fanLeftOnce var(--dur) ease-out forwards; }
    #contents-interview-01 .card.start-right { opacity: 1; animation: fanRightOnce var(--dur) ease-out forwards; }
    
    #contents-interview-01 .cbox{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; }
    #contents-interview-01 .cbox h2{font-size: 2.67vw;letter-spacing: 0.85vw;margin-bottom: 1.6vw;}
    #contents-interview-01 .cbox p{font-size: 3.20vw;letter-spacing: 0.19vw;font-weight: 400;margin: 0 6vw 1.6vw;}
    
    
    #contents-interview-navi {margin: 0 auto 3vw;position: relative;}
    #contents-interview-navi .inner-Box {margin: 0 6.5vw;position: relative;}
    #contents-interview-navi .inner-Box ul.his-list {display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-box-lines: multiple;-moz-box-lines: multiple;-ms-flex-wrap: wrap;flex-wrap: wrap;-ms-flex-pack: center;/* justify-content: center; *//* -webkit-box-align: center; */-ms-flex-align: center;/* align-items: center; */}
    #contents-interview-navi .inner-Box ul.his-list li {position: relative;margin-bottom: 3.6vw;}
    #contents-interview-navi .inner-Box ul.his-list li a {display: inline-block;border: 0.27vw solid #D2D2D2;border-radius: 8.0vw;background: #F3F5FA;position: relative;padding: 0.67vw 7.13vw 0.67vw 3.9vw;margin-right: 1.47vw;transition: all 0.3s ease-in-out;}
    #contents-interview-navi .inner-Box ul.his-list li a:hover { background: #fff; }
    #contents-interview-navi .inner-Box ul.his-list li a .arr {position: absolute;top: -1.9vw;right: -3.2vw;transition: all 0.3s ease-in-out;width: 2.3vw;}
    #contents-interview-navi .inner-Box ul.his-list li a:hover .arr { top: 0vw;}
    #contents-interview-navi .inner-Box p.listtext {font-size: 2.93vw;line-height: 1.8;font-weight: 400;letter-spacing: 0.21vw;position: relative;}
    
    #contents-interview-02 .interview-block__content h3 {font-size: 5.33vw;margin-bottom: 3.57vw;color: #0057AA;letter-spacing: 0.32vw;font-weight: bold;line-height: 1.5;}
    #contents-interview-02 .interview-block__content .text {font-size: 3.73vw;line-height: 1.7;letter-spacing: 0.19vw;}
    #contents-interview-02 .interview-block__content p{ margin-bottom: 5.33vw;}
    #contents-interview-02 .interview-block__image img { width: 100%; height: auto; }
    
    #contents-interview-02 .interview-block {padding:  0;margin-bottom: 12.6vw;}
    #contents-interview-02 .interview-block__inner {}
    #contents-interview-02 .interview-block__image {}
    #contents-interview-02 .interview-block__content { margin: 0 6vw; padding-top: 4.1vw; }

    #contents-interview-02 .type-a .interview-block__image{border-radius: 0 2.33vw 2.33vw 0;overflow: hidden;margin-right: 6.4vw;}
    #contents-interview-02 .type-b .interview-block__image{border-radius: 2.33vw 0 0 2.33vw;margin-left: 6vw;overflow: hidden;}
    #contents-interview-02 .type-c .interview-block__image{ border-radius: 5.33vw; }
    
    
    
    #contents-interview-03{background: url(../images/interview/sp-contentsinterview02.svg)no-repeat top center #F3F5FA;background-size: auto 100%;padding: 12.23vw 0 10.67vw;}
    #contents-interview-03 .inner-Box{margin: 0 6.1vw;}
  #contents-interview-03 .inner-Box h2{font-size: 6.40vw;font-weight: bold;letter-spacing: 0.27vw;margin-bottom: 7.93vw;}
  #contents-interview-03 .inner-Box h2 .f-en{font-size: 3.20vw;font-weight: bold;color: #0057AA;display: block;margin-bottom: 1.47vw;position: relative;right: 1.6vw;}
  #contents-interview-03 .inner-Box h2 .f-en img{display: inline-block;margin: 0 4.0vw 0 0;position: relative;top: -0.8vw;left: 1.33vw;width: 2.7vw;}
    
    #contents-interview-03 .inner-Box ul{ display: -webkit-box; display: -moz-flex; display: -ms-flex; display: -o-flex; display: -ms-flexbox; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -ms-flex-wrap: wrap; flex-wrap: wrap;}
    #contents-interview-03 .inner-Box ul li{width: 100%;background: #fff;border: 0.27vw solid #D2D2D2;border-radius: 4.27vw;padding: 4.13vw 6.63vw 5.77vw;margin-bottom: 4.5vw;}
    #contents-interview-03 .inner-Box ul li:nth-child(4n){margin-right: 0;}
    #contents-interview-03 .inner-Box ul li .yer{font-size: 3.73vw;font-weight: bold;margin-bottom: 2.2vw;}
    #contents-interview-03 .inner-Box ul li .yer span{display: block;background: #0057AA;border-radius: 8.0vw;color: #fff;text-align: center;padding: 1.07vw;}
    #contents-interview-03 .inner-Box ul li h3{font-size: 4.27vw;font-weight: bold;letter-spacing: 0.24vw;margin-bottom: 1.13vw;color: #0057AA;}
    #contents-interview-03 .inner-Box ul li p.ytext{font-size: 3.73vw;letter-spacing: 0.19vw;line-height: 1.7;margin-right: 0.27vw;}
    
    
    #contents-interview-04{padding: 11.83vw 0 5.67vw;}
    #contents-interview-04 .inner-Box{margin: 0 6.4vw;}
    #contents-interview-04 .inner-Box h2{font-size: 6.40vw;font-weight: bold;letter-spacing: 0.07vw;margin-bottom: 9.13vw;}
    #contents-interview-04 .inner-Box h2 .f-en{font-size: 3.20vw;font-weight: bold;color: #0057AA;display: block;margin-bottom: 1.47vw;position: relative;right: 1.6vw;}
    #contents-interview-04 .inner-Box h2 .f-en img{display: inline-block;margin: 0 4.0vw 0 0;position: relative;top: -0.8vw;left: 1.33vw;width: 2.7vw;}
      #contents-interview-04 ul{border-left: #0057AA 0.37vw solid;position: relative;margin-left: 16vw;}
    #contents-interview-04 ul li{position: relative;top: -2vw;padding: 0.0vw 0.33vw 0 5.57vw;margin-bottom: 6vw;}
    #contents-interview-04 ul li.imgac{  }
    #contents-interview-04 ul li .time{position: absolute;top: 0.17vw;left: -16.6vw;font-size: 4.03vw;font-weight: bold;}
    #contents-interview-04 ul li .time::before{content: "";display: block;width: 2.73vw;height: 2.73vw;border-radius: 50%;background: #0057AA;position: absolute;top: 0.77vw;left: 14.1vw;border: 1.07vw solid #fff;}
    #contents-interview-04 ul li h3{font-size: 4.27vw;font-weight: bold;color: #0057AA;margin-bottom: 0.6vw;}
    #contents-interview-04 ul li .sctext{font-size: 3.73vw;letter-spacing: 0.21vw;line-height: 2;margin-bottom: 3vw;}
    #contents-interview-04 ul li figure{position: relative;top: 0;margin: 0 auto;width: 35.2vw; overflow: hidden; border-radius: 50%;}
    
    
    #contentsdeplist{background: #F3F5FA;}
    #contentsdeplist .inner-Box{padding: 12.27vw 6vw 31.2vw;}
    #contentsdeplist .inner-Box h2.ttl{font-size: 5.33vw;letter-spacing: 0.37vw;font-weight: bold;text-align: center;color: #0057AA;margin-bottom: 4.5vw;}
    #contentsdeplist .inner-Box .system-list{display: -webkit-box;display: -moz-flex;display: -ms-flex;display: -o-flex;display: -ms-flexbox;display: flex;-webkit-box-lines: multiple;-moz-box-lines: multiple;-ms-flex-wrap: wrap;flex-wrap: wrap;margin: 0 -2vw;}
    #contentsdeplist .inner-Box .system-list li a{width: auto;text-align: left;padding-bottom: 13.87vw;margin: 0;position: relative;}
    #contentsdeplist .inner-Box .system-list li{width: 48%;margin-bottom: 7.93vw;margin-right: 4%;}
    #contentsdeplist .inner-Box .system-list li:nth-child(2n){margin-right: 0;}
    #contentsdeplist .inner-Box .system-list li .img {width: 100%;aspect-ratio: 199 / 250;overflow: hidden;text-align: center;overflow: hidden;border-radius: 2vw;margin-bottom: 3.8vw;position: relative;}
    #contentsdeplist .inner-Box .system-list li .img img { width: 100%; height: 100%; object-fit: cover; display: block; }
    #contentsdeplist .inner-Box .system-list li h3{text-align: left;color: #0057AA;font-size: 2.67vw;font-weight: bold;letter-spacing: 0.29vw;margin-bottom: 2.73vw;}
    #contentsdeplist .inner-Box .system-list .systext{font-size: 3.20vw;line-height: 1.7;letter-spacing: 0.16vw;color: #647381;}
    #contentsdeplist .inner-Box .system-list a.link-arr .post-arrow{top: auto;bottom: 6.53vw;right: 2.9vw;display: block;background: #fff;border-radius: 50%;width: 9.07vw;height: 9.07vw;padding: 0.8vw 2.8vw 2.8vw;}
    
    #contentsdeplist .inner-Box .system-list li .img span{width: 100%;display: block;font-size: 3.20vw;z-index: 3;position: absolute;bottom: 0;left: 0.0vw;text-align: left;padding: 3.33vw;color: #fff;font-weight: bold;}
    
    
}