@charset "UTF-8";
/* =====================
  リセット
 ======================= */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent; }

body {
  line-height: 1; }

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

ul, ol {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  text-decoration: none; }

/* change colours to suit your needs */
ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none; }

/* change colours to suit your needs */
mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold; }

del {
  text-decoration: line-through; }

abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  cursor: help; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

/* change border colour to suit your needs */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0; }

input, select {
  vertical-align: middle; }

*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box; }

i, address {
  font-style: normal; }

h1, h2, h3, h4, h5, h6 {
  font-weight: normal; }

small {
  font-size: 100%; }

/* =====================
	OPCAB学会
 ======================= */
/** -------------------- 変数定義 -------------------- **/
:root {
  /* カラー定義 */
  --c_text: #0B0F1C;
  --c_wht: #fff;
  --c_gray: #213D31;
  --c_red: #AF2930;
  /* フォント定義 */
  --font_ja: 'Noto Sans JP', sans-serif;
  --font_eng: "Barlow Semi Condensed", sans-serif;
  --font_mix: "Barlow Semi Condensed", 'Noto Sans JP', sans-serif;
  /* transition定義 */
  --anim: all 0.4s ease-out; }

body {
  font-family: var(--font_ja);
  font-size: 17.5px;
  font-size: clamp(10px, 0.91145vw, 0.91145vw);
  line-height: 1.35;
  letter-spacing: 0.05em;
  color: var(--c_text); }
  body * {
    -webkit-box-sizing: border-box;
            box-sizing: border-box; }

img {
  max-width: 100%;
  display: block; }

.clearfix {
  clear: both; }

a {
  color: var(--c_text);
  -webkit-transition: var(--anim);
  transition: var(--anim);
  text-decoration: none; }

main {
  padding-top: 6.7708333333%; }

/** -------------------- Common Style -------------------- **/
.section {
  padding: 3.125% 0; }

.inner {
  width: 1000px;
  width: 52%;
  margin: 0 auto; }

.cmn-bg01 {
  background: rgba(204, 191, 160, 0.2); }

/** Heading **/
.cmn-ttl01 {
  margin-bottom: 1.1111111111em;
  text-align: center;
  font-size: 120%;
  font-weight: 500; }

.cmn-ttl02 {
  font-size: 110%;
  font-weight: 500;
  line-height: 1.4722222222;
  letter-spacing: 0.039em;
  padding-left: 0.6em;
  border-left: 0.4166666667em solid var(--c_red);
  margin-bottom: 1.5em; }

.cmn-ttl03 {
  background: #223D31;
  color: var(--c_wht);
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.46;
  padding: 0.2em 0 0.2em 1.2em;
  position: relative; }
  .cmn-ttl03:before {
    content: "";
    width: 2px;
    height: calc(100% - 1.16em);
    background: currentColor;
    position: absolute;
    left: 0.4166666667em;
    top: 0;
    bottom: 0;
    margin: auto; }

/** Button **/
.cmn-btn01 {
  display: block;
  font-weight: 500;
  letter-spacing: 0.089em;
  width: 14.6em;
  padding: 0.4em;
  border: 2px solid var(--c_red);
  color: var(--c_red);
  text-align: center;
  position: relative;
  margin: 0 auto; }
  .cmn-btn01:before, .cmn-btn01:after {
    content: "";
    width: 1em;
    height: 1em;
    background: url(../img/common/btn_off.png) no-repeat center/contain;
    position: absolute;
    right: 0.8em;
    top: 0;
    bottom: 0;
    margin: auto;
    -webkit-transition: var(--anim);
    transition: var(--anim); }
  .cmn-btn01:after {
    background: url(../img/common/btn_on.png) no-repeat center/contain;
    opacity: 0; }
  .cmn-btn01:hover:before {
    opacity: 0; }
  .cmn-btn01:hover:after {
    opacity: 1.0; }

.cmn-btn-pdf {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: var(--c_gray);
  -webkit-column-gap: 0.45em;
     -moz-column-gap: 0.45em;
          column-gap: 0.45em;
  padding: 0.6em 2.6em 0.7em;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
  border: 2px solid var(--c_gray);
  border-radius: 100px;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.2em; }
  .cmn-btn-pdf:before {
    content: "";
    width: 1.8em;
    height: 2.1375em;
    background: url(../img/common/pdf.png) no-repeat center/contain;
    -ms-flex-negative: 0;
        flex-shrink: 0; }
  .cmn-btn-pdf:hover {
    opacity: 1.0;
    text-decoration-color: currentColor; }

