* {
  box-sizing: border-box;
  }

  *:focus {
    outline: none;
  }
  body {
  font-family: Arial;
  background-color: #3498DB;
  padding: 50px;
  }
  .login {
  margin: 20px auto;
  width: 300px;
  }
  .login-screen {
  background-color: #FFF;
  padding: 20px;
  border-radius: 5px
  }

  .app-title {
  text-align: center;
  color: #777;
  margin-bottom: 1.5em;
  }

  .login-form {
  text-align: center;
  }
  .control-group {
  margin-bottom: 10px;
  }

  .login-field {
  text-align: center;
  background-color: #ECF0F1;
  border: 2px solid transparent;
  border-radius: 3px;
  font-size: 16px;
  font-weight: 200;
  padding: 10px 0;
  width: 250px;
  transition: border .5s;
  }
  .login-field:disabled {
    background-color: #434547; /* 無効状態の背景色 */
  }

  .login-field:enabled {
    background-color: #ECF0F1; /* 有効状態の背景色 */
  }
  .app-title h6{
    font-size: 14px;
    line-height: 1.3;
    margin-bottom: 0.5em;
  }
  input:focus {
  border: 2px solid #3498DB;
  box-shadow: none;
  }

  .btn {
    border: 2px solid transparent;
    background: #3498DB;
    color: #ffffff;
    font-size: 16px;
    line-height: 25px;
    padding: 10px 0;
    text-decoration: none;
    text-shadow: none;
    border-radius: 3px;
    box-shadow: none;
    transition: 0.25s;
    display: block;
    width: 250px;
    margin: 0 auto;
	cursor: pointer;
  }

  .btn:hover {
    background-color: #2980B9;
  }

  .login-link {
    font-size: 12px;
    color: #444;
    display: block;
    margin-top: 12px;
  }
/* ----- css reset(各ブラウザで指定されているスタイルを初期化)と全体設定 ----- */

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, input, textarea, p, th, td, img {
	margin: 0; /*ボックス外側の余白(値1つは上下左右をまとめて指定)*/
	padding: 0; /*ボックス内側の余白(値1つは上下左右をまとめて指定)*/
	border: 0; /*境界線指定*/
}

body {
	background-color: #ffffff; /*背景色指定*/
	line-height: 2;	/*行の高さ指定(数値のみの場合はfont-sizeの倍数)*/
	font-family: "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro"; /*フォントの種類指定(左から優先順位)*/
	font-size: 62.5%; /* フォントサイズ指定(%はブラウザに設定した標準文字サイズ(通常16px)に対する値)*/
	color: #000000; /*文字色指定*/
	background-image: url("/images/back.jpeg");
	background-size: cover;
	background-attachment: fixed;
	background-repeat: no-repeat;
}

ol, ul {
	list-style: none; /*リストマーカーの種類指定(noneはなし)*/
}

a { /*リンクの文字設定(マウスをのせる前)*/
	color: #000000; /*文字色指定*/
	text-decoration: underline; /*テキストの装飾指定(下線、上線など)(noneはなし)*/
}

a:hover { /*リンクの文字設定(マウスをのせた時)*/
	color: #A8A7A6; /*文字色指定*/
	text-decoration: none; /*テキストの装飾指定(下線、上線など)(noneはなし)*/
}

.color1 {
	color: #ff3300; /*文字色指定*/
}

/* ----- ヘッダー(ページの一番上の部分) ----- */

#header {
	position: fixed; /*ボックスの配置方法(fixedは固定)*/
	left: 10px; /*左からの距離(positionで指定している場合に適用)*/
	top: 10px; /*上からの距離(positionで指定している場合に適用)*/
	height: 200px; /*領域の高さ指定*/
}

#header h1 {
	margin: 10px 0 0 10px; /*ボックス外側の余白(値4つは左から上,右,下,左の値)*/
	font-size: 2.0em; /*フォントサイズ指定(emはフォントの高さを１とした相対指定)*/
	font-weight: normal; /*フォントの太さ指定(normalは標準)*/
	color: #000000; /*文字色指定*/
}

#header h3 {
	margin: 10px 0 0 10px; /*ボックス外側の余白(値4つは左から上,右,下,左の値)*/
	font-size: 1.2em; /*フォントサイズ指定(emはフォントの高さを１とした相対指定)*/
	font-weight: normal; /*フォントの太さ指定(normalは標準)*/
	color: #000000; /*文字色指定*/
}

#logo {
	margin: 0 0 0 20px; /*ボックス外側の余白(値4つは左から上,右,下,左の値)*/
}

/* ----- レイアウト ----- */

