@charset "urf-8";

#shinrokibou header{
    background: #DCF6F8;
    display:flex;
    justify-content: center;
    align-items:center;
}

#shinrokibou p{
    font-size:1.3rem;
    line-height:1.8;
}

#shinrokibou .fullcontainer{
    width:100%;
}

#shinrokibou .container{
    width:100%;
    max-width:calc(960px + 4rem);
    margin:4rem auto;
    padding:0 2rem;
}

.mokujiBlockWrap{
    width:80%;
    margin:4rem 0 7rem 0;
    border:1px solid #48BBC4;
}

@media screen and (max-width:768px) {
    .mokujiBlockWrap{
        width:100%;
        margin:4rem 0 7rem 0;
    }
}

.mokujiBlock{
    padding:2rem;
}

.mokujiBlock h2{
    font-weight:400;
    margin-bottom:1.6rem;
}

.mokujiList li{
    margin-bottom:1.4rem;
    font-size:1.3rem;
    line-height:1.5;
}

.mokujiList > li:last-of-type{
    margin-bottom:0;
}

.mokujiList li a{
    color:#48BBC4;
    text-decoration:underline;
}

.mokujiChildList{
    text-indent:-1.25rem;
    padding-left:1rem;
}

.columnSection{
    margin-bottom: 60px;
}

.columnSection h3{
    line-height: 1.6;
    font-size:1.8rem;
    font-weight:600;
    color:#48BBC4;
    margin:2rem 0;
}

.columnSection h4{
    font-size: 1.5rem;
    margin: 4rem 0 2rem 0;
    line-height:1.6;
    padding: 1rem;
    color: #707070;
    border-left: 5px solid #48BBC4;
}

.imageBox{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
}


.imageBoxFront p{
    margin:0 2rem 0 0;
}

.imageBox img{
    margin-top:4rem;
    width:30%;
}

@media screen and (max-width:768px) {
    .imageBox{
        display:flex;
        flex-direction: column;
        justify-content:space-between;
        align-items:center;
    }

    .imageBox img{
        margin-top:2rem;
        width:50%;
    }
}

.imageBoxBtm{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
}


.imageBoxFront p{
    margin:0 2rem 0 0;
}

.imageBoxBtm img{
    width:22%;
}

@media screen and (max-width:768px) {
    .imageBoxBtm{
        display:flex;
        flex-direction: column;
        justify-content:space-between;
        align-items:center;
    }

    .imageBoxBtm img{
        margin-top:2rem;
        width:40%;
    }
}

#shinrokibou hr.line {
    width: 220px;
    height: 20px;
    border: none;
    background: none;
    position: relative;
    margin:6rem auto;
    
}
#shinrokibou hr.line::before {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    background-color: #FBF897;
    position: absolute;
    top: 0;
    left: 0;
    box-shadow: 
        40px 0 0 0 #A2E3E8,
        80px 0 0 0 #FFBFD0,
        120px 0 0 0 #FBF897,
        160px 0 0 0 #A2E3E8,
        200px 0 0 0 #FFBFD0;
}

#requestBlock2{
    background: #ECF3EA;
    padding:4rem;
}

.requestBtn2 a{
    display:block;
}

.requestBtn2 img{
    display: block;
    width: 100%;
    max-width:440px;
    margin: 2rem auto 0 auto;
}

#shinrokibou .arrowBox{
    background:#FFFFFF;
    border:2px solid #48BBC4;
    border-radius:10px;
    width: 90%;
    margin: 4rem auto 0 auto;
    padding:2rem;
    text-align:center;
    position:relative;
}

@media screen and (max-width:768px) {
    #shinrokibou .arrowBox{
        background:#FFFFFF;
        border:2px solid #48BBC4;
        border-radius:10px;
        width: 100%;
        margin: 4rem auto 0 auto;
        padding:2rem;
        text-align:center;
        position:relative;
    }   
}

#shinrokibou .arrowBox:after,#shinrokibou .arrowBox:before{
    border: solid transparent;
    content:'';
    height:0;
    width:0;
    pointer-events:none;
    position:absolute;
    bottom:100%;
    left:50%;
}

#shinrokibou .arrowBox:after{
    border-color: rgba(255, 255, 255, 0);
    border-top-width:20px;
    border-bottom-width:20px;
    border-left-width:15px;
    border-right-width:15px;
    margin-left: -15px;
    border-bottom-color:#FFFFFF;
}

#shinrokibou .arrowBox:before{
    border-color: rgba(72, 187, 196, 0);
    border-top-width:22px;
    border-bottom-width:22px;
    border-left-width:17px;
    border-right-width:17px;
    margin-left: -17px;
    margin-bottom: 2px;
    border-bottom-color:#48BBC4;
}

#shinrokibou .arrowBox p{
    color:#48BBC4;
    font-weight:bold;
    font-size: 1.8rem;
    line-height: 1.4;
}

@media screen and (max-width:768px) {
    #shinrokibou .arrowBox p{
        color:#48BBC4;
        font-weight:bold;
        font-size: 1.6rem;
        line-height: 1.4;
    }   
}

#shinrokibou .requestBanner img{
    width: 100%;
    max-width:512px;
    margin: 2rem auto 0 auto;
}

.yellowBox{
    background:#FBF897;
    margin:4rem 0;
    max-width:500px;
    padding:2rem 2rem 2rem 110px;
    position:relative;
}

