@charset "utf-8";
/* CSS Document */

    .tabs-content { display: none; }
/**************************************************************/
.sp{display:none;}
.pc{display: block;}
@media screen and (max-width:750px){
	.sp{display:block;}
	.pc{display:none;}
}
/****************************************************/
.out{
	display: none;
}

body{
	height: 100%;
	transform: none !important;
}
.track-wrapper{
	background: white;
}
#loading {height: 100vh !important;}
/*.track-wrapper header#mainheader {
    z-index: 10;
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    opacity: 1;
    transition: all 0.4s ease;
    height: 0;
}*/

#track-view{
	position: relative;
	background-image: url("images/track-record/track-back.png");
	background-repeat: no-repeat;
	    background-position: top;
    background-size: 100%;
	height: 100vh;
}

#track-view #track .upper{
	    display: flex;
    margin-bottom: calc(32 / 1080* 100%);
	    justify-content: center;
    align-items: center;
    gap: 7%;
}

#track-view #track .upper .sec-title-wrapper .sec-title{
	    text-indent: -9999px;
    background: no-repeat center url("images/track-record/title-track.png");
    background-size: 100% auto;
    margin-bottom: calc(16 / 320* 100%);
    width: 234px;
    height: 225px;
}

#service-view #service {
    display: block;
}

.center2{
	    max-width: 1500px;
    margin: 0 auto;
    padding-left: 90px;
    padding-right: 50px;
    box-sizing: border-box;
}

.track-tpimg{
    position: absolute;
    top: 40%;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
        padding-left: 12%;
    padding-right: 6%;
    box-sizing: border-box;
}

.fp-tableCell{
	    position: absolute;
    top: 25%;
    left: 0;
    right: 0;
	width: 100%;
}

.message{
	width: 66%;
	margin: auto;
}

/******************************************/

.web-flex,.dtp-flex{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	width: 100%;
	    gap: 5%;
    margin-left: 10%;
}

.photo-select01,.other-select01{
	margin-left: 10%;
}

.tab-button-web{
	background-color: #05A2E8;
	z-index: 4;
}

.tab-button-dtp{
	background-color: #F28F05;
	z-index: 3;
}

.tab-button-photography{
	background-color: #B8CD47;
	z-index: 2;
}

.tab-button-others{
	background-color: #FCA8D7;
	z-index: 1;
}
.track-menu {
    width: 70%;
    margin: 20px auto;
    max-width: 1333px;
    position: absolute;
    top: 70%;
    right: 0;
    left: 0;
}

.tabs {
    display: flex;
	padding: 0 4%;
}

.tab-button {
    flex: 1;
    padding: 1% 1% 2% 1%;
    cursor: pointer;
    border: none;
	border-radius: 8px;
    font-size: 16px;
    transition: background-color 0.3s;
	    margin-left: -1%;
	margin-right: -1%;
}

.tab-button.active {
   /* background-color: #2196F3;*/
    color: black;
	transform: scale(1.05);
	    border-radius: 8px;
	z-index: 5;
}

.tab-content {
	/* 方眼紙模様に必須のスタイル */
        background-image: linear-gradient(0deg, transparent calc(100% - 1px), #def6ff calc(100% - 1px)), linear-gradient(90deg, transparent calc(100% - 1px), #def6ff calc(100% - 1px));
    background-size: 16px 16px;
    background-repeat: repeat;
    background-position: center center;
    background-color: white;
    border: 1px solid #000000;
	/* 以下任意のスタイル */
    padding: 3% 0;
	border-radius: 8px;
	    position: absolute;
    top: 70%;
    width: 100%;
    z-index: 4;
}

.content {
    display: none ;
}

.content.active {
    display: block;
}

.tab-link.tab-link {
    text-decoration: none;
    color: #333;
    padding-bottom: 4px;
    display: inline-block;
    border-bottom: 2px solid transparent;
}
.tab-link.active {
    border-bottom: 2px solid #000000; /* 下線の色を設定 */
}
/******************取引先の情報ここから************************/
.web-list{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, auto);
  gap: 70px;
    width: 70%;
    margin: auto;
}

#official-web{
	display: block;
}

.web-img img{
	width: 100%;
}

.web-site h1{
	font-size: 1.6vw;
}
.page-numbers{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 80%;
	gap:5%;
	margin: 5% auto 0 auto;
}

.content-section {
    display: none;
}

.web-site a {
	font-size: 1.2vw;
	color: #05A2E8;
}

.industry{
	    display: flex;
    justify-content: flex-end;
}
.industry p{
	text-align: center;
	background-color: #FFEC52;
	border-radius: 25vh;
	padding: 1% 3%;
}

