@charset "utf-8";
/* CSS Document */

/* 共通部品 */

a.btn1{ display: block; position: relative; max-width: 400px; font-weight: 500; font-size: 22px; line-height: 1.0; color: #fff; text-align: center; background-color: #D18F00; padding: 12px 25px 12px 25px; border-radius: 40px; transition: all 0.6s; }
/*a.btn1::after{ position: absolute; top: 50%; transform: translateY(-50%); right: 10px; color: #fff; content: "\e5cc"; font-family: "Material Icons";}*/
a.btn1:hover{ background-color: #F6A902; }
@media screen and (max-width: 520px) {
  a.btn1{ max-width: 270px; font-size: 14px; padding: 12px 20px 12px 20px;}
}

.hr1{ width: 100%; height: var(--sp-lm); border-radius: 0 0 50px 50px; filter: drop-shadow(0 7px 4px rgba(0,0,0,0.15)); background-color: var(--color-back); border: none; z-index:1; transform: translateZ(0);}
@media screen and (max-width: 767px) {
  .hr1{ height: var(--sp-m); border-radius: 0 0 20px 20px; filter: drop-shadow(0 5px 3px rgba(0,0,0,0.15)); }
}

.title1c{ font-size: 4.2rem; line-height: 1.4; text-align: center; font-weight: 700;}
.title1c span{ display: block; font-size: 1.6rem; font-weight: 400;}
@media screen and (max-width: 767px) {
  .title1c{ font-size: 2.4rem;}
}
.title2c{ font-size: 2.2rem; line-height: 1.4; text-align: center; font-family: "Roboto", sans-serif; font-optical-sizing: auto; font-weight: 500; font-style: normal; font-variation-settings: "wdth" 87.5;}
@media screen and (max-width: 767px) {
  .title2c{ font-size: 2.0rem;}
}
.title3c{ font-size: 3.2rem; line-height: 1.4; text-align: center; font-weight: 700;}
@media screen and (max-width: 767px) {
  .title3c{ font-size: 2.2rem;}
}

/* header & nav */

.headerbar{ position: fixed; width: 100%; height: 10px; background-color: var(--color-back); filter: drop-shadow(-2px 4px 3px rgba(0,0,0,0.15)); z-index: 98;}
/*.header{ z-index: 98; position: fixed; width: 100%; height: 90px; padding-right: 16px; display: flex; justify-content: space-between;}*/
.logo{ z-index: 98; position: fixed; left: 0; top: 0; max-width: 428px; width: 60%; aspect-ratio: 428 / 70; padding-top: 5px; margin-top: 9px; background-color: var(--color-back); border-radius: 0 0 20px 0; filter: drop-shadow(0px 6px 3px rgba(0,0,0,0.15));}
.logo a{ display: flex; justify-content: center; width: 100%; height: 100%;}
.logo_okzkerc{ display: block; /*max-width: 224px;*/ width: 52%; height: auto;}
/* -----年度メッセージの横サイズ----------- */
.logo_msg{ display: block; /*max-width: 139px;*/ width: 32%; height: 60%; aspect-ratio: 139 / 45;}

.headnavbox{ z-index: 98; position: fixed; top: 9px; right: 16px;}
#navTgl{ display: none;}
.open,.close{ cursor: pointer; display: block; width: 100%; height: 100%;}
.open { position: relative; width: 108px; height: 50px; border-radius: 0 0 20px 20px; background-color: var(--color-back); filter: drop-shadow(0px 6px 3px rgba(0,0,0,0.15)); color: var(--color-main); font-size: 12px; font-family: "Roboto", sans-serif; font-optical-sizing: auto; font-weight: 500; font-style: normal; font-variation-settings: "wdth" 87.5; padding: 15px 0 0 13px; z-index: 102;}
.open span,.open::before,.open::after { position: absolute; top: 24px; right: 10px; content: ""; width: 40px; height: 2px; background-color: var(--color-main); transition: all .3s;}
.open::before { transform: translateY(-6px);}
.open::after { transform: translateY(6px);}
.close { background-color: rgba(0,80,110,0.0); z-index: 99; width: 50px; height: 50px; border-radius: 50%; pointer-events: none; transition: background .6s;}
#navTgl:checked + .open{ background-color: transparent; color: var(--color-accent);}
#navTgl:checked + .open span { transform: scaleX(0);}
#navTgl:checked + .open::before { transform: rotate(135deg); background-color: var(--color-accent);}
#navTgl:checked + .open::after { transform: rotate(-135deg); background-color: var(--color-accent);}
#navTgl:checked ~ .close { pointer-events: auto;}
.open:hover { color: var(--color-accent);}
.open:hover span,.open:hover::before,.open:hover::after { background-color: var(--color-accent);}
.nav_sp { z-index: 100; position: fixed; overflow: auto; top: 0; right: 0; width: 100%; height: 100%; background: rgba(0,64,143,0.95); display: flex; justify-content: center; align-items: center; transform: translateX(100%); transition: all .6s;}
.nav_sp div{ width: 90%; max-width: 400px; height: 100vh; padding-top: 100px;}
.nav_sp h2,.nav_sp a { color: #FFF;}
.nav_sp h2 { text-align: center; background-color: rgba(255,255,255,.2);}
.nav_sp ul { margin: 0; padding: 0;}
.nav_sp li { list-style: none; font-size: 16px; text-align: center; line-height: 1.4; border-bottom: 1px solid rgba(255,255,255,.2);}
.nav_sp a { display: block; padding: 1.5em 2em; text-decoration: inherit; text-align: center; transition: all .6s;}
#navTgl ~ .nav_sp { transform: translateX(200%);}
#navTgl:checked ~ .nav_sp { transform: none;}
.nav_sp a img{ color: #fff; display: inline; padding-bottom: 2px;}

@media screen and (max-width: 767px) {
  .headerbar{ background-color: rgba(255,253,248,0.80); height: 70px; filter: none; backdrop-filter: blur(5px);}
  .headnavbox{ top: 0px; right: 12px;}
  .logo{ width: calc(100% - 100px); padding-top: 5px; margin-top: 3px; background-color: transparent; filter: none;}
  .logo a{ display: flex; justify-content: flex-start; padding-left: 5%;}
  .open{ width: 50px; height: 50px; border-radius: 0 0 20px 20px; background-color: transparent; filter: none; padding: 0 0 0 0;}
  .open b{ display: none;}
}
@media screen and (max-width: 500px) {
  .headerbar{ height: 13vw;}
}
@media screen and (max-width: 420px) {
  .logo{ width: calc(100% - 80px);}
}


/* main */


/* footer */

.footer{}
.footerbox1{ display: flex; justify-content: center; column-gap: 20px;}
.footerbox1_1{ max-width: 150px; width: 30%;}
.footerbox1_2{ font-size: 11px; line-height: 1.3;}
.footerbox1_2 .break{ margin-left: 10px;}
.footer small{ display: block;}
@media screen and (max-width: 520px) {
  .footerbox1{ display: block;}
  .footerbox1_1{ margin: 0 auto 10px auto;}
  .footerbox1_2{ width: 100%; text-align: center; margin-bottom: 30px;}
}

.bannerbox{ max-width: 1600px; width: 90%; display: grid; grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 10px 10px;}
.bannerbox li{ list-style: none; border: 1px solid #ddd; background-color: #fff; padding: 5px; aspect-ratio: 2 / 1; font-size: 13px; line-height: 1.4; display: flex; justify-content: center; align-items: center;}
.bannerbox li a{ width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;}
.bannerbox li img{ object-fit: contain; object-position: center;}
@media screen and (max-width: 767px) {
  .bannerbox{ grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px 10px;}
}
  
/* main visual */

.main_v{ width: 100%; height: 100vh; background: url("../images/okazaki2.jpg") center center; background-size: cover; background-attachment: fixed; position: relative; display: flex; justify-content: center; align-items: center; overflow: hidden;}
.main_v_copy{ max-width: 1000px; width: 90%; color: #fff; }
.main_v_copy h1{ font-size: 3.8rem; line-height: 6.0rem; font-weight: 500; text-align: center; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.70));}
.main_v_copy h1 strong{ font-size: 6.0rem; line-height: 6.0rem; font-family: "Roboto", sans-serif; font-optical-sizing: auto; font-weight: 800; font-style: normal; font-variation-settings: "wdth" 100; display: block; margin-bottom: 3.0rem;}
.main_v .rmark1{ position: absolute; right: 1%; bottom: 1%; width: 24%;}
@media screen and (max-width: 1000px) {
  .main_v_copy h1{ font-size: 3.0rem; line-height: 4.0rem;}
  .main_v_copy h1 strong{ font-size: 4.6rem; line-height: 4.0rem; margin-bottom: 2.0rem;}
}
@media screen and (max-width: 767px) {
  .main_v{ background-attachment: scroll;}
  .main_v_copy h1{ font-size: 2.4rem; line-height: 4.0rem;}
  .main_v_copy h1 strong{ margin: 0 10% 2.0rem 10%; font-size: 6rem; line-height: 7.0rem; font-variation-settings: "wdth" 75;}
}

/* sub visual */

.sub_v{ width: 100%; height: 350px; background: url("../images/okazaki2.jpg") center center; background-size: cover; position: relative; overflow: hidden;}
.sub_v_cover{ width: 100%; height: 100%; background-color: rgba(0,64,143,0.60); display: flex; justify-content: center; align-items: center;}
.sub_v_title h1{ font-size: 3.8rem; font-weight: 600; line-height: 1.2; text-align: center; color: #fff; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.70));}
.sub_v .rmark1{ position: absolute; right: 5px; bottom: 5px; max-width: 200px; width: 40%;}
@media screen and (max-width: 767px) {
  .sub_v{ height: 240px; background: url("../images/okazaki2sp.jpg") center center; background-size: cover;}
  .sub_v_cover{ /*background-color: transparent;*/}
  /*.sub_v_title{ background-color: rgba(0,0,0,0.15); background-color: rgba(255,253,248,0.75); padding: 10px 20px; border-radius: 10px;}*/
  .sub_v_title h1{ font-size: 2.6rem; margin-top: 1em;}
  .sub_v .rmark1{ width: 20%;}
}


/* =======================
    main
========================== */

.wrap1{ width: 90%; max-width: 1200px; margin-left: auto; margin-right: auto;}
.wrap2{ width: 90%; max-width: 1000px; margin-left: auto; margin-right: auto;}
.wrap3{ width: 90%; max-width: 800px; margin-left: auto; margin-right: auto;}

.topbox1{ display: flex; justify-content: space-between; align-items: center;}
.topbox1_l{ width: 40%; margin-bottom: var(--sp-m);}
.topbox1_r{ width: 56%; margin-bottom: var(--sp-m);}
.topbox1 video{ width: 100%; height: auto;}
.topbox1:nth-child(2n){ flex-direction: row-reverse;}
@media screen and (max-width: 640px) {
  .topbox1{ display: block;}
  .topbox1_l{ width: 100%;}
  .topbox1_l video{ display: block; max-width: 420px; margin-left: auto; margin-right: auto;}
  .topbox1_r{ width: 100%;}
  .topbox1_r:has(img){ max-width: 420px; margin-left: auto; margin-right: auto;}
}

.box1{ border: 1px solid var(--color-main); padding: 1em;}

.bg_gray{ background-color: #888; padding: 2%;}

.boxlist1{ border-top: 2px solid var(--color-accent);}
.boxlist1 li{ list-style: none; border-bottom: 2px solid var(--color-accent); display: flex; justify-content: space-between; flex-wrap: wrap; padding: 15px 10px; font-size: 1.6rem; line-height: 1.4; color: #000; transition: all 0.3s;}
.boxlist1_1{ width: 25%; font-weight: 700;}
.boxlist1_2{ width: 45%;}
.boxlist1_3{ width: 25%;}
.boxlist1_4{ width: 25%; font-weight: 700;}
.boxlist1_5{ width: 20%;}
.boxlist1_6{ width: 50%;}
.boxlist1_mkup{ width: 100%; margin-top: 5px; padding: 5px 5px; border:1px dashed #f00; border-radius: 5px; display: flex; justify-content: center; column-gap: 5px; font-size: 12px;}
.boxlist1_mkup_text{ color: #123B82;}
.hidden { display: none;}
#mkupbox{ width: 90px;}
#mkupbox a{ display: block; width: 60px; padding: 10px 5px; background-color: var(--color-main); color: #fff;font-family: "Roboto", sans-serif; font-optical-sizing: auto; font-weight: 700; font-style: normal; font-variation-settings: "wdth" 75; border: 1px solid #fff; border-radius: 5px; text-align: center;}
.mkup_form iframe{ border: 1px solid #888;}
@media screen and (max-width: 767px) {
  .boxlist1 li{ display: block; padding: 5px 10px 5px 10px; font-size: 1.4rem;}
  .boxlist1_1,.boxlist1_2,.boxlist1_3,.boxlist1_4,.boxlist1_5,.boxlist1_6{ width: 100%; padding: 4px 0 4px 10px; border-top: 1px dashed #ccc;}
  .boxlist1_1,.boxlist1_4{ border-top: none; padding: 4px 0 4px 0;}
}

.boxlist2{ display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 3em 3%;}
.boxlist2 li{ list-style: none;}
.boxlist2 li a{ display: block; height: 100%; font-size: 1.6rem; color: #000; padding: 2px 2px 10px 2px; background-color: rgba(255,255,255,0.00); border: 1px solid rgba(246,169,2,0.00); transition: all 0.3s;}
.boxlist2 li a:hover{ border: 1px solid #777777; background-color: #fff;}
.boxlist2_1{ aspect-ratio: 3 / 2; overflow: hidden;}
.boxlist2_1 img{ transform: scale(1.0); width: 100%; height: 100%; object-fit: cover; object-position: center center; transition: all 0.6s;}
.boxlist2 li a:hover .boxlist2_1 img{ transform: scale(1.2);}
.boxlist2_2{  margin: var(--sp-ss) var(--sp-ss) 0 var(--sp-ss); }
@media screen and (max-width: 767px) {
  .boxlist2{ grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1em 2%;}
  .boxlist2 li a{ font-size: 1.3rem;}
}

.boxlist3{ border-top: 5px solid var(--color-accent); display: flex; justify-content: space-between; flex-wrap: wrap; padding-top: var(--sp-s);}
.boxlist3 li{ width: 48%; list-style: none; transition: all 0.3s; margin-bottom: var(--sp-s);}
.boxlist3 li a{ display: inline-block; padding: 10px 10px; background-color: var(--color-accent); font-size: 1.6rem; line-height: 1.4; margin-left: 15px; color: #fff; }
.boxlist3 li::before{ content: "● "; color: var(--color-accent);}
@media screen and (max-width: 767px) {
  .boxlist3 li{ width: 100%; font-size: 1.4rem;}
  .boxlist3 li a{ font-size: 1.4rem; line-height: 1.4; margin-left: 10px; }
}


/*----- OLD AZUMA -------*/

.azumabox ul{ border-top: 5px solid var(--color-accent); display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1em 1em; padding-top: var(--sp-s); margin-top: var(--sp-ms); }
.azumabox ul li{ margin-left: 1.5em; }
.azumabox ul li a{ font-size: 1.6rem; line-height: 1.4;}
@media screen and (max-width: 767px) {
  .azumabox ul li a{ font-size: 1.4rem;}
}




/*---- CONTS PAGE ---*/

.grbox1{ display: flex; justify-content: space-between; align-items: center;}
.grbox1_1{ width: 35%;}
.grbox1_2{ width: 60%;}
.grbox1_2_1{ font-size: 3.6rem; font-weight: 600;}
.grbox1_2_2{ font-size: 1.5rem; line-height: 1.0; font-family: "Roboto", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; font-variation-settings: "wdth" 75;}
.grbox1_2_3{ font-weight: 600; line-height: 1.4; margin-top: var(--sp-s);}
.grbox1_2_4{ font-size: 1.5rem; line-height: 1.4; margin-top: 5px;}
@media screen and (max-width: 767px) {
  /*.grbox1{ align-items: flex-start;}*/
  .grbox1_1{ width: 38%;}
  .grbox1_2{ width: 59%;}
  .grbox1_2_1{ font-size: 2.3rem;}
  .grbox1_2_2{ font-size: 1.2rem;}
  .grbox1_2_4{ font-size: 1.2rem;}
}

/* =======================
    textformat
========================== */

.textformat1 h3{ font-size: 3.2rem; font-weight: 700; margin-top: 1.5em; margin-bottom: 0.5em; border-bottom: 2px solid var(--color-accent); padding-bottom: 0.2em;}
.textformat1 h4{ font-size: 2.4rem; font-weight: 700; margin-top: 1.5em; margin-bottom: 0.5em;}
.textformat1 h5{ font-size: 2.0rem; font-weight: 700; margin-top: 1.5em; margin-bottom: 0.5em;}
.textformat1 ul{ margin-left: 3em; margin-top: 1em;}
.textformat1 ul li{ list-style: none; position: relative; padding-left: 1.3em}
.textformat1 ul li:before{ position: absolute; left: 0; top: 0.5em; content: "●"; color: var(--color-accent); font-size: 70%;}
.textformat1 p{ margin-left: 3em; margin-top: 1em;}
.textformat1 table{ margin-left: 3em; margin-top: 1em;}
.textformat1 tr{ border-bottom: 5px solid var(--color-back);}
.textformat1 th,.textformat1 td{ padding: 3px 1em 3px 1em;}
.textformat1 th{ padding: 3px 3em 3px 1em; font-weight: 600; background-color: #EFEFEF;}
.textformat1 a:not(:has(img)){ border-bottom: 1px dashed var(--color-mainlight); margin-bottom: -1px;}
@media screen and (max-width: 767px) {
  .textformat1 h3{ font-size: 2.2rem;}
  .textformat1 h4{ font-size: 1.6rem;}
  .textformat1 h5{ font-size: 1.5rem;}
  .textformat1 ul{ margin-left: 0.5em; margin-top: 0.5em;}
  .textformat1 ul li{ }
  .textformat1 p{ margin-left: 0.5em;}
  .textformat1 table{ margin-left: 0.5em;}
}

.gmap{ width: 100%; aspect-ratio: 100 / 50;}
@media screen and (max-width: 767px) {
  .gmap{ aspect-ratio: 100 / 70;}
}
@media screen and (max-width: 480px) {
  .gmap{ aspect-ratio: 100 / 100;}
}


.detailtitle1{ font-size: 3.0rem; line-height: 1.4; font-weight: 700; text-align: center; border-bottom: 5px solid #ddd; padding: 0.6em; position: relative;}
.detailtitle1::after{ content: ""; position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%); width: 100px; height: 5px; background-color: var(--color-accent);}
.detailimg1{ background-color: #ddd; width: 100%; aspect-ratio: 1000 / 525;}
.detailimg1 img{ object-fit: contain; object-position: center center; width: 100%; height: 100%;}
@media screen and (max-width: 767px) {
  .detailtitle1{ font-size: 2.2rem;}
}

.docbox1 p{ margin-top: 1em;}
.docbox1 p a:not(:has(img)){ border-bottom: 1px dotted #AAA; margin-bottom: -1px;}
.docbox1 h2{ font-size: 140%; font-weight: 700; line-height: 1.4; padding: 0.5em 0 0.5em 1em; border-left: 5px solid var(--color-accent); margin-top: var(--sp-ms);}
.docbox1 h3{ font-size: 120%; font-weight: 700; line-height: 1.4; margin-top: var(--sp-ms); border-bottom: 1px solid #aaa; padding-bottom: 0.3em;}
.docbox1 h5{ font-size: 115%; font-weight: 700; line-height: 1.4; margin-top: var(--sp-ms);}
.docbox1 h4{ font-size: 115%; font-weight: 600; margin-top: 1em;}
.docbox1 h6{ font-size: 110%; font-weight: 600; margin-top: 1em;}
.docbox1 ul{ margin-top: 1em; list-style: disc; margin-left: 1.5em;}
.docbox1 ol{ margin-top: 1em; margin-left: 1.5em;}
.docbox1 ul li,.docbox1 ol li{ margin-top: 0.3em; position: relative;}
.docbox1 ol li{ padding-left: 5px;}
.docbox1 > table{margin-top: 1em;}
.docbox1 > table th,.docbox1 > table td{ border: 1px solid #000; padding: 0.5em 1em; text-align: left; vertical-align: top;}
.docbox1 > table th{ font-weight: 600; white-space: nowrap;}
.docbox1 > table th > p:first-child,.docbox1 > table td > p:first-child{ margin-top: 0;}
.docbox1img2{ display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 1em;}
.docbox1img2 img{ display: block; width: calc(100% / 2); padding: 1px;}
.docbox1 > *:first-child{ margin-top: 0;}
@media screen and (max-width: 767px) {
  .docbox1 h2{ font-size: 2.4rem;}
  .docbox1 h3{ font-size: 1.8rem;}
  .docbox1 h4{ font-size: 1.8rem; padding: 3px 0;}
  .docbox1 h5{ font-size: 1.6rem; padding: 3px 1em;}
  .docbox1 h6{ font-size: 1.6rem;}
  .docbox1img2 img{ display: block; width: calc(100% / 2); padding: 1px;}
}
@media screen and (max-width: 640px) {
  .docbox1 > table th,.docbox1 > table td{ display: block; border: none;}
  .docbox1 > table th{ padding: 0.5em 1em 0.5em 1em; font-weight: 600; white-space: inherit; text-align: center; border-bottom: 1px solid #888;}
  .docbox1 > table td{ padding: 1em 0 2em 0;}
}
@media screen and (max-width: 480px) {
  .docbox1img2 img{ display: block; width: 100%; padding: 1px;}
}
.mt-be-columns{ display: flex; justify-content: space-between; margin: 1em 0 0 0; padding: 0; column-gap: 2px; }
.mt-be-column{ width: 49%; margin: 0 0 1em 0; }
.mt-be-column p,.mt-be-column h2,.mt-be-column h3,.mt-be-column h4,.mt-be-column h5,.mt-be-column h6{ width: 90%; margin-right: auto; padding: 1px; margin-top: 0.5em;}
.mt-be-column p:has(img),.mt-be-column :has(img){ width: 100%; margin-right: 0; padding: 1px 1px 1px 1px;}
.mt-be-image + p{ font-size: 80%; margin-right: 1em;}
.box2columns .mt-be-column{ width: 48%; border: 2px solid var(--color-accent); border-radius: 10px; padding: 0.5em 1em 1em 1em;}
@media screen and (max-width: 640px) {
  .mt-be-columns{ flex-wrap: wrap;}
  .box2columns .mt-be-column{ width: 100%; border: 2px solid var(--color-accent); border-radius: 10px;}
}
@media screen and (max-width: 420px) {
  .mt-be-column{ width: 100%;}
}

.pagination{ display: flex; justify-content: center; column-gap: 1em; list-style: none; }
.pagination li a{ display: block; padding: 10px; width: 100px; border: 1px solid #ddd; font-size: 13px; font-family: "Roboto", "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-weight: 500; font-style: normal; font-variation-settings: "wdth" 100; transition: all 0.6s;}
.pagination li a:hover{ border: 1px solid var(--color-main); background-color: #fff;}
@media screen and (max-width: 520px) {
  .pagination li a{ padding: 10px; width: auto;}
  .pagination li a span{ display: none;}
}


.selectlink{ margin: 30px auto; padding: 10px 20px; border: 1px solid #ddd; border-radius: 3px; background-color: #fff; cursor: pointer;}
.selectlink:hover{ border: 1px solid #333; background-color: #eee;}