@charset "utf-8";

/*
theme Name: tsuhannavi
Description: 通販ナビのマニュアルサイトです。
Author: DesignStudio playpark
Author URI:https://play-park.jp
version： 1.0.0
*/


/* TOC
---------------------------------------------
  Chapter01 : 基本設定
  Chapter02 : FORM
  Chapter03 : 見出し
  Chapter04 : カラー
  Chapter05 : ホバーデザイン
  Chapter06 : ヘッダー
    Chapter06_01 : ナビゲーション
    Chapter06_02 : ハンバーガーメニュー
    Chapter06_03 : スマホメニュー
  Chapter07 : フッター
  Chapter08 : パンくずリスト
  Chapter09 : ページネーション
  Chapter10 : スクロールボタン
  Chapter11 : フォント
  Chapter12 : レイアウト
  Chapter13 : ウィジェット
    Chapter13_01 : アーカイブ
    Chapter13_02 : カテゴリー
    Chapter13_03 : タグクラウド
  Chapter14 : ヘッドバナー
  Chapter15 : お知らせ一覧
  Chapter16 : 
  Chapter17 : 
  Chapter18 : 
  Chapter19 : 
  Chapter20 : 
  Chapter99 : レスポンシブ設定
    Chapter99_01 : 大型モニター
    Chapter99_02 : ノートパソコン
    Chapter99_03 : タブレット
    Chapter99_04 : スマートフォン
    Chapter99_05 : スマートフォン小型
    Chapter99_06 : 
---------------------------------------------
*/




/*---------------------------------------------------
 Gutenberg設定
---------------------------------------------------*/
:where(.wp-block-columns.is-layout-flex) {
  gap: 0em;
}

.wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column {
  flex-basis: unset;
  flex-grow: 1;
}





/*---------------------------------------------------
  Chapter01 : 基本設定
---------------------------------------------------*/

/*サイト全体の基準となるCSSを記述*/
html {
  font-size: 16px;
}

*{
  font-family: 'Noto Sans JP', "Helvetica",  "Arial" , "游ゴシック" , "游ゴシック体" , "ヒラギノ明朝 Pro W3" , "Yu Gothic UI"  , "Osaka" , sans-serif;
}

body {
	margin: 0;
	padding: 0;
	color: #333;
  line-height: 1.4;
  counter-reset: number 0;
}

/*テキスト*/
 p {
	margin:0 auto;
	line-height: 2;
	font-size: 18px;
}


/*リンク*/
a {
	color: #0066c0;
	text-decoration: none;
}

a:active,
a:hover {
  outline: 0; }

a:link, a:visited:link {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.3);
}

/*画像*/
img {
  max-width: 100%;
  height: auto;
	border: 0;
}

/*引用*/
blockquote {
	display: block;
	color: #555;
	border: 1px solid #ddd;
	background: #eee;
	background: rgba(53, 53, 53, 0.05);
	margin: 40px 0;
	padding: 2.5em 2.5em 1em;
	border-radius: 3px;
	position: relative;
}

.blockquotelink {
    text-align: right ;
    margin: 0px ;
    font-size: 15px ;
}

blockquote:before {
    content: '\f10d';
    left: 0.4em;
    top: 0.4em;
}

blockquote:after {
    content: '\f10e';
    right: 0.4em;
    bottom: 0.4em;
}

blockquote:before, blockquote:after {
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
  position: absolute;
  width: 1em;
  height: 1em;
  display: block;
  text-align: center;
  font-size: 20px;
  line-height: 1;
  color: #999;
  opacity: 20;
  filter: alpha(opacity=20);
  -ms-filter: "alpha(opacity=20)";
}

abbr[title] {
  border-bottom: 1px dotted; }

b,
strong {
  font-weight: bold; }

dfn {
  font-style: italic; }

