#page_about #sec_fv {
text-align: center;
padding: 15rem 0;
}
@media screen and (max-width: 767px) {
#page_about #sec_fv {
padding: 12rem 0;
}
}
#page_about #sec_fv .logo img {
width: 23rem;
}
@media screen and (max-width: 767px) {
#page_about #sec_fv .logo img {
width: 18rem;
}
}
#page_about #sec_fv .catch {
font-size: 2.2rem;
letter-spacing: 0.08em;
margin-top: 8rem;
}
#page_about #sec_about .box  {
align-items: center;
}
@media screen and (min-width: 768px) and (max-width: 1400px) {
#page_about #sec_about .box {
width: calc(12 / 14 * 100%);
margin-left: calc(2 / 14 * 100%);
}
}
@media screen and (min-width: 768px) and (max-width: 1400px) {
#page_about #sec_about .wrap.intro {
width: 100%;
max-width: none;
}
}
@media screen and (max-width: 1920px) {
#page_about #sec_about .box {
gap: 0;
}
}
#page_about #sec_about .box .c-imgCol_i { width: calc((750 / 1200) * 100%);
}
#page_about #sec_about .box .c-imgCol_t {
width: calc((450 / 1200) * 100%);
font-size: 1.1428571428571428vw;
}
@media screen and (max-width: 767px) {
#page_about #sec_about .box {
margin-right: 0;
}
#page_about #sec_about .box .c-imgCol_i {
max-width: inherit;
margin-bottom: 0;
order: 1;
margin-top: 2rem;
width: 70%;
}
#page_about #sec_about .box .c-imgCol_t {
order: 0;
}
}
#page_about #sec_about .box .img {
width: 85rem;
}
@media screen and (max-width: 767px) {
#page_about #sec_about .box .img {
width: 100%;
}
}
#page_about #sec_about .box .img img {
width: 100%;
}
#page_about #sec_about .box .txt {
line-height: 2;
}
@media screen and (max-width: 1162px) {
#page_about #sec_about .box .txt{
font-size: 1.3rem;
}
}
@media screen and (min-width: 767px) and (max-width: 962px) {
#page_about #sec_about .box .txt{
font-size: 1rem;
}
#page_about #sec_about .box .txt {
line-height: 1.4;
}
}
#page_about #sec_about .box .txt + .txt {
margin-top: 3rem;
}
@media screen and (min-width: 1401px) { 
#page_about #sec_about .box {
width: 120rem;
margin-right: 0;
}
}
#page_about #sec_about .btns {
margin-top: 15rem;
gap: 5px;
}
@media screen and (max-width: 767px) {
#page_about #sec_about .btns {
margin-top: 10rem;
}
}
#page_about #sec_about .btns a {
display: block;
}
#page_about #sec_about .btns .item {
position: relative;
}
#page_about #sec_about .btns .img {
aspect-ratio: 0.8485714286;
overflow: hidden;
}
#page_about #sec_about .btns .img img {
width: 100%;
height: 100%;
object-fit: cover;
}
#page_about #sec_about .btns .img {
width: 100%;
}
@media screen and (max-width: 767px) {
#page_about #sec_about .btns .img {
aspect-ratio: 5/4;
}
}
#page_about #sec_about .btns .txt {
position: absolute;
top: 0;
left: 0;
padding: 2em;
width: 100%;
font-size: 1.4rem;
font-weight: 500;
}
@media screen and (max-width: 767px) {
#page_about #sec_about .btns .txt {
font-size: 1.8rem;
}
#page_about #sec_about .btns .txt._white {
color: #fff;
}
}
#page_about #sec_about .btns .txt .ico {
position: absolute;
right: 1em;
top: 50%;
translate: 0 -50%;
width: 3rem;
height: 3rem;
background: #000;
border-radius: 100%;
}
#page_about #sec_about .btns .txt .ico::before {
content: "";
position: absolute;
left: 50%;
top: 50%;
translate: -70% -50%;
width: 40%;
height: 40%;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
rotate: 45deg;
} #page_about_material #sec_fv {
background: url(//exgel.jp/jpn/wp-content/themes/exgel/assets/img/about/material/fv@2x.jpg) no-repeat center/cover;
padding: 8rem 0;
}
@media screen and (max-width: 767px) {
#page_about_material #sec_fv {
background-image: url(//exgel.jp/jpn/wp-content/themes/exgel/assets/img/about/material/fv_sp.jpg);
background-size: 100% auto;
background-position: center -240px;
min-height: 260vw;
}
}
#page_about_material #sec_fv .catch {
font-size: 2.2rem;
}
@media screen and (max-width: 767px) {
#page_about_material #sec_fv .catch {
font-size: 2rem;
text-align: center;
}
}
#page_about_material #sec_fv .logo {
margin: 2em 0;
width: 22rem;
}
@media screen and (max-width: 767px) {
#page_about_material #sec_fv .logo {
width: 18rem;
margin: 2em auto;
}
}
#page_about_material #sec_fv .txt {
line-height: 2;
}
#page_about_material #sec_fv .txt + .txt {
margin-top: 1.5em;
}
#page_about_material #sec_material {
padding-top: 8rem;
}
#page_about_material #sec_material .box._01 .catch {
font-size: 1.8rem;
}
#page_about_material #sec_material .box._01 .ttl {
font-size: 2.8rem;
line-height: 1.4;
font-weight: 500;
margin-bottom: 0.3em;
}
@media screen and (max-width: 767px) {
#page_about_material #sec_material .box._01 .catch .ml10 {
font-size: 2.4rem;
}
#page_about_material #sec_material .box._01 .ttl {
display: none;
}
#page_about_material #sec_material .box._01.c-grid3 > div > figure.img {
width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
#page_about_material #sec_material .box._01.c-grid3 > div > figure.img img {
width: 100% !important;
}
.mb10-sp {
margin-bottom: 10px !important;
}
.mb20-sp {
margin-bottom: 20px !important;
}
.mb30-sp {
margin-bottom: 30px !important;
}
}
#page_about_material #sec_material .box._01 .txt {
width: 90%;
}
@media screen and (max-width: 767px) {
#page_about_material #sec_material .box._01 .txt {
width: 100%;
}
} #page_about_history .c-ttl01 {
letter-spacing: 0.08em;
}
#page_about_history .box .txt {
line-height: 2;
}
#page_about_history .box .txt + .txt {
margin-top: 1.5em;
}
@media screen and (max-width: 767px) {
#page_about_history .box._01 .c-imgCol_t > .c-imgCol_i.sp {
margin-top: 2rem;
margin-bottom: 2rem;
}
#page_about_history .box._01 .c-imgCol_t > .c-imgCol_i.sp .img img {
width: 100%;
}
}
@media screen and (min-width: 768px) and (max-width: 1121px) {
#page_about_history .c-ttl01 {
font-size: 2.5vw;
}
#page_about_history .box .txt {
font-size: 1.43vw;
}
#page_about_history .c-mr0,
#page_about_history .c-ml0,
#page_about_history .c-mr10,
#page_about_history .c-ml10 {
margin-right: 0;
margin-left: 0;
}
#page_about_history .pc-none {
display: none !important;
}
}
@media screen and (min-width: 768px) {
#page_about_history .box img[data-pcwidth="70rem"] {
max-width: 50vw;
}
#page_about_history .box img[data-pcwidth="60rem"] {
max-width: 45vw;
}
#page_about_history .box img[data-pcwidth="50rem"] {
max-width: 40vw;
}
} @media screen and (min-width: 768px) {
#page_about_company #breadcrumbs {
position: fixed;
left: 0;
top: 10rem;
width: 100%;
z-index: 999;
}
#page_about_company #breadcrumbs .js-acd-box {
height: 100%;
}
#page_about_company #breadcrumbs .wrap {
align-items: center;
}
#page_about_company #breadcrumbs .nav {
display: flex !important;
align-items: center;
}
#page_about_company #breadcrumbs .js-acd-item {
display: flex !important;
align-items: center;
}
#page_about_company #sec_message.c-pad_first {
padding-top: 13rem;
}
#page_about_company #sec_message,
#page_about_company #sec_company,
#page_about_company #sec_history {
scroll-margin-top: 14rem;
}
}
@media screen and (max-width: 767px) {
#page_about_company #breadcrumbs {
position: fixed;
left: 0;
top: 50px;
width: 100%;
height: 50px;
z-index: 999;
}
#page_about_company #breadcrumbs .wrap {
gap: 0;
margin-right: 0;
width: 95%;
position: relative;
}
#page_about_company #breadcrumbs .list {
flex: 1 1 auto;
}
#page_about_company #breadcrumbs .acd {
order: 3;
width: 50px;
height: 50px;
position: relative;
flex-shrink: 0;
}
#page_about_company #breadcrumbs .js-acd-btn {
order: 3;
width: 50px;
height: 50px;
position: relative;
flex-shrink: 0;
border: none;
background: none;
padding: 0;
cursor: pointer;
}
#page_about_company #breadcrumbs .acd::before, #page_about_company #breadcrumbs .acd::after,
#page_about_company #breadcrumbs .js-acd-btn::before, #page_about_company #breadcrumbs .js-acd-btn::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: none;
translate: -50% -50%;
width: 20px;
height: 1px;
background: #fff;
transition: rotate 0.3s ease;
}
#page_about_company #breadcrumbs .acd::after,
#page_about_company #breadcrumbs .js-acd-btn::after {
rotate: 90deg;
}
#page_about_company #breadcrumbs .acd.is-open::after,
#page_about_company #breadcrumbs .js-acd-btn.is-open::after {
rotate: 175deg;
}
#page_about_company #breadcrumbs .nav {
display: flex;
position: absolute;
left: 0;
top: 100%;
margin: -1px -5vw 0;
width: 100vw;
background: #000;
flex-direction: column;
gap: 0;
padding: 1rem 0;
}
#page_about_company #breadcrumbs .nav li {
padding: 0.5em 2em;
}
#page_about_company #breadcrumbs .nav li a {
font-size: 1.6rem;
}
#page_about_company #sec_message.c-pad_first {
padding-top: calc(6rem + 50px);
}
#page_about_company #sec_message,
#page_about_company #sec_company,
#page_about_company #sec_history {
scroll-margin-top: 100px;
}
}
#page_about_company .c-ttl06 {
margin-bottom: 8rem;
}
@media screen and (max-width: 767px) {
#page_about_company .c-ttl06 {
margin-bottom: 4rem;
}
}
#page_about_company #sec_message .ttl {
text-align: center;
margin-bottom: 6rem;
}
#page_about_company #sec_message .ttl .en {
font-family: "Lato", sans-serif;
font-size: 4.5rem;
line-height: 1.4;
}
#page_about_company #sec_message .ttl .ja {
font-size: 1.6rem;
line-height: 1.4;
margin-top: 0.5em;
}
#page_about_company #sec_message .txt {
line-height: 2;
}
#page_about_company #sec_message .txt + .txt {
margin-top: 2em;
}
#page_about_company #sec_message .name {
font-size: 2.8rem;
line-height: 1.4;
font-weight: 500;
text-align: right;
margin-top: 4rem;
}
#page_about_company #sec_message .name small {
display: inline-block;
font-size: 1.6rem;
margin-bottom: 1em;
}
@media screen and (max-width: 767px) {
#page_about_company #sec_message .name {
font-size: 2.4rem;
}
}
#page_about_company #sec_company {
margin-top: 15rem;
}
@media screen and (max-width: 767px) {
#page_about_company #sec_company {
margin-top: 10rem;
}
}
#page_about_company #sec_company .data .grid {
display: grid;
grid-template-columns: 10em auto;
gap: 1.5em 1em;
}
#page_about_company #sec_company .data .grid .ttl {
font-weight: 500;
}
@media screen and (min-width: 768px) {
#page_about_company #sec_company .data .grid .ttl, #page_about_company #sec_company .data .grid .txt {
font-size: 1.4rem;
}
}
#page_about_company #sec_company .factory .grid {
display: grid;
grid-template-columns: 5em auto;
gap: 0.3em 1em;
}
#page_about_company #sec_company .factory .grid .ttl {
font-weight: 500;
}
#page_about_company #sec_company .factory .grid a:not([href*="tel:"]) {
color: #999;
text-decoration: underline;
}
@media screen and (min-width: 768px) {
#page_about_company #sec_company .factory .grid .ttl, #page_about_company #sec_company .factory .grid .txt {
font-size: 1.4rem;
}
}
#page_about_company #sec_company .factory .sttl {
font-size: 1.6rem;
line-height: 1.4;
font-weight: 500;
border-bottom: 1px solid #aaa;
padding-bottom: 0.5em;
margin-bottom: 1em;
margin-top: 4rem;
}
#page_about_company #sec_company .factory .sttl:first-child {
margin-top: 0;
}
@media screen and (max-width: 767px) {
#page_about_company #sec_company .factory .sttl {
font-size: 2rem;
}
}
#page_about_company #sec_company .factory .name {
font-size: 1.6rem;
line-height: 1.4;
font-weight: 500;
margin: 1.5em 0 1em;
}
@media screen and (max-width: 767px) {
#page_about_company #sec_company .factory .name {
font-size: 1.8rem;
}
}
#page_about_company #sec_company .factory .img {
margin-top: 2rem;
}
#page_about_company #sec_company .factory .img figcaption {
font-size: 1.2rem;
margin-top: 1em;
}
@media screen and (max-width: 767px) {
#page_about_company #sec_company .factory .img figcaption {
font-size: 1.4rem;
}
}
#page_about_company #sec_history {
margin-top: 15rem;
}
@media screen and (max-width: 767px) {
#page_about_company #sec_history {
margin-top: 10rem;
}
}
#page_about_company #sec_history .grid {
display: grid;
grid-template-columns: 18em auto;
gap: 1.5em 1em;
}
#page_about_company #sec_history .grid .ttl {
font-weight: 500;
}
@media screen and (max-width: 767px) {
#page_about_company #sec_history .grid {
grid-template-columns: auto;
gap: 0;
}
#page_about_company #sec_history .grid .ttl {
margin-top: 1.5em;
}
#page_about_company #sec_history .grid .ttl:first-child {
margin-top: 0;
}
#page_about_company #sec_history .grid .txt {
border-bottom: 1px solid #aaa;
padding-bottom: 1.5em;
margin-bottom: 1.5em;
}
#page_about_company #sec_history .grid .txt:last-of-type {
border-bottom: none;
padding-bottom: 0;
margin-bottom: 0;
}
} @media screen and (min-width: 768px) {
#page_about_store #breadcrumbs {
position: fixed;
left: 0;
top: 10rem;
width: 100%;
z-index: 999;
}
#page_about_store #breadcrumbs .js-acd-box {
height: 100%;
}
#page_about_store #breadcrumbs .wrap {
align-items: center;
}
#page_about_store #breadcrumbs .nav {
display: flex !important;
align-items: center;
}
#page_about_store #breadcrumbs .js-acd-item {
display: flex !important;
align-items: center;
}
#page_about_store #sec_intro,
#page_about_store #sec_can,
#page_about_store #sec_navi,
#page_about_store #sec_store {
scroll-margin-top: 14rem;
}
#page_about_store #sec_intro {
padding-top: 4rem;
}
}
@media screen and (max-width: 767px) {
#page_about_store #breadcrumbs {
position: fixed;
left: 0;
top: 50px;
width: 100%;
height: 50px;
z-index: 999;
}
#page_about_store #breadcrumbs .wrap {
gap: 0;
margin-right: 0;
width: 95%;
position: relative;
}
#page_about_store #breadcrumbs .list {
flex: 1 1 auto;
}
#page_about_store #breadcrumbs .js-acd-btn {
order: 3;
width: 50px;
height: 50px;
position: relative;
flex-shrink: 0;
border: none;
background: none;
padding: 0;
cursor: pointer;
}
#page_about_store #breadcrumbs .js-acd-btn::before, #page_about_store #breadcrumbs .js-acd-btn::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: none;
translate: -50% -50%;
width: 20px;
height: 1px;
background: #fff;
transition: rotate 0.3s ease;
}
#page_about_store #breadcrumbs .js-acd-btn::after {
rotate: 90deg;
}
#page_about_store #breadcrumbs .js-acd-btn.is-open::after {
rotate: 175deg;
}
#page_about_store #breadcrumbs .nav {
display: flex;
position: absolute;
left: 0;
top: 100%;
margin: -1px -5vw 0;
width: 100vw;
background: #000;
flex-direction: column;
gap: 0;
padding: 1rem 0;
}
#page_about_store #breadcrumbs .nav li {
padding: 0.5em 2em;
}
#page_about_store #breadcrumbs .nav li a {
font-size: 1.6rem;
}
#page_about_store #sec_intro,
#page_about_store #sec_can,
#page_about_store #sec_navi,
#page_about_store #sec_store {
scroll-margin-top: 100px;
}
#page_about_store #sec_intro {
padding-top: 50px;
}
}
#page_about_store #sec_intro {
padding-bottom: 10rem;
}
@media screen and (max-width: 767px) {
#page_about_store #sec_intro {
padding-bottom: 6rem;
}
}
#page_about_store #sec_intro .fv img {
width: 100%;
}
#page_about_store #sec_intro .ttl {
margin: 8rem 0;
}
#page_about_store #sec_intro .list {
margin-bottom: 8rem;
}
#page_about_store #sec_intro .list img {
width: 100%;
}
@media screen and (max-width: 767px) {
#page_about_store #sec_intro .list {
width: 100vw;
max-width: inherit;
margin-left: -5vw;
margin-right: -5vw;
}
}
#page_about_store #sec_intro .sttl {
background: #F2F2F2;
margin: 0;
padding: 0.3em;
}
#page_about_store #sec_intro .txt + .txt {
margin-top: 2em;
}
#page_about_store #sec_can {
background: #F8FDFF;
padding: 10rem 0;
}
@media screen and (max-width: 767px) {
#page_about_store #sec_can {
padding: 6rem 0;
}
}
#page_about_store #sec_can .ttl {
font-size: 2.6rem;
line-height: 1.6;
font-weight: 500;
text-align: center;
}
@media screen and (max-width: 767px) {
#page_about_store #sec_can .ttl {
font-size: 2.2rem;
}
}
#page_about_store #sec_can .ttl span {
background: url(//exgel.jp/jpn/wp-content/themes/exgel/assets/img/about/store/ttl_line.svg) no-repeat center bottom/contain;
display: inline-block;
padding: 0 1em 1.5em;
}
@media screen and (max-width: 767px) {
#page_about_store #sec_can .ttl span {
padding-left: 0;
padding-right: 0;
}
}
#page_about_store #sec_can .box {
margin-top: 8rem;
}
@media screen and (max-width: 767px) {
#page_about_store #sec_can .box {
margin-top: 4rem;
gap: 1rem;
}
}
#page_about_store #sec_can .box .sttl {
margin-top: 0;
}
#page_about_store #sec_can .box .sttl small {
font-size: 1.8rem;
}
#page_about_store #sec_can .flex {
margin-top: 10rem;
}
@media screen and (max-width: 767px) {
#page_about_store #sec_can .flex {
margin-top: 4rem;
}
}
#page_about_store #sec_can .flex .sttl {
margin-top: 1rem;
}
#page_about_store #sec_can .flex .sttl small {
font-size: 1.6rem;
}
#page_about_store #sec_navi {
padding: 10rem 0;
}
@media screen and (max-width: 767px) {
#page_about_store #sec_navi {
padding: 6rem 0;
}
}
#page_about_store #sec_navi .ttl_sec {
text-align: center;
}
#page_about_store #sec_navi .ttl_sec .big {
font-size: 1.8rem;
}
#page_about_store #sec_navi .ttl_sec .ttl {
font-size: 4rem;
line-height: 1.4;
font-weight: 500;
margin: 0.2em 0 0.1em;
}
#page_about_store #sec_navi .ttl_sec .en {
color: #5F5F5F;
font-family: "Lato", sans-serif;
font-weight: 500;
}
#page_about_store #sec_navi .adviser {
background: #FAFAFA;
border: 1px solid #aaa;
border-radius: 1rem;
padding: 4rem;
margin: 4rem 0;
}
@media screen and (max-width: 767px) {
#page_about_store #sec_navi .adviser {
padding: 5vw;
}
}
#page_about_store #sec_navi .adviser .inner {
max-width: 70rem;
margin: 0 auto;
}
#page_about_store #sec_navi .adviser .comment {
background: url(//exgel.jp/jpn/wp-content/themes/exgel/assets/img/about/store/ttl_line.svg) no-repeat center bottom/contain;
display: inline-block;
padding: 0 0.5em 1.5em;
font-size: 1.8rem;
line-height: 1.4;
font-weight: 500;
}
@media screen and (max-width: 767px) {
#page_about_store #sec_navi .adviser .comment {
display: block;
text-align: center;
}
}
#page_about_store #sec_navi .adviser .ttl {
margin: 0.5em 0;
}
@media screen and (max-width: 767px) {
#page_about_store #sec_navi .adviser .ttl {
font-size: clamp(1.2rem, 4.7vw, 1.8rem);
}
}
#page_about_store #sec_navi .adviser .name {
font-weight: 500;
text-align: center;
}
@media screen and (max-width: 767px) {
#page_about_store #sec_navi .adviser .img {
width: 20rem;
margin: 0 auto;
}
}
#page_about_store #sec_navi .flow {
margin: 5rem 0;
}
#page_about_store #sec_navi .flow .ttl {
font-size: 1.8rem;
padding: 0.3em 1em;
}
#page_about_store #sec_navi .flow .sttl {
font-family: "Lato", sans-serif;
font-size: 2rem;
padding: 0;
margin-bottom: 1rem;
}
#page_about_store #sec_navi .flow .sttl .big {
font-size: 3rem;
margin-left: 0.2em;
}
#page_about_store #sec_navi .flow img {
width: 100%;
}
#page_about_store #sec_navi .contact {
background: #FAFAFA;
max-width: 70rem;
padding: 2rem 2rem 2rem 8rem;
margin: 6rem auto 0;
font-size: 1.8rem;
line-height: 1.6;
font-weight: 500;
position: relative;
}
@media screen and (max-width: 767px) {
#page_about_store #sec_navi .contact {
padding: 5vw 5vw 5vw 15vw;
margin-top: 4rem;
}
}
#page_about_store #sec_navi .contact::before {
content: "";
position: absolute;
left: 3rem;
top: 50%;
translate: 0 -50%;
width: 2rem;
height: 2rem;
border-top: 2px solid #000;
border-right: 2px solid #000;
rotate: 45deg;
}
@media screen and (max-width: 767px) {
#page_about_store #sec_navi .contact::before {
left: 5vw;
}
}
#page_about_store #sec_store {
background: #F2F2F2;
padding: 10rem 0;
}
#page_about_store #sec_store .list {
border-bottom: 1px solid #aaa;
padding-bottom: 4rem;
}
#page_about_store #sec_store .list .flex {
border-top: 1px solid #aaa;
margin-top: 4rem;
padding-top: 4rem;
}
@media screen and (max-width: 767px) {
#page_about_store #sec_store .list .flex {
gap: 0;
margin-top: 0;
padding-top: 0;
border-top: none;
}
}
#page_about_store #sec_store .list .box {
display: flex;
flex-direction: column;
}
@media screen and (min-width: 768px) {
#page_about_store #sec_store .list .box:only-child {
flex: 0 0 calc(50% - 5rem);
}
}
@media screen and (max-width: 767px) {
#page_about_store #sec_store .list .box {
border-top: 1px solid #aaa;
margin-top: 4rem;
padding-top: 3rem;
}
}
#page_about_store #sec_store .list .box .name {
font-size: 1.8rem;
line-height: 1.6;
font-weight: 500;
margin-bottom: 1em;
}
#page_about_store #sec_store .list .box .name small {
font-size: 1.5rem;
}
#page_about_store #sec_store .list .box .table {
flex: 1 1 auto;
display: grid;
grid-template-columns: 10em auto;
}
#page_about_store #sec_store .list .box .table .ttl, #page_about_store #sec_store .list .box .table .txt {
font-size: 1.4rem;
}
#page_about_store #sec_store .list .box .table .ttl {
font-weight: 500;
}
#page_about_store #sec_store .list .box .map {
width: 100%;
height: 28rem;
margin-top: 3rem;
}
#page_about_store #sec_store .list .box .map iframe {
width: 100%;
height: 100%;
}
#page_about_store #sec_store .list .box .map--comingsoon {
display: flex;
align-items: center;
justify-content: center;
max-width: 48rem;
}
#page_about_store #sec_store .list .box .map--comingsoon img {
width: 100%;
height: 100%;
object-fit: cover;
}