@charset "UTF-8";

/* ------------------------------
   基本設定
------------------------------ */
html {
	scroll-behavior: smooth;
}

body {
	position: relative;
	padding: var(--margin-base);
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 400;
	font-size: 14px !important;
	line-height: 1.5;
	overflow-x: hidden;
	background-color: #fff;
	color: #333;
}

a {
	color: #1a73e8;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

a#return {
	display: block;
	position: fixed;
	bottom: 3rem;
	right: 3rem;
	font-size: 2.5em;
	line-height: 1;
	color: #1a73e8;
}

/* ------------------------------
   セクション
------------------------------ */
section {
	max-width: 90rem;
	margin: 0 auto var(--margin-base);
}

section:last-of-type {
	margin-bottom: 0;
}

/* ------------------------------
   プロフィール
------------------------------ */
#prof > * {
	margin: 0 auto;
	width: fit-content;
}

#prof h1 {
	font-size: 2em;
	line-height: 1.4em;
	letter-spacing: 0.5rem;
	font-weight: 600;
}

#prof h1:first-letter {
	color: #1a73e8;
}

#prof #icon {
	margin-right: 0.0em;
	width: 2.8em;
	aspect-ratio: 1/1;
	border-radius: 50%;
	vertical-align: middle;
	object-fit: cover;
	border: 1px #999999 solid;}

#prof .text {
	margin: 2em auto 2.5em;
	width: fit-content;
	font-size: 0.9em;
	color: #555;
}

/* ------------------------------
   メニュー
------------------------------ */
#menu {
	display: flex;
	gap: 1rem;
	justify-content: center;
	line-height: 1;
	margin-top: 1rem;
}

#menu a {
	color: #999999;
	font-size: 0.90em;
        font-weight: bold;
	letter-spacing: 0.05em;
	text-align: center;
	padding: 0.3em 0.5em;
}

#menu i {
	display: block;
	margin: 10 auto;
	font-size: 1.8em;
}

/* ------------------------------
   ボックス・見出し
------------------------------ */
.box {
  padding: 1rem;
  background-color: #fff;
  border-radius: 6px;
  border: 1px solid #ddd;   /* ここで枠線 */
  box-shadow: none;          /* 影を消す */
  margin: 1rem auto;         /* 上下 1rem、左右自動で中央寄せ */
  max-width: 600px;          /* 横幅の上限 */
}

.box h2 {
	padding-bottom: 0.2em;
	font-size: 1.2em;
	font-weight: 600;
	border-bottom: 1px solid #1a73e8;
}


.box h3 {
	padding-bottom: 0.2em;
	width: fit-content;
	font-size: 1.1em;
	font-weight: 600;
	border-bottom: 1px solid #1ab0ff;
}



.box p, .box ul, .box dl {
	margin: 1em 0;
}

/* リスト装飾 */
dl, ul {
	margin: 1em 0;
	padding-left: 1.6em;
}

dt, li {
	position: relative;
}

dt::before,
li::before {
	position: absolute;
	left: -1.6em;
	font-family: var(--font-icon);
	content: "\f058";
	font-weight: 400;
	color: #1a73e8;
}

/* ------------------------------
   ギャラリー（画像カード）
------------------------------ */
#illustlog {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 1em;
	margin: 0 auto;
}

#illustlog .illust {
	display: block;
	background-color: #fff;
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0,0,0,0.1);
	transition: 0.3s;
}

#illustlog .illust:hover {
	box-shadow: 0 4px 12px rgba(0,0,0,0.15);
	transform: translateY(-2px);
}

#illustlog .illust > a {
	display: block;
	width: 100%;
	height: 100%;
}

#illustlog .illust > a img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
}

#illustlog .illust figcaption {
	padding: 0.4em 0.5em;
	font-size: 0.8em;
	font-weight: 500;
	color: #444;
	text-align: center;
}

/* ------------------------------
   オフライン書籍リスト
------------------------------ */
.booklist {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
}

