@charset "utf-8";
/*basis*/
body { font-family: "Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,  "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-weight: normal; color: #545454; }

.pcOnly {}
.spOnly { display: none;}
@media only screen and (max-width:768px){
  .pcOnly { display: none;}
  .spOnly { display: block;}
}

p { font-size: 1.6rem; line-height: 1.5; font-weight: 500;}

ol, ul{ list-style-type:none; }
li { font-size: 1.6rem; line-height: 1.5;}

a:hover { /*opacity: 0.5; transition: all .5s cubic-bezier(.165,.84,.44,1);*/}
a {text-decoration: none; color: #545454; font-size: 1.6rem;  line-height: 1.5; letter-spacing: 0.1em; /*transition: all .5s cubic-bezier(.165,.84,.44,1);*/ text-decoration-color: #545454;}

table { border-collapse: collapse; }
th { font-size: 1.6rem; line-height: 1.5; font-weight: normal; text-align: center; padding: 10px; border: solid 1px #000;}
td { font-size: 1.6rem; line-height: 1.5; padding: 10px; border: solid 1px #000;}

dt { font-size: 1.6rem; line-height: 1.5;}
dd { font-size: 1.6rem; line-height: 1.5;}

img[src$=".svg"] { max-width: 100%; }

.contentsBox { margin-top: 3%;}

.inner { width: 90%; max-width: 1000px; margin: 0 auto;}
@media only screen and (max-width:768px){
  .inner { width: 90%; min-width: auto;}
}

/*margin・padding*/
.mgnS { margin: 20px 0;}
.mgnM { margin: 40px 0;}
.mgnL { margin: 80px 0;}
.mgnBM { margin-bottom: 40px;}
.mLa { margin-left: auto!important;}
.mRa { margin-right: auto!important;}
.mgnNegS { margin: -20px;}
.mgnNegM { margin: -40px;}
.mgnNegL { margin: -80px;}
.pdgS { padding: 20px;}
.pdgM { padding: 40px;}
.pdgL { padding: 80px;}
.pdgBS { padding-bottom: 50px;}
.pdgBM { padding-bottom: 100px;}
.pdgBL { padding-bottom: 150px;}
@media only screen and (max-width:768px){
  .mgnS { margin: 20px 0;}
  .mgnM { margin: 20px 0;}
  .mgnL { margin: 40px 0;}
  .pdgS { padding: 10px;}
  .pdgM { padding: 20px;}
  .pdgL { padding: 40px;}
  .pdgBS { padding-bottom: 40px;}
  .pdgBM { padding-bottom: 60px;}
  .pdgBL { padding-bottom: 80px;}

}

/*iframe*/
.googleMap iframe { max-width: 100%; }
.youtube iframe { /*aspect-ratio: 10 / 6;*/ max-width: 100%; }

/*font*/
.fsS { font-size: 1.2rem;}
.fsM { font-size: 1.6rem;}
.fsL { font-size: 2.0rem;}
.fcWhite { color: #fff;}
.fcBlack { color: #000;}
.fcRed { color: #970000;}

/*indent*/
.indent1 { padding-left: 40px;}
.outdent1 { text-indent: -1em; padding-left: 1em;}
.outdent2 { text-indent: -2em; padding-left: 2em;}
.outdent3 { text-indent: -3.2em; padding-left: 3.2em;}
@media only screen and (max-width:768px){
  .indent1 { padding-left: 0px;}
}

/*background*/
.bgWhite { background-color: #fff;}
.bgBlack { background-color: #000;}
.bgGray { background-color: #F4F5F4;}
.bgCream { background-color: #F8F7F2;}
@media only screen and (max-width:768px){
  .bgSlantingBlue:before { height: 100px; top: -99px;}
}

/*フォーム*/
input { border: solid 1px #999; padding: 10px; font-size: 1.6rem;}
textarea { border: solid 1px #999; padding: 10px; font-size: 1.6rem;}
select { font-size: 1.6rem;}
input[type="submit"] { width: 20%; padding: 10px; margin: 10px; background: #ccc; color: #000; border: none; border-radius: 0; font-size: 1.6rem; cursor: pointer;}
input[type="reset"] { width: 20%; padding: 10px; margin: 10px; background: #ccc; color: #000; border: none; border-radius: 0; font-size: 1.6rem;}
@media only screen and (max-width:768px){
  /*iphoneだとform関係のfont-sizeを1.6remより小さくすると勝手に拡大させられる*/
  input { font-size: 1.6rem;}
  textarea { font-size: 1.6rem;}
  select { font-size: 1.6rem;}
  input[type="submit"] { width: 60%; font-size: 1.6rem;}
  input[type="reset"] { width: 60%; font-size: 1.6rem;}
}

/*parts*/
.btn { display: block; background: #fff; margin: 10px; color: #000;}
.btn a { min-width: 250px; text-align: center;}
.btn a:hover { opacity: 0.5;}
.btnBlack { text-align: center; width: 320px; background: none;}
.btnBlack a { display: block; background: #333333; color: #fff; padding: 10px; font-size: 1.8rem; font-weight: 700; position: relative; border-radius: 0;}
.btnBlack a:after { content: ""; width: 9px; height: 20px; position: absolute; top: 50%; right: 20px; transform: translateY(-50%); background-image: url(../images/arrow.svg); background-repeat: no-repeat; background-size: contain;}

.btnWhite { max-width: 300px; margin: 20px auto;}
.btnWhite a { display: block; max-width: 300px; text-align: center; padding: 12px 0; color: #545454; border: solid 2px #403F3F; border-radius: 28px; background: #fff; position: relative;}

@media only screen and (max-width:768px){
  .btnBlack { margin: 10px auto; width: 100%; max-width: 300px;}
  .btnBlack a { font-size: 1.6rem;}
  .btnWhite a { padding: 9px 18px;}
}

/*text*/
.textN { font-size: 1.6rem; line-height: 1.7;}
.textB { font-size: 1.8rem; line-height: 2.3; letter-spacing: 0.1rem}
.textS { font-size: 1.4rem; line-height: 1.9;}

/*ブロック左寄せ・右寄せ*/
/*左寄せ*/
.boxAreaLeft { max-width: 1230px; width: 90%; margin-left: auto; margin-right: calc(((100% - 1230px) / 2) + 65px);}
/*右寄せ*/
.boxAreaRight { max-width: 1230px; width: 90%; margin-right: auto; margin-left: calc(((100% - 1230px) / 2) + 65px);}
@media only screen and (max-width:1230px){
  .boxAreaLeft { margin: 0 auto; }
  .boxAreaRight { margin: 0 auto; }
}

/*ハンバーガーメニュー*/
  .hamburger { display: none;}
  .hamburgerMenu { display: none;}
@media only screen and (max-width:768px){
  .hamburger { display: block; width: 42px; height: 42px; cursor: pointer; text-align: center; z-index:11; border: solid 3px #A10505; border-radius: 5px; position: fixed; right: 5%; top: 25px; background: #fff;}
  .hamburger span { display: block; position: absolute; width: 24px; height: 3px; right: 6px; background :#A10505; border-radius: 4px; -webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out;}
  .hamburger span:nth-child(1) { top: 7px;}
  .hamburger span:nth-child(2) { top: 16px;}
  .hamburger span:nth-child(3) { top: 25px;}
  .hamburger.active { border-color: #fff;}
  .hamburger.active span:nth-child(1) { width: 24px; top: 17px; left: 6px;-webkit-transform: rotate(-45deg);-moz-transform : rotate(-45deg);transform: rotate(-45deg);}
  .hamburger.active span:nth-child(2),
  .hamburger.active span:nth-child(3) { width: 24px; top: 17px; -webkit-transform: rotate (45deg); -moz-transform: rotate(45deg); transform: rotate(45deg);}
  .hamburgerMenu { background: #A10505; background-repeat: no-repeat; z-index: 10; position: fixed; top: -100%; left: 0; width: 100%; height: 100%; padding: 0; transition: 0.5s ease-in-out; box-shadow: 0 0 5px #999; overflow: hidden;}
  .hamburgerMenu.active { display: block; overflow-y: auto; padding: 5%; transition: 0.5s ease-in-out; top: 0;}
  .hamburgerLogo { padding: 20px 80px 20px 20px;}
  .hamburgerMenu li { color: #fff; margin-bottom: 10px;}
  .hamburgerMenu li a { color: #fff; text-decoration: underline; text-decoration-color: #fff;}
  .hamburgerMenu li a:hover { text-decoration: none;}
  .hamburgerMenu li ul { padding-left: 10px;}

}


/*link*/
/*aタグに何が付いているかで付くものが変わります。contentの中身を変更することで好きな表示に出来ます。*/
.link { margin-top: 20px; margin-bottom: 10px;}
.link[target="_blank"]:after { content: "→"; display: inline-block; padding-left: 0.5em;}
.link[href^="#"]:after { content: "↓"; display: inline-block; padding-left: 0.5em;}
.link[href$=".docx"]:after { content: "Word"; display: inline-block; margin-left: 0.5em; background: #0000ff; padding: 0px 5px; border-radius: 5px; color: #fff;}
.link[href$=".xlsx"]:after { content: "Excel"; display: inline-block; margin-left: 0.5em; background: #008000; padding: 0px 5px; border-radius: 5px; color: #fff;}
.link[href$=".pdf"]:after { content: "PDF"; display: inline-block; margin-left: 0.5em; background: #00893A; padding: 0px 5px; border-radius: 5px; color: #fff; font-size: 1.2rem;}
.link[href$=".jpg"]:after { content: "画像"; display: inline-block; margin-left: 0.5em; background: #00893A; padding: 0px 5px; border-radius: 5px; color: #fff; font-size: 1.4rem;}
.link[href$=".png"]:after { content: "画像"; display: inline-block; margin-left: 0.5em; background: #00893A; padding: 0px 5px; border-radius: 5px; color: #fff; font-size: 1.4rem;}
.linkText { border-bottom: solid 1px #999; margin-top: 20px; margin-bottom: 10px;}
.linkText a { font-size: 1.5rem;}
.linkText a[target="_blank"]:before { content: "→"; display: inline-block; padding-right: 0.5em;}
.linkText a[href^="#"]:before { content: "↓"; display: inline-block; padding-right: 0.5em;}
.linkText a[href$=".docx"]:before { content: "Word"; display: inline-block; margin-right: 0.5em; background: #0000ff; padding: 0px 5px; border-radius: 5px; color: #fff;}
.linkText a[href$=".xlsx"]:before { content: "Excel"; display: inline-block; margin-right: 0.5em; background: #008000; padding: 0px 5px; border-radius: 5px; color: #fff;}
.linkText a[href$=".pdf"]:before { content: "PDF"; display: inline-block; margin-right: 0.5em; background: #00893A; padding: 0px 5px; border-radius: 5px; color: #fff; font-size: 1.2rem;}
.linkText a[href$=".jpg"]:before { content: "画像"; display: inline-block; margin-right: 0.5em; background: #00893A; padding: 0px 5px; border-radius: 5px; color: #fff; font-size: 1.2rem;}
.linkText a[href$=".png"]:before { content: "画像"; display: inline-block; margin-right: 0.5em; background: #00893A; padding: 0px 5px; border-radius: 5px; color: #fff; font-size: 1.2rem;}

.btnGreen .link[target="_blank"]:after { background: none; position: static; transform: none;}

.toTop {position: fixed; bottom: 5%; right: 5%;}

/*▶系　width・heightの数値をいじると大きさが変わります。*/
.arrowT { position: relative;}
.arrowT:before { content: ""; display: block; width: 10px; height: 10px; position: absolute; top: 50%; right: -20px; transform: translateY(-50%); clip-path: polygon(50% 0%, 0% 100%, 100% 100%); background: #000;}
.arrowR { position: relative;}
.arrowR:before { content: ""; display: block; width: 10px; height: 10px; position: absolute; top: 50%; right: -20px; transform: translateY(-50%); clip-path: polygon(0% 0%,100% 50%, 0% 100% ); background: #000;}
.arrowB { position: relative;}
.arrowB:before { content: ""; display: block; width: 10px; height: 10px; position: absolute; top: 50%; right: -20px; transform: translateY(-50%); clip-path: polygon(0% 0%, 100% 0%, 50% 100%); background: #000;}
.arrowL { position: relative;}
.arrowL:before { content: ""; display: block; width: 10px; height: 10px; position: absolute; top: 50%; right: -20px; transform: translateY(-50%); clip-path: polygon(0% 50%, 100% 0%, 100% 100%); background: #000;}

/*headline*/
.headlineLeftBorder { font-size: 1.8rem; border-left: solid 5px #000; padding-left: 0.5em; margin-bottom: 10px;}
.headlineUnderline { font-size: 1.8rem; border-bottom: solid 1px #000; margin-bottom: 10px;}
.headlineBgColor { font-size: 1.8rem; padding: 10px; background: #000; color: #fff; text-align: center; margin-bottom: 10px;}
.headlineBig { font-size: 2.6rem; font-weight: 700; margin-bottom: 10px;}

.headlineBold { font-size: 3.2rem; font-weight: 700; margin-bottom: 20px; letter-spacing: 0.5rem;}

.headlineLeftLine { display: flex; justify-content: center; align-items: center; font-size: 2.6rem; font-weight: 700; gap: 1em; margin: 10px 0 30px; padding-right: 70px;}
.headlineLeftLine::before { content: ""; display: block; width: 70px; height: 2px; background: #A10505;}
.headlineLeftLine.left { justify-content: flex-start; padding-right: 0;}
.pageContent .headlineLeftLine { font-size: 3.2rem; margin: 10px 0 50px;}
.pageContent .headlineLeftLine.left { justify-content: flex-start; padding-right: 0; font-size: 2.6rem; margin: 60px 0 20px;}

.headlineCenterLine { font-size: 2.6rem; font-weight: 700; text-align: center; position: relative; padding-bottom: 20px; margin: 70px 0;}
.headlineCenterLine::after { content: ""; display: block; width: 70px; height: 2px; background-color: #A10505; position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%);}
.home .headlineCenterLine { font-size: 2.2rem; margin: 20px 0 40px;}

@media only screen and (max-width:768px){
  .headlineBold { font-size: 2.2rem; letter-spacing: 0.3rem;}

  .headlineLeftLine { font-size: 2.4rem; padding-right: 40px;}
  .headlineLeftLine::before { width: 40px;}
  .pageContent .headlineLeftLine { font-size: 2.4rem; margin: 10px 0 30px;}
  .pageContent .headlineLeftLine.left { font-size: 2.2rem;}

  .headlineCenterLine { font-size: 2.2rem; margin: 40px 0;}
  .headlineCenterLine::after { width: 40px;}
  
}


/*table*/
.tableBlue { border-collapse: collapse;}
.tableBlue th { background: #6DA2D7; color: #fff; font-size: 1.6rem; padding: 10px; border: solid 1px #fff; border-right: none;}
.tableBlue td { font-size: 1.6rem; padding: 10px;border: solid 1px #6DA2D7;}

.wp-block-table.tableWhite { background: #fff; max-width: 780px; margin: 0 auto; padding: 30px;}
.wp-block-table.tableWhite table { max-width: 500px; margin: 0 auto;}
.wp-block-table.tableWhite td { border: none; border-bottom: solid 1px #C6C6C6; padding: 10px;}
.wp-block-table.tableWhite td:nth-of-type(1) { text-align: right; font-weight: bold; color: #0886B5;}
@media only screen and (max-width:768px){
  .wp-block-table.tableWhite td { border: none; padding-left: 1em;}
  .wp-block-table.tableWhite td:nth-of-type(1) { padding: 0; text-align-last: left;}
}

/*アニメーション系*/
.appear { animation: appear 0.5s ease forwards;}
@keyframes appear {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}