@charset "UTF-8";


.works .section  {
  overflow: hidden
}

.works .section .head-primary, .ippan .section .head-primary, .denryoku .section .head-primary, .other .section .head-primary {
  font-size: 98.7px;
  opacity: .03
}

.works .section .between, .ippan .section .between, .denryoku .section .between, .other .section .between {
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center
}



.works .ttl-main, .ippan .ttl-main, .denryoku .ttl-main, .other .ttl-main {
  line-height: 1.5
}

.workstopbg {
    background-image: url(/recruit/assets/images/works/workstop-bg.jpg) !important;
 background-size: cover;
  position: relative;
  z-index: 0;
  overflow: hidden;
}
.works01bg {
    background-image: url(/recruit/assets/images/works/works01-bg.jpg) !important;
 background-size: cover;
  position: relative;
  z-index: 0;
  overflow: hidden;
}
.works02bg {
    background-image: url(/recruit/assets/images/works/works02-bg.jpg) !important;
 background-size: cover;
  position: relative;
  z-index: 0;
  overflow: hidden;
}
.works03bg {
    background-image: url(/recruit/assets/images/works/works03-bg.jpg) !important;
 background-size: cover;
  position: relative;
  z-index: 0;
  overflow: hidden;
}
.works04bg {
    background-image: url(/recruit/assets/images/works/works04-bg.jpg) !important;
 background-size: cover;
  position: relative;
  z-index: 0;
  overflow: hidden;
}
.works05bg {
    background-image: url(/recruit/assets/images/works/works05-bg.jpg) !important;
 background-size: cover;
  position: relative;
  z-index: 0;
  overflow: hidden;
}
.works06bg {
    background-image: url(/recruit/assets/images/works/works06-bg.jpg) !important;
 background-size: cover;
  position: relative;
  z-index: 0;
  overflow: hidden;
}

.workstopbg:before,.works01bg:before,.works02bg:before,.works03bg:before,.works04bg:before,.works05bg:before,.works06bg:before {
content: '';
  background: inherit;
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(2px);
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  z-index: -1;
}

@media screen and (max-width: 736px) {
    .workstopbg .head ,.works01bg.head,.works02bg.head,.works03bg.head,.works04bg.head,.works05bg.head,.works06bg.head{
        top: auto;
        bottom: 10px;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }
}


@media screen and (max-width: 1366px) and (max-width: 1024px) and (max-width: 736px) {
    .workstopbg,.works01bg,.works02bg,.works03bg,.works04bg,.works05bg,.works06bg {
        height: 240px;
        background-position: center top;
        background-size: auto 50%;
		 margin-top: 80px !important;
    }
}

@media screen and (max-width: 1366px) and (max-width: 1024px) {
    .workstopbg,.works01bg,.works02bg ,.works03bg ,.works04bg ,.works05bg ,.works06bg   {
        min-width: 0;
    }
}

.works-intro-contents{
display:flex;
justify-content:center;
padding:3em 0;
}

@media (max-width: 768px) {
.works-intro-contents{
display:block;
}
}

.works-intro-contents .works-kinds{
    padding: 1.5em;
}


.works-intro-contents .txt-small {
    font-size: 17px;
    letter-spacing: .05em;
    color: #fff;
    width: 100%;
    padding: 5px 0 5px 1em;
	font-weight: bold;
}


.works-intro-contents .works-kinds img{
    padding: 0 0 1.5em 0;
}

@media (max-width: 768px) {
.works-intro-contents .works-kinds img{
width:100%
}
}

.works-intro-contents .works-kinds a.button01 {
    display: flex;
    /*justify-content: center;*/
    align-items: center;
    width: 100%;
    height: 30px;
    position: relative;
    box-sizing: border-box;
    padding: 20px 25px 20px 50px;
    font-size: 17px;
    letter-spacing: 0.1em;
    line-height: 1.3;
    text-align: left;
    text-decoration: none;
    transition-duration: 0.3s;
	    border-bottom: 1px dotted #a7a5a5;
		  background: #fff;
  color: #228bc8;

}

