@charset "UTF-8";
html {
  font-size: 62.5%; }
body {
font-family: 'Noto Sans JP', sans-serif;
text-align:center;
margin:0;
padding:0;
width:100%;
height:100%;
text-decoration: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
position: relative;
text-align:center;
	font-size: 1.6rem; /* 16px */
    line-height: 1.5;
    color: #333;
}
html,body{
	overflow-x: hidden;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
img {
    max-width: 100%;
    height: auto;
	padding: 0;margin: 0;
}

/* リンクの下線削除 */
a {
    text-decoration: none;
    color: inherit;
}

/* リストのスタイル削除 */
ul, ol {
    list-style: none;
}
.flex{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}


.hamburger {
  position: fixed;
  top: 80px;
  right: 0px;
    width: 120px;
    height: 120px;
  cursor: pointer;
  z-index: 1001;
    transition: all 0.3s ease;
    animation: pulseAnimation 2s ease-in-out infinite;
	animation-delay: 0.5s;
    transform-origin: top right;
}
.scroll-badge {
    position: fixed;
    top: 82px;
    left: 0;
    width: 120px;
    height: 120px;
    text-align: center;
    transition: all 0.3s ease;
    z-index: 10;
    animation: pulseAnimation 2s ease-in-out infinite;
    transform-origin: top left;
}

.hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -6px);
}

.menu {
  position: fixed;
  top: -100vh;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #004098;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: top 0.5s ease;
  z-index: 1000;
}

.menu.active {
  top: 0;
}

.menu ul {
  list-style: none;
  text-align: center;
	width: 100%;
}

.menu li {
	width: 100%;
  margin:1.2em auto;
}

.menu a {
  color: #fff;
  font-size: 1.8rem;
	letter-spacing: 0.08em;
  text-decoration: none;
  transition: color 0.3s;
  display: block;
  width: 80%;
  margin: 0 auto;
  border-bottom: solid 1px #fff;
  padding-bottom: 1.2em;
}

.menu a:hover {
  color: #fff;
}

.scaleani {
    animation: scaleAnimation 3s ease-in-out;
}
.close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 30px;
  height: 30px;
  cursor: pointer;
  z-index: 1002;
}

.close-btn span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 2px;
  background: #fff;
  transition: 0.3s;
}

.close-btn span:nth-child(1) {
  transform: translate(-50%, -50%) rotate(45deg);
}

.close-btn span:nth-child(2) {
  transform: translate(-50%, -50%) rotate(-45deg);
}

@keyframes scaleAnimation {
    0% { transform: scale(1); }
    25% { transform: scale(1.2); }
    75% { transform: scale(1.2); }
    100% { transform: scale(1); }
}
.headermenu{
	position: relative;
	flex-shrink: 0;
	width: calc(100% - 50px);
}

.headermenu .leftbox,
.headermenu > div{
	position: absolute;
	flex-shrink: 0;
	font-weight: bolder;
	font-size: 1.1em;
	color: #ffffff;
	letter-spacing: 0.05em;
}
.headermenu .leftbox{
	left: 22px;
	top: 24px;
	width: 180px;
}
.headermenu > div:nth-child(2){
	right: calc(100px + 22em);
	top: 24px;
}
.headermenu > div:nth-child(3){
	right: calc(100px + 14em);
	top: 24px;
}

.headermenu > div:nth-child(4){
	right: calc(50px + 6em);
	top: 24px;
}

.headermenu > div:nth-child(5){
	right: 10px;
	top: 20px;
	color: #ffffff;
	background: #e60012;
	padding: 0.25em 1em 0.4em;
	border-radius: 0.2em;
}

header{
	background-color: #004098;
  height: 80px;
  min-height: 70px;
	position: fixed;
	z-index: 4;
	width: 100%;	
}
main{
	margin-top: 0px;
}
.topbox{padding-top: 60px;}

.topimg {
  position: fixed;
  top: -10vw;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: -1;
}

.whiteback {
  position: relative;
  min-height: 30vh;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.3s ease;
	background-color: rgba(255,255,255,1);
	width: 90%;
	max-width: 1300px;
	border-radius: 0.5em;
	margin:100px auto;
	padding: 2.5em 3em;
	text-align: justify;
	letter-spacing: 0.08em;
	font-size: calc(1vw + 6pt);
}
.menu-text {
 position: absolute;
 top: 28px;
 left: 50%;
 transform: translateX(-50%);
 font-size: 12px;
 color: #000;
 white-space: nowrap;
}


.scroll-badge div {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

@keyframes pulseAnimation {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}
@media (min-width: 481px) {
	.break-sp::before {
        content: "\A";
        white-space: pre;
    }
}
@media (max-width: 480px) {
    .break-desktop::before {
        content: "\A";
        white-space: pre;
    }
.topimg { top: 0vw;}
.whiteback {
	margin-top: 30px;
	font-size: calc(0.9vw + 5pt);
	border-radius: 0.8em;
	line-height: 1.6em;
  	min-height: calc(120px + 3vh);
	margin:40px auto;
	letter-spacing: 0.06em;
	padding: 1em;
}
}

.splash-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #004098;
    display: flex;
    flex-direction: column; /* 縦方向に配置 */
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: background-color 0.5s ease-out; 
}

.splash-screen.fade-background {
    background-color: transparent;
	z-index: 3;
}

.splash-screen.fade-out {
    opacity: 0;
    pointer-events: none;
}

/* タイトル文字のスタイル */
.main-title {
    color: white;
    font-size: 2.4em;
    font-weight: bold;
    margin-bottom: 30px; /* ロゴとの間隔 */
    text-align: center;
    font-family: 'Hiragino Sans', 'ヒラギノ角ゴシック', 'Yu Gothic', 'メイリオ', Arial, sans-serif;
    animation: titleFadeIn 1s ease-in-out;
}

.splash-logo {
    max-width: 80%;
    max-height: auto;
	
    animation: logoFadeIn 1s ease-in-out 0.3s both; /* 0.3秒遅延 */
}

.main-title {
	color: white; font-size: 2.4em; font-weight: bold; margin-bottom: 30px; /* ロゴとの間隔 */ text-align: center; font-family: 'Hiragino Sans', 'ヒラギノ角ゴシック', 'Yu Gothic', 'メイリオ', Arial, sans-serif; animation: titleFadeIn 1s ease-in-out; }
.splash-logo { max-width: 80%; max-height: auto; animation: logoFadeIn 1s ease-in-out 0.3s both; /* 0.3秒遅延 */ }

