@media all{

main area.page_up:hover {
    cursor: zoom-in;
}

body{
	top:0;
	left:0;
	right:0;
	margin:auto;
	z-index:2;
	font:15px/1.8 YuGothic,"游ゴシック",helvetica,arial,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN",メイリオ,Meiryo,sans-serif;
	-webkit-font-smoothing:antialiased;
	background:#eee;
}

header{
	display:block;
	background:rgba(10 30 50 / 1);
	position:absolute;
	top:0;
	width:100%;
	border-bottom:1px solid #FFF;
	height:3em;
}

header img{
	position:absolute;
	width:150px;
	height:26px;
	top:.8em;
	left:1em;
}

header p,
header h1{
	position:absolute;
	top:0;
	right:0;
	font-size:0.8em;
	color:#fff;
	float:right;
	text-align:right;
	margin:.75em 1em 0 0;
	line-height:1.3em;
}

main{
	display:block;
	overflow:hidden;
	margin:3em auto 0;
}

main img{
	vertical-align: top;
	box-shadow: 0 1px 2px;	
}

main > div{
	vertical-align: middle;
}

main img + p + p{
	position:relative;
	top:-2.9em;
	text-align:center;
	z-index:2;
	margin-bottom:-2.9em;
	padding:0;
	color:#f00;
}

a:link,a:visited{
	color:#fff;
	text-decoration:none;
}

a:hover{
	text-decoration:underline;
}

footer{
	overflow:hidden;
	background:rgba(10 30 50 / 1);
	width:100%;
	color:#fff;
	position:fixed;
	display:block;
	bottom:0;
	text-align:center;
	height:3.6em;
	font-size:0.8em;
	line-height:1.2;

}

footer p{
	margin:1em 1em 0;
}

footer > p > span{
	display:none;
}

p.attention{
	display:block;
	text-align:center;
	font-size:60%;
	margin:auto;
	bottom: 0;
	z-index:1;
}

footer div{
	position:absolute;
	bottom:3px;
	text-align:center;
	width:100%;
}

#modal-content{
	width: 550px;
	height:-webkit-fill-available !important;
	height:100%;
	font-size:1em;
	margin:0;
	padding:0;
	background:rgba(255 255 255 / .9);
	position:absolute;
	top:0 !important;
	left:0 !important;
	display:none;
	z-index:2;
	box-shadow:1px 1px 10px #000;
	overflow:auto;
}

#modal-content2{
	max-width: 450px;
	width: 100%;
	height:-webkit-fill-available !important;
	font-size:1em;
	margin:0;
	padding:0;
	background:rgba(255 255 255 / .9);
	position:absolute;
	top:0 !important;
	left:0 !important;
	display:none;
	z-index:2;
	box-shadow:1px 1px 10px #000;
}

#modal-content3{
	width: 400px;
	height:-webkit-fill-available !important;
	height:100%;
	font-size:1em;
	margin:0;
	padding:0;
	background:rgba(255 255 255 / .9);
	position:absolute;
	top:0 !important;
	left:0 !important;
	display:none;
	z-index:2;
	box-shadow:1px 1px 10px #000;
	overflow:auto;
}

#modal-content section{
	padding:2em;
	overflow:hidden;
	height: inherit;
	overflow-y: scroll;
}

#modal-content2 section{
	padding: 4em 0 4em 2em;
	overflow:hidden;
	height: inherit;
}

#modal-content3 section{
	padding:2em;
	overflow:hidden;
	height: inherit;
	overflow-y: scroll;
}

#modal-content div,
#modal-content2 div,
#modal-content3 div{
	width: 100%;
	margin-bottom:1em;
	float:left;
}

#modal-content div:last-child,
#modal-content2 div:last-child,
#modal-content3 div:last-child{
	width:100% !important;
	margin-bottom:0;
}

#modal-content div:last-child a{
	float:right;
	text-align:center;
	padding-top:.5em;
	border-radius:3px;
	text-decoration:none;
}

#modal-content2 div:last-child a{
	float:right;
	text-align:center;
	border-radius:3px;
	text-decoration:none;
}

#modal-content3 div:last-child a{
	float:right;
	text-align:center;
	padding-top:.5em;
	border-radius:3px;
	text-decoration:none;
}

#modal-content div ul,
#modal-content2 div ul,
#modal-content3 div ul{
	padding-left:0;
	margin-top:0;
}

#modal-content div li,
#modal-content2 div li,
#modal-content3 div li{
	list-style:none;
	padding-bottom:0.5em;
}
  
