@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 #7ec3e1;
    color: #12729c;
    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;*/
	margin: 0 auto;
    transition: 1s;
}
a.btn_map span{
    font-size:0.8em;
}

a.btn_map:hover{
    color:#FFF;
    background:#7ec3e1;
    border: solid 1px #7ec3e1;
    text-decoration: none;
}
a.btn_map_sub {
color: #005a81;
}
a.btn_map_sub:hover{
    color:#FFF;
    background:#629ab2;
    border: solid 1px #629ab2;
    text-decoration: none;
}

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

/*---Layout---*/

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

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


.contArea{
    background:#FFF;
}

.titleArea{
    width:96%;
    margin:3vh auto 0;
}

.titleArea .phoWrap{
    width:100%;
    height:98vh;
    background:url("../img/pho01_3.jpg") center top no-repeat;
    background-size:cover;
	position:relative;
}

.titleArea img#pho01{
    display:none;
}

.titleArea p{
	width:40%;
    position:absolute;
    left:10.5%;
    top:22%;
    display:block;
    animation-duration: 2s;
}

.titleArea p img{
    width:100%;
}


.textArea{
    width:88%;
    position:relative;
    padding-bottom:3em;
    margin:0 auto;
    /*margin-top:27em;*/
}

.textArea .titleWrap{
    width:75%;
	margin: -8% 0 8% 9%;
}

.textArea 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 .textArea h2{
    /*opacity:1;*/
}

.textArea h2 img{
    width:100%;
    image-rendering: auto;
}

h3{
    font-family: "Shuei KakuGo Gin B";
    font-weight:bold;
    font-size:20px;
    margin:3em 0 2em 0;
	line-height: 1.8em;
    /*position:absolute;
    left:10.5%;
    bottom:-37%;
    opacity:0;
    transition:2s;*/
}

.contArea.active h3{
    /*opacity:1;*/
}

div.column{
    width:78%;
	max-width: 950px;
    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 p#pho02{
    width:45%;
    margin-left:7%;
    margin-right:0;
    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:47%;
    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) {
    
div.column p#pho02{
    width:100%;
    max-width:800px;
    margin:0 auto 1.5em;
    display:block;
}


div.column div.pWrap{
display:block;
    width:100%;
}
.textArea{
    margin:0 auto;
    /*margin-top:27em;*/
}
}


/* =======================================
	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;
	max-height: inherit;
    background:none;
}
.contArea{
    background:#FFF;
    margin:0 auto;
    padding:0;
    width:100%;
    position:relative;
}

.titleArea{
    width:100%;
    height:auto !important;
    background:none;
    margin:0 auto;
}
    
.titleArea p{
    width: 60%;
    position: absolute;
    left: 5%;
    top: 2%;
    display: block;
}
    
.titleArea p img{
    width:100%;
    }
    
.titleArea img#forFv{
    display:none;
}
    
    
.textArea{
    padding-bottom:1em;
    margin:0 auto;
    }
	
.textArea .titleWrap{
    width:90%;
    position:relative;
    left: 0;
	bottom: 40px;
    display:block;
	margin: 0 0 8% 0;
}

.textArea h2{
    width:100%;
    /*position:absolute;
    left:14%;
    right:auto;
    top:auto;
    bottom:-20%;*/
    /*opacity:1;*/
    filter:none;
}

.textArea h2 img{
    width:100%;
}
    
h3{
    font-size:18px;
    line-height: 1.8em;
    /*position:absolute;
    left:8%;
    bottom:-40%;*/
    text-align: left;
    display:inline-block;
	letter-spacing: -0.8px;
}
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;
    }
    
}