@charset "utf-8";
/*
斧商店(2025)
*/

:root {
  --unit-size: 6px;
}

@media (min-width: 767px) {
  :root {
    --unit-size: 8px;
  }
}


html,
body {
  overflow-x: hidden;
  font-size: 16px;
  line-height: 1.9rem;
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}
@media (min-width: 768px) {
  html,
  body {
    font-size: 17px;
  }
}
@media (min-width: 992px) {
  html,
  body {
    font-size: 18px;
  }
}
@media (min-width: 1200px) {
  html,
  body {
    font-size: 19px;
  }
}
@media (min-width: 1400px) {
  html,
  body {
    font-size: 20px;
  }
}
body {
  opacity: 0;
  transition: opacity 0.05s;
}
body.loaded {
  opacity: 1;
}

.font-g {
    font-family: "Hiragino Kaku Gothic ProN","BIZ UDPGothic", "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
}

.font-m {
	font-family: "TsukuOldMinPro-R", "Hiragino Mincho ProN", "BIZ UDPMincho", "ヒラギノ明朝 Pro W3","Hiragino Mincho Pro",source-han-serif-japanese,"游明朝","Yu Mincho","游明朝体",YuMincho,"HGS明朝E","ＭＳ Ｐ明朝","MS PMincho",serif;
}

.bold {
	font-weight:700;
}

img{
    width:auto;
    max-width: 100%;
    height: auto;
}




/* マージン、パディング
==================================================== */
.mt-40, .my-40 { margin-top:40px; }
.mb-40, .my-40 { margin-bottom:40px; }
.ms-40, .mx-40 { margin-left: 40px; }
.me-40, .mx-40 { margin-right: 40px; }
.pt-40, .py-40 { padding-top:40px; }
.pb-40, .py-40 { padding-bottom:40px; }
.ps-40, .px-40 { padding-left:min(calc(40 / 1140 * 100vw), 40px); }
.pe-40, .px-40 { padding-right:min(calc(40 / 1140 * 100vw), 40px); }
.mt-80, .my-80 { margin-top:80px; }
.mb-80, .my-80 { margin-bottom:80px; }
.ms-80, .mx-80 { margin-left: 80px; }
.me-80, .mx-80 { margin-right: 80px; }
.pt-80, .py-80 { padding-top:80px; }
.pb-80, .py-80 { padding-bottom:80px; }
.ps-80, .px-80 { padding-left:min(calc(80 / 1140 * 100vw), 80px); }
.pe-80, .px-80 { padding-right:min(calc(80 / 1140 * 100vw), 80px); }
.mt-110, .my-110 { margin-top:110px; }
.mb-110, .my-110 { margin-bottom:110px; }
.pt-110, .py-110 { padding-top:110px; }
.pb-110, .py-110 { padding-bottom:110px; }
.ps-110, .px-110 { padding-left: 110px; }
.pe-110, .px-110 { padding-right: 110px; }

@media (max-width: 767.98px) {
	.mt-40, .my-40, .mt-80, .my-80 { margin-top:30px; }
	.mb-40, .my-40, .mb-80, .my-80 { margin-bottom:30px; }
	.mt-110, .my-110 { margin-top:60px; }
	.mb-110, .my-110 { margin-bottom:60px; }
    .ms-40, .mx-40, .ms-80, .mx-80 { margin-left: 30px; }
    .me-40, .mx-40, .me-80, .mx-80 { margin-right: 30px; }
	.pt-40, .py-40, .pt-80, .py-80 { padding-top:30px; }
	.pb-40, .py-40, .pb-80, .py-80 { padding-bottom:30px; }
	.ps-40, .px-40, .ps-80 { padding-left:30px; }
	.pe-40, .px-40, .pe-80 { padding-right:30px; }
	.pt-110, .py-110 { padding-top:60px; }
	.pb-110, .py-110 { padding-bottom:60px; }
	.ps-110, .px-110 { padding-left:40px; }
	.pe-110, .px-110 { padding-right:40px; }
}

.lh-1 { line-height: 1em; }
.lh-2 { line-height: 2em; }
.lh-3 { line-height: 3em; }