#modal-overlay,
#modal-overlay2,
#modal-overlay3{
	z-index:1;
	display:none;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:120%;
	background:rgba(0 0 0 / 0);
}

h3{
	margin:1em 0;
}

#modal-content a,
#modal-content3 a{
	display:block;
	width: fit-content;
	margin-bottom:.5em;
}

#modal-content a:link,
#modal-content a:visited,
#modal-content2 a:link,
#modal-content2 a:visited,
#modal-content3 a:link,
#modal-content3 a:visited{
	color:#000;
}

#modal-content p.red{
	display: block;
	background: #fee;
	padding: .5em;
	font-size: .9em;
	color: #f00;
}

.btn{
	background:#555;
	display: inline-block;
	vertical-align: middle;
	width:40px;
	height:40px;
	border-radius:0;
	border:1px solid #fff;
}

.bt_left{
	float:left;
	position:relative;
	left:0;
}

.bt_right{
	float:right;
	position:relative;
	right:0;
}

.btn_area{
	width:100%;
	display:block;
	position:fixed;
	bottom:0;
	z-index:1;
}

.before_top{
	background:url(/webcatalog/images/top_btn.png),rgba(10 30 50 / 1);
	background-size:30px 30px;
	background-repeat: no-repeat;
	background-position:50% 50%;
}

.next_end{
	background:url(/webcatalog/images/end_btn.png),rgba(10 30 50 / 1);
	background-size: 30px 30px;
	background-repeat: no-repeat;
	background-position:50% 50%;
}

.before_top:hover{
	background:url(/webcatalog/images/top_btn.png),rgba(40 60 80 / 1);
	background-size:30px 30px;
	background-repeat: no-repeat;
	background-position:50% 50%;
}

.next_end:hover{
	background:url(/webcatalog/images/end_btn.png),rgba(40 60 80 / 1);
	background-size: 30px 30px;
	background-repeat: no-repeat;
	background-position:50% 50%;
}

.before{
	background:url(/webcatalog/images/before.png),rgba(10 30 50 / 1);
	background-size:30px 30px;
	background-repeat: no-repeat;
	background-position:50% 50%;
}

.next{
	background:url(/webcatalog/images/next.png),rgba(10 30 50 / 1);
	background-size: 30px 30px;
	background-repeat: no-repeat;
	background-position:50% 50%;
}

.before:hover{
	background:url(/webcatalog/images/before.png),rgba(40 60 80 / 1);
	background-size:30px 30px;
	background-repeat: no-repeat;
	background-position:50% 50%;
}

.next:hover{
	background:url(/webcatalog/images/next.png),rgba(40 60 80 / 1);
	background-size: 30px 30px;
	background-repeat: no-repeat;
	background-position:50% 50%;
}

.scope{
	background:url(/webcatalog/images/scope.png),rgba(10 30 50 / 1);
	background-size: 30px 30px;
	background-repeat: no-repeat;
	background-position:50% 50%;
}

.scope_left{
	background:url(/webcatalog/images/scope_left.png),rgba(10 30 50 / 1);
	background-size: 30px 30px;
	background-repeat: no-repeat;
	background-position:50% 50%;
}

.scope_right{
	background:url(/webcatalog/images/scope_right.png),rgba(10 30 50 / 1);
	background-size: 30px 30px;
	background-repeat: no-repeat;
	background-position:50% 50%;
}

.scope:hover{
	background:url(/webcatalog/images/scope.png),rgba(40 60 80 / 1);
	background-size: 30px 30px;
	background-repeat: no-repeat;
	background-position:50% 50%;
}

.scope_left:hover{
	background:url(/webcatalog/images/scope_left.png),rgba(40 60 80 / 1);
	background-size: 30px 30px;
	background-repeat: no-repeat;
	background-position:50% 50%;
}

.scope_right:hover{
	background:url(/webcatalog/images/scope_right.png),rgba(40 60 80 / 1);
	background-size: 30px 30px;
	background-repeat: no-repeat;
	background-position:50% 50%;
}

.page{
	background:url(/webcatalog/images/page.png),rgba(10 30 50 / 1);
	background-size: 30px 30px;
	background-repeat: no-repeat;
	background-position:50% 50%;
}


.page:hover{
	background:url(/webcatalog/images/page.png),rgba(40 60 80 / 1);
	background-size: 30px 30px;
	background-repeat: no-repeat;
	background-position:50% 50%;
	cursor:pointer;
}

#modal-close::after,
#modal-close2::after,
#modal-close3::after{
	content:'×';
}