mark {
  background: #ff0;
  color: #000; }

small {
  font-size: 80%; }

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sup {
  top: -0.5em; }

sub {
  bottom: -0.25em; }

svg:not(:root) {
  overflow: hidden; }

hr {
  box-sizing: content-box;
  height: 0; }

pre {
  overflow: auto; }

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

td,
th {
  padding: 0; }

ul {
    margin: 20px 0;
    padding: 0;
}
  
li {
  display: list-item;
  text-align: -webkit-match-parent;
  font-size: 16px;
  line-height: 1.8;
  list-style-type: none
}

dl{
	margin:0;
}

dd{
	margin-left:0
}


/*clearfix*/
.cf {
	zoom: 1;
}

.cf:before, .cf:after {
	content: "";
	display: table;
}

.cf:after {
	clear: both;
}

/*フォーム要素の初期化*/
input, button, textarea {
	border-radius: 0;
	border: #e6e6e6 1px solid;
  -webkit-appearance: none;
}

select {
	border-radius: 0;
  border: unset;
}

input[type="submit"] {
  vertical-align:middle;
  text-align:center;
	border: none;
}


/* 強調文字 */
.boldfont {
    font-size: 1.1em;
    font-weight: bold;
}


/* WordPress記事リンク */
iframe.wp-embedded-content {
    width: 100%;
}


/*---------------------------------------------------
  Chapter02 : FORM
---------------------------------------------------*/
input[type="text"], input[type="password"], input[type="datetime"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], textarea, .field {
  display: block;
  width: 95%;
  margin-bottom: 0.7em;
  padding: 15px;
  border: 0;
  border-radius: 3px;
  background-color: #f5f5f5;
  box-shadow: none;
  color: rgba(0, 0, 0, 0.7);
  font-size: 1em;
  line-height: 1.5;
  transition: ease;
}

select {
  background: url( assets/img/parts/select_arrow.png);
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: 97.5% center;
  outline: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}


/*---------------------------------------------------
  Chapter03 : 見出し
---------------------------------------------------*/
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5 {
  font-family: 'Noto Sans JP', "Helvetica",  "游ゴシック" , "游ゴシック体" sans-serif;
	font-weight: 500;
}

h1, h2, h3, h4, h5, h6 {font-weight: normal;}

h1,
.h1 {
	font-size: 1.5em;
	font-weight: bold;
	line-height: 1.333em;
}

h2,
.h2 {
	font-size: 1.5em;
	line-height: 1.4em;
	font-weight: bold;
	margin-bottom: 0.375em;
}

h3,
.h3 {
	font-size: 1.3em;
	font-weight: bold;
}

h4,
.h4 {
	font-size: 1.2em;
	font-weight: 700;
}

h5,
.h5 {
	font-size: 1em;
	font-weight: 700;
	line-height: 2em;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.align_l{text-align:left;}
.align_r{text-align:right;}
.align_c{text-align:center;}

.bold {font-weight: bold !important;}

em {color:#F00; font-style:normal;}



/*---------------------------------------------------
  Chapter04 : カラー
---------------------------------------------------*/
#wp-content-editor-container .CodeMirror-scroll {
  margin-top: 55px;
}


.BuckColor01 {
  background: #F4F4F8;
}


/* 強調文字 */
.EmphasisColor {
  color: #C42F14;
  font-weight: bold;
}

.EmphasisBuck {
  background: #C42F14;
}


/*---------------------------------------------------------
  Chapter05 : ホバーデザイン
---------------------------------------------------------*/
.HoverType1 a{
  position: relative;
}

.HoverType1 a::after {
  position: absolute;
  left: 0;
  content: '';
  width: 100%;
  height: 1px;
  background: #fff;
  bottom: -1px;
  transform: scale(0, 1);
  transform-origin: right top; /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の右端*/
  transition: transform 0.3s;  /*変形の時間*/
}
  
.HoverType1 a:hover::after {
  transform: scale(1, 1);     /*ホバー後、x軸方向に1（相対値）伸長*/
  transform-origin: left top; /*左から右に向かう*/
}



/*---------------------------------------------------------
  Chapter06 : ヘッダー
---------------------------------------------------------*/
header {
  width: 100%;
}

#header {
  width: 90%;
  height: 100px;
  display: flex;
  align-items: center;
  max-width: none;
  justify-content: center;
  margin: 0 auto;
  background: #ffffff14;
}


/*----- JSを使いfixedクラスが付与された際の設定 -----*/
#header.fixed {
  position: fixed;
  z-index: 800;
  width: 100%;
  padding: 0 5%;
  top: 0;
  left: 0;
  height: 100px;
  background: #fff;
}




/*----- タイトルを画像にする場合 -----*/
.site-title-wrap {
  width: 20%;
  padding: 0 0 0 20px;
  text-align: left;
}

.site-title a {
  font-weight: bold;
  line-height: 1;
  display: inline-block;
  text-decoration: none;
}
 
.site-title a img {
  display: inline-block;
  width: auto;
}
 
/*----- タイトルを文字列にする場合 -----*/
.site-title a {
  font-size: 2.4rem;
  font-weight: bold;
  line-height: 1;
  display: inline-block;
  text-decoration: none;
  color: #000;
}


/*----- ヘッド背景 -----*/
.home_headimgBox {
  position: relative;
  width: 100%;
  background: #F0F3F5;
}

.home_headimgBox img{
  max-width: 100%;
  width: 100%;
  height: auto;
}

.home_headTextBox {
  position: absolute;
  top: 40%;
  width: 50%;
  margin: 0 auto 0 150px;
}

