@import url("https://fonts.googleapis.com/css?family=Noto+Sans");
@import url("https://fonts.googleapis.com/earlyaccess/notosansjp.css");
body {
margin: 0
}
address,
blockquote,
dl,
figure,
form,
iframe,
p,
pre,
table {
margin: 0
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
line-height: inherit;
font-weight: inherit;
margin: 0
}
ol,
ul {
margin: 0;
padding: 0;
list-style: none
}
*,
::after,
::before {
-webkit-box-sizing: border-box;
box-sizing: border-box
}
html {
scroll-behavior: smooth
}
body {
font-family: source-han-serif-japanese, "ヒラギノ明朝 Pro W3", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "メイリオ", Meiryo, serif;
margin: 0;
color: #2d2d34;
font-size: 14px
}
img {
max-width: 100%;
height: auto
}
img[src$=".svg"] {
fill: currentColor;
width: 100%;
height: auto
}
button:focus {
outline: unset
}
button:hover {
opacity: .9
}
a {
text-decoration: none;
color: #000
}
.l-footer {
margin-top: 0!important;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
width: 100%
}
.l-footer__left {
background-color: #334f9e;
width: 38%;
padding: 100px 30px
}
.l-footer__right {
background-color: #2d2d34;
width: 62%;
padding: 130px 40px;
text-shadow: rgba(100, 100, 111, .2) 0 7px 29px 0;
position: relative
}
.l-footer__right p {
color: #fff;
font-size: 20px
}
.l-footer__right-item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between
}
.l-footer__right-item-column {
width: 190px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
margin-bottom: 20px
}
.l-footer__right-item-column-lead {
text-align: center;
border-bottom: 1.2px solid #fff;
padding-bottom: 5px
}
.l-footer__right-item-column a {
text-decoration: unset;
color: #fff;
font-size: 20px;
padding-left: 10px;
margin-top: 1em
}
.l-footer__logo {
text-align: center
}
.l-footer__logo img {
width: 200px
}
.l-footer__adress {
text-align: center;
margin-top: 50px
}
.l-footer__adress p {
font-size: 20px;
color: #fff;
margin-top: 1em
}
.l-footer__adress p:nth-child(1) {
border-bottom: 1.7px solid #fff;
padding-bottom: 10px
}
@media screen and (max-width:1600px) {
.l-footer__right-item-column {
width: 170px
}
.l-footer__right-item-column a {
font-size: 16px
}
.l-footer__right p {
font-size: 16px
}
}
@media only screen and (max-width:768px) {
.l-footer__left {
width: 100%
}
.l-footer__right {
width: 100%
}
.l-footer__right-item-column {
width: 100%
}
.l-footer__right-item-column a {
font-size: 16px
}
.l-footer__right p {
font-size: 16px
}
}
.c-btn {
display: flex;
align-items: center;
justify-content: center;
margin-left: auto;
margin-right: auto;
width: 360px;
height: 60px;
border-radius: 50px;
background-color: #334f9e;
border: 1px solid #334f9e;
color: #fff;
font-size: 18px;
text-align: center;
font-family: source-han-serif-japanese, "ヒラギノ明朝 Pro W3", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "メイリオ", Meiryo, serif;
-webkit-box-shadow: rgba(100, 100, 111, .2) 0 7px 29px 0;
box-shadow: rgba(100, 100, 111, .2) 0 7px 29px 0;
text-decoration: none !important;
cursor: pointer;
outline: none !important;
}
.c-back-top {
position: absolute;
top: -58px;
right: 40px
}
.c-back-top a {
text-decoration: unset;
color: #fff;
font-size: 20px;
background-color: #303030;
padding: 30px 60px;
border-top-right-radius: 10px;
border-top-left-radius: 10px
}
.c-menu {
position: fixed;
top: 40px;
right: 40px;
cursor: pointer;
z-index: 100
}
.c-menu-other {
position: fixed;
bottom: 40px;
right: 30px;
z-index: 100
}
.c-menu-item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
z-index: 10
}
.c-menu__hamburger-link span {
width: 66px;
height: 8.25px;
background-color: #2d2d34;
display: block;
border-radius: 5px
}
.c-menu__hamburger-link span:nth-child(2) {
margin-top: 10px;
margin-bottom: 10px
}
.c-head {
position: sticky;
top: 0
}
.c-head__logo {
padding-left: 73px;
padding-top: 62px
}
.c-head__logo img {
width: 200px
}
.c-title {
margin-top: 90px;
margin-left: 278px
}
.c-title h3 {
font-size: 72px;
font-family: Noto Serif
}
.c-title p {
font-size: 24px;
font-family: Hiragino Mincho Pro
}
.c-pagination {
display: inline-block;
margin-top: 30px;
}
.c-pagination a {
color: #000;
float: left;
padding: 8px 16px;
border: 1px solid #bbc5df;
text-decoration: none
}
.tab {
overflow: hidden
}
.tab a {
background-color: #fff;
float: left;
border: none;
outline: 0;
cursor: pointer;
padding: .5em 2em;
-webkit-transition: .3s;
transition: .3s;
font-size: 16px;
border: 1px solid #ccd3e7
}
.tab a.active {
background-color: #ccd3e7;
color: #fff
}
@media screen and (max-width:1300px) {
.c-menu {
right: 20px
}
.c-menu-other {
right: 5px
}
}
@media only screen and (max-width:768px) {
.c-menu {
position: fixed;
top: 20px;
right: 20px
}
.c-menu-other {
position: fixed;
bottom: 20px;
right: 20px
}
.c-menu-other img {
width: 40px
}
.c-menu__hamburger-link span {
width: 30px;
height: 2px;
background-color: #2d2d34;
display: block;
border-radius: 5px
}
.c-menu__hamburger-link span:nth-child(2) {
margin-top: 10px;
margin-bottom: 10px
}
.c-title {
margin-top: 40px;
margin-left: 20px
}
.c-title h3 {
font-size: 35px
}
.c-title p {
font-size: 20px
}
.c-head__logo {
padding-left: 20px;
padding-top: 20px
}
.c-head__logo img {
width: 150px
}
.tab a {
padding: .5em 1em;
font-size: 13px;
border: 1px solid #ccd3e7
}
}
.p-top section {
margin-top: 200px
}
.p-top-banner {
margin-top: 0!important;
position: relative;
height: 100vh
}
.p-top-banner__img {
background-image: url(//dev.shujinko100.com/contents/wp-content/themes/shujinko/assets/img/top/top_banner.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 100vh
}
.p-top-banner__txt h2 {
color: #2d2d34;
font-size: 64px;
line-height: 1.5;
position: absolute;
top: calc(50% - 80px);
right: 3%;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
font-weight: unset;
text-align: right
}
.p-top-logo {
position: absolute;
top: 0;
left: 0;
background-color: #334f9e
}
.p-top-logo img {
width: 400px;
padding: 50px
}
.p-top-plan-item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-wrap: wrap;
flex-wrap: wrap
}
.p-top-plan__img {
width: 44.5%
}
.p-top-plan__img img {
-webkit-box-shadow: 65px 65px #33509e18;
box-shadow: 65px 65px #33509e18;
width: 100%
}
.p-top-plan-txt {
width: 45%
}
.p-top-plan-txt h3 {
font-size: 35px;
line-height: 1.5;
font-weight: unset
}
.p-top-plan-txt p {
font-size: 20px;
line-height: 1.6;
margin-top: 1em
}
.p-top-plan__btn {
margin-top: 150px;
text-align: center
}
.p-top-category {
background-color: #33509e18;
padding: 150px 0
}
.p-top-category-item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-wrap: wrap;
flex-wrap: wrap
}
.p-top-category-item a {
text-decoration: unset;
color: #2d2d34
}
.p-top-category-column {
width: 31%
}
.p-top-category-column__img {
margin-top: 30px;
background: url(//dev.shujinko100.com/contents/wp-content/themes/shujinko/assets/img/top/top_bg1.png) no-repeat;
background-size: contain;
background-position: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex
}
.p-top-category-column__img img {
width: 100%;
padding: 30px
}
.p-top-category-column__bottom {
margin-top: 20px
}
.p-top-category-column__bottom img {
width: 100%
}
.p-top-category-column__bottom p {
text-align: right;
font-size: 18px;
color: #2d2d34
}
.p-top-category__lead {
font-size: 35px;
border-left: 9px solid #2d2d34;
padding-left: 18px;
line-height: 1.1;
border-bottom: 1px solid #2d2d34;
padding-bottom: 8px
}
.p-top-category__txt {
font-size: 24px;
margin-top: 1em
}
.p-top-company {
background-color: #33509e18;
background: url(//dev.shujinko100.com/contents/wp-content/themes/shujinko/assets/img/top/top_bg2.png) no-repeat;
background-size: 20%;
background-position: right;
position: relative
}
.p-top-company-item {
padding: 250px 0 80px 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
position: relative
}
.p-top-company-item__left {
width: 49%
}
.p-top-company-item__left img {
width: 100%
}
.p-top-company-item__left h2 {
font-size: 35px
}
.p-top-company-item__left p {
font-size: 20px;
padding: .5em 0
}
.p-top-company-item__right {
width: 49%
}
.p-top-company-item__right img {
width: 100%
}
.p-top-company-item__number {
position: absolute;
right: 20px;
bottom: -50px;
font-size: 70px;
color: #334f9e
}
.p-top-company__btn {
text-align: center;
padding-bottom: 130px
}
.p-top-company__txt {
position: absolute;
top: 100px;
right: 40px
}
.p-top-company__txt p {
font-size: 20px;
color: #2d2d34;
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl
}
.p-top-contact {
background-image: url(//dev.shujinko100.com/contents/wp-content/themes/shujinko/assets/img/top/top_bg.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
padding: 200px 0
}
.p-top-contact-txt {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center
}
.p-top-contact-txt h2 {
font-size: 35px
}
.p-top-contact-txt p {
font-size: 20px;
padding: .5em 0
}
.p-top-contact__btn {
text-align: center;
margin-top: 60px;
display: grid;
grid-template-columns: repeat(2, 360px);
grid-column-gap: 60px;
max-width: 780px;
margin-left: auto;
margin-right: auto;
}
.p-top-news {
background-color: #33509e18;
padding: 230px 20px
}
.p-top-news-item {
max-width: 1300px;
margin: 0 auto;
font-size: 24px
}
.p-top-news-item-row {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
border-bottom: 1px dotted #000;
padding: 20px
}
.p-top-news-item-row p:nth-child(1) {
margin-right: 4%
}
@media screen and (max-width:850px) {
.p-top-news-item-row {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start
}
}
.p-top-news-item__lead h2 {
font-size: 35px;
text-align: center
}
.p-top-news-item__lead p {
text-align: center;
padding-bottom: 30px
}
.p-top-news-item a {
text-decoration: unset;
color: #2d2d34
}
.p-top-news__btn {
text-align: center;
margin-top: 50px
}
@media screen and (max-width:1600px) {
.p-top section {
margin-top: 150px
}
.p-top-banner__txt h2 {
font-size: 50px
}
.p-top-logo img {
width: 350px;
padding: 30px
}
.p-top-plan-txt h3 {
font-size: 35px
}
.p-top-plan-txt p {
font-size: 20px
}
.p-top-category-column__bottom p {
font-size: 18px
}
.p-top-category__lead {
font-size: 35px
}
.p-top-category__txt {
font-size: 18px
}
.p-top-company-item {
padding: 200px 0 50px 0
}
.p-top-company-item__left h2 {
font-size: 35px
}
.p-top-company-item__left p {
font-size: 20px
}
.p-top-company__txt p {
font-size: 20px
}
.p-top-contact-txt h2 {
font-size: 35px
}
.p-top-contact-txt p {
font-size: 20px
}
.p-top-news {
padding: 200px 50px
}
.p-top-news-item {
font-size: 18px
}
}
@media screen and (max-width:1300px) {
.p-top section {
margin-top: 100px
}
.p-top-banner__txt h2 {
font-size: 40px
}
.p-top-logo img {
width: 250px;
padding: 20px
}
.p-top-plan-txt h3 {
font-size: 30px
}
.p-top-plan-txt p {
font-size: 18px
}
.p-top-category-column__bottom p {
font-size: 18px
}
.p-top-category__lead {
font-size: 30px
}
.p-top-category__txt {
font-size: 18px
}
.p-top-company-item {
padding: 150px 0 30px 0
}
.p-top-company-item__left h2 {
font-size: 30px
}
.p-top-company-item__left p {
font-size: 18px
}
.p-top-company__txt p {
font-size: 18px
}
.p-top-contact-txt h2 {
font-size: 30px
}
.p-top-contact-txt p {
font-size: 18px
}
.p-top-news {
padding: 150px 50px
}
.p-top-news-item {
font-size: 18px
}
}
@media screen and (max-width:1040px) {
.p-top section {
margin-top: 100px
}
.p-top-banner__txt h2 {
font-size: 30px
}
.p-top-logo img {
width: 150px;
padding: 20px
}
.p-top-plan-txt h3 {
font-size: 25px
}
.p-top-plan-txt p {
font-size: 16px
}
.p-top-category-column__bottom p {
font-size: 16px
}
.p-top-category__lead {
font-size: 25px
}
.p-top-category__txt {
font-size: 16px
}
.p-top-company-item {
padding: 150px 0 30px 0
}
.p-top-company-item__left h2 {
font-size: 25px
}
.p-top-company-item__left p {
font-size: 16px
}
.p-top-company__txt p {
font-size: 16px
}
.p-top-contact-txt h2 {
font-size: 25px
}
.p-top-contact-txt p {
font-size: 16px
}
.p-top-news {
padding: 150px 0
}
.p-top-news-item {
font-size: 16px
}
}
@media only screen and (max-width:768px) {
.p-top section {
margin-top: 50px
}
.p-top-banner__img {
background-position-x: -100px
}
.p-top-banner__txt h2 {
font-size: 30px;
top: calc(60%);
color: #fff;
text-shadow: 2px 2px 5px rgba(0, 0, 0, .41)
}
.p-top-logo img {
width: 150px;
padding: 20px
}
.p-top-plan-txt {
width: 100%;
margin-top: 50px
}
.p-top-plan-txt h3 {
font-size: 25px
}
.p-top-plan-txt p {
font-size: 16px
}
.p-top-plan__img {
width: 100%
}
.p-top-plan__btn {
margin-top: 50px
}
.p-top-category {
padding: 50px 0
}
.p-top-category-column {
width: 100%;
margin-top: 50px
}
.p-top-category-column__bottom p {
font-size: 16px
}
.p-top-category__lead {
font-size: 25px
}
.p-top-category__txt {
font-size: 16px
}
.p-top-company-item {
padding: 50px 0 50px 0;
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse
}
.p-top-company-item__left {
margin-top: 50px;
width: 100%
}
.p-top-company-item__left h2 {
font-size: 25px
}
.p-top-company-item__left p {
font-size: 16px
}
.p-top-company-item__right {
width: 100%
}
.p-top-company__txt p {
font-size: 16px
}
.p-top-company__btn {
padding-bottom: 50px
}
.p-top-contact {
padding: 50px 0
}
.p-top-contact__btn .c-btn:first-child {
margin: 0 0 20px 0
}
.p-top-contact-txt h2 {
font-size: 25px
}
.p-top-contact-txt p {
font-size: 16px
}
.p-top-news {
padding: 50px 0
}
.p-top-news-item {
font-size: 16px
}
}
.p-about-intro {
margin-top: 150px
}
.p-about-intro-item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin-top: 150px
}
.p-about-intro-item__left {
width: 48%;
font-family: Hiragino Mincho Pro
}
.p-about-intro-item__left h4 {
font-size: 32px
}
.p-about-intro-item__left p {
font-size: 16px;
line-height: 1.875
}
.p-about-intro-item__right {
width: 48%
}
.p-about-company-ttl {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin: 100px 0
}
.p-about-company-ttl h3 {
font-size: 32px;
height: 1.53125;
border-bottom: 1px solid #bbc5df;
padding: 0 40px
}
.p-about-company-item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
font-size: 16px;
line-height: 1.5
}
.p-about-company-item-ttl {
width: calc(40% - 30px);
margin-right: 30px;
padding: 1.2em 0 1.2em .6em;
border-top: 1px solid #bbc5df
}
.p-about-company-item-txt {
width: 60%;
padding: 1.2em 0 1.2em .6em;
border-top: 1px solid #bbc5df
}
.p-about-company-item:last-child .p-about-company-item-ttl,
.p-about-company-item:last-child .p-about-company-item-txt {
border-bottom: 1px solid #bbc5df
}
.no-data-text {
font-size: 20px;
font-weight: 600;
text-align: center;
margin-top: 30px;
}
.p-about-img {
margin: 30px 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap
}
.p-about-img img {
width: 32%
}
.p-about-img img+img {
margin-left: 2%
}
.p-about-map {
margin-bottom: 50px
}
.p-about-map iframe {
width: 100%;
height: 400px
}
@media screen and (max-width:1040px) {
.p-about-intro {
margin-top: 50px
}
.p-about-intro-item {
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
margin-top: 50px
}
.p-about-intro-item__left {
width: 100%
}
.p-about-intro-item__right {
width: 100%
}
.u-sp-column-reverse {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column
}
}
@media only screen and (max-width:768px) {
.p-about-company-item {
font-size: 16px;
line-height: 1.5
}
.p-about-company-item-ttl {
width: 100%;
margin: 0;
padding: 1.2em 0 1.2em .6em
}
.p-about-company-item-txt {
width: 100%;
padding: 1.2em 0 1.2em .6em
}
}
.p-voice-lead {
font-size: 20px;
line-height: 2;
margin-bottom: 2em
}
.p-voice-item {
font-size: 16px;
line-height: 2;
border-top: 1px solid #bbc5df;
padding: 1em 0 1em 2em
}
.p-voice-item:last-child {
border-bottom: 1px solid #bbc5df
}
.p-voice-position {
color: #334f9e;
text-align: right
}
.p-blogIndex-group {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding-top: 30px;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc
}
.p-blogIndex-item {
border: 1px solid #bbc5df;
width: calc((100% - 40px)/ 3);
margin-bottom: 30px
}
.p-blogIndex-item:nth-child(3n+1) {
margin-right: 20px
}
.p-blogIndex-item:nth-child(3n+2) {
margin-right: 20px
}
.p-blogIndex-item-img {
display: -webkit-box;
display: -ms-flexbox;
display: flex
}
.p-blogIndex-item img {
width: 100%
}
.p-blogIndex-item-txtarea {
padding: 1em
}
.p-blogIndex-item-lead {
font-size: 13px;
line-height: 2.46154;
color: #334f9e
}
.p-blogIndex-item-txt {
font-size: 15px;
line-height: 1.6
}
@media only screen and (max-width:768px) {
.p-blogIndex-item {
width: 100%;
margin-right: 0
}
}
.p-blogDetail-group {
padding: 50px 0;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc
}
.p-blogDetail-img {
text-align: center;
margin-bottom: 40px;
}
.p-customBlog-img {
text-align: center;
margin-bottom: 20px;
}
.p-customBlog-txt {
padding: 0 100px;
margin-bottom: 30px;
}
.p-blogDetail-txt {
padding: 0 100px;
margin-bottom: 20px;
}
.p-blogDetail-btn {
margin-top: 30px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center
}
.p-blogDetail-btn a {
display: flex;
align-items: center;
justify-content: center;
outline: unset;
border: 1px solid #b0bad9;
background-color: #fff;
font-size: 16px;
line-height: 2;
padding: .5em 0;
width: 170px
}
.p-blogDetail-btn a+a {
margin-left: 20px
}
@media only screen and (max-width:768px) {
.p-blogDetail-group {
padding: 20px 0
}
.p-blogDetail img {
width: 100%;
margin-bottom: 20px;
}
.p-blogDetail-txt {
padding: 0;
margin-bottom: 20px;
}
.p-customBlog-txt {
padding: 0;
margin-bottom: 20px;
}
.p-blogDetail-btn {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center
}
.p-blogDetail-btn a {
width: 100%;
margin: 0 0 20px 0!important
}
}
.p-service-item {
margin-bottom: 50px
}
.p-service-ttl {
background-color: #fff;
border-top: 1px solid #bbc5df;
border-bottom: 1px solid #bbc5df
}
.p-service-ttl p {
font-size: 24px;
line-height: 1.5;
background-color: #e9ecf4;
margin: 2px 0;
padding: .5em 1.5em
}
.p-service-txt {
font-size: 16px;
line-height: 2;
padding: 1em 1.5em
}
.p-contact-form-wrap {
margin-bottom: 50px;
}
.p-contact .wpcf7 form .wpcf7-response-output {
margin: 1.5em 0 1.5em;
padding: 1em 1.2em 0.8em;
border: 2px solid #00a0d2;
border-radius: 5px;
font-size: 16px;
}
.p-contact .c-btn {
margin-bottom: 0.8em;
}
.c-menu-item__other a {
display: block;
}
.p-contact-item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
width: 100%
}
.p-contact-item__left {
width: 33%;
border-bottom: 1px solid #bbc5df;
padding-top: 20px
}
.p-contact-item__left p {
font-size: 16px;
position: relative
}
.p-contact-item__left p.req-none::after {
content: none
}
.p-contact-item__left p:after {
content: "必須";
background-color: #d7171a;
color: #fff;
font-size: 14px;
padding: 3px 10px;
position: absolute;
top: 0;
right: 0
}
.p-contact-item__right {
width: 62%;
border-bottom: 1px solid #bbc5df;
padding-bottom: 20px;
padding-top: 20px
}
.p-contact-item__right input[type=email],
.p-contact-item__right input[type=text] {
width: 100%;
height: 45px;
background-color: #fff;
border: 1px solid #bbc5df;
font-size: 15px;
padding-left: 10px
}
.p-contact-item__right input[type=email]:focus,
.p-contact-item__right input[type=text]:focus {
outline: unset
}
.p-contact-item__right textarea {
width: 100%;
background-color: #fff;
border: 1px solid #bbc5df;
font-size: 15px;
padding: 10px
}
.p-contact-item__right textarea:focus {
outline: unset
}
.p-contact-item:nth-of-type(1) .p-contact-item__left,
.p-contact-item:nth-of-type(1) .p-contact-item__right {
border-top: 1px solid #bbc5df
}
@media only screen and (max-width:768px) {
.p-contact-item {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: unset;
-ms-flex-pack: unset;
justify-content: unset;
width: 100%
}
.p-contact-item__left {
width: 100%;
border-bottom: unset;
padding-top: 10px
}
.p-contact-item__right {
width: 100%;
padding-bottom: 10px;
padding-top: 10px
}
.p-contact-item:nth-of-type(1) .p-contact-item__left {
border-top: 1px solid #bbc5df
}
.p-contact-item:nth-of-type(1) .p-contact-item__right {
border-top: unset
}
}
.u-inner {
margin: 0 150px
}
.u-wrapper {
width: 1000px;
margin: auto;
padding: 130px 0 100px
}
.u-txt-center {
text-align: center
}
.overlay {
position: relative;
height: 100%;
width: 100%;
display: none;
position: fixed;
z-index: 99999;
left: 0;
background-color: #eceff6;
overflow-x: hidden;
-webkit-transition: .5s;
transition: .5s
}
.overlay-content {
position: relative;
top: 10%;
width: 100%;
margin-top: 30px;
padding: 0 0 0 47px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between
}
.overlay-content__img {
width: 40%;
margin-left: 10%
}
.overlay-content__img img {
width: 100%
}
.overlay-content__link {
width: 35%
}
.overlay-content__btn {
margin-top: 30px
}
.overlay-content__btn p {
font-size: 16px;
color: #2d2d34
}
.overlay-content__btn button {
border: 1px solid #2d2d34;
background-color: unset;
width: 250px;
height: 45px;
font-size: 15px;
color: #2d2d34;
margin-top: 15px;
cursor: pointer;
}
.wp-pagenavi{
margin-left: auto;
margin-right: auto;
}
.wp-pagenavi a,
.wp-pagenavi span {
color: #000;
float: left;
padding: 8px 16px;
border: 1px solid #bbc5df;
text-decoration: none;
margin-right: 10px;
margin-bottom: 8px;
}
.wp-pagenavi span.pages {
display: none;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 25px;
color: #2d2d34;
display: block;
-webkit-transition: .3s;
transition: .3s
}
.overlay a:focus,
.overlay a:hover {
color: #2d2d34
}
.overlay-close {
position: absolute;
top: 60px;
right: 50px;
cursor: pointer
}
.overlay-close span {
cursor: pointer;
width: 60px;
height: 2px;
background-color: #2d2d34;
display: block;
-webkit-transition: .4s;
transition: .4s
}
.overlay-close span:nth-child(1) {
-webkit-transform: rotate(-45deg) translate(5px, 6px);
transform: rotate(-45deg) translate(5px, 6px)
}
.overlay-close span:nth-child(2) {
-webkit-transform: rotate(45deg) translate(1px, -10px);
transform: rotate(45deg) translate(1px, -10px);
margin-top: 5px
}
@media screen and (max-width:1300px) {
.u-inner {
margin: 0 100px
}
}
@media screen and (max-width:1000px) {
.u-inner {
margin: 0
}
}
@media screen and (max-width:800px) {
.overlay-content__img {
display: none
}
.overlay-content__link {
width: 100%
}
}
@media only screen and (max-width:768px) {
.u-inner {
width: 100%;
padding: 0 10px
}
.u-wrapper {
width: 100%;
padding: 50px 10px
}
.overlay-close {
top: 30px;
right: 20px
}
.overlay-close span {
width: 35px
}
}
.first_size{
width:1280px;
margin-left: auto;
margin-right: auto;
}