#modal-close{
	top:0;
	right:1em;
	position:absolute;
	color:#555;
	float:right;
	font-size:3em;
	font-weight:bold;
	text-decoration:none;
	cursor:pointer;
}

#modal-close2{
	top:0;
	right:.5em;
	position:absolute;
	color:#555;
	float:right;
	font-size:3em;
	font-weight:bold;
	text-decoration:none;
	cursor:pointer;
}

#modal-close3{
	top:0;
	right:1em;
	position:absolute;
	color:#555;
	float:right;
	font-size:3em;
	font-weight:bold;
	text-decoration:none;
	cursor:pointer;
}

#modal-close:hover,
#modal-close2:hover,
#modal-close3:hover{
	color:#000;
}

#modal-content3 section ul{
	padding:0;
}

#modal-content3 section ul li{
	list-style:none;
}

#modal-content section ul li::before,
#modal-content3 section ul li::before{
	content:"・";
}

.topmenu{
	position: absolute;
	display: inline-block;
	background: rgb(10 30 50 / 1);
	padding:0 1em;
	border-radius: 2px;
	border: 1px solid rgb(255 255 255 / 1) ;
	text-decoration: none;
	box-shadow: 1px 1px 5px #000;
	top: .5em;
	color: #fff;
	cursor:pointer;
}

.topmenu:hover{
	text-decoration: none;
	background: rgb(40 60 80 / 1);
}

.topmenu.menu{	
	right: 50em;
}

.topmenu.menu:hover{
}

.topmenu.thumb{
	right: 39em;
}

.topmenu.thumb:hover{
}


.topmenu.number{
	right: 30em;
}

.topmenu.number:hover{	
}


.topmenu.print{
	right: 22em;
}

.topmenu.print:hover{	
}

.topmenu.price{
	right: 10em;
}

.topmenu.price:hover{
}

.topmenu.pro{
	right:1em;
}

.topmenu.price:hover{
}

.bt{
	display:none;
	position: absolute;
	bottom:0;
	width: 100%;
	z-index: 1;
}
.bt .left{bottom:.5em;left:9em;}
.bt .right{bottom:.5em;right:9em;}

.bottommenu{
	position: absolute;
	display: inline-block;
	background: rgb(10 30 50 / 1);
	padding:0 1em;
	border-radius: 2px;
	border: 1px solid rgb(255 255 255 / 1) ;
	text-decoration: none;
	box-shadow: 1px 1px 5px #000;
	bottom: .5em;
	color: #fff;
	cursor:pointer;
}

.bottommenu:hover{
	background: rgb(40 60 80 / 1);
	text-decoration: none;	
}

a.btn.scope.bt_left[title="ページ拡大"] {
	margin: 0;
	position:fixed;
}

a.bottommenu.right[title="見開き表示"] {
	right: 1em;
}


}

@media screen and (min-width:1320px){

body{
	font-size:15px;
}

}

@media screen and (min-width:961px) and (max-width:1100px){

.topmenu.menu{	
	right: 42em;
}

.topmenu.thumb{
	right: 31em;
}


.topmenu.number{
	right: 22em;
}


.topmenu.print{
	right: 22em;
	display:none;
}

.topmenu.price{
	right: 10em;
}

.topmenu.pro{
	right:1em;
}

}

@media screen and (min-width:961px){

#modal-content,
#modal-content2,
#modal-content3{
	font-size:1em;
}

}

@media screen and (max-width:960px){

#modal-content{
	width:400px;
}

#modal-content div,
#modal-content2 div,
#modal-content3 div{
	width:100%;
}

#modal-content div li,
#modal-content2 div li,
#modal-content3 div li{
	padding-bottom:0.1em;
}

.btn_area{
	left:0;
}

.topmenu{
	padding:0;
	width:2em;
	height:2em;
	border: 1px solid rgb(255 255 255 / 1) ;
}

.topmenu.menu{
	background:url(/webcatalog/images/menu.png),rgba(10 30 50 / 1);
	right: 13em;
}

.topmenu.menu:hover{
	background:url(/webcatalog/images/menu.png),rgba(60 80 100 / 1);	
}

.topmenu.thumb{
	background:url(/webcatalog/images/thumb.png),rgba(10 30 50 / 1);
	right: 10em;
}

.topmenu.thumb:hover{
	background:url(/webcatalog/images/thumb.png),rgba(60 80 100 / 1);	
}

.topmenu.number{
	background:url(/webcatalog/images/number.png),rgba(10 30 50 / 1);
	right: 7em;
}

.topmenu.number:hover{
	background:url(/webcatalog/images/number.png),rgba(60 80 100 / 1);	
}

