/* 固定 */
@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Spectral&family=Noto+Sans+JP:wght@400&family=Noto+Serif+JP');

.sp_only {
    display: block;
}

.pc_only {
    display: none;
}

#footer {
    margin-top: 0;
    padding-top: 80px;
    background-color: #fff;
}

img {
    width: 100%;
    height: auto;
}

.fs-l-main {
    width: 100% !important;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    background: #fff;
    position: relative;
    z-index: 0;
}

.fs-l-pageMain {
    width: 100% !important;
    max-width: 100%;
    margin: 0 auto;
}

.main {
    width: 100%;
    text-align: center;
    font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Meiryo', 'メイリオ', 'ＭＳ Ｐゴシック', 'MS P Gothic', Osaka, Arial, Helvetica, Verdana, sans-serif
}

.serif {
    font-family: '游明朝', 'Yu Mincho', YuMincho, 'Hiragino Mincho Pro', serif, 'Noto Serif JP', serif;
    font-weight: 400;
}

.seasons {
    font-family: "the-seasons", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.cinzel {
    font-family: "Cinzel", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

/* 固定 */

#home__LP {
    font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Meiryo', 'メイリオ', 'ＭＳ Ｐゴシック', 'MS P Gothic', Osaka, Arial, Helvetica, Verdana, sans-serif;
    font-feature-settings: "palt";
    overflow: hidden;
}

/* sec_01 */
#home__LP .sec_01 {
    position: relative;
    padding-top: calc(535*(100vw/375));
    padding-bottom: calc(60*(100vw/375));
}

#home__LP .sec_01 .about__bg {
    position: absolute;
    top: 0;
    z-index: -1;
}

#home__LP .sec_01 .about__text {
    color: #576774;
    font-size: calc(12*(100vw/375));
    line-height: 1.75;
    text-align: center;
    margin-bottom: calc(35*(100vw/375));
}

#home__LP .sec_01 .about__anchor {
    display: grid;
    width: calc(342*(100vw/375));
    margin-inline: auto;
    grid-template-columns: repeat(3, calc(107*(100vw/375)));
    justify-content: space-between;
}

#home__LP .sec_01 .about__anchor .anchor__button {
    opacity: 0;
}

/* contents */
#home__LP .section__title {
    background-color: rgba(255, 255, 255, 0.3);
    padding-block: calc(10*(100vw/375));
    position: relative;
    margin-bottom: calc(40*(100vw/375));
}

#home__LP .section__title::before {
    content: "";
    width: calc(337*(100vw/375));
    height: 1px;
    position: absolute;
    top: calc(28*(100vw/375));
}

#home__LP .section__title .sub__title {
    font-size: calc(14*(100vw/375));
    margin-bottom: calc(10*(100vw/375));
    letter-spacing: 0.04em;
    line-height: 1;
    font-weight: lighter;
}

#home__LP .section__title .main__title {
    font-size: calc(36*(100vw/375));
    line-height: 1;
    font-weight: lighter;
}


/* sec_02 */
#home__LP .sec_02 {
    width: 100%;
    color: #4A5F79;
    background-color: #E7EEF5;
    border-radius: 0 calc(100*(100vw/375)) 0 0;
    overflow: hidden;
    padding-top: calc(60*(100vw/375));
    padding-bottom: calc(160*(100vw/375));
}

#home__LP .sec_02 .section__title::before {
    background-color: #A1B3C1;
    right: 0;
}

#home__LP .sec_02 .section__title .sub__title,
#home__LP .sec_02 .section__title .main__title {
    color: #4A5F79;
    padding-left: calc(38*(100vw/375));
}

#home__LP .sec_02 .section__text {
    margin-left: calc(50*(100vw/375));
    font-size: calc(20*(100vw/375));
    display: flex;
    align-items: center;
    margin-bottom: calc(40*(100vw/375));
}

#home__LP .sec_02 .section__text::after {
    content: "";
    display: inline-block;
    width: calc(50*(100vw/375));
    height: calc(32*(100vw/375));
    background-image: url("https://www.tu-hacci.co.jp/img/feature/2508_home-summer/sec01_title_en.png");
    background-repeat: no-repeat;
    background-size: cover;
    margin-left: calc(5*(100vw/375));
}

#home__LP .sec_02 .image__01 {
    width: calc(355*(100vw/375));
    height: calc(243*(100vw/375));
    position: relative;
    margin-left: auto;
    margin-bottom: calc(40*(100vw/375));
}

#home__LP .sec_02 .image__01--01 {
    width: calc(313*(100vw/375));
    height: calc(209*(100vw/375));
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
}

#home__LP .sec_02 .image__01--02 {
    width: calc(168*(100vw/375));
    height: calc(162*(100vw/375));
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 0;
}

#home__LP .sec_02 .main__text {
    text-align: center;
    font-size: calc(12*(100vw/375));
    line-height: 1.75;
    margin-bottom: calc(36*(100vw/375));
}

#home__LP .sec_02 .item__area {
    display: flex;
    margin-bottom: calc(38*(100vw/375));
}

#home__LP .sec_02 .item__area .item__image {
    padding-top: calc(10*(100vw/375));
    padding-left: calc(16*(100vw/375));
    position: relative;
    z-index: 0;
}

#home__LP .sec_02 .item__area .item__image .item__image--img {
    display: block;
    width: calc(170*(100vw/375));
}

