@charset "UTF-8";
@import url("grid.css");
:root { /* 色変更される場合は、#以降のカラーコードを変更してください IE非対応 */
  --base-color: #000;
  --link-color: #666;
  --linkhover-color: #999;
  --back-color: #f7f7f7;
  --border-color: #ccc;
  --white-color: #fff;
}
img {
  max-width: 100%;
  height: auto; /*高さ自動*/
  vertical-align: top;
  }
a {
  display: block;
  color: var(--link-color);
  text-decoration-line: none;
}
a:hover {
  color: var(--linkhover-color);
}
.anchor {
  display: block;
  padding-top: 100px;
  margin-top: -100px;
}
.indent-1 {
  padding-left: 1.5em;
  text-indent: -1.5em;
}
.padding10 {
  padding: 10px;
}
.padding20 {
  padding: 20px;
}
.inline {
  display: inline;
}
@media (min-width: 769px) {
  a[href*="tel:"] {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
  }
}
@media screen and (min-width: 801px) {
  .br-pc {
    display: block;
  }
  .br-sp {
    display: none;
  }
  .pc-only {
    display: block;
  }
  .sp-only {
    display: none;
  }
  .white-space {
    white-space: nowrap;
  }
}
@media screen and (max-width: 800px) {
  .br-pc {
    display: none;
  }
  .br-sp {
    display: block;
  }
  .pc-only {
    display: none;
  }
  .sp-only {
    display: block;
  }
  .white-space {
    white-space: normal;
  }
}

.full-width img {
  width: 100vw;
}

.position-center{
	position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}



.main-img {
  max-width: 1440px;
  margin: 0 auto;
  max-height: 660px;	
}


/*ヘッダー
-------------------------------------*/
.header {
  /*background-color: #c5fcff;*/
  position: relative;
  /*padding-bottom: 4rem;*/
}

h1{
	
}

