@charset "UTF-8";
article * { box-sizing: border-box; line-height: 1.5; }
article img { max-width: 100%; height: auto; vertical-align: bottom; }

/****************************/
/*  head-container
/***************************/
.head-container { margin-bottom: 2rem; }
.caption { margin-bottom: 1.5rem; padding-top: 2.2rem; }
.caption .title { position: relative; background: #d6f4ff; color: #2f60ac; font-size: 1.7rem; padding: 0.5rem 1rem; }
.caption .title span { position: absolute; top: -2.2rem; left: 0; display: inline-block; padding: 0.2rem 1rem; background: #2f60ac; color: #fff; margin-right: 1rem;
	font-size: 1.2rem; border-radius: 0.5rem 0.5rem 0 0; }
/****************************/
/*  list-container
/***************************/
.list-container { width: 90%; margin: 0 auto 2rem; padding: 0.5rem 1rem; border: 1px solid #C7C7C7; font-size: 1.1rem; }
.listTitle { font-weight: bold; text-align: center; }
.listInner li { display: flex; align-items: center; gap: 0 10px; position: relative; padding: .3em .3em .3em 1.5em; overflow-wrap: anywhere; }
.listInner li a { text-decoration: underline; color: #0168b7; }
.listInner li::before,
.listInner li::after { position: absolute; content: ''; }
.listInner li::before { left: 0; width: 1.2em; height: 1.2em; border-radius: 50%; background-color: #0168b7; }
.listInner li::after { left: .6em; transform: translateX(-75%) rotate(-45deg); width: .3em; height: .3em; border-bottom: 2px solid #fff; border-right: 2px solid #fff; }
/****************************/
/*  contents-container
/***************************/
.contents-container { margin-bottom: 4rem; }
.contentsTitle { background: #0168b7; font-size: 1.5rem; font-weight: bold; color: #fff; text-align: center; padding: 0.5rem; margin-bottom: 1rem; }
.contentsLead { width: 95%; margin: 0 auto 2rem; font-size: 1.2rem; }
.contentsLead span { font-size: 0.8rem; }

/****************************/
/*  titleBox
/***************************/
.titleBox  { width: 95%; margin: 0 auto 3rem; }
.titleDetail { display: flex; margin-bottom: 2rem; }
.titlePic { width: 12rem; margin-right: 1rem; }
.titleInfo { flex: 1; }
.titleInfo .titleName { font-size: 1.3rem; text-decoration: underline; font-weight: bold; color: #0168b7; margin-bottom: 1rem; }
.titleInfo .author, .titleInfo .status, .titleInfo .publisher { display: flex; margin-bottom: 0.3rem; }
.titleInfo .author .itemName, .titleInfo .status .itemName, .titleInfo .publisher .itemName { width: 6rem; }
.titleInfo .author .itemName::after, .titleInfo .status .itemName::after, .titleInfo .publisher .itemName::after { color: #0168b7; content: ":"; }
.titleInfo .author .itemName span, .titleInfo .status .itemName span, .titleInfo .publisher .itemName span { display: inline-block; width: 5rem; color: #0168b7; }
.titleInfo .author .item, .titleInfo .status .item, .titleInfo .publisher .itemName .item { flex: 1;  }
.titleInfo .author a, .titleInfo .status a, .titleInfo .publisher a { display: inline-block; text-decoration: underline; }
.titleInfo .meter { margin-top: 1rem; }
.titleInfo .meter img { width: 100%; max-width: 300px; }

/***************************/
.imageRight, .imageLeft { display: block; margin-bottom: 2rem; }
.imageRight::after, .imageLeft::after { content: ''; display: block; clear: both; }
.imageRight .text span, .imageLeft .text span { border-bottom: 1px dashed #C7C7C7; font-size: 1.1rem; line-height: 2; }
.imageRight figure { float: right; margin: 0 0 1rem 1rem; border: 1px solid #cbcbcb; }
.imageLeft figure { float: left; margin: 0 1rem 1rem 0; border: 1px solid #cbcbcb;  }

@media (max-width: 680px){
	.imageRight, .imageLeft { display: flex; flex-wrap: wrap; }
	.imageRight .text, .imageLeft .text { order: 1; }
	.imageRight figure, .imageLeft figure { order: 2; margin: 1rem auto 0; }
}