@charset "utf-8";


	/*PC・タブレット・スマホ(全端末)共通設定
	------------------------------------------------------------------------------------------------------------------------------------------------------*/

	/*全体の設定
	---------------------------------------------------------------------------*/
	body {
		margin: 0px;
		padding: 0px;
		letter-spacing: 3px;
		-webkit-text-size-adjust: none;
		color: #000000;	/*全体の文字色*/
		font-family: "Zen Kaku Gothic New", sans-serif;	/*フォント種類*/
		font-size: 16px;	/*文字サイズ*/
		line-height: 1.7;		/*行間*/
		background: #fff;	/*背景色*/
	}
	h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,form,input{margin: 0px;padding: 0px;font-size: 110%;font-weight: normal;}
	ul {list-style-type: none;}
	ol {padding-left: 40px;padding-bottom: 15px;}
	img {border: none;max-width: 100%;height: auto;vertical-align: middle;}
	iframe {width: 100%;}

	/*リンク（全般）設定
	---------------------------------------------------------------------------*/
	a {
		color: #999;	/*リンクテキストの色*/
		transition: 0.3s;	/*マウスオン時の移り変わるまでの時間設定。0.3秒。*/
	}
	a:hover {
		color: #ff92c8;	/*マウスオン時の文字色*/
	}

	/*コンテナー（ホームページを囲む一番外側のブロック）
	---------------------------------------------------------------------------*/
	#container {
		max-width: 850px;	/*ブロックの最大幅*/
		margin: 0 auto;
	}


	/*ヘッダー（ロゴが入った最上段のブロック）
	---------------------------------------------------------------------------*/
	header {
	  display: flex;
	  justify-content: center; /* 水平方向の中央揃え */
	  align-items: center;     /* 垂直方向の中央揃え */
	  overflow: hidden;
		background-color: #e5e5e5; /* バナーの背景色 */
	}

	#logo img {
	  max-width: 100%;  /* 親要素の幅を超えない範囲で最大表示 */
	  max-height: 300px; /* 最大高さを300pxに設定（必要に応じて調整） */
	  width: auto;
	  height: auto;
	}

	/*コンテンツ（見出しバーや文字などが入っているブロック）
	---------------------------------------------------------------------------*/
	/*コンテンツのh2タグの設定*/
	#contents h2 {
		clear: both;
		margin-bottom: 20px;
		color: #fff;		/*文字色*/
		padding: 10px 20px;	/*上下、左右への余白*/
		background: #ff66d0;	/*背景色*/
	}
	/*コンテンツのh3タグの設定*/
	#contents h3 {
		clear: both;
		margin: 20px auto 20px;	/*ロゴの上と下に20pxスペースを空ける設定*/
		text-align: center;
		text-decoration: underline;
		font-weight: bold;
		font-size: 150%;
		color: #ff66d0;		/*文字色*/
		padding: 8px 20px;	/*上下、左右への余白*/
		background: #e5e5e5;	/*背景色*/
		border: 2px solid #e5e5e5;	/*枠線の幅、線種、色*/
	}
	/*コンテンツのp(段落)タグ設定*/
	#contents p {
		padding: 20px 20px 20px;	/*上、左右、下への余白*/
	}
	/*他。微調整。*/
	#contents p + p {
		margin-top: -5px;
	}
	#contents h2 + p,
	#contents h3 + p {
		margin-top: -10px;
	}
	#contents section + section {
		margin-top: 30px;
	}

	/*フッター(ページ最下部のcopyrightのパーツ)設定
	---------------------------------------------------------------------------*/
	footer {
		clear: both;
		text-align: center;	/*文字をセンタリング*/
		padding: 30px 0px 10px;	/*上、左右、下へのボックス内の余白*/
	}



	/*その他
	---------------------------------------------------------------------------*/
	.look {background: #e5e5e5;padding: 5px 10px;border-radius: 4px;}
	.mb15,.mb1em {margin-bottom: 15px;}
	.color1 {color: #ff66d0;}
	.pr {font-size: 12px;}
	.wl {width: 96%;}
	.ws {width: 50%;}
	.c {text-align: center;}
	.r {text-align: right;}
	.l {text-align: left;}




	/*画面幅580px以下の設定
	------------------------------------------------------------------------------------------------------------------------------------------------------*/
	@media screen and (max-width:580px){

	/*全体の設定
	---------------------------------------------------------------------------*/
	body {
		font-size: 12px;	/*文字サイズ*/
		line-height: 1.5;	/*行間*/
	}

	}

	/*統合時作成

	---------------------------------------------------------------------------*/
	.content {
		max-width: 1200px;
		margin: 0 auto;
			padding-right: 10px;
			padding-left: 10px;
	}
	.question-group {
		margin-bottom: 20px;
	}
	.question-text {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 10px;
	}
	.question-label {
		display: block;
	}
	label {
		display: flex;  /* flexbox を使う */
		align-items: center; /* テキストとチェックボックスを縦方向に中央揃え */
		margin-bottom: 10px;
		cursor: pointer;
	}
	input[type="checkbox"] {
		margin-right: 8px;
		transform: scale(1.2);
	}

	/* セルフチェック診断についてエリアの背景色 */
	#container > .section {
	  background-color: #fff; /* 白 */
	}

	/* Aエリア、Cエリア、Eエリア... の背景色 */
	#quizForm > #contents > section:nth-child(odd) {
	  background-color: #f2f2f2; /* グレー */
	}

	/* Bエリア、Dエリア、Fエリア... の背景色*/
	#quizForm > #contents > section:nth-child(even) {
	  background-color: #fff; /* 白 */
	}

	/* 診断結果ボタン */
	.result-button {
	  display: block;
	  width: 80%;
	  max-width: 500px;
	  margin: 50px auto 0;
	  padding: 10px;
	  background-color: #ff66d0; /* ピンク */
	  color: #fff;
	  border: none;
	  border-radius: 5px;
	  font-size: 20px;
	  font-weight: bold;
	  cursor: pointer;
	  transition: background-color 0.3s ease;
	}

	.result-button:hover {
	  background-color: #cc337a;
	}


	/* チェックボックスを押したときのスタイル */
	input[type="checkbox"]:checked {
	  accent-color: #ff66d0; /* ピンク */
	}

	    #result-star {
      font-size: 200%;
      font-weight: bold;
      text-align: center;
      margin-bottom: 20px;
      color: #ff66d0;
    }
		    /*h2タグの設定*/
    #result-content-column h2 {
	font-size: 150%;
    text-align: center;
    font-weight: bold;
	clear: both;
	margin-bottom: 20px;
	color: #fff;		/*文字色*/
	padding: 10px 20px;	/*上下、左右への余白*/
	background: #ff66d0;	/*背景色*/

    }

    /*h3タグの設定*/
    #result-content-column h3 {
    text-align: center;
    	text-decoration: underline;
		font-weight: bold;
		font-size: 180%;
	clear: both;
	margin: 20px auto 20px;	/*ロゴの上と下に20pxスペースを空ける設定*/
	color: #ff66d0;		/*文字色*/
	padding: 10px 20px;	/*上下、左右への余白*/
	background: #e5e5e5;	/*背景色*/
	border: 2px solid #e5e5e5;	/*枠線の幅、線種、色*/

    }

    #result-content {
      max-width: 100%;
      margin: 0 auto;
    }
	#line-registration {
		background-color: #f5f5f5;
		padding: 20px;
		border-radius: 10px;
		margin-top: 30px;
	  }
	  
	  #line-content {
		text-align: center;
		margin-bottom: 20px;
	  }
	  
	  #line-content p {
		margin-bottom: 15px;
		line-height: 1.6;
		  text-align: left;
	  }
	  
	  #line-button {
		display: block;
		width: 80%;
		max-width: 300px;
		margin: 20px auto;
		padding: 15px;
		background-color: #00c300;
		color: #fff;
		border: none;
		border-radius: 5px;
		font-size: 18px;
		text-align: center;
		text-decoration: none;
		font-weight: bold;
		transition: background-color 0.3s ease;
	  }
	  
	  #line-button:hover {
		background-color: #00a000;
	  }
		/*画面幅が800以下の場合*/
		@media print, screen and (max-width: 800px) {
	    #result-description {
        padding: 4vw 3vw;
    }
		#container {
		padding: 0 3%;
	}
	}
	@media print, screen and (min-width: 800px) {
		header {
		padding: 0 3%;
		background-clip: content-box;
		}
		#result-content-column h3 {
			font-size: 200%;
		}
	    #result-description {
        padding: 3vw 2vw;
    }
	#line-content p{
		font-size: 100%;
		text-align: left;
	}
	}

	
#result-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.overlay-content {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    max-width: 80%;
    max-height: 80%;
    overflow-y: auto;
    text-align: left; ;
}

.overlay-content h2 {
    color: #ff66d0;
    margin-bottom: 20px;
	text-align: center;
}

.overlay-content p {
    margin-bottom: 15px;
}

.overlay-content button {
    background-color: #ff66d0;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s;
  /* ボタンを中央に配置するための追加スタイル */
  display: block;
  margin: 0 auto;
  width: fit-content; /* ボタンの幅を内容に合わせる */
}

.overlay-content button:hover {
    background-color: #cc337a;
}