@charset "utf-8";


/*fine-name
---------------------------------------------------------------------------*/
.file-name {
	background: #666;
	color: #fff;
	display: block;
	padding: 0 20px 0 10px;
	font-size: 12px;
	width: 130px;
	text-align: center;
}
.file-name::before {
	content: "▼";
	padding-right: 10px;
	opacity: 0.5;
}

/*トップページ新着テンプレブロック
---------------------------------------------------------------------------*/
.new-template {overflow: hidden;}
.new-template div {
	float: left;
	width: 29.3%;
	margin: 0 2% 30px;
	overflow: hidden;
}
.new-template a {display: block;text-decoration: none;}
.new-template a:hover {
	opacity: 0.8;
	position: relative;
	top: 1px;
	left: 1px;
}
.new-template h4 {
	line-height: 1.5;
	border-bottom: 1px solid #ccc !important;
	padding: 0 0 5px !important;
}
.new-template a h4 {
	color: #333;
}
.new-template span {
	display: block;
	font-size: 12px;
	font-weight: normal;
}

/*チェックマーク入り
---------------------------------------------------------------------------*/
ul.check {margin: 0 20px 20px;border: 1px solid #ccc;background: #fff;}
ul.check li {
	border-top: 1px solid #ccc;
	padding: 10px 10px 10px 55px;
	background: url(../images/icon_check1.png) no-repeat 20px 15px / 25px;
}
ul.check li:first-child {border-top: none;}

/*btn1
---------------------------------------------------------------------------*/
.btn1 a {
	display: inline-block;text-decoration: none;
	background: #075f97;
	color: #fff;
	font-size: 18px;
	padding: 10px 40px;
	border: 1px solid transparent;
	box-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}
.btn1 a[target$="_blank"] {
	background-image: url(../images/icon_blank2.png);
	background-position: right top;
	background-size: auto 108px;
	padding: 10px 60px 10px 40px;;
}
.btn1 a[target$="_blank"]:hover {
	background-position: right bottom;
}
.btn1 a:hover {
	background-color: #fff;
	color: #075f97;
	border: 1px solid #075f97;
}
.btn1 a::before {
	content: ">";
	padding-right: 15px;
	font-size: 13px;
	position: relative;bottom: 3px;
}
.big1.btn1 a::before {font-size: 20px;bottom: 6px;}

/*タグ解説ページ*/
.btn1.open a::before {
	content: "▲";
	font-size: 11px;
	bottom: 1px;
}
.close.btn1 a, .open.btn1 a {
	display: block;
	padding: 20px 40px;
}
.close.btn1 a {
	margin-bottom: 100px;
}

/*CMSページ*/
#cms .btn1 a {
	background-color: #bf0751;
}
#cms .btn1 a:hover {
	background-color: #fff;
	color: #bf0751;
	border: 1px solid #bf0751;
}

/*btn-simple
---------------------------------------------------------------------------*/
.btn-simple a {
	display: inline-block;text-decoration: none;
	background: #fff;
	padding: 5px 40px;
	border: 1px solid #ccc;
}
.btn-simple a:hover {
	border: 1px solid #999;
	color: #666;
}

/*point
---------------------------------------------------------------------------*/
.point {
	overflow: hidden;
	padding: 10px 10px 10px 80px !important;
	margin-bottom: 30px !important;
	font-size: 90%;
	line-height: 1.8;
}
img + .point {margin-top: 15px;} 
.point + img {margin-top: -15px;} 

