@charset "UTF-8";

/* *******************************************************************************

※remはCSS3で追加された機能になるので未対応ブラウザへの対応としてpxでの指定も重ねて記述しておきます。（remの前にpxで記述します）

※フォントファミリーは基本的にNoto Sans(google font)で設定。
※明朝体の場合はNotoserifを使用すること。
　●Notoserifフォントはfontフォルダの中に入っています。

******************************************************************************　*/

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,900');
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,500,700,900');  
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fjalla+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c&family=Noto+Serif+JP:wght@400;500;600;700&display=swap');

/* *******************************************************************************
-------------------------------------------------------------
■ PC
-------------------------------------------------------------
1. 共通部分
2. サイトヘッダ部分
3. Pankuzu WP-PageNavi pagelink
4. フッタ部分
5. pagetop
6. サイドバー
7. サイト共通タイトルボタンなど
*/

/*************　共通部分　 *******************************/

 /*----------------------------------------------------
	margin set
----------------------------------------------------*/
.mgt5 { margin-top: 5px!important;}
.mgt10 { margin-top: 10px!important;}
.mgt15 { margin-top: 15px!important;}
.mgt20 { margin-top: 20px!important;}
.mgt25 { margin-top: 25px!important;}
.mgt30 { margin-top: 30px!important;}
.mgt35 { margin-top: 35px!important;}
.mgt40 { margin-top: 40px!important;}

.mgb5 { margin-bottom: 5px!important;}
.mgb10 { margin-bottom: 10px!important;}
.mgb15 { margin-bottom: 15px!important;}
.mgb20 { margin-bottom: 20px!important;}
.mgb25 { margin-bottom: 25px!important;}
.mgb30 { margin-bottom: 30px!important;}
.mgb35 { margin-bottom: 35px!important;}
.mgb40 { margin-bottom: 40px!important;}

.mgb_c{margin: 0% auto}
/*----------------------------------------------------
	padding set
----------------------------------------------------*/
.pdt5 { padding-top: 5px!important;}
.pdt10 { padding-top: 10px!important;}
.pdt15 { padding-top: 15px!important;}
.pdt20 { padding-top: 20px!important;}
.pdt25 { padding-top: 25px!important;}
.pdt30 { padding-top: 30px!important;}
.pdt35 { padding-top: 35px!important;}
.pdt40 { padding-top: 40px!important;}

.pdb5 { padding-bottom: 5px!important;}
.pdb10 { padding-bottom: 10px!important;}
.pdb15 { padding-bottom: 15px!important;}
.pdb20 { padding-bottom: 20px!important;}
.pdb25 { padding-bottom: 25px!important;}
.pdb30 { padding-bottom: 30px!important;}
.pdb35 { padding-bottom: 35px!important;}
.pdb40 { padding-bottom: 40px!important;}




html {
  /* ルートのフォントサイズを10pxと同サイズに設定 */
  font-size: 62.5% ; 
}
 
 body {
	font-family: 'Noto Sans JP', "ヒラギノ角ゴ ProN W3" , "Hiragino Kaku Gothic ProN," , "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", 'メイリオ' , Meiryo , Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 14px;/* ベースのフォントサイズを14px相当に設定 */
	font-size: 1.4rem;
	color: #282828;
	line-height: 1.7;
	background: #fff;
}

a {
	transition: all 0.3s ease;
}
/*----------------------------------------------
------------------------------------------------
※レイアウト
------------------------------------------------
------------------------------------------------*/

#wrap {
	width: 100%;
	margin : 0 auto !important;
	padding: 0;
}

.inner {
	max-width: 1040px;
	width: 100%;
	margin: 0 auto;
}

.inner02 {
	max-width: 800px;
	width: 100%;
	margin: 0 auto;
	position: relative;
}

#contents {
	width: 100%;
	margin: 0 auto 0;
	padding: 0px;
}
.section_box { 
	padding: 50px 0 50px 0;
	position: relative;
}

.section_box.bg01 {
    width: 100%;
    position: relative;
    margin: 0 0 150px 0;
    padding: 0px;
}

.section_box.bg01:before {
 content: "";
 position: absolute;
 left: 0;
 top: 44px;
 width: 100%;
 height: calc(100% - -135px);
 background: url(../img/page_visual/effort_img.png)100% no-repeat;
 z-index: -1;
}

.section_box.bg02 { 
 width: 100%;
 margin: 0 0 100px;
 position: relative;
 padding: 0 0 40px 0;
}
.section_box.bg02:before {
 content: "";
 position: absolute;
 left: 0;
 bottom: 0px;
 width: 100%;
 height: 250px;
 background: #9dc814;
 z-index: -1;
}

.section_box.bg03 {
 width: 100%;
 position: relative;
 padding: 0px 0 0px 0;
 margin: 0 0 50px 0;
}

.section_box.bg03.reform{
    padding: 0px;
}


.section_box.bg04 {
 width: 100%;
 position: relative;
 padding: 0px 0 182px 0;
}

.section_box.bg05 {
    background: url(../img/index/bg_about.jpg) 50% 50% no-repeat;
    background-size: cover;
    width: 100%;
    padding: 150px 0 150px 0;
}


.section_box.bg06 { 
 background: #000;
 padding: 35px 0 35px 0;
}

.section_box.bg07 {
 width: 100%;
 display: flex;
 flex-direction: row-reverse;
 padding: 30px 0 60px 0;
}

.section_box.bg012 {
 width: 100%;
 display: flex;
 flex-direction: row-reverse;
 padding: 0px 0 60px 0;
}


.section_box.page{
  padding: 100px 0 0px 0;
}


.section_box.busi_page.fadein.scrollin{
 padding: 50px 0 0 0;
}

.section_box.bg.fadein{
  padding: 0 0 80px 0;
}

.inner.section_box.bg{
	max-width: 1500px;
	padding: 0 0 0px 0;
}

.section_box.about_page.fadein.scrollin{
	padding: 100px 0 0 0;
}

h2.c08_tit {
 font-size: 30px;
 font-size: 3.0rem;
 color: #fff;
 position: relative;
 margin: 0 0 24px 0;
 font-weight: 600;
}
h2.c08_tit span {
 font-size: 14px;
 font-size: 1.4rem;
 color: #fff;
 display: block;
}
h2.c08_tit span:after {
 content: "";
 position: absolute;
 width: auto;
 height: 2px;
 bottom: 10px;
 right: 0;
 background: #fff;
 left: 83px;
}


.detail_time {
    font-size: 14px;
    text-align: right;
    color: #444;
    font-weight: bold;
    margin: 0 0 20px 0;
}

.pc_img,
.pc_br {
	display: block;
}

.sp_img {
	display: none;
}

.dis_inb {
	display: inline-block;
}

/************* Flex設定 *******************************/
.flex {
 display: -webkit-box;
 display: -ms-flexbox;
 display: -webkit-flex;
 display: flex;
 -ms-flex-wrap: wrap;
 -webkit-flex-wrap: wrap;
 flex-wrap: wrap;
}
.jc-bet {
 -webkit-box-pack: justify;
 -ms-flex-pack: justify;
 justify-content: space-between;
}
.ai-cen {
 -webkit-box-align: center;
 -ms-flex-align: center;
 align-items: center;
}
.jc-end {
 -webkit-box-pack: end;
 -ms-flex-pack: end;
 justify-content: space-around;
}
.jc-cen {
 -webkit-box-pack: center;
 -ms-flex-pack: center;
 justify-content: center;
}


