@charset "utf-8";


/*PC・タブレット・スマホ(全端末)共通設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (min-width:580px){
.sponly{
display: none!important;
}}

.cp_tooltip {
	position: relative;
	display: inline-block;
	cursor: pointer;
	background: linear-gradient(transparent 60%,  60%);
}
.cp_tooltip .cp_tooltiptext {
	position: absolute;
	z-index: 1;
	top: 120%;
	left: 0;
	visibility: hidden;
	width: 650%;
	white-space: nowrap;
	padding: 0.3em 0.5em;
	transition: opacity 1s;
	text-align: center;
	opacity: 0;
	color: #ffffff;
	border-radius: 10px;
	background-color: #000;
}
.cp_tooltip .cp_tooltiptext::after {
	position: absolute;
	bottom: 100%;
	left: -5%;
	margin-left: -5px;
	content: ' ';
	border: 5px solid transparent;
}
.cp_tooltip:hover .cp_tooltiptext {
	visibility: visible;
	opacity: 1;
}


.popup_wrap input {
  display: none;
}

.popup_overlay {
  display: flex;
  justify-content: center;
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  opacity: 0;
  transition: opacity 0.5s, transform 0s 0.5s;
  transform: scale(0);
}

.popup_trigger {
  position: absolute;
  width: 100%;
  height: 100%;
}

.popup_content {
  position: relative;
  align-self: center;
  width: 90%;
  max-width: 800px;
  padding: 30px 30px 15px;
  box-sizing: border-box;
  background: #fff;
  line-height: 1.4em;
  transition: 0.5s;
}

.close_btn {
  position: absolute;
  top: 14px;
  right: 16px;
  font-size: 20px;
  cursor: pointer;
}

.popup_wrap input:checked ~ .popup_overlay {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.5s;
}


/*全体の設定
---------------------------------------------------------------------------*/


body{
	animation: fadein 0.5s forwards;
}
@keyframes fadein {
	0% {opacity: 0}
	100% {opacity: 1}
}
@keyframes out {
	100% {opacity: 1}
	0% {opacity: 0}
}

body {
	margin: 0px;
	padding: 0px;
	-webkit-text-size-adjust: none;
	color: #666;	/*全体の文字色*/
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;	/*フォント種類*/
	font-size: 16px;	/*文字サイズ*/
	line-height: 2;		/*行間*/
	background: #fff;	/*背景色*/
}
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%;}

img{
    pointer-events: none;
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -moz-touch-callout:none;
    -moz-user-select:none;
    user-select:none;
}
.balloonoya {
  position   : relative;                /* 指定した分だけ相対的に移動 */
}
.balloonoya:hover .balloon {
  display: inline;                /* インライン要素として表示 */
}
.balloon {
  position   : absolute;                /* 親要素を基準 */
  display: none;                        /* 要素を非表示 */
  padding: 2px;                         /* テキストの前後の余白 */
  background-color: rgba(255, 255, 255, 0.67);       /* 背景色（透明度） */
  width:180px;                          /* 吹き出し全体の幅 */
  right : -1%;                          /* 表示位置 */
  font-size: 80%;                       /* 文字サイズ */
}
.balloon:after{
  border-right: 12px solid rgba(255, 255, 255, 0.67);  /* 吹き出し口の幅・色 */
  border-top: 10px solid transparent;     /* 吹き出し口の高さ１／２ */
  border-bottom: 10px solid transparent;  /* 吹き出し口の高さ１／２ */
  left: -12px;                            /* 吹き出し口の位置調整 */
  top: 5%;                                /* 吹き出し口の縦位置 */
  content: "";                       /* コンテンツの挿入 */
  position: absolute;                /* 親要素を基準 */
}
.follow-me {
  list-style: none;
  margin: 0 0 -8px;
  overflow: hidden;
  padding: 0;
}
.follow-me li {
  float: left;
  margin: 0 8px 8px 0;
  padding: 0;
}
.follow-me li a::before {
  background-color: #eee;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  color: #333;
  display: inline-block;
  font-family: FontAwesome;
  font-size: 16px;
  height: 44px; /* Button height */
  line-height: 44px; /* Button height */
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
  text-align: center;
  width: 44px; /* Button width */
}
.follow-me li a:hover::before {
  color: #fff;
}
.follow-me li a[href*="amazon.co.jp"]::before,
.follow-me li a[href*="amazon.com"]::before,        { content: "\f270"; }
.follow-me li a[href*="codepen.io"]::before         { content: "\f1cb"; }
.follow-me li a[href*="delicious.com"]::before      { content: "\f1a5"; }
.follow-me li a[href*="deviantart.com"]::before     { content: "\f1bd"; }
.follow-me li a[href*="digg.com"]::before           { content: "\f1a6"; }
.follow-me li a[href*="dribble.com"]::before        { content: "\f17d"; }
.follow-me li a[href*="dropbox.com"]::before        { content: "\f16b"; }
.follow-me li a[href*="facebook.com"]::before       { content: "\f09a"; }
.follow-me li a[href*="feedly.com"]::before         { content: "\f09e"; }
.follow-me li a[href*="flickr.com"]::before         { content: "\f16e"; }
.follow-me li a[href*="foursquare.com"]::before     { content: "\f180"; }
.follow-me li a[href*="github.com"]::before         { content: "\f09b"; }



