/*----------------------------------------------------
　
------------------------------------------------------*/

.title{
  clear: both;
  position: relative;
  margin: 0 0 38px;
  padding: 0 0 0.5em;
  font-size:23px;
  font-weight:bold;
  line-height: 1.2;
  text-align: left;
  border-bottom: 2px solid #fff;
}

.title:before{
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 90px;
  border-bottom: 2px solid #bbaf5b;
}
.title:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 45px;
  height: inherit;
  border-bottom: 2px solid #73588b;
}
.title .eng{
display: block;
color: #bbaf5b;
font-size:12px;
font-weight: normal;
font-family: chaparral-pro, serif;
}



@media screen and (max-width: 1280px) {
.title{
margin-bottom: 21px;
font-size: 16px;
}
.title:before{
  width: 64px;
}
.title:after {
  width: 32px;
}
.title .eng{
font-size:6px;
}
}



/*----------------------------------------------------
　#introduction
------------------------------------------------------*/
#introduction{
clear: both;
overflow: hidden;
margin: 0 0 120px;
padding: 115px 0 0 6.3%;
text-align: left;

}

#introduction .cont{
float:left;
width: 41.8%;
}
#introduction h3{
margin: 0 0 0.5em;
font-size:43px;
font-family: a-otf-futo-min-a101-pr6n, serif;
line-height: 1.4;
}
#introduction .text{
margin: 0 0 1em;
font-size:25px;
line-height: 1.9;
font-family: a-otf-futo-min-a101-pr6n, serif;
}

#introduction .link a{
position: relative;
display: block;
max-width: 305px;
padding: 0.5em 30px;
color: #bbaf5b;
font-size: 23px;
text-decoration: none;
border: 1px solid #bbaf5b;
}
#introduction .link a::before{
font-family: "Font Awesome 5 Free";
content: '\f061';
font-weight: 600;
position: absolute;
right: 30px;
top: 1.5em;
font-size: 60%;
}
#introduction .link a:hover{
color: #fff;
background:#bbaf5b; 
}



.swiper-container{
float:right;
width: 48%;
}
.swiper-slide img{
width: 100%;
}

#introduction .swiper-button-prev,
#introduction .swiper-button-next{
width: 27px;
height: 27px;
background:rgba(0,0,0,0.5);
}
#introduction .swiper-button-prev:after{
font-family: "Font Awesome 5 Free";
content: '\f061';
color: #fff;
font-weight: 600;
font-size: 12px;
transform: rotate( -180deg );
}
#introduction .swiper-button-next:after{
font-family: "Font Awesome 5 Free";
content: '\f061';
color: #fff;
font-size: 12px;
font-weight: 600;
}


@media screen and (min-width: 1920px) {
#introduction{
padding-left: 0;
}
#introduction .cont{
float:none;
width:800px;
position: absolute;
left: 50%;
margin-left: -840px;
}

#introduction h3 span{
display: block;
}
}
@media screen and (max-width: 1680px) {
#introduction h3{
font-size:40px;
}

}
@media screen and (max-width: 1280px) {
#introduction {
padding:0;
margin: 20px 0 50px;
}
#introduction .cont{
float:none;
width: 90%;
margin:0 auto;
}

#introduction h3{
font-size:25px;
}
#introduction h3 span{
display: inline;
}
#introduction .text{
font-size:14px;
font-family: a-otf-futo-min-a101-pr6n, serif;
}
#introduction .link a{
font-size:16px;
}
.swiper-container{
float:none;
width: 100%;
margin: 0 0 1em;
}
}
@media screen and (max-width: 480px) {
#introduction h3{
font-size:21px;
}
}
/*----------------------------------------------------
　#jumokusou
------------------------------------------------------*/
#jumokusou{
clear: both;
overflow: hidden;
margin: 0 auto 120px;
text-align: center;
background: url("img/jumokusou_body.jpg") no-repeat center top;

}
#jumokusou img{
width: 100%;
max-width: 1680px;

}
@media screen and (max-width: 1680px) {
#jumokusou{
background:none;
}
}
@media screen and (max-width: 1280px) {
#jumokusou{
margin: 0 auto 50px;
}
}

/*----------------------------------------------------
　#CM
------------------------------------------------------*/
#cm{
clear: both;
overflow: hidden;
width: 90%;
max-width: 1680px;
margin: 0 auto 120px;
text-align: center;
}
#cm img{
width: 100%;
max-width: 1680px;

}
@media screen and (max-width: 1680px) {
#cm{
background:none;
}
}
@media screen and (max-width: 1280px) {
#cm{
margin: 0 auto 50px;
}
}



