@charset "utf-8";

/* CSS Document */


/*********************************
　基本フォーマット
*********************************/
body {
  font-size: 16px;
  line-height: 1.7em;
  font-family: YakuHanJP, Lato, 'Noto Sans JP', Verdana, "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "游ゴシック", "Yu Gothic", "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
  color: #ffffff;
  background:#ffffff;
}

footer , main
{
  background:#000;
}

input, select, textarea {
  font-family: YakuHanJP, Lato, 'Noto Sans JP', Verdana, "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "游ゴシック", "Yu Gothic", "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
}

a {
  color: #fff;
}

a:hover, input[type="submit"]:hover {
  opacity: .7;
}

h3
{
  line-height: normal;
}

main{overflow:hidden;}

.contents {
  max-width: 1100px;
  /* コンテンツ横幅 */
  margin: 0 auto;
}


/*見出し*/
h4 {
  margin-bottom: 20px;
  font-size: 17px;
  margin-top: 80px;
  color: #2d6fd8;
  border-bottom: 1px solid #bababa;
  padding: 10px 0px;
}

.header-inner{
/*	width: 216px;*/
    margin: 20px 0 20px 40px;
    display: flex;
    justify-content: space-between;
    }
.header-inner .logo
{
  width:20%;
}

.header-inner img
{
  max-height: 64px;
}

/* メニュー */
header nav .pc-nav>ul {
	display: flex;
    justify-content: flex-end;
}
header nav .pc-nav>ul>li {
    text-align: center;
    padding: 10px 3%;
}

.visual {
	width: 100%;
	margin: 0; 
}
.visual video {
  width: 100%;
  height: 41vw;
/*  height: auto;        /* 高さはアスペクト比に合わせる */
  display: block;      /* 行間の余白を消す */
  object-fit: contain;
}

.bg1{
	background:url(../img/bg1.png) no-repeat;
    background-size:cover;
    min-height: 40vh;
    width: 100%;
  	display: flex;
  	align-items: center;    /* 縦中央 */
  	justify-content: center;
}
.bg1 .sec1{
  max-width: 1100px;      /* テキスト行長を制限 */
  padding: 2rem;          /* 余白（はみ出し防止） */
  box-sizing: border-box;
  color: #fff;
  text-align: center;
}
.sec1 .txt1{
    margin: -1rem 0 1.5rem 0;
    font-size: 16px;
  	}
