@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&display=swap');

img{
	width: 100%;
	max-width: auto;
}

body{
	font-size: 16px;
	  font-family: "Noto Sans JP" !important;
}
p{
	font-size: 1.25em;
	    line-height: 1.8 !important;
	margin-top: 1em;
        margin-bottom: 2.5em;
}

ul{margin-left: 0; padding-left: 0;}
ul.icon-list,ul.icon-list-2 {
    background-color: #f7f3e6;
    padding: 15px;
}
.icon-list li {
  list-style: none; /* デフォルトのリストスタイルを削除 */
  position: relative;
  padding-left: 1.5em; /* アイコン分の余白を設定 */
	font-weight: bold;
	font-size: 1.8em;
}

.icon-list li::before {
  content: "\f058"; /* Font AwesomeのアイコンのUnicode */
  font-family: "Font Awesome 5 Free"; /* Font Awesomeのフォント */
  font-weight: 900; /* Solidアイコンの場合のウェイト */
  position: absolute;
  left: 0;
  color: #961D1F; /* アイコンの色 */
}


.icon-list-2 li {
 list-style: none; /* デフォルトのリストスタイルを削除 */
  position: relative;
  padding-left: 1.5em; /* アイコン分の余白を設定 */
	font-weight: bold;
	font-size: 1.3em;
}

.icon-list-2 li::before {
  content: "\f058"; /* Font AwesomeのアイコンのUnicode */
  font-family: "Font Awesome 5 Free"; /* Font Awesomeのフォント */
  font-weight: 900; /* Solidアイコンの場合のウェイト */
  position: absolute;
  left: 0;
  color: #961D1F; /* アイコンの色 */
}