.content {
	position: absolute; /*ボックスの配置方法(absoluteは絶対位置配置)*/
	width: 100%; /*幅指定(100%は画面横幅いっぱいに表示)*/
	height: 100%; /*領域の高さ指定*/
	overflow: auto; /*ボックスのはみ出た部分の表示指定(auroはブラウザに依存)*/
}

.content-body {
	margin: 60px 6rem 0 6rem; /*ボックス外側の余白(値4つは左から上,右,下,左の値)*/
	font-size:1.0rem;
	line-height: 2em; /*行の高さ指定*/
	color: #000000; /*文字色指定*/
}

#home {
	top: 0; /*上からの距離*/
	left: 0; /*左からの距離*/
}

#news {
	top: 0; /*上からの距離*/
	left: 100%; /*左からの距離*/
}

#category1 {
	top: 100%; /*上からの距離*/
	left: 200%; /*左からの距離*/
}

#category2 {
	top: 100%; /*上からの距離*/
	left: 300%; /*左からの距離*/
}

/* ----- ナビゲーションメニュー ----- */


#menu {
	position: fixed; /*ボックスの配置方法(fixedは固定)*/
	top: 100px; /*上からの距離*/
	left: 20px; /*左からの距離*/
}

#menu li {
	padding: 5px 20px; /*ボックス内側の余白(値2つは左から上下,左右の値)*/
}

#menu a {
	color: #000000; /*文字色指定*/
	font-size: 1em; /*フォントサイズ指定(emはフォントの高さを１とした相対指定)*/
	font-weight: bold; /*フォントの太さ指定(boldは太字)*/
	text-transform: uppercase; /*フォントの大文字小文字指定(uppercaseは全て大文字)*/
	text-decoration: none; /*テキストの装飾指定(下線、上線など)(noneはなし)*/
}

#menu a:hover {
	color: #c9171e; /*文字色指定*/
}

/* ----- フッター(ページの一番下の部分) ----- */

#footer {
	position: fixed; /*ボックスの配置方法(fixedは固定)*/
	bottom: 20px; /*下からの距離*/
	width: 100%; /*幅指定(100%は画面横幅いっぱいに表示)*/
}

#footer p {
	text-align: center; /*行の水平方向の揃え方(centerは中央揃え)*/
	font-size: 0.75em; /*フォントサイズ指定(emはフォントの高さを１とした相対指定)*/
	color: #A8A7A6; /*文字色指定*/
}

/* ----- コンテンツ ----- */

.content h2 {
	display: inline-block;
	color: #f6c063; /*文字色指定*/
	font-size: 1.5rem; /*フォントサイズ指定(emはフォントの高さを１とした相対指定)*/
	margin-bottom: 15px;
	background: #1c1cad;
	padding: 8px 15px;
	border-radius: 5px;
}

.content h1 {
	font-size: 2.0rem;
	font-weight: bold;
	padding: 0.5em 0.8em;
	margin-bottom: 0.2em;
	color: #ffffff;
	border-radius: 0.3em;
	background: #00B099;
	display: inline-block;
}

#result1 {
    background: #00B099;
}

#result2 {
    background: #803d3d;
	font-size: 20px;
}

#result3 {
    background: #666666;
	font-size: 20px;
}

.content p {
	font-size: 1.6rem; /*フォントサイズ指定(emはフォントの高さを１とした相対指定)*/
	margin-left: 1.0em; /*ボックス外側下の余白*/
	line-height: 1.8em; /*行の高さ指定(emはフォントの高さを１とした相対指定)*/
	display: inline-block;
	font-weight:bold;
	border-bottom: solid 3px #000;
}
.content ul {
 font-size: 1.0rem;
 margin-bottom: 1.5em; /*ボックス外側下の余白*/
 display: inline-block;
 margin-left: 1.5em; /*ボックス外側下の余白*/
 margin-right: 1em; /*ボックス外側下の余白*/
}

/* .content ul li {
} */

form{
	font-size: 1.4rem;
}

.centered-image {
	display: block;
	margin: 0 auto; /* 自動的に左右のマージンを計算して中央揃えに */
	margin-top: 0; /*ボックス外側上の余白*/
	width: 60%; /* 画像のサイズを調整する場合（ここでは幅を画面の50%に設定） */
	height: auto; /* 高さを自動で調整して比率を保持 */
}

.video-container {
	flex-grow: 1;
	width: 100%;
	display: flex;
	justify-content: center;  /* 水平方向の中央揃え */
}

iframe {
	width: 560px;             /* 埋め込みビデオの幅 */
	height: 315px;            /* 埋め込みビデオの高さ */
	border: none;             /* フレームボーダーを非表示にする */
}
/* ---- テーブルの設定 ----- */

