.clearfix {
    display: block;
}
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    line-height: 0;
    font-size: 0;
}
.clear {
    clear: both;
}
.html-area {
    margin-bottom: 0;
}
div.table-area {
    clear: both;
    margin: 0 0 10px 0;
}
div.table-area table {
  width: 100%;
  border-top: #E5DECB 1px solid;
  border-right: #E5DECB 1px solid;
  /*ボックスモデル*/
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
div.table-area table th,
div.table-area table td {
  border-left: #E5DECB 1px solid;
  border-bottom: #E5DECB 1px solid;
  padding: 13px 19px 12px;
  font-weight: 400;
}

@media screen and (max-width: 767px) {
  div.table-area table th,
  div.table-area table td {
    font-size: 14px;
    padding: 6px 7px;
    line-height: 1.6;
  }
}

div.table-area table th {
  background-color: #F1ECDF;
  vertical-align: middle;
}

div.table-area table td {
  vertical-align: middle;
  background: #fff;
}

div.table-area table th.title {
  text-align: right;
}

div.table-area table td.align-right {
  text-align: right;
}


.img-area .cap {
    font-size: 92%;
    margin-bottom: 0;
}
.img-area .cap-c {
    text-align: center;
}
.img-area .cap-l {
    text-align: left;
}
.img-area .img {
    margin-bottom: 5px;
}
@media screen and (max-width: 767px) {
    .img-area .cap {
        margin-bottom: 0;
    }
}

.l-contents_winter {
	background: #F9F9F9;
}
@media screen and (max-width: 767px) {
  .l-contents_winter {
    width: auto;
    padding: 0 10px 0;
  }
}

.main-contents {
	width: 1200px;
    margin: 0 auto 10px;
    padding: 20px 0 40px;
	color: #222;
	font-family: 'Noto Sans Japanese', 'メイリオ', Meiryo, "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", sans-serif;
	letter-spacing: normal;
	line-height: 1.8;
}
@media screen and (max-width: 1199px) {
  .main-contents {
    width: auto;
    padding: 20px 20px 0;
  }
}

@media screen and (max-width: 767px) {
  .main-contents {
    width: auto;
    padding: 20px 0 0;
  }
}


.breadcrumb-area {
    padding: 15px 0;
    margin: 0 auto;
    background-color: #fef87e;
}
.breadcrumb-area_inner {
	width: 1100px;
    margin: 0 auto;
}
.breadcrumb {
	font-size: 15px;
    padding: 0;
}
.breadcrumb a {
	color: #003686;
	text-decoration: underline !important;
}
.breadcrumb ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}
.breadcrumb li:not(:last-child)::after {
    display: inline-block;
    margin: 0 .25rem;
    content: ">";
}
@media (max-width: 1199px) {
  .breadcrumb-area {
    padding: 5px 0;
  }
.breadcrumb-area_inner {
	width: 100%;
	max-width: 1100px;
    margin: 0 auto;
}	
  .breadcrumb {
    font-size: 12px;
	padding: 5px 10px;  
  }
}


.sp-only {
  display: none;
}
@media screen and (max-width: 767px) {
  .sp-only {
    display: block;
  }
}

/*Color*/
span.color-01 {
  color: #000000;
}
span.color-02 {
  color: #ffffff;
}
span.color-03 {
  color: #800000;
}
span.color-04 {
    color: #000080;
}
span.color-05 {
    color: #ff3366;
}
span.strong {
    font-weight: bold;
}


.h1-area {
  margin-bottom: 30px;
}
hr {
    height: 0 !important;
}
hr.mgb-sp010 {
    margin: 0 0 10px 0;
}
hr.mgb-sp020 {
    margin: 0 0 20px 0;
}
hr.mgb-sp030 {
    margin: 0 0 30px 0;
}
hr.mgb-sp040 {
    margin: 0 0 40px 0;
}
@media screen and (max-width: 767px) {
  hr.mgb-sp010,
  hr.mgb-sp020,
  hr.mgb-sp030,
  hr.mgb-sp040,
  hr.mgb-sp050,
  hr.mgb-sp060,
  hr.mgb-sp070,
  hr.mgb-sp080,
  hr.mgb-sp090,
  hr.mgb-sp100 {
    display: none;
  }
}



