@charset "utf-8";
/*
theme Name: HMIホームページリニューアル
Author: 八木
Description: original theme
version： 1.0.0
*/


/* 基本設定： ページ全体 */

* {-webkit-box-sizing: border-box;
   -ms-box-sizing: border-box;
   -moz-box-sizing: border-box;
   -o-box-sizing: border-box;
   box-sizing: border-box;
  }

body {
	margin: 0;
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
	font-weight: 500;
	font-size: 19px;
	line-height:160%;
	color:#111;
	overflow-wrap: break-word;
}

.BeigeArea {background-color:#eee5d1;/*ベージュ*/}

a {color:#111;}

header {
	width: 100%;
	height: auto;
	z-index: 3;
	background-color: #002239;/*#0b162c*/
	}

.header-inner {
	width: 100%;
	max-width: 1500px;
	height: auto;
	margin: 0 auto;
	text-align:left;
	}
	
.header-inner img {
	max-width: 250px;
	margin: 30px 0 20px 20px;
	line-height: 30px;
	}
	
.basicBox { display:none;}

img[src$=".svg"] {
    width: 100%;
}

.imgWrap {
	overflow: hidden;	/*拡大時にはみ出た部分を隠す*/
}
.imgWrap img.bg {
	display: block;
	transition-duration: 1s;	/*c変化に掛かる時間*/
	height: 100%;
	object-fit: cover;
}
.imgWrap img.bg:hover {
	transform: scale(1.1);	/*画像の拡大率*/
	transition-duration: 1s;	/*変化に掛かる時間*/
}

/* ここからアコーディオン */
/* コンテンツA： リスト */
#listBox {
	/*flex-wrap:wrap;
	align-items: flex-start;*/
	max-width: 1200px;
	margin: 0 auto;
}

.listItem {
	flex: 1;
	margin: 0 0.5px;
	width:100%;
	background-color:#0071be;
}

.listItem:hover { background-color: #17bafa;}

/* アコーディオン　スマホ： メイン */
.acd-check{
    display: none;
}
.acd-label{
	width: 97%;
	margin: 0 auto;
    background: #0071be;
    color: #fff;
    display: block;
    padding: 10px 10px 10px 20px;
    position: relative;
}

.acd-content{
    display: block;
    height: 0;
    opacity: 0;
	width: 97%;
	margin: 0 auto;
    transition: .5s;
    visibility: hidden;
}

.acd-check:checked + .acd-label + .acd-content{
    height: auto;
    opacity: 1;
	width: 97%;
	margin: 0 auto;
    visibility: visible;
}

/* アコーディオン　スマホ： メイン */
.acd-check02 {
    display: none;
}
.acd-label02 {
	width: 97%;
	margin: 25px auto 0;
    color: #fff;
    display: block;
    padding: 10px 10px 10px 20px;
    position: relative;
}

.acd-content02{
    display: block;
    height: 0;
    opacity: 0;
	width: 97%;
	margin: 0 auto;
    transition: .5s;
    visibility: hidden;
}

.acd-check02:checked + .acd-label02 + .acd-content02{
    height: auto;
    opacity: 1;
	width: 90%;
	margin: 0 auto;
    visibility: visible;
}

/* アコーディオン　スマホ： リスト */

.accordion {
	width: 100%;
	display: flex;
	flex-direction:column;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
 }

.accordion .link {
  width:100%;
  cursor: pointer;
  display: block;
  margin-top: -1px;
  padding: 10px 0 10px 25px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  border-top: 1px solid #CCC;
  border-bottom: 1px solid #CCC;
  position: relative;
  -webkit-transition: all 6s ease;/* ？ */
  -o-transition: all 6s ease;/* ？ */
  transition: all 6s ease;/* ？ */
}

.acd-content02 .accordion .link {
  width:100%;
  cursor: pointer;
  display: block;
  margin-top: -1px;
  padding: 10px 0 10px 25px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  border-top: 1px solid #888;
  border-bottom: 1px solid #888;
  position: relative;
  -webkit-transition: all 6s ease;/* ？ */
  -o-transition: all 6s ease;/* ？ */
  transition: all 6s ease;/* ？ */
}

.accordion li:last-child .link {
}

.accordion li i {
  position: absolute;
  top: 18px;
  left: 12px;
  font-size: 18px;
  color: #fff;
  -webkit-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.accordion li i.fa-chevron-down {
  right: 12px;
  left: auto;
  font-size: 16px;
}

.accordion li.open .link {
  color: #fff;
}

.accordion li.open i {
  color: #1a5f9a;
}
.accordion li.open i.fa-chevron-down {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

.accordion li.default .submenu {display: block;}
/**
 * Submenu
 -----------------------------*/
.submenu {
  display: none;
  background: #fff;
  font-size: 14px;
}
 
.submenu dt{
  background: #52ccfc;
  color:#fff;
  padding-left: 5%;
}

.submenu dt.pdpImg{
  padding: 0;
  line-height: 0;
  font-size: 0;
}

.submenu li{
	 border-bottom: 1px #ccc solid;
	 padding: 15px;
}

.submenu {
  text-decoration: none;
  color: #333;
  -webkit-transition: all 10s ease;/* ？ */
  -o-transition: all 10s ease;/* ？ */
  transition: all 10s ease;/* ？ */
}
 
.submenu a {
	padding-bottom:5px;
	line-height: 120%;
	color:#666;
	position: relative;
	display: inline-block;
	transition: .5s;
}
 
.submenu a:after {
  position: absolute;
  bottom: 0;
  left: 50%;
  content: '';
  width: 0;
  height: 2px;
  background-color: #17bafa;
  transition: 0.5s;
  transform: translateX(-50%);
}

.submenu a:hover::after{
  width: 100%;
}
/* アコーディオンここまで */

/* reserveここから */

#reserveBox {
	width: 100px;
    height: 30px;
    margin: 1.5% 1.5% 0 0;
    color: #666;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.8rem;
    line-height: 30px;
    text-align: center;
    position: relative;
    cursor: pointer;
    float: right;
}

.modal-wrapper {
  z-index: 999;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 40px 10px;
  text-align: center
}

.modal-wrapper:not(:target) {
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s, visibility .3s;
}

.modal-wrapper:target {
  opacity: 1;
  visibility: visible;
  transition: opacity .4s, visibility .4s;
}

.modal-wrapper::after {
  display: inline-block;
  height: 100%;
  margin-left: -.05em;
  vertical-align: middle;
  content: ""
}

.modal-wrapper .modal-window {
  box-sizing: border-box;
  display: inline-block;
  z-index: 20;
  position: relative;
  width: 70%;
  max-width: 600px;
  padding: 30px 30px 15px;
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 0 30px rgba(0, 0, 0, .6);
  vertical-align: middle
}

.modal-wrapper .modal-window .modal-content {
  max-height: 80vh;
  overflow-y: auto;
  text-align: left
}

.modal-overlay {
  z-index: 10;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, .8)
}

.modal-wrapper .modal-close {
  z-index: 20;
  position: absolute;
  top: 0;
  right: 0;
  width: 35px;
  color: #999 !important;
  font-size: 20px;
  font-weight: 700;
  line-height: 35px;
  text-align: center;
  text-decoration: none;
  text-indent: 0
}

.modal-wrapper .modal-close:hover {
  color: #333 !important
}

/* reserveここまで */
	
/* グローバルナビ */

#slideMenu-jobListings , #slideMenu-brand , #slideMenu-company , #slideMenu-group , #slideMenu-list , #slideMenu-personnelAffairs , #slideMenu-realEstate , #slideMenu-top , #slideMenu-contact , #slideMenu-privacy , #slideMenu-hmiClub { display: block;}
#gnavi-top , #gnavi-company , #gnavi-brand , #gnavi-list , #gnavi-group , #gnavi-jobListings , #gnavi-personnelAffairs , #gnavi-realEstate , #gnavi-contact , #gnavi-privacy , #gnavi-hmiClub { display: none;}

.headerGnavi {
    position: relative;
    width: 100%;
	margin: 0 auto;
    height: 70px;
	display:flex;
	color:#666;
}

.headerGnavi > li {
    width: 25%;
    height: 70px;
    line-height: 70px;
	text-align:center;
	font-size:90%;
	font-weight:500;
}

.headerGnavi > li a {
    display: block;
	color: #fff;
}

.headerGnavi > li a:hover {
    color: #0071be;
	background: #fff;
}

ul.menu__second-level {
    visibility: hidden;
    opacity: 0;
    z-index: 3;
	line-height: 170%;
	font-size: 90%;
	font-weight:500;
}

ul.menu__third-level {
    visibility: hidden;
    opacity: 0;
}

ul.menu__fourth-level {
    visibility: hidden;
    opacity: 0;
}

.headerGnavi > li:hover {
    color: #0071be;
	background: #0071be;
    -webkit-transition: all .5s;
    transition: all .5s;
}

/* ↓効いてない */
.headerGnavi > li a:active {
    color: #0071be;

}

.list-title {
	width:94%;
	margin: 0 auto;
	padding-bottom: 10px;
	font-size: 110%;
	font-weight: 600;
	margin-bottom: 20px;
	border-bottom:#0071be 2px solid;
}

.menu__second-level li {
	margin-bottom: 20px;
}

.menu__second-level li a:hover {

}

.menu__third-level li a:hover {
    background: #222;
}

.menu__fourth-level li a:hover {
    background: #111;
}

.headerGnavi dl.navPdp {
	margin-top: 40px;
}

/*下線が動く*/
.headerGnavi .menu__second-level a {
	padding-bottom:5px;
	line-height: 150%;
	color:#555;
	}
	
.headerGnavi .menu__second-level a{
  position: relative;
  display: inline-block;
  transition: .3s;
	font-weight:500 ;
}

.headerGnavi .menu__second-level a::after {
  position: absolute;
  bottom: 0;
  left: 50%;
  content: '';
  width: 0;
  height: 2px;
  background-color: #17bafa;
  transition: .3s;
  transform: translateX(-50%);
}

.headerGnavi .menu__second-level a:hover::after{
  width: 100%;
}

/* 下矢印 
.init-bottom:after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    margin: 0 0 0 15px;
    border-right: 1px solid #666;
    border-bottom: 1px solid #666;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}*/

/* floatクリア */
.headerGnavi:before,
.headerGnavi:after {
    content: " ";
    display: table;
}

.headerGnavi:after {
    clear: both;
}

.headerGnavi {
    *zoom: 1;
}

/* mega */

li.menu__mega ul.menu__second-level {
    position: absolute;
    top: 70px;
    left: 0;
    box-sizing: border-box;
    width: 100%;
	margin-top: -1px;
    padding: 40px 2% 20px;
    /*-webkit-transition: all .2s ease;
    transition: all .2s ease;*/
	background-color:#fff;
}

li.menu__mega:hover ul.menu__second-level {
    top: 70px;
    visibility: visible;
    opacity: 1;
	z-index:99;
}

li.menu__mega ul.menu__second-level > li {
    float: left;
    width: 32%;
    border: none;
}

li.menu__mega ul.menu__second-level > li {
    float: left;
    width: 32%;
    border: none;
}

li.menu__mega ul.menu__second-level > li.two {
    float: left;
    width: 48%;
    border: none;
}

li.menu__mega ul.menu__second-level > li:nth-child(3n+2) {
    margin: 0 1%;
}

/* single */

.menu > li.menu__single {
    position: relative;
}

li.menu__single ul.menu__second-level {
	position: absolute;
    top: 70px;
    box-sizing: border-box;
    width: 25%;
    padding: 40px 2% 20px;
    /*-webkit-transition: all .2s ease;
    transition: all .2s ease;*/
	background-color:#fff;
}

li.menu__single:hover ul.menu__second-level {
    top: 70px;
    visibility: visible;
    opacity: 1;
}


/*サイドメニュー*/

.side-open #mainContainer,
.side-open .overlay {
	-webkit-transform: translate3d(-300px, 0, 0);
	transform: translate3d(-300px, 0, 0);
}

.overlay {
	content: '';
	visibility: hidden;
	position: fixed;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0);
	-webkit-transition: all .5s ease;
	transition: all .5s ease;
	z-index: 3;
}

.side-open .overlay {
	visibility: visible;
	cursor: pointer;
	background: rgba(0,0,0,.7);
}

.overlay::after {
	content: "";
	visibility: hidden;
	position: fixed;
	top: 40%;
	left: 0;
	display: block;
	width: 100%;
	height: 50px;
	color: rgba(255,255,255,0);
	font-size: 40px;
	font-weight: bold;
	text-align: center;
	-webkit-transition: all .5s ease;
	transition: all .5s ease;
}

.side-open .overlay::after {
	visibility: visible;
	color: rgba(255,255,255,.8);
}

/* margin打消し */

.noMargin dl.table {
	margin: 0 !important;
	}
	
.noMargin dl {
	margin: 0 !important;
	}
	
.noMargin-bottom {
	margin-bottom: 0 !important;
	}

/* --------------------------------------------------- btn */
.btn__box {
	position: relative;
	text-align: center;
	z-index: 1;
}

.btn__box a {
	display: block;
	width: 198px;
	height: 38px;
	margin: 0 auto;
	line-height: 40px;
	font-size: 13px;
	color: #111;
	-webkit-transition: all .3s ease;
	transition: all .3s ease;
	border: 1px solid #111;
}

.btn__box a:hover {
	color: #fff !important;
	background: #111;
}

.btn__box--svg {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 214px;
	height: 54px;
	margin: auto;
	z-index: -1;
}

.btn__box--svg rect {
	fill: transparent;
	stroke: #111;
	stroke-width: 1px;
	stroke-dasharray: 242px;
	stroke-dashoffset: 256px;
	-webkit-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
}

.btn__box a:hover + .btn__box--svg rect {
	stroke-width: 2px;
	stroke-dasharray: 600px;
	stroke-dashoffset: 0;
}

/* --------------------------------------------------- side menu */
.side-menu {
	position: absolute;
	top: 0;
	right: 0;
	box-sizing: border-box;
	width: 300px;
	height: 100%;
	padding-top: 150px;
	text-align: left;
	background:#0071be;
	z-index: 1;
}

.side-menu__ul {
	width: 100%;
	height: 100%;
	display: block ;
	overflow: auto;
}

.side-menu__ul--child {
	display: none;
}

.active .side-menu__ul--child {
	display: block;
}

.side-menu__ul--child li a {
	display: block;
	padding: 8px 0 8px 32px;
	font-size: 15px;
	color: #eee;
}

.side-menu__ul > li > a,
.side-menu__ul > li h4 {
	display: block;
	padding: 10px 0 10px 20px;
	color: #fff;
}

.side-menu__ul h4 {
	cursor: pointer;
	-webkit-transition: all .5s;
	transition: all .5s;
}


.side-menu__ul > li h5 {
	font-size: 90%;
	display: block;
	padding: 10px 0 10px 20px;
	color: #fff;
}


.side-menu__ul > li > h4:after {
	content: ' +';
	color: #ffca2c;
	font-size: 24px;
}

.side-menu__ul > li.active h4:after {
	content: ' -';
}

.side-menu__ul > li > h4:hover,
.side-menu__ul > li a:hover {
	background: #17bafa;
	color: #fff;
}

.children {
	padding-left: 10px !important;
	}


/* --------------------------------------------------- ellipsis btn */
.side-menu-btn {
	position: absolute;
	top: 30px;
	right: 20px;
	width: 40px;
	height: 40px;
	padding: 0px;
	cursor: pointer;
	z-index: 4;
}

.ellipsis-v {
	position: relative;
	display: block;
	cursor: pointer;
	width: 40px;
	height: 30px;/* ハンバーグの高さ */
}

.ellipsis-v .point {
	position: absolute;
	left: 0;
	right: 0;
	display: block;
	width: 40px;
	height: 5px;
	margin: auto;
	background: #1a5f9a;
	transition: all .3s;
}

.ellipsis-v .point.top {
	top: 0;
}

.ellipsis-v .point.mid {
	top: 0;
	bottom: 0;
}

.ellipsis-v .point.bot {
	bottom: 0;
}

.side-menu-btn:hover .top {
	-webkit-transform: translateY(-2px);
	-ms-transform: translateY(-2px);
	transform: translateY(-2px);
}

.side-menu-btn:hover .bot {
	-webkit-transform: translateY(2px);
	-ms-transform: translateY(2px);
	transform: translateY(2px);
}

.side-open .side-menu-btn:hover .top,
.side-open .top {
	width: 42px;/* ×の長さ */
	height: 2px;
	background: #fff;
	-webkit-transform-origin: left top;
	-ms-transform-origin: left top;
	transform-origin: left top;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

.side-open .mid {
	opacity: 0;
}

.side-open .side-menu-btn:hover .bot,
.side-open .bot {
	width: 42px;/* ×の長さ */
	height: 2px;
	background: #fff;
	-webkit-transform-origin: left bottom;
	-ms-transform-origin: left bottom;
	transform-origin: left bottom;
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.side-open .side-menu-btn:hover .bot,
.side-open .side-menu-btn:hover .top {
	background: #ccc;
}
/* グローバルナビ:ここまで */


#mainContainer {
	scroll-snap-type: y mandatory;
	position: relative;
	width: 100%;
	-webkit-transition: all .5s ease;
	transition: all .5s ease;
	z-index: 2;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background-color:#F3F1EC;
}

#mainimage {
	line-height: 0;
	font-size: 0;
	min-height:0%;
	max-width: 1500px;
	margin: 0 auto;
	}

#mainimage img {
	width:100%;
	min-height:230px;
	margin: 0 auto;
	object-fit: cover;
}

