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

.area {
  /*scroll-snap-align: start;*/
  height: auto;
}

h1 { padding: 12% 5% 20px; font-size: 22px; font-weight:bold; font-family: "Yu Mincho", "YuMincho", serif;}
h2 { font-size: 20px; font-weight:bold; font-family: "Yu Mincho", "YuMincho", serif; margin-bottom: 20px;}
.h2subText { font-size: 19px; margin: 20px 0 15px; line-height: 130%;}
.leadtext { width: 100%; text-align:center; color:#111;}

/* コンテンツslider*/
.slider {}
.slider .leadtext h1 { padding: 15% 5% 5%; font-size: 20px; font-weight:bold;}
.slider .leadtext p { padding: 0 5% 15%; font-size: 18px;}
.slider img , .slider source { width:auto; height:100%; }
.bx-wrapper { display:block; max-width: 1500px !important; margin: 0 auto;}

/* コンテンツA */
.conA h2 { margin-bottom: 0;}
.conA .leadtext { padding:0 10% 50px;}


/* HMIホテルグループ： 　ここから */
#Openlist { width: auto; max-width: 1200px; display:flex; justify-content: space-around; margin: 0 auto;}
#Openlist ul {flex: 0 0 auto; margin: 0 0 50px;}
#Openlist ul li { margin-bottom: 10px; padding: 0.5% 0;}
#Openlist ul li div {
	padding: 0 0 20px;
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	font-weight: bold;
	color: black;
	font-size: 130%;
}

#Openlist ul li a{
	display: block;
	font-size: 95%;
	position: relative;
	padding-left: 15px;
	color: #000;
	text-decoration: none;
	font-size: 100%;
	}
#Openlist ul li a::before{
content: "";
position: absolute;
left: 0px;
top: 10px;
width: 5px;
height: 5px;
border-top: 2px solid #c3983a;
border-right: 2px solid #c3983a;
-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;
}

#Openlist ul li a:hover::before{
	left: 3px;
}
/* コンテンツA　ここまで */


/* コンテンツevent */

.flexBox-event {
	display: flex;
	flex-direction:row;
	margin: 0 auto;
}
.event {width: 90%; margin: 0 auto; padding: 50px 0;}
.event-inner { max-width: 1200px; width: 95%; margin: 0 auto;}
.leadtext p.leadtext-sub01 { padding: 0 5% 0; font-size: 18px;}
.leadtext p.leadtext-sub02 { margin-bottom: 20px; font-size: 14px;}
.leadtext { padding-bottom: 0; font-family: "Yu Mincho", "YuMincho", serif;}
.event .flexBox-event { display: flex; justify-content: flex-start;}
.event .flexBox-event ul { width:95%;}
.event .flexBox-event li { margin: 0 5px 30px;  height: auto;}
.event .flexBox-event li .slider_itemInner {
	display: -webkit-flex;
    display: flex;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    width: 100%;
    height: 100%;
}
.event .flexBox-event li dl { padding: 10px; display: block;}
.event .flexBox-event li .imgBox {cursor: pointer; overflow: hidden;}
.event .flexBox-event a , .event .flexBox img { font-size: 0; line-height: 0;}
.event .flexBox-event li .imgBox img {
	width: 100%;
	height: auto;
	transition: transform .6s ease;/* ゆっくり変化させる */
}
.event .flexBox-event li .imgBox:hover img {
  transform: scale(1.1);/* 拡大 */
}
.event .flexBox-event li dt { margin: 5px 0 10px; font-size: 95%; font-family: "Yu Mincho", "YuMincho", serif; line-height: 120%; font-weight: bold;}
.event .flexBox-event li dd { font-size: 90%; line-height: 120%; margin: 0 0 0;}

/* コンテンツevent　ここまで */

/* コンテンツB */

.conB {height: auto; padding: 50px 0 50px;}

.flexBox-brand {
	width: 100%;
	display: flex;
	flex-direction:row;
	flex-wrap: wrap;
	margin: 0 auto;
}
.flexBox-brand li { width: 50%;}
.brand {}
.brand .imgBox { position: relative;}
.brand .imgBox .logoBox { position: absolute; top:0; left:0; width: 30%;}
.brand .h2subText p {margin-bottom: 5px;}
.brand .h2subText a {
    position: relative;
    display: inline-block;
    transition: .3s;
    font-weight: 500;
	padding-bottom:1px;
}
.brand .h2subText a::after {
  position: absolute;
  bottom: 0;
  left: 50%;
  content: '';
  width: 0;
  height: 2px;
  background-color: #d8c7a2;
  transition: .3s;
  transform: translateX(-50%);
}
.brand .h2subText a:hover::after{
  width: 100%;
}

