@charset "utf-8";
html {
  scroll-behavior: smooth;
}

body {
	font-family: "メイリオ";
	margin: 0;
	padding: 0;
	background: #FFF;
}

/* ~~ エレメント / タグセレクター ~~ */
ul, ol, dl { 
	padding: 0;
	margin: 0;
}

li {
	font-family: "メイリオ";
	font-size: 13px;
	list-style-type: none;
	margin: 0;
	padding: 0;
	text-align: justify;
	text-justify: inter-ideograph;
}


li a {
	font-size: 13px;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all  0.3s ease;
	list-style: none;
	text-decoration: none;
}



h4, h5, h6, p {
	margin-top: 0;	 /* 上マージンを削除すると、マージンを含む div からマージンがはみ出す場合があるという問題を回避できます。残った下マージンにより、後続のエレメントからは離されます。 */
	padding-right: 15px;
	padding-left: 15px; /* div 自体ではなく div 内でエレメントの両側に余白を追加すると、ボックスモデル計算が不要になります。代わりに、両側に余白を指定した div をネストして使用することもできます。 */
}


p {
	font-family: "メイリオ";
	font-size: 13px;
	margin: 0;
	padding: 0;
	text-align: justify;
	text-justify: inter-ideograph;
}


p a { /* このセレクターは、一部のブラウザーでイメージをリンクで囲んだ場合にイメージの周囲に表示される初期設定の青いボーダーを削除します。 */
	font-family: "メイリオ";
	font-size: 13px;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all  0.3s ease;
}


a img { /* このセレクターは、一部のブラウザーでイメージをリンクで囲んだ場合にイメージの周囲に表示される初期設定の青いボーダーを削除します。 */
	border: none;
}

/* ~~ サイトのリンクのスタイル付けは、ホバー効果を作成するセレクターグループも含め、この順序にする必要があります。~~ */
a:link {
	color:#414958;
	text-decoration: underline; /* 非常に特殊な表示方法でリンクをスタイル付けする場合を除き、一目で見分けられるように下線を指定することをお勧めします。 */
}
a:visited {
	color: #4E5869;
	text-decoration: underline;
}
a:hover, a:active, a:focus { /* このセレクターグループは、キーボードを使用するユーザーに対し、マウスを使用するユーザーと同じホバー効果を提供します。 */
	text-decoration: none;
}

/* ~~ このコンテナが他のすべての div を囲み、パーセンテージに基づいた幅を指定します。~~ */


h1 {
	display: block;
	float: left;
	font-size: 13px;
	margin: 36px 0 0;
	line-height: 20px;
}


/*************************************************************************/
/** スマホ切り換え（PC側） ここから　↓↓↓　*****************************/
/*************************************************************************/
.container .switch {
	text-align: center;
	margin: 20px 0;
	display: none;/**スマホでアクセスしたときのみ表示**/
}


.container .switch a {
	color: #00F;
	text-decoration: underline;
}
/*************************************************************************/
/** スマホ切り換え（PC側） ここまで　↑↑↑　*****************************/
/*************************************************************************/



/** コンテント ここから　↓↓↓　*****************************************************************************************************/

.content {
	width: 1024px;
	height: auto;
	margin: 0 auto;
	padding: 0 0 10px 0;
	background: #FFF;
	clear: both;
}



.content .top-img {
	overflow: hidden;
	float: left;
	width: 698px;
	height: auto;
	padding: 30px 0 30px 20px;
	margin: 0 0 0 30px;
}


.content .top-img h2 {
	font-family: "メイリオ";
	font-size: 40px;
	line-height: 45px;
	margin: 0;
	padding: 0 0 10px;
	border-bottom: 2px solid #333;
}


.content .top-img h3 {
	font-family: "メイリオ";
	font-size: 20px;
	margin: 1px 0 0 0;
	padding: 0 0 10px;
	text-align: right;
	border-top: 1px solid #666;
}


/********************/
.content .top-img ul.last {
	display: block;
	float: left;
	width: 362px;
}


.content .top-img li.h3 a {
	font-family: "メイリオ";
	font-weight: bold;
	font-size: 14px;
	text-decoration: underline;
	line-height: 25px;
	text-align: left;
	padding: 0;
	margin: 0;
}
.content .top-img li.h3:before {
	content: "▶";
	color: #00F;
	margin: 0 5px 0 0;
	padding: 0;
}

.content .top-img li.h3 a:hover {
	filter: alpha(opacity=25);
	-moz-opacity:0.25;
	opacity:0.25;
	 -webkit-transition: all 0.3s ease;
	 -moz-transition: all 0.3s ease;
	 -o-transition: all 0.3s ease;
	transition: all 0.3s ease;
	text-decoration: none;
}