/*----------------------------------------------------
　#tombstone
------------------------------------------------------*/
#tombstone{
width: 90%;
max-width: 1680px;
margin: 0 auto 150px;
position: relative;
}
#tombstone .list-cont{
overflow: hidden;
background: url("img/back_line1.gif") repeat-y center top;
}
#tombstone .stone-detail{
width: 48%;
max-width: 800px;
overflow: hidden;
}
#tombstone .left{
float: left;
}
#tombstone .right{
float: right;
}
#tombstone .stone-detail h3{
margin: 0 0 1em;
padding: 0.5em;
color: #563265;
font-weight: normal;
text-align: center;
border: 1px solid #563265;
}
#tombstone .stone-detail .list{
overflow: hidden;
background: url("img/back_line2.gif") repeat-y center top;
}
#tombstone .stone-detail.left .list{
border-left: 1px dotted #bebebe;
}
#tombstone .stone-detail.right .list{
border-right: 1px dotted #bebebe;

}

#tombstone .stone-detail .list li{
float: left;
width: 50%;
margin: 0 0 1.5em;
text-align: center;
}
#tombstone .stone-detail .list li img{
max-width: 290px;
}
#tombstone .list h4{
font-size: 30px;
font-family: a-otf-futo-min-a101-pr6n, serif;
}
#tombstone .list .price{
font-size: 20px;
font-family: a-otf-ryumin-pr6n, serif;
}
#tombstone .text{
clear: both;
text-align: left;
}

/**/

#tombstone .link.pc{
position: absolute;
top: 0;
right:0;
}
#tombstone .link.pc li{
float: left;
width: 385px;
}
#tombstone .link.pc li:nth-child(1){
margin-right: 30px;
}

#tombstone .link li:nth-child(1) a{
position: relative;
display: block;
padding: 0.5em 30px;
color: #fff;
font-size: 23px;
text-decoration: none;
background: #bbaf5b;
border: 1px solid #bbaf5b;
}
#tombstone .link li:nth-child(1) a::before{
font-family: "Font Awesome 5 Free";
content: '\f061';
font-weight: 600;
position: absolute;
right: 30px;
top: 1.5em;
font-size: 60%;

}
#tombstone .link li:nth-child(1) a:hover{
color: #bbaf5b; 
background:#fff; 
}
#tombstone .link li:nth-child(2) a{
position: relative;
display: block;
padding: 0.5em 30px;
color: #563265;
font-size: 23px;
text-decoration: none;
border: 1px solid #563265;
}
#tombstone .link li:nth-child(2) a::before{
font-family: "Font Awesome 5 Free";
content: '\f061';
font-weight: 600;
position: absolute;
right: 30px;
top: 1.5em;
font-size: 60%;
}
#tombstone .link li:nth-child(2) a:hover{
color: #fff;
background:#563265; 
}






@media screen and (max-width: 1280px) {
#tombstone{
width: 90%;
margin:0 auto 50px;
}
#tombstone .list-cont{
background: none;
}
#tombstone .stone-detail{
clear: both;
float: none;
width: 100%;
max-width: 100%;
margin: 0 0 1em;
}
#tombstone .stone-detail h3{
padding: 0.5em;
color: #563265;
text-align: center;
border: 1px solid #563265;
}
#tombstone .stone-detail .list{
overflow: hidden;
border-left: 1px dotted #bebebe;
border-right: 1px dotted #bebebe;
}

#tombstone .list h4{
font-size: 20px;
}
#tombstone .list .price{
font-size: 14px;
}
#tombstone .link.sp{
display: block;
}
#tombstone .link.sp{
float: none;
margin: 0 0 1em;
}
#tombstone .link.sp li:nth-child(1){
margin-bottom: 1em;
}
#tombstone .stone-detail .list li img{
width: 98%;
}
#tombstone .link li:nth-child(1) a,
#tombstone .link li:nth-child(2) a{
font-size: 16px;
}
#tombstone .text{
margin: 0 0 1em;
}
}


@media screen and (max-width: 480px) {
#tombstone .stone-detail .list li img{
max-width: 200px;
}
}


/*----------------------------------------------------
　
------------------------------------------------------*/
.info-cont{
clear: both;
overflow: hidden;
width: 90%;
max-width: 1680px;
margin: 0 auto;
}
@media screen and (max-width: 1280px) {
.info-cont{
width: 100%;
}
}
/*----------------------------------------------------
　#information
------------------------------------------------------*/
#information{
float: left;
width: 48%;
max-width: 800px;
overflow: hidden;
position: relative;
}