@media screen and (max-width: 767px) {
  .h1-area {
    margin-bottom: 20px;
  }
}

.h1-area-in {
  padding: 18px 20px 16px 20px;
  position: relative;
}

@media screen and (max-width: 767px) {
   .h1-area-in {
    padding: 18px 14px 16px 15px;
  }
}

.h1-area-in::before {
  content: "";
  width: 100%;
  height: 2px;
  background: #DEDBD7;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
}
.h1-area-in::after {
  content: "";
  width: 25%;
  height: 2px;
  background: #7D0007;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
}
.h1-area-in h1 {
  font-family: 'Shippori Mincho', serif;
  font-weight: 500;
  font-size: 32px;
  letter-spacing: 0.05em;
  line-height: 1.6;
  display:flex;	
  justify-content: space-between;			
}
@media screen and (max-width: 767px) {
  .h1-area-in h1 {
    font-size: 22px;
  }
}

.h1-area-in_child {
  width: 50%;
}
.h1-area-in_child_r {
  font-size: 20px;
  text-align: right;	
  width: 50%;
  padding-top: 8px;	
}
@media screen and (max-width: 767px) {
  .h1-area-in_child {
	width: 40%;  
  }	
  .h1-area-in_child_r {
    font-size: 13px;
	width: 60%;   
  }
}



/* Heading_h2
=============================================================================*/
.h2-area {
  margin-bottom: 10px;
  padding-top: 20px;
  /*コンテンツブロックと見出しの間に余白をつける*/
}

@media screen and (max-width: 767px) {
  .h2-area {
    margin-bottom: 10px;
    padding-top: 15px;
  }
}

.h2-area-in {
  padding: 22px 29px 18px;
  position: relative;
}

@media screen and (max-width: 767px) {
  .h2-area-in {
    padding: 11px 15px 10px;
  }
}

.h2-area-in::before {
  content: "";
  width: 100%;
  height: 2px;
  background: #92793E;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
}

.h2-area-in::after {
  content: "";
  width: 51%;
  height: 2px;
  background: #640106;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
}

.h2-area-in h2 {
  font-family: 'Shippori Mincho', serif;
  font-weight: 500;
  font-size: 26px;
  letter-spacing: 0.05em;
  line-height: 1.6;
}

@media screen and (max-width: 767px) {
  .h2-area-in h2 {
    font-size: 20px;
  }
}


/* Heading_h3
=============================================================================*/
.h3-area {
  margin-bottom: 0px;
  padding-top: 20px;
}

@media screen and (max-width: 767px) {
  .h3-area {
    margin-bottom: 5px;
    padding-top: 10px;
  }
}

.h3-area-in {
  padding: 16px 15px 15px 35px;
  position: relative;
}

@media screen and (max-width: 767px) {
  .h3-area-in {
    padding: 8px 15px 8px 15px;
  }
}

.h3-area-in::before {
  content: "";
  width: 3px;
  height: 24px;
  background: #92793e;
  position: absolute;
  top: 21px;
  left: 0;
}

@media screen and (max-width: 767px) {
  .h3-area-in::before {
    width: 2px;
    height: 20px;
    top: 13px;
  }
}

 .h3-area-in h3 {
  font-family: 'Shippori Mincho', serif;
  font-weight: 500;
  font-size: 22px;
  letter-spacing: 0.05em;
  line-height: 1.6;
}

@media screen and (max-width: 767px) {
  .h3-area-in h3 {
    font-size: 18px;
  }
}


