@charset "utf-8";@charset "utf-8";
.image {
	margin-right: calc(50% - 50vw);
	margin-left: calc(50% - 50vw);
}

.image img {
	display: block;
	width: 100%;
	height: auto;
}


#Area {
	font-family: 'Shippori Mincho B1', serif;
	text-align: center;
	color:#333333;
	width: 100%;
	margin: 0 auto;
	display: block;
	overflow: hidden;
	max-width:  1600px;
}


.mwbtn {
	font-size: 22px;
	margin-top: 7%;
	align-items: center;
    gap: 0 9px;
}


.mwbtn {
　text-decoration: none;
}

.mwbtn :hover{
　text-decoration: underline;
}


.backcolor {
  background-image:url("/photo/page/20241217/back14.jpg");
  background-repeat: repeat;        
  background-position: center;  
  background-size: 1800px;
  width:100%;  
}


/*=改行====*/
@media screen and (min-width: 750px){   
  .pc { display:inline; }
  .sp { display:none; }
}


.spece_text {
	margin: 5px auto;
}


.text-mini {
    font-size: 13px;
    margin-top: 3%;
}


/*===================================
TOPテキスト
===================================*/
.top-text {
    width: 70%;
    max-width: 1000px;
    text-align: center;
    margin: 5% auto 8%;
    font-size: 15px;
}

.top-text a {
	text-decoration:underline;
}

/*===================================
TOPテキスト
===================================*/

/*=見出し====*/
.index {
	width: 45%;
	max-width: 1000px;
	text-align: center;
	margin: 5% auto;
	font-size: 25px;
}

/*===================================
メインエリア-1
===================================*/

/*=数字====*/

.details-number_1,.details-number_2,.details-number_3,.details-number_4,.details-number_5 {
	text-align: left;
	margin: 0 auto -3% 2%;
}

.details-number_2,.details-number_4 {
	text-align: left;
	margin: 0 auto -14% 2%;
}

.details-number_1 img,.details-number_2 img,.details-number_3 img,.details-number_4 img,.details-number_5 img  {
	width: 24%;
}


/*=写真====*/
.area_photo_1,.area_photo_3,.area_photo_5 {  display: grid;
  grid-template-columns: 63% 35%;
  grid-template-rows: 100%;
  gap: 0% 2%;
  grid-auto-flow: row;
  grid-template-areas:
    "photo-1 photo-2";
	max-width: 1200px;
	width: 90%;
	text-align: center;
	margin: 0 auto;
	}
	
.photo-1 { grid-area: photo-1; }

.photo-2 {
	grid-area: photo-2; 
    margin-top: 40%;
}


.text_title {
    position: relative;
	/*width: 500px;*/
	margin: 0 auto;
}

.sign_01{
	position: absolute;
	left: 25%;
    top: -18%;
	font-size: 25px;
	font-weight: 700;
}

.sign_02{
	position: absolute;
	left: 73%;
    top: 82%;
	font-size: 25px;
	font-weight: 700;
}


.area-text {
	width: 35%;
	max-width: 1000px;
	text-align: left;
	margin: 9% auto 6%;
	font-size: 15px;
}

/*=詳細====*/
.area_details {  display: grid;
  grid-template-columns: 23.5% 23.5% 23.5% 23.5%;
  grid-template-rows: 100%;
  gap: 0% 2%;
  grid-auto-flow: row;
  grid-template-areas:
    "details-1 details-2 details-3 details-4";
	width: 70%;
	text-align: center;
	margin: 0 auto;
}

.details-1 { grid-area: details-1; }
.details-2 { grid-area: details-2; }
.details-3 { grid-area: details-3; }
.details-4 { grid-area: details-4; }


.details-text {
	margin-top: 7%;
}


/*=buyボタン====*/
.buy_btn,
a.buy_btn {
  color: #333333;
  background-color: #c6c7c8;
  padding: 0.5rem 0rem;
  border-radius: 100vh;
  width: 35%;
  text-align: center;
  margin: 4% auto;
  border: 1px solid #6f6f6f;
 vertical-align: middle;
}

