@charset "utf-8";

/*------------------------------------------------------------
common
------------------------------------------------------------*/
h1 {
	padding:20px 0;
	float: left;
}
h2 {
	color: #183c8e;
	font-size: 30px;
	font-weight: bold;
}
h2 span {
	font-size: 12px;
	padding-left: 10px;
}
h3 {
	width: 96%;
	font-size:24px;
	font-weight: bold;
	color: #364e96;
	padding: 0.3em 10px 0.2em;
	border-top: solid 3px #364e96;
	border-bottom: solid 3px #364e96;
}
h3 span {
	font-size:16px;
	font-weight: bold;
}
a {
	text-decoration: none;
}
a:hover {
	opacity: 0.8;
}
@media screen and (max-width: 1040px) {
	h1 {
		padding:7px 0;
		float: none;
	}
	h1 img {
		width: 130px;
	}
	h2 {
		font-size: 22px;
	}
	h2 span {
		font-size: 10px;
		padding-left: 7px;
	}
	h3 {
		width: 100%;
		font-size:17px;
		margin: 20px 0 10px;
	}
	h3 span {
		font-size:12px;
		font-weight: bold;
	}
}
#wrapper {
	max-width: 100%;
	width: 100%;
	margin: 0 auto;
}

/* リンクやボタンのタップハイライトを消す（iOS Safari / Android Chrome） */
a,
button,
input,
label {
    -webkit-tap-highlight-color: transparent;
}

/*------------------------------------------------------------
pc/sp
------------------------------------------------------------*/
.pc{display: block;}
.sp{display: none;}
@media screen and (max-width:1040px){
	.pc{display: none;}
	.sp{display: block;}
}

/*------------------------------------------------------------
header
------------------------------------------------------------*/
header {
	z-index:2;
	box-sizing:border-box;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	background:#f8f8f8;
	box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.2);
}
header a:hover {
	opacity: 0.7;
}
.head {
	overflow:hidden;
	max-width:1140px;
	margin: 0 auto;
}
.head ul {
	max-width:1140px;
	float: right;
	padding: 30px 0;
} 
.head li {
	display: inline;
	padding-left: 20px;
}
.head li a {
	color: #777;
	font-size: 14px;
}
@media screen and (max-width:1040px) {
	header {
		z-index:2;
		box-sizing:border-box;
		position:fixed;
		top:0;
		left:0;
		width:100%;
		padding:15px 10px;
	}
	header a:hover {
		opacity: 1.0;
	}
	.head {
		width:100%;
		margin: 0 auto;
		padding:  0;
	}
}

