@charset "utf-8";

@import url("./reset.css");
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,900&display=swap');
@import url('./style_eye.css');

/* --------------------------------------------------- */
/* ローディング */
/* --------------------------------------------------- */
#loading {
	position: fixed;
	top: 0;
	left: 0;
	display: table;
	width: 100%;
	height: 100vh;
	background-color: #000;
	z-index: 999;
}
#loading > div {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 100px;
  transform: translate(-50%, -50%);
}
#loading .svg .cls-2,
#loading .svg .cls-3,
#loading .svg .cls-4,
#loading .svg .cls-5 {
	/*　背景色変更対応　20250530 add start*/
  /* fill:#fff; */
	/*　背景色変更対応　20250530 add end*/
  animation-duration: 4.0s;
  animation-timing-function: ease-in;
  animation-iteration-count: infinite;
  animation-delay: 0.5s;
  opacity: 0.0;
}
#loading .svg .cls-2 { animation-name: disp01; }
#loading .svg .cls-3 { animation-name: disp02; }
#loading .svg .cls-4 { animation-name: disp03; }
#loading .svg .cls-5 { animation-name: disp04; }

@keyframes disp01 {
	0% { opacity: 0.0; fill:#fff; }
	20% { opacity: 1.0;  }
	60% { opacity: 1.0;  }
	80% { opacity: 1.0; }
	90% { opacity: 0.0; }
	100% { opacity: 0.0; }
}
@keyframes disp02 {
	0% { opacity: 0.0; fill:#fff; }
	10% { opacity: 0.0;  }
	30% { opacity: 1.0;  }
	60% { opacity: 1.0; }
	80% { opacity: 1.0; }
	90% { opacity: 0.0; }
	100% { opacity: 0.0; }
}
@keyframes disp03 {
	0% { opacity: 0.0; fill:#fff; }
	20% { opacity: 0.0; }
	40% { opacity: 1.0; }
	80% { opacity: 1.0; }
	90% { opacity: 0.0; }
	100% { opacity: 0.0; }
}
@keyframes disp04 {
	0% { opacity: 0.0; fill:#fff; }
	30% { opacity: 0.0;  }
	50% { opacity: 1.0;  }
	80% { opacity: 1.0; }
	90% { opacity: 0.0; }
	100% { opacity: 0.0; }
}
@media screen and (max-width: 419px) {
  #loading ul { width: 80px; height: 72px; }
  #loading ul li img { width:100%; height: auto; }
  #loading ul li:nth-child(1),
  #loading ul li:nth-child(2),
  #loading ul li:nth-child(3) { width: 40px; }
  #loading ul li:nth-child(2) { left: 20px; }
  #loading ul li:nth-child(3) { left: 40px; }
}


/* --------------------------------------------------- */
/* レイアウト */
/* --------------------------------------------------- */
.wrap {
  position: relative;
  margin: 0;
	padding: 0;
	width: 100%;
	min-width: 320px;
	background: #fff;
	overflow-x: hidden;
}
main {
  position: relative;
  display: block;
  margin-top: 70px;
}
@media screen and (max-width: 767px) {
  main { margin-top: 60px; }
}
@media screen and (max-width: 419px) {
  .wrap.fixed { position: fixed; }
  main { margin-top: 50px; }
}

/* --------------------------------------------------- */
/* ヘッダー */
/* --------------------------------------------------- */
header {
  position: fixed;
  top: 0;
  left: 0;
  display: block;
  padding: 13px 30px 4px;
  width: 100%;
	/*　背景色変更対応　20250529 add start*/
  /*background-color: #000;*/
	/*　背景色変更対応　20250529 add start*/
  box-sizing: border-box;
  z-index: 777;
}
header h1 {
  display: block;
  width: 105px;
}
header h1 a { display: block; }
/*　背景色変更対応　20250530 add start*/
header h1 a .svg .cls-2{ fill: #9fbbdc; transition: all .3s; }
header h1 a .svg .cls-3{ fill: #8fb87a; transition: all .3s; }
header h1 a .svg .cls-4{ fill: #9e8d3d; transition: all .3s; }
header h1 a .svg .cls-5{ fill: #7b7774; transition: all .3s; }
/*　背景色変更対応　20250530 add start*/
.pcmode header h1 a:hover .svg .cls-2 { fill: #c7c8c9; }
.pcmode header h1 a:hover .svg .cls-3 { fill: #9d9fa2; }
.pcmode header h1 a:hover .svg .cls-4 { fill: #626365; }
.pcmode header h1 a:hover .svg .cls-5 { fill: #626365; }
header h1 img { width: 100%; height: auto; }
header #btn-nav {
  position: absolute;
  right: 30px;
  top: 18px;
  display: block;
  width: 32px;
  z-index: 888;
}
header #btn-nav a { display: block; padding-top: 100%; }
header #btn-nav span {
 position: absolute;
 top: 50%;
 left: 0;
 display: block;
 width: 100%;
 height: 3px;
		/*　背景色変更対応　20250530 add start*/
 background-color: #9d9fa2;
		/*　背景色変更対応　20250530 add end*/
 transition: all 0.3s;
}
header #btn-nav span::before,
header #btn-nav span::after {
  content:'';
 position: absolute;
 left: 0;
 display: block;
 width: 100%;
 height: 3px;
		/*　背景色変更対応　20250530 add start*/
 background-color: #9d9fa2;
		/*　背景色変更対応　20250530 add end*/
 transition: all 0.3s;
}
header #btn-nav span::before { top: -12px; }
header #btn-nav span::after { top: 12px; }
header #btn-nav.close span { background-color: transparent; }
header #btn-nav.close span::before { top: 0; transform: rotate(135deg); }
header #btn-nav.close span::after { top: 0; transform: rotate(-135deg); }

@media screen and (max-width: 767px) {
  header { padding: 10px 5% 4px; }
  header h1 { width: 90px; }
  header #btn-nav {
    right: 5%;
    top: 16px;
    width: 28px;
  }
  header #btn-nav span::before { top: -10px; }
  header #btn-nav span::after { top: 10px; }
}
@media screen and (max-width: 419px) {
  header { padding: 8px 4% 0; }
  header h1 { width: 80px; }
  header #btn-nav {
    right: 4%;
    top: 12px;
    width: 24px;
  }
  header #btn-nav span,
  header #btn-nav span::before,
  header #btn-nav span::after { height: 2px; }
  header #btn-nav span::before { top: -8px; }
  header #btn-nav span::after { top: 8px; }
}


/* ナビ */
/* --------------------------------------------------- */
header nav {
  position: fixed;
  top: 0;
  right: 0;
  width: 240px;
  height: 100%;
		/*　背景色変更対応　20250620 update start*/
  background-color: #e1e2e4;
		/*　背景色変更対応　20250620 update end*/
}
header nav ul {
  margin: 78px 0 0 auto;
  width: 210px;
}
header nav ul li {
  border-bottom: 1px solid #333;
  line-height: 36px;
}
header nav ul li a {
  display: block;
/*　背景色変更対応　20250620 update start*/
  color: #8a8c8f;
/*　背景色変更対応　20250620 update end*/
  font-size: 1.6rem;
  font-weight: 900;
}
header nav ul li h3 {
  display: block;
  margin-top: 12px;
  color: #333;
  font-size: 1.2rem;
  font-weight: 900;
  line-height: 24px;
}
header nav ul li.submn a { padding-left: 16px; }
/*　背景色変更対応　20250620 update start*/
header nav ul li.submn a.cat-kg { color: #7bb2b7; }
header nav ul li.submn a.cat-tg { color: #a4bda2; }
header nav ul li.submn a.cat-sil { color: #7fb09a; }
header nav ul li.submn a.cat-wc { color: #829aa7; }
/*　背景色変更対応　20250620 update end*/
header nav .subnav {
  display: flex;
  justify-content: space-between;
  margin: 12px auto 0;
  width: 180px;
}
header nav .subnav a {
  display: block;
  width: 80px;
  border-bottom: 1px solid #333;
  color: #fff;
  font-size: 1.4rem;
  font-weight: 900;
  line-height: 28px;
  text-align:center;
}
header nav {
  opacity: 0.0;
  transform: translateX(102%);
  transition: all .7s;
}
header nav.disp {
  opacity: 1.0;
  transform: translateX(0);
}

@media screen and (max-width: 767px) {
  header nav ul { margin: 56px 0 0 auto; }
}
@media screen and (max-width: 419px) {
  header nav ul { margin: 48px 0 0 auto; }
}


/* --------------------------------------------------- */
/* フッター */
/* --------------------------------------------------- */
footer {
	
/*　背景色変更対応　20250529 add start*/
 /*color: #fff;*/
 color: #000;
/*　背景色変更対応　20250529 add start*/
  text-align: center;
}
footer h1 {
  margin: 0 auto;
  width: 40%;
  max-width: 160px;
}
footer h1 a { display: block; }
footer h1 .svg { width: 100%; height: auto; }
footer h1 a .svg .cls-2 { fill: #9fbbdc; transition: all .3s; }
footer h1 a .svg .cls-3 { fill: #8fb87a; transition: all .3s; }
footer h1 a .svg .cls-4 { fill: #9e8d3d; transition: all .3s; }
footer h1 a .svg .cls-5 { fill: #7b7774; transition: all .3s; }
/*　背景色変更対応　20250609 update start*/
.pcmode footer h1 a:hover .svg .cls-2 { fill: #c7c8c9; }
.pcmode footer h1 a:hover .svg .cls-3 { fill: #9d9fa2; }
.pcmode footer h1 a:hover .svg .cls-4 { fill: #626365; }
/* .pcmode footer h1 a:hover .svg .cls-5 { fill: #fff; } */
.pcmode footer h1 a:hover .svg .cls-5 { fill: #626365; }
/*　背景色変更対応　20250609 update end*/
footer ul {
  display: flex;
  margin-top: 20px;
  justify-content: center;
}
footer ul li { margin: 8px; }
footer ul li a {
  display: block;
  width: 36px;
  border-radius: 3px;
}
footer ul li a.btn-tw { background-color: rgba(29, 163, 242, 1.0); }
footer ul li a.btn-yt { background-color: rgba(252, 1, 0, 1.0); }
footer ul li a img { width: 100%; height: auto; }
.pcmode footer ul li  a.btn-tw:hover { background-color: rgba(29, 163, 242, 0.6); }
.pcmode footer ul li  a.btn-yt:hover { background-color: rgba(252, 1, 0, 0.6); }
footer address {
  margin-top: 10px;
  font-size: 1.6rem;
}
footer address p span { margin: 0 6px; }
.pcmode footer address a:hover { opacity: 0.5; }
footer .credit { margin-top: 15px; }
footer .credit p { font-size: 1.2rem; }
footer .credit a {
  display: inline-block;
  margin: 0 6px;
}
.pcmode footer .credit a:hover { opacity: 0.5; }

@media screen and (max-width: 419px) {
  footer ul { margin-top: 12px; }
  footer ul li a { width: 32px; }
  footer address { font-size: 1.4rem; }
  footer .credit p { font-size: 1.1rem; }
}


/* --------------------------------------------------- */
/* ContentEnd */
/* --------------------------------------------------- */
.ang { position: relative; }
.ang::before {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  display: block;
  width: 480px;
  height: 480px;
  border-right: solid 240px #9f8f3c;
  border-bottom: solid 240px #9f8f3c;
  border-top: solid 240px transparent;
  border-left: solid 240px transparent;
  box-sizing: border-box;
  z-index: 2;
}
.cat-kg.ang::before,
.cat-kg .ang::before {
  border-right-color: #7bb2b7;
  border-bottom-color: #7bb2b7;
}
.cat-gym.ang::before,
.cat-gym .ang::before {
  border-right-color: #a4bda2;
  border-bottom-color: #a4bda2;
}
.cat-sil.ang::before,
.cat-sil .ang::before {
  border-right-color: #7fb09a;
  border-bottom-color: #7fb09a;
}
.cat-wcp.ang::before,
.cat-wcp .ang::before {
  border-right-color: #829aa7;
  border-bottom-color: #829aa7;
}

@media screen and (max-width: 767px) {
  .ang::before {
    width: 320px;
    height: 320px;
    border-width: 160px;
  }
}
@media screen and (max-width: 419px) {
  .ang::before {
    width: 160px;
    height: 160px;
    border-width: 80px;
  }
}


/* --------------------------------------------------- */
/* PageHead */
/* --------------------------------------------------- */
#pghead { position: relative; z-index: 4; }

/* Type-A */
/* --------------------------------------------------- */
#pghead.type-a {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  height: 440px;
}
#pghead.type-a .cathead {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  font-size: 1.0rem;
}
#pghead.type-a .cathead h2 {
  display: inline-block;
  padding: 10px 10px 10px 50px;
  background-color: #000;
  font-size: 5.4rem;
  font-weight: 900;
  line-height: 1.0;
}
#pghead.type-a .cathead p {
  display: inline-block;
  margin-top: -10px;
  padding: 10px 10px 10px 50px;
  background-color: #000;
  font-size: 1.6rem;
  line-height: 1.0;
}
#pghead.type-a ul {
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: #000;
  padding-right: 30px;
  transform: translateY(40%);
}
#pghead.type-a ul li  {
  display: inline-block;
  padding-left: 20px;
}
#pghead.type-a ul li a {
  position: relative;
  padding-left: 15px;
  font-size: 1.6rem;
  font-weight: 900;
  line-height: 40px;
}
.pcmode #pghead.type-a ul li a:hover { opacity: 0.5; }
#pghead.type-a ul li a::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  display: block;
  width: 6px;
  height: 6px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  transform: rotate(45deg) translateY(-50%);
}

@media screen and (max-width: 767px) {
  #pghead.type-a { height:330px; }
  #pghead.type-a .cathead h2 {
    padding: 10px 10px 10px 30px;
    font-size: 4.0rem;
  }
  #pghead.type-a .cathead p { padding: 10px 10px 10px 30px; }
  #pghead.type-a ul {
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: #000;
    padding-right: 30px;
    transform: translateY(40%);
  }
  #pghead.type-a ul li  {
    display: inline-block;
    padding-left: 20px;
  }
  #pghead.type-a ul li a {
    position: relative;
    padding-left: 15px;
    font-size: 1.6rem;
    font-weight: 900;
    line-height: 40px;
  }
  .pcmode #pghead.type-a ul li a:hover { opacity: 0.5; }
  #pghead.type-a ul li a::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    display: block;
    width: 6px;
    height: 6px;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    transform: rotate(45deg) translateY(-50%);
  }
}
@media screen and (max-width: 419px) {
  #pghead.type-a { height:220px; }
  #pghead.type-a .cathead h2 {
    padding: 10px 10px 10px 15px;
    font-size: 2.7rem;
  }
  #pghead.type-a .cathead p {
    padding: 10px 10px 10px 15px;
    font-size: 1.4rem;
  }
  #pghead.type-a ul { padding-right: 15px; }
  #pghead.type-a ul li  { padding-left: 15px; }
}


/* Type-B */
/* --------------------------------------------------- */
#pghead.type-b {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
}
#pghead.type-b::after {
  content: '';
  display: block;
  width: 100%;
  padding-top: 34%;
}
#pghead.type-b .cathead {
  position: absolute;
  top: 50%;
  left: 0;
  display: block;
  width: 100%;
  color: #fff;
  text-align: center;
  transform: translateY(-58%);
}
#pghead.type-b .cathead h2 {
  font-size: 5.4rem;
  font-weight: 900;
  line-height: 1.2;
}
#pghead.type-b p { font-size: 1.6rem; line-height: 1.4; }

