@charset "UTF-8";
#container h3, #container h4, #container h5, #container h6 {
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "ＭＳ ゴシック", sans-serif;
}
@media screen and (min-width: 768px) {
  header {
    /*
    background: url(../image/2024/mv-back.jpg) no-repeat center center;
    background-size: cover;
    */
    background: #fff;
    border: none;
  }
  header #mv_area {
    position: relative;
    width: 1024px;
    height: 650px;
    margin: auto;
  }
  header #mv_area .copy {
    position: absolute;
    top: 100px;
    left: 0;
    right: 0;
    text-align: center;
  }
  header #mv_area .subcopy {
    position: absolute;
    top: 196px;
    left: 0;
    right: 0;
    text-align: center;
  }
  header #mv_area h1 {
    position: absolute;
    top: 296px;
    left: 481px;
  }
  header #mv_area .takumi {
    position: absolute;
    top: 297px;
    left: 47px;
  }
  header #gn_area {
    border-top: 1px solid #777777;
    background: linear-gradient(rgba(0,0,0,0.4) 0px, rgba(30,30,30,0.2) 480px);
    background: #007134;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
  }
  header #gn_area #gn_academy_logo {
    width: 240px;
    flex-shrink: 0;
  }
  header #gn_area #gn_navi {
    width: 644px;
    flex-shrink: 0;
  }
  header #gn_area #gn_navi ul {
    display: flex;
    justify-content: space-around;
    /* 3つの時 */
    padding: 0 6% 0 10%;
  }
  header #gn_area #gn_navi ul li {
    font-size: 15px;
    line-height: 1.2;
    text-align: center;
  }
  header #gn_area #gn_navi ul li a {
    text-decoration: none;
    position: relative;
  }
  header #gn_area #gn_navi ul li a:hover {
    text-decoration: underline;
  }
  header #gn_area #gn_navi ul li a::after {
    content: "";
    display: block;
    height: 8px;
    width: 8px;
    border-right: 2px solid #fff;
    border-top: 2px solid #fff;
    position: absolute;
    bottom: -14px;
    left: 50%;
    transform: translateX(-50%) rotate(135deg);
  }
  header #gn_area #gn_logo {
    width: 140px;
    flex-shrink: 0;
    text-align: right;
  }
  /* 安全衛生表彰について */
  #about {
    border-top: 6px solid #A37E39;
    background: url(../image/2024/s2-back.jpg) no-repeat center center;
    background-size: cover;
    padding: 55px 0 107px;
  }
  #about h2 {
    font-size: 38px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.05em;
    text-align: center;
    margin-bottom: 25px;
  }
  #about .inbox {
    max-width: 1024px;
    margin: auto;
  }
  #about .inbox p {
    font-size: 16px;
    line-height: 1.85;
  }
  #about .inbox h3 {
    font-size: 21px;
    line-height: 1.25;
    letter-spacing: 0.05em;
    text-align: center;
    margin-top: 55px;
    margin-bottom: 24px;
  }
  #about #helmet {
  }
  #about #helmet dl {
    display: flex;
    justify-content: space-between;
  }
  #about #helmet dl.red {
    background: #910A0A;
  }
  #about #helmet dl.blue {
    background: #003B87;
    margin-top: 10px;
  }
  #about #helmet dt {
    width: 248px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
  }
  #about #helmet .red dt {
    background: #5A0606;
  }
  #about #helmet .blue dt {
    background: #0B2A53;
  }
  #about #helmet dd {
    align-self: center;
    padding: 20px 48px;
  }
  #about #helmet dd h4 {
    font-size: 18px;
    line-height: 1.45;
    margin-bottom: 10px;
  }
  #about #helmet dd p {
    font-size: 14px;
    line-height: 1.65;
    text-align: justify;
  }
  /* 表彰式の様子 */
  #state {
    border-top: 6px solid #A37E39;
    background: linear-gradient(#002700 0px, #007134 480px);
    background: #007134;
    padding: 80px 0 2px;
    overflow: hidden;
  }
  #state h2 {
    font-size: 38px;
    line-height: 1.1;
    letter-spacing: 0.05em;
    text-align: center;
    margin-bottom: 40px;
  }
  #state .intro {
    margin-bottom: 45px;
  }
  #state .intro h3 {
    font-size: 21px;
    line-height: 1.25;
    letter-spacing: 0.05em;
    text-align: center;
    margin-bottom: 24px;
  }
  #state .intro p {
    max-width: 1024px;
    font-size: 16px;
    line-height: 1.85;
    margin: auto;
  }
  #state .photos {
    display: flex;
    margin: 0 -2px;
  }
  #state .photos li {
    flex-grow: 1;
    margin: 2px;
    overflow: hidden;
  }
  #state .photos li.row2 {
    flex-grow: 2;
  }
  #state .photos li img {
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    vertical-align: top;
  }
  /* 安全優良職長品質優良職長 */
  #highestrank {
    border-top: 6px solid #A37E39;
    background: #fff;
    padding: 45px 0 52px;
  }
  #highestrank h2 {
    text-align: center;
    margin: 0 0 29px;
  }
  #highestrank .member {
    border-top: 6px solid #A37E39;
    padding-top: 10px;
    width: 1024px;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    margin: auto;
  }
  #highestrank .member::before {
    content: "";
    background: #FFFCFC;
    height: 6px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
  }
  #highestrank .member dl {
    position: relative;
    width: 340px;
    margin-right: 2px;
    margin-bottom: 2px;
    padding-bottom: 30px;
  }
  #highestrank .member dl:nth-of-type(3n) {
    margin-right: 0;
  }
  #highestrank .member dd {
    background: rgba(0,0,0,0.7);
    background: linear-gradient(180deg, rgba(129,99,41,0.7), #816329 50%);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    height: 100px;
    padding: 5px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  #highestrank .member dd h3 {
    font-size: 18px;
    line-height: 1.35;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
  }
  #highestrank .member dd p {
    font-size: 13px;
    line-height: 1.35;
    letter-spacing: 0.05em;
  }
  /* 優良職長 */
  #highrank {
    border-top: 6px solid #A37E39;
    background: #fff;
    padding: 45px 0 82px;
  }
  #highrank h2 {
    text-align: center;
    margin: 0 0 39px;
  }
  #highrank .member {
    border-top: 6px solid #A37E39;
    padding-top: 10px;
    width: 1024px;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    margin: auto;
  }
  #highrank .member::before {
    content: "";
    background: #FFFCFC;
    height: 6px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
  }
  #highrank .member dl {
    background: linear-gradient(180deg, #E3E3E3 208px ,#9e8960 208px, #816329 269px);
    padding-top: 10px;
    position: relative;
    width: 244px;
    margin-right: 16px;
    position: relative;
    overflow: hidden;
  }
  #highrank .member dl::before {
    content: "";
    height: 100%;
    width: 20px;
    background: url("../image/2024/constriction_l.png") no-repeat left center;
    background-size: 100% 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  #highrank .member dl::after {
    content: "";
    height: 100%;
    width: 20px;
    background: url("../image/2024/constriction_r.png") no-repeat left center;
    background-size: 100% 100%;
    position: absolute;
    top: 0;
    right: 0;
  }
  #highrank .member dl:nth-of-type(4n) {
    margin-right: 0;
  }
  #highrank .member dl dt {
    text-align: center;
  }
  #highrank .member dd {
    background: #816329;
    text-align: center;
    padding: 5px 0 10px;
    margin-top: -10px;
  }
  #highrank .member dd h3 {
    font-size: 12px;
    line-height: 1.35;
    letter-spacing: 0.02em;
    margin-bottom: 6px;
  }
  #highrank .member dd p {
    font-size: 11px;
    line-height: 1.45;
    letter-spacing: 0.02em;
  }
}
@media screen and (max-width: 767.999px) {
  header {
    /*
    background: url(../image/2024/mv-back-sp.jpg) no-repeat center center;
    background-size: cover;
    */
    background: linear-gradient(#002700 0px, #007134 480px);
    background: #fff;
    border: none;
    height: auto;
  }
  header #mv_area {
    position: relative;
    padding: 32px 32px 25px;
    max-width: 302px;
    text-align: center;
    margin: auto;
  }
  header #mv_area .copy {
    margin: 0 0 15px 0;
  }
  header #mv_area .copy img {
    width: 300px;
  }
  header #mv_area .subcopy {
    margin-bottom: 17px;
  }
  header #mv_area .subcopy img {
    width: 300px;
  }
  header #mv_area h1 {
    margin-bottom: 15px;
  }
  header #mv_area h1 img {
    width: 302px;
  }
  header #mv_area .takumi img {
    width: 302px;
  }
  header #gn_area #gn_academy_logo {
    display: none;
  }
  header #gn_area #gn_navi {
    background: rgba(137,9,15,0.55);
  }
  header #gn_area #gn_navi ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }
  header #gn_area #gn_navi ul li {
    border-top: 2px solid rgba(255,255,255,0.45);
    background: linear-gradient(rgba(0,0,0,0.4), rgba(30,30,30,0.2));
    background: #007134;
    font-size: 15px;
    line-height: 1.2;
    text-align: center;
    margin: 0 1px;
    flex-grow: 1;
    /* 3つの時 */
    width: calc(33% - 2px);
    /* 2つor4つの時 */
    width: calc(50% - 2px);
  }
  header #gn_area #gn_navi ul li a {
    text-decoration: none;
    position: relative;
    min-height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  header #gn_area #gn_navi ul li span {
    display: block;
    position: relative;
    padding-bottom: 12px;
  }
  header #gn_area #gn_navi ul li a span::after {
    content: "";
    display: block;
    height: 8px;
    width: 8px;
    border-right: 2px solid #fff;
    border-top: 2px solid #fff;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) rotate(135deg);
  }
  header #gn_area #gn_logo {
    display: none;
  }
  /* 安全衛生表彰について */
  #about {
    border-top: 6px solid #A37E39;
    background: url(../image/2024/s2-back-sp.jpg) no-repeat center center;
    background-size: cover;
    padding: 33px 36px 45px;
  }
  #about h2 {
    font-size: 26px;
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: 0.05em;
    margin-bottom: 28px;
  }
  #about .inbox p {
    font-size: 15px;
    text-align: justify;
    line-height: 1.8;
  }
  #about .inbox h3 {
    font-size: 18px;
    line-height: 1.5;
    letter-spacing: 0.05em;
    margin-top: 30px;
    margin-bottom: 20px;
  }
  #about #helmet dl.red {
    background: #910A0A;
  }
  #about #helmet dl.blue {
    background: #003B87;
    margin-top: 8px;
  }
  #about #helmet dt {
    text-align: center;
  }
  #about #helmet .red dt {
    background: #5A0606;
  }
  #about #helmet .blue dt {
    background: #0B2A53;
  }
  #about #helmet dt img {
    width: 302px;
  }
  #about #helmet dd {
    align-self: center;
    padding: 17px 38px 20px;
  }
  #about #helmet dd h4 {
    font-size: 15px;
    line-height: 1.35;
    margin-bottom: 10px;
  }
  #about #helmet dd p {
    font-size: 13px;
    line-height: 1.45;
  }
  /* 表彰式の様子 */
  #state {
    border-top: 6px solid #A37E39;
    background: linear-gradient(#002700 0px, #007134 480px);
    background: #007134;
    padding: 33px 0 2px;
    overflow: hidden;
  }
  #state h2 {
    font-size: 38px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.05em;
    margin-bottom: 28px;
    text-align: center;
  }
  #state .intro {
    margin: 0 36px 25px;
  }
  #state .intro h3 {
    font-size: 18px;
    line-height: 1.5;
    letter-spacing: 0.05em;
    margin-bottom: 20px;
  }
  #state .intro p {
    font-size: 15px;
    line-height: 1.8;
    text-align: justify;
  }
  #state .photos {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -1px;
  }
  #state .photos li {
    width: calc(100% / 3 - 6px);
    flex-grow: 1;
    margin: 1px;
    overflow: hidden;
  }
  #state .photos li.row3 {
    width: 100%;
    flex-grow: 3;
  }
  #state .photos li.row2 {
    width: calc(100% / 3 * 2 - 4px);
  }
  #state .photos li img {
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    vertical-align: top;
  }
  /* 安全優良職長品質優良職長 */
  #highestrank {
    border-top: 6px solid #A37E39;
    background: #fff;
    padding: 36px 0 28px;
  }
  #highestrank h2 {
    text-align: center;
    margin: 0 0 32px;
  }
  #highestrank h2 img {
    width: 340px;
  }
  #highestrank .member {
    border-top: 6px solid #A37E39;
    padding-top: 10px;
    margin: 0 10px;
    position: relative;
  }
  #highestrank .member::before {
    content: "";
    background: #FFFCFC;
    height: 6px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
  }
  #highestrank .member dl {
    position: relative;
    padding-bottom: 10px;
  }
  #highestrank .member dt img {
    width: 100%;
    height: auto;
  }
  #highestrank .member dd {
    background: rgba(0,0,0,0.7);
    background: linear-gradient(rgba(129,99,41,0.7), #816329 50%);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    min-height: 90px;
    padding: 5px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  #highestrank .member dd h3 {
    font-size: 18px;
    line-height: 1.35;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
  }
  #highestrank .member dd p {
    font-size: 14px;
    line-height: 1.35;
    letter-spacing: 0.05em;
  }
  /* 優良職長 */
  #highrank {
    border-top: 6px solid #A37E39;
    background: #fff;
    padding: 36px 0 45px;
  }
  #highrank h2 {
    text-align: center;
    margin: 0 0 32px;
  }
  #highestrank h2 img {
    width: 340px;
  }
  #highrank .member {
    border-top: 6px solid #A37E39;
    padding-top: 10px;
    margin: 0 25px;
    position: relative;
  }
  #highrank .member::before {
    content: "";
    background: #FFFCFC;
    height: 6px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
  }
  #highrank .member dl {
    position: relative;
  }
  #highrank .member dl {
    position: relative;
  }
  #highrank .member dt img {
    width: 100%;
    height: auto;
  }
  #highrank .member dd {
    background: rgba(0,0,0,0.7);
    background: linear-gradient(rgba(129,99,41,0.7), #816329 50%);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    min-height: 80px;
    padding: 5px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  #highrank .member dd h3 {
    font-size: 16px;
    line-height: 1.35;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
  }
  #highrank .member dd p {
    font-size: 13px;
    line-height: 1.35;
    letter-spacing: 0.05em;
  }
  #highrank .member dd p br {
    display: inline;
  }
}