@charset 'utf-8';

.bg_color { background:rgba(71, 127, 232, 0.37); }
.contents_inner .h1_wrap .title_en { font-size:43px; }
.contents_inner { width:82%; }
.contents_inner.margintop0 { margin-top:0; padding-top:30px; }
.contents_inner.culture .h1_wrap::after {content: none;}
.step_box { width:100%; }
.contents_wrap.contentslink h2 { background:none; }
.contents.memo { width:110%; margin-left:-5%; margin-right:-5%; margin-top:40px; padding:0 0 0 0; }
.contents.memo h2 { line-height:56px; }
.lecture { width:90%; display:flex; margin:0 auto 30px auto; position:relative; }
.lecture.list1::after {content:none;}
.lecture.list1 dd .inline_sp { width:15%; margin-left:80%; display:block; }
.lecture.list2::after {content:none;}
.lecture.list2 dd .inline_sp { width:15%; margin-left:80%; display:block; }
.lecture.list4::after {content:none;}
.lecture.list4 dd .inline_sp { width:10%; margin-left:80%; display:block; }
.lecture dt { width:10%; }
.lecture dt img { margin-top:10px; }
.lecture dd { width:90%; }
.lecture dd strong { font-size:20px; line-height:1.7em; font-weight:500; letter-spacing:0.05em; margin-bottom:20px; display:block; }
.lecture dd p { line-height:2em; }
h2 { width:100%; font-size:18px; margin-bottom:20px; letter-spacing:0.05em; background:#4572C4; line-height:40px; text-align:center; color:#fff; font-weight:500; }
h2 .illust_lecture { display:none; }
.careerstep_title { width:150%; margin-left:-20%; margin-right:-20%; line-height:56px; }
.lead.marginbottom0 { font-size:18px; font-weight:500; margin-bottom:0; text-align:justify;}
.suzume { width:60px; margin-top:20px; }

.step_title { width:100%; display:flex; justify-content:space-between; border-bottom:1px solid #fff; align-items: flex-end; margin-bottom:16px; }
.step_title dt { width:auto; color:#4572C4;  }
.step_title dt small { font-size:20px; font-weight:500; }
.step_title dt em { font-size:65px; font-weight:600;}
.step_title dd { width:auto; }
.step_title dd span { font-size:20px; font-weight:500; color:#4572C4;}
.step_sp { width:100%; margin-top:-50px;display:block; }
@media screen and (min-width:768px) {
  .contents_inner .h1_wrap .title_en { font-size:87px; }
    .contents_inner { width:90%; margin:100px auto 0 auto; display:flex; flex-wrap:wrap;}
    .contents_inner .contents { width:100%; }
    .careerstep_title { width:100%; margin:0 auto 50px auto; }
    .contents.memo { width:100%; margin-top:160px; margin-left:0; margin-right:0; padding:88px 5%; }
    .step_box { width:100%;  margin:0 auto; }
    .step_box .step_pc { width:100%; }
    h2 { line-height:40px; }
    h2 .illust_lecture { width:60px; margin-bottom:9px; display:inline;}
    .lead { font-size:24px; font-weight:bold; color:#000000; }
    .lecture { width:100%; margin-bottom:80px; }
    .lecture dt { width:auto; margin-right:10px; }
    .lecture dt img { margin-top:10px; }
    .lecture dd { width:auto; }
    .lecture.list1::after {content: "";display: inline-block;width:58px; height:77px;background: url("../img/careerstep/illust_chair.svg") no-repeat center / contain; margin-top:40px; margin-left: 8px;vertical-align: middle;}
    .lecture.list2::after {content: "";display: inline-block;width:54px; height:58px;background: url("../img/careerstep/illust_memo.svg") no-repeat center / contain; margin-left:-15%;vertical-align: middle;}
    .lecture.list4::after {content: "";display: inline-block;width:35px; height:53px;background: url("../img/careerstep/illust_key.svg") no-repeat center / contain; margin-top:30px; margin-left:20px;vertical-align: middle;}
    .lecture dd strong { font-size:22px; font-weight:bold; }
    .lecture.list1 dd .inline_sp { display:none; }
    .lecture.list2 dd .inline_sp { display:none; }
    .lecture.list3 dd .inline_sp { display:none; }
    .lecture.list4 dd .inline_sp { display:none; }
    .step_title dt { border-bottom:0; }
    h2 { font-size:32px; line-height:78px; margin-bottom:56px; }
    .step_sp { display:none; }
    
  
}
@media screen and (min-width:1280px) {
  .step_box { width:100%; width:1200px; margin:-120px auto 0 auto; }
}

.message_bottom { font-size:20px; line-height:1.7em; font-weight:500; letter-spacing:0.05em; text-align:center; display:block; margin-top:40px; margin-bottom:80px; }
.message_bottom .inline_sp { display:inline; }
@media screen and (min-width:768px) {
    .message_bottom { font-size:24px; font-weight:bold; margin-top:80px; margin-bottom:0; }
    .message_bottom .inline_sp { display:none; }
    main { padding-bottom:50px; }
}

.step_list { width:100%; display:flex; flex-wrap:wrap; margin-top:80px; justify-content: space-between;}
.step_list li { width:100%; }
.step_list li .step_title { display:flex; justify-content:space-between; padding-bottom:10px; }
.step_title_pc { display:none; }
.step_list li strong { font-size:20px; font-weight:bold; line-height:1.8em; margin-bottom:16px; }
.step_list li p { line-height:2em; text-align:justify; }
.step_list li.inline_sp { width:120%; margin-left:-10%; margin-right:-10%; padding:50px 0 60px 0; }
.step_list li.inline_sp img { width:100%; } 
.step_list li.inline_sp.bottom { width:150%; text-align:center; margin-left:-20%; margin-right:-20%; background:#4572C4; color:#fff; font-size:18px; line-height:56px; font-weight:bold; padding:0; margin-top:80px; margin-bottom:80px; }
.kadomaru { width:90%; width:100%; background:#4572C4; color:#fff; font-size:18px; font-weight:bold; line-height:1.7em; padding:32px 5%; border-radius:8px; margin-top:20px; }
.kadomaru strong { display:inline; }
.timeline_pc  { display:none; }
@media screen and (min-width:768px) {
    .step_list { margin-top:0; }
    .step_list li { width:24%; }
    .step_list li .step_title { display:none; }
    .step_title_pc { width:100%; display:block; margin-bottom:30px; }
    .step_list li p { width:90%;  margin-left:5%; }
    .step_list li strong { width:90%; margin-left:5%; }
    .kadomaru { width:90%; padding:20px; margin-left:5%; position:relative; }
    .kadomaru::before {
  content: "";
  position: absolute;
  top: -10px; /* 吹き出しの上に配置 */
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;  /* 左辺の透明部分 */
  border-right: 10px solid transparent; /* 右辺の透明部分 */
  border-bottom: 10px solid #4572C4;    /* 吹き出しと同じ色 */

}
.step_list li .kadomaru p { width:100%; text-align:center; margin-left:0; font-weight:500; }
.step_list li .kadomaru p strong { font-weight:500; margin-bottom:0; }
    .step_list4 { margin-top:0px; }
    .step_list3 { margin-top:50px; }
    .step_list2 { margin-top:100px; }
    .step_list1 { margin-top:200px; }
    .timeline_pc { width:100%; display:flex; justify-content: space-between; gap:2px; margin-top:40px; position:relative; }
    .timeline_pc::after {  content: ""; position: absolute; width:40px; height:50px; right:24%; top:-100px; background: url("../img/careerstep/illust_kusa.svg") no-repeat center / contain;}
    .timeline_pc li { width:25%; text-align:center; font-weight:bold; line-height:35px; color:#fff;  }
    .timeline_pc li:nth-child(1){ background: rgba(69, 114, 196, 0.3);}
    .timeline_pc li:nth-child(2){ background: rgba(69, 114, 196, 0.5);}
    .timeline_pc li:nth-child(3){ background: rgba(69, 114, 196, 0.7);}
    .timeline_pc li:nth-child(4){ background: rgba(69, 114, 196, 1);}



}

/* === iPad 縦向き（portrait）=== */
.message_bottom .inline_pad { display:none; }
@media screen and (min-width: 768px) and (max-width:1200px) and (orientation: portrait) {
  .message_bottom .inline_pad { display:inline-block; }
  .step_list li .kadomaru p { font-size:17px; font-weight:500; }
  .step_list li .kadomaru p strong { font-weight:500; margin-bottom:0; }
  .step_list li .kadomaru p .inline_pc { display:none; }
   .kadomaru { width:90%; padding:20px 10px; margin-left:5%; position:relative; }
   .timeline_pc::after {  content: ""; position: absolute; width:40px; height:50px; right:15%; top:-100px; background: url("../img/careerstep/illust_kusa.svg") no-repeat center / contain;}
}
@media screen and (min-width:1120px) {
.message_bottom .inline_pad { display:none; }
}

/* === iPad 横向き（landscape）=== */
@media screen and (min-width: 768px) and (max-width:1200px) and (orientation: landscape) {
  .kadomaru { padding:20px 10px; }
  .step_list li strong { font-size:18px; }
  .step_list li .kadomaru p { font-size:17px;  font-weight:500; }
  .step_list li .kadomaru p strong { font-weight:500; margin-bottom:0; }
  .timeline_pc::after {  content: ""; position: absolute; width:40px; height:50px; right:20%; top:-100px; background: url("../img/careerstep/illust_kusa.svg")
}
}



/*雀の動き*/
.contents_wrap.top { width:100%; position:relative; }
.contents_wrap.top .bird { width:20px; position:absolute; z-index:2; will-change:transform,opacity; animation:flyPath 6s linear infinite; }
.contents_wrap.top .bird1 { left:0; top:0; transform:rotate(20deg); animation-delay:0s; }
.contents_wrap.top .bird2 { left:10%; top:5vh; transform:rotate(-20deg); animation-delay:0.7s; }
.contents_wrap.top .bird3 { left:8%; top:10vh; transform:rotate(10deg); animation-delay:1.4s; }
@media screen and (min-width:768px) {
  .contents_wrap.top .bird { width:28px; position:absolute; z-index:2; will-change:transform,opacity; animation:flyPath 6s linear infinite; }
  .contents_wrap.top .bird1 { left:50%; top:11vh; transform:rotate(20deg); animation-delay:0s; }
  .contents_wrap.top .bird2 { left:55%; top:9vh; transform:rotate(-20deg); animation-delay:0.7s; }
  .contents_wrap.top .bird3 { left:60%; top:7vh; transform:rotate(10deg); animation-delay:1.4s; }
}
@keyframes flyPath { 0% { transform:translate(0,0) rotate(10deg); opacity:0; } 5% { opacity:1; } 15% { transform:translate(15vw,-6vh) rotate(12deg); } 20% { transform:translate(20vw,-4vh) rotate(8deg); } 30% { transform:translate(30vw,-12vh) rotate(6deg); } 35% { transform:translate(35vw,-9vh) rotate(4deg); } 50% { transform:translate(50vw,-18vh) rotate(0deg); } 55% { transform:translate(55vw,-15vh) rotate(-3deg); } 70% { transform:translate(70vw,-26vh) rotate(-6deg); } 75% { transform:translate(75vw,-22vh) rotate(-8deg); } 100% { transform:translate(102vw,-32vh) rotate(-5deg); opacity:0; } }