@charset "utf-8";

/* -----------------------------------------------------------
    全デバイス共通
----------------------------------------------------------- */

/* -----------------------------------------------------------
    ページ・エリア別
----------------------------------------------------------- */

/*-----------------------------------------------
  トップページ 
----------------------------------------------- */

.btn-black-none{
  width: 160px;
}
.btn-black-none a{
  pointer-events: none;
  cursor: default;
  display: flex;
  align-items: center;
}
.btn-black-none .arrow{
  display: none;
}

.top-message-about-section .flex-layout-01 .ja-title{
  margin-bottom: 1rem;
}

.top-mainvisual-section video {
  width: 100%;
}

.top-lead-section {
  width: 95%;
  margin: -40px 0 0 auto;
  padding: 8.0rem 4%;
  padding-bottom: 0rem;
  background: no-repeat var(--main-color);
  border-radius: 30px 0 0 0;
  position: relative;
}

.top-lead-section p {
  line-height: 1.8;
}

.top-culture-section {
  width: 95%;
  margin: 0 0 0 auto;
  padding: 5.0rem 4% 6.8rem;
  padding-top: 0rem;
  background: no-repeat var(--main-color);
  border-radius: 0 0 0 30px;
}

.top-culture-section img{
  width: 85%;
}
.top-culture-section .top-culture-text{
  margin-top: 4rem;
}

.top-message-about-section{
  margin-top: 7rem;
}

.top-message-about-section .img img{
  max-width: 478px;
}

.top-people-section .list-layout-02 > li img{
  aspect-ratio: 32/49;
}

.top-people-section{
  margin-top: 10rem;
}
.top-people-section .list-layout-02 .category01-bg {
  background: var(--category-color-01);
}
.top-people-section .list-layout-02 .category02-bg {
  background: var(--category-color-02);
}
.top-people-section .list-layout-02 .category03-bg {
  background: var(--category-color-03);
}

.top-people-section .flex-layout-02 {
  margin-bottom: 3rem;
}

.top-movie-section {
  margin-top: 0;
  padding: 5.0rem 0;
  padding-top: 0;
}

.top-movie-section .movie-wrap p{
  letter-spacing: 5px;
  margin-top: 1rem;
}

.top-project-story .figure {
  position: relative;
  margin-top: 5.0rem;
}

.top-project-story .figure .btn {
  position: absolute;
  left: 50%;
  bottom: 4.0rem;
  transform: translate(-50%, 0);
}

.top-footer-nav-area {
  padding: 4.0rem 0;
  margin-top: 12.0rem;
  padding-bottom: 12rem;
  border-radius: 50px 50px 0 0;
}

.lower main {
  padding-bottom: 12.0rem;
}

#top .page-footer-area {
  background-color: var(--main-color);
}

#top .page-footer-area .ja-text,
#top .page-footer-area .copy {
  color: #fff;
}

#top .page-footer-area .copy{
  font-size: 1.4rem;
}

.top-support-numbers-section .flex-layout-01{
  margin-top: 6rem;
}

.top-job-introduction-section .list-layout-01 > li{
  width: 100%;
  aspect-ratio: 100 / 86.6;
  max-width: 313px;
}

.top-job-introduction-section{
  margin-top: 9rem;
}
.top-job-introduction-section .list-layout-01 .center{
  justify-content: center;
  padding-top: 0;
}

.top-job-introduction-section .list-layout-01 .number{
  margin-left: 7rem;
  margin-right: 0;
}



.top-job-introduction-section .list-layout-01{
  gap: 2rem;
}


/* モーダルCSS */
.modalArea {
  display: none;
  position: fixed;
  z-index: 10; /*サイトによってここの数値は調整 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.modalBg {
  width: 100%;
  height: 100%;
  background-color: rgba(30,30,30,0.9);
}

.modalWrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform:translate(-50%,-50%);
  width: 90%;
  max-width: 800px; /* 動画用に少し大きくする */
  padding: 30px;
  background-color: #fff;
}

