@charset "UTF-8"
/* 共通部分
--------------------- */
body {
    background-color: #fffeee;
    font-family: 'Meiryo';
}
img {max-width: 100%}

h1 {font-size: 2rem;
    font-family: "Meiryo";
    font-weight: 540;
    }
h2 {color: #5001ce;
    font-weight: 550;}
h3 {font-weight: 540;}
h4 {font-family: 'YuMincho', 'Times New Roman', Times, serif;
    font-size: 18px;}
h5 {font-family: 'Times New Roman', Times, serif;}

p  {font-family: 'YuMincho';
    font-size: 16px;}

li {font-family: 'Meiryo';}

.top {display: flex;
    justify-content: space-around;
    font-size: smaller;
    font-family: 'Yumincho';
    font-weight: bold;
    text-align: center;
    color: black;
    font-weight: 600;
    padding-top: 10px;
}

/* 表
--------------------- */
table{border-collapse: collapse;
    text-align: center;
    font-family: 'Meiryo';
    font-size: 0.9rem;
    }

.subtitulo  {width: 320px;}

.list-style-none li{
    list-style:none;
   }

/* 背景画像 */
.bg_test    {    background-size: cover;
    background-position: center;
    background-blend-mode: screen;
    height: 200px;
    width: 100%;
}

#home .bg_test {
    background-image: url(images/America_noviter_delineata.jpeg);
}
#equipodocente .bg_test {
    background-image: url(images/Vicunas_al_pie_del_Chimborazo.jpg);
}
#equipodocente_detalle .bg_test {
    background-image: url(images/Casa_de_Manuel_de_Falla_en_Granada.jpeg);
}
#equipodocente_obras .bg_test {
    background-image: url(images/Dore_Don_Quijote.jpg);
}
#clases .bg_test {
    background-image: url(images/CIMG1937.JPG);    
}
#clases_esp_hiyoshi .bg_test {
    background-image: url(images/campus_hiyoshi.jpg);    
}
#clases_esp_mita .bg_test {
    background-image: url(images/campus_mita.jpeg);    
}
#clases_area .bg_test {
    background-image: url(images/P1200068.JPG);
}
#reconocimiento .bg_test {
    background-image: url(images/Madrid_-_Real_Academia_Española_1.jpeg);
}
#autodidactismo .bg_test {
    background-image: url(images/Uyuni.jpeg);
}
#estudiarmas .bg_test {
    background-image: url(images/CIMG1771.JPG);
}
#subcarrera .bg_test {
    background-image: url(images/americainvertida.jpg);
}
#extranjero .bg_test {
    background-image: url(images/UNAM_Ciudad_Universitaria2022.jpeg);
}
#fotos .bg_test{
    background-image: url(images/CIMG1894.JPG);
}
#fotos_profesores .bg_test{
    font-size: larger;
    font-weight: 600;
    text-align: center;
    line-height: 200px;
    color: rgb(48, 45, 107);
}

#fotos_estudiantes .bg_test{
    font-size: larger;
    font-weight: 600;
    text-align: center;
    line-height: 200px;
    color: rgb(48, 45, 107);
}
#enlaces .bg_test{
    background-image: url(images/Madrid_Gran_Via_jpeg.jpeg);
}
#portugues .bg_test{
    background-image: url(images/portugues/yazawa/yazawa363.jpg);
}

/* HEADER
--------------------- */
.page-header{
    background-color: #f32f2f;
}

.logo{width: 125px;}

.wrapper{max-width: 1000px;
    margin: 0 auto;
    padding: 0 2%;

}