@media screen and (max-width: 767px) {
  #pghead.type-b .cathead h2 { font-size: 3.6rem; }
  #pghead.type-b p { font-size: 1.4rem; }
}
@media screen and (max-width: 419px) {
  #pghead.type-b .cathead h2 { font-size: 2.7rem; }
}

/* Type-C */
/* --------------------------------------------------- */
#pghead.type-c .cathead {
  padding: 50px 5% 40px;
  color: #fff;
  text-align: center;
  background: -moz-linear-gradient(left, #4f471e, #9f8f3c 50%, #4f471e);
  background: -webkit-linear-gradient(left, #4f471e, #9f8f3c 50%, #4f471e);
  background: linear-gradient(to right, #4f471e, #9f8f3c 50%, #4f471e);
}
#pghead.type-c .cathead h2 {
  font-size: 5.4rem;
  font-weight: 900;
  line-height: 1.2;
}
#pghead.type-c p { font-size: 1.6rem; line-height: 1.4; }
#pghead.type-c p span { padding: 0 4px; }
.cat-kg #pghead.type-c .cathead {
  background: -moz-linear-gradient(left, #40237f, #7bb2b7 50%, #40237f);
  background: -webkit-linear-gradient(left, #40237f, #7bb2b7 50%, #40237f);
  background: linear-gradient(to right, #40237f, #7bb2b7 50%, #40237f);
}
.cat-gym #pghead.type-c .cathead {
  background: -moz-linear-gradient(left, #7c4400, #a4bda2 50%, #7c4400);
  background: -webkit-linear-gradient(left, #7c4400, #a4bda2 50%, #7c4400);
  background: linear-gradient(to right, #7c4400, #a4bda2 50%, #7c4400);
}
.cat-sil #pghead.type-c .cathead {
  background: -moz-linear-gradient(left, #41666d, #7fb09a 50%, #41666d);
  background: -webkit-linear-gradient(left, #41666d, #7fb09a 50%, #41666d);
  background: linear-gradient(to right, #41666d, #7fb09a 50%, #41666d);
}
#pghead.type-c .pgtitle {
  padding: 13px 5%;
  background-color: #bbb;
  color: #111;
  text-align: center;
}
#pghead.type-c .pgtitle h3 {
  font-size: 2.8rem;
  font-weight: 900;
  line-height: 1.2;
}

@media screen and (max-width: 767px) {
  #pghead.type-c .cathead {
    padding: 42px 5% 32px;
  }
  #pghead.type-c .cathead h2 { font-size: 3.6rem; }
  #pghead.type-c p { font-size: 1.4rem; }
  #pghead.type-c p span { padding: 0 3px; }
  #pghead.type-c .pgtitle h3 { font-size: 2.2rem; }
}
@media screen and (max-width: 419px) {
  #pghead.type-c .cathead { padding: 24px 5% 16px; }
  #pghead.type-c .cathead h2 { font-size: 2.7rem; }
  #pghead.type-c .pgtitle { padding: 5px 5%; }
  #pghead.type-c .pgtitle h3 { font-size: 1.8rem; }
}


/* --------------------------------------------------- */
/* Set BG */
/* --------------------------------------------------- */
.setbg {
  background-image: url('../image/common/bg-ict.png');
  background-repeat: no-repeat;
  background-position: 0 100px;
  background-size: auto 440px;
}
.cat-kg .setbg { background-image: url('../image/common/bg-kokugeki.png'); }
.cat-gym .setbg{ background-image: url('../image/common/bg-gym.png'); }
.cat-sil .setbg { background-image: url('../image/common/bg-sil.png'); }
.setbg > * { position: relative; z-index: 2; }

@media screen and (max-width: 767px) {
  .setbg {
      background-position: 0 75px ;
      background-size: auto 330px;
    }
}
@media screen and (max-width: 419px) {
  .setbg {
      background-position: 0 50px ;
      background-size: auto 220px;
    }
}


/* --------------------------------------------------- */
/* PageNation */
/* --------------------------------------------------- */
.pgnation ul {
  display: flex;
  justify-content: flex-end;
}
.pgnation ul li {  margin: 36px 0 0 16px;}
.pgnation ul li a {
  position: relative;
  display: block;
  width: 36px;
  height: 36px;
}
.pgnation ul li a span {
  display: block;
  width: 16px;
  height: 16px;
  border-top: 1px solid #000;
  border-right: 1px solid #000;
}
.pgnation ul li a.btn-prev span { transform: rotate(-135deg); }
.pgnation ul li a.btn-next span { transform: rotate(45deg); }

/* --------------------------------------------------- */
/* Partners */
/* --------------------------------------------------- */
.partners {
  display: flex;
  flex-direction: column;
  background: #fff;
  padding-top: 30px;
  padding-bottom: 55px;
}
@media screen and (min-width: 992px) {
  .partners {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}
.partners__container {
  align-self: center;
  padding-left: 25px;
  padding-right: 25px;
}
@media screen and (min-width: 992px) {
  .partners__container {
    max-width: 1000px;
    padding-left: 0;
    padding-right: 0;
  }
}
.partners__title {
  padding-bottom: 30px;
  font-size: 1.5rem;
  text-align: center;
}
@media screen and (min-width: 992px) {
  .partners__title {
    display: none;
  }
}
.partners__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
}
@media screen and (min-width: 992px) {
  .partners__list {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}
.partners__item {
  display: flex;
}

/* --------------------------------------------------- */
/* Access */
/* --------------------------------------------------- */
main address {
  position: relative;
  background-color: #fff;
  display: flex;
}
main address #access {
  position: relative;
  padding: 60px 5%;
  width: 50%;
  box-sizing: border-box;
  text-align: center;
/*　背景色変更対応　20250610 add start*/
	background-color:#e1e2e4;
/*　背景色変更対応　20250610 add end*/
}
main address .gmap {
  position: relative;
  width: 50%;
}
main address #access h2 {
  color: #aaa;
  font-size: 2.8rem;
  font-weight: 900;
  line-height: 1.2;
}
main address #access h3 {
  color: #aaa;
  font-size: 1.6rem;
}
main address #access h4 {
  font-size: 2.4rem;
  font-weight: 900;
}
main address #access p { font-size: 1.6rem; }
main address #access .btn {
  margin: 20px auto 0;
  background-color: #000;
}
main address #access figure {
  margin: 30px auto 0;
  width: 100%;
  max-width: 435px;
}
main address #access figure img { width: 100%; height: auto; }
main address .gmap iframe {
  position: absolute;
  bottom: 0;
  right: 0;
  display: block;
  width: 100%;
  height: 100%;
}

