@charset "UTF-8";

@import url('https://fonts.googleapis.com/css?family=Lato|Lora|Noto+Serif+JP&display=swap&subset=japanese');

/*
===== CONTENTS ================================================================================

	Index:
  - Base Style
  - Layout

===============================================================================================
*/


/* 1: Base Style Setting
----------------------------------------------------------------------------------------------*/

/* Base Setting
==========================================================*/

html { font-size: 62.5%;}
body {
  font-size: 1.6rem; line-height: 1.75; font-weight: 500;
  font-family: "ヒラギノ明朝 Pro W3","Hiragino Mincho Pro","游明朝体", "Yu Mincho", YuMincho, "ＭＳ Ｐ明朝","MS PMincho", Times, serif; letter-spacing: .02rem;
  margin:0; padding: 0; color: #444; -webkit-text-size-adjust: 100%; background: #fff;}
@media all and (min-width: 769px) and (-ms-high-contrast: none) {
  body { line-height: 1.7;}
}
a       { text-decoration: none; color: #555; outline: none; cursor: pointer;}
a:hover { text-decoration: none; color:#969696;}
img { -ms-interpolation-mode: bicubic; max-width:100%; height: auto; vertical-align: middle;}
:focus { outline: 0; }

.fn-gothic { font-family: "Lato", "游ゴシック", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Helvetica, Arial, sans-serif;}
.fn-mincho { font-family: 'Noto Serif JP', "ヒラギノ明朝 Pro W3","Hiragino Mincho Pro","游明朝体", "Yu Mincho", YuMincho, "ＭＳ Ｐ明朝","MS PMincho", Times, serif;}
.fn-Lora { font-family: 'Lora', serif;}

.c_black { color: #444;}
.c_white { color: #fff;}



/* main-layout
==========================================================*/

#wrapper { width: 100%;}
.Container {}
.wrap100 { width: 100%; margin: 0 auto;}
.wrap { width: 92%; max-width: 910px; margin: 0 auto;}

#contents { margin-top: 30px;}
#contents #mainBlock { margin-left: 15px;}
#mainBlock { max-width: 600px; width: 67%; order: -1;}
#sideNav { max-width: 260px; width: 29%;}
@media screen and (max-width: 1000px) {
  #contents #mainBlock { margin-left: 0;}
}



/* header
==========================================================*/

#headerContainer { width: 100%;}

#head { width: 100%; height: 116px;}
#head #logo { line-height: 116px;}
#head #head_right { width: -webkit-calc(100% - 280px); width: -moz-calc(100% - 280px); width: calc(100% - 280px);}
  #head #head_right ul { margin-top: 20px; font-size: 0;}
  #head #head_right ul li { display: inline-block; position: relative; margin-left: 41px;}
  #head #head_right ul li::after { position: absolute; content: ""; background: url(../images/common/arrow.svg) center center no-repeat; background-size: cover; width: 5px; height: 7px; top: 9px; left: 0;}
  #head #head_right ul li:not(:first-child)::before { position: absolute; content: ""; background: url(../images/common/dot_line.svg) center center repeat-y; background-size: cover; width: 1px; height: 16px; top: 5px; left: -22px;}
  #head #head_right ul li a { padding: 0 0 0 12px; font-size: 1.4rem;}
  #head #head_right .head_tel a { font-size: 2.2rem; color: #222; letter-spacing: .05em; line-height: 1.6;}
  #head #head_right .head_tel a img { margin-right: 10px; margin-top: -5px;}
  #head #head_right .head_add { font-size: 1.2rem;}

  @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
    #head #head_right ul li::after { top: 7px;}
  }


#menu { background: url(../images/common/menu_bg.gif) 0 0 repeat-x; border-bottom: 1px solid #DDDDDD; border-top: 1px solid #DDDDDD;}
	#menuInner { max-width: 910px; margin:0 auto; width: 98%;}
  #menuInner ul li { position: relative; width: 16.6%;}
  #menuInner ul li::before { content: "|"; position: absolute; top: 9px; left: 0; color: #ccc;}
  #menuInner ul li:nth-child(6)::after { content: "|"; position: absolute; top: 9px; right: 0; color: #ccc;}
  #menuInner ul li a { color: #555; display: block; text-align: center; line-height: 42px;}

  @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
    #menuInner ul li a { padding-top: 3px;}
  }

/* fotter
==========================================================*/

#footerContainer { margin-top: 100px;}
  #footerContainer #footer { margin-top: 30px; padding: 40px 0; box-sizing: border-box; border-top: solid 1px #ccc;}
  #footerContainer #footer .copyright { color: #9E9E9F; font-size: 1.2rem; letter-spacing: .1em;}

.accesscountbox{ font-size: 0.82em; margin-top: 1em; }
.accesscount{border: 1px solid #9E9E9F; display: inline-block; padding: 2px 1em;}


/* contents
==========================================================*/

.contElemOuter { margin-bottom: 60px;}
.contElemInner {}
.imgBox { float: right; margin: 5px 0 10px 15px;}


/* パンくず */
ul#panNavi { font-size: 0; padding: 20px 0 12px; font-family: "Lato", "游ゴシック", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Helvetica, Arial, sans-serif;}
  ul#panNavi li { display: inline-block; font-size: 1.1rem; }
  ul#panNavi li:not(:last-child) { margin-right: 30px; position: relative;}
  ul#panNavi li:not(:last-child)::after { content: "＞"; font-size: 1rem; position: absolute; top: 0; right: -20px;}
  ul#panNavi li a { text-decoration: underline;}

/* タイトル */
#h1Outer { width: 100%; height: 56px; background: url(../images/common/h1_bg.png) 0 0 no-repeat; background-size: cover;}
  #h1Outer p { font-size: 2.5rem; padding: 0 40px; line-height: 56px; letter-spacing: .1em;}
  #h1Outer h1 { font-size: 2.5rem; padding: 0 40px; line-height: 56px; letter-spacing: .1em;}
  .h2ttl { margin-bottom: 20px; line-height: 1.4; font-size: 2rem; padding: 13px 20px 13px 15px; background: #f2f2f2; border-left: solid 5px #9d77bb;}
  .h3ttl { line-height: 1.4; margin-bottom: 15px; position: relative; margin-left: 25px;}
  .h3ttl h3 { display: inline-block; }
  .h3ttl::before { content: "●"; color: #9d77bb; font-size: 1em; position: absolute; left: -25px; top: 1px;}

  @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
    #h1Outer p { padding-top: 4px;}
    .h2ttl { padding: 16px 20px 10px 15px;}
  }

/* サイドナビ */
#pageLink {}
  #pageLink li { padding: 10px 5px 8px 35px; box-sizing: border-box; border-bottom: dotted 1px #ccc; line-height:1.5; position: relative;}
  #pageLink li:first-child { border-top: dotted 1px #ccc;}
  #pageLink li::before { content: ""; width: 6px; height: 10px; background:url(../images/common/icon_pagelink.svg) 0 0 no-repeat; background-size: contain; position: absolute; top: 15px; left: 15px;}
#side_bnr { margin: 40px 0; }
#side_bnr li:not(:last-child) { margin-bottom: 20px;}



/* blog
==========================================================*/

.blog_sideNav { margin-bottom: 30px;}
.blogPost { margin-bottom: 20px; font-size: 1.5rem;}
.blogSideTitle p { font-weight:bold; letter-spacing: 0.1em; margin-bottom: 5px;}






/*  */