@charset "UTF-8";


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

CSS Information

Site URL:    http://niwanowa.info/
File name:    style.css
Copyright:    (c)「にわのわ」実行委員会

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

@import url("../../asset/css/normalize.css");
@import url("https://fonts.googleapis.com/earlyaccess/hannari.css");
@import url("https://fonts.googleapis.com/earlyaccess/sawarabimincho.css");
@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");

/*---------------------------------------------
__fonts
---------------------------------------------*/
@font-face {
  font-family: 'NotoSansCJKjp';
  font-style: normal;
  font-weight: 400;
  src:
    url('../../asset/fonts/NotoSansCJKjp-hinted-min/NotoSansCJKjp-Regular-min.woff2') format('woff2'),
    url('../../asset/fonts/NotoSansCJKjp-hinted-min/NotoSansCJKjp-Regular-min.woff') format('woff'),
}
@font-face {
  font-family: 'NotoSansCJKjp';
  font-style: normal;
  font-weight: 700;
  src:
    url('../../asset/fonts/NotoSansCJKjp-hinted-min/NotoSansCJKjp-Bold-min.woff2') format('woff2'),
    url('../../asset/fonts/NotoSansCJKjp-hinted-min/NotoSansCJKjp-Bold-min.woff') format('woff'),
}

@font-face {
  font-family: 'NotoSerifCJKjp';
  font-style: normal;
  font-weight: 400;
  src:
    url('../../asset/fonts/NotoSerifCJKjp-hinted-min/NotoSerifCJKjp-Regular-min.woff2') format('woff2'),
    url('../../asset/fonts/NotoSerifCJKjp-hinted-min/NotoSerifCJKjp-Regular-min.woff') format('woff');
}
@font-face {
  font-family: 'NotoSerifCJKjp';
  font-style: normal;
  font-weight: 500;
  src:
    url('../../asset/fonts/NotoSerifCJKjp-hinted-min/NotoSerifCJKjp-Medium-min.woff2') format('woff2'),
    url('../../asset/fonts/NotoSerifCJKjp-hinted-min/NotoSerifCJKjp-Medium-min.woff') format('woff');
}
@font-face {
  font-family: 'NotoSerifCJKjp';
  font-style: normal;
  font-weight: 700;
  src:
    url('../../asset/fonts/NotoSerifCJKjp-hinted-min/NotoSerifCJKjp-Bold-min.woff2') format('woff2'),
    url('../../asset/fonts/NotoSerifCJKjp-hinted-min/NotoSerifCJKjp-Bold-min.woff') format('woff');
}

/*---------------------------------------------
__common
---------------------------------------------*/
body {
font-family: 'NotoSerifCJKjp', serif;
font-size: 62.5%;
text-align: center;
word-break: break-all;
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: 'palt';
}
_::-webkit-full-page-media, _:future, :root body {
  font-feature-settings: "pkna";
}
.clearfix {
zoom:1;
}
.clearfix:after {
content: "";
display: block;
clear: both;
}
.sp-br {
  display: none;
}

@media screen and (max-width: 767px) {
.sp-br {
  display: inline;
}
.pc-br {
  display: none;
}
}
.body-fixed {
  position: fixed;
  width: 100%;
  height: 100%;
}

/*---------------------------------------------
__header
---------------------------------------------*/
#wrap {
  position: relative;
}
#header {
  background-color: rgba(255,255,255,.7);
  height: 70px;
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 9999;
}
#cloneHeader {
  background-color: #44712C;
  height: 70px;
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 10000;
  transition: .3s;
  transform: translateY(-100%);
}
#cloneHeader.is-show {
  transform: translateY(0);
}
.logo {
  text-align: left;
  position: absolute;
  left: 30px;
  top: 12px;
  z-index: 10;
}
.logo a {
  display: inline-block;
}
.logo object {
  pointer-events: none;
}
.sp-logo {
  display: none;
}
.gNav {
  text-align: right;
  display: block;
  position: absolute;
  right: 30px;
  top: 16px;
}

