@charset "utf-8";
/*basis*/
body { font-family: "Zen Maru Gothic", "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:820px){
  .pcOnly { display: none;}
  .spOnly { display: inline-block;}
}

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

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

a:hover { /*opacity: 0.5; transition: all .5s cubic-bezier(.165,.84,.44,1);*/}
a {text-decoration: none; color: #000000; 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%; }

.contentsBox { margin-top: 3%;}

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

/*margin・padding*/
.mgnS { margin: 20px 0;}
.mgnM { margin: 40px 0;}
.mgnL { margin: 80px 0;}
.mLa { margin-left: auto!important;}
.mRa { margin-right: auto!important;}
.mgnBS { margin-bottom: 20px;}
.mgnBM { margin-bottom: 40px;}
.mgnBL { margin-bottom: 80px;}
.mgnNegS { margin: -20px;}
.mgnNegM { margin: -40px;}
.mgnNegL { margin: -80px;}
.pdgS { padding: 20px;}
.pdgM { padding: 40px;}
.pdgL { padding: 80px;}
.pdgBS { padding-bottom: 20px;}
.pdgBM { padding-bottom: 50px;}
.pdgBL { padding-bottom: 80px;}
@media only screen and (max-width:820px){
  .mgnS { margin: 10px 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:820px){
  .indent1 { padding-left: 0px;}
}

/*background*/
.bgWhite { background-color: #fff;}
.bgBlack { background-color: #000;}
.bgGray { background-color: #F4F5F4;}
.bgBorder { background: url( ../images/bg-border.jpg ); padding: 50px;}
@media only screen and (max-width:820px){
  .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; padding: 10px;}
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:820px){
  /*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;}

.btnWhite { max-width: 300px;}
.btnWhite a { display: block; max-width: 300px; text-align: center; padding: 18px; color: #fff; border: solid 1px #fff; position: relative;}

.btnColor { width: 320px;}
.btnColor + .btnColor { margin-top: 30px;}
.btnColor a { display: block; width: 100%; font-size: 1.9rem; font-weight: 400; color: #fff; background: #000; text-align: center; border-radius: 50px; padding: 18px; transition: 0.5s;}
.btnClBlue a { background-color: #4572ff;}
.btnClBlue a:hover { background-color: #00c0ff; transition: 0.5s;}
.btnClRightBlue a { background-color: #00c0ff;}
.btnClRightBlue a:hover { background-color: #4572ff;}
.btnClRightWhite a { background-color: #fff; color: #000; }

.hexagonBtn { width: 80%; max-width: 350px; clip-path: polygon(20px 0%, calc(100% - 20px) 0%, 100% 50%, calc(100% - 20px) 100%, 20px 100%, 0% 50%); text-align: center; margin: 40px auto;}
.hexagonBtn a { display: block; font-size: 1.8rem; font-weight: 700; color: #fff; padding: 10px 0; background: #96C749;}
.hexagonBtn a:hover { opacity: 0.7;}
.hexagonBtnYellow a { background: #FFEB00; color: #000;}
.linkEnColor a { background: #58C2D1;}

/*複数の時*/
.btnBox { display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 30px 20px; }
.btnBox .btnColor { margin: 0;}

/*ボタン位置*/
.btnC { margin: 0 auto;}

/*wordpressとの整合性*/
.btnColor .wp-block-button { display: block; width: 100%;}
@media only screen and (max-width:820px){
  .btnBlack { margin: 10px auto; width: 100%; max-width: 300px;}
  .btnBlack a { font-size: 1.6rem;}
  .btnWhite a { padding: 9px 18px;}

  .hexagonBtn a { font-size: 1.6rem;}
  .wp-block-column .hexagonBtn { margin: 10px auto 0;}
}

/*text*/
.textN { font-size: 1.6rem; line-height: 1.7;}
.textB { font-size: 1.8rem; line-height: 1.5.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:820px){
  .hamburger { display: block; width: 60px; height: 50px; cursor: pointer; text-align: center; z-index:11; position: absolute; top: 15%; right: 4%; border-radius: 0 0 0 10px; background: #96C749; transition: 0.5s ease-in-out; clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);}
  .hamburger span { display: block; position: absolute; width: 27px; height: 4px; right: 16px; background :#fff; 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: 12px;}
  .hamburger span:nth-child(2) { top: 24px;}
  .hamburger span:nth-child(3) { top: 36px;}
  .hamburger.active { border-color: #fff; transition: 0.5s ease-in-out; background: #fff;}
  .hamburger.active span:nth-child(1) { width: 27px; top: 23px; left: 16px;-webkit-transform: rotate(-45deg);-moz-transform : rotate(-45deg);transform: rotate(-45deg); background: #96C749;}
  .hamburger.active span:nth-child(2),
  .hamburger.active span:nth-child(3) { width: 27px; top: 23px; -webkit-transform: rotate (45deg); -moz-transform: rotate(45deg); transform: rotate(45deg); background: #96C749;}
  .hamburgerMenu { background: url( ../images/bg-border.jpg );  z-index: 10; position: fixed; /*right: -310px;*/ top: 0; left: 0; width: 100%; height: 100%; transition: 0.5s ease-in-out; box-shadow: 0 0 5px #999; padding: 20px;}
  .hamburgerMenu.active { display: block; transition: 0.5s ease-in-out;}
  .hMenu { width: 100%; height: 100%; background: #CAE3A4; padding: 20px; position: relative;}
  .hMenuList { padding: 30px 0 100px;}
  .hMenuList li { font-size: 2.0rem; border-bottom: dotted 2px #96C749; margin-bottom: 5px;}
  .hMenuList li a { display: block; width: 100%; padding: 7px;}
  .hMenuHachi { width: 26%; position: absolute; bottom: 80px; right: 0;}
  .hMenuTell { position: absolute; bottom: 20px; background: #FFEB00; width: calc(100% - 40px); text-align: center; padding: 5px 0;}
  .hamburgerHachi { width: 65%; margin: 0 auto; padding: 5px 0;}
  .hamburgerText { position: absolute; bottom: 5px; width: 100%;}
  .hamburgerText::after { content: "MENU"; font-size: 1.0rem; color: #fff; text-align: center; font-weight: 700; letter-spacing: 0.1em;}
  .hamburger.active .hamburgerText::after { content: "CLOSE"; color: #96C749;}
}


/*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: #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-bottom: 10px;}
.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;}

.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*/
.headlineBold { font-size: 3.2rem; font-weight: 700; margin-bottom: 20px; letter-spacing: 0.5rem;}

.headlineUnderLine { font-size: 3.3rem; font-weight: 700; display: flex; justify-content: center;align-items: center; gap: 0.5em; margin-bottom: 60px;}
.headlineUnderLine span { max-width: calc( 100% - (60px + 1em)); position: relative; z-index: 1;}
.headlineUnderLine span::after { content: ""; display: block; width: 106%; height: 20px; border-radius: 10px; position: absolute; bottom: 0; left: -3%; background: #FFEB00; z-index: -1;}
.headlineUnderLine::before { content: ""; display: block; width: 30px; height: 66px; background: url(../images/focus-left.svg); background-size: contain;}
.headlineUnderLine::after { content: ""; display: block; width: 30px; height: 66px; background: url(../images/focus-right.svg); background-size: contain;}
.headlineTopFocus { display: flex; justify-content: center; font-family: "Kiwi Maru", serif; font-size: 3.2rem; position: relative; margin: 50px 0 10px;}
.headlineTopFocus::before { content: ""; display: block; width: 35px; height: 30px; background: url(../images/focus-top.svg); background-size: contain; position: relative; top: -20px; right: -10px;}
.headlineTopFocus.pink { font-size: 3.2rem;}
.headlineTopFocus.blue { font-size: 3.2rem;}
.headlineTopFocus.pink::before { background-image: url(../images/focus-top-pink.svg);}
.headlineTopFocus.blue::before { background-image: url(../images/focus-top-blue.svg);}
.headlineSquare { width: 30%; min-width: 385px; margin: -170px auto 50px; background: #FFCA4C; padding: 0 0 20px 0; font-family: "Kiwi Maru", serif; font-size: 4.0rem; line-height: 1.2; color: #fff; text-align: center; position: relative; z-index: 0;}
.headlineSquare::before { content: ""; display: block; width: 100%; height: 100%; background: #FFB400; position: absolute; top: -10px; left: -10px; z-index: -1;}
.headlineSquare.pink { background: #F8C6CD;}
.headlineSquare.pink::before { background: #F88EA4;}
.headlineSquare.blue { background: #8AD4DF;}
.headlineSquare.blue::before { background: #58C2D1;}
.headlineBottomBorder { font-family: "Kiwi Maru", serif; font-size: 3.5rem; color: #FFB400; border-bottom: solid 1px #FFB400; text-align: center; margin-bottom: 30px;}
.headlineBottomBorder span { font-size: 2.2rem; vertical-align: baseline;}
.headlineBottomBorder.pink { color: #F88EA4; border-color: #F88EA4;}
.headlineBottomBorderSmall { font-family: "Kiwi Maru", serif;  color: #000000; border-bottom: dashed 2px #58C2D1; text-align: center; margin-bottom: 30px; text-align: left; font-size: 3.0rem; padding: 5px 5px 5px 10px;}
.headlineBig { font-size: 4.0rem; text-align: center; color: #58C2D1; font-weight: 700; margin-bottom: 40px;}
.headlineBig span { font-size: 2.6rem;}
.headlineBig.orange { color: #FFB400;}
.headlineBackground { background: #abe0e8; font-size: 2.4rem; font-weight: 700; padding: 10px 30px; margin: 40px 0 20px;}
@media only screen and (max-width:820px){
  .headlineBold { font-size: 2.2rem; letter-spacing: 0.3rem;}
  .headlineUnderLine { font-size: 2.6rem; margin-bottom: 30px;}
  .headlineUnderLine::before { width: 26px; height: 58px; background-repeat: no-repeat}
  .headlineUnderLine::after { width: 26px; height: 58px; background-repeat: no-repeat}
  .headlineTopFocus { font-size: 2.8rem;}
  .headlineTopFocus.pink { font-size: 2.6rem;}
  .headlineTopFocus.blue { font-size: 2.6rem;}
  .headlineSquare { width: auto; min-width: 30%; max-width: 80%; font-size: 3.5rem;}
  .headlineBottomBorder { font-size: 2.2rem; margin-bottom: 20px; font-weight: 700;}
  .headlineBottomBorder span { font-size: 2.2rem; display: block; font-weight: 500;}
  .headlineBottomBorderSmall { font-size: 2.0rem; margin-bottom: 20px;}
  .headlineBig { font-size: 2.4rem;}
  .headlineBig span { font-size: 2.0rem;}
  .headlineBackground { font-size: 2.0rem; padding: 10px 15px;}
}


/*table*/
.tableBorder { width: 100%; border-collapse: collapse;}
.tableBorder > tbody > tr > th { width: 20%; font-size: 2.0rem; border: solid 1px #F88EA4; border-left: none; border-right: none; background: #FCCCD6; padding: 20px 30px; vertical-align: middle;}
.tableBorder > tbody > tr > td { width: 80%; font-size: 2.0rem; border: solid 1px #F88EA4; border-left: none; border-right: none; padding: 20px 30px;}
.tableBorder td .colored { color: #F88EA4;}
.tableBorder td .small { font-size: 1.2rem;}
.tableDotted { width: 90%; margin: 10px 0;}
.tableDotted tr { /*border: dotted 2px #F88EA4; border-left: none; border-right: none;*/}
.tableDotted th { background: #FDDFE5; width: 50%; padding: 5px; font-size: 1.6rem; border: dotted 2px #F88EA4; border-left: none; border-right: none; vertical-align: middle;}
.tableDotted td { /*width: 20%;*/ padding: 5px 15px; font-size: 1.6rem; border: dotted 2px #F88EA4; border-left: none; border-right: none; vertical-align: middle;}
.tableDotted .small { font-size: 1.2rem;}
.tableSmall { width: 90%; margin: 10px 0;}
.tableSmall tr { /*border: dotted 2px #F88EA4; border-right: none; border-left: none;*/}
.tableSmall th { font-size: 1.4rem; width: auto; padding: 5px 10px; border: dotted 2px #F88EA4; border-left: none; background: #FCCCD6; vertical-align: middle;}
.tableSmall td { font-size: 1.4rem; width: auto; padding: 5px 10px; border: dotted 2px #F88EA4; text-align: center; vertical-align: middle;}
.tabelSide { width: 80%; border-collapse: collapse; margin: 10px 0;}
.tabelSide th { font-size: 1.8rem; border: solid 1px #58C2D1; background: #abe0e8; text-align: center; vertical-align: middle;}
.tabelSide td { font-size: 1.6rem; border: solid 1px #58C2D1; text-align: center; vertical-align: middle;}
.tableTitle { font-size: 2.6rem; font-weight: 700; text-align: left; margin: 50px 0 20px; color: #F88EA4;}
@media only screen and (max-width:820px){
  .tableBorder { display: block; width: 100%;}
  .tableBorder > tbody { display: block; width: 100%;}
  .tableBorder > tbody > tr { display: block; width: 100%;}
  .tableBorder > tbody > tr > th { display: block; width: 100%; font-size: 1.8rem; padding: 10px 20px; text-align: left;}
  .tableBorder > tbody > tr > td { display: block; width: 100%; font-size: 1.6rem; padding: 20px; border: none;}
  .tableTitle { font-size: 2.6rem; text-align: center;}

  .tableDotted { width: 100%; border-collapse: separate; border-spacing: 0;}
  .tableDotted th { width: auto; font-size: 1.4rem;}
  .tableDotted tr + tr th { border-top: none;}
  .tableDotted td { width: auto; font-size: 1.4rem; text-align: center;}
  .tableDotted tr + tr td { border-top: none;}
  .tableSmall { width: 100%; border-collapse: separate; border-spacing: 0;}
  .tableSmall th { padding: 5px; /*border: dashed 2px #F88EA4;*/ border-left: none;}
  .tableSmall tr + tr th { border-top: none;}
  .tableSmall tr th + th { border-left: none;}
  .tableSmall td { padding: 5px;/* border: dashed 2px #F88EA4;*/ border-top: none; border-left: none;}
  .tableSmall tr td + td { border-left: none;}

  .tabelSide { width: 100%;}
  .tabelSide th { font-size: 1.4rem; padding: 10px;}
  .tabelSide td { font-size: 1.4rem; padding: 10px;}
  .tabelSide + .small { font-size: 1.4rem;}
}

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

/*scroll_up ｜下から上へ出現*/
.scroll_up { transition: 0.5s ease-in-out; transform: translateY(30px); opacity: 0; }
.scroll_up.on { transform: translateY(0); opacity: 1.0; }

/*scroll_down ｜上から下へ出現*/
.scroll_down { transition: 0.5s ease-in-out; transform: translateY(-30px); opacity: 0; }
.scroll_down.on { transform: translateY(0); opacity: 1.0; }

/*scroll_left ｜左から出現*/
.scroll_left { -webkit-transition: 0.5s ease-in-out; -moz-transition: 0.5s ease-in-out; -o-transition: 0.5s ease-in-out; transition: 0.5s ease-in-out; transform: translateX(-50px); opacity: 0; filter: alpha(opacity=0); -moz-opacity: 0; }
.scroll_left.on { opacity: 1.0; filter: alpha(opacity=100); -moz-opacity: 1.0; transform: translateX(0); }

/*scroll_right ｜右から出現*/
.scroll_right { -webkit-transition: 0.5s ease-in-out; -moz-transition: 0.5s ease-in-out; -o-transition: 0.5s ease-in-out; transition: 0.5s ease-in-out; transform: translateX(50px); opacity: 0; filter: alpha(opacity=0); -moz-opacity: 0; }
.scroll_right.on { opacity: 1.0; filter: alpha(opacity=100); -moz-opacity: 1.0; transform: translateX(0); }