/*------------------------------------------------------------
nav 未使用
------------------------------------------------------------*/
nav {
	width:100%;
	⁄zoom:1;
}
nav:after {
	content:'';
	display:block;
	clear:both;
}
@media print, screen and (min-width:1041px) {
nav {
	display: none;
	background:#039a75;
	z-index:3;
}
nav ul {
	margin:0;
	padding:0;
}
nav ul li {
	position:relative;
	width:19.7%;
	float:left;
	margin:0;
	padding:0;
	text-align:center;
	list-style:none;
	border-right: 1px solid #4bbca0;
}
nav ul li:first-child {
	width:19.6%;
	border-left: 1px solid #4bbca0;
}
nav ul li a {
	display:block;
	margin:0;
	padding:16px 0;
	background:#039a75;
	color:#fff;
	font-size:14px;
	font-weight:bold;
	line-height:1;
	text-decoration:none;
}
nav ul > li:hover > a {
	color:#fff;
	background:#11b089;
}
nav ul .subnav > a:after {
	position:absolute;
	content:"";
	top:20px;
	width:0;
	height:0;
	margin-left:10px;
	border:5px solid transparent;
	border-top-color:#fff;
}
nav ul .subnav .subnav > a:after {
	content:"";
	border:none;
}
nav ul li ul {
	list-style:none;
	position:absolute;
	z-index:3;
	top:100%;
	left:0;
	width:100%;
	margin:0;
	padding:0;
}
nav ul li ul li {
	overflow:hidden;
	width:150%;
	height:0;
	color:#fff;
	transition:.2s;
}
nav ul li ul li:first-child {width:150%;}
nav ul li ul li a {
	padding:13px 15px;
	text-align:left;
	background:#7c0c0c;
	font-weight:normal;
}
nav ul li:hover > ul > li {
	overflow:visible;
	height:40px;
	border-bottom:1px solid #8c0e0e;
}
nav ul li:hover ul li:last-child {border-bottom:none;}
nav ul li:last-child ul {left:-50%;}
nav ul li ul li ul:before {
	position:absolute;
	content:"";
	top:13px;
	left:-20px;
	width:0;
	height:0;
	border:5px solid transparent;
	border-left-color:#fff;
}
nav ul li:last-child ul li ul:before {
	position:absolute;
	content:"";
	top:13px;
	left:200%;
	margin-left:-20px;
	border:5px solid transparent;
	border-right-color:#fff;
}
nav ul li ul li ul {
	top:0;
	left:100%;
}
nav ul li ul li ul li {width:100%;}
nav ul li ul li ul li:first-child {width:100%;}
nav ul li ul li:hover ul li {border-bottom:1px solid #457f09;}
nav ul li:last-child ul li ul {left:-100%;}
nav ul li ul li ul li a {background:#56a109;}
nav ul li ul li ul li a:hover {background:#81cc33;}
	
.gnav {
	display:block !important;
	}
#spMenu {
	display:none;
	}
}

/*-----------------------------------------------------------
nav sp
------------------------------------------------------------*/
@media screen and (max-width:1040px) {
  nav {
    display:block;
  }

  nav ul {
    margin:0;
    padding:0;
  }

  nav .inner > ul {
    z-index:100001; /* 親テーマの100000より上 */
    overflow:auto;
    position:fixed;
    top:80px;
    right:0;
    width:100%;
    height:100%;
    height:-webkit-calc(100% - 83px);
    height:calc(100% - 83px);
    background:#f8f8f8;
  }

  nav li {
    position:relative;
    width:85%;
    float:none;
    text-align:center;
    margin:0 auto 0px;
    list-style:none;
    box-sizing:border-box;
    border-bottom:1px solid #e9e9e9;
  }

  nav li:first-child {
    border-top:1px solid #e9e9e9;
    border-bottom:1px solid #e9e9e9;
  }

  nav li a {
    font-size:12px;
    display:block;
    padding:15px;
    color:#777;
    text-decoration:none;
    box-sizing:border-box;
    border-radius:10px;
  }

  nav li a:hover {
    opacity:0.7;
  }

  .gnav {
    display:none;
    z-index:100002; /* 親テーマより上 */
  }

  #spMenu {
    display:block;
    z-index:100003; /* ボタンはメニューより上 */
    position:fixed;
    top:23px;
    right:12px;
  }

  #spMenu:hover {
    cursor:pointer;
  }

  #navBtn {
    display:inline-block;
    position:relative;
    width:30px;
    height:30px;
    border-radius:5%;
    /*background:#f8f8f8;*/
  }


  /* =====================
     ハンバーガーアイコン改
     ===================== */
  #navBtnIcon {
    display:block;
    position:absolute;
    top:50%;
    left:50%;
    width:17px;
    height:1px;               /* 2px → 1pxに変更（にじみ軽減） */
    margin-left:-8.5px;        /* 幅の半分 */
    background:#777;
    transform: translateY(-50%);
    backface-visibility: hidden; /* GPUレンダリングでアンチエイリアス軽減 */
    transition: 0.2s;
  }

  #navBtnIcon:before,
  #navBtnIcon:after {
    content:'';
    display:block;
    position:absolute;
    left:0;
    width:17px;
    height:1px;               /* 2px → 1pxに変更 */
    background:#777;
    transition:0.3s;
    backface-visibility: hidden;
  }

  #navBtnIcon:before { transform: translateY(-6px); } /* 上の線 */
  #navBtnIcon:after  { transform: translateY(6px); }  /* 下の線 */

  /* =====================
     クリック時のcloseアニメーション
     ===================== */
  #navBtn .close {
    background:transparent;
  }

  #navBtn .close:before,
  #navBtn .close:after {
    margin-top:-2px;
  }

  #navBtn .close:before {
    transform:rotate(-45deg);
    -webkit-transform:rotate(-45deg);
  }

  #navBtn .close:after {
    transform:rotate(-135deg);
    -webkit-transform:rotate(-135deg);
  }
}