/* .fadein
------------------------------------------------------------*/
.fadein {
	opacity : 0;
	transition : all 800ms;
	-webkit-transform: translateY(50px) scale(0.9);
	transform: translateY(50px) scale(0.9);
}
.fadein.scrollin {
	opacity : 1;
	-webkit-transform: translateY(0) scale(1);
	transform: translateY(0) scale(1);
}

/************* パンくず pankuzu *******************************/

.breadcrumbs {
    padding: 8px 0 8px 0;
    background: #f6f6f6;
}

.breadcrumbs span { 
	display: inline-block;
	padding-left: 0;
	font-size: 12px;
	font-size: 1.2rem;
	font-weight: bold;
}

.breadcrumbs span:first-child { 
	display: inline-block;
	padding: 0 1px 0 2px;
}

.breadcrumbs a { 
	display: inline-block;
	color: #666; 
	font-weight: bold;
}

.breadcrumbs a span { 
	color: #547081; 
	font-weight: bold;
}

.breadcrumbs a:hover { 
	text-decoration: none;

}

.breadcrumbs a:hover span { 
	text-decoration: none;

}

.breadcrumbs a.post { 
	min-height: 100%;
	height: auto;
	margin: 0px;
}


/************* WP-PageNavi *******************************/

.wp-pagenavi {
    clear: both;
    margin: 60px auto 0;
    text-align: center;
}

.wp-pagenavi a, .wp-pagenavi span {
	text-decoration: none;
	padding: 9px 16.2px;
	margin: 3px;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;
	display: inline-block;
}
.wp-pagenavi span.pages {
	border: 1px solid #d3a374;
	color: #d3a374;
	background: none;
	padding: 9px 16.2px;
}


.wp-pagenavi span.current {
	border: 1px solid #d3a374;
	color: #fff;
	font-weight: bold;
	background: #d3a374;
}
.wp-pagenavi a {
	border: 1px solid #d3a374;
	color: #d3a374!important;
	background: none;
}

.wp-pagenavi a:hover{
	border: 1px solid #d3a374!important;
	background: #d3a374;
	color: #fff!important;
}
.pagelink {
 margin: 60px auto 80px;
 max-width: 280px;
 width: 100%;
 position: relative;
 min-height: 50px;
}


.pagelink li.listlink {
 max-width: 150px;
 width: 100%;
 padding: 0;
 position: absolute;
 left: 50%;
 top: 0;
 margin: 0 0 0 -75px;
}

.pagelink li.listlink a {
 background: #d3a374;
 display: block;
 border: 1px solid #d3a374;
 height: 45px;
 line-height: 45px;
 padding: 0;
 color: #fff;
 text-align: center;
 box-sizing: border-box;
}

.pagelink li.listlink a:hover {
 background: #fff;
 color: #d3a374;
 text-decoration: none;
 border: 1px solid #d3a374;
}

.pagelink li.oldpage { 
 margin-right: 0px;
 width: 50px;
 padding: 0;
 position: absolute;
 left: 0;
 top: 0;
}

.pagelink li.oldpage a {
 background: #fff;
 display: block;
 border: 1px solid #d3a374;
 height: 45px;
 width: 45px;
 padding: 0;
 box-sizing: border-box;
}