@media (max-width: 768px) {
.works-intro-contents .works-kinds a.button01 {
    margin: 0;
}
}


.works-intro-contents .works-kinds a.button01:after {
 content: '';
  width: 8px;
  height: 8px;
  border: 0;
  border-top: 2px solid #228bc8;
  border-right: 2px solid #228bc8;
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  left: 25px;
  margin-top: -6px;
}
.works-intro-contents .works-kinds a.button01:hover {
    background: #d5d5d5;
    color: #263558;
}
.works-intro-contents .works-kinds a.button01:hover:before {
  border-top: 2px solid #228bc8;
  border-right: 2px solid #228bc8;
}

.works-intro-contents .works-kinds .graduate {
    font-size: 13px;
    padding: 0 0 0 1em;
    align-self: center;
}





.works-main-contents {
width:85%;
margin:0 auto;
}

.works-main-contents .ttl-sub{
    font-size: 65px;
    line-height: 1.8;
    font-weight: bold;
    letter-spacing: .03em;
    font-family: 'TTNormsPro-MediumItalic', sans-serif;
    color: #203156;
    font-style: italic;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1;
}

@media (max-width: 768px) {
.works-main-contents .ttl-sub{
    line-height: 1.4;
	    font-size: 30px;
}
}


.works-main-contents h2 {
    font-size: 28px;
	    line-height: 1.5;
    color: #263558;
    font-weight: bold;
    letter-spacing: .03em;
	text-align:center;
	padding:0 0 0 0;
}


.works-main-contents p {
font-size: 16px;
    font-weight: normal;
    line-height: 1.8;
    text-align: justify;
}

.works-main-contents p.works-intro-text{
padding:3em 8em 0 8em;
}

@media (max-width: 768px) {
.works-main-contents p.works-intro-text{
padding:0.5em;
}}


.works-main-contents ul.works-intro-text {
  font-weight: normal;
    line-height: 1.8;
    text-align: justify;
    padding: 1.5em 13em 0 15em;
}

@media (max-width: 768px) {
.works-main-contents ul.works-intro-text {
		  padding: 0 2em;
}
}


.works-main-contents ul.works-intro-text li {
list-style-type:disc;
font-size:16px;
}


.works-top-subheadline{
max-width: 800px;
    margin: 0 auto;
	    display: flex;
		  align-items: center; /* 縦方向の中央揃え */
		  padding: 1.5em 0 0 0;
}

@media (max-width: 768px) {
.works-top-subheadline{
		  padding: 1.5em 1.5em 0 1.5em;
		  display:block;
}
}


.works-top-subheadline p{
    width: 20%;
    color: #fff;
    TEXT-ALIGN: center;
    font-size: 17px;
	    font-weight: bold;
}

@media (max-width: 768px) {
.works-top-subheadline p{
        width: auto;
		padding:0.3em
}
}

.works-top-subheadline p.sub{
   color: #333;
  font-size: 15px;
    font-weight: normal;
    width: fit-content;
	    background-color: #e9e8e8;
    padding: 0.5em 1em;
    margin: 0 0 0 1em;
    border-radius: 10px;
	}
	
	@media (max-width: 768px) {
.works-top-subheadline p.sub{
		  width:100%;
		  margin:0.5em 0 0.5em 0;
}
}

.works-main-contents .onedayschedule  {
padding: 6em 0;
}

.works-main-contents .onedayschedule .skd-wrap {
    margin: 5em 0 3em 11em;
}

.works-main-contents .onedayschedule .timeline {
  font-size: 1.25rem;
  line-height: 2;
}



.works-main-contents .onedayschedule .skd-wrap .timeline li {
    position: relative;
    padding: 0 0 30px 2.5em;
    border-left: 1px solid #203156;
}

.works-main-contents .onedayschedule .skd-wrap .timeline li::before {
    content: "";
    position: absolute;
    top: 0;
    left: -10px;
    width: 20px;
    height: 20px;
    border-radius: 40px;
    background: #203156;
}
.works-main-contents .onedayschedule .skd-wrap .timeline li:last-child {
    border-left: none;
}
.works-main-contents .onedayschedule .skd-wrap .timeline li .time {
    font-family: "Roboto", sans-serif;
    font-weight: bold;
	    margin-left: -8em;
    float: left;
}

