/*---------------------------------------------------------
Theme Name: pas_theme
Description: オリジナルテンプレート
Version: 1.0.0
Author: Y.Satou
---------------------------------------------------------*/

@charset "utf-8";

/* common */
body {
	color: #2b2b2b;
	font-size: 16px;
	font-family: serif,'游明朝','Yu Mincho',Arial,'Meiryo','メイリオ',Sans-Serif,'MS ゴシック';
	text-align: center;
	margin: 0 auto;
	padding: 0;
	line-height: 160%;
	background: #fff;}
@media screen and (max-width:960px) {
body {
	font-size: 15px;}
}

a:link { text-decoration: none; color: #2b2b2b; }
a:visited { text-decoration: none; color: #2b2b2b; }
a:hover { text-decoration: none; color: #aaaaaa; }
a.border { text-decoration: underline;}
a.border:hover { text-decoration: none;}

img {
	margin: 0;
	padding: 0;
	vertical-align: bottom;}
img, img a { border-style:none; }

.clear { clear: both; }
.clearfix { display: block; }
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;}
.center { text-align: center !important; }
.left { text-align: left !important; }
.right { text-align: right !important; }

article,aside,canvas,details,figcaption,figure,header,footer,hgroup,menu,nav,section,summary {
	display: block;}
h1, h2, h3, h4, h5, h6 {
	font-size: 100%;
	font-weight: bold;
	margin: 0;
	padding: 0;}
ol, ul, li, p, form, input, dl, dt, dd, pre {
	margin: 0;
	padding: 0;}
div,p {
	word-wrap: break-word;
	word-break: break-all;}
hr { margin:0; }
ul,li { list-style-type:none; }
nav li { display: inline-table; }
nav li a { text-decoration: none !important; }
dt,dd { display: inline-block; }
table {
	width: 100%;
	border-collapse: collapse; }

.textOverflow {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;}

.linkArea .linkBtn {
	display: inline-block;
	width: 40%;
	margin: 0px 40px;}
.linkBtn {
	clear: both;
	display: block;
	text-align: center;
	margin: 0 auto;
	padding: 12px 0px;
	background: #393f4c;
	border: 1px solid #888084;}
a.linkBtn {
	color: #ffffff;}	
.linkBtn:hover {
	text-decoration: none;
	filter:alpha(opacity=80);
	-moz-opacity: 0.8;
	opacity: 0.8;}
@media screen and (max-width:960px) {
.linkBtn {
	font-size: 13px;
	padding: 8px 0px;}
.linkArea .linkBtn {
	display: inline-block;
	width: 60%;
	max-width: 300px;
	margin: 0px 40px 20px;}
}

ul.page-numbers {
	text-align: center !important;
	margin: 20px 0px;}
.page-numbers li {
	display: inline-block;
	margin: 0px 5px 10px;
	border: 1px solid #ccc !important;}
.page-numbers li span,.page-numbers li a {
	display: block;
	padding: 10px 20px;}
.page-numbers li span {
	font-weight: bold;
	background: #ddd;}
.page-numbers li a {
	background: #fff;}

/* none */
@media screen and (max-width:960px) {.pc { display: none !important; }}
@media screen and (min-width:961px) {.sp { display: none !important; }}

/* header */
#headArea {
	display: inline-block;
	width: 1200px;
	margin: 0 auto;
	clear:both;}
#headArea .titleBox {
	display: inline-block;
	float: left;
	margin: 29px 0px 0px;}
#headArea .titleBox img {
	width: 250px;}
#headArea .caleBtn {
	display: inline-block;
	text-align: center;
	margin: 23px 0px 0px 40px;}
#headArea .caleBtn a {
	display: inline-block;
	width: 170px;
	height: 53px;
	color: #ffffff;
	background: #393f4c;}
#headArea .caleBtn img {
	display: inline-table;
	width: 35px;
	margin: 8px 18px 2px 0px;}
#headArea .caleBtn span {
	display: inline-table;
	text-align: left;
	line-height: 120%;}
#headArea .headMenu {
	display: inline-block;
	margin: 20px 0px 20px 65px;}
#headArea .headMenu li {
	padding: 0px 25px;
	border-right: 1px solid #ddd;}
#headArea .headMenu li:last-of-type {
	border: none !important;}
