@charset "utf-8";

/* =Reset default browser CSS.
Based on work by Eric Meyer:http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td{border:0;font-family:inherit;font-size:100%;font-style:inherit;font-weight:inherit;margin:0;outline:0;padding:0;vertical-align:baseline;}
:focus{outline:0;}

ol, ul{list-style:none;}
table{border-collapse:separate;border-spacing:0;}
caption, th, td{font-weight:normal;text-align:left;}
blockquote:before, blockquote:after,q:before, q:after{content:"";}
blockquote, q{quotes:"" "";}
a img{border:0;}
figure{margin:0}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{display:block;}
/* -------------------------------------------------------------- */

body{
color:#555;
font-size:13px;
font-family:verdana,"ヒラギノ丸ゴ ProN W4","Hiragino Maru Gothic ProN","メイリオ","Meiryo","ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
line-height:1.7;
-webkit-text-size-adjust:100%;
background:#f7f7f7;
}


/* リンク設定
------------------------------------------------------------*/
a{color:#6caefe;text-decoration:none;}
a:hover{color:#488fdd;}
a:active, a:focus {outline:0;}


/* 全体
------------------------------------------------------------*/
/* #wrapper{
margin:0 auto;
padding:0 1%;
width:98%;
position:relative;
} */

.inner{
margin:0 auto;
width:100%;
}


/*************
/* ヘッダー
*************/
#header{
	height: auto;
	padding: 15px 20px;
	background-color: #f8f8f8;
	border-bottom: 1px solid #eee;
}

/*************
/* 会社情報（ロゴ＋連絡先）
*************/
.company-info {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	max-width: 1200px;
	margin: 10px auto 0 auto;
}

/*************
/* ロゴ
*************/
.logo a{
	color:#333;
	font-size: 2.5em;
	font-weight: bold;
	text-decoration: none;
	line-height: 1.2;
}

/*************
/* 連絡先詳細
*************/
.contact-details {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
  	margin-top: 10px; /* ロゴとの間隔 */
  	width: 100%;
	color: #555;
}

/*************
/* 左側の連絡先情報（電話番号、メールアドレスなど）
*************/
.contact-left{
	text-align: left;
}

.contact-left p {
  font-size: 1.1em;
  line-height: 1.4;
  margin-bottom: 5px;
  white-space: nowrap; /* テキストの途中で改行しない */
}

/* 2行目の電話番号（絵文字なし）の位置揃え */
.contact-left .tel-second {
    /* 絵文字の分のスペースを左に開ける */
    padding-left: 1.68em; /* 絵文字の幅とマージンを考慮して調整 */
    /* text-indent: -1.5em; */ /* 実際には `text-indent` は不要かもしれません */
}

/* メールアドレスと電話番号の間の間隔 */
.contact-left p.tel:nth-last-of-type(2) {
    margin-bottom: 10px;
}

.contact-left .label {
  display: none;
}

/*************
/* 右側の連絡先情報（住所）
*************/
.contact-right {
	text-align: right;
}

.contact-right p {
  font-size: 1.1em;
  line-height: 1.4;
  margin-bottom: 5px;
}

.contact-right .label {
  display: none;
}

/**************************
/* メイン画像（トップページ+サブページ）
**************************/
#container {
  display: flex; /* 画像とテキストを横並びにする場合 */
  flex-direction: column; /* デフォルトは縦並び */
  align-items: flex-start; /* 左寄せ */
  margin-bottom: 20px; /* 下の要素との間隔 */
  width: 100%; /* 親要素に合わせて幅を調整 */
  max-width: 500px; /* 必要に応じて最大幅を設定 */
}

#container img {
  max-width: 100%; /* 画像が親要素からはみ出さないように */
  height: auto;
  display: block; /* インライン要素の余白問題を解消 */
  margin-bottom: 10px; /* 画像とテキストの間隔 */
}

.image-separator {
  border: 0;
  height: 1px;
  background: #ccc;
  margin: 10px 0; /* 画像とテキストの間隔 */
  width: 100%;
}

