/* @override 
    http://127.0.0.1:8000/static/css/base.css */

@import url(//fonts.googleapis.com/css?family=Roboto:500,300,400);




/* =============================================================== */


html, body { margin: 0; padding: 0; }


header {

    background-color: #aa6889;


}


html {

    height: 100%;   
    background-color: #f5f5ef;
}


body {
    margin:0;

    font-family:'Roboto', sans-serif;
    font-weight:400;
    color:#333;



}





p {

    

}


a {
/*    color:#3ea6a5;*/
    text-decoration: none;
    color: #c75f88;
}

ul {
    float:left;
}

/* ヘッダー要素共通設定 */
h1, h2, h3, h4, h5, h6 {
    font-family:'Roboto', sans-serif;
    font-weight: 300;
}


/* ヘッダー要素個別設定  */
h1 {
    background:#f6eaf2;
    font-size: 2.5em;
    overflow:auto;
    padding: 20px 0 20px 80px;
    margin:0;
    border-radius: 25px;
}

/* ヘッダー要素個別設定  */
h2 {

    background: #eaedd8;
    font-size: 1.7em;
    overflow:auto;
    padding: 1rem 2rem 1rem 2rem;
    margin: 1rem;
    border-radius: 10px;
    color: #4bbdc9;

}



/* FOOTER の設定: Footer を含む、Page Containerの中にFooterを置くことが重要！！  */
/* https://www.freecodecamp.org/news/how-to-keep-your-footer-where-it-belongs-59c6aa05c59c/  */
#page-container {

  position: relative;
  min-height: 100vh;


}


/* FOOTER の設定: Footer を含む、Page Containerの中にFooterを置くことが重要！！  */
/* https://www.freecodecamp.org/news/how-to-keep-your-footer-where-it-belongs-59c6aa05c59c/  */
footer {

    position: absolute;
    bottom: -100;
    width: 100%;
    
    background-color: #b88ea3;

    /* FOOTERを下に移動させても、Containerを作っているので、内容が伸びていることになり、全体も大きくなる   */
/*    bottom: -100px;*/
/*    border-radius: 8px;*/

}


footer p {

    font-weight: 600;
    text-align: center;
    color: #fff;


}

label {
    float:left;
    clear:both;
    margin:8px 0 8px 0;
}

input, select, textarea {
    border:1px solid #ccc;
    border-bottom:3px solid #ccc;
    padding:8px 12px;
    font-size:16px;
    font-family:'Roboto', sans-serif;
    width:300px;
    clear: both;
}

textarea {
    height:80px;
}

select {
    width:324px;
}

input[type=submit], a.button, button {

    border-radius: 5px;
    background: #aa6889;
    color: #fff;
    font-size: 16px;
    text-transform: uppercase;
    border: none;
    padding: 10px 20px;
    margin: 20px 0;
    width: 350px;

}



input[readonly] {

  border: 0;
  outline: 0;
  background: #f5f5ef;


}



.language-setting {

    margin: 0;
    background-color: #aa6889;
    font-size: 10pt;
}



/* ====== 非モバイル（デスクトップ） ====== */
.language-setting form{
  margin-left:50px;
  color:#fff;
  font-weight:400;

  /* 追加：縦中央揃え */
  display:flex;
  align-items:center;
  gap:.5rem;
}

.language-setting form label,
.language-setting form select{
  /* 追加：iOSのズーム防止＆行高のばらつき対策 */
  font-size:16px;
  line-height:1.25;
  margin:0;
}

.language-setting form select{
  width:100px;
  /* ← これがズレ要因なので margin-left は削除し、gap に任せる */
  /* margin-left:20px;  を削除 */
  border:0;
  background-color:#aa6889;
  color:#fff;

  /* 追加：iOS独自UIを外す */
  -webkit-appearance:none;
  appearance:none;

  /* 追加：高さを安定化 */
  padding:.4rem .6rem;
  border-radius:.5rem;
}

.language-setting form select:focus{
  border:0;
  outline-offset:2px; /* 任意：フォーカス見やすく */
}



/*
.language-setting form {

    margin-left: 50px;
    color: white;
    font-weight: 400;

}


.language-setting form select {
    width: 100px;
    margin-left: 20px;
    font-size: 10pt;
    border: 0;
    background-color: #aa6889;
    color: white;
}


.language-setting form select:focus {

    border: 0;

}*/


/* ------------------- */
/* SNSシェアリングのボタン */
.sns-logos {

    float: right;
    margin-right: 100px;
    text-decoration: none;
}


.sns-logos a {

    padding: 4px;
    text-decoration: none;
}


.sns-logos img {

    width: 15px;
    text-decoration: none;
}


.sns-logos img:hover {

    text-decoration: none;
}


/* --------------- */
/* Navigationワード */
.navi-word {

    margin-left: 30px;
    padding: 15px;

}
.navi-word span {

    padding-left: 10px;
    padding-right: 10px;

}



.profile-img {

    display: flex;
    justify-content: center;

}


.profile-img img {

    width: 300px;

}


.success-message {

    color: blue;
    font-weight: bold;
    
}

.error-message {

    color: red;
    font-weight: bold;

}



.login-form tr {

    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
}


.login-form td {

    min-width: 150px;

}


.login-form input {

    width: 300px;

}




#content .module-detail {

    width: 500px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 2px 1px #e1a4a4, 3px 2px #d9b7b7, 5px 3px #c2f2b7;
    margin-bottom: 400px;
    padding: 25px;
    border-radius: 25px
}



#content .module-manage p {

    margin-top: 3rem;

}




/* メインボタン、中央揃え、広い面積バージョン */
#content .module-detail form input,
#content .module-manage p a {

    display: block;
    width: 400px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    border-radius: 8px
}



#content h3 {
    color: #c0697e;
    text-align: left;
    font-family:'Roboto', sans-serif;
    font-weight: 600;
}



#hamburger-menu {

    float: right;

}