span.marker,strong.marker {
    background:linear-gradient(transparent 60%, #ff6 60%);
}

span.marker-p,strong.marker-p {
    background:linear-gradient(transparent 60%, #ffcece 60%);
}

.stepbar {
  width: 80%;
  margin: 0 auto;
  text-align: center;
  border-top: 1px solid #dedede;
}

.stepbar .stepbarwrap .triangle {
  content: "";
  display: block;
  width: 0;
  border: solid 1em transparent;
  border-top-color: #dedede;
  margin: 0 auto;
}

.stepbar .stepbarwrap .steptitle span {
  display: block;
  font-weight: bold;
  margin: 1em auto;
}
.steptitle {
    font-weight: bold;
    font-size: 34px;
    line-height: 1;
    color: #b53434;
    text-shadow: 1px 1px 2px #ccc;
}
.stepbar .stepbarwrap .title {
  font-size: 2em;
  font-weight: bold;
}


.stepbar .stepbarwrap .txt {
  width: 90%;
  display: block;
  margin: 2em auto;
  
}

.stepbar:first-of-type .triangle:first-of-type {
  display: none;
}

.stepbar:last-of-type .stepbarwrap:last-of-type {
  border-bottom: 1px solid #dedede;
}

.img80{
	width: 80%;
	max-width: 480px;
}
    .h3, h3 {
        font-size: 2em;
    }


.ribon{
background-color: #510202;
    border-top: solid 5px #b77a3a;
    border-bottom: solid 5px #b77a3a;
    color: #fff;
    padding: 25px 5px;
}
.yellow{
	color: #fff900 !important;
}


.lesson-section p{
	font-size: 1.4em;
}
.steps {
    position: relative;
    overflow: hidden;
    padding: 2.3rem 2rem 1.5rem 130px;
    border-top: 3px solid #8f1e20;
}

.steps:before {
    position: absolute;
    top: -113%;
	left: -150px;
    width: 257px;
    height: 177%;
    content: '';
    -webkit-transform: rotate(25deg);
    transform: rotate(4deg);
    background: #8f1e20;
}

.steps span {
    font-size: 40px;
    font-size: 1.5rem;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    display: block;
    padding-top: 3px;
    padding-left: 16px;
    color: #fff;
}



.group {
  position: relative;
  padding: 1em 2em;
  text-align: center;
	font-weight: bold;
	color: #8f1e20;
}
.group h2{font-weight: 900;}

.group:before,
.group:after {
  position: absolute;
  content: '';
}

.group:after {
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  border-top: 5px solid #8f1e20;
  border-left: 5px solid #8f1e20;
}

.group:before {
  right: 0;
  bottom: 0;
  width: 50px;
  height: 50px;
  border-right: 5px solid #8f1e20;
  border-bottom: 5px solid #8f1e20;
}


.class-text p{font-size: 1.2em;}


.g-lead{
	font-size: 1.3em;
    margin-top: 1em;
    margin-bottom: 1em;
}

.classtitle-lead{
  position: relative;
  padding: 1rem 2rem calc(1rem + 10px);
  background: #fff100;
	font-weight: bold;
}

.classtitle-lead:before {
  position: absolute;
  top: -7px;
  left: -7px;
  width: 100%;
  height: 100%;
  content: '';
  border: 4px solid #000;
}


.brown-title{
	border-bottom: solid 3px #714545;
    color: #714545;
    font-weight: 900;
    margin-bottom: 1em;
}
.sp-title-brown{
	border-bottom: solid 3px #714545;
    color: #714545;
    font-weight: 900;
	font-size: 1.5em;
    margin-bottom: 1em;
}
.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 80px solid transparent;
  border-left: 80px solid transparent;
  border-top: 30px solid #d4d3d3;
  border-bottom: 0;
}

p{margin-bottom: 1.5em !important;}

@media screen and (max-width: 960px) {
	.steps {
  position: relative;
  overflow: hidden;
  padding: 1.5rem 2rem 1.5rem 130px;
  border-top: 3px solid #8f1e20;
}

.steps:before {
    position: absolute;
    top: -100%;
    left: -137px;
    width: 257px;
    height: 165%;
    content: '';
    -webkit-transform: rotate(25deg);
    transform: rotate(4deg);
    background: #8f1e20;
}

.steps span {
    font-size: 40px;
    font-size: 1.2rem;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    display: block;
    padding-top: 3px;
    padding-left: 16px;
    color: #fff;
}
.icon-list li {
  list-style: none; /* デフォルトのリストスタイルを削除 */
  position: relative;
  padding-left: 1.5em; /* アイコン分の余白を設定 */
	font-weight: bold;
	font-size: 1em;
}
	
	
	
  .stepbar {
    width: 90%;
  }
p{
	font-size: 1.2em;
	margin-top: 1em;
        margin-bottom: 0.5em;
}	
    .h3, h3 {
        font-size: calc(1.2rem + .4vw);
    }
.stepbarss {
  width: 100%;
  margin: 0 auto;
  text-align: center;
  border-top: 2px solid #dedede;
}

.stepbar .stepbarsswrap .triangle {
  content: "";
  display: block;
  width: 0;
  border: solid 2em transparent;
  border-top-color: #dedede;
  margin: 0 auto;
}

.stepbar .stepbarsswrap .steptitle span {
  display: block;
  font-weight: bold;
  margin: 1em auto;
}
.steptitle {
    font-weight: bold;
    font-size: 24px;
    line-height: 1;
    color: #b53434;
    text-shadow: 1px 1px 2px #ccc;
}
.stepbar .stepbarsswrap .title {
  font-size: 1.2em;
  font-weight: bold;
}

.stepbar .stepbarsswrap .txt {
  width: 95%;
  display: block;
  margin: 2em auto;
  font-size: 0.9em;
}

.stepbar:first-of-type .triangle:first-of-type {
  display: none;
}

.stepbar:last-of-type .stepbarsswrap:last-of-type {
  border-bottom: 2px solid #dedede;
}
.class-text p{font-size: 1.1em;margin-top: 1em;
        margin-bottom: 0.5em;
	}
	
	
}


.stepbarss {
  margin: 0 auto;
  width: 80%;
}

.stepbarss .stepbarsswrap {
  margin: 2em 0;
  position: relative;
}

.stepbarss .stepbarsswrap .steptitle {
  display: inline-flex;
  align-items: center;
}

.stepbarss .stepbarsswrap .steptitle .stepcircle {
  display: inline-block;
  width: 1em;
  height: 1em;
  content: "";
  border-radius: 50%;
  background-color: #fff;
  border: 3px solid #396fa9;
}

.stepbarss .stepbarsswrap .steptitle .stepnum {
  padding-left: 1em;
  font-size: 0.8em;
  color: #396fa9;
}

.stepbarss .stepbarsswrap .steptxt {
  padding-left: 2em;
}

.stepbarss .stepbarsswrap .steptxt .steptxt-title {
  margin: 0.5em 0;
  font-weight: bold;
  font-size: 1.2em;
}

.stepbarss .stepbarsswrap .steptxt .steptxt-txt {
  font-size: 0.9em;
}

.stepbarss .stepbarsswrap .stepline {
  width: 3px;
  height: calc(100% + 1em);
  background-color: #396fa9;
  position: absolute;
  top: 1em;
  left: 0.5em;
  z-index: -1;
}

.stepbarsswrap:last-of-type .stepline:last-of-type {
  display: none;
}
@media screen and (max-width: 960px) {

	.stepbarss {
        width: 100%;
        margin: 0 auto;
        text-align: left;
        border-top: 2px solid #dedede;
    }
}


 .pulsing {
    animation: shake 1s infinite;
  }

  @keyframes shake {
    0% { transform: translate(0, 0); }         /* 初期位置 */
    10% { transform: translate(2px, 2px); }   /* 少し揺れる */
    20% { transform: translate(-2px, -2px); } /* 少し揺れる */
    30% { transform: translate(2px, -2px); }  /* 少し揺れる */
    40% { transform: translate(0, 0); }       /* 元に戻る */
    100% { transform: translate(0, 0); }      /* 残りの時間は停止 */
  }


.table-wrap {
  overflow-x: scroll;
  white-space: nowrap;
  margin-bottom: 0px !important;
}


    /* バナー共通スタイル */
    .floating-banner {
      position: fixed;
      background-color: #f5f5f5;
      border: 1px solid #ddd;
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      padding: 15px 20px;
      z-index: 1000;
      text-align: center;
      transition: all 0.3s ease;
    }

    /* PCの表示 */
    @media (min-width: 768px) {
      .floating-banner {
        bottom: 20px; /* 画面下から20px */
        right: 20px; /* 画面右から20px */
        width: 500px;
      }
    }

    /* スマホの表示 */
    @media (max-width: 767px) {
.icon-list-2 li {
	font-size: 1.1em;
}


	.stepbar .stepbarwrap .title {
font-size: 1.5em;
    font-weight: bold;
}	
		
      .floating-banner {
        bottom: 0; /* 画面下に固定 */
        left: 0; /* 画面左に固定 */
        width: 100%; /* 画面幅全体 */
        border-radius: 0; /* 角をなくす */
        padding: 10px;
      }
    }

    /* 閉じるボタンのスタイル */
    .close-banner {
      position: absolute;
      top: 10px;
      right: 10px;
      background: none;
      border: none;
      font-size: 16px;
      cursor: pointer;
      color: #888;
    }

    .close-banner:hover {
      color: #333;
    }
/* サイドメニュー全体 */
.side-menu {
  position: fixed;
  top: 0;
  left: -250px; /* 初期状態で画面外 */
  width: 250px;
  height: 100%;
  background-color: #333333e8;
  color: #fff;
  z-index: 1000;
  transition: left 0.3s ease; /* スライドアニメーション */
  overflow-y: auto; /* 必要に応じてスクロール可能 */
  padding: 20px;
}

/* メニュー内リスト */
.side-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.side-menu li {
  margin: 20px 0;
}

.side-menu a {
  text-decoration: none;
  color: #fff;
  font-size: 18px;
  display: block;
  padding: 5px 0;
}

.side-menu a:hover {
  color: #ddd;
}

span#menu-button {
    position: fixed;
    left: -4px;
	top:10px;
    background-color: #8a1c20;
    font-size: 16px;
    border-radius: 5px;
    padding: 1px 5px 3px;
    z-index: 999999;
}
.floating-banner {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 445px;
    height: 105px;
    background-color: #333;
    color: #fff;
    display: flex
;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    z-index: 1000;
}
.floating-banner {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 445px;
    height: 105px;
    background-color: #333;
    color: #fff;
    display: flex
;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    z-index: 1000;
}
 @media (max-width: 767px) {
.floating-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background-color: #333;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: 1000;
}
}
/* バナーコンテンツ */
.banner-content {
  min-width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: absolute;
  left: 100%;
  transition: left 0.3s ease;
}

/* アクティブなバナーを表示 */
.banner-content.active {
  left: 0;
}

/* ボタン */
.banner-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0,0,0,0.76);
    color: #fff;
    border: none;
    cursor: pointer;
    padding: 25px 2px;
    z-index: 1001;
}

#prev-btn {
  left: 0px;
}

#next-btn {
  right: 0px;
}