@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Sawarabi+Mincho&display=swap");
*{box-sizing:border-box;}
html {
font-size: 10px;
margin-bottom: 0;
overflow-x: hidden; }
html body {
  color: #212121;
  background: #FCFCFC;
  font-size: 1.6rem; }
html main {
  width: 100%;
  position: relative; }
html article {
  position: relative; }
html body, html h1, html h2, html h3, html h4, html h5, html h6, html p, html dl, html dt {
  /* font-family: 'Noto Sans JP', sans-serif; */
  /* font-family: "MS PMincho", sans-serif; */
  font-family: '游明朝', YuMincho;
  font-weight: 600;
  font-style:normal;
  line-height: 3rem;
  margin: 0;
  padding: 0;
  margin-bottom: 0;
  padding-bottom: 0; }
html ul, html li {
  list-style: none;
  margin: 0; }
html h2{
  text-align: center;
  margin-bottom:3em;
}

@font-face {
  font-family: 'Noto Sans JP', sans-serif;
  src: url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap"); }
@font-face {
  font-family: 'AppliMincho', sans-serif;
  src: url("../font/AppliMincho.otf"); }
@font-face {
  font-family: '游明朝', YuMincho;
  src: url('../font/yumin.ttf') format('truetype');
}

/*-- ボタン基本
-------------------------------------------------------------*/
.btn{width:420px;max-width:100%;height:100px;display:flex;position:relative;align-items: center;justify-content: center;transition: color 0.5s ease-in-out;text-decoration:none;font-size:max(1.8rem, 18px);color:#212121;margin:2em auto 0;}
.btn:before{content:'';width:0;height:100%;position:absolute;top:0;left:0;transition: width 0.5s ease-in-out;}
.btn:hover:before, .button:focus:before{width:100%;transition: width 0.5s ease-in-out;}
.btn span{display:inline-block;position:relative;}
.btn span:before{content:'';width:8px;height:8px;border-top: solid 2px;border-right: solid 2px;margin-top: 0px;margin-right: -20px;position: absolute;top: 50%;right: 0;transform: rotate(45deg) translateY(-50%);transition: right 0.5s ease-in-out,border-color 0.5s ease-in-out;}
.btn:hover span:before,.btn:focus span:before,.btn:hover span:after,.btn:focus span:after{right:-7px;transition: right 0.5s ease-in-out,border-color 0.5s ease-in-out;}

/*-- 決定ボタン
-------------------------------------------------------------*/
.btn.smt_btn{color:#212121;background:none; border:2px solid #ddc085;}
.btn.smt_btn:before{background-color:#ddc085;}
.btn.smt_btn span:before{border-color:#ddc085;}
.btn.smt_btn:hover,.btn.smt_btn:focus{color:#fff;}
.btn.smt_btn:hover span:before,.btn.smt_btn:hover span:after{border-color:#fff;}

/*-- コンテンツ幅
-------------------------------------------------------------*/
.cont_s{
  width: 100%;
  max-width: 1000px;
  margin:0 auto;
}
.cont_ss{
  width: 100%;
  max-width: 560px;
  margin:0 auto;
}

/*-- ヘッダー
-------------------------------------------------------------*/
header{
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 85px;
  display: flex;
  align-items: center;
  padding: 15px 50px;
  justify-content: space-between;
  background:#000;
  z-index:1000;
}
header .h_logo{
  position:relative;
}
header nav{
  display: flex;
  align-items: center;
  justify-content: right;
}
header nav li{
  margin-right:2em;
}
header nav li.gotosite{
  padding-left:2em;
  border-left:1px solid #fff;
}
header nav li a{
  color:#fff;
  text-decoration: none;
  display: block;
  line-height: 1.3em;
}
header nav li.gotosite a{
  position:relative;
}
header nav li.gotosite a:after{
  content:"";
  width: 7px;
  height: 7px;
  position:absolute;
  top:50%;
  right:-1em;
  transform:translateY(-50%) rotate(45deg);
  border-top:1px solid #fff;
  border-right:1px solid #fff;
}

@media only screen and (max-width:1280px){
  header{padding:15px;}
}

/*-- PC版メニュー
-------------------------------------------------------------*/
#gn_menu{
  width:100%;
  height:100%;
  margin: 0;padding:0;
  z-index:1000;
  margin-left: 5%;
}
#gn_menu > ul{
  height:100%;
  margin: 0;padding:0;
  font-size:14px;
}
#gn_menu > ul > li{
  padding:10px 0;
  text-align:center;
  margin:0 10px;
}
#gn_menu ul li a{
  color:#212121;
  text-align: center;
  display: block;
  font-weight: 600;
}
#gn_menu ul li a:hover{
  color:#727272;
}
#gn_xs_menu li a{
text-align: left;
}
#gn_menu ul li span{
  color:#808080;
  font-size:11px;
  display: block;
  margin-top: 5px;
  font-weight: 400;
}

