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

/*  --------------------------------------------------------
		全体 
	-------------------------------------------------------- */

body {
	color: #454545;
	text-decoration: none;
	background-color: #fff;
	margin: 0;
	font-family:'M PLUS 1p',"Mplus 1p",'Montserrat', 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro','游ゴシック体', 'Yu Gothic', 'YuGothic', 
	  			'メイリオ', 'Meiryo', 'Osaka', 'ＭＳ Ｐゴシック', 'MS PGothic', 'sans-serif';
	background-image: url(../img/back_dot.png);
	font-size: 16px;
}

select,
input[type = "text"],
input[type = "date"],
input[type = "password"],
input[type = "file"],
input[type = "button"],
input[type="submit"],
textarea {
	font-family:'M PLUS 1p',"Mplus 1p",'Montserrat', 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro','游ゴシック体', 'Yu Gothic', 'YuGothic', 
	  			'メイリオ', 'Meiryo', 'Osaka', 'ＭＳ Ｐゴシック', 'MS PGothic', 'sans-serif';
 }
  
a {
	text-decoration: none;
	font-weight: bold;
    color:#fb829d;
	display: inline-block;
}

a:hover {
	color: #ba566c;
}

img a:hover {
	opacity: 0.5;
}

a:hover::before,
a:hover::after {
	opacity: 0.5;
}

ul {
	list-style: none;
	padding: 0;
}

li {
	display: block;
	position: relative;
	border-bottom : 5px dotted #cdcdcd;
	padding: 10px 13% 3px 20px;
	transition: 0.5s;
}

li::before {
	content: '●';
	margin: 0 0.2rem;
	font-size: 16px;
	color: #ffaec0;
}

li a{
	color: #454545;
}

li a::after {
	content: '';
	position: absolute;
	top: 53%;
	left: 88%;
	transform: rotate(43deg) translateY(-50%);
	width: 6px;
	height: 6px;
	border-width: 3px 3px 0 0;
	border-style: solid;
	color: #fb829d;
}

li:hover {
    background: rgb(255, 228, 234);
}

li a:hover {
	color: #fb829d;
}

li.category {
	border-bottom : 0px dotted #cdcdcd;
	padding: 10px 0 3px 20px;
}

li.category:before {
	content: '';
}

li.category:hover {
    background: 0;
}

li.category span {
	border-bottom: 0px dotted #cdcdcd;
	font-weight: bold;
}

li.category span.midasi {
	padding: 0 .3em;
	border-left: 3px solid #ffaec0;
}

li.category ul {
	padding: 0 0 3px 20px;
}

li.category ul li a::after {
	left: 87%;
}

/* アイコンリンク */
ul.ul_icon {
	padding: 0 !important;
	margin: 0;
	display: flex;
}

ul.ul_icon li {
	display: inline;
	position: inherit;
	border-bottom: 0px dotted #cdcdcd;
	padding: 10px 13px 10px 13px;
}

ul.ul_icon li:hover {
	border-radius: 25px;
}

/* 矢印を消す */
ul.ul_icon li a:after {
	content: none;
}

#record_view .grid_container ul.ul_icon {
	display: flex;
}

/* ライン */
hr {
	margin: 30px 10% 20px 10%;
	border: none;
  	border-bottom: 3px dotted #cdcdcd;
}

i {
	font-weight: bold;
}

#wrapper {
	/* width: 100%; */
	width: auto;
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
	overflow: hidden; 
	padding-top: 0;
	padding-right: 250px;
	overflow: hidden; 
}

#sectionWrapper {
	/* width: 100%; */
	width: auto;
	background-color: #fff;
	border-radius: 0 0 10px 10px;
	padding: 60px 0 0 0;
}

#sectionContents {
	margin:  30px;
	padding: 30px 0;
}

section {
	margin: 0 0 50px 0;
}

.link_button {
	border-radius: 50px;
	color: #454554;
	background: #fff;
	border: 2px solid #fb829d;
	font-weight: bold;
	padding: 8px 40px 8px 30px;
	transition: 0.5s;
	position: relative;
	font-size: 16px;
}

.link_button:hover {
	background: rgb(255, 228, 234);
	color: #fb829d;
}

.link_button::after {
	content: '';
	position: absolute;
	top: 47%;
  	left: 82%;
	transform: rotate(45deg) translateY(-50%);
	width: 6px;
	height: 6px;
	border-width: 3px 3px 0 0;
	border-style: solid;
	color: #fb829d;

}

/* 汎用ボタン
　　　▼バリエーション:
　　　　 文字サイズ 小 / 中 / 大
　　　　 白 / ピンク
　　　　 半円 / 四角
*/
.smallButtonCircleWhite,
.middleButtonCircleWhite,
.largeButtonCircleWhite,
.smallButtonSquareWhite,
.middleButtonSquareWhite,
.largeButtonSquareWhite,
.smallButtonCirclePink,
.middleButtonCirclePink,
.largeButtonCirclePink,
.smallButtonSquarePink,
.middleButtonSquarePink,
.largeButtonSquarePink {
	border: 2px solid #fb829d;
	font-weight: bold;
	transition: 0.5s;
	position: relative;
}

.smallButtonCircleWhite,
.middleButtonCircleWhite,
.largeButtonCircleWhite,
.smallButtonSquareWhite,
.middleButtonSquareWhite,
.largeButtonSquareWhite {
	color: #454554;
	background: #fff;
}

.smallButtonCirclePink,
.middleButtonCirclePink,
.largeButtonCirclePink,
.smallButtonSquarePink,
.middleButtonSquarePink,
.largeButtonSquarePink {
	color: #fff;
	background: #fb829d;
}

.smallButtonCircleWhite,
.middleButtonCircleWhite,
.largeButtonCircleWhite,
.smallButtonCirclePink,
.middleButtonCirclePink,
.largeButtonCirclePink {
	border-radius: 50px;
}

.smallButtonSquareWhite,
.middleButtonSquareWhite,
.largeButtonSquareWhite,
.smallButtonSquarePink,
.middleButtonSquarePink,
.largeButtonSquarePink {
	border-radius: 8px;
}

.smallButtonCircleWhite:hover,
.middleButtonCircleWhite:hover,
.largeButtonCircleWhite:hover,
.smallButtonSquareWhite:hover,
.middleButtonSquareWhite:hover,
.largeButtonSquareWhite:hover,
.smallButtonCirclePink:hover,
.middleButtonCirclePink:hover,
.largeButtonCirclePink:hover,
.smallButtonSquarePink:hover,
.middleButtonSquarePink:hover,
.largeButtonSquarePink:hover  {
	background: rgb(255, 228, 234);
}

.smallButtonCircleWhite:hover,
.middleButtonCircleWhite:hover,
.largeButtonCircleWhite:hover,
.smallButtonSquareWhite:hover,
.middleButtonSquareWhite:hover,
.largeButtonSquareWhite:hover {
	color: #fb829d;
}

.smallButtonCirclePink:hover,
.middleButtonCirclePink:hover,
.largeButtonCirclePink:hover,
.smallButtonSquarePink:hover,
.middleButtonSquarePink:hover,
.largeButtonSquarePink:hover {
	color: #454554;
}

.smallButtonCircleWhite,
.smallButtonSquareWhite,
.smallButtonCirclePink,
.smallButtonSquarePink {
	font-size: 10px;
}

.smallButtonCircleWhite,
.smallButtonSquareWhite,
.smallButtonCirclePink,
.smallButtonSquarePink {
	font-size: 12px;
}

.largeButtonCircleWhite,
.largeButtonSquareWhite,
.largeButtonCirclePink,
.largeButtonSquarePink {
	font-size: 14px;
}

.iframe-wrapper {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
}
  
.iframe-wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 80%;
	height: 80%;
}

.fontSize10 {
	font-size: 10px;
}

.fontSize12 {
	font-size: 12px;
}

.fontSize14 {
	font-size: 14px;
}

@media screen and (max-width: 1000px) {
						
	#wrapper {
		/* width: 100%; */
		width: auto;
		padding-right: 0px;
		margin-left: auto;
		margin-right: auto;
	}

	#sectionWrapper {
		padding : 120px 0 50px 0;
	}

	#sectionContents {
		margin: 0 0;
		padding: 0 0;
	}

	section {
		margin: 0 20px 30px 20px;
	}

	.iframe-wrapper iframe {
		width: 100%;
		height: 100%;
	}
}

@media screen and (max-width: 640px) {

	section {
		margin: 0 10px 50px 10px;
	}
	
}

/*  --------------------------------------------------------
		input
	-------------------------------------------------------- */

input[type = "text"],
input[type = "date"],
input[type = "datetime-local"],
input[type = "number"],
input[type = "password"],
input[type = "file"],
input[type = "time"],
textarea {
	display: block;
	border: 0px;
	margin: 0 0 15px 0;
	box-sizing:border-box;
}

input[type = "date"],
input[type = "datetime-local"],
input[type = "number"],
input[type = "password"],
input[type = "time"]  {
	padding: 10px 20px;
  	border-radius: 50px;
}

input[type = "password"] {
	width: 100%
}

input[type = "button"],
input[type="submit"],
button,
::file-selector-button /* ファイル選択時のボタン */ {
	/* デフォルトの設定をリセットする ここから */
  	-webkit-appearance: none;
    	-moz-appearance: none;
        	appearance: none;
	/* デフォルトの設定をリセットする ここまで */
  	border-radius: 50px;
  	background: #fb829d;
	color: #fff;
	border: 2px solid #fb829d;
	font-weight: bold;
	margin: 5px;
	padding: 5px 18px;
	transition: 0.5s;
	height: 2.7em;
}

input[type="text"] {
	width: 100%;
	border: 0px solid #fb829d;
	padding: 10px 20px;
	border-radius: 50px;
	transition: 0.5s;
}

textarea {
	width: 100%;
	height: 200px;
  	margin: 0 0 20px 0;
	padding: 8px 20px;
  	border-radius: 8px;
}

.select_area {
	width: 100%;
	position: relative;
	display: flex;
	align-items: center;
	margin: 0 auto 15px auto;
	border: 0px solid #fb829d;
	border-radius: 50px;
	background-color: #fff;
}

/*プルダウンの三角を設定*/
.select_area::before {
	position: absolute;
	right: 15px;
	content: '';
	width: 16px;
	height: 8px;
	background: #fb829d;
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	padding: 0 0 5px 0;
}

.select_area select {
	width: 100%;
	padding: 10px 0 10px 20px;
	color: #fb829d;
	cursor: pointer;
	text-overflow: ellipsis;/*テキストがオーバーしたら'...'で省略*/
	z-index: 1;
	font-weight: bold;
	border-radius: 50px;
	/* 標準のスタイルを無効にする */
	border: none;
	appearance: none;
	outline: none;
	background: transparent;
}

.check_area,
.radio_area {
	margin: 0 0 20px 0;
}

/* 編集画面のフォームは色をつける */
.input_form_area input[type = "text"],
.input_form_area input[type = "date"],
.input_form_area input[type = "datetime-local"],
.input_form_area input[type = "number"],
.input_form_area input[type = "password"],
.input_form_area input[type = "time"],
.input_form_area .select_area select,
.input_form_area textarea {
	background-color: #f4f4f4;
}

.input_form_area {
	margin: 20px 0;
}

.input_form_area h3 {
	border-bottom: 3px dotted #cdcdcd;
}

.input_form_area h3::before {
	border-left: 0px dotted;
	content: '✓';
  	margin-right: 0.3rem;
}

.input_form_area .button_area {
	margin: 0 0 30px 0;
}

input[type = "button"]:hover,
input[type = "submit"]:hover,
button:hover {
  	background: rgb(255, 228, 234);
	color: #454554;
}

input[type="text"]:focus,
input[type="submit"]:focus,
input[type="time"]:focus {
	background: rgb(255, 228, 234);
	outline: 0;
}

/* select:hover, */
select:focus {
	background: rgb(255, 228, 234);
}

input[type=checkbox],
input[type=radio] {
	margin: 0 3px 0 10px;
}

