/*#################################
	import
#################################*/
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@900&display=swap');

/*#################################
	スムーススクロール
#################################*/
html {
  scroll-behavior: smooth;
}

/*#################################
	スクロールダウン
#################################*/
/*Scrollテキストの全体の描写*/
.scrolldown1{
    /*描画位置※位置は適宜調整してください*/
    position:absolute;
    left:50%;
    bottom:2%;
    /*全体の高さ*/
    height:50px;
}

/*Scrollテキストの描写*/
.scrolldown1 a{
    /*描画位置*/
	position: absolute;
	left:-30px;
	top: -30px;
    /*テキストの形状*/
	font-size: 1.5rem;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5); /* ドロップシャドウ */
	letter-spacing: 0.05em;
    text-decoration: none;
}

.scrolldown-white a{
	color: white;
}

.scrolldown-black a{
	color: black;
}

/* 線の描写 */
.scrolldown1::after{
	content: "";
    /*描画位置*/
	position: absolute;
	top: 0;
    /*線の形状*/
	width: 2px;
	height: 60px;
    /*線の動き1.4秒かけて動く。永遠にループ*/
	animation: pathmove 1.4s ease-in-out infinite;
	opacity:0;
}
.scrolldown-white::after{
	background-color: white;
}

.scrolldown-black::after{
	background-color: black;
}

/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove{
	0%{
		height:0;
		top:0;
		opacity: 0;
	}
	30%{
		height:30px;
		opacity: 1;
	}
	100%{
		height:0;
		top:50px;
		opacity: 0;
	}
}

/*#################################
	ヘッダーメニュー
#################################*/
.tw-nav-bar {
  font-size: 1.5rem;

}
.navbar-light .navbar-toggler {
    border-color: white;
}
.navbar .navbar-nav .nav-link {
    color: white;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5); /* ドロップシャドウ */
}

/*#################################
	フォント定義
#################################*/
@font-face {
    font-family: "にくまる";
    src: url("/fonts/font_nikumaru_subset.woff") format("woff");
}
/* @font-face {
    font-family: 'M PLUS Rounded 1c', sans-serif;
    src: url("/fonts/MPLUSRounded1c-Black_subset.woff") format("woff");
} */
body {
    font-family: "Helvetica Neue",
        Arial,
        "Hiragino Kaku Gothic ProN",
        "Hiragino Sans",
        Meiryo,
        sans-serif;
}
.font-nikumaru {
    font-family: "にくまる"; 
}
.font-m-plus-rounded {
    font-family: 'M PLUS Rounded 1c', sans-serif;
    letter-spacing: 1px;
}

/*#################################
	TOP画像
#################################*/
.top-page header h1 {
    color: white;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5); /* ドロップシャドウ */
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    font-size: 7vw; /* 画面の横サイズに応じて文字サイズ可変 */
} @media screen and (min-width:480px) {
    .top-page header h1 {
    }
} @media screen and (min-width:768px) and ( max-width:1024px) {
    .top-page header h1 {
    }
} @media screen and (min-width:1024px) {
    .top-page header h1 {
    }
}

.top-page header h2 {
    color: white;
    font-family: "にくまる"; 
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5); /* ドロップシャドウ */
    position:absolute;
    top:53%;
    left:50%;
    transform:translate(-50%,-50%);
    font-size: 3vw; /* 画面の横サイズに応じて文字サイズ可変 */
} @media screen and (min-width:480px) {
    .top-page header h2 {
        top:55%;
    }
} @media screen and (min-width:768px) and ( max-width:1024px) {
    .top-page header h2 {
        top:58%;
    }
} @media screen and (min-width:1024px) {
    .top-page header h2 {
        top:59%;
    }
}

/* header ウィンドウ幅いっぱい画像 */
#frame-6 header {
    position: relative;
    height: 100vh;
    background: url("/file/2") center / cover;
}