/* リンク
==================================================== */
a {
	color: #FFF;
}

@media (min-width: 992px) {
    a[href*="tel:"] {
        pointer-events: none;
        cursor: default;
        text-decoration: none;
    }
}


/* Header
==================================================== */
header {
  position: absolute;
  width: 100%;
  padding: 10px 0;
  z-index: 10;
  -webkit-transition: .2s;
  transition: .2s;
}
header button#toggle {
  position: relative;
  border: none;
  padding: 0;
  z-index: 31;
  background: none;
  cursor: pointer;
}
header .navibar {
  width: calc(100% - 15% - 100px);
}
header .onlineshop {
  max-width: 100px;
}
header nav ul {
  padding-top: 5px;
  padding-left: 0;
  margin-bottom: 7px;
  list-style: none;
  margin-left: auto;
  margin-right: 0;
}
header nav ul li {
  width: auto !important;
  max-width: auto !important;
  line-height: 1em;
}
@media (min-width: 992px) {
  header nav ul li {
    font-size: 16px;
  }
}
@media (min-width: 1200px) {
  header nav ul li {
    font-size: 17px;
  }
}
header nav ul li a {
  color: #fff;
  text-decoration: none;
}
header nav ul.navicon img {
  height: 30px;
}
@media (max-width: 991px) {
  header {
    padding: 0 0 10px;
  }
  header .navibar {
    width: calc(100% - 150px - 60px - 30px);
  }
  header .onlineshop {
    width: 60px;
  }
  header ul.navicon img {
    height: 25px !important;
  }
  header #navContents {
    display: block;
    position: fixed;
    top: 0;
    right: -350px;
    width: 80%;
    height: 100%;
    max-width: 350px;
    background: #fff;
    -webkit-box-shadow: -2px 0px 5px rgba(0, 0, 0, 0.13);
            box-shadow: -2px 0px 5px rgba(0, 0, 0, 0.13);
    z-index: 20;
    padding-top: 40px;
    padding-left: 50px;
    -webkit-transition: .1s;
    transition: .1s;
  }
  header #navContents ul {
    display: block;
  }
  header #navContents ul li {
    display: block;
    width: 100%;
    border-right: none;
    padding: 0;
    margin-bottom: 20px;
  }
  header #navContents ul li a {
    display: inline-block;
    padding: 10px 20px;
    color: #333;
  }
  header #navContents.open {
    right: 0;
  }
}
header .header-contact {
  display: none;
}
header .head-logo:nth-child(2) {
  display: none;
}
header.infixed {
  position: fixed;
  top: -90px;
  padding-top: 10px;
  background: #fff;
  -webkit-animation: headerfixed .2s ease 0s normal forwards;
          animation: headerfixed .2s ease 0s normal forwards;
}
@media (max-width: 576px) {
  header.infixed {
    padding: 5px 0;
  }
}
header.infixed .head-logo:nth-child(1) {
  display: none;
}
header.infixed .head-logo:nth-child(2) {
  display: block;
  height: 40px;
  max-height: 100%;
}
header.infixed .head-logo:nth-child(2) img {
  height: 100%;
  width: auto;
}
header.infixed .contactLi {
  display: none;
}
header.infixed .header-contact {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-right: 0px;
  margin-bottom: 0;
}
header.infixed .header-contact img {
  height: 25px;
  width: auto;
}
header.infixed #navContents a {
  color: #333;
}
@media (min-width: 992px) {
  header.infixed {
    top: -90px;
  }
  header.infixed .head-logo:nth-child(2) {
    height: 70px;
  }
  header.infixed .header-contact {
    padding-right: 0;
  }
}
@media (max-width: 767px) {
  header.infixed .header-contact {
      padding-right: 18px;
  }
  header.infixed .header-contact img {
    width: 100%;
  }
}

@-webkit-keyframes headerfixed {
  100% {
    top: 0;
  }
}

@keyframes headerfixed {
  100% {
    top: 0;
  }
}

#modal-bk{
	position:fixed;
	background: #33333333;
	width: 0vw;
	height: 100vh;
	left: 0;
	top: 0;
}
#modal-bk.open{
    width: 100vw;
}