.topmenu.print{
	background:url(/webcatalog/images/print.png),rgba(10 30 50 / 1);
	right: 4em;
}

.topmenu.print:hover{
	background:url(/webcatalog/images/print.png),rgba(60 80 100 / 1);	
}

.topmenu.price{
	background:url(/webcatalog/images/price.png),rgba(10 30 50 / 1);
	right: 1em;
}

.topmenu.price:hover{
	background:url(/webcatalog/images/price.png),rgba(60 80 100 / 1);	
}

.topmenu.pro{
	background:url(/webcatalog/images/pro.png),rgba(10 30 50 / 1);
	right: 1em;
}

.topmenu.pro:hover{
	background:url(/webcatalog/images/pro.png),rgba(60 80 100 / 1);	
}

.topmenu span{
	display:none;
}

}

@media screen and (max-width:767px){

main{
	width:100%;
}

}

@media screen and (max-width:640px){
	
.topmenu{
	padding:0;
	width:2em;
	height:2em;
	border: 1px solid rgb(255 255 255 / 1) ;
}

.topmenu.menu{
	right: 10em;
}

.topmenu.thumb{
	right: 7em;
}

.topmenu.number{
	right: 4em;
}

.topmenu.print{
	display:none;
}

.topmenu.price{
	right: 1em;
}

.topmenu span{
	display:none;
}

.bottommenu span{
	display:none;
}

}

@media screen and (orientation:portrait) {
	
main {
    padding-top: 20vh;	
}

main div img {
	float:left;
	width: 50%;
	display: block;
	z-index: 3;
	height: auto;
}

.btn_area{
	left:0;
}


.bt .left{bottom:.5em;left:1em;}
.bt .right{bottom:.5em;right:1em;}

}

@media screen and (orientation:landscape) {

main img:nth-child(1){
	float:left;
}

main img.right{
	float:right !important;
}

main img:nth-of-type(1){
	height:auto;
	width:50%;
	margin:0;
	clear:both;
	z-index:3;
}

main img:nth-of-type(2){
	height:auto;
	width:50%;
	margin:0;
	clear:both;
	z-index:3;
}

}


@media screen and (orientation:landscape) and (min-aspect-ratio: 16/13) {

main img:nth-of-type(1){
	width:49%;
	margin:0 0 0 1%;
}

main img:nth-of-type(2){
	width:49%;
	margin:0 1% 0 0;
}

}

@media screen and (orientation:landscape) and (min-aspect-ratio: 16/12.5) {

main img:nth-of-type(1){
	width:48%;
	margin:0 0 0 2%;
}

main img:nth-of-type(2){
	width:48%;
	margin:0 2% 0 0;
}

}

@media screen and (orientation:landscape) and (min-aspect-ratio: 16/12) {

main img:nth-of-type(1){
	width:46%;
	margin:0 0 0 4%;
}

main img:nth-of-type(2){
	width:46%;
	margin:0 4% 0 0;
}

}

@media screen and (orientation:landscape) and (min-aspect-ratio: 16/11.5) {

main img:nth-of-type(1){
	width:44%;
	margin:0 0 0 6%;
}

main img:nth-of-type(2){
	width:44%;
	margin:0 6% 0 0;
}

}

@media screen and (orientation:landscape) and (min-aspect-ratio: 16/11) {

main img:nth-of-type(1){
	width:42%;
	margin:0 0 0 8%;
}

main img:nth-of-type(2){
	width:42%;
	margin:0 8% 0 0;
}

}

@media screen and (orientation:landscape) and (min-aspect-ratio: 16/10.5) {

main img:nth-of-type(1){
	width:40%;
	margin:0 0 0 10%;
}

main img:nth-of-type(2){
	width:40%;
	margin:0 10% 0 0;
}

}

@media screen and (orientation:landscape) and (min-aspect-ratio: 16/10) {

main img:nth-of-type(1){
	width:39%;
	margin:0 0 0 11%;
}

main img:nth-of-type(2){
	width:39%;
	margin:0 11% 0 0;
}

}

@media screen and (orientation:landscape) and (min-aspect-ratio: 16/9.6) {

main img:nth-of-type(1){
	width:38%;
	margin:0 0 0 12%;
}

main img:nth-of-type(2){
	width:38%;
	margin:0 12% 0 0;
}

}

@media screen and (orientation:landscape) and (min-aspect-ratio: 16/9.5) {

main img:nth-of-type(1){
	width:37%;
	margin:0 0 0 13%;
}

main img:nth-of-type(2){
	width:37%;
	margin:0 13% 0 0;
}

}

