@charset "utf-8";

:root {
   /* サイズ設定 */
   --head_height: 0px;
   --site_height: 35px;
   --menu_height: 60px;
   --mobt_height: 0px;
   --foot_height: 100px;
   --tool_offset: 0px;

   /* カラー設定 */
   --item_bd: gray;
   --foot_bg: #303030;
   --foot_fg: silver;
}
.view {
   width: 100%;
   max-width: 1000px;
   margin-left: auto;
   margin-right: auto;
   text-align: left;
}
#head {
   position: fixed;
   top: var(--tool_offset);
   width: 100%;
   height: var(--head_height);
   z-index: 80;
   /* ヘッダの色はBODYで設定する */
}
#fixd {
   position: fixed;
   top: calc(var(--tool_offset) + var(--head_height));
   width: 100%;
   height: auto;
   background-color: var(--menu_bg);
   z-index: 75;
}
.home#mobile_title {
   display: none !important;
}
#mobile_title {
   display: none;
   width: 100%;
   height: calc(var(--mobt_height) - 20px);
   background-color: var(--mobi_bg);
   color: white;
   padding-top: 10px;
   padding-bottom: 10px;
   font-size: 2rem;
   text-align: center;
   text-shadow:  2px  2px 5px gainsboro ,
   -2px  2px 7px gainsboro ,
    2px -2px 7px gainsboro ,
   -2px -2px 7px gainsboro;
}
#main {
   width: 100%;
   padding-top: calc(var(--tool_offset) + var(--head_height) + var(--site_height) + var(--menu_height) + var(--mobt_height));
   min-height: calc(100vh - var(--tool_offset) - var(--head_height) - var(--site_height) - var(--menu_height) - var(--mobt_height) - var(--foot_height));
   background-image: url(/img/back.png);
	background-size: cover;
   background-repeat:  no-repeat;
   /* background-color:rgba(250,250,255,0.9); */
   /* background-blend-mode:lighten; */
   background-position: 50% 50%;
   z-index: 30;
}
#content {
   margin-left: 15px;
   margin-right: 15px;
   padding-top: 15px;
   padding-bottom: 15px;
}
.home#content {
   display: none;
}

#foot {
   height: var(--foot_height);
   color: var(--foot_fg);
   background-color: var(--foot_bg);
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: center;
}

#snslist {
   padding-top: 10px;
   text-align: center;
   width: 100%;
}

/* タイトル設定 */
a.no-color-change:link,
a.no-color-change:visited,
a.no-color-change:hover,
a.no-color-change:active {
  color: var(--menu_fg);
  text-decoration: none;
}
#title {
   height: var(--site_height);
   margin-left: 10px;
   text-align: left;
}
.title1 {
   font-family: 'Notable';
   font-size: 1.7rem;
   color: var(--head_fg);
   letter-spacing: 0.02em;
}

/* スライダー設定 */
#top_slider img {
   width: 100%;
   height: calc(100vh - var(--tool_offset) - var(--head_height) - var(--site_height) - var(--menu_height) - var(--foot_height));
   object-fit: cover;
   object-position: 50% 35%;
   object-position: 50% 15%;
}

/* SNSアイコンサイズ */
.icon {
   margin-top: 10px;
   margin-left: 7px;
   margin-right: 7px;
   width: 32px;
}
#copyright {
   width: 100%;
   font-family: 'Roboto', sans-serif;
}

/* BLOG ページネーション BOX */
#pagination > li {
   display: inline-block;
   width: 30px;
   height: 30px;
   margin-right: 2px;
   line-height: 30px;
   text-align: center;
   border: solid 1px dimgray;
   background-color: #f8f8ff;
}
#pagination > li > a {
   display: inline-block;
   width: 100%;
   height: 100%;
   text-decoration: none;
   color: var(--body_fg);
}
#pagination > .current {
   color: var(--body_bg);
   background-color: var(--body_fg);
}
#pagination > .disabled {
   color: silver;
   border-color: silver;
}
#pagination_box > a > div > span {
   width: calc(100% - 5em);
   padding-left: 5em;
   text-indent: -5em;
}
/* BLOG ページネーション BAR */
.pagination_bar {
   display: inline-block;
   margin-top: 10px;
   padding: 3px 10px 2px 10px;
   border: solid 1px dimgray;
   background-color: #f8f8ff;
   text-decoration: none;
   font-size: 0.95rem;
   color: var(--body_fg);
}
.pagination_bar:hover {
   color: var(--body_bg);
   background-color: var(--body_fg);
}

/* メールプラグイン */
.auth-captcha-image {
   display: block;
   border: solid 1px lightgray;
   margin-bottom: 10px;
}
#MailMessageAuthCaptcha {
   margin-bottom: 5px;
   border-radius: 3px;
}
.submit {
   margin-top: 10px;
}
.alert-message {
   color: red;
}
.error-message {
   font-size: 0.8rem;
   color: red;
}

/* レスポンシブ：横幅が狭いとき */
@media screen and (max-width: 800px) {
   :root {
      /* サイズ設定 */
      --head_height: 0px;
      --site_height: 0px;
      --menu_height: 50px;
      --mobt_height: 60px;
      --foot_height: 80px;
   }
   html {
      font-size: 14px;
   }
   #menu_items {
      font-size: 1.3rem;
   }
   #mobile_title {
      display: block;
   }
   #main {
      padding-top: calc(var(--tool_offset) + var(--menu_height) + var(--mobt_height));
   }
   #fixd {
      background-color: initial;
   }
   .home#main {
      padding-top: calc(var(--tool_offset) + var(--menu_height));
      background-color: black;
      background-image: none;
   }
   #top_slider {
      padding-top: -60px;
   }
   #content {
      margin-left: 0px;
      margin-right: 0px;
      padding-top: 0px;
      padding-bottom: 0px;
   }
   /* タイトル位置切替 */
   #title {
      display: none;
   }
   .title1 {
      margin-top: 15px;
      font-size: 1.9rem;
   }
   #snslist {
      padding-top: 3px;
   }
   #copyright {
      padding-top: 0px;
      font-size: 0.5rem;
   }
}