@charset "UTF-8";


/* ========BASIC======== */


html {
   overflow-y:scroll;
}


body {
   width:100%; /* other browsers */
   margin:0;
   padding:0;
   line-height:1.6;
   letter-spacing:1px;
   font-family: serif;
   font-size:1rem;
   color:#ffffff;
   overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
   background-image: url("../img/freedom-back.jpg");
	background-size: cover;
  background-position: center;
  background-attachment: scroll; /* iOSでは fixed を使わない */
  z-index: -1;
  pointer-events: none;
}

br {
   letter-spacing:normal;
}

a {
   color:#ffffff;
   text-decoration:none;
}

a:hover {
   color:#0172AB;
}

img {
   border:0;
   vertical-align:bottom;
}

h1,h2,h3,h4,h5,h6 {
   margin:0;
}



#menuWrapper {
	width: fit-content; /* other browsers */
	margin-left: auto;
	margin-right: auto;
}

#menu {
	width: fit-content; /* other browsers */
	margin-left: auto;
	margin-right: auto;
}

#contents {
   clear:both;
   width:100%;
   margin:0;
   padding:0;
}

#contents2 {
	clear:both;
    width:100%;
	margin-top: -20px;
	padding:0;
}

#contents3 {
	clear:both;
	margin:0;
	padding:30px;
 }

#main {
	width:100%; /* other browsers */
	margin: 0 auto;
}

.section p {
	font-size: 12px;
	font-weight: 100;
	padding: 0 20px;
}

#main2 {
	width:100%; /* other browsers */
	margin: 0 auto;
	padding: 0;
}

#main3 {
	width:100%; /* other browsers */
	margin: 0 auto;
}

.jigyou {
	width: 100%;
	margin-top: 10px;
	margin-bottom: -50px;
	padding:20px 0;
	background-color:#003b76ca;
	text-align: center;
}

.jigyou img {
	width: 100%;
}

.nagare {
	width: 80%;
	padding-top: 100px;
	margin: 0 auto;
	text-align: center;
}

.nagare img {
	width: 100%;
}

#footer {
   clear:both;
   margin:0;
   background:#003b76ca url("../images/bg_footer_left.gif") 0 0 no-repeat;
}

/*@h3（main）
--------------------------------------------------------*/
div.serviceBox h3 {
	color:#88f9ff;
	font-size:24px;
	font-weight:bold;
	text-align:center;
	text-shadow: 2px 3px 5px #b0b0b0;
	position:absolute;
	top:50px;
}
div.serviceBox h4 {
	color:#88f9ff;
	font-size:24px;
	font-weight:bold;
	text-align:center;
	text-shadow: 2px 3px 5px #b0b0b0;
	position:absolute;
	top:50px;
}
div.serviceBox h6 {
	color:#88f9ff;
	font-size:24px;
	font-weight:bold;
	text-align:center;
	text-shadow: 2px 3px 5px #b0b0b0;
	position:absolute;
	top:50px;
}

div.serviceBox h5 {
	color:#88f9ff;
	font-size:24px;
	font-weight:bold;
	text-align:center;
	text-shadow: 2px 3px 5px #b0b0b0;
	position:absolute;
	top:50px;
}

#service{
	width:870px;
	padding-left:30px;
	overflow:hidden;
	margin:0 auto;
}
div.serviceBox{
	width:100%;
	height:300px;
	font-size:24px;
	color:#ffffff;
	margin-left:auto;
	margin-right:auto;
}
div.serviceBox2{
	width:1200px;
	height:480px;
	font-size:24px;
	
	color:#ffffff;
	position:relative;
	float:left;
	margin-right:30px;
}

.flex{
	display:flex;
	flex-wrap: wrap;
	padding: 1px;
  }

.fadeRight{
	animation-name:fadeRightAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
	opacity:0;
	}
	
	@keyframes fadeRightAnime{
	  from {
		opacity: 0;
	  transform: translateX(100px);
	  }
	
	  to {
		opacity: 1;
	  transform: translateX(0);
	  }
	}


/* 左から */

.fadeLeft{
	animation-name:fadeLeftAnime;
	animation-duration:0.5s;
	animation-fill-mode:forwards;
	opacity:0;
	}
	
	@keyframes fadeLeftAnime{
	  from {
		opacity: 0;
	  transform: translateX(-100px);
	  }
	
	  to {
		opacity: 1;
	  transform: translateX(0);
	  }
	}


