@charset "UTF-8";
@import url("work.css");
/* CSS Document */


/* リセットCSS */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, article, aside, footer, header, hgroup, menu, nav, section {
	margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
}
.book_photo a:hover {
	opacity: 0.6;
}
.book_contents p a {
	color: #A81215;
}



.book_contents p a:hover {
	text-decoration: underline;
	font-weight: bold;
}



h1, h2, h3, h4, h5, h6 {
	font-weight: bold;
}

a {
  text-decoration: none;
}
.sidea ul li a:hover {
  opacity: 0.7;
}
ul {
  list-style: none;
}
.clear {
	overflow: hidden;
	zoom: 1;
}
/* レイアウト */
body {
  background: #fff;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.wrapper-main {
  background: #ededed;
	overflow: hidden;

}
.main {
  margin: 0 auto;
  background: #fff;
  max-width: 960px;
}

.headerinfo-contents {
	padding:  4.1666666%;/* 4.1666666%（40px/960px） */
}
.headerinfo-contents.clear p a {
	color: #333333;
	text-decoration: underline;
}

.headerinfo-contents.clear p a:hover {
	color: #FFFFFF;
	font-weight: bold;
	text-decoration: none;
}

.wrapper-header {
  border-top: 10px solid #BF762D;
}
.wrapper_nav {
  background-color: #D7CDCD;
  border-bottom: 2px solid #04531E;
}
.in_nav li {
  float: left;
  width: 20%;
  text-align: center;
}

.sidea {
  float: left;
  padding-top: 20px;
  padding-bottom: 20px;
  width: 49%;
}
.wrapper-category {
	border-top: 5px solid #78B087;
	background-color: #73CD8C;
}
.category {
	margin: 0 auto;
	max-width: 960px;
}
.main-contents p img {
	border-radius: 115px;
	margin-left: auto;
}

.wrapper-main {
	background: #ededed;
}
.main {
	margin: 0 auto;
	background: #fff;
	max-width: 960px;
}



.wrapper-sbfooter {
  background-color: #189755;
}
#sbfooter {
  margin: 0 auto;
  background-color: #FFFFFF;
  width: 100%;
  max-width: 960px;
  clear: both;
  padding: 10px 0;
}

#sbfooter ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap; /* 画面サイズが小さい場合は折り返し */
  justify-content: center; /* 中央に揃える */
}

#sbfooter ul li {
  margin: 5px 10px;
}

#sbfooter ul li a {
  text-decoration: none;
  color: #000;
  padding: 5px 10px;
  display: inline-block;
}

/* タブレットサイズ用メディアクエリ（768px以上） */
@media (min-width: 768px) {
  #sbfooter ul {
    justify-content: space-around; /* リンクを均等に分布 */
  }
}

/* デスクトップサイズ用メディアクエリ（1024px以上） */
@media (min-width: 1024px) {
  #sbfooter {
    padding: 20px 0;
  }

  #sbfooter ul li {
    margin: 10px 15px;
  }
}
.wrapper-footer {
	background-color: #998675;
	padding-bottom: 1%;
}
.footer {
	display: flex;
	 flex-wrap: wrap;
	margin: 0 auto;
	max-width: 960px;
	padding-top: 20px;
}
/* headerinfo */
.headerinfo-contents img {
	float: left;
	margin: 0 2.2727272% 0px 0;/* 2.2727272%（20px/880px）ｺｺ*/
}
.headerinfo p {
	padding: 20px 0 0 0;
	font-size: 0.8em;
	color: #fff;
}
.header h1 {
    margin-top: 0;
    margin-right: 0;/* 4.1666666%（40px/960px） */
    width: 960px;
}
/* ナビゲーション */
.in_nav li {
	float: left;
	width: 20%;
	text-align: center;
}
.in_nav li a {
	display: block;
	padding: 15px 0;
	border-right: solid 1px #ddd;
	color: #000;
}
.in_nav li:last-child a {
	border-right: none;
	clear: left;
}
.in_nav li a:hover {
	padding: 15px 0 10px 0;
	border-bottom: 5px solid #A43D3D;
}
.in_nav li a:active{
	border-bottom: 5px solid #47A035;
}

