@charset "utf-8";

body{
background: #1e003c
}

div.container{
width: 100%;
max-width: 700px;
padding-top: 90px;
margin: 0px auto
}

/*--------------------nav--------------------*/

nav.nav{
width: 100%;
max-width: 700px;
position: fixed;
top:0px;
left:50%;
transform: translateX(-50%);
background: #000;
z-index: 10;
padding: 5px 0px
}

ul.nav{
width: 90%;
margin: 0px auto;
display: flex;
align-items: center;
justify-content: space-between
}

li.nav_left{
width: 35%
}

li.nav_right{
width: 65%;
display: flex;
align-items: center;
justify-content: right
}

a.nav_icon{
width: 20px;
margin-right: 20px
}

/*--------------------header--------------------*/

header.header{
width: 90%;
margin: 0px auto 30px auto
}

p.header_image{
background: #fff;
border-radius: 15px;
margin-bottom: 20px
}

ul.news{
width: 100%;
display: table;
table-layout: fixed
}

ul.news li{
display: table-cell;
vertical-align: middle
}

li.news_title{
width: 20%;
text-align: center;
background: #000;
padding: 10px 10px;
border:solid 1px #fff;
border-radius: 5px 0px 0px 5px
}

li.news{
width: 80%;
padding-left: 10px;
border-top:solid 1px #fff;
border-right:solid 1px #fff;
border-bottom:solid 1px #fff;;
overflow: hidden;
border-radius: 0px 5px 5px 0px
}

h3.news{
font-size:13px
}

hr.blink{
width: 90%;
margin: 0px auto;
animation: blink linear infinite 2s;
box-shadow: 0 -40px 100px, 0 0 2px, 0 0 1em #ff00ff, 0 0 0.3em #ff00ff, 0 0 0.1em #ff4444, 0 10px 3px #000;
}

h2.section{
font-family: "Figtree", sans-serif;
font-optical-sizing: auto;
font-weight: 700;
font-style: normal;
text-align: center;
font-size:30px;
text-shadow: 0 -40px 100px, 0 0 2px, 0 0 1em #ff00ff, 0 0 0.3em #ff00ff, 0 0 0.1em #ff4444, 0 10px 3px #000;
margin-bottom: 5px
}

h2.section_small{
align-items: center;
justify-content: center;
font-size:13px;
display: flex;
margin-bottom: 30px
}

h2.section_small:before,h2.section_small:after{
content:"";
width: 40px;
margin: 0px 5px;
height: 1px;
background: #fff
}

span.blink{
animation: blink linear infinite 2s;
}

section#about{
padding: 30px 0px;
background: #000
}

article.about{
width: 80%;
margin: 0px auto;
}

p.about_image{
aspect-ratio: 16 / 9;
background: #fff;
margin-bottom: 20px;
border-radius: 12px;
overflow: hidden
}

h5.txt{
font-size:12px;
line-height: 1.6;
text-align: justify
}

/*--------------------mc--------------------*/

section#mc{
padding: 30px 0px;
}

div.mc{
width: 90%;
margin: 0px auto;
display: flex;
align-items: start;
justify-content: space-between;
gap: 20px
}

div.mc > * {
width: calc(50% - 10px);
}

p.mc_image{
border-radius: 15px;
overflow: hidden
}

h3.mc{
font-size:12px;
text-align: center
}

h2.mc{
font-size:22px;
text-align: center
}

h5.mc{
font-size:11px;
line-height: 1.4;
text-align: justify
}

h4.mc{
font-size:13px;
text-align: center;
margin-bottom: 15px
}

/*--------------------cast--------------------*/

div.cast{
width: 90%;
margin: 0px auto;
display: flex;
align-items: start;
gap:4%;
flex-wrap: wrap
}

article.cast{
width: 48%;
text-align: center;
margin-bottom: 15px
}

p.cast_image{
aspect-ratio: 4/4.5;
border-radius: 10px;
overflow: hidden;
margin-bottom: 10px
}

p.cast_image img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
}

h3.cast_name{
margin-bottom: 10px
}

h3.cast_name small{
display: block;
font-weight: 500
}


div.cast_sns{
display: flex;
align-items: center;
flex-wrap: nowrap;
justify-content: center;
gap: 15px;
margin-bottom: 15px
}

a.cast_sns{
width: 18px
}

div.cast_style{
display: flex;
align-items: center;
flex-wrap: nowrap;
justify-content: center;
gap: 5px;
margin-bottom: 10px
}

h4.cast_style{
display: flex;
font-size:12px;
align-items: center;
width: max-content;
color: #dcdcdc;
border:solid 1px #dcdcdc;
border-radius: 6px;
padding: 2px 6px
}



/*--------------------contents--------------------*/

section#contents{
padding: 30px 0px;
}

h3.contents{
text-align: center;
font-size:24px;
margin-bottom: 20px
}

h5.contents{
width: 80%;
margin: 0px auto 20px auto
}

div.contents{
width: 80%;
margin: 0px auto;
padding: 20px;
background: #fff;
border-radius: 15px
}

a.contents_banner{
width: 90%;
margin: 0px auto 30px auto;
display: block;
aspect-ratio: 16 / 9;
border-radius: 15px;
overflow: hidden
}

