@charset "utf-8";



/*container（サイト全般を囲むブロック）
---------------------------------------------------------------------------*/
#container2 {
	padding-left: var(--global-space);	/*contents内の左側に空けるスペース。css冒頭で指定しているglobal-spaceを読み込みます*/
	padding-right: var(--global-space);	/*contents内の右側に空けるスペース。css冒頭で指定しているglobal-spaceを読み込みます*/
	width: 100%;
	margin-top: 0px;
}


#contents2 {

	width: 100%;
}

.c {
	padding: 100px 0px 0px 0px;
}

/* ※印つきUL（折り返し揃える） */
ul.asterisk {
  list-style-type: none;
	text-align: left;
	width: 100%;
	margin: 0 auto 40px auto;
	max-width: 1000px;
	font-weight:normal;
}
ul.asterisk li {
  text-indent: -1em;
}
ul.asterisk li:before {
  content: "※";
}

ul.asterisk2 {
  list-style-type: none;
	text-align: left;
	width: 100%;
	margin: 0 auto;
	max-width: 1000px;
	font-weight:normal;
}
ul.asterisk2 li {
  text-indent: -1em;
}
ul.asterisk2 li:before {
  content: "・";
}

ul.nocap {
  list-style-type: none;
	text-align: left;
	width: 100%;
	margin: 0 auto 20px auto;
	max-width: 1000px;
	font-weight: bold;
}
ul.nocap li {
  text-indent: -1em;
}

span.redfont {
	color: yellow;
}


.maptitle{
	font-weight: bold;		/*太字に*/
	padding: 0.5rem 1rem;	/*ボックス内の余白*/
	background: #333333;		/*背景色*/
	color: #fff;			/*文字色*/
	margin-bottom: 1rem;	/*下に空けるスペース*/
	border-radius: 5px;		/*角を丸くする指定*/
}
.mapbottom{
	margin-bottom: 20px;
}



a.btn_01 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
  height: 50px;
  position: relative;
  background: #228bc8;
  border: 1px solid #228bc8;
  border-radius: 30px;
  box-sizing: border-box;
  padding: 0 45px 0 25px;
  color: #fff;
  font-size: 16px;
  letter-spacing: 0.1em;
  line-height: 1.3;
  text-align: left;
  text-decoration: none;
  transition-duration: 0.3s;
}
a.btn_01:before {
  content: '';
  width: 8px;
  height: 8px;
  border: 0;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  right: 25px;
  margin-top: -6px;
}
a.btn_01:hover {
  background: #fff;
  color: #228bc8;
}
a.btn_01:hover:before {
  border-top: 2px solid #228bc8;
  border-right: 2px solid #228bc8;
}



/*準備～滑り方レイアウト用
---------------------------------------------------------------------------*/
h5.howto{
  margin: 0px;
  padding: 0px 0px;
  text-align: center;
  background: #65833D;
  color: #FFF;
}

.subbox{
  width: 100%;
  margin: 0px 0px;
  padding: 0px;
  background: #65833D !important;
}

p.subtext{
  margin: 0px 0px;
  padding: 0px 10px;
  text-align: left;
  font-size: 0.85rem;	/*文字サイズを85%に*/
  line-height: 1.5;	/*行間を少し狭く*/
  background: #65833D;
  color: #FFF;
}


.boxhowto {
  width: 100%;
  display:flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 0px;
  padding: 0px 0px;
  background: #65833D !important;
}


.boxhowto .text {
  width: 60%;
}

.boxhowto .text2 {
  width: 100%;
  margin: 0 0 20px 0;
}


.boxhowto .text .title {
  font-size: 1.6rem;
  margin: 15px 0 0 0;
  border-bottom: solid 1px #FFFFFF;
}

.boxhowto .text .honbun {
  font-size: 1.0rem;
  line-height: 1.5;	/*行間を少し狭く*/
}

.boxhowto .text2 .title {
  font-size: 1.6rem;
  margin: 0;
  border-bottom: solid 1px #FFFFFF;

}

.boxhowto .pict {
  width: 40%;

}