.pagelink li.oldpage a:after {
transform: rotate(227deg);
 right: 20px;
}
.pagelink li.oldpage a:hover{ 
 background: #f6ab00;
}
.pagelink li.newpage { 
 margin-right: 0px;
 width: 50px;
 padding: 0;
 position: absolute;
 right: 0;
 top: 0;
}
.pagelink li.newpage a {
 display: block;
 border: 1px solid #d3a374;
 height: 45px;
 width: 45px;
 padding: 0;
 box-sizing: border-box;
}
.pagelink li.newpage a:hover{ 
 background: #f6ab00;
}
.pagelink li.newpage a:after{content: '';width: 6px;height: 6px;border: 0;border-top: solid 2px #d3a374;border-right: solid 2px #d3a374;position: absolute;top: 50%;margin-top: -4px;transform: rotate(45deg);right: 23px;}
.pagelink li.oldpage a:after{content: '';width: 6px;height: 6px;border: 0;border-top: solid 2px #d3a374;border-right: solid 2px #d3a374;position: absolute;top: 50%;margin-top: -4px;right: 23px;}
.pagelink li.newpage a:hover:after,.pagelink li.oldpage a:hover:after{
 border-top: solid 2px #fff;
border-right: solid 2px #fff;
}
.pagelink li.newpage a:hover,.pagelink li.oldpage a:hover {
 background: #d3a374;
 color: #fff;
 border: 1px solid #d3a374;
}

/************* 全ページ共通部分 *******************************/

.img_box { 
	margin: 0 0 16px 0;
}



.left_box01 { 
	max-width: 325px; 
	width: 100%;
	float: left;
}

.right_box01 { 
	max-width: 675px; 
	width: 100%;
	float: right;
}
.category_btn {
	display: block;
 margin: 3px 0 0 0;
}
.category_btn a{
	display: block;
	width: 73px;
	background: #d3a374;
	text-align: center;
	color: #fff;
	font-size: 12px;
	font-size: 1.2rem;
	line-height: 24px;
	margin: 0 30px 0 0;
}
.category_btn a:hover{
	background: #d3a374;
	text-decoration: none;
	color: #fff;
}
.category_blog a{
	background: #0f83c5;
}
.category_blog a:hover{
	background: #48b8f7;
}

/******ページ下お問い合わせ部分************************/
.contact_sec{
 background: #fff;
 padding: 40px 0 40px 0;
 border-bottom: 1px solid #19aa52;
}
.contact_tit{
 font-size: 20px;
 font-size: 2.0rem;
 background: #9dc814;
 color: #fff;
 text-align: center;
 position: relative;
 font-weight: 600;
 padding: 3px 15px;
}
.info_box{
 display: flex;
 max-width: 750px;
 width: 100%;
 justify-content: center;
 margin: 10px auto 0;
}
.info_box_tel{
 margin: 0 20px 0 0;
 box-sizing: border-box;
 max-width: 310px;
 width: 100%;
}
.info_box_number{
 font-size: 40px;
 font-size: 4.0rem;
 font-weight: 600;
 background: url("../img/common/tel_ico.png") 0 53% no-repeat;
 padding: 0 0 0 39px;
}
.info_box_number a{
 color: #000;
}
.info_box_number a:hover{
 text-decoration: none;
}
.info_box_time{
 text-align: right;
}
.info_box_mail{
 margin: 18px 0 0 20px;
 max-width: 350px;
 width: 100%;
}
.info_box_mail a{
 background:#f6ab00;
 color: #fff;
 border: 1px solid #f6ab00;
 font-size: 18px;
 font-size: 1.8rem;
 padding: 20px 0;
 box-sizing: border-box;
 display: block;
 text-align: center;
}

.info_box_mail a:hover{
background:#fff;
 color:#f6ab00;
}

.info_box_mail a span{
 background: url("../img/common/mail_ico.png") 0 8px no-repeat;
 display: inline-block;
 padding: 0 0 0 40px;
}

.info_box_mail a:hover span{
 background: url("../img/common/mail_ico_hover.png") 0 8px no-repeat;
}


/************* 投稿記事デフォルト設置（段落、テーブルなど） *******************/
.aligncenter	{
 display: block;
 margin-left: auto;
 margin-right: auto;
}
div.post img	{
 border: none;
}
.alignleft	{
 float: left;
 margin: 5px 40px 0 8px;
}
.alignright	{
 float: right;
 margin: 5px 8px 0 40px;
}
.wp-caption	{
 border: none;
 text-align: center;
 padding-top: 5px;
}
.wp-caption-text { 
 text-align:center; 
}
.detail_content {
 width: 100%;
}
.detail_time {
 font-size: 14px;
 color: #444;
 font-weight: bold;
 margin: 0 0 20px 0;
}

.detail_time span{
 display: inline-block;
}
.detail_content h1{
 font-size: 20px;
 color: #444;
 font-weight: bold;
 margin: 0 0 12px 0;
}
.detail_content h2{
 font-size: 26px;
 color: #547081;
 font-weight: bold;
 margin: 0 0 24px 0;
}
.detail_content h3 {
 font-size: 24px;
 font-size: 2.4rem;
 font-weight: 700;
 line-height: 1.3;
 color: #444;
 position: relative;
 margin: 0 0 20px 0;
 padding: 0 0 10px 0;
}
.detail_content h3:after {
 content: "";
 position: absolute;
 left: 0;
 bottom: 0;
 width: 30px;
 height: 2px;
 background: #b79f2f;
}
.detail_content h4{
 font-size: 18px;
 color: #444;
 font-weight: bold;
 margin: 0 0 12px 0;
}
.detail_content h5{
 font-size: 16px;
 color: #444;
 font-weight: bold;
 margin: 0 0 5px 0;
}
.detail_content ul {
 margin: 0 0 30px 0;
}
.detail_content ul li{
 list-style: disc outside;
 margin: 0 0 0 20px;
 line-height: 1.9;
}
.detail_content ol {
 margin: 0 0 30px 0;
}
.detail_content ol li{
 list-style: decimal;
 margin: 0 0 0 20px;
 line-height: 1.9;
}
.detail_content table {
 border-collapse: collapse;
 border-spacing: 0;
 border:1px solid #ddd;
 margin: 0 0 30px 0;
 width: 100%;
}
.detail_content table th {
 padding: 20px;
 border: solid #ddd;
 border-width: 0 1px 1px 0;
 vertical-align: middle;
 font-size: 100%;
 width: 24%;
 color: #fff;
 background: #eee;
 box-sizing: border-box;
}

.detail_content table td {
 padding: 20px;
 vertical-align: top;
 border: solid #ddd;
 border-width: 0 0 1px 1px;
 font-size: 100%;
 background: #fff;
 box-sizing: border-box;
}
.detail_content table td:first-child {
 background: #eee;
}




/************* 三段カラム *******************************/

ul.cl-03 { 
}

ul.cl-03 li {
    max-width: 320px;
    width: 100%;
    float: left;
    margin: 0 40px 0 0;
}

ul.cl-03 li:nth-child(3n){ 
	margin: 0 0 0 0;
}


ul.cl-03_01 { 
}

ul.cl-03_01 li {
    max-width: 320px;
    width: 100%;
    float: left;
    margin: 0 40px 40px 0;
}

ul.cl-03_01 li:nth-child(3n){ 
	margin: 0 0 40px 0;
}



/*画面サイズが1060px以下に適用*/
@media screen and (max-width : 1060px){
ul.cl-03 li {
    width: 31%;
    margin: 0 3.5% 0 0;
}
	
ul.cl-03_01 li {
    width: 31%;
    margin: 0 3.5% 40px 0;
}	
.section_box.bg03 {
    padding: 112px 0 50px 0;
    margin: 0 0 52px 0;
}

}

/*画面サイズが640px以下に適用*/
@media screen and (max-width : 640px){
ul.cl-03 li {
    width: 100%;
    margin: 0 0 40px 0;
    max-width: 640px;
	float: none;
}

ul.cl-03 li:nth-child(3n) {
    margin: 0 0 0 0;
}
	
ul.cl-03_01 li {
    width: 100%;
    margin: 0 0 40px 0;
    max-width: 640px;
	float: none;
}

ul.cl-03_01 li:nth-child(3n) {
    margin: 0 0 0 0;
}	
	
	
}
	
/************* 四段カラム *******************************/

ul.cl-04 { 
}

ul.cl-04 li {
    max-width: 245px;
    width: 100%;
    float: left;
    margin: 0 20px 0 0;
}

ul.cl-04 li:nth-child(4n){ 
	margin: 0 0 0 0;
}


ul.cl-04_01 { 
}

ul.cl-04_01 li {
    max-width: 245px;
    width: 100%;
    float: left;
    margin: 0 20px 20px 0;
}

ul.cl-04_01 li:nth-child(4n){ 
	margin: 0 0 20px 0;
}


/*画面サイズが1060px以下に適用*/
@media screen and (max-width : 1060px){
ul.cl-04 li {
    max-width: 235px;
    width: 22%;
    float: left;
    margin: 0 4% 0 0;
}
	
ul.cl-04_01 li {
    max-width: 235px;
    width: 22%;
    float: left;
    margin: 0 4% 20px 0;
}	
	
}

/*画面サイズが767px以下に適用*/
@media screen and (max-width : 767px){

ul.cl-04 {
    max-width: 490px;
    width: 100%;
    margin: 0 auto;
}

ul.cl-04 li {
    width: 47%;
    margin: 0 6% 20px 0;
}

ul.cl-04 li:nth-child(2n) {
    margin: 0 0 20px 0;
}
	
	
ul.cl-04_01 {
    max-width: 490px;
    width: 100%;
    margin: 0 auto;
}

ul.cl-04_01 li {
    width: 47%;
    margin: 0 6% 20px 0;
}

ul.cl-04_01 li:nth-child(2n) {
    margin: 0 0 20px 0;
}	

.section_box.about_page.fadein.scrollin{
	padding: 40px 0 0 0;
}
 .section_box.busi_page.fadein.scrollin {
    padding: 0px;
}

.section_box.bg07 {
    padding: 30px 0 0px 0;
}
.section_box.works_page{
	padding: 0 0 80px 0;
}
.section_box.bg012 {
    padding: 0px 0 25px 0;
}
}


/************* 共通タイトル *******************************/

.tit_style01 { 
 font-size: 30px;
 font-size: 3.0rem;
 color: #000;
 position: relative;
 margin: 0 0 40px 0;
 font-weight: 600;
 text-align: center;
}

.tit_style01.mg_01 { 
	margin: 0 0 32px 0;
}

.tit_style01 span{ 
 font-size: 12px;
 font-size: 1.2rem;
 color: #f6ab00;
 display: block; 
 position: relative;
 border-top: 2px solid #333;
 padding: 5px 0 0 0;
 margin: 8px 0 0 0;
 letter-spacing: 2px;
 text-transform: uppercase;
}
.tit_style01 span:before {
 content: "";
 position: absolute;
 width: 30px;
 height: 3px;
 top: -5px;
 left: 50%;
 margin: 0 0 0 -15px;
 background: #333;
}

.sub_tit01 {
    font-size: 16px;
    font-size: 1.6rem;
    padding: 0 0 0 30px;
    margin: 0 0 16px 0;
}
.tit_style02 {
 font-size: 40px;
 font-size: 4rem;
 color: #547081;
 position: relative;
 margin: 0 0 40px 0;
 text-align: center;
 font-family: 'Oswald', sans-serif;
 letter-spacing: 7px;
}

.tit_style02.mg_01 { 
	margin: 0 0 32px 0;
}


.tit_style03 {
	font-size: 40px;
	font-size: 4rem;
	color: #444;
	font-family: 'M PLUS Rounded 1c', sans-serif;
	rotate: 0.03deg;
	font-weight: 500;
	letter-spacing: 0.15em;
	line-height: 1.4;
	text-align: center;
	margin: 0 0 80px;
}

.tit_style04 {
	font-size: 30px;
	font-size: 3rem;
	color: #444;
	font-family: 'M PLUS Rounded 1c', sans-serif;
	rotate: 0.03deg;
	font-weight: 500;
	letter-spacing: 0.15em;
	line-height: 1.4;
	text-align: center;
	margin: 0 0 67px;
}

.col_blue {
	color: #0062B1;
}




/************* 共通ボタン *******************************/

.btn_style01 {
	max-width: 250px; 
	width: 100%; 
}

.btn_style01.cen_btn {
 margin: 0 auto;
}

.btn_style01 a { 
	display: block;
	padding:10px 0;
	text-align: center;
	color: #fff;
	text-decoration: none;
	font-weight: normal;
	border: 1px solid #fff;
	background: transparent;
 position: relative;
}

.btn_style01 a::before {
    content: '';
    width: 6px;
 height: 6px;
    border-top: solid 1px #fff;
    border-right: solid 1px #fff;
    transform: rotate(45deg);
    position: absolute;
    top: 44%;
    right: 30px;
}


.btn_style01 a:hover { 
	background: #fff;
 border: 1px solid #fff;
	color: #333;
}
.btn_style01 a:hover:before {
    border-top: solid 1px #333;
    border-right: solid 1px #333;
}


.btn_style02 {
	max-width: 313px;
	width: 100%;
	/* margin: 0 auto; */
}

.ft_btn{
	color: #333;
	margin:0 auto;
}

.btn_style02.cen_btn {
 margin: 0 auto;
}

.btn_style02 a {
	display: block;
	padding:10px 0;
	text-align: center;
	color: #0062b1!important;
	text-decoration: none;
	font-weight: 500;
	border: 1px solid #0062b1;
	border-radius: 5px;
	 position: relative; 
	 font-family: 'M PLUS Rounded 1c', sans-serif;
		background: #fff;
	letter-spacing: 3px;
	transform: rotate(0.03deg);
}

.btn_style02 a::before {
    content: '';
    width: 6px;
    height: 6px;
    border-right: solid 1px #0062b1;
    border-top: solid 1px #0062b1;
    transform: rotate(45deg);
    position: absolute;
    top: 44%;
    right: 30px;
		transition: all 0.3s;
}

.btn_style02 a:hover {
	background: #d3a374;
	border: 1px solid #d3a374;
	color: #fff!important;
}

.btn_style02 a:hover:before {
    border-top: solid 1px #fff;
    border-right: solid 1px #fff;
}

.btn_style03 {
	max-width: 317px; 
	width: 100%;
	margin: 0 auto; 
}

.btn_style03.cen_btn {
 	margin: 0 auto;
}

.btn_style03 a { 
	display: block;
	padding:10px 0;
	text-align: center;
	color: #fff!important;
	text-decoration: none;
	font-weight: normal;
	border-bottom: 1px solid #fff;
	background: transparent;
 	position: relative;
 	font-family: 'Oswald';
    font-size: 14px;
    letter-spacing: 3px;
    font-size: 1.4rem;
}

.btn_style03 a:hover {
	background: #d3a374;
	border-bottom: 1px solid #d3a374;
	color: #fff;
}

.btn_style03 a::before {
    content: '';
    width: 6px;
	height: 6px;
    border-top: solid 1px #fff;
    border-right: solid 1px #fff;
    transform: rotate(45deg);
    position: absolute;
    top: 44%;
    right: 30px;
}


.btn_style04 {
	max-width: 314px;
	width: 100%;
}

.btn_style04.cen_btn {
 	margin: 0 auto;
}

.btn_style04 a { 
	display: block;
	padding:10px 0;
	text-align: center;
	color: #444444;
	text-decoration: none;
	font-weight: normal;
	border-bottom: 1px solid #444444;
	background: transparent;
 	position: relative;
}

.btn_style04 a::before {
    content: '';
    width: 6px;
	height: 6px;
    border-top: solid 1px #444444;
    border-right: solid 1px #444444;
    transform: rotate(45deg);
    position: absolute;
    top: 44%;
    right: 30px;
}


.btn_style04 a:hover {
	background: #d3a374;
	border-bottom: 1px solid #d3a374;
	color: #fff;
}

.btn_style04 a:hover:before {
    border-top: solid 1px #fff;
    border-right: solid 1px #fff;
}



.btn_style05 {
	max-width: 317px; 
	width: 100%;
}


.btn_style05 a { 
	display: block;
	padding:10px 0;
	text-align: center;
	color: #fff!important;
	text-decoration: none;
	font-weight: normal;
	border-bottom: 1px solid #fff;
	background: transparent;
 	position: relative;
 	font-family: 'Oswald';
    font-size: 14px;
    letter-spacing: 3px;
    font-size: 1.4rem;
}

.btn_style05 a:hover {
	background: #d3a374;
	border-bottom: 1px solid #d3a374;
	color: #fff;
}

.btn_style05 a::before {
    content: '';
    width: 6px;
	height: 6px;
    border-top: solid 1px #fff;
    border-right: solid 1px #fff;
    transform: rotate(45deg);
    position: absolute;
    top: 44%;
    right: 30px;
}

.btn_style06 {
	max-width: 317px; 
	width: 100%;
    margin: 0 auto;

}


.btn_style06 a {
	display: block;
	padding:10px 0;
	text-align: center;
	color: #444444;
	text-decoration: none;
	font-weight: normal;
	border-bottom: 1px solid #444444;
	background: transparent;
	position: relative;
	font-family: 'Oswald';
	font-size: 14px;
	letter-spacing: 3px;
	font-size: 1.4rem;
}

.btn_style06 a:hover {
	background: #d3a374;
	border-bottom: 1px solid #d3a374;
	color: #fff;
}

.btn_style06 a::before {
	content: '';
	width: 6px;
	height: 6px;
	border-top: solid 1px #fff;
	border-right: solid 1px #fff;
	transform: rotate(45deg);
	position: absolute;
	top: 44%;
	right: 30px;
}

.btn_style07 {
	max-width: 330px;
	width: 100%;
	margin: 0 0 10px 0;
}
.btn_style07 a {
	display: block;
	font-size: 13px;
	font-size: 1.3rem;
	font-weight: 600;
	font-family: 'M PLUS Rounded 1c', sans-serif;
	color: #0062b1 !important;
	text-align: center;
	background: #fff;
	border: 2px solid #0062b1;
	border-radius: 5px;
	padding: 10px;
	position: relative;
	transform: rotate(0.03deg);
}
.btn_style07 a::after {
	content: '';
	width: 6px;
	height: 6px;
	border-top: solid 1px #0062b1;
	border-right: solid 1px #0062b1;
	transform: rotate(45deg);
	position: absolute;
	top: 44%;
	right: 15px;
}
.btn_style07 a:hover {
	color: #fff !important;
	background: #0062b1;
}
.btn_style07 a:hover::after {
	border-top: solid 1px #fff;
	border-right: solid 1px #fff;
}
.btn_style08 {
	max-width: 363px;
	width: 100%;
}
.btn_style08 a {
	display: block;
	font-size: 20px;
	font-size: 2.0rem;
	color: #ed1c25 !important;
	text-align: center;
	background: #fff;
	border: 2px solid #fff;
	padding: 15px 10px;
	position: relative;
}

.btn_style08 .heart_logo {
	background: url(../img/common/hart_logo_hover.png) no-repeat 0% 50%;
    padding: 5px 0 5px 40px;
}

.btn_style08 a:hover {
	color: #fff !important;
	background: #ed1c25;
	border: 1px solid #ed1c25;
}
.btn_style08 a:hover .heart_logo {
	background: url(../img/common/hart_logo.png) no-repeat 0% 50%;
}



/************* display setting *******************************/


/*画面サイズが1060px以下に適用*/
@media screen and (max-width : 1060px){

}


/*画面サイズが1060px以下に適用*/
@media screen and (max-width : 1060px){

body { 
	background-image: none !important; 
}

#wrap {
	width: 100%;
	margin : 0 auto 0 !important;
	padding: 0;
}

.inner {
	width: 100%;
 padding: 0 20px;
 box-sizing: border-box;
}


.pankuzu {
	width: 100%;
 padding: 0 20px;
 box-sizing: border-box;
}

.breadcrumbs {
    padding: 15px 0 10px 0;
}

/************* 全ページ共通部分 *******************************/
.left_box01 {
    width: 35%;
}

.right_box01 {
    width: 60%;
}

}



/*画面サイズが980px以上に適用*/
@media screen and (min-width : 980px){


}


/*画面サイズが980px以下に適用*/
@media screen and (max-width : 980px){
	
/************* Header *******************************/


	
}



/*画面サイズが767px以上に適用*/
@media screen and (min-width : 767px){
.sp_view{
	display: none;
}
}


/*画面サイズが767px以下に適用*/
@media screen and (max-width : 767px){

	.pc_img,
	.pc_br {
		display: none;
	}	
	.sp_img {
		display: block;
	}	

.pc_view, #pagetop_wrap{
	display:none!important;
}
section.section_box {
    padding: 20px 0 20px 0;
}
.section_box.bg03 {
 padding: 0 0 0 0;
 margin: 0 0 0 0;
}
.section_box.bg03:before {
 top: 0px;
 width: 100%;
 background: #fff;
}
.section_box.bg04 {
 padding: 50px 0 50px 0;
 margin: 0 0 0 0;
}
.section_box.bg04:before {
 top: 0px;
 width: 100%;
 background: none;
}
.category_btn {
 margin: 0 0 0 0;
}
.section_box.bg05 {
 margin: 0 0 0 0;
 padding: 40px 0 40px 0;
 margin: 0 0 30px 0;
}
.info_box {
 flex-direction: column;
}
.info_box_tel{
 max-width: 260px;
 margin: 0 auto;
 
}
 
.contact_tit {
    font-size: 18px;
    font-size: 1.8rem;
    padding: 8px 15px;
} 
 
.info_box_number {
    font-size: 32px;
    font-size: 3.2rem;
    line-height: 1.4;
} 
 
.info_box_time {
    text-align: right;
    font-size: 12px;
} 
 
.info_box_mail {
 margin: 20px auto 0;
 width: 100%;
}
 
.info_box_mail a {
    padding: 10px 0;
} 
 
 
.tit_style04 span:before {
 width: 38%;
}
.tit_style04 span:after {
 width: 38%;
}

 
 
/************* WP-PageNavi *******************************/
.pagelink {
 margin: 40px auto 40px;
}
.wp-pagenavi {
	margin-bottom: 20px;
}
.pagelink {
  width: 312px;
}
.btn_style04 {
	max-width: 314px;
    width: 100%;
    margin: 0 auto;
}
 
 
/************* 全ページ共通部分 *******************************/

.left_box01 {
 max-width: 325px;
 width: 100%;
 float: none;
 margin: 0 auto 30px;
}
.right_box01 {
 max-width: 767px;
 width: 100%;
 float: none;
}





/************* スマホ設定（タイトルのフォント、margin, paddingなど） *******************************/

.tit_style01 {
    font-size: 24px;
    font-size: 2.4rem;
    margin: 0 0 30px 0;
}  
 
h2.title_style01 {
    font-size: 22px;
	font-size: 2.2rem;
}

.tit_style03 {
	font-size: 23px;
	font-size: 2.3rem;
	margin: 0 0 40px;
}

.tit_style04 {
	font-size: 23px;
	font-size: 2.3rem;
	margin: 0 0 40px 0;
}

 .btn_style01.sp_black { 
	margin: 0 auto;
 }
 
 .btn_style01.sp_black a { 
	color: #333;
	border: 1px solid #333;
}

 .btn_style01.sp_black a::before {
    border: 1px solid #333;
}


 .btn_style01.sp_black a:hover { 
	background: #fff;
 border: 1px solid #333;
	color: #333;
}
 .btn_style01.sp_black a:hover:before {
    border: 1px solid #333;
}
 
 .c08_left .btn_style02, .c09_left .btn_style02 {
  margin: 0 auto;
 } 
 
 .btn_style08 a {
	 font-size: 16px;
	 font-size: 1.6rem;
	 padding: 15px 10px;
 }
 .btn_style08 a::before {
	width: 30px;
	height: 30px;
	top: 14px;
	left: 65px;
	background-size: cover;
 }
}