/* モーダルコンテンツ - アスペクト比を保つ */
.modalContents {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}

.modalContents iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.modalContents > p {
  position: relative;
  margin-top: 15px;
}

.closeModal {
  position: absolute;
  top: 0.5rem;
  right: 1rem;
  cursor: pointer;
}

.openModal {
  margin-top: 10px;
  padding: 10px 20px;
  color: #fff;
  border: none;
  cursor: pointer;
  transition: opacity 0.3s;
}


/* YouTubeサムネイルスタイル */
.movie-wrap {
  cursor: pointer;
  transition: transform 0.3s ease;
}

.movie-wrap:hover {
  transform: translateY(-5px);
}

.movie-thumbnail {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 5px;
  overflow: hidden;
}

.thumbnail-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.play-button-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  pointer-events: none; /* クリックイベントを親要素に渡す */
}

.play-button-icon {
  transition: transform 0.3s ease;
}

.movie-wrap:hover .play-button-icon {
  transform: scale(1.1);
}

.play-button-icon svg {
  width: 68px;
  height: 48px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

/* ホバー時のサムネイル効果 */
.movie-wrap:hover .thumbnail-image {
  filter: brightness(0.8);
}

/* 動画ラッパー - アスペクト比を保つ */
.video-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


/*-----------------------------------------------
  文化と社風
----------------------------------------------- */

#culture .inner-1300 {
  margin-top: 0rem;
}

#culture .flex-layout-01 .accent-bg-05, 
#culture .flex-layout-01 .accent-bg-04 {
  width: 95vw;
}

/* #culture .flex-layout-01 .text{
  max-width: 50%;
} */

.culture-section-fv img{
  max-width: 1180px;
  width: 100%;
}
.culture-section-01 .flex-layout-01{
  margin-top: 6rem;
}
.culture-section-01{
  margin-top: 0;
}
.flex-layout-01.list-item-01 .right.img{
  right: -30px;
}

.culture-section-01 .flex-layout-01.list-item-02{
  margin-top:-3rem;
}
.culture-section-01 .flex-layout-01.list-item-02 .right p{
  max-width: 550px;
}
#culture .flex-layout-01 .text p{
  max-width: 580px;
}
#culture .flex-layout-01 .img{
  max-width: 480px;
}
.culture-section-01 .flex-layout-01.list-item-04{
  margin-top: 0rem;
}
.culture-section-01 .flex-layout-01.list-item-05{
  padding: 5rem;
}
.culture-section-01.flex-layout-01.list-item-05 .right.img{
  top: 0rem;
}
#culture .flex-layout-01 .text {
  min-width: 623px;
}
/*-----------------------------------------------
  社員インタビュー
----------------------------------------------- */

.people-article-01 .white-bg {
  width: calc(100vw - 4.6%);
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  border-radius: 50px 0 0 50px;
}

#people main {
  overflow: hidden;
}

#people .inner-1500 {
  position: relative;
  z-index: 2;
}

.people-section-01 .list-layout-04{
  row-gap: 5rem;
}
.people-section-01 .list-layout-04 > li:first-of-type{
  position: relative;
  margin-left: 0;
}
.people-section-01 .list-layout-04 > li:first-of-type .ja-title-wrap{  
  position: absolute;
  width: 100vh;
}
.people-section-01 .small-display{
  display: none;
}
#people .article-wrap {
  margin-top: 2.0rem;
  padding: 6.0rem 4%;
}
#people .people-section-05 .list-layout-02{
  flex-wrap: wrap;
}
#people .people-section-05 .list-layout-02 > li{
  width: calc(100% / 4);
}
#people .people-section-05 .list-layout-02 > li img{
  aspect-ratio: 32/49;
}

.people-section-04 .right {
  margin-left: -10.0rem;
  width: 100%;
}

.people-section-05 {
  margin-top: 6.5rem;
}

.people-section-05 .title {
  margin-bottom: 2.0rem;
}

.message-section-01 .post-name-wrap {
  margin-top: 20.0rem;
}