/** -------------------- Header -------------------- **/
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  -webkit-transition: -webkit-transform 0.4s;
  transition: -webkit-transform 0.4s;
  transition: transform 0.4s;
  transition: transform 0.4s, -webkit-transform 0.4s; }
  .header.is-hide {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%); }
  .header .header-container {
    background: var(--c_wht);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    padding: 0.625% 3.28125%; }
  .header .header-logo a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-column-gap: 0.8em;
       -moz-column-gap: 0.8em;
            column-gap: 0.8em; }
    .header .header-logo a:hover {
      opacity: 0.7; }
  .header .header-logo-img {
    width: 3.5em; }
  .header .header-logo-txt {
    -ms-flex-negative: 0;
        flex-shrink: 0;
    font-size: 120%;
    font-weight: 500; }
  .header .header-cta {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-column-gap: 1.15em;
       -moz-column-gap: 1.15em;
            column-gap: 1.15em; }
    .header .header-cta-btn {
      letter-spacing: 0;
      display: block;
      text-align: center;
      width: 10.5416666667em;
      background: var(--c_gray);
      color: var(--c_wht);
      border-radius: 100px;
      padding: 0.2916666667em 0.6666666667em; }
      .header .header-cta-btn:hover {
        background: #488068; }
      .header .header-cta-btn--contact {
        background: var(--c_red); }
        .header .header-cta-btn--contact:hover {
          background: #DD444C; }
  .header .gnav-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-column-gap: 4.4em;
       -moz-column-gap: 4.4em;
            column-gap: 4.4em;
    background: rgba(34, 61, 49, 0.8);
    padding: 0 1em; }
    .header .gnav-list-item {
      padding: 0.6em 1em; }
      .header .gnav-list-item-link {
        color: var(--c_wht);
        display: block; }
      .header .gnav-list-item > a {
        position: relative; }
        .header .gnav-list-item > a:after {
          content: "";
          width: 100%;
          height: 2px;
          background: var(--c_wht);
          position: absolute;
          bottom: -0.1666666667em;
          left: 0;
          -webkit-transform: scale(0, 1);
                  transform: scale(0, 1);
          -webkit-transition: var(--anim);
          transition: var(--anim); }
        .header .gnav-list-item > a:hover:after {
          -webkit-transform: scale(1, 1);
                  transform: scale(1, 1); }
      .header .gnav-list-item--parent {
        cursor: pointer;
        position: relative; }
        .header .gnav-list-item--parent:hover .gnav-list-item-children {
          opacity: 1.0;
          visibility: visible; }
      .header .gnav-list-item-children {
        position: absolute;
        top: 100%;
        left: 0;
        background: var(--c_wht);
        width: 100%;
        text-align: center;
        font-size: 83.3333333333%;
        padding: 0.8em 0.4em;
        opacity: 0;
        visibility: hidden;
        -webkit-transition: var(--anim);
        transition: var(--anim); }
        .header .gnav-list-item-children li + li {
          margin-top: 1em; }
        .header .gnav-list-item-children a {
          color: var(--c_gray);
          position: relative; }
          .header .gnav-list-item-children a:after {
            content: "";
            width: 100%;
            height: 1px;
            background: currentColor;
            position: absolute;
            bottom: -2px;
            left: 0;
            -webkit-transition: var(--anim);
            transition: var(--anim);
            -webkit-transform: scale(0, 1);
                    transform: scale(0, 1); }
          .header .gnav-list-item-children a:hover:before {
            -webkit-transform: scale(1, 1);
                    transform: scale(1, 1); }

/** -------------------- Pagetop -------------------- **/
#pagetop {
  position: fixed;
  right: 4.1666666667%;
  bottom: 3.2em;
  display: none; }
  #pagetop a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    row-gap: 0.5em;
    font-size: 75%;
    line-height: 1.0;
    color: var(--c_red);
    text-align: center; }
    #pagetop a img {
      width: 4.3333333333em;
      -webkit-filter: drop-shadow(3px 3px 6px rgba(144, 143, 143, 0.16));
              filter: drop-shadow(3px 3px 6px rgba(144, 143, 143, 0.16)); }

