@charset "UTF-8";
/* 基本色 */
:root {
 --main-color: #0047BA;
 --accent-color: #0088D1;
 --light-main-color:#666464;
 --dark-main-color: #162789;
 --text-bright-color: #fff;
 --icon-color: #fff;
 --icon-bk-color: #ddd;
 --large-width: 1000px;
}

ul,li{
    margin:0;
	padding:0;
	outline:0;
	}
/* 基本設定： ページ全体 */
body {
	margin:0;
	font-family: 'a-otf-ud-shin-go-pr6n', 'myriad-pro', 'Lato', 'Noto Sans Japanese', '游ゴシック Medium', '游ゴシック体', 'Yu Gothic Medium', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	color: #2F2F2F;
}
/*.Montserrat {
	font-family: 'Montserrat', sans-serif;
}*/
.title h2 {
	margin-left: 5px;
	padding-left: 0.5rem;
	border-left: solid 2vw var(--accent-color);
	font-size: 5.5vw;
	font-weight: 200;
}
.title p {
	margin-left: 10px;
}

@media (min-width: 768px) {
.title h2 {
	font-size: 2rem;
	border-left: solid 0.75rem var(--accent-color);
}
}
/*背景*/
.back {
	background-image: linear-gradient(rgba(255,255,255,0.7), rgba(255,255,255,0.7)), url(img/back.png)
}
.button {
	background-image: linear-gradient(rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.1));
	background-origin: border-box;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 0.25em;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), inset 0 1px rgba(255, 255, 255, 0.1);
	white-space: nowrap;
}
.white {
	background-color: #fff;
}



/* フッター */
footer {
	color: #fff;
	color: var(--text-bright-color);
	background-color: var(--dark-main-color);
}
footer .container {
	padding: 40px 20px;
}

@media (min-width: 768px) {
footer .container {
	max-width: 1000px;
	max-width: var(--large-width);
	margin-left: auto;
	margin-right: auto;
}
}
/* フッターA： サイト情報 */
.footA {
	margin-bottom: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.footA h2 {
	margin-top: 0;
	margin-bottom: 10px;
	font-family: 'Montserrat', sans-serif;
	font-size: 30px;
	letter-spacing: 0.2em;
}
.footA p {
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 15px;
	font-size: 14px;
}
.footA a {
	color: inherit;
	text-decoration: none;
}

@media (min-width: 768px) {
}
/* フッターC： コピーライト */
.footC {
	font-size: 12px;
	text-align: center;
}
/* ヘッダー */
header {
	/*	position: absolute;*/
	top: 0;
	left: 0;
	/*	z-index: 100;*/
	width: 100%;
	background-color: rgba(255,255,255,0.9);
}
/* ヘッダーA: サイト名 */
.headA {
	display: inline-block;
	line-height: 50px;
	padding-left: 20px;
	padding-right: 20px;
	font-family: 'Montserrat', sans-serif;
	font-size: 24px;
	text-decoration: none;
	color: #2B2B2B;
}
/* ヘッダーB： ナビゲーションメニュー */
.headB ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.headB a {
	display: block;
	padding: 15px;
	color: inherit;
	font-size: 12px;
	text-decoration: none;
	transition: .4s;
}

.headB a img{
	padding-left:5px;
}
.headB a:hover {
	background: var(--main-color);
	color: white;
}
.head_flex{
	display: flex;
	align-items: center;
}

@media (min-width: 768px) {
header .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: 1000px;
	max-width: var(--large-width);
	margin-left: auto;
	margin-right: auto;
}
.headB ul {
	display: flex;
}
}

/* ヘッダーC： トグルボタン */

@media (max-width: 767px) {
/* 小さい画面用の設定 */
header .container-small {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.headC {
	margin-right: 10px;
	padding: 0;
	border: none;
	outline: none;
	background: none;
	font-size: 28px;
	opacity: 0.5;
	cursor: pointer;
}
.headC:hover {
	opacity: 0.3;
}
.headB {
	display: none;
}
}

@media (min-width: 768px) {
/* 大きい画面用の設定 */
.headC {
	display: none;
}
.headB {
	display: block !important;
}
}
#pageTop {
	position: fixed;
	bottom: 20px;
	right: 20px;
}
#pageTop i {
	padding-top: 6px
}
#pageTop a {
	display: block;
	z-index: 999;
	padding: 8px;
	border-radius: 30px;
	width: 35px;
	height: 35px;
	background-color: var(--main-color);
	color: #fff;
	font-weight: bold;
	text-decoration: none;
	text-align: center;
}
#pageTop a:hover {
	text-decoration: none;
	opacity: 0.7;
}


