@charset "UTF-8";
/**
*
* @charset="UTF-8"
* kyokasho02.css
*
**/
/* reset style */
div#containts_body {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#kyokasho .kyokasho-column.kyokasho2_wrap{display: block;}

/* contents style
------------------------------------------------ */
#kyokasho .kyokasho-body{box-sizing:border-box;margin:30px auto;width:732px;font-family: arial;}
#kyokasho .kyokasho-body .kyokasho-body-wp{margin: 30px auto;width: 100%;box-sizing: border-box;}
#kyokasho .kyokasho02_wrap{
  text-align:center;
}

/*-------------------
  KV 
-------------------*/
#kyokasho .main_vi {
  background:#cdd78f url(/kurashinote/kyokasho/img/k02/bg.png) top center no-repeat;
  position: relative;
  text-align: center;
}
#kyokasho .main_vi .caption {
  margin: 0 auto;
  position: absolute;
  top: 2%;
  left: 50%;
  transform: translateX(-50%);
}
#kyokasho .main_vi .text {
  display: block;
  margin: 0 auto;
  position: absolute;
  top: 48%;
  left: 50%;
  transform: translateX(-50%);
  color: #231815;
  line-height: 2;
  width: 450px;
}
#kyokasho .main_vi .note {
  display: block;
  margin: 0 auto;
  position: absolute;
  top: 94%;
  left: 50%;
  transform: translate(-50%,-50%);
  font-size: 10px;
  color: #483f3d;
  font-weight: normal;
  line-height: 1.6;
}

/*-------------------
  NAVI
-------------------*/
#hd_navi {
    position: absolute;
    top: 65%;
    left: 50%;
    transform: translateX(-50%);
    width: 604px;
}
#hd_navi ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
#hd_navi ul:nth-child(1) {
  justify-content: flex-start;
  margin-bottom: 5px;
}
#hd_navi ul:nth-child(2) {
  justify-content: flex-end;
}
#hd_navi ul li {
  margin-left: -15px;
}
#hd_navi ul li:first-child,
#hd_navi ul:nth-child(2) li:first-child {
  margin-left: 0;
}

#ft_navi {
  display: none;
  position: relative;
  width: 100%;
}
#ft_navi ul {
 display: flex;
  justify-content: space-around;
  align-items: center;
}
#ft_navi ul li {
  width: 80px;
  position: relative;
}
#ft_navi .fixed {
  position: fixed;
  bottom: 0;
  width: 810px;
  padding: 10px 0 0;
  z-index: 100;
  background-color: rgba(255,255,255,1);
  transition: all 0.3s ease-in-out;
  border-top: 6px solid #f9f346;
}
#ft_navi li+li::before {
  display: block;
  content: '';
  width: 1px;
  height: 10px;
  position: absolute;
  top: calc(50% - 5px);
  left: -12px;
  width: 10px;
  height: 10px;
  border-top: 1px solid #8f7b0c;
  border-right: 1px solid #8f7b0c;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
#ft_navi ul li a {
  color: #000 !important;
  text-decoration: none;
}


/*-------------------
  共通
-------------------*/
#kyokasho div[id*="sec"] { 
  background: #cdd78f url(/kurashinote/kyokasho/img/k02/bg.png) top center no-repeat;
  padding: 50px 0 20px;
 }
#kyokasho .inner {
  width: 603px;
  margin: 0 auto;
  /* padding-top: 35px; */
  position: relative;
}
#kyokasho div[id*="sec"] .inner {
  background-color: #fff;
}
#kyokasho div[id*="sec"] .inner::before {
  background: transparent url(/kurashinote/kyokasho/img/k02/sec_inner_bg01.png) center top no-repeat;
  width: 603px;
  height: 3px;
  content: "";
  display: block;
}
#kyokasho div[id*="sec"]  .inner::after {
  background: transparent url(/kurashinote/kyokasho/img/k02/sec_inner_bg02.png) center bottom no-repeat;
  width: 603px;
  height: 3px;
  content: "";
  display: block;
}

