@charset "utf-8";
/* CSS Document */

/*
Theme Name: azlinks
Description: Habakiri の子テーマです ( テーマの説明 )
Author: AZLinks ( 作者名 )
Version: 1.0.0
License: GNU General Public License
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Template: habakiri
*/

html {margin-top: 0 !important;}
/* ヘッダー部分装飾　*/
body {
    font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
    font-size: 16px;
    line-height: 1.9;
    color: #333;
    background-color: #fff;
}

#main{
	margin-bottom: 0;
}
/*
img:hover {
opacity: 0.6;
filter: alpha(opacity=60);
-moz-opacity:0.6;
}*/

video{
	width: 100%;
}
a:hover img{
    opacity:0.6;
    -moz-opacity:0.6;
    filter:alpha(opacity = 60);
}

.header {
  /*  background-image: url(img/header-border.jpg);*/
}
.header-contents {
	text-align: center;
}

.habakiri-slider__item-content {
    color: #fff;
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    font-size: 30px;
    font-weight: bold;
	text-shadow: -1px -2px 3px #808080;
}

/*仮で削除
.head-logo{
	margin-left: 10%;
	max-width: 50%;
	margin-bottom: 10px;
	margin-top: 10px;
}

/*SP表示
@media (max-width: 767px) {
	.head-logo{
	margin: 0 auto;
	max-width: 50%;
	margin-bottom: 10px;
	margin-top: 10px;
}
}
ここまで仮で削除*/

/*ヘッダームービー PC*/
.header-contents{
	position: relative;
	width: 100%;
	height: calc(100vh - 100px);
}
.header-contents .video{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow: hidden;
}
.header-contents .video video{
	position: absolute;
	top: 50%;
	left: 50%;
	object-fit: cover;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
}
.header-contents .inner{	
	display: flex;
	position: relative;
	z-index: 5; /* ←z-indexの指定 */
	height: 100%;
	justify-content: center;
	align-items: center;
}
.header-contents .inner .copyBox{
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 10%;
	text-align: left;
	line-height: normal;
}
.header-contents .inner .copyBox p{
	font-size: 80px;
	font-weight: bold;
	color: #fff;
	mix-blend-mode: difference;
}
.header-contents .inner .copyBox p span{
	font-size:0.6em;
	display: block;
}


/*ヘッダームービー SP*/
.header-contents-sp{
	position: relative;
	width: 100%;
	height: calc(100vh - 100px);
}
.header-contents-sp .video{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow: hidden;
}
.header-contents-sp .video video{
	position: absolute;
	top: 50%;
	left: 50%;
	object-fit: cover;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
}
.header-contents-sp .inner{	
	display: flex;
	position: relative;
	z-index: 5; /* ←z-indexの指定 */
	height: 100%;
	justify-content: center;
	align-items: center;
}
.header-contents-sp .inner .copyBox{
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 10%;
	text-align: left;
	line-height: normal;
}
.header-contents-sp .inner .copyBox p{
	font-size: 12vw;
	font-weight: bold;
	color: #fff;
	mix-blend-mode: difference;
}
.header-contents-sp .inner .copyBox p span{
	font-size:6vw;
	display: block;
}



/*ヘッダーメニュー＆ロゴ*/
/*ロゴの大きさを調整*/
#logo img {
  max-width:50%;
}
 
nav{
 width: 100%;
 height: 70px;
 position: relative;
 background: #F6F6F6;
}
 
.drawer{
 display: flex;
 flex-direction: row;
 align-items: center;
 justify-content: space-between;
 position: relative;
 height: 70px;
 padding: 0 1em;
}
 
/*ナビゲーション部分*/
.menu ul{
	list-style: none;
	padding-left: 0;
}
 
.menu ul li a {
display:block;
  font-weight:400;
padding: 1.2em;
border-bottom: 1px dotted #CCC;
  color:#333;
  text-decoration:none;
}
 
 
.menu ul li a:hover
{background-color:rgba(0,0,0,0.5);
color:navy;}
 
 
.menu{
	position: absolute;
 z-index: 20;
  text-align:left;
	width: 100%;
  background-color:rgba(255,255,255,0.95);
  transition: 0.5s ease;/*滑らかに表示*/
  -webkit-transform: translateX(100%);/*画面より100%外へ押し出し非表示にさせる*/
 
/*  transform: translateX(-100%);/*右から出す場合は、マイナス100%としてください*/
}

