/*共通設定*/
/*paddingまでを要素に含む*/
* {
  box-sizing: border-box;
}
/*フォントサイズ*/
p {
  font-size: 16px;
}
h2{
  font-size: 40px;
  font-weight: normal;
}
/*フォント*/
body {
  font-family: "Noto Serif JP", serif;
}
/*画像が100%以上はみ出さないようにする*/
img {
  max-width:100%;
}
/* 縦書き指定 */
.header-text,.news,.products-value,.footer{
  writing-mode:vertical-rl;
}
.products-science,.footer-contact{
  writing-mode:vertical-lr;
}

/* 背景 */
body{
  background-color: #e6e2d7;
}
.footer{
  background-color: black;
}
/* 幅 */
.header,.footer,.map{
  width:100%;
  margin: 0 auto;
}
.news ,.products{
  width:1024px;
  max-width: 100%;
  margin: 0 auto;
}
/* ヘッダー */
.header-mainvisual-sp{
  display: none;
}
.header-container{
  width: 100%;
  height: 100vh;
  position: relative;
}
.header-container img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.header-mainvisual-pc img{
  width: 100%;
  height: 100vh;
  object-fit: cover;
}

.header-logo {
  width: 40px;
  height: 90px;
  position: absolute;
  top:50px;
  right: 100px;
}
.header-nav{
  position: absolute;
  top:50px;
  right: 200px;
}
.header-nav li{
  padding: 0 10px;
}
.header-nav a{
  text-decoration: none;
  color: white;
}
.header-button{
  background-color:rgba(255,255,255,0.2);
  padding: 20px;
  position: absolute;
  bottom:50px;
  left: 50px;
  outline : 1px solid #ffffff; /* 線の太さ・線状・色 */
  outline-offset : -7px;
  color: #ffffff !important;
}
/* お知らせ */
.news,.products,.map{
  margin-top: 100px;
}
.news-list{
 margin: 80px;
}
.news-list-items{
  padding: 15px;
  border-right:1px solid #000000 ;
}
.news-list-items-last{
  padding: 15px;
  border-right:1px solid #000000 ;
  border-left:1px solid #000000 ;
}

/* プロダクト */
.products-value,.products-science{
  width: 100%;
  height: 80%; /*%にするとタイトルが延びる*/
  position: relative;
}
.products img{
  width:639px;
  height: 426px;
}

.value-title-ja, .science-title-ja{
  margin-bottom: 10px;
}




/* プロダクト追加 */
.products {
  width: 1024px;
  max-width: 100%;
  margin: 0 auto;
}
.product {
  margin: 0 0 100px;
  display:flex;
}
.product-value{
flex-direction:row-reverse;
}

.product-title{
writing-mode: vertical-rl;
display: flex;
align-items: center; /* 垂直方向の中央揃え */
}
.product-title-ja{
  margin-bottom: 10px;
}
.product-content{
  position:relative;
}

.product-images{
margin-top:50px;
max-width:639px;
}
.product-text{
position:absolute;
bottom:-30px;
padding: 50px 100px;
}
.product-value .product-text{
  left:-30px;
  background-color: rgba(249, 233, 6, 0.6);
}
.product-science .product-text{
  background-color: rgba(149, 42, 38, 0.6);
  right:-30px;
}



/* フッター*/
.footer{
  padding-top:50px;
  padding-bottom: 50px;
  position: relative;
}
.footer-logo{
  width: 40px;
  height: 90px;
  margin-right: 50px;
  margin-left: 50px;
}
.footer-adress,.footer-contact{
  color: #ffffff;
}
.footer-nav li{
padding: 0 10px;
}
.footer-nav a{
  text-decoration: none;
  color: white;
}
.footer-contact{
  display: flex;
  position: absolute;
  top:50px;
  left:10px;
}
.footer-contact .online{
  padding-bottom: 10px;
  border-bottom: 1px solid ;
}
.footer-contact .contact{
  padding-top: 10px;
}
.footer-adress{
  margin-left: 50px;
}
.copyright{
  color: #ffffff;
  writing-mode:horizontal-tb;
  width: auto;
  position: absolute;
  bottom: 10px;
}
/* スマホ */
@media screen and (max-width: 768px) {
.header-mainvisual-pc{
  display: none;
}
.header-mainvisual-sp{
  display: block;
}
html{
  width: 768px;
}
.header-mainvisual-sp img{
  width: 100%;
  height: 100vh;
  object-fit: cover;
}
.news ,.products{
  width:768px;
}
.news-list-items:nth-child(n+3) {
  display: none;
}

}