#home__LP .sec_02 .item__area .item__image::after {
    content: "";
    width: calc(170*(100vw/375));
    height: calc(255*(100vw/375));
    border-radius: 100vw 100vw 0 0;
    position: absolute;
    background-color: #F1F5FB;
    left: 0;
    top: 0;
    z-index: -1;
}

#home__LP .sec_02 .item__area .item__image--text {
    position: absolute;
    width: calc(55 * (100vw / 375));
    top: calc(20 * (100vw / 375));
    right: calc(-20 * (100vw / 375));
    animation: spin 10s linear infinite;
    pointer-events: none;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

#home__LP .sec_02 .item__area .item__text {
    width: calc(110 * (100vw / 375));
    text-align: center;
    margin-left: calc(40 * (100vw / 375));
    margin-top: calc(50 * (100vw / 375));
    font-size: calc(12 * (100vw / 375));
    position: relative;
    z-index: 0;
    height: fit-content;
}

#home__LP .sec_02 .item__area .item__text::after {
    content: "";
    position: absolute;
    width: calc(348 * (100vw / 375));
    height: calc(257 * (100vw / 375));
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    z-index: -1;
    background-image: url("https://www.tu-hacci.co.jp/img/feature/2508_home-summer/sec01_item01-bg.png");
    background-repeat: no-repeat;
    background-size: cover;
    pointer-events: none;
}

#home__LP .sec_02 .item__area .item__text--name {
    margin-bottom: calc(18*(100vw/375));
}

#home__LP .sec_02 .item__area .item__text--color {
    width: calc(70*(100vw/375));
    margin-inline: auto;
    margin-bottom: calc(30*(100vw/375));
}

#home__LP .sec_02 .image__02 {
    width: calc(246*(100vw/375));
    margin-inline: auto;
    position: relative;
    z-index: 1;
    margin-bottom: calc(24*(100vw/375));
}

#home__LP .sec_02 .slide__area {
    position: relative;
    z-index: 0;
}

#home__LP .sec_02 .slide__area::after {
    content: "";
    position: absolute;
    width: 100vw;
    height: calc(220*(100vw/375));
    background-color: rgba(145, 174, 204, 0.4);
    top: calc(-85*(100vw/375));
    z-index: -1;
}

#home__LP .sec_02 .home__text-swiper {
    margin-bottom: calc(24*(100vw/375));
}

#home__LP .sec_02 .home__text-swiper .swiper-wrapper,
#home__LP .sec_02 .home__image-swiper .swiper-wrapper {
    transition-timing-function: linear;
}

/* スライド */
#home__LP .sec_02 .home__text-swiper .swiper-wrapper {
    align-items: center;
}

#home__LP .sec_02 .home__text-swiper .swiper-wrapper .swiper-slide {
    width: calc(110*(100vw/375)) !important;
    margin-right: calc(15*(100vw/375));
    display: flex;
    align-items: center;
}

/* #home__LP .sec_02 .home__text-swiper .swiper-wrapper .swiper-slide.slide02 {
    width: calc(95*(100vw/375)) !important;
    margin-right: calc(15*(100vw/375));
} */

/* スライド内の画像 */
#home__LP .sec_02 .home__text-swiper .swiper-wrapper .swiper-slide img {
    width: auto;
    height: 100%;
}

/* スライド */
#home__LP .sec_02 .home__image-swiper .swiper-wrapper .swiper-slide {
    width: calc(140*(100vw/375)) !important;
    height: calc(208*(100vw/375)) !important;
    margin-right: calc(15*(100vw/375));
}

/* スライド内の画像 */
#home__LP .sec_02 .home__image-swiper .swiper-wrapper .swiper-slide img {
    width: auto;
    height: 100%;
}


/* sec_03 */
#home__LP .sec_03 {
    width: 100%;
    color: #6C564D;
    background-color: #EAE5E1;
    border-radius: calc(100*(100vw/375)) 0 0 0;
    overflow: hidden;
    padding-top: calc(60*(100vw/375));
    padding-bottom: calc(180 * (100vw / 375));
    margin-top: calc(-100 * (100vw / 375));
}

#home__LP .sec_03 .section__title::before {
    background-color: #6C564D;
    left: 0;
}

#home__LP .sec_03 .section__title .sub__title,
#home__LP .sec_03 .section__title .main__title {
    color: #6C564D;
    padding-right: calc(38*(100vw/375));
    text-align: right;
}

#home__LP .sec_03 .section__text {
    font-size: calc(20*(100vw/375));
    display: flex;
    align-items: center;
    margin-bottom: calc(30*(100vw/375));
    justify-content: center;
}

#home__LP .sec_03 .section__text::after {
    content: "";
    display: inline-block;
    width: calc(50*(100vw/375));
    height: calc(32*(100vw/375));
    background-image: url("https://www.tu-hacci.co.jp/img/feature/2508_home-summer/sec02_title_en.png");
    background-repeat: no-repeat;
    background-size: cover;
    margin-left: calc(5*(100vw/375));
}

#home__LP .sec_03 .main__text {
    text-align: center;
    font-size: calc(12*(100vw/375));
    line-height: 1.75;
    margin-bottom: calc(36*(100vw/375));
}

#home__LP .sec_03 .item__list {
    display: flex;
    margin-bottom: calc(40*(100vw/375));
    position: relative;
    z-index: 0;
}

#home__LP .sec_03 .item__list::after {
    content: "";
    width: calc(338*(100vw/375));
    height: calc(180*(100vw/375));
    background-color: rgba(196, 184, 177, 0.3);
    position: absolute;
    top: calc(36*(100vw/375));
    left: 0;
    z-index: -1;
}

