#wrapper{
	background-color: #c3ceab;
	z-index: 0;
}
.midashi-h2{
	text-align: center;
	font-size: 35px;
	color:#3a3f2f;
	line-height: 1.5em;
	font-weight: bold;
}
.mb-img{
	display: none;
}
.mbtxt{
	display: none;
}
/*アニメーション要素のスタイル*/
.animation{
	opacity : 0;
	visibility: hidden;
	transition: 1s;
	transform: translateY(30px);
}
/*アニメーション要素までスクロールした時のスタイル*/
.active{
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
/*------------------------------------------------*/
.main-top{
width: 100vw;
max-width: 100vw;
 max-height: 100vh;
 overflow: hidden;
 background: linear-gradient(-45deg, rgba(4, 114, 124, 0.4),rgba(17, 66, 99, 0.6));
 position: relative;
}
#bg-video{
	background-attachment: fixed;
  background-position: center center;
  background-size: cover;
  left: 0;
  min-height: 100vh;
  min-width: 100vw;
  object-fit: cover;
 z-index: -100;
 background: url('../img/poster.jpg') no-repeat;
}



@media screen and (max-width: 768px) {
    #bg-video {
        width: 100vw; /* スマホ画面に合わせて幅を100%に */
        height: auto; /* 高さは自動調整 */
    }
}



/* ----- 背景の上に表示させたいコンテンツ ----- */
.header-title{
	position: absolute;
 z-index: 2; /*必ず必要*/
 top:0;
 display: flex;
 width: 100%;
 height: 100%;
 justify-content: center;
 align-items: center;
 text-align:center;
}

.header-title p{
 position: relative; /*必ず必要*/
 z-index: 2; /*必ず必要*/
 display: flex;
 width: 50%;
 justify-content: center;
 align-items: center;
 text-align:center;
 margin: auto;
}
.header-title h1 a img{
	width: 100%;
	max-width: 700px;
	margin: 0 auto;
}
@media screen and (max-width: 768px) {
    .header-title h1 a img {
        width: 100%; /* 親要素の幅に合わせる */
        max-width: 100%; /* 画面幅いっぱいまで拡大可能に */
		min-width: 300px;
        height: auto;
    }
}


/*-----------------------------------------------*/
.box1{
	width: 100%;
	display: block;
	justify-content: center;
	align-items: center;
	margin: 100px 0 0;
}
.box1 h2{
	font-size: 40px;
	line-height: 1.1em;
}
.box1 h2 img{
	width: 150px;
}
.box1-in{
	width: 100%;
	/* display: flex; */
justify-content: center;
align-items: center;
margin: 50px auto 0;
max-width: 750px;
}
.box1-in img{
	width: 100%;
	display: block;
	vertical-align: bottom;
	/* margin: 0 30px; */
}

area {
    cursor: pointer;
}
.box1-txt {
	width: 50%;
}
.box1-txt p{
	font-size: 16px;
}

.midashi-h2 {
    text-align: center; /* 画像とテキストを中央揃えにする */
    font-size: 24px; /* 見出しのフォントサイズを設定 */
    margin: 2px 0; /* 上下の余白を設定 */
}

.midashi-h2 img {
    display: block; /* 画像をブロック要素にして縦並びに */
    margin: 0 auto 10px; /* 画像を中央揃えにして、下に余白を追加 */
}

.midashi-h2 {
    line-height: 1.5; /* テキストの行間を設定 */
}

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

.box2{
	width: 100%;
	display: block;
	justify-content: center;
	align-items: center;
	margin: 100px 0 0;
	text-align: center;
}
.box2-main{
	width: 90%;
max-width: 1100px;
margin: 0px auto;
text-align: center;
}
.box2-sub-title{
	width: 90%;
	max-width: 300px;
	margin-top: 30px;
}
.box2 .midashi-h2{
	width: 90%;
max-width: 1100px;
margin: 10px auto 0;
text-align: center;
	background-image: url("../img/syukuhaku.png");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
    display: block;
    overflow: hidden;
    color: transparent !important;
    font-size: 0 !important;

    height:220px;
}
.box2 .midashi-h2 strong{
}
.box2-in{
	width: 90%;
	display: flex;
	justify-content: space-between;
margin: 30px auto 0;
max-width: 1100px;
flex-wrap: wrap;
}
/* .box2-mini{
	width: 100%;
	max-width: 350px;
	font-size: 15px;
	margin: 5px;
} */

