@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;
}

/* =======================================
	PC
======================================= */

/*---Layout---*/

.pages{
    /*background:#CAC0AE;*/
}

#mainArea{
    /*background:#CAC0AE;*/
	font-family: "Shuei KakuGo Gin M";
}


.contArea{
    background:#FFF;
}

.titleArea{
    width:100%;
    height:110vh;
    position:relative;
    background:url("../img/pho00.jpg") bottom no-repeat;
    background-size:cover;
    margin-bottom:3.5em;
}

.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 img#forFv{
    width:24%;
    position:absolute;
    right:6%;
    top:6%;
    filter: drop-shadow(1px 1px 12px #c8b5a7);
    opacity:0;
    transition:1s;
}

.contArea.active .titleArea img#forFv{
    opacity:0;
}*/

.titleArea .titleWrap{
    width:68%;
    position:absolute;
    left:16%;
    bottom:-30%;
}

.titleArea h2{
    width:40%;
    max-width:800px;
    /*position:absolute;
    left:10.5%;
    top:auto;
    right:auto;
    bottom:-27%;*/
    position:relative;
    transition:2s;
}


.contArea.active .titleArea h2{
    /*opacity:1;*/
}

.titleArea h2 img{
    width:100%;
   /* mix-blend-mode:multiply;*/
}

h3{
    font-family: "Shuei KakuGo Gin B";
    font-weight:bold;
    font-size:20px;
    margin:3em 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:25% 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;
}

@media screen and  (min-width:641px) and ( max-width:1024px) {
    
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;  
}

/*---Layout---*/
    
#mainArea{
    width:90%;
    margin:0 auto;
    padding:7em 0 0;
    border-top:none;
    }

.titleArea img#pho01{
    display:block;
    width:100%;
    height:auto;
}

.contArea{
    background:#FFF;
    margin:0 auto;
    padding:0;
    width:100%;
    position:relative;
}

.titleArea{
    width:100%;
    height:auto;
    background:none;
    margin-bottom:2em;
}
    
.titleArea p{
    width:90%;
    position:absolute;
    left:5%;
    top:12%;
    display:block;
}
    
.titleArea p img{
    width:90%;
    }
    
.titleArea img#forFv{
    display:none;
}
    
.titleArea .titleWrap{
    width:80%;
    position:relative;
    left:10%;
    margin-top:-5em;
}

.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:-1em;
}
    
.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%;
}
    
}