.inline_form input {
	display: inline;
}

@media screen and (max-width: 640px) {
	input[type = "text"],
	input[type = "date"],
	input[type = "datetime-local"],
	input[type = "number"],
	input[type = "password"],
	input[type = "file"],
	input[type = "time"],
	textarea {
		margin-bottom: 10px;
	}

	.input_form_area {
		margin: 10px 0;
	}
}


/*  --------------------------------------------------------
		定義
	-------------------------------------------------------- */

dl {

}

dt {
	float:left;
	font-weight: bold;
  	color: #999;
	width: 100px;
}

dd {
	word-break: break-all;
	padding: 0 0 0 120px;
  	margin: 0 0 0 0;
}

dd::before{
	/* 中身がない場合でも1行分として扱う */
	content: "";
	display: inline-block;
}

dd a{
	display: initial;
}

h1 {
	text-align: center;
  	margin: 50px 0 0 0;
	/* font-size: 32px; */
}

h2 {
	position: relative;
	background: repeating-linear-gradient(-45deg, rgba(238, 238, 238, 1), rgba(238, 238, 238, 1) 2px, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 6px);
	padding: .5em 1.0em;/*ストライプの設定*/
	border-radius: 3px;/*角丸*/
	overflow: hidden;
	/* font-size: 24px; */
  }

h2::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 30px;
	height: 30px;
	clip-path: polygon(0 0, 100% 0, 0 100%);
	background-color: #fb829d;/*三角の色*/
}

h3 {
	margin: 30px 0 10px 0;
	font-size: 20px;
}

h3:before {
	content: '⧉';
	margin: 0 0.3rem 0 0;
  	color: #ffaec0;
}

h4 {
	border-bottom: 2px solid rgb(255, 228, 234);
	margin: 20px 0 0 0;
	font-size: 18px;
}

h4:before {
	content: '▼';
	margin: 0 0.2rem;
	font-size: 16px;
	color: #ffaec0;
}

h5 {
	border-bottom: 4px dotted rgb(255, 228, 234);
	margin: 20px 0 0 0;
	font-size: 16px;
}

h5:before {
	content: '✓';
  	margin: 0 0.2rem;
  	color: #ffaec0;
}

/*  --------------------------------------------------------
		引用の文章
	-------------------------------------------------------- */

blockquote {
	border-left:5px solid #fb829d;
	padding: 20px;
	background-color: #f4f4f4;
	border-radius: 0 8px 8px 0;
	margin: 0 0 0 30px;
}

blockquote span {
	color: #999;
}

/*  --------------------------------------------------------
		横並び 
	-------------------------------------------------------- */
.clearfix::after {
	content: "";
	display: block;
	clear: both;
}

.row {
	float: left;
}

.span1 {
	width: 10%;
}

.span2 {
	width: 20%;
}

.span3 {
	width: 30%;
}

.span4 {
	width: 40%;
}

.span5 {
	width: 50%;
}

.span6 {
	width: 60%;
}

.span7 {
	width: 70%;
}

.span8 {
	width: 80%;
}

.span9 {
	width: 90%;
}

.grid_container {
	display: grid;
	gap: 0 2%;
	grid-template-columns	:49% 49%;
	grid-template-rows: auto auto;
}

.grid_container.span1_9 {
	grid-template-columns	:9% 89%;
}

.grid_container.span2_8 {
	grid-template-columns	:19% 79%;
}

.grid_container.span3_7 {
	grid-template-columns	:29% 69%;
}

.grid_container.span4_6 {
	grid-template-columns	:39% 59%;
}

.grid_container.span9_1 {
	grid-template-columns	:89% 9%;
}

.grid_container.span8_2 {
	grid-template-columns	:79% 19%;
}

.grid_container.span7_3 {
	grid-template-columns	:69% 29%;
}

.grid_container.span6_4 {
	grid-template-columns	:59% 39%;
}

/* 子要素を均等に配置する */
.justify_content {
	display: flex;
  justify-content: space-between;
}

@media screen and (max-width: 640px) {
	.span1, .span2, .span3, .span4, .span5,
	.span6, .span7, .span8, .span9 {
		width: 100%;
	}

	.grid_container.clear {
		gap: 0;
		grid-template-columns	:100%;
	}
}


/*  --------------------------------------------------------
		画像サイズ
	-------------------------------------------------------- */

img {
	width: 600px;
}

.row img {
	width: 100%;
}

.grid_container img {
	width: 100%;
}

/*  --------------------------------------------------------
		動画サイズ
	-------------------------------------------------------- */

video {
	width: 100%;
}

/*  --------------------------------------------------------
		検索フォーム
	-------------------------------------------------------- */

	.search_container {
		width: auto;
		margin: 20px 0 20px 0;
		padding: 20px;
		background-color: #f4f4f4;
		border-radius: 8px;
  	}

	.search_container h3 {
		margin: 10px 0 30px 0;
	}

	.search_container input[type="text"] {
		width: 100%;
  		margin: 0 auto;
		margin-bottom: 15px;
  		display: grid;
	}

	.search_container input[type = "button"] {
		margin: 10px auto 20px auto;
  		display: grid;
	}

	.search_container details {
		margin: 0 0 30px 0;
	}

	.search_container summary {
		margin: 0 0 10px 0;
		color: #fb829d;
	}

	.search_container details h4,
	.search_container details .check_area,
	.search_container details .radio_area {
		padding: 0 0 0 20px;
	}

	.search_container h4 {
		border-bottom: 3px dotted #cdcdcd;
		margin: 0 0 10px 0;
	}

	#record_post_list .input_form_area,
	#note_list .input_form_area {
		border-bottom: 5px dotted #cdcdcd;
		margin: 20px 0;
		padding: 0 0 20px 0;
	}

	@media screen and (max-width: 640px) {
		.search_container input[type="text"] {
			margin-bottom: 10px;
		}
	}

/*  --------------------------------------------------------
		矢印リンク
	-------------------------------------------------------- */

	.arrow {
		padding: 0 10px;
  	}

/*  --------------------------------------------------------
		summary detail
	-------------------------------------------------------- */

	summary {
	/* display: list-item;以外を指定してデフォルトの三角形アイコンを消す */
		display: block;
		position: relative;
		border-bottom: 2px solid #cdcdcd;
		padding: 15px 8% 2px 20px;
  		font-weight: bold;
	}
	
	summary::after {
		content: '';
		position: absolute;
		top: 30%;
		left: 93%;
		transform: rotate(134deg) translateY(-50%);
		width: 6px;
		height: 6px;
		border-width: 3px 3px 0 0;
		border-style: solid;
		color: #fb829d;
		transition: 0.1s;
	}

	details[open] summary::after {
		content: '';
		position: absolute;
		top: 40%;
		left: 93%;
		transform: rotate(134deg) translateY(-50%);
		width: 6px;
		height: 6px;
		border-width: 0 0 3px 3px;
		border-style: solid;
		color: #fb829d;
		transition: 0.1s;
	}

	details details summary {
		border-bottom: 5px dotted #cdcdcd;
	}

	details summary:before {
		content: '▼';
		margin: 0 0.2rem;
		font-size: 16px;
		color: #ffaec0;
	}

	details details summary:before {
		content: '#';
	}

	details details details summary:before {
		content: '＊';
	}

	details details details details summary:before {
		content: '•';
	}

	summary:hover {
		background: rgb(255, 228, 234);
		color: #fb829d;
	}

	summary:hover::after {
		opacity: 0.5;
	}

	/* Safariでのデフォルトの三角アイコンの設定(削除) */
	summary::-webkit-details-marker {
		display: none;
	  }

	/* 開閉アニメーション */
	.details {
		.details_content {
		  position: relative;
		  overflow: hidden;
		  padding: 10px 0 10px 0;
		  margin: 0 0 0 20px;
		  height: auto;
		  opacity: 1;
		  visibility: visible;
		  transition: padding .25s, height .25s, opacity .25s;
		}
	  
		&:not(.is-opened)>.details_content {
		  height: 0;
		  opacity: 0;
		  overflow: hidden;
		  padding-top: 0 !important;
		  padding-bottom: 0 !important;
		}
	  }

/*  --------------------------------------------------------
		テーブル
	-------------------------------------------------------- */

	.table_area {
		overflow-x: scroll;
		margin: 30px 0 0 0;
	}

	table {
		min-width: 100%;
  		/* white-space: nowrap; */
		white-space: wrap;
		border-collapse: separate;
		border-spacing: 0.15em 0;
	}
	
	table td {
		text-align: center;
		vertical-align: top;
		border-bottom : 5px dotted #cdcdcd;
		padding: 0.8% 0;
	}

	table th  {
	  color: #fff;
	  font-weight: bold;
	  background-color: #fb829d;
	  border-radius: 5px 5px 0 0;
	  padding: 3px 0 5px 0;
	  margin: 10px 0 0 0;
	}

	table th {
	  padding: 0 5px;
	  font-size: 15px;
	}

	table th.row,
	table th.rowspan {
		float: none;
		border-radius: 0 0 0 0;
		background-color: #ffaec0;
	}

	table tfoot {
		background-color: #f4f4f4;
		color: #999;
	}

	table tfoot th.row {
		background-color: rgb(255, 228, 234) !important;
		color: #999;
	}

	table th.titleTh {
		background-color: rgb(255, 228, 234);
  		color: #999;
  		padding: 8px 0;
	}

	table td.trColumn {
		background-color: #f4f4f4;
		border-bottom: 0px dotted #cdcdcd;
	}

/*  --------------------------------------------------------
		タブ切り替え
	-------------------------------------------------------- */
	.tab_list {
		display: flex;
	}

	ul.tab_list li {
		border-bottom : 5px dotted #ffaec0;
	}

	.tab_list li::before {
		content: '';
		margin: 0;
	}

	.tab_item {
		cursor: pointer;
		font-weight: bold;
		border-radius: 8px 8px 0 0;
		color: #999;
		padding: 10px 30px;
	}

	.tab_item.active {
		background-color: #ffaec0;
		color: #fff;
	  }

	.tab_panel {
		display: none;
	}

	.tab_panel.active {
		display: block;
	}

	/* include時の設定 */
	#schedule_link .tab_item {
		font-size: 10px;
	}

	@media screen and (max-width: 640px) {
		.tab_item {
			font-size: 10px;
		}
	}

/*  --------------------------------------------------------
	灰色背景 
-------------------------------------------------------- */
.grey,
.grey_border {
	border-radius: 8px;
	padding: 10px 20px;
	color: #999;
}

.grey {
	background-color: #f4f4f4;
}

.grey_border {
	background: repeating-linear-gradient(-45deg, rgb(238, 238, 238), rgb(238, 238, 238) 2px, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 7px);
	border: solid rgb(238, 238, 238) 3px;
}

/*  --------------------------------------------------------------------------------------------------------------------
		トップ 
	-------------------------------------------------------------------------------------------------------------------- */

/*  --------------------------------------------------------
		このサイトについて 
	-------------------------------------------------------- */
#since {
	background-color: #f4f4f4;
	border-radius: 8px;
	padding: 10px 20px;
}

#since span {
	color: #999;
	font-size: 12px;
}

/*  --------------------------------------------------------
		更新履歴
	-------------------------------------------------------- */
#updateHistory {
}

#updateWrap {
	height: 200px;/*仮*/
	overflow: hidden;
}

#updateHistory dl,
#update dl {
	line-height: 2.0em;
	padding: 0 0 0 20px;
}

#updateHistory dd,
#update dd {
	padding: 0 0 0 120px;
}

#update dt {
	padding: 0 0 0 20px;
}

#update dd {
	margin: 0 0 0 20px;
}

#updateHistory .link_button {
	margin: 20px 0 0;
}

#updateHistory .display_none:after {
	content: '非表示';
    position: initial;
    color: #454545;
    font-size: 10px;
    font-weight: bold;
    border-radius: 4px;
    padding: 2px 10px;
    background-color: #f4f4f4;
    margin: 0 8px;
}

