@charset "UTF-8";
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

 :root {
      --header-gradient-start: #ff6f61;
      --header-gradient-end: #f7b733;
      --card-gradient-1: #6a11cb;
      --card-gradient-2: #2575fc;
      --card-gradient-3: #ff9a9e;
      --card-gradient-4: #fad0c4;
      --accent-color: #00c9a7;
      --accent-dark: #00a086;
      --background-color: #f0f4f8;
      --text-color: #333;
      --white: #fff;
    }
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: 'Poppins', sans-serif;
      background-color: var(--background-color);
      color: var(--text-color);
      line-height: 1.6;
    }
    .container {
      max-width: 1100px;
      margin: 0 auto;
      padding: 20px;
	  position: relative;
    }
    /*header {
      background: linear-gradient(135deg, var(--header-gradient-start), var(--header-gradient-end));
      color: var(--white);
	  padding: 10px 0 4px 0;
      text-align: center;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }
	
    header h1 {
      font-size: 2.5em;
      font-weight: 600;
    }
	.logo_area {
	  width: calc(100% / 3);
	  margin: 0 auto;
	}*/
	h2 {
	  font-weight: bold;
	}
	/* */
	.flex {
	  posision: relative;
      justify-content: center;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flex;
      display: -o-flex;
      display: flex;
    }
	/*.flex .logo_pc {
	  position: absolute;
	  top: 26px;
      right: 26px; 
	}*/
	@media screen and (min-width: 1024px) {
	  .flex .logo_sp {
	     display: none;
	  }
	  .flex .logo_pc {
	     position: absolute;
	     top: -10px;
         right: 26px; 
	  }
	}
	@media screen and (max-width: 1024px) {
	  .logo_area {
	     width: calc(100% / 2);
	     margin: 0 auto;
	 }  
	  .flex .logo_pc {
	     display: none;
	  }
	  .flex .logo_sp {
	     position: absolute;
	     top: 30px;
         right: 4px; 
	  }
	}
	/*footer {
	  position: relative;
	}*/
    /* 各カードに異なるグラデーション背景を設定 */
    .card {
      border-radius: 10px;
      padding: 30px;
      margin-bottom: 40px;
      text-align: center;
      color: var(--white);
      box-shadow: 0 4px 10px rgba(0,0,0,0.1);
      transition: transform 0.3s ease;
    }
    /*.card:hover {
      transform: translateY(-5px);
    }*/
    /* セクションごとの背景グラデーション */
    .card:nth-child(1) {
      background: linear-gradient(135deg, var(--card-gradient-1), var(--card-gradient-2));
    }
    .card:nth-child(2) {
      background: linear-gradient(135deg, var(--card-gradient-3), var(--card-gradient-4));
      color: var(--text-color);
    }
    .card:nth-child(3) {
      background: linear-gradient(135deg, var(--card-gradient-2), var(--card-gradient-1));
    }
    .card:nth-child(4) {
      background: linear-gradient(135deg, var(--card-gradient-4), var(--card-gradient-3));
      color: var(--text-color);
    }
    .card h2 {
      margin-bottom: 15px;
      font-size: 1.8em;
    }
    .card p {
      margin-bottom: 20px;
      font-size: 1em;
    }
    .btn {
      display: inline-block;
      padding: 12px 30px;
      border-radius: 50px;
      text-decoration: none;
      font-weight: 600;
      transition: background-color 0.3s ease;
    }
    .btn-primary {
      background-color: var(--header-gradient-start);
      color: var(--white);
    }
    .btn-primary:hover {
      background-color: var(--header-gradient-end);
    }
    .btn-accent {
      background-color: var(--accent-color);
      color: var(--white);
    }
    .btn-accent:hover {
      background-color: var(--accent-dark);
	  color: var(--white);
    }
	.btn-align-c {
	  text-align: center;
	}
    footer {
      background-color: #333;
      color: var(--white);
      text-align: center;
      padding: 20px;
      margin-top: 40px;
      font-size: 0.9em;
    }
    @media (max-width: 768px) {
      /*header h1 {
        font-size: 2em;
      }*/
      .card {
        padding: 20px;
      }
    }
    /* ポップアップモーダル */
    .modal {
      display: none;
      position: fixed;
      z-index: 1000;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0,0,0,0.5);
      justify-content: center;
      align-items: center;
    }
    .modal-content {
      background: var(--white);
      padding: 20px;
      border-radius: 10px;
      width: 90%;
      max-width: 400px;
      text-align: center;
      box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }
    .modal-buttons {
      margin-top: 20px;
      display: flex;
      justify-content: space-around;
    }
    .modal-buttons button {
      padding: 10px 20px;
      border: none;
      border-radius: 5px;
      font-size: 16px;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }
    .modal-buttons .move {
      background-color: var(--accent-color);
      color: var(--white);
    }
    .modal-buttons .move:hover {
      background-color: var(--accent-dark);
    }
    .modal-buttons .cancel {
      background-color: #777;
      color: var(--white);
    }
    .modal-buttons .cancel:hover {
      background-color: #555;
    }
	
	@media screen and (max-width: 1024px) { 
      #header .header-inner {
         padding: 16px 10px 26px;
      }
    }
	#header {
	    margin-top: -30px;
	}
	/*#header .header-inner {
	    max-width: 1200px;
	}*/