@charset "UTF-8";
/* Scss Document */
/*layout*/
body {
  background-color: #fff;
  text-align: center;
  position: relative;
  font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;
}
.con {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
}
.con.con2 {
  max-width: 1000px;
}
@media screen and (min-width: 768px) {
  .con {
    padding-left: 24px;
    padding-right: 24px;
  }
}
@media screen and (min-width: 768px) {
  a {
    transition: all 0.5s ease 0s;
  }
}
a:link {
  color: #0C47D2;
}
a:visited {
  color: #694F9F;
}
a:hover {
  color: #2F509B;
  text-decoration: none;
}
a:active {
  color: #2F509B;
  text-decoration: none;
}
a:focus {
  outline: 1px dotted #4A77BC;
}
/*----------------
共通スタイル
-----------------*/
.mtL {
  margin-top: 48px !important;
}
.mtM {
  margin-top: 24px !important;
}
.mtS {
  margin-top: 12px !important;
}
.pbL {
  padding-bottom:  48px !important;
}
.pbM {
  padding-bottom:  24px !important;
}
.pbS {
  padding-bottom:  12px !important;
}
.ptL {
  padding-top:  48px !important;
}
.ptM {
  padding-bottom:  24px !important;
}
.ptS {
  padding-top:  12px !important;
}
.fontH {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
}
.left {
  text-align: left;
}
.center {
  text-align: center;
}
.btn {
  margin: 48px auto;
  max-width: 300px;
}
.btn a {
  padding: 12px 24px;
  display: block;
  text-align: center;
  background-color: #317AE1;
  color: #fff;
  border-radius: 30px;
  text-decoration: none;
font-size:18px;
box-shadow:0 3px 6px rgba(0, 0, 0, 0.15)
}
.btn a:visiter {
  color: #fff;
}
.btn a:hover {
  color: #fff;
  background-color: #2F509B;
}
.strongLink a{
  color: #042843;
	font-weight: 600;
}
/*優先*/
.pc {
  display: none;
}
@media screen and (min-width: 768px) {
  .pc {
    display: block;
  }
}
@media screen and (min-width: 768px) {
  .sp {
    display: none;
  }
}
span.inline-block {
  display: inline-block !important;
  writing-mode: horizontal-tb !important;
}
/*----------------

header

-----------------*/
header {
  width: 100%;
  position: absolute;
  background-color: #042843;
  color: #fff;
  height: 60px;
  text-align: left;
  font-size: 14px;
}
header > .con {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
header h1 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
header h1 img {
  width: 140px;
  height: auto;
}
header h1 span {
  display: block;
  border-left: 2px solid #fff;
  height: 18px;
  line-height: 18px;
  font-weight: 400;
  padding-left: 16px;
}
@media screen and (min-width: 768px) {}
header p a {
  display: block;
  color: #fff;
}
header p a:link, header p a:hover, header p a:active, header p a:visited {
  color: #fff;
}
/*---------------------

メイン

----------------------*/
#mainWrap {
  padding-top: 60px;
}
@media screen and (min-width: 768px) {
  #mainWrap {}
}
main {
  flex: 1;
}
.h2Wrap {
  background-color: #E4F8F7;
}
h2 {
  text-align: left;
  color: #042843;
  font-size: 20px;
  padding: 20px;
  font-weight: 600;
}
@media screen and (min-width: 768px) {
  h2 {
    font-size: 28px;
    padding: 40px 20px;
  }
}
h3 {
  color: #042843;
  font-size: 18px;
  padding: 20px;
  line-height: 1.75;
  font-weight: 600;
}
h4 {
  color: #042843;
  font-size: 16px;
  padding: 10px 0;
  line-height: 1.75;
  font-weight: 600;
}

.rightColumn{
	width: 300px;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}
.rightBanner li{
	margin-bottom: 24px;
}
@media screen and (min-width: 768px) {
#mainContents{
	display: flex;
	justify-content: space-between;
	flex-wrap: nowrap;
}
.leftColumn{
	width: calc( 100% - 388px)
}
}

