@charset "UTF-8";
@import url("grid.css");

:root { /* 色変更される場合は、#以降のカラーコードを変更してください IE非対応 */
--base-color: #000000;
--link-color: #F24841;
--linkhover-color: #29acd8;
--back-color: #FFFEDF;
--border-color: #F24841;
--white-color: #fff;
--nav-color: rgb(242,72,65,1);
--back-color2: #29acd8;
--back-color3: #FFF324;
--back-color4: #fff;
--back-color5: #fff;

/*ohara
-------------------------------------*/
.responsive {
width: 100%;
aspect-ratio: 16/9;
}

 

.box12 {
padding: 0.5em ;
margin: 0 40em ;
color: #F24841;/*文字色*/
background: #FFF;
border: solid 3px #fff;/*線*/
border-radius: 10px;/*角の丸み*/
}
.box12 p {
margin: 0; 
padding: 0;
}
}
.box13 {
padding: 0.5em 1em;
margin: 1em 0;
color: #000000;
background: #fff;
border-bottom: solid 6px #FFF;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
border-radius: 9px;
}
.box13 p {
margin: 0; 
padding: 0;
}


.btn,
a.btn,
button.btn {
font-size: 1.6rem;
font-weight: 700;
line-height: 1.5;
position: relative;
display: inline-block;
padding: 1rem 4rem;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-transition: all 0.3s;
transition: all 0.3s;
text-align: center;
vertical-align: middle;
text-decoration: none;
letter-spacing: 0.1em;
color: #FFF324;
border-radius: 0.5rem;
}

 

.btn--orange,
a.btn--orange {
color: #fff;
background-color: #F24841;
}
.btn--orange:hover,
a.btn--orange:hover {
color: #fff;
background: #F24841;
}

a.btn--radius {
border-radius: 100vh;
}

h8 {
position: relative;
padding: 1rem 2rem;
text-align: center;
font-weight: bold;
color: #F24841;
border-radius: 0 10px 10px 10px;
background: #fff;
}

h8:before {
font-family: 'M PLUS Rounded 1c';/* Googleフォント */
font-weight: bold;
font-size: 15px;
font-size: 1.5rem;
position: absolute;
top: -24px;
left: 0;
height: 24px;
padding: 0 1em;
content: '\f0a4 TV SHOW ';
color: #fff;
border-radius: 10px 10px 0 0;
background: #F24841;

}
h9 {
position: relative;
padding: 1rem 2rem;
text-align: center;
font-weight: bold;
color: #F24841;
border-radius: 0 10px 10px 10px;
background: #fff;
}

h9:before {
font-family: 'M PLUS Rounded 1c';/* Googleフォント */
font-weight: bold;
font-size: 15px;
font-size: 1.5rem;
position: absolute;
top: -24px;
left: 0;
height: 24px;
padding: 0 1em;
content: '\f0a4 GOURMET';
color: #fff;
border-radius: 10px 10px 0 0;
background: #F24841;

}

h10 {
position: relative;
padding: 1rem 2rem;
text-align: center;
font-weight: bold;
color: #F24841;
border-radius: 0 10px 10px 10px;
background: #fff;
}

h10:before {
font-family: 'M PLUS Rounded 1c';/* Googleフォント */
font-weight: bold;
font-size: 15px;
font-size: 1.5rem;
position: absolute;
top: -24px;
left: 0;
height: 24px;
padding: 0 1em;
content: '\f0a4 ELLENA EVENT';
color: #fff;
border-radius: 10px 10px 0 0;
background: #F24841;
}

h11 {
background: #F24841; /*背景色*/
padding: 0.5em;/*文字周りの余白*/
color: white;/*文字を白に*/
border-radius: 0.5em;/*角の丸み*/
}

h12 {
padding: 1rem 3rem;
-webkit-transform: skew(-15deg);
transform: skew(-15deg);
color: #fff;
background-image: -webkit-gradient(linear, left top, right top, from(#209cff), to(#68e0cf));
background-image: -webkit-linear-gradient(left, #209cff 0%, #68e0cf 100%);
background-image: linear-gradient(to right, #209cff 0%, #68e0cf 100%);
}

}
.rad {
border-radius:20px;
-webkit-border-radius:20px;
-moz-border-radius:20px;
}
.box {
width:300px;
height:300px;
background-color:#F0F6F6;;
color:Black;
text-align:center;
}

}
.rad {
border-radius:20px;
-webkit-border-radius:20px;
-moz-border-radius:20px;
}
.box2 {
width:300px;
height:210px;
background-color:#F0F6F6;;
color:Black;
text-align:center;
}

/* ohara */
}
body {
background: var(--white-color); 
color: var(--base-color);
font-family: "M PLUS Rounded 1c"; /* Googleフォント */
}
img {
max-width:100%;
height: auto;/*高さ自動*/
}
a {
display:block;
color: var(--link-color);
text-decoration-line: none;
}
a:hover { 
color: var(--linkhover-color);
}
h1 {
text-align:center;
color: white
}
h2 {
margin-bottom: 2rem;
padding-bottom: 2rem;
text-align: center;display: flex;
align-items: center;
justify-content: center;

}
h2::before, h2::after {
content:"";
width:80px;
height:1px;
margin:0 10px;
background-color: var(--border-color);
}

h3.underline {
border-bottom: 1px solid var(--border-color);
padding-bottom: 0.5rem;

}
h4 {
border-left: 4px solid var(--link-color);
padding-left: 1rem;

}
section {
padding: 3rem 0;
}
.font_test {
font-size: 20px; /* 文字サイズ指定 */
color: #fff; /* 文字色指定 */
}
.font_test2 {
font-size: 17px; /* 文字サイズ指定 */
color: #FFF324; /* 文字色指定 */
}
}
.font_test3 {
font-size: 17px; /* 文字サイズ指定 */
color: #000000; /* 文字色指定 */
}

