@charset "utf-8";

/*==========================
common
==========================*/
:root {
    --white: #FFF;
    --yumeotome-orange: rgba(236, 103, 65, 1);
    --black2: #717070;
    --yumeotome-green: rgba(210, 222, 199, 1);
    --yumeotome-green6: rgba(210, 222, 199, 0.4);
    --primary-greenR: rgba(210, 222, 199, 1);
    --font-Marcellus: Marcellus;
    --content-padingL: 8.33vw;
    --content-padingS: 5.35vw;
}

html {
    font-size: 62.5%;
}

body {
    font-family:
        'Shippori Mincho',
        'Marcellus',
        'Pinyon Script',
        'Noto Serif JP',
        Arial,
        sans-serif;
    font-style: normal;
    color: var(--black2);
    background-color: var(--primary-white, #FFF);
    line-height: 1.5;
}

img {
    max-width: 100%;
    height: auto;
}



/* about */

/* about history product garrery タイトル共通 */
/* .heading {
    margin: 0 20px;
} */

.headingSet {
    margin: 20px 0;
    width: 100%;
}

.headingTitle {
    color: var(--black2);
    font-family: var(--font-Marcellus);
    font-size: 32px;
    line-height: 48px;
    letter-spacing: 1.8px;
}


@media screen and (min-width:790px) {
    .headingSet {
        margin-top: clamp(20px, 6.96vw, 100px);
        margin-bottom: Clamp(20px, 8.33vw, 120px);
    }

    /* .heading {
        margin: 0 8.33vw;
    } */

    /* .heading{
        width: 1200px;
    } */


}

@media screen and (min-width:840px) {
    .headingTitle {
        font-size: 48px;
    }
}

@media screen and (min-width:1440px) {
    .heading {
        width: 1200px;
        margin: 0 auto;
    }
}



/* about history product garrery タイトル共通　end */


/* CSS fade */
.aboutTop-Img-img {
    width: 68.98vw;
    animation: fade-in 1.5s;
    animation-fill-mode: forwards;
}

@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}
/* css fade end */



.aboutTop-Img {
    /* width: 257.801px; */
    width: 100%;
    text-align: right;
    margin-top: 20px;
}


.abouTopLogo {
    width: 76px;
}

.abouTop-title {
    width: 130px;
}

.aboutTop {
    display: flex;
    gap: 18px;
    margin-top: 40px;
}

.about-titleText {
    font-family: "Shippori Mincho";
    font-size: 16px;
    line-height: 27px;
    letter-spacing: 0.288px;
    margin-top: 9px;
}

.aboutIntro-img {
    width: 50.8vw;

}

.aboutIntro-text-subTitle1 {
    font-family: "Shippori Mincho";
    font-size: 16px;
    line-height: 27px;
    letter-spacing: 0.288px;
}

.aboutIntro-text-Title {
    font-family: "Shippori Mincho";
    font-size: 21px;
    line-height: 36px;
    letter-spacing: 1.8px;
}

.aboutIntro-text-subTitle2 {
    font-family: var(--font-Marcellus);
    font-size: 16px;
    line-height: 27px;
    letter-spacing: 0.288px;
}

.aboutIntro {
    display: flex;
    flex-direction: row;
    gap: 14px;
    margin-top: 90px;
    align-items: center;
}

.aboutIntro-bottom-content {
    /* display: flex;
    flex-direction: column; */
    font-family: "Shippori Mincho";
    font-size: 16px;
    line-height: 27px;
    letter-spacing: 0.288px;


}

.aboutIntro-bottom {
    display: flex;
    flex-direction: column;
    border: solid 0.5px var(--yumeotome-orange);
    padding: 56px 38px 32px;
    margin-top: -32px;
    gap: 32px;
}

/* .aboutIntroSet{
    display: flex;
    flex-direction: column;
    gap:-32px;

} */


.aboutReason-mainTitle {
    font-family: "Shippori Mincho";
    font-size: 21px;
    font-style: normal;
    font-weight: 400;
    line-height: 36px;
    /* 171.429% */
    letter-spacing: 1.8px;
    margin-top: 90px;
}

.aboutReason-title {
    font-family: "Shippori Mincho";
    font-size: 21px;
    line-height: 36px;
    letter-spacing: 1.8px;
    margin-top: 80px;
}