.boxhowto .pict img {
  width: 100%;
  height:auto;
  margin: 20px 0 20px 0;	/*ボックス内の余白*/
}


@media (max-width:768px) {
  .boxhowto {
    flex-direction: column;
  }
  .boxhowto .text {
    text-align:left;
  width: 100%;
  }
  .boxhowto .pict {
    width:100%;
    margin-left: 0;
    text-align: center;
  }
  .boxhowto .pict img {
    width:80%;
    height:auto;
  }
}


/*ルールとマナー
---------------------------------------------------------------------------*/

.rulebox{
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

h5.rule{
  margin: 0px;
  padding: 0px 0px;
  text-align: center;
  background: #799E49;
  color: #FFF;
  font-size: 1.4rem;
  width:100%;
}
h5.rule span{
  padding: 5px;
  border: solid 1px #FFF;
  display: inline-block;
  width: 90%;
  color: #799E49;
  background: #FFFFFF;
}


.case__list {
  margin: 2rem;
}

.case__item {
  display: flex;
  margin: 1rem auto;
    border-bottom: solid 1px #FFF;
  padding: 0 0 1em 0;
}

.case__item:nth-child(odd) {
  flex-direction: row-reverse;
}

.case__item__text,.case__item__img {
  width: 50%;
}

.case__item__text {
  font-size: 1.0rem;
  margin: auto 2rem;
  text-align: left;
}

.case__item__text .midashi{
  font-size: 1.4rem;
  margin: 2rem auto;
}



.case__item__text button{
    margin: 0;
    padding: 0;
    width: 100%;
    background: #799E49;
    border: none;
}



@media (max-width:768px) {

.case__list {
  margin: 0.5rem;
}

.case__item {
  margin: 1rem auto;
  padding: 0;
  display: block;
}

.case__item__text,.case__item__img {
  margin: 0;
  width: 100%;
}

.case__item__img {
  margin: 1rem auto;

}


}


/*よくあるご質問
---------------------------------------------------------------------------*/

   .containerqa {
    position: relative;
    background: #fff;
    margin: 3rem;
    padding: 1rem 3rem 3rem 3rem;
   }
   .containerqa h2 {
    text-align: center;
    color: #000000;
   }
   .qa-container {
    text-align: justify;
    margin-bottom: 0.5rem;
    color: #000000;
   }
   .qa-container label {
    display: block;
    position: relative;
    background: #f5f5f5;
    padding: 1rem 2.5rem 1rem 0.5rem;
    cursor: pointer;
   }
   .qa-container label:after {
    content: '';
    display: block;
    width: 0.5rem;
    height: 0.5rem;
    border-right: solid 2px #ccc;
    border-bottom: solid 2px #ccc;
    transform: rotate(45deg) translate(100%, 100%);
    position: absolute;
    top: 0;
    right: 0;
    margin-top: 0.5rem;
    margin-right: 1rem;
   }
   .qa-container input:checked ~ label:after {
    transform: rotate(-135deg) translate(-100%, -100%);
    margin-top: 0.75rem;
   }
   .qa-container input {
    display: none;
   }
   .qa-container p {
    height: 0px;
    opacity: 0;
    transition: opacity 0.3s ease-in-out, height 0.5s ease-in-out, margin 0.5s ease-in-out;
    margin: 0 0.5rem;
    color: #000000;
   }
   .qa-container input:checked ~ p {
    height: 100px;
    opacity: 1;
    transition: opacity 0.3s 0.2s ease-in-out, height 0.3s ease-in-out;
    margin: 1rem 0.5rem;
   }

@media (max-width:768px) {

.containerqa{
margin: 0;
padding: 2rem 1rem;
}

.qa-container input:checked ~ p {
height: 200px;
}


}

picture{
width: 100%;
margin: 0 auto;
text-align: center;
}


/*フォトスライダー
---------------------------------------------------------------------------*/
.swiperwrap {
    width: 100%;
    overflow: hidden;
　　background-color: #FFFFFF;
}
.swiper2 {
    width: 100%;
    overflow: hidden;
}
.swiper-main .swiper-slide img {
    display: block;
    width: 100%;
    margin-bottom: 10px;
    vertical-align: middle;
    object-fit: cover;
}
.swiper-thumbnail .swiper-slide {
    opacity: .5;
    overflow: hidden;
}
.swiper-thumbnail .swiper-slide-thumb-active {
    opacity: 1;

}
.swiper-thumbnail .swiper-slide img {
    width: 100%;
    vertical-align: middle;
    object-fit: cover;
}


/*お知らせブロック
---------------------------------------------------------------------------*/

.new {
	background: rgba(255,255,255,0.70);	/*背景色。0,0,0は黒のことで0.02は色が2%出た状態。*/
	border-radius: 30px;			/*角を丸くする指定*/
	overflow: hidden;
	margin-bottom: 4rem;	/*ブロックの下に空けるスペース。4文字分。*/
	text-align: left;
}

/*奇数行目を背景色を少し濃くする。全体同じ色がよければここの数行は削除。*/
.new dt:nth-of-type(odd),
.new dd:nth-of-type(odd) {
	background: rgba(255,255,255,1);
}

/*日付(dt)設定*/
.new dt {
	padding: 1rem 1rem 0;	/*dt内の余白。上、左右、下への順番。*/
	color:#333;
	text-align: left;
}

/*記事(dd)設定*/
.new dd {
	padding: 1rem;	/*dd内の余白*/
	text-align: left;
	color:#333;
}

.new dd a{
	color:#333;
}

/*ブロック内のspan。日付の横のアイコン的な部分の共通設定*/
.new dt span {
	display: inline-block;
	text-align: center;
	line-height: 1.8;		/*行間（アイコンの高さ）*/
	border-radius: 3px;		/*角を丸くする指定*/
	padding: 0 0.5rem;		/*上下、左右へのブロック内の余白*/
	width: 8rem;			/*幅。8文字分。*/
	transform: scale(0.8);	/*80%のサイズに縮小*/
	background: #fff;		/*背景色*/
	color:#777;				/*文字色*/
	border: 1px solid #999;	/*枠線の幅、線種、色*/
}

/*icon-bg1*/
.new .icon-bg1 {
	background: #799E49;
	color: #FFFFFF;
	border-color: transparent;
}
.new .icon-bg2 {
	background: #0C74C0;
	color: #FFFFFF;
	border-color: transparent;
}
.new .icon-bg3 {
	background: #993399;
	color: #FFFFFF;
	border-color: transparent;
}
.new .icon-bg4 {
	background: #CC6633;
	color: #FFFFFF;
	border-color: transparent;
}
.new .icon-bg5 {
	background: ##FF0000;
	color: #FFFFFF;
	border-color: transparent;
}
.new .icon-bg6 {
	background: #EEEEEE;
	color: #000000;
	border-color: transparent;
}



	/*画面幅700px以上の追加指定*/
	@media screen and (min-width:700px) {

	/*ブロック全体*/
	.new {
		display: grid;	/*gridを使う指定*/
		grid-template-columns: auto 1fr;	/*横並びの指定。日付とアイコン部分の幅は自動で、内容が入るブロックは残り幅一杯とる。*/
	}

	/*日付(dt)設定*/
	.new dt {
		padding: 1.5rem 0 1.5rem 2rem;	/*dt内の余白。上、右、下、左への順番。*/
	}

	/*記事(dd)設定*/
	.new dd {
		padding: 1.5rem 2rem 1.5rem 0;	/*dd内の余白。上、右、下、左への順番。*/
	}

	}/*追加指定ここまで*/




/*初めての方へ
---------------------------------------------------------------------------*/
.subjecttime {
  width: 100%;
  padding: 10px 0 ;
  margin: 0 auto;
}


.contentwrap {
  width: 100%;
  padding: 0 ;
  margin: 0 auto;
  background-color: #799e49;
}

.contenttime {
  width: 100%;
  padding: 0 ;
  margin: 0 auto;
}

.contenttime p{
  padding: 0 ;
  margin: 0 ;
}
main h3.ftime {
	font-size: 1.6rem !important;
}
main h4.ftime {
  margin: 10px 0 !important;
  padding: 10px 0 0 0 !important;
	font-size: 1.4rem !important;
    border-top: solid 1px #ccc !important;
}
.animationtime {
  view-timeline: --subjectReveal block;
  animation-timeline: --subjectReveal;

  animation-name: appear;
  animation-range: entry 10% contain 25%;
  animation-fill-mode: both;
  animation-duration: 1ms; /* Firefox では、アニメーションを適用するために必要 */
}

@keyframes appear {
  from {
    opacity: 0;
    transform: scaleX(0);
  }

  to {
    opacity: 1,
    transform: scaleX(1);
  }
}




/*画面幅700px以上の追加指定*/
@media screen and (min-width:700px) {
.contenttime {
  width: 75%;
  max-width: 1200px;
  margin: 0 auto;
}
.subjecttime {
  width: 70%;
  margin: 0 auto;
}

}

/*記録会*/

.subbox2{
  width: 100%;
  margin: 0px 0px;
  padding: 0px;
  background: #799E49 !important;
}

.subbox2 p.subtext2{
  margin: 0px 0px;
  padding: 0px 10px;
  text-align: left;
  font-size: 0.85rem;	/*文字サイズを85%に*/
  line-height: 1.5;	/*行間を少し狭く*/
  background: #799E49 !important;
  color: #FFF;
}



        /* 記録会用の独自幅指定 */
        .boxkirokukai {
            text-align: center;
            margin: 0 auto;
            padding: 0px 10px 0px 10px !important;
            background-color: #799E49 !important;
        }


        .boxkirokukai p.midashi{
            font-size: 1.3rem;
        }

        .section-title {
            text-align: center;
            font-size: 2rem;
            font-weight: 900;
            margin-bottom: 50px;
            background-color: #799E49 !important;
        }
        .class-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 40px;
            padding: 0px 0px 30px 0px;
        }


        .class-box {
            background: var(--white);
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            border-top: 8px solid var(--primary);
            background-color: #526A31!important;

        }

        .class-box.expert { border-top-color: var(--secondary); }

        .class-body { padding: 20px; }

        .label {
            display: inline-block;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 0.75rem;
            font-weight: bold;
            text-transform: uppercase;
            margin-bottom: 10px;
        }

        .label-open { background-color: #dbeafe; color: #1e40af; }
        .label-expert { background-color: #ffedd5; color: #c2410c; }

        .class-list {
            list-style: none;
            border-top: 1px solid #e2e8f0;
            margin-top: 20px;
            padding-top: 20px;
        }

        .class-list li {
            display: flex;
            justify-content: space-between;
            padding: 8px 0;
            margin: 0px;
            border-bottom: 1px solid #f1f5f9;
        }

        .class-list li:last-child { border-bottom: none; }


@media screen and (min-width:700px) {
        .boxkirokukai {
            padding: 0px 40px 0px 40px !important;
        }

        .class-body { padding: 40px; }


}




/*競技の紹介*/

.cen {
text-align: center !important;
  width: 100%;
}

.cen button{
    margin: 0;
    padding: 0;
    width: 100%;
    background: #799E49;
    border: none;
}

img.movimg2{
 width: 30%;
}


/*リンク集*/

p.link {
  padding: 10px 0px 0px 0px !important;
}


/*取材について*/

.interviewbox h3{
  border-bottom: solid 1px #FFFFFF;
}

.interviewbox h4{
  border-bottom: solid 1px #FFFFFF;
}

.interviewbox {
    width: 100%;
    background: #799e49;
    text-align: lef;
    margin: 0;
    padding: 0;
}


.interviewbox p {
    font-size: 1.1rem;
    line-height: 1.8;
    text-align: left;
    padding: 0 0 0 15px;
}

.interviewbox ol {
    padding: 0px 0px 0px 30px;
}

.interviewbox li {
    padding: 5px 0px 5px 0px;
    text-align: left;
}


/*プライバシーポリシー*/

.privacybox h3{
  border-bottom: solid 1px #FFFFFF;
}

.privacybox h4{
  border-bottom: solid 1px #FFFFFF;
}


.privacybox p.intro{
    text-align: center;
}

.privacybox p.date{
	font-size: 0.8rem;
    text-align: right;
}


.privacybox {
    width: 100%;
    background: #799e49;
    text-align: lef;
    margin: 0;
    padding: 0;
}


.privacybox p {
    font-size: 1.1rem;
    line-height: 1.8;
    text-align: left;
    padding: 0 0 0 15px;
}

.privacybox ol {
    padding: 0px 0px 0px 30px;
}

.privacybox li {
    padding: 5px 0px 5px 0px;
    text-align: left;
}



/*SNS
---------------------------------------------------------------------------*/


.boxsns {
  width: 100%;
  display:flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 0px;
  padding: 0px 0px;
  background: #799e49 !important;
}

.boxsns a{
    color: #FFFFFF;
}


.boxsns .text {
  margin: 0 0 0 20px;
  width: 70%;
}

.boxsns .text2 {
  width: 100%;
  margin: 0 0 20px 0;
}


.boxsns .text .title {
  font-size: 1.6rem;
  margin: 15px 0 0 0;
  border-bottom: solid 1px #FFFFFF;
}

.boxsns .text .honbun {
  font-size: 1.0rem;
}

.boxsns .text2 .title {
  font-size: 1.6rem;
  margin: 0;
  border-bottom: solid 1px #FFFFFF;

}

.boxsns .pict {
  width: 30%;

}

.boxsns .pict img {
  width: 100%;
  height:auto;
  margin: 20px 0 10px 0;	/*ボックス内の余白*/
}


@media (max-width:768px) {
  .boxsns {
    flex-direction: column;
  }
  .boxsns .text {
  margin: 0 0 20px 0;
    text-align:left;
  width: 100%;
  }
  .boxsns .pict {
    width:100%;
    margin-left: 0;
    text-align: center;
  }
  .boxsns .pict img {
    width:80%;
    height:auto;
  }
}




/*アンカーリンク用ボタン*/

.prod_list {
    list-style: none;
    display: flex;
    max-width: 1200px;
    justify-content: space-between;
    margin-right: auto;
    margin-left: auto;
    box-shadow: 0 0 15px rgba(85, 85, 85, 0.35);
    margin-bottom: 75px;
}
.prod_list > li {
    width: 50%;
}
.prod_list > li:first-child {}
.prod_list > li:last-child {}
.prod_list > li:nth-child(2n+1) {}
.prod_list > li:nth-child(n+3) {}
.prod_list > li > a {
    display: flex;
    text-decoration: none;
    height: 100px;
    align-items: center;
    color: inherit;
    font-size: 14px;
    line-height: 1.3em;
    font-weight: bold;
    justify-content: center;
    background-color: #fff;
    position: relative;
    z-index: 1;
    transition-duration: .3s;
    transition-property: background-color, color;
    padding: 2px;
}
.prod_list > li > a::before {
    content: "";
    width: 6px;
    height: 6px;
    border: 2px #000 solid;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    border-top: none;
    border-left: none;
    display: block;
    margin-right: 5px;
    transition-duration: .3s;
    transition-property: border-color, color;
}
.prod_list > li > a::after {
    content: "";
    top: 50%;
    right: 0;
    width: 1px;
    height: calc(100% - 40px);
    background-color: #333333;
    display: block;
    z-index: 1;
    position: absolute;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
.prod_list > li:last-child > a::after {
    content: "" ;
    display: none ;
    width: 0px;
}


/*画面幅700px以上の追加指定*/
@media screen and (min-width:700px) {
.prod_list > li:first-child {}
.prod_list > li:last-child {}
.prod_list > li:nth-child(2n+1) {}
.prod_list > li:nth-child(n+3) {}
.prod_list > li > a {
    display: flex;
    text-decoration: none;
    height: 100px;
    align-items: center;
    color: inherit;
    font-size: 18px;
    line-height: 1.3em;
    font-weight: bold;
    justify-content: center;
    background-color: #fff;
    position: relative;
    z-index: 1;
    transition-duration: .3s;
    transition-property: background-color, color;
    padding: 2px;
}
}