@charset "utf-8";

/*全体の設定---------------------------------------------------------------------------*/
/*cssファイルの読み込み*/
@import url("slide.css");
@import url("article.css");

/*animation1のキーフレーム設定（開閉ブロックのアニメーションに使用）*/
@keyframes animation1 {0% {left: -200px;}100% {left: 0px;}}

/*opa1のキーフレーム設定（汎用的）*/
@keyframes opa1 {0% {opacity: 0;}100% {opacity: 1;}}

/*Google Fontsの読み込み*/
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');

/*body*/
body {margin:0;padding:0;-webkit-text-size-adjust: none;font-size: 100%;line-height: 1.5em;color: #666;background: #fff;animation: opa1 0.2s 0.5s both;}

/*リセット*/
h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd {margin: 0px;padding: 0px;font-size: 100%;font-weight: normal;}


/*リンク（全般）設定*/
a {color: var(--primary-inverse-color);color: blue;transition: 0.5s;}
a:hover {color:red;}

/*全体設定*/
.right {float: right;}




/*ヘッダー（ロゴが入った最上段のブロック）*/
/*headerブロック*/
header {margin:0 auto;text-align: none;}
#logo img {float:left;width: 160px;height:auto;margin: 2em auto 0px;}

/*h1.catch*/
h1.catch {text-align:right;margin:0 auto;padding:4px 0px;font-size:12px;line-height:normal;}

@media screen and (max-width:580px){
h1.catch{font-size:2vw;}
}




/*メニュー
---------------------------------------------------------------------------*/
/*メニュー全体を囲むブロック*/
#menubar {float:right;width:100%;text-align:right;font-size: 1em;margin:1em 0 1em 0;right: 0;bottom: 0 auto;}

/*メニュー１個あたりの設定*/
.menubar ul {display: table;}/*必須*/
#menubar li {display: inline;margin-bottom:1em;}
#menubar li a {width:100%;text-decoration: none;padding: 0.5em 2.5vw;}
#menubar li a:hover {color: #224acf;border-bottom: 0.5em solid #224acf;}

/*パン耳の設定*/
#menubar ul.breadcrumb {float:right;display: table; flex-wrap: wrap;margin: 0;padding: 0;list-style: none;font-size:0.8em;}
#menubar li.breadcrumb {position: relative;padding-left: 0.1em;}
#menubar li.breadcrumb::after{font-family: "Font Awesome 5 Free";content: '> ';padding-left: 0.1em;color: rgb(65, 65, 65);}
#menubar li.breadcrumb:last-child::after{ content: ''; }
#menubar li.breadcrumb a{width:100%;text-decoration: none;padding: 0.5em 0.5em;}
#menubar p{font-size:1em;}


/*コンテナ（ホームページを囲む一番外側のブロック）-------------------------------*/
#container {max-width: 1000px;margin: 0 auto;padding: 0 3%;}/*ブロックの最大幅*/



/*トップページ（コンテンツエリア）-------------------------------*/
#contents p{padding: 0;margin:1.5em 1em 2em 1em;}

/*コンテンツのh2タグの設定*/
/*contents .heading（トップページのh2タグ）*/
#contents h2 {clear: both;margin-bottom: 1.5em;margin-top:1.5em;padding: 0.5em 1em;}
#contents .heading01 {display: flex;justify-content: center;align-items: center;font-size: 1.5em;text-align: center;background-color: #fff;color: #224acf;}
#contents .heading01::before,
#contents .heading01::after {content: '';width: 3em;height: 0.1em;background-color: #224acf;}
#contents .heading01::before {margin-right: 1em;}
#contents .heading01::after {margin-left: 1em;}

@media screen and (max-width:580px){
#contents .heading01 {display: flex;justify-content: center;align-items: center;font-size: 1.1em;text-align: center;background-color: #fff;color: #224acf;}
#contents .heading01::before,
#contents .heading01::after {content: '';width: 1em;height: 0.1em;background-color: #224acf;}
#contents .heading01::before {margin-right: 0.5em;}
#contents .heading01::after {margin-left: 0.5em;}
}

#contents h2.heading02 {display: flex;justify-content: center;align-items: center;font-size: 1.5em;text-align: center;background: #FFF;color: #224acf;}
#contents .heading02::before,
#contents .heading02::after {content: '';width: 0.1em;height: 1.5em;background-color: #3fc1c9;}
#contents .heading02::before {margin-right: 1.5em;transform: rotate(-35deg);}
#contents .heading02::after {margin-left: 1.5em;transform: rotate(35deg);}

@media screen and (max-width:580px){
#contents h2.heading02 {display: flex;justify-content: center;align-items: center;font-size: 1.2em;text-align: center;background: #FFF;color: #224acf;}
#contents .heading02::before,
#contents .heading02::after {content: '';width: 0.1em;height: 1.5em;background-color: #3fc1c9;}
#contents .heading02::before {margin-right: 1.2em;transform: rotate(-35deg);}
#contents .heading02::after {margin-left: 1.2em;transform: rotate(35deg);}
}


/*new（更新情報・お知らせ）*/
#new {margin-bottom:3em;}
#new dl {padding: 1em 1em 1em 1em;margin-bottom: 1.5em;}
#new dt {font-weight: bold;float: left;padding:0.25em 1em;}
#new dd {padding:0.25em 1em 0.25em 9em;}
#new p.comment {font-size:80%;line-height: 0em;margin:0;padding:0;}

@media screen and (max-width:580px){
#new dl{padding:0em;width:100%;margin-left:1em;}
#new dt{border-bottom: solid 1px #3333FF;margin: 0em 0em 0em 0em;padding:0em;clear:left;float:left;width:100%;font-size:80%;}
#new dd{border: solid 0px #cccccc;padding: 0em;margin-left: 0em;margin-top: 0.5em;margin-bottom:0.5em;width:98%;font-size:80%;}
#new p.comment {font-size:80%;line-height: 0em;margin:0;padding:0;}
}


/*list-grid2（２カラムボックス）*/
/*listブロック全体を囲むブロック*/
#contents .list-grid2 {display: grid;grid-template-columns: repeat(2, 1fr);gap: 1rem;margin:1em;}
#contents .list-grid2 .list {margin-bottom: 0;padding: 1rem;background: #fff;grid-template-rows: auto 1fr auto;box-shadow: 5px 5px 20px rgba(0,0,0,0.1);}
#contents .list-grid2 .list p {font-size: 0.85rem;line-height: 1.5em;}
#contents .list-grid2 .list figure {margin: -1rem;margin-bottom: 0.5rem;}
#contents .list-grid2 .list img{width:100%;}
#contents .list-grid2 .list a:hover{opacity: 0.6;}
#contents .list-grid2 .list h3 {font-weight:bold;border-bottom:#6666FF solid 1px;margin-top:1em;margin-bottom:1em;}
#contents .list-grid2 .btn a {font-size: 0.9rem;padding-left: 0rem !important;padding-right: 0rem !important;}

@media screen and (max-width:580px){
#contents .list-grid2 {display: grid;grid-template-columns: repeat(1, 1fr);gap: 1rem;}
#contents .list-grid2 .list {display: inline;margin-bottom: 1rem;}
#contents .list-grid2 .list h3 {font-weight:bold;margin-top:1em;margin-bottom:1em;padding:0.5em;}
#contents .list-grid2 .list * {margin: 0;padding: 0;}
#contents .list-grid2 .list .text{clear: both;height:auto;}
}

/*ボタン（btn）*/
#contents .btn a {display: block;text-decoration: none;font-size: 1rem;text-align: center;background:#224acf;color:#FFF;padding: 0.5rem !important;margin-top: 1rem !important;}
#contents .btn a:hover {color:#FFF;opacity: 0.6;}



/*---sitemap------------------------------------------*/
#sitemap {border-top:#333 sollid 1px;background:#ecf3fa;}
#sitemap h2 {clear: both;margin: 1.5em 0 0 0;padding: 1.5em 0em;}
#sitemap .heading01 {display: flex;justify-content: center;align-items: center;font-size: 1.5em;text-align: center;color: #224acf;}
#sitemap .heading01::before,
#sitemap .heading01::after {content: '';width: 3em;height: 0.1em;background-color: #224acf;}
#sitemap .heading01::before {margin-right: 1em;}
#sitemap .heading01::after {margin-left: 1em;}

@media screen and (max-width:580px){
#sitemap .heading01 {display: flex;justify-content: center;align-items: center;font-size: 1.1em;text-align: center;color: #224acf;}
#sitemap .heading01::before,
#sitemap .heading01::after {content: '';width: 1em;height: 0.1em;background-color: #224acf;}
#sitemap .heading01::before {margin-right: 0.5em;}
#sitemap .heading01::after {margin-left: 0.5em;}
}

#sitemap .list-grid {display: grid;grid-template-columns: repeat(1, 1fr);}
#sitemap .list-grid .list {margin-bottom: 0;padding: 1rem;}
#sitemap .list-grid .list p {font-size: 0.9rem;line-height: 1.5em;}
#sitemap .list-grid .list a:hover{opacity: 0.6;}
#sitemap .list-grid .list h3 {font-weight:bold;border-bottom:#6666FF solid 1px;margin-top:1em;margin-bottom:1em;}
#sitemap .list-grid .list h4{display: flex;align-items: center;margin:0.5em 0;padding: 0em 0em;color: #FFF;font-size:0.9em;line-height:0em;background:#77b4fd;border-radius: 20px;-webkit-box-shadow: 1px 1px 2px #ccc;-moz-box-shadow: 1px 1px 2px #ccc;box-shadow: 1px 1px 2px #ccc;}
#sitemap .list-grid .list h4::before {display: inline-block;height: 1.5em;margin-right: .5em;margin-left: 0em;margin-top:0em;margin-bottom:0em;background-color: #224acf;content: '';}

@media screen and (max-width:580px){
#sitemap .list-grid2 {display: grid;grid-template-columns: repeat(1, 1fr);}
#sitemap .list-grid2 .list {display: inline;margin-bottom: 1rem;}
#sitemap .list-grid2 .list h3 {font-weight:bold;margin-top:0em;margin-bottom:1em;padding:0.5em;}
#sitemap .list-grid2 .list * {margin: 0;padding: 0;}
#sitemap .list-grid2 .list .text{clear: both;height:auto;}
}

#sitemap ul {display: flex; flex-wrap: wrap;margin: 0;padding: 0;list-style: none;font-size:0.9em;}
#sitemap li {position: relative;padding-left: 0.1em;}
#sitemap li::after{font-family: "Font Awesome 5 Free";content: '｜ ';padding-left: 0.1em;color: rgb(65, 65, 65);}
#sitemap li:last-child::after{ content: ''; }
#sitemap li a{width:100%;text-decoration: none;padding: 0.5em 0.5em;}

/*---メールフォーム------------------------------------------*/
.tb-cell {font-size:80%;display: table;width: 100%;margin: 1em 0em 1em 0em;text-align: left;}
.tb-cell .row {display: inline-table;width:100%;}
.tb-cell .row .cell {display: table-cell;border: 1px solid #ddd;padding: 1em;vertical-align: middle;color: #fff;}
.tb-cell .row .cell:nth-child(odd) {width: 30%;}
.tb-cell .row .cell:nth-child(even) {width: 70%;}
.mail-form .row .cell {padding: 1em;}
.mail-form .row .cell:nth-child(1) {background: #6666FF;#9fb7d4}
.mail-form .row .cell:nth-child(2) {background: #DDDDFF;#DDF}
input[type="text"],
input[type="email"] {height: 2em;width:100%;}
textarea {height: 20em;width:100%;}
button {color: #FFF;border: none;padding: 1em;cursor: pointer;}
button[type="button"] {margin-left: 1em;}
button[type="button"],
button[type="submit"] {background: #3333FF;}
button[type="reset"] {background: #666666;}
button[type="button"]:hover,
button[type="submit"]:hover {background: #33F;opacity: 0.6;}
button[type="reset"]:hover {background: #999;opacity: 0.6;}
.msg {margin: 1em 0;font-weight: bold;}

@media (max-width: 580px) {
.tb-cell {width: 100%;}
.tb-cell .row {display: inline-table;width:100%;}
.tb-cell .row .cell {display: inline: 1px solid #ddd;padding: 1em;vertical-align: middle;color: #fff;}
.tb-cell .row .cell:nth-child(odd) {width: 30%;}
.tb-cell .row .cell:nth-child(even) {width: 70%;}
input[type="text"],
input[type="email"] {width: 100%;}
textarea {width: 100%;}
/* ** */}



/*フッター設定----------------------------------------*/
footer {clear: both;text-align: right;padding: 30px 0px 10px;background-color:#0000cd;color:#ffffff;font-size:12px;margin:0 auto;width:100%;}
footer a:link {color:#ffffff;}
footer a:visited  {color:#ffffff;}
footer a:hover {color:#ffffff;}
footer a:active  {color:#ffffff;}

@media screen and (max-width:580px){
footer{font-size:10px;}
}















/*画面幅580px以下の設定---------------------------------------*/
@media screen and (max-width:580px){

/*全体の設定*/
body {font-size: 100%;max-width:100%;}
p {font-size:100%;line-height: 1.5em;margin:0;padding:0;}
li {font-size:90%;line-height: 1.5em;}
dd {font-size:90%;line-height: 1.5em;}

/*container*/
#container {max-width: 100%;margin: 0 auto;padding: 0 2%;}



/*menubar*/
#menubar{width:100%;margin:0;padding:0;text-align:right;}
#menubar ul {list-style-type: none;margin: 1.5em 0px 0em 0px;padding: 0 0 1em 0;}
#menubar li {font-size:4vw;}
#menubar li a {text-decoration: none;}
#menubar p{font-size:2.5vw;}

/*menubarパン耳の設定*/

#menubar ul.breadcrumb {float:left;display: table; flex-wrap: wrap;margin: 2em 0 0em 0;padding: 0;list-style: none;font-size:0.9em;}
#menubar li.breadcrumb {float:left;font-size:1em;display:inline-block;position: relative;padding-left: 0.5em;margin-bottom:0.5em;margin-left:0.5em;background:#EEEEFF;border-radius: 0.5em;color:#696969;}
#menubar li.breadcrumb::after{content: '';padding-left: 0.5em;}
#menubar li.breadcrumb:last-child::after{ content: ''; }
#menubar li.breadcrumb a{width:100%;text-decoration: none;background:#EEEEFF;margin-left:0em;padding: 0em 0em;}
#menubar li.breadcrumb a:hover {text-decoration:none;color: #224acf;border-bottom: 0em solid #FFF;}



#contents p {font-size:90%;line-height: 1.5em;margin-bottom:1.5em;margin-left:0.5em;margin-right:0.5em;}





}