/*sec1*/
.sec1 .sec1_contents p {
	font-size: 14px;
}
.next1 {
	text-align: right;
	margin-top: 10px;
}
.sec1 {
	width: 460px;
	height: 270px;
	margin-bottom: 15px;
	background-color: #EDD4B4;
	border-radius: 10px;
	margin-left: 10px;
	margin-right: 10px;
}
.sidea .sec1 .sec_img {
    width: 36%;
    height: 250px;
    float: left;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
}
.sidea .sec1 .sec1_contents {
    width: 55%;
    height: 250px;
    float: left;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
    margin-right: 10px;
}

/*sec2*/
.sec2 .sec2_contents p {
	font-size: 14px;
}

.sec2 {
	width: 460px;
	height: 220px;
	margin-left: 10px;
	margin-right: 10px;
	border-radius: 10px;
	background-color: #F5EBDE;
}
.sidea .sec2 .sec_img {
    width: 36%;
    height: 200px;
    float: left;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
}
.sidea .sec2 .sec2_contents {
    width: 55%;
    height: 200px;
    float: left;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
    margin-right: 10px;
}
.sidea .sec3 img {
	margin-top: 10px;
}
.sec3_articles {
	width: 470px;
	height: 100px;
}
.sec3_articles ul li {
	display: inline-block;
	margin-left: 10px;
	font-size: 12px;
}





/* main-contents */
.main-contents h1 {
	margin-right: 0;
	margin-left: 0;
	margin-bottom: 1em;
	padding: 15px 0 15px 10px;
	border-left: 12px solid #4DBD6C;
	font-size: 1.7em;
	font-weight: bold;
	color: #4DBD6C;
	
}




.main-contents h2 {
	margin: 2em 0 1em 0;
	border-bottom: 1px solid #4DBD6C;
	font-size: 1.1em;
	font-weight: bold;
	color: #4DBD6C;
}
.main-contents h3 {
	margin: 0 0 0.5em 0;
	font-weight: bold;
	color: #328326;
}
.main-contents p {
	margin: 0 0 1em 0;
	line-height: 1.8em;
}
.main-contents p.lead {
	margin: 0 0 1em 0;
	font-size: 1.1em;
	font-weight: bold;
}

.sidea {
	float: left;
	padding-top: 20px;
	padding-right: 0;
	padding-bottom: 20px;/* 4.1666666%（40px/960px） */
	width: 49%;/*43.75%（420px/960px） */
}
.annai {
	  display: flex;
      flex-wrap: wrap;
    height: 270px;
    background-image: linear-gradient(180deg,rgba(216,211,211,1.00) 0%,rgba(255,255,255,1.00) 43.52%,rgba(216,211,211,1.00) 100%);
    margin-top: 10px;
    width: 100%;
    max-width: 470px;
}
.shoten {
    width: 48%;
    height: 250px;
    float: left;
    margin-left: 1%;
    margin-right: 1%;
}
.shoten_img {
    margin-top: 10px;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
}
.shoten_title {
	text-align: center;
	font-weight: bold;
}
.shoten_kikan {
	font-size: 12px;
	text-align: center;
	margin-top: 10px;
}




.right {
	width: 49%;
	float: left;
	padding-left: 10px;
}
.right h1 {
	color: #333333;
	border-bottom: 1px solid #000000;
	padding-top: 20px;
	padding-bottom: 5px;
	margin-right: 10px;
}
.right_img1 {
    margin-top: 20px;
}
.right .right_img1 img {
	border: 1px solid #000000;
}




/* --- 新着情報エリア --- */
div.update {
    width: 100%; /* 新着情報エリアの幅 */
    font-size: 80%;
    max-width: 470px;
}


