@charset "utf-8";

/* CSS Document */



/* =======================================

	2023.04  No.196

    p07/ その丘の季節

======================================= */

/*---Text Head---*/

    /*FV*/

#p07 #mainArea h2{

    width:25%;

    margin:0 auto;

    padding:7% 0 0;

    opacity:0;

    animation-delay:1s;

    animation-duration: 5s;

    animation-fill-mode:forwards;

}

#p07 #mainArea h2 img{

    filter: drop-shadow(4px 4px 10px #FFF);

}



#p07 #mainArea h3{

    width:52px;

    position:absolute;

    left:20%;

    top:0.8em;

    z-index:10;

    transition:0.5s;

}



#p07 #mainArea h3 img{

    width:100%;

    filter: drop-shadow(3px 3px 2px #FFF);

}



#p07 #mainArea h4{

    width:15%;

    margin:0 auto 3.5em;

}



#p07 #mainArea h5{

    font-size:18px;

    line-height:1.7em;

    font-family:"Shuei KakuGo Gin M";

    color:#006699;

    margin:0 auto 0.8em;

    display:inline-block;

    position:relative;

}



#p07 #mainArea h6{

    width:33%;

    margin:0 auto 1em;

}



/*---Text Para---*/

#p07 #mainArea p{

  font-size:18px;

  line-height:2.3em;

  margin-bottom:2em;

}

#p07 #mainArea p span{

    display: inline-block;

    text-indent:0;

}



/*column*/

#p07 #mainArea div.column p{

    position:relative;

    font-family:"Shuei Yokobuto Min M";

    /*font-weight:bold;*/

    letter-spacing:0.2em;

}



#p07 #mainArea div.column p#txt01{

    width:55%;

    margin-left:43%;

}



#p07 #mainArea div.column p#txt02{

    margin:4em auto 5.5em;

    text-shadow: 1px 1px 3px #FFFFFF;

}



#p07 #mainArea div.column p#txt03{

    width:50%;

    margin:1.5em 20% 0 30%;

}



/*topics*/

#p07 #mainArea div.topics p{

    font-size:15px;

    line-height:2em;

    font-family:"Shuei KakuGo Gin M";

    color:#000;

}



/* =======================================

	PC

======================================= */



/*---Layout---*/



#wrapper{

   animation-duration: 3s; 

}





#mainArea{

    min-height:100vh;

    background:#FFF url("../img/soh_ill01_2.jpg") no-repeat center top;

    background-size:auto 100vh;

}



div.pages.hrzn #mainArea{

    background:#FFF;

}



.contArea{

    width:88%;

    max-width:1200px;

    min-width:850px;

    margin:0 auto 3em;

}



.titleArea{

    width:100%;

    height:100vh;

    position:relative;

    background:none;

}



div.pages.hrzn #mainArea .titleArea{

    background:#FFF url("../img/soh_ill01_2.jpg") no-repeat center 4vh;

    background-size:auto 100%;

}



.textArea{

    width:100%;

    position:relative;

    padding-bottom:5em;

}



div.column{

    width:88%;

    margin:3em auto 7em;

    position:relative;

}



div.column .illWrap{

    width:100%;

    height:auto;

    position:relative;

}



div.column #ill02{

    width:42%;

    position:absolute;

    right:-3%;

    top:-2em;

}





div.topics{

    border-top:solid 1px #0069A0;

    border-bottom:solid 1px #0069A0;

    text-align: center;

    padding:3em 0;

    margin-bottom:5em;

}



div.topics ul{

    width:52%;

    margin:0 auto;

}



div.topics ul li{

    margin:0 auto 5em;

}



div.topics ul li a{

    text-decoration: none;

    color:none;

}



div.topics ul li a:hover{

    opacity:0.5;

}



div.topics ul li h5::after{

    content:' ';

    width:2em;

    height:2em;

    background: url("../../../assets/images/parts/soh/soh_topic_link.png") no-repeat center;

    background-size:contain;

    position:absolute;

    right:-3.5em;

    top:0.5em;

}



div.topics ul li h5.short::after{

    top:-0.25em;

}



