@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: #2F2725; }

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

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

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

/*a:hover { opacity: 0.5;}*/
a { text-decoration: none; color: #2F2725; font-size: 1.6rem;  line-height: 1.5;}

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%; }

.contInner { width: 100%; min-width: 950px; max-width: 80%; margin: 0 auto 100px;}
@media only screen and (max-width:768px){
  .contInner { min-width: auto; max-width: 90%;}
  p { font-size: 1.4rem; }
  a { font-size: 1.4rem; }
}

/*margin・padding*/
.mgnS { margin: 20px 0;}
.mgnM { margin: 40px 0;}
.mgnL { margin: 80px 0;}
.pdgS { padding: 20px;}
.pdgM { padding: 40px;}
.pdgL { padding: 80px;}
@media only screen and (max-width:768px){
  .mgnS { margin: 10px 0;}
  .mgnM { margin: 20px 0;}
  .mgnL { margin: 40px 0;}
  .pdgS { padding: 10px;}
  .pdgM { padding: 20px;}
  .pdgL { padding: 40px;}
}

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

/*text*/
.textBigBold { font-size: 2.4rem; font-weight: 700; line-height: 1.75;}

/*indent*/
.indent1 { padding-left: 1rem;}/*約10px*/
.indent2 { padding-left: 2rem;}/*約20px*/
/*一字左に出す*/
.textOutdent { text-indent: -1em; padding-left: 1em; }