@media screen and (max-width:960px) {
#headArea {
	width: 100%;
	max-width: 960px;}
#headArea .titleBox {
	margin: 12px 0px 2px !important;}
#headArea .titleBox img {
	width: 130px;
	margin: 0px 15px;}
#headArea .caleBtn {
	float: left;
	display: inline-block;
	text-align: center;
	margin: 13px 0px 0px 0px;}
#headArea .caleBtn a {
	width: 140px;
	height: 45px;}	
#headArea .caleBtn img {
	display: inline-table;
	width: 25px;
	margin: 0px 12px 5px 0px;}
#headArea .caleBtn span {
	margin-top: 5px;}
}

/* topBnr */
#topBnr {
	width: 100%;
	height: 950px;
	background: url(img/top_bnr_001.jpg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	background-color: #eee;
	clear: both;}
#topBnr .storeLogo {
	padding: 60px 0px 60px;}
#topBnr .storeLogo img {
	width: 500px;}
#topBnr .topMenu li {
	width: 300px;
	margin-right: 40px;
	padding: 20px 0px;
	border: 1px solid #ffffff;}
#topBnr .topMenu li:last-of-type {
	margin-right: 0px;}
#topBnr .topMenu li a {
	display: block;
	color: #fff;}
#topBnr .topMenu li a:hover {
	text-decoration: none;
	filter:alpha(opacity=60);
	-moz-opacity: 0.6;
	opacity: 0.6;}
@media screen and (max-width:960px) {
#topBnr {
	width: 100%;
	height: auto;
	padding: 0px 0px 20px;}
#topBnr .storeLogo {
	padding: 20px 0px;}
#topBnr .storeLogo img {
	width: 75%;
	max-width: 350px;}
#topBnr .topMenu li {
	display: block;
	width: 70%;
	max-width: 400px;
	margin: 0px auto 20px !important;
	padding: 10px 0px;
	border: 1px solid #ffffff;}
}

/* mainCont */
#mainCont {
	margin: 0 auto;
	clear: both;}
.contBox {
	width: 1200px;
	margin: 0 auto;
	padding: 90px 0px;
	clear: both;}
.contBox.maxw {
	width: 100% !important;}
.maxw div {
	width: 1200px;
	margin: 0 auto;
	clear: both;}
.contBox h2 {
	font-size: 40px;
	margin-bottom: 90px;}
.contBox h2.singleTitle {
	font-size: 40px;
	margin: 0px 0px 70px 0px;
	padding-top: 20px;}
@media screen and (max-width:960px) {
#mainCont {
	width: 100%;
	max-width: 800px;}
.contBox {
	width: auto;
	padding: 60px 10px;
	clear: both;}
.contBox h2 {
	font-size: 35px;
	margin-bottom: 40px;}
.maxw div {
	width: 100%;}
.contBox h2.singleTitle {
	font-size: 35px;
	margin-bottom: 70px;}
}

/* Information */
.infoTop {
	margin-bottom: 60px;}
.infoTop li {
	display: inline-table;
	margin-right: 90px;
	text-align: left;
	width: 28%;}
.infoTop li:last-of-type {
	margin-right: 0px;}
.infoTop li a {
	display: block;}
.infoTop li img {
	display: block;
	width: 330px;
	height: 230px;
	background: #cccccc;
	object-fit: cover;}
