@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;500;700;900&family=Roboto:wght@300;500;700;900&display=swap');
/*------------------------------------------------------

 PC CSS タウンユースLP
 
--------------------------------------------------------*/
:root{
	--08-color: #FFE000;
}

.pc{
	display:block;
 } 
.sp {
	display: none !important;
}

.mv01 {
  opacity: 0;
  transition: opacity .8s, transform .8s;
}
#pickup{
	max-width:950px;
	margin:auto;
	display: block;
}
/*
#hed_set{
	background:url(../../../img/page/pickup/townuse/main_bg.jpg) no-repeat center top #52b66e;
	padding-bottom:100px;
}
h2.main_img{
	background:url(../../../img/page/pickup/townuse/parts_c.png) repeat-y center top;
	text-align:center;
	font-size:24px;
	font-weight:900;
	color:#000;
}
h2.main_img img{
	margin-bottom:20px;
}
*/
.sec{
	color:#000;
	padding:0 0 100px;
}
.sec_ttl{
	background:none;
	flex-direction:column;
	position:absolute;
	top:30px;
	left:-48px;
}
.sec_ttl img{
	width:30%;
	margin:0 0 20px 50px;
	padding:0;
}
.sec_ttl .sec_ttl_txt{
	width: 100%;
	margin: 0;
	padding: 0;
}
.sec_ttl .sec_ttl_txt h3{
	color:#fff;
	font-size:15px;
	font-family: 'Noto Sans JP', sans-serif,'Roboto', sans-serif !important;
	font-weight: 900;
	padding:0;
	margin:0;
	line-height:1.8;
	text-align:left;
	font-feature-settings: "palt" 1;
}
#sec01 .sec_ttl .sec_ttl_txt h3 em{
	background:#0052a1;
	font-style:normal;
	padding:0 50px;
}
.item_frame01 .item_img{
	width: 100%;
}
.item_detail01{
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-bottom:100px;
}
.item_detail01 h4 img,
.item_contents img{
	display: block;
	width: 80%;
	margin: 0 auto 4%;
}
.item_box{
	width: 100%;
    margin: 0 auto;
}
.item_box h4{
	width:100%;
	text-align:center;
	margin:30px auto;
	font-size:22px;
	font-weight:900;
	font-family: 'Noto Sans JP', sans-serif,'Roboto', sans-serif !important;
}
.item{
	width:95%;
	margin:0 auto;
	display: flex;
	flex-direction: column;
}
.item dt img{
	width:100%;
}
.item dd{
	font-size:12px;
	line-height:1.5;
	padding:10px;
}
.staff{
	margin: 4% auto 8%;
}
.staff h3 img{
	width: 140px;
	display: block;
	margin: auto;
}
.comment{
	background-image: url(https://www.kojitusanso.jp/common/img/page/pickup/townuse/vol7_bk.jpg);
	padding: 60px 20px 32px;
	background-position: bottom;
	background-size: cover;
	width: 80%;
	margin: -40px auto;
}
.comment h4{
	text-align: center;
	padding: 0 0 12px;
	font-size: 24px;
}
.comment p{
	font-weight: 600;
	line-height: 1.65em;
	letter-spacing: 0;
	font-size: 16px;
	word-break: break-all;
}
.comment .st{
	color: #EA5405;
	font-weight: 800;
}
ol {
    list-style:  none;
    margin: 40px auto;
    width: 60%;
    padding: 0;
    counter-reset: li_count;
}
ol li {
    font-size: 20px;
    margin: 0 2% 4%;
    font-weight: 300;
}
ol li:before  {
  counter-increment: li_count;
  content: counter(li_count)".";
  color: #000;
  margin-right: 5px;
  font-family: 'Roboto', sans-serif;
  font-weight: 800;
  font-size: 160%;
  font-style: italic;
}
.item_pickup{
	margin: 0 auto 50px;
	display: flex;
	width: 100%;
	justify-content: center;
}
.item_pickup li{
	width:45%;
	text-align: center;
	position:relative;
}
.item_pickup p{
	font-size:24px;
	font-weight:600;
	width: 80%;
	margin:auto;
}
.item_pickup img{
	width: 95%;
	margin:0 auto 2%;
	display:block;
}
.item_pickup dd{
	text-align: center;
	margin: 0% 0 6%;
}
.logo{
	width: 30%;
	margin: 0 0 6%;
}
.logo img{
	max-width: 90px;
	margin-left: 20px;
	width: 100%;
}
.brands{
    font-size: 16px;
    margin: 0 0 2px;
    font-weight: 800;
}
.ttl{
	font-weight: 800;
	font-family: 'Noto Sans Japanese' !important;
	line-height: 1.25em !important;
	font-size: 24px;
	margin: 0 0 24px;
}
.price{
	font-size: 32px;
	font-weight: 800;
	text-align: center;
	letter-spacing: 0.02em;
	font-family: 'Roboto', sans-serif;
}
.red{
	color:#ea0505;
	font-weight:bold;
	font-size:110%;
}
.tax{
	font-size:80%;
	margin-left: 4px;
}
.contents{
	width: 75%;
	margin: 0 auto 50px;
}
.contents li{
	margin: 0 0 48px;
}
.contents a{
	font-size: 28px !important;
}
.contents a:hover{
	color: #fff;
	background: #000!important;
	transition:0.25s;
}
.btn_ {
	margin: 0 0 24px;
}
.btn_ h4{
	text-align:center;
	font-size:20px;
	margin: 0 0 2%;
	font-family: 'Noto Sans JP';
}
.btn_ a{
	width: 90%;
	display:block;
	padding: 3%;
	text-align: center;
	border: 4px solid #222;
	color: #222;
	text-decoration: none;
	border-radius: 50px;
	font-size: 22px;
	font-weight: 800;
	margin: auto;
}
.backnumber a{
	background:#76c282;
	color: #fff;
}
.shop a,.slider_item .shop a{
    background: #000;
    color: #fff;
}
.shop a:hover,.slider_item .shop a:hover{
    background: #fff;
    color: #000;
	transition:0.25s;
}
.online a,.slider_item .online a{
	background: #EA5405;
	color: #fff;
}
.online a:hover,.slider_item .online a:hover{
	background: #000;
	color: #fff;
	transition:0.25s;
}

.coordinate h3{
	font-family: 'Noto Sans JP' !important;
	text-align: center;
	background: #000;
	color: #fff;
	font-size: 28px;
	padding: 4px;
	letter-spacing: -0.08em;
	font-weight: 800;
	margin: 0 0 2%;
}
.bk{
	background: #fff;
	color: #000;
	display:block;
	font-size: 42px;
	font-style: italic;
	font-family: 'Roboto', sans-serif;
	font-weight: 800;
	margin: 0 0 18px;
	text-align: center;
}
.coordinate01 h4{
	height:150px;
	margin:30px auto;
	background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 67.62 68.83"><path d="M67.41,17.94C67.11,8.25,58.65.23,48.94.09S29.31,0,19.5.05A19.26,19.26,0,0,0,.1,19C0,29.53-.11,40.07.21,50.59c.27,9.11,7,16.31,16.06,17.91a11.4,11.4,0,0,1,1.14.33H50.22c1.33-.35,2.68-.65,4-1.06a19.11,19.11,0,0,0,13.33-18C67.6,39.17,67.74,28.54,67.41,17.94Zm-6.59,31c0,6.66-4,11.6-10.35,12.83a14,14,0,0,1-2.68.19c-9.32,0-18.64,0-28,0C13.19,61.92,8.39,58.07,7,51.72a15.64,15.64,0,0,1-.23-3.07c0-4.79,0-9.59,0-14.38s0-9.77,0-14.65A12.42,12.42,0,0,1,17.16,7.06a14.17,14.17,0,0,1,2.68-.2c9.32,0,18.64,0,28,0,6.64,0,11.4,3.86,12.79,10.23a13.13,13.13,0,0,1,.23,2.8Q60.85,34.41,60.82,48.93Z"/><path d="M33.82,16.75A17.48,17.48,0,0,0,16.19,34.51c.07,10.08,7.93,17.38,17.69,17.58a17.67,17.67,0,0,0-.06-35.34Zm0,30a12.3,12.3,0,1,1,0-24.6A12.64,12.64,0,0,1,46.13,34.43,12.56,12.56,0,0,1,33.83,46.7Z"/><path d="M52.13,12.3a3.87,3.87,0,0,0-4,3.86,4,4,0,0,0,4,3.91,3.85,3.85,0,0,0,3.78-3.91A3.75,3.75,0,0,0,52.13,12.3Z"/></svg>') no-repeat center top;
    background-size: 6%;
    text-align: center;
    font-size: 40px;
    font-weight: 900;
    padding-top: 60px;
}
.slider{
   display:-webkit-box;
   display:-ms-flexbox;
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
   overflow-scrolling: touch;
   scroll-snap-type: x mandatory;
   padding: 0 0 2.5em;
   margin: 0 0 2.5em 0;
   scroll-behavior: smooth;
}
.slider_list::-webkit-scrollbar{
  width: 10px;
  height: 10px;
  background:rgba(255,255,255,0.6);
}
.slider_list::-webkit-scrollbar-thumb{
  background: #EA5405;
  border-radius: 5px;
}
.slider_item img{
	width: 100%;
	border-radius: 5px;
	border: 2px solid #000;
}
.slider_list li{
   flex: 0 35%;
   margin: 0px 16px 10px;
}
.slider_list li a{
	text-decoration:none;
}
.slider_list li span{
	font-weight: bolder;
}
@keyframes infinity-scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
.slider_wrap {
  display: flex;
  overflow: hidden;
}
.slider_list--left{
	animation :infinity-scroll-left 34s infinite linear;
}
.off10{
	width:80px!important;
	height:80px;
	background:url(../../../img/page/pickup/townuse/off10.png) no-repeat center;
	background-size:100%;
	z-index: 555;
	text-indent: 100%; 
    white-space: nowrap; 
    overflow: hidden; 
	position:absolute;
	top:5px;
	left:5px;
}
.off30{
	width:80px!important;
	height:80px;
	background:url(../../../img/page/pickup/townuse/off30.png) no-repeat center;
	background-size:100%;
	z-index: 555;
	text-indent: 100%; 
    white-space: nowrap; 
    overflow: hidden; 
	position:absolute;
	top:5px;
	left:5px;
}
.slider_item{position:relative;}
.slider_item a{
	color:#000;
}
.slider_item a:hover{
	text-decoration:none;
}
.slider_item .brand {
	font-size: 60%;
	display: block;
	background:#efefef;
	padding:2px 5px;
	margin: 15px 0 0;
}
.slider_item .price{
	font-size: 20px;
	text-align: center;
	letter-spacing: 0.02em;
	font-family: 'Roboto', sans-serif;
}
.slider_wrap:hover .slider_list--left{
  animation-play-state: paused;
}
.noslider {
	display: flex;
	list-style: none;
	flex-wrap: wrap;
	justify-content: space-around;
	width: 100%;
}
.noslider li{
	width: 30%;
	flex: 0 16%;
}
.noslider02 {
	display: flex;
	list-style: none;
	flex-wrap: wrap;
	justify-content: space-around;
	width: 100%;
}
.noslider02 li{
	width: 30%;
	flex: 0 20%;
}
/*-- GsMALL info --*/
.gs_info01{
	width:100%;
	margin:50px auto;
}
.info_list{
	display: flex;
	flex-direction: row;
	margin:10px;
}
.info_list li{
	width:50%;
	min-height:150px;
	padding:10px;
	margin:10px;
	background:#fff;
	border-radius: 10px;
}
.info_list li a{
	display: flex;
	flex-direction: row;
	font-size:14px;
	background:url(../../../img/page/pickup/townuse/btn_gs01.png) no-repeat right bottom;
	background-size:50%;
}
.info_list li a{
	color:#000;
}
.info_list li a:hover{
	opacity:0.7;
	text-decoration:none;
}
.info_list li img{
	width:40%;
}
.info_list li p{
	width:60%;
	padding:10px 0 10px 20px;
	line-height:1.5;
}
.gsmall{
	background:#007896;
	margin:30px auto;
	padding:20px 0;
	width:900px;
	text-align:center;
}
.gsmall h4{
	font-size: 35px;
	color:#fff;
	font-family: 'Noto Sans JP';
	font-weight: 800;
	letter-spacing: 0;
}
.gsmall h2{
	margin:20px auto;
	width:95%;
}
.gsmall h2 img{
	width:100%;
	text-align:center;
}
.gsmall .head_ttl_txt h3{
	font-size:48px;
	color:#fff;
}
.gsmall .btn04{
	width:60%;
	margin:20px auto;
	text-align:center;
}
.gsmall .btn04 a{
	width:100%;
	padding:30px 0;
	color:#000;
	font-weight:bold;
	font-size:40px;
	display:block;
	background:#fff000;
	border-radius: 50px;
}
.gsmall .btn04 a:hover{
	color:#000;
	background:#fff;
	text-decoration:none;
}

/*----------------------------
vol6
------------------------------*/
.comment .st06{
	color: #1c9ebe;
	font-weight: 800;
}

.online06 a{
	background: #1c9ebe;
	color: #fff;
}
.online06 a:hover{
	background:#000;
}

.vol06 a{
	background:#007896;
	color: #fff;
}


/*----------------------------
vol7
------------------------------*/
.comment .st07{
	color: #76c330;
	font-weight: 800;
}

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

.vol07 a{
	background:#B4DA19;
	color: #000;
}



/*----------------------------
vol8
------------------------------*/
.comment .st08{
	color: #ffb300;
	font-weight: 800;
}

.online08 a{
	background: var(--08-color);
	color: #000;
}
.online08 a:hover{
	background:#000;
	color:#fff;
}

.vol08 a{
	background:var(--08-color);
	color: #000;
}