/*画面サイズが640px以下に適用*/
@media screen and (max-width : 640px){
	
	
.alignright, .alignright05, .alignleft{
	display:block;
	float:none;
	text-align:center;
	margin:0 auto 15px;
}

/************* テーブル設定 *******************************/

table.table_style th{
padding:10px;
width: 33%;
}

table.table_style th.size_width { 
	width: 33%;
}

table.table_style td{
padding:10px;
}

table.table_style01 th{
padding:10px;
width: 33%;
}

table.table_style01 td{
padding:10px;
}


/************* ページリンク *******************************/



/************* 全ページ共通部分 *******************************/



h4.sub_tit02 {
    font-size: 16px;
	font-size: 1.6rem;
    color: #282828;
    margin: 0px 0 20px 0;
}

}


/*画面サイズが480px以下に適用*/
@media screen and (max-width : 480px){
	
.section_box.page{
  padding: 40px 0 0px 0;
}
}



.black_Box{
  box-sizing: border-box;
  border: 1px solid #000;
  padding: 20px 20px 0;
}


.containerbox_r{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
}

#merit .containerbox:first-child{
  justify-content: center;
  align-items: center;
}

#merit .item02:nth-child(odd),
#merit .item04:nth-child(odd){
  width: 24%;
}

#merit .item02:nth-child(even){
  box-sizing: border-box;
  width: 76%;
  padding-left: 1.0rem;
}

