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

body{
  font-family:'Quicksand','メイリオ',Meiryo,"游ゴシック体","Yu Gothic",YuGothic,"ヒラギノ角ゴシック Pro","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
	-webkit-text-size-adjust:none;

  color:#4d4d4d;
  max-width: 1100px;
  width:100%;
  margin:0 auto;
  box-sizing: border-box;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
*, *:before, *:after {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

p,li,dt,dl {
	line-height:1.6;
}
p {
	margin:0 0 1em 0;
}
li {
	list-style-type:none;
}
img{
  width:100%;
}
h1{font-size:1rem;}/*16px*/
/*h1{font-size:2.0625rem;}/*33px*/
h2{font-size:1.875rem;}/*30px*/
h3{font-size:1.375rem;}/*22px*/
h4{font-size:1.25rem;}/*20px*/

.mb0{margin-bottom: 0;}
.mb05{margin-bottom: 0.5rem;}
.mb1{margin-bottom: 1rem;}
.mb2{margin-bottom: 2rem;}
.mb3{margin-bottom: 3rem;}
.mt0{margin-top: 0;}
.mt05{margin-top: 0.5rem;}
.mt1{margin-top: 1rem;}
.mt2{margin-top: 2rem;}
.mt3{margin-top: 3rem;}
.ml0{margin-left: 0!important;}
.ml1{margin-left: 1rem;}
.mr0{margin-right: 0!important;}
.mr1{margin-right: 1rem;}

/* font  */
.t_bold    {font-weight:bold;}
.t_normal  {font-weight:normal;}
.t_center  {text-align:center;}
.t_right   {text-align:right;}
.t_left    {text-align:left;}
.t_indent  {padding-left: 1em;
            text-indent: -1em;
            text-align: justify;}
.t_indent14  {padding-left: 1.4em;
            text-indent: -1.4em;}
.t_white   {color:#fff;}
.t_red     {color:#FF0004;}
.t_green   {color:#58805d;}/*事業所で使用*/
.t_yellow  {color:#826E48;}/*小樽市で使用*/
.t_space   {letter-spacing: 0.5em;}/*見出し用文字間*/
.t_origin{font-size: 1rem;}/*16px*/
.t_margin_b_s{margin-bottom: 0.5em;}
.wid100{width: 100%!important;}
.wid80{width: 80%!important;}
/* link  */
a{
	opacity:1.0;
	transition: 0.3s ease-in-out;
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;}

a:hover,a:focus{
	opacity:0.6;}

a:link		{color:#4d4d4d;text-decoration:underline;}
a:visited	{color:#4d4d4d;text-decoration:underline;}
a:hover,a:focus	{color:#4d4d4d;text-decoration:none;}

/*--------------------------------------------------*/
/*main{
  margin:20px;
}*/
article{
  margin-bottom: 4em;
}
article:last-child{
  margin-bottom: 2em;
}

article dl h3{
  font-weight: normal;
}
.header_wrap{
  position: relative;
}
.header_wrap img{
  z-index: 1;
}
.header_read{
  z-index: 10;
  margin:1em 2em;
  padding-bottom:0.5em;
  text-align: justify;
}
.dt_item::before{
  content: "●";
  color:#B4D900;
}
.dt_item_city::before{
  content: "●";
  color:#FFD30C;
}
.wrapper{
  width:100%;
/*  padding:0 3em;	*/
  margin-bottom: 3rem;
}
.wrapper_box,
.wrapper_box_city{
  margin-bottom: 3em;
}
.wrapper h4{
  color: #fff;
  background-color: #58805D;
  margin-bottom: 0.5em;
  padding:5px 10px;
  border-radius: 5px;
}
.wrapper_box h4{
  color:#58805D;
  border-bottom: 1px solid #58805D;
  padding-bottom:5px;
  margin-bottom: 1.2em;
}
.wrapper_box_city h4{
  /*color:#826E48;*/
  border-bottom: 1px solid #826E48;
  padding-bottom:5px;
  margin-bottom: 1.2em;
}
.wrapper dd::before{
  content: "：";
}
.wrapper dl div{
  display:flex;
  margin-bottom: 1.5em;
  padding-top: 1em;
  border-top: 1px solid #E0E0E0;
}
.wrapper dl div:first-of-type{
  border-top:none;
}
.wrapper dl div dt{
  font-size:1.1rem;
}
.wrapper dt{
  width:25%;
}
.wrapper dd{
  width:75%;
}
footer{
  margin:0 20px;
  padding:20px 0;
  text-align: center;
  border-top:1px solid #4d4d4d;
}
.icon_pdf{
  min-width: auto;
  width:16px;
  height: 16px;
  margin-right: 0.5em;
}

/*--アコーディオン--------------------------*/
.ac_office_title{
  background-color: #B4D900;
  padding:1em 0;
  border-radius: 10px 10px 0 0;

}
.ac_city_title{
  background-color: #FFD30C;
  padding: 1em 0;
  border-radius: 10px 10px 0 0;

}
.ac_city_off,
.ac_office,
.ac_city
{
display:block;
width:100%;
/*height:60px;*/
line-height:60px;
position: relative;
margin-bottom:3px;
cursor:pointer;
padding-left:1em;
font-weight:normal;
transition : 0.5s;
}
.ac_office{
  background-color:#ddeb9a;
}
.ac_city_off,
.ac_city{
  background-color:#feec99;
}
.ac_city_off{
  height:auto;
}
.ac_office:hover{
  opacity: 0.6;
  transition : 0.5s;
}
.ac_city:hover{
  opacity: 0.6;
  transition : 0.5s;
}
.ac_city_hov_none:hover{
  opacity: 1;
}
/*---ac_city_offは9/1まで---------*/
.ac_city_off{
  transition: none;
  cursor: auto;
}
.ac_menu .ac_office{
  background-color:#ddeb9a;
  border-right:60px solid #B4D900;
}
.ac_menu .ac_city{
  background-color:#feec99;
  border-right:60px solid #FFD30C;
}
.ac_menu dd{
 width:100%;
 padding:3em 3em;
 display:none;
}
.ac_dd_title{
  color:#fff;
  padding:0.5em 0;
  background-color: #B4D900;
}
.ac_office_btn{
  display: inline-block;
  padding:0.5em 1em;
  background-color:#b4d900 ;
  border-radius: 10px;
  margin-bottom: 3em;
  border-width: 1px 1px 5px 1px;
  border-style: solid;
  border-color: #4d4d4d;
}
.ac_office_btn:hover{
  border-width: 1px;
  transition: 0.2s;
  margin-top: 4px;
}
.wrapper_box_city .ac_city_btn{
  display: inline-block;
  padding:0.5em 1em;
  background-color: #FFD30C;
  border-radius: 10px;
  margin-bottom: 2.5em;
  margin-left:1em;
  border-bottom: none;
  border-width: 1px 1px 5px 1px;
  border-style: solid;
  border-color: #826E48;
}
.wrapper_box_city .ac_city_btn0516{
  display: inline-block;
  padding:0.5em 1em;
  background-color: #C3C3C3;
  border-radius: 10px;
  margin-bottom: 2.5em;
  margin-left:1em;
  border-bottom: none;
  border-width: 1px 1px 5px 1px;
  border-style: solid;
  border-color: #6B6B6B;
  color: #7E7E7E
}
.wrapper_box_city .ac_city_btn:hover{
  border-width: 1px;
  transition: 0.2s;
  margin-top: 4px;
}

/*ac +-*/
.ac_menu dt{
  position: relative;
}
.ac_menu dt::before{
  content: "";
  position: absolute;
  top: 50%;
  right: -41px;
  width: 20px;
  height: 3px;
  background: #fff;
  transform: translateY(-50%);
}
.ac_menu dt::after{
  content: "";
  position: absolute;
  top: 50%;
  right: -32px;
  width: 3px;
  height: 20px;
  background: #fff;
  transform: translateY(-50%);
  transition: .3s;
}
.ac_menu dt.ac_active::after{
  top: 25%;
  opacity: 0;
  transform: rotate(90deg);
}

/*--アンケート------------------*/
.enq_title{
  display:flex;
  color:#58805D;
  border-bottom: 1px solid #58805D;
  margin-bottom: 1.5em;
}
.enq_title h3{
  font-size: 1.2rem;
  width:95%;
}
.q_item{
  padding:1px 3px;
  background-color: #58805D;
  color:white;
  font-weight: bold;
  margin-right: 1em;
  font-size: 1.1rem;
  width:58px;
  align-items: center;
  display: flex;
  justify-content: center;
}

label{
  display: block;
  margin: 0 0 0.5em 1em;
}
input,select{
  margin-right: 0.5em;
  border: 1px #58805D double;
  border-radius: 5px;
  text-align: right;
  background-color: #FFF;
}
select{
  text-align: left;
  padding: 0.5rem;
}

textarea{
  border: 1px #58805D double;
  border-radius: 5px;

}
.input_txt{
  width:8em;
  max-width: 100%;
  font-weight: bold;
  padding-right: 1em;
}

table{
  width:100%;
  border-collapse:collapse;
  text-align: center;
}
table th{
  background-color:#DDEB9A;
}
table td{
  height: 4em;
}
table, td, th{
  border: 1px solid #58805D;
}
input[name=check_btn] {
  padding:5px 10px;
	background-color: #777777;
  color: white;
  font-weight: bold;
  font-size: 1.25rem;
  box-shadow: 0 3px 0 #B3B3B3;
  width:30%;
  text-align: center;
}
input[name=send_btn] {
  padding:5px 10px;
	background-color: #B4D900;
  color: white;
  font-weight: bold;
  font-size: 1.25rem;
  box-shadow: 0 3px 0 #58805D;
  width:30%;
  text-align: center;
}



.q7_top{
  margin-bottom: 1em;
  border:2px #B4D900 double;
  width:100%;
  padding:0.5em 1em;
  font-size: 1rem;
  align-items: center;
}
.q7_top li{
  padding-left: 1em;
  text-indent: -1em;
}
.q7_list{
  margin-bottom: 3em;
}
.q7_list li{
  padding-left: 1em;
}
.q7_top p,
.q7_list p{
  background: linear-gradient(transparent 60%, #DDEB9A 60%);
  /*background-image: linear-gradient(transparent 60%, rgb(255, 235, 77) 60%);*/
  display: inline-block;
}
.pii_form{
  border:1px solid #000;
  background-color:whitesmoke;
  padding:1em;
  margin-bottom: 1em;
}

#pii_input{
  display:none;
}
/*.pii_check:checked + .pii_input{
display:block;
}*/


@media screen and (min-width:640px){
body	{}
.pc	{display:inline;}
.sp	{display:none;}
}

@media screen and (max-width:800px) {
.q7_pc	{display:none;}
.q7_sp	{display:inline;}

}

@media screen and (max-width:750px) {
  /*.header_read{
    font-size: 1.25em
  }*/
}
@media screen and (max-width:640px) {
body	{
  font-size: 90%;
  }
h1{font-size:1rem;}/*16px*/
/*h1{font-size:1.875rem;}/*30px*/
h2{font-size:1.5rem;}/*24px*/
h3{font-size:1.2rem;}/*20px*/
h4{font-size:1.1rem;}/*18px*/


.pc	{display:none;}
.sp	{display:inline;}

.header_read{
  font-size: 1.1em;
  margin-bottom: 0;
  margin:1em 2em -2em 2em;
}
.wrapper h4{
  text-align: center;
}
  .wrapper dl div{
  display: block;
}
.wrapper dt,
.wrapper dd{
  width:100%;
}
.wrapper{
  width:100%;
  padding:5% 0 0 0;
}
.ac_menu dd{
  width:100%;
  padding:5%;
}
article dl h3{
  font-size: 1rem;
}
label{
  margin: 0 0 1.5em 0.5em;
}
.enq_title h3{
  font-size: 1.1rem;
  line-height: normal;
}
input[name=check_btn] {
  width:80%;
  text-align: center;
}
input[name=send_btn] {
  width:80%;
  text-align: center;
}


}
@media screen and (max-width:450px){
  .header_read{
  font-size: 1em
  }
}
@media screen and (max-width:350px){
  .header_read{
  font-size: 0.8em
  }
}
@media print {
  .sp {
    display: none;
  }
}

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

.mb0 {
	margin-bottom:0 !important;
}
.ml1e {
	margin-left:1em;
}
.t_indent9 {
	padding-left: 9em;
	text-indent: -9em;
}
.t_indent7 {
	padding-left: 7em;
	text-indent: -7em;
}
.t_indent2 {
	padding-left: 2em;
	text-indent: -1em;
}

/*--2022年版追加--------------------------------*/
.opac_none:hover,.opac_none:focus{
  opacity: 1!important;
  cursor: auto!important;
}
.topics .topics_wrap a{
  display: flex;
  border-bottom: 1px solid #E0E0E0;
  /*margin:1rem 0;*/
  text-decoration: none;
  padding: 0.8em 0;
}
.topics .topics_wrap a:hover{
  background-color:#E5E5E5;}

.topic_office,.topic_city,.topic_all{
  color:#4d4d4d;
  margin-right:1em ;
  font-size: 0.9em;
  width:6em;
  height: 1.9em;
  padding:3px 0;
  font-weight: 600;
  text-align: center;
}
.topic_office{background-color: #B4D900;}
.topic_city{background-color: #FFD30C;}
.topic_all{
  background-color: #fff;
  color:#00B6ED;
  border: 2px solid #00b6ed;
  box-sizing: border-box;
}

.topics div time{
  width:22%;
  padding-left: 0.2em;
}
.topics div span{ width:50%;}

.topics h4{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.topics .topics_all{
  padding: 0 0.5em;
  color:#58805D;
  background-color: #fff;
  font-size: 0.9rem;
  font-weight: 400;
  text-decoration: none;
  border-radius: 3px;
  border:1px solid #fff;
}
.topics .topics_all:hover{
  color: #fff;
  transition: 0.3s;
  background-color: #58805d;
}
.re_top{
  text-align: center;
  margin-top: 2rem;
}
.re_top span{
  display:inline-block;
  color: #58805D;
  border:1px solid #58805D;
  border-radius: 5px;
  padding: 0.5em 1em;
  width: 30%;
}
.re_top span:hover{
  color: #fff;
  background-color: #58805d;
  transition: 0.3s;
}
.t_indent24{
  padding-left: 24px!important;
}
.topic_number{
  margin-top:1rem;
}
/*topics_page*/
.topics_page{
  margin-bottom: 2rem;
}
.topics_page h3{
  border-bottom: 1px solid #E0E0E0;
  margin-bottom: 2rem;
}
.topics_page_day span{
  padding: 3px 1em;
  margin-left: 1em;
}
.topics_page_img{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  width: 100%;
  margin:1rem auto;
  justify-content: space-between;}

.topics_page_img img{
  flex-basis: 48%;
  max-width: 48%;
}
.topics_page_link{
  display: flex;
  justify-content: center;
  color:#004386;
  font-size:0.812rem;}

.topics_page_link p{
  margin-top: 1rem;
  padding:0 0.8rem;}

.topics_page_link a:hover{text-decoration: underline;}

.topics_before::after{
  content: "<<";
  /*margin-left: 1rem;*/}

.topics_after::before{
  content: ">>";
  /*margin-right: 1rem*/;}

.alert{
	color: red;
	font-size: 1rem;
	margin-left: 2rem;
}
.movie-wrap {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  /*argin-top: 20px;*/
}
.movie-wrap iframe {
  position: absolute;
  top: 0;
  left: 50%;
  width: 97%;
  height: 97%;
  transform: translateX(-50%);
}
/*--shoplist追加----------------*/
.shoplist_search{
  margin: 1em auto 3em;
  width: 100%;
  padding: 1.5em 0;
  font-size: 0.9em;
  display: inline-block;
}
.shoplist_search th{
  background-color: transparent;
  width: 20%;
  padding: 1em;
  border: none;
  text-align: end
}
.shoplist_search td{
  padding: 1em 2em 0.5em 1em;
  text-align: left;
  height: auto;
  border:none;
}
.shoplist_list_kensyu{
  display: flex;
  flex-direction: column;
}
.shoplist_list_erea td{
  display: flex;
  align-items: center;
}
.shoplist_list_erea td div p{
  margin: 0 1em;
}
.shoplist_search label{display: inline-block;}

.shoplist_search td select {
  padding: 0.5em 1em;
  margin-left: 1em;
  border: 1px solid #58805D;
  border-radius: 5px;
}
.search_keyword td input{
  margin-left: 1em;
  text-align: left;
  padding: 0 1em;
}
.search_btn td div{
  background-color:#58805D;
  /*padding: 0.5em 1em;*/
  color: #fff;
  width: 10em;
  height: auto;
  text-align: center;
  margin: 0 auto;
  font-size: 1.2em;
}
.shoplist_list th{
  background-color: rgba(180,217,0,0.50);
}
.shoplist_list td{
  height: 2em;
  padding:0 1em;
}
.shoplist_list td:nth-child(1),.shoplist_list td:nth-child(2){
  text-align: left;
}
/*---------------------------*/
.form_txt{
  /*background-color: #DDEB9A;*/
  background-color: rgba(221,235,154,0.50);
  padding: 2rem;
  font-size: 80%;
  margin: 0 2rem 2rem 2rem;
}
.form_txt p{
  padding-left: 1em;
  text-indent: -1em;
  text-align: justify;
  margin-bottom: 0;
}
#form .form_txt p{
  padding-left: 0;
  text-indent: 0;
}

.form_top_link{
  display: block;
  text-align: center;
  font-size: 80%;
  margin-top: 2rem;
  color:#58805d;
}

#touroku_3 .form_top_link{
  font-size: 100%;
  font-weight: 600;
  text-decoration: none;
  padding:1rem;
  background-color:#DDEB9A;
  border-radius: 5px;
  width: 40%;
  margin: 0 auto;
}





/*--stepflow-------------------------*/
/* form-nav */

.stepflow {
  display: flex;
  flex-wrap: wrap;
  font-size: 0.8rem;
}
.stepflow .flow_item {
    position: relative;
    width: 16.6%;
    text-align: center;
    align-items: center;
    justify-content: center;
    padding: 0.8rem 0;
    line-height: 1.5;
    background: #F0F0F0;
    color: #999999;
}
.stepflow .flow_item span{
  font-size: 1rem;
}
.stepflow .flow_item:not(:last-child)::before,
.stepflow .flow_item:not(:last-child)::after {
    position: absolute;
    z-index: 2;
    top: 0;
    bottom: 0;
    left: 100%;
    content: '';
    border: 55px solid transparent;
    border-left: 20px solid #F0F0F0;
    margin: auto;
}
.stepflow .flow_item:not(:last-child)::before {
    margin-left: 1px;
    border-left-color: #FFF;
}

/* active */

.stepflow .flow_item.flow_active {
    z-index: 1;
    background: #58805d;
    color: #FFF;
}
.stepflow .flow_item:not(:first-child) {
   padding-left: 1rem;
}
.stepflow .flow_item.flow_active:not(:last-child)::after {
    border-left-color: #58805d;
}
.stepflow .flow_item.flow_active:not(:last-child)::before {
    border-left: none;
}

@media screen and (max-width: 780px) {
.stepflow .flow_item {
    font-size: 0.6rem;
    line-height: 1.4;
    padding: 0.6rem 0;
}
.stepflow .flow_item:not(:last-child)::before,
.stepflow .flow_item:not(:last-child)::after {
    border-width: 42px;
    border-left-width: 12px;
}
.form_txt{
  margin: 0 0 1rem;
}
}







@media screen and (max-width:780px){
a:hover,a:focus{
	opacity:1.0;
}
.topics .topics_wrap a{
  flex-direction: column;
}
.topics div span{width:100%;}
.topic_office,.topic_city{
  /*width: 30%;*/
  margin: 0.5em 0;}
.topics div time {width: 100%;}

.topics_page_img img{
  flex-basis: 100%;
  max-width: 100%;
  margin-bottom: 1rem;
}

.alert{
	margin-left: 0;
}



/*--shoplist追加----------------*/
.shoplist_wrap:last-child{
  margin-top:0;
}
.shoplist_search{
  margin: 0em auto 2em;
  font-size: 0.8em;
  line-height: 0.8;
}
.shoplist_search th{
  width: 100%;
  text-align:left;
  display: block
}
.shoplist_search td{
  padding: 0em 1em 1em 1em;
  display: block;
}
.shoplist_search label{display: inline-block;}

.shoplist_search td select {
  margin-left: 0em;
}
.search_keyword td input{
  margin-left: 0em;
  width: 100%;
}
.search_btn td div{
  margin: 1em auto 0;
}
.scroll{overflow-x: auto;}

.scroll .shoplist_list{min-width: 780px;}

.shoplist_list td label{
  margin: 0 0 1em 0.5em;
}
.shoplist_list_erea td select {
  line-height: 1.5em;
  margin-bottom: 0.5em;
}
.shoplist_list th{font-size: 0.8em;}

.shoplist_list td{
  font-size: 0.8em;
}

#shoplist .wrap_top {
  margin: 1em 0 1rem;
}
#shoplist .wrap_top h3:first-child{
  width: 200px;
}
#shoplist .wrap_top h3:first-child::after{
  left:calc(200px - 2.5rem);
}
#shoplist .wrap_top h3:last-child::before{
  left:200px;
}

/*---------------------------*/
#touroku_3 .form_top_link{
  width: 60%;
}


}
@media screen and (max-width:1100px){
.wrapper_box_city .ac_city_btn0516{
  margin-bottom:2.5em;
}
}

/*--2023年　追加--*/

.form_wrap h2{
  border-bottom: 5px solid #58805d;
}

table td{
  padding:1rem;
  text-align: left;
}
table, td, th{
  border: 1px solid #58805D;
}

.form_wrap select{
  text-align: left;
  padding: 0.5rem;
}
.form_wrap th label {
  margin: 0.5rem 0.5rem 0.5rem 0;
}

.form_wrap .input_txt{
  height: 2.5rem;
  width: auto;
  padding: 0 1em;
  font-weight:400 ;
  text-align: left;
  margin-right: 0;
}

.form_wrap form select {
    appearance: auto;
}

.wid3{width: 3rem!important;padding: 0;margin-right: 0.5rem;}
.wid4{width: 4rem!important;padding: 0}

.form_wrap .name_ml3{margin-left: 3rem;}

.form_wrap .order_cont label{margin:0;}
.form_wrap .order_num{display: flex;}
.form_wrap .order_num label{margin-right: 2rem;}

.form_wrap .inp_wid{width: 11rem;}
.form_wrap .postal{ margin: 0;}
.form_wrap .postal input{
  padding: 0;
  text-align: center;
}

.form_btn{
  display: flex;
  justify-content: space-around;
  margin-top: 2rem;
}
.form_btn_l,.form_btn_r{
  padding: 0.5rem;
  border-radius: 3px;
  text-align: center;
  width: 30%;
  font-size: 1.2rem;
  font-weight: 600;
  border:none;
}
.form_btn_l{
  border:3px solid #58805D;
  background-color: #fff;
  color: #58805D;
}
.form_btn_l:hover{
  border:3px solid none;
  background-color: #58805D;
  color: #fff;
  transition: .2s;
}
.form_btn_r{
  border:3px solid #aaa;
  background-color: #fff;
  color: #aaa;
}
.form_btn_r:hover{
  border:3px solid none;
  background-color: #aaa;
  color: #fff;
  transition: .2s;
}

.sp_800{display:none;}


@media screen and (max-width:640px){

.form_btn{flex-direction: column;
  align-items: center;}
.form_btn_l,.form_btn_r{
  width: 70%;
  font-size: 1rem;
}
.form_btn_l{margin-bottom: 1rem;}

}

@media screen and (max-width:800px){
.sp_800{display:block;}

.form_wrap .name_ml3{margin-left: 0;}
.form_wrap table th{width: 25%}

}

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

.t_error {
	margin-left:1em;
	padding-left:1em;
	text-indent:-1em;
	color:#FF0004 !important;
	margin-bottom:0;
}