/* Photo
=============================================================================*/
.pat-img-area02,
.pat-img-area {
  margin-bottom: 10px;
  text-align: center;	
}


/* Photo+Photo
=============================================================================*/
.pat-img-area02 {
  text-align: center;
}

.pat-img-area02 .photo-left {
  float: left;
}

.pat-img-area02 .photo-right {
  float: right;
}

.pat-img-area02 .photo-right img,
.pat-img-area02 .photo-left img {
  max-width: 100% !important;
  /*max-width:380px !important; キャプションに装飾をつけたい場合*/
}

.pat-img-area02 .img-area-in {
  /*display:inline-block; キャプションに装飾をつけたい場合*/
}

.pat-img-area02 .img-area,
.column1 .pat-img-area02 .photo-left,
.column1 .pat-img-area02 .photo-right {
  width: calc((100% - 36px) / 2);
}

@media screen and (max-width: 1199px) {
  .pat-img-area02 .img-area,
  .column1 .pat-img-area02 .photo-left,
  .column1 .pat-img-area02 .photo-right {
    width: calc((100% - 22px) / 2);
  }
}

@media screen and (max-width: 767px) {
  .pat-img-area02 .img-area,
  .column1 .pat-img-area02 .photo-left,
  .column1 .pat-img-area02 .photo-right {
    width: 48%;
  }
}


/* デフォルトボタン要素
=============================================================================*/
.html-area .button {
  display: block;
  padding: 13px 60px 13px 20px;
  text-decoration: none;
  font-family: 'Shippori Mincho', serif;
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0.1em;
  text-align: center;
  position: relative;
}

@media screen and (max-width: 767px) {
  .html-area .button {
    font-size: 16px;
  }
}

.html-area .button.button-inline {
  display: inline-block;
}

.html-area .button::after {
  content: '';
  width: 30px;
  height: 5px;
  background: url(/high-school/2024summer/images/contents-ar006.svg) no-repeat 0 0/contain;
  position: absolute;
  right: 20px;
  top: calc(50% - 2px);
  display: block;
  transition: all .3s;
}

.html-area .button--type1 {
  color: #222;
  background: #fff;
  border: 1px solid #888;
}

.html-area .button--type1:hover {
  color: #fff;
  background: #7D0007;
  border: solid 1px #7D0007;
  opacity: 1;
}

.html-area .button--type1:hover::after {
  background: url(/high-school/2024summer/images/contents-ar007.svg) no-repeat 0 0/contain;
}

.html-area .button--type2 {
  color: #7D0007;
  background: #fff;
  border: 1px solid #7D0007;
}

.html-area .button--type2::after {
  background: url(/high-school/images/contents-ar008.svg) no-repeat 0 0/contain;
}

.html-area .button--type2:hover {
  color: #fff;
  background: #7D0007;
  opacity: 1;
}

.html-area .button--type2:hover::after {
  background: url(/high-school/images/contents-ar007.svg) no-repeat 0 0/contain;
}

.html-area .button--type1_off {
  display: block;
  padding: 13px 20px 13px 20px;
  text-decoration: none;
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0.1em;
  text-align: center;	
  color: #fff;
  background: #9fa0a0;
  border: 1px solid #9fa0a0;
}

.html-area .button--type1_off:hover {
  color: #fff;
  background: #676868;
  border: solid 1px #676868;
  opacity: 1;
}
.html-area .button--type1_off::after {
  display: block;
  transition: all .3s;
}

.html-area .button.inactive {
  color: #aaa;
  border: 1px solid #aaa;
  pointer-events: none;
}

.html-area .button.inactive::after {
  background: url(/high-school/images/contents-ar011.svg) no-repeat 0 0/contain;
}

.html-area .button.inactive[target="_blank"]::after {
    background: url(/high-school/images/blank-ic004.svg) no-repeat 0 0 / contain;
}


