@charset "utf-8";



/* csr
------------------------------------------------------------*/

#csr-introduction {
background-image: url("../images/csr/csr_introduction_bg_sp.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
@media only screen and (min-width: 768px) { /* 768px以上で適用、タブレット～PC用CSS */
#csr-introduction {
background-image: url("../images/csr/csr_introduction_bg_pc.jpg");
}
}

@media only screen and (min-width: 768px) { /* 768px以上で適用、タブレット～PC用CSS */
#csr-introduction p {
text-align: center;
}
}

@media only screen and (min-width: 768px) { /* 768px以上で適用、タブレット～PC用CSS */
.csr-head {
display: flex;
justify-content: space-between;
}
}

.csr-head .img {
margin: 0 7px;
overflow: hidden;
}
@media only screen and (min-width: 768px) { /* 768px以上で適用、タブレット～PC用CSS */
.csr-head .img {
margin: auto 0;
width: 48%;
}
#csr-health .csr-head .img {
order: 2;
}
}

.csr-head .para {
margin: 2em 0 0 0;
}
@media only screen and (min-width: 768px) { /* 768px以上で適用、タブレット～PC用CSS */
.csr-head .para {
margin: auto 0;
width: 48%;
}
}

.csr-point {
background: #f8f1f3;
box-shadow: 0 0 8px rgba(176,176,176,0.3) inset;
margin: 2em 0.5em 0;
}
@media only screen and (min-width: 768px) { /* 768px以上で適用、タブレット～PC用CSS */
.csr-point {
margin: 3em 0 0 0;
}
}

.csr-point p {
padding: 1em 2em 1em 3em;
position: relative;
}
@media only screen and (min-width: 768px) { /* 768px以上で適用、タブレット～PC用CSS */
.csr-point p {
max-width: 650px; /* 要調整 */
padding: 1em 3em;
margin: 0 auto;
}
}

.csr-point p:before,
.csr-point p:after {
content: "";
display: block;
position: absolute;
width: 1em;
height: 1em;
}

.csr-point p:after {
top: 1em;
left: 1em;
background: #e9026c;
}

.csr-point p:before {
top: 1.4em;
left: 1.4em;
background: #fe85bb;
}

.csr-case {
margin: 2em 0.5em 0;
box-shadow: 0 0 8px rgba(176,176,176,0.3) inset;
background: #f9f8f7;
padding: 1em;
}
@media only screen and (min-width: 768px) { /* 768px以上で適用、タブレット～PC用CSS */
.csr-case {
margin: 2em 0 0;
text-align: center;
}
}

@media only screen and (min-width: 768px) { /* 768px以上で適用、タブレット～PC用CSS */
.csr-case-list {
display: inline-flex;
flex-direction: column;
text-align: left;
}
}

.csr-case-list li {
text-indent: -1em;
padding: 0.5em 0 0 1em;
}

.csr-case-list li.title {
text-indent: 0;
padding: 0;
}

.csr-case-list li + li.title {
padding: 2em 0 0 0;
}

.csr-case-list > li > p {
margin: 0;
}

.csr-column {
margin: 2em 0.5em 0;
}
@media only screen and (min-width: 768px) { /* 768px以上で適用、タブレット～PC用CSS */
.csr-column {
margin: 2em 0 0;
}
}
@media only screen and (min-width: 1025px) { /* 1025px以上で適用、PC用CSS */
.csr-column {
text-align: center;
}
}

.csr-column-inner {
background: #fff;
border: 0.5em solid #f8f1f3;
padding: 0.5em;
position: relative;
}
@media only screen and (min-width: 768px) { /* 768px以上で適用、タブレット～PC用CSS */
.csr-column-inner {
padding: 1em;
}
}
@media only screen and (min-width: 1025px) { /* 1025px以上で適用、PC用CSS */
.csr-column-inner {
display: inline-flex;
flex-direction: column;
}
}

.csr-column-inner span.label {
position: absolute;
top: 0.5em;
left: -1.3em;
color: #fff;
background: #e9026c;
padding: 0.5em 1em;
}

.csr-column-inner span.label:before {
position: absolute;
content: "";
top: 100%;
left: 0;
border: none;
border-bottom: solid 0.5em transparent;
border-right: solid 0.8em #7a0139;
}

.csr-column-inner p.title {
padding: 3em 0 0 0;
color: #e9026c;
}
@media only screen and (min-width: 768px) { /* 768px以上で適用、タブレット～PC用CSS */
.csr-column p.title {
padding: 0;
text-align: center;
}
}

/* End csr */


/* service
------------------------------------------------------------*/

@media only screen and (min-width: 768px) { /* 768px以上で適用、タブレット～PC用CSS */
.service-head {
display: flex;
justify-content: space-between;
}
}

.service-head .img {
margin: 0 7px;
overflow: hidden;
}
@media only screen and (min-width: 768px) { /* 768px以上で適用、タブレット～PC用CSS */
.service-head .img {
margin: auto 0;
width: 48%;
}
#service-labor .service-head .img,
#service-procedure .service-head .img {
order: 2;
}
}