.fixed-logo-title {
    position: absolute;
    top: 50%;   /* ページ上から50%下げる */
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 10;
}
@keyframes titleFadeIn {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes logoFadeIn {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(20px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}


@keyframes titleFadeIn {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes logoFadeIn {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(20px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* レスポンシブ対応 */

@media (max-width: 768px) {
	.zankakinri-container {
    margin:0 auto;
}
    .main-title {
        font-size: 1.5rem;
        margin-bottom: 20px;
        padding: 0 20px;
    }
    
    .splash-logo {
        max-width: 300px;
        max-height: auto;
    }
}

        body.loaded {
            overflow: auto; /* ロード後はスクロール有効 */
        }

        .main-content {
            padding-top: 100vh; /* 最初のセクション */
        }

        .section {
            min-height: 100vh;
            padding: 40px 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
        }

        .section:nth-child(odd) {
            background-color: #f5f5f5;
        }

        .section:nth-child(even) {
            background-color: #ffffff;
        }

        .section h2 {
            font-size: 2.5rem;
            margin-bottom: 20px;
            color: #333;
        }

        .section p {
            font-size: 1.2rem;
            line-height: 1.6;
            color: #666;
            max-width: 600px;
        }

.viewcenter,
.img-top-container, .img-bottom-container {
  position: relative;
}
.img-top-container{
	z-index: 2;
}
.img-middle,
.img-top, .img-bottom {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

@media (min-width: 768px) {
.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  width: 100vw;
  height: 80vh;
	max-height: 700px;
	margin-top: -100vh;
	margin-left: -8px;
}

.grid-container .main-img {
  grid-column: 1 / span 4; /* ← 最初はグリッド全体に広げる */
  grid-row: 1 / span 4;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: all 1s ease;
  z-index: 2;
	opacity: 0;
}

.grid-container .main-img.shrink {
  grid-column: 2 / span 2; /* ← 縮小後に中央のセルに再配置 */
  grid-row: 2 / span 2;
  width: 100%;
	opacity: 1;
  height: 100%;
  object-fit: contain;
}

.grid-container .surround-img {
	padding: 5px;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.5s ease;
  width: 100%;
  height: 100%;
}
	
.topbox{position: relative;}
.flash-in {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.flash-in .main-img1 {
  position: absolute;
  top:5px;
  left: calc(50% - 8px);
  transform: translate(-50%, 0);
  width: 100vw;
  height: auto;
    transition: width 1s ease, opacity 1s ease, top 1s ease, transform 1s ease;
  opacity: 1;
	z-index: 3;
}

.flash-in .main-img1.hide {
  opacity: 0;
}
.flash-in .main-img1.shrink {
  width: 50vw;
  top: calc(60vh - 442px); /* ベース値（縦1044px基準） */
}

/* 小さい画面（899px基準） */
@media (max-height: 970px) {
  .flash-in .main-img1.shrink {
    top: calc(60vh - 39.0vh);
  }
}

/* 大きい画面（1044px基準） */
@media (min-height: 971px) {
  .flash-in .main-img1.shrink {
    top: calc(60vh - 43.2vh);
  }
}
@media (max-width: 1318px) and (max-height: 910px) {
	.flash-in .main-img1.shrink {
    top: calc(60vh - 36.0vh);
  }	
	}	
	
/* 上の画像を暗くするオーバーレイ */
.dark-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  transition: opacity 0.3s cubic-bezier(0.19, 1, 0.22, 1);
  z-index: 2;
}

/* 下の画像の黄色オーバーレイ（下の画像のコンテナ内のみ） */
.yellow-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 110%;
  background-color: #fff100;
  transform: translateY(-100%);
  transition: transform 0.3s cubic-bezier(0.19, 1, 0.22, 1);
  z-index: 1;
	mix-blend-mode: multiply;
}
	.viewcenter{z-index: 3;}
/* hover時のエフェクト */
.hover-card:hover .dark-overlay {
  opacity: 0;
}

.hover-card:hover .yellow-overlay {
  transform: translateY(0);
}

}
@media (max-width: 1310px) {
.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  width: 100vw;
  height: 60vh;
	max-height: 700px;
}
}
h4.index,
h3.index,
h2.index,
h1.index{
	margin:120px auto 80px 0;
	text-align: left;
	letter-spacing: 0.08em;line-height: 1.4em;
	display: flex;
	align-items: center;
	font-size: 20pt;
}
h1.souzaiko{
    margin: -1em auto 50px 0;
    text-align: left;
    letter-spacing: 0.08em;
    line-height: 1.4em;
    display: flex;
    align-items: center;
    font-size: 2em;
    color: #fff;
    white-space: nowrap;
    background: #004098;
    width: calc(12em + 2.5em);
    padding: 0.3em;
    padding-right: 2em;
    position: relative;
    margin-left: calc((100% - min(80%, 1300px)) / 2);
}
h1.yoyaku{
    margin: -1em auto 50px 0;
    text-align: left;
    letter-spacing: 0.08em;
    line-height: 1.4em;
    display: flex;
    align-items: center;
    font-size: 2em;
    color: #fff;
    white-space: nowrap;
    background: #004098;
    width: calc(10em + 2.5em);
    padding: 0.3em;
    padding-right: 2em;
    position: relative;
    margin-left: calc((100% - min(80%, 1300px)) / 2);
}
h1.company{
    margin: -1em auto 50px 0;
    text-align: left;
    letter-spacing: 0.08em;
    line-height: 1.4em;
    display: flex;
    align-items: center;
    font-size: 2em;
    color: #fff;
    white-space: nowrap;
    background: #004098;
    width: calc(5em + 2.5em);
    padding: 0.3em;
    padding-right: 2em;
    position: relative;
    margin-left: calc((100% - min(80%, 1300px)) / 2);
}
h1.syoyuuken{
    margin: -1em auto 50px 0;
    text-align: left;
    letter-spacing: 0.08em;
    line-height: 1.4em;
    display: flex;
    align-items: center;
    font-size: 2em;
    color: #fff;
    white-space: nowrap;
    background: #004098;
    width: calc(5em + 2.5em);
    padding: 0.3em;
    padding-right: 2em;
    position: relative;
    margin-left: calc((100% - min(80%, 1300px)) / 2);
}
h1.daisansya{
    margin: -1em auto 50px 0;
    text-align: left;
    letter-spacing: 0.08em;
    line-height: 1.4em;
    display: flex;
    align-items: center;
    font-size: 2em;
    color: #fff;
    white-space: nowrap;
    background: #004098;
    width: calc(5em + 2.5em);
    padding: 0.3em;
    padding-right: 2em;
    position: relative;
    margin-left: calc((100% - min(80%, 1300px)) / 2);
}
h1.zanka{
    margin: -1em auto 50px 0;
    text-align: left;
    letter-spacing: 0.08em;
    line-height: 1.4em;
    display: flex;
    align-items: center;
    font-size: 2em;
    color: #fff;
    white-space: nowrap;
    background: #004098;
    width: calc(10em + 2.5em);
    padding: 0.3em;
    padding-right: 2em;
    position: relative;
    margin-left: calc((100% - min(80%, 1300px)) / 2);
}
h1.tenpo.left-in {
    margin: -1em auto 50px 0;
    text-align: left;
    letter-spacing: 0.08em;
    line-height: 1.4em;
    display: flex;
    align-items: center;
    font-size: 2em;
    color: #fff;
    white-space: nowrap;
    background: #004098;
    width: 6.5em;
    padding: 0.3em;
    padding-right: 2em;
    position: relative;
    margin-left: calc((100% - min(80%, 1300px)) / 2);
}

h1.tenpo.tsu,
h1.tenpo.ise,
h1.tenpo.plus,
h1.tenpo.inter,
h1.tenpo.hinaga,
h1.tenpo.kuwana,
h1.tenpo.suzuka {
    margin: -1em auto 50px 0;
    text-align: left;
    letter-spacing: 0.08em;
    line-height: 1.4em;
    display: flex;
    align-items: center;
    font-size: 2em;
    color: #fff;
    white-space: nowrap;
    background: #751485;
    width: calc(10em + 2.5em);
    padding: 0.3em;
    padding-right: 2em;
    position: relative;
    margin-left: calc((100% - min(80%, 1300px)) / 2);
}
h1.tenpo.ise {
    background: #e60012;
    width: calc(10em + 2.5em);
}
h1.tenpo.tsu {
    background: #00afcc;
    width: calc(10em + 2.5em);
}
h1.tenpo.inter {
    background: #e74291;
    width: calc(15em + 2.5em);
}
h1.tenpo.hinaga {
    background: #ee7800;
    width: calc(12em + 2.5em);
}
h1.tenpo.kuwana {
    background: #00a73c;
}

h1.tenpo.plus {
    background: #004a25;
    width: calc(13em + 2.5em);
}

h1.company::before,
h1.syoyuuken::before,
h1.zanka::before,
h1.yoyaku::before,
h1.souzaiko::before,
h1.daisansya::before,
h1.tenpo.suzuka::before,
h1.tenpo.tsu::before,
h1.tenpo.ise::before,
h1.tenpo.kuwana::before,
h1.tenpo.plus::before,
h1.tenpo.hinaga::before,
h1.tenpo.inter::before,
h1.tenpo::before {
    content: '';
    position: absolute;
    left: calc(-1 * (100vw - min(80vw, 1300px)) / 2);
    top: 0;
    width: calc((100vw - min(80vw, 1300px)) / 2);
    height: 100%;
    background: #004098;
}

h1.tenpo.suzuka::before{background: #751485;}
h1.tenpo.tsu::before{background: #00afcc;}
h1.tenpo.ise::before{background: #e60012;}
h1.tenpo.kuwana::before{background: #00a73c;}
h1.tenpo.plus::before{background: #004a25;}
h1.tenpo.hinaga::before{background: #ee7800;}
h1.tenpo.inter::before{background: #e74291;}
h1.tenpo.suzuka::before{
	background: #751485;
}
h4.index > div,
h3.index > div,
h2.index > div,
h1.index > div{
	background: #fff;
}
h4.index img,
h3.index img,
h2.index img,
h1.index img{
	width: auto;
	height: 2.0em;
	margin-right: 1em;
	margin-bottom: -0.2em;
	background: #ffea01;
	padding-left: calc(50vw - 600px);
}
h2.zanka{
	width: 84%;
	max-width: 900px;
	margin: auto;
	margin-top: 100px;
}
.syoyuuken.first{
	width: 82%;
	max-width: 900px;
	margin: auto;
	margin-top: 100px;
}
.syoyuukenbox{
	width: 90%;
	margin:80px auto 150px;
	max-width: 1300px;
	padding: 50px;
	background: #dff2fc;
	text-align: left;
	letter-spacing: 0.08em;
	font-size: 110%;
}

.syoyuukenbox div:nth-child(5){
	font-size: 1em;
	padding: 1.5em;
	margin: 1em auto 2em;
}
.syoyuukenbox div:nth-child(5) a{
	color: #e60012;
}
.syoyuukenbox div:nth-child(6),
.syoyuukenbox div:nth-child(4){
	color: #004098;
	font-size: 1.4em;
	font-weight: bolder;
}
.syoyuukenbox div:nth-child(7),
.syoyuukenbox div:nth-child(2){
	margin-bottom: 3em;
}
.syoyuukenbox div:nth-child(8),
.syoyuukenbox div:nth-child(3),
.syoyuukenbox div:nth-child(1){
	font-size: 1.8em;
	font-weight: bolder;
	margin-bottom: 0.5em;
}
.flex.syoyuuken > div{
	width: 48%;
}
.flex.syoyuuken{
	width: 90%;
	margin:80px auto 150px;
	max-width: 1300px;
	flex-wrap: wrap;
	justify-content: space-between;
}

@media (max-width: 1300px){
h1.index img{padding-left: 1em;}
}
.indexbox.first .hover-card > div:nth-child(2){
	padding-bottom: 0px;
}
.indexbox.first .hover-card {
  width: 23%;
  position: relative;
	margin-bottom: 60px;
	border:solid 1px #595757;
	padding-bottom: 0;
}
.indexbox.first .hover-card:nth-child(1){
	background: #073e8e;
}

.indexbox.first{
	display: flex;
	flex-wrap: wrap;
	width: 90%;
	max-width: 1300px;
	margin: auto;
	justify-content: space-between;
}
.indexbox.third{
	display: flex;
	justify-content: space-around;
	width: 90%;
	max-width: 1300px;
	margin: auto;
	margin-bottom: 100px;
}
.indexbox.third .hover-card > div:nth-child(3){
	padding-bottom: 10px;
}
.indexbox.third .hover-card {
  width: 30%;
  position: relative;
	margin-bottom: 30px;
	border:solid 1px #595757;
	padding-bottom: 0;
}
.secondcard a > div:nth-child(2){
	z-index: 3;
	position: relative;
}
.underlink.index{
	color: #595757;
	padding:0.6em 1em 0.8em;
	border:  1px solid #595757;
	width: 12em;
	margin: auto;
	text-align: center;
   position: relative;
   overflow: hidden;
   transition: color 0.3s ease;
	margin-bottom: 150px;
	font-size: 1.2em;
}

.underlink.index::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 0;
   height: 100%;
   background: #595757;
   transition: width 0.3s ease;
   z-index: -1;
}

.underlink.index:hover {
   color: #ffffff;
}

.underlink.index:hover::before {
   width: 100%;
}
.flex.indexbox{
	margin: auto;
	margin-bottom: 100px;
	justify-content: space-between;
	width: 90%;
	max-width: 1300px;	
}
.flex.indexbox > div{
	width: 47%;
}


.flex.indexbox.sepa {
    flex-wrap: wrap;
    display: flex;
	gap:1%;
	text-align: center;
}

.flex.indexbox.sepa > div:nth-child(7){text-align: center;}


.flex.indexbox.sepa > div {
    width: calc(93% / 7);
    aspect-ratio: 1 / 1; /* 正方形 */
    display: flex;
    justify-content: center; /* 横方向中央 */
    align-items: center; /* 縦方向中央 */
}

.flex.indexbox.sepa > div a {
    display: flex;
    width: 100%;
}

.flex.indexbox.sepa > div img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* アスペクト比を保って切り抜き */
}

.flex.indexbox.sepa > div a {
    display: flex;
    justify-content: center;
    align-items: center;
}
.flex.indexbox.sepa > a > div {
    height: auto;
    min-height: auto;
}
.flex.indexbox.sepa {
    align-items: flex-start; /* stretch だと高さが統一される */
}
.flex.indexbox.sepa .item-group > a > div {
    box-sizing: border-box;
    display: block;
    color: #ffffff;
    margin: auto;
    font-size: 80%;
    white-space: nowrap;
	width: 100%;
    text-align: center;
    margin-top: 1em;
	padding: 0.7em 0 0.8em;
	line-height: normal;
	font-stretch: condensed;
	font-weight: 600;
}

.flex.indexbox.sepa {
    display: flex;
    flex-wrap: wrap;
}

.item-group {
    width: calc(93% / 7);
    gap: 1%;
    display: flex;
    flex-direction: column;
}
footer{
	background: #004098;
	color: #ffffff;
	padding: 50px 0;
}
.copyright{
	font-size: 0.8em;
	margin-top: 50px;
}
.footflex{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	text-align: left;
}
.footflex > div:nth-child(1){
	width: 16%;
}
.footflex > div:nth-child(2){
	width: 60%;
}
.flex.footbox a:hover{color: #ffea00;}
.flex.footbox{
	margin-top: 20px;
	font-size: 100%;
	text-align: left;
	line-height: 2.4em;
	justify-content: space-between;
}
.flex.footbox > div> div:nth-child(1){
	border-bottom: solid 1px #fff;
	padding-bottom: 0.6em;
	margin-bottom: 0.6em;
}
.footimg{width: 60%;}
.store-inventory-btn {
            display: flex;
            align-items: center;
            width: 300px;
            height: 60px;
            background: #004098;
            border: solid 1px #ffffff;
            position: relative;
            overflow: hidden;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .store-inventory-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 0;
            height: 100%;
            background: #ffea00;
            transition: width 0.4s ease;
            z-index: 1;
        }

        .store-inventory-btn:hover::before {
            width: 100%;
        }

        .icon-area {
            width: 60px;
            height: 60px;
            background: #ffea00;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            z-index: 2;
        }

        .icon-area img {
            width: 100%;
            height: 100%;
        }

.text-areafoot:hover {color: #000;}
        .text-areafoot {
            flex: 1;
            color: #ffffff;
            font-size: 1.6em;
			letter-spacing: 0.06em;
            font-weight: bold;
            padding-left: 20px;
            position: relative;
            z-index: 2;
            transition: color 0.1s ease 0.1s;
        }

        .store-inventory-btn:hover .text-area {
            color: #004098;
        }
@media (max-width: 767px) {
header{
	background-color: none;
  height: 50px;
  min-height: auto;
	position: fixed;
	z-index: 4;
	width: 100%;	
}
	.scroll-badge,.hamburger{
		top: 50px;
		width: 10%;
		min-width: 80px;
}
.scroll-badge div {
    position: relative;
    top: 0;
    transform:none;
}
.grid-container,.headermenu{
	}
.topbox {
	padding-top: 30px;}	

    .item-group {
    gap: 2%;
    text-align: center;
    width: calc(94% / 4);
    }
.indexbox.first .hover-card {
  width: 48%;
}
.flex.indexbox{flex-wrap: wrap;margin: auto;text-align: center;
	}
	.flex.indexbox > div{width: 80%;margin: auto;text-align: center;margin-bottom: 30px;}	
	.flex.indexbox:not(.sepa) > div:nth-child(1){border-bottom: solid 1px #000;padding-bottom: 30px;}	
	.flex.indexbox.sepa {justify-content: center!important;}
	.flex.indexbox.sepa .item-group{font-size: 80%;}
.flex.indexbox.sepa > div {
    width: calc(93% / 4);
	}
}
@media (max-width: 767px) {
  .footflex {
    flex-direction: column;
    align-items: center;
  }
  
  /* 既存の幅指定をリセット */
  .footflex > div:nth-child(1),
  .footflex > div:nth-child(2) {
    width: 80%;
  }
  
  /* ロゴ+プライバシーポリシーの親div - 2番目に */
.footflex > div:nth-child(1) {
    order: 2;
	font-size: 90%;
    display: flex;
    align-items: center; /* 既にあるはずですが念のため */
    justify-content: center; /* 横方向も中央揃えにしたい場合 */
    gap: 20px;
    margin-bottom: 20px;
  }
  
  /* より具体的に指定する場合 */
  .footflex > div:nth-child(1) a {
    align-self: center; /* リンク要素自体を中央揃え */
  }
  
  /* 全店総在庫情報+footboxの親div */
  .footflex > div:nth-child(2) {
    order: 1; /* ここを1に変更 */
    display: flex;
    flex-direction: column;
  }
  
  /* 全店総在庫情報を一番上に */
  .store-inventory-btn {
    order: 1;
    margin-bottom: 20px;
  }
  
  .flex.footbox {
    flex-wrap: wrap;
    order: 2;
  }
  
  .flex.footbox > div {
    width: 100%;
    margin-bottom: 20px;
  }
  
  /* ロゴのサイズ調整 */
  .footimg {
    width: 40%;
  }
.footflex > div:nth-child(1) img {
  width: 120px; /* 適切なサイズに調整 */
  height: auto;
	margin-bottom: -0.5em;
}
.headermenu{
	position: relative;
	flex-shrink: 0;
	width: 100%;
}
.headermenu .leftbox,
.headermenu > div{
	position: absolute;
	flex-shrink: 0;
	font-weight: bolder;
	font-size: 1.1em;
	color: #ffffff;
	letter-spacing: 0.05em;
}
.headermenu .leftbox{
	left: 22px;
	top: 14px;
	width: 130px;
}
	.headermenu > div:nth-child(2),
	.headermenu > div:nth-child(3),
	.headermenu > div:nth-child(4){
		display: none;
	}
.headermenu > div:nth-child(5){
	right: 12px;
	top: 12px;
	color: #ffffff;
	background: #e60012;
	padding: 0.1em 1em 0.2em;
	border-radius: 0.2em;
	font-size: 0.9em;
}
}
@media (max-width: 480px){
.item-group {
    width: calc(93% / 7);
    gap: 1%;
    display: flex;
    flex-direction: column;
}

.indexbox.third{
	display: flex;
	justify-content: space-around;
	width: 96%;
}
.indexbox.third .hover-card > div:nth-child(3){
	padding-bottom: 10px;
}
.indexbox.third .hover-card {
	width: 32%;
	}
	
.flex.indexbox > div{width: 90%;margin: auto;text-align: center;margin-bottom: 30px;}	
	h4.index{white-space: nowrap;margin-left: -0.5em;}
	h4.index,
	h3.index,
	h2.index,
	h1.index{font-size: 1.2em;
		
	}
h2.index img{
	width: calc(90% - 4em);
	height: auto;
	}
h1.index img{
	width: calc(70% - 4em);
	height: auto;
}
}

.flex.indexbox.sepa > div {
    width: calc(93% / 7);
    aspect-ratio: 1 / 1; /* ボックスは正方形で統一 */
    display: flex;
    justify-content: center;
    align-items: center;
}

.flex.indexbox.sepa > div img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* 切り抜かずに収める */
}
@media (max-width: 767px) {
  .flex.indexbox.sepa {
    justify-content: center;
  }

  /* 上4つ */
  .flex.indexbox.sepa > div:nth-child(-n+4) {
    width: calc(25% - 6px);
    aspect-ratio: 1 / 1;
  }

  /* 下3つ */
  .flex.indexbox.sepa > div:nth-child(n+5) {
    width: calc(33.333% - 6px);
    aspect-ratio: 1 / 1;
  }

  .flex.indexbox.sepa > div img {
    max-width: 90%;  /* 余白を少し残す */
    max-height: 90%;
    object-fit: contain;
  }
}
.mobile-only { display: block; }
.desktop-only { display: none; }
.indextop{margin-top: 16vw;}
.item-group {
	height: 600px;
}


@media (min-width: 481px) {
  .mobile-only { display: none; }
  .desktop-only { display: block; }
}


.tenpo-container {
            width: 80%;
            max-width: 1300px;
            margin: auto;
            display: flex;
			flex-wrap: wrap;
	justify-content: space-between;
	margin-top: 100px;
        }
        
        .tenpos-wrapper {
			width: 48%;
			margin-bottom: 80px;
        }
        
        .tenpo-item {
            flex: 1;
            width: 100%;
        }
        
        .tenpo-image img {
            width: 100%;
            height: auto;
        }
        
        .tenpo-info {
            display: flex;
            margin: 2em 0;
			line-height: 1.8em;
			letter-spacing: 0.08em;
        }
        
        .info-labels {
            width: 25%;
            padding-right: 10px;
			margin-left: 10%;
        }
        
        .info-details {
            width: 75%;
            border-left: 1px solid #000;
            padding-left: 15px;
			text-align: left;
			
        }
 .tenpo-info-table {
    margin: 2em auto;
    line-height: 1.8em;
    letter-spacing: 0.08em;
    border-collapse: collapse;
}

.tenpo-info-table th {
    text-align: left;
    padding-right: 15px;
    white-space: nowrap;
    vertical-align: top;
}

.tenpo-info-table td {
    border-left: 1px solid #000;
    padding-left: 15px;
    text-align: left;
}       
        .tenpo-link a {
            color: white;
            text-decoration: none;
            padding: 8px 15px 10px;
            display: inline-block;
            border-radius: 3px;
			width: 100%;
			margin-bottom: 80px;
			font-size: 84%;
        }


.zankakinri-container {
    width: 95%;
    max-width: 1500px;
    margin:200px auto;
    position: relative;
    min-height: 300px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-right: calc(25% * 0.5); /* 右側に02の半分の余白を追加 */
}

.zankakinri-01 {
    width: 75%;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    margin-right: calc(25% * 0.5); /* 02の幅の半分だけ右にずらす */
}

.zankakinri-01 img {
    width: 100%;
    height: auto;
}

.zankakinri-02 {
    position: absolute;
    right: 8%;
    top: 50%;
    width: 25%;
    opacity: 0;
    transition: all 0.5s ease-out;
    z-index: 2;
    transform: translateY(-50%) scale(1.3);
    transform-origin: center;
}

.zankakinri-02.animate {
    transform: translateY(-50%) scale(1);
    opacity: 1;
}

.zankakinri-02 img {
    width: 100%;
    height: auto;
}

.zankabox{
	background: #dff2fc;
	width: 90%;
	margin: auto;
	margin-top: 100px;
	max-width: 1300px;
	padding: 50px;
	padding-left: 0;
}
.zankabox .point{
	margin-left: 0;
	width: 80%;
	max-width: 800px;
	margin-left: -2px;
}
.zankabox .point2{
	width: 90%;
	max-width: 950px;
	margin-top: 100px;
	margin-left: -1px;
}
.pointunder{
	text-align: left;
	font-size: 1.4em;
	font-weight: bold;
	margin: 30px auto 10px 0;
	color: #004098;
	letter-spacing: 0.08em;
}
.secondpoint{
	font-size: 130%;
	text-align: left;
	padding-left: min(280px, 23vw);
}
/* ベース */
.wipe-effect a,
.wipe-effect {
  position: relative;
  overflow: hidden;
}

.wipe-effect a,
.wipe-effect img,
.wipe-effect img.hover-scale{
  opacity: 0;
  transform: translateX(-100%);
  transition: opacity 1.0s ease-in-out, transform 1.0s ease-in-out;
}

.wipe-effect a::before,
.wipe-effect::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translateX(-101%);
  z-index: 10;
}

/* 表示されたときに発動 */
.wipe-effect.show::before,
.wipe-effect.show::before {
  animation: wipe 1.0s ease-in-out forwards;
}

.wipe-effect.show a img,
.wipe-effect.show img,
.wipe-effect.show img.hover-scale {
  opacity: 1;
  transform: translateX(0);
}

.secondpoint span {
  letter-spacing: -0.5em;
}

/* アニメーション */
@keyframes wipe {
  0% { 
    transform: translateX(-101%); 
    opacity: 1;
  }
  40% { 
    transform: translateX(0%); 
    opacity: 1;
  }
  60% { 
    transform: translateX(0%); 
    opacity: 1;
  }
  99% { 
    transform: translateX(101%); 
    opacity: 1;
  }
  100% { 
    transform: translateX(101%); 
    opacity: 0;
  }
}

/* 色バリエーション */
.wipe-suzuka::before { background: #751485; }
.wipe-kuwana::before    { background: #00a73c; }
.wipe-inter::before   { background: #e74291; }
.wipe-hinaga::before { background: #ee7800; }
.wipe-tsu::before  { background: #00afcc; }
.wipe-ise::before   { background: #e60012; }
.wipe-plus::before { background: #004a25; }
.wipe-nomal::before { background: #004098; }




div.zankure-kuruma {
    width: 100%;
    max-width: 1000px;
    text-align: center;
    margin: 50px auto;
	padding-left: 50px;
}
div.zankure-kuruma-2 {
    width: 100%;
    max-width: 1000px;
    text-align: center;
    margin: 50px auto;
	padding-left: 50px;
}

div.zankure-kuruma img {
    width: 100%;
    height: auto;
}
.creditbox{
	width: 95%;
	margin:50px auto 0;
	margin-left: 5%;
}
.flex.credit div{
	width: 32%;
}
.flex.credit{
	justify-content: space-between;
	flex-wrap: wrap;
}
@keyframes car-vibration {
    0% {
        transform: translateY(2px);
    }
    25% {
        transform: translateY(-1px);
    }
    50% {
        transform: translateY(1px);
    }
    75% {
        transform: translateY(-2px);
    }
    100% {
        transform: translateY(2px);
    }
}


div.zankure-kuruma.vibration,
div.zankure-kuruma-2.vibration {
    animation: car-vibration 1.0s ease-in-out infinite;
}
div.zankure-kuruma-2.vibration{
	animation-delay: 0.3s;
}
.jaaibox{
	display: flex;
	width: 90%;
	margin: auto;
	max-width: 1000px;
}
.hosyou{
	width: 50%;
	max-width: 500px;
	margin: auto;
}
.daisansyabox.first > div:nth-child(2){
	width: 35%;
}
.daisansyabox.first > div:nth-child(1){
	width: 62%;
	padding-right: 3%;
}
.daisansyabox.first{
	display: flex;
	width: 90%;
	max-width: 1300px;
	flex-wrap: wrap;
	margin: 80px auto;
	text-align: left;align-items: flex-start;
}
.daisansyaceli div:nth-child(5){
	color: #004098;
	padding: 0.5em 1em;
	font-size: 0.8em;
	letter-spacing: 0.08em;
	border: solid 2px #004098;
}
.daisansyaceli div:nth-child(4),
.daisansyaceli div:nth-child(2){
	font-size: 0.9em;
	margin-bottom: 1em;
}
.daisansyaceli div:nth-child(1),
.daisansyaceli div:nth-child(3){
	font-size: 1.4em;
	letter-spacing: 0.08em;
	font-weight: bolder;
}
.threebox > div:nth-child(3){
	width: 80%;
	margin: auto;
}
.threebox > div:nth-child(2){
	width: 90%;
	margin:-10px auto 30px;
}
.threebox > div:nth-child(1){
	width: 60%;
	margin: auto;
	margin-bottom: 50px;
}
.threebox{
	width: 90%;
	max-width: 1300px;
	margin: 200px auto ;
}
.flex.formbox > div:nth-child(-n+3){
	border-top: solid 1px #000;
}
.flex.formbox > div{
	width: 31%;
	padding: 1em 0;
	border-bottom: solid 1px #000;
}
.flex.formbox{
	flex-wrap: wrap;
	justify-content: space-between;
	width: 90%;
	max-width: 1300px;
	margin: auto;
	margin-bottom: 100px;
}
.otoawaseinfo{
	margin: 100px auto 60px;
	width: 50%;
	max-width: 500px;
}
.formbox .textb{
	width: 90%;
	max-width: 1300px;
	background: #e6e6e6;
	border: solid 1px #666464;
	margin-bottom: 100px;
}
.privacy{
	color: #595757;
	border: solid 1px #595757;
	font-size: 0.8em;
	width: 16em;
	padding: 1em;
	margin: 30px auto 150px 0;
	text-align: center;
}
.yoyakubox.first{
	width: 90%;
	margin: auto;
	max-width: 1100px;
	text-align: left;
}
.ent-form{
	margin-bottom: 50px!important;
}
.syazebox{
	width: 90%;
	margin: 100px auto 150px;
	max-width: 1300px;
}
.icdabox{
	width: 90%;
	max-width: 1300px;
	margin: 100px auto 150px;
	text-align: justify;
	display: flex;
	flex-wrap: wrap;
	align-items:center;
	font-size: 1.2em;
	letter-spacing: 0.08em;
	line-height: 1.4em;
}
.icdabox > div:nth-child(4),
.icdabox > div:nth-child(2){
	text-align: right;
	margin-right: 0;
	width: 35%;
}
.icdabox > div:nth-child(3) > div:nth-child(2),
.icdabox > div:nth-child(3) > div,
.icdabox > div:nth-child(1) > div{
	margin-bottom: 4em;
	line-height: 1.6em;
	letter-spacing: 0.05em;
}

.icdabox > div:nth-child(3) > div:nth-child(3),
.icdabox > div:nth-child(3) > div:nth-child(1),
.icdabox > div:nth-child(1) > div:nth-child(1){
	font-weight: bolder;
	font-size: 2em;
	margin-bottom: 0.5em;
}

.icdabox > div:nth-child(3) > div:nth-child(2){
	margin-bottom: 2em;	
}
.icdabox > div:nth-child(3),
.icdabox > div:nth-child(1){
	width: 60%;
	padding-right: 5%;
}
.companybox.third .text,
.companybox.second .text,
.companybox.first .text{
	width: 80%;
	height: auto;
	margin:50px auto 40px 0;
}
.companybox.first{
	background: #dff2fc;
	padding: 30px;
	width: 90%;
	max-width: 1300px;
	margin: auto;
}
.companybox.second .text{
	width: 100%;
}
.companybox.third .text{
	width: 90%;
}
.companybox.second{
	background: #fbd9db;
	padding: 30px;
	width: 90%;
	max-width: 1300px;
	margin: auto;
}
.companybox.third{
	background: #ccedd8;
	padding: 30px;
	width: 90%;
	max-width: 1300px;
	margin: auto;
}
.companybox.left-in.second,
.companybox.left-in.third,
.companybox.left-in{
    margin: -1em auto -1em 0;
    text-align: left;
    letter-spacing: 0.08em;
    line-height: 1.4em;
    display: flex;
    align-items: center;
    font-size: 2em;
    color: #fff;
    white-space: nowrap;
    background: #004098;
    width: calc(9em + 2.5em);
    padding: 0.3em;
    padding-right: 2em;
    position: relative;
    margin-left: calc((100% - min(80%, 1300px)) / 2);
}

.companybox.left-in::before{
    content: '';
    position: absolute;
    left: calc(-1 * (100vw - min(80vw, 1300px)) / 2);
    top: 0;
    width: calc((100vw - min(80vw, 1300px)) / 2);
    height: 100%;
    background: #004098;
}
.comp-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
	font-size: 1.4em;
}

.companybox.left-in.third{
	background: #00a73c;
}
.companybox.left-in.second{
	background: #e60012;
}
.companybox.left-in.third::before{
	background: #00a73c;
}
.companybox.left-in.second::before{
	background: #e60012;
}
.companybox.second .element,
.companybox.third .element,
.companybox.first .element {
    height: 140px;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
	text-align: left;
}

.companybox.second .element-1 img,.companybox.second .element-5 img,
.companybox.third .element-1 img,.companybox.third .element-5 img,
.companybox.first .element-1 img,.companybox.first .element-5 img {
	width:auto;
	height: 80%;
}
.companybox.third .element-1 img{
	width:auto;
	height: 70%;
}
.companybox.third .element-3 img,
.companybox.first .element-3 img {
	width:auto;
	height: 60%;
}
.companybox.first .element-3 img {
	width:auto;
	height: 50%;
}
.companybox.second .element-3 img{
	width:auto;
	height: 70%;
}
.companybox.second .element-5 img{
	width:auto;
	height: 45%;
}
.companybox.second .element-1,.companybox.second  .element-3,.companybox.second  .element-5,
.companybox.third .element-1,.companybox.third .element-3,.companybox.third  .element-5,
.companybox.first .element-1,.companybox.first  .element-3,.companybox.first  .element-5 {
    width: calc(20% - 5px);
}

.companybox.second .element-2,.companybox.second  .element-4,.companybox.second  .element-6,
.companybox.third .element-2,.companybox.third .element-4,.companybox.third  .element-6,
.companybox.first .element-2,.companybox.first  .element-4,.companybox.first  .element-6 {
    width: calc(80% - 5px);
    justify-content: flex-start;
	padding-left: 1em;
}
.companybox.third .recycling-text{
	font-size: 1.6em;
	font-weight: bolder;
	color: #00a73c;
	margin-top: 2.5em;
	margin-bottom: 1em;
	text-align: left;
	margin-left: -0.5em;
}
.flex.recycling > div{
	width: 24%;
}
.flex.recycling{
	justify-content: space-between;
	flex-wrap: wrap;
	text-align: justify;
	margin-top: 0.5em!important;
	letter-spacing: 0.05em;
}
.automall{
	margin: 200px auto 30px;
	width: 90%;
	max-width: 1300px;
}
.inter-mall{
	width: 90%;
	max-width: 1300px;
	margin: auto;
	margin-bottom: 150px;
}
.enkaku{
	width: 100%;
	padding: 50px 0 100px;
	margin-bottom: 150px;
	background: #dff2fc;
}
.enkaku > div:nth-child(1){
	width: 40%;
	max-width: 300px;
	margin:50px auto;
}
.enkaku > div:nth-child(2){
	text-align: left;
	display: flex;
	flex-wrap: wrap;
	width: 80%;
	margin: auto;
}
.enkaku > div:nth-child(2) > div{
	border-bottom: solid 1px #000;
	text-indent: 0.5em;
	padding: 1em 0;
	letter-spacing: 0.08em;
	font-size: 1.2em
}
.enkaku > div:nth-child(2) > div:nth-child(-n+2){
	border-top: solid 1px #000;
}
.enkaku > div:nth-child(2) > div:nth-child(odd){
	width: 15%;
}
.enkaku > div:nth-child(2) > div:nth-child(even){
	width: 85%;
}
.automall > div:nth-child(2){
	font-size: 120%;
	margin: 40px auto;
}
.automall > div:nth-child(3){
	margin: 30px auto auto;
}

.tenpo.undersec{
	display: flex;
	justify-content: space-between;
	max-width: 1000px;
	width: 90%;
	margin: 50px auto;	
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
.info-container {
    display: flex;
    flex-wrap: wrap;
}

.info-container > div {
    border-bottom: solid 1px #000;
    padding: 10px;
    box-sizing: border-box;
	font-size: 1em;
}

.info-container > div:nth-child(odd) {
    width: 18%;
    text-align: justify;
    text-align-last: justify;
}

.info-container > div:nth-child(even) {
    width: 82%;
	letter-spacing: 0.08em;
    text-align: left;
}
.tenposyousai > div:nth-child(2){
	width: 55%;
}
.tenposyousai > div:nth-child(1){
	width: 40%;
}
.tenposyousai{
	width: 90%;
	max-width: 1300px;
	margin: auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.tenpo-info-img{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	font-size: 1em;
	text-align: justify;
}
.tenpo-info-img > div{
	width: 48%;
	margin-bottom: 30px;
}
.tenposyousai > div .vstittle{
	font-weight: bolder;
	font-size: 2em;
	letter-spacing: 0.08em;
	border-bottom: solid 1px #000;
	padding-bottom: 0.5em;
}
.tenposyousai .sns{
	width: 60%;
	margin: auto;
	margin-top: 60px;
	display: flex;
	justify-content: space-between;
}
.tenposyousai .sns a{
	width: 48%;
}
.servicebox{
	width: 90%;
	max-width: 1300px;
	margin: auto;
	display: flex;
	flex-wrap: wrap;
	margin: auto;
	text-align: center;
	justify-content: space-between;
}

.servicebox > div{width: 46%;margin-bottom: 50px;margin-top: 30px;font-size: 1em;letter-spacing: 0.08em;}
.servicebox > div:nth-child(1){ width: 100%;}
.servicebox > div:nth-child(1) img{ width: 22%;min-width: 180px;}
.servicebox > div:nth-child(10){ width: 100%;}
.servicebox > div:nth-child(9),
.servicebox > div:nth-child(8){ margin:-40px 0 50px;text-align: justify;}

.servicebox > div:nth-child(10) img{ width: 30%;min-width: 200px;}
.servicebox > div:nth-child(4) img{ width: 60%;min-width: 200px;}
.servicebox > div:nth-child(5) img{ width: 70%;min-width: 200px;}
.servicebox a{width: 46%;margin-bottom: 50px;margin-top: 30px;font-size: 0.9em;}
.flex.staffbox{
	flex-wrap: wrap;
	width: 90%;
	max-width: 1300px;
	margin: auto;
	justify-content:flex-start;
	gap:20px;
}
.flex.staffbox > div{
	width: calc(24% - 10px); /* gap分を引く（20px × 2 ÷ 3 ≈ 14px）*/
	margin-bottom: 50px;
}
.flex.staffbox > div img{
	width: 100%;
}
.tenpo-kobetsubox {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
	width: 90%;
	max-width: 1300px;
	margin: auto;
}

.tenpo-kobetsubox > div {
    position: relative;
    display: inline-block;
}

.tenpo-kobetsubox > div img {
    width: 100%;
    height: auto;
    display: block;
}

.tenpo-kobetsubox > div img:last-child {
    position: absolute;
    top: 0;
    left: 0;
	pointer-events: none;
}
.inlinemenu{
	width: 60%!important;
}

.inlinemenu > li{
	font-size: 1.2em;
}
.inlinemenu > li img{
	width: 50%;
	padding-bottom: 10px;
}
/* 480px以下の時のみ表示される改行 */
.br-mobile {
  display: block;
}

.br-desktop {
  display: none;
}

/* 481px以上の時 */
@media (min-width: 481px) {

	.tenpo-link a {
			font-size: 120%;
        }
  .br-mobile {
    display: none;
  }
  
  .br-desktop {
    display: block;
  }
}
@media (max-width: 480px) {
	.main-title{
		margin-top: -140px;
	}
	h2.index{
		width: 70%;
	}
	.automall > div{margin-bottom: 0.5em;}
.automall{
	margin: 100px auto 30px;
	font-size: 0.9em;
}
	.flex.recycling{flex-wrap: wrap;}
.flex.recycling > div{
	width: 48%;margin-bottom: 10px;
}
	.flex.recycling{
		font-size: 0.5em;
	}
h1.zanka,
h1.tenpo.left-in,
h1.syoyuuken,
h1.souzaiko,
h1.daisansya,
h1.company{
	font-size: 1.2em;
	padding-top: 0.1em;
	padding-bottom: 0.3em;
}
	.syazebox{
		margin: 0px auto -30px;
	}
	.icdabox > div{
		width: 100%!important;
		font-size: 80%;
		letter-spacing: 0.06em;
	}
	.icdabox > div:nth-child(3) > div:nth-child(3){
		font-size: 160%;
	}
	.icdabox > div:nth-child(2){
		margin-bottom: 100px;
	}
	.companybox{font-size: 130%!important;}
	.companybox.third .text,
.companybox.second .text,
.companybox.first .text{
	width: 100%;
	margin:auto;
	padding: 5px 0 10px;
}
	.companybox.first{
	background: #dff2fc;
	padding: 10px;
	width: 90%;
	max-width: 1300px;
	margin: auto;
		margin-top: 50px;
}
.companybox.second{
	background: #fbd9db;
	padding: 10px;
	width: 90%;
	max-width: 1300px;
	margin: auto;
		margin-top: 50px;
}
.companybox.third{
	background: #ccedd8;
	padding: 10px;
	width: 90%;
	max-width: 1300px;
	margin: auto;
		margin-top: 50px;
}
	.comp-container {
    gap: 5px;
}
.companybox.second .element,
.companybox.third .element,
.companybox.first .element {
	font-size: 0.44em!important;
}
.companybox.second .element,
.companybox.third .element,
.companybox.first .element {
    height: 100px;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
	text-align: left;
}

.companybox.first .element {height: 160px;}
.companybox.second .element-1 img,.companybox.second .element-5 img,
.companybox.third .element-1 img,.companybox.third .element-5 img,
.companybox.first .element-1 img,.companybox.first .element-5 img {
	width:auto;
	height: 50%;
}
.companybox.third .element-3 img,
.companybox.first .element-3 img {
	width:auto;
	height: 30%;
}
.companybox.second .element-3 img{
	width:auto;
	height: 46%;
}
.companybox.second .element-5 img{
	width:auto;
	height: 26%;
}
.companybox.third .element-1 img{
	width:auto;
	height: 40%;
}
.companybox.first .element-1 img,.companybox.first .element-5 img {
	width:auto;
	height: 35%;
}
.companybox.first .element-3 img {
	width:auto;
	height: 16%;
}
.companybox.second .element-1,.companybox.second  .element-3,.companybox.second  .element-5,
.companybox.third .element-1,.companybox.third .element-3,.companybox.third  .element-5,
.companybox.first .element-1,.companybox.first  .element-3,.companybox.first  .element-5 {
    width: calc(30% - 5px);
}

.companybox.second .element-2,.companybox.second  .element-4,.companybox.second  .element-6,
.companybox.third .element-2,.companybox.third .element-4,.companybox.third  .element-6,
.companybox.first .element-2,.companybox.first  .element-4,.companybox.first  .element-6 {
    width: calc(70% - 5px);
    justify-content: flex-start;
	padding-left: 1em;
}
.companybox.third .recycling-text{
	font-size:0.8em;
	padding-left: 0.5em;
}

.enkaku{
	padding: 30px 0 50px;
	font-size: 0.8em;
}
.enkaku > div:nth-child(2) > div:nth-child(odd){
	width: 20%;
	text-align: center;
}
.enkaku > div:nth-child(2) > div:nth-child(even){
	width: 76%;
	padding-left: 4%;
	text-indent: 0;
}
h2.zanka{
	margin-top: 50px;
}
.jaaibox{
	margin: auto;
}
.daisansyabox.first > div:nth-child(2){
	width: 100%;
	margin-top: 20px;
}
.daisansyabox.first > div:nth-child(1){
	width: 100%;
}
.threebox > div:nth-child(2){
	width: 100%;
	margin: auto;
}
	.threebox .theundertext{
		font-size: 110%;
	}
.threebox > div:nth-child(1){
	width: 100%;
	margin: auto;
	margin-bottom: 20px;
}
.syoyuuken.first{
	width: 100%;
	max-width: 900px;
	margin:60px auto -20px;
}
.syoyuukenbox{
	width: 90%;
	margin:80px auto 150px;
	max-width: 1300px;
	padding: 20px;
	background: #dff2fc;
	text-align: justify;
	letter-spacing: 0.06em;
	font-size: 84%;
}
.flex.syoyuuken > div{
	width: 80%;
	margin: auto;
	margin-bottom: 30px;
}
.tenpos-wrapper {
			width: 100%;
			margin-bottom: 30px;
        }

.zankabox{
	background: #dff2fc;
	width: 90%;
	margin: auto;
	margin-top: 50px;
	padding: 30px;
}	
.zankabox .point{
	width: 115%;
	margin-left: -15%;
}
.zankabox .point2{
	width: 115%;
	margin-left: -15%;
	margin-top: 50px;
}
.secondpoint{
	text-align: justify;
	padding-left: 0;
	font-size: 90%;
	margin-top: 10px;
}
div.zankure-kuruma {
    width: 50%;
    margin: 50px auto 20px;
	padding-left: 0px;
	padding-right: 5px;
}
div.zankure-kuruma.renal {
    width: 100%;
    margin: 50px auto 20px;
	padding-left: 0px;
	padding-right: 5px;
}
div.zankure-kuruma-2 {
    width: 50%;
    margin: 50px auto 20px;
	padding-left: 5px;
}
.creditbox{
	width: 100%;
	margin:30px auto;
	margin-left: 0;
}
.pointunder{
	text-align: left;
	font-size: 1.1em;
	font-weight: bold;
	margin: 10px auto ;
	color: #004098;
	letter-spacing: 0.07em;
}
.flex.credit div{
	width: 80%;
	margin: auto;
	margin-bottom: 10px;
}
	.creditbox .fade-up2{
		background: #fff;padding: 20px;
	}
.tenpo-kobetsubox {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
	width: 94%;
	margin: auto;
}
.tenpo-kobetsubox > div {
    position: relative;
    display: inline-block;
	border-radius: 0.3em;
}
.tenpo.undersec{
	width: 100%;
	margin: 50px auto 0;
}
	
.underlink.index{
	font-size:70%;
	color: #595757;
	padding:0.4em 0 ;
	border:  1px solid #595757;
	width: 8em;
	margin-bottom: 0;
}
.tenposyousai > div:nth-child(2){
	width: 100%;
}
.tenposyousai > div:nth-child(1){
	width: 100%;
}
	.info-container{font-size: 0.9em;}
.info-container > div:nth-child(odd) {
    width: 20%;
	white-space: nowrap;
}

.info-container > div:nth-child(even) {
    width: 80%;
	letter-spacing: 0.08em;
}
.tenposyousai .sns{
	margin-bottom: 100px;
}	
.tenpo-info-img{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	font-size: 0.85em;
}
.tenpo-info-img > div{
	width: 48%;
	margin-bottom: 30px;
}
	.index.left-in.tenpo{
		width: 94%;
	}

	.index.left-in.tenpo > div{
		font-size: 100%;
		white-space: nowrap;
		text-align:center; 
		margin-left:-1em;
	}

.servicebox > div{width: 100%;margin-bottom: 0px;margin-top: 30px;font-size: 0.9em;}
.servicebox > div:nth-child(1){ width: 100%;}
.servicebox > div:nth-child(1) img{ width: 20%;min-width: 140px;}
.servicebox > div:nth-child(10){ width: 100%;}
.servicebox > div:nth-child(9),
.servicebox > div:nth-child(8){ margin:-40px 0 50px;text-align: justify;}

.servicebox > div:nth-child(10) img{ width: 30%;min-width: 220px;}
.servicebox > div:nth-child(4) img{ width: 25%;min-width: 180px;}
.servicebox > div:nth-child(5) img{ width: 70%;min-width: 200px;}

  .servicebox {
    display: flex;
    flex-direction: column;
  }
  
  /* tenpo-section-text.svg の要素 */
  .servicebox > div:nth-child(3) {
    order: 2;
  }
  
  /* tenpo-syakenmenu.svg の要素 */
  .servicebox > div:nth-child(4) {
    order: 1;
  }
.index.left-in.axcess{
	margin:100px auto 50px 0;
	text-align: left;
	letter-spacing: 0.08em;line-height: 1.4em;
	display: flex;
	align-items: center;
	font-size: 16pt;
}
h2.index.staff > div{
width: 90%;
}
h2.index.axcess > div{
width: 90%;
}
h2.index.axcess{
	width: 100%;
}
h2.index.staff{
	width: 100%;
}
.flex.staffbox > div{
	width: calc(50% - 14px); /* gap分を引く（20px × 2 ÷ 3 ≈ 14px）*/
	margin-bottom: 10px;
}
.flex.staffbox{
	flex-wrap: wrap;
	justify-content:flex-start;
	width: 90%;
	margin: auto;
	gap:20px;
}	
    .servicebox {
        display: flex;
        flex-direction: column;
    }

    .servicebox > div:nth-child(1) { order: 1; }   /* tenpo-syaken.svg */
.servicebox > div:nth-child(2) { order: 2; }   /* hinaga-service-main.jpg */
.servicebox > div:nth-child(3) { order: 3; }   /* tenpo-section-text-hinaga.svg */
.servicebox > div:nth-child(4) { order: 4; }   /* tenpo-syakenmenu.svg */
.servicebox > div:nth-child(5) { order: 7; }   /* tenpo-servicemenu.svg */
.servicebox > a:nth-child(6) { order: 5; }     /* tenpo-suzuka-syaken03.jpg のリンク */
.servicebox > a:nth-child(7) { order: 8; }     /* tenpo-suzuka-syaken04.jpg のリンク */
.servicebox > div:nth-child(8) { order: 6; margin-top: 10px; } /* 料金に関するテキスト */
.servicebox > div:nth-child(9) { order: 9; margin-top: 10px; } /* ヴァーサス全拠点のテキスト */
.servicebox > div:nth-child(10) { order: 10; } /* tenpo-corting.svg */
.servicebox > div:nth-child(11) { order: 11; } /* tenpo-suzuka-syaken05.jpg */
.servicebox > div:nth-child(12) { order: 12; } /* tenpo-suzuka-text-02.svg */
.servicebox a{width: 100%;margin-bottom: 50px;margin-top: 30px;font-size: 0.9em;}
h1.yoyaku{
    margin: -1em auto 50px 0;
    text-align: left;
    letter-spacing: 0.08em;
    line-height: 1.4em;
    display: flex;
    align-items: center;
    font-size: 1.4em;
    color: #fff;
    white-space: nowrap;
    background: #004098;
    width: calc(10em + 2.5em);
    padding: 0.3em;
    padding-right: 2em;
    position: relative;
    margin-left: calc((100% - min(80%, 1300px)) / 2);
}
.yoyakubox.first{
	width: 90%;
	margin: auto;
	font-size: 90%;
	max-width: 1100px;
	text-align: left;
}	
.otoawaseinfo{
	margin: 100px auto 40px;
	width: 74%;
}
.flex.formbox > div{
	width: 48%;
	padding: 1em 0;
	border-bottom: solid 1px #000;
	font-size: 80%;
	white-space: nowrap;
}	
.flex.formbox > div:nth-child(3){
	border-top:none;
}
	
}
/* 新しいCSS構造 */
.tenpo-kobetsubox {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    width: 80%;
    max-width: 1000px;
    margin: auto;
	margin-top: 100px;
}

.tenpo-item {
    position: relative;
    overflow: hidden;
}

.tenpo-link {
    display: block;
    text-decoration: none;
}

.image-container {
    position: relative;
    width: 100%;
    height: auto;
}

/* ベース画像（JPG） - ホバーで拡大する */
.base-image.hover-scale {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
    position: relative;
    z-index: 1;
}

/* フレーム画像（PNG） - 固定位置でオーバーレイ */
.frame-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    object-fit: cover;
}

/* ホバー効果 - ベース画像のみ拡大 */
.tenpo-item:hover .base-image.hover-scale {
    transform: scale(1.1);
}

/* 他のセクション用 */
.tenpo.undersec {
    width: 100%;
    margin: 50px auto 0;
}
/* 画像は初期は透明 */
.wipe-effect img.hover-scale {
  opacity: 0;
  transform: none; /* 横スライドはしない */
  transition: opacity 1s ease; /* フェードインに1秒 */
}

/* showクラスが付いたら 0.5秒遅延でパッと表示 */
.wipe-effect.show img.hover-scale {
  transition-delay: 0.5s;
  opacity: 1;
}

/* hover時のscaleはそのまま */
.tenpo-item:hover .base-image.hover-scale {
  transform: scale(1.1);
  transition: transform 0.3s ease;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .tenpo-kobetsubox {
    grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        width: 94%;
    }
    
    /* スマホではホバー効果を控えめに */
    .tenpo-item:hover .base-image.hover-scale {
        transform: scale(1.05);
    }
}
.kobetsu-tenpoimg{
	width: 90%;
	max-width: 1000px;
	margin: auto;
	display: grid;
    grid-template-columns: repeat(2, 1fr);
        gap: 30px;
	margin-bottom: 100px;
}
.kobetsu-tenpoimgplus{width: 40%;max-width: 800px;margin: auto;}
@media (max-width: 480px) {
	.index.left-in.tenpo > div{
		font-size: 90%;
	}
.zankakinri-container {
    width: 100%;
    margin:50px auto;
}
.zankakinri-01 {
    width: 95%;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    margin-right:0;
}

.zankakinri-01 img {
    width: 100%;
    height: auto;
}

.zankakinri-02 {
    position: absolute;
    right: 2.5%;
    top: 50%;
    width: 25%;
    opacity: 0;
    transition: all 0.5s ease-out;
    z-index: 2;
    transform: translateY(-50%) scale(1.3);
    transform-origin: center;
}
	
	
	.flex.footbox{
		font-size: 90%;
	}
.kobetsu-tenpoimgplus{
	margin-top: 100px;}
.kobetsu-tenpoimg{
	width: 90%;
	max-width: 1000px;
	margin: 100px auto 10px;
	display: grid;
    grid-template-columns: repeat(2, 1fr);
        gap: 15px;
}
	.inlinemenu > li img{
	width: 100%;
}
.menu a {
  width: 100%!important;
	font-size: 80%;
}

	.partners{font-size: 180%!important;line-height: 1.6em!important;}
    .tenpo-kobetsubox {
        width: 95%;
        gap: 10px;
    }
	.marcsp{
		text-align: center!important;
		font-size: 60%!important;
	}

}
.servicebox > div:nth-child(10),
.servicebox > div:nth-child(5),
.servicebox > div:nth-child(4){
	margin-top: 100px;
}
h2.index.staff{
margin-top: 160px;	
}
.daisansyaceli{
	font-size: 110%;
}
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
	 .main-title {
        font-size: 1.5rem;
        margin-bottom: 20px;
        padding: 0 20px;
    }    
    .splash-logo {
		width: 100%;
        max-width: auto;
        max-height: auto;
    }

.headermenu .leftbox,
.headermenu > div{
	position: absolute;
	flex-shrink: 0;
	font-weight: bolder;
	font-size: 1.0em;
	color: #ffffff;
	letter-spacing: 0.05em;
}
.headermenu .leftbox{
	left: 22px;
	top: 26px;
	width: 180px;
}
.headermenu > div:nth-child(2){
	right: calc(100px + 17em);
	top: 26px;
}
.headermenu > div:nth-child(3){
	right: calc(100px + 10.5em);
	top: 26px;
}

.headermenu > div:nth-child(4){
	right: calc(50px + 3.5em);
	top: 26px;
}

.headermenu > div:nth-child(5){
	right: -1em;
	top: 22px;
	color: #ffffff;
	background: #e60012;
	padding: 0.25em 1em 0.4em;
	border-radius: 0.2em;
}

	.flex.indexbox{flex-wrap: wrap;margin: auto;text-align: center;
	}
	.flex.indexbox > div{width: 80%;margin: auto;text-align: center;margin-bottom: 30px;}	
	.flex.indexbox:not(.sepa) > div:nth-child(1){border-bottom: solid 1px #000;padding-bottom: 30px;}	
	.flex.indexbox.sepa {justify-content: center!important;}
	.flex.indexbox.sepa .item-group{font-size: 80%;}
.flex.indexbox.sepa > div {
    width: calc(93% / 4);
	}
	.footflex {
		font-size: 80%;
	}
.tenpo.undersec{
	display: flex;
	justify-content: space-between;
	max-width: 1000px;
	width: 90%;
	margin: 50px auto 0;	
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
.underlink.index{
	font-size:90%;
	color: #595757;
	padding:0.4em 0 ;
	border:  1px solid #595757;
	width: 11em;
	margin-bottom: 100px;
}
	.tenposyousai > div:nth-child(2){
	width: 100%;
}
.tenposyousai > div:nth-child(1){
	width: 100%;
}	
.info-container > div:nth-child(odd) {
    width: 16%;
	padding-right: 4%;
	white-space: nowrap;
}

.info-container > div:nth-child(even) {
    width: 80%;
	letter-spacing: 0.08em;
}
.tenposyousai .sns{
	margin-bottom: 100px;
}
	.tenposyousai{
		font-size: 120%;
	}
	
	.servicebox > div{width: 48%;}
	.servicebox > div:nth-child(1){margin-bottom: 0px;}
	.servicebox > div:nth-child(1) img{ width: 30%;}
	.servicebox > div:nth-child(4) img{ width: 84%;}
	.servicebox > div:nth-child(5) img{ width: 100%;}
	.servicebox > div:nth-child(6){margin-top: 0;}
	.servicebox > div:nth-child(7){margin-top: 0;}
	.servicebox > div:nth-child(10){margin-bottom:10px;}
	.servicebox > div:nth-child(10) img{width: 45%;}
	
.flex.staffbox > div{
	width: calc(33.3% - 14px); /* gap分を引く（20px × 2 ÷ 3 ≈ 14px）*/
	margin-bottom: 10px;
}
.flex.staffbox{
	flex-wrap: wrap;
	justify-content:flex-start;
	width: 90%;
	margin: auto;
	gap:20px;
}	

.icdabox > div{
		width: 100%!important;
		font-size: 80%;
		letter-spacing: 0.06em;
	flex-wrap: wrap;
	}
	.icdabox > div:nth-child(3) > div:nth-child(3){
		font-size: 160%;
	}
.icdabox > div:nth-child(2){
	text-align: center;
	margin:auto;
	width: 50%!important;
	margin-bottom: 100px;
}
.icdabox > div:nth-child(1){
	width: 100%;
	padding-right: 0;
}

.companybox{font-size: 130%!important;}
	.companybox.third .text,
.companybox.second .text,
.companybox.first .text{
	width: 100%;
	margin:auto;
	padding: 5px 0 10px;
}
	.companybox.first{
	background: #dff2fc;
	padding: 10px;
	width: 90%;
	max-width: 1300px;
	margin: auto;
		margin-top: 50px;
}
.companybox.second{
	background: #fbd9db;
	padding: 10px;
	width: 90%;
	max-width: 1300px;
	margin: auto;
		margin-top: 50px;
}
.companybox.third{
	background: #ccedd8;
	padding: 10px;
	width: 90%;
	max-width: 1300px;
	margin: auto;
		margin-top: 50px;
}
	.comp-container {
    gap: 5px;
}
.companybox.second .element,
.companybox.third .element,
.companybox.first .element {
	font-size: 0.44em!important;
}
.companybox.second .element,
.companybox.third .element,
.companybox.first .element {
    height: 100px;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
	text-align: left;
}

.companybox.first .element {height: 160px;}
.companybox.second .element-1 img,.companybox.second .element-5 img,
.companybox.third .element-1 img,.companybox.third .element-5 img,
.companybox.first .element-1 img,.companybox.first .element-5 img {
	width:auto;
	height: 80%;
}
.companybox.third .element-3 img,
.companybox.first .element-3 img {
	width:auto;
	height: 50%;
}
.companybox.second .element-3 img{
	width:auto;
	height: 66%;
}
.companybox.second .element-5 img{
	width:auto;
	height: 46%;
}
.companybox.third .element-1 img{
	width:auto;
	height: 80%;
}
.companybox.first .element-1 img,.companybox.first .element-5 img {
	width:auto;
	height: 55%;
}
.companybox.first .element-3 img {
	width:auto;
	height: 36%;
}
.companybox.second .element-1,.companybox.second  .element-3,.companybox.second  .element-5,
.companybox.third .element-1,.companybox.third .element-3,.companybox.third  .element-5,
.companybox.first .element-1,.companybox.first  .element-3,.companybox.first  .element-5 {
    width: calc(30% - 5px);
}

.companybox.second .element-2,.companybox.second  .element-4,.companybox.second  .element-6,
.companybox.third .element-2,.companybox.third .element-4,.companybox.third  .element-6,
.companybox.first .element-2,.companybox.first  .element-4,.companybox.first  .element-6 {
    width: calc(70% - 5px);
    justify-content: flex-start;
	padding-left: 1em;
}
	.icdabox > div:nth-child(3) div,
	.icdabox > div:nth-child(1) div{
		width: 100%;
	}
.icdabox > div:nth-child(3),
.icdabox > div:nth-child(1){
	width: 100%;
	font-size: 100%;
	padding-right:0;
}
	
	.icdabox > div:nth-child(3) > div:nth-child(3){
		font-size: 1.8em;
	}
	.element .mobile-only{
		display: block;
	}
	.comp-container{
		font-size: 160%;
	}
	.element .desktop-only{
		display: none;
	}
	.flex.recycling{flex-wrap: wrap;}
.flex.recycling > div{
	width: 48%;margin-bottom: 10px;
}
	.flex.recycling{
		font-size: 0.5em;
	}
	.companybox.first,
	.companybox.second,
	.companybox.third{
		padding: 30px;
	}
	.recycling{font-size: 0.8em!important;}
	.daisansyaceli > div:nth-child(odd){
		margin-bottom: 0.5em;
	}
	.daisansyaceli > div{
		letter-spacing: 0.08em;
	}
	.daisansyaceli{
		font-size: 110%;
}
.zankakinri-container {
    margin:100px auto;
}
.underlink.index{
	font-size:100%;
	color: #595757;
	padding:0.6em 0 0.7em;
	border:  1px solid #595757;
	width: 11em;
	margin-bottom: 100px;
}

}

/* scroll-badgeの位置調整とクリック機能 */
.scroll-badge {
   position: fixed;
   top: 50px;
   left: 0;
   width: 10%;
		min-width: 80px;
   text-align: center;
   transition: all 0.3s ease;
   z-index: 10;
   animation: pulseAnimation 2s ease-in-out infinite;
   transform-origin: top left;
   cursor: pointer;
}

.scroll-badge.active {
   transform: scale(0.95);
}

/* サイドメニューの背景色と文字色変更 */
.side-menu {
   position: fixed;
   top: 0;
   left: -100vw;
   width: 100vw;
   height: 100vh;       /* ビューポートに合わせる */
   background: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: left 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
   z-index: 1000;

   overflow-y: auto;    /* 縦スクロールを許可 */
   padding: 20px;       /* スクロール時の余白 */
   box-sizing: border-box;
}

.side-menu.active {
   left: 0;
}

.side-menu ul {
   list-style: none;
   text-align: center;
   width: 100%;
   padding: 0;
   margin: 0;
}

.side-menu li {
   width: 100%;
   margin: 1.5em auto;
   opacity: 0;
   transform: translateX(-50px);
   transition: all 0.3s ease;
}

.side-menu.active li {
   opacity: 1;
   transform: translateX(0);
}

.side-menu li:nth-child(1) { transition-delay: 0.1s; }
.side-menu li:nth-child(2) { transition-delay: 0.2s; }
.side-menu li:nth-child(3) { transition-delay: 0.3s; }
.side-menu li:nth-child(4) { transition-delay: 0.4s; }
.side-menu li:nth-child(5) { transition-delay: 0.5s; }
/*
.side-menu a {
   color: #000;
   font-size: 1.6rem;
   letter-spacing: 0.08em;
   text-decoration: none;
   transition: all 0.3s;
   display: block;
   width: 70%;
   margin: 0 auto;
   padding: 20px;
   background: rgba(0, 0, 0, 0.1);
   border-radius: 15px;
   backdrop-filter: blur(5px);
   border: 1px solid rgba(0, 0, 0, 0.2);
}

.side-menu a:hover {
   background: rgba(0, 0, 0, 0.2);
   transform: scale(1.05);
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
   color: #000;
}
*/
.side-menu .close-btn {
   position: absolute;
   top: 20px;
   right: 20px;
   width: 40px;
   height: 40px;
   cursor: pointer;
   z-index: 1002;
   background: rgba(0, 0, 0, 0.1);
   border-radius: 50%;
   backdrop-filter: blur(5px);
   border: 1px solid rgba(0, 0, 0, 0.2);
   transition: all 0.3s ease;
}

.side-menu .close-btn:hover {
   background: rgba(0, 0, 0, 0.2);
   transform: scale(1.1);
}

@media (min-width: 768px) {
.scroll-badge {
    position: fixed;
    top: 82px;
    left: 0;
    width: 120px;
    height: 120px;
    text-align: center;
    transition: all 0.3s ease;
    z-index: 10;
    animation: pulseAnimation 2s ease-in-out infinite;
    transform-origin: top left;
}
}
.wipe-effect.wipe-nomal{
	border: solid 3px #004098;
}
.contact-table {
            border-collapse: collapse;
            font-size: 16px;
            color: #333;
            margin: 20px auto;
        }
        
        .contact-table td {
            padding: 4px 0;
            vertical-align: top;
        }
        
        .contact-table .label {
            padding-right: 15px;
            border-right: 1px solid #333;
            margin-right: 10px;
            white-space: nowrap;
            font-weight: bold;
        }
        
        .contact-table .value {
            padding-left: 15px;
            text-align: left;
        }
        
        .contact-table .indent {
            padding-left: 30px;
        }

@media (max-width: 480px) {
.side-menu {
	padding-bottom: 100px;
}
	.contact-table {
		font-size: 13px;
	}
	.contact-table .label {
            padding-right: 10px;
            border-right: 1px solid #333;
            margin-right: 10px;
            white-space: nowrap;
            font-weight: bold;
        }
}
.your-element {
  display: none;
}

@media (max-width: 480px) {
h2.zanka{
	width: 92%;
}
.hosyou{
	width: 70%;
}
  .your-element {
    display: block;
  }
}
/* サイドメニュー内の.icda-wrapperを通常のブロック要素として扱う */
.side-menu .icda-wrapper {
   align-self: flex-start !important;
   width: 100% !important;
   max-width: 1300px !important;
   flex-shrink: 0 !important;
	margin-top: 0px;
}
.main-image {
   width: 100%;
   height: auto;
   display: block;
    margin-bottom: 20px;
}

.side-menu .icda-wrapper .content-grid {
   display: grid !important;
   grid-template-columns: repeat(5, 1fr) !important;
   gap: 20px !important;
	margin-top: 30px;
}

.side-menu .icda-wrapper .item2 {
   display: flex !important;
   flex-direction: column !important;
   align-items: center !important;
   justify-content: flex-start !important;
   width: auto !important;
}
.icda-wrapper .item2 img {
   width: 100%;
   object-fit: contain;
   margin-bottom: 5px;
   filter: brightness(1.1);
}

.item2-text a {
	text-indent: 0.5em;
	margin-bottom: -1em;
	padding-bottom: 0.3em;
  position: relative; /* ← これを追加 */
  display: inline-block; /* 擬似要素の幅を安定させる */
  text-decoration: none; /* デフォルトの下線を消す */
}

.item2-text a::after {
  position: absolute;
  left: 0;
  content: '';
  width: 100%;
  height: 2px;
  background: #000000;
  bottom: 0;  /* 下辺からの位置 */
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
}

.item2-text a:hover::after {
  visibility: visible;
  bottom: -2px; /* アニメーションの終着点 */
  opacity: 1;
}

.icda-wrapper .item2-text {
   font-size: 14px;
   line-height: 1.5em;
   text-align: left;
   font-weight: 500;
   margin-top: 8px;
   margin-bottom: 5px;
}
.icda-wrapper .item2-text br {
   margin-bottom: 1px;
}
.item2-text a {
  display: block;
  text-decoration: none;
  position: relative;
  padding-left: 1em;
  text-indent: -1em;
}

@media (max-width: 480px) {
.main-image { margin-bottom: 30px;}
.side-menu .icda-wrapper {
   width: 100% !important;
	margin-top: 0px;
	padding-right: 1.5%!important;
}
.side-menu .icda-wrapper .item2 {
	margin-bottom: 5px;
}
	
.item2-text a::after {
  position: absolute;
  left: 0;
  content: '';
  width: 100%;
  height: 1px;
  background: #000000;
  bottom: 0;  /* 下辺からの位置 */
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
}

.side-menu .icda-wrapper .content-grid {
   display: grid !important;
   grid-template-columns: repeat(2, 1fr) !important;
   gap: 14px !important;
	width: 82%;
	margin: auto;
	margin-top: 10px;
}
.icda-wrapper .item2-text {
   font-size: 0.68em;
   text-align: left;
   font-weight: 500;
   margin-bottom: 10px;
	line-height: 1.4em;
}
.icda-wrapper .item2-text br {
   margin-bottom:0;
}
}
.sp-ins,
.sp-br{
    display: none;
}

.pc-space {
    display: inline;
}

@media screen and (max-width: 480px) {
	.threebox .theundertext{
		font-size: 90%;
		padding-bottom: 1em;
	}
.threebox > div:nth-child(3){
	width: 100%;
	margin: auto;
}
	.side-menu .icda-wrapper .content-grid {
	width: 100%;
}
    .sp-ins,.sp-br {
        display: inline-block;
    }
	.pc-ins{display: none;}
    .pc-space {
        display: none; /* スマホでスペースを非表示 */
    }
}
#loading-screen-sec,
#loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #004098;
    display: flex;
    flex-direction: column;
    align-items: center;
	justify-content: center;
    z-index: 9999;
    transition: opacity 0.5s ease-out;
}
#loading-screen-sec{
	position: absolute;
    z-index: 10;
	background: none;
}
.loading-content {
    transform: translateY(-40px);
}
#loading-screen.hide {
    opacity: 0;
    pointer-events: none;
}

.loading-text {
    color: white;
    font-size: 50px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 30px;
	letter-spacing: 0.08em;
	transform: translateY(20px);
}

.loading-image {
    max-width: 90%;
	width: 1300px;
    height: auto;
    object-fit: contain;
}

.fixed-logosec{
	margin: auto;
    max-width: 90%;
	width: 1300px;
    height: auto;
	margin-left: 1vw;
    object-fit: contain;
	margin-top: 30px;
}
#loading-screen-sec{
		z-index: 2;
	}
/* SP用 (480px以下) */
@media screen and (max-width: 480px) {
	.daisansyaceli{font-size: 90%;}
.tenpo.undersec {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    max-width: 1000px;
    width: 90%;
    margin: 50px auto;
}

	.tenpo.undersec .underlink.index:hover{
		color: #fff;
	}
.tenpo.undersec .underlink.index {
    color: #595757;
    padding: 0.6em 0.9em 0.7em;
    border: 1px solid #595757;
	width: auto;
    margin: auto;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: color 0.3s ease;
    font-size: 0.8em;
}
	
	.tenpo-info{
		font-size: 80%;
            display: flex;
            margin: 2em 0;
			line-height: 1.8em;
			letter-spacing: 0.08em;
		width: 100%!important;
		padding: 0;
        }
        
	 .info-labels {
		 margin-left: 0;
            width: 20%;
			white-space: nowrap;
        }
        
        .info-details {
            width: 80%;
            border-left: 1px solid #000;
            padding-left: 15px;
			text-align: left;			
        }	
	
	
.servicebox div{width: 100%;}
.servicebox div img{ width: 100%;}
	
	
	.loading-image {
        width: 80%;
        height: auto;
    }
    .loading-text {
	letter-spacing: 0.05em;
        font-size: 28px;
        line-height: 1.4;
		margin-bottom: 10px;
    }
#loading-screen-sec,
#loading-screen {transform: translateY(0px);}
	#loading-screen-sec{
		z-index: 2;
	}
@supports (-webkit-touch-callout: none) {
    #loading-screen-sec,
    #loading-screen {
        transform: translateY(-40px);
    }
}

}

/* LINEブラウザを除外 */
@media not all and (display-mode: standalone) {
    #loading-screen-sec,
    #loading-screen {
        transform: translateY(0);
    }
}
img.main-image,
.content-grid .item2 img{
	transition: 0.2s;
	background: #fff;
}
img.main-image:hover,
.content-grid .item2 img:hover{
	opacity: 0.7;
}

/* 初期状態：透明、横スライド無効化 */
.wipe-effect img.hover-scale {
  opacity: 0 !important;
  transform: none !important;
  transition: opacity 1s ease !important;
}

/* showクラスで遅延フェードイン */
.wipe-effect.show img.hover-scale {
  opacity: 1 !important;
  transition-delay: 0.5s !important;
}

.wipe-effect img.hover-scale:hover {
  transform: scale(1.1) !important;
  opacity: 0.8 !important;
  transition: transform 0.3s ease, opacity 0.3s ease !important;
}
.loading-text,
.loading-image {
    opacity: 0;
    animation: fadeIn 1s ease-in-out forwards;
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}
/* opacity を強制的に 1 に */
td.value a[href^="tel:"] {
    opacity: 1 !important;
    transform: translateX(0) !important;
    visibility: visible !important;
    color: #333333 !important;
}

/* または、wipe-effect を無効化 */
.fade-up.wipe-effect.wipe-nomal td.value a {
    opacity: 1 !important;
    transform: translateX(0) !important;
}