#home__LP .sec_03 .item__list li {
    width: calc(172*(100vw/375));
    margin-left: calc(15*(100vw/375));
    text-align: center;
}

#home__LP .sec_03 .item__list li .item__image {
    display: block;
    margin-bottom: calc(20*(100vw/375));
}

#home__LP .sec_03 .item__list li .item__text {
    font-size: calc(12*(100vw/375));
}

#home__LP .sec_03 .item__list li .item__text--name {
    margin-top: calc(20*(100vw/375));
    margin-bottom: calc(18*(100vw/375));
}

#home__LP .sec_03 .item__list li .item__text--color {
    margin-inline: auto;
    margin-bottom: calc(20*(100vw/375));
}

#home__LP .sec_03 .item__list li .item__text--button {
    width: calc(110*(100vw/375));
    margin-inline: auto;
}

#home__LP .sec_03 .item__list .item__list--content01 {
    position: relative;
}

#home__LP .sec_03 .item__list .item__list--content01 .item__en--text {
    position: absolute;
    width: calc(42 * (100vw / 375));
    top: calc(5 * (100vw / 375));
    right: calc(-15 * (100vw / 375));
    pointer-events: none;
}

#home__LP .sec_03 .item__list .item__list--content01 .item__text--color {
    width: calc(55*(100vw/375));
}

#home__LP .sec_03 .item__list .item__list--content02 {
    margin-top: calc(90*(100vw/375));
}

#home__LP .sec_03 .item__list .item__list--content02 .item__text--color {
    width: calc(40*(100vw/375));
}

#home__LP .sec_03 .item__content {
    margin-bottom: calc(60*(100vw/375));
}

#home__LP .sec_03 .item__content .item__content--image {
    position: relative;
    padding-top: calc(126*(100vw/375));
    margin-bottom: calc(24*(100vw/375));
}

#home__LP .sec_03 .item__content .item__content--image__01 {
    position: absolute;
    left: 0;
    top: 0;
    width: calc(187*(100vw/375));
}

#home__LP .sec_03 .item__content .item__content--image__02 {
    width: calc(262*(100vw/375));
    position: relative;
    margin-left: auto;
}

#home__LP .sec_03 .item__content .item__content--image__02--text {
    width: calc(19*(100vw/375));
    position: absolute;
    top: calc(70*(100vw/375));
    right: calc(270 * (100vw / 375));
}

#home__LP .sec_03 .item__content .item__content--text .name {
    text-align: center;
    font-size: calc(12*(100vw/375));
    margin-bottom: calc(18*(100vw/375));
}

#home__LP .sec_03 .item__content .item__content--text .color {
    width: calc(55*(100vw/375));
    margin-inline: auto;
    margin-bottom: calc(20*(100vw/375));
}

#home__LP .sec_03 .item__content .item__content--text .button {
    width: calc(110*(100vw/375));
    margin-inline: auto;
    margin-bottom: calc(34*(100vw/375));
}


#home__LP .sec_03 .slide__area {
    position: relative;
    z-index: 0;
}

#home__LP .sec_03 .slide__area::after {
    content: "";
    position: absolute;
    width: 100vw;
    height: calc(206*(100vw/375));
    background-color: rgba(108, 86, 77, 0.25);
    top: calc(-20*(100vw/375));
    z-index: -1;
}

#home__LP .sec_03 .home__text-swiper {
    margin-bottom: calc(24*(100vw/375));
}

#home__LP .sec_03 .home__text-swiper .swiper-wrapper,
#home__LP .sec_03 .home__image-swiper .swiper-wrapper {
    transition-timing-function: linear;
}

/* スライド */
#home__LP .sec_03 .home__text-swiper .swiper-wrapper .swiper-slide {
    width: calc(55*(100vw/375)) !important;
    margin-right: calc(15*(100vw/375));
    display: flex;
    align-items: center;
}

/* スライド内の画像 */
#home__LP .sec_03 .home__text-swiper .swiper-wrapper .swiper-slide img {
    width: auto;
    height: 100%;
}

/* スライド */
#home__LP .sec_03 .home__image-swiper .swiper-wrapper .swiper-slide {
    width: calc(140*(100vw/375)) !important;
    height: calc(208*(100vw/375)) !important;
    margin-right: calc(15*(100vw/375));
}

/* スライド内の画像 */
#home__LP .sec_03 .home__image-swiper .swiper-wrapper .swiper-slide img {
    width: auto;
    height: 100%;
}



/* sec_04 */
#home__LP .sec_04 {
    width: 100%;
    color: #526C72;
    background-color: #E4EAE8;
    border-radius: 0 calc(100*(100vw/375)) 0 0;
    overflow: hidden;
    padding-top: calc(60*(100vw/375));
    padding-bottom: calc(60*(100vw/375));
    margin-top: calc(-120*(100vw/375));
}

#home__LP .sec_04 .section__title::before {
    background-color: #526C72;
    right: 0;
}

#home__LP .sec_04 .section__title .sub__title,
#home__LP .sec_04 .section__title .main__title {
    color: #526C72;
    padding-left: calc(38*(100vw/375));
}

#home__LP .sec_04 .section__text {
    margin-left: calc(50*(100vw/375));
    font-size: calc(20*(100vw/375));
    display: flex;
    align-items: center;
    margin-bottom: calc(20*(100vw/375));
}

