@charset "UTF-8";
body {
	width: 100%;
  font-family: 'Noto Serif JP', "Times New Roman", Times, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", YuMincho, "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-size: 14px;
	line-height: 1.5;
	color: #000;
	background: #fff;
	letter-spacing: 0.05em;
  border-top: 8px solid #55c0b7;
}
a {
	text-decoration: none;
	color: #000;
}
.cf:after {
	display: block;
	content: "";
	clear: both;
}
img {
	width: 100%;
	height: auto;
	vertical-align: bottom;
}
.pagetop {
	cursor: pointer;
	overflow: hidden;
	position: fixed;
	bottom: 16vw;
	right: 10px;
	width: 50px;
	height: 50px;
}
.pagetop:hover {
	opacity: .6;
}
.d_pc {
	display: none!important;
}

/* スクロールするとふわっと表示 */
.scroll-fade{opacity: 0; transition: all 2s/*処理にかかる時間*/;}
.scroll-up{opacity: 0; transform: translateY(100px)/*スクロールアップする距離*/; transition: all 2s/*処理にかかる時間*/;}
.scroll-up.done, .scroll-fade.done{opacity : 1; transform : translate(0, 0);}
.load-fade {opacity : 0; transition : all 2s/*処理にかかる時間*/;}
.load-up{opacity: 0; transform: translateY(100px)/*スクロールアップする距離*/; transition: all 2s/*処理にかかる時間*/;}
.load-up.done, .load-fade.done{opacity : 1; transform : translate(0, 0);}


/*
       header
========================================================================== */
header {
  padding: 50px 4% 50px;
  text-align: center;
}
header p {
	display: block;
	width: 50vw;
  margin: 0 auto 20px;
  font-size: 16vw;
  font-weight: bold;
  line-height: 1;
}
header h1 {
  font-size: 4vw;
  letter-spacing: 0.15em;
}

/*
       content
========================================================================== */
h2 {
  font-size: 5vw;
  margin-bottom: 20px;
}
#content {
  padding: 0 4%;
}
#content .complist {
  margin: 0 auto 50px;
}
#content .complist dt {
  clear: both;
  float: left;
  width: 6em;
  margin-bottom: 20px;
}
#content .complist dd {
  float: right;
  width : 70% ; /* IE8以下とAndroid4.3以下用フォールバック */
  width : -webkit-calc(100% - 6em) ;
  width : calc(100% - 6em) ;
  margin-bottom: 20px;
}
#content .link {
  text-align: center;
  margin-bottom: 40px;
}
#content .link a {
  text-decoration: underline;
}
#content .link a:hover {
  color: #55c0b7;
}

/*
     03. footer
========================================================================== */
footer {
  margin-top: 100px;
}
footer .copy {
	width: 100%;
	padding: 15px 0;
	text-align: center;
	font-size: 90%;
	background: #55c0b7;
	color: #fff;
}