.aboutReason-contents {
    font-family: "Shippori Mincho";
    font-size: 16px;
    line-height: 27px;
    letter-spacing: 0.288px;
    margin-top: 24px;
}

.aboutReason-imgSet {
    width: 100%;
}



.aboutReason-img1 {
    display: block;
    width: clamp(260px, 69.52vw, 345px);
    /* height: 446px; */
    margin-left: auto;
    margin-top: 40px;
}

.aboutReason-img2 {
    /* display: block; */
    width: clamp(150px, 40.11vw, 197px);
}

.aboutReason-img1-2 {
    position: relative;
}

.aboutReason-img2-2 {
    display: block;
    width: clamp(150px, 40.11vw, 197px);
    /* height: 203.877px; */
    /* margin-top:-182px ; */
    position: absolute;
    top: 73.8vw;
    right: 48.4vw;

}

.aboutReason-img2 {
    /* display: block; */
    width: clamp(150px, 40.11vw, 197px);
}

.aboutReason {
    position: relative;
}

.aboutReason-Set::after {
    content: "";
    position: absolute;
    width: 80%;
    height: 93%;
    top: 70px;
    right: 50%;
    transform: translateX(50%);
    background-color: var(--yumeotome-green6);
    background-repeat: no-repeat;
    z-index: -1;
}


/*==================================================
fadwUp
===================================*/


.box{
	opacity: 0;
}

.fadeUp {
animation-name:fadeUpAnime ;
animation-duration:2.9s;
animation-fill-mode:forwards;
opacity: 0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }

  to {
    opacity: 1;
	transform: translateY(0);
  }
}


/* fadwUp end */



@media screen and (min-width:480px) {
    .aboutReason-img1 {
        display: block;
        width: 345px;
        /* height: 446px; */
        margin-left: auto;
        margin-top: 40px;
    }


    .aboutReason-img1-2 {
        position: relative;
    }

    .aboutReason-img2-2 {
        display: block;
        /* width: 197px; */
        /* height: 203.877px; */
        /* margin-top:-182px ; */
        position: absolute;
        top: 354px;
        right: 232px;

    }

    .aboutReason-img2 {
        width: clamp(150px, 40.11vw, 200px);
    }
}

@media screen and (min-width:680px) {
    .aboutTopLogo {
        width: 262px;
    }




    .aboutIntro {
        gap: clamp(14px, 6.39vw, 92px);
        margin-top: 24.6vw;
    }

    .aboutIntro-img {
        width: clamp(346px, 38.61vw, 500px);
    }

    .aboutIntro-text {
        margin-top: -150px;
    }


    .aboutIntro-text-Title {
        font-size: clamp(21px, 2.22vw, 32px);
        line-height: 36px;
        letter-spacing: 1.8px;
    }

    .aboutIntro-text-subTitle2 {
        font-size: clamp(16px, 1.46vw, 21px);
        line-height: 36px;
        letter-spacing: 1.8px;
    }


    .aboutReason-mainTitle {
        /* margin: 22.2vw 0 5.56vw 0; */
        margin: clamp(89.54px, 22.22vw, 192px) 0 5.56vw 0;
    }

    .aboutReason-title3 {
        margin-top: -50px;
    }

    .aboutReason-Set-set {
        display: flex;
        flex-direction: row;
        gap: 30px;

    }

    .aboutReason-Set-set:nth-child(2) {
        display: flex;
        flex-direction: row-reverse;

    }

    .aboutReason-contents {
        width: 36.76vw;
    }

    .aboutReason-Set-set {
        margin-top: 120px;
    }

    .aboutReason-img1:first-child {
        margin-top: -50px;
    }

    /* .about {
        margin: 0 5vw;
        margin: 0 8.33vw;
    } */

    .aboutReason {
        position: relative;
        margin-bottom: 192px;
    }


    .aboutReason-Set::after {
        content: "";
        position: absolute;
        width: 80%;
        height: 87%;
        top: 150px;
        right: 50%;
        transform: translateX(50%);
        background-color: var(--yumeotome-green6);
        background-repeat: no-repeat;
        z-index: -1;
    }
}

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

    /* .heading {
        margin: 0 8.33vw;
    } */
    .aboutTop-Img {
        /* margin-top: 6.25vw; */
        width: 100%;
        /* text-align: right; */
        margin-top: -70px;
    }

    .aboutTop-Img-img {
        text-align: right;
        width: clamp(130px, 62.29vw, 898px);
    }

    .abouTop-title {
        /* font-size: 6.94vw; */
        width: clamp(130px, 30.97vw, 350px);

    }

    .aboutIntro {
        margin-top: clamp(89.54px, 22.22vw, 192px);
    }



    .aboutTop {
        display: flex;
        gap: 18px;
        /* margin-top: 40px; */
        width: 100%;
        margin-top: clamp(20px, 6.25vw, 40px);
    }

    .abouTopLogo {
        width: clamp(76px, 18.19vw, 263px);
    }
}






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

    /* .about {
        margin: 0 8.33vw;
    } */
    .aboutIntro-bottom {
        border: solid 0.5px var(--yumeotome-orange);
        padding: 57px 73px 57px 113px;
        margin-top: -150px;
        width: clamp(434px, 51.04vw, 734px);
        margin-left: auto;
    }

    .aboutReason-Set-set {
        /* display: flex;
        flex-direction: row; */
        gap: 30px;

    }

    .aboutReason-contents {
        width: 100%;
    }

    .aboutReason-contents3 {
        width: 40vw;
    }

    .aboutReason-mainTitle {
        font-size: 36px;
    }

    .aboutReason-title3 {
        margin-top: 0px;
    }

    .aboutReason-contents {
        margin-top: 40px;
    }


}

