@charset "utf-8";

*{
  box-sizing:border-box;
}

body{
  margin:0;
  font-family: 'Noto Serif JP', serif;
  color: #151515;
  counter-reset: detail_count ninni_count;
  font-size: calc( 13px + 0.3vw );
}

@media(min-width:961px){
	.sponly{
	  display:none !important;
	}
  }
@media(max-width:960px){
  .pconly{
    display:none !important;
  }
}
@media(min-width:561px){
	.show_sp{display: none !important;}
 }
 @media(min-width:961px){
	.show_sptb{display: none !important;}
 }
 @media(max-width:560px){
	.show_tbpc{display: none !important;}
 }
 @media(max-width:960px){
	.show_pc{display: none !important;}
 }
/*変数*/
:root{
	--basecolor: #324490 ; /*基本色*/
	--sabcolor: #f2ffec; /*サブカラー*/
}

img{
  max-width:100%;
  vertical-align:bottom;
}

.nowrap{
	white-space: nowrap;
}

p{
	margin:0
}

h3{
	margin:0;
}

a{
	color: #55321f;
  text-decoration: none;

}

a:visited{
    color: #000;
}

a:hover{
  /*filter: alpha(opacity=70);
  -moz-opacity: 0.7;
  opacity: 0.7;*/
}
.tac{
	text-align: center;
}
.tal{
	text-align: left;
}
.tar{
	text-align: right;
}
.mg0{
	margin: 0 auto;
}


.margin1{
	margin:10px
}
.margin2{
	margin:20px
}
.margin3{
	margin:30px
}
.margin4{
	margin:40px
}
.margin5{
	margin:50px
}
.mgb1{
	margin-bottom:10px
}
.mgb2{
	margin-bottom:20px
}
.mgb3{
	margin-bottom:30px
}
.mgb4{
	margin-bottom:40px
}
.mgb5{
	margin-bottom:50px
}
.mgt1{
	margin-top:10px
}
.mgt2{
  margin-top:20px
}
.mgt3{
	margin-top:30px
}
.mgt4{
	margin-top:40px
}
.mgt5{
	margin-top:50px
}
.mgl1{
	margin-left:10px
}
.mgl2{
	margin-left:20px
}
.mgl3{
	margin-left:30px
}
.mgl4{
	margin-left:40px
}
.mgl5{
	margin-left:50px
}
.mgr1{
	margin-right:10px
}
.mgr2{
  margin-right:20px
}
.mgr3{
	margin-right:30px
}
.mgr4{
	margin-right:40px
}
.mgr5{
	margin-right:50px
}
.n_mgt5{
	margin-top:5%
}

.padding1{
	padding:10px
}
.padding2{
	padding:20px
}
.padding3{
	padding:30px
}
.padding4{
	padding:40px
}
.padding5{
	padding:50px
}
.pdt1{
	padding-top:10px
}
.pdt2{
  padding-top:20px
}
.pdt3{
  padding-top:30px
}
.pdt4{
  padding-top:40px
}
.pdt5{
	padding-top:50px
}
.pdt6{
	padding-top:60px
}
.pdt7{
	padding-top:70px
}
.pdt8{
	padding-top:80px
}
.pdt9{
	padding-top:90px
}
.pdt10{
	padding-top:100px
}
.pdb1{
	padding-bottom:10px
}
.pdb2{
  padding-bottom:20px
}
.pdb3{
  padding-bottom:30px
}
.pdb4{
  padding-bottom:40px
}
.pdb5{
	padding-bottom:50px
}
.pdb6{
	padding-bottom:60px
}
.pdb7{
	padding-bottom:70px
}
.pdb8{
	padding-bottom:80px
}
.pdb9{
	padding-bottom:90px
}
.pdb10{
	padding-bottom:100px
}
.pdr5{
	padding-right:30% ;

}

