@charset "utf-8";
/* ===============================================
	▼トップページ用ＣＳＳ
=============================================== */
/** {
  outline: 1px solid red;
}*/
.red{border: #f00 1px solid}
#container {
  padding-bottom: 80px;
}


/* ━━━━ ▼ProductSearchBox ━━━━ */

#front .searchKeyword{justify-content: flex-end; display: flex; width: 425px;	background: none;padding: 0;}
	
#front .searchKeyword .searchBox {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	margin: 0 auto;
	position: relative;
	flex-flow: row wrap;
	padding-top: 8px;
	
}
#front .searchKeyword .searchBox .searchInput{
	width: 322px; 
	font-size: 13px;
	line-height: 1;
	  padding: 8px 15px 8px 35px;
	  border:1px solid #1eb9ee;
	  border-radius: 25px;
}

#front .searchKeyword .searchBox:after {
	font-family: "Material Icons";
	content: 'search';
	font-weight: inherit;
	font-style: normal;
	font-size: 21px;
	color: #999;
	letter-spacing: inherit;
	line-height: inherit;
	direction: ltr;
	-ms-font-feature-settings: 'liga';
	-moz-font-feature-settings: 'liga';
	-webkit-font-feature-settings: 'liga';
	-webkit-font-smoothing: antialiased;
	display: block;
	position: absolute;
	top: 21px;
	left: 10px;
	margin-top: -0.6em;
}

#front .searchKeyword .searchBox .searchButton {
	width: 73px;
	padding: 8px 6px;
	line-height: 1;
	font-size: 12px;
	margin-left:10px;
	border:1px solid #1eb9ee;
	align-self: stretch;
	white-space:nowrap;
}

/* -------------------------------------------
-------------  992以上 ------------------------
-------------------------------------------- */
@media only screen and (min-width:992px){
	#front header {margin:30px auto 4px auto; height:103px}
	#front header div:first-child{height:fit-content;}
	#front #logotype img{display:block;margin-bottom:9px}
	#front #logotype{padding-top:0px} 
	#front #headMenu {padding: 0 0 0px 0;display:flex;justify-content: flex-end;}

}
/* -------------------------------------------
-------------  991以下 ------------------------
-------------------------------------------- */
@media screen and (max-width:991px) {
#front header {width: calc(99% - 80px); margin-left:80px; margin-bottom:0px;display:flex;  justify-content: space-between; align-items: center; padding:20px 0 5px 0;}
	
#front #logotype {
  display: flex;
  flex-direction: column; /* 縦並び */
  align-items: /*flex-end;*/ center; /* 右寄せ */
}
#front header div#logotype img{margin-right:0px;width:min(100%,330px);}

#front .searchKeyword .searchBox {
/*	width: 100%;
	display: flex;*/
	flex-flow: row nowrap;
/*	align-items: center;
	justify-content: flex-end;
	margin: 0 auto;
	position: relative;*/
	padding-top: 10px;	
}

#front .searchKeyword .searchBox .searchButton {
	width: 70px;
	padding: 7px 2px;
	margin-right:10px
	}
#front .searchKeyword .searchBox .searchInput{
	width:300px;
	font-size: 12px;
	}
}

/* -------------------------------------------
-------------  767以下 ------------------------
-------------------------------------------- */	
@media screen and (max-width:767px) {
#front .searchKeyword .searchBox:after {
	top: 20px;}
#front .searchKeyword .searchBox .searchButton {
    margin-top: 0px !important;
  }
}
/* -------------------------------------------
-------------  690以下 ------------------------
-------------------------------------------- */	
@media screen and (max-width:690px) {
#front .searchKeyword{width: max(50%,350px);}

#front .searchKeyword .searchBox .searchInput{
width:100%; max-width:200px;
	
}
#front .searchKeyword .searchBox {
	
	align-items: flex-end;
	justify-content: flex-end;
	margin: 0 auto;
	position: relative;
	padding-top: 10px;
	
}
#front #logotype {
  align-items: flex-end;
}
}


