@font-face {
font-family:"textured2";
src: url("/fonts/textured2.woff2") format("woff2"),
url("/fonts/textured2.woff") format("woff");
}
@font-face {
font-family:"distress";
src: url("/fonts/distress.woff2") format("woff2"),
url("/fonts/distress.woff") format("woff");
}

body {
background-color: #f7f3ed;
background-color: #fff;
font-family: "Noto Sans JP";
font-weight:400;
}

/******************/
/* Midnight Color */
/******************/
/* メニュー文字色 */
.midnightHeader.default p {color: #000;}
.midnightHeader.white p {color: #fff;}
/* メニュー線 */
.midnightHeader.default span {background-color: #000;}
.midnightHeader.white span {background-color: #fff;}

@media screen and (max-width:960px) {
.midnightHeader.white p {color: #000;}
.midnightHeader.white span {background-color: #000;}
}

/*-----------------------------------
squareTtl-大見出し
-----------------------------------*/
h2.squareTtl {
  text-align:center;
  font-size:220%;
  color:#B0D4A8;
  position:relative;
  font-weight:700;
  margin: 20px 0 0;
}
h2.squareTtl:before {
  content:"■■■";
}
h2.squareTtl:after {
  content:"■";
  color:#000;
}
h2.squareTtl:before,h2.squareTtl:after {
  position:absolute;
  top:-25px;
  right:0;
  left:0;
  margin:auto;
  letter-spacing:3px;
  font-size:45%;
}
@media screen and (max-width:960px) {
h2.squareTtl {
  text-align:center;
  font-size:160%;
}
h2.squareTtl::before, h2.squareTtl::after {
    top: -13px;
}
}
/*-----------------------------------
flex
-----------------------------------*/
.flexBlock {
  display:flex;
  justify-content: space-between;
}
/*-----------------------------------
spBr
-----------------------------------*/
br.spBr {
display: none;
}
@media screen and (max-width:960px) {
br.spBr {
display: block;
}
}
/*-----------------------------------
共通ボタン
-----------------------------------*/
.blackBtn {
    background: #000;
    color: #f6f4c4;
    font-family: distress ,"Noto Sans JP";
    width: 100%;
    max-width: 280px;
    display: block;
    border-radius: 20px;
    text-align: center;
    font-weight: 400;
    letter-spacing: 3px;
    font-size: 220%;
    text-decoration: none;
    line-height: 1;
    position: relative;
    transition: all .2s;
    margin: 0 auto;
}
.blackBtn span {
    transition: all .2s;
}
.blackBtn span::before {
    width: 40px;
    transform: translate(30px, 0px);
}
.blackBtn span::after {
    width: 13px;
    transform-origin: right center;
    transform: translate(29px, 0px) rotate(40deg);
}
.blackBtn span::before, .blackBtn span::after {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    right: 80px;
    height: 2.4px;
    background: #f6f4c4;
}
.blackBtn:hover {
    color: #000;
    background: #f6f4c4;
    text-decoration: none;
    transition: all .2s;
}
.blackBtn:hover span::before, .blackBtn:hover span::after {
    background: #000;
}
.win .blackBtn span {
    padding: 0 0 5px;
    display: block;
}
.mac .blackBtn span,
.iphone .blackBtn span,
.android .blackBtn span {
    padding: 5px 0 0;
    display: block;
}
@media screen and (max-width:960px) {
.blackBtn {
    font-size: 140%;
    max-width: 190px;
    padding: 2px 0 5px;
}
.blackBtn span::before {
    width: 30px;
    transform: translate(30px, 0px);
}
.blackBtn span::after {
    width: 13px;
    transform-origin: right center;
    transform: translate(29px, 0px) rotate(40deg);
}
.blackBtn span::before, .blackBtn span::after {
    content: '';
    display: block;
    position: absolute;
    top: 60%;
    right: 60px;
    height: 2.8px;
    background: #f6f4c4;
}
}
/*-----------------------------------
facebox
-----------------------------------*/
#facebox {
    width: 100%;
    margin: auto;
    position: absolute;
    right: 0;
    left: 0 !important;
    text-align: center;
}
#facebox .popup {
    margin: 0 auto;
    width: 100%;
    max-width: 560px;
}
#facebox .content {
    width: 100% !important;
    max-width: 560px;
    margin: 0 auto;
    display: block;
}
#facebox img {
    width: 100%;
    object-fit: cover;
    object-position: center;
}