@font-face {
  font-family: "Noto Serif JP";
  font-display: swap;
  src:
  url("https://www.zerosports.co.jp/fonts/NotoSerifJP-VariableFont_wght.woff2")format("woff2"),
  url("https://www.zerosports.co.jp/fonts/NotoSerifJP-VariableFont_wght.woff")format("woff"),
  url("https://www.zerosports.co.jp/fonts/NotoSerifJP-VariableFont_wght.eot")format("eot"),
  url("https://www.zerosports.co.jp/fonts/NotoSerifJP-VariableFont_wght.ttf")format("truetype")
  
}

body {
  font-family: "Noto Serif JP", serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: #444444;
}
img {
    max-width: 100%;
    max-height: 100%;
}

/*******************************************************************************/
/* ヘッダ */
header {
  text-align: center;
  max-width: 100%;
  width: 100%;
  height: auto;
  padding: 0px;
  display: flex;
  align-items: center;
  justify-content: center; /* 水平方向に中央揃え */
  margin: 0 auto;
  border-bottom: 6px solid;
  border-image: linear-gradient(to right, #003894 40%, #000000 50%, #003894 60%);
  border-image-slice: 1;
}

.header-row {
  text-align: center;
  max-width: 65vw;
  width: 65vw; /*100%;*/
  height: auto;
  padding: 0px;
  display: flex;
  align-items: center;
  justify-content: center; /* 水平方向に中央揃え */
  margin: 0 auto;
}

header .logo {
  max-width: 100%;
  height: auto;
  margin-right: auto; /* ロゴを左揃え */
}

/*******************************************************************************/
/* コンテンツ */
.contents {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.contents-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; /* 折り返しを許可 */
    margin: 1px 0;
}

.contents-row-middle {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; /* 折り返しを許可 */
    margin: 1px 0;
    background: url("/img/company/middle_background.png");
    background-position: center;
    background-repeat: no-repeat;
}

.contents-col-full {
    width: 100%;
    padding: 20px;
    margin: 1px;
    text-align: center;
}

.contents-col-full img {
  height: 456px;
}

/*
.contents-row-with-piston {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 1px 0;
}
*/
.contents-col-left-gradient {
    flex: 1 1 250px;
    padding: 20px;
    background-image: linear-gradient(90deg, rgba(233, 240, 250, 1), rgba(168, 202, 240, 1) 50%);
    opacity: 0.8;
    max-height: 100px;
    margin-right: 0.5px;
}
.contents-col-left-gradient > p {
    text-align: right;
    font-size: 1.6rem;
    font-weight: bold;
    /*水平, 垂直, ぼかし半径, 影の色*/
    text-shadow:1px 1px 0 #FFF, -1px -1px 0 #FFF,
                -1px 1px 0 #FFF, 1px -1px 0 #FFF,
                0px 1px 0 #FFF,  0px -1px 0 #FFF,
                -1px 0 0 #FFF, 1px 0 0 #FFF;
}
.contents-col-left-gradient > p > a,
.contents-col-right-gradient > p > a {
    text-decoration: none;
    color: inherit;
}

.contents-col-left-gradient > p > a:hover, 
.contents-col-right-gradient > p > a:hover {
    text-decoration: underline;
    color: inherit;
}

.contents-col-right-gradient {
    flex: 1 1 250px; /* 最小幅200pxで、残りのスペースを均等に分配 */
    padding: 20px;
    background-image: linear-gradient(90deg, rgba(168, 202, 240, 1) 50%, rgba(233, 240, 250, 1));
    background-color: rgba(255, 255, 255, 0.8);
    opacity: 0.8;
    max-height: 100px;
    margin-left: 0.5px;
}

.contents-col-right-gradient > p {
    text-align: left;
    font-size: 1.6rem;
    font-weight: bold;
    /*水平, 垂直, ぼかし半径, 影の色*/
    text-shadow:1px 1px 0 #FFF, -1px -1px 0 #FFF,
                -1px 1px 0 #FFF, 1px -1px 0 #FFF,
                0px 1px 0 #FFF,  0px -1px 0 #FFF,
                -1px 0 0 #FFF, 1px 0 0 #FFF;
}

/*******************************************************************************/
/* フッター */
.footer {
  margin-top: 20px;
  background: #eaf3ff;/*背景色*/
  padding: 20px;
  width: 100%;
  text-align: center;
  color: black;
}
.footer-navi {
  float: left;
  color: black !important;
}

.footer p {
	margin-right: initial;
	margin-left: initial;
	text-align: center;

}
/*******************************************************************************/
/* スライダー関連 */
.slider {
	width: 100%;
	margin: 0 auto;
}
.slide-wrapper .slick-slider,
.slick-track {
  height: auto;
}
.slick-slide {
  aspect-ratio: 8 / 5;
}

.slick-slide:not(.slick-center) {
  opacity: 0.3;
  transition: 0.2s linear;
}
.slick-list {
  padding: 0;
  margin: 0 0;
}
.slick-current > a > img{
  overflow: hidden;
}
.slick-current > a > img:hover{
  transform: scale(1.05, 1.05);
  transition:0.5s all;
}
.slick-current + .slick-active,
.slick-current + .slick-active + .slick-active {
  opacity: 1;

}

/*******************************************************************************/
/* タブレット */
@media (min-width: 767px) and (max-width: 1199px) {
.slick-slide:not(.slick-center) {
  opacity: 1;
  transition: 0.2s linear;
}
.contents-row {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap; /* 折り返しを許可 */
    margin: 1px 0;
    width: auto;
}
.contents-col-full {
    width: 100%;
    padding: 0px;
    margin: 0px;
    text-align: center;
}
.contents-col-left-gradient {
    flex: 1 1 250px;
    padding: 0px;
    background-image: linear-gradient(90deg, rgba(233, 240, 250, 1), rgba(168, 202, 240, 1) 50%);
    opacity: 0.8;
    max-height: 100px;
    margin-right: 0.5px;
    width: 100% !important;
    flex-direction: column;
}
.contents-col-left-gradient > p {
    text-align: left;
    font-size: 1rem;
    font-weight: bold;
}

.contents-col-right-gradient {
    flex: 1 1 250px; /* 最小幅200pxで、残りのスペースを均等に分配 */
    padding: 0px;
    background-image: linear-gradient(90deg, rgba(168, 202, 240, 1) 50%, rgba(233, 240, 250, 1));
    background-color: rgba(255, 255, 255, 0.8);
    opacity: 0.8;
    max-height: 100px;
    margin-left: 0.5px;
    width: 100% !important;
    flex-direction: column;
}

.contents-col-right-gradient > p {
    text-align: left;
    font-size: 1rem;
    font-weight: bold;
}

.footer {
  margin-top: 20px;
  background: #eaf3ff;/*背景色*/
  width: 100%;
  text-align: center;
  color: black;
  padding: 0px;
}

}
/*******************************************************************************/
/* スマートフォン */
@media (max-width: 766px) {
header .logo {
  max-height: 50%;
}
.slider {
	width: 100%;
	margin: 0 auto;
}
.slide-wrapper .slick-slider,
.slick-track {
    align-items: center;
	text-align: center;
  height: auto;
}
.slick-slide:not(.slick-center) {
  opacity: 1;
  transition: 0.2s linear;
}
.contents-col-full {
    width: 100%;
    padding: 0px;
    margin: 0px;
    text-align: center;
}
.contents-col-left-gradient {
    flex: 1 1 250px;
    padding: 0px;
    background-image: linear-gradient(90deg, rgba(233, 240, 250, 1), rgba(168, 202, 240, 1) 50%);
    opacity: 0.8;
    max-height: 100px;
    margin-right: 0.5px;
    width: 100% !important;
    flex-direction: column;
}
.contents-col-left-gradient > p {
    text-align: left;
    font-size: 1rem;
    font-weight: bold;
}
.contents-col-right-gradient {
    flex: 1 1 250px; /* 最小幅200pxで、残りのスペースを均等に分配 */
    padding: 0px;
    background-image: linear-gradient(90deg, rgba(168, 202, 240, 1) 50%, rgba(233, 240, 250, 1));
    background-color: rgba(255, 255, 255, 0.8);
    opacity: 0.8;
    max-height: 100px;
    margin-left: 0.5px;
    width: 100% !important;
    flex-direction: column;
}
.contents-col-right-gradient > p {
    text-align: left;
    font-size: 1rem;
    font-weight: bold;
}
.footer {
  margin-top: 20px;
  background: #eaf3ff;/*背景色*/
  width: 100%;
  text-align: center;
  color: black;
  padding: 0px;
}

}