#h1_area{	background-image: url(images/h1_bg_pc.jpg);}

/* 縦置きの場合 */
@media (orientation: portrait)
{
#h1_area{	background-image: url(images/h1_bg_sp.jpg);}
}



section .body
{
    display: flex;
    column-gap: 40px;
    align-items: flex-start;
}

section h2
{
	padding-left: 40px;
   	border-left: solid 10px var(--base-color01);
	position: sticky;
	top: 20px;
	bottom: auto;
}

section .photo_box
{
    position: relative;
    margin-left: auto;
    margin-right: calc((100vw - 1400px) / -2);
    width: calc(100vw * (1150 / 1920));
    flex-shrink: 0;
}

section .photo_box .main_photo
{
    position: relative;
	margin-bottom: 40px;
	overflow: hidden;
}

.main_photo button
{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(0,0,0,0.5);
	color: #fff;
	border: none;
	padding: 10px 15px;
	cursor: pointer;
	font-size: 20px;
	z-index: 100;;
}

.main_photo .prev
{
	left: 10px;
}

.main_photo .next
{
	right: 10px;
}

section .photo_box .sub_photo
{
	margin-bottom: 20px;
}

section .photo_box .sub_photo ul
{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	column-gap: 40px; /* 横のスペース */
	row-gap: 0px; /* 縦のスペース */
	align-items: stretch; /* 子要素をセルの高さに合わせて引き伸ばす */
	margin: 0px;
	padding: 0px;

}

section .photo_box .sub_photo ul li
{
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	cursor: pointer;
}

section .photo_box .sub_photo ul li img
{
	transition-duration: 0.6s;
	transform:scale(1,1);
}

section .photo_box .sub_photo ul li img:hover
{
	transform:scale(1.04,1.04);
	transition:1s all;
}

section .photo_box .sub_photo .select img
{
	border: solid 6px color-mix(in srgb, var(--point-color) 50%, transparent);
}


section .photo_box .text
{
	max-width: 890px;
}

section .table_box
{
	padding-top: 40px;
	padding-left: 200px;
}

section .table_box table
{
	width: 520px;
}

section .table_box table tr:first-child th
{
	padding-bottom: 10px;
	border-bottom: solid 2px var(--point-bg-color);
}

section:nth-of-type(2n) .table_box table tr:first-child th
{
	border-bottom: solid 2px #fff;
}

section .table_box table th:first-child
{
	width: 6em;
}

section .table_box table th
{
	font-weight: normal;
	line-height: 1.2;
	vertical-align: top;
	text-align: left;
	padding-top: 4px;
	padding-bottom: 4px;
	padding-left: 10px;
	padding-right: 10px;
}

section .table_box table td
{
	line-height: 1.2;
	text-align: left;
	padding-top: 4px;
	padding-bottom: 4px;
	padding-left: 10px;
	padding-right: 10px;
}

section .table_box table tr:nth-of-type(2) th,
section .table_box table tr:nth-of-type(2) td
{
	padding-top: 10px;
}

section .table_box table td:last-child
{
	text-align: right;
}


/* 画面が2画面分になったとき */
@media screen and (min-width:1920px)
{

}



/* PCのみ設定  768 以上*/
@media screen and (min-width:1200px)
{



}

/* デフォルトサイズ以下 */
@media screen and (max-width: 1399px) 
{

section .body
{
    column-gap: 30px;
	padding-right: 0px;
}

section .photo_box
{
    position: relative;
    margin-right: 0px;
    width: calc(100vw * (1150 / 1920));
}

section .photo_box .text
{
	padding-right: 20px;
}


section .table_box
{
	padding-left: 0px;
}

section .table_box table
{
	width: 80%;
	margin-left: auto;
}

}

/* タブレット以下 */
@media screen and (max-width: 1199px) 
{

section .photo_box .main_photo
{
	margin-bottom: 20px;
}

section .photo_box .sub_photo ul
{
	column-gap: 20px; /* 横のスペース */
}

}

/* 横置きの場合 */
@media (max-width: 1199px) and (orientation: landscape)
{
}

/* 縦置きの場合 */
@media (max-width: 1199px) and (orientation: portrait)
{

section .table_box table
{
	width: 100%;
}

}



/* タブレットレイアウト : 768 px ～ 959 px */
@media screen and (min-width:768px) and (max-width:1199px)
{


}


/* スマホ設定  767 以下*/
@media screen and (max-width:767px)
{
section h2
{
	padding-left: 20px;
}

section .body
{
    column-gap: 20px;
}


section .photo_box .main_photo
{
	margin-bottom: 10px;
}

section .photo_box .sub_photo ul
{
	column-gap: 10px; /* 横のスペース */
}

section .table_box table
{
	width: 100%;
}

}


/* スマホ設定  599 以下*/
@media screen and (max-width:599px)
{


section .body
{
    display: block;
    column-gap: 0px;
    padding-left: 0px;
    padding-right: 0px;

}

section h2
{
	position: static;
	margin-left: 20px;
	margin-right: 20px;
}

section .photo_box
{
    position: static;
    margin-left: auto;
    margin-right: auto;
    width: auto;
    text-align: center;
    margin-bottom: 20px;
}

section .photo_box .text
{
    padding-left: 20px;
    padding-right: 20px;
}

section .table_box table
{
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

section .table_box table th:first-child
{
	width: 6em;
}

section .table_box table td:last-child
{
	width: 4em;
}

}