@charset "UTF-8";
/*   
Theme Name: sl
Theme URI: 
Description: sl 
Author: sl
Author URI: http://k-tsubo.com/kbusiness/
Version: 0.0.1
*/

/* --------------------------
	body
-------------------------- */

body {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 14px;
	line-height: 1.8;
	margin:0 auto;
	text-align:center;
	color: #111;
	background:url(http://k-tsubo.com/kbusiness/wp-content/themes/sl/images/bg.png) repeat top left;
}

a {text-decoration: none;}
.clrar{ clear:both;}
.line{ border-bottom:1px solid #111;}

/* --------------------------
	コンテンツ
-------------------------- */
#content{
	width:950px;
	margin: 0 auto;
}
.row {
	width: 100%;
	max-width: 950px;
	margin: 0 auto;
  	text-align:center;
}

.main {
	width:630px;
    margin: 30px 0;
	float:right;
  }

.mainin{
	border:1px solid #d5d5d5;
	background:#fff;
	padding:10px;
	margin-bottom:30px;
}
.side {
	width:300px;
    margin: 30px 0px 30px 0px;
	float:left;
}

.sidein{
	margin-bottom:30px;
	border:1px solid #d5d5d5;
	background:#fff;
	padding:20px 0;
}
.side li {
	padding-left: 1.2em;
 	text-indent: -1.2em;
}
.main2 {
	width:680px;
    margin: 20px 20px 10px 20px;
	float:left;
  }

.side2 {
	width:200px;
    margin: 20px 10px 30px 10px;
	float:left;
	box-shadow:0 0 5px #ccc;
}

img {
    max-width: 100%;
    height: auto;
}

.pan{
	margin-top:20px;
	margin-left:20px;
	font-size:12px;
	text-align:left;
	}

#pagetop {
	background-color: #333333;
	width: 90px;
	position: fixed;
	bottom: 10px;
	right: 10px;
	opacity:0.8;
	color: #fff;
	padding: 5px 10px 5px 0px;
	border-radius: 5px;
}
#pagetop a {
	text-decoration: none;
	color: #fff;
	width: 90px;
	text-align: center;
	display: block;
	border-radius: 10px;
	opacity:0.8;
	font-size:12px;
}
#pagetop a:hover {
	text-decoration: none;
	opacity:0.5;
}

.youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  margin-bottom:30px;
}
.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}

/* --------------------------
	header
-------------------------- */

