@charset "utf-8";
/* CSS Document */

/* ********************************************************************** */
/* ココカラ　全体の基礎スタイル */
/* ********************************************************************** */
/* 全体 */
html,body,header,footer,h1,h2,h3,h4,h5,h6,section,article,div,nav,table,th,tr,td {margin:0; padding:0;}/* 標準でmarginとpaddingを0にする */
*, *:before, *:after {box-sizing:border-box;}/* サイズにpaddingとmarginを含める */
html {font-size:62.5%;} /* フォントサイズ62.5%の指定によって標準で10px、1rem（em）が10px */
a {text-decoration:none;}/* リンクのアンダーラインや色をリセット */
p {text-align:justify;}/* 行末揃え */

div.clear {clear:both;}
br.resp {display:block;}
@media screen and (min-width:1800px) {
  br.resp {display:none;}
}

html {height:100%;}
body {height:100%; margin:0;}

/* ********************************************************************** */
/* ココカラ　トップページ */
/* ********************************************************************** */
 /* 本体の一番外側 */
div.top-container {width:100%; height:100%;}

/* 全画面 */
/*div.all {width:100%; height:auto; margin:0; display:flex; justify-content:space-between; flex-flow:row wrap;}*/
/*@media screen and (min-width:600px) {*/
  div.all {width:100%; height:87.5%; margin:0; display:flex; justify-content:space-between; flex-flow:row wrap;}
/*}*/
@media screen and (min-width:1024px) { 
  div.all {width:100%; height:100vh; margin:0; display:flex; justify-content:space-between; flex-flow:row wrap;}
}

