/*
Theme Name: ashitoshinzo
Theme URI: http://2inc.org ( テーマのURL )
Description: 六本松 足と心臓血管クリニック ( Habakiri の子テーマ使用 )
Author: Hiromitsu Hita
Author URI: http://2inc.org ( 作者のURL )
Version: 1.0.0
License: GNU General Public License
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Template: habakiri
*/

:root {
  --main-color-thin3: #94d5b3;
  --main-color-thin2: #80cda5;
  --main-color-thin: #6cc597;
  --main-color: #58BE89;
  --main-color-dark: #46996E;

  --color-yellow: #FBA848;
  --color-blue: #0E7AC4;
  --color-light-blue: #40AAEF;
  --color-pink: #F27398;
  --color-green: #37e5c9;
}

body {
  font-family: "M PLUS Rounded 1c", "ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO", serif;
  color: #6d6765;
  line-height: 1.5;
  font-size: 21px;
}

/* ここからカスタマイズ部分 */

/* *************** */
/* 全ページ共通部品 */
/* *************** */

img.w100 {
  width: 100%;
}

/* ヘッダー start */
.top-center-area {
  margin: 15px auto;
}
.top-right-area {
  margin: 5px auto;
}
/* 既存のCSS上書き */
.site-branding {
  padding: 0;
}
/* ヘッダー end */

/* ナビゲーション start */
/* 既存のCSS上書き */
.responsive-nav a {
    font-size: 21px !important;
    text-align: center;
    vertical-align: middle;
}
/* ナビゲーション end */

/* フッター start */
.footer-widget-area {
  padding: 30px 0 5px;
  background-color: #394694;
  font-size: 16px;
  filter:alpha(opacity=99);
  -moz-opacity: 0.99;
  opacity: 0.99;
  /* 1.0(100)にすると上位のオブジェクトが重なるため注意 */
}
.copyright {
  background-color: #394694;
  filter:alpha(opacity=99);
  -moz-opacity: 0.99;
  opacity: 0.99;
  color: #fff;
  padding: 15px 0;
  text-align: center;
  /* 1.0(100)にすると上位のオブジェクトが重なるため注意 */
}
/* フッター end */

/* サイドバー start */

.sidebar-widget {
    font-size: 80%;
}

/* サイドバー end */


.font-small {
  font-size: 17px;
}
.font-normal {
  font-size: 21px;
}
.font-large {
  font-size: 24px;
}


/* 見出しの下線 start  */
.line {
  margin: 0 auto 20px;
  text-align: center;
}
.line-r {
  display: inline-block;
  width: 50px;
  height: 3px;
  background: #e60012;
}
.line-b {
  display: inline-block;
  width: 50px;
  height: 3px;
  background: #1d2088;
}
/* 見出しの下線 end  */


/* ボタン start */
.button-w100 {
  width: 100%;
  margin: 0 auto; /* 中央揃い */
}
.button-w75 {
  width: 75%;
  margin: 0 auto;
}
.button-w50 {
  width: 50%;
  margin: 0 auto;
}

.button-fit {
  display: block;
  width: 100%;
  margin: 1px 1px; /* ボタンを並べた場合に余白を開ける */
}
.button {
  position: relative;
  display: inline-block;
  padding: 10px 10px;
  border: 1px solid #E66A1D;
  border-radius: 4px;
  /* box-shadow: 4px 4px 2px 0px rgba(0,0,0,.11); */
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  text-align: center;
  color: white;
  background-color: #E66A1D;
  cursor: pointer;
  -webkit-transition: background-color .35s ease,color .35s ease;
  transition: background-color .35s ease,color .35s ease;
}
.circled {
  border-radius: 50%;
}
.button:hover {
  color: #E66A1D;
  background-color: white;
  text-decoration: none;
  box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
  transition: all .2s ease-in-out;
  transform: scale(1.1);
}
/* ボタン end */

/* テーブル start */
.table-horizon {
  border-collapse: collapse;
}
.table-horizon tr + tr {
  border-top: 1px solid #cccccc;
}
.table-horizon th {
  white-space: nowrap;
}
/* テーブル end */

.staff-introduction {
  position: relative;
  background-image: url("images/staff-back.jpg");
  border-radius: 2px;
  color: #fff;
  font-size: 24px;
  line-height: 24px;
  padding: 17px 14px;
}
.staff-introduction:before,
.staff-introduction:after {
  position: absolute;
  bottom: 8px;
  z-index: -1;
  content: '';
  width: 30%;
  height: 50%;
  box-shadow: 0 10px 15px rgba(0, 0, 0, .2);
}
.staff-introduction:before {
  -webkit-transform: rotate(-3deg);
  transform: rotate(-3deg);
  left: .3em;
}
.staff-introduction:after {
  -webkit-transform: rotate(3deg);
  transform: rotate(3deg);
  right: .3em;
}
.staff-introduction p {
  line-height: 1.5;
}

