/**********ハンバーガーメニュー**********/
.btn-burger {
    cursor: pointer;
    display: block;
    width: 60px;
    height: 60px;
    position: fixed;
    top: 5px;
    right: 10px;
}

/*ハンバーガーアイコンを作る三本線*/
.icon, .icon:before, .icon:after {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    height: 2px; /*線の太さ*/
    width: 30px; /*線の長さ*/
    background-color: #707070;
    border-radius: 2px;
    display: block;
    content: '';
    cursor: pointer;
    margin: auto;
}

/*三本線の間隔*/
.icon:before {
  top: 20px;
}
.icon:after {
  top: -20px;
}

/*チェックボックス非表示*/
.nav-toggle {
    display: none;
}

/*ハンバーガーメニューのアイコンをクリックしたら*/
.nav-toggle:checked ~ .btn-burger .icon {
    background: transparent;
}
.nav-toggle:checked ~ .btn-burger .icon:before {
    transform: rotate(-45deg);
    top: 0;
}
.nav-toggle:checked ~ .btn-burger .icon:after {
    transform: rotate(45deg);
    top: 0;
}

.icon,
.icon:before,
.icon:after {
    transition: all .5s;
}

/**********ハンバーガーアイコンをクリックしたら現れる中身**********/
.nav-list {
    list-style: none;
    display: none;
    margin-top: 40px;
    padding-left: 20px;
    background-color: rgba(214,214,214,0.75);/*R,G,B,不透明度0〜1.0*/
}

.nav-list li {
    margin: 10px;
    padding: 10px;
    border-bottom: solid 1px #FFFFFF;
    list-style: none;
}

.nav-list a {
    padding-top: 10px;
    font-size: 1.25em;
    display: block;
    text-decoration: none;
    color: #707070;
}

.nav-toggle:checked ~ .nav .nav-list {
    display: block;
}

/*********** タブ *********** タブ *********** タブ ************/
.tab-control-box{
    min-height: auto;
    padding-top: 0px;
    padding-left: 10px;
    border-bottom: #707070 1px solid;   /* タブ全体の下線 色と太さ */
}
#tab-control p {
    display: inline-block;  /* インラインブロック化 */
    padding: 5px;    /* 内側の余白 */
    font-size: 1.2em;
    color: #707070;    /* 文字色：灰色 */
    font-weight: 600;   /* 太字 */
    border-bottom: #FF0033 3px solid;   /* タブの下線 色と太さ */
    width: auto;   /* タブの下線 長さを文字に合わせる */
}

#tab-control a {
    display: inline-block;    /* インラインブロック化 */
    padding: 5px;    /* 内側の余白 */
    font-size: 0.9em;
    font-weight: 200;    /* 細字 */
    text-decoration : none;    /* リンクの下線の非表示 */
}

/* --------------------------------------------------
  ここからタブレット用* 幅410px以上のスタイル指定 ここから
-------------------------------------------------- */


/* --------------------------------------------------
  幅780px以上のスタイル指定 ここから
-------------------------------------------------- */
@media screen and (min-width: 780px) {
body {
    max-width: 1024px;
}

/* ハンバーガーボタン */
.btn-burger {
    display: none;  /*780px以上では使用しない */
}
.nav-toggle:checked ~ .nav .nav-list {
    display: none;
}

/************ メインナビゲーション ************/
.nav {
    position: absolute;
    margin-top: 0px;
    right: 0px;
    
}
.nav-list {
    display: flex;
    font-size: 1em;
    font-weight: 400;
    height: 20px;
    padding: 0px;
    align-items:center;  /***縦位置***/
    background-color: #ffffff;
    
}
.nav-list li {
    margin: 0px;
    padding: 0px 20px;
    list-style: none;
    border-bottom: none;
}

.nav-list a {
    color: #707070;
}
.nav-list a:visited {
    color : #707070;
}
.nav-list a:hover {
    cursor: pointer;
    color : #FF0033;
}    

.index a {
    color: #707070;
    font-weight: 800;
    border-bottom: #FF0033 3px solid;   /* タブの下線 色と太さ */
    width: auto;   /* タブの下線 長さを文字に合わせる */
}

.exhibitions a {
    color: #707070;
    font-weight: 800;
    border-bottom: #FF0033 3px solid;   /* タブの下線 色と太さ */
    width: auto;   /* タブの下線 長さを文字に合わせる */
}

.works a {
    color: #707070;
    font-weight: 800;
    border-bottom: #FF0033 3px solid;   /* タブの下線 色と太さ */
    width: auto;   /* タブの下線 長さを文字に合わせる */
}

.profile a {
    color: #707070;
    font-weight: 800;
    border-bottom: #FF0033 3px solid;   /* タブの下線 色と太さ */
    width: auto;   /* タブの下線 長さを文字に合わせる */
}

.links a {
    color: #707070;
    font-weight: 800;
    border-bottom: #FF0033 3px solid;   /* タブの下線 色と太さ */
    width: auto;   /* タブの下線 長さを文字に合わせる */
}
/************ タブ ************/
.tab-control-box{
    padding-top: 20px;
    padding-left: 10px;
}
#tab-control p {
    font-size: 1.2em;
    padding: 5px;
}
#tab-control a {
    padding: 5px;
    font-size: 1.2em;
}
}