@charset "utf-8";

* {
    margin: 0;
    padding: 0;
    text-decoration: none;
    font-family: "Noto Sans JP",'Roboto', sans-serif;
    box-sizing: border-box;
	font-weight: 400;
}

html, body { min-width: 100%; min-height: 100%; box-sizing: border-box; line-height: 1.5; }

div, span, object, iframe, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;}

ul, ol {
    list-style: none;
}

table {
width: 100%;
table-layout: fixed;
word-break: break-all;
word-wrap: break-all;
}

input[type="text"], input[type="tel"], input[type="email"], textarea {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
	border: solid 1px #bfbfbf;
    background-color: #f5f5f5;
    padding: 10px;
	box-sizing: border-box;
	max-width: 100%;
}


input:-webkit-autofill { transition: background-color 5000s ease-in-out 0s !important; }/*input選択時色変えない様に*/
input:focus::placeholder { color: transparent; }/*inputクリックで文字消す*/
select { min-height: 40px; border: solid 1px #bfbfbf; background-color: #f5f5f5; border-radius: 3px; box-sizing: border-box;}

input[type="checkbox"],input[type="radio"] {
  accent-color: white;
}

.opa { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; -webkit-backface-visibility: hidden; backface-visibility: hidden;}
.opa:hover { opacity: 0.6; filter: alpha(opacity=60); -ms-filter: "alpha(opacity=60)"; -webkit-backface-visibility: hidden; backface-visibility: hidden;}

@media screen and (max-width:1024px){
	.pc { display:none !important; }
	.smp_txt_r { text-align: right; }	
}

@media print, screen and (min-width:1025px) {
	.smp { display:none !important; }
	.h_logo_smp { display: none; }
}

.flex-wrap { display: flex; flex-wrap: wrap; }


#header { width: 100%;  z-index: 1; border-top:10px solid #670099; }


#header-inner { width: 70%; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; }
.h_logo {  padding: 15px 0; width: 250px; order:2; }
.h_copy { order:1; width: 100%; }
.h_copy h1 { font-size: 12px; }

.h_tel {
	order:3; 
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  margin: 0;
  line-height: 1;
}

@media screen and (max-width: 768px) {
	.h_logo_smp { width: 30%; padding: 2%; }
  .h_tel {
    padding-left: 30px;
    padding-right: 5px;
  }
}

.h_tel p {
  margin: 0;
}
.h_tel svg {
  width: 40px;
  margin-right: 0;
  fill: #22ac38;
}
.h_tel a {
 font-family: 'Poppins', sans-serif;
    font-weight: 700;
  display: inline-block;
  font-size: 36px;
  color: #313131;
  transition: 0.3s;
}
.h_tel a:hover {
  opacity: 0.5;
}



@media screen and (max-width:1024px){
	#header { width: 100%; position: fixed; top: 0; left: 0; z-index: 2; background-color:rgba(255,255,255,1); }
	#header-inner { width: 100%; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center;}
	.h_logo { width: 50%; padding: 3% 0; position: relative; z-index: 3;}
	.h_logo_smp { width: 20%; padding: 2%; }
}

@media screen and (max-width:1280px){
	#header-inner { width: 90%; }

}

@media screen and (min-width: 1025px) {
#overlay { width: 100%; }
}

@media screen and (max-width: 1024px) {
.h_tool {
  display: flex;
  flex-wrap: wrap;
  width: 100px;
  z-index: 2;
}
.h_tool li {
  width: calc(100% / 2);
  height: 50px;
  list-style-type: none;
}
}

@media screen and (max-width:480px){
.h_logo_smp {
    width: 50%;
    padding: 2%;
}
}

/*smp_nav*/
body {
  animation: bugfix infinite 1s;
}

@keyframes bugfix {
  from {
    padding: 0;
  }
  to {
    padding: 0;
  }
}
@-webkit-keyframes bugfix {
  from {
    padding: 0;
  }
  to {
    padding: 0;
  }
}

@media screen and (max-width: 1024px) {
	#overlay-button:hover span, #overlay-button:hover span:before, #overlay-button:hover span:after { background: #660199; }
	header input[type=checkbox] { display: none; }
	header input[type=checkbox]:checked ~ #overlay { visibility: visible; opacity: 1; overflow-x: auto; }
	header input[type=checkbox]:checked ~ #overlay-button:hover span, header input[type=checkbox]:checked ~ #overlay-button span { background: transparent; }
	header input[type=checkbox]:checked ~ #overlay-button span:before { transform: rotate(45deg) translate(6px, 6px); }
	header input[type=checkbox]:checked ~ #overlay-button span:after { transform: rotate(-45deg) translate(6px, -6px); }
	#overlay {
		height: 100vh;
		width: 100vw;
		background: rgba(255, 255, 255, 0.9);
		z-index: 10;
		visibility: hidden;
		opacity: 0;
		position: fixed;
		transition: all 0.5s ease-in-out;
		top: 0;
		left: 0;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}
	
	#overlay .active { margin: 0; }
	#overlay-button {
		position: absolute;
		right: 10px;
		top: 1.2rem;
		padding: 10px 5px;
		cursor: pointer;
		user-select: none;
		z-index: 100;
	}
	#overlay-button span {
		height: 2px;
		width: 25px;
		border-radius: 2px;
		background-color: #660199;
		position: relative;
		display: block;
		transition: all 0.2s ease-in-out;
	}
	#overlay-button span:before, #overlay-button span:after {
		height: 2px;
		width: 25px;
		border-radius: 2px;
		background-color: #660199;
		position: absolute;
		content: "";
		transition: all 0.2s ease-in-out;
	}
	#overlay-button span:before { top: -8px; visibility: visible; }
	#overlay-button span:after { top: 8px; }
	
	
}