.mt-top { margin-top: 500px;}

@media (max-width: 767.98px) {
	.mt-top { margin-top: 50px;}
}

/* 共通
============================ */
.container {
  max-width: 1200px;
  padding: 0 calc(var(--unit-size) * 3);
}

section {
  padding: calc(var(--unit-size) * 12) 0;
}
section h2 {
  margin-bottom: calc(var(--unit-size) * 5);
  line-height: 1.5em;
  letter-spacing: 2px;
}
section h2 img {
  max-height: 20px;
}
@media (min-width: 768px) {
  section h2 img {
    max-height: 25px;
  }
}
section > h2 {
  margin-bottom: calc(var(--unit-size) * 12);
}

.btn-more {
  background: #31312d;
  color: #fff !important;
  display: block;
  text-align: center;
  text-decoration: none;
  line-height: 1.2;
  padding: calc(var(--unit-size) * 3) 1rem;
  position: relative;
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
  max-width: 510px;
  margin-top: calc(var(--unit-size) * 8);
  letter-spacing: 2px;
}
.btn-more:hover {
  background-color: #231815;
  color: #FFF !important;
}
.btn-more::after {
  content: '';
  display: block;
  border-bottom: 1px solid #E60012;
  width: 30px;
  height: 0;
  position: absolute;
  top: 50%;
  right: 0;
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
}
.btn-more:hover::after {
  -webkit-transform: translateX(50%);
          transform: translateX(50%);
}

/* トップページ
============================ */
.top-main {
  position: relative;
}

.opening_1 {
  position: absolute;
  width: 100%;
  height: 100vh;
  -webkit-transition: opacity 1.45s ease .05s;
  transition: opacity 1.45s ease .05s;
  background: #bd1c21;
  background-size: cover;
  opacity: 1;
  z-index: 21;
}
.opening_1 .opening_text {
  position: absolute;
  width: 80%;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-clip-path: inset(0px 50% 0px 50%);
          clip-path: inset(0px 50% 0px 50%);
  -webkit-animation: openingtext 1s ease 0.5s normal forwards;
          animation: openingtext 1s ease 0.5s normal forwards;
  -webkit-transition: 1s;
  transition: 1s;
  text-align: center;
  color: #fff;
}

.opening_2 {
  position: absolute;
  opacity: 1;
  width: 100%;
  height: 100vh;
  -webkit-transition: opacity 1.5s ease;
  transition: opacity 1.5s ease;
  background: #bd1c21;
  background-size: cover;
  z-index: 20;
  background: url(../img/top/opening-m.webp) center center;
  background-size: cover;
}
@media (min-width: 768px) {
  .opening_2 {
    background: url(../img/top/opening.webp) center center;
    background-size: cover;
  }
}
.opening_2 .opening_text {
  position: absolute;
  width: 80%;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-transition: 1s;
  transition: 1s;
  text-align: center;
  color: #fff;
}

.main-text {
  position: absolute;
  top: 50%;
  left: 51%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 18vw;
  max-width: 150px;
  z-index: 1;
}

.on {
  -webkit-animation: openinfade 1.5s ease 0s normal forwards;
          animation: openinfade 1.5s ease 0s normal forwards;
}

.top-slide {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.top-slide > div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  overflow: hidden;
  -webkit-transition: opacity 2s ease;
  transition: opacity 2s ease;
  z-index: 0;
}
.top-slide > div img {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-transition: -webkit-transform 2s ease;
  transition: -webkit-transform 2s ease;
  transition: transform 3s ease;
  transition: transform 3s ease, -webkit-transform 2s ease;
}
.top-slide > div.active {
  opacity: 1;
  z-index: 1;
  -webkit-animation: zoomIn 4s linear forwards;
          animation: zoomIn 4s linear forwards;
}
.top-slide > div.remove {
  opacity: 0;
  z-index: -1;
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
}

@-webkit-keyframes zoomIn {
  100% {
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
  }
}