/** ---------------  main1　ここから ↓↓↓　------------------------------ */
.content .main1 {
	overflow: hidden;
	float: left;
	width: 698px;
	height: auto;
	padding: 30px 0 30px 20px;
	margin: 0 0 0 30px;
}

.content .main1 p.title {
	width: 698px;
	height: auto;
	font-family: "HG丸ｺﾞｼｯｸM-PRO";
	font-size: 158%;
	font-weight: bold;
	color: #660033;
	border-bottom: 1px solid #660033;
}


.content .main1 p.title span {
	display: block;
	margin-bottom: 1px;
	border-bottom: 2px solid #660033;
}


.content .main1 p.title02 {
	width: 698px;
	height: auto;
	font-family: "メイリオ";
	font-weight: bold;
	font-size: 128%;
	color: #660033;
	text-align: right;
	letter-spacing: 0px;
	line-height: 21px;
	clear: both;
}


/** 代表ごあいさつ *****************************************/
.content .main1 .main1-1 {
	float: left;
	width: 678px;
	height: auto;
	padding: 20px 0 30px 20px;
}


.content .main1 .main1-1 p.sub-title {
	font-size: 128%;
	font-weight: bold;
	padding: 0 40px 0 0;
	margin: 0 0 20px 0;
	border-bottom: 1px solid #660033;
}


.content .main1 .main1-1 img {
	float: left;
	padding: 0 15px 0 0;
}


.content .main1 .main1-1 p.text {
	font-size: 90%;
	padding: 0 0 5px 0;
	text-align: justify;
	text-justify: inter-ideograph;
}


.content .main1 .main1-1 p.blog a {
	float: left;
	font-size: 109%;
	font-weight: bold;
	color: #FFF;
	padding: 10px 15px 10px 15px;
	margin-top: 17px;
	background-color: #0080FF;
	text-align: justify;
	text-justify: inter-ideograph;
}


.content .main1 .main1-1 p.blog a:hover {
	filter: alpha(opacity=25);
	-moz-opacity:0.25;
	opacity:0.25;
	 -webkit-transition: all 0.3s ease;
	 -moz-transition: all 0.3s ease;
	 -o-transition: all 0.3s ease;
	transition: all 0.3s ease;
	background-color: #97CBFF;
}


.content .main1 .main1-1 p.img-text {
	float: right;
	margin: 15px 0 0 0;
}


/** 会社概要 *****************************************/
.content .main1 .main1-2 {
	float: left;
	width: 614px;
	height: auto;
	padding: 20px 0 30px 20px;
	margin-top: 20px;
}


.content .main1 .main1-2 p.sub-title {
	font-size: 15px;
	font-weight: bold;
	padding: 0 40px 0 0;
	margin: 0 0 20px 0;
	border-bottom: 1px solid #660033;
}


.content .main1 .main1-2 ul {
	margin: 0;
	padding: 0;
}


.content .main1 .main1-2 li {
	display: block;
	overflow: hidden;
	font-size: 14px;
	border-top: 1px solid #CCC;
	padding: 10px 0 0 0;
	margin: 0 0 10px 10px;
	clear: both;
}


.content .main1 .main1-2 li.last {
	display: block;
	overflow: hidden;
	border-top: 1px solid #CCC;
	border-bottom: 1px solid #CCC;
	padding: 10px 0 10px 0;
	margin: 0 0 10px 10px;
	clear: both;
}


.content .main1 .main1-2 li p.box-l {
	float: left;
	display: block;
	width: 100px;
	letter-spacing: 2px;
}


.content .main1 .main1-2 li p.box-m {
	float: left;
	display: block;
	width: 10px;
	margin: 0 8px 0 0;
}


.content .main1 .main1-2 li p.box-r {
	float: left;
	display: block;
	width: 486px;
}


.content .main1 .main1-2 li p.box-r a {
	color: #00F;
	text-decoration: underline;
}


.content .main1 .main1-2 li p.box-r a:hover {
	filter: alpha(opacity=25);
	-moz-opacity:0.25;
	opacity:0.25;
	 -webkit-transition: all 0.3s ease;
	 -moz-transition: all 0.3s ease;
	 -o-transition: all 0.3s ease;
	transition: all 0.3s ease;
	color: #F00;
	text-decoration: none;
}


.content .main1 .main1-2 li p.box-r2 {
	float: left;
	display: block;
	width: 486px;
}


.content .main1 .main1-2 li p.box-r2 span {
	margin: 0 0 0 15px;
}


/** ---------------  main1　ここまで ↑↑↑　------------------------------ */



/** コンテント ここまで　↑↑↑　*****************************************************************************************************/