/* -------------------------------------------
-------------  575以下 ------------------------
-------------------------------------------- */	

@media screen and (max-width:575px) {

#front header {width:calc(99% - 50px); margin-left:50px; margin-bottom:0px;display:flex;  justify-content: center; align-items: center; padding:20px 0 10px 0;height:100px}
#front header div{width:100%; }
#front #site-header{
  flex-direction: column; /* 縦並び */
  align-items: /*flex-end;*/ center; /* 右寄せ */
}
#front header h1{margin-top:5px;margin-right:40px}
#front #logotype{width:100%;
	visibility: visible; display:block; height:auto;}
#front  #logotype img.logo_jp{margin: 0; padding:0;/*visibility: hidden;*/ display: none;/* height:0;*/}
#front .searchKeyword{width:100%; justify-content: center;
    padding-top: 5px;padding-bottom:5px; }
#front .searchKeyword .searchBox{padding-top: 5px;}	
#front .searchKeyword .searchBox .searchInput{width:100%; min-width:270px;max-width:none; margin-left:0px;font-size:11px;}
#front .searchKeyword .searchBox .searchButton {
	width: 68px;
	padding: 8px;
	margin-right:0px;
	white-space: nowrap;
	font-size:11px;

	}

 #front .searchKeyword .searchBox::after {
    top: 18px;
    left: 10px;
  }
}


/* -------------------------------------------
-------------  410以下 ------------------------
-------------------------------------------- */	
@media screen and (max-width:410px) {
#front header h1{margin-top:5px;margin-right:40px}
#front .searchKeyword .searchBox .searchInput{min-width:200px;max-width:none;font-size:10px;padding: 6px 12px 6px 25px;
 border-radius: 25px;}
#front .searchKeyword .searchBox::after {top: 16px; left: 7px; font-size:16px;}
#front .searchKeyword .searchBox .searchButton {width: 60px;padding: 6px;margin-right:0px;font-size:10px;}
}


/* ━━━━ ▲ProductSearchBox ━━━━ */


/* ━━━━ ▼pageTitle ━━━━ */

#pageTitle {
  height: 430px;
  background-color: #fff;
  /*position: relative;*/
  background-image: url("../../images/top/img_top_2025_3.webp");
  background-position:center;
  background-size:1360px auto;
}
#pageTitle.em {
  height: 450px;}
  
#pageTitle h1 {
  text-align: center;
  padding: 25px 25px 15px 25px;
}
#pageTitle.en h1 span{
font-size:clamp(18px, 2vw, 30px); 
min-height:0vw;
padding: 0;
}
#pageTitle.en h1 em {
	font-size:clamp(12px, 2vw, 16px); 
	min-height:0vw;
padding: 0;
}


@media only screen and (max-width:767px) {
  #pageTitle {
    height: 400px;
    background-size:cover;
  }

  #pageTitle h1 {
    text-align: center;
    padding: 15px 10px;
  }
  
}



/* ━━━━ ▼topMainInfo ━━━━ */
.topMainInfo .topMainInfoWrap {
  background-color: #fff;
  box-shadow: 0px 10px 20px -16px #000000;
  padding: 20px 50px 40px;
  position: relative;
  /*display: flex;
  flex-flow: row wrap;
  justify-content: center;*/
}

@media screen and (max-width:991px) {
  .topMainInfo .topMainInfoWrap {
    padding: 20px 15px 40px;
  }
}

@media screen and (max-width:767px) {
  .topMainInfo .topMainInfoWrap {
    justify-content: center;
    padding: 10px 20PX;
  }
}
.topMainInfo .topMainInfoWrap h2 {
  margin: 0 auto
}
.topMainInfo .topMainInfoWrap h3 {
  text-align: center;
  margin-top: -20px;
  width: 100%;
}

@media screen and (max-width:767px) {
  .topMainInfo .topMainInfoWrap h3 {
    margin-top: 0px;
    margin-right: 5px
  }
}