@keyframes zoomIn {
  100% {
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
  }
}
@-webkit-keyframes openingtext {
  100% {
    -webkit-clip-path: inset(0px 0% 0px 0%);
            clip-path: inset(0px 0% 0px 0%);
  }
}
@keyframes openingtext {
  100% {
    -webkit-clip-path: inset(0px 0% 0px 0%);
            clip-path: inset(0px 0% 0px 0%);
  }
}
@-webkit-keyframes openinfade {
  100% {
    opacity: 0;
  }
}
@keyframes openinfade {
  100% {
    opacity: 0;
  }
}
.line {
  width: 100%;
  height: 4em;
  display: block;
  position: absolute;
  overflow: hidden;
  left: 25px;
  bottom: 0;
  width: 10px;
}
.line:before {
  content: '';
  height: 100%;
  border-left: solid 1px #000;
  position: absolute;
  -webkit-animation: wrap_on 1s ease-in-out 1.5s forwards;
          animation: wrap_on 1s ease-in-out 1.5s forwards;
}
.line:after {
  content: '';
  height: 100%;
  border-left: solid 1px #fff;
  position: absolute;
  z-index: 1;
  -webkit-animation: scroll_border 2.5s ease-in-out 2.5s infinite;
          animation: scroll_border 2.5s ease-in-out 2.5s infinite;
}

@-webkit-keyframes scroll_border {
  0%,
  100%,
  52% {
    top: 0;
    opacity: 1;
  }
  25% {
    top: 100%;
    opacity: 1;
  }
  26% {
    top: 100%;
    opacity: 0;
  }
  27% {
    top: -100%;
    opacity: 0;
  }
}

@keyframes scroll_border {
  0%,
  100%,
  52% {
    top: 0;
    opacity: 1;
  }
  25% {
    top: 100%;
    opacity: 1;
  }
  26% {
    top: 100%;
    opacity: 0;
  }
  27% {
    top: -100%;
    opacity: 0;
  }
}
.hoyujuki-img {
  position: relative;
  border-bottom: 1px solid rgba(255, 255, 255, 0);
}
.hoyujuki-img div:first-child {
  width: 86%;
  margin-bottom: 46%;
}
.hoyujuki-img div:last-child {
  position: absolute;
  bottom: 0;
  right: -50;
  width: 72%;
}

.contact-img {
  position: relative;
  border-bottom: 1px solid rgba(255, 255, 255, 0);
}
.contact-img div:first-child {
  position: relative;
  width: 61%;
  margin-bottom: 41%;
  z-index: 1;
}
.contact-img div:last-child {
  position: absolute;
  bottom: 0;
  right: -50px;
  width: 55%;
  z-index: 0;
}


@media (min-width: 1200px) {
  .top-text-box {
    max-width: 540px;
  }
}

.top-work {
  position: relative;
  height: 60vh;
  max-height: 700px;
  background: url("../img/top/work.webp");
  background-size: 120% auto;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
}
@media (min-width: 768px) {
  .top-work {
    height: 90vh;
  }
}
.top-work::after {
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
}

.top-menu a {
  display: block;
  position: relative;
  color: #fff;
  width: 100%;
  aspect-ratio: 630 / 443;
  background-size: 100% 100%;
  background-position: center center;
  -webkit-transition: .5s;
  transition: .5s;
}
.top-menu a .text {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  height: 40%;
}
.top-menu a:hover {
  background-size: 110% 110%;
}

.topics .col {
  margin-bottom: calc(var(--unit-size) * 3);
}
.topics a {
  text-decoration: none;
  color: #333;
}
.topics .topics-ttl {
  margin: calc(var(--unit-size) * 3) 0;
}
.topics .topics-ttl h2 {
  text-align: center;
  font-size: 1rem;
}

.information ul {
  list-style: none;
  padding: 0 calc(var(--unit-size) * 3);
}
.information ul li {
  border-bottom: 1px solid #c7c8c8;
  padding: calc(var(--unit-size) * 2) 0;
}
.information ul li a {
  text-decoration: none;
  color: #333;
}
.information ul li span {
  display: inline-block;
  margin-right: calc(var(--unit-size) * 3);
}

