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

/* 用語
div＝divided＝分ける、分配
p＝paragraph＝段落
span＝長さ、幅、またがる

*/


/* ********************************************************************** */
/* ココカラ　全体の基礎スタイル */
/* ********************************************************************** */
/* 全体 */
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;}

.background-base {background-color:#ffffff;}

/* ********************************************************************** */
/* ココカラ　主だったレイアウトのスタイル */
/* ********************************************************************** */
/* ヘッダー */
div.header-wrapper {width:100%; margin:0 auto; padding:0 0 2rem 0; position:fixed; z-index:999;}
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-around; flex-flow:row wrap;}
 .nav ul li {width:calc(100% / 6); font-size:1.4rem; 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;}

/* フッター */
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; list-style:none;}
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.container {width:100%; margin:0 auto; padding:1rem 0;}
/* コンテンツ カバー */
div.cover-area {width:100%; height:50rem; overflow:hidden; position:relative;}
div.cover-area img {width:100%; height:100%; object-fit:cover; opacity:0.6;}
 div.cover-catch {width:50%; height:auto; padding:1rem; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);}
 div.cover-catch img {width:100%; height:auto; object-fit:cover;}
 div.cover-read {width:100%; height:auto; padding:1rem; position:absolute; bottom:0; left:0; background-color:rgba(60,60,90,0.6);}
 div.cover-read  p {color:#ffffff;}

 /* グリッドデザイン */
 div.grid-a-area {display:grid; width:100%; margin:0 auto; grid-template-columns:calc(100% / 3); grid-template-rows:30rem 30rem 30rem; padding:5rem 0 2.5rem 0;}
  div.grid-a-01 {grid-area:1 / 1 / 3 / 2; transition:0.6s; background-color:rgba(60,60,90,1); position:relative;}
  div.grid-a-02 {grid-area:1 / 2 / 2 / 4; transition:0.6s; background-color:rgba(60,60,90,1); position:relative;}
  div.grid-a-03 {grid-area:2 / 2 / 3 / 3; transition:0.6s; background-color:rgba(60,60,90,1); position:relative;}
  div.grid-a-04 {grid-area:3 / 1 / 3 / 4; transition:0.6s; background-color:rgba(60,60,90,1); position:relative;}
  div.grid-a-05 {grid-area:2 / 3 / 4 / 4; transition:0.6s; background-color:rgba(60,60,90,1); position:relative;}
  img.gd-img {width:100%; height:100%; object-fit:cover; overflow:hidden; transition:0.6s;}
   img.gd-img:hover {opacity:0.5; transition:0.6s;}
  div.gd-comment {display:inline-block; position:absolute; padding:0.4rem 0.6rem; opacity:1;}

 /* 小見出しおび */
 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;}

 /* 本文2段 */
 article.contents-area {width:90%; margin:0 auto; padding:2.5rem 0 2.5rem 0;}
  article.contents-a {width:100%; padding:0 0 2.5rem;}
  article.contents-b {width:100%; 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.4rem; line-height:2.8rem; margin:0; color:#666666;}
  div.contents-img-box-a {width:100%; height:auto; margin:0 0 1rem 0;}
  div.contents-img-box-b {width:100%; height:auto; margin:0 0 1rem 0;}
  img.contents-img-a {width:100%; height:auto; object-fit:cover;}
 @media screen and (min-width:980px) {
 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.6rem; line-height:3.2rem; 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;}
}

 /* 本文1段 */
 article.contents-area-one {width:90%; margin:0 auto; padding:4rem 0 2.5rem 0;}
  article.contents-one {width:100%; padding:0;}
  div.contents-one-txt-box {width:100%; height:auto;}
  p.contents-one-txt {font-size:1.6rem; line-height:3.2rem; margin:0; color:#666666; clear:both;}
  p.contents-one-txt:first-letter {font-size:3.2rem; float:left;}
  p.contents-one-txt-b {font-size:1.4rem; line-height:2.8rem; margin:0; color:#666666; clear:both;}
  img.contents-img-a {width:100%; height:auto; object-fit:cover; clear:both;}
@media screen and (min-width:980px) {
 article.contents-area-one {width:70%; margin:0 auto; padding:4rem 0 2.5rem 0;}
  article.contents-one {width:100%; padding:0;}
  div.contents-one-txt-box {width:100%; height:auto;}
  p.contents-one-txt {font-size:1.6rem; line-height:3.2rem; margin:0; color:#666666; clear:both;}
  p.contents-one-txt:first-letter {font-size:3.2rem; float:left;}
  p.contents-one-txt-b {font-size:1.6rem; line-height:3.2rem; margin:0; color:#666666; clear:both;}
  img.contents-img-a {width:100%; height:auto; object-fit:cover; clear:both;}
}

/* かぎかっこ */
article.cate-title {width:100%; margin:0 auto; padding:0 0 0 0;}
div.cate-title-area {width:100%; margin:0 auto; padding:1rem; position:relative; background:linear-gradient(top, #00a381, #38b48b);}
 div.cate-title-area::before, div.cate-title-area::after {width:4rem; height:2rem; position:absolute; content:'';}
 div.cate-title-area::before {border-left:1px solid #478684; border-top:1px solid #478684; top:0; left:0;}
 div.cate-title-area::after {border-right:1px solid #478684; border-bottom:1px solid #478684; bottom:0; right:0;}
 h3.cate-title-txt {font-size:1.8rem; color:#478684;}
 p.cate-txt {font-size:1.6rem; line-height:3.2rem; margin:0 0 2rem 0; color:#888888;}
 p.cate-txt::after {margin:0;}
@media screen and (min-width:1024px) {
article.cate-title {grid-column:2 / 3; width:100%; margin:0 auto; padding:0 0 0 0;}
div.cate-title-area {width:100%; margin:0 auto; padding:1rem; position:relative;}
 div.cate-title-area::before, .cate-title-area::after {width:4rem; height:2rem; position:absolute; content:'';}
 div.cate-title-area::before {border-left:1px solid #478684; border-top:1px solid #478684; top:0; left:0;}
 div.cate-title-area::after {border-right:1px solid #478684; border-bottom:1px solid #478684; bottom:0; right:0;}
 h3.cate-title-txt {font-size:2.6rem; color:#478684;}
 p.cate-txt {font-size:1.8rem; line-height:3.6rem; margin:0 0 2rem 0; color:#888888;}
 p.cate-txt::after {margin:0;}
}