@media screen and (orientation:landscape) and (min-aspect-ratio: 16/9.4) {

main img:nth-of-type(1){
	width:37%;
	margin:0 0 0 13%;
}

main img:nth-of-type(2){
	width:37%;
	margin:0 13% 0 0;
}

}

@media screen and (orientation:landscape) and (min-aspect-ratio: 16/9.3) {

main img:nth-of-type(1){
	width:37%;
	margin:0 0 0 13%;
}

main img:nth-of-type(2){
	width:37%;
	margin:0 13% 0 0;
}

}

@media screen and (orientation:landscape) and (min-aspect-ratio: 16/9.2) {

main img:nth-of-type(1){
	width:36%;
	margin:0 0 0 14%;
}

main img:nth-of-type(2){
	width:36%;
	margin:0 14% 0 0;
}

}

@media screen and (orientation:landscape) and (min-aspect-ratio: 16/9.1) {

main img:nth-of-type(1){
	width:36%;
	margin:0 0 0 14%;
}

main img:nth-of-type(2){
	width:36%;
	margin:0 14% 0 0;
}

}

@media screen and (orientation:landscape) and (min-aspect-ratio: 16/9) {

main img:nth-of-type(1){
	width:35%;
	margin:0 0 0 15%;
}

main img:nth-of-type(2){
	width:35%;
	margin:0 15% 0 0;
}

}

@media screen and (orientation:landscape) and (min-aspect-ratio: 16/8.9) {

main img:nth-of-type(1){
	width:35%;
	margin:0 0 0 15%;
}

main img:nth-of-type(2){
	width:35%;
	margin:0 15% 0 0;
}

}

@media screen and (orientation:landscape) and (min-aspect-ratio: 16/8.8) {

main img:nth-of-type(1){
	width:34%;
	margin:0 0 0 16%;
}

main img:nth-of-type(2){
	width:34%;
	margin:0 16% 0 0;
}

}

@media screen and (orientation:landscape) and (min-aspect-ratio: 16/8.7) {

main img:nth-of-type(1){
	width:34%;
	margin:0 0 0 16%;
}

main img:nth-of-type(2){
	width:34%;
	margin:0 16% 0 0;
}

}

@media screen and (orientation:landscape) and (min-aspect-ratio: 16/8.6) {

main img:nth-of-type(1){
	width:33%;
	margin:0 0 0 17%;
}

main img:nth-of-type(2){
	width:33%;
	margin:0 17% 0 0;
}

}

@media screen and (orientation:landscape) and (min-aspect-ratio: 16/8.5) {

main img:nth-of-type(1){
	width:33%;
	margin:0 0 0 17%;
}

main img:nth-of-type(2){
	width:33%;
	margin:0 17% 0 0;
}

}

@media screen and (orientation:landscape) and (min-aspect-ratio: 16/8.4) {

main img:nth-of-type(1){
	width:32%;
	margin:0 0 0 18%;
}

main img:nth-of-type(2){
	width:32%;
	margin:0 18% 0 0;
}

}

@media screen and (orientation:landscape) and (min-aspect-ratio: 16/8.3) {

main img:nth-of-type(1){
	width:32%;
	margin:0 0 0 18%;
}

main img:nth-of-type(2){
	width:32%;
	margin:0 18% 0 0;
}

}

@media screen and (orientation:landscape) and (min-aspect-ratio: 16/8.2) {

main img:nth-of-type(1){
	width:31%;
	margin:0 0 0 19%;
}

main img:nth-of-type(2){
	width:31%;
	margin:0 19% 0 0;
}

}

@media screen and (orientation:landscape) and (min-aspect-ratio: 16/8.1) {

main img:nth-of-type(1){
	width:31%;
	margin:0 0 0 19%;
}

main img:nth-of-type(2){
	width:31%;
	margin:0 19% 0 0;
}

}


@media screen and (orientation:landscape) and (min-aspect-ratio: 16/8) {

main img:nth-of-type(1){
	width:30%;
	margin:0 0 0 20%;
}

main img:nth-of-type(2){
	width:30%;
	margin:0 20% 0 0;
}

}


@media screen and (orientation:landscape) and (min-aspect-ratio: 16/7.9) {

main img:nth-of-type(1){
	width:29%;
	margin:0 0 0 21%;
}

main img:nth-of-type(2){
	width:29%;
	margin:0 21% 0 0;
}

}


@media screen and (orientation:landscape) and (min-aspect-ratio: 16/7.8) {

main img:nth-of-type(1){
	width:29%;
	margin:0 0 0 21%;
}

main img:nth-of-type(2){
	width:29%;
	margin:0 21% 0 0;
}

}