.btn-contact a {
  display: block;
  width: 90%;
  max-width: 500px;
  margin: calc(var(--unit-size) * 12) auto;
}


/* Footer
==================================================== */

footer {
  background: #979793;
  color: #fff;
  padding: calc(var(--unit-size) * 7) 0 calc(var(--unit-size) * 4);
}
@media (min-width: 768px) {
  footer {
    padding: calc(var(--unit-size) * 8) 0 calc(var(--unit-size) * 12);
  }
}
footer .footlogo {
  width: 50%;
  max-width: 150px;
  margin: 0 auto calc(var(--unit-size) * 8);
}
@media (max-width: 767px) {
  footer .fs-xs-6 {
    font-size: 1rem;
  }
}

/* 企業情報
==================================================== */
.tbl-about { width: 100%; }

.tbl-about th {
	background: #f2f2f2;
	border: solid 1px #ccc;
	color: #000;
	padding: 10px;
	width: 265px;
}
.tbl-about td {
	border: solid 1px #ccc;
	padding: 10px;
}

@media screen and (max-width: 640px) {
	.last td:last-child {
		border-bottom: solid 1px #ccc;
		width: 100%;
	}
	.tbl-about {
		width: 80%;
	}
	.tbl-about th,
	.tbl-about td {
		border-bottom: solid 1px #ccc;
		display: block;
		width: 100%;
	}
}


/* 保有車両
==================================================== */
.btn-gray{
    background: #dee2e6;
}
.btn-gray:hover{
    background: #c9cccf;
}

.hoyusharyo h3 {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
  margin-bottom: calc(var(--unit-size) * 3);
  padding: 0;
}
.hoyusharyo h3::before, .hoyusharyo h3::after {
  content: "";
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  border-bottom: 1px solid currentColor;
  width: unset;
  margin-right: 30px;
}
.hoyusharyo h3::after {
  margin-right: 0;
  margin-left: 30px;
}
.hoyusharyo table {
  font-size: 14px;
}
.hoyusharyo table th {
  font-weight: normal;
}
.hoyusharyo table th, .hoyusharyo table td {
  width: 50%;
  line-height: 1.1rem;
  padding: 7px 5px;
}
.hoyusharyo .btn.btn-sm {
  background: #959595;
  color: #fff;
  font-size: 14px;
  padding: .3rem 1rem;
  border-radius: 3px;
}
.hoyusharyo figure {
  margin-top: calc(var(--unit-size) * 3);
}

.table-scr{
    width: 100%;
    overflow-x: scroll;
}
@media (min-width: 870px){
    .table-scr table{
        width: 100%;
        min-width: 780px;
    }
}
.table-scr table th{
    width: 110px;
}
.table-scr table td{
    vertical-align: middle;
}
.table-scr a{
    color: #212529;
}


/*  採用情報
==================================================== */
.recruit-header .np{
    position: relative;
}
.recruit-header .ttl{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    overflow: hidden;
    width: 90%;
    max-width: 700px;
    border: 1px solid #fff;
}
.recruit-header .ttl p{
    margin: 5vw 7vw;
}

.interview-box{
	position: relative;
	background: #efefef;
	border-radius: 50px;
	overflow: hidden;
	padding: 20px;
	margin-bottom: 30px;
}
.interview-box-left{
	text-align: center;
}
.interview-box-left img{
	width: 100%;
	margin-bottom: 20px;
}
@media (max-width: 768px) {
	.interview-box-left img{
		width: 200px;
	}
}
.interview-box-label{
	position:absolute;
	left: -50px;
	background: #45b035;
	color:#fff;
	width: 200px;
	font-size: .9em;
	padding: 5px;
	rotate: -40deg;:
}
.interview-box-right{
	padding: 25px 30px;
}
.interview-box-right h3{
	font-size: 1.5em;
	line-height: 1.5;
	margin-bottom: 30px;
	color: #45b035;
}
.interview-box-right p{
	line-height: 2;
	margin-bottom: 10px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
    -webkit-line-clamp: 3;
    transition: .2s;
    max-height: 96px;
}
.interview-box.open .interview-box-right p{
	display: block;
	max-height: 1000px;
}
.interview-readmore{
	position: absolute;
	bottom: 20px;
	right: 20px;
	width: 150px;
	cursor: pointer;
}
.interview-box .close{
    display: none;
}
.interview-box.open .more{
	display: none;
}
.interview-box.open .close{
	display: block;
}

