@charset "utf-8";


/* TOC
---------------------------------------------
  Chapter01 : レイアウト
  Chapter02 : 検索ボックス（Front用）
  Chapter03 : キーワードエリア
  Chapter04 : お知らせ一覧エリア
  Chapter05 : CTA
  Chapter06 : 
  Chapter07 : 
  Chapter08 : 
  Chapter09 : 
  Chapter10 : 
  Chapter99 : 
    Chapter99_01 : 大型モニター
    Chapter99_02 : ノートパソコン
    Chapter99_03 : タブレット
    Chapter99_04 : スマートフォン
    Chapter99_05 : スマートフォン小型
    Chapter99_06 : 
---------------------------------------------
*/


/*---------------------------------------------------------
  Chapter01 : レイアウト
---------------------------------------------------------*/

.FrontLayout {
    max-width: 960px;
    margin: 0 auto;
    padding: 50px 0;
}

.FrontContentsLayout {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 3em;
}

.FrontContentsItem {
    padding: 20px 0;
    border-bottom: 1px solid #e3e3e3;
}


section.Area {

}

.AreaInner {
  display: flex;
}

.Box {
  width: 33%;
}

ul.category-50-posts {

}

ul.category-50-posts li{
  text-indent: -1em;
  padding-left: 1em;
  font-size: 16px;
  line-height: 1.8;
  list-style-type: disc;
}

ul.category-50-posts li a{
  transition: color 0.3s ease;
}

ul.category-50-posts li a:hover{
  color: #D85325;
}

/* カテゴリータイトル */
.FrontItemCategory {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 1% 0;
  border-radius: 10px;
  background: #0054B8;
}

.FrontItemCategory h2{
  margin-bottom: 0;
  font-size: 30px;
  line-height: 1.5;
  text-align: center;
  color: #fff;
}


.FrontSingleCategory {
  padding: 3.5% 0;
}

.FrontItemCategory>a{
  color: #fff;
}

.FrontItemCategory>span {
  padding: 0 5px 0 0;
  font-size: 35px;
  line-height: 1.2;
  color: #fff;
}


/* カテゴリーエリア */
.FrontSettingBox {
  flex: 1;
  margin: 0;
}

.FrontSettingtDoubleBox {
  width: 28%;
  margin: 0 2% 0 0;
}

.FrontSettingtDoubleBox:last-child {
  width: 100%;
  margin: 0;
}


/* カードレイアウト */
.FrontLayoutBox {
  display: flex;
  justify-content: space-between;
  margin: 3% 0 0;
}

.FrontSettingtDoubleBox:first-child .FrontLayoutBox  {
  margin: 12% 0 0;
}

/* カード設定 */
.FrontLayoutItem {
  flex: 1;
  margin: 0 2% 0 0;
  padding: 1% 2%;
  border-radius: 30px;
  box-shadow: 4px 4px 15px #FFD7CF;
  transition: all 300ms ease-out;
  background: #fff;
}

.FrontLayoutItem:last-child {
  margin: 0;
}

.FrontLayoutItem>a {
  display: flex;
  flex-direction: column;
  align-items: center;
}


/* タイトル */
.FrontItemTitle {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  line-height: 2;
  text-align: center;
  color: #0054B8;
}

/* イラスト */
.CategoryIllust {
  width: max-content;
}


/* サブタイトル */
.FrontItemSubTitle {
  margin: 4% 0 2%;
  font-size: 22px;
  line-height: 1.5;
  text-align: center;
  color: #0054B8;
}

/* テキスト */
.FrontItemText {
  font-size: 15px;
  line-height: 1.5;
  color: #999;
  text-align: center;
}


/* 枠線が出現
-----------------------------------------*/
.FrontLayoutItem3 {
  position: relative;
  transition: 0.8s ease-out;
  overflow: visible;
  border: 2px solid #fff;
  
 }
 
 .FrontLayoutBox3 {
  height: 100%;
  display: grid;
  place-content: center;
 }
 
 .card-button {
  transform: translate(-50%, 125%);
  width: 60%;
  border-radius: 1rem;
  border: none;
  background-color: #0054B8;
  color: #fff;
  font-size: 1rem;
  padding: .5rem 1rem;
  position: absolute;
  left: 50%;
  bottom: 0;
  opacity: 0;
  transition: 0.8s ease-out;
 }
 
/*Hover*/
.FrontLayoutItem3:hover {
  border-color: #0054B8;
  box-shadow: 0 4px 18px 0 rgba(0, 0, 0, 0.25);
}

.FrontLayoutItem3:hover .CategoryIllust {
  transform: scale(1.1);
  transition: transform 0.2s ease-out;
}

