@charset "utf-8";
/************************************************************
HTMLリセット
************************************************************/
html,body,div,header,footer,section,article,aside,menu,nav,hgroup,figure,dialog,audio,video,
h1,h2,h3,h4,h5,h6,p,ul,ol,li,dl,dt,dd,pre,blockquote,th,td,form,fieldset,legend,input,textarea{margin:0;padding:0;}
body{line-height:1;}
header,footer,section,article,aside,menu,nav,hgroup,figure,dialog,audio,video{display:block;}
nav ul li{list-style:none;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
em,strong,small,code,address,th{font-size:100%;font-weight:normal;font-style:normal;}
ul,ol{list-style:none;}
pre,code{font-family:inherit;}
q:before,q:after{content:"";}
abbr,acronym{border: 0;}
table{border-collapse:collapse;border-spacing:0;}
th{text-align:left;}
fieldset,img{border:0;}
input[type=submit],
input[type=reset],
input[type=button]{appearance:button;border-radius:0;box-sizing:border-box;cursor:pointer;-webkit-appearance:button;-webkit-box-sizing:content-box;}

/************************************************************
HTML再定義
************************************************************/
*{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
-o-box-sizing:border-box;
box-sizing:border-box;
font-family:"Century Gothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
word-break:break-all;
word-wrap:break-word;
overflow-wrap:break-word;
text-align:justify;
text-justify:inter-ideograph;
}
html{
overflow-y:scroll;
}
body{
margin:0 auto;
padding:0;
font-size:1rem;
line-height:1.8;
background:#FFF;
color:#333;
}
/***********************************************************/
h2, h3, h4, h5, h6{
font-weight:bold;
line-height:1.4;
margin:2rem 0 0 0;
padding:0.5rem 0 0.5rem 1rem;
}
h2{
font-size:1.6rem;
line-height:1.6;
padding:0;
}
h2.balloon{
	font-size:1.5rem;
	padding:0 0 0 1rem;
	height:60px;
	line-height:60px;
	border:0;
	background:#ccc;
	color:#222;
	position:relative;
}
h2.balloon:after{
	content:'';
	position:absolute;
	bottom:-10px;
	left:1rem;
	margin:0;
	width:0;
	height:0;
	border-right:20px solid transparent;
	border-top:10px solid #ccc;
	border-left:20px solid transparent;
}
h3{
font-size:1.4rem;
padding:.75rem 0;
border-top:5px #ccc solid;
border-bottom:1px #ccc solid;
}
h4{
font-size:1.3rem;
border-left:5px #ccc solid;
}
h5{
font-size:1.2rem;
border-left:3px #ccc solid;
}
h6{
font-size:1rem;
border-left:1px #ccc solid;
}
/***********************************************************/
img{
outline:none;
border:none;
vertical-align:middle;
max-width:100%;
height:auto;
}
/***********************************************************/
a{
text-decoration:underline;
color:#0066ff;
-webkit-transition:all 0.1s ease-out;
   -moz-transition:all 0.1s ease-out;
    -ms-transition:all 0.1s ease-out;
     -o-transition:all 0.1s ease-out;
        transition:all 0.1s ease-out;
}
/*a:active,*/
a:hover{
text-decoration:none;
}
/***********************************************************/
p{
margin:1.5rem 0 0 0;
}
strong{
font-weight:bold;
}
em{
font-weight:bold;
background:linear-gradient(transparent 50%, rgba(255,0,0,0.5) 100%);
}
/***********************************************************/
ul{
margin:1rem 0 0 1.4rem;
list-style:disc;
}
li ul{
margin:0 0 0 1.4rem;
list-style:circle;
}
ul li{
margin:.5rem 0 0 0;
}
ul ol li{
list-style:decimal;
}
/***********************************************************/
ol{
margin:1rem 0 0 1.4rem;
list-style:decimal;
}
li ol{
margin:0 0 0 1.4rem;
}
ol li{
margin:.5rem 0 0 0;
list-style:decimal;
}
ol ul li{
list-style:disc;
}
/***********************************************************/
dl{
margin:0;
}
dt{
margin:1.5rem 0 0 0;
font-weight:bold;
}
dd{
margin:.5rem 0 0 0;
padding-left:1rem;
border-left:1px #ccc solid;
}
/***********************************************************/
blockquote{
margin:1.5rem 0 0 0;
padding:2rem 1rem 1rem 1rem;
line-height:1.4;
position:relative;
background:#eee;
color:#333;
}
blockquote:before{
position:absolute;
top:0;
left:1rem;
content:"\f10e";
font-family:'Font Awesome 5 Free';
font-weight:900;
font-size:3rem;
margin:0;
padding:0;
color:#fff;
}
blockquote p{
position:relative;
font-size:.9rem;
margin:1rem 0 0 0;
z-index:9999;
}
cite{
display:block;
text-align:right;
font-size:.75rem;
}
cite a{
font-weight:normal;
}
/***********************************************************/
pre{
overflow-x:scroll;
line-height:1.2;
font-family:"Courier New", Consolas, monospace;
font-size:.9rem;
margin:1.5rem 0 0 0;
padding:1rem;
background:#666;
color:#fff;
}
code{
color:#000080;
}
/***********************************************************/
table{
margin:1.5rem 0 0 0;
width:100%;
font-size:.9rem;
line-height:1.4;
}
table th,
table td{
vertical-align:top;
padding:.5rem;
border:1px #ccc solid;
}
table th{
white-space:nowrap;
text-align:center;
font-weight:bold;
background:#eee;
}
table td{
}
table p{
margin:1rem 0 0 0;
}
table ul,
table ol,
table li{
margin:1rem 0 0 1rem;
}
/***********************************************************/
form{
margin-bottom:20px;
}
form legend{
display:none;
}
form dl dd{
margin:0 0 10px 0;
}
form dl dd input, form dl dd textarea{
padding:4px;
}
form dl dd select{
padding:2px;
}
form ul{
margin:15px 0;
}
form ul li{
list-style:none;
}
form p{
margin:20px 0;
}
form p input{
padding:3px 10px;
}

input[type=email],
input[type=url],
textarea{
width:100%;
}

/***********************************************************/
hr{
margin:1.5rem 0 0 0;
padding:0;
height:1px;
border:0;
border-top:1px #ccc solid;
}
hr.dot{
border-top:1px #ccc dashed;
}

/************************************************************
装飾
************************************************************/
#action{
overflow:hidden;
}
#action form{
float:left;
margin-right:3px;
}
.complete{
color:#00AA00;
font-weight:bold;
}
.attention{
color:#FF0000;
font-weight:bold;
}
.number{
text-align:right;
}