#welfare-box {
  position: relative;
}

.welfareCont {
  cursor: pointer;
  -webkit-transition: .3s;
  transition: .4s;
  overflow: hidden;
}


.count div {
  position: relative;
}
.count p {
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
  display: inline-block;
  font-size: 7vw;
  font-weight: bold;
}
@media (min-width: 768px) {
  .count p {
    font-size: 3.5vw;
  }
}
@media (min-width: 1000px) {
  .count p {
    font-size: 35px;
  }
}

.trimark {
  position: relative;
  width: 100%;
  margin-top: 5px;
}

.trimark::after {
  content: '';
  position: absolute;
  top: 20px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  height: 20px;
  width: 20px;
  background: #00428e;
  -webkit-clip-path: polygon(50% 0, 100% 100%, 0 100%);
          clip-path: polygon(50% 0, 100% 100%, 0 100%);
  -webkit-transition: .3s;
  transition: .3s;
}

.welfare-data {
  position: absolute;
  left: 24px;
  width: calc(100% - 50px);
  margin-top: 20px;
  color: #fff;
  max-height: 0;
  overflow: hidden;
  -webkit-transition: .3s;
  transition: .3s;
}

.welfare-dataP {
  padding: 25px 25px;
  line-height: 2;
  background: #00428e;
  border-radius: 30px;
}

.welfareCont.open{
    transition: .2s;
}
.welfareCont.open .welfare-data {
  max-height: 200px;
  cursor: default;
}

.welfareCont.open .trimark::after {
  top: 1px;
  height: 20px;
}

.openjob-data{
	background: #dee2e6;
}
.openjob-data .row{
	padding: 0;
/*	padding-left: 25px; */
	border-bottom: 1px solid #d6d9d8;
}
.openjob-data .row:last-child{
	border-bottom: 1px solid #9fa0a0;
}
.openjob-data .row:first-child{
			border-top: 1px solid #9fa0a0;
		}

.openjob-data .row div{
	padding:15px;
}
.openjob-data .row div:first-child{
	font-weight: bold;
	border-right: 1px solid #d6d9d8;
}
.openjob-data .row div:last-child{
	background: #fff;
}


/* fade
==================================================== */
.sclfade {
  position: relative;
  opacity: 0;
}
.sclfade.fade-up {
  top: 50px;
}
.sclfade.fade-down {
  top: -50px;
}
.sclfade.fade-left {
  left: -50px;
}
.sclfade.fade-right {
  right: -50px;
}

.faed-animate {
  -webkit-animation: fade 2s forwards;
          animation: fade 2s forwards;
}
.faed-animate.fade-up, .faed-animate.fade-down {
  -webkit-animation: fadeY 1s forwards;
          animation: fadeY 1s forwards;
}
.faed-animate.fade-left {
  -webkit-animation: fadeL 1s forwards;
          animation: fadeL 1s forwards;
}
.faed-animate.fade-right {
  -webkit-animation: fadeR 1s forwards;
          animation: fadeR 1s forwards;
}
.faed-animate.delay {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}

@-webkit-keyframes fade {
  100% {
    opacity: 1;
  }
}