.FrontLayoutItem3 .CategoryIllust {
  transition: transform 0.5s ease-in-out;
}


/* 下からバー出現
-----------------------------------------*/
.FrontLayoutItem2 {
  position: relative;
  transition: 0.5s ease-out;
  overflow: visible;
  border: 2px solid #fff;
 }
 
 .FrontLayoutBox2 {
  height: 100%;
  display: grid;
  place-content: center;
 }
 
 .card-button {
  transform: translate(-50%, 125%);
  width: 60%;
  border-radius: 1rem;
  border: none;
  background-color: #0054B8;
  color: #fff;
  font-size: 1rem;
  padding: .5rem 1rem;
  position: absolute;
  left: 50%;
  bottom: 0;
  opacity: 0;
  transition: 0.3s ease-out;
 }
 
 /*Hover*/
 .FrontLayoutItem2:hover {
  border-color: #0054B8;
  box-shadow: 0 4px 18px 0 rgba(0, 0, 0, 0.25);
 }
 
 .FrontLayoutItem2:hover .card-button {
  transform: translate(-50%, 50%);
  opacity: 1;
 }


/* hover時（回転）
-----------------------------------------*/
.card {
height: 100%;
  cursor: pointer;
}

.hoverTypeF {
  text-align: center;
  position: relative;
  transition: all 2.25s;
  transform-style: preserve-3d;
}

.card:hover .hoverTypeF {
  transform: rotateY(0.5turn);
}

.front,
.back {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  padding: 2em;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.front.FrontItemSubTitle {
  transform: translateZ(5rem);
}

.back {
  transform: rotateY(0.5turn);
}

.back.FrontItemText {
  transform: translateZ(3rem);
}

.back .FrontItemText {
  padding: 15px 0;
}


/* hover時
-----------------------------------------*/
.hoverTypeA {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}

.hoverTypeA:hover {
  cursor: pointer;
  color: #fff;
  background: #0054B8;
}


/* 拡大 */
.hoverTypeB {
  transition: .3s cubic-bezier(0.5, 1, 0.89, 1);
}

.hoverTypeB:hover {
  color: #787AB0;
  -webkit-transition: all .5s;
  transition: all .5s;
}


.hoverTypeB .IconDesign:hover {
  transform: scale(1.1);
  -webkit-transition: all .5s;
  transition: all .5s;
}

.hoverTypeC {
  --color: #0054B8;
  position: relative;
  overflow: hidden;
  transition: color .5s;
  z-index: 1;
}
 
 .hoverTypeC:before {
  content: "";
  position: absolute;
  z-index: -1;
  background: var(--color);
  width: 500px;
  height: 400px;

 }
 
 .hoverTypeC:hover {
  color: #fff;
 }
 
 .hoverTypeC:before {
  top: 100%;
  Left: 0%;
  transition: all .8s;
}
 
 .hoverTypeC:hover:before {
  top: -40%;
 }
 
 .hoverTypeC:active:before {
  background: #3a0ca3;
  transition: background 0s;
 }


.hoverTypeD {
  border: 1px solid#ececec;
  box-shadow: 5px 5px 10px #eee;
  transition: 0.3s ease-in-out;
}

.hoverTypeD {
  display: inline-block;
  position: relative;
  transition: 0.3s ease all;
  z-index: 1;
 }
 
 .hoverTypeD:before {
  transition: 0.5s all ease;
  position: absolute;
  top: 0;
  left: 50%;
  right: 50%;
  bottom: 0;
  opacity: 0;
  content: '';
  background-color: #0054B8;
  z-index: -1;
  border-radius: 30px;
 }
 
 .hoverTypeD:hover, .hoverTypeD:focus {
  color: white;
 }
 
 .hoverTypeD:hover:before, .hoverTypeD:focus:before {
  transition: 0.5s all ease;
  left: 0;
  right: 0;
  opacity: 1;
 }
 
.hoverTypeD:active {
  transform: scale(0.9);
}


/*-------------------------------
ヘッダー（Front用）
---------------------------------*/
.FrontHeader .site-title-wrap a {
    width: 50%;
    display: inline-block;
}



/*---------------------------------------------------------
  Chapter02 : 検索ボックス（Front用）
---------------------------------------------------------*/
#FrontSearchArea {
    padding: 30px;
    background: #DCEAF7;
}

.FrontSearchInner {
    max-width: 700px;
    margin: 0 auto;
}

.SearchLayout {
  margin: 0 auto;
  padding: 3% 0;
}

.FrontsearchBox {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-align: stretch;
  align-items: stretch;
  width: 100%;
  height: 80px;
}

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

