@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap');

/* CSS Document */
/* html all ----------------------------------------------------------- */
*,*:before,*:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

html { 
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 62.5%; /*rem算出をしやすくするために*/
  scroll-behavior: smooth;
  overflow: auto;
}

/* html end ----------------------------------------------------------- */

/* body ----------------------------------------------------------- */
body {
  margin: 0;
  padding: 0;
  font-size: clamp(1rem,1.6vw,16px);
  font-family: "Arial","Helvetica Neue","Noto Sans","Hiragino Sans","Meiryo","Hiragino Kaku Gothic ProN",system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 1px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  text-spacing-trim: space-all;
  word-break: break-word;
  background: #fff;
  color: #333;
}

/* image all */
img { vertical-align: middle;}

/* display */
.pc { display: initial;}
.sp { display: none;}

/* body end ----------------------------------------------------------- */

/* header ----------------------------------------------------------- */

header { margin: 20px auto 0;}
.logo { text-align: center;}
.logo img{ max-width: 1000px; width: 100%;}

/*header end ----------------------------------------------------------- */

/* base ----------------------------------------------------------- */
.wrapper{
  min-height: 100vh;
  position: relative;/*←相対位置*/
  padding-bottom: 50px;/*←footerの高さ*/
  box-sizing: border-box;/*←全て含めてmin-height:100vhに*/
  overflow: hidden;
}
.content {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  position: relative;
}

/* base end ----------------------------------------------------------- */

/* flexbox ----------------------------------------------------------- */
.flexbox,.flexbox ul{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0 20px;
  justify-content: space-around;
  align-items: flex-start;
}

/* flexbox end ----------------------------------------------------------- */

/* main ----------------------------------------------------------- */
.main {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  padding: 0;
}
.zero{ margin: 20px auto;}

/* section */
section{ padding: 0 20px;}

/* main ----------------------------------------------------------- */