/*
       08. multi-class
========================================================================== */
#sidr ul li {
	line-height: 1.2;
}
#sidr ul li a {
	display: block;
	padding: 15px;
}
#sidr {
	font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro", "游ゴシック", "Yu Gothic", YuGothic, arial,helvetica, clean, sans-serif, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic";
    background: #2e2b2e;
    box-shadow: none;
}
#sidr ul {
    border: none;
}
#sidr ul li {
    border-top: none;
    border-bottom: 1px solid #1a1a1a;
}
#sidr .build-menu-button {
	font-size: 150%;
}
/*　画像　*/
.fade {
	-webkit-transition: .3s ease-in-out;
	-moz-transition: .3s ease-in-out;
	-o-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.fade:hover {
	opacity: .6;
	filter: alpha(opacity=60);
}
.img-border {
	padding: 4px;
	border: 1px solid #ccc;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	background: #fff;
}
.img-right {
	float: right;
	margin: 0 0 10px 15px;
	width: 44%;
	height: auto;
}
.img-left {
	float: left;
	margin: 0 15px 10px 0;
	width: 44%;
	height: auto;
}
.border {
	border: 1px solid #bfbfbf;
}
.center {
	text-align: center;
}
.alignR {
    text-align: right !important;
}
.alignL {
    text-align: left !important;
}
.vAlignM{
    vertical-align:middle !important;
}
/*　テキスト */
.gothic {
  font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック", "Yu Gothic", YuGothic, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.mincho {
	font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "Times New Roman", Times, "游明朝", YuMincho, "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
.p-link {
	color: #28b4cd;
	text-decoration: underline;
	margin: 0 1px;
}

.bold {	font-weight: bold; font-family:"ヒラギノ角ゴ Pro W6", "Hiragino Kaku Gothic Pro", "游ゴシック", "Yu Gothic", YuGothic, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; }
.bold.mincho {	font-weight: bold; font-family: "Sawarabi Mincho" , "ヒラギノ明朝 ProN W6", "Hiragino Mincho ProN", "Times New Roman", Times, "游明朝", YuMincho, "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;}
.gray {	color: #808080;}
.txt150 {	font-size: 150%;}
.txt130 {	font-size: 130%;}
.txt120 {	font-size: 120%;}
.txt110 {	font-size: 110%;}
.txt90 {	font-size: 90%;}
.txt80 {	font-size: 80%;}
.or {	color: #ffb200;}
.re {	color: #b42356;}
.pk {	color: #df85a5;}
.bl {	color: #1f5a78;}
.sb {	color: #68b7e0;}
.ye {   color: #cba41a;}
i.fas {	margin-right: 5px;}
.nowrap {	white-space: nowrap !important;}
.underline {	text-decoration: underline;}
.dispB {	display: block;}
.dispI {	display: inline;}
span:lang(ja) {
	font-family: san-serif
}

/*　余白 */
.p10 {	padding: 10px;}
.pt10 {	padding-top: 10px;}
.pr10 {	padding-right: 10px;}
.pl10 {	padding-left: 10px;}
.pb10 {	padding-bottom: 10px;}
.mb5 {	margin-bottom: 5px;}
.mb10 {	margin-bottom: 10px;}
.mb15 {	margin-bottom: 15px;}
.mb20 {	margin-bottom: 20px;}
.mb30 {	margin-bottom: 30px;}
.mb40 {	margin-bottom: 40px;}
.mb50 {	margin-bottom: 50px;}
.mb60 {	margin-bottom: 60px;}
.mb70 {	margin-bottom: 70px;}
.mb80 {	margin-bottom: 80px;}
.mt5 {	margin-top: 5px;}
.mt10 {	margin-top: 10px;}
.mt20 {	margin-top: 20px;}
.mt30 {	margin-top: 30px;}
.mr5 {	margin-right: 5px;}
.mr10 {	margin-right: 10px;}
.mr15 {	margin-right: 15px;}
.mr20 {	margin-right: 20px;}
.mr30 {	margin-right: 30px;}
.ml5 {	margin-left: 5px;}
.ml10 {	margin-left: 10px;}
.ml15 {	margin-left: 15px;}
.ml20 {	margin-left: 20px;}
.ml30 {	margin-left: 30px;}

/*　見出し */
.ttl-low1 {
	letter-spacing: 0.02em;
	font-size: 19px;
  background: url("../images/common/ttl-low1.png") no-repeat 0 100%;
  background-size: 140vw;
  margin-bottom: 20px;
  padding: 0 0 10px 10vw;
  color: #3371a6;
  line-height: 1.4;
  font-family: "Sawarabi Gothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック", "Yu Gothic", YuGothic, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.ttl-low2 {
	font-size: 18px;
	letter-spacing: 0.1em;
	color: #fff;
  font-family: "Sawarabi Gothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック", "Yu Gothic", YuGothic, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  border-radius: 6px;
}
.ttl-low2 span {
	display: block;
	border-left: 2px solid #fff;
	padding: 8px 15px;
	margin-left: 14px;
}
.ttl-low2-1 {	background: #3371a6;}
.ttl-low2-2 {	background: #63ae88;}
.ttl-low3 {
	position: relative;
	font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "Times New Roman", Times, "游明朝", YuMincho, "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-size: 17px;
  display: table;
	width: 100%;
}
.ttl-low3 span:first-child {
  display: table-cell;
  vertical-align: middle;
  color: #fff;
  font-size: 22px;
  text-align: center;
  line-height: 50px;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
}
.ttl-low3 span:last-child {
  display: table-cell;
  vertical-align: middle;
  padding-left: 15px;
}
.ttl-low3:after {
	position: absolute;
	bottom:0;
	left: 52px;
	content:'';
	height: 1px;
	width : -webkit-calc(100% - 52px) ;
   width : calc(100% - 52px) ;
}
.ttl-low3-1:after {    border-bottom: 1px solid #1f5a78;}
.ttl-low3-2:after {    border-bottom: 1px solid #b42356;}
.ttl-low3-1 span:first-child {    background: #1f5a78;}
.ttl-low3-2 span:first-child {    background: #b42356;}
.ttl-low4 {
	display: inline-block;
	font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "Times New Roman", Times, "游明朝", YuMincho, "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-size: 17px;
	padding: 0 0.2em;
}
.ttl-low4-1 {
	background: linear-gradient(transparent 65%, #eace6b 65%, #eace6b 90%, #eace6b 90%, #eace6b 90%);
}
.ttl-low5 {
	font-family: "Times New Roman", Times, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", YuMincho, "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-size: 16px;
	text-align: center;
	border-radius: 10px;
	padding: 7px 5% 7px;
	line-height: 1.4;
}
.ttl-low5-1 {
	color: #fff;
	background: url(../images/common/ttl_bg_bl.png) #00AFF3;
}
.ttl-low5-2 {
	color: #fff;
	background: url(../images/common/ttl_bg_or.png) #EFB505;
}
.ttl-low5-3 {
	color: #4D2500;
	background: #FFFDE6;
    border: 1px solid #FFE17F;
}
.ttl-low6 {
	font-family: "Times New Roman", Times, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", YuMincho, "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-size: 16px;
	padding-left: 20px;
}
.ttl-low6-1 {
	background: url("../images/common/ttl-low6-1_bg.png") no-repeat left 0.3em;
}
.ttl-low6-2 {
	background: url("../images/common/ttl-low6-2_bg.png") no-repeat left 0.3em;
}
.ttl-low6-3 {
	background: url("../images/common/ttl-low6-3_bg.png") no-repeat left 0.3em;
}
/*　 コラム */
.column .ttl-btn{
	font-family: "Times New Roman", Times, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", YuMincho, "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-size: 16px;
	text-align: center;
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
	padding: 10px 5px 7px;
	line-height: 1.4;
	background: #00AFF3;
	color: #fff;
    border: 1px solid #00AFF3;
}
.column .column_inner {
	background: #fff;
    border-left: 1px solid #00AFF3;
    border-right: 1px solid #00AFF3;
    border-bottom: 1px solid #00AFF3;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    padding: 10px;
}
/*テーブル*/
.table-normal,
.table-nocolor{
	width: 100%;
	font-size: 90%;
}
.table-normal th{
	background:#63ae88;
	color: #fff;
	padding: 6px 8px;
	border: 1px solid #ccc;
	vertical-align: middle;
}
.table-normal td{
	background: #fff;
	padding: 6px 8px;
	border: 1px solid #ccc;
	vertical-align: middle;
}
.table-nocolor th{
	background:#f8f8f8;
	color: #333;
	padding: 6px 8px;
	border: 1px solid #ccc;
	vertical-align: middle;
}
.table-nocolor td{
	background: #fff;
	padding: 6px 8px;
	border: 1px solid #ccc;
	vertical-align: middle;
}
.table-nostyle th{
	padding: 6px 8px;
	vertical-align: middle;
}
.table-nostyle td{
	padding: 6px 8px;
	vertical-align: middle;
}
.tAlignL {    text-align: left !important;}
.tAlignC {    text-align: center!important;}
.tAlignR {    text-align: right !important;}
.tVAlignT {    vertical-align: top !important;}
.tVAlignM {    vertical-align: middle !important;}
.tVAlignB {    vertical-align: bottom !important;}
/* list */
.list-num li {
    list-style-type: decimal;
		list-style-position: inside;
}
.list-dot li {
	list-style: disc;
  margin-left: 1.5em;
}
.txt-indent li {
	padding-left: 1em;
}
.list-dot.txt-indent li {
    background: url(../images/common/disc.png) no-repeat left 2px;
}
.list-nostyle li{
    list-style:none;
}
.list-check li {
	text-indent: -1.3em;
    padding-left: 1em;
	margin-left: 0.4em;
}
.list-check li:before {
    font-family: "Font Awesome 5 Free";
	content: "\f00c";
	font-weight: bold;
	margin-right: 0.3em;
}
.list-check-bl li:before {	color: #68b7e0;}
.list-check-pk li:before {	color: #df85a5;}
.list-arrow li {
	text-indent: -1.3em;
    padding-left: 1em;
	margin-left: 0.4em;
}
.list-arrow li:before {
    font-family: "Font Awesome 5 Free";
	content: "\f0da";
	font-weight: bold;
	margin-right: 0.3em;
}
.list-arrow-gray li:before {	color: #7f797e;}
/*　画像・レイアウト */
.img-column-wrap {
	position: relative;
	overflow: hidden;
}
.img-column {
	position: relative;
	left: 50%;
	float: left;
}
.img-column li {
	position: relative;
	float: left;
	left: -50%;
	margin-right: 2%;
}
.img-column.for-two li {
	width: 49%;
}
.img-column.for-three li {
	margin-right: 2%;
	width: 32%;
}
.img-column.for-four li {
	margin-right: 1.3%;
	width: 24%;
}
.img-column.for-two li:nth-child(even), .img-column.for-three li:nth-child(3n), .img-column.for-four li:nth-child(4n) {
	margin-right: 0 !important;
}
.img-column.for-three .img-border, .img-column.for-four .img-border {
	padding: 2px;
}
/* img+textbox */
.box-img-left {
	display: block;
	width: 100%;
}
.box-img-left .img {
	width: auto;
	display: block;
	margin: 0 auto 10px;
	padding-right: 0;
	text-align: center;
}
.box-img-left .box {
	display: block;
	vertical-align: top;
}
.box-img-right {
	display: block;
	width: 100%;
}
.box-img-right .img {
	width: auto;
	display: block;
	vertical-align: top;
	margin: 0 auto 10px;
	padding-left: 0;
}
.box-img-right .box {
	display: block;
	vertical-align: top;
}
.box-two-column {
	display: table;
	width: 100%;
}
.box-two-column .box-right {
	display: table-cell;
	vertical-align: top;
}
.box-two-column .box-img-left {
	width: 48.6%;
	display: table-cell;
	vertical-align: top;
	padding-right: 3%;
}
.box-two-column .box-img-right {
	width: 48%;
	display: table-cell;
	vertical-align: top;
	padding-left: 3%;
}
.box-two-column .box-left {
	display: table-cell;
	vertical-align: top;
}
.box-two-column .box-img-left .img-border,
.box-two-column .box-img-right .img-border,
.box-two-column-around .box-img-left .img-border,
.box-two-column-around .box-img-right .img-border{
	padding: 2px;
}
.box-two-column-around {
	display: block;
	width: 100%;
}
.box-two-column-around .box-img-right{
	width: 48%;
	float: right;
	margin: 0 0 8px 3%;
}
.box-two-column-around .box-img-left{
	width: 48%;
	float: left;
	margin: 0 3% 8px 0;
}

/*Q&A*/
.qanda dt{
	background: url(../images/common/qicon.png) no-repeat left top;
	background-size: 30px auto;
	padding: 4px 0 6px 40px;
	margin-bottom: 18px;
	height: 20px;
}
.qanda dd{
	margin: 0 0 40px 10px;
	background: url(../images/common/aicon.png) no-repeat left top 2px;
	background-size: 30px auto;
	padding: 0 0 6px 40px;
}
.qanda a{
	text-decoration: underline;
}
	/* 画像ボタン */
.menu-btn li img {
	border: 1px solid #F2BC17;
	display: block;
	box-sizing: border-box;
}
.menu-btn .ttl {
	border-top: 1px solid #F2BC17;
	border-left: 1px solid #F2BC17;
	border-right: 1px solid #F2BC17;
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
	padding: 8px 0 6px;
	line-height: 1;
	text-align: center;
	color: #fff;
	background: #F2BC17;
}
.menu-btn li a {
	display: block;
}
.img-column.menu-btn.for-three li {
	width: 32%;
	float: left;
	margin: 0 2% 0 0;
}
.img-column.menu-btn.for-three li:last-child {
	margin-right: 0 !important;
}

@media screen and (max-width : 320px) {
.img-column.menu-btn.for-three li {
	width: 32.5%;
	margin: 0 1% 0 0;
	font-size: 80%;
}
.img-column.menu-btn.for-three li:last-child {
	margin-right: 0 !important;
}
}
.detail-btn {
	text-align: right;
	text-decoration: underline;
	margin-top: 5px;
	font-size: 12px;
}
.detail-btn i.fa {
	color: #F2BC17;
}
.menu-btn2 .ttl {
  background: #61B4E5;
	color: #fff;
	border-color: #61B4E5;
}
.menu-btn2 li img{
	border-color: #61B4E5;
}
.menu-btn2 .detail-btn i.fa {
    color: #61B4E5;
}
	/*改行非表示*/
.sp-none{
	display: none;
}
 @media screen and (min-width : 310px) and (max-width: 330px) {
	 .ios5only{
		 display: none;
	 }
 }
 @media screen and (min-width : 360px) {
	 .andover{
		 display: none;
	 }
 }
  @media screen and (min-width : 375px) {
	 .ios6over{
		 display: none;
	 }
 }