@charset "utf-8";
/* 1536 , 1530 × 735 ,1366 *//* ←記画面幅でも崩れていないか確認 */

/* カテゴリリンクの飛び先位置の数値を適宜調整してください */

/* 修正した場合→各項目の一番下に日付をコメントアウトして追記 */


/*■■　ALL　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/


#wrap, #loader {
    background-color: #f9f4ed;
}

#header h1 span {
    border: none;
}

#fix_bnr {
    right: 100px;
    z-index: 10;
}

.is-hidden {
  visibility: hidden;
  opacity: 0;
}

/* #header h1 {
    backdrop-filter: blur(10px) contrast(1.5) opacity(0.5);
} */

.bnr_1, .bnr_2 {
    width: calc(50% - 25px);
}

/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){


#fix_bnr {
    right: 60px;
}

}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){

#fix_bnr {
    right: 60px;
}

.bnr_1, .bnr_2 {
    width: calc(50% - 5px);
}

}



/*■■　FV　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

#main_img {
    background-image: url(../img/bg_washi.jpg);
    background-size: contain;
    overflow: visible;
    text-align: center;
    display: flex;
    justify-content: center;
    max-height: 1000px;
}

#main_img_inner {
display: block;
    max-width: 1000px;
    min-width: 1500px;
    height: 100%;
    position: relative;
    margin: 0 auto;
    left: 0;
    right: 0;
}

.fv_1,.fv_2, .fv_3, .main_copy1 .main_copy2 {
    pointer-events: none;
}

.fv_1 {
    width: 25% !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 5;
}

.fv_2 {
    width: 25% !important;
    bottom: 22%;
    left: 14%;
    z-index: 1;
}


.fv_2 img {
    transform: rotate(-10deg);
}

.fv_3 {
    width: 25% !important;
    bottom: -1%;
    right: 18%;
    z-index: 1;
}


.fv_3 img {
    transform: rotate(10deg);
}

.main_copy1 {
    width: 11%;
    right: 23%;
    top: 15%;
}


.main_cop2 {
    width: 7%;
    top: 15%;
    right: 14%;
    z-index: 0;
}


.anim_box .item{
	transform: translateY(20px);
	transition: transform 1.5s ease, opacity 2s;
	transition-property: opacity,transform;
	opacity: 0;
}
.anim_box .item.start{transform: translateY(0);opacity: 1;}

/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){

#main_img_inner {
        min-width: initial;
width: 95%;;
}

.fv_1 {
    width: 45% !important;
        top: -5%;
}

.fv_2 {
        width: 40% !important;
        bottom: 12%;
        left: 5%;
}

.fv_3 {
    width: 42% !important;
        bottom: 0%;
        right: 6%;
}

.main_copy1 {
        width: 25%;
        right: 5%;
        top: 20%;
}

.main_cop2 {
    width: 13%;
    top: 20%;
    left: 15%;
    z-index: 0;
}


}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){

#main_img {
    height: 85vh;
    min-height: 550px;
    max-height: 650px;
    }

.fv_1 {
        width: 60% !important;
top: 0%;
}

.fv_2 {
        width: 45% !important;
        bottom: 2%;
        left: 5%;
    }

.fv_3 {
width: 46% !important;
        bottom: -3%;
        right: 5%;
}

.main_copy1 {
        width: 30%;
        right: 0%;
        top: 17%;
    }


    .main_cop2 {
width: 19%;
        top: 30%;
        left: 5%;
        z-index: 0;
    }
}



/*■■　TOP　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

#intro {
    z-index: 0;
}

.intro_bg {
    top: 0;
    left: 0;
    z-index: -1;
}

#intro h2 {
        font-size: clamp(20px, 5.5vw, 50px);
    text-align: center;
}

#top_contents_wrap {
    background-image: url('../img/bg_washi.jpg');
    background-size: contain;
}

.con1_img1 img {
        transform: rotate(-10deg) translate(-30px, 75px);
}

.con1_en{
    font-size: clamp(40px, 11vw, 300px);
    line-height: 1.1;
    top: 0;
    left: 5%;
}

.con2_en{
    font-size: clamp(40px, 9vw, 300px);
    line-height: 1.1;
    top: 5%;
    right: 5%;
    text-align: right;
}

#contents2::after {
    display: none;
}

#contents3::after {
    display: none;
}

#contents3 .con3_1_wrap {
    background-image: url(../img/design_bg1.png), url(../img/con3_1_bg.png);
    background-size: auto, cover;
    background-position: center;
    padding: 25vh 5%;
}
#contents3 .d_flex {
    align-items: center;
    justify-content: end;
}
.con3_bg {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-size: cover;
    background-attachment: fixed;
}

.con3_1_title {
    font-size: clamp(20px, 5vw, 55px);
}

.con3_2_title {
    font-size: clamp(20px, 4vw, 40px);
}


.con3_2_wrap {
    background-color: rgba(249,244,242,0.85);
    padding: 25vh 5%;
}


/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){

#contents2 .title {
    width: 25%!important;
}

#contents2 {
    min-height: 60vh;
}

#contents3 .con3_1_wrap {
    display: flex;
        width: 90% !important;
    margin: 0 auto;
    align-content: center;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-image: none;
        background-color: var(--color1);
        aspect-ratio: 1 / 1;
        border-radius: 50%;
        padding: 0;
        overflow: visible;
}

#contents3 {
    background-color: transparent;
    padding: 0;
}

#contents3 .con3_1_wrap > div {
        padding: 5% 15%;
}

#contents3 .con3_1_wrap:before {
        content: "";
        width: 60%;
        height: 30%;
        max-width: 400px;
        position: absolute;
        top: -2%;
        left: -12%;
        background-image: url(../img/kumo1.png);
        background-repeat: no-repeat;
        background-size: contain;
}

#contents3 .con3_1_wrap:after {
        content: "";
        width: 60%;
        height: 30%;
        max-width: 400px;
        position: absolute;
        bottom: -2%;
        right: -12%;
        background-image: url(../img/kumo2.png);
        background-repeat: no-repeat;
        background-size: contain;
}

.con3_2_wrap {
    padding: 10vh 40px;
    margin-top: 50px;
}

.con3_bg {
    opacity: 0.3;
}

}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){

#intro h2 {
    font-size: clamp(20px, 7vw, 50px);
    text-align: left;
}

#intro {
    background-size: cover;
    background-position: center;
}


#contents1 .title {
    margin-left: auto;
    max-height: initial;
}

.con1_en {
    font-size: clamp(40px, 18vw, 300px);
    top: 10%;
    left: 5%;
    opacity: 0.8;
}

/**/
.txt_wrap, #con1_img_wrap {
    min-width: 0;
}
.txt_wrap img, #con1_img_wrap img {
    max-width: 100%!important;
    height: auto;
}
/**/