/* font ----------------------------------------------------------- */
/* 明朝体 */
h1, h2, h3, h4, h5, h6,.btn-box {
  font-family: "Noto Serif", serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
}
/* ゴシック体 */
h1, h2, h3, h4, h5, h6, footer,.btn-box {
  font-family: "Noto Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

/* font end ----------------------------------------------------------- */

/* text ----------------------------------------------------------- */
/* font-size
その他= ***（px指定数）÷1000（mainの数値）×100＝vwの数字（小数点切り上げ）で計算 */
h1,.comingsoon-box{ font-size: clamp(2rem,3.2vw,32px);}
h1 > .number,.btn03 > .day{ font-size: clamp(1.75rem,2.8vw,28px);}
h2,.large.larger,.btn03 > .month{ font-size: clamp(1.5rem,2.4vw,24px);}
h3,.laege,.btn,#arrow a { font-size: clamp(1.17rem,2.0vw,18.72px);}
.btn03 > .year{ font-size: clamp(1.125rem,1.8vw,18px);}
h4{ font-size: clamp(1rem,1.6vw,16px);}
footer small{ font-size: clamp(0.9375rem,1.5vw,15px);}
.small{ font-size: clamp(0.875rem,1.4vw,14px);}

/* caption */
h1,h2,h3,h4,h5,h6,p { letter-spacing: 1px;}

/* <h1>～</h1> */
h1 {
  margin-bottom: 0;
  line-height: 1.2;
  text-align: center;
  color: #333;
}

/* <h2>～</h2> */
h2 {
  margin: 0 auto 20px;
  text-align: center;
  color: #333;
}

/* <h3>～</h3> */
h3 {
  padding-left: 12px;
  margin: 10px 0;
  border-bottom: 1px solid #999;
}

/* <h4>～</h4> */
h4 { padding-left: 12px; margin-bottom: 3px;}

/* <p>～</p> */
p { margin-bottom: 10px; padding: 0 20px;}

/* ＊ */
.note {
  position: relative;
  margin: 0 0 0 20px;
  padding-left: 25px;
}
.note::before {
  content: "＊";
  position: absolute;
  top: 0;
  left: 0;
}

/* text end ----------------------------------------------------------- */

/* link ----------------------------------------------------------- */
a {
  font-weight: 600;
  text-decoration: underline;
  color: #0D7330;
}
a:hover,a:active { color: #24A645;}
a img { border: 1px solid #fff;}
a img:hover { filter: brightness(120%);}

/* link end ----------------------------------------------------------- */

/* box ----------------------------------------------------------- */
/* box all:n-box */
.n-box{
  width: 100%;
  margin: 20px auto;
  padding: 20px 10px 10px;
  border-radius: 10px;
  border: 4px solid #D2D904;
  background: #fff;
}
.n-box > h4{
  margin: 0 auto 10px;
  padding: 0 10px;
  border-bottom: 2px solid #D2D904;
  background: none;
}
.n-box > h5{ 
  margin-left: 0;
  padding: 5px 10px;
  border-left: 8px solid #24A645;
  background: #C1D98F;
  color: #717071;
}
.n-box > h5::before{ content: "";}

/* box-border:color */
.n-box.att{ border-color: #dc143c;}
.n-box.att > h4{ border-color: #dc143c; color: #717071;}
.n-box.att > h5{ border-color: rgba(220,20,60,0.5); background: rgba(255,178,178,0.5);}
.n-box.smm{ border: 1px solid #DAC6CB; background: rgba(229,164,135,0.2);}
.n-box.smm > h4{ border-bottom: 1px solid #DAC6CB; color: #717071;}
.n-box.smm > h5{ border-left: 8px solid #D2D904; background: rgba(255,255,255,0.7);}

/* coming soon */
.comingsoon-box{
  max-width: 700px;
  width: 100%;
  margin: 50px auto;
  padding: 100px;
  border-radius: 20px;
  background: rgba(232,232,232,0.5);
  color: #a9a9a9;
}

/* 準備中アイコン */
.comingsoon-box .material-symbols-outlined.icon{ font-size: clamp(3rem,2.5vw,48px);}

/* メンテナンス中 */
.comingsoon-box.maintenance{ background: rgba(239,141,160,0.5); color: #dc143c;}

/* top-event */
#top-event.n-box{ margin-top: 0;}

/* box-width */
.w90{ max-width: 900px;}
.w70{ max-width: 700px;}

/* box end ----------------------------------------------------------- */

/* icon ----------------------------------------------------------- */
.material-symbols-outlined {
  font-variation-settings:
  'FILL' 1,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24;
  vertical-align: middle;
}

/* アイコン装飾用css */
.icon{ /* marginとpaddingはHP毎に調整 */
  margin: -5px 5px 0;
  padding: 0;
}
.icon.i-col{ color: #0D7330;}
.icon.i-cir{
  padding: 5px;
  border-radius: 50%;
  border: none;
  background: #24A645;
  color: #D2D904;
}
.icon.i-cir:hover{ background: #D2D904; color: #24A645;}

/* 特定の拡張子の場合自動で表示(白) */
[href$=".docx"].btn01::before,[href$=".doc"].btn01::before {
  display: inline-block;
  content: url("img/icon/word_icon.png");
  padding-right: 10px;
  vertical-align: middle;
}
[href$=".pdf"].btn01::before {
  display: inline-block;
  content: url("img/icon/pdf_icon.png");
  padding-right: 10px;
  vertical-align: middle;
}
[href$=".xlsx"].btn01::before {
  display: inline-block;
  content: url("img/icon/excel_icon.png");
  padding-right: 10px;
  vertical-align: middle;
}
[href$=".pptx"].btn01::before,[href$=".ppt"].btn01::before {
  display: inline-block;
  content: url("img/icon/pptx_icon.png");
  padding-right: 10px;
  vertical-align: middle;
}

/* image no-icon */
.no-icon .btn01::before{ content: ""; padding-right: 0;}

/* icon end ----------------------------------------------------------- */

/* button ----------------------------------------------------------- */
/* button-box | flyer-box */
.btn-box,.f-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  gap: 10px 20px;
  margin: 30px auto;
}

/* button-box | flyer-box image */
.btn-box a img,.f-box a img { border: 1px solid #fff;}
.f-box img{ max-width: 700px; width: 100%;}

/* flyer-box fine */
.flexbox .f-box{ flex-direction: column; flex-wrap: wrap;}

/* button all */
.btn,.btn01,.btn02,.btn03,button {
  display: inline-block;
  position: relative;
  max-width: 400px;
  width: 100%;
  padding: 2rem 1rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  line-height: 1.5;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1rem;
  border-radius: 100vh;
}

/* button arrow */
.btn::after{
  content: "";
  position: absolute;
  top: 50%;
  bottom: 0;
  right: 3rem;
  font-size: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: right 0.3s;
  width: 10px;
  height: 10px;
  border-top: solid 2px currentColor;
  border-right: solid 2px currentColor;
  transform: translateY(-50%) rotate(45deg);
}
.btn:hover::after{ right: 2.4rem;}

/* button01:dark-color */
.btn01{
  border: 1px solid #adadad;
  color: #fff;
}

/* button02:light color */
.btn02 {
  border: 1px solid #adadad;
  color: #484848;
}

/* button:03(deadline) */
#deadline.btn-box{
  justify-content: space-evenly;
  max-width: 600px;
  margin: 0 auto 30px;
}
.btn03 { 
  width: 150px;
  height: 150px;
  padding: 1rem;
  cursor: default;
  border-radius: 20px;
  background: #120000;
  color: #fff;
}
.btn03 > .day{ color: #D2D904;}
a.btn03 { cursor: pointer;}

/* button color */
.btn-1{ background: #24A645;}

/* icon button */
.btn-mw { background: #1F64C2;}
.btn-me { background: #0D6E38;}
.btn-pp { background: #BD3819;}
.btn-pdf { background: #EA0000;}

/* button:hover */
.btn01:hover,.btn02:hover{
  /* filter: hue-rotate(-15deg); */
  background: #D2D904;
  color: #fff;
}
.btn02:hover{ color: #333;}

/* button:width */
.btnw { max-width: 500px; width: 100%;}
.btn-pa{ padding: 1rem 4rem;}

/* button end ----------------------------------------------------------- */

/* arrow ----------------------------------------------------------- */
/*リンクを右下に固定*/
#arrow {
  position: fixed;
  bottom: 5%;
  right: 1%;
  z-index: 2;
   /*はじめは非表示*/
  opacity: 0;
  transform: translateY(100px);
}
#arrow a {
  /*天地中央にテキストを配置*/
  display: flex;
  align-items: center;
  justify-content: center;
  /*円の形状*/
  width: 60px;
  height: 60px;
  box-sizing: border-box;
  padding: 0 20px;
  line-height: 80px;
  text-align: center;
  text-decoration: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  border-radius: 50%;
  outline: none;
  border: 1px solid #24A645;
  background: #24A645;
  color: #fff;
}
#arrow a:hover { 
  border: 1px solid #D2D904;
  background: #D2D904;
  color: #24A645;
}

/*　上に上がる動き　*/
#arrow.upmove{ animation: UpAnime 0.5s forwards;}
@keyframes UpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }
  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/*　下に下がる動き　*/
#arrow.downmove{ animation: DownAnime 0.5s forwards;}
@keyframes DownAnime{
  from {
    opacity: 1;
  transform: translateY(0);
  }
  to {
    opacity: 1;
  transform: translateY(100px);
  }
}

/* arrow up */
a.arrow-up {
  display: block;
  position: relative;
  text-align: center;
  background: currentColor;
}
a.arrow-up::after {
  content: '';
  position: absolute;
  width: 0.7em;
  height: 0.7em;
  box-sizing: border-box;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  border-bottom: 0;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  transform: translateY(3px) rotate(-45deg);
  transform-origin: top right;
  top: 35%;
  bottom: 0;
  right: 50%;
}
a.arrow-up:hover::after{ transform: translateY(-5px) rotate(-45deg);}

/* arrow end ----------------------------------------------------------- */

/* deco ----------------------------------------------------------- */
/* text-deco */
.bold { font-weight: 700;}
.under{ text-decoration: underline;}
.line-th{ text-decoration: line-through;}
.color{ color: #0D7330;}
.gray{ filter: grayscale(100%);}
.red { color: #DC0509;}
.marker{ background: linear-gradient(transparent 50%,rgba(243,170,193,0.5) 50%);}

/* arrange */
.center{ text-align: center;}
.left{ text-align: left;}
.right{ text-align: right;}
.letter{ letter-spacing: 0.5rem;}

/* border */
.hr_b01{ margin: 10px 20px; border-top: 1px dashed #dadada;}
.hr_b02{ margin: 10px 20px; border-top: 1px dashed #D2D904;}
.hr_b03{ margin: 10px 20px; border-top: 1px dashed #C1D98F;}

/* deco end ----------------------------------------------------------- */

/* footer ----------------------------------------------------------- */
footer {
  width: 100%;
  margin: 0;
  padding: 20px 0;
  font-weight: 600;
  text-align: center;
}

/* footer end ----------------------------------------------------------- */

/* android・iPhone ----------------------------------------------------------- */

@media screen and (max-width: 768px) {
  /* body -------------------------------------- */
  .pc { display: none;}
  .sp { display: initial;}

  /* arrow -------------------------------------- */
  #arrow{ bottom: 2%;}
  #arrow a{ width: 50px; height: 50px;}
}

/* android・iPhone end ----------------------------------------------------------- */