/*------------------------------------------------------------
video
------------------------------------------------------------*/
video {
	display: block;
}
.video-wrapper {
	position: relative;
	/*height: 90vh;*/
	width: 100%;
	margin: 0;
	padding: 0;
}
.video-wrapper video {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
	-o-object-position: center;
	object-position: center;
}
.catch-copy {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: -webkit-max-content;
	height: -moz-max-content;
	height: max-content;
	text-align: center;
	font-size: calc(65px + 3vw);
	font-weight: bold;
	/*text-shadow: 1px 1px 10px #000;*/
	color: #fff;
	margin: auto;
}
.catch-copy span {
	font-size: calc(10px + 3vw);
}
.catch-sub {
	font-size: 45px;
	font-weight: normal;
	padding-top: 1px;
}
@media screen and (max-width:767px) {
	.catch-copy {
		font-size: calc(24px + 3vw);
	}
	.catch-copy span {
		font-size: calc(7px + 3vw);
	}
	.catch-sub {
		font-size: 14px;
		padding-top: 5px;
	}
}
/*arrows*/
.scroll_down{
  position:absolute;
  bottom:-40px;
  right:50%;
  animation: arrowmove 1s ease-in-out infinite;
	margin: 0 auto;
}
.arrow {
  position: absolute;
  width: 50px;
  height: 2px;
  opacity: 0;
  transform: scale3d(0.5, 0.5, 0.5);
  animation: move 3s ease-out infinite;
}
.arrow:first-child {
  animation: move 3s ease-out 1s infinite;
}
.arrow:nth-child(2) {
  animation: move 3s ease-out 2s infinite;
}
.arrow:before,
.arrow:after {
  content: ' ';
  position: absolute;
  top: 0;
  height: 100%;
  width: 51%;
  background: #fff;
}
.arrow:before {
  left: 0;
  transform: skew(0deg, 30deg);
}
.arrow:after {
  right: 0;
  width: 50%;
  transform: skew(0deg, -30deg);
}
@keyframes move {
  25% { opacity: 1; }
  33% { opacity: 1; transform: translateY(30px); }
  67% { opacity: 1; transform: translateY(40px); }
  100% { opacity: 0; transform: translateY(50px) scale3d(0.5, 0.5, 0.5); }
}
@media screen and (max-width:767px) {
	.scroll_down{
		bottom:2px;
	}
	.arrow {
		width: 20px;
	}
}


/*-----------------------------------------------------------
top
------------------------------------------------------------*/
.top {
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0;
}
.top img {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
	-o-object-position: center;
	object-position: center;
}
.top p {
	position: absolute;/*重ねたい子要素にabsolute*/
	top:60%;
	left: 50%;
	-ms-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
	-webkit-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
	transform: translate(-50%,-50%);/*センター寄せの修正*/
	color: #fff;
	font-size: 65px;
	font-weight: bold;
	line-height: 35px;
	margin: 0 !important;/*文字がずれている場合や*/
	padding: 0 !important;/*文字が折り返される場合*/
	text-align: center;
}
.top p span {
	font-size: 18px;
}
@media screen and (max-width:767px) {
	.top p {
		top:55%;
		font-size: 35px;
		line-height: 20px;
	}
	.top p span {
		font-size: 13px;
	}
}


/*------------------------------------------------------------
content
------------------------------------------------------------*/
/* 共通部分 */
.content01, .content02 {
  width: 100%;
  box-sizing: border-box;
  border-bottom: 1px solid #e9e9e9;
  padding: 70px 0;
}

