@charset "UTF-8";

/* all */
*, *:before, *:after {
box-sizing: border-box
}

/* smooth scroll */
html {
scroll-behavior: smooth;
}

/* base & font */
body {
margin: 0;
background-color: #f5f5f5;
font-size: 16px;
color: #333333;
line-height: 1.5;
font-family: 'ヒラギノ角ゴ Pro','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}


/* link */
a {
word-break: break-all;
cursor: pointer;
}

a:link {
text-decoration:none; /* 未訪問 */
}
a:visited {
text-decoration:none; /* 訪問後 */
}
a:active {
text-decoration:none; /* クリック中 */
}


/* br */
@media screen and (max-width :840px){
br.pc-only {
display: none;
}
}

@media screen and (min-width: 500px){
br.sp-only {
display: none;
}
}


/* ul ol */
ul, ol {
margin: 0;
padding-left: 20px;
}


/* img */
img {
border: 0px;
vertical-align: bottom;
}

/* Shisetsu */
div.shisetsu {
width: 100%;
margin: 0 auto;
padding: 0;
}

div.shisetsu ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
}

div.shisetsu ul li {
font-size: 16px;
width: 120px;
margin-bottom: 12px;
}

div.shisetsu ul li::before{
font-family: 'icomoon';
content: "\f0da";
color: #3399cc;
margin-right: 10px;
}


/* photo */
img.photo {
width: 280px;
border: 0px;
vertical-align: bottom;
}

@media screen and (max-width :840px){
img.photo {
display: block;
width: 90%;
max-width :400px;
margin: 0 auto;
}
}


/* hr */
hr.blue {
border: none;
border-top: 2px solid #006ab4;
margin: 0;
width: 100%;
}

hr.dot {
border: none;
border-top: 2px dotted #999999;
margin: 24px 0;
width: 100%;
}


/* enclose */
#enclose {
margin: 0 auto;
width: 960px;
background-color: #ffffff;
}

@media screen and (max-width :840px){
#enclose {
width: 100%;
}
}


/* header */
header {
width: 95%;
margin: 0 auto;
padding-top: 10px;
text-align: left;
}


/* article */
article {
width: 100%;
margin: 0 auto;
text-align: left;
}

@media screen and (max-width :840px){
article {
width: 90%;
}
}


/* wrapper */
#wrapper {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
margin: 0 auto;
}


/* aside */
aside {
width: 280px;
margin-left: 72px;
text-align: left;
}

@media screen and (max-width :840px){
aside {
width: 100%;
margin: 0 auto;
}
}


/* main */
main {
width: 500px;
margin-right: 72px;
text-align: left;
}

@media screen and (max-width :840px){
main {
width: 100%;
margin: 0 auto;
margin-top: 30px;
}
}



/* footer */
footer {
width: 95%;
margin: 0 auto;
padding-bottom: 15px;
text-align: center;
}


/* copyright */
div.copyright {
font-size: 14px;
padding-top: 10px;
}


/* h1 */
h1 {
width: 90%;
margin: 0 auto;
font-size: 18px;
font-weight: bold;
color: #666666;/*文字色*/
padding: 10px 10px 10px 18px;
border: 1px solid #cccccc;
border-top: 3px solid #3498db;
background: linear-gradient(to bottom, #fff 0%, #f0f0f0 100%);
box-shadow: 0 -1px 0 rgba(255, 255, 255, 1) inset;
}

@media screen and (max-width :840px){
h1 {
width: 90%;
}
}


/* h2 */
h2 {
width: 90%;
margin: 0 auto;
position: relative;
font-size: 16px;
font-weight: bold;
color: #666666;/*文字色*/
padding: 0px 0px 4px 38px;
border-bottom: 2px solid #dddddd;
}
h2::before,
h2::after {
position: absolute;
content: '';
border-radius: 100%
}
h2::before {
top: 2px;
left: 2px;
width: 20px;
height: 20px;
background: rgba(37, 111, 237, 0.6);
}
h2::after {
top: 12px;
left: 14px;
width: 14px;
height: 14px;
background: rgba(118, 206, 255, 0.6);
}


/* h3 */
h3 {
text-align: center;
font-weight: bold;
font-size: 20px;
color:#364e96;
}


/* Pagetop */
#pagetop {
position: fixed;
width: 100%;
max-width: 960px;
bottom: 20px;
text-align: right;
}

#pagetop a {
background-color: rgba( 126, 206, 244, 0.3 );
padding: 10px;
text-align: center;
text-decoration: none;
border-radius: 10px;
font-size: 24px;
margin-right: 20px;
}

#pagetop a:hover {
background-color: rgba( 126, 206, 244, 0.5 );
text-decoration: none;
}