@charset "utf-8";
/* CSS Document */

body {
  font-family: 'Noto Sans JP', sans-serif;
  color: #222;
  background-color: #fff;
	margin: 0 auto 0 auto;
	width: 840px;
}

header {
	margin: 0 auto;
	width: 840px;
}

a:link{
	color: #4FB4FD;
}
a:visited{
	color:#FF6846;
}

/* header
------------------------------ */

.header {
	width:100%;
    background-color:#fff;
}

.header .logo {
	height: 75px;
	width: 200px;
	float: left;
	margin-top: -10px;
}



.header ul 	{
	list-style: none;
	padding:10px 10px;
	float: left;
}

.header ul li	{
	float: left;
	border-left: 2px solid #808080;
	padding-left: 5px;
	padding-right: 5px;
}

.header ul li:first-child {
  border: none; /* 親要素から見て一番目のli要素のボーダーを無しに */
}

.text1{
	text-align: center;
	border-bottom: solid 1px #808080;
}

.header input-area {
}


/* main
------------------------------ */

.text2{
	text-align: right;
	color: #4FB4FD;
}

.text3 {
	text-align: center;
}

.mainimage img {
	margin: auto;
  display: block;
}

th {
	text-align: center;
	padding-top: 35px;
	margin: auto;
	color: #FF6846;
	float: left;
}

table {
    margin-left: auto;
    margin-right: auto;
	text-align: left;
}

.tlnav1 ul 	{
	list-style: none;
	  border: 1px solid #fff;
  display: flex;
  justify-content: center;
}

.tlnav1 ul li	{
	float: left;
	border-left: 2px solid #808080;
	padding-left: 5px;
	padding-right: 5px;
	
}

.tlnav1 ul li:first-child {
  border: none; /* 親要素から見て一番目のli要素のボーダーを無しに */
}

/* 検索 */
.search {
  margin-top: 10px; /* 上に30pxのマージンを追加 */
}


#searchOverlay {
      display: none;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.6);
      z-index: 9999;
      overflow-y: auto;
    }

    #searchResults {
      background: #fff;
      margin: 5% auto;
      padding: 20px;
      width: 80%;
      max-width: 600px;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0,0,0,0.5);
    }

    #closeBtn {
      float: right;
      cursor: pointer;
      background: #f44336;
      color: white;
      border: none;
      padding: 5px 10px;
      border-radius: 4px;
    }

#searchOverlay {
	text-align: center;
}

 /* 検索結果 */

    #searchOverlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.6);
      z-index: 9999;
      overflow-y: auto;
    }

    #searchResults {
      background: #fff;
      margin: 5% auto;
      padding: 20px;
      width: 80%;
      max-width: 600px;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0,0,0,0.5);
    }

    #closeBtn {
      float: right;
      cursor: pointer;
      background: #4FB4FD;
      color: white;
      border: none;
      padding: 5px 10px;
      border-radius: 4px;
    }

h2 {
	text-align: center;
}


/* info */

.info {
	background-image: url("images/info_bg.jpg");
	background-repeat: repeat;
}

.info h3 {
	color:#8888FF;
	font-size: 80px;
	text-align: center;
}

.h3mini {
		color:#8888FF;
	font-size: 18px;
	text-align: center;
	margin-top: -80px;
}

.infobox {
	color:white;
	background-color: #00AA00;
	text-align: center;
	padding: 30px 60px;
	margin: 20px 20px 0 20px;
	float: left;
}

.infoboxlink {
	text-align: right;
	color: orange;
	margin-top: 30px;
	margin-right: 20px;
}

.info h4 {
	color:white;
	background-color: #8888FF;
	padding-left: 20px;
	margin: 20px;
}

.infotext p {
	font-size: 14px;
	margin-left: 50px;
}



/* guideline */

.guideline {
	background-image: url("images/info_bg.jpg");
	background-repeat: repeat;
}

.guideline h3 {
	color:#8888FF;
	font-size: 80px;
	text-align: center;
}

.guideline h4 {
	color:white;
	background-color: #F92024;
	padding-left: 20px;
	margin: 20px;
}


.guideline p {
	font-size: 14px;
	margin-left: 50px;
}

.guideline h2 {
	font-size: 20px;
	text-align: left;
	margin-left: 50px;
}

.guidelinetext {
	font-size: 25px;
	text-align: left;
	margin-left: 10px;
	font-weight: bold;
}

.guidelinetext2 {
	font-size: 25px;
	text-align: left;
	margin-left: 30px;
	font-weight: bold;
}

