/*!
Theme Name:takahashi_laboratory
Theme URI:https://megumi.fines-support.jp
Author:takahashi
Description:study
Version: 1.0
*/

@charset "UTF-8";
@import url("layout.css");

/*-----------------------------------
テーマ用CSS設定　自由入力
-----------------------------------*/
a:hover{
	opacity :0.7;
	filter :alpha(opacity=70);
	-ms-filter :"alpha(opacity=70)";
}

.entry-header h2{
	display: none;
}

h2{
	margin-top: 150px;
	text-align: center;
}

body{
  width: 100%;
  font-size: 1.4rem;
  font-weight: 500;
  background-color: #000;
  color: #fff;
	margin: 0;
}

p{
	color: #fff;
}


/*TOPイメージ*/
.big-img{
	width: 100%;
  min-height: 100vh;
	background-position: center top;
  background-size: cover;
	position: relative;
	z-index: 10;
	left: 0;
	top: 0;
	background-image: url(https://megumi.fines-support.jp/wp-content/uploads/2022/08/network-3484139_1920.jpg);
	margin: 0;
}

/*文字アニメ*/

.big-img p{
	margin-left: 8%;
	text-align: center;
  font-size: 3.5rem;
	color: #fff;
	font-weight: bold;
  position: absolute;
	top: 30%;
	right:50%;
	/*文字移動*/
	-webkit-animation: scale-in-hor-left 3s ;
					animation: scale-in-hor-left 3s ;
}
/*TOPイメージ*/


/*画面遷移用*/

/*========= レイアウトのためのCSS ===============*/
.bgextend{
	width: 100%;
	height: 100vh;
	margin:0 20px 0px 0;
	box-sizing:border-box;
}

/*========= 背景色の動きのCSS ===============*/

/*背景色が伸びて出現 共通*/
.bgextend{
	animation-name:bgextendAnimeBase;
	animation-duration:0.5s;
	animation-fill-mode:forwards;
	position: relative;
	overflow: hidden;/*　はみ出た色要素を隠す　*/
	opacity:0;
}
@keyframes bgextendAnimeBase{
  from {
    opacity:0;
  }
	to {
	opacity:1;
}
}

/*中の要素*/
.bgappear{
	animation-name:bgextendAnimeSecond;
	animation-duration:1.5s;
	animation-delay: 0.8s;
	animation-fill-mode:forwards;
	opacity: 0;
	position: relative;
	z-index: 5000;
}

@keyframes bgextendAnimeSecond{
	0% {
	opacity: 0;
	}
	100% {
	opacity: 1;
}
}

.bgLRextend::before{
	display: block;
	position: absolute;
	background-color: #000;
	top: 0;
	left: 0;
	z-index: 99999;
	width: 100%;
	height: 100%;
	animation-name:loading;
	-moz-animation: loading 0s ease-in 5s forwards;
    /* Firefox */
    -webkit-animation: loading 0s ease-in 5s forwards;
    /* Safari and Chrome */
    -o-animation: loading 0s ease-in 5s forwards;
    /* Opera */
    animation: loading 0s ease-in 5s forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@keyframes loading {
	0%{
 opacity: 1;
	  }

	100%{
 opacity: 0;
	  }
	}

.bgLRextend::after{
	display: block;
	animation-name:bgLRextendAnime;
	animation-duration:1.5s;
	animation-fill-mode:forwards;
    content: "";
    position: absolute;
		top: 0;
		left: 0;
		z-index: 99998;
    width: 100%;
    height: 100%;
    background-color: #000;/*伸びる背景色の設定*/
}
@keyframes bgLRextendAnime{
	0% {
		transform-origin:left;
		transform:scaleX(0);
	}
	50% {
		transform-origin:left;
		transform:scaleX(1);
	}
	50.001% {
		transform-origin:right;
	}
	100% {
		transform-origin:right;
		transform:scaleX(0);
	}
}

/*画面遷移用*/


/*--ヘッダーナビ--*/
header{
	display: inline-block;
	background-color: rgba(255, 255, 255,0.3 );
	filter:alpha(opacity=50);
	backdrop-filter: #fff(5px);
	-moz-opacity: 0.5;
	position: fixed;
	z-index: 20;
	top: 0;
	margin: 0;
	width: 100%;
	height: 85px;
	border-bottom: 1.2px solid #fff;
	animation-delay:5s;
	animation-duration:2.2s;
	-webkit-animation: scale-in-hor-left 4.5s ;
	        animation: scale-in-hor-left 4.5s ;
}
@-webkit-keyframes scale-in-hor-left {
  0% {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
    -webkit-transform-origin: 0% 0%;
            transform-origin: 0% 0%;
    opacity: 0;
  }
  100% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
    -webkit-transform-origin: 0% 0%;
            transform-origin: 0% 0%;
    opacity: 1;
  }
}
@keyframes scale-in-hor-left {
  0% {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
    -webkit-transform-origin: 0% 0%;
            transform-origin: 0% 0%;
    opacity: 0;
  }
  100% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
    -webkit-transform-origin: 0% 0%;
            transform-origin: 0% 0%;
    opacity: 1;
  }
}