/*#################################
	コンテンツエリア
#################################*/
/* コンテンツエリア ベース */
.contents {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* コンテンツエリア h1 */
h1 {
    font-family: "にくまる"; 
    text-shadow: 2px 2px 1px rgba(0,0,0,0.5); /* ドロップシャドウ */
    text-align: center;
    font-size: 2.5rem;
} @media screen and (min-width:480px) {
    h1 {
        font-size: 2.5rem;
    }
} @media screen and (min-width:768px) and ( max-width:1024px) {
    h1 {
        font-size: 4rem;
    }
} @media screen and (min-width:1024px) {
    h1 {
        font-size: 5rem;
    }
}

/* コンテンツエリア h2 */
h2 {
    font-family: 'M PLUS Rounded 1c', sans-serif;
    letter-spacing: 1px;
    font-size: 1.0rem;
} @media screen and (min-width:480px) {
    h2 {
        font-size: 1.0rem;
    }
} @media screen and (min-width:768px) and ( max-width:1024px) {
    h2 {
        font-size: 1.5rem;
    }
} @media screen and (min-width:1024px) {
    h2 {
        font-size: 1.5rem;
    }
}

/*#################################
	Works(db-plugins)
#################################*/
/* コンテンツ量に応じてボックスサイズが異なる為、元の線を消す */
.databases-card_02 .border {
    border:none !important;
  }
  
  /* flex配下のボックスに線を引く */
  .databases-card_02 .card-body>.row>div {
    border: 1px solid #dee2e6;
  }

/*#################################
	ブログページ
#################################*/
/* header ウィンドウ幅いっぱい画像 */
#frame-23 header {
    position: relative;
    height: 14vh;
    background: url("/file/2") center / cover;
}

/*#################################
	落ちものページ
#################################*/
/* header ウィンドウ幅いっぱい画像 */
#frame-24 header {
    position: relative;
    height: 14vh;
    background: url("/file/2") center / cover;
}

/*#################################
	フォーム
#################################*/
#frame-card-12 {
    font-family: 'M PLUS Rounded 1c', sans-serif;
    letter-spacing: 2px;
}
#frame-card-12 .btn-primary {
    background-color: #eb6100;
    border-color: #eb6100;
    
}

/*#################################
	TOPへ戻るボタン
#################################*/
#page_top{
    width: 90px;
    height: 90px;
    position: fixed;
    right: 0;
    bottom: 0;
    opacity: 0.6;
    z-index: 999999;
  }
  #page_top a{
    position: relative;
    display: block;
    width: 90px;
    height: 90px;
    text-decoration: none;
    color: #eb6100;
  }
  #page_top a::before{
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    content: '\f102';
    font-size: 25px;
    color: #eb6100;
    position: absolute;
    width: 25px;
    height: 25px;
    top: -40px;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    text-align: center;
  }
  #page_top a::after{
  /*  content: 'PAGE TOP';*/
    font-size: 13px;
    color: #fff;
    position: absolute;
    top: 45px;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    text-align: center;
    color: #eb6100;
  }

/*#################################
	ブログ
#################################*/
/* 見出し（h2） */
.plugin-blogs h2 {
  color: #364e96;/*文字色*/
  border: solid 3px #364e96;/*線色*/
  padding: 0.5em;/*文字周りの余白*/
  border-radius: 0.5em;/*角丸*/
}

/* 見出し（h3） */
.plugin-blogs h3 {
  padding: 0.4em 0.5em;/*文字の上下 左右の余白*/
  color: #494949;/*文字色*/
  background: #f4f4f4;/*背景色*/
  border-left: solid 5px #7db4e6;/*左線*/
  border-bottom: solid 3px #d7d7d7;/*下線*/
}

/* 画像（線、影、角丸） */
.plugin-blogs img{
  border:1px solid #aaa;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  border-radius:15px;
}

/* 画像（線、影、角丸） */
.plugin-databases img{
  border:1px solid #aaa;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  border-radius:15px;
}