@charset "utf-8";

/*メディアクエリー
スマホ @media (max-width: 768px)
タブレットのみ @media (min-width:768px) and (max-width:1000px)
タブレット・PC @media (min-width:768px)
PC大 @media (min-width:1200px) 
※上記以外のブレイクポイントは、例外的に設定。その場合はコメントアウトを記載すること。
*/

body { overflow-x: hidden; }

.inline_pc { display:none;}
.inline_sp { display:inline;}
.block_pc { display:none;}
.block_sp { display:block;}
.inline_sp_pad { display:inline;}
.inline_pc_pad { display:none; }

@media screen and (min-width:768px) { /* ブレイクポイントを768pxから640pxに変更 */
  .inline_pc { display:block;}
  .inline_sp { display:none;}
  .block_pc { display:block;}
  .block_sp { display:none;}
  .inline_sp_pad { display:inline-block;}
  .inline_pc_pad { display:inline-block;}
  .inline_pc_only { display:none; }
}

@media (max-width: 767px) {
  .head-subtext {
    margin-bottom: 0px !important;
    color: #fff;
  }
  h3 {margin:20px 0 10px 0;}
}


.openbtn span {background-color: #000;}
.contents_wrap_bg { width:100%; background:url(../img/bg_sp.jpg); background-size:cover; background-repeat:no-repeat; }
@media screen and ( min-width:768px) {
    .contents_wrap_bg { width:100%; background:url(../img/bg_pc.jpg); background-size:cover; background-repeat:no-repeat;  }
    
}

.h1_wrap .english { color:#fff; }
.h1_wrap h1 { color:#fff; margin-bottom:10px; }
.h1_wrap strong { color:#000; font-size:24px; line-height:1.5; }
.h1_wrap p { width:90%; margin:0 auto; font-size:16px; line-height:32px; text-align:left; padding:20px 0 40px 0; }
@media screen and ( min-width:768px) {
  .h1_wrap { margin-bottom:0; }
    .h1_wrap h1 { color:#fff; /*margin-bottom:110px;*/ }
    .h1_wrap strong { font-size:36px; margin-bottom:20px; display:inline-block; line-height:2em; letter-spacing:0.1em; }
    .h1_wrap p { margin:0 auto; text-align:center;  padding:0 0 80px 0;}
}



.button_wrap .button .circle .arrow {
  position: absolute;
  font-size: 13px;
  animation: none;
  transition: transform 0.3s ease;
  color: #000;
  left: 2px;
  top: -6.5pt;
}
.button_wrap .button span {
  width: 95%;
  text-align: left;
  font-size: 16px;
  font-family: "Cormorant Garamond", serif;
  font-weight: 400;
  font-style: normal;
  margin-left: 0%;
  display: inline-block;
  padding: 0 14%;
}


/*背景によって、ヘッダーのロゴ、ハンバーガーの色を変更*/
.logo_black { display:none; }
.openbtn span { background-color:#fff; }
.contents_wrap.blue { display:block; width:100%; height:auto; float:left; background: linear-gradient(#fff 0%, #2294ea 100%); }

.business_wrap { width:100%;   height:auto; display:block; float:left;}
.business_wrap .contents { border-top: 1px solid rgba(0, 80, 146);margin-bottom:50px; padding: 40px 0 0 0;}
.business_wrap:first-child .contents { border-top: none;}
.contents_wrap .contents p { width:100%; text-align:justify;}
.business_wrap .english { width:100%; font-size:60px; color:rgba(255, 255, 255, 0.4);text-align:right; display:inline-block; line-height:1.2; letter-spacing:0; font-family: "Cormorant Garamond", serif; }
.contents_wrap .business_wrap:first-of-type .english { color:rgba(0, 80, 146, 0.03); }
.business_wrap .number { width:100%; font-size:40px; color:rgba(0, 80, 146); text-align:left; display:inline-block; line-height:1.2;  }
@media screen and ( min-width:768px) {
  .business_wrap .contents { width:1080px; margin:0 auto; }
  .business_wrap .english { font-size:100px; text-align:right; }
  .business_wrap .number { font-size:56px; white-space: nowrap;}
}

.business h2 { width:auto; position:relative; margin:0 auto; font-weight:400; }
@media screen and ( min-width:768px) {
    .business h2 { margin-top:0; margin-left:36px; }
    
}
.lineTrigger::before { width:auto; position: absolute;content:"";width:0;height:16px;background:#FFF000;}
.lineTrigger::after { width:auto; position: absolute;content:"";width:0;height:16px;background:#FFF000; z-index:-1; bottom:0; }
h2.lineTrigger { width:auto; display:inline-block; font-weight:400; font-size:24px; line-height:48px;white-space: nowrap; }
.setsumei { padding: 32px 0 32px 0; }

.business { width:100%; display:flex; flex-wrap:wrap; }
.business li { width:100%; }
.business .manoheya_img { width:100%; margin-top: 40px;}
.business .manoheya_img img{ margin-bottom: 10px;}
.business .manoheya_img img:last-child{ margin-bottom: 0px;}
h2 { font-family: 'Yu Mincho Light','YuMincho','Yu Mincho','游明朝体','ヒラギノ明朝 ProN','Hiragino Mincho ProN',sans-serif;}
@media screen and ( min-width:768px) {
    h2.lineTrigger { width:auto; display:inline-block; font-weight:400; font-size:36px; line-height:72px;white-space: nowrap; }
    .lineTrigger::after { top:40px; }
    .business { flex-wrap:nowrap; justify-content:space-between; align-items:center; }
    .business ul {width:50% !important;}
    .business_wrap .contents{ margin-bottom:100px; padding: 80px 0 0 0;}
    .business_wrap .number { width:auto; }
    .business li { width:auto; }
    .business ul li:nth-child(2) { display:flex; }
    .business .manoheya_img { width:35%; }
    .setsumei { margin-left:100px; padding: 24px 0 40px 0; }
    
}

@media screen and ( min-width:768px) {
    .contents_wrap.footer .footer_logo img { margin-top:30px; }
}


/*青のグラデーション　#02092b,*/
.Gradation_1 {
    display: flex; /* Required for align-items and justify-content */
    align-items: center;
    justify-content: center;
    height: 100%; /* Ensure the background fills the entire viewport */
  
    /* Create a two-layered background */
    background: #02092b;  
    /* Fixed color for the top 500px */
    background: linear-gradient(to bottom right, #fff 50%, #047CD5, #88DAFF, #bfe3fb,#88DAFF,#047CD5); 
    /* Diagonal gradient */
    background-size: 200% 200%; /* Enlarged for smooth diagonal animation */
    animation: Grad 10s ease infinite; /* Continuous diagonal movement */
    background-attachment: fixed; /* Keep the top part fixed while the rest animates */
  }
  
  @keyframes Grad {
    0% {
        background-position: 0% 0%; /* Start at the top-left */
    }
    50% {
        background-position: 100% 100%; /* Move to the bottom-right */
    }
    100% {
      background-position: 0% 0%; /* Move to the bottom-right */
  }
  }

  @media screen and ( min-width:768px) {
  .contents_wrap.footer .footer_logo img { margin-top:50px; }
  }
  

/* 部屋のオキテ */
.box_white { background-color: rgba(255, 255, 255, 0.7); padding:40px 24px; margin:40px 0; }
.box_white img { padding:24px 0 40px 0; width: 230px; }
.box_white strong { font-size:18px; font-weight:600; line-height:36px; text-align:center; }
.okite_box { text-align:center; }

.box_white { position: relative;  overflow: visible;  }

.box_white .okite_img { position: relative; text-align: center }

.box_white .okite_img img { position: relative; z-index: 1; }

@media (min-width: 768px) { 
    .adivice_text .lineTrigger.lineanime:after { top:20px; }
    .box_white { display:flex; padding:60px 0; margin:80px 0;}
    .box_white .okite_img { width:30%; position: relative; }
    .box_white .okite_img img { position: absolute;  top: -100px; z-index: 2; left: 60px; }
    .okite_box  { width:70%; text-align:left; margin-left: 80px; }
}

.title_advice { position:relative; text-align:center; font-size:18px; font-weight:600; line-height:36px; padding-bottom:24px; }
.title_advice::after {
    content: ''; /* 擬似要素にコンテンツを挿入 */
    position: absolute;
    bottom: 0; /* 下に配置 */
    width: 40px; /* 下線の長さを指定 */
    height: 3px; /* 下線の高さ */
    background-color: #0092FE; /* 下線の色を指定 */
    left:45%; 
  }
.box_advice img { padding:40px 0; }
.box_advice strong { font-size:18px; line-height:36px; }

@media (min-width:  768px) {
.box_advice { text-align:center; }
.title_advice::after { left:50%; }
}

/* アットホーム */
@media (min-width:  768px) {
  .athome h2  { margin-top: 0;font-size: 36px;line-height: 72px;margin-left: 36px; }
  .athome_img { margin-top:-160px; padding-left:120px; }
}

/* 社内行事 */
.wakuwaku_white { position:relative; background: #ffffff40; padding:40px 24px; text-align:center; margin-top:40px; }
.wakuwaku_white strong { font-size:24px; line-height:48px; padding-bottom:40px; font-weight: 600; font-family: 'Yu Mincho Light','YuMincho','Yu Mincho','游明朝体','ヒラギノ明朝 ProN','Hiragino Mincho ProN',sans-serif;}
.wakuwaku_left { position: absolute; left: 4%; width: 65px; margin-top: -10px;}
.wakuwaku_right {position: absolute; width: 110px;margin-top: -20px; right:-15px; }
.wakuwaku_white p { margin:40px auto; }
.wakuwaku_img { margin-bottom:40px; }
.event_box { display: flex; flex-wrap: wrap; gap:8px; }
.event_left {position: absolute; left: 1%; width: 85px; margin-top: -10px; }
.event_right { position: absolute; width: 100px; margin-top: -30px; right: -3%; }


@media (min-width: 768px) {
    .business_wakuwaku  h2{ font-size:36px; line-height:72px ;}
    .wakuwaku_white { padding:80px; margin-top:80px; }
    .contents_wrap .contents .wakuwaku_white p { text-align: center; justify-content: center; margin:40px auto 80px auto; }
    .wakuwaku_left { width: 150px; position: absolute; left: 5%; margin-top: 50px;  }
    .wakuwaku_right { width: 160px; position: absolute; right: 1%; margin-top: 40px}
    .wakuwaku_img { width:30%; margin-bottom:0; }
    .event_box { display: flex; flex-wrap:nowrap; gap:16px; justify-content: center; padding-top:0;  }
    .event_box img { width:50%; }
    .event_left { width:158px; left:2%; }
    .event_right { width: 183px; right:1%; margin-top:30px; }
      
}

/* 給料 */
@media (min-width: 768px) {
    .business_salary .setsumei { padding: 24px 0 0px 0; }
    .business_salary h2 { font-size:36px; line-height:72px; }
    .business_salary .manoheya_img { width:45%; }
    .businesss_salary_wrap { margin-bottom:80px; }
}

/*ボタン*/
a:link {text-decoration: none;}
.button_wrap {width: 200px; padding: 0 0 0 0;}
.button_wrap .button {width: 200px; height: 50px; display: flex; align-items: center; background: #000000; color: #ffffff; line-height: 45px;/*float: left; */text-align: center; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", "Helvetica", sans-serif;position: relative;}
.button_wrap .button.link.inline_sp {width: 212px; /*position: relative;*/display: none;}
.button_wrap .button span {/*width: 95%;text-align: left;font-size: 16px; */font-family: "Cormorant Garamond", serif; font-weight: 400;font-style: normal; /*margin-left: 0%;display: inline-block;*/padding: 0 14%;}
.button_wrap .button .circle {position: relative; width: 27px; height: 27px; border-radius: 50%; overflow: hidden; /*display: flex; lign-items: center; justify-content: center; */background: #fff; color: #000; /*float: right; */position: absolute; right: 20px;}
.button_wrap .button .circle .arrow {position: absolute; font-size: 13px; animation: none; transition: transform 0.3s ease; color: #000; left: 2px; top: -0.5pt;}

.button_wrap .button:hover {box-shadow: 0 12px 20px rgba(30, 125, 251, 0.4), 0 6px 10px rgba(30, 125, 251, 0.2);}
.button_wrap .button:hover .circle .arrow {animation: slideArrow 0.7s linear infinite;}

@media screen and ( min-width:768px) {
    .button_wrap {padding: 40px 0 0 100px;}
}

/*バナー*/
.margin0 {margin: 0; width: 100% !important;}
.blue_bold {color: rgba(0, 80, 146);font-weight: 800;text-align: center;font-size: 18px;margin:30px 0 12px 0;font-feature-settings: "palt";}
.blue_bold::before,.blue_bold::after{position: relative;display: inline-block;content: "";background: rgba(0, 80, 146);width: 2.5px;height: 1.8em; margin: 0 1.1em;margin-top: -.1em;vertical-align: middle;}
.blue_bold::before{transform: rotate(-35deg);}
.blue_bold::after{transform: rotate(35deg);}

.contents_wrap.gray .contents .manoheya_link .button:hover {box-shadow:none;}
.contents { margin-top:0; margin-bottom:0; padding:60px 0; width:90%;}
.contents .manoheya_link {  width:100%; display:flex; flex-wrap:wrap; }
.contents .manoheya_link li { width:100%; color:#000; overflow: hidden; margin-bottom:30px; position:relative;}
.contents .manoheya_link li:last-child { margin-bottom:0%; }
.contents .manoheya_link li:hover {box-shadow: 0 12px 20px rgba(30, 125, 251, 0.4), 0 6px 10px rgba(30, 125, 251, 0.2);}
.contents .manoheya_link li a { position:relative; display:flex; flex-wrap:wrap; text-decoration: none;background:#fff;color: #000; font-family: 'Yu Mincho Light','YuMincho','Yu Mincho','游明朝体','ヒラギノ明朝 ProN','Hiragino Mincho ProN',sans-serif;}
.contents .manoheya_link li a:link { color:#000; }
.contents .manoheya_link li a::before {content: '';position: absolute;top: 50%;left: 50%;width: 0;height: 0;background-color: rgba(30, 125, 251, 0.3); /* 背景色 */border-radius: 50%; transition: width 0.3s ease-in-out, height 0.3s ease-in-out; /* アニメーション */transform: translate(-50%, -50%); /* 中央に配置 */}
.contents .manoheya_link li a:hover::before {width: 300%; }
.contents .manoheya_link li img { width:100%; object-fit: cover; }
.contents .manoheya_link li div { width:auto; text-align: center; margin: 10px auto 7px; }
.contents .manoheya_link li div .banner_middle {display: flex;align-items: center;justify-content: space-between; width: 100%;margin-top: 5px;}
.contents .manoheya_link li span.en { width:100%; text-align:center; font-size:31px; line-height:1.2; font-family: "Cormorant Garamond", serif; display:inline-block; }
.contents .manoheya_link li span.ja { text-align:center; font-size:16px; letter-spacing:0.1em; display:inline-block; }
.contents .manoheya_link li a .button { width:27px; height:27px; float: none; background: none;}
.contents .manoheya_link li a .button .circle { position:absolute; right:25px; top: auto; bottom: 9px; width:27px;}
.contents .manoheya_link li:hover a .button .arrow {animation: slideArrow 0.7s linear infinite;}
.button .black .arrow.white{padding-left: 0.5px;}
@media (min-width:768px){
  .blue_bold {margin:80px 0 12px 0;}
  .contents .contents  { padding:0px 0;}
  .contents .manoheya_link {display:flex; justify-content: space-between;}
  .contents .manoheya_link p {text-align: left;margin: 5%;display: block;width: 91%;}
  .contents .manoheya_link li { margin-bottom:0; width:100%; }
  .contents .manoheya_link li a {position: relative;display: flex;}
  .contents .manoheya_link li img { width: 60%;height: auto;}
  .contents .manoheya_link li div { width:35%; text-align: left; margin: auto 2.5%;}
  .contents .manoheya_link li div .banner_middle {margin: 0 0%;width: 90%;}
  .contents .manoheya_link li span.en { width:90%; text-align:initial; float:initial; margin-left:5%; font-size:50px; margin-top: 15px;margin-bottom: 10px;}
  .contents .manoheya_link li span.ja { width:90%; text-align:initial; float:initial; margin-left:5%; font-size:18px; margin-top: 0px; margin-bottom:initial; }
  .contents .manoheya_link li a .button { bottom:initial; right:0%; }
  .contents .manoheya_link li a .button .circle { position:absolute; right:25px; top: 97px; bottom: auto; width:27px;}
  .button .arrow {left: 3.5px;}
  .button .black .arrow.white{padding-left: 5.5px;}
}

/* ベースのスタイル */
.button .circle {position: relative;width:27px;height:27px;border-radius: 50%; overflow: hidden;display: flex;align-items: center;justify-content: center;background:#fff; color:#000; float:right; position:absolute;right:15px; }
.button .arrow {position: absolute;font-size:13px; line-height:27px; width:27px; height:27px; animation: none;transition: transform 0.3s ease;color:#000;left:0.5px; margin-top:1px; }
/* マウスオーバー時のアニメーション */
.message li a.button:hover .circle { background:#fff; color:#000; }
.message li a.button:hover .arrow {animation: slideArrow 0.7s linear infinite;}
.button:hover .arrow {animation: slideArrow 0.7s linear infinite;}

/* 矢印の移動アニメーション */
@keyframes slideArrow {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  50% {
    transform: translateX(100%);
    opacity: 0;
  }
  51% {
    transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.button.blue { background:#000; color:#fff; }
.button.blue .circle {  background:#fff; color:#000;}
.button.contents .circle {  background:#fff; color:#fff;}
.button .arrow.white { color:#fff;padding-left: 3.5px; }
.button .circle.black  {position: relative;width:27px;height:27px;border-radius: 50%;overflow: hidden;display: flex;align-items: center;justify-content: center;background:#000; color:#fff; float:right; position:absolute;right:10px; }




/* 黄色の下線を調整 */
.lineyellowTrigger {
    line-height: 1.5; /* 必要に応じて調整 */
    padding-bottom: 4px; /* 下余白を調整 */
  }
  .lineyellowTrigger::after {
    bottom: 0; /* 親要素の下部に揃える */
  }

  .lineTrigger {
    position: relative;
    display: inline-block; /* インライン要素に確実に適用 */
    opacity: 0; /* 初期状態は非表示 */
  }
  
  .lineTrigger.lineanime {
    animation-name: lineAnimeBase;
    animation-duration: 1s;
    animation-fill-mode: forwards;
  }
  
  .lineTrigger::after {
    content: "";
    position: absolute;
    width: 0;
    height: 16px; /* 黄色い線の太さ */
    bottom: 4px; /* テキストの下に配置 */
    left: 0;
  }
  
  .lineTrigger.lineanime::after {
    animation: lineExpand 1s forwards;
  }
  
  @keyframes lineExpand {
    from {
      width: 0;
    }
    to {
      width: 100%; /* 全幅に広がる */
    }
  }