#kyokasho .inner .l_title {
  z-index: 5;
  position: absolute;
  left: -2%;
  top: -2%;
}
#kyokasho .inner .title {
  margin: 35px 0 25px 20px;
}
#kyokasho .inner .r_title {
  z-index: 5;
  position: absolute;
  right: -5%;
  top: -3%;
}
#kyokasho .inner .detail {
  padding-bottom: 5px;
}
/* #kyokasho .inner .point::before {
  background: transparent url(/kurashinote/kyokasho/img/k02/point_title.png) top center no-repeat;
  width: 290px;
  height: 44px;
  content: "";
  display: block;
  margin: 0 auto;
  position: absolute;
  top: -20%;
  left: 0;
  right: 0;
} */
#kyokasho .inner .point {
  /* background: transparent url(/kurashinote/kyokasho/img/k02/point_bg.png) center bottom repeat-y; */
  width: 562px;
  display: block;
  margin: 10px auto 20px;
  background-size: 100% auto;
  /* border-top-left-radius: 35px;
  border-bottom-right-radius: 35px;
  position: relative; */
}
#kyokasho .inner .point span {
  display: block;
  /* width: 520px; */
  width: 535px;
  text-align: left;
  margin: 0px auto 0;
  padding: 50px 0 15px;
  /* line-height: 1.8; */
  line-height: 1.5;
  color: #38547d;
  /* letter-spacing: -0.4px; */
}

/*-------------------
  sec01
-------------------*/
#kyokasho .sec01 .inner {height: 777px;}
#kyokasho .sec01 .inner .point {
  background: transparent url(/kurashinote/kyokasho/img/k02/sec01_point.png) top center no-repeat;
}

/*-------------------
  sec02
-------------------*/
#kyokasho .sec02 .inner {height: 752px;}
#kyokasho .sec02 .inner .point {
  background: transparent url(/kurashinote/kyokasho/img/k02/sec02_point.png) top center no-repeat;
}

/*-------------------
  sec03
-------------------*/
#kyokasho .sec03 .inner {height: 795px;}
#kyokasho .sec03 .inner .point {
  background: transparent url(/kurashinote/kyokasho/img/k02/sec03_point.png) top center no-repeat;
}

/*-------------------
  sec04
-------------------*/
#kyokasho .sec04 .inner {height: 794px;}
#kyokasho .sec04 .inner .point {
  background: transparent url(/kurashinote/kyokasho/img/k02/sec04_point.png) top center no-repeat;
}

/*-------------------
  sec05
-------------------*/
#kyokasho .sec05 .inner {height: 925px;}
#kyokasho .sec05 .inner .point {
  background: transparent url(/kurashinote/kyokasho/img/k02/sec05_point.png) top center no-repeat;
}

/*-------------------
  sec06
-------------------*/
#kyokasho .sec06 .inner {height: 853px;}
#kyokasho .sec06 .inner .point {
  background: transparent url(/kurashinote/kyokasho/img/k02/sec06_point.png) top center no-repeat;
}

/*-------------------
  sec07
-------------------*/
#kyokasho .sec07 .inner {height: 898px;}
#kyokasho .sec07 .inner .point {
  background: transparent url(/kurashinote/kyokasho/img/k02/sec07_point.png) top center no-repeat;
}

/*-------------------
  sec08
-------------------*/
#kyokasho .sec08 .inner {height: 827px;}
#kyokasho .sec08 .inner .point {
  background: transparent url(/kurashinote/kyokasho/img/k02/sec08_point.png) top center no-repeat;
}

/*-------------------
  sec09
-------------------*/
#kyokasho .sec09 .inner {height: 903px;}
#kyokasho .sec09 .inner .point {
  background: transparent url(/kurashinote/kyokasho/img/k02/sec09_point.png) top center no-repeat;
}

/*-------------------
  sec10
-------------------*/
#kyokasho .sec10 .inner {height: 850px;}
#kyokasho .sec10 .inner .point {
  background: transparent url(/kurashinote/kyokasho/img/k02/sec10_point.png) top center no-repeat;
}
@media all and (-ms-high-contrast: none){
  #kyokasho div[id*="sec"] .inner{
    height: 100% !important;
  }
}

/*-------------------
  sec11
-------------------*/
#kyokasho .sec11{
  background: #e6d4b2 url(/kurashinote/kyokasho/img/k02/sec11_bg.png) top center no-repeat;
  height: 541px;

}
#kyokasho .sec11 .inner {
  padding-top: 50px;
}
#kyokasho .sec11 .kyokasho_ft_nav {
  background: #e6d4b2 url(/kurashinote/kyokasho/img/k02/kyokasho_ft_nav_bg.png) top center no-repeat;
  height: 254px;
  width: 620px;
  padding-top: 40px;
  margin-top: 30px;
}
#kyokasho .sec11 .kyokasho_ft_nav ul {
  margin-top: 20px;
  display: flex;
  justify-content: space-around;
  padding: 0 55px;
}