.fadeUp{
	animation-name:fadeUpAnime;
	animation-duration:1s;
	animation-delay: 0.3s;
	animation-fill-mode:forwards;
	opacity:0;
	}
	
	@keyframes fadeUpAnime{
	  from {
		opacity: 0;
	  transform: translateY(100px);
	  }
	
	  to {
		opacity: 1;
	  transform: translateY(0);
	  }
	}

	.fadeInTrigger,
	.fadeUpTrigger,
	.fadeDownTrigger,
	.fadeLeftTrigger,
	.fadeRightTrigger{
		opacity: 0;
	}

	.blur{
		animation-name:blurAnime;
		animation-duration:1s;
		animation-fill-mode:forwards;
	  }
	  
	  @keyframes blurAnime{
		from {
		filter: blur(10px);
		transform: scale(1.02);
		opacity: 0;
		}
	  
		to {
		filter: blur(0);
		transform: scale(1);
		opacity: 1;
		}
	  }
	  
	  /* スクロールをしたら出現する要素にはじめに透過0を指定　*/
	   
	  .blurTrigger{
		  opacity: 0;
	  }

	  .flipLeft{
		animation-name:flipLeftAnime;
		animation-duration:1s;
		animation-fill-mode:forwards;
		perspective-origin:left center;
		opacity:0;
		}
		
		@keyframes flipLeftAnime{
		  from {
		   transform: perspective(600px) translate3d(0, 0, 0) rotateY(30deg);
		  opacity: 0;
		  }
		
		  to {
		  transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
		  opacity: 1;
		  }
		}

	.flipDownTrigger,
	.flipLeftTrigger,
	.flipLeftTopTrigger,
	.flipRightTrigger,
	.flipRightTopTrigger{
		  opacity: 0;
}

/* アニメーションスタートの遅延時間を決めるCSS*/

.delay-time05{  
	animation-delay: 0.5s;
  }
  
  .delay-time1{  
	animation-delay: 1s;
  }
  
  .delay-time15{  
	animation-delay: 1.5s;
  }
	  


div.mobile1{
	background:url(../img/servicemobile5_sp.jpg) no-repeat;
	background-size:cover;
}

div.mobile1::before {
	content: '';
	/* ↓暗いオーバーレイを半透明で配置 */
	background-color: rgba(0, 0, 0, 0.8);
	/* ↓全体を覆うように配置 */
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
  }

div.mobile2{
	background:url(../img/servicemobile3.png) no-repeat;
	background-size:cover;
}

div.mobile2::before {
	content: '';
	/* ↓暗いオーバーレイを半透明で配置 */
	background-color: rgba(0, 0, 0, 0.8);
	/* ↓全体を覆うように配置 */
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
  }
div.mobile3{
	background:url(../img/servicemobile4.png) no-repeat;
	background-size:cover;
}

div.mobile3::before {
	content: '';
	/* ↓暗いオーバーレイを半透明で配置 */
	background-color: rgba(0, 0, 0, 0.8);
	/* ↓全体を覆うように配置 */
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
  }
div.mobile4{
	background:url(../img/servicemobile6.png) no-repeat;
	background-size:cover;
}

div.mobile4::before {
	content: '';
	/* ↓暗いオーバーレイを半透明で配置 */
	background-color: rgba(0, 0, 0, 0.8);
	/* ↓全体を覆うように配置 */
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
  }

div.mobile5{
	background:url(../img/servicemobile7.png) no-repeat;
	background-size:cover;
}

div.mobile5::before {
	content: '';
	/* ↓暗いオーバーレイを半透明で配置 */
	background-color: rgba(0, 0, 0, 0.8);
	/* ↓全体を覆うように配置 */
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
  }

div.Various{
	background:url(../img/serviceVarious.png) no-repeat;
}

div.Various2{
	background:url(../img/serviceVarious2.png) no-repeat;
}
div.Various3{
	background:url(../img/serviceVarious3.png) no-repeat;
}
div.Various4{
	background:url(../img/serviceVarious4.png) no-repeat;
}


div.serviceBox p.service {
	position:absolute;
	font-size:18px;
	top:90px;
}
div.serviceBox p.service1 {
	position:absolute;
	font-size:18px;
	top:90px;
}
div.serviceBox p.shosaiA {
	position:absolute;
	top:320px;
	width:320px;
	height:50px;
	background:url(../img/kuwashiku.png) no-repeat;
	left:80px;
	color:#fff;
	line-height:50px;
	text-indent:90px;
}

div.serviceBox p.shosaiA:hover{
	opacity:0.8;
}