/* グリッドデザイン */
div.grid-a-area {display:grid; width:100%; height:auto; margin:0 0 3rem 0; grid-template-columns:1fr 1fr 1fr 1fr 1fr; grid-template-rows:20rem;}
div.grid-a-01 {grid-column:1 / 3; grid-row:1 / 5; transition:0.6s; background-color:rgba(60,60,90,1);}
div.grid-a-02 {grid-column:3 / 6; grid-row:1 / 3; transition:0.6s; background-color:rgba(60,60,90,1);}
div.grid-a-03 {grid-column:3 / 6; grid-row:3 / 5; transition:0.6s; background-color:rgba(60,60,90,1);}
div.grid-a-04 {grid-column:1 / 4; grid-row:5 / 8; transition:0.6s; background-color:rgba(60,60,90,1);}
div.grid-a-05 {grid-column:4 / 6; grid-row:5 / 8; transition:0.6s; background-color:rgba(60,60,90,1);}
img.gd-img {width:100%; height:100%; object-fit:cover; overflow:hidden; transition:0.6s;}
/*@media screen and (min-width:600px) { 
  div.grid-a-area {display:grid; width:40%; height:100%; margin:0 auto 0 0; grid-template-columns:calc(100% / 3); grid-template-rows:30%; grid-gap:1.2rem;}
  div.grid-a-01 {grid-area:1 / 1 / 3 / 2; transition:0.6s; background-color:rgba(60,60,90,1);}
  div.grid-a-02 {grid-area:1 / 2 / 2 / 4; transition:0.6s; background-color:rgba(60,60,90,1);}
  div.grid-a-03 {grid-area:2 / 2 / 3 / 3; transition:0.6s; background-color:rgba(60,60,90,1);}
  div.grid-a-04 {grid-area:3 / 1 / 4 / 3; transition:0.6s; background-color:rgba(60,60,90,1);}
  div.grid-a-05 {grid-area:2 / 3 / 4 / 4; transition:0.6s; background-color:rgba(60,60,90,1);}
  img.gd-img {width:100%; height:100%; object-fit:cover; overflow:hidden; transition:0.6s;}
}*/
@media screen and (min-width:1024px) { 
  div.grid-a-area {display:grid; width:40%; height:100%; margin:0 auto 0 0; grid-template-columns:calc(100% / 3); grid-template-rows:30%; grid-gap:1.2rem;}
  div.grid-a-01 {grid-area:1 / 1 / 3 / 2; transition:0.6s; background-color:rgba(60,60,90,1);}
  div.grid-a-02 {grid-area:1 / 2 / 2 / 4; transition:0.6s; background-color:rgba(60,60,90,1);}
  div.grid-a-03 {grid-area:2 / 2 / 3 / 3; transition:0.6s; background-color:rgba(60,60,90,1);}
  div.grid-a-04 {grid-area:3 / 1 / 4 / 3; transition:0.6s; background-color:rgba(60,60,90,1);}
  div.grid-a-05 {grid-area:2 / 3 / 4 / 4; transition:0.6s; background-color:rgba(60,60,90,1);}
  img.gd-img {width:100%; height:100%; object-fit:cover; overflow:hidden; transition:0.6s;}
}
/* ななめ */
div.naname-box-master {width:100%; height:100%; margin:0 0 3rem 0; position:relative;}
div.naname-box-a {width:100%; height:100%; clip-path:polygon(0 0 , 100% 0 , 100% 25% , 0 35%); position:absolute;}
div.naname-box-b {width:100%; height:100%; clip-path:polygon(0 0 , 100% 0% , 100% 65% , 0 25%); position:absolute;}
div.naname-box-c {width:100%; height:100%; clip-path:polygon(0 0 , 60% 0 , 25% 100% , 0 100%); position:absolute;}
div.naname-box-d {width:100%; height:100%; clip-path:polygon(30% 40% , 100% 40% , 100% 65% , 0 90%); position:absolute;}
div.naname-box-e {width:100%; height:100%; clip-path:polygon(0 60% , 100% 60% , 100% 100% , 0 100%); position:absolute;}
@media screen and (min-width:1024px) {
  div.naname-box-master {width:40%; height:100%; margin:0 0 3rem 0; position:relative;}
  div.naname-box-a {width:100%; height:100%; clip-path:polygon(0 0 , 100% 0 , 100% 25% , 0 35%); position:absolute;}
  div.naname-box-b {width:100%; height:100%; clip-path:polygon(0 0 , 100% 0% , 100% 65% , 0 25%); position:absolute;}
  div.naname-box-c {width:100%; height:100%; clip-path:polygon(0 0 , 60% 0 , 25% 100% , 0 100%); position:absolute;}
  div.naname-box-d {width:100%; height:100%; clip-path:polygon(30% 40% , 100% 40% , 100% 65% , 0 90%); position:absolute;}
  div.naname-box-e {width:100%; height:100%; clip-path:polygon(0 60% , 100% 60% , 100% 100% , 0 100%); position:absolute;}  
}
/* インデックス */
div.index-area {width:100%; height:auto;}
article.index-text-area {width:90%; margin:0 auto;}
h1 {font-size:2rem; letter-spacing:1.6rem; text-align:center; margin:0 auto 3rem auto;}
p.index-text-a {font-size:1.4rem; line-height:4rem; margin:0 0 3rem 0; color:#888888;}
/*@media screen and (min-width:600px) { 
  div.index-area {width:60%; height:100%; margin:0 0 0 auto; display:flex; align-items:center;}
  article.index-text-area {width:80%; margin:0 auto;}
  h1 {font-size:3rem; letter-spacing:1rem; text-align:center; margin:0 auto 3rem auto;}
  p.index-text-a {font-size:1.4rem; line-height:3rem; margin:0 0 3rem 0; color:#888888;}
}*/
@media screen and (min-width:1024px) { 
  div.index-area {width:60%; height:100%; margin:0 0 0 auto; display:flex; align-items:center;}
  article.index-text-area {width:90%; margin:0 auto; max-width:700px;}
  h1 {font-size:2.6rem; letter-spacing:2rem; text-align:center; margin:0 auto 3rem auto;}
  p.index-text-a {font-size:1.4rem; line-height:3rem; margin:0 0 3rem 0; color:#888888;}
}

/* メニューリスト */
div.menu-area {width:100%; display:flex; justify-content:space-between; flex-flow:row wrap; border-top:1px dotted #888888; border-bottom:1px dotted #888888; padding:1rem 0; margin:0 0 3rem 0;}
div.menu-containts {width:calc(100% / 3); cursor:pointer; transition:.6s;}
div.menu-containts:hover {background-color:#efefef; transition:.6s;}
h2.menu-name {font-size:1.4rem; font-weight:bold; color:#888888; text-align:center; padding:2rem 0;}

/* トップページのコンタクト */
div.top-contact {width:100%; height:auto; margin:0 0 3rem 0; padding:1rem; text-align:right;}
div.top-contact-icon {display:inline-block; width:3rem; height:3rem; margin:0 0 0 2rem; align-items:center;}
img.top-contact-icon-img {width:100%; height:auto; object-fit:cover;}
@media screen and (min-width:1024px) {
div.top-contact {width:100%; height:auto; margin:0 0 0 0; padding:1rem; text-align:right;}
div.top-contact-icon {display:inline-block; width:2.5rem; height:2.5rem; margin:0 0 0 2rem; align-items:center;}
}
/* ********************************************************************** */
/* ココマデ　トップページ */
/* ********************************************************************** */

/* ********************************************************************** */
/* ココカラ　コンテンツページ */
/* ********************************************************************** */
/* ヘッダー */
header {width:100%; padding:1.2rem; background-color:#ffffff; position:fixed; z-index:100; text-align:right; align-items:center;}
h1.con-base-title {font-size:1.8rem; letter-spacing:1rem; display:inline-block; margin:0; line-height:0;}
#menu-button {width:4rem; height:4rem; border-radius:0.6rem; background-color:#ffffff; border:2px solid #bbbbbb; margin-left:1rem; cursor:pointer; display:inline-block;}
@media screen and (min-width:1024px) {
  header {width:100%; padding:1.2rem 1rem; background-color:#ffffff; position:fixed; z-index:100;}
  h1.con-base-title {font-size:3rem; letter-spacing:2rem; display:inline-block;}
  #menu-button {width:4rem; height:4rem; border-radius:0.6rem; background-color:#ffffff; border:2px solid #bbbbbb; margin-left:1rem; cursor:pointer; display:inline-block;}
}

/* ヘッダーダミー */
div.header-dumy {width:100%; height:8rem; background-color:#ffffff;}

/* フッター */
footer {width:100%; height:auto; background-color:#478684; padding:2rem 0;}
div.footer-area {width:90%; height:auto; margin:0 auto;}
div.footer-txt-area {width:100%; margin:0 0 1rem 0;}
div.footer-txt-area ul {width:100%; font-size:0; margin:0 auto; padding:0; display:flex; justify-content:space-between; flex-flow:row wrap;}
div.footer-txt-area ul li {width:100%; font-size:1.4rem; line-height:2.4rem;}
p.footer-txt-a {font-size:1.4rem; font-weight:bold; color:#ffffff; margin:0.6rem 0; border:1px solid #ffffff; padding:0.4rem;}
p.footer-txt-b {font-size:1.4rem; color:#ffffff; margin:0.6rem 0;}
span.footer-txt-b-top {font-size:1.4rem; font-weight:bold; color:#ffffff; margin:0.6rem 1rem 0.6rem 0;}
@media screen and (min-width:600px) {
div.footer-area {width:90%; height:auto; margin:0 auto 1rem auto; display:flex; justify-content:space-between; flex-flow:row wrap;}
div.footer-txt-area {width:calc(100% / 2.2);}
}
@media screen and (min-width:1024px) {
div.footer-area {width:calc(100% / 6 * 4); height:auto; margin:0 auto 1rem auto; display:flex; justify-content:space-between; flex-flow:row wrap;}
div.footer-txt-area {width:calc(100% / 3.3);}
}
/* クレジット */
div.cred-area {width:100%; height:auto; background-color:#485859; padding:1rem 0;}
div.cred-txt-area {width:90%; height:auto; margin:0 auto;}
p.cred-txt {font-size:1.2rem; font-weight:bold; color:#ffffff; text-align:right;}
@media screen and (min-width:1024px) {
  div.cred-txt-area {width:calc(100% / 6 * 4); height:auto; margin:0 auto;}
}

/* コンテンツベースレイアウト */
div.con-base {width:100%; height:auto; margin:0 0 6rem 0;}
@media screen and (min-width:1024px) {
  div.con-base {width:100%; height:auto; display:grid; grid-template-columns:1fr 4fr 1fr; margin:0 0 6rem 0; overflow:hidden;}
}
div.key-vis {width:100%; height:80rem; margin:0 0 0 0; background:linear-gradient(top, #00a381, #38b48b);}
@media screen and (min-width:1024px) {
  div.key-vis {grid-column:1 / 3; height:60rem; margin:0 0 0 0; background:linear-gradient(top, #00a381, #38b48b);}
}
img.key-vis-img {width:100%; height:100%; object-fit:cover; overflow:hidden;}
div.con-read {width:90%; margin:0 auto;}
p.con-read-txt {font-size:1.6rem; line-height:3.6rem; color:#888888; margin:0 0 2rem 0;}
@media screen and (min-width:1024px) {
  div.con-read {grid-column:2 / 3; width:100%;}
  p.con-read-txt {font-size:1.8rem; line-height:4rem; color:#888888; margin:0 0 2rem 0;}
}

/* コンテンツ　カテゴリタイトル */
div.cate-title-area {width:90%; padding:0 0 1rem 0; border-bottom:1px solid #888888; margin:0 auto 3rem auto;}
h2.cate-title {font-size:2rem; font-weight:bold; color:#888888;}
@media screen and (min-width:1024px) {
div.cate-title-area {grid-column:2 / 3; width:100%; padding:0 0 1rem 0; border-bottom:1px solid #888888; margin:0 0 3rem 0;}
h2.cate-title {font-size:3rem; font-weight:bold; color:#888888;}
}

/* コンテンツ　カテゴリ内容関連 */
article.cate-naiyou {width:90%; margin:0 auto 4rem auto;}
div.cate-naiyou-title-area {width:100%; margin:0 auto 2rem auto; padding:0.8rem; position:relative; background:linear-gradient(top, #00a381, #38b48b);}
 div.cate-naiyou-title-area::before, div.cate-naiyou-title-area::after {width:4rem; height:2rem; position:absolute; content:'';}
 div.cate-naiyou-title-area::before {border-left:1px solid #478684; border-top:1px solid #478684; top:0; left:0;}
 div.cate-naiyou-title-area::after {border-right:1px solid #478684; border-bottom:1px solid #478684; bottom:0; right:0;}
 h3.cate-naiyou-title-txt {font-size:1.8rem; color:#478684;}
 p.cate-naiyou-txt {font-size:1.6rem; line-height:3.2rem; margin:0 0 2rem 0; color:#888888;}
 p.cate-naiyou-txt::after {margin:0;}
@media screen and (min-width:1024px) {
article.cate-naiyou {grid-column:2 / 3; width:100%; margin:0 auto 4rem auto;}
div.cate-naiyou-title-area {width:100%; margin:0 auto 2rem auto; padding:1.2rem; position:relative;}
 div.cate-naiyou-title-area::before, .cate-naiyou-title-area::after {width:4rem; height:2rem; position:absolute; content:'';}
 div.cate-naiyou-title-area::before {border-left:1px solid #478684; border-top:1px solid #478684; top:0; left:0;}
 div.cate-naiyou-title-area::after {border-right:1px solid #478684; border-bottom:1px solid #478684; bottom:0; right:0;}
 h3.cate-naiyou-title-txt {font-size:2.6rem; color:#478684;}
 p.cate-naiyou-txt {font-size:1.8rem; line-height:3.6rem; margin:0 0 2rem 0; color:#888888;}
 p.cate-naiyou-txt::after {margin:0;}
}

/*****  *****/
/* ヘッダー htmlでちょっと保留*/
div.header-wrapper {width:100%; margin:0 auto; padding:0 0 2rem 0;}
div.header-obi {width:100%; margin:0 auto; padding:0.6rem 0.6rem; background-color:#ddeeff;}
 div.header {width:100%; margin:0 auto;}
 /* グローバルメニュー */
 .nav {width:100%; height:auto; vertical-align:middle; padding:0;}
 .nav ul {width:100%; font-size:0; margin:0 auto; padding:0; display:flex; justify-content:space-between; flex-flow:row wrap;}
 .nav ul li {width:calc(100% / 6); font-size:1rem; display:inline-block; position:relative; text-align:center;}
 .nav ul li a {color:#ffffff; background-color:#555577; text-decoration:none; display:block; padding:1.4rem 0;}
 .nav ul li a:hover {color:#ffffff; background-color:#555577; transition:.4s;}
 .nav li ul {width:100%; margin:0; padding:0; position:absolute; z-index:9999; left:0; text-align:center;}
 .nav li ul li {width:100%; display:block; transition:.4s;}
 .nav li ul li a {padding:1.4rem 0; color:#ffffff; background-color:#99aacc; border-bottom:1px solid #555577;}
 .nav li ul li {overflow:hidden; height:0; transition:.2s;}
 .nav li:hover ul li{overflow:visible; height:auto; transition:.4s;}
 div.menu-bottun {display:none;}

/* メニューボタン 頓挫 */
#menu-button-index {width:6rem; height:6rem; border-radius:0.6rem; background-color:#ffffff; border:2px solid #bbbbbb; margin:2rem auto 0 auto; cursor:pointer;}
.menu-cb {display:none;}
.menu-cb:checked ~ nav.menu-open,
.menu-cb:checked ~ nav.menu-open:before,
.menu-cb:checked ~ nav.menu-open:after {display:block;}
nav.menu-open {width:100%; height:100%; margin:0 auto 0 auto; display:none; background-color:#cccccc; border:1rem solid #cccccc;}

/* ハンバーガーメニューコピペ 頓挫 */
#menubtn{
  width:6rem;
  max-width:6rem;
  background-color:#dddddd;
}
.w1000{
  max-width:1000px;
  margin: 0 auto;
}
nav{
  background-color:#ccc;
  padding:20px 3%;
  display: none;
}
#nav-input:checked ~ nav {/*チェック入ってるとき ~ メニューが*/
  display: block;/*追加*/
  animation: 1s fadeIn;/*追加*/
}
@keyframes fadeIn {
  from { opacity: 0; }/*追加*/
  to { opacity: 1; }/*追加*/
}
.nav-hidden{
  display:none;
}

/* テスト */
/* 小見出しおび */
 div.contents-b-area {width:90%; margin:0 auto; padding:2.5rem 0 2.5rem 0;}
 div.obi {width:100%; margin:0 0 3rem 0; padding:0.6rem 2rem; background:linear-gradient(#6666ff, #ffabce); border-radius:0.8rem;}
  div.obi p {font-size:1.4rem; font-weight:bold; color:#ffffff;}

 article.contents-area {width:70%; margin:0 auto; padding:2.5rem 0 2.5rem 0; display:flex; justify-content:space-between; flex-flow:row wrap;}
  article.contents-a {width:45%; padding:0;}
  article.contents-b {width:45%; padding:0;}
  div.contents-a-txt-box , .contents-b-txt-box {width:100%; height:auto;}
  p.contents-a-txt , .contents-b-txt {font-size:1.2rem; line-height:2.8rem; margin:0; color:#666666;}
  div.contents-img-box-a {width:45%; height:auto; float:left; margin:0 1rem 1rem 0;}
  div.contents-img-box-b {width:45%; height:auto; float:right; margin:0 0 1rem 1rem;}
  img.contents-img-a {width:100%; height:auto; object-fit:cover; clear:both;}