@charset "UTF-8";
/* CSS Document */



/*PC*/
@media print, screen and (min-width: 768px) {


.hed_wrap { margin: 0 auto; }


/* index
--------------------------------------------*/
#tanner { position: relative; padding: 200px 5%; box-sizing: border-box; background: #f3eadf; overflow: hidden; }
#tanner::after {
content: "";
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background-image: url("../images/com/bg_noise2.webp");
background-repeat: repeat;
background-size: 100px 100px;
opacity: .5;
z-index: 0;
overflow: hidden;
}

#tanner .section_wrap .block { position: relative; margin:0 0 100px; z-index: 1; }
#tanner .section_wrap .block .txt { font-size: 1rem; font-weight: 600; line-height: 1.8; }

#tanner .section_wrap .tanner_list { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; z-index: 1; }
#tanner .section_wrap .tanner_list li { width: 23%; position: relative; overflow: hidden; }
#tanner .section_wrap .tanner_list li:nth-child(n+5) { margin-top: 50px; }
#tanner .section_wrap .tanner_list li a { display: block; }
#tanner .section_wrap .tanner_list li a .img { overflow: hidden; margin: 0 0 20px; }
#tanner .section_wrap .tanner_list li a .img img {
width: 100%;
-o-object-fit: cover;
object-fit: cover;
-webkit-transition: all 0.6s ease 0s;
transition: all 0.6s ease 0s
}
#tanner .section_wrap .tanner_list li a:hover .img img {
-webkit-transform:scale(1.2);
transform:scale(1.2)
}

#tanner .section_wrap .tanner_list li a .txt_box { position: relative; }
#tanner .section_wrap .tanner_list li a .txt_box h3 { margin: 0 0 10px; }
#tanner .section_wrap .tanner_list li a .txt_box p { font-size: .8rem; }



/* detail
--------------------------------------------*/

#tanner_detail { margin: 100px 0 0; }

#tanner_detail .tanner_wrap { width: 80%; margin: 0 auto 100px; }
#tanner_detail .tanner_wrap h3 {
font-size: 0.8rem;
line-height: 1;
margin: 0 0 80px;
background: linear-gradient(105deg, #7B5825 33.02%, #8A6B1C 54.88%, #8B5608 81.27%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-align: center;
}
#tanner_detail .tanner_wrap h3 span { display: block; font-size: 2rem; margin-bottom: 20px; }
#tanner_detail .tanner_wrap .img { width: 30%; margin: 0 50px 20px 0; float: left; }
#tanner_detail .tanner_wrap h4 { font-size: 1.4rem; margin-bottom: 30px; }
#tanner_detail .tanner_wrap p { font-weight: 500; line-height: 2; }


#tanner_detail .tanner_box {
position: relative;
padding: 120px 0;
background: linear-gradient(105deg,#7B5825 33.02%,#8A6B1C 54.88%,#8B5608 81.27%);
}
#tanner_detail .tanner_box::after {
content: "";
width: 100%; height: 100%;
position: absolute;
top: 0; right: 0; left: 0; bottom: 0;
background-image: url("../images/com/bg_noise.webp");
background-repeat: repeat;
z-index: 1;
}

#tanner_detail .tanner_box .table_tag {
width: 70%;
margin: 0 auto;
border: 30px solid #FFF;
background: #FFF;
box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35);
position: relative;
z-index: 5;
}
#tanner_detail .tanner_box .table_tag th {
width: 20%;
padding: 15px 10px;
border-bottom: 1px solid rgba(138,107,28,.2);
text-align: left;
color: #7b5825;
}
#tanner_detail .tanner_box .table_tag td { padding: 15px 10px; border-bottom: 1px solid rgba(138,107,28,.2); }
#tanner_detail .tanner_box .table_tag td a { color: #7b5825; border-bottom: 1px solid #7b5825; }

#tanner_detail .tanner_box .table_tag td .gallery {  display: flex; flex-wrap: wrap; }
#tanner_detail .tanner_box .table_tag td figure { width: 24%; margin: 5px 5px 0 0; cursor: pointer; }
#tanner_detail .tanner_box .table_tag td figure figcaption { font-size: 0.7rem; }

/* モーダル全体 */
.modal {
display: none;
position: fixed;
z-index: 1000;
top: 0; left: 0; right: 0;
margin: auto;
width: 100%; height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.8);
}

/* モーダル内の画像 */
.modal-content { margin: auto; display: block; max-width: 600px; position: absolute; top: 30%; right: 0; left: 0; }

/* キャプション */
#caption { margin: auto; display: block; text-align: center; color: #ccc; padding: 10px 0; }

/* 閉じるボタン */
.close {
position: absolute;
top: 70px; right: 35px;
color: #fff;
font-size: 30px;
font-weight: bold;
cursor: pointer;
}
.close:hover,
.close:focus { color: #bbb; }


#tanner_detail .button { margin: 60px auto 0; border: 1px solid #FFF; position: relative; z-index: 2; }
#tanner_detail .button a {
font-size: 12px;
color: #FFF;
text-decoration: none;
line-height: 50px;
transition: all .5s ease;
position: relative;
z-index: 1;
display: block;
width: 100%;
}
#tanner_detail .button .eff {
width: 100%;
height: 50px;
border: 0px solid #FFF;
position: absolute;
transition: all .5s ease;
z-index: 1;
box-sizing: border-box;
}
#tanner_detail .button:hover .eff { border: 70px solid #FFF; }
#tanner_detail .button:hover a { color: #121212; }


}








