#page_index .ttl_index .en {
font-family: "Lato", sans-serif;
font-size: 4.5rem;
line-height: 1.2;
}
#page_index .ttl_index .ja {
font-size: 1.6rem;
margin-top: 0.5em;
}
@media screen and (max-width: 767px) {
#page_index .ttl_index .ja {
font-size: 1.8rem;
}
}
#page_index .ttl_index .catch {
font-size: 1.4rem;
margin-top: 1em;
}
@media screen and (max-width: 767px) {
#page_index .ttl_index .catch {
font-size: 1.6rem;
}
}
#page_index #sec_fv {
position: relative;
}
#page_index #sec_fv .slider .img img {
width: 100%;
}
@media screen and (max-width: 767px) {
#page_index #sec_fv .slider .img {
position: relative;
width: 100%;
aspect-ratio: 1/2;
overflow: hidden;
}
#page_index #sec_fv .slider .img img {
position: absolute;
height: 100%;
width: auto;
max-width: none;
top: 0;
left: 0;
transform: translateX(-50%);
}
@keyframes fv_pan_lr {
0%   { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
#page_index #sec_fv .slick-slide.slick-active .img img {
animation: fv_pan_lr 3s ease-in-out forwards;
}
}
#page_index #sec_fv .wrap {
margin: 0;
position: absolute;
left: 50%;
top: 0;
translate: -50% 0;
height: 100%;
}
#page_index #sec_fv .catch {
font-size: 3.5rem;
line-height: 1.4;
margin-top: 8rem;
}
@media screen and (max-width: 900px) {
#page_index #sec_fv .catch {
font-size: 2.8rem;
}
}
@media screen and (max-width: 767px) {
#page_index #sec_fv .catch {
font-size: 2.9rem;
margin-top: 11rem;
text-align: center;
}
}
#page_index #sec_fv .ttl {
position: absolute;
left: 50%;
top: 50%;
translate: -50% -50%;
}
#page_index #sec_fv .ttl img {
width: 23rem;
}
@media screen and (min-width: 768px) {
#page_index #sec_fv .ttl img {
width: clamp(14rem, 18vw, 23rem);
}
}
#page_index #sec_intro {
padding-top: 15rem;
overflow: hidden;
position: relative;
z-index: 1;
}
@media screen and (max-width: 767px) {
#page_index #sec_intro {
padding-top: 8rem;
}
#page_index #sec_intro .wrap {
width: 80%;
}
#page_index #sec_intro img {
width: 100%;
}
}
#page_index #sec_intro .box .txt {
font-size: 1.8rem;
line-height: 2.8;
}
#page_index #sec_intro .box .txt + .txt {
margin-top: 2em;
}
@media screen and (max-width: 767px) {
#page_index #sec_intro .box .txt {
font-size: 1.7rem;
line-height: 2.2;
}
}
#page_index #sec_intro .box._01 {
gap: 5rem;
margin-right: max(-10rem, -8vw);
}
#page_index #sec_intro .box._01 .img {
width: clamp(28rem, 46vw, 60rem);
}
@media screen and (max-width: 767px) {
#page_index #sec_intro .box._01 {
margin: 0;
}
#page_index #sec_intro .box._01 .c-imgCol_i {
margin-right: -10vw;
margin-bottom: 2rem;
}
#page_index #sec_intro .box._01 .img {
width: 100%;
}
}
#page_index #sec_intro .box._02 {
gap: 10rem;
margin-top: 8rem;
margin-left: max(-20rem, -15vw);
}
#page_index #sec_intro .box._02 .c-imgCol_i {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 1rem;
}
#page_index #sec_intro .box._02 .img._01 {
width: clamp(30rem, 50vw, 65rem);
}
#page_index #sec_intro .box._02 .img._02 {
width: clamp(20rem, 34vw, 45rem);
}
@media screen and (max-width: 767px) {
#page_index #sec_intro .box._02 {
margin: 4rem -10vw 0;
gap: 0;
}
#page_index #sec_intro .box._02 .c-imgCol_i {
display: contents;
margin: 0;
}
#page_index #sec_intro .box._02 .c-imgCol_t {
padding: 7rem 10vw 4rem;
}
#page_index #sec_intro .box._02 .img._01 {
width: 90vw;
}
#page_index #sec_intro .box._02 .img._02 {
width: 90vw;
margin-left: 10vw;
order: 3;
}
}
#page_index #sec_intro .box._03 {
gap: 0;
margin-top: 8rem;
margin-right: max(-20rem, -15vw);
}
#page_index #sec_intro .box._03 .img {
width: clamp(32rem, 54vw, 70rem);
margin-top: max(-15rem, -10vw);
}
@media screen and (max-width: 767px) {
#page_index #sec_intro .box._03 {
margin: 1rem 0 0;
gap: 7rem;
}
#page_index #sec_intro .box._03 .c-imgCol_i {
margin: 0 -10vw;
}
#page_index #sec_intro .box._03 .img {
width: 100%;
margin: 0;
}
}
#page_index #sec_intro .box._04 {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 1rem;
margin-top: -32rem;
margin-right: -10rem;
}
#page_index #sec_intro .box._04 .img {
width: clamp(28rem, 46vw, 60rem);
}
#page_index #sec_intro .box._04 .img._02 {
margin-right: 37%;
}
@media screen and (max-width: 767px) {
#page_index #sec_intro .box._04 {
margin: 7rem -10vw 0;
}
#page_index #sec_intro .box._04 .img {
width: 65vw;
}
#page_index #sec_intro .box._04 .img._02 {
margin-right: 35%;
}
}
#page_index #sec_products {
background: #8FA56C;
color: #fff;
padding: 25rem 0 10rem;
margin-top: -10rem;
overflow: hidden;
}
@media screen and (max-width: 767px) {
#page_index #sec_products {
padding-top: 15rem;
margin-top: -6rem;
}
#page_index #sec_products .c-btn01 a {
min-width: 10em;
}
}
#page_index #sec_products.color_aw {
background: #A17372;
}
#page_index #sec_products .ttl {
font-family: "Lato", sans-serif;
font-size: 2.5rem;
line-height: 1.4;
letter-spacing: 0.05em;
font-weight: 500;
}
#page_index #sec_products .slider {
margin: 4rem min(-5vw, calc(-50vw + 50rem)) 4rem 0;
padding-bottom: 6rem;
}
@media screen and (max-width: 767px) {
#page_index #sec_products .slider {
margin: 4rem -5vw 6rem;
padding-bottom: 8rem;
}
}
#page_index #sec_products .slider .item {
padding-right: 1rem;
}
#page_index #sec_products .slider .item a {
display: block;
color: #fff;
}
#page_index #sec_products .slider .item .img {
width: 45vw;
}
@media screen and (max-width: 1100px) and (min-width: 768px) {
#page_index #sec_products .slider .item .img {
width: 65vw;
}
}
#page_index #sec_products .slider .item .img img {
width: 100%;
}
@media screen and (max-width: 767px) {
#page_index #sec_products .slider .item .img {
width: 80vw;
}
}
#page_index #sec_products .slider .item .name {
font-family: "Lato", sans-serif;
font-size: 3.5rem;
line-height: 1.4;
font-weight: 700;
margin: 0.5em 0 0.2em;
}
@media screen and (max-width: 767px) {
#page_index #sec_products .slider .item .name, #page_index #sec_products .slider .item .txt {
padding: 0 5vw;
}
#page_index #sec_products .slider .item .name {
font-size: 3rem;
}
}
#page_index #sec_products .slider .slick-arrow {
position: absolute;
left: 0;
bottom: 0;
width: 3rem;
height: 3rem;
overflow: hidden;
text-indent: -1000px;
border-radius: 100%;
background: rgba(255, 255, 255, 0.3);
}
#page_index #sec_products .slider .slick-arrow.slick-next {
scale: -1 1;
margin-left: 4rem;
}
#page_index #sec_products .slider .slick-arrow::before {
content: "";
position: absolute;
left: 50%;
top: 50%;
translate: -30% -50%;
border-bottom: 2px solid #fff;
border-left: 2px solid #fff;
width: 40%;
height: 40%;
rotate: 45deg;
}
@media screen and (max-width: 767px) {
#page_index #sec_products .slider .slick-arrow {
left: 5vw;
width: 4rem;
height: 4rem;
}
#page_index #sec_products .slider .slick-arrow.slick-next {
margin-left: 6rem;
}
}
#page_index #sec_products .slider .slick-slide {
opacity: 0.5;
transition: opacity 0.5s ease;
}
#page_index #sec_products .slider .slick-slide.slick-current {
opacity: 1;
}
#page_index #sec_special {
padding: 10rem 0;
}
@media screen and (max-width: 767px) {
#page_index #sec_special {
padding: 6rem 0;
}
#page_index #sec_special .c-btn01 a {
min-width: 10em;
}
}
#page_index #sec_special .ttl_index {
text-align: center;
}
#page_index #sec_special .list {
margin: 4rem 0;
}
@media screen and (max-width: 767px) {
#page_index #sec_special .list {
gap: 3rem;
}
}
#page_index #sec_special .list .item a {
display: block;
}
#page_index #sec_special .list .item .img {
width: 100%;
aspect-ratio: 1.3333333333;
overflow: hidden;
}
#page_index #sec_special .list .item .img img {
width: 100%;
height: 100%;
object-fit: cover;
}
@media screen and (max-width: 767px) {
#page_index #sec_special .list .item .img {
aspect-ratio: 345/215;
}
}
#page_index #sec_special .list .item .ttl {
font-size: 1.8rem;
line-height: 1.4;
font-weight: 500;
margin-top: 1em;
}
@media screen and (max-width: 767px) {
#page_index #sec_special .list .item .ttl {
font-size: 2.2rem;
}
}
#page_index #sec_special .list .item .name {
font-size: 1.6rem;
margin-top: 0.5em;
}
#page_index #sec_special .list .item .name small {
font-size: 1.4rem;
margin-left: 1em;
}
#page_index #sec_special .list .item .read {
font-family: "Lato", sans-serif;
font-size: 1.8rem;
margin-top: 0.5em;
}
#page_index #sec_special .list .item .read .ico {
background: url(//exgel.jp/jpn/wp-content/themes/exgel/assets/img/common/ico_blank.svg) no-repeat center/contain;
width: 0.8em;
height: 0.8em;
}
#page_index #sec_topics,
#page_index #sec_column {
padding: 10rem 0;
}
@media screen and (max-width: 950px) {
#page_index #sec_topics,
#page_index #sec_column {
padding: 6rem 0;
}
}
#page_index #sec_topics .flex,
#page_index #sec_column .flex {
display: grid;
grid-template-columns: auto 66rem;
}
#page_index #sec_topics .flex .left,
#page_index #sec_column .flex .left {
display: flex;
flex-direction: column;
}
#page_index #sec_topics .flex .left .ttl_index,
#page_index #sec_column .flex .left .ttl_index {
flex: 1 1 auto;
}
@media screen and (max-width: 950px) {
#page_index #sec_topics .flex,
#page_index #sec_column .flex {
display: flex;
flex-direction: column;
}
#page_index #sec_topics .flex .left,
#page_index #sec_column .flex .left {
display: contents;
}
#page_index #sec_topics .flex .left .c-btn01,
#page_index #sec_column .flex .left .c-btn01 {
order: 3;
}
#page_index #sec_topics .flex .left .c-btn01 a,
#page_index #sec_column .flex .left .c-btn01 a {
min-width: 10em;
}
}
#page_index #sec_topics .list,
#page_index #sec_column .list {
gap: 3rem 2rem;
}
@media screen and (max-width: 950px) {
#page_index #sec_topics .list,
#page_index #sec_column .list {
gap: 4rem;
margin: 3rem 0 4rem;
}
}
#page_index #sec_topics .list a,
#page_index #sec_column .list a {
display: block;
}
#page_index #sec_topics .list .img,
#page_index #sec_column .list .img {
width: 100%;
aspect-ratio: 1.6;
overflow: hidden;
}
#page_index #sec_topics .list .img img,
#page_index #sec_column .list .img img {
width: 100%;
height: 100%;
object-fit: cover;
}
#page_index #sec_topics .list .img,
#page_index #sec_column .list .img {
margin-bottom: 1.5rem;
}
#page_index #sec_topics {
background: #F2F2F2;
}
#page_index #sec_topics .list .ttl {
font-size: 2rem;
line-height: 1.4;
}
@media screen and (max-width: 950px) {
#page_index #sec_topics .list .ttl {
font-size: 2.2rem;
}
}
#page_index #sec_topics .list .date {
color: #5F5F5F;
font-family: "Lato", sans-serif;
font-size: 1.4rem;
margin-top: 0.5em;
}
#page_index #sec_column .list .ttl {
font-size: 1.6rem;
line-height: 1.4;
font-weight: 500;
padding-left: 1em;
border-left: 5px solid #aaa;
}
@media screen and (max-width: 950px) {
#page_index #sec_column .list .ttl {
font-size: 1.8rem;
}
}