/*----- タイトル -----*/
.home_headTextBox h1 {
  margin: 0;
  font-size: 40px;
  font-weight: bold;
  line-height: 2;
  color: #fff;
}


/*----- テキスト -----*/
.home_headTextBox p{
  font-size: 25px;
  font-weight: 500;
  line-height: 2;
  color: #fff;
}


/*   Chapter06_01 : ナビゲーション
-----------------------------------------*/

#header-nav-wrap {
  width: 100%;
  margin: 0 0 0 auto;
  padding: 0 5% 0 0;
}

ul#menu-main_menu {
  display: flex;
}

ul#menu-main_menu>li {
  width: 100%;
}

ul#menu-main_menu>li>a {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  padding: 0;
  font-size: 15px;
  font-weight: 600;
  color: #1B1F6D;
}

ul#menu-main_menu>li>a:hover {
  color: #787AB0;
}

/*--- お知らせ ---*/
li#menu-item-565>a:before {
  font-family: "Material Icons";
  content: "\e88e";
  font-size: 30px;
  font-weight: 400;
  line-height: 1;
}
 
/*--- 初期設定 ---*/
li#menu-item-561>a:before {
  font-family: "Material Icons";
  content: "\e8b8";
  font-size: 30px;
  font-weight: 400;
  line-height: 1;
}

/*--- 運用から探す ---*/
li#menu-item-562>a:before {
  font-family: "Material Icons";
  content: "\f106";
  font-size: 38px;
  font-weight: 400;
  line-height: 0.8;
}

/*--- 機能名から探す ---*/
li#menu-item-563>a:before {
  font-family: "Material Icons";
  content: "\f02f";
  font-size: 38px;
  font-weight: 400;
  line-height: 0.8;
}

/*--- よくある質問 ---*/
li#menu-item-560>a:before {
  font-family: "Material Icons";
  content: "\e887";
  font-size: 30px;
  font-weight: 400;
  line-height: 1;
}

/*--- お問い合わせ ---*/
li#menu-item-564>a:before {
  font-family: "Material Icons";
  content: "\e158";
  font-size: 30px;
  font-weight: 400;
  line-height: 1;
}


.navbutton {
  display: none;
}



/*   Chapter06_02 : ハンバーガーメニュー
-----------------------------------------*/
nav#hamburger-main_nav {
  display: none;
}

.HamburgerButton {
  display: none;
}

@media(max-width: 700px) {

  nav.nv-pc {
    display: none;
  }

  /*---------- ハンバーガーボタン ----------*/
  .HamburgerButton {
    display: block;
    position: absolute;
    right: 8%;
    z-index: 9999;
    color: #999;
    text-align: right;
    border-radius: 10px;
}

  .fixed .HamburgerButton {
 
  }

  /* .HumburgerBuck {
    padding: 20px 0;
  } */

  /* .HamburgerButtonInner {
    margin-bottom: 0px;
    width: 30px;
    display: inline-block;
  } */
 
  .HamburgerButton span.HamburgerButtonBar {
    display: block;
    width: 100%;
    margin: 0 auto 8px;
    height: 1px;
    background: #666;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
  }
   
  .HamburgerButton span.HamburgerButtonBar:last-child {
    margin-bottom: 0; 
  }


  /* ハンバーガーOPEN時 */
  .ClickOpen .HumburgerBuck {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    background: rgb(0 0 0 / 60%);
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    z-index: 0;
  }

  .ClickOpen .HamburgerButtonInner {
    visibility: visible;
    opacity: 1;
    position: absolute;
    right: 70%;
    padding: 25px;
    margin-bottom: 5px;
    width: 8%;
    height: 4%;
    display: inline-block;
    color: #fff;
    background: #333;
    z-index: 9999;
  }

  .ClickOpen .HamburgerButton span.HamburgerButtonBar {
    background: #fff; 
  }
  
	.ClickOpen .HamburgerButtonInner::before, .ClickOpen .HamburgerButtonInner::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 26px;
    height: 2px;
    background-color: #fff;
	}

	.ClickOpen .HamburgerButtonInner::before {
    -webkit-transform: translate(-50%, -50%) rotate(45deg);
    transform: translate(-50%, -50%) rotate(45deg);
	}
	
	.ClickOpen .HamburgerButtonInner::after {
    -webkit-transform: translate(-50%, -50%) rotate(-45deg);
    transform: translate(-50%, -50%) rotate(-45deg);
	}


  /* メニューデザイン */
  .HamburgerNaviBox {
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    width: 70%;
    z-index: 9999;
    padding-top: 0px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 600ms ease-out;
    -o-transition: all 600ms ease-out;
    transition: all 600ms ease-out;
    transform: translateZ(0) translateX(100%);
    overflow: auto;
  }

  .ClickOpen .HamburgerNaviBox {
    transform:translateZ(0) translateX(0); 
  }

  .HamburgerNaviBox {
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    width: 70%;
    z-index: 999;
    padding-top: 0px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 600ms ease-out;
    -o-transition: all 600ms ease-out;
    transition: all 600ms ease-out;
    transform: translateZ(0) translateX(100%);
    overflow: auto;
  }

  .HamburgerNaviBox #sidebar {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
}

  .HamburgerNaviBox .sidebar-inner>div {
    padding: 5%;
  }

  .HamburgerNaviBox .widgettitle {
    padding: 10px;
    font-size: 12px;
    font-weight: 500;
    text-align: left;
    color: #fff;
    border-radius: 10px;
    background: #1E227B;
  }

  .HamburgerNaviBox .SidebarCategoryItem {
    margin: 10px 0;
    padding: 0 0 8px 0;
    font-size: 14px;
    font-weight: bold;
    border-bottom: #CCCCCC dashed 1px;
  }

  .HamburgerNaviBox .SidebarCategoryItem>a {
    display: flex;
    align-items: center;
    color: #333333;
    flex-direction: row;
  }

  .HamburgerNaviBox .SidebarCategoryItem:last-child {
    margin: 10px 0 0 0;
    border-bottom: none;
}



} /* 〜600px END */


