/*************
	site.css
**************/
@charset "utf-8";
.input_error{
	background-color : #ef8c8c!important;
}

.ele_delete{
	display:none;
}

#table_master{
	th{
		padding : 4px;
		background-color: #dfdfdf;
	}
}

.font-small{
	font-size : 0.8em;
	height : 42px;
}

.btn_disable{
	background-color: transparent !important;
    color: gray !important;
    border-color: gray !important;
    cursor: default!important;
}

#Form_main{
	width : 1000px;
	margin : auto;
	
	.table_master{
		th,td{
			border-bottom: 1px solid #666;
			
		}
		
		tr:first-child{
			th,td{
				border-top: 1px solid #666;
			}
		}
		
		th {
			background-color: #b1ffed;
			padding: 5px 5px;
		}
		
		td {
			padding: 5px 5px;
		}
		
		.text_input1{
			border-radius: 5px;
		}
	}
}


:root{
      --bg: #ffeaf2;
      --bg-grad-1: #fff5f9;
      --bg-grad-2: #ffe3ef;
      --pink: #ff8fb7;
      --pink-dark: #cc6f94;
      --rose: #ff4f8b;
      --text: #5a3d4b;
      --accent: #ffd1dc;
      --white: #ffffff;
      --green: #39b54a; /* グリーンバックの示唆 */
      --shadow: 0 8px 22px rgba(255, 143, 183, 0.25);
    }

    /* ベース */
    html, body {
      height: 100%;
      background:
        radial-gradient(1200px 600px at 10% -20%, var(--bg-grad-1), rgba(255,255,255,0)),
        radial-gradient(1200px 600px at 110% -20%, var(--bg-grad-2), rgba(255,255,255,0)),
        var(--bg);
      font-family: "Hiragino Sans", "Noto Sans JP", "Yu Gothic", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
      color: var(--text);
      margin: 0;
    }

    /* バナー（ガーランド） */
    .garland {
      position: relative;
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 8px;
      padding: 18px 12px 8px;
      overflow: hidden;
    }
    .garland::before,
    .garland::after {
      content: "";
      position: absolute;
      left: -10%;
      right: -10%;
      top: 0;
      height: 2px;
      background: repeating-linear-gradient(
        to right,
        #ffd1dc 0 24px,
        #ffc2cf 24px 48px
      );
    }
    .flag {
      height: 28px;
      background:
        linear-gradient(135deg, rgba(255,255,255,0.7), rgba(255,255,255,0)) 0 0/100% 100%,
        repeating-linear-gradient(45deg, #ffc8d6 0 6px, #ffe0e7 6px 12px);
      clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%);
      border-radius: 4px;
      box-shadow: 0 2px 0 rgba(255, 143, 183, 0.25);
    }

    /* コンテナ */
    .wrap {
      max-width: 980px;
      margin: 0 auto;
      padding: 24px 16px 24px 16px;
    }

    /* ヒーロー */
    .hero {
      background: var(--white);
      border: 2px dashed var(--accent);
      border-radius: 20px;
      box-shadow: var(--shadow);
      padding: 24px;
      display: grid;
      grid-template-columns: 1.2fr 1fr;
      gap: 24px;
      align-items: center;
    }

    /* タイトル */
    .title {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 0 0 12px;
      color: var(--pink-dark);
	  position: relative;
    }
    .title .heart {
      width: 24px; height: 24px;
      background: radial-gradient(circle at 30% 30%, #ffb3c9, #ff8fb7);
      clip-path: path("M12 21 C-6 12 3 0 12 6 C21 0 30 12 12 21 Z");
      transform: translateY(2px);
    }
    h1 {
      font-size: 1.8rem;
      letter-spacing: .02em;
      margin: 0;
    }
    .subtitle {
      font-size: .95rem;
      color: #7a5668;
      margin: 6px 0 0;
    }

    /* プレースホルダー（顔写真＆グリーンバック） */
    .placeholder2 {
      background:
        linear-gradient(180deg, #fef7fa, #fff);
      border: 1px solid var(--accent);
      border-radius: 16px;
      padding: 16px;
      display: grid;
      grid-template-rows: auto 1fr;
      gap: 12px;
      box-shadow: 0 4px 16px rgba(255, 143, 183, 0.18);
    }
    .preview {
      aspect-ratio: 4/3;
      border-radius: 12px;
      overflow: hidden;
      position: relative;
      background:
        linear-gradient(0deg, #e6fff0, #caffd9); /* 柔らかいグリーンバック */
      display: grid;
      place-items: center;
    }
    .avatar {
      width: 42%;
      max-width: 260px;
      aspect-ratio: 1;
      border-radius: 50%;
      background:
        radial-gradient(circle at 50% 30%, #cfcfd4 0 12%, #b7b9c2 12% 26%, #a3a6b1 26% 40%, #8c90a0 40% 100%);
      box-shadow: 0 6px 16px rgba(90,61,75,.15);
      position: relative;
    }
    .avatar::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 50%;
      outline: 6px dotted var(--accent);
      outline-offset: 4px;
    }

    .label {
      font-size: .9rem;
      color: #7a5668;
      display: flex; align-items: center; gap: 8px;
    }
    .label .daisy {
      width: 18px; height: 18px;
      background:
        radial-gradient(circle, #fff 45%, #ffe58f 46% 70%, transparent 71%);
      border-radius: 50%;
      box-shadow: 0 0 0 3px #ffdbe4 inset;
    }

    /* アクション */
    .actions {
      display: grid;
      /*grid-template-columns: 1fr 1fr;*/
	  width : 80%;
      gap: 12px;
      margin-top: 8px;
	  margin : auto;
    }
   
    .btn:hover {
      /*transform: translateY(-1px);*/
      filter: brightness(1.05);
      box-shadow: 0 10px 24px rgba(255, 79, 139, 0.28);
	  transform: scale(1.05);
    }
    .btn:active { transform: translateY(0); }

    .btn-outline {
      background: var(--white);
      color: var(--pink-dark);
      border: 2px solid var(--accent);
      box-shadow: none;
    }
	
	.btn{
		font-size: 16px;
		padding: 12px 28px;
		border: none;
		border-radius: 25px;
		box-shadow: 0 0 10px rgba(246, 174, 255, 0.6);
		cursor: pointer;
		transition: 0.4s;
	}
	
	.btn1 {
		background: linear-gradient(135deg, #43bd8c, #81bd41);
		color: white;
		
	}
	
	.btn2 {
		background: linear-gradient(135deg, #a49eed, #368f99);
		color: white;
	}
	
	.btn3 {
		background: linear-gradient(135deg, #ed9ebe, #d230db);
		color: white;
	}
	
	.btn4 {
		background: linear-gradient(135deg, #edc79e, #e33b3b);
		color: white;
	}
	
	.btn5 {
		background: linear-gradient(135deg, #d5d5d5, #b0c5bb);
		color: #6c6d9f;
	}
	
    /* ヘルプ */
    .help {
      margin-top: 16px;
      background: #fff7fb;
      border: 1px dashed var(--accent);
      border-radius: 14px;
      padding: 12px 14px;
      font-size: .9rem;
    }
    .help ul {
      margin: 8px 0 0;
      padding-left: 18px;
    }
    .help li {
      margin: 6px 0;
    }

    /* フッター装飾（お花リボン） */
    .footer {
      margin-top: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      color: #7a5668;
      font-size: .9rem;
    }
    .bow {
      width: 24px; height: 16px;
      background:
        radial-gradient(closest-side, #ffc8d6, #ffb3c9);
      clip-path: path("M0 8 C6 0, 10 0, 12 6 C14 0, 18 0, 24 8 C18 16, 14 16, 12 10 C10 16, 6 16, 0 8 Z");
      filter: drop-shadow(0 2px 2px rgba(255,143,183,.3));
    }
    .flower {
      width: 18px; height: 18px;
      background:
        radial-gradient(circle, #fff 45%, #ffe58f 46% 70%, transparent 71%);
      border-radius: 50%;
      box-shadow: 0 0 0 4px #ffdbe4 inset;
    }
	
	.popup_back_c{
		background-color: #fbe5e5!important;
	}
	
	/* プログレスバー */
	
  .bar-label-group {
    display: flex;
    align-items: center;
    color: #b8f7da;
    font-weight: bold;
    font-size: 14px;
	position:absolute;
	top: 7px;
    left: 15px;
  }
  
  .bar-outer {
    height: 24px;
    background: #fff0f3; /* 薄いピンク */
    border-radius: 50px;
    padding: 5px;
    box-shadow: inset 4px 4px 8px #fbcbd4, inset -4px -4px 8px #ffffff;
    border: 2px solid #ffccd5;
	position:relative;
  }

  .bar-inner {
    height: 100%;
    width: 80%; /* 進捗率 */
    background: linear-gradient(180deg, #ffb3c1, #ff758f);
    border-radius: 50px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 3px 6px rgba(255, 117, 143, 0.4);
    transition: width 1s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* 弾むような動き */
  }

  /* キラキラ流れるアニメーション */
  .shimmer {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(
      90deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0.6) 50%,
      rgba(255,255,255,0) 100%
    );
    animation: shine 2s infinite;
  }

  @keyframes shine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
  }

  @keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
  }
	
    /* レスポンシブ */
    @media (max-width: 860px) {
      .hero { grid-template-columns: 1fr; }
    }