@charset "utf-8";
/* CSS Document */
@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);
#main{
	position: relative;
	display: block;
	margin: 0;
	padding: 0;
}
@media screen and (min-width:481px){
#main img{
	display: block;
	width: 100%;
	max-width: 100vw;
	height: auto;
	max-height: 60vh;
	object-fit: cover;
}
#main div{
	position: absolute;
	display: inline-block;
	left:50%;
	transform:translate(-50%,-50%);
	top: 50%;
	color: rgba(0,56,148,1.00);
	font-weight: bold;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 1.4vw;
	padding: 1% 2%;
	background: rgba(255,255,255,0.50);
	border-radius: 10px;
}
#main div h1,h2{
	margin-bottom: 2%;
	}
#product_title{
	position: relative;
	display: block;
	margin-top: 5%;
	text-align: center;
	color: rgba(0,56,148,1.00);
	font-weight: bold;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 1.2vw;
}
#product_img{
	display: flex;
	justify-content: space-between;
	align-items: center;
	text-align: center;
	object-fit: cover;
	max-width: 100vw;
	height: auto;
	padding: 10%;
	margin: auto;
  flex-wrap: wrap;          /* 折り返しを許可 */
  justify-content: flex-start; /* 左寄せで追加 */
  gap: 20px;                /* 画像の間隔 */
}
#product_img a{
	width: 100%;
	min-width: 16%;
	height: auto;
	padding: 2% 0% 5% 0%;
    margin: 25px;
    color: #6091d3;
    border: solid 3px #6091d3;
    border-radius: 10px;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 1vw;
	text-decoration: none;
	width: 30%;
	flex: 1 1 calc(20% - 20px); /* 幅20%（=5列）から余白を引いた値 */
  max-width: calc(20% - 20px);
  box-sizing: border-box;   /* パディングやボーダーを含める */
}

#product_img a:hover{
	opacity: 0.7;
}
#product_img a figure img{
	width: 100%;
	max-width: 100%;
	height: auto;
	margin-bottom: 5%;
	object-fit: scale-down;
}
#product_img a figure figcaption{
	width: 100%;
	max-width: 100vw;
	height: 5vh;
	text-align: center;
	color: rgba(0,56,148,1.00);
	font-weight: bold;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 1.2vw;
}
#info_title{
	position: relative;
	display: block;
	margin-top: 0%;
	text-align: center;
	color: rgba(0,56,148,1.00);
	font-weight: bold;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 1.4vw;
}
.info {
	-webkit-overflow-scrolling: touch;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	display: -webkit-box;
	display: flex;
	flex-direction: column;
	background: rgba(229,229,229,1.00);
	width: 90%;
	flex-wrap: nowrap;
	height: auto;
	margin: 2% auto 5%;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 1.0vw;
	overflow-y: scroll;
}

.info dd,
.info dt {
	box-sizing: border-box;
	width: 100%;
	padding-bottom: .5em;
	padding-left: .5em
}

.info dt {
	font-style: normal;
	font-weight: initial;
	display: inline-flex;
}


.info dt:first-of-type {
	padding-top: .5em;
	border-top: 1px dotted rgba(52,58,64,1.00);
}

.info dt p {
	margin-right: .5em
}

.info dt span {
	box-sizing: border-box;
	display: inline-block;
	width: 15%;
	height: auto;
	margin-right: .5em;
	padding: 0 .5em;
	background-color: rgba(0,150,136,1.00);
	color: rgba(255,255,255,1.00);
	font-size: .8em;
	line-height: 1.75;
	text-align: center
}

.info p {
	color: rgba(79,79,79,1.00);
}

.info dd {
	margin-left: 0;
	margin-bottom: .5em;
	border-bottom: 1px dotted rgba(52,58,64,1.00);
}
	
.info dd a:hover {
	color: rgba(255,0,4,1.00);
}
.info dd a {
	color: rgba(0,0,0,1.00);
	font-size: 1.4em;
}


.info dd:nth-of-type(-n+3) {
	position: relative
}
}

@media screen and (max-width:480px){
#main img{
	width: 100%;
	max-width: 100vw;
	height: auto;
	max-height: 80vh;
	object-fit: cover;
}	
#main div{
	position: absolute;
	top: 50%;
	left: 2%;
	right: 2%;
	transform:translate(0%,-50%);
	color: rgba(0,56,148,1.00);
	background: rgba(255,255,255,0.50);
	font-weight: bold;
	font-family: 'Noto Sans JP', sans-serif;
	padding: 2%;
	border-radius: 10px;
	font-size: 2.1vw;
}
#main div h1,h2{
	margin-bottom: 2%;	
	}
#product_title{
	display: block;
	margin-top: 5%;
	text-align: center;
	color: rgba(0,56,148,1.00);
	font-weight: bold;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 2.5vw;
}
#product_img{
	display: block;
	text-align: center;
	object-fit: cover;
	padding: 5%;
}
#product_img a{
	display: block;
	width: 90%;
	height: auto;
	padding: 5% 0%;
    margin: 0.5% auto;
    color: #6091d3;
    border: solid 0.8vmin #6091d3;
    border-radius: 5%;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 2.5vw;
	text-decoration: none;
}

#product_img a:hover{
	opacity: 0.7;
}
#product_img a figure img{
	width: 100%;
	max-width: 50%;
	height: auto;
	max-height: 30vh;
	margin-bottom: 5%;
	object-fit: scale-down;
}
#product_img a figure figcaption{
	width: 100%;
	max-width: 100vw;
	height: auto;
	text-align: center;
	color: rgba(0,56,148,1.00);
	font-weight: bold;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 2.5vw;

}
#info_title{
	position: relative;
	display: block;
	margin: 5%;
	text-align: center;
	color: rgba(0,56,148,1.00);
	font-weight: bold;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 2.5vw;
}
.info {
	-webkit-overflow-scrolling: touch;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	display: -webkit-box;
	display: flex;
	flex-direction: column;
	background: rgba(229,229,229,1.00);
	width: 90%;
	flex-wrap: nowrap;
	height: auto;
	margin: 2% auto 5%;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: .8em;
	overflow-y: scroll;
}
	.info {
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		flex-direction: row;
		flex-wrap: wrap
	}
.info dd,
.info dt {
		width: 100%;
	padding-bottom: .5em;
	padding-left: .5em
}

.info dt {
	font-style: normal;
	font-weight: initial
}

	.info dt {
		width: 100%;
		display: flex;
	}

.info dt:first-of-type {
	padding-top: .5em;
	border-top: 1px dotted rgba(52,58,64,1.00);
}

.info dt p {
	margin-right: .5em
}

.info dt span {
	box-sizing: border-box;
	display: inline-block;
	width: 20%;
	height: auto ;
	margin-right: .5em;
	padding: 0 .5em;
	background-color: rgba(0,150,136,1.00);
	color: rgba(255,255,255,1.00);
	font-size: .8em;
	line-height: 1.75;
	text-align: center
}

.info time {
	color: rgba(79,79,79,1.00);
}

.info dd {
	margin-left: 0;
	margin-bottom: .5em;
	border-bottom: 1px dotted rgba(52,58,64,1.00);
}
	
.info dd a:hover {
	color: rgba(255,0,4,1.00);
}
.info dd a {
	color: rgba(0,0,0,1.00);
	font-size: 2.5vw;
}


	.info dd {
		width: 100%;
	}
	.info dd:first-of-type {
		padding-top: .5em;
	}
.info dd:nth-of-type(-n+3) {
	position: relative
}
}