@media screen and (max-width:960px) {
.infoTop {
	margin-bottom: 0px;}	
.infoTop li {
	display: inline-block;
	margin: 0px 0px 30px 0px;
	text-align: center;
	width: 100%;}
.infoTop li img {
	display: block;
	margin: auto;}
.infoTop li p {
	text-align: center;
	max-width: 600px;}	
}

.infoList {
	margin-bottom: 60px;}
.infoList li {
	text-align: left;
	padding: 20px 0px;
	border-bottom: 1px solid #dddddd;}
.infoList li:last-of-type {
	border-bottom: none;}
@media screen and (max-width:960px) {
.infoList {
	margin-bottom: 30px;}
}

/* about */
.about {
	padding: 80px 0px;
	background: #eeeeee;}
.about .textBox p {
	text-align: left;
	margin: 50px 0px 60px;}
.about .imgBox img {
	display: inline-block;
	margin: 0px;
	width: 100%;
	height: auto;
	background: #eee;}
@media screen and (max-width:960px) {
.about {
	padding: 40px 0px 10px;}	
.about .textBox {
	text-align: left;}
.about .imgBox img {
	display: inline-block;
	margin: 0px 0px 0px;
	width: 100%;
	max-width: 600px;
	height: auto;
	background: #eee;}
.about .textBox p {
	margin: 30px 10px;}	
}

/* business */
.business {
	padding: 80px 0px;
	background: #eeeeee;}
.business .textBox img {
	display: inline-block;
	width: 500px;
	height: auto;
	margin: 0px 50px 50px 0px;}
.business .textBox p {
	display: inline-block;
	width: 640px;
	vertical-align: top;
	text-align: left;}
.business .linkArea a {
	width: 27%;
	margin: 0px 35px;}
@media screen and (max-width:960px) {
.business {
	padding: 40px 0px 10px;}
.business .textBox img {
	width: 100%;
	margin: 0px 0px 30px;}
.business .textBox p {
	width: auto;
	margin: 0px 10px 30px;}
.business .linkArea a {
	width: 60%;
	margin: 0px 0px 20px;}
}

/* menu */
.menu .pickImg {
	display: table-cell;}
.menu .pickImg img {
	width: 500px;
	height: auto;
	margin: 0px 50px 0px 0px;}
.menu .pickTxt {
	display: table-cell;
	vertical-align: middle;
	text-align: left;}
.menu .pickTxt h3 {
	display: block;
	text-align: center;
	font-size: 35px;
	margin-bottom: 50px;}
.menu .pickTxt p {}
.menu .cateBox {
	display: inline-block;
	vertical-align: top;
	width: 290px;
	margin: 60px 3px;}
.menu .cateBox img {
	width: 100%;
	height: auto;
	background: #eee;}
.menu .cateBox h3 {
	font-size: 25px;
	margin: 20px 0px 15px;}
.menu .cateBox p {
	text-align: left;
	padding: 0px 20px;}
@media screen and (max-width:960px) {
.menu .pickImg {
	display: block;}	
.menu .pickupBox img {
	width: 100%;
	max-width: 600px;
	height: auto;
	margin: 0 auto;
	background: #eee;}
.menu .pickupBox h3 {
	font-size: 25px;
	margin: 20px 0px;}
.menu .cateBox {
	width: 45%;
	max-width: 320px;
	height: auto;
	margin: 30px 20px 0px 0px;
	border: 1px solid #ddd;}
#menu .cateBox:nth-child(2n) {
	margin-right: 0px;}
.menu .cateBox img {
	width: 100%;
	height: auto;
	background: #eee;}
.menu .cateBox h3 {
	font-size: 15px;
	margin: 10px 0px;}
.menu .cateBox p {
	font-size: 14px;
	text-align: left;
	padding: 0px 10px 10px;}
.menu .linkArea {
	margin-top: 40px;}
}

/* access */
.access .storeInfo {
	margin-bottom: 100px;}
.access .mapBox , .access .textBox {
	display: inline-block;
	vertical-align: top;
	width: 580px;}
.access .textBox {
	text-align: left;
	margin-right: 30px;}
.access .textBox h3 {
	font-size: 30px;
	font-weight: normal;
	margin-bottom: 10px;}
.access .textBox table {
	margin-top: 35px;}
.access .textBox th {
	vertical-align: top;
	color: #afafb0;}
.access .textBox td {
	vertical-align: top;
	padding-bottom: 15px;}
.access .infoBox h3 {
	font-size: 25px;
	margin-bottom: 30px;}
.access .calendarImg {
	width: 600px;
	margin: 0px 0px 30px;}
.access .infoBox .linkArea {
	margin: 50px 0px;}
@media screen and (max-width:960px) {
.access .mapBox , .access .textBox {
	width: 100%;}
.access .mapBox iframe {
	width: 100%;
	max-width: 500px;
	height: 280px;}
.access .textBox {
	text-align: center;
	margin: 20px 0px;
	margin-left: 0px !important;}
.access .textBox h3 {
	font-size: 20px;}
.access .textBox table {
	font-size: 15px;
	margin-top: 20px;}
.access .textBox th {
	display: block;
	vertical-align: top;
	width: 100%;
	text-align: center;
	padding-right: 0px;}
.access .textBox td {
	display: block;
	vertical-align: top;
	width: 100%;
	text-align: center;
	padding-bottom: 10px;}
.access .calendarImg {
	width: 90%;}	
}

/* single */
#contBnr {
	width: 100%;
	height: 350px;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: cover !important;
	background-color: #eee !important;
	clear: both;}
.aboutPage #contBnr {
	background: url(img/header/single_header_img_about.jpg);}
.itemPage #contBnr {
	background: url(img/header/single_header_img_item.jpg);}
.servicePage #contBnr {
	background: url(img/header/single_header_img_service.jpg);}
.recruitPage #contBnr {
	background: url(img/header/single_header_img_recruit.jpg);}
.qaPage #contBnr {
	background: url(img/header/single_header_img_qa.jpg);}
.infoPage #contBnr {
	background: url(img/header/single_header_img_info.jpg);}
.contactPage #contBnr {
	background: url(img/header/single_header_img_contact.jpg);}
#contBnr .contTitle {
	padding: 175px 0px 0px;}
