@charset "UTF-8";

/* ==========================
Base
========================== */

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html{
    scroll-behavior: smooth;
}

body{
    color: #333;
    line-height: 1.6;
    font-family: sans-serif;
}

img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

a{
    color: inherit;
    text-decoration: none;
}

ul,
ol{
    list-style: none;
}

button,
input,
textarea,
select{
    font: inherit;
}

main{
    display: block;
}

html{
scroll-behavior: smooth;
}

/*---------------------------------------------*/
/* フォント・フォントサイズ
/*---------------------------------------------*/
html{
font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
}

.no_wrap{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.no_wrap_3{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; 
overflow: hidden;
}

.fc_01{
color: #006280;
}
.bc_01{
background-color: #006280;
}

.fc_02{
color: #E7336D;
}
.bc_02{
background-color: #E7336D;
}

.fc_03{
color: #949595;
}
.bc_03{
background-color: #949595;
}

/*---------------------------------------------*/
/* よく使う
/*---------------------------------------------*/

/* 自身がホバーされた時に写真をズーム */
.img_zoom {
overflow: hidden;
}
    .img_zoom img {
    transition: transform 0.4s ease;
    }
    .img_zoom:hover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.06);
    transform-origin: center;
    }

/* 親がホバーされた時、任意の子要素内の写真をズーム */
.img_zoom_parent .img_zoom_child {
overflow: hidden;
}
    .img_zoom_parent .img_zoom_child img {
    transition: transform 0.4s ease;
    }
    .img_zoom_parent:hover .img_zoom_child img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.06);
    transform-origin: center;
    }

/* ホバーで半透明 */
.hover_01 {
transition: all 0.3s ease;
}
    .hover_01:hover {
    opacity: 0.5;
    }

/*---------------------------------------------*/
/* 写真スクロールギャラリー
/*---------------------------------------------*/
.scroll-gallery_01 {
width: 100%;
overflow: hidden;
}

.scroll-gallery_01 .scroll-track {
display: flex;
width: max-content;
animation: scroll-left_01 5s linear infinite;
will-change: transform;
column-gap: 0;
}

.scroll-gallery_01 .item_box {
width: 253px;
height: 190px;
margin-right: 0;
flex-shrink: 0;
border-radius: 6px;
overflow: hidden;
}

