html {
box-sizing: border-box;
-webkit-text-size-adjust: 100%;
word-break: normal;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4
}
*,
::before,
::after {
background-repeat: no-repeat;
box-sizing: inherit
}
::before,
::after {
text-decoration: inherit;
vertical-align: inherit
}
* {
padding: 0;
margin: 0
}
hr {
overflow: visible;
height: 0
}
details,
main {
display: block
}
summary {
display: list-item
}
small {
font-size: 80%
}
[hidden] {
display: none
}
abbr[title] {
border-bottom: none;
text-decoration: underline;
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted
}
a {
background-color: rgba(0, 0, 0, 0)
}
a:active,
a:hover {
outline-width: 0
}
code,
kbd,
pre,
samp {
font-family: monospace, monospace
}
pre {
font-size: 1em
}
b,
strong {
font-weight: bolder
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline
}
sub {
bottom: -0.25em
}
sup {
top: -0.5em
}
input {
border-radius: 0
}
[disabled] {
cursor: default
}
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
height: auto
}
[type=search] {
-webkit-appearance: textfield;
outline-offset: -2px
}
[type=search]::-webkit-search-decoration {
-webkit-appearance: none
}
textarea {
overflow: auto;
resize: vertical
}
button,
input,
optgroup,
select,
textarea {
font: inherit
}
optgroup {
font-weight: bold
}
button {
overflow: visible
}
button,
select {
text-transform: none
}
button,
[type=button],
[type=reset],
[type=submit],
[role=button] {
cursor: pointer;
color: inherit
}
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
border-style: none;
padding: 0
}
button:-moz-focusring,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
outline: 1px dotted ButtonText
}
button,
html [type=button],
[type=reset],
[type=submit] {
-webkit-appearance: button
}
button,
input,
select,
textarea {
background-color: rgba(0, 0, 0, 0);
border-style: none
}
select::-ms-expand {
display: none
}
select::-ms-value {
color: currentColor
}
legend {
border: 0;
color: inherit;
display: table;
max-width: 100%;
white-space: normal;
max-width: 100%
}
::-webkit-file-upload-button {
-webkit-appearance: button;
color: inherit;
font: inherit
}
img {
border-style: none
}
progress {
vertical-align: baseline
}
@media screen {
[hidden~=screen] {
display: inherit
}
[hidden~=screen]:not(:active):not(:focus):not(:target) {
position: absolute !important;
clip: rect(0 0 0 0) !important
}
}
[aria-busy=true] {
cursor: progress
}
[aria-controls] {
cursor: pointer
}
[aria-disabled] {
cursor: default
}
html {
font-size: 62.5%;
font-family: serif;
text-align: center;
overflow-y: scroll
}
body {
font-size: 1.4rem;
font-style: normal;
color: #231815;
line-height: 2;
font-weight: 500;
counter-reset: num;
letter-spacing: .1em
}
@media screen and (max-width: 767px) {
body {
font-size: 1.2rem;
letter-spacing: .05em
}
}
table {
border-collapse: collapse;
border-spacing: 0;
table-layout: fixed
}
img {
vertical-align: bottom;
max-width: 100%;
height: auto;
image-rendering: -webkit-optimize-contrast
}
a {
color: #231815;
transition: opacity .8s;
text-decoration: underline
}
a:hover {
opacity: .5;
text-decoration: none
}
@media screen and (max-width: 767px) {
a:hover {
opacity: 1
}
}
ul,
ol {
list-style: none;
counter-reset: num
}
blockquote {
position: relative;
padding: 10px 15px 10px 50px;
box-sizing: border-box;
font-style: italic;
background: #efefef;
color: #555
}
blockquote::before {
display: inline-block;
position: absolute;
top: 10px;
left: -3px;
content: "“";
font-family: serif;
color: #cfcfcf;
font-size: 90px;
line-height: 1
}
blockquote p {
padding: 0;
margin: 10px 0;
line-height: 1.7
}
blockquote cite {
display: block;
text-align: right;
color: #888;
font-size: .9em
}
@media screen and (min-width: 768px) {
.pcNon {
display: none
}
}
@media screen and (max-width: 767px) {
.spNon {
display: none
}
}
#wpadminbar {
position: fixed;
z-index: 99999
}
.alignright {
display: block;
margin: 0 0 1em 2em;
float: right;
max-width: 60%
}
.alignleft {
display: block;
margin: 0 2em 1em 0;
float: left;
max-width: 60%
}
.aligncenter {
display: block;
margin: 0 auto 1em
}
.alignnone {
display: block;
margin-bottom: 1em
}
.fancybox-button--zoom,
.fancybox-button--play {
display: none !important
}
.spScrollNon {
position: fixed;
width: 100%;
height: 100%;
left: 0;
right: 0
}
.compensate-for-scrollbar {
margin-right: 0 !important
}
.fadeIn_up {
opacity: 0;
transform: translate(0, 18px);
transition: transform 0.8s, opacity 1.0s
}
.fadeIn_up.is-show {
transform: translate(0, 0);
opacity: 1
}
#sb_instagram .sbi_photo {
background-size: cover;
background-position: center center
}
#sb_instagram .sbi_photo img {
display: none
}
.topSectionTitle {
text-align: center;
line-height: 1.5
}
.topSectionTitle__en {
display: block;
font-family: effra, sans-serif;
font-size: 2.8rem;
font-weight: 400;
letter-spacing: .3em
}
@media screen and (max-width: 767px) {
.topSectionTitle__en {
font-size: 1.6rem
}
}
.topSectionTitle__ruby {
display: block;
font-size: 1.6rem;
font-weight: 400;
margin-top: .5em
}
@media screen and (max-width: 767px) {
.topSectionTitle__ruby {
font-size: 2.4rem;
margin-top: .3em
}
}
.noImg {
display: block;
border: 1px solid #908b89;
background: url(//www.e-sumai.org/wp-content/themes/livia/images/common/logo_b.svg) no-repeat center center/50% auto #fff
}
.iconNew {
display: inline-block;
font-family: YakuHanJPs_Noto, "Aoto Gothic Bold", sans-serif;
font-size: 1rem;
line-height: 1;
position: absolute;
top: 0;
left: 0;
color: #fff;
padding: .4em .6em;
z-index: 2;
background: #054e3c
}
@media screen and (max-width: 767px) {
.iconNew {
font-size: .8em
}
}
.btn01 {
width: 100%;
max-width: 270px;
display: block;
text-decoration: none;
position: relative;
font-family: YakuHanJPs_Noto, "Aoto Gothic Light", sans-serif;
font-size: 1.4rem;
padding: .5em 1.5em;
text-align: center;
margin: 40px auto 0;
letter-spacing: .2em;
cursor: pointer;
overflow: hidden;
transition: color .4s ease-out;
z-index: 1
}
@media screen and (max-width: 767px) {
.btn01 {
margin-top: 20px
}
}
.btn01::before {
content: "";
display: block;
background: #231815;
bottom: calc(50% - .35em);
left: 0;
width: 100%;
height: 1px;
position: absolute;
transition: .4s ease-out
}
.btn01:hover {
opacity: 1;
color: #fff
}
.btn01:hover::before {
height: 100%;
bottom: 0;
z-index: -1
}
.title01 {
text-align: left;
font-size: 2rem;
font-weight: 300;
line-height: 1.6;
letter-spacing: .2em;
border-bottom: 1px solid #908b89;
padding-bottom: .3em
}
@media screen and (max-width: 767px) {
.title01 {
text-align: center;
font-size: 1.8rem;
letter-spacing: .05em
}
}
.title01--bold {
font-size: 3rem;
letter-spacing: 0;
display: inline-block;
margin-right: .7em;
vertical-align: bottom;
font-weight: 300;
line-height: 1.2
}
@media screen and (max-width: 767px) {
.title01--bold {
font-size: 2.6rem;
margin-right: .4em
}
}
.title02 {
text-align: left;
font-size: 1.6rem;
font-weight: 300;
line-height: 1.5;
padding-left: 1.2em;
position: relative;
letter-spacing: .16em
}
.title02::before {
content: "■";
position: absolute;
top: 0;
left: 0
}
.wrapper {
position: relative;
overflow: hidden
}
.header {
width: 100%;
height: 90px;
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 9999;
padding-left: 40px;
transition: background .8s
}
@media screen and (max-width: 767px) {
.header {
padding-left: 20px;
height: 50px
}
}
.header--bgWhite,
.header--child {
background: #fff
}
.header__logo {
display: block
}
.header__logo:hover {
opacity: 1
}
.header__logoImg {
display: block;
max-width: 100vw;
}
.header__navi {
margin-left: auto;
display: flex;
justify-content: flex-end;
align-items: center;
}
@media screen and (max-width: 767px) {
.header__navi {
display: none
}
}
.header__navi--open {
width: 100%;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 999;
background: #fff;
justify-content: center;
align-items: center;
padding: 60px 0;
overflow-y: auto
}
@media screen and (max-width: 767px) {
.header__navi--open {
background: #fff;
padding: 40px 0
}
}
.header__naviInner {
display: flex;
justify-content: flex-end;
align-items: center
}
.header__navi--open .header__naviInner {
display: block;
width: 100%;
max-width: 400px;
margin: 0 auto
}
@media screen and (max-width: 767px) {
.header__navi--open .header__naviInner {
padding: 0 30px
}
}
.header__naviHeader {
display: none
}
.header__navi--open .header__naviHeader {
display: block
}
.header__naviHeaderLogo {
display: inline-block;
text-decoration: none
}
.header__naviHeaderLogo:hover {
opacity: 1
}
.header__naviHeaderLogoImg {
display: block;
height: 40px;
margin: 0 auto
}
@media screen and (max-width: 767px) {
.header__naviHeaderLogoImg {
height: 34px
}
}
.header__naviHeaderTel {
margin-top: 20px
}
@media screen and (max-width: 767px) {
.header__naviHeaderTel {
margin-top: 10px
}
}
.header__naviHeaderTelLink {
display: block;
font-size: 1.4rem;
line-height: 1;
text-decoration: none;
letter-spacing: .2em
}
.header__naviHeaderTelNumber {
display: inline-block;
font-size: 3.2rem;
letter-spacing: .2em
}
@media screen and (max-width: 767px) {
.header__naviHeaderTelNumber {
font-size: 2.8rem;
letter-spacing: .1em
}
}
.header__naviHeaderTelNumber::before {
display: inline-block;
content: "";
width: 36px;
height: 22px;
background: url(//www.e-sumai.org/wp-content/themes/livia/images/common/logo_freedial_b.svg) no-repeat center center/contain;
margin-right: .3em
}
.header__naviHeaderTelTime {
font-size: 1.2rem;
line-height: 1.5;
margin-top: 1em;
letter-spacing: .2em
}
@media screen and (max-width: 767px) {
.header__naviHeaderTelTime {
letter-spacing: .1em
}
}
.header__naviContactBtn {
flex-shrink: 0;
order: 2;
display: block;
color: #fff;
text-decoration: none;
border: 1px solid #fff;
font-size: 1.2rem;
left: .1em;
line-height: 1.5;
padding: .2em .8em .4em;
transition: color .8s, background .8s;
margin-left: 12px
}
.header--bgWhite .header__naviContactBtn,
.header--child .header__naviContactBtn {
border-color: #231815;
color: #231815
}
.header__navi--open .header__naviContactBtn {
font-size: 1.6rem;
display: block;
color: #231815;
border-color: #231815;
width: 100%;
max-width: 250px;
margin: 30px auto 0;
padding: .2em 1em .4em;
letter-spacing: .2em
}
@media screen and (max-width: 767px) {
.header__navi--open .header__naviContactBtn {
margin-top: 15px
}
}
.header__naviContactBtn:hover {
opacity: 1;
color: #fff;
background: rgba(113, 112, 113, .9)
}
.header__naviList {
order: 1;
flex-flow: row nowrap;
display: flex;
justify-content: flex-end;
align-items: center
}
.header__navi--open .header__naviList {
display: block;
margin-top: 30px
}
.header__naviItem {
width: 120px;
position: relative
}
.header__navi--open .header__naviItem {
width: 100%;
border-top: 1px dotted #231815
}
.header__navi--open .header__naviItem:last-child {
border-bottom: 1px dotted #231815
}
.header__navi--open .header__naviItem--pc {
display: none
}
.header__naviItem--sp {
display: none
}
.header__navi--open .header__naviItem--sp {
display: block
}
.header__naviLink {
display: block;
padding: 1em;
font-size: 1.2rem;
line-height: 1.5;
letter-spacing: .1em;
color: #fff;
position: relative;
min-height: 80px;
text-decoration: none
}
.header--bgWhite .header__naviLink,
.header--child .header__naviLink {
color: #231815
}
.header__navi--open .header__naviLink {
padding: 1.2em;
font-size: 1.4rem;
color: #231815;
min-height: initial;
padding: 1em 2em
}
.header__navi--open .header__naviLink::after {
content: "＞";
display: block;
transform: translateY(-50%);
position: absolute;
top: 50%;
right: 15px;
transition: .5s;
font-size: 1.2rem;
color: #908b89
}
.header__naviLink--subMenu {
cursor: pointer
}
.header__navi--open .header__naviLink--subMenu::after {
transform: rotate(-90deg) translateY(0%);
top: 40%
}
.header__naviLink--subMenu.header__naviLink--open::after {
transform: rotate(90deg) translateY(0%);
top: 40%
}
.header__naviLink:hover {
opacity: 1
}
.header__naviLinkEn {
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: opacity .8s;
padding: .2em .8em .1em;
white-space: nowrap;
font-family: effra, sans-serif;
font-weight: 400;
letter-spacing: .1em
}
.header__naviLink:hover .header__naviLinkEn {
opacity: 0
}
.header__navi--open .header__naviLinkEn {
display: none
}
.header__naviLinkText {
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: opacity .8s;
padding: .2em .8em .1em;
white-space: nowrap;
opacity: 0
}
.header__naviLink:hover .header__naviLinkText {
opacity: 1;
background: rgba(113, 112, 113, .9);
color: #fff
}
.header__navi--open .header__naviLink:hover .header__naviLinkText {
opacity: .5;
background: rgba(0, 0, 0, 0);
color: #231815
}
.header__navi--open .header__naviLinkText {
opacity: 1;
transform: none;
position: static;
padding: 0
}
.header__naviSubList {
display: none;
font-size: 1.2rem;
position: absolute;
top: calc(50% + 1.5em);
left: 50%;
transform: translateX(-50%);
transition: background .8s
}
.header--bgWhite .header__naviSubList,
.header--child .header__naviSubList {
background: #fff;
padding-bottom: 10px
}
.header__navi--open .header__naviSubList {
position: static;
transform: none;
padding-bottom: 0;
margin-bottom: 20px !important;
display: block
}
.header__naviSubItem+.header__naviSubItem {
margin-top: .8em
}
.header__naviSubLink {
display: block;
line-height: 1.5;
text-decoration: none;
white-space: nowrap;
transition: background .8s, opacity .8s;
color: #fff;
padding: .2em .8em .1em
}
.header--bgWhite .header__naviSubLink,
.header--child .header__naviSubLink {
color: #231815
}
.header__navi--open .header__naviSubLink {
color: #231815
}
.header__naviSubLink:hover {
opacity: 1;
color: #fff;
background: rgba(113, 112, 113, .9)
}
.header__navi--open .header__naviSubLink:hover {
opacity: .5;
background-color: rgba(0, 0, 0, 0);
color: #231815
}
.header__naviSns {
width: 100%;
display: none;
justify-content: center;
margin-top: 20px
}
.header__navi--open .header__naviSns {
display: flex
}
.header__naviSnsItem {
font-size: 3rem;
line-height: 1;
letter-spacing: 0
}
.header__naviSnsItem+.header__naviSnsItem {
margin-left: 20px
}
.header__naviSnsLink {
display: block;
text-decoration: none;
color: #231815
}
.header__spToggleBtn {
width: 80px;
height: 80px;
position: relative;
cursor: pointer;
transition: opacity .5s;
z-index: 999;
margin-left: 10px
}
@media screen and (max-width: 767px) {
.header__spToggleBtn {
width: 50px;
height: 50px
}
}
.header__spToggleBtn:hover {
opacity: .5
}
@media screen and (max-width: 767px) {
.header__spToggleBtn:hover {
opacity: 1
}
}
.header__spToggleBtnElement {
display: block;
height: 1px;
width: 30px;
background: #fff;
position: absolute;
right: 0;
left: 0;
margin: 0 auto;
transition: .5s ease-in-out
}
@media screen and (max-width: 767px) {
.header__spToggleBtnElement {
width: 20px
}
}
.header--bgWhite .header__spToggleBtnElement,
.header--child .header__spToggleBtnElement {
background: #231815
}
.header__spToggleBtnElement:nth-child(1) {
top: 30px
}
@media screen and (max-width: 767px) {
.header__spToggleBtnElement:nth-child(1) {
top: calc(50% - 8px)
}
}
.header__spToggleBtnElement:nth-child(2) {
top: 40px
}
@media screen and (max-width: 767px) {
.header__spToggleBtnElement:nth-child(2) {
top: 50%
}
}
.header__spToggleBtnElement:nth-child(3) {
top: 50px
}
@media screen and (max-width: 767px) {
.header__spToggleBtnElement:nth-child(3) {
top: calc(50% + 8px)
}
}
.header__spToggleBtn--open .header__spToggleBtnElement {
background: #231815
}
.header__spToggleBtn--open .header__spToggleBtnElement:nth-child(1) {
top: 50%;
transform: rotate(45deg)
}
.header__spToggleBtn--open .header__spToggleBtnElement:nth-child(2) {
opacity: 0
}
.header__spToggleBtn--open .header__spToggleBtnElement:nth-child(3) {
top: 50%;
transform: rotate(-45deg)
}
.topMainSection {
position: relative;
overflow: hidden
}
.topMainSection::after {
content: "";
width: 100%;
height: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
z-index: 98;
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0.18));
pointer-events: none
}
.topMainSection__slide {
display: block;
text-decoration: none
}
.topMainSection__slide:hover {
opacity: 1
}
@media screen and (max-width: 767px) {
.topMainSection__img--pc {
display: none
}
}
@media screen and (min-width: 768px) {
.topMainSection__img--sp {
display: none
}
}
.topMainSection__slideImg {
padding-top: 100vh
}
.topMainSection__slideMovie {
padding-top: 100vh;
position: relative;
overflow: hidden
}
.topMainSection__slideMovieFile {
position: absolute;
left: 50%;
top: 50%;
transform: translateY(-50%) translateX(-50%);
min-width: 100%;
min-height: 100%;
z-index: 0
}
.topMainSection__title {
font-family: serif;
font-size: 3.2rem;
font-weight: 400;
line-height: 1.6;
letter-spacing: .3em;
position: absolute;
top: 50%;
left: 50%;
color: #fff;
z-index: 99;
text-align: left;
transform: translate(-50%, -50%);
pointer-events: none;
white-space: nowrap
}
@media screen and (max-width: 767px) {
.topMainSection__title {
font-size: 2.4rem
}
}
.topMainSection__mainTitle {
font-size: 1.6rem;
line-height: 1.6;
color: #fff;
position: absolute;
bottom: 20px;
left: 30px;
z-index: 99;
text-align: left;
letter-spacing: .2em
}
@media screen and (max-width: 767px) {
.topMainSection__mainTitle {
font-size: 1.2rem;
bottom: 15px;
left: 20px
}
}
.topInfo {
background: #e5edeb;
padding: 40px;
}
@media screen and (max-width: 767px) {
.topInfo {
padding: 0 20px
}
}
.topInfo__inner {
width: 100%;
max-width: 1200px;
position: relative;
padding: 40px 0;
margin: 0 auto
}
.topInfo__list {
width: 100%;
margin-top: 40px;
display: flex;
text-align: left
}
@media screen and (max-width: 767px) {
.topInfo__list {
margin-top: 30px; flex-wrap: wrap;
justify-content: space-between;
}
.topInfo__list .topInfo__item {
width: 48%;
text-align: center;
margin-top: 20px;
}
}
.topInfo__item {
width: 22.25%;
margin: 5% 0 0 3.6666666667%
}
@media screen and (max-width: 767px) {
.topInfo__item {
width: 100%;
margin: 20px 0 0
}
}
.topInfo__item:nth-child(4n+1) {
margin-left: 0
}
.topInfo__item:nth-child(-n+4) {
margin-top: 0
}
@media screen and (max-width: 767px) {
.topInfo__item:nth-child(-n+4) {
margin-top: 20px
}
}
@media screen and (max-width: 767px) {
.topInfo__item:first-child {
margin-top: 20px
}
}
.topInfo__link {
display: block;
text-decoration: none
}
@media screen and (max-width: 767px) {
.topInfo__link {
display: flex;
justify-content: space-between
}
}
@media screen and (max-width: 767px) {
.topInfo__imgBox {
width: 100%
}
}
.topInfo__img {
display: block;
transition: opacity .8s
}
.topInfo__noImg {
border: none;
padding-top: 66.6666666667%
}
.topInfo__textBox {
margin-top: 10px;
font-family: YakuHanJPs_Noto, "Aoto Gothic Light", sans-serif
}
@media screen and (max-width: 767px) {
.topInfo__textBox {
margin: 1rem auto;
width: 100%
}
}
.topInfo__summary {
line-height: 1;
display: flex;
align-items: center;
min-height: 18px
}
@media screen and (max-width: 767px) {
.topInfo__summary {
display: unset;
}
}
.topInfo__iconNew {
position: static;
margin-right: .8em
}
.topInfo__time {
display: inline-block;
font-size: 1.2rem;
line-height: 1
}
.topInfo__title {
font-size: 1.2rem;
line-height: 1.6;
margin-top: .5em;
font-weight: 300;
font-family: serif
}
.topConcept {
background: url(//www.e-sumai.org/wp-content/themes/livia/images/top/concept_bg.webp) no-repeat center center/cover
}
.topConcept__inner {
width: 100%;
max-width: 1280px;
padding: 60px 40px;
margin: 0 auto
}
@media screen and (max-width: 767px) {
.topConcept__inner {
padding: 40px 0
}
}
.topConcept__img {
display: block;
margin-top: 50px
}
@media screen and (max-width: 767px) {
.topConcept__img {
display: none;
margin-top: 30px
}
}
.topConcept__img--sp {
display: none
}
@media screen and (max-width: 767px) {
.topConcept__img--sp {
display: block
}
}
.topConcept__mainTitle {
font-size: 3.6rem;
font-weight: 400;
line-height: 1.8;
margin-top: 70px;
letter-spacing: .3em
}
@media screen and (max-width: 767px) {
.topConcept__mainTitle {
font-size: 2.4rem;
margin-top: 40px
}
}
.topConcept__text {
line-height: 3;
letter-spacing: .1em;
margin-top: 2em;
padding: 0px 24px;
}
@media screen and (max-width: 767px) {
.topConcept__text {
letter-spacing: .1em;
padding 0px 24px;
}
}
.topSpecialty {
background: #e5edeb;
padding: 60px 40px 80px
}
@media screen and (max-width: 767px) {
.topSpecialty {
padding: 60px 20px 40px
}
}
.topSpecialty__inner {
width: 100%;
max-width: 1000px;
margin: 0 auto;
text-align: left
}
@media screen and (max-width: 767px) {
.topSpecialty__inner {
text-align: center
}
}
.topSpecialty__inner::after {
content: "";
display: block;
clear: both
}
.topSpecialty__mainTitle {
width: 50%;
font-size: 2rem;
font-weight: 700;
line-height: 1.6;
letter-spacing: .2em;
padding-top: .8em;
float: right;
clear: both;
margin-top: 60px
}
@media screen and (max-width: 767px) {
.topSpecialty__mainTitle {
float: none;
width: 100%;
font-size: 2rem;
margin-top: .3em;
padding-top: 0
}
}
.topSpecialty__img {
display: block;
width: 42.7%;
float: left;
margin-top: 60px
}
@media screen and (max-width: 767px) {
.topSpecialty__img {
width: 100%;
float: none;
margin-top: 60px
}
}
.topSpecialty__text {
width: 50%;
letter-spacing: .2em;
margin-top: 2em;
float: right;
line-height: 2.2
}
@media screen and (max-width: 767px) {
.topSpecialty__text {
width: 100%;
float: none;
letter-spacing: .1em
}
}
.topSpecialty__btn {
float: right;
margin: 70px 0 0
}
@media screen and (max-width: 767px) {
.topSpecialty__btn {
float: none;
margin: 20px auto 0
}
}
.topPhilosophy {
width: 100%;
max-width: 1080px;
margin: 80px auto 0;
padding: 0 40px;
text-align: left
}
@media screen and (max-width: 767px) {
.topPhilosophy {
margin-top: 60px;
padding: 0 20px;
text-align: center
}
}
.topPhilosophy::after {
content: "";
display: block;
clear: both
}
.topPhilosophy__titleBox {
width: 50%;
float: left;
padding-left: 7%
}
@media screen and (max-width: 767px) {
.topPhilosophy__titleBox {
width: 100%;
float: none;
position: relative
}
}
.topPhilosophy__mainTitle {
margin-top: 50px;
font-size: 2rem;
line-height: 1.6;
letter-spacing: .2em;
font-weight: 700
}
@media screen and (max-width: 767px) {
.topPhilosophy__mainTitle {
font-size: 2.4rem;
margin-top: .3em
}
}
.topPhilosophy__img {
display: block;
width: 35.3%;
float: right
}
@media screen and (max-width: 767px) {
.topPhilosophy__img {
width: 100%;
float: none;
margin-top: 40px;
display: none
}
}
.topPhilosophy__img--sp {
display: none
}
@media screen and (max-width: 767px) {
.topPhilosophy__img--sp {
display: block
}
}
.topPhilosophy__text {
width: 50%;
margin-top: 2em;
padding-left: 7%;
line-height: 2.2;
float: left;
letter-spacing: .2em
}
@media screen and (max-width: 767px) {
.topPhilosophy__text {
width: 100%;
float: none;
margin-top: 2em;
letter-spacing: .1em
}
}
.topPhilosophy__list {
width: 50%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
float: left;
margin-top: 55px;
text-align: center;
padding-left: 7%
}
@media screen and (max-width: 767px) {
.topPhilosophy__list {
width: 100%;
float: none;
margin-top: 30px;
padding-left: 0
}
}
.topPhilosophy__item {
width: 48.5%;
border-bottom: 1px solid #231815
}
.topPhilosophy__link {
display: block;
text-decoration: none;
padding: .5em 1em;
transition: .8s;
font-size: 1.3rem;
font-family: YakuHanJPs_Noto, "Aoto Gothic Light", sans-serif
}
@media screen and (max-width: 767px) {
.topPhilosophy__link {
padding: .5em 0;
font-size: 1.2rem
}
}
.topPhilosophy__link:hover {
opacity: 1;
background: #cddbd8
}
.consultationBanner {
margin-top: 80px;
margin-bottom: 80px;
}
@media screen and (max-width: 767px) {
.consultationBanner {
margin-top: 40px
}
}
.consultationBanner__link {
margin-top: 38px;
color: white;
background: none;
border-radius: 36px;
background-color: #0cbd94;
padding: 24px;
position: relative;
display: block;
text-decoration: none;
text-align: center;
font-size: 2.0rem;
font-family: YakuHanJPs_Noto, "Aoto Gothic Light", sans-serif;
box-sizing: border-box;
width: 100%;
}
@media screen and (max-width: 767px) {
.consultationBanner__link {
margin-top: 40px;
padding: 0 20px;
background-image: url(//www.e-sumai.org/wp-content/themes/livia/images/common/consultation_bg_sp.webp)
}
}
.consultationBanner__link:hover {
opacity: .5
}
@media screen and (max-width: 767px) {
.consultationBanner__link:hover {
opacity: 1
}
}
@media screen and (max-width: 767px) {
.consultationBanner__link::before {
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 30%, rgba(0, 0, 0, 0) 70%)
}
}
.consultationBanner__inner {
width: 100%;
max-width: 1000px;
border-top: 1px solid #AAAAAA;
border-bottom: 1px solid #AAAAAA;
margin: 24px auto;
padding: 60px 0;
text-align: left;
color: #333333;
position: relative;
z-index: 1;
}
.consultationBanner__inner::after {
display: inline-block;
margin-left: 12px;
content: '>';
}
@media screen and (max-width: 767px) {
.consultationBanner__inner {
padding: 40px 0 130px;
text-align: center
}
}
.consultationBanner__textBox {
display: flex;
justify-content: center;
margin-top: 30px
}
@media screen and (max-width: 767px) {
.consultationBanner__textBox {
display: block
}
}
.consultationBanner__catch {
text-align: center;
font-size: 1.2rem;
letter-spacing: .1em;
line-height: 1.6
}
.consultationBanner__mainTitle {
font-size: 2.6rem;
font-weight: 400;
margin-top: .8em;
letter-spacing: .1em;
line-height: 1.6
}
@media screen and (max-width: 767px) {
.consultationBanner__mainTitle {
font-size: 2.2rem;
margin-top: .3em
}
}
.consultationBanner__btn {
margin: 30px auto 0 0;
color: #fff
}
@media screen and (max-width: 767px) {
.consultationBanner__btn {
margin: 10px auto 0;
max-width: 230px
}
}
.consultationBanner:hover .consultationBanner__btn {
color: #231815
}
.consultationBanner__btn::before {
background: #fff
}
.consultationBanner:hover .consultationBanner__btn::before {
height: 100%;
bottom: 0;
z-index: -1
}
.topWorks {
padding: 0 40px;
margin-top: 80px
}
@media screen and (max-width: 767px) {
.topWorks {
margin-top: 60px;
padding: 0 20px
}
}
.topWorks__inner {
width: 100%;
max-width: 1200px;
margin: 0 auto;
position: relative
}
@media screen and (max-width: 767px) {
.topWorks__inner {
text-align: right
}
}
.topWorks__lineTitle {
position: absolute;
top: 0;
right: 8.3333333333%
}
@media screen and (max-width: 767px) {
.topWorks__lineTitle {
position: relative;
right: -20px
}
}
.topWorks__mainTitle {
font-size: 1.8rem;
font-weight: 300;
line-height: 1.6;
letter-spacing: .2em
}
@media screen and (max-width: 767px) {
.topWorks__mainTitle {
margin-top: 1em;
text-align: center
}
}
.topInterview {
background: #e5edeb;
padding: 80px 40px;
margin-top: 80px
}
@media screen and (max-width: 767px) {
.topInterview {
padding: 40px 20px;
margin-top: 40px
}
}
.topInterview__inner {
width: 100%;
max-width: 1200px;
margin: 0 auto
}
.topInterview__mainTitle {
font-size: 1.8rem;
font-weight: 300;
line-height: 1.6;
margin-top: 50px;
letter-spacing: .2em
}
@media screen and (max-width: 767px) {
.topInterview__mainTitle {
margin-top: 1em
}
}
.topInterview__list {
width: 100%;
display: flex;
margin-top: 60px;
text-align: left
}
@media screen and (max-width: 767px) {
.topInterview__list { margin-top: 20px;
flex-wrap: wrap;
justify-content: space-between;
}
.topInterview__list .topInterview__item {
width: 100%;
margin-top: 20px;
}
}
.topInterview__item {
width: 22.25%;
margin: 5% 0 0 3.6666666667%
}
@media screen and (max-width: 767px) {
.topInterview__item {
width: 100%;
margin: 20px 0 0
}
}
.topInterview__item:nth-child(4n+1) {
margin-left: 0
}
.topInterview__item:nth-child(-n+4) {
margin-top: 0
}
@media screen and (max-width: 767px) {
.topInterview__item:nth-child(-n+4) {
margin-top: 20px
}
}
@media screen and (max-width: 767px) {
.topInterview__item:first-child {
margin-top: 20px;
}
}
@media screen and (max-width: 767px) {
. }
.topInterview__link {
display: block;
text-decoration: none;
position: relative
}
@media screen and (max-width: 767px) {
.topInterview__link { }
}
@media screen and (max-width: 767px) {
.topInterview__imgBox {
width: 100%
}
}
.topInterview__img {
display: block;
body.dev_mob & {
width: 100%;
}
}
.topInterview__noImg {
padding-top: 65.9176029963%
}
.topInterview__title {
font-size: 1.2rem;
margin-top: 1.2em
}
@media screen and (max-width: 767px) {
.topInterview__title {
width: 50%;
margin-top: 0
}
}
.topInterview__textBox p:first-of-type {
margin: 5px auto;
border-top: .5px solid #aaa;
border-bottom: .5px solid #aaa;
font-size: 1.1rem
}
@media screen and (max-width: 767px) {
.topInterview__textBox {
max-width: 100%
}
.topInterview__textBox .topInterview__title {
width: auto
}
}
.topAbout {
background: url(//www.e-sumai.org/wp-content/themes/livia/images/top/about_bg.webp) no-repeat center center/cover;
padding: 0 40px
}
@media screen and (max-width: 767px) {
.topAbout {
padding: 0 20px
}
}
.topAbout__inner {
width: 100%;
max-width: 1000px;
margin: 0 auto;
position: relative;
padding: 100px 0;
color: #fff
}
@media screen and (max-width: 767px) {
.topAbout__inner {
padding: 60px 0
}
}
.topAbout__list {
width: 100%;
display: flex;
justify-content: space-between;
margin-top: 100px
}
@media screen and (max-width: 767px) {
.topAbout__list {
margin-top: 40px;
flex-wrap: wrap;
text-align: center
}
}
.topAbout__item {
width: 100%;
max-width: 20%;
position: relative;
margin: 20px 0 0 20px
}
@media screen and (max-width: 767px) {
.topAbout__item {
width: 50%;
max-width: initial;
margin: 0
}
}
.topAbout__item:nth-child(4n+1) {
margin-left: 0
}
.topAbout__item:nth-child(-n+4) {
margin-top: 0
}
.topAbout__link {
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
color: #fff;
border: 1px solid #fff;
padding: .5em 1em;
letter-spacing: .1em;
line-height: 1.6;
position: relative;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, .3);
font-family: YakuHanJPs_Noto, "Aoto Gothic Light", sans-serif
}
@media screen and (max-width: 767px) {
.topAbout__link {
border-top: none;
border-right: none;
letter-spacing: .05em
}
}
@media screen and (max-width: 767px) {
.topAbout__item:nth-child(2n) .topAbout__link {
border-right: 1px solid #fff
}
}
@media screen and (max-width: 767px) {
.topAbout__item:nth-child(-n+2) .topAbout__link {
border-top: 1px solid #fff
}
}
.topRenovation {
width: 100%;
max-width: 1080px;
margin: 80px auto;
padding: 0 40px;
text-align: left
}
@media screen and (max-width: 767px) {
.topRenovation {
margin-top: 60px;
padding: 0 20px;
text-align: center
}
}
.topRenovation::after {
content: "";
display: block;
clear: both
}
.topRenovation__textBox {
width: 50%;
float: left;
padding-left: 7%
}
@media screen and (max-width: 767px) {
.topRenovation__textBox {
width: 100%;
float: none;
padding-left: 0
}
}
.topRenovation__mainTitle {
margin-top: 50px;
font-size: 2rem;
line-height: 1.6;
letter-spacing: .2em;
font-weight: 700
}
@media screen and (max-width: 767px) {
.topRenovation__mainTitle {
font-size: 2.4rem;
margin-top: .3em
}
}
.topRenovation__text {
margin-top: 2em;
line-height: 2.2;
letter-spacing: .2em
}
@media screen and (max-width: 767px) {
.topRenovation__text {
width: 100%;
float: none;
margin-top: 2em
}
}
.topRenovation__img {
display: block;
width: 45%;
float: right
}
@media screen and (max-width: 767px) {
.topRenovation__img {
width: 100%;
float: none;
margin-top: 30px
}
}
.topRenovation__btn {
clear: both;
margin-left: 7%;
float: left
}
.topColumn {
padding: 60px 40px 80px;
background: #e5edeb;
margin-top: 80px
}
@media screen and (max-width: 767px) {
.topColumn {
margin-top: 40px;
padding: 60px 20px
}
}
.topColumn__inner {
width: 100%;
max-width: 1200px;
position: relative;
margin: 0 auto
}
@media screen and (max-width: 767px) {
.topColumn__inner {
text-align: right
}
}
.topColumn__lineTitle {
position: absolute;
top: 0;
right: 8.3333333333%
}
@media screen and (max-width: 767px) {
.topColumn__lineTitle {
position: relative;
right: -20px
}
}
.topColumn__mainTitle {
font-size: 1.8rem;
font-weight: 300;
line-height: 1.6;
letter-spacing: .2em
}
@media screen and (max-width: 767px) {
.topColumn__mainTitle {
text-align: center;
margin-top: 1em
}
}
.topColumn__list {
width: 100%;
margin-top: 60px;
display: flex;
text-align: left
}
@media screen and (max-width: 767px) {
.topColumn__list {
margin-top: 30px;
justify-content: space-between;
flex-wrap: wrap
}
}
.topColumn__item {
width: 17%
}
@media screen and (max-width: 767px) {
.topColumn__item {
width: 47.5%;
margin: 10% 0 0
}
}
.topColumn__item+.topColumn__item {
margin-left: 3.75%
}
@media screen and (max-width: 767px) {
.topColumn__item+.topColumn__item {
margin-left: 0
}
}
@media screen and (max-width: 767px) {
.topColumn__item:nth-child(-n+2) {
margin-top: 0
}
}
@media screen and (max-width: 767px) {
.topColumn__item:nth-child(5) {
display: none
}
}
.topColumn__link {
display: block;
text-decoration: none;
position: relative
}
.topColumn__img {
display: block
}
.topColumn__noImg {
padding-top: 99.0196078431%
}
.topColumn__summary {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 1.1rem;
line-height: 1;
margin-top: 1em;
font-family: YakuHanJPs_Noto, "Aoto Gothic Light", sans-serif
}
.topColumn__time {
display: block
}
.topColumn__writer {
margin-left: 1em
}
.topColumn__title {
font-size: 1.2rem;
line-height: 1.6;
margin-top: .8em
}
.topInsta {
padding: 0 40px;
margin-top: 80px
}
@media screen and (max-width: 767px) {
.topInsta {
padding: 0 20px;
margin-top: 80px
}
}
.topInsta__inner {
width: 100%;
max-width: 1000px;
margin: 0 auto
}
.topInsta__title {
font-family: effra, sans-serif;
font-size: 1.8rem;
line-height: 1.6;
position: relative;
padding-left: 50px;
letter-spacing: .3em;
text-align: left;
font-weight: 400
}
.topInsta__title::before {
display: block;
font-family: "Font Awesome 5 brands";
content: "";
font-weight: 900;
font-size: 3rem;
line-height: 1.6;
position: absolute;
top: 0;
left: 0;
transform: translateY(-0.45em)
}
.topInsta__box {
margin-top: 60px;
padding: 0 50px
}
@media screen and (max-width: 767px) {
.topInsta__box {
padding: 0;
margin-top: 30px
}
}
.topInsta__btn {
margin-top: 50px
}
@media screen and (max-width: 767px) {
.topInsta__btn {
margin-top: 10px
}
}
.topMovie {
background: #e5edeb;
padding: 80px 40px;
margin-top: 80px
}
@media screen and (max-width: 767px) {
.topMovie {
padding: 60px 20px;
margin-top: 40px
}
}
.topMovie__inner {
width: 100%;
max-width: 1200px;
margin: 0 auto;
text-align: left
}
.topMovie__title {
font-family: effra, sans-serif;
font-size: 1.8rem;
line-height: 1.6;
position: relative;
padding-left: 50px;
margin-left: 8.3333333333%;
letter-spacing: .3em;
font-weight: 400
}
@media screen and (max-width: 767px) {
.topMovie__title {
margin-left: 0
}
}
.topMovie__title::before {
display: block;
font-family: "Font Awesome 5 brands";
content: "";
font-weight: 900;
font-size: 3rem;
line-height: 1.6;
position: absolute;
top: 0;
left: 0;
transform: translateY(-0.45em)
}
.topMovie__list {
width: 100%;
display: flex;
margin-top: 60px
}
@media screen and (max-width: 767px) {
.topMovie__list {
margin-top: 30px;
flex-wrap: wrap;
justify-content: space-between
}
}
.topMovie__item {
width: 22.25%;
margin: 5% 0 0 3.6666666667%
}
@media screen and (max-width: 767px) {
.topMovie__item {
width: 47.5%;
margin: 5% 0 0
}
}
.topMovie__item:nth-child(4n+1) {
margin-left: 0
}
.topMovie__item:nth-child(-n+4) {
margin-top: 0
}
@media screen and (max-width: 767px) {
.topMovie__item:nth-child(-n+4) {
margin-top: 5%
}
}
@media screen and (max-width: 767px) {
.topMovie__item:nth-child(-n+2) {
margin-top: 0
}
}
.topMovie__link {
display: block;
text-decoration: none;
position: relative;
padding-top: 56.25%
}
.topMovie__link::after {
content: "";
background: rgba(255, 255, 255, 0);
display: block;
position: absolute;
top: 0;
left: 0;
z-index: 1
}
.topMovie__link iframe {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none
}
.topMovie__btn {
margin-top: 60px
}
@media screen and (max-width: 767px) {
.topMovie__btn {
margin-top: 30px
}
}
.topMap {
display: block;
width: 100%;
height: 400px
}
.footer {
background: #054e3c;
padding: 80px 40px 60px;
color: #fff
}
@media screen and (max-width: 767px) {
.footer {
padding: 60px 20px 80px
}
}
.footer--marginTop {
margin-top: 60px
}
@media screen and (max-width: 767px) {
.footer--marginTop {
margin-top: 30px
}
}
.footer__inner {
width: 100%;
max-width: 1200px;
margin: 0 auto
}
.footer__summary {
width: 100%;
display: flex;
justify-content: space-around;
}
@media screen and (max-width: 767px) {
.footer__summary {
display: block
}
}
.footer__summaryBox {
width: 35%
}
@media screen and (max-width: 767px) {
.footer__summaryBox {
width: 100%
}
}
.footer__summaryBox:nth-child(1) {
order: 1;
width: 30%
}
@media screen and (max-width: 767px) {
.footer__summaryBox:nth-child(1) {
width: 100%
}
}
.footer__summaryBox:nth-child(2) {
order: 2
}
.footer__summaryBox:nth-child(3) {
order: 3
}
@media screen and (max-width: 767px) {
.footer__summaryBox+.footer__summaryBox {
margin-top: 60px
}
}
.footer__summaryLogo {
display: block;
text-decoration: none;
color: #fff;
padding: 0 1em
}
.footer__summaryLogo:hover {
opacity: 1
}
.footer__summaryLogoImg {
display: block;
margin: 0 auto
}
.footer__summaryLogoTitle {
display: block;
font-size: 1.3rem;
line-height: 1.5;
margin-top: 30px
}
.footer__summaryLogoTitle--small {
display: block;
font-size: 1rem;
line-height: 1.5;
margin-top: 5px
}
.footer__summaryImg {
display: block;
width: 100%
}
.footer__summaryInner {
width: 100%;
display: flex;
margin-top: 1em;
text-align: left
}
@media screen and (max-width: 767px) {
.footer__summaryInner {
display: block;
text-align: center
}
}
.footer__summaryBox:nth-child(3) .footer__summaryInner {
justify-content: flex-end
}
.footer__summaryName {
font-size: 1.8rem;
font-weight: 700;
line-height: 1.5
}
.footer__summaryAddress {
display: block;
font-style: normal;
font-size: 1rem
}
.footer__summaryTel {
display: block;
text-decoration: none;
color: #fff;
font-size: 2.4rem;
line-height: 1;
position: relative;
padding-left: 40px;
margin-top: .1em;
letter-spacing: .15em
}
@media screen and (max-width: 767px) {
.footer__summaryTel {
display: inline-block
}
}
.footer__summaryTel::before {
content: "";
display: block;
width: 30px;
height: 18px;
background: url(//www.e-sumai.org/wp-content/themes/livia/images/common/logo_freedial.svg) no-repeat center center/cover;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%)
}
.footer__summaryTime {
display: block;
font-size: 1rem;
line-height: 1.5;
margin-top: .5em
}
.footer__summaryBtn {
margin-top: 10px;
color: #fff
}
.footer__summaryBtn:hover {
color: #231815
}
.footer__summaryBtn:hover::before {
height: 100%;
bottom: 0;
z-index: -1
}
.footer__summaryBtn::before {
background-color: #fff
}
.footer__navi {
width: 100%;
display: flex;
justify-content: center;
text-align: left;
margin-top: 40px;
letter-spacing: 0
}
@media screen and (max-width: 767px) {
.footer__navi {
padding: 0;
justify-content: space-between
}
}
.footer__naviBox {
display: flex
}
@media screen and (max-width: 767px) {
.footer__naviBox {
display: block;
width: 47.5%
}
}
.footer__naviBox+.footer__naviBox {
margin-left: 60px
}
@media screen and (max-width: 767px) {
.footer__naviBox+.footer__naviBox {
margin-left: 0
}
}
.footer__naviList {
font-size: 1.2rem
}
.footer__naviList+.footer__naviList {
margin-left: 60px
}
@media screen and (max-width: 767px) {
.footer__naviList+.footer__naviList {
margin: .8em 0 0
}
}
.footer__naviItem+.footer__naviItem {
margin-top: 1.2em
}
@media screen and (max-width: 767px) {
.footer__naviItem+.footer__naviItem {
margin-top: .8em
}
}
.footer__naviSubItem {
margin-top: 1.2em;
padding-left: 1em
}
@media screen and (max-width: 767px) {
.footer__naviSubItem {
margin-top: .8em
}
}
.footer__naviLink {
text-decoration: none;
color: #fff
}
.footer__naviLink:hover {
text-decoration: underline
}
.footer__naviLink--none {
pointer-events: none
}
.footer__naviLink--btn {
display: inline-block;
border: 1px solid #fff;
padding: .1em .8em;
flex-basis: 1.1rem;
transition: background .8s
}
.footer__naviLink--btn:hover {
opacity: 1;
text-decoration: none;
background: rgba(255, 255, 255, .3)
}
.footer__banner {
width: 100%;
display: flex;
justify-content: center;
margin-top: 40px
}
@media screen and (max-width: 767px) {
.footer__banner {
display: block
}
}
.footer__bannerItem {
border: 1px solid #fff;
position: relative;
border-right: none;
width: 100%;
max-width: 265px
}
@media screen and (max-width: 767px) {
.footer__bannerItem {
border-right: 1px solid #fff;
border-bottom: none;
margin: 0 auto
}
}
.footer__bannerItem:last-child {
border-right: 1px solid #fff
}
@media screen and (max-width: 767px) {
.footer__bannerItem:last-child {
border-bottom: 1px solid #fff
}
}
.footer__bannerLink {
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
padding: 13px 10px;
position: relative;
width: 100%;
height: 100%;
color: #fff
}
.footer__bannerCatch {
font-size: 1rem;
line-height: 1.5;
font-weight: 300;
letter-spacing: 0
}
.footer__bannerImg {
display: block;
margin: 0 auto;
height: 50px
}
.footer__bannerItem:nth-child(2) .footer__bannerImg {
width: 120px;
height: auto
}
.footer__naviSns {
display: flex;
margin-top: 30px
}
.footer__naviSnsLink {
color: #fff
}
.footer__copyright {
display: block;
font-size: 1rem;
line-height: 1.6;
letter-spacing: .1em;
margin-top: 2em;
color: #fff
}
.footer__copyrightLink {
color: #fff;
text-decoration: none
}
.container {
padding-top: 90px
}
@media screen and (max-width: 767px) {
.container {
padding-top: 50px
}
}
.cornerTitle {
border-top: 1px solid #908b89;
padding: 60px 40px;
text-align: center;
line-height: 1.5
}
@media screen and (max-width: 767px) {
.cornerTitle {
padding: 40px 20px
}
}
.cornerTitle__en {
display: block;
font-family: YakuHanJPs_Noto, "Aoto Gothic Light", sans-serif;
font-size: 2.8rem;
letter-spacing: .3em
}
@media screen and (max-width: 767px) {
.cornerTitle__en {
font-size: 2.4rem
}
}
.cornerTitle__ruby {
display: block;
font-size: 1.6rem;
font-weight: 400;
margin-top: .5em
}
@media screen and (max-width: 767px) {
.cornerTitle__ruby {
margin-top: .3em
}
}
.cornerTitle__asolie {
display: block;
width: 100%;
max-width: 180px;
margin: 0 auto
}
@media screen and (max-width: 767px) {
.cornerTitle__asolie {
max-height: 150px
}
}
.concept {
margin-top: 40px
}
@media screen and (max-width: 767px) {
.concept {
margin-top: 20px
}
}
.concept__mainImg {
display: block;
margin: 0 auto
}
.concept__section01 {
width: 100%;
max-width: 880px;
margin: 80px auto 0;
padding: 0 40px;
text-align: left
}
@media screen and (max-width: 767px) {
.concept__section01 {
padding: 0 20px;
margin-top: 40px
}
}
.concept__title {
font-size: 2rem;
font-weight: 700;
letter-spacing: .2em;
line-height: 1.6
}
@media screen and (max-width: 767px) {
.concept__title {
text-align: center
}
}
.concept__text {
margin-top: 3em;
line-height: 2.2;
font-family: YakuHanJPs_Noto, "Aoto Gothic Light", sans-serif;
letter-spacing: .05em
}
@media screen and (max-width: 767px) {
.concept__text {
text-align: left;
line-height: 1.8
}
}
.concept__name {
text-align: right;
font-weight: 700;
margin-top: 2em
}
.concept__name--large {
font-size: 1.8rem
}
.philosophyNavi {
width: 100%;
max-width: 1080px;
margin: 80px auto 0;
padding: 0 40px
}
@media screen and (max-width: 767px) {
.philosophyNavi {
margin-top: 40px;
padding: 0 20px
}
}
.philosophyNavi__mainTitle {
font-size: 2rem;
font-weight: 300;
line-height: 1.6;
letter-spacing: .2em;
display: flex;
justify-content: space-between;
align-items: center
}
@media screen and (max-width: 767px) {
.philosophyNavi__mainTitle {
font-size: 1.6rem;
letter-spacing: .05em
}
}
.philosophyNavi__mainTitle::before,
.philosophyNavi__mainTitle::after {
content: "";
display: block;
flex: 1;
border-top: 1px solid #908b89;
margin-right: 2em
}
@media screen and (max-width: 767px) {
.philosophyNavi__mainTitle::before,
.philosophyNavi__mainTitle::after {
margin-right: 1em
}
}
.philosophyNavi__mainTitle::after {
margin: 0 0 0 2em
}
@media screen and (max-width: 767px) {
.philosophyNavi__mainTitle::after {
margin-left: 1em
}
}
.philosophyNavi__list {
width: 100%;
display: flex;
justify-content: center;
margin-top: 40px
}
@media screen and (max-width: 767px) {
.philosophyNavi__list {
flex-wrap: wrap;
justify-content: space-between;
margin-top: 20px
}
}
.philosophyNavi__item {
width: 17.6%;
margin: 4% 0 0 3%
}
@media screen and (max-width: 767px) {
.philosophyNavi__item {
width: 47.5%;
margin: 5% 0 0
}
}
.philosophyNavi__item:nth-child(5n+1) {
margin-left: 0
}
.philosophyNavi__item:nth-child(-n+5) {
margin-top: 0
}
@media screen and (max-width: 767px) {
.philosophyNavi__item:nth-child(-n+5) {
margin-top: 5%
}
}
.philosophyNavi__item:nth-child(-n+2) {
margin-top: 0
}
.philosophyNavi__link {
display: block;
text-decoration: none
}
.philosophyNavi__img {
display: block
}
.philosophyNavi__title {
padding-left: 1.2em;
position: relative;
margin-top: .5em;
display: inline-block;
line-height: 1.6;
font-size: 1.3rem;
letter-spacing: 0;
font-family: YakuHanJPs_Noto, "Aoto Gothic Light", sans-serif
}
@media screen and (max-width: 767px) {
.philosophyNavi__title {
font-size: 1.2rem
}
}
.philosophyNavi__title::before {
content: ">";
position: absolute;
top: 0;
left: 0;
line-height: 1.5
}
.specialty {
margin-top: 40px
}
@media screen and (max-width: 767px) {
.specialty {
margin-top: 20px
}
}
.specialty__mainImg {
display: block;
margin: 0 auto
}
.specialty__intro {
padding: 0 40px;
margin-top: 80px;
letter-spacing: .2em;
line-height: 2.2
}
@media screen and (max-width: 767px) {
.specialty__intro {
padding: 0 20px;
margin-top: 40px;
letter-spacing: .1em
}
}
.specialty__intro--bold {
font-size: 1.8rem
}
.specialty__section {
width: 100%;
max-width: 1080px;
margin: 80px auto 0;
text-align: left;
padding: 0 40px
}
@media screen and (max-width: 767px) {
.specialty__section {
margin-top: 40px;
padding: 0 20px
}
}
.specialty__section+.specialty__section {
margin-top: 60px
}
@media screen and (max-width: 767px) {
.specialty__section+.specialty__section {
margin-top: 40px
}
}
.specialty__section::after {
content: "";
display: block;
clear: both
}
.specialty__title {
width: 47%;
float: right;
font-size: 2rem;
line-height: 1.6;
letter-spacing: .05em;
font-weight: 300
}
@media screen and (max-width: 767px) {
.specialty__title {
width: 100%;
float: none;
font-size: 1.6rem;
text-align: center
}
}
.specialty__title--bold {
font-size: 3rem
}
@media screen and (max-width: 767px) {
.specialty__title--bold {
font-size: 2.4rem
}
}
.specialty__img {
display: block;
width: 46.5%;
float: left
}
@media screen and (max-width: 767px) {
.specialty__img {
width: 100%;
float: none;
margin-top: 1em
}
}
.specialty__text {
width: 47%;
float: right;
margin-top: 1.2em;
font-family: YakuHanJPs_Noto, "Aoto Gothic Light", sans-serif
}
@media screen and (max-width: 767px) {
.specialty__text {
width: 100%;
float: none
}
}
.material {
margin-top: 40px
}
@media screen and (max-width: 767px) {
.material {
margin-top: 20px
}
}
.material__mainImg {
display: block;
margin: 0 auto
}
.material__intro {
padding: 0 40px;
margin-top: 80px;
letter-spacing: .2em;
line-height: 2.2
}
@media screen and (max-width: 767px) {
.material__intro {
padding: 0 20px;
margin-top: 40px;
letter-spacing: .1em
}
}
.material__section {
margin-top: 80px;
background: #f3f3f3;
padding: 60px 40px
}
@media screen and (max-width: 767px) {
.material__section {
margin-top: 40px;
padding: 30px 20px
}
}
.material__section+.material__section {
margin-top: 0
}
.material__section:nth-child(2n) {
background: #fff
}
.material__inner {
width: 100%;
max-width: 1000px;
margin: 0 auto;
text-align: left
}
.material__inner::after {
content: "";
display: block;
clear: both
}
.material__title {
width: 46.5%;
float: left;
position: relative;
padding-left: 55px;
padding-bottom: .5em
}
@media screen and (max-width: 767px) {
.material__title {
width: 100%;
float: none;
text-align: left;
padding-left: 35px
}
}
.material__titleNumber {
position: absolute;
top: 0;
left: 0;
line-height: 1
}
.material__img {
display: block;
width: 46.5%;
float: right
}
@media screen and (max-width: 767px) {
.material__img {
width: 100%;
float: none;
margin-top: 20px
}
}
.material__text {
width: 46.5%;
float: left;
margin-top: 1em;
line-height: 2.2
}
@media screen and (max-width: 767px) {
.material__text {
width: 100%;
float: none;
line-height: 1.8
}
}
.exterior {
margin-top: 40px
}
@media screen and (max-width: 767px) {
.exterior {
margin-top: 20px
}
}
.exterior__mainImg {
display: block;
margin: 0 auto
}
.exterior__intro {
padding: 0 40px;
margin-top: 80px;
letter-spacing: .2em;
line-height: 2.2
}
@media screen and (max-width: 767px) {
.exterior__intro {
padding: 0 20px;
margin-top: 40px;
letter-spacing: .1em
}
}
.exterior__section {
width: 100%;
max-width: 1080px;
text-align: left;
margin: 80px auto 0;
padding: 0 40px
}
@media screen and (max-width: 767px) {
.exterior__section {
margin-top: 40px;
padding: 0 20px
}
}
.exterior__text {
margin-top: 1em;
line-height: 2.2
}
@media screen and (max-width: 767px) {
.exterior__text {
line-height: 1.8
}
}
.exterior__subSection {
margin-top: 60px
}
@media screen and (max-width: 767px) {
.exterior__subSection {
margin-top: 30px
}
}
.exterior__list {
margin-top: 20px;
width: 100%;
display: flex;
justify-content: space-between
}
@media screen and (max-width: 767px) {
.exterior__list {
margin-top: 1em
}
}
.exterior__item {
width: 48.6%
}
.exterior__caption {
font-size: 1.2rem;
margin-top: 1.2em
}
.spec_warranty {
margin-top: 40px
}
@media screen and (max-width: 767px) {
.spec_warranty {
margin-top: 20px
}
}
.spec_warranty__mainImg {
display: block;
margin: 0 auto
}
.spec_warranty__intro {
padding: 0 40px;
margin-top: 80px;
letter-spacing: .2em;
line-height: 2.2
}
@media screen and (max-width: 767px) {
.spec_warranty__intro {
padding: 0 15px;
margin-top: 40px;
letter-spacing: .05em
}
}
.spec_warranty__section {
margin-top: 80px;
background: #f3f3f3;
padding: 80px 40px
}
@media screen and (max-width: 767px) {
.spec_warranty__section {
margin-top: 40px;
padding: 40px 20px
}
}
.spec_warranty__section:nth-child(2n) {
background: #fff;
margin-top: 0;
padding-bottom: 0
}
.spec_warranty__inner {
width: 100%;
max-width: 1000px;
margin: 0 auto;
text-align: left
}
.spec_warranty__sectionTitle {
font-size: 2rem;
font-weight: 300;
line-height: 1.6;
letter-spacing: .2em
}
.spec_warranty__subSection--float {
margin-top: 40px
}
@media screen and (max-width: 767px) {
.spec_warranty__subSection--float {
margin-top: 30px
}
}
.spec_warranty__subSection--float+.spec_warranty__subSection--float {
margin-top: 60px
}
@media screen and (max-width: 767px) {
.spec_warranty__subSection--float+.spec_warranty__subSection--float {
margin-top: 40px
}
}
.spec_warranty__subSection--float::after {
content: "";
display: block;
clear: both
}
.spec_warranty__subSection--box {
width: 46.7%;
margin-top: 40px
}
@media screen and (max-width: 767px) {
.spec_warranty__subSection--box {
width: 100%;
margin-top: 20px
}
}
.spec_warranty__subSection--box:nth-child(-n+2) {
margin-top: 0
}
.spec_warranty__subTitle {
font-size: 1.6rem;
line-height: 1.6;
letter-spacing: .2em;
font-weight: 300
}
@media screen and (max-width: 767px) {
.spec_warranty__subTitle {
letter-spacing: .1em;
text-align: center
}
}
.spec_warranty__subTitle--bold {
display: inline-block;
font-size: 2.4rem;
letter-spacing: .1em;
margin-right: .5em;
line-height: 1.4
}
@media screen and (max-width: 767px) {
.spec_warranty__subTitle--bold {
margin-right: .3em
}
}
.spec_warranty__subTitle--float {
width: 47%;
float: right
}
@media screen and (max-width: 767px) {
.spec_warranty__subTitle--float {
width: 100%;
float: none
}
}
.spec_warranty__img {
display: block;
margin-top: 1em
}
.spec_warranty__img--float {
width: 46.7%;
float: left;
margin-top: 0
}
@media screen and (max-width: 767px) {
.spec_warranty__img--float {
width: 100%;
float: none;
margin-top: 1em
}
}
.spec_warranty__text {
margin-top: 1.2em
}
.spec_warranty__text--float {
width: 47%;
float: right
}
@media screen and (max-width: 767px) {
.spec_warranty__text--float {
width: 100%;
float: none
}
}
.spec_warranty__text--note,
.spec_warranty__text--note2 {
display: block;
font-size: 1.2rem;
margin-top: 1.2em;
line-height: 1.6
}
.spec_warranty__text--more,
.spec_warranty__text--close {
cursor: pointer
}
.spec_warranty__wrapper {
width: 100%;
margin-top: 40px;
display: flex;
justify-content: space-between;
flex-wrap: wrap
}
.spec_warranty__zeh {
border: 1px solid #908b89;
padding: 10px 15px;
margin-top: 15px;
font-size: 1.2rem;
line-height: 1.8
}
.spec_warranty__zehTitle {
position: relative;
padding-right: 2em;
line-height: 1.6;
font-weight: 500;
cursor: pointer;
transition: opacity .8s
}
.spec_warranty__zehTitle::after {
content: "＞";
display: block;
position: absolute;
right: 0;
top: 0;
transform: rotate(90deg);
transition: transform .8s;
font-weight: 300;
color: #908b89
}
.spec_warranty__zehTitle:hover {
opacity: .5
}
.spec_warranty__zehTitle--open::after {
transform: rotate(-90deg)
}
.spec_warranty__zehText {
margin-top: 1em;
padding-top: .8em;
border-top: 1px dotted #908b89;
display: none
}
.staff {
margin-top: 40px
}
@media screen and (max-width: 767px) {
.staff {
margin-top: 20px
}
}
.staff__mainImg {
display: block;
margin: 0 auto
}
.staff__intro {
padding: 0 40px;
margin-top: 80px;
letter-spacing: .2em;
line-height: 2.2
}
@media screen and (max-width: 767px) {
.staff__intro {
padding: 0 20px;
margin-top: 40px;
letter-spacing: .1em
}
}
.staff__section {
margin: 80px auto 0;
width: 100%;
max-width: 1080px;
padding: 0 40px;
text-align: left
}
@media screen and (max-width: 767px) {
.staff__section {
margin-top: 40px;
padding: 0 20px
}
}
.staff__section+.staff__section {
margin-top: 50px
}
@media screen and (max-width: 767px) {
.staff__section+.staff__section {
margin-top: 20px
}
}
.staff__inner {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
border: 1px solid #908b89;
padding: 49px
}
@media screen and (max-width: 767px) {
.staff__inner {
display: block;
padding: 20px
}
}
.staff__imgBox {
width: 53.3333333333%
}
@media screen and (max-width: 767px) {
.staff__imgBox {
width: 100%
}
}
.staff__img {
display: block;
width: 100%
}
.staff__noImg {
padding-top: 50.8333333333%
}
.staff__textBox {
flex: 1;
margin-left: 11.1111111111%
}
@media screen and (max-width: 767px) {
.staff__textBox {
margin: 15px 0 0
}
}
.staff__position {
font-size: 1.6rem;
line-height: 1.5;
letter-spacing: .1em
}
.staff__name {
width: 100%;
display: flex;
align-items: center
}
.staff__nameText {
font-size: 2.4rem;
font-weight: 300;
letter-spacing: .2em;
line-height: 1.5
}
.staff__ruby {
font-size: 1.2rem;
font-weight: 300;
line-height: 1.6;
letter-spacing: .1em;
margin-left: 1em
}
.staff__table {
width: 100%;
margin-top: 1em
}
.staff__th,
.staff__td {
text-align: left;
font-weight: 300;
vertical-align: top;
padding-bottom: .5em;
line-height: 1.6
}
.staff__th {
width: 5em;
padding-right: 1em
}
.staff__btn {
max-width: 200px;
margin-top: 30px
}
@media screen and (max-width: 767px) {
.staff__btn {
margin-top: 0
}
}
.staff__message {
background: #f3f3f3;
padding: 40px 50px;
display: none
}
@media screen and (max-width: 767px) {
.staff__message {
padding: 20px
}
}
.staff__messageTitle {
font-size: 2.2rem;
line-height: 1.6
}
.staff__messageText {
font-family: YakuHanJPs_Noto, "Aoto Gothic Light", sans-serif;
line-height: 2
}
.staff__messageTitle+.staff__messageText {
margin-top: 1.5em
}
.contents {
width: 100%;
max-width: 1280px;
margin: 40px auto 0;
padding: 0 40px
}
@media screen and (max-width: 767px) {
.contents {
margin-top: 20px;
padding: 0 20px
}
}
.worksArchive__list {
width: 100%;
display: flex;
flex-wrap: wrap;
margin-top: 60px
}
@media screen and (max-width: 767px) {
.worksArchive__list {
margin-top: 40px;
text-align: center;
justify-content: space-between
}
}
.worksArchive__item {
width: 22.25%;
margin: 5% 0 0 3.6666666667%
}
@media screen and (max-width: 767px) {
.worksArchive__item {
width: 100%;
margin: 10% 0 0 0 !important;
}
}
.worksArchive__item:nth-child(4n+1) {
margin-left: 0
}
.worksArchive__item:nth-child(-n+4) {
margin-top: 0
}
@media screen and (max-width: 767px) {
.worksArchive__item:nth-child(-n+4) {
margin-top: 10%
}
}
@media screen and (max-width: 767px) {
.worksArchive__item:nth-child(-n+2) {
margin-top: 0
}
}
.worksArchive__link {
display: block;
text-decoration: none;
position: relative
}
.worksArchive__img {
display: block;
width: 100%;
}
.worksArchive__noImg {
padding-top: 65.9176029963%
}
.worksArchive__title {
font-size: 1.2rem;
margin-top: 1.2em
}
@media screen and (max-width: 767px) {
.worksArchive__title {
font-size: 1rem;
margin-top: 1em;
line-height: 1.6
}
}
.singleMianImg {
display: block;
margin: 40px auto 0
}
@media screen and (max-width: 767px) {
.singleMianImg {
margin-top: 20px
}
}
.worksSingle {
max-width: 1280px;
text-align: left
}
.worksSingle img {
width: 100%;
object-fit: cover
}
.singleMianImg+.worksSingle {
margin-top: 50px
}
@media screen and (max-width: 767px) {
.singleMianImg+.worksSingle {
margin-top: 30px
}
}
.worksSingle__intro {
display: flex;
justify-content: space-between;
}
@media screen and (max-width: 767px) {
.worksSingle__intro {
flex-direction: column;
}
}
.worksSingle__intro::after {
content: "";
display: block;
clear: both
}
.worksSingle__introTitleBox {  padding-top: 30px;
}
@media screen and (max-width: 767px) {
.worksSingle__introTitleBox {
width: 100%;
float: none;
padding-top: 0;
}
}
.worksSingle__introMainTitle {
font-size: 2rem;
font-weight: 300;
line-height: 1.6;
letter-spacing: .1em
}
@media screen and (max-width: 767px) {
.worksSingle__introMainTitle {
text-align: center
}
}
.worksSingle__introSummary {
border-top: 1px solid #908b89;
border-bottom: 1px solid #908b89;
padding: 15px 0;
margin-top: 20px
}
@media screen and (max-width: 767px) {
.worksSingle__introSummaryText {
text-align: center
}
}
.worksSingle__introFamilyBox {
width: 100%;
display: flex;
align-items: flex-start;
line-height: 1.6
}
@media screen and (max-width: 767px) {
.worksSingle__introFamilyBox {
justify-content: center
}
}
.worksSingle__introSummaryText+.worksSingle__introFamilyBox {
margin-top: .3em
}
.worksSingle__introFamilyTitle {
flex-shrink: 0;
white-space: nowrap
}
.worksSingle__introFamilyText {
flex: 1
}
@media screen and (max-width: 767px) {
.worksSingle__introFamilyText {
flex: initial
}
}
.worksSingle__introFlex {
width: 47%;
}
@media screen and (max-width: 767px) {
.worksSingle__introFlex {
width: 100%;
}
}
.worksSingle__introFlexImg {
width: 47%;
}
@media screen and (max-width: 767px) {
.worksSingle__introFlexImg {
width: 100%;
margin-bottom: 28px;
}
}
.worksSingle__introImg { display: block; height: 100%;
width: auto;
object-fit: cover;
}
@media screen and (max-width: 767px) {
.worksSingle__introImg {
width: 60%;
float: none;
margin: 30px auto 0;
}
}
.worksSingle__introTextBox {  margin-top: 30px;
}
@media screen and (max-width: 767px) {
.worksSingle__introTextBox {
width: 100%;
float: none
}
}
.worksSingle__introTitle {
font-size: 2rem;
font-weight: 300;
line-height: 1.6
}
@media screen and (max-width: 767px) {
.worksSingle__introTitle {
text-align: center
}
}
.worksSingle__introText {
font-family: YakuHanJPs_Noto, "Aoto Gothic Light", sans-serif;
margin-top: 1em
}
.worksSingle__gallery {
margin-top: 30px
}
.worksSingle__gallery--full {
width: 100%;
margin-top: 30px
}
@media screen and (max-width: 767px) {
.worksSingle__gallery--full {
margin-top: 2.8571428571%
}
}
.worksSingle__gallery--full:first-child {
margin-top: 0
}
.worksSingle__gallery--medium {
width: 65%
}
.worksSingle__gallery--vertical {
width: 32%
}
.worksSingle__gallery--square {
width: 48.5%
}
.worksSingle__gallerySet {
width: 100%;
display: flex;
justify-content: space-between;
margin-top: 30px
}
@media screen and (max-width: 767px) {
.worksSingle__gallerySet {
margin-top: 2.8571428571%
}
}
.worksSingle__gallerySet:first-child {
margin-top: 0
}
.interviewArchive {
text-align: left
}
.interviewArchive__list {
width: 100%;
display: flex;
justify-content: space-between;
flex-wrap: wrap
}
@media screen and (max-width: 767px) {
.interviewArchive__list {
display: block
}
}
.interviewArchive__item {
width: 46.6666666667%;
border-bottom: 1px solid #908b89;
padding-bottom: 30px;
margin-top: 30px;
position: relative
}
@media screen and (max-width: 767px) {
.interviewArchive__item {
width: 100%;
padding-bottom: 20px;
margin-top: 20px
}
}
.interviewArchive__item:nth-child(-n+2) {
margin-top: 0
}
@media screen and (max-width: 767px) {
.interviewArchive__item:nth-child(-n+2) {
margin-top: 20px
}
}
@media screen and (max-width: 767px) {
.interviewArchive__item:first-child {
margin-top: 0
}
}
.interviewArchive__link {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
text-decoration: none;
position: relative;
height: 100%
}
.interviewArchive__imgBox {
width: 42.8571428571%
}
.interviewArchive__img {
display: block
}
.interviewArchive__noImg {
padding-top: 65.8333333333%
}
.interviewArchive__title {
flex: 1;
margin-left: 30px
}
@media screen and (max-width: 767px) {
.interviewArchive__title {
margin-left: 20px
}
}
.interviewSingle {
max-width: 1080px;
margin-top: 80px
}
@media screen and (max-width: 767px) {
.interviewSingle {
margin-top: 40px
}
}
.interviewSingle__mainTitle {
font-size: 2rem;
line-height: 2;
letter-spacing: .1em;
font-weight: 300
}
.interviewSingle__summary {
width: 100%;
max-width: 470px;
margin: 40px auto 0;
border-top: 1px solid #908b89;
border-bottom: 1px solid #908b89;
padding: 1.5em
}
@media screen and (max-width: 767px) {
.interviewSingle__summary {
margin-top: 30px
}
}
.interviewSingle__introText {
margin-top: 40px;
font-family: YakuHanJPs_Noto, "Aoto Gothic Light", sans-serif
}
@media screen and (max-width: 767px) {
.interviewSingle__introText {
margin-top: 30px;
text-align: left
}
}
.interviewSingle__section {
margin-top: 80px
}
@media screen and (max-width: 767px) {
.interviewSingle__section {
margin-top: 40px
}
}
.interviewSingle__title {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 1.8rem;
font-weight: 300;
letter-spacing: .1em;
line-height: 1.6;
margin-bottom: 1.8em;
}
@media screen and (max-width: 767px) {
.interviewSingle__title {
font-size: 1.6rem;
letter-spacing: .05em
}
}
.interviewSingle__title::before,
.interviewSingle__title::after {
content: "";
display: block;
border-top: 1px solid #908b89;
margin-right: 2em;
flex: 1
}
@media screen and (max-width: 767px) {
.interviewSingle__title::before,
.interviewSingle__title::after {
margin-right: 1em;
min-width: 3em
}
}
.interviewSingle__title::after {
margin: 0 0 0 2em
}
@media screen and (max-width: 767px) {
.interviewSingle__title::after {
margin-left: 1em
}
}
.interviewSingle__text {
padding: 0px 12px;
text-align: left;
margin-top: 1.2em;
margin-bottom: 2.6em;
font-family: YakuHanJPs_Noto, "Aoto Gothic Light", sans-serif
}
.interviewSingle__img {
display: block;
margin: 1.2em auto 0
}
.flow {
margin-top: 40px
}
@media screen and (max-width: 767px) {
.flow {
margin-top: 20px
}
}
.flow__mainImg {
display: block;
margin: 0 auto
}
.flow__intro {
padding: 0 40px;
margin-top: 80px;
letter-spacing: .2em;
line-height: 2.2
}
@media screen and (max-width: 767px) {
.flow__intro {
padding: 0 20px;
margin-top: 40px;
letter-spacing: .1em
}
}
.flow__wrapper {
margin-top: 80px;
padding: 0 40px
}
@media screen and (max-width: 767px) {
.flow__wrapper {
margin-top: 40px;
padding: 0 20px
}
}
.flow__wrapper+.flow__wrapper {
margin-top: 60px;
padding-top: 60px;
padding-bottom: 60px;
background: #f3f3f3
}
@media screen and (max-width: 767px) {
.flow__wrapper+.flow__wrapper {
margin-top: 30px;
padding-top: 30px;
padding-bottom: 30px
}
}
.flow__inner {
width: 100%;
max-width: 1000px;
margin: 0 auto;
text-align: left
}
.flow__section+.flow__section {
margin-top: 40px;
padding-top: 40px;
border-top: 1px solid #908b89
}
@media screen and (max-width: 767px) {
.flow__section+.flow__section {
margin-top: 20px;
padding-top: 20px
}
}
.flow__section::after {
content: "";
display: block;
clear: both
}
.flow__title {
width: 47%;
float: right;
font-size: 2rem;
line-height: 1.6;
letter-spacing: .1em;
font-weight: 300
}
@media screen and (max-width: 767px) {
.flow__title {
width: 100%;
float: none;
font-size: 1.6rem;
text-align: center;
letter-spacing: .05em
}
}
.flow__title--bold {
display: inline-block;
margin-right: .3em;
font-size: 3rem;
font-weight: 300
}
@media screen and (max-width: 767px) {
.flow__title--bold {
font-size: 2.6rem
}
}
.flow__img {
display: block;
width: 46.5%;
float: left
}
@media screen and (max-width: 767px) {
.flow__img {
width: 100%;
margin-top: 1em;
float: none
}
}
.flow__text {
width: 47%;
float: right;
margin-top: 1.2em;
font-family: YakuHanJPs_Noto, "Aoto Gothic Light", sans-serif
}
@media screen and (max-width: 767px) {
.flow__text {
width: 100%;
float: none
}
}
.flow__text--bold {
font-size: 1.6rem;
font-family: YakuHanJPs_Noto, "Aoto Gothic Bold", sans-serif
}
@media screen and (max-width: 767px) {
.flow__text--bold {
font-size: 1.4rem
}
}
.flow__contactTelList {
display: flex;
margin-top: 1em;
width: 100%;
align-items: baseline;
font-family: serif
}
.flow__contactTelItem+.flow__contactTelItem {
margin-left: 20px
}
@media screen and (max-width: 767px) {
.flow__contactTelItem+.flow__contactTelItem {
margin-left: 10px
}
}
.flow__contactTelStudio {
font-size: 1.4rem;
font-weight: 700;
line-height: 1.5;
text-align: left
}
.flow__contactTel {
display: block;
font-size: 2rem;
letter-spacing: .15em;
text-decoration: none;
line-height: 1;
position: relative;
padding-left: 40px;
margin-top: .2em
}
@media screen and (max-width: 767px) {
.flow__contactTel {
font-size: 1.8rem;
letter-spacing: .1em;
padding-left: 35px
}
}
.flow__contactTel::before {
content: "";
display: block;
width: 30px;
height: 18px;
background: url(//www.e-sumai.org/wp-content/themes/livia/images/common/logo_freedial_b.svg) no-repeat center center/cover;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%)
}
@media screen and (max-width: 767px) {
.flow__contactTel::before {
width: 28px;
height: 16px;
transform: translateY(-43%)
}
}
.flow__contactTime {
font-size: 1.2rem;
font-family: YakuHanJPs_Noto, "Aoto Gothic Light", sans-serif;
letter-spacing: 0
}
@media screen and (max-width: 767px) {
.flow__contactTime {
font-size: 1rem
}
}
.flow__line {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 1.8rem;
font-weight: 300;
letter-spacing: .1em;
line-height: 1.6;
margin-top: 60px
}
@media screen and (max-width: 767px) {
.flow__line {
margin-top: 40px
}
}
.flow__line::before,
.flow__line::after {
content: "";
display: block;
border-top: 1px solid #908b89;
margin-right: 2em;
flex: 1
}
.flow__line::after {
margin: 0 0 0 2em
}
.faq {
max-width: 1080px;
text-align: left
}
.faq__item+.faq__item {
margin-top: 28px
}
@media screen and (max-width: 767px) {
.faq__item+.faq__item {
margin-top: 40px
}
}
.faq__titleBox {
width: 100%;
display: table;
cursor: pointer;
transition: opacity .8s
}
.faq__titleBox:hover {
opacity: .5
}
@media screen and (max-width: 767px) {
.faq__titleBox:hover {
opacity: 1
}
}
.faq__icon {
display: table-cell;
width: 30px;
font-size: 3rem;
line-height: 1;
vertical-align: top;
text-align: left;
font-weight: 300
}
@media screen and (max-width: 767px) {
.faq__icon {
font-size: 2.4rem;
width: 25px
}
}
.faq__title {
display: table-cell;
vertical-align: middle;
font-size: 1.8rem;
line-height: 1.6;
font-weight: 300;
padding-top: .2em
}
@media screen and (max-width: 767px) {
.faq__title {
font-size: 1.6rem
}
}
.faq__titleInner {
display: inline-block;
position: relative;
padding-right: 2em
}
.faq__titleInner::before {
content: "";
display: none;
width: 1em;
height: 1em;
border: 1px solid #908b89;
position: absolute;
top: .3em;
right: 0
}
.faq__titleInner::after {
content: "＞";
display: block;
transform: rotate(90deg);
position: absolute;
top: 20%;
right: 15px;
transition: .5s;
font-size: 1.4rem;
color: #908b89
}
@media screen and (max-width: 767px) {
.faq__titleInner::after {
top: 6%
}
}
.faq__item--open .faq__titleInner::after {
transform: rotate(-90deg)
}
.faq__textBox {
padding-bottom: 24px;
padding-left: 30px;
margin-top: 20px;
display: none;
font-family: YakuHanJPs_Noto, "Aoto Gothic Light", sans-serif
}
.company {
margin-top: 40px
}
@media screen and (max-width: 767px) {
.company {
margin-top: 20px
}
}
.company__section {
padding: 0 40px
}
@media screen and (max-width: 767px) {
.company__section {
padding: 0 20px
}
}
.company__section:nth-child(2n) {
background: #f3f3f3;
padding-top: 60px;
padding-bottom: 60px
}
@media screen and (max-width: 767px) {
.company__section:nth-child(2n) {
padding-top: 30px;
padding-bottom: 30px
}
}
.company__section+.company__section {
margin-top: 80px
}
@media screen and (max-width: 767px) {
.company__section+.company__section {
margin-top: 40px
}
}
.company__inner {
width: 100%;
max-width: 1000px;
margin: 0 auto;
text-align: left
}
.company__studio+.company__studio {
border-top: 1px solid #908b89;
margin-top: 60px;
padding-top: 60px
}
@media screen and (max-width: 767px) {
.company__studio+.company__studio {
margin-top: 30px;
padding-top: 30px
}
}
.company__sectionTitle {
font-size: 2rem;
font-weight: 300;
line-height: 1.6;
letter-spacing: .2em
}
.company__overview {
width: 100%;
margin-top: 20px
}
@media screen and (max-width: 767px) {
.company__overview {
margin-top: 0
}
}
.company__overviewTh,
.company__overviewTd {
text-align: left;
vertical-align: top;
font-weight: 300;
padding: 15px 0;
border-bottom: 1px solid #908b89;
font-family: YakuHanJPs_Noto, "Aoto Gothic Light", sans-serif
}
@media screen and (max-width: 767px) {
.company__overviewTh,
.company__overviewTd {
width: 100%;
float: left;
padding: 5px 0 15px
}
}
.company__overviewTr:last-child .company__overviewTh,
.company__overviewTr:last-child .company__overviewTd {
border-bottom: none;
padding-bottom: 0
}
.company__overviewTh {
font-size: 1.6rem;
width: 23%;
padding-right: 1em;
font-family: serif
}
@media screen and (max-width: 767px) {
.company__overviewTh {
width: 100%;
padding: 15px 0 0;
border-bottom: none
}
}
.company__history {
width: 100%;
margin-top: 20px
}
@media screen and (max-width: 767px) {
.company__history {
margin-top: 0
}
}
.company__historyTh,
.company__historyTd {
text-align: left;
vertical-align: top;
font-weight: 300;
padding: 15px 0;
border-bottom: 1px solid #908b89;
font-family: YakuHanJPs_Noto, "Aoto Gothic Light", sans-serif
}
.company__historyTr:last-child .company__historyTh,
.company__historyTr:last-child .company__historyTd {
border-bottom: none;
padding-bottom: 0
}
.company__historyTh {
width: 15%;
padding-right: 1em;
font-family: serif
}
@media screen and (max-width: 767px) {
.company__historyTh {
width: 6.5em
}
}
.company__text {
margin-top: 30px;
font-family: YakuHanJPs_Noto, "Aoto Gothic Light", sans-serif
}
@media screen and (max-width: 767px) {
.company__text {
margin-top: 15px
}
}
.company__list {
width: 100%;
margin-top: 30px;
display: flex;
justify-content: space-between
}
@media screen and (max-width: 767px) {
.company__list {
display: block
}
}
.company__item {
width: 47%
}
@media screen and (max-width: 767px) {
.company__item {
width: 100%
}
}
@media screen and (max-width: 767px) {
.company__item+.company__item {
margin-top: 30px
}
}
.company__img {
display: block
}
.company__caption {
margin-top: 1em;
font-family: YakuHanJPs_Noto, "Aoto Gothic Light", sans-serif
}
.company__access {
margin-top: 60px
}
@media screen and (max-width: 767px) {
.company__access {
margin-top: 40px
}
}
.company__access::after {
content: "";
clear: both;
display: block
}
.company__accessTitle {
width: 40%;
float: left
}
@media screen and (max-width: 767px) {
.company__accessTitle {
width: 100%;
float: none
}
}
.company__accessMap {
width: 53%;
height: 230px;
float: right;
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
display: block
}
@media screen and (max-width: 767px) {
.company__accessMap {
width: 100%;
height: 350px;
float: none;
margin-top: 15px
}
}
.company__accessText {
width: 40%;
float: left;
margin-top: 1em;
font-family: YakuHanJPs_Noto, "Aoto Gothic Light", sans-serif
}
@media screen and (max-width: 767px) {
.company__accessText {
width: 100%;
float: none
}
}
.company__tel {
display: block;
background: #e5edeb;
text-align: center;
font-size: 2.8rem;
letter-spacing: .15em;
text-decoration: none;
line-height: 1;
margin-top: .5em;
padding: 20px;
font-family: serif
}
.company__tel::before {
content: "";
display: inline-block;
width: 30px;
height: 18px;
background: url(//www.e-sumai.org/wp-content/themes/livia/images/common/logo_freedial_b.svg) no-repeat center center/cover
}
.company__note {
font-size: 1.2rem;
line-height: 1.6;
margin-top: .8em;
font-family: YakuHanJPs_Noto, "Aoto Gothic Light", sans-serif
}
.company__catch {
text-align: center;
margin-top: 60px;
font-size: 1.8rem;
line-height: 1.6;
letter-spacing: .2em
}
@media screen and (max-width: 767px) {
.company__catch {
margin-top: 40px;
font-size: 1.6rem;
letter-spacing: .05em
}
}
.company__catch--large {
display: block;
font-size: 2.4rem;
margin-top: .3em
}
@media screen and (max-width: 767px) {
.company__catch--large {
font-size: 2.2rem;
margin-top: .2em
}
}
.company__catch--mt0 {
margin-top: 0
}
.recruit__section+.recruit__section {
margin-top: 80px
}
@media screen and (max-width: 767px) {
.recruit__section+.recruit__section {
margin-top: 40px
}
}
.recruit__sectionInner {
text-align: left;
max-width: 1000px;
margin: 0 auto
}
.recruit__text {
margin-top: 30px
}
.recruit__application {
margin-top: 30px;
width: 100%
}
.recruit__applicationDt {
font-size: 1.8rem;
font-weight: 300;
background: #f3f3f3;
padding: .2em 2em .1em 1em;
cursor: pointer;
transition: opacity .8s;
position: relative;
margin-top: 20px
}
.recruit__applicationDt:first-child {
margin-top: 0
}
.recruit__applicationDt:hover {
opacity: .5
}
@media screen and (max-width: 767px) {
.recruit__applicationDt:hover {
opacity: 1
}
}
.recruit__applicationDt::before {
content: "";
display: none;
width: 1em;
height: 1em;
border: 1px solid #908b89;
position: absolute;
top: .6em;
right: .8em;
background: #fff
}
.recruit__applicationDt::after {
content: "";
display: block;
width: .4em;
height: .4em;
border-top: 1px solid #908b89;
border-right: 1px solid #908b89;
transform: rotate(135deg);
position: absolute;
top: .8em;
right: 1.1em;
transition: transform .5s, top .5s
}
.recruit__applicationDt--open:after {
transform: rotate(-45deg);
top: 45%
}
.recruit__applicationDd {
padding-bottom: 30px;
display: none
}
.recruit__table {
width: 100%;
margin-top: 10px
}
.recruit__th,
.recruit__td {
vertical-align: top;
padding: 15px 0;
border-bottom: 1px solid #908b89;
font-family: YakuHanJPs_Noto, "Aoto Gothic Light", sans-serif
}
@media screen and (max-width: 767px) {
.recruit__th,
.recruit__td {
width: 100%;
float: left;
padding: 3px 15px 15px
}
}
.recruit__tr:last-child .recruit__th,
.recruit__tr:last-child .recruit__td {
border-bottom: none;
padding-bottom: 0
}
.recruit__th {
width: 20%;
padding-left: 1em;
padding-right: 1em;
font-size: 1.6rem;
font-weight: 300;
letter-spacing: .2em;
font-family: serif
}
@media screen and (max-width: 767px) {
.recruit__th {
width: 100%;
padding: 15px 15px 0;
border-bottom: none
}
}
.recruit__sectionTitle {
font-size: 2rem;
line-height: 1.6;
letter-spacing: .2em;
font-weight: 300
}
.recruit__staff {
width: 100%;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-top: 40px
}
@media screen and (max-width: 767px) {
.recruit__staff {
margin-top: 20px;
display: block
}
}
.recruit__staffBox {
width: 47%;
margin-top: 60px
}
@media screen and (max-width: 767px) {
.recruit__staffBox {
width: 100%;
margin-top: 40px
}
}
.recruit__staffBox:nth-child(-n+2) {
margin-top: 0
}
@media screen and (max-width: 767px) {
.recruit__staffBox:nth-child(-n+2) {
margin-top: 40px
}
}
@media screen and (max-width: 767px) {
.recruit__staffBox:first-child {
margin-top: 0
}
}
.recruit__staffNameBox {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center
}
.recruit__staffNameBoxInner {
display: flex;
align-items: center;
margin-right: 1em
}
.recruit__staffPosition {
line-height: 1.6;
margin-right: 1em
}
.recruit__staffName {
font-size: 1.8rem;
letter-spacing: .1em;
line-height: 1.6;
font-weight: 300
}
.recruit__staffRuby {
font-size: 1.2rem;
line-height: 1.6
}
.recruit__staffImg {
display: block;
margin-top: 20px
}
.recruit__staffInterview {
margin-top: 30px
}
@media screen and (max-width: 767px) {
.recruit__staffInterview {
margin-top: 20px
}
}
.recruit__staffInterview+.recruit__staffInterview {
margin-top: 40px
}
@media screen and (max-width: 767px) {
.recruit__staffInterview+.recruit__staffInterview {
margin-top: 20px
}
}
.recruit__staffInterviewTitle {
padding-left: 1.3em;
position: relative;
font-size: 1.8rem;
font-weight: 300;
line-height: 1.6
}
.recruit__staffInterviewTitle::before {
content: "Q";
display: block;
position: absolute;
top: 0;
left: 0;
font-size: 2.2rem;
line-height: 1
}
.recruit__staffInterviewText {
margin-top: 1em;
font-family: YakuHanJPs_Noto, "Aoto Gothic Light", sans-serif
}
.recruit__entry {
margin-top: 80px;
background: #f3f3f3;
padding: 60px 40px
}
@media screen and (max-width: 767px) {
.recruit__entry {
margin-top: 40px;
padding: 30px 20px
}
}
.recruit__entryTitle {
font-size: 2rem;
font-weight: 300;
line-height: 1.6;
letter-spacing: .2em
}
.recruit__entryTitle::before {
display: inline-block;
font-family: "Font Awesome 5 Free";
content: "";
font-weight: 300;
font-size: 3rem;
margin-right: -0.2em
}
.recruit__entryText {
margin-top: 1.2em;
line-height: 2.2;
letter-spacing: .2em;
font-family: YakuHanJPs_Noto, "Aoto Gothic Light", sans-serif
}
.recruit__entryFile {
display: inline-block;
font-weight: 700;
background: #231815;
color: #fff;
margin-top: 1.2em;
padding: .3em 2em;
letter-spacing: .2em;
font-family: YakuHanJPs_Noto, "Aoto Gothic Light", sans-serif
}
.free_consult {
margin-top: 40px
}
@media screen and (max-width: 767px) {
.free_consult {
margin-top: 20px
}
}
.free_consult__mainImg {
display: block;
margin: 0 auto
}
.asolie {
margin-top: 40px
}
@media screen and (max-width: 767px) {
.asolie {
margin-top: 20px
}
}
.asolie__mainImg {
display: block;
margin: 0 auto
}
.asolie__intro {
padding: 0 40px;
margin-top: 60px;
letter-spacing: .2em;
line-height: 2.2
}
@media screen and (max-width: 767px) {
.asolie__intro {
padding: 0 20px;
margin-top: 30px;
letter-spacing: .1em
}
}
.asolie__list {
width: 100%;
max-width: 1080px;
margin: 60px auto 0;
padding: 0 40px
}
@media screen and (max-width: 767px) {
.asolie__list {
margin-top: 30px;
padding: 0 20px
}
}
.asolie__list::after {
content: "";
display: block;
clear: both
}
.asolie__item {
float: left;
margin-top: 2%
}
.asolie__item:nth-child(-n+2) {
margin-top: 0
}
.asolie__item--01 {
width: 49%
}
.asolie__item--02 {
width: 49%;
float: right
}
.asolie__item--03 {
width: 68%
}
.asolie__item--04 {
width: 30%;
float: right
}
.asolie__item--05 {
width: 100%
}
.asolie__item--06 {
width: 32%
}
.asolie__item--06+.asolie__item--06 {
margin-left: 2%
}
.privacy-policy {
width: 100%;
max-width: 1080px;
margin: 60px auto 0;
padding: 0 40px;
text-align: left
}
@media screen and (max-width: 767px) {
.privacy-policy {
margin-top: 30px;
padding: 0 20px
}
}
.privacy-policy__section+.privacy-policy__section {
margin-top: 60px
}
@media screen and (max-width: 767px) {
.privacy-policy__section+.privacy-policy__section {
margin-top: 30px
}
}
.privacy-policy__title {
font-size: 1.8rem;
font-weight: 300;
line-height: 1.6
}
.privacy-policy__text {
margin-top: 1.2em;
font-family: YakuHanJPs_Noto, "Aoto Gothic Light", sans-serif
}
.privacy-policy__text--min {
font-family: serif;
font-size: 1.6rem
}
@media screen and (max-width: 767px) {
.privacy-policy__text--min {
font-size: 1.4rem;
letter-spacing: 0
}
}
.privacy-policy__note {
margin-top: 60px;
border-top: 1px solid #908b89;
padding-top: 40px;
font-size: 1.2rem;
line-height: 1.6
}
@media screen and (max-width: 767px) {
.privacy-policy__note {
margin-top: 30px;
padding-top: 20px
}
}
.privacy-policy__tel {
display: inline-block;
text-decoration: none
}
.privacy-policy__tel::before {
content: "";
display: inline-block;
width: 1.5em;
padding-top: 1em;
background: url(//www.e-sumai.org/wp-content/themes/livia/images/common/logo_freedial_b.svg) no-repeat center center/contain;
margin-right: .5em;
transform: translateY(0.1em)
}
.infoArchive {
text-align: left
}
.infoArchive__list {
width: 100%;
display: flex;
justify-content: space-between;
flex-wrap: wrap
}
@media screen and (max-width: 767px) {
.infoArchive__list {
display: block
}
}
.infoArchive__item {
width: 46.6666666667%;
border-bottom: 1px solid #908b89;
padding-bottom: 30px;
margin-top: 30px;
position: relative
}
@media screen and (max-width: 767px) {
.infoArchive__item {
width: 100%;
padding-bottom: 20px;
margin-top: 20px
}
}
.infoArchive__item:nth-child(-n+2) {
margin-top: 0
}
@media screen and (max-width: 767px) {
.infoArchive__item:nth-child(-n+2) {
margin-top: 20px
}
}
@media screen and (max-width: 767px) {
.infoArchive__item:first-child {
margin-top: 0
}
}
.infoArchive__link {
display: flex;
justify-content: space-between;
width: 100%;
text-decoration: none;
position: relative;
height: 100%
}
.infoArchive__imgBox {
width: 47.5%
}
@media screen and (max-width: 767px) {
.infoArchive__imgBox {
width: 45%
}
}
.infoArchive__img {
display: block
}
.infoArchive__noImg {
padding-top: 65.8333333333%
}
.infoArchive__textBox {
flex: 1;
margin-left: 30px
}
@media screen and (max-width: 767px) {
.infoArchive__textBox {
margin-left: 20px
}
}
.infoArchive__summary {
width: 100%;
display: flex;
align-items: center
}
.infoArchive__iconNew {
position: static;
margin-right: 5px
}
.infoArchive__time {
font-size: 1.2rem;
line-height: 1;
font-family: YakuHanJPs_Noto, "Aoto Gothic Light", sans-serif
}
.infoArchive__title {
font-size: 1.6rem;
line-height: 1.6;
margin-top: .8em;
font-weight: 300
}
@media screen and (max-width: 767px) {
.infoArchive__title {
font-size: 1.2rem
}
}
.infoArchive__text {
line-height: 1.6;
margin-top: 1em
}
.infoSingle {
max-width: 1080px;
text-align: left;
margin-top: 60px
}
@media screen and (max-width: 767px) {
.infoSingle {
margin-top: 30px
}
}
.infoSingle__headerSummary {
width: 100%;
display: flex;
align-items: center
}
.infoSingle__iconNew {
position: static;
margin-right: .5em
}
.infoSingle__headerTime {
font-size: 1.2rem;
letter-spacing: .2em;
line-height: 1;
font-family: YakuHanJPs_Noto, "Aoto Gothic Light", sans-serif
}
.infoSingle__headerWriter {
font-size: 1.2rem;
letter-spacing: .2em;
line-height: 1;
margin-left: 2em;
font-family: YakuHanJPs_Noto, "Aoto Gothic Light", sans-serif
}
.infoSingle__headerTitle {
font-size: 2rem;
font-weight: 300;
line-height: 1.6;
margin-top: .8em
}
.infoSingle__contents {
margin-top: 30px
}
.columnArchive {
text-align: left
}
.columnArchive__imgBox {
width: 35%
}
.columnArchive__img {
display: block
}
.columnArchive__noImg {
padding-top: 98.9795918367%
}
.columnArchive__cate {
font-family: YakuHanJPs_Noto, "Aoto Gothic Light", sans-serif;
margin: 0 0 0 auto
}
.columnSingle {
max-width: 1080px;
text-align: left;
margin-top: 60px
}
@media screen and (max-width: 767px) {
.columnSingle {
margin-top: 30px
}
}
.renovationArchive__intro {
padding: 0 40px;
letter-spacing: .2em;
line-height: 2.2
}
@media screen and (max-width: 767px) {
.renovationArchive__intro {
padding: 0 20px;
letter-spacing: .1em
}
}
.renovationArchive__list {
width: 100%;
display: flex;
flex-wrap: wrap;
margin-top: 60px
}
@media screen and (max-width: 767px) {
.renovationArchive__list {
margin-top: 20px;
text-align: center;
justify-content: space-between
}
}
.renovationArchive__item {
width: 22.25%;
margin: 5% 0 0 3.6666666667%
}
@media screen and (max-width: 767px) {
.renovationArchive__item {
width: 47.5%;
margin: 10% 0 0
}
}
.renovationArchive__item:nth-child(4n+1) {
margin-left: 0
}
.renovationArchive__item:nth-child(-n+4) {
margin-top: 0
}
@media screen and (max-width: 767px) {
.renovationArchive__item:nth-child(-n+4) {
margin-top: 10%
}
}
@media screen and (max-width: 767px) {
.renovationArchive__item:nth-child(-n+2) {
margin-top: 0
}
}
.renovationArchive__link {
display: block;
text-decoration: none;
position: relative
}
.renovationArchive__img {
display: block
}
.renovationArchive__noImg {
padding-top: 65.9176029963%
}
.renovationArchive__title {
font-size: 1.2rem;
margin-top: 1.2em
}
@media screen and (max-width: 767px) {
.renovationArchive__title {
font-size: 1rem;
margin-top: 1em;
line-height: 1.6
}
}
.renovationSingle {
max-width: 1080px;
text-align: left
}
.singleMianImg+.renovationSingle {
margin-top: 50px
}
@media screen and (max-width: 767px) {
.singleMianImg+.renovationSingle {
margin-top: 30px
}
}
.renovationSingle__intro::after {
content: "";
display: block;
clear: both
}
.renovationSingle__introTitleBox {
width: 47%;
float: right;
padding-top: 30px
}
@media screen and (max-width: 767px) {
.renovationSingle__introTitleBox {
width: 100%;
float: none;
padding-top: 0
}
}
.renovationSingle__introMainTitle {
font-size: 2rem;
font-weight: 300;
line-height: 1.6;
letter-spacing: .1em
}
@media screen and (max-width: 767px) {
.renovationSingle__introMainTitle {
text-align: center
}
}
.renovationSingle__introSummary {
border-top: 1px solid #908b89;
border-bottom: 1px solid #908b89;
padding: 15px 0;
margin-top: 20px
}
@media screen and (max-width: 767px) {
.renovationSingle__introSummaryText {
text-align: center
}
}
.renovationSingle__introFamilyBox {
width: 100%;
display: flex;
align-items: flex-start;
line-height: 1.6
}
@media screen and (max-width: 767px) {
.renovationSingle__introFamilyBox {
justify-content: center
}
}
.renovationSingle__introSummaryText+.renovationSingle__introFamilyBox {
margin-top: .3em
}
.renovationSingle__introFamilyTitle {
flex-shrink: 0;
white-space: nowrap
}
.renovationSingle__introFamilyText {
flex: 1
}
@media screen and (max-width: 767px) {
.renovationSingle__introFamilyText {
flex: initial
}
}
.renovationSingle__introImg {
width: 47%;
display: block;
float: left
}
@media screen and (max-width: 767px) {
.renovationSingle__introImg {
width: 60%;
float: none;
margin: 30px auto 0
}
}
.renovationSingle__introTextBox {
width: 47%;
float: right;
margin-top: 30px
}
@media screen and (max-width: 767px) {
.renovationSingle__introTextBox {
width: 100%;
float: none
}
}
.renovationSingle__introTitle {
font-size: 1.8rem;
font-weight: 300;
line-height: 1.6
}
@media screen and (max-width: 767px) {
.renovationSingle__introTitle {
text-align: center
}
}
.renovationSingle__introText {
margin-top: 1em;
font-family: YakuHanJPs_Noto, "Aoto Gothic Light", sans-serif
}
.renovationSingle__gallery {
margin-top: 60px
}
@media screen and (max-width: 767px) {
.renovationSingle__gallery {
margin-top: 40px
}
}
.renovationSingle__gallery--full {
width: 100%;
padding-top: 56.5%;
margin-top: 30px
}
@media screen and (max-width: 767px) {
.renovationSingle__gallery--full {
margin-top: 2.8571428571%
}
}
.renovationSingle__gallery--full:first-child {
margin-top: 0
}
.renovationSingle__gallery--medium {
width: 65%;
padding-top: 44%
}
.renovationSingle__gallery--vertical {
width: 32%;
padding-top: 44%
}
.renovationSingle__gallery--square {
width: 48.5%;
padding-top: 48.5%
}
.renovationSingle__gallerySet {
width: 100%;
display: flex;
justify-content: space-between;
margin-top: 30px
}
@media screen and (max-width: 767px) {
.renovationSingle__gallerySet {
margin-top: 2.8571428571%
}
}
.renovationSingle__gallerySet:first-child {
margin-top: 0
}
.renovationSingle__gallerySection {
width: 100%;
display: flex;
justify-content: space-between
}
.renovationSingle__gallerySection+.renovationSingle__gallerySection {
margin-top: 60px
}
@media screen and (max-width: 767px) {
.renovationSingle__gallerySection+.renovationSingle__gallerySection {
margin-top: 30px
}
}
.renovationSingle__galleryBefore {
position: relative;
width: 47%;
padding-top: 47%
}
.renovationSingle__galleryBefore::after {
content: "";
display: block;
width: 30px;
height: 30px;
border-top: 1px solid #054e3c;
border-right: 1px solid #054e3c;
transform: rotate(45deg) translateY(-50%);
position: absolute;
top: 50%;
right: -25px
}
@media screen and (max-width: 767px) {
.renovationSingle__galleryBefore::after {
width: 12px;
height: 12px;
right: -8px
}
}
.renovationSingle__gallerySection--yokotate .renovationSingle__galleryBefore {
width: 62.676%
}
.renovationSingle__gallerySection--tateyoko .renovationSingle__galleryBefore {
width: 31.324%
}
.renovationSingle__galleryAfter {
position: relative;
width: 47%;
padding-top: 47%
}
.renovationSingle__gallerySection--yokotate .renovationSingle__galleryAfter {
width: 31.324%
}
.renovationSingle__gallerySection--tateyoko .renovationSingle__galleryAfter {
width: 62.676%
}
.renovationSingle__galleryLeft {
position: relative;
width: 48.5%;
padding-top: 48.5%
}
.renovationSingle__gallerySection--yokotate .renovationSingle__galleryLeft {
width: 65%
}
.renovationSingle__gallerySection--tateyoko .renovationSingle__galleryLeft {
width: 32%
}
.renovationSingle__galleryRight {
position: relative;
width: 48.5%;
padding-top: 48.5%
}
.renovationSingle__gallerySection--yokotate .renovationSingle__galleryRight {
width: 32%
}
.renovationSingle__gallerySection--tateyoko .renovationSingle__galleryRight {
width: 65%
}
.renovationSingle__galleryFull {
width: 100%
}
.renovationSingle__galleryFull img {
display: block;
width: 100%
}
.renovationSingle__galleryTitle {
display: inline-block;
font-family: YakuHanJPs_Noto, "Aoto Gothic Light", sans-serif;
font-size: 1.2rem;
font-weight: 500;
line-height: 1;
position: absolute;
top: 0;
left: 0;
color: #fff;
padding: .4em .6em;
z-index: 2;
background: #231815
}
@media screen and (max-width: 767px) {
.renovationSingle__galleryTitle {
font-size: 1rem
}
}
.renovationSingle__galleryAfter .renovationSingle__galleryTitle {
background: #054e3c
}
.owner {
width: 100%;
max-width: 1080px;
margin: 60px auto 0;
padding: 0 40px
}
@media screen and (max-width: 767px) {
.owner {
margin-top: 30px;
padding: 0 20px
}
}
.owner__mainText {
letter-spacing: .2em;
line-height: 2.2
}
@media screen and (max-width: 767px) {
.owner__mainText {
letter-spacing: .1em
}
}
.breadcrumbs {
padding: 0 40px
}
@media screen and (max-width: 767px) {
.breadcrumbs {
padding: 0 20px
}
}
.breadcrumbs__list {
width: 100%;
max-width: 1000px;
margin: 0 auto;
text-align: left;
font-size: 1.2rem;
line-height: 1.5
}
@media screen and (max-width: 767px) {
.breadcrumbs__list {
line-height: 1.6;
font-size: 1em
}
}
.breadcrumbs__item {
display: inline;
font-family: YakuHanJPs_Noto, "Aoto Gothic Light", sans-serif
}
.breadcrumbs__item+.breadcrumbs__item::before {
content: " > "
}
.singlePostPager {
border-top: 1px solid #908b89;
margin-top: 80px;
padding-top: 20px
}
@media screen and (max-width: 767px) {
.singlePostPager {
margin-top: 40px
}
}
.singlePostPager__list {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center
}
.singlePostPager__item {
width: 33%;
text-align: left
}
.singlePostPager__item--center {
text-align: center
}
.singlePostPager__item--next {
text-align: right
}
.singlePostPager__link {
text-decoration: none;
line-height: 1.5;
position: relative
}
.singlePostPager__link--prev {
padding-left: 1.2em
}
.singlePostPager__link--prev::before {
content: "＜";
display: block;
position: absolute;
top: 0;
left: 0
}
.singlePostPager__link--next {
padding-right: 1.2em
}
.singlePostPager__link--next::before {
content: "＞";
display: block;
position: absolute;
top: 0;
right: 0
}
.singlePostPager__link:hover {
text-decoration: underline
}
.singleContents {
font-family: YakuHanJPs_Noto, "Aoto Gothic Light", sans-serif
}
.singleContents::after {
content: "";
display: block;
height: 0;
clear: both
}
.singleContents ul,
.singleContents ol {
list-style: none;
margin: 1em 0;
counter-reset: num
}
.singleContents ul li,
.singleContents ol li {
padding-left: 1em;
line-height: 1.6;
position: relative
}
.singleContents ul li+li,
.singleContents ol li+li {
margin-top: .5em
}
.singleContents ul li::before,
.singleContents ol li::before {
display: block;
position: absolute;
left: 0;
top: 0
}
.singleContents ul li:before {
content: "・"
}
.singleContents ol li:before {
counter-increment: num;
content: counter(num) "."
}
.form__section {
margin-top: 80px;
background: #f3f3f3;
padding: 60px 40px;
font-family: serif
}
@media screen and (max-width: 767px) {
.form__section {
margin-top: 40px;
padding: 30px 20px
}
}
.form__section+.form__section {
background: rgba(0, 0, 0, 0);
padding-top: 0;
padding-bottom: 0;
margin-top: 60px
}
@media screen and (max-width: 767px) {
.form__section+.form__section {
margin-top: 40px
}
}
.form__section--owner {
padding: 0;
background-color: rgba(0, 0, 0, 0)
}
.form__section--event {
background: rgba(0, 0, 0, 0);
padding: 0;
margin-top: 60px
}
@media screen and (max-width: 767px) {
.form__section--event {
margin-top: 40px
}
}
.form__intro {
width: 100%;
max-width: 1000px;
margin: 0 auto;
text-align: center
}
.form__introTitle {
font-size: 2rem;
font-weight: 300;
letter-spacing: .2em;
line-height: 1.6
}
.form__introList {
width: 100%;
display: flex;
justify-content: center;
margin-top: 30px
}
@media screen and (max-width: 767px) {
.form__introList {
flex-wrap: wrap;
justify-content: space-between
}
}
.form__introItem {
width: 22.9%;
background: #fff;
padding: 1.5em 1em;
line-height: 1.6;
display: flex;
justify-content: center;
align-items: center;
letter-spacing: 0;
font-family: YakuHanJPs_Noto, "Aoto Gothic Light", sans-serif
}
@media screen and (max-width: 767px) {
.form__introItem {
width: 48.5%;
margin: 3% 0 0;
font-size: 1rem
}
}
.form__introItem+.form__introItem {
margin-left: 2.8%
}
@media screen and (max-width: 767px) {
.form__introItem+.form__introItem {
margin-left: 0
}
}
@media screen and (max-width: 767px) {
.form__introItem:nth-child(-n+2) {
margin-top: 0
}
}
.form__introItem::before {
display: none !important
}
.form__introCatch {
margin-top: 2em
}
@media screen and (max-width: 767px) {
.form__introCatch {
margin-top: 1em;
letter-spacing: 0
}
}
.form__contact {
margin-top: 60px
}
@media screen and (max-width: 767px) {
.form__contact {
margin-top: 40px
}
}
.form__contactTitle {
font-size: 2rem;
font-weight: 300;
line-height: 1.6;
letter-spacing: .2em
}
.form__contactTitle::before {
display: inline-block;
font-family: "Font Awesome 5 Free";
content: "";
font-weight: 900;
font-size: 3rem;
transform: rotate(-30deg);
margin-right: -0.3em
}
.form__contactText {
margin-top: 1em;
letter-spacing: .2em
}
.form__contactText--large {
font-size: 2rem
}
@media screen and (max-width: 767px) {
.form__contactText--large {
font-size: 1.6rem
}
}
.form__contactTelList {
display: flex;
justify-content: center;
margin-top: 2em;
width: 100%
}
.form__contactTelItem+.form__contactTelItem {
margin-left: 50px
}
.form__contactTelItem::before {
display: none !important
}
.form__contactTelStudio {
font-size: 1.4rem;
font-weight: 700;
line-height: 1.5;
text-align: left
}
.form__contactTel {
display: inline-block;
font-size: 2.4rem;
letter-spacing: .15em;
text-decoration: none;
line-height: 1;
position: relative;
padding-left: 40px;
margin-top: .2em
}
.form__contactTel::before {
content: "";
display: block;
width: 30px;
height: 18px;
background: url(//www.e-sumai.org/wp-content/themes/livia/images/common/logo_freedial_b.svg) no-repeat center center/cover;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-32%)
}
.form__contactTime {
margin-top: .8em
}
.form__reserveBtn {
display: inline-block;
background: #231815;
color: #fff;
font-weight: 700;
letter-spacing: .2em;
padding: .3em 2em;
text-decoration: none;
margin-top: 2em
}
.form__inquiry {
margin-top: 40px
}
.form__inquiryTitle {
font-size: 2rem;
font-weight: 300;
line-height: 1.6;
letter-spacing: .2em
}
.form__inquiryTitle::before {
display: inline-block;
font-family: "Font Awesome 5 Free";
content: "";
font-weight: 400;
font-size: 3rem;
margin-right: -0.1em
}
.form__inquiryText {
margin-top: .5em
}
.form__noteList {
margin-top: 1.2em
}
.form__noteItem {
line-height: 1.6;
padding-left: 1em;
position: relative
}
.form__noteItem+.form__noteItem {
margin-top: .5em
}
.form__noteItem--required {
font-size: 1.6rem;
color: red
}
.form__noteItem::before {
content: "・";
position: absolute;
top: 0;
left: 0
}
.form__inner {
width: 100%;
max-width: 1000px;
margin: 0 auto;
text-align: left
}
.form__table {
width: 100%;
margin-top: 40px
}
.form__th,
.form__td {
border: 1px solid #908b89;
padding: 20px;
text-align: left;
vertical-align: top
}
@media screen and (max-width: 767px) {
.form__th,
.form__td {
width: 100%;
float: left;
padding: .3em 0 1.5em;
border-top: none;
border-right: none;
border-left: none
}
}
.form__th {
width: 34%;
font-weight: 300;
background: #f3f3f3
}
@media screen and (max-width: 767px) {
.form__th {
width: 100%;
border-bottom: none;
padding: 1em 0 0;
background-color: inherit;
font-size: 1.4rem
}
}
.form__th--required::after {
content: "【必須】";
color: red;
font-size: 1.4rem;
background-color: white;
padding: 6px 0px;
}
.form__td--box {
margin-right: 15px
}
.form__td--box:last-child {
margin-right: 0
}
.form__checkBox label,
.form__td .agreement label {
position: relative;
cursor: pointer
}
.form__checkBox label [type=checkbox],
.form__td .agreement label [type=checkbox] {
display: none
}
.form__checkBox label [type=checkbox]:checked+.wpcf7-list-item-label::before,
.form__td .agreement label [type=checkbox]:checked+.wpcf7-list-item-label::before {
transform: rotate(-45deg) scale(1, 1) translate(-14%, 20%) !important
}
.form__checkBox label .wpcf7-list-item-label,
.form__td .agreement label .wpcf7-list-item-label {
position: relative;
cursor: pointer;
display: inline-block;
padding-left: 1.8em
}
.form__checkBox label .wpcf7-list-item-label::before,
.form__td .agreement label .wpcf7-list-item-label::before {
display: block;
position: absolute;
z-index: 1;
top: .5em;
left: .2em;
width: .8em;
height: .5em;
content: "";
transition: transform .4s;
transform: rotate(-45deg) scale(0, 0) translate(-14%, 20%);
border: 3px solid #231815;
border-top-style: none;
border-right-style: none
}
.form__checkBox label .wpcf7-list-item-label::after,
.form__td .agreement label .wpcf7-list-item-label::after {
display: block;
position: absolute;
top: 50%;
left: 0;
width: 1.2em;
height: 1.2em;
content: "";
border: 1px solid #ddd;
background: #fff;
transform: translateY(-50%);
border-radius: 3px
}
.form__textField,
.form__td .wpcf7-free-text {
width: 100%;
min-height: 36px;
max-width: 300px;
border: 1px solid #ddd;
padding: .2em .3em;
transition: background .3s;
border-radius: 3px
}
@media screen and (max-width: 767px) {
.form__textField,
.form__td .wpcf7-free-text {
font-size: 1.6rem;
max-width: initial;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none
}
}
.form__textField::-moz-placeholder,
.form__td .wpcf7-free-text::-moz-placeholder {
-moz-transition: color .3s;
transition: color .3s;
color: #908b89
}
.form__textField::-moz-placeholder,
.form__td .wpcf7-free-text::-moz-placeholder {
-moz-transition: color .3s;
transition: color .3s;
color: #908b89
}
.form__textField::placeholder,
.form__td .wpcf7-free-text::placeholder {
transition: color .3s;
color: #908b89
}
.form__textField:not(:-moz-placeholder-shown),
.form__td .wpcf7-free-text:not(:-moz-placeholder-shown) {
background: #fff
}
.form__textField:focus,
.form__textField:not(:placeholder-shown),
.form__td .wpcf7-free-text:focus,
.form__td .wpcf7-free-text:not(:placeholder-shown) {
background: #fff
}
.form__textField:not(:-moz-placeholder-shown)::-moz-placeholder,
.form__td .wpcf7-free-text:not(:-moz-placeholder-shown)::-moz-placeholder {
color: rgba(0, 0, 0, 0)
}
.form__textField:focus::-moz-placeholder,
.form__textField:not(:placeholder-shown)::-moz-placeholder,
.form__td .wpcf7-free-text:focus::-moz-placeholder,
.form__td .wpcf7-free-text:not(:placeholder-shown)::-moz-placeholder {
color: rgba(0, 0, 0, 0)
}
.form__textField:focus::-moz-placeholder,
.form__textField:not(:placeholder-shown)::-moz-placeholder,
.form__td .wpcf7-free-text:focus::-moz-placeholder,
.form__td .wpcf7-free-text:not(:placeholder-shown)::-moz-placeholder {
color: rgba(0, 0, 0, 0)
}
.form__textField:not(:-moz-placeholder-shown)::placeholder,
.form__td .wpcf7-free-text:not(:-moz-placeholder-shown)::placeholder {
color: rgba(0, 0, 0, 0)
}
.form__textField:focus::placeholder,
.form__textField:not(:placeholder-shown)::placeholder,
.form__td .wpcf7-free-text:focus::placeholder,
.form__td .wpcf7-free-text:not(:placeholder-shown)::placeholder {
color: rgba(0, 0, 0, 0)
}
.form__textField--wide,
.form__td .wpcf7-free-text--wide {
max-width: 100%
}
.form__textField--mini,
.form__td .wpcf7-free-text--mini {
max-width: 10em
}
.form__textField--number,
.form__td .wpcf7-free-text--number {
text-align: right
}
.form__textField:disabled,
.form__td .wpcf7-free-text:disabled {
background: #eee
}
.form__td .wpcf7-free-text {
width: auto;
display: inline-block;
margin-left: .3em
}
.form__td [data-name=your-time] {
display: inline-block;
position: relative;
border: 1px solid #ddd;
background: #fff;
border-radius: 3px
}
.form__td [data-name=your-time]::before {
position: absolute;
top: 50%;
right: .9em;
width: 0;
height: 0;
padding: 0;
content: "";
border-left: 6px solid rgba(0, 0, 0, 0);
border-right: 6px solid rgba(0, 0, 0, 0);
border-top: 6px solid #666;
pointer-events: none;
margin-top: -3px
}
.form__td [data-name=your-time] .form__selectBox {
width: 100%;
padding-right: 1em;
cursor: pointer;
text-indent: .01px;
text-overflow: ellipsis;
border: none;
outline: none;
background: rgba(0, 0, 0, 0);
background-image: none;
box-shadow: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding: .2em 38px .2em .3em
}
@media screen and (max-width: 767px) {
.form__td [data-name=your-time] .form__selectBox {
font-size: 1.6rem
}
}
.form__td [data-name=your-time] .form__selectBox::-ms-expand {
display: none
}
.form__td .wpcf7-list-item {
margin: 0 2em .5em 0
}
@media screen and (max-width: 767px) {
.form__td .wpcf7-list-item {
display: block
}
}
.form__td .wpcf7-list-item:last-child {
margin-right: 0
}
.form__radio label {
position: relative;
cursor: pointer;
line-height: 1
}
.form__radio label input {
display: none
}
.form__radio label input:checked+.wpcf7-list-item-label::before {
transform: scale(1, 1)
}
.form__radio label .wpcf7-list-item-label {
position: relative;
cursor: pointer;
display: inline-block;
padding-left: 1.8em
}
.form__radio label .wpcf7-list-item-label::before {
font-size: 1.4rem;
display: block;
position: absolute;
z-index: 1;
top: .15em;
left: .35em;
width: .7em;
height: .7em;
content: "";
transition: transform .4s;
transform: scale(0, 0);
border-radius: 100%;
background: #054e3c
}
.form__radio label .wpcf7-list-item-label::after {
font-size: 1.4rem;
display: block;
position: absolute;
top: -0.2em;
left: 0;
width: 1.4em;
height: 1.4em;
content: "";
border: 1px solid #ccc;
border-radius: 100%;
background: #fff
}
.form__textArea {
border: 1px solid #ddd;
padding: .2em .3em;
width: 100%;
border-radius: 3px
}
@media screen and (max-width: 767px) {
.form__textArea {
font-size: 1.6rem
}
}
.form__submitBtn {
width: 100%;
max-width: 300px;
display: block;
line-height: 1.4;
padding: .8em 1em;
transition: opacity .8s;
margin: 2em auto 0;
font-weight: 700;
background: #231815;
color: #fff
}
.form__submitBtn:disabled {
opacity: .5
}
.form__submitBtn:hover {
opacity: .5
}
.form__formMessage {
text-align: center
}
.wpcf7 {
text-align: center
}
.wpcf7 .wpcf7-not-valid-tip {
display: none
}
.wpcf7 .wpcf7-not-valid {
background: pink !important;
display: inline-block
}
.wpcf7 .wpcf7-response-output {
margin: 10px 0 0;
padding: 8px 35px 8px 14px;
text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
border-radius: 4px;
border-color: #b94a48 !important;
color: #b94a48
}
.wpcf7 form.sent .wpcf7-response-output {
border-color: #3a87ad !important;
color: #3a87ad
}
.wpcf7 .wpcf7-validation-errors {
color: #b94a48;
background-color: #f2dede;
border: 1px solid #eed3d7;
text-align: center
}
.wpcf7 .wpcf7-mail-sent-ok {
color: #3a87ad;
background-color: #d9edf7;
border: 1px solid #bce8f1;
text-align: center
}
.cmsPagination {
width: 100%;
text-align: center
}
.cmsPagination__list {
list-style: none;
display: flex;
justify-content: center;
align-items: center;
margin-top: 3.125em
}
.cmsPagination__item {
width: 35px;
line-height: 35px;
margin-right: 20px;
display: none
}
@media screen and (min-width: 768px) {
.cmsPagination__item {
display: block
}
}
.cmsPagination__item:last-child {
margin-right: 0
}
@media screen and (max-width: 767px) {
.cmsPagination__sp {
display: block
}
}
.cmsPagination__link {
display: block;
color: inherit;
text-decoration: none;
white-space: nowrap;
transition: color .8s, background .8s;
border: 1px solid #908b89
}
.cmsPagination__noNum .cmsPagination__link {
padding: 0 1em;
border: none
}
.cmsPagination__prev .cmsPagination__link {
position: relative;
padding-left: 2em;
overflow: hidden
}
.cmsPagination__prev .cmsPagination__link::before,
.cmsPagination__prev .cmsPagination__link::after {
content: "";
display: block;
background: #908b89;
bottom: calc(50% - .7em)
}
.cmsPagination__prev .cmsPagination__link::before {
width: 100%;
height: 1px;
position: absolute;
left: 100%
}
@media screen and (max-width: 767px) {
.cmsPagination__prev .cmsPagination__link::before {
left: 0
}
}
.cmsPagination__prev .cmsPagination__link::after {
width: 1px;
height: 15px;
position: absolute;
left: 100%;
transform: rotate(50deg);
transform-origin: bottom left
}
@media screen and (max-width: 767px) {
.cmsPagination__prev .cmsPagination__link::after {
left: 0
}
}
.cmsPagination__prev .cmsPagination__link:hover {
background: rgba(0, 0, 0, 0);
color: #231815
}
.cmsPagination__prev .cmsPagination__link:hover::before,
.cmsPagination__prev .cmsPagination__link:hover::after {
transition: left .4s ease-out;
left: 0
}
.cmsPagination__next .cmsPagination__link {
position: relative;
padding-right: 2em;
overflow: hidden
}
.cmsPagination__next .cmsPagination__link::before,
.cmsPagination__next .cmsPagination__link::after {
content: "";
display: block;
background: #908b89;
bottom: calc(50% - .7em)
}
.cmsPagination__next .cmsPagination__link::before {
width: 100%;
height: 1px;
position: absolute;
right: 100%
}
@media screen and (max-width: 767px) {
.cmsPagination__next .cmsPagination__link::before {
right: 0
}
}
.cmsPagination__next .cmsPagination__link::after {
width: 1px;
height: 15px;
position: absolute;
right: 100%;
transform: rotate(-50deg);
transform-origin: bottom right
}
@media screen and (max-width: 767px) {
.cmsPagination__next .cmsPagination__link::after {
right: 0
}
}
.cmsPagination__next .cmsPagination__link:hover {
background: rgba(0, 0, 0, 0);
color: #231815
}
.cmsPagination__next .cmsPagination__link:hover::before,
.cmsPagination__next .cmsPagination__link:hover::after {
transition: right .4s ease-out;
right: 0
}
.cmsPagination__link:hover,
.cmsPagination__link--noLink {
background: #231815;
color: #fff;
opacity: 1
}
.cmsPagination__noNum .cmsPagination__link--noLink {
opacity: 0
}
.cmsPagination__noNum {
width: auto;
min-width: 35px
}
.sideWidget {
width: 100%;
margin-top: 80px;
display: flex;
justify-content: space-between
}
@media screen and (max-width: 767px) {
.sideWidget {
margin-top: 40px;
display: block
}
}
.sideWidget__box {
width: 100%
}
.sideWidget__box+.sideWidget__box {
margin-left: 50px
}
@media screen and (max-width: 767px) {
.sideWidget__box+.sideWidget__box {
margin: 40px 0 0
}
}
.sideWidget__title {
font-size: 1.6rem;
font-weight: 300;
line-height: 1.6;
border-bottom: 2px solid #908b89;
padding-bottom: .5em
}
.sideWidget li {
border-bottom: 1px solid #908b89;
padding: .8em 0;
line-height: 1.6
}
.sideWidget a {
text-decoration: none
}
.sideWidget a:hover {
text-decoration: underline
}
.spFixBanner {
display: none
}
@media screen and (max-width: 767px) {
.spFixBanner {
display: flex;
width: 100%;
position: fixed;
right: 0;
bottom: 0;
left: 0;
z-index: 99;
background: #fff;
border: 2px solid #054e3c
}
}
.spFixBanner__item {
width: 50%
}
.spFixBanner__link {
display: block;
text-decoration: none;
padding: 8px 0;
color: #0d6e56
}
.spFixBanner__item:first-child .spFixBanner__link,
.spFixBanner__item:nth-child(3) .spFixBanner__link {
background: #0d6e56;
color: #fff
}
.spFixBanner__link:hover {
opacity: 1
}
.spFixBanner__catch {
font-size: 1rem;
line-height: 1;
display: block;
letter-spacing: .1em
}
.spFixBanner__title {
display: block;
font-size: 1.6rem;
line-height: 1;
letter-spacing: .1em;
margin-top: 3px
}
.spFixBanner__title::before {
font-family: "Font Awesome 5 Free";
content: "\f1d8";
font-size: 1.76rem;
vertical-align: sub;
letter-spacing: 0
}
.spFixBanner__tel {
display: block;
font-size: 1.6rem;
line-height: 1;
letter-spacing: .1em;
margin-top: 4px;
color: #054e3c
}
.spFixBanner__tel::before {
content: "";
display: inline-block;
width: 20px;
height: 12px;
background: url(//www.e-sumai.org/wp-content/themes/livia/images/common/logo_freedial_g.svg) no-repeat center center/contain
} * + h3 {
margin-top: 24px;
}
.topInterview__imgBox img{
width:100%;
}
hr {
margin: 24px 0px 12px 0px;
}
p.text{
margin-bottom: 24x;
padding: 6px 0px;
}
article.contents.columnSingle p {
margin-bottom: 0x;
padding: 6px 0px;
}
div.wpcf7{
margin-top: 96px;
} br.sp_only {
display: none;
}
@media screen and (max-width: 767px) {
br.sp_only {
display: block;
}
} .topFAQ {
padding: 0 40px;
margin: 80px auto;
} .pagetop {
display: none;
}
#id_area_update_date{
width: 100%;
max-width: 1024px;
margin-left: auto;
margin-right: auto;
margin-top: 38px;
text-align: right;
padding-right: 24px;
font-size: 1.24rem;
color: #999999;
}
#id_area_update_date > span.area_author{
margin-right: 24px;
}
#id_area_update_date > span.area_author > span.page_author:before{
content: '：';
}
@media screen and (max-width: 480px) {
html {
scroll-behavior: smooth;
}
.pagetop {
height: 50px;
width: 50px;
position: fixed;
right: 20px;
bottom: 70px;
background: #fff;
border: solid 2px #054e3c;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
z-index: 2;
}
.pagetop__arrow {
height: 10px;
width: 10px;
border-top: 3px solid #054e3c;
border-right: 3px solid #054e3c;
transform: translateY(20%) rotate(-45deg);
}
#id_area_update_date{
padding-right: 6px;
}
} .renovation_img {
margin: 5rem auto;
}
.renovation_img ul {
position: relative;
width: 100%;
height: 40vw;
overflow: hidden;
}
.renovation_img ul {
position: relative;
width: 100%;
height: 54vw;
max-height: 800px;
overflow: hidden;
}
.renovation_img ul li {
position: absolute;
box-sizing: border-box;
padding: 1rem;
text-align: right;
}
.renovation_img ul li:nth-child(1) {
width: 25%;
top: 2vw;
left: 0;
}
.renovation_img ul li:nth-child(2) {
width: 15%;
top: 0;
left: 25%;
}
.renovation_img ul li:nth-child(3) {
width: 15%;
top: 4vw;
left: 40%;
}
.renovation_img ul li:nth-child(4) {
width: 25%;
top: 2vw;
right: 20%;
}
.renovation_img ul li:nth-child(5) {
width: 20%;
top: 0;
right: 0;
}
.renovation_img ul li:nth-child(6) {
width: 25%;
left: 0;
bottom: 2vw;
}
.renovation_img ul li:nth-child(7) {
width: 50%;
left: 25%;
bottom: 0;
}
.renovation_img ul li:nth-child(8) {
width: 25%;
right: 0;
bottom: 2vw;
}
@media screen and (max-width: 1400px) {
.renovation_img ul {
height: 60vw;
}
}
@media screen and (max-width: 480px) {
.renovation_img ul {
height: auto;
}
.renovation_img ul li {
position: unset;
width: 100% !important;
}
} ul.pdf_list {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin: 5rem auto;
}
ul.pdf_list li {
width: 20%;
box-sizing: border-box;
padding: 1rem;
font-size: 2rem;
line-height: 150%;
}
@media screen and (max-width: 480px) {
ul.pdf_list li {
font-size: 1.2rem;
}
} .footer__navi {
justify-content: flex-start;
flex-wrap: wrap;
margin: 0 auto;
text-align: center;
}
.footer__navi li {
width: 20%;
margin-bottom: 3rem;
box-sizing: border-box;
padding: 1rem;
}
.footer__navi li a {
color: #fff;
text-decoration: none;
}
.footer__navi li img {
width: 100%;
body.dev_pc & {
max-width: 200px;
}
margin-bottom: 2rem;
}
.footer__navi li ul li {
width: 100%;
line-height: 250%;
font-size: 1.4rem;
margin: 0;
padding: 0;
text-align: left;
}
.footer__navi li .footer__naviLink--btn {
line-height: 200%;
} .footer__navi_first {
font-size: 1.2rem;
line-height: 150%;
}
.footer__navi_first a {
display: block;
width: fit-content;
text-align: center;
}
.footer__summaryLogoImg {
display: block;
margin: 0 auto;
} ul.footer__navi_in li a {
padding-left: 1.5rem;
} .footer__navi_ad {
font-size: 2rem;
line-height: 100%;
text-align: center;
body.dev_mob & {
width: 100%;
}
}
.footer__navi_ad > div{
body.dev_pc & {
width: 200px;
}
body.dev_mob & {
width: 100%;
}
text-align: left;
margin-left:auto;
margin-right: auto;
}
.footer__navi_ad a.footer__summaryTel {
font-size: 2rem;
}
.footer__navi_ad span {
font-size: 1rem;
}
.footer__navi_ad a.btn01.footer__summaryBtn {
margin: 1rem 0 0 0;
max-width: 200px;
} .footer__navi li.footer__navi_last {
width: 50%;
text-align: center;
font-size: 3rem;
position: relative;
}
.footer__navi li.footer__navi_last div {
position: absolute;
left: 0;
bottom: 20%;
width: 100%;
}
.footer__summaryLogoText > span.esumai_group{
margin-top: 4px;
display: block;
}
.footer__summaryLogoText > span.esumai_group:before{
margin-right: 4px;
content: '（';
}
.footer__summaryLogoText > span.esumai_group:after{
margin-left: 4px;
content: '）';
}
.footer_corporation {
text-align: center;
}
li.footer__navi_button {
body.dev_mob & { display: none; }
body.dev_pc & {
padding-left: 48px;
width: 80%;
display:flex;
display:-webkit-flex;
flex-flow:row nowrap;
justify-content: space-around;
align-items:flex-start;
> a {
display: block;
font-size: 1.6rem;
border: 1px solid white;
padding: 24px;
text-align: center;
width: calc(50% - 48px);
position: relative;
&.catalog {
border-color: #054e3c;
background-color: #2d8a73;
}
&.event {
color: #054e3c;
background-color: white;
}
&:after {
position: absolute;
top: 24px;
right: 24px;
content: '>';
}
}
}
}
@media screen and (max-width: 1180px) {
.footer__navi li ul li {
font-size: 1.2rem;
}
}
@media screen and (max-width: 840px) {
.footer__navi li {
width: 50%;
text-align: center;
}
.footer__navi_first a {
width: 100%;
}
.footer__navi li ul {
text-align: center;
}
.footer__navi li {
text-align: center;
}
.footer__navi_ad a.footer__summaryTel {
width: fit-content;
margin: 0 auto;
}
.footer__navi_ad a.btn01.footer__summaryBtn {
margin: 1rem auto 0 auto;
}
.footer__navi li.footer__navi_last {
width: 100%;
}
.footer__navi li.footer__navi_last div {
position: unset;
}
} .topInfo .btn01, 
.topWorks .btn01, 
.topInterview .btn01 {
max-width: 350px;
} .renovation_child {
margin-top: 40px;
}
.renovation_child_sec {
width: 90%;
max-width: 1000px;
text-align: left;
margin: 0 auto;
padding: 0;
box-sizing: border-box;
}
.renovation_child_h2 {
margin: 3rem auto 1rem auto;
}
.renovation_child_h3 {
border-left: solid 5px #666;
padding-left: 10px;
margin: 3rem auto 1rem auto;
}
.renovation_child_sec h3 {
margin: 6rem auto 1rem auto;
}
.header__navi{
min-width: 834px;
} .header__naviItem{
width:120px;
} @media (max-width: 1333px) {
.header__naviItem{
width:110px;
}
} @media (max-width: 1333px) {
.header__naviItem{
width:100px;
}
}
@media screen and (max-width: 1040px) {
.header{
padding-left:18px;
}
a.header__logo{
display:block;
}
}
@media screen and (max-width: 768px) {
.header{
padding-left:0px !important;
}
.header__navi{
min-width:auto
}
a.header__logo{
text-align: left;
height: 100%;
overflow: hidden;
margin-top:0px;
padding: 4px;
}
a.header__logo > img.header__logoImg{
height: 47px;
width: auto !important;
padding: 8px;
}
}
header.header{
visibility: hidden;
}
ul.header__naviList > li.header__naviList:first-child{
display: none !important;
}  ul.footer__navi_in li a {
padding-left: initial;
}
ul.footer__navi_in li.group_title{
opacity: 0.6;
}
.copyright_pc {
display: inline-block;
position: relative;
width: auto;
}
.copyright_sp,
.menu-sp {
display: none;
}
.menu-pc {
display: block;
}
@media screen and (max-width: 480px) {
.copyright_pc,
.menu-pc {
display: none;
}
.copyright_sp,
.menu-sp {
display: block;
}
}
.footer__navi li.footer__navi_last div {
position: initial;
left: 0;
width: 100%;
}
.ps_1 {
width: 100%;
}
.ps_1 > a > i{
color: white;
font-size: 3.4rem;
}
.link_scroll_margin_top{
scroll-margin-top: 84px;
}
table.no_border td{
padding-right: 6px;
border: 0px none;
}
table.no_border caption{
display: none;
}
body.column-template-default img{
margin: 24px 0px;
}
body.column-template-default p.text{
margin: 18px 0px;
} h2.repage {
margin-bottom: 2rem;
}
h2.logoh2.repage {
position: relative;
padding-left: 50px;
}
h2.logoh2.repage{
position: relative;
}
h2.logoh2.repage:before{
content: "";
position: absolute;
background: url(https://www.e-sumai.org/wp-content/themes/livia/images/common/logo_b.svg);
width: 40px;
height: 40px;
background-size: cover;
top: 0;
left: 0;
}
.renovation_reason > div.area{
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 6rem;
flex-flow:row wrap;
-webkit-flex-flow:row wrap;
-moz-flex-flow:row wrap;
-ms-flex-flow:row wrap;
align-items:center;
-webkit-align-items:center;
-moz-align-items:center;
-ms-align-items:center;
}
.renovation_reason > div.area > div{
width: 53%;
}
.renovation_reason > div.area > div > span.hosoku{
font-size: 1.2rem;
}
.renovation_reason > div.area > img {
width: 45%;
}
.renovation_reason > div.area > div > ul{
text-align: left;
display:flex;
display:-webkit-flex;
flex-flow:row wrap;
-webkit-flex-flow:row wrap;
-moz-flex-flow:row wrap;
-ms-flex-flow:row wrap;
justify-content:flex-start;
-webkit-justify-content:flex-start;
-moz-justify-content:flex-start;
-ms-justify-content:flex-start;
align-items:center;
-webkit-align-items:center;
-moz-align-items:center;
-ms-align-items:center;
margin-bottom: 24px;
}
@media screen and (max-width: 520px) {
.renovation_reason > div.area > img{
width: 100% !important;
margin-bottom: 12px;
order: 1;
}
.renovation_reason > div.area > div{
width: 100% !important;
order: 2;
}
}
.renovation_reason > div.area > div > ul > li{
line-height: 2.8rem;
margin:0px 2px;
}
.renovation_reason > div.area > div > ul > li:not(:first-child):before{
margin: 0px 4px 0px 2px;
content: '/';
}
.renovation_reason span.hosoku {
color: #fff;
background: #054e3c;
display: block;
text-align: center;
margin-bottom: 1rem;
font-weight: bold;
font-size: 1.8rem;
}
a.topMovie__link__img{
width:100%;
position: relative;
}
a.topMovie__link__img:before{
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
content: '';
background-image:url(https://www.e-sumai.org/wp-content/themes/livia/images/custom/youtube_logo.webp);
z-index: 99;
display: block;
}
a.topMovie__link__img > img{
object-fit:cover;
width: 267px;
height: 150px;
}
a.topMovie__link__img.big > img{
margin-top: 24px;
width:100%;
display:block;
}
a.topMovie__link__img.big:before{
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
content: '';
background-image:url(https://www.e-sumai.org/wp-content/themes/livia/images/custom/youtube_logo_big.webp);
background-size: cover;
z-index: 99;
display: block;
}
body.dev_pc div.worksSingle__introFlexImg {
display:flex;
display:-webkit-flex;
flex-flow:row nowrap;
-webkit-flex-flow:row nowrap;
-moz-flex-flow:row nowrap;
-ms-flex-flow:row nowrap;
justify-content:flex-start;
-webkit-justify-content:flex-start;
-moz-justify-content:flex-start;
-ms-justify-content:flex-start;
align-items:stretch;
-webkit-align-items:stretch;
-moz-align-items:stretch;
-ms-align-items:stretch;
> img{
height: auto;
contain-intrinsic-size: auto 470px;
object-fit: cover;
}
}
.worksSingle__youtube_small,
.worksSingle__youtube_big
{
width: 100%;
height: auto;
margin-bottom: 12px;
> iframe {
aspect-ratio: 16/8;
height: auto;
width: 100%;
}
}
.worksSingle__youtube_small{
margin-top: 32px;
}
select {
outline: auto !important;
outline-color: #DDDDDD !important;
outline-width: thin !important;
border-radius:2px !important;
padding: 7px !important;
}
@font-face {
font-family: 'Roboto';
src: url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');
font-display: swap;
}
@font-face {
font-family: 'Roboto';
src: url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmEU9fBBc4AMP6lQ.woff2) format('woff2');
font-display: swap;
}