/*-- ノートPC、スマホ版メニュー
-------------------------------------------------------------*/
#gn_xs_menu{
  height: auto;
  font-size:16px;
  position: fixed;
  top: 70px;
  left: 0;
  right: 0;
  background: #000;
  z-index: 10000;
  display:none;
}
#gn_xs_menu .gn_xs_menu_inner{
  width:80%;
  max-width:1600px;
  margin: 30px auto 30px;
}
#gn_xs_menu ul{
  width:33%;
  margin: 0;padding:0;
}
#gn_xs_menu ul li{
  width:100%;
  height:33%;
  margin: 0;padding:0;
}
#gn_xs_menu ul li a{
  height: 100%;
  color:#fff;
  text-align: left;
  display: block;
  font-weight: 500;
  padding: 10px;
  transition: background 0.5s ease-in-out;
  white-space: nowrap;
}
#gn_xs_menu ul li a:hover{
  background:rgba(0,0,0,0.2);
  transition: background 0.5s ease-in-out;
}
#gn_xs_menu ul li span{
  color:#fff;
  font-size:12px;
  display: block;
  margin-top: 5px;
  font-weight: 400;
}


/*-- スマホメニュー開閉アイコン
-------------------------------------------------------------*/
#gn_menu > ul > li#gn_icon{
  display:none;
}
#gn_icon{
  width:70px;
  height:100%;
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  margin:0;
}
#gn_icon img{
  margin-bottom:2px;
}

#gn_icon .border {
  fill: #fff;
  transition: 200ms all ease;
  transform-origin: center;
}
#gn_icon.on .border1{
  transform: translate(-15px,11px) rotate(45deg);
  width: 39px;

}
#gn_icon.on .border2{
  opacity: 0;
}
#gn_icon.on .border3{
  transform: translate(-15px, -8px) rotate(-45deg);
  width: 39px;
}

/*-- メニュー切り替え
-------------------------------------------------------------*/

/*--- PC ---*/
@media screen and (min-width: 1280px){
  #gn_icon{
    display: none;
  }
  #gn_xs_menu{
    display: none;
  }
  .hide_lg{display:none;}
}

/*---  ---*/
@media screen and (max-width:1280px){
  #gn_menu{
    display:none;
  }
  .hide_xs{
    display: none;
  }
  .main img{max-width: 100%;}
}

/*-- フッター
-------------------------------------------------------------*/
footer{
  position: relative;
  width: 100vw;
  height: auto;
  padding: 35px 50px 25px;
  background:#000;
  color:#fff;
  text-align: center;
}
footer p{
  position: relative;
  padding-top:45px;
  padding-bottom:55px;
}
footer p.copyright{
  padding-top:0;
  padding-bottom:0;
}


