@charset "utf-8";

/*----------------------------------------------------------
　全体
-----------------------------------------------------------*/
html {
	width: 100%;
	height: 100%;
	font-family: メイリオ, Meiryo, 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	font-size: 62.5%;/*10px相当*/
	-moz-text-size-adjust: none;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}
body {
	width: 100%;
	height: 100%;
	font-size: 16px;
	font-size: 1.6rem;
	/*background: #fff;*/
	color: #fff;
	text-align: center;
}
@media only screen and ( max-width: 749px ) {
	body {
		font-size: 1.4rem;
		line-height: 1.4;
	}
}
.left {
	float: left;
}
.right {
	float: right;
}
.clearfix:after {
  content: "";
  clear: both;
  display: block;
}
.textC {
	text-align: center;
}
.textL {
	text-align: left;
}
.textR {
	text-align: right;
}
.text_fff {
	color: #fff;
}
.red {
	color: #c3002f;
}
.text_b {
  font-weight: 700;
}
.text_small {
  font-size: 80%;
}
.text_url {
  word-break: break-all;
}
a:link, a:visited {
	color: #333;
	text-decoration: none;
}
a:hover {
	color: #005ECF;
	text-decoration: none;
}
/*イメージマップ用
IE対応：<area onFocus="this.blur();">
------------------------------------*/
area {
	border: none;
	outline: none;
}
/*******************************************************************
　ページ共通パーツ
*******************************************************************/

@media print, screen and (min-width:750px){
	.display_pc {display: block;}
	.display_sp {display: none;}
}
@media screen and (max-width:749px){
	.display_pc {display: none;}
	.display_sp {display: block;}
}
@media print, screen and (min-width:1080px){
	.display_sp2 {display: none;}
}
@media screen and (max-width:1079px){
	.display_pc2 {display: none;}
}

/*******************************************************************
　各セクション
*******************************************************************/
/*共通 ------------------------------*/
.contents {
	width: 100%;
	text-align: center;
	margin: 0 auto;
  position: relative;
}