.buy_btn:hover,
a.buy_btn:hover {
  color: #fff;
  background: #6f6f6f;
}



/*===================================
メインエリア-2 　反転
===================================*/

/*=写真====*/
.area_photo_2,.area_photo_4 {  display: grid;
  grid-template-columns: 35% 63%;
  grid-template-rows: 100%;
  gap: 0% 2%;
  grid-auto-flow: row;
  grid-template-areas:
    "photo-3 photo-4";
	max-width: 1200px;
	width: 90%;
	text-align: center;
	margin: 0 auto;
	}
	
.photo-3 { 
	grid-area: photo-3;
    margin-top: 40%;
}

.photo-4 {
	grid-area: photo-4; 
}

.area-text {
	width: 35%;
	max-width: 1000px;
	text-align: left;
	margin: 5% auto;
	font-size: 15px;
}


/*===================================
一覧ボタン
===================================*/

.area_btn {
    display: grid;
    grid-template-columns: 48.5% 48.5%;
    grid-template-rows: 100%;
    gap: 2% 3%;
    grid-auto-flow: row;
    grid-template-areas: "btn-1 btn-2";
    width: 65%;
    text-align: center;
    margin: 0 auto;
	position: relative;
	margin-bottom: 20%;
}

.btn-1 { grid-area: btn-1; }

.btn-2 { grid-area: btn-2; }

.btn-1-text,.btn-2-text {
	color: #ffffff;
	font-weight: 600;
}

.btn-1-text {
    position: absolute;
    top: 40%;
    left: 16%;
    font-size: 18px;
}


.btn-2-text {
    position: absolute;
    top: 40%;
    left: 64%;
    font-size: 18px;
}

/*===================================
区切り線
===================================*/

.border_1 {
	border-top: 1px solid #d1cbc2;
	width: 80%;
	margin: 10% auto 11% auto;
}




/*===================================
ボタン系
===================================*/


/*黒細ライン＆ホバーグレー*/
a.btn_01 {
display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    border: 1px solid #6f6f6f;
    box-sizing: border-box;
    width: 450px;
    height: 55px;
    padding: 0 6% 0 6%;
    color: #333333;
    font-size: 16px;
    text-align: left;
    text-decoration: none;
    position: relative;
    transition-duration: 0.2s;
     margin: 6% auto 4% auto;
}

a.btn_01:hover {
  background: #6f6f6f;
  color: #fff;
}

a.btn_01:before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7px 0 7px 8px;
  border-color: transparent transparent transparent #111;
  position: absolute;
  top: 50%;
  left: 6%;
  margin-top: -7px;
}

a.btn_01:hover:before {
  border-color: transparent transparent transparent #fff;
}




/*黒細ライン＆ホバーも黒*/
a.btn_02 {
display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    border: 1px solid #000;
    box-sizing: border-box;
    width: 400px;
    height: 55px;
    padding: 0 6% 0 6%;
    color: #000;
    font-size: 16px;
    text-align: left;
    text-decoration: none;
    position: relative;
    transition-duration: 0.2s;
        margin: 2% auto 4% auto;
}

a.btn_02:hover {
  background: #000;
  color: #fff;
}

a.btn_02:before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7px 0 7px 8px;
  border-color: transparent transparent transparent #000;
  position: absolute;
  top: 50%;
  left: 6%;
  margin-top: -7px;
}

a.btn_02:hover:before {
  border-color: transparent transparent transparent #fff;
}




/*================================
その他の記事の記述
=================================*/


.new {
	max-width: 1000px;
	text-align: center;
	margin: 0% auto;
}

.other {
    display: grid;
    grid-template-columns: 23% 23% 23% 23%;
    /* grid-template-rows: 200px; */
    gap: 2% 2.7%;
    grid-auto-flow: row;
    grid-template-areas: "other-1 other-2 other-3 other-4";
    text-align: center;
    margin: 0 auto;
    max-width: 85%;
}