p.contents{
text-align: center;
letter-spacing: 2px;
color: #1e003c;
font-size:24px;
margin-bottom: 10px
}

h6.contents{
color: #1e003c;
font-size:13px;
line-height: 1.6;
text-align: justify
}

/*--------------------footer--------------------*/

footer.footer{
background: #000;
padding: 30px 0px 30px 0px;
text-align-last: center
}

img.footer_logo{
width: 140px;
margin: 0px auto 20px auto;
}

div.footer_link{
display: flex;
align-items: start;
flex-wrap: wrap;
border-top: solid 1px #666;
margin-bottom: 30px
}

a.footer_link{
width: 50%;
height: 50px;
line-height:50px;
font-weight: 500;
border-bottom: solid 1px #666;
border-right: solid 1px #666;
color: #fff;
}

a.footer_link:nth-of-type(2n){
border-right: none;
}

a.abema_link{
width: 40%;
display: block;
max-width: 260px;
position: fixed;
top:80px;
right: 3%;
}


@media screen and (min-width: 700px) {
a.abema_link {
top:120px;
right: calc(50% - 350px + 20px); 
}
}

img.abema_logo{
width: 40px;
margin-right: 5px
}

img.arrow{
width: 22px;
margin-left: 10px
}


header.contents_header{

}


/*--------------------breadcrumb--------------------*/

ol{
margin-bottom: 30px;
padding: 20px 0px 20px 3%;
border-bottom: solid 1px #333
}

ol li{
display:inline-block;
list-style: none;
vertical-align: middle;
}

ol li:after{
content: '»';
margin: 0px 5px 0px 5px;
color:#fff
}

ol li:last-child:after{
content: '';
display: none;
}

ol li a {
text-decoration: none;
color: #fff;

font-weight: 200
}

ol li a span{
font-size:12px;
font-weight: 400
}

ol li:first-child a{
background: url(../img/icon/home.png) no-repeat left center;
background-size: 12px;
padding-left: 20px;
}

div.privacy{
width: 90%;
margin: 0px auto;
height: 60vh;
overflow-y: scroll;
border:solid 1px #666;
padding: 15px;
border-radius: 10px;
margin-bottom: 20px;
}

article.contents{
margin-bottom: 30px;
}

h3.contents{
font-size:14px;
font-weight: 600;
margin-bottom: 30px;
}

h4.contents{
font-size: 12px;
font-weight: 400;
line-height: 2.0
}

div.more{
margin-bottom: 30px
}

a.more{
width: 70%;
background: #fff url(../img/icon/arrow.png) no-repeat center right 20px;
background-size: 18px;
display: block;
text-align: center;
margin: 0px auto;
border-radius: 5px;
color: #000;
padding: 15px 0px 15px 0px
}


div.contact{
width: 90%;
margin: 0px auto
}

h5.contact{
font-size: 14px;
margin-bottom: 5px;
letter-spacing: 0.1em
}

label.input{
width: 100%;
height: 50px;
border-radius: 5px;
display: block;
background: #fff;
overflow: hidden;
border:solid 1px #dcdcdc;
margin-bottom: 15px;
color: #000
}

input[type="text"],input[type="email"]{
width: 100%;
height: 100%;
border:none;
background: transparent;
font-size:14px;
padding-left: 10px
}

select{
width: 100%;
height: 100%;
appearance: none;
-webkit-appearance: none; /* Safari用 */
-moz-appearance: none;
border:none;
background: transparent;
font-size:14px;
padding-left: 10px;
}

.select-wrapper {
position: relative;
display: inline-block;
width: 200px;
}

.select-wrapper::after {
content: "▼";
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
font-size: 12px;
pointer-events: none; /* クリック時に矢印が邪魔しないように */
color: #555;
}

label.short{
width: 54%
}

label.textarea{
width: 100%;
height: 150px;
border-radius: 5px;
display: block;
background: #fff;
overflow: hidden;
border:solid 1px #dcdcdc;
margin-bottom: 15px;
color: #000;
}

textarea {
all: unset;
font-weight: 500;
width: 100%;
height: 120px;
padding: 10px;
box-sizing: border-box;
font-size: 14px;
line-height: 1.5;
background: transparent;
resize: vertical; 
}

.submit-button {
width: 78%;
display: block;
letter-spacing: 0.1em;
appearance: none;
margin: 0px auto 30px auto;
-webkit-appearance: none;
border: none;
background: #999;
color: #fff;
padding: 15px 0px;
font-size: 14px;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.2s;
font-weight: 600
}

.submit_button {
width: 78%;
display: block;
letter-spacing: 0.1em;
appearance: none;
margin: 0px auto 30px auto;
-webkit-appearance: none;
border: none;
background: #fff;
color: #000;
padding: 15px 0px;
font-size: 14px;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.2s;
font-weight: 600
}

.submit-button:hover {
background-color: #0056b3;
}

h2.contact_small{
font-size:13px;
text-align: center;
margin-bottom: 30px
}

h5.section{
font-size:14px;
text-align: center;
line-height: 2;
margin-bottom: 30px
}