.guidelinetext3 {
	font-size: 25px;
	text-align: left;
	margin-left: 60px;
}


/* delete */

.deleteimages img {
	margin: auto;
  display: block;
	margin-bottom: 5px;
}

.delete {
    background-color: #CCFFCC;
	width: 840px;  /* 外側の幅 */
    height: 400px;  /* 外側の高さ */
    padding: 10px;  /* 内側に余白を作る */
    position: relative;  /* 内側の要素の配置を調整するため */
}

.delete2 {
    background-color: #CCFFCC;
    border: 1px solid #000000; /* 黒いラインを追加 */
    width: 840px;  /* 親要素と同じ幅 */
    height: 400px;  /* 親要素と同じ高さ */
    position: absolute;  /* 絶対配置 */
}

.delete h2 {
	text-align: left;
	margin-left: 10px;
}

.delete p {
		text-align: left;
	    margin-left: 50px;
}

.deletelink {
	text-align: center;
	color: red;
	font-weight: 500;
}

.delete h1 {
	text-align: left;
	font-size: 20px;
	margin-left: 10px;
}

/* diary1 */

.diary1 {
    background-color: #fff;
	width: 830px;  /* 外側の幅 */
    height: 150px;  /* 外側の高さ */
    padding: 5px;  /* 内側に余白を作る */   
	border: 1px solid #000000; /* 黒いラインを追加 */
    position: relative;  /* 内側の要素の配置を調整するため */
}

.diary1-2 {
    background-color: #fff;
    border: 1px solid #000000; /* 黒いラインを追加 */
    width: 830px;  /* 親要素と同じ幅 */
    height: 150px;  /* 親要素と同じ高さ */
    position: absolute;  /* 絶対配置 */
}

.diary1 p {
		text-align: left;
	    margin-left: 5px;
	    margin-top: 25px;
}

.diarylink {
	text-align: center;
}

/* diary2 */

.diary2{
	background:#BCDCFD;
	width: 840px;
	height: 2100px;
}

.diary2 h3 {
	color: #C1272D;
	font-size: 20px;
	padding: 30px 0 0 10px; 
}

.diary2-images {
    display: flex;  /* 横並びにする */
    justify-content: space-between; /* アイコンとヘッダーの間隔を調整 */
    align-items: center; /* アイコンとヘッダーを縦に中央揃え */
}

.diary2image, .diary2image2 {
    margin: 0;  /* 余白を調整 */
}

.diary2image img {
    width: 100%;  /* 親の幅に合わせる */
    height: auto; /* 高さを自動調整 */
}

.diary2image2 img {
    width: 100%;  /* 親の幅に合わせる */
    height: auto; /* 高さを自動調整 */
}

.diary2text p {
	text-align: right;
	margin-right: 10px;
}

.diary2text2 h1 {
	color: #3E3D3D;
	font-size: 20px;
	border-bottom: 1px dotted #000;
	margin-left: 10px;
	margin-right: 30px;
}

.diary2text3 {
	text-align: right;
	margin-top: -50px;
	margin-right: 10px;
}

.diary2text4 {
	margin-left: 20px;
	font-size: 16px;
	margin-top: -40px;
}

.diary2text5 {
		text-align: right;
	margin-top: -10px;
	margin-right: 10px;
}

/* スレッド */

.chsr h1 {
	font-size: 20px;
}

.koukoku1 {
	background-color: #FFCE7E;
	text-align: center;
}

.koukoku2 {
	background-color: #B2EFCC;
	text-align: center;
}

.chsrkotehan {
	color: blue;
	font-size: 14px;
}

.chsrurl {
  border: 1px solid #4682b4; /* 薄いブルー */
  border-radius: 5px;       /* 角丸 */
  padding: 5px;             /* 内側の余白 */
  display: inline-block;     /* 要素を囲むため */
  background-color: #e6f0fa; /* 背景をさらに薄く青系にする場合（任意） */
}

.chimg1,
.chimg2 {
  display: inline-block;
  margin-right: 5px; /* 間隔を少しあける（任意） */
  vertical-align: middle; /* 上下のズレを防ぐ */
	margin-top: 5px;
}

.chimg-wrapper {
  display: flex;
  justify-content: space-between; /* 左右に分ける */
  align-items: center;
}

.chsrid {
	text-align: right;
	  border-bottom: 1px dotted #999;
}