/* --- 新着リスト --- */
div.update dl {
	width: 100%; /* 新着リストの幅 */
	margin: 0;
	border-top: 1px #c0c0c0 dotted; /* 新着リストの上境界線 */
	height: 200px;
	overflow-y: scroll;
}

/* --- 日付エリア --- */
div.update dt {
width: 6.7em; /* 日付エリアの幅 */
float: left;
padding: 7px 0 6px 3px; /* 日付エリアのパディング（上右下左） */
line-height: 120%;
}

/* --- 本文エリア --- */
div.update dd {
margin: 0;
padding: 7px 3px 6px 6.6em; /* 本文エリアのパディング（上右下左） */
border-bottom: 1px #c0c0c0 dotted; /* 本文エリア下境界線 */
line-height: 120%;
}

/* --- clearfix --- */
.clearFix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearFix {
min-height: 1px;
}
#sbfooter ul li {
	font-size: 12px;
	float: left;
	margin-left: 15px;
	margin-top: 15px;
}
.footer_title {
	width: 470px;
	float: left;
}


/* footer */
.footer p {
	text-align: right;
	color: #fff;
	font-size: 0.9em;
}

.footer ul li a {
	color: #FFFFFF;
}
.footer ul li a:hover {
	color: #F5C661;
	text-decoration: underline;
}


.info_img {
	text-align: center;
}
.wrapper-footer .footer ul {
	float: left;
	width: 25%;
	font-size: 0.9em;
	margin-left: 1em;
	margin-top: 1em;
}
.main .main-contents img {
	max-width: 100%;
}
.content p strong {
	font-weight: bold;
}
.content p a:hover {
	color: #8C5E12;
	text-decoration: underline;
	font-weight: bold;
}
.content p a  {
	text-decoration: none;
}

.content2 p strong {
	font-weight: bold;
}
.content2 p a:hover {
	color: #8C5E12;
	text-decoration: underline;
	font-weight: bold;
}
.content2 p a  {
	text-decoration: none;
}








.content2 p {
	position: relative;
	margin-left: 20px;
	margin-top: 5px;
}
.content2 p::after,
.content2 p::before {
	display: block;
	content: '';
	position: absolute;
}
.content2 p::after {
	top: .35em;
	left: -1.2em;
	width: 14px;
	height: 14px;
	background-color: #21960F;
	border-radius: 100%;
}
.content2 p::before {
	z-index: 2;
	top: .625em;
	left: -.975em;
	width: 4px;
	height: 4px;
	border-right: 1px solid #fff;
	border-bottom: 1px solid #fff;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}


.main .main-contents .accent a{
	color: #B8580E;
	text-decoration: none;
	font-weight: bold;
}

.main .main-contents .accent a:hover{
	font-weight: bold;
	text-decoration: underline;
	background-color: #E9E0E0;

}





/* sidea */
.sidea h1 {
	color: hsla(130,76%,30%,1.00);
	font-size: 24px;
	font-weight: bold;
	line-height: 130%;
	margin: 15px 0px 20px 0px;
	padding: 0px 0px 3px 0px;
	border-bottom: 1px solid #333333;
	text-shadow: 1px 1px 0px white, 2px 2px 1px hsl(213, 100%, 85%);
	text-decoration: none;
}



/* articles */
.articles h1 {
	color: hsla(130,76%,30%,1.00);
	font-size: 24px;
	font-weight: bold;
	line-height: 130%;
	margin: 15px 0px 20px 0px;
	padding: 0px 0px 3px 0px;
	border-bottom: 3px solid hsl(0, 0%, 87%);
	text-shadow: 1px 1px 0px white, 2px 2px 1px hsl(213, 100%, 85%);
	text-decoration: none;
}


#pageTop{
	opacity:0.7;
	background-color: #8AE7A4;
	border-radius: 100px;
	color: #FFFFFF;
	padding-top: 30px;
	padding-right: 40px;
	padding-left: 40px;
	padding-bottom: 30px;
	position: fixed;
	bottom: 20px;
	right: 20px;
	font-size: 2em;
	margin-bottom: 20px;
	}