.wide_wrapper {
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
}
.wrapper {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
.container {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
}
.box {
	width: 100%;
	max-width: 980px;
	margin: 0 auto;
}
@media only screen and ( max-width: 749px ) {
	.container {
	}
}

.attn_box {
  width: 90%;
  max-width: 980px;
  margin: 0 auto 1em;
}
.attn {
  text-align: left;
  font-size: 1.2rem;
  line-height: 1.4;
  margin: 0 auto 1em;
  color: #333;
}
@media only screen and ( max-width: 749px ) {
  .attn {
    text-align: left;
    font-size: 1.0rem;
    line-height: 1.3;
  }
}
/*----------------------------------------------------------
　ヘッダー 
-----------------------------------------------------------*/
header {
	width: 100%;
	margin: 0;
	padding: 0 0 5px;
	overflow: hidden;
}
.header_wrap {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 96%;
	max-width: 1080px;
	margin: 0 auto;
}
.header_logo{
	width: 15%;
	text-align: left;
}
.header_logo img {
	max-width: 100px;

}
.header_name {
	text-align: right;
}
.header_name img {
	max-width: 120px;
}
@media only screen and ( max-width: 749px ) {
	header {
		margin: 0 auto 0;
	  padding: 0 0;
  }
	.header_logo {
		width: 50%
	}
  .header_logo img {
    max-width: none;
  }
  .header_name {
  }
  .header_name img {
    width: 80%;
    }
}

/*----------------------------------------------------------
　メインビジュアル
-----------------------------------------------------------*/
main {
}

/* メインビジュアル背景
------------------------------------------------*/
.mv_wrap {
  background: url("../img/bg_mv1920.png") center top no-repeat;
  background-size: 100% auto;
}

@media only screen and ( max-width: 1080px) {
  .mv_wrap {
    background: url("../img/bg_mv1080.png") center top no-repeat;
    background-size: auto;
  }
}
@media only screen and ( max-width: 750px) {
  .mv_wrap {
    background: url("../img/bg_mv750.png") center top no-repeat;
    background-size: 100% auto;
  }
}
/* 紙吹雪背景
------------------------------------------------*/
.bg_kami {
  background: url("../img/bg_kamifubuki.png") center top repeat-y;
  background-size: 100% auto;
}
@media only screen and ( max-width: 750px) {
  .bg_kami {
    background: url("../img/bg_kami750.png") center top repeat-y;
    background-size: 100% auto;
  }
  .mv_wrap .bg_kami {
    background: none;
  }
}

/* リード
------------------------------------------------*/
.mv_lead {
  margin: 5% auto 0;
}
.mv_img {
  padding-bottom: 5%;
}

/*----------------------------------------------------------
　動画
-----------------------------------------------------------*/
.movie_wrap {
  background: url("../img/bg_movie.png") center top no-repeat;
  background-size: auto;
}
.movie_title {
  padding: 15% 0 0;
}
.movie_box video {
  width: calc(960 / 1080 * 100%);
  max-width: 960px;
  margin: 0 auto;
  padding: 5% 5% 15%;
}

/*----------------------------------------------------------
　歴史
-----------------------------------------------------------*/
.history_wrap {
  background: linear-gradient(to bottom,  rgb(221,236,244) 0%,rgb(250,250,221) 50%,rgb(227,242,232) 100%);
  margin-bottom: 10px;
}
.history_title {
  padding-bottom: 5%;
}
.history_box_wrap {
  padding-bottom: 15%;
}
.history_box {
  position: relative;
}
.history_img {
  position: absolute;
  top: 0;
  left: 0;
}


/* =============================================
   ① 左からスライドイン（滑らか・透明から）
   ============================================= */
.slidein_left {
  animation: slideInLeft 0.7s ease-out both;
}

/* =============================================
   ① - bounce 左からスライドイン（弾む）
   ============================================= */
.slidein_left_bounce {
  animation: slideInLeft 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes slideInLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* =============================================
   ② 右からスライドイン（滑らか・透明から）
   ============================================= */
.slidein_right {
  animation: slideInRight 0.7s ease-out both;
}

/* =============================================
   ② - bounce 右からスライドイン（弾む）
   ============================================= */
.slidein_right_bounce {
  animation: slideInRight 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* =============================================
   ③ 下から上にスライドイン（滑らか・透明から）
   ============================================= */
.slidein_up {
  animation: slideInUp 0.7s ease-out both;
}
@keyframes slideInUp {
  from {
    transform: translateY(40px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* =============================================
   ④ 上から下にスライドイン（滑らか・透明から）
   ============================================= */
.slidein_down {
  animation: slideInDown 0.7s ease-out both;
}
@keyframes slideInDown {
  from {
    transform: translateY(-40px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* =============================================
   共通：アニメーション前の非表示状態
   ============================================= */
.anim-hidden {
  opacity: 0;
  animation: none;
}
.anim-hidden.slidein_left,
.anim-hidden.slidein_left_bounce {
  transform: translateX(-100%);
}
.anim-hidden.slidein_right,
.anim-hidden.slidein_right_bounce {
  transform: translateX(100%);
}
.anim-hidden.slidein_up {
  transform: translateY(40px);
}
.anim-hidden.slidein_down {
  transform: translateY(-40px);
}

/*----------------------------------------------------------
　スライド
-----------------------------------------------------------*/
.loop-slider {
  width: 100%;
  overflow: hidden;
}
.loop-track {
  display: flex;
  width: max-content;
  animation: loop-scroll 40s linear infinite;
}
.loop-track img {
  display: block;
  flex-shrink: 0;
  height: 240px;
  width: auto;
  max-width: none;
}
@keyframes loop-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (max-width: 750px) {
  .loop-track img { height: 140px; }
}
@media (max-width: 400px) {
  .loop-track img { height: 110px; }
}

/* 動きを減らす設定のユーザーには停止 */
@media (prefers-reduced-motion: reduce) {
  .loop-track { animation: none; }
}

/*----------------------------------------------------------
　感謝
-----------------------------------------------------------*/
.thanks_wrap {
  background: #fff;
}

.thanks_title {
  padding: 10% 0 5%;
}
.thanks_box {
  width: 90%;
  max-width: 1080px;
  margin: 0 auto 5%;
  background: #F2F2F2;
}


/*----------------------------------------------------------
　ボタン
-----------------------------------------------------------*/
.btn_more {
  padding: 5% 5% 8%;
}
.challenge_wrap .btn_more {
  padding: 5% 10% 8%;
}

/*----------------------------------------------------------
　挑戦
-----------------------------------------------------------*/
.challenge_wrap {
  background: url("../img/bg_top_challenge.png") center top / auto 100% repeat-x;
}
.bg_cloud {
  background: url("../img/bg_top_challenge_cloud.png") center top / 100% auto no-repeat;
}
@media only screen and ( max-width: 1080px) {
  .bg_cloud {
    background: url("../img/bg_top_challenge_cloud1080.png") center top / 100% auto no-repeat;
  }
}
.challenge_title {
  padding: 10% 0 0;
}



/*----------------------------------------------------------
　ポップアップ内容
-----------------------------------------------------------*/
.pop_header_wrap {
  background: url("../img/pop/bg_header2.png") center top / 100% 100% no-repeat;
}

.pop_container {
  width: 90%;
  max-width: 1080px;
  margin: 0 auto;
  position: relative;
}
.pop_btn_return {
  margin: 5% auto;
}
.pop_toge .pop_btn_return {
  margin: 7% auto 15%;
}

/*先進技術
---------------------*/
.pop_tech .pop_title {
  margin: 0 auto 5%;
}
.pop_tech .pop_subtitle {
  margin: 7% auto 2%;
}

/*滋賀とともに
---------------------*/
.pop_toge .pop_title {
}
.pop_toge .pop_subtitle {
  background: url("../img/pop/bg_togeter_subtitle.png") center top no-repeat;
  background-size: cover;
  margin-top: 8%;
}
.pop_toge_ariya {
  position: absolute;
  bottom: 20%;
  right: -2%;
  width: calc(300 / 1080 * 100%);
  max-width: 300px;
}
.pop_event_item {
  margin: 5% auto;
}
/*ブログへのリンク
-----------------------*/
.pop_toge .pop_container_wrap {
  position: relative;
}
.pop_toge .pop_box_wrap {
  width: 100%;
  max-width: 1080px;
  margin: min(5%, 40px) auto 0;
}
.pop_toge .pop_box_wrap.bg_fff {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
}
.pop_toge .pop_box {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
}

.pop_toge .blue_btn {
  padding: 0 10px 10%;
  margin: 0 auto;
}

.pop_sdgs_item {
  margin: 10% auto 0;
}

/*未来への挑戦
---------------------*/
.pop_mirai_wrap {
  background: #004C9F;
}
.pop_mirai_wrap2 {
  background: url("../img/pop/bg_mirai2.png") center top / auto 100% repeat-x;
  overflow: hidden;
}
.pop_mirai_item {
  margin: 5% auto 15%;
}



/*クリッカブルマップ
------------------------------------*/
.image-map {
  position: relative;
  width: 100%;
  /*max-width: 1100px;*/ /* 任意 */
  margin: 0 auto;
}

.image-map img {
  width: 100%;
  height: auto;
  display: block;
}

.link-area {
  position: absolute;
  display: block;
  /* 透過で見えなくする */
  background-color: rgba(255, 0, 0, 0); /* テスト時に可視化 */
}

/* 座標は画像の比率で%で指定（例：画像上の位置） */
/*以下の例：画像のサイズw1100ｘh380*/
.pop_event .area1 {
  top: calc(110 / 380 * 100%);
  left: calc(730 / 1100 * 100%);
  width: calc(320 / 1100 * 100%);
  height: calc(240 / 380 * 100%);
}

/*----------------------------------------------------------
　ページの先頭に戻る
-----------------------------------------------------------*/
#pageTop {
	position: fixed;
	bottom: 60px;
	right: 1rem;
	display: block;
	z-index: 1001;
}
#pageTop a {
	display: block;
	width: 50px;
	height: 50px;
	padding: 5px 0;
	line-height: 1.2;
	border-radius: 50%;
	background: #d40039;
	text-align: center;
	color: #ffffff;
	transition: .3s;
	box-shadow: 1px 1px 4px 2px rgba(0,0,0,0.5);
}
#pageTop a:hover {
	text-decoration: none;
	opacity: 0.7;
}
@media only screen and ( max-width: 749px ) {
	#pageTop {
		bottom: 100px;
		right: 1em;
	}
}

/*----------------------------------------------------------
　フッター 
-----------------------------------------------------------*/
footer {
	width: 100%;
	margin: 0 auto;
	background: #fff;
	padding-bottom: 1em;
  color: #333;
}
@media only screen and ( max-width: 749px) {
footer {
}
}
.copy {
	padding: 1em 0;
	text-align: center;
}
@media only screen and ( max-width: 749px) {
	.copy {
	}
}

.footer_btn_wrap {
  position: sticky;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #004EA2;
}
.footer_btn_box {
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  background: url("../img/bg_footer.png") center top / 100% auto repeat-y;
}
.footer_btn {
  padding: 1% 10%;
}
/*----------------------------------------------------------
　サイドボタン 
-----------------------------------------------------------*/
.side_btn_wrap {
  position: fixed;
  top: 50%;
  right: -1%;
}

.side_btn {
  max-width: 180px;
}
@media only screen and ( max-width: 1000px) {
.side_btn {
    max-width: 140px;
  }
}






/*----------------------------------------------------------
　画像エフェクト
-----------------------------------------------------------*/
/*ふわふわ*/
.floating_img {
  animation: floating 2s ease-in-out infinite;
}

@keyframes floating {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0px);
  }
}
/*バウンド*/
.bound_img {
  animation: bound 2.5s ease-out infinite;
  opacity: 1;
}
@keyframes bound {
  0%, 40%, 55%, 65% {
    transform: scale(1.0);
  }
  50%, 60% {
    transform: scale(0.85);
  }
}


/*非表示 ------------------------------
 {
	display: none;
	height: 0;
	line-height: 0;
}
*/