@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Roboto:400,700');

/* RESET
----------------------------------------------------------------------------------------------------*/
a,article,body,dd,div,dl,dt,em,form,footer,header,h1,h2,h3,h4,h5,h6,html,i,iframe,img,label,legend,li,nav,ol,p,section,main,span,table,tbody,tfoot,thead,time,tr,th,td,ul,video{font-family:inherit;font-size:100%;font-weight:inherit;font-style:inherit;vertical-align:baseline;white-space:normal;margin:0;padding:0;border:0;outline:0;background:transparent;line-height:1.6;text-align:left}textarea{font-family:inherit;font-size:100%;font-weight:inherit;font-style:inherit;vertical-align:baseline;margin:0;padding:0;border:0;outline:0;background:transparent;line-height:1.6;text-align:left}article,footer,header,nav,section,main{display:block}ol,ul{list-style:none}table{border-collapse:collapse;border-spacing:0}

/* ----------------------------------------------

 * 設定をしなおす

---------------------------------------------- */
body {
  margin: 0 auto;
  padding: 0;
  font-size: 16px;
  line-height: 1.6em;
  font-family: 'Roboto',"游ゴシック Medium", "Yu Gothic Medium","游ゴシック",YuGothic,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif;
  font-weight: 500;
  color: #535761;
  -webkit-text-size-adjust: 100%;
}

@media only screen and ( max-width : 768px ) {
  body {font-size: 14px;}
}

@media screen and (max-width: 780px) {
  a:hover{ 
    /* ホバースタイルは横幅が大きなデバイスだけ */
  }
}

table {
  margin : 0;
  border-collapse: collapse;
  border-spacing: 0;
  empty-cells: show;
}

img {
  vertical-align: middle;
  border: none;
}

video {
display: block; margin-bottom:-50px;
}

section{display: block;}

/************************/
/*                      */
/*         汎用         */
/*                      */
/************************/