.point0 {
	/*padding-left: 60px !important;*/
	background: #fafafa url(../images/icon0.png) no-repeat 15px center / 30px;
	border: 1px solid #ccc;
	color: #999;
}
.point0 a {color: #999;}
.point1 {
	background: #fcfccd url(../images/attention1.png) no-repeat 15px center / 50px;
	border: 1px solid #ccc;
}
.point2 {
	background: #ff0000 url(../images/attention1.png) no-repeat 15px center / 50px;
	color: #fff;
}
.point2 a {color: #fff !important;}
.point2 .color1 {color: #ffff00 !important;}

/*box1
---------------------------------------------------------------------------*/
.box1 {
	padding: 30px !important;
	border: 1px solid #999;
	margin-bottom: 30px !important;
	background: #fff;
	box-shadow: 2px 2px 2px rgba(0,0,0,0.1);
}
.box1 p {padding-left: 0 !important;padding-right: 0 !important;}
.box1 .point {padding-left: 80px !important;padding-right: 10px !important;}
.box1 *:last-child {margin-bottom: 0px !important;}

/*box2
---------------------------------------------------------------------------*/
.box2 {
	background: #222;
	color: #ccc;
	padding: 20px 0;
	margin-left: 20px;margin-right: 20px;
	margin-top: -30px;
	margin-bottom: 30px;
}
.box2 a {color: #ccc;}
.box2 .box1 {color: #666;}.box2 .box1 a {color: #666;}
.box2 *:last-child {margin-bottom: 0px !important;}
/*.box2 h4 {color: #fff !important;border: none !important;background: #bf0751;text-align: center;}*/

/*FAQ（dl.faq dtの80pxは.linkの値）
---------------------------------------------------------------------------*/
dl.faq {padding: 0 20px;}
dl.faq.faq-top {padding-bottom: 20px;}

dl.faq.faq-top dt {background: url(../images/faq_q.png) no-repeat left 2px / 30px;}
#cms dl.faq.faq-top dt {background: url(../images/faq_cms_q.png) no-repeat left 2px / 30px;}
#others dl.faq.faq-top dt {background: url(../images/faq_others_q.png) no-repeat left 2px / 30px;}

dl.faq.faq-top.last {
	padding-bottom: 50px;
	margin-bottom: 50px;
	border-bottom: 1px solid #ccc;
}

dl.faq dt {
	padding-left: 30px;
	background: url(../images/faq_q.png) no-repeat left 80px / 30px;
}
#cms dl.faq dt {
	padding-left: 30px;
	background: url(../images/faq_cms_q.png) no-repeat left 80px / 30px;
}
#others dl.faq dt {
	padding-left: 30px;
	background: url(../images/faq_others_q.png) no-repeat left 80px / 30px;
}

dl.faq dt,dl.faq dt a {
	color: #bf0751;
}
#cms dl.faq dt, #cms dl.faq dt a {
	color: #075f97;
}
#others dl.faq dt, #others dl.faq dt a {
	color: #333;
}

dl.faq dd {
	padding-left: 30px;
	background: url(../images/faq_cms_a.png) no-repeat left 2px / 30px;
	padding-bottom: 20px;
	margin-bottom: 20px;
}

/*テンプレート一覧ページ
---------------------------------------------------------------------------*/
.tempbox [target$="_blank"] {background: none;padding-right: 0;margin-right:0;}
.tempbox p.c img {width: 600px;}
.tempbox .list {
	width: 18.5%;
	margin-left: 1.3%;
	margin-bottom: 20px;
	float: left;
	text-align: center;
}
.tempbox .list .img {
	border: 1px solid #ccc;
}
.tempbox .list p {
	padding: 0 !important;
	margin: 0 !important;
	font-size: 12px;
}
.tempbox .list p.text strong {
	overflow: hidden;display: block;
	height: 2em;
}
.tempbox .list a.downloadbtn {
	text-decoration: none;overflow: hidden;display: block;
	height: 2em;
	background: #bf0751 url(../images/icon_download.png) no-repeat 20px center / 15px;
	color: #fff;
}
#cms .tempbox .list a.downloadbtn {
	background-color: #075f97;
}
.tempbox h3 + .c {margin-top: 40px;}

/*アイコン*/
.tempbox p.icon {margin: -15px 0 25px 20px !important;}
.tempbox p.icon span {
	display: inline-block;
	border:1px solid #ccc;
	font-size: 12px;
	line-height: 1.2;
	padding: 3px 8px;
	margin-right: 5px;
}
.tempbox p.icon span a {
	text-decoration: none;
}

/*検索ブロック（テンプレート一覧ページ内）
---------------------------------------------------------------------------*/
.specialbox img {width: 20px;margin-right: 10px;}

/*CMSバージョン履歴リンクテキスト
---------------------------------------------------------------------------*/
.ver-menu a::before {content: ">>>　";}
.ver-menu a::after {content: "　<<<";}
.ver-menu a {
	text-decoration: none;display: block;text-align: center;
	margin: 50px auto 0;
	max-width: 600px;
	border: 1px solid #075f97;
	color: #075f97;
	background: #fff;
	font-size: 13px;
	padding: 10px 0;
}
.ver-menu a:hover {
	background: #075f97;
	color: #fff;
}