#contBnr .contTitle h1 {
	font-size: 50px;
	color: #fff;}
.contHeader p {
	text-align: left;
	margin-bottom: 100px;}
.contFooter p {
	margin-bottom: 50px;}
@media screen and (max-width:960px) {
#contBnr .contTitle h1 {
	font-size: 25px;}
}

.singlePage .contBox {
	text-align: left;
	padding: 60px 0px;}
.singlePage .contBox h2 {
	margin: 20px 0px;
	line-height: normal;}
.singleBox {
	margin: 60px 0px;}	
.singleBox img {
	max-width: 600px;
	max-height: 600px;}
@media screen and (max-width:960px) {
.singlePage h2 {
	font-size: 25px;
	line-height: normal;}
.singlePage .contBox {
	padding: 60px 10px;}
.singlePage .contBox .goBack {
	text-align: center;}
.singleBox img {
	max-width: 100%;
	max-height: 400px;}
}

/* about */
.aboutCont {
	margin-bottom: 100px;}
.aboutCont p {
	text-align: left;
	margin-bottom: 50px;}
.aboutCont.inImg p {
	display: inline-block;
	vertical-align: top;
	width: 650px;
	margin: 0px 45px 0px 0px;}
.aboutCont.inImg img {
	display: inline-block;
	width: 500px;}
@media screen and (max-width:960px) {
.aboutCont.inImg p {
	display: inline-block;
	vertical-align: top;
	width: auto;
	margin: 0px 0px 50px 0px;}
.aboutCont.inImg img {
	display: inline-block;
	width: 100%;
	max-width: 500px;}
}