/*   Chapter06_03 : スマホメニュー
-----------------------------------------*/
#SPMenuBox {
  display: none;
}


@media screen and (max-width:959px) { 

  #SPMenuBox {
    display: block;
    width: 100%;
  }

  #SPMenuBox.fixed {
    position: fixed;
    z-index: 999;
    width: 100vw;
    padding: 0;
    bottom: 0;
    left: 0;
    height: 100px;
    background: #fff;
  }
  
  .SPMenuList {
    display: flex;
    justify-content: space-between;
    margin: 3% 5%;
  }

  .SPMenuItem {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    margin: 0;
    padding: 0;
    font-size: 11px;
  }

  .SPMenuItem a, .SPMenuItem>div {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 12px;
    color: #1E227B;
  }

  /* ホーム */
  .SPMenuItem>a:before {
    font-family: "Material Icons Round";
    content: "\e88a";
    font-size: 30px;
    font-weight: 400;
    line-height: 1;
  }

  /* 運用から探す */
  .SPMenuItem .IconPersonSearch:before {
    font-family: "Material Icons Round";
    content: "\f106";
    font-size: 30px;
    font-weight: 400;
    line-height: 1;
  }

  /* 機能名から探す */
   .SPMenuItem .IconManageSearch:before {
    font-family: "Material Icons Round";
    content: "\f02f";
    font-size: 30px;
    font-weight: 400;
    line-height: 1;
  }

  /* TOPへ */
  .SPMenuItem .IconExpandLess:before {
    font-family: "Material Icons Round";
    content: "\e5ce";
    font-size: 30px;
    font-weight: 400;
    line-height: 1;
  }

    /* TOPへ */
    .SPMenuItem .IconMenu:before {
      font-family: "Material Icons Round";
      content: "\e5d2";
      font-size: 30px;
      font-weight: 400;
      line-height: 1;
    }


} /* 〜959px END */





/*---------------------------------------------------------
  Chapter07 : フッター
---------------------------------------------------------*/
footer {
  /*position: relative;
  z-index: 888; */
  color: #fff;
  text-align: center;
  background-color: #1B1F6D;
  padding: 15px 0;
}

nav#footer-nav ul li a {
  position: relative;
  margin: 0;
  padding: 0;
  font-size: 14px;
  font-weight: 300;
  color: #fff;
  vertical-align: baseline;
  background: transparent;
  text-decoration: none;
}

nav#footer-nav ul li a::before {
  content: "▶";
  color: #fff;
  font-size: 90%;
  padding: 0 3px 0 0;
}

nav#footer-nav ul li a::after {
  position: absolute;
  left: 0;
  content: '';
  width: 100%;
  height: 1px;
  background: #fff;
  bottom: -1px;
  transform: scale(0, 1);
  transform-origin: right top; /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の右端*/
  transition: transform 0.3s;  /*変形の時間*/
  }
  
  nav#footer-nav ul li a:hover::after {
    transform: scale(1, 1);     /*ホバー後、x軸方向に1（相対値）伸長*/
    transform-origin: left top; /*左から右に向かう*/
  }



/*----- footer Navigation -----*/
.footer-nav-wrap {
  margin: 0;
  padding: 0 0 10px;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 600;
}

