/*
====INDEX====

- 共通
- ナビバー
- ダイナミックヘッダー
- 特徴部分
- 記事一覧
- 記事詳細
- 記事装飾（見出しなど）
- サイドバー
- フッター
- ウィジェット
- ショートコード
- アニメーション
- その他
- レスポンシブ

項目名で検索かけると修正が便利

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

/****************           共通          *******************/

html{
  -webkit-scroll-behavior: smooth; /* IE safari EDGE未対応 */
  scroll-behavior: smooth; /* IE safari EDGE 未対応 */
  font-size:16px;
}

body{
  font-family: 'メイリオ','Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic', Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;
  color:#333;
  -webkit-animation: fadeIn 500ms ease-in;
  animation: fadeIn 500ms ease-in;
}

h1{
  font-size: 2em;
}

.siteTitle,
h1.siteTitle,
p.siteTitle,
nav a.siteTitle{
  font-size: 1.6em;
  padding: 0 10px;
}

.siteTitle{
  height: 100%;
}

.siteTitle img.custom-logo{
  width: auto;
  max-height: 100%;
  max-width: 200px;
  padding: 10px;
  vertical-align: middle;
}

.tohomelink img.custom-logo{
  width: auto;
  max-width: 100px;
}

main#main,
aside#aside{
  padding: 0;
}

.contentArea{
  max-width: 1200px;
  margin: 20px auto;
}

.indexPage,
.showPage{
  padding: 10px;
}

.main__container {
  display: flex;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  justify-content: center;
}

.aside{
  min-width: 320px;
}

.headerArea nav{
  -webkit-animation: fadeDown 1000ms ease-in;
  animation: fadeDown 1000ms ease-in;
}

/*トップページではナビメニューにh1タグを使用するため
materializeのh1タグへのスタイルをリセット*/
nav h1 {
  font-size: unset;
  line-height: unset;
  font-weight: unset;
  margin: unset;
}

nav .sidenav-trigger svg{
  font-size: 1em;
}

/*追加コンテンツ用*/
.navbar-fixed {
  min-height: 56px;
  height: auto;
}

ol{
  counter-reset: number;
  list-style:none;
  margin:0;
  padding:0;
}

ol li:before{
  counter-increment: number;
  content: counter(number);
}

select{
  display: block;
  padding: .5em 1em;
  color: #545454;
}

button{
  border:none;
}

input[type="text"],
input[type="tel"],
input[type="email"],
input[type="search"],
input[type="url"],
input[type="password"],
textarea{
  padding: .5em;
}

textarea{
  background: #f9f9f9;
  height: auto;
}

input[type="submit"]{
  border: none;
  border-radius: 2px;
  display: inline-block;
  height: 36px;
  line-height: 36px;
  padding: 0 16px;
  text-transform: uppercase;
  vertical-align: middle;
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
  color: #fff;
  background-color: transparent;
  text-align: center;
  letter-spacing: .5px;
  -webkit-transition: background-color .2s ease-out;
  transition: background-color .2s ease-out;
  cursor: pointer;
  -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
}

input:not([type]):focus:not([readonly]),
input[type=text]:not(.browser-default):focus:not([readonly]),
input[type=password]:not(.browser-default):focus:not([readonly]),
input[type=email]:not(.browser-default):focus:not([readonly]),
input[type=url]:not(.browser-default):focus:not([readonly]),
input[type=time]:not(.browser-default):focus:not([readonly]),
input[type=date]:not(.browser-default):focus:not([readonly]),
input[type=datetime]:not(.browser-default):focus:not([readonly]),
input[type=datetime-local]:not(.browser-default):focus:not([readonly]),
input[type=tel]:not(.browser-default):focus:not([readonly]),
input[type=number]:not(.browser-default):focus:not([readonly]),
input[type=search]:not(.browser-default):focus:not([readonly]),
textarea.materialize-textarea:focus:not([readonly]){
  border-color: #333;
  -webkit-box-shadow: none;
  box-shadow: none;
}

td{
  border: 2px solid #efefef;
  padding: .5em;
}

strong{
  font-weight: 700;
}

.fadeinimg{
  opacity: 0;
  -webkit-transition: all .2s ease-in;
  transition: all .2s ease-in;
}

img.fadeinimg.lazyloaded{
  opacity: 1;
}

.gototop {
  position: fixed;
  bottom: 23px;
  right: 23px;
}

label{
  color: #696969;
}

/****************         ナビバー        *******************/

/*固定に伴うアニメ*/
body.delighter .headerArea nav,
body.delighter .headerArea .navbar-fixed a.siteTitle,
body.delighter .headerArea .navbar-fixed ul#topnav,
body.delighter .headerArea .navbar-fixed nav ul a,
body.delighter .headerArea .navbar-fixed a.sidenav-trigger,
body.delighter .headerArea .navbar-fixed a.sidenav-trigger svg{
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
}

body.delighter.started .headerArea .navbar-fixed nav{
  height: 40px;
}

body.delighter.started .headerArea .navbar-fixed a.siteTitle,
body.delighter.started .headerArea .navbar-fixed ul#topnav,
body.delighter.started .headerArea .navbar-fixed nav ul a,
body.delighter.started .headerArea .navbar-fixed a.sidenav-trigger,
body.delighter.started .headerArea .navbar-fixed a.sidenav-trigger svg{
  height: 40px;
  line-height: 40px;
  font-size: .9em;
}

.headerArea a.sidenav-trigger svg{
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
}

.headerArea a.sidenav-trigger svg:hover{
  font-size: 1.25em;
  transform: scale(1.2);
}

#topnav li a{
  position: relative;
}

/* トップメニュー項目下の英文字 */
#topnav li a::after{
  position: absolute;
  top: 20px;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
  font-size: .75em;
  opacity: .8;
}

nav ul li.active{
  background-color: transparent;
  font-weight: 600;
}

/*サイドメニュー*/

.sidenav li{
  display: block;
}

.sidenav>li,
.sidenav_widget_list>div{
  margin-bottom: 20px;
}

.sidenav h3.sidenav_ttl,
.sidenav h4.sidenav_widget_title{
  font-size: 1.25em;
  font-weight: bold;
  margin: 0;
  padding: .5em 0;
  text-align: center;
}

li.sidenav-ttl{
  display: block;
  text-align: center;
  font-size: 1.2em;
  padding: .5em;
  font-weight: bold;
}

.sidenav .sidenav_widget_list ul{
  margin: 0;
}

.sidenav .sidenav_widget_list li>a:hover {
  background-color: unset;
}

.sidenav .sidenav_widget_list .widget ul li{
  padding-left: 0;
}

.sidenav .widget_categories form::before {
  height: auto;
}

.side_nav_dark_switch .switch{
  text-align: center;
}

/****************    ダイナミックヘッダー   *******************/

.dyheader{
  position: relative;
  display: block;
  width: 100%;
  max-width: 1200px;
  margin: auto;
  height: 50vh;
  min-height: 400px;
  padding: 20px;
  overflow: hidden;
  z-index:-1;
}

.dyheader_container{
  width: 100%;
  height: 100%;
  display:flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
	align-items: center;
  flex-wrap: wrap;
}

.dyheader_textArea,
.dyheader_imgArea{
  text-align: center;
  min-width: 300px;
  width: 50%;
  -webkit-box-flex:1;
  flex-grow:1;
}

.dyheader_textArea p{
  font-size: 200%;
  margin-bottom: 1em;
  z-index: 1;
  position: relative;
}

.dyheader_imgArea img{
  max-width: 100%;
  z-index: 1;
  position: relative;
}

.dyheaderBkImgFil1::after,
.dyheaderBkImgFil2::after,
.dyheaderBkImgFil3::after,
.dyheaderBkImgFil4::after,
.dyheaderBkImgFil5::after{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.dyheaderBkImgFil1::after{
  background: rgba(0, 0, 0, 0.5);
}

.dyheaderBkImgFil2::after{
  background: rgba(255, 255, 255, 0.5);
}

/*dyheaderBkImgFil3~5はhead内にて出力（画像使用にphpコード必要なため）*/

.dyheaderBkImgFil6::after {
  content: "";
  position: absolute;
  top: -7px;
  right: -7px;
  bottom: -7px;
  left: -7px;
  background: inherit;
  filter: blur(7px);
}

/*テキストアニメーション*/

.dyHeaderTextMotion1{
  -webkit-animation: dyHeaderTextMotion1 2000ms ease-in 0s;
  animation: dyHeaderTextMotion1 2000ms ease-in 0s;
}

.dyHeaderTextMotion2{
  position: relative;
  overflow: hidden;
}

.dyHeaderTextMotion2::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #ffffff;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-animation: dyHeaderTextMotion2 1000ms cubic-bezier(0.77, 0, 0.175, 1) 1500ms;
  animation: dyHeaderTextMotion2 1000ms cubic-bezier(0.77, 0, 0.175, 1) 1500ms;
}