/*blank*/
.html-area .button[target="_blank"]::after {
  position: absolute;
  right: 30px;
  top: calc(50% - 8px);
  content: '';
  display: block;
  width: 16px;
  height: 16px;
  background: url("../../image/blank-ic002.svg") no-repeat 0 0/contain;
}

#wrapper-under .html-area .button--type1[target="_blank"]:hover::after {
  background: url("../../image/blank-ic001.svg") no-repeat 0 0/contain;
}

#wrapper-under .html-area .button--type2[target="_blank"]::after {
  background: url("../../image/blank-ic003.svg") no-repeat 0 0/contain;
}

#wrapper-under .html-area .button--type2[target="_blank"]:hover::after {
  background: url("../../image/blank-ic001.svg") no-repeat 0 0/contain;
}

#wrapper-under .html-area .button.inactive[target="_blank"]::after {
  background: url("../../image/blank-ic004.svg") no-repeat 0 0/contain;
}


/* Special Area
=============================================================================*/
div.special-area {
  margin-bottom: 10px;
}

div.special-area-in {
  padding: 36px 50px 40px;
  background: #fff;
  border: 2px solid #DEDBD7;
}

@media screen and (max-width: 767px) {
  div.special-area-in {
    padding: 20px;
  }
}

div.special-area div.special-title-area {
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
}

@media screen and (max-width: 767px) {
  div.special-area div.special-title-area {
    margin-bottom: 15px;
  }
}

 div.special-area div.special-title-area p {
  font-family: 'Shippori Mincho', serif;
  font-weight: bold;
  font-size: 20px;
  letter-spacing: 0.05em;
  line-height: 1.5;
  text-align: center;
  padding-bottom: 22px;
  position: relative;
}

@media screen and (max-width: 767px) {
  div.special-area div.special-title-area p {
    font-size: 18px;
    padding-bottom: 15px;
  }
}

div.special-area div.special-title-area p::before {
  content: "";
  width: 126px;
  height: 2px;
  background: #7D0007;
  position: absolute;
  bottom: 0;
  left: calc(50% - 63px);
}

div.special-area .txt-img-area {
  margin-bottom: 0;
}

/*写真左位置*/
.txt-img-area .photo-left {
  float: left;
  margin-right: 36px;
}

@media screen and (max-width: 989px) {
  .txt-img-area .photo-left {
    margin-right: 22px;
  }
}

@media screen and (max-width: 767px) {
  .txt-img-area .photo-left {
    float: none;
    margin: 0 0 5px;
    text-align: center;
    width: 100%;
  }
}


/* Text
=============================================================================*/
.txt-area {
  margin-bottom: 10px;
}
.txt-area1 {
  margin-top: 40px;	
  margin-bottom: 40px;
  text-align: center;	
}

span.center-justification {
    display: block;
    text-align: center;
}

/* Text + Photo
=============================================================================*/
.txt-img-area {
  margin-bottom: 10px;
}

/*写真右位置*/
.txt-img-area .photo-right {
  float: right;
  margin-left: 36px;
}

@media screen and (max-width: 989px) {
  .txt-img-area .photo-right {
    margin-left: 22px;
  }
}

@media screen and (max-width: 767px) {
  .txt-img-area .photo-right {
    float: none;
    margin: 0 0 5px;
    text-align: center;
    width: 100%;
  }
}

/*写真左位置*/
.txt-img-area .photo-left {
  float: left;
  margin-right: 36px;
}

@media screen and (max-width: 989px) {
  .txt-img-area .photo-left {
    margin-right: 22px;
  }
}

@media screen and (max-width: 767px) {
   .txt-img-area .photo-left {
    float: none;
    margin: 0 0 5px;
    text-align: center;
    width: 100%;
  }
}



/* Column（カラムレイアウト設定）
=============================================================================*/
/*カラムサイズ変更*/

/*2カラム（1:1）*/
.column2-11 .column-left {
  float: left;
}

.column2-11 .column-right {
  float: right;
}