.grayBox {
  background: #D1E0EB;
  border-radius: 20px;
  padding: 10px;
}
.lightgrayBox {
  background: #F9F9F9;
  border-radius: 20px;
  padding: 10px;
}
.whiteBox{
	border: 1px solid #E2E2E2;
  border-radius: 20px;
  padding: 10px;
}
.btnBoxWrap {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.btnBoxWrap h3 {}
.btnBox {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
}

.btnBox li{
	text-align: center;
}
.btnBox a {
  display: flex;
  align-items: center;
  justify-content: center;
	max-width: 340px;
  min-width: 300px;
  min-height: 80px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
  margin: 10px 20px;
  font-weight: 600;
  color: #042843;
  text-decoration: none;
	padding: 20px;
}
.btnBox a:hover {
  background: #E3ECF3;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.btnBox img{
	width: 40px;
	margin-bottom: 10px
	
}
.miniBox{
text-align:left;
display:flex;
align-items:center;
justify-content:center
}
.miniBox li{
display:inline-block;
}
.miniBox li::before{
content:' | '
}
.miniBox li a{
display:inline-block;
padding:0 15px;
}

@media screen and (min-width: 900px) {
  .btnBoxWrap {
    flex-wrap: nowrap;
  }
  .btnBoxWrap h3 {
    width: 40%;
    max-width: 400px;
    text-align: center;
  }
 .top .btnBoxWrap h3 {
    width: 30%;
  }
  .btnBox {
    justify-content: flex-start;
  }
  .btnBox li {
    width: 50%;
  }
	
 .top  .btnBox {
    justify-content: center;
  }
.top .btnBox li{
	width: auto;
}
.top .btnBox li a{
	max-width: 280px;
  min-width: 240px;
}
}

.linkBox li a{
	display: inline-block;
	padding: 10px;
	text-align: left;
}
@media screen and (min-width: 768px) {
.linkBox {
	display: flex;
	flex-wrap: wrap;

}
.linkBox li{
	width: 50%;
	text-align: left;
}
}
.newsBox a{
	display: block;
	padding: 16px;
	text-decoration: none;
  color: #042843;
	text-align: left
	
}

.newsBox span{
	display: block;
	font-size: 0.8;
	color: #666;
}
.newsBox a:hover{
  background: #E3ECF3;
	border-radius: 10px;
}
/*---------------------

footer

----------------------*/
footer {}
footer #footerNav {
  text-align: center;
  padding: 24px 12px 12px;
  background-color: #eee;
}
footer #footerNav h3 {
  padding: 24px 0 12px;
  font-weight: 700;
  color: #4A77BC;
  font-size: 20px;
  font-size: 1.25rem;
}
footer #footerNav li, footer #footerNav p {
  text-align: left;
  font-size: 14px;
  font-size: 0.875rem;
  padding-bottom: 12px;
}
footer #footerNav a {
  color: #111;
}
@media screen and (min-width: 768px) {
  footer #footerNav {
    padding: 24px 0;
  }
  footer #footerNav li {
    display: inline-block;
    padding-right: 12px;
    padding-bottom: 0;
    margin-right: 12px;
    margin-bottom: 12px;
    border-right: 1px solid #e5e5e5;
  }
  footer #footerNav li:first-child {
    padding-left: 0;
  }
  footer #footerNav li:last-child {
    border-right: none;
  }
}
footer #footerLogo {
  background: #fff;
  padding: 12px 0;
}
footer #footerLogo #nttbpLogo {
  width: 120px;
  height: auto;
  margin: 0 auto;
}
footer #footerLogo #copyright {
  font-size: 12px;
  font-size: 0.75rem;
  padding: 10px;
}
.pageTop {
  position: fixed;
  bottom: 60px;
  right: 12px;
  width: 60px;
  height: 60px;
}
.pageTop a {
  display: block;
  width: 60px;
  height: 60px;
  padding: 10px;
  margin: 0 auto;
  background: #fff;
  border-radius: 30px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.14);
}
.txt {
  text-align: left;
  font-size: .75em;
}