/*きらっと光る*/
.btnshine {
  /*キラッと光る基点とするためrelativeを指定*/
  position: relative;
  /*ボタンの形状*/
  display: inline-block;
  /* background: #333;
    color: #fff;
    padding: 10px 20px;*/
  text-decoration: none;
  outline: none;
  overflow: hidden;
}
/*キラッと光る*/
.btnshine::before {
  content: '';
  /*絶対配置でキラッと光るの位置を決める*/
  position: absolute;
  top: 0;
  left: -75%;
  /*キラッと光る形状*/
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%);
  transform: skewX(-25deg);
}
/*hoverした際の移動のアニメーション*/
.btnshine:hover::before {
  animation: shine 0.7s;
}
@keyframes shine {
  100% {
    left: 125%;
  }
}
.nav-container {
  margin: 0 auto;
  /* max-width: 1450px;*/
  padding: 0;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
}
.nav {
  /*position: fixed;*/
  background-color: rgba(255, 255, 255, 1.0);
  width: 100%;
  /*z-index: 9999;
	padding: 1rem;*/
}
.nav_item a {
  /*color: #fff;*/
}
.hover_bt a:hover {
  opacity: 0.5;
}
@media only screen and (min-width: 1051px) {
  .nav_list {
    text-align: center;
    /*margin: 0 auto;*/
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
      }
	
  .nav_list li {
    display: inline-block;
    text-align: center;
    position: relative;
  }
  .nav_list li a {
    color: #000;
    font-weight: 600;
    padding: 0 15px;
    position: relative;
  }
  .nav_item {
    padding: 0 14px;
    display: inline-block;
  }
  .hover a:hover {
    opacity: 0.5;
  }
  /*.nav_list li + li {
    border-left: 1px solid #204c80;
  }*/
  /*ホバーエフェクト*/
  .nav_list li a::after {
    /*マークのスタイル*/
    position: absolute;
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    background-color: #204c80;
    border-radius: 50%;
    top: -15px;
    left: calc(50% - 5px);
    /*不透明度0で非表示*/
    opacity: 0;
    /*下方向へ50%移動*/
    -webkit-transform: translateY(50%);
    transform: translateY(50%);
    /*アニメーションの速度設定*/
    -webkit-transition: all 0.6s ease;
    transition: all 0.6s ease;
  }
  .nav_list li a:hover::after {
    /*不透明度1で表示*/
    opacity: 1;
    /*0位置に移動*/
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
} /* pc */
@media only screen and (max-width: 1050px) {
  .nav {
    width: 70%;
    height: 40vh;
	}
	
  .head-left-img {
    width: 15%;
  }
  .head-right-img {
    width: 15%;
  }
  .nav {
    position: fixed;
    right: -1350px;
    top: 0;
    width: 70%;
    height: 70vh;
    padding: calc(((100vw - 360px) / 14.6667) + 10px);
    background-color: #fff;
    transition: all .6s;
    z-index: 200;
    overflow-y: auto;
  }
  #js-hamburger {
    position: fixed;
  }
  .hamburger {
    position: absolute;
    right: 15px;
    top: 8px;
    width: 50px;
    height: 50px;
    cursor: pointer;
    z-index: 300;
    background-color: rgba(37, 53, 96, 1.0);
    border-radius: 10%;
  }
  .nav_list {
    margin: 0 auto;
    padding: 15% 0;
    list-style: none;
  }
  .nav_list li {
    text-align: center;
  }
  .nav_item a:hover::before {
    top: 10px;
    left: 20px;
  }
  .nav_item {
    text-align: center;
    padding: 0 14px;
    display: inline-block;
    width: 48%;
  }
  .nav_item a {
    display: block;
    padding: 15px 0;
    /* border-bottom: 1px solid #000; */
    border-right: 0px solid #fff;
    text-decoration: none;
    color: #000;
    position: relative;
  }
  /*ホバーエフェクト*/
  .nav_item a::after {
    /*アンダーラインのスタイル*/
    position: absolute;
    content: "";
    display: block;
    height: 3px;
    background-color: #253560;
    bottom: 0px;
    left: 0;
    /*幅を0に設定*/
    width: 0;
    /*アニメーションの速度設定*/
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
  }
  .nav_item a:hover::after {
    /*幅を100%に設定*/
    width: 100%;
  }
  .nav_item2 {
    text-align: center;
  }
  /*.nav_item a:hover {
    background-color: #eee;
  }*/
  .hamburger_border {
    position: absolute;
    right: 10px;
    width: 30px;
    height: 2px;
    background-color: #fff;
    transition: all .6s;
  }
  .hamburger_border_top {
    top: 12px;
  }
  /* .hamburger_border_center {
    top: 20px;
  }*/
  .hamburger_border_bottom {
    top: 20px;
  }
  .hamburger_border_bottom::after {
    content: "Menu";
    position: absolute;
    top: 5px;
    left: -2px;
    color: #fff;
    font-size: 1.0rem;
    text-transform: uppercase;
  }
  .black_bg {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 100;
    background-color: #333;
    opacity: 0;
    visibility: hidden;
    transition: all .6s;
    cursor: pointer;
  }
  /* 表示された時用のCSS */
  .nav-open .nav {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    width: 50%;
  }
  .nav-open .black_bg {
    opacity: .8;
    visibility: visible;
  }
  .nav-open .hamburger_border_top {
    transform: rotate(25deg);
    top: 17px;
    background-color: #fff;
  }
  /*.nav-open .hamburger_border_center {
    width: 0;
    left: 50%;
  }*/
  .nav-open .hamburger_border_bottom {
    transform: rotate(-25deg);
    top: 17px;
    background-color: #fff;
  }
  .nav-open .hamburger_border_bottom::after {
    content: "Close";
    transform: rotate(25deg);
    top: 7px;
    left: -9px;
    color: #fff;
  }
  .sp-nav-logo {
    text-align: center;
    margin: 4rem auto;
  }
	
.main-img {
  /*height: 390px;*/
  margin: 0;		
  }

./*cycle-video-wrapper {
    max-width: 390px;
   }	*/
	
	
} /* sp */
@media only screen and (max-width: 560px) {
  .nav {
    height: 100vh;
  }
  .nav_item {
    width: 100%;
  }
  .slide-txt01 {
    font-size: 22px;
  }
}