/*sp*/
@media only screen and (max-width: 767px) {


.hed_wrap { margin: 0 auto; }


/* index
--------------------------------------------*/
#tanner { position: relative; padding: 100px 5%; box-sizing: border-box; background: #f3eadf; overflow: hidden; }
#tanner::after {
content: "";
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background-image: url("../images/com/bg_noise2.webp");
background-repeat: repeat;
background-size: 100px 100px;
opacity: .5;
z-index: 0;
overflow: hidden;
}

#tanner .section_wrap .block { position: relative; margin:0 0 40px; z-index: 1; }
#tanner .section_wrap .block .txt { font-size: 0.8rem; }

#tanner .section_wrap .tanner_list { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; z-index: 1; }
#tanner .section_wrap .tanner_list li { width: 48%; position: relative; overflow: hidden; }
#tanner .section_wrap .tanner_list li:nth-child(n+3) { margin-top: 40px; }
#tanner .section_wrap .tanner_list li a { display: block; }
#tanner .section_wrap .tanner_list li a .img { overflow: hidden; margin: 0 0 10px; }
#tanner .section_wrap .tanner_list li a .img img { width: 100%; -o-object-fit: cover; object-fit: cover; }

#tanner .section_wrap .tanner_list li a .txt_box { position: relative; }
#tanner .section_wrap .tanner_list li a .txt_box h3 { font-size: 0.9rem; margin: 0 0 5px; }
#tanner .section_wrap .tanner_list li a .txt_box p { font-size: .8rem; }



/* detail
--------------------------------------------*/
#tanner_detail { margin: 70px 0 0; }

#tanner_detail .tanner_wrap { width: 90%; margin: 0 auto 50px; }
#tanner_detail .tanner_wrap h3 {
font-size: 0.8rem;
line-height: 1;
margin: 0 0 50px;
background: linear-gradient(105deg, #7B5825 33.02%, #8A6B1C 54.88%, #8B5608 81.27%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-align: center;
}
#tanner_detail .tanner_wrap h3 span { display: block; font-size: 1.4rem; margin-bottom: 10px; }
#tanner_detail .tanner_wrap .img { width: 100%; margin: 0 auto 40px; }
#tanner_detail .tanner_wrap h4 { font-size: 0.9rem; margin-bottom: 20px; }
#tanner_detail .tanner_wrap p { font-weight: 500; line-height: 2; }

#tanner_detail .tanner_box {
position: relative;
padding: 120px 0;
background: linear-gradient(105deg,#7B5825 33.02%,#8A6B1C 54.88%,#8B5608 81.27%);
}
#tanner_detail .tanner_box::after {
content: "";
width: 100%; height: 100%;
position: absolute;
top: 0; right: 0; left: 0; bottom: 0;
background-image: url("../images/com/bg_noise.webp");
background-repeat: repeat;
z-index: 1;
}


#tanner_detail .tanner_box {
position: relative;
padding: 80px 5%;
background: linear-gradient(105deg, #7B5825 33.02%, #8A6B1C 54.88%, #8B5608 81.27%);
}
#tanner_detail .tanner_box::after {
content: "";
position: absolute;
top: 0; right: 0; left: 0; bottom: 0;
width: 100%; height: 100%;
background-image: url("../images/com/bg_noise.webp");
background-repeat: repeat;
z-index: 1;
}

#tanner_detail .tanner_box .table_tag {
width: 100%;
margin: 0 auto;
border: 10px solid #FFFFFF;
background: #FFF;
box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35);
position: relative;
z-index: 5;
}
#tanner_detail .tanner_box .table_tag th { display: block; padding: 10px 5px 0; text-align: left; color: #7b5825; }
#tanner_detail .tanner_box .table_tag th img { width: 40%; }
#tanner_detail .tanner_box .table_tag td { display: block; padding: 5px 5px 10px; border-bottom: 1px solid rgba(138,107,28,.2); font-size: 0.8rem; }
#tanner_detail .tanner_box .table_tag td a { color: #7b5825; border-bottom: 1px solid #7b5825; }

#tanner_detail .tanner_box .table_tag td .gallery { display: flex; flex-wrap: wrap; }
#tanner_detail .tanner_box .table_tag td figure { width: 48%; margin: 5px 5px 0 0; }
#tanner_detail .tanner_box .table_tag td figure figcaption { font-size: 0.7rem; }

/* モーダル全体 */
.modal {
display: none;
position: fixed;
z-index: 1000;
top: 0; left: 0; right: 0;
margin: auto;
width: 100%; height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.8);
}

/* モーダル内の画像 */
.modal-content { margin: auto; display: block; width: 80%; position: absolute; top: 30%; right: 0; left: 0; }

/* キャプション */
#caption { margin: auto; display: block; text-align: center; color: #ccc; padding: 10px 0; }

/* 閉じるボタン */
.close {
position: absolute;
top: 70px; right: 35px;
color: #fff;
font-size: 30px;
font-weight: bold;
cursor: pointer;
}
.close:hover,
.close:focus { color: #bbb; }


#tanner_detail .button { margin: 60px auto 0; border: 1px solid #FFF; position: relative; z-index: 2; }
#tanner_detail .button a {
font-size: 12px;
color: #FFF;
text-decoration: none;
line-height: 50px;
transition: all .5s ease;
position: relative;
z-index: 1;
display: block;
width: 100%;
}
#tanner_detail .button .eff {
width: 100%; height: 50px;
border: 0px solid #FFF;
position: absolute;
transition: all .5s ease;
z-index: 1;
box-sizing: border-box;
}
#tanner_detail .button:hover .eff { border: 70px solid #FFF; }
#tanner_detail .button:hover a { color: #121212; }


}