header {
	width: 100%;
	height:200px;
	margin:0 auto;
	text-align: center;
	background:#e0e0e0;
box-shadow:0px 5px 9px -3px #bdbdbd;
-moz-box-shadow:0px 5px 9px -3px #bdbdbd;
-webkit-box-shadow:0px 5px 9px -3px #bdbdbd;}

.headtxt{
	width:50%;
	font-size:12px;
	text-align:left;
	margin-left:25px;
	}

/* --------------------------
	配置
-------------------------- */

.pb10{ padding-bottom:10px;}
.pb20{ padding-bottom:20px;}
.pb30{ padding-bottom:30px;}
.pb60{ padding-bottom:60px;}

.text-right{ text-align:right !important;}
.text-center{ text-align:center !important;}
.text-left{ text-align:left !important;}

.bold{ font-weight:bold;}

/* --------------------------
	font
-------------------------- */

h1:before {
  content: "\f03d";
  font-family: FontAwesome;
  color:#0093d5;
  padding-right:10px;
}

h1 {
	font-size:26px;
	line-height:150%;
	font-weight:bold;
	text-align:left;
	color:#333;
	padding:5px 5px 10px 5px;
	margin-bottom:30px;
	border-bottom:1px solid #999;
	padding-left: 1.3em;
 	text-indent: -1.3em;
}

h2 {
	font-size:28px;
	margin:20px 25px 10px 25px;
	line-height:130%;
	font-weight:bold;
	text-align:left;
	color:#333;
}
h2 a {
	color:#333;
}

h3 {
	font-size:20px;
	line-height:150%;
	font-weight:bold;
	text-align:left;
	color:#333;
	padding:5px 5px 2px 5px;
	margin-bottom:30px;
}

.h3color1{background:#ffb5c1; border-bottom:5px solid #ff8c9f;}
.h3color2{background:#b3fcc5; border-bottom:5px solid #3cc960;}
.h3color3{background:#8cd7fe; border-bottom:5px solid #2eb2fd;}
.h3color4{background:#fce65f; border-bottom:5px solid #ff9a26;}
.h3color5{background:#ddb6fc; border-bottom:5px solid #8a3fc5;}

h4 {
	font-size:14px;
	margin:0 auto;
	line-height:200%;
	font-weight: normal;
	text-align:center;
	color:#333;
}

.h4color1{background:#ffb5c1; border-top:2px solid #ff8c9f; border-bottom:2px solid #ff8c9f;}
.h4color2{background:#b3fcc5; border-top:2px solid #3cc960; border-bottom:2px solid #3cc960;}
.h4color3{background:#8cd7fe; border-top:2px solid #2eb2fd; border-bottom:2px solid #2eb2fd;}
.h4color4{background:#fce65f; border-top:2px solid #ff9a26; border-bottom:2px solid #ff9a26;}
.h4color5{background:#ddb6fc; border-top:2px solid #8a3fc5; border-bottom:2px solid #8a3fc5;}

p {
	text-align:left;
	padding-left:10px;
	padding-bottom: 20px;
}

.list-links{width: 90%; margin:10px auto;}

ol{ list-style-type:none; margin:0; padding:0; text-align:left;}
.fn{ font-size:20px; font-weight:bold;}
.reply{ text-align:right;}

ul{ list-style-type:none; margin:0; padding:0;}
.list-links > li a::before {
  position: absolute;
  content: "\f138";
  font-family: FontAwesome;
  top: 8px;
  left: 5px;
  color:#0093d5;
}

.list-links > li {
	font-size:14px;
	text-align:left;
	position: relative;
	border-bottom: 1px dotted #ddd;
	padding-left: 0em;
 	text-indent: -0em;
}

.list-links > li a {
  display: block;
  position: relative;
  padding: 7px 10px 5px 20px;
  color:#333;
}

.list-links > li.listc1 a:hover {background:#f4fcff;}

dl{ margin-left:20px;}

dt a:before {
  content: "¥f138";
  font-family: FontAwesome;
  color:#666;
  margin-right:5px;
}
dt{
	font-size:14px;
	text-align:left;
	padding-top : 10px;    
	padding-bottom : 5px;
	padding-left : 20px;
	width : 300px;
	float : left;
	clear : both;
}

dd a:before {
  content: "¥f138";
  font-family: FontAwesome;
  color:#666;
  margin-right:5px;
}

dd{    
	font-size:14px;
	text-align:left;
	padding-top : 10px;
	padding-left : 40px;
	padding-right : 10px;
	padding-bottom : 5px;
	width : 300px;
	margin-left : 300px;
}

dt a:hover,
dd a:hover{ border-bottom:1px solid #00C;}

.f11{ font-size:11px !important;}
.f12{ font-size:12px !important;}
.f18{ font-size:18px !important;}
.f20{ font-size:20px !important;}
.f25{ font-size:25px !important;}
.f30{ font-size:30px !important;}
.f35{ font-size:35px !important;}
.f40{ font-size:40px !important;}


.bann1{
	border-radius: 8px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	background:#0399b4;
	width:850px;
	margin:0 auto 30px auto;
}
.bann1-b {
	width:836px;
	font-size:30px;
   font-family:"メイリオ",Meiryo,verdana,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
   background: #0399b4;
   color: #fff;
   display: inline-block;   
   letter-spacing: 0;   
	padding: 10px 0;
	margin-top:5px;
	margin-bottom: 5px;
   height: auto;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border:1px solid #fff;
}

.bann2{
	border-radius: 8px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	background:#ff698c;
	width:770px;
	margin:0 auto 30px auto;
}
.bann2-b {
	width:746px;
	font-size:22px;
   font-family:"メイリオ",Meiryo,verdana,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
   background: #ff698c;
   color: #fff;
   display: inline-block;   
   letter-spacing: 0;   
	padding: 10px 0 10px 10px;;
	margin-top:5px;
	margin-bottom: 5px;
   height: auto;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border:1px solid #fff;
	text-align:left;
}

#commentform {
    display: flex;
    flex-direction: column;
}

/*注意書き*/
.comment-notes {
    order: -4;
}

/*コメント記入欄*/
.comment-form-comment {
    order: -1;
}
 
/*名前*/
.comment-form-author {
    order: -3;
}

/*メールアドレス*/
.comment-form-email {
    order: -2;
}

/*ウェブサイト*/
.comment-form-url {
	display:none;
}

/*コメント送信ボタン*/
.form-submit {
    order: 0;
}

.comment-lists-wrap {
}

.comment-lists-wrap ol {
    list-style-position: inside;
}

.comment-lists-wrap ol li{
     overflow: hidden;
}

.comment-lists-wrap ol li.even{　/* コメントグループの区切り */
     border-bottom: 1px solid #F9003C;
}

.comment-lists-wrap ol .comment {
}
.comment-lists-wrap ol .children { /* 返信コメントの部分 */
     margin-left: 10%;
}

.reply{/* 返信ボタン */
     background-color:#E5E5E5;
     line-height: 20px;
     width: 50px;
     font-size: 10px;
     text-align: center;
     border: 1px solid #626262;
     float: right;
     margin-bottom: 2%;
}

.reply a {
     color:#626262;
     display: block;
}

.comment-author{/* アバター */
}

.comment-author img{
}

span.says{/* コメント投稿者の「より」を非表示 */
     display: none;
}

.comment-body{
     clear: both;
     margin-top: 2%;
     overflow: hidden;    
}

.comment-body p{/* 文章部分 */
     overflow: hidden;
     padding:2%;
     margin: 0 0 2% 0!important;
}

.fn {/* コメント投稿者の名前の部分（デフォルトではイタリックになってる部分） */
    font-style: normal;
    text-align: left;
}
.comment-meta{/* コメント投稿日 */
     text-align: left;
	 font-size:11px;
	 padding-left:40px;
	 pointer-events: none;
}

.comment-meta a{
     color: #626262;
}

.comment{
	border:1px solid #d5d5d5;
	background:#fff;
	padding:10px;
	margin-bottom:30px;
}
a.url{pointer-events: none; color:#111;}

input[type="text"],
input[type="email"],
textarea{
	border:1px solid #CCC;
	display:block;
	width:95%;
	padding:10px;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}
input[type="submit"] {
	width:98%;
	font-size:16px;
   color: #666;
   display: inline-block;   
	text-decoration: none;
   letter-spacing: 0;   
	padding: 5px 0;
	margin-top:5px;
	margin-bottom: 5px;
   border: none;
   cursor: pointer;
   height: auto;
   text-transform: none;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border:1px solid #CCC;
	background:#E8E8E8;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #FAFAFA), color-stop(1.00, #E8E8E8));
background: -webkit-linear-gradient(#FAFAFA, #E8E8E8);
background: -moz-linear-gradient(#FAFAFA, #E8E8E8);
background: -o-linear-gradient(#FAFAFA, #E8E8E8);
background: -ms-linear-gradient(#FAFAFA, #E8E8E8);
background: linear-gradient(#FAFAFA, #E8E8E8);
}

input[type="submit"]:hover {
opacity: 0.8;
}
.required{ color:red;}
.comment-lists-wrap h3{
	border:1px solid #CCC;
	border-bottom:0;
	background:#fff;
	margin:0 auto;
	}

.comment-lists-wrap h3:before {
  content: "\f0e6";
  font-family: FontAwesome;
  color:#666;
  padding:10px;
}
/* --------------------------
	box
-------------------------- */

.box{
	background:#f9f7f0;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border:1px dashed #e4e3d7;
	margin-bottom:50px;
	padding:20px 20px 0 20px;;
}


/* --------------------------
	footer
-------------------------- */

footer {
	clear:both;
	padding:10px 0 10px 0;
	color: #555;
	font-size: 12px;
	line-height: 180%;
	background:#e0e0e0;
	text-align:center;  
}
footer a, footer a:visited { color: #666; }
footer a:hover, footer a:focus { color: #333; }



/* --------------------------
     sp
-------------------------- */

@media only screen and (max-width: 767px) {
table tr td{border:0;}
td{ display:block;
	  padding:5px 5px 0px 10px !important;
	}
header {
	height:auto;
}
.row {
	width: 90%;
	margin: 0 auto;
  	text-align:center;
}
h1 {
	font-size:14px;
	line-height:150%;
	font-weight:bold;
	text-align:left;
	color:#333;
	padding:5px 5px 10px 5px;
	margin-bottom:30px;
	border-bottom:1px solid #999;
	padding-left: 1.3em;
 	text-indent: -1.3em;
}
h2 {
	font-size:20px;
	margin:10px 25px 5px 25px;
	line-height:130%;
	font-weight:bold;
	text-align:left;
	color:#333;
}
.headtxt{
	width:90%;
	font-size:12px;
	text-align:left;
	margin-left:25px;
	}
#content{width: 100%;}
.main {
	width: 90%;	
    margin: 10px 20px;
}
.side {
	width: 90%;
    margin: 10px 20px;
}
.main2 {
	width: 90%;	
    margin: 10px 20px;
}
.side2 {
	width: 90%;
    margin: 10px 20px;
}

dt{float:none; width: 90%; padding-left:10px;}
dd{	width: 90%;	margin-left:0px; padding-left:10px;}
}