/*----------
特殊例
-----------*/
/*----------
マーカー下線
----------*/
.marker_line {
    background: linear-gradient(transparent 60%, var(--basecolor) 0%);
}
.marker_line_oreng{
	background: linear-gradient(transparent 50%, #ffd95d9f 50%);
}
/*------------*/

.flex{
	display: flex;
}
.flex_wrap_reverse{
	display: flex;
}

/*--------------------------------
       ここまでtemplate
---------------------------------*/
/*--------- top 幅規定とか--------*/


/*top*/
.index_top.back{
	background: var(--basecolor);
	height: 100vh;
	position: relative;
	z-index: 1;
}
.index_top.back::before{
	content: "";
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 400px;
	height: 155px;
	background: #fff;
	z-index: -20;
}

.hiro_wrap_top.back{
	background: var(--basecolor);
	position: relative;
	padding-bottom: 100px;
	z-index: 1;
}

.top_contact{
	width: 300px;
	color: var(--basecolor);
	text-align: center;
	padding: 20px 10px;
	background: #fff;
	margin: 0 0 0 auto;
	z-index: 20;
}
.top_contact p:nth-child(1){
	margin: 0px 0 10px;
}
.top_contact p:nth-child(3){
	margin: 10px 0 0;
}
.top_contact img{
	width: 90%;
}
.pc_logo_menu{
	position: absolute;
	top: 50px;
	left: 100px;
	z-index: 20;
}

.pc_logo_menu ul{
    list-style:  none;      /* デフォルトのアイコンを消す */
    margin:  100px 0 0 0;             /* デフォルト指定上書き */
    padding: 0;             /* デフォルト指定上書き */
	color: #fff;
	/*font-size: 120%;*/
	letter-spacing: 0.3em;
}
.pc_logo_menu li{
	margin: 40px 0 0 35px;
	position: relative;
}
.pc_logo_menu li a::before{
	content: "－";
	position: absolute;
	left: -35px;
}
.pc_logo_menu ul li a{
	color: #fff;
	transition: all 0.3s;
}
.pc_logo_menu ul a:hover{
	color: #55321f;
}

.pc_logo_menu img{
	width: 250px;
}

#slide_wrapper{
	position: relative;
    width: 80%;
    height: 80vh;
	margin: -30px auto 0;
	z-index: -1;
}
#slide_wrapper #slider{
	width: 100%;
    height: 80vh;
}

.top_txt{
	position: absolute;
	color: #fff;
	bottom: 230px;
	left: 100px;
	z-index: 20;

}
.top_txt h2{
	font-size: 250%;
}
.top_txt h2 span{
	display: block;
	font-size: 50%;
	font-weight: 500;
}

.top_copyright{
	font-size: 90%;
	position: absolute;
	height: 600px;
	color: #fff;
	writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    -webkit-writing-mode:vertical-rl;
	right: calc( 6vw - 35px ) ;
	top: 58%;
	transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}
.top_copyright p{
	letter-spacing: 2px;
}

/**/
/*スクロールダウン全体の場所*/
.scrolldown2{
    /*描画位置※位置は適宜調整してください*/
	position:absolute;
	bottom:0px;
	left:15%;
}

/*Scrollテキストの描写*/
.scrolldown2 span{
    /*描画位置*/
	position: absolute;
	left:10px;
	bottom:10px;
    /*テキストの形状*/
	color: #000;
	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:#000;
    /*丸の動き1.6秒かけて透過し、永遠にループ*/
	animation:
		circlemove 1.6s ease-in-out infinite,
		cirlemovehide 1.6s ease-out infinite;
}

/*下からの距離が変化して丸の全体が上から下に動く*/
@keyframes circlemove{
      0%{bottom:150px;}
     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: 150px;
	background:#000;
}


.hiro_wrap {
    position: relative;
    width: 80%;
    margin: -30px auto 0;
    z-index: -1;

}
/*.hiro_wrap_top::before {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 400px;
    height: 150px;
    background: #fff;
    z-index: -20;
}*/
.hiro_wrap img{
	object-fit: cover;
	height: 420px;
	width: 100%;
}


  
  
