@charset "utf-8";
/* 冒頭でimport */
@import url('https://fonts.googleapis.com/css?family=Raleway:700&display=swap');
@import url('https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c:400,700&display=swap&subset=japanese');
/* フォントを指定したいところで */

logo img{
    border-radius: 50%;
    width: 150px;
    height: 150px;
    object-fit: cover; /* 画像のトリミング */
}

logotohome img{
    border-radius: 70%;
    width: 70px;
    height: 70px;
    object-fit: cover; /* 画像のトリミング */
}



/* ========== common ========== */
html, body {
	font-size: 16px;
	font-family: sans-serif;
	color: #393939;
    margin-left: 15px;
    margin-bottom: 40px;
	background: #efefef;
}
h1{
    text-indent: 0em;
}
h2{
    margin-left: 1em;
    margin-top: 1em;
}
h3{
    margin-left: 2em;
}
div{
    margin-top: 1em;
    margin-left: 3em;
}
p{
    margin-left: 3em;
}
span.blackback{
    text-indent: 3em;
    background: #393939;
    color: #efefef;
}
/* ===================================================
   Emerald Capsule Buttons
   =================================================== */

/* 基本のカプセルボタン（エメラルドグリーン塗りつぶし） */
a.btn, button, .button {
    display: inline-block;
    padding: 12px 32px;
    font-family: 'JetBrains Mono', 'M PLUS 1 Code', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    
    /* ▼ カプセル型（完全に丸い両端） ▼ */
    border-radius: 9999px;
    
    /* 配色：鮮やかなエメラルドグリーン */
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #ffffff;
    border: none;
    
    /* やわらかい光彩と影 */
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
    transition: all 0.25s ease-in-out;
}

/* ホバー時：少し浮き上がり、明るく発光するエフェクト */
a.btn:hover, button:hover, .button:hover {
    background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.45);
    color: #ffffff;
}

/* クリックした瞬間：指で押したようなフィードバック */
a.btn:active, button:active, .button:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

/* ---------------------------------------------------
   サブ用：白ベース ＋ エメラルド枠線のカプセルボタン
   --------------------------------------------------- */
a.btn-outline, button.btn-outline {
    background: #ffffff;
    color: #059669;
    border: 2px solid #10b981;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.15);
}

a.btn-outline:hover, button.btn-outline:hover {
    background: #10b981;
    color: #ffffff;
    border-color: #10b981;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(16, 185, 129, 0.35);
}