.white{ color:#FFFFFF;}
.white a{ color:#FFFFFF;}

.reg { font-size:70%; vertical-align:top;line-height:1em; }

.hidden { overflow:hidden; }
.float  { float:left; }
.clear  { clear:both; }
.clear hr { display:none; } 

.center { text-align:center; }
.left   { text-align:left; }
.right  { text-align:right; }

.bold { font-weight:bold; }

.green {color:rgb(43,58,16);}
.pink {color:rgb(191,48,82);}

/****** 汎用font-size ******/

.fz8 { font-size:8px; }
.fz9 { font-size:9px; }
.fz10 { font-size:10px; }
.fz12 { font-size:12px; }
.fz13 { font-size:13px; }
.fz18 { font-size:18px; }
.fz20 { font-size:20px; }
.fz24 { font-size:24px; }


/****** 汎用margin ******/
.mgt-7 { margin-top:-7px; }
.mgt-9 { margin-top:-11px; }
.mgt-16 { margin-top:-16px; }
.mgt-30 { margin-top:-30px; }
.mgt-32 { margin-top:-32px; }
.mgt-70 { margin-top:-70px; }
.mgt-20p { margin-top:-20%; }
.mgt5 { margin-top:5px; }
.mgt7 { margin-top:7px; }
.mgt8 { margin-top:8px; }
.mgt10 {
	margin-top: 10px;
}
.mgt20 { margin-top:20px; }
.mgt30 { margin-top:30px; }
.mgt35 { margin-top:35px; }
.mgt40 { margin-top:40px; }
.mgt50 { margin-top:50px; }
.mgt60 { margin-top:60px; }
.mgt70 { margin-top:70px; }
.mgt80 { margin-top:80px; }
.mgt100 { margin-top:100px; }
.mgt150 { margin-top:150px; }

.mgl04 { margin-left:4px; }
.mgl05 { margin-left:5px; }
.mgl06 { margin-left:6px; }
.mgl10 { margin-left:10px; }
.mgl15 { margin-left:15px; }
.mgl20 { margin-left:20px; }
.mgl25 { margin-left:25px; }
.mgl30 { margin-left:30px; }
.mgl40 { margin-left:40px; }
.mgl50 { margin-left:50px; }
.mgl60 { margin-left:60px; }
.mgl70 { margin-left:70px; }
.mgl80 { margin-left:80px; }
.mgl90 { margin-left:90px; }
.mgl93 { margin-left:93px; }
.mgl100 { margin-left:100px; }
.mgl105 { margin-left:105px; }
.mgl110 { margin-left:110px; }
.mgl150 { margin-left:150px; }
.mgl200 { margin-left:200px; }
.mgl250 { margin-left:250px; }
.mgl335 { margin-left:335px; }
.mgl350 { margin-left:350px; }

.mgr05 { margin-right:5px; }
.mgr10 { margin-right:10px; }
.mgr20 { margin-right:20px; }
.mgr30 { margin-right:30px; }
.mgr40 { margin-right:40px; }
.mgr60 { margin-right:60px; }
.mgr70 { margin-right:70px; }
.mgr80 { margin-right:80px; }
.mgr90 { margin-right:90px; }
.mgr100 { margin-right:100px; }
.mgr200 { margin-right:200px; }

.mgb05 { margin-bottom:5px; }
.mgb10 { margin-bottom:10px; }
.mgb20 { margin-bottom:20px; }
.mgb30 { margin-bottom:30px; }
.mgb40 { margin-bottom:40px; }
.mgb100 { margin-bottom:100px; }

.m20{ margin:20px;}

/* ----------------------------------------------

 * アンカータグの設定

---------------------------------------------- */
a {
  outline:none;
  color: #333;
}

a:hover {
  text-decoration: none;
}


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

a:hover {
  filter: alpha(opacity=80);
  -moz-opacity:0.80;
  opacity:0.80;
}


/* ----------------------------------------------

 * 要素を左右中央寄せ

---------------------------------------------- */

.taC {
  text-align: center !important;
}

.taR {
  text-align: right !important;
}

.taL {
  text-align: left !important;
}



*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;*behavior:url(/scripts/boxsizing.htc)}.container{margin:0 auto}.clr:after,.col:after,.container:after,.group:after,.row:after{content:"";display:table;clear:both}.row{padding-bottom:0}.col{display:block;float:left;width:100%}@media (min-width:769px),print{.gutters .col{margin-left:2%}.gutters .col:first-child{margin-left:0}.gutters .colR:first-child{margin-right:0}.sp{display:none}}@media(max-width:768px){.sp_none{display:none !important;}}


img {
    max-width: 100%;
    height: auto;
    width /***/:auto;　/*IE8のみ適用*/
}

/* ---------------------------------------------------------------------------------------------

　   HEADER

--------------------------------------------------------------------------------------------- */

#header {
  box-shadow: 0px 3px 15px rgba(0,0,0,0.2);
  z-index: 99;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #fff;
}
.menu-box {
  position: fixed;
  top: 0;
  right: 0; 
  width: 100%;
  padding: 15px;
  background-color: #fff;
  box-sizing: border-box;
  text-align:16px;
}

.menu-box img{ width:60%;}

.menu-box .menu-btn {
  width: 13%;position:absolute; top:10px; right:0px
}
.menu-box ul {
  display: none;
  width: 100%;
  background-color: #fff;
}
.menu-box ul li a {
  display: block;
  border-bottom: 1px solid rgb(205,55,90);
  padding: 1.0em 0.7em;
  color:rgb(205,55,90);
}
.menu-box ul li:last-child a {
  border-bottom: none;
}
.menu-btn:before {
  content: '\f0c9';
  font-family: "Font Awesome 5 Free";
  font-weight: bold;
  color: rgb(205,55,90);
  font-size: 2.0rem;
}
.menu-btn.active:before {
  content: '\f00d';
}

#tbl-bdr table,#tbl-bdr td,#tbl-bdr th {
    border-collapse: collapse;
    border:1px solid #FFF;
	padding:15px; text-align:center; font-size:13px;
    }

/* ---------------------------------------------------------------------------------------------

　   CONTENTS

--------------------------------------------------------------------------------------------- */
#main p {
  word-break: break-all;
}

section {
  text-align: center;
}

