@charset "utf-8";
/*勝手に追加したスタイルシートになります。主にimgの装飾とお弁当のスライダーだけです。
何かの都合で削除するのであれば、大幅に崩れることはありませんが、弁当のコメントアウトしてる部分を復活させていただきスライダー部分をコメントアウトしてください。2025/04/26 thp_mcl shigeo magoshi*/


h4 {
    background: linear-gradient(transparent 40%, #5290f5 90%);
    display: inline-block;
	padding:5px 10px 0 10px; 
	margin-bottom:10px;
}
h4:first-letter {
  font-size: 150%;
  color: #5290f5;
}

h5 {
    text-decoration:underline double #5290f5;
    font-weight:bold;
}

.maru	{
		border-radius: 10px;
		overflow: hidden;
		margin-bottom: 2px;
}

.maruL	{
		-webkit-border-top-left-radius: 10px; 
		-webkit-border-bottom-left-radius: 10px;
		-moz-border-radius-topleft: 10px;
		-moz-border-radius-bottomleft: 10px;
		overflow: hidden;
		margin-bottom: 2px;
}

.maruR	{
		-webkit-border-top-right-radius: 10px;
		-webkit-border-bottom-right-radius: 10px;
		-moz-border-radius-topright: 10px;
		-moz-border-radius-bottomright: 10px;
		overflow: hidden;
		margin-bottom: 2px;
}

.maruT	{
		-webkit-border-top-right-radius: 10px;
		-webkit-border-top-left-radius: 10px;
		-moz-border-radius-topright: 10px;
		-moz-border-radius-topleft: 10px;
		overflow: hidden;
		margin-bottom: 2px;
}

.maruB	{
		-webkit-border-bottom-left-radius: 10px;
		-webkit-border-bottom-right-radius: 10px;
		-moz-border-radius-bottomleft: 10px;
		-moz-border-radius-bottomright: 10px;
		overflow: hidden;
		margin-bottom: 2px;
}

.maruBL	{
		-webkit-border-bottom-left-radius: 10px;
		-moz-border-radius-bottomleft: 10px;
		overflow: hidden;
		margin-bottom: 2px;
}

.maruBR	{
		-webkit-border-bottom-right-radius: 10px;
		-moz-border-radius-bottomright: 10px;
		overflow: hidden;
		margin-bottom: 2px;
}

.cut {
		clip-path: polygon(10% 0, 100% 0, 100% 0, 100% 90%, 90% 100%, 0 100%, 0 100%, 0 10%);
}

.cutL {
		clip-path: polygon(10% 0, 100% 0, 100% 0, 100% 90%, 90% 100%, 0 100%, 0 100%, 0 10%);
}

.cutR {
		clip-path: polygon(10% 0, 100% 0, 100% 0, 100% 90%, 90% 100%, 0 100%, 0 100%, 0 10%);
}

.shadow {
		box-shadow: 10px 10px 0px rgb(0 239 0 / 100%); /* 影のオフセット、ぼかし、色、不透明度 */
}

.pic {
		max-width: 95%;
		padding: 8px;
		box-sizing: border-box;
		box-shadow: 0px 0px 8px #666;
		background: #fff;
}

@keyframes horizontal-animation {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}

.slider-container {
  display: flex;
  overflow: hidden;
}

.slider-wrapper {
  display: flex;
  animation: horizontal-animation 30s linear infinite;
}

.slide {
  width: 400px;
  margin-right: 20px;
}

.slide img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

@media (hover: hover) {
.slider-container:hover
	.slider-wrapper {
	animation-play-state: paused;
	}
}