@charset "utf-8";

        html, body {
            margin: 0; /* マージンをリセット */
            padding: 0; /* パディングをリセット */

	-webkit-font-smoothing: antialiased;
	-webkit-overflow-scrolling: touch;
	line-height: 1.75;
	font-family: "Marcellus","Sawarabi Mincho","游明朝", "YuMincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN",cursive, Helvetica, Arial, sans-serif;
}


		a {	color:#52adcc;}
		a:visited { color: #52adcc;}
		a:hover { color: #C490BF; }
		a:active { color: #000000; }

        p { padding-top: 5px; }

        .container-fluid {
            padding: 0; /* コンテナのパディングを強制的に0に */
        }
        
        .text{line-height: 1.75;
        	font-size:15.5px;
        	font-family: "Marcellus","Sawarabi Mincho","游明朝", "YuMincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN",cursive, Helvetica, Arial, sans-serif;}

        
        .fade-in {
            opacity: 0;
            transition: opacity 1s ease-in-out;
        }
        .fade-in.visible {
            opacity: 1;
        }

/* Fonts */

.marcellus-regular {
  font-family: "Marcellus", serif;
  font-weight: 400;
  font-style: normal;
}

.poiret-one-regular {
  font-family: "Poiret One", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.sawarabi-mincho-regular {
  font-family: "Sawarabi Mincho", serif;
  font-weight: 400;
  font-style: normal;
}

.kaisei-decol-regular {
  font-family: "Kaisei Decol", serif;
  font-weight: 400;
  font-style: normal;
}

.kaisei-decol-medium {
  font-family: "Kaisei Decol", serif;
  font-weight: 500;
  font-style: normal;
}

.kaisei-decol-bold {
  font-family: "Kaisei Decol", serif;
  font-weight: 700;
  font-style: normal;
}

.dela-gothic-one-regular {
  font-family: "Dela Gothic One", sans-serif;
  font-weight: 400;
  font-style: normal;
}

/* bar */
        .side {
            background-image: linear-gradient(135deg, rgba(251, 213, 251, 1), rgba(149, 233, 243, 1));
            
        }
		@media (min-width: 576px) {
		.side {min-height: 100vh; }
		}
		
        @media (max-width: 576px) { 
            .side {
                max-height: 300px; /* 最大高さを設定 */
                min-height: 150px; /* 最小高さを設定（必要に応じて調整） */
                overflow: clip; /* コンテンツがオーバーフローする場合の処理 */
            }
        }

        .diamond {
            width: 200px; 
            height: 200px; 
            aspect-ratio: 1 / 1; 
            background-color: rgba(255, 255, 255, .3);
            border: thick double white;
            position: relative;
            margin: auto;
            transform: rotate(45deg);
        }

        .diamond-text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) rotate(-45deg);
            text-align: center;
            white-space: nowrap;
            font-family: "Poiret One";
            font-size: 3em;
        }

        /* メディアクエリでサイズを調整 */
        @media (max-width: 992px) { /* lg以下の画面幅 */
            .diamond {
                width: 150px; /* 縮小サイズ */
                height: 150px; /* 縮小サイズ */
            }
        }

        @media (max-width: 576px) { /* sm以下の画面幅 */
            .diamond {
                width: 300px;
                height: 300px;
            }
        }

        .content-wrapper {
            width: 80%; /* 幅を80%に設定 */
            margin: 0 auto; /* 中央に配置 */
            padding: 20px; /* 必要に応じてパディングを追加 */
        }