@keyframes fade {
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes fadeY {
  100% {
    opacity: 1;
    top: 0;
  }
}
@keyframes fadeY {
  100% {
    opacity: 1;
    top: 0;
  }
}
@-webkit-keyframes fadeL {
  100% {
    opacity: 1;
    left: 0;
  }
}
@keyframes fadeL {
  100% {
    opacity: 1;
    left: 0;
  }
}
@-webkit-keyframes fadeR {
  100% {
    opacity: 1;
    right: 0;
  }
}
@keyframes fadeR {
  100% {
    opacity: 1;
    right: 0;
  }
}


/* トップへ戻る
==================================================== */
a.page-top {
	position:fixed;
	bottom:60px;
	right:10px;
	opacity:0.5;
	color:#0064f2;
	display:block;
}
a.page-top:hover {
	opacity:0.7;
}



/* TOP page
==================================================== */
#firstview {
    width: 100%;
    height: calc(100svh - var(--header-height));
}
.carousel-item.active img {
    animation: zoom 20s;
}
@keyframes zoom {
    from {
        transform: scale(1, 1);
    }
    to {
        transform: scale(1.3, 1.3);
    }
}
#firstview-logo {
    max-width: 128px;
    width: calc(128 / 750 * 100vw);
    margin-right: calc(300 / 750 * 100vw);
    margin-bottom: calc(500 / 750 * 100vw);
}
#firstview-logo img {
    filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 1));
}
@media (min-width: 992px) {
    #firstview-logo {
        width: calc(126 / 1140 * 100%);
        margin-right: calc(500 / 1140 * 100%);
        margin-bottom: calc(400 / 1140 * 100%);
	}
	
	#firstview-logo {
		width: calc(126 / 1140 * 100%);
		position: absolute;
		top: 40%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
}
#firstview-scroll .scroll-btn {
    width: 20px;
    font-size: 12px;
    line-height: 1;
    letter-spacing: .1em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    padding-top: 4em;
    text-decoration: none;
}
#firstview-scroll .scroll-txt {
    color: #FFF;
    width: 4em;
    transform: rotate(90deg) translate(-4em,-50%);
    transform-origin: bottom left;
}
#firstview-scroll .scroll-line {
    width:100%;
    height: 5.8em;
    display: block;
    position: relative;
    overflow: hidden;
}
#firstview-scroll .scroll-line:before {
    content: '';
    height: 100%;
    border-left: solid 1px #000;
    position: absolute;
    left: 50%;
    animation: wrap_on 1s ease-in-out 1.5s forwards;
}
#firstview-scroll .scroll-line:after {
    content: '';
    height: 100%;
    border-left: solid 1px #fff;
    position: absolute;
    left: 50%;
    z-index: 1;
    animation: scroll_border 2.5s ease-in-out 2.5s infinite;
}
@keyframes wrap_on {
    0% {
        height: 0%;
    }
    100% {
        height: 100%;
    }
}
@keyframes scroll_border {
    0%,
    100%,
    52% {
        top: 0;
        opacity: 1;
    }
    25% {
        top: 100%;
        opacity: 1;
    }
    26% {
        top: 100%;
        opacity: 0;
    }
    27% {
        top: -100%;
        opacity: 0;
    }
}


/* #top */
#top {}
.top-img001 {
    padding-left: calc(30 / 750 * 100vw);
    padding-right: calc(350 / 750 * 100vw);
    padding-bottom: calc(225 / 750 * 100vw);
}
.top-img001 .img001 {}
.top-img001 .img002 {
    width: calc(283 / 750 * 100vw);
    position: absolute;
    top: calc(200 / 750 * 100vw);
    right: 0;
}
.top-img002 {}
.top-img002 .img003 {
    width: calc(425 / 750 * 100vw);
    margin-right: auto;
    margin-bottom: calc(60 / 750 * 100vw);
}
.top-img002 .img004 {
    width: calc(410 / 750 * 100vw);
    margin-left: auto;
    margin-bottom: calc(60 / 750 * 100vw);
}
.img005 {
    width: calc(620 / 750 * 100vw);
    margin-bottom: calc(60 / 750 * 100vw);
}
.top-img003 {}
.top-img003 .img006 {
    width: calc(600 / 750 * 100vw);
    margin-left: auto;
    margin-bottom: calc(60 / 750 * 100vw);
}
.top-img003 .img007 {
    width: calc(530 / 750 * 100vw);
    margin: 0 auto calc(60 / 750 * 100vw) calc(30 / 750 * 100vw);
}
.top-img003 .img008 {
    width: calc(350 / 750 * 100vw);
    margin-left: auto;
}
@media (min-width: 992px) {
    .top-img001 {
        padding-left: calc(100 / 1140 * 100%);
        padding-right: calc(650 / 1140 * 100%);
        padding-bottom: calc(180 / 1140 * 100%);
    }
    .top-img001 .img001 {}
    .top-img001 .img002 {
        width: calc(328 / 1140 * 100%);
        top: calc(140 / 490 * 100%);
        left: calc(570 / 1140 * 100%);
        right: inherit;
    }
    .top-img002 {
        padding-bottom: calc(100 / 1140 * 100%);
    }
    .top-img002 .img003 {
        width: calc(700 / 1140 * 100%);
        margin: 0;
    }
    .top-img002 .img004 {
        width: calc(380 / 1140 * 100%);
        position: absolute;
        top: calc(280 / 530 * 100%);
        right: 0;
        margin: 0;
    }
    .img005 {
        width: calc(560 / 1140 * 100%);
        margin-bottom: calc(110 / 1140 * 100%);
    }
    .top-img003 {
        padding: 0 0 calc(360 / 1140 * 100%) calc(630 / 1140 * 100%);
    }
    .top-img003 .img006 {
        width: 100%;
        margin: 0;
    }
    .top-img003 .img007 {
        width: calc(500 / 1140 * 100%);
        position: absolute;
        top: calc(140 / 675 * 100%);
        left: calc(70 / 1140 * 100%);
        margin: 0;
    }
    .top-img003 .img008 {
        width: calc(275 / 1140 * 100%);
        position: absolute;
        right: calc(160 / 1140 * 100%);
        bottom: 0;
        margin: 0;
    }
}

