@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
/* スタイルシートの作成 */
.container {
    display: grid;
    gap: 5px; /* 要素間の間隔 */
    margin: 5px 0;
}

/* 幅1列 */
.width-1-column {
    grid-template-columns:  1fr;
}

/* 均等幅2列 */
.equal-width-2-columns {
    grid-template-columns: repeat(2, 1fr);
}


/* 均等幅3列 */
.equal-width-3-columns {
    grid-template-columns: repeat(3, 1fr);
}

/* 均等幅4列 */
.equal-width-4-columns {
    grid-template-columns: repeat(4, 1fr);
}

/* 比率2:1:1の3列 */
.ratio-3-columns {
    grid-template-columns: 2fr 1fr 1fr;
}

/* 子要素のスタイル */
.column {
    padding: 5px;
    box-sizing: border-box;
    border: solid 2px #6091d3;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .equal-width-3-columns,
    .ratio-3-columns {
        grid-template-columns: 1fr;
    }

    /* 二行目を縦2列にする */
    .equal-width-4-columns {
        grid-template-columns: 1fr 1fr;
    }

    /* 三行目を縦2列にする */
    .ratio-3-columns {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
    }
    .ratio-3-columns .column:nth-child(1) {
        grid-column: span 2; /* 2列にまたがる */
    }
    .ratio-3-columns .column:nth-child(2),
    .ratio-3-columns .column:nth-child(3) {
        grid-column: span 1; /* 1列にまたがる */
    }
}

.news-list{
  list-style: none outside;
  margin: 0;
  padding: 0;
}
.news-list .item a{
  display: flex;
  flex-wrap: wrap;
  flex-wrap: nowrap;
  text-decoration: none;
  color: #333;
  border-bottom: 1px solid #CCC;
  padding: 20px 20px;
}
.news-list .item:first-child a{
  border-top: 1px solid #CCC;
}
.news-list .item .date{
  margin: 0;
  min-width: 140px;
  font-size: 16px;
  color: #999;
  padding: 0 20px 0 0;
}
.news-list .item .category{
  margin: 0;
  min-width: 140px;
  padding: 0 20px 0 0;
}
.news-list .item .category span{
  background: #999;
  color: #FFF;
  text-align: center;
  display: inline-block;
  padding: 5px 20px;
  font-size: 12px;
  line-height: 1;
}
.news-list .item .title{
  margin: 0;
  width: 100%;
}
.news-list .item a:hover .title{
  color: #00F;
}

@media screen and (max-width: 767px){
.news-list .item a{
  flex-wrap: wrap;
}
.news-list .item .date{
  min-width: 100px;
}
.news-list .item .title{
  margin-top: 10px;
}
}

/* 装飾 */
 
*{
  box-sizing: border-box;
}
a{
  text-decoration: none;
}
body{
  margin: 20px;
}

.univ1 span {
  font-size: 18px;
  font-weight:bold;
}
.univ2 span {
  font-size: 16px;
  font-weight:bold;
}

.news_container {
width: 90%;
max-width:1000px;
margin: 50px auto;
}
.news_title {
color: #24b224;
text-align: center;
font-size: 20px;
font-weight: bold;
}
.news_list {
margin: 20px 0;
border-top: 1px dashed #24b224;
}
.news_list li {
padding: 15px 5px;
border-bottom: 1px dashed #2eb087;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.date {
font-size: 16px;
margin-right: 10px;
}
.category {
display: inline-block;
color: #fff;
width: 120px;
font-size: 14px;
text-align: center;
margin-right: 10px;
padding: 2px 10px;
background-color: #75b46e;
}
.news_text a {
color: #333;
}
.news_btn {
text-align: center;
margin-top: 50px;
}
.news_btn a {
color: #75b46e;
}
.btn {
color: #75b46e;
padding: 10px 50px;
background: #fff;
border: 2px solid #75b46e;
border-radius: 50px;
transition: all 0.5s;
}
.btn:hover {
color: #fff;
background: #75b46e;
}
.btn:after {
font-family: 'Font Awesome 5 Free';
content: "\f0da";
font-weight: 900;
padding-left: 10px;
}

@media screen and (max-width: 640px) {
.news_container {
width: 90%;
padding: 0 20px;
}
.news_text a {
display: block;
margin-top: 10px;
text-overflow: ellipsis;
overflow: hidden;
}
}