#home__LP .sec_04 .section__text::after {
    content: "";
    display: inline-block;
    width: calc(50*(100vw/375));
    height: calc(32*(100vw/375));
    background-image: url("https://www.tu-hacci.co.jp/img/feature/2508_home-summer/sec03_title_en.png");
    background-repeat: no-repeat;
    background-size: cover;
    margin-left: calc(5*(100vw/375));
}

#home__LP .sec_04 .main__text {
    text-align: left;
    font-size: calc(12*(100vw/375));
    line-height: 1.75;
    margin-bottom: calc(36 * (100vw / 375));
    margin-left: calc(50 * (100vw / 375));
}

#home__LP .sec_04 .flex {
    display: flex;
    margin-bottom: calc(40*(100vw/375));
    position: relative;
    z-index: 0;
}

#home__LP .sec_04 .flex::after {
    content: "";
    position: absolute;
    width: calc(246*(100vw/375));
    height: calc(532*(100vw/375));
    right: 0;
    top: calc(152*(100vw/375));
    z-index: -1;
    background-color: rgba(155, 178, 168, 0.3);
}

#home__LP .sec_04 .image__01 {
    width: calc(172*(100vw/375));
    position: relative;
    margin-right: calc(12*(100vw/375));
    margin-top: calc(135*(100vw/375));
}

#home__LP .sec_04 .image__01 .image__01--text {
    position: absolute;
    width: calc(60 * (100vw / 375));
    top: calc(-10 * (100vw / 375));
    right: 0;
    animation: spin 10s linear infinite;
    pointer-events: none;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

#home__LP .sec_04 .item__image {
    display: block;
    margin-bottom: calc(18*(100vw/375));
}

#home__LP .sec_04 .item__text--name {
    text-align: center;
    font-size: calc(12*(100vw/375));
    margin-bottom: calc(18*(100vw/375));
}

#home__LP .sec_04 .item__text--color {
    margin-inline: auto;
    margin-bottom: calc(20*(100vw/375));
}

#home__LP .sec_04 .item__text--button {
    width: calc(110*(100vw/375));
    margin-inline: auto;
}

#home__LP .sec_04 .item__content--01 {
    width: calc(172*(100vw/375));
}

#home__LP .sec_04 .item__content--01 .item__text--color {
    width: calc(70*(100vw/375));
}

#home__LP .sec_04 .item__content--02 {
    width: calc(228 * (100vw / 375));
    margin-inline: auto;
    margin-top: calc(-45 * (100vw / 375));
    margin-bottom: calc(60 * (100vw / 375));
    position: relative;
    z-index: 1;
}

#home__LP .sec_04 .item__content--02 .item__text--color {
    width: calc(55*(100vw/375));
}



#home__LP .sec_04 .item__area {
    display: flex;
    margin-bottom: calc(38*(100vw/375));
}

#home__LP .sec_04 .item__area .item__image {
    padding-top: calc(10*(100vw/375));
    padding-left: calc(16*(100vw/375));
    position: relative;
    z-index: 0;
}

#home__LP .sec_04 .item__area .item__image .item__image--img {
    display: block;
    width: calc(170*(100vw/375));
}

#home__LP .sec_04 .item__area .item__image::after {
    content: "";
    width: calc(170*(100vw/375));
    height: calc(255*(100vw/375));
    border-radius: 100vw 100vw 0 0;
    position: absolute;
    background-color: #F1F5FB;
    left: 0;
    top: 0;
    z-index: -1;
}

#home__LP .sec_04 .item__area .item__text {
    width: calc(110 * (100vw / 375));
    text-align: center;
    margin-left: calc(40 * (100vw / 375));
    margin-top: calc(50 * (100vw / 375));
    font-size: calc(12 * (100vw / 375));
    position: relative;
    z-index: 0;
    height: fit-content;
}

#home__LP .sec_04 .item__area .item__text::after {
    content: "";
    position: absolute;
    width: calc(348 * (100vw / 375));
    height: calc(257 * (100vw / 375));
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    z-index: -1;
}

#home__LP .sec_04 .item__area .item__text--name {
    margin-bottom: calc(18*(100vw/375));
}

#home__LP .sec_04 .item__area .item__text--color {
    width: calc(70*(100vw/375));
    margin-inline: auto;
    margin-bottom: calc(30*(100vw/375));
}

#home__LP .sec_04 .image__02 {
    width: 100%;
    position: relative;
    z-index: 1;
}

#home__LP .sec_04 .slide__area {
    position: relative;
    z-index: 0;
}

#home__LP .sec_04 .slide__area::after {
    content: "";
    position: absolute;
    width: 100vw;
    height: calc(180 * (100vw / 375));
    background-color: rgba(82, 108, 114, 0.3);
    top: calc(-25 * (100vw / 375));
    z-index: -1;
}

#home__LP .sec_04 .home__text-swiper {
    margin-bottom: calc(24*(100vw/375));
}

#home__LP .sec_04 .home__text-swiper .swiper-wrapper,
#home__LP .sec_04 .home__image-swiper .swiper-wrapper {
    transition-timing-function: linear;
}

/* スライド */
#home__LP .sec_04 .home__text-swiper .swiper-wrapper .swiper-slide {
    width: calc(98*(100vw/375)) !important;
    margin-right: calc(15*(100vw/375));
    display: flex;
    align-items: center;
}

/* スライド内の画像 */
#home__LP .sec_04 .home__text-swiper .swiper-wrapper .swiper-slide img {
    width: auto;
    height: 100%;
}

