@charset "UTF-8";
  .toggle {
display: none;
}
.Label { margin-top:50px;
padding: 1em;
display: block;
font-size:1.5em;
color: #fff;
background:#0086bd;
}
@media screen and (max-width: 500px){
.Label {
margin-top:30px;
padding: 0.4em 0.9em 0.4em 0.4em;
display: block;
font-size:1.15em;
color: #fff;
background:#0086bd;
line-height:1.4em;
}
}
.Label::before{ content:"";
width: 6px;
height: 6px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
-webkit-transform: rotate(45deg);
position: absolute;
top:calc( 50% - 3px );
right: 20px;
transform: rotate(135deg);
}
@media screen and (max-width: 500px){
.Label::before{ content:"";
width: 6px;
height: 6px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
-webkit-transform: rotate(45deg);
position: absolute;
top:calc( 50% - 3px );
right: 6px;
transform: rotate(135deg);
}
}
.Label,
.content {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transform: translateZ(0);
transition: all 0.3s;
}
.content { height: 0;
margin-bottom:10px;
padding:0 20px;
overflow: hidden;
}
.toggle:checked + .Label + .content { height: auto;
padding:20px ;
transition: all .3s;
}
.toggle:checked + .Label::before {
transform: rotate(-45deg) !important;
}
.b-page-title__midashi3 {
font-size: 30px;
color: #fff;
font-style:normal;
padding: 0 5px 20px 5px;
line-height:1.2;
}
@media screen and (max-width: 500px) {
.b-page-title__midashi3 {
font-size: 0.8rem;
color: #fff;
font-style:normal;
padding: 0 10px 10px 10px;
line-height:1.2;
}
}
@media screen and (max-width: 650px) {
.b-page-title__midashi3 {
font-size: 1.2rem;
color: #fff;
font-style:normal;
padding: 0 15px 10px 15px;
line-height:1.2;
}
}
@media screen and (max-width: 650px) {
.b-page-top-text1 {
text-align: left;
padding-bottom: 0.5rem !important;
}
}
.b-page-top-text1 {
text-align: left;
padding-bottom: 1rem;
}
body {
font-size: 16px;
font-family: kozuka-gothic-pr6n, sans-serif;
color: #333333;
}
@media screen and (max-width: 500px) {
body {
font-size: 14px;
}
}
.layout-support{
padding: 80px 0 150px 0;
}
@media screen and (max-width: 850px) {
.layout-support{
padding: 50px 0;
}
}
@media screen and (max-width: 500px) {
.layout-support{
padding: 30px 0 100px;
}
}
section {
padding: 150px 0;
}
@media screen and (max-width: 850px) {
section {
padding: 100px 0;
}
}
@media screen and (max-width: 500px) {
section {
padding: 75px 0 100px;
}
}
img {
height: auto;
}
li.colum {
list-style: disc;
margin-left: 1.4em;
}
li.column1 {
list-style: decimal;
margin-left: 1.4em;
}
ul,
li {
list-style-type: none;
}
a {
color: #333333;
text-decoration: none;
transition: all 0.3s;
}
a:hover {
filter: brightness(0.9);
}
.wrap1200 {
max-width: 1200px;
margin: 0 auto;
position: relative;
}
@media screen and (max-width: 1200px) {
.wrap1200 {
margin: 0 40px;
width: calc(100% - 80px);
}
}
@media screen and (max-width: 500px) {
.wrap1200 {
margin: 0 20px;
width: calc(100% - 40px);
}
}
.wrap1200.examples-wrap {
padding: 75px 80px 20px;
background-color: #fff;
margin-top: 55px;
}
@media screen and (max-width: 850px) {
.wrap1200.examples-wrap {
padding: 50px 40px 10px;
}
}
@media screen and (max-width: 500px) {
.wrap1200.examples-wrap {
padding: 30px 30px 10px;
}
}
.wrap1040 {
max-width: 1040px;
margin: 0 auto;
position: relative;
}
@media screen and (max-width: 1050px) {
.wrap1040 {
margin: 0 40px;
width: calc(100% - 80px);
}
}
@media screen and (max-width: 500px) {
.wrap1040 {
margin: 0 20px;
width: calc(100% - 40px);
}
}
@media screen and (max-width: 500px) {
.wrap1040 .wrap800 {
margin: 0;
width: 100%;
}
}
.wrap1040--banner {
margin-top: 80px;
}
@media screen and (max-width: 500px) {
.wrap1040--banner {
width: 100%;
margin: 0;
}
}
.wrap800 {
max-width: 800px;
margin: 0 auto;
position: relative;
}
@media screen and (max-width: 850px) {
.wrap800 {
margin: 0 40px;
width: calc(100% - 80px);
}
}
@media screen and (max-width: 500px) {
.wrap800 {
margin: 0 20px;
width: calc(100% - 40px);
}
} .layout-header {
position: fixed;
width: 100%;
z-index: 10;
background-color: #fff;
box-shadow: 5px 0 10px rgba(0, 0, 0, 0.3);
}
.layout-main {
padding-top: 160px;
}
@media screen and (max-width: 1200px) {
.layout-main {
padding-top: 80px;
}
}
.layout-web {
text-align: center;
width: 100%;
}
.layout-support {
background-image: url(//hiroshima.hai-sui.com/cont/wp-content/themes/haisui_hiroshima/img/top/support-bg.jpg);
background-size: cover;
background-position: center;
background-color: #40a2d3;
}
@media screen and (max-width: 500px) {
.layout-support {
background-size: 200%;
background-position: center bottom;
}
}
.layout-flow {
background-color: #edf4fa;
}
.layout-achievement {
background-color: #fff000;
}
.layout-corporation {
background-color: #fff000;
}
.layout-footer {
padding-top: 150px;
}
@media screen and (max-width: 500px) {
.layout-footer {
padding-top: 75px;
}
}
.layout-page-top-sec {
padding: 25px 0 90px;
}
.layout-page-top-sec--examples {
padding-bottom: 0;
}
.layout-page-top-sec--area {
background-color: #edf4fa;
}
.layout-page-top-sec--detail {
padding-bottom: 150px;
}
@media screen and (max-width: 850px) {
.layout-page-top-sec--detail {
padding-bottom: 100px;
}
}
@media screen and (max-width: 500px) {
.layout-page-top-sec--detail {
padding-bottom: 50px;
}
}
.layout-page-top-sec--flow {
background-color: #edf4fa;
}
.layout-page-top-sec--flow .wrap1040 {
margin-top: 90px;
}
@media screen and (max-width: 1050px) {
.layout-page-top-sec--flow .wrap1040 {
width: 100%;
margin: 50px 0 0;
}
}
.layout-page-top-sec--policy {
padding-bottom: 90px;
}
.layout-page-top-sec--works {
padding-bottom: 0;
}
@media screen and (max-width: 400px) {
.layout-page-top-sec--works {
padding-bottom: 25px;
}
}
.layout-page-top-sec--faq {
padding-bottom: 0;
}
.layout-tsumari {
padding-top: 0;
}
.layout-word {
background-color: #edf4fa;
}
.layout-word h3 {
display: flex;
flex-direction: column;
align-items: center;
}
.layout-examples {
background-color: #edf4fa;
}
.layout-examples-under {
padding-top: 50px;
padding-bottom: 0;
}
.layout-detail {
background-color: #edf4fa;
}
.layout-shitei {
padding: 80px 0;
background-color: #edf4fa;
}
@media screen and (max-width: 850px) {
.layout-shitei {
padding: 40px 0;
}
}
.layout-policy {
background-color: #edf4fa;
}
.layout-works {
padding-top: 60px;
background-image: url(//hiroshima.hai-sui.com/cont/wp-content/themes/haisui_hiroshima/img/works/works-bg.png);
background-size: contain;
background-repeat: repeat;
margin-top: 80px;
}
@media screen and (max-width: 500px) {
.layout-works {
padding-top: 40px;
margin-top: 40px;
}
}
.layout-works-page {
padding: 70px 0;
}
.layout-works-page--column {
padding: 0;
}
.layout-column {
padding: 0;
margin-top: 80px;
}
@media screen and (max-width: 500px) {
.layout-column {
margin-top: 40px;
}
}
.layout-column .b-works-number {
padding: 0;
}
.layout-column .b-column-list {
margin-bottom: 65px;
}
.layout-faq--company {
padding-top: 77px;
}
.layout-faq {
padding-top: 200px;
} .b-header-top {
justify-content: space-between;
align-items: center;
height: 80px;
}
.b-header-top__logo {
padding-left: 30px;
}
.b-header-top__logo img {
max-height: 50px;
}
.b-header-top__right {
margin-right: 80px;
align-items: center;
}
.b-header-top__right-tel {
margin-right: 20px;
}
@media screen and (max-width: 850px) {
.b-header-top__right-tel {
margin-right: 0;
max-width: 300px;
}
}
@media screen and (max-width: 650px) {
.b-header-top__right-tel {
display: none;
}
}
.b-header-top__right-menu {
font-size: 1.125rem;
font-weight: bold;
height: 80px;
padding: 0 2rem;
display: inherit;
line-height: 24px;
align-items: center;
}
@media screen and (max-width: 1050px) {
.b-header-top__right-menu {
display: none;
}
}
.b-header-top__right-menu--corporation {
color: #009fd9;
background-color: #fff000;
}
.b-header-top__right-menu--corporation:hover {
filter: brightness(0.8);
}
.b-header-top__right-menu--contact {
color: #fff000;
background-color: #0086bd;
}
.b-header-top__right-menu--contact:hover {
filter: brightness(0.8);
}
.b-header-nav {
background-color: #009fd9;
height: 80px;
}
@media screen and (max-width: 1200px) {
.b-header-nav {
display: none;
}
}
.b-header-nav-list {
justify-content: space-between;
}
.b-header-nav-list__item {
position: relative;
padding: 0 0.8em;
}
@media screen and (max-width: 1050px) {
.b-header-nav-list__item {
padding: 0;
}
}
.b-header-nav-list__item:hover {
background-color: #0086bd;
}
.b-header-nav-list__item--service {
padding-right: 25px;
}
.b-header-nav-list__item--service::after {
content: "";
display: block;
height: 8px;
width: 8px;
border-left: 2px solid #fff;
border-bottom: 2px solid #fff;
transform: rotate(-45deg);
position: absolute;
top: 45%;
right: 0.5em;
}
.b-header-nav-list__item--service:hover .b-hover-menu {
display: block;
position: absolute;
background-color: #fff;
width: 100%;
left: 0;
}
.b-header-nav-list__item--service:hover .b-hover-menu li {
border: 1px solid #009fd9;
border-bottom: none;
padding: 0.5rem;
}
.b-header-nav-list__item--service:hover .b-hover-menu li:last-child {
border-bottom: 1px solid #009fd9;
}
.b-header-nav-list__item--service:hover .b-hover-menu li a {
color: #009fd9;
line-height: 1.5rem;
font-size: 1rem;
display: block;
}
.b-header-nav-list__item--service:hover .b-hover-menu li a:hover {
color: #0086bd;
}
.b-header-nav-list__item--examples {
padding-right: 25px;
}
.b-header-nav-list__item--examples::after {
content: "";
display: block;
height: 8px;
width: 8px;
border-left: 2px solid #fff;
border-bottom: 2px solid #fff;
transform: rotate(-45deg);
position: absolute;
top: 45%;
right: 0.5em;
}
.b-header-nav-list__item--examples:hover .b-hover-menu {
display: block;
position: absolute;
background-color: #fff;
width: 100%;
left: 0px;
}
.b-header-nav-list__item--examples:hover .b-hover-menu li {
border: 1px solid #009fd9;
border-bottom: none;
padding: 0.5rem;
}
.b-header-nav-list__item--examples:hover .b-hover-menu li:last-child {
border-bottom: 1px solid #009fd9;
}
.b-header-nav-list__item--examples:hover .b-hover-menu li a {
color: #009fd9;
line-height: 1.5rem;
font-size: 1rem;
display: block;
}
.b-header-nav-list__item--examples:hover .b-hover-menu li a:hover {
color: #0086bd;
}
.b-header-nav-list__item a {
color: #fff;
font-weight: bold;
font-size: 1.125rem;
display: inline-block;
line-height: 80px;
}
.b-header-nav-list__item a:hover {
filter: brightness(1);
}
.b-header-nav-list__item.current a {
color: #fff000;
}
.b-hover-menu {
display: none;
} .openbtn {
position: fixed;
z-index: 9999; top: 0;
right: 0;
cursor: pointer;
width: 80px;
height: 80px;
}
.openbtn img {
display: none;
}
@media screen and (max-width: 500px) {
.openbtn {
width: 50px;
height: 50px;
}
} .openbtn span {
display: inline-block;
transition: all 0.4s;
position: absolute;
left: 28px;
height: 3px;
background-color: #009fd9;
width: 23px;
}
@media screen and (max-width: 500px) {
.openbtn span {
left: 13px;
}
}
.openbtn span:nth-of-type(1) {
top: 30px;
}
.openbtn span:nth-of-type(2) {
top: 40px;
}
.openbtn span:nth-of-type(3) {
top: 50px;
}
.openbtn.active img {
display: block;
width: 50px;
height: 50px;
top: 15px;
right: 15px;
position: absolute;
transition: all 0.6s;
}
.openbtn.active span {
display: none;
} .b-hamburger { position: fixed;
z-index: 999; top: 0;
right: -120%;
height: 100vh;
width: 615px;
background: #fff; transition: all 0.6s;
padding: 100px 44px 40px;
box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.1);
}
@media screen and (max-width: 850px) {
.b-hamburger {
padding: 80px 0;
max-width: 100%;
}
}
@media screen and (max-width: 500px) {
.b-hamburger {
height: 130vh;
padding: 50px 0 0;
}
}
.b-hamburger__scroll {
position: fixed;
z-index: 999;
height: 100vh; overflow: auto;
-webkit-overflow-scrolling: touch;
padding: 0 44px;
}
@media screen and (max-width: 650px) {
.b-hamburger__scroll {
padding: 0 20px;
}
}
.b-hamburger__logo {
width: 100%;
margin-bottom: 70px;
}
@media screen and (max-width: 850px) {
.b-hamburger__logo {
width: 70%;
position: relative;
margin: 0 15% 30px;
}
}
@media screen and (max-width: 500px) {
.b-hamburger__logo {
margin-bottom: 1rem;
}
}
.b-hamburger__tel {
width: 100%;
margin-bottom: 60px;
}
@media screen and (max-width: 850px) {
.b-hamburger__tel {
width: 70%;
margin: 0 15% 50px;
}
}
@media screen and (max-width: 500px) {
.b-hamburger__tel {
margin-bottom: 30px;
}
}
@media screen and (max-width: 400px) {
.b-hamburger__tel {
margin-bottom: 1rem;
}
}
.b-hamburger__nav {
flex-wrap: wrap;
gap: 1.5rem;
}
@media screen and (max-width: 850px) {
.b-hamburger__nav {
gap: 0.5rem;
}
}
@media screen and (max-width: 500px) {
.b-hamburger__nav {
flex-direction: column;
align-items: center;
gap: 0;
}
}
.b-hamburger__nav-item {
padding-left: 1rem;
font-weight: bold;
position: relative;
width: calc(50% - 1rem);
}
@media screen and (max-width: 500px) {
.b-hamburger__nav-item {
width: 300px;
}
}
.b-hamburger__nav-item::before {
content: "";
display: block;
height: 5px;
width: 5px;
border-left: 2px solid #009fd9;
border-bottom: 2px solid #009fd9;
transform: rotate(-135deg);
position: absolute;
left: 0;
top: 45%;
}
.b-hamburger__nav-item a {
color: #009fd9;
}
.b-hamburger__links {
display: flex;
margin: 70px 0 90px;
}
@media screen and (max-width: 500px) {
.b-hamburger__links {
flex-direction: column;
align-items: center;
margin: 30px 0;
}
}
@media screen and (max-width: 1200px) {
.b-hamburger__links .b-header-top__right-menu {
display: inline-block;
}
}
.b-hamburger__links a {
width: 50%;
padding: 20px 20px;
text-align: center;
}
@media screen and (max-width: 500px) {
.b-hamburger__links a {
width: 300px;
}
}
@media screen and (max-width: 400px) {
.b-hamburger__links a {
width: 260px;
}
}
.b-hamburger small {
color: #009fd9;
font-weight: bold;
font-size: 12px;
} .b-hamburger.panelactive {
right: 0;
}
.b-sec-title {
font-size: 3rem;
font-weight: bold;
color: #009fd9;
font-style: italic;
text-align: center;
margin-bottom: 70px;
}
@media screen and (max-width: 850px) {
.b-sec-title {
font-size: 2.5rem;
}
}
@media screen and (max-width: 650px) {
.b-sec-title {
font-size: 2rem;
margin-bottom: 1em;
}
}
@media screen and (max-width: 500px) {
.b-sec-title {
font-size: 1.5rem;
}
}
.b-sec-title.detail {
margin-bottom: 3rem;
}
@media screen and (max-width: 650px) {
.b-sec-title.detail {
margin-bottom: 1rem;
}
}
.b-sec-title.detail.mt {
margin-top: 140px;
}
@media screen and (max-width: 850px) {
.b-sec-title.detail.mt {
margin-top: 100px;
}
}
@media screen and (max-width: 500px) {
.b-sec-title.detail.mt {
margin-top: 50px;
}
}
.b-link {
position: absolute;
right: 0;
display: flex;
align-items: center;
color: #009fd9;
font-weight: bold;
font-size: 1.125rem;
gap: 1em;
}
.b-web-pc {
max-width: 100%;
}
@media screen and (max-width: 500px) {
.b-web-pc {
display: none;
}
}
.b-web-sp {
display: none;
}
@media screen and (max-width: 500px) {
.b-web-sp {
max-width: 100%;
display: block;
}
}
.b-contact {
background-color: #009fd9;
align-items: center;
padding: 50px 80px;
color: #fff;
justify-content: space-between;
letter-spacing: 0.1em;
margin-top: 150px;
}
@media screen and (max-width: 1050px) {
.b-contact {
flex-direction: column;
gap: 30px;
}
}
@media screen and (max-width: 500px) {
.b-contact {
padding: 40px;
margin-top: 75px;
}
}
@media screen and (max-width: 400px) {
.b-contact {
padding: 20px;
}
}
@media screen and (max-width: 1050px) {
.b-contact-left {
text-align: center;
}
}
.b-contact-left h3 {
font-size: 50px;
font-style: italic;
font-weight: bold;
white-space: nowrap;
}
@media screen and (max-width: 400px) {
.b-contact-left h3 {
font-size: 2rem;
}
}
.b-contact-left p {
font-weight: bold;
font-size: 1.125rem;
}
@media screen and (max-width: 400px) {
.b-contact-left p {
font-size: 1rem;
}
}
.b-contact-right {
padding-left: 135px;
border-left: 1px solid #fff;
}
@media screen and (max-width: 1050px) {
.b-contact-right {
padding-left: 0;
border-left: 0;
text-align: center;
}
}
.b-contact-right img {
margin-bottom: 1rem;
}
@media screen and (max-width: 1050px) {
.b-contact-right img {
margin-bottom: 0.5rem;
max-width: 100%;
}
}
.b-contact-right p {
font-weight: bold;
}
.b-footer-contents {
margin-top: -115px;
padding-top: 260px;
padding-top: 170px;
background-color: #edf4fa;
color: #009fd9;
}
.b-footer-contents .wrap1200 {
justify-content: space-between;
}
@media screen and (max-width: 1050px) {
.b-footer-contents .wrap1200 {
flex-direction: column;
align-items: flex-start;
}
}
.b-footer-contents__nav {
width: 795px;
position: relative;
}
@media screen and (max-width: 1050px) {
.b-footer-contents__nav {
width: 450px;
}
}
@media screen and (max-width: 500px) {
.b-footer-contents__nav {
width: 100%;
}
}
.b-footer-contents__info img {
margin-bottom: 1rem;
}
.b-footer-contents__info p {
font-weight: bold;
margin-bottom: 110px;
}
@media screen and (max-width: 1050px) {
.b-footer-contents__info p {
margin-bottom: 30px;
}
}
.b-footer-contents__info p a {
color: #009fd9;
}
.b-footer-contents small {
margin-bottom: 2em;
font-size: 12px;
display: block;
}
@media screen and (max-width: 1050px) {
.b-footer-contents small {
display: none;
}
}
.b-footer-contents .small-sp {
display: none;
}
@media screen and (max-width: 1050px) {
.b-footer-contents .small-sp {
display: inline;
margin-left: 40px;
text-align: center;
}
}
@media screen and (max-width: 500px) {
.b-footer-contents .small-sp {
margin-left: 20px;
}
}
.b-footer-nav {
height: 150px;
flex-wrap: wrap;
flex-direction: column;
justify-content: flex-start;
display: flex;
}
@media screen and (max-width: 1050px) {
.b-footer-nav {
height: 225px;
}
}
@media screen and (max-width: 650px) {
.b-footer-nav {
display: none;
}
}
.b-footer-nav__item {
display: inline-block;
font-weight: bold;
width: auto;
}
@media screen and (max-width: 1050px) {
.b-footer-nav__item {
position: relative;
left: 1rem;
}
}
.b-footer-nav__item::before {
content: "";
display: block;
height: 5px;
width: 5px;
border-bottom: 2px solid #009fd9;
border-right: 2px solid #009fd9;
transform: rotate(-45deg);
position: relative;
top: 50%;
left: -1rem;
}
@media screen and (max-width: 1050px) {
.b-footer-nav__item:nth-child(7) {
margin-right: 0;
}
.b-footer-nav__item:nth-child(8) {
margin-right: 0;
}
}
.b-footer-nav__item:nth-child(9) {
margin-right: 0;
}
.b-footer-nav__item:nth-child(10) {
margin-right: 0;
}
.b-footer-nav__item:nth-child(11) {
margin-right: 0;
}
.b-footer-nav__item:nth-child(12) {
margin-right: 0;
}
.b-footer-nav__item a {
color: #009fd9;
display: inline-block;
}
.b-footer-links {
margin-top: 100px;
position: relative;
display: flex;
justify-content: flex-end;
}
@media screen and (max-width: 1050px) {
.b-footer-links {
justify-content: flex-start;
margin-top: 50px;
}
}
@media screen and (max-width: 650px) {
.b-footer-links {
margin-top: 20px;
}
}
@media screen and (max-width: 500px) {
.b-footer-links {
flex-direction: column;
margin-bottom: 30px;
}
}
.b-footer-links a {
padding: 2rem 60px;
font-weight: bold;
font-size: 1.125rem;
display: inline-block;
}
@media screen and (max-width: 1050px) {
.b-footer-links a {
padding: 2rem 30px;
}
}
@media screen and (max-width: 500px) {
.b-footer-links a {
text-align: center;
padding: 1rem 0;
}
}
.b-footer-links__corporate {
background-color: #fff000;
color: #009fd9;
padding-left: 10px;
}
.b-footer-links__contact {
background-color: #0086bd;
color: #fff000; } .b-fixed-bottom {
position: fixed;
right: 20px;
bottom: 20px;
z-index: 2; opacity: 0;
transform: translateY(100%);
display: flex;
flex-direction: column;
align-items: flex-end;
}
@media screen and (max-width: 650px) {
.b-fixed-bottom {
right: 0;
bottom: 0;
flex-direction: column-reverse;
}
}
.b-fixed-bottom a {
display: block;
}
.b-fixed-bottom img {
vertical-align: bottom;
}
#page-top img {
filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.5));
margin-top: 20px;
}
@media screen and (max-width: 650px) {
#page-top img {
max-width: 50px;
margin-right: 20px;
}
} .b-fixed-bottom.UpMove {
-webkit-animation: UpAnime 0.5s forwards;
animation: UpAnime 0.5s forwards;
}
@-webkit-keyframes UpAnime {
from {
opacity: 0;
transform: translateY(100%);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes UpAnime {
from {
opacity: 0;
transform: translateY(100px);
}
to {
opacity: 1;
transform: translateY(0);
}
} .b-fixed-bottom.DownMove {
-webkit-animation: DownAnime 0.5s forwards;
animation: DownAnime 0.5s forwards;
}
@-webkit-keyframes DownAnime {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 1;
transform: translateY(100%);
}
}
@keyframes DownAnime {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 1;
transform: translateY(100px);
}
}
.b-page-title__midashi {
font-size: 11px;
color: #fff;
font-style:normal;
padding:10px 10px 0 10px;
line-height: 1.1;
}
.b-page-title__midashi2 {
font-size: 11px;
color: #000;
font-style:normal;
padding:10px 10px 0 10px;
line-height: 1.1;
}
.b-page-title {
background-color: #0086bd;
height: 300px;
font-style: italic;
}
@media screen and (max-width: 650px) {
.b-page-title {
height: 200px;
}
}
.b-page-title .wrap1200 {
display: flex;
align-items: center;
justify-content: flex-start;
height: 300px;
}
@media screen and (max-width: 650px) {
.b-page-title .wrap1200 {
height: 200px;
}
}
.b-page-title__text {
display: inline-block;
margin-bottom: 65px;
color: #fff000;
font-size: 50px;
line-height: 1;
}
@media screen and (max-width: 850px) {
.b-page-title__text {
font-size: 2.5rem;
}
}
@media screen and (max-width: 650px) {
.b-page-title__text {
font-size: 2rem;
}
}
@media screen and (max-width: 500px) {
.b-page-title__text {
font-size: 1.5rem;
}
}
.b-page-title__text span {
font-size: 1rem;
}
.b-bread-nav {
display: flex;
margin-bottom: 110px;
}
@media screen and (max-width: 650px) {
.b-bread-nav {
margin-bottom: 60px;
}
}
@media screen and (max-width: 400px) {
.b-bread-nav {
margin-bottom: 0;
}
}
@media screen and (max-width: 650px) {
.b-bread-nav--service {
flex-direction: column;
align-items: flex-start;
}
}
@media screen and (max-width: 400px) {
.b-bread-nav--examples {
margin-bottom: 30px;
}
}
@media screen and (max-width: 400px) {
.b-bread-nav--faq {
margin-bottom: 30px;
}
}
.b-bread-nav--contact {
margin-bottom: 80px;
}
.b-bread-nav a,
.b-bread-nav span {
font-size: 12px;
display: inline;
white-space: nowrap;
}
@media screen and (max-width: 650px) {
.b-bread-nav span {
white-space: normal;
}
}
.b-bread-nav a {
border-bottom: 1px solid #333333;
}
.b-bread-nav a:nth-child(2) {
border-bottom: none;
}
.b-bread-nav a:nth-child(2)::after {
content: "";
width: calc(100% - 36px);
height: 1px;
background-color: #333333;
display: block;
position: relative;
left: 36px;
}
.b-bread-nav span::before,
.b-bread-nav a:nth-child(2)::before {
content: ">";
display: inline-block;
font-size: 12px;
padding: 0 1em;
}
.b-page-area-text {
text-align: left;
}
.b-page-area--offices {
margin-top: 1em;
}
@media screen and (max-width: 650px) {
.b-page-area-text {
text-align: left;
}
}
@media screen and (max-width: 500px) {
.b-page-area-text {
}
}
.b-page-area-text.detail {
margin-bottom: 1rem;
}
.b-page-area-text.detail1 {
margin-bottom: 2rem;
}
.b-page-area-text.detail {
line-height: 1.5rem;
}
.b-page-area-text br.pc-none {
display: none;
}
@media screen and (max-width: 1200px) {
.b-page-area-text br.pc-none {
display: inline;
}
}
@media screen and (max-width: 650px) {
 .b-page-area-text br.pc-none {
display: none;
}
}
.b-page-top-text {
text-align: center;
}
.b-page-top-text--offices {
margin-top: 1em;
}
@media screen and (max-width: 650px) {
.b-page-top-text.detail1 {
padding-top: 0px;
}
}
@media screen and (max-width: 650px) {
.b-page-top-text {
text-align: left;
}
}
@media screen and (max-width: 500px) {
.b-page-top-text {
padding-top: 55px;
}
}
.b-page-top-text.detail {
padding-top: 1.5rem;
}
.b-page-top-text br.pc-none {
display: none;
}
@media screen and (max-width: 1200px) {
.b-page-top-text br.pc-none {
display: inline;
}
}
@media screen and (max-width: 650px) {
.b-page-top-text br.pc-none {
display: none;
}
}
.b-big-banner {
margin-top: 100px;
display: block;
}
@media screen and (max-width: 650px) {
.b-big-banner {
margin-top: 50px;
}
}
.b-big-banner img {
width: 100%;
max-width: 100%;
display: block;
}
@media screen and (max-width: 650px) {
.b-big-banner img {
display: none;
}
}
.b-big-banner img:nth-child(2) {
display: none;
}
@media screen and (max-width: 650px) {
.b-big-banner img:nth-child(2) {
display: block;
}
}
.sp-tel {
pointer-events: none;
}
@media screen and (max-width: 650px) {
.sp-tel {
pointer-events: auto;
}
} .b-mv {
width: 100%;
}
@media screen and (max-width: 650px) {
.b-mv {
display: none;
}
}
.b-mv--sp {
display: none;
}
@media screen and (max-width: 650px) {
.b-mv--sp {
display: block;
width: 100%;
}
}
.b-support {
text-align: center;
color: #fff;
}
.b-support h2 {
font-size: 3rem;
font-weight: bold;
font-style: italic;
line-height: 1.2;
margin-bottom: 1em;
}
@media screen and (max-width: 650px) {
.b-support h2 {
font-size: 2rem;
margin-bottom: 1em;
}
}
@media screen and (max-width: 500px) {
.b-support h2 {
font-size: 1.5rem;
margin-bottom: 0.5em;
}
}
.b-support p {
font-size: 1.5rem;
font-weight: bold;
}
@media screen and (max-width: 500px) {
.b-support p {
font-size: 1rem;
}
}
.b-support__list {
align-items: center;
justify-content: center;
gap: 1rem;
margin: 30px 0;
flex-wrap: wrap;
}
@media screen and (max-width: 650px) {
.b-support__list {
margin: 1rem 0;
}
}
@media screen and (max-width: 500px) {
.b-support__list {
gap: 0.5rem;
margin: 0.5rem 0;
}
}
.b-support__list li {
background-color: #fff;
color: #009fd9;
padding: 0.5em 1em;
font-size: 1.5rem;
font-weight: bold;
}
@media screen and (max-width: 650px) {
.b-support__list li {
font-size: 1.2rem;
padding: 0.5rem;
}
}
@media screen and (max-width: 500px) {
.b-support__list li {
font-size: 1rem;
}
}
.b-menu__list {
flex-wrap: wrap;
gap: 5%;
}
.b-menu__list-item {
width: 30%;
}
@media screen and (max-width: 850px) {
.b-menu__list-item {
width: 47%;
}
}
@media screen and (max-width: 400px) {
.b-menu__list-item {
width: 100%;
}
}
.b-menu__list-item a {
display: block;
}
.b-menu {
margin-bottom: 50px;
}
.b-menu img {
width: 100%;
-o-object-fit: contain;
object-fit: contain;
}
@media screen and (max-width: 400px) {
.b-menu img {
width: 80%;
margin: 0 10%;
}
}
.b-menu__title {
color: #009fd9;
font-size: 1.75rem;
line-height: 1.2;
margin-bottom: 0.5em;
}
@media screen and (max-width: 650px) {
.b-menu__title {
font-size: 1.25rem;
}
}
@media screen and (max-width: 400px) {
.b-menu__title {
margin-left: 10%;
}
}
.b-menu__title span {
font-size: 2rem;
}
@media screen and (max-width: 650px) {
.b-menu__title span {
font-size: 1.5rem;
}
}
.b-menu p {
font-size: 0.875rem;
margin-bottom: 2em;
}
@media screen and (max-width: 650px) {
.b-menu p {
margin-bottom: 1em;
}
}
@media screen and (max-width: 400px) {
.b-menu p {
margin-left: 10%;
}
}
@media screen and (max-width: 400px) {
.b-menu--service {
margin-bottom: 30px;
}
}
@media screen and (max-width: 400px) {
.b-menu--service img {
width: 100%;
margin: 0;
}
}
.b-example-list--small li {
gap: 80px;
}
@media screen and (max-width: 1200px) {
.b-example-list--small li {
gap: 30px;
}
.b-example-list--small li img {
max-width: 50%;
}
.b-example-list--small li h3 {
font-size: 2rem;
}
}
@media screen and (max-width: 850px) {
.b-example-list--small li:nth-child(even) {
flex-direction: column;
}
}
@media screen and (max-width: 850px) {
.b-example-list--small li {
flex-direction: column;
}
.b-example-list--small li img {
max-width: 80%;
}
.b-example-list--small li a img {
max-width: 100%;
}
}
@media screen and (max-width: 500px) {
.b-example-list--small li img {
max-width: 100%;
}
.b-example-list--small li h3 {
font-size: 1.5rem;
}
}
.b-example-list__item {
margin-bottom: 70px;
justify-content: space-between;
gap: 80px;
align-items: center;
}
.b-example-list__item--service {
justify-content: flex-start;
gap: 100px;
margin-top: 140px;
margin-bottom: 0;
}
@media screen and (max-width: 650px) {
.b-example-list__item--service {
flex-direction: column;
gap: 1rem;
margin-top: 100px;
}
}
@media screen and (max-width: 400px) {
.b-example-list__item--service {
margin-top: 50px;
}
}
@media screen and (max-width: 650px) {
.b-example-list__item--service img.service {
max-width: 80%;
}
}
@media screen and (max-width: 1050px) {
.b-example-list__item {
gap: 50px;
}
}
@media screen and (max-width: 650px) {
.b-example-list__item {
gap: 30px;
}
}
@media screen and (max-width: 500px) {
.b-example-list__item {
flex-direction: column;
gap: 1rem;
}
}
.b-example-list__item:nth-child(even) {
flex-direction: row-reverse;
}
@media screen and (max-width: 500px) {
.b-example-list__item:nth-child(even) {
flex-direction: column;
}
}
.b-example-list__item img {
max-width: 60%;
}
@media screen and (max-width: 1050px) {
.b-example-list__item img {
max-width: 40%;
}
}
@media screen and (max-width: 500px) {
.b-example-list__item img {
max-width: 80%;
}
}
@media screen and (max-width: 400px) {
.b-example-list__item img {
max-width: 100%;
}
}
.b-example-list__item-text h3 {
color: #009fd9;
font-size: 2.25rem;
margin-bottom: 0.5em;
}
@media screen and (max-width: 650px) {
.b-example-list__item-text h3 {
font-size: 1.75rem;
}
}
@media screen and (max-width: 500px) {
.b-example-list__item-text h3 {
margin-bottom: 0;
font-size: 1.5rem;
}
}
@media screen and (max-width: 650px) {
.b-example-list__item-text ul {
margin-bottom: 1em;
}
}
.b-example-list__item-text li {
margin-bottom: 1.5em;
}
@media screen and (max-width: 850px) {
.b-example-list__item-text li {
margin-bottom: 0.5em;
}
}
.b-example-list__item-text a {
width: 100%;
max-width: 267px;
}
.b-example-list__item-text a img {
max-width: 100%;
}
.b-flow-list__item {
margin-bottom: 60px;
}
.b-flow__title {
background-color: #009fd9;
position: relative;
align-items: center;
}
@media screen and (max-width: 1050px) {
.b-flow__title {
margin-left: 50px;
}
}
@media screen and (max-width: 500px) {
.b-flow__title {
margin-left: 25px;
}
}
@media screen and (max-width: 400px) {
.b-flow__title {
margin-left: 1rem;
}
}
.b-flow__title img.icon {
position: absolute;
top: -16px;
left: -50px;
}
@media screen and (max-width: 500px) {
.b-flow__title img.icon {
max-width: 75px;
top: -5px;
left: -38px;
}
}
@media screen and (max-width: 400px) {
.b-flow__title img.icon {
max-width: 50px;
top: 0;
left: -25px;
}
}
.b-flow__title img.num {
margin-left: 90px;
margin-right: 50px;
}
@media screen and (max-width: 500px) {
.b-flow__title img.num {
margin-left: 50px;
margin-right: 30px;
}
}
@media screen and (max-width: 400px) {
.b-flow__title img.num {
max-width: 50px;
margin-left: 30px;
margin-right: 1rem;
}
}
.b-flow__title h3 {
color: #fff000;
font-size: 2rem;
font-weight: bold;
}
@media screen and (max-width: 400px) {
.b-flow__title h3 {
line-height: 50px;
font-size: 1.5rem;
}
}
.b-flow__text {
align-items: center;
margin-top: 1.125rem;
}
@media screen and (max-width: 1050px) {
.b-flow__text {
margin-left: 30px;
}
}
@media screen and (max-width: 400px) {
.b-flow__text {
margin-left: 20px;
}
}
.b-flow__text img {
position: relative;
left: -15px;
}
.b-flow__text p {
font-size: 0.875rem;
margin-left: 75px;
}
@media screen and (max-width: 500px) {
.b-flow__text p {
margin-left: 30px;
}
}
@media screen and (max-width: 400px) {
.b-flow__text p {
margin-left: 0;
}
}
.b-flow__text p span.bold {
font-size: 1.125rem;
}
.b-area-list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 55px;
position: relative;
}
.b-area-list li {
background-color: #009fd9;
font-weight: bold;
font-size: 1.125rem;
width: calc(50% - 20px);
margin-bottom: 25px;
transition: all 0.3s;
}
@media screen and (max-width: 650px) {
.b-area-list li {
margin-bottom: 1rem;
width: calc(50% - 10px);
}
}
@media screen and (max-width: 500px) {
.b-area-list li {
margin-bottom: 0.5em;
width: calc(50% - 5px);
font-size: 1rem;
}
}
.b-area-list li:first-child {
width: 100%;
}
.b-area-list li:hover {
background-color: #0086bd;
}
.b-area-list li a {
color: #fff;
display: block;
padding: 1rem 1.5rem;
}
@media screen and (max-width: 650px) {
.b-area-list li a {
padding: 0.5rem 1rem;
}
}
@media screen and (max-width: 500px) {
.b-area-list li a {
padding: 0.25em 1rem;
}
}
.b-area-list li a:hover {
filter: brightness(1);
}
.b-area-list__mascot {
position: relative;
left: -90px;
top: -25px;
}
@media screen and (max-width: 1200px) {
.b-area-list__mascot {
left: 0;
}
}
.b-office-list {
gap: 25px;
flex-wrap: wrap;
margin-bottom: 80px;
}
@media screen and (max-width: 400px) {
.b-office-list {
gap: 10px;
}
}
.b-office-list li {
width: calc(20% - 20px);
color: #009fd9;
padding: 1rem 0.5em;
font-weight: bold;
border: 2px solid #009fd9;
text-align: center;
}
@media screen and (max-width: 650px) {
.b-office-list li {
width: calc(33% - 20px);
}
}
@media screen and (max-width: 400px) {
.b-office-list li {
width: calc(50% - 5px);
}
}
.b-achievement-list {
flex-wrap: wrap;
gap: 1%;
}
@media screen and (max-width: 850px) {
.b-achievement-list {
gap: 2%;
}
}
.b-achievement-list__item {
width: 32%;
padding: 16px 20px 16px;
background-color: #fff;
margin-bottom: 1.5rem;
}
@media screen and (max-width: 850px) {
.b-achievement-list__item {
width: 48%;
}
}
@media screen and (max-width: 500px) {
.b-achievement-list__item {
width: 100%;
padding-bottom: 30px;
}
}
.b-achievement-list__item img {
width: 100%;
max-width: 100%;
max-height: 250px;
-o-object-fit: cover;
object-fit: cover;
}
@media screen and (max-width: 500px) {
.b-achievement-list__item img {
width: 70%;
margin: 0 15%;
}
}
@media screen and (max-width: 400px) {
.b-achievement-list__item img {
width: 100%;
margin: 0;
}
}
.b-achievement-list__item h3 {
font-weight: bold;
font-size: 1.125rem;
margin-top: 0.5em;
margin-bottom: 0.5em;
}
.b-achievement__info {
margin-bottom: 1em;
}
.b-achievement__cate {
background-color: #009fd9;
color: #fff;
font-size: 0.875rem;
padding: 0.25em 1em;
margin-right: 1em;
border-radius: 1em;
}
.b-achievement__date {
color: #009fd9;
font-family: oswald, sans-serif;
}
.b-column-list {
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 100px;
}
@media screen and (max-width: 850px) {
.b-column-list {
margin-bottom: 50px;
}
}
@media screen and (max-width: 500px) {
.b-column-list {
margin-bottom: 30px;
}
}
.b-column-list__item {
width: calc(50% - 12px);
border: 1px solid #dddddd;
box-shadow: 12px 12px #fff000;
margin-bottom: 25px;
}
@media screen and (max-width: 1050px) {
.b-column-list__item {
width: 100%;
}
}
.b-column a {
display: flex;
align-items: center;
gap: 50px;
padding: 40px 50px;
transition: all 0.3s;
width: 100%;
}
.b-column a:hover {
background-color: #e8e8e8;
filter: brightness(1);
}
@media screen and (max-width: 650px) {
.b-column a {
padding: 30px;
flex-direction: column;
gap: 30px;
align-items: flex-start;
}
}
.b-column .b-achievement__info {
margin-bottom: 0.5em;
}
.b-column h3 {
font-size: 1.125rem;
font-weight: bold;
margin-bottom: 0;
}
.b-column img {
max-width: 185px;
max-height: 185px;
}
@media screen and (max-width: 650px) {
.b-column img {
width: 70%;
margin: 0 15%;
max-width: 70%;
max-height: 70%;
}
}
@media screen and (max-width: 400px) {
.b-column img {
width: 100%;
margin: 0;
max-width: 100%;
max-height: 100%;
}
} .accordion-area {
width: 100%;
margin-bottom: 80px;
}
.accordion-area section {
padding: 0;
}
.accordion-area--faq {
margin-top: 80px;
}
@media screen and (max-width: 500px) {
.accordion-area--faq {
margin-top: 40px;
}
}
.accordion-area li {
margin-bottom: 25px;
}
.accordion-area section {
border: 1px solid #ddd;
} .title {
position: relative; cursor: pointer;
font-size: 1rem;
font-weight: normal;
padding: 10px 25px;
padding-right: 35px;
transition: all 0.5s ease;
background-color: #009fd9;
color: #fff;
align-items: center;
gap: 1.5rem;
line-height: 1.5;
}
@media screen and (max-width: 400px) {
.title {
padding-left: 15px;
gap: 1rem;
}
}
.title span {
font-size: 1.75rem;
font-weight: bold;
}
.title:hover {
background-color: #0086bd;
} .title::before,
.title::after {
position: absolute;
content: "";
width: 15px;
height: 2px;
background-color: #fff;
}
.title::before {
top: 48%;
right: 15px;
transform: rotate(0deg);
}
.title::after {
top: 48%;
right: 15px;
transform: rotate(90deg);
} .title.close::after {
display: none;
} .box {
display: none; padding: 20px 80px 20px 25px;
position: relative;
}
@media screen and (max-width: 650px) {
.box {
padding-right: 25px;
}
}
@media screen and (max-width: 400px) {
.box {
padding-left: 15px;
}
}
.box span {
font-size: 1.75rem;
font-weight: bold;
color: #ff007f;
position: absolute;
top: 0;
left: 28px;
padding-top: 10px;
}
@media screen and (max-width: 400px) {
.box span {
left: 15px;
}
}
.box p {
padding-left: 55px;
}
@media screen and (max-width: 400px) {
.box p {
padding-left: 46px;
}
}
.b-corporation {
background-color: #fff;
gap: 50px;
padding: 50px;
align-items: center;
justify-content: space-between;
}
@media screen and (max-width: 650px) {
.b-corporation {
flex-direction: column;
}
}
@media screen and (max-width: 500px) {
.b-corporation {
padding: 20px;
gap: 20px;
}
}
.b-corporation__text {
flex-direction: column;
justify-content: space-between;
width: calc(40% - 25px);
}
@media screen and (max-width: 1050px) {
.b-corporation__text {
width: calc(60% - 25px);
}
}
@media screen and (max-width: 650px) {
.b-corporation__text {
width: 100%;
}
}
.b-corporation__text h3 {
font-size: 2.25rem;
color: #009fd9;
}
@media screen and (max-width: 500px) {
.b-corporation__text h3 {
font-size: 1.5rem;
}
}
.b-corporation__text p {
margin-bottom: 50px;
}
@media screen and (max-width: 500px) {
.b-corporation__text p {
margin-bottom: 30px;
}
}
.b-corporation__text a img {
width: 100%;
}
.b-corporation img {
width: calc(60% - 25px);
}
@media screen and (max-width: 1050px) {
.b-corporation img {
width: calc(40% - 25px);
}
}
@media screen and (max-width: 650px) {
.b-corporation img {
width: 100%;
}
} .b-tsumari__title {
background-color: #009fd9;
color: #fff000;
font-style: italic;
font-weight: bold;
text-align: center;
font-size: 50px;
}
@media screen and (max-width: 850px) {
.b-tsumari__title {
font-size: 2.5rem;
}
}
@media screen and (max-width: 500px) {
.b-tsumari__title {
font-size: 1.75rem;
}
}
.b-tsumari__big {
background-color: #f4fdff;
margin-bottom: 150px;
padding: 50px 0;
}
@media screen and (max-width: 650px) {
.b-tsumari__big {
margin-bottom: 100px;
}
}
@media screen and (max-width: 400px) {
.b-tsumari__big {
margin-bottom: 50px;
}
}
.b-tsumari__big-image {
width: 100%;
}
.b-tsumari-list__item {
margin-bottom: 150px;
}
@media screen and (max-width: 650px) {
.b-tsumari-list__item {
margin-bottom: 100px;
}
}
@media screen and (max-width: 500px) {
.b-tsumari-list__item {
margin-bottom: 50px;
}
}
@media screen and (max-width: 400px) {
.b-tsumari-list__item {
margin-bottom: 30px;
}
}
.b-tsumari-list__item h4 {
display: flex;
align-items: center;
font-size: 2.25rem;
font-weight: bold;
margin-bottom: 0.5em;
color: #009fd9;
}
@media screen and (max-width: 850px) {
.b-tsumari-list__item h4 {
font-size: 1.75rem;
}
}
@media screen and (max-width: 500px) {
.b-tsumari-list__item h4 {
font-size: 1.25rem;
}
}
.b-tsumari-list__item h4 img {
max-width: 50px;
margin-right: 20px;
}
.b-tsumari-list__item table {
width: 100%;
}
.b-tsumari-list__item table th {
background-color: #009fd9;
color: #fff;
border-bottom: 1px solid #fff;
border-left: 1px solid #fff;
text-align: center;
width: 282px;
padding: 1em 0;
font-weight: bold;
}
@media screen and (max-width: 850px) {
.b-tsumari-list__item table th {
width: 100px;
}
}
@media screen and (max-width: 400px) {
.b-tsumari-list__item table th {
padding: 1rem 0.5rem;
width: 80px;
}
}
.b-tsumari-list__item table td {
background-color: #e3f8ff;
border-bottom: 1px solid #fff;
width: calc(100% - 282px);
padding: 1rem 2rem 1rem 3rem;
}
@media screen and (max-width: 850px) {
.b-tsumari-list__item table td {
width: calc(100% - 100px);
padding: 1rem 1.5rem;
}
}
@media screen and (max-width: 400px) {
.b-tsumari-list__item table td {
width: calc(100% - 80px);
padding: 1rem 0.5rem;
font-size: 14px;
}
}
.b-tsumari-list__item table tr:nth-of-type(even) td {
background-color: #f4fdff;
} .b-page-inside-link {
padding: 50px 10px;
justify-content: space-between;
margin: 60px 0 150px;
border-top: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
}
@media screen and (max-width: 1200px) {
.b-page-inside-link {
flex-wrap: wrap;
justify-content: flex-start;
}
}
@media screen and (max-width: 650px) {
.b-page-inside-link {
justify-content: center;
width: 100%;
}
}
.b-page-inside-link a {
color: #009fd9;
font-weight: bold;
font-size: 1.125rem;
display: block;
padding: 0 0.5em;
white-space: nowrap;
}
@media screen and (max-width: 1200px) {
.b-page-inside-link a {
width: 33%;
min-width: 260px;
padding: 0;
}
}
@media screen and (max-width: 1050px) {
.b-page-inside-link a {
width: 50%;
}
}
@media screen and (max-width: 650px) {
.b-page-inside-link a {
width: 260px;
margin: 0 auto;
}
}
.b-page-inside-link a::after {
content: url(//hiroshima.hai-sui.com/cont/wp-content/themes/haisui_hiroshima/img/price/page-link.png);
position: relative;
top: 5px;
left: 5px;
}
.b-price {
margin-bottom: 150px;
}
@media screen and (max-width: 850px) {
.b-price {
margin-bottom: 100px;
}
}
@media screen and (max-width: 650px) {
.b-price {
margin-bottom: 50px;
}
}
.b-price:last-child {
margin-bottom: 80px;
}
.b-price__title {
font-size: 2.25rem;
color: #009fd9;
}
@media screen and (max-width: 500px) {
.b-price__title {
font-size: 1.75rem;
}
}
@media screen and (max-width: 850px) {
.b-price__wrap {
overflow-x: scroll;
}
}
.b-price__table2 {
width: 100%;
min-width: 800px;
}
.b-price__table2 tr {
border-bottom: 2px solid #fff;
text-align: center;
font-weight: bold;
}
.b-price__table2 th,
.b-price__table2 td {
width: 25%;
border-right: 1px solid #fff;
padding: 1rem;
}
@media screen and (max-width: 850px) {
.b-price__table2 th,
.b-price__table2 td {
padding: 0.25rem;
}
}
.b-price__table2 tr:first-of-type {
background-color: #0086bd;
color: #fff000;
}
.b-price__table2 tr:nth-of-type(2) {
background-color: #009fd9;
color: #fff;
}
.b-price__table2 tr:nth-of-type(3),
.b-price__table2 tr:nth-of-type(5),
.b-price__table2 .light {
background-color: #e3f8ff;
}
.b-price__table2 tr:nth-of-type(4),
.b-price__table2 .light-light {
background-color: #f4fdff;
}
.b-price__table {
width: 100%;
min-width: 800px;
}
.b-price__table tr {
border-bottom: 2px solid #fff;
text-align: center;
font-weight: bold;
}
.b-price__table tr:first-of-type td img,
.b-price__table tr:nth-of-type(2) td img {
position: relative;
top: 5px;
margin: 0 5px;
}
.b-price__table tr:not(.nobg):first-of-type,
.b-price__table tr:not(.nobg):nth-of-type(2),
.b-price__table tr:not(.nobg):nth-of-type(3) {
background-color: #0086bd;
color: #fff000;
}
.b-price__table tr:not(.nobg):nth-of-type(4) {
background-color: #009fd9;
color: #fff;
}
.b-price__table tr.c-white,
.b-price__table tr.c-white:first-of-type {
color: #fff;
}
.b-price__table tr.nobg,
.b-price__table tr:nth-of-type(5),
.b-price__table tr:nth-of-type(7),
.b-price__table tr:nth-of-type(9),
.b-price__table tr:nth-of-type(11),
.b-price__table .light {
background-color: #e3f8ff;
}
.b-price__table tr:nth-of-type(6),
.b-price__table tr:nth-of-type(8),
.b-price__table tr:nth-of-type(10),
.b-price__table .light-light {
background-color: #f4fdff;
}
.b-price__table th,
.b-price__table td {
width: 25%;
border-right: 1px solid #fff;
padding: 1rem;
}
@media screen and (max-width: 850px) {
.b-price__table th,
.b-price__table td {
padding: 0.25rem;
}
}
.b-price__table--pink {
margin-top: 50px;
}
@media screen and (max-width: 500px) {
.b-price__table--pink {
margin-top: 30px;
}
}
.b-price__table--pink th {
background-color: #ff007f;
color: #fff;
}
.b-price__table--pink td {
color: #333333;
}
.b-price__table--pink tr:nth-of-type(odd) td {
background-color: #fff7fb;
}
.b-price__table--pink tr:nth-of-type(even) td {
background-color: #fff0f8;
}
.b-price__table--pink tr td:first-of-type {
width: 50%;
text-align: left;
padding-left: 1.5rem;
}
.b-staff-list__item {
margin-bottom: 70px;
gap: 60px;
align-items: flex-start;
justify-content: space-between;
}
@media screen and (max-width: 850px) {
.b-staff-list__item {
gap: 30px;
}
}
@media screen and (max-width: 650px) {
.b-staff-list__item {
flex-direction: column;
gap: 0;
}
}
.b-staff-list__item:nth-of-type(even) {
flex-direction: row-reverse;
}
@media screen and (max-width: 650px) {
.b-staff-list__item:nth-of-type(even) {
flex-direction: column;
}
}
.b-staff-list__item div {
width: 880px;
}
@media screen and (max-width: 850px) {
.b-staff-list__item div {
width: 600px;
}
}
@media screen and (max-width: 650px) {
.b-staff-list__item div {
width: 70%;
margin: 0 15%;
}
}
@media screen and (max-width: 400px) {
.b-staff-list__item div {
width: 100%;
margin: 0;
}
}
.b-staff-list__item h4 {
color: #009fd9;
font-size: 2.25rem;
}
@media screen and (max-width: 850px) {
.b-staff-list__item h4 {
font-size: 1.75rem;
}
}
.b-staff-list__item p {
line-height: 2.5;
}
@media screen and (max-width: 850px) {
.b-staff-list__item p {
line-height: 1.8;
}
}
.b-staff-list__item img {
width: calc(90% - 620px);
}
@media screen and (max-width: 850px) {
.b-staff-list__item img {
width: calc(90% - 400px);
}
}
@media screen and (max-width: 650px) {
.b-staff-list__item img {
width: 70%;
margin: 0 15%;
}
}
@media screen and (max-width: 400px) {
.b-staff-list__item img {
width: 100%;
margin: 0;
}
}
.b-word-list__item {
margin-bottom: 70px;
gap: 60px;
align-items: flex-start;
justify-content: space-between;
}
@media screen and (max-width: 850px) {
.b-word-list__item {
gap: 30px;
}
}
@media screen and (max-width: 650px) {
.b-word-list__item {
flex-direction: column;
gap: 0;
}
}
.b-word-list__item:nth-of-type(even) {
flex-direction: row-reverse;
}
@media screen and (max-width: 650px) {
.b-word-list__item:nth-of-type(even) {
flex-direction: column;
}
}
.b-word-list__item div {
width: 420px;
}
@media screen and (max-width: 850px) {
.b-word-list__item div {
width: 300px;
}
}
@media screen and (max-width: 650px) {
.b-word-list__item div {
width: 70%;
margin: 0 15%;
}
}
@media screen and (max-width: 400px) {
.b-word-list__item div {
width: 100%;
margin: 0;
}
}
.b-word-list__item h4 {
color: #009fd9;
font-size: 2.25rem;
}
@media screen and (max-width: 850px) {
.b-word-list__item h4 {
font-size: 1.75rem;
}
}
.b-word-list__item p {
line-height: 2.5;
}
@media screen and (max-width: 850px) {
.b-word-list__item p {
line-height: 1.8;
}
}
.b-word-list__item img {
width: calc(100% - 420px);
}
@media screen and (max-width: 850px) {
.b-word-list__item img {
width: calc(100% - 300px);
}
}
@media screen and (max-width: 650px) {
.b-word-list__item img {
width: 70%;
margin: 0 15%;
}
}
@media screen and (max-width: 400px) {
.b-word-list__item img {
width: 100%;
margin: 0;
}
} .b-examples__box {
gap: 70px;
margin-bottom: 70px;
align-items: center;
}
@media screen and (max-width: 850px) {
.b-examples__box {
gap: 30px;
}
}
@media screen and (max-width: 650px) {
.b-examples__box {
flex-direction: column;
}
}
.b-examples__box img {
width: 50%;
max-width: calc(100% - 470px);
}
@media screen and (max-width: 850px) {
.b-examples__box img {
max-width: calc(100% - 350px);
}
}
@media screen and (max-width: 650px) {
.b-examples__box img {
max-width: 100%;
width: 80%;
}
}
@media screen and (max-width: 400px) {
.b-examples__box img {
width: 100%;
}
}
.b-examples__box h3 {
color: #009fd9;
font-size: 50px;
font-style: italic;
line-height: 1.2;
}
@media screen and (max-width: 850px) {
.b-examples__box h3 {
font-size: 2.5rem;
}
}
@media screen and (max-width: 500px) {
.b-examples__box h3 {
font-size: 2rem;
}
}
.b-examples__box--outdoor h3 {
font-size: 42px;
}
.b-examples__box--outdoor h3 br.none {
display: none;
}
@media screen and (max-width: 400px) {
.b-examples__box--outdoor h3 br.none {
display: inline;
}
}
@media screen and (max-width: 1200px) {
.b-examples__box--outdoor h3 {
font-size: 2rem;
}
}
@media screen and (max-width: 850px) {
.b-examples__box--outdoor h3 {
font-size: 1.6rem;
}
}
@media screen and (max-width: 650px) {
.b-examples__box--outdoor h3 {
font-size: 2rem;
}
}
@media screen and (max-width: 500px) {
.b-examples__box--outdoor h3 {
font-size: 1.75rem;
}
}
.b-examples__title {
font-size: 2.25rem;
color: #009fd9;
}
@media screen and (max-width: 650px) {
.b-examples__title {
font-size: 1.75rem;
line-height: 1.2;
margin-bottom: 0.5em;
}
}
@media screen and (max-width: 500px) {
.b-examples__title {
font-size: 1.5rem;
}
}
.b-examples__text {
margin-bottom: 70px;
}
@media screen and (max-width: 650px) {
.b-examples__text {
margin-bottom: 40px;
}
}
.b-examples__text:last-of-type {
margin-bottom: 150px;
}
@media screen and (max-width: 650px) {
.b-examples__text:last-of-type {
margin-bottom: 70px;
}
} @media screen and (max-width: 650px) {
.b-page-area-text.detail1 {
margin-bottom: 0.1rem;
}
}
.btn-link {
color : #ff7043;
font-weight: bold;
}
.b-homecenter__table {
margin-top:30px;
background-color:#fff;
width: 100%;
min-width: 800px;
border-collapse:collapse;
}
.b-homecenter__table th {
background-color:#bbdbf3;
color:#4496d3;
}
.b-homecenter__table tr {
border: 1px solid #e6e6fa;
text-align: center;
}
.b-homecenter__table td {
padding: 0.5rem;
}
@media screen and (max-width: 850px) {
.b-homecenter__table th,
.b-homecenter__table td {
padding: 0.25rem;
}
}
.b-area-list--area {
margin-top: 75px;
}
.b-area-list--area > li {
width: 100%;
margin-bottom: 50px;
position: relative;
}
@media screen and (max-width: 850px) {
.b-area-list--area > li {
margin-bottom: 30px;
}
}
@media screen and (max-width: 650px) {
.b-area-list--area > li {
margin-bottom: 1rem;
}
}
.b-area-list--area > li::after {
content: url(//hiroshima.hai-sui.com/cont/wp-content/themes/haisui_hiroshima/img/common/yellow-arrow.png);
display: block;
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-45%);
transition: all 0.3s;
}
@media screen and (max-width: 500px) {
.b-area-list--area > li::after {
transform: translateY(-30%);
}
}
.b-area-list--area > li:hover::after {
right: 10px;
}
li.b-hiroshima {
background-color: #edf4fa;
margin-bottom: 30px;
}
li.b-hiroshima:hover {
background-color: #edf4fa;
}
li.b-hiroshima::after {
content: "";
}
li.b-hiroshima p {
background-color: #009fd9;
font-weight: bold;
font-size: 1.125rem;
display: block;
color: #fff;
display: block;
padding: 1rem 1.5rem;
}
@media screen and (max-width: 650px) {
li.b-hiroshima p {
margin-bottom: 1rem;
}
}
@media screen and (max-width: 500px) {
li.b-hiroshima p {
margin-bottom: 0.5em;
font-size: 1rem;
}
}
@media screen and (max-width: 650px) {
li.b-hiroshima p {
padding: 0.5rem 1rem;
}
}
@media screen and (max-width: 500px) {
li.b-hiroshima p {
padding: 0.25em 1rem;
}
}
li.b-hiroshima ul {
flex-wrap: wrap;
margin-top: 30px;
}
li.b-hiroshima li {
background-color: #edf4fa;
width: 20%;
min-width: 10em;
position: relative;
margin-bottom: 0.5em;
}
@media screen and (max-width: 400px) {
li.b-hiroshima li {
margin-bottom: 0;
}
}
li.b-hiroshima li:hover {
background-color: #edf4fa;
}
@media screen and (max-width: 1050px) {
li.b-hiroshima li {
width: 25%;
}
}
@media screen and (max-width: 850px) {
li.b-hiroshima li {
width: 33%;
}
}
@media screen and (max-width: 650px) {
li.b-hiroshima li {
width: 50%;
}
}
li.b-hiroshima li::after {
content: "";
}
li.b-hiroshima li:first-child {
width: 20%;
}
@media screen and (max-width: 1050px) {
li.b-hiroshima li:first-child {
width: 25%;
}
}
@media screen and (max-width: 850px) {
li.b-hiroshima li:first-child {
width: 33%;
}
}
@media screen and (max-width: 650px) {
li.b-hiroshima li:first-child {
width: 50%;
}
}
li.b-hiroshima li a {
padding: 0;
color: #333333;
display: block;
font-weight: normal;
position: relative;
left: 1rem;
}
li.b-hiroshima li a::before {
content: "";
height: 6px;
width: 6px;
border-left: 3px solid #009fd9;
border-bottom: 3px solid #009fd9;
display: block;
position: absolute;
transform: rotate(-135deg);
top: 1rem;
left: -1rem;
transition: all 0.3s;
}
li.b-hiroshima li a:hover {
left: 1.5rem;
}
li.b-hiroshima li a:hover::before {
border-color: #0086bd;
}
.b-area-top {
display: flex;
align-items: center;
flex-direction: column;
}
.b-area-top h3 {
color: #009fd9;
font-size: 2.25rem;
margin-top: 0.5rem;
text-align: center;
line-height: 1.2;
}
@media screen and (max-width: 1050px) {
.b-area-top h3 {
margin-top: 1.5rem;
}
}
@media screen and (max-width: 400px) {
.b-area-top h3 {
font-size: 1.75rem;
}
}
.b-area-top h3 br {
display: none;
}
@media screen and (max-width: 1050px) {
.b-area-top h3 br.pc {
display: inline;
}
}
@media screen and (max-width: 850px) {
.b-area-top h3 br.tab {
display: inline;
}
}
.b-area__name {
background-color: #009fd9;
color: #fff;
padding: 1.5rem 1rem;
font-size: 1.125rem;
}
.b-area__column-list li {
margin-top: 1.5rem;
}
.b-area__column-list h5 {
font-size: 1.125rem;
line-height: 1.25;
}
.b-area__detail-list li {
display: inline;
}
.b-area__detail-list li::after {
content: "／";
padding: 0 0.25rem;
}
.b-area__detail-list li:last-child::after {
content: "";
}
.b-customer-bold {
font-size: 1.125rem;
}
@media screen and (max-width: 500px) {
.b-customer-bold {
font-size: 16px;
}
}
.b-customer-list {
margin-top: 45px;
}
.b-customer-list__item {
width: 100%;
border-top: #dddddd 1px solid;
padding: 50px 0;
}
@media screen and (max-width: 850px) {
.b-customer-list__item {
padding: 20px 0;
}
}
.b-customer-list__item:last-child {
border-bottom: 1px solid #ddd;
}
.b-customer-list__item h3 {
color: #009fd9;
margin-bottom: 0.5em;
font-size: 1.125rem;
}
@media screen and (max-width: 500px) {
.b-customer-list__item h3 {
font-size: 16px;
}
} .b-flow--flow:last-child {
margin-bottom: 25px;
}
.b-flow--flow .b-flow__text a {
position: relative;
margin-top: 30px;
display: inline-block;
left: 100%;
transform: translateX(-380px);
}
@media screen and (max-width: 650px) {
.b-flow--flow .b-flow__text a {
transform: translateX(-300px);
margin-top: 1rem;
}
.b-flow--flow .b-flow__text a img {
max-width: 300px;
}
}
@media screen and (max-width: 400px) {
.b-flow--flow .b-flow__text a {
transform: translateX(-250px);
margin-top: 1rem;
}
.b-flow--flow .b-flow__text a img {
max-width: 250px;
}
}
.b-pay {
flex-wrap: wrap;
}
.b-pay__item {
width: 50%;
align-items: flex-start;
gap: 30px;
padding: 25px 0;
border-bottom: 1px solid #ddd;
}
@media screen and (max-width: 850px) {
.b-pay__item {
width: 100%;
}
}
@media screen and (max-width: 650px) {
.b-pay__item {
padding: 10px 0;
align-items: center;
}
}
@media screen and (max-width: 400px) {
.b-pay__item {
gap: 1rem;
}
.b-pay__item img {
max-width: 60px;
}
}
.b-pay__item:first-child,
.b-pay__item:nth-child(2) {
padding-top: 0;
}
@media screen and (max-width: 850px) {
.b-pay__item:first-child,
.b-pay__item:nth-child(2) {
padding-top: 25px;
}
}
@media screen and (max-width: 650px) {
.b-pay__item:first-child,
.b-pay__item:nth-child(2) {
padding-top: 10px;
}
}
.b-pay__item h4 {
font-size: 1.125rem;
margin-top: 1.5rem;
line-height: 1.2;
margin-bottom: 0.5em;
}
@media screen and (max-width: 650px) {
.b-pay__item h4 {
margin-top: 0;
}
}
.b-pay__item--pay {
width: 100%;
}
.b-pay__item--pay div {
width: 100%;
}
.b-pay-pay-list {
width: 100%;
align-items: center;
justify-content: space-between;
margin-top: 1.5rem;
}
@media screen and (max-width: 850px) {
.b-pay-pay-list {
flex-wrap: wrap;
}
.b-pay-pay-list li {
width: 33%;
text-align: center;
}
}
@media screen and (max-width: 500px) {
.b-pay-pay-list li {
width: 50%;
}
}
.b-pay-pay-list img {
max-width: 100px;
max-height: 40px;
}
@media screen and (max-width: 400px) {
.b-pay-pay-list img {
max-width: 80px;
}
} .b-office-weit-list {
margin-top: 80px;
}
.b-office-weit-list__item {
margin-bottom: 45px;
}
.b-office-weit-list__item h3 {
background-color: #009fd9;
color: #fff;
margin-bottom: 1.5rem;
padding: 1.5rem 1rem;
}
.b-policy-list {
margin-bottom: 20px;
}
.b-policy-list__item {
margin-bottom: 60px;
}
.b-policy-list__item h3 {
font-size: 1.125rem;
}
.b-policy-list + p {
text-align: right;
} .b-works-number {
background-color: #fff;
padding: 1rem 1.5rem;
display: inline-block;
margin-bottom: 45px;
}
@media screen and (max-width: 500px) {
.b-works-number {
margin-bottom: 20px;
}
}
.b-works-number span {
color: #009fd9;
font-weight: bold;
}
.b-works-cate {
justify-content: space-between;
flex-wrap: wrap;
gap: 2rem;
margin-bottom: 50px;
}
@media screen and (max-width: 1200px) {
.b-works-cate {
justify-content: flex-start;
}
}
@media screen and (max-width: 850px) {
.b-works-cate {
gap: 1rem;
}
}
@media screen and (max-width: 400px) {
.b-works-cate {
gap: 0.5rem;
}
}
.b-works-cate__item {
background-color: #fff;
border: 1px solid #ddd;
transition: all 0.3s;
border-radius: 2rem;
}
.b-works-cate__item:hover,
.b-works-cate__item.current {
background-color: #009fd9;
}
.b-works-cate__item:hover a,
.b-works-cate__item.current a {
filter: brightness(1);
color: #fff;
}
.b-works-cate__item a {
color: #009fd9;
font-weight: bold;
display: inline-block;
width: 133px;
padding: 5px;
border-radius: 2rem;
text-align: center;
}
@media screen and (max-width: 500px) {
.b-works-cate__item a {
width: 80px;
}
}
.b-works-cate__item--outdoor {
width: 177px;
}
@media screen and (max-width: 500px) {
.b-works-cate__item--outdoor {
width: 120px;
}
}
.b-works-cate__item--outdoor a {
width: 177px;
}
@media screen and (max-width: 500px) {
.b-works-cate__item--outdoor a {
width: 120px;
}
}
.b-works-page-area {
display: flex;
justify-content: center;
}
.wp-pagenavi {
display: flex;
align-items: center;
text-align: center;
}
.wp-pagenavi a,
.wp-pagenavi span {
border: none !important;
}
.wp-pagenavi .previouspostslink {
width: 77px;
height: 77px;
background-image: url(//hiroshima.hai-sui.com/cont/wp-content/themes/haisui_hiroshima/img/works/previous.png);
margin-right: 40px;
display: inline-block;
color: transparent !important;
}
@media screen and (max-width: 500px) {
.wp-pagenavi .previouspostslink {
width: 45px;
height: 45px;
background-size: contain;
margin-right: 20px;
}
}
.wp-pagenavi .current {
background-color: #009fd9;
color: #fff000;
border-radius: 5px;
line-height: 60px;
width: 60px;
display: inline-block;
font-weight: bold;
}
@media screen and (max-width: 500px) {
.wp-pagenavi .current {
line-height: 40px;
width: 40px;
}
}
.wp-pagenavi .page {
color: #009fd9;
line-height: 60px;
width: 60px;
display: inline-block;
text-align: center;
font-weight: bold;
}
@media screen and (max-width: 500px) {
.wp-pagenavi .page {
line-height: 40px;
width: 40px;
}
}
.wp-pagenavi .nextpostslink {
width: 77px;
height: 77px;
background-image: url(//hiroshima.hai-sui.com/cont/wp-content/themes/haisui_hiroshima/img/works/next.png);
margin-left: 40px;
display: inline-block;
color: transparent !important;
}
@media screen and (max-width: 500px) {
.wp-pagenavi .nextpostslink {
width: 45px;
height: 45px;
background-size: contain;
margin-left: 20px;
}
}
.b-works-single {
background-color: #fff;
padding: 80px 0;
margin-bottom: 80px;
}
@media screen and (max-width: 500px) {
.b-works-single {
padding: 40px 0;
margin-bottom: 40px;
}
}
.b-works-single__title {
color: #009fd9;
font-size: 2.25rem;
font-weight: bold;
margin-bottom: 1em;
line-height: 1.4;
}
@media screen and (max-width: 650px) {
.b-works-single__title {
font-size: 1.75rem;
}
}
@media screen and (max-width: 400px) {
.b-works-single__title {
font-size: 1.25rem;
}
}
.b-works-single p {
margin-bottom: 1em;
}
.b-works-single img {
margin-bottom: 1em;
}
.b-works-page-area--single .wp-pagenavi {
justify-content: space-between;
width: 100%;
}
.b-works-page-area--single .navi-text {
color: #009fd9;
font-weight: bold;
line-height: 77px;
white-space: nowrap;
}
@media screen and (max-width: 650px) {
.b-works-page-area--single .navi-text {
line-height: 50px;
}
}
.b-works-page-area--single .previouspostslink {
padding-left: 100px;
margin-right: 0;
width: auto;
}
@media screen and (max-width: 650px) {
.b-works-page-area--single .previouspostslink {
height: 50px;
background-size: contain;
line-height: 50px;
padding-left: 60px;
}
}
@media screen and (max-width: 500px) {
.b-works-page-area--single .previouspostslink {
padding-left: 45px;
height: 40px;
}
}
.b-works-page-area--single .nextpostslink {
padding-right: 100px;
margin-left: 0;
background-position: center right;
width: auto;
}
@media screen and (max-width: 650px) {
.b-works-page-area--single .nextpostslink {
height: 50px;
background-size: contain;
line-height: 50px;
padding-right: 60px;
}
}
@media screen and (max-width: 500px) {
.b-works-page-area--single .nextpostslink {
padding-right: 45px;
height: 40px;
}
}
.b-works-page-area--single .back {
color: #fff000;
font-weight: bold;
background-color: #009fd9;
line-height: 80px;
text-align: center;
padding: 0 140px;
border-radius: 40px;
font-size: 1.125rem;
display: inline-block;
}
.b-works-page-area--single .back br {
display: none;
}
@media screen and (max-width: 400px) {
.b-works-page-area--single .back br {
display: inline;
}
}
@media screen and (max-width: 850px) {
.b-works-page-area--single .back {
padding: 0 50px;
}
}
@media screen and (max-width: 650px) {
.b-works-page-area--single .back {
padding: 0 30px;
line-height: 50px;
}
}
@media screen and (max-width: 500px) {
.b-works-page-area--single .back {
padding: 0 1rem;
font-size: 0.875rem;
}
}
@media screen and (max-width: 400px) {
.b-works-page-area--single .back {
line-height: 1.2;
padding: 1rem;
border-radius: 30px;
}
} .b-column--single {
border: 1px solid #ddd;
padding: 80px 0;
margin-bottom: 80px;
box-shadow: 10px 12px 0 #fff000;
}
@media screen and (max-width: 650px) {
.b-column--single {
padding: 40px 0;
}
}
.b-column--single__title {
color: #009fd9;
font-size: 2.25rem;
font-weight: bold;
margin-bottom: 1em;
line-height: 1.4;
}
@media screen and (max-width: 650px) {
.b-column--single__title {
font-size: 1.75rem;
}
}
@media screen and (max-width: 400px) {
.b-column--single__title {
font-size: 1.25rem;
}
}
.b-column--single__customer {
margin-bottom: 60px;
}
@media screen and (max-width: 650px) {
.b-column--single__customer {
margin-bottom: 30px;
}
}
.b-column--single__index {
margin-bottom: 80px;
}
@media screen and (max-width: 650px) {
.b-column--single__index {
margin-bottom: 40px;
}
}
.b-column--single__index-title {
color: #009fd9;
font-size: 2.25rem;
font-weight: bold;
}
@media screen and (max-width: 650px) {
.b-column--single__index-title {
font-size: 1.75rem;
}
}
@media screen and (max-width: 400px) {
.b-column--single__index-title {
font-size: 1.25rem;
}
}
.b-column--single__index li {
list-style-type: decimal;
list-style-position: inside;
}
.b-column--single__index li::marker {
font-weight: bold;
}
.b-column--single__index li a {
font-weight: bold;
}
.b-column--single__sub-title {
font-weight: bold;
font-size: 1rem;
}
.b-column--single__text {
margin-bottom: 50px;
}
@media screen and (max-width: 650px) {
.b-column--single__text {
margin-bottom: 25px;
}
} .b-company-logo {
text-align: center;
margin-bottom: 45px;
}
@media screen and (max-width: 500px) {
.b-company-logo {
margin-bottom: 20px;
}
.b-company-logo + .b-page-top-text {
padding-top: 0;
}
}
.b-company-logo img {
width: 475px;
max-width: 100%;
}
.b-company-table {
margin-top: 80px;
margin-bottom: 80px;
border-collapse: collapse;
width: 100%;
}
@media screen and (max-width: 500px) {
.b-company-table {
margin-top: 40px;
margin-bottom: 40px;
}
}
.b-company-table tr {
height: 70px;
}
.b-company-table th {
font-weight: bold;
width: 230px;
font-size: 1.125rem;
border-top: 1px solid #ccc;
padding-left: 80px;
text-align: left;
}
@media screen and (max-width: 850px) {
.b-company-table th {
padding-left: 40px;
width: 150px;
}
}
@media screen and (max-width: 500px) {
.b-company-table th {
padding-left: 10px;
width: 100px;
font-size: 1rem;
}
}
.b-company-table th:last-of-type {
border-bottom: 1px solid #ccc;
}
.b-company-table td {
width: calc(100% - 230px);
border-top: 1px solid #ccc;
padding-right: 80px;
}
@media screen and (max-width: 850px) {
.b-company-table td {
padding-right: 40px;
width: calc(100% - 150px);
}
}
@media screen and (max-width: 500px) {
.b-company-table td {
padding-right: 10px;
width: calc(100% - 100px);
}
}
.b-company-table td:last-child {
border-bottom: 1px solid #ccc;
}
.b-company-map {
width: 100%;
margin-bottom: 50px;
height: 500px;
}
@media screen and (max-width: 850px) {
.b-company-map {
height: 400px;
}
}
@media screen and (max-width: 650px) {
.b-company-map {
height: 300px;
}
} .b-form__title {
margin-top: 70px;
margin-bottom: 50px;
color: #009fd9;
font-size: 2.25rem;
}
@media screen and (max-width: 500px) {
.b-form__title {
font-size: 1.75rem;
}
}
.b-form__title--thanks {
margin-bottom: 0;
}
.b-form__title--thanks + p {
margin-bottom: 0.5em;
}
.b-form-table {
border-collapse: collapse;
width: 100%;
}
.b-form-table tr {
border-top: 1px solid #ccc;
display: flex;
width: 100%;
}
@media screen and (max-width: 850px) {
.b-form-table tr {
flex-direction: column;
}
.b-form-table tr:last-child {
border-bottom: 1px solid #ddd;
}
}
.b-form-table__th {
width: 385px;
text-align: left;
align-items: center;
padding: 35px 0;
vertical-align: top;
}
@media screen and (max-width: 1200px) {
.b-form-table__th {
width: 300px;
}
}
@media screen and (max-width: 850px) {
.b-form-table__th {
padding-top: 20px;
padding-bottom: 0;
width: 100%;
}
}
.b-form-table__th span {
background-color: #009fd9;
color: #fff000;
padding: 5px 1em;
font-size: 0.875rem;
font-weight: bold;
margin: 0 30px;
}
@media screen and (max-width: 850px) {
.b-form-table__th span {
margin-left: 0;
}
}
.b-form-table__th label {
font-weight: bold;
}
.b-form-table__td {
width: calc(100% - 385px);
padding: 30px 80px 30px 0;
display: flex;
align-items: center;
flex-wrap: wrap;
}
@media screen and (max-width: 1200px) {
.b-form-table__td {
padding-right: 30px;
width: calc(100% - 300px);
}
}
@media screen and (max-width: 850px) {
.b-form-table__td {
flex-direction: column;
align-items: flex-start;
gap: 10px;
padding-top: 1rem;
width: 100%;
padding-right: 0;
}
}
.b-form-table__td input,
.b-form-table__td textarea {
width: 100%;
height: 50px;
border: 1px solid #bbb;
padding: 1rem 1.5rem;
border-radius: 5px;
}
.b-form-table__td input::-moz-placeholder,
.b-form-table__td textarea::-moz-placeholder {
color: #bbb;
}
.b-form-table__td input::placeholder,
.b-form-table__td textarea::placeholder {
color: #bbb;
}
.b-form-table__td input#name,
.b-form-table__td input#ruby {
width: calc(100% - 80px);
}
@media screen and (max-width: 1200px) {
.b-form-table__td input#name,
.b-form-table__td input#ruby {
width: 100%;
}
}
.b-form-table__td-post {
align-items: center;
}
.b-form-table__td-post span {
color: #333;
}
.b-form-table__td input#post {
width: 120px;
margin: 0 1rem;
border-radius: 3px;
}
.b-form-table__td textarea {
min-height: 270px;
max-height: 500px;
}
@media screen and (max-width: 500px) {
.b-form-table__td textarea {
min-height: 180px;
}
}
.privacy-confirm {
text-align: center;
margin-top: 50px;
}
.mwform-checkbox-field [type="checkbox"] {
display: none;
}
.mwform-radio-field
input[type="radio"]:checked
+ .mwform-radio-field-text::before,
.mwform-checkbox-field input:checked + .mwform-checkbox-field-text::after {
opacity: 1;
}
.mwform-checkbox-field label {
position: relative;
cursor: pointer;
}
.mwform-checkbox-field label::before {
width: 17px;
height: 17px;
content: "";
position: absolute;
left: 0;
top: 0px;
border: 2px solid #009fd9;
border-radius: 2px;
}
.mwform-checkbox-field-text {
line-height: 1.2;
margin-left: 10px;
}
.mwform-checkbox-field-text a {
border-bottom: 1px solid #009fd9;
color: #009fd9;
}
.mwform-checkbox-field-text::after {
width: 20px;
height: 10px;
content: url(//hiroshima.hai-sui.com/cont/wp-content/themes/haisui_hiroshima/img/contact/check.png);
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.privacy-confirm .mwform-checkbox-field-text {
letter-spacing: 0.05em;
}
.b-form-button,
.b-top-link {
background-color: #009fd9;
color: #fff000;
font-weight: bold;
text-align: center;
margin-top: 50px;
width: 372px;
line-height: 80px;
position: relative;
border-radius: 40px;
left: 50%;
transform: translateX(-50%);
letter-spacing: 0.1rem;
display: block;
}
@media screen and (max-width: 500px) {
.b-form-button,
.b-top-link {
width: 100%;
}
}
.b-form-button::after,
.b-top-link::after {
content: url(//hiroshima.hai-sui.com/cont/wp-content/themes/haisui_hiroshima/img/contact/submit-arrow.png);
height: 20px;
width: 24px;
display: block;
position: absolute;
right: 30px;
top: 3px;
} .layout-corporate-flow {
background-color: #edf4fa;
}
.layout-corporate-flow .b-cor-sec-title {
margin-bottom: 1em;
}
.layout-corporate-form {
padding-bottom: 0;
}
.layout-corporate-thanks h4 {
font-size: 36px;
color: #009fd9;
}
.layout-corporate-thanks p {
margin-bottom: 1em;
}
.b-cor-mv {
position: relative;
}
.b-cor-mv__pc {
width: 100%;
}
@media screen and (max-width: 500px) {
.b-cor-mv__pc {
display: none;
}
}
.b-cor-mv__pc-btn {
position: absolute;
width: 30%;
left: 50%;
transform: translateX(-50%);
top: 43%;
pointer-events: none;
}
.b-cor-mv__pc-btn--active {
pointer-events: auto;
}
@media screen and (max-width: 500px) {
.b-cor-mv__pc-btn {
width: 75%;
top: 58%;
}
}
.b-cor-mv__pc-btn img {
max-width: 100%;
}
.b-cor-mv__sp {
display: none;
}
@media screen and (max-width: 500px) {
.b-cor-mv__sp {
display: block;
}
}
.b-cor-sec-title {
color: #009fd9;
text-align: center;
font-size: 50px;
font-style: italic;
}
@media screen and (max-width: 1050px) {
.b-cor-sec-title {
font-size: 40px;
}
}
@media screen and (max-width: 850px) {
.b-cor-sec-title {
font-size: 32px;
}
}
@media screen and (max-width: 500px) {
.b-cor-sec-title {
font-size: 28px;
line-height: 1.2;
}
}
.b-cor-sec-title.b-form__title {
margin-top: 0;
}
@media screen and (max-width: 500px) {
.b-cor-sec-title span {
display: inline-block;
}
}
.b-cor-sec {
padding: 60px 0 175px;
color: #009fd9;
}
@media screen and (max-width: 1050px) {
.b-cor-sec {
padding: 30px 0 100px;
}
}
@media screen and (max-width: 850px) {
.b-cor-sec {
padding: 16px 0 100px;
}
}
@media screen and (max-width: 500px) {
.b-cor-sec {
padding: 16px 0 75px;
}
}
.b-cor-sec:last-child {
padding: 0;
}
.b-cor-sec__title {
font-size: 36px;
margin-bottom: 0.5em;
}
@media screen and (max-width: 1050px) {
.b-cor-sec__title {
font-size: 28px;
}
}
@media screen and (max-width: 1050px) {
.b-cor-sec__title {
font-size: 22px;
}
}
@media screen and (max-width: 500px) {
.b-cor-sec__title {
line-height: 1.2;
}
}
.b-cor-sec__text {
color: #333333;
margin-bottom: 50px;
}
@media screen and (max-width: 500px) {
.b-cor-sec__text {
margin-bottom: 30px;
}
}
.b-cor-sec__list {
gap: 60px;
}
@media screen and (max-width: 1200px) {
.b-cor-sec__list {
gap: 30px;
}
}
@media screen and (max-width: 850px) {
.b-cor-sec__list {
flex-wrap: wrap;
}
}
.b-cor-sec__list-item {
width: calc(33% - 40px);
}
@media screen and (max-width: 1200px) {
.b-cor-sec__list-item {
width: calc(33% - 20px);
}
}
@media screen and (max-width: 850px) {
.b-cor-sec__list-item {
width: calc(50% - 20px);
}
}
@media screen and (max-width: 400px) {
.b-cor-sec__list-item {
width: 100%;
}
}
.b-cor-sec__list-item img {
max-width: 100%;
}
.b-cor-sec__list-item h4 {
font-size: 35px;
line-height: 1.4;
}
@media screen and (max-width: 1200px) {
.b-cor-sec__list-item h4 {
font-size: 30px;
}
}
@media screen and (max-width: 1050px) {
.b-cor-sec__list-item h4 {
font-size: 24px;
}
}
@media screen and (max-width: 500px) {
.b-cor-sec__list-item h4 {
font-size: 20px;
}
}
.b-cor-sec__list-item p {
font-weight: bold;
}
.b-cor-flow-list__item {
background-color: #fff;
margin-bottom: 50px;
position: relative;
}
.b-cor-flow-list__item::after {
content: url(//hiroshima.hai-sui.com/cont/wp-content/themes/haisui_hiroshima/img/corporate/flow-arrow.png);
position: absolute;
top: calc(100% + 11px);
left: calc(25% + 75px);
}
@media screen and (max-width: 1050px) {
.b-cor-flow-list__item::after {
left: calc(25% + 45px);
}
}
@media screen and (max-width: 650px) {
.b-cor-flow-list__item::after {
left: calc(50% - 10px);
}
}
.b-cor-flow-list__item:last-child::after {
content: "";
}
@media screen and (max-width: 650px) {
.b-cor-flow {
flex-direction: column;
}
}
.b-cor-flow img {
-o-object-fit: cover;
object-fit: cover;
width: 25%;
}
@media screen and (max-width: 650px) {
.b-cor-flow img {
width: 100%;
height: 200px;
}
}
@media screen and (max-width: 400px) {
.b-cor-flow img {
height: 150px;
}
}
.b-cor-flow__text {
width: 100%;
}
.b-cor-flow__text-title {
background-color: #009fd9;
padding: 7px 50px;
align-items: center;
color: #fff000;
font-size: 36px;
gap: 0.5em;
}
@media screen and (max-width: 1050px) {
.b-cor-flow__text-title {
font-size: 28px;
padding: 5px 30px;
}
}
@media screen and (max-width: 400px) {
.b-cor-flow__text-title {
font-size: 24px;
padding: 5px 16px;
}
}
.b-cor-flow__text-title img {
width: 70px;
}
@media screen and (max-width: 1050px) {
.b-cor-flow__text-title img {
width: 50px;
}
}
@media screen and (max-width: 650px) {
.b-cor-flow__text-title img {
height: 50px;
}
}
.b-cor-flow__text p {
padding: 20px 50px;
font-weight: bold;
font-size: 18px;
}
@media screen and (max-width: 1050px) {
.b-cor-flow__text p {
padding: 16px 30px;
font-size: 16px;
}
}
@media screen and (max-width: 400px) {
.b-cor-flow__text p {
padding: 16px;
}
}
.b-form-button:hover {
background-color: #0086bd;
}
.b-contact-right img {
max-width: 100%;
}
.b-back-button::after {
transform: rotate(180deg);
left: 30px;
top: calc(50% + 15px);
} .flex {
display: flex;
}
.flex-center {
display: flex;
justify-content: center;
}
.flex-between {
display: flex;
justify-content: space-between;
}
.align-center {
text-align: center;
}
.yellow {
color: #fff000;
}
.bold {
font-weight: bold;
}
.area-list {
flex-wrap: wrap;
}
.area-list li {
width: 20%;
font-size: 1.125rem;
font-weight: bold;
margin-bottom: 0.5em;
}
.area-list li a {
padding: 0;
color: #333;
display: block;
font-weight: normal;
position: relative;
left: 1rem;
}
.area-list li a::before {
content: "";
height: 6px;
width: 6px;
border-left: 3px solid #009fd9;
border-bottom: 3px solid #009fd9;
display: block;
position: absolute;
transform: rotate(-135deg);
top: 1rem;
left: -1rem;
transition: all 0.3s;
}
.area-list li p {
padding: 0;
color: #333;
display: block;
font-weight: normal;
position: relative;
left: 1rem;
}
.area-list li p::before {
content: "";
height: 6px;
width: 6px;
border-left: 3px solid #009fd9;
border-bottom: 3px solid #009fd9;
display: block;
position: absolute;
transform: rotate(-135deg);
top: 1rem;
left: -1rem;
transition: all 0.3s;
}
@media screen and (max-width: 1050px) {
.area-list li {
width: 25%;
}
}
@media screen and (max-width: 850px) {
.area-list li {
width: 33%;
}
}
@media screen and (max-width: 650px) {
.area-list li {
width: 50%;
}
} .footer-area-link {
margin-bottom: 50px;
}
.footer-area-link dl {
margin-bottom: 30px;
}
.footer-area-link dl dt {
padding: 10px;
font-weight: bold;
background-color: #fff;
cursor: pointer;
}
.footer-area-link dl dd {
display: none;
padding: 10px;
}
.footer-area-link dl dd .area-list li a {
font-size: 14px;
}
.footer-area-link dl dd .area-list li p {
font-size: 14px;
}
p.intro {
padding: 10px;
font-size: 12px;
max-width: 1030px;
margin: 0 auto;
}
section.layout-web {
padding: 35px 0;
}
@media screen and (max-width: 500px){
}
section.layout-web {
padding: 20px 0;
}
section.layout-menu {
padding: 35px 0;
}
@media screen and (max-width: 500px){
}
section.layout-menu {
padding: 20px 0;
}
.tokuchou{
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.tokuchou .item{
border: 1px solid #009fd9;
width: 30%;
margin: 20px;
border-radius: 30px;
}
.tokuchou .item .text{
padding: 20px 25px;
}
.tokuchou .item .text h4{
text-align: center;
font-size: x-large;
color: #009fd9;
}
.tokuchou .item .text > p{
font-weight: bold; 
}
.tokuchou .item .text .txt-red{
color: red;
}
@media screen and (max-width: 650px) {
.tokuchou .item{
width: 100%;
}
}
.saiyori-address{
font-size: 2em;
font-weight: bold;
border: 1px solid #6595ed;
padding: 30px;
}
.saiyori-flex{
display: flex;
align-items: flex-start;
width: 100%;
justify-content: space-around;
margin-bottom: 30px;
}
.saiyori-flex iframe{
width: 50%;
height: 400px;
}
@media screen and (max-width: 640px) {
.saiyori-flex{
flex-direction: column;
}
.saiyori-flex iframe{
width: 100vw;
transform: translate(-5%, 0);
}
.saiyori-address{
width: 100vw;
transform: translate(-5%, 0);
font-size: 1.4em; 
}
} @media screen and (max-width: 768px) {
.br-sp { display:none; }
} @media screen and (min-width:769px) {
.br-pc { display: none; }
} .new_blog{
font-size:0.9em; }
.new_blog a{
flex-basis: 100%;
text-decoration: none;
}
.new_blog a:hover {
opacity: 0.8;
}
.article_wrap{
display: flex;
justify-content: space-around;
max-width: 660px;
flex-flow: wrap;
}
.article_wrap .article{
width: 33.1%;
}
.article_wrap .old_blog_w{
width:100%!important;
}
.blog .article .tit_h4{
background: #f3f3f3;
border-bottom: 2px solid #014190;
text-indent: 0.5em;
}
.blog .article .tit_h4 a{
color: #014190;
}
.blog_flex{
display: flex;
justify-content: center;
margin-bottom: .5rem;
}
.blog_flex_item{
text-align: center;
}
.blog_flex_item img{ height: 160px;
object-fit: cover;
}
.blog_flex_item2{
width: 80%;
padding: 0 1em;
}
.blog_details{
color: #014190;
border-bottom: 1px solid #014190;
font-size: 1.2em;
}
.blog_table{
width: 99%;
margin: 0 auto 0.5em;
}
.blog_table .table{
width: 100%;
}
.blog_table .table td{
border: none;
border-bottom: 1px solid #ccc;
min-width: 80px;
border: 1px solid #ccc;
color: #222222;
}
.blog_table .table td p{
display: flex;
justify-content: space-between;
word-break: break-all;
}
.blog_table .table td p span{
width: 50%;
}
.blog_table .table th{
background: #014190;
color: #fff;
}
.blog_table .table td p span:first-child {
font-weight: bold;
}
.blog_table .table td.blue-txt{
background: #00bfff;
color: #fff;
width: 35%;
}
.blog_table .table td.light-blue{ background: #f2f2f2;
border: 1px solid #ccc;
color: #000;
}
.blog_table .gray-back{
background: #eee;
}
.blog_img{
display: flex;
justify-content: space-around;
margin: 1em 0px;
}
.blog_img div{
position: relative;
}
.blog_img div img{
max-width: 220px;
}
.blog_img_before,.blog_img_after{
position: absolute;
top: 0;
margin: 0;
padding: 0 1.2em;
}
.blog_img_before{
background: #555;
color: #fff;
}
.blog_img_after{
background: #014190;
color: #fff;
}
.blog .article .blog_contents{
padding: 4px 2px!important;
}
.table th, .table td {
padding: 5px;
}
.blog_table td span a{
text-decoration: underline;
}
@media screen and (max-width: 640px) {
.article_wrap .article {
width: 99.1%;
}
.blog_flex_item img{
max-height: 200px;
}
} .blog .article .tit_h4{
background: #f3f3f3;
border-bottom: 2px solid #014190;
}
.blog .article .tit_h4 a{
color: #014190;
}
.single .blog_flex{
display: flex;
}
.single .blog_flex_item img{
border: 1px solid #00bfff;
}
.single .blog_flex_item2{
width: 80%;
padding: 0 1em;
}
.single .blog_details{
color: #00bfff;
border-bottom: 1px solid #00bfff;
font-size: 1.2em;
}
.single .blog_table{
width: 99%;
margin: 0 auto;
}
.single .blog_table .table td{
border: none;
border-bottom: 1px solid #ccc;
}
.blog_table td.gray-back:nth-child(1) {
white-space: nowrap;
}
.single .blog_table .table td p{
display: flex;
justify-content: space-between;
}
.single .blog_table .table td p span{
width: 50%;
}
.single .blog_table .table th{
background: #00bfff;
color: #fff;
}
.single .blog_table .table td p span:first-child {
font-weight: bold;
}
.single .blog_img{
display: flex;
justify-content: space-around;
margin: 1em 0px;
}
.single .blog_img img{
height: 220px;
width: 220px;
object-fit: cover;
}
.single .blog_img div{
position: relative;
width: fit-content;
display: flex;
justify-content: center;
}
.single .blog_img_before,.blog_img_after{
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0 1.2em;
}
.single .blog_img_before{
background: #555;
color: #fff;
}
.single .blog_img_after{
background: #014190;
color: #fff;
}
#bannerlist ul {
padding: 0;
display: inline-block;
}
#bannerlist ul li {
float: left;
margin-left: 12px;
}
#bannerlist ul li:first-child {
margin-left: 0;
}
#bannerlist ul:after {
content: "";
clear: both;
}
#bannerlist ul li a {
display: inline-block;
text-decoration: none;
color: #292b2c;
}
#bannerlist ul li a img {
width: 100%;
display: inline-block;
}
#bannerlist ul li a:hover {
filter: alpha(opacity = 90);
-moz-opacity: 0.9;
opacity: 0.9;
}
ul.index-virus5 li {
width: 17.1%;
margin-left: 0.2em;
}
.pc_hs{
display: table-cell;
}
.sp_hs{
display: none;
}
@media screen and (max-width: 768px) {
.single .blog_img div{
width: 220px;
}
.single .blog_table .table td{
width: 50%;
}
.single .blog_table .table td p{
flex-flow: column;
margin: 0;
}
.single .blog_table .table td p span{
width: 100%;
}  
#bannerlist {
display: none;
}
ul.virus5 li, ul.index-virus5 li {
width: 39.5%;
}
.pc_hs{
display: none;
}
.sp_hs{
display: table-cell;
}
} @media screen and (max-width: 650px) {
.blog_img {
flex-direction: column;
justify-content: center;
}
.blog_img div img{
width: 220px;
}
.blog_img div{
text-align: center;
}
.blog_img_after,
.blog_img_before{
left: 50%;
margin-left: -110px;
}
.blog_img > div:first-child{
position: relative;
}
.blog_img > div:first-child::before{
content: "▲";
font-size: 1em;
position: absolute;
bottom: 0;
left: 50%;
margin-left: -.5em;
transform: rotate(180deg);
color: #555;
}
.blog_img::before {
display: none;
}
}
.detail:target{
scroll-margin-top: 5rem;
}
.staff-message-section .staff-message{
position: relative;
aspect-ratio: 51 / 19;
flex-basis: 70%;
}
.staff-message-section .staff-message .staff-message-bg{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: fill;
z-index: -1;
}
.staff-message-section .staff-message > p{
padding: 2rem 6rem;   
display: block;
font-size: 1.8rem;
}
.staff-message-section .staff-profile{
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
flex-basis: 30%;
}
.staff-message-section .staff-profile .img-wrap{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
.staff-message-section .staff-profile .img-wrap img{
width: 65%;
}
.staff-message-section .staff-profile .staff-name-wrap{
position: relative;
}
.staff-message-section .staff-profile .staff-name-wrap .img-wrap{
position: relative
}
.staff-message-section .staff-profile .staff-name-wrap img{
position: absolute;
bottom: 0;
left: 0;
}
.staff-message-section .staff-profile .staff-name-wrap p{
position: absolute;
bottom: 1rem;
left: 50%;
transform: translate(-50%, 0);
font-size: 1.8rem;
font-weight: bold;
color: #fff;
}
@media screen and (max-width: 768px) {
.staff-message-section .staff-message{
flex-basis: 70%;
}
.staff-message-section .staff-message > p{
padding: .5rem 1rem;
font-size: 1.2rem;
}
.staff-message-section .staff-profile{
flex-basis: 30%;
}
.staff-message-section .staff-profile .img-wrap img{
}
.staff-message-section .staff-profile .staff-name-wrap p{
bottom: .1rem;
font-size: 1rem;
}
}
@media screen and (max-width: 768px) {
.yarpp-thumbnails-horizontal .yarpp-thumbnail{
max-width: calc(50% - 10px);
}
} .b-page-title__text .b-page-title__text__title,
.b-page-title__text .b-page-title__text__en{
font-weight: bold;
}
.b-page-title__text .b-page-title__text__title{
font-size: 1em
}
.b-page-title__text .b-page-title__text__en{
margin-top: 30px;
font-size: 1rem;
}
@media screen and (max-width: 850px) {
.b-page-title__text .b-page-title__text__en{
margin-top: 10px;
}
}  .b-column--single ul,
.b-column--single ol{
margin: 1em 0 1.5em 1.5em;
padding-left: 0;
}
.b-column--single ul,
.b-column--single ul li{
list-style-type: disc;
}
.b-column--single ol li{
list-style-type:decimal;
}
.b-column--single ul > li,
.b-column--single ol > li{
margin-bottom: .5em;
}
.b-column--single ul > li:last-child,
.b-column--single ol > li:last-child{
margin-bottom: 0;
} .b-column--single strong{
color: inherit;
}
.txt__red{
color: #d6442e;
font-weight: 700;
}
.txt__blue{
color: #0aaedb;
font-weight: 700;
}
.txt__green{
color: #428f4f;
font-weight: 700;
}
.txt__orange{
color: #e08300;
font-weight: 700;
}
.txt__yellow-line{
text-decoration: underline;
text-underline-offset: -0.2em;
text-decoration-thickness: 0.5em;
text-decoration-color: rgba(255, 228, 0, 0.4);
text-decoration-skip-ink: none;
} .txt__lightbulb {
position: relative;
margin: 1em 1em 1.5em 2em;
padding: 10px 10px 10px 50px;
border: 2px solid #dfdfdf;
background-color: #fffbf4;
border-radius: 6px;
}
.txt__lightbulb::before{
content: "";
position: absolute;
top: 12px;
left: 10px;
width: 28px;
height: 28px;
padding: 6px;
background-image: url(//hiroshima.hai-sui.com/cont/wp-content/themes/haisui_hiroshima/img/icon/icon_lightbulb.png);
background-size: 22px;
background-color: #ffbe00;
background-repeat: no-repeat;
background-position: center center;
border-radius: 100%;
}
@media screen and (max-width: 500px) {
.txt__lightbulb{
margin-left:1em;
}
} .txt__link,
.txt__link__outbound {
position: relative;
margin: 2.5em 1em 1.5em 2em;
padding: 10px;
background-color: #fffbf4;
border-radius: 0 6px 6px 6px;
}
.txt__link{
border: 2px solid #009fd9;
}
.txt__link__outbound {
border: 2px solid #3ec1b1;
}
.txt__link a,
.txt__link__outbound a{
position: relative;
display: inline-block;
margin-bottom: 10px;
padding-left: 20px;
border-radius: 0 6px 6px 6px;
}
.txt__link a,
.txt__link__outbound a{
color: #333;
}
.txt__link a:hover,
.txt__link__outbound a:hover {
color: #009fd9;
}
.txt__link a:last-child,
.txt__link__outbound a:last-child{
margin-bottom: 0;
}
.txt__link a::before,
.txt__link__outbound a::before{
content: "";
display: block;
position: absolute;
top: 12px;
left: 0;
width: 0;
height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
margin-right: 10px;
}
.txt__link a::before{
border-left: 10px solid #009fd9;
}
.txt__link__outbound a::before{
border-left: 10px solid #3ec1b1;
}
.txt__link span,
.txt__link__outbound span{
position: absolute;
top: -22px;
left: -2px;
box-sizing: border-box;
width: auto;
height: 22px;
line-height: 1.4;
padding: 3px 16px 3px 32px;
background-size: 16px;
background-repeat: no-repeat;
background-position: 8px center;
border-radius: 6px 6px 0 0;
font-size: 12px;
color: #fff;
}
.txt__link span{
background-image: url(//hiroshima.hai-sui.com/cont/wp-content/themes/haisui_hiroshima/img/icon/icon_link.png);
background-color: #009fd9;
}
.txt__link__outbound span{
background-image: url(//hiroshima.hai-sui.com/cont/wp-content/themes/haisui_hiroshima/img/icon/icon_outbound.png);
background-color: #3ec1b1;
}
@media screen and (max-width: 768px) {
.txt__link,
.txt__link__outbound{
margin-left:1em;
}
} .b-column--single blockquote{
position: relative;
margin: 2em 1em;
padding: 20px 20px 20px 70px;
background-color: #f7f7f7;
}
.b-column--single blockquote::before{
content: "";
position: absolute;
top: 10px;
left: 10px;
display: block;
width: 50px;
height: 50px;
background-image: url(//hiroshima.hai-sui.com/cont/wp-content/themes/haisui_hiroshima/img/icon/icon_quote.png);
background-size: contain;
transform: rotate(180deg)
}
@media screen and (max-width: 768px) {
.b-column--single blockquote{
margin: 2em 1em;
padding: 30px 20px 10px 20px;
background-color: #f7f7f7;
}
.b-column--single blockquote::before{
top: -15px;
left: 5px;
width: 40px;
height: 40px;
}
} .b-column--single table{
margin: 1em;
padding: 0;
word-break: break-all;
word-wrap: break-word;
border-collapse:collapse;
border-spacing: 0;
}
.b-column--single table th,
.b-column--single table td{
padding: .5em .75em;
vertical-align: top;
border: 1px solid #ddd;
}
.b-column--single table th{
background: #f7f7f7;
border: 1px solid #ddd;
color: #505050;
text-align: center;
} @media screen and (max-width: 500px) {
.b-column--single .table__scroll::before{
content: "※横にスクロールできます。";
font-size: 12px;
color: #999
}
.b-column--single .table__scroll{
overflow-x: auto;
}
.b-column--single .table__scroll table{
width: 600px;
margin: 1em 0;
}
} .b-column--single .w05{ width: 5%; }
.b-column--single .w10{ width: 10%; }
.b-column--single .w15{ width: 15%; }
.b-column--single .w20{ width: 20%; }
.b-column--single .w25{ width: 25%; }
.b-column--single .w30{ width: 30%; }
.b-column--single .w35{ width: 35%; }
.b-column--single .w40{ width: 40%; }
.b-column--single .w45{ width: 45%; }
.b-column--single .w50{ width: 50%; }
.b-column--single .w55{ width: 55%; }
.b-column--single .w60{ width: 60%; }
.b-column--single .w65{ width: 65%; }
.b-column--single .w70{ width: 70%; }
.b-column--single .w75{ width: 75%; }
.b-column--single .w80{ width: 80%; }
.b-column--single .w85{ width: 85%; }
.b-column--single .w90{ width: 90%; }
.b-column--single .w95{ width: 95%; }
.b-column--single .w100{ width: 100%; } .b-column--single .column__ol,
.b-column--single .column__ul{
margin: 1em 1em 1.5em;
padding: 20px;
list-style: none;
border: 2px solid #dfdfdf;
border-radius: 6px;
}
.b-column--single .column__ol{
counter-reset:column__ol;
}
.b-column--single .column__ol li,
.b-column--single .column__ul li{
position: relative;
margin-left: 0;
list-style: none;
}
.b-column--single .column__ol li{
margin-bottom: 1em;
padding-left: 30px;
}
.b-column--single .column__ul li{
margin-bottom: .5em;
padding-left: 20px;
}
.b-column--single .column__ol li:last-child,
.b-column--single .column__ul li:last-child{
margin-bottom: 0;
}
.b-column--single .column__ol li::before{
counter-increment: column__ol;
content: counter(column__ol);
position: absolute;
top: 5px;
left: 0;
width: 20px;
height: 20px;
line-height: 20px;
background: #acacac;
text-align: center;
color: #fff;
font-size: 14px;
border-radius: 100%;
}
.b-column--single .column__ul li::before{
content: "";
position: absolute;
top: 12px;
left: 0;
width: 10px;
height: 10px;
background: #acacac;
border-radius: 100%;
}
@media screen and (max-width: 500px) {
.b-column--single .column__ul li::before{
top: 9px;
}
}
.b-column--single h5{
padding-top: 1em;
font-size: 1.3rem;
}
@media screen and (max-width: 650px){
.b-column--single h5{
padding-top: 0.75em;
font-size: 1.2rem;
line-height:b1.2;
margin-bottom: .5em;
}
}
@media screen and (max-width: 500px){
.b-column--single h5{
padding-top: 0.5em;
font-size: 1rem;
}
} .b-support__list li{
padding: 0;
}
.b-support__list li a{
padding: 0.5em 1em;
}
@media screen and (max-width: 650px) {
.b-support__list li a{
padding: 0.5rem;
}
} .video-thumb__wrap {
display: block;
position: relative;
max-width: 650px;
margin: 2em auto;
}
.video-thumb__wrap::before,
.video-thumb__wrap::after{
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.video-thumb__wrap::before{
width: 80px;
aspect-ratio: 1; 
background-color: rgb(0 0 0 / .5);
border-radius: 50%;
}
.video-thumb__wrap::after{
margin-left: 5px;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 32px solid #fff;
}
@media screen and (max-width: 768px) {
.video-thumb__wrap::before{
width: 60px;
}
.video-thumb__wrap::after{
margin-left: 3px;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 24px solid #fff;
}
} li.b-hiroshima>a{
position: relative;
display: block;
background-color: #009fd9;
}
.b-area-list--area > li.b-hiroshima > a::after{
content: url(//hiroshima.hai-sui.com/cont/wp-content/themes/haisui_hiroshima/css/../img/common/yellow-arrow.png);
display: block;
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-45%);
transition: all .3s;
}
@media screen and (max-width: 500px){
.b-area-list--area > li.b-hiroshima > a:after {
transform: translateY(-30%);
}
}
.nav-box-to-ward .b-area-list li {
background-color: transparent;
}
.nav-box-to-ward .b-area-list--area{
margin-top: 10px;
}