/*==================================================
スライダーのためのcss
===================================*/
.slider {
    position:relative;
  z-index: 1;
  /*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/
  height: 660px;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
}
/*　背景画像設定　*/

.slider-item01 {
    background:url("../images/slide01.jpg");
}

.slider-item02 {
    background:url("../images/slide02.jpg");
}

.slider-item03 {
    background:url("../images/slide03.jpg");
}

.slider-item {
    width: 100%;/*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
    height:660px;/*各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
    background-repeat: no-repeat;/*背景画像をリピートしない*/
    background-position: center;/*背景画像の位置を中央に*/
    background-size: cover;/*背景画像が.slider-item全体を覆い表示*/
}

/*矢印の設定*/

.slick-prev, 
.slick-next {
    position: absolute;
  z-index: 3;
    top: 50%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    border-top: 2px solid #fff;/*矢印の色*/
    border-right: 2px solid #fff;/*矢印の色*/
    height: 25px;
    width: 25px;
}

.slick-prev {/*戻る矢印の位置と形状*/
    left:2.5%;
    transform: rotate(-135deg);
}

.slick-next {/*次へ矢印の位置と形状*/
    right:2.5%;
    transform: rotate(45deg);
}

/*ドットナビゲーションの設定*/

.slick-dots {
  position: relative;
  z-index: 3;
    text-align:center;
  margin:-50px 0 0 0;/*ドットの位置*/
}

.slick-dots li {
    display:inline-block;
  margin:0 5px;
}

.slick-dots button {
    color: transparent;
    outline: none;
    width:8px;/*ドットボタンのサイズ*/
    height:8px;/*ドットボタンのサイズ*/
    display:block;
    border-radius:50%;
    background:#fff;/*ドットボタンの色*/
}

.slick-dots .slick-active button{
    background:#333;/*ドットボタンの現在地表示の色*/
}

.wrapper{
  position: relative;
}

.wrapper h2{
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: 6rem;
  font-weight: bold;	
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  width: 100%;	
  text-shadow:  0px 0px 10px rgba(0, 0, 0, 0.8);
}


/*メインコンテンツ
-------------------------------------*/
main {
  margin: 0 auto;
  background-color: #fff;
}
section {
  margin: 2em auto;
}



.catch{
	margin: 2rem auto 4rem;
	padding: 2rem 1rem;
	text-align: center;
}

.catch-text{
	text-align: center;
	font-size: clamp(1.2rem, calc(1rem + 0.625vw), 1.8rem);
	line-height: 1.8;
	margin: 4rem auto;
	font-weight: 600;
}


.table {
  margin: 4rem 0;
  }

.table th {
  width: 25%;
}
/* 送信ボタン */
.submit-btn {
  /* buttonタグのリセットCSS */
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  appearance: none;
  color: #fff;
  padding: 8px 24px;
  background-color: #3abec1;
  cursor: pointer; /* ポインターカーソルを表示 */
}
.submit-btn[disabled] {
  background-color: #ccc;
  cursor: not-allowed; /* クリック不可のカーソルを表示 */
}
/*.flex-check {
  display: flex;
  vertical-align: top;
  justify-content: center;
}*/


.check-area{
 background-image: linear-gradient(0deg, transparent calc(100% - 1px), #9ecef5 calc(100% - 1px)),
                    linear-gradient(90deg, transparent calc(100% - 1px), #9ecef5 calc(100% - 1px));
  background-size: 30px 30px;
  background-repeat: repeat;
  background-position: center center;
  padding: 3rem 0;	
　opacity: 0.8;	
}

.area-ttl{
	margin: 2rem auto 4rem;
	padding: 2rem 0;
	text-align: center;
}

.check-text{
	 font-size: clamp(1.6rem, calc(1.3rem + 0.625vw), 2.0rem);
	text-align: center;
	font-weight:600;
	margin-bottom: 6rem;
}

.list {
  display: grid;
  width: fit-content;
  column-gap: 2em;
  grid-template-columns: repeat(2, auto);
}

.list li{
	list-style: none;
}

.business{
	position: relative;
	}

.business-img img{
	width: 100%;
}

.business-info{
  position:	absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color:	rgba(14,53,127,0.82);
  opacity: 1;
  transition: .3s ease-in-out;	
}



.business-ttl{
	position: absolute;
	top: 33%;
	left: 50%;
    transform: translateX(-50%);
	color: rgba(255,255,255,1);
	text-align: center;
	font-size: 2.7rem;
	font-weight: bold;
	width: 100%;
}

.hr300{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-bottom: solid 2px; 
  color: rgba(255,255,255,1);	
  width: 180px;	
}

.business-text{
	position: absolute;
	top: 52%;
	left: 50%;
    transform: translateX(-50%);
	color: rgba(255,255,255,1);
	text-align: center;
	font-size: clamp(1.4rem, calc(1.2rem + 0.625vw), 1.8rem);
	width: 100%;
}

.business-info:hover{
	 opacity: 0;
}

.business-ttl:hover{
	color: rgba(255,255,255,0);
}

.hr300:hover{
	color: rgba(255,255,255,0);
}

.business-text:hover{
	color: rgba(255,255,255,0);
}

.const-bg{
    background: url("../images/const_bg.jpg") no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
    /*height: 1784px;*/
    background-position: 50% 50%;
	padding: 6rem 0;
}

.before_after{
	display: flex;
	justify-content: space-between;
	margin: 4rem auto 8rem;
}


.before_image > img {
    margin: 4rem auto;
    max-width: 100%;
}

.after_image > img {
    margin: 4rem auto;
    max-width: 100%;
}

.before_after_arrow {
    position: relative;
     display: inline-block;
}

.before_after_arrow::after {
    content: '';
    width: 12px;
    height: 12px;
    margin-top: -5px;
    border-top: solid 3px #231815;   /* 好みで色を変えてください */  
    border-right: solid 3px #231815;   /* 好みで色を変えてください */  
    transform: rotate(45deg);
    position: absolute;
    top: 50%;
    right: 0;
}

.line-left {
    border-left: 12px solid #0e357f;
    padding-left: 10px;
}

.line-left p{
	font-size: clamp(1.6rem, calc(1.6rem + 0.625vw), 2.4rem);
}

.tel-link-text{
	font-size: clamp(1.8rem, calc(1.8rem + 0.625vw), 2.8rem);
	text-align: center;
	font-weight: 600;
}

.tel-link-bt{
	text-align: center;
	margin: 2rem auto;
	padding-bottom: 10rem;
}

.about-tbl table {
	font-size: clamp(1.6rem, calc(1.3rem + 0.625vw), 2.0rem);
	margin: 40px auto 100px;
	border-collapse: separate;
    border-spacing: 5px;
	width: 100%;
}
.about-tbl th{
	padding: 14px;
	font-weight: normal;
	text-align: center;
	border-bottom: 2px solid #0080a5;
}

.about-tbl td {
	padding: 14px 0 14px 20px;
	font-weight: normal;
	text-align: left;
	border-bottom: 2px solid #dddddd;
}
.about-tbl td span {
	font-size: 90%;
}


@media all and (max-width: 1280px) {

.business-ttl{
	top: 40%;
		}
}

@media all and (max-width: 900px) {
    .business-ttl {
        top: 37%;
    }
}

@media all and (max-width: 768px) {
    .business-ttl {
        top: 37%;
    }
}

@media all and (max-width: 560px) {
 	
.about-tbl table th,.about-tbl table td {
    display: block;
    width: 100%;
      }
	
.about-tbl th{
	text-align: left;
	border-bottom: 2px solid #dddddd;
	}	
	
.about-tbl td {
	padding: 14px;
	text-align: left;
	border-bottom: 2px solid #0080a5;
	}	
	
.business-ttl{
	font-size: 1.8rem;
		}
	
.business-text {
    font-size: 1.3rem;
    }
	
.hr300 {
    width: 140px;
}	
	
}

/*フッター
-------------------------------------*/

footer{
  background-color: #253560;
  padding: 6rem 0;	
}

/*footer h4 {
    border-bottom: 3px solid var(--border-color);
}*/
.foot-info table {
  width: 100%;
  color: #fff;
  font-size: 16px;
 }

.foot-info table th {
  /*position: relative;*/
  text-align: left;
  /*width: 25%;*/
  color: #fff;
  padding: 0 0 2px;
  font-weight: 400;
  vertical-align: top;
}

.foot-info table td {
  text-align: left;
  padding: 0 0 10px 30px;
  /*width: 75%;*/
  color: #fff;
  /*font-size: calc(((100vw - 360px) / 780) + 16px);*/
}
.foot-info table td a {
  color: #fff;
}
.nowrap {
  white-space: nowrap;
}
.foot-nav {
  /*init*/
  margin: 0;
  padding: 0;
  list-style: none;
}
.foot-nav {
  display: flex;
  align-items: center;
  margin: 2rem auto 4rem;
}
.foot-nav li {
  flex-grow: 1;
  text-align: center;
}
.foot-nav li a {
  color: #fff;
}

.foot-nav li + li {
  border-left: 2px solid #fff;
}
.foot-flex {
  display: flex;
  vertical-align: top;
  justify-content: flex-start;
}

.foot-link{
	text-align: center;
	margin: 2rem auto 0;
	font-size: clamp(2.0rem, calc(1.8rem + 0.625vw), 2.1rem);
	font-weight: bold;
	color: #fff;
}


/*コピーライト
-------------------------------------*/
.copyright {
  text-align: center;
  padding: 1rem 0;
  background-color: #253560;
  color: var(--white-color);
  font-size: 12px;
   width: 100%;
}

/*ページトップへ戻るボタン
-------------------------------------*/

/*リンクの形状*/
#page-top a {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  border-radius: 5px;
  width: 60px;
  height: 60px;
  color: #000;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  font-size: 1.5rem;
  transition: all 0.3s;
}
#page-top a:hover {
  background: #777;
}
/*リンクを右下に固定*/
#page-top {
  position: fixed;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  /*はじめは非表示*/
  opacity: 0;
  transform: translateY(100px);
}
/*　上に上がる動き　*/
#page-top.UpMove {
  animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/*　下に下がる動き　*/