/*ヘッダー
-------------------------------------*/
/*スマホ用メニュー
-------------------------------------*/ 
.spnavi {
display: none;
}
nav ul {
display: flex;
flex-direction: row;
justify-content: space-around;
list-style: none;
margin: 10px 0 0 0;
}
nav li {
flex: 1 0 auto;
margin-bottom: 0;
}
nav li a {
text-decoration: none;
text-align: center;
width: 100%;
color: var(--white-color);
}
nav a:hover {
color: var(--back-color); 
}
nav a {
padding: 0.8em;
}

@media screen and (min-width: 768px){
/* PC時はMENUボタンを非表示 */
#open,#close {
display: none !important;
}
#navi {
display: block !important;
}
}

@media screen and (max-width: 768px){
.header {
flex-direction: column;
margin-bottom: 10px;
}
.header #open,#close {
position: absolute;
top: 12px;
right: 12px;
}
nav ul {
flex-direction: column;
}
.header li {
padding-top: 0;
}
/* スマホ時はMENUボタンを表示 */
#open {
display: block;
background: url(../img/button.png);
background-repeat: no-repeat;
background-size: contain;
width: 50px;
height: 50px;
border: none;
position: absolute;
top: 12px;
right: 12px;
}
#close {
display: block;
background: url(../img/button2.png);
background-repeat: no-repeat;
background-size: contain;
width: 50px;
height: 50px;
border: none;
position: absolute;
top: 12px;
right: 12px;
}
/* スマホ時はメニューを非表示 */
#navi {
display: none;
}
.navblock {
margin-top: -10px;
}
}

/* サイトタイトル
-------------------------------------*/
.head {
background: url("../img/mainimg.jpg");/* 背景画像 */
background-repeat: no-repeat; 
background-position: center center;
height: 100vh;
}
.head h1 {
height: 600px;
line-height: 2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
color: var(--white-color);
text-shadow: 1px 2px 3px var(--base-color); 
margin: 0;
}
.navblock {
background: var(--nav-color);
}
.button {
border-radius: 30px;
height: 50px;
line-height: 48px;
color: var(--white-color);
}
.button:hover {
border: 1px solid var(--linkhover-color);
color: var(--linkhover-color);
}

