@charset "UTF-8";
/* ==========================================================
0～768px
========================================================== */
@media screen and (max-width: 768px) { body { font-size: 1.5rem; }
  .pc { display: none; }
  /* header ----------------------------------------------------------- */
  .head__wrap { padding: 5px 5px 0; display: block; }
  .head__inner { height: 70px; display: block; padding: 0; padding-left: 10px; border-radius: 10px; }
  .head__logo { display: block; width: calc(100vw - 100px); padding-right: 0; /*padding-top: 60px;/*fix分*/ }
  .head__logo .logo { width: 150px; padding-top: 19px; }
  /* gnav ----------------------------------------------------------- */
  .hamburger { background: #fff; display: block; width: 60px; height: 60px; padding: 30px 15px; background: #29a86e; border-radius: 10px; position: fixed; top: 10px; right: 10px; z-index: 10000; touch-action: manipulation; }
  .hamburger__icon { position: relative; }
  .hamburger__icon, .hamburger__icon:before, .hamburger__icon:after { display: block; width: 30px; height: 1px; background-color: #fff !important; transition-property: background-color, transform; transition-duration: 0.4s; }
  .hamburger__icon:before, .hamburger__icon:after { position: absolute; content: ""; }
  .hamburger__icon:before { top: -7px; }
  .hamburger__icon:after { top: 7px; }
  .hamburger.active { border-radius: 10px; }
  .hamburger.active .hamburger__icon { background-color: transparent; }
  .hamburger.active .hamburger__icon:before, .hamburger.active .hamburger__icon:after { background-color: #fff; }
  .hamburger.active .hamburger__icon:before { transform: translateY(7px) rotate(45deg); }
  .hamburger.active .hamburger__icon:after { transform: translateY(-7px) rotate(-45deg); }
  .hamburger.active .hamburger__icon { width: 0; }
  .fat-nav { width: 100%; height: 100%; position: fixed; top: 0; left: 0; border-radius: 10px; display: none; background: #ebf6f0; transition-property: transform; transition-duration: 0.4s; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; z-index: 9999; }
  .fat-nav__wrapper { width: 100%; height: auto; }
  .fat-nav.active { transform: scale(1); }
  .head__logo--sp { display: block; width: calc(100vw - 100px); padding-right: 0; position: absolute; top: 2px; left: 10px; }
  .head__logo--sp .logo { width: 150px; padding-top: 17px; }
  #global-nav { padding: 90px 30px 40px; height: auto; }
  #global-nav .menu { width: 100%; height: auto; display: block; }
  #global-nav .menu > li { padding: .2em 0; }
  #global-nav .menu > li a { font-size: 1.8rem; padding: 1.4em 1.6em; background: #fff; border-radius: 10px; }
  .fat-nav__wrapper { display: block; }
  .head__cta { display: none; }
  .head__cta--sp { position: relative; white-space: nowrap; margin-top: 30px; }
  .head__cta--sp .btn--contact { border-radius: 10px; font-size: 1.8rem; padding: 1.5em 3.6em 1.2em 3.6em; }
  .head__cta--sp .head__cta__tel { inline-size: fit-content; margin-inline: auto; margin-top: 20px; padding: 0; }
  /* visual ----------------------------------------------------------- */
  .tp__visual__inner--sp { height: 100%; position: relative; }
  .tp__visual__img--sp { width: 100%; aspect-ratio: 750 / 1081; }
  .tp__visual__img--sp img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
  .tp__visual__copy--sp { position: absolute; top: 32vw; right: 5vw; }
  .tp__visual__copy--sp img { width: 70vw; transition: all .3s; }
  .tp__visual__copy--sp p img { opacity: 0; transform: translateX(-60px); /* モバイルはちょい控えめでも */ animation: catch-slide-in-sp 0.6s cubic-bezier(0.75, 0, 0.22, 1) 0.1s forwards; }
  .tp__visual__copy--sp p img.is-show { opacity: 1; transform: translateX(0); }
  /* #tp__intro ----------------------------------------------------------- */
  #tp__intro { background: linear-gradient(to top, #ffffff 0%, #f8faf7 100%); }
  .tp__intro__logo { margin-top: -10vw; }
  .tp__intro__logo img { width: 40vw; }
  .tp__intro__type { margin-top: -12vw; }
  .tp__intro__type img { width: 90vw; }
  .tp__intro__hamon { margin-top: -13vw; }
  .tp__intro__inner { margin-top: 3vw; padding: 0 5% 100vw; background: url("../images/tp_intro_bg.webp") no-repeat bottom center #f8faf7; }
  .tp__intro__wrap { display: block; }
  .tp__intro__detail { width: 100%; }
  .tp__intro__txt { width: 100%; }
  .tp__intro__txt p { font-size: 1.6rem; }
  .tp__intro__copy { margin-bottom: 4em; }
  .tp__intro__copy--ja { font-size: 10vw; line-height: 1.5; padding-top: 6vw; }
  .tp__intro__copy--tate { font-size: 1.4rem; padding-right: 2em; }
  .tp__intro__btn { margin-top: 60px; }
  .btn--glow { font-size: 1.7rem; }
  .btn--glow span::after { background-size: cover; width: 100px; height: 100px; right: -120px; top: -36px; }
  .tp__intro__img { width: 90%; padding-left: 0; margin-top: 80px; }
  .tp__intro--img01 { width: 40vw; left: 5%; }
  .tp__intro--img02 { width: 70vw; top: 18vw; }
  .tp__intro--shape_glow01 { width: 55vw; bottom: -100vw; left: 0; }
  .tp__intro--img03 { width: 40vw; bottom: -15vw; right: -5%; }
  .tp__intro--img01, .tp__intro--img02, .tp__intro--img03 { border-radius: 10px; }
  /* #tp__service ----------------------------------------------------------- */
  #tp__service { background-size: 200%; padding-top: 20vw; }
  .tp__service__inner { width: 90%; padding-top: 0; }
  .ttl--ja { font-size: 1.4rem; padding-top: 40px; margin-bottom: 1em; }
  .ttl--en { font-size: 6rem; }
  .tp__service__desc { margin-top: 2em; text-align: left; padding: 0 5%; }
  .tp__service__list { display: block; margin-top: 32px; }
  .tp__service__l, .tp__service__r { width: 100%; height: auto; }
  .tp__service__l { padding-top: 30vw; padding-bottom: 24vw; margin-bottom: 2px; }
  .tp__service__l::before { left: 20px; top: 60px; }
  .tp__service__bg { width: 65vw; height: 55vw; }
  .tp__service__bg::before { width: 15vw; }
  .tp__service__num { width: 60px; }
  .tp__service__item { padding-left: 16%; }
  .tp__service__item .ja { font-size: 7vw; }
  .tp__service__item .en { font-size: 1.2rem; margin-top: 1.2em; }
  .tp__service__item .txt { margin-top: 18vw; padding-right: 10%; }
  .tp__service__more { right: 60px; bottom: 40px; }
  .btn--more { font-size: 1.2rem; }
  .btn--more span::after { background-size: cover; width: 75px; height: 75px; right: -60px; top: -29px; }
  .tp__service__box { padding-top: 30vw; padding-bottom: 80vw; }
  .tp__service__box.service02 { margin-bottom: 2px; }
  .tp__service__box::before { left: 20px; top: 60px; }
  .tp__service__box .tp__service__bg { width: 65vw; height: 55vw; }
  .tp__service__box .tp__service__item { padding-left: 16%; }
  .tp__service__box .tp__service__item .ja { font-size: 7vw; }
  .tp__service__box .tp__service__item .txt { margin-top: 18vw; }
  .tp__service__btn { width: 85%; margin-top: 40px; }
  .tp__service__btn .btn--normal { width: auto; }
  .btn--normal { padding: 1.5em; font-size: 1.7rem; }
  .btn--normal::after { background-size: contain; width: 40px; height: 40px; top: 50%; right: 10px; transform: translateY(-50%); }
  /* .tp__value ----------------------------------------------------------- */
  #tp__value { padding-top: 240px; }
  #tp__value::before { width: calc((438 / 1600) * 100vw); height: calc((720 / 1600) * 100vw); top: 40vw; }
  #tp__value::after { width: 80vw; height: 80vw; left: -15vw; top: 20vw; }
  .tp__value__img--sp { text-align: right; position: relative; }
  .tp__value__img--sp .img--bg { border-radius: 320px 0 0 320px; width: 76vw; }
  .tp__value__img--sp .img--tanktruck { position: absolute; bottom: -8vw; right: 8vw; width: 56vw; }
  .ttl--value { top: -25vw; left: 5vw; }
  .ttl--value .ttl--value--tate { font-size: 1.4rem; padding-left: .8em; margin-top: 20px; margin-left: 0; }
  .ttl--value .ttl--value--tate span { font-size: 1.4rem; padding-top: 20px; }
  .ttl--value .ttl--value--tate span::before { width: 12px; height: 12px; left: .7em; }
  .ttl--value .ttl--value--tate em { font-size: 1.8rem; }
  .tp__value__list { padding: 0 2% 80px; margin-top: 26vw; background: none; }
  .tp__value__list ul { display: block; }
  .tp__value__list li { width: 100%; padding: 30px 8% 30px; margin-bottom: 40px; position: relative; border-radius: 15px; background: #fff; }
  .tp__value__list li:not(:nth-child(4)) { border-right: none; }
  .tp__value__list .num { width: 90px; height: 90px; top: -25px; right: 0; left: auto; transform: none; }
  .tp__value__list .ttl { font-size: 2rem; margin-top: 1.6em; text-align: left; }
  .tp__value__list .txt { font-size: 1.5rem; margin-top: 1.4em; }
  /* #tp__recruit ----------------------------------------------------------- */
  #tp__recruit { padding-inline-end: 0; background: #29a86e; }
  #tp__recruit::before { display: none; }
  #tp__recruit::after { display: none; }
  .tp__recruit__inner { width: 100%; flex-direction: column-reverse; }
  .tp__recruit__detail { width: 95%; max-width: inherit; border-top-right-radius: 240px; padding-block-end: clamp(80px, 12.5vw, 220px); padding-bottom: 100px !important; text-align: left; position: relative; }
  .ttl--recruit { text-align: left; }
  .ttl--recruit--ja { font-size: 1.4rem; text-align: left; }
  .ttl--recruit--en { font-size: 5rem; text-align: left; }
  .tp__recruit__txt { margin-top: 2.4em; width: 100%; padding-left: 0; }
  .tp__recruit__btn { width: 100%; margin-inline: inherit; }
  .tp__recruit__btn .btn--normal { width: 100%; }
  .tp__recruit__img { max-width: inherit; width: 100%; height: 100%; padding-bottom: 30px; overflow: inherit; }
  .tp__recruit__copy { top: 80vw; left: 72vw; }
  .tp__recruit__copy span { font-size: 2rem; }
  .tp__recruit__copy span.second { padding-bottom: 0; }
  .anime__load { width: 100%; height: 120px; }
  /* .ft__cta ----------------------------------------------------------- */
  .ft__cta { padding-top: 20px; }
  .ft__cta__inner { padding: 60px 2% 0; background: url("../images/common/ft_contact_bg.jpg") no-repeat top left/cover; }
  .tp__ttl--ja { font-size: 1.7rem; }
  .tp__ttl--en { font-size: 5rem; }
  .ft__cta__txt { font-size: 1.5rem; }
  .ft__cta__way { width: 100%; margin-top: 40px; border-radius: 50px; display: block; }
  .ft__cta__tel { width: 100%; padding-top: 40px; }
  .ft__cta__tel h3 { font-size: 1.5rem; inline-size: fit-content; margin-inline: auto; }
  .ft__cta__tel .tel { font-size: 3.6rem; background: url("../images/common/icon_tel_w.svg") no-repeat 0 50%; background-size: 20px; padding-left: 30px; }
  .ft__cta__tel .time { font-size: 1.2rem; }
  .ft__cta__btn { width: 90%; margin: 0 auto; padding: 30px 0 20px; }
  .btn--cta { width: 100%; padding: 1.5em; font-size: 1.7rem; }
  .btn--cta::after { background-size: 40px; width: 40px; height: 40px; top: 50%; right: 5px; }
  /* footer ----------------------------------------------------------- */
  .ft__wrap { padding-top: 80px; padding-bottom: 40px; overflow: hidden; }
  .ft__wrap::after { bottom: 0; background-size: 1000px; width: 100%; height: 300px; z-index: -1; }
  .ft__inner { display: block; padding-bottom: 200px; }
  .ft__info { width: 100%; margin-bottom: 4em; }
  .ft__info .tel { font-size: 1.4rem; line-height: 1.6; }
  .ft__info__logo { margin-bottom: 24px; }
  .ft__info__logo img { width: 200px; }
  .ft__address { display: block; }
  .ft__address .txt { font-size: 1.4rem; line-height: 1.6; white-space: nowrap; }
  .ft__address .gmapbtn { inline-size: fit-content; margin: .8em 0 1.2em; padding-right: 2em; }
  .ft__link { width: 100%; display: block; }
  .ft__link__box { width: 100%; }
  .ft__link__box.spbtm { margin-top: 3em; }
  .ft__link__ttl { font-size: 1.8rem; }
  .ft__link__ttl .contents { font-size: 2rem; }
  .ft__link__list { margin-top: 16px; }
  .ft__link__list li { margin-bottom: .5em; font-size: 1.4rem; }
  .ft__link__list li a { line-height: 1.6; }
  .ft__link__list li a:hover { opacity: 0.5; filter: alpha(opacity=50); color: #29a86e; }
  .ft__link__list li::after { content: "/"; color: #fff; padding-left: 1em; margin-right: 1em; }
  .ft__link__list.group li a { background: url("../images/common/icon_window.svg") no-repeat 100% 60%/13px; padding-right: 1.5em; }
  .ft__copyright { width: min(90%, 1580px); margin: 0 auto; text-align: center; }
  .pagetop { display: none; }
  /* sub_common ----------------------------------------------------------- */
  .sub__visual { padding-bottom: 30vw; background-size: 280% auto; }
  .sub__visual__inner { height: 56vw; background: url("../images/common/sub_visual.jpg") no-repeat top center/cover; }
  .sub__visual__ttl .ja { font-size: 1.7rem; padding-top: 30vw; }
  .sub__visual__ttl .en { font-size: 17vw; bottom: -3vw; }
  .breadCrumb { padding: 2em 0 0 0; }
  .breadCrumb li { font-size: 1.1rem; }
  /* WORKS ----------------------------------------------------------- */
  .works__intro { padding: 0 5%; }
  .works__intro__inner { display: block; }
  .works__intro__copy { width: 100%; inline-size: auto; margin-inline: 0; }
  .works__intro__copy .intro__copy { font-size: 8vw; }
  .works__intro__txt { width: 100%; padding-top: 40px; }
  .works__business__visual { padding-top: 30vw; }
  .ttl--business { bottom: -10vw; left: 5vw; }
  .ttl--business .ja { font-size: 1.8rem; }
  .ttl--business .en { font-size: 18vw; }
  .business__copy { bottom: auto; top: 10vw; left: 70vw; right: auto; overflow: visible; z-index: 10; }
  .business__copy p { line-height: 1.6; letter-spacing: .2em; writing-mode: vertical-rl; }
  .business__copy span { font-size: 1.6rem; }
  .business__visual { width: 95%; height: calc((240 / 375) * 100vw); /*overflow: hidden;*/ }
  .business__visual img { width: 100%; height: 100%; object-fit: cover; object-position: right center; }
  .business__glow { width: 50vw; height: 50vw; top: 0; right: 0; }
  .works__business__list { padding: 80px 5%; }
  .business__list { margin: 0 auto 60px; padding: 20px; padding-left: 0; display: block; }
  .business__list .en-num { top: 65vw; right: 0; opacity: .6; }
  .business__img { width: 100%; }
  .business__img .business_tag { width: 16px; }
  .business__detail { width: 100%; padding-left: 30px; padding-right: 10px; padding-bottom: 30px; margin-top: 60px; }
  .business__detail .en { padding-left: 20px; }
  .business__detail .en::before { background-size: 10px; }
  .business__detail .ja { font-size: 2.8rem; }
  .detail__txt__info { height: auto; display: block; padding: 1em; margin-top: 2em; }
  .detail__txt__info .head__cta__tel { inline-size: fit-content; margin-inline: auto; }
  .detail__txt__info .btn--contact { margin-top: 1em; }
  .detail__note { padding: 1.6em 2em; display: block; margin-top: 2em; }
  .detail__note dt { padding-right: 0; margin-bottom: 1em; }
  .works__flow__inner { padding-top: 60px; padding-bottom: 60px; }
  .works__flow__list { width: min(90%, 1280px); margin: 40px auto 0; padding: 20px; }
  .works__flow__list ul { width: 100%; display: block; }
  .flox__box { width: 80%; margin-left: auto; }
  .flox__box .flow__num { font-size: 4rem; top: 10px; left: -15%; }
  .flox__box::before { content: ''; position: absolute; width: 1px; height: calc(100% - 100px); background: rgba(41, 168, 110, 0.2); top: 60px; left: -35px; }
  .flow__ttl { height: 60px; font-size: 18px; }
  .flow__ttl::after { display: none; }
  .flow__icon { height: 120px; }
  .flow__txt { padding: 0 0 40px 0; }
  /* COMPANY ----------------------------------------------------------- */
  .company__message__inner { width: 100%; margin-top: 40px; padding-bottom: 80px; display: block; }
  .company__message__inner::before { background-size: 160% auto; width: 100%; top: -40vw; }
  .company__message__img { width: 90%; margin: 0 auto; }
  .company__message__img img { box-shadow: 6px 10px 20px rgba(0, 0, 0, 0.2); }
  .company__message__detail { width: 100%; padding-right: 0; }
  .message__copy { font-size: 7vw; padding-left: 1em; margin-top: 2em; margin-bottom: 2em; text-align: lefet; }
  .message__txt { padding-left: 1.8em; }
  .representative { padding-right: 2em; }
  .representative .name { font-size: 2rem; }
  .representative .name .small { font-size: 1.2rem; }
  .company__profile { padding-bottom: 70px; }
  .company__profile::after { width: 96vw; }
  .company__profile__inner { width: min(80%, 1520px); display: block; padding-top: 70px; }
  .ttl--left .l--ttl--ja { font-size: 1.8rem; padding-left: 24px; }
  .ttl--left .l--ttl--ja::before { width: 10px; top: -2px; }
  .ttl--left .l--ttl--en { font-size: 16vw; }
  .profile__detail { width: 100%; padding-left: 0; padding-top: 40px; }
  th, td { width: 100%; display: block; padding: 1.2em 0; border-bottom: 1px solid rgba(41, 168, 110, 0.2); line-height: 1.7; }
  tr:last-child th, tr:last-child td { border-bottom: none; }
  th { border-bottom: none; padding-right: 0; padding-bottom: 0; }
  .gmap { margin: 30px 0; }
  .gbtn--more { margin-bottom: 30px; }
  .gbtn--more span { padding-right: 48px; }
  .gbtn--more span::after { background-size: 60px; width: 100%; height: 75px; right: -10%; top: -26px; }
  .philo__visual { height: 55vw; overflow: hidden; }
  .philo__visual img { width: 100%; height: 100%; object-fit: cover; object-position: 15% center; }
  .philo__contents { margin-top: 0; padding-bottom: 80px; }
  .philo__contents .en { font-size: 14vw; top: -6vw; padding-left: 2vw; }
  .philo__detail { padding-left: 1em; }
  .copy--tate--white { font-size: 2rem; }
  .copy--tate--white span { padding-top: 24px; }
  .copy--tate--white span::before { left: 5px; width: 12px; height: 12px; border: 4px solid #fff; }
  .copy--tate--white::after { height: 50%; }
  .philo__txt { padding-left: 10vw; padding-top: 1em; }
  .company__motto { width: 100%; padding: 60px 5% 20px; display: block; }
  .company__motto::after { background-size: 150%; }
  .motto__box { margin-bottom: 60px; }
  .motto__box .item { font-size: 2rem; margin-right: 1.5em; }
  .motto__box .list { padding-top: 60px; padding-right: 0; }
  /* RECRUIT ----------------------------------------------------------- */
  .rec__intro__inner { padding-bottom: 80px; }
  .rec__intro__copy { font-size: 8vw; text-align: left; }
  .rec__intro__message { padding: 0 5%; }
  .rec__intro__message p { font-size: 1.6rem; text-align: left; }
  .rec__gallery__inner { padding: 0 3vw; background: url("../images/rec_load.jpg") no-repeat center center/contain; }
  .rec__gallery__inner ul { gap: 2vw; justify-content: flex-start; }
  .rec__gallery__inner img { width: clamp(240px, 80vw, 400px); }
  .rec__support { padding-bottom: 100px; border-bottom-left-radius: clamp(60px, 30vw, 600px); border-bottom-right-radius: clamp(60px, 30vw, 600px); }
  .rec__support__inner { padding: 100px 0 0 0; }
  .rec__support__ttl .ja { font-size: 1.8rem; }
  .rec__support__ttl .en { font-size: 16vw; }
  .rec__support__list { margin-top: 0; }
  .rec__support__list li { display: block; padding-top: 48px; }
  .rec__support__list li:not(:last-child) { padding-bottom: 80px; }
  .rec__support__list li:not(:last-child)::after { height: 3px; background: repeating-linear-gradient(to right, #fff, #fff 12px, transparent 12px, transparent 36px); }
  .rec__support__img { inline-size: fit-content; margin-inline: auto; margin-bottom: 3em; }
  .rec__support__img img { width: 80vw; }
  .rec__support__img .num { width: 90px; margin-bottom: -90px; }
  .rec__support__detail { padding: 0 5%; }
  .rec__support__detail .copy { margin-bottom: 1.6em; }
  .rec__support__detail .copy span { font-size: 2.4rem; }
  .rec__guide { padding-top: 70px; padding-bottom: 40px; }
  .rec__guide__nav { margin-top: 70px; margin-bottom: 60px; }
  .rec__guide__nav li { text-align: left; margin: 0 .8em; }
  .rec__guide__nav a { font-size: 1.5rem; padding: 0 3em .6em 1em; }
  .rec__guide__nav a::after { width: 10px; top: 8px; }
  .rec__guide__list { margin: 0 auto 60px; }
  .rec__guide__position { padding: 1em; font-size: 1.8rem; }
  .rec__guide__detail { margin-top: 10px; padding: 10px 5vw; }
  .rec__guide__contact .ft__cta__way { border-radius: 20px; }
  .rec__guide__contact .ft__cta__tel { padding-top: 20px; }
  .rec__guide__contact .ft__cta__btn { padding: 20px 0 20px; } }
/* -----@media screen and (max-width:768px) ------ */