.message-section-01.lower-fv-01 .en-title-ja-title-wrap {
  top: 0;
}

.message-section-01.lower-fv-01 .img {
  z-index: -1;
  top: 12.0rem;
}

.about-us-section-02{
  margin-top: 6rem;
}

.about-us-section-02 .flex-layout-06 .flex{
  top: 0rem;
}

.about-us-section-02 .btn a, .about-us-section-02 .btn a .btn-text, .about-us-section-02 .btn a .btn-text-hover{
  padding: 0.3rem 0 0.3rem 3.0rem;
}

.about-us-section-02 .img-layout-02 {
  margin-top: 6rem;
}

.about-us-section-03,
.about-us-section-04 {
  margin-top: 9.0rem;
}

.about-us-section-03 .flex-layout-06 .flex,
.about-us-section-04 .flex-layout-06 .flex{
  top: 0;
}

/*-----------------------------------------------
  職種紹介
----------------------------------------------- */
#job main {
  overflow: hidden;
  padding-bottom: 0;
}

#job .article-wrap {
  background: url(../image/job/job_12.png) repeat-y center center;
  background-size: 70%;
}

#job .bg {
  /* width: calc(100vw - 4.6%); */
  width: calc(100% - 6rem);
  height: 100%;
  position: absolute;
  top: 0;
}
#design.job-article-02 .white-op-bg{
  position: absolute;
    top: 210px;
    left: 0;
    height: 75%;
    z-index: 0;
    margin-right: calc(50% - 50vw);
    border-radius: 0 10px 10px 0;
    width: calc(100vw - 7%);
}

#job .bg.left {
  left: 0;
  border-radius: 0 50px 50px 0;
}

#job .bg.right {
  border-radius: 50px 0 0 50px;
}

#job .inner-1200 {
  position: relative;
  z-index: 2;
  max-width: none;
}

#job .article-wrap article {
  padding: 6.0rem 4%;
}

#job .dl-wrap-01 {
  margin-top: 16.0rem;
  max-width: 1242px;
}

#job .dl-wrap-01 .img-layout-01 {
  margin-top: -17.0rem;
}

#job .dl-wrap-01 .img-layout-01 img{
  max-width: 424px;
  margin: 0;
}

#job .dl-wrap-01 .dl-text {
  margin-top: 3.0rem;
  margin-left: 0;
  margin-right: 0;
  max-width: 100%;
}

#job .list-layout-02 {
  margin-top: 3.5rem;
}

#job .list-layout-02.two {
  gap: 6%;
}

#job .list-layout-02 > li {
  width: 230px;
}

#job .list-layout-02 > li{
  background-color: transparent;
}

#job .list-layout-02 > li img{
  border-radius: 10px;
  aspect-ratio: 1/1;
}

#job .flex-layout-08{
  margin-top: 4rem;
}

#job #management .dl-wrap-01,
#job #office .dl-wrap-01{
  padding: 4.0rem 4%;
}

#job #design .dl-wrap-01{
  padding-right: 3rem;
  padding-bottom: 4rem;
  width: 63vw;
}

.job-section-01 .inner-1300 {
  background: url(../image/job/job_01.png) no-repeat top center;
  background-size: 70%;
  padding-top: 37rem;
}

.job-section-01 .flex-box-03{
  width: 100%;
  gap: 3rem;
  margin-bottom: 5rem;
}

.job-section-01 .flex-box-03 .box{
  background: #F9C2AD 0% 0% no-repeat padding-box;
  border: 2px solid #FFFFFF;
  border-radius: 10px;
  flex: 1 1 auto;
  max-width: 295px;
}
.job-section-01 .flex-box-03 .box.box2{
  background: #A8DEF0 0% 0% no-repeat padding-box;
}
.job-section-01 .flex-box-03 .box.box3{
  background: #DAE6BA 0% 0% no-repeat padding-box;
}
.job-section-01 .flex-box-03 .box a{
  height: 100%;
  width: 100%;
  padding: 1.7rem 3rem;
  gap: 1rem;
}
.job-section-01 .flex-box-03 .box .title{
  padding-top: 8px;
}
.job-section-01 .flex-box-03 .box p{
  max-width: 233px;
  font-weight: normal;
}