.box2-mini {
    width: 100%; /* You can adjust the width as needed */
    max-width: 800px; /* Limit the maximum width of the article */
    margin: 0 auto; /* Centers the article horizontally */
}

/*スライドショーCSS*/
.swiper-slide img{
	width: 100%;
	display: block;
	vertical-align: bottom;
	align-items: center;
}
/*スライドショーCSS終わり*/
.box2-mini table {
	margin-top: 10px;
	width: 100%;
  border-collapse: collapse;
  border: solid 1px #6daae3;/*表全体を線で囲う*/
	background: #fff;
}
.box2-mini  table th, .box2-mini table td {
  border: solid 1px #6daae3;
	padding:7px 5px;
}
.box2-mini  table th{
	color:#6daae3;
}
.box2-mini  table td{
	text-align: left;
}
.box2-table-shop{
	text-align: center;
	font-size: 1.1em;
	background: #6daae3;
	color:#fff!important;
}

.box2-table-shop i{
	margin-right: 5px;
}
.box2-mini  table td a{
	text-decoration: none;
	color:#000;
}

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

.box3{
	width: 100%;
	display: block;
	justify-content: center;
	align-items: center;
	margin: 100px 0 0;
	text-align: center;
}
.box3-top{
	width: 100%;
	display: block;
	justify-content: center;
	align-items: center;
	background-image: url("../img/bg-timeline.png");
	background-size: cover;
	background-position: left bottom;
  z-index:-2;
  position: relative;
}
.box3-main{
	width: 100%;
max-width: 1100px;
margin: 0px auto;
text-align: center;
}
.box3 h2{
	margin: 0px auto 0;
	width: 90%;
max-width: 1100px;
}

