@charset "UTF-8";

*,
*::before,
*::after {box-sizing: border-box;}

html {font-size: 62.5%;}

body {
   margin:0;
   height:100%;
   background:#fff;
   color:#333;
   font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
   font-feature-settings: "palt";
   letter-spacing: 0.05em;
   overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {margin:0;}

.mdc-top-app-bar {
   /* background-color: #797979; */
   /* background-color: var(--mdc-theme-primary, #797979); */
   color: #fff;
   display: -ms-flexbox;
   display: flex;
   position: fixed;
   -ms-flex-direction: column;
   flex-direction: column;
   -ms-flex-pack: justify;
   justify-content: space-between;
   box-sizing: border-box;
   width: 100%;
   z-index: 4;
}

.c-top-app-bar {
   top: 0;
   color: #333;
   background: #fff;
   box-shadow: none;
}

.mdc-top-app-bar__row {
   display: -ms-flexbox;
   display: flex;
   position: relative;
   box-sizing: border-box;
   width: 100%;
   height: 64px;
}

.c-top-app-bar .c-top-app-bar__row {
   height: auto;
   z-index: 2;
}

.b-header {
   width: 100%;
   max-width: 100%;
   margin: 0 auto;
   padding-left: 20px;
   padding-right: 20px;
   box-sizing: border-box;
   padding-top: 30px;
   /* padding-bottom: 30px; */
   display: -ms-flexbox;
   display: flex;
   -ms-flex-align: center;
   /* align-items: center; */
   position: relative;
}

.b-header {
   height: 100px;
   align-items: flex-end;
   padding-bottom: 10px;
}

section {
   max-width: 1310px;
   width: 100%;
   margin: 150px auto 0;
   padding: 0 15px;
}

.top_end_pc {display: block;}   
.top_end_sp {display: none;}   

.top_end_message_container {
   width: 100%;
   margin: 0 auto;
   border: solid 2px #f00;
}

.top_end_messagebox {
   margin: 0 auto;
   padding: 2em;
   font-size: 2em;
   line-height: 1.6;
   text-align: center;
   color: #333;
}

.ci {
   width: 60px;
   height: 100px;
   background: url(../images/ci.png) no-repeat center center / contain;
   position: absolute;
   top: 0;
   left: 50%;
   transform: translate(-50%, 0);
}

.ci > a {
   display: block;
   width: 100%;
   height: 100%;
}

/* スマホ版 */
@media screen and (max-width:599px) {
   .b-header {height: 70px;}

   section {
      margin: 60px auto 0;
      padding: 0 15px;
   }

   .top_end_pc {display: none;}   
   .top_end_sp {display: block;} 

   .top_end_message_container {margin: 10em auto 0 auto;}

   .top_end_messagebox {
      margin: 0 auto;
      padding: 2em;
      font-size: 1.8em;
      text-align: left;
   }

   .ci {
      width: 45px;
      height: 60px;
   }
}

@media screen and (max-width: 479px) {
   body {
      font-size: 1rem;
      line-height: 1.5;
      letter-spacing: .025em;
   }
   
   .b-header {
      padding-top: 4px;
      padding-left: 16px;
      padding-right: 16px;
   }
}