.text-container p {
  padding: 15px;
  border-radius: 3px;
  /* font-size: 1.4em; */ /* 現在の値。これを基準に調整します */
  font-size: 1.5em; /* 例: 少し大きくする (13px * 1.5 = 19.5px) */
  /* または、bodyのフォントサイズを基準にしたいなら、例えば */
  /* font-size: 16px; */ /* または 18px など、具体的なピクセル値で指定 */
  line-height: 1.7; /* 行の高さを少しゆったりさせる */
  margin-bottom: 15px;
  color: #2a3de9; /* 強調色の赤 */
  background-color: white; /* 背景を白に */
  font-weight: bold;
}

.text-container h3 {
  color: #1c86ee; /* 明るい青 */
  margin-top: 0;
  margin-bottom: 10px;
  /* font-size: 1.2em; */ /* 現在の値。これを基準に調整します */
  font-size: 1.3em; /* 例: 見出しも少し大きくする (13px * 1.3 = 16.9px) */
  /* または */
  /* font-size: 20px; */ /* 具体的なピクセル値で指定 */
}

.text-container ul {
  padding-left: 20px;
  margin-bottom: 15px;
}

.text-container li {
  margin-bottom: 8px;
  color: #495057; /* 標準的なグレー */
  /* font-size: 16px; */ /* 現在の値。これを基準に調整します */
  font-size: 1.1em; /* bodyの13pxに対する1.1倍なので、14.3pxに */
  /* または、他のpタグなどと同じくらいにするなら */
  /* font-size: 1.5em; */ /* pタグと同じサイズに */
}

.text-container li strong {
  color: #000; /* 黒でより強調 */
}

.text-container hr {
  border-color: #bbe1fa; /* 薄い水色 */
  margin-top: 20px;
  margin-bottom: 20px;
}

/* レスポンシブ対応 (例: 768px以下の画面幅の場合) */
@media screen and (max-width: 768px) {
  #container {
    padding: 0 15px; /* 左右に少し余白を追加 */
  }
}

#mainBanner{
clear:both;
margin:25px auto 40px;
padding:0;
position:relative;
text-align:center;
}
#mainBanner .inner{position:relative;}

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

.section-title {
	font-size: 32px;
	font-weight: bold;
	margin-bottom: 40px;
	text-align: center;
	color: #333;
  }


/**************************
/* 比較画像
**************************/	
.before-after-section {
	padding: 40px 20px;
  	max-width: 1200px;
  	margin: 0 auto;
}
  
.section-title {
	font-size: 36px;
	text-align: center;
	margin-bottom: 40px;
	color: #222;
}

.before-after-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 40px;
	justify-items: center;
}

.before-after-pair {
	display: flex;
  	justify-content: center;
  	align-items: flex-start;
  	gap: 40px; /* 画像間のスペース */
  	margin-bottom: 40px;
  	flex-wrap: wrap;
}
  
.before-after-item {
	text-align: center;
	max-width: 400px;
}
  
.before-after-labels {
	font-size: 18px;
  	font-weight: bold;
  	margin-bottom: 8px;
  	color: #333;
}

.before-after-item img {
	width: 100%;
	height: auto;
	border-radius: 8px;
	box-shadow: 0 0 8px rgba(0,0,0,0.1);
}
  

.contact-promo {
	max-width: 1000px;
  	margin: 0 auto;
  	padding: 40px 20px;
  	display: flex;
  	gap: 40px;
  	align-items: flex-start;
  	flex-wrap: wrap;
	background-color: #e6f7ff; /* 薄い水色の背景 */
}

.contact-image {
	flex: 1 1 300px;
  	text-align: center;
}
  
.contact-image img {
	max-width: 100%;
  	height: auto;
  	border-radius: 8px;
}
  
.contact-text {
	flex: 1 1 400px;
  	font-size: 16px;
  	line-height: 1.6;
  	color: #333;
}
  
.contact-text h3 {
	font-size: 20px;
  	margin-bottom: 16px;
  	color: #111;
  	font-weight: bold;
}
  
.contact-text p {
	margin: 4px 0;
}
  
.contact-text .contact-btn {
	display: inline-block;
  	margin-top: 16px;
  	padding: 10px 20px;
  	background-color: #0078d7;
  	color: white;
  	text-decoration: none;
  	border-radius: 6px;
}

/* スマホ対応 */
@media (max-width: 768px) {
	.contact-promo {
	  	flex-direction: column;
	  	align-items: center;
	}
  
	.contact--text {
	  	text-align: center;
	}
}