.pagination-list li a{
	    text-align: center;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.pagination-list {
    display: flex;           /* 横並びにする */
    justify-content: center; /* 中央揃えにする */
    list-style: none;        /* リストのデフォルトスタイルを削除 */
    padding: 0;
    margin: 5% auto 0 auto;
    gap: 5%;            /* 各要素の間隔 */
}

.pagination-list .active span {
        padding: 10px;
    width: 100%;
    text-align: center;
    align-items: center;
    color: #fff;
    background-color: #F28F05;
    border-radius: 50%;
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.info-prepare{
	text-align: center;
    font-size: 21px;
}
/******************取引先一覧ここから***********************/

.part-title{
	display: flex;
	justify-content: left;
	align-items: baseline;
	gap:3%;
	margin-bottom: 5%;
}

.part-title h1{
	font-size: 36px;
	color: #B8CD47;
}
.part-title p{
	font-size: 24px;
	flex: 1;
}

.fs16{
	font-size: 16px;
	margin-left: 3%;
}
.part-grid{
	 display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(7, auto);
  gap: 10px; /* 各要素間の隙間 */
}

.track-partners{
	width: 60%;
    margin: 5% auto;
    border: 1px solid #000;
    border-radius: 20px;
    padding: 3%;
	background-color: rgba(255,255,255,0.4);
	
}

.track-view2{
	position: relative;
    background-image: url(images/track-record/track-back2.png);
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: 100%;
    height: 107vh;
}

.akushu-img{
	    position: absolute;
    top: 0%;
    right: 20%;
    width: 15%;
	z-index: 1;
}

.akushu-img img {
	width: 100%;
}

  /* 画像を握手しているように上下に動かすアニメーション */
  .handshake {
    width: 200px;
    animation: shake 3.5s infinite;
  }

  @keyframes shake {
    0% { transform: translateY(0); }
    10% { transform: translateY(-8px); }
    20% { transform: translateY(6px); }
    30% { transform: translateY(-10px); }
    40% { transform: translateY(5px); }
    50% { transform: translateY(-6px); }
    60% { transform: translateY(4px); }
    70% { transform: translateY(-5px); }
    80% { transform: translateY(3px); }
    90% { transform: translateY(-2px); }
    100% { transform: translateY(0); }
  }

.page-onclick{
	    position: absolute;

    right: 0;
    left: 0;
    text-align: center;
	    margin: 5% auto;
}

.page-onclick img{
	position: relative;
}

  @keyframes dronhov {
    0% {
      transform: translate(0, 0);
    }
    25% {
      transform: translate(5px, -10px) rotate(1deg);
    }
    50% {
      transform: translate(-5px, 5px) rotate(-1deg);
    }
    75% {
      transform: translate(5px, -5px) rotate(1deg);
    }
    100% {
      transform: translate(0, 0);
    }
  }



#movable-image {
    position: relative;
	z-index: 10;
    transition: transform 0.5s ease-in-out;
	animation: dronhov 3s ease-in-out infinite;
}


@keyframes moveUpDown {
    0% { transform: translateY(0); }         
    25% { transform: translateY(-200vh); }   
    50% { transform: translateY(5vh); }     
    100% { transform: translateY(0); }       
}

/*#movable-image.animate {
    animation: moveUpDown 4s ease-in-out;  画面上部まで移動 
}*/

@keyframes droneFly {
  0% { transform: translateY(0); }
  30% { transform: translateY(var(--move-up-distance)); }  /* 上昇 */
  60% { transform: translateY(var(--move-down-distance)); } /* 降下 */
  100% { transform: translateY(0); }  /* 元の位置に戻る */
}

#movable-image.animate {
  animation: droneFly 3s ease-in-out;
}

.page-foo{
	    position: absolute;
    right: 0;
    left: 0;
    text-align: center;
	margin: 20% auto;
}
.foo-top{
	font-family: "anton", sans-serif;
	font-weight: 400;
	font-style: normal;
	color: #fff;
	-webkit-text-stroke-color: black;
    -webkit-text-stroke-width: 2px;
    font-size: 55px;
	    margin-bottom: 2%;
}
/*********************画面幅変更によるデザイン調整ここから**************************/
@media screen and (max-width:1400px) {
	.akushu-img {
		top:5%;
	}
}

@media screen and (max-width:1100px) {
	.akushu-img {
		top:8%;
	}
}

@media screen and (max-width:1070px) {
	.web-flex {
		margin-left: 2%;	
	}
	@media screen and (max-width:950px) {
		.web-flex{
			display: block;
			margin: 0 auto 0 10%;
		}
	}
}
/*********************画面幅変更によるデザイン調整ここまで**************************/


/************************スマホサイズここから******************************/

@media screen and (max-width:750px) {
	.fp-tableCell {
		top: 15%;
	}

	#track-view #track .upper {
		display: block;
	}
	.track-tpimg {
		top: 20%;
        width: 45%;
	}
	.track-tpimg img{
		width: 100%;
	}
	.center2 {
	    padding-left: 20px;
    	padding-right: 20px;	
	}
	
	#track-view #track .upper .sec-title-wrapper .sec-title {
		width: calc(234px* 0.8);
    	height: calc(225px* 0.8);
	}
	.track-menu {
		width: 90%;
		margin: auto;
		    top: 65%;
	}
	
	.tab-content {
	    width: 100%;	
	}
	.track-partners {
		width: 85%;
		    top: 5%;
	}
	.part-title {
		display: block;
	}
	.part-title h1 ,.part-title p {
		text-align: center;
	}
	
	.akushu-img {
		top: 0;
   		right: 5%;
    	width: 30%;
	}
	.message {
		width: 90%;
		font-size: 3vw;
	}
	
	.web-list{
		display: block;
		width: 85%;
	}
	
	.web-site{
		margin: 10% auto;
	}
	.web-site a {
		font-size: 3vw;
	}
	.web-site h1 {
		font-size: 5.6vw;
	}
	.web-flex{
			margin: auto;
			width: 80%;
		}
	.track-naiyou{
		margin-top: 10%;
	}
	.page-foo{
		margin: 50% auto 0 auto;
	}
}
@media screen and (max-width: 640px) {
    .message {
        max-width: none;
    }
}

@media screen and (max-width: 560px) {
	.track-tpimg {
        top: 23%;
        width: 50%;
    }
}

@media screen and (max-width: 415px) {
	.track-tpimg {
        top: 25%;
        width: 55%;

    }	
}
	@media screen and (max-width: 300px){
	    .track-tpimg {
        	top: 27%;
        	width: 60%;
    	}
	}
/************************スマホサイズここまで******************************/