@media screen and (max-width: 640px) {
	#updateHistory dl,
	#update dl {
		padding: 0 0 0 0;
	}

	#update dt {
		padding: 0 0 0 0;
	}

	#update dd {
		margin: 0 0 0 20px;
		padding: 0 0 0 100px;
	}
}

/*  --------------------------------------------------------
		スケジュール
	-------------------------------------------------------- */
#schedule {
	height: 463px;
	overflow: hidden;
	margin: 0 0 20px 0;
}

#schedule .tab_item {
	padding: 5px 15px;
}

@media screen and (max-width: 1250px) {
	#schedule {
		height: 494px;
	}
}

@media screen and (max-width: 640px) {
	#schedule {
		height: 470px;
	}

	.tab_item {
		padding: 5px 15px;
	}
}

/*  --------------------------------------------------------
		編集ページへのリンク 
	-------------------------------------------------------- */
#editlink {
}

/*  --------------------------------------------------------------------------------------------------------------------
	イラスト 閲覧
	-------------------------------------------------------------------------------------------------------------------- */
	#pict_view .pict_area {
		margin: 0 0 40px 0;
		border-radius: 10px;
		background-color: #fff;
		box-shadow: 1px 1px 8px 0 rgb(173, 171, 201);
		height: 350px;
	}
	
	#pict_view .pict_area img {
		width: 100%;
		border-radius: 10px;
		background: #fb829d;
		height: 350px;
		/* リサイズ設定*/
		object-fit: cover;
	}
	
	#pict_view .pict_area img:hover {
		opacity:0.75;
		transition:0.3s;
	}

/*  --------------------------------------------------------------------------------------------------------------------
	写真 閲覧
	-------------------------------------------------------------------------------------------------------------------- */
#photo_view .photo_area {
	margin: 0 0 30px 0;
	padding: 0 0 10px 0;
	border-radius: 10px;
	background-color: #fff;
	box-shadow: 1px 1px 8px 0 rgb(173, 171, 201);
	/* height: 365px; */
}

/* 縦構図の場合 */
/* #photo_view .photo_area.vertical {
	height: 750px;
} */

#photo_view .photo_area img {
	width: 100%;
	border-radius: 10px 10px 0 0;
	background: #fb829d;
}

#photo_view .photo_area img:hover {
	opacity:0.75;
	transition:0.3s;
}

#photo_view .photo_area h4 {
	border-bottom: 2px dotted #cdcdcd;
	/* 溢れた部分を隠す */
	overflow: hidden;
	/* 溢れた部分を「...」にする */
	  text-overflow: ellipsis;
	/* 1行で表示 */
	  white-space: nowrap;
}

#photo_view .photo_area h4,
#photo_view .photo_area .place,
#photo_view .photo_area .date {
	margin: 0 0 0 0;
}

#photo_view .photo_area h4,
#photo_view .photo_area .place {
	padding: 0 0 0 10px;
}

#photo_view .photo_area h4 {
	padding-right: 10px;
}

#photo_view .photo_area h4:before {
	content: '';
	margin-right: 0rem;
}

#photo_view .photo_area .place,
#photo_view .photo_area .date {
	display: inline-block;
	width: 46%;
	color: #999;
}

#photo_view .photo_area .place {
	font-size: 14px;
}

#photo_view .photo_area .date {
	width: 49%;
}

#photo_view .photo_area .date {
	text-align: right;
	font-size: 12px;
}

#photo_view .date .record_link {
	padding: 0 3px 0 2px;
}

#photo_view .date .record_link a:before {
	content: "";
	height: 15px;
	width: 15px;
	margin-right: 0.2rem;
	background-color: #fb829d;
	-webkit-mask: url('../img/icon/calendar.svg');
	-webkit-mask-size: cover;
	display: inline-block;
}

/* モーダルの設定 ここから */

#pict_view .modal_trigger,
#photo_view .modal_trigger{
	cursor: pointer;
}

#pict_view .modal_wrapper,
#photo_view .modal_wrapper {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
	width: 100%;
	height: 100%;
}

#pict_view .modal_layer,
#photo_view .modal_layer {
	height: 100%;
	background: rgba(54, 61, 72, 0.85);
	cursor: pointer;
}

#pict_view .modal_container,
#photo_view .modal_container {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: min(calc(100% - 40px), 1000px);
	height: calc(100% - 20%);
	padding: 0 0 10% 0;
	background: #fff;
	box-shadow: 1px 1px 10px 0 rgb(50,50, 50);
  	border-radius: 10px;
}

#pict_view .modal_inner,
#photo_view .modal_inner {
	position: relative;
	overflow-y: scroll;
	height: 100%;
	padding: 60px 0 20px;
}

#pict_view .modal_close,
#photo_view .modal_close {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 44px;
	height: 44px;
	background: #fb829d;
	cursor: pointer;
	transition: opacity .6s;
	border-radius: 22px;
}

#pict_view .modal_close:hover,
#photo_view .modal_close:hover {
	opacity: .6;
}

#pict_view .modal_close:before,
#pict_view .modal_close:after,
#photo_view .modal_close:before,
#photo_view .modal_close:after {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 5px;
	background: #fff;
	content: '';
	border-radius: 5px;
}

#pict_view .modal_close:before,
#photo_view .modal_close:before {
	transform: translate(-50%, -50%) rotate(45deg);
}

#pict_view .modal_close:after ,
#photo_view .modal_close:after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

/* 以下は中身のデザイン */
#pict_view .modal_date {
	padding: 3px 30px;
  	color: #999;
  	font-size: 12px;
	font-weight: bold;
}

#photo_view .modal_title {
	font-weight: bold;
	padding: 0 20px;
	border-bottom: 3px dotted #cdcdcd;
}

#photo_view .modal_type {
	padding: 3px 30px;
  	color: #999;
  	font-size: 14px;
}

#photo_view .grey {
	margin: 10px 30px 15px 30px;
}

#pict_view .modal_img_area img,
#photo_view .modal_img_area img {
	width: 100% !important;
}

/* モーダルの設定 ここまで */

@media screen and (max-width: 1250px) {
	#photo_view .photo_area {
		height: auto;
	}
	
	/* 縦構図の場合 */
	#photo_view .photo_area.vertical {
		height: auto;
	}
}

@media screen and (max-width: 640px) {
	#pict_view .pict_area,
	#photo_view .photo_area {
		width: 100%;
	}

	#photo_view .photo_area {
		box-shadow: none;
	}

	#pict_view .modal_inner,
	#photo_view .modal_inner {
		padding: 60px 0 20px;
	}

	#photo_view .grey {
		margin: 5px 10px 10px 10px;
	}
}

/*  --------------------------------------------------------------------------------------------------------------------
	写真 編集
	-------------------------------------------------------------------------------------------------------------------- */

/*  --------------------------------------------------------
		投稿写真一覧 
	-------------------------------------------------------- */
	#photo_list .grid_container,
	#pict_list .grid_container {
		border-bottom : 5px dotted #cdcdcd;
		margin: 0 0 40px 0;
		padding: 0 0 30px 0;
	}

	#photo_list .search_container .grid_container,
	#pict_list .search_container .grid_container {
		border-bottom : 0px dotted #cdcdcd;
		margin: 0 0 0 0;
		padding: 0 0 0 0;
	}

	#photo_list .img_area,
	#pict_list .img_area {
		position: relative;
	}

	#photo_list .none_display,
	#pict_list .none_display {
		position: absolute;
		top: 0px;
		left: -4px;
		background-color: #fff;
		border-radius: 0 5px 5px 0;
		padding: 3px 20px 3px 40px;
		color: #fb829d;
		font-weight: bold;
		letter-spacing: 3px;
		box-shadow: 4px 5px 0px 0 rgb(81, 79, 114);
	}

	#photo_list dl,
	#pict_list dl {
		line-height: 2.0em;
		padding: 0 0 0 0;
	}

	#photo_list dt,
	#pict_list dt {
		width: 100px;
		color: #fff;
		background-color: #ffaec0;
		border-radius: 5px 0 0 5px;
		font-size: 10px;
		font-weight: bold;
		letter-spacing: 3px;
		text-align: center;
		margin: 0 10px 10px 20px;
	}

	#photo_list dd,
	#pict_list dd {
		margin: 0 0 10px 120px;
		padding: 0;
	}

	@media screen and (max-width: 640px) {
		#photo_list dt,
		#pict_list dt {
			margin: 0 10px 10px 0;
		}
	}

/*  --------------------------------------------------------
		写真登録 
	-------------------------------------------------------- */
	#photo_input .input_area {
		margin: 0 40px 50px 0;
		padding: 0 0 30px 0;
  		border-bottom: 5px dotted #cdcdcd;
	}

	#photo_input .input_area input[type="button"] {
		height: 2.7em;
	}

	#photo_input form {
		display: grid;
		gap: 0 20px;
		grid-template-columns	:49% 49%;
		grid-template-rows: auto auto;
	}

/*  --------------------------------------------------------------------------------------------------------------------
	メモ 閲覧
	-------------------------------------------------------------------------------------------------------------------- */
#note_view .article {
	position: relative;
	background-color: #fff;
	border-radius : 15px;
	margin: 0 0 80px 0;
}

/* 初めの記事には上にmarginを入れる */
#note_view .article:first-of-type {
	margin-top: 30px;
}
 
#note_view .article h4 {
	padding: 0 0 4px 10px;
	margin-bottom: 0.2rem;
	background-image: linear-gradient(90deg, #fb829d 0 10%, #dedede 0%);
	background-repeat: no-repeat;
	background-size: 100% 10%;
	background-position: bottom;
	font-size: 18px;
	border-bottom: 0px solid rgb(255, 228, 234);
}

#note_view .article h4:before {
	content: '';
	margin-right: 0rem;
}

#note_view .article .category {
	margin: 0 0 0 20px;

}

#note_view .article .category a {
	font-size: 14px;
	margin: 0 5px 0 0;
}

#note_view .article .category .type a {
	color: #999;
}

#note_view .article .date {
	position: absolute;
	background-color: #fb829d;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	top: -20px;
	right: 20px;
}

#note_view .article .date .sub_division {
	position: relative;
	width: 100px;
	height: 100px;
}

#note_view .article .date .sub_division p {
	position: absolute;
	color: #fff;
	font-size: 12PX;
	font-weight: bold;
	text-align: center;
	top: 40%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

#note_view .article .division {
	margin: 30px 30px 30px 30px;
}

#note_view .article .division .text {
	margin: 0 0 50px 0;
}

#note_view .article .division .link_button {
	margin: 0 30px;
}

#note_view .addition {
	margin: 50px 0 0 0;
	padding: 50px 0 0 0;
	border-top : 5px dotted #cdcdcd;
}

#note_view .article img {
	width: 600px;
}

@media screen and (max-width: 640px) {
	#note_view .article h4 {
		padding: 0 0 3px 5px;
		margin: 0 100px 0.2rem 0;
	}

	#note_view .article .division {
		margin: 40px 0 30px 0;
	}

	#note_view .article img {
		width: 100%;
	}

	#note_view .article .category {
		margin: 0 110px 0 10px;
	
	}

	#note_view .article .date {
		right: 10px;
	}
}

/*  --------------------------------------------------------------------------------------------------------------------
	メモ 編集
	-------------------------------------------------------------------------------------------------------------------- */
#note_list .article {
	background-color: #fff;
	border-bottom : 5px dotted #cdcdcd;
	margin: 0 0 40px 0;
	padding: 0 0 40px 0;
}

/* 初めの記事には上にmarginを入れる */
#note_list .article:first-of-type {
	margin-top: 30px;
}

#note_list .article h3 {
	margin-top: 0;
	display: flex;
}

#note_list p {
	margin: 0 0 0 0;
}

#note_list .date {
	color: #999;
}

#note_list dl {
	line-height: 2.0em;
	padding: 0 0 0 0;
}

#note_list dt {
	width: 100px;
	color: #fff;
	background-color: #ffaec0;
	border-radius: 5px 0 0 5px;
	font-size: 10px;
	font-weight: bold;
	letter-spacing: 3px;
	text-align: center;
	margin: 0 10px 10px 0;
}