#footer-nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

#footer-nav li {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 25px 0 0;
  color: #fff;
}







/*----- copyright -----*/
.copyright {
    padding: 0;
    background-color: #1B1F6D;
}

.copyright p {
	margin: 0;
	padding: 0;
	font-size: 12px;
	text-align: center;
}




/*---------------------------------------------------
  Chapter08 : パンくずリスト
---------------------------------------------------*/
#bread {
  height: 50px;
  line-height: 3;
  background: #1E227B;
  display: flex;
  justify-content: flex-start;
}

#bread ul {
  display: flex;
  width: auto;
  margin: 0;
  padding: 0 80px;
  align-items: center;
}

#bread ul ol{
  display: flex;
  align-items: center;
}

#bread li {
  position: relative;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  color: #fff;
  font-size: 12px;
  line-height: 1.5;
}

#bread li:after {
  padding: 0 2px 0 0;
  font-family: 'Material Icons';
  content: '\e037';
  font-size: 18px;
  font-weight: bold;
  line-height: 1.5;
  vertical-align: middle;
}

#bread li:last-child::after   {
display: none;
}

#bread li a {
  color: #fff;
  margin: 0 5px 0 0;
}



/*---------------------------------------------------
  Chapter09 : ページネーション
---------------------------------------------------*/
.pagenation {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 5% 0 0 0;
}

.pagenation li {
  font-family: "Roboto", sans-serif;
  margin: 0 5px;
  color: #1E227B;
  border: 1px solid #1E227B;
  border-radius: 5px;
}

.pagenation li a {
  display: block;
  width: 100%;
  padding: 10px 15px;
  color: #1E227B;
}

/*- 戻る -*/
.pagenation li.prev {
  margin: 0 3% 0 0;
}

/*- 次へ -*/
.pagenation li.next {
  margin: 0 0 0 3%;
}

/*- 表示中ページ -*/
.pagenation li.current {
  margin: 0;
  padding: 10px 15px;
  color: #fff;
  border: 1px solid #1E227B;
  background: #1E227B;
}

/*- hover時 -*/
.pagenation li a:hover {
  display: block;
  width: 100%;
  color: #fff;
  background: #1E227B;
  border: 1px solid #000;
}




/*---------------------------------------------------------
  Chapter10 : スクロールボタン（TOPページ）
---------------------------------------------------------*/
#page-top a {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 50px;
  height: 50px;
  color: #fff;
  border-radius: 90px;
  transition: all 0.5s;
  background: #1D227B;
}

#page-top a:hover{
	background: #A5A7CA;
}

#page-top a span {
  position: absolute;
  top: 27px;
  font-size: 0.7rem;
  color: #fff;
}

#page-top a::before {
  font-family: "Material Icons";
  content: "\e5ce";
  /* position: absolute; */
  /* top: 0px; */
  font-size: 40px;
}


/*リンクを右下に固定*/
#page-top {
  position: fixed;
  right: 2%;
  z-index: 2;
  opacity: 0;
  transform: translateY(100px);
}


/*　上に上がる動き　*/
#page-top.UpMove{
	animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }
  to {
    opacity: 1;
	transform: translateY(0);
  }
}


/*　下に下がる動き　*/
#page-top.DownMove{
	animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
  from {
  	opacity: 1;
	transform: translateY(0);
  }
  to {
  	opacity: 1;
	transform: translateY(100px);
  }
}



/*---------------------------------------------------------
  Chapter11 : 検索ボックス
---------------------------------------------------------*/
.HeaderSearchBox {
  width: 75%;
}

.search-form {
  position: relative;
  width: 100%;
}

input.search-field {
  width: 100%;
  border-radius: 60px;
  border-bottom: solid 1px #efefef;
  background: #fff;
  box-shadow: 3px 3px 10px 2px rgb(0 0 0 / 13%);
  transition: all 300ms ease-out;
}


.HeaderSearchButton:before {
  font-family: "Material Icons";
  content: "\e8b6";
  padding: 0;
  font-size: 30px;
  line-height: 1.8;
}

#searchbutton {
  height: 50px;
  position: absolute;
  right: 10px;
  top: 0;
  background: none;
  color: #666;
  border: none;
  font-size: 25px;
  z-index: 10;
}

.FrontSearchButton:before {
  font-family: "Material Icons";
  content: "\e8b6";
  padding: 0;
  font-size: 35px;
  line-height: 2;
}

.FrontSearchText {
  margin: 0 0 15px 0;
  font-size: 20px;
  font-weight: 600;
  color: #1B1F6D;
}

/* クリアボタン */
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}



/*---------------------------------------------------------
  Chapter11 : フォント
---------------------------------------------------------*/


