@charset "UTF-8";
@import url('grid.css');
/*共通
-------------------------------------*/
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.headimg {
  margin-right: 10px;
  width: 5%;
}
.u_align-center {
  text-align: center;
}

img {
  border: none;
  max-width: 100%;
  height: auto; /*高さ自動*/
}
a {
  /*display:block;*/
  color: #666;
  text-decoration-line: none;
}
a:hover {
  color: #999;
}

.c_title-secondary {
  font-size: 2.4rem;
  line-height: 1.25;
  letter-spacing: -0.1rem;
  font-weight: 400;
  color: #fff;
  background: linear-gradient(
    to right,
    rgb(255, 152, 84),
    rgba(255, 255, 255, 1)
  );
  padding: 8px 32px;
  margin-bottom: 24px !important;
}
.c_title-tertiary {
  font-size: 20px;
}
.c_list-circle {
  margin-bottom: 24px;
}
.c_list-circle li {
  margin-bottom: 0;
}

@media (max-width: 430px) {
  .headimg {
    display: none;
  }
  .c_title-primary {
    font-size: 2rem;
    line-height: 1.25;
    letter-spacing: -0.1rem;
    font-weight: 300;
  }
  .c_title-primary span.under {
    display: inline-block;
  }
  .c_title-secondary {
    padding: 8px 16px;
  }
  .c_title-tertiary {
    font-size: 16px;
  }
}

/*ヘッダー
-------------------------------------*/
.header {
  display: flex;
  flex-direction: row;
  padding: 2rem 0 0 0;
}

.site-header {
  background: #fff;
  /*display: flex;*/
  /*padding: 60px 20px;*/
  position: fixed;
  justify-content: space-between;
  width: 100%;
  z-index: 100;
}

.header-box {
  margin-left: auto;
  margin-top: 8px;
}
.contact-button {
  padding: 1rem;
  border: 2px solid #000;
}
nav ul {
  /*display: flex;*/
  flex-direction: row;
  justify-content: space-around;
  list-style: none;
  margin: 1rem 0 0 0;
}
nav li {
  /*flex: 1 0 auto;*/
  flex: 0 0 auto;
}
nav li a {
  text-decoration: none;
  text-align: center;
  width: 100%;
}
nav a:hover {
  /*background-color: #f7f7f7;*/
}
nav a {
  padding: 0.5rem;
  color: #fff;
}
nav li.hit {
  background-color: rgb(255, 152, 84) !important;
}

@media screen and (min-width: 430px) {
  /* PC時はMENUボタンを非表示 */
  #open,
  #close {
    display: none !important;
  }

  #navi {
    display: block !important;
    background-color: #000;
    padding: 1rem;
  }
}

@media screen and (max-width: 430px) {
  .header {
    flex-direction: column;
    margin-bottom: 10px;
  }
  .header #open,
  #close {
    position: absolute;
    top: 20px;
    right: 12px;
  }
  nav ul {
    flex-direction: column;
    background-color: #000;
  }
  .header li {
    padding-top: 0;
  }
  /* スマホ時はMENUボタンを表示 */
  #open,
  #close {
    display: block;
    width: 50px;
    border: none;
    position: absolute;
    top: 20px;
    right: 12px;
  }
  /* スマホ時はメニューを非表示 */
  #navi {
    display: none;
  }

  h1 {
    padding-right: 10%;
  }
}

/*フッター
-------------------------------------*/
.l_footer {
  margin: 0;
  padding: 0;
}

/*メイン画像
-------------------------------------*/
.mainimg img {
  width: 100vw;
  margin-top: 120px;
}
@media (max-width: 430px) {
  .mainimg {
    margin-bottom: 32px;
  }
}

/*メインコンテンツ
-------------------------------------*/
main {
  /* margin: 5rem 0 0 0;*/
}

section {
  /*margin: 10re
m 0;*/
  /*padding: 10rem 0;*/
  /* padding-top: 10rem;
  padding-bottom: 5rem; */
  padding: 48px 0;
}
.box-011 {
  position: relative;
  /* max-width: 60%; */
  margin: 1.9em auto 0;
  padding: 1em 1.5em;
  border: 2px solid #2589d0;
  border-radius: 4px;
  margin-bottom: 40px;
}

.box-011 h2 {
  position: absolute;
  top: -2em;
  left: -2px;
  padding: 0.2em 0.8em;
  border-radius: 5px 5px 0 0;
  background-color: #2589d0;
  color: #fff;
  font-size: 120%;
  font-weight: bolder;
  line-height: 1.6;
}

.box-011 p {
  margin: 0;
  color: #333;
  /* font-size: large; */
}
.box-011 a {
  color: #2589d0;
  text-decoration: underline;
}

.list-7 {
  list-style-type: none;
  padding: 1em;
  /*border: 2px solid #2589d0;*/
  max-width: 600px;
  margin: 0 auto;
}

.list-7 li {
  display: flex;
  align-items: center;
  gap: 0 10px;
  padding: 0.3em;
}