.header-nav{
	width: 100%;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 5px;
	animation-delay:0s;
	display: flex;
}

.nav_content{
	opacity: 0;
}
.nav_content ul{
	position:absolute;
   top:50%;
   left:50%;
   transform:translate(-50%,-50%);
   width:100%;
	 padding: 0;
}
.nav_content ul li{
		list-style: none;
		flex-direction:column!important;
		margin-top: 20px;
		color: #778899;
		font-weight: bold;
}

.logo img{
	width: 70%;
	margin-left: 16px;
	display: inline-block;
	animation: fadeIn 3s linear;
	animation-fill-mode: both;
	@keyframes fadeIn{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}
}

.page-link{
	color: #fff;
	list-style: none;
	display: flex;
	display: inline-block;
	animation: fadeIn 4s linear;
	animation-fill-mode: both;
	@keyframes fadeIn{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}
}
.page-link li{
margin-right:16px;
animation: fadeIn 4s linear;
animation-fill-mode: both;
@keyframes fadeIn{
0%{
	opacity: 0;
}
100%{
	opacity: 1;
}
}
}
/*--ハンバーガー--*/
.drawer_hidden {
  display: none;
}
/* ハンバーガーアイコンの設置スペース */
.drawer_open {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  right: 5%;
	top:25px;
  z-index: 100;/* 重なり順を一番上にする */
  cursor: pointer;
	width: 40px;
	height: 40px;
}
/* ハンバーガーメニューのアイコン */
.drawer_open span{
  display: block;
  width: 40px;
	height: 5px;
  border-radius: 4px;
  transition: 0.5s;
  position: absolute;
	background-color: #fff;
	z-index: 99999;
}
.drawer_open span:nth-child(1){
	top:10px;
	color: #fff;
}
.drawer_open span:nth-child(2){
	top:20px;
	color: #fff;
}
.drawer_open span:nth-child(3){
	top:30px;
	color: #fff;
}

/* アイコンがクリックされたら真ん中の線を透明にする */
#drawer_input:checked ~ .drawer_open span:nth-child(2) {
  background: rgba(255, 255, 255, 0);
}
/* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
#drawer_input:checked ~ .drawer_open span:nth-child(1) {
  bottom: 0;
  transform: rotate(50deg);
}
#drawer_input:checked ~ .drawer_open span:nth-child(3){
  top: 9px;
  transform: rotate(-50deg);
}
/* メニューのデザイン*/
.nav_content {
  width: 100%;
  height: 100%;
  position: fixed;
  bottom: 100%;
  left: 0%; /* メニューを画面の外に飛ばす */
  z-index: 99;
  background: rgba(255, 255, 255,0.8 );
  transition: .5s;
  text-align: center;
  padding-top: 20px;

}

/* アイコンがクリックされたらメニューを表示 */
#drawer_input:checked ~ .nav_content {
  bottom: 0;/* メニューを画面に入れる */
opacity: 1;
}
/*--ヘッダーナビ--*/

.dete{
	color: #fff
}
.dete p{
	margin: 0;
	padding:8px 0 8px 0;
	text-align: center;
}

footer{
	position: absolute;
	bottom: 0;
	text-align: center;
	background-color: #000;
	width: 100%;
}

/*ヘッダー*/

@media (max-width: 1200px) {
.big-img p{
	font-size: 3rem;
}
}
@media (max-width: 960px){
	.big-img p{
		font-size: 2.8rem;
		text-align: center;
		right: 40%;
	}
}
@media (max-width: 429px){
	.big-img p{
		font-size: 1.8rem;
		text-align: center;
		right: 8%;
	}
}