@charset "utf-8";


/*PC・タブレット・スマホ(全端末)共通設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/

/*全体の設定
---------------------------------------------------------------------------*/
body {
	margin: 0px;
	padding: 0px;
	-webkit-text-size-adjust: none;
	color: #fff;	/*全体の文字色*/
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;	/*フォント種類*/
	font-size: 16px;	/*文字サイズ*/
	line-height: 2;		/*行間*/
	background: #000;	/*背景色*/
}
h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,form,figure,form,select,input,textarea {margin: 0px;padding: 0px;font-size: 100%;font-weight: normal;}
ul {list-style-type: none;}
ol {padding-left: 40px;padding-bottom: 15px;}
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}
table {border-collapse:collapse;font-size: 100%;border-spacing: 0;}
iframe {width: 100%;}

/*リンク（全般）設定
---------------------------------------------------------------------------*/
a {
	color: #fff;	/*リンクテキストの色*/
	transition: 0.3s;	/*マウスオン時の移り変わるまでの時間設定。0.3秒。*/
}
a:hover {
	color: #ea021c;	/*マウスオン時の文字色*/
}

/*コンテナー（ホームページを囲む一番外側のブロック）
---------------------------------------------------------------------------*/
#container {
	max-width: 1400px;	/*ブロックの最大幅*/
	margin: 0 auto;
	padding: 0 3%;
}

/*ヘッダー（ロゴが入った最上段のブロック）
---------------------------------------------------------------------------*/
/*headerブロック*/
header {
	text-align: center;	/*内容を中央よせ*/
}
/*ロゴ画像設定*/
#logo img {
	width: 400px;	/*画像幅*/
	margin: 40px auto 40px;	/*ロゴの上と下に40pxスペースを空ける設定*/
}

/*トップページのメイン画像
---------------------------------------------------------------------------*/
/*画像ブロック*/
#mainimg img {
	border-radius: 10px;	/*角を丸くする指定。この１行を削除すれば角丸がなくなります。*/
	margin-bottom: 40px;	/*下に空けるスペース*/
}

/*メニュー
---------------------------------------------------------------------------*/
/*メニュー全体を囲むブロック*/
#menubar {
	text-align: center;		/*文字をセンタリング*/
	font-size: 18px;		/*文字サイズ*/
	margin-bottom: 40px;	/*下に空けるスペース*/
}
/*メニュー１個あたりの設定*/
#menubar li {
	display: inline;	/*横並びにする設定*/
}
#menubar li a {
	text-decoration: none;
	padding: 15px 30px;	/*各メニュー内の余白。上下に15px、左右に30pxあけるという意味。*/
}
/*マウスオン時の設定*/
#menubar li a:hover {
	color: #ea021c;	/*文字色*/
	border-bottom: 4px solid #ea021c;	/*下線の幅、線種、色*/
}

@media screen and(max-width: 580px){
	.menubar{
		font-size: 14px;
	}
}

/*コンテンツ（見出しバーや文字などが入っているブロック）
---------------------------------------------------------------------------*/
/*コンテンツのh2タグの設定*/
#contents h2 {
	clear: both;
	margin-bottom: 20px;
	color: #fff;		/*文字色*/
	padding: 10px 20px;	/*上下、左右への余白*/
	background: #ea021c;	/*背景色*/
	border-radius: 10px;	/*角を丸くする指定。この１行を削除すれば角丸がなくなります。*/
	text-align: center;
}
/*コンテンツのh3タグの設定*/
#contents h3 {
	clear: both;
	margin-bottom: 20px;
	padding: 8px 20px;	/*上下、左右への余白*/
	background: #000;	/*背景色*/
	border: 1px solid #ccc;	/*枠線の幅、線種、色*/
	border-radius: 10px;	/*角を丸くする指定。この１行を削除すれば角丸がなくなります。*/
	text-align: center;
}
/*コンテンツのp(段落)タグ設定*/
#contents p {
	padding: 0px 20px 20px;	/*上、左右、下への余白*/
}
/*他。微調整。*/
#contents p + p {
	margin-top: -5px;
}
#contents h2 + p,
#contents h3 + p {
	margin-top: -10px;
}
#contents section + section {
	margin-top: 30px;
}

/*Galleryページ
---------------------------------------------------------------------------*/
/*各ブロックごとの設定*/
.list {
	overflow: hidden;
	border-bottom: 1px solid #ccc;	/*下線の幅、線種、色*/
	padding: 20px;	/*ボックス内の余白*/
}
/*h4見出しの設定*/
.list h4 {
	color: #ea021c;	/*文字色*/
}
/*画像の設定*/
.list img {
	width: 20%;			/*画像幅*/
	float: left;		/*画像を左に回り込み*/
	margin-right: 3%	/*画像の右側に空けるスペース*/
}
/*段落タグ*/
.list p {
	padding: 0 !important;
}