.list-7 li::before {
  transform: rotate(-45deg);
  width: 0.4em;
  height: 0.4em;
  border-bottom: 3px solid #2589d0;
  border-right: 3px solid #2589d0;
  content: '';
}
@media (max-width: 430px) {
  section {
    padding: 40px 0 !important;
    font-size: 14px;
  }
}

/*---最優秀---*/

.heading-12 {
  position: relative;
  width: 290px;
  margin: 0 auto 2em;
  padding: 0.5em 0.7em;
  background-color: #e3e723;
  color: #000;
  text-align: center;
}

.heading-12::before,
.heading-12::after {
  position: absolute;
  bottom: -10px;
  z-index: -1;
  border-style: solid;
  border-color: #d3d713;
  content: '';
}

.heading-12::before {
  left: -30px;
  border-width: 25px 25px 25px 15px;
  border-left-color: transparent;
}

.heading-12::after {
  right: -30px;
  border-width: 25px 15px 25px 25px;
  border-right-color: transparent;
}

.heading-12 span::before,
.heading-12 span::after {
  position: absolute;
  bottom: -10px;
  width: 10px;
  height: 10px;
  background-color: #838700;
  content: '';
}

.heading-12 span::before {
  left: 0;
  clip-path: polygon(0 0, 100% 0%, 100% 100%);
}

.heading-12 span::after {
  right: 0;
  clip-path: polygon(0 0, 100% 0%, 0% 100%);
}

.excellent table {
  margin: 0 auto;
  max-width: 1200px;
  padding: 0 2rem;
}

.excellent th {
  text-align: center;
}

.excellent p {
  text-align: center;
}
@media (max-width: 430px) {
  section {
  }
  .excellent {
    padding: 1em;
  }
}

@media (max-width: 430px) {
  /* #1 {
    padding: unset !important;
  } */

  section {
    /*margin: 10rem 0;*/
    padding-top: 10rem;
    padding-bottom: 5rem;
  }

  .box-011 {
    position: relative;
    max-width: 90%;
    margin: 1.9em auto 24px;
    padding: 1em 1.5em;
    border: 2px solid #2589d0;
    border-radius: 3px;
  }

  .box-011 h2 {
    position: absolute;
    top: -3em;
    left: -2px;
    padding: 0.2em 1.5em;
    border-radius: 5px 5px 0 0;
    background-color: #2589d0;
    color: #fff;
    font-size: 100%;
    font-weight: bolder;
  }

  .box-011 p {
    margin: 0;
    color: #333;
  }
}

.gray-back {
  background-color: #f4f4f4;
}

/*キャッチコピー
-------------------------------------*/
.catch {
  text-align: left;
}
.catch h2 {
  padding-bottom: 1rem;
}
.under {
  border-bottom: 0.4rem solid #000;
  padding: 0 0.75rem 0.75rem 0.75rem;
}
.center {
  text-align: center;
  margin-bottom: 4rem;
}

/*申し込みの流れ
-------------------------------------*/
.flow.row {
  margin-bottom: 3rem;
}

/*フッター
-------------------------------------*/
footer {
  background-color: #f7f7f7;
  padding: 5rem 0;
}
footer h4 {
  border-bottom: 3px solid #ccc;
}

/*お問い合わせ
-------------------------------------*/
.contact-box {
  border: 1px solid #ccc;
  text-align: center;
  padding: 2rem 2rem;
}
/*-------------------
.table {
	margin: 4rem 0;
}
.table th {
	width: 250px;
}
----------------------*/

/*コピーライト
-------------------------------------*/
.copyright {
  text-align: center;
  padding: 1rem 0;
  background-color: #000;
}
.copyright a {
  color: #fff;
  text-decoration: none;
  display: inline;
}
@media (max-width: 430px) {
  .copyright {
    padding: 2px 0 4px;
  }
  .copyright a {
    font-size: 12px;
  }
}

/*ページトップへ戻るボタン
-------------------------------------*/
#pagetop {
  position: fixed;
  bottom: 15px;
  right: 15px;
}
#pagetop a {
  display: block;
  background: #000;
  color: #fff;
  width: 50px;
  padding: 10px 5px;
  text-align: center;
}
#pagetop a:hover {
  background: #666;
}

/* 幅430px以下の表示
-------------------------------------*/
@media screen and (max-width: 430x) {
  /*ヘッダー
-------------------------------------*/
  .header-box {
    display: none;
  }
  /*お問い合わせ
-------------------------------------*/
  .table th {
    width: 100%;
    display: block;
  }
  .table td {
    display: block;
  }
}

/*ボタン
-------------------------------------*/
.btn-circle-stitch {
  display: inline-block;
  text-decoration: none;
  background: #87befd;
  color: #fff;
  width: 120px;
  height: 120px;
  line-height: 120px;
  border-radius: 50%;
  text-align: center;
  overflow: hidden;
  box-shadow: 0px 0px 0px 5px #87befd;
  border: dashed 1px #fff;
  transition: 0.4s;
}

