@charset "UTF-8";
/* ちょっとした話、投稿ページ */

body {
	background-color: #f0f0f0;
	}

main {
	}

	article {
		width: 700px;
		margin: 0 auto;
		padding: 100px 0 100px 180px;
		position: relative;
		}

		article h1 {
			font-size: 25px;
			line-height: 1.8;
			letter-spacing: 2px;

			padding: 20px;
			box-sizing: border-box;
			border-radius: 15px;
			writing-mode: vertical-rl;
			text-align: justify;

			position: absolute;
			right: 750px;
			top: 100px;

			background-color: #ffffff;
			}
			
		article .content {
			margin-bottom: 100px;
			}
		
		article .content:not(:has(~ .content)) {
			margin-bottom: 0;
			}

			article .content h2 {
				margin-bottom: 20px;
				text-align: center;
				}

				article .content h2 span {
					display: inline-block;
					font-size: 22px;
					line-height: 1.3;
					}

			article .content .text {
				}

				article .content .text p {
					margin-bottom: 1em;
					font-size: 17px;
					line-height: 1.8;
					}

		article .date {
			margin-top: 40px;
			font-size: 15px;
			line-height: 1.5;
			text-align: right;
			}

@media(max-width: 700px){
		article {
			width: 90%;
			padding: 100px 0 50px 0;
			}

			article h1 {
				font-size: 30px;
				margin-bottom: 30px;
				line-height: 1.3;
				letter-spacing: 0;
				writing-mode: unset;

				position: static;
				}
				
			article .content {
				margin-bottom: 50px;
				}

				article .content h2 {
					margin-bottom: 20px;
					}

					article .content h2 span {
						font-size: 22px;
						font-weight: bold;
						}

					article .content .text p {
						font-size: 16px;
						line-height: 1.7;
						}

			article .date {
				text-align: left;
				}
	}