/* 実例紹介 */
.conJ h4 {	
	font-size: 3vw;
	color: var(--dark-main-color);

	margin-right: 10px;
	margin-bottom: 10px;
	margin-top: 5px;
	filter: drop-shadow(2px 3px 3px rgba(0,0,0,0.3));
}

.conJ p {	
	font-size: 2.5vw;
	margin-left: 10px;

}
.conJ a{
	text-decoration: none;
	color: #2F2F2F;
}
.cards {
  display: -webkit-flex;
  display: flex;
/*  -webkit-justify-content: center;
  justify-content: center;*/
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-top: 15px;
  padding: 1.5%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  justify-content:space-between;
}

/* helpers/accessibility.css */

.invisible {
  left: -999px;
  overflow: hidden;
  position: absolute;
  top: -999px;
}

/* helpers/align.css */

.align {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-left: 5px;
  margin-right: 5px;
}

/* ------------------PageNavi for Archive------------------- */
ul.page-nav {
	text-align:center;
	font-weight:bold;
	margin:30px 0;}
ul.page-nav li {display:inline;}
ul.page-nav li a {
	border: 2px solid rgba(255, 255, 255,0.8);
	border-radius:10px;}
ul.page-nav li a:hover {
	text-decoration:none;
	border: 2px solid #c2dce4;
	box-shadow: 0 0 20px #c2dce4 inset;}
ul.page-nav li a:active {top:1px;}/*push image*/
ul.page-nav li.current span {/*style of current button*/
	border: 2px solid #c2dce4;
	background: #c2dce4;
	border-radius: 10px;}
ul.page-nav li.first span,
ul.page-nav li.previous span,
ul.page-nav li.next span,
ul.page-nav li.last span,
ul.page-nav li.page_nums span {/*no link buttons*/
	border: 2px solid rgba(255, 255, 255,0.5);
	color: rgba(255, 255, 255,0.5);
	border-radius: 10px;}
ul.page-nav li a,
ul.page-nav li.current span,
ul.page-nav li.first span,
ul.page-nav li.previous span,
ul.page-nav li.after span,
ul.page-nav li.next span,
ul.page-nav li.last span,
ul.page-nav li.page_nums span {padding: 0.5em 0.8em;position:relative;/*display: inline-block;*/}



/* modules/anchor.css */

a {
  outline: 0;
}



/* modules/image.css */

svg {
  max-width: 100%;
}

/* modules/navigation.css */

.navigation {
  
  border-radius: 0.25rem;
  -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, .3);
          box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, .3);
}

.navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.navigation a {
  display: block;
  padding: 24px;
  padding: 1.5rem;
  position: relative;
  text-decoration: none;
}
@media (max-width: 768px) {
	.navigation a{
		font-size: 2.5vw;
	}
	}
.navigation a:focus::after,
.navigation a:hover::after {
  opacity: 1;
}

.navigation a::after {
  -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, .3);
          box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, .3);
  content: '';
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
  width: 100%;
}

.navigation--inline ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;


}
.navigation--inline li{
	  flex-grow:3;
	  text-align:center;
}


