@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;
	max-width: 1300px;
	margin: 0 auto;
}

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

video{
	width: 100%;
}
a:hover {
    opacity:0.6;
    -moz-opacity:0.6;
    filter:alpha(opacity = 60);
}
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(60vh - 100px);
	text-align: left;
}
.header-contents .video{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow: hidden;
}
.header-contents .video img{
	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:baseline;
	padding: 0 45% 0 5% ;
	text-align: left;
	line-height: normal;
	font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
	color: #fff;
}
.header-contents .inner .copyBox h2{
	font-size: 4em;
	line-height: 1em;
}
.header-contents .inner .copyBox p{
	font-size: 16px;
	margin: 0.5em 0 1.5em;
	font-weight: 300;
}
.header-contents .inner .copyBox p span{
	font-size:1em;
}



/*パーツ紹介ヘッダー*/

.header-content-parts{
	height: 253px;
	background-image: url(img/head-parts.jpg);
	margin: 0 auto;
	padding: 0 0 0 5% ;
	text-align: left;
	line-height: normal;
	font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
	color: #fff;
}

 .header-content-parts .inner{	
	display: flex;
	position: relative;
	z-index: 5; /* ←z-indexの指定 */
	height: 100%;
	align-items: center;
}


.header-content-usedcar{
	height: 253px;
	background-image: url(img/head-usedcar.jpg);
	margin: 0 auto;
	padding: 0 0 0 5% ;
	text-align: left;
	line-height: normal;
	font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
	color: #fff;
}

 .header-content-usedcar .inner{	
	display: flex;
	position: relative;
	z-index: 5; /* ←z-indexの指定 */
	height: 100%;
	align-items: center;
}

h1.heading-contents{
	font-size: 6vw;
}


/*ヘッダームービー SP*/
.header-contents-sp{
	position: relative;
	width: 100%;
	height: calc(40vh - 100px);
}
.header-contents-sp .video{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow: hidden;
}
.header-contents-sp .video img{
	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%;
	align-items: center;
}
.header-contents-sp .inner .copyBox{
	display: flex;
	flex-direction: column;
	align-items:baseline;
	padding: 0 0 0 5% ;
	text-align: left;
	line-height: normal;
	font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
	color: #fff;
}
.header-contents-sp .inner .copyBox h2{
	font-size: 9vw;
	line-height: 1em;
}
.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;
}

.header-contents-desc-sp{
	background-color: #000;
	color: #fff;
	font-size: 1em;
	padding: 5%;
}

/*ヘッダーメニュー＆ロゴ*/
/*ロゴの大きさを調整*/
#logo img {
  max-width:50%;
}
 
nav{
 width: 100%;
 height: 70px;
 position: relative;
}
 
.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: #EFE121;
	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: 2000px) {
 
/*ロゴの大きさを調整*/
#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{
	padding: 3em;
	background-color: #fff;
}
.cont-box-area-blk{
	padding: 3em;
	background-color: #000;
}

.cont-box-inner img{
	margin: 2em 0 ;
}
.box-title{
	font-size:min(2.5vw,33px);
	font-weight: 700;
}
.cont-box{
	margin: 5px 0;
}

.box-desc{
	font-size: 12px;
	line-height: 3em;
}

.cont-box-inner{
	border-radius: 8px; /* 左上・右上・右下・左下 */
	background-size: cover;
	text-align: left;
	color: #fff;
	padding: 20px 5px;
	line-height: 1.5em;
}

.cont-box-inner a{
	text-decoration: none;
	color: #fff;
}

/*おすすめ商品*/
.recommended-item{
	line-height: 1.2em;
}
.recommended-item a{
	text-decoration: none;
	color: #fff;
}

.recommended-item img{
	margin-bottom: 1em;
}

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

.cont-box-inner01{
	border-radius: 8px; /* 左上・右上・右下・左下 */
	background-image: url(img/box-inr-bg01.jpg) ;
	background-size: cover;
	background-color: #EFE121;
	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: #EFE121;
	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: #EFE121;
	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: #EFE121;
}
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%);}
}

