html{
font-size:14px;
font-weight:500;
font-family:YakuHanRP, "M PLUS Rounded 1c", sans-serif;
}
@media screen and (max-width: 640px) {
html{
font-size: 2.6666666667vw;
}
}

body{
margin:0;
line-height:1.6;
color:#000;
background:url(https://peroncho92gotanda.com/img/common/bg_noize.png),url(https://peroncho92gotanda.com//img/common/bg.png);
}

*{
scrollbar-color: rgba(0,0,0,.2) rgba(255,255,255,0);
scrollbar-width: thin;
}

* ul,li{
margin:0;
padding:0;
list-style:none;
}
* dl,dt,dd{
margin:0;
padding:0;
list-style:none;
}
* figure,figcaption{
margin:0;
padding:0;
}
* p{
margin:0;
padding:0;
}
* img{
border:0;
vertical-align:bottom;
max-width: 100%;
}
*{
  box-sizing: border-box;
}
* a:hover img{
filter: alpha(opacity=75);
moz-opacity: 0.75;
opacity: 0.75;
}
a{
text-decoration:none;
color:#000;
transition : all 0.3s ease 0s;
}
a:hover{
text-decoration:none;
color:#aaa;
}
a:focus, *:focus { outline:none; }

* table{
border-collapse:collapse;
}
h1,h2,h3,h4,h5,j6{
margin:0; padding:0;
font-weight:normal;
}
*, *:before, *:after {
-webkit-box-sizing: border-box;
box-sizing: border-box
}
.pink{
color:#fb3a7f;
}
.pink2{
color:#cb6191;
}
.vioret{
color:#fb3a7f;
}
.orange{
color:#e56d49;
}
.yellow{
color:#f3bf4d;
}
.green{
color:#68c988;
}
.blue{
color:#5178e1;
}

.img_pc{
display:inline-block;
}
.img_sp{
display:none;
}
@media screen and (max-width: 640px) {
.img_pc{
display:none;
}
.img_sp{
display:inline-block;
}
}


/* ヘッダー */
.header{
left: 0;
top: 0;
width: 100%;
border-bottom:2px dotted #000;
z-index: 1000;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.header_inner {
position: relative;
padding: 15px;
}
.logo{
	display: flex;
    justify-content: center;
}
.title{
font-size: 2rem;
font-weight: 600;
}
.sp_nav{
display:none;
}
@media only screen and (max-width: 768px) {
.header{
margin-bottom:1rem;
}
.logo img{
width:280px;
height:auto;
}
.header_inner{
padding:10px 15px;
}
.header_inner h1{
font-size:1rem;
}
.header_inner .telbox .tel{
display:none;
}
.header_inner .telbox .eigyo{
font-weight:bold;
font-size:1.2rem;
margin-top:.5rem;
}
.nav {
position: fixed;
right: -320px; /* 右から出てくる */
top: 0;
width: 300px; /* スマホに収まるサイズ */
height: 100vh;
padding-top: 60px;
background-color: #fff;
transition: all .6s;
z-index: 200;
overflow-y: auto; /* メニューが多くなったらスクロールできるように */
}
.hamburger {
position: absolute;
right: 5px;
top: 12px;
width: 40px; /* クリックしやすい幅 */
height: 40px; /* クリックしやすい高さ */
cursor: pointer;
z-index: 300;
}
.nav_list {
margin: 0;
padding: 0;
list-style: none;
}
.nav_item {
text-align: center;
padding: 0 14px;
}
.nav_item a {
display: block;
padding: 8px 0;
border-bottom: 1px solid #eee;
text-decoration: none;
color: #333;
text-align:left;
font-size:1.2rem;
font-family: 'Jost', sans-serif;
font-weight:600;
}
.nav_item a span{
font-family: "Monomaniac One", sans-serif;
font-size:2.4rem;
font-weight:normal;
margin-right:5px;
}
.nav_item.home a::before{
content:"HOME";
}
.nav_item.sch a::before{
content:"SCHEDULE";
}
.nav_item.cast a::before{
content:"CAST";
}
.nav_item.system a::before{
content:"SYSTEM";
}
.nav_item.rec a::before{
content:"RECRUIT";
}

.nav_item a:hover {
background-color: #eee;
}
.hamburger_border {
position: absolute;
left: 6px;
width: 28px;
height: 2px;
background-color: #333;
transition: all .6s;
}
.hamburger_border_top {
top: 14px;
}
.hamburger_border_center {
top: 22px;
}
.hamburger_border_bottom {
top: 30px;
}
.black_bg {
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
z-index: 100;
background-color: #333;
opacity: 0;
visibility: hidden;
transition: all .6s;
cursor: pointer;
}

/* 表示された時用のCSS */
.nav-open .nav {
right: 0;
}
.nav-open .black_bg {
opacity: .8;
visibility: visible;
}
.nav-open .hamburger_border_top {
transform: rotate(45deg);
top: 20px;
}
.nav-open .hamburger_border_center {
width: 0;
left: 50%;
}
.nav-open .hamburger_border_bottom {
transform: rotate(-45deg);
top: 20px;
}
.sp_nav{
display:block;
}
.sp_nav ul{
display:flex;
background:#232323;
}
.sp_nav ul li{
width : calc(100% / 5) ;
position:relative;
}
.sp_nav ul li:not(:last-child)::after{
content:"";
position:absolute;
top:10%;
right:0;
height:80%;
width:1px;
border-left:1px dotted rgba(255,255,255,.5);
}
.sp_nav ul li a{
display:block;
color:#fff;
font-weight:bold;
font-size:.8rem;
line-height:1.2;
padding:1rem 0;
}
.sp_nav ul li a span{
font-family: 'Jost', sans-serif;
display:block;
font-size:1.3rem;
}
}
/* spナビここまで */

@media only screen and (min-width: 769px) {
.header_inner{
width: 1200px;
display:flex;
justify-content:space-between;
align-items:center;
margin:auto;
padding:10px 0;
position:relative;
background-color: rgba(255, 255, 255, 0.5); /* 50%透明の白 */
}
.header_inner h1{
}
.header_inner .logo{
padding:0;
}
.header_inner .logo img{
width:400px;
}
.header_inner ul{
text-align:right;
line-height:1.2;
}
.header_inner ul .eigyo{
font-weight:bold;
font-size:16px;
}
.header_inner ul .eigyo span{
margin-left:4px;
font-family: 'Jost', sans-serif;
font-size:19px;
}
.header_inner ul .eigyo::before{
content:"";
display:inline-block;
width:81px;
height:18px;
background:url(/img/common/creditcard.png) no-repeat;
background-size:81px 18px;
position:relative;
top:2px;
margin-right:5px;
}
.header_inner ul .tel{
font-size:36px;
font-weight:bold;
font-family: 'Jost', sans-serif;
letter-spacing:1px;
line-height:1;
}
.header_inner ul .tel::before{
content:"TEL.";
font-size:24px;
}
.header_inner .hamburger{
display:none;
}
nav.nav{
}
.nav_list{
text-align:center;
display:flex;
margin:auto;
}
.nav_list li{
display:block;
text-align:center;
position:relative;
}
/*
.nav_list li:not(:last-child)::after{
content:"";
display:block;
width:2px;
height:40%;
position:absolute;
top:30%;
right:0;
background:#ddd;
}
.nav_list li:first-child::before,
.nav_list li:nth-of-type(9)::before{
content:"";
display:block;
width:2px;
height:40%;
position:absolute;
top:30%;
left:0;
background:#ddd;
}
*/

.nav_list li a{
color: #333;
font-size:10px;
display:block;
padding:12px 8px 10px;
line-height:1.3;
transition : all 0.3s ease 0s;
font-family: 'Jost', sans-serif;
}
.nav_list li a:hover{
color:#aaa;
}
.nav_list li a span{
font-family: "Monomaniac One", sans-serif;
font-weight:normal;
font-size:21px;
display:block;
color:#000;
}
}
/* pcナビここまで */

/* パンくず */
.breadcrumb ul{
width:1200px;
font-size:11px;
display:flex;
margin:0 auto 10px;
}
.breadcrumb ul li:not(:last-child)::after{
content:">";
margin:0 3px;
}
@media screen and (max-width: 640px) {
.breadcrumb ul{
width:100%;
padding:0 10px;
margin-bottom:1rem;
}
}

/* カバー */
.cover{
height:800px;
background:url(/img/top/bg_top.png) center top no-repeat;
background-size:cover;
}
@media screen and (max-width: 640px) {
.cover{
height:auto;
width:100%;
aspect-ratio:3 / 4;
background:url(/img/top/bg_top_sp.png) center top no-repeat;
background-size:cover;
margin-top:-1rem;
}
}