@charset "utf-8";


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

.FrontLayout {
  position: relative;
  width: 1200px;
  margin: 0 auto;
  padding: 80px 0 120px;
}

.FrontLayoutBox {
  display: flex;
  justify-content: space-between;
  margin: 30px 0;
}

.FrontSettingBox {
  margin: 50px 0 120px;
}

.FrontLayoutItem {
  width: 370px;
  padding: 20px 45px;
  border-radius: 30px;
  color: #1D227B;
  box-shadow: 0px 2px 10px #ccc;
  transition: all 300ms ease-out;
  background: #fff;
}

.FrontLayoutItem a{
  width: 100%;
  color: #1E227B;
}

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

.FrontItemTitle:before,
.FrontItemTitle:after {
  border-top: 4px solid #1E227B;
  content: "";
  width: 5%; 
}

.FrontItemTitle:before {
  margin-right: 15px; 
}

.FrontItemTitle:after {
  margin-left: 15px; 
}


/* サブタイトル */
.FrontItemSubTitle {
  padding: 15px 0;
  font-size: 20px;
  line-height: 1.5;
  text-align: center;
}

/* カテゴリータイトル */
.FrontItemCategory {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 15px 0;
  font-size: 30px;
  line-height: 1.5;
  text-align: center;

  color: #fff;
  border-radius: 10px;
  background: #1E227B;
}



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

/* テキスト */
.FrontItemText {
  height: 65px;
  font-size: 15px;
  line-height: 1.5;
}

/* マテリアルアイコン */
.IconDesign {
  width: 80px;
  height: 80px;
  padding: 10px;
  text-align: center;
  border-radius: 90%;
  background: #1E227B;
  transition: 0.9s ease-out;
}

.IconDesign>span{
  font-size: 50px;
  line-height: 1.2;
  color: #fff;
}



/* 下からバー出現
-----------------------------------------*/
.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: #1E227B;
  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: #1E227B;
  box-shadow: 0 4px 18px 0 rgba(0, 0, 0, 0.25);
 }
 
 .FrontLayoutItem2:hover .card-button {
  transform: translate(-50%, 50%);
  opacity: 1;
 }



/* 下からバー出現
-----------------------------------------*/
.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: #1E227B;
  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: #1E227B;
  box-shadow: 0 4px 18px 0 rgba(0, 0, 0, 0.25);
 }

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










/* 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: #1D227B;
}


/* 拡大 */
.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: #1D227B;
  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: #1D227B;
  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用）
---------------------------------------------------------*/
#FrontSearchArea {
    margin: 0 0 4% 0;
    padding: 0 0 4%;
}

.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;
}

#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;
}


/*---------------------------------------------------------
 キーワードエリア
---------------------------------------------------------*/
.FrontKeywordArea {
  margin: 30px 0 0 0;
}

ul.FrontKeywordBox {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.FrontKeywordBox li {
  margin: 0 15px 15px 0;
}

.FrontKeywordBox li a{
    display: flex;
    align-items: center;
    padding: 5px 35px;
    font-size: 15px;
    color: #fff;
    border-radius: 50px;
    background: #1E227B;
}

.FrontKeywordBox li a:hover{
  color: #fff;
  background: #787AB0;
  opacity: .8;
  transition: all 0.5s 0s ease;
}





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

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

.FrontNewsBox {
  width: 100%;
  position: absolute;
  display: flex;
  align-items: center;
  padding: 30px;
  border-radius: 30px;
  box-shadow: 0 8px 5px rgb(0 0 0 / 13%);
  transition: all 300ms ease-out;
  background: #fff;
}

.FrontNewsTitle {
  margin: 0 40px;
  font-size: 20px;
  font-weight: 600;
  color: #1E227B;
}

.FrontNewslist {
  width: 64%;
  margin: 0 4% 0 0;
}

.FrontNewsButton {
  padding: 10px 50px;
  font-size: 15px;
  color: #fff;
  border-radius: 50px;
  background: #1E227B;
}

.FrontNewsButton {
  display: flex;
  align-items: center;
  padding: 5px 35px;
  font-size: 15px;
  color: #fff;
  border-radius: 50px;
  background: #1E227B;
}

.FrontNewsButton:after {
  font-family: "Material Icons";
  content: "\e409";
  padding: 5px 0 0 5px;
  font-size: 25px;
  line-height: 1.2;
}

.FrontNewsButton:hover {
  color: #fff;
  background: #A5A7CA;
}




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





} /* 〜1501px END */







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



  /* レイアウト　：　〜1280px
  -----------------------------------------*/
  .FrontLayout { width: 100%; padding: 80px 4% 120px; }
  .site-title-wrap { width: 25%; padding: 0 1% 0 20px; }
  #header-nav-wrap { padding: 0 3% 0 0;}
  ul#menu-main_menu>li>a { font-size: 12px;}
  .HeaderSearchBox { width: 75%; padding: 0 2% 0 0; }


  /* キーワード */
  .FrontKeywordBox li a { padding: 5px 20px;}


  /* お知らせ */
  .FrontNewsBox { width: 92%; }
  .FrontNewsTitle { margin: 0 15px; }
  .NewsItem>p { font-size: 13px; }
  .FrontNewsButton { padding: 8px 20px; font-size: 13px; }
  .FrontNewsButton:after { padding: 0 0 0 5px; font-size: 22px; }



   /* お知らせ */
  .FrontLayoutBox>a { width: 100%; margin: 0 2% 0 0; }
  .FrontLayoutItem { width: 100%; padding: 20px 20px; }
  .FrontItemText { font-size: 14px;}



} /* 〜1280px END */




