/* 3D photo  */

* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.txt-linehg-15{
	line-height:1.5;
}

.txt-linehg-20{
	line-height:2.0;
}

.containers, .content, .credit {
  margin: auto;
  font-family: Quicksand, sans-serif;
}
.containers {
  width: 94.02985075%;
  max-width: 1260px;
  padding: 0 2.25em 4em;
  padding: 0 2.25em 1em;
  background: #fff;
  background: #f4f4f4; /*20241030*/
}
.cube-container {
  max-width: 200px;
  text-align: center;
  margin: 0 auto 4.5em;
  margin: 0 auto 3.5em;
}
img {
  width: 300px;
}
.title {
  text-transform: uppercase;
  padding: 20px;
  margin: 50px;
}
/* transitions */
.cube-container {
  -webkit-box-shadow: 0 18px 40px 5px rgba(0, 0, 0, .4);
          box-shadow: 0 18px 40px 5px rgba(0, 0, 0, .4);
  -webkit-perspective: 800px;
          perspective: 800px;
}

.photo-cube {
  -webkit-transition: -webkit-transform 3s ease-in-out;
  transition: -webkit-transform 3s ease-in-out;
  -o-transition: transform 3s ease-in-out;
  transition: transform 3s ease-in-out;
  transition: transform 3s ease-in-out, -webkit-transform 3s ease-in-out;
  width: 220px;
  height: 200px;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

.photo-cube:hover {
  -webkit-transform: rotateY(-270deg);
          transform: rotateY(-270deg);
}

.front, .back, .left, .right {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
}

.front {
  -webkit-transform: translate3d(0, 0, 110px);
          transform: translate3d(0, 0, 110px);
}

.back {
  -webkit-transform: translateZ(-110px) rotateY(270deg);
          transform: translateZ(-110px) rotateY(270deg);
  -webkit-transform-origin: center left;
      -ms-transform-origin: center left;
          transform-origin: center left;
}

.left {
  -webkit-transform: rotateY(-270deg) translate3d(110px, 0, 0);
          transform: rotateY(-270deg) translate3d(110px, 0, 0);
  -webkit-transform-origin: top right;
      -ms-transform-origin: top right;
          transform-origin: top right;
}

.right {
  -webkit-transform: translateZ(-110px) rotateY(180deg);
          transform: translateZ(-110px) rotateY(180deg);
}

/* photo overlay */
h3 {
  font-size: 2em;
  font-size: 1.5em;
  padding-bottom: .5em;
  color:var(--bs-white) !important;
}

h4 {
  font-size: 1.2em;
  padding-bottom: .5em;
  color:var(--bs-white) !important;
}

.photo-desc {
  color: #fff;
  padding: 2em;
}

.mountains {
  background: #2098a3;
  background:var(--bs-secondary) !important;
 
}

.mountains-back {
  background:url(../img/product-image/31.jpg);
}

.mountains-right {
  background:url(../img/product-image/spot_v_1_w250_.jpg);
 
}
.mountains-left {
  background:url(../img/product-image/spot_v_1_w250_.jpg);
 
}
.mountains-front {
  background:url(../img/product-image/toku_n01_w700.jpg);
 
}


.deserts {
  background: #E37507;
  background:var(--bs-secondary) !important;

}
.forests {
  background: #155018;
  background:var(--bs-secondary) !important;
}

.mountain-button {
  background: #60dae5;
  background:var(--bs-white) !important;
  color:var(--bs-black) !important;
}

.desert-button {
  background: #f4b16e;
  background:var(--bs-white) !important;
  color:var(--bs-black) !important;
}
.forest-button {
  background: #66ad6e;
  background:var(--bs-white) !important;
  color:var(--bs-black) !important;
}
.credit {
  text-align: center;
  margin: 0 auto;
}
/* float clearfix */

.clearfix::after {
  content: " ";
  display: table;
  clear: both;
}





/*タブ仕様*/

.tab-wrap {
  display: flex;
  flex-wrap: wrap;
  margin:20px 0;
}
.tab-wrap:after {
  content: '';
  width: 100%;
  height: 3px;
  background: #325A8C;
  display: block;
  order: -1;
}
.tab-label {
  color: White;
  color: #000000;
  
  background: white;
  
  font-weight: bold;
  white-space: nowrap;
  text-align: center;
  padding: 10px .5em;
  order: -1;
  position: relative;
  z-index: 1;
  cursor: pointer;
  /*border-radius: 5px 5px 0 0;*/
  flex: 1;
  
}
.tab-label:not(:last-of-type) {
  margin-right: 15px;
}

.tab-content {
  width: 100%;
  height: 0;
  overflow: hidden;
  opacity: 0;
}

.tab-switch:checked+.tab-label {
  background: #325A8C;
  background: #ffffff;
}

.tab-switch:checked+.tab-label+.tab-content {
  height: auto;
  overflow: auto;
  padding: 15px;
  opacity: 1;
  transition: .5s opacity;
  /*box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);*/
}
.tab-switch {
  display: none;
}

.tab-switch:checked+.tab-label:after {
    top: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    /*border-color: rgba(136, 183, 213, 0);*/
    border-top-color: #325a8c;
    border-width: 14px;
    margin-left: -14px;
}
.tab-switch:checked+.tab-label {
    background: #325A8C;
	background: #ffffff;
    position: relative;
}

/**/

.btn-gray{color:#fff;background-color:#6c757d;border-color:#6c757d;}
.btn-black{color:#fff;background-color:#000000;border-color:#000000;}



.text-black{color:rgba(0,0,0) !important}

.bg-gray{ 
	background-color:#f4f4f4;
}

.navbar-toggle{
	top:0;
	left:0;
}


.ls-base{
  letter-spacing: 0.5em;
}



 .top-title-ease {
    animation: toptitleAnime 1.5s 2s forwards ease-in;
    opacity: 0;
}



@keyframes toptitleAnime {
    to {
        opacity: 1;
    }
}

/*20241122 LED */

/*20241122 LED top img */
.ledbg{
	background-image:url(../img/led/ledtopimg.jpg);
    background-repeat: no-repeat;
    background-size:cover;
	
	display: grid;
    place-items: center;
    position: relative;
    width: 100vw;
    height: 70vh;
    background-image:url(../img/led/ledtopimg.jpg);
    background-size: cover;
    background-position: top;
    z-index: 0;
	
}

.ledbg::before {
    position: absolute;
    inset: 0;
    background: inherit;
    content: '';
    z-index: -1;
    animation: containerAnime 1.5s 1s forwards ease-in-out;
}

.box-title {
    margin: 0;
    color: #fff;
    /*font-size: 26px;*/
    font-weight: bold;
    font-family: serif;
    animation: titleAnime 1.5s 2s forwards ease-in;
    opacity: 0;
}


@keyframes containerAnime {
    to {
        filter: brightness(.8) blur(3px);
    }
}

@keyframes titleAnime {
    to {
        opacity: 1;
    }
}

.areacompany {
	/*background-image:url(../img/cor/corbuilding.jpg);*/
	background-image:url(../img/cor/2Fwork.jpg);
	background-position:center center;
	background-size:cover;
	height:500px;
}


.pagetitle h1{
    font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
}

/*会社概要見出し*/
.heading-2 {
    padding:0 .4em .2em;
    border-bottom: 3px solid #2589d0;
}

/*会社概要用テーブル*/
.table10 {
    width: 100%;
    text-align: left;
    border-collapse: collapse;
    border-spacing: 0;
    color: #353535;
}

.table10 thead {
    background: #d3edeb;
}

.table10 th,
.table10 td {
    border: 1px solid #ccc;
    padding: 10px;
	padding:15px 0 15px 15px;
}

.table10 td a {
 color:#2589d0;
}

.table10 td a:hover{
    color:var(--bs-gray-dark);
}

.table10 th{
	width:15%;
	font-weight:normal;
}

/*会社概要用タイムライン*/
.timeline10 {
  list-style: none;
}
.timeline10 > li {
  margin-bottom: 60px;
}

.timeline10-content p{
    color:#333333;
}





/*アンカーリンクのズレ対応*/
.scrolllink {
    padding-top:150px;
    margin-top:-150px;
}

/*マップサイズ端末対応*/
.gmap {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 56.25%;    /*16:9の比率にしたい場合、9/16=56.25%*/
}

.gmap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*会社情報ページ内リンクボタン*/
.feature-itemlink{
	background-color:var(--bs-white);
}

.feature-itemlink a{
	color:var(--bs-black);
}

.feature-itemlink:hover{
	background-color:var(--bs-gray);
	border:none;
	color:var(--bs-white);
}

.feature-itemlink:hover a{
	color:var(--bs-white);
}

/*パンくず*/
.breadcrumb {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background-color: #ffffff;
    color: #999;
    list-style: none;
}

.breadcrumb li {
    font-weight: 300;
	font-size: 1.0rem;
}

.breadcrumb li:after {
    padding: 0 0 1rem 1rem;
    content: '>';
    font-size: 1.2rem;
    font-weight: normal;
}

.breadcrumb li:last-child::after {
    padding: 0 0 1rem 1rem;
    content: '';
    font-size: 1.2rem;
    font-weight: normal;
}

.breadcrumb li a {
    text-decoration: none;
    color: #66d3bd;
	color:var(--bs-gray-dark);
}


.text-active{color:#2589d0 !important}

div.news a{
	color:var(--bs-black);
}

div.news a:hover{
	color:var(--bs-blue);
}


.producticon{
	position:relative;
}

.producticon h2{
	margin-right:10%;
}

.producticon img{
	position:absolute;
	top:0;
	right:0;
}

/*------------------------------------------------------------------------------------------*/


.cp_cssslider02 {
  width: 100%;
  max-width: 800px;
  margin: 2em auto;
  text-align: center;
}

.cp_cssslider02 input[type="radio"] {
  display: none;
}

.cp_cssslider02 .main-imgs {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-bottom: 10px;
  
}

.cp_cssslider02 .main-imgs img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0,0,0,0.3);
  opacity: 0;
  transition: opacity 0.5s;
  pointer-events: none;
  padding:10px;
}

/* 画像表示条件（:checked + label + imgの順に並ぶ前提） */
#photo1:checked ~ .main-imgs img:nth-child(1),
#photo2:checked ~ .main-imgs img:nth-child(2),
#photo3:checked ~ .main-imgs img:nth-child(3),
#photo4:checked ~ .main-imgs img:nth-child(4),
#photo5:checked ~ .main-imgs img:nth-child(5),
#photo6:checked ~ .main-imgs img:nth-child(6),
#photo7:checked ~ .main-imgs img:nth-child(7) {
  opacity: 1;
  pointer-events: auto;
}

.cp_cssslider02 label {
  display: inline-block;
  margin: 0 4px;
  cursor: pointer;
  opacity: 0.6;
  transition: 0.3s;
  border: 2px solid white;
  border-radius: 3px;
}

.cp_cssslider02 label:hover {
  opacity: 1;
}

.cp_cssslider02 label img {
  width: 40px;
  height: auto;
  border-radius: 3px;
}
/*--------------------------------------------------------------------------------------------*/

/*font size  レスポンシプ*/

/*h1*/
.risizefonth1{
	font-size: clamp(1.2rem, calc(2.2rem + 0.625vw), 2.5rem);
}

.risizefonth2{
	font-size: clamp(1.0rem, calc(1rem + 0.625vw), 1.7rem);
}


@media screen and (max-width: 1024px) {
  body {
    font-size: 14px;
  }
}
.section {
  max-width: 300px;
  margin: 0 auto;
  padding: 30px 0;
}
.section p._a {
  font-size: 12px;
  font-weight: bold;
  margin: 30px 0 0;
}
.section p._a .link {
  display: inline-block;
  color: #607D8B;
  padding-left: 1.3em;
  text-indent: -1.3em;
}
.section p._a .link:before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-top: 2px solid #607D8B;
  border-right: 2px solid #607D8B;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  margin-right: 10px;
}

