@charset "UTF-8";
/* CSS Document */


* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;	
}
body {
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 500;
	color: #333;
	font-size: 16px;
	-webkit-font-smoothing: antialiased;/*アンチエイリアスを滑らかに*/
	-moz-osx-font-smoothing: grayscale;
	line-height: 1.9;  
    
}


.fullscreenmenu{
display: block;
}  
.fullscreenmenu #nav_toggle{
    display: block;
  }

	.h100{
height: 100px;	
	}
	.h50{
height: 50px;		
	}
	.h30{
height: 30px;		
	}	
	.h20{
height: 20px;		
	}
	.h10{
height: 10px;		
	}


a{
	text-decoration: none;	
}
li{
	list-style-type: none;
}
.en{
   font-family: 'Cabin', sans-serif;     
}
section{
padding: 50px 0;    
}
.center_box{
  width: -moz-fit-content;
width: fit-content;  
margin: 0 auto;
display: block;   
}

.headline1{
font-size: 1.5rem;
text-align: left; 
border-bottom:3px solid #233326;
position: relative;
margin-bottom: 10px;    
}
.headline1:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  background: #0464bd;
    height: 3px;
    width: 50px;
}
.headline2 {
    position: relative;
    padding:0.1rem 0.5rem;
    font-size: 1.5rem;
    text-align: left;
}

.headline2::after {
    position: absolute;
    width: 100%;
    height: 15px;
    content: '';
}


.headline2::after {
    border-left:#0464bd solid 5px;
    border-bottom:#233326 solid 1px;
    bottom: 0;
    right: 0;
}
.headline3{
font-size: 1.1rem;
text-align: left; 
border-bottom:3px solid #233326;
position: relative;
margin-bottom: 10px;    
}
.headline3:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  background: #0464bd;
    height: 3px;
    width: 50px;
}
.koumoku{
  position: relative;
  padding-left: 1.5em;/*アイコン分のスペース*/  
display: block; 

}
.koumoku:before {
  font-family: "Font Awesome 6 Free";
  content: "\f14a";/*アイコンのユニコード*/
  font-weight: 900;
  position: absolute;/*絶対位置*/
  left: 0;/*アイコンの位置*/
  top: -2px;/*アイコンの位置*/
  color: #79629E; /*アイコン色*/
}
.text-shadow {
text-shadow: 
       1px  1px 1px #ffffff,
      -1px  1px 1px #ffffff,
       1px -1px 1px #ffffff,
      -1px -1px 1px #ffffff,
       1px  0px 1px #ffffff,
       0px  1px 1px #ffffff,
      -1px  0px 1px #ffffff,
       0px -1px 1px #ffffff;   
    }
.text1{
font-size: 1em;  
}
.text1 strong{
font-size: 1.5em;    
display: block;  
line-height: 1.5;   
}
.text2{
font-size: 1.3em;    
line-height: 1.5;
    
}
.kome{
 color: #79629E;   
}
.sp_l{
      text-align: center;
    }

.tb_l{
      text-align: center;
    }
.background1{
width: 100%;
display: block;
background-color: rgba(121,98,158,0.1);
}
.background2{
width: 100%;
height: auto;   
background:#79629E;	 
}
.background3{
width: 100%;
display: block;
background-color: rgba(121,98,158,0.05);
}
.container {
max-width: 1400px;
 width: 95%;   
display: block;
margin: 0 auto;
overflow: hidden;		
}

.flex-box1{
width: 100%;
height: auto;
display: flex;    
flex-wrap:wrap;
justify-content:space-between;
align-items:center;    
}
.flex-box2{
width: 100%;
height: auto;
display: flex;    
flex-wrap:wrap;
justify-content:center;    
}
.flex-box3{
width: 100%;
height: auto;
display: flex;    
flex-wrap:wrap;
justify-content:flex-start;    
}
.flex-box4{
width: 100%;
height: auto;
display: flex;    
flex-wrap:wrap;
justify-content:center;   
 align-items:center;    
}
/*TOPスライダー*/
.wrapper{
  position: relative;
}
.slider-box{
    width: 100%;
    height: calc(100vh - 92.41px);
}

.slider-box p {
 position: absolute;
    font-size: 3rem;
    bottom: 1%;
    left: 1%;
    color: #fff;
  animation-name:slideTextX100;
  animation-duration:4s;
  animation-fill-mode:both;
    opacity: 0;
}
.slider-box span{
    background: rgba(121,98,158,0.7);  
      padding: 0 1rem;
    display: inline-block;
    margin-top: 1%;
      animation-name:slideTextX99;
  animation-duration:4s;
  animation-fill-mode:both;
opacity: 0;   
}
.slide-in {
  overflow: hidden;
    display: inline-block;
}

.slide-in_inner {
  display: inline-block;

}

/*左右のアニメーション*/
.leftAnime{
    opacity: 0;/*事前に透過0にして消しておく*/
}

