﻿html {
		-webkit-text-size-adjust: 100%;
}
td {
		-webkit-text-size-adjust: 100%;
}
.p-panel {
      padding: 0px;
      height: 20px;
      margin: 10px;
      width: 90%;
      border : 1px; 
      background-color: orange;
    }
.p-panel2 {
      padding: 0px;
      height: 20px;
      margin: 10px;
      width: 90%;
      border : 1px solid maroon; 
      background-color: transparent;
    }

.embed-pdf {
  width: 500px; /* default is 300px. */
  height: 250px; /* default is 150px. */
  margin: 0 auto;
}
.field {
display: flex;
justify-content: space-around;
}


.flex-container {
  flex-wrap: wrap;
}

img{
	margin: 10px; /*余白*/
	float: left; /*左寄せ*/
	}

.clear2{
	clear:both; /*浮いてる要素への回り込みを解除*/
	}


.button-right {
	display: block;
	width: 80px;
	height: 36px;
	line-height: 36px;
	text-align: center;
	margin-left: auto;
	background: #338DC9;
	color: #fff;
	text-decoration: none;
	border-radius: 4px;
}

.menu-button1 {
	border: 1px solid #999;
  white-space: nowrap;
  width: 300px;
 	height:90px;
  font-size:42px;
  font-weight: bold;
  color: blue;
  display: inline-block;
  float: none;
  margin-left: 10x;
  margin-right: 10px;
}

.menu-button2 {
	border: 1px solid #999;
  white-space: nowrap;
  width: 300px;
 	height:90px;
  font-size:42px;
  font-weight: bold;
  color: darkred;
  display: inline-block;
  float: none;
  margin-left: 10px;
  margin-right: 10px;
}

.menu-button3 {
  font-size:40px;
  font-weight: bold;
  background: yellow;
	border: 1px solid #999;
	padding: 10px 20px;
  width: 330px;
 	height:90px;
  white-space: nowrap;
  color: blue;
  display: inline-block;
  float: none;
  margin-left: 0px;
  margin-right: 0px;
}

.box select {
    	border: 1px solid;
	width: 300px;
	height:60px;
	font-size: 40px;
}

.l-button {
  width: 80px;
  height: 50px;
  font-size: 40px;
  border: 2px solid gray;
  border-radius: 5px;
}

.l-button[data-pushed="true"] {
  background-color: blue;
  color: white;
}

.l-button[data-pushed="false"] {
  background-color: white;
  color: gray;
}

.f-button {
        display: block;
	width: 300px;
	height:60px;
	font-size: 40px;
	background: sandybrown;
}


/* ctg_view カタログセンター表示 */
.catalog-img_cell {
  justify-content: center;
  text-align: center; /* 横方向の中央揃え */
  vertical-align: middle; /* 縦方向の中央揃え */
  width: 100%;
  border: 1px solid #ccc;
}


.imgThumbColumn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    gap: 1%;
    margin-bottom: 1%;
}
.imgTitle {
    display: inline-block;
    width: auto;
    height: auto;
}
.imgBlock {
    display: inline-block;
    width: 100%;
    overflow: hidden;
}

/* サムネイルの画像 */
.imgBlock img {
  opacity: 0.8;
  cursor: pointer;
  transition: 0.2s ease-in-out;
}

.imgBlock img:hover {
    transform: scale(1.1);
    opacity: 1;
}

/* ギャラリーの表示場所 */
.container {
  position: relative;
  display: none;
  animation: fadeIn 0.7s ease 0s 1 normal;
}

/* altのテキスト */
#galleryImgtext {
    position: absolute;
    bottom: 15px;
    left: 15px;
    color: white;
    font-size: 0.9rem;
    line-height: 1;
}

/* 閉じるボタン */
.closebtn {
    position: absolute;
    top: 5px;
    right: 10px;
    color: crimson;
    font-size: 5rem;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 45px;
    height: 45px;
}
.closebtn:hover {
    opacity: 0.8;
}

/* FadeIn */
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
  }
}

@media screen and (max-width: 767px) {
  .imgBlock {
    width: 100%;
    margin-bottom: 2%;
  }
}

.iframe {
 max-width: 100%;
 height: auto;
}

/* 上寄せ用のセル */
.qr-cell-top {
  vertical-align: top;
}

/* 下寄せ用のセル */
.qr-cell-bottom {
  vertical-align: bottom;
}


/* display-c　に文字を重ねる-----------*/
.display-style {
  /*親div*/
  display: inline-block;
  position: relative;
  background-color: black;
  }

.display-style p {
  position: absolute;/*絶対配置*/
  color:white;/*文字は白に*/
  font-weight: bold; /*太字に*/
  font-size: 200px;/*サイズ2倍*/
  font-family :Quicksand, sans-serif;/*Google Font*/
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  padding:0;

  }


.display-style img {
  background-color: black;
  opacity: 0.7;
  }


/*確認バナー ---------------------- */
  .cookie-consent {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: -1200px;
    left: calc(50% - 1000px/2)+5;
    width: 100%;
    font-size: 30px;
    color: #fff;
    background: rgba(0,0,0,.7);
    padding: 1.2em;
    box-sizing: border-box;
    border: 1px solid #ddd;
    visibility: visible;
    transition: .5s;
  }
  .cookie-consent.is-show {
    top: 100px;
  }
.cookie-consent a {
    color: #fff !important;
  }
  .cookie-text {
    width: 90%;
  }
  .cookie-agree {
    color: #fff;
    background: dodgerblue;
    padding: .5em 1.5em;
  }
  .cookie-agree:hover {
    cursor: pointer;
  }
  /* パッと消える */
  .cc-hide1 {
    display: none;
  }
  /* ゆっくり消える */
  .cc-hide2 {
    animation: hide 1s linear 0s;
    animation-fill-mode: forwards;
  }
  @keyframes hide {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
      visibility: hidden;
    }
  }

  /* メディアクエリ */
  @media screen and (max-width: 650px) {
    .cookie-consent {
      flex-direction: column;
      width: 300px;
      left: calc(50% - 300px/2)
    }
    .cookie-text {
      width: 100%;
      margin-bottom: 1em;
    }
  }