/*   Materialアイコン
-----------------------------------------*/
/* Settings */
.IconSettings:before {
  padding: 0 2px 0 0;
  font-family: 'Material Icons Round';
  content: '\e8b8';
  font-size: 30px;
  font-weight: bold;
  line-height: 1.5;
  vertical-align: middle;
}

/* AssignmentReturned */
.IconAssignmentReturned:before {
  padding: 0 2px 0 0;
  font-family: 'Material Icons Round';
  content: '\e861';
  font-size: 30px;
  font-weight: bold;
  line-height: 1.5;
  vertical-align: middle;
}

/* Group */
.IconGroup:before {
  padding: 0 2px 0 0;
  font-family: 'Material Icons Round';
  content: '\e7ef';
  font-size: 30px;
  font-weight: bold;
  line-height: 1.5;
  vertical-align: middle;
}



/*---------------------------------------------------------
  Chapter12 : レイアウト
---------------------------------------------------------*/
.container {
  width: 980px;
  margin: 0 auto;
}

#pageinner {
  display: flex;
  width: 85%;
  height: auto;
  margin: 50px auto 150px;
}

.pagecontent {
  width: 70%;
}

.categorycontent {
  width: 70%;
}




/*---------------------------------------------------------
  Chapter13 : ウィジェット
---------------------------------------------------------*/
#sidebar {
  width: 25%;
  margin: 0 60px 0 0;
}

.sidebar-inner {

}

.sidebar-wrapper {
  height: auto;
  background: #fff;
}

/*-- ウィジェット追尾用 --*/
#side-widget_tk {
  position: -webkit-sticky;
  position: sticky;
  top: 10px;
}


/*--- ウィジェットタイトル ---*/
.widgettitle {
  padding: 15px;
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  border-radius: 10px;
  background: #1E227B;
}


.SidebarCategorylist {
  margin: 0;
}

.SidebarCategoryItem {
  margin: 15px 0;
  padding: 0 0 15px 0;
  font-weight: bold;
  border-bottom: #CCCCCC dashed 1px;
}


.SidebarCategoryItem:last-child  {
  margin: 20px 0 0 0;
  border-bottom: none;
}

.SidebarCategoryItem>a {
  display: flex;
  align-items: center;
  color: #333333;
}

.SidebarCategoryItem>a>span {
  font-family: 'Material Icons Round';
  margin: 0 3px 0 0;
  color: #1E227B;
}

.SidebarCategoryItem>a:hover {
  color: #4B4E95;
}



/*  Chapter13_01 : アーカイブWidget
---------------------------------------------------------- */
.widget select {
  width: 100%;
  max-width: 100%;
  margin: 20px 0 0;
  padding: 15px;
  background-color: #f5f5f5;
}

.screen-reader-text {
  display: none;
}



/* Chapter13_02 : カテゴリWidget
---------------------------------------------------------- */
.widget_categories {
  width: 100%;
  max-width: 100%;
}

.widget_categories ul {
  width: 100%;
  margin: 0;
}

.widget_categories ul li {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 8px;
  font-weight: bold;
}

.widget_categories ul li a {
  display: block;
  padding: 10px 0 10px 0;
  color: #626262;
  text-decoration: none;
  border-bottom:1px dotted #b7b7b7;
}

.widget_categories ul li a:hover {
  -webkit-transform: translateX(3px);
  transform: translateX(3px);
}

/*親カテゴリーのアイコン*/
.widget_categories ul li a:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f07c";
  margin: 0 2px 0 0;
}

/* カウント */
.category_count {
  position: absolute;
  right: 3px;
  top: 13px;
  padding: 1px 3px;
  min-width: 30px;
  color: #aaa;
  border: 1px solid #ccc;
  border-radius: 2px;
  font-size: .7rem;
  font-weight: 300;
  line-height: 1rem;
  text-align: center;
}




/*---------- 子カテゴリー ----------*/
.widget_categories ul li ul li {
  margin: 0;
  padding: 8px 0 8px 0;
}


.widget_categories ul li ul li a {
  padding: 10px 0 10px 10px;
}


.widget_categories ul li ul li a:before {
  font-family: "Font Awesome 5 Free";
  content:"\f0da";
  font-weight:900;
  margin: 0 2px 0 0;
}


/*---------- 孫カテゴリー ----------*/
.widget_categories ul li ul li ul li {
  margin: 0;
  padding: 0;
}


.widget_categories ul li ul li ul li a {
  padding: 10px 0 10px 20px;
}



/* Chapter13_03 : タグクラウド
---------------------------------------------------------- */
.tagcloud {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 20px 0 0 0;
  height: auto;
}


