@charset "UTF-8";
/* CSS Document */
body{
	margin: 0;
	padding: 0;
	font-family:YuGothic, "YuGothic bold", "Hiragino Sans", Meiryo, "sans-serif";font-family:YuGothic, "YuGothic bold", "Hiragino Sans", Meiryo, "sans-serif";
	font-size: 13px;
	
	
}



.ba-{
	border-bottom: 5px dashed #ffa500;
	font-size: 16px;
	margin-top: 40px;
}

.yokatta{
	font-size: 16.5px;
	margin-top: 50px;
	
}


.hedda-{
	align-content: center;
	position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  width: 100%;
  padding: 20px 40px;
 
  box-sizing: border-box;
	

}
.clearfix{
	text-align: center;
	height:22px;
}

.snsBtnBox {
	text-align: right;
}
ul.snsBtn {
	width: auto;
	margin: 0 0 10px;
	display: -moz-inline-box;
	display: inline-block;
	*display: inline;
	*zoom: 1;
}
ul.snsBtn li {
	display: inline;
	float: left;
	margin: 0 0 0 5px;
}

ul.snsBtn li.tw {
	width: 100px;
}
ul.snsBtn li.fb {
	width: 104px;
}

#share ul{
	width: 421px;
	margin: 0 0 5px auto;
	height: auto;
}
#share li {
	font-size:11px;
	float:left;
	text-align:center;
	width:80px;
	margin-left:1%;
	margin-bottom:25px;
	border-radius:5px;
	list-style:none;
}
#share li.share-twitter {
	background:#55acee;
	box-shadow:0 2px #2795e9;
}
#share li.share-twitter:hover {
	background:#83c3f3;
}
#share li.share-facebook {
	background:#3b5998;
	box-shadow:0 2px #2d4373;
}
#share li.share-facebook:hover {
	background:#4c70ba;
}
#share li.share-google {
	background:#dd4b39;
	box-shadow:0 2px #c23321;
}
#share li.share-google:hover {
	background:#e47365;
}


#share li.share-line {
	background:#00C300;
	box-shadow:0 2px #009d00;
}
#share li.share-line:hover {
	background:#2bd92b;
}
#share a{
	display:block;
	height:17px;
	padding-top:5px;
	
	color:#ffffff;
	text-decoration:none;
}
#share a:hover{
	text-decoration:none;
	color:#ffffff;
}


.tai{
	font-size:1.2rem;
	text-align: center;
	margin: 90 0 5px 0;
	opacity: 0.85;
	color: #261A1A;
	padding-top: 40px;
	
	
}
.color{
	color:#E02124;
}
.watasi{
	text-align: center;
	padding-bottom: 20px;
	padding-top: 30px;
}
.mokuji{
	padding: 25px;
	padding-right: 30px;
  border: 2px solid ;
	height: 400px;
	border-radius: 5px;
	margin-top: 20px;
	color: #E46231;
	opacity: 0.7;
}

a:mokuji{
	font-size: 13px;
	
}
#toc_container{
	margin-top: 70px 30px;

	
}



.toc_list{
	margin-top: 20px;
}

.burokku{
	background-color: #FDF5D8;
	width: 100%;
	height: 300px;
	border-radius: 10px;
	margin-top: -20px;
	
}
a:link {
 
color:#2C241D;
text-decoration:underline;
 
}
.li{
	margin: 25px;
}

.h5{
	opacity: 0.7;
}


.gazo-{
	width: 100%;
text-align: center;
	
}

#page-top {
	position: fixed;
	right: 10px;
	bottom:30px;
	z-index: 2;
    /*はじめは非表示*/
	opacity: 0;
	transform: translateY(150px);
}

/*　上に上がる動き　*/
#page-top.UpMove{
	animation: UpAnime 0.5s forwards;
}

@keyframes UpAnime{
  from {
    opacity: 0;
	transform: translateY(150px);
  }
  to {
    opacity: 1;
	transform: translateY(0);
  }
}