@media screen and (max-width: 767px) and (orientation: landscape) {
	#overlay {
		height: 100vh;
		width: 100vw;
		background: rgba(255, 255, 255, 0.9);
		z-index: 10;
		visibility: hidden;
		opacity: 0;
		position: fixed;
		transition: all 0.5s ease-in-out;
		top: 0;
		left: 0;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: center;
		flex-direction: column;
		padding: 3% 0;
	}
}

nav {
	width: 70%;
	margin: 0 auto;
	text-align: center;
	
}


@media screen and (max-width:1280px){
	nav {
    width: 90%;
	}
}



/*ナビゲーションを横並びに*/
nav ul {
	list-style: none;
	display: flex;
	justify-content: center;
	background-color: #660199;
	border-radius: 10px;
}
/*2階層目以降は横並びにしない*/
nav ul ul{
  display: block;
}

/*下の階層のulや矢印の基点にするためliにrelativeを指定*/
nav ul li{
  position: relative;
	width: calc(100% / 5);
}

nav ul li ul li { width: 100%; }

/*ナビゲーションのリンク設定*/
nav ul li a {
	display: flex;
	justify-content: center;
	align-items: center;
	text-decoration: none;
	color: #fff;
	padding:20px 15px;
	transition:all .3s;
	height: 100%;
	position: relative;
}

nav ul li li a {
	padding:5px 10px;
	min-height: 60px;
	box-sizing: border-box;
}

nav ul li a:hover{
  color:#fff;
	opacity: 0.5;
}

/*==矢印の設定*/

@media screen and (max-width: 1024px) {
	nav {
	width: 90%;
	margin: 0 auto;
	text-align: center;
	}
	
	nav ul li{
		position: relative;
		width: calc(100% / 1);
	}
	
/*2階層目を持つliの矢印の設定*/
nav ul li.has-child::before{
  content:'';
  position: absolute;
  left:15px;
  top:30px;
  width:6px;
  height:6px;
  border-top: 2px solid #fff;
    border-right:2px solid #fff;
    transform: rotate(135deg);
}
}

/*3階層目を持つliの矢印の設定*/
nav ul ul li.has-child::before{
  content:'';
  position: absolute;
  left:6px;
  top:17px;
  width:6px;
  height:6px;
    border-top: 2px solid #fff;
    border-right:2px solid #fff;
    transform: rotate(45deg);
}

/*== 2・3階層目の共通設定 */

/*下の階層を持っているulの指定*/
nav li.has-child ul {
    /*絶対配置で位置を指定*/
  position: absolute;
  left:0;
  /*top:62px;*/
  z-index: 4;
    /*形状を指定*/
   background: rgba(102,1,153,0.6);
  width:100%;
    /*はじめは非表示*/
  visibility: hidden;
  opacity: 0;
    /*アニメーション設定*/
  transition: all .3s;
	border-radius: 0 0 10px 10px ;
}

/*hoverしたら表示*/
nav li.has-child:hover > ul,
nav li.has-child ul li:hover > ul,
nav li.has-child:active > ul,
nav li.has-child ul li:active > ul{
  visibility: visible;
  opacity: 1;
}

/*ナビゲーションaタグの形状*/
nav li.has-child ul li a{
  color: #fff;
  border-bottom:solid 1px rgba(255,255,255,0.6);
}

nav li.has-child ul li:last-child a{
  border-bottom:none;
}

nav li.has-child ul li a:hover,
nav li.has-child ul li a:active{
  background:#ccc;
}


/*==3階層目*/

/*3階層目の位置*/
nav li.has-child ul ul{
  top:0;
  left:182px;
  background: rgba(0,0,0,0.8);
}

nav li.has-child ul ul li a:hover,
nav li.has-child ul ul li a:active{
  background:#448ED3;
}


/*==1024px以下の形状*/

@media screen and (max-width:1024px){
  nav{
    padding: 0;
  }
  
  nav ul{
    display: block;
  }
  
	
  nav li.has-child ul,
  nav li.has-child ul ul{
    position: relative;
  left:0;
  top:0;
  width:100%;
  visibility:visible;/*JSで制御するため一旦表示*/
  opacity:1;/*JSで制御するため一旦表示*/
  display: none;/*JSのslidetoggleで表示させるため非表示に*/
  transition:none;/*JSで制御するためCSSのアニメーションを切る*/
}
  
	nav li.has-child ul li { background-color: #ac74c8;}
	
	
nav ul li a{
  border-bottom:1px solid #fff;
	min-height: 60px;
	position: relative;
}

/*矢印の位置と向き*/

nav ul li.has-child::before{
  left:20px;  
}

nav ul ul li.has-child::before{
    transform: rotate(135deg);
  left:20px;
}
    
nav ul li.has-child.active::before{
    transform: rotate(-45deg);
}

}

@media (orientation: landscape) and (max-width:667px){
	#overlay nav {
    width: 70%;
	}
}

@media screen and (min-width:1025px){
	#foot_link { display: none; }
}