.btn-circle-stitch:hover {
  background: #668ad8;
  box-shadow: 0px 0px 0px 5px #668ad8;
}

/*丸ボタンorange
-------------------------------------*/
.btn-circle-stitch2 {
  display: inline-block;
  text-decoration: none;
  background: #ffa500;
  color: #fff;
  width: 120px;
  height: 120px;
  line-height: 120px;
  border-radius: 50%;
  text-align: center;
  overflow: hidden;
  box-shadow: 0px 0px 0px 5px #ffa500;
  border: dashed 1px #fff;
  transition: 0.4s;
}
.btn-circle-stitch2:hover {
  background: #ffd700;
  box-shadow: 0px 0px 0px 5px #ffd700;
}

/*丸ボタンpink
-------------------------------------*/
.btn-circle-stitch3 {
  display: inline-block;
  text-decoration: none;
  background: #ff6c72;
  color: #fff;
  width: 120px;
  height: 120px;
  line-height: 120px;
  border-radius: 50%;
  text-align: center;
  overflow: hidden;
  box-shadow: 0px 0px 0px 5px #ff6c72;
  border: dashed 1px #fff;
  transition: 0.4s;
}
.btn-circle-stitch3:hover {
  background: #ffc0cb;
  box-shadow: 0px 0px 0px 5px #ffc0cb;
}

/*ボタン2blue
-------------------------------------*/
.btn-flat-dashed-filled {
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  color: #67c5ff;
  border: dashed 1px #67c5ff;
  background: #f2fcff;
  border-radius: 3px;
  transition: 0.4s;
}

.btn-flat-dashed-filled:hover {
  background: #cbedff;
  color: #fff;
}

/*ボタン2orange
-------------------------------------*/
.btn-flat-dashed-filled2 {
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  color: #ff8c00;
  border: dashed 1px #ff8c00;
  background: #fffacd;
  border-radius: 3px;
  transition: 0.4s;
}

.btn-flat-dashed-filled2:hover {
  background: #fffacd;
  color: #ff8c00;
}

/*ボタン3pink
-------------------------------------*/
.btn-flat-dashed-filled3 {
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  color: #ff6c72;
  border: dashed 1px #ff6c72;
  background: #fffacd;
  border-radius: 3px;
  transition: 0.4s;
}

.btn-flat-dashed-filled3:hover {
  background: #fffafa;
  color: #ffccd4;
}

/*メモ風箇条書きorange
-------------------------------------*/
.list12 {
  margin: 3em 0 1em 0;
  background: #fff6e6;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.22);
}
.list12-title {
  font-size: 2.1em;
  padding: 4px 0 4px 16px;
  background: #ffa500;
  color: #ffffff;
  font-weight: bold;
}
.list12 ul,
.list12 ol {
  /*position: relative;*/
  margin: 0;
  padding: 0 0.5em 0 0.5em;
  color: #ff7f50;
  border: none;
  list-style-type: none;
  　text-align: left;
}
.list12 ol {
  counter-reset: number;
}
.list12 ul li,
.list12 ol li {
  line-height: 1.5;
  padding: 0.5em 0 0.5em 1.6em;
  border-bottom: dashed 1px #ff7f50;
}
.list12 ul li:before {
  /*position: absolute;*/
  font-family: FontAwesome;
  content: '\f14a';
  left: 0.7em;
  color: #ff7f50;
}
.list12 ol li:before {
  display: inline-block;
  position: absolute;
  font-family: 'Quicksand', sans-serif;
  content: counter(number);
  counter-increment: number;
  left: 0.5em;
  width: 22px;
  height: 22px;
  border-radius: 20%;
  background: #ee8992;
  color: white;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  line-height: 22px;
}
.list12 ul li:last-of-type,
.list12 ol li:last-of-type {
  border-bottom: none;
}

/*メモ風箇条書きpink
-------------------------------------*/
.list13 {
  margin: 3em 0 1em 0;
  background: #fff0f5;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.22);
}
.list13-title {
  font-size: 1.5em;
  padding: 4px 0 4px 16px;
  background: #ff6c72;
  color: #ffffff;
  font-weight: bold;
}
.list13 ul,
.list13 ol {
  /*position: relative;*/
  margin: 0;
  padding: 0 0.5em 0 0.5em;
  color: #ff6c72;
  border: none;
  list-style-type: none;
  　text-align: left;
}
.list13 ol {
  counter-reset: number;
}
.list13 ul li,
.list13 ol li {
  line-height: 1.5;
  padding: 0.5em 0 0.5em 1.6em;
  border-bottom: dashed 1px #ffb6c1;
}
.list13 ul li:before {
  /*position: absolute;*/
  font-family: FontAwesome;
  content: '\f14a';
  left: 0.7em;
  color: #ff6c72;
}
.list13 ol li:before {
  display: inline-block;
  position: absolute;
  font-family: 'Quicksand', sans-serif;
  content: counter(number);
  counter-increment: number;
  left: 0.5em;
  width: 22px;
  height: 22px;
  border-radius: 20%;
  background: #ee8992;
  color: white;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  line-height: 22px;
}
.list13 ul li:last-of-type,
.list13 ol li:last-of-type {
  border-bottom: none;
}