.job-section-03 .dl-wrap-01 .white-op-bg {
  width: 100%;
  border-radius: 10px;
}
.job-section-02.flex-layout-04 .left .hexagon .center.pattern-01,
.job-section-03.flex-layout-04 .left .hexagon .center.pattern-01,
.job-section-04.flex-layout-04 .left .hexagon .center.pattern-01{
  width: 100%;
  padding: 0rem;
}

.job-section-05 {
  background: url(../image/job/job_12.png) repeat-y center bottom;
  padding: 12.0rem 0;
}

.job-section-05 .job-section-05-text {
  line-height: 1.3;
}

.job-section-05 .inner-1300 {
  padding: 7.0rem 4% 8.0rem;
}

.list-layout-02 .discription.category01-bg{
  background:var(--accent-color-17);
}

/*-----------------------------------------------
  キャリアサポート
----------------------------------------------- */

#support main {
  overflow: hidden;
}

#support section:not(.support-section-01) {
  padding: 6.0rem 0;
}

#support .section-wrap {
  margin-top: -27%;
}

.support-fv {
  padding-left: 30.0rem;
}

#support .section-wrap-bg {
  /* background: url(../image/support/support_01_bg.png) repeat-y left center; */
  position: absolute;
  top: 0;
  left: 30.0rem;
}
.support-section-02 .dl-wrap-01 {
  margin-top: 0;
}

#support .step-section {
  max-width: calc(1130px + 8%);
  margin: 12.0rem auto 0;
  padding: 0 4%;  box-shadow: 0 0 16px -3px rgba(0, 0, 0, 0.5);
}

#support .step-section:first-of-type {
  margin-top: 0;
}

#support .step-section.white {
  background-color: rgba(255, 255, 255, 0.95);
}

#support .step-section.orange {
  background-color: rgba(255, 225, 191, 0.95);
}

#support .step-section.green {
  background-color: rgba(214, 253, 205, 0.95);
}

#support .step-section.left {
  /* margin-left: auto; */
  border-radius: 30px;
}

#support .step-section.right {
  /* margin-right: auto; */
  border-radius: 30px;
}

#support .dl-wrap-01{
  padding: 4.0rem 4%;
}
.support-section-05 {
  padding-top: 0 !important;
}

.support-section-05 .inner-1000 {
  background: linear-gradient(to bottom, rgba(237, 224, 179, 1), rgba(211, 195, 127, 1));
  z-index: 1;
  border-radius: 30px;
  padding: 6.0rem 4%;
  box-shadow: 0 0 16px -3px rgba(0, 0, 0, 0.5);
}

.support-fv{
  padding-left: 0rem;
  position: absolute;
  width: 100%;
}
.support-fv img{
  width: 100%;
}
#support main{
  padding-bottom: 0rem;
  background: var(--gray-color-02);
}
#support .section-wrap{
  margin-top:35rem;
}

.support-bar-block .support-bar-block-wrapper{
  gap: 3.5rem;
  height: 100%;
  width: 100%;
}