#wrapper {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	background-color:rgba(255,255,255,1) !important;
}

.wf-mplus1p { font-family: "M PLUS 1p"; }
.wf-sawarabimincho { font-family: "Sawarabi Mincho"; }

.font70 { font-size:70%;}
.font80 { font-size:80%;}
.font90 { font-size:90%;}
.font105 { font-size:105%;}
.font110 { font-size:110%;}
.font120 { font-size:120%;}
.font130 { font-size:130%;}
.font140 { font-size:140%;}
.font150 { font-size:150%;}
.font160 { font-size:160%;}
.font170 { font-size:170%;}
.font180 { font-size:180%;}
.font200 { font-size:200%;}
.font250 { font-size:250%;}
.font300 { font-size:300%;}

.line90 { line-height:90%;}
.line100 { line-height:100%;}
.line120 { line-height:120%;}
.line120 { line-height:120%;}
.line140 { line-height:140%;}
.line160 { line-height:160%;}
.line180 { line-height:180%;}
.line200 { line-height:200%;}
.line250 { line-height:250%;}
.line300 { line-height:300%;}

.marginTop5 { margin-top: 5px;}
.marginTop10 { margin-top: 10px;}
.marginTop20 { margin-top: 20px;}
.marginTop30 { margin-top: 30px;}
.marginTop40 { margin-top: 40px;}
.marginTop50 { margin-top: 50px;}
.marginTop60 { margin-top: 60px;}