/*ルーズリーフ風
-------------------------------------*/
.loose-leaf {
  background: #f8f0d7;
  border-left: 5px dotted rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 0 5 #f8f0d7;
  padding: 1em;
  margin: 1em 5px;
}

.loose-leaf p {
  margin: 0;
  padding: 0;
}

/*----------追加-------------*/

.contact-box p {
  text-align: left;
}

.recruitment {
  width: 72%;
  margin: 0 auto;
}

.recruitment img {
  float: left;
  width: 20%;
  margin: 1rem;
}

.recruitment p {
  margin: 0;
}

.portal {
  width: 60%;
  margin: 0 auto;
}

.portal img {
  margin: 1rem;
}

@media (max-width: 430px) {
  .recruitment {
    width: 100%;
    margin-bottom: 12px;
  }
  .recruitment img {
    float: none;
    width: 104px;
    margin: 1rem auto;
    display: block;
  }
}

/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc {
  display: block !important;
  margin: 0 auto;
}
.sp {
  display: none !important;
  margin: 0 auto;
}
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 750px) {
  .pc {
    display: none !important;
    margin: 0 auto;
  }
  .sp {
    display: block !important;
    margin: 0 auto;
  }
}

@media only screen and (max-width: 750px) {
  img {
    max-width: 100%;
    margin: 0 auto;
  }
}

.youtube {
  background-image: url('https://www.shikoku-ictcon.jp/scvf/img/bk_youtube.png') !important;
  background-size: cover;
  height: 324px;
}

.youtube2022 {
  background-image: url('https://www.shikoku-ictcon.jp/scvf/img/bk_youtube2022.png') !important;
  background-size: cover;
  height: 324px;
}

.youtube2023 {
  background-image: url('https://www.shikoku-ictcon.jp/scvf/img/bk_youtube2023.png') !important;
  background-size: cover;
  height: 324px;
}

/*----------Youtube部分背景グレー-------------*/
.past_award1 {
  background-color: #f4f4f4;
  width: 50%;
  height: 324px;
  margin: 0 auto;
}

/*----------Youtube部分背景白-------------*/
.past_award2 {
  background-color: #ffffff;
  width: 50%;
  height: 324px;
  margin: 0 auto;
}

/* section2 {
  margin: 10rem 0;
  padding: 0;
} */

.center2 {
  text-align: center;
  margin-bottom: 4rem;
  padding-top: 2rem;
}

@media only screen and (max-width: 750px) {
  .youtube {
    background-image: url('https://www.shikoku-ictcon.jp/scvf/img/bk_youtube.png') !important;
    background-size: cover;
    height: 274px;
  }

  .past_award {
    background-color: #f4f4f4;
    width: 80%;
    height: 274px;
    margin: 0 auto;
  }

  /* section2 {
    margin: 5rem 0;
    padding: 3rem 0;
  } */

  h2 {
    font-size: 2rem !important;
    /*margin-left: -15px;*/ /*30px の半分*/
    /*width: calc(100% + 30px);*/ /*30px は各自調整*/
    /*width: -webkit-calc(100% + 30px);*/ /*上と同じpx値に*/
  }
  .c_title-primary {
    font-size: 2rem;
    line-height: 1.25;
    letter-spacing: -0.1rem;
    font-weight: 300;
  }
  .c_title-primary span.under {
    display: inline-block;
  }

  .catch h3 {
    font-size: 1.5rem;
    line-height: 1.3;
    letter-spacing: -0.1rem;
  }

  .prmovie {
    position: relative;
    padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
    height: 0;
    overflow: hidden;
  }

  .prmovie iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
} /*-----max-width: 750px-----*/

/* リボン見出し
?????????????????????????????????????????????????? */
p.oshirase {
  position: relative;
  display: inline-block;
  margin: 1rem 0 1rem -10px;
  padding: 1rem 3rem;
  color: #fff;
  border-radius: 0 100vh 100vh 0;
  background: #0075a9;
  -webkit-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2);
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2);
}

p.oshirase:before {
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 0;
  height: 0;
  content: '';
  border-top: 10px solid #005276;
  border-left: 10px solid transparent;
}

/*
Zarigani Design Office Drawer Menu
Copyright 2018 Zarigani Design Office
Customized by minimalgreen

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/

.drawer_menu a {
  color: inherit;
  text-decoration: none;
}

.drawer_menu a:visited {
  color: inherit;
}

/* PC用ナビゲーション */

.drawer_menu .drawer_nav_wrapper {
  transform: translate(0);
  width: 100%;
  height: 50px;
  /* PC用メニュー高さ */
  position: relative;
  top: auto;
  right: auto;
  z-index: 100;
  background-color: #000000;
  /* PC用メニュー背景色 */
}

.drawer_menu .drawer_nav {
  max-width: 15%;
  /* コンテンツ幅に合わせる */
  padding: 0;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  list-style-type: none;
}

