@charset "utf-8";
/* Reset
---------------------------------------------------------- */
* {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
html { font-size: 62.5%;}
body {
	width: 100%;
	font-size: 1.2rem;
	line-height: 1;
	font-family: Avenir , "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro", "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic"  , "Meiryo UI" , "メイリオ" , Meiryo , "Mplus 1p" , "Noto Sans Japanese" , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
	color: #696969;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { display: block;}
ul,ol { list-style: none;}
h1,h2,h3,h4,h5,h6 {
    font-size: 100%;
	font-weight: bold;
	text-align: center;
	line-height: 2;
}
img {
	width: 100%;
	height: auto;
}
a {
	margin: 0;
	padding: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
	text-decoration: none;
}
/* Header Area
---------------------------------------------------------- */
.headerArea { position: relative;}
#header {
	width: 100%;
	height: 50px;
	background: rgba(255,255,255,.8);
	display: flex;
	justify-content: flex-start;
	align-items: center;
	position: fixed;
	left: 0;
	top: 0;
    transition: .45s;
	z-index: 2;
}
.header__logo { margin-left: 15px;}
.header__logo a {
	font-size: 1.4rem;
	color: #696969;
}
/* Breadcrumb
---------------------------------------------------------- */
#breadcrumb {
	width: 100%;
	height: 25px;
	display: flex;
	background: #ddd;
	margin-top: 50px;
}
#breadcrumb div {
	height: 25px;
	display: flex;
	align-items: center;
	margin-left: 10px;
}
#breadcrumb div a {
	display: block;
	position: relative;
	color: #999;
	padding-right: 10px;
}
#breadcrumb a::before {
	content: "";
	position: absolute;
	width: 6px;
	height: 6px;
	border-top: solid 1px #999;
	border-right: solid 1px #999;
	transform: rotate(45deg);
	top: 2px;
	right: 0;
}
#breadcrumb div a:hover { text-decoration: underline;}
/* Index
---------------------------------------------------------- */
.pageIndex { background: #f3f3f3;}
.pageIndex__inner {
	width: 90%;
	margin: 0 auto;
	border-bottom: 1px solid #ddd;
	padding-top: 15px;
}
.pageIndex__title {
	text-align: left;
	font-size: 1.4rem;
	padding-left: 20px;
}
.list__ordered--basic { padding-bottom: 25px;}
.list__ordered--basic li { border-top: 1px solid #aaa;}
.list__ordered--basic li:last-child { border-bottom: 1px solid #aaa;}
.list__ordered--basic li a {
	display: block;
	color: #696969;
	font-weight: bold;
	text-align: left;
	line-height: 1.5;
	text-indent: -1rem;
	margin-left: 1rem;
	padding: 15px 0 15px 15px;
}
/* Contents
---------------------------------------------------------- */
#main {
	background: #f3f3f3;
	padding-bottom: 100px;
}
.pageHeader { position: relative;}
.pageHeader::after {
	content: "";
	width: 90%;
	height: 1px;
	background: #ddd;
	position: absolute;
	bottom: 0;
	left: 5%;
}
.pageHeader .textArea { width: 80%;}
.pageHeader__title {
	font-size: 1.6rem;
	line-height: 2;
	padding: 12px 5%;
}
.pageHeader__visual {}
.pageContent {
	width: 90%;
	margin: 0 auto;
}
.pageContent { border-bottom: 1px solid #ddd;}
.pageContent__titile {
	font-size: 1.6rem;
	line-height: 2;
	padding: 10px 0;
}
h3,h4 {
	font-size: 1.4rem;
	line-height: 2;
	padding: 10px 0;
}
.textArea {
	width: 90%;
	margin: 15px auto 0;
}
.textArea p {
	font-size: 1.4rem;
	line-height: 1.7;
	padding-bottom: 2rem;
}
.textArea dl {
	font-size: 1.4rem;
	line-height: 1.7;
	margin-bottom: 15px;
}
.textArea dl dt {
	font-weight: bold;
	margin-bottom: 10px;
}
.textArea dl dd {
	width: 90%;
	margin: 0 auto;
}
.imageArea { margin-bottom: 30px;}
/* Page Link Button
---------------------------------------------------------- */
.pageLink {
	width: 80%;
	margin: 30px auto;
}
.pageLink a {
	width: 100%;
	display: block;
	color: #323232;
	font-size: 1.5rem;
	font-weight: bold;
	text-align: center;
	line-height: 1.6;
	transition: 1s;
	border-radius: 3px;
	padding: 15px 0;
}
.pageLink a:hover { background: #ddd;}
/* Page Top Button
---------------------------------------------------------- */
#pagetop {
    position: fixed;
    bottom: 24px;
    right: 10%;
    transform: translate(50%,0);
    text-align: center;
    z-index: 9999;
}
#pagetop a {
	display: inline-block;
    width: 100%;
    position: relative;
    transition: 0.3s ease-out;
    padding-top: 20px;
    letter-spacing: .1rem;
    color: #aaa;
}
#pagetop a::before {
    content: "";
    display: block;
    width: 1px;
    height: 60px;
    position: relative;
    background-color: #aaa;
    margin: 0 auto 15px;
}
/* Common Style */
.mt20 { margin-top: 20px !important;}
.fwB { font-weight: bold !important;}
/******************** ここからタブレット /********************
---------------------------------------------------------- */
@media screen and (min-width:600px) and ( max-width:959px) {
}
/******************** ここからPC960-1280 /********************
---------------------------------------------------------- */
@media screen and (min-width:960px) and ( max-width:1280px) {
.header__logo {
	padding-left: 5%;
	margin: 0;
}
.header__logo a {
	font-size: 1.6rem;
	color: #696969;
}
/* breadcrumb
---------------------------------------------------------- */
#breadcrumb {
	box-sizing: border-box;
	padding-left: 5%;
}
/* Main Visual
---------------------------------------------------------- */
.pageHeader__visual {
	width: 100%;
	height: 400px;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}
/* Page Index
---------------------------------------------------------- */
.pageIndex {}
.pageIndex__inner {
	width: 1000px;
	margin: 0 auto;
	border-top: 1px solid #ddd;
}
.pageIndex__title {
	font-size: 1.6rem;
	padding-left: 115px;
}
.list__ordered--basic {
	width: 800px;
	margin: 0 auto;
}
.list__ordered--basic li { transition: 1s;}
.list__ordered--basic li a { font-size: 1.4rem;}
.list__ordered--basic li:hover { background: #ddd;}
/* Contents
---------------------------------------------------------- */
.pageHeader::after { background: none;}
.pageHeader__title { font-size: 2.2rem;}
.pageContent { width: 1000px;}
.pageContent__titile {
	font-size: 2rem;
	padding: 20px 0;
}
h3,h4 { font-size: 1.8rem;}
.pageHeader .textArea {
	width: 800px;
	margin: 25px auto 0;
}
.textArea p { font-size: 1.6rem;}
.textArea dl {
	width: 90%;
	margin: 0 auto 20px;
}
.pageLink {
	width: 80%;
	margin: 20px auto 0;
}
.pageLink a { font-size: 1.6rem;}
}
/******************** ここからPC wide /********************
---------------------------------------------------------- */
@media screen and (min-width:1281px) {
.header__logo {
	padding-left: 18%;
	margin: 0;
}
.header__logo a {
	font-size: 1.6rem;
	color: #696969;
}
/* breadcrumb
---------------------------------------------------------- */
#breadcrumb {
	box-sizing: border-box;
	padding-left: 18%;
}
/* Main Visual
---------------------------------------------------------- */
.pageHeader__visual {
	width: 100%;
	height: 515px;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}
/* Page Index
---------------------------------------------------------- */
.pageIndex {}
.pageIndex__inner {
	width: 1000px;
	margin: 0 auto;
	border-top: 1px solid #ddd;
}
.pageIndex__title {
	font-size: 1.6rem;
	padding-left: 115px;
}
.list__ordered--basic {
	width: 800px;
	margin: 0 auto;
}
.list__ordered--basic li { transition: 1s;}
.list__ordered--basic li a { font-size: 1.4rem;}
.list__ordered--basic li:hover { background: #ddd;}
/* Contents
---------------------------------------------------------- */
.pageHeader::after { background: none;}
.pageHeader__title { font-size: 2.2rem;}
.pageContent { width: 1000px;}
.pageContent__titile {
	font-size: 2rem;
	padding: 20px 0;
}
h3,h4 { font-size: 1.8rem;}
.pageHeader .textArea {
	width: 800px;
	margin: 25px auto 0;
}
.textArea p { font-size: 1.6rem;}
.textArea dl {
	width: 90%;
	font-size: 1.6rem;
	margin: 0 auto 20px;
}
.pageLink {
	width: 1000px;
	margin: 20px auto 0;
}
.pageLink a { font-size: 1.6rem;}
}