.follow-me li a[href*="plus.google.com"]::before    { content: "\f0d5"; }
.follow-me li a[href*="b.hatena.ne.jp"]::before     { content: "\f027"; font-family: blogicon; }
.follow-me li a[href*="instagram.com"]::before      { content: "\f16d"; }
.follow-me li a[href*="last.fm"]::before            { content: "\f202"; }
.follow-me li a[href*="linkedin.com"]::before       { content: "\f0e1"; }
.follow-me li a[href*="nicovideo.jp"]::before       { content: "\f047"; font-family: blogicon; }
.follow-me li a[href*="pinterest.com"]::before      { content: "\f0d2"; }
.follow-me li a[href*="getpocket.com"]::before      { content: "\f265"; }
.follow-me li a[href*="reddit.com"]::before         { content: "\f1a1"; }
.follow-me li a[href*="skype.com"]::before,
.follow-me li a[href*="skype:"]::before             { content: "\f17e"; }
.follow-me li a[href*="slideshare.net"]::before     { content: "\f1e7"; }
.follow-me li a[href*="spotify.com"]::before        { content: "\f1bc"; }
.follow-me li a[href*="steamcommunity.com"]::before { content: "\f1b6"; }
.follow-me li a[href*="stumbleupon.com"]::before    { content: "\f1a4"; }
.follow-me li a[href*="tumblr.com"]::before         { content: "\f173"; }
.follow-me li a[href*="twitch.tv"]::before          { content: "\f1e8"; }
.follow-me li a[href*="twitter.com"]::before        { content: "\f099"; }
.follow-me li a[href*="vimeo.com"]::before          { content: "\f27d"; }
.follow-me li a[href*="vine.co"]::before            { content: "\f1ca"; }
.follow-me li a[href*="weibo.com"]::before          { content: "\f18a"; }
.follow-me li a[href*="whatsapp.com"]::before       { content: "\f232"; }
.follow-me li a[href*="wordpress.com"]::before,
.follow-me li a[href*="wordpress.org"]::before      { content: "\f19a"; }
.follow-me li a[href*="youtube.com"]::before        { content: "\f16a"; }
.follow-me li a[href$="/feed"]::before              { content: "\f09e"; }
.follow-me li a[href$="/subscribe"]::before         { content: "\f000"; font-family: blogicon; }