.chsrcmntin {
  border-bottom: 1px dotted #999;
  padding: 10px 0;
  text-align: center; /* 中央揃え */
  font-family: sans-serif;
  font-size: 14px;
}

.chsrcmntin .inner {
  display: inline-flex;
  align-items: center;
  gap: 6px; /* 文字と画像の間隔 */
}
.chimg3 img {
  width: 20px;
  height: 20px;
	margin-top: 5px;
}

/* 情報ページ */


.imagetext {
	padding-top: 20px;
	margin-left: 20px;
}

.lvtext {
	text-align: right;
	margin-right: 10px;
	color:#919191;
}

.lv2text {
	text-align: right;
	margin-right: 10px;
	color:#FF0000;
}

/* みあみあ村 */

.miamia {
	text-align: center;
	color: #EE8A81;
}

.miamia img {
	    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* 主婦ブログ */

.syufu h1 {
	font-size: 18px;
	margin-left: 70px;
	margin-top: -10px;
}

.syufumy-wrapper {
  display: flex;
  align-items: flex-start; /* 上揃え */
  gap: 20px; /* 文章と画像の間の余白 */
  margin-top: 20px;
}

.syufumy {
  flex: 1; /* 文章側は伸縮可能に */
}

.syufumy2 img {
  max-width: 100%; /* モバイル対応 */
  height: auto;
}

.syufumy3 {
	margin-top: -250px;
	
}

.syufumy4 .headline {
  display: flex;
  align-items: center;
  gap: 10px;
}

.syufumy4 h3 {
  text-align: left;
  margin-left: 270px; /* 画像より少し右にずらす場合 */
  margin-top: -40px;
  color: #23AD3A;        /* 緑色に変更 */
  font-weight: 300;      /* 細い文字に */
	
}

.syufumy4 h2{
	font-size: 18px;
	text-align: left;
}

.syufumy4 {
	border-bottom: 1px dotted #999; /* ドット線を追加 */
	width: 500px;                   /* ← 線の長さを調整（お好みで） */
}

.diary-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px; /* テキストと画像の間隔 */
  margin-top: 10px;
}

.diary-text {
  font-size: 16px;
  color: #333;
  line-height: 1.6;
}

.diary-image img {
  width: 150px;
  height: 150px;
  object-fit: cover;
	 margin-top: -50px; /* ← 上に10pxずらす（必要に応じて調整） */
}


/* あきブログ */

.akblogall {
	margin-top: -420px;
	margin-left: 30px;
}

.akblogall h1 {
	font-size: 16px;
	color: white;
}

.akblog1 {
	font-size: 12px;
}

.akblog2 {
	font-size: 14px;
}


/* メール送信画面2 */

	.gomail {
		position: relative;
		width: 600px;
		margin: 0 auto;
		font-family: sans-serif;
	}

	.gomail img {
		width: 100%;
		display: block;
	}

	/* メールのテキストオーバーレイ共通 */
	.gomail1, .gomail2, .gomail3 {
		position: absolute;
		left: 50%;
		color: #000;
		padding: 5px 10px;
		border-radius: 5px;
	}

	.gomail1 {
		top: 250px;;
		font-size: 10px;
		color: #646464;
	    margin-left: 70px;
		margin-top: -5px;
	}

	.gomail2 {
		top: 310px;
		font-size: 10px;
		color: #646464;
	    margin-left: 70px;
		margin-top: -50px;
	}

	.gomail3 {
		top: 60%;
		font-size: 12px;
	    margin-left: 70px;
		margin-top: 10px;
	}

	/* 下部の送信ボタン */
	.send-button {
		display: inline-block;
		background-color: #007bff;
		color: white;
		padding: 5px 18px;
		text-decoration: none;
		font-size: 10px;
		border-radius: 25px;
		font-weight: bold;
		margin-top: 15px;
		text-align: center;
		box-shadow: 0 4px 6px rgba(0,0,0,0.1);
		transition: background-color 0.3s ease;
	}

	.send-button:hover {
		background-color: #0056b3;
	}

	/* 中央揃え */
	.button-wrapper {
		margin-left: 350px;
		margin-top: -130px;
	}


/* メール送信受信画面2 */

	.inmail {
  position: relative;
}
.inmail1 {
  position: absolute;
  top: 150px;
  left: 230px;
  /* 他のスタイルはそのまま */
}
.inmail2 {
  position: absolute;
  top: 200px;
  left: 220px;
}


.popup {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0,0,0,0.8);
  padding: 20px;
  text-align: center;
  z-index: 9999;
  color: white;
}

