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

.innerS { width: 100%; max-width: 1180px; min-width: 1000px; margin: 0 auto; padding: 0 15px;}
.innerL { width: 100%; max-width: 1310px; min-width: 1000px; margin: 0 auto; padding: 0 15px;}
@media only screen and (max-width:768px){
  p { font-size: 1.2rem; }
  a { font-size: 1.2rem; }
  .innerS { width: 90%; min-width: auto; padding: 0;}
  .innerL { width: 90%; min-width: auto; padding: 0;}
}

/*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;}
.fsLL { font-size: 3.0rem;}
.fcWhite { color: #fff;}
.fcBlack { color: #000;}
.fcRed { color: #970000;}
@media only screen and (max-width:768px){
  .fsM { font-size: 1.5rem;}
  .fsL { font-size: 1.8rem;}
  .fsLL { font-size: 2.0rem;}
}

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

/*background*/
.bgWhite { background-color: #fff;}
.bgBlack { background-color: #000;}
.bgGrayWhite { background: linear-gradient(#f5f5f5 0px 400px, #ffffff 400px 100%);}
.bgGray { background-color: #f5f5f5; }
.bgDotGray { background-color: #f5f5f5; background-image: url(../images/dot-gray.svg); background-size: 41px; background-position: -25px 8px;}

/*フォーム*/
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;}
.btnSquare { width: 450px; text-align: center; margin: 80px auto;}
.btnSquare a { display: block; font-size: 1.6rem; padding: 30px 0; border: solid 1px #000; transition: 0.5s ease; position: relative;}
.btnSquare a:hover {  border: solid 1px #66cc33; transition: 0.3s ease; }
.btnSquare a::after { right: 50px; transition: 0.5s ease;}
.btnSquare a::before { content: ""; position: absolute; width: 70px; height: 3px; background: #66cc33; border-radius: 50px; bottom: 10px; left: 50%; transform: translateX(-50%); transition: 0.5s ease; opacity: 0;}
.btnSquare a:hover::after { right: 15px; transition: 0.5s ease;}
.btnSquare a:hover::before { opacity: 1;}
.btnSquareGreen a { background: #66cc33; border-color: #66cc33; padding: 20px 0; letter-spacing: 4px; color: #fff;}
.btnSquareGreen a:hover { background: #fff; color: #000; border: solid 1px #66cc33;}
.btnSquareSmall { width: 60%; text-align: center; margin: 20px auto 0;}
.btnSquareSmall a { display: block; font-size: 1.4rem; padding: 15px 0; border: solid 1px #000; transition: 0.5s ease; position: relative;}
.btnSquareSmall a:hover {  border: solid 1px #66cc33; transition: 0.3s ease; }
.btnSquareSmall a::after { right: 30px; transition: 0.5s ease;}
.btnSquareSmall a::before { content: ""; position: absolute; width: 50px; height: 3px; background: #66cc33; border-radius: 50px; bottom: 10px; left: 50%; transform: translateX(-50%); transition: 0.5s ease; opacity: 0;}
.btnSquareSmall a:hover::after { right: 10px; transition: 0.5s ease;}
.btnSquareSmall a:hover::before { opacity: 1;}
@media only screen and (max-width:768px){
  .btnSquare a::before { display: none; }
  .btnSquare { width: 80%; margin: 20px auto;}
  .btnSquare a { font-size: 1.2rem; padding: 15px 0;}
  .btnSquare a::after { right: 15px; top: auto; bottom:10px;}
  .btnSquareSmall a { font-size: 1.2rem; padding: 10px 0;}
  .btnSquareSmall a::after { width: 30px; right: 10px; top: auto; bottom: 5px;}
}

/*ハンバーガーメニュー*/
.hamburger { display: none;}
.hamburgerMenu { display: none;}
@media only screen and (max-width:768px){
  .hamburger { display: block; width: 100%; height: 100%; cursor: pointer; text-align: center; z-index:15;  /*border-radius: 5px; position: fixed; right: 15px; top: 15px;*/ position: relative;}
  .hamburger span {display: block; position: absolute; width: 25px; height: 3px ; left: 50%; transform: translateX(-50%); 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: 7px;}
  .hamburger span:nth-child(2) { top: 15px;}
  .hamburger span:nth-child(3) { top: 23px;}
  .hamburger.active span:nth-child(1) { top: 7px; left: 46%; -webkit-transform: rotate(-45deg) translateX(-50%);-moz-transform : rotate(-45deg) translateX(-50%);transform: rotate(-45deg) translateX(-50%);}
  .hamburger.active span:nth-child(2),
  .hamburger.active span:nth-child(3) { top: 25px; left: 47%; -webkit-transform: rotate (45deg) translateX(-50%); -moz-transform: rotate(45deg) translateX(-50%); transform: rotate(45deg) translateX(-50%);}
  .hamburger p { width: 100%; text-align: center; color: #fff; font-size: 1.0rem; line-height: 1.1; position: absolute; bottom: 0;}
  .hamburgerMenu { background: #F5F5F5; background-repeat: no-repeat; z-index: 15; position: fixed; top: -100%; left: 0; width: 100%; height: 100%; padding: 5%; transition: 0.5s ease-in-out; overflow: hidden;}
  .hamburgerMenu.active { display: block; overflow-y: auto; transition: 0.5s ease-in-out; top: 0;}

  /*.hamburgerMenu .siteTitle { width: 50%; max-width: 250px;}*/
  .hamburgerMenu .languageArea { position: static; width: 18%; text-align: center;}
  /*.hamburgerMenu .languageArea figure { width: 70%;}*/

  .hamburgerListArea { padding: 20px 0 20px;}
  .hamburgerList li { border-bottom: solid 1px #66cc33;}
  .hamburgerList a { display: block; font-size: 1.4rem; font-weight: 500; padding: 10px; position: relative;}
  .hamburgerList a[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; transform: translateY(-50%);
  }
  .hamburgerList a:after { content: ""; display: block; width: 30px; height: 8px; position: absolute; top: 50%; right: 30px; }
  .hamburgerSubList > a { pointer-events: none; position: relative;}
  .hamburgerSubList > a:after { content: "＋"; position: absolute; display: block; width: 25px; height: 25px; line-height: 1; font-size: 2.0rem; top: 10px; right: 10px;}
  .hamburgerSubList.active > a:after { content: "－";}
  .hamburgerList .sub-menu { display: none;}
  .hamburgerList .sub-menu li { padding-left: 1em;}
  .hamburgerList .sub-menu li:nth-last-child(1) { border: none;}
  .hamburgerLinkList { display: flex; flex-wrap: wrap; padding-bottom: 10px; align-items: center;}
  .hamburgerLinkList li { width: 50%; margin-bottom: 10px;}
  .hamburgerLinkList li:nth-child(even) { border-left: solid 1px #999;}
  .hamburgerLinkList li a { display: block; text-align: center; font-size: 1.2rem; padding: 5px; justify-content: center; line-height: 1.2;}
  .hamburgerSnsArea { padding-bottom: 20px; width: 60%; margin: 0 auto; gap: 0; justify-content: space-between; padding-bottom: 60px;}
  .hamburgerText { padding-bottom: 10px;}
  .hamburgerText + .hamburgerText { padding-bottom: 20px;}
  img[src$=".svg"].hamburgerTextIcon { width: 20px; height: 20px;}

}


/*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: 2.0rem; font-weight: bold; margin-bottom: 10px;}
.headlineEnJa { text-align: center; padding-top: 30px; padding-bottom: 30px;}
.headlineEnJa .en { display: block; font-family: "Alata", sans-serif; font-size: 5.5rem; color: #66cc33; font-weight: 400; line-height: 1.2;}
.headlineEnJa .ja { display: block; font-size: 2.0rem; font-weight: 400;}
.headlineEnJaSmall .en { display: block; font-family: "Alata", sans-serif; font-size: 4.5rem; color: #66cc33; font-weight: 400;}
.headlineEnJaSmall .ja { display: block; font-size: 1.5rem; font-weight: 400;}
/*add_miyamoto*/
.headlineUnderline { font-size: 3rem; font-weight: 600; letter-spacing: 0.1rem; border-bottom: solid 3px #66cc33; margin: 1% 0; padding-bottom: 1%; }
.headlineCircleLeft { font-size: 2.5rem; font-weight: 500; display: flex; margin: 2% 0; align-items: center;}
.headlineCircleLeft::before { content: "●"; color:#66cc33; margin-right: 10px; }
.headlineCircleCenter { font-size: 2.5rem; font-weight: 500; text-align: center; display: flex;
justify-content: center; align-items: center; margin: 2% 0; }
.headlineCircleCenter::before { content: "●"; color:#66cc33; width: 3px; margin-right: 30px; }
.headlineBorderEXLeft { font-size: 2.2rem; font-weight: 500; display:flex; align-items:center; margin: 2% 0; }  
.headlineBorderEXLeft::after { margin-left:5px; border-top:2px solid #66cc33cc; content:""; flex-grow:1; }
.headlineBorderEXCenter { font-size: 2.2rem; font-weight: 500; display:flex; align-items:center; text-align:center; margin: 2% 0; }
.headlineBorderEXCenter::before { content:""; flex-grow:1; margin-right:5px; border-top:2px solid #66cc33; }
.headlineBorderEXCenter::after { content:""; flex-grow:1; margin-left:5px; border-top:2px solid #66cc33; }
.headlinebBorderColor { font-size: 1.8rem; font-weight: 500; display: inline-block; border:2px solid #66cc33; padding: 1%; margin: 2% 0;}
.headlinebBGColor { font-size: 1.8rem; font-weight: 500; background-color: #ecf2c7; padding: 1%; }
.headlineBorderEXLeftBK { display:flex; align-items:center; margin: 2% 0; }
.headlineBorderEXLeftBK::after { margin-left:5px; border-top:2px solid #000; content:""; flex-grow:1; }

.headlineIcon { display: flex; justify-content: center; align-items: center; gap: 1em; font-size: 2.2rem; padding: 40px 0; }
.headlineIcon img[src$=".svg"] { width: 30px;}
@media only screen and (max-width:768px){
  .arrowThin:after { width: 24px; }
  .headlineUnderline { font-size: 2.0rem; }
  .headlineBorderEXLeft { font-size: 1.8rem; }
  .headlineBorderEXCenter { font-size: 1.8rem; }
  .headlineCircleCenter { font-size: 1.8rem; }
  .headlineBorderEXLeft { font-size: 1.8rem; }
  .headlineBig { font-size: 1.6rem; } 
  .headlineEnJa .en { font-size: 3rem; } 
  .headlineIcon { font-size: 1.6rem; padding: 20px 0; }
  .headlineIcon img[src$=".svg"] { width: 20px;}
  .headlineCircleLeft { font-size: 1.8rem;}
  .headlinebBGColor { padding: 1% 2%;}
}

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