#information .link{
position: absolute;
top: 0;
right: 0;
width: 365px;
text-align: left;
}

#information .link a{
position: relative;
display: block;
padding: 0.5em 30px;
color: #563265;
font-size: 23px;
text-decoration: none;
border: 1px solid #563265;
}
#information .link a::before{
font-family: "Font Awesome 5 Free";
content: '\f061';
font-weight: 600;
position: absolute;
right: 30px;
top: 1.5em;
font-size: 60%;
}
#information .linka:hover{
color: #fff;
background:#563265; 
}


#information .cont{
text-align: center;
border: 1px solid #bebebe;
}


@media screen and (max-width: 1280px) {
#information{
clear: both;
float: none;
width: 90%;
max-width: 100%;
margin: 0 auto 50px;
}
#information .link{
clear: both;
position: relative;
width: 100%;
}
#information .link a{
font-size: 16px;
}
#information .cont iframe{
width: 100%;
max-width: 500px;
height: 300px;
margin: 0 auto;
}
}







/*----------------------------------------------------
　#access
------------------------------------------------------*/
#access{
float: right;
width: 48%;
max-width: 800px;
margin: 0 0 100px;
}
#access .cont{
border: 1px solid #bebebe;
}
#access iframe{
margin:0 0 1em;
}
#access ul{
overflow: hidden;
background: url("img/back_line1.gif") repeat-y center top;
}
#access ul li{
float: left;
width: 48%;
padding: 1em 1%;
font-family: a-otf-futo-min-a101-pr6n, serif;
text-align: center;
}
#access ul li h3{
font-size: 20px;
}
#access ul li h3 img{
display: block;
margin: 0 auto;
height: 24px;
}

#access ul li .text{
font-size: 17px;
}

@media screen and (max-width: 1280px) {
#access{
clear: both;
float: none;
width: 90%;
max-width: 100%;
margin: 0 auto 50px;
}
#access .cont{
border: none;
}
#access iframe{
height: 210px;
}
#access ul{
border: none;
background: none;
}
#access ul li{
float: none;
clear: both;
width: 100%;
text-align: left;
border: none;
}
#access ul li:nth-child(2){
border-top: 1px solid #bebebe;
}
#access ul li h3{
font-size: 14px;
}
#access ul li h3 img{
display: inline;
height: 17px;
margin: 0 0.5em 0 0;
}
#access ul li .text{
font-size: 12px;
}
}

/*----------------------------------------------------
　#ankokuji
------------------------------------------------------*/
#ankokuji{
width: 90%;
max-width: 1680px;
margin: 0 auto 150px;
position: relative;
overflow: hidden;
}
#ankokuji .img{
float: left;
width: 48%;
max-width: 800px;
}

#ankokuji .cont{
float: right;
width: 48%;
max-width: 800px;
text-align: left;
}

#ankokuji .cont .text{
margin: 0 0 1em;
font-size: 18px;
font-family: a-otf-futo-min-a101-pr6n, serif;
font-weight: 400;
font-style: normal;
}

@media screen and (max-width: 1680px) {
#ankokuji{
clear: both;
float: none;
max-width: 100%;
margin: 0 auto 150px;
}
}

@media screen and (max-width: 1280px) {
#ankokuji{
clear: both;
float: none;
width: 90%;
max-width: 100%;
margin: 0 auto 50px;
}
#ankokuji .img{
margin-bottom: 1em;
float: none;
width: 100%;
max-width: 100%;
}
#ankokuji .cont{
float: none;
width: 100%;
max-width: 100%;
}
#ankokuji .cont .text{
font-size: 14px;
}
}


/*----------*/
#ankokuji .cont .link{
width: 365px;
text-align: left;
}

#ankokuji .cont .link a{
position: relative;
display: block;
padding: 0.5em 30px;
color: #563265;
font-size: 23px;
text-decoration: none;
border: 1px solid #563265;
}
#ankokuji .cont .link a::before{
font-family: "Font Awesome 5 Free";
content: '\f061';
font-weight: 600;
position: absolute;
right: 30px;
top: 1.5em;
font-size: 60%;
}
#ankokuji .cont .link a:hover{
color: #fff;
background:#563265; 
}


@media screen and (max-width: 1280px) {
#ankokuji .cont .link{
clear: both;
position: relative;
width: 100%;
}
#ankokuji .cont .link a{
font-size: 16px;
}
}