@charset "utf-8";
/* CSS Document */


@media only screen and (max-width: 768px) {

}


/* #page_ttl_wrap
----------------------------------------- */
#page_ttl_wrap {
}

#page_ttl_wrap .inner {
    padding-bottom: 14rem;
}

#page_ttl_wrap .page_top {
    width: 100%;
    position: relative;
    margin-top: 5rem;
    display: flex;
    flex-flow: column;
    align-items: center;
}

#page_ttl_wrap .page_top .lead {
    font-size: 1.5rem;
    letter-spacing: 0.08em;
    line-height: calc(28/15);
    font-weight: 700;
    text-align: center;
}

#page_ttl_wrap .page_sec_navi {
    width: 100%;
    margin-top: 5rem;
}
#page_ttl_wrap .page_sec_navi .navi_list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4rem 0;
}
#page_ttl_wrap .page_sec_navi .navi_list > li {
    width: calc(100% / 7);
}
#page_ttl_wrap .page_sec_navi .navi_list a {
    width: 100%;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}
#page_ttl_wrap .page_sec_navi .navi_list a .icon {
    width: 5.6rem;
    height: 5.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
#page_ttl_wrap .page_sec_navi .navi_list a .icon svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
#page_ttl_wrap .page_sec_navi .navi_list a span {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    
    font-size: 1.6rem;
    line-height: 1;
    letter-spacing: 0.06em;
    font-weight: 700;
}
#page_ttl_wrap .page_sec_navi .navi_list a span::after {
    content: '';
    display: block;
    width: 0.8rem;
    height: 0.6rem;
    background: url(../images/pd.svg) no-repeat center center / contain;
    transition: all .6s;
}

#page_ttl_wrap .img_wrap {
    width: 100%;
    margin-top: 6rem;
}

@media only screen and (max-width: 768px) {
#page_ttl_wrap .inner {
    padding-bottom: 6rem;
}
#page_ttl_wrap .page_top {
    margin-top: 3rem;
}
#page_ttl_wrap .page_top .lead {
    text-align: left;
}
    
#page_ttl_wrap .page_sec_navi {
    margin-top: 3rem;
}
#page_ttl_wrap .page_sec_navi .navi_list_wrap {
   display: flex;
    flex-flow: column;
    align-items: center;
    gap: 3rem;
}
#page_ttl_wrap .page_sec_navi .navi_list {
    width: 100%;
    gap: 2.5rem 0;
}
#page_ttl_wrap .page_sec_navi .navi_list > li {
    width: calc(100% / 4);
}
#page_ttl_wrap .page_sec_navi .navi_list_wrap .navi_list:first-child > li {
    width: calc(100% / 3.5);
}
#page_ttl_wrap .page_sec_navi .navi_list a span {
    font-size: 1.3rem;
    letter-spacing: 0.03em;
}
#page_ttl_wrap .page_sec_navi .navi_list a .icon {
    width: 4.2rem;
    height: 4.2rem;
}
#page_ttl_wrap .img_wrap {
    width: 100vw;
    margin-top: 4rem;
}
}




/* .contents
----------------------------------------- */
#contents {
    background-color: #F0F0F0;
}
#contents .inner {
    max-width: none;
    width: 100%;
    display: flex;
    flex-flow: column;
    padding-bottom: 23rem;
}
#contents .layout {
    width: 100%;
    padding: 10rem 0 12rem;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #9B9B9B;
}
#contents .layout:not(:first-child) { 
}

#contents .ttl_wrap {
    width: 100%;
    max-width: 100rem;
    
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#contents .ttl_wrap h2.ttl {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}
#contents .ttl_wrap h2.ttl span {
    font-size: 3.5rem;
    letter-spacing: 0.12em;
    line-height: 1;
    font-weight: 700;
}
#contents .ttl_wrap h2.ttl .icon {
    width: 4rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
#contents .ttl_wrap h2.ttl .icon svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
#contents .ttl_wrap h2.ttl .icon svg path {
    fill: #E20000;
}
#contents .ttl_wrap .area {
    background-color: #DDDDDD;
    border-radius: 0.2rem;
    padding: 0.6rem 1rem;
    display: flex;
}
#contents .ttl_wrap .area span {
    font-size: 1.8rem;
    letter-spacing: 0.03em;
    line-height: 1;
    font-weight: 700;
}