@media screen and (max-width:575px) {
  .topMainInfo .topMainInfoWrap h3 {
    margin-top: 10px;
    margin-right: 5px
  }
}
.topMainInfo .topMainInfoWrap .title {
	 text-align: center;
	 /*font-size: 100%;*/
  font-size: 110%;
color: #003377;
  line-height: 1.6;
  padding-top: 10px;
}

.topMainInfo .topMainInfoWrap .title span {
  display: inline-block
}

/* ━━━━ ▼Date-Place ━━━━ */

.topMainInfo .topMainInfoWrap .infoBox {
  /*width: calc(100% - 310px);*/
  padding-top: 0px;
  color: #003377;  
  line-height: 1.6;
  /*padding-top: 10px;*/
}

.topMainInfo .topMainInfoWrap .infoBox .dateWrap{
display:flex; justify-content: flex-start; align-items: center; flex-wrap:wrap; margin:10px auto 0 auto;max-width:800px}

.topMainInfo .topMainInfoWrap .infoBox .dateWrap .day{
margin-right:.5em; font-size:clamp(16px, 4vw, 24px);
}
.topMainInfo .topMainInfoWrap .infoBox.infoBoxEn .dateWrap{max-width:600px}
.topMainInfo .topMainInfoWrap .infoBox.infoBoxEn .dateWrap div{　/*english*/
width:100%; margin-left:40px
}

.topMainInfo .topMainInfoWrap .infoBox .dateWrap .place{
margin-top:.3em;font-size:clamp(16px, 4vw, 24px);
}
.topMainInfo .topMainInfoWrap .infoBox .dateWrap .time{
margin-top:.7em; font-size:clamp(14px, 4vw, 16px);
}
.topMainInfo .topMainInfoWrap .infoBox .dateWrap .time span{
font-size: 90%;
}
.topMainInfo .topMainInfoWrap .infoBox .dateWrap .time ul{display:flex; flex-wrap:wrap}
.topMainInfo .topMainInfoWrap .infoBox .dateWrap .time li{display:inline; margin-left:1em;margin-right:.5em;white-space: pre-line;}

.topMainInfo .topMainInfoWrap .infoBox .dateWrap .day span {
  font-size: clamp(18px, 4vw, 42px);
}
@media screen and (max-width:800px) {
  .topMainInfo .topMainInfoWrap .infoBox .dateWrap .time{
margin-left:3em; width:100%; margin-top:0;padding-top:0;
	}
}

@media screen and (max-width:767px) {
  .topMainInfo .topMainInfoWrap .infoBox {
    width: 98%;
  }

}

@media screen and (max-width:575px) {
  .topMainInfo .topMainInfoWrap .infoBox {
    padding-top: 0px;
  }
  .topMainInfo .topMainInfoWrap .title {
    font-size: 98%;
  }
  /*
  .topMainInfo .topMainInfoWrap .infoBox .day {
    font-size: 98%;
  }
  .topMainInfo .topMainInfoWrap .infoBox .day span {
    font-size: 98%;
  }
  .topMainInfo .topMainInfoWrap .infoBox .place {
    font-size: 98%;
  }
  .topMainInfo .topMainInfoWrap .infoBox .btn {
    margin: 0 auto
  }*/
}
/* ━━━━ ▼BTN ━━━━ */
.topMainInfo .topMainInfoWrap .infoBox .btnWrap{
display:flex; justify-content: center; align-items: center; flex-wrap:wrap; margin:10px 0 0 0}

.topMainInfo .topMainInfoWrap .infoBox .btnWrap .btn {
  line-height: 1.8;padding-top: 0px;margin: .3em; white-space:nowrap;
}
.topMainInfo .topMainInfoWrap .infoBox .btnWrap .btn .btnStyle01{
padding:5px 10px;  font-size:clamp(12px, 2vw, 16px)}

@media screen and (max-width:575px) {
.topMainInfo .topMainInfoWrap .infoBox .btnWrap .btn{width:40%;}
.english .topMainInfo .topMainInfoWrap .infoBox .btnWrap .btn{width:40%;}
  }

/* ━━━━ ▼Movie ━━━━ */