@media screen and (min-width: 961px) {
.gNav {
  display: block!important;
}
}

.gNav ul li {
  font-size: 1.4em;
  font-weight: 500;
  display: inline-block;
  margin: 0 0 0 1em;
}

@media screen and (min-width: 961px) {
.gNav ul li a {
  color: #000;
  display: inline-block;
  text-decoration: none;
  position: relative;
}
#cloneHeader .gNav ul li a {
  color: #FFF;
}

.gNav ul li a::after {
  content: '';
  position: absolute;
  bottom: -0.5em;
  left: 0;
  width: 100%;
  height: 1px;
  -webkit-transform: scaleX(0);
  -ms-transform: scaleX(0);
  transform: scaleX(0);
  background-color: #000;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
}
#cloneHeader .gNav ul li a::after {
  background-color: #FFF;
}
.gNav ul li a:hover::after {
  -webkit-transform: scaleX(1);
  -ms-transform: scaleX(1);
  transform: scaleX(1);
}
}
.toggleBtn {
  display: none;
}

@media screen and (max-width: 960px) {
#header {
  background: none;
  height: auto;
}
#cloneHeader {
  display: none!important;
}
.logo {
  display: none;
}
.sp-logo {
  display: block;
  text-align: center;
  margin: 0;
  padding: 50px 0 0;
}
.gNav {
  text-align: center;
  display: none;
  background: rgba(255, 255, 255, 0.9);
  height: 100vh;
  width: 100%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 10000;
  -webkit-transition: .3s;
  transition: .3s;
}
.gNav.active {
  display: block;
}
.gNav ul {
  letter-spacing: -0.5em;
  text-align: left;
  max-width: 768px;
  margin: 0 auto;
  padding: 30px 0 0;
}
.gNav ul li {
  font-size: 1.5em;
  line-height: 1.4;
  color: #000;
  letter-spacing: 0.12em;
  text-align: center;
  vertical-align: top;
  width: 100%;
  margin: 0;
  padding: 0 0 1.5em;
  list-style: none;
}
.gNav ul li a {
  text-decoration: none;
  color: #000;
}
.toggleBtn {
  display: block;
  width: 32px;
  height: 24px;
  position: absolute;
  left: 24px;
  top: 20px;
  z-index: 10001;
  cursor: pointer;
}
.toggleBtn span {
  display: inline-block;
  background-color: #CCC;
  height: 1px;
  width: 100%;
  position: absolute;
  left: 0;
}
.toggleBtn,
.toggleBtn span {
  -webkit-transition: all .4s;
  transition: all .4s;
  box-sizing: border-box;
}
.toggleBtn span:nth-of-type(1) {top: 0;}
.toggleBtn span:nth-of-type(2) {top: 11px;}
.toggleBtn span:nth-of-type(3) {bottom: 0;}
.gNav.active + .toggleBtn span:nth-of-type(1) {
  background-color: #44712C;
  -webkit-transform: translateY(11px) rotate(-45deg);
  transform: translateY(11px) rotate(-45deg);
}
.gNav.active +.toggleBtn span:nth-of-type(2) {
  opacity: 0;
}
.gNav.active + .toggleBtn span:nth-of-type(3) {
  background-color: #44712C;
  -webkit-transform: translateY(-11px) rotate(45deg);
  transform: translateY(-11px) rotate(45deg);
}
}