@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@100;300;400;500;700&display=swap');

/* 新しく追加したCSS */
@charset "utf-8";
#kiwami body{
font-weight: normal;
font-family: "Helvetica Neue", "Helvetica", "Noto Sans Japanese","メイリオ",Meiryo,"游ゴシック体","Yu Gothic",YuGothic,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN",sans-serif !important;
color: #333!important;
font-size: 1.0rem;
font-weight: 400;
line-height: 1.8;
}

/*WPハック*/
.p-page-header{display: none;}
.mainimgArea{
  width: 100vw;
  margin: 0 calc(50% - 50vw) 60px;
}
.mainimgArea img{width: 100%;}
.l-main,
#staff,#reform,#privacy{
  margin-top: 0px;
}
.p-triangle--no-padding{
  box-sizing: border-box;
  padding: 10px 0 0 10px;
}
.p-triangle{width: 100%;}
.p-triangle__inner b{color: #000;}
.p-global-nav{width: 100%;}

.p-global-nav > ul > li:hover{background: #333;}


@media screen and (max-width: 1199px) {
  .l-main{margin-top: 0;}
}
@media screen and (max-width: 768px) {
  #staff,#privacy{margin-top: 30px;}
}

.pc_case{display: block;}
.sp_case{display: none;}

.wrapper,
.wrap740{
  box-sizing: border-box;
  max-width: 1020px;
  width: 100%;
  padding: 0 2%;
  margin: 0 auto;
}
.wrap740{
  max-width: 740px;
}
.containerbox,
.containerbox_r{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
}
.containerbox_r{
  flex-direction: row-reverse;
}
.item02{width: 48%;}
.item03{width: 31.33%;}
.item04{width: 24%;}

.mt30{margin-top: 30px;}
.mt40{margin-top: 40px;}
.mt60{margin-top: 60px;}
.mb20{margin-bottom: 20px;}
.mb30{margin-bottom: 30px;}
.mb40{margin-bottom: 40px;}
.mb60{margin-bottom: 60px!important;}

.fontS{font-size: 0.87rem!important;}

@media screen and (max-width: 768px) {
  .pc_case{display: none;}
  .sp_case{display: block;}

  .wrapper,.wrap740{padding: 0;}

  .item02,
  .item03,
  .item04{
  width: 100%;
  margin-bottom: 30px;
  }
}

/*HOME*/
.home_about,
.home_aboutC{
  box-sizing: border-box;
  border-bottom: 1px solid #000;
  font-size: 24px!important;
  font-family: serif;
  padding: 30px 0 5px 10px;
  margin-bottom: 10px!important;
}
.home_aboutC{
  border-bottom: none;
}

.home_about02,
.home_aboutC02{
  box-sizing: border-box;
  font-size: 16px!important;
  font-weight: normal;
  line-height: 1.6!important;
  padding: 0 10px;
}
.home_aboutC,
.home_aboutC02{
  text-align: center;
}
.main_title50{
  text-align: center;
  font-size: 50px!important;
  font-weight: bold;
}
.bg_beige{
  background: #fcf6ed
}
#service img{
  width: 100%;
  margin-bottom: 10px!important;
}
#service a:link,
#service a:visited{
  color: #222;
}
#service a:hover img{
  opacity: 0.5;
}

