@charset "UTF-8";
/* CSS Document */
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
.content{
    margin: 0 auto;
    padding: 40px;
}
.modal{
    display: none;
    height: 100vh;
    margin:0 auto;
    position: fixed;
    top: 0;
    width: 100%;
}
.modal__bg{
    background: rgba(223,225,228,0.95);
    height: 100vh;
    position: absolute;
    width: 100%;
}

.modal__content {
position:relative;
}

.modal__content p {
font-size:13px;
letter-spacing:0.03em;
line-height:2em;
font-family:"游ゴシック体 Pr6N R", "Yu Gothic Pr6N R";
margin:1em 0 0;
}

.modal__content p:first-child {
margin:0;
}

.modal_closebutton {
display: block;
width: 28px;/*枠の大きさ*/
height: 28px;/*枠の大きさ*/
background:none;
position:absolute;
right:18px;
top:20px;
}

.modal_closebutton::before, .modal_closebutton::after{
content: "";
display: block;
width: 100%;/*バツ線の長さ*/
height: 1px;/*バツ線の太さ*/
background: #000;
transform: rotate(45deg);
transform-origin:0% 50%;
position: absolute;
top: calc(14% - 5px);
left: 14%;
}

.modal_closebutton::after{
transform: rotate(-45deg);
transform-origin:100% 50%;
left: auto;
right: 14%;
}

.wholesale_contact li {
list-style:none;
}

.wholesale_contact a {
border:1px #ccc solid;
display:block;
text-align:center;
}

/*========================================================================================================================
  for Smartphone
========================================================================================================================*/

@media (max-width: 640px) {


.modal__content{
background: #fff;
left: 50%;
padding:10px 10px 20px;
position: absolute;
top: 50%;
transform: translate(-50%,-50%);
width: 95%;
-webkit-box-shadow: 10px 10px 10px #ccc;
box-shadow: 0 10px 20px #ccc;
}

.modal__content h2 {
font-family: 'Spartan', sans-serif;
font-weight:600;
font-size:20px;
margin:10px 0 20px;
text-align:center;
}

.wholesale_contact {
margin:1em 0 0;
padding:0;
text-align:center;
width:100%;
}

.wholesale_contact li {
display:block;
width:100%;
}

.wholesale_contact li:first-child {
margin:0 0 1em;
}

.wholesale_contact a {
padding:0.5em 0;
width:100%;
}

.wholesale_contact .mail {
background:url("../images/home/icon_contact.png") no-repeat;
background-size:18px;
background-position:15px 50%;
}

.wholesale_contact .tel {
background:url("../images/home/icon_tel.png") no-repeat;
background-size:18px;
background-position:15px 50%;
}

}


/*========================================================================================================================
  for PC
========================================================================================================================*/

@media (min-width: 641px) {

.modal__content{
background: #fff;
left: 50%;
padding: 40px;
position: absolute;
top: 50%;
transform: translate(-50%,-50%);
width: 60%;
-webkit-box-shadow: 10px 10px 10px #ccc;
box-shadow: 0 10px 20px #ccc;
}

.modal__content h2 {
font-family: 'Spartan', sans-serif;
font-weight:600;
font-size:20px;
margin:10px 0 40px;
text-align:center;
}

.wholesale_contact {
margin:30px 0 0;
text-align:center;
width:100%;
}

.wholesale_contact li {
display:inline-block;
}

.wholesale_contact li:first-child {
margin:0 2em 0 0;
}

.wholesale_contact a {
padding:0.5em;
width:200px;
}

.wholesale_contact .mail {
background:url("../images/home/icon_contact.png") no-repeat;
background-size:18px;
background-position:15px 50%;
}

.wholesale_contact .tel {
background:url("../images/home/icon_tel.png") no-repeat;
background-size:18px;
background-position:15px 50%;
}

}