@keyframes scroll-left_01 {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/*---------------------------------------------*/
/* フェードアニメーション
/*---------------------------------------------*/
/* // シンプルなフェードアニメーション + 遅延対応
// fadeUpTriggerなどをつければフェードイン
// fadeUp_late_200などをつければ200ms遅延（数値は任意） */

/* // 下から */
.fadeUp {
animation-name: fadeUpAnime;
animation-duration: var(--fadeUp-dur, 2s); /* ←ここを変数に */
animation-fill-mode: forwards;
opacity: 0;
--fadeUp-dist: 200px;
--fadeUp-dur: 2000ms; /* デフォルト */
}

@keyframes fadeUpAnime {
from {
opacity: 0;
transform: translateY(var(--fadeUp-dist));
}
to {
opacity: 1;
transform: translateY(0);
}
}

/* // 左から */
.fadeLeft {
animation-name: fadeLeftAnime;
animation-duration: 1.3s;
animation-fill-mode: forwards;
opacity: 0;
}
@keyframes fadeLeftAnime {
    from {
        opacity: 0;
        transform: translateX(-200px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
} 
/* // 右から */
.fadeRight {
animation-name: fadeRightAnime;
animation-duration: 1.3s;
animation-fill-mode: forwards;
opacity: 0;
}
    @keyframes fadeRightAnime {
    from {
        opacity: 0;
        transform: translateX(200px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
/* // トリガー（非表示初期状態） */
.fadeUpTrigger,
.fadeUpTrigger_left,
.fadeUpTrigger_right {
opacity: 0;
}

/*---------------------------------------------*/
/* アニメーション
/*---------------------------------------------*/
.fluffy {
/* アニメーション名 アニメーションにかかる時間 アニメーションの繰り返し回数 */
/* fluffy 3秒 無限ループ */
animation: fluffy 2.5s infinite;
}

@keyframes fluffy {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-7px);
}
}


/*---------------------------------------------*/
/* セクションのパディング
/*---------------------------------------------*/

.sec {
    width: 100%;
    padding-left: max(32px, 32px, calc((100vw - 1240px) / 2));
    padding-right: max(32px, 32px, calc((100vw - 1240px) / 2));
}
@media (max-width: 1024px) {
    .sec {
        padding-left: 4%;
        padding-right: 4%;
    }
}
@media (max-width: 767px) {
    .sec {
        padding-left: 6%;
        padding-right: 6%;
    }
}
.sec_left {
    padding-left: max(32px, 32px, calc((100vw - 1240px) / 2));
}
@media (max-width: 1024px) {
    .sec_left {
        padding-left: 4%;
    }
}
@media (max-width: 767px) {
    .sec_left {
        padding-left: 6%;
    }
}
.sec_right {
    padding-right: max(32px, 32px, calc((100vw - 1240px) / 2));
}
@media (max-width: 1024px) {
    .sec_right {
        padding-right: 4%;
    }
}
@media (max-width: 767px) {
    .sec_right {
        padding-right: 6%;
    }
}

/*---------------------------------------------*/
/* レスポンシブ制御
/*---------------------------------------------*/

/* PC（1000px以上） */
.pc {
display: flex;
}

.tab,
.sp,
.tab_pc {
display: none;
}

.pc_tab {
display: flex;
}

/* タブレット（600px～999px） */
@media screen and (max-width: 999px) {
    .pc {
        display: none !important;
    }

    .tab {
        display: flex;
    }

    .sp {
        display: none !important;
    }

    .pc_tab {
        display: flex;
    }

    .tab_pc {
        display: flex;
    }
}

/* スマホ（599px以下） */
@media screen and (max-width: 599px) {
    .pc {
        display: none !important;
    }

    .tab {
        display: none !important;
    }

    .sp {
        display: flex !important;
    }

    .pc_tab {
        display: none;
    }

    .tab_pc {
        display: flex;
    }
}

















/*---------------------------------------------*/
/* メイン
/*---------------------------------------------*/
.wrapper{
    margin-left: auto;
    margin-right: auto;
    max-width: 700px;
    background-color: #fff;
    overflow-x: hidden;
    position: relative;
}
.common_img_box{
    width: 100%;
    height: auto;
    z-index: 10;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    display: block;
}
.common_img_box img{
    width: 100%;
    height: auto;
    object-fit: cover;
}
.common_section{
    position: relative;
}
main{
    background-color: #e6d5b9;
}



.fixed_banner {
    position: fixed;
    bottom: -1.1%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    visibility: hidden;
    transition: .3s;
    z-index: 999;
    width: 100%;
    max-width: 700px;
}
.fixed_banner .common_section{
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;

    width: 100%;
    max-width: 700px;
    height: auto;
    aspect-ratio: 2251 / 591;
    /* aspect-ratio: 2251 / 643; */
}
.fixed_banner .img_box_01{
}
.fixed_banner .img_box_02{
    position: absolute;
    bottom: -4%;
    right: 37%;
    width: 45%;
}
.fixed_banner .img_box_03{
    position: absolute;
    bottom: -4%;
    right: -2%;
    width: 45%;
}

.fixed_banner.show {
    opacity: 1;
    visibility: visible;
    transition: .3s;
}



.wrap_01 .img_box_01{

}
.wrap_01 .img_box_02{
    margin-top: -15%;
}
.wrap_01 .img_box_03{
    position: absolute;
    top: 87%;
    left: 1%;
    width: 52%;
    z-index: 11;
}
.wrap_01 .img_box_04{
    position: absolute;
    top: 87%;
    right: 1%;
    width: 52%;
    z-index: 11;
}
.wrap_01 .img_box_05{}
.wrap_01 .img_box_06{
    margin-top: -31%;
}
.wrap_01 .img_box_07{
    width: 91%;
    box-shadow: #0000005e -2px 2px 8px;
    margin-left: auto;
    margin-right: 0;
    padding: 10px 0px 10px 10px;
    background: #fff;
    margin-top: -13%;
}
.wrap_01 .img_box_08{}
.wrap_01 .img_box_09{
    z-index: 9;
    margin-top: -6%;
}
.wrap_01 .img_box_09_5{
    margin-top: -169%;
    margin-bottom: 78%;
}
.wrap_01 .img_box_10{
    position: absolute;
    top: 16%;
    right: 4%;
    width: 16%;
}
.wrap_01 .img_box_11{
    position: absolute;
    top: 27%;
    left: 4%;
    width: 16%;
}
.wrap_01 .img_box_12{
}
.wrap_01 .img_box_13{
    margin-top: -12%;
    z-index: 9;
}
.wrap_01 .img_box_14{
    margin-top: -7%;
}
.wrap_01 .img_box_15{
    margin-top: -17%;
}
.wrap_01 .img_box_16{
    margin-top: -14%;
    z-index: 9;
}
.wrap_01 .img_box_17{
    margin-top: -2%;
}
.wrap_01 .img_box_18{
    position: absolute;
    top: 41%;
    z-index: 11;
    left: -1%;
    width: 48%;
}
.wrap_01 .img_box_19{
    position: absolute;
    top: 47%;
    z-index: 11;
    left: -1%;
    width: 55%;
}
.wrap_01 .img_box_20{
    position: absolute;
    top: 60%;
}
.wrap_01 .img_box_21{
    margin-top: -6%;
}
.wrap_01 .img_box_22{
    margin-top: -3%;
}


.wrap_02 .img_box_01{
    margin-top: -6%;
}
.wrap_02 .img_box_02{
    margin-top: 62px;
}
.wrap_02 .img_box_03{
    margin-top: -49%;
}
.wrap_02 .img_box_04{
}
.wrap_02 .img_box_05{
    margin-top: 29px;
}
.wrap_02 .img_box_06{
    margin-top: 57px;
}
.wrap_02 .img_box_07{
    margin-top: 61px;
    background-color: #eeeceb;
}
.wrap_02 .img_box_08{
    background-color: #eeeceb;
    padding-top: 53px;
    padding-left: 5%;
    padding-right: 5%;
}
.wrap_02 .img_box_09{
    background-color: #eeeceb;
    padding-top: 72px;
}
.wrap_02 .img_box_10{
    margin-top: -32px;
}
.wrap_02 .img_box_11{
    margin-top: -5%;
}
.wrap_02 .img_box_12{
    margin-top: 29px;
}
.wrap_02 .img_box_13{
    margin-top: 53px;
}

.wrap_03 .img_box_01 {}
.wrap_03 .img_box_02 {
    width: 93%;
}
.wrap_03 .img_box_03 {
    margin-top: -48px;
    z-index: 9;
}
.wrap_03 .img_box_04 {
    margin-top: -21px;
}
.wrap_03 .img_box_05 {
    margin-top: -14px;
}
.wrap_03 .img_box_06 {
    margin-top: -13px;
}
.wrap_03 .img_box_07 {}
.wrap_03 .img_box_08 {}
.wrap_03 .img_box_09 {
    position: absolute;
    bottom: 8%;
}
.wrap_03 .img_box_10 {}
.wrap_03 .img_box_11 {}
.wrap_03 .img_box_12 {
    margin-top: -3%;
}
.wrap_03 .img_box_13 {
    
}
.wrap_03 .img_box_14 {
    margin-top: -6%;
}
.wrap_03 .img_box_15 {
    margin-top: -7%;
}
.wrap_03 .img_box_16 {
    padding-bottom: 58px;
}
.wrap_03 .img_box_17 {}
.wrap_03 .img_box_18 {}
.wrap_03 .img_box_19 {}
.wrap_03 .img_box_20 {}
.wrap_03 .img_box_21 {}
.wrap_03 .img_box_22 {}
.wrap_03 .absolute_customer_voice_container {
    position: absolute;
    width: 100%;
    top: 15%;
    z-index: 11;
    overflow: hidden;
}
.wrap_03 .absolute_customer_voice_container .item_list {
    width: auto;
    height: auto;
    display: flex;
    overflow-x: auto;
    transition: transform 1s ease;
    width: max-content;
}
.wrap_03 .absolute_customer_voice_container .voice_item {
    width: 100vw;
    max-width: 700px;
    height: auto;
    flex-shrink: 0;
}
.wrap_03 .absolute_customer_voice_container .voice_item .voice_img_box {
    width: 83%;
    margin-left: auto;
    margin-right: auto;
    height: auto;
    /* max-width: 578px; */
}
.wrap_03 .absolute_customer_voice_container .voice_item .voice_img_box img {
    width: 100%;
    height: auto;
    object-fit: cover;
}
.wrap_03 .absolute_customer_voice_btn {
    position: absolute;
    top: 50%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    z-index: 11;
}
.wrap_03 .absolute_customer_voice_btn .prev_btn {
    width: 11%;
    height: 11%;
    background: none;
    border: none;
}
.wrap_03 .absolute_customer_voice_btn .prev_btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: rotate(180deg);
}
.wrap_03 .absolute_customer_voice_btn .next_btn {
    width: 11%;
    height: 11%;
    background: none;
    border: none;
}
.wrap_03 .absolute_customer_voice_btn .next_btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.wrap_03 .qa_list {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 20px;
    row-gap: 11px;
    display: flex;
    flex-direction: column;
    padding-bottom: 45px;
}
.wrap_03 .qa_list .icon {
    position: absolute;
    top: 44%;
    right: 6%;
    width: 7%;
    transition: all 0.3s ease;
}
.wrap_03 .qa_item .q {
    position: relative;
}
.wrap_03 .a img,
.wrap_03 .q img {
    display: block;
    width: 100%;
    height: auto;
}
.wrap_03 .q.active .icon {
    transform: rotate(180deg);
    transition: all 0.5s ease;
}

.qa_item ,.prev_btn, .next_btn{
    cursor: pointer;
}

.fv_video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.wrap_03 .qa_list.qa_list_02 .icon {
    position: absolute;
    top: 38%;
    right: 5%;
    width: 4%;
    transition: all 0.3s ease;
}
.wrap_03 .qa_list.qa_list_02 .a_img_box_08 {
    margin-top: 24px;
}


















/*---------------------------------------------*/
/* レスポンシブ制御
/*---------------------------------------------*/

@media screen and (min-width: 700px) {
}

@media screen and (max-width: 599px) {
}

@media screen and (max-width: 999px) {
}