@charset "UTF-8";
/* mediaquery
==========================================================*/
/* fontsize
==========================================================*/
/* icon
==========================================================*/
/*　dotted ------------------------------------------------

破線の間隔を調整
$color：色、$stripe:線幅、$spacing：破線の間隔, $height:高さ

==========================================================*/
/*　transition ------------------------------------------------

破線の間隔を調整
$speed：速度、$delay：開始時間

==========================================================*/
/* IEhack
==========================================================*/
@keyframes sdb { 0% { transform: translate(0, 0); opacity: 0; }
  50% { opacity: 1; }
  100% { transform: translate(0, 20px); opacity: 0; } }
@media print, screen and (min-width: 768px) { #mainvisual { background: #f0f0f0; height: calc(100vh - 80px); background: url(/img/mainvisual_bg.png) no-repeat center bottom; background-size: cover; }
  #mainvisual .inner { position: relative; margin: 0 auto; height: calc(100vh - 80px); display: flex; justify-content: center; align-items: center; }
  #mainvisual h1 { position: relative; margin-top: -15%; }
  #mainvisual h1 span { font-family: "游明朝", YuMincho, "Noto Serif JP", "Sawarabi Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif; line-height: 1; font-size: 12rem; text-align: center; color: #fff; display: block; }
  #mainvisual h1 span.line02 { margin-top: 60px; text-indent: 50px; }
  #mainvisual h1 em { font-family: "Roboto", sans-serif; top: 135px; text-align: center; width: 100%; position: absolute; font-size: 1.6rem; line-height: 1; color: #fff; font-style: normal; letter-spacing: 3px; }
  _:-ms-fullscreen em, :root #mainvisual h1 em { top: 87px; }
  #mainvisual .scroll { position: absolute; left: 0; right: 0; bottom: 105px; margin: auto; width: 100px; text-align: center; color: #fff; font-family: "Roboto", sans-serif; font-weight: 700; letter-spacing: 2px; font-size: 1.2rem; cursor: pointer; }
  #mainvisual .scroll a { text-decoration: none; color: #fff; }
  #mainvisual .scroll a span { position: absolute; top: 20px; left: 0; right: 0; margin: auto; width: 0; height: 0; border-style: solid; border-width: 12px 7px 0 7px; border-color: #ffffff transparent transparent transparent; -webkit-animation: sdb 1.5s infinite; animation: sdb 1.5s infinite; }
  .read { padding: 100px 0 150px; text-align: center; position: relative; }
  .read .box p { text-align: center; font-family: "游明朝", YuMincho, "Noto Serif JP", "Sawarabi Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif; line-height: 1.5; font-size: 6rem; text-indent: 50px; }
  .read .box.animation p { transform: translateY(50px); opacity: 0; transition: transform 1s cubic-bezier(0.14, 1, 0.34, 1), opacity 0.8s cubic-bezier(0.14, 1, 0.34, 1); }
  .read .box.animation p:nth-child(0) { transition-delay: 0s; }
  .read .box.animation p:nth-child(1) { transition-delay: 0.2s; }
  .read .box.animation p:nth-child(2) { transition-delay: 0.4s; }
  .read .box.animation p:nth-child(3) { transition-delay: 0.6s; }
  .read .box.animation.show p { transform: translateY(0px); opacity: 1; }
  .read .ships { display: block; background: url(/img/index_bg02.png) no-repeat center top; width: 153px; height: 460px; position: absolute; left: 0; right: 0; bottom: -355px; margin: auto; }
  .read .ships .ship01 { background: url(../../../img/ships01.png) no-repeat center center; width: 40px; height: 41px; position: absolute; left: 22px; top: 21px; }
  .read .ships .ship02 { background: url(../../../img/ships02.png) no-repeat center center; width: 40px; height: 41px; position: absolute; right: 14px; top: 165px; }
  .read .ships .ship03 { background: url(../../../img/ships03.png) no-repeat center center; width: 40px; height: 41px; position: absolute; left: 33px; bottom: 117px; }
  .read .ships::after { content: ""; background: url(/img/index_img01.png) no-repeat center center; width: 172px; height: 45px; position: absolute; left: 0; right: 0; bottom: 0; }
  .read .ships.animation { transform: translateY(60px); opacity: 0; transition: transform 0.8s cubic-bezier(0.14, 1, 0.34, 1), opacity 0.8s cubic-bezier(0.14, 1, 0.34, 1); transition-delay: .6s; }
  .read .ships.animation .ship01 { transform: translate(-30px, -30px); opacity: 0; transition: transform 1s cubic-bezier(0.14, 1, 0.34, 1), opacity 0.8s cubic-bezier(0.14, 1, 0.34, 1); transition-delay: 1.2s; }
  .read .ships.animation .ship02 { transform: translate(30px, -30px); opacity: 0; transition: transform 1s cubic-bezier(0.14, 1, 0.34, 1), opacity 0.8s cubic-bezier(0.14, 1, 0.34, 1); transition-delay: 1.8s; }
  .read .ships.animation .ship03 { transform: translate(-30px, -30px); opacity: 0; transition: transform 1s cubic-bezier(0.14, 1, 0.34, 1), opacity 0.8s cubic-bezier(0.14, 1, 0.34, 1); transition-delay: 2.4s; }
  .read .ships.animation.show { transform: translateY(0px); opacity: 1; }
  .read .ships.animation.show .ship01 { transform: translate(0, 0); opacity: 1; }
  .read .ships.animation.show .ship02 { transform: translate(0, 0); opacity: 1; }
  .read .ships.animation.show .ship03 { transform: translate(0, 0); opacity: 1; }
  #main .contents { position: relative; padding-top: 450px; }
  #main .contents::before { content: ""; width: 100%; background: url(/img/index_bg01.png) no-repeat center center; background-size: cover; height: 835px; position: absolute; left: 0; top: 0; z-index: -1; }
  #main .company_area { background-color: #fff; overflow: hidden; box-sizing: border-box; min-width: 1200px; position: relative; padding-bottom: 70px; }
  #main .company_area .video_area { max-width: 980px; margin: 0 auto 0; transform: translateY(60px); opacity: 0; transition: transform 0.8s cubic-bezier(0.14, 1, 0.34, 1), opacity 0.8s cubic-bezier(0.14, 1, 0.34, 1); text-align: center; }
  #main .company_area .video_area h2 { text-align: center; font-family: "游明朝", YuMincho, "Noto Serif JP", "Sawarabi Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif; line-height: 1.5; font-size: 4rem; margin-bottom: 10px; }
  #main .company_area .video_area h2 span { position: relative; }
  #main .company_area .video_area .video { margin-top: 35px; }
  #main .company_area .video_area.show { transform: translateY(0); opacity: 1; }
  #main .company_area .inner { max-width: 1200px; margin: 0 auto; padding-top: 150px; padding-bottom: 140px; }
  #main .company_area .inner .readcopy { text-align: center; }
  #main .company_area .inner h2 { text-align: center; font-family: "游明朝", YuMincho, "Noto Serif JP", "Sawarabi Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif; line-height: 1.5; font-size: 4rem; margin-bottom: 10px; }
  #main .company_area .inner h2 span { position: relative; padding-top: 65px; }
  #main .company_area .inner h2 span::before { content: ""; width: 58px; height: 58px; position: absolute; left: 0; right: 0; top: 0; margin: auto; background: url(/img/index_icon01.svg) no-repeat center center; }
  #main .company_area .inner ul { list-style-type: none; display: flex; justify-content: center; margin-top: 35px; margin-left: 0; }
  #main .company_area .inner ul li { margin: 0 20px; padding: 0; list-style-type: none; width: 300px; text-align: center; font-weight: 700; font-size: 1.5rem; }
  #main .company_area .inner ul li img { padding-bottom: 15px; }
  #main .company_area .inner ul li a { display: flex; width: 190px; height: 40px; border: 1px solid #1263AA; position: relative; justify-content: center; align-items: center; color: #1263AA; margin: 20px auto; background: #fff; text-decoration: none; font-family: "Roboto", sans-serif; font-weight: 700; letter-spacing: 2px; font-size: 1.2rem; transition: all 0.6s cubic-bezier(0.14, 1, 0.34, 1); }
  #main .company_area .inner ul li a::after { content: ""; position: absolute; width: 55px; right: -27px; height: 1px; background: #1263AA; top: 0; bottom: 0; margin: auto; }
  #main .company_area .inner ul li a:hover { background-color: #1263AA; color: #fff; }
  #main .company_area.animation .img { transform: translateX(60px); opacity: 0; transition: transform 1s ease, opacity 1s ease; transition-delay: .6s; }
  #main .company_area.animation h2 { transform: translateY(60px); opacity: 0; transition: transform 0.8s cubic-bezier(0.14, 1, 0.34, 1), opacity 0.8s cubic-bezier(0.14, 1, 0.34, 1); }
  #main .company_area.animation .readcopy { transform: translateY(60px); opacity: 0; transition: transform 0.8s cubic-bezier(0.14, 1, 0.34, 1), opacity 0.8s cubic-bezier(0.14, 1, 0.34, 1); transition-delay: .2s; }
  #main .company_area.animation ul { transform: translateY(60px); opacity: 0; transition: transform 0.8s cubic-bezier(0.14, 1, 0.34, 1), opacity 0.8s cubic-bezier(0.14, 1, 0.34, 1); transition-delay: .6s; }
  #main .company_area.animation.show .img { transform: translateX(0px); opacity: 1; }
  #main .company_area.animation.show h2 { transform: translateY(0); opacity: 1; }
  #main .company_area.animation.show .readcopy { transform: translateY(0); opacity: 1; }
  #main .company_area.animation.show ul { transform: translateY(0); opacity: 1; }
  #main .career_area { margin-top: 20px; background: #FDF5F5; }
  #main .career_area .inner { max-width: 1200px; margin: 0 auto; position: relative; padding: 50px 0 100px; }
  #main .career_area h2 { text-align: center; font-family: "游明朝", YuMincho, "Noto Serif JP", "Sawarabi Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif; line-height: 1.5; font-size: 4rem; margin-bottom: 10px; }
  #main .career_area h2 span { position: relative; padding-top: 65px; display: inline-block; }
  #main .career_area h2 span::before { content: ""; width: 75px; height: 58px; position: absolute; left: 0; right: 0; top: 0; margin: auto; background: url(/img/index_icon02.svg) no-repeat center center; }
  #main .career_area .readcopy { text-align: center; }
  #main .career_area ul { list-style-type: none; display: flex; justify-content: space-between; margin-top: 35px; margin-left: 0; }
  #main .career_area ul li { margin: 0; padding: 0; list-style-type: none; width: 235px; text-align: center; font-weight: 500; }
  #main .career_area ul li a { display: block; text-decoration: none; color: #000; transition: color 0.6s cubic-bezier(0.14, 1, 0.34, 1); }
  #main .career_area ul li a .img { width: 235px; height: 255px; position: relative; overflow: hidden; }
  #main .career_area ul li a .img img { content: ""; width: 100%; height: 100%; top: 0; left: 0; position: absolute; transition: all 0.6s cubic-bezier(0.14, 1, 0.34, 1); transform: scale(1); }
  #main .career_area ul li a:hover { color: #1263AA; }
  #main .career_area ul li a:hover .img img { transform: scale(1.2); }
  #main .career_area ul li a p { padding-top: 28px; position: relative; font-size: 1.8rem; font-weight: 700; }
  #main .career_area ul li a p::before { position: absolute; content: ""; width: 1px; height: 20px; background: #1263AA; margin: auto; top: 0; left: 0; right: 0; }
  #main .career_area ul li span { display: block; margin-top: 8px; font-size: 1.5rem; }
  #main .career_area.animation h2 { transform: translateY(60px); opacity: 0; transition: transform 0.8s cubic-bezier(0.14, 1, 0.34, 1), opacity 0.8s cubic-bezier(0.14, 1, 0.34, 1); }
  #main .career_area.animation .readcopy { transform: translateY(60px); opacity: 0; transition: transform 0.8s cubic-bezier(0.14, 1, 0.34, 1), opacity 0.8s cubic-bezier(0.14, 1, 0.34, 1); transition-delay: .2s; }
  #main .career_area.animation ul { transform: translateY(60px); opacity: 0; transition: transform 0.8s cubic-bezier(0.14, 1, 0.34, 1), opacity 0.8s cubic-bezier(0.14, 1, 0.34, 1); transition-delay: .6s; }
  #main .career_area.animation.show { transform: translateX(0px); opacity: 1; }
  #main .career_area.animation.show h2 { transform: translateY(0); opacity: 1; }
  #main .career_area.animation.show .readcopy { transform: translateY(0); opacity: 1; }
  #main .career_area.animation.show ul { transform: translateY(0); opacity: 1; }
  #main .culture_area { position: relative; padding-bottom: 80px; margin-top: 80px; }
  #main .culture_area::after { content: ""; background-color: #DBEAF1; position: absolute; left: 0; bottom: 0; width: 100%; height: 260px; }
  #main .culture_area .inner { max-width: 1200px; margin: 0 auto; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; z-index: 2; }
  #main .culture_area .inner h2 { text-align: center; font-family: "游明朝", YuMincho, "Noto Serif JP", "Sawarabi Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif; line-height: 1.5; font-size: 4rem; margin-bottom: 10px; color: #000; position: relative; z-index: 5; }
  #main .culture_area .inner h2 span { position: relative; padding-top: 60px; display: inline-block; }
  #main .culture_area .inner h2 span::before { content: ""; width: 72px; height: 56px; position: absolute; left: 0; right: 0; top: 0; margin: auto; background: url(/img/index_icon04.svg) no-repeat center center; }
  #main .culture_area .inner .readcopy { text-align: center; color: #000; font-weight: 500; }
  #main .culture_area .inner ul { list-style-type: none; display: flex; justify-content: space-between; margin-top: 55px; margin-left: 0; width: 100%; }
  #main .culture_area .inner ul li { overflow: hidden; height: 300px; width: 580px; list-style-type: none; margin: 0 !important; position: relative; }
  #main .culture_area .inner ul li a { width: 100%; height: 300px; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; color: #fff; text-decoration: none; font-size: 2.2rem; font-weight: 700; position: relative; z-index: 2; }
  #main .culture_area .inner ul li a::before { content: ""; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); position: absolute; left: 0; top: 0; z-index: -1; }
  #main .culture_area .inner ul li a .img { position: absolute; top: 0; left: 0; transition: all 0.6s cubic-bezier(0.14, 1, 0.34, 1); z-index: -2; transform: scale(1); }
  #main .culture_area .inner ul li a span { display: flex; width: 190px; height: 40px; border: 1px solid #fff; position: relative; justify-content: center; align-items: center; color: #fff; margin: 20px auto; text-decoration: none; font-family: "Roboto", sans-serif; font-weight: 700; letter-spacing: 2px; font-size: 1.2rem; transition: all 0.6s cubic-bezier(0.14, 1, 0.34, 1); }
  #main .culture_area .inner ul li a:hover .img { transform: scale(1.15); }
  #main .culture_area .inner ul li a:hover span { background-color: #fff; color: #1263aa; }
  #main .culture_area.animation::after { width: 0%; opacity: 0; transition: width 0.8s cubic-bezier(0.14, 1, 0.34, 1), opacity 0.8s cubic-bezier(0.14, 1, 0.34, 1); }
  #main .culture_area.animation .inner { transform: translateY(60px); opacity: 0; transition: transform 0.8s cubic-bezier(0.14, 1, 0.34, 1), opacity 0.8s cubic-bezier(0.14, 1, 0.34, 1); transition-delay: .2s; }
  #main .culture_area.animation h2, #main .culture_area.animation .readcopy { transform: translateY(60px); opacity: 0; transition: transform 0.8s cubic-bezier(0.14, 1, 0.34, 1), opacity 0.8s cubic-bezier(0.14, 1, 0.34, 1); transition-delay: .4s; }
  #main .culture_area.animation ul { transform: translateY(60px); opacity: 0; transition: transform 0.8s cubic-bezier(0.14, 1, 0.34, 1), opacity 0.8s cubic-bezier(0.14, 1, 0.34, 1); transition-delay: .8s; }
  #main .culture_area.animation.show::after { width: 100%; opacity: 1; }
  #main .culture_area.animation.show .inner { transform: translateY(0); opacity: 1; }
  #main .culture_area.animation.show h2 { transform: translateY(0); opacity: 1; }
  #main .culture_area.animation.show .readcopy { transform: translateY(0); opacity: 1; }
  #main .culture_area.animation.show ul { transform: translateY(0); opacity: 1; }
  #main .environment_area .inner { max-width: 1200px; margin: 0 auto; position: relative; padding: 50px 0 100px; }
  #main .environment_area .inner h2 { text-align: center; font-family: "游明朝", YuMincho, "Noto Serif JP", "Sawarabi Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif; line-height: 1.5; font-size: 4rem; margin-bottom: 10px; position: relative; z-index: 2; }
  #main .environment_area .inner h2 span { position: relative; padding-top: 68px; display: inline-block; }
  #main .environment_area .inner h2 span::before { content: ""; width: 65px; height: 62px; position: absolute; left: 0; right: 0; top: 0; margin: auto; background: url(/img/index_icon03.svg) no-repeat center center; }
  #main .environment_area .inner .readcopy { text-align: center; }
  #main .environment_area .inner ul { list-style-type: none; display: flex; justify-content: space-between; margin-top: 55px; }
  #main .environment_area .inner ul li { width: 600px; list-style-type: none; margin: 0 !important; }
  #main .environment_area .inner ul li a { width: 100%; height: 300px; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; color: #fff; text-decoration: none; font-size: 2.2rem; font-weight: 700; position: relative; }
  #main .environment_area .inner ul li a::before { content: ""; background-size: cover; background-position: center center; background-repeat: no-repeat; width: 100%; height: 100%; position: absolute; transform: scale(1); transition: all 0.6s cubic-bezier(0.14, 1, 0.34, 1); z-index: -1; }
  #main .environment_area .inner ul li a span { display: flex; width: 190px; height: 40px; border: 1px solid #fff; position: relative; justify-content: center; align-items: center; color: #fff; margin: 20px auto; text-decoration: none; font-family: "Roboto", sans-serif; font-weight: 700; letter-spacing: 2px; font-size: 1.2rem; transition: all 0.6s cubic-bezier(0.14, 1, 0.34, 1); }
  #main .environment_area .inner ul li a:hover::before { transform: scale(1.15); }
  #main .environment_area .inner ul li a:hover span { background-color: #fff; color: #1263aa; }
  #main .environment_area .inner ul li.environment01 a::before { background-image: url(/img/index_img9.png); }
  #main .environment_area .inner ul li.environment02 a::before { background-image: url(/img/index_img10.png); }
  #main .environment_area.animation h2 { transform: translateY(60px); opacity: 0; transition: transform 0.8s cubic-bezier(0.14, 1, 0.34, 1), opacity 0.8s cubic-bezier(0.14, 1, 0.34, 1); }
  #main .environment_area.animation .readcopy { transform: translateY(60px); opacity: 0; transition: transform 0.8s cubic-bezier(0.14, 1, 0.34, 1), opacity 0.8s cubic-bezier(0.14, 1, 0.34, 1); transition-delay: .2s; }
  #main .environment_area.animation ul { transform: translateY(60px); opacity: 0; transition: transform 0.8s cubic-bezier(0.14, 1, 0.34, 1), opacity 0.8s cubic-bezier(0.14, 1, 0.34, 1); transition-delay: .6s; }
  #main .environment_area.animation.show { transform: translateX(0px); opacity: 1; }
  #main .environment_area.animation.show h2 { transform: translateY(0); opacity: 1; }
  #main .environment_area.animation.show .readcopy { transform: translateY(0); opacity: 1; }
  #main .environment_area.animation.show ul { transform: translateY(0); opacity: 1; }
  #pageTop { display: none; } }
@media screen and (max-width: 767px) { #mainvisual { background: #f0f0f0; height: 100vh; /* 変数をサポートしていないブラウザのフォールバック */ height: calc(var(--vh, 1vh) * 100); background: url(/img/mainvisual_bg.png) no-repeat center bottom; background-size: cover; }
  #mainvisual .inner { position: relative; margin: 0 auto; height: 100vh; /* 変数をサポートしていないブラウザのフォールバック */ height: calc(var(--vh, 1vh) * 100); display: flex; justify-content: center; align-items: center; }
  #mainvisual h1 { position: relative; margin-top: -25%; }
  #mainvisual h1 span { font-family: "游明朝", YuMincho, "Noto Serif JP", "Sawarabi Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif; line-height: 1.8; font-size: 53px; text-align: center; color: #fff; display: block; }
  #mainvisual h1 span.line02 { text-indent: 50px; }
  #mainvisual h1 em { font-family: "Roboto", sans-serif; top: 89px; text-align: center; width: 100%; position: absolute; font-size: 11px; line-height: 1; color: #fff; font-style: normal; letter-spacing: 2px; }
  #mainvisual .scroll { position: absolute; left: 0; right: 0; bottom: 50px; margin: auto; width: 100px; text-align: center; color: #fff; font-family: "Roboto", sans-serif; font-weight: 700; letter-spacing: 2px; font-size: 1.2rem; cursor: pointer; }
  #mainvisual .scroll a { text-decoration: none; color: #fff; }
  #mainvisual .scroll a span { position: absolute; top: 20px; left: 0; right: 0; margin: auto; width: 0; height: 0; border-style: solid; border-width: 12px 7px 0 7px; border-color: #ffffff transparent transparent transparent; -webkit-animation: sdb 1.5s infinite; animation: sdb 1.5s infinite; }
  .read { padding: 40px 0 100px; text-align: center; position: relative; }
  .read .box p { text-align: center; font-family: "游明朝", YuMincho, "Noto Serif JP", "Sawarabi Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif; line-height: 1.5; font-size: 30px; text-indent: 0.8em; }
  .read .box.animation p { transform: translateY(50px); opacity: 0; transition: transform 1s cubic-bezier(0.14, 1, 0.34, 1), opacity 0.8s cubic-bezier(0.14, 1, 0.34, 1); }
  .read .box.animation p:nth-child(0) { transition-delay: 0s; }
  .read .box.animation p:nth-child(1) { transition-delay: 0.2s; }
  .read .box.animation p:nth-child(2) { transition-delay: 0.4s; }
  .read .box.animation p:nth-child(3) { transition-delay: 0.6s; }
  .read .box.animation.show p { transform: translateY(0px); opacity: 1; }
  .read .ships { display: block; background: url(/img/index_bg02_sp.png) no-repeat center top; width: 133px; height: 1121px; position: absolute; left: 0; right: 0; top: 201px; margin: auto; }
  .read .ships.animation { opacity: 0; transform: translateY(50px); transition-delay: 1s; transition: transform 1s cubic-bezier(0.14, 1, 0.34, 1), opacity 0.8s cubic-bezier(0.14, 1, 0.34, 1); }
  .read .ships.animation.show { opacity: 1; transform: translateY(0px); }
  #main .contents { position: relative; padding-top: 223px; }
  #main .contents::before { content: ""; width: 100%; background: url(/img/index_bg01.png) no-repeat center center; background-size: cover; height: 835px; position: absolute; left: 0; top: 0; z-index: -1; }
  #main .company_area { background-color: #fff; overflow: hidden; box-sizing: border-box; padding-top: 10%; padding-bottom: 10%; }
  #main .company_area .video_area { width: 92%; margin: 0 auto 0; transform: translateY(60px); opacity: 0; transition: transform 0.8s cubic-bezier(0.14, 1, 0.34, 1), opacity 0.8s cubic-bezier(0.14, 1, 0.34, 1); text-align: center; }
  #main .company_area .video_area h2 { text-align: center; font-family: "游明朝", YuMincho, "Noto Serif JP", "Sawarabi Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif; line-height: 1.5; font-size: 3.5rem; margin-bottom: 10px; }
  #main .company_area .video_area h2 span { position: relative; }
  #main .company_area .video_area p { text-align: center; font-size: 1.5rem; }
  #main .company_area .video_area .video { margin-top: 3%; }
  #main .company_area .video_area.show { transform: translateY(0); opacity: 1; }
  #main .company_area .inner { margin: 0 auto; position: relative; padding: 0 0 5%; }
  #main .company_area .inner h2 { text-align: center; font-family: "游明朝", YuMincho, "Noto Serif JP", "Sawarabi Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif; line-height: 1.5; font-size: 3.5rem; margin-bottom: 10px; }
  #main .company_area .inner h2 span { position: relative; padding-top: 65px; display: block; }
  #main .company_area .inner h2 span::before { content: ""; width: 58px; height: 58px; position: absolute; left: 0; right: 0; top: 0; margin: auto; background: url(/img/index_icon01.svg) no-repeat center center; }
  #main .company_area .inner .readcopy { font-size: 1.5rem; text-align: center; }
  #main .company_area .inner ul { list-style-type: none; margin-top: 5%; margin-left: 0; }
  #main .company_area .inner ul li { margin: 5% auto 0; padding: 0; list-style-type: none; width: 300px; text-align: center; font-weight: 700; font-size: 1.5rem; }
  #main .company_area .inner ul li img { padding-bottom: 15px; }
  #main .company_area .inner ul li a { display: flex; width: 190px; height: 40px; border: 1px solid #1263AA; position: relative; justify-content: center; align-items: center; color: #1263AA; margin: 20px auto; background: #fff; text-decoration: none; font-family: "Roboto", sans-serif; font-weight: 700; letter-spacing: 2px; font-size: 1.2rem; transition: all 0.6s cubic-bezier(0.14, 1, 0.34, 1); }
  #main .company_area .inner ul li a::after { content: ""; position: absolute; width: 55px; right: -27px; height: 1px; background: #1263AA; top: 0; bottom: 0; margin: auto; }
  #main .company_area .inner ul li a:hover { background-color: #1263AA; color: #fff; }
  #main .career_area { background: #FDF5F5; }
  #main .career_area .inner { padding: 10% 10% 0%; margin: 0 auto; position: relative; }
  #main .career_area h2 { text-align: center; font-family: "游明朝", YuMincho, "Noto Serif JP", "Sawarabi Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif; line-height: 1.5; font-size: 3.5rem; margin-bottom: 10px; }
  #main .career_area h2 span { position: relative; padding-top: 65px; display: inline-block; }
  #main .career_area h2 span::before { content: ""; width: 75px; height: 58px; position: absolute; left: 0; right: 0; top: 0; margin: auto; background: url(/img/index_icon02.svg) no-repeat center center; }
  #main .career_area .readcopy { text-align: center; font-size: 1.5rem; }
  #main .career_area ul { list-style-type: none; display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 35px; margin-left: 0; }
  #main .career_area ul li { margin: 20px 0 40px; padding: 0; list-style-type: none; width: 48%; text-align: center; font-weight: 500; }
  #main .career_area ul li a { display: block; text-decoration: none; color: #000; transition: color 0.6s cubic-bezier(0.14, 1, 0.34, 1); }
  #main .career_area ul li a .img { position: relative; overflow: hidden; text-align: center; }
  #main .career_area ul li a p { padding-top: 4%; position: relative; font-size: 1.8rem; font-weight: 700; }
  #main .career_area ul li span { display: block; margin-top: 8px; font-size: 1.5rem; }
  #main .culture_area { position: relative; margin-top: 10%; }
  #main .culture_area::after { content: ""; background-color: #DBEAF1; position: absolute; left: 0; bottom: 0; width: 100%; height: calc(260 / 100vw * 768); }
  #main .culture_area .inner { margin: 0 auto; position: relative; padding: 8% 4%; }
  #main .culture_area .inner h2 { text-align: center; font-family: "游明朝", YuMincho, "Noto Serif JP", "Sawarabi Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif; line-height: 1.5; font-size: 3.5rem; margin-bottom: 10px; color: #000; }
  #main .culture_area .inner h2 span { position: relative; padding-top: 60px; display: inline-block; }
  #main .culture_area .inner h2 span::before { content: ""; width: 72px; height: 56px; position: absolute; left: 0; right: 0; top: 0; margin: auto; background: url(/img/index_icon04.svg) no-repeat center center; }
  #main .culture_area .inner .readcopy { text-align: center; color: #000; font-weight: 500; padding: 0 5%; font-size: 1.5rem; }
  #main .culture_area .inner ul { list-style-type: none; margin-top: 5%; margin-left: 0; }
  #main .culture_area .inner ul li { overflow: hidden; height: 200px; list-style-type: none; margin: 4% 0 0; position: relative; }
  #main .culture_area .inner ul li a { width: 100%; height: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; color: #fff; text-decoration: none; font-size: 2.2rem; font-weight: 700; position: relative; z-index: 2; }
  #main .culture_area .inner ul li a::before { content: ""; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); position: absolute; left: 0; top: 0; z-index: -1; }
  #main .culture_area .inner ul li a .img { position: absolute; top: 0; left: 0; transition: all 0.6s cubic-bezier(0.14, 1, 0.34, 1); z-index: -2; transform: scale(1); width: 100%; height: 100%; }
  #main .culture_area .inner ul li a .img img { object-fit: cover; width: 100%; height: 200px; }
  #main .culture_area .inner ul li a span { display: flex; width: 190px; height: 40px; border: 1px solid #fff; position: relative; justify-content: center; align-items: center; color: #fff; margin: 20px auto; text-decoration: none; font-family: "Roboto", sans-serif; font-weight: 700; letter-spacing: 2px; font-size: 1.2rem; transition: all 0.6s cubic-bezier(0.14, 1, 0.34, 1); }
  #main .culture_area .inner ul li a:hover .img { transform: scale(1.15); }
  #main .culture_area .inner ul li a:hover span { background-color: #fff; color: #1263aa; }
  #main .culture_area.animation::after { width: 0%; opacity: 0; transition: width 0.8s cubic-bezier(0.14, 1, 0.34, 1), opacity 0.8s cubic-bezier(0.14, 1, 0.34, 1); }
  #main .culture_area.animation .inner { transform: translateY(60px); opacity: 0; transition: transform 0.8s cubic-bezier(0.14, 1, 0.34, 1), opacity 0.8s cubic-bezier(0.14, 1, 0.34, 1); transition-delay: .2s; }
  #main .culture_area.animation h2, #main .culture_area.animation .readcopy { transform: translateY(60px); opacity: 0; transition: transform 0.8s cubic-bezier(0.14, 1, 0.34, 1), opacity 0.8s cubic-bezier(0.14, 1, 0.34, 1); transition-delay: .4s; }
  #main .culture_area.animation .btn { transform: translateY(60px); opacity: 0; transition: transform 0.8s cubic-bezier(0.14, 1, 0.34, 1), opacity 0.8s cubic-bezier(0.14, 1, 0.34, 1); transition-delay: .8s; }
  #main .culture_area.animation.show::after { width: 100%; opacity: 1; }
  #main .culture_area.animation.show .inner { transform: translateY(0); opacity: 1; }
  #main .culture_area.animation.show h2 { transform: translateY(0); opacity: 1; }
  #main .culture_area.animation.show .readcopy { transform: translateY(0); opacity: 1; }
  #main .culture_area.animation.show .btn { transform: translateY(0); opacity: 1; }
  #main .environment_area .inner { margin: 0 auto; position: relative; padding: 8% 4%; }
  #main .environment_area .inner h2 { text-align: center; font-family: "游明朝", YuMincho, "Noto Serif JP", "Sawarabi Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif; line-height: 1.5; font-size: 3.5rem; margin-bottom: 10px; }
  #main .environment_area .inner h2 span { position: relative; padding-top: 68px; display: inline-block; }
  #main .environment_area .inner h2 span::before { content: ""; width: 65px; height: 62px; position: absolute; left: 0; right: 0; top: 0; margin: auto; background: url(/img/index_icon03.svg) no-repeat center center; }
  #main .environment_area .inner .readcopy { text-align: center; font-size: 1.5rem; }
  #main .environment_area .inner ul { list-style-type: none; margin-top: 5%; margin-left: 0; }
  #main .environment_area .inner ul li { margin-top: 5%; list-style-type: none; }
  #main .environment_area .inner ul li a { width: 100%; height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; background-size: cover; background-position: center center; background-repeat: no-repeat; color: #fff; text-decoration: none; font-size: 2.4rem; font-weight: 700; }
  #main .environment_area .inner ul li a span { display: flex; width: 150px; height: 30px; border: 1px solid #fff; position: relative; justify-content: center; align-items: center; color: #fff; margin: 15px auto; text-decoration: none; font-family: "Roboto", sans-serif; font-weight: 700; letter-spacing: 2px; font-size: 1.2rem; }
  #main .environment_area .inner ul li.environment01 a { background-image: url(/img/index_img9.png); }
  #main .environment_area .inner ul li.environment02 a { background-image: url(/img/index_img10.png); }
  #pageTop { display: none; } }

  /* add 2024 */
  .slick-slide img {
    display: block;
    margin: 0 auto;
}
  button{
      background-color: transparent;
      border: none;
      cursor: pointer;
      outline: none;
      padding: 0;
      appearance: none;
  } 
  #main .movie_area { background-color: #fff; overflow: hidden; box-sizing: border-box; min-width: 1200px; position: relative; }
  #main .movie_area.type01 { background-color: #DBEAF1; }
  #main .movie_area .inner { max-width: 1200px; margin: 0 auto; padding-top: 150px; padding-bottom: 120px; }
  #main .movie_area .inner h2 { text-align: center; font-family: "游明朝", YuMincho, "Noto Serif JP", "Sawarabi Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif; line-height: 1.5; font-size: 4rem; margin-bottom: 10px; }
  #main .movie_area .inner h2 span { position: relative; padding-top: 65px; }
  #main .movie_area .inner h2 span::before { content: ""; width: 58px; height: 58px; position: absolute; left: 0; right: 0; top: 0; margin: auto; background: url(/img/index_icon_movie.svg) no-repeat center center; }
  #main .movie_area .inner ul { 
      display: flex;
      justify-content: center;
      gap: 30px;
      margin-top: 30px;
      margin-left: 0 !important;
  }

  #main .movie_area .inner ul li{ 
      width: 540px;
      list-style-type: none;
      margin: 0 !important;
      padding: 0 !important;
      overflow: hidden;
      border-radius: 8px;
  }

  #main .movie_area .inner ul li a{ 
      display:block;
      transform: scale(1);
      transition: .3s ease;
  }
  #main .movie_area .inner ul li a:hover{ 
      transform: scale(1.1);
  }
  #main .movie_area.animation .img { transform: translateX(60px); opacity: 0; transition: transform 1s ease, opacity 1s ease; transition-delay: .6s; }
  #main .movie_area.animation h2 { transform: translateY(60px); opacity: 0; transition: transform 0.8s cubic-bezier(0.14, 1, 0.34, 1), opacity 0.8s cubic-bezier(0.14, 1, 0.34, 1); }
  #main .movie_area.animation .readcopy { transform: translateY(60px); opacity: 0; transition: transform 0.8s cubic-bezier(0.14, 1, 0.34, 1), opacity 0.8s cubic-bezier(0.14, 1, 0.34, 1); transition-delay: .2s; }
  #main .movie_area.animation ul { transform: translateY(60px); opacity: 0; transition: transform 0.8s cubic-bezier(0.14, 1, 0.34, 1), opacity 0.8s cubic-bezier(0.14, 1, 0.34, 1); transition-delay: .6s; }
  #main .movie_area.animation.show .img { transform: translateX(0px); opacity: 1; }
  #main .movie_area.animation.show h2 { transform: translateY(0); opacity: 1; }
  #main .movie_area.animation.show ul { transform: translateY(0); opacity: 1; }

  @media screen and (max-width: 767px) {
    #main .movie_area { min-width: inherit; position: relative; }
    #main .movie_area .inner { margin: 0 auto; position: relative; padding: 10% 5%; box-sizing: border-box; }
    #main .movie_area .inner h2 { text-align: center; font-family: "游明朝", YuMincho, "Noto Serif JP", "Sawarabi Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif; line-height: 1.5; font-size: 3.5rem; margin-bottom: 10px; }
    #main .movie_area .inner h2 span { position: relative; padding-top: 65px; display: block; }
    #main .movie_area .inner h2 span::before { content: ""; width: 58px; height: 58px; position: absolute; left: 0; right: 0; top: 0; margin: auto; background: url(/img/index_icon_movie.svg) no-repeat center center; }
    #main .movie_area .inner ul { 
        display: flex;
       flex-direction: column;
       gap: 10px;
       margin-top: 10px;
    }
    #main .movie_area .inner ul li{ 
        width: 100%;
    }

  }