.ta {
	width: 600px; /*幅指定*/
	border-collapse: collapse; /*境界線の表示指定(collapseは重ねて表示)*/
	padding-left: 30px; /*ボックス内側左の余白*/
}

.ta th {
	border: none; /*境界線の一括指定(noneはなし)*/
	color: #000000; /*文字色設定*/
	padding: 5px 10px; /*ボックス内側の余白(値2つは左から上下,左右の値)*/
	font-size: 1em; /*フォントサイズ指定(emはフォントの高さを１とした相対指定)*/
	text-align: center; /*行の水平方向の揃え方(leftは左寄せ)*/
}

.ta td {
	border: none; /*境界線の一括指定(noneはなし)*/
	color: #000000; /*文字色設定*/
	padding: 5px 10px; /*ボックス内側の余白(値2つは左から上下,左右の値)*/
	font-size: 1em; /*フォントサイズ指定(emはフォントの高さを１とした相対指定)*/
	text-align: left; /*行の水平方向の揃え方(leftは左寄せ)*/
}

.ta a {
	color: #000000
	; /*文字色設定*/
	text-decoration: underline; /*テキストの装飾指定(下線、上線など)(underlineは下線)*/
}

.ta a:hover {
	color: #A8A7A6; /*文字色指定*/
	text-decoration: none; /*テキストの装飾指定(下線、上線など)(noneはなし)*/
}

.c-form-text {
    height: 2.5rem;
    width: 40rem;
	font-size: 1.4rem;
    padding: 0 16px;
    border-radius: 4px;
    border: none;
    box-shadow: 0 0 0 1px #ccc inset;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.c-form-text:focus {
    outline: 0;
    box-shadow: 0 0 0 2px rgb(33, 150, 243) inset;
}

.c-form-num {
	width: 2.3rem;
	height: 2.3rem;
	font-size: 1.4rem;
    border-radius: 1px;
    border: none;
    box-shadow: 0 0 0 1px #ccc inset;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: textfield;
}

.c-form-num:focus {
    outline: 0;
    box-shadow: 0 0 0 2px rgb(33, 150, 243) inset;
}

.c-form-num::-webkit-inner-spin-button,
.c-form-num::-webkit-outer-spin-button {
 appearance: none;
 -webkit-appearance: none;
 -moz-appearance: textfield;
}

.title{
	width:100%;
}

.submittitle {
	text-align: center;
}

.c-form-submit-button {
    display: inline-block;
    width: 95%;
    padding: 8px;
    border: none;
    border-radius: 4px;
    background-color: #333;
    color: #fff;
    font-weight: bold;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    border: 2px solid transparent;
	margin-bottom: 1.5em;
	font-size: 1.8rem;
}

.c-form-submit-button:hover {
    background-color: #000;
}

.c-form-submit-button:focus {
    outline: 0;
    background-color: #000;
    border: 2px solid rgb(33, 150, 243);
}

/* ローディング画面のスタイル */
.loading-overlay {
    justify-content: center;
    align-items: center;
	display: flex;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
	z-index: 9999;
}

.loading-message {
	position: absolute;
	top: 50%;
	left: 50%;
	color: #fff;
	transform: translate(-50%, -50%);
	font-size: 20px;
}

.spinner {
	margin: 100px auto;
	width: 50px;
	height: 40px;
	justify-content: center;
    align-items: center;
	text-align: center;
	font-size: 10px;
  }

  .spinner > div {
	background-color: #333;
	height: 100%;
	width: 6px;
	display: inline-block;
	top: 45%;
	left: 50%;
	-webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
	animation: sk-stretchdelay 1.2s infinite ease-in-out;
  }

  .spinner .rect2 {
	-webkit-animation-delay: -1.1s;
	animation-delay: -1.1s;
  }

  .spinner .rect3 {
	-webkit-animation-delay: -1.0s;
	animation-delay: -1.0s;
  }

  .spinner .rect4 {
	-webkit-animation-delay: -0.9s;
	animation-delay: -0.9s;
  }

  .spinner .rect5 {
	-webkit-animation-delay: -0.8s;
	animation-delay: -0.8s;
  }

  @-webkit-keyframes sk-stretchdelay {
	0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
	20% { -webkit-transform: scaleY(1.0) }
  }

  @keyframes sk-stretchdelay {
	0%, 40%, 100% {
	  transform: scaleY(0.4);
	  -webkit-transform: scaleY(0.4);
	}  20% {
	  transform: scaleY(1.0);
	  -webkit-transform: scaleY(1.0);
	}
  }

  @keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        display: none;
        opacity: 0;
        z-index: -1;
    }
}
.spinner-container {
    display: flex;
    justify-content: center;
    align-items: center; /* 垂直方向の中央揃え */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translateY(-10%); /* 上に少し移動 */
}