/*************
メイン コンテンツ
*************/
section.content article{
padding:30px 0 20px 0;
margin-bottom:10px;
overflow:hidden;
}

section.toppage article,section.content .archive{border:0;}


/* アーカイブページ */
section.content .archive{
padding:0;
border-bottom:1px dotted #ccc;
}

section.content p{margin-bottom:5px;}

h3.heading{
font-size:16px;
font-weight:normal;
padding:15px 0;
margin-bottom:5px;
border-top:2px solid #ebebeb;
border-bottom:2px solid #ebebeb;
}

section.content img{
max-width:90%;
height:auto;
}

.alignleft{
float:left;
clear:left;
margin:3px 10px 10px 0;
}

.alignright{
float:right;
clear:right;
margin:3px 0 10px 10px;
}


/*************
/* サイドバー
*************/
#sidebar article{
clear:both;
margin-bottom:20px;
}

#sidebar ul{padding:15px 0;}

#sidebar li{
margin-bottom:10px;
padding-bottom:10px;
list-style:none;
border-bottom:1px dashed #ebebeb;
}

#sidebar li:last-child{
border:0;
margin-bottom:0px;
}

#sidebar li a{
color:#555;
font-size:12px;
display:block;
}

#sidebar li a:hover{
color:#999;
font-size:12px;
display:block;
}

#copyright{
clear:both;
padding:20px 0 10px 0;
text-align:center;
font-style:normal;
font-size:10px;
color:#555;
}


/* PC用
------------------------------------------------------------*/
@media only screen and (min-width:960px){
	nav div.panel{
	display:block !important;
	float:left;
	}

	a#menu{display:none;}
	
  #mainNav{
	clear:both;
	z-index:200;
	position:relative;
	}

	#mainNav li{
	float:left;
	position:relative;
	}

	#mainNav li a{
	color:#555;
	display: block;
	text-align: center;
	_float:left;
	font-size:13px;
	width:160px;
	height:30px;
	padding:15px 0;
	border-top:2px solid #ebebeb;
	border-bottom:2px solid #ebebeb;
	}

	#mainNav li a span,#mainNav li a strong{display:block;}

	#mainNav li a span{
	color:#bababa;
	font-size:10px;
	}
	
	#mainNav ul ul{width:160px;background:#fff;}
	#mainNav li ul{display:none;}

	#mainNav li:hover ul{
	display:block;
	position:absolute;
	top:64px;
	z-index:500;
	}
	
	#mainNav li li{
	margin:0;
	float:none;
	width:160px;
	border:0;
	}
  #mainNav li li:last-child{border:0;}
	
	#mainNav li li a{
	width:auto;
	height:auto;
	padding:10px;
	font-size:95%;
	text-align:left;
	border:0;
	}

	#mainNav li li span{padding:0 10px;}
	
	#mainNav li.current-menu-item a{
	border-color:#555;
	}

	#mainNav li.current-menu-item a,#mainNav li a:hover,#mainNav li.current-menu-item li a:hover{
	color:#999;
	}

	#header,#container,.inner{
	width:960px;
	padding:0;
	margin:0 auto;
	}
	
	#container{clear:both;padding:20px 0;}
	
	#main{
	float:right;
	width:680px;
	padding:15px 0 0 0;
	}
	
	#sidebar{
	float:left;
	width:250px;
	padding:15px 0;
	overflow:hidden;
	}
	
	#sidebar article{
	margin-bottom:20px;
	overflow:hidden;
	}
	
	.logo{width:500px;}
	
	/* グリッド全体 */
	.gridWrapper{
	display:flex;
	justify-content: center;
	gap: 40px;
	flex-wrap: wrap;
	width: 100%;
	/* table-layout: fixed; */
	/* border-collapse:separate;
	border-spacing:0px; */
	}
	
	/* グリッド */
	.grid{
	width:33.33%;
	display:table-cell;
	}

	.label {
		text-align: center;
		font-weight: bold;
		margin-top: 10px;
		font-size: 18px;
	  }
	  
	  .description {
		margin-top: 40px;
		text-align: center;
		max-width: 700px;
		margin-left: auto;
		margin-right: auto;
	  }
	  
	  .description h3 {
		margin-bottom: 10px;
		font-size: 22px;
	  }
	  
	  .description p {
		font-size: 16px;
		line-height: 1.6;
	  }
	  

}