/*フッター*/
footer { margin-top:0 !important; }
#footer { width:100%; margin:0; font-weight: 400; font-size:14px; padding: 15px 0;}
#footer-inner { width: 70%; margin: 0 auto; box-sizing: border-box; display: flex; flex-wrap: wrap; justify-content: space-between; }
@media screen and (max-width:1280px){
	#footer-inner { width: 90%; }
}
.foot_l { display: flex; flex-wrap: wrap; flex-direction: column; width: 30%; }
.foot_l p { margin-bottom: 20px; }

.foot_r { width: 70%; }

.foot_link_box { display: flex; flex-wrap: wrap; justify-content: flex-end; width: 100%; padding: 3% 0;}
.foot_link { width : calc(100% / 4) ; }
.foot_link h3 { font-size: 140%; font-weight: 700; margin-bottom: 10px; }
.foot_link h3 a { display: inline-block; position: relative; color:#000; font-size: 100%; font-weight: 700; padding-bottom: 5px; }
.foot_link li { border-left: solid 1px #ccc;}
.foot_link li { padding:5px 0 5px 10px; padding-bottom: 5px;  list-style-type: none;}

.foot_link a { display: inline-block; position: relative; color:#000; padding-bottom: 5px; font-size: 12px; font-weight: 400; }
.foot_link a::before {
	border-bottom: solid 1px #000;
	padding-bottom: 5px;
	bottom: 0;
	content: "";
	display: block;
	position: absolute;
	transition: all .3s ease;
	width: 0;
}

.foot_link a::before { left: 0; width: 0; }
.foot_link a:hover::before { width: 100%; }

.address {  text-align: center; padding: 5px; display: flex; flex-wrap: wrap; flex-direction: column; justify-content: center; align-items: center; font-size: 12px!important;}
.address  p { margin-bottom: 15px;}
address { font-style:normal; color: #000; text-align: center; }

@media screen and (max-width:1024px) {
	
	#footer { width:100%; margin-top: 0; background-size: cover; padding: 0;}
	#footer-inner { width: 100%; margin: 0 auto; box-sizing: border-box; display: flex; flex-wrap: wrap; padding: 3%; }
	
	.foot_l { width: 100%; text-align: center; }
	.foot_l div { width: 100%; padding: 3% 0;}
	.foot_l img { margin: 0 auto; }
	.foot_r { width: 100%; }
	
	.foot_link h3 { font-size: 120%; font-weight: 700; margin-bottom: 10px; }
	
	.address {  padding: 20px 0; }
	address { font-style:normal; font-size: 12px !important; }
	
	#foot_link { position: fixed; bottom: 0; left: 0;
    width: 100%;
    height: 52px;
    background-color: rgba(176, 38, 35, 0.7);
    color: #fff;
    font-weight: bold;
    box-shadow: 0 0 0 1px #fff, 0 0 0 2px #000, 0 0 0 3px #fff, 0 0 0 4px #000, 0 0 0 5px #fff;
    margin-bottom: 5px;
}
	#foot_link ul {
		display: flex;
		flex-wrap: wrap;
		font-size: 12px;
		height: 100%;
	}
	
	#foot_link li { display: flex; justify-content: center; align-items: center; width: 30%;}
	
	#foot_link li:first-child {
		width: 70%;
		border-right: solid 1px #fff;
	}
	
	#foot_link li a { color: #fff; }	

}


@media screen and (max-width:480px){	
	.foot_link {
		width : calc(100% / 2) ;
		padding-right: 3%;
		padding-bottom: 3%;
	}
	.address { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center;}
	address { font-size: 10px!important; }
}

/*ぱんくず*/
#breadcrumb { width: 100%; margin: 15px 0; text-align:left; padding:0px;  }
#breadcrumb ul { width: 70%; margin:0 auto; padding:0px; }
#breadcrumb li { display: inline; margin-right: 5px; margin-left:0; padding:0px; }
#breadcrumb li:after {
	font-family: "Font Awesome 5 Free";
    color: #000;
    content: "\f105";
    padding:0 10px;
	font-weight: 900;
}
#breadcrumb li:last-child:after { display: none; }
#breadcrumb a { color:#660199; font-weight:bold; position: relative; }
#breadcrumb a::before {
	border-bottom: solid 1px #660199;
	padding-bottom: 5px;
	bottom: 0;
	content: "";
	display: block;
	position: absolute;
	transition: all .3s ease;
	width: 0;
}

#breadcrumb a::before { left: 0; width: 0; }
#breadcrumb a:hover::before { width: 100%; }


@media screen and (max-width:768px){
	#breadcrumb { width: 100%; text-align:left; padding:0px; }
	#breadcrumb .inner { width:100%; margin:0 auto; font-size:90%; padding:3%; }
	#breadcrumb ul  { width: 100%; margin:0 auto !important; padding:0px 10px !important; font-size: 10px; }
}

#mainimage { width: 100%; display: flex; margin-top: 15px;  }
#mainimage_sub { margin: 15px 0 0 0; }

@media screen and (max-width:1024px){
	#mainimage { margin-top: 64px;}	
	#mainimage_sub .swiper-slide img { width: 100%; height: 340px; object-fit: cover; object-position: 50% 50%; }
}
.swiper { width: 100%; z-index: 0!important; }
.swiper--wrapper {
  /* wrapperのサイズを調整 */
  width: 100%;
}