.con1_img1 img {
transform: rotate(-10deg) translate(-100%, 45%);
}
.con1_img2 img {
box-shadow: rgba(0, 0, 0, 0) 50px 50px 0px;
transform: rotate(145deg) translate(50%, -40%);
}

#contents2 .title {
    width: 40%!important;
}

.con2_en{
    font-size: clamp(40px, 14.5vw, 300px);
    opacity: 0.8;
}

#contents2 {
    min-height: initial;
}

#contents3 .con3_1_wrap {
    width: 120% !important;
    transform: translateX(-8%);
}

#contents3 .con3_1_wrap:before {
    width: 50%;
    height: 30%;
    top: -5%;
    left: -5%;
    }

#contents3 .con3_1_wrap:after {
    width: 60%;
    height: 30%;
    bottom: -10%;
    right: -4%;
}
    
.con3_2_wrap {

    padding: 40px;
}

.con3_1_title {
        font-size: clamp(20px, 6.5vw, 55px);
        padding-bottom: 20px;
    }

}



/*■■　下層ページ　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/*カテゴリリンクの飛び先位置を調整する*/
/* --- PC・タブレット時 --- */
:root {
--header-height: 180px;
}
/* --- スマートフォン --- */
@media screen and (max-width: 667px){
:root {
--header-height: 100px;
}
}





/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){

}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){

#page10 ul li a {
    display: block;
}


}