/*メニューリストスタイル*/
.menu-arrow{
	clear: both;
	color: #0858A6;
	font-size: 0.6em;
    vertical-align: middle;
    margin-right: 1em;
}

 
/*OPEN時の動き*/
.menu.open {
 -webkit-transform: translateX(0%);
 transform: translateX(0%);/*メニューを元の位置へ戻す*/
 
}
 
/*トグルボタンのスタイルを指定*/
.Toggle {
    display: block;
    position: absolute;    /* bodyに対しての絶対位置指定 */
    width: 42px;
    height: 42px;
    cursor: pointer;
    z-index: 10;
  right:15px;
}
 
.Toggle span {
    display: block;
    position: absolute;
    width: 35px;
    border-bottom: solid 2px #333;
    -webkit-transition: .35s ease-in-out;	/*変化の速度を指定*/
    -moz-transition: .35s ease-in-out;		/*変化の速度を指定*/
    transition: .35s ease-in-out;			/*変化の速度を指定*/
 
}
 /*各ボーダー少しずつずらす*/
.Toggle span:nth-child(1) {
    top:8px;
}
 .Toggle span:nth-child(2) {
    top: 18px;
}
 .Toggle span:nth-child(3) {
    top: 28px;
}
.Toggle.active span:nth-child(1) {
    top: 18px;
/* 1番目のspanをマイナス45度に */
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
 
/* 2番目と3番目のspanを45度に */
.Toggle.active span:nth-child(2),
.Toggle.active span:nth-child(3) {
    top: 18px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}
 
/*----------------------------------ここからPCモニターの記述-----------*/
@media screen and (min-width: 600px) {
 
/*ロゴの大きさを調整*/
#logo img{max-width:250px;}	
	
nav{
 display: flex;
}
 
.Toggle{
 display: none;
}
.menu{
width: 100%;
font-size:0.9em;
background-color: transparent;
margin:0 10px;
-webkit-transform: translateX(0);
transform: translateX(0);
}
.menu ul{
 height: 70px;
 display: flex;
 flex-wrap: wrap;
 justify-content: flex-end;
 align-items: center;
}
	
.menu ul li{
  line-height: 1.5;
  padding: 0.5em 0;
 list-style-type: none!important;
	}	

	
.menu ul li a{
 padding: 0 1em;
 border-bottom: none;
}
.menu ul li a:hover{
background-color:transparent;
}
	
.menu ul li a:after {
  font-family: "FontAwesome";
  content: "\f0da";
  position: absolute;
  left : 1em; /*左端からのアイコンまで*/
  color: navy; /*アイコン色*/
}
}


/*トップページコンセプトボタン*ここから*/

.cont-box-area{
	margin: 15px 0;
}
.cont-box{
	margin: 5px 0;
	
}

.cont-box-inner{
	border-radius: 8px; /* 左上・右上・右下・左下 */
	background-size: cover;
	background-color: #0858A6;
	text-align: center;
	color: #fff;
	padding: 30px 5px;
}

.cont-box-inner-wht{
	border-radius: 8px; /* 左上・右上・右下・左下 */
	background-size: cover;
	background-color: #fff;
	text-align: center;
	color: #0858A6;
	padding: 15px 5px;
}

.cont-box-inner01{
	border-radius: 8px; /* 左上・右上・右下・左下 */
	background-image: url(img/box-inr-bg01.jpg) ;
	background-size: cover;
	background-color: #0858A6;
	text-align: center;
	color: #fff;
	padding: 30px 5px;
}


.cont-box-inner02{
	border-radius: 8px; /* 左上・右上・右下・左下 */
	background-image: url(img/box-inr-bg02.jpg) ;
	background-size: cover;
	background-color: #0858A6;
	text-align: center;
	color: #fff;
	padding: 30px 5px;
}

.cont-box-inner03{
	border-radius: 8px; /* 左上・右上・右下・左下 */
	background-image: url(img/box-inr-bg03.jpg) ;
	background-size: cover;
	background-color: #0858A6;
	text-align: center;
	color: #fff;
	padding: 30px 5px;
}

/*ボタン装飾*/
a.btn-box-inner{
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	font-size: 0.7em;
	width: 85%;
	margin: 20px auto;
	padding: 1rem 4rem;
	border-radius: 100vw;
	color: #000;
	background: #fff;
}
a.btn-box-inner:hover {
	background-position: right center;
	background-size: 200% auto;
	-webkit-animation: pulse 2s infinite;
	animation: shad26 1.5s infinite;
	color: #1B1B1B;
}
@keyframes shad26 {
	0% {box-shadow: 0 0 0 0 #27acd9;}
	70% {box-shadow: 0 0 0 10px rgb(39 172 217 / 0%);}
	100% {box-shadow: 0 0 0 0 rgb(39 172 217 / 0%);}
}


a.btn-box-inner-wht{
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	font-size: 0.8em;
	width: 85%;
	margin: 20px auto;
	padding: 1rem 4rem;
	border-radius: 100vw;
	color: #fff;
	background: #0858A6;
}
a.btn-box-inner-wht:hover {
	background-position: right center;
	background-size: 200% auto;
	-webkit-animation: pulse 2s infinite;
	animation: shad26 1.5s infinite;
	color: #1B1B1B;
}
@keyframes shad26 {
	0% {box-shadow: 0 0 0 0 #27acd9;}
	70% {box-shadow: 0 0 0 10px rgb(39 172 217 / 0%);}
	100% {box-shadow: 0 0 0 0 rgb(39 172 217 / 0%);}
}


/*ボタン装飾ここまで*/

/*トップページコンセプトボタン*ここまで*/


/* メインコンテンツ部分装飾　*/

.top-concept{
	margin: 30px 0;
	padding-top: 40px;
}

.title-cont {
    text-align: center;
	clear: both;
    padding: 0.2rem;
	margin: 0 0 2rem;
    font-weight: bold;
    font-size: 32px;
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
}

h2 span {
    background: linear-gradient(transparent 70%, #16b5dd 60%);
	padding: 5px;
}

h3 span {
    background: linear-gradient(transparent 95%, #16b5dd 60%);
    padding: 3px 0;
}
/*　メインコンテンツ画像PC/SP切り替え　*/

/*SP表示*/
@media (max-width: 767px) {
	.hidden-xs{
		display: none;
	}
	.hidden-sm{
		display: none;
	}
	
/*	ボタン*/
	.btn-contact-lrg{
	color: #fff;
    background-color: #e73743;
    border-color: #e73743;
    font-size: 18px;
	font-weight: 600;
    padding: 20px 0;
    width: 90%;
    margin: 0 auto;
}
	
/*各ページヘッダー部分*/
	.header-contents{
		display: none;
	}
	
/*トップページコンセプト*/
.top-concept-title{
	font-size: 1.3em;
}
	
	
}
/*PC表示*/
@media (min-width: 768px) {
	.hidden-md{
		display: none;
	}
	.hidden-lg{
		display: none;
	}
	
	/*	ボタン*/
	.btn-contact-lrg{
	color: #fff;
    background-color: #e73743;
    border-color: #e73743;
    font-size: x-large;
	font-weight: 600;
    padding: 20px 0;
    width: 60%;
    margin: 0 auto;
}	
	
	
/*各ページヘッダー部分*/
	.header-contents-sp{
		display: none;
	}
}

/*トップページサービス紹介*/

.top-service{
	background-image: url(img/bg-service.jpg) ;
	background-size: cover;
	background-color: #0858A6;
	
}

.top-service-inner{
	margin: 0 auto;
	padding: 2em 0.5em;
width:  83.33333%;
	color: #fff;
}

.top-service-inner h2{
	text-align: center;
	margin-bottom: 1.5em;
	
}

.top-service-inner h2 span {
    background: linear-gradient(transparent 95%, #fff 100%);
	padding: 10px 0px;
}
/*トップページサービス紹介ここまで*/


.top-link{
	margin: 2em 0;
	background: #0458A5;
}

.top-link-inner{
	margin: 0 auto;
	padding: 4em 0.5em;
width:  83.33333%;
	color: #fff;
}

/* コンテンツボタン */

	.btn-content-green{
	color: #fff;
    background-color: #7fcac3;
    border-color: #7fcac3;
    font-size: 18px;
	font-weight: 600;
    padding: 20px 0;
    width: 100%;
    margin: 0 auto;
}
	.btn-content-red{
	color: #fff;
    background-color: #e73743;
    border-color: #e73743;
    font-size: 18px;
	font-weight: 600;
    padding: 20px 0;
    width: 100%;
    margin: 0 auto;
}
	.btn-content-purple{
	color: #fff;
    background-color: #9475cc;
    border-color: #9475cc;
    font-size: 18px;
	font-weight: 600;
    padding: 20px 0;
    width: 100%;
    margin: 0 auto;
}
	.btn-content-orange{
	color: #fff;
    background-color: #ffb74e;
    border-color: #ffb74e;
    font-size: 18px;
	font-weight: 600;
    padding: 20px 0;
    width: 100%;
    margin: 0 auto;
}
	.btn-content-blue{
	color: #fff;
    background-color: #1a76d2;
    border-color: #1a76d2;
    font-size: 18px;
	font-weight: 600;
    padding: 20px 0;
    width: 100%;
    margin: 0 auto;
}


/*トップページ新着情報*/
.newsbox{
	color: #000;
}

.newsbox h2{
	text-align: center;
	margin-bottom: 1.5em;
}

.newsbox h2 span {
    background: linear-gradient(transparent 95%, #000 100%);
	padding: 10px 0px;
}
/*トップページ新着情報 ここまで*/


/* フッター部分装飾　*/

.widget_nav_menu ul li{
	padding: 0 !important;
}

.footer-widget{
	margin-bottom: 40px;
}

.footer {
	color: #FFFFFF;
	font-size: 0.8em;
}

.footer h3{
	background-image:none;
	padding: 0;
    line-height: 40px;
}

.footer a{
	color: lightgray;
	text-decoration: underline;
}


.footer-cont{
	padding: 20px 0 25px;
	max-width: 83.3333%;
	margin: 0 auto;
	line-height: normal;
}

.footer-cont ul{
	padding-left: 0;
	line-height: 1.8em;
}

.footer-cont li{
	list-style: none;
}

.footer-cont li a{
	text-decoration: none;
}

.footer-sns{
	padding: 5px 0;
}

.footer-sns img{
	padding: 15px;
}

.footer-widget-area {
    padding: 60px 0 25px;
    font-weight: 600;
}

.copyright {
    background: none;
    color: #fff;
    padding: 15px 0;
    text-align: center;
    border-top: solid thin;
}

@media screen and (min-width: 768px){
	.footer-suponcer-sp{
		display: none;
}
}

@media screen and (max-width: 768px){
	.footer-suponcer{
		display: none;}
}

/*運営会社概要テーブル*/
table {
  margin: 20px auto;
}
.tbl-r02{
	width: 100%;
}
.tbl-r02 th {
  background: #e2e2e2;
  border: solid 1px #fff;
  color: #000;
  padding: 10px;
	font-weight: normal;
}
.tbl-r02 td {
　border: solid 1px #000;
  padding: 10px;
}
 
@media screen and (max-width: 640px) {
  .last td:last-child {
    border-bottom: solid 1px #ccc;
    width: 100%;
  }
  .tbl-r02 {
    width: 100%;
  }
  .tbl-r02 th,
  .tbl-r02 td {
　　border-bottom: none;
    display: block;
    width: 100%;
  }
}

/*特定商取引法テーブル*/
table {
  margin: 20px auto;
}
.tbl-r03{
	width: 100%;
}
.tbl-r03 th {
  background: #e2e2e2;
  border: solid 1px #fff;
  color: #000;
  padding:15px 10px;
	font-weight: normal;
	width: 25%;
    font-size: 0.8em;
    text-align: center;
}
.tbl-r03 td {
　border: solid 1px #000;
  padding: 15px 10px;
}
 
@media screen and (max-width: 640px) {
  .last td:last-child {
    border-bottom: solid 1px #ccc;
    width: 100%;
  }
  .tbl-r03 {
    width: 100%;
  }
  .tbl-r03 th,
  .tbl-r03 td {
　　border-bottom: none;
    display: block;
    width: 100%;
  }
}


/*コンテンツページ*/
.sub-page-contents{
	padding-top: 0;
}

/*コンテンツ スタイル*/
.cont-full-bg01{
	margin: 30px 0;
	background:#E2E2E2;
}

.cont-full-inner{
	width: 83.333%;
	margin: 0 auto;
	padding: 30px 15px;
}


.underbar{
    background: linear-gradient(transparent 65%, #F9E000 0%);
	padding: 1px 0px;
}


/*パンくずリスト*/
.breadcrumbs{
    width: 83.333%;
    margin: 0 auto;
    padding: 10px 0;
}

/*料金・エリアページ*/
.box-aqua{
	background-image: url(img/bg-aqua.jpg) ;
	background-size: cover;
	background-color: #0858A6;	
}

.box-aqua-cont{
	background: #FFFFFF;
	color: #000;
	padding: 20px 0 ;
	border-radius: 8px;
}

.box-aqua-cont ul{
	padding-left: 15px;	
}
	
.box-aqua-inner{
	margin: 0 auto;
	padding: 2em 0.5em;
width:  83.33333%;
	color: #fff;
}

.box-aqua-inner h3{
	text-align: center;
	margin-bottom: 1.5em;
}

.box-aqua h3 span {
    background: linear-gradient(transparent 95%, #fff 100%);
	padding: 10px 0px;
}