@charset "utf-8";
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}:where([hidden]:not([hidden='until-found'])){display:none!important}:where(html){-webkit-text-size-adjust:none;color-scheme:dark light;tab-size:2}@media (prefers-reduced-motion:no-preference){:where(html:focus-within){scroll-behavior:smooth}}:where(body){line-height:1.5;font-family:system-ui,sans-serif;-webkit-font-smoothing:antialiased}:where(button){all:unset}:where(input,button,textarea,select){font:inherit;color:inherit}:where(textarea){resize:vertical;resize:block}:where(button,label,select,summary,[role='button'],[role='option']){cursor:pointer}:where(:disabled){cursor:not-allowed}:where(label:has(>input:disabled),label:has(+input:disabled)){cursor:not-allowed}:where(a){color:inherit;text-underline-offset:.2ex}:where(ul,ol){list-style:none}:where(img,svg,video,canvas,audio,iframe,embed,object){display:block}:where(img,picture,svg,video){max-inline-size:100%;block-size:auto}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(h1,h2,h3){line-height:calc(1em + 0.5rem);text-wrap:balance}:where(hr){border:none;border-block-start:1px solid;color:inherit;block-size:0;overflow:visible}:where(:focus-visible){outline:3px solid CanvasText;box-shadow:0 0 0 5px Canvas;outline-offset:1px}:where(:focus-visible,:target){scroll-margin-block:8vh}:where(.visually-hidden:not(:focus-within,:active)){clip-path:inset(50%)!important;height:1px!important;width:1px!important;overflow:hidden!important;position:absolute!important;white-space:nowrap!important;border:0!important}

/* common */
.nt400{ font-family: "noto-sans-cjk-jp", sans-serif; font-weight: 400; font-style: normal; }
.nt700{ font-family: "noto-sans-cjk-jp", sans-serif; font-weight: 700; font-style: normal; }
.tpmin{font-family: toppan-bunkyu-midashi-min-st, serif; font-weight: 900; font-style: normal; }
.brsp{ display: none;}

/* menu */
#floatmenubtn{ position:fixed; right: 0; top: 0; z-index: 1000; cursor: pointer; background: #3bc7bb; color:#FFF; line-height: 0; text-align: center; height: 50px; width: 50px; box-sizing: border-box; padding: 5px 0 0 0; }
#floatmenubtn:hover{ opacity: 0.7; }
#floatmenubtn .material-symbols-outlined{  font-size: 38px; }

#floatmenu{ display: none; width: 300px; position:fixed; right: 0; top: 0; z-index: 1000; }
#floatmenu #menuclose{ display: block; width: 300px; position:fixed; right: 0; top: 0; z-index: 2000; background: #3bc7bb; color:#FFF; line-height: 0; text-align: right; height: 50px; box-sizing: border-box; padding: 6px 0 0 0; }
#floatmenu #menuclose p{ display: inline-block; cursor: pointer; width: 50px; text-align: center; }
#floatmenu #menuclose p:hover{ opacity: 0.7; }
#floatmenu #menuclose .material-symbols-outlined{  font-size: 38px; }
#floatmenu ul{ display: block; background: #f2f2f2; margin: 0 0 0 0; padding:50px 10px 5px; }
#floatmenu ul li{ display: block; border-bottom: 1px solid #cccccc; font-size: 21px; line-height: 49px; }
#floatmenu ul li a{ text-decoration: none; display: block; padding: 0 0 2px 0; }
#floatmenu ul li a:hover{ opacity: 0.7; }
#floatmenu ul li:nth-last-of-type(1){ border-bottom: 0px; }

/* main */
#pearlpic{ display: block; font-feature-settings: "palt"; padding:46px 0 0 0; }
#pearlpic h1{ display: table; margin: 0 auto 50px; }
#pearlpic h1 span{ display: table-cell; vertical-align: middle; font-size: 0; line-height: 0; }
#pearlpic h1 strong{ display: table-cell; vertical-align: middle; font-size: 36px; letter-spacing: 4px; padding: 0 15px 7px; }