/* リフォーム */
#reform{
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 400;
}
.main_img{
  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);
}
.main_img img{width: 100%;}

#reform p,
#reform .item02 p,
#solar p{
  font-size: 1.0rem;
  font-weight: 400;
  line-height: 2.0;
  margin-bottom: 0.8em;
}
#reform img{width: 100%;}

#reform .main_title50{
  font-family: "M PLUS Rounded 1c", sans-serif;
  margin-bottom: 60px;
}

.table_case{
  max-width: 500px;
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  border: none;
  margin: 15px auto 0!important;
}
.table_case tr{
  border-bottom: 1px solid #ccc;
}
.table_case tr:first-child{
  border-top: 1px solid #ccc;
}
.table_case th,
.table_case td{
  box-sizing: border-box;
  text-align: left;
  font-weight: normal;
  line-height: 1.6;
  padding: 10px;
  border: none;
}
.table_case th{
  background: none;
  width: 30%;
}
.table_case td{
  width: 70%;
  border-left: 1px solid #ccc;
}

/* 請負工事一覧 */
#reform_list{
  margin-top: 100px;
}
#reform_list .wrapper{
  background: #fcf6ed;
  padding: 60px 2% 30px;
}
#reform_list .containerbox{
  width: 100%;
  flex-flow: row wrap;
  justify-content: center;
  margin: 0 auto;
}
#reform_list .item05{
  width: 18%;
  margin-bottom: 30px;
}
#reform_list .item05 p{
  text-align: center;
  font-size: 14px;
}
#reform_list .item05 img{
  display: block;
  width: 80%;
  margin: 0 auto 10px;
}

/* リフォームの流れリスト */
#reform_flowlist{
  margin-top: 100px;
}

.title_reform_flowlist{
  position: relative;
  font-size: 24px!important;
  border-top: 2px solid #0068b7;
  border-bottom: 2px solid #0068b7;
  line-height: 55px!important;
  padding-left: 90px;
  margin-bottom: 20px!important;
}
.title_reform_flowlist span{
  position: absolute;
  top: 0;
  left: 0;
  color: #0068b7;
  font-size: 60px;
  font-weight: normal;
  letter-spacing: -0.05em;
}

#reform_flowlist .containerbox,
#reform_flowlist .containerbox_r{
  margin-bottom: 40px;
}
#reform_flowlist .item02 img{
  border-radius: 30px;
}
.btn_reform_contact{
  display: block;
  max-width: 700px!important;
  width: 95%;
  margin: 100px auto 30px;
}
.btn_reform_contact:hover{
  opacity: 0.6;
}

@media screen and (max-width: 768px) {
  .table_case th{width: 40%;}
  .table_case td{width: 60%;}
  #reform_list .containerbox{width: 100%;}
  #reform_list .item05{width: 31%;}
}

#reform_flow{margin-top: 100px;}
#reform_flow .containerbox{
  margin-top: 100px;
}
#reform_flow .item04{
  position: relative;
  width: 23%;
}
#reform_flow .item04 p{
  text-align: justify;
  font-family: sans-serif;
  font-size: 1.0rem!important;
  font-weight: 400;
  line-height: 1.6;
}
.title_flow01,
.title_flow02,
.title_flow03,
.title_flow04 {
  box-sizing: border-box;
  color: #fff;
  line-height: 1.0!important;
  font-size: 1.12rem!important;
  font-weight: bold;
  -webkit-clip-path: polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%);
  clip-path: polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%);
  padding: 10px 0 10px 62px;
  margin-bottom: 30px!important;
}
.title_flow01{background: #57A2A4;}
.title_flow02{background: #6B5A78;}
.title_flow03{background: #9E6F96;}
.title_flow04{background: #AA6977;}

.title_flow01 span,
.title_flow02 span,
.title_flow03 span,
.title_flow04 span{
  display: block;
  font-family: serif;
  font-size: 1.5rem;
  margin-bottom: 5px;
}
#reform_flow .item04 img{
  position: absolute;
  top: -7px;
  left: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  z-index: 1;
}

@media screen and (max-width: 768px) {
  .l-main{margin-top: 0;}
  #staff,
  #reform,
  #privacy{
    margin-top: 00px;
  }
  .main_title50{font-size: 34px!important;}
  #reform .main_title50{
    margin-bottom: 40px;
  }
  
  #home_about img{
    display: block;
    width: 90%;
    margin: 0 auto;
  }

  #reform_case .item02{margin-bottom: 10px!important;}

  #reform .item02:last-child{margin-bottom: 0;}
  #reform_flow{margin-top: 60px;}

  #reform_flow .containerbox{
    margin-top: 40px;
  }
  #reform_flow .item04{
    width: 45%;
    margin-top: 80px;
  }
  #reform_flow .item04 img{
    position: absolute;
    top: -70px;
    left: 20%;
  }
.title_flow01,
.title_flow02,
.title_flow03,
.title_flow04 {
  padding: 10px 0 10px 10px;
  margin-bottom: 20px!important;
}

}

/* 太陽光発電システム */
#solar{
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 500;
  font-style: normal;
}
#solar p{
  font-weight: 500;
}
#solar img{
  width: 100%;
}
#solar_worry,
#solar_about,
#solar_price{
  margin-top: 100px;
}
#solar_message{
  background: #FFF8E4 url(../images/solar/solar_message_bg.png) no-repeat center center / 25%;
  padding: 100px 0;
  margin-right: calc(50% - 50vw);
margin-left: calc(50% - 50vw);
}

.title_solar{
  text-align: center;
  font-size: 26px!important;
  font-weight: 700;
  line-height: 2.0!important;
}
.title_solar_q{
  position: relative;
  font-size: 26px!important;
  font-weight: 700;
  padding-left: 80px;
  margin-bottom: 30px!important;
}
.title_solar_q::before{
  content: "";
  position: absolute;
  top: -22px;
  left: 0;
  display: block;
  background: url(../images/solar/icon_q2.png) no-repeat;
  background-size: contain;
  width: 70px;
  height: 70px;
}
.blue_b{
  color: #0097e0;
  font-size: 120%;
  font-weight: 700;
}