@media screen and (min-width:1150px) {
    /* .aboutReason-title {
        font-size: clamp(27px, 2.22vw, 32px);
    }

    .aboutReason-contents {
        font-size: 18px;
        margin-top: 60px;
    } */

    /* .aboutReason-img1 {
        width: 38.19vw;
    }

    .aboutReason-img1-2 {
        position: relative;
    }

    .aboutReason-img2-2 {
        display: block;
        position: absolute;
        top: 39.03vw;
        right: 27.71vw;

    }

    .aboutReason-img2-2 {
        width: 23.13vw;
    }

    .aboutReason-img2 {
        width: 23.13vw;
    } */


    .aboutReason-img1-2 {
        position: relative;
        /* max-width: 345px; */
    }

    .aboutReason-img2-2 {
        display: block;
        position: absolute;
        top: 448.5px;
        right: 27.71vw;
        width: 23.13vw;
        max-width: 200px;
    }

    .aboutReason-img2 {
        /* width: 23.13vw; */
        max-width: 200px;
    }

    .aboutReason-Set::after {
        content: "";
        position: absolute;
        width: 766px;
        height: 1627px;
        top: 150px;
        right: 50%;
        transform: translateX(50%);
        background-color: var(--yumeotome-green6);
        background-repeat: no-repeat;
        z-index: -1;
    }

    .aboutReason-contents3 {
        width: 460px;
    }

    .aboutReason-contents {
        width: 448px;
    }

    .aboutReason {
        width: 957.58px;
    }

    .aboutReason-img2-2 {
        display: block;
        /* width: 197px; */
        /* height: 203.877px; */
        /* margin-top:-182px ; */
        position: absolute;
        top: 354px;
        right: 232px;

    }

    .aboutReason-Set {
        width: 957.58px;
    }

    .aboutReason {
        margin: 0 auto;
        margin-bottom: 192px;

    }


}

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

    /* .aboutReason-Set{
    width: 83.33vw;
  }

  .aboutReason{
    margin: 0 auto;
    width: 83.33vw;
  } */

    .aboutReason-SetContena {
        width: 8327vw;
        max-width: 1200px;
        margin: 0 auto;
    }

    .aboutReason-Set {
        display: block;
        width: 100%;
    }

    .aboutReason {
        width: 1200px;
    }

    .aboutReason-Set::after {
        content: "";
        position: absolute;
        width: 1000px;
        height: 1627px;
        top: 150px;
        right: 50%;
        transform: translateX(50%);
        background-color: var(--yumeotome-green6);
        background-repeat: no-repeat;
        z-index: -1;
    }
    .aboutReason-title{
        font-size: 26px;
    }
}