.box3 h2 img{
	width: 100%;
}
.youtube{
	width: 90%;
display: flex;
justify-content: center;
max-width: 1100px;
margin: 0 auto;
}
.youtube-in {
  position: relative;
  width: 100%;
     height: 0;
     overflow: hidden;
  padding-bottom: 56.25%;
	z-index:3;
}
.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
/*===== Vertical Timeline =====*/
#conference-timeline {
  position: relative;
  width: 90%;
  margin: 0 auto;
  max-width:1100px;
}
#conference-timeline .timeline-start,
#conference-timeline .timeline-end {
  display: table;
  font-family: "Roboto", sans-serif;
  font-size: 18px;
  font-weight: 900;
  text-transform: uppercase;
  background: #2574b6;
  padding: 15px 23px;
  color: #fff;
  max-width: 5%;
}
#conference-timeline .conference-center-line {
  position: absolute;
  width: 3px;
  height: 100%;
  top: 0;
  left: 31px;
  margin-left: -2px;
  background: #2574b6;
  z-index: 1;
}
#conference-timeline .conference-timeline-content {
}
.timeline-article {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  margin: 50px 0 0;
	z-index: 2;
}
.timeline-article .content-right-container {
  max-width: calc(100% - 70px);
  width: 100%;
}
.timeline-article .timeline-author {
  display: block;
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
  color: #242424;
  text-align: right;
}
.timeline-article .content-right {
  position: relative;
  width: auto;
  padding: 15px;
}
.timeline-article .content-right {
	width: 100%;
	display: block;
}
.timeline-article .content-right h3{
	font-size: 27px;
	text-align: left;
	margin-bottom: 15px;
	color:#2574b6;
}
.timeline-article .content-right h3 span{
	background: linear-gradient(rgba(255,255,255,0) 60%, #FFF6B4 60%);
}
.cr-in{
width: 100%;
display: flex;
justify-content: space-between;
}
.cr-img{
width: calc(70% - 20px);
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.cr-img img{
	width: calc(50% - 10px);
	height: auto;
	border-radius: 10px;
}
.cr-txt{
width: 30%;
text-align: left;
padding: 15px;
font-size: 15px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
background: #fff;
}
.cr-txt-in{
width: 100%;
display: block;
justify-content: center;
align-items: center;
}
.cr-txt h4{
font-size: 20px;
}
.cr-txt p{
margin:  0 0 10px;
}
.cr-txt p a{
text-decoration: none;
color:#6daae3;
border-bottom: 1px solid #6daae3;
}
.cr-txt p a i{
font-size: 0.9em;
margin-right: 5px;
}

.cr-txt table {
	margin-top: 10px;
	width: 100%;
  border-collapse: collapse;
	font-size: 15px;
	  border: solid 1px #6daae3;
}
.cr-txt table th, .cr-txt table td {
  border: solid 1px #6daae3;
	padding:7px 5px;
}
.cr-txt table th{
	color:#fff;
	display: block;
	background: #6daae3;
}
.cr-txt table td{
	text-align: left;
	display: block;
}

.cr-txt  table td a{
	text-decoration: none;
	color:#000;
}
.cr-txt  table td a i{
	margin-left: 5px;
}
.timeline-article .content-left-container {
  float: left;
}
.timeline-article .content-right-container {
	margin-left: 70px;
}
.timeline-article .meta-date {
  position: absolute;
  top: 0;
  left: 31px;
  width: 62px;
  height: 62px;
  margin-left: -31px;
  color: #fff;
  border-radius: 100%;
  background: #2574b6;
	z-index: 5;
}
.timeline-article .meta-date .date,
.timeline-article .meta-date .month {
  display: block;
  text-align: center;
  height: 62px;
	vertical-align: middle;
  font-weight: 900;
}
.timeline-article .meta-date .date {
  font-size: 30px;
  line-height:  62px;
}
.timeline-article .meta-date .month {
  font-size: 18px;
  line-height: 10px;
}

.box3-in{
	width: 100%;
	text-align: center;
	padding: 50px 0;
	background-image: url("../img/bg-box3-in.png");
	background-size: cover;
}
.box3-mini{
		width: 90%;
	max-width: 1100px;
	margin: 0px auto;
}
.box3-mini h3{
	text-align: center;
	font-size: 36px;
	margin-bottom: 30px;
}

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

.box4{
	width: 100%;
	display: block;
	justify-content: center;
	align-items: center;
	margin: 100px 0 0;
	text-align: center;
}

.box4 a{
	text-decoration: none;
    color: #6daae3;
    border-bottom: 1px solid #6daae3;
}
.box4 h2{
text-align: center;
line-height: 1.1em;
}

.box4 h2 img{
	width: 150px;
}
.box4-in{
	width: 90%;
max-width: 1100px;
margin: 30px auto 0;
}
.box4-img{
	width: 100%;
	display: block;
}
.box4-mainimage{
	width: 100%;
}
.box4-img-mini{
	width: 100%;
	display: flex;
	justify-content: space-between;
	margin: 1% 0 0;
}
.box4-img-mini img{
	width: 24%;
}

.box4-shop{
	width: 100%;
	margin: 0 auto;
	max-width:1100px;
	margin: 20px auto;
	display: block;
	justify-content: center;
	text-align: center;
}
.b4-shop{
	width: 100%;
	display:block;
	justify-content: center;
	padding:3%;
	border-radius: 10px;
	margin-bottom: 50px;
	background-image: url("../img/bg-b4-shop.png");
	background-size: cover;
	border: 1px solid #f2f6fc;
}
.b4-shop:first-child{
margin-top: 50px;
}
.b4-shop:nth-child(odd){
}
.b4-shop:nth-child(even){
}
/*
.b4-shop:before{
	background-color: rgba(27, 37, 56, 1);
	content: '';
	display: block;
	transform: rotate(-30deg);
	position: absolute;
	bottom: -30px;
	right: -100px;
	width: 200px;
	height: 200px;
}
*/
.b4-shop h3{
font-size: 20px;
text-align: left;
margin-bottom: 10px;
}
.b4-shop h3 img{
	height: 50px;
	margin-right: 10px;
}
.b4-mini{
	width: 100%;
	display:flex;
	justify-content:flex-start;
	align-items: center;
	margin-top: 10px;
}
.b4-mini img{
	width: 30%;
	margin-right: 20px;
}
.b4-mini2{
	width: 100%;
	display:flex;
	justify-content:flex-start;
	align-items: center;
	margin-top: 10px;
}
.b4-mini2 img{
	width: 30%;
	margin-right: 20px;
	min-width:
}
.b4-mini-slide{
	width: 30%;
	margin-right: 20px;
}
.b4-mini-gaiyou{
	width: 70%;
}
.b4-mini-gaiyou p{
	font-size: 15px;
	text-align: left;
}
.box4-table{
	border-collapse: collapse;
	width: 100%;
	font-size: 14px;
  border-spacing: 0px 5px;
	margin-top: 20px;
}
.box4-table tr:nth-child(even){
  background-color:#fff;
}
.box4-table tr:nth-child(odd){
  background-color:#f0f0f0;
}
.box4-table tr{
}
.box4-table th{
	width: 120px;
	text-align: left;
  padding: 13px 10px;
}
.box4-table td{
text-align: left;
  padding: 10px 0;
}
.box4-table td a{
}
.box4-table td .tel{
	text-decoration: none;
	font-weight: bold;
	color:#000;
/*	border-bottom: 2px solid #000;*/
}
.box4-table td .map a{
	text-decoration: none;
	color:#fff;
background:#000;
padding: 2px 7px;
border-radius:5px;
}
.box4-table td a .yt-i{
	width: 100px;
	display: inline-block;
	vertical-align: bottom;
}
.box4-table td a .fb-i{
	width: 40px;
	margin-right: 20px;
	display: inline-block;
	vertical-align: bottom;
}
.box4-table td a .hp-i{
	width: 40px;
	margin-right: 20px;
	display: inline-block;
	vertical-align: bottom;
}
.honbun{
	margin-top: 15px;
	font-size: 15px;
	text-align: left;
}
.honbun:first-child{
	margin-top: 0;
}
.readmore{
    position: relative;
    box-sizing: border-box;
    /*以下お好み*/
    /* ボーダーを付ける場合 */
    padding: 20px 0;
}

.readmore-content{
    position: relative;
    overflow: hidden;
    /*以下お好み*/
    /*高さの初期値*/
    height: 5px;
}
.readmore-content::before {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    content: "";
    /*以下お好み グラデーションの色と高さ 高さはreadmoreのheight以下にすること*/
    height: 50px;
		/*
    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0.8) 50%, #fff 100%);
    background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0.8) 50%, #fff 100%);
		*/
}

.readmore-content img{
	width: 100%;
	margin: 20px 0;
}
.box4-img-readmore{
	width: 100%;
	display: flex;
	justify-content: space-between;
	margin: 20px 0;
}
.box4-img-readmore img{
	display: block;
	vertical-align: bottom;
	width: 49%!important;
	margin: 0!important;
}
/* 続きを読むボタン */
.readmore-label{
    display: table;
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    margin: 0px auto 0;
    z-index: 2;
    padding: 2px 10px;
    background-color: #3e6dbd;
    border-radius: 15px;
    color: #FFF;
		font-size: 15px;
		width: 120px;
}
.readmore-label:before{
    content: '▼ 続きを読む';
}

.readmore-check{
    display: none;
}
/*チェック時にボタンを非表示*/
.readmore-check:checked ~ .readmore-label{
    position: static;
    transform: translateX(0);
    -webkit-transform: translateX(0);
		margin-top: 10px;
    /* 「続きを読む」を押した後、元に戻す必要がない場合は、上のオプションを消してこの1行だけにする */
    /* display: none; */
}
.readmore-check:checked ~ .readmore-label:before{
    content: '▲ 閉じる';
}
/*チェック時に高さを自動に戻す*/
.readmore-check:checked ~ .readmore-content{
    height: auto;
}
/*チェック時グラデーション等を削除*/
.readmore-check:checked ~ .readmore-content::before {
    display: none;
}
/*---------------------------------------------*/

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

.box5{
	width: 100%;
	display: block;
	justify-content: center;
	align-items: center;
	margin: 100px 0 0;
	text-align: center;
	padding-top: 50px;
	background-image: url("../img/bg-box3-in.png");
	background-size: contain;
	background-repeat: repeat-y;
}
.box5 a{
	text-decoration: none;
    color: #6daae3;
    border-bottom: 1px solid #6daae3;
}
.box5 h2{
text-align: center;
color:#000;
}
.box5-in{
	width:90%;
max-width: 1100px;
margin: 30px auto 0;
}
.box5-img{
	width: 100%;
	display: block;
}
.box5-img-mini{
	width: 100%;
	display: flex;
	justify-content: space-between;
	margin: 1% 0 0;
}
img.b5i-1{
	width: 39%;
}
img.b5i-2{
	width: 59%;
}
.box5-txt{
	margin: 20px 0;
	text-align: left;
	font-size: 15px;
	background: #fff;
	padding: 10px;
	border-radius: 10px;
}
.box5-txt ul{
}
.box5-txt ul li{
	list-style: none;
	margin-bottom: 10px;
}
.box5-txt ul li:last-child{
	margin-bottom: 0px;
}

/*スライドショーのCSS*/

 
/*---------------------------------------------*/
@media only screen and (max-width: 830px) {
	.midashi-h2{
		text-align: center;
		font-size: 20px;
		color:#3a3f2f;
	}
	.box1{
		margin: 60px 0 0;
	}
	.box1-in{
		display: block;
	margin: 20px auto 0;
	}
	.box1-in img{
		width: 100%;
		max-width: 450px;
		margin-right: 0px;
		margin: 0 auto;
	}
	.box1-txt {
		width: 100%;
		margin-top: 20px;
	}
	.box1-txt p{
		font-size: 15px;
	}

	.header-title h1 img {
		width: 100%;
		max-width: 500px;
		margin: 0 auto;
		/* padding-bottom: 50px; */
	}
	/*---------------------------------------------*/
.box2{
	margin: 60px 0 0;
}
.box2 .midashi-h2{
}
.box2-in{
	width: 90%;
	display: block;
	justify-content: center;
margin: 20px auto 0;
flex-wrap:nowrap;
}

.box2-mini{
	max-width: 450px;
	margin: 5px auto 50px;
}
/*---------------------------------------------*/
  #conference-timeline .timeline-start,
  #conference-timeline .timeline-end {
    margin: 0;
  }
  #conference-timeline .conference-center-line {
  left: 25px;
  }
.timeline-article {
  margin: 30px 0 0;
}
  .timeline-article .meta-date {
    margin-left: 0;
    left: 20px;
  }

	.timeline-article .content-right-container {
	  max-width: calc(100% - 50px);
	  width: 100%;
    float: none;
    margin-left: 50px;
    min-height: 53px;
  }
  .timeline-article .content-left-container {
    margin-bottom: 20px;
  }
.timeline-article .meta-date {
  left: 0px;
  width:50px;
  height: 50px;
}
.timeline-article .meta-date .date {
  font-size: 25px;
  line-height: 55px;
}
.timeline-article .content-right {
padding: 10px;
}
.timeline-article .content-right h3{
	font-size: 24px;
	margin-bottom: 10px;
}
.cr-in{
width: 100%;
display: block;
justify-content:center;
}
.cr-img{
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.cr-img img{
	width: calc(50% - 5px);
	height: auto;
}
.cr-txt{
width:100%;
margin: 20px 0 0;
background: none;
padding: 0;
}
.cr-txt table{
	background: #fff;
}
.box3-in{
}
.box3-mini{
}
.box3-mini h3{
	font-size: 30px;
}
/*---------------------------------------*/

.box4{
	width: 100%;
	display: block;
	justify-content: center;
	align-items: center;
	margin: 60px 0 0;
	text-align: center;
}
.box4-in{
margin: 30px auto 0;
}
.box4-img-mini{
	width: 100%;
	display: flex;
	justify-content:space-between;
	flex-wrap: wrap;
}

.box4-img-mini img{
	width: 50%;
}

.b4-mini{
	width: 100%;
	display:block;
	justify-content:center;
	align-items: center;
	text-align: center;
	margin-top:0px;
}
.b4-mini img{
	width: 100%;
	margin-right: 0px;
	margin: 0 auto;
	max-width: 300px;
}
.b4-mini2{
	width: 100%;
	display:block;
	justify-content:center;
	align-items: center;
	text-align: center;
	margin-top:0px;
}
.b4-mini2 img{
	width: 100%;
	margin-right: 0px;
	margin: 0 auto;
	max-width: 300px;
}
.b4-mini-slide{
	width: 100%;
	margin-right: 0px;
	margin: 0 auto;
	max-width: 300px;
}
.b4-mini-gaiyou{
	width: 100%;
	margin: 20px 0 0;
	text-align: left;
}
.b4-shop{
	padding:15px;
	border-radius: 10px;
	margin-bottom: 120px;
}
.b4-shop h3{
font-size: 20px;
text-align: left;
margin-bottom:10px;
}
/*---------------------------------------*/

.box4-table th{
	width: 80px;
}
/*---------------------------------------*/
.box5{
	margin: 60px 0 0;
}
.box5-img-mini{
	width: 100%;
	display: block;
	justify-content: center;
}
img.b5i-1{
	width: 100%;

}
img.b5i-2{
	width: 100%;
}
/*---------------------------------------*/
}
@media only screen and (max-width: 500px) {
.pc-img{
	display: none;
}
.mb-img{
	display: block;
}
	.header-title h1 img {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
	/* padding-bottom: 50px; */
}
	.box1 h2 {
    font-size: 20px;
    line-height: 1.1em;
}
.box2 .midashi-h2{
	height:150px;
}
	.box3-top{
		background-image: url("../img/bg-box3-in-mb.png");
	}
	#conference-timeline {
    width: 90%;
		margin: 0 auto;
		padding-bottom: 30px;
}
  #conference-timeline .conference-center-line {
  display: none;
  }
  .timeline-article .meta-date {
    margin-left: 0;
    left: 0px;
  }
	.timeline-article .content-right {
    padding: 3px 5px;
}
.timeline-article .content-right h3{
	font-size: 20px;
    margin-left: 36px;
}
	.timeline-article .content-right-container {
		margin-left: 0;
    min-height: 40px;
		max-width: 100%;
  }