.works-main-contents .onedayschedule .skd-wrap .timeline li h4 {
    letter-spacing: 0.1em;
font-size: 16px;
padding: 0.5em;
    border-radius: 8px;
	background-color: #f7f7f7;
	font-weight:bold;
	}



.works-main-contents .careerplan{
padding:6em 0;
width:93%;
}

@media (max-width: 768px) {
.works-main-contents .careerplan{
width:100%;
}}



.works-main-contents .careerplan p.attenion{
    color: red;
    padding: 1em 0 0 0;
}

.works-main-contents .careerplan .careerplan-main-contents{
display:flex;
padding:2em;
}

@media (max-width: 768px) {
.works-main-contents .careerplan .careerplan-main-contents{
display:block;
}

.works-main-contents .careerplan .careerplan-main-contents img{
width:95%!important;
padding:1em 0;
}
}



.works-main-contents .careerplan .careerplan-main-contents .careerplan-how{
}

.works-main-contents .careerplan .careerplan-main-contents .careerplan-how img{
width: 80%;
}

@media (max-width: 768px) {
.works-main-contents .careerplan .careerplan-main-contents .careerplan-how{
padding:0 0 1em 0;
}
}

.works-main-contents .careerplan .careerplan-main-contents .careerplan-pic{
}


.works-main-contents .careerplan .careerplan-main-contents .careerplan-pic {
  position: relative;
  width: 100%; /* 画面幅に対応 */
  max-width: 400px; /* 最大幅を設定 */
  height: auto;
  aspect-ratio: 4 / 3; /* 横4:縦3の比率を維持 */
}

.works-main-contents .careerplan .careerplan-main-contents .careerplan-pic .image1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
}

.works-main-contents .careerplan .careerplan-main-contents .careerplan-pic .image2 {
  position: absolute;
  top: 56%;
  left: 100%;
  width: 90%;
  height: auto;
  transform: translate(-50%, -50%);
}

/* スマホ対応 */
@media (max-width: 768px) {
.works-main-contents .careerplan .careerplan-main-contents .careerplan-pic .image1 {
 position: static;
  }
.works-main-contents .careerplan .careerplan-main-contents .careerplan-pic .image2 {
 position: static;
transform: none;
}

}












 /* page-animation.css  workpage-animation*/

/* ページ全体をアニメーションするためのスタイル */
.workpage-animation {
  transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;  /* アニメーションに透明度を追加 */
  position: relative;
  overflow: hidden;
  opacity: 1; /* 初期状態では完全に不透明 */
}

/* 右から左に流れるアニメーション */
.workpage-animation.next {
  transform: translateX(100%); /* 画面外に出す */
  opacity: 0; /* 透明にする */
}

/* 左から右に流れるアニメーション */
.workpage-animation.prev {
  transform: translateX(-100%); /* 画面外に出す */
  opacity: 0; /* 透明にする */
}

/* ページが動き終わった時にアニメーションをリセット */
.workpage-animation.stay {
  transform: translateX(0); /* 元の位置に戻す */
  opacity: 1; /* 不透明に戻す */
}


/* p-pager-section をページ横幅いっぱいに広げる */
#p-pager-section {
  width: 100%;
  position: relative;
    padding: 0 20px 20px 20px;
    z-index: 10; /* 他の要素より上に配置 */
}

	@media (max-width: 768px) {
#p-pager-section {
	    padding: 0 20px 5px 20px;
}
}


/* sectionを重ねる */
.section.person-intro.c-change {
  position: relative;
  z-index: 5; /* p-pager-section より下に配置 */
  margin-top: -85px;  /* 上に85pxだけ移動して重ねる */
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  /* スマホやタブレットの画面では重ねないようにする */
  .section.person-intro.c-change {
    margin-top: 0; /* 重ねないようにする */
    z-index: 1; /* z-indexを解除してデフォルト状態に */
  }

  #p-pager-section {
    z-index: 10; /* p-pager-section はそのままでOK */
  }
}