.registeration,
.dashboard {

    align-items: left; 
    font-family:'Roboto', sans-serif;

    margin-bottom: 150px;

    display: flex;
    flex-direction: column;
    padding: 35px;
    max-width: 55%;
    margin-left: 50px;


}



.registeration form,
.dashboard form {
    display: flex;
    flex-direction: column;
}



.dashboard a {

    margin-top: 16px;
    margin-bottom: 16px;

}



.login {

    display: flex;
    flex-direction: column;
    padding: 35px;
    max-width: 55%;
    margin-left: 50px;
    padding-bottom: 260px;

}


.about-mail-address {

    margin-bottom: 2rem;

}


.about {

    display: flex;
    flex-direction: column;
    padding: 35px;
    width: 70%;
/*    max-width: 55%;*/
    margin-left: auto;
    margin-right: auto;
}



.about div {

    margin-top: 1rem;

}


.about div div {

    padding: 1rem 1rem 1rem 1rem;

}



.about li {

    font-weight: 700;
    padding: 1rem;
    list-style: none;
    max-width: 85%;
}



.about li p {

    font-weight: 500;

}



.about .point {

    background-color: #f7ecec;
    border-radius: 1rem;
    padding-left: auto;
}


.about .point img {
    width: 32%;
/*    background-color: #f00;*/
    border-radius: 0.5rem;
    max-width: 300px;
}



.about .motivation {

    background-color: #eff7ec;
    border-radius: 1rem;
}



.about .insight {

    background-color: #ecf2f7;
    border-radius: 1rem;
}




.module,
.module-edit {

    display: block;

    font-family:'Roboto', sans-serif;


/*    margin-bottom: 200px; */ 
    margin-left: auto;
    margin-right: auto;

    width: 800px;


    height: 100%;
/*    max-height: 100%;*/

}


.module .logged_out_p {

    text-align: center;

}



#content,
.module-edit {

/*    height: 100%;*/
    
    padding-bottom: 100px;

}


.module-edit form label {

/*    margin-top: 1rem;*/
    margin-left: 0.5rem;
    margin-right: 5rem;     /* File PostのときRAWテキストがあるため、その前の要素で幅を作る */
}

.module-edit form label + a {

    margin-left: 2rem;

}


.module-edit-form-container {

    overflow:auto;

}


.module-edit-form-container form {

    display: block;

}


.module-edit-form-container form p {

    margin-left: auto;
    margin-right: auto;
    overflow: auto;

}


.module-edit-form-container form p select,
.module-edit-form-container form p input,
.module-edit-form-container form p textarea {
    width: 70%;
    float: right;
    border-radius: 8px;
}


.module-edit-form-container form p input[type=checkbox] {

    margin-right: unset;
    cursor: pointer;
    width: 32px;
    height: 32px;
    accent-color: #aa6889;

}

/* コースのコンテンツ（旧モジュール）を修正する時 */
.module-edit-form-container form div select,
.module-edit-form-container form div input,
.module-edit-form-container form div textarea {
    width: 70%;
    float: right;

}


.module-edit-form-btn-container {

    margin-top: 3rem;

}


.module-edit-form-btn-container > button {
    display: block;
    margin-left: auto;
    margin-right: auto;

}



.module_edit_btn {
    width: 500px;
    overflow: auto;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    display: block;
}

.module_edit_btn input {

    margin-left: auto;
    margin-right: auto;
    float: right;
}


.module-edit-form-div {

    display: block;
/*    height: 100%;*/
    padding-bottom: 25px;

}


.module-edit-form-div form {

    display: block;
/*    height: 100%;*/

}



.module-edit h2 {


    margin-left: 0;
    margin-right: 0;


}





.module-posts-all {

    padding: 80px;
    margin-bottom: 50px;
}

.module-posts-all h2 {


    margin: 0;
    margin-top: 80px;
    margin-bottom: 15px;

}



.module-posts-all iframe {
    display: block;
    width: 500px;
    max-width: 100%;
    max-height: 100%;
    margin-left: auto;
    margin-right: auto;
}


.module-posts-all .post_download {

    text-align: center;
    margin-top: 1rem;

}


.module-posts-all .post_images {

    text-align: center;

}


.module-detail {

    display: block;
    background-color: #f7f7fc;
    margin-left: 50px;

}




.module-detail-category {

    margin-left: 50px;
    font-size: 0.8em;
}


.module-detail-desc {

    margin-left: 50px;
    max-width: 80%;
    word-wrap: break-word;
    white-space: normal;
    margin-bottom: 50px;

}

.module-detail-cookie {

    display: block;
    background-color: #f5f5ef;
    margin-left: 50px;
    margin-bottom: 150px;

}

.module-detail-desc-cookie {

    margin-left: 50px;
    max-width: 80%;
    word-wrap: break-word;
    white-space: normal;
    margin-bottom: 50px;

}




.module-detail form {
    padding-top: 15px;
}


.module-detail h2 {

/*    margin-left: 50px;*/
    
}



/* 登録して購読ボタン  */
.module-detail .button {

    margin-left: 50px;


}


.module-studying {

/*    display: block;
    background-color: #f7f7fc;
    */
    min-width: 400px;
    display: inline-block;
    margin-left: 50px;
    padding: 25px;

}




@keyframes slideInFromBelow {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}



/* =========================================================
   教材カード一覧: 4列の正方形カードグリッド

   #content .module でID込みの詳細度にしておくことで、
   ファイル後半のレスポンシブ用 .module ルール（display:block）に
   打ち消されないようにしている。
   ========================================================= */
#content .module {

    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;

    width: min(1200px, 92vw);
    max-width: 100%;
    height: auto;

    margin-left: auto;
    margin-right: auto;
    padding: 24px 0 60px 0;

}


