@charset "utf-8";

/* RESET
---------------------------------------- */
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;}

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; outline:none;}

del {text-decoration:line-through;}

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

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

input, select {vertical-align:middle;}

img {vertical-align:bottom; border:none; font-size:0; line-height:0;}

em {font-style:normal;}

body {-webkit-text-size-adjust:none; font-family: Helvetica, Arial, 'Hiragino Kaku Gothic ProN', 'ƒqƒ‰ƒMƒmŠpƒS ProN W3', 'ƒ‚ƒŠƒTƒ VƒS R', 'Droid Sans', ƒƒCƒŠƒI, 'sans-serif'; font-size:14px;}

address {font-style:normal;}

* {box-sizing: border-box;}

/*
 *	COMMON CLASS
 *
 *------------------------------------*/

* {
    transition-property: width, hegiht, top, left, opacity, transform;
    transition-duration: 1s;
}

a:hover {opacity: 0.7;}

img {width: 100%; height: auto;}

.bg-1 {background: #AD5; color: #FFF;}
.bg-2 {background: #6BDD95; color: #FFF;}
.bg-3 {background: #63B0DD; color: #FFF;}
.bg-4 {background: #8F62DD; color: #FFF;}
.bg-5 {background: #DD69B3; color: #FFF;}
.bg-6 {background: #F17B77; color: #FFF;}
.bg-primary {background: #AD5; color: #FFF;}
.fc-1 {color: #AD5;}
.fc-2 {color: #6BDD95;}
.fc-3 {color: #63B0DD;}
.fc-4 {color: #8F62DD;}
.fc-5 {color: #DD69B3;}
.fc-6 {color: #F17B77;}
.fc-primary {color: #AD5;}
.fc-black {color: #000;}

.mb-1 {margin-bottom: min(1vw, 10px) !important;}
.mb-2 {margin-bottom: min(2vw, 20px) !important;}
.mb-3 {margin-bottom: min(3vw, 30px) !important;}
.mb-4 {margin-bottom: min(4vw, 40px) !important;}
.mb-5 {margin-bottom: min(5vw, 50px) !important;}
.mt-1 {margin-top: min(1vw, 10px) !important;}
.mt-2 {margin-top: min(2vw, 20px) !important;}
.mt-3 {margin-top: min(3vw, 30px) !important;}
.mt-4 {margin-top: min(4vw, 40px) !important;}
.mt-5 {margin-top: min(5vw, 50px) !important;}

.fs-5 {font-size: min(5vw, 50px);}
.fs-4 {font-size: min(4vw, 40px);} /* ページタイトル */
.fs-3 {font-size: min(3vw, 30px);} /* セクションタイトル */
.fs-2 {font-size: min(2vw, 20px);} /* 標準サイズ */
.fs-1 {font-size: min(1.4vw, 14px);} /* 小さめ */
@media (max-width: 500px) {
    .fs-5 {font-size: 10vw}
    .fs-4 {font-size: 8vw}
    .fs-3 {font-size: 6vw}
    .fs-2 {font-size: 4vw}
    .fs-1 {font-size: 2.8vw}
}

.text-center {text-align: center;}
.text-right {text-align: right;}

.transition {transform: rotateY(180deg);}

/*
 * TOPレイアウト
 * ------------------------- */

@media (min-aspect-ratio: 1/1) and (min-width: 901px) {
    .page-home .wrap {position: relative; width: 100vw; height: 100vh; min-height: 50vw;}
    .page-home .tagline {position: absolute; left: 25%; top: 33.33%; width: 25%; height: 33.33%; display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 1.5vw;}
    .page-home .tagline-1 {position: relative; left: -1.5vw;}
    .page-home .tagline-3 {position: relative; left: 1.5vw;}
    .page-home .logo {position: absolute; left: 50%; top: 33.33%; width: 25%; height: 33.33%; padding: 2vw;}
    .page-home .logo img {width: 100%; height: 100%; object-fit: contain;}
    .page-home .nav {position: absolute; width: 25%; height: 33.33%;}
    .page-home .nav-1 {left: 0; top: 0;}
    .page-home .nav-2 {left: 50%; top: 0;}
    .page-home .nav-3 {left: 0; top: 66.66%;}
    .page-home .nav-4 {left: 50%; top: 66.66%;}
    .page-home .nav-5 {left: 75%; top: 33.33%;}
    .page-home .nav p {position: absolute; top: 50%; width: 100%; padding: 1vw; transform: translateY(-50%);}
    .page-home .nav i {display: block; margin-bottom: 1vw; text-align: center; font-size: 5vw;}
    .page-home .nav span {display: block; text-align: center; font-size: 3vw;}
    .page-home .nav small {display: block; text-align: center; font-size: 1vw;}
}

@media (max-aspect-ratio: 1/1), (max-width: 900px) {
    .page-home .wrap {position: relative; width: 100vw; height: 100vh; min-height: 133vw;}
    .page-home .tagline {position: absolute; left: 0; top: 0; width: 33.33%; height: 25%; display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 2.5vw;}
    .page-home .tagline-1 {position: relative; left: -2.5vw;}
    .page-home .tagline-3 {position: relative; left: 2.5vw;}
    .page-home .logo {position: absolute; left: 33.33%; top: 0; width: 33.33%; height: 25%; padding: 2vw;}
    .page-home .logo img {width: 100%; height: 100%; object-fit: contain;}
    .page-home .nav {position: absolute; width: 33.33%; height: 25%;}
    .page-home .nav-1 {left: 66.66%; top: 0;}
    .page-home .nav-2 {left: 33.33%; top: 25%;}
    .page-home .nav-3 {left: 0; top: 50%;}
    .page-home .nav-4 {left: 66.66%; top: 50%;}
    .page-home .nav-5 {left: 33.33%; top: 75%;}
    .page-home .nav p {position: absolute; top: 50%; width: 100%; padding: 1vw; transform: translateY(-50%);}
    .page-home .nav i {display: block; margin-bottom: 1vw; text-align: center; font-size: 5vw;}
    .page-home .nav span {display: block; text-align: center; font-size: 3vw;}
    .page-home .nav small {display: block; text-align: center; font-size: 1vw;}
}

@media (max-width: 500px) {
    .page-home .wrap {position: relative; width: 100vw; height: 100vh; min-height: 215vw;}
    .page-home .tagline {font-size: 3vw;}
    .page-home .tagline-1 {left: -3vw;}
    .page-home .tagline-3 {left: 3vw;}
    .page-home .nav i {display: block; margin-bottom: 1vw; text-align: center; font-size: 7vw;}
    .page-home .nav span {display: block; margin-bottom: 1vw; text-align: center; font-size: 4vw;}
    .page-home .nav small {display: block; text-align: center; font-size: 3vw;}
}

.page-home footer {display: none;}
.nav-secondary {display: none;}

/*
 * 下層レイアウト
 * ------------------------- */

.page-development .nav-development {display: block;}
.page-engineering .nav-engineering {display: block;}
.page-products .nav-products {display: block;}
.page-recruitment .nav-recruitment {display: block;}
.page-profile .nav-profile {display: block;}

@media (min-width: 501px) {
    .page-secondary .wrap {position: relative;}
    .page-secondary header {height: 23vw;}
    .page-secondary .tagline {position: absolute; left: 20%; top: 0; width: 80%; height: 3vw; padding: 1vw; line-height: 1vw; font-size: 1vw; display: flex;}
    .page-secondary .logo {position: absolute; left: 0; top: 0; width: 20%; height: 13vw; padding: 2vw;}
    .page-secondary .logo img {width: 100%; height: 100%; object-fit: contain;}

    .page-secondary .nav {position: absolute; width: 20%; height: 10vw;}
    .page-secondary .nav p {position: absolute; top: 50%; width: 100%; transform: translateY(-50%);}
    .page-secondary .nav i {display: block; margin-bottom: 0.5vw; text-align: center; font-size: 2.5vw;}
    .page-secondary .nav span {display: block; text-align: center; font-size: 2vw;}
    .page-secondary .nav small {display: none;}

    .page-development .nav-1 {left: 0; top: 13vw; width: 100%; height: 10vw;}
    .page-development .nav-2 {left: 20%; top: 3vw;}
    .page-development .nav-3 {left: 40%; top: 3vw;}
    .page-development .nav-4 {left: 60%; top: 3vw;}
    .page-development .nav-5 {left: 80%; top: 3vw;}
    .page-development .nav-1 p {position: absolute; left: 0; top: 0; width: 100%;}
    .page-development .nav-1 i {position: absolute; left: 2vw; top: 2vw; font-size: 6vw;}
    .page-development .nav-1 span {position: absolute; left: 10vw; top: 2vw; font-size: 3vw;}
    .page-development .nav-1 small {display: block; position: absolute; left: 10vw; top: 6vw; font-size: 1.5vw;}

    .page-engineering .nav-1 {left: 20%; top: 3vw;}
    .page-engineering .nav-2 {left: 0; top: 13vw; width: 100%; height: 10vw;}
    .page-engineering .nav-3 {left: 40%; top: 3vw;}
    .page-engineering .nav-4 {left: 60%; top: 3vw;}
    .page-engineering .nav-5 {left: 80%; top: 3vw;}
    .page-engineering .nav-2 p {position: absolute; left: 0; top: 0; width: 100%;}
    .page-engineering .nav-2 i {position: absolute; left: 2vw; top: 2vw; font-size: 6vw;}
    .page-engineering .nav-2 span {position: absolute; left: 10vw; top: 2vw; font-size: 3vw;}
    .page-engineering .nav-2 small {display: block; position: absolute; left: 10vw; top: 6vw; font-size: 1.5vw;}

    .page-products .nav-1 {left: 20%; top: 3vw;}
    .page-products .nav-2 {left: 40%; top: 3vw;}
    .page-products .nav-3 {left: 0; top: 13vw; width: 100%; height: 10vw;}
    .page-products .nav-4 {left: 60%; top: 3vw;}
    .page-products .nav-5 {left: 80%; top: 3vw;}
    .page-products .nav-3 p {position: absolute; left: 0; top: 0; width: 100%;}
    .page-products .nav-3 i {position: absolute; left: 2vw; top: 2vw; font-size: 6vw;}
    .page-products .nav-3 span {position: absolute; left: 10vw; top: 2vw; font-size: 3vw;}
    .page-products .nav-3 small {display: block; position: absolute; left: 10vw; top: 6vw; font-size: 1.5vw;}

    .page-recruitment .nav-1 {left: 20%; top: 3vw;}
    .page-recruitment .nav-2 {left: 40%; top: 3vw;}
    .page-recruitment .nav-3 {left: 60%; top: 3vw;}
    .page-recruitment .nav-4 {left: 0; top: 13vw; width: 100%; height: 10vw;}
    .page-recruitment .nav-5 {left: 80%; top: 3vw;}
    .page-recruitment .nav-4 p {position: absolute; left: 0; top: 0; width: 100%;}
    .page-recruitment .nav-4 i {position: absolute; left: 2vw; top: 2vw; font-size: 6vw;}
    .page-recruitment .nav-4 span {position: absolute; left: 10vw; top: 2vw; font-size: 3vw;}
    .page-recruitment .nav-4 small {display: block; position: absolute; left: 10vw; top: 6vw; font-size: 1.5vw;}

    .page-profile .nav-1 {left: 20%; top: 3vw;}
    .page-profile .nav-2 {left: 40%; top: 3vw;}
    .page-profile .nav-3 {left: 60%; top: 3vw;}
    .page-profile .nav-4 {left: 80%; top: 3vw;}
    .page-profile .nav-5 {left: 0; top: 13vw; width: 100%; height: 10vw;}
    .page-profile .nav-5 p {position: absolute; left: 0; top: 0; width: 100%;}
    .page-profile .nav-5 i {position: absolute; left: 2vw; top: 2vw; font-size: 6vw;}
    .page-profile .nav-5 span {position: absolute; left: 10vw; top: 2vw; font-size: 3vw;}
    .page-profile .nav-5 small {display: block; position: absolute; left: 10vw; top: 6vw; font-size: 1.5vw;}

    .nav-secondary-toggle {display: none;}
    .nav-secondary-state {display: none;}
    .nav-secondary-list {display: flex; position: absolute; right: 1vw; top: 14vw; width: 60%; height: 8vw; flex-wrap: wrap; justify-content: flex-end; align-items: center;}
    .nav-secondary-list a {display: block; height: 3vw; margin: 0 0.5vw; padding: 0 2vw; line-height: 3vw; background: #FFF; border-radius: 1.5vw; text-decoration: none; font-weight: bold;}

    .page-secondary footer {margin-top: 5vw;}
    .footer-nav {display: block; padding: 2vw; text-decoration: none; font-size: 2vw;}
    .footer-nav i {width: 4vw;}
    .copyright {padding: 3vw; text-align: center; line-height: 3vw; background: #AD5; color: #FFF; font-size: 2vw;}
    .copyright span {display: block;}
}

@media (max-width: 500px) {
    .page-secondary .wrap {position: relative;}
    .page-secondary header {min-height: 45vw;}
    .page-secondary .tagline {position: absolute; left: 32%; top: 0; width: 68%; height: 13vw; padding-left: 2%; line-height: 13vw; text-align: center; font-size: 3vw; display: flex; justify-content: center;}
    .page-secondary .logo {position: absolute; left: 0; top: 0; width: 32%; height: 13vw; padding: 2vw;}
    .page-secondary .logo img {width: 100%; height: 100%; object-fit: contain;}

    .page-secondary .nav {position: absolute; width: 25%; height: 12vw;}
    .page-secondary .nav p {position: absolute; top: 50%; width: 100%; transform: translateY(-50%);}
    .page-secondary .nav i {display: block; text-align: center; font-size: 6vw;}
    .page-secondary .nav span {display: none;}
    .page-secondary .nav small {display: none;}

    .page-development .nav-1 {left: 0; top: 25vw; width: 100%; height: 20vw;}
    .page-development .nav-2 {left: 0; top: 13vw;}
    .page-development .nav-3 {left: 25%; top: 13vw;}
    .page-development .nav-4 {left: 50%; top: 13vw;}
    .page-development .nav-5 {left: 75%; top: 13vw;}
    .page-development .nav-1 p {position: absolute; left: 0; top: 0; width: 100%;}
    .page-development .nav-1 i {position: absolute; left: 5vw; top: 5vw; font-size: 10vw;}
    .page-development .nav-1 span {display: block; position: absolute; left: 20vw; top: 5vw; font-size: 4vw;}
    .page-development .nav-1 small {display: block; position: absolute; left: 20vw; top: 10vw; font-size: 4vw;}

    .page-engineering .nav-2 {left: 0; top: 25vw; width: 100%; height: 20vw;}
    .page-engineering .nav-1 {left: 0; top: 13vw;}
    .page-engineering .nav-3 {left: 25%; top: 13vw;}
    .page-engineering .nav-4 {left: 50%; top: 13vw;}
    .page-engineering .nav-5 {left: 75%; top: 13vw;}
    .page-engineering .nav-2 p {position: absolute; left: 0; top: 0; width: 100%;}
    .page-engineering .nav-2 i {position: absolute; left: 5vw; top: 5vw; font-size: 10vw;}
    .page-engineering .nav-2 span {display: block; position: absolute; left: 20vw; top: 5vw; font-size: 4vw;}
    .page-engineering .nav-2 small {display: block; position: absolute; left: 20vw; top: 10vw; font-size: 4vw;}

    .page-products .nav-3 {left: 0; top: 25vw; width: 100%; height: 20vw;}
    .page-products .nav-1 {left: 0; top: 13vw;}
    .page-products .nav-2 {left: 25%; top: 13vw;}
    .page-products .nav-4 {left: 50%; top: 13vw;}
    .page-products .nav-5 {left: 75%; top: 13vw;}
    .page-products .nav-3 p {position: absolute; left: 0; top: 0; width: 100%;}
    .page-products .nav-3 i {position: absolute; left: 5vw; top: 5vw; font-size: 10vw;}
    .page-products .nav-3 span {display: block; position: absolute; left: 20vw; top: 5vw; font-size: 4vw;}
    .page-products .nav-3 small {display: block; position: absolute; left: 20vw; top: 10vw; font-size: 4vw;}

    .page-recruitment .nav-4 {left: 0; top: 25vw; width: 100%; height: 20vw;}
    .page-recruitment .nav-1 {left: 0; top: 13vw;}
    .page-recruitment .nav-2 {left: 25%; top: 13vw;}
    .page-recruitment .nav-3 {left: 50%; top: 13vw;}
    .page-recruitment .nav-5 {left: 75%; top: 13vw;}
    .page-recruitment .nav-4 p {position: absolute; left: 0; top: 0; width: 100%;}
    .page-recruitment .nav-4 i {position: absolute; left: 5vw; top: 5vw; font-size: 10vw;}
    .page-recruitment .nav-4 span {display: block; position: absolute; left: 20vw; top: 5vw; font-size: 4vw;}
    .page-recruitment .nav-4 small {display: block; position: absolute; left: 20vw; top: 10vw; font-size: 4vw;}

    .page-profile .nav-5 {left: 0; top: 25vw; width: 100%; height: 20vw;}
    .page-profile .nav-1 {left: 0; top: 13vw;}
    .page-profile .nav-2 {left: 25%; top: 13vw;}
    .page-profile .nav-3 {left: 50%; top: 13vw;}
    .page-profile .nav-4 {left: 75%; top: 13vw;}
    .page-profile .nav-5 p {position: absolute; left: 0; top: 0; width: 100%;}
    .page-profile .nav-5 i {position: absolute; left: 5vw; top: 5vw; font-size: 10vw;}
    .page-profile .nav-5 span {display: block; position: absolute; left: 20vw; top: 5vw; font-size: 4vw;}
    .page-profile .nav-5 small {display: block; position: absolute; left: 20vw; top: 10vw; font-size: 4vw;}

    .nav-secondary-toggle {display: block; position: absolute; right: 2vw; top: 30vw; width: 20vw; height: 10vw; text-align: center; line-height: 10vw; background: #FFF;}
    .nav-secondary-state {display: none;}
    .nav-secondary-list {display: none; position: relative; left: 100vw; top: 45vw; margin-bottom: 45vw; transition: left 1s;}
    .nav-secondary-list a {display: block; padding: 3vw 4vw; background: #555; color: #FFF; border-bottom: 1px solid #FFF; text-decoration: none;}
    .nav-secondary-state:checked + .nav-secondary-list {display: block; left: 0;}

    .page-secondary footer {margin-top: 10vw;}
    .footer-nav {display: block; padding: 4vw; text-decoration: none; font-size: 4vw;}
    .footer-nav i {width: 8vw;}
    .copyright {padding: 6vw; text-align: center; line-height: 6vw; background: #AD5; color: #FFF; font-size: 4vw;}
    .copyright span {display: block;}
}


/*
 * TOPコンテンツ
 * ------------------------- */

@media (min-aspect-ratio: 1/1) and (min-width: 901px) {
    .content-home {position: absolute; width: 25%; height: 33.33%;}
    .content-home-1 {left: 25%; top: 0;}
    .content-home-2 {left: 75%; top: 0;}
    .content-home-3 {left: 0; top: 33.33%;}
    .content-home-4 {left: 25%; top: 66.66%;}
    .content-home-5 {left: 75%; top: 66.66%;}
    .content-home-inner {position: absolute; top: 50%; width: 100%; padding: 2vw; transform: translateY(-50%);}
    .content-home-inner h2 {margin-top: 1.5vw; font-size: 1.5vw;}
    .content-home-inner h2:first-child {margin-top: 0;}
    .content-home-inner p {font-size: 1vw;}
}

@media (max-aspect-ratio: 1/1), (max-width: 900px) {
    .content-home {position: absolute; width: 33.33%; height: 25%;}
    .content-home-1 {left: 66.66%; top: 25%;}
    .content-home-2 {left: 0; top: 25%;}
    .content-home-3 {left: 33.33%; top: 50%;}
    .content-home-4 {left: 66.66%; top: 75%;}
    .content-home-5 {left: 0; top: 75%;}
    .content-home-inner {position: absolute; top: 50%; width: 100%; padding: 2vw; transform: translateY(-50%);}
    .content-home-inner h2 {margin-top: 2.5vw; font-size: 2.5vw;}
    .content-home-inner h2:first-child {margin-top: 0;}
    .content-home-inner p {font-size: 1.5vw;}
}

@media (max-width: 500px) {
    .content-home-inner h2 {margin-top: 2vw; font-size: 3.5vw; line-height: 1.25;}
    .content-home-inner h2:first-child {margin-top: 0;}
    .content-home-inner p {font-size: 3vw; line-height: 1.25;}
}

/*
 * 下層コンテンツ (共通)
 * ------------------------- */

.content-development .fc-primary,
.content-development .page-title,
.content-development .section-title,
.content-development .table-col-head,
.content-development strong {color: #6BDD95;}
.content-engineering .fc-primary,
.content-engineering .page-title,
.content-engineering .section-title,
.content-engineering .table-col-head,
.content-engineering strong {color: #63B0DD;}
.content-products .fc-primary,
.content-products .page-title,
.content-products .section-title,
.content-products .table-col-head,
.content-products strong {color: #8F62DD;}
.content-recruitment .fc-primary,
.content-recruitment .page-title,
.content-recruitment .section-title,
.content-recruitment .table-col-head,
.content-recruitment strong {color: #DD69B3;}
.content-profile .fc-primary,
.content-profile .page-title,
.content-profile .section-title,
.content-profile .table-col-head,
.content-profile strong {color: #F17B77;}

/* バナー */
.banner {display: block; position: relative; padding: min(1.5vw, 15px); padding-left: min(3vw, 30px); text-decoration: none; color: #FFF;}
.banner::before {content:""; display: block; position: absolute; top: 10px; left: 10px; width: 2px; height: calc(100% - 20px); background: #FFF;}
.banner::after {content:"\f04e"; display: block; position: absolute; bottom: 10px; right: 10px; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
.banner-title {font-weight: bold; font-size: min(2.5vw, 25px);}
.banner-decorate {font-size: min(1.5vw, 15px); line-height: min(2.5vw, 25px);}
.content-development .banner {background-color: #6BDD95;}
.content-engineering .banner {background-color: #63B0DD;}
.content-products .banner {background-color: #8F62DD;}
.content-recruitment .banner {background-color: #DD69B3;}
.content-profile .banner {background-color: #F17B77;}
@media (max-width: 500px) {
    .banner {padding-left: 6vw;}
    .banner-title {font-size: 5vw;}
    .banner-decorate {font-size: 3vw; line-height: 5vw;}
}

/* ボタン */
.button {display: inline-block; position: relative; padding: min(1.5vw, 15px) min(6vw, 60px) min(1.5vw, 15px) min(4vw, 40px); text-decoration: none; font-weight: bold; font-size: min(2.5vw, 25px); color: #FFF;}
.button::after {content:"\f054"; position: absolute; right: 10px; top: 50%; height: 30px; margin-top: -15px; line-height: 30px !important; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
.button-decorate {font-size: min(1.5vw, 15px); line-height: min(2.5vw, 25px);}
.content-development .button {background-color: #6BDD95;}
.content-engineering .button {background-color: #63B0DD;}
.content-products .button {background-color: #8F62DD;}
.content-recruitment .button {background-color: #DD69B3;}
.content-profile .button {background-color: #F17B77;}
@media (max-width: 500px) {
    .button {padding: 3vw 12vw 3vw 8vw; font-size: 5vw;}
    .button-decorate {font-size: 3vw; line-height: 5vw;}
}

/* カラム組 */
.cols {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: stretch; margin-left: -10px; margin-right: -10px;}
.col-8 {flex-basis: 66.66%; padding-left: 10px; padding-right: 10px;}
.col-6 {flex-basis: 50%; padding-left: 10px; padding-right: 10px;}
.col-4 {flex-basis: 33.33%; padding-left: 10px; padding-right: 10px;}
.col-3 {flex-basis: 25%; padding-left: 10px; padding-right: 10px;}
@media (max-width: 500px) {
    .cols {margin-left: 0; margin-right: 0;}
    .col-8,
    .col-6,
    .col-4,
    .col-3 {flex-basis: 100%; margin-bottom: 5vw; padding-left: 0; padding-right: 0;}
    .col-8:last-child,
    .col-6:last-child,
    .col-4:last-child,
    .col-3:last-child {margin-bottom: 0;}
}

/* 画像 */
figure.bordered {border: 1px solid #CCC;}

/* タイポグラフィ */
.typography {padding: min(2vw, 20px) min(3vw, 30px); background: linear-gradient(120deg, #FAFAFA, #F4F4F4)}

/* カード */
.card {padding: min(2vw, 20px); border: 1px solid #EEE; border-left: 2px solid #DDD; border-radius: 0 0 min(2vw, 20px) 0;}
.card-title {margin-bottom: min(2vw, 20px); font-size: min(2.5vw, 25px);}
@media (max-width: 500px) {
    .card-title {font-size: 5vw;}
}

@media (min-width: 1001px) {
    .content-secondary {width: 1000px; margin: 0 auto; padding: 40px; font-size: 20px; min-height: 100vh;}
    .page-title {margin: 0 -10px 30px; padding: 0 10px 10px; font-size: 40px; border-bottom: 2px solid #CCC;}
    .section-title {margin-bottom: 20px; font-size: 30px;}
    .block-title {margin-top: 20px; margin-bottom: 20px; font-size: 25px;}
    .block-title:first-child {margin-top: 0;}
    .section-plain {margin-bottom: 80px;}
    .section-plain p {margin-bottom: 20px;}
    .section-plain p:last-child {margin-bottom: 0;}

    .table {margin-bottom: 40px; border-top: 1px solid #CCC;}
    .table-row {display: flex; border-bottom: 1px solid #CCC;}
    .table-col,
    .table-col-head {flex-basis: 100px; padding: 10px; flex-grow: 1;}
    .table-col-1 {flex-grow: 1;}
    .table-col-2 {flex-grow: 2;}
    .table-col-3 {flex-grow: 3;}
    .table-col-4 {flex-grow: 4;}
}

@media (min-width: 501px) and (max-width: 1000px) {
    .content-secondary {padding: 4vw; font-size: 2vw; min-height: 100vh;}
    .page-title {margin: 0 -1vw 3vw; padding: 0 1vw 1vw; font-size: 4vw; border-bottom: 2px solid #CCC;}
    .section-title {margin-bottom: 2vw; font-size: 3vw;}
    .block-title {margin-top: 2vw; margin-bottom: 2vw; font-size: 2.5vw;}
    .block-title:first-child {margin-top: 0;}
    .section-plain {margin-bottom: 8vw;}
    .section-plain p {margin-bottom: 2vw;}
    .section-plain p:last-child {margin-bottom: 0;}

    .table {margin-bottom: 4vw;}
    .table-row {display: flex;}
    .table-col,
    .table-col-head {flex-basis: 10vw; padding: 1vw; flex-grow: 1;}
    .table-col-1 {flex-grow: 1;}
    .table-col-2 {flex-grow: 2;}
    .table-col-3 {flex-grow: 3;}
    .table-col-4 {flex-grow: 4;}
}

@media (max-width: 500px) {
    .content-secondary {padding: 5vw; font-size: 4vw; min-height: 100vh;}
    .page-title {margin: 0 -1vw 6vw; padding: 0 1vw 2vw; font-size: 8vw; border-bottom: 2px solid #CCC;}
    .section-title {margin-bottom: 3vw; font-size: 6vw;}
    .block-title {margin-top: 3vw; margin-bottom: 3vw; font-size: 5vw;}
    .block-title:first-child {margin-top: 0;}
    .section-plain {margin-bottom: 8vw;}
    .section-plain p {margin-bottom: 4vw;}
    .section-plain p:last-child {margin-bottom: 0;}

    .table-row {margin-bottom: 2vw;}
}

/*
 * 下層コンテンツ (XXXX)
 * ------------------------- */

 /*
 * 下層コンテンツ (XXXX)
 * ------------------------- */