.service-head .para {
margin: 2em 0 0 0;
}
@media only screen and (min-width: 768px) { /* 768px以上で適用、タブレット～PC用CSS */
.service-head .para {
margin: auto 0;
width: 48%;
}
}

.service-head h3 {
font-size: 1.125rem;
color: #e9026c;
margin: 0 8px 1em;
}
@media only screen and (min-width: 768px) { /* 768px以上で適用、タブレット～PC用CSS */
.service-head h3 {
font-size: 1.375rem;
margin: 0 0 1em;
}
}

@media only screen and (min-width: 768px) { /* 768px以上で適用、タブレット～PC用CSS */
.service-point {
display: flex;
justify-content: space-between;
}
}

.service-point li {
background: #f8f1f3;
box-shadow: 0 0 8px rgba(176,176,176,0.3) inset;
margin: 2em 0.5em 0;
padding: 1em 2em 1em 3em;
position: relative;
}

@media only screen and (min-width: 768px) { /* 768px以上で適用、タブレット～PC用CSS */
#service-labor .service-point li,
#service-procedure .service-point li {
width: 48%;
margin: 3em 0 0 0;
}
}

@media only screen and (min-width: 768px) { /* 768px以上で適用、タブレット～PC用CSS */
#service-regulation .service-point li {
width: 31%;
margin: 3em 0 0 0;
}
}

.service-point li:before,
.service-point li:after {
content: "";
display: block;
position: absolute;
width: 1em;
height: 1em;
}

.service-point li:after {
top: 1em;
left: 1em;
background: #e9026c;
}

.service-point li:before {
top: 1.4em;
left: 1.4em;
background: #fe85bb;
}

.service-case {
margin: 2em 0.5em 0;
box-shadow: 0 0 8px rgba(176,176,176,0.3) inset;
background: #f9f8f7;
padding: 1em;
}
@media only screen and (min-width: 768px) { /* 768px以上で適用、タブレット～PC用CSS */
.service-case {
margin: 2em 0 0;
text-align: center;
}
}

@media only screen and (min-width: 768px) { /* 768px以上で適用、タブレット～PC用CSS */
.service-case-list {
display: inline-flex;
flex-direction: column;
text-align: left;
}
}

.service-case-list li {
text-indent: -1em;
padding: 0.5em 0 0 1em;
}

.service-case-list li.title {
text-indent: 0;
padding: 0;
}

.service-case-list li + li.title {
padding: 2em 0 0 0;
}

.service-case-list > li > p {
margin: 0;
}

/* End service */


/* office
------------------------------------------------------------*/

.office-greeting-inner {
max-width: 800px;
margin: 0 auto;
text-align: center;
}

.office-greeting-inner p.catch {
position: relative;
padding: 0 0 0 2em;
}
@media only screen and (max-width: 767px) { /* 767px以下で適用、スマホ専用CSS */
.office-greeting-inner p.catch {
margin: 0 8px 0 -0.5em;
}
}

.office-greeting-inner p.catch:before,
.office-greeting-inner p.catch:after {
content: "";
display: block;
position: absolute;
width: 1em;
height: 1em;
}

.office-greeting-inner p.catch:after {
top: 0.2em;
left: 0;
background: #e9026c;
}

.office-greeting-inner p.catch:before {
top: 0.6em;
left: 0.4em;
background: #fe85bb;
}

.office-motto {
margin: 2em 8px;
background: #fff;
overflow: hidden;
border-radius: 10px;
display: inline-flex;
flex-direction: column;
box-shadow: 0 2px 12px 4px rgba(176,176,176,0.3);
}
@media only screen and (min-width: 768px) { /* 768px以上で適用、タブレット～PC用CSS */
.office-motto {
margin: 3em 8px;
}
}