.drawer_menu .drawer_nav li {
  font-size: 16px;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 50px;
  /* PC用メニュー高さ */
  line-height: 50px;
  /* PC用メニュー高さ */
  background-color: #000000;
  /* PC用メニューボタン背景色 */
  text-align: center;
  list-style-type: none;
}

.drawer_menu .drawer_nav li:hover {
  background-color: #999;
  /* PC用メニューボタンマウスオーバー背景色 */
}

.drawer_menu .drawer_nav li a {
  color: #fff;
  /* PC用メニューボタン文字色 */
}

/* PC非表示 */

@media screen and (min-width: 1001px) {
  .pc-hidden {
    display: none;
    text-align: center;
  }
}

@media screen and (min-width: 1001px) {
  /* ドロップダウンメニュー2階層目 */
  .drawer_menu .drawer_nav li ul.second-level {
    visibility: hidden;
    list-style-type: none;
    position: absolute;
    z-index: -1;
    top: 0;
    margin: 0;
    padding-left: 0;
  }

  .drawer_menu .drawer_nav li:hover ul.second-level {
    visibility: visible;
    z-index: 1;
    top: 50px;
    /* PC用メニューの高さに合わせる */
    transition: all 0.3s;
  }

  .drawer_menu .drawer_nav li:hover ul.second-level li {
    width: 250px;
    /* ドロップダウンメニューボタン横幅 */
    height: 50px;
    /* Pドロップダウンメニューボタン高さ */
    text-align: center;
  }

  .drawer_menu .drawer_nav li:hover ul.second-level li a {
    display: block;
    background-color: #555;
    /* ドロップダウンメニューの文字の背景色 */
    color: #fff;
    /* ドロップダウンメニューの文字色 */
    font-size: 100%;
    text-decoration: none;
    line-height: 50px;
    /* Pドロップダウンメニューボタン高さ */
    text-align: center;
  }

  .drawer_menu .drawer_nav li:hover ul.second-level li a:hover {
    background-color: #999;
    /* ドロップダウンメニューマウスホバー背景色 */
  }

  .touch-btn {
    color: #fff;
    margin-left: 5px;
  }
}

/*+++ Default Button Color +++*/

.drawer_menu .drawer_button {
  color: #fff;
  /* ハンバーガーメニュー文字色 */
  display: none;
}

.drawer_menu .drawer_button .drawer_bar {
  background-color: #fff;
  /* ハンバーガーメニュー三本線の色 */
}

/* 1000px以下 */

@media screen and (max-width: 1000px) {
  .drawer_menu .drawer_bg {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 100;
    background-color: rgba(51, 51, 51, 0.5);
    display: none;
    top: 0;
    left: 0;
  }

  .drawer_menu .drawer_button {
    display: block;
    background-color: #555;
    color: #fff;
    border: none;
    padding: 5px;
    width: 50px;
    letter-spacing: 0.1em;
    cursor: pointer;
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 1001;
    text-align: center;
    outline: none;
    height: auto;
    border-radius: 10px;
  }

  .drawer_menu .drawer_button.active .drawer_bar {
    width: 40px;
  }

  .drawer_menu .drawer_button.active .drawer_bar1 {
    transform: rotate(30deg);
  }

  .drawer_menu .drawer_button.active .drawer_bar2 {
    opacity: 0;
  }

  .drawer_menu .drawer_button.active .drawer_bar3 {
    transform: rotate(-30deg);
  }

  .drawer_menu .drawer_button.active .drawer_menu_text {
    display: none;
  }

  .drawer_menu .drawer_button.active .drawer_close {
    display: block;
  }

  .drawer_menu .drawer_bar {
    display: block;
    height: 2px;
    margin: 8px 2px;
    transition: all 0.2s;
    transform-origin: 0 0;
  }

  .drawer_menu .drawer_text {
    text-align: center;
    font-size: 10px;
  }

  .drawer_menu .drawer_close {
    letter-spacing: 0.08em;
    display: none;
  }

  .drawer_menu .drawer_menu_text {
    display: block;
  }

  .drawer_menu .drawer_nav_wrapper {
    width: 250px;
    height: 100%;
    transition: all 0.2s;
    transform: translate(250px);
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1000;
    background-color: #fff;
    /* ドロワーメニュー内背景色 */
    overflow-x: hidden;
    overflow-y: auto;
  }

  .drawer_menu .drawer_nav {
    display: block;
    position: relative;
    margin-top: 40px;
    max-width: 100%;
  }

  .drawer_menu .drawer_nav li {
    background-color: #fff;
    height: auto;
    line-height: 50px;
    /*  ドロワーメニューリスト項目高さ */
    position: relative;
    border-bottom: 1px solid #eee;
  }

  .drawer_menu .drawer_nav li a {
    background-color: #fff;
    /* ドロワーメニューリスト背景色 */
    color: #555;
    /* ドロワーメニューリスト文字色 */
    display: block;
    text-align: left;
    /* padding-left: 20px; */
  }

  /* スマートフォン2階層目 */
  .drawer_menu .drawer_nav li:hover ul.second-level {
    display: block;
  }

  .drawer_menu .drawer_nav li ul.second-level {
    display: none;
    position: relative;
    padding: 0;
    z-index: 1001;
  }

  .drawer_menu .drawer_nav li ul.second-level li a {
    padding-left: 40px;
  }

  .drawer_menu .drawer_nav_wrapper.open {
    transform: translate(0);
  }

  .drawer_menu.left .drawer_button {
    right: auto;
    left: 32px;
  }

  .drawer_menu.left .drawer_nav_wrapper {
    transform: translate(-250px);
    right: auto;
    left: 0;
  }

  .drawer_menu.left .drawer_nav_wrapper.open {
    transform: translate(0);
  }

  .pc-hidden {
    text-align: center;
  }

  .touch-btn {
    color: #555;
    position: absolute;
    top: 0.25rem;
    right: 2%;
    display: block;
    z-index: 10;
    width: 50px;
    height: 50px;
    text-align: center;
    vertical-align: middle;
  }
}

