@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200;300;400;500;600;700;900&display=swap');

body {
	/*--font-family: "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;--*/
	/*--font-family: "Yu Mincho", "游明朝体", "YuMincho", "游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;--*/
	font-family: "Noto Serif JP", serif;
	/*--font-weight: 400;
	font-style: normal;--*/
}

.catchcopy{font-family: "Noto Serif JP", serif;}

.ta_c{text-align:center !important;}
.ta_r{text-align:right !important;}
.ta_l {
    text-align: left !important;
    color: #dc143c !important;
    font-weight: bold !important;
}

.float_l{float: left !important;}
.float_r{float: right !important;}

.fw_b{font-weight: bold;}
.fw_n{font-weight: normal;}
.fs_small{font-size: 0.7em;}

.mt0{margin-top: 0px !important;}
.pt0{padding-top: 0px !important;}
.mb0{margin-bottom: 0px !important;}
.pb0{padding-bottom: 0px !important;}
.m_auto{margin-left: auto; margin-right: auto;}

.mt10{margin-top: 10px;}
.mb10{margin-bottom: 10px;}
.mt20{margin-top: 20px;}
.mb20{margin-bottom: 20px;}
.mt20{margin-top: 20px;}
.mb20{margin-bottom: 20px;}
.mt30{margin-top: 30px;}
.mb30{margin-bottom: 30px;}
.mt40{margin-top: 40px;}
.mb40{margin-bottom: 40px;}
.mt50{margin-top: 50px;}
.mb50{margin-bottom: 50px;}

.pt10{padding-top: 10px;}
.pb10{padding-bottom: 10px;}
.pt20{padding-top: 20px;}
.pb20{padding-bottom: 20px;}
.pt20{padding-top: 20px;}
.pb20{padding-bottom: 20px;}
.pt30{padding-top: 30px;}
.pb30{padding-bottom: 30px;}
.pt40{padding-top: 40px;}
.pb40{padding-bottom: 40px;}
.pt50{padding-top: 50px;}
.pb50{padding-bottom: 50px;}

.red{color: #d34;}

.envelope {
    background: #fff;
    border: 1px solid #eee;
    margin: 5px 0;
    padding: 10px;
}


.icon_beginner {
  position: relative; /* 位置を相対的に設定 */
  padding-left: 40px; /* 左のパディングを調整 */
  text-indent: 0; /* テキストのインデントをリセット */
  display: inline-block; /* インラインブロック表示 */
  background-color: lightblue; /* 背景色を水色に設定 */
  border-radius: 5px; /* 角を丸くする（必要なら） */
  padding: 5px 10px; /* パディングを調整 */
  border: 2px solid #1f5301; /* 枠線の色を #1f5301 に設定 */
}

.icon_beginner::before {
  content: "\01f530"; 
  vertical-align: baseline; 
  font-size: 2em; /* フォントサイズを2emに設定して若葉マークを大きくする */
  position: absolute; /* 絶対位置 */
  left: -40px; /* 左に40px移動 */
  top: 50%; /* 垂直方向に中央揃え */
  transform: translateY(-50%); /* 中央揃え */
}

.image_container {
  border: 2px solid #1f5301; /* 枠線の色を #1f5301 に設定 */
  padding: 10px; /* パディングを調整 */
  display: inline-block; /* インラインブロック表示 */
  border-radius: 5px; /* 角を丸くする（必要なら） */
  background-color: lightblue; /* 背景色を水色に設定 */
}



/* トップのスライド */

#slide-nav {
    text-align: center;
    margin-top: 10px;
}

.nav-dot {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: #ccc;
    border-radius: 50%;
    margin: 5px;
    cursor: pointer;
}

.nav-dot.active {
    background-color: #333;
}



/* トップ下のボタン */
.link-button {
    display: inline-block;
    padding: 15px 30px;
    background-color: #ff5722; /* 鮮やかな色で目立たせる */
    color: white;
    text-decoration: none;
    border-radius: 10px; /* 丸みを強調 */
    font-weight: bold;
    font-size: 18px; /* サイズアップで視認性向上 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* ボタンに影を追加 */
    margin-top: 20px;
    text-align: center;

    /* ボタンを中央寄せするためのスタイル */
    position: relative;
    left: 50%;
    transform: translateX(-50%);

    /* ボタンの横幅を設定 */
    width: 350px; /* 必要な横幅に変更可能 */
    transition: all 0.3s ease; /* ホバー時のアニメーション */
}

.link-button:hover {
    background-color: #e64a19; /* ホバー時に少し濃い色に変更 */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* ホバー時の影を強調 */
    transform: translateX(-50%) scale(1.05); /* ホバー時に少し拡大 */
}





#title_text{font-size: 2.2em; font-weight: 500; color: #2b3f7f; letter-spacing: -0.1em; font-feature-settings: "palt";}

#title_img img{ max-height: 62px;}

.tab_container {
	width: 100%;
	padding-bottom: 1em;
	background-color: #fff;
	margin: 0 auto;
	text-align: center;

	display: flex;
	flex-wrap: wrap;
}
  .tab_item {
	font-size: 13px;
	width: calc( calc(100% - 12px ) / 7 );
	/*--
	
	タブの数によって調整する
	
	width: calc( calc(100% - 10px ) / 6 );
	width: calc( calc(100% - 14px ) / 8 );

	など

	--*/



	padding: 10px 0;
	background-color: #EDF7FF;
	text-align: center;
	color: #3c88d6 ;
	display: block;
	/*--float: left;--*/
	text-align: center;
	font-weight: bold;
	transition: all 0.2s ease;
	border-radius: 15px 15px 0 0;
  }

  .tab_item:not(:last-of-type){margin-right: 2px;}

  .tab_item:hover {
	opacity: 0.75;
  }
  input[name="tab_item"] {
	display: none;
  }
  .tab_content {
	width: 100%;
	display: none;
	padding: 1em 1em 0;
	clear: both;
	overflow: hidden;
	border-top: 3px solid #3c88d6 ;
  }
  #tab1:checked ~ #tab1_content,
  #tab2:checked ~ #tab2_content,
  #tab3:checked ~ #tab3_content,
  #tab4:checked ~ #tab4_content,
  #tab5:checked ~ #tab5_content,
  #tab6:checked ~ #tab6_content,
  #tab7:checked ~ #tab7_content {
	display: block;
  }
  .tab_container input:checked + .tab_item {
	background-color: #3c88d6 ;
	color: #fff;
  }

  /* 700px以下の画面サイズに対するスタイル変更 */
@media (max-width: 700px) {
	.tab_item{
		font-size: 12px;
		line-height: 1.2em;
		/*--line-height: 1.5em;
		min-height: calc( 3em + 20px );--*/
		display: grid;
		place-items: center center;
	}

}