@charset 'utf-8';

/*共通設定*/

/*コンテンツ*/
body {
    background-image: url(background_navigation.png);
    background-size: 100%;
    background-repeat: no-repeat; /* 背景の繰り返し設定。 */
    background-position: 50% 0; /* x yの順番で設定。 */
    margin: 0;
}

footer {
    margin-top: 60px;
}

section {
    font-family: natumemozi;
    margin-top: 8vw;
}

article {
    width: 95%;
    max-width: 1600px;
    margin: 0 auto 0 auto;
    padding-bottom: 10px;
}

h1 {
    font-size: 80px;
    color: darkblue;
    padding-left: 60px;
}

h2 {
    font-size: 36px;
    padding-left: 60px;
    margin-top: 50px;
    margin-bottom: 50px;
}

p {
    font-size: 24px;
    line-height: 1.4;
    padding-left: 1rem;
    margin: 5px;
}

iframe {
    float: left;
    margin: 0 40px 0 40px;
}

#link:hover { /*画像にリンクを乗せる設定において、カーソルを乗せたときの変化について。*/
    opacity: 0.8;
}

p:last-child {
    margin-bottom: 50px;
}

#tyuusyaku {
    overflow: hidden;
}




/*ナビゲーションバー*/
nav {
    background: none;
    margin-top: 5px;
}

nav ul {
    overflow: hidden; /*フロート解除の宣言。nav liでフロートを宣言しているため、それらの親要素であるnav ulにてフロート解除の宣言をしている。*/
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 1400px;
}

nav li {
    box-sizing: border-box;
    float: left;
    border-right:1px solid #ffffff;
    width: 14.2%;
}

nav li:last-child {
    border-right: none; /*一番右のナビゲーションは区切り線をなしにする。*/
}

nav li a {
    display: block;
    padding: 20px 0;
    width: 100%;
    text-decoration: none;
    text-align: center;
    font-size: 14px;
    color: #ffffff;
}

nav a:hover {
    background-color: rgba(255, 255, 255, 0.15)
}


/*緒設定*/
@font-face { /*なつめもじ(フォント)の設定*/
    font-family: 'natumemozi';
    src: url('natumemozi.ttf')
}

/*---------------------------------------------------------------------------------*/

/*index.html*/
#index {
    background-image: url(background_index.png);
    background-size: 100%; /* 引数に設定されているvwの値は、ウィンドウの何%の大きさで表示されるように設定するかの値。Viewport Widthの略。 */
    background-repeat: no-repeat; /* 背景の繰り返し設定。 */
    background-position: 50% 0; /* x yの順番で設定。 */
}

#index section {
}

#news {
    float: left;
    width: 70vw;
    height: 150vw;
    margin: 50vw 0 100px 0;
    padding-top: 20px;
}

#news h1 {
    padding-left: 50px;
    color: darkblue;
    margin-bottom: 50px;
}

#news article {
    display: block;
    width: 100%;
    padding-left: 10px;
    text-align: left;
    font-size: 24px;
    color: #000000;
    border-bottom: 1px solid #000000;
}

#news p {
    padding-left: 40px;
}

#twitter {
    float: left;
    width: 25vw;
    height: 150vh;
    margin: 55vw 0 100px 0;
}

/*----------------------------------------------------------------------------------*/

/*introduce.html*/
.circle_introduce {
    background-image: url(background_circle_introduce.png);
    background-color: ivory;
    background-position: right center;
    background-repeat: no-repeat;
    padding: 80px 0 80px 0;
}

.circle_introduce p {
    font-size: 36px;
}

.molmimikaki_introduce a {
    float: left;
    width: 250px;
    margin: 0 60px 0 40px;
}

.molmimikaki_introduce img {
    border-radius: 125px;
}

.twitter {
    margin-top: 60px;
}

.member {
    margin-bottom: 80px;
}

.member h2 {
    margin-bottom: 20px;
}

.member img {
    float: left;
    width: 250px;
    margin: 0 60px 0 40px;
}

/*-----------------------------------------------------------------------------------*/

/*molmimikaki.html*/
.mol article {
    overflow: hidden;
    margin-bottom: 50px;
}

.mol img {
    float: left;
    width: 250px;
    border-radius: 125px;
    margin: 0 60px 0 40px;
}

/*-----------------------------------------------------------------------------------*/