.slideAnimeLeftRight {
  animation-name:slideTextX100;
  animation-duration:0.8s;
  animation-fill-mode:forwards;
    opacity: 0;
}
@keyframes slideTextX99 {
 0% {
  transform: translateX(-100%); /*要素を左の枠外に移動*/
        opacity: 0;
  }
  50% {
  transform: translateX(0);/*要素を元の位置に移動*/
    opacity: 0.3;
  }
  100% {
  transform: translateX(0);/*要素を元の位置に移動*/
    opacity: 1;

  }
}
@keyframes slideTextX100 {
 0% {
  transform: translateX(-100%); /*要素を左の枠外に移動*/
        opacity: 0;
  }
  50% {
  transform: translateX(0);/*要素を元の位置に移動*/
    opacity: 0;
  }
  100% {
  transform: translateX(0);/*要素を元の位置に移動*/
    opacity: 1;
    text-shadow: 2px 2px 5px #333;  

  }
}

.slideAnimeRightLeft {
  animation-name:slideTextX-100;
  animation-duration:0.8s;
  animation-fill-mode:forwards;
    opacity: 0;
}


@keyframes slideTextX-100 {
  0% {
  transform: translateX(100%);/*要素を右の枠外に移動*/
    opacity: 0;
  }

  100% {
  transform: translateX(0);/*要素を元の位置に移動*/
    opacity: 1;
  }
}


.ani_text{
}
.ani_text{
	display: block;
	opacity: 0;
	transform: translate(10px,10px);
	transition: transform 1s cubic-bezier(.42,0,.58,1), opacity 1s cubic-bezier(.42,0,.58,1);
}
.ani_text.inview{
	opacity: 1;
	transform: translate(0,0);
}
.ani_text:nth-of-type(1){
	transition-delay:.2s;
}
.ani_text:nth-of-type(2){
	transition-delay:.4s;
}
.ani_text:nth-of-type(3){
	transition-delay:.6s;
}
.ani_text:nth-of-type(4){
	transition-delay:.8s;
}
.ani_text:nth-of-type(5){
	transition-delay:1s;
}
.ani_text:nth-of-type(6){
	transition-delay:1.2s;
}
.ani_text:nth-of-type(7){
	transition-delay:1.4s;
}
.ani_text:nth-of-type(8){
	transition-delay:1.6s;
}
.ani_text:nth-of-type(9){
	transition-delay:1.8s;
}
.ani_text:nth-of-type(10){
	transition-delay:2s;
}
.ani_text:nth-of-type(11){
	transition-delay:2.2s;
}
.ani_text:nth-of-type(12){
	transition-delay:2.4s;
}
.ani_text:nth-of-type(13){
	transition-delay:2.6s;
}
.ani_text:nth-of-type(14){
	transition-delay:2.8s;
}
.ani_text:nth-of-type(15){
	transition-delay:3s;
}
@media (max-width: 750px){
	.ani_text{
		transition-delay: 0s !important;
	}
}



/*フェードイン*/
.flowup{
	opacity: 0;
	transform: translateY(5px);
	transition: opacity 1.2s, transform 1.2s;
}
.flowup.inview{
	opacity: 1;
	transform: translateY(0);
}

.flowup2{
	opacity: 0;
	transform: translate(-10%, 10%);
	transition: opacity 1.6s, transform 1.6s;
}
.flowup2.inview{
	opacity: 1;
	transform: translate(0, 0);
}
.flowup3{
	opacity: 0;
	transform: translate(0, 10%);
	transition: opacity 1.6s, transform 1.6s;
	transition-delay: 0.2s;
}
.flowup3.inview{
	opacity: 1;
	transform: translate(0, 0);
}
.flowup4{
	opacity: 0;
	transform: translate(10%, 10%);
	transition: opacity 1.6s, transform 1.6s;
	transition-delay: 0.4s;
}
.flowup4.inview{
	opacity: 1;
	transform: translate(0, 0);
}
@media (max-width: 960px){
	.flowup2{
		transition-delay: 0s !important;
	}
	.flowup3{
		transition-delay: 0s !important;
	}
	.flowup4{
		transition-delay: 0s !important;
	}
}

.grayscale{
	transition: 0.2s;
	transition-delay: 0.6s;
}
.grayscale.inview{
	filter: grayscale(100%);
}



/*パンクズ */
.breadcrumb {
width: 100%;
text-align: center;    
}

.breadcrumb li {
  display: inline;/*横に並ぶように*/
  list-style: none;
font-size: 0.8em;
color: #fff;   
}

.breadcrumb li:after {/* >を表示*/
  content: '>';
  padding: 0 0.2em;
color: #fff;
}