.font-red { color: #E30000;}

.my-gray { color: #17bafa;}

a { text-decoration:none;}

/* タイトルかざり */

.underBar {
	font-size: 110%;
	font-weight:500;
	margin-bottom: 20px;
	border-bottom: solid 3px #17bafa;
	position: relative;
}

.underBar:after {
	position: absolute;
	content: " ";
	display: block;
	border-bottom: solid 3px #0071be;
	bottom: -3px;
	width: 20%;
}

.checkBar {
	font-size: 100%;
	margin-bottom: 20px;
	position: relative;
	color: white;
	background: #0071be;
	line-height: 1.4;
	padding: 0.3em 0.5em 0.3em 1.8em;
}

.checkBar:before {
	font-family: "Font Awesome 5 Free";
	content: "\f14a";
	position: absolute;
	left : 0.5em; /*左端からのアイコンまでの距離*/
}

.checkBar-red {
	font-size: 115%;
	margin-bottom: 20px;
	position: relative;
	color: white;
	background: #C00;
	line-height: 1.4;
	padding: 0.3em 0.5em 0.3em 1.8em;
}

.checkBar-red:before {
	font-family: "Font Awesome 5 Free";
	content: "\f14a";
	position: absolute;
	left : 0.5em; /*左端からのアイコンまでの距離*/
}

.checkBar-gray {
	font-size: 115%;
	font-weight:500;
	margin-bottom: 20px;
	position: relative;
	color:  #0071be;
	line-height: 1.4;
	padding: 0.3em 0.5em 0.3em 1.8em;
}

.checkBar-gray:before {
	font-family: "Font Awesome 5 Free";
	content: "\f14a";
	position: absolute;
	left : 0.5em; /*左端からのアイコンまでの距離*/
}

.colorBar {
	font-size: 115%;
	font-weight:600;
	margin-bottom: 20px;
	background-color: #0071be;
	padding: 0.2em;
	color:#fff;
	text-align:center;
}

.colorBar-left {
	font-size: 115%;
	font-weight:600;
	margin-bottom: 20px;
	background-color: #0071be;
	padding: 0.3em 0.2em 0.2em 0.5em;
	color:#fff;
}

/* java： fadeInUp fadeInDown */

.animation {
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
	visibility:hidden;
}

.fadeInUp {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:2s;
 -ms-animation-duration:2s;
 animation-duration:2s;
 -webkit-animation-name: fadeInDown;
 animation-name: fadeInDown;
 visibility: visible !important;
}

@-webkit-keyframes fadeInDown {
 0% {  opacity: 0; -webkit-transform: translateY(40px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(40px); -ms-transform: translateY(40px); transform: translateY(40px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}

/*----clearfix----*/

.clearfix:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
}

.clearfix {
	display: inline-table;
	min-height: 1%;
}

/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */


/* コンテンツGnavi： グローバルメニュー */

footer {
	margin-top: auto;
}

/* .conGnavi {
	width: 90%;
	margin: 50px auto;
	padding-top: 50px;
	border-top: #CCC solid 2px;
	}*/
	
.conGnavi {
	color: white;
	width: 100%;
	padding: 0 0 0;
	}

.conGnavi .container {
/*	width: 100%;*/
	width: 90%;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	}

.conGnavi .container .item { flex: 1;}

.conGnavi .container .item li dt {
	font-weight:bold;
	padding: 1% 1% 1% 0;
	color:#fff;
	}
	
.conGnavi .container .item li dd ul {
	margin-bottom:30px;
	} 
	
.conGnavi .container .item li dd ul li {
	border: #CCC 1px solid;
	margin: -1px 0 0 0;
	padding: 1.5% 1%;
	color:white;
	} 
	
.conGnavi .container .item li dd ul li a {
	padding-left: 3%;
	text-decoration:none;
	color:white;
	display:block;
	line-height: 130%;
	}
	
.conGnavi .container .item li dd ul li a:hover {
	color: #ccc;
	}
	
.conGnavi .container .item li.footerBnr {
	width: 100%;
	float: none;
	}
	
.conGnavi .container .item li.footerBnr img {
	width: 100%;
	}
	
.conGnavi .container .item li.footerBnr a {
	padding-left: 0%;
	font-size: 0px;
	line-height: 0px;
	}
	
.conGnavi .container .item li.footerBnr a:hover {
	opacity:0.8;
	}

.conGnavi .container-others { width: 90%; height:auto; margin: 0 auto; text-align:center;}
.conGnavi .container-others ul { width: fit-content; height:auto; margin: 0 auto 20px;}
.conGnavi .container-others ul li { float:left; margin-right: 20px; font-size: 12px;}
.conGnavi .container-others ul li a { color:#fff;}
.conGnavi .container-others ul li a:hover { color:#0071be;}

.footer-list { background-color: #002239;}

#Copyright { clear:both; width: 100%; text-align:center; font-size: 11px; color:#999;}

/* ダイレクトイン */

article {}
#direct-title { width: 100%; padding: 3px 0 0; background-color:#38454e; }/*#293034*/
#direct-title div  { max-width: 1200px; margin: 0 auto; color:#fff;}
#direct-title div p { width: 94%; margin: 0 auto;}
#direct-inner { width: 100%; background-color:#0063a9; color:#fff;}/*#0071be*/
#booking_inner { max-width: 1200px; margin: 0 auto; padding: 0.5% 0 1%;}
#frmplanseek { display: flex; flex-direction: row; flex-wrap: wrap; width: 98%; margin: 0 auto;}
.booking_date01 { width: 95%; margin: 0 auto; padding: 10px 0 10px; border-bottom: 1px #065b97 solid;}
.booking_date02 { width: 95%; margin: 0 auto; padding: 10px 0 10px; border-bottom: 1px #065b97 solid;}
.booking_date03 { width: 95%; margin: 0 auto; padding: 10px 0 10px;}
.booking_date04 { display:none;}
.booking_date05 { width: 95%; padding: 5px 0 10px; display:flex; align-items:center; margin: 0 auto;}
#nitteiarea { width: 95%; margin: 0 0 0 0;}
.hotelnameBox { width: 100%;}
#searchtypearea { width: 95%; margin: 0 auto;}
#hakusuarea { width: 100%; margin: 0 auto;}
#hakusuarea select { width: 40px; padding: 2px 5px;}
#ninzuarea select { width: 50px; padding: 2px 5px;}

select.hotelname { width: 100%; margin: 2px auto 0; padding: 3%;}
input.button { width:100%; margin: 0 auto 0; padding: 2%; -webkit-appearance:none;}
.slash { padding-left: 3px;}
select { font-size: 16px; padding-left: 3px; -webkit-appearance:none;}
.hotelnameBox select { width: 100%; padding: 2px 5px;}
input { font-size: 16px; padding: 2px 5px;}
#calid { left: 10px;}
select:visited , select:hover , select:active { color:#000;}
input:visited , input:hover , input:active { color:#000;}

.bookingTitle , .hotelnameBox , .hizukeBox , .ninzuBox { float: left;}
.bookingTitle { padding-right: 10px;}

/* ダイレクトインここまで */

/* SNS*/
.sns-cont {width: auto; margin: 0 auto; background-color: white; padding: 2%; border-radius: 100px;}
#sns-btn {display: flex; width: 80px; margin: 0 auto 0;}
#sns-btn li { width: 30px; margin-right: 20px;line-height: 0; font-size: 0;}
	#sns-btn li:last-child {margin-right: 0;}
#sns-btn li img { width: 100%;}	
#sns-btn:after { clear:both;}

footer { background: #002239; }
footer nav { width: 100%; background:#0063a9;}/*#0071be*/
footer nav .container { max-width: 1200px;  padding: 70px 0 70px;}

/* HMIホテルグループ： 　ここから */
.footer-list h3 {max-width: 1200px; margin: 5% auto 0; padding-bottom: 5px; border-bottom: 1px solid #888;}
.footer-list #Openlist { width: auto; max-width: 1200px; display:flex; justify-content:space-between; margin: 0 auto; padding: 2% 0 3%;}
.footer-list #Openlist ul {flex: 0 0 auto; margin: 0 0 0;}
.footer-list #Openlist ul li { margin-bottom: 5px; padding: 0.5% 0;}
.footer-list #Openlist ul li div { font-size: 100%; padding: 0 0 3%; font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif"; font-weight: normal; color: white;}

.footer-list #Openlist ul li a{
	display: block;
	font-size: 100%;
	position: relative;
	padding-left: 15px;
	color: #ccc;
	text-decoration: none;
	}
.footer-list #Openlist ul li a::before{
content: "";
position: absolute;
left: 0px;
top: 10px;
width: 5px;
height: 5px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: left 0.2s ease;
-moz-transition: left 0.2s ease;
-o-transition: left 0.2s ease;
transition: left 0.2s ease;
}

.footer-list #Openlist ul li a:hover::before{
	left: 3px;
}

.br_600 { display: block !important;}
.sp-view { display:block !important;}
.pc-view { display:none !important;}
.second-view { display:none !important;}
.wide-view { display:none !important;}

/*youtube*/
.youtube {
width: 95%;
margin: 50px auto 0;
max-width: 1200px;
	aspect-ratio: 16 / 9;
}
.youtube iframe {
width: 100%;
height: 100%;
}

/*ホバーエフェクト*/

.bnr {
    margin: 0;
    padding: 0;
    overflow: hidden;
    cursor: pointer;
}

.bnr img {
  transform: scale(1);
  transition: .4s ease-in-out;
}
.bnr:hover img {
  transform: scale(1.05);
}
/*
----------------------------------------------------------- */

@media screen and (min-width: 620px)  {

.br_600 { display: none; }

.header-inner img { max-width: 350px; }
}

@media (min-width: 768px) {
	
.sp-view { display: none !important;}	
.pc-view { display: block !important;}
.second-view { display:block !important;}
	
.second-view { width: 90%; margin: 0 auto;}


/* ダイレクトイン */
.booking_date01 { width: 50%;}
.booking_date02 { width: 50%;}
.booking_date03 { width: 100%;}
.booking_date05 { width: 100%;}
#frmplanseek { width: 90%;}
input.button { padding: 2%;}
#nitteiarea { width: 95%; margin: 0 auto;}
.bookingTitle , .hotelnameBox , .hizukeBox , .ninzuBox { float: none;}
#hakusuarea { width: 100%;}
#nitteiarea { width: 95%; margin: 0 5% 0 0;}
#direct-title div p { width: 90%; margin: 0 auto;}
/* ダイレクトインここまで */


/* コンテンツD： グローバルメニュー */

.conGnavi {
	width: 100%;
	}

.conGnavi .container {
	margin: 0 auto 0;
	display: flex;
	flex-direction: row;
	justify-content:space-between;
	}

.conGnavi .container .item {
	flex: 0 0 auto;
	white-space: nowrap;
	}
	
.conGnavi .container .item li {
	font-size: 95%;
	}

.conGnavi .container .item li dt {
	font-weight:bold;
	background: transparent;
	padding: 0 10px 25px;
	font-size: 110%;
	}

.conGnavi .container .item li dd ul li {
	border: none;
	margin: -1px 0 0 0;
	padding: 0 10px 15px;
	word-break: break-all;
	font-size: 110%;
	}
	
.conGnavi .container-others {
	width: 90%;
	margin: 20px auto 0;
	padding: 10px 0 0;
	border-top: #CCC solid 1px;
	}
	
.conGnavi .container .item li.footerBnr { float: none;}
.conGnavi .container .item li.footerBnr {
	width: 240px;
	float: none;
	}
.conGnavi .container .item li.footerBnr img {
	width: 100%;
	}
	
.conGnavi .container .item li.footerBnr a {
	padding-left: 3%;
	}

.conGnavi .container-others { width: 100%; height:auto;}
.conGnavi .container-others ul { width: fit-content; height:auto; margin: 0 auto 20px;}
.conGnavi .container-others ul li { font-size: 13px;}
	.conGnavi .container-others ul li:last-child { margin-right: 0;}
.conGnavi .container-others ul li a { color: white;}
.conGnavi .container-others ul li a:hover { color:#0071be;}

.conGnavi .container {width: 95%;}
.footer-list #Openlist { width: 95%;}
.footer-list h3 { width: 95%; font-size: 110%;}
	
.youtube {margin: 100px auto 0;}
}

@media (min-width: 850px) {
	
.conGnavi .container {width: 90%;}
.footer-list #Openlist { width: 90%;}
.footer-list h3 { width: 90%;}
}

@media (min-width: 900px) {

.booking_date01 { width: 25%; margin-right: 3%; margin-bottom: 0px; border-bottom: none;}
.booking_date02 { width: 24%; margin-right: 3%; margin-bottom: 0px; border-bottom: none;}
.booking_date03 { width: 19%; margin-right: 3%;}
.booking_date04 { display:none;}
.booking_date05 { width: 23%; display:flex; align-items:center; }
input.button { width: 90%; padding: 3%;}
#nitteiarea { width: 100%; margin: 0 3% 0 0;}
select { font-size: 14px;}
input { font-size: 14px;}
}

@media (min-width: 1040px) {
/* ヘッダー： グローバルメニュー */

.second-view { display:none !important;}
.wide-view { display:block!important;}
	
header { height: auto;}
.header-inner { display: flex; flex-direction: row; align-items: flex-end; justify-content: space-between;}
.header-inner img {
	width: 350px;
	margin: 25px 10px 10px 25px;
	}
#headerLogo { width: 400px;}	
#headerNavi { width: 1100px;}
	
 /*	言語切り替え*/
	
#languageBtn { height: 60px;}
.basicBox {
  width: 150px;
  margin: 5px 0 0 0;
  color: #fff;
  font-family: 'Open Sans', sans-serif;
  font-size: 0.8rem;
  line-height: 30px;
  text-align: center;
  position: relative;
  cursor: pointer;
  float:right;
}

svg {
  position: absolute;
	top:0;
	left: 0;
}
svg rect, svg path, svg polyline {
  fill: none;
  stroke: #fff;
  stroke-width: 1;
}

.basicBox:hover svg rect, .swiggleBox:hover svg path, .checkBox:hover svg polyline {
  stroke: #0071be;
}
	
/* Basic Box */
svg rect {
  stroke-dasharray: 400, 0;
  -webkit-transition: all 0.8s ease-in-out;
  -moz-transition: all 0.8s ease-in-out;
  -ms-transition: all 0.8s ease-in-out;
  -o-transition: all 0.8s ease-in-out;
}
.basicBox:hover svg rect {
  stroke-width: 3;
  stroke-dasharray: 35, 245;
  stroke-dashoffset: 38;
  -webkit-transition: all 0.8s ease-in-out;
  -moz-transition: all 0.8s ease-in-out;
  -ms-transition: all 0.8s ease-in-out;
  -o-transition: all 0.8s ease-in-out;
}
	
#slideMenu-jobListings , #slideMenu-brand , #slideMenu-company , #slideMenu-group , #slideMenu-list , #slideMenu-personnelAffairs , #slideMenu-realEstate , #slideMenu-top , #slideMenu-contact , #slideMenu-privacy , #slideMenu-hmiClub { display:none;}
#gnavi-top , #gnavi-company , #gnavi-brand , #gnavi-list , #gnavi-group , #gnavi-jobListings , #gnavi-personnelAffairs , #gnavi-realEstate , .basicBox , #gnavi-contact , #gnavi-privacy , #gnavi-hmiClub { display: block;}
	
}

@media (min-width: 1500px) {
.header-inner img {
	width: 350px;
	margin: 25px 0 12px 0;
	}
}