@media screen and (max-width: 768px) {
  #reform_flowlist,
  #solar_about,
  #solar_price{
    margin-top: 60px;
  }
  #solar_message{
    background: #FFF8E4 url(../images/solar/solar_message_bg.png) no-repeat center center / 80%;
    padding: 50px 0 30px;
  }
  #solar_message .wrap740{
    box-sizing: border-box;
    padding: 0 20px;
  }
  .title_solar{
    font-size: 20px;
  }
}



/*KIWAMI WATER*/
#kiwami p{
  font-size: 1.4rem;/*1rem = 16px*/
  font-weight: normal;
  line-height:1.8;
  margin-bottom:0;
}
#kiwami img{width: 100%;}

#kiwami a,
#kiwami a:hover,
#kiwami a:hover img {
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
  text-decoration: none;
}
#kiwami a:hover img{
opacity: 0.8;
}

#kiwami{
  width: 100vw;
  margin: 0 calc(50% - 50vw);
}

/*タイトル*/
.merit_title01{
  color: #00479d;
  text-align: center;
  font-size: 3.87rem!important;
  font-family: serif;
  margin-bottom: 20px!important;
}
.merit_title02{
  font-size: 3.5rem!important;
  margin-bottom: 15px;
}
.merit_title02 span{
  color: #00479d;
  font-size: 1.12rem!important;
  font-weight: normal;
}
.title01,
.title01c{
  font-size: 2.5rem!important;
  font-family: serif;
  line-height: 1.6;
  margin-bottom: 30px;
}
.title01c{text-align: center;}
.sub_title{
  text-align: center;
  font-size: 1.5rem!important;
  font-weight: normal;
  line-height: 1.8;
  margin-bottom: 40px;
}
.titile_bg{
  box-sizing: border-box;
  background: #0068b7;
  color: #fff;
  font-family: serif;
  font-size: 2.5rem;
  padding: 10px;
  margin-bottom: 20px;
}
.title_blue,
.title_blue02{
  color: #0daed8;
  font-size: 2.0rem!important;
  font-weight: bold;
  line-height: 1.6;
  margin-bottom: 20px;
}
.title_blue02{color: #0068b7;}

.title_product img{
  display: block;
  max-width: 360px;
  margin: 0 auto 40px;
}
.border_title{
  border-left: 5px solid #0068b7;
  font-family: serif;
  font-size: 1.7rem!important;
  font-weight: normal;
  line-height: 1.6;
  padding-left: 10px;
  margin-bottom: 30px;
}

#home_message{
  padding: 80px 2%;
}
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
#home_message p{
  margin-bottom: 1.0rem!important;
}
.message_name{
  text-align: right;
}
.message_name img{
  display: inline-block;
  max-width: 160px;
  margin-left: 20px;
  vertical-align: middle;
}
#home_message table{
  width: 280px;
  float: right;
  margin-top: 20px;
}
#home_message th,
#home_message td{
  border: none!important;
  display: block;
  text-align: right;
  vertical-align: middle;
  line-height: 1.2;
  padding: 10px 0 0;
}
#home_message th{
  background: none;
  font-size: 1.37rem;
}
#home_message td{
  font-size: 1.12rem;
}

#merit{
  box-sizing: border-box;
  position: relative;
  border-top: 10px solid #00479d;
  padding: 60px 2% 100px;
}
#merit::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  border-top: 10px solid #0daed8;
  z-index: -1;
}
.merit_img {
  background: url(../img/original/merit_bg_sp.jpg) no-repeat center top / 100%;
  padding-top: 210px;
}

.black_Box{
  box-sizing: border-box;
  border: 1px solid #000;
  padding: 20px 20px 0;
}
#merit .containerbox:first-child{
  justify-content: center;
  align-items: center;
}
#merit .item02,
#merit .item04{
  margin-bottom: 2%;
}
#merit .item02:nth-child(odd),
#merit .item04:nth-child(odd){
  width: 24%;
}
#merit .item02:nth-child(even){
  box-sizing: border-box;
  width: 76%;
  padding-left: 1.0rem;
}
#merit .item04:nth-child(even){
  box-sizing: border-box;
  width: 26%;
  padding: 0 1.0rem;
}
#merit .item02 p{font-size: 0.93rem!important;}

#detail {
  background: url(../img/original/LP4.webp) center top / cover !important;
  padding: 80px 0 !important;
}

#filter,
#chui,
#voice{
  padding: 80px 2%;
}
#product{padding: 80px 2% 40px;}

#flow .black_Box {
  background: url(../img/original/LP6.jpg) no-repeat right top / auto !important;
}

#flow h1.title01{
  margin-bottom: 5px;
}
#flow ol{margin-left: 0;}
#flow ol li{
  position: relative;
  list-style: none;
  line-height: 50px;
  letter-spacing: 0.2em;
  text-align: center;
  font-size: 1.5rem;
  margin-bottom: 12px;
}
#flow ol li span{
  position: absolute;
  bottom: -5px;
  left: 0;
  display: block;
  color: #fff;
  font-size: 50px;
  font-style: italic;
  font-family:'M PLUS 1p';
  font-weight: 300;
  opacity: 0.6;
}
.blue_box{
  border: 1px solid #0068b7;
  background: #bbd4ef;
}
.gray_box{
  border: 1px solid #666;
  background: #ddd;
}
#flow .item02 img{
  margin-bottom: 20px;
}

#product ul li,
#product ul.dotted_line li{
  list-style: none;
  padding: 20px 0;
  border-bottom: 1px solid #000;
}
#product ul li:first-child{
  border-top: 1px solid #000;
}
#product ul.dotted_line li{
  border-bottom: 1px dotted #000;
}
#product ul.dotted_line li:first-child{
  border-top: 1px dotted #000;
}
.dotted_blue{
  color: #0068b7;
  line-height: 2.0!important;
  margin-bottom: 5px!important;
}
.dotted_blue::before{
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  vertical-align: top;
  border-radius: 5px;
  background-color: #0068b7;
  margin: 10px 10px 0 0;
}
.price_bluebg,
.price_graybg{
  box-sizing: border-box;
  background: #d6e5f5;
  padding: 10px;
}
.price_graybg{background: #e0e0e0;}
.blue_text{color: #0068b7;}
.price_blue,
.price_gray{
  color: #0068b7;
  font-size: 1.75rem!important;
  font-weight: bold;
  line-height: 1.4;
}
.price_gray{color: #000;}
.price_blue span,
.price_gray span{
  font-size: 1.25rem;
  font-weight: normal;
}
.price_blue b,
.price_gray b{
  font-size: 1.0rem;
  font-weight: normal;
}

#product dl{
  width: 100%;
  display: flex;
  margin-bottom: 0!important;
}
#product dl dt{
  width: 20%;
}
#product dl dt img{
  max-width: 75px;
  margin-top: -5px;
}
#product dl dd{
  width: 78%;
}

.product_title01{
  font-size: 1.5rem!important;
  line-height: 1.6;
  text-align: justify;
  margin-bottom: 10px;
}