#page-top.DownMove {
  animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 1;
    transform: translateY(100px);
  }
}
.site-header {
  background: #fff;
  display: flex;
  justify-content: space-between;
  /*padding: 20px;*/
  /*position: relative;*/
  width: 100%;
  max-width: 1150px;
  align-items: center;
  margin: 0 auto;	
 }

.header-change {
  background: #fff;
  display: flex;
  justify-content: space-between;
  position: fixed;
  top: -1000px;
  transition: .5s;
  width: 100%;
}
.header-change.show {
  top: 0;
}
.header-change .gnav__menu__item a {
  color: #000;
  text-decoration: none;
}

.area-box {
  width: 1040px;
  max-width: 100%;
  margin: 0 auto;
  padding: 10rem 2rem 2rem;
}

.white-box {
  max-width: 1000px;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 4rem 0;
  margin: 2rem auto;
}
/* table01 */
#table01 tr {
  border-bottom: 1px solid #b5b1b1;
}
#table01 th, #table01 td {
  padding: 24px 0;
  border: none;
}
#table01 th {
  width: 30%;
}

.contact-head {
  width: 100%;
  height: 0;
  padding-top: 13.0208333%;
  background-image: url("../images/contact/contact_head.jpg");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
}

/* 幅1180px以下の表示
-------------------------------------*/
@media screen and (max-width: 1180px) {

.before_after{
	 flex-direction: column;
	 width: 100%;
	}	
	
  .item01 {
    order: 1;
  }
  .item02 {
    order: 2;
  }
 

	.before_after_arrow{
		display: none;
	}	
}

