/*
Theme Name: sf
*/
html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%
}
body {
margin: 0
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
display: block
}
audio, canvas, progress, video {
display: inline-block;
vertical-align: baseline
}
audio:not([controls]) {
display: none;
height: 0
}
[hidden], template {
display: none
}
a {
background-color: transparent
}
a:active, a:hover {
outline: 0
}
abbr[title] {
border-bottom: 1px dotted
}
b, strong {
font-weight: bold
}
dfn {
font-style: italic
}
h1 {
font-size: 2em;
margin: 0.67em 0
}
mark {
background: #ff0;
color: #000
}
small {
font-size: 80%
}
sub, sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline
}
sup {
top: -0.5em
}
sub {
bottom: -0.25em
}
img {
border: 0
}
svg:not(:root) {
overflow: hidden
}
figure {
margin: 1em 40px
}
hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0
}
pre {
overflow: auto
}
code, kbd, pre, samp {
font-family: monospace, monospace;
font-size: 1em
}
button, input, optgroup, select, textarea {
color: inherit;
font: inherit;
margin: 0
}
button {
overflow: visible
}
button, select {
text-transform: none
}
button, html input[type="button"], input[type="reset"], input[type="submit"] {
-webkit-appearance: button;
cursor: pointer
}
button[disabled], html input[disabled] {
cursor: default
}
button::-moz-focus-inner, input::-moz-focus-inner {
border: 0;
padding: 0
}
input {
line-height: normal
}
input[type="checkbox"], input[type="radio"] {
box-sizing: border-box;
padding: 0
}
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {
height: auto
}
input[type="search"] {
-webkit-appearance: textfield;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box
}
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none
}
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em
}
legend {
border: 0;
padding: 0
}
textarea {
overflow: auto
}
optgroup {
font-weight: bold
}
table {
border-collapse: collapse;
border-spacing: 0
}
td, th {
padding: 0
}
.container {
position: relative;
width: 100%;
max-width: 960px;
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box
}
.column, .columns {
width: 100%;
float: left;
box-sizing: border-box
}
@media (min-width:400px) {
.container {
width: 85%;
padding: 0
}
}
@media (min-width:550px) {
.container {
width: 80%
}
.column, .columns {
margin-left: 4%
}
.column:first-child, .columns:first-child {
margin-left: 0
}
.one.column, .one.columns {
width: 4.66666666667%
}
.two.columns {
width: 13.3333333333%
}
.three.columns {
width: 22%
}
.four.columns {
width: 30.6666666667%
}
.five.columns {
width: 39.3333333333%
}
.six.columns {
width: 48%
}
.seven.columns {
width: 56.6666666667%
}
.eight.columns {
width: 65.3333333333%
}
.nine.columns {
width: 74.0%
}
.ten.columns {
width: 82.6666666667%
}
.eleven.columns {
width: 91.3333333333%
}
.twelve.columns {
width: 100%;
margin-left: 0
}
.one-third.column {
width: 30.6666666667%
}
.two-thirds.column {
width: 65.3333333333%
}
.one-half.column {
width: 48%
}
.offset-by-one.column, .offset-by-one.columns {
margin-left: 8.66666666667%
}
.offset-by-two.column, .offset-by-two.columns {
margin-left: 17.3333333333%
}
.offset-by-three.column, .offset-by-three.columns {
margin-left: 26%
}
.offset-by-four.column, .offset-by-four.columns {
margin-left: 34.6666666667%
}
.offset-by-five.column, .offset-by-five.columns {
margin-left: 43.3333333333%
}
.offset-by-six.column, .offset-by-six.columns {
margin-left: 52%
}
.offset-by-seven.column, .offset-by-seven.columns {
margin-left: 60.6666666667%
}
.offset-by-eight.column, .offset-by-eight.columns {
margin-left: 69.3333333333%
}
.offset-by-nine.column, .offset-by-nine.columns {
margin-left: 78.0%
}
.offset-by-ten.column, .offset-by-ten.columns {
margin-left: 86.6666666667%
}
.offset-by-eleven.column, .offset-by-eleven.columns {
margin-left: 95.3333333333%
}
.offset-by-one-third.column, .offset-by-one-third.columns {
margin-left: 34.6666666667%
}
.offset-by-two-thirds.column, .offset-by-two-thirds.columns {
margin-left: 69.3333333333%
}
.offset-by-one-half.column, .offset-by-one-half.columns {
margin-left: 52%
}
}
html {
font-size: 62.5%;
}
body {
font-size: 1.5em;
line-height: 1.6;
font-weight: 400;
font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, 'メイリオ', Meiryo, sans-serif;
color: #222
}
h1, h2, h3, h4, h5, h6 {
margin-top: 0;
margin-bottom: 2rem;
font-weight: 300
}
h1 {
font-size: 4.0rem;
line-height: 1.2;
letter-spacing: -.1rem
}
h2 {
font-size: 3.6rem;
line-height: 1.25;
letter-spacing: -.1rem
}
h3 {
font-size: 3.0rem;
line-height: 1.3;
letter-spacing: -.1rem
}
h4 {
font-size: 2.4rem;
line-height: 1.35;
letter-spacing: -.08rem
}
h5 {
font-size: 1.8rem;
line-height: 1.5;
letter-spacing: -.05rem
}
h6 {
font-size: 1.5rem;
line-height: 1.6;
letter-spacing: 0
}
@media (min-width:550px) {
h1 {
font-size: 5.0rem
}
h2 {
font-size: 4.2rem
}
h3 {
font-size: 3.6rem
}
h4 {
font-size: 3.0rem
}
h5 {
font-size: 2.4rem
}
h6 {
font-size: 1.5rem
}
}
p {
margin-top: 0
}
a {
color: #1EAEDB
}
a:hover {
color: #0FA0CE
}
.button, button, input[type="submit"], input[type="reset"], input[type="button"] {
display: inline-block;
height: 38px;
padding: 0 30px;
color: #555;
text-align: center;
font-size: 11px;
font-weight: 600;
line-height: 38px;
letter-spacing: .1rem;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
background-color: transparent;
border-radius: 4px;
border: 1px solid #bbb;
cursor: pointer;
box-sizing: border-box
}
.button:hover, button:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover, .button:focus, button:focus, input[type="submit"]:focus, input[type="reset"]:focus, input[type="button"]:focus {
color: #333;
border-color: #888;
outline: 0
}
.button.button-primary, button.button-primary, input[type="submit"].button-primary, input[type="reset"].button-primary, input[type="button"].button-primary {
color: #FFF;
background-color: #33C3F0;
border-color: #33C3F0
}
.button.button-primary:hover, button.button-primary:hover, input[type="submit"].button-primary:hover, input[type="reset"].button-primary:hover, input[type="button"].button-primary:hover, .button.button-primary:focus, button.button-primary:focus, input[type="submit"].button-primary:focus, input[type="reset"].button-primary:focus, input[type="button"].button-primary:focus {
color: #FFF;
background-color: #1EAEDB;
border-color: #1EAEDB
}
input[type="date"], input[type="email"], input[type="number"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"], textarea, select {
height: 38px;
padding: 6px 10px;
background-color: #fff;
border: 1px solid #D1D1D1;
border-radius: 4px;
box-shadow: none;
box-sizing: border-box
}
input[type="date"], input[type="email"], input[type="number"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"], textarea {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none
}
textarea {
min-height: 65px;
padding-top: 6px;
padding-bottom: 6px
}
input[type="date"]:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="text"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="password"]:focus, textarea:focus, select:focus {
border: 1px solid #33C3F0;
outline: 0
}
label, legend {
display: block;
margin-bottom: .5rem;
font-weight: 600
}
fieldset {
padding: 0;
border-width: 0
}
input[type="checkbox"], input[type="radio"] {
display: inline
}
label > .label-body {
display: inline-block;
margin-left: .5rem;
font-weight: normal
}
ul {
list-style: circle inside
}
ol {
list-style: decimal inside
}
ol, ul {
padding-left: 0;
margin-top: 0
}
ul ul, ul ol, ol ol, ol ul {
margin: 1.5rem 0 1.5rem 3rem;
font-size: 90%
}
li {
margin-bottom: 1rem
}
code {
padding: .2rem .5rem;
margin: 0 .2rem;
font-size: 90%;
white-space: nowrap;
background: #F1F1F1;
border: 1px solid #E1E1E1;
border-radius: 4px
}
pre > code {
display: block;
padding: 1rem 1.5rem;
white-space: pre
}
th, td {
padding: 12px 15px;
text-align: left;
border-bottom: 1px solid #E1E1E1
}
th:first-child, td:first-child {
padding-left: 0
}
th:last-child, td:last-child {
padding-right: 0
}
button, .button {
margin-bottom: 1rem
}
input, textarea, select, fieldset {
margin-bottom: 1.5rem
}
pre, blockquote, dl, figure, table, p, ul, ol, form {
margin-bottom: 2.5rem
}
.u-full-width {
width: 100%;
box-sizing: border-box
}
.u-max-full-width {
max-width: 100%;
box-sizing: border-box
}
.u-pull-right {
float: right
}
.u-pull-left {
float: left
}
hr {
margin-top: 3rem;
margin-bottom: 3.5rem;
border-width: 0;
border-top: 1px solid #E1E1E1
}
.container:after, .row:after, .u-cf {
content: "";
display: table;
clear: both
}
@media (min-width:400px) {}
@media (min-width:550px) {}
@media (min-width:750px) {}
@media (min-width:1000px) {}
@media (min-width:1200px) {}
/* WordPress */
.alignleft {
float: left;
margin: 1em;
}
.alignright {
float: right;
margin: 1em;
}
/**
* softel
*/
html {
scroll-behavior:smooth;
}
body {
font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, 'メイリオ', Meiryo, sans-serif;
font-size: 1.4em;
}
a {
color: #0047ab;
}
textarea {
height: auto;
}
label small {
font-weight: normal;
color: #999;
}
dd {
margin-bottom: 1.0rem;
}
.alert {
padding: 15px;
margin-bottom: 20px;
border: 1px solid transparent;
border-radius: 4px;
}
.alert h4 {
margin-top: 0;
color: inherit;
}
.alert .alert-link {
font-weight: bold;
}
.alert > p, .alert > ul {
margin-bottom: 0;
}
.alert > p + p {
margin-top: 5px;
}
.alert-dismissable, .alert-dismissible {
padding-right: 35px;
}
.alert-dismissable .close, .alert-dismissible .close {
position: relative;
top: -2px;
right: -21px;
color: inherit;
}
.alert-success {
color: #3c763d;
background-color: #dff0d8;
border-color: #d6e9c6;
}
.alert-success hr {
border-top-color: #c9e2b3;
}
.alert-success .alert-link {
color: #2b542c;
}
.alert-info {
color: #31708f;
background-color: #d9edf7;
border-color: #bce8f1;
}
.alert-info hr {
border-top-color: #a6e1ec;
}
.alert-info .alert-link {
color: #245269;
}
.alert-danger {
color: #a94442;
background-color: #f2dede;
border-color: #ebccd1;
}
.alert-danger hr {
border-top-color: #e4b9c0;
}
.alert-danger .alert-link {
color: #843534;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
button.button-large, .button.button-large {
font-size: 1.6rem;
}
.section {
margin-bottom: 100px;
}
.col1 {
max-width: 760px;
margin: 0 auto;
}
.col1 section.section {
margin-bottom: 55px;
}
.col {
flex: 0 0 365px;
background: #fff;
}
.col .i {
padding: 20px;
}
h5 {
background: #0046AA;
padding: 5px 20px;
color: #fff;
font-size: 2.1rem;
}
.columns img {
max-width: 100%;
}
.ec {
width: 100%;
overflow: hidden;
margin: -40px 0 40px 0;
}
.ec img {
vertical-align: middle;
max-width: 100%;
}
.ec2 {
max-width: 960px;
margin: 0 auto;
}
.ec3 {
margin: 0 -33.3334%;
}
.cc {
font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
font-size: 200%;
}
.btn1 {
display: block;
background-color: #0046aa;
letter-spacing: 1px;
padding: 1.4rem;
color: #fff;
text-align: center;
text-decoration: none;
}
.btn1:hover {
color: #fff;
opacity: 0.8;
}
.btn1.btn12 {
background: #0046aa url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAACACAYAAAB5sSvuAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAArVJREFUeNrsXItRAjEQ3d0GoAPoADuADihBOpAOoAPtQDrQDsQKxArUChwrOHNDmMncOHi57CaPOzJzE0dP5mUfedm8fJh8qapq5KqDe6YEVOT0AzP/uGpLYIWbv3CRfHHVAhngzFONRXFA9burdrARDDrMp3vGcBEMOswDbASDSH6Ulh355+8rSIoDql9dtYel2NM88R0GkuI6il8lOwy3eamk7EirVhQcpznmZRfJN1fdwEUwKGtIihuy8wxLcQnZkegWHWVnCxvB3LIjnVp1lJ01bARzTg8k8f+3kBQ3ZGcHS3EgOwerDiPJLTTOdljjQyxdCVFppaHssOaHWciONkB1V0JUW2vgSrD2d0Z7nBb1L7Xy9IDJqGi5EkJ2ZQVJsbYrwYYRVJkeWFKsMk6bRlBDdsQaYOo4bR7BVFdCKF/J7kp0ieJTFVk4M8Bo2clJcXZXorPs1ON0W4pLgbyFBniaHqADnEMD9CAf0QFO3PN9DqCUBFh6DSZqegBJcQBwCQ3wnOwgAZxBA/Qg79EBjpqyg9ij76ABNmUHFeAcGmAoO8gAJ9AAPciN0LX0lGLoTgIvM9BCDT3UwScL0OkWfMIKnfLDT5qgp511QoBsfYygrQ9ve4wJscDbb9AGJrQFHGuil+gk9YrTtO3L14WcP2SFLlpWiq3VQS/H1rJCHXewX7cE0HF1s/N4O+xtKaSwE04sZYUUNjsOc3NZ7Q6Q0obb4W1w1E7jh7XJ1iJbEcXoLcng6AYrAjQ5SStK4DZkdMy3/8c1UrMV0wj68XZvmW3090yTT+MX1gD7efDPuwNZbLP+HT7N7Q7EntA2l5VUgLhHyH0anxVc6wjCX2NgPd4mRRD+Kg0qfHuP5HAHzCiGvhDHMo1PjiD8pUwEtMh3eReDEdhahpRI4ztRjHq9368AAwCtfriWv+aMkAAAAABJRU5ErkJggg==') no-repeat 100% 50%;
}
.btn1.btn13 {
margin: 0 auto;
max-width: 734px;
}
#top-menu {
display: -webkit-flexbox;
display: flex;
justify-content: space-between;
align-items: flex-end;
}
#top-menu .navi {
flex: 1 0 auto;
text-align: center;
}
#top-menu .logo {
line-height: 32px;
text-align: left;
}
#top-menu .menu {
flex: 1 1 500px;
}
#top-menu .tel {
text-align: right;
}
#top-menu .menu {
display: flex;
justify-content: space-between;
align-items: flex-end;
}
#top-menu .menu .navii {
flex: 1 0 auto;
align-items: flex-end;
text-align: center;
}
#top-menu .menu a {
padding-top: 30px;
}
#top-menu .menu a:hover {
color: #0046aa;
}
#top-menu .menu a .fa {
font-size: 22px;
color: #8b8a8c;
}
#top-menu .menu a:hover .fa {
color: #0046aa;
}
@media (max-width:900px) {
#top-menu {
flex-wrap: wrap;
}
#top-menu .menu {
order: 9;
padding: 10px 0;
}
}
.summary {
background: #000;
margin-bottom: 21px;
}
.summary h1 {
font-size: 1.4rem;
color: #FFF;
line-height: 1.5;
}
header {
border-bottom: 2px solid #ccc;
min-height: 62px;
margin-bottom: 40px;
}
header a, header a:hover {
color: inherit;
text-decoration: none;
}
#side-bnr {
position: relative;
z-index: 999;
top: -40px;
}
#side-bnr div {
position: fixed;
right: 0;
}
#side-bnr p {
margin-bottom: 14px;
}
@media (max-width:550px) {
#side-bnr img {
width: 30px;
}
}
.c-d-n-sm {}
.c-d-sm {
display: none;
}
@media (max-width:550px) {
.c-d-n-sm {
display: none;
}
.c-d-sm {
display: block;
}
#top-menu .navi.logo {
flex: 0 1 40%;
text-align: left;
}
#top-menu .navi.tel {
flex: 0 1 40%;
text-align: right;
}
#top-menu .logo img {
max-width: 100%;
}
#top-menu .tel img {
max-width: 100%;
}
}
/* staff atama */
.noWrap {
white-space: nowrap;
}
.c-stafflist {
display:grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
gap:20px;
}
.c-stafflist .c1 {
container-type: inline-size;
--my-bg:#0047ab;
}
.c-stafflist .c2 {
aspect-ratio: 1 / 1; /* 縦横比を1:1（正方形）に固定。4/3など自由に変更可 */
width: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 72cqw;
color:#fff;
text-decoration:none;
background:var(--my-bg);
border-radius:2rem;
}
.c-stafflist .c1 small {
display:block;
text-align:center;
}
.c-member-detail {
background: #fff;
border-radius: 4px;
}
.c-member-detail .c-name {
float: left;
margin-top: -10px;
margin-bottom: 25px;
}
.c-member-detail .c-tags span {
display: inline-block;
margin-bottom: 5px;
padding: 2px 8px 2px 16px;
font-size: 1.3rem;
background: #eee url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAEACAYAAAADRnAGAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABRBJREFUeNrsXe1x00AQXdMAdIDowFTgUAElJB2gDlAHXAeog6QDQgVABZgKSCoIsicWSia29XEfu/vezuRHZmxp9vntvb1daW/10JkA2ysBNwJAAAgAASAABIAAEAACQAAIAAEgAASAABAAAgBmYQVcE7zr/ipkBjSr1eoelQHbzvl3yGvAFfIieNP9+t8P/yCGQNUB8AeVAc3QeTQG3D3++veoiVD93HkkBvzsnH+PnArXyHuBdih7aCGwW/jWz1d+JAaEU857Z8D28de/R60HNOec98yA2875D2M+6BWAHfV/jfmgxxBoxzrvkQEv5vtIDAhTnPfGgL7MNcU8MaCe8yUvDBgte14BqM6lvJ5DIMx13gMDJsueNwY0S5y3zoCjZS4UBtQxLmIVgJtTZS6EEKiWrPzWGdDEct4iAxbLnnUG1DGdt8aA2fm+FwY0KS5qBYA2luxZDIGz3R3vDAipnLfAgK2M6O54ZkCd0nntDEgie5YAWE9pcHgLgTaH81oZED3ft8aAkMt5jQyY1d3xxICr3DfUBMBtqnzfSghUKVNe7QwIJZzXwoCssqeRAXUp5zUwIEp3xzID6tL0KwnATQnZ0xQCVamVXwMDGg3Ol2LAVhKXubQzoNHifAkGZClzaWZAo634kBOAVoPslQqBpN0dCwwIGp3PxYDsZS5tDKhFsaVmgDrZyw3AOleDQ2MItNqdT8mAomUuDQxoLDifigGqZS8HA67EkMUG4FZjvp8zBCqtKW8OBjTWnI/JADOyl4oBtUXnYzGgeHenNANqsWwPy+xajNuSEFBb5soVAsG680sYsBVF3Z0SDGg8OD93EfwmnmwGABtkAL6KM5uyCJrN92MtgsGb81NC4Lc4tbEMqL0CIHCyNwOAt8gAfBHvdsL5v93fa2QAPgmCocneWAA2yABcC5LByd4ZAD4LmsHJ3gkALgXRHp3/IagGJ3sLCiIMAS6ClEHfa8Ab8Vz6YirMzRC3wyyITAAAviTGoijL4iCyOGYz1KIzYGcf0QGAb49XXgumfERmwmd3u8WAugbwMTk+KPnU3JTP+LD0zO9V4qR8xhcmFnzXhyw+LLcNaggcDP61ubVlWeSrs5GuY7arxNfnI1+vRQ2Bg11Yk0UOUUlwzcpSV4mDlBJddyeLDTID+iwReZiaWNgtpgbgQntXiSM1M9xDdVeJY3Uz3UetLOaeLX6hbdocZ4tnvt+FtvIZD1gocM9KFJXPeMhKwXsHdAaokEUetVWYgcW7SjxuT8E6VHSfwCM3FWWlLWoIDPcJG+QQ2O8T0A9ezt5V4uHros+yPn2mkQF9lpijq6R5gEJADYGhLH5EDoG9LEri8pn2GSKVJC6faWfAQRaTdZUsTJFJulu0wIB+UUxRPrM0R6hBDYGhLF4ih0CSfYK1UVrRH8q2xoA+P4gli1aHqQV0BkSTRcsAROkqWZ4nuI5RPrPMgCiyaH2i5OJ9gnUGLJZFLzNFW9QQGO4TNsghsLNZXSVPY3VnPZTtiQGzZNHbYOXJXSVvDOizxLFdJa+jtQNqCAxl8RI5BPayKCO6Sp6ny1cyonzmmQEHWTzZVfJ+vsDZ3aJ3BvSL4rHyGQoAR8tnKEdsHH0oG4UBR/cJSIesvNhVQmJAnx8MZRHxmJ2AzoAnsogKQF8+Qz1pqn8oG5UB/2URGID9gogOAE+bIwAEgAAQAAJAAAgAASAABIAAEAACQAAIAAGAs38CDADWSq00BPFEUQAAAABJRU5ErkJggg==) 0% 50% no-repeat;
}
/* staff pf */
table.nt th {
border: 2px solid #ffffff;
padding: 3px;
background: #ddeeee;
color: #333333;
font-weight: bold;
text-align: left;
}
table.nt td {
border: 2px solid #ffffff;
padding: 3px;
}
/* mailmagazine */
.c-mailmagazine {
margin-bottom: 3.0rem;
max-width: 60em;
line-height: 1.4;
white-space: pre-wrap;
}
/* footer */
#sub-nav {
border-top: 2px solid #c7e0ed;
padding-top: 40px;
margin-bottom: 70px;
text-align: center;
}
#sub-nav a {
text-decoration: none;
color: #000;
}
footer {
margin-top: 55px;
background: #929A9F;
}
footer a {
color: #fff;
text-decoration: none;
}
footer a:hover, footer a:active {
color: #0046aa;
text-decoration: none;
}
footer .bnrarea {
background: #eef2f3;
padding: 20px 0;
text-align: center;
}
footer .bnrarea .columns {
background: #fff;
}
footer .bnrarea a {
display: block;
padding: 10px 20px;
background: #fff;
color: #0047ab;
}
footer .fnav {
padding-top: 30px;
padding-bottom: 100px;
font-size: 1.2rem;
color: #fff;
}
footer p {
margin-bottom: 20px;
}
footer address {
font-style: normal;
}
footer address p {
margin-bottom: 0;
}
footer .sns {
letter-spacing: 5px;
}
footer .two.columns {
border-left: 1px solid #fff;
}
footer ul {
list-style: none;
padding-left: 20px;
}
#page-top {
position: fixed;
height: auto;
bottom: 10px;
right: 5%;
background: #0046aa;
padding: 10px 20px;
border-radius: 5px;
text-align: center;
opacity: 0;
visibility: hidden;
animation: show-button linear both;
animation-timeline: scroll();
animation-range: 300px 400px;
}
@media (max-width:550px) {
#page-top {
font-size: 1rem;
padding: 10px 10px 0 10px;
right: 7%;
}
}
@keyframes show-button {
to {
opacity: 1;
visibility: visible;
}
}
#page-top p {
margin-bottom: 10px;
}
#page-top a {
color: #fff;
text-decoration: none;
}
/* top slide */
#top {
margin-top: -40px;
}
#top .slider {
max-width: 1600px;
margin: 0 auto;
}
#top .bxslider li {
/*min-width: 960px;*/
text-align: center;
overflow: hidden;
height: auto;
}
#top .bxslider li img {
margin: 0 auto;
/*min-width: 960px!important;*/
height: auto;
}
#bx-pager {
background: #0046aa;
text-align: center;
margin-bottom: 40px;
}
#bx-pager {
display: flex;
justify-content: center;
}
#bx-pager a {
flex: 0 1 auto;
}
#bx-pager a.active {
opacity: 0.5;
}
#bx-pager img {
display: block;
width: 100%;
}
#info {
border-top: 2px solid #c7e0ed;
margin-bottom: 20px;
}
#info h2 {
font-size: 1rem;
margin-bottom: 10px;
}
#info a {
color: #000;
text-decoration: none;
}
#info a:hover {
color: #0046aa;
}
#info ul {
margin-left: 20px;
border-top: 2px dotted #c7e0ed;
list-style: none;
}
#info ul li {
margin-bottom: 0;
padding: 10px 0;
border-bottom: 2px dotted #c7e0ed;
}
.catch {
margin-bottom: 90px;
text-align: center;
}
.head {
margin-bottom: 30px;
text-align: center;
}
.head h2 {
margin-bottom: 18px;
font-size: 1.4rem;
}
.catch h3 {
font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
font-size: 2.9rem;
line-height: 1.4;
margin-top: 36px;
margin-bottom: 36px;
}
.catch p {
position: relative;
z-index: 1;
}
.catch img {
max-width: 100%;
}
/*
---------------------------------------
リクルート
---------------------------------------
*/
#recruit .catch {
margin-bottom: 20px;
}
#recruit ul {
list-style: none;
margin: 5px -5px 20px -5px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
#recruit li {
flex: 1 1 184px;
margin: 5px;
}
#recruit li a {
display: block;
line-height: 50px;
text-decoration: none;
background: #dce2e5;
color: #000;
}
#recruit li a:hover {
background: #0047ab;
color: #fff;
}
.recruitbnr {
margin-bottom: 0;
}
.recruitbnr img {
display: block;
}
#message {
margin-bottom: 75px;
}
#message .name {
margin-bottom: 6px;
}
#message .class {
display: block;
margin: 0 30px;
}
#message .ceo {
display: block;
font-size: 200%;
padding: 0;
margin: 0 30px;
}
#message .catch2 {
border-top: 1px solid #000;
border-bottom: 1px solid #000;
font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
font-size: 170%;
padding: 10px 0 10px 30px;
margin-bottom: 30px;
}
#message .text {
margin-bottom: 100px;
}
#message .text p {
margin: 20px 0 20px 30px;
}
#message .five.columns {
text-align: right;
}
#message .box02 {
padding: 0 38px;
}
#message .box02 img {
display: block;
margin: 0 auto;
}
.jobindex {
text-align: center;
}
.jobindex .four.columns p {
margin-bottom: 4rem;
}
.jobindex .four.columns p:first-child {
margin-bottom: 0;
}
h2.hr {
letter-spacing: 1px;
font-size: 2rem;
line-height: 1;
text-align: center;
color: #0046aa;
}
h2.hr span {
padding: 0 20px;
background: #fff;
}
h2.hr:before {
content: "";
display: block;
position: relative;
top: 1rem;
height: 2px;
margin: 0 5%;
background: #7fa3d5;
z-index: -1;
}
.job a {
text-decoration: none;
}
.job a span {
border-bottom: 3px solid #000;
padding-bottom: 3px;
color: #000;
}
.job a:hover span {
color: #0046aa;
border-bottom: 3px solid #0046aa;
}
.job .columns img {
max-width: 100%;
}
#details .slider2 {
width: 100%;
max-width: 960px;
margin: 0 auto 30px;
}
#details .bxslider2 li {
text-align: center;
overflow: hidden;
height: auto;
}
#details .bxslider2 li img {
margin: 0 5px;
min-width: 235px !important;
height: auto;
}
/*
---------------------------------------
エントリー
---------------------------------------
*/
#members {
margin-top: -50px;
}
#members .flex {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-bottom: 28px;
}
#members .flexi {
flex: 0 0 225px;
}
#members .flexi p {
margin-bottom: 0;
}
#members .head02 {
background: #0046aa;
padding: 70px 0 80px;
float: left;
text-align: center;
margin-bottom: 28px;
}
#members .head02 p {
color: #FFF;
margin-top: 30px;
}
.figure {
position: relative;
overflow: hidden;
width: 226px;
margin: 0;
}
.figure:hover span {
opacity: 1;
}
.figure img {
vertical-align: bottom;
}
.figcaption {
position: absolute;
top: 0;
left: 0;
z-index: 2;
width: 100%;
height: 100%;
background: rgba(0, 70, 170, .6);
-webkit-transition: .3s;
transition: .3s;
opacity: 0;
}
.figcaption {
color: #FFF;
padding-top: 100px;
font-size: 110%;
line-height: 1.8;
text-align: center;
}
#members ul {
list-style: none;
}
#members ul li {
position: relative;
text-align: left;
min-height: 400px;
margin-bottom: 30px;
background-color: #eff2f4;
}
#members ul li .sp {
display: none;
}
#member01 h2, #member03 h2, #member05 h2, #member07 h2 , #member09 h2{
font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
color: #FFF;
font-size: 200%;
position: absolute;
top: 135px;
left: 30px;
line-height: 1.6;
}
#member01 p, #member03 p, #member05 p, #member07 p , #member09 p {
position: absolute;
top: 260px;
left: 30px;
max-width: 630px;
}
#member02 h2, #member04 h2, #member06 h2 , #member08 h2, #member10 h2{
font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
color: #000;
font-size: 200%;
position: absolute;
top: 135px;
left: 310px;
line-height: 1.6;
}
#member02 p, #member04 p, #member06 p, #member08 p, #member10 p {
position: absolute;
top: 260px;
left: 310px;
max-width: 630px;
}
#member01 {
background: url(/assets/img/entry/mamber_bg_01.png) no-repeat top left;
}
#member02 {
background: url(/assets/img/entry/mamber_bg_02.png) no-repeat top left;
}
#member03 {
background: url(/assets/img/entry/mamber_bg_03.png) no-repeat top left;
}
#member04 {
background: url(/assets/img/entry/mamber_bg_04.png) no-repeat top left;
}
#member05 {
background: url(/assets/img/entry/mamber_bg_05.png) no-repeat top left;
}
#member06 {
background: url(/assets/img/entry/mamber_bg_06.png) no-repeat top left;
}
#member07 {
background: url(/assets/img/entry/mamber_bg_07.png) no-repeat top left;
}
#member08 {
background: url(/assets/img/entry/member_bg_08.png) no-repeat top left;
}
#member09 {
background: url(/assets/img/entry/member_bg_09.png) no-repeat top left;
}
#member10 {
background: url(/assets/img/entry/member_bg_10.png) no-repeat top left;
}
@media (max-width: 980px) {
#members ul {
list-style: none;
}
#members ul li {
position: static;
margin-bottom: 30px;
background-color: #eff2f4;
overflow: hidden;
}
#members ul li .sp {
display: block;
margin: 0;
position: static;
padding: 0;
}
#members ul li .sp img {
vertical-align: middle;
max-width: 100%;
}
#members ul li .sp.pic {
float: left;
margin-right: 20px;
}
#member01 h2, #member02 h2, #member03 h2, #member04 h2, #member05 h2, #member06 h2, #member07 h2,
#member08 h2, #member09 h2, #member10 h2 {
position: static;
font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
color: #FFF;
background: #0046aa;
font-size: 200%;
line-height: 1.6;
padding: 20px;
margin: 0;
}
#member01 p, #member02 p, #member03 p, #member04 p, #member05 p, #member06 p, #member07 p,
#member08 p, #member09 p, #member10 p {
position: static;
background: #eff2f4;
padding: 20px;
margin: 0;
max-width: none;
}
#member01 {
background: #eff2f4;
}
#member02 {
background: #eff2f4;
}
#member03 {
background: #eff2f4;
}
#member04 {
background: #eff2f4;
}
#member05 {
background: #eff2f4;
}
#member06 {
background: #eff2f4;
}
#member07 {
background: #eff2f4;
}
#member08 {
background: #eff2f4;
}
#member09 {
background: #eff2f4;
}
#member10 {
background: #eff2f4;
}
}
.imgBox {
width: 640px;
overflow: hidden;
margin: 0 auto 100px auto;
}
.imgBox p {
margin: 0;
}
.imgBox img {
display: block;
}
.imgBox .p5 {
height: 600px;
background: #ccdaee;
}
@media (min-width: 1000px) {
.imgBox {
width: 960px;
}
.imgBox .p5 {
height: 400px;
}
.imgBox .p6 {
clear: both;
}
}
.c-job-detail h2 {
margin-bottom: 45px;
}
.c-job-detail h4 {
font-size: 1.6rem;
}
.c-job-detail p.catch {
margin: 40px 0 55px;
}
.c-job-detail p {
margin-bottom: 1rem;
}
#job h3 {
border-bottom: 1px solid #161418;
text-align: left;
color: #0046aa;
font-size: 120%;
padding-bottom: 5px;
margin-bottom: 40px;
}
#job h3 {
margin-top: 40px;
margin-bottom: 20px;
}
#job table {
width: 100%;
}
#job table th {
background: #cbdaee;
}
#job table th, #job table td {
border: 1px solid #8a898b;
padding: 5px 20px;
vertical-align: top;
}
@media (max-width: 550px) {
#members .flex {
justify-content: space-around;
}
}
/*
---------------------------------------
ABOUT SOFTEL
---------------------------------------
*/
#companyInfo .company {
background: #eef2f3;
margin-bottom: 55px;
}
#companyInfo .company .i {
padding: 1rem;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
#companyInfo .company .p1 {
flex: 0 1 320px;
}
#companyInfo .company .p1 p {
margin-bottom: 0;
}
#companyInfo .company .p1 img {
vertical-align: middle;
}
#companyInfo .textbox {
flex: 0 1 410px;
padding-top: 20px;
min-height: 400px;
}
#companyInfo .textbox .address {
margin: 20px 0;
font-size: 125%;
}
#companyInfo .textbox .address span {
font-size: 90%;
}
#companyInfo .textbox .access span {
font-size: 125%;
}
#companyInfo h3 {
border-bottom: 1px solid #161418;
text-align: left;
color: #0046aa;
font-size: 120%;
padding-bottom: 5px;
margin-bottom: 40px;
}
.overview table th {
background: #cbdaee;
}
.overview table th, .overview table td {
border: 1px solid #8a898b;
padding: 5px 20px;
vertical-align: top;
}
.history table th {
font-weight: normal;
}
.history table th, .history table td {
border-bottom: 1px solid #8a898b;
padding: 5px 20px;
vertical-align: top;
}
/* about */
#about__service table {
width: 100%;
margin-bottom: 0;
}
#about__service table td {
border-left: 20px solid #fff;
border-bottom: 20px solid #fff;
background: #ccdaee;
color: #222;
height: 100px;
width: 50%;
text-align: center;
padding: 0;
font-size: 1.6rem;
}
#about__service table td:first-child {
border-left: 0;
}
#about__service table tr:nth-of-type(2n) td:nth-of-type(2n), #about__service table tr:nth-of-type(2n-1) td:nth-of-type(2n-1) {
background: #0047ab;
color: #fff;
}
#about__future {
background: url(/assets/img/about/about_future_bg.jpg) no-repeat top center;
}
#about__future .head {
padding-top: 20px;
color: #fff;
}
#about__future .li span {
background: #0047ab;
display: table-cell;
width: 200px;
height: 200px;
border-radius: 100px;
line-height: 200px;
text-align: center;
vertical-align: middle;
}
#about__future .li span img {
vertical-align: middle;
}
#about__future .li p {
margin-top: 20px;
text-align: left;
width: 210px;
}
#about__future .member {
padding: 30px 0 50px 0;
}
h2.hr2 {
letter-spacing: 1px;
font-size: 2rem;
line-height: 1;
text-align: center;
color: #222222;
}
h2.hr2 span {
padding: 0 20px;
background: #fff;
}
h2.hr2:before {
content: "";
display: block;
position: relative;
top: 1rem;
height: 2px;
margin: 0;
background: #222222;
z-index: -1;
}
/*
---------------------------------------
Youtube 埋め込み
---------------------------------------
*/
.video {
position: relative;
width: 100%;
height: 0;
padding-top: 56.25%;
}
/* YouTube埋め込み用のiframe */
.video iframe {
position: absolute;
top: 0;
right: 0;
width: 94%;
height: 100%;
}
/*
---------------------------------------
サムライ合併に伴うページ再編
---------------------------------------
*/
.compartnerlist {
column-count: 2;
font-size: 0.9em;
list-style: none;
}
.notemsg {
color: red;
font-weight: bold;
}
.groupcom {
display: flex;
flex-wrap: wrap;
justify-content:space-around;
text-align:center;
align-items:flex-end;
margin-top:8rem;
margin-bottom:8rem;
}
.groupcomlist {
width: calc((100% - 40px) / 3) ;
flex: 0 1 30rem;
font-weight: bold;
}
img.grouplogo {
height : 40px;
}
@media (max-width: 900px) {
.compartnerlist {
column-count: 1;
}
}
/** addcss.css **/
/*共通*/
dt,
dd{
margin: 0;
padding: 0;
}
#bottom_0{
margin-bottom: 0px;
}
#bottom_2{
margin-bottom: 2rem;
}
#bottom_st{/* fc_detail.php fcr_detail.php*/
margin-bottom: 5rem;
font-size: 16.5px;
}
.min-height_0{
min-height: 0px;
}
.firstview{
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color:#A4A4A4;
}
.li_none{
List-style: none
}
.font_SS{
font-size:0.5rem;
text-align: end;
}
.font_S {
font-size:clamp(0.7rem, 0.607rem + 0.39vw, 0.9rem);
line-height: 1.6;
}
.font_M{
font-size:clamp(0.875rem, 0.83rem + 0.23vw, 1rem);
}
.font_L{ font-size:clamp(1rem, 0.777rem + 0.96vw, 1.5rem);
}
.font_LL{
font-size:clamp(1.25rem, 1.066rem + 0.79vw, 1.563rem);
font-weight: 600;
}
.font_XL{
font-size:clamp(1.375rem, 0.714rem + 2.86vw, 2.5rem);
}
.font_XXL{
font-size: 15px;
}
.margin_top{
margin-top: 4rem;
}
.about_figure img,
.about_figure_02 img,
.about_figure_03 img,
.sec_01_figure img{
width: 100%;
height: auto;
object-fit: cover;
}
.add_i{
padding: 0px;
margin: 0px auto;
}
.add_col1{
align-self: center;
padding: 1rem;
margin: 1rem 0 ;
}
.aligncenter{
align-self: center;
}
.flex_center{
display: flex;
justify-content: center;
}
.PC_only2,
.PC_only1200,
.PC_only600{
display: block;
}
.SP_only,
.SP_only1200,
.SP_only600{
display: none;
}
@media (max-width: 600px) {
.SP_only1200{
display: block;}
.PC_only1200{
display: none;
}
}
@media (max-width: 1200px) {
.SP_only1200{
display: block;}
.PC_only1200{
display: none;
}
}
@media (max-width: 550px) {
.PC_only{
display: none;
}
}
@media (min-width: 900px) {
.PC_only2{
display: none;
}
}
/* ------------------ */
/* TOPページcss */
/* ------------------ */
#top_sec{
margin-top: -40px;
margin-bottom: 10rem;
}
.top_video_background {
position: relative;
width: 100%;
height: 85vh; /* 高さ */
overflow: hidden;
}
.top_video_background video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 85vh;
object-fit: cover;
z-index: -1;
}
/* ------------------ */
/* aboutページcss */
/* ------------------ */
/* ソフテルが提供するサービス2 */
.add_columns {
width: 100%;
box-sizing: border-box; /* ボックスモデルを調整 */
float: right;
bottom: 20px;
}
.add_row {
display: flex;
justify-content: space-between;
}
.add_row .add_columns {
order: 1; /* 最初の列の順番 */
}
.add_row .add_columns:last-child {
order: -1; /* 2番目の列を最初に表示させる */
}
.about_back{
display:flex;
justify-content:space-around;
flex-wrap:wrap;
margin-bottom:100px;
padding: 26px 0px ;
}
.col0{
max-width: 360px;
flex-grow: 1;
background-color: #ffffff;
padding: 2rem 1.5rem 3rem 1.5rem;
}
.about_back_figure{
display: block;
text-align: center;
margin: 0 auto;
}
.about_back_figure img{
width: 90%;
min-width: 180px;
}
.about_future{
width:780px;
margin:0 auto;
}
@media (max-width: 550px) {
.about_col0_p{
width: 290px;
display: block;
margin: 0 auto;
}
.about_future{
width:203px;
}
}
/*-----------*/
/*主なWebシステム開発業務*/
#row-reverse{
display: flex;
flex-direction: row-reverse;
margin-bottom: 10rem;
}
#row-reverse:after {
content: "";
display: table;
clear: both;
}
/*事務所について*/
.col2{
flex:0 0 365px;
align-self: center;
padding:20px;
margin: 0 auto;
}
.add_col2{
width: 450px;
min-width: 300px;
background-color: #ffffff;
border-radius: 5px;
padding: 0px;
margin: 2rem 1.5rem 0 1.5rem ;
align-self: center;
}
.blue_line{
border-left: solid 5px #0047AB;
}
/* レスポンシブ対応 */
.add_row {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
/* 画面幅が550px以上の場合、2列表示 */
@media (min-width: 550px) {
.add_columns {
margin-right: 4%
}
.add_columns:first-child, .add_columns:first-child {
margin-right: 0
}
.six.add_columns {
width: 48%
}
}
.add_col3{/*教育/評価制度＆社内イベント*/
width: 100%;
min-width: 250px;
align-self: center;
padding: 1rem;
}
.add_col1_li{ /*事務所について＆社内イベント*/
list-style:disc;
margin: 1rem auto 0;
padding: 0 1.5rem;
}
/*ISMS エリア*/
.add_dl>div{
margin-bottom: 2.5rem;
}
.add_dl>div>dt{
font-weight: 600;
}
.add_dl>div>dd{
margin: 0.5rem 0 0 0 ;
}
.area_isms{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
}
.isms_li_flex{
flex-basis: 45%;/* ----flexの子要素----- */
height: 250px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-items: center;
margin: 0 auto;
background-color: #ffffff;
border-radius: 2px;
padding: 2rem 1rem 0 1rem;
}
.isms_img{
width: 100%;
height: auto;
margin: 0.5rem auto 0;
}
.isms_div03{
width: 250px;
}
.isms_img img{
max-width:150px;
}
@media (max-width: 600px) {
.isms_li_flex{
flex-basis: 100%;/* ----flexの子要素----- */
}
}
/* ------------------ */
/* ------------------ */
/* ------------------ */
/* 製品ページcss */
/* ------------------ */
.product_sec_01 {
margin-top: -40px;
padding: 15rem 0 5rem;
height: 52vh;
background-image: url("/assets/img/product/product_img_back.jpeg");
background-repeat: no-repeat;
background-size: cover;
display: flex;
align-items: center;
}
.product_sec_01_back{
position: relative; /* 擬似要素に対して位置指定が必要 */
width: 100%;
padding-bottom: 1.5rem;
}
.product_sec_01_back::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.4);
}
.product_sec_01_box{
display: flex;
justify-content: space-around;
align-items: center;
max-width: 800px;
min-width: 300px;
margin: 0 auto;
}
.product_sec_div{
width: clamp(18.75rem, 4.044rem + 73.53vw, 50rem);
min-width: 200px;
}
.product_sec_div>figure>img{
width: 100%;
height: auto;
}
.product_sec_01_h2 {
position: relative;
display: flex;
align-items: center;
font-size:clamp(2.5rem, 0.735rem + 8.82vw, 6.25rem);/* ---40~100px------ */
color: #ffffff;
height: 150px;
overflow: hidden;
margin: 0 auto;
}
.product_sec_01_h2::before {
content: '';
position: absolute;
bottom: 15px;
left: 20%;
width: 50%;
height: 2px;
background-color: #ffffff;
animation: underline-animation 1s ease-out forwards; /* アニメーション */
}
@keyframes underline-animation {
0% {
width: 0;
}
50% {
width: 0%;
}
100% {
width: 60%;
}
}
.product_container{
margin-bottom: 5rem;
}
.product_container_div{
position: relative;
width: 100%;
max-width: 1000px;
min-width: 350px;
background-color: #EEF2F3;
margin: 15rem auto 0;
padding: 10rem 0;
border-radius: 5px;
}
.product_hr{
width: 80%;
}
.product_sec_02_container{
width: 100%;
max-width: 1000px;
min-width: 350px;
margin: 0 auto;
padding: 0 1rem;
}
.product_sec_dl_L
{
padding: 0 1rem;
width: 100%;
max-width: 920px;;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: space-around;
margin: 0 auto;
}
.product_sec_dl_R{
padding: 0 1rem;
width: 100%;
max-width: 920px;;
display: flex;
flex-direction: row-reverse;
flex-wrap: wrap;
align-items: center;
justify-content: space-around;
margin: 0 auto;
}
.product_sec_logo_img{
margin: 0 auto;
padding: 1rem;
display: flex;
justify-content: center;
align-items: center;
height: clamp(17.5rem, 17.489rem + 0.06vw, 18.125rem);/* --280~300pxで伸縮--- */
flex-basis:35%;
max-width: 200px;
background-color: #ffffff;
border-radius: 5px;
box-shadow: 2px 3px 7px 4px rgba(17, 17, 26, 0.08);
}
.product_sec_logo_img img{
width: 100%;
}
.product_sec_dl_ddbox{
display: flex;
flex-direction: row;
flex-wrap: wrap;
flex-basis:60%;
min-width: 230px;
margin: 0 2.5rem;
}
.product_sec_dl_ddbox_01_span{
font-size:clamp(1.375rem, 0.714rem + 2.86vw, 2.5rem);
font-weight: 600;
color: #707070;
}
.product_sec_dl_ddbox_01{
margin-bottom: 1.5rem;
}
.product_sec_dl_ddbox_02{
width:100%;
}
/* ------------------ */
/* 製品ページcss 画面幅600px以下 */
/* ------------------ */
@media (max-width: 600px) {
.product_sec_01 {
height: 35vh;
}
.product_sec_01_h2{
height: 100px;
margin-bottom: 0;
}
.product_container{
padding: 1.5rem;
}
.product_container_div{
margin: 5rem auto;
padding: 2rem 0;
border-radius: 5px;
}
.product_sec_02_container{
width: clamp(18.75rem, 15.179rem + 17.86vw, 21.875rem);
justify-content: center;
padding: 0 0 5rem 0;
}
.product_sec_logo_img,
.product_sec_dl_ddbox{
padding-top: 2.5rem;
min-width: 265px;
}
}
/* 沿革ページ（SAMURAI）css */
/* ------------------ */
/* --- 共通-- */
.background_04{
background-color: #cbdaee;
padding: 10rem 0 ;
margin-bottom: 5rem;
}
.history_container{
padding: 5rem 4.5rem 1rem 4.5rem;
background-color: #ffffff;
border-radius: 5px;
min-width: 190px;
}
.history_table{
font-size:clamp(1rem, 0.777rem + 0.96vw, 1.5rem);
min-width: 190px;
}
/* ------------------ */
/* 問い合わせ（index）css */
/* ------------------ */
.contact_ul{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
width: 100%;
}
.contact_li{
display: flex;
flex-direction: column;
width: 200px;
padding: 1rem 2rem;
background-color: #EEF1F2;
border-radius: 2.5px;
}
.li_0{
width: 200px;
padding: 1rem 2rem;
}
.contact_li a{
text-decoration: none;
}
.contact_figure{
width: 200px;
height: 60px;
padding: 0;
margin: 0 auto 2rem;
display: flex;
justify-content: center;
}
.contact_figure_img{
width: 100%;
}
.contact_img_slidecontainer {
position: relative;
width: 100%;
overflow: hidden;
}
.slideimg {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0;
background-size: 100%; /* 画像をスライド全体にカバー */
background-repeat: no-repeat; /*背景画像の繰り返しを解除*/
animation: slideAnime 15s infinite; /* 15秒で1サイクル */
}
@keyframes slideAnime {
0%, 30%, 100% {
opacity: 0;
} /* スライドの非表示タイミング */
10%, 20% {
opacity: 1;
} /* スライドの表示タイミング */
}
/* 各スライドのアニメーションタイミングを均等にずらす */
.slideimg:nth-of-type(1) {
background-image: url("/assets/img/common/other_logo03.jpg");
animation-delay: 0s;
}
.slideimg:nth-of-type(2) {
background-image: url("/assets/img/common/other_logo04.jpg");
animation-delay: 3s;
}
.slideimg:nth-of-type(3) {
background-image: url("/assets/img/common/other_logo05.jpg");
animation-delay: 6s;
}
.slideimg:nth-of-type(4) {
background-image: url("/assets/img/common/other_logo03.jpg");
animation-delay: 9s;
}
/* --- ▼contactのbutton-- */
.contact_li_button{
border: solid 1px #9C9C9C;
display: flex;
flex: row;
justify-content: center;
align-items: center;
background-color: #ffffff;
padding: 1rem 1rem;
letter-spacing: 0.1rem;
color: #363636;
font-weight: 600;
border-radius: 2.5px;
box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, 0.3);
}
.contact_li_button_hover {
transition: all 0.3s ease 0s;
position: relative;
z-index: 1;
cursor: pointer;
}
.contact_li_button_hover::before {
background: #0046aa;
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
left: 0;
bottom: 0;
margin: auto;
transform: scale(0, 1);
transform-origin: right top;
transition: transform 0.6s;
z-index: -1;
cursor: pointer;
}
.contact_li_button_hover:hover {
color: #fff;
}
.contact_li_button_hover:hover::before {
transform-origin: left top;
transform: scale(1, 1);
}
/* ------------------ */
.others_title{
position: relative;
line-height: 1.4;
padding:0.25em 1em;
display: inline-block;
top:0;
font-size:clamp(1.25rem, 0.341rem + 4.55vw, 3.75rem) ;
}
.others_title:before, .others_title:after {
position: absolute;
top: 0;
content:'';
width: 8px;
height: 100%;
display: inline-block;
}
.others_title:before {
border-left: solid 1px black;
border-top: solid 1px black;
border-bottom: solid 1px black;
left: 0;
}
.others_title:after {
content: '';
border-top: solid 1px black;
border-right: solid 1px black;
border-bottom: solid 1px black;
right: 0;
}
.others_background_05{
background: url("/assets/img/inquiry/bg_func.png");
padding: 8.1rem 0 5rem;
font-size: 1.6rem;
margin: -40px 0 0 0;
}
.others_background_06{
background-color: #FFFFFF;
padding: 4rem 2.5rem;
border-radius: 0.25rem;
margin-bottom: 4rem;
}
.others_div{
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
padding: 1rem 0 0 1rem;
background-color: #ffffff;
margin-bottom: 5rem;
border-left:7px solid #0046aa;
height:auto;
}
.others_div label{
margin: 1rem;
}
@media (max-width: 550px){
.others_title{
font-weight: 600;
}
.others_div{
display: block; /* フレックスボックスを解除して、通常のブロック要素に */
text-align: left; /* テキストを左揃えに */
height: auto;
padding: 3rem 0 0 1rem;
}
.others_div label{
display: block; /* ラベルをブロック要素にして縦に並べる */
margin-bottom: 10px; /* ラベル間にスペースを追加 */
}
}
/*
---------フェードアニメーション----------------*/
.fadein {
animation: fadein 0.6s forwards;
}
@keyframes fadein {
0% { opacity: 0; transform: translateX(-30px); }
100% { opacity: 1; transform: translateX(0); }
}
.fade2in {
animation: fade2in 0.6s forwards;
}
@keyframes fade2in {
0% { opacity: 0; transform: translateX(80px); }
100% { opacity: 1; transform: translateX(0); }
}
.fade3in {
animation: fade3in 1s forwards;
}
@keyframes fade3in {
0% { opacity: 0; transform: translateY(40px); }
100% { opacity: 1; transform: translateY(0); }
}
.fade4in {
animation: fade4in 1s forwards;
}
@keyframes fade4in {
0% { opacity: 0; transform: translateY(-40px); }
100% { opacity: 1; transform: translateY(0); }
}
/*
---------その他の問い合わせ----------------*/
.col-sm-9 {
margin:0 0 2em 3em ;
}
.col-sm-3 {
margin:0 0 0 3em ;
}
.others_thanks {
text-align: center;
font-size: 1.5em ;
margin:0 ;
}
.others_thanks_btn{
text-align: center;
margin:2em 0 0 0 ;
}
#blog {
margin-top: 80px;
}
#blog #sidebar .bnr01,
#blog #sidebar .bnr02,
#blog #sidebar .bnr03{
margin-bottom: 30px;
}
#blog #sidebar .bnr01 img{
display: block;
margin-bottom: 10px;
}
#blog #sidebar {
background: #eef2f3;
padding: 25px 20px;
text-align: left;
margin-bottom: 20px;
}
#blog #sidebar h2{
font-size: 120%;
color: #0046aa;
border-bottom: 1px #000 solid;
padding-bottom: 3px;
margin-bottom: 15px;
}
#blog #sidebar ul.recently li{
margin-bottom: 25px;
}
#blog #sidebar ul.recently li a{
display: block;
margin-bottom: 10px;
}
#blog #sidebar ul.recently li span{
display: block;
}
#blog #sidebar ul.category li{
list-style-type: disc;
list-style-position: inside;
margin-bottom: 3px;
}
#blog #main .title{
background: #0046aa;
color: #FFF;
padding: 7px 20px 4px 20px;
overflow:hidden;
}
#blog #main .title h1 {font-size: 2.1rem; margin-bottom:5px;}
#blog #main .title h1,
#blog #main .title h1 a {
color: #FFF;
float: left;
text-decoration:none;
}
#blog #main .title .date{
float: right;
margin-top: 5px;
}
#blog .post-meta {
background:#eee;
padding:4px 20px;
}
#blog .post {
margin-top:2.5rem;
}
#blog #main .articlecat{
padding: 20px 0 40px 0;
}
#blog #main .articlecat li{
float: left;
display: inline-block;
margin-right: 5px;
}
#blog #main h3 {
font-size: 2.6rem;
border-bottom: 5px solid #f0f8ff;
}
#blog #main h4 {
font-size: 1.6rem;
}
#blog #main article{
margin-bottom: 80px;
}
#blog #main article p{
text-align: left;
}
#blog #main article .image{
text-align: center;
margin-bottom: 40px;
}
#blog #main article .more a{
width: 100px;
float: right;
margin-right: 10px;
margin-top: 20px;
margin: 20px 10px 0 0;
background: #0046aa;
color: #fff;
text-align: center;
padding: 5px 10px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
#blog #main article .more a:hover{
background: #023066;
}
#blog .widget {
margin-bottom:2rem;
}
.c-marker {background:#ffff99;}