.widget_tag_cloud .tagcloud a {
  display: inline-block;
  margin: 7px 3px;
  padding: 7px 5px;
  font-size: 12px !important;
  font-weight: 600;
  color: #000;
  background: #f4f4f4;
  border: 0px solid #000;
  border-radius: 3px;
}


.widget_tag_cloud .tagcloud a::before {
  font-family: "Font Awesome 5 Free";
  content:"\f02b";
  font-weight:900;
  padding: 0 3px 0 0;
}


.widget_tag_cloud .tagcloud a:hover {
  border: 0px solid #000;
  color: #000;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  text-decoration: none;
}



/* Chapter13_04 : 最近の投稿
---------------------------------------------------------- */
.widget_recent_entries li {
padding-bottom: .5rem;
border-bottom: 1px solid #ddd;
}

.widget_recent_entries li a:before {
font-family: 'Font Awesome 5 Free';
font-weight: bold;
font-weight: 900;
position: absolute;
left: 5px;
content: '\f303';
color: #000;
}

.widget_recent_entries li a {
display: block;
margin-bottom: .3rem;
padding-left: 1.6rem;
}

.widget_recent_entries .post-date {
font-size: .8rem;
display: block;
}


/* Chapter13_05 : カレンダーウィジェット
---------------------------------------------------------- */
.calendar_wrap {
padding: 1rem;
border: 1px solid #ddd;
}

.calendar_wrap table {
width: 100%;
}

.calendar_wrap tbody {
text-align: center;
}

.calendar_wrap caption {
font-weight: bold;
margin-bottom: 1rem;
}

.calendar_wrap td {
padding: .3rem 0;
}

.calendar_wrap tfoot td {
padding-top: .7rem;
}

.calendar_wrap tfoot td:last-child {
text-align: right;
}




/*---------------------------------------------------
Chapter14 : ヘッドバナー
---------------------------------------------------*/

#headimg {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 0 0 30px 0;
}

#headimg>img {
  margin: 0 0 0 13%;
}

#headimg .headimgBox {
  width: 100%;
}


#headimg .pagecaption {
  margin: 0 0 0 10%;
  font-size: 50px;
  font-weight: bold;
  color: #338DC3;
}




/*---------------------------------------------------
Chapter15 : お知らせ一覧
---------------------------------------------------*/
.NewslistTitle {
  display: flex;
  align-items: center;
  position: relative;
  margin: 0 0 5px;
  padding: 0 0 7px;
  font-size: 25px;
  font-weight: 600;
  line-height: 1.5;
  text-align: left;
  color: #1E227B;
  border-color: #1E227B;
}