/*  ウィジェットタイトル */
.drawer-title {
  text-align: center;
  width: 100%;
  height: 50px;
  line-height: 50px;
  background-color: #555;
  /* ドロワーメニュー内タイトルライン背景色 */
  color: #fff;
}

/* フォローボタン */

.follow-buttons {
  text-align: center;
  margin-top: 0;
  width: 100%;
}

.follow-buttons a {
  display: inline-block;
  width: 60px;
  text-align: center;
  text-decoration: none;
  margin: 5px;
}

.follow-buttons .inner-text {
  font-size: 10px;
  display: block;
}

.follow-buttons .lg,
.content-inner-follow-buttons .fa {
  padding: 15px;
  border-radius: 5px;
  margin: 2px auto;
}

.follow-buttons .hatena {
  color: #38393c;
  background-color: transparent;
}

.follow-buttons .blogicon-hatenablog {
  background: #38393c;
  color: #ffffff;
}

.follow-buttons .blogicon-hatenablog:hover {
  background: #5f6063;
}

.follow-buttons .facebook {
  color: #305097;
  background-color: transparent;
}

.follow-buttons .blogicon-facebook {
  background: #305097;
  color: #ffffff;
}

.follow-buttons .blogicon-facebook:hover {
  background: #5a77b7;
}

.follow-buttons .twitter {
  color: #55acee;
  background-color: transparent;
}

.follow-buttons .blogicon-twitter {
  background: #55acee;
  color: #ffffff;
}

.follow-buttons .blogicon-twitter:hover {
  background: #89c7f7;
}

.follow-buttons .instagram {
  color: #d93177;
  background-color: transparent;
}

.follow-buttons .blogicon-instagram {
  background: #d93177;
  color: #ffffff;
}

.follow-buttons .blogicon-instagram:hover {
  background: #df528d;
}

.follow-buttons .feedly {
  color: #6cc655;
  background-color: transparent;
}

.follow-buttons .blogicon-rss {
  background: #6cc655;
  color: #ffffff;
}

.pc-hidden .profile-icon {
  float: none;
}

/*  フロー図 */
:root {
  --flowchart-border: 4px; /* 縦線太さ 変更可 */
  --flowchart-dot-size: 20px; /* ドット大きさ 変更可 */
  --flowchart-dot-color: rgb(255, 108, 114); /* ドットの色 変更可 */
}
.flowchart {
  list-style: none !important;
  counter-reset: flownum; /* リストアイテムの名称(任意) */
  margin: 1em 0; /* フローチャートと前後要素との距離(任意) */
  padding: 0 !important;
}
.flowchart li {
  position: relative;
  padding: 0 0 0 calc(var(--flowchart-dot-size) + 20px);
  text-align: left;
  &.fin {
    opacity: 0.5;
  }
}
.flowchart-content {
  position: relative;
  padding: 0 0 2em;
}
.flowchart-content ul {
  margin: 0;
}
.flowchart-content li {
  margin: 0;
  padding: 0;
  font-size: 16px;
}
.flowchart-content li::before,
.flowchart-content li::after {
  content: none !important;
}
/* 縦線デザイン */
.flowchart-content::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: calc(
    calc(
        calc(var(--flowchart-dot-size) / 2) +
          calc(var(--flowchart-border) / 2) + 20px
      ) *
      -1
  );
  width: 4px;
  height: 100%;
  background: rgb(200, 200, 200);
}

/* 最終工程の縦線が必要な方ここから削除 */
.flowchart li:last-of-type .flowchart-content::before {
  content: none;
}
/* 最終工程の縦線が必要な方ここまで削除 */

/* 番号部位デザイン */
.flowchart li::before {
  content: 'STEP ' counter(flownum);
  counter-increment: flownum;
  color: white; /* 番号文字色 */
  color: rgb(150, 150, 150); /* STEP文字色 */
  font-weight: 700;
  font-size: 15px; /* STEPフォントサイズ */
  line-height: 1.3;
}