.exam{
  box-sizing: border-box;
  border-bottom: 3px solid #000;
  margin-top: 20px;
  padding: 0 15px 20px;
}
.exam_top{
  border-top: 3px solid #000;
  padding-block: 20px;
}
.exam_title{
  font-size: 1.5rem!important;
  font-weight: normal;
  line-height: 1.4!important;
  margin-bottom: 10px!important;
}
.exam_title span{
  display: block;
  color: #e23723;
}
.exam_title02{
  font-size: 1.8rem!important;
  line-height: 1.6!important;
  margin-bottom: 0!important;
}
.exam_title02 span{
  display: block;
  font-size: 0.81rem;
  font-weight: normal;
}
.no_neme{font-size: 0.81rem!important;}

.suishitsu_title{
  text-align: center;
  color: #0068b7;
  font-size: 1.5rem!important;
  font-family: serif;
  font-weight: normal;
  margin-bottom: 10px;
}
.suishitsu_title02{
  text-align: center;
  font-size: 1.3rem!important;
  line-height: 1.6;
  margin-bottom: 30px;
}

.table01,
.table02{
  border-collapse: collapse;
  border-spacing: 0;
  border: none;
  width: 100%;
}
.table01{
  margin: 0 0 40px!important;
}
.table01 th,
.table01 td,
.table02 th,
.table02 td{
  box-sizing: border-box;
  border-bottom: 1px solid #000;
  border-top: none;
  border-left: none;
  border-right: none;
  font-size: 1.2rem;
  font-weight: normal;
  line-height: 1.4;
  padding: 15px 10px;
}
.table01 th,
.table02 th{
  background: none;
  text-align: left;
  font-weight: normal;
}
.table01 td,
.table02 td{
  text-align: center;
  border-left: 1px solid #000;
}
.table01 tr:first-child,
.table02 tr:first-child{
  border-top: 3px solid #000;
}
.table01 tr:first-child{
  border-bottom: 3px solid #000;
}
.table02 tr:last-child{
  border-bottom: 3px solid #000;
}
.bg_yellow{
  background: #fffccc;
}

.alert{
  box-sizing: border-box;
  background: #fcf5f5;
  padding: 15px;
  margin-top: 30px;
}
.alert_title{
  color: #c9393e;
  text-align: center;
  font-size: 1.12rem!important;
  font-weight: bold;
  line-height: 1.6;
  margin-bottom: 10px;
}
.alert ol{
  list-style: none;
}
.alert li{
  position: relative;
  padding-left: 64px;
  line-height: 1.6;
  margin-bottom: 10px;
}
.alert li::before{
  content: "＊（注）";
  position: absolute;
  left: 0;
  color: #c9393e;
  font-size: 1.0rem!important;
}

#trust .containerbox{
  box-sizing: border-box;
  border: 1px solid #000;
}
#trust .item02{
  box-sizing: border-box;
  width: 50%;
  padding: 30px 30px 10px;
}
#trust .item02:last-child{
  border-left: 1px solid #000;
}
.trust_title01{
  text-align: center;
  font-family: serif;
  font-size: 1.5rem!important;
  line-height: 1.6;
  margin-bottom: 10px;
}
.trust_title02{
  text-align: center;
  font-size: 0.87rem!important;
  font-weight: normal;
  line-height: 1.4;
}

/*使用上の注意*/
.chuiArea{
  box-sizing: border-box;
  background: #eee;
  padding: 30px;
}
.chui_title{
  position: relative;
  font-size: 1.8rem!important;
  font-weight: normal!important;
  margin-bottom: 30px;
}
.chui_title::before {
  content: "";
  display: inline-block;
  width: 52px;
  height: 46px;
  background-image: url(../img/original/chi_icon.svg) !important;
  background-size: contain !important;
  vertical-align: middle !important;
  margin-right: 10px !important;
}

#chui ul{
  list-style: none;
  margin-left: 0;
}
#chui li{
  position: relative;
  line-height: 1.4;
  font-size: 1.2rem;
  padding-left: 20px;
  margin-bottom: 10px;
  list-style: none;
}
#chui li::before{
  content: "※";
  position: absolute;
  left: 0;
}

/*お客様の声*/
#voice{background: #e6f7fb;}
#voice h1.title01c{margin-bottom: 20px;}
#voice .item03{
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #0068b7;
  padding: 15px 0;
}
.voiceArea{
  box-sizing: border-box;
  padding: 20px 15px 0;
}
.voice_title{
  border-bottom: 1px solid #0068b7;
  color: #0068b7;
  font-size: 1.3rem!important;
  font-weight: bold;
  line-height: 1.6;
  margin-bottom: 10px;
}
.voice_title span{
  font-size: 1.0rem;
  font-weight: normal;
}
#voice dl,#voice dt,#voice dd{width: 100%;}
#voice dl{margin-bottom: 20px;}
#voice dt{
  color: #0068b7;
  font-size: 1.0rem;
  line-height: 1.6;
}
#voice dd{
  font-size: 1.2rem;
  line-height: 1.6;
}

#btnArea{
  padding: 60px 0;
}
a.btn_entry{
  text-decoration: none;
}
a.btn_entry img{
  max-width: 840px;
  width: 95%;
  margin: 0 auto;
}

/*スタッフ紹介*/
#staff .containerbox::after{
  content:"";
  display: block;
  width:31.33%;
}
.p-triangle__inner b{
  font-size: 18px;
}
#staff .item03{
  background: #f5f5f5;
  margin-bottom: 30px;
}
#staff .staff_title{margin-bottom: 0;}
#staff .staff_title a:link,
#staff .staff_title a:visited,
#staff .item03 a:visited{
  box-sizing: border-box;
  color: #000;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.8;
  padding: 23.6px 8.10811%;
  margin-bottom: 0;
  display: block;
}

#staff .staff_title a:hover{
  text-decoration: none;
  background: #0068b7;
  color: #fff;
}
.title_name{
  font-size: 26px!important;
  font-weight: 400;
  margin-bottom: 10px!important;
}
.title_name span{
  font-size: 22px;
}
.staff_faq{
  font-size: 22px!important;
  line-height: 1.8!important;
  margin: 40px 0 10px!important;
}
.staff_faq::before{
  content: "";
  border-left: 6px solid #000;
  margin-right: 10px;
}
#staff dl.hobby{
  display: flex;
  flex-wrap: wrap;
/*  justify-content: space-between;*/
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 30px 0;
}
#staff dl.hobby dt{width: 30%;}
#staff dl.hobby dt img{border-radius: 50%;}
#staff dl.hobby dd{
  box-sizing: border-box;
  width: 70%;
  padding-left: 20px;
}


/* ← ここがポイント！ pタグにもtext-alignを明示的に適用 */
.pre_tx020 p {
  text-align: center;
}



body {
  overflow-x: hidden; /* 横スクロール防止 */
}



.book-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
  padding: 0 10px;
}

.book-item {
  box-sizing: border-box;
  width: calc(33.333% - 20px);
  text-align: center;
}

.book-item img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.book-title {
  font-size: 16px;
  font-weight: bold;
  margin: 8px 0 4px;
}

.book-author,
.book-category {
  font-size: 13px;
  color: #555;
  margin: 0 0 4px;
}

/* モバイルでは2列にする */
@media screen and (max-width: 768px) {
  .book-item {
    width: calc(50% - 10px) !important;
    margin-bottom: 20px;
  }

  .book-title {
    font-size: 14px;
  }

  .book-author,
  .book-category {
    font-size: 12px;
  }
}


@media screen and (max-width: 768px) {
  .pre_tx020 {
    font-size: 10pt !important;
    line-height: 1.6;
    padding: 0 10px;
  }
}




/* PCでは改行しない */
.br-sp {
  display: inline;
}

/* スマホ（768px以下）では改行する */
@media screen and (max-width: 768px) {
  .br-sp {
    display: block;
  }
}