/* キャッチコピー
-------------------------------------*/
.catchback {
background: url('../img/catchback.png');/* 背景画像 */
background-size: contain;

}
.catch {
background-color: var(--white-color);
margin: 5rem auto;
padding: 3rem 0;
max-width: 700px;
border: 1px solid var(--base-color);
text-align: center;
line-height: 1.7;
}
.center {
text-align: center;
margin-bottom: 4rem;
}
/* ニュース
-------------------------------------*/
.back-color {
background-color: var(--back-color);
}
.back-color2 {
background-color: var(--back-color2);
}
.back-color3 {
background-color: var(--back-color3);
}
.back-color4 {
background-color: var(--back-color4);
}
.back-color5 {
background-color: var(--back-color5);
}
.news {
margin: 0 auto;
max-width: 980px;
padding: 2rem;
}
.news-list{
list-style: none;
}
.news-list .item, .item p {
margin-bottom: 0;
}
.news-list .item a{
display: flex;
flex-wrap: wrap;
color: var(--base-color);
border-bottom: 1px solid var(--border-color);
padding: 1.5rem 0;
}
.news-list .item:first-child a{
border-top: 1px solid var(--border-color);
}
.news-list .item .date{
min-width: 120px;
color: var(--link-color);
}
.news-list .item a:hover .title{
color: var(--link-color);
}
/* メニュー
-------------------------------------*/
.menuback {
background: url('../img/menuback.jpg');/* 背景画像 */
background-repeat: no-repeat;
padding: 8rem 0;
margin-bottom: 3rem;
}
.menuback h2, .contactback h2 {
text-shadow: 1px 2px 3px var(--white-color); 
}
/* マウスホバーで画像を拡大
-------------------------------------*/
.hoverbox{
max-height: 800px;
overflow: hidden;
}
.hoverbox-img{
transition-duration: 0.3s;
}
.hoverbox-img:hover{
transform: scale(1.3);
transition-duration: 0.3s;
}
/* お問い合わせ
-------------------------------------*/
.contactback {
background: url('../img/contactback.jpg');/* 背景画像 */
background-repeat: no-repeat;
background-position: center center;
padding: 8rem 0;
}
/* ステージ
-------------------------------------*/
.stage {
background: url('../img/推し背景.png');/* 背景画像 */
background-repeat: no-repeat;
background-position: center center;
padding: 8rem 0;
}
.stage2 {
background: url('../img/kome.png');/* 背景画像 */
background-repeat: no-repeat;
background-position: center center;
padding: 8rem 0;
}
/* Googleマップ
-------------------------------------*/
.gmap {
margin: 3rem 0;
}
/*電話
-------------------------------------*/
a.tel {
display: inline-block;
}
@media screen and (min-width: 768px){
a[href*="tel:"] { /* PC時は電話番号無効 */
pointer-events: none;
cursor: default;
}
}
/*お問い合わせ
-------------------------------------*/
h3.stripe {
position: relative;
padding: 0.3em;
}
h3.stripe:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 3px;
background: repeating-linear-gradient(-45deg, var(--link-color), var(--link-color) 2px, var(--back-color) 2px, var(--back-color) 5px);
}
.button,input[type="submit"] {
color: var(--white-color);
background-color: var(--link-color);
border: 1px solid var(--link-color);
margin: 1rem;
}
.button:hover,input[type="submit"]:hover {
color: var(--white-color);
background-color: var(--linkhover-color);
border: 1px solid var(--linkhover-color);
}
.table {
margin: 4rem 0;
}
.table th {
width: 150px;
}
input[type="email"], input[type="number"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"], textarea, select {
border-radius: 10px;
}
input[type="email"]:focus,input[type="number"]:focus,input[type="search"]:focus,
input[type="text"]:focus,input[type="tel"]:focus,
input[type="url"]:focus,input[type="password"]:focus,textarea:focus,
select:focus {
border: 1px solid var(--link-color);
}
/* SNS
-------------------------------------*/
.snsicon {
display: flex;
flex-direction: row;
justify-content: center;
}
.snsicon li {
width: 60px;
list-style-type: none;
margin-top: 2rem;
padding: 0 1rem;
}

/*フッター
-------------------------------------*/
footer {
background-color: var(--white-color); 
background: url('../img/footerback.png');/* 背景画像 */
background-size: center;
}
/* フッターメニュー
-------------------------------------*/
.footermenu {
display: flex;
flex-direction: row;
justify-content: center;
list-style-type: none;
margin-top: 2rem;
}
.footermenu li {
margin-bottom: 0;
padding: 1rem;
}
.footermenu a {
color: var(--base-color);
}
/*コピーライト
-------------------------------------*/
.copyright {
text-align: center;
padding: 1rem 0;
}
.copyright a {
color: var(--base-color);
text-decoration: none;
}
/*ページトップへ戻るボタン
-------------------------------------*/
#pagetop {
position: fixed;
bottom: 25px;
right: 25px;
display: block;
width: 40px;
height: 40px;
box-sizing: border-box;
background: var(--link-color);
border: 1px solid var(--link-color);
border-radius: 50%;
padding-top: 30px;
text-align: center;
text-decoration: none;
opacity: 0.8;
}
#pagetop::after{
content: "";
display: block;
border-top: 2px solid var(--white-color);
border-right: 2px solid var(--white-color);
width: 25%;
height: 25%;
top: 45%;
left: 0;
right: 0;
margin: auto;
position: absolute;
transform: rotate(-45deg);
}
#pagetop:hover{
opacity: 0.5;
}
/* 下層ページヘッダー
-------------------------------------*/
.subhead {
height: 70px;
background: url('../img/subpageback.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
margin-bottom: 2rem;
}
.subhead h1 {
height: 70px;
line-height: 2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
color: var(--white-color);
text-shadow: 1px 2px 3px var(--base-color); 
margin: 0;
}
/*パンくずリスト
-----------------------------------*/
.breadcrumb {
margin: 0 0 1em 0;
padding: 0; 
}
.breadcrumb li {
list-style-type: none;
}
.breadcrumb li a {
display: inline-block;
color: var(--link-color);
}

/* 幅768px以下の表示
-------------------------------------*/
@media screen and (max-width: 768px){
h2,h3 {
font-size: 2.2rem;
}
h2::before, h2::after {
width:30px;
}
/* サイトタイトル
-------------------------------------*/
.head {
height: 100%;
}
.head h1 {
height: 500px;
}
/*キャッチコピー
-------------------------------------*/
.catch {
margin: 3rem 2rem;
max-width: 100%;
}
.catch h2 {
margin-bottom: 1rem;
}
/*ニュース
-------------------------------------*/
.news-list .item .title{
margin-top: 1em;
}
/*お問い合わせ
-------------------------------------*/
.table th {
width: 100%;
display: block;
} 
.table td {
display: block;
}
/* フッターメニュー
-------------------------------------*/
.footermenu {
flex-flow: row wrap;
}
.footermenu li {
text-align: center;
}
}