div.serviceBox p.shosaiC {
	position:absolute;
	top:180px;
	width:320px;
	height:50px;
	background:url(../img/kuwashiku.png) no-repeat;
	left:50%;
	transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
	color:#000000;
	line-height:50px;
	text-indent:90px;
  }


  div.serviceBox p.shosaiD {
	position:absolute;
	top:180px;
	width:320px;
	height:50px;
	background:url(../img/kuwashiku.png) no-repeat;
	left:50%;
	transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
	color:#000000;
	line-height:50px;
	text-indent:90px;
  }


div.serviceBox p.shosaiB {
	position:absolute;
	top:320px;
	width:320px;
	height:50px;
	background:url(../img/kuwashiku.png) no-repeat;
	left:800px;
	color:#000000;
	line-height:50px;
	text-indent:90px;
}
div.serviceBox p.shosaiB:hover{
	opacity:0.8;
}

/* ========MAIN CONTENTS CUSTOMIZE======== */
#main a {
   color:#3fc2c9;
}

img.example2 {
    width: 100%;
    height: 100%;
}

img.example3 {
    width: 100%;
    height: 100%;
}

.top-left {
	position: absolute;
	font-size: 50px;
	top: 15vhpx;
	left: 10px;
	text-shadow: 5px 7px 8px #000000;
}

.top-left2 {
	display:none;
	position: absolute;
	font-size: 30px;
	top: 32.5vh;
	left: 220px;
	text-shadow: 5px 7px 8px #000000;
}

#main a:hover {
   color:#606060;
   border:0;
   text-decoration:underline;
}

#main h2 {
	margin-left: 20px;
   margin-bottom:5px;
   padding:5px 0;
   font-size:24px;
   font-weight:bold;
   background:url("../img/line.png") 0 100% repeat-x;
}

#main2 h2 {
	margin-left: 20px;
   margin-bottom:5px;
   padding:5px 0;
   font-size:24px;
   font-weight:bold;
   background:url("../img/line.png") 0 100% repeat-x;
}

#main h3 {
	margin-left:20px;
   margin-bottom:3px;
   padding-left:15px;
   font-size:18px;
   font-weight:bold;
   background:url("../img/mes_aicon1.png") 0 50% no-repeat;
}

#main h4 {
   margin:5px 0 2px 0;
   padding:2px;
   font-size:13px;
   background:#d0dfe9;
}

#main h5 {
   margin-top:5px;
   margin-bottom:2px;
   font-size:13px;
   color:#0088D0;
   border-bottom:2px solid #0088D0;
}

#main h6 {
   margin-bottom:2px;
   font-size:13px;
   color:#fff;
}

#main p {
	margin:0;
	font-size:10px;
 }

#main2 p {
   margin:0;
}

.hiyou {
	margin: 20px 0 0 20px;
	font-size:15px;
	font-weight: bold;
	color: #92c8ff;
}

#main div.section {
    width:100%;
	margin: 0;
}

#main div.section img {
	width:100%
}

#main2 div.section img {
	width:100%
}

#main3 div.section img {
	width:90%
}

.child {
	position: absolute;
	top: 20px;
	left: 15px;
}

#main2 div.section {
   margin:0 0 50px 0;
}

#main2 dt {
   margin-bottom:3px;
}

#main2 dd {
   padding:0;
   margin:0;
   text-indent: 20px;
   background-size: cover;
   background:#535353;
}

.sample {
  width: 100%;
  height: 200px;
  border: solid 1px;
  overflow: auto;
}

/* INFORMATION CUSTOMIZE */
#main dl.information {
   margin:0;
}
#main dl.information dt {
   float:left;
}

#main dl.information dd {
   margin:0 0 5px 0;
   padding: 0px 0px 5px 9em;
   border-bottom:1px solid #ddd;
   background:none;
}

/*==================================================
スーッ（枠線が伸びて出現）
===================================*/

/*枠線が伸びて出現*/

#main table {
	width:350px;
	border-collapse: collapse;
	margin-left: auto;
    margin-right: auto;
 }
 
 #main table th {
	width:30%;
	padding:5px;
	font-size:10px;
	text-align:center;
	border:2px solid #ddd;
	background:#004043;
 }
 
 #main table td {
	padding:5px;
	font-size:10px;
	text-align:center;
	border:2px solid #ddd;
 }

#main2 table {
	width:80%;
	border-collapse: collapse;
	margin-left: auto;
    margin-right: auto;
 }
 
 #main2 table th {
	width:30%;
	padding:5px;
	font-size:10px;
	text-align:center;
	border:2px solid #ddd;
	background:#002343;
 }
 
 #main2 table td {
	padding:5px;
	font-size:10px;
	text-align:center;
	border:2px solid #ddd;
 }

