body{
    font-family: "Hiragino maru Gothic ProN W4", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "arial", "Meiryo", "MS PGothic", sans-serif !important;
    font-size: 1rem;
    line-height: 1.75;
  }

        :root {
            --primary-blue: #0070e0; /* 明るい青 */
            --dark-blue-bg: #2b3a67; /* 濃い青 */
            --light-blue-bg: #f0f8ff; /* 非常に明るい青 */
            --section-title-bg: #4a6fa5; /* セクションタイトル用の中間色 */
            --text-dark: #333;
            --text-light: #fff;
            --card-shadow: 0 5px 15px rgba(0,0,0,0.08);
            --card-hover-shadow: 0 8px 25px rgba(0,0,0,0.15);
            --border-radius: 8px;
        }

        body {
            font-family: "Hiragino maru Gothic ProN W4", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "arial", "Meiryo", "MS PGothic", sans-serif !important;
            background-color: #f8fbfd; /* 全体的に明るい背景 */
            color: var(--text-dark);
        }

        /* Navbar Customization */
        .uk-navbar-container {
            background-color: var(--text-light); /* 白いナビゲーションバー */
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
            z-index: 1000; /* ヘッダー画像より前面に */
        }
        .uk-navbar-container .uk-navbar-item,
        .uk-navbar-container .uk-navbar-nav > li > a {
            color: var(--text-dark);
            font-weight: 500;
        }
        .uk-navbar-container .uk-navbar-nav > li > a:hover,
        .uk-navbar-container .uk-navbar-nav > li.uk-active > a {
            color: var(--primary-blue);
        }
        .uk-navbar-brand {
            font-weight: 700;
            font-size: 1.3rem;
            color: var(--dark-blue-bg);
        }
        .uk-navbar-toggle {
            color: var(--dark-blue-bg);
        }
        .uk-navbar-toggle:hover {
            color: var(--primary-blue);
        }

 /* heading_sub */
.heading_sub {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    font-size: 2rem;
    text-shadow: 1px 1px 1px #333;
}
.heading_sub::before,
.heading_sub::after {
    width: 3px;
    height: 40px;
    background-color: #ffffff;
    content: '';
}
.heading_sub::before {
    transform: rotate(-35deg);
    margin-right: 30px;
}
.heading_sub::after {
    transform: rotate(35deg);
    margin-left: 30px;
}
/*heading_bun*/
.heading_bun{
    padding:0 .4em .2em;
    border-bottom: 1px solid #ffffff;
    color: #ffffff;
    font-size: 1.2rem;
    text-align: center;

}
        /* Header Section Customization */
        .uk-section-hero {
            color: var(--text-light);
            padding: 120px 20px;
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        .uk-section-hero::before { /* オーバーレイ */
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            /*background-color: rgba(0, 0, 0, 0.2);*/
            z-index: 1;
        }
        .uk-section-hero .uk-container {
            position: relative;
            z-index: 2;
        }
        .uk-section-hero h1 {
            font-size: 2.8rem;
            font-weight: 700;
            margin-bottom: 20px;
            line-height: 1.3;
        }
        .uk-section-hero .uk-text-lead {
            font-size: 1.2rem;
            line-height: 1.8;
            max-width: 850px;
            margin: 0 auto 40px auto;
            font-weight: 300;
        }
        .uk-section-hero .uk-button-hero {
            background-color: var(--text-light);
            color: var(--primary-blue);
            padding: 15px 35px;
            border-radius: 50px; /* 丸いボタン */
            font-size: 1.1rem;
            font-weight: 600;
            transition: all 0.3s ease;
            box-shadow: var(--card-shadow);
        }
        .uk-section-hero .uk-button-hero:hover {
            background-color: var(--primary-blue);
            color: var(--text-light);
            transform: translateY(-3px);
            box-shadow: var(--card-hover-shadow);
        }

        /* Section Title Customization */
        .uk-section-title-custom {
            background-color: var(--section-title-bg); /* 中間色の背景 */
            color: var(--text-light);
            text-align: center;
            padding: 30px 20px;
            margin-bottom: 50px;
            font-size: 2rem;
            font-weight: 700;
            box-shadow: var(--card-shadow);
        }

        /* Project Card Customization */
        .uk-card-project {
            background-color: var(--text-light);
            border-radius: var(--border-radius);
            box-shadow: var(--card-shadow);
            transition: all 0.3s ease;
            height: 100%; /* グリッドの高さ揃えに必要 */
        }
        .uk-card-project:hover {
            transform: translateY(-5px);
            box-shadow: var(--card-hover-shadow);
        }
        .uk-card-project .uk-card-media-top {
            padding: 30px 20px 15px 20px;
            display: flex;
            justify-content: center;
        }
        .uk-card-project .uk-card-media-top img {
            width: 160px; /* 少し大きめ */
            height: 160px;
            border-radius: 50%;
            object-fit: cover;
            border: 7px solid rgb(21, 160, 215); /* 太めの青い枠線 */
            box-shadow: 0 4px 10px rgba(0,0,0,0.15); /* 影 */
        }
        .uk-card-project.placeholder .uk-card-media-top img {
            border: 5px dashed #b0c4de; /* Placeholder用点線ボーダー */
            background-color: #e6f0f7;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #6a82a0;
            font-weight: 700;
            font-size: 1.3rem;
        }
        .uk-card-project .uk-card-body {
            padding: 25px;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }
        .uk-card-project .uk-card-title {
            font-size: 1.2rem;
            font-weight: 700;
            color: var(--dark-blue-bg);
            margin-bottom: 10px;
            line-height: 1.4;
        }
        .uk-card-project .uk-text-meta {
            font-size: 1rem;
            font-weight: 500;
            color: var(--primary-blue);
            margin-bottom: 15px;
        }
        .uk-card-project .uk-card-body p {
            font-size: 0.95rem;
            line-height: 1.7;
            color: #666;
            flex-grow: 1;
            margin-bottom: 20px;
        }
        .uk-card-project .uk-button-text {
            color: var(--primary-blue);
            font-weight: 500;
            transition: color 0.3s ease;
        }
        .uk-card-project .uk-button-text:hover {
            color: var(--dark-blue-bg);
        }

 /* Offcanvas Customization */
        .uk-offcanvas-bar {
            background-color: var(--dark-blue-bg);
            color: var(--text-light);
        }
        .uk-offcanvas-bar .uk-nav > li > a {
            color: var(--text-light);
            font-weight: 500;
            padding: 12px 20px;
            font-size: 1rem;
        }
        .uk-offcanvas-bar .uk-nav > li > a:hover,
        .uk-offcanvas-bar .uk-nav > li.uk-active > a {
            background-color: rgba(255,255,255,0.1);
            color: var(--primary-blue);
        }
/*** box ***/
.box1{
    border-radius: 8px;
    box-sizing: inherit;
    box-shadow: 0 5px 0 0 rgba(0, 0, 0, .2);
}
.box2{
    border-radius: 7px;
    box-sizing: border-box;
    margin: 1.2em 0 1em 1em;
    width: 85%;
}
.box3{
    color: #fff;
    border: 1px solid #ffffff;
    border-radius: 5px;
    box-sizing: inherit;
    box-shadow: 0 5px 0 0 rgba(0, 0, 0, .2);
}
.box4{
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.3);
    border: 1px solid #ffffff;
}
/** Navbar **/