.module-container {
    display: flex;
    flex-direction: column;

    /* 正方形にする */
    aspect-ratio: 1 / 1;

    /* グリッドの列幅より縮めるため min-width の既定値を解除 */
    min-width: 0;

    background-color: #f7f7fc;
    overflow: hidden;
    box-shadow: 2px 1px #e1a4a4, 3px 2px #d9b7b7, 5px 3px #c2f2b7;
    margin: 0;
    border-radius: 24px;
    transition: transform 0.3s, box-shadow 0.3s;

    animation: 0.5s ease-out 0s 1 slideInFromBelow;

}


.module-container:hover {

    transform: translateY(-6px);
    box-shadow: 3px 3px #e1a4a4, 5px 5px #d9b7b7, 8px 8px #c2f2b7;

}




/* カード上部: サムネイル画像 */
.module-container > a {

    display: block;
    height: 52%;
    flex: 0 0 52%;
    overflow: hidden;

}


.module-container > a img {

    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;

}


/* カード下部: テキスト領域 */
.module-container > div {

    flex: 1 1 auto;
    min-height: 0;

    display: flex;
    flex-direction: column;

    margin: 0;
    padding: 14px 18px 16px 18px;

}

.module-container > div a {

    color: #aa6789;
    font-size: small;

}


/* カテゴリー表示。以前は絞り込み用リンクだったが、
   コース一覧メニュー廃止に伴い非リンクのラベルへ変更 */
.module-container > div .module-category {

    color: #aa6789;
    font-size: 0.72rem;

}

.module-container > div > h3 {

    margin: 0 0 6px 0;

}

.module-container > div > h3 a {

    font-size: 0.95rem;
    line-height: 1.4;
    color: #3ea6a5;

    /* タイトルが長い場合は3行で省略し、カードの高さを保つ */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;

}


/* カード内の空の <p> が余白を作ってしまうため潰す */
.module-container > div > p,
.module-container .module-misc p {

    margin: 0;

}


/* 最終更新はカード下端へ寄せる */
.module-container .module-misc {

    margin-top: auto;

}


/* ---- レスポンシブ: 画面幅に応じて列数を落とす ---- */
@media (max-width: 1180px) {
    #content .module {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 860px) {
    #content .module {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }
}

@media (max-width: 520px) {
    #content .module {
        grid-template-columns: 1fr;
        width: 92vw;
    }
}





.module-misc {

    font-size: 0.75rem;

}


.module-misc span {

    font-weight: 600;
    color: #a8be25;

}

.module-misc p {

    font-weight: 600;
    color: #e080b1;

}


.module-manage {

    display: block;

    padding: 35px;
    
    width: 700px;

    margin-left: auto;
    margin-right: auto;

}




/* コース削除関連  */
.module-delete {
    
    width: 500px;  
    font-weight: 800;
    color: #FF0000;
    display: block;
    margin-left: auto;
    margin-right: auto;

}




.module-delete form input[type=submit] {

    width: 500px;

}


/* ヘッダーとロゴ */
#header {
    background:#aa6889;
    overflow:auto;
    padding:2px 20px;
    border-bottom:6px solid #9d6495;
    letter-spacing: .13rem;
    min-height: 88px;
/*    border-radius: 25px;*/
}

#header .logo-container {
    text-align: center;
    height: 60px;
}

#header .logo {

    text-decoration:none;
    font-family:'Roboto', sans-serif;
    font-weight:500;
    font-size: 24px;
    color: #fff;


}

.logo-container {

    display: flex;
    flex-direction: row;
    justify-content: space-evenly;

}   


.logo-container-layout {

    display: flex;
    flex-direction: column;
    align-items: center;


}


.logo-container-layout p {

    margin: 4px 0px;
    color: #c2f2b7;
    font-size: small;
}


/* ログイン中のロゴー：　ユーザの名前 */
.logo-container h3 {

    font-weight: 800;
    margin-right: 20px;
    color: #68ffdb;
}

/* ログイン中のロゴー：　with */
.logo-container h5 {

    font-weight: 800;
    margin-right: 20px;
    color: #eaedd8;
}



#header a {
    color: #eaedd8;
    font-size: small;

}

#header .menu {
    display: flex;
    list-style:none;

    float:right;

    margin:0;
    padding:0;
    margin-right: 2rem;
}


#header .menu li {
    margin-right: 2rem;
/*    margin-right: 20px;*/

}


.contents {
    background:#eaedd8;
    color: #db9a9a;

    display: grid;
    place-items: center;

    list-style:none;
    font-family:'Roboto', sans-serif;

    border-radius: 25px;

}


.contents nav {


    place-items: center;

}



.contents nav img:hover {

    border-radius: 20px;
    background-color: #f5f5ef;


}




.contents ul {
    display: flex; 
/*    align-items: center; */
    list-style:none;
    margin-left: auto;
    margin-right: auto;

}


.contents ul li {

    max-width: 150px;

    font-size: 14pt;

    font-weight: 500;
    margin: 6px 80px 6px 0;
    
    padding: 0 20px 0 0;

    overflow: hidden;
/*    cursor: move;*/

}



.contents ul li > a{

    color: #aa6789;
    font-weight: 550;
    font-size: small;
}


.contents ul li span {

    justify-items: right;
    color: #e69b9b;
    font-size: 0.9rem;

}




.contents ul li.selected {
    font-weight: 600;   
    
}


/*.contents ul li a:hover {
    
    border-radius: 20px;
    background-color: #dd99bb;
}


.contents ul li span:hover {
    border-radius: 20px;
    background-color: #dd99bb;
    color: #ffffff;
}
*/



.contents ul li:hover {

    text-decoration: none;

}



.contents ul li.placeholder {

  border:1px dashed #ccc;
  padding:0;
  margin:10px 0;

}

/* コンテンツを修正 */
.module-edit a {

    color: #dc2135;
    font-weight: 800;
    margin-top: 0px;
    margin-bottom: 20px;

}

.module-edit a:hover {

    text-decoration: underline;
    
}


.module-edit a + a {

    color: #dc2135;
    font-weight: 800;
    margin-top: 0px;
    margin-bottom: 20px;
    margin-left: 2rem;
}

.module-edit a + a:hover {

    text-decoration: underline;
    
}