/* media queries */
@media (min-width: 769px) {
  .cube-container {
    float: left;
    margin-left: 16.6%;
  }
  .credit {
    text-align: right;
    margin-right: 3em;
    
  }
}

@media (min-width: 1025px) {
  .cube-container:first-child {
    margin-left: 0;
  }
  .cube-container:last-child {
    float: right;
  }
  .content {
    max-width: 900px;
    margin: auto;
  }
}

/*電話スマホ有効*/
@media (min-width: 751px) {
	a[href*="tel:"] {
		pointer-events: none;
		cursor: default;
		text-decoration: none;
	}
}

@media (min-width: 992px) {
  .nodismenu{
    display: none;
  }
}

/* for Desktop */
@media ( min-width : 640px ){
  .timeline10 > li {
    overflow: hidden;
    margin: 0;
    position: relative;
  }
  .timeline10-date {
    width: 110px;
    float: left;
    margin-top: 20px;
  }
  .timeline10-content {
    width: 75%;
    float: left;
    border-left: 3px #e5e5d1 solid;
    padding-left: 30px;
	height:80px;

  }
  .timeline10-content:before {
    content: '';
    width: 12px;
    height: 12px;
    background: #2589d0;
    position: absolute;
    left: 106px;
    top: 24px;
    border-radius: 100%;
  }
  
  .timeline10 p{
    color:#333333;
}

  .timeline10 a{
    color:#2589d0;
}

  .timeline10 a:hover{
    color:var(--bs-gray-dark);
}


}