@media screen and (min-width:1025px){
	#mainimage_sub .swiper-slide img { width: 100%; height: 340px; object-fit: cover; object-position: 50% 50%; }
.swiper-slide img { width: 100%; height: 680px; object-fit: cover; object-position: 50% 50%; }
}

.swiper-pagination-bullet {
  background-color: #434343!important;
}

/*メイン*/
#content{ overflow:hidden; text-align:left; background-repeat:repeat-x; background-position:bottom;}
section { width:100%; margin:0 auto;}
.maincontent { padding:0; margin:0 auto; width:100%; }

.main-content { width:70%; margin:0 auto;  font-weight: 300; }

.title_box { display: flex;flex-wrap: wrap;align-items: center; margin: 20px 0; }
.title_box h3 { text-align: center; font-size: 300%; font-weight: 500; color: #660199; position: relative; font-family: 'Poppins', sans-serif; }
.title_box h3::before {
    content: '';
    position: absolute;
    top: 50%;
	right: -60px;
    display: inline-block;
    width: 50px;
    height: 2px;
    background-color: #7d5f9f;
}
.title_box h4 { text-align: center; font-size: 160%; font-weight: 500; }

.title_box_center { display: flex;flex-wrap: wrap; justify-content: center; align-items: center; margin: 20px 0; }
.title_box_center h3 { text-align: center; font-size: 300%; font-weight: 500; color: #660199; position: relative; font-family: 'Poppins', sans-serif; margin-right: 70px; }
.title_box_center h3::before {
    content: '';
    position: absolute;
    top: 50%;
	right: -60px;
    display: inline-block;
    width: 50px;
    height: 2px;
    background-color: #7d5f9f;
}
.title_box_center h4 { text-align: center; font-size: 160%; font-weight: 500; }

@media screen and (max-width:1024px){
	.title_box,.title_box_center { display: flex; flex-wrap: wrap; align-items: flex-start; flex-direction: column; margin-bottom: 40px; }
	.title_box h3,.title_box_center h3 { text-align: left; line-height: 1; font-size: 250%; }
	.title_box h3::before,.title_box_center h3::before { display: none; }
	.title_box h4,.title_box_center h4 { font-size: 120%; margin-left: 0; text-align: left; }
}

@media screen and (min-width:1025px){
	.title_box h4 { margin-left: 65px; }
}

@media screen and (max-width:1280px){
	.main-content { width:90%; margin:0 auto; padding: 40px 0; }
	
}

#news,#works,#subpage { background-color: #f8f1fb;  }

#news h3 { text-align: left; position: relative; display: inline-block; }


.news_inner { display: flex;flex-wrap: wrap;justify-content: space-between; }
.news_l { width: 70%; padding: 3% 3% 3% 0; }
.news_list { margin: 20px 0; }
.news_list li { background-color: #fff; color: #434343; padding: 20px; display: block; margin-bottom: 15px; position: relative; }
.news_list li a { color: #000; text-decoration: none;}
.news_list li::before {
	border-bottom: solid 1px #000;
	padding-bottom: 5px;
	bottom: 0;
	content: "";
	display: block;
	position: absolute;
	transition: all .3s ease;
	width: 0;
}

.news_list li::before { left: 0; width: 0; }
.news_list li:hover::before { width: 50%; }
.news_r { width: 30%; }

@media screen and (max-width:768px){
	.news_r { width: 100%; }
}



#reform .main-content,#works .main-content,#subpage .main-content { padding: 3% 0; }

.reform_list,.works_list,.cat_list { display: flex; flex-wrap: wrap; }
.reform_box { width: calc(100% / 3); padding: 1%; }
.reform_box h5 { color: #660199; margin-bottom: 20px; text-align: center; font-size: 140%; font-weight: 700;}
.reform_box p { margin: 10px 0;}


.works_box,.works_img { width: calc(100% / 4); padding: 1%; }
.works_title { margin: 10px 0; }
.works_title a { font-weight: 700; font-size: 110%; color: #660199; }

.works_img img { width: 100%; height: 230px; object-fit: cover; }

.works_bf {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
	position: relative;
}
.works_bf:after {
    content: url(../images/works_arrow.png);
    position: absolute;
    text-align: center;
    top: 50%;
    width: 100%;
    z-index: 1;
}

.works_l,.works_l_1,.works_r {
    padding: 1%;
    width: 48%;
}

.works_title2 {
    border-left: 5px solid #660199;
    font-size: 120%;
    line-height: 1;
    margin: 3% 0;
    padding: 7px 0 7px 18px;
	font-family: 'Poppins', sans-serif;
	font-weight: 500;
}

@media screen and (max-width:768px){
.reform_box { width: calc(100% / 1); padding: 1%; }
	.works_box { width: calc(100% / 1); padding:3% 0; }
	.works_img { width: calc(100% / 1); padding: 1%; }
}



@media (orientation: portrait) and (max-width:767px){
	.works_l,.works_r {
    padding: 1% 0;
    width: 100%;
	}
	.works_l:after,.works_l_1:after {
    content: url(../images/works_arrow2.png);    
    text-align: center;    
    z-index: 1;
		display: block;
		margin: 3% auto;
}
	.works_bf:after {
    display: none;
	}
	
	.works_l_1 { width: 100%; }
	
}

@media (orientation: landscape) and (max-width:667px) {
	.works_l ,.works_r, .works_l_1 { width: 48%; }
	.works_l_1 img { height: 184px!important; }
	.works_bf:after {
    content: url(../images/works_arrow.png);
    position: absolute;
    text-align: center;
    top: 50%;
    width: 100%;
    z-index: 1;
	}
}

.works_l_1 img { width: 100%; height: 409px; object-fit: cover; }

@media (orientation: landscape) and (max-width:1366px){
 .works_l_1 img { height: 293px; }
}

@media screen and (max-width:1280px){
	.works_l_1 img { height: 349px;}
}


@media screen and (max-width:1024px){
	.works_l_1 img { height: 283px;}
}



@media screen and (max-width:768px){
	.works_l_1 img { height: 212px;}
}

@media screen and (max-width:767px){
	.works_l_1 img { height: initial;}
}



@media screen and (orientation: landscape) and (max-width:667px)  {
	.works_box { width: calc(100% / 2); padding:3%; }
	.works_img { width: calc(100% / 2); padding: 1%; }
}

.cat_list li { display: inline-block; background-color: #ccc; padding: 5px 10px; border-radius: 5px; margin-right: 10px; font-size: 12px; font-weight: 700; }
.cat_list li.gaiheki { background-color: #7d5f9f; color: #fff; }
.cat_list li.reform { background-color: #434343; color: #fff; }

#contact { background-image: url("../images/contact_bg.jpg"); background-size: 100% auto; background-position:center; background-color:rgba(255,255,255,0.6); background-blend-mode:lighten; }
#contact .main-content { padding: 3% 0; text-align: center; }
#contact h3 { font-size: 200%; font-weight: 900; margin: 20px 0; }
#contact h4 { font-size: 140%; font-weight: 700; margin: 20px 0; }

.contact_tel svg {
  width: 60px;
  margin-right: 0;
  fill: #22ac38;
}
.contact_tel a {
 font-family: 'Poppins', sans-serif;
    font-weight: 700;
  display: inline-block;
  font-size: 50px;
  color: #313131;
  transition: 0.3s;
}
.contact_tel a:hover {
  opacity: 0.5;
}

@media screen and (max-width:768px){
	#contact { background-image: url("../images/contact_bg_smp.jpg"); background-size: cover; background-position:center; background-color:rgba(255,255,255,0.6); background-blend-mode:lighten; }
	#contact h3 { font-size: 140%; font-weight: 900; margin: 20px 0; }
#contact h4 { font-size: 90%; font-weight: 700; margin: 20px 0; }
	.contact_tel svg {
  width: 40px;
  margin-right: 0;
  fill: #22ac38;
}
	.contact_tel a {
 font-family: 'Poppins', sans-serif;
    font-weight: 700;
  display: inline-block;
  font-size: 220%;
  color: #313131;
  transition: 0.3s;
}
}

.faq_q {   background-color: #660199; padding:1%; font-size: 160%; color: #fff; margin-top: 50px; margin-bottom: 20px !important; border-radius: 20px; position:relative; }
.faq_q p { font-family: 'Noto Sans JP', sans-serif; font-weight: 700; }
.faq_q p:before { content:"Q"; font-size:160%; color:#fff; margin-right:15px; font-weight: 700; font-style: normal; display: inline-block; font-family: 'Poppins', sans-serif; }

.faq_a { 
	padding: 20px 15px 15px 20px;
	margin-top: 0;
	margin-bottom: 3%;
	border-radius:20px;
	background-color: #fff;
	position:relative;
}
.faq_a p:first-child:before { content:"A"; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 200%; display:inline-block; margin-left:-35px;  margin-right:15px; color: #660199;}

.faq_a p {  padding:1% 1% 1% 45px;}
.faq_a p:last-child { margin-bottom:0;}

@media screen and (max-width:1024px){
	.faq_q {   background-color: #660199; padding:3%; }
	.faq_q p {  padding:1% 1% 1% 45px;}
	.faq_q p:before { content:"Q"; font-size:120%; margin-left: -35px; }
	.faq_a p:first-child:before { font-size: 160%; }
}

.about_cont,.shindan_cont { display: flex; flex-wrap: wrap; margin: 35px 0;}
.about_txt { width: 65%; font-size: 110%; background-color: #fff; padding: 2%; }
.about_txt h3 { font-size: 160%; color: #660199; font-weight: 700; margin-bottom: 20px; }
.about_img { width: 35%; }

@media screen and (min-width:1025px){
	#about_box .about_cont:nth-child(odd) .about_txt { order:1; }
	#about_box .about_cont:nth-child(odd) .about_img { order:2; }
}

@media screen and (max-width:1024px){
	.about_txt { width: 100%; font-size: 110%; background-color: #fff; padding: 2%; }
	.about_img { width: 100%; }
}

.shindan_box { width: calc(100% / 3); padding: 1%; }
@media screen and (max-width:1024px){
	.shindan_box { width: calc(100% / 1); padding: 1%; }
}
.shindan_box h4 { display: inline-block; color: #660199; border-bottom: solid 5px #660199; font-size: 140%; font-weight: 700; margin-bottom: 20px; }
.shindan_box ul { display: flex; flex-wrap: wrap; }
.shindan_box li { display: inline-block; background-color: #fff; padding: 10px; margin-right: 10px; }
.shindan_box li:before {
	font-family: "Font Awesome 5 Free";
    color: #5ec618;
    content: "\f00c";
    padding:0 10px;
	font-weight: 900;
}

.shindan_box2 ul { display: flex; flex-wrap: wrap; }
.shindan_box2 li { display: inline-block; background-color: #fff; padding: 10px; margin-right: 10px; }
.shindan_box2 li:before {
	font-family: "Font Awesome 5 Free";
    color: #5ec618;
    content: "\f00c";
    padding:0 10px;
	font-weight: 900;
}

.shindan_img { display: flex; flex-wrap: wrap; justify-content: center; }
.shindan_img li { width: calc(100% / 4); padding: 1%; text-align: center; }

.arrow_non:after { display: none; }

@media screen and (max-width:1024px){
	.shindan_img li { width: calc(100% / 1); padding: 1%; }
	
}
.shindan_img li img { width: 100%; border: solid 5px #fff; box-shadow: 0px 0px 16px -6px rgba(0,0,0,0.6); }

.bousui_img { display: flex; flex-wrap: wrap; }
.bousui_img li { width: calc(100% / 4); padding: 1%; text-align: center; }
.bousui_img li img { width: 100%; height: 211px; object-fit: cover; border: solid 5px #fff; box-shadow: 0px 0px 16px -6px rgba(0,0,0,0.6); }

.solar_img { display: flex; flex-wrap: wrap; }
.solar_img li { width: calc(100% / 4); padding: 1%; }
.solar_img li img { width: 100%; border: solid 5px #fff; box-shadow: 0px 0px 16px -6px rgba(0,0,0,0.6); }

.solar_img_single img { border: solid 5px #fff; box-shadow: 0px 0px 16px -6px rgba(0,0,0,0.6); }

.solar_img3 { display: flex; flex-wrap: wrap; align-items: flex-end; }
.solar_img3 li { margin-right: 20px; }
.solar_img3 li img { border: solid 5px #fff; box-shadow: 0px 0px 16px -6px rgba(0,0,0,0.6); }

.reform_img { display: flex; flex-wrap: wrap; }
.reform_img li { width: calc(100% / 4); text-align: center; padding: 10px; }
.reform_img li img { width: 100%; object-fit: cover; border: solid 5px #fff; box-shadow: 0px 0px 16px -6px rgba(0,0,0,0.6); }

@media screen and (max-width:768px){
	.bousui_img li { width: calc(100% / 1); padding: 1%; text-align: center; }
	.reform_img li { width: calc(100% / 1); padding: 1%; }
	.solar_img li,.solar_img3 li  { width: calc(100% / 1); padding: 1%; margin-right: 0; }
	.solar_img3 li img { width: 100%; }
}

.flow01 { display: flex; flex-wrap: wrap; }
.flow01 li { display: flex; flex-wrap: wrap; align-items: center; margin-right: 25px; }
.flow01 li img { width: 180px; border: solid 5px #fff; box-shadow: 0px 0px 16px -6px rgba(0,0,0,0.6);}
.flow01 li:after {
	font-family: "Font Awesome 5 Free";
    color: #ac74c8;
    content: "\f054";
    padding-left:25px;
	font-weight: 900;
	font-size: 140%;
	display: flex;
}
.flow01 li:last-child:after { display: none; }

.flow02 { display: flex; flex-wrap: wrap; }
.flow02 li {  margin-right: 33px;  position: relative; text-align: center; }
.flow02 li img { width: 300px; height: 202px; border: solid 5px #fff; box-shadow: 0px 0px 16px -6px rgba(0,0,0,0.6); margin-bottom: 15px; object-fit: cover; }
.flow02 li:after {
	font-family: "Font Awesome 5 Free";
    color: #ac74c8;
    content: "\f054";
    padding-left:25px;
	font-weight: 900;
	font-size: 140%;
	position: absolute;
	right: -24px;
	top:40%;
	margin-top: -.5em;
}
.flow02 li:last-child:after { display: none; }

@media screen and (max-width:1024px){
	.flow01 li,.flow02 li { display: flex; flex-wrap: wrap; justify-content: center; align-items: center;  width: 100%; margin-bottom: 0!important;}
	.flow01 li { width: 100%; display: flex; flex-wrap: wrap; align-items: center; margin-right: 0; }
	.flow01 li img { width: 100%;}
	.flow01 li:after {
		font-family: "Font Awesome 5 Free";
    color: #ac74c8;
    content: "\f054";
    padding: 3% 0;
    font-weight: 900;
    font-size: 140%;
    display: flex;
    width: 100%;
    justify-content: center;
    transform: rotate(90deg);
	}
	.flow02 { width: 100%; margin: 20px 0; }
	.flow02 img { width: 100%!important; }
	.flow02 li { width: 100%; margin-right: 0; flex-direction: column;}
	.flow02 li:after { padding: 3% 0;
    font-weight: 900;
    font-size: 140%;
    display: flex;
    width: 100%;
    justify-content: center;
    transform: rotate(90deg);
	position: static;}
}
.title01 { border-left:10px solid #660199; padding-left: 10px; font-size: 180%; font-weight: 700; margin-top: 35px; margin-bottom: 15px; }
.title02 { color:#660199; font-size: 120%; font-weight: 700; margin-top: 20px; margin-bottom: 5px; }
.title03 { margin-top: 35px; display: flex; justify-content: center; align-items: center;  }
.title03 span { font-size: 180%; font-weight: 700; border-bottom:10px solid #660199; padding-bottom: 10px; }

@media screen and (max-width:1024px){
	.title03 span { font-size: 140%; font-weight: 700; border-bottom:10px solid #660199; padding-bottom: 10px; }
}

#subpage .main-content p { margin-bottom: 20px;}
#subpage .main-content ol { margin-left: 35px; list-style-type: decimal; }
#subpage .main-content li { margin-bottom: 20px; }
#subpage .main-content h5 { font-size: 160%; font-weight: 700; border-left: 10px solid #660199; padding-left: 10px; margin-bottom: 20px; }
#subpage .main-content h6 { font-size: 120%; font-weight: 700;  margin-bottom: 20px;}

.event_post_list { display: flex; flex-wrap: wrap; margin: 3% 0; }
.event_post { 
    width: calc(100% / 1);
    padding: 1% 0;
    display: flex;
    flex-wrap: wrap;
    border-bottom: solid 1px #ccc;
    transition: all 0.3s ease;
}
.event_post:hover {
  border-bottom: solid 1px #b02623;
}

.event_post_img {
  width: 15%;
}
.event_post_img img {
    width: 100%;
    object-fit: cover;
	transition: all 0.5s ease;
}
.event_post_img img:hover { opacity: 0.5; }

.event_post_txt { width: 85%; display: flex; align-items: center; padding-left: 3%; }
.event_post_txt a { color: #b02623; position: relative; }
.event_post_txt a:hover {
  text-decoration: none;
}
.event_post_txt a::after {
  border-bottom: solid 1px #000;
  bottom: -3px;
  content: "";
  display: block;
  position: absolute;
  left: 0;
  transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  width: 0;
}
.event_post_txt a:hover::after {
  width: 100%;
}

@media screen and (max-width:767px){
	.event_post_img {
		width: 40%;
	}
	.event_post_txt {
		width: 60%;
	}
}

#blog h2  { font-family: 'Klee One', cursive; font-size: 140%; position: relative;}
#blog h2::before {
    font-family: "Font Awesome 5 Free";
    color: #cf1414;
    content: "\f09e";
    padding-right: 10px;
	font-weight: 900;
}

#blog dl { display: flex; flex-wrap: wrap; margin-top: 15px; height: 200px; overflow-x: auto; padding-right: 10px; }
#blog dl::-webkit-scrollbar {
    width: 7px;
}
#blog dl::-webkit-scrollbar-track {
  border-radius: 10px;
	background: #f5f5f5;
}
#blog dl::-webkit-scrollbar-thumb {
  background-color: rgba(207, 20, 20, .9);
  border-radius: 10px;
}
#blog dt { width: 20%; padding: 10px 0; border-bottom: dashed 1px #ccc; }

#blog dd { width: 80%; padding: 10px 0; border-bottom: dashed 1px #ccc; }
#blog dt:first-of-type,#blog dd:first-of-type  { border-top: dashed 1px #ccc;}

.bg-red { background: #9c4644 url(../images/bg_pattern.png) repeat 0 0; }

#service-list ul { display: flex; flex-wrap: wrap; }
#service-list li { width : calc(100% / 3) ; display: flex; flex-wrap: wrap; justify-content: center; align-items: center;}

@media screen and (max-width:1024px){
	#service-list li { width : calc(100% / 1) ; }
}

#insta ul { display: flex; flex-wrap: wrap; }
#insta  li { width : calc(100% / 2) ; display: flex; flex-wrap: wrap; justify-content: center; align-items: center;}


.insta_link,.contact_link { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; padding: 3%; }

@media screen and (max-width:1024px){
	#insta  li { width : calc(100% / 1) ; padding: 2% 0; }
	.insta_link { padding: 0;}
	.insta_link div { width: 100%; }
}

.contact_link .tel_link { text-align: center; }
.contact_link .tel_link a { color: #000; font-weight: 500; }
.contact_link .tel_link a span { font-family: 'Shippori Mincho', serif; font-weight: 500; font-size: 160%; }

@media screen and (max-width:1024px){
	.contact_link .tel_title { width : 40%; }
	.contact_link .tel_link { width : 60%; text-align: right; }
	.tel_address { width: 100%; text-align: right; font-size: 12px; padding: 2% 0; }
	.tel_bt { padding: 3% 0; text-align: center; width: 100%;}
}

#sub_nav ul { display: flex; flex-wrap: wrap; }
#sub_nav ul li { width : calc(100% / 3) ;  box-sizing: border-box;  border-right: solid 1px #fff; padding: 2%; }
#sub_nav ul li:first-child { border-left: solid 1px #fff; }

@media screen and (max-width:1024px){
	#sub_nav .main-content { padding: 3% 0!important;}
}

/* ページトップへ戻る */
#page-top {
    position: fixed;
    bottom: 0;
    right:0;
    font-size: 90%;
	z-index:999;
	margin: 0!important;
}
#page-top a {
    background: #660199;
    text-decoration: none;
    color: #fff;
    width: 42px;
	height: 42px;
    display: flex;
	justify-content: center;
	align-items: center;
}

@media screen and (min-width:1201px){
	#page-top {
		bottom: 0;
	}
	#page-top a:hover { text-decoration: none; opacity: 0.5; }
}

.bt_list { display: flex; flex-wrap: wrap; }
.bt_list li { margin-right: 10px; }

@media screen and (max-width:768px){
	.bt_list { display: flex; flex-wrap: wrap; justify-content: center; }
	.bt_list li { margin-bottom: 3%; }
}

.bt01 {
	border:solid 1px #7d5f9f;
	background-color: #7d5f9f;
	padding:15px 30px;
	display: inline-block;
	min-width: 300px;
	text-align: center;
	color: #fff;
	position: relative;
    box-sizing: border-box;
    transition: all .3s;
}
.bt01:before { background-image: url("../images/arrow_r_w.svg"); content: ""; display: inline-block; width: 20px; height: 20px; position: absolute; left:0; top:50%; margin-top: -.5em; transition: all .3s;}
.bt01:hover:before { background-image: url("../images/arrow_r.svg"); }
.bt01:hover { border:solid 1px #7d5f9f; color: #7d5f9f; background-color: #fff; }

.bt02 { position: relative; color: #b02623; }
.bt02::before {
    font-family: "Font Awesome 5 Free";
    color: #b02623;
    content: "\f138";
    padding-right: 5px;
	font-weight: 900;
}

.contact_bt {
	border:solid 1px #0096da;
	background-color: #0096da;
	padding:15px 30px;
	display: inline-block;
	min-width: 300px;
	text-align: center;
	color: #fff;
	position: relative;
    box-sizing: border-box;
    transition: all .3s;
}
.contact_bt:before { background-image: url("../images/mail_icon.svg"); content: ""; display: inline-block; width: 25px; height: 25px; position: absolute; left:5px; top:50%; margin-top: -.8em; transition: all .3s;}
.contact_bt:hover:before {  background-image: url("../images/mail_icon_2.svg"); content: ""; display: inline-block; width: 25px; height: 25px; position: absolute; left:5px; top:50%; margin-top: -.8em; }
.contact_bt:hover { border:solid 1px #0096da; color: #0096da; background-color: #fff;}




.legal_notice {
   border-collapse: collapse;
   width: 100%;
	line-height: 1.5;
   margin: 20px auto;
   padding: 0;
	border-top: 2px solid #7d5f9f;
}

.legal_notice th {
   background: #fff;
   color: #660199;
	font-weight: 700;
   text-align: left;
   vertical-align:top;
   padding: 2%;
   border-bottom: 2px solid #7d5f9f;
   width:20%;
}

.legal_notice td {
   background: #fff;
   color: #000;
   padding: 2%;
   text-align: left;
   border-bottom: 2px solid #7d5f9f;
}

.form {
   border-collapse: collapse;
   width: 100%;
	line-height: 1.5;
   margin: 20px auto;
   padding: 0;
	border-top: 2px solid #7d5f9f;
}

.legal_notice td p { margin-bottom: 15px; }

.form th {
   background: #fff;
   color: #660199;
	font-weight: 700;
   text-align: left;
   vertical-align:top;
   padding: 2%;
   border-bottom: 2px solid #7d5f9f;
   width:20%;
}

.form td {
   background: #fff;
   color: #000;
   padding: 2%;
   text-align: left;
   border-bottom: 2px solid #7d5f9f;
}

.form td ol { list-style-type: none!important; margin-left: 0!important; }
.form td ol li { margin-bottom: 10px; }

@media screen and (max-width:768px){
	.legal_notice th,.legal_notice td,.form th,.form td { display: block; width: 100%; padding: 3%; }
	.legal_notice th,.form th { background-color: #7d5f9f; color: #fff;}
	.legal_notice td,.form th { border-bottom: 0;} 
}

.pribacy_box { background-color: #fff; padding: 2%; border-radius: 10px; margin: 20px 0; border: 2px solid #7d5f9f; }

/*施工例部分*/
.swiper--wrapper {
  /* wrapperのサイズを調整 */
  width: 100%;
  height: 300px;
}

.swiper-slide {
  /* スライドのサイズを調整、中身のテキスト配置調整、背景色 */
  color: #ffffff;
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 400px;
}

.mySwiper2 {  
  width: 100%;
	margin-bottom: 10px;
}

@media screen and (min-width:1025px){
	.mySwiper2 {
  height: 600px;
  width: 100%;
	margin-bottom: 10px;
}
}

.mySwiper {
  box-sizing: border-box;
  padding: 10px 0;
}

@media screen and (min-width:1025px){
	.mySwiper {
  height: 200px;
  box-sizing: border-box;
  padding: 10px 0;
}
}

.mySwiper img { object-fit: cover; height: 100%; }

.mySwiper .swiper-slide {
  width: 25%;
  height: 100%;
  opacity: 0.4;
  line-height: 80px;
}

.mySwiper .swiper-slide-thumb-active {
  opacity: 1;
}

.w50p { width: 50%; }

@media screen and (min-width:1025px){
.pr3p { padding-right: 3%;}
}

.mt20 { margin-top: 20px; }
.mt40 { margin-top: 40px; }

.m_auto { margin:0 auto;}

/*新着情報部分*/

#up_ymd { font-size: 12px; }
#detail { padding: 20px 0; font-size: initial!important;}

.catName {
    display: inline-block;
	background-color: #7d5f9f;
	color: #fff;
    padding: 5px 13px;
    border: 1px solid #7d5f9f;
    border-radius: 5px;
    font-size: 12px;
    line-height: 1;
    margin: 0 10px;
}

.newMark {
    display: inline-block;
    border: 1px solid #F00;
    padding: 5px 13px;
    font-size: 12px;
    line-height: 1;
    background: #F00;
    color: #fff;
    border-radius: 5px;
}