/* 背景が画像の前面コンテンツ start */
.front-content {
  background: rgba(255, 255, 255, 0.9);
  padding: 5px 10px;
}
.front-content-wide {
  background: rgba(255, 255, 255, 0.9);
  padding: 50px 80px;
}
/* 背景が画像の前面コンテンツ end */

/* 背景をぼかす start */
.background-blur {
  overflow: hidden;
  position: relative;
  z-index: 0;
}
.background-blur:before {
  content: "";
  display: block;
  position: absolute;
  background: inherit;
  filter: blur(5px);
  top: -5px;
  right: -5px;
  bottom: -5px;
  left: -5px;
  z-index: -1;
}
/* 背景をぼかす end */

.margin-x-10 {
  margin: 0px 10px;
}
.margin-x-20 {
  margin: 0px 20px;
}
.margin-y-20 {
  margin: 20px 0px;
}
.margin-t-40{
	margin-top: 40px;
}

/* 背景の回転(斜め) start ※ この手法だと文字や下線がぼやけるので中止*/
/* .slant-minus {
  transform: skew(0,-5deg);
  -webkit-transform: skew(0,-5deg);
  -moz-transform: skew(0,-5deg);
  -o-transform: skew(0,-5deg);
  -ms-transform: skew(0,-5deg);
}
.slant-plus {
  transform: skew(0,5deg);
  -webkit-transform: skew(0,5deg);
  -moz-transform: skew(0,5deg);
  -o-transform: skew(0,5deg);
  -ms-transform: skew(0,5deg);
} */
/* 背景の回転(斜め) end */