#note_list dd {
	margin: 0 0 10px 120px;
	padding: 0;
}

/*  文章を一部だけ表示する */
#note_list .sub_division p {
	display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    overflow: hidden; 
} 

@media screen and (max-width: 640px) {

	#note_list .sub_division {
		margin: 30px 0 0 0;
	}

	#note_list dt {
		margin: 0 10px 10px 0;
	}
}

/*  --------------------------------------------------------------------------------------------------------------------
	記録 閲覧
	-------------------------------------------------------------------------------------------------------------------- */
	#record_view .article {
		position: relative;
		background-color: #fff;
		border-radius : 15px;
		margin: 0 0 80px 0;
	}

	#record_view .link_button_area li.category {
		padding: 10px 0 3px 0;
	}

	#record_view .link_button_area li.category .ul_icon li:before {
		content: "";
	}

	#record_view .table_area {
		overflow-x: scroll;
		margin: 30px 0 0 0;
	}

	#record_view table {
		margin: 0 0 50px 0;
		white-space: wrap;
	}

	#record_view .record_table th {
		color: #454545;
		background-color: #fb829c00;
  		border-radius:  0 0 0 0;
	}

	#record_view .record_table th p {
		width: 34px;
		height: 30px;
		border-radius: 50%;
		color: #fff;
		background-color: #ffaec0;
		padding: 4px 0 0 0;
		margin: 0 auto;
	}

	#record_view .habit_table {
		min-width: 100%;
		white-space:nowrap;
	}

	#record_view .habit_table .health_active .number_date:after {
		content: "日";
		font-size: 10px;
	}

	#record_view .habit_table .health_active .percent {
		color: #999;
		font-size: 14px;
	}

	#record_view .habit_table .health_active .percent:after {
		content: "%";
		font-size: 10px;
	}
	
	#record_view td {
		text-align: left;
		vertical-align: top;
		border-bottom : 5px dotted #cdcdcd;
	}

	#record_view .today {
		background-color: rgb(255, 228, 234);
		border-radius: 5px;
	}

	#record_view .date_area,
	#record_view .habit_table th {
		color: #fff;
		font-weight: bold;
		background-color: #fb829d;
		border-radius: 5px 5px 0 0;
		padding: 3px 0 5px 0;
		margin: 10px 0 0 0;
	}

	#record_view .date_area .date,
	#record_view .habit_table th .date {
		padding: 0 5px;
		font-size: 15px;
	}

	#record_view .habit_table th .week {
		font-size: 11px;
		display: block;
	}

	#record_view .health_active {
		text-align: center;
	}

	#record_view .date_area .photo_link,
	#record_view .date_area .note_link,
	#record_view .date_area .health_link {
		float: right;
		padding: 0 8px 0 0;
	}

	#record_view .month_area .date_area .photo_link,
	#record_view .date_area .note_link {
		margin: 0 5px 0 0;
	}

	#record_view .date_area .photo_link a,
	#record_view .date_area .note_link a {
		color: #fff;
	}

	#record_view .date_area .photo_link a:before {
		content: "\F42A";
		font-family: bootstrap-icons;
		font-size: 15px;
		color: #fff;
	}

	#record_view .date_area .note_link a:before {
		content: "\F447";
		font-family: bootstrap-icons;
		font-size: 15px;
		color: #fff;
	}

	#record_view .schedule span,
	#record_view .schedule_start span,
	#record_view .schedule_start_done span,
	#record_view .schedule_end span,
	#record_view .schedule_end_done span,
	#record_view .schedule_result span,
	#record_view .release span {
		font-size: 14px;
	}

	#record_view .schedule span a,
	#record_view .schedule_start span a,
	#record_view .schedule_start_done span a,
	#record_view .schedule_end span a,
	#record_view .schedule_end_done span a,
	#record_view .schedule_result span a,
	#record_view .release span a {
		display: contents;
		color: #454545;
	}

	#record_view .schedule_start span:before,
	#record_view .schedule_start_done span:before,
	#record_view .schedule_end span:before,
	#record_view .schedule_end_done span:before,
	#record_view .schedule_result span:before,
	#record_view .schedule.confirm span:before,
	#record_view .schedule.not_application span:before,
	#record_view .schedule.pending span:before,
	#record_view .schedule.failed span:before,
	#record_view .release span:before {
		margin: 3px 0.2rem 3px 0;
  		padding: 1px 6px 2px;
  		font-size: 10px;
  		color: #fff;
  		font-weight: bold;
  		background-color: #ffaec0;
  		border-radius: 4px;
	}

	#record_view .schedule_start span:before,
	#record_view .schedule_start_done span:before {
		content: "申込開始";
		background-color: #f4f4f4;
		color: #fb829d;
	}

	#record_view .schedule_start_done span:before {
		content: "申込開始:✓";
	}

	#record_view .schedule_end span:before,
	#record_view .schedule_end_done span:before {
		content: "申込終了";
		background-color: #f4f4f4;
		color: #fb829d;
	}

	#record_view .schedule_end_done span:before {
		content: "申込終了:✓";
	}

	#record_view .schedule_result span:before {
		content: "当落";
		background-color: #f4f4f4;
		color: #454545;
	}

	#record_view .schedule.confirm span:before {
		content: "予定";
		background-color: #454545;
	}

	#record_view .schedule.not_application span:before {
		content: "予定:未申込";
		background-color: #454545;
	}

	#record_view .schedule.pending span:before {
		content: "予定:抽選中";
		background-color: #454545;
	}

	#record_view .schedule.failed span:before {
		content: "予定:落選";
		background-color: #454545;
	}

	#record_view .release span:before {
		content: "発売:予約済";
	}

	#record_view .release.not_reservation span:before {
		content: "発売:予約未";
	}
	
	#record_view .schedule_area {
		margin: 0 0 15px 0;
		padding: 5px 0;
		border-bottom: 3px dotted #ffaec0;
	}

	#record_view .action,
	#record_view .post {
		font-size: 12px;
	}

	#record_view .post_area {
		background-color: #f4f4f4;
		color: #999;
		border-radius: 8px;
		padding: 10px 0;
	}

	#record_view .table_area .post_area .post a {
		color: #999;
		font-weight: inherit;
		display: inline;
	}

	#record_view #date_link_area,
	#record_monthly_input #date_link_area {
		font-size: 20px;
		font-weight: bold;
	}

	#record_view .link_button_area,
	#record_monthly_input .link_button_area {
		padding: 20px;
  		background-color: #f4f4f4;
  		border-radius: 8px;
		margin: 0 0 0 0;
	}

	#record_view .iframe-wrapper {
		position: static;
  		padding-bottom: 20px;
		width: 500px;
  		height: 300px;
  		overflow: hidden;
	}
	  
	#record_view .iframe-wrapper iframe {
		position: static;
		width: 100%;
  		height: 100%;
	}

	/* ホバー時の吹き出しの設定を行う */
	.baloon {
		opacity: 0;
		transition: 0.5s;
		background: #5e6375;
		/* background: #838795; */
		position: absolute;
		color: #fff;
		padding: 10px 20px;
		width: auto;
		box-sizing: border-box;
		word-wrap: break-word;
		border-radius: 5px;
		visibility: hidden;
		pointer-events: none;
		z-index: 11; /* メニューバーよりも上 */
	}
	
	#record_view .action:hover:before,
	#record_view .post:hover:before {
		opacity: 1;
		visibility: visible;
	}

	#record_view .action:hover .baloon,
	#record_view .post:hover .baloon {
		opacity: 1;
		visibility: visible;
	}

	/* 月ごとの記録の設定 */
	#record_view .monthly_area .sentence {
		margin: 10px 2% 20px 0;
		border-radius: 10px 10px 5px 5px;
		width: 32%;
	}

	/* 3の倍数だけ右側のmarginをなくす */
	#record_view .monthly_area .sentence:nth-child(3n) {
		margin: 10px 0 20px 0;
	}

	#record_view .monthly_area .monthly_title {
		font-weight: bold;
		border: 3px solid rgb(255, 228, 234);
		background-color: rgb(255, 228, 234);
  		border-radius: 10px 10px 0 0;
  		padding: 5px;
		margin: 0;
		letter-spacing: 1px;
	}

	#record_view .month_area .action_area .action_category {
		margin: 10px 0 10px 10px;
  		border-bottom: 3px dotted #cdcdcd;
		font-weight: bold;
		letter-spacing: 1px;
		padding: 0 0 0 10px;

	}

	#record_view .monthly_area .kou_area .monthly_title {
		background-color: #FDF7CC;
		border: 3px solid #FDF7CC;
	}

	#record_view .monthly_area .monthly_text {
		font-size: 14px;
		margin: 0 20px 10px 20px;
	}

	#record_view .monthly_area .action_area,
	#record_view .monthly_area .post_area,
	#record_view .monthly_area .kou_area  {
		display: flex;
  		flex-wrap: wrap;
		width: 100%;
	}

	#record_view .monthly_area .post_area {
		background-color: transparent;
	}

	#record_view .monthly_area .post_area .sentence {
		background-color: #efefef;
	}

	#record_view .monthly_area .post_area .monthly_text,
	#record_view .monthly_area .kou_area .monthly_text {
		margin: 10px 10px 20px 20px;
		line-height: 1.7em;
	}

	#record_view .monthly_area .kou_area .monthly_text {
		margin: 10px 10px 0 20px;
	}

	#record_view .monthly_area .action_area summary {
		border-bottom: 3px dotted #cdcdcd;
		padding: 10px 20px 0 10px;
		margin: 0 0 0 10px;
		letter-spacing: 1px;
	}

	#record_view .monthly_area .action_area summary::after {
		top: 26%;
		left: 90%;
	}

	/* モーダルの設定 ここから */

	#record_view .modal_trigger{
		cursor: pointer;
	}

	#record_view .modal_wrapper {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10;
		width: 100%;
		height: 100%;
	}

	#record_view .modal_layer {
		height: 100%;
		background: rgba(54, 61, 72, 0.85);
		cursor: pointer;
	}

	#record_view .modal_container {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: min(calc(100% - 40px), 1000px);
		/* height: calc(100% - 40px); */
		height: calc(100% - 20%);
		padding: 0 0 10% 0;
		background: #fff;
		box-shadow: 1px 1px 10px 0 rgb(50,50, 50);
	  	border-radius: 10px;
	}

	#record_view .modal_inner {
		position: relative;
		overflow-y: scroll;
		height: 100%;
		padding: 60px 0 20px;
	}

	#record_view .modal_close {
		position: absolute;
		top: 20px;
		right: 20px;
		width: 44px;
		height: 44px;
		background: #fb829d;;
		cursor: pointer;
		transition: opacity .6s;
		border-radius: 22px;
	}

	#record_view .modal_close:hover {
		opacity: .6;
	}

	#record_view .modal_close:before,
	#record_view .modal_close:after {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 20px;
		height: 5px;
		background: #fff;
		content: '';
		border-radius: 5px;
	}

	#record_view .modal_close:before {
		transform: translate(-50%, -50%) rotate(45deg);
	}

	#record_view .modal_close:after {
		transform: translate(-50%, -50%) rotate(-45deg);
	}

	/* 以下は中身のデザイン */
	#record_view .modal_title {
		font-weight: bold;
		padding: 0 20px 10px 20px;
		margin: 0 0 8px 0;
		border-bottom : 5px dotted #cdcdcd;
		font-size: 16px;
		color: #454545;
	}

	#record_view .modal_type {
		padding: 3px 30px 30px 30px;
  		color: #999;
  		font-size: 14px;
	}

	#record_view .modal_inner_area {
		padding: 0 20px;
		display: flex;
	}

	#record_view .modal_inner_area .post_tag_area {
		width: 400px;
		margin: 0 20px 0 0;
	}

	/* モーダルの設定 ここまで */
	
	@media screen and (max-width: 640px) {
		#record_view #date_link_area {
			margin: 0 0 10px 0;
		}

		#record_view .link_button_area {
			margin: 20px 0 10px 0;
		}

		#record_view .article .division {
			margin: 50px 0 30px 0;
		}

		#record_view .record_table {
			width: 100%;
		}

		#record_view .record_table td {
			min-width: 150px;
		}

		#record_view .modal_content {
			padding: 0 0 50px;
		}

		#record_view .modal_container {
			padding: 0 0 25% 0;
		}

		#record_view .modal_inner {
			padding: 60px 0 20px;
		}

		#record_view .modal_inner_area {
			display: grid;
		}

		#record_view .modal_inner_area .post_tag_area {
			width: auto;
			margin: 0 ;
		}

		#record_view .iframe-wrapper {
			padding-bottom: 20px;
			padding-top: 20px;
			width: 100%;
			height: 300px;
		}

		#record_view .iframe-wrapper iframe {
  			width: 100%;
  			height: 100%;
			margin: 0 0 20px 0;
		}

		#record_view .monthly_area .sentence {
			width: 100%;
			margin: 10px 0 20px 0;
		}
	}