/*フッター(ページ最下部のcopyrightのパーツ)設定
---------------------------------------------------------------------------*/
footer {
	clear: both;
	text-align: center;	/*文字をセンタリング*/
	padding: 30px 0px 10px;	/*上、左右、下へのボックス内の余白*/
}
footer a {
	text-decoration: none;
	border: none;
}
footer .pr {
	display: block;
}

/*トップページ内「更新情報・お知らせ」ブロック
---------------------------------------------------------------------------*/
/*ブロック全体の設定*/
#new dl {
	padding: 0px 20px;	/*上下、左右へのブロック内の余白*/
	margin-bottom: 20px;	/*ブロックの下(外側)に空ける余白*/
}
/*日付設定*/
#new dt {
	font-weight: bold;	/*太字にする設定。標準がいいならこの行削除。*/
	float: left;
	width: 8em;
}
/*記事設定*/
#new dd {
	padding-left: 8em;
}

/*テーブル
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta1 caption {
	border-bottom: none;	/*下線だけ消す*/
	text-align: left;		/*文字を左寄せ*/
	background: #333;		/*背景色*/
	font-weight: bold;		/*太字に*/
	padding: 10px;			/*ボックス内の余白*/
}
/*テーブル１行目に入った見出し部分（※tamidashi）*/
.ta1 th.tamidashi {
	width: auto;
	text-align: left;	/*左よせ*/
	background: #333;	/*背景色*/
}
/*ta1テーブルブロック設定*/
.ta1 {
	table-layout: fixed;
	width: 100%;
	margin: 0 auto 20px;
}
.ta1, .ta1 td, .ta1 th {
	word-break: break-all;/*テーブルの枠線の幅、線種、色*/
	padding: 10px;			/*テーブル内の余白*/
}
/*テーブルの左側ボックス*/
.ta1 th {
	text-align: center;	/*センタリング*/
	width: 30%;			/*幅*/
}

/*トップページのNEWアイコン
---------------------------------------------------------------------------*/
.newicon {
	background: #F00;	/*背景色*/
	color: #FFF;		/*文字色*/
	font-size: 70%;
	line-height: 1.5;
	padding: 2px 5px;
	border-radius: 2px;
	margin: 0px 5px;
	vertical-align: text-top;
}

/*その他
---------------------------------------------------------------------------*/
.look {background: #555;padding: 5px 10px;border-radius: 4px;}
.mb15,.mb1em {margin-bottom: 15px;}
.color1 {color: #ea021c;}
.pr {font-size: 12px;}
.wl {width: 96%;}
.ws {width: 50%;}
.c {text-align: center;}
.r {text-align: right;}
.l {text-align: left;}



/*画面幅580px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:580px){

/*全体の設定
---------------------------------------------------------------------------*/
body {
	font-size: 12px;	/*文字サイズ*/
	line-height: 1.5;	/*行間*/
}



/*メニュー
---------------------------------------------------------------------------*/
/*メニュー１個あたりの設定*/
#menubar li {
	display: block;	/*縦並びにする設定*/
	margin-bottom: 10px;
}
#menubar li a {
	text-decoration: none;
	padding: 8px 30px;	/*各メニュー内の余白。*/
}

/*Galleryページ
---------------------------------------------------------------------------*/
/*各ブロックごとの設定*/
.list {
	padding: 10px;	/*ボックス内の余白*/
}

/*その他
---------------------------------------------------------------------------*/
.ws,.wl {width: 94%;}

}

/*========= ナビゲーションのためのCSS ===============*/

.g-nav{
    /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
    position:fixed;
    z-index: 999;
    /*ナビのスタート位置と形状*/
	top:0;
    right: -120%;
	width:100%;
    height: 100vh;/*ナビの高さ*/
	background:#999;
    /*動き*/
	transition: all 0.6s;
}

/*アクティブクラスがついたら位置を0に*/
.g-nav.panelactive{
    right: 0;
}

/*ナビゲーションの縦スクロール*/
.g-nav.panelactive #g-nav-list{
    /*ナビの数が増えた場合縦スクロール*/
    position: fixed;
    z-index: 999; 
    width: 100%;
    height: 100vh;/*表示する高さ*/
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/*ナビゲーション*/
.g-nav ul {
    /*ナビゲーション天地中央揃え*/
    position: absolute;
    z-index: 999;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}