.support-bar-item{
  width: 200px;
  text-align: center;
  color: #fff;
  font-size: 1.8rem;
  padding-top: 2rem;
  font-weight: bold;
}
.support-bar-block{
  height: 100%;
  width: 100%;
  position: absolute;
}
.support-bar-item.item_01{
  background: #EF203F;
}
.support-bar-item.item_02{
  background: #25ACD9;
}
.support-bar-item.item_03{
  background: #25BA00;
}
.support-bar-item.item_04{
  background: #FC900D;
}
#support .step-section{
  top: 8rem;
  margin-top: 3.5rem;
}
#support section:not(.support-section-01){
  padding: 0;
}
#support .dl-img{
  max-width: 258px;
}
#support .dl-wrap-01 .dl-title-wrap{
  margin-right: 0rem;
}
#support .dl-wrap-01{
  gap: 3rem;
}
.support-section-03 .dl-img{
  display: flex;
  align-items: center;
}
#support .dl-wrap-01 .dl-title-wrap{
  min-width: 230px;
  text-align: center;
}
#support .dl-wrap-01 .dl-title-wrap .rounded{
  border-radius: 10px;
    padding: 0.5rem 3.0rem;
}
.dl-wrap-01 .dl-text-dt.rounded{
  max-width: fit-content;
  min-width: 300px;
}
.support-section-05 .inner-1000{
  background: rgba(235, 217, 168, 0.95);
  padding: 3.5rem 11rem;
}
#support section.support-section-05{
  padding-bottom: 20rem;
  top: 8rem;
}
ul.support-list{
  margin-top: 1.5rem;
}
ul.support-list li:not(:first-of-type){
  margin-top: 0.5rem;
}
ul.support-list li {
  position: relative;
  padding-left: 2rem;
}
ul.support-list li::before {
  content: "●";
  position: absolute;
  left: 0;
  color: var(--text-color);
  font-size: 1.8rem;
  line-height: 1;
  margin-top: 4px;
}
.support-section-02 .dl-wrap-01 .dl-text-wrap,
.support-section-03 .dl-wrap-01 .dl-text-wrap{
  max-width: none;
  width: 50%;
}
.support-section-03 .dl-text-wrap .dl-text{
  margin-top: 1.5rem;
}
.support-section-05 .inner-1000{
  max-width: calc(1130px + 8%);
}
.support-section-06 .dl-wrap-01 .dl-text-wrap{
  max-width: none;
}

/*-----------------------------------------------
  新卒採用情報
----------------------------------------------- */

.fresh-section-01 .img {
  padding: 10.0rem 4% 0;
}

.fresh-section-02 .bg-img {
  width: 100%;
  margin-top: -11.0rem;
}

.fresh-section-02 .title {
  margin-bottom: 4.0rem;
}

.fresh-section-03{
  margin-top: 1rem;
}
.fresh-section-03 .title {
  margin-bottom: 4.0rem;
}

.fresh-section-04{
  margin-top: 6rem;
}
.fresh-section-04 .title {
  margin-bottom: 4.0rem;
}
#fresh.lower main{
  padding-bottom: 2rem;
}
#fresh .dl-layout-02 .dd .dd-text,
#career .dl-layout-02 .dd .dd-text{
  font-size: 1.8rem;
}

/*-----------------------------------------------
  社員座談会
----------------------------------------------- */

#cross-talk #wrapper {
  background: url(../image/cross-talk/cross-talk-bg.png) repeat-y top center;
  background-size: 100%;
}
#cross-talk.lower main{
  padding-bottom: 10rem;
}

.cross-talk-section-01 .img {
  bottom: -6.0rem;
  margin-bottom: 12.0rem;
  z-index: 2;
}
.cross-talk-anchor-section .flex-box-04{
  gap: 2rem;
}

.cross-talk-anchor-section .flex-box-04 .box{
  flex: 1;
  background: #FCBC00 0% 0% no-repeat padding-box;
  border: 2px solid #FFFFFF;
  border-radius: 2px;
}
.cross-talk-anchor-section .flex-box-04 .box.box2{
  background:#F95A00;
}
.cross-talk-anchor-section .flex-box-04 .box.box3{
  background:#89C606;
}
.cross-talk-anchor-section .flex-box-04 .box.box4{
  background:#28A9DB;
}

.cross-talk-anchor-section .flex-box-04 .box a{
  padding:1rem 0rem;
}

.cross-talk-anchor-section .flex-box-04 .box .title{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: 100%;
  height: 100%;
  line-height: 1.4;
}

.cross-talk-section-02 .list-layout-08 li{
  gap: 5rem;
}

/*-----------------------------------------------
  キャリア採用情報
----------------------------------------------- */
#career .accent-bg-06{
  background: #FFF3A6;
}
#career.lower main {
  padding-bottom: 4rem;
}

