@charset "utf-8";
main .inner {height:auto;}

/* 見出し */
main .inner .section1 {padding:0 0 40px 0; height:auto; display:flex; background:var(--sky-blue3); justify-content: center;}
main .inner .section1 .l {flex-basis:60%;}
main .inner .section1 .l h2 {font-size:43px; line-height:75px; color:#333; margin:30px 0 0 40px;}
main .inner .section1 .l p:nth-of-type(1) {font-size:26px; margin:30px 0 0 40px; color:var(--emerald-green2); font-weight:500; letter-spacing:-2px;}
main .inner .section1 .l p:nth-of-type(1) span {margin-left:30px; line-height:41px; color:var(--emerald-green2);}
main .inner .section1 .l p:nth-of-type(2) {font-size:18px; line-height:32px; margin:30px 0 0 40px; letter-spacing:-1px; color:#333;}
main .inner .section1 .r {flex-basis:40%;}
main .inner .section1 .r .image {text-align:left; margin-top:40px; padding-right:30px; box-sizing:border-box; }

/* 共通h3 */
main .inner h3 {padding:20px 0; text-align:center; color:#333; font-size:24px; line-height:24px; background:url("../img/nagare/h3.svg"); background-repeat:no-repeat; background-position: center; position:relative; top:-30px;}

/* 事前のご準備 */
main .inner .section2 {background:var(--sky-blue3); margin:100px 0 0 0;}
main .inner .section2_2 {display:flex; padding:0 20px; margin-top:-30px; }
main .inner .section2_2 .l,
main .inner .section2_2 .c,
main .inner .section2_2 .r {flex-basis: 33%; padding:0 10px; margin:30px 0;}
main .inner .section2_2 h4 {display:flex; justify-content: center; align-items:center; font-weight:500;}
main .inner .section2_2 h4 span:nth-child(1) {font-size:45px; line-height:45px; color:var(--sky-blue); margin-right:10px;}
main .inner .section2_2 h4 span:nth-child(2) {font-size:30px; line-height:45px; text-align:center; color:#4d4d4d;}
main .inner .section2_2 img {display:block; margin-top:10px;}
main .inner .section2_2 p {font-size:18px; line-height:27px; color:#333; margin:10px 0;}

/* ご葬儀の種類 */
main .inner .section3 {background:var(--sky-blue3); margin:100px 0 0 0;}
main .inner .section3_2 {display:flex; flex-wrap:wrap; padding:0 20px; margin-top:-30px;}
main .inner .section3_2 div {flex-basis:50%; padding:0 10px; margin-top:20px;}
main .inner .section3_2 div h4 {background:url("../img/nagare/section3_h4.svg"); font-size:30px; width:100%; height:60px; line-height:60px; font-weight:500;background-repeat:no-repeat; background-position: center; text-align:center;}
main .inner .section3_2 div p {padding:0 40px 30px 40px; font-size:18px; line-height:28px; color:#333;}
main .inner .section3_3 {display:flex; justify-content: center; align-items:flex-end; background-color:#dbf0f2; height:160px; padding:0 30px;}
main .inner .section3_3 div.cell {flex-basis:50%; overflow:visible;}
main .inner .section3_3 div.cell div.text {display:flex; align-items:center; height:160px;}
main .inner .section3_3 div.cell div.text p {font-size:18px; line-height:31px; color:#333; padding-right:30px;}
main .inner .section3_ul {padding:10px 40px;}
main .inner .section3_ul li {list-style-type:disc; font-size:16px; line-height:22px; color:var(--emerald-green2); }

/* 葬儀の流れ */
main .inner .section4 {background:var(--sky-blue3); margin:100px 0 0 0; padding-bottom:30px; height:auto; }
main .inner .section4 .section4_2 {width:100%; padding:0 20px;}
main .inner .section4 .section4_2 .items {background:url("../img/nagare/section4_cover.svg"); background-size: 100%; height:90px; overflow-y:hidden;background-repeat:no-repeat; background-position: 0 0; width:100%; box-shadow:0 0 3px rgb(0, 0, 0, 0.2);}

main .inner .section4 .section4_2 .items .sub1 {display:flex; width:100%; height:clamp(0px, calc(var(--vwh) * 90vw), 90px); cursor:pointer; }
main .inner .section4 .section4_2 .items .sub1 div:nth-child(1) {flex-basis: 46%; text-align:right; font-size:42px; line-height:95px; color:#9cd5db; font-family: 'Noto Serif JP', serif;}
main .inner .section4 .section4_2 .items .sub1 div:nth-child(2) {flex-basis: 28%; text-align:center;}
main .inner .section4 .section4_2 .items .sub1 div:nth-child(2) h4 {font-size:30px; line-height:90px; text-align:left; padding:0 10px; box-sizing: border-box; font-weight: 500;}
main .inner .section4 .section4_2 .items .sub1 div:nth-child(2) h4 span.s {font-size:18px;}
main .inner .section4 .section4_2 .items .sub1 div:nth-child(3) {flex-basis: 26%; text-align:left; }
main .inner .section4 .section4_2 .items .sub1 div:nth-child(3) p {color:#51bcb2; font-weight:500; font-size:16px; line-height:90px; position: relative;}
main .inner .section4 .section4_2 .items .sub1 div:nth-child(3) p::after {content:url("../img/nagare/section4_open.svg"); display:inline-block; position:relative; width:25px; top:6px; left:5px;}
main .inner .section4 .section4_2 .items .sub1.open div:nth-child(3) p::after {content:url("../img/nagare/section4_close.svg");}

main .inner .section4 .section4_2 .items .sub2 {display:flex; width:100%; margin-top:20px;}
main .inner .section4 .section4_2 .items .sub2 div:nth-child(1) {flex-basis: 40%;  padding:0 10px 0 14px;}
main .inner .section4 .section4_2 .items .sub2 div:nth-child(2) {flex-basis: 60%;  padding:0 40px 0 10px;}
main .inner .section4 .section4_2 .items .sub2 div:nth-child(2) h4 {font-size:30px; line-height:47px; color:#4d4d4d;background:url("../img/nagare/section4_h4_2.svg"); background-repeat:no-repeat; padding-left:50px; }
main .inner .section4 .section4_2 .items .sub2 div:nth-child(2) h4 span {color:#fff; margin-right:10px;}
main .inner .section4 .section4_2 .items .sub2 div:nth-child(2) p {font-size:18px; line-height:28px; color:#333; margin-top:20px;}

main .inner .section4 .section4_2 .items h5.sub3 {color:var(--red-orange); font-size:24px; line-height:37px; padding:0 30px;}
main .inner .section4 .section4_2 .items h5.sub3::before {content:url("../img/nagare/section4_h5.svg"); display:inline-block; width:40px; margin-top:30px;}

main .inner .section4 .section4_2 .items .sub4 {display:flex;  justify-content: center; padding:0 40px; margin-bottom:20px;background:url("../img/nagare/section4_item_bottom_border.svg");background-repeat: no-repeat;background-position-y:30px;background-size:100%;}
main .inner .section4 .section4_2 .items .sub4 div {padding:20px 15px 30px 15px;  box-sizing: border-box; position: relative; }
main .inner .section4 .section4_2 .items .sub4 div p.img {position:absolute; margin-left:-25px; width:30px; height:30px; padding:0px 10px; top:5px; left:50%;text-align:center; box-sizing:content-box; background-color:#fff;display: flex;}
main .inner .section4 .section4_2 .items .sub4 div p.text {padding:20px 15px; background:#fff; border:2px solid #9cd5db; border-radius:5px; height:120px; font-size:18px; line-height:26px; color:#333;}
main .inner .section4 .section4_2 .item1 .sub4 div:nth-child(1),
main .inner .section4 .section4_2 .item2 .sub4 div:nth-child(1),
main .inner .section4 .section4_2 .item3 .sub4 div:nth-child(1),
main .inner .section4 .section4_2 .item4 .sub4 div:nth-child(1) {flex-basis: 33.3%;}
main .inner .section4 .section4_2 .item1 .sub4 div:nth-child(2) ,
main .inner .section4 .section4_2 .item2 .sub4 div:nth-child(2) ,
main .inner .section4 .section4_2 .item3 .sub4 div:nth-child(2) ,
main .inner .section4 .section4_2 .item4 .sub4 div:nth-child(2) {flex-basis: 33.4%;}
main .inner .section4 .section4_2 .item1 .sub4 div:nth-child(3) ,
main .inner .section4 .section4_2 .item2 .sub4 div:nth-child(3) ,
main .inner .section4 .section4_2 .item3 .sub4 div:nth-child(3) ,
main .inner .section4 .section4_2 .item4 .sub4 div:nth-child(3) {flex-basis: 33.3%;}

main .inner .section4 .section4_2 .item5 .sub4 div:nth-child(1),
main .inner .section4 .section4_2 .item6 .sub4 div:nth-child(1),
main .inner .section4 .section4_2 .item5 .sub4 div:nth-child(2),
main .inner .section4 .section4_2 .item6 .sub4 div:nth-child(2) {flex-basis: 50%;}

main .inner .section4 .section4_2 .item5 .sub4 div:nth-child(1) p.text,
main .inner .section4 .section4_2 .item5 .sub4 div:nth-child(2) p.text {letter-spacing:-1px; text-align:center; padding-top:30px; }

main .inner .section4 .section4_2 .under-arrow {width:30px; text-align:center; margin:10px auto;}

/* 納骨 */
main {overflow-x:hidden;}
main .inner .section5 {margin:100px 0 50px 0; display:flex; justify-content: center; justify-items: center; width:2000px; margin-left:-600px;background-image:url("../img/nagare/section5_cover.png");background-repeat: no-repeat;background-size: 100% 100%;background-position:-650px 0;}
main .inner .section5 .items {flex-basis: 400px; box-sizing: border-box; padding:60px 0px;}
main .inner .section5 .item1 {padding-right:30px;}
main .inner .section5 .item1 p {font-size:20px; line-height:36px; color:#333; font-weight: 500; }
main .inner .section5 .item1 p::before {content:url("../img/nagare/section5_p.svg"); width:30px; display:inline-block; }
main .inner .section5 .item2 .img {margin-top:-100px;;}
main .inner .section5 .item2 {padding-left:30px;}

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

    main .inner .section1 {padding-bottom:30px;}
    main .inner .section1 .l {flex-basis: 65%;}
    main .inner .section1 .r {flex-basis: 35%; padding:0;}
    main .inner .section1 .l h2 {font-size:calc(var(--min) * 32vw); line-height:calc(var(--min) * 50vw);  margin:20px 0 0 20px;}
    main .inner .section1 .l p:nth-of-type(1) {font-size:calc(var(--min) * 13vw); line-height:calc(var(--min) * 20vw); margin:15px 0 15px 10px;}
    main .inner .section1 .l p:nth-of-type(1) span {margin-left:calc(var(--min) * 13vw); line-height:calc(var(--min) * 20vw);}
    main .inner .section1 .l p:nth-of-type(2) {font-size:calc(var(--min) * 12vw); line-height:calc(var(--min) * 18vw);  margin:0 0 0 20px; }
    main .inner .section1 .l p:nth-of-type(2) br {display:none;}

    /*main .inner .section1 .l p:nth-of-type(1) {font-size:18px; line-height:31px; } */
    main .inner h3 {font-size:max(calc(var(--vwh) * 24vw), 16px); line-height:max(calc(var(--vwh) * 24vw), 16px); }

    main .inner .section2 {padding:0 20px; margin:50px 0px 0px 0px;}
    main .inner .section2_2 { padding:0; }
    main .inner .section2_2 .l,
    main .inner .section2_2 .c,
    main .inner .section2_2 .r { flex-basis: 33%; padding:0 max(calc(var(--vwh) * 10vw), 2px); margin:20px 0 20px 0;}
    main .inner .section2_2 h4 span:nth-child(1) {font-size:calc(var(--vwh) * 45vw); line-height:calc(var(--vwh) * 45vw); margin-right:calc(var(--vwh) * 10vw);}
    main .inner .section2_2 h4 span:nth-child(2) {font-size:calc(var(--vwh) * 30vw); line-height:calc(var(--vwh) * 45vw);}
    main .inner .section2_2 img {display:block; margin-top:10px;}
    main .inner .section2_2 p {font-size:max(calc(var(--vwh) * 18vw), 11px); line-height:max(calc(var(--vwh) * 27vw), 15px); color:#333; margin:10px 0;}


    main .inner .section3 {padding:0 20px; margin:50px 0px 0px 0px;}
    main .inner .section3_2 {padding:0 calc(var(--vwh) * 20vw) calc(var(--vwh) * 20vw) 0; }
    main .inner .section3_2 div {padding:0 calc(var(--vwh) * 10vw); margin:calc(var(--vwh) * 20vw) 0 ;}
    main .inner .section3_2 div h4 {
        font-size:calc(var(--vwh) * 24vw); 
        height:max(calc(var(--vwh) * 60vw), 30px); 
        line-height:max(calc(var(--vwh) * 60vw), 30px); 
    }
    main .inner .section3_2 div p {
        padding:0 calc(var(--vwh) * 40vw) calc(var(--vwh) * 0vw) calc(var(--vwh) * 40vw); 
        font-size:max(calc(var(--vwh) * 18vw), 11px);
        line-height:max(calc(var(--vwh) * 28vw), 14px);
    }
    main .inner .section3_3 {height:max(calc(var(--vwh) * 160vw), 100px);padding:0 30px;}
    main .inner .section3_3 div.cell div.text {height:max(calc(var(--vwh) * 160vw), 100px);}
    main .inner .section3_3 div.cell div.text p {font-size:max(calc(var(--vwh) * 18vw), 11px);line-height:max(calc(var(--vwh) * 31vw), 14px); padding-right:max(calc(var(--vwh) * 30vw), 10px);}
    main .inner .section3_ul li {font-size:max(calc(var(--vwh) * 16vw), 11px); line-height:max(calc(var(--vwh) * 22vw), 14px);}
    
    main .inner .section4 {padding:0 20px; margin:50px 0px 0px 0px; padding-bottom:20px;}
    main .inner .section4 .section4_2 {padding:0;}
    main .inner .section4 .section4_2 .items {height:calc(var(--vwh) * 90vw); }
    main .inner .section4 .section4_2 .items .sub1 div:nth-child(1) {flex-basis: 41%;}
    main .inner .section4 .section4_2 .items .sub1 div:nth-child(2) {flex-basis: 32%;}
    main .inner .section4 .section4_2 .items .sub1 div:nth-child(3) {flex-basis: 27%;}

    main .inner .section4 .section4_2 .items .sub1 div:nth-child(1) {font-size:max(calc(var(--vwh) * 42vw), 15px); line-height:max(calc(var(--vwh) * 95vw), 24px);}
    main .inner .section4 .section4_2 .items .sub1 div:nth-child(2) h4 {font-size:max(calc(var(--vwh) * 32vw), 15px); line-height:max(calc(var(--vwh) * 90vw), 24px); padding:0 10px;}
    main .inner .section4 .section4_2 .items .sub1 div:nth-child(3) p {font-size:max(calc(var(--vwh) * 16vw), 11px); line-height:max(calc(var(--vwh) * 90vw), 24px);}
    main .inner .section4 .section4_2 .items .sub1 div:nth-child(3) p::after {width:calc(var(--vwh) * 25vw); top:calc(var(--vwh) * 6vw); left:calc(var(--vwh) * 5vw);}
    
    main .inner .section4 .section4_2 .items .sub2 {margin-top:20px; }
    main .inner .section4 .section4_2 .items .sub2 div:nth-child(1) {flex-basis: 40%;  padding:0 10px 0 14px;}
    main .inner .section4 .section4_2 .items .sub2 div:nth-child(2) {flex-basis: 60%;  padding:0 10px 0 10px;}
    main .inner .section4 .section4_2 .items .sub2 div:nth-child(2) h4 {font-size:calc(var(--vwh) * 28vw); line-height:calc(var(--vwh) * 47vw); padding-left:calc(var(--vwh) * 50vw);height:calc(var(--vwh) * 50vw); }
    main .inner .section4 .section4_2 .items .sub1 div:nth-child(2) h4 span.s {font-size:calc(var(--vwh) * 18vw); }
    main .inner .section4 .section4_2 .items .sub2 div:nth-child(2) h4 span {margin-right:calc(var(--vwh) * 10vw);}
    main .inner .section4 .section4_2 .items .sub2 div:nth-child(2) p {font-size:max(calc(var(--vwh) * 18vw), 11px); line-height:max(calc(var(--vwh) * 26w), 15px); margin-top:calc(var(--vwh) * 10vw);}
    main .inner .section4 .section4_2 .items h5.sub3 {font-size:calc(var(--vwh) * 24vw); line-height:calc(var(--vwh) * 37vw); padding:0 calc(var(--vwh) * 30vw); }
    main .inner .section4 .section4_2 .items h5.sub3::before {width:calc(var(--vwh) * 40vw); margin-top:calc(var(--vwh) * 30vw);}

    main .inner .section4 .section4_2 .items .sub4 {
        padding:0 5px;
        margin-top:10px;
        background-position-y:calc(var(--vwh) * 30vw);
        background-size:200%;
    }
    main .inner .section4 .section4_2 .items .sub4 div {padding:0px 5px 30px 5px;}
    main .inner .section4 .section4_2 .items .sub4 div p.img {
        margin-left:calc(var(--vwh) * (-30vw)); 
        width:calc(var(--vwh) * 30vw); 
        height:auto; 
        padding:0 calc(var(--vwh) * 15vw);
        top:-5px; 
        text-align:center; 
        box-sizing:content-box; 
        display:flex;
    }

    main .inner .section4 .section4_2 .items .sub4 div p.text {
        padding:20px calc(var(--vwh) * 10vw); 
        height:max(calc(var(--vwh) * 120vw), 90px); 
        font-size:max(calc(var(--vwh) * 18vw), 11px); 
        line-height:max(calc(var(--vwh) * 26vw), 14px); 
    }


    /* 納骨 */
    main .inner .section5 {margin:100px 0 50px 0; width:100%; margin-left:0px; background-position:calc(var(--vwh) * -180vw) 0; }
    main .inner .section5 .items {flex-basis: 50%; padding:calc(var(--vwh) * 60vw) 20px;}
    main .inner .section5 .item1 {padding-right:calc(var(--vwh) * 30vw);}
    main .inner .section5 .item1 p {font-size:max(calc(var(--vwh) * 20vw), 12px); line-height:max(calc(var(--vwh) * 36vw), 16px);}
    main .inner .section5 .item1 p::before {width:max(calc(var(--vwh) * 30vw), 20px);}
    main .inner .section5 .item2 .img {margin-top:calc(var(--vwh) * 100vw * -1)}
    main .inner .section5 .item2 {padding-left:calc(var(--vwh) * 30vw),;}



}