/*リストのレイアウト設定*/

.g-nav li{
	list-style: none;
    text-align: center;
}
@media screen and (max-width: 580px){
	#g-nav li{
		font-size: 25px;
	}
}
@media screen and (min-width: 581px){
	.g-nav li{
		font-size: 30px;
	}
}

.g-nav li a{
	color: #333;
	text-decoration: none;
	padding:10px;
	display: block;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: bold;
}

/*========= ボタンのためのCSS ===============*/
.openbtn{
	position:fixed;
    z-index: 9999;/*ボタンを最前面に*/
	top:10px;
	right: 10px;
	cursor: pointer;
    width: 50px;
    height:50px;
}
	
/*×に変化*/	
.openbtn span{
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 14px;
    height: 3px;
    border-radius: 2px;
	background-color: #666;
  	width: 45%;
  }

.openbtn span:nth-of-type(1) {
	top:15px;	
}

.openbtn span:nth-of-type(2) {
	top:23px;
}

.openbtn span:nth-of-type(3) {
	top:31px;
}

.openbtn.active span:nth-of-type(1) {
    top: 18px;
    left: 18px;
    transform: translateY(6px) rotate(-45deg);
    width: 30%;
}

.openbtn.active span:nth-of-type(2) {
	opacity: 0;
}

.openbtn.active span:nth-of-type(3){
    top: 30px;
    left: 18px;
    transform: translateY(-6px) rotate(45deg);
    width: 30%;
}