/*mimikakivoice.html、mimikakion.htmlおよびmolosusume.html*/
.mimikaki article {
    overflow: hidden;
    border-bottom: 1px solid #000000;
    padding-bottom: 20px;
}

.mimikaki h2 { /*基本設定は"h2"*/
    width: 100%;
    margin-bottom: 20px;
}

.mimikaki a {
    font-size: 48px;
    background: linear-gradient(transparent 70%, #ee82ee 70%, #ee82ee 100%);
}

.time {
    height: 30px;
    padding: 0 10px 0 10px;
    border-radius: 10px;
    background-color: #ffdead;
}

.attribute {

}

.name a {
    font-size: 24px;
    background: linear-gradient(transparent 70%, #ee82ee 70%, #ee82ee 100%);
}

#osusume p {
    font-size: 24px;
}

/*-----------------------------------------------------------------------------------*/

/*nozorahakomanga.html*/
#nozorahakomanga section {
    margin-right: 40px;
    margin-left: 40px;
}

#nozorahakomanga article {
    float: left;
    width: 22%;
}

#nozorahakomanga h2 {
    text-align: center;
}

/*----------------------------------------------------------------------------------*/

/*contact.html*/
input, textarea {
    display: block; /* 文字と入力欄を上下に配置する。*/
}

input {
    width: 500px;
}

input[type="submit"] {
    width: 200px;
    background-color: #ffaa00;
    background-image: -webkit-gradient(linear,left top, left bottom, from(#ffe7b8), to(#ffaa00)); /* グラデーションの設定。 */
    background-image: -webkit-linear-gradient(top, #ffe7b8 0%, #ffaa00 100%);
    background-image: linear-gradient(to bottom, #ffe7b8 0%, #ffaa00 100%);
    border: solid 1px #aaaaaa;
    border-radius: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
}

textarea {
    width: 80%;
    max-width: 1400px;
    height: 15vw;
    max-height: 300px;
}

#transmitted {
    margin-top: 100px;
    text-align: center;
}

#transmitted h1 {
    font-size: 32px;
}

/*----------------------------------------------------------------------------------*/

/* イベント参加用の設定 */
#event {
    overflow: hidden;
}

#event h2 {
    margin-bottom: 20px;
}

#event article {
    float:left;
    box-sizing: border-box;
}

#goods_thumbnail { /* ジャケットの表示ID */
    width: 30%;
    margin-bottom: 80px;
}

#goods_thumbnail img {
    width: 25vw;
    max-width: 600px;
    margin: 0 60px 0 40px;
}

#goods_introduce { /* 商品紹介の表示ID */
    width: 70%;
    margin-bottom: 80px;
}



/*----------------------------------------------------------------------------------*/




/*----------------------------------------------------------------------------------*/

/*ポップアップの設定*/
.pop-box {
    width: 100%;
    margin: auto;
}

/* ポップアップウインドウの設定 */
.popup {
    background-color: rgba(0, 0, 0, 0.8);
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, .8);
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 1vw auto auto auto;
    width: 40vw;
    overflow-y: scroll;
}
/* チェックボックスの初期設定 */
#popup-on {
    display: none;
    }

/* チェックされたらポップアップウインドウを開く */
#popup-on:checked + .popup {
    display: block;
    margin: auto;
}

/* 閉じるアイコン（右上） */
.icon-close {
    background: #000;
    color: #fff;
    font-size: 30px;
    padding: 0 10px;
    position: absolute;
    right: 0;
}

/* 開くボタン */
.btn-open {
    background: #fff;
    color: #fff;
    padding-right: 10px;
    padding-left: 10px;
    cursor: pointer;
    width: 22%;
    text-align: center;
}

/* ポップアップの内容 */
.popup-content {
    margin: 40px auto 40px auto;
    width: 90%;
}

.layer-img {
    width: 22vw;
}

.pop-img {
    width: 30vw;
}

/*----------------------------------------------------------------------------------*/



/*----------------------------------------------------------------------------------*/

/* earcomiket2020winter.html */
.winter2020_introduce {
    background-image: url(aircomiket2020winter.png);
    background-color: rgba(30, 144,255, 0.14);
    background-position: right bottom;
    background-repeat: no-repeat;
    background-size: 35%;
    padding: 80px 0 80px 0;
}

.winter2020_intorduce p {
    font-size: 36px;
}