@media screen and (orientation:landscape) and (min-aspect-ratio: 16/7.7) {

main img:nth-of-type(1){
	width:28%;
	margin:0 0 0 22%;
}

main img:nth-of-type(2){
	width:28%;
	margin:0 22% 0 0;
}

}


@media screen and (orientation:landscape) and (min-aspect-ratio: 16/7.6) {

main img:nth-of-type(1){
	width:27%;
	margin:0 0 0 23%;
}

main img:nth-of-type(2){
	width:27%;
	margin:0 23% 0 0;
}

}


@media screen and (orientation:landscape) and (min-aspect-ratio: 16/7.5) {

main img:nth-of-type(1){
	width:27%;
	margin:0 0 0 23%;
}

main img:nth-of-type(2){
	width:27%;
	margin:0 23% 0 0;
}

}


@media screen and (orientation:landscape) and (min-aspect-ratio: 16/7.4) {

main img:nth-of-type(1){
	width:27%;
	margin:0 0 0 23%;
}

main img:nth-of-type(2){
	width:27%;
	margin:0 23% 0 0;
}

}


@media screen and (orientation:landscape) and (min-aspect-ratio: 16/7.3) {

main img:nth-of-type(1){
	width:27%;
	margin:0 0 0 23%;
}

main img:nth-of-type(2){
	width:27%;
	margin:0 23% 0 0;
}

}


@media screen and (orientation:landscape) and (min-aspect-ratio: 16/7.2) {

main img:nth-of-type(1){
	width:26%;
	margin:0 0 0 24%;
}

main img:nth-of-type(2){
	width:26%;
	margin:0 24% 0 0;
}

}


@media screen and (orientation:landscape) and (min-aspect-ratio: 16/7.1) {

main img:nth-of-type(1){
	width:25%;
	margin:0 0 0 25%;
}

main img:nth-of-type(2){
	width:25%;
	margin:0 25% 0 0;
}

}


@media screen and (orientation:landscape) and (min-aspect-ratio: 16/7) {

main img:nth-of-type(1){
	width:25%;
	margin:0 0 0 25%;
}

main img:nth-of-type(2){
	width:25%;
	margin:0 25% 0 0;
}

}


@media screen and (orientation:landscape) and (min-aspect-ratio: 16/6.9) {

main img:nth-of-type(1){
	width:25%;
	margin:0 0 0 25%;
}

main img:nth-of-type(2){
	width:25%;
	margin:0 25% 0 0;
}

}


@media screen and (orientation:landscape) and (min-aspect-ratio: 16/6.8) {

main img:nth-of-type(1){
	width:24%;
	margin:0 0 0 26%;
}

main img:nth-of-type(2){
	width:24%;
	margin:0 26% 0 0;
}

}


@media screen and (orientation:landscape) and (min-aspect-ratio: 16/6.7) {

main img:nth-of-type(1){
	width:24%;
	margin:0 0 0 26%;
}

main img:nth-of-type(2){
	width:24%;
	margin:0 26% 0 0;
}

}


@media screen and (orientation:landscape) and (min-aspect-ratio: 16/6.6) {

main img:nth-of-type(1){
	width:23%;
	margin:0 0 0 27%;
}

main img:nth-of-type(2){
	width:23%;
	margin:0 27% 0 0;
}

}


@media screen and (orientation:landscape) and (min-aspect-ratio: 16/6.5) {

main img:nth-of-type(1){
	width:23%;
	margin:0 0 0 27%;
}

main img:nth-of-type(2){
	width:23%;
	margin:0 27% 0 0;
}

}


@media screen and (orientation:landscape) and (min-aspect-ratio: 16/6.4) {

main img:nth-of-type(1){
	width:23%;
	margin:0 0 0 27%;
}

main img:nth-of-type(2){
	width:23%;
	margin:0 27% 0 0;
}

}


@media screen and (orientation:landscape) and (min-aspect-ratio: 16/6.3) {

main img:nth-of-type(1){
	width:22%;
	margin:0 0 0 28%;
}

main img:nth-of-type(2){
	width:22%;
	margin:0 28% 0 0;
}

}


@media screen and (orientation:landscape) and (min-aspect-ratio: 16/6.2) {

main img:nth-of-type(1){
	width:21%;
	margin:0 0 0 29%;
}

main img:nth-of-type(2){
	width:21%;
	margin:0 29% 0 0;
}

}