/* ドロップダウンメニュー */
    .gnavi__wrap {
        max-width: 1000px;
    }

    .gnavi__lists {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        gap: 1px;
        min-width: max-content;
        z-index: 1;
        margin-left: -40px;
    }
    .gnavi__list {
        height: 50px;
        min-width: auto;
        background-color: #E5F0F8;
        position: relative;
        transition: all .3s;
    }
    .gnavi__list:hover {
        background-color: #0071BB;
    }
    .gnavi__list:not(:first-child)::before {
        content: "";
        width: 1px;
        height: 100%;
        background-color: #fff;
        position: absolute;
        top: 0;
        left: 0;
        transition: all .3s;
    }
    .gnavi__list:hover::before {
        background-color: #0071BB;
    }
    .gnavi__list a {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        text-decoration: none;
        color: #1b4059;
        font-size: 15px;
        letter-spacing: 0.05em;
        font-weight: 550;
        transition: all .3s;
    }
    .gnavi__list:hover a {
        color: #fff;
    }
    .dropdown__lists {
        display: none;/*デフォルトでは非表示の状態にしておく*/
        width: 125%;
        position: absolute; 
        top: 100%;
        left: -40px;
        z-index: 2;

    }
    .gnavi__list:hover .dropdown__lists {
        display: block;/*Gナビメニューにホバーしたら表示*/
    }
    .dropdown__list {
        background-color: #004d80;
        height: 50px;
        position: relative;
        transition: all .3s;
    }
    .dropdown__list:not(:first-child)::before{
        content: "";
        width: 100%;
        height: 1px;
        background-color: #3492d1;
        position: absolute;
        top: 0;
        left: 0;
    }
    .dropdown__list:hover {
        background-color: #003558;

    }
    .dropdown__list a {
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        text-decoration: none;
        position: relative;
    }
    .dropdown__list a::before {
        content: '';
        display: block;
        width: 6px;
        height: 6px;
        border-top: 2px solid #fff;
        border-left: 2px solid #fff;
        transform: rotate(135deg);
        position: absolute;
        right: 15px;
        top: calc(50% - 5px);
    }

/*表示／非表示
---------------------- */
#A_index{
    display: none;
}
.A_index{
    display: block;
    background: #89eae7;
    padding: 5px  25px;
    margin: 1px;
    cursor: pointer;
}
.A_content{
    background: #ebf7ee;
    display: none;
    padding: 5px 10px;
    margin:  2px;
}
#A_index:checked+label+.A_content{
    display: block;
}

#B_index{
    display: none;
}
.B_index{
    display: block;
    background: #89eae7;
    padding: 5px  25px;
    margin: 1px;
    cursor: pointer;
}
.B_content{
    background: #ebf7ee;
    display: none;
    padding: 5px 10px;
    margin: 2px;
}
#B_index:checked+label+.B_content{
    display: block;
}

#C_index{
    display: none;
}
.C_index{
    display: block;
    background: #89eae7;
    padding: 5px  25px;
    margin: 1px;
    cursor: pointer;
}
.C_content{
    background: #ebf7ee;
    display: none;
    padding: 5px 10px;
    margin: 2px;
}
#C_index:checked+label+.C_content{
    display: block;
}

#D_index{
    display: none;
}
.D_index{
    display: block;
    background: #89eae7;
    padding: 5px  25px;
    margin: 1px;
    cursor: pointer;
}
.D_content{
    background: #ebf7ee;
    display: none;
    padding: 5px 10px;
    margin: 2px;
}
#D_index:checked+label+.D_content{
    display: block;
}

#E_index{
    display: none;
}
.E_index{
    display: block;
    background: #89eae7;
    padding: 5px  25px;
    margin: 1px;
    cursor: pointer;
}
.E_content{
    background: #ebf7ee;
    display: none;
    padding: 5px 10px;
    margin: 2px;
}
#E_index:checked+label+.E_content{
    display: block;
}

#F_index{
    display: none;
}
.F_index{
    display: block;
    background: #89eae7;
    padding: 5px  25px;
    margin: 1px;
    cursor: pointer;
}
.F_content{
    background: #ebf7ee;
    display: none;
    padding: 5px 10px;
    margin: 2px;
}
#F_index:checked+label+.F_content{
    display: block;
}

#G_index{
    display: none;
}
.G_index{
    display: block;
    background: #89eae7;
    padding: 5px  25px;
    margin: 1px;
    cursor: pointer;
}
.G_content{
    background: #ebf7ee;
    display: none;
    padding: 5px 10px;
    margin: 2px;
}
#G_index:checked+label+.G_content{
    display: block;
}

#H_index{
    display: none;
}
.H_index{
    display: block;
    background: #89eae7;
    padding: 5px  25px;
    margin: 1px;
    cursor: pointer;
}
.H_content{
    background: #ebf7ee;
    display: none;
    padding: 5px 10px;
    margin: 2px;
}
#H_index:checked+label+.H_content{
    display: block;
}