.career-section-02 {
  margin-top: 1.0rem;
}

.career-section-02 .circle-title{
  z-index: 3;
  margin-left: 10%;
}

.career-section-02 .inner-1500{
  padding-bottom: 20rem;
  overflow: hidden;
}
.career-section-02 .inner-1500 .d-block.absolute{
  bottom: 0;
  z-index: 0;
  width: 90%;
  left: 50%;
  transform: translate(-50%, 0%);
}

.career-section-02 .inner-1500 .list-layout-10{
  z-index: 3;
}

.career-section-03 .circle-title {
  margin-left: auto;
  margin-right: 18%;
}

.career-section-03{
  margin-top: 0;
}

.career-section-03 .inner-1200{
  margin-top: -15rem;
}

.career-section-03 .text {
  margin-top: 2rem;
  line-height: 2;
}

.career-section-04 .circle-title {
  margin-bottom: 4.0rem;
  z-index: 1;
}

.career-section-04 .circle-title {
  margin-left: 8.0rem;
  margin-bottom: -6.0rem;
}
.career-section-04 .dl-layout-02{
  padding: 0;
  padding-top: 3rem;
  border-radius: 30px;
}

/*-----------------------------------------------
  FAQ よくある質問
----------------------------------------------- */
.faq-section-01 {
  z-index: 1;
  height: 8rem;
}

.faq-section-02 {
  z-index: 2;
  margin-top: clamp(10rem, 23vw, 41rem);
}
.faq-section-03{
  z-index: 3;
}

#faq .dl-layout-03 {
  padding-top: 3rem;
}

#faq .lower-fv-01 .en-title{
  margin-bottom: 0rem;
  margin-top: 4rem;
}
#faq .lower-fv-01 .ja-title{
  margin-top: 1.4rem;
}



/*-----------------------------------------------
  エントリー
----------------------------------------------- */

.fresh-entry-section-01,
.career-entry-section-01 {
  height: 25.0rem;
}

.fresh-entry-section-02,
.career-entry-section-02 {
  margin-top: 0;
}

.wpforms-container .wpforms-form .wpforms-field-label{
  margin-bottom: 1rem!important;
}
.wpforms-container .wpforms-field {
  padding: 15px 0!important;
}

/*-----------------------------------------------
  社員インタビュー
----------------------------------------------- */

.people-article-01 .flex-layout-04 .left .hexagon .center.pattern-01{
  min-width: 100px;
}
.people-section-01 .inner-1500{
  max-width: 100%;
}
#people .flex-layout-05-figure img{
  border-radius: 10px;
}

.people-section-04.flex-layout-04{
  margin-top: 6rem;
}

.people-section-04 .dl-text .dl-text-dt{
  margin-bottom: 2rem;
}

.people-section-04 .dl-wrap-01 .dl-text {
  max-width: 520px;
}
.flex-layout-04 .right .main-visual{
  border-radius: 10px;
}
/*-----------------------------------------------
  事業の強み
----------------------------------------------- */

.about-us-section-03 .img{
  margin-top: 8rem;
}

.about-us-section-04 .img{
  margin-top:12rem;
}

#about-us #wrapper{
  background: #FCF4C0;
}

/*-----------------------------------------------
  代表メッセージ
----------------------------------------------- */
#message .text{
  letter-spacing: 0.04em;
  line-height: 2em;
  font-size: 16px;
}
#message .message-section-03 .text{
  letter-spacing: 0.049em;
}
#message section{
  margin-top: 6rem;
}
#message .inner-1000{
  max-width: calc(920px + 8%);
}
.message-section-03 img{
  width: 87%;
}

@media screen and (max-width:470px) {
  #message .en-title-ja-title-wrap .en-title{
    font-size: 3rem;
  }
  #message .en-title-ja-title-wrap .ja-title{
    font-size: 2rem;
    margin-top: 2rem;
  }
}