@media only screen and (max-width:959px){
	*{
    -webkit-box-sizing:border-box;
       -moz-box-sizing:border-box;
         -o-box-sizing:border-box;
        -ms-box-sizing:border-box;
            box-sizing:border-box;
	}
	
	#mainNav{
	clear:both;
	width:100%;
	margin:0 auto;
	padding:0;
  border:1px solid #e4e4e4;
	border-left:0;
	border-right:0;
	}

	#mainNav a.menu{
	color:#555;
	width:100%;
	display:block;
	height:40px;
	line-height:40px;
	font-weight: bold;
	text-align:left;
	}

	#mainNav a#menu span{
	padding-left:10px;
	}
	#mainNav a.menu span:before{content:"≡ ";}
	#mainNav a.menuOpen span:before{content:"× ";}

	#mainNav a#menu:hover{cursor:pointer;}

	nav .panel{
	display:none;
	width:100%;
	position:relative;
	right:0;
	top:0;
	z-index:1;
	}
	
	#mainNav ul{margin:0;padding:0;}

  #mainNav li{
	float:none;
	clear:both;
	width:100%;
	height:auto;
	line-height:1.2;
	}

	#mainNav li a,#mainNav li.current-menu-item li a{
	color:#555;
	display: block;
	padding:15px 10px;
	text-align:left;
	border-bottom:1px dashed #ccc;
	}
	
 	#mainNav li a span{padding-left:10px;}
	
	
	#mainNav ul > li:last-child a{border:0;}
	#mainNav li li:last-child a{border-bottom:1px dashed #ccc;}
 
	#mainNav li.current-menu-item a,#mainNav li a:hover,#mainNav li.current-menu-item a,#mainNav li a:active, #mainNav li li.current-menu-item a, #mainNav li.current-menu-item li a:hover, #mainNav li.current-menu-item li a:active{
	color:#555;
	}

	#mainNav li li{
	float:left;
	border:0;
	}

	#mainNav li li a, #mainNav li.current-menu-item li a, #mainNav li li.current-menu-item a{
	padding-left:40px;
	background:url(images/sub1.png) no-repeat 20px 18px;
	}

	#mainNav li li.current-menu-item a,#mainNav li li a:hover, #mainNav li.current-menu-item li a:hover{background:url(images/sub1.png) no-repeat 20px -62px;}

	#mainNav li li:last-child a{background:url(images/subLast.png) no-repeat 20px 20px;}
	#mainNav li li:last-child.current-menu-item a,#mainNav li li:last-child a:hover,#mainNav li.current-menu-item li:last-child a:hover{background:url(images/subLast.png) no-repeat 20px -65px;}

	nav div.panel{float:none;}
	
	#header{padding-left:10px;}
	
	#main{padding-top:15px;}
	section.toppage{margin:0;}
	#sidebar{padding-bottom:15px;}
	#sidebar article{padding:7px 8px;}
	
	#footer .grid,#footer ul.footnav{float:none;width:100%;text-align:center;}
	ul.footnav li{float:none;display:inline-block;}
	
	.grid{
	float:left;
	width:32%;
	margin:10px 0 0 1%;
	}

	#footer .grid img,#footer .info{float:none;}
	#footer .grid p{display:block;}
	#footer #info .info{float:none;text-align:center;}
	#footer.logo,#footer .info{width:100%;float:none;}
	#footer .logo p{float:none;display:block;	}
	#footer .logo img{float:none;padding:0;}
}


@media only screen and (max-width:640px){
	#header{height:auto;padding-bottom:20px;}
	
	#header h1,.logo,.info{text-align:center;}
	
	.logo,.info{clear:both;width:100%;float:none;}
	
	.logo p{float:none;display:block;}
	.logo img{float:none;padding:0;}
	
	.box img{
	float:left;
	margin-right:5px;
	}
	
	.box h3{padding-top:0;}

  .alignleft,.alignright,img.alignleft,img.alignright{float:none;display:block;margin:0 auto 10px;}

}


@media only screen and (max-width:480px){
	.grid{width:100%;margin:10px 0;}
	.box img{max-width:100px;}
	#mainBanner h2,#mainBanner p{font-size:80%;}
}