#pearlpic .lead{ display: block; margin: 0 auto 0; text-align: center; font-size: 18px; letter-spacing:2px; }
#pearlpic .lead a:hover{ text-decoration: none; }
.linkbtn{ background: #3bc7bb; display: inline-block; margin: 0 5px; border-radius: 5px; }
.linkbtn:hover{ opacity: 0.7; }
.linkbtn a{ color: #FFF; text-decoration: none; display: inline-block; padding: 5px 12px 8px; }

.midashibox{ display: table; width: 1060px; margin: 0 auto 40px; }
.midashibox h2{ display: table-cell; vertical-align: middle; width: 50%; padding:80px 0 0 0; }
.midashibox h2 span{ display:inline-block; border-left: 5px solid #3bc7bb; line-height: 1.1; padding: 0 0 0 15px; font-size: 30px; letter-spacing: 2px; }
.midashibox p{ display: table-cell; vertical-align: middle; width: 50%; text-align: right; padding:80px 0 0 0; }
.midashibox p a{ display:inline-block; background: url(https://jja.ne.jp/images/pearlpic/icon_zip.png) no-repeat 0 50%; line-height: 41px; padding: 0 0 0 47px; font-size: 18px; letter-spacing: 1px; }
.midashibox p a:hover{ text-decoration: none; opacity: 0.9; }

.imagearea{ display: block; width: 1060px; margin: 0 auto 0; clear: both; }
.imagearea::after { content: ""; display: block; clear: both; }
.imagearea dl{ display: block; width:200px; float: left; margin: 0 15px 20px 0; }
.imagearea dl:nth-of-type(5n){ margin: 0 0 20px 0; }
.imagearea dl dt{ display: block; margin: 0 0 8px 0; }
.imagearea dl dt:hover{ opacity: 0.7; }
.imagearea dl dd{ display: block; margin: 0 0 0 0; font-size: 17px; font-family: "noto-sans-cjk-jp", sans-serif; font-weight: 400; font-style: normal; letter-spacing: 1px; }

#contents_foot{ width: 1060px; margin: 0 auto 130px; padding:60px 0 0 0; }
#contents_foot .txt01{ display: block; margin: 0 auto 40px; font-size: 18px; letter-spacing:1px; }
#contents_foot ul{ display: table; width: 100%; }
#contents_foot ul li{ display: table-cell; width: 50%; }
#contents_foot ul li a img{ display:inline; }
#contents_foot ul li a:hover{ opacity: 0.7;}
#contents_foot ul li:nth-of-type(2){ text-align: right; }

/* footer */
footer{ clear: both; width: 100%; background: #dbf3f1; }
footer .footer_wrap{ width: 1060px; margin: 0 auto 0; position: relative; }
footer .footer_wrap dl{ display: table; height: 128px; }
footer .footer_wrap dl dt{ display: table-cell; vertical-align: middle; font-size: 20px; padding: 0 44px 0 0; }
footer .footer_wrap dl dt span{ color: #3bc7bb; font-size: 22px; font-weight: bold; }
footer .footer_wrap dl dd{ display: table-cell; vertical-align: middle; font-size: 0; line-height: 0; padding:0 15px 0 0; }
footer .footer_wrap dl dd a:hover{ opacity: 0.7; }
footer .footer_wrap .pagetop{ position: absolute; right: 0; top:-30px; }
footer .footer_wrap .pagetop a:hover{ opacity: 0.7; }
footer #copy{ background: #3bc7bb; text-align: center; color: #FFF; font-size: 18px; line-height: 60px; letter-spacing:1px; }

/* modal */
.modal{ display: none; height: 100vh; position: fixed; top: 0; width: 100%; z-index: 5000; }
.modal__bg{ background: rgba(0,0,0,0.8); height: 100vh; position: absolute; width: 100%; }
.modal__content{ background: #fff; left: 50%; padding: 15px; position: absolute; top: 50%; transform: translate(-50%,-50%); width: 550px; box-sizing: border-box; }
.modal__content .modal_close{ width: 100%; text-align: right; display: block; font-size: 0; line-height: 0; }
.modal__content .modal_close img{ display: inline; }
.modal__content .modal_close img:hover{ opacity: 0.7; }
.modal__content .dl_thumb{ padding:10px 0 0 0; text-align: center; margin: 0 0 15px 0; }
.modal__content .dl_thumb img{ display: inline; max-width: 250px; }
.modal__content .fileinfo { margin: 0 0 15px 0; }
.modal__content .filetxt { margin: 0 0 20px 0; }
.modal__content .dlbtn01 { text-align: center; margin: 0 0 0 0; }
.modal__content .dlbtn01:hover { opacity: 0.7; }
.modal__content .dlbtn01 img{ display: inline; }


@media screen and (min-width:768px) and ( max-width:1139px) {

  .midashibox{ width: 96%; margin: 0 auto 40px; }
  .midashibox h2{ width: 35%; }
  .midashibox h2 span{ border-left: 5px solid #3bc7bb; font-size: 28px; letter-spacing: 2px; }
  .midashibox p{ display: table-cell; vertical-align: middle; width: 65%; text-align: right; padding:80px 0 0 0; }
  .midashibox p a{ display:inline-block; background: url(https://jja.ne.jp/images/pearlpic/icon_zip.png) no-repeat 0 50%; background-size:auto 33px; line-height: 33px; padding: 0 0 0 37px; font-size: 16px; }
  .midashibox p a:hover{ text-decoration: none; opacity: 0.9; }
  
  .imagearea{ width: 96%; margin: 0 auto 0; clear: both; }
  .imagearea dl{ display: block; width:24%; float: left; margin: 0 0.5% 20px; }
  .imagearea dl:nth-of-type(5n){ margin: 0 0.5% 20px; }
  .imagearea dl dt{ display: block; margin: 0 0 5px 0; }
  .imagearea dl dt img{ width: 100%; }
  .imagearea dl dd{ font-size: 14px; letter-spacing: 1.5px; }
  
  #contents_foot{ width: 96%; margin: 0 auto 130px; padding:60px 0 0 0; }
  #contents_foot .txt01{ display: block; margin: 0 auto 40px; font-size: 16px; letter-spacing:1px; }
  #contents_foot ul{ display: table; width: 100%; }
  #contents_foot ul li{ display: table-cell; width: 50%; text-align: center; box-sizing: border-box; padding: 0 1%; }
  #contents_foot ul li:nth-of-type(2){ text-align: center; }
  #contents_foot ul li img{ width: 100%; }
  
  footer .footer_wrap{ width: 96%; margin: 0 auto 0; }
  footer .footer_wrap dl{ display: table; height: 128px; }
  footer .footer_wrap dl dt{ font-size:18px; padding: 0 44px 0 0; }
  footer .footer_wrap dl dt span{ font-size: 18px; }
  footer .footer_wrap dl dd{ display: table-cell; vertical-align: middle; font-size: 0; line-height: 0; padding:0 15px 0 0; }
  footer .footer_wrap .pagetop{ position: absolute; right: 0; top:-30px; }
  footer .footer_wrap .pagetop img{ width: 55px; }
  footer .footer_wrap .pagetop a:hover{ opacity: 0.7; }
  footer #copy{ font-size: 14px; }

}
@media screen and ( max-width:767px) {

  /* common */
  .brsp{ display: inline;}

  /* menu */
  #floatmenubtn{ height: 35px; width: 35px; padding: 4px 0 0 0; }
  #floatmenubtn .material-symbols-outlined{  font-size: 28px; }

  #floatmenu{ display: none; width: 60%;}
  #floatmenu #menuclose{ display: block; width: 60%; z-index: 2000; height:35px; padding: 3px 0 0 0; }
  #floatmenu #menuclose p{ width: 35px; }
  #floatmenu #menuclose .material-symbols-outlined{  font-size: 29px; }
  #floatmenu ul{ display: block; background: #f2f2f2; margin: 0 0 0 0; padding:40px 10px 5px; }
  #floatmenu ul li{ font-size: 20px; line-height: 49px; }
  #floatmenu ul li:nth-last-of-type(1){ border-bottom: 0px; }

  /* main */
  #pearlpic{ padding:36px 0 0 0; }
  #pearlpic h1{ display: table; margin: 0 auto 30px; }
  #pearlpic h1 span img{ width: 25px; }
  #pearlpic h1 strong{ font-size:26px; letter-spacing:2px; padding: 0 10px 0; }
  .linkbtn{ margin: 7px 3px 0; border-radius: 4px; }
  .linkbtn a{  padding: 5px 12px 7px; }
  
  #pearlpic .lead{ display: block; padding: 0 3% 0; margin: 0 auto 0; font-size: 16px; letter-spacing:1px; }

  .midashibox{ display: block; width: 94%; margin: 0 auto 20px; }
  .midashibox h2{ display: block; width: 100%; padding:40px 0 0 0; }
  .midashibox h2 span{ display:inline-block; border-left: 5px solid #3bc7bb; line-height: 1.1; padding: 0 0 0 12px; font-size: 20px; letter-spacing: 2px; }
  .midashibox p{ display: block; width: 100%; text-align: left; padding:20px 0 0 0; }
  .midashibox p a{ display:inline-block; background: url(https://jja.ne.jp/images/pearlpic/icon_zip.png) no-repeat 0 50%; background-size: 25px auto; line-height: 26px; padding:0 0 6px 32px; font-size: 16px; letter-spacing: 1px; }

  .imagearea{ display: block; width: 96%; margin: 0 auto 0; }
  .imagearea dl{ display: block; width:31%; float: left; margin: 0 1% 10px; }
  .imagearea dl:nth-of-type(5n){ margin: 0 1% 10px; }
  .imagearea dl dt{ display: block; margin: 0 0 0 0; }
  .imagearea dl dd{ display: none; }

  #contents_foot{ width: 94%; margin: 0 auto 100px; padding:30px 0 0 0; }
  #contents_foot .txt01{ margin: 0 auto 30px; font-size: 16px; letter-spacing:1px; }
  #contents_foot ul{ display: block; width: 100%; text-align: center; }
  #contents_foot ul li{ display:block; width: 100%; margin: 0 0 8px 0; }
  #contents_foot ul li:nth-of-type(2){ text-align: center; }

  /* footer */
  footer{ clear: both; width: 100%; background: #dbf3f1; }
  footer .footer_wrap{ width: 94%; margin: 0 auto 0; position: relative; }
  footer .footer_wrap dl{ display: table; height: 100px; }
  footer .footer_wrap dl dt{ font-size:15px; padding: 0 15px 0 0; }
  footer .footer_wrap dl dt span{ display: none; }
  footer .footer_wrap dl dd{ padding:0 10px 0 0; }
  footer .footer_wrap .pagetop{ position: absolute; right: 0; top:-20px; }
  footer .footer_wrap .pagetop img{ width: 40px;}
  footer .footer_wrap .pagetop a:hover{ opacity: 0.7; }
  footer #copy{ font-size: 12px; line-height: 22px; letter-spacing:0px; padding:15px 0 15px 0; }

  /* modal */
  .modal__content{ padding: 10px; width:80%; }
  .modal__content .modal_close img{ display: inline; width: 30px; }
  .modal__content .dl_thumb{ padding:10px 0 0 0; margin: 0 0 15px 0; }
  .modal__content .dl_thumb img{ display: inline; max-width: 200px; }
  .modal__content .fileinfo { margin: 0 0 15px 0; font-size: 14px; line-height: 25px; }
  .modal__content .filetxt { margin: 0 0 20px 0; font-size: 14px; line-height: 23px; }
  .modal__content .dlbtn01 { text-align: center; margin: 0 0 0 0; }
  .modal__content .dlbtn01:hover { opacity: 0.7; }
  .modal__content .dlbtn01 img{ display: inline; }

}