.timeline-article .meta-date {
  width:36px;
  height:36px;
}
.timeline-article .meta-date .date {
  font-size:24px;
  line-height:36px;
}
	.cr-img{
		width: 100%;
		display: block;
		justify-content: center;
	}
	.cr-img img {
    width: 100%;
    height: auto;
}
.cr-txt{
	background: none;
}
.box3-mini h3 {
    font-size: 30px;
		line-height: 1.7em;
}
.box4 h2 {
	width: 90%;
	margin: 0 auto;
	line-height: 1.2em;
}
.box4 h2 div{
	font-size:5.2vw;
}
.box5 h2{
	font-size:5.2vw;
}
.welcomehouse{
	font-size: 12px;
}
.pctxt{
	display: none;
}
.mbtxt{
	display: block;
}
.b4-shop {
		margin-bottom:80px;
}
.box5 h2 {
	width: 90%;
	margin: 0 auto;
}
}
@media only screen and (max-width: 400px) {
	.box3-mini h3 {
		font-size:6.4vw;
	}
	.box4 h2 div{
		font-size:5.6vw;
	}
	.box5 h2{
		font-size:5.6vw;
	}
}

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

	.box2 .midashi-h2{
		height:120px;
	}
	.box3-mini h3 {
	}
	.b4-shop {
			margin-bottom:50px;
	}
}