* コンテナのスタイル設定 */
.container {
	display: none;
	width: 50%;
	height: 100vh;
	flex-direction: column;
}

/* 黒色四角形のスタイル設定 */
.black-box {
	background-color: black;
	color: white;
	flex-grow: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* 緑色四角形のスタイル設定 */
.green-box {
	background-color: green;
	color: white;
	flex-grow: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* シェアボタンのスタイル */
.share-button img {
	height: 40px; /* ボタンのサイズを設定 */
}

#vocalSeparation {
    width: 360px;  /* ドロップダウンリストの幅 */
    height: 40px;  /* ドロップダウンリストの高さ */
    font-size: 16px;  /* テキストのサイズ */
    padding: 5px 10px;  /* 内側の余白 */
}

select {
    cursor: pointer;  /* カーソルをポインターに設定 */
    border: 2px solid #ccc;  /* 境界線のスタイル */
    border-radius: 5px;  /* 境界線の角を丸くする */
}

.main-container{
	margin-left: 1.5em;
}

input[type="file"] {
    font-size: 16px;  /* フォントサイズを大きくする */
    padding: 10px 20px;  /* パディングを追加してボタンを大きくする */
    border: 2px solid #ccc;  /* 境界線のスタイルを定義 */
    border-radius: 5px;  /* 角を丸くする */
    cursor: pointer;  /* カーソルをポインターに設定 */
    background-color: #f8f8f8;  /* 背景色を設定 */
}

.popup {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid #ccc;
    background-color: white;
    padding: 20px;
    z-index: 1100;
    width: 380px;
    display: none; /* 初期状態では非表示 */
}

.popup-bg-cover{
	position: fixed; /* ブラウザの定位置に固定 */
	background: rgba(0, 0, 0, .5); /* 背景色を半透明の黒色に */
	width: 100%; /* 要素の横幅を画面全体に */
	height: 100%; /* 要素の高さを画面全体に */
	top: 0; /* 要素の固定位置をブラウザ最上部に合わせる */
	left: 0; /* 要素の固定位置をブラウザ左側に合わせる */
	z-index: 1000; /* 要素をコンテンツより前面に（要調整） */
  display: none; /* 初期状態では非表示 */
}

.popup-close {
	/* ポップアップ内の閉じるボタン */
	position: relative;
	display: inline-block;
	background: #09f;
	color: #fff;
	padding: 0 1em;
	border-radius: 3px;
	cursor: pointer;
	left: 50%;
	transform: translateX(-50%);
}

.button-container {
    display: flex; /* Flexboxを使用してボタンを横に並べます */
    justify-content: space-between; /* ボタン間にスペースを最大限に設定 */
    padding: 10px; /* パディングを追加 */
    background-color: #f4f4f4; /* 背景色 */
    border: 1px solid #ccc; /* 境界線 */
    border-radius: 5px; /* 角を丸める */
    width: 90%; /* コンテナの幅 */
    margin: 20px auto; /* 中央揃え */
}

.c-form-signup-button {
    flex: 1; /* Flexアイテムとしてのボタンの拡張性を設定 */
    margin: 0 5px; /* ボタン間のマージン */
    padding: 8px 8px; /* 上下のパディング */
    background-color: #007bff; /* ボタンの背景色 */
    color: white; /* テキスト色 */
    border: none; /* 境界線なし */
    border-radius: 5px; /* ボタンの角を丸める */
    cursor: pointer; /* ホバー時のカーソルをポインターに */
    transition: background-color 0.3s; /* 背景色の変化をスムーズに */
	font-size: 1.4rem;
	font-weight: bold;
}

.c-form-signup-button:hover {
    background-color: #0056b3; /* ホバー時の背景色を暗く */
}


/* .c-form-signup-button {
  display: inline-block;
  width: 95%;
  padding: 8px;
  border: none;
  border-radius: 4px;
  background-color: #1cb85a;
  color: #090909;
  font-weight: bold;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  border: 2px solid transparent;
  margin-left: 1.5em;
margin-bottom: 1.5em;
font-size: 1.8rem;
} */

.credit-info {
    width: 90%; /* 幅の設定 */
    margin: 20px auto; /* 中央揃え */
    padding: 10px; /* パディング */
    background-color: #f4f4f4; /* 淡い背景色 */
    border: 1px solid #d1d1d1; /* 縁取り */
    border-radius: 10px; /* 角丸 */
    display: block; /* 初期は非表示 */
    text-align: center; /* テキストを中央揃え */
    font-family: Arial, sans-serif; /* フォントスタイル */
    color: #333; /* テキストの色 */
}