.other-1 { grid-area: other-1; }
.other-2 { grid-area: other-2; }
.other-3 { grid-area: other-3; }
.other-4 { grid-area: other-4; }


.other_title {
    text-align: left;
    max-width: 85%;
    margin: 10% auto 1%;
    font-size: 20px;
}

.other_details {
font-size: 15px;
text-align-last: left;	
}



/*===============================================
tablet
===============================================*/
@media (max-width: 768px) {
	#Area .imageArea ul.row-fluid {
    width: 90%;
    text-align: center;
    margin: 0 auto;
  }	
	
/*===================================
TOPテキスト
===================================*/
.top-text {
	width: 70%;
	max-width: 800px;
	text-align: center;
	margin: 5% auto 8%;
	font-size: 14px;
}	
	
/*===================================
メインエリア-1
===================================*/

/*=数字====*/

.area-text {
    width: 45%;
    max-width: 800px;
    text-align: left;
    margin: 5% auto;
    font-size: 15px;
}	
	
.area_details {
    display: grid;
    grid-template-columns: 23.5% 23.5% 23.5% 23.5%;
    grid-template-rows: 100%;
    gap: 0% 2%;
    grid-auto-flow: row;
    grid-template-areas: "details-1 details-2 details-3 details-4";
    width: 75%;
    text-align: center;
    margin: 0 auto;
}	
	
.buy_btn, a.buy_btn {
    color: #333333;
    background-color: #c6c7c8;
    padding: 0.2rem 0rem;
    border-radius: 100vh;
    width: 45%;
    text-align: center;
    margin: 4% auto;
    border: 1px solid #6f6f6f;
    vertical-align: middle;
    font-size: 13px;
}	
	
	
/*=カッコ====*/	
	
.sign_01{
	position: absolute;
	left: 19%;
    top: -18%;
	font-size: 22px;
	font-weight: 700;
}

.sign_02{
	position: absolute;
	left: 77%;
    top: 82%;
	font-size: 22px;
	font-weight: 700;
}	
	
	
/*===================================
一覧ボタン
===================================*/

.btn-1-text {
    position: absolute;
    top: 42%;
    left: 14%;
    font-size: 15px;
}

.btn-2-text {
    position: absolute;
    top: 42%;
    left: 60%;
    font-size: 15px;
}
	
/*===================================
ボタン系
===================================*/
a.btn_01 {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    border: 1px solid #6f6f6f;
    box-sizing: border-box;
    width: 330px;
    height: 45px;
    padding: 0 6% 0 6%;
    color: #333333;
    font-size: 14px;
    text-align: left;
    text-decoration: none;
    position: relative;
    transition-duration: 0.2s;
    margin: 6% auto 3% auto;	
	}
	

	
/*================================
その他の記事の記述
=================================*/

.other {
    display: grid;
    grid-template-columns: 23% 23% 23% 23%;
    gap: 2% 2.7%;
    grid-auto-flow: row;
    grid-template-areas: "other-1 other-2 other-3 other-4";
    text-align: center;
    margin: 0 auto;
    max-width: 85%;
}

.other-1 { grid-area: other-1; }
.other-2 { grid-area: other-2; }
.other-3 { grid-area: other-3; }
.other-4 { grid-area: other-4; }

.other_title {
	 text-align: left;
    max-width: 85%;
	margin: 1% auto;
	font-size: 14px;
}

	
}



/*===============================================
SMP
===============================================*/
@media (max-width: 500px) {
/*@media (max-width: 426px)*/
#Area .imageArea ul.row-fluid {
    width: 100%;
	max-width: 450px;
    text-align: center;
    margin: 0 auto;
	}
	
.text-mini {
	font-size: 12px;
	width: 70%;
	margin: 8% auto 0;
    }
	
	
.mwbtn {
    font-size: 20px;
    margin: 14% auto 9%;
}	
	