/*  --------------------------------------------------------------------------------------------------------------------
	記録　ポスト 閲覧
	-------------------------------------------------------------------------------------------------------------------- */
	.view_post .date {
		font-weight: bold;
		background-color: rgb(255, 228, 234);
		border-radius: 5px 5px 0 0;
		padding: 3px 0 5px 20px;
		margin: 10px 0 0 0;
	}

	.view_post:first-child {
		padding: 20px 0 0 0;
	}

	.view_post .title {
		font-weight: bold;
		font-size: 18px;
		border-bottom: 3px dotted #cdcdcd;
		padding: 10px 20px 5px 20px;
		margin: 0 0 5px 0;
	}

	.view_post .type {
		padding: 3px 20px 20px 45px;
  		color: #999;
  		font-size: 14px;
	}

	.view_post .post_area {
		overflow-x: scroll;
		background-color: #f4f4f400;
		margin: 0 0 20px 0;
		height: 300px;
	}

	.view_post .post_area .post_area_inner {
		min-width: 100%;
  		white-space: nowrap;
		display: flex;
		padding: 0 10px;
	}

	.view_post .other_tag_area,
	.view_post .note_area {
		padding: 10px 20px 5px 20px;
	}

	@media screen and (max-width: 640px) {
		.view_post .title {
			padding: 10px 10px 5px 10px;
		}

		.view_post .other_tag_area,
		.view_post .note_area {
		padding: 10px 10px 5px 10px;
	}
	}
/*  --------------------------------------------------------------------------------------------------------------------
	記録　年ごと 閲覧
	-------------------------------------------------------------------------------------------------------------------- */
	
	#record_view .month_area #date_link_area {
		font-weight: bold;
	}

	#record_view .month_area .date_area {
		border-radius: 8px 8px 0 0;
		margin: 10px 0 20px 0;
	}

	#record_view .month_area .month_record_link_area {
		margin: 0 0 0 20px;
		font-size: 20px;
	}

	#record_view .month_area .month_record_link_area a {
		margin: 10px 0 0 0;
		color: #fff;
	}

	#record_view .month_area .month_record_link_area a:before {
		content: "";
		height: 15px;
		width: 15px;
		background-color: #fff;
		-webkit-mask: url('../img/icon/calendar.svg');
		-webkit-mask-size: cover;
		display: inline-block;
		margin: 0 5px 0 0;
	}
	
	#record_view .month_area .link_area {
		float: right;
		margin: 10px 10px 0 0;
	}

	#record_view .month_area .link_area .health_link {
		margin: 0 12px 0 0;
	}

	#record_view .month_area .link_area .photo_link a:before {
		content: "\F42A";
		font-family: bootstrap-icons;
		font-size: 20px;
		color: #fff;
	}

	#record_view .month_area .link_area .note_link a:before {
		content: "\F447";
		font-family: bootstrap-icons;
		font-size: 20px;
		color: #fff;
	}

	#record_view .month_area .link_area .health_link a:before {
		content: "";
		height: 20px;
		width: 20px;
		background-color: #fff;
		-webkit-mask: url('../img/icon/health.svg');
		-webkit-mask-size: cover;
		display: inline-block;
	}
	
	#record_view .month_area {
		border-bottom : 5px dotted #cdcdcd;
		margin: 30px 0 0 0;
  		padding: 0 0 30px 0;
	}

	#record_view .month_area .sentence {
		margin: 0 20px;
	}

	#record_view .month_area .action_area {
		margin: 15px 0 0 0;
	}

	#record_view .month_area .post_area {
		padding: 15px 0 20px 0;
	}

	#record_view .month_area .monthly_title {
		letter-spacing: 1px;;
  	}

	#record_view .month_area .monthly_text {
		margin: 0 0 0 30px;
		font-size: 14px;
		line-height: 1.7em;
	}
	
	@media screen and (max-width: 640px) {
		#record_view .month_area .sentence {
			padding: 0 0 0 0;
			margin: 0 0;
		}

		summary {
			margin: 0 0 0 0;
		}

		#record_view .month_area .action_area {
			margin: 0 0 0 0;
		}

		#record_view .month_area .action_area .action_category {
			margin: 10px 0 10px 10px;
		}

		#record_view .month_area .post_area {
			margin: 20px 0 0 0;
		}

		#record_view .month_area .monthly_text {
			margin: 0 0 0 30px;
		}
	}

/*  --------------------------------------------------------------------------------------------------------------------
	ポスト記録 編集
	-------------------------------------------------------------------------------------------------------------------- */

/*  --------------------------------------------------------
		投稿ポスト記録一覧 
	-------------------------------------------------------- */
	#record_post_list .grid_container.clear {
		border-bottom : 5px dotted #cdcdcd;
		margin: 0 0 50px 0;
		padding: 0 0 50px 0;
	}

	#record_post_list dl {
		line-height: 2.0em;
		padding: 0 0 0 0;
	}

	#record_post_list dt {
		width: 100px;
		color: #fff;
		background-color: #ffaec0;
		border-radius: 5px 0 0 5px;
		font-size: 10px;
		font-weight: bold;
		letter-spacing: 3px;
		text-align: center;
		margin: 0 10px 10px 20px;
	}

	#record_post_list dd {
		margin: 0 0 10px 120px;
		padding: 0;
	}

	@media screen and (max-width: 640px) {
		#record_post_list dt {
			margin: 0 10px 10px 0;
		}
	}

/*  --------------------------------------------------------------------------------------------------------------------
	日常記録 編集
	-------------------------------------------------------------------------------------------------------------------- */

/*  --------------------------------------------------------
		投稿日常記録一覧 
	-------------------------------------------------------- */
	#record_action_list .grid_container.clear div {
		border-bottom : 5px dotted #cdcdcd;
		margin: 0 0 40px 0;
		padding: 0 0 40px 0;
	}

	#record_action_list .img_area {
		position: relative;
	}

	#record_action_list dl {
		line-height: 2.0em;
		padding: 0 0 0 0;
	}

	#record_action_list dt {
		width: 100px;
		color: #fff;
		background-color: #ffaec0;
		border-radius: 5px 0 0 5px;
		font-size: 10px;
		font-weight: bold;
		letter-spacing: 3px;
		text-align: center;
		margin: 0 10px 10px 20px;
	}

	#record_action_list dd {
		margin: 0 0 10px 120px;
		padding: 0;
	}

	@media screen and (max-width: 640px) {
		#record_action_list .clearfix .row:first-child {
			border-bottom : 5px dotted #cdcdcd;
			margin: 0 0 50px 0;
			padding: 0 0 50px 0;
		}

		#record_action_list dt {
			margin: 0 10px 10px 0;
		}
	}

/*  --------------------------------------------------------------------------------------------------------------------
	月ごとの記録 編集
	-------------------------------------------------------------------------------------------------------------------- */

/*  --------------------------------------------------------
		月ごとの記録投稿 
	-------------------------------------------------------- */
	#record_monthly_input ul {
		margin: 0 0 30px 0;
		border-bottom : 5px dotted #cdcdcd;
		font-size: 10px;
	}

	#record_monthly_input li {
		border-bottom: 3px dotted #cdcdcd;
	}

	#record_monthly_input .sentence {
		margin: 0 0 30px 0;
	}

	#record_monthly_input .sample_date,
	#record_monthly_input .sample_note {
		color: #999;
	}

	#record_monthly_input .sample_name,
	#record_monthly_input .sample_note {
		margin:  0 0 0 20px;
	}

	#record_monthly_input .input_area {
		border-bottom : 5px dotted #cdcdcd;
		padding: 0 0 30px 0;
		margin: 30px 0 0 0;
	}

	#record_monthly_input .input_form_area input[type="button"]{
		margin: 20px 5px 5px 5px;
	}

/*  --------------------------------------------------------
		投稿月ごとの記録一覧 
	-------------------------------------------------------- */
	#record_monthly_list .grid_container.clear div {
		border-bottom : 5px dotted #cdcdcd;
		margin: 0 0 40px 0;
		padding: 0 0 40px 0;
	}

	#record_monthly_list .img_area {
		position: relative;
	}

	#record_monthly_list dl {
		line-height: 2.0em;
		padding: 0 0 0 0;
	}

	#record_monthly_list dt {
		width: 100px;
		color: #fff;
		background-color: #ffaec0;
		border-radius: 5px 0 0 5px;
		font-size: 10px;
		font-weight: bold;
		letter-spacing: 3px;
		text-align: center;
		margin: 0 10px 10px 20px;
	}

	#record_monthly_list dd {
		margin: 0 0 10px 120px;
		padding: 0;
	}

	@media screen and (max-width: 640px) {
		#record_monthly_list .clearfix .row:first-child {
			border-bottom : 5px dotted #cdcdcd;
			margin: 0 0 50px 0;
			padding: 0 0 50px 0;
		}

		#record_monthly_list dt {
			margin: 0 10px 10px 0;
		}
	}

/*  --------------------------------------------------------------------------------------------------------------------
競馬記録 編集
-------------------------------------------------------------------------------------------------------------------- */
/*  --------------------------------------------------------
		投稿競馬記録一覧 
	-------------------------------------------------------- */

	#record_keiba_view .content {
		padding: 0 0 30px 0;
		margin: 30px 0 0 0;
	}

	#record_keiba_view .date_area {
		font-weight: bold;
  		background-color: rgb(255, 228, 234);
  		border-radius: 5px 5px 0 0;
  		padding: 3px 0 5px 20px;
  		margin: 10px 0 0 0
	}

	#record_keiba_view .middleButtonSquareWhite {
		border-radius: 8px;
		padding: 5px 10px;
		font-size: 14px;
	}

	#record_keiba_view dl {
		line-height: 1.5em;
  		padding: 0 0 0 0;
	}

	#record_keiba_view dt {
		width: 80px;
  		color: #fff;
  		background-color: #ffaec0;
  		border-radius: 5px 0 0 5px;
  		font-size: 10px;
  		font-weight: bold;
  		letter-spacing: 3px;
  		text-align: center;
  		margin: 0 10px 10px 0;
	}

	#record_keiba_view dd {
		margin: 0 0 10px 90px;
  		padding: 0;
	}

	#record_keiba_view .parent_content {
		border-right : 5px dotted #cdcdcd;
		margin: 30px 0 0 0;
		padding: 0 20px 0 0;
	}

	#record_keiba_view .parent_content .place_area {
		margin: 0 0 10px 0;
	}

	#record_keiba_view .parent_content .place_area .keibajo {
		font-weight: bold;
	}

	#record_keiba_view .parent_content .tournament_area {
		padding: 0 0 0 10px;
	}

	#record_keiba_view .parent_content .tournament_area .tournamentName {
		border-top: 5px double #cdcdcd;
	}

	#record_keiba_view .parent_content .G1::before,
	#record_keiba_view .parent_content .G2::before,
	#record_keiba_view .parent_content .G3::before {
		content: 'up';
		padding: 1px 10px 2px;
		margin: 3px 0; 
		font-size: 10px;
  		color: #fff;
  		font-weight: bold;
  		background-color: #fb829d;
  		border-radius: 4px;
  		left: 16px;
	}

	#record_keiba_view .parent_content .G1::before {
		content: 'G1';
	}

	#record_keiba_view .parent_content .G2::before {
		content: 'G2';
	}

	#record_keiba_view .parent_content .G3::before {
		content: 'G3';
	}

	#record_keiba_view .child_content {
		margin: 30px 0 0 0;
	}

	#record_keiba_view .child_content .hourse_area {
		font-weight: bold;
	}

	#record_keiba_view .child_content .hourse_area .horseNumber {
		color: #454545;
  		background-color: #e3e3e3;
  		padding: 3px 5px 3px 10px;
  		border-radius: 3px;
  		margin: 0 8px 0 0;
	}

	#record_keiba_view .child_content .odds_area {
		margin: 20px 0 30px 40px;
	}

	@media screen and (max-width: 640px) {
		#record_keiba_view .parent_content {
			border-right : 0px dotted #cdcdcd;
			border-bottom : 5px dotted #cdcdcd;
			margin: 20px 0 0 0;
    		padding: 0 0 25px 0;
		}
	}