/*デモサイトサムネイル（各CMSトップページ）
---------------------------------------------------------------------------*/
.demo-box {overflow: hidden;padding-top: 10px;}
/*box１個あたり*/
.demo-box div {
	float: left;
	width: 31%;
	padding: 0 !important;margin: 0 !important;
	margin-left: 1.5% !important;
	margin-bottom: 20px !important;
	position: relative;
	border: 1px solid #ccc;
	background: #000;
	box-shadow: 2px 3px 5px rgba(0,0,0,0.2);
}
/*テキストブロック*/
.demo-box p {
	margin: 0 !important;
	position: absolute;left: 0px;bottom: 0px;
	line-height: 1.5;
	background: #000;
	background: rgba(0,0,0,0.7);
	color: #fff;
	width: 90%;
	padding: 5px 5% 15px !important;
	font-size: 13px;
}
.demo-box p::first-line {
	font-size: 20px;
	line-height: 2;
}
/*サムネイル画像*/
.demo-box a img {opacity: 0.8;}
.demo-box a:hover img {opacity: 1;}

/*clickアイコン*/
.demo-box div .click {
	position: absolute;
	right: -8px;
	top: -8px;
	background: #ff0000 url(../images/icon_hand.png) no-repeat center 10px / 26px;
	color: #fff;
	width: 70px;
	height: 30px;padding-top: 40px;
	text-align: center;
	border-radius: 50%;
	font-size: 13px;
}
.demo-box div:hover .click {
	transform: scale(1.05);
	transition: 0.2s;
}

/*マニュアル（YouTube）
---------------------------------------------------------------------------*/
.youtube-box {
	max-width: 1100px;
	margin: 0 auto 80px;
}
.youtube {
	width: 100%;
	height: 0;
	padding-top: 56.25%;
	margin-bottom: 20px;
	position: relative;
	overflow: hidden;
	border: 1px solid #333;
}
.youtube iframe {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
}
.even {
	width: 100% !important;
	margin: 0 0 30px !important;
}
.even tr:nth-child(even) {
	background: #eaeff3;
}
.even td {
	border: 1px dashed #999 !important;
	padding: 5px 15px !important;
}
.even td strong {
	display: inline-block;
	font-size: 13px;
	background: #333;
	color: #ccc;
	padding: 0px 5px;
	border-radius: 3px;
	margin-right: 10px;
}

/*検索ページ（search.html）
---------------------------------------------------------------------------*/
#search-box {
	width: 50%;
	margin: 0 auto 100px;
}

/*ta1設定
---------------------------------------------------------------------------*/
.ta1 caption {
	border: 1px solid #999;
	border-bottom: none;
	background: #f3e0e8;
	font-weight: bold;
	padding: 15px 20px;
	text-align: center;
}
#cms .ta1 caption {background: #e0edf5;}
.ta1 .tamidashi {
	width: auto;
	background: #f6ebc6;
	text-align: left;
}
.ta1 {
	width: 100%;table-layout: fixed;margin: 0 0 30px;
	background: #fff;
}
.ta1, .ta1 td, .ta1 th {
	border: 1px solid #999;
	padding: 15px 20px;
	word-break: break-all;
}
.ta1 th {
	width: 200px;
	text-align: center;
}
.ta1 td *:last-child {margin-bottom: 0 !important;}
.ta1 td ul.disc {margin-left: 20px;margin-right: 0;}
.ta1 td ol {margin-left: 25px;margin-right: 0;}
.ta1 td label {display: inline-block;margin-right: 5px;}
.ta1 td.specialbox label{margin-right: 0;}

/*inputボタン（btn）
---------------------------------------------------------------------------*/
input[type="submit"].btn,
input[type="button"].btn,
input[type="reset"].btn {
	padding: 5px 10px;
	border: 1px solid #bf0751;
	font-size: 20px;
	background: #bf0751;
	color: #fff;
}
input[type="submit"].btn:hover,
input[type="button"].btn:hover,
input[type="reset"].btn:hover {
	background: #fff;
	color: #bf0751;
}

/*ページャー
---------------------------------------------------------------------------*/
.pager {clear: both;text-align: center;line-height: 1;padding-bottom: 30px;}
.pager li {display: inline-block;margin-bottom: 5px;}
.pager a {text-decoration: none;display: block;}