.top-text {
    width: 80%;
    text-align: center;
    font-size: 14px;
	margin: 1% auto 11%;
}	
	
	
.index {
    width: 65%;
    text-align: center;
    margin: 10% auto 5%;
    font-size: 20px;
}	
	
	
.area_photo_1,.area_photo_2,.area_photo_3,.area_photo_4, .area_photo_5{
    display: block;
    width: 80%;
    text-align: center;
    margin: 20% auto 0;
}		
			
	
/*=数字====*/

.details-number_1,.details-number_2,.details-number_3,.details-number_4,.details-number_5 {
	text-align: left;
	margin: 0 auto -3% 2%;
}

.details-number_2,.details-number_4 {
	text-align: left;
	margin: 0 auto -15% 2%;
}

.details-number_1 img,.details-number_2 img,.details-number_3 img,.details-number_4 img,.details-number_5 img  {
	width: 40%;
}	
	
	
.area_photo_1, .area_photo_2, .area_photo_3, .area_photo_4, .area_photo_5 {
        display: block;
        width: 80%;
        text-align: center;
        margin: 0 auto;
    }	
	
.photo-2,.photo-4 {
    margin-top: 15%;
}	
	
.photo-3 {
    margin-top: 15%;
	}	
		
		
.text_title {
    position: relative;
	/*width: 260px;*/
	margin: 10% auto 8%;
}
	
	
/*=カッコ====*/	
	
.sign_01 {
    position: absolute;
    left: 10%;
    top: -15%;
    font-size: 25px;
    font-weight: 700;
}	
	
.sign_02 {
    position: absolute;
    left: 81%;
    top: 95%;
    font-size: 25px;
    font-weight: 700;
}	
		
	
.area-text {
    width: 60%;
    text-align: left;
    margin: 12% auto;
    font-size: 14px;
}	
	
	
.area_details {
        display: grid;
        grid-template-columns: 49% 49%;
        grid-template-rows: 50% 50%;
        gap: 2% 2%;
        grid-auto-flow: row;
        grid-template-areas:
        "details-1 details-2"
        "details-3 details-4";
	width: 75%;
    }

.details-1 { grid-area: details-1; }

.details-2 { grid-area: details-2; }

.details-3 { grid-area: details-3; }

.details-4 { grid-area: details-4; }
	
	
	
/*===================================
一覧ボタン
===================================*/
	
.area_btn {
    display: block;
    width: 70%;
    text-align: center;
    margin: 20% auto 35%;
    position: relative;
}	
	
	
.btn-1 {
    margin-bottom: 8%; 		
	}
	
	
.btn-1-text {
	position: absolute;
	top: 20%;
	left: 28%;
	font-size: 14px;
}	
	
.btn-2-text {
	position: absolute;
	top: 72%;
	left: 19%;
	font-size: 14px;
}	
	
	
	
/*===================================
区切り線
===================================*/
	
.border_1 {
	border-top: 1px solid #d1cbc2;
	width: 80%;
	margin: 20% auto 18% auto;
}	
		

	
/*===================================
ボタン系
===================================*/	
	
a.btn_01 {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    border: 1px solid #6f6f6f;
    box-sizing: border-box;
    width: 70%;
    height: 50px;
    padding: 0 6% 0 6%;
    color: #333333;
    font-size: 15px;
    text-align: left;
    text-decoration: none;
    position: relative;
    transition-duration: 0.2s;
    margin: 14% auto 3% auto;	
	}

	
/*================================
その他の記事の記述
=================================*/
	
.other {
        display: grid;
        grid-template-columns: 49% 49%;
        grid-template-rows: 50% 50%;
        gap: 3% 3%;
        grid-auto-flow: row;
        grid-template-areas:
        "other-1 other-2"
        "other-3 other-4";
        text-align: center;
        margin: 0 auto;
        max-width: 86%;
}

.other-1 { grid-area: other-1; }
.other-2 { grid-area: other-2; }
.other-3 { grid-area: other-3; }
.other-4 { grid-area: other-4; }
	
.other_title {
	 text-align: left;
    max-width: 85%;
	margin: 1% auto;
	font-size: 13px;
}
	
.other_details {
font-size: 12px;
text-align: left;	
}
	
	
	
	
}