#movieWrap {
    margin: 20px auto 0 auto; display:flex;justify-content: center; align-items: center; flex-wrap:wrap;
  }

.topMovie {
  width: 286px;
  background-color: #f3fafd;
  margin: 20px 25px 0 25px;
  padding: 10px;
  text-align: center
}
.topMovie a {
  margin: 0 auto
}
.topMovie .text {
  color: #003377;
  font-size: 14px;
  text-align: right;
  padding-top: 5px;
  padding-right: 5px
}

@media screen and (max-width:767px) {
#movieWrap {justify-content: space-around; }
.topMovie {margin: 15px 5px 5px 5px;}
}


/* ━━━━ ▼topContents ━━━━ */
#topContents .inner {
  width: 886px;
  padding-top: 50px;
  padding-bottom: 30px
}
@media screen and (max-width:991px) {
  #topContents {
    width: 100%;
    margin: 0 0 40px 0
  }
  #topContents .inner {
    width: 100%;
  }
}
#topContents .searchKeyword {
  margin-bottom: 50px;
}
/* ━━━━ ▼News ━━━━ */
.topNews .newsList {
  padding: 20px 0;
}
.newsList li {
  background-color: #fff;
  padding: 12px 7px 12px 280px;
  margin-bottom: 10px;
  position: relative;
}
.newsList li:last-child {
  margin-bottom: 0;
}
.newsList li .date {
  display: inline-block;
  position: absolute;
  top: 12px;
  left: 40px;
}
.newsList li .iconNew {
  display: inline-block;
  position: absolute;
  top: 12px;
  left: 190px;
}
.newsList li a {
  display: inline-block;
  color: #333;
  text-decoration: underline;
}
.newsList li a:hover {
  color: #777;
}
.topNews .btn {
  width: 100px;
  margin: 0 auto;
}
.enTop .topNews .btn {
  width: 200px;
  margin: 0 auto;
}
@media screen and (max-width:575px) {
  .newsList li .date {
    left: 20px;
  }
  .newsList li .iconNew {
    left: 160px;
  }
  .newsList li {
    background-color: #fff;
    padding: 50px 0 12px 20px;
    margin-bottom: 10px;
    position: relative;
  }
  .topMainInfoWrap h3 img {}
}
/* ━━━━ ▼directLinkArea ━━━━ */
.topMainInfoWrap #directArea {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  cursor: pointer;
  margin-top: 50px;
  margin-bottom: 0px;
  padding: 0;
  /*  transform: translateY(-50px);*/
}


.topMainInfoWrap #directArea a {
/*  max-width: calc(((100% - 20px * 3) / 4));*/
/*  min-width: 180px;*/
background: #00b9ee;
  
/*  box-shadow: 6px 6px 12px 0 rgba(0, 0, 0, 0.3);*/
  transition: box-shadow 0.5s;
  position: relative;
  text-decoration: none;
  box-sizing: border-box;
  color: #333;
  margin: 0;
  padding: 0;/*
}

@media screen and (max-width:991px){*/
/*	.topMainInfoWrap #directArea {margin-right:10px;margin-left:10px}
	.topMainInfoWrap #directArea a {*/
	  max-width: calc(((100% - 30px * 1) / 2));
	margin-bottom: 30px}
	


/*}*/

@media screen and (max-width:991px){
	
}
@media screen and (max-width:575px){
	.topMainInfoWrap #directArea a {
	  max-width: 90%;
			margin-right: 5%;
			margin-left: 5%
	}
	.topMainInfoWrap #directArea a#order1 {order:1;}
		.topMainInfoWrap #directArea a#order2 {order:2;}
			.topMainInfoWrap #directArea a#order3 {order:3;}
				.topMainInfoWrap #directArea a#order4 {order:4;}
}


.topMainInfoWrap #directArea a:hover {
  opacity: 1;
  box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, 0.1);
}
.topMainInfoWrap #directArea a:hover img {
  opacity: 1;
  transform: scale(0.95);
}