.faq {
  display: grid;
  gap: 1.5em;
  padding-block-start: 1em;
  max-inline-size: 60em;
  margin: auto;
}
.faq-title {
  font-size: 2em;
  text-align: center;
}
.faq-title:before {
  content: "- FAQ -";
  display: block;
  font-size: 0.5em;
  font-weight: normal;
  color: #666;
}
/* FAQ content */
.faq-content {
  --accent-color: #3388ff;
  --v-rythm: 1.6em;
  --gap: 1em;
  position: relative;
  background: #eee;
  border-radius: 1em;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.faq-content:after {
  content: "";
  position: absolute;
  inset-block-start: 1.25rem;
  inset-inline-end: 0.75rem;
  display: block;
  inline-size: 1rem;
  aspect-ratio: 1;
  background: #666;
  overflow: hidden;
  rotate: 0deg;
  transition: rotate 0.4s 0s ease;
  clip-path: polygon(25% 10%, 25% 90%, 75% 50%);
}
.faq-content[open]:after {
  rotate: 90deg;
}
.faq-content[open] .faq-q:after {
  content: "";
  position: absolute;
  inset: 0;
  display: block;
}
/* Q */
.faq-q {
  font-weight: bold;
  line-height: var(--v-rythm);
  display: flex;
  gap: var(--gap);
  padding: 1rem 2rem 1rem 1.5rem;
}
.faq-q::-webkit-details-marker {
  display: none;
}
.faq-q:hover {
  color: var(--accent-color);
}
.faq-q:before {
  content: "Q.";
  display: block;
  color: var(--accent-color);
  font-size: var(--v-rythm);
}
/* A */
.faq-a {
  margin: 0;
  display: flex;
  gap: var(--gap);
  padding: 0 1.5rem 1rem;
}
.faq-a:before {
  content: "A.";
  font-weight: bold;
  color: var(--accent-color);
  font-size: var(--v-rythm);
}

/* --------------------------------------------------------
	reset
-------------------------------------------------------- */
@import url('https://use.fontawesome.com/releases/v5.6.3/css/all.css');

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
	margin: 0;
	padding: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
	font-style: normal;
}
body {
	color: #333333;
	font-size: 100%;
	font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN",verdana,"メイリオ", Meiryo, sans-serif;
	line-height: 1.5;
	background: url(null) fixed;
	background-color: #fff;
}
html {
	overflow-y: scroll;
}
article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary { 
	display:block;
}

ul, ol {
	list-style: none;
}
table {
	border-spacing: 0;
	empty-cells: show;
}
a,a:link,a:visited,a:hover,a:active{
	color:#054691;
	text-decoration:none;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* -----------------------------------------------------------
	news
----------------------------------------------------------- */

.news_container {
	width: 90%;
	max-width:1000px;
	margin: 50px auto;
}
.news_title {
	color: #24b224;
	text-align: center;
	font-size: 20px;
	font-weight: bold;
}
.news_list {
	margin: 20px 0;
	border-top: 1px dashed #24b224;
}
.news_list li {
	padding: 15px 5px;
	border-bottom: 1px dashed #2eb087;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}
.date {
	font-size: 16px;
	margin-right: 10px;
}
.category {
	display: inline-block;
	color: #fff;
	width: 120px;
	font-size: 14px;
	text-align: center;
	margin-right: 10px;
	padding: 2px 10px;
	background-color: #75b46e;
}
.news_text a {
	color: #333;
}

.news_btn {
	text-align: center;
	margin-top: 50px;
}
.news_btn a {
	color: #75b46e;
}
.btn {
	color: #75b46e;
	padding: 10px 50px;
	background: #fff;
	border: 2px solid #75b46e;
	border-radius: 50px;
	transition: all 0.5s;
}
.btn:hover {
	color: #fff;
	background: #75b46e;
}
.btn:after {
	font-family: 'Font Awesome 5 Free';
	content: "\f0da";
	font-weight: 900;
	padding-left: 10px;
}

@media screen and (max-width: 480px) {
	.news_container {
		width: 100%;
		padding: 0 20px;
	}
	.news_text a {
		display: block;
		margin-top: 10px;
		text-overflow: ellipsis;
		overflow: hidden;
	}
}