.dyHeaderTextMotion3{
  -webkit-animation: dyHeaderTextMotion3 2000ms ease-in 0s;
  animation: dyHeaderTextMotion3 2000ms ease-in 0s;
}

.dyHeaderTextMotion4{
  -webkit-animation: dyHeaderTextMotion4 2000ms ease-in 0s;
  animation: dyHeaderTextMotion4 2000ms ease-in 0s;
}



/****************         特徴部分        *******************/


.features section{
  padding: 30px 0;
}

.features h2,
.f_item p{
  margin-top: 0;
  margin-bottom: 1em;
  text-align: center;
  font-weight: bold;
}

.features h2{
  font-size: 2em;
  padding-top: 20px;
}

.feature_qanda h2::before {
  content: "FAQ";
  display: block;
  line-height: 1;
  font-size: .5em;
  margin-bottom: 1em;
}

.f_ttl,
.f_items{
  padding: 20px 0;
}

.f_ttl p,
.f_item span{
  color: #708090;
}

.f_items{
  display:flex;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  justify-content: center;
}

.f_item{
  width: calc(100% / 3);
  padding: 20px;
  max-width: 400px;
}

.f_item svg{
  font-size: 2.5em;
  display: block;
  margin: 0 auto .5em auto;
}

.f_item p{
  font-size: 1.75em;
}

/* delighterは親クラスやコンテナ、ラップに使用しちゃダメ（下記コード的に） */

.d_anime1 .delighter,
.d_anime2 .delighter,
.d_anime3 .delighter,
.d_anime4 .delighter,
.d_anime5 .delighter,
.d_anime6 .delighter,
.d_anime7 .delighter,
.d_anime8 .delighter{
  opacity: 0;
  -webkit-transition: 1s ease-in-out;
  transition : 1s ease-in-out;
}

.d_anime1 .delighter{
  -webkit-transform: translate3d(0, 30px, 0);
  transform : translate3d(0, 30px, 0);
}

.d_anime2 .delighter{
  -webkit-transform: translate3d(0, 200px, 0);
  transform : translate3d(0, 200px, 0);
}

.d_anime3 .delighter{
  -webkit-transform: translate3d(0, -30px, 0);
  transform : translate3d(0, -30px, 0);
}

.d_anime4 .delighter{
  -webkit-transform: translate3d(0, -200px, 0);
  transform : translate3d(0, -200px, 0);
}

.d_anime5 .delighter{
  -webkit-transform: translate3d(-30px, 0, 0);
  transform : translate3d(-30px, 0, 0);
}

.d_anime6 .delighter{
  -webkit-transform: translate3d(-200px, 0, 0);
  transform : translate3d(-200px, 0, 0);
}

.d_anime7 .delighter{
  -webkit-transform: translate3d(30px, 0, 0);
  transform : translate3d(30px, 0, 0);
}

.d_anime8 .delighter{
  -webkit-transform: translate3d(200px, 0, 0);
  transform : translate3d(200px, 0, 0);
}

.headerArea .delighter.started{
  opacity : 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform : translate3d(0, 0, 0);
}

.delighter:nth-of-type(2){
  -webkit-transition-delay: 200ms;
  transition-delay: 200ms;
}

.delighter:nth-of-type(3){
  -webkit-transition-delay: 400ms;
  transition-delay: 400ms;
}

.delighter:nth-of-type(4){
  -webkit-transition-delay: 600ms;
  transition-delay: 600ms;
}

.delighter:nth-of-type(5){
  -webkit-transition-delay: 800ms;
  transition-delay: 800ms;
}

.delighter:nth-of-type(6){
  -webkit-transition-delay: 1000ms;
  transition-delay: 1000ms;
}

.delighter:nth-of-type(7){
  -webkit-transition-delay: 1200ms;
  transition-delay: 1200ms;
}

.delighter:nth-of-type(8){
  -webkit-transition-delay: 1400ms;
  transition-delay: 1400ms;
}

.delighter:nth-of-type(9){
  -webkit-transition-delay: 1600ms;
  transition-delay: 1600ms;
}

.delighter:nth-of-type(10){
  -webkit-transition-delay: 1800ms;
  transition-delay: 1800ms;
}

.delighter:nth-of-type(11){
  -webkit-transition-delay: 2000ms;
  transition-delay: 2000ms;
}

.delighter:nth-of-type(12){
  -webkit-transition-delay: 2200ms;
  transition-delay: 2200ms;
}

.delighter:nth-of-type(13){
  -webkit-transition-delay: 2400ms;
  transition-delay: 2400ms;
}

.delighter:nth-of-type(14){
  -webkit-transition-delay: 2600ms;
  transition-delay: 2600ms;
}

.delighter:nth-of-type(15){
  -webkit-transition-delay: 2800ms;
  transition-delay: 2800ms;
}

#feature4 .collapsible{
  box-shadow: none;
  border: none;
}

#feature4 .collapsible-header{
  position: relative;
  background: transparent;
  line-height: 1;
}

#feature4 .collapsible-header svg.fa-question-circle {
  position: absolute;
  left: -5px;
  top: 50%;
  transform: translateY(-50%);
}

#feature4 .collapsible-header svg.fa-angle-down{
  position: absolute;
  right: 0;
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
}

#feature4 .active .collapsible-header svg.fa-angle-down{
  -webkit-transform: rotateX(180deg);
	transform: rotateX(180deg);
}

#feature4 .collapsible-body{
  padding: 1rem;
}

#feature5 .featureContainer{
  display: block;
  text-align: center;
}

#feature5 h2{
  border-bottom: 1px solid #ccc;
  margin-bottom: .5em;
}

#feature5 .container > div{
  width: 49%;
  padding: 20px 0;
  display: inline-block;
  vertical-align: top;
  margin: auto;
}

#feature5 .feature_map iframe{
  width: 100%;
}

/****************         ニュース        *******************/

.news{
  display: block;
  text-align: center;
  padding: .5em;
  transition: all .2s ease-in-out;
}

.news:hover{
  opacity: .9;
}

.news span{
  color: #fff;
  font-size: .85em;
}

/****************         記事一覧        *******************/

/* indexでの共通記事スタイル */
.articleList_wrap article{
  position: relative;
  width: calc(50% - 20px);
  max-width: 520px;
  margin: 0 auto 20px;
}

.articleList_wrap article a{
  color: inherit;
  text-decoration: none;
}

.articleList_wrap article:not(.articleList3):not(.articleList6) .thumbnail,
.articleList_wrap article:not(.articleList5):not(.articleList6) .content{
  position: relative;
  background: #fff;
}

.articleList_wrap article.articleList1 .thumbnail,
.articleList_wrap article.articleList2 .thumbnail,
.articleList_wrap article.articleList5 .thumbnail{
  height: 0;
  padding-bottom: 60%;
  background-color: #fff;
}

.articleList_wrap article:not(.articleList3) .thumbnail{
  overflow: hidden;
}

.articleList_wrap article .thumbnail img{
  width: 100%;
  height: auto;
  min-height: 250px;
  max-height: 300px;
  object-fit: cover;
}

/*リストの上2記事は上に余白とる（サイドバーの高さと合わせるため）*/
.articleList_wrap article:nth-of-type(1),
.articleList_wrap article:not(.articleList5):nth-of-type(2){
  margin-top: 20px;
}

/*2カラムで最後が1記事になったときに中央寄せなるの防ぐ*/
.articleList_wrap article:not(.articleList5):nth-child(2n+1):last-child{
  margin-left: 10px;
}

/*タイプごとの異なるスタイル*/
.articleList_wrap .articleList1{
  background: #fff;
  border-radius: 4px;
  -webkit-box-shadow: 0 3px 4px 0 rgba(35,35,35,.1), 0 0 1px 0 rgba(10,31,68,.08);
  box-shadow: 0 3px 4px 0 rgba(35,35,35,.1), 0 0 1px 0 rgba(10,31,68,.08);
  -webkit-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}