.lineTrigger{
	position: relative; /* 枠線が書かれる基点*/
	opacity:0;
	width:350px;
	border-collapse: collapse;
  }
  
  .lineTrigger.lineanime{
	animation-name:lineAnimeBase;
	animation-duration:1s;
	animation-fill-mode:forwards;
  }
  
  @keyframes lineAnimeBase{
	from {
	  opacity:0;
	}
  
	to {
	  opacity:1;  
  }
  }
  
  /*上下線*/
  .lineTrigger::before,
  .lineTrigger::after{
	position: absolute;
	content:"";
	width:0;
	height:2px;
	background:#ddd;/* 枠線の色*/
  }
  
  /*左右線*/
  .line2::before,
  .line2::after{
	position: absolute;
	content:"";
	width: 2px;
	height:0;
	background:#ddd;/* 枠線の色*/
  }
  
  /*上線*/
  .lineTrigger::before {
	top:0;
	left:0;
  }
  
  .lineTrigger.lineanime::before {
	animation: lineAnime .3s linear 0s forwards;/*表示されて0秒後に上線が0.5秒かけて表示*/
  }
  
  /*右線*/
  .line2::before{ 
	top:0;
	right:0;
  }
  
  .lineTrigger.lineanime .line2::before {
	animation: lineAnime2 .3s linear .3s forwards;/*表示されて0.5秒後に右線が0.5秒かけて表示*/
  }
  
  /*下線*/
  .lineTrigger::after { 
	bottom:0;
	right:0;
  }
  
  .lineTrigger.lineanime::after {
	animation: lineAnime .3s linear .6s forwards;/*表示されて1秒後に下線が0.5秒かけて表示*/
  }
  
  /*左線*/
  .line2::after{ 
	bottom:0;
	left:0;
  }
  
  .lineTrigger.lineanime .line2::after {
	animation: lineAnime2 .3s linear .9s forwards;/*表示されて1.5秒後に左線が0.5秒かけて表示*/
  }
  
  @keyframes lineAnime {
	0% {width:0%;}
	  100%{width:100%;}
  }
  
  @keyframes lineAnime2 {
	0% {height:0%;}
	  100%{height:100%;}
  }
  
  /*枠線内側の要素*/
  
  .lineTrigger.lineanime .lineinappear{
	animation: lineInnerAnime .5s linear 1.2s forwards;/*1.5秒後に中央のエリアが0.5秒かけて表示*/
	opacity: 0;/*初期値を透過0にする*/ 
  }
  
  @keyframes lineInnerAnime{
	0% {opacity:0;}
	  100% {opacity:1;}
  }

/*背景色が伸びて出現（共通）*/
.bgextend{
	animation-name:bgextendAnimeBase;
	animation-duration:1s;
	animation-fill-mode:forwards;
	position: relative;
	overflow: hidden;/*　はみ出た色要素を隠す　*/
	opacity:0;
  }
  
  @keyframes bgextendAnimeBase{
	from {
	  opacity:0;
	}
  
	to {
	  opacity:1;  
  }
  }
  
  /*中の要素*/
  .bgappear{
	animation-name:bgextendAnimeSecond;
	animation-duration:1s;
	animation-delay: 0.6s;
	animation-fill-mode:forwards;
	opacity: 0;
  }
  
  @keyframes bgextendAnimeSecond{
	0% {
	opacity: 0;
	}
	100% {
	opacity: 1;
  }
  }

  .bgDUextend::before{
	animation-name:bgDUextendAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
	  content: "";
	  position: absolute;
	  width: 100%;
	  height: 100%;
	  background-color: #314472;/*伸びる背景色の設定*/
  }
  @keyframes bgDUextendAnime{
	0% {
	  transform-origin:bottom;
	  transform:scaleY(0);
	}
	50% {
	  transform-origin:bottom;
	  transform:scaleY(1);
	}
	50.001% {
	  transform-origin:top;
	}
	100% {
	  transform-origin:top;
	  transform:scaleY(0);
	}
  }

/* ========PAGETOP CUSTOMIZE========= */
#pageTop {
   margin:10px 0;
   text-align:right;
}

#pageTop a {
	font-size: 14px;
   padding-left:22px;
   background:url("../img/pagetop2.png") 0 50% no-repeat;
   background-size:20%;
}

/* ========FOOTER CUSTOMIZE======== */
.copyright {
   padding:10px 0;
   font-style:normal;
   font-size:11px;
   color:#ffffff;
   text-align:center;
   background:url("../images/bg_footer_right.gif") 100% 0 no-repeat;
}