ul.content-types {

    margin: 0;
    padding: 0;

}


ul.content-types li {

    list-style: none;
    float: left;
    margin-bottom: 20px;
    background: #efefef;
    padding: 8px 14px;
    margin: 5px;
}


.hidden {
    display:none;
}


.errorlist {
    color:#ae2c2c;
    margin:0;
}






#id_password2 {

    margin-bottom: 3rem;

}



a.secondary-button {
    border:3px solid #aa6889;
    padding:10px 20px;
    margin:10px 0;
}

input[type=submit]:hover, a.button:hover, button:hover {
    background:#9d6495;
}

ul#course-modules {
    list-style:none;
    overflow:auto;
}

ul#course-modules textarea {
    width:600px;
    height:120px;
}

ul#course-modules li {
    padding:20px;
    overflow:auto;
    cursor:move;
    user-select:none;
}

ul#course-modules li:nth-child(even) {
    background:#efefef;
}

ul#course-modules li:hover {
    background:#ccc;
}


.create-content {

    height: 7vh;

}



.logout-btn button {

    width: unset;
    background: unset;
    border-radius: unset;
    text-transform: unset;
    padding: unset;
    margin: unset;

    color: #eaedd8;
    font-size: small;
}


.logout-btn button:hover {

    text-decoration: underline;

}


.module-edit h3 {

    margin-top: 2rem;

}


#module-contents div {
    padding:10px 20px;
    border:1px solid #ccc;
    background:#fff;
    margin-bottom: 5px;
}


#module-contents div.placeholder {
  border:1px dashed #ccc;
}

#module-contents form {
    margin:0;
    padding:0;
}



#module-edit-form input[type=checkbox] {

    margin-right: unset;
    cursor: pointer;
    width: 32px;
    height: 32px;
    accent-color: #aa6889;
}




/* ポストの修正ボタン  */
#module-contents a {

    color: #dc2135;

}


#module-contents form, a:hover {

    text-decoration: underline;

}




/* ポストの修正ボタン  */
#module-contents a + a {

    color: #ff0000;
        background:none;
    margin: 0;
    padding:0;
    text-transform:none;
    font-weight: 800;
    border: none;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    margin-left: 2rem;
    font-size: 1rem;
}


#module-contents form, a + a:hover {

    text-decoration: underline;

}






#module-contents div:hover {
    cursor:move;
}


#module-contents div p {

    margin-bottom: 1rem;
    overflow: auto;
}



.course-info {

    border: 1px solid #ccc;
    padding: 30px;
    margin-bottom: 20px;
    overflow: auto;

}


.course-info-title {
    font-size: 1.5rem;
    text-align: left;
}



.course-info a:hover {

    text-decoration: underline;

}


.course-info .course-info-delete {

    color:#ff0000;
    
}





/*

.module-edit form p select {

    width: 475px;

}



.module_edit_btn {
    width: 500px;
    overflow: auto;
    margin-left: auto;
    margin-right: auto;

}


.module-edit form input {

    margin-right: auto;
    width: 450px;
}


.module-edit form input[type=submit] {
    width: 450px;
    margin-top: 2rem;
    margin-left: auto;
    margin-right: auto;
    
}


.module-edit form input[type=checkbox] {

    margin-right: unset;
    cursor: pointer;
    width: 32px;
    height: 32px;
    accent-color: #aa6889;

}

*/

.module-edit form textarea {

    width: 450px;
    min-height: 250px;
    margin-right: auto;
}



.module-edit #module-contents #visible_on {

    width: 48px;
    background-color: #eaedd8;
    border-radius: 8px;

}


.module-edit #module-contents #visible_off {

    width: 48px;
    background-color: #eaedd8;
    border-radius: 8px;

}






.helptext {
    color:#ccc;
    padding-left:20px;
}

#chat {
    top: 64px;
    bottom:0;
    position:fixed;
    width:100%;
    overflow-y:scroll;
    padding-bottom:150px;
}

#chat .message {
    background:#efefef;
    padding:10px 20px;
    border-radius:4px;
    width:auto;
    display:inline;
    float:left;
    margin:10px 10px 0;
    min-width:440px;
    clear:both;
}

#chat .message.me {
    display:inline;
    float:right;
    background:#DCEDE0;
    color:#56A668;
}

#chat .date {
    color:#aaa;
    font-style:italic;
    font-size:12px;
}

#chat-input {
    position:absolute;
    bottom:0;
    background:#efefef;
    width:100%;
    padding-top:20px;
}

#chat-input input {
    width:96%;
    position:left;
    float:left;
    display:inline;
    margin-left:2%;
    margin-right:2%;
    padding-left:0;
    padding-right:0;
}


#hamburger-input {
    /*  display: inline-block;*/
    display: none;
}


#course-menu-checkbox {
    display: none;
}



.module-posts-all img {

    max-width: 100%;
    max-height: 100%;

}




.course_list_title {

    display: none;


}



.post_ramaa {



}


.post_ramaa button {

    display: flex;
    width: 12rem;

    padding: 0.2rem;
    border-radius: 4rem;
    margin-left: auto;
    margin-right: auto;


}


.post_ramaa img {

    margin: auto;
    margin-left: 3rem;
    margin-right: 3px;

}




.post_ramaa p {


}



.post_ramaa_intro {

    display: flex;
    margin-bottom: 0.7rem;
    align-items: center;
    flex-direction: column;
}



.post_ramaa_intro img {

    background-color: #aa6889;
    border-radius: 6px;
    padding: 5px;
    width: 24px;
    height: 24px;

}


.post_ramaa_intro p {
    padding-left: 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #aa6889;

}


.post_ramaa_image img {

    margin-left: auto;
    margin-right: auto;
}


.post_ramaa_image img:hover {

    outline: 2px solid rgba(190, 70, 220, .3);;

}


.post_ramaa_image button {

    display: unset;
    width: unset;
    background: unset;
    padding: unset;
    border-radius: unset;
    margin-left: auto;
    margin-right: auto;
    height: unset;
}