/* ボタン全体 */
.flowbtn11{
	font-family:'Verdana',sans-serif;	
	border-radius:10px;
	position:relative;
	display:inline-block;
	width:100%;
	font-size:20px;
	color:#fff!important;
	text-decoration:none;
	margin-bottom:5px;
	margin: auto auto;
	}
	/* Twitter */
	.fl_tw1{
	background:#55acee;
	}
	/* Instagramアイコン位置 */
	.insta_btn11 .fa-instagram{
	position:relative;
	z-index:1;	
	}
	/* Instagram紫グラデ背景色 */
	.insta_btn11{
	background:-webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
	background:linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
	overflow:hidden;
	}
	/* Instagramオレンジグラデ背景色 */
	.insta_btn11:before{
	content: '';
	position:absolute;
	top:17px;
	left:-75px;
	width:100%;
	height:100%;
	background:-webkit-radial-gradient(#ffdb2c 5%, rgba(255, 105, 34, 0.65) 45%, rgba(255, 88, 96, 0) 80%);
	background:radial-gradient(#ffdb2c 5%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 80%);
	}
	/* Facebook */
	.fl_fb1{
	background:#3b5998;
	}
	/* Feedly */
	.fl_fd1{
	background:#6cc655;
	}
	/* Pocket */
	.fl_pk1{
	background:#ef3f56;
	}
	/* はてブ */
	.fl_hb1{
	background:#1ba5dc;
	text-align: center;
	}
	/* YouTube */
	.fl_yu1{
	background:#fc0d1c;
	}
	/* LINE */
	.fl_li1{
	background:#00c300;
	}
	/* お問い合わせメール */
	.fl_ma1{
	background:#f3981d;
	}
	/* プロフィール */
	.fl_pf11{
	background:#555;
	}
	/* アイコンボタンホバー時 */
	.flowbtn11:hover span{
	-webkit-transform: rotateX(360deg);
	-ms-transform: rotateX(360deg);
	transform: rotateX(360deg);
	text-decoration:none;
	}
	/* ボタン内テキスト調整 */
	.flowbtn11 span{
	font-size:14px;	
	position:relative;
	left:8px;
	bottom:2px;
	transition:.6s;	
	display:inline-block;	
	}
	/* ulタグの内側余白を０にする */
	ul.snsbtniti2{
	padding:0!important;
	list-style-type:none!important;
	}
	/* アイコンボタンの位置調整 */
	.snsbtniti2{
	display:flex;
	flex-flow:row wrap;
	}
	/* アイコンボタン同士の余白調整 */
	.snsbtniti2 li{
	flex:0 0 48%;
	text-align:center!important;
	}



	ul li:before {
	width:0!important;
	}

	.aiueo{
		background-color: #721767;
		color: #fff;
		font-size: 14px;
	}
	.aiueo :hover{
		font-size: 20px;
	}


.butter  a{
	background-color: #55acee;
	color: #fff;
	font-size: 18px;
}

.butter .youtube a{
	background-color: red;
	color: #fff;
	font-size: 18px;
}
a.btn-border {
    border: 2px solid #fff;
    border-radius: 0;
    background: black;
	font-size: 20px;
    -webkit-transform-style: preserve-3d;

    transform-style: preserve-3d;
  }

  a.btn-border::before{
    position: absolute;
    top: 0;
    left: 0;

    width: 15px;
    height: 100%;

    content: '';
  }

  /*目次*/
.outline{
	width:90%;
	margin:0 auto;
	display:block;
	position:relative;
	background: #fff;
	box-shadow: 0px 0px 0px 10px #fff;
	border: dashed 2px rgb(0, 0, 0);
	}
	.outline a{
		color: #000;
	}
.outline__item{
	background:#d6ebff;
	}
.outline__number{
	background:none;
	font-size:17px;
	color:black;
	}
	.outline__title:before{
	font-family: "icomoon";
	content: "\ea51";
	margin-right:5px;
	color:rgb(0, 0, 0);
	}
	.outline__title{
	color:rgb(0, 0, 0);
	font-weight:bold;
	font-size:18px;
	}
.outline__toggle:checked + .outline__switch::before {
	content: "［閉じる］";
	margin-left:-10px;
	color:#007bbb;
	font-size:15px;
	}
.outline__toggle:checked + .outline__switch + .outline__list {
	margin-top: 1rem;
	background:initial;
	}
	.contents .outline__switch::before {
	content: "［開く ］";
	border:none;
	margin-left:-10px;
	font-size:15px;
	color:#007bbb;
	}
	
  .video{
  width: 50%; /* 任意の横幅を指定 */
  height: auto;
  aspect-ratio: 16/9;
  }

 /* もくじ */
.page-contents{
list-style:none; /* 冒頭の数字が不要なので消す */
padding-left:5px; /* 左側の余白を5pxで調整する */
}
.page-contents a{
text-decoration:none; /* 装飾(下線)を消す */
}

/*検索バー*/
.search_container{
	position: relative;
	box-sizing: border-box;
	border: 2px solid #3879D9;
	padding: 3px 10px;
	border-radius: 3px;
	height: 2.3em;
	width: 265px;
	overflow: hidden;
  }
  .search_container input[type="text"]{
	border: none;
	height: 2.0em;
  }
  .search_container input[type="text"]:focus {
	outline: 0;
  }
  .search_container input[type="submit"]{
	cursor: pointer;
	font-family: FontAwesome;
	border: none;
	background: #3879D9;
	color: #fff;
	position: absolute;
	width: 3.5em;
	height: 3.0em;
	right:0px;
	top: -5px;
	outline : none;
  }

/*フォームサンプル*/
.foom_sanple{
	text-align: center;
	font-size: 10px;
	
}

.QR-Code{
text-align: center;
margin: 10px 0px 0px;	
}

.QR-Code a{	
font-size: 20px;
color: #FFF;
background-color: #ffdb2c;
background-size: 30px;
}

.QR-Code a:hover {
	color: #ea021c;	/*マウスオン時の文字色*/
}

@media screen and (max-width: 580px){
	#QR-Code{
	text-align: center;
	margin: 10px 0px 0px;	
	}
	#QR-Code a{	
	font-size: 20px;
	color: #FFF;
	background-color: #ffdb2c;
	background-size: 30px;
	}		
	#QR-Code a:hover {
	color: #ea021c;	/*マウスオン時の文字色*/
	}

	/*アクセスカウンター*/
#counter {
   text-align: 5px;
   text-align-last: center;
   background-size: 10px;
   border-radius: 10px;
   width: 100%;
   height: 100%;
  }
}	

/*PC表示アクセスカウンター*/
.counter {
	text-align: center;
   text-align-last: center;
   border-radius: 10px;
   width: 17%;
   height: 17%;
   padding: 10px 10px;		/*上下、左右への見出し内の余白*/
  }

 /*メールボタン
 -----------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ 
  /* 006 */
.button_solid006 a {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    max-width: 240px;
    padding: 6px 25px;
    background: #fff;
    color: #000;
    transition: 0.3s ease-in-out;
    font-weight: 600;
    border-radius: 100px;
    box-shadow: 0 5px 0px #4f96f6, 0 10px 100px #4f96f6;
}
.button_solid006 a:hover{
  background:#FF2F2F;
  box-shadow: 0 5px 0px #B73434,0 7px 30px #FF2F2F;
  color: #FFF;
}

.button_solid006 a:active{
  background:#FF8282;
  box-shadow: 0 0px 10px #FF8282;
  box-shadow: 0 5px 0px #CC6262,0 4px 10px #FF8282;
}
.link{
text-align: center;	
}