.popup-content {
  background: #222;
  padding: 20px;
  border-radius: 10px;
  display: inline-block;
}

.popup button {
  margin: 10px;
  padding: 10px 20px;
  font-size: 1em;
  cursor: pointer;
}


/* パスワード */

	.inpass {
		text-align: center;
		margin-top: 100px;
		font-family: sans-serif;
	}

	input[type="password"] {
		padding: 8px;
		font-size: 16px;
		border: 1px solid #ccc;
		border-radius: 5px;
		width: 200px;
	}

	.pass-button {
		margin-left: 10px;
		padding: 8px 16px;
		background-color: #007bff;
		color: white;
		border: none;
		border-radius: 5px;
		font-size: 14px;
		cursor: pointer;
		transition: background-color 0.3s;
	}

	.pass-button:hover {
		background-color: #0056b3;
	}


/* PDF */
.imagetext {
		font-size: 20px;
	border-bottom: 2px solid #4FB4FD;
    padding-bottom: 6px; /* ← ここで余白を調整 */
}

.last a {
  display: inline-block;
  width: 250px;                  /* ← 幅を固定 */
  padding: 20px 0;               /* ← 上下だけの余白に調整 */
  background-color: #4FB4FD;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  font-weight: bold;
  text-align: center;            /* ← 中央揃え */
  transition: background-color 0.3s;
}

.last a:hover {
  background-color: #3498db;
}

.button-row {
  display: flex;
  gap: 5px; /* ボタンの間隔 */
  justify-content: center; /* 横方向の中央揃え（任意） */
  flex-wrap: wrap; /* スマホなどで折り返し可能に */
}

/* 報告書 */

.houkokutext {
	font-size: 20px;
	border-bottom: 2px solid #4FB4FD;
    padding-bottom: 6px; /* ← ここで余白を調整 */
}

audio {
  width: 100%;
  max-width: 400px;
  display: block;
  margin: 20px auto;
}

/* 生贄 */
 .iphone-call-ui {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 240px;
  background-color: #1c1c1e;
  color: white;
  border-radius: 30px;
  padding: 16px;
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', sans-serif;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
  display: none;
  z-index: 1000;
}
.iphone-status-bar {
  font-size: 0.75rem;
  opacity: 0.6;
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}
.iphone-call-button {
  background-color: #34c759;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.4rem;
  margin: 0 auto;
  box-shadow: 0 0 10px #34c759;
}
.iphone-cancel {
  text-align: center;
  font-size: 0.75rem;
  color: #aaa;
  margin-top: 8px;
}


/* 調査完了 */

.completion {
	color:#E77163;
	text-align: center;
}


.hitomi{
		width: 840px;
	margin-left: 30px;
}


/* 404 */

.diary404 h3{
      background-color: #afeeee; /* お好きな色に変更可能 */
      padding: 20px; /* コンテンツとの間に余白を追加（任意） */
	  color: white;
	      margin-top: 0;          /* h3の上の余白を消す */
    }

   .diary404 img {
      display: block;         /* 下の余白（inline要素の隙間）をなくす */
      margin-bottom: 0;       /* 画像の下の余白を消す */
    }

.diary404 {
  display: flex;
  flex-direction: row; /* 横並びにする */
  gap: 20px;            /* 間隔を調整（必要に応じて） */
  align-items: flex-start; /* 上揃え */
}

.diary404_1 {
  width: 75%;
}

.diary404_2 {
  width: 25%;
	margin-left: 30px;
}

.diary404text2 {
	color: #afeeee;
	font-size: 10px;
}

.diary404text3 {
	color:#8A8A8A;font-size: 8px;
	margin-top: -40px;
}

.diary404text4 {
		color:#413D3D;
	font-size: 14px;
	margin-top: -20px;
}

.diary404text5 {
		color:#8A8A8A;
	font-size: 12px;
	text-align: center;
		  display: flex;
  align-items: center;
  text-align: center;
  color: #8A8A8A;
  margin: 40px 0;
	margin-top: -5px;
	margin-bottom: -40px;
}
.diary404text5::before,
.diary404text5::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid #8A8A8A;
  margin: 0 10px;
}

.diary404 {
  display: flex;
  gap: 20px;
}

.diary404_2 {
  display: flex;
  flex-direction: column;
  align-items: center; /* 中央寄せしたい場合 */
  gap: 10px;
	color:#8A8A8A;
	font-size: 14px;
}