.sec1 .reveal.txt2{
    font-size: 16px;
    margin: 0 0 2rem 0;
    transition-delay: 1s;

}
.sec1 .reveal.txt3{
    transition-delay: 2s;
    font-weight: bold;
    font-size: clamp(1.0rem, 3vw, 30px);
    line-height: 1.1;
}
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* アニメーションを無効にするユーザ設定への配慮 */
@media (prefers-reduced-motion: reduce) {
  .staggered-text .line {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

.bg2{
	padding:100px 30px 200px;
	margin: 0 10px;
	background:url(../img/bg2.png) no-repeat;
	background-position: 20% bottom;
}
.bg2 .midasi{
	max-width: 1170px;
	margin:0 auto;
}
.bg2 h2{
	text-align: center;
    font-size: 30px;
    font-weight: bold;
    margin-top: 50px;
}

.bg2 .txt{
	max-width:1170px;
	margin:50px auto;
	text-align:center;
	font-size: 16px;
}
.bg2 button{
	background: #0008;
    border: 0;
    margin: 0 auto;
    padding: 0;
    display: block;
    }
.bg2 button img{
    width: 157px;
}
.bg2 .slider{
	max-width: 1800px;
    margin: 0 auto 100px;
}
.bg2 .slide-items {
  width: 100%;
  height: 100%;
}
.bg2 .slide-items li{
	margin:0 30px;
}

.bg2 .slide-items a{
	color:#fff;
}
.bg2 .slide-items img {
  width: 100%;
  object-fit: cover;
  aspect-ratio: 19/13;
}
.bg2 .slide-items .title {
	font-size:20px;
	font-weight:bold;
	margin:15px 0;
}
.bg2 .slide-items .txt2 {
	font-size:13px;
}
.slide-arrow {
  background-color: #000;
  bottom: 0;
  height: 0;
  margin: auto;
  position: absolute;
  top: 0;
  width: 0;
}
.prev-arrow {
  position: absolute;
  display: inline-block;
  width: 26.2px;
  height: 73.1px;
  left:-35px;
}

.prev-arrow::before,
.prev-arrow::after {
  content: "";
  position: absolute;
  top: calc(50% - 0.5px);
  left: 0;
  width: 45px;
  height: 1px;
  border-radius: 9999px;
  background-color: #ffffff;
  transform-origin: 0.5px 50%;
}

.prev-arrow::before {
  transform: rotate(55deg);
}

.prev-arrow::after {
  transform: rotate(-55deg);
}
.next-arrow {
  position: absolute;
  display: inline-block;
  width: 26.2px;
  height: 73.1px;
  right:-35px;
}

.next-arrow::before,
.next-arrow::after {
  content: "";
  position: absolute;
  top: calc(50% - 0.5px);
  right: 0;
  width: 45px;
  height: 1px;
  border-radius: 9999px;
  background-color: #ffffff;
  transform-origin: calc(100% - 0.5px) 50%;
}

.next-arrow::before {
  transform: rotate(55deg);
}

.next-arrow::after {
  transform: rotate(-55deg);
}

 /* フェードイン対象の初期スタイル */
  .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 3600ms cubic-bezier(.2,.8,.2,1), transform 3600ms cubic-bezier(.2,.8,.2,1);
    will-change: opacity, transform;
  }

  /* 表示されたときのクラス */
  .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
  
  .reveal-left {
    opacity: 0;
    transform: translateX(-32px); /* 左へオフセット */
    transition: opacity 3560ms cubic-bezier(.2,.8,.2,1), transform 3560ms cubic-bezier(.2,.8,.2,1);
    will-change: opacity, transform;
  }

  /* 表示されたときのクラス */
  .reveal-left.is-visible {
    opacity: 1;
    transform: translateX(0);
  }


.bg3{
	background: url(../img/bg3.png) no-repeat;
    background-size: cover;
   /* min-height: 1600px;*/
    width: 100%;
    max-height: 2362px;
    display: flex;
    justify-content: center;
}
.bg3 .parent{
    position:relative;
  	margin-bottom: 100px;
  	width: 100%;
}
/*.bg3 .parent:before {
    content: "";
    display: block;
    padding-top: 100%;
}*/
.bg3 .midasi{
	margin-top:20px;
	width: 25%;
    position:absolute;
}
.bg3 h2{
	font-size:30px;
	font-weight:bold;
	text-align: start;
	margin: 50px 0 30px;
}  
.bg3 .inner{
	max-width: 840px;
    margin: 0 auto;
    padding: 10px;
   /* position: absolute; */
    inset: 0;
}
.bg3 h3{
	width:165px;
	margin:50px 0;
}  
.bg3 .txt{
	font-size:13px;
}
.bg3 .iframe-wrap{
	margin:100px 0;
}

iframe.youtube {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	max-width: 1200px;
	display: block;
	margin: auto;
}

.bg4{
	background:url(../img/bg4.png) no-repeat;
    background-size:cover;
    min-height: 40vh;
    width: 100%;
    display: flex;
  	justify-content: center;
  	align-items: center;
    flex-direction: column;
    padding: 10px;
}
.bg4 .inner{
	max-width:1200px;
}
.bg4 .midasi{
	max-width:1160px;
	margin-top:200px;
}
.bg4 h2{
	font-size:33px;
	font-weight:bold;
	margin:50px 0;
	text-align: center;
    color: #000;
}
.bg4 p{
	margin:50px 0;
	text-align: center;
}
.bg4 .iframe-wrap{
	margin:100px 0 200px;
}

.bg5{
	padding:100px 40px 200px;
	background:url(../img/bg5.png) no-repeat;
	background-position: top right 10%;
}
.bg5 .midasi{
	margin-top:100px;
}
.bg5 .tab{
	display:flex;
	margin: 50px 0;
}
.bg5 .tab li{
	border:1px solid #c79f62;
	margin-right: 40px;
    padding: 3px 15px;
    font-weight:bold;
    background: #000;
    cursor: pointer;
}
.bg5 .tab li.active{
	background:#c79f62;
}
.bg5 .slider .slide-items2 li .year{
	height: 45px;
    font-size: 50px;
    font-weight: bold;
    color: #c79f62;
    line-height: 45px;
}
.bg5 .slider .slide-items2 li .bd{
	border-top:1px solid #c79f62;
}
.bg5 .slider .slide-items2 li .date{
    font-weight: bold;
    margin-top:20px;
}
.bg5 .slider .slide-items2 li .title{
    margin-bottom:10px;
}
.bg5 .slider .slide-items2 li .txt{
    font-size:12px;
    /*max-width: 237px;*/
    margin-top:10px;
}
.bg5 .slider .slide-items2 li .box{
    margin: 0px 20px;
}
.bg5 .slider .slide-items2 li img{
    width:100%;
}

.bg6{
	background:url(../img/bg6.png) no-repeat;
    background-size:cover;
    min-height: 40vh;
    width: 100%;
    display: flex;
  	justify-content: center;
  	align-items: center;
    flex-direction: column;
    padding: 10px;
}
.bg6 .midasi{
	max-width:1160px;
	margin: 130px auto 80px;
}
.bg6 h2{
	font-size:33px;
	font-weight:bold;
	margin:50px 0;
	text-align: center;
}

.bg6 .sns{
	display:flex;
	flex-wrap:wrap;
	justify-content: center;
	margin: 50px 4vw 100px;
}
.bg6 .sns li{
	width: calc(20% - 40px);
    margin: 20px;
}
.bg6 .sns li p{
	font-size:14px;
}
.bg6 .sns li img{
	width:100%;
}

.bg7{
	background:#fff;
    width: 100%;
    padding: 10px;
	color:#000;
}
.bg7 .midasi{
	max-width:693px;
	margin: 130px auto 80px;
}
.bg7 h2{
	font-size:33px;
	font-weight:bold;
	margin:50px 0;
	text-align: center;
}
.bg7 .partner{
	display:flex;
	flex-wrap:wrap;
	justify-content: center;
	align-items: center;
    margin: 50px auto;
	max-width: 1200px;
}
.bg7 .partner li{
	width: calc(33% - 40px);
    margin: 20px;
    text-align: center;
}
.bg7 .partner li.single{
	width: calc(100% - 40px);
}
.bg7 .partner li.double{
	width: calc(45% - 40px);
}
.bg7 .mark{
	margin: 0 auto;
	text-align: center;
}

.bg7 .footer_logo{
	width:416px;
	margin: 20px auto 30px;
}

footer .copyright{
	font-size:12px;
	text-align:center;
	margin: 30px 0;
}
.totopfade {
  position: fixed;
    right: 30px;
    z-index: 99;
    height: 48px;
    bottom: 150px;
    width: 100px;
}


/* ニュース＆トピックス　*/
.news .bg2,
.detail .bg2{
	padding:100px 30px 200px;
	margin: 0 10px;
	background:url(../img/bg2.png) no-repeat;
	background-position: 20% bottom;
}

.detail .bg2 a.link{
	text-decoration: underline;
}

.news  .bg2 .inner,
.detail  .bg2 .inner{
	max-width: 800px;
    margin: 0 auto;
}
.news  .bg2 .midasi,
.detail  .bg2 .midasi{
	margin: 0;
    width: 500px;
}
.news  .bg2 h2,
.detail  .bg2 h2{
	font-size: 20px;
    text-align: left;
    margin: 10px 0 50px;
}

.news .list{
  list-style: none outside;
  padding: 0;
}
.news .list .item a{
  display: flex;
  flex-wrap: wrap;
  flex-wrap: nowrap;
  text-decoration: none;
  color: #fff;
  border-bottom: 1px dashed #CCC;
  padding: 20px 20px;
}
.news .list .item:first-child a{
  border-top: 1px dashed #CCC;
}
.news .list .item .date{
  margin: 0;
  min-width: 120px;
  font-size: 16px;
  color: #999;
  padding: 0 20px 0 0;
}
.news .list .item .title{
  margin: 0;
  width: 100%;
}
/* ニュース詳細 */
.detail .bg2 h3{
	font-size: 30px;
    font-weight: bold;
    margin: 10px 0 50px;
}
.detail .bg2 .txt {
    max-width: none;
    margin: 30px auto;
    text-align: left;
    font-size: 16px;
}
.detail .bg2 .flexbox {
	display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
	margin:50px 0;
}
.detail .bg2 .flexbox .item{
	margin-right:30px;
}
.detail .navi{
	display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 100px;
}
.detail .navi .btn{
	border: 1px solid #fff;
    margin: 0 30px;
    padding: 5px 20px;
    background:#000;
}

/* ページネーション */
.Pager {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 50px;
}
.Pager-Link {
  width: 45px;
  height: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent;
  font-size: 20px;
  color: #fff;
  transition: all 0.15s linear;
}
.Pager-Icon { width: 20px; }
.Pager-Link.isCurrent {
  color: #222;
  pointer-events: none;
  background:#fff;
}
.Pager-Link:not(.isCurrent):hover { opacity: 0.6; }



/*PC==========================================*/

@media print, screen and (min-width:768px) {
  .sp {
    display: none;
  }
  .pc {
    display: block;
  }

}


/*タブレット==============================================*/

@media screen and (min-width:768px) and ( max-width:1100px) {
  html {
    font-size: 3vw !important;
    /* 基本サイズ14pxで、
14/768(画面幅）*100=1.8vw) */
  }
  a:hover, input[type="submit"]:hover {
  	opacity: 1.0;
	}
  .contents {
    padding: 0 10px;
  }

	.bg3 {
		/*min-height: 1700px;*/
	}
	.bg3 h2{
		margin-top:50px;
    margin-left: 30%;
    text-align: start;
	}

  .bg3 p.tie-up-txt
  {
    margin-left: 30%;
  }
}


/*スマホ==========================================*/

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

  
.header-inner{
    margin: 20px 0 20px 20px;
}
.header-inner .logo
{
  width:auto;
}
.header-inner img
{
  height: 44px;
}

  .over {
    margin-right: -10px;
    margin-left: -10px;
  }
  .sp {
    display: block;
  }
  .pc {
    display: none;
  }
  html {
    font-size: 4.3vw;
    /* 基本サイズ14pxで、
14/320(画面幅）*100=4.3vw) */
  }
  a:hover, input[type="submit"]:hover {
  	opacity: 1.0;
	}

/* メニュー */
    .menu-triggerwrap {
        position: absolute;
        right: 10px;
        top: 15px;
        line-height: 1.2em;
        font-size: 0em;
        cursor: pointer;
        padding: 12.5px 11px;
        z-index: 900 !important;
    }
    .menu-trigger {
        position: relative;
        width: 26px;
        height: 20px;
        right: 0px;
    }
    .menu-trigger span {
        position: absolute;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: #fff;
    }
    .menu-trigger span:nth-of-type(1) {
        top: 0;
    }
    .menu-trigger span:nth-of-type(2) {
        top: 50%;
        transform: translateY(-50%);
    }
    .menu-trigger span:nth-of-type(3) {
        bottom: 0;
    }
    .menu-trigger, .menu-trigger span {
        display: inline-block;
        -webkit-transition: all .4s;
        -ms-transition: all .4s;
        -o-transition: all .4s;
        transition: all .4s;
    }
    .menu-trigger.active span:nth-of-type(1) {
        -webkit-transform: translateY(13px) rotate(-45deg);
        transform: translateY(10px) rotate(-45deg);
    }
    .menu-trigger.active span:nth-of-type(2) {
        opacity: 0;
    }
    .menu-trigger.active span:nth-of-type(3) {
        -webkit-transform: translateY(-13px) rotate(45deg);
        transform: translateY(-8px) rotate(45deg);
    }
    .spmenubox {
        width: 100%;
        height: 100%;
        position: absolute;
        display: none;
        background: rgba(0, 0, 0, 0.7);
        top: 80px;
        z-index: 777;
        left: 0px;
    }
    .spmenubg {
        position: fixed;
        z-index: 1;
        height: 100%;
        width: 100%;
        background: rgba(0, 0, 0, 0.3);
        top: 0;
        bottom: 0;
    }
    .spmenubox ul li{   
	    border-left: 4px solid #fff;
        margin: 15px 20px;
        padding: 5px 20px;
    }
    
    
	.visual video {
  		height: 97vw;
	}

  .bg2 {
    padding-top: 40px;
    padding-bottom: 100px;
    }
    
.bg2 .txt{
	margin:20px auto;
}

  .bg2 h2{
    margin-top: 40px;
    font-size: 28px;
    }
  .bg2 button img {
    width: 200px;
	}
	.bg3 {
	/*    min-height: 1700px;*/
	}
	.bg3 h2{
    font-size: 25px;
		margin-top:50px;
    margin-left: 30%;
    text-align: start;
    line-height: normal;
	}

  .bg3 p.tie-up-txt
  {
    margin-left: 30%;
  }

	.bg3 .parent {
	    margin-bottom: 40px;
	}
	.bg4 .midasi {
    	margin-top: 40px;
	}
	.bg4 h2 {
    	margin-top: 40px;
	}
	.bg4 .iframe-wrap {
	    margin-bottom: 100px;
	}
	.bg5 {
    padding-top: 50px;
 	   padding-bottom: 100px;
	}
	.bg5 .midasi {
 	   margin-top: 0;
	}
  	.bg5 .slider .slide-items2 li .txt{
    	width: 100%;
    	max-width: none;
	}
	.bg5 .tab {
	    flex-wrap: wrap;
	    justify-content: center;
	}
	.bg5 .tab li{
	    width: calc(50% - 40px);
	    margin:10px;
	}

	.bg6 .midasi {
 	   margin: 40px auto;
	}
	.bg6 h2 {
 	   margin-top: 40px;
	   line-height: normal;
  }

	.bg6 .sns {
    margin: 50px 4vw;
	 	/* display: block; //*/
	}
	.bg6 .sns li {
    	width: 45%;
      margin: 0 auto 20px;
      max-width: 400px;
    }

    
  .bg7 .partner li{
    width: calc(45% );
      margin: 10px;
  }

  .bg7 h2 {
    margin: 30px 0 20px;
  }

  .bg7 .partner {
    margin: 20px auto;
  }
  
  .bg7 .partner li.single{
    width: calc(90% - 40px);
  }
  .bg7 .partner li.double{
    width: calc(40% );
  }

	.bg7 .midasi {
    margin: 20px auto;
	}
	.bg7 .mark {
    	width: 100px;
    }

	.bg7 .footer_logo {
    	width: 200px;
    }
    .totopfade{
    	width:100px;
    	right:0;
    	}
/* ニュース＆トピックス　*/
    .news .bg2,
    .detail .bg2{
	  padding: 30px 0;
	}
    .news .bg2 .midasi,
    .detail .bg2 .midasi{
    	width:100%;
	}
    .news .list .item a{
	  flex-wrap: wrap;
	}
	.news .list .item .date{
	  min-width: 100px;
	}
	.news .list .item .title{
	  margin-top: 10px;
	}
	.detail .bg2 .flexbox {
	    display: block;
	}
	.detail .bg2 .flexbox .item {
    	width: 100%;
    	text-align: center;
    	margin-bottom: 30px;
	}
	.detail .navi{
    	margin-bottom: 200px;	
	}
	.Pager {
		margin-bottom:200px;
	}

}


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

	.bg3 {
	 /*   min-height: 1800px;*/
	}
}

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

	.bg3 {
	 /*   min-height: 1850px; */
	}
}

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

	.bg3 {
	  /*  min-height: 1900px; */
	}
}