.column2-11 .column-left,
.column2-11 .column-right {
  width: calc((100% - 36px) / 2);
}

@media screen and (max-width: 1199px) {
  .column2-11 .column-left,
  .column2-11 .column-right {
    width: calc((100% - 22px) / 2);
  }
}

@media screen and (max-width: 767px) {
  .column2-11 .column-left,
  .column2-11 .column-right {
    width: auto;
    float: none;
  }
}


/*2カラム（1:2）*/
.column2-12 .column-left {
  float: left;
  width: calc((100% - (36px * 2)) / 3);
}

@media screen and (max-width: 989px) {
  .column2-12 .column-left {
    float: left;
    width: calc((100% - (22px * 2)) / 3);
  }
}

@media screen and (max-width: 767px) {
  .column2-12 .column-left {
    float: none;
    width: auto;
  }
}

.column2-12 .column-right {
  float: right;
  width: calc(((100% - (36px * 2)) / 3) * 2 + 36px);
}

@media screen and (max-width: 989px) {
  .column2-12 .column-right {
    float: right;
    width: calc(((100% - (22px * 2)) / 3) * 2 + 22px);
  }
}

@media screen and (max-width: 767px) {
  .column2-12 .column-right {
    float: none;
    width: auto;
  }
}

/*2カラム（2:1）*/
.column2-21 .column-left {
  float: left;
  width: calc(((100% - (36px * 2)) / 3) * 2 + 36px);
}

@media screen and (max-width: 989px) {
  .column2-21 .column-left {
    float: left;
    width: calc(((100% - (22px * 2)) / 3) * 2 + 22px);
  }
}

@media screen and (max-width: 767px) {
  .column2-21 .column-left {
    float: none;
    width: auto;
  }
}

.column2-21 .column-right {
  float: right;
  width: calc((100% - (36px * 2)) / 3);
}

@media screen and (max-width: 989px) {
  .column2-21 .column-right {
    float: right;
    width: calc((100% - (22px * 2)) / 3);
  }
}

@media screen and (max-width: 767px) {
  .column2-21 .column-right {
    float: none;
    width: auto;
  }
}


/*3カラム（1:1:1）*/
.column3 .column-left {
  float: left;
  margin-right: 36px;
}

@media screen and (max-width: 1199px) {
  .column3 .column-left {
    float: left;
    margin-right: 22px;
  }
}

@media screen and (max-width: 767px) {
  .column3 .column-left {
    float: none;
    margin-right: 0;
  }
}

.column3 .column-center {
  float: left;
}

@media screen and (max-width: 1199px) {
  .column3 .column-center {
    float: left;
  }
}

@media screen and (max-width: 767px) {
  .column3 .column-center {
    float: none;
  }
}

.column3 .column-right {
  float: right;
}

@media screen and (max-width: 1199px) {
  .column3 .column-right {
    float: right;
  }
}

@media screen and (max-width: 767px) {
  .column3 .column-right {
    float: none;
  }
}

.column3 .column-box {
  width: calc((100% - (36px * 2)) / 3);
}

@media screen and (max-width: 1199px) {
  .column3 .column-box {
    width: calc((100% - (22px * 2)) / 3);
  }
}

@media screen and (max-width: 767px) {
  .column3 .column-box {
    width: auto;
  }
}

/*3カラム用詰め防止*/
.cms-artis .cms-artis-page .cms-border-none .column-area .column3 .column-box {
  padding: 0 0 1px 0 !important;
}

.column3 .column-box {
  padding-bottom: 1px;
}

/*2カラム（小）*/
.column3 .photo-noresize,
.column3 .photo-noresize img {
  max-width: calc((1200px - (36px * 2)) / 3);
}

@media screen and (max-width: 1199px) {
  .column3 .photo-noresize,
  .column3 .photo-noresize img {
    max-width: calc((710px - (22px * 2)) / 3);  
  }
}