.card {
  position: relative;
  margin-bottom: 20px;
  padding-bottom: 30px;
  background: #fefff9;
  color: #363636;
  text-decoration: none;
  -moz-box-shadow: rgba(0, 0, 0, 0.19) 0 0 8px 0;
  -webkit-box-shadow: rgba(0, 0, 0, 0.19) 0 0 8px 0;
  box-shadow: rgba(0, 0, 0, 0.19) 0 0 8px 0;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
	  background: white;
  -moz-box-shadow: rgba(0, 0, 0, 0.45) 0px 0px 20px 0px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.45) 0px 0px 20px 0px;
  box-shadow: rgba(0, 0, 0, 0.45) 0px 0px 20px 0px;
}
@media (max-width: 768px) {
	  .category {
    width: 100%;
  }
  .card {
    width: 100%;
  }
}
@media (min-width: 768px) {
	 .category {
    margin-right: 10px;
    margin-bottom: 10px;
    margin-top: 10px;
    margin-left: 10px;
	  
  }
  .card {
    margin-bottom: 20px;
	margin: 0 auto;
    
	  
  }
  .card:nth-child(even) {
    margin-right: 0;
  }
}
.card span {
  display: block;
}
label {
	position: absolute;
	z-index: 1;
	bottom: 0;
	width: 100%;
	height: 100px; /* グラデーションの高さ */
	cursor: pointer;
	text-align: center;
	/* 以下グラデーションは背景を自身のサイトに合わせて設定してください */
	background: linear-gradient(to bottom, rgba(250, 252, 252, 0) 0%, rgba(250, 252, 252, 0.95) 90%);
}
.card .card-summary {
	height: 600px;
  padding: 5% 5% 3% 5%;
  margin-bottom: 10px;
  overflow: hidden;

 
}
.card .card-header {
  position: relative;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.15);
  background-blend-mode: overlay;
  -moz-border-radius: 4px 4px 0 0;
  -webkit-border-radius: 4px;
  border-radius: 4px 4px 0 0;
	font-size: 2.5vw;

}
/*.card .card-header:hover, .card .card-header:focus {
  background-color: rgba(255, 255, 255, 0);
}*/

.card .card-categoryflex{
	display: flex;
	font-size: 2vw;

}
.card .card-category1 {

	flex: 0 1 35%;
padding-left: 20px;
/*background-color:#d1dae9;*/
}
.card .card-category2 {
	text-align: left;
	flex: 1 1 50%;
	padding-left: 10px;
	background-color:#c2dce4;
}
.card .card-title {
  background: rgba(0, 134, 214, 0.85);
  padding: 2.5% 0 2.5% 0;
  color: white;
  width: 100%;

}
.card .card-title h3 {
  font-size: 1.1em;
  line-height: 1.2;
  padding: 0 3.5%;
  margin: 0;


}
.card .card-meta {
  font-size: 2vw;
  font-weight: bold;
  text-transform: uppercase;
  position: absolute;
  bottom: 2%;
  padding: 0 5%;
  z-index: 2;
  color: #0088D1;
  text-align: right;
}
/*.card:hover, .card:focus {
  background: white;
  -moz-box-shadow: rgba(0, 0, 0, 0.45) 0px 0px 20px 0px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.45) 0px 0px 20px 0px;
  box-shadow: rgba(0, 0, 0, 0.45) 0px 0px 20px 0px;
}*/
/*.card:hover .card-title, .card:focus .card-title {
  background: rgba(16, 6, 159, 0.95);
}*/

.card img {
  max-width: 100%;
}

* {
  -moz-transition-property: background-color, border-color, box-shadow, color, opacity, text-shadow, -moz-transform;
  -o-transition-property: background-color, border-color, box-shadow, color, opacity, text-shadow, -o-transform;
  -webkit-transition-property: background-color, border-color, box-shadow, color, opacity, text-shadow, -webkit-transform;
  transition-property: background-color, border-color, box-shadow, color, opacity, text-shadow, transform;
  -moz-transition-duration: 0.2s;
  -o-transition-duration: 0.2s;
  -webkit-transition-duration: 0.2s;
  transition-duration: 0.2s;
  -moz-transition-timing-function: linear;
  -o-transition-timing-function: linear;
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
}



@media (min-width: 768px) {
.conJ .container {
	max-width: 1000px;
	max-width: var(--large-width);
	margin-left: auto;
	margin-right: auto;
}
	
.conJ .cards{
	display: -webkit-flex;
  display: flex;
/*  -webkit-justify-content: center;
  justify-content: center;*/
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content:space-between;

	}
.conJ .category{
    flex: 0 1 100%;
}
.conJ .card {
	flex: 0 1 47%;
	margin: 10px;

padding-bottom: 30px;
}
.conJ h4 {
	font-size: 14px;
}
.card .card-title h3{
    font-size: 14px;
    /* [disabled]padding-bottom: 10px; */
}
.conJ p {
	font-size: 13px;
}
	.conJ li {
	font-size: 13px;
}
.card .card-meta{
		font-size: 14px;
	}

.card .card-categoryflex{
	font-size: 10px;
}

}

.category_all{
font-weight:bold;
color:var(--dark-main-color);
filter:drop-shadow(2px 3px 3px rgba(0,0,0,0.3));
}