/*SP表示*/
@media (max-width: 767px) {
.box-title{
	font-size:6.5vw;
}
}



/*スポンサーエリア*/

.cont-box-area-sponcer{
	padding: 1em;
	background-color: #E8E8E8;
}

.cont-box-area-sponcer img{
	margin-bottom: 1em;
}

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

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


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

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

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

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

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

h3 span {
    background: linear-gradient(transparent 95%, #EFE121 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;
	}
	.header-contents-desc-sp{
		display: none;
	}
}

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

.top-service{
	background-image: url(img/bg-service.jpg) ;
	background-size: cover;
	background-color: #EFE121;
	font-size: 1.1em;
	line-height: 2. 4em;
	margin: 5em 0;
}

.top-service-inner{
	margin: 0 auto;
	padding: 2em 0.5em;
width:  93.33333%;max-width: 1100px;
	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;
}
/*トップページサービス紹介ここまで*/

/*トップページ おすすめ商品*/
.recommended{
	background-image: url(img/) ;
	background-size: cover;
	background-color: #1D2088;
	color: #fff;
}
.touka{
  background-color: rgba(255, 255, 255, 0.85);
}


/*トップページ農場*/


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

.top-link-inner{
	margin: 0 auto;
	padding: 4em 0.5em;
width:  93.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;
}
	.btn-content-bage{
	color: #fff;
    background-color: #E4E3D6;
    border-color: #E4E3D6;
    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%, #EFE121 100%);
	padding: 10px 0px;
}
/*トップページ新着情報 ここまで*/


/* フッター部分装飾　*/
.footer{
	background-color: #1D2088 !important;
	color: #fff !important;
    border-top: 8px solid #EFE121;
}

img.logo-footer {
	width: 300px;
}

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

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

.footer {
	font-size: 0.8em;
}

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

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


.footer-cont{
	padding: 20px 0 25px;
	max-width: 93.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: #E4E3D6;
  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.9em;
    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%;
  }
}


/*コンテンツページ*/
.header-content-normal{
	margin: 0 auto;
	text-align: center;
}
.sub-page-contents{
	padding-top: 0;
	max-width: 1100px;
	margin: 0 auto;
}

/* 見出しの下に短い下線 */
.heading {
  position: relative;
  text-align: center; /* 文字の中央寄せ */
    font-size: 28px;
	margin-bottom: 40px;
}
.heading::before {
  background-color: #EFE121; /* 線の色 */
  border-radius: 5px; /* 線の両端を丸く */
  bottom: -10px; /* 線の位置 */
  content: "";
  height: 3px; /* 線の高さ */
  left: 50%; /* 線の中央寄せ */
  position: absolute;
  transform: translateX(-50%); /* 線の中央寄せ */
  width: 100px; /* 線の長さ */
}


.heading-2 {
  position: relative;
  text-align: center; /* 文字の中央寄せ */
    font-size: 28px;
	margin-bottom: 40px;
	font-weight: 400;
}
.heading-2::before {
  background-color: #EFE121; /* 線の色 */
  border-radius: 5px; /* 線の両端を丸く */
  bottom: -10px; /* 線の位置 */
  content: "";
  height: 3px; /* 線の高さ */
  left: 50%; /* 線の中央寄せ */
  position: absolute;
  transform: translateX(-50%); /* 線の中央寄せ */
  width: 100px; /* 線の長さ */
}



.heading-2wt {
  position: relative;
  text-align: center; /* 文字の中央寄せ */
    font-size: 28px;
	margin-bottom: 40px;
}
.heading-2wt::before {
  background-color: #fff; /* 線の色 */
  border-radius: 5px; /* 線の両端を丸く */
  bottom: -10px; /* 線の位置 */
  content: "";
  height: 3px; /* 線の高さ */
  left: 50%; /* 線の中央寄せ */
  position: absolute;
  transform: translateX(-50%); /* 線の中央寄せ */
  width: 100px; /* 線の長さ */
}