/**Button**/
/**balloon**/
.balloon-right {
  position: relative;
  display: inline-block;
  margin: 1.5em 15px 1.5em 0;
  padding: 1em;
  color: #121212;
  font-size: 20px;
  font-weight: bold;
  background: #ffffff;
  border-radius: 5px;
  box-sizing: border-box;
}
.balloon-right:before {
  content: "";
  position: absolute;
  top: 70%;
  right: -24px;
  margin-top: -12px;
  border: 12px solid transparent;
  border-left: 12px solid #FFF;
  z-index: 2;
}

.balloon-left {
  position: relative;
  display: inline-block;
  top: 50%;
  margin: 1.5em -5em 1.5em 15px;
  padding: 1em;
  color: #121212;
  font-size: 20px;
  font-weight: bold;
  background: #ffffff;
  border-radius: 5px;
  box-sizing: border-box;
}
.balloon-left:before {
  content: "";
  position: absolute;
  top: 70%;
  left: -25px;
  margin-top: -10px;
  border: 10px solid transparent;
  border-right: 15px solid #ffffff;
  z-index: 0;
}
/*ribbon*/
.ribbon {
    position: relative;
    padding: .5em .7em;
    background-color: #1e5ac2;
    border-radius: 3px;
    font-size: 1rem;
    color: #fff;
}
.ribbon::before {
    position: absolute;
    top: 100%;
    left: 0;
    border-bottom: solid 10px transparent;
    border-right: solid 20px #023181;
    content: '';
}
.uk-heading-bullet::before {
    content: "";
    display: inline-block;
    position: relative;
    top: calc(-.1 * 1em);
    vertical-align: middle;
    height: calc(4px + .7em);
    margin-right: calc(5px + .2em);
    border-left: calc(5px + .1em) solid #1e5ac2;
}
/*fontsize*/
.text85{
    font-size: 0.85em;
}
.text90{
    font-size: 0.9em;
}
.text110{
    font-size: 1.1rem;
}
.text120{
    font-size:1.2em;
}
/*color*/
.color-f{
    color: #fff;
}
.color-6{
    color: #666;
}
.color-orange{
    color: #ff6900;
}
.bb-blue{
    border-bottom: 1px solid rgb(80, 192, 212);
}
.r-menu .uk-tab::before {
    border-bottom: none;
} 
.i-font{
        font-weight: bold;
        font-style:italic;
    }
.bg_footer{
    background-color: var(--section-title-bg);
}
figcaption {
  color: #000;
  font-size: 90%;
  margin: 10px;
}
/*hr*/
.hr-topi {
    height: 3px;
    margin: 20px auto;
    border: none;
    border-top: 2px dashed rgb(80, 192, 212);
    text-align: center;
}
/*pagetop*/
#pagetop {
  position: fixed;
  right: 30px;
  bottom: 20px;
  z-index: 5500;
  display: block;
  cursor: pointer;
  background: rgba(0, 0, 0, .5);
  border: 1px solid #ffffff;
  border-radius: 5px;
  opacity: 0;
  transition: .5s;
  color: #fff;
  pointer-events: none;  /* 追加 */
}
/**description list**/
.yogo {
    background-color: #fff;
    font-size: 90%;
    box-shadow: 3px 3px 16px #eeeeee;
}