/*-----------------------------------------------
  プロジェクトストーリー
----------------------------------------------- */
.project-date-text {
  /* 最小1.2rem | SP:〇〇rem | TB:〇〇rem | PC:〇〇rem | 最大25.0rem */
font-size: clamp(1.2rem, calc(13vw + 0.1rem), 25.0rem);
margin-top: 4.0rem;
}
#project.lower main{
  padding-bottom: 3rem;
}
.project-section-03 .block + .block {
margin-top: 18.0rem;
}

.project-section-03 .border-text {
padding: 10.0rem;
border: 1px solid var(--main-color);
border-radius: 60px;
max-width: 95.0rem;
margin-top: -4.0rem;
z-index: -1;
}

.project-section-03 .border-text.back {
z-index: -2;
}

.project-section-03 .overlap-img {
margin-top: -4.0rem;
z-index: -2;
}

.project-section-03 .normal-text {
margin-top: 6.0rem;
}

.project-section-03 .full-img {
  width: 100%;
  margin-top: 7.0rem;
}
.project-section-03 .full-img.img-1080 {
  width: 80%;
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
}

.lower-fv-02 .lower-fv-02-inner{
  max-width: 830px;
}
#project .rounded-title-03{
  padding: 3rem 7rem;
  width: fit-content;
}

.project-section-03 .border-text{
  padding: 4rem 3rem;
  margin-top: 3rem;
}

.project-section-03 .border-text{
  max-width: 96.5rem;
}

.project-section-03 .block-img-wrapper{
  justify-content: center;
  gap: 3rem;
}

.project-section-03 .block + .block{
  margin-top: 6rem;
}

.project-section-03 .border-text{
  left: 50%;
  transform: translateX(-50%);
}

.project-section-03 .block:nth-of-type(1) .border-text.back{
  left: 40%;
}

.project-section-03 .block:nth-of-type(2) .border-text{
  left: 40%;
}

.project-section-03 .block:nth-of-type(2) .border-text.back{
  left: 50%;
}

.project-section-03 .block:nth-of-type(6) .border-text{
  left: 55%;
}


/*-----------------------------------------------
数字で見る日新工営
----------------------------------------------- */

.number-section-01 .en-title-ja-title-wrap{
  background: rgba(255, 255, 255, 0.53) ;
}

.number-section-02 .bg{
  background:#DEE9C2;
}

.flex-layout-07{
  padding: 4rem 0;
}

.flex-layout-07 .ja-title{
  margin-bottom: 3rem;
}
.dl-layout-01 .dt-dd-wrap{
  padding: 2rem;
}
.number-section-02 .dl-layout-01 .left{
  margin-right: 0;
  width: 30%;
}
.number-section-02 .dl-layout-01 .right{
  width: 70%;
}
.number-section-02 .dl-layout-01 .dt{
  margin-bottom: -1rem;
}
.dl-layout-01 .right .dt-dd-wrap{
  margin-bottom: 0;
}
.number-section-03 .bg{
  background:#FCF4C0;
}
/* グラフ */
.inner-block {
  padding: 50px 20px;
}

.c-ttl01 {
  font-size: 28px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 50px;
}

.graph-wrap {

  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}
.ttl {
  color: #333;
  font-size: 40px;
  font-weight: bold;
}

.graph-circle {
  transform:rotate(-90deg);
  height: 400px;
  width: 400px;
  margin: auto;
  position: relative;
}
.graph-circle circle {
  fill: none;
  stroke-width: 8px;
  position: relative;
}

.graph-anime1.is-active {
  stroke: #233783;
  stroke-dashoffset: 0;
  animation: anime01 1.5s 0s forwards ease-in-out;
}

.graph-anime2.is-active {
  stroke: #EF6632;
  stroke-dasharray: 0,100;
  stroke-dashoffset: 60;
  animation: anime02 1.5s 0.7s forwards ease-in-out;
}

@keyframes anime01 {
  0% {
    stroke-dasharray: 0,100;
  }
  50%, 100% {
    stroke-dasharray: 42,100;
  }
}
@keyframes anime02 {
  0% {
    stroke-dasharray: 0,100;
  }
  50%, 100% {
    stroke-dasharray: 59,42;
  }
}