.FrontSearchText {
  margin: 0 0 2%;
  font-size: 30px;
  font-weight: 600;
  text-align: center;
  color: #0054B8;
}


/*---------------------------------------------------------
  Chapter03 : カテゴリー一覧
---------------------------------------------------------*/

.FrontContentsList {
    column-count: 2;
    column-gap: 20px;
    margin: 0;
}

.FrontContentsList li {
    margin: 0 0 0 20px;
    padding: 0;
    page-break-inside: avoid;
    break-inside: avoid;
    font-size: 16px;
}



/* メニューアイコン設定
 -----------------------------------------*/
.FrontMenuDashboard, .FrontMenuAccount, .FrontMenuInspection, .FrontMenuPayment, .FrontMenuRakugo, .FrontMenuNews, .FrontMenuBanner,  .FrontMenuChat, .FrontMenuMaster, .FrontMenuAccountManagement {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: stretch;
    align-items: stretch;
    width: 100%;
    gap: 0.3em;
    margin: 0 0 10px 0;
}

.FrontMenuDashboard a, .FrontMenuAccount a, .FrontMenuInspection a, .FrontMenuPayment a, .FrontMenuRakugo a, .FrontMenuNews a, .FrontMenuBanner a, .FrontMenuMaster a, .FrontMenuAccountManagement a, .FrontMenuChat a {
 color: #333;
}

/* ダッシュボード */
.FrontMenuDashboard:before {
  font-family: "Material Icons";
  content: "\e871";
  padding: 0;
  font-size: 35px;
  line-height: 1;
}

/* 会員管理 */
.FrontMenuAccount:before {
  font-family: "Material Icons";
  content: "\e8d3";
  padding: 0;
  font-size: 35px;
  line-height: 1;
}

/* 支払・請求 */
.FrontMenuPayment:before {
  font-family: "Material Icons";
  content: "\e53e";
  padding: 0;
  font-size: 35px;
  line-height: 1;
}

/* 検査管理 */
.FrontMenuInspection:before {
  font-family: "Material Icons";
  content: "\ebed";
  padding: 0;
  font-size: 35px;
  line-height: 1;
}

/* オリジナル落語動画 */
.FrontMenuRakugo:before {
  font-family: "Material Icons";
  content: "\f06a";
  padding: 0;
  font-size: 35px;
  line-height: 1;
}

/* お知らせ */
.FrontMenuNews:before {
  font-family: "Material Icons";
  content: "\e88e";
  padding: 0;
  font-size: 35px;
  line-height: 1;
}

/* バナー */
.FrontMenuBanner:before {
  font-family: "Material Icons";
  content: "\e3f4";
  padding: 0;
  font-size: 35px;
  line-height: 1;
}

/* チャット */
.FrontMenuChat:before {
  font-family: "Material Icons";
  content: "\e625";
  padding: 0;
  font-size: 35px;
  line-height: 1;
}

/* マスタ管理 */
.FrontMenuMaster:before {
  font-family: "Material Icons";
  content: "\e8b8";
  padding: 0;
  font-size: 35px;
  line-height: 1;
}

/* アカウント管理 */
.FrontMenuAccountManagement:before {
  font-family: "Material Icons";
  content: "\e853";
  padding: 0;
  font-size: 35px;
  line-height: 1;
}


/*---------------------------------------------------------
  Chapter04 : お知らせ一覧エリア
---------------------------------------------------------*/

#FrontNewsArea {
  margin: 0 0 100px 0;
}

.FrontNewsBox {
  margin: 2% 0 0;
}

/* お知らせタイトル */
.FrontNewsTitleBox {
  display: flex;
  align-items: center;
  position: relative;
  padding: 0 0 1%;
  border-color: #0054B8;
}