.pager li.current,.pager li a {padding: 14px 16px;box-shadow: 1px 1px 1px rgba(0,0,0,0.1);}
.pager li.current {border: 1px solid #bf0751;background: #bf0751;color: #fff;box-shadow: none;}
.pager li a {border: 1px solid #ccc;background: #fff;}
.pager li a:hover {border: 1px solid #bf0751;}

/*PAGE TOP（↑）設定
---------------------------------------------------------------------------*/
body .nav-fix-pos-pagetop a {display: none;}
body.is-fixed-pagetop .nav-fix-pos-pagetop a {
	display: block;text-decoration: none;text-align: center;position: fixed;z-index: 1;
	animation-name: frame1;animation-duration: 1S;animation-fill-mode: forwards;
	width: 50px;line-height: 50px;
	bottom: 20px;right: 3%;
	background: #666;
	background: rgba(0,0,0,0.6);
	color: #fff;
	border: 1px solid #fff;
}
body.is-fixed-pagetop .nav-fix-pos-pagetop a:hover {background: #999;}

/*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;
}



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

/*デモサイトサムネイル（各CMSトップページ）
---------------------------------------------------------------------------*/
/*box１個あたり*/
.demo-box div {
	width: 46%;
	margin-left: 2.5% !important;
}

}



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

/*トップページ新着テンプレブロック
---------------------------------------------------------------------------*/
.new-template div {
	width: 45%;
}

/*テンプレート一覧ページ
---------------------------------------------------------------------------*/
.tempbox .list {
	width: 40%;
	margin-left: 6%;
}
.tempbox .list a.downloadbtn {
	background-image: none;
}

/*box1
---------------------------------------------------------------------------*/
.box1 {
	padding: 20px !important;
}

/*ta1設定
---------------------------------------------------------------------------*/
.ta1 caption,.ta1, .ta1 td, .ta1 th {padding: 5px 10px;}
.ta1 th {width: 160px;}

/*チェックマーク入り
---------------------------------------------------------------------------*/
ul.check {margin: 0 0 20px;}
ul.check li {
	padding: 5px 10px 5px 40px;
	background: url(../images/icon_check1.png) no-repeat 10px 12px / 20px;
}

/*mainimg（トップページ）
---------------------------------------------------------------------------*/
#cms #mainimg {padding-top: 44px;}

/*CMSバージョン履歴リンクテキスト
---------------------------------------------------------------------------*/
.ver-menu {margin-bottom: -50px;/*下のコンテンツとの余白をつめる*/}
.ver-menu a::before,.ver-menu a::after {content:none;}

/*デモサイトサムネイル（各CMSトップページ）
---------------------------------------------------------------------------*/
/*テキストブロック*/
.demo-box p {
	width: 96%;
	padding: 2px 2% 10px !important;
	font-size: 12px;
}
.demo-box p::first-line {
	font-size: 15px;
}

}



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

/*CMSバージョン履歴リンクテキスト
---------------------------------------------------------------------------*/
.ver-menu a {
	margin: 20px 3% 0;
}

}



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

/*fine-name
---------------------------------------------------------------------------*/
.file-name {
	padding: 0 10px 0 5px;
	font-size: 10px;
	width: 100px;
}

/*box2
---------------------------------------------------------------------------*/
.box2 {
	margin-left: 10px;margin-right: 10px;
	margin-top: -20px;
}

/*テンプレート一覧ページ
---------------------------------------------------------------------------*/
.tempbox .list {
	width: 47%;
	margin-left: 2%;
}
.tempbox p * {
	font-size: 2.93vw !important;
}
/*アイコン*/
.tempbox p.icon {margin-left: 0px !important;}

/*チェックマーク入り
---------------------------------------------------------------------------*/
ul.check li {
	background: url(../images/icon_check1.png) no-repeat 10px center / 20px;
}

/*FAQ（dl.faq dtの80pxは.linkの値）
---------------------------------------------------------------------------*/
dl.faq {padding: 0;}
dl.faq.faq-top dt,dl.faq dd {background-position: left -3px !important;}
dl.faq dt {background-position: left 75px !important;}

/*トップページ新着テンプレブロック
---------------------------------------------------------------------------*/
.new-template div {
	width: auto;
	float: none;
}

/*btn1
---------------------------------------------------------------------------*/
.btn1 a {
	padding: 5px 20px;
	font-size: 14px;
}
.btn1 a::before {
	padding-right: 0px;
}
.close.btn1 a {
	margin-bottom: 30px;
}

/*検索ページ（search.html）
---------------------------------------------------------------------------*/
#search-box {
	width: 100%;
}

/*inputボタン（btn）
---------------------------------------------------------------------------*/
input[type="submit"].btn,
input[type="button"].btn,
input[type="reset"].btn {
	padding: 5px;
	font-size: 16px;
}

/*デモサイトサムネイル（各CMSトップページ）
---------------------------------------------------------------------------*/
/*box１個あたり*/
.demo-box div {
	float: none;
	width: 80%;
	margin: 0 auto 20px !important;
}

/*ta1設定
---------------------------------------------------------------------------*/
.ta1 th {width: 25%;}

}