.breadcrumb li:last-child:after {
  content: '';
}
.breadcrumb .item_text{
color: #fff;    
}
.breadcrumb li a {
  text-decoration: none;
  color: #fff;
}
.breadcrumb li a:hover {
  text-decoration: underline;
}
.breadcrumb .fa-home{
color:#BF0404; 	
}
/*スクロールダウン全体の場所*/
.scrolldown2{
    /*描画位置※位置は適宜調整してください*/
	position:absolute;
	bottom:50px;
	left:50%;
}

/*Scrollテキストの描写*/
.scrolldown2 span{
    /*描画位置*/
	position: absolute;
	left:10px;
	bottom:20%;
    /*テキストの形状*/
	color: #fff;
	font-size: 0.7rem;
	letter-spacing: 0.05em;
	/*縦書き設定*/
	-ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;

}

/* 丸の描写 */
.scrolldown2:before {
    content: "";
    /*描画位置*/
    position: absolute;
    bottom:0;
    left:-4px;
    /*丸の形状*/
	width:10px;
	height:10px;
	border-radius: 50%;
	background:#fff;
    /*丸の動き1.6秒かけて透過し、永遠にループ*/
	animation:
		circlemove 1.6s ease-in-out infinite,
		cirlemovehide 1.6s ease-out infinite;
}

/*下からの距離が変化して丸の全体が上から下に動く*/
@keyframes circlemove{
      0%{bottom:45px;}
     100%{bottom:-5px;}
 }

/*上から下にかけて丸が透過→不透明→透過する*/
@keyframes cirlemovehide{
      0%{opacity:0}
     50%{opacity:1;}
    80%{opacity:0.9;}
	100%{opacity:0;}
 }

/* 線の描写 */
.scrolldown2:after{
	content:"";
    /*描画位置*/
	position: absolute;
	bottom:0;
	left:0;
    /*線の形状*/
	width:2px;
	height: 50px;
	background:#fff;
}