/*  --------------------------------------------------------
		投稿競馬記録一覧 
	-------------------------------------------------------- */

	#record_keiba_input .input_area {
		border-bottom : 5px dotted #cdcdcd;
		padding: 0 0 30px 0;
		margin: 30px 0 0 0;
	}

/*  --------------------------------------------------------------------------------------------------------------------
	健康記録 編集
	-------------------------------------------------------------------------------------------------------------------- */

/*  --------------------------------------------------------
		投稿健康記録一覧 
	-------------------------------------------------------- */
	#record_health_list .grid_container.clear div {
		border-bottom : 5px dotted #cdcdcd;
		margin: 0 0 40px 0;
		padding: 0 0 40px 0;
	}

	#record_health_list #chart_area {
		border-bottom : 5px dotted #cdcdcd;
		margin: 0 0 30px 0;
		padding: 0 0 30px 0;
	}

	#record_health_list #chart_area #selfChart {
		margin: 0 0 30px 0;
	}

	#record_health_list dl {
		line-height: 2.0em;
		padding: 0 0 0 0;
	}

	#record_health_list dt {
		width: 100px;
		color: #fff;
		background-color: #ffaec0;
		border-radius: 5px 0 0 5px;
		font-size: 10px;
		font-weight: bold;
		letter-spacing: 3px;
		text-align: center;
		margin: 0 10px 10px 20px;
	}

	#record_health_list dd {
		margin: 0 0 10px 120px;
		padding: 0;
	}

	@media screen and (max-width: 640px) {
		#record_health_list .clearfix .row:first-child {
			border-bottom : 5px dotted #cdcdcd;
			margin: 0 0 50px 0;
			padding: 0 0 50px 0;
		}

		#record_health_list dt {
			margin: 0 10px 10px 0;
		}
	}

/*  --------------------------------------------------------------------------------------------------------------------
	備忘録 閲覧
	-------------------------------------------------------------------------------------------------------------------- */
	#schedule_view .contenct {
		border-bottom : 5px dotted #cdcdcd;
		border-radius: 10px;
  		padding: 20px 10px 8px 10px;
	}

	#schedule_view .contenct.done {
		background: #eee;
	}

	/* 初めの要素には上にmarginを入れる */
	#schedule_view .contenct:first-of-type {
		padding: 30px 10px 20px 10px;
	}

	#schedule_view .firstArea,
	#schedule_view .secondArea,
	#schedule_view .thirdArea {
		margin: 0 0 10px 0;
	}

	#schedule_view .firstArea {
		position: relative;
	}
	
	#schedule_view .firstArea.grid_container {
		gap: 0 2%;
  		grid-template-columns: 70px auto 0;
  		grid-template-rows: 35px auto;
	}

	#schedule_view .firstArea.grid_container.detail {
  		grid-template-rows: auto auto;
	}
	
	#schedule_view .contenct .type {
		background-color: #fb829d;
		border-radius: 35px;
		font-weight: bold;
		text-align: center;
		color: #fff;
		height: 70px;
  		grid-row: 1 / 2;
  		grid-column: 1 / 1;
	}

	#schedule_view .contenct .type.display_none:after {
		content: '非表示';
  		position: absolute;
  		top: 70%;
  		left: 0%;
  		color: #454545;
  		font-size: 14px;
		font-weight: bold;
		border-radius: 4px;
  		padding: 5px 12px;
  		background-color: #f4f4f4;
	}

	#schedule_view .contenct .title {
		font-weight: bold;
		font-size: 18px;
		border-bottom: 3px dotted #cdcdcd;
  		height: 30px;
		grid-row: 1 / 1;
		grid-column: 2 / 2;
		padding: 0 50px 0 0;
		/* 溢れた部分を隠す */
		overflow: hidden;
		/* 溢れた部分を「...」にする */
  		text-overflow: ellipsis;
		/* 1行で表示 */
  		white-space: nowrap;
	}

	#schedule_view .contenct .detail .title {
		padding: 0 0 0 0;
		height: auto;
		overflow: auto;
  		text-overflow: clip;
  		white-space: wrap;
	}

	#schedule_view .contenct.done .title {
		color: #999;
	}

	#schedule_view .secondArea {
		grid-row: 2 / 2;
  		grid-column: 2 / 2;
		margin: 10px 0 0 0;
	}

	#schedule_view .thirdArea {
		grid-row: 3 / 3;
  		grid-column: 2 / 2;
		margin: 10px 0 0 0;
	}

	#schedule_view .secondArea.grid_container,
	#schedule_view .thirdArea.grid_container {
		gap: 0 1%;
		grid-template-columns: 10% 30% 15% 25% 10% 5%;
	}

	#schedule_view .secondArea .label,
	#schedule_view .thirdArea .label {
		background-color: #ffaec0;
		color: #fff;
		text-align: center;
		border-radius: 5px;
		font-weight: bold;
		font-size: 12px;
		padding: 3px 0 5px 0;
	}

	#schedule_view .thirdArea .label {
		background-color: #999;
	}

	#schedule_view .contenct.done .value {
		color: #999;
	}

	#schedule_view .firstArea .grey {
		grid-column: 2 / 2;
  		margin: 10px 0 0 0;
	}

	#schedule_view .firstArea .grey h4 {
		margin: 10px 0 0 0;
	}

	#schedule_view .additionalArea {
		margin: 20px 0 0 0;
	}

	#schedule_view .detail_link {
		grid-row: 2 / 2;
  		grid-column: 3 / 3;
		margin: 0 0 0 -60px;
		position: relative;
		vertical-align: middle;
	}

	#schedule_view .detail_link::after {
		content: '';
		position: absolute;
		top: 47%;
  		left: 82%;
		transform: rotate(45deg) translateY(-50%);
		width: 6px;
		height: 6px;
		border-width: 3px 3px 0 0;
		border-style: solid;
		color: #fb829d;
	}

	/* 期限が近いもの */
	#schedule_view .contenct.warning {
		background-color: rgb(255, 228, 234);
	}

	#schedule_view .type.outside:before,
	#schedule_view .type.bug:before,
	#schedule_view .type.buy:before ,
	#schedule_view .type.hp:before,
	#schedule_view .type.degign:before,
	#schedule_view .type.watch:before,
	#schedule_view .type.yet:before {
		margin-right: 0rem;
		position: absolute;
		left: 21px;
		top: 20px;
	}

	#schedule_view .type.outside:before {
  		left: 20px;
		top: 17px;
	}

	#schedule_view .type.watch:before {
  		left: 19px;
		top: 19px;
	}

	#schedule_view .type.yet:before {
		left: 20px;
  		top: 20px;
	}

	#schedule_view .type.hp:before {
		left: 20px;
  		top: 18px;
	}

	#schedule_view .type.degign:before {
		left: 20px;
  		top: 20px;
	}

	#schedule_view .type.bug:before {
		left: 22px;
  		top: 19px;
	}

	#schedule_view .type.outside:before {
		content: "";
		height: 30px;
		width: 30px;
		background-color: #fff;
		-webkit-mask: url('../img/icon/outside.svg');
		-webkit-mask-size: cover;
		display: inline-block;
	}
	
	#schedule_view .type.bug:before {
		content: "";
		height: 30px;
		width: 30px;
		background-color: #fff;
		-webkit-mask: url('../img/icon/bug.svg');
		-webkit-mask-size: cover;
		display: inline-block;
	}
	
	#schedule_view .type.buy:before {
		content: "";
		height: 30px;
		width: 30px;
		background-color: #fff;
		-webkit-mask: url('../img/icon/buy.svg');
		-webkit-mask-size: cover;
		display: inline-block;
	}
	
	#schedule_view .type.hp:before {
		content: "";
		height: 30px;
		width: 30px;
		background-color: #fff;
		-webkit-mask: url('../img/icon/hp.svg');
		-webkit-mask-size: cover;
		display: inline-block;
	}

	#schedule_view .type.degign:before {
		content: "";
		height: 30px;
		width: 30px;
		background-color: #fff;
		-webkit-mask: url('../img/icon/html.svg');
		-webkit-mask-size: cover;
		display: inline-block;
	}
	
	#schedule_view .type.watch:before {
		content: "";
		height: 30px;
		width: 30px;
		background-color: #fff;
		-webkit-mask: url('../img/icon/watch.svg');
		-webkit-mask-size: cover;
		display: inline-block;
	}

	#schedule_view .type.yet:before {
		content: "";
		height: 30px;
		width: 30px;
		background-color: #fff;
		-webkit-mask: url('../img/icon/yet.svg');
		-webkit-mask-size: cover;
		display: inline-block;
	}

	#schedule_view .link:before {
		content: "";
		height: 15px;
		width: 15px;
		margin-left: 0.2rem;
		background-color: #fb829d;
		-webkit-mask: url('../img/icon/link.svg');
		-webkit-mask-size: cover;
		display: inline-block;
	}

	/* include時の設定 */
		#schedule_link #schedule_view .contenct {
			padding: 20px 10px 10px 10px;
		}

		#schedule_link #schedule_view .contenct:first-of-type {
			padding: 10px 10px 10px 10px;
		}

		#schedule_link #schedule_view .firstArea.grid_container {
			grid-template-columns: 50px auto 0;
		}

		#schedule_link #schedule_view .contenct .type {
			border-radius: 25px;
			height: 50px;
		}
	
		#schedule_link #schedule_view .contenct .title {
			font-size: 16px;
			height: auto;
		}

		#schedule_link #schedule_view .secondArea,
		#schedule_link #schedule_view .thirdArea {
			margin: 5px 0 0 0;
		}

		#schedule_link #schedule_view .secondArea .label,
		#schedule_link #schedule_view .thirdArea .label {
			font-size: 10px;
			padding: 5px 0;
		}

		#schedule_link #schedule_view .secondArea .value,
		#schedule_link #schedule_view .thirdArea .value  {
			font-size: 14px;
			margin: auto;
		}

		/* -------------------------------------------------------------- */
		#schedule_link #schedule_view .secondArea.grid_container,
		#schedule_link #schedule_view .thirdArea.grid_container {
			gap: 3% 1%;
			grid-template-columns: 20% 20% 20% 20% 20%;
			grid-template-rows: auto auto;
		}
	
		#schedule_link #schedule_view .secondArea .label:nth-of-type(1),
		#schedule_link #schedule_view .thirdArea .label:nth-of-type(1) {
			grid-row: 1 / 1;
			grid-column: 1 / 1;
		}
	
		#schedule_link #schedule_view .secondArea .value:nth-of-type(2),
		#schedule_link #schedule_view .thirdArea .value:nth-of-type(2) {
			grid-row: 1 / 1;
			grid-column: 2 / 6;
		}

		#schedule_link #schedule_view .secondArea .label:nth-of-type(3),
		#schedule_link #schedule_view .thirdArea .label:nth-of-type(3) {
			grid-row: 2 / 2;
			grid-column: 1 / 1;
		}
	
		#schedule_link #schedule_view .secondArea .value:nth-of-type(4),
		#schedule_link #schedule_view .thirdArea .value:nth-of-type(4) {
			grid-row: 2 / 2;
			grid-column: 2 / 4;
		}

		#schedule_link #schedule_view .secondArea .label:nth-of-type(5),
		#schedule_link #schedule_view .thirdArea .label:nth-of-type(5)  {
			grid-row: 2 / 2;
			grid-column: 4 / 4;
		}
	
		#schedule_link #schedule_view .secondArea .value:nth-of-type(6),
		#schedule_link #schedule_view .thirdArea .value:nth-of-type(6)  {
			grid-row: 2 / 2;
			grid-column: 5 / 5;
		}
		/* -------------------------------------------------------------- */

		#schedule_link #schedule_view .type.bug::before, 
		#schedule_link #schedule_view .type.buy::before, 
		#schedule_link #schedule_view .type.hp::before, 
		#schedule_link #schedule_view .type.degign::before {
			left: 9px;
			top: 9px;
		}

		#schedule_link #schedule_view .type.watch::before {
			left: 9px;
			top: 9px;
		}

		#schedule_link #schedule_view .type.outside::before {
			left: 9px;
			top: 7px;
		}

		#schedule_link #schedule_view .type.yet::before {
			left: 10px;
			top: 9px;
		}

		#schedule_link #schedule_view .type.hp::before {
			left: 9px;
			top: 7px;
		}

	@media screen and (max-width: 640px) {
		#schedule_view .contenct {
			padding: 20px 10px 20px 10px;
		}

		#schedule_view .contenct:first-of-type {
			padding: 10px 10px 20px 10px;
		}

		#schedule_view .firstArea,
		#schedule_view .secondArea,
		#schedule_view .thirdArea {
			margin: 0 0 0 0;
		}

		#schedule_view .firstArea.grid_container {
			grid-template-columns: 50px auto 0;
		}

		#schedule_view .contenct .type {
			border-radius: 25px;
			height: 50px;
		}
	
		#schedule_view .contenct .title {
			font-size: 16px;
			height: auto;
			padding: 0 30px 0 0;
		}

		#schedule_view .secondArea,
		#schedule_view .thirdArea {
			margin: 5px 0 0 0;
		}

		#schedule_view .secondArea .label,
		#schedule_view .thirdArea .label {
			font-size: 10px;
			padding: 5px 0;
		}

		#schedule_view .secondArea .value,
		#schedule_view .thirdArea .value {
			font-size: 14px;
			margin: auto;
		}

		#schedule_view .detail_link::after {
			top: -5px;
    		left: 20px;
		}

		/* -------------------------------------------------------------- */
		#schedule_view .secondArea.grid_container,
		#schedule_view .thirdArea.grid_container {
			gap: 5% 1%;
			grid-template-columns: 20% 20% 20% 20% 20%;
			grid-template-rows: auto auto;
		}
	
		#schedule_view .secondArea .label:nth-of-type(1),
		#schedule_view .thirdArea .label:nth-of-type(1)  {
			grid-row: 1 / 1;
			grid-column: 1 / 1;
		}
	
		#schedule_view .secondArea .value:nth-of-type(2),
		#schedule_view .thirdArea .value:nth-of-type(2)  {
			grid-row: 1 / 1;
			grid-column: 2 / 6;
		}

		#schedule_view .secondArea .label:nth-of-type(3),
		#schedule_view .thirdArea .label:nth-of-type(3)  {
			grid-row: 2 / 2;
			grid-column: 1 / 1;
		}
	
		#schedule_view .secondArea .value:nth-of-type(4),
		#schedule_view .thirdArea .value:nth-of-type(4)  {
			grid-row: 2 / 2;
			grid-column: 2 / 4;
		}

		#schedule_view .secondArea .label:nth-of-type(5),
		#schedule_view .thirdArea .label:nth-of-type(5) {
			grid-row: 2 / 2;
			grid-column: 4 / 4;
		}
	
		#schedule_view .secondArea .value:nth-of-type(6),
		#schedule_view .thirdArea .value:nth-of-type(6) {
			grid-row: 2 / 2;
			grid-column: 5 / 5;
		}
		/* -------------------------------------------------------------- */

		#schedule_view .type.bug::before, 
		#schedule_view .type.buy::before, 
		#schedule_view .type.hp::before, 
		#schedule_view .type.degign::before {
			left: 9px;
			top: 9px;
		}

		#schedule_view .type.watch::before {
			left: 9px;
			top: 9px;
		}

		#schedule_view .type.outside::before {
			left: 9px;
			top: 7px;
		}

		#schedule_view .type.yet::before {
			left: 10px;
			top: 9px;
		}

		#schedule_view .type.hp::before {
			left: 9px;
			top: 7px;
		}
	}

