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



.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: 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: #000000; font-size: 1.4rem;  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%; }

.inner { width: 100%; max-width: 1100px; 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;
  }
}




/*20231017_tsaito_add*/
/* GO2TOP button */
#page-top { position:fixed; bottom:0px; right:0px; /*font-size: 77%;*/ z-index:100; }
#page-top span { display:none; }
#page-top a { text-decoration:none; color:#fff;padding:0; text-align:center; display:block; border-radius:12px; }
#page-top a img { display:block; width:70px; height:auto; margin:0 0 20px 0; }

/*---ハンバーガーメニュー---*/
.menu-icon { position: fixed; top: 0; right: 0; z-index: 9000; }
.menu-icon .menu { width: 70px; height: 70px; margin: 0; }
.menu-icon .menu a { display: block; height: 100%; text-align: center; line-height: 0; position: relative; }
.menu-icon .menu a .icon:before,.menu-icon .menu a .icon:after, .menu-icon .menu a .icon span { display: block; content: ""; position: absolute; top: 40%; left: 0; right:0; margin:auto; width: 30px; height: 2px; background: #fff; transition: .3s; }
.menu-icon .menu a .icon:before { margin-top: -10px; }
.menu-icon .menu a .icon span { margin-top: 0px; }
.menu-icon .menu a .icon:after { margin-top: 10px; }
.menu-icon .menu a.close .icon { background: transparent; }
.menu-icon .menu a.close .icon:before { margin-top: 0; }
.menu-icon .menu a.close .icon:after { margin-top: 0; }
.menu-icon .menu a.close .icon:before { transform: rotate(-45deg); -webkit-transform: rotate(-45deg); }
.menu-icon .menu a.close .icon span { transform: rotate(-45deg); -webkit-transform: rotate(-45deg); }
.menu-icon .menu a.close .icon:after { transform: rotate(-135deg); -webkit-transform: rotate(-135deg); }
.menu-icon .menu a .text{ display: block; position: absolute; bottom: 30%; left: 0; right: 0; margin: auto; color:#fff; font-size: 75%; font-weight: bold; letter-spacing: 0.5pt; text-align:center; }
#mdl-nav { position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: auto; margin: auto; padding: 30px 30px 60px; z-index:2000; display: none; background-color:rgba(1, 77, 131, 0.9); z-index: 5000; }
.nav-first { margin: 2rem 0 0.7rem 0; padding: 0.5rem 0; }
.first-item { font-size: 1.3rem; font-weight: 600; display: flex; align-items: center; justify-content: flex-start; padding: 0.5rem; margin: 0.7rem; background: #fff; color: #0088b8; text-decoration: none; border-radius: 5px; }
.nav-first-wrap { line-height: 1.6; }
.nav-first-wrap li { margin: 0.7rem 0 0.7rem 2rem; }
.nav-first-wrap li a { padding: 1rem; color: #fff; font-size: 1.3rem; font-weight: 500; text-decoration: none; }
.first-item img { height: 26px; }
.second-item { display: block; padding: 1rem; color: #fff; font-size: 1.4rem; font-weight: 500; text-decoration: none; background:#0088b8; }