@charset "UTF-8";
/*
 Theme Name: SANGO Child
 Theme URI: https://saruwakakun.design
 Author: SARUWAKA
 Author URI: https://saruwakakun.com
 Template: sango-theme
*/
/*こちらはSANGOの子テーマ用CSSです。以下にCSSを記入していきましょう。*/
#logo img{
    display: inline-block;
    height: 62px;
    line-height: 62px;
  	margin: 0 auto; /* 左右のマージンを自動に設定して中央寄せ */
    text-align: center;
    width: auto;
  }
#logo a {
    text-align: center;
  }

/*オリジナル*/
.tscroll{
overflow:auto;
}
.tscroll::-webkit-scrollbar{
 height:5px;
 background:#eee;
}
.tscroll::-webkit-scrollbar-track{
 border-radius:5px;
 background:#F1F1F1;
}
.tscroll::-webkit-scrollbar-thumb {
 border-radius:5px;
 background:#BCBCBC;
}

/*--------------------------------------
  ポイント吹き出し
--------------------------------------*/
.points p {
    margin: 0;
    padding: 0 1em;
}
.points {
    position: relative;
    display: inline-block;
    margin: 1.5em 0 .9em 0;
    padding: 5px 20px;
    min-width: 120px;
    max-width: 100%;
    color: #fff;
    background: #81D4FA;
    border-radius: 15px;
    font-size: 14px;
    font-weight:bold;
    text-align:center;
}
.points:before {
    content: "";
    position: absolute;
    top: 100%;
    left: 30%;
    margin-left: -15px;
    border: 10px solid transparent;
    border-top: 10px solid #81D4FA;
}
/*赤系*/
.points.p-red {background: #ef9a9a;}
.points.p-red:before{border-top: 10px solid #ef9a9a;}
/*オレンジ系*/
.points.p-orange {background: #FFCC80;}
.points.p-orange:before{border-top: 10px solid #FFCC80;}
/*緑系*/
.points.p-green {background: #80CBC4;}
.points.p-green:before{border-top: 10px solid #80CBC4;}
/*青系*/
.points.p-blue {background: #7986CB;}
.points.p-blue:before{border-top: 10px solid #7986CB;}
/*カスタマイズ用*/
.points.p-custom {background: #7986CB;/*吹き出しの色*/}
.points.p-custom:before{border-top: 10px solid #7986CB;/*吹き出しの色*/}
/*--------------------------------------
  関連記事
--------------------------------------*/
.kanren {
    position: relative;
    background-color: #fff;
    border: 2px solid #E0E0E0;
    border-radius: 5px;
    margin:30px 5px 20px 7px;
    padding: 25px 20px 15px 20px;
}
.kanren:before {
    position: absolute;
    border-radius: 15px;
    background-color: #9E9E9E;
    color: #fff;
    font-family:"FontAwesome", "Helvetica","Yu Gothic";
    content: '関連する記事';
    font-size: 14px;
    font-weight: bold;
    padding: 5px 20px;
    left: -10px;
    top: -20px;
}
.kanren:after {
    position: absolute;
    border-top: 12px solid #9E9E9E;
    border-right: 12px solid transparent;
    border-left: 12px solid transparent;
    content: '';
    top: 10px;
    left: 15px;
}
.kanren ul {
    list-style-type: none;
    border:none;
    margin:0;
    padding:0;
}
.kanren ul li {
    list-style-type: none !important;
    position: relative;
    padding: .2em 0 .2em 1.5em;
    line-height: 1.5;
}
.kanren ul li:before {
    position: absolute;
    left: 0;
    display: inline-block;
    font-family: FontAwesome,'Quicksand','Avenir','Arial',sans-serif;
    content:'\f05d\ ';
    color: #9E9E9E;
    width: 8px;
    height: 8px;
    margin: 0 16px 20px 0;
}
.fa5 .kanren ul li:before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: '\f058';
}
/*赤系*/
.kanren.p-red { border: 2px solid #ffcdd2; }
.kanren.p-red:before { background-color: #ef9a9a; }
.kanren.p-red:after { border-top: 12px solid #ef9a9a; }
.kanren.p-red ul li:before { color: #ef9a9a; }
/*オレンジ系*/
.kanren.p-orange { border: 2px solid #FFE0B2; }
.kanren.p-orange:before { background-color: #FFCC80; }
.kanren.p-orange:after { border-top: 12px solid #FFCC80; }
.kanren.p-orange ul li:before { color: #FFCC80; }
/*緑系*/
.kanren.p-green { border: 2px solid #B2DFDB; }
.kanren.p-green:before { background-color: #80CBC4; }
.kanren.p-green:after { border-top: 12px solid #80CBC4; }
.kanren.p-green ul li:before { color: #80CBC4; }
/*青系*/
.kanren.p-blue { border: 2px solid #C5CAE9; }
.kanren.p-blue:before { background-color: #7986CB; }
.kanren.p-blue:after { border-top: 12px solid #7986CB; }
.kanren.p-blue ul li:before { color: #7986CB; }
/*カスタマイズ用*/
.kanren.p-custom { border: 2px solid #E1BEE7; /*枠線の色*/ }
.kanren.p-custom:before { background-color: #CE93D8; /*吹き出しの色*/ }
.kanren.p-custom:after { border-top: 12px solid #CE93D8; /*吹き出しの色*/ }
.kanren.p-custom ul li:before { color: #CE93D8; /*吹き出しの色*/ }
/*--------------------------------------
  タイトル自由形　関連記事ボックス
--------------------------------------*/
.p-box {
    position: relative;
    background-color: #fff;
    border: 2px solid #CFD8DC;
    border-radius: 5px;
    margin:30px 5px 20px 7px;
    padding: 25px 20px 15px 20px;
}
.p-box .p-box-title {
    position: absolute;
    left: -10px;
    top: -20px;
    border-radius: 15px;
    background-color: #90A4AE;
    color: #fff;
    font-family:"FontAwesome", "Helvetica","Yu Gothic";
    font-size: 14px;
    font-weight: bold;
    padding: 5px 20px;
}
.p-box .p-box-title:after {
    position: absolute;
    border-top: 12px solid #90A4AE;
    border-right: 12px solid transparent;
    border-left: 12px solid transparent;
    content: '';
    top: 30px;
    left: 25px;
}
.p-box p {
    margin: 0;
    padding: 0;
}
.p-box ul {
    list-style-type: none;
    border:none;
    margin:0;
    padding:0;
}
.p-box ul li {
    list-style-type: none !important;
    position: relative;
    padding: .2em 0 .2em 1.5em;
    line-height: 1.5;
}
.p-box ul li:before {
    display: inline-block;
    position: absolute;
    left: 0;
    font-family: FontAwesome,'Quicksand','Avenir','Arial',sans-serif;
    content:'\f138\ ';
    color: #90A4AE;
    width: 8px;
    height: 8px;
    margin: 0 16px 20px 0;
}
.fa5 .p-box ul li:before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}
/*赤系*/
.p-box.p-red { border: 2px solid #ffcdd2; }
div.p-box.p-red .p-box-title  { background-color: #ef9a9a; }
div.p-box.p-red .p-box-title:after { border-top: 12px solid #ef9a9a; }
.p-box.p-red ul li:before { color: #ef9a9a; }
/*オレンジ系*/
.p-box.p-orange { border: 2px solid #FFE0B2; }
div.p-box.p-orange .p-box-title { background-color: #FFCC80; }
div.p-box.p-orange .p-box-title:after { border-top: 12px solid #FFCC80; }
.p-box.p-orange ul li:before { color: #FFCC80; }
/*緑系*/
.p-box.p-green { border: 2px solid #B2DFDB; }
div.p-box.p-green .p-box-title { background-color: #80CBC4; }
div.p-box.p-green .p-box-title:after { border-top: 12px solid #80CBC4; }
.p-box.p-green ul li:before { color: #80CBC4; }
/*青系*/
.p-box.p-blue { border: 2px solid #C5CAE9; }
div.p-box.p-blue .p-box-title { background-color: #7986CB; }
div.p-box.p-blue .p-box-title:after { border-top: 12px solid #7986CB; }
.p-box.p-blue ul li:before { color: #7986CB; }
/*カスタマイズ用*/
.p-box.p-custom { border: 2px solid #E1BEE7; /*枠線の色*/ }
div.p-box.p-custom .p-box-title { background-color: #CE93D8; /*吹き出しの色*/ }
div.p-box.p-custom .p-box-title:after { border-top: 12px solid #CE93D8; /*吹き出しの色*/ }
.p-box.p-custom ul li:before { color: #CE93D8; /*チェックの色*/ }

/* Easy Table Of Contentsによる目次に番号振りをする */
#ez-toc-container .ez-toc-list {
  margin-left: 0;
}
#ez-toc-container ul.ez-toc-list li {
  list-style: none;
}
#ez-toc-container ul, #ez-toc-container.counter-hierarchy ul, .ez-toc-widget-container.counter-flat ul, .ez-toc-widget-container.counter-hierarchy ul {
  counter-reset: item;
}
#ez-toc-container ul.ez-toc-list li a::before, .ez-toc-widget-container ul.ez-toc-list li a::before {
  content: counters(item, ".") ". ";
  counter-increment: item;
}

/************************************
** 横長テーブル
************************************/
.p-sticky-table{
  white-space: nowrap;
  line-height:1.6;
}
.p-sticky-table table{
  border:none;
  border: 1px solid #dedede;
  border-bottom: none;
  border-collapse: collapse;
  word-break: break-all;
  table-layout: fixed;
  display:block;
  overflow:scroll;
  max-height: 100vh;
}
.p-sticky-table thead th:first-child {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 3;
}
.p-sticky-table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 2;
  text-align:center;
}
.p-sticky-table tbody th:first-child{
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 1;
  border:none;
  white-space: normal;
  min-width: 130px;
}
.p-sticky-table th, .p-sticky-table td {
  min-width: 50px;
  text-align: left;
  font-size: 16px !important;
  position: relative;
  padding: 13px !important;
  color: #333;
  border: none !important;
  z-index: 0;
  vertical-align:middle !important;
  background:#fff;
}
.p-sticky-table th{
  background:#f0f9ff !important;
  letter-spacing: 1px;
  font-weight: 500 !important;
  color: #555 !important;
}
.p-sticky-table tr{
  border-bottom:none !important;
}
.p-sticky-table img{
  margin: 10px auto;
  display: block;
  padding: 0;
  max-width: 80% !important;
}
.p-sticky-table table th::before, .p-sticky-table table td::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border-right: 1px solid #dedede;
  border-bottom: 1px solid #dedede;
  z-index: -1;
}
/* スマホ */
@media screen and (max-width: 560px) {
  .p-sticky-table table {
    max-height: 60vh;
    }
  .p-sticky-table thead th:first-child, .p-sticky-table tbody th:first-child {
        min-width: 25vw;
    }
   .p-sticky-table th, .p-sticky-table td {
        font-size: 12px !important;
        padding: 7px !important;
    }
}
/* 中央寄せ */
.pst-center td {
  text-align: center;
}

/* ボタン色追加 */
#inner-content .rakuten-bc {
  background: #D71D3B;
}
#inner-content .yahoo-bc {
  background: #C41A41;
}

/**
 * 自作のタグクラウド 
 * --------------------------------------------------
 */
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
@-webkit-keyframes slideDown {
  0% {
    opacity: 1;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes slideDown {
  0% {
    opacity: 1;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
.slide-down {
  -webkit-animation-name: slideDown;
  animation-name: slideDown;
}
@-webkit-keyframes slideUp {
  0% {
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}
@keyframes slideUp {
  0% {
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}
.slide-up {
  -webkit-animation-name: slideUp;
  animation-name: slideUp;
}
.content-wrap {
  height: 220px;
  overflow: hidden;
  position: relative;
  margin: 0;
}
.close-btn, .more-btn {
  display: block;
  width: 100%;
  padding: 0;
  position: absolute;
  bottom: 0;
  left: 0;
  text-align: center;
  background: -moz-linear-gradient(
    top,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 1) 60%
  );
  background: -webkit-linear-gradient(
    top,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 1) 60%
  );
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 1) 60%
  );
  filter: progid:DXImageTransform.Microsoft.gradient(
      startColorstr='#00ffffff',
      endColorstr='#ffffff',
      GradientType=0
    );
}
.close-btn {
  background: none;
}
.slide-up {
  height: 220px;
  padding-bottom: 0;
  overflow: hidden;
}
.slide-down {
  height: auto;
  overflow: visible;
  padding-bottom: 50px;
}
#custom_html-7 .more-btn p {
  display: inline-block;
  color: #fff;
  cursor: pointer;
  background: #6bb6ff;
  padding: 5px 20px;
  width: 80%;
  border-radius: 4px;
position: relative;
font-weight: 600;
}
#custom_html-7 .tagcloud .close-btn {
  padding:0;
}
#custom_html-7 .close-btn p {
  background: #aaa;
}
.widget h4 + * {
	padding: 2%;
}
.tagtitle:before {
	font-family: "Font Awesome 5 Free";
	content: "\f02c";
}

.heading-31 {
    display: flex;
    align-items: center;
    padding: .5em .7em;
    background-color: #f7f7f7;
    color: #333333;
}

.heading-31::before {
    display: inline-block;
    width: 5px;
    height: 1.5em;
    margin-right: .5em;
    background-color: #97ddae;
    content: '';
}
img.img-samune {
  width: 100%;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18), 0 1.5px 5px rgba(0,0,0,0.10);
  border-radius: 4px;
  display: block;
  margin: 32px auto; /* 中央寄せ＆余白 */
  background: #fff;
  transition: box-shadow 0.3s cubic-bezier(.19,1,.22,1), transform 0.25s cubic-bezier(.19,1,.22,1);
  position: relative;
  z-index: 1;
}
img.img-samune:hover {
  box-shadow: 0 20px 48px rgba(0,0,0,0.24), 0 4px 12px rgba(0,0,0,0.16);
  transform: translateY(-8px) scale(1.03);
}