.page-item .page-link {

    font-size: 1rem;


}





.logo-container-layout span {

    vertical-align: middle;

}



.title-logo-char {


    vertical-align: text-bottom;
    margin-right: 5px;
}


/* Privacy Policy */

.pp-container { max-width: 980px; margin: 0 auto; padding: 1rem 0; }
.pp-wrap { white-space: pre-wrap; font-size: 0.98rem; line-height: 1.9; }
.pp-actions { margin: 12px 0 24px 0; }
.pp-actions button { padding: .6rem 1rem; border-radius: 8px; border: 1px solid #888; cursor: pointer; }



/* Terms of use */

.tos-wrap { white-space: pre-wrap; font-size: 0.98rem; line-height: 1.9; }
.tos-container { max-width: 980px; margin: 0 auto; padding: 1rem 0; }
.tos-actions { margin: 12px 0 24px 0; }
.tos-actions button { padding: .6rem 1rem; border-radius: 8px; border: 1px solid #888; cursor: pointer; }





.yt-wrap {
  position: relative;
  width: 100%;
  max-width: 960px;  /* 好きに */
  aspect-ratio: 16 / 9;
}

.yt-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}


.video-wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
}

.video-wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.post_typelearn {

  text-align: center;

}


.post_typelearn p {

  margin: 0;

}

.post_typelearn img {

  width: 80px;

}


.post_typelearn button {

  width: 200px;
  border-radius: 20px;

}







/* =============================================================== */







/* RESPONSIVE 設定 */
@media (max-width: 56rem) {
    


    body {
/*        padding: 20px;*/
/*        padding-top: 8px;*/
        margin-left: auto;
        margin-right: auto;
        font-family: 'Roboto', sans-serif;
        font-weight: 400;
        color: #333;
        height: 100%;



    }





    /* ------------------ */
    /* 他のコースの一覧ボタン */
    #course-menu-text {
        color: #ffa5bb;
        height: 42px;
        font-weight: 800;
        font-size: 1.25rem;
        margin: 0;
        position: absolute;
        top: 25%x;
        right: 10%;
        padding-top: 12px;
/*        transition: 0.2s;*/
        overflow: scroll;
        text-shadow: 2px 2px 2px #c2f2b7;
        z-index: 0;
        display: none;
    }





    .course_list_title {

        display: block;


    }


    #course-menu-checkbox:checked + #course-menu-btn #course-menu-text {
        height: 0px;
        padding-top: 0px;
        background-color: #ebfad9;
        z-index: -1;

    }



    /* ---------------------------- */
    /* コース一覧メニューのボタンのLabel */
    #course-menu-btn {

        width: 100%;
/*        height: 100%;*/
        border: none;
/*        padding: 17px;*/
        margin: 0px;
/*        background-color: #e1dcdf;*/

    }

    /* コース一覧メニューの下地 */
    #course-menu-btn #course-menu-base {

        width: 100%;
        transition: background-color 1s, max-height 1s ease;
        overflow: hidden;
        margin: 0px;

        border-radius: 25px;

/*        max-height: 250px;*/
        background-color: #eaedd8;
/*        overflow: scroll;*/

    }


/*    #course-menu-checkbox:checked + #course-menu-btn #course-menu-base {

        max-height: 250px;
        background-color: #faf0fc;
        overflow: scroll;

    }*/



    /* -------------------------------------------------------------- */
    /* 下は Hamberger Menu */
    /* https://alvarotrigo.com/blog/hamburger-menu-css-responsive/ */


    .overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        visibility: hidden;
        transition: opacity .35s, visibility .35s, height .35s;
        overflow: hidden;
        background: black;
        z-index: 1;
    }

    /* ハンバーガーメニュボタン */
    #hamburger-menu {
        position: fixed;
        top: 39px;
        left: 20px;
        width: 29px;
        height: 36px;
        display: none;
        border: none;
        padding: 0px;
        margin: 0px;
        background: linear-gradient(
          to bottom, 
          #3ea6a5, #3ea6a5 20%, 
          rgba(255,255,255,0.0) 20%, rgba(255,255,255,0.0) 40%, 
          #3ea6a5 40%, #3ea6a5 60%, 
          rgba(255,255,255,0.0) 60%, rgba(255,255,255,0.0) 80%, 
          #3ea6a5 80%, #3ea6a5 100%
        );
    }

    /* ハンバーガーメニュ本体、下地 */
    #hamburger-menu #sidebar-menu {

        visibilty: hidden;
        position: fixed;
        top: 0;
        /* 画面の外に置く */
        left: -250px;
        width: 220px;