@media screen and (orientation:landscape) and (min-aspect-ratio: 16/6.1) {

main img:nth-of-type(1){
	width:21%;
	margin:0 0 0 29%;
}

main img:nth-of-type(2){
	width:21%;
	margin:0 29% 0 0;
}

}


@media screen and (orientation:landscape) and (min-aspect-ratio: 16/6) {

main img:nth-of-type(1){
	width:21%;
	margin:0 0 0 29%;
}

main img:nth-of-type(2){
	width:21%;
	margin:0 29% 0 0;
}

}


@media screen and (orientation:landscape) and (min-aspect-ratio: 16/5.9) {

main img:nth-of-type(1){
	width:20%;
	margin:0 0 0 30%;
}

main img:nth-of-type(2){
	width:20%;
	margin:0 30% 0 0;
}

}


@media screen and (orientation:landscape) and (min-aspect-ratio: 16/5.8) {

main img:nth-of-type(1){
	width:20%;
	margin:0 0 0 30%;
}

main img:nth-of-type(2){
	width:20%;
	margin:0 30% 0 0;
}

}


@media screen and (orientation:landscape) and (min-aspect-ratio: 16/5.7) {

main img:nth-of-type(1){
	width:20%;
	margin:0 0 0 30%;
}

main img:nth-of-type(2){
	width:20%;
	margin:0 30% 0 0;
}

}


@media screen and (orientation:landscape) and (min-aspect-ratio: 16/5.6) {

main img:nth-of-type(1){
	width:20%;
	margin:0 0 0 30%;
}

main img:nth-of-type(2){
	width:20%;
	margin:0 30% 0 0;
}

}


@media screen and (orientation:landscape) and (min-aspect-ratio: 16/5.5) {

main img:nth-of-type(1){
	width:19%;
	margin:0 0 0 31%;
}

main img:nth-of-type(2){
	width:19%;
	margin:0 31% 0 0;
}

}


@media screen and (orientation:landscape) and (min-aspect-ratio: 16/5.4) {

main img:nth-of-type(1){
	width:19%;
	margin:0 0 0 31%;
}

main img:nth-of-type(2){
	width:19%;
	margin:0 31% 0 0;
}

}


@media screen and (orientation:landscape) and (min-aspect-ratio: 16/5.3) {

main img:nth-of-type(1){
	width:18%;
	margin:0 0 0 32%;
}

main img:nth-of-type(2){
	width:18%;
	margin:0 32% 0 0;
}

}


@media screen and (orientation:landscape) and (min-aspect-ratio: 16/5.2) {

main img:nth-of-type(1){
	width:18%;
	margin:0 0 0 32%;
}

main img:nth-of-type(2){
	width:18%;
	margin:0 32% 0 0;
}

}


@media screen and (orientation:landscape) and (min-aspect-ratio: 16/5.1) {

main img:nth-of-type(1){
	width:17%;
	margin:0 0 0 33%;
}

main img:nth-of-type(2){
	width:17%;
	margin:0 33% 0 0;
}


}

@media screen and (orientation:landscape) and (min-aspect-ratio: 16/5) {

main img:nth-of-type(1){
	width:13%;
	margin:0 0 0 37%;
}

main img:nth-of-type(2){
	width:13%;
	margin:0 37% 0 0;
}

}

@media screen and (orientation:landscape) and (min-aspect-ratio: 16/4) {

main img:nth-of-type(1){
	width:12%;
	margin:0 0 0 38%;
}

main img:nth-of-type(2){
	width:12%;
	margin:0 38% 0 0;
}

}

@media screen and (orientation:landscape) and (max-width: 820px) and (min-aspect-ratio: 16/12) {
	
main img{
	height: auto;
	width: 50%;
}

main img:nth-of-type(1){
	margin:0;
}

main img:nth-of-type(2){
	margin:0;
}

}



@media screen and (orientation:landscape) and (max-width: 820px) and (min-aspect-ratio: 16/11.5) {
	
main img{
	height: auto;
	width: 48%;
}

main img:nth-of-type(1){
	margin:0 0 0 2%;
}

main img:nth-of-type(2){
	margin:0 2% 0 0;
}

}

@media screen and (orientation:landscape) and (max-width: 820px) and (min-aspect-ratio: 16/11) {
	
main img{
	height: auto;
	width: 46%;
}

main img:nth-of-type(1){
	margin:0 0 0 4%;
}

main img:nth-of-type(2){
	margin:0 4% 0 0;
}

}

@media screen and (orientation:landscape) and (max-width: 820px) and (min-aspect-ratio: 16/10.5) {
	
main img{
	height: auto;
	width: 44%;
}

main img:nth-of-type(1){
	margin:0 0 0 6%;
}

main img:nth-of-type(2){
	margin:0 6% 0 0;
}

}

