/* ■■■■■■■■■ フォントを導入する ■■■■■■■■■■ */
@font-face {
    font-family: 'K-Gothic';
    src: url('font/K-Gothic.ttf') format('truetype');
}


/* ■■■■■■■■■ メモカラム ■■■■■■■■■■ */
@media (min-width: 800px) {

.mc {
    background-color: #21600f;
    z-index: -101; /*疑似要素の白よりさらに後ろに配置*/

    display: grid;
    grid-template-columns: 70% 30%;
    column-gap: 10px;
    row-gap: 0px;
    position: relative;
}
    
/*Grid-1 背景色*/
.mc::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 70%; /* 1列目の幅 */
    height: 100%; /* 全高 */
    background-color: #f1ebde;
    z-index: -100; /* 背景として後ろに配置 */
}

/*divは左側に塊*/
.mc div {
    grid-column: 1;
}

/*asideは 右側に塊*/
.mc aside {
    grid-column: 2;
}

/*p, main は左固定*/
.mc p .mc main {
    grid-column: 1;
}
}
    
    
    
/* ■■■■■■■■■ 感想フォームおよび感想欄 ■■■■■■■■■■ */
.comment-c {
    font-size: 30px;
    color: #4f4f4f;

    margin: 0;
    padding: 0;
    margin-top: 75px;

    position: relative;
}
.comment-c::before {
    content: 'コメント';
    padding-left: 5px;
    user-select: text;  /* ユーザーによる選択を許可 */
}
.comment-c::after {
    content: ''; /* 擬似要素の中身は空 */
    position: absolute; /* タイトルの位置を基準に配置 */
    bottom: -5px; /* テキストの少し下に配置 */
    left: 0;
    right: 0;
    top: 42.5px;
    height: 5px; /* 下線の太さ */
    background: linear-gradient(90deg, #a8c8ff 30%, #7476ff 80%, #7d5dff 30%);
    opacity: 0.7; /* 主張しすぎない透明度 */
}



/*コメントフォーム*/
.comment-c .form {
    width: 100%;
    margin: auto;
}

.comment-c .form textarea {
    width: 99%;
    height: 100px; /*デフォルトのフォームのサイズ*/
    border-radius: 8px;
    border: 1px solid #ccc;
    font-size: 16px;
    margin-top: 5px;
}

.comment-c .form #comments {
    margin-top: 20px;
}

.comment-c .form button {
    width: 100%;
    padding: 10px;
    background-color: #d3a564;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 18px;
    cursor: pointer;
}
.comment-c .form button::before {
    content: " コメントを送信";
}

.comment-c .form button.active::before {
    content: " コメントが送信されました！";
}
.comment-c .form button:hover {
    background-color: #a06e45;
}



/*コメント欄*/
.comment-c ul {
    margin: 0;
    padding: 0;
    margin-top: 10px;
}

.comment-c ul li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.comment-c hr {
    margin: 0;
    margin-bottom: 15px;
}

.comment-c a {
    margin-right: 5px;
    font-size: 15px;
}

.comment-c time {
    margin-left: 10px;
    font-size: 10px;
}



/*フォームとコメ欄をグリッド２列カラムする*/
@media (min-width: 1000px) {
.comment-c section{
    display: grid; /* 親要素をグリッド化 */
    grid-template-columns: 28% 70%;
    column-gap: 1.25%;
    direction: rtl; /* 右から並べる */
}
.comment-c section > * {
    direction: ltr; /* 子要素のテキストの向きは通常に戻す */
}
.comment-c .form textarea {
    width: 98%;
}
}
  
    


/* ■■■■■■■■■ 基本 ■■■■■■■■■■ */
/*=== body ===*/
body {
    user-select: none; /*ユーザーのコンテンツコピー禁止！*/

    font-family: 'Arial', sans-serif;
    font-size: 15px;
    font-weight: bold;
    color: #333;
    background-color: #f1ebde;
    text-align: left;
    overflow-x: hidden;
    line-height: 1.5;
   
    margin: 0;
    border-left: #ddbf83 solid 1.5vw;
    border-right: #ddbf83 solid 1.5vw;
}
@media (max-width: 799px) {
    body{
        padding-right: 10px;
        padding-left: 10px;
    }
}
@media (max-width: 299px) {
    body{
        padding: 0px;
    }
}



/*=== p ===*/
p {
    font-size: 18px;
    padding: 10px 20px;
    max-width: 100%;
    margin: 0;
    margin-top: 15px;
    color: #333;
    line-height: 1.7;
}

/*=== footer ===*/
footer {
    font-family: "Yuji Syuku";
}


/*=== URL ===*/
li {
    font-size: 1rem;
    margin-top: 10px;
    margin-left: 10px;
}
a {
    cursor: pointer;
    color: #007acc;
    word-break: break-word;
}
a:hover { 
    color: #5228d0 !important;
}
.link {
    font-family: 'Courier New', Courier, monospace;
    font-size: 30px;
}