/*----------- contentsここから --------------*/
.section_box{
	position: relative;
	padding: 120px 0;
}
.contants_wrap {
    max-width: 1200px;
    width: 90%;
    margin: 0 auto;
}

.ttl_block h2{
	/*font-size: 250%;*/
	margin: 0;
	letter-spacing: 3px;
}


/*----intro----*/
.intro_bolck{
	padding: 60px 0;
	background: url(../img/logo_hantome.jpg) no-repeat;
	background-size: 40%;
	background-position: center top 10px;
}
.intro_bolck p{
	width: fit-content;
	margin: 0 auto;
	line-height: 2em;
	/*font-size: 120%;*/
	text-shadow: 0 0 3px #fff,
				 0 0 3px #fff,
				 0 0 3px #fff, 
				 0 0 3px #fff, 
				 0 0 3px #fff, 
				 0 0 3px #fff, 
				 0 0 3px #fff, 
				 0 0 3px #fff, 
				 0 0 3px #fff, 
				 0 0 3px #fff, 
				 0 0 3px #fff, 
				 0 0 3px #fff, 
				 0 0 3px #fff, 
				 0 0 3px #fff, 
				 0 0 3px #fff, 
				 0 0 3px #fff;
}

.more_link_wrap{
	margin: 30px 0 0 0;
}

.btn{
	/*アニメーションの起点とするためrelativeを指定*/
	position: relative;
	overflow: hidden;
	/*ボタンの形状*/
	text-decoration: none;
	display: inline-block;
		border: 1px solid #555;/* ボーダーの色と太さ */
	padding: 10px 30px;
	text-align: center;
	outline: none;
	/*アニメーションの指定*/
	transition: ease .2s;
}
/*ボタン内spanの形状*/
.btn span {
	position: relative;
	z-index: 2;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
	color:#000;
	white-space: nowrap
}
.btn:hover span{
	color:#fff;
}
/*== 背景が流れる（左から右） */
.bgleft:before {
	content: '';
   /*絶対配置で位置を指定*/
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
   /*色や形状*/
	background:#324490;/*背景色*/
	width: 100%;
   height: 100%;
   /*アニメーション*/
	transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
	transform: scale(0, 1);
   transform-origin: right top;
}

/*hoverした際の形状*/
.bgleft:hover:before{
   transform-origin:left top;
   transform:scale(1, 1);
}


/*Service*/
.section_box.back_blue{
	background: var(--basecolor);
	z-index: 1;
}
.ttl_block.white{
	color: #fff;
}
.service_block{
	color: #fff;
}
.service_txt{
	width: fit-content;
	margin: 30px auto;
	line-height: 1.7em;
	/*font-size: 120%;*/
}
.service_link_block{
	margin-top: 100px;
}
.service_link{
	color: #fff;
	position: relative;
	width: 40%;
}
.service_link img{
	transition: all 0.3s;
}
.service_link:nth-child(1){
	margin: 0 20% 0 0;
}
.service_link h2{
	position: absolute;
	color: #fff;
	width: fit-content;
	padding: 0 20px;
	background: var(--basecolor);
	top: -80px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
	z-index: 2;

}
.link_border::before{
	content: "";
	position: absolute;
	width: 90%;
	height: 110%;
	border: 1px solid #fff;
    top: -10%;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
	z-index: 1;
}

.link_border{
	position: relative;
	color: #fff;
	text-align: center;
}

.link_border p{
	padding: 20px 0;
}
.link_border p span{

}

.img_musk{
	display: block;
    line-height: 0;
    overflow: hidden;
}
.service_link:hover img{
	transform:scale(1.2);

}