/*---------------------------------------------------------
  タブレット向けのレイアウトの指定：〜959px
---------------------------------------------------------*/
@media screen and (min-width:601px) and ( max-width:960px) {



  /*---------- レイアウト ; 〜959px  ----------*/
  .FrontLayout { width: 100%; padding: 80px 5% 120px;}
  .FrontLayoutItem { width: 29vw; padding: 10px;}
  .FrontSettingBox { margin: 50px 0 0; }
  
  
   /*---------- お知らせ ; 〜959px  ----------*/
  .FrontNewsBox { width: 90%; justify-content: space-around; padding: 20px; }
  .FrontNewsTitle { margin: 0; font-size: 18px; }
  .FrontNewslist { width: 45%; }
  .FrontNewsButton { padding: 0px 15px; font-size: 13px;}


   /*---------- カテゴリーボックス ; 〜959px  ----------*/
   .FrontItemCategory { font-size: 25px;}
   .FrontItemSubTitle { font-size: 16px;}
   .FrontItemText { font-size: 12px;}
  


} /* 〜959px END */






/*---------------------------------------------------------
  スマートフォン用の指定：320px 〜 600px
---------------------------------------------------------*/
@media screen and (min-width:320px) and ( max-width:600px) {



  /*---------- レイアウト ：〜600px  ----------*/
  .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; }


  /*---------- 検索エリア ：〜600px  ----------*/
  .FrontsearchBox { height: 60px; }
  #searchbutton { top: -10%; font-size: 20px; }
  .FrontSearchText { font-size: 15px; }


  /*---------- キーワードエリア ：〜600px  ----------*/
  .FrontKeywordBox li { margin: 0 10px 10px 0; }
  .FrontKeywordBox li a { padding: 5px 35px; font-size: 10px; }


  /*---------- タイトル ：〜600px  ----------*/
  .FrontItemTitle { font-size: 30px;}
  .FrontItemCategory>span { font-size: 30px; }


  /*---------- お知らせエリア ：〜600px  ----------*/
  .FrontNewsBox { width: 100%; position: unset; display: flex; align-items: center; flex-direction: column; padding: 15px; }
  .FrontNewslist { width: 95%; margin: 0; }
  .FrontNewsItem { padding: 8px 0; }
  .FrontNewsItem:first-child { padding: 0 0 8px 0; }
  .FrontNewsTitle { margin: 5% 0; font-size: 25px; }
  .FrontNewsButton { margin: 6% 0px; padding: 2px 35px; font-size: 12px;}





  /*---------- 初期設定エリア ：〜600px  ----------*/
  .FrontItemCategory { margin: 0 0 5%; padding: 8px 0; font-size: 18px; }
  .IconDesign { width: 70px; height: 70px; }
  .IconDesign>span { font-size: 45px;}
  .FrontItemSubTitle { padding: 10px 0; font-size: 18px; }
  .FrontItemText { height: auto; font-size: 12px; }





  
} /* 〜600px END */





/*---------------------------------------------------------
  iPhone SE用：320px 〜 350px
---------------------------------------------------------*/
@media screen and (min-width:320px) and ( max-width:350px) {


  
  
  } /* 〜350px END */