.NewslistTitle:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background-image: -webkit-gradient(linear,left top,right top,from(#1E227B),to(#F4F4F8));
  background-image: -webkit-linear-gradient(left,#1E227B 0%,#F4F4F8 100%);
  background-image: linear-gradient(to right,#1E227B 0%,#F4F4F8 100%);
}

.NewsLast  {
  margin: 50px 0 5px;
}

.NewsItem {
  display: flex;
  align-items: center;
  padding: 15px 0;
  border-bottom: #CCCCCC dashed 1px;
}

.FrontNewsItem {
  padding: 10px 0;
}

.FrontNewsItem:first-child {
  padding: 0 0 15px 0;
}

.NewsTime {
  margin: 0 8px;
}

.NewsItem>p {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  color: #969696;
}

.NewsItem>p:hover {
  color: #1E227B;
}

.CategoryLink {
  font-size: 20px;
  margin: 0 0 0 auto;
}

.CategoryLink>a {
  display: flex;
  align-items: center;
  color: #1E227B;
}

.CategoryLink>a:hover {
  color: #787AB0;
}




/*---------------------------------------------------
 NEWマーク
---------------------------------------------------*/

/* NEWマーク */
.PostNewMark {
  display: inline-block;
  margin: 0;
  padding: 2px 5px;
  font-size: 11px;
  line-height: 1.5;
  text-align: center;
  color: #fff;
  border-radius: 5px;
  background: #C21029;
}








/*---------------------------------------------------------
  Chapter99 : レスポンシブ設定
---------------------------------------------------------*/


/*   Chapter99_01 : 大型モニター（1501px〜） 〜 1280px）
----------------------------------------------------------*/
@media screen and (min-width:1501px) {


  /*---------- テーブル：1501px〜  ----------*/



} /* 〜1501px END */






/*   Chapter99_02 : ノートパソコン（961px 〜 1280px）
----------------------------------------------------------*/
@media screen and (min-width:961px) and ( max-width:1280px) {


  /*---------- テーブル：〜1280px  ----------*/
  #header {
    width: 100%;

}

} /* 〜1280px END */





/*   Chapter99_03 : タブレット（601px 〜 960px）
----------------------------------------------------------*/
@media screen and (min-width:601px) and ( max-width:960px) {


  /*---------- header：〜600px  ----------*/
  #header { width: 90%; height: 80px; }
  #header.fixed { padding: 0 30px; }
  .site-title-wrap { width: 20%; margin: 0 7% 0 0; padding: 0; text-align: left;}
  #header-nav-wrap { display: none; }


  /*---------- レイアウト ：〜600px  ----------*/
  #pageinner { display: flex; flex-direction: column-reverse; width: 85%; height: auto; margin: 50px auto 150px;}
  .pagecontent { width: 100%; }
  .categorycontent { width: 100%; }
  
  
  /*---------- サイドバー ：〜600px  ----------*/
  #sidebar { display: none;}
  .SidebarCategoryItem:last-child { margin: 15px 0 0 0; }


  /*---------- タイトルヘッダー ：〜600px  ----------*/
  #headimg>img { margin: 0 0 0 8%; width: 20%; }
  #headimg .pagecaption { font-size: 25px; margin: 0 0 0 5%;}
  
  
  /*---------- お知らせ ：〜600px  ----------*/
  .NewsItem>p { font-size: 12px;}

} /* 〜960px END */





/*   Chapter99_04 : スマートフォン（351px 〜 600px）
----------------------------------------------------------*/
@media screen and (min-width:351px) and ( max-width:600px) {



  /*---------- header：〜600px  ----------*/
  #header { width: 90%; height: 80px; }
  #header.fixed { padding: 0 20px; }
  .site-title-wrap { width: 20%; margin: 0 7% 0 0; padding: 0; text-align: left;}
  #header-nav-wrap { display: none; }


  /*---------- 検索：〜600px  ----------*/
  input.search-field { font-size: 12px; }



  /* パンくず ： 〜480px
	-----------------------------------------*/
  #bread { height: 40px; }
  #bread ul { margin: 0; padding: 0; }
  
  
  
   /* ページネーション ： 〜480px
	-----------------------------------------*/
  .pagenation { margin: 15% 0 0 0; }
  .page-numbers li { margin-right: 18px; font-size: 15px; }
  .page-numbers li:last-child  { margin-right: 0; }


  /* フッター ： 〜480px
	-----------------------------------------*/
  footer { height: 220px;}
  nav#footer-nav ul li a { font-size: 12px; }


  /*---------- テキスト：〜600px  ----------*/
  p {font-size: 15px;}


  /*---------- レイアウト ：〜600px  ----------*/
    #pageinner { display: flex; flex-direction: column-reverse; width: 85%; height: auto; margin: 50px auto 150px;}
    .pagecontent { width: 100%; }
    .categorycontent { width: 100%; }
  
  
  /*---------- サイドバー ：〜600px  ----------*/
    #sidebar { display: none;}
    .SidebarCategoryItem:last-child { margin: 15px 0 0 0; }
  
  
  /*---------- タイトルヘッダー ：〜600px  ----------*/
    #headimg>img { margin: 0 0 0 8%; width: 20%; }
    #headimg .pagecaption { font-size: 25px; margin: 0 0 0 5%;}
  
  
  /*---------- お知らせ ：〜600px  ----------*/
    .NewsItem>p { font-size: 12px;}




} /* 〜600px END */






/*   Chapter99_04 : スマートフォン小型（320px 〜 370px）
----------------------------------------------------------*/
@media screen and (min-width:320px) and ( max-width:350px) {


  /*---------- header：　〜370px  ----------*/
  #header { width: 90%; height: 80px; }
  #header.fixed { padding: 0 20px; }
  .site-title-wrap { width: 20%; margin: 0 7% 0 0; padding: 0; text-align: left;}
  #header-nav-wrap { display: none; }


  /*---------- 検索：：　〜370px  ----------*/
  input.search-field { font-size: 12px; }


  /* パンくず ： ：　〜370px
	-----------------------------------------*/
  #bread { height: 40px; }
  #bread ul { margin: 0; padding: 0; }


   /* ページネーション ： 〜480px
	-----------------------------------------*/
  .pagenation { margin: 15% 0 0 0; }
  .page-numbers li { margin-right: 18px; font-size: 15px; }
  .page-numbers li:last-child  { margin-right: 0; }
  

  /* フッター ： ：　〜370px
	-----------------------------------------*/
  footer { height: 220px;}
  nav#footer-nav ul li a { font-size: 12px; }


  /*---------- テキスト：：　〜370px  ----------*/
  p {font-size: 15px;}





} /* 〜350px END */