@charset "utf-8";

/*----------------------------
先にメインコンテンツ用を設置
このCSSで上書きする。
-----------------------------*/

:root {
  font-size: 16px;
  /* --- 基本色 --- */ 
  --base-color:   #007f50; 
  --accent:       #d45a00; 
  --alert-red:    #c0392c;

  /* --- テキスト --- */ 
  --text-body:    #333333; /* 視認性向上のため少し濃く */
  --text-muted:   #666666; 
  --text-white:   #ffffff; 

  /* --- 背景・面 --- */
  --bg-white:      #fff;
  --bg-accent:     #fdf7f2;
  --bg-gray-light: #f5f5f5; 
  --bg-subtle-green: #e6f2ed;

  /* --- 枠線・装飾 --- */
  --border-light:  #eeeeee;
  --border-color:  #dddddd;

  /* --- 横幅 --- */
  --width-box:     800px;
}

/*---------------------------------
　トップページ用　▼▼
  2026.02.20 大規模リニューアル版
  2025.08.18 swiper版
-----------------------------------*/
/*---------------------------------
最初のセクション
第一見出しとタイムスタンプ
左右基本余白　calc( 2px + 2vw )
<section class="pagetop">
-----------------------------------*/
h1.h1-header-in{
	position: absolute; z-index: -1; top:0; right: 0; padding: 2px 4px; margin: 2px 4px 0 0;  }
section.pagetop::before{ border-top:none; }

/*---------------------------------
　スライド制御（bxslider）
-----------------------------------*/
.topslide{ width: auto; margin: 0; overflow: hidden; }
.topslide .box{ overflow:hidden; }
.topslide picture{ margin: 0;}
.topslide .box a{ display:block; position:absolute; top:0; left:0; width:100%; height:100%;  opacity:0; }

/*---------------------------------
　新着情報
-----------------------------------*/
.sec_info{ background-color: var(--bg-subtle-green); margin: 0; padding: 0; }
.sec_info ul{ margin:0 ; padding: 2em 0; }
.sec_info ul a{ color: var(--base-color); outline:none; text-decoration: none; }
.sec_info ul a:visited{ text-decoration:none; }
.sec_info ul li a:hover{ text-decoration:underline; }
.sec_info ul li{ list-style-type:none; line-height:1.5; padding:0.75em 8px; border-bottom:1px dotted #aaa; }
.sec_info ul li > span{
	display: inline-block; font-size: 80%; padding: 8px 0.75em  ; line-height: 100% ; margin-right: 1.5rem ;
	border: 1px solid #ccc; background-color: #fafafa;
}
.sec_info ul li i{ margin-right:0.5em;}
.sec_info .linkbtn ul{ justify-content: end; } /* リンクボタンを右置き */

/*---------------------------------
　コース案内
<section class="sec-top-course">
-----------------------------------*/
.sec-top-course{ padding-top: calc( 2em + 2vw );}

.sec-top-course h2{
  position: relative; width: fit-content; margin-inline: auto; margin-bottom: 2em; 
  font-size: 1.2em; text-align: left; line-height: 1.8; letter-spacing: 0.075em; padding:0 1em;
}

.wrap-card-link ,
.wrap-card{
  max-width: var(--width-box); margin: 1em auto;
  display: grid; grid-template-columns: 1fr 1fr; gap:calc( 0.25em + 0.5vw );
}

.box-tokucho{
  position: relative; width: fit-content; margin-inline: auto; 
  font-size: 1em; color: var(--base-color); text-align: left; line-height: 1.8; letter-spacing: 0.05em;
  padding: calc( 0.75em + 0.5vw ); border:2px solid var(--base-color);
}

.box-tokucho ul{ list-style: none; margin: 0; padding: 0; }
.box-tokucho li{ position: relative; display: flex; align-items: center; line-height: 1.5; margin: 0;}

.box-tokucho li::before{
  display:inline-block; content: "▲"; transform: rotate(90deg);
  background-color: var(--base-color); color: var(--text-white);
  font-size: 0.6em; padding: 0 0.3em; /* 回転で上下と左右が逆になっている */ 
  border-radius: 4px; overflow: hidden; margin-right: 0.5em; 
}
.box-tokucho li + li{ margin-top: 0.75em;}

.sec-top-course .box-text{
  display: flex; flex-direction: column; justify-content: center;
  background-color: var(--base-color); color: var(--text-white);
  font-size: 0.9em; padding: calc( 0.75em + 0.5vw );
}


.wrap-card-link .box{ position: relative; font-size: 0.9em; padding: 1em; }
.wrap-card-link .box p{
  width: fit-content; margin-inline: auto; 
  border-bottom:3px double var(--border-color);
  padding: 0; line-height: 1.4;
}

.wrap-card-link .box:hover{ background-color: var(--bg-subtle-green); transition: 0.5s ease;}
.wrap-card-link a{ position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; opacity: 0;  }

@media screen and (max-width: 600px) { 
  .wrap-card { grid-template-columns: 1fr ; }
  .sec-top-course .box-text{ background-color: var(--bg-subtle-green); color: var(--text-body); }

}


/*---------------------------------
サブコンテンツメニュー
<section class="sec-sub-content-menu">
-----------------------------------*/
.sec-sub-content-menu{ background-color: var(--bg-subtle-green); margin-top: calc( 3em + 2vw );}
.sec-sub-content-menu .wrap-card-link{ grid-template-columns: 1fr 1fr 1fr; }
.sec-sub-content-menu .wrap-card-link .box{ border: 1px dotted var(--border-color);}

@media screen and (max-width: 600px) { 
  .sec-sub-content-menu .wrap-card-link { grid-template-columns: 1fr 1fr; }
}