/* 影とマウスオーバー時の動作 start */
.shadow {
  max-height: 350px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
.shadow:hover {
  box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
  transition: all .2s ease-in-out;
  transform: scale(1.1);
}
/* 影とマウスオーバー時の動作 emd */

/* 続きを読む start */
/* .post-list span.continue,
.getPostContent span {
  display: inline-block;
  position: relative;
  width: 97px;
  height: 26px;
  line-height: 1.9;
  border: 1px solid #0084ab;
  color: #0084ab;
  font-size: 1.3rem;
  text-align: center;
}
.post-list span.continue:before,
.getPostContent span:before {
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 0;
    height: 0;
    border-width: 0 0 7px 7px;
    border-style: solid;
    border-color: transparent transparent #0084ab transparent;
    content: "";
} */
/* 続きを読む end */

/* *********** */
/* トップページ */
/* *********** */

/* 院長の想い */
.mind {
  background-image: url("images/treat02.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: 30% center;
  margin: 50px 0;
  padding: 50px 0;
}

/* 診療システム */
.system {
  background-image: url("images/introspection02_wide.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center top;
  margin: 50px 0;
  padding: 50px 0;
}
.system-info > ul {
  /* border: double 4px #21b384; */
  padding: 0.5em 1em 0.5em 2.3em;
  position: relative;
}
.system-info > ul li {
  line-height: 1.5;
  padding: 0.75em 0.5em;
  list-style-type: none!important;/*ポチ消す*/
}
.system-info > ul li:before {
  font-family: "FontAwesome";
  content: "\f0fe"; /* "\f0a4":指 f0f1:聴診器 f0fa:救急箱 */
  position: absolute;
  left : 1em; /*左端からのアイコンまで*/
  /* color: #21b384; /*アイコン色*/ */
}

/* 診療時間表 */
.th-medical-care-time {
  background-color: #394694;
  color: white;
}

/* アクセス */
.access {
  background-image: url("images/introspection01_wide.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center top;
}

/* 子見出し2 */
.sub-title-2 {
  padding: 0.4em 0.5em;/*文字の上下 左右の余白*/
  color: #494949;/*文字色*/
  background: #f4f4f4;/*背景色*/
  border-left: solid 5px #E66A1D;/*左線*/
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

/* ************************* */
/* 診療内容(フットケア、循環器) */
/* ************************* */
.medical-content {
  background-image: url("images/introspection01_wide.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: top center;
}

/* 見出し */
.sub-title-medical-content {
  position: relative;
  background: linear-gradient(-45deg,#FFEEB4,rgba(230, 106, 29, 1)) fixed;
  border-radius: 2px;
  color: #fff;
  font-size: 24px;
  line-height: 24px;
  padding: 17px 14px;
}
.sub-title-medical-content:before,
.sub-title-medical-content:after {
  position: absolute;
  bottom: 8px;
  z-index: -1;
  content: '';
  width: 30%;
  height: 50%;
  box-shadow: 0 10px 15px rgba(0, 0, 0, .2);
}
.sub-title-medical-content:before {
  -webkit-transform: rotate(-3deg);
  transform: rotate(-3deg);
  left: .3em;
}
.sub-title-medical-content:after {
  -webkit-transform: rotate(3deg);
  transform: rotate(3deg);
  right: .3em;
}

.sub-title-medical-content-2 {
  position: relative;
  padding: 0.25em 0;
}
.sub-title-medical-content-2:after {
  content: "";
  display: block;
  height: 4px;
  background: -moz-linear-gradient(to right, rgb(230, 90, 90), transparent);
  background: -webkit-linear-gradient(to right, rgb(230, 90, 90), transparent);
  background: linear-gradient(to right, rgb(230, 90, 90), transparent);
}

/* ************** */
/* ブログ・お知らせ */
/* ************** */
/* <一覧画面>---------------------- */
h1.entry__title,
.post-title a {
  font-size: 26px;
  text-decoration: none;
}
.post-date {
  font-size: 12px;
}
.article-content {
  font-size: 21px;
}
.post-list {
  border-bottom: 1px solid #cccccc;
  padding: 15px;
  margin: 10px 0px;
}
.blog-thumbnail-margin {
  margin-top: 23px;
}
/* <サイドバー>---------------------- */
.sidebar {
  margin-top: 20px;
}
.sidebar a {
  font-size: 16px;
  position: relative;
  display: inline-block;
  text-decoration: none;
}
.sidebar li + li {
  border-top:1px solid #cccccc;
}
/* <ページネーション>---------------------- */
.blog-pagenation {
  margin-top: 20px;
  margin-bottom: 20px;
  font-size: 18px;
}
.page-numbers{
  padding: 5px;
  font-size: 1.5em;
}
.pagination-wrapper{
  font-size: 14px;
}
span.page-numbers {
  border: solid 1px #6699CC;
  background-color: #6699CC;
  color:white;
}

/* ******************* */
/* トップページのブログ一覧用 */
/* ******************* */
.getPostDispArea .getPost {
  border: 4px solid #ececec;
  padding: 15px;
  margin: 10px 0px;
}
.getPostDispArea .getPost:after {
  content: '';
  display: table;
  clear: both;
}
.getPostImgArea {
  width: 20%;
  float: left;
}
.getPostStringArea {
  width: 80%;
  padding-left: 10px;
  float: left;
}
h4.getPostTitle {
  border-bottom-color: #FBA848;
  font-size: 1.2em;
}
.getPostContent,
.getPostTime {
  color: #6d6765;
  /* font-size: 0.8em; */
}
h4.getPostTitle a,
.getPostContent a {
  text-decoration: none;
}

/* ----------------------------------- */
/* 以下、NEWリボンのための設定 */
.getPost{
    display: block;
    position: relative;
}
.ribbon_area {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 89px;
    height: 91px;
    overflow: hidden;
  }
.ribbon {
    display: inline-block;
    position: absolute;
    padding: 7px 0;
    left: -23px;
    top: 22px;
    width: 160px;
    text-align: center;
    font-size: 18px;
    line-height: 16px;
    background: #ffa520;
    color: #fff;
    letter-spacing: 0.05em;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.ribbon:before,.ribbon:after{
    position: absolute;
    content: "";
    border-top: 4px solid #b2751b;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    bottom: -4px;
}
.ribbon:before{
    left: 14px;
}
.ribbon:after{
  	right: 18px;
}

/* ******************** */
/* スマホ・タブレット対応 */
/* ******************** */
@media (max-width: 768px) {
  .telTxtTitle,
  .telTxt,
  .telTxt > a,
  .post-title > a,
  h1.entry-title,
  .timeTxt,
  h1,
  h2 {
    font-size: 18px;
  }

  h3,
  h4,
  a,
  p,
  li,
  .font-large,
  .font-normal {
    font-size: 14px;
  }

  th,
  td,
  figcaption,
  .font-small {
    font-size: 12px;
  }

  .front-content-wide {
    padding: 10px 10px;
  }

  .img-thumbnail {
    margin-bottom: 5px;
  }
}