.topMainInfoWrap #directArea a[target="_blank"]::after {
  display: none;
}
.topMainInfoWrap #directArea dl {
height: 200px; width:auto;
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;

}

.topMainInfoWrap #directArea dt {
  position: absolute;
  display: inline-block;
  top: 0;
  left: 0;
  width: calc(100% - 0px);
height:18px;
  padding: 8px;
  background: linear-gradient(to bottom right, rgba(0, 185, 239, 0.9) 50%, transparent 52%) no-repeat top left;
/* background:rgba(0, 185, 239, 0.9);*/
  line-height: 1;
  color: #fff;
  font-weight: bold;  
font-size:12px;
  transition: background 0.5s;
  content: '';
  z-index: 1;
  margin: 0;
  border: 0;
  outline: 0;
}
.topMainInfoWrap #directArea dd:first-of-type {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 5px 10px ;
  box-sizing: border-box;
  background: rgba(34, 34, 34, 0.8);
  font-size:14px;
  color: #fff;
  z-index: 1;
  margin: 0;
  border: 0;
  outline: 0;
}
/*.topMainInfoWrap #directArea dd:first-of-type::before {
  position: absolute;
  display: inline-block;
  top: -20px;
  left: 0;
  width: 100%;
  height: 20px;
  background: linear-gradient(to top left, rgba(34, 34, 34, 0.9) 50%, transparent 50.5%) no-repeat bottom right;
  content: '';
  z-index: 1;
  margin: 0;
  border: 0;
  outline: 0;
  font-size: inherit;
}*/
.topMainInfoWrap #directArea dl img {
  width: 100%;
  vertical-align: bottom;
  transition: transform 0.5s;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: inherit;
}
.topMainInfoWrap #directArea a p {
  padding: 7px 10px;
  background: #00569e;
  /*font-weight: bold;*/
  font-size: 21px;
  color: #fff;
  display: block ruby; /*改行時にライトブルーが見えないように*/
}
.topMainInfoWrap #directArea a p.ico_arrow_w::after {
  display: inline-block;
  position: relative;
/*  top: 9px;*/
	vertical-align: middle;
  margin-left: 5px;
	margin-top: 2px;
  width: 16px;
  height: 24px;
  content:' ';
  background: url(../img/arrow_forward_ios_white_24dp.svg) no-repeat right top / 100%;
	

}
/* ━━━━ ▼AboutArea ProductArea━━━━ */
#aboutArea {
  background-color: #fff;
  padding-bottom: 40px;
  padding-top: 40px;

}
#productArea {
  padding-top: 40px;
  padding-bottom: 40px;
}
@media screen and (min-width:992px) {
  #aboutArea .inner, #productArea .inner {
    width: 886px;
    padding: 50px;
  }
}
#aboutArea .btn {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

#productArea .btn {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.enTop #aboutArea .btn{justify-content: center;}

#aboutArea .btn li {
  width: 21%;
  margin: 2%
}
#productArea .btn li {
  width: 21%;
  margin: 2%
}
#aboutArea .btn li#order1 {
  order: 1
}
#aboutArea .btn li#order2 {
  order: 2
}
#aboutArea .btn li#order3 {
  order: 3
}
#aboutArea .btn li#order4 {
  order: 4
}
#aboutArea .btn li#order5 {
  order: 5
}
#aboutArea .btn li#order6 {
  order: 6
}
#aboutArea .btn li#order7 {
  order: 7
}
#aboutArea .btn li#orderLast {
  order: 8
}
@media screen and (max-width:767px) {
  #aboutArea .btn {
    justify-content: center;
  }
 
  #aboutArea .btn li {
    width: 38%;
  }
  #productArea .btn li {
    width: 38%
  }
   #aboutArea .btn li#order4 {/*会員*/
    order: 8;
  }
}
@media screen and (max-width:575px) {
   #aboutArea .btn li#order4 {/*会員*/
        width: 50%}
	#productArea .btn li:last-child {
    width: 50%
  }
        }

#productArea p {
  color: #003377
}
#aboutArea figure, #productArea figure {}