/*        height: 18em;*/
        background-color: #3ea6a5;
        /* ここでトランジションアニメーション設定 */
        transition: 0.3s;
        padding: 0px 16px;
        padding-bottom: 20px;
        box-sizing: border-box;
        border-radius: 25px;
    }

    #hamburger-menu h3 {
      color: #B9FAF8;
      font-size: 2.2rem;
    }

    #hamburger-menu ul {
      padding-left: 0px;
    }

    #hamburger-menu .menu-item {

        margin-bottom: 1rem;

    }

    #hamburger-menu .menu-item li {



    }

    #hamburger-menu li {
      list-style-type: none;
      line-height: 1.5rem;
    }

    #hamburger-menu a {

        color: #ebebeb;
        font-size: 1.2rem;
        font-weight: 600;
        text-decoration: none;

    }

    #hamburger-menu a:hover {
      text-decoration: underline;
    }

    /*  ------------------  */
    /*  Siblingセレクタ */
    /*  左の条件に当たる要素と、
        その次に続く要素の中で、
        １つの要素に対して、
        同じ階層でありながら、
        右の条件に当たる要素。
        に、この条件は適用される
    */
    /*  つまり、下のセレクタは、
        条件１：CSS擬似クラスのcheckedが#hamburger-inputがチェックされた
        条件２：１番の要素からSiblingである要素で、つまり１つに対して、
        条件３：#hamburger-menuの下層に#sidebar-menuある要素に
        適用される。
        → 結果、ハンバーガメニュー用ボタンがInput要素で定義されていて、
          それが選択されたら、また、ボタンの下層にある下地があった場合、
          それのVisibilityをONにし、左がらの位置を0にする。
          また、#hamburger-inputはチェックボックスなので、
          もう一度クリックされればチェックが外れる。
          よって、そのときは、このセレクタは解除される。
    */
    #hamburger-input:checked + #hamburger-menu #sidebar-menu {

        visibility: visible;
        left: 0;

    }


    /*  ------------------  */
    /*  Tilt セレクタ  */
    /*  左の条件に当たる要素と、
        その次に続く要素の中で、
        複数の要素に対して、
        同じ階層でありながら、
        右の条件に当たる要素。
        に、この条件は適用される。
    */
    #hamburger-input:checked ~ .overlay{

        visibility: visible;
        opacity: 0.4;

    }



    /* ---------------------------------- */
    /* 下は画面レスポンシブ */



    #header {

        width: 100%;
        padding-left: 0;
        padding-right: 0;
        margin: 0;

    }


    #modules {

        display: block;
        text-align: left;
        
        float: right;

        padding-left: 0;
        padding-right: 0;
        border-radius: 25px;

    }


    #modules li {

        padding-top: 10px;
        padding: 0.25rem 1rem;
        width: 100%;
        margin-left: 1rem;
    }



    #content {
        width: 92%;
        text-align: center;
        padding-left: 1rem;
        padding-right: 1rem;

    }


    #content h1 {

        text-align: right;
        padding: 2rem;
        font-size: 1.5rem;
    }


    #header .menu {

        display: block;
        text-align: left;
        margin-left: auto;
        margin-right: auto;
        padding: 0.75rem;
        margin-top: 3rem;
        float: left;
    }



    .contents {
        width: 100%;
        margin-top: 24px;
/*        box-shadow: 0px 3px #d5e7c7;*/


/*        display: flex;
        flex-direction: column;
        
        padding-left: 0;
        padding-right: 0;
        margin: 0;
        height: 160px;
        overflow-y: auto;*/
        

    }





    .contents ul {
        display: flex;
        flex-direction: column;
        width: 100%;
        margin-left: 0;
        align-items: left;
    }
    





    .contents ul li {
        font-size: 14pt;
        font-weight: 500;
        margin: 6px 80px 6px 0;
        padding: 0 20px 0 0;
        overflow: hidden;
        max-width: 87%;
    }


    .contents ul li {

        margin-top: 0.55rem;
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 0.55rem;

        padding: 0;
    }




    .contents nav .pagination {

        display: flex;
        flex-direction: row;
        padding-left: 0;

        
    }   


    .contents nav .pagination .page-item{


        

        margin-left: auto;
        margin-right: auto;

        padding: 1rem;
/*        padding-left: 0.6rem;
        padding-right: 0.6rem;
        padding-top: 0.6rem;
        padding-bottom: 1.6rem;*/

        align-items: center;
        justify-content: center;

        transform: scale(1.4);
    }

    .contents nav .pagination img {


    }

    .contents nav .pagination span {


    }

    #content .module-detail {

        width: 85%;
        margin-top: 1rem;
        margin-left: auto;
        margin-right: auto;
        box-shadow: 2px 1px #e1a4a4, 3px 2px #d9b7b7, 5px 3px #c2f2b7;
        margin-bottom: 80px;
        padding: 25px;
    }

    .module, 
    .login, 
    .module-detail,
    .registeration,
    .dashboard,
    .module-manage,
    .module-edit {
        padding: 0;
        margin: 6vw 0 0  0;
        justify-content: center;
        display: block;
/*        height: 100vh;*/
        width: 95vw;
        margin-left: auto;
        margin-right: auto;
        max-width: 100%;
        max-height: 100%;
    }



    .login > p, 
    .module-detail > p,
    .registeration > p,
    .dashboard > p,
    {

        text-align: left;
        
    }
    
    

    
    .module-edit-form-div {

        display: block;
    }


    .module-detail-category {

        margin: 0;
        padding-left: 0.5rem;
        font-size: 1rem;
        margin-bottom: 1rem;
    }

    .login > p,
    .login-form form table,
    .module-detail h2 {
        margin: 0;
        text-align: left;
        padding-top: 1rem;
    }




    .login-form form,
    .module-detail form {

        margin: 0px;
        width: 100%;
        max-width: 100%;
    }


    .about {

        display: flex;
        flex-direction: column;
        padding: 0px;
        width: 100%;
        margin-left: 0px;
	   margin-right: 0px;

    }


    .about ul {

        padding-inline-start: 1rem;
        padding-inline-end: 1rem;

    }


    .about li {

        list-style: none;
        width: 100%;

    }

    .about li p {

        width: 100%;

    }



    #module-contents div p {

        margin-bottom: 1rem;
        overflow: inherit;
        text-wrap: wrap;
        height: 100%;
        word-wrap: break-word;

    }




    .about p {

        text-align: left;
    }


    /* 横幅100%のボタン */
    .login form input,
    .module-detail form input,
    #id_password2 + input,
    .module_edit_btn > input,
    #module-edit-form + button,
    .module-manage p input[type=submit], 
    .registeration form p > input,
    .dashboard form input,
    .module-edit form p > input,
    .module-delete form input[type=submit] {

        margin: 0;
        padding: 20px;
        font-size: 1.25rem;
        width: 100%;
        max-width: 100%;
        border-radius: 10px;
    }


    #content .module-manage p a {

        margin: 0;
        padding: 20px;
        font-size: 1.5rem;
        width: 64vw;

        border-radius: 15px;

        margin-left: auto;
        margin-right: auto;

    }


    /* 固有ボタンたちはCSS後半で別個設定 */
    #id_username,
    #id_email,
    #id_last_name,
    #id_first_name
    {

        padding: 0px;
        padding-top: 10px;
        padding-bottom: 10px;
        width: 90%;

    }

    #id_password,
    #id_password1,
    #id_password2
    {

        padding: 0px;
        padding-top: 10px;
        padding-bottom: 10px;
        width: 90%;
    }





    /* -------- */
    /* 会員登録用 */
    .registeration > p,
    .registeration form,
    .dashboard > p,
    .dashboard form {

        text-align: left;
        margin-bottom: 2rem;
    }



    #id_password2 {
        margin-bottom: 3rem;
    }






    /* ------------ */
    /* コース修正画面 */
    .module-manage .course-info {

        margin-left: auto;
        margin-right: auto;
        margin-bottom: 2.5rem;

    }


    .course-info-manage  {

        display: block;
        width: 100%;
        height: 100%;
        padding-bottom: 1rem;

    }


    .course-info-manage div {

        text-align: left;
        padding-bottom: 0.5rem;
        font-weight: 600;

    }



    #module-edit-form {