/* FAQ */
  .faqBox {
  text-align:left;
  }
  .faqBox dt,
  .faqBox dd {
  }
/* タイトル行の余白：上下>=10px、右は「アイコン18px + 右余白20px + テキストとの間16px」 */
.faqBox dt {
  position: relative;
  cursor: pointer;
  padding: 20px 54px 20px 20px;
  line-height: 1.75;
  background: #fff;
  outline: none;
font-size:18px;
font-weight:600;
color: #042843;
border-radius:10px;
box-shadow:0 1px 10px rgba(0, 0, 0, 0.1);
width:100%;
margin-bottom:20px;

}
.faqBox dt h3{
padding:0;
margin-top:5px;
width:calc(100% - 40px)
}
.faqBox dt h3 span{
font-size:0.8em
}

/* 横棒（–）：幅18px・太さ2px・色#042843、縦中央、右端から20px余白を確保 */
.faqBox dt::after {
  content: "";
  position: absolute;
  right: 20px;             /* 右に20pxの余白 */
  top: 50%;
  width: 18px;             /* アイコンサイズ：18px */
  height: 2px;             /* 線の太さ：2px */
  background: #042843;     /* 色 */
  transform: translateY(-50%);
}

/* 縦棒（|）：高さ18px・太さ2px・色#042843、横棒の中央に重ねる */
.faqBox dt::before {
  content: "";
  position: absolute;
  right: 28px;             /* 20px + (18px-2px)/2 = 28px で中央に配置 */
  top: 50%;
  width: 2px;              /* 線の太さ：2px */
  height: 18px;            /* アイコンサイズ：18px */
  background: #042843;     /* 色 */
  transform: translateY(-50%);
  transition: opacity 0.2s ease;
}

/* 開いているときは縦棒を消して「−」表示に */
.faqBox dt.is-open::before {
  opacity: 0;
}

  /* 本文：初期は非表示 */
  .faqBox dd {
    display: none;
    padding: 32px 16px 32px 16px;
    border-bottom: 1px solid #e5e5e5;
    line-height: 1.8;
font-size:16px;
position:relative;
  }
.faqBox dt .qWrap,
.faqBox dd .aWrap{
display:flex;
width:100%;
justify-content:left;
}

.ico-round {
    display: block;
    color: #fff;
    border-radius: 100px;
    font-family: Montserrat, sans-serif;
    font-weight: 800;
    text-align: center;
    vertical-align: middle;
    width: 36px;
    height: 36px;
    margin-right: 15px;
    line-height: 36px;
    font-size: 1.6rem;
}.ico-round-q {
    background: #317AE1;
}
.ico-round-a {
    background: #FF8C8C;
    float: left;
}
.aMain p{
margin-bottom:20px
}
.aMain strong{
font-weight:700
}

.aMain em{
font-style: italic;
}

.aMain blockquote{
border-left:4px solid #ccc;
padding-left:20px;
font-style: italic;
}
.aMain ol,
.aMain ul{
padding-left:1em;
margin-bottom:20px
}
.aMain li{
margin-bottom:10px;
}
.aMain ol li{
list-style:demitial;
}
.aMain ul li{
list-style:disc
}
.aMain h1{
font-size:32px;
font-weight:600;
margin-bottom:30px;
padding:0;
color:#042843
}
.aMain h2{
font-size:24px;
font-weight:600;
margin-bottom:20px;
padding:0;
color:#042843
}
.aMain h3{
font-size:20px;
font-weight:600;
margin-bottom:20px;
padding:0;
color:#042843
}
.aMain h4{
font-size:18px;
font-weight:600;
margin-bottom:20px;
padding:0;
color:#042843
}