/*-- トップ
-------------------------------------------------------------*/
.top{
  position: relative;
  width:100%;
  height: calc(100vh - 85px);
  overflow: hidden;
  margin-top: 85px;
}
.top .logo{
  max-width: 90%;
  /* position: absolute;
  top:calc(50% - 25%);
  left:calc(50% - 25%);
  transform:translate(-50%,-50%);
  transform-origin: center; */
  z-index:100;
}
.top .shiseki{
  color:#fff;
  position: absolute;
  right:50px;
  bottom:50px;
  z-index:100;
  font-size:2.6rem;
  text-shadow: 0px 0px 4px black;
}
.slideshow-container {
  position: relative;
  width:100%;
  height:100%;
}
.slide {
  min-width: 100%;
  min-height: 100%;
  position: absolute;
  left:50%;
  top:50%;
  z-index:1;
  transform:translate(-50%,-50%);
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
}
.slide.fadeIn {
  opacity: 1;
  transition: opacity 1.5s ease-in-out;
  z-index:10;
}
.slide.fadeInLast {
  z-index:1;
}
.slide img {
  min-width: 100%;
  opacity: 0;
}
.slide.fadeIn img {
  opacity: 1;
}

@media only screen and (max-width:1280px){
  .top .logo{max-height: 64%;}
  .top .shiseki{width: 100%;text-align: center;right: 0;bottom: 0;padding: 3px 0;font-size: 1.6rem;background: rgba(0,0,0,0.6);}
  /* .slide img {width: auto;opacity: 0;} */
}
/*-- イベント概要
-------------------------------------------------------------*/
.event{
  background: url('./img/event_back.jpg')repeat center;
  padding:100px 0;
}
.event .event_box{
}
.event .event_box dl{
  padding:23px 15px;
  border-bottom:1px solid #cacaca;
  display: flex;
}
.event .event_box dl:first-child{
  border-top:1px solid #cacaca;
}
.event .event_box dl dt{
  width:max(20%, 200px);
}
.event .event_box dl dd{
  width:max(80%, 800px);
}

.event_image{
  max-width: 100%;
  display: flex;
  justify-content:space-between;
  margin-left:0;
  margin-block-start:0;
  padding-inline-start: 0px;
  margin-top:2em;
}
.event_image li{
  width: 33%;
}
.event_image li img{
  width: 100%;
}

@media only screen and (max-width:1280px){
  .event{padding-left:15px;padding-right:15px;}
  .event img{max-width: 100%;}
  .event .event_box dl{
    flex-direction: column;
    padding: 23px 5px;
  }
  .event .event_box dl dt{
    width:100%;
  }
  .event .event_box dl dd{
    width:100%;
    margin:0;
  }
  .event_image{
    flex-direction: column;
  }
  .event_image li{
    width: 100%;
  }
}
/*-- 城の概要
-------------------------------------------------------------*/
.about{
  background:url('./img/about_back.svg')no-repeat bottom center #000;
  padding:100px 0;
  position: relative;
  overflow: hidden;
}
.about .about_box{
  /* writing-mode:vertical-rl; */
  height:auto;
  /* max-height:460px; */
  padding:29px 15px;
  color:#fff;
  display: flex;
  justify-content: center;
  flex-direction: column;
  background:rgba(0,0,0,0.7);
  position: relative;
  z-index:20;
}
.about .about_box p{
  /* writing-mode:vertical-rl; */
  line-height: 5.3rem;
  margin-right: 2em;
}
.about .about_map_box{
  margin-top:30px;
  text-align: center;
}
.about figcaption{
  color:#fff;
}

.about_cloud{
  position: absolute;
  opacity:0.6;
  z-index:0;
}
.about_cloud1{
  top:max(15%,215px);
  left:13%;
}
.about_cloud2{
  top:max(43%,587px);
  left:8%;
}
.about_cloud3{
  top:max(10%,142px);
  right:18%;
}
.about_cloud4{
  top:max(37%,499px);
  right:2%;
}

.about_icon1{
  width:115px;
  position: absolute;
  left:204px;
  z-index:10;
  animation:aboutIcon 20s linear -4s infinite;
}
.about_icon2{
  width:109px;
  position: absolute;
  left:128px;
  z-index:10;
  animation:aboutIcon 20s linear -8s infinite;
}
.about_icon3{
  width:85px;
  position: absolute;
  left:194px;
  z-index:10;
  animation:aboutIcon 20s linear -11s infinite;
}
.about_icon4{
  width:89px;
  position: absolute;
  left:309px;
  z-index:10;
  animation:aboutIcon 20s linear -14s infinite;
}
.about_icon5{
  width:95px;
  position: absolute;
  left:145px;
  z-index:10;
  animation:aboutIcon 20s linear -16s infinite;
}
.about_icon6{
  width:89px;
  position: absolute;
  left:254px;
  z-index:10;
  animation:aboutIcon 20s linear 0s infinite;
}