#contents .con_layout {
    width: 100%;
    max-width: 100rem;
    margin-top: 3rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#contents .con_layout .slider_wrap {
    width: calc(450/1000*100%);
}
#contents .con_layout .slider_wrap .img_slider {
    width: 100%;
    position: relative;
}
#contents .con_layout .slider_wrap .img_slider .slide_wrap {
    width:100%;
    aspect-ratio: 450 / 600;
}
#contents .con_layout .slider_wrap .img_slider .slide_wrap img {
    width:100%;
    height: 100%;
    object-fit: cover;
}
#contents .con_layout .slider_wrap .img_slider .swiper-pagination-bullet {
    border-radius: 50%;
    background: #FFFFFF;
    opacity: 0.5;
}
#contents .con_layout .slider_wrap .img_slider .swiper-pagination-bullet-active {
    opacity: 1;
    background: #FFFFFF;
}

#contents .con_layout .txt_wrap {
    width: calc(520/1000*100%);
    display: flex;
    flex-flow: column;
    align-items: center;
}
#contents .con_layout .txt_wrap h3.ttl {
}
#contents .con_layout .txt_wrap h3.ttl span {
    font-size: 2.8rem;
    letter-spacing: 0.06em;
    line-height: calc(40/28);
    font-weight: 700;
}
#contents .con_layout .txt {
    margin-top: 5rem;
    font-size: 1.6rem;
    letter-spacing: 0.08em;
    line-height: calc(30/16);
    font-weight: 700;
}


#contents .point_wrap {
    width: 100%;
    max-width: 100rem;
    margin-top: 6rem;
}
#contents .point_layout {
    width: 100%;
    padding: 6rem 4rem;
    background-color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
}
#contents .point_layout .img_wrap {
    /*width: calc(490/920*100%);*/
}
#contents .point_layout .txt_wrap {
    /*width: calc(520/920*100%);*/
}
#contents .point_layout .txt_wrap h3.ttl {
}
#contents .point_layout .txt_wrap h3.ttl span {
    font-size: 4.6rem;
    letter-spacing: 0.1em;
    line-height: calc(53/46);
    font-weight: 700;
    white-space: nowrap;
}
#contents .point_layout .txt_wrap .txt {
    margin-top: 1rem;
    font-size: 1.8rem;
    letter-spacing: 0.08em;
    line-height: calc(24/18);
    font-weight: 700;
    white-space: nowrap;
}

#contents .carousel {
    margin-top: 6rem;
    overflow: hidden;
    width: 100%;
}

#contents .carousel_wrap {
    display: flex;
    width: max-content;
    animation: carouselLoop 40s linear infinite;
}

#contents .carousel_con {
    flex-shrink: 0;
    width: 28rem;
    height: 28rem;
    margin-right: 1rem;
}

#contents .carousel_con img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@keyframes carouselLoop {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

/*.carousel:hover .carousel_wrap {
    animation-play-state: paused;
}*/


#contents .area_point_wrap {
    margin-top: 5rem;
    width: 100%;
    max-width: 80rem;
    background-color: #FFFFFF;
    border: 3px solid #000000;
    border-radius: 1.2rem;
    /*padding: 2.5rem 4rem;*/
}
#contents .area_point_wrap .area_point_ttl {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding: 2.5rem 4rem;
}
#contents .area_point_wrap .area_point_ttl span {
    font-size: 2.5rem;
    letter-spacing: 0.03em;
    font-weight: 700;
    line-height: 1;
}
#contents .area_point_wrap .area_point_ttl::after {
    content: '';
    display: block;
    width: 1.3rem;
    height: 1.0rem;
    background: url(../images/pd.svg) no-repeat center center / contain;
    transition: all .6s;
}
#contents .area_point_wrap .area_point_ttl.open::after {
    transform: rotate(180deg);
}