.heading-3 {
  position: relative;
  text-align: center; /* 文字の中央寄せ */
    font-size: 22px;
	margin: 50px 0 30px;
}
.heading-3::before {
  background-color: #EFE121; /* 線の色 */
  border-radius: 5px; /* 線の両端を丸く */
  bottom: -10px; /* 線の位置 */
  content: "";
  height: 1px; /* 線の高さ */
  left: 50%; /* 線の中央寄せ */
  position: absolute;
  transform: translateX(-50%); /* 線の中央寄せ */
  width: 100px; /* 線の長さ */
}


.heading-3wt {
  position: relative;
  text-align: center; /* 文字の中央寄せ */
    font-size: 22px;
	margin: 50px 0 30px;
}
.heading-3wt::before {
  background-color: #FFF; /* 線の色 */
  border-radius: 5px; /* 線の両端を丸く */
  bottom: -10px; /* 線の位置 */
  content: "";
  height: 1px; /* 線の高さ */
  left: 50%; /* 線の中央寄せ */
  position: absolute;
  transform: translateX(-50%); /* 線の中央寄せ */
  width: 100px; /* 線の長さ */
}



.mb-1{
	margin-bottom: 1rem;
}
.mb-2{
	margin-bottom: 2rem;
}
.mb-3{
	margin-bottom: 3rem;
}

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

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


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

/*画像装飾 角丸*/
.img-radius-small{
	border-radius: 10px;
}

/*段落余白*/
.space-large{
	margin-top: 70px;
}

.company-info{
	
	font-size: 0.9em;
}
.googlemap{
	margin: 20px auto;
}



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


.page-header {
    background-color: #1D2088 !important;
	color: #fff;
}


.box-border{
	border: solid 1px #EFE121;
    padding: 10px;
	margin: 1em 0;
	font-size: 0.8em;
}



.box-border-wt{
	border: solid 1px #fff;
    padding: 10px;
	margin: 1em 0;
	font-size: 1.0em;
}

.box-border-left{
	border-left: solid 2px #EFE121;
    padding-left: 10px;
	margin: 1em 0;
}

.scrollbox{
	width: 100%;
  height: 150px;               /* 横幅を200pxに指定 */
  border: 1px solid #000;      /* わかりやすくボーダーを引く */
  overflow-y: scroll;          /* 縦方向にスクロール可能にする */
	font-size: 0.8em;
	margin-bottom: 2em;
}

/*==================================================
ふわっ
===================================*/


/* fadeUp */

.fadeUp{
animation-name:fadeUpAnime;
animation-duration:1.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}


/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.fadeUpTrigger{
    opacity: 0;
}

/*==================================================
ふわっ
===================================*/