.about_icon7{
  width:115px;
  position: absolute;
  right:204px;
  z-index:10;
  animation:aboutIcon 20s linear -6s infinite;
}
.about_icon8{
  width:109px;
  position: absolute;
  right:128px;
  z-index:10;
  animation:aboutIcon 20s linear -3s infinite;
}
.about_icon9{
  width:85px;
  position: absolute;
  right:194px;
  z-index:10;
  animation:aboutIcon 20s linear -13s infinite;
}
.about_icon10{
  width:89px;
  position: absolute;
  right:309px;
  z-index:10;
  animation:aboutIcon 20s linear -9s infinite;
}
.about_icon11{
  width:95px;
  position: absolute;
  right:145px;
  z-index:10;
  animation:aboutIcon 20s linear -16s infinite;
}
.about_icon12{
  width:89px;
  position: absolute;
  right:254px;
  z-index:10;
  animation:aboutIcon 20s linear 0s infinite;
}
@keyframes aboutIcon{
  0%{transform:rotate(0);top:-200px;}
  100%{transform:rotate(360deg);top:100%;}
}

@media only screen and (max-width:1280px){
  .about .about_box{writing-mode:horizontal-tb;max-height:3000px;}
  .about .about_box p{writing-mode:horizontal-tb;margin-right: 0;}
  .about figcaption{white-space: nowrap;font-size: 1.3rem;}
  .about .about_map_box{background: rgba(0,0,0,0.7);margin-top:0;position:relative;z-index:1000;}
  .about .about_map_box figure{margin-top:0;}

  .about_icon5{left:90px;}
  .about_icon6{animation: aboutIcon 19.5s linear 0s infinite;}
  .about_icon11{right:90px;animation: aboutIcon 20s linear -17s infinite;}
}
/*-- 心字が池
-------------------------------------------------------------*/
.inden{
  background:url('./img/inden_back.png')no-repeat bottom center #000;
  position: relative;
}
.inden_container{
  position: relative;
  overflow: hidden;
  padding:100px 0;
  margin-top: -9px;
}
.inden .inden_bar1{
  height:100%;
  position: absolute;
  top:0;
  left:50px;
}
.inden .inden_bar2{
  height:100%;
  position: absolute;
  top:0;
  right:50px;
}
.inden_icon1{
  position: absolute;
  bottom:100px;
  left:15%;
}
.inden_icon2{
  position: absolute;
  top:100px;
  right:15%;
}
.inden_box p{
  color:#fff;
  line-height:3.5em;
}

/*---  ---*/
@media screen and (max-width:1280px){
  .inden_container{
    padding:100px 15px;
  }
  .inden .inden_bar1{
    display:none;
  }
  .inden_icon1{
    height:70px;
    bottom:20px;
    left:auto;
    right:30%;
  }
  .inden_icon2{
    height:70px;
    top:auto;
    bottom:20px;
    right:7%;
  }
}

/*-- アクセス情報
-------------------------------------------------------------*/
.course_container{
  display: flex;
  padding:100px 50px;
}
.course_text_box{
  width:40%;
}
.course_text_box .course_text_wrap{
  padding:0 90px;
}
.course_text_box .course_text_wrap p{
  line-height:2.6em;
}
.course_pict_box{
  width: 60%;
  margin-top: -157px;
  margin-bottom: -250px;
  z-index: 10;
  text-align: right;
}
.course_pict_box img{
  max-width: 100%;
}
.course_container2{
  max-width: 100%;
  background:url('./img/course_back.jpg') bottom center;
  padding:150px 50px 60px;
}
.course_container2 ul{
  max-width: 100%;
  display: flex;
  justify-content:space-between;
  margin-left:0;
  margin-block-start:0;
  padding-inline-start: 0px;
}
.course_container2 ul li{
  width: 25%;
}
.course_container2 ul li img{
  width: 100%;
}
@media screen and (max-width:1280px){
  .course_container{
    display: block;
    padding:100px 15px;
  }
  .course_text_box{
    width:100%;
  }
  .course_text_box .course_text_wrap{
    padding: 0;
  }
  .course_pict_box{
    width: 100%;
    margin-top: 35px;
    margin-bottom: -150px;
  }
  .course_container2{
    padding: 100px 0 60px;
  }
  .course_container2 ul{
    padding-left:0;
  }
}