.book {
	padding: 0.8em;
	width: calc(50% - 0.5em);
	background-color: #fff;
	border: 1px solid #ddd;
	border-radius: 6px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.book .gaiyou{
	display: flex;
	align-items: flex-start;
	gap: 1.5em;
}

.book .gaiyou img.hyoushi {
	width: 40%;
	height: auto;
	vertical-align: bottom;
}

.book h4 {
	font-weight: 600;
}

.book p.product{
	margin: 0.3em 0;
	font-size: 0.8em;
	letter-spacing: 0.1em;
	font-family: var(--font-alphanumeric);
	font-weight: 600;
	color: var(--color-main);
}

.book p.outline {
	font-size: 0.9em;
	line-height: 1.4;
	color: #555;
}

.order{
	display: flex;
	align-content: space-between;
	gap: 1em;
	margin-top: 1em;
	width: 100%;
}

.order a {
	display: block;
	width: 100%;
	background-color: #1a73e8;
	color: #fff;
	line-height: 2;
	text-align: center;
	font-weight: 600;
	border-radius: 4px;
	text-decoration: none;
}

.order a.soldout {
	pointer-events: none;
	background-color: #ECECEC;
	color: #aaa;
}


/* いいねボタン（通常） */
button.newiine_btn {
  background: transparent !important;
  border: 1px solid #1e6bff !important;
  color: #1e6bff !important;
}

/* クリック済み（通常時） */
button.newiine_btn.newiine_clickedtoday {
  background: transparent !important;
  border: 1px solid #1e6bff !important;
  color: #1e6bff !important;
}

/* クリック済み（hover / focus） */
button.newiine_btn.newiine_clickedtoday:hover,
button.newiine_btn.newiine_clickedtoday:focus {
  border: 1px solid #1e6bff !important;
  color: #1e6bff !important;
}

/* hover時：背景をうすいグレーに */
button.newiine_btn:hover,
button.newiine_btn.newiine_clickedtoday:hover {
  background: #f2f2f2 !important;
}


/* ------------------------------
   更新履歴
------------------------------ */
.update-log {
  font-family:
    "Noto Sans JP",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-size: 13px;
  line-height: 1.0;
  letter-spacing: 0.02em;
}

/* ------------------------------
   折り畳み
------------------------------ */
summary {
	position: relative;
	display: block;
	margin: 2em auto 0;
	padding: 0 2.5em;
	width: fit-content;
	height: 2.2em;
	line-height: 2.2em;
	font-weight: 600;
	text-align: center;
	cursor: pointer;
	color: #1a73e8;
	border: 1px solid #1a73e8;
	border-radius: 2.4em;
	transition: 0.3s;
}

summary:hover {
	background-color: #1a73e8;
	color: #fff;
	opacity: 0.8;
}

summary::-webkit-details-marker {
	display: none;
}

details[open] > * {
	animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
	0% { opacity: 0; }
	100% { opacity: 1; }
}



/* ------------------------------
   レスポンシブ（スマホ用）
------------------------------ */
@media screen and (max-width: 768px) {
	body {
		padding: 2.8rem 1rem 1rem;
		font-size: 13px !important;
	}

        #prof #icon {
                margin-top : 20px ;
                margin-bottom : 0px ;
        }

	#menu {
		flex-wrap: wrap;
		gap: 0rem !important;
	}

	#menu a {
		font-size: 1.3em;        /* 文字を大きく */
                font-weight: bold;
		padding: 0.6em 0.8em;  /* タップしやすく */
	}

	#menu i {
		font-size: 1.5em;      /* アイコンも大きく */
	}

	#illustlog {
		grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
		gap: 0.7em;
	}

	#illustlog .illust figcaption {
		font-size: 0.75em;
		padding: 0.3em 0.4em;
	}


	summary {
		padding: 0 2em;
		height: 2em;
		line-height: 2em;
		font-size: 0.95em;
	}
}