.midashi_l h2{
width: 100%;     
font-size: 1rem;		
text-align:left;	   
color: #233326;  
line-height: 1.5; 
position: relative;
padding-bottom: 1rem; 
letter-spacing: 0.1rem;      
}
.midashi_l h2:after{
    position: absolute;
  bottom:0;
  left: 0;
  width: 50px;  
  height: 3px;
  background: linear-gradient(45deg, #0464bd 50%, #433F4A 0 15%);
  content: '';
    z-index: 10;
}
.midashi_l .strong{
font-size: 2.5rem;		
color: #79629E;   
display: block;    
text-align: left; 
font-family: 'Cabin', sans-serif;     
}

.midashi_c h2{
width: 100%;     
font-size: 1rem;		
text-align:center;	   
color: #233326;  
line-height: 1.5; 
position: relative;  
padding-bottom: 1rem;   
letter-spacing: 0.1rem;      
}
.midashi_c h2:after{
    position: absolute;
  bottom:0;
  left: 50%;
  width: 50px;  
  height: 3px;
  background: linear-gradient(45deg, #0464bd 50%, #433F4A 0 15%);
  content: '';
  -webkit-transform : translateX(-50%);
  transform : translateX(-50%);   
    z-index: 10;
}
.midashi_c .strong{
font-size: 2.5rem;		
color: #79629E;   
display: block;   
font-family: 'Cabin', sans-serif;      
}
.midashi_cw h2{
width: 100%;     
font-size: 1rem;		
text-align:center;	   
color: #fff;  
line-height: 1.5; 
position: relative;  
padding-bottom: 1rem;  
letter-spacing: 0.1rem;      
}
.midashi_cw h2:after{
    position: absolute;
  bottom:0;
  left: 50%;
  width: 50px;  
  height: 3px;
  background: linear-gradient(45deg, #0464bd 50%, #fff 0 15%);
  content: '';
  -webkit-transform : translateX(-50%);
  transform : translateX(-50%);   
    z-index: 10;
}
.midashi_cw .strong{
font-size: 2.5rem;		
color: #fff;   
display: block;  
font-family: 'Cabin', sans-serif;     
}
header{
width: 100%;    
position: sticky;
background: #fff;   
z-index: 500; 
top: 0;
left: 0;    
}
.top_menu{
width: 100%;
height: auto;
display: inline-block;
 padding: 0 1em;   
}

.top_menu .menu_t{
width: 100%;
display: flex;
flex-wrap:wrap;
justify-content:space-between;
align-items:center;    
}

.top_menu .menu_t .logo{
width:400px;
transition: all 0.5s;    
}

.top_menu .menu_t .logo img{
width:100%;	
display: block;
margin: 0 auto;
}


.top_menu .m1{
width: 530px;	   
}

.top_wrapper{
width: 100%;   
height: auto;    
}


/*==ナビゲーション全体の設定*/
.m1 nav{
  color: #5070b0;
  text-align: center;
}
/*ナビゲーションを横並びに*/
.m1 nav ul{
  list-style: none;
  display: flex;
  justify-content:flex-end;
}
.m1 nav ul .small{
display: block;
font-size: 0.9em; 
}

/*下の階層のulや矢印の基点にするためliにrelativeを指定*/
.m1 nav ul li{
  position: relative;
margin-left: 30px;     
}

/*ナビゲーションのリンク設定*/
.m1 nav ul li a{
  display: block;
  text-decoration: none;
  transition:all .3s;
    font-size:1em;
}

.m1 nav ul li a:hover{
opacity: 0.8;    
text-decoration: transparent;    
}


.t-con{
width: 100%;
display: flex;    
flex-wrap:wrap;
justify-content:flex-start;
align-items:center; 
transition: all 1s;     
}



.t-btn1{
width: 320px;	    
font-size: 2rem;	   
transition: all 0.5s;    
display: block;  
text-align: center; 
padding: 0.5em 0;
margin-right: 5px;  
color:#79629E; 
transition: all 0.5s;   
line-height: 1.2; 
font-family: 'Cabin', sans-serif;    
}
.t-btn1:hover{
opacity: 0.7;
text-decoration: transparent;
    
}
.t-btn1 .small{
font-size: 1rem;  
display: block;  
color: #333;  
font-family: 'Noto Sans JP', sans-serif;        
}
  

.t-con a.t-btn2 {
  text-align: center;
  line-height: 35px;
    font-family: 'Cabin', sans-serif;
  width: 35px;
  height: 35px;
  padding: 0;
  margin-right: 1px;   
  letter-spacing: 0;
font-weight: 500;
color: #fff;
    transition: all 0.5s;    
}

.t-con a.t-btn2:hover {
opacity: 0.7; 
text-decoration: transparent;
}
.instagram{
    color: #d6249f;  
}
.t-con a.btn-sns--instagram {
 display: inline-block;    
   font-size: 1.7rem;     
  color: #d6249f!important;
}
.t-con a.btn-sns--line {
  font-size: 1.5rem;      
  color: #00b900;
}
.t-con a.t_mail{
   font-size: 1.5rem;      
  color: #233326;   
}
/*===ボタン===*/

.button {
  position: relative;
  max-width: 300px; /* ボタンの幅 */
    width:55%;
  color: #79629E; /* 文字色 */
  font-weight: 600;
 border: 1px solid #79629E;
  transition: all 0.5s;
  text-decoration: none;
  text-align: center;
  display: block;
  padding: 1em 2em;
    margin: 0 auto;   
font-size: 0.9em;    
}

/* マウスオーバーした際のデザイン */
.button::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all 0.4s;
  border: 1px solid rgba(121,98,158,0.4); /* 枠の色 */
  transform: scale(1.5,1.5);
  opacity: 0;
  z-index: 1;
}
.button:hover {
    
  background: rgba(121,98,158,0.07); /* 背景色 */
}
.button:hover::after {
  opacity: 1;
  transform: scale(1,1);
}
/*====ご挨拶===*/

.greeting-box{
width: 100%;
height: auto;
display: inline-block;
background: url("../img/greeting1.jpg");    
background-size: cover;
background-position: center;
background-repeat: no-repeat;    
}

.greeting{
width: 100%; 
height: auto;   
padding: 5%;  
background: rgba(255,255,255,0.5);    
}

.greeting-text strong{
font-size: 1.8em;
display: block; 
text-align:left;    
}
.greeting-text {
display: block;
margin: 0;    
font-size:1em;
text-align:left;  
}

/*===共通===*/

.item-box_flex1{
width: 100%;
height: auto;
display: flex;    
flex-wrap:wrap;
justify-content:space-between;
align-items:flex-end; 
position: relative;
}
.item-box_flex2{
width: 100%;
height: auto;
display: flex;    
flex-wrap:wrap;
justify-content:space-between;
align-items:center; 
position: relative;    
}


.item-box{
width: 100%;
height: auto;
display: block; 
position: relative;
}
.item-t1{
width: 55%; 
padding: 3%;   
position: absolute;
top: 50%;
right: 5%;   
-webkit-transform : translateY(-50%);
transform : translateY(-50%);  
background: #fff; 
border-radius: 10px;     
}
.item-p1{
width: 70%;      
position: relative;
display: block;    
   
}
.item-p1 img{
width: 100%;  
height: 100%;
object-fit: cover;    
position: relative;
z-index: 2;    
}
.item-p1_back{
background: rgba(121,98,158,0.3);
position: absolute;
bottom: -3%;
right: -3%;
width: 100%;
height: 100%;     
z-index: 1;  
object-fit: cover; 
border-radius: 10px;     
}
.item-t2{
width: 50%; 
padding: 3%;        
}
.item-p2{
max-width: 300px;
width: 50%;    
}
.item-p2 img{
width: 100%;  
height: 100%;
object-fit:contain;       
}
.item-t3{
max-width: 300px;   
width: 100%;  
padding: 3%;    
}
.item-p3{
max-width: 300px;
width: 50%;    
}
.item-p3 img{
width: 100%;  
height: 100%;
object-fit:contain;       
}
.item-t4{
width: 50%;  
padding: 5%;    
}
.item-p4{
width: 50%;   
position: relative;  
}
.item-p4 img{
width: 100%;  
height: 100%;
object-fit:contain;    
border-radius: 10px;   
 position: relative;
z-index: 2;      
      
}
/*====エフテックのご紹介===*/
.youtube{
width: 100%;    
}
.youtube iframe{
max-width: 900px;
width: 100%;    
height: 500px;  
object-fit: contain;
display: block;  
margin: 0 auto;
}
/*====私たちの強み===*/
.strengths{
  	width: calc(100% / 3 - 40px); 
margin: 20px;    
}
.strengths_photo{
background:#433F4A;    
position: relative;    
border-radius: 10px; 
overflow: hidden;    
}
.strengths_photo img{
width: 100%; 
height: 100%;
object-fit: cover;
display: block; 
opacity: 0.5;  
   
}
.strengths_text{
position: absolute;
font-size: 1.5rem;
color: #fff;  
top: 50%;
left: 50%;    
-webkit-transform : translate(-50%,-50%);
transform : translate(-50%,-50%);  
text-align: center;
padding-top: 1rem;    
width: 90%;    
}
.strengths_text:after{
    position: absolute;
  top:0;
  left: 50%;
  width: 30px;  
  height: 1px;
  background: #fff;
  content: '';
  -webkit-transform : translateX(-50%);
  transform : translateX(-50%);   
    z-index: 10;
}
.strengths_text .number{
font-size: 1rem;
display: block;
letter-spacing: 0.1rem;  
font-family: 'Cabin', sans-serif;        
}
.strengths p{
color: #fff;     
}
/*====コンテンツ===*/

.c_box{
	width: calc(100% / 5); 
}

.c_box a{
	display: block;
	width: 100%;
    height: 300px;
	overflow: hidden;
	position: relative;
    transition: all 0.5s;	
}
 .c_box a::after{
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: none;
	background-color: rgba(48, 44, 56, 0.6);
}
.c_box a > img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
    transition: all 0.5s;	
}
.c_box a p{
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	text-align: center;
	transform: translateY(-50%);
	color: #fff;
	z-index: 2;
}


.c_box a .hide{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
	opacity: 0;
	pointer-events: none;
	transition: 1s;
	overflow: hidden;
	z-index: 3;
}
 .c_box a .hide .arrow{
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	width: 100%;
	opacity: 0;
	color: #fff;
	font-size: 1.5em;
	text-align: center;
	text-transform: capitalize;
	position: relative;
     
}
.c_box a .hide .arrow span{
	display: block;
	color: #fff;
	font-size: 1rem;
    font-family: 'Cabin', sans-serif; 
}
.c_box a .hide .arrow i{
	display: block;
	position: relative;
	width: 60px;
	height: 1px;
	background: #fff;
	margin: 0 auto;
	margin-top: 1em;
}
.c_box a .hide .arrow i::before{
	content: '';
	background: #fff;
	width: 13px;
	display: block;
	height: 1px;
	position: absolute;
	right: 0;
	bottom: 0;
	transform: rotate(40deg);
	transform-origin: right bottom
}
.c_box a:hover{
    text-decoration: transparent;
}
.c_box a:hover > img{
	transform: scale(1.05);
    text-decoration: transparent;
}
.c_box a:hover .hide{
	opacity: 1;
	-ms-backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	background-color:rgba(67, 63, 74, 0.4);
}
.c_box a:hover .hide .arrow{
	opacity: 1;
	transition: all 1s cubic-bezier(67, 63, 74, 0.4);
}

@media (max-width: 750px){
.c_box{
		width: 100%;
	}
.c_box.even{
		margin-top: 0;
	}
}

/*====全ページ共通フッターメニュー===*/
footer{
width: 100%;
display:block;
text-align: center;	   
}
footer .footer-box{
height:auto; 
width: 100%;    
display: block; 
position: relative;
z-index: 5;    
}
footer .footer-box p{
color: #fff;    
}
footer .footer-back{
padding: 50px 0!important;     
width: 100%; 
background:url("../img/footer_back.jpg");
background-position: center;
background-size: cover;    
padding: 2% 0  0;  
display: block;   
position: relative;
}
footer .footer-back::after{
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: none;
	background-color: rgba(48, 44, 56, 0.8);
}
.con-text{
font-size: 1.5em;
text-align:center;
color: #fff;     
}
.f-contact{
width:100%;
display: flex;    
flex-wrap:wrap;
justify-content:center;
align-items:center;    
}
.f-address{
padding: 50px 0;    
width: 100%;
background-color: rgba(121,98,158,0.1);    
}
.f-address img{
max-width: 400px;
width: 60%;    
display: block;
margin: 0 auto;
}
.f-con{
width:300px;
margin: 1em;    
}
.f-con a{
border:1px solid #fff;
padding:1em 1%;
font-size: 1.3em;  
display: block;  
color: #fff;
transition: all 1s;    
letter-spacing: 1px;       
}
.f-con a:hover{
background: rgba(255,255,255,0.1); 
text-decoration: transparent;    
}
.f-con p{
border:1px solid #fff;
padding:1em 1%;
color: #fff;
font-size: 1.3em;      
letter-spacing: 1px;       
}


footer .copyright small{
text-align: center;	
color:#fff;
padding:1% 0;
display: block;	
background:#79629E;  
font-size: 0.8em;  
}

/*====会社概要===*/
.admin-box{
max-width: 980px;  
width: 95%;
display: block;
margin: 0 auto;
}
.about-p{
width: calc(80% / 2 - 30px); 
margin:10px 15px; 
}
.about-p:nth-child(even){
padding-top: 20px;    
}
.about-p img{
width: 100%;   
border-radius: 10px;     
}
.table{
width: 100%;    
}
.table table{
width: 100%; 
border-spacing: 0;    
}
.table table th{
width: 35%;
font-weight:500;
border-bottom: #eee 1px solid;
padding: 1rem;    
}
.table table td{
width: 70%;    
border-bottom: #eee 1px solid;   
padding: 1rem;        
}
.welbox{
max-width: 200px;
width: 80%;    
padding: 1rem;
border: solid #333 1px;
color: #333;   
margin:3% 0;   
text-align: center;
}
.history{
width: 50%;  
position: relative;
margin: 0 auto;
display: block;    
}
.history .border{
width: 1px;
height:100%;
position: absolute;
object-fit: cover;    
left: 35%;
top: 0;
background: #0464bd;     
z-index: 1; 
opacity: 0;
}
.history ul{
width: 100%;  
display: block;
margin: 0 auto;
}
.history li{
width: 100%;
display: flex;
flex-wrap:wrap;
justify-content:center;
align-items:center;    
}
.history .date{
 width:35%; 
display: inline-block;    
padding: 1rem;
position: relative;
text-align: center;   
font-weight: 600;
font-size: 1rem;    
}
.history .date .d-text{
background: #fff;  
position: relative;
z-index: 1; 
display: inline-block;
padding:0 3px;    
}
.history .date::after{
 content: '';    
 width:15px; 
 height:15px;    
display: block; 
background:#0464bd;  
position: absolute;  
right:-7.5px;    
top:50%;    
-webkit-transform : translateY(-50%);
transform : translateY(-50%);  
z-index:6;  
border-radius: 50%;        
}
.history .date::before{
 content: '';    
 width:50%; 
 height:1px;    
display: block; 
background:#0464bd;  
position: absolute;  
right:0;    
top:50%;     
z-index:-1;  
border-radius: 50%;  
-webkit-transform : translateY(-50%);
transform : translateY(-50%);     
}
.history .history-text{
 width: 65%; 
display: block;  
padding: 1rem 1rem 1rem 2rem;    
text-align: left;  
background: #f6f2fd;   
margin: 1rem 0 ; 
}
.map-box{
width: 100%;    
}
.map-box iframe{
    width: 100%;
    height: 300px;
    object-fit: fill;
    display: block;
}
/*====業務内容===*/
.service-box{
background-color: rgba(0,0,0,0.1);
border-radius: 10px; 
padding: 5%;   
}
.service{
width: calc(100% / 3 - 30px); 
margin:15px;    
}
.service img{
width: 100%;  
border-radius: 10px;  
  position: relative;      
}
.service p{
font-size: 0.9rem;    
}
/*====料金表===*/
.img1{
width: 30%;
position: absolute;
left: 8%;
bottom: -3%;    
}
.img2{
width: 15%;
position: absolute;
left: 30%;
bottom: 0;    
}
.price_w{
width: calc(100% / 2 - 30px); 
margin:15px;  
}

.price1 table{
width: 100%; 
border-spacing: 0;   
background: #fff;
border-radius: 10px;
padding: 1rem;    
}
.price1 table th{
width: 50%;    
 border-bottom: 1px solid #999;
 padding: 0.5rem 1rem;  
text-align: left;
font-size: 0.9rem;    
}
.price1 table td{
width: 50%;   
 border-bottom: 1px solid #999;   
 padding: 0.5rem 1rem; 
font-size: 0.9rem;       
}

.price2 table{
width: 100%;    
}
.price2 table th{
width: 20%;    
 padding: 0.5rem 0.1rem;  
text-align:center;
background:  rgba(121,98,158,0.3);
font-size: 0.8rem;       
}
.price2 table td{
width: 20%;   
 padding: 0.5rem 0.1rem;    
font-size: 0.8rem;    
text-align:center;  
background: #eee;      
}

.price3 table{
width: 100%;    
}
.price3 table th{
width: 15%;    
 padding: 0.5rem 0.1rem;  
text-align:center;
background:  rgba(121,98,158,0.3);   
font-size: 0.8rem;       
}
.price3 table td{
width: 15%;   
 padding: 0.5rem 0.1rem;  
font-size: 0.8rem;     
text-align:center;  
background: #eee;    
}
/*========= お問い合わせ ===============*/
.step-box1{
 text-orientation: upright;    
position: relative;
padding: 2rem  0.3rem;   
background: rgba(121,98,158,0.1);
width: 70px; 
margin:15px; 
    
}
.arrow1 > .step-box1:not(:last-child)::before {
    content:  '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 0 10px 12px;
    border-color: transparent transparent transparent #79629E;
    display:  inline-block;
    vertical-align:  middle;
    position: absolute;
    top: 0;
    bottom: 0;
    margin:  auto;
    right: -19px;
    
}
.arrow1 {
    list-style:  none;
    padding:  0;
    display: flex;
    justify-content: center;
    flex-wrap:wrap;
}

.arrow1 .step-box1:not(:last-child) {
    margin-right:  20px;
}
.step-box1 p{
    font-size: 1rem;
    -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;  
margin: 1rem auto 0;
}
.step-box1 .number1{
  position: absolute;
top: 0;
left: 0;
-webkit-text-combine: horizontal;
  -ms-text-combine-horizontal: all;
  text-combine-upright: all;  
background: #79629E;
width: 100%;
text-align: center;
color: #fff;
font-size: 0.9rem;    
}
.step{
width: 100%;    
position: relative;
}
.step .border-l{
height: 84%;
width: 1px;
background: #999;
position: absolute;
top: 50px;
left: 40px;
z-index: -10;    
}
.step-box2{
width: 100%; 
display: flex;
flex-wrap:wrap;
justify-content:space-between; 
padding:5% 0;    
position: relative;
}
.step-box2 p{
    font-size: 1rem;
margin: 1rem auto;
padding-left: 100px; 
padding-right: 50px;    
}
.step-box2 .border-b{
border-bottom: dotted 1px #999;
display: block;
position: absolute;
bottom: 0;
left: 100px;   
width: calc(100% - 100px)    
}
.step-box2 .step-flow{
width: 70%;   
display: block;   
position: relative;
}
.step-box2 .step-flow .flow_n{
position: absolute;
width: 80px;
height: 80px;  
background: #79629E;
top:0;
left: 0;   
padding-top: -1rem;    
}
.step-box2 .step-flow .flow_n .number2{
position: absolute;
text-align: left;
font-size: 1.5rem;    
color: #fff; 
top:60%;
left:50%;   
-webkit-transform : translate(-50%,-50%);
transform : translate(-50%,-50%); 
text-align: center;    
}
.step-box2 .step-flow .flow_n .number2::after {
    content:'STEP';
    width: 100%;
    position: absolute;
    top: -10px;
    left:40%;
    margin:  auto;
    font-size: 0.9rem;
    text-align: center;
    -webkit-transform : translateX(-50%);
transform : translateX(-50%);
}
.step-box2 .step-flow .step-titl{
 font-size: 1.5rem;   
padding-left: 100px; 
padding-right: 50px;   
}
.step-photo{
width: 30%;  
}
.step-photo img{
width: 100%; 
height: 100%;
object-fit: cover;
display: block;    
}
.mail-box{
max-width: 980px;  
width: 95%;
display: block;
margin: 0 auto;
}
.contact_back{
padding: 5%;    
}
.contact-box{
width: 100%;
height: auto;
display: block;  
position: relative;
padding: 2%;     
}
.c-img{
width: 100%;
position: absolute;
bottom: 0;
right: 0;
z-index: -1;    
}



.c-tel{
max-width: 500px; 
width: 100%;    
margin: 0 auto; 
padding: 1em;  
background: #fff;  
}
.c-tel {
  position: relative;
}

.c-tel:before, .c-tel:after { 
  content:'';
  width: 20px;
  height: 30px;
  position: absolute;
  display: inline-block;
}


.c-tel a{
font-size: 2.5rem;
color: #0464bd; 	
transition: all 0.5s;	 
display: block;      
text-align: center;
font-weight: 500;
line-height: 1.9; 
letter-spacing: 0.05em;   
}
.c-tel:hover a{
text-decoration: transparent;	
opacity: 0.8;     
}


.c-tel .small{
font-size: 1rem; 
display: block;   
color: #333;    
}

.m-brder{
border-right: 2px solid #eee;
}


.con-text2{
font-size: 1em;  
color: #fff;     
}
.con-text2 .small{
font-size: 0.9em;
color: #fff; 
display: block; 
}
.contact-wrapper{
width: 100%;	
}


form{
	width: 100%;
	text-align: center;
}
.checkbox_text{
line-height: 1.75;
color: #595757;	
}
.mailform{
width: 100%;
background: #fff;    
padding: 1%;    
}
.mailform table{
width: 100%;    
 
}
.fm-text .text1 .purple1{
	background-color:#79629E;
    font-size:0.7em;
    padding:0.5em;
        margin-right: 5px;
    text-align: center;
    color: #fff;
    font-weight: 500;
}
.mailform table .purple2{
	border: solid 1px #79629E;
	font-size:0.7em;
	padding:0.5em;
    margin-right: 5px;
    text-align: center;
    color: #79629E;
    font-weight: 500;
}
.mailform table .purple1{
	background-color:#79629E;
	font-size:0.7em;
	padding:0.5em;
    margin-right: 5px;
    text-align: center;
    color: #fff;
    font-weight: 500;
}
.about-map{
width: 100%;    
}


.mailform table th{
	font-size: 1em;
	text-align: left;
	padding-left: 2%; 
    border-bottom: 1px dotted #b0b0b0;
    font-weight: 500;
}

.mailform table td p{
	font-size: 1em;
	padding-top: 1%;
	line-height: 1.7;
}
.mailform table td img{
width:100%;	
margin-top: 1%;	
border-radius: 50px;	
}
.mailform table td{
font-size: 1em;
padding: 2% 1%;
width: 70%; 
border-bottom: 1px dotted #b0b0b0;   
text-align: left;
}

.mailform table td iframe{
height: 400px;	
}

.text-y{
width: 50%!important;    
height: 40px!important;    
}
.text{
width: 100%!important;    
}
textarea{
width:100%!important; 
}
.mailform dd p{
	margin-top: 1%;
	font-size:1.1em;
	color:#595757;
	letter-spacing: 4px;
	line-height: 1.75;
}

.single p{
	text-align: center;
	color:#595757;
}
.fm-text p{
text-align: left;
}

.form-button
{
margin: 5% 0;
text-align: center;
}

.form-button button {
    cursor: pointer;
    display: block;
    margin: 0 auto 5px;
    padding: 10px 0 10px;
    color: #fff;
    text-align: center;
    width: 250px;
	transition: all 0.5s;	
    border:1px solid #79629E; 
    background:#fff;
    font-weight: 500;
         background:#79629E;  
}
.form-button button:hover{
        background:#fff;
    color: #79629E;
	text-decoration: transparent;
}
.textarea, textarea, .dropdown {
    border-radius: 2px;
}

input[type=checkbox] + label {
cursor: pointer;  
}

button[type="submit"]{
	font-size:1em;
	padding: 10px;
}

input[type="checkbox"]{
	font-size: 1em;
	margin-left: 20px;
	margin-bottom: 2%;
	border:1px solid #eee;	
    background: #fff;
    border-radius: 5px;
    white-space:nowrap;
}
input[type="text"]{
	height: 40px!important;
	font-size: 1em;
	padding: 10px;
	border:1px solid #eee;
        background: #fff;
    border-radius: 5px;
}
input[type="email"]{
    width: 100%;
	height: 40px;
	font-size: 1em;
	padding: 10px;
	border:1px solid #eee;
        background: #fff;
    border-radius: 5px;
}

textarea{
padding: 10px;	
font-size: 1em;		
border:1px solid #eee;	
    background: #fff;
    border-radius: 5px;    
}
.mailform .accordion h4{
font-size: 1em;
text-align: left;
padding-bottom: 3px;	
letter-spacing: 2px;
border-bottom: 1px dotted #555;
padding-left: 1%;
color: #555;  
font-weight: 500;
}
.mailform .accordion p{
font-size:0.9em;
text-align: left;
letter-spacing: 2px;
padding: 1% 0;	
padding-left: 1%;
color: #555;  
}
.mailform .accordion {
}
.mailform .toggle {
	display: none;
}
label{
cursor: pointer; 
display: inline-block; 
white-space:nowrap;   
}
.Label {
    font-size: 1em;
	padding:1% 0 ;
	display: block;
	border-bottom: solid 1px #555;
    color: #555;
    font-weight: 500;
}
.Label::before{		/*タイトル横の矢印*/
	content:"";
	width: 6px;
	height: 6px;
	border-top: 2px solid #555;
	border-right: 2px solid #555;
	-webkit-transform: rotate(45deg);
	position: absolute;
	top:calc( 50% - 3px );
	right: 20px;
	transform: rotate(135deg);
    text-decoration: transparent;
    margin-bottom: 1em;
}
.Label,
.open1 {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transform: translateZ(0);
	transition: all 0.5s;
}
.open1 {		/*本文*/
	height: 0;
	margin-bottom:10px;
	overflow: hidden;
    background: rgba(255,255,255,0.05);
    padding: 0 10px; 

}
.toggle:checked + .Label + .open1 {	/*開閉時*/
	height: auto;
	transition: all .5s;
}
.toggle:checked + .Label::before {
	transform: rotate(-45deg) ;
    text-decoration: transparent;
}