@charset "UTF-8";
 html, body {
margin: 0;
padding: 0;
}
#front-main {
width: 100%;
line-height: 1.2;
padding: 0;
margin: 80px 0 0 0;
}
#front-main * {
box-sizing: border-box;
}
.front-h2 {
font-family: "Hiragino Sans", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
letter-spacing: -0.02em;
line-height: 1.3;
text-align: center;
}
.front-description {
max-width: 800px;
margin: 0 auto 32px auto;
text-align: left;
}
.screen-reader-text {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
#hero-front {
background: linear-gradient(180deg, #e2f1ff 0%, #e2f1ff 50%, #ffffff 100%);
}
#hero-front .hf-inner {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row-reverse;
}
#hero-front .hf-inner .hf-item-l {
color: #34638d;
}
#hero-front .hf-inner .hf-item-l .hf-head {
font-family: "Hiragino Sans", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
font-weight: 500 !important;
line-height: 1.3 !important;
margin: 0;
}
#hero-front .hf-inner .hf-item-l .hf-head span {
display: block;
font-weight: 400;
color: #0066cc;
}
#hero-front .hf-inner .hf-item-l .hf-note {
font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN", "メイリオ", Meiryo, "游ゴシック体", YuGothic;
line-height: 1.5;
font-weight: 500;
}
#hero-front .hf-inner .hf-item-r img {
width: 100%;
height: auto;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.we-info {
position: relative;
}
.we-info::before {
content: '';
position: absolute;
inset: 0;
background-image: url(//wedok.jp/wp-content/themes/wedok2025/images/bg/bg-03.png);
opacity: 0.3;
z-index: 0;
}
.we-info .wei-inner {
width: 1024px;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
opacity: 1 !important;
}
.we-info .wei-inner .wei-h2 {
width: 38%;
text-align: center;
color: #34638d;
line-height: 1.8;
}
.we-info .wei-inner .wei-h2 span {
display: block;
font-size: 1.2rem;
margin: 0 0 .5em 0;
padding: 8px 0 0 0;
font-family: "Century Gothic", "Futura", "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 400;
color: #0066cc;
}
.we-info .wei-inner .wei-h2 span span {
display: inline-block;
vertical-align: middle;
}
.we-info .wei-inner .wei-h2 img {
display: inline-block;
vertical-align: middle;
width: 30px;
height: auto;
margin: 0 16px 0 0;
}
.we-info .wei-inner .wei-note {
width: 62%;
font-weight: 400;
}
.wedok-future {
margin: 0 auto;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.wedok-future .front-h2 {
margin: 0 0 2em 0;
}
.wedok-future .features-list {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
list-style-type: none;
margin: 0;
padding: 0;
}
.wedok-future .features-list li {
text-align: left;
padding: 24px 16px 8px 40px;
border: 1px solid #aaa;
border-radius: 8px;
position: relative;
}
.wedok-future .features-list li::after {
content: 'Point!';
position: absolute;
top: -5px; left: -5px; background-color: #f2a20d; color: #fff; font-size: 1rem;
font-weight: bold;
padding: 5px 10px;
border-radius: 5px; -moz-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
font-family: "Century Gothic", "Futura", "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.wedok-future .features-list li h3 {
font-family: "Hiragino Sans", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
font-feature-settings: "palt";
margin: 0 0 8px 0;
text-align: center;
font-weight: 700 !important;
}
.wedok-future .features-list li h3 span {
display: block;
font-family: "Century Gothic", "Futura", "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #0066cc;
font-weight: 400;
}
.wedok-future .features-list li p {
line-height: 1.3;
}
.service-overview {
background: linear-gradient(to bottom, rgba(0, 167, 181, 0.1), rgba(0, 0, 0, 0));
}
.so-card-wrap {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.so-card-wrap .card-items {
background-color: #fff;
border: 1px solid #ddd;
position: relative;
text-align: center;
background-repeat: no-repeat;
background-position: top 32px left 50%;
background-color: #fff;
-webkit-filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.1));
filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.1));
}
.so-card-wrap .card-items-title {
font-family: "Hiragino Sans", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
font-weight: 900;
text-align: center;
line-height: 1;
margin: 0 0 32px 0;
}
.so-card-wrap .card-items-title span {
display: block;
font-family: "Century Gothic", "Futura", "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 300;
margin: 0 0 0.8em 0 !important;
}
.so-card-wrap .card-items-text {
text-align: left;
line-height: 1.3;
margin: 0 0 1.5em 0;
font-size: .9rem;
}
.so-card-wrap .ci-web {
background-image: url(//wedok.jp/wp-content/themes/wedok2025/images/pages/front/f-web.svg);
}
.so-card-wrap .ci-photo {
background-image: url(//wedok.jp/wp-content/themes/wedok2025/images/pages/front/f-photo.svg);
}
.so-card-wrap .ci-repair {
display: none;
background-image: url(//wedok.jp/wp-content/themes/wedok2025/images/pages/front/f-repair.svg);
}
#web-plan-select {
width: 100%;
background: linear-gradient(to bottom, rgba(242, 162, 13, 0.1), rgba(0, 0, 0, 0));
border-top: 1px solid #eee;
}
#web-plan-select .box-inner .bi-head {
margin: 0 auto;
text-align: center;
}
#web-plan-select .box-inner .plan-select-flowchart img {
width: 100%;
height: auto;
}
.next-step {
max-width: 1200px;
margin: 48px 0 0 0;
display: flex;
justify-content: center;
align-items: center;
background-color: #fff;
border-radius: 8px;
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 8px;
}
.next-step .ns-img, .next-step .ns-inner {
width: 50%;
}
.next-step .ns-img {
text-align: center;
background-color: #eff6ff;
border-radius: 8px 0 0 8px;
padding: 0;
margin: 0;
}
.next-step .ns-img img {
width: 70%;
height: auto;
padding: 24px 0;
}
.next-step .ns-inner {
padding: 16px 32px;
}
.next-step .ns-inner h2 {
font-family: "Hiragino Sans", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
font-weight: 700;
}
.next-step .ns-inner .nsi-note {
line-height: 1.6;
}
.next-step .ns-inner .plan-select-cta {
width: 100%;
text-align: center;
}
.newpost {
margin: 0 auto;
border-top: 1px solid #eee;
background: linear-gradient(to bottom, rgba(250, 250, 250, 0.7), rgba(0, 0, 0, 0));
}
.newpost .np-h2 {
font-family: "Hiragino Sans", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif !important;
text-align: center !important;
margin: 0 0 1em 0 !important;
}
.newpost .front-post-list {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
list-style-type: none;
margin: 0 !important;
padding: 0 !important;
}
.newpost .front-post-list .front-post-list-item {
position: relative;
}
.newpost .front-post-list .front-post-list-item a {
color: #0052cc;
text-decoration: none;
transition: opacity 0.3s ease, color 0.3s ease;
}
.newpost .front-post-list .front-post-list-item a .post-thumbnail {
position: relative;
overflow: hidden;
border-radius: 8px !important;
}
.newpost .front-post-list .front-post-list-item a .post-thumbnail img {
width: 100%;
height: auto;
transition: scale 0.3s ease;
}
.newpost .front-post-list .front-post-list-item a .post-thumbnail .post-cat {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%) !important;
display: inline-block;
color: #fff;
border-radius: 0 0 4px 4px;
white-space: nowrap;
}
.newpost .front-post-list .front-post-list-item a .post-thumbnail .notice {
background-color: #111;
}
.newpost .front-post-list .front-post-list-item a .post-thumbnail .web {
background-color: #34638d;
}
.newpost .front-post-list .front-post-list-item a .post-thumbnail .attacks {
background-color: #483d8b;
}
.newpost .front-post-list .front-post-list-item a .post-thumbnail .photo {
background-color: #f2a20d;
}
.newpost .front-post-list .front-post-list-item a .post-thumbnail .risa-note {
background-color: #c0392b;
}
.newpost .front-post-list .front-post-list-item a .post-thumbnail .pc-tips {
background-color: #556b2f;
}
.newpost .front-post-list .front-post-list-item .post-meta {
display: block;
padding: 4px 0;
}
.newpost .front-post-list .front-post-list-item .post-meta .sticky-mark,
.newpost .front-post-list .front-post-list-item .post-meta .new-mark {
font-family: "Century Gothic", "Futura", "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 700;
line-height: 1;
display: inline-block;
margin: 0 4px 0 0;
border-radius: 2px;
}
.newpost .front-post-list .front-post-list-item .post-meta .sticky-mark {
color: #dc143c;
border: 1px solid #dc143c;
}
.newpost .front-post-list .front-post-list-item .post-meta .new-mark {
color: #4169e1;
border: 1px solid #4169e1;
}
.newpost .front-post-list .front-post-list-item .post-meta .post-date,
.newpost .front-post-list .front-post-list-item .post-meta .good-post {
display: inline-block;
background-repeat: no-repeat;
background-position: top 50% left 0;
}
.newpost .front-post-list .front-post-list-item .post-meta .post-date {
background-image: url(//wedok.jp/wp-content/themes/wedok2025/images/elements/icons/archive.svg);
margin: 0 0.5em 0 0;
background-size: auto 18px;
padding: 4px 0 4px 18px !important;
font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN", "メイリオ", Meiryo, "游ゴシック体", YuGothic;
}
.newpost .front-post-list .front-post-list-item .post-meta .good-post {
background-image: url(//wedok.jp/wp-content/themes/wedok2025/images/elements/icons/pop.svg);
background-size: auto 18px;
padding: 4px 0 4px 14px !important;
font-family: "Century Gothic", "Futura", "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.newpost .front-post-list .front-post-list-item .post-title {
font-family: "Hiragino Sans", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
font-size: 0.9rem !important;
font-weight: 700 !important;
margin: 0 !important;
}
.newpost .front-post-ad img {
display: none;
}
.newpost .front-post-ad a img {
display: block;
width: 100%;
height: auto; border: 0;
border-radius: 8px !important;
}
@media (max-width: 767px) {
html, body {
margin: 0;
padding: 0;
}
#front-main img {
width: 100%;
height: auto;
}
.front-h2 {
font-size: 1.2rem;
margin-bottom: 24px;
}
.front-description {
font-size: .85rem;
padding: 0 20px;
line-height: 1.3;
}
.cta-def {
font-size: 1rem !important;
}
.cta-def a {
padding: 12px 32px;
}
.section-wrap {
padding: 3em 0;
}
#hero-front {
margin: 0;
padding: 0;
}
#hero-front .hf-inner {
max-width: 100%;
margin: 0 auto;
padding: 0;
flex-wrap: wrap;
flex-direction: column;
}
#hero-front .hf-inner .hf-item-l,
#hero-front .hf-inner .hf-item-r {
width: 100%;
}
#hero-front .hf-inner .hf-item-l {
text-align: center;
}
#hero-front .hf-inner .hf-item-l .hf-head {
font-size: 1.4rem !important;
}
#hero-front .hf-inner .hf-item-l .hf-head span {
font-size: 1.1rem !important;
}
#hero-front .hf-inner .hf-item-l .hf-head br {
display: block !important;
}
#hero-front .hf-inner .hf-item-l .hf-note {
font-size: 0.9em !important;
}
#hero-front .hf-inner .hf-item-r {
margin: 0;
}
#hero-front .hf-inner .hf-item-r img {
width: 100%;
height: auto;
}
#hero-front .cta-def {
text-align: center;
margin: 2em 0;
}
.we-point {
padding: 2em 0;
}
.we-point .wep-inner {
width: 100%;
padding: 0 1.5em;
flex-wrap: wrap;
}
.we-point .wep-inner .wep-h2 {
width: 100%;
font-size: 1.3rem;
margin: 0 0 .5em 0;
font-weight: 400;
}
.we-point .wep-inner .wep-h2 span {
font-size: 1.2rem;
margin: 0 0 .8px 0;
padding: 8px 0 0 0;
}
.we-point .wep-inner .wep-h2 img {
margin: 0 16px 0 0;
}
.we-point .wep-inner .wep-note {
width: 100%;
font-size: .9rem;
line-height: 1.3;
}
.we-info {
padding: 1.5em 20px;
margin: 0 auto 1.5em auto;
}
.we-info .wei-inner {
max-width: 100%;
margin: 0 auto;
pading: 2em 20px !important;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
flex: wrap;
}
.we-info .wei-inner .wei-h2 {
width: 100%;
text-align: center;
color: #34638d;
line-height: 1.5;
font-size: 1.5rem;
}
.we-info .wei-inner .wei-h2 span {
display: block;
font-size: 1.5rem;
margin: 0 0 1em 0;
padding: 8px 0 0 0;
font-family: "Century Gothic", "Futura", "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 400;
letter-spacing: 2px;
color: #0066cc;
text-align: center;
}
.we-info .wei-inner .wei-h2 span img {
max-width: 100%;
height: auto;
padding: 0 25% 1em 25%;
}
.we-info .wei-inner .wei-h2 span span {
display: block;
vertical-align: middle !important;
}
.we-info .wei-inner .wei-h2 br {
display: block !important;
}
.we-info .wei-inner .wei-h2 img {
display: inline-block;
vertical-align: middle;
width: 30px;
height: auto;
margin: 0 16px 0 0;
}
.we-info .wei-inner .wei-note {
width: 100%;
}
.we-info .wei-inner .wei-note p {
font-size: 0.9rem !important;
line-height: 1.3;
}
.wp-future-wrap {
width: 100%;
padding: 1em 20px;
}
.wp-future-wrap .features-list li {
line-height: 1.2;
width: 100%;
padding: 16px;
margin: 0 0 24px 0;
}
.wp-future-wrap .features-list li h3 {
font-size: 1rem;
margin: 0 0 8px 0;
}
.wp-future-wrap .features-list li p {
font-size: .9rem;
line-height: 1.3;
}
.wp-future-wrap .cta-def {
text-align: center;
margin: 2em 0;
}
.service-overview {
margin: 0;
padding: 40px 20px;
}
.service-overview br {
display: block !important;
}
.so-card-wrap {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
padding: 0;
}
.so-card-wrap .card-items {
width: 100%;
padding: 300px 1em 1em 1em;
border: 1px solid #ddd;
position: relative;
margin: 0 0 24px 0;
background-size: auto 240px !important;
}
.so-card-wrap .card-items-title {
font-size: 1.5rem;
text-align: center;
line-height: 1;
margin: 0 0 32px 0;
}
.so-card-wrap .card-items-title span {
display: block;
font-size: .9rem;
margin: 16px 0;
}
.so-card-wrap .card-items .card-items-text {
font-size: .85rem;
line-height: 1.3;
text-align: left;
}
.so-card-wrap .card-items .cta-btn {
position: absolute;
bottom: 20px;
left: 0;
right: 0;
}
.so-card-wrap .card-items:last-child {
margin: 0;
}
.so-card-wrap .card-items .ci-web,
.so-card-wrap .card-items .ci-photo,
.so-card-wrap .card-items .ci-repair {
background-size: auto 200px !important;
}
.so-card-wrap .cta-def {
text-align: center;
margin: 2em 0;
}
#web-plan-select {
margin: 0;
padding: 40px 0;
}
#web-plan-select .box-inner {
padding: 0;
margin: 0px auto;
}
#web-plan-select .box-inner .bi-head {
width: 100%;
margin: 0 auto;
padding: 0;
text-align: center;
}
#web-plan-select .box-inner .plan-select-flowchart {
margin: 40px 0 0 0;
padding: 0;
}
#web-plan-select .box-inner .plan-select-flowchart img {
width: 100%;
height: auto;
}
.next-step {
width: 100%;
margin: 48px 0 0 0;
display: flex;
justify-content: center;
align-items: center;
align-items: center;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
background-color: #fff;
border-radius: 8px;
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 8px;
}
.next-step .ns-img, .next-step .ns-inner {
width: 100%;
}
.next-step .ns-img {
text-align: center;
background-color: #eff6ff;
border-radius: 8px 0 0 8px;
padding: 24px 0;
}
.next-step .ns-img img {
width: 50%;
height: auto;
}
.next-step .ns-inner {
padding: 16px 32px;
}
.next-step .ns-inner h2 {
font-family: "Hiragino Sans", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
font-weight: 700;
margin: 0 0 16px 0;
font-size: 1.3rem;
}
.next-step .ns-inner p {
font-size: .9rem;
}
.newpost {
margin: 0 auto;
padding: 1.5em 20px;
}
.newpost .front-post-list li {
width: 100%;
margin: 16px 0;
}
.newpost .front-post-list li a .post-thumbnail .post-cat {
font-size: .7rem;
padding: 4px 8px;
}
.newpost .front-post-list li .post-meta {
font-size: .75rem;
}
.newpost .front-post-list li .post-date,
.newpost .front-post-list li .good-post {
background-size: auto 12px !important;
padding: 4px 0 4px 24px !important;
}
.newpost .front-post-list li .np-h3 {
font-size: 1rem;
margin: 0;
}
.newpost .front-post-list li .np-note {
font-size: .8rem;
line-height: 1.3;
margin: 0;
}
.newpost .front-post-list li .ec-img {
display: block;
overflow: hidden;
}
}
@media (min-width: 768px) and (max-width: 1024px) {
.front-h2 {
font-size: 1.8rem;
margin-bottom: 1em;
}
.front-description {
font-size: .9rem;
}
.cta-def {
margin: 1em 0;
font-size: 1rem !important;
}
.cta-def a {
padding: 12px 32px;
}
.cta-center {
text-align: center;
}
.section-wrap {
padding: 3em 0;
}
#hero-front {
max-width: 100%;
padding: 32px 20px;
}
#hero-front .hf-inner {
max-width: 100%;
margin: 0 auto;
padding: 0 40px;
}
#hero-front .hf-inner .hf-item-l {
width: 48%;
}
#hero-front .hf-inner .hf-item-l .hf-head {
font-size: 1.6rem !important;
}
#hero-front .hf-inner .hf-item-l .hf-head span {
margin: 1em 0 0 0;
font-size: 1.2rem !important;
font-weight: 400;
}
#hero-front .hf-inner .hf-item-l .hf-note {
font-size: 1.1em !important;
font-weight: 400;
}
#hero-front .hf-inner .hf-item-r {
width: 50%;
}
.we-info {
background-color: #f8f8f8;
}
.we-info .wei-inner {
max-width: 88%;
margin: 0 auto;
pading: 2em 0;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.we-info .wei-inner .wei-h2 {
width: 35%;
text-align: center;
color: #34638d;
line-height: 1.5;
}
.we-info .wei-inner .wei-h2 span {
display: block;
font-size: 1.2rem;
margin: 0 0 .5em 0;
padding: 8px 0 0 0;
font-family: "Century Gothic", "Futura", "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 400;
color: #0066cc;
}
.we-info .wei-inner .wei-h2 span span {
display: inline-block;
vertical-align: middle;
}
.we-info .wei-inner .wei-h2 img {
display: inline-block;
vertical-align: middle;
width: 30px;
height: auto;
margin: 0 16px 0 0;
}
.we-info .wei-inner .wei-note {
width: 55%;
}
.we-info .wei-inner .wei-note p {
font-size: 0.9rem !important;
line-height: 1.3;
}
.we-point {
padding: 1em 0 !important;
}
.we-point .wep-inner {
width: 100%;
padding: 0 1.5em;
}
.we-point .wep-inner .wep-h2 {
width: 35%;
font-size: 1.4rem;
}
.we-point .wep-inner .wep-h2 span {
font-size: 1.1rem;
margin: 0 0 .5em 0;
padding: 8px 0 0 0;
}
.we-point .wep-inner .wep-h2 strong {
font-size: 1.5rem;
}
.we-point .wep-inner .wep-h2 img {
margin: 0 16px 0 0;
}
.we-point .wep-inner .wep-note {
width: 55%;
padding: 0 0 0 1em;
}
.we-point .wep-inner .wep-note p {
font-size: 1rem !important;
line-height: 1.5 !important;
font-weight: 400 !important;
}
.wp-future-wrap {
max-width: 98%;
padding: 2em 40px;
margin: 0 auto;
}
.wp-future-wrap .features-list {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.wp-future-wrap .features-list li {
width: 48%;
padding: 16px 12px 8px 12px;
margin: 0 0 32px 0;
}
.wp-future-wrap .features-list li h3 {
font-size: 1rem;
margin: 0 0 8px 0;
}
.wp-future-wrap .features-list li h3 span {
font-size: .8rem;
margin: 0 0 8px 0;
}
.wp-future-wrap .features-list li p {
font-size: .9rem;
}
.service-overview {
padding: 2em 40px;
}
.service-overview__title {
font-family: "Hiragino Sans", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
font-size: 1.5rem;
margin-bottom: 20px;
}
.service-overview__grid {
grid-template-columns: repeat(3, 1fr);
gap: 15px;
}
.so-card-wrap {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
padding: 0 0 2em 0;
}
.so-card-wrap .card-items {
padding: 280px 1em 2em 1em !important;
background-color: #fff;
border: 1px solid #ddd;
position: relative;
padding: 380px 1em 1em 1em;
background-size: 72% auto;
}
.so-card-wrap .card-items-title {
font-size: 1.5rem;
text-align: center;
line-height: 1;
margin: 0 0 32px 0;
}
.so-card-wrap .card-items-title span {
display: block;
font-size: .8rem;
margin: 16px 0;
}
.so-card-wrap .card-items .card-items-text {
font-size: .9rem;
line-height: 1.2;
}
.so-card-wrap .card-items .cta-def {
text-align: center;
margin: 3em 0 1.5em 0 !important;
}
.so-card-wrap .ci-web {
width: 48%;
margin: 0 0 0 0;
}
.so-card-wrap .ci-photo {
width: 48%;
}
.so-card-wrap .ci-repair {
width: 48%;
}
#web-plan-select {
margin: 56px auto;
}
#web-plan-select .box-inner {
max-width: 90%;
margin: 0 auto;
}
#web-plan-select .box-inner .bi-head {
width: 100%;
margin: 0 auto;
padding: 0;
text-align: center;
}
#web-plan-select .box-inner .bi-head h2, #web-plan-select .box-inner .bi-head p {
max-width: 800px;
}
#web-plan-select .box-inner .plan-select-flowchart {
text-align: center;
margin: 40px 0 0 0;
padding: 0 40px;
}
.next-step {
margin: 48px 0 0 0;
align-items: stretch;
}
.next-step .ns-img, .next-step .ns-inner {
width: 50%;
}
.next-step .ns-img {
padding: 24px 0;
}
.next-step .ns-img img {
width: 70%;
height: auto;
}
.next-step .ns-inner {
padding: 32px;
line-height: 1.2;
letter-spacing: 0.2;
}
.next-step .ns-inner h2 {
font-size: 1.1rem;
margin: 0 0 16px 0;
}
.next-step .ns-inner p {
font-size: .9rem;
}
.newpost {
width: 100%;
padding: 3em 0;
}
.newpost h2 {
font-size: 2rem;
margin: 0 0 24px 0;
}
.newpost .front-post-list {
width: 100% !important;
margin: 0 auto !important;
padding: 0 40px !important;
}
.newpost .front-post-list .front-post-list-item {
width: 47%;
margin: 16px 0;
}
.newpost .front-post-list .front-post-list-item a {
transition: opacity 0.3s ease, color 0.3s ease;
}
.newpost .front-post-list .front-post-list-item a .post-thumbnail {
border-radius: 8px;
}
.newpost .front-post-list .front-post-list-item a .post-thumbnail img {
width: 100%;
height: auto;
}
.newpost .front-post-list .front-post-list-item a .post-thumbnail:hover img {
opacity: 0.7;
scale: 1.1;
}
.newpost .front-post-list .front-post-list-item a .post-thumbnail .post-cat {
padding: 3px 8px;
font-size: 0.7rem !important;
}
.newpost .front-post-list .front-post-list-item .post-meta {
font-size: .7rem;
}
.newpost .front-post-list .front-post-list-item .post-meta .post-date,
.newpost .front-post-list .front-post-list-item .post-meta .good-post {
background-size: auto 12px;
padding: 0 0 0 18px;
}
.newpost .front-post-list .front-post-list-item .post-date,
.newpost .front-post-list .front-post-list-item .good-post {
display: inline-block;
background-repeat: no-repeat;
background-position: top 50% left 0;
}
.newpost .front-post-list .front-post-list-item .post-date {
background-size: auto 16px;
padding: 4px 0 4px 18px !important;
}
.newpost .front-post-list .front-post-list-item .good-post {
background-size: auto 16px;
padding: 4px 0 4px 14px !important;
}
.newpost .front-post-list .front-post-list-item .post-title {
font-size: 0.9rem !important;
margin: 0.4em 0 !important;
}
.newpost .front-post-list .front-post-list-item .post-excerpt {
font-size: 0.8rem !important;
}
}
@media (min-width: 1025px) {
.cta-def {
margin: 2em 0 0 0;
}
.front-h2 {
font-family: "Hiragino Sans", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
font-size: 2rem;
margin-bottom: 40px;
}
.front-description {
font-size: 1rem;
}
.box-inner {
max-width: 1024px;
margin: 0 auto;
}
#hero-front {
padding: 0;
}
#hero-front .hf-inner {
max-width: 1024px;
margin: 0 auto;
}
#hero-front .hf-inner .hf-item-l {
width: 40%;
}
#hero-front .hf-inner .hf-item-l .hf-head {
font-size: 2rem !important;
font-family: "Hiragino Sans", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
}
#hero-front .hf-inner .hf-item-l .hf-head span {
font-size: 1.2rem !important;
margin: 1em 0;
}
#hero-front .hf-inner .hf-item-l .hf-note {
font-size: 1.2em !important;
}
#hero-front .hf-inner .hf-item-r {
width: 58%;
}
#hero-front .hf-inner .hf-item-r img {
width: 100%;
height: auto;
}
.we-info {
padding: 3em 0;
}
.we-info .wep-inner {
width: 1024px;
}
.we-info .wep-inner .wep-h2 {
width: 38%;
font-weight: 700;
font-size: 1.2rem;
}
.we-info .wep-inner .wep-h2 span {
font-size: 1.4rem;
margin: 0 0 .5em 0;
padding: 8px 0 0 0;
}
.we-info .wep-inner .wep-h2 strong {
font-size: 1.7rem;
font-weight: 700 !important;
}
.we-info .wep-inner .wep-h2 img {
margin: 0 16px 0 0;
}
.we-info .wep-inner .wep-note {
font-size: 1rem;
width: 62%;
}
.wedok-future {
max-width: 1200px;
margin: 3em auto;
padding: 3em;
}
.wedok-future .features-list li {
width: 32%;
padding: 16px 16px 8px 16px;
margin: 0 0 32px 0;
}
.wedok-future .features-list li h3 {
font-size: 1rem;
margin: 0;
}
.wedok-future .features-list li h3 span {
font-size: .9rem;
margin: 0 0 8px 0;
}
.wedok-future .features-list li p {
font-size: .85rem;
line-height: 1.2rem;
}
.service-overview {
padding: 3em 0 !important;
}
.so-card-wrap {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin: 0 0 2em 0 !important;
}
.so-card-wrap .card-items {
width: 45%;
padding: 380px 1.5em 2em 1.5em !important;
background-size: 70% auto;
}
.so-card-wrap .card-items-title {
font-family: "Hiragino Sans", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
font-weight: 900;
font-size: 1.5rem;
text-align: center;
line-height: 1;
margin: 0 0 24px 0 !important;
}
.so-card-wrap .card-items-title span {
font-size: .9rem;
font-weight: 500;
margin: 24px 0 0 0;
}
#web-plan-select {
margin: 0 auto;
padding: 80px 0;
}
#web-plan-select .box-inner {
max-width: 1200px;
margin: 0 auto 0px auto;
}
#web-plan-select .box-inner .bi-head {
max-width: 800px;
padding: 0 20px;
margin: 0 auto;
text-align: center;
}
#web-plan-select .box-inner .bi-head h2.front-h2, #web-plan-select .box-inner .bi-head p {
max-width: 800px;
}
#web-plan-select .box-inner .plan-select-flowchart {
max-width: 1200px;
margin: 40px 0 0 0;
padding: 0 40px;
}
#web-plan-select .box-inner .plan-select-cta {
text-align: center;
}
.next-step {
margin: 48px 0 0 0;
}
.next-step .ns-img, .next-step .ns-inner {
width: 50%;
}
.next-step .ns-img {
padding: 0px 0;
}
.next-step .ns-img img {
width: 70%;
height: auto;
}
.next-step .ns-inner {
padding: 32px;
line-height: 1.2;
letter-spacing: 0.2;
}
.next-step .ns-inner h2 {
font-size: 1.8rem;
margin: 0 0 24px 0;
}
.next-step .ns-inner p {
font-size: 1rem;
}
.newpost {
width: 100%;
padding: 3em 0;
}
.newpost h2 {
font-size: 2rem;
margin: 0 0 24px 0;
}
.newpost .front-post-list {
max-width: 1240px;
margin: 0 auto !important;
padding: 0 20px !important;
}
.newpost .front-post-list .front-post-list-item {
width: 23%;
margin: 1em 0;
}
.newpost .front-post-list .front-post-list-item a {
transition: color 0.3s ease;
}
.newpost .front-post-list .front-post-list-item a .post-thumbnail {
border-radius: 8px !important;
overflow: hidden;
aspect-ratio: 280 / 147;
}
.newpost .front-post-list .front-post-list-item a .post-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .4s ease, opacity .4s ease;
}
.newpost .front-post-list .front-post-list-item a .post-thumbnail:hover img {
opacity: 0.7;
transform: scale(1.06) rotate(2deg);
}
.newpost .front-post-list .front-post-list-item a .post-thumbnail .post-cat {
padding: 4px 8px 3px 8px !important;
font-size: 0.7rem !important;
}
.newpost .front-post-list .front-post-list-item .post-meta {
font-size: .75rem;
}
.newpost .front-post-list .front-post-list-item .post-meta .post-date,
.newpost .front-post-list .front-post-list-item .post-meta .good-post {
background-size: auto 12px;
padding: 0 0 0 18px;
}
.newpost .front-post-list .front-post-list-item .post-date,
.newpost .front-post-list .front-post-list-item .good-post {
display: inline-block;
background-repeat: no-repeat;
background-position: top 50% left 0;
background-size: auto 16px;
padding: 4px 0 4px 22px;
}
.newpost .front-post-list .front-post-list-item .post-title {
font-size: 0.9rem !important;
margin: 0 !important;
}
.newpost .front-post-list .front-post-list-item .post-excerpt {
font-size: 0.8rem !important;
}
}