.articleList_wrap .articleList1:hover,
.articleList_wrap .articleList3:hover{
  -webkit-transform: translateY(-2px);
  transform: translateY(-2px);
  -webkit-box-shadow: 0 2px 2px rgba(45,45,45,.05),0 4px 4px rgba(49,49,49,.05), 0 8px 8px rgba(42,42,42,.05), 0 16px 16px rgba(32,32,32,.05) , 0 32px 32px rgba(49,49,49,.05), 0 64px 64px rgba(35,35,35,.05);
  box-shadow: 0 2px 2px rgba(45,45,45,.05), 0 4px 4px rgba(49,49,49,.05), 0 8px 8px rgba(42,42,42,.05), 0 16px 16px rgba(32,32,32,.05), 0 32px 32px rgba(49,49,49,.05), 0 64px 64px rgba(35,35,35,.05);
}

.articleList_wrap .articleList1 .thumbnail{
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.articleList_wrap .articleList1 .thumbnail time{
  position: absolute;
  font-size: 12px;
  top: 15px;
  right: 15px;
  width: 50px;
  height: 50px;
  padding: 5px 0;
  border: 2px solid;
  border-radius: 100%;
  text-align: center;
  text-transform: uppercase;
}

.articleList_wrap .articleList1 .thumbnail time .day{
  line-height: 1.1;
  font-size: 1.5em;
  display: block;
}

.articleList_wrap .articleList1 .thumbnail time .day,
.articleList_wrap .articleList1 .thumbnail time .month{
  font-family: 'Fredoka One', cursive;
}

.articleList_wrap .articleList1 .thumbnail img{
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.articleList_wrap .articleList1 .content{
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

.articleList_wrap .articleList2{
  background:#fff;
}

.articleList_wrap .articleList2 .thumbnail time {
  z-index: 1;
  position: absolute;
  top: 10px;
  right: 10px;
  width: 70px;
  padding: 5px 0;
  background: #fff;
  text-align: center;
}

.articleList_wrap .articleList1 .thumbnail .category,
.articleList_wrap .articleList2 .thumbnail .category{
  position: absolute;
  font-size: .75em;
  line-height: 30px;
  bottom: 15px;
  left: 10px;
  padding: 0 17px;
  background: #fff;
  border: 1px solid #efefef;
  border-radius: 30px;
}

.articleList_wrap .articleList1 .content .title,
.articleList_wrap .articleList2 .content .title{
  font-size: 1.2em;
  padding: 1em 17px;
}

.articleList_wrap .articleList2{
  border-bottom: 3px solid #ececec;
  -webkit-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

.articleList_wrap .articleList2 .thumbnail img:hover {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.articleList_wrap .articleList3{
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

.articleList_wrap .articleList3 a{
  display: flex;
  padding: 10px;
  height: 90px;
  background: #fff;
}

.articleList_wrap .articleList3 .thumbnail img{
  width: 100px;
  height: 70px;
  min-height: unset;
}

.articleList_wrap .articleList3 time{
  position: absolute;
  font-size: .5em;
  line-height: 1;
  color: #778899;
  bottom: 10px;
  right: 10px;
  z-index: 1; /*長いタイトルの時に埋もれるため*/
}

.articleList_wrap .articleList3 .category{
  position: absolute;
  font-size: .75em;
  z-index: 1;
  top: -16px;
  left: -6px;
  color: #fff;
  display: inline-block;
  height: 25px;
  line-height: 25px;
  padding: 0 20px;
  -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14);
  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14);
}

.articleList_wrap .articleList3 .category::before{
  position: absolute;
  top: 25px;
  left: 0;
  content: "";
  border: 3px solid transparent;
  -webkit-filter: brightness(0.7);
  filter: brightness(0.7);
}

.articleList_wrap .articleList3 .content{
  margin-left: 10px;
}

/*文字数多い記事だとtime部分と重複するためやや文字小さく
560px以下ではワンカラムになって重複可能性ないから戻してもいいかも
ただ、ユーザーに文字を大きくされたら詰むので修正の必要あり*/
.articleList_wrap .articleList3 .content .title{
  font-size: .85em;
}

/*リスト4は特に記述の必要なし*/

/*リスト5は常にワンカラム*/
.articleList_wrap .articleList5{
  width: 100%;
  margin: 0 auto 40px;
}

.articleList_wrap .articleList5,
.articleList_wrap .articleList6{
  background: transparent;
}

.articleList_wrap .articleList5 .content .title{
  font-size: 1.2em;
  padding-bottom: 20px;
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}


.articleList_wrap .articleList5 .content_info{
  position: absolute;
  bottom: 0;
}

.articleList_wrap .articleList5 .content_info,
.articleList_wrap .articleList6 .content_info{
  font-size: .5em;
  color: slategray;
}

.articleList_wrap .articleList6 .thumbnail{
  text-align: center;
  margin-bottom: 10px;
}

.articleList_wrap .articleList6 .content .title,
.articleList_wrap .articleList6 .content .content_info{
  margin: auto;
}

.articleList_wrap .articleList6 .thumbnail img,
.articleList_wrap .articleList6 .content .title,
.articleList_wrap .articleList6 .content .content_info{
  width: 75%;
}

/****************         記事詳細        *******************/

main,
.main_container,
article{
  width: 100%;
}

.articleShow_wrap article{
  max-width: 960px;
  margin: 20px auto 0;
  border-radius: 15px;
  background: #fff;
}

.articleShow_wrap article.notFound{
  margin-top: 0;
}

.articleShow_wrap .article_container{
  padding-top: 20px;
}

.articleShow_wrap .article_thumbnail{
  text-align: center;
}

.articleShow_wrap .article_thumbnail img {
  width: 100%;
  max-width: 900px;
  height: auto;
}

article h1{
  font-size: 1.5em;
  font-weight: bold;
  margin: 0;
}

article h2{
  font-size: 1.5em;
}

article h3{
  font-size: 1.25em;
}

article h4{
  font-size: 1.2em;
}

.article_meta_info,
.article_title,
.article_thumbnail,
.article_share,
.article_content,
.article_tag{
  position: relative;
  padding: 0 60px;
  margin: 0 0 20px 0;
}

.article_date{
  font-size: .9em;
}

.article_date time{
  margin-right: .5em;
}

.article_date time::before {
  font-family: "Font Awesome 5 Solid";
  font-weight: bold;
  display: none;
}

.article_tag span{
  font-size: 1.4em;
  font-weight: bold;
  margin-right: 10px;
}

.article_content{
  word-break: break-all;
}

.artcile_content > *{
  margin-top: 10px; /*自動広告などの予期せぬコンテンツ用に最低限の余白確保*/
}

.article_content h2,
.article_content h3,
.article_content h4{
  margin: 2em 0;
  font-weight: bold;
}

.article_content h2.h2type1,
.article_content h3.h3type1,
.article_content h4.h4type1{
  padding: .25em .5em;
  border-left: solid 5px;
}

.article_content h2.h2type2,
.article_content h3.h3type2,
.article_content h4.h4type2{
  position: relative;
  color: #fff;
  padding: .5em;
}

.article_content h2.h2type2::after,
.article_content h3.h3type2::after,
.article_content h4.h4type2::after{
  position: absolute;
  content: '';
  top: 100%;
  left: 30px;
  border: 10px solid transparent;
  border-top: 10px solid;
  width: 0;
  height: 0;
}

.article_content h2.h2type3,
.article_content h3.h3type3,
.article_content h4.h4type3{
  position: relative;
  display: block;
  text-align: center;
  margin-bottom: 60px;
}

.article_content h2.h2type3::before,
.article_content h3.h3type3::before,
.article_content h4.h4type3::before{
  content: '';
  position: absolute;
  bottom: -15px;
  display: inline-block;
  width: 60px;
  height: 5px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  border-radius: 2px;
}

.article_content h2.h2type4:first-letter,
.article_content h3.h3type4:first-letter,
.article_content h4.h4type4:first-letter{
  font-size: 2em;
}

.article_content h2.h2type5,
.article_content h3.h3type5,
.article_content h4.h4type5{
  padding: .5em 10px;
  color: #fff;
}

.article_content h2.h2type6,
.article_content h3.h3type6,
.article_content h4.h4type6{
  position: relative;
  padding: .25em 0;
}

.article_content h2.h2type6::after,
.article_content h3.h3type6::after,
.article_content h4.h4type6::after{
  content: "";
  display: block;
  height: 4px;
}

.article_content h2.h2type7,
.article_content h3.h3type7,
.article_content h4.h4type7,
.article_content h2.h2type8,
.article_content h3.h3type8,
.article_content h4.h4type8{
  position: relative;
  padding: .5em 1em;
  text-align: center;
}

.article_content h2.h2type7::before, .article_content h2.h2type7::after,
.article_content h3.h3type7::before, .article_content h3.h3type7::after,
.article_content h4.h4type7::before, .article_content h4.h4type7::after{
  content: '';
  width: 20px;
  height: 20px;
  position: absolute;
  display: inline-block;
}

.article_content h2.h2type7::before,
.article_content h3.h3type7::before,
.article_content h4.h4type7::before{
  border-left: solid 2px;
  border-top: solid 2px;
  top: 0;
  left: 0;
}

.article_content h2.h2type7::after,
.article_content h3.h3type7::after,
.article_content h4.h4type7::after{
  border-right:  2px solid;
  border-bottom: 2px solid;
  right: 0;
  bottom: 0;
}

.article_content h2.h2type8,
.article_content h3.h3type8,
.article_content h4.h4type8{
  border: 2px solid;
  border-radius: 3px;
}

.article_content p{
  line-height: 1.75;
  margin-bottom: 1.5em;
}

.article_content p span {
  vertical-align: baseline;
}

.article_content img{
  max-width: 100%;
  -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.19);
  box-shadow: 0 1px 4px rgba(0,0,0,.19);
}

.article_content ul,
.article_content ol,
.article_content li{
  margin-bottom: 1em;
}

.article_content ul li,
.article_content ol li{
  position: relative;
  padding-left: calc(1em + 12px);
}

.article_content ul li::before{
  position: absolute;
  top: 0;
  bottom: 0;
  left: .5em;
  margin: auto;
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.article_content ol{
  counter-reset: number;
  list-style:none;
  margin:0;
  padding:0;
}

.article_content ol li:before{
  counter-increment: number;
  content: counter(number);
  position: absolute;
  font-size: .75em;
  width: 20px;
  height: 20px;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  text-align: center;
  padding: 2px;
  background: #f5f5f5;
  border-radius: 50%;
}

/*articleTypeごとに異なりそうなものはこの下に*/

.articleType1 h1{
  padding: 10px 0;
}

.articleType1 .article_thumbnail::before{
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  width: 0px;
  height: 0px;
  border: 15px solid;
  border-color: #fff transparent transparent transparent;
}


.articleType1 .article_date time::before{
  content:"\f073";
}
.articleType1 .article_date time:nth-of-type(2)::before{
  content:"\f2f1";
}
.articleType2 .article_date time::before{
  content:"あとで入れる";
}
.articleType3 .article_date time::before{
  content:"あとで入れる";
}
.articleType4 .article_date time::before{
  content:"あとで入れる";
}

.articleType1 .article_thumbnail{
  padding: 0;
}


/*ページネーション*/
.pagination{
  display: block;
  margin: 30px 0;
  text-align: center;
}

.pagination li{
  margin: 0 3px;
}

.pagination li span{
  color: #fff;
  display: inline-block;
  font-size: 1.2rem;
  padding: 0 10px;
  line-height: 30px;
}

.pagination li svg {
  font-size: 1rem;
  vertical-align: middle;
}

/****************         記事装飾        *******************/

.article_container > div:last-child{
  margin-bottom: 30px;
}

/*検索画面見出し*/

h4.search_result_ttl {
  font-size: 1.5em;
  line-height: 1.2;
  position: relative;
  margin: 20px auto 10px;
  padding: 0 10px 0 45px;
  max-width: 960px;
}

h4.search_result_ttl::before {
  font-family: "Font Awesome 5 Solid";
  content: "\f002";
  display: none;
}

/*パンくずリスト*/

.breadcrumb{
  width: 100%;
  height: 25px;
  color: unset;
  font-size: .9em;
  font-weight: bold;
  padding: 0 60px;
}

.breadcrumb ul{
  overflow-x: auto;
  white-space: nowrap;
}

.breadcrumb li{
  display: inline-block;
}

.breadcrumbType1 ul{
  margin-left: -7px; /*faの開始点をコンテンツ部分と揃える*/
}

.breadcrumbType1 li{
  height: 25px;
  text-align: center;
  margin-right: 3px;
  position: relative;
}

.breadcrumbType1 li:not(.bread_home){
  margin-left: -20px;
}

.breadcrumbType1 li a,
.breadcrumbType1 li:last-of-type span{
  display: inline-block;
  position: relative;
  background: #fff;
  line-height: 25px;
}

.breadcrumbType1 li:not(.bread_home) a,
.breadcrumbType1 li:last-of-type span{
  padding: 0 10px;
  margin-left: 20px;
  border-top-right-radius: 30px;
  border-bottom-right-radius: 30px;
}

.breadcrumbType1 li:not(.bread_home)::before {
  content: "";
  display: inline-block;
  position: absolute;
  z-index: 1;
  width: 25px;
  height: 25px;
  border-radius: 50%;
}

.breadcrumbType1 li:nth-of-type(1) a{z-index:11;}
.breadcrumbType1 li:nth-of-type(2) a{z-index:9;}
.breadcrumbType1 li:nth-of-type(3) a{z-index:7;}
.breadcrumbType1 li:nth-of-type(4) a{z-index:5;}
.breadcrumbType1 li:nth-of-type(5) a{z-index:3;}
.breadcrumbType1 li:nth-of-type(6) a{z-index:1;}

.breadcrumbType1 li:nth-of-type(2)::before{z-index:10;}
.breadcrumbType1 li:nth-of-type(3)::before{z-index:8;}
.breadcrumbType1 li:nth-of-type(4)::before{z-index:6;}
.breadcrumbType1 li:nth-of-type(5)::before{z-index:4;}
.breadcrumbType1 li:nth-of-type(6)::before{z-index:2;}

.breadcrumbType1 .bread_home a{
  width: 25px;
  border-radius: 50%;
}

.breadcrumbType1 .bread_home span{
  display: none;
}

.breadcrumbType2 li{
  padding-right: 1.5em;
  position: relative;
}

.breadcrumbType2 li svg.fa-home{
  margin-right: 5px;
}

.breadcrumbType2 li:not(:last-of-type)::after{
  font-family: "Font Awesome 5 Solid";
  content: "\f0da";
  display: none;
}

.breadcrumbType2 li svg.fa-caret-right {
  position: absolute;
  right: .5em;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  opacity: 0.25;
}

/*目次*/
.article_content .toc{
  margin: 15px 0;
}

.article_content .toc ul li::before{
  display: none;
}

.article_content .toc ul li{
  padding-left: 0;
}

.article_content .toc_body{
  font-size: .8em;
}

.article_content .toc_body ul li a{
  color: unset;
}

/*1階層目（h2）*/
.article_content .toc_body>ul>li>a{
  font-size: 1.1em;
  margin-bottom: 1em;
  font-weight: bold;
}

/*2階層目（h3）*/
.article_content .toc_body>ul>li>ul{
  padding-left: .5em;
  margin-top: .5em;
}

.article_content .toc_body>ul>li>ul>li{
  margin-bottom: .5em;
}

.article_content .toc_body>ul>li>ul>li>a::before{
  content: "・";
}

/*タイプ1*/
.tocType1 .collapsible{
  border-top: none;
  border-left: none;
  border-right: none;
  -webkit-box-shadow: 0 2px 3px rgba(0,0,0,.15);
  box-shadow: 0 2px 3px rgba(0,0,0,.15);
  border-radius: 3px;
}

.tocType1 .collapsible-header.toc_ttl{
  position: relative;
  background: transparent;
}

.tocType1 .collapsible-header.toc_ttl svg{
  position: absolute;
  right: 20px;
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
}

.tocType1 .active .collapsible-header.toc_ttl svg{
  -webkit-transform: rotateX(180deg);
	transform: rotateX(180deg);
}

/*タイプ2以降共通*/
div:not(.tocType1) .toc_ttl,
div:not(.tocType1) .toc_body{
  padding: 20px;
}

.tocType2{
  background: #f5f5f5;
  box-shadow: 0 1px 3px rgba(0,0,0,.19);
}

.tocType2 .toc_ttl{
  display: block;
  text-align: center;
  font-size: 1.5em;
}

.tocType3{
  border: 2px solid;
}

.tocType3,
.tocType3 .toc_ttl{
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.tocType3 .toc_ttl{
  width: calc(100% + 4px); /*隙間生じるの防ぐため*/
  margin-left: -2px;
  text-align: center;
  color: #fff;
}

.tocType3 .toc_ttl::before,
.tocType4 .toc_body>ul>li>a::before{
  font-family: "Font Awesome 5 Solid";
  display: none;
}

.tocType3 .toc_ttl::before{
  content: "\f02d";
}

.tocType3 .toc_ttl svg{
  margin-right: .5em;
}

.tocType4,
.tocType4 .toc_body ul:first-child{
  border-radius: 8px;
}

div.tocType4 .toc_ttl{
  padding-bottom: 0;
  text-align: center;
  font-weight: bold;
  color: #fff;
}

.tocType4 .toc_body ul:first-child{
  padding: 10px 15px;
  background: #fff;
}

.tocType4 .toc_body>ul>li:not(:last-child){
  border-bottom: 2px dotted #f2f2f2;
}

.tocType4 .toc_body>ul>li>a::before{
  content: "\f058";
}

.tocType4 .toc_body>ul>li>a svg{
  margin-right: .5em;
}

.tocType5{
  border: 4px solid #efefef;
}
.tocType5 .toc_ttl {
  display: block;
  text-align: center;
  position: relative;
}

.tocType5 .toc_ttl::after{
  content: "";
  width: 150px;
  height: 4px;
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  margin: auto;
}

.tocType5 .toc_body {
  border-top: 4px solid #efefef;
}

.article_content .tocType4 .toc_body>ul>li>ul {
  padding-left: 1.75em;
}

.article_content .tocType4 .toc_body>ul>li>ul>li>a::before{
  display: none;
}

/*CTA*/
.cta{
  display: block;
  margin-bottom: 20px;
}

.cta_body.delighter{
  -webkit-transition: all 1.3s ease-in-out;
  transition: all 1.3s ease-in-out;
  width: 1px;
  overflow: hidden;
  opacity: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 10px 15px;
}

.cta_body.delighter.started{
  width: 100%;
  opacity: 1;
}

.cta_img_area {
  display: block;
  width: 230px;
  padding: 15px;
  margin: auto;
}

.cta_text_area {
  padding: 10px;
  color: #efefef;
  flex-grow: 2;
  min-width: 300px;
}

.cta_text_area h4.cta_ttl{
  font-size: 1.5em;
  margin: 0 0 1.5em;
  text-align: center;
  font-weight: bold;
}

.cta_text {
  max-width: 300px;
  margin: 0 auto 20px;
}

.cta_btn.delighter{
  -webkit-transition: all 2s ease-in-out;
  transition: all 2s ease-in-out;
  opacity: 0;
  -webkit-transform: translateY(30px);
  transform: translateY(30px);
  display: block;
  max-width: 300px;
  margin: 10px auto;
}

.cta_btn.delighter.started{
  -webkit-transform: none;
  transform: none;
  opacity: 1;
}

/*シェア・関連記事・この記事を書いた人・コメント欄の共通見出しクラス*/
.article_af_ttl{
  text-align: center;
  font-weight: bold;
  font-size: 1.4em;
  margin: 1em 0;
}

/*この記事を書いた人*/

.author_box{
  padding: 20px;
  background: #fff;
  display: flex;
}

.author_thumb{
  margin-top: -40px;
}

.author_thumb img{
  border-radius: 50%;
  padding: 5px;
}

.author_name{
  text-align: center;
  font-size: 1.2em;
  font-weight: 600;
  margin: 10px 0;
}

.author_info{
  padding-left: 14px;
  flex-grow: 2;
}

.author_sns{
  padding: 10px 0;
  margin: 10px 0;
  border-top: 3px dashed #efefef;
}

.author_sns_ttl{
  display: block;
  font-weight: bold;
  margin-bottom: 10px;
}

.follow_button{
  display: inline-block;
  width: 50px;
  text-align: center;
  margin: 0 10px 10px 0;
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

.follow_button:hover{
  -webkit-transform: translateY(-1px);
  transform: translateY(-1px);
}

.follow_button svg{
  font-size: 1.25em;
  height: 50px;
  vertical-align: inherit;
  color: #fff;
}

.follow_button_tw{
  background: -webkit-linear-gradient(45deg, #1da1f2, #0e71c8);
  background: linear-gradient(45deg, #1da1f2, #0e71c8);
  -webkit-box-shadow: 0 1px 3px rgba(19, 127, 212, 0.7);
  box-shadow: 0 1px 3px rgba(19, 127, 212, 0.7);
}

.follow_button_tw:hover{
  -webkit-box-shadow: 0 2px 4px rgba(19, 127, 212, 0.6);
  box-shadow: 0 2px 4px rgba(19, 127, 212, 0.6);
}

.follow_button_fb{
  background: -webkit-linear-gradient(45deg, #3b5998, #0078d7);
  background: linear-gradient(45deg, #3b5998, #0078d7);
  -webkit-box-shadow: 0 1px 3px rgba(43, 98, 169, 0.5);
  box-shadow: 0 1px 3px rgba(43, 98, 169, 0.5);
}

.follow_button_fb:hover{
  -webkit-box-shadow: 0 2px 4px rgba(43, 98, 169, 0.4);
  box-shadow: 0 2px 4px rgba(43, 98, 169, 0.4);
}

.follow_button_is{
  background: -webkit-linear-gradient(45deg, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d);
  background: linear-gradient(45deg, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d);
  -webkit-box-shadow: 0 1px 3px rgba(120, 64, 190, 0.6);
  box-shadow: 0 1px 3px rgba(120, 64, 190, 0.6);
}

.follow_button_is:hover{
  -webkit-box-shadow: 0 2px 4px rgba(120, 64, 190, 0.5);
  box-shadow: 0 2px 4px rgba(120, 64, 190, 0.5);
}

.follow_button_yt{
  background: -webkit-linear-gradient(45deg, #d5135a, #f05924);
  background: linear-gradient(45deg, #d5135a, #f05924);
  -webkit-box-shadow: 0 1px 3px rgba(223, 45, 70, 0.6);
  box-shadow: 0 1px 3px rgba(223, 45, 70, 0.6);
}

.follow_button_yt:hover{
  -webkit-box-shadow: 0 2px 4px rgba(223, 45, 70, 0.5);
  box-shadow: 0 2px 4px rgba(223, 45, 70, 0.5);
}

.follow_button_gh{
  background: -webkit-linear-gradient(45deg, #333333, #626b73);
  background: linear-gradient(45deg, #333333, #626b73);
  -webkit-box-shadow: 0 1px 3px rgba(63, 65, 67, 0.6);
  box-shadow: 0 1px 3px rgba(63, 65, 67, 0.6);
}

.follow_button_gh:hover{
  -webkit-box-shadow: 0 2px 4px rgba(63, 65, 67, 0.5);
  box-shadow: 0 2px 4px rgba(63, 65, 67, 0.5);
}

.follow_button_cp{
  background: -webkit-linear-gradient(45deg, #324e63, #414447);
  background: linear-gradient(45deg, #324e63, #414447);
  -webkit-box-shadow: 0 1px 3px rgba(55, 75, 90, 0.6);
  box-shadow: 0 1px 3px rgba(55, 75, 90, 0.6);
}

.follow_button_cp{
  -webkit-box-shadow: 0 2px 4px rgba(55, 75, 90, 0.5);
  box-shadow: 0 2px 4px rgba(55, 75, 90, 0.5);
}


/*シェアボタン*/

ul.sharebutton_list{
  display: flex;
}

ul.sharebutton_list,
li.share_button{
  text-align: center;
}

li.share_button{
  width: 20%;
  -webkit-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

li.share_button a{
 font-size: 1.25em;
 line-height: 1;
 display: block;
 padding: 10px 0;
 }

li.share_hatena a{
  font-weight: bold;
  padding-top: 12px;
}

.shareType1 li.share_button:hover{
  opacity: .9;
}

.shareType1 li.share_twitter,.footer_share_tw{
  background: -webkit-linear-gradient(45deg, #1da1f2, #0e71c8);
  background: linear-gradient(45deg, #1da1f2, #0e71c8);
}

.shareType1 li.share_facebook,.footer_share_fb{
  background: -webkit-linear-gradient(45deg, #3b5998, #0078d7);
  background: linear-gradient(45deg, #3b5998, #0078d7);
}

.shareType1 li.share_hatena,.footer_share_hb{
  background: -webkit-linear-gradient(45deg, #01a4de, #537be6);
  background: linear-gradient(45deg, #01a4de, #537be6);
}

.shareType1 li.share_pocket{
  background: -webkit-linear-gradient(45deg, #d3505a, #f05924);
  background: linear-gradient(45deg, #d3505a, #f05924);
}

.shareType1 li.share_line,.footer_share_ln{
  background: -webkit-linear-gradient(45deg, #2CB24C, #009933);
  background: linear-gradient(45deg, #2CB24C, #009933);
}

.shareType1 li.share_button a{
 color: #fff;
 }

.shareType2 li.share_twitter a,
.shareType4 li.share_twitter a{
 color: #56ACEE;
}

.shareType2 li.share_facebook a,
.shareType4 li.share_facebook a{
 color: #3B5998;
}

.shareType2 li.share_hatena a,
.shareType4 li.share_hatena a{
 color: #008FDE;
}

.shareType2 li.share_pocket a,
.shareType4 li.share_pocket a{
 color: #D3505A;
}

.shareType2 li.share_line a,
.shareType4 li.share_line a{
 color: #2CB24C;
}

.shareType2 li:hover,
.shareType3 li:hover{
  -webkit-transform: translateY(-2px);
  transform: translateY(-2px);
}

.shareType3 li a{
  color: #ccc;
}

.shareType4 li a{
  width: 60px;
  line-height: 60px;
  padding: 0;
  margin: 0 auto;
  border-radius: 5px;
  -webkit-box-shadow: 0 1px 5px rgba(0,0,0,.19);
  box-shadow: 0 1px 5px rgba(0,0,0,.19);
}

.shareType4 li a svg{
  vertical-align: baseline;
}

.shareType4 li:hover{
  -webkit-transform: translateY(2px);
  transform: translateY(2px);
}

.shareType4 li a:hover{
  -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.1);
  box-shadow: 0 1px 1px rgba(0,0,0,.1);
}

.shareType5 li.share_button a{
  margin: 0 5px;
  border-radius: 3px;
  -webkit-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

.shareType5 li.share_button a{
  color: #fff;
}

.shareType5 li.share_button a:hover{
  transform: translateY(2px);
  -webkit-box-shadow: none;
  box-shadow: none;
}

.shareType5 li.share_twitter a{
 background: #56ACEE;
 -webkit-box-shadow: 0 2px 0 #0e71c8;
 box-shadow: 0 2px 0 #0e71c8;
}

.shareType5 li.share_facebook a{
 background: #3B5998;
 -webkit-box-shadow: 0 2px 0 #1a2760;
 box-shadow: 0 2px 0 #1a2760;
}

.shareType5 li.share_hatena a{
 background: #008FDE;
 -webkit-box-shadow: 0 2px 0 #0e71c8;
 box-shadow: 0 2px 0 #0e71c8;
}

.shareType5 li.share_pocket a{
 background: #D3505A;
 -webkit-box-shadow: 0 2px 0 #c0392b;
 box-shadow: 0 2px 0 #c0392b;
}

.shareType5 li.share_line a{
 background: #2CB24C;
 -webkit-box-shadow: 0 2px 0 #213900;
 box-shadow: 0 2px 0 #213900;
}

/*関連記事*/

.related_thumb img,
.related_ttl,
.recent_img img,
.rank_img img{
  -webkit-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

.related_thumb,
.recent_img,
.rank_img{
  overflow: hidden;
  border: 2px solid #efefef;
}

.related_thumb img:hover,
.recent_img img:hover,
.rank_img img:hover{
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

ul.related_posts{
  padding: 20px 10px;
  background: #fff;
}

ul.related_posts li a,
li.recent_posts_list a,
li.popular_posts_list a{
  color: unset;
}

.relatedType1 ul.related_posts li,
li.recent_posts_list,
li.popular_posts_list{
  padding: 10px;
  -webkit-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

.relatedType1 ul.related_posts li a,
li.recent_posts_list a,
li.popular_posts_list a{
  display: flex;
  align-items: center;
}

.relatedType1 .related_post_ttl,
.recent_ttl,
.rank_ttl{
  padding-left: 10px;
  width: calc(100% - 84px);
  word-break: break-all;
}

.relatedType1 .related_thumb,
.rank_img{
  width: 84px;
  height: 84px;
}

.relatedType1 .related_thumb img,
.recent_img img,
.rank_img img{
  width: 80px;
  height: 80px;
  object-fit: cover;
}

.recent_ttl span.recent_date {
  font-size: .75em;
  display: block;
}

.relatedType2 ul.related_posts{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.relatedType2 ul.related_posts li{
  width: 30%;
  /* margin: 0 auto; */
}

.relatedType2 .related_thumb{
  border-radius: 5px;
}

.relatedType2 .related_thumb img{
  width: 100%;
  height: 100px;
  object-fit: cover;
}

.relatedType2 .related_post_ttl {
  margin: 10px 0 15px;
}

/*コメント欄*/
.comment-reply-title{
  font-size: 1.2em;
  text-align: center;
}

.comment_box {
  padding: 20px;
  background: #fff;
}

.comment-author{
  display: inline-block;
}

.comment-author img {
  border-radius: 50%;
}

.comment_lists>.comment_block{
  padding-bottom: 15px;
  margin-bottom: 15px;
  border-bottom: 3px dashed #efefef;
}

.comment_block>.comment_block{
  padding-left: 10px;
}

.comment_text {
  background: #f5f5f5;
  padding: 10px;
  margin: 15px 0 10px;
  border-radius: 5px;
  position: relative;
}

.comment_text::before{
  content: "";
  position: absolute;
  top: -18px;
  left: 15px;
  border: 10px solid transparent;
  border-bottom: 10px solid #f5f5f5;/*これは吹き出しの三角部分だから#efefefにしちゃダメ*/
}

.comment_text>p{
  margin-bottom: 10px;
}

.comment-meta{
  text-align: right;
}

.comment-meta a{
  color: unset;
  font-size: 12px;
}

.reply{
  text-align: right;
  margin: 10px;
}

.comment-respond{
  margin-bottom: 20px;
}

.form-submit {
  margin: 10px 0;
}

/*これいつかなんとかしないといけない*/
/*FWの書式に沿っていなければ機能しないがWPで出力されたりプラグインで出力されるcheckboxが書式に沿っていない*/
.wp-comment-cookies-consent [type="checkbox"]:not(:checked), .wp-comment-cookies-consent [type="checkbox"]:checked{
  position: unset;
  opacity: 1;
  pointer-events: unset;
}

/*見出しとか色々*/

.article_content a{
  vertical-align: top;
}

.article_content svg.link_icon {
  margin: 0 6px 0 3px;
  vertical-align: initial;
}

/*WPクラス付与された装飾*/

.wp-block-button,
.wp-block-video,
.wp-block-quote,
.wp-block-code,
.wp-block-image,
.wp-block-media-text,
.wp-block-table,
.cp_embed_wrapper{
  margin-bottom: 20px;
}

.wp-block-code{
  background: #333;
  padding: .5em 1em;
  color: #fff;
  border-radius: 3px;
}

.wp-block-quote{
  padding: 1em;
  border: 2px solid #efefef;
  background: #f5f5f5;
  position: relative;
}

.wp-block-quote::before,
.wp-block-quote::after{
  font-family: "Font Awesome 5 Solid";
  font-weight: bold;
  display: none;
}

.wp-block-quote::before{
  content: "\f10d";
}

.wp-block-quote::after{
  content: "\f10e";
}

.wp-block-quote svg.fa-quote-left,
.wp-block-quote svg.fa-quote-right{
  font-size: 1em;
  position: absolute;
  opacity: .25;
  color: #333;
}

.wp-block-quote svg.fa-quote-left{
  top: 2px;
  left: 2px;
}

.wp-block-quote svg.fa-quote-right{
  right: 2px;
  bottom: 2px;
}

.wp-block-quote cite{
  display: block;
  font-size: .75em;
  text-align: right;
}

.wp-block-media-text__content>p {
    margin: 1em 0;
}

.wp-block-media-text__content{
  position: relative;
  display: block;
  border: 2px solid #efefef;
  padding: .5em 1em;
  border-radius: 5px;
  margin: 5px;
}

.wp-block-media-text:not(.is-stacked-on-mobile):not(.has-media-on-the-right) .wp-block-media-text__content{
  margin-left: 10px;
}

.wp-block-media-text.has-media-on-the-right:not(.is-stacked-on-mobile) .wp-block-media-text__content{
  margin-right: 10px;
}

.wp-block-media-text:not(.is-stacked-on-mobile):not(.has-media-on-the-right) .wp-block-media-text__content::before,
.wp-block-media-text:not(.is-stacked-on-mobile):not(.has-media-on-the-right) .wp-block-media-text__content::after{
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -10px;
  border: 10px solid transparent;
}

.wp-block-media-text:not(.is-stacked-on-mobile):not(.has-media-on-the-right) .wp-block-media-text__content::before{
  left: -18px;
  border-right: 10px solid #fff;
  z-index: 2;
}

.wp-block-media-text:not(.is-stacked-on-mobile):not(.has-media-on-the-right) .wp-block-media-text__content::after{
  left: -21px;
  border-right: 10px solid #efefef;
  z-index: 1;
}

.has-media-on-the-right:not(.is-stacked-on-mobile) .wp-block-media-text__content::before,
.has-media-on-the-right:not(.is-stacked-on-mobile) .wp-block-media-text__content::after{
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -10px;
  border: 10px solid transparent;
}

.has-media-on-the-right:not(.is-stacked-on-mobile) .wp-block-media-text__content::before{
  right: -18px;
  border-left: 10px solid #fff;
  z-index: 2;
}

.has-media-on-the-right:not(.is-stacked-on-mobile) .wp-block-media-text__content::after{
  right: -21px;
  border-left: 10px solid #efefef;
  z-index: 1;
}

.wp-embedded-content {
  max-width: 100%;
}

.wp-block-table thead tr th,
.wp-block-table tbody tr td {
  padding: .5em;
  border: 2px solid #efefef;
}

.material-placeholder{
  position: relative;
}

.material-placeholder::before {
  font-family: "Font Awesome 5 Solid";
  content: "\f00e";
  display: none;
}

.material-placeholder .fa-search-plus {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  font-size: 2em;
}

.wp-block-video figcaption,
.wp-block-image figcaption{
  text-align: center;
  font-size: .9em;
  color: #9e9e9e;
}

a.wp-block-button__link {
  box-shadow: 0 1px 2px rgba(0,0,0,.29);
  transition: all .2s ease-in-out;
}

a.wp-block-button__link:hover {
  transform: translateY(-2px);
  box-shadow: 0 3px 5px rgba(0,0,0,.19);
}

/*マークダウンで書けるコード*/
p > code {
  background: #f5f5f5;
  font-size: .9em;
  padding: 2px 3px;
  border-radius: 3px;
}

/****************        サイドバー       *******************/

/*
.aside__container{
  height: 100%;
}
*/
 /* これないとsticky効かない*/

.aside .fixed_side_widget_wrap{
  position: -webkit-sticky;
  position: sticky;
  top: 20px;
}

.aside .widget{
  margin-bottom: 20px;
}

.aside .post-count{
  background: #f5f5f5;
}

.sideType1 h4{
  position: relative;
}

.sideType1 h4.sidebar_title::after {
  position: absolute;
  content: "";
  display: block;
  width: calc(100% - 40px);
  height: 5px;
  bottom: 5px;
  border-radius: 30px;
}

/****************          検索窓         *******************/

.search_form_wrap{
  position: relative;
  padding-top: 12px;
}

.input_placeholder{
  position: absolute;
  top: 0;
  left: 10px;
  font-size: 12px;
  line-height: 1;
}

/****************         フッター        *******************/

.nav_footer{
  background: transparent;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.nav_footer ul{
  display: block;
  text-align: center;
}

.nav_footer ul li{
  display: inline-block;
  float: unset;
}

.nav_footer ul li a{
  font-size: .75em;
}

.nav_footer ul li a:hover{
  background-color: unset;
}

.footer_widgets_wrap {
  display: flex;
}

.footer_widgets_wrap>div{
  flex-grow: 2;
  min-width: 30%;
  margin-right: 3%;
  padding: 20px;
}

.footer_widgets_wrap>div:last-of-type{
  margin-right: 0; /*フッター(右)は右の余白なし*/
}

.footer_widgets_wrap>div>.widget{
  margin-bottom: 20px;
}

.footer_widgets_wrap>div>.widget:last-of-type{
  margin-bottom: 0; /*フッターウィジェット内の最後の子要素は下に余白とらない（既に取ってるため）*/
}

a.tohomelink {
  font-size: 1.5em;
  line-height: 1;
  display: block;
  text-align: center;
}

a.tohomelink svg{
  margin-right: .5em;
  margin-left: -.5em;
}

.footerArea .btn-large svg {
  font-size: 1rem;
}

/*SPフッターメニュー*/

.navbar-fixed{
  width: 100%;
}

.navbar-fixed .footer_sp_menu{
  bottom: 0;
  width: 100%;
}

.footer_sp_menu ul {
  display: flex;
}

.footer_sp_menu ul li{
  flex-grow: 2;
}

.footer_sp_menu ul li a.footer_sp_menu_li{
  position: relative;
  height: 56px;
  padding: 0;
  text-align: center;
  width: 100%;
}

.footer_sp_menu ul li a svg{
  line-height: 56px;
}

.footer_sp_menu ul li a span{
  font-size: .5em;
  line-height: 1;
  position: absolute;
  right: 0;
  left: 0;
  bottom: 5px;
  margin: auto;
}

.footer_sp_menu ul li a svg{
  height: 56px;
  padding-bottom: 5px;
  font-size: 20px;
}

.footerArea nav .sidenav-trigger{
  margin: 0;
}

.footerArea .modal{
  color: #333;
}

.footerArea .modal .modal-footer{
  text-align: center;
}

.footerArea .modal-content h4{
  color: #545454;
  text-align: center;
}

.footerArea .page-footer .footer-copyright{
  background-color: unset;
  color: unset;
}

/****************      ウィジェット       *******************/

h4.sidebar_title,
h4.footer_w_title {
  font-size: 1.1em;
  font-weight: bold;
  margin: 0;
  padding: 20px 20px 15px 20px;
}

.widget{
  overflow: hidden; /*子要素の上下margin適用するため*/
}

.widget_search button:focus{
  background: unset;
}

.widget_search form,
.widget_categories ul,
.widget_categories form,
.widget_archive ul,
.widget_archive select,
.widget_recent_entries ul,
.widget_recent_comments ul,
.widget_tag_cloud .tagcloud,
.widget_media_gallery div,
.widget_media_image img,
.widget_nav_menu div,
.widget_calendar table,
.widget_meta ul,
.widget_toc_body,
.widget_popular_posts ul,
.widget_prof_widget .profile_info{
  margin: 10px 20px;
}

/*** 検索窓 ***/
.search_form_wrap{
  display: flex;
}

.widget_categories ul li,
.widget_archive ul li,
.widget_meta ul li{
  padding: 10px;
  height: 50px;
}

.widget_categories ul li a,
.widget_archive ul li a,
.widget_meta ul li a{
  line-height: 30px;
}

.widget_tag_cloud li{
  display: inline-block;
}

.widget_tag_cloud ul li a,
.article_tag a{
  display: inline-block;
  position: relative;
  font-size: 12px;
  line-height: 12px;
  height: 24px;
  display: inline-block;
  color: unset;
  padding: 6px 24px;
  margin: 6px 12px 6px 0;
  border-radius: 30px;
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
}

.widget_tag_cloud ul li a:hover,
.article_tag a:hover{
  -webkit-transform: translateY(-1px);
  transform: translateY(-1px);
  -webkit-box-shadow: 0 2px 7px rgba(0,0,0,.1);
  box-shadow: 0 2px 7px rgba(0,0,0,.1);
}

.widget_tag_cloud ul li a .tag-link-count{
  margin-left: .5em;
  font-weight: bold;
}

.widget_archive label,
.widget_categories form label{
  display: none;
}

.widget_categories form{
  position: relative;
}

.widget_categories form::before{
  font-family: "Font Awesome 5 Solid";
  content: "\f0d7";
  display: none;
}

.widget_categories form svg{
  position: absolute;
  font-size: 15px;
  height: 15px;
  right: 15px;
  top: 0;
  bottom: 0;
  margin: auto;
}

.widget_archive select,
.widget_categories select{
  -webkit-appearance: none;
  appearance: none;
}

.widget_archive select{
  width: calc(100% - 2em - 8px);
}

.widget_categories select{
  width: 100%;
}

.widget_archive li,
.widget_categories li.cat-item{
  position: relative;
}

.widget_archive span.post-count,
.widget_categories span.post-count{
  position: absolute;
  width: 30px;
  line-height: 30px;
  border-radius: 3px;
  text-align: center;
  right: 1em;
}

.widget_toc_body{
  font-size: .8em;
}

.widget_toc_body li{
  padding: 10px;
}

.widget_toc_body>ul>li>a{
  font-size: 1.1em;
}

.widget_toc_body>ul>li>ul {
  margin-top: 10px;
}

.widget_calendar table{
  width: calc(100% - 40px);
}

/*独自ウィジェット*/

.widget_prof_widget{
  overflow: visible;
  margin-top: 50px;
}

.profile_widget{
  position: relative;
  width: 100%;
  height: auto;
  padding-bottom: 150px;
}

.profile_widget img{
  position:absolute;
  width:150px;
  height: 150px;
  padding:8px;
  top:-30px;
  left:0;
  right:0;
  margin:auto;
  object-fit: cover;
  border-radius:50%;
}

.profile_info{
  position: relative;
  top: 130px;
}

.profile_name{
  text-align: center;
  font-size: 1.1em;
  font-weight: bold;
  padding-bottom: .5em;
  margin-bottom: .5em;
}

/*人気記事*/

/*関連記事のstyleとほとんど同じだからそっちと統合*/

.rank_img{
  position: relative;
}

span.rank{
  position: absolute;
  z-index: 1;
  background: #fff;
  border: 1px solid #efefef;
  width: 30px;
  height: 30px;
  top: 1px;
  left: 1px;
  text-align: center;
  border-radius: 50%;
}

.rank svg.fa-crown{
  height: 28px; /*border分30pxから引いた*/
}

.rank_count1 svg.fa-crown{
  color: #daa520;
}

.rank_count2 svg.fa-crown{
  color: #708090;
}

.rank_count3 svg.fa-crown{
  color: #a0522d;
}

/*タブ*/
.widget_tab_body.row {
  margin-right: 20px;
  margin-left: 20px;
}

.tabs{
  margin-bottom: 15px;
}

.tabs .tab a:not(.active){
  opacity: .5;
}

/*ウィジェットのa色*/
.widget_recent_comments a,
.widget_recent_entries a,
.widget_categories a,
.widget_tag_cloud a,
.widget_toc_body a,
.widget_calendar a,
.widget_archive a,
.widget_meta a{
  color: unset;
  display: block;
}

.widget_categories select,
.widget_categories li,
.widget_archive select,
.widget_archive li{
  -webkit-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

.widget_categories select:hover,
.widget_categories li:hover,
.widget_archive select:hover,
.widget_archive li:hover,
.widget_recent_entries li:hover,
.widget_popular_posts li:hover,
.relatedType1 ul.related_posts li:hover{
  background: rgba(0,0,0,0.05);
  cursor: pointer;
}

/*アドセンス用ブロック*/
.adsense_code {
  width: 100%;
  overflow: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.adsense_code::-webkit-scrollbar {
  display:none;
}

/****************      ショートコード     *******************/

.sc_column{
  display: flex;
  justify-content: space-evenly;
}

.sc_cell{
  padding: 1em;
  flex-grow: 2;
}

/****************      アニメーション     *******************/

@-webkit-keyframes fadeIn{
  0%{
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  100%{
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeIn{
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); /* will-change */
  }
  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@-webkit-keyframes fadeDown{
	0%{
		opacity: 0;
    -webkit-transform: translate3d(0, -20%, 0);
		transform: translate3d(0, -20%, 0);
	}
	100%{
		opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

@keyframes fadeDown{
	0%{
		opacity: 0;
    -webkit-transform: translate3d(0, -20%, 0);
		transform: translate3d(0, -20%, 0);
	}
	100%{
		opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

@-webkit-keyframes dyHeaderTextMotion1 {
	0%{
		opacity: 0;
    -webkit-transform: translate3d(0, 20%, 0);
		transform: translate3d(0, 20%, 0);
	}
  50%{
		opacity: 0;
    -webkit-transform: translate3d(0, 20%, 0);
		transform: translate3d(0, 20%, 0); /* bodyとnavのアニメーション時間考慮して少し遅らせる */
	}
	100%{
		opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

@keyframes dyHeaderTextMotion1 {
	0%{
		opacity: 0;
    -webkit-transform: translate3d(0, 20%, 0);
		transform: translate3d(0, 20%, 0);
	}
  50%{
    opacity: 0;
    -webkit-transform: translate3d(0, 20%, 0);
    transform: translate3d(0, 20%, 0);
  }
	100% {
		opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

@-webkit-keyframes dyHeaderTextMotion2{
  0%{
    -webkit-transform: scale(0);
    transform: scaleX(0);
    transform-origin: 0 0;
  }
  45%{
    transform: none;
    transform-origin: 0 0;
  }
  50%{
    transform: none;
    transform-origin: 100% 0;
  }
  100%{
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    transform-origin: 100% 0;
  }
}

@keyframes dyHeaderTextMotion2{
  0%{
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    transform-origin: 0 0;
  }
  45%{
    transform: none;
    transform-origin: 0 0;
  }
  50%{
    transform: none;
    transform-origin: 100% 0;
  }
  100%{
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    transform-origin: 100% 0;
  }
}

@-webkit-keyframes dyHeaderTextMotion3{
  0%{
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50%{
    opacity: 1;
  }
}

@keyframes dyHeaderTextMotion3{
  0%{
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50%{
    opacity: 1;
  }
}

@-webkit-keyframes dyHeaderTextMotion4{
  0%,
  50%,
  100%{
    opacity: 1;
  }

  25%,
  75%{
    opacity: 0;
  }
}

@keyframes dyHeaderTextMotion4{
  0%,
  50%,
  100%{
    opacity: 1;
  }

  25%,
  75%{
    opacity: 0;
  }
}

/****************       レスポンシブ      *******************/

@media(min-width:961px){
  .contentArea{
    display:-webkit-box;
    display:flex;
  }
  main.columns .articleList_wrap article:not(.articleList5):nth-child(even){
    margin-right: 20px;
  }
  main#main{
    min-width: 590px;
  }
  .showPage main#main, .showPage aside#aside{
    margin: 0 10px;
  }
  .showPage aside#aside.exsist_bread {
    margin-top: 25px;
  }
  /*最初の要素の上に20pxの余白*/
  .aside > div:nth-of-type(1) {
    margin-top: 20px;
  }
}


@media(max-width:960px){
  .articleList_wrap article:not(.articleList5):not(.articleList7){
    margin: 0 auto 20px;
  }
  .f_item{
    padding: 10px;
  }
  .article_meta_info,
  .article_title,
  .article_thumbnail,
  .article_share,
  .article_content,
  .article_tag{
    padding: 0 30px;
    margin: 0 0 10px 0;
  }
  .breadcrumb{
    padding: 0 30px;
  }
  .aside{
    width: 100%;
  }
  .aside > div:nth-of-type(1):not(.widget_prof_widget) {
    margin-top: 20px;
  }
}

@media(min-width:601px){
  .footer_sp_menu{
    display: none;
  }
  .footerArea .navbar-fixed{
    min-height: 0;
  }
}

@media(max-width:560px){
  input[type="text"],
  input[type="tel"],
  input[type="email"],
  input[type="search"],
  input[type="url"],
  input[type="password"],
  textarea{
    font-size: 16px; /*iOSでfocus時ズームされるのを防ぐ*/
    transform: scale(.95);
  }
  .showPage{
    padding: 0;
  }
  .articleList_wrap article{
    width: 95%;
    margin: 0 2.5% 20px;
  }
  .articleList_wrap article:nth-of-type(1){
    margin-top: 20px;
  }
  .articleList_wrap article:nth-of-type(2){
    margin-top: 0;
  }
  .f_item{
    width: 100%;
  }
  #feature5 .container > div{
    width: 100%;
  }
  nav .sidenav-trigger{
    margin: 0 10px; /*記事リストとかと余白幅合わせる*/
  }
  .articleShow_wrap article{
    border-radius: 0;
  }
  .article_container{
    padding-top: 10px;
  }
  .article_meta_info,
  .article_title,
  .article_thumbnail,
  .article_share,
  .article_content,
  .article_tag{
    padding: 0 10px;
    margin: 0 0 10px 0;
  }
  .breadcrumb{
    padding: 0 10px;
  }
  .shareType4 li a{
    width: 50px;
    line-height: 50px;
  }
  .relatedType2 ul.related_posts li{
    width: 100%;
  }
  .relatedType2 .related_thumb img{
    height: 150px;
  }
  .relatedType2 li:not(:last-child) .related_ttl {
    padding: .5em 0 1em 0;
    border-bottom: 2px solid #efefef;
  }
  .footer_widgets_wrap {
    display: block;
  }
  .footer_widgets_wrap>div{
    margin-right: 0;
  }
  .sc_column{
    display: block;
  }
}