/*  --------------------------------------------------------------------------------------------------------------------
	ログ 閲覧
	-------------------------------------------------------------------------------------------------------------------- */
	#log_view .category_area li {
		padding: 10px 9% 3px 52px;
	}

	#log_view .category_area li::before {
		content: '';
	}

	#log_view .category_area li:hover {
		background: rgba(255, 228, 234, 0);
	}
	
	#log_view .category_area .type {
		padding: 0;
		border-bottom: 0px dotted #cdcdcd;
		padding: 0 0 0 10px;
		color: #999;
	}

	#log_view .category_area .type h4 {
		border-bottom: 0px solid rgb(255, 228, 234);
		margin: 20px 0 0 0;
		font-size: 18px;
	}
	
	#log_view .category_area .type h4:before {
		content: '#';
		margin: 0 0.2rem;
		font-size: 16px;
		color: #ffaec0;
	}

	#log_view .category_area .new span:before,
	#log_view .category_area .update span:before {
		margin: 3px 0;
  		padding: 1px 6px 2px;
  		font-size: 10px;
  		color: #fff;
  		font-weight: bold;
  		background-color: #fb829d;
  		border-radius: 4px;
  		left: 16px;
  		position: absolute;
	}

	#log_view .category_area .new span:before {
		content: 'new';
	}

	#log_view .category_area .update span:before {
		content: 'up';
		padding: 1px 10px 2px;
	}
	
	#log_view .article {
		position: relative;
		background-color: #fff;
		border-radius : 15px;
		margin: 0 0 80px 0;
	}
	
	/* 初めの記事には上にmarginを入れる */
	#log_view .article:first-of-type {
		margin-top: 30px;
	}
	
	#log_view .article h3 {
		border-bottom: 0px solid #cdcdcd;
		/* margin: 0 0 10px 0; */
		padding: 0 0 4px 0;
		margin-bottom: 0.2rem;
		background-image: linear-gradient(90deg, #fb829d 0 10%, #dedede 0%);
		background-repeat: no-repeat;
		background-size: 100% 10%;
		background-position: bottom;
		font-size: 18px;
		border-bottom: opx solid rgb(255, 228, 234);
	}
	
	#log_view .article h3:before {
		content: '';
	}
	
	#log_view .article .category,
	#log_view .article .type {
		color: #cdcdcd;
  		font-weight: bold;
	}

	#log_view .article .category {
		margin: 0 0 0 10px;
	}
	
	#log_view .article .date {
		position: absolute;
		background-color: #fb829d;
		width: 100px;
		height: 100px;
		border-radius: 50%;
		top: -20px;
		right: 20px;
	}
	
	#log_view .article .date .sub_division {
		position: relative;
		width: 100px;
		height: 100px;
	}
	
	#log_view .article .date .sub_division p {
		position: absolute;
		color: #fff;
		font-size: 12PX;
		font-weight: bold;
		text-align: center;
		top: 40%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
	}
	
	#log_view .article .division {
		margin: 20px 20px 30px 20px;
	}

	#log_view .article img {
		width: 600px;
	}

	#log_view .archiveContents {
		margin: 0 0 30px 0;
	}

	#log_view .article .title_area {
		font-weight: bold;
  		background-color: rgb(255, 228, 234);
  		border-radius: 5px 5px 0 0;
  		padding: 3px 0 5px 20px;
  		margin: 10px 0 10px 0;
	}

	#log_view .archiveContents .grid_container {
		display: flex;
	}

	#log_view .archiveContents .data_area {
		width: 100%;
	}

	#log_view .archiveContents dl {
		line-height: 2.0em;
		padding: 0 0 0 0;
	}

	#log_view .archiveContents dt {
		width: 100px;
		color: #fff;
		background-color: #ffaec0;
		border-radius: 5px 0 0 5px;
		font-size: 10px;
		font-weight: bold;
		letter-spacing: 3px;
		text-align: center;
		margin: 0 10px 10px 0px;
	}

	#log_view .archiveContents dd {
		margin: 0 0 10px 110px;
		padding: 0;
	}
	
	@media screen and (max-width: 640px) {
		#log_view #menu {
			grid-template-columns: 100%;
  			grid-template-rows: auto;
		}

		#log_view .article h3 {
			padding: 0 110px 4px 0;
		}

		#log_view .article .date {
			right: 10px;
		}

		#log_view .category_area {
			margin: 0;
			width: 100%;
		}

		#log_view ul {
			display: block;
		}

		#log_view .article .division {
			margin: 50px 0 30px 0;
		}

		#log_view .article img {
			width: 100%;
		}

		#log_view .archiveContents .grid_container {
			display: grid;
		}

		#log_view .archiveContents dt {
			margin: 0 10px 10px 0;
		}
	}

/*  --------------------------------------------------------------------------------------------------------------------
	ログ 編集
	-------------------------------------------------------------------------------------------------------------------- */
	#log_list .article {
		background-color: #fff;
		border-bottom : 5px dotted #cdcdcd;
		margin: 0 0 40px 0;
		padding: 0 0 40px 0;
	}
	
	#log_list dl {
		line-height: 2.0em;
		padding: 0 0 0 0;
	}

	#log_list dt {
		width: 100px;
		color: #fff;
		background-color: #ffaec0;
		border-radius: 5px 0 0 5px;
		font-size: 10px;
		font-weight: bold;
		letter-spacing: 3px;
		text-align: center;
		margin: 0 10px 10px 20px;
	}

	#log_list dd {
		margin: 0 0 10px 120px;
		padding: 0;
	}
	
	@media screen and (max-width: 640px) {
		#log_list .category {
			display: inline-block;
			margin: 0 10px 0 0;
		}
	
		#log_list .sub_division {
			margin: 30px 0 0 0;
		}

		#log_list dt {
			margin: 0 10px 10px 0;
		}
	}

/*  --------------------------------------------------------
		カテゴリに応じたアイコンの設定
	-------------------------------------------------------- */

.utapri:before {
	content: "";
	height: 15px;
	width: 15px;
	margin-right: 0.2rem;
	background-color: #fb829d;
	-webkit-mask: url('../img/icon/utapri.svg');
	-webkit-mask-size: cover;
	display: inline-block;
}

.prism:before {
	content: "";
	height: 15px;
	width: 15px;
	margin-right: 0.2rem;
	background-color: #fb829d;
	-webkit-mask: url('../img/icon/prism.svg');
	-webkit-mask-size: cover;
	display: inline-block;
}

.pgr:before {
	content: "";
	height: 15px;
	width: 15px;
	margin-right: 0.2rem;
	background-color: #fb829d;
	-webkit-mask: url('../img/icon/pgr.svg');
	-webkit-mask-size: cover;
	display: inline-block;
}

.kou:before {
	content: "";
	height: 15px;
	width: 15px;
	margin-right: 0.2rem;
	background-color: #fb829d;
	-webkit-mask: url('../img/icon/kou.svg');
	-webkit-mask-size: cover;
	display: inline-block;
}

.love:before {
	content: "";
	height: 15px;
	width: 15px;
	margin-right: 0.2rem;
	background-color: #fb829d;
	-webkit-mask: url('../img/icon/love.svg');
	-webkit-mask-size: cover;
	display: inline-block;
}

.horse:before {
	content: "";
	height: 15px;
	width: 15px;
	margin-right: 0.2rem;
	background-color: #fb829d;
	-webkit-mask: url('../img/icon/horse.svg');
	-webkit-mask-size: cover;
	display: inline-block;
}