/* スライド */
#home__LP .sec_04 .home__image-swiper .swiper-wrapper .swiper-slide {
    width: calc(140*(100vw/375)) !important;
    height: calc(208*(100vw/375)) !important;
    margin-right: calc(15*(100vw/375));
}

/* スライド内の画像 */
#home__LP .sec_04 .home__image-swiper .swiper-wrapper .swiper-slide img {
    display: block;
    width: auto;
    height: 100%;
}



/* sec_05 */
#home__LP .sec_05 {
    background-color: #E9EFF7;
    width: 100%;
    padding: calc(33*(100vw/375)) 0;
}

#home__LP .sec_05 .all_button {
    display: block;
    width: calc(343*(100vw/375));
    margin-inline: auto;
}

/* アニメーションテンプレート */
.smooth {
    clip-path: inset(0 100% 0 0);
    transition: 1.4s cubic-bezier(0.37, 0, 0.63, 1);
    transition-property: clip-path;
}

.smooth.tate {
    clip-path: inset(0 0 100% 0);
}

.smooth._delay {
    transition-delay: 0.5s;
}

.smooth.is-active {
    clip-path: inset(0);
    transition-delay: 0.5s;
}

.fade {
    opacity: 0;
}

.fade._delay {
    animation-delay: 1.5s;
    opacity: 0;
}