@media screen and (max-width: 767px) {
  main address { flex-direction: column; }
  main address #access {
    padding: 40px 5%;
    width: 100%;
  }
  main address .gmap {
    width: 100%;
    height: 460px;
  }
  main address #access h2 { font-size: 2.6rem; }
  main address #access h3 { font-size: 1.4rem; }
  main address #access h4 { font-size: 2.4rem; }
}
@media screen and (max-width: 419px) {
  main address #access { padding: 30px 5%; }
  main address .gmap { height: 310px; }
  main address #access h2 { font-size: 2.4rem; }
  main address #access h4 { font-size: 2.2rem; }
  main address #access p { font-size: 1.4rem; }
}

/* --------------------------------------------------- */
/* No Event */
/* --------------------------------------------------- */
.noevent {
  padding: 30px 0;
  border-bottom: 1px solid #333;
}
.noevent p {
  color: #000;
  font-size: 1.4rem;
  text-align: center;
}


/* --------------------------------------------------- */
/* Post Field */
/* --------------------------------------------------- */
.postfield { color: #000; }
.postfield > * { margin-top: 30px; }
.postfield > *:first-child { margin-top: 0; }
.postfield h2 {
  margin-bottom: 50px;
  font-size: 2.8rem;
  font-weight: 900;
  text-align: center;
}
.postfield h3 {
  color: #9e8d3d;
  font-size: 1.8rem;
  font-weight: 900;
}
.postfield h4 {
  margin-top: 50px;
  padding: 8px;
  background-color: #9e8d3d;
  font-size: 1.6rem;
  font-weight: 900;
  line-height: 1.4;
}
.postfield h5 {
  color: #9e8d3d;
  font-size: 1.6rem;
  font-weight: 900;
}
.postfield p { font-size: 1.6rem; }
.postfield p a { text-decoration: underline; }
.postfield img { margin: 50px auto; width: 100%; height: auto; }
.postfield .blockline {
  margin-top: 15px;
  padding-bottom: 15px; 
  border-bottom: 1px solid #333;
}
.postfield .ytube {
  position: relative;
  width: 100%;
}
.postfield .ytube::before {
  content: '';
  display: block;
  width: 100%;
  padding-top: 57%;
}
.postfield .ytube iframe {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
}

@media screen and (max-width: 767px) {
  .postfield > * { margin-top: 25px; }
  .postfield h2 {
    margin-bottom: 40px;
    font-size: 2.4rem;
  }
  .postfield h4 { margin-top: 40px; }
  .postfield img { margin: 40px auto; }

}
@media screen and (max-width: 419px) {
  .postfield > * { margin-top: 20px; }
  .postfield h2 {
    margin-bottom: 30px;
    font-size: 2.0rem;
  }
  .postfield h3 { font-size: 1.6rem; }
  .postfield h4 {
    margin-top: 30px;
    padding: 6px;
  }
  .postfield h5 { font-size: 1.4rem; }
  .postfield p { font-size: 1.4rem; }
  .postfield img { margin: 30px auto; }
  .postfield .blockline {
    margin-top: 12px;
    padding-bottom: 12px; 
  }
}

.cat-kg .postfield h3,
.cat-kg .postfield h5 { color: #7bb2b7; }
.cat-kg .postfield h4 { background-color: #7bb2b7; }
.cat-gym .postfield h3,
.cat-gym .postfield h5 { color: #a4bda2; }
.cat-gym .postfield h4 { background-color: #a4bda2; }
.cat-sil .postfield h3,
.cat-sil .postfield h5 { color: #7fb09a; }
.cat-sil .postfield h4 { background-color: #7fb09a; }


/* --------------------------------------------------- */
/* BasicBreakPoint */
/* --------------------------------------------------- */
@media screen and (max-width: 767px) {
}
@media screen and (max-width: 419px) {
}