/**/
.clear{
clear:both;
}

i.new{
background:#ff0000;
color:#fff;
padding:1px 5px;
font-size:11px;
border-radius:5px 0;
font-style:normal;
}

/************************************************************
Twiter API
************************************************************/
.twitter-tweet{
display:block;
overflow:hidden;
margin:0 auto;
padding-top:1rem;
}

/************************************************************
Point
************************************************************/
.point{
display:block;
overflow:hidden;
margin:1.5rem 0 0 0;
padding:0 1rem 1.5rem 1rem;
border:5px #ffcc00 double;
}

/************************************************************
YouTubeレスポンシブ
************************************************************/
p.video{
position:relative;
height:0;
padding:0 0 56.25%;
overflow:hidden;
}
p.video iframe{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}

/************************************************************
インラインレイアウト
************************************************************/
.right{
float:right;
margin:0 0 0 1rem;
width:calc(100% / 3);
}
.left{
float:left;
margin:0 1rem 0 0;
width:calc(100% / 3);
}

/************************************************************
もっと見る
************************************************************/
a.more{
clear:both;
display:block;
overflow:hidden;
text-align:center;
text-decoration:none;
font-size:1.5em;
font-weight:bold;
line-height:1.2;
margin:2rem 0 0 0;
padding:1rem;
background:#0066FF;
color:#fff;
}
a.more:before{
content:"\f104";
font-family:'Font Awesome 5 Free';
font-weight:900;
float:left;
}
a.more:after{
content:"\f105";
font-family:'Font Awesome 5 Free';
font-weight:900;
float:right;
}


a.more:hover{
background:#33CCDD;
color:#fff;
}

/************************************************************
Home & ページトップ
************************************************************/
a.home{
clear:both;
display:block;
overflow:hidden;
text-align:center;
text-decoration:none;
font-size:1.5rem;
line-height:50px;
margin:2rem 0 0 0;
background:#ccc;
color:#fff;
}
a.home:hover{
background:#666;
color:#fff;
}
/***********************************************************/
ul#tolink{
	z-index:998;
	position:fixed;
	right:10px;
	bottom:0;
	margin:0;
	padding:0;
}
ul#tolink li{
	list-style:none;
	margin:1px 0 0 0;
	padding:0;
}
ul#tolink li a{
	display:block;
	position:relative;
	width:50px;
	height:50px;
	line-height:50px;
	text-align:center;
	text-decoration:none;
	background:rgba(0,0,0,0.5);
	color:#fff;
}
ul#tolink li:nth-child(3) a:before,
ul#tolink li:nth-child(3) a:after{
	display:block;
	position:absolute;
	left:0;
	right:0;
	margin:auto;
	line-height:1.0;
	text-align:center;
	color:#fff;
	text-indent:0;
}
ul#tolink li:nth-child(3) a:before{
	content:"CMS";
	top:13px;
	font-size:13px;
}
ul#tolink li:nth-child(3) a:after{
	content:"SERVICE";
	bottom:13px;
	font-size:10px;
}
ul#tolink a:hover{
	background:rgba(0,0,0,0.75);
}

/*********************************************************************
END
*********************************************************************/