/*---------------------------------------------
__mainVi
---------------------------------------------*/
#mainVi {
  height: 500px;
  width: 100%;
  position: fixed;
  top: 0;
}
#mainVi.mainVi2025 {
  background: url('../images/main2025_bg.jpg') no-repeat center 85% / cover;
}
#mainVi.mainVi2026 {
  background: url('../images/main2026_bg.jpg') no-repeat center 85% / cover;
}
#mainVi .titleBox {
  position: absolute;
  top: 40%;
  left: 0;
  right: 0;
}
#mainVi h1 {
  font-family: 'Hannari','NotoSerifCJKjp', serif;
  font-size: 5.4em;
  line-height: 1.3;
  font-weight: 400;
  color: #FFF/*#44712C*/;
  letter-spacing: 0.12em;
  margin: 0;
}
#mainVi h1 span {
  font-size: 43%;
  display: block;
  letter-spacing: 0;
  margin: 0 0 0 -0.5em;
}
#mainVi p {
  font-size: 2em;
  line-height: 1.6;
  font-weight: 500;
  color: #FFF/*#44712C*/;
  letter-spacing: 0.15em;
  margin: 1em 0 0;
}
#mainVi p span {
  margin: 0 0 0 1em;
}
small {
  font-size:60%;
  display: block;
}

@media screen and (max-width: 767px) {
#mainVi {
  /*background: linear-gradient(-45deg, rgba(29, 151, 108, .2), rgba(147, 249, 185, .4)), url('../images/main_bg.jpg') no-repeat center center / cover;*/
  height: 320px;
}
#mainVi .titleBox {
  top: 25%;
}
#mainVi h1 {
  font-size: 3.4em;
  line-height: 1.3;
}
#mainVi p {
  font-size: 1.8em;
}
#mainVi p span {
  display: block;
  margin: 0;
}
}

/*---------------------------------------------
__content
---------------------------------------------*/
#content {
  background-color: #FFF;
  position: relative;
  top: 500px;
  z-index: 100;
}
#content .blockTitle {
  font-family: 'Hannari','NotoSerifCJKjp', serif;
  font-size: 2.4em;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0.15em;
  margin: 0;
  padding: 0 0 1.5em;
}
#content .boxTitle {
  font-size: 1.8em;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: 0.1em;
  margin: 0;
  padding: 0 0 1em;
}
#content .boxTitle.gr {
  color: #44712C;
}
.inner {
  width: 960px;
  margin: 0 auto;
}

@media screen and (max-width: 980px) {
#content .blockTitle {
  font-size: 2em;
  padding: 0 0 1em;
}
#content .boxTitle {
  font-size: 1.6em;
}
.inner {
  width: auto;
  margin: 0 10px;
}
}

@media screen and (max-width: 767px) {
#content {
  top: 320px;
}
}

/*---------------------------------------------
__intro
---------------------------------------------*/
#intro {
  padding: 80px 0 60px;
}
#intro h2 {
  font-family: 'Hannari','NotoSerifCJKjp', serif;
  font-size: 2.8em;
  line-height: 1.6;
  font-weight: 400;
  margin: 0;
  padding: 0 0 0.5em;
}
#intro p {
  font-size: 1.4em;
  line-height: 2.4;
  letter-spacing: 0.2em;
  padding: 0 0 0.5em;
}
#intro p + p {
  font-size: 1.6em;
}

@media screen and (max-width: 767px) {
#intro {
  padding: 40px 0 20px;
}
#intro h2 {
  font-size: 1.8em;
  line-height: 1.8;
  text-align: left;
  padding: 0 0 0.5em;
}
#intro p {
  font-size: 1.3em;
  line-height: 2.2;
  letter-spacing: 0.1em;
  text-align: left;
  padding: 0 0 0.5em;
}
#intro p + p {
  font-size: 1.3em;
}
}

/*---------------------------------------------
__date
---------------------------------------------*/
#date {
  background-color: #E2EAE1;
  padding: 80px 0;
}
#date .txt_l {
  font-size: 2em;
  line-height: 2;
  letter-spacing: 0.15em;
  margin: 0 0 0.5em;
}
#date .txt {
  font-size: 1.4em;
  line-height: 2;
  letter-spacing: 0.15em;
  margin: 0;
}
@media screen and (max-width: 767px) {
  #date {
    padding: 40px 0;
  }
  #date .txt_l {
    font-size: 1.6em;
  }
  #date .txt {
    font-size: 1.3em;
  }
}