.office-motto p.title {
margin: 0;
padding: 1em 0;
display: inline-block;
color: #fff;
font-size: 1rem;
text-align: center;
background: #e9026c;
background: -webkit-linear-gradient(left, #e9026c, #fd5898);
background: linear-gradient(to right, #e9026c, #fd5898);
border-radius: 10px 10px 0 0;
}
@media only screen and (min-width: 768px) { /* 768px以上で適用、タブレット～PC用CSS */
.office-motto p.title {
font-size: 1.125rem;
}
}

.office-motto-list {
text-align: left;
margin: 1em 1em 2em 1em;
display: inline-flex;
flex-direction: column;
}
@media only screen and (min-width: 768px) { /* 768px以上で適用、タブレット～PC用CSS */
.office-motto-list {
margin: 1em 2em 2em 2em;
}
}

.office-motto-list li {
padding: 1em 0.5em;
display: flex;
flex-direction: column;
border-bottom: solid 1px #e1e1e1;
}

.office-motto-list li span.cap {
position: relative;
color: #e9026c;
font-size: 1rem;
padding: 0 0 0 1em;
}
@media only screen and (min-width: 768px) { /* 768px以上で適用、タブレット～PC用CSS */
.office-motto-list li span.cap {
font-size: 1.125rem;
}
}

.office-motto-list li span.cap:before {
content: "";
display: block;
position: absolute;
width: 0.5em;
height: 0.5em;
top: 0.5em;
left: 0;
background: #e9026c;
}

.office-motto-list li span.para {
padding: 0.5em 0 0 1em;
}

.office-greeting-inner p.name {
text-align: right;
font-weight: 600;
margin-top: 1em;
font-size: 1rem;
}
@media only screen and (min-width: 768px) { /* 768px以上で適用、タブレット～PC用CSS */
.office-greeting-inner p.name {
font-size: 1.125rem;
}
}

.office-overview-list {
display: flex;
flex-wrap: wrap;
border: solid 1px #e1e1e1;
}
@media only screen and (min-width: 768px) { /* 768px以上で適用、タブレット～PC用CSS */
.office-overview-list {
max-width: 800px;
margin: 0 auto;
}
}

.office-overview-list dt {
background: #f8f1f3;
width: 6em;
padding: 1em;
border-bottom: solid 1px #e1e1e1;
}
@media only screen and (min-width: 768px) { /* 768px以上で適用、タブレット～PC用CSS */
.office-overview-list dt {
width: 28%;
padding: 1em 2em;
}
}

.office-overview-list dt:last-of-type {
border-bottom: none;
}

.office-overview-list dd {
background: #fff;
width: calc(100% - 6em);
padding: 1em;
border-bottom: solid 1px #e1e1e1;
}
@media only screen and (min-width: 768px) { /* 768px以上で適用、タブレット～PC用CSS */
.office-overview-list dd {
width: 72%;
padding: 1em 2em;
}
}

.office-overview-list dd:last-of-type {
border-bottom: none;
}

.office-map-wrap {
height: 0;
overflow: hidden;
padding-bottom: 375px;
position: relative;
}
@media only screen and (min-width: 768px) { /* 768px以上で適用、タブレット～PC用CSS */
.office-map-wrap {
padding-bottom: 500px;
}
}

.office-map-wrap iframe {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}

.office-map-info {
margin: 1em 0 0 0;
}
@media only screen and (min-width: 1025px) { /* 1025px以上で適用、PC用CSS */
.office-map-info {
display: flex;
justify-content: space-between;
margin: 1.5em 1.5em 0;
}
}

.office-map-info .para p.add {
text-align: left;
margin-bottom: 0.5em;
}

.office-map-info .link {
text-align: center;
margin: 1em 0 0 0;
}
@media only screen and (min-width: 768px) { /* 768px以上で適用、タブレット～PC用CSS */
.office-map-info .link {
margin: 2em 0 0 0;
}
}
@media only screen and (min-width: 1025px) { /* 1025px以上で適用、PC用CSS */
.office-map-info .link {
margin: auto 0;
}
}

/* End office */


/* policy
------------------------------------------------------------*/

#policy {
max-width: 800px;
margin: 0 auto;
}

#policy h2 {
color: #e9026c;
font-size: 1.125rem;
margin: 2em 0 1em 0;
padding: 0 8px 8px;
border-bottom: solid 1px #e9026c;
}
@media only screen and (min-width: 768px) { /* 768px以上で適用、タブレット～PC用CSS */
#policy h2 {
font-size: 1.375rem;
}
}

#policy h3 {
font-size: 1rem;
margin: 1.5em 0 0.5em 0;
}
@media only screen and (min-width: 768px) { /* 768px以上で適用、タブレット～PC用CSS */
#policy h3 {
font-size: 1.125rem;
margin: 1.5em 0.5em 0.5em;
}
}

#policy ul {
margin: 0 1em;
}
@media only screen and (min-width: 768px) { /* 768px以上で適用、タブレット～PC用CSS */
#policy ul {
margin: 0 1.5em;
}
}

#policy li {
position: relative;
padding: 0.5em 0 0 1em;
line-height: 1.8;
}

#policy li:before {
content: "";
display: block;
position: absolute;
width: 0.5em;
height: 0.5em;
top: 1.15em;
left: 0;
background: #222;
border-radius: 1em;
}

@media only screen and (min-width: 768px) { /* 768px以上で適用、タブレット～PC用CSS */
#policy p {
margin: 0 1em;
}
}

.policy-contact {
margin-top: 1.5em;
}
@media only screen and (min-width: 768px) { /* 768px以上で適用、タブレット～PC用CSS */
.policy-contact {
text-align: right;
margin-top: 2em;
}
}

@media only screen and (min-width: 768px) { /* 768px以上で適用、タブレット～PC用CSS */
.policy-contact p {
display: inline-block;
}
}

/* End policy */


/* not
------------------------------------------------------------*/

#not {
text-align: center;
}

#not h2 {
font-size: 1.125rem;
}
@media only screen and (max-width: 767px) { /* 767px以下で適用、スマホ専用CSS */
#not h2 {
text-align: left;
margin: 0 7px;
}
}

#not p {
margin-top: 2em;
}
@media only screen and (min-width: 768px) { /* 768px以上で適用、タブレット～PC用CSS */
#not p {
text-align: center;
}
}

/* End not */