/* 幅1050px以下の表示
-------------------------------------*/
@media screen and (max-width: 1050px) {
  .site-header {
    width: 100%;
    display: block;
    text-align: center;
	margin: 0;  
	padding: 10rem 2rem;  
  }
	

 
  .header-change {
    display: none;
  }
	
  .wrapper h2{
  font-size: 4.5rem;
  }
	
  
}
/* 幅1000px以下の表示
-------------------------------------*/
@media screen and (max-width: 1000px) {
  .nav-open .nav {
    width: 100%;
  }
  .features-list li {
    width: 100%;
    margin-bottom: 40px;
  }
	

	
  .q-a {
    height: 550px;
  }
  .foot-nav {
    display: block;
  }
  .foot-nav li + li {
    border-left: 0px;
  }
}
/* 幅800px以下の表示
-------------------------------------*/
@media screen and (max-width: 800px) {
  /*ヘッダー
-------------------------------------*/
	
	
  .header-box {
    display: none;
  }
	

  .mb60-lineup {
    margin-bottom: 0;
  }
  .flex-outer {
    display: block;
  }
	

  #con-area {
    margin: 20rem auto;
  }
  .btnarrow-contact {
    height: 100px;
  }
  .btnarrow-tel {
    height: 100px;
  }
	

	
.wrapper h2 {
        font-size: 3.0rem;
        line-height: 1.6;
    }
	
 
  /*お問い合わせ
-------------------------------------*/
  .table th {
    width: 100%;
    display: block;
  }
  .table td {
    display: block;
  }
}
/* 幅560px以下の表示
-------------------------------------*/
@media screen and (max-width: 560px) {
 
  
	
main {
    margin: 0 auto;
    padding: 2rem 0;
    background-color: #fff;
  }
	

  #table01 th, #table01 td {
    width: 100%;
    display: block;
  }
  #table01 th {
    width: 100%;
  }
  #table01 td {
    padding-top: 0;
  }
  .foot-info table {
    font-size: 16px;
  }
  .foot-info table td {
    display: block;
    width: 100%;
  }
  .foot-info table th {
    display: block;
    width: 100%;
  }
 
}