.FrontNewsTitleBox:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background-image: -webkit-gradient(linear, left top, right top, from(#0054B8), to(#ffffff00));
  background-image: -webkit-linear-gradient(left, #0054B8 0%, #ffffff00 98%);
  background-image: linear-gradient(to right, #0054B8 0%, #ffffff00 98%);
}

.FrontNewsTitle {
  margin: 0;
  font-size: 25px;
  font-weight: 600;
  line-height: 1.5;
  text-align: left;
  color: #0054B8;
}

/* お知らせリスト */
.FrontNewslist {
  width: 100%;
  margin: 2% 0 0;
}

/* 過去の一覧テキストリンク */
.FrontNewsTextLink {
  margin: 0 0 0 auto;
}

.FrontNewsTextLink a{
  font-size: 20px;
  font-weight: 600;
  color: #0054B8;
}

.FrontNewsTextLink a:hover{
  font-size: 20px;
  font-weight: 600;
  color: #0054B8;
}

/* ボタン */
.FrontNewsBox .FrontNewsBtn{
  width: 50%;
  margin: 5% auto;
}

.FrontNewsBox .FrontNewsBtn a{
 padding: 2%;
}


/*---------------------------------------------------------
  Chapter05 : よくある質問エリア
---------------------------------------------------------*/

.FrontFaqArea {

}

/* アコーディオン */
.FrontFaqArea .AccordionFaq {
  width: 100%;
  margin: 2% auto 1%;
  padding: 2% 2%;
  border-radius: 15px;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  background: #fff;
  box-shadow: 5px 5px 5px rgb(0 0 0/13%);
  transition: all .3s ease-out;
}


/* ボタン */
.FrontFaqArea .FrontFaq{
  width: 50%;
  margin: 5% auto;
}

.FrontFaqArea .FrontFaq a{
 padding: 2%;
}



.AccordionFaq.is-open .AccordionFaq_head {
  cursor: pointer;
  background: #e0f7ff;
}

.FrontFaqArea .AccordionFaq {
  width: 100%;
  margin: 2% auto 1%;
  padding: 2% 2%;
  border-radius: 15px;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  background: #fff;
  box-shadow: 5px 5px 5px rgb(0 0 0/13%);
  transition: all .3s ease-out;
}

.FrontFaqArea .AccordionFaqTitle::after,
.FrontFaqArea .AccordionFaqTitle::before {
  content: "";
  position: absolute;
  top: 0%;
  right: 1%;
  width: 6px;
  height: 2em;
  background-color: #0054B8;
  transition: all 0.3s;
}

/*---------------------------------------------------------
  Chapter06 : CTA
---------------------------------------------------------*/

.InformationContactLogo img {
  width: 100%;
  margin: 0 auto;
}

.InformationContactMainTitleBox {
  width: 100%;
  margin: 5% 0 0;
}

.CtaTypeA_Box {
  width: 87%;
  margin: 10% auto;
  border: 1px solid #0054B8;
  border-radius: 15px;
  background: #fff;
}

/* 帯タイトル */
.CtaTypeA_Box .CtaTypeATitle {
  padding: 1% 0;
  font-size: 40px;
  text-align: center;
  color: #fff;
  font-weight: 700;
  border-radius: 15px 15px 0 0;
  letter-spacing: .05em;
  background: #0054B8;
}

.CtaTypeATitle {
  width: 100%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  font-size: 40px;
  text-align: center;
  color: #0054B8;
}

/* スラッシュ記号 */
.CtaTypeATitle::after,.CtaTypeATitle::before {
  content: "";
  height: 3px;
  width: 50px;
  border-radius: 5px;
  background-color: #fff
}

.CtaTypeATitle::before {
  margin-right: 10px;
  transform: rotate(60deg)
}

.CtaTypeATitle::after {
  margin-left: 10px;
  transform: rotate(-60deg)
}

/* 連絡先名 */
.CtaTypeA_Name {
  margin: 3% 0;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
}

/* 連絡先リンク */
.CtaTypeA_ContactBox {
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding: 3%;
  background: #FFF5E6;
}

/* 電話番号エリア */
.CtaTypeA_TelItem {
  display: flex;
  flex-direction: column;
  width: 48%;
}

.CtaTypeA_TelTitle {
  font-size: 28px;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
}

.CtaTypeA_Tel {
  width: 100%;
}

.CtaTypeA_Tel a {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 50px;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  color: #0054B8;
}

.CtaTypeA_Tel a::before{
  display: inline-block;
  margin: 0 1% 0 0;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f2a0";
  font-size: 55px;
  line-height: 1.5;
  color: #0054B8;
  transform: rotate(-35deg);
}


/* メールエリア */
.CtaTypeA_MailItem {
  display: flex;
  flex-direction: column;
  width: 48%;
}

.CtaTypeA_MailTitle {
  font-size: 28px;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
}

.CtaTypeA_Mail {
  width: 100%;
  text-align: center;
}

.CtaTypeA_Mail a {
  display: block;
  width: 80%;
  margin: 3% auto;
  padding: 4% 0;
  font-size: 22px;
  color: #fff;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  border-radius: 10px;
  background: #0054B8;
}


/* 受付エリア */
.InformationContactTimeBox {
  width: 80%;
  margin: 2% auto;
  text-align: center;
}

.InformationContactTimeTitle {
  font-size: 35px;
  color: #0054B8;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}

.InformationContactTimeText {
  font-size: 30px;
  font-weight: 500;
  color: #333;
  line-height: 1.5;
  text-align: center;
}




/*---------------------------------------------------------
  横幅の広いデスクトップのレイアウトの指定：1381px〜
---------------------------------------------------------*/
@media screen and (min-width:1501px) {





} /* 1381px〜 END */







/*---------------------------------------------------------
  通常のデスクトップのレイアウトの指定：〜1380px
---------------------------------------------------------*/
@media screen and (max-width: 1380px) {



  /* レイアウト　：　〜1280px
  -----------------------------------------*/
  .FrontLayout { width: 100%; }



} /* 〜1280px END */



/*---------------------------------------------------------
  Chapter99_02 : タブレット（〜1024px）
---------------------------------------------------------*/
@media screen and (max-width: 1024px) {


  /*---------- レイアウト ; 〜1024px  ----------*/
  .FrontLayout { width: 100%; }

  
  /*---------- お知らせ ; 〜1024px  ----------*/



  /*---------- カテゴリーボックス ; 〜1024px  ----------*/

  


} /* 〜1024px END */






/*---------------------------------------------------------
  Chapter99_03 : スマホ（〜768px）
---------------------------------------------------------*/
@media screen and (max-width: 768px) {



  /*---------- レイアウト ：〜768px  ----------*/
  .FrontLayout { width: 100%; padding: 30px 20px 10px;}
  .FrontLayoutBox { flex-direction: column; margin: 0;}
  .FrontSettingBox { margin: 0px 0 50px; }
  .FrontLayoutItem { width: 100%; margin: 3% 0px; padding: 20px; }
  .FrontDoubleLayout { flex-direction: column; }
  .FrontSettingtDoubleBox { width: 100%; margin: 0 0 10%; }


  /*---------- ヘッダー ：〜768px  ----------*/
  .FrontHeader .site-title-wrap a { width: 80%; }
  .FrontSearchInner { max-width: 100%; }


  /*---------- 検索エリア ：〜768px  ----------*/
  #FrontSearchArea { padding: 10px 10px 30px; }
  .FrontsearchBox { padding: 0 5%; height: 60px; }
  .FrontSearchText { font-size: 1.5rem; }
  #searchbutton { top: -15%; left: 30px; }


  /*---------- カテゴリーエリア ：〜768px  ----------*/
  .FrontCategoryArea .wp-block-heading.is-style-TypeL { font-size: 25px; }
  .FrontLayout .is-style-TypeL { width: 100%; font-size: 1.5rem; margin: 5% 0 0; padding: 10px; }
  .FrontLayout .is-style-TypeL { padding: 10px;}
  .FrontCategoryArea .wp-block-heading.is-style-default { font-size: 20px; }


  /*---------- お知らせエリア ：〜768px  ----------*/
  .FrontNewsArea {  padding: 0;}

  .FrontNewsBox { width: 100%; position: unset; display: flex; align-items: center; flex-direction: column; padding: 0;}
  .FrontNewsTitleBox { width: 100%; gap: 3em; }
  .FrontNewslist { width: 100%; margin: 5% 0; }
  .FrontNewsItem { padding: 8px 0; }
  .FrontNewsItem:first-child { padding: 0 0 8px 0; }
  .FrontNewsTitle { margin: 0; font-size: 25px; }
  .FrontNewsButton { margin: 6% 0px; padding: 2px 35px; font-size: 12px;}
  .FrontNewsBox .FrontNewsBtn { width: 100%; margin: 8% auto; }
  .FrontNewsBox .FrontNewsBtn a { padding: 4%; font-size: 1rem; }


  /*---------- よくある質問エリア ：〜768px  ----------*/
  .FrontFaqArea .AccordionFaq { margin: 4% auto 1%; padding: 5%; }
  .FrontFaqArea .FrontNewsList { width: 100%;}
  .FrontFaqArea .FrontFaq { width: 100%; margin: 8% auto; }
  .FrontFaqArea .FrontFaq a { padding: 4%; font-size: 1rem; }
  .FrontFaqArea .AccordionFaqTitle::after, .FrontFaqArea .AccordionFaqTitle::before { top: 30%; right: 1%; width: 5px; height: 1.5em; }

  /* リスト */
  #accordion .wp-block-list { margin: 15px 10px;}



} /* 〜768px END */



/*---------------------------------------------------------
  Chapter99_04 : スマホ（〜480px）
---------------------------------------------------------*/
@media screen and (max-width: 480px) {


  /*---------- ヘッダー ：〜768px  ----------*/
  .HeaderInner {
    width: 100%;

}
  .FrontHeader .site-title-wrap a { width: 100%; }


  
} /* 480px END */