.yellowBox:before{
    content:"";
    display: block;
    background:url("../../../../img/page/newcolumn/shinrokibou/icn_survey.png") no-repeat;
    width:108px;
    height:108px;
    position:absolute;
    top: 50%;
    left: 0%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

@media screen and (max-width:768px) {
    .yellowBox{
        background:#FBF897;
        margin:4rem 0;
        max-width:500px;
        padding:2rem 2rem 2rem 80px;
        position:relative;
    }
    .yellowBox:before{
        content:"";
        display: block;
        background:url("../../../../img/page/newcolumn/shinrokibou/icn_survey.png") no-repeat;
        background-size:contain;
        width:75px;
        height:75px;
        position:absolute;
        top: 50%;
        left: 0%;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
    }
}

.yellowBox ul li{
    color:#707070;
    font-weight: bold;
    text-indent: -1em;
    padding-left: 1em;
    line-height: 1.6;
}

.yellowBox ul li:first-child{
    margin-bottom:1rem;
}

.blueBox{
    border:5px solid #48BBC4;
    padding:2rem;
    margin:2rem 0;
}

.blueBox ul li{
    margin-bottom:1rem;
    line-height:1.6;
    font-weight:600;
    color:#707070;
    text-indent: -1em;
    padding-left: 1em;
}

.blueBox ul li:last-child{
    margin-bottom:0;
}

.yellowBox ul li span{
    font-size:1rem;
}

.blueBox ul li span{
    font-size:1.25rem;
}

.requestBlockBeige{
    background: #FAF2E8;
    padding:2rem 4rem;
    display:flex;
    justify-content: center;
    align-items:center;
    flex-direction:column;
}

@media screen and (max-width:768px) {
    .requestBlockBeige{
        background: #FAF2E8;
        padding:2rem 2rem;
        display:flex;
        justify-content: center;
        align-items:center;
        flex-direction:column;
    }    
}

.requestBlockBeige p{
    font-weight:bold;
    color:#707070;
}

.requestBtn1{
    max-width:350px;
}

span.blueBoldText{
    color: #48BBC4;
    font-weight:bold;
}

span.redBoldText{
    color:#FF0000;
    font-weight: bold;
}

.requestBlockGreen{
    background: #ECF3EA;
    margin-bottom: 2rem;
    padding:2rem 4rem;
}

@media screen and (max-width:768px) {
    .requestBlockGreen{
        background: #ECF3EA;
        margin-bottom: 2rem;
        padding:2rem 2rem;
    }   
}

span.orangeBoldText{
    color:#ff7700;
}

span.pinkUnderLine{
    color:#E14D75;
    text-decoration: underline;
}

.indentBox{
    max-width:94%;
    margin-left:6%;
}

#columnArea h5{
    background: #DCF6F8;
    color:#48BBC4;
    font-weight:bold;
    margin:4rem 0 2rem 0;
    padding:2rem 1rem;
}

.reverseImageBox{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom:2rem;
}

.reverseImageBox img{
    max-width:216px;
    margin-right:40px;
}

@media screen and (max-width:768px) {
    .reverseImageBox{
        display: flex;
        justify-content: flex-start;
        flex-direction: column;
        align-items: center;
        margin-bottom:2rem;
    }
    .reverseImageBox img{
        max-width:150px;
        margin-right:0;
        margin-bottom: 2rem;
    }
}


.reverseImageBoxRight h3{
    color:#48BBC4;
    font-weight:bold;
    font-size:1.6rem;
    margin-bottom:2rem;
}

.buttonList{
    margin:2rem 0;
}

.buttonList ul{
    display:flex;
    justify-content: center;
    gap:40px;
}

@media screen and (max-width:768px) {
    .buttonList ul{
        display:flex;
        flex-direction:column;
        justify-content: center;
        gap:40px;
    }   
}

.buttonList ul li {
    width:100%;
    max-width:380px;
}

.buttonList ul li a{
    background: #48BBC4;
    border-radius:8px;
    color:#ffffff;
    display: block;
    filter: drop-shadow(0px 8px 0px rgba(38,149,158,1));
    font-weight:700;
    font-size:1.8rem;
    padding:2rem;
    position:relative;
    text-align: center;
}

.buttonList ul li a:after{
    content:"";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 12px solid #ffffff;
    border-right: 0;
    position:absolute;
    top: 50%;
    right: 5%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

.orangeBlockWrap{
    border:4px solid #FF7700;
    padding: 4rem 3rem;
    margin: 2rem 0;
}

.orangeBlock{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap:20px;
}

@media screen and (max-width:768px) {
    .orangeBlock{
        display: flex;
        flex-direction:column;
        justify-content: center;
        align-items: center;
        gap:20px;
    }
}

#shinrokibou p.orangeRightBoxTitle{
    font-size:2.2rem;
    font-weight: bold;
    color:#ff7700;
    font-feature-settings:"palt";
    letter-spacing: 1px;
}

.orangeButton{
    margin-top:2rem;
}

.orangeButton a{
    display: block;
    background: #FF7700;
    text-align: center;
    color:#ffffff;
    font-weight: bold;
    font-size:1.2rem;
    max-width:260px;
    border-radius:8px;
    padding:1.5rem 2rem 1.5rem 1rem;
    position:relative;
}

.orangeButton a:after{
    content:"";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 12px solid #ffffff;
    border-right: 0;
    position:absolute;
    top: 50%;
    right: 5%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

.tekiseiBlock{
    display:flex;
    margin-top:4rem;
    gap:20px;
}

@media screen and (max-width:768px) {
    .tekiseiBlock{
        display:flex;
        flex-direction:column;
        margin-top:4rem;
        gap:20px;
    } 
}

.tekiseiBlock img{
    width:100%;
    max-width:300px;
    height:100%;
}