.gap-area {
  position: absolute;
  top: -65px;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 325px;
  height: 325px;
}
.gap-area .gap {
  background: #fff;
  height: 162px;
  width: 10px;
  position: absolute;
  top: 0;
  left: -8px;
  right: 0;
  margin: auto;
  transform: rotate(-1deg);
}
.gap-area .gap:nth-child(2) {
  transform: rotate(-37deg);
  bottom: -185px;
  right: -143px;
  left: inherit;
}
.gap-area .gap:nth-child(3) {
  transform: rotate(70deg);
  bottom: -60px;
  right: inherit;
  left: -168px;
}
.gap-area .gap:nth-child(4) {
  transform: rotate(-38deg);
  top: 1px;
  right: inherit;
  left: -128px;
}

.dl-layout-01 .dd .img{
  left: 50%;
  transform: translate(-50%,0);
}

.dl-layout-01 .dd .text-wrap-01{
  margin-right: 2rem;
}

.dl-layout-01 .dd .text-wrap-02{
  margin-left: 2rem;
}

.dl-layout-01{
  padding-right: 3%;
}

.dl-layout-01 .right .dt-dd-wrap .dt{
  margin-bottom: 0.5rem;
}

.dl-layout-01 .dt-dd-wrap{
  padding: 4rem 6rem; 
  border-radius: 20px;
}

.dl-layout-01 .right .w-100-btn a{
  padding: 2.8rem 1.5rem;
}
.number-section-02 .dl-layout-01 .dt-dd-wrap{
  padding: 2rem;
  width: auto;
}
.number-section-03 .dl-layout-01 .dt-dd-wrap{
  padding: 2rem;
  width: auto;
}
.number-section-03 .dl-layout-01 .dt-dd-wrap.w-one-third{
  width: calc((100% / 3) - 20px);
}
.number-section-03 .dl-layout-01 .dt-dd-wrap.w-6per{
  width: calc(60% - 20px);
  min-height: 370px;
}
.number-section-03 .dl-layout-01 .dt-dd-wrap.w-4per{
  width: calc(40% - 20px);
  min-height: 370px;
}
.number-section-03 .dl-layout-01 .icon{
  min-height: 112px;
}

.number-section-03 .dl-layout-01 .dt{
  line-height: 1;
}

.number-section-03 .dl-layout-01{
  padding-right: 0;
  justify-content: space-between;
  row-gap: 3rem;
}

.number-section-03 .w-one-third{
  width: calc(100% / 3);
}
.dl-layout-01 .number-block_04 .dt{
  margin-bottom: 3rem;
}
.dl-layout-01 .number-block_05 .dt{
  margin-bottom: 3rem;
}
.dl-layout-01 .number-block_05 .dd img{
  padding: 0 6%;
}
.dl-layout-01 .number-block_04 .left{
  margin-right: 0rem;
  min-width: 299px;
}

.dl-layout-01 .number-block_04 .right{
  padding-left: 1rem;
}

.fixed-height-400{
  min-height: 400px;
}

.dl-layout-01 .number-block_06 .dd .flex{
  padding: 0 3rem;
}

.number-section-03 .dl-layout-01 .number-block_06{
  padding-bottom: 0rem;
} 

.number-section-03 .number-block_07{
  min-height: 400px;
}
.number-section-03 .number-block_07 .left{
  margin-right: 0;
  gap: 2rem;
  min-width: 323px;
}
.number-section-03 .number-block_07 .dd{
  padding: 0 6rem;
}

.number-section-03 .number-block_07 .left .block{
  width: 150px;
}
.w-6per{
  width: 60%;
}
.number-section-03 .number-block_06 .left .block:nth-of-type(2){
  margin-top: 2rem;
}
.number-section-02 .dl-layout-01{
  padding-right: 0;
  gap: 7rem;
}
.number-section-03 .number-block_04 .block01{
  margin-bottom: 4rem;
}