.intro_h2{background: rgb(205,55,90);/*背景色*/
  padding: 0.5em;/*文字まわり（上下左右）の余白*/
  color:#FFFFFF; text-align:center; font-size:18px; width:100%; margin-bottom:20px;}

#intro_04 {
  position: relative;
  margin-top: 30px;
  text-align: center;
}

#intro_04 ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

#intro_04 ul li {
  width: 28%;
  border: calc(1vw) solid #FFF;
  max-width: 400px;
  box-shadow: 2px 5px 10px rgba(30,0,0,0.3);
}

#intro_04 li::before {
  content: '';
  position: absolute;
  width: 30px;
  height: 30px;
  top: -2rem;
  left: 50%;
  transform: translateX(-50%);
  background: url(../../img/10.svg) no-repeat center;
}

#intro_04 li:nth-child(2)::before {
  top: -1.1rem;
}

#intro_04 li:nth-child(1) {
  transform: rotate(3deg);
}

#intro_04 li:nth-child(3) {
  transform: rotate(-2deg);
}

#sec01 {
  background: #FFF; margin-top:-85px;
}
#sec02 {
  background: #FFF; margin-top:-130px;
}
#sec03 {
  background: #FFF; margin-top:-180px;
}
#sec04 {
  background: #FFF; margin-top:-180px;
}

#intro_05 {
  position: relative;
  margin-top: 30px;
  text-align: center;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

#intro_05 > div {
  width: 100%;
  background: #FFF;
  margin: 1vw;
  padding: 1vw 2vw;
 /*box-shadow: 2px 5px 10px rgba(30,0,0,0.3);*/
  position: relative;
}

#intro_05 > div ul {
  position: relative;
  margin-top: 5px;
  list-style: none;
  text-align: left;
  /*background-image: linear-gradient( rgba(152,196,255,.3) .1em, transparent .1em );*/
  background-size: auto 1.7rem;
  line-height: 1.7rem;
  font-size:120%;

}

#intro_05 > div::before {
  content: '';
  position: absolute;
  width: 30px;
  height: 30px;
  top: -0.8rem;
  left: 50%;
  transform: translateX(-50%);
 /* background: url(../../img/10.svg) no-repeat center;*/
}

#intro_05 > div div {
  padding-top: 2px;
  font-size: 1.5em;
  background: #FEC;
  text-align: center;
  margin: 0 0 1rem;
}

.intro_05_txt{background: #FEE;}

#intro_05 > div li {
  text-indent: -2em;
  padding-left: 2.5em;
}

#intro_05 > div > ul > li:nth-child(2) {
  margin-top: 0.1rem;
}

#intro_05 > div:nth-child(2) > ul > li:nth-child(1)  {
  width: 95%;
  text-indent: 0;
  padding: 0.1em 0 0.1em 0.8em;
  margin: 0.4rem auto 0.4rem auto;
  border: 3px solid #CCC;
  background: #FEE;
  line-height: 1.5rem;
  border-radius: 1em;
}

.intro_blk_table{ background-color:rgb(204,48,85); color:#FFFFFF;}

.contents_free {
  padding: 20px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  background: linear-gradient(to bottom, #FFF 0%, #FFF 30%, #EFA 100%);
}

#intro_txt {
  padding: 50px 10px;
  background: #FFF;
}

#intro_txt p {
  margin: 0.7vw;
  border-bottom: 1px dotted #413F51;
}

#recr_01 {
 /* background: url(../../img/11.gif);*/
  padding: 10px 5px;
  border-radius: 30px;
  position: relative;
}

#recr_02 img {
  position: absolute;
  width: 50%!important;
  height: auto;
  top: -28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
}

#recr_02 {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  background: #FFF;
  /*box-shadow: 2px 5px 14px rgba(0,0,50,0.3);*/
  padding: 20px 20px 25px;
  position: relative;
  margin:0 auto;
}

