#mapski{
	width:100%;
}
.tableimg {
    display: block;
	margin:0 auto;
	width:100%;
	max-width:980px;
}
.timg,
.timg2,
.timg3 {
    display: table-cell
}
.timg img,.timg2 img,.timg3 img{
    width: 100%;
	margin:0;
	padding:0;
	vertical-align:bottom;
}
#main{
    padding: 0 !important;
}
.sp_links {
  display: flex;
  margin: 0 auto 5rem;
  width: 100%;
  max-width: 980px;
  justify-content: space-between;
}
#recommend_ski{
	line-height:1;
	width:100%;
	max-width:980px;
	margin:0 auto!important;
	padding-top:3rem;
}
#recommend_ski ul {
    display: flex;
    justify-content: start;
    flex-wrap: wrap;
	margin:2rem 0;
	padding-left:0;
}
#recommend_ski li {
    width: 462px;
    background-color: #F1F1F1;
    color: #000;
    margin:10px 5px 20px;
    padding: 0.5rem;
    border: #999 solid 1px;
    border-radius: 7px;
	list-style:none;
}

.plan_comm {
    text-align: left;
    display: inline-block;
    width: 357px;
	font-size:1rem;
}
.plan_comm a:visited ,.plan_comm a:link{
    color: #00F;
    font-weight: bold;
}
.price {
    color: #F00;
    font-size: 1.2rem;
    margin-left: 1rem;
}
.year_name{
	display:block;
	text-align:right;
	margin:10px 25px 5px 0
}

.newplan {
    width: 98%;
    margin: 0 auto 1rem;
    display: flex;
    justify-content: start;
    text-align: center;
	flex-wrap: wrap;
}
.newplan .price_box {
    padding: 0;
    width: 224px;
    margin:0 0 1rem 0;
    border: 1px solid #000;
}
.areabox{
	background-color:#FFC;
	color:#F00;
	padding:0.2rem 0;
	text-indent:1rem;
	}
.r_types2{
	background-color:#063;
	color:#FFF;
	display:block;
	padding:0.5rem 0;
}
.r_types3{
	background-color:#660;
	color:#FFF;
	display:block;
	padding:0.5rem 0;
}
.r_types4{
	background-color:#C33;
	color:#FFF;
	display:block;
	padding:0.5rem 0;
}
.r_types{
	background-color:#e91e63;
	color:#FFF;
	display:block;
	padding:0.5rem 0;
}
.newplan .charges {
    display: block !important;
    border-bottom: 1px #666 solid;
	padding:0.5rem 0;
}
.newplan .sat_css {
    color: #06F;
    margin-right: 1.3rem;
}
.newplan .sun_css {
    color: #F00;
    margin-right: 1.3rem;
}
.datespace{
    margin-right: 1.3rem;
	}
.newplan a:link, .newplan a:visited {
    text-decoration: none;
    color: #00F;
}
.chtop a:link, .chtop a:visited {
    font-size: 1rem !important;
    color: #333 !important;
    text-decoration: none !important;
}
.chtop a::after {
    content: '';
    width: 5px;
    height: 5px;
    border-top: 3px solid #333333;
    border-right: 3px solid #333333;
    transform: rotate(45deg);
}
.chtop a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 1rem auto;
    padding: 1em 2.5rem 1rem 3.5rem;
  width: 300px;
    font-weight: bold;
    background-color: #cccccc;
    border-radius: 50vh;
}
#linkbox_stay {
    width: 95%;
    margin: 1.5rem auto;
    align-items: center;
    display: block;
    justify-content: center;
}

.background_btn {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 320px; /* ボタン幅 */
  padding: 1em 2em;
  background: #B476CE; /* 背景色 */
  text-decoration: none;
  border-radius: 0.5em;
  color: #fff; /* 文字色 */
  box-shadow: 0.5em 0.5em 0.5em rgba(0, 0, 0, 0.2);
  font-weight: bold;
  text-align: left;
  margin:0.5rem 0;
}