/* ドットデザイン */
.flowchart li::after {
  content: '';
  display: block;
  position: absolute;
  top: 8px; /* 通常は 0, STEPの文字とのバランスを見て調整 */
  left: 0;
  width: var(--flowchart-dot-size);
  height: var(--flowchart-dot-size);
  border-radius: 50%;
  border: 2px solid var(--flowchart-dot-color); /* 円の色 */
}
.flowchart li:nth-of-type(odd)::after {
  background: var(--flowchart-dot-color);
}

/* 工程タイトル */
.flowchart-title {
  text-align: left;
  margin: 0 0 0.6em;
  font-weight: bold;
  font-size: 1.24em;
  line-height: 1.4; /* 大きめの文字は 1.2 〜 1.4 程度で調整すると良い */
}
.flowchart-title + p,
.flowchart-title + ul {
  margin: 0 1em;
}
/* p要素を利用した場合の調整 */
/* .flowchart li p {
  margin: 1em 0 !important;
} */
/* .flowchart li p:last-of-type {
  margin-bottom: 0 !important;
}
.flowchart li p {
  text-align: left;
} */

/* 過去の受賞作品 */
.yt_container {
  margin: 0 auto;
  max-width: 1200px;
  /*padding: 2rem;*/
  position: relative;
}
.scf_youtube {
  background: url('https://www.shikoku-ictcon.jp/scvf/img/bk_youtube.png')
    no-repeat center / cover;
}
.col.span-12_yt {
  max-width: 100%;
  padding: 2rem;
}
@media (max-width: 750px) {
  .col.span-12_yt {
    margin: 0;
    display: flex;
    justify-content: center;
  }
  .col.span-12_yt_sp {
    flex: 0 0 100%;
    max-width: 90%;
    margin: 0;
    padding: 1em 0;
  }
}

/*-----------------追加ボタン-------------------*/

.or_bu {
  display: block;
  padding: 25px;
  max-width: 700px;
  margin: 0 auto;
}
.button-55 {
  display: flex;
  justify-content: center;
  align-items: center;
  /*min-width: 250px;*/
  min-width: 650px;
  /*margin: 0 auto;*/
  padding: 0.9em 2em;
  border: none;
  border-radius: 15px;
  background-color: #2371e7;
  color: #fff;
  font-weight: 600;
  font-size: 1em;
}

.button-55::after {
  width: 1.25em;
  height: 1.25em;
  margin-left: 8px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 6V8H5V19H16V14H18V20C18 20.5523 17.5523 21 17 21H4C3.44772 21 3 20.5523 3 20V7C3 6.44772 3.44772 6 4 6H10ZM21 3V11H19L18.9999 6.413L11.2071 14.2071L9.79289 12.7929L17.5849 5H13V3H21Z' fill='%23fff'%3E%3C/path%3E%3C/svg%3E");
  content: '';
}

.button-55:hover {
  background-color: #1361d7;
}

.button-55 a {
  color: #fff;
  text-decoration-line: none;
}
.button-55.self::after {
  background: none;
  content: none;
}

@media screen and (max-width: 730px) {
  /* .box-011 {
    position: relative;
    max-width: 100%;
    margin: 1.9em auto 0;
    padding: 1em 1.5em;
    border: 2px solid #2589d0;
    border-radius: 3px;
  } */

  .box-011 h2 {
    position: absolute;
    top: -3em;
    left: -2px;
    padding: 0.2em 0.8em;
    border-radius: 5px 5px 0 0;
    background-color: #2589d0;
    color: #fff;
    font-size: 120%;
    font-weight: bolder;
  }

  .or_bu {
    display: block;
    padding: 20px;
    max-width: 430px;
    margin: 0 auto;
  }
  .button-55 {
    display: flex;
    align-items: center;
    min-width: 100%;
    border: none;
    border-radius: 15px;
    background-color: #2371e7;
    color: #fff;
    font-weight: 600;
    font-size: 65%;
  }

  .button-55::after {
    width: 1.25em;
    height: 1.25em;
    margin-left: 8px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 6V8H5V19H16V14H18V20C18 20.5523 17.5523 21 17 21H4C3.44772 21 3 20.5523 3 20V7C3 6.44772 3.44772 6 4 6H10ZM21 3V11H19L18.9999 6.413L11.2071 14.2071L9.79289 12.7929L17.5849 5H13V3H21Z' fill='%23fff'%3E%3C/path%3E%3C/svg%3E");
    content: '';
  }

  .button-55:hover {
    background-color: #1361d7;
  }
  .button-55 a {
    color: #fff;
    text-decoration-line: none;
  }

  svg {
    width: 5%;
  }
}