/*---------------------------------------------
__venue
---------------------------------------------*/
#venue {
  padding: 80px 0;
}
#venue .txt_l {
  font-size: 2em;
  line-height: 1.8;
  letter-spacing: 0.15em;
  margin: 0;
}
#venue .txt_l span {
  font-size: 80%;
}
@media screen and (max-width: 767px) {
  #venue {
    padding: 40px 0;
  }
  #venue .txt_l {
    font-size: 1.6em;
  }
}

/*---------------------------------------------
__requirement
---------------------------------------------*/
#requirement {
  background-color: #E2EAE1;
  padding: 80px 0;
}
#requirement ul {
  text-align: left;
  list-style-position: inside;
  margin: 0;
  padding: 0 0 2em 1em;
}
#requirement li {
  font-size: 1.4em;
  line-height: 2.4;
  letter-spacing: 0.15em;
  text-indent: -1.5em;
  margin: 0;
  padding: 0 0 0 1em;
}
#requirement li span {
  color: #44712C;
}
#requirement li a {
  color: #44712C;
}
@media screen and (min-width: 980px) {
#requirement li a:hover {
  text-decoration: none;
}
}
#requirement .inner > p {
  font-size: 1.3em;
  line-height: 2;
  letter-spacing: 0.15em;
  color: #C30D23;
  text-align: left;
  margin: 1em 0 2em;
  padding: 1em 1.5em;
  border: 1px solid;
}
#requirement dl {
  text-align: left;
  margin: 0;
  padding: 1.5em 0 0;
  border-top: 1px solid #000;
}
#requirement dt,
#requirement dd {
  font-size: 1.3em;
  line-height: 2.2;
  letter-spacing: 0.15em;
  margin: 0;
}
#requirement dt {
  font-weight: 700;
}

@media screen and (max-width: 767px) {
#requirement {
  padding: 40px 0;
}
#requirement li {
  font-size: 1.3em;
  letter-spacing: 0.1em;
}
#requirement .inner > p {
  font-size: 1.2em;
}
#requirement dl {
  margin: 1em 0 0;
}
#requirement dt,
#requirement dd {
  font-size: 1.2em;
  letter-spacing: 0.1em;
}
}

/*---------------------------------------------
__howto
---------------------------------------------*/
#howto {
  padding: 80px 0;
  border-bottom: 1px solid #DDD;
}
#howto p {
  font-size: 1.4em;
  line-height: 2.2;
  letter-spacing: 0.15em;
  text-align: left;
  padding: 0 0 0.5em;
}
#howto h3 + p {
  padding: 0 0 1em 2em;
}
#howto p .num {
  font-size: 90%;
  line-height: 1.3;
  color: #FFF;
  text-align: center;
  display: inline-block;
  vertical-align: middle;
  background-color: #44712C;
  width: 1.4em;
  height: 1.4em;
  margin: 0 0.5em 0 -2em;
  border-radius: 50%;
}
#howto p a {
  color: #44712C;
}
#howto dl {
  background-color: #44712C;
  text-align: left;
  padding: 12px 16px;
}
#howto dt,
#howto dd {
  font-size: 1.5em;
  line-height: 1.8;
  font-weight: 500;
  color:  #FFF;
  letter-spacing: 0.15em;
  display: inline-block;
  vertical-align: top;
  margin: 0;
  padding: 0;
}
#howto dt {
  margin-right: 10px;
}
#howto ul {
  text-align: left;
  margin: 0;
  padding: 1em 0 80px;
}
#howto li {
  font-size: 1.3em;
  line-height: 2.2;
  letter-spacing: 0.15em;
  text-indent: -1em;
  margin: 0;
  padding: 0 0 0 1em;
  list-style-position: inside;
}
#howto li a {
  color: #44712C;
}
@media screen and (min-width: 960px) {
#howto p a:hover {
  text-decoration: none;
}
}
#howto .example {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
  padding: 20px 0;
  border: 1px solid #CCC;
}
#howto .example p {
  font-size: 1.3em;
  line-height: 1.8;
  font-weight: 500;
  text-align: center;
  margin: 0;
  padding: 0 0 1em;
}