/* その場で */
.fadeIn{
animation-name:fadeInAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* 下から */

.fadeUp{
animation-name:fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/* 上から */

.fadeDown{
animation-name:fadeDownAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeDownAnime{
  from {
    opacity: 0;
  transform: translateY(-100px);
  }

  to {
    opacity: 1;
  transform: translateY(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);
  }
}

/* 右から */

.fadeRight{
animation-name:fadeRightAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeRightAnime{
  from {
    opacity: 0;
  transform: translateX(100px);
  }

  to {
    opacity: 1;
  transform: translateX(0);
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.fadeInTrigger,
.fadeUpTrigger,
.fadeDownTrigger,
.fadeLeftTrigger,
.fadeRightTrigger{
    opacity: 0;
}

/*==================================================
パタッ
===================================*/


/* 下へ */
.flipDown{
animation-name:flipDownAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes flipDownAnime{
  from {
    transform: perspective(2500px) rotateX(100deg);
  opacity: 0;
  }

  to {
    transform: perspective(2500px) rotateX(0);
  opacity: 1;
  }
}


/* 左へ */
.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;
  }
}


/* 左上へ */
.flipLeftTop{
animation-name:flipLeftTopAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes flipLeftTopAnime{
  from {
   transform: translate(-20px,80px) rotate(-15deg);
  opacity: 0;
  }

  to {
   transform: translate(0,0) rotate(0deg);
  opacity: 1;
  }
}

/* 右へ */
.flipRight{
animation-name:flipRightAnime;
animation-duration:1s;
animation-fill-mode:forwards;
perspective-origin:right center;
opacity:0;
}

@keyframes flipRightAnime{
  from {
   transform: perspective(600px) translate3d(0, 0, 0) rotateY(-30deg);
  opacity: 0;
  }

  to {
  transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
  opacity: 1;
  }
}

/* 右上へ */
.flipRightTop{
animation-name:flipRightTopAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes flipRightTopAnime{
  from {
   transform: translate(-20px,80px) rotate(25deg);
   opacity: 0;
  }

  to {
   transform: translate(0,1) rotate(0deg);
  opacity: 1;
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.flipDownTrigger,
.flipLeftTrigger,
.flipLeftTopTrigger,
.flipRightTrigger,
.flipRightTopTrigger{
    opacity: 0;
}

/*==================================================
くるっ
===================================*/


/* X 軸（縦へ） */
.rotateX{
  animation-name:rotateXAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
}

@keyframes rotateXAnime{
  from{
    transform: rotateX(0);
    opacity: 0;
    }
  to{
    transform: rotateX(-360deg);
    opacity: 1;
    }
}

/*　Y軸（横へ） */
.rotateY{
  animation-name:rotateYAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
}

@keyframes rotateYAnime{
  from{
    transform: rotateY(0);
    opacity: 0;
    }
  to{
    transform: rotateY(-360deg);
    opacity: 1;
    }
}

/* Z 軸（左へ） */
.rotateLeftZ{
  animation-name:rotateLeftZAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
}

@keyframes rotateLeftZAnime{
  from{
    transform: rotateZ(0);
    opacity: 0;
    }
  to{
    transform: rotateZ(-360deg);
    opacity: 1;
    }
}

/*　Z 軸（右へ） */
.rotateRightZ{
  animation-name:rotateRightZAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
}

@keyframes rotateRightZAnime{
  from{
    transform: rotateZ(0);
    opacity: 0;
    }
  to{
    transform: rotateZ(360deg);
    opacity: 1;
    }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.rotateXTrigger,
.rotateYTrigger,
.rotateLeftZTrigger,
.rotateRightZTrigger{
    opacity: 0;
}

/*==================================================
ボンッ、ヒュッ
===================================*/

/* 拡大 */
.zoomIn{
  animation-name:zoomInAnime;
  animation-duration:0.5s;
  animation-fill-mode:forwards;
}

@keyframes zoomInAnime{
  from {
  transform: scale(0.6);
  opacity: 0;
  }

  to {
    transform: scale(1);
  opacity: 1;
  }
}

/* 縮小 */
.zoomOut{
  animation-name:zoomOutAnime;
  animation-duration:0.5s;
  animation-fill-mode:forwards;
}

@keyframes zoomOutAnime{
  from {
  transform: scale(1.2);
  opacity: 0;
  }

  to {
    transform:scale(1);
  opacity: 1;
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.zoomInTrigger,
.zoomOutTrigger{
    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;
}

/*==================================================
にゅーん
===================================*/

/* 滑らかに変形して出現 */
.smooth{
  animation-name:smoothAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
  　transform-origin: left;
  opacity:0;
}

@keyframes smoothAnime{
  from {
  transform: translate3d(0, 100%, 0) skewY(12deg);
  opacity:0;
  }

  to {
  transform: translate3d(0, 0, 0) skewY(0);
  opacity:1;
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.smoothTrigger{
    opacity: 0;
}

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

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

.lineTrigger{
  position: relative; /* 枠線が書かれる基点*/
  opacity:0;
}

.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:1px;
  background:#333;/* 枠線の色*/
}

/*左右線*/
.line2::before,
.line2::after{
  position: absolute;
  content:"";
  width: 1px;
  height:0;
  background:#333;/* 枠線の色*/
}

/*上線*/
.lineTrigger::before {
  top:0;
  left:0;
}

.lineTrigger.lineanime::before {
  animation: lineAnime .5s linear 0s forwards;/*表示されて0秒後に上線が0.5秒かけて表示*/
}

/*右線*/
.line2::before{ 
  top:0;
  right:0;
}

.lineTrigger.lineanime .line2::before {
  animation: lineAnime2 .5s linear .5s forwards;/*表示されて0.5秒後に右線が0.5秒かけて表示*/
}

/*下線*/
.lineTrigger::after { 
  bottom:0;
  right:0;
}

.lineTrigger.lineanime::after {
  animation: lineAnime .5s linear 1s forwards;/*表示されて1秒後に下線が0.5秒かけて表示*/
}

/*左線*/
.line2::after{ 
  bottom:0;
  left:0;
}

.lineTrigger.lineanime .line2::after {
  animation: lineAnime2 .5s linear 1.5s 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.5s 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;
}
}

/*左から*/
.bgLRextend::before{
  animation-name:bgLRextendAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #666;/*伸びる背景色の設定*/
}
@keyframes bgLRextendAnime{
  0% {
    transform-origin:left;
    transform:scaleX(0);
  }
  50% {
    transform-origin:left;
    transform:scaleX(1);
  }
  50.001% {
    transform-origin:right;
  }
  100% {
    transform-origin:right;
    transform:scaleX(0);
  }
}

/*右から*/
.bgRLextend::before{
  animation-name:bgRLextendAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #666;/*伸びる背景色の設定*/
}
@keyframes bgRLextendAnime{
  0% {
    transform-origin:right;
    transform:scaleX(0);
  }
  50% {
    transform-origin:right;
    transform:scaleX(1);
  }
  50.001% {
    transform-origin:left;
  }
  100% {
    transform-origin:left;
    transform:scaleX(0);
  }
}

/*下から*/
.bgDUextend::before{
  animation-name:bgDUextendAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #666;/*伸びる背景色の設定*/
}
@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);
  }
}

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

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.bgappearTrigger,
.bgUDextendTrigger,
.bgDUextendTrigger,
.bgRLextendTrigger,
.bgLRextendTrigger{
    opacity: 0;
}


/*========= レイアウトのためのCSS ===============*/

.wrapper{
  overflow: hidden;
}

.flex{
  display:flex;
  flex-wrap: wrap;
}

.box{
  width: 220px;
  padding: 20px;
    margin: 0 20px 20px 20px;
  background: #666;
  color: #fff;
  box-sizing:border-box;
}

.bgextend,
.lineTrigger{
  width: 220px;
  padding: 20px;
    margin: 0 20px 20px 20px;
  box-sizing:border-box;
}



/*==================================================
アニメーション設定
===================================*/

/* アニメーションの回数を決めるCSS*/

.count2{  
  animation-iteration-count: 2;/*この数字を必要回数分に変更*/
}

.countinfinite{  
  animation-iteration-count: infinite;/*無限ループ*/
}

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

.delay-time05{  
  animation-delay: 0.5s;
}

.delay-time1{  
  animation-delay: 1s;
}

.delay-time15{  
  animation-delay: 1.5s;
}

.delay-time2{  
  animation-delay: 2s;
}

.delay-time25{  
  animation-delay: 2.5s;
}

/* アニメーション自体が変化する時間を決めるCSS*/

.change-time05{  
  animation-duration: 0.5s;
}

.change-time1{  
  animation-duration: 1s;
}

.change-time15{  
  animation-duration: 1.5s;
}

.change-time2{  
  animation-duration: 2s;
}

.change-time25{  
  animation-duration: 2.5s;
}