@charset "utf-8";

/* CSS Document - SAMURAI JEANS */

---------------------------------------- */
.box {
	display:inline-block;
	width: 120px;
	height: 120px;
	/*margin:2em;*/
	/*box-sizing:border-box;*/
	/*margin:25px;*/
	/*padding:10px;*/
	/*box-shadow: 1px 1px 2px #ccc;*/
	/*border-radius:15px;*/
	/*background:#fff*/
}




/*Media-queries_____________________________________*/
@media screen and (max-height: 640px) {
html {-webkit-text-size-adjust:100%}/*disable webkit text size adjust (for iPhone)*/
a img:hover {opacity:1}
header h1 {font-size:20px}
.cellBox {padding:40px 0}
footer {font-size:80%; padding:5px}
}
/*smaller than 640-----------------------------*/
@media screen and (max-width: 640px) {
html {-webkit-text-size-adjust:100%}/*disable webkit text size adjust (for iPhone)*/
a img:hover {opacity:1}
header h1 {font-size:20px}
.cellBox {padding:40px 0}
footer {font-size:80%; padding:5px}
}

.modal-overlay {
    z-index:2;
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
	height:100%;/*for old Safari*/
    height:100vh;
    background-color:rgba(0,0,0,.5)}
	
.modal-overlay (:target) {height:100%\9} /* IE9,10 */

a.modal-open:hover {cursor:pointer}

/* -- MODAL WINDOW設定 -- */

/* 領域 */
.modal-content {
    position:fixed;
    display:none;
    z-index:3;
    /*margin:10px;*/
    padding:20px;
	/*border-radius:20px;*/
    background: #ffffff;
}

/* 左：画像 */
.modal-content img {
	width:auto;
	max-height:70vh;
	margin: 0 20px 0 0;
}

/* 右：テキスト */


.modal-content h1 {
	font-size: 18px;
	font-weight: normal;
	line-height: 160%;
	margin-bottom: 15px;
}

/*
.modal-content p {
	max-width:565px;
	text-align:left;
}

.modal-conten ul {
	margin: 0 0 0 20px;
}
*/

.tbl_modal_entry th {
	width: 420px;
}

.tbl_modal_entry td {
	width: 400px;
	text-align: left;
}



.modal_entry {
	width: 400px;
	text-align: left;
}

.modal_entry h2 {
	font-size: 14px;
	font-weight: normal;
	line-height: 160%;
	margin-bottom: 20px;
}

.modal_entry ul {
	margin: 0 0 30px 16px;
	list-style: circle;
}

.modal_entry ul li {
	font-size: 12px;
	line-height: 140%;
}

.modal_entry p {
	font-size: 12px;
	line-height: 140%;
}

.modal_entry dl {
	margin: 0 0 20px 0;
}

.modal_entry dt {
	margin: 0 0 5px 0;
	font-size: 12px;
	font-weight: bold;
	line-height: 140%;
}

.modal_entry dd {
	font-size: 12px;
	line-height: 140%;
}

.modal_entry dd ul {
	margin: 0 0 0 16px;
	list-style: circle;
}

.modal_entry dd ul li {
	margin: 0 0 10px 0;
	font-size: 12px;
	line-height: 140%;
}

/* -- CLOSEボタン設定 -- */
a.modal-close {
	position: absolute;
	top: 15px;
	right: 15px;
	color: #008cf5;
	font-size: 35px;
	line-height: 1;
	font-weight: normal;
	text-decoration: none;
}
	
a.modal-close:hover {
	cursor: pointer;
	opacity: .6;
}

@media screen and (max-height: 640px) {
	.modal-content {padding:10px}
	.modal-content h1 {font-size:100%; margin-bottom:3px}
	.modal-content p {font-size:75%;width:70%; margin:auto}
	a.modal-close:hover {opacity:1}
}

@media screen and (max-width: 640px) {
	.modal-content {padding:10px}
	.modal-content img {max-height:inherit; width:100%; height:auto}
	.modal-content p {font-size:75%; width:100%;}
	a.modal-close:hover {opacity:1}
}