#contents .area_point_wrap .area_point_con {
    display: none;
    
    padding: 3rem 4rem;
    padding-top: 0;
}
#contents .area_point_wrap .area_point_layout {
    padding-top: 2.5rem;
    width: 100%;
    
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#contents .area_point_wrap .area_point_layout .img_wrap {
    width: calc(360/714*100%);
}
#contents .area_point_wrap .area_point_layout .txt_wrap {
    width: calc(320/714*100%);
}
#contents .area_point_wrap .area_point_layout .txt_wrap h3.ttl {
}
#contents .area_point_wrap .area_point_layout .txt_wrap h3.ttl span {
    font-size: 2rem;
    letter-spacing: 0.06em;
    line-height: calc(24/20);
    font-weight: 700;
}
#contents .area_point_wrap .area_point_layout .txt_wrap .txt {
    margin-top: 1.5rem;
    font-size: 1.5rem;
    letter-spacing: 0.06em;
    line-height: calc(24/15);
    font-weight: 700;
}


@media screen and (max-width: 768px) {
#contents .layout {
    width: 100%;
    padding: 6rem 0 6rem;
    position: relative;
}
    
#contents .ttl_wrap {
    position: absolute;
    top: 6rem;
    right: 3rem;
    width: 5rem;
    height: 44.3rem;
    writing-mode: vertical-rl;
    align-items: flex-start;
}
#contents .ttl_wrap h2.ttl {
    gap: 0.5rem;
}
#contents .ttl_wrap h2.ttl span {
    font-size: 2.4rem;
}
#contents .ttl_wrap .area span {
    font-size: 1.4rem;
}
    
#contents .con_layout {
    margin-top: 0;
    flex-flow: column;
    gap: 4rem;
}
#contents .con_layout .slider_wrap {
    width: 29.5rem;
    margin-right: auto;
}
#contents .con_layout .slider_wrap .img_slider .slide_wrap {
    width:100%;
    aspect-ratio: 295 / 443;
}
#contents .con_layout .txt_wrap {
    width: 31.5rem;
    margin: auto;
    display: flex;
    flex-flow: column;
    align-items: flex-start;
}
#contents .con_layout .txt_wrap h3.ttl span {
    font-size: 2.0rem;
    letter-spacing: 0.03em;
    line-height: calc(30 / 20);
}
#contents .con_layout .txt {
    margin-top: 2rem;
    font-size: 1.4rem;
    letter-spacing: 0.06em;
    line-height: calc(22 / 14);
}
    
#contents .point_wrap {
    width: 31.5rem;
    margin-top: 3rem;
}
#contents .point_layout {
    padding: 1.5rem 1.5rem;
    flex-flow: column;
    gap: 1rem;
}
#contents .point_layout .txt_wrap {
    display: contents;
}
#contents .point_layout .txt_wrap h3.ttl {
    order: 1;
    padding: 0 2rem;
    margin-right: auto;
}
#contents .point_layout .txt_wrap h3.ttl span {
    font-size: 2.5rem;
    letter-spacing: 0.08em;
    line-height: calc(31 / 25);
    white-space: wrap;
}
#contents .point_layout .img_wrap {
    order: 2;
}
#contents .point_layout .txt_wrap .txt {
    margin-top: 0;
    font-size: 1.0rem;
    letter-spacing: -0.03em;
    line-height: calc(16 / 10);
    white-space: wrap;
    
    order: 3;
}
    
#contents .carousel {
    margin-top: 3rem;
}
#contents .carousel_con {
    width: 15rem;
    height: 15rem;
}
    
#contents .area_point_wrap {
    margin-top: 2rem;
    width: 31.5rem;
}
#contents .area_point_wrap .area_point_ttl {
    padding: 1.5rem 2rem;
}
#contents .area_point_wrap .area_point_ttl span {
    font-size: 1.8rem;
}
    
#contents .area_point_wrap .area_point_con {
    padding: 2rem 2rem;
    padding-top: 0;
}
#contents .area_point_wrap .area_point_layout {
    padding-top: 1.5rem;
    flex-flow: column;
    gap: 2rem;
}
#contents .area_point_wrap .area_point_layout .img_wrap {
    width: 100%;
}
#contents .area_point_wrap .area_point_layout .txt_wrap {
    width: 100%;
}
#contents .area_point_wrap .area_point_layout .txt_wrap h3.ttl span {
    font-size: 1.8rem;
}
#contents .area_point_wrap .area_point_layout .txt_wrap .txt {
    margin-top: 1rem;
    font-size: 1.3rem;
    line-height: calc(21 / 13);
}
}