.yet:before {
	content: "";
	height: 15px;
	width: 15px;
	margin-right: 0.2rem;
	background-color: #fb829d;
	-webkit-mask: url('../img/icon/yet.svg');
	-webkit-mask-size: cover;
	display: inline-block;
}

.outside:before {
	content: "";
	height: 15px;
	width: 15px;
	margin-right: 0.2rem;
	background-color: #fb829d;
	-webkit-mask: url('../img/icon/outside.svg');
	-webkit-mask-size: cover;
	display: inline-block;
}

.anime:before {
	content: "";
	height: 15px;
	width: 15px;
	margin-right: 0.2rem;
	background-color: #fb829d;
	-webkit-mask: url('../img/icon/anime.svg');
	-webkit-mask-size: cover;
	display: inline-block;
}

.game:before {
	content: "";
	height: 15px;
	width: 15px;
	margin-right: 0.2rem;
	background-color: #fb829d;
	-webkit-mask: url('../img/icon/game.svg');
	-webkit-mask-size: cover;
	display: inline-block;
}

.buy:before {
	content: "";
	height: 15px;
	width: 15px;
	margin-right: 0.2rem;
	background-color: #fb829d;
	-webkit-mask: url('../img/icon/buy.svg');
	-webkit-mask-size: cover;
	display: inline-block;
}

.gift:before {
	content: "";
	height: 15px;
	width: 15px;
	margin-right: 0.2rem;
	background-color: #fb829d;
	-webkit-mask: url('../img/icon/gift.svg');
	-webkit-mask-size: cover;
	display: inline-block;
}

.book:before {
	content: "\F193";
	font-family: bootstrap-icons;
	font-size: 15px;
	color: #fb829d;
}

.work:before {
	content: "\F4B0";
	font-family: bootstrap-icons;
	font-size: 15px;
	color: #fb829d;
}

.photo:before {
	content: "\F42A";
	font-family: bootstrap-icons;
	font-size: 15px;
	color: #fb829d;
}

.log:before {
	content: "\F43C";
	font-family: bootstrap-icons;
	font-size: 15px;
	color: #fb829d;
}

.record:before {
	content: "";
	height: 15px;
	width: 15px;
	margin-right: 0.2rem;
	background-color: #fb829d;
	-webkit-mask: url('../img/icon/calendar.svg');
	-webkit-mask-size: cover;
	display: inline-block;
}

.note:before {
	content: "\F447";
	font-family: bootstrap-icons;
	font-size: 15px;
	color: #fb829d;
}

.hp:before {
	content: "";
	height: 15px;
	width: 15px;
	margin-right: 0.2rem;
	background-color: #fb829d;
	-webkit-mask: url('../img/icon/hp.svg');
	-webkit-mask-size: cover;
	display: inline-block;
}

.watch:before {
	content: "";
	height: 15px;
	width: 15px;
	margin-right: 0.2rem;
	background-color: #fb829d;
	-webkit-mask: url('../img/icon/watch.svg');
	-webkit-mask-size: cover;
	display: inline-block;
}

.live:before,
.hpmi:before {
	content: "";
	height: 15px;
	width: 15px;
	margin-right: 0.2rem;
	background-color: #fb829d;
	-webkit-mask: url('../img/icon/live.svg');
	-webkit-mask-size: cover;
	display: inline-block;
}

.movie:before {
	content: "";
	height: 15px;
	width: 15px;
	margin-right: 0.2rem;
	background-color: #fb829d;
	-webkit-mask: url('../img/icon/movie.svg');
	-webkit-mask-size: cover;
	display: inline-block;
}

.movie_house:before {
	content: "";
	height: 15px;
	width: 15px;
	margin-right: 0.2rem;
	background-color: #fb829d;
	-webkit-mask: url('../img/icon/movie_house.svg');
	-webkit-mask-size: cover;
	display: inline-block;
}

.clock:before {
	content: "";
	height: 15px;
	width: 15px;
	margin-right: 0.2rem;
	background-color: #fb829d;
	-webkit-mask: url('../img/icon/clock.svg');
	-webkit-mask-size: cover;
	display: inline-block;
}

.clown:before {
	content: "";
	height: 15px;
	width: 15px;
	margin-right: 0.2rem;
	background-color: #fb829d;
	-webkit-mask: url('../img/icon/clown.svg');
	-webkit-mask-size: cover;
	display: inline-block;
}

.speaker:before {
	content: "";
	height: 15px;
	width: 15px;
	margin-right: 0.2rem;
	background-color: #fb829d;
	-webkit-mask: url('../img/icon/speaker.svg');
	-webkit-mask-size: cover;
	display: inline-block;
}

.collabo:before {
	content: "";
	height: 15px;
	width: 15px;
	margin-right: 0.2rem;
	background-color: #fb829d;
	-webkit-mask: url('../img/icon/collabo.svg');
	-webkit-mask-size: cover;
	display: inline-block;
}

.music:before {
	content: "\F4A0";
	font-family: bootstrap-icons;
	font-size: 15px;
	color: #fb829d;
}

.baby_bottle:before {
	content: "";
	height: 15px;
	width: 15px;
	margin-right: 0.2rem;
	background-color: #fb829d;
	-webkit-mask: url('../img/icon/baby_bottle.svg');
	-webkit-mask-size: cover;
	display: inline-block;
}

.coffee:before {
	content: "";
	height: 15px;
	width: 15px;
	margin-right: 0.2rem;
	background-color: #fb829d;
	-webkit-mask: url('../img/icon/coffee.svg');
	-webkit-mask-size: cover;
	display: inline-block;
}

.link:before {
	content: "";
	height: 15px;
	width: 15px;
	margin-right: 0.2rem;
	background-color: #fb829d;
	-webkit-mask: url('../img/icon/link.svg');
	-webkit-mask-size: cover;
	display: inline-block;
}

/*  健康用 --------------------------------- */

.training:before {
	content: "";
	height: 15px;
	width: 15px;
	margin-right: 0.2rem;
	background-color: #fb829d;
	-webkit-mask: url('../img/icon/training.svg');
	-webkit-mask-size: cover;
	display: inline-block;
}

.lifting:before {
	content: "";
	height: 15px;
	width: 15px;
	margin-right: 0.2rem;
	background-color: #fb829d;
	-webkit-mask: url('../img/icon/lifting.svg');
	-webkit-mask-size: cover;
	display: inline-block;
}

.roller:before {
	content: "";
	height: 15px;
	width: 15px;
	margin-right: 0.2rem;
	background-color: #fb829d;
	-webkit-mask: url('../img/icon/roller.svg');
	-webkit-mask-size: cover;
	display: inline-block;
}

/*  --------------------------------------------------------
		ページング
	-------------------------------------------------------- */
#paging {
	text-align: center;
	margin: 70px 0 0 0;
}

#paging span {
	line-height: 15px;
	border:solid 3px #fb829d;
	background-color: rgb(255, 228, 234);
	border-radius: 50%;
	font-weight: bold;
	color:#999;
	padding: 10px clamp(10px, 1.5%, 15px);
}

#paging a {
	padding: 10px;
}

/*  --------------------------------------------------------
		メニュー
	-------------------------------------------------------- */
header {
	position: fixed;
	/* background-color: #fcf4ed; */
	float: right;
	display: block;
	width: 240px;
	min-height: 545px;
	height: 80%;
	position: fixed;
	margin-left: 1020px;
	z-index: 10;
	border-radius: 0px 0px 8px 8px;
	/* background: repeating-linear-gradient(-45deg, rgb(244, 228, 228), rgb(244, 228, 228) 3px, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 6px); */
}

#head_inner {
	width: 240px;
	margin-left: auto;
	margin-right: auto;
}

header:after,
#head_inner:after {
	content: "";
	display: block;
	clear: both;
}

#siteLogo a {
	display: block;
	width: 190px;
	text-indent: -9999px;
	background: url(../img/siteLogo.png) no-repeat;
	background-position: left top;
	margin: 50px 35px 40px 26px;
	background-size: contain;
	pointer-events: auto;
	z-index: 100;
}

#menu {
	top: 0;
	z-index: 100;
}

#menu_btn {
	display: none;
}

#main_contents:after {
	content: "";
	display: block;
	clear: both;
}

#main_contents ul {
	width: 100%;
	margin: 0;
}

#main_contents li:hover {
    opacity: 0.5px;
}

/* スマホ表示 -------------------------------------------------------------------*/

@media screen and (max-width: 1250px) {

	header {
		margin-left: 78%;
	}
}

@media screen and (max-width: 1000px) {

	header * {
		padding: 0;
		margin: 0;
	}
						
	header {
		width: 100%;
		height: auto;
		min-height: 70px;
		position: fixed;
		top: 0;
		left: inherit;
		right: inherit;
		transition: .3s;
		box-sizing: border-box;
		float: none;
		margin: 0;
		pointer-events: auto;
		background: repeating-linear-gradient(-45deg, rgb(244, 228, 228), rgb(244, 228, 228) 3px, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 6px);
	}
		
	#head_inner {
		width: auto;
		margin-left: auto;
		margin-right: auto;
	}
									
	#site_logo {
		float: left;
		margin: 20px 10px 0 10px;
	}
		
	#menu_btn {
		float: right;
		display: block;
		width: 50px;
		height: 50px;
		margin: 20px 15px 15px 0;
		background: url(../img/menu_button.png) no-repeat;
		background-size: contain;
		cursor: pointer;
	}
	
	#menu_btn:after {
		content: "";
		display: block;
		clear: both;
	}
	
	#menu {
		float: inherit;
		display: block;
	}
		
	#main_contents {
		display: none;
		border-bottom: 5px solid #fb829d;
		background: #fff;
		position: fixed;
		top: 85px;
		left:0;
		margin: 0;
		float: none;
		text-align: left;
		width: 100%;
	}
	
	#main_contents ul {
		margin: 0 20px;
	}
	
	#main_contents li {
		display: block;
		font-size: 18px;
		padding: 15px;
    	margin: 0;
	}

	#main_contents li:last-child {
		border-bottom: 0px dotted #cdcdcd;
	}

}	


/*  --------------------------------------------------------
		フッター 
	-------------------------------------------------------- */

footer {
	width:100%;
	margin: 50px 0 40px 0 ;
}

#copyRight {
	font-size: 10px;
	text-align: center;
	letter-spacing: 5px;
	font-weight: bold;
}

/*  --------------------------------------------------------
		ページトップへもどる 
	-------------------------------------------------------- */

#pageTop {
  position: fixed;
  bottom: 10px;
  right: 50px;
}

#pageTop a {
	text-indent: -9999px;
	display: block;
	z-index: 999;
	width: 80px;
	height: 80px;
	background: url(../img/pageTop.png) no-repeat;
	background-position: center;
	background-size: contain;
	animation: .7s pageTop ease-in;
}

#pageTop a:hover {
	-webkit-transform: translate(0,-6px);
	-moz-transform: translate(0,-6px);
	-ms-transform: translate(0,-6px);
	-o-transform: translate(0,-6px);
	transform: translate(0,-6px);
 	transition: 0.2s linear;
}


@keyframes pageTop {
	0% {
		opacity: 0;
		transform: scale(0, 0);
	}
	
	50% {
		transform: scale(.8,.5);
	}
	
	60% {
		transform: scale(1.3,1);
		margin-top: 5px;
	}
	
	70% {
		margin-top: 0px;
	}
	
	100% {
		opacity: 1;
		transform: scale(1,1);
	}
}

@keyframes fadeout a {
	0% {
		opacity: 1;
		transform: scale(1,1);
	}
	
	50% {
		margin-top: 0px;
	}
	
	60% {
		transform: scale(1.3,1);
		margin-top: 5px;
	}
	
	70% {
		transform: scale(.8,.5);
	}
	
	100% {
		opacity: 0;
		transform: scale(0, 0);
	}
}


		@media screen and (max-width: 640px) {	
			
			#pageTop {
			  bottom: 10px;
			  right: 20px;
			}
			
			#pageTop a {
				width: 65px;
				height: 65px;
			}
		}


/*---------------------------------------------------------*/