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

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

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

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

a:hover { opacity: 0.5;}
a {text-decoration: none; color: #000000; font-size: 1.4rem;  line-height: 1.5;}

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

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

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

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

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

/*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;}

/*background*/
.bgWhite { background-color: #fff;}
.bgBlack { background-color: #000;}

/*フォーム*/
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;}
}

/*parts*/
.btn { display: block; width: 200px; text-align: center; background: #000; padding: 10px; border-radius: 10px; color: #fff; cursor: pointer;}
.btn:hover { opacity: 0.5;}

/*ハンバーガーメニュー*/
.hamburger { display: block; width: 55px; height: 55px; cursor: pointer; text-align: center; z-index:11; background-color: #fff; border-radius: 5px; position: fixed; right: 15px; top: 15px;}
.hamburger span {display: block; position: absolute; width: 36px; height: 3px ; left: 9px; background :#000; -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: 15px;}
.hamburger span:nth-child(2) { top: 27px;}
.hamburger span:nth-child(3) { top: 39px;}
.hamburger.active span:nth-child(1) { top: 27px; left: 9px;-webkit-transform: rotate(-45deg);-moz-transform : rotate(-45deg);transform: rotate(-45deg);}
.hamburger.active span:nth-child(2),
.hamburger.active span:nth-child(3) { top: 27px; -webkit-transform: rotate (45deg); -moz-transform: rotate(45deg); transform: rotate(45deg);}
.gMenu { background: #999; 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;}
.gMenu.active { display: block; overflow-y: auto; padding: 2%; transition: 0.5s ease-in-out; top: 0;}


/*link*/
/*aタグに何が付いているかで付くものが変わります。contentの中身を変更することで好きな表示に出来ます。*/
.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: #ff0000; padding: 0px 5px; border-radius: 5px; color: #fff; font-size: 1.2rem;}

.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.0rem; font-weight: bold; margin-bottom: 10px;}

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