@charset "utf-8";

/* --------------------------------------------- */
/* ▼モバイルファースト (全環境に共通のデザイン) */
/* --------------------------------------------- */
section {
overflow: hidden;
}
body.aruru_page {
font-size: 16px;
}
header.aruru_header {
background: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, #001ca8),
color-stop(1, #2476ff)
);
background: -webkit-linear-gradient(to bottom, #00B5E2, #6DDCFF);
background: -moz-linear-gradient(to bottom, #00B5E2, #6DDCFF);
background: -o-linear-gradient(to bottom, #00B5E2, #6DDCFF);
background: -ms-linear-gradient(to bottom, #00B5E2, #6DDCFF);
background: linear-gradient(to bottom, #00B5E2, #6DDCFF);
padding: 20px 10px;
border-bottom: 2px solid #11CB66;
-webkit-box-shadow: 0 5px 10px #aaa;
-moz-box-shadow: 0 5px 10px #aaa;
box-shadow: 0 5px 10px #aaa;
}
header.aruru_header h1 {
font-size: 18px;
color: #fff;
}
div.catch_image img {
max-width: 100%;
height: auto;
background-size: cover;
}
div.catch_image p.description {
font-size: 16px;
padding: 10px;
}
div.wrap {
width: 100%;
margin: auto;
}
article.aruru_article {
width: 93%;
margin: auto;
overflow: hidden;
}
.aruru_contents_area a {
text-decoration: underline;
}

.aruru_contents_area a:hover {
color: #6cf;
}

.aruru_contents_area h1,
.aruru_contents_area h2 {
margin: 1em 0;
font-size: 18px;
padding: 5px 10px;
	border-left: 10px solid #00B5E2;
	border-bottom: 3px dashed #00B5E2;
overflow: hidden;
clear: both;
}
.aruru_contents_area h3 {
margin: 1em 0;
font-size: 18px;
padding: 5px 0px;
	border-bottom: 3px solid #00B5E2;
overflow: hidden;
clear: both;
}
.aruru_contents_area h4 {
margin: 1em 0;
font-size: 16px;
padding: 5px 0px;
border-bottom: 1px solid #039;
overflow: hidden;
clear: both;
}

footer.aruru_footer {
background: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, #2476ff),
color-stop(1, #001ca8)
);
background: -webkit-linear-gradient(to bottom, #00B5E2, #6DDCFF);
background: -moz-linear-gradient(to bottom, #00B5E2, #6DDCFF);
background: -o-linear-gradient(to bottom, #00B5E2, #6DDCFF);
background: -ms-linear-gradient(to bottom, #00B5E2, #6DDCFF);
background: linear-gradient(to bottom, #00B5E2, #6DDCFF);
text-align: center;
color: #fff;
margin-top: 1em;
padding: 20px;
border-top: 2px solid #11CB66;
}
.aruru_contents_area p {
line-height: 180%;
margin-bottom: 1em;
font-size: 16px;
}
.aruru_contents_area ul,
.aruru_contents_area ol {
margin: 1em 1em 1em 1.5em;
list-style-position: outside;
}
.aruru_contents_area ul li,
.aruru_contents_area ol li {
margin-bottom: 0.5em;
}
.aruru_contents_area dl {
margin: 1em 0;
}
.aruru_contents_area dl dt {
font-weight: bold;
}
.aruru_contents_area dl dd {
padding-left: 3em;
}
.aruru_contents_area table {
width: 100%;
margin: 1em 0;
border: 1px solid #ccc;
}
.aruru_contents_area table th {
padding: 10px;
border: 1px solid #ccc;
}
.aruru_contents_area table td {
padding: 10px;
border: 1px solid #ccc;
}
footer.aruru_footer a {
color: #fff;
}

div.aruru_contents_area img {
max-width: 100%;
height: auto !important;
border: none;
}

p.description_noimg {
width: 100%;
padding: 15px;
}

ul.sub_menu {
text-align: center;
font-size: 14px;
list-style: none;
margin: 0 1em;
}
ul.sub_menu li {
background: #f0f8ff;
border: 1px solid #0220ab;
margin-top: -1px;
}
ul.sub_menu li a {
text-decoration: none;
display: block;
padding: 1em 0;
}

ul.sub_menu li a:hover {
color: #6cf;
}

ol.breadcrumb {
list-style: none;
font-size: 14px;
margin: 1em;
}

ol.breadcrumb li {
display: inline-block;
}

a.arrow:before {
background: url(./images/arrow.gif) no-repeat left center;
}

@media all and (max-width: 767px) {
/* 画像表示 */
p > img {
display: block;
margin: auto !important;
float: none !important;
}
}

/* -------------------------------------------- */
/* ▼タブレット用デザインとして付け足すデザイン */
/* -------------------------------------------- */
@media all and (min-width: 768px) {
}
/* ------------------------------------ */
/* ▼PC用デザインとして付け足すデザイン */
/* ------------------------------------ */
@media all and (min-width: 900px) {
body.aruru_page {
width: 100%;
margin: auto;
}
header.aruru_header {
margin-bottom: 1em;
}
div.wrap {
width: 900px;
margin: auto;
}

main.aruru_main {
border: 1px solid #ccc;
border-radius: 0.5em;
padding: 10px;
margin: 1em 0;
}
header.aruru_header {
margin-bottom: 20px;
}
header.aruru_header h1 {
width: 900px;
margin: auto;
}
div.catch_image {
position: relative;
margin-bottom: 1em;
}
div.catch_image p.description {
font-size: 20px;
position: absolute;
top: 10%;
left: 5%;
text-shadow: 2px 3px 3px #fff;
font-weight: bold;
}
p.description_noimg {
width: 100%;
}
ul.sub_menu li {
display: inline-block;
border: none;
margin-top: 0;
background: none;
}
ul.sub_menu li a {
background: none;
text-decoration: underline;
display: inline;
border: none;
padding: 0;
}
div.aruru_foot_free_area {
}
}




/*
目次のデザイン調整
+─────────────────────────────+
*/

#toc-container {
border: 1px solid #ccc;
padding: 10px;
width: 100%;
max-width: 800px;
background: #fff;
margin: 0 auto 20px auto; /* 目次全体を中央寄せ */
position: relative; /* 閉じるボタン配置調整用 */
}

#toc-container h2 {
text-align: left; /* 見出し（h2）は左寄せ */
margin-bottom: 10px;
color: #4A4A4A; /* 変更 */
}

#toc-list {
text-align: left; /* 目次リストも左寄せ */
padding-left: 0px;
}

#toc-list ul {
padding-left: 0px; /* 階層を見やすく */
}

#toc-list li {
margin-bottom: 5px; /* 各項目の間隔を適度に調整 */
list-style-type: none; /* リストマークを削除 */
}

.toc-toggle {
cursor: pointer;
color: #0073aa;
text-decoration: underline;
display: inline-block;
position: absolute;
right: 15px; /* 右寄せ */
top: 15px; /* 目次タイトルの高さに揃える */
font-size: 14px;
}



/*
文字装飾
+─────────────────────────────+
*/

/* 黄色アンダーライン */
.marker-under {
text-decoration: underline;
text-decoration-color: #ffff00;
text-decoration-thickness: 2px;
background-image: linear-gradient(transparent 80%, rgba(255, 255, 0, 0.6) 80%);
}
/* 赤アンダーライン */
.red-under {
text-decoration: underline;
text-decoration-color: #E69A9A;
text-decoration-thickness: 2px;
background-image: linear-gradient(transparent 80%, rgba(255, 100, 100, 0.6) 80%);
}

/* 青アンダーライン */
.blue-under{
text-decoration: underline;
text-decoration-color: #78A7E6;
text-decoration-thickness: 2px;
background-image: linear-gradient(transparent 80%, rgba(100, 100, 255, 0.6) 80%);
}

/* 黄色マーカー（Excelのセルの背景色風） */
.marker {
background-color: yellow;
padding: 2px 4px; /* 少し余白を追加して読みやすく */
}



/* スマホ表示のときだけ表を横スクロール可 */
@media screen and (max-width: 767px) {
.scroll-table-wrapper {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}

.scroll-table-wrapper table {
width: 100%;
min-width: 760px; /* 必要に応じて幅を調整 */
border-collapse: collapse;
}
}



/* --------------------------------------------- */
/* 全体の文字色を指定
/* --------------------------------------------- */
.aruru_contents_area {
  color: #595959;
}