/*contact_block*/
.section_box.contact_back{
	background: url(../img/contact_back.jpg) no-repeat;
	background-size: cover;
}
.contact_box{
	background: #ffffffb1;
	text-align: center;
}
.contact_box .ttl_block{
	margin: -25px auto 40px 0;
	display: inline-block;
}
.contact_txt{
	line-height: 1.7em;
    /*font-size: 120%;*/
}
.contact_link_wrap{
	text-align: unset;
	margin: 50px 0 0;
	padding-bottom: 70px;
}

.contact_link{
	width: 40%;
	margin: 0 10% 0 ;
	background: var(--basecolor);
	padding: 10px 0;
	transition: all 0.3s;
}
.contact_link.flex{
	align-items: center;
	justify-content: center;
	color: #fff;
}
.contact_link p{
	font-size: 130%;
}
.contact_link span{
	font-size: 80%;
}
.contact_img{
	width: 20%;

}
.contact_img img{
	width: 70%;
}
.contact_link:hover{
	opacity: 0.5;
}






/*------------- footer -------------*/
footer{

}
.bottom_logo{
	width: 50%;
	padding: 10% 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.bottom_logo_txt{
text-align:center;
}
.bottom_logo_txt p{
	margin-top: 20px;
	width:fit-content;
	margin:20px auto;
	text-align: left;
}
.bottom_logo_txt img{
	width: 40%;
}
.access_box{
	width: 50%;
	padding: 5%;
	background: var(--basecolor);
}
.map_wrap{
	margin-top: 20px;
	text-align: center;
}
.map_wrap iframe {
    width: 80%;
    height: 450px;
}

.bottom_copyright{
	text-align: center;
	background: var(--basecolor);
	padding: 70px 0;
	color: #fff;
}
.bottom_copyright p{
	letter-spacing: 3px;
}


/*法人概要*/
.corpo_wrap{
	max-width: 850px;
	width: 95%;
	margin: 70px auto 0;
}
.corpo_wrap dl{
	display: flex;

}
.corpo_wrap dt{
	width: 20%;
	width: 20%;
    text-align: center;
    font-weight: bold;
    padding: 0px 0px 20px 20px;
    border-bottom: #324490 solid 3px;

}
.corpo_wrap dt span{
	display: block;
    font-weight: normal;
    font-size: 10px;
}
.corpo_wrap dd{
	width: 80%;
	margin: 0 0 0 0;
    padding: 0px 0px 20px 20px;
    border-bottom: #e5e5e5 solid 3px;
}
.corpo_wrap dd dl{
	margin: 0 0 5px 0;
}
.corpo_wrap dd dt{
	width: 18em;
	text-align: left;
	font-size: normal;
	border: none;
	padding: 0;
}
.corpo_wrap dd dl .member{
	width: 13em;
}
.corpo_wrap dd dd{
	border: none;
	padding: 0;
}
.gallery.flex{
	margin: 80px auto 0;
	justify-content:space-between;
	width:90%;
}


/*サービス*/
.service_wrap.houtei{

}
.service_wrap.ninni{
	margin-top: 200px;
}
.service_ttl{
	position: relative;
	text-align: center;
	margin: 70px 0;
}
.service_ttl h2{
	display: inline-block;
	margin: 0;
	padding: 0 20px;
	font-size: 200%;
	background: #fff;
}
.service_ttl::after{
	content: "";
	position: absolute;
	width: 100%;
	height: 1px ;
	background: #000;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	z-index: -1;
}
.service_ttl h2::after{
	left: 0;
}
.service_ttl h2::before{
	right: 0;
}



.service_detail{
	max-width: 1000px;
	width: 95%;
	margin: 100px auto 0;
	border: 1px solid #324490;
	padding: 50px 30px 30px;
}
.detail_ttl{
	position: relative;
	counter-increment: detail_count;
    width: fit-content;
	margin: -70px 0 20px;
	background: #fff;
	padding: 0 10px;
}
.detail_ttl::before{
    content: counter(detail_count, decimal-leading-zero);
    position: absolute;
    left: -15px;
    top: -15px;
    font-size: 15px;
}

.service_wrap.ninni .detail_ttl{
	counter-increment: ninni_count;
}
.service_wrap.ninni .detail_ttl::before{
	content: counter(ninni_count, decimal-leading-zero);
}




/*--------------- お問い合わせ ---------------*/
.contact_tel_wrap{
	margin: 30px 0;
	text-align: center;
	padding: 30px;
}
.contact_tel_wrap p:first-child{
	margin: 0 0 40px;
}
.contact_tel_wrap p:last-child{
	margin-top: 30px;
}

.mail_ttl{
	color: #fff;
	/* text-align: center; */
	margin-bottom: 50px;
}
.mail_ttl p:first-child{
	margin-bottom: 40px;
}
.form{
	max-width: 900px;
	margin: 0 auto;
	width:90%;
}
.form p{
	margin-left: 10%;
}
.co_table{
	max-width: 900px;
	width: 90%;
	margin: 0px auto 40px;
	display: flex;
	align-items: center;

}
.co_table dt{
	width: 30%;
	color: #fff;
}
.co_table dd{
	width: 70%;
}
.co_table span{
	border: 1px solid;
	padding:3px 8px;
	display: inline-block;
	margin-right: 20px;
	background: #fff;
	color: #324490;
}

input[type=text],
input[type=radio],
textarea {
	width: 100%;
	border-top: none;
	border-right: none;
	border-left: none;
	height: 60px;
	border: #324490 solid 1px;
	background-color: #fff;
	padding: 0.5em;
}
textarea{
	height: 100px;
}
input[type=text],
input[type=radio],
select,
textarea {
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
}

.submit_tac{
	text-align: center;
}
input[type="submit"],
a.back {
	width: auto;
	height: auto;
	text-align: center;
	border: 0px solid;
	padding: 10px 20px;
	color: #324490;
	background: #fff;
	font-size: 16px;
	margin-top: 40px;
	min-width: 200px;
	display: inline-block;
}


.mail_form_check .co_table dt{
	color: #000;
}
.mail_form_check .co_table span{
	background: #324490;
	color: #fff;
	border: none;
}
.mail_form_check input[type="submit"],
a.back{
	background: #324490;
	color: #fff;
}




/*----------- リクルート -------------*/





/*--------------SP--------------■■■■■■■■■■■*/
@media(max-width:1000px){



	/*-------- contact page ----------*/



}
@media(max-width:960px){
	/*------共通---------*/
	body{
		font-size: 17px;
	}
	.flex_wrap_reverse{
		flex-wrap: wrap-reverse;
	}
	.flex{
		flex-wrap: wrap;
	}
	/*-------- contents -----------*/
	/*トップ*/
	.pc_logo_menu{
		left: 50px;
	}
	.top_txt{
		left: 50px;
	}
	.top_copyright{
		right: calc( 6vw - 26px );
	}


	/*intro*/
	.intro_bolck{
		background-size: 68%;
	}


	/*サービスblock*/
	.service_link{
		width: 45%;
	}
	.service_link:nth-child(1){
		margin: 0 10% 0 0;
	}

	/*こんたくとぶろっく*/
	.contact_link{
		width: 40%;
		margin: 0 5% 0;
	}

	/*フッター*/
	.bottom_logo_txt p{
		padding: 0 20px;
	}

	.map_wrap iframe{
		height: 350px;
	}
	.bottom_logo_txt img{
		width: 60%;
	}
	/*----------- contact page----------------*/
	.co_table{
		width: 95%;
	}
	.co_table span{
		font-size: 80%;
    }
	.co_table dd{
		margin-left: 0%;
	}

}
@media(max-width:740px){

	/*top*/
	.top_contact{
		width: 250px;
	}
	.pc_logo_menu ul{
		margin: 60px 0 0 0;
	}

	/*サービスblock*/
	.service_link{
		width: 100%;
	}
	.service_link:nth-child(1){
		margin: 0 0 25% 0;
	}

	/*フッター*/
	.contact_box .ttl_block {
		margin: -21px auto 40px 0;
	}
	.bottom_logo,
	.access_box{
		width: 100%;
	}
	.bottom_logo{
		padding: 10% 5%;
	}
	.bottom_logo p{
		text-align: center;
	}
	.access_box{
		padding: 5% 5% 0;
	}
	.bottom_logo_txt p{
		margin: 20px auto;
	}
	.bottom_copyright{
		font-size: 75%;
		padding: 40px 50px;
	}

	/*当法人について*/
	.corpo_wrap dl{
		flex-wrap: wrap;
	}
	.corpo_wrap dt{
		width: 100%;
		border-bottom: #333 dashed 1px;
		padding: 0 0 20px 0;
	}
	.corpo_wrap dd{
		width: 100%;
		padding: 20px 0px 20px 10px;
		border-bottom: #324490 solid 3px;
		text-align: center;
	}
	.corpo_wrap dd dl{
		flex-wrap: nowrap;
	}
	.corpo_wrap dd dl .member{
		width: 26em;
	}
	.corpo_wrap dd dt{
		width: 60em;
	}
	.corpo_wrap dd dd{
		text-align: left;
	}
	/*サービス*/
	.detail_ttl{
		font-size: 130%;
	}
	/*コンタクトページ*/
	.co_table{
		flex-wrap: wrap;
		width: 90%;
	}
	.co_table dt{
		width: 100%;
		margin-bottom: 10px;
	}
	.co_table dd{
		width: 100%;
	}
	.contact_tel_wrap{
		margin: 30px 0 0;
	}

}

@media(max-width:560px){
	.index_top.back{
		height: 187vw;
	}
	#slide_wrapper{
		margin: 0px 0 0 auto;
		height: 170vw;
	}
	#slide_wrapper #slider{
		height: 170vw;
	}
	.index_top.back::before{
		width: 50%;
		height: 125px;
	}
	.pc_logo_menu,
	.top_txt{
		left: 15px;
		bottom:280px;
	}
	.pc_logo_menu img{
		width: 50%;
	}
	.scrolldown2{
		left: 28%;
	}
	.scrolldown2:after{
		height: 125px;
	}
	@keyframes circlemove{
		0%{bottom:125px;}
   }
   /*コンテンツラップ*/
   .section_box{
		padding: 80px 0;
   }
   .intro_bolck{
		background-size: 100%;
		background-position: center center;
   }

   /*サービス*/
   .service_detail{
	padding: 50px 19px 30px;
   }

   /**/


	/*フッター*/
	.contact_box .contact_txt{
		text-align: left;
	}
	.contact_link_wrap{
		margin: 10px 0 0;
	}
	.contact_box{
		padding: 0 20px;
	}
	.contact_link{
		width: 100%;
		margin: 5% auto 0;
	}
	.map_wrap iframe {
		height: 300px;
	}
	.bottom_copyright {
		padding: 40px 50px 90px;
	}

	/*別ページのトップ*/
	.hiro_wrap_top.back{
		padding-top: 60px;
		padding-bottom: 70px;
	}
	.hiro_wrap{
		margin: 0 auto 0;
	}
	.hiro_wrap img{
		height: 300px;
	}
	.pc_logo_menu{
		top: 38px;
	}
}

.report_note{
	color:#fff
}

.report_note b{
	font-size:110%;
}

.report_note li{
	margin-bottom:0.5em;
}

.report_note .mail{
	background:#fff;
	color:#333;
	padding:2em;
	text-align:center;
	margin-top:3em;
	line-height:2;
}
.report_link, .report_link:visited,
.box_link, .box_link:visited{
	display:inline-block;
	background:var(--basecolor);
	padding:0.7em 1em;
	color:#fff;
	margin-top:3em;
}
.report_link:hover,
.box_link:hover{
	opacity:0.6;
	transition : all 0.5s;
}