@charset "utf-8";

/* CSS Document */



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

	2023.04  No.196

    p04/銘品館

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



/*---Text---*/



p{

font-size:17px;

  line-height:36px;

  font-weight: 500;

    text-indent:1em;

  margin-bottom:2em;  

}



p span,

h3 span{

    display: inline-block;

    text-indent:0;

}



#p04 div.infoArea h5{

    width:100%;

    font-size:17px;

    letter-spacing: 0.1em;

    margin:0 auto 1.5em;

    padding:0 0.5em 0.5em;

    border-bottom:solid 1px #cac0ae;

    text-align: left;

}



#p04 div.infoArea h5 span{

    font-size:0.8em;

}



#p04 div.infoArea p{

    width:75%;

    font-size:15px;

    line-height:25px;

    text-indent:0;

    margin:0 auto 1.5em 1%;

    text-align:inherit;

}



#p04 div.infoArea p.cap{

    width:70%;

    font-size:14px;

    line-height:22px;

    text-indent:0;

    margin:0 auto 0 1%;

    text-align:inherit;

}



#p04 div.infoArea p span.txt-s{

    font-size:0.9em;

}



#p04 div.infoArea p.cap > span::after{

    content:'／';

    

}



#p04 div.infoArea p.cap span.txt-s::after{

    content:'';

    

}



a.btn_map {

    width:45%;

    display: block;

    border: dashed 1px #6CA0A0;

    color: #007F72;

    border-radius: 30px;

    padding: 1em 0 0.8em;

    text-align: center;

    font-family: "Shuei KakuGo Gin B";

    font-size:0.9em;

    letter-spacing:0.1em;

    line-height: 1.2em;

    margin: 1.5em 0 0 0.8em;

    transition: 1s;

}

a.btn_map span{

    font-size:0.8em;

}



a.btn_map:hover{

    color:#FFF;

    background:#6CA0A0;

    border: solid 1px #6CA0A0;

    text-decoration: none;

}



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

	PC

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



/*---Layout---*/



.pages{

    /*background:#CAC0AE;*/

}



#mainArea{

    /*background:#CAC0AE;*/

	font-family: "Shuei KakuGo Gin M";

}





.contArea{

    background:#FFF;

}



.titleArea{

    width:96%;

    position:relative;

    margin:3vh auto 3.5em;

}



.titleArea .phoWrap{

    width:100%;

    height:94vh;

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

    background-size:cover;

}



.titleArea img#pho01{

    display:none;

}



.titleArea p{

    width:30%;

    position:absolute;

    left:10.5%;

    top:7%;

    display:block;

    animation-duration: 2s;

}



.titleArea p img{

    width:100%;

    filter: drop-shadow(1px 1px 10px #904d2e);

}



.titleArea .titleWrap{

    width:75%;

    position:absolute;

    left:13%;

    bottom:-15%;

    display:none;

}



.titleArea h2{

    width:40%;

    max-width:800px;

    /*position:absolute;

    left:10.5%;

    top:auto;

    right:auto;

    bottom:-27%;*/

    position:relative;

    transition:2s;

    filter:none;

}





.contArea.active .titleArea h2{

    /*opacity:1;*/

}



.titleArea h2 img{

    width:100%;

    image-rendering: auto;

}



h3{

    font-family: "Shuei KakuGo Gin B";

    font-weight:bold;

    font-size:20px;

    margin:3em 0 0 0;

    /*position:absolute;

    left:10.5%;

    bottom:-37%;

    opacity:0;

    transition:2s;*/

}



.contArea.active h3{

    /*opacity:1;*/

}



.textArea{

    width:88%;

    max-width:1200px;

    position:relative;

    padding-bottom:3em;

    margin:28vh auto 0 auto;

    /*margin-top:27em;*/

}



div.column{

    width:78%;

    margin-left:auto;

    margin-right:auto;

    margin-bottom:1.5em;

    /*opacity:0;*/

}



.contArea.active div.column{

    /*opacity:1;*/

}



div.column p#pho02{

    width:40%;

    margin-left:0;

    margin-right:7%;

    margin-top:0.8em;

    text-indent:0;

    display:inline-block;

    vertical-align:top;

}