#pageTop:hover{
	background-color: #D3ECD9;
	color: #706D6D;
	}
/*チェックボックス画像*/
.check {
	background-repeat: no-repeat;
	background-position: left center;
	padding-left: 30px;
/*　//画像の分だけ左に余白を確保する*/
background-image: url(../images/checkbox.png);
}
a:hover {
	opacity: 0.7;
}

.footer section p {
	text-align: left;
	font-size: 14px;
	margin-top: 10px;
}




.main.clear .articles img {
		width: 100%;
	border-top: 1px solid #DDD;

    border-left: 1px solid #DDD;

    border-right: 1px solid #BBB;

    border-bottom: 1px solid #BBB;
}

@media screen and (max-width:600px) {
	/* nav-global */
	.in_nav li {
		float: none;
		width: 100%;
		text-align: left;
	}
	.in_nav li a {
		padding: 10px 0 10px 15px;
		border-right: none;
		border-top: solid 1px #dedede;
	}
	.in_nav li a:hover {
	padding: 10px 0 10px 10px;
	border-bottom: none;
	border-left: 5px solid #B3DBBE;
	}
	/* category */
	.category p {
		padding: 20px 4.1666666% 8px 0;/* 4.1666666%（40px/960px） */
		font-size: 1.5em;
	}
	/* main-contents */
	.main-contents h1 {
	padding: 5px 0 5px 10px;
	border-left: 10px solid #4DBD6C;
	font-size: 1.5em;
	}
	.main-contents p.lead {
		font-size: 1em;
	}
	.news {
		float: none;
		padding: 20px 4.1666666%;/* 4.1666666%（40px/960px） 両側で80px分 */
		width: 91.6666666%;/*91.6666666%（880px/960px） */
	}
	.articles {
		float: none;
		padding: 20px 4.1666666%;/* 4.1666666%（40px/960px） 両側で80px分 */
		width: 91.6666666%;/*91.6666666%（880px/960px） */
	}
.news .sb_p p {
	font-size: 1em;
}

tr th a {
	color: #FFFFFF;
}
tr th a:hover {
	color: #E79292;
	text-decoration: underline;
}
aside p a {
	font-size: 16px;
}
.articles aside h3 {
	font-size: 18px;
}
.wrapper-footer .footer section {
	width: 100%;
}
section p strong {
	font-size: 16px;
	border-bottom: 1px solid #FFFFFF;
}
.footer section p {
	font-size: 16px;
}

.header img {
	text-align: center;
}


.main .main-contents p {

}
.main.clear .main-contents {
	padding-left: 5px;
	padding-right: 5px;
}

.main.clear .main-contents .catch_img {
	float: none;
	text-align: center;
}
.main.clear .main-contents p {
	padding-left: 0px;
	padding-right: 0px;
}
.main.clear .news .course_main.index_btn .Button a {
	font-size: 14px;
}
.main-contents .course_main p {
	font-size: 14px;
}

}

/* news */
.news h1 {
	color: hsla(130,76%,30%,1.00);
	font-size: 20px;
	font-weight: bold;
	line-height: 130%;
	margin-top: 25px;
	margin-right: 0px;
	margin-left: 0px;
	margin-bottom: 20px;
	padding-top: 0px;
	padding-right: 0px;
	padding-left: 0px;
	border-bottom: 3px solid hsl(0, 0%, 87%);
	text-shadow: 1px 1px 0px white, 2px 2px 1px hsl(213, 100%, 85%);
	text-decoration: none;
}
/* articles */
.articles h1 {
	color: hsla(130,76%,30%,1.00);
	font-size: 20px;
	font-weight: bold;
	line-height: 130%;
	margin-top: 25px;
	margin-right: 0px;
	margin-left: 0px;
	margin-bottom: 20px;
	padding-top: 0px;
	padding-right: 0px;
	padding-left: 0px;
	border-bottom: 3px solid hsl(0, 0%, 87%);
	text-shadow: 1px 1px 0px white, 2px 2px 1px hsl(213, 100%, 85%);
	text-decoration: none;
}
.main-contents .can_accent a {
	color: #D31B2C;
	text-decoration: underline;
	font-size: 16px;
}
.main-contents .can_accent a:hover {
	font-weight: bold;
	text-decoration: none;
}

