@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:50%; margin-right:20px;}
main .inner .section1 .l h2 {font-size:43px; line-height:43px; color:#333; margin:30px 0 0 40px; position:relative; z-index:1;}
main .inner .section1 .l h2 span {font-size:30px; line-height:40px; font-weight:500; color:#333;}
main .inner .section1 .l hr {background-color:var(--yellow); height:20px; width:calc(100% - 80px); border:0; position:relative; z-index:0; top:-8px; margin:0 80px 0 40px; display:block;}
main .inner .section1 .l p:nth-of-type(1) {font-size:24px; line-height:24px; color:#333; margin:30px 0 0 40px; padding:10px 0 10px 20px; background:url("../img/oisogi/section1_p.svg"); background-repeat: no-repeat;  background-size:100%; background-position: center; color:#fff; font-weight:700; letter-spacing:1px;}
main .inner .section1 .l p:nth-of-type(1) span {color:#fff; font-size:14px; line-height:24px; font-weight:700;}
main .inner .section1 .r {flex-basis:50%; margin-left:20px;}
main .inner .section1 .r .image {text-align:left; margin-top:50px; padding-right:30px; box-sizing:border-box; }

/* ご葬儀のご用命・お問い合わせ */
main .inner .section2 .inner1 {background-color: #db4d42; padding:25px; }
main .inner .section2 .inner1 .inner2 {background-color: #fff;}
main .inner .section2 .inner1 .inner2 .line1 {display:flex; justify-content: center; justify-items: center; align-items: flex-end; padding:10px 0; }
main .inner .section2 .inner1 .inner2 .line1 .col1 {flex-basis: 25%; display:flex; align-items:flex-end;}
main .inner .section2 .inner1 .inner2 .line1 .col1 .img {flex-basis: 50%; padding:0 5px;}
main .inner .section2 .inner1 .inner2 .line1 .col2 h3 {font-size:20px; line-height:20px; color:#db4d42; text-align:center;}
main .inner .section2 .inner1 .inner2 .line1 .col2 p {font-size:55px; line-height:55px; color:#db4d42; text-align:center; font-weight:700;}
main .inner .section2 .inner1 .inner2 .line2 {background-color:#db4d42; text-align:center; width:72%; margin:0 auto; color:#fff; font-weight:500; font-size:24px; line-height:45px;}
main .inner .section2 .inner1 .inner2 .line3 {font-size:18px; line-height:26px; text-align:center; margin:0 auto; padding:10px 0 15px 0; color:#595757;}
main .inner .section2 .inner1 .inner2 .line4 {display: none;}

/* 事前相談・資料請求がなくてもご依頼頂けます */
main .inner .section3 {margin-top:50px;}
main .inner .section3 h3 {background-image:url("../img/oisogi/section3_1.svg"); background-repeat: no-repeat; background-position:center; padding:10px; margin:0px auto; font-size:24px; line-height:30px; text-align:center; position:relative; z-index:1;}
main .inner .section3 .inner1 {background-color:#e2f3f5; padding:40px 25px 25px 25px; box-shadow:0 5px 3px  rgba(0,0,0,0.2); position: relative; z-index:0; top:-20px;}
main .inner .section3 .inner1 .inner2 {background-color:#fff; padding:20px 0 10px 0; border-radius:10px; }
main .inner .section3 .inner1 .inner2 h4 {font-size:24px; line-height:36px; color:#db4d42; max-width:560px; margin:0 auto;}
main .inner .section3 .inner1 .inner2 div.img {display:none;}
main .inner .section3 .inner1 .inner2 ul {max-width:560px; margin:20px auto;}
main .inner .section3 .inner1 .inner2 ul li {font-size:18px; line-height:24px; color:#000; background-image: url("../img/oisogi/section3_2.svg"); background-repeat:no-repeat; background-position:left center; background-size:30px; padding-left:35px; margin:8px 0px;}
main .inner .section3_next {width:50px; margin:0 auto; position:relative; top:-30px;}

/* お問い合わせ後の流れ */
main .inner .section4 h3 {font-size:24px; line-height:24px; color:#333; margin:0 auto; text-align:center; position: relative; top:-15px;}
main .inner .section4 .nagarezu {display:flex; justify-content: center; justify-items: center; align-items :center; background-color:#f2f2f2; padding:30px 0 15px 0; margin-top:10px;position:relative;}
main .inner .section4 .nagarezu div.box {height:210px; max-width:140px; width:100%; margin:20px 0px; background-color: #fff; font-size:24px; line-height:33px; border-radius:0 20px 0 0; position:relative;}
main .inner .section4 .nagarezu div.box .n {color:#51bcb2; font-size:77px; line-height:33px; font-weight:500;font-family: 'Noto Serif JP', serif; position:relative; top:-15px; left:-15px;letter-spacing:-8px;}
main .inner .section4 .nagarezu div.box h4 {color:#4d4d4d; font-size:24px; line-height:33px; font-weight:500; position:relative; left:8px; top:0px;}
main .inner .section4 .nagarezu div.box div.img {width:90%; margin:0 auto; position:relative;}
main .inner .section4 .nagarezu div.box1 div.img {top:5px;}
main .inner .section4 .nagarezu div.box2 div.img {width:70%;top:0px;}
main .inner .section4 .nagarezu div.box3 div.img {top:60px;}
main .inner .section4 .nagarezu div.box4 div.img {top:30px;}
main .inner .section4 .nagarezu div.box.arrow {max-width: 55px; width:100%; background-color:transparent; display:flex; align-items :center;}
main .inner .section4 .nagarezu div.box.arrow .img:nth-child(2) {display:none;}
main .inner .section4 .nagarezu div.box.arrow div.img {padding:0 14px; box-sizing: border-box; flex-basis: 100%;  position:relative;}

/* ここがポイント */
main .inner .section5  {margin:50px 0; display:flex; justify-content: center; justify-items: center; align-items :center; padding:10px 30px; border:3px solid #97d7d1; border-radius:10px;}
main .inner .section5 div.l {flex-basis: 75%;}
main .inner .section5 div.r {flex-basis: 25%;}
main .inner .section5 div.l h3 {background:url("../img/oisogi/section5_h3.svg"); background-repeat: no-repeat; padding:10px; color:#fff;}
main .inner .section5 div.l p {font-size:18px; line-height:30px; color:#333; margin-top:10px;}

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

    /* 見出し */
    main .inner .section1 {padding:0 0 20px 0; background:initial; background-color:#e2f3f5; background-image:url("../img/oisogi/section1_bg_sp.png"); background-position:0 -30%; background-size:100%; background-repeat: no-repeat;}
    main .inner .section1 .l {margin-right:0; flex-basis: 60%;}
    main .inner .section1 .l h2 {font-size:calc(var(--min) * 32vw); line-height:calc(var(--min) * 32vw); margin:10% 0 0 20px;}
    main .inner .section1 .l h2 span {font-size:calc(var(--min) * 18vw); line-height:calc(var(--min) * 25vw);}
    main .inner .section1 .l hr {height:12px; width:calc(var(--min) * 195vw); top:-8px; margin:0 0 0 20px;}
    main .inner .section1 .l p:nth-of-type(1) {font-size:calc(var(--min) * 18vw); line-height:calc(var(--min) * 28vw); font-weight:700; margin:0 0 0 20px; padding:0 calc(var(--min) * 10vw);padding:0 calc(var(--min) * 10vw); height:calc(var(--min) * 30vw); box-sizing: content-box; background:url("../img/oisogi/section1_p_sp.svg");  background-repeat:no-repeat; background-position:left center; }
    main .inner .section1 .l p:nth-of-type(1) span {display:none;}
    main .inner .section1 .r {flex-basis: 40%; margin:0;}
    main .inner .section1 .r .image {flex-basis: 100%; margin-top:20px; padding-right:10px;}

    main .inner h3 {font-size:max(calc(var(--vwh) * 24vw), 16px); line-height:max(calc(var(--vwh) * 24vw), 16px); }

    /* ご葬儀のご用命・お問い合わせ */
    main .inner .section2 .inner1 {padding:10px; margin:0 10px;}
    main .inner .section2 .inner1 .inner2 .line1 {width:100%; padding:10px 0 2px 0; border:0px solid #333; width:calc(100% - 40px); margin:0 auto; }
    main .inner .section2 .inner1 .inner2 .line1 .col1 {flex-basis: 25%;}
    main .inner .section2 .inner1 .inner2 .line1 .col1 .img:nth-child(1) {display: none;}
    main .inner .section2 .inner1 .inner2 .line1 .col1 .img:nth-child(2) {flex-basis: 100%; padding:5px 5px 2px 0; text-align:left; border:0px solid #333;}
    main .inner .section2 .inner1 .inner2 .line1 .col1 .img:nth-child(2) img {width:100%;}
    main .inner .section2 .inner1 .inner2 .line1 .col2 {flex-basis: 75%;}
    main .inner .section2 .inner1 .inner2 .line1 .col2 h3 {font-size:calc(var(--vwh) * 30vw); line-height:calc(var(--vwh) * 30vw); text-align:left; }
    main .inner .section2 .inner1 .inner2 .line1 .col2 p {font-size:calc(var(--vwh) * 65vw); line-height:calc(var(--vwh) * 65vw); text-align:left;}
    main .inner .section2 .inner1 .inner2 .line2 {width:calc(100% - 40px); font-size:calc(var(--vwh) * 28vw); line-height:calc(var(--vwh) * 50vw); font-weight:700;}
    main .inner .section2 .inner1 .inner2 .line3 {display:none;}
    main .inner .section2 .inner1 .inner2 .line4 {display:block; font-size:calc(var(--vwh) * 22vw); line-height:calc(var(--vwh) * 22vw); text-align:center; padding:5px 0 15px 0;}

    /* 事前相談・資料請求がなくてもご依頼頂けます */
    main .inner .section3 {margin:30px 0 0 0; padding:0;  background-color:#e2f3f5; }
    main .inner .section3 h3 {display:none; margin:0;}
    main .inner .section3 .inner1 {padding:40px; margin:0; box-shadow: none; top:0;}
    main .inner .section3 .inner1 .inner2 {padding:20px 0 10px 0;}
    main .inner .section3 .inner1 .inner2 h4 {font-size:calc(var(--min) * 15vw); line-height:calc(var(--min) * 25vw); padding:0 10px; box-sizing: border-box; text-align:center;}
    main .inner .section3 .inner1 .inner2 div.img {display:block; width:30%; border-bottom:2px solid #db4d42; padding:0 0 20px 0; margin:30px auto;}
    main .inner .section3 .inner1 .inner2 ul li {font-size:calc(var(--min) * 15vw); line-height:calc(var(--min) * 20vw); background-position-y: calc(var(--min) * 4vw);color:#000; background-size:30px; padding-left:35px; margin:10px 20px 10px 10px;}
    main .inner .section3_next {display:none;}
 
    /* お問い合わせ後の流れ */
    main .inner .section4 {margin:0 10px; }
    main .inner .section4 h3 {font-size:calc(var(--vwh) * 32vw);line-height:calc(var(--vwh) * 32vw); margin:35px auto 0px auto; }
    main .inner .section4 .nagarezu {padding:calc(var(--min) * 30vw) calc(var(--min) * 40vw) calc(var(--min) * 15vw) calc(var(--min) * 40vw); flex-direction:column;}
    main .inner .section4 .nagarezu div.box {height:calc(var(--min) * 60vw); max-width:100%; width:100%; margin:calc(var(--vwh) * 20vw) 0px; display:flex; align-items: center;}
    main .inner .section4 .nagarezu div.box .n {font-size:calc(var(--min) * 46vw);line-height:calc(var(--min) * 46vw); position:relative; top:0; left:0; letter-spacing:calc(var(--vwh) * -8vw); flex-basis: 20%; padding-left:5px;}
    main .inner .section4 .nagarezu div.box h4 {font-size:calc(var(--min) * 16vw);line-height:calc(var(--min) * 16vw); flex-basis: 40%;}
    main .inner .section4 .nagarezu div.box h4 br {display:none;}
    main .inner .section4 .nagarezu div.box div.img {flex-basis: 40%;}
    main .inner .section4 .nagarezu div.box1 div.img {position:relative; top:0; left:0;}
    main .inner .section4 .nagarezu div.box1 div.img img {width:calc(var(--min) * 90vw); position:absolute; top:calc(var(--min) * -42vw); right:calc(var(--min) * 10vw);}
    main .inner .section4 .nagarezu div.box2 div.img {position:relative; top:0; left:0;}
    main .inner .section4 .nagarezu div.box2 div.img img {width:calc(var(--min) * 80vw); position:absolute; top:calc(var(--min) * -56vw); right:calc(var(--min) * 20vw);}
    main .inner .section4 .nagarezu div.box3 div.img {position:relative; top:0; left:0;}
    main .inner .section4 .nagarezu div.box3 div.img img {width:calc(var(--min) * 90vw); position:absolute; top:calc(var(--min) * -22vw); right:calc(var(--min) * 10vw);}
    main .inner .section4 .nagarezu div.box4 div.img {position:relative; top:0; left:0;}
    main .inner .section4 .nagarezu div.box4 div.img img {width:calc(var(--min) * 100vw); position:absolute; top:calc(var(--min) * -20vw); right:calc(var(--min) * 10vw);}
    main .inner .section4 .nagarezu div.box.arrow {height:auto; padding:0; margin:0;}
    main .inner .section4 .nagarezu div.box.arrow .img:nth-child(1) {display:none;}
    main .inner .section4 .nagarezu div.box.arrow .img:nth-child(2) {display:block;}
    main .inner .section4 .nagarezu div.box.arrow div.img {padding:0 8px;}

    /* ここがポイント */
    main .inner .section5  {margin:50px 10px; padding:35px 30px 15px 30px; flex-direction: column-reverse; position: relative;}
    main .inner .section5 div.l h3 {position: absolute; top:0; left:0; right:0;  bottom:0; padding-left:25px;
        margin:-27px auto 0 auto; width:180px; font-size:16px; line-height:26px; font-weight:900;}
    main .inner .section5 div.l p {font-size:calc(var(--min) * 14vw); line-height:calc(var(--min) * 25vw); margin:10px auto; font-weight:500;}
    main .inner .section5 div.l p br {display: none;}

}