div.column p#pho02 img{

    width:100%;

}



div.column div.pWrap{

display:inline-block;

    width:52%;

    vertical-align:top;

}



#p04 div.infoArea{

    width:78%;

    margin-left:auto;

    margin-right:auto;

    margin-bottom:1.5em;

    padding:2em 0 2.5em;

    position:relative;

    /*background:#e4dfd6;*/

}



#p04 div.infoArea img.pho{

    width:20%;

    height:auto;

    position:absolute;

    right:2%;

    bottom:3em;

}



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

    

.titleArea h2{

    width:50%;

    max-width:800px;

}

    

div.column p#pho02{

    width:55%;

    margin:0 auto 1.5em;

    display:block;

}





div.column div.pWrap{

display:block;

    width:100%;

}



}



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

	SMPH

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



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

    

p{

  font-size:17px;

  line-height:32px;

  font-weight: 400;

  text-indent:1em;

  margin-bottom:1.8em;  

}

    

#p04 div.infoArea h5{

    width:98%;

    font-size:18px;

    text-align: center;

    line-height:1.5em;

    padding:0.5em 0 0.3em;

    border-top:solid 1px #cac0ae;

    border-bottom:solid 1px #cac0ae;

}



#p04 div.infoArea h5 span{

    font-size:0.8em;

    display:inline-block;

}



#p04 div.infoArea p{

    width:98%;

    }



#p04 div.infoArea p.cap{

    width:85%;

    font-size:13px;

    text-indent:0;

    margin:0 auto 3em 0;

}

    

#p04 div.infoArea p.cap span > span{

    font-size:0.9em;

    }

    

#p04 div.infoArea p span::after{

    content:'';

    

}



/*---Layout---*/

    

#mainArea{

    width:90%;

    margin:0 auto;

    padding:7em 0 0;

    border-top:none;

    }



.titleArea img#pho01{

    display:block;

    width:100%;

    height:auto;

}

    

.titleArea .phoWrap{

    width:100%;

    height:auto;

    background:none;

}



.contArea{

    background:#FFF;

    margin:0 auto;

    padding:0;

    width:100%;

    position:relative;

}



.titleArea{

    width:100%;

    height:auto;

    background:none;

    margin:0 auto 2em;

}

    

.titleArea p{

    width:90%;

    position:absolute;

    left:6%;

    top:8%;

    display:block;

}

    

.titleArea p img{

    width:100%;

    }

    

.titleArea img#forFv{

    display:none;

}

    

.titleArea .titleWrap{

    width:80%;

    position:relative;

    left:5%;

    margin-top:-1.5em;

    display:block;

}



.titleArea h2{

    width:100%;

    /*position:absolute;

    left:14%;

    right:auto;

    top:auto;

    bottom:-20%;*/

    /*opacity:1;*/

    filter:none;

}



.titleArea h2 img{

    width:100%;

}

    

h3{

    font-size:19px;

    line-height: 1.5em;

    /*position:absolute;

    left:8%;

    bottom:-40%;*/

    text-align: left;

    display:inline-block;

    margin-left:0.2em;

}

    

.textArea{

    padding-bottom:1em;

    margin:2.5em auto 0 auto;

    }

    

div.column{

    width:100%;

    margin:0 auto;

}



div.column p#pho02{

    width:100%;

    margin-left:0;

    margin-right:0;

    margin-top:0;

    text-indent:0;

}



div.column div.pWrap{

display:block;

    width:100%;

}

    

#p04 div.infoArea{

    width:100%;

}



#p04 div.infoArea img.pho{

    width:50%;

    position:relative;

    bottom:auto;

    right:auto;

    margin:0 25%;

    

}

    

a.btn_map {

    width:100%;

    margin: 1.5em 0 0;

    }

    

}