/*フォーム*/
input { border: solid 1px #999; padding: 10px; font-size: 1.4rem;}
textarea { border: solid 1px #999; padding: 10px; font-size: 1.4rem;}
select { font-size: 1.4rem;}
input[type="submit"] { width: 20%; padding: 10px; margin: 10px; background: #ccc; color: #000; border: none; border-radius: 0; font-size: 1.4rem;}
input[type="reset"] { width: 20%; padding: 10px; margin: 10px; background: #ccc; color: #000; border: none; border-radius: 0; font-size: 1.4rem;}
@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;}
}



/*ハンバーガーメニュー*/
.hamburger { display: block; width: 70px; height: 60px; cursor: pointer; text-align: center; background: #888; position: absolute; right: 0; top: 0; z-index:20; }
.hamburger span { display: block; position: absolute; width: 39px; height: 3px; border-radius: 1px; right: 16px; background :#fff; -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: 13px;}
.hamburger span:nth-child(2) { top: 28px;}
.hamburger span:nth-child(3) { top: 42px;}
.hamburger p { position: absolute; right: 17px; top: 38px; color: #fff; font-weight: 700; font-size: 10px; text-align: center; line-height: 1;}
.hamburger.active span:nth-child(1) { width: 46px; top: 29px; left: 8px;-webkit-transform: rotate(-45deg);-moz-transform : rotate(-45deg);transform: rotate(-45deg); background: #fff;}
.hamburger.active span:nth-child(2),
.hamburger.active span:nth-child(3) { width: 46px; top: 29px; -webkit-transform: rotate (45deg); -moz-transform: rotate(45deg); transform: rotate(45deg); background: #fff;}
.hamburgerMenu { display: block; background: #004096; z-index: 15; position: fixed; top: 0; right: -600px; width: 600px; height: 100%; padding: 0 20px; transition: 0.5s ease-in-out; box-shadow: 0 0 5px #999; overflow: hidden;}
.hamburgerMenu.active { display: block; overflow-y: auto; transition: 0.5s ease-in-out; right: 0;}
.hamburgerMenu ul { display: block; padding: 4rem; }
.hamburgerMenu ul li { width: 100%; margin: 2rem auto; }
.hamburgerMenu ul li a { width: 100%; color: #fff; font-weight: 600; font-size: 2.6rem; }
@media only screen and (max-width:768px){
  .hamburgerMenu { width: 80%; }

}


/*link*/
/*aタグに何が付いているかで付くものが変わります。contentの中身を変更することで好きな表示に出来ます。*/
.link[target="_blank"] { display: flex; align-items: center;}
.link[target="_blank"]:after { content: url(../images/external.svg); display: inline-block; width: 15px; /*height: 15px;*/ margin-left: 0.5em; transform: translateY(2px);}
.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: #2F2725; padding: 0px 5px; color: #fff; font-size: 1.2rem;}
.link[href$=".xlsx"]:after { content: "Excel"; display: inline-block; margin-left: 0.5em; background: #2F2725; padding: 0px 5px; color: #fff; font-size: 1.2rem;}
.link[href$=".pdf"]:after { content: "PDF"; display: inline-block; margin-left: 0.5em; background: #2F2725; padding: 0px 5px; color: #fff; font-size: 1.2rem; width: auto; height: auto; }

.linkText[href$=".pdf"] p:after { content: "PDF"; display: inline-block; margin-left: 0.5em; background: #2F2725; padding: 0px 5px; color: #fff; font-size: 1.2rem;}
.linkText img { transition: 0.5s;}
.linkText p { position: relative;}
.linkText p::before { content: ""; position: absolute; width: 30%; height: 3px; background: #2F2725; border-radius: 50px; bottom: -10px; left: 50%; transform: translateX(-50%); transition: 0.5s ease; opacity: 0;}
.linkText:hover p::before { opacity: 1;}
.linkText:hover img { opacity: 0.5;}
.link:hover { text-decoration: underline; text-decoration-color: #666; text-underline-offset: 4px; text-decoration-thickness: 2px;}

.urlText { text-decoration: underline;}
.urlText:hover { text-decoration: none; opacity: 0.8;}

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

@media only screen and (max-width:768px){
  .linkText[href$=".pdf"] p:after { font-size: 1.0rem;}
}

/*▶系　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;}
.arrowThin { position: relative;}
.arrowThin:after { content: ""; display: block; width: 41px; height: 11px; position: absolute; top: 50%; right: 30px; transform: translateY(-50%);  background-image: url(../images/arrow-thin.svg); background-repeat: no-repeat; background-size: contain;}
.arrowThin:hover:after { background-image: url(../images/arrow-thin-green.svg);}
.btnSquareGreen .arrowThin:after { background-image: url(../images/arrow-thin-white.svg);}
.btnSquareGreen:hover .arrowThin:after { background-image: url(../images/arrow-thin-green.svg);}
.arrowRound { display: flex; align-items: center;}
.arrowRound:before { content: ""; display: block; width: 9px; height: 14px; margin-right: 0.5em; background-image: url(../images/arrow-round.svg); background-repeat: no-repeat; background-size: contain; margin-top: 2px;}
.arrowAngular { display: flex; align-items: center;}
.arrowAngular:before { content: ""; display: block; width: 7px; height: 11px; margin-right: 0.5em; background-image: url(../images/arrow-round.svg); background-repeat: no-repeat; background-size: contain;}

/*headline*/
.headlineLeftBorder { font-size: 1.8rem; border-left: solid 5px #000; padding-left: 0.5em; margin-bottom: 10px;}
.headlineBig { font-size: 3.0rem; font-weight: bold; margin-bottom: 15px;}
.headlineBorderBoth { display: flex; justify-content: center; align-items: center; gap: 1em; font-size: 2.3rem; font-weight: 600; line-height: 1.5; text-align: center; margin: 10px 0 50px;}
.headlineBorderBoth::before { content: ""; display: block; width: 2px; height: 25px; background: #000; border-radius: 2px; margin-top: 2px;}
.headlineBorderBoth::after { content: ""; display: block; width: 2px; height: 25px; background: #000; border-radius: 2px; margin-top: 2px;}
.headlineBorderCenter { display: flex; justify-content: center; gap: 2em; align-items: center; font-size: 2.5rem; font-weight: 700; margin: 80px 0 20px;}
.headlineBorderCenter::before { content: ""; width: auto; height: 2px; flex-grow: 1; background: #FFA122}
.headlineBorderCenter::after { content: ""; width: auto; height: 2px; flex-grow: 1; background: #FFA122}
.headlineBorderCenter.fcGreen::before { background-color: #AEC954}
.headlineBorderCenter.fcGreen::after { background-color: #AEC954}
.headlineBorderCenter.fcBlue::before { background-color: #68B5EC}
.headlineBorderCenter.fcBlue::after { background-color: #68B5EC}
.headlineBorderCenter.fcBlack::before { background-color: #68B5EC}
.headlineBorderCenter.fcBlack::after { background-color: #68B5EC}
.headlineBold { font-size: 2.3rem; font-weight: 700; color: #fff; margin-bottom: 20px;}
.headlineBorderBottom { width: 100%; max-width: 85%; min-width: 1000px; font-size: 2.0rem; font-weight: 700; border-bottom: solid 2px #000; padding: 0 0 5px; margin: 0 auto 20px;}
.headlineLeftLine { border-left: 10px solid #68B5EC; padding-left: 10px; font-size: 1.8rem; font-weight: 700;}

@media only screen and (max-width:768px){
  .arrowThin:after { width: 24px; }
  .headlineBorderBottom { min-width: auto;}
}

.appear { animation: appear 0.5s ease forwards;}
@keyframes appear {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


/*font*/
.fsS { font-size: 1.2rem;}
.fsM { font-size: 1.6rem;}
.fsL { font-size: 2.0rem;}
.fsLL { font-size: 3.0rem;}
.fcWhite { color: #fff;}
.fcBlack { color: #333;}
.fcRed { color: #970000;}
.fcOrange { color: #FFA122;}
.fcGreen { color: #AEC954;}
.fcBlue { color: #0b7b92;}
@media only screen and (max-width:768px){
  .fsM { font-size: 1.5rem;}
  .fsL { font-size: 1.8rem;}
  .fsLL { font-size: 2.0rem;}
}

/*border-color*/
.bcOrange { border-color: #FFA122;}
.bcGreen { border-color: #AEC954;}
.bcBlue { border-color: #0b7b92;}

/*background*/
.bgWhite { background-color: #fff;}
.bgBlack { background-color: #000;}
.bgOrange { background-color: #FFA122;}
.bgGreen { background-color: #AEC954;}
.bgBlue { background-color: #0b7b92;}
.bgBlue2 { background-color: #33b2db;}