.recr_h2{background: rgb(205,55,90);/*背景色*/
  padding: 0.5em;/*文字まわり（上下左右）の余白*/
  color:#FFFFFF; text-align:center; font-size:18px; width:90%;}
.recr_h2 a{color:#FFFFFF;}

.recr_box {
    margin: 0.2em 0;
    background: #dcefff; width:100%;
}
.recr_box .box-title {
    background: #FFE9EF;
    padding: 4px 20px;
    letter-spacing: 0.05em;
}
.recr_box p {
    padding: 4px 20px;
    margin: 0;
	background: #FFF;
	border: solid 1px #FFE9EF;
}

.cont_h3 {
  width: 100%;
  padding: 0.5em 0;
  text-indent: 1em;
  border-left: 0.8em solid #58D;
  border-bottom: 1px solid #58D;
  margin: 0 0 1em;
}

#contact_form {
  width:90%;
  margin:0 auto;
  position: relative;
  display: flex;
  background: #FFF;
  padding: 1em 0.1em;
  justify-content: center;
  flex-wrap: wrap;
}

#contact_form .req::before {
  content: '必須'!important;
  background: #F55!important;
  color: #FFF;

}

#contact_form .blue::before {
  content: '推奨'!important;
  background: #58D;!important;
  color: #FFF;

}

#contact_form input {
  width: 100%; font-size:16px;
}

#contact_form textarea {
   width: 100%; font-size:16px;border: 1px solid #000;
}

.confirm {
  width: 12em!important;
  padding: 0.5em;
  margin: 1.0em 0 0.3em;
  background: #58D;
  font-size: 1.1em;
  color: #FFF;
  border: 0px;
  border-radius: 0.3em;
}


.btn {
  display: block;
  background: #fff;
  color: #618bbe;
  padding: 0.8em 1em;
  text-align: center;
  margin: 0 auto;
  border-radius: 100px;
}
.btn:before {
  content: "\f104";
  font-family: "FontAwesome";
  margin-right: 5px;
}

footer {
  width: 100%;
  background: #333;
  color: #FFF;
  height:100%;
  margin:0 auto;
}

footer a{color: #FFF;}

footer img{ margin-top:50px; width:70%; text-align:center;}


@media only screen and ( max-width : 768px ) {
  #main {
    padding-top: 58px;
  }
  .btn {
    width: 60%;
  }
}

@media only screen and ( max-width : 480px ) {
  .btn {
    width: 100%;
  }
}

@media print, screen and ( min-width : 769px ) {
  #main {
    padding-top: 80px;
  }
  .btn {
    width: 300px;
  }
}




.home_box02 {/*親div*/
  position: relative;/*相対配置*/ width:100%; margin:0 auto;
  }

.home_box02 p {
  position: absolute;/*絶対配置*/
  top: 0; color:#000000;
  left: 50%;background-color: rgba(255,255,255,0.5);
	padding:0 15px; font-size:14px;
  }

.home_box02 img {
  width: 50%;
  }


/*ふわっとアニメーション*/  
.scrollanime {
	opacity: 0;
}
.fadeInDown {
	animation-name: fadeInDown;
	animation-duration: 5s;
	animation-fill-mode: forwards;
}
@keyframes fadeInDown {
	0% {
		opacity: 0;			
	}
	100% {
	opacity: 1;
	transform: translate(0);
	}
}

.updown {
	transform: translateY(-100px);
}
.downup {
	transform: translateY(100px);
}

.sect02{
	overflow: hidden; 
}
.slide-right {
	transform: translateX(200px);
}
.slide-left {
	transform: translateX(-200px);
}


/*ページTOP*/
#page-top{
  width: 40px;
  height: 40px;
  position: fixed;
  right: 0;
  bottom: 0;
  opacity: 0.6;
}
#page-top a{
  position: relative;
  display: block;
  width: 30px;
  height: 30px;
  text-decoration: none;
}
#page-top a:before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f106';
  font-size: 30px;
  color: rgb(199,101,22);
  position: absolute;
  width: 30px;
  height: 30px;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}

.rinen{ margin-left:20px; margin-right:20px;color:rgb(43,58,16);}
.rinen_tit{ color:rgb(43,58,16); text-align:right; margin-right:20px; }

.services_box{ }
.services_box p{ padding:20px;color:rgb(191,48,82); text-align:left;}