@media(max-width:750px){
    .pc{
        display: none !important;
    }
}
@media screen and(min-width: 751px) {
	.sp{
        display: none !important;
    }
}
  
  /* ヘッダー */
  
#header {
    margin: 0 auto;
    height: auto;
    width: 100%;
}

#header h1 a {
    display: block;
    width: 16%;
    border: none;
}

#header h1 a img {
    display: block;
    width: 100%;
    border: none;
}

.wrapper{
    width:100%;
    margin:-90px auto 0 auto;
  }

  ul {
    display: block;
    list-style-type: disc;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 0;
}

/*tabの形状*/
.tab{
    width:100%;
    flex-wrap: nowrap;
    list-style-type: none;
    margin:0 auto;
  }
  .tab li{
    display: block;
	text-align: center;
    width:25%;
    font-size:14px;
	font-weight: bold;
    color:#000;
    margin:0;
    padding:0;
    list-style-type: none;
  }

  .tab li a{
    display: block;
    background:#4d4d4d96;
    color:#ffffff;
    margin:0;
    padding:20px 20px;
    list-style-type: none;
  }
  /*liにactiveクラスがついた時の形状*/
  .tab li.active a{
    background:#ffffff8e;
    color:#004aac;
    list-style-type: none;
  }
  
  
  /*エリアの表示非表示と形状*/
  .area {
    width:100%;
    display: none;/*はじめは非表示*/
    opacity: 0;/*透過0*/
  }
  
  /*areaにis-activeというクラスがついた時の形状*/
  .area.is-active {
      display: block;/*表示*/
      animation-name: displayAnime;/*ふわっと表示させるためのアニメーション*/
      animation-duration: 1s;
      animation-fill-mode: forwards;
      padding-bottom:50px;
  }
  
  @keyframes displayAnime{
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  /* ハンバーガーメニュー */
    .hamburger-menu{
      position: fixed;
	  top: 30px;
      right:5px;
      align-items: center;
      width: 32px;
      height: 32px;
      cursor: pointer;
      z-index: 10;
    }
    
    .hamburger-menu__line{
      display: block;
      width: 100%;
      height: 4px;
      border-radius: 4px;
      background-color: #ffffff;
      position: relative;
      transition: all 0.5s;
    }
    .hamburger-menu__line::before,
    .hamburger-menu__line::after{
      content: '';
      display: block;
      width: 100%;
      height: 4px;
      border-radius: 4px;
      background-color: #ffffff;
      position: absolute;
      transition: all 0.5s;
    }
    
    .hamburger-menu__line::before{
      transform: translateY(-12px);
    }
    .hamburger-menu__line::after{
      transform: translateY(12px);
    }
    
    .hamburger-menu.open .hamburger-menu__line{
      background-color: transparent;
    }
    .hamburger-menu.open .hamburger-menu__line::before{
      transform: rotate(45deg);
    }
    .hamburger-menu.open .hamburger-menu__line::after{
      transform: rotate(-45deg);
    }
    /* ナビゲーション */
    .nav-sp{
      box-sizing: border-box;
      position: fixed;
      top: 0;
      right: -300px;
      width: 300px;
      height: 100%;
      padding: 60px 50px 0;
      background-color: rgba(29, 29, 29, 0.742);
      text-align: left;
      transition: right 0.5s;
      z-index: 9;
    }
    
    .nav-sp.open{
      right: 0;
    }
    
    .nav-sp a{
      display: inline-block;
      padding: 5px 0;
	  color:#fff;
    }
    /* ファーストビュー */
    .first-view{
      height: calc(100vh - 60px);
    }
    
    .first-view img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center center;
    }
	.input-area {
		margin-bottom: 20px;
		text-align: center;
	 }
	 input[type="text"],input[type="email"],input[type="tel"],select {
		width: 300px;
		height: 30px;
	 }
	 textarea {
		width: 300px;
		height: 200px;
	 }
	 p {
		font-weight: bold;
		font-size: 20px;
	 }
	 .btn-border {
		display: inline-block;
		position: relative;
		text-align: center;
		border: 2px solid #0172AB;
		font-size: 20px;
		margin: 10px;
		color: #0172AB;
		text-decoration: none;
		font-weight: bold;
		padding: 8px 30px;
		border-radius: 4px;
		transition: .4s;
	 }
	 .btn-border:hover {
		background-color: #0172AB;
		border-color: #0172AB;
		color: #FFF;
	 }
	
	 div.input-area h6 {
		font-size: 20px;
		color:#ffc4f2;
	}