@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1:wght@100;200;300;400;500;600;700;800;900&family=Noto+Sans+JP:wght@100;300;400;500;700;900&family=Sawarabi+Gothic&display=swap');
*,*::after,*::before{
  margin:0;
  padding:0;
  box-sizing: border-box;
  font-family: 'M PLUS 1', sans-serif;
  font-family: 'Noto Sans JP', sans-serif;
  font-family: 'Sawarabi Gothic', sans-serif;
}
body{
  max-width:775px;
  margin:15px auto;
}
.logo{
  width:300px;
}
.flex-container {
    /* We first create a flex layout context */
    display: flex;
    
    /* Then we define the flow direction 
       and if we allow the items to wrap 
     * Remember this is the same as:
     * flex-direction: row;
     * flex-wrap: wrap;
     */
    flex-flow: row wrap;
    
    /* Then we define how is distributed the remaining space */
    justify-content: space-around;
    
    padding: 0;
    margin: 0 13px;
    list-style: none;
    column-gap:15px;
  }
  .flex-item-top{
    background: #00adff;
    padding: 5px;
    width:100%;
    /* max-width: 260px; */
    min-height: 80px;
    margin-top: 10px;
    flex:1 0 300px;
    letter-spacing:4px;
    border:2px solid aliceblue;
  }
  .flex-item-top a{ 
    display:flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
  }
  .flex-item {
    background: #00adff;
    padding: 5px;
    width:100%;
    /* max-width: 260px; */
    height: 162px;
    margin-top: 10px;
    flex:1 0 150px;
    
  }
  .orange{
    background:#db2488;
  }
  .flex-item a{
    text-decoration:none;
    height:100%;
    width:100%;
    display:block;
    line-height: 20px;
    color: white;
    font-size: 1.2em;
    text-align: center;
    display:flex;
    flex-direction:column;
    justify-content: space-evenly;
    align-items:center;
  }

  .fa::before{
    
    font-family: "FontAwesome"!important;
  }
  .iconSVG{
    width:76px;
  }

.desc{
  font-size:13px;
}
.desc_2{
  font-size:9px;
}
  /* colorbox */
  #cboxOverlay {
    background: #000;
  }
  #cboxLoadedContent {
    background: #fff;
  }
  #cboxLoadedContent {
    padding: 0;
    overflow: auto;
    -moz-box-shadow: 0px 1px 10px #000000;
    -webkit-box-shadow: 0px 1px 10px #000000;
    box-shadow: 0px 1px 10px #000000;
  }
  #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose , #cboxTitle {
    top: -30px;
  }
  #colorbox, #cboxOverlay, #cboxWrapper {
    overflow: visible ;
  }
  #cboxTitle {
    color: #fff;
  }
  #inline-content {/* インラインを使用する時のみ */
    margin: 20px;
  }
  #ajax-wrap {/* ajaxを使用する時のみ */
    margin: 20px;
  }


  /* modal */
  .modal{
    position:fixed;
    top:inherit;
    bottom:0;
    height:inherit;
    max-height:100%;
    overflow-y:scroll;
  }

.piction{
  width:36px;
  position:relative;
  top:20px;
}