.follow-me li a[href*="amazon.co.jp"]:hover::before,
.follow-me li a[href*="amazon.com"]:hover::before,        { background-color: #ff9900; }
.follow-me li a[href*="codepen.io"]:hover::before         { background-color: #000000; }
.follow-me li a[href*="delicious.com"]:hover::before      { background-color: #3399ff; }
.follow-me li a[href*="deviantart.com"]:hover::before     { background-color: #05cc47; }
.follow-me li a[href*="digg.com"]:hover::before           { background-color: #000000; }
.follow-me li a[href*="dribble.com"]:hover::before        { background-color: #ea4c89; }
.follow-me li a[href*="dropbox.com"]:hover::before        { background-color: #007ee5; }
.follow-me li a[href*="facebook.com"]:hover::before       { background-color: #3b5998; }
.follow-me li a[href*="feedly.com"]:hover::before         { background-color: #6cc655; }
.follow-me li a[href*="flickr.com"]:hover::before         { background-color: #0063dc; }
.follow-me li a[href*="foursquare.com"]:hover::before     { background-color: #f94877; }
.follow-me li a[href*="github.com"]:hover::before         { background-color: #181717; }
.follow-me li a[href*="plus.google.com"]:hover::before    { background-color: #dc4e41; }
.follow-me li a[href*="b.hatena.ne.jp"]:hover::before     { background-color: #008fde; }
.follow-me li a[href*="instagram.com"]:hover::before      { background-color: #125688; }
.follow-me li a[href*="last.fm"]:hover::before            { background-color: #d51007; }
.follow-me li a[href*="linkedin.com"]:hover::before       { background-color: #0077b5; }
.follow-me li a[href*="nicovideo.jp"]:hover::before       { background-color: #eaeaea; }
.follow-me li a[href*="pinterest.com"]:hover::before      { background-color: #bd081c; }
.follow-me li a[href*="getpocket.com"]:hover::before      { background-color: #ef3f56; }
.follow-me li a[href*="reddit.com"]:hover::before         { background-color: #ff4500; }
.follow-me li a[href*="skype.com"]:hover::before,
.follow-me li a[href*="skype:"]:hover::before             { background-color: #00aff0; }
.follow-me li a[href*="slideshare.net"]:hover::before     { background-color: #2d2d2d; }
.follow-me li a[href*="spotify.com"]:hover::before        { background-color: #84bd00; }
.follow-me li a[href*="steamcommunity.com"]:hover::before { background-color: #171a21; }
.follow-me li a[href*="stumbleupon.com"]:hover::before    { background-color: #eb4929; }
.follow-me li a[href*="tumblr.com"]:hover::before         { background-color: #36465d; }
.follow-me li a[href*="twitch.tv"]:hover::before          { background-color: #6441a5; }
.follow-me li a[href*="twitter.com"]:hover::before        { background-color: #55acee; }
.follow-me li a[href*="vimeo.com"]:hover::before          { background-color: #1ab7ea; }
.follow-me li a[href*="vine.co"]:hover::before            { background-color: #11b58a; }
.follow-me li a[href*="weibo.com"]:hover::before          { background-color: #e6162d; }
.follow-me li a[href*="whatsapp.com"]:hover::before       { background-color: #64d548; }
.follow-me li a[href*="wordpress.com"]:hover::before,
.follow-me li a[href*="wordpress.org"]:hover::before      { background-color: #21759b; }
.follow-me li a[href*="youtube.com"]:hover::before        { background-color: #cd201f; }
.follow-me li a[href$="/feed"]:hover::before              { background-color: #ffa500; }
.follow-me li a[href$="/subscribe"]:hover::before         { background-color: #363636; }

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


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

/*ヘッダー（ロゴが入った最上段のブロック）
---------------------------------------------------------------------------*/
/*headerブロック*/
header {
	text-align: center;	/*内容を中央よせ*/
}
/*ロゴ画像設定*/
#logo img {
	width: 960%;	/*画像幅*/
	height: 800%;

	margin: 40px auto 40px;	/*ロゴの上と下に40pxスペースを空ける設定*/
}

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

}

/*メニュー
---------------------------------------------------------------------------*/
/*メニュー全体を囲むブロック*/
#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: #224acf;	/*文字色*/
	border-bottom: 4px solid #224acf;	/*下線の幅、線種、色*/
}

/*コンテンツ（見出しバーや文字などが入っているブロック）
---------------------------------------------------------------------------*/
/*コンテンツのh2タグの設定*/
#contents h2 {
	clear: both;
	margin-bottom: 20px;
	color: #fff;		/*文字色*/
	padding: 10px 20px;	/*上下、左右への余白*/
	background: #224acf;	/*背景色*/
	border-radius: 10px;	/*角を丸くする指定。この１行を削除すれば角丸がなくなります。*/
}
/*コンテンツのh3タグの設定*/
#contents h3 {
	clear: both;
	margin-bottom: 20px;
	padding: 8px 20px;	/*上下、左右への余白*/
	background: #fff;	/*背景色*/
	border: 1px solid #ccc;	/*枠線の幅、線種、色*/
	border-radius: 10px;	/*角を丸くする指定。この１行を削除すれば角丸がなくなります。*/
}
/*コンテンツの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: #224acf;	/*文字色*/
}
/*画像の設定*/
.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: 1px solid #999;	/*テーブルの枠線の幅、線種、色*/
	border-bottom: none;	/*下線だけ消す*/
	text-align: left;		/*文字を左寄せ*/
	background: #eee;		/*背景色*/
	font-weight: bold;		/*太字に*/
	padding: 10px;			/*ボックス内の余白*/
}
/*テーブル１行目に入った見出し部分（※tamidashi）*/
.ta1 th.tamidashi {
	width: auto;
	text-align: left;	/*左よせ*/
	background: #eee;	/*背景色*/
}
/*ta1テーブルブロック設定*/
.ta1 {
	table-layout: fixed;
	width: 100%;
	margin: 0 auto 20px;
}
.ta1, .ta1 td, .ta1 th {
	word-break: break-all;
	border: 1px solid #999;	/*テーブルの枠線の幅、線種、色*/
	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: #e5e5e5;padding: 5px 10px;border-radius: 4px;}
.mb15,.mb1em {margin-bottom: 15px;}
.color1 {color: #224acf;}
.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;	/*行間*/
}
.pconly{
display: none!important;
}



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

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

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

}

header2 {
font-family: 'Poppins','Noto Sans JP',sans-serif;
background-color: #008db7;
color: white;

}
header2 a{
  color: black;
}