/*--------------------------------
　全体
---------------------------------*/

/* 強制ライト */

body {
	background-image: url(../img/bac.png);
	background-repeat: repeat;
	background-size:cover;
	margin: 2em;
	padding: 0;
	height: auto;
	width: 100%;
	text-align: center;
	
}

:root {
	prefers-color-scheme: light;
}

#wrapper {
	border: 2px solid #000000;
	text-align: center;
	margin: 2em auto 1em;

	max-width: 1200px;
	width: 100%;
	padding: 0;
	  
}

#contents {
	margin-top: 150px;
}

.main { 
	display: block;
	text-align: center;
	box-sizing: border-box;
	text-decoration: none;
	color: #333;
	margin: 12em auto 5em;
  
}

/* ボタンデザイン無効化 */
input[type="button"]{
	-webkit-appearance: none;
}

input[type="submit"]{
	-webkit-appearance: none;
}

input[type="text"]{
	-webkit-appearance: none;
	font-size: 100%;
}

input[type="email"]{
	-webkit-appearance: none;
	font-size: 100%;	
}

input[type="textarea"]{
	-webkit-appearance: none;
	font-size: 100%;
}

input[type="password"]{
	-webkit-appearance: none;
	font-size: 100%;
}

input[type="tel"]{
	-webkit-appearance: none;
	font-size: 100%;
}

input[type="file"]{
	-webkit-appearance: none;
	
}

input[type="number"]{
	-webkit-appearance: none;
}


/*--------------------------------
　画面ロード 用
---------------------------------*/

/*ローディング画面*/
#loading {
	transition: all 2s; /*ローディングにかかる時間*/
	background-color: #FFF;
	z-index: 999;
	position: fixed;
	inset: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column; 
  }
  
  .loading-text {
	font-weight: bold;
	text-align: center;
  }
  
  .spin {
	width: 64px;
	height: auto;
  }
  
  .loaded {
	opacity: 0;
	visibility: hidden;
  }


/*--------------------------------
　画面上部スクロール 用
---------------------------------*/

.pagetop {
  cursor: pointer;
  position: fixed;
  right: 30px;
  bottom: 450px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  transition: .3s;
  color: #000000;
  background: #f53b3b;
  
/*   デフォルトは非表示 */
  opacity: 0;
}
.pagetop:hover {
    box-shadow: 0 0 10px #00A6C4;
}
/*--------------------------------
　ヘッダー
---------------------------------*/
header {
	position: sticky;
	position: fixed;
	top: 0;
	z-index: 1;
	width: 100%; /* ヘッダーの横幅を指定する */
	height: 100px;
	padding: 30px 5px 5px; /* ヘッダーの余白を指定する(上下左右) */
	background-color: #cbeef0c8; /* ヘッダーの背景色を指定する */
	color: #000000; /*フォントの色を指定する*/
  }

  .inner {
	position: relative;
	display: flex;
	align-items: center;
	height: 100%;
  }

  .header {
	position: relative;
	display: flex;
	align-items: center;
	/* height: 75%; */
  }

  .logo {
	position: relative;
	margin: 1px 1px 30px;
	padding: 0;
	
	font-weight: bold;
	text-decoration: none;
	


  }
  .logo-img {
	top: 0;
	width: 40%;
	position:relative;
	bottom: 15em;
	margin: 1em;
  }

  .navi {
	text-align: right;
	margin: 1px 0 1em 15em ;
	padding: 3em;
	padding: 3em;
	font-size: 14px;
	font-weight: bold;
	display: flex;
	list-style: none;
	flex-wrap:wrap;
	top: 0;

  }


  header .navi li {
	margin: 1px 0 0;
  }
  header .navi li:first-child {
	margin-left: 1px;
  }
  header .navi li a {
	display: block;
	box-sizing: border-box;
	text-decoration: none;
	color: #333;
  }
  header .navi li a:hover {
	text-decoration: underline;
  }
  
  /* layout */
  
  /* body {
	margin: 0;
	padding: 0;
  } */
  #main {
	height: 3000px;
  }


/*--------------------------------
　フッター
---------------------------------*/
footer{
	min-height: 20vh; /* ←コンテンツの高さの最小値＝ブラウザの高さに指定 */
    position: relative;/* ←相対位置 */
    padding-bottom: 20px; /* ←フッターの高さを指定 */
    box-sizing: border-box;
    /* ↑ヘッダーやフッターを含むすべての要素の高さ＝min-height:100vhになるように指定 */
	text-align: center;
	margin: 2em auto 1em;
	border: 2px solid #000000;


}

.foot{
	width: 100%;
    position: absolute;/* ←絶対位置 */
    bottom: 0;
    
}

.copyright{
	text-align: center;
	font-size: 20px;
	color: rgb(255, 255, 255);
	background-color:#000000;
	border: 2px solid #000000;
}

.address {
	font-style: normal;
	margin: 2em auto 1em;

}