.content01 { background-color: #f8f8f8; }
.content02 { background-color: #fff; }

.inner {
  max-width: 1140px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

/* content01: 左テキスト・右画像 */
.content01 .textArea { flex: 0 0 430px; }
.content01 .imgArea  { flex: 0 0 590px; }

/* content02: PC 左画像・右テキスト */
.content02 .imgArea  { flex: 0 0 590px; order: 1; }
.content02 .textArea { flex: 0 0 430px; order: 2; }

/* 共通スタイル */
.topline {
  width: 230px;
  box-sizing: border-box;
  border: 2px solid #cf1934;
  margin-bottom: 30px;
}

.textArea p {
  font-size: 15px;
  line-height: 26px;
  padding: 20px 0 30px;
}

.imgArea img {
  width: 100%;
  display: block;
}

.textArea a {
  font-size: 11px;
  color: #0443a1;
  text-align: center;
  box-sizing: border-box;
  border: 1px solid #0443a1;
  padding: 10px 20px;
  text-decoration: none;
  display: inline-block;
}

.textArea a i {
  font-size: 12px;
  padding-right: 5px;
}

/* レスポンシブ */
@media screen and (max-width:1040px) {
  .content01, .content02 {
    padding: 40px 0;
  }

  .inner {
    width: 96%;
    flex-direction: column;
    align-items: flex-start;
  }

  .content01 .textArea,
  .content01 .imgArea,
  .content02 .textArea,
  .content02 .imgArea {
    flex: 0 0 100%;
  }

  /* content02: スマホでテキスト上・画像下 */
  .content02 .textArea { order: 1; }
  .content02 .imgArea  { order: 2; }

  .topline {
    width: 150px;
    margin-bottom: 20px;
  }

  .textArea p {
    font-size: 13px;
    line-height: 21px;
    padding: 20px 0 10px;
  }

  .textArea a {
    font-size: 10px;
    padding: 7px 15px;
  }

  .textArea a i {
    font-size: 10px;
  }

  .imgArea img {
    margin-top: 30px;
  }
}



/*-----------------------------------------------------------
info_footer
------------------------------------------------------------*/
.info_footer {
	clear: both;
	width: 100%;
	height: 224px;
	background: url("../images/info_footer.jpg");
	box-sizing: border-box;
	padding: 100px 0;
}
.info_footer_area {
	width: 50%;
	height: auto;
	float: left;
}
.info_footer_area p {
	color: #fff;
	font-size: 33px;
	font-weight: bold;
}
.info_footer_area_btn {
	float: right;
}
.info_footer_area a {
	font-size: 14px;
	color: #666;
	background-color: #fff;
	text-align: center;
	box-sizing: border-box;
	border-radius: 30px;
	padding: 12px 25px;
}
@media screen and (max-width:767px) {
	.info_footer {
		width: 100%;
		height: auto;
		background: url("../images/info_footer_sp.jpg");
		padding: 40px 0;
	}
	.info_footer_area {
		width: 100%;
		float: none;
	}
	.info_footer_area p {
		font-size: 18px;
		margin-bottom: 15px
	}
	.info_footer_area_btn {
		float: none;
	}
	.info_footer_area a {
		font-size: 10px;
		padding: 6px 14px;
	}
}


/*-----------------------------------------------------------
footer
------------------------------------------------------------*/
footer {
  clear: both;
  width: 100%;
  background: #fff;
  padding: 45px 0;
  position: relative;  /* 追加：z-indexを効かせるため */
  z-index: 100010;     /* スマホメニューより上に表示 */
}

footer .inner {
  display: block;
  max-width: 1140px;
  width: 100%;
  margin: 0 auto;
}

footer img {
  width: 100px;
  margin-bottom: 12px;
}

footer ul.menu {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
}

footer ul.menu li {
  margin: 0;
  padding-right: 15px;
}

footer ul.menu li a {
  font-size: 12px;
  font-weight: bold;
  color: #183c8e;
  text-decoration: none;
}

footer ul.menu li a i {
  display: none !important;
}

footer a:hover {
  text-decoration: none;
}

footer p {
  font-size: 9px;
  color: #dcdcdc;
  padding: 18px 0 0;
}

/*-----------------------------------------------------------
SP 用 footer
------------------------------------------------------------*/
@media screen and (max-width:1040px) {
  footer {
    padding: 30px 0;
  }

  footer .inner {
    width: 100%;
  }

  footer img {
    width: 90px;
    padding: 0 10px;
    margin-bottom: 10px;
  }

  footer ul.menu {
    display: block; /* 縦並び */
  }

  footer ul.menu li {
    box-sizing: border-box;
    width: 100%;
    border-bottom: 1px solid #e9e9e9;
    background-color: #f8f8f8;
    padding: 0 10px;
  }

  footer ul.menu li:first-child {
    border-top: 1px solid #e9e9e9;
  }

  footer ul.menu li a {
    color: #183c8e;
    display: block;
    text-decoration: none;
    font-size: 11px;
    padding: 11px 0;
    line-height: 1;
    position: relative;
  }

  footer ul.menu li a i {
    display: block !important;
    float: right;
  }

  footer p {
    font-size: 9px;
    color: #dcdcdc;
    padding: 15px 10px 0;
  }
}



/*-----------------------------------------------------------
pagetop
------------------------------------------------------------*/
.pagetop {
    display: none;
    position: fixed;
    bottom: 30px;
    right: 15px;
	z-index: 9;
}
.pagetop a {
    display: block;
    text-align: center;
    text-decoration: none;
    padding: 5px 10px;
	filter:alpha(opacity=90);
    -moz-opacity: 0.9;
    opacity: 0.9;
}
.pagetop a img {
	width: 40px;
}
.pagetop a:hover {
    display: block;
    text-align: center;
    text-decoration: none;
    padding:5px 10px;
	filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
}
@media screen and (max-width:767px) {
	.pagetop {
    	right: 3px;
	}
	.pagetop a img {
		width: 35px;
	}
}


/*-----------------------------------------------------------
Company profile
------------------------------------------------------------*/
.lead-list-box { 
	width:430px; 
	font-size: 12px;
	line-height: 20px;
	border: 1px solid #dedede;
	margin-top: 25px;
}
.lead-list-box tr, th, td { 
	border: 1px solid #dedede;
	padding: 10px;
}
.lead-list-box th{
	background-color: #f8f8f8;
}
.gmap_iframe {
    aspect-ratio: 16 / 9;
    max-width: 590px;
    width: 100%;
    height: auto;
}
@media screen and (max-width:1040px) {
    .content02 .inner {
        width: 96%;          /* 親要素の幅を96%に */
        margin: 0 auto;      /* 中央寄せ */
        padding: 0;          /* 不要なpaddingをリセット */
        box-sizing: border-box;
    }
    .content02 .textArea {
        width: 100%;         /* inner に合わせて幅を100% */
        padding: 0;          /* 余白リセット */
        box-sizing: border-box;
    }
    .lead-list-box { 
        width: 100%;         /* 親幅いっぱい */
        max-width: 100%;     /* 親を超えない */
        font-size: 11px;
        line-height: 17px;
        border-collapse: collapse; /* 余白を消す */
    }
    .lead-list-box th,
    .lead-list-box td {
        padding: 8px;        /* スマホ用に少し小さめ */
        box-sizing: border-box;
    }
	
    .content01 .inner {
        width: 96%;        /* 親幅を96%に */
        margin: 0 auto;    /* 中央寄せ */
        padding: 0;
        box-sizing: border-box;
    }
    .content01 .imgArea {
        width: 100%;       /* innerに合わせる */
    }
    .gmap_iframe {
        width: 100%;       /* 親幅いっぱい */
        max-width: 100%;
        height: auto;
        aspect-ratio: 16/9;
        display: block;
    }
}


/*-----------------------------------------------------------
loader
------------------------------------------------------------*/
.loading {
  position: fixed;
  width: 100%;
  height: 100vh;
  background-color: #fff;
  z-index: 5555;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loading .loader{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 70px;
  margin-left: -30px;
  margin-top: -10px;
  text-align: center;
  font-weight: bold;
background-color: #fff;
}
.loading .loader span{
  display: block;
  background: #0443a1;
  width: 70px;
  height: 5px;
  margin-top: 5px;
  animation: load 2s infinite;
  border-radius: 5px;
}
.loading .loader span:nth-child(2){animation-delay: 100ms;}
.loading .loader span:nth-child(3){animation-delay: 200ms;}
.loading .loader P {
	color: #0443a1;
	font-size: 12px;
	margin-top: 5px;
}
@keyframes load{
  50%{
    width: 5px;
    margin-right: 95px;
    opacity: .1;
  }
}



/*-----------------------------------------------------------
SPメニュー・ボタンの保護用 z-index
------------------------------------------------------------*/
#spMenu {
    position: fixed;
    top: 23px;
    right: 12px;
    z-index: 100010 !important; /* メニューより上に表示 */
}

/* 固定ページのトップ画像下余白を完全に削除 */
.page .top {
    background-color: #fff;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.page .top img,
.page .top p {
    margin: 0 !important;
    padding: 0 !important;
}