/*-- アクセス情報
-------------------------------------------------------------*/
.access{
  padding:100px 0px 100px 50px;
  position: relative;
  overflow: hidden;
  background:url('./img/access_back.png');
  display: flex;
  justify-content: right;
}
.access_text_box{
  max-width: 550px;
  padding:20px;
  border:6px solid #ddc085;
  position: absolute;
  top:80px;
  left:50px;
  z-index:10;
  background: rgba(255,255,255,0.6);
}
.access_text_box h2{
  margin-bottom: 1em;
}
.access_text_box ul{
  display: flex;
  gap: 10px;
  padding: 0 0 0.8em;
}
.access_text_box li{
  border:2px solid #ddc085;
  padding-right:1em;
  flex: 1;
}
.access_text_box li b{
  background:#ddc085;
  padding:0 5px;
  display: inline-block;
}
.access_text_box li p{
  padding-left:1em;
  margin-bottom:0.4em;
}
.access_text_box h3{
  padding-left:1em;
  margin-top:0.5em;
  margin-bottom:-0.1em;
  position: relative;
}
.access_text_box h3:before{
  content:"";
  width: 10px;
  height: 10px;
  background: #ddc085;
  transform: rotate(45deg);
  display: block;
  position: absolute;
  top: 10px;
  left: 0;
}
.access_text_box p{
  margin-bottom:1.5em;
}
.access_text_box a{
  margin-left:1em;
  color:#212121;
  text-decoration: underline;
  transition: color 0.5s;
}
.access_text_box a:hover{
  margin-left:1em;
  color:#00cfff;
  text-decoration: underline;
  transition: color 0.5s;
}
.access_text_box a:after{
  content:url('img/blank_icon.svg');
  margin-left:0.5em;
}
.access_map{
  width: 70%;
  /* height: 90vh; */
  position: relative;
  top: -100px;
  right: -60px;
  margin-bottom: -108px;
}
.access_map img{
  max-width:100%;
  max-height:100%;
}

@media screen and (max-width:1280px){
  .access{
    padding: 100px 15px;
    display:block;
  }
  .access_text_box{
    width:100%;
    max-width:100%;
    position:static;
    padding: 25px 15px;
  }
  .access_text_box ul{
    flex-direction: column;
  }
  .access .access_map{
    width: 100%;
    height:auto;
    position:static;
    margin-bottom:0px;
    margin-top: 20px;
  }
}
/*--- コースの詳細 ---*/
#course_detail_container{
  /* display: none; */
  height:80vh;
  overflow-y:scroll;
  padding:45px;
  padding-bottom: 0;
  background:#fff;
}
.course_detail_box dl{
  display: flex;
  padding-bottom:30px;
}
.course_detail_box dl dd{
  width:60%;
  padding-right:30px;
  margin-left: 0;
}
.course_detail_box dl dd h3{
  padding-bottom:0.5em;
}
.course_detail_box dl dt{
  width:40%;
}
.course_detail_box dl dt img{
  width:100%;
}

@media only screen and (max-width:1280px){
  #course_detail_container{padding: 45px 10px 10px;}
  .course_detail_box dl{flex-direction: column;}
  .course_detail_box dl img{max-width:100%;}
  .course_detail_box dl dd{width:100%;padding-right:0;margin-left: 0;margin-bottom:20px;}
  .course_detail_box dl dt{width:100%;}
}