#howto .example ul {
  text-align: left;
  margin: 0 40px;
  padding: 0;
}
#howto .example li {
  font-size: 1.2em;
  line-height: 1.6;
  letter-spacing: 0.15em;
  text-indent: -1em;
  padding-left: 0 0 0 1em;
  list-style-position: inside;
}

@media screen and (max-width: 767px) {
#howto {
  padding: 40px 0;
}
#howto dl {
  padding: 8px 10px;
}
#howto dt,
#howto dd {
  font-size: 1.3em;
}
#howto ul {
  padding: 1em 0 60px;
}
#howto li {
  font-size: 1.2em;
}
#howto .image object,
#howto .image img {
  height: 148px;
  width: auto;
}
#howto .example ul {
  margin: 0 20px;
}
}

/*---------------------------------------------
__flow
---------------------------------------------*/
#flow {
  padding: 80px 0;
  border-bottom: 1px solid #DDD;
}
#flow .image {
  padding: 20px 0 0;
}
#flow .image.sp {
  display: none;
}
#flow .image object,
#flow .image img {
  height: auto;
  width: 100%;
}

@media screen and (max-width: 767px) {
#flow {
padding: 40px 0;
}
#flow .image {
  display: none;
}
#flow .image.sp {
  display: block;
}
}

/*---------------------------------------------
__fee
---------------------------------------------*/
#fee {
  padding: 80px 0;
}
#fee .box + .box {
  padding: 20px 0 0;
}
#fee .box + .box {
  padding: 30px 0 0;
}
#fee .box p {
  font-size: 1.4em;
  line-height: 1.8;
  letter-spacing: 0.2em;
  margin: 0;
  padding: 0;
}
#fee .box p.note {
  font-size: 1.2em;
}
#fee .box ul {
  margin: 0;
  padding: 0;
}
#fee .box ul + p {
  padding: 0.25em 0 0;
}
#fee .box ul li {
  font-size: 1.4em;
  line-height: 1.6;
  letter-spacing: 0.2em;
  margin: 0;
  padding: 0;
  list-style:  none;
}
#fee .box.number ul li {
  display: inline-block;
}
#fee .box.number ul li + li {
  margin-left: 1em;
}
#fee .box p span,
#fee .box ul li span {
  font-size: 140%;
}
#fee .box ul li span {
  margin: 0 0 0 0.5em;
}

@media screen and (max-width: 768px) {
#fee {
padding: 40px 0;
}
#fee .box + .box {
  padding: 20px 0 0;
}
#fee .box p {
  font-size: 1.3em;
  text-align: left;
}
#fee .box ul li {
  font-size: 1.3em;
  text-align: left;
}
#fee .box.number ul li {
  display: block;
}
#fee .box.number ul li + li {
  margin-left: 0;
}
#fee .box p span,
#fee .box ul li span {
  font-size: 130%;
}
}

/*---------------------------------------------
__selector
---------------------------------------------*/
#selector {
  background-color: #E2EAE1;
  padding: 80px 0;
}
#selector ul {
  text-align: left;
  margin: 0;
  padding: 0;
}
#selector ul li {
  font-size: 1.5em;
  line-height: 2.8;
  letter-spacing: 0.1em;
  list-style: none;
}
#selector ul li span {
  display: inline-block;
  vertical-align: baseline;
  width: 12em;
}
#selector ul li span + span {
  font-size: 80%;
  width: auto;
}
#selector ul li p {
  font-size: 80%;
  margin: -3em 0 0 42em;
}
#selector ul li p a {
  color: #FFF;
  text-decoration: none;
  background-color: #44712C;
  padding: 3px 6px;
  -webkit-transition: all .4s;
  transition: all .4s;
}

@media screen and (min-width: 980px) {
#selector ul li p a:hover {
  color: #44712C;
  background-color: #FFF;
}
}