/** -------------------- Footer -------------------- **/
.footer {
  background: #223D31;
  color: var(--c_wht);
  padding: 2.6041666667% 0; }
  .footer a {
    color: var(--c_wht); }
    .footer a:hover {
      opacity: 0.7; }
  .footer .footer-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between; }
  .footer .footer-info {
    -ms-flex-negative: 0;
        flex-shrink: 0; }
  .footer .footer-logo {
    margin-bottom: 1.55em; }
    .footer .footer-logo a {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-column-gap: 0.8em;
         -moz-column-gap: 0.8em;
              column-gap: 0.8em; }
    .footer .footer-logo-img {
      width: 3.5em; }
    .footer .footer-logo-txt {
      font-weight: 700;
      letter-spacing: 0; }
  .footer .footer-address {
    font-size: 80%;
    letter-spacing: 0.089em;
    line-height: 1.45; }
  .footer .footer-nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    row-gap: 1em; }
  .footer .footer-sitemap {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: auto 2.7em auto 2.7em auto;
    grid-template-columns: repeat(3, auto);
    gap: 1em 2.7em;
    font-size: 80%;
    margin-left: auto; }
    .footer .footer-sitemap-item--row3 {
      -ms-grid-row-span: 3;
      grid-row: span 3; }
    .footer .footer-sitemap-item > a {
      display: block;
      padding-left: 1.1em;
      position: relative; }
      .footer .footer-sitemap-item > a:before {
        content: "";
        width: 0.9em;
        height: 0.9em;
        background: #CCBFA0;
        border-radius: 50%;
        position: absolute;
        left: 0;
        top: 0.2em; }
    .footer .footer-sitemap-children {
      padding-left: 0.25em;
      margin-top: 1em; }
      .footer .footer-sitemap-children a:before {
        content: "-  "; }
      .footer .footer-sitemap-children li + li {
        margin-top: 0.5em; }
  .footer .footer-cta {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-column-gap: 1.2em;
       -moz-column-gap: 1.2em;
            column-gap: 1.2em; }
    .footer .footer-cta-btn {
      display: block;
      text-align: center;
      letter-spacing: 0;
      padding: 0.4166666667em;
      min-width: 10.5416666667em;
      border-radius: 100px;
      background: var(--c_wht);
      color: #223D31; }
      .footer .footer-cta-btn:hover {
        background: #488068;
        color: var(--c_wht);
        opacity: 1.0; }
      .footer .footer-cta-btn--contact {
        background: var(--c_red);
        color: var(--c_wht); }
        .footer .footer-cta-btn--contact:hover {
          background: #DD444C; }

/* PCのみ
  ------------------------ */
@media (min-width: 700px) {
  .sm-only {
    display: none !important; } }

/* タブレット
  ------------------------ */
@media (max-width: 1100px) {
  body {
    font-size: 16px; }
  /** -------------------- Common Style -------------------- **/
  .section {
    padding: 8% 0; }
  .inner {
    width: 90%; }
  /** -------------------- Header -------------------- **/
  .header .header-logo a {
    -webkit-column-gap: 16px;
       -moz-column-gap: 16px;
            column-gap: 16px; }
  .header .header-logo-txt {
    font-size: 20px; }
  .header .header-cta {
    display: none; }
  .header .gnav-list {
    -webkit-column-gap: 2%;
       -moz-column-gap: 2%;
            column-gap: 2%; }
    .header .gnav-list-item {
      padding: 10px; }
      .header .gnav-list-item-link {
        font-size: 16px; }
  /** -------------------- Pagetop -------------------- **/
  #pagetop {
    bottom: 20px;
    right: 15px; }
    #pagetop a {
      font-size: 10px; }
      #pagetop a img {
        width: 32px; }
  /** -------------------- Footer -------------------- **/
  .footer .footer-container {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    row-gap: 30px; }
  .footer .footer-nav {
    -webkit-box-flex: 0;
        -ms-flex: 0 1 100%;
            flex: 0 1 100%;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start; }
  .footer .footer-sitemap {
    -webkit-column-gap: 5%;
       -moz-column-gap: 5%;
            column-gap: 5%; }
    .footer .footer-sitemap-item {
      -ms-flex-negative: 0;
          flex-shrink: 0; } }

/* スマホ
  ------------------------ */