.column3 .txt-area .img {
    margin: 15px 0;
}

.photo-noresize p {
    text-align: center;
}
@media screen and (max-width: 767px) {
    .photo-noresize, .photo-noresize img {
        max-width: 100% !important;
    }
}

.flow_box-wrap *{box-sizing: border-box;}
.flow_box-wrap{
max-width:1100px;
margin:auto;
border:#E5DECB 1px solid;
border-top:none;
border-right:none;
}
.flow_inner{
display: flex;
flex-wrap: wrap;
}
.flow_inner > div:nth-child(1){
display: flex;
flex-wrap: wrap;
width:150px;
background-color:#F1ECDF;
border:#E5DECB 1px solid;
border-left:none;
border-bottom:none;
}
.flow_inner > div:nth-child(1) span{
display:block;
margin:auto;
}
.flow_inner > div:nth-child(2){
width:calc(100% - 150px);
padding:15px 20px;
background-color:#fff;
border:#E5DECB 1px solid;
border-left:none;
border-bottom:none;
}
.flow_inner > div:nth-child(2) div:nth-child(1){
padding-bottom:4px;
}
.flow_inner div a{
display: inline-block;
margin-right: 10px;
background-color: #7D0007;
color: #fff;
font-size:15px;
text-decoration: none;
padding: 3px 10px;
border: 1px #7D0007 solid;
border-radius: 5px;
transition: .2s;
}

@media screen and ( min-width:768px) {.flow_inner div a:hover{
color: #7D0007;background-color: rgba(255, 255, 255, 0);}}

@media screen and ( max-width:767px) {
.flow_inner > div:nth-child(1){
width:100%;
padding:5px 0;}
.flow_inner > div:nth-child(2){
text-align:center;
width:100%;}
.flow_inner > div:nth-child(2) > div:nth-child(2){
display:flex;
flex-wrap:wrap;
justify-content: center;
}
.flow_inner div a{
display:block;
text-align:center;
width:calc(50% - 10px);
margin-bottom:5px;}
.flow_inner > div:nth-child(2) > div:nth-child(2) a:nth-child(even){
margin-right:0;
}
}

.heading_winter {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 26px;
	text-align: center;
}

.heading_winter::before,
.heading_winter::after {
	content: '';
	width: 70px;
	height: 3px;
	background-color: #e3bf00;
}

.heading_winter::before {
	margin-right: 20px;
}
.heading_winter::after {
	margin-left: 20px;
}

.heading_winter_inner{
font-weight:500;
font-size:28px;
margin-left:0.3rem;
}

.guidance_nav-btn{
margin-bottom:15px;
}
.guidance_nav-btn a{
position: relative;
display:block;
padding:10px 0;
background: #92793E;
color:#fff;
border: 2px solid #92793E;
box-sizing: border-box;
text-align:center;
text-decoration:none;
transition: .2s;
}
.guidance_nav-btn a::after{
content: "";
position: absolute;
width: 23px;
height: 5px;
background: url(/high-school/2024summer/images/contents-ar007.svg) no-repeat 0 0 / contain;
right: 22px;
top: calc(50% - 2px);
transform: rotate(90deg);
transition: .2s;
}
@media screen and (min-width:768px) {
.guidance_nav-btn a:hover{
background:#fff;
color:#222;
}
.guidance_nav-btn a:hover::after{
background: url(/high-school/2024summer/images/contents-ar006.svg) no-repeat 0 0 / contain;
}
}
.heading-021 {
    position: relative;
    padding: .5em .7em .4em;
    border-bottom: 3px solid #006e54;
    color: #006e54;
}
.heading-021::before,
.heading-021::after {
    position: absolute;
    left: 30px;
    bottom: -15px;
    width: 30px;
    height: 15px;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    content: '';
}
.heading-021::before {
    background-color: #006e54;
}
.heading-021::after {
    bottom: -11px;
    background-color: #fff;
}