.textBox h3 {
	font-size:		110%;
	color:			#fff;
	padding-top:		50%;
	padding-left:		0px;
	text-align: center;
}
.textBox {
	width:			100%;
	height:			100%;
	position:		absolute;
	top:			0;
	left:			0;
	opacity:		0;	/* マスクを表示しない */
	background-color:	rgba(0,0,0,0.5);
	-webkit-transition:	all 0.6s ease;
	transition:		all 0.6s ease;
}
.imgBox:hover .textBox {
	opacity:		1;	/* マスクを表示する */
	padding-left: 0; /* 右にずらす */
	vertical-align:center;
}

/* コンテンツB　ここまで */



/* コンテンツabout */
.about { max-width: 1200px; margin: 0 auto; padding: 50px 0; }

.flexBox-about {
	width: 95%;
	display: flex;
	flex-direction:row;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 0 auto;
}

.flexBox-about li {
	width: 49%;
	margin: 0 0 20px;
	background-color: #002239;
	border-radius: 20px;
	box-shadow: 0px 0px 10px -3px #777777;
}
.flexBox-about li:last-child {
	margin: 0 0 20px 0;
}
.flexBox-about li a { color: #fff;}
.flexBox-about img { width: 100%; border-radius: 20px 20px 0 0;}
.flexBox-about h3 {text-align: center; font-size: 85%; padding: 5px 0;}
.flexBox-about div { font-size: 0; line-height: 0;}

#spacer { height: 3%;}

/* コンテンツAward */
.award {     
    margin: 0 auto;
	background-color: #eee5d1;
	background-size: cover;
    padding: 50px 0;
}

.name { margin-bottom: 15px; font-weight: normal; font-size: 90%;}

.award dl.awardInner {
	width: 90%;
	margin: 0 auto;
}

.award dl.awardInner .awardInnerList {
	margin-bottom: 50px;
}

.award ul.awardImageBox {
	display: flex;
	flex-direction:row;
	flex-wrap: wrap;
	margin-left: 2%;
}
.award ul.awardImageBox li {
	width: 48%;
	margin: 0 2% 2% 0;
	background: #e7dabd;
}

.award ul.awardImageBox li:last-child {
	margin: 0 0 2% 0;
}
.award ul.awardImageBox li div{
	display: flex;
	flex-direction: column-reverse;
	align-items:stretch;
    align-items: flex-start;

}
.award ul.awardImageBox li div p , .award ul.awardImageBox li div div.awardImage {
	width: 100%;
}
.award ul.awardImageBox li div div.awardImage img {
	width: 100%;
	height: auto;
}
.award ul.awardImageBox li p { font-size: 80%; line-height: 130%; padding: 10px 5px 10px 15px;}

ul.flexAward { display: flex;  flex-wrap: wrap;}
ul.flexAward li { width: 23%; margin-right: 2%; margin-bottom: 2%; display: flex; flex-direction: column;}
ul.flexAward li summary { width: 80%; margin: 0 auto;}
summary {
  /* display: list-item;以外を指定してデフォルトの三角形アイコンを消します */
  display: block;
}
summary::-webkit-details-marker {
  /* Safariで表示されるデフォルトの三角形アイコンを消します */
  display: none;
}
ul.flexAward li p {font-size: 70%; line-height: 120%; text-align: center; margin: 10px 0 5px;}
ul.flexAward li img { width: 100%; }

.minority {
	display: flex;
	flex-direction: column;
	margin: 0 auto;
}
.minority li.minorityList { width: 49%; margin: 0 1% 1% 0; }
.minority li.minorityList:last-child {
	margin: 0 0 1% 0;
}
.minority li.minorityList ul.awardImageBox li { width: 100%; text-align: left;}
.minority li.minorityList ul.awardImageBox li img { width: 100px;}

/*----------------------------------------------------------- */

@media screen and (min-width: 600px) {
h1 { padding: 12% 5% 20px; font-size: 26px;}
h2 { font-size: 24px; margin-bottom: 20px;}
.conA h2 { font-size: 24px; margin-bottom: 0;}
}
@media screen and (min-width: 768px) {
h1 { padding: 12% 5% 30px; font-size: 40px;}
h2 { font-size: 30px; margin-bottom: 20px;}
.conA h2 { font-size: 30px; margin-bottom: 20px;}
.h2subText { font-size: 19px; margin: 30px 0 25px; line-height: 180%;}
.leadtext { padding-bottom: 20px; }
.leadtext p.leadtext-sub01 { padding: 0 5% 5%; font-size: 19px;}
.area {height: auto;}
.slider img , .slider source{ height:auto;}
.conA {
	width: 100%;
	padding: 80px 0;
	background-image: url("../img/top/map.svg");
	background-position: top 20px right 20px;
	background-size: auto 100%;
	background-repeat: no-repeat;
	background-color:#eee5d1;/*ベージュ*/
	background-position: center;
}
.conA .container {width: 90%;margin: 0 auto;}
.conA .container {width: 55%;}
.conB {height: auto; padding: 50px 0;}
/*.conB .container .item:hover { width: 200%; flex: 0 0 65%; transition-duration: 1s;	/*変化に掛かる時間}*/
.flexBox-brand {
	max-width: 1200px;
}
.flexBox-brand li { width: 25%;}

.accordion { flex-direction:row;}
.acd-label{
    padding: 10px 10px 10px 40px;
}
.accordion .link {
  padding: 10px 0 10px 42px;
}
.submenu dt.pdpImg{ padding: 3% 3% 0; background:#fff; width: 50%;}
.brandBox .textBox .brandName { line-height: 165%;}
.leadtext { padding-bottom: 40px;}
.conB .leadtext { padding: 0 0 30px;}
	
.flexBox-about {
	width: 95%;
}

.flexBox-about li {
	width: 24%;
	margin: 0 1% 20px 0;
}
.flexBox-about li:last-child {
	margin: 0 0 20px 0;
}
.flexBox-about h3 { font-size: 110%;}
	
.event { padding: 5% 0;}
	
.name { font-weight: bold;}
	
.leadtext p.leadtext-sub02 { margin-bottom: 5px; font-size: 17px;}	
	
.award dl.awardInner {
	max-width: 1200px;
}
.award ul.awardImageBox li {
	width: 32%;
	margin: 0 1% 1% 0;
}

.award ul.awardImageBox li:last-child {
	margin: 0 0 1% 0;
}
	
.award ul.awardImageBox li div{
	flex-direction: row;
	align-items: flex-start;
}
	
.award ul.awardImageBox li div p , .award ul.awardImageBox li div div.awardImage {
	width: 50%;
}
.award ul.awardImageBox li div div.awardImage {
    display: flex;
    align-items: center;
	padding: 5px;
    width: 150px;
    height: 150px;  
}
.award ul.awardImageBox li div div.awardImage img {
	width: 100%;
}
.minority {
	flex-direction: column;
}
.minority li.minorityList { width: 32%; margin: 0 1% 1% 0; }
	
.about { padding: 80px 0; }
	
ul.flexAward { display: flex; flex-wrap: wrap; width: 100%; margin: 0 auto;}
ul.flexAward li { max-width: 23%; min-width: 150px; margin-right: 2%; display: flex; flex-direction: column;}
ul.flexAward li summary { width: 80%;}
ul.flexAward li p {font-size: 70%; line-height: 120%; text-align: center; margin: 10px 0 5px;}
ul.flexAward li img { width: 100%; }
	
}

@media screen and (min-width: 768px) and (max-width: 900px) {
.conA .container {width: 82%;}
#Openlist {width: 95%}
}

@media screen and (min-width: 855px) {
.brandBox .textBox .brandName { font-size: 90%;}
}

@media screen and (min-width: 870px) {
h1 { padding: 120px 0 60px; font-size: 50px; font-weight:normal;}
.conB {height: auto; padding: 100px 0;}
/* コンテンツevent */
.event-inner { max-width: 1200px; width: 100%; margin: 0 auto;}
.leadtext p.leadtext-sub01 { padding: 0 5% 0; font-size: 23px;}
.event .flexBox { width: 100%; padding: 0 25px;}
/* コンテンツevent　ここまで */

.conB .container .item { width: 100%; flex: 0 0 50%;}
.brandBox .textBox .rogo { width: 40%; margin-top: 3%;}
.brandBox .textBox .brandName { font-size: 115%; font-family: "Yu Mincho", "YuMincho", serif;}
.conC .bnrBox .bnrImage div{ height: 300px;}	
}

@media screen and (min-width: 900px)  {
.conA .container { width: 75%;}
.award ul.awardImageBox li { width: 24%;}
.minority li.minorityList { width: 24%;}
}

@media screen and (min-width: 940px)  {
ul.flexAward li { max-width: 18%; margin-right: 2%;}
}

@media screen and (min-width: 1000px){
h1 { padding: 120px 0 60px; font-size: 60px;}
.conA .container {width: 780px;}
.about .imgLeft div, .about .imgRight div { flex:40%; }
.about .imgLeft dl, .about .imgRight dl { flex:60%; }
}

@media screen and (min-width: 1085px){
ul.flexAward li { max-width: 15.5%; min-width: 150px; margin-right: 1.1%;}
}

@media screen and (min-width: 1120px){
.brandBox .textBox .brandName { font-size: 115%;}
}

@media screen and (min-width: 1200px){
}
/* コンテンツD： ニュース */

/*.conD {
	position:relative;
	width:100%;
	height:0;
	padding-top:75vh;
	}
	
.conD iframe {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
	 }
*/
 iframe {
  width: 100%;
  aspect-ratio: 16/6; //アスペクト比（縦横比）を指定
}