/* ナビゲーション部分 */
.p-pager-prev-next {
}

.p-pager-prev-next__inner {
    display: flex;
    justify-content: space-between;
}

/* 前へボタン */
.p-pager-prev-next__arrow.-prev,
.p-pager-prev-next__arrow.-next {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
}

/* PREVIOUS と NEXT のテキストを非表示にする */
.p-pager-prev-next__arrow__icon {
  display: none;
}

/* 画像のスタイル */
.p-pager-prev-next__arrow__name img {
  width: 100px; /* 画像のサイズ調整 */
  height: auto;
}

/* モバイルレスポンシブ対応 */
@media (max-width: 768px) {
  /* スマホやタブレットの画面サイズに合わせてレイアウトを調整 */
  .p-pager-prev-next {
    top: auto; /* 上からの位置を解除 */
    bottom: 10px; /* ボトムに少し余白を追加 */
    left: 10px;
    right: 10px;
    transform: none; /* 変形解除 */
  }
  
  .p-pager-prev-next__arrow__name img {
    width: 80px; /* モバイル用に画像サイズを少し小さく */
  }
}


.movie-intro-list {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    /* width: 92%; */
    margin-left: auto;
    position: relative;
}

@media (max-width: 768px) {
.movie-intro-list {
    display:block;
	padding:0;
}
}



.movie-intro-item {
    padding: 2em 1.5em 4.5em 0;
}

@media screen and (max-width: 767px) {
    div.video-js {
        width: 100% !important;
        height: 165px !important;
    }

.movie-intro-item {
        width: 100% !important;
		padding:3.5em 0 0 0 !important;
    }
}



.movie-intro-list .txt-small {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    height: 25px;
    color: #fff;
    font-size: 12px;
    letter-spacing: .03em;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 25px 0 20px;
    padding: 0 20px;
}
.movie-intro-list .txt-big {
    font-weight: bold;
    font-size: 17px;
    letter-spacing: .06em;
    padding-bottom: 5px;
}





.works-main-contents .between{
-webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    width: 86%;
}

@media (max-width: 768px) {
.works-main-contents .between{
    display:block;
	  width: 98%;
}
}



.works-main-contents .between .ttl-main {
    font-size: 30px;
    color: #263558;
    font-weight: bold;
    letter-spacing: .03em;
}

@media (max-width: 768px) {
.works-main-contents .between .ttl-main {
    padding:0 0 1em 0;
}
}



.works-main-contents .between .ttl-main .head-primary {
    font-family: 'TTNormsPro-MediumItalic', sans-serif;
    font-style: italic;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: bold;
    line-height: 1;
}


.works-space{
}

@media (max-width: 768px) {
.works-space{
 padding:2.0em 0 0 0;
  }
}
.works-main-contents .movie {
    padding: 6em 0 12em 0;
}

@media (max-width: 768px) {
.works-main-contents .movie {
    padding: 0em 0 5em 0;
  }
}


.works-main-contents .person {
    padding: 0em 0 5em 0;
}

/* スケジュールセクションのスタイル 
.schedule {
  max-width: 1200px;
  margin: 40px auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.schedule h2 {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 30px;
  color: #2c5a9d;
  font-weight: bold;
}

/* 時系列スケジュールを縦並びでスタイリング 
.schedule-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}

.schedule-item {
  background-color: #eaf3fe;
  padding: 20px;
  width: 80%;
  max-width: 700px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  text-align: left;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border-left: 8px solid #2c5a9d;
}

.schedule-item:hover {
  transform: translateY(-10px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.time {
  font-size: 1.6rem;
  color: #2c5a9d;
  font-weight: bold;
  margin-bottom: 10px;
}

.task {
  font-size: 1.2rem;
  color: #555;
  line-height: 1.4;
}

/* レスポンシブデザイン - モバイル対応 
@media (max-width: 768px) {
  .schedule-container {
    align-items: flex-start;
  }

  .schedule-item {
    width: 100%;
    padding: 15px;
  }

  .time {
    font-size: 1.4rem;
  }

  .task {
    font-size: 1.1rem;
  }
}
*/