/* マウスオーバーした際のデザイン */
.background_btn::before {
  position: absolute;
  content: '';
  height: 0;
  width: 0;
  top: 0;
  left: 0;
  background: linear-gradient(135deg, rgb(255 255 255) 0%, rgb(255 255 255) 50%, #B476CE 50%, #B476CE 60%); /* めくれた色 */
  border-radius: 0 0 0.5em 0;
  box-shadow: 0.2em 0.2em 0.2em rgba(0, 0, 0, 0.3);
  transition: 0.3s;
}
.background_btn:hover::before {
  width: 2em;
  height: 2em;
}

/* クリックした際のデザイン */
.background_btn:active {
  box-shadow: 0.2em 0.2em 0.3em rgba(0, 0, 0, 0.3);
  transform: translate(1px, 1px);
}

.background_btn a:link,.background_btn a:visited{
	color:#FFF;
	line-height:1.5;
	font-size:1.2rem;
	}
.titlebox{
	height:60px;
}
.details {
  border: 1px solid #DDD;
}

.details__summary {
    cursor: pointer;
    background: #F4F4F4;
    margin: 0;
    padding: 1rem;
 }

.details__content {
    overflow: hidden;
    margin: 0;
    padding: 16px;
}
.details[open] & {
        opacity: 1;
      }

	/*ボックス全体*/
.accbox {
	margin:0 auto !important;
    padding: 0;
    width: 100%;
	display:block;
    max-width: 980px;}

/*ラベル*/
.accbox label {
    display: block;
    margin: 1.5px 0;
    padding : 13px 12px;
    color:#00F;
    font-weight: bold;
    background: #fff2cc;
    cursor :pointer;
    transition: all 0.5s;
}

/*アイコンを表示*/
.accbox label:before {
 /*   content: '\f054';*/
    content: '\f078';
    font-family: 'Font Awesome 5 Free';
    padding-right: 8px;
}

.accshow2  {
    padding: 5px 10px 30px;
    background: #fff5eb;
}

.accshow3  {
    padding: 5px 0 30px;
    background: #fff5eb;
}
.accshow2 label:before {
    content: '\f054' ;
/*    content: '\f078';*/
    font-family: 'Font Awesome 5 Free';
    padding: 5px 10px 30px;
}

.accshow3 label:before {
    content: '\f054' ;
/*    content: '\f078';*/
    font-family: 'Font Awesome 5 Free';
    padding: 5px 10px 30px;
}

/*ラベルホバー時*/
.accbox label:hover {
    background :#ffe9a9;
}

/*チェックは隠す*/
.accbox input {
    display: none;
}

/*中身を非表示にしておく*/
.accbox .accshow,.accbox .accshow4 {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

/*.accbox .accshow2 {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}*/

/*クリックで中身表示*/
.cssacc:checked + label + .accshow,.cssacc:checked + label + .accshow4 {
    height: auto;
    padding: 5px;
    background: #fff5eb;
    opacity: 1;
}

.cssacc:checked + label + .accshow2 {
    height: auto;
    padding: 5px 10px 30px;
    background: #fff5eb;
    opacity: 1;
}

.cssacc:checked + label + .accshow3 {
    height: auto;
    padding: 5px 10px 30px;
    background: #fff5eb;
    opacity: 1;
}

/*アイコンを入れ替える*/
.cssacc:checked + label:before {
/*   content: '\f054';*/
     content: '\f078';
}

.head_title_cut {
    display: flex;
    width: 95%;
    margin: 1.5rem auto;
    height: 100px;
    justify-content: center;
    align-items: center;
}
.title_img {
    max-width: 100px;
    width: 100px;
    min-width: 100px;
}
.title_img img {
    width: 100%;
    vertical-align: top;
}
.plan_title {
    padding: 1.3rem 1rem;
    color: #494949;
    background: #f4f4f4;
    border-left: solid 15px #7db4e6;
    border-bottom: solid 8px #d7d7d7;
    margin: 0 0 0 5px;
    width: 100%;
}
.plan_title a:link, .plan_title a:visited {
    font-size: 1.1rem;
    font-weight: bold;
    color: #03C;
}
#linkbox_stay {
    width: 95%;
    margin: 1.5rem auto;
    align-items: center;
    display: block;
    justify-content: center;
}
.staydays {
    background-color: #03F;
    padding: 0.5rem;
    border-radius: 7px;
    margin: 1rem;
    text-align: center;
}
.staydays a:link, .staydays a:visited {
    color: #FFF;
    text-decoration: none;
}

.banner {
        display: block;
        position: relative;
        padding-top: 246px;
      margin: 10px auto 0;
    width: 100%;
        background-image: url(../../images/viva/ski/carimage_big.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        overflow: hidden;
}

.banner > p {
        position: absolute;
        top: 50%;
        left: 0px;
        transform: translateY(-50%);
        padding: 0px;
        margin: 0px;
        width: 100%;
        color: #fff;
        font-weight: bold;
        text-align: center;
        text-shadow: -2px -2px 6px #333, 2px -2px 6px #333, 2px 2px 6px #333, -2px 2px 6px #333;
        white-space: nowrap;
}
.banner > p > span {
        display: block;
}
.banner > p > span:nth-of-type(1) {
        font-size: 1.5rem;
}
.banner > p > span:nth-of-type(2) {
        font-size: 4rem;
}
.banner2 {
        display: block;
        position: relative;
        padding-top: 448px;
      margin: 10px auto 0;
    width: 100%;
        background-image: url(../../images/viva/ski/jrimage_big.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        overflow: hidden;
}

.banner2 > p {
        position: absolute;
        top: 50%;
        left: 0px;
        transform: translateY(-50%);
        padding: 0px;
        margin: 0px;
        width: 100%;
        color:#3F0;
        font-weight: bold;
        text-align: center;
        text-shadow: -2px -2px 6px #333, 2px -2px 6px #333, 2px 2px 6px #333, -2px 2px 6px #333;
        white-space: nowrap;
}
.banner2 > p > span {
        display: block;
}
.banner2 > p > span:nth-of-type(1) {
        font-size: 1.5rem;
}
.banner2 > p > span:nth-of-type(2) {
        font-size: 4rem;
}