#pageTop{
	opacity: 0.7;
	background-color: #8AE7A4;
	border-radius: 100px;
	color: #FFFFFF;
	padding-top: 10px;
	padding-right: 20px;
	padding-left: 20px;
	padding-bottom: 10px;
	position: fixed;
	bottom: 20px;
	right: 20px;
	font-size: 2em;
	margin-bottom: 20px;
	}
#pageTop:hover{
	background-color: #D3ECD9;
	color: #706D6D;
	}

/*調整*/
/* 全体のレイアウト設定 */
.wrapper-header {
    width: 100%;
    padding-right: 0;
    padding-left: 0;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.header {
  display: flex;
  justify-content: center;
  align-items: center;
}

.header h1 {
  margin: 0;
}

.header h1 a img {
  width: 100%;
  max-width: 960px; /* 元のサイズに合わせる */
  height: auto; /* 画像の縦横比を保つ */
}

/* タブレットサイズ用メディアクエリ（768px以上） */
@media (min-width: 768px) {
 
  .header {
    justify-content: center;
  }

  .header h1 a img {
    max-width: 100%; /* 画面幅に応じて縮小 */
  }
}

/* デスクトップサイズ用メディアクエリ（1024px以上） */
@media (min-width: 1024px) {
  .header h1 a img {
    max-width: 960px; /* デスクトップでは元のサイズに戻す */
  }
}


.sec1, .sec2 {
	display: flex;
	flex-wrap: wrap;
    width: 100%;
    margin-left: 10px;
    margin-right: 10px;
    border-radius: 10px;
    background-color: #EDD4B4;
    max-width: 460px;
}

/* 他の大きなブロック要素にmax-widthを設定 */
.header, .footer, .content-section {
    width: 100%;

}

body {
    overflow-x: hidden;
}

@media screen and (max-width: 768px) {
    /* 小さいデバイス向けにパディングやマージンをリセットまたは調整 */
    .content-section {
        padding-left: 0;
        padding-right: 0;
        margin-left: 0;
        margin-right: 0;
    }
}

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

@media (max-width: 600px) {
    .main {
        display: flex;
        flex-direction: column; /* 縦に並べる */
    }
    .sidea, .right {
        width: 100%; /* 幅を100%に */
        padding: 0; /* パディングをリセット */
    }
}
img {
    max-width: 100%; /* 親要素の幅に合わせる */
    height: auto; /* 高さを自動調整 */
}

* {
  box-sizing: border-box;
}

@media (max-width: 768px) {
  /* スマホ用のスタイル */
  .wrapper-main, .main, .sidea, .right {
	    padding: 0; /* 不要なパディングを削除 */
    margin: 0; /* 不要なマージンを削除 */
  }
}
.wrap {
     overflow: hidden;
 }


@media (max-width: 600px) {
    section {
        width: 100%; /* セクションの幅を画面いっぱいに */
        padding: 10px; /* 余白を最小限に調整 */
    }
    .main {
        display: flex;
        flex-direction: column; /* コンテンツを縦並びに変更 */
        align-items: center; /* セクション内のコンテンツを中央揃え */
    }
    .sidea, .right {
        width: 100%; /* サイドバーなどを画面幅に合わせる */
        margin: 0; /* マージンをリセット */
        padding: 0; /* パディングもリセット */
    }
}

img {
    max-width: 100%; /* 親要素の幅に合わせる */
    height: auto; /* 高さを自動調整 */
}
section {
    padding: 0; /* 不要なパディングをリセット */
    margin: 0;
    min-width: 0%;
}
@media (max-width: 600px) {
    .container {
        display: flex;
        flex-direction: column; /* 縦に並べる */
    }
    .container img {
        max-width: 100%; /* 画像を画面幅に収める */
    }
}