/*        overflow: auto;*/

    }



    #module-edit-form + button {

        border-radius: 0px;
        background: #aa6889;
        color: #fff;
        font-size: 1.5rem;
        text-transform: uppercase;
        border: none;
        padding: 10px 20px;
        margin: 20px 0;
        margin-top: 2rem;
        margin-bottom: 8rem;
        padding: 20px;    
        
    }


    .module-edit div form p > label {

        margin-top: 1rem;

    }


    .module_edit_btn > input {

        margin-top: 2rem;

    }

    .module-edit form {

/*        overflow: hidden;*/
        display: block;
        height: 100%;

    }


    .module-edit form p {

        overflow: hidden;
    }



    .module-edit form p select {

        width: 64vw;

    }


    .module-edit div form input{

        margin-bottom: 1rem;
        width: 64vw;
        margin-right: auto;
        margin-left: auto;
    }


    .module-edit form p ~ input {

        width: 60vw;
        
    }


    .module-edit form p input[id=id_title], 
    .module-edit form p input[id=id_file], 
    .module-edit form p input[id=id_url] {

        width: 64vw;
        margin-right: auto;
/*        margin-left: auto;*/
    }



    .module-edit form textarea {

        width: 70vw;


    }



    .module-edit-form-container {


        /* UNSET はとても重要！！！ */
        height: unset;  
        overflow: auto;


    }


    .module_edit_btn {
        width: 100%;
        display: block;
        overflow: auto;
        margin-left: auto;
        margin-right: auto;

    }


    .module-edit {

        height: 100vh;

    }

    .module-delete {

        width: 75vw;
    }

    .module-delete form p {

        margin-top: 2rem;
        margin-bottom: 2rem;

    }



    /* ------------ */
    /* ポスト修正の時 */

    .module-edit {

        display: block;
        text-align: center;

    }

    .module-edit h3 {
        margin-top: 0.5rem;
        margin-left: 0.5rem

    }

    .module-edit > h2 {

        text-align: left;
        margin-left: 0.5rem
    }

    .module-edit > h2 + a{
        
        display: block;        
        padding-bottom: 1rem

    }



    .module-edit a + a {

        margin-left: 0rem;
    }






    .create-content {

        display: block;

        margin: 0;
        padding: 0;
        width: 100%;


    }


    ul.content-types {
        display: block;
        margin-left: auto;
        margin-right: auto;


    }


    ul.content-types li {

        list-style: none;

        background: #efefef;
        padding: 12px 16px;
        margin: 0.25rem;

    }

    h3.create-post-title {

        margin-left: 0.5rem;


    }


    #module-contents {

        max-width: 80%;
        display: block;
        margin-left: auto;
        margin-right: auto;

    }


    #module-contents div {

        padding-bottom: 1.5rem;