.fade.is-active {
    animation-name: fade_anim;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

@keyframes fade_anim {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.fade._zoom {
    transform: scale(1.2);
}

.fade._zoom.is-active {
    animation-name: zoom_anim;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes zoom_anim {
    from {
        opacity: 0;
        transform: scale(1.2);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.fade._blur.is-active {
    animation-name: blur_anim;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

@keyframes blur_anim {
    from {
        opacity: 0;
        filter: blur(5px);
    }

    to {
        opacity: 1;
        filter: blur(0);
    }
}

.fadeUp {
    animation-name: fadeUpAnime;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes fadeUpAnime {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* アニメーションテンプレート */




/* PCサイズ */
@media screen and (min-width: 700px) {
    .sp_only {
        display: block;
    }

    .pc_only {
        display: none;
    }

    #home__LP {
        max-width: 800px;
        margin-inline: auto;
    }

    /* sec_01 */
    #home__LP .sec_01 {
        position: relative;
        padding-top: calc(535*2px);
        padding-bottom: calc(60*2px);
    }

    #home__LP .sec_01 .about__bg {
        position: absolute;
        top: 0;
        z-index: -1;
    }

    #home__LP .sec_01 .about__text {
        color: #576774;
        font-size: calc(12*2px);
        line-height: 1.75;
        text-align: center;
        margin-bottom: calc(35*2px);
    }

    #home__LP .sec_01 .about__anchor {
        display: grid;
        width: calc(342*2px);
        margin-inline: auto;
        grid-template-columns: repeat(3, calc(107*2px));
        justify-content: space-between;
    }

    /* contents */
    #home__LP .section__title {
        background-color: rgba(255, 255, 255, 0.3);
        padding-block: calc(10*2px);
        position: relative;
        margin-bottom: calc(40*2px);
    }

    #home__LP .section__title::before {
        content: "";
        width: calc(337*2px);
        height: 1px;
        position: absolute;
        top: calc(28*2px);
    }

    #home__LP .section__title .sub__title {
        font-size: calc(14*2px);
        margin-bottom: calc(10*2px);
        letter-spacing: 0.04em;
        line-height: 1;
        font-weight: lighter;
    }

    #home__LP .section__title .main__title {
        font-size: calc(36*2px);
        line-height: 1;
        font-weight: lighter;
    }


    /* sec_02 */
    #home__LP .sec_02 {
        width: 100%;
        color: #4A5F79;
        background-color: #E7EEF5;
        border-radius: 0 calc(100*2px) 0 0;
        overflow: hidden;
        padding-top: calc(60*2px);
        padding-bottom: calc(160*2px);
    }

    #home__LP .sec_02 .section__title::before {
        background-color: #A1B3C1;
        right: 0;
    }

    #home__LP .sec_02 .section__title .sub__title,
    #home__LP .sec_02 .section__title .main__title {
        color: #4A5F79;
        padding-left: calc(38*2px);
    }

    #home__LP .sec_02 .section__text {
        margin-left: calc(50*2px);
        font-size: calc(20*2px);
        display: flex;
        align-items: center;
        margin-bottom: calc(40*2px);
    }

    #home__LP .sec_02 .section__text::after {
        content: "";
        display: inline-block;
        width: calc(50*2px);
        height: calc(32*2px);
        background-image: url("https://www.tu-hacci.co.jp/img/feature/2508_home-summer/sec01_title_en.png");
        background-repeat: no-repeat;
        background-size: cover;
        margin-left: calc(5*2px);
    }

    #home__LP .sec_02 .image__01 {
        width: calc(355*2px);
        height: calc(243*2px);
        position: relative;
        margin-left: auto;
        margin-bottom: calc(40*2px);
    }

    #home__LP .sec_02 .image__01--01 {
        width: calc(313*2px);
        height: calc(209*2px);
        position: absolute;
        top: 0;
        right: 0;
        z-index: 1;
    }

    #home__LP .sec_02 .image__01--02 {
        width: calc(168*2px);
        height: calc(162*2px);
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 0;
    }

    #home__LP .sec_02 .main__text {
        text-align: center;
        font-size: calc(12*2px);
        line-height: 1.75;
        margin-bottom: calc(36*2px);
    }

    #home__LP .sec_02 .item__area {
        display: flex;
        margin-bottom: calc(38*2px);
    }

    #home__LP .sec_02 .item__area .item__image {
        padding-top: calc(10*2px);
        padding-left: calc(16*2px);
        position: relative;
        z-index: 0;
    }

    #home__LP .sec_02 .item__area .item__image .item__image--img {
        display: block;
        width: calc(170*2px);
    }

    #home__LP .sec_02 .item__area .item__image::after {
        content: "";
        width: calc(170*2px);
        height: calc(255*2px);
        border-radius: 100vw 100vw 0 0;
        position: absolute;
        background-color: #F1F5FB;
        left: 0;
        top: 0;
        z-index: -1;
    }

    #home__LP .sec_02 .item__area .item__image--text {
        position: absolute;
        width: calc(55*2px);
        top: calc(20*2px);
        right: calc(-20*2px);
        animation: spin 10s linear infinite;
    }

    @keyframes spin {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }

    #home__LP .sec_02 .item__area .item__text {
        width: calc(110*2px);
        text-align: center;
        margin-left: calc(40*2px);
        margin-top: calc(50*2px);
        font-size: calc(12*2px);
        position: relative;
        z-index: 0;
        height: fit-content;
    }

    #home__LP .sec_02 .item__area .item__text::after {
        content: "";
        position: absolute;
        width: calc(348*2px);
        height: calc(257*2px);
        top: 50%;
        left: 50%;
        translate: -50% -50%;
        z-index: -1;
    }

    #home__LP .sec_02 .item__area .item__text--name {
        margin-bottom: calc(18*2px);
    }

    #home__LP .sec_02 .item__area .item__text--color {
        width: calc(70*2px);
        margin-inline: auto;
        margin-bottom: calc(30*2px);
    }

    #home__LP .sec_02 .image__02 {
        width: calc(246*2px);
        margin-inline: auto;
        position: relative;
        z-index: 1;
        margin-bottom: calc(24*2px);
    }

    #home__LP .sec_02 .slide__area {
        position: relative;
        z-index: 0;
    }

    #home__LP .sec_02 .slide__area::after {
        content: "";
        position: absolute;
        width: 100vw;
        height: calc(220*2px);
        background-color: rgba(145, 174, 204, 0.4);
        top: calc(-85*2px);
        z-index: -1;
    }

    #home__LP .sec_02 .home__text-swiper {
        margin-bottom: calc(24*2px);
    }

    #home__LP .sec_02 .home__text-swiper .swiper-wrapper,
    #home__LP .sec_02 .home__image-swiper .swiper-wrapper {
        transition-timing-function: linear;
    }

    /* スライド */
    #home__LP .sec_02 .home__text-swiper .swiper-wrapper {
        align-items: center;
    }

    #home__LP .sec_02 .home__text-swiper .swiper-wrapper .swiper-slide {
        width: calc(110*2px) !important;
        margin-right: calc(15*2px);
        display: flex;
        align-items: center;
    }

    /* #home__LP .sec_02 .home__text-swiper .swiper-wrapper .swiper-slide.slide02 {
        width: calc(95*2px) !important;
        margin-right: calc(15*2px);
    } */

    /* スライド内の画像 */
    #home__LP .sec_02 .home__text-swiper .swiper-wrapper .swiper-slide img {
        width: auto;
        height: 100%;
    }

    /* スライド */
    #home__LP .sec_02 .home__image-swiper .swiper-wrapper .swiper-slide {
        width: calc(140*2px) !important;
        height: calc(208*2px) !important;
        margin-right: calc(15*2px);
    }

    /* スライド内の画像 */
    #home__LP .sec_02 .home__image-swiper .swiper-wrapper .swiper-slide img {
        width: auto;
        height: 100%;
    }


    /* sec_03 */
    #home__LP .sec_03 {
        width: 100%;
        color: #6C564D;
        background-color: #EAE5E1;
        border-radius: calc(100*2px) 0 0 0;
        overflow: hidden;
        padding-top: calc(60*2px);
        padding-bottom: calc(180*2px);
        margin-top: calc(-100*2px);
    }

    #home__LP .sec_03 .section__title::before {
        background-color: #6C564D;
        left: 0;
    }

    #home__LP .sec_03 .section__title .sub__title,
    #home__LP .sec_03 .section__title .main__title {
        color: #6C564D;
        padding-right: calc(38*2px);
        text-align: right;
    }

    #home__LP .sec_03 .section__text {
        font-size: calc(20*2px);
        display: flex;
        align-items: center;
        margin-bottom: calc(30*2px);
        justify-content: center;
    }

    #home__LP .sec_03 .section__text::after {
        content: "";
        display: inline-block;
        width: calc(50*2px);
        height: calc(32*2px);
        background-image: url("https://www.tu-hacci.co.jp/img/feature/2508_home-summer/sec02_title_en.png");
        background-repeat: no-repeat;
        background-size: cover;
        margin-left: calc(5*2px);
    }

    #home__LP .sec_03 .main__text {
        text-align: center;
        font-size: calc(12*2px);
        line-height: 1.75;
        margin-bottom: calc(36*2px);
    }

    #home__LP .sec_03 .item__list {
        display: flex;
        margin-bottom: calc(40*2px);
        position: relative;
        z-index: 0;
    }

    #home__LP .sec_03 .item__list::after {
        content: "";
        width: calc(338*2px);
        height: calc(180*2px);
        background-color: rgba(196, 184, 177, 0.3);
        position: absolute;
        top: calc(36*2px);
        left: 0;
        z-index: -1;
    }

    #home__LP .sec_03 .item__list li {
        width: calc(172*2px);
        margin-left: calc(15*2px);
        text-align: center;
    }

    #home__LP .sec_03 .item__list li .item__image {
        display: block;
        margin-bottom: calc(20*2px);
    }

    #home__LP .sec_03 .item__list li .item__text {
        font-size: calc(12*2px);
    }

    #home__LP .sec_03 .item__list li .item__text--name {
        margin-top: calc(20*2px);
        margin-bottom: calc(18*2px);
    }

    #home__LP .sec_03 .item__list li .item__text--color {
        margin-inline: auto;
        margin-bottom: calc(20*2px);
    }

    #home__LP .sec_03 .item__list li .item__text--button {
        width: calc(110*2px);
        margin-inline: auto;
    }

    #home__LP .sec_03 .item__list .item__list--content01 {
        position: relative;
    }

    #home__LP .sec_03 .item__list .item__list--content01 .item__en--text {
        position: absolute;
        width: calc(42*2px);
        top: calc(5*2px);
        right: calc(-15*2px);
    }

    #home__LP .sec_03 .item__list .item__list--content01 .item__text--color {
        width: calc(55*2px);
    }

    #home__LP .sec_03 .item__list .item__list--content02 {
        margin-top: calc(90*2px);
    }

    #home__LP .sec_03 .item__list .item__list--content02 .item__text--color {
        width: calc(40*2px);
    }

    #home__LP .sec_03 .item__content {
        margin-bottom: calc(60*2px);
    }

    #home__LP .sec_03 .item__content .item__content--image {
        position: relative;
        padding-top: calc(126*2px);
        margin-bottom: calc(24*2px);
    }

    #home__LP .sec_03 .item__content .item__content--image__01 {
        position: absolute;
        left: 0;
        top: 0;
        width: calc(187*2px);
    }

    #home__LP .sec_03 .item__content .item__content--image__02 {
        width: calc(262*2px);
        position: relative;
        margin-left: auto;
    }

    #home__LP .sec_03 .item__content .item__content--image__02--text {
        width: calc(19*2px);
        position: absolute;
        top: calc(70*2px);
        right: calc(270*2px);
    }

    #home__LP .sec_03 .item__content .item__content--text .name {
        text-align: center;
        font-size: calc(12*2px);
        margin-bottom: calc(18*2px);
    }

    #home__LP .sec_03 .item__content .item__content--text .color {
        width: calc(55*2px);
        margin-inline: auto;
        margin-bottom: calc(20*2px);
    }

    #home__LP .sec_03 .item__content .item__content--text .button {
        width: calc(110*2px);
        margin-inline: auto;
        margin-bottom: calc(34*2px);
    }


    #home__LP .sec_03 .slide__area {
        position: relative;
        z-index: 0;
    }

    #home__LP .sec_03 .slide__area::after {
        content: "";
        position: absolute;
        width: 100vw;
        height: calc(206*2px);
        background-color: rgba(108, 86, 77, 0.25);
        top: calc(-20*2px);
        z-index: -1;
    }

    #home__LP .sec_03 .home__text-swiper {
        margin-bottom: calc(24*2px);
    }

    #home__LP .sec_03 .home__text-swiper .swiper-wrapper,
    #home__LP .sec_03 .home__image-swiper .swiper-wrapper {
        transition-timing-function: linear;
    }

    /* スライド */
    #home__LP .sec_03 .home__text-swiper .swiper-wrapper .swiper-slide {
        width: calc(55*2px) !important;
        margin-right: calc(15*2px);
        display: flex;
        align-items: center;
    }

    /* スライド内の画像 */
    #home__LP .sec_03 .home__text-swiper .swiper-wrapper .swiper-slide img {
        width: auto;
        height: 100%;
    }

    /* スライド */
    #home__LP .sec_03 .home__image-swiper .swiper-wrapper .swiper-slide {
        width: calc(140*2px) !important;
        height: calc(208*2px) !important;
        margin-right: calc(15*2px);
    }

    /* スライド内の画像 */
    #home__LP .sec_03 .home__image-swiper .swiper-wrapper .swiper-slide img {
        width: auto;
        height: 100%;
    }



    /* sec_04 */
    #home__LP .sec_04 {
        width: 100%;
        color: #526C72;
        background-color: #E4EAE8;
        border-radius: 0 calc(100*2px) 0 0;
        overflow: hidden;
        padding-top: calc(60*2px);
        padding-bottom: calc(60*2px);
        margin-top: calc(-120*2px);
    }

    #home__LP .sec_04 .section__title::before {
        background-color: #526C72;
        right: 0;
    }

    #home__LP .sec_04 .section__title .sub__title,
    #home__LP .sec_04 .section__title .main__title {
        color: #526C72;
        padding-left: calc(38*2px);
    }

    #home__LP .sec_04 .section__text {
        margin-left: calc(50*2px);
        font-size: calc(20*2px);
        display: flex;
        align-items: center;
        margin-bottom: calc(20*2px);
    }

    #home__LP .sec_04 .section__text::after {
        content: "";
        display: inline-block;
        width: calc(50*2px);
        height: calc(32*2px);
        background-image: url("https://www.tu-hacci.co.jp/img/feature/2508_home-summer/sec03_title_en.png");
        background-repeat: no-repeat;
        background-size: cover;
        margin-left: calc(5*2px);
    }

    #home__LP .sec_04 .main__text {
        text-align: left;
        font-size: calc(12*2px);
        line-height: 1.75;
        margin-bottom: calc(36*2px);
        margin-left: calc(50*2px);
    }

    #home__LP .sec_04 .flex {
        display: flex;
        margin-bottom: calc(40*2px);
        position: relative;
        z-index: 0;
    }

    #home__LP .sec_04 .flex::after {
        content: "";
        position: absolute;
        width: calc(246*2px);
        height: calc(532*2px);
        right: 0;
        top: calc(152*2px);
        z-index: -1;
        background-color: rgba(155, 178, 168, 0.3);
    }

    #home__LP .sec_04 .image__01 {
        width: calc(172*2px);
        position: relative;
        margin-right: calc(12*2px);
        margin-top: calc(135*2px);
    }

    #home__LP .sec_04 .image__01 .image__01--text {
        position: absolute;
        width: calc(60*2px);
        top: calc(-10*2px);
        right: 0;
        animation: spin 10s linear infinite;
    }

    @keyframes spin {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }

    #home__LP .sec_04 .item__image {
        display: block;
        margin-bottom: calc(18*2px);
    }

    #home__LP .sec_04 .item__text--name {
        text-align: center;
        font-size: calc(12*2px);
        margin-bottom: calc(18*2px);
    }

    #home__LP .sec_04 .item__text--color {
        margin-inline: auto;
        margin-bottom: calc(20*2px);
    }

    #home__LP .sec_04 .item__text--button {
        width: calc(110*2px);
        margin-inline: auto;
    }

    #home__LP .sec_04 .item__content--01 {
        width: calc(172*2px);
    }

    #home__LP .sec_04 .item__content--01 .item__text--color {
        width: calc(70*2px);
    }

    #home__LP .sec_04 .item__content--02 {
        width: calc(228*2px);
        margin-inline: auto;
        margin-top: calc(-45*2px);
        margin-bottom: calc(60*2px);
        position: relative;
        z-index: 1;
    }

    #home__LP .sec_04 .item__content--02 .item__text--color {
        width: calc(55*2px);
    }



    #home__LP .sec_04 .item__area {
        display: flex;
        margin-bottom: calc(38*2px);
    }

    #home__LP .sec_04 .item__area .item__image {
        padding-top: calc(10*2px);
        padding-left: calc(16*2px);
        position: relative;
        z-index: 0;
    }

    #home__LP .sec_04 .item__area .item__image .item__image--img {
        display: block;
        width: calc(170*2px);
    }

    #home__LP .sec_04 .item__area .item__image::after {
        content: "";
        width: calc(170*2px);
        height: calc(255*2px);
        border-radius: 100vw 100vw 0 0;
        position: absolute;
        background-color: #F1F5FB;
        left: 0;
        top: 0;
        z-index: -1;
    }

    #home__LP .sec_04 .item__area .item__text {
        width: calc(110*2px);
        text-align: center;
        margin-left: calc(40*2px);
        margin-top: calc(50*2px);
        font-size: calc(12*2px);
        position: relative;
        z-index: 0;
        height: fit-content;
    }

    #home__LP .sec_04 .item__area .item__text::after {
        content: "";
        position: absolute;
        width: calc(348*2px);
        height: calc(257*2px);
        top: 50%;
        left: 50%;
        translate: -50% -50%;
        z-index: -1;
    }

    #home__LP .sec_04 .item__area .item__text--name {
        margin-bottom: calc(18*2px);
    }

    #home__LP .sec_04 .item__area .item__text--color {
        width: calc(70*2px);
        margin-inline: auto;
        margin-bottom: calc(30*2px);
    }

    #home__LP .sec_04 .image__02 {
        width: 100%;
        position: relative;
        z-index: 1;
    }

    #home__LP .sec_04 .slide__area {
        position: relative;
        z-index: 0;
    }

    #home__LP .sec_04 .slide__area::after {
        content: "";
        position: absolute;
        width: 100vw;
        height: calc(180*2px);
        background-color: rgba(82, 108, 114, 0.3);
        top: calc(-25*2px);
        z-index: -1;
    }

    #home__LP .sec_04 .home__text-swiper {
        margin-bottom: calc(24*2px);
    }

    #home__LP .sec_04 .home__text-swiper .swiper-wrapper,
    #home__LP .sec_04 .home__image-swiper .swiper-wrapper {
        transition-timing-function: linear;
    }

    /* スライド */
    #home__LP .sec_04 .home__text-swiper .swiper-wrapper .swiper-slide {
        width: calc(98*2px) !important;
        margin-right: calc(15*2px);
        display: flex;
        align-items: center;
    }

    /* スライド内の画像 */
    #home__LP .sec_04 .home__text-swiper .swiper-wrapper .swiper-slide img {
        width: auto;
        height: 100%;
    }

    /* スライド */
    #home__LP .sec_04 .home__image-swiper .swiper-wrapper .swiper-slide {
        width: calc(140*2px) !important;
        height: calc(208*2px) !important;
        margin-right: calc(15*2px);
    }

    /* スライド内の画像 */
    #home__LP .sec_04 .home__image-swiper .swiper-wrapper .swiper-slide img {
        display: block;
        width: auto;
        height: 100%;
    }



    /* sec_05 */
    #home__LP .sec_05 {
        background-color: #E9EFF7;
        width: 100%;
        padding: calc(33*2px) 0;
    }

    #home__LP .sec_05 .all_button {
        display: block;
        width: calc(343*2px);
        margin-inline: auto;
    }

}

/* PCサイズ */