/* #menu */
@media (max-width: 991.98px) {
    .menuSlide img {
        aspect-ratio: 1140 / 800;
    }
}
@media (min-width: 992px) {
    .menuSlide {
        height: calc(100svh - var(--header-height));
    }
}
.arrow {
    display: block;
    padding: 0 3em 0.4em 0;
    position: relative;
}
.arrow::after {
    content: '';
    display: block;
    width: 100%;
    height: 0.8em;
    position: absolute;
    right: 0;
    bottom: 0;
    background: url("../img/common/arrow.svg") no-repeat right bottom/cover;
}


/* #osusume */
.osusumeSlider-wrap {}
@media (min-width: 992px) {
    .osusumeSlider-wrap {
        padding-left: calc(110px - 0.5rem);
        padding-right: calc(110px - 0.5rem);
    }
}
@media (max-width: 575.98px) {
    .osusumeSlider .slick-slide {
        width: 60vw !important;
    }
}

/* #oiwai */
#oiwai a {
    color: var(--bs-black-rgb);
}
.oiwai_inner {}
@media (min-width: 992px) {
    .oiwai_inner {
        padding-left: 110px;
        padding-right: 110px;
    }
}

/* #access */
#access .access-map.ratio {
    --bs-aspect-ratio:240px;
}
@media (min-width: 768px) {
    #access .access-map.ratio {
        --bs-aspect-ratio:725px;
    }
}
.facebook_wrap{
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}

.fb-page,
.fb-page span,
.facebook_wrap iframe{
  width: 100% !important;
  /*height: 500px !important;*/
}



/* Q&A
==================================================== */
[data-bs-theme="dark"] .accordion-button::after {
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFFFFF'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFFFFF'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.accordion-button:focus {
    box-shadow: none;
}
.accordion-button:not(.collapsed) {
    color: #FFF;
    background-color: #4C7036;
}


/* メディアクエリ
==================================================== */
/*
// X-Small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
*/
@media (min-width: 576px) {}

/*// Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {}

/*// Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {}

/*// X-Large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {}

/*// XX-Large devices (larger desktops, 1400px and up)*/
@media (min-width: 1400px) {}


/*// X-Small devices (portrait phones, less than 576px)*/
@media (max-width: 575.98px) {}

/*// Small devices (landscape phones, less than 768px)*/
@media (max-width: 767.98px) {}

/*// Medium devices (tablets, less than 992px)*/
@media (max-width: 991.98px) {}

/*// Large devices (desktops, less than 1200px)*/
@media (max-width: 1199.98px) {}

/*// X-Large devices (large desktops, less than 1400px)*/
@media (max-width: 1399.98px) {}