/*        height: 100px;*/
        margin-bottom: 10px;
        
    }

    #module-contents form {


    }


    #module-contents a {

        display: block;
        font-size: 1rem;
        margin-bottom: 0.5rem;

    }


    /* ポスト管理画面の削除ボタン  */
    #module-contents a + a {
        margin: 0;
        padding: 0;
        color:#ff0000;
        background:none;
        display: block;
        float:center;
        text-transform:none;
        font-weight: 800;
        border: none;
        font-size: 1rem;
        
    }


    .create-content {
        display: block;
        height: 80px;

        margin-left: auto;
        margin-right: auto;

    }




    /* -------------------- */
    /* コース内の教材を見るとき */

    #modules li {

    }


    #content .module {

        text-align: center;
        height: 100%;
        max-height: 100%;


    }


    .module-posts-all {

        max-width: 100%;
/*        margin-bottom: 200px;*/
        height: 100%;
        max-height: 100%;
        padding: 0px;
    }


    .module-posts-all h2 {

        text-align: left;
        padding-left: 1.5rem;
    }




    .module-posts-all iframe {
        width: 300px;
        max-width: 100%;
        max-height: 100%;

    }

    .module-posts-all p {

        text-align: left;


    }


    .module-posts-all .post_images {

        padding: 0;
        margin: 0;

    }

    .module-posts-all .post_download {

        margin-top: 2rem;

    }

    .module-posts-all .post_download > a {

/*        padding: 20px;*/
        margin-top: 1rem;

    }






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


    .module-detail {

        height: 100%;

    }



    .module-detail div {

        padding: 0;
        text-align: left;
        margin: 0px;
        width: 100%;
        max-width: 100%;

    }


    .module-detail-desc > p {

        padding: 0.5rem;

    }












    .module-container {

        padding: 0;
        min-width: 0;
    }


    #header .logo-container {

        display: block;
        text-align: right;
        margin-right: 1.25rem;

    }
    
    .module-container > a {
        height: 52%;
        width: 100%;

    }


    .module-container > a img {
        height: 100%;
        width: 100%;
        object-fit: cover;

    }

    .module-container > div {
        text-align: left;
        margin: 0;
        padding: 14px 16px 16px 16px;
    }


    .module-container > div > h3 > a {
        font-size: 1rem;
        padding: 0;
    }



    .module-container div > h3 {

        margin: 0 0 6px 0;
        padding: 0;
    }




    /* コースのコンテンツ（旧モジュール）を修正する時 */
    .module-edit-form-container form div select,
    .module-edit-form-container form div input,
    .module-edit-form-container form div textarea {
            width: 70%;
            float: right;

    }


    .module-edit-form-btn-container {

        margin-top: unset;

    }


    .module-edit-form-btn-container > button {
        display: block;
        margin-left: auto;
        margin-right: auto;

        width: 100%;
        overflow: auto;


    }






    .logo-container-layout {

        display: block;
        padding: 0;
        margin: 0;
        text-align: right;

    }

    /* ログインなしの状態のロゴー  */
    .logo-container-layout > .logo {

        padding: 0;
        margin: 0;
    }


    /* ログイン中のロゴー：　ユーザの名前 */
    .logo-container h3 {

        font-weight: 800;
        margin: 0;
        margin-bottom: 0.5rem;
        color: #68ffdb;
    }

    /* ログイン中のロゴー：　with */
    .logo-container h5 {

        font-weight: 800;
        margin: 0;
        color: #eaedd8;
    }




    .logo-container-layout p {
        margin: 4px 0px;
        color: #c2f2b7;
        font-size: xx-small;
    }



    .module-misc {

        padding-right: 20px;
        font-size: 1rem;
        margin: 0rem;

    }

    .module-misc p {
            
        margin-top: 0.5rem;

    }


    .contents nav {

        place-items: center;

    }



    .post_ramaa_intro + button {

        
        width: 8rem;
        margin: 0;
        border-radius: 4rem;
        padding: 1rem;
        margin-left: auto;
        margin-right: auto;
    }

    .post_ramaa img {

        margin: auto;
        margin-right: 0px;

    }


    .post_ramaa p {

        margin: auto;
        margin-left: 0.2rem;


    }



    .post_ramaa_intro p {

        margin-bottom: 0.7rem;
        margin-left: auto;
        margin-right: auto;
    }



    .post_ramaa_intro img {

        background-color: #aa6889;
        border-radius: 6px;
        padding: 5px;
        width: 24px;
        height: 24px;

    }


    .post_ramaa_intro p {
        text-align: center;
        padding-left: 0.5rem;
        font-size: smaller;
        font-weight: 600;
        color: #aa6889;

    }





    input[type=submit], a.button, button {

        width: 10rem;

    }


    .dashboard a {

        margin-top: 16px;
        margin-bottom: 16px;
        padding: 8px;
    }



    /* FOOTER の設定: Footer を含む、Page Containerの中にFooterを置くことが重要！！  */
    /* https://www.freecodecamp.org/news/how-to-keep-your-footer-where-it-belongs-59c6aa05c59c/  */
    #page-container {

        position: relative; 
        min-height: 100vh;
/*        height: 100vh;*/

    }




    /* ------------------- */
    /* Navigationワード */
    .navi-word {

        margin-left: 5px;
        padding: 5px;
        margin-top: 10px;

    }
    .navi-word span {

        padding-left: 10px;
        padding-right: 10px;

    }




    /* ------------------- */
    /* SNSシェアリングのボタン */
    .sns-logos {

        float: right;
        margin-right: 1rem;
        text-decoration: none;
        margin-top: 16px;
    }


    .sns-logos a {

        padding: 4px;
        text-decoration: none;
    }


    .sns-logos img {

        width: 20px;
        text-decoration: none;
        padding-left: 20px;
    }


    .sns-logos img:hover {

        text-decoration: none;
    }


    .logout-btn button {

        color: #ebebeb;
        font-size: 1.2rem;
        font-weight: 600;
        text-decoration: none;

    }


    /* FOOTER の設定: Footer を含む、Page Containerの中にFooterを置くことが重要！！  */
    /* https://www.freecodecamp.org/news/how-to-keep-your-footer-where-it-belongs-59c6aa05c59c/  */
    footer {

/*        position: unset;

        width: unset;
        
        background-color: unset;
        bottom: unset;
        border-radius: unset;
*/  


    }


    footer p {

        font-weight: 600;
        text-align: center;
        color: #fff;


    }




    pre code.hljs {
        display: block;
        overflow-x: auto;
        padding: 1em;
        text-align: left;

    }


    .post_typelearn {

      text-align: center;

    }


    .post_typelearn p {
      font-size: 0.7rem;
      margin: 0;
      text-align: center;
    }

    .post_typelearn img {

      width: 40px;

    }


    .post_typelearn button {

      width: 100px;
      border-radius: 20px;

    }

    .typelearn-mobile-notice {

      color: brown;
      
      font-weight: 600;
    }



    




    /* ====== モバイル用（iOS Safari 含む） ====== */
    @media (max-width: 768px){


      .language-setting form{
        margin-left:19px;
        margin-top:0px;
        color:#fff;
        font-weight:400;
        padding-top:3px;

        /* 追加：モバイルでも確実に中央揃え */
        display:flex;
        align-items:center;
        gap:.5rem;
      }

      .language-setting form label,
      .language-setting form select{
        font-size:14px;    /* iOSの拡大防止 */
        line-height:1.3;   /* 端末差を吸収 */
      }

      /* iOS向け微調整（必要なら） */
      @supports (-webkit-touch-callout: none){
        .language-setting form select{ line-height:1.4; }
      }


    }



    .tos-container {
        text-align: left;
    }


    .tos-actions button { 
        font-size: 0.8rem;

    }


    .pp-container {
        text-align: left;
    }

    .pp-actions button { 
        font-size: 0.8rem;
    }












}


/* 
   @media により、スタイルシートを適用する条件を指定することができます。
   例えば、スマートフォンサイズの場合と、PCディスプレイサイズの場合で、
   適用するスタイルシートを変更することができます。  
*/
@media screen and (max-width: 56rem) {



  #hamburger-menu {
    display: inline;
    z-index: 2;
  }



}