.profile .imgBox {
	display: inline-block;
	width: 400px;
	margin-right: 80px;}
.profile .imgBox img {
	width: 400px;
	height: auto;
	text-align: left;
	background: #eee;}
.profile .textBox {
	display: inline-block;
	width: 650px;
	text-align: left;
	vertical-align: top;}
.profile h3 {
	font-size: 30px;
	margin-bottom: 5px;}
.profile .proText {
	margin: 40px 0px;}
.profile .textBox th {
	vertical-align: top;
	padding-right: 20px;
	color: #afafb0;}
.profile .textBox td {
	vertical-align: top;
	padding-bottom: 15px;}
@media screen and (max-width:960px) {
.profile .imgBox {
	width: 100%;
	margin: 0px 0px 50px 0px;}
.profile .imgBox img {
	width: 80%;
	max-width: 350px;
	height: auto;
	background: #eee;}
.profile .textBox {
	width: 100%;
	text-align: center;}
.profile h3 {
	font-size: 25px;}
.profile .proText {
	text-align: left;}
.profile .textBox table {
	font-size: 15px;}
.profile .textBox th {
	display: block;
	vertical-align: top;
	width: 100%;
	text-align: center;
	padding-right: 0px;}
.profile .textBox td {
	display: block;
	vertical-align: top;
	width: 100%;
	text-align: center;
	padding-bottom: 10px;}
}

/* member */
.aboutCont.member {
	margin-top: 120px;}
.menberCont {
	display: inline-block;
	width: 30%;
	text-align: center;}
.menberCont img {
	width: 200px;}
.menberPost {
	margin: 20px 0px !important;
	text-align: center !important;}
.menberName {
	font-size: 25px;
	text-align: center !important;}
.aboutCont.member .recruitTxt {
	text-align: center;}
@media screen and (max-width:960px) {
.menberCont {
	display: inline-block;
	width: 100%;
	text-align: center;}
.menberCont img {
	width: 150px;}
}

/* menu */
.itemBox {
	margin: 0px 0px 100px;}
.itemBox img {
	display: inline-block;
	width: 500px;
	height: auto;
	margin: 0px 70px 0px 0px;
	background: #ccc;}
.itemTxt {
	vertical-align: top;
	display: inline-block;
	width: 600px;}
.itemBox h2 {
	font-size: 25px;
	text-align: left;
	margin: 45px 0px 0px;}
.itemBox p {
	text-align: left;
	padding: 35px 0px;}
.itemTxt .linkBtn {
	width: 40%;
	margin: 0px 15px;
	padding: 10px 10px;}
@media screen and (max-width:960px) {
.contBox {
	text-align: center;}
.itemBox img {
	display: inline-block;
	width: 90%;
	max-width: 500px;
	height: auto;
	margin: 0px 0px 0px 0px;
	background: #ccc;}
.itemTxt {
	vertical-align: top;
	display: inline-block;
	width: auto;}
.itemBox h2 {
	font-size: 20px;
	text-align: center;
	margin: 45px 0px 0px;}
.itemTxt .linkBtn {
	width: 60%;
	max-width: 300px;
	margin: 0px auto 20px;
	padding: 10px 10px;}
}

/* businessService */
@media screen and (min-width:961px) {
	.servicePage .itemBox {
		margin-bottom: 130px;}
}

/* recruit */
.recruitPage .itemBox p {
	padding: 20px 0px;}
.recruitNo {
	padding: 0px 5px 0px 0px;}
.recruitPage .itemBox table {
	text-align: left;}	
.recruitPage .itemBox th {
	width: 7%;}
.recruitPage .contFooter p span {
	display: inline-block;
	font-weight: bold;
	font-size: 45px;
	margin: 20px 0px;}
@media screen and (max-width:960px) {
.recruitPage h2 {
	text-align: left;}
.recruitNo {
	display: table-cell;
	vertical-align: middle;}
.recruitName {
	display: table-cell;}
.recruitPage .itemBox table {
	text-align: center;}
.recruitPage .itemBox th {
	display: block;
	width: auto;
	background: #eeeeee;}
.recruitPage .itemBox td {
	display: block;
	padding: 5px 0px;}
.recruitPage .contFooter p span {
	font-size: 35px;}
}

/* question */
.qaPage .contFooter p span {
	display: inline-block;
	font-weight: bold;
	font-size: 45px;
	margin: 20px 0px;}
@media screen and (max-width:960px) {
.qaPage h2 {
	text-align: left;}
.qaPage .itemBox {
	margin-bottom: 60px;}
.qaPage .contFooter p span {
	font-size: 35px;}
}

/* infoList */
.infoPage .itemBox {
	margin: 0px 0px 20px;
	border-bottom: 1px solid #dddddd;}
.infoPage .itemBox span {
	display: block;
	text-align: left;
	font-size: 13px;}
.infoPage .itemBox h2 {
	font-size: unset;
	text-align: left;
	margin: 0;
	padding: 10px 0px 15px;}
.infoPage .contFooter {
	margin-top: 80px;}

/* contact */
.contactPage .contHeader {
	text-align: left;
	margin-bottom: 20px;}
.contactPage table {
	text-align: left;}
.contactPage th {
	border: 1px solid #ffffff;
	padding: 5px 20px;
	background: #eeeeee;}
.contactPage td {
	padding: 5px 20px;}
.contactPage td a {
	text-decoration: underline;}
.contactPage td a:hover {
	text-decoration: none;}
.contactPage table span {
	display: inline-block;
	margin: 5px 10px 5px 3px;}
.contactPage .doui {}
.contactPage .doui span {
	margin: 0px 0px 3px 0px;
	padding: 0px;}
.contactPage .kiyakuLink {
	display: inline-block;
	margin: 10px 0px 10px 0px;}
.contactPage .contFooter .checkArea {
	border: 3px solid #ccc;
    width: 680px;
    display: inline-block;
    margin: 50px 0px 50px;
    padding: 10px;}
input[type="text"],input[type="tel"],input[type="email"] {
	margin: 10px 0px;
	padding: 8px 10px;
	border: 1px solid #bbbbbb;}
input[type="radio"],input[type="checkbox"] {
	margin-right: 5px;}
input[type="submit"] {
	padding: 10px 50px 12px;
    color: #555;
    font-weight: bold;}
textarea {
	width: 850px;
	height: 200px;
	margin: 10px 0px;
	padding: 8px 10px;
	border: 1px solid #bbbbbb;}
.hidden-fields-container,.screen-reader-response {
	display: none;}
.wpcf7-not-valid-tip {
	margin: 0px 0px 0px 20px !important;
    color: red;
    font-weight: bold;}
.wpcf7-response-output {
	font-weight: bold;
	margin: 40px 0px;
	padding: 10px 0px;}
.wpcf7-form.sent .wpcf7-response-output {
	  border: 3px solid #3cb371;}
.wpcf7-form.invalid .wpcf7-response-output {
	border: 3px solid #ff9800;}
.wpcf7-form.failed .wpcf7-response-output {
  	border: 3px solid #f44336;}
@media screen and (max-width:960px) {
.contactPage th {
	display: block;}
.contactPage td {
	display: block;
	padding: 5px 0px;
	text-align: center;}
input[type="text"],input[type="tel"],input[type="email"] {
	width: 95%;
	margin: 10px auto;}
textarea {
	width: 95%;
	margin: 10px auto;}
.contactPage .contSelect {
	text-align: left;}
.contactPage .contFooter .checkArea {
	width: 90%;}
.contactPage table .kiyakuLink {
	margin: 0;}
}

/* privacy*/
.privacyPage {
	text-align: left;}
.privacyLi {
	margin: 10px 10px 10px 25px;}
.privacyLi li {
    list-style-type: decimal;}
.privacyLi li ul {
	margin: 10px 10px 10px 25px;}
.privacyLi li ul li {
	list-style-type: disc;}
@media screen and (max-width:960px) {
.privacyPage h2 {
	font-size: 25px;}
.privacyPage .contBox {
	text-align: left;}
}

/* goBack */
.goBack {
	margin-top: 100px;
	clear: both;}

/* footer */
footer {
	padding: 15px 0px;
	background: #e5e4e6;}
#footArea {
	width: 1200px;
	margin: 0 auto;
	clear: both;}
#footArea .footMenu {
	text-align: left;}
#footArea .footMenu li {
	padding: 0px 20px;
	border-right: 1px solid #afafb0;}
#footArea .footMenu li:last-of-type {
	border-right: none;}
#footArea .copyright {
	margin-top: 40px;}
@media screen and (max-width:960px) {
footer {
	padding: 0px 0px 15px;}
#footArea {
	width: 100%;}
#footArea .footMenu li {
	width: 100%;
	padding: 10px 0px;
	border-right: none;
	border-bottom: 1px solid #ccc !important;}
#footArea .footMenu li a {
	display: block;
	padding-left: 20px;}
#footArea .copyright {
	font-size: 12px;}
}

/* pageTop */
#pageTop {
	position: fixed;
	bottom: 10px;
	right: 10px;}
#pageTop a {
	display: block;
	z-index: 999;
	font-size: 20px;
	padding: 10px 0px;
	width: 40px;
	background-color: rgba(255,255,255,0.4);
	border: 1px solid #bbb;
	color: #555;
	font-weight: bold;
	text-decoration: none;
	text-align: center;}
#pageTop a:hover {
	text-decoration: none;
	opacity: 0.7;}

/* SP_headerNavi */
.btn {
	display: block;
	width: 30px;
	height: 30px;
	position: absolute;
	top: 16px;
	right: 10px;
	z-index: 200;
	padding: 4px 3px 2px 3px;
	background-color: #fff;
	border: 1px solid #ddd;}
.btn img {
	width: 20px;}
.btn.close img {
	display: none;}
.fixed .btn {
	top: 12px;}
.close {
	background: url(img/close.png) no-repeat;
	display: block;
	width: 30px;
	height: 28px;
	position: absolute;
	top: 10px;
	right: 3px;
	z-index: 200;
	border: none;}
.drawr {
	display: none;
	background-color:rgba(0,0,0,0.9);
	position: absolute;
	top: -5px;
	right: 0;
	width: auto;
	padding: 50px 0 0px 0px;
	z-index: 100;}
.drawr ul {
	text-align: left;
	border-top: 1px solid #333;}
.drawr li {
	padding: 8px;
	border-bottom: 1px solid #333;}
.drawr li a {
	display: block;
	width: 200px;
	color: #fff;}
.goHome {
	display: block;
	width: 90%;
	text-align: center;
	color: #fff !important;
	margin: 10px auto;
	padding: 8px 0px;
	border: 1px solid #333;
	background: #222;}

/* 画像拡大 */
.wrapper {
	display: inline-block;
	justify-content: center;
	align-items: center;
	width: 49%;}
.wrapper img {
	width: 700px;
	object-fit: contain;
	cursor: pointer;}
@media screen and (max-width:960px) {
.wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;}
}
/* modal */
.modal-wrapper {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background: rgba(0,0,0,0.5);
	pointer-events: none;
	opacity: 0;
	transition: 0.25s ease-out;}
.modal-wrapper.show {
	opacity: 1;
	pointer-events: all;}
.modalImg {
	position: absolute;
	max-width: 80%;
	max-height: 80%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	object-fit: cover;
	opacity: 0;
	transition: 0.5s ease-out;}
.modalImg.show {
	opacity: 1;}