@media screen and (orientation:landscape) and (max-width: 820px) and (min-aspect-ratio: 16/10.25) {
	
main img{
	height: auto;
	width: 44%;
}

main img:nth-of-type(1){
	margin:0 0 0 6%;
}

main img:nth-of-type(2){
	margin:0 6% 0 0;
}

}

@media screen and (orientation:landscape) and (max-width: 820px) and (min-aspect-ratio: 16/10) {
	
main img{
	height: auto;
	width: 43%;
}

main img:nth-of-type(1){
	margin:0 0 0 7%;
}

main img:nth-of-type(2){
	margin:0 7% 0 0;
}

}

@media screen and (orientation:landscape) and (max-width: 820px) and (min-aspect-ratio: 16/9.5) {
	
main img{
	height: auto;
	width: 41%;
}

main img:nth-of-type(1){
	margin:0 0 0 9%;
}

main img:nth-of-type(2){
	margin:0 9% 0 0;
}

}

@media screen and (orientation:landscape) and (max-width: 820px) and (min-aspect-ratio: 16/9) {
	
main img{
	height: auto;
	width: 36%;
}

main img:nth-of-type(1){
	margin:0 0 0 14%;
}

main img:nth-of-type(2){
	margin:0 14% 0 0;
}

}

@media screen and (orientation:landscape) and (max-width: 820px) and (min-aspect-ratio: 16/8.5) {
	
main img{
	height: auto;
	width: 32%;
}

main img:nth-of-type(1){
	margin:0 0 0 18%;
}

main img:nth-of-type(2){
	margin:0 18% 0 0;
}

}

@media screen and (orientation:landscape) and (max-width: 820px) and (min-aspect-ratio: 16/8) {
	
main img{
	height: auto;
	width: 30%;
}

main img:nth-of-type(1){
	margin:0 0 0 20%;
}

main img:nth-of-type(2){
	margin:0 20% 0 0;
}

}

@media screen and (orientation:landscape) and (max-width: 820px) and (min-aspect-ratio: 16/7.5) {
	
main img{
	height: auto;
	width: 27%;
}

main img:nth-of-type(1){
	margin:0 0 0 23%;
}

main img:nth-of-type(2){
	margin:0 23% 0 0;
}

}

@media screen and (orientation:landscape) and (max-width: 820px) and (min-aspect-ratio: 16/7) {

main img{
	height: auto;
	width: 25%;
}	

main img:nth-of-type(1){
	margin:0 0 0 25%;
}

main img:nth-of-type(2){
	margin:0 25% 0 0;
}

}

@media screen and (max-width:790px){

main img + p + p{
	display:block;
	height:5em;
	top:-6em;
	text-align:left;
	margin-bottom:-6em;
}

}

@media screen and (max-width:568px){

p.attention{
	text-align:center;
	font-size:70%;
	margin:auto;
}

}

@media screen and (max-width:480px){

#modal-content,
#modal-content div,
#modal-content2,
#modal-content2 div,
#modal-content3,
#modal-content3 div{
	width:100%;
}

.btn_area{
	position:absolute;
	bottom:4em;
}

}

@media screen and (max-width:420px){

#modal-content2 section{
	padding: 4em 0 4em .5em;
}

}

@media screen and (max-width:400px){

#modal-content,
#modal-content3{
	font-size:.9em;
}

}

@media screen{

main img{
	animation:fadeIn .3s ease 0s 1 normal;
	-webkit-animation:fadeIn .3s ease 0s 1 normal;
	-moz-animation:fadeIn .3s ease 0s 1 normal;
	-o-animation:fadeIn .3s ease 0s 1 normal;
	-ms-animation:fadeIn .3s ease 0s 1 normal;
}

area:hover{
	cursor:pointer;
}

area.before:hover,
area.after:hover{
	cursor:pointer;
}

}

@media print{

body,
main{
	width:100%;
	background:#fff;
}

header,
.btn_area,
.attention,
.bt,
footer{
	display:none;
}

footer{
	background:#fff;
	color:#000;
}

main img{
	width:50%;
	height:auto;
	box-shadow: none;
}

main img:nth-of-type(1){
	float:left;
}

main img.nth-of-type(2){
	float:right;
}

}

@keyframes fadeIn {0%{opacity:0}100%{opacity:1}}
@-webkit-keyframes fadeIn {0%{opacity:0}100%{opacity:1}}

@font-face {
  font-family: YuGothic,"游ゴシック",helvetica,arial,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN",sans-serif;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}