div.eyecatch a.btn{

    width:33%;

    display:block;

    margin:0 auto;

    padding:0.8em 0;

    border:solid 1px #0069A0;

    background:#FFF;

    color:#0069A0;

    text-align: center;

    font-size:16px;

    font-family: "A1 Mincho";

    font-weight:bold;

    text-decoration: none;

    transiton:2s;

}



div.eyecatch a.btn:hover{

    background:#0069A0;

    color:#FFF;

}



/* =======================================

	TABLET

======================================= */

@media screen and  (min-width:641px) and ( max-width:1024px) {



}

/* =======================================

	SMPH

======================================= */

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

    /*---Text Head---*/ 

        /*FV*/

    #p07 #mainArea h2{

        width:54%;

        margin:0 auto;

        padding:10% 0 0;

    }

    #p07 #mainArea h3{

        width:58%;

        position:relative;

        left:auto;

        top:auto;

        margin-bottom:2.5em;

    }

    #p07 #mainArea h4{

        width:33%;

        margin:0 auto 3em;

    }

    #p07 #mainArea h5{

        font-size:17px;

        line-height:1.7em;

        font-family:"Shuei KakuGo Gin M";

        color:#006699;

        margin:0 auto 0.8em;

        text-align: center;

    }

    #p07 #mainArea h6{

    width:80%;

    margin:0 auto 1.5em;

    }

    

    /*---Text Para---*/   

    #p07 #mainArea p{

      font-size:17px;

      line-height:2.25em;

      margin-bottom:1.8em;

    }

            /*column*/

            #p07 #mainArea div.column p{

                position:relative;

                letter-spacing:0.1em;

            }



            #p07 #mainArea div.column p#txt01{

                width:100%;

                margin-left:0;

            }



            #p07 #mainArea div.column p#txt02{

                margin:0 auto 2em;

                padding-left:0;

            }



            #p07 #mainArea div.column p#txt03{

                width:100%;

                margin:0 auto 2em;

            }



            /*topics*/

            #p07 #mainArea div.topics p{

                width:78%;

                font-size:15px;

                line-height:2em;

                font-family:"Shuei KakuGo Gin M";

                color:#000;

                position:relative;

                margin:0 auto 5em;

            }



    /*---Layout---*/

    #mainArea{

        background:none;

    }

    

    .contArea{

        width:100%;

        max-width:auto;

        min-width:auto;

        margin:0 auto 2em;

        overflow-x: hidden;

    }



    .titleArea{

        width:100%;

        height:calc(100vw * 1.32);

        position:relative;

        background:url("../img/sp_soh_ill01.jpg") no-repeat center bottom;

        background-size:108% auto;

    }

    .textArea{

        margin:2em auto 0;

        padding-bottom:3em;

        }

    div.column{

        width:80%;

        min-width:auto;

        margin:0 auto;

    }



     div.column #ill02{

        width:120%;

        position:relative;

        left:-10%;

        right:auto;

        top:auto;

    }

    div.topics{

        width:90%;

        padding:3em 0 0;

        margin:0 auto 3em;

    }

    div.topics ul{

        width:100%;

    }

    

    div.topics ul li{

    margin:0 auto 7em;

    }

    div.topics ul li a:hover{

    opacity:1;

    }



    div.topics ul li h5::after{

        content:none;

    }



    div.topics ul li h5.short::after{

        content:none;

    }

    

    div.topics ul li p::after{

    content:' ';

    width:2em;

    height:2em;

    background: url("../../../assets/images/parts/soh/soh_topic_link.png") no-repeat center;

    background-size:contain;

    position:absolute;

    left:50%;

    bottom:-2.5em;

    margin-left:-1em;

    }

    div.eyecatch a.btn{

    width:80%;

    font-size:15px;

        transition:0;

    }



}



/* =======================================

	HACK

======================================= */



/*for Safari*/

@media screen and (-webkit-min-device-pixel-ratio:0)

  and (min-color-index:0) {

      div.column{width:85%;}

}

_::-webkit-full-page-media, _:future, :root div.column{

    width:85%;

}