@media (max-width: 699px) {
  body {
    font-size: 14px; }
  .pc-only {
    display: none !important; }
  body main {
    padding-top: 52px; }
  /** -------------------- Common Style -------------------- **/
  .section {
    padding: 40px 0; }
  .inner {
    width: 100%;
    padding: 0 15px; }
  /** Heading **/
  .cmn-ttl01 {
    margin-bottom: 20px;
    font-size: 16px; }
  .cmn-ttl02 {
    font-size: 15px;
    border-width: 5px;
    padding-left: 8px;
    margin-bottom: 30px; }
  .cmn-ttl03 {
    font-size: 15px;
    padding: 6px 0 6px 16px; }
    .cmn-ttl03:before {
      height: calc(100% - 12px);
      left: 6px; }
  /** Button **/
  .cmn-btn-pdf {
    padding: 12px 24px 14px; }
    .cmn-btn-pdf:before {
      width: 28px;
      height: 34px; }
  /** -------------------- Header -------------------- **/
  .header .header-container {
    padding: 8px 15px;
    height: 52px; }
  .header .header-logo a {
    -webkit-column-gap: 4px;
       -moz-column-gap: 4px;
            column-gap: 4px; }
  .header .header-logo-img {
    width: 30px; }
  .header .header-logo-txt {
    font-size: 10px; }
  .header .header-btn {
    width: 20px;
    height: 16px;
    position: relative; }
    .header .header-btn span {
      width: 100%;
      height: 1px;
      background: var(--c_text);
      position: absolute;
      right: 0;
      -webkit-transition: var(--anim);
      transition: var(--anim); }
      .header .header-btn span:first-child {
        top: 0; }
      .header .header-btn span:nth-child(2), .header .header-btn span:nth-child(3) {
        top: 0;
        bottom: 0;
        margin: auto; }
      .header .header-btn span:last-child {
        bottom: 0; }
    .header .header-btn.is-open span:first-child, .header .header-btn.is-open span:last-child {
      opacity: 0; }
    .header .header-btn.is-open span:nth-child(2) {
      -webkit-transform: rotate(45deg);
              transform: rotate(45deg); }
    .header .header-btn.is-open span:nth-child(3) {
      -webkit-transform: rotate(-45deg);
              transform: rotate(-45deg); }
  .header .gnav {
    position: fixed;
    top: 52px;
    right: 0;
    border-top: 1px solid #223D31;
    background: var(--c_wht);
    width: 100%;
    max-height: calc(100% - 52px);
    overflow-y: auto;
    overflow-x: hidden;
    display: none; }
    .header .gnav-list {
      display: block;
      background: none;
      padding: 0; }
      .header .gnav-list-item {
        padding: 0;
        border-bottom: 1px solid #223D31; }
        .header .gnav-list-item-link {
          color: var(--c_text);
          font-size: 12px;
          padding: 9px 15px 9px 34px;
          position: relative; }
          .header .gnav-list-item-link:before {
            content: "";
            width: 15px;
            height: 15px;
            background: #CCBFA0;
            border-radius: 50%;
            position: absolute;
            left: 15px;
            top: 0;
            bottom: 0;
            margin: auto; }
          .header .gnav-list-item-link:after {
            display: none; }
        .header .gnav-list-item--parent:before, .header .gnav-list-item--parent:after {
          content: "";
          width: 15px;
          height: 1px;
          background: #223D31;
          position: absolute;
          right: 15px;
          top: 19px; }
        .header .gnav-list-item--parent:after {
          -webkit-transform: rotate(90deg);
                  transform: rotate(90deg);
          -webkit-transition: var(--anim);
          transition: var(--anim); }
        .header .gnav-list-item--parent.is-open:after {
          -webkit-transform: rotate(0deg);
                  transform: rotate(0deg); }
        .header .gnav-list-item-children {
          position: relative;
          top: auto;
          left: auto;
          font-size: 10px;
          background: #CCBFA0;
          opacity: 1.0;
          visibility: visible;
          text-align: left;
          padding: 0;
          display: none;
          -webkit-transition: none;
          transition: none; }
          .header .gnav-list-item-children li {
            padding: 0 0 0 35px;
            border-top: 1px solid #223D31; }
            .header .gnav-list-item-children li + li {
              margin: 0; }
          .header .gnav-list-item-children a {
            display: block;
            padding: 10px 0; }
            .header .gnav-list-item-children a:before {
              content: "-"; }
            .header .gnav-list-item-children a:after {
              display: none; }
    .header .gnav-cta {
      padding: 18px 0;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      -webkit-column-gap: 15px;
         -moz-column-gap: 15px;
              column-gap: 15px; }
      .header .gnav-cta-btn {
        font-size: 12px;
        display: block;
        text-align: center;
        border-radius: 100px;
        width: 162px;
        padding: 6px;
        background: var(--c_text);
        color: var(--c_wht); }
        .header .gnav-cta-btn--contact {
          background: var(--c_red); }
  /** -------------------- Footer -------------------- **/
  .footer {
    padding: 25px 0 50px; }
    .footer .footer-logo {
      margin-bottom: 16px; }
      .footer .footer-logo a {
        -webkit-column-gap: 4px;
           -moz-column-gap: 4px;
                column-gap: 4px; }
      .footer .footer-logo-img {
        width: 32px; }
      .footer .footer-logo-txt {
        font-size: 12px; }
    .footer .footer-address {
      font-size: 12px; }
    .footer .footer-nav {
      display: block; }
    .footer .footer-sitemap {
      display: none; }
    .footer .footer-cta {
      -webkit-column-gap: 5%;
         -moz-column-gap: 5%;
              column-gap: 5%; }
      .footer .footer-cta-item {
        -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1; }
      .footer .footer-cta-btn {
        min-width: auto;
        width: 100%;
        padding: 4px 8px; } }