@media screen and (max-width: 980px) {
#selector ul li {
  line-height: 1.4;
}
#selector ul li p {
  margin: 0.75em 0 1.5em;
}
#selector {
  padding: 40px 0;
}
#selector ul {
  text-align: center;
}
#selector ul li span {
  width: auto;
}
#selector ul li span + span {
  display: block;
}
}

/*---------------------------------------------
__qa
---------------------------------------------*/
#qa {
  padding: 80px 0;
}
#qa .boxTitle {
  padding: 2em 0 1em;
}
#qa .switchDetail + .boxTitle {
  padding: 4em 0 1em;
}
#qa dl {
  text-align: left;
  margin: 0;
  padding: 4em 0 0;
}
#qa dt,
#qa dd {
  font-size: 1.4em;
  line-height: 2.2;
  letter-spacing: 0.2em;
  margin: 0;
  padding: 0;
}
#qa dt {
  font-weight: 700;
}
#qa dd + dt {
  padding: 2em 0 0;
}
#qa dd span {
  display: block;
  padding-top: 10px;
}
#qa p {
  text-align: right;
  font-size: 1.4em;
  letter-spacing: 0.05em;
}
#qa p span.switchHat {
  color: #000;
}
@media screen and (min-width: 960px) {
#qa p span.switchHat:hover {
  text-decoration: none;
}
}

@media screen and (max-width: 768px) {
#qa {
  padding: 40px 0;
}
#qa .boxTitle {
  padding: 1em 0 0;
}
#qa dl {
  padding: 2em 0 0;
}
#qa dt,
#qa dd {
  font-size: 1.3em;
  line-height: 2;
}
#qa dd + dt {
  padding: 1.5em 0 0;
}
#qa p {
  font-size: 1.3em;
}
}

/*---------------------------------------------
__download
---------------------------------------------*/
#download {
  background-color: #E2EAE1;
  padding: 80px 0 60px;
}
#download .btn {
  padding: 0 0 2em;
}
#download .btn.entry_form_btn {
  display: none;
}
#download .btn a {
  font-size: 1.6em;
  line-height: 1.6;
  font-weight: 500;
  color: #FFF;
  display: block;
  text-decoration: none;
  background-color: #44712C;
  letter-spacing: 0.15em;
  width: 500px;
  margin: 0 auto;
  padding: 1.5em 0;
  box-sizing: border-box;
  -webkit-transition: all .4s;
  transition: all .4s;
}
#download p {
  font-size: 1.4em;
  line-height: 2;
  letter-spacing: 0.2em;
}
#download ul {
  text-align: left;
  margin: 4em 40px 0;
  padding: 1.5em 0;
  border-top: 1px solid #000;
}
#download li {
  font-size: 1.3em;
  line-height: 2.2;
  letter-spacing: 0.15em;
  text-indent: -1em;
  margin: 0;
  padding: 0 0 0 1em;
  list-style-position: inside;
}
#download li a {
  color: #44712C;
}
@media screen and (min-width: 960px) {
#download .btn a:hover {
  color: #44712C;
  background-color: #FFF;
}
#download li a:hover {
  text-decoration: none;
}
}

@media screen and (max-width: 768px) {
#download {
  padding: 40px 0;
}
#download .btn {
  padding: 0 0 1.5em;
}
#download .btn a {
  font-size: 1.4em;
  padding: 1em 0;
  width: 100%;
  margin: 0;
}
#download p {
  font-size: 1.3em;
  letter-spacing: 0.1em;
  text-align: left;
  margin: 0;
  padding: 0;
}
#download ul {
  margin: 2em 0 0;
}
#download li {
  font-size: 1.2em;
}
}

/*---------------------------------------------
__copyright
---------------------------------------------*/
#copyright {
  font-size: 1.2em;
  letter-spacing: 0.1em;
  padding: 3em 0 4em;
}

@media screen and (max-width: 768px) {
#copyright {
  font-size: 1em;
  padding: 2em 1em 2.5em;
}
}