/*========= レイアウトのためのCSS ===============*/

h1{
	font-size:1.2rem;
	text-align: center;
	opacity: 0.9;
	margin-top: 5px;
	color: #fff;
	text-decoration: none;
}

.gazo-{
	align-content: center;
	width: 100%;
}

h2{
	font-size:1.2rem;
	text-align: center;
	margin: 60 0 30px 0;
	opacity: 0.85;
	color: #261A1A;
	
	
}

.syo-{
	font-size:1.2rem;
	text-align: center;
	margin: 50 0 30px 0;
	opacity: 0.85;
	color: #261A1A;
	padding-top: 40px;
	
	
}

p{
	margin-top:20px;	
	opacity: 0.75;
	
	
}

small{
	color:#fff;
	display: block;
	text-align: center;
}

#header{
	background: #E46231;
	color:#fff;
	font-size: 14px;
	padding: 20px;
	
position: fixed; /* ヘッダーを固定する */
top: 0; /* 上部から配置の基準位置を決める */
left:0; /* 左から配置の基準位置を決める */
	
width: 100%; /* ヘッダーの横幅を指定する */
height: 70px; /* ヘッダーの高さを指定する */


	
}


header {
  
  z-index: 999;
  width: 100%;
  padding: 20px 40px;
  font-size: 11px;
  box-sizing: border-box;
  transition: padding .3s;
}
#header.scroll {
  padding: 10px 40px;
}

section{
	padding:70px 30px;
}

section:nth-child(2n){
	background:#f3f3f6;	
}


#footer{
	background: #E46231;
	position: relative;
	z-index: 2;
	padding:100px 20px;

}
legend {
  border: 0; /* Correct `color` not being inherited in IE 8/9/10/11 */
  color: inherit; /* Correct the color inheritance from `fieldset` elements in IE */
  display: table; /* Correct the text wrapping in Edge and IE */
  max-width: 100%; /* Correct the text wrapping in Edge and IE */
  white-space: normal; /* Correct the text wrapping in Edge and IE */
}

::-webkit-file-upload-button {
  -webkit-appearance: button; /* Correct the inability to style clickable types in iOS and Safari */
  font: inherit; /* Change font properties to `inherit` in Chrome and Safari */
}

[type="search"] {
  -webkit-appearance: textfield; /* Correct the odd appearance in Chrome and Safari */
  outline-offset: -2px; /* Correct the outline style in Safari */
}

/* # =================================================================
   # Specify media element style
   # ================================================================= */

img {
  border-style: none; /* Remove border when inside `a` element in IE 8/9/10 */
}

/* Add the correct vertical alignment in Chrome, Firefox, and Opera */
progress {
  vertical-align: baseline;
}

svg:not(:root) {
  overflow: hidden; /* Internet Explorer 11- */
}

audio,
canvas,
progress,
video {
  display: inline-block; /* Internet Explorer 11+, Windows Phone 8.1+ */
}

/* # =================================================================
   # Accessibility
   # ================================================================= */

/* Hide content from screens but not screenreaders */
@media screen {
  [hidden~="screen"] {
    display: inherit;
  }
  [hidden~="screen"]:not(:active):not(:focus):not(:target) {
    position: absolute !important;
    clip: rect(0 0 0 0) !important;
  }
}

/* Specify the progress cursor of updating elements */
[aria-busy="true"] {
  cursor: progress;
}

/* Specify the pointer cursor of trigger elements */
[aria-controls] {
  cursor: pointer;
}

/* Specify the unstyled cursor of disabled, not-editable, or otherwise inoperable elements */
[aria-disabled] {
  cursor: default;
}

/* # =================================================================
   # Selection
   # ================================================================= */

/* Specify text selection background color and omit drop shadow */

::-moz-selection {
  background-color: #b3d4fc; /* Required when declaring ::selection */
  color: #000;
  text-shadow: none;
}

::selection {
  background-color: #b3d4fc; /* Required when declaring ::selection */
  color: #000;
  text-shadow: none;
}