#I_index{
    display: none;
}
.I_index{
    display: block;
    background: #89eae7;
    padding: 5px  25px;
    margin: 1px;
    cursor: pointer;
}
.I_content{
    background: #ebf7ee;
    display: none;
    padding: 5px 10px;
    margin: 2px;
}
#I_index:checked+label+.I_content{
    display: block;
}

/* フッター 
---------------------- */
footer {
    
    background: rgb(57, 43, 31);
    text-align: center;
    padding: 10px 0;
}

footer p {
    color: #fff;
    font-size: 0.875rem;    
    }

/* 記事部分 
---------------------- */
article {width: 72%;
    }

/* サイドバー
---------------------- */
aside{width: 24%
    }

    hr.style2 {
        height: 5px;
        border: 0;
        box-shadow: 0 5px 5px -5px #101010 inset;
    }

    .contents {
        display: flex;
        justify-content: space-between;
        margin-bottom: 50px;
    }

/* トップに戻るボタン
---------------------- */
    html{
        scroll-behavior: smooth;
    }
    .gotop{
        display: block;
        width: 60px;
        height: 60px;
        box-sizing: border-box;
        background: rgb(201, 200, 200);
        border: 1px solid #999;
        padding-top: 30px;
        text-align: center;
        letter-spacing: -1px;
        font-size: 85%;
        text-decoration: none;
        color: #333;
        opacity: 0.5;
        position: fixed;
        bottom: 20px;
        right: 20px;
        z-index: 10000;
    }
    .gotop::before{
        content: "";
        display: block;
        border-top: 2px solid #333;
        border-right: 2px solid #333;
        width: 25%;
        height: 25%;
        top: 25%;
        left: 0;
        right: 0;
        margin: auto;
        position: absolute;
        transform: rotate(-45deg);
    }
    .gotop:hover{
        opacity: 1;
    }
    @media(max-width:600px){
        .gotop{
            width: 40px;
            height: 40px;
            text-indent: -9999px;
            opacity: 1;
            border: none;
            background: rgb(201, 200, 200);
            bottom: 10px;
            right: 10px;
        }
        .gotop::before{
            bottom: 0;
        }
    }


/* スタッフ写真
---------------------- */
.retrato img{width: 120px; margin: 10px;}

/* 書影
---------------------- */
.obras_imagen img{width: 180px; margin: 10px;}

/* 画像キャプション
---------------------- */
figcaption  {font-size: smaller;}

/* 写真集
---------------------- */
.grid {
    display: grid;
    gap: 26px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    margin-top: 6%;
    margin-bottom: 50px;
}
.grid img{
    width: 360px;
}

/* ポップアップ関連
---------------------- */
#popup {
  display: none; /* label でコントロールするので input は非表示に */
}

.popup-open {
  cursor: pointer; /* マウスオーバーでカーソルの形状を変えることで、クリックできる要素だとわかりやすいように */
}

.popup-open img{width: 180px; margin: 10px;}

.popup-overlay {
  display: none; /* input にチェックが入るまでは非表示に */
}

#popup:checked ~ .popup-overlay {
  display: block;
  z-index: 99999;
  background-color: #00000070;
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
}

.popup-window {
  width: 90vw;
  max-width: 560px;
  padding: 20px;
  background-color: #ffffff;
  border-radius: 6px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.popup-text {
  margin: 0;
}

.popup-text:not(:last-of-type) {
  margin-bottom: 1em
}

.popup-close {
  cursor: pointer;
  position: absolute;
  top: -26px;
  right: 0;
}


/* モバイル版
---------------------- */
@media (max-width: 600px)   {
    .page-title {
        font: size 2.5rem;
        font-family: 'Meiryo';
    }
    /* HEADER */
    .top {font-size: x-small;

    }
    .gnavi__wrap {
        font-size: 0.8rem;
        margin-top: 10px;
        }


    .page-header {
        flex-direction: column;
        }

    /* contents */
    p {font-family: 'Meiryo';}
    .contents   {
        flex-direction: column;}
    article,
    aside   {width: 100%;}

    }


/* モバイル版メニュー
---------------------- */
@media (max-width: 600px)   {
.gnavi__lists {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1px;
    min-width: max-content;
    z-index: 1;
    }
}
/*埋め込み
---------------------- */
embed {
    height: 100vh
    }