@media (max-width: 430px) {
  .box-011 {
    /* position: relative;*/
    max-width: 100%;
    margin: 1.9em 0 0;
    /* padding: 1em 1.5em;
    border: 2px solid #2589d0;
    border-radius: 3px; */
    margin-bottom: 24px;
  }

  .box-011 h2 {
    position: absolute;
    top: -3.5em;
    left: -2px;
    padding: 0.2em 0.8em;
    border-radius: 5px 5px 0 0;
    background-color: #2589d0;
    color: #fff;
    font-size: 120%;
    font-weight: bolder;
  }

  .or_bu {
    display: block;
    padding: 20px;
    max-width: 430px;
    margin: 0 auto;
  }
  .button-55 {
    display: flex;
    align-items: center;
    min-width: 100%;
    border: none;
    border-radius: 15px;
    background-color: #2371e7;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    white-space: inherit;
    height: auto;
    padding: 8px 4px;
    line-height: 1.4;
    letter-spacing: 0;
  }

  .button-55::after {
    width: 1.25em;
    height: 1.25em;
    margin-left: 8px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 6V8H5V19H16V14H18V20C18 20.5523 17.5523 21 17 21H4C3.44772 21 3 20.5523 3 20V7C3 6.44772 3.44772 6 4 6H10ZM21 3V11H19L18.9999 6.413L11.2071 14.2071L9.79289 12.7929L17.5849 5H13V3H21Z' fill='%23fff'%3E%3C/path%3E%3C/svg%3E");
    content: '';
  }

  .button-55:hover {
    background-color: #1361d7;
  }
  .button-55 a {
    color: #fff;
    text-decoration-line: none;
  }

  svg {
    width: 5%;
  }
}

svg {
  width: 3%;
}
/* -----------------------------------
募集概要
------------------------------------*/
/*
共通
----------------------*/
.l_section {
  max-width: 960px;
  margin-inline: auto;
}
.l_contents {
  padding: 0 32px;
}
.l_contents p {
  margin: 0;
}
.scroll_hint {
  display: none;
}
@media (max-width: 430px) {
  .l_section {
    margin: 0 20px;
  }
  .l_contents {
    padding: 0;
  }
  /* スクローラー（スマホ限定）*/
  .l_table-scroller {
    overflow: auto;
    position: relative;
  }
  .scroll_hint {
    width: 100%;
    position: sticky;
    left: 1px;
    top: 0;
    border-radius: 32px;
    display: block;
    text-align: center;
    pointer-events: none;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.3);
    margin-bottom: 4px;
    font-size: 16px;
    padding: 4px 0;
  }
  .scroll_hint i {
    line-height: 1;
    position: relative;
    margin-left: 8px;
  }
}
/*
募集テーマ
----------------------*/
.theme .theme {
  font-size: 28px;
  font-weight: 700;
}
@media (max-width: 430px) {
  .theme .theme {
    margin-bottom: 16px;
  }
}
/*
募集部門
----------------------*/
.sec table {
  width: 100%;
  margin-bottom: 16px;
}
.sec table th,
.sec table td {
  padding: 12px 15px;
  border: 1px solid #e1e1e1;
}
.sec table th {
  background-color: #e2fcff;
  text-wrap: nowrap;
}
.sec .c_note p {
  margin: 0;
}
/*
募集期間
----------------------*/
.period .period {
  font-size: 32px;
  font-weight: 700;
}
@media (max-width: 430px) {
  .period .period {
    font-size: 28px;
  }
}
/*
募集方法
----------------------*/
.apply table {
  width: 100%;
  margin-bottom: 16px;
}
.apply table th,
.apply table td {
  padding: 12px 15px;
  border: 1px solid #e1e1e1;
}
.apply table th {
  background-color: #e2fcff;
  text-wrap: nowrap;
}
.apply table td[rowspan='3'] {
  text-wrap: nowrap;
}
.apply table td p,
.apply table td li {
  margin: 0;
}
.apply table td a {
  text-decoration: underline;
}
.apply strong {
  font-weight: 700;
  color: #f00;
  text-decoration: underline;
}
@media (max-width: 430px) {
  .apply table td a {
    text-wrap: nowrap;
  }
}
/*
審査
----------------------*/
.examination table {
  width: 100%;
  margin-bottom: 16px;
}
.examination table th,
.examination table td {
  padding: 12px 15px;
  border: 1px solid #e1e1e1;
  vertical-align: top;
}
.examination table th {
  background-color: #e2fcff;
  text-wrap: nowrap;
}
.examination table td a {
  text-decoration: underline;
}
.examination strong {
  font-weight: 700;
  color: #f00;
  text-decoration: underline;
}
.examination .c_note ul {
  list-style-type: none;
}
.examination .c_note p,
.examination .c_note li {
  margin: 0;
}
@media (max-width: 430px) {
  .examination table td a {
    text-wrap: nowrap;
  }
}
/* ---------------------
注意事項
----------------------*/
.attn .c_list {
  list-style-type: none;
}
/* ---------------------
個人情報
----------------------*/
.privacy .c_list {
  margin-top: 8px;
  list-style-type: none;
}
.privacy .c_list ul {
  margin: 0;
  list-style-type: katakana;
  font-size: 16px;
  padding-left: 20px;
}
.privacy .c_list ul li {
  margin-bottom: 0;
}