/* MODAL WINDOW：ABC商会
---------------------------------------- */
.box_abc {
	display:inline-block;
	width: 160px;
	height: 160px;
	/*margin:2em;*/
	/*box-sizing:border-box;*/
	/*margin:25px;*/
	/*padding:10px;*/
	/*box-shadow: 1px 1px 2px #ccc;*/
	/*border-radius:15px;*/
	/*background:#fff*/
}

/*Media-queries_____________________________________*/
@media screen and (max-height: 640px) {
html {-webkit-text-size-adjust:100%}/*disable webkit text size adjust (for iPhone)*/
a img:hover {opacity:1}
header h1 {font-size:20px}
.cellBox {padding:40px 0}
footer {font-size:80%; padding:5px}
}
/*smaller than 640-----------------------------*/
@media screen and (max-width: 640px) {
html {-webkit-text-size-adjust:100%}/*disable webkit text size adjust (for iPhone)*/
a img:hover {opacity:1}
header h1 {font-size:20px}
.cellBox {padding:40px 0}
footer {font-size:80%; padding:5px}
}

.modal-overlay {
    z-index:2;
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
	height:100%;/*for old Safari*/
    height:100vh;
    background-color:rgba(0,0,0,.5)}
	
.modal-overlay (:target) {height:100%\9} /* IE9,10 */

a.modal-open:hover {cursor:pointer}

/* -- MODAL WINDOW設定 -- */

/* 領域 */
.modal-content {
    position:fixed;
    display:none;
    z-index:3;
    /*margin:10px;*/
    padding:20px;
	/*border-radius:20px;*/
    background: #ffffff;
}

/* 左：画像 */
.modal-content img {
	width:auto;
	max-height:70vh;
	margin: 0 20px 0 0;
}

/* 右：テキスト */


.modal-content h1 {
	font-size: 18px;
	font-weight: normal;
	line-height: 160%;
	margin-bottom: 15px;
}

/*
.modal-content p {
	max-width:565px;
	text-align:left;
}

.modal-conten ul {
	margin: 0 0 0 20px;
}
*/

.tbl_modal_abc_entry th {
	width: 320px;
}

.tbl_modal_abc_entry td {
	width: 400px;
	text-align: left;
}



.modal_abc_entry {
	width: 400px;
	text-align: left;
}

.modal_abc_entry h2 {
	font-size: 14px;
	font-weight: normal;
	line-height: 160%;
	margin-bottom: 20px;
}

.modal_abc_entry ul {
	margin: 0 0 30px 16px;
	list-style: circle;
}

.modal_abc_entry ul li {
	font-size: 12px;
	line-height: 140%;
}

.modal_abc_entry p {
	font-size: 12px;
	line-height: 140%;
}

.modal_abc_entry dl {
	margin: 0 0 20px 0;
}

.modal_abc_entry dt {
	margin: 0 0 5px 0;
	font-size: 12px;
	font-weight: bold;
	line-height: 140%;
}

.modal_abc_entry dd {
	font-size: 12px;
	line-height: 140%;
}

.modal_abc_entry dd ul {
	margin: 0 0 0 16px;
	list-style: circle;
}

.modal_abc_entry dd ul li {
	margin: 0 0 10px 0;
	font-size: 12px;
	line-height: 140%;
}

/* -- CLOSEボタン設定 -- */
a.modal-close {
	position: absolute;
	top: 15px;
	right: 15px;
	color: #008cf5;
	font-size: 35px;
	line-height: 1;
	font-weight: normal;
	text-decoration: none;
}
	
a.modal-close:hover {
	cursor: pointer;
	opacity: .6;
}

@media screen and (max-height: 640px) {
	.modal-content {padding:10px}
	.modal-content h1 {font-size:100%; margin-bottom:3px}
	.modal-content p {font-size:75%;width:70%; margin:auto}
	a.modal-close:hover {opacity:1}
}

@media screen and (max-width: 640px) {
	.modal-content {padding:10px}
	.modal-content img {max-height:inherit; width:100%; height:auto}
	.modal-content p {font-size:75%; width:100%;}
	a.modal-close:hover {opacity:1}
}

/* END
---------------------------------------- */