/*--------------------------------
枠デザイン
---------------------------------*/
.BOX-art01 {
	font-size: 2em;
	width: 40%;
	margin: 2em auto 1em;
	padding:1em;
	text-align: center ;
	border: 2px solid #000000;
	background-color: #D9AFD9;
	background-image: linear-gradient(20deg, #D9AFD9 13%, #97D9E1 62%, #ffffff 92%);
}

/*-----------------------------------------------------------------------------
　　　　　　　　　　　　　　　　　　文字フォント系
-------------------------------------------------------------------------------*/
/*--------------------------------
　フォント共通
---------------------------------*/
.BOX-art01, .address, .copyright, .txt_pcenter, .txt_p, .clip_board, .Develop_txt, .txt_pcenter, .txt_p, .TOP_txtH3, .TOP_txtH4,.btn_GO-TOP, .browser_size_area1, .browser_size_area2,
.IP_BOX-art01, .ip-address, .ip-address_name, .header_btn {
	font-family:  "メイリオ, Meiryo,ヒラギノ角ゴ ProN W3,HiraKakuProN-W3, 游ゴシック,Yu Gothic, Verdana, Helvetica, Arial, sans-serif";
	text-align: center ;

	/* 表示アニメ */
	animation-name: Fade-in_Anime;
	animation-duration:2s;
	/* animation-fill-mode:forwards; */
	/* opacity: 0; */

}

.txt_pcenter, .txt_p{
	font-size: 35px;
	/* width: 70%; */
	margin: 2em auto 1em;

}

/*--------------------------------
　見出しフォント
---------------------------------*/
.TOP_txtH3, .TOP_txtH4{
	border-bottom: double 5px #FFC778;
	text-align: center ;
	margin: 6em auto 1em;


}

.TOP_txtH3 {
	font-size: 50px;
	width: 70%;

}

.TOP_txtH4 {
	font-size: 30px;
	width: 50%;

}

/*--------------------------------
　本文フォント
---------------------------------*/

.clip_board{
	font-size: 20px;

}

.Develop_txt{ /* 開発環境と実環境の区別に利用 */
	font-size: 40px;
	color: red;
	background:yellow;
	font-weight: bold;
	margin: 0 2em 1em;


}


.txt_pcenter {
	font-size: 20px;
	/* font-weight:400;  */
	margin: 0 5em 1em;


}

.txt_p {
	/* font-size: 20px; */
	/* font-weight:400;  */
	margin: 0 5em 1em;
	text-align: center ;

	animation-name: Fade-in_Anime;
	animation-duration:3s;
	animation-fill-mode:forwards;
	opacity: 0;

}


.INFORMATION_txt {
	font-size: 20px;
	margin: 0 5em 1em;
	/* text-align: left ; */
	font-family:  "ヒラギノ角ゴ ProN W3", HiraKakuProN-W3, 游ゴシック, "Yu Gothic", メイリオ, Meiryo, Verdana, Helvetica, Arial, sans-serif;

	animation-name: Fade-in_Anime;
	animation-duration:3s;
	animation-fill-mode:forwards;
	opacity: 0;

}

/*--------------------------------
　リスト
---------------------------------*/
.INFORMATION_list {
	width: 100%;
	margin: auto;
	text-align: left;
	font-family:  "ヒラギノ角ゴ ProN W3", HiraKakuProN-W3, 游ゴシック, "Yu Gothic", メイリオ, Meiryo, Verdana, Helvetica, Arial, sans-serif;

	animation-name: Fade-in_Anime;
	animation-duration:3s;
	animation-fill-mode:forwards;
	opacity: 0;

}

.INFORMATION_new {
	width: 45%;
	margin: 4em 5em 1em;
	text-align: right;
	color: red;
	font-family:  "ヒラギノ角ゴ ProN W3", HiraKakuProN-W3, 游ゴシック, "Yu Gothic", メイリオ, Meiryo, Verdana, Helvetica, Arial, sans-serif;

	animation-name: Fade-in_Anime;
	animation-duration:3s;
	animation-fill-mode:forwards;
	opacity: 0;

}



/*--------------------------------
　リンクボタン
---------------------------------*/

.btn_GO-TOP {

	background: #3D94F6;
	background-image: -webkit-linear-gradient(top, #3D94F6, #1E62D0);
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	height: 18px;
	line-height: 18px;
	color: #000000;
	width: 199px;
	/* font-size: 85px; */
	font-weight: 100;
	padding: 40px; 
	-webkit-box-shadow: 1px 1px 20px 0 #000000;
	-moz-box-shadow: 1px 1px 20px 0 #000000;
	box-shadow: 1px 1px 20px 0 #000000;
	text-shadow: 1px 1px 20px #FFFFFF;
	border: solid #337FED 1px;
	text-decoration: none;
	display: inline-block;
	cursor: pointer; 
	text-align: center;
}

.header_btn {
	border: none;
	outline: none;
	background: transparent;
	/* display: block; */
	background-color: #EAB504;
	text-decoration: none;
	color: #000000;
	font-size: 15px;
	/* font-weight: bold; */
	text-align: center;
	/* max-width: 210px; */
	padding: 16px 0;
	margin: 1em auto;
	border-radius: 7px;
}



/*-----------------------------------------------------------------------------
　　　　　　　　　　　　　　　　　　各ページ個別
-------------------------------------------------------------------------------*/


/*--------------------------------
　画面サイズ 簡易測定 用
---------------------------------*/

.browser_size_area1{
	width: 55%;
	font-size: 25px;
	font-weight:bold;
	text-align: center ;
	margin: 2em auto 1em;
	padding: 5px;
	border: 2px solid #000000;

}

.browser_size_area2{
	width: 40%;
	font-size: 25px;
	font-weight:bold;
	text-align: center ;
	margin: 2em auto 1em;
	padding: 5px;

}


/*--------------------------------
　IPアドレス表示 用
---------------------------------*/

.IP_BOX-art01 {
	font-size: 2em;
	width: 40%;
	margin: 2em auto 1em;
	padding:1em;
	text-align: center ;
	border: 2px solid #000000;
	background-color: #D9AFD9;
	background-image: linear-gradient(20deg, #D9AFD9 13%, #97D9E1 62%, #ffffff 92%);
}


.ip-address {
	font-size: 35px;
	margin: auto 1em;

}
.ip-address_name {
	font-size: 30px;
	margin: auto 1em;

}

.kaisenBOX-art01 {
	font-size: 2em;
	width: 55%;
	margin: 2em auto 1em;
	padding:1em;
	text-align: center ;
	border: 2px solid #000000;
	background-color: #D9AFD9;
	background-image: linear-gradient(20deg, #D9AFD9 13%, #97D9E1 62%, #ffffff 92%);
}

.kaisenBOX-art02 {
	font-size: 2em;
	width: 35%;
	margin: 2em auto 1em;
	padding:1em;
	text-align: center ;
	border: 2px solid #000000;
	background-color: #D9AFD9;
	background-image: linear-gradient(20deg, #D9AFD9 13%, #97D9E1 62%, #ffffff 92%);
}


/*--------------------------------
　コンタクト画面
---------------------------------*/
.contact-list {
	margin: 5em auto;
}


.txt_area{
	width: 45%;
	height: 10em;
	resize: none;
	white-space: pre-wrap;
}

.contac_tlist-text {
	font-size: 16px;
    width: 35%; /*flexの中で100%広げる*/
    background-color: #ddd;
    border: none; /*枠線非表示*/
    outline: none; /*フォーカス時の枠線非表示*/
    box-sizing: border-box; /*横幅の解釈をpadding, borderまでとする*/}

.Course_selection {
	font-size: 16px;
    width: 100%; /*flexの中で100%広げる*/
    background-color: #ddd;
    border: none; /*枠線非表示*/
    outline: none; /*フォーカス時の枠線非表示*/
    box-sizing: border-box; /*横幅の解釈をpadding, borderまでとする*/}


/*--------------------------------
　位置調整
---------------------------------*/


.movie_area {
	text-align: center;
	margin: 4em auto 3em;

}

.twitter_area{
	text-align: center;
	margin: 4em auto 1em;

}


.twitter-timeline {
	text-align: center;
	margin: 4em auto 1em;
}

.Character_img {
	width: 15%;
	text-align: center;
	margin: 0em auto 1em;


}

/*--------------------------------
　POPUP
---------------------------------*/

/*モーダル本体の指定 + モーダル外側の背景の指定*/
  .modal-container{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-align: center;
	background: rgba(0,0,0,50%);
	padding: 40px 20px;
	overflow: auto;
	opacity: 0;
	visibility: hidden;
	transition: .3s;
	box-sizing: border-box;
  }
  /*モーダル本体の擬似要素の指定*/
  .modal-container:before{
	content: "";
	display: inline-block;
	vertical-align: middle;
	height: 100%;
  }
  /*モーダル本体に「active」クラス付与した時のスタイル*/
  .modal-container.active {
	opacity: 1;
	visibility: visible;
  }
  /*モーダル枠の指定*/
  .modal-body {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	max-width: 500px;
	width: 90%;
  }
  /*モーダルを閉じるボタンの指定*/
  .modal-close {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	top: -40px;
	right: -40px;
	width: 40px;
	height: 40px;
	font-size: 40px;
	color: #fff;
	cursor: pointer;
  }
  /*モーダル内のコンテンツの指定*/
  .modal-content {
	background: #fff;
	text-align: left;
	padding: 30px;
  }

/*--------------------------------
　アニメーション
---------------------------------*/
/* フェードイン */
@keyframes Fade-in_Anime {
	0% {
	  opacity: 0;
	}
  
	100% {
	  opacity: 1;
	}
  }


/*--------------------------------
　ページTOPジャンプボタン
---------------------------------*/

  #page_top{
	width: 50px;
	height: 50px;
	position: fixed;
	right: 1em;
	bottom: 15em;
	background: #ef3f98;
	opacity: 0.6;
  }
  #page_top a{
	position: relative;
	display: block;
	width: 50px;
	height: 50px;
	text-decoration: none;
  }
  #page_top a::before{
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	content: '\f106';
	font-size: 25px;
	color: #fff;
	position: absolute;
	width: 25px;
	height: 25px;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto;
	text-align: center;
  }

/*--------------------------------
　アニメーション（読み込み処理）
---------------------------------*/