/*
  スマホ用CSS
*/



@media ( max-width : 768px ) {
	body {
		font-size: 62.5%;
		font-size: 14px;
	}
	.inner {
		width: 100%;
	}
	.images {
		width: 100%;
		margin: 0 auto;
		text-align: center;
	}
	img {
		max-width: 100%;
		height: auto;
	}
	.pc_only {
		display: none;
	}
	.content {
		width: 96%;
		float: none;
		box-sizing: border-box;
		padding: 10px;
		margin: 0 auto 20px;
	}
	.page_title {
		width: 96%;
		margin: 0 auto 10px;
		line-height: 1.4;
		box-sizing: border-box;
	}



	/*============================
	header
	============================*/

	
	header {
		padding: 0;
		overflow: visible;
	}
	header .inner {
		padding: 23px 10px;
	}
	header .logo {
		max-width: calc( 100% - 80px );
	}
	header .logo img {
		max-width: 100%;
		height: auto;
	}

	.side-menu-btn {
		position: absolute;
		top: 5px;
		right: 5px;
		width: 60px; 
		height: 66px; 
		cursor: pointer;
		z-index: 4;
	}
	
	.menu-btn-text {
		color: #303030;
		font-size: 1.4rem;
		display: block;
		text-align: center;
		line-height: 1;
	}
	.side-open .menu-btn-text {
		visibility: hidden;
	}
	
	
	/* toggle-panel */
	#panel-btn { 
		display: block; 
		position: relative; 
		width: 40px; 
		height: 20px;
		margin: 16px auto 0; 
	}
	#panel-btn-icon { 
		display: block; 
		position: absolute; 
		top: 30%; 
		left: 50%; 
		width: 21px;
		height: 2px; 
		margin: -1px 0 0 -9px; 
		background: #303030; 
		transition: .2s; 
	}
	#panel-btn-icon:before, 
	#panel-btn-icon:after { 
		display: block; 
		content: ""; 
		position: absolute; 
		top: 30%; 
		left: 50%; 
		width: 21px; 
		height: 2px; 
		margin-left: -11px; 
		background: #303030; 
		transition: .3s; 
	}
	#panel-btn-icon:before { 
		margin-top: -7px; 
	}
	#panel-btn-icon:after { 
		margin-top: 5px; 
	}
	
	#panel-btn .close { 
		background: transparent; 
	}
	#panel-btn .close:before, 
	#panel-btn .close:after { 
		margin-top: 0; 
	}
	#panel-btn .close:before { 
		transform: rotate(-45deg); 
		-webkit-transform: rotate(-45deg); 
	}
	#panel-btn .close:after { 
		transform: rotate(-135deg); 
		-webkit-transform: rotate(-135deg); 
	}
	
	#panel { 
		display: none; 
		width: 100%; 
		margin: 0; 
		position: absolute;
		top: 66px;
		left: 0; 
		background: #303030; 
		z-index: 100;
	}
	#panel .inner {
		position: relative;
	}
	
	
		/* --------------------------------------------------- side menu */
	
	.side-menu {
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		padding-top: 10px;
		background: #303030;
		z-index: 100;
		overflow: scroll;
		color: #fff;
	}
	
	.side-menu__box {
		width: 100%;
		height: 100%;
		display: block;
		overflow: auto;
	}
	.side-menu__ul {
		padding: 0;
		margin: 0;
	}
	.side-menu__ul .nav_sep {
		border-bottom: 1px solid #6d7b91;
	}
	
	.side-menu .cat_title {
		color: #fff;
		padding: 12px 20px;
		cursor: pointer;
		font-size: 18px;
		font-weight: normal;
		margin: 0;
		border-left: none;
		border-bottom: 1px solid #b1b8ce;
	}
	.side-menu .cat_title a {
		color: #fff;
	}
	.open_h3:after, 
	.open_h3.active:after {
	    font-size: 22px;
	    /*margin-left: 20px; */
	}
	.open_h3.active::after {
	    content: "\f106";
	    font-family: FontAwesome;
	    float: right;
	}
	.open_h3::after {
	    content: "\f107";
	    font-family: FontAwesome;
	    float: right;
	}
	
	.side-menu_sub {
		background: #f6f7f9;
	}
	
	.side-menu__ul--child {
		display: none;
	}
	
	.active .side-menu__ul--child {
		display: block;
	}
	
	.side-menu__ul--child li a {
		display: block;
		padding: 5px 0 5px 32px;
		font-size: 12px;
		color: #ccc;
	}
	
	.side-menu__ul > li > a,
	.side-menu__ul > li h2,
	.side-menu__ul .megamenu__item {
		display: block;
		padding: 12px 20px;
		font-size: 1.6rem;
		color: #303030;
		border-bottom: 1px solid #b1b8ce;
		font-size: 18px;
	}
	
	.side-menu__ul h2 {
		cursor: pointer;
		-webkit-transition: all .5s;
		transition: all .5s;
	}
	
	.side-menu__ul > li > h2:after {
		content: ' +';
		color: #ffd800;
		font-size: 20px;
	}
	
	.side-menu__ul > li.active h2:after {
		content: ' -';
	}
	
	.side_menu_btn_large a {
		background: #fff;
		color: #303030;
		padding: 10px 20px;
		border-radius: 5px;
		margin: 10px;
		text-align: center;
		display: block;
		font-size: 18px;
	}
	.btn__logout a {
		background: #f0d5d9;
	}
	
	.slides .list__item,
	.slides .list__item .item__banner, 
	.slides .list__item .item__banner .item__title-wrapper {
		height: 120px;
	}
	
	
	
	
	
	.side-menu__ul .megamenu__item {
		margin-bottom: 0;
		float: none;
	}
	.side-menu__ul .item__banner {
		background: none;
		display: block;
		height: auto;
	}
	.side-menu__ul .item__banner .item__title {
		display: inline-block;
		text-align: left;
		font-weight: normal;
	}
	.side-menu__ul .megamenu__item.service .item__banner, 
	.side-menu__ul .service .item__banner,
	.page-template-page-division .side-menu__ul .megamenu__item a:hover .item__banner {
		background: none;
		color: #5b5b5b;
	}
	
	.section__general .container {
		display: block;
		width: auto;
	}
	.section__general h2 {
		font-size: 1.3rem;
		padding-bottom: 5px;
		margin-bottom: 5px;
		border-bottom: 1px dotted #cecece;
	}
	.section__general h2,
	.section__general__article,
	.section__general__article .item__title {
		width: 100%;
		display: block;
		text-align: center;
	}
	.section__division {
		width: 50%;
		float: left;
		box-sizing: border-box;
		padding: 0 10px;
		margin-bottom: 20px;
	}
	.page-template-page-division .section__division {
		width: 100%;
		float: none;
	}
	.page-template-page-division .section__division .col {
		width: 50%;
		float: left;
		box-sizing: border-box;
		padding: 0 10px;
		margin-bottom: 20px;
	}
	.section__division .col {
		margin-bottom: 20px;
	}
	.division-list-menu {
		padding: 0 20px;
	}
	.division-list-menu ul li {
		width: 100%;
		float: none;
		margin-bottom: 10px;
		font-size: 1.3rem;
	}
	.site-side {
		margin: 0 auto;
	}


	
	/*============================
	sidebar
	============================*/
	.sidebar {
		width: 96%;
		margin: 0 auto;
		padding: 0;
		box-sizing: border-box;
		float: none;
	}
	.home .sidebar .widget_contact ul {
		padding: 0;
	}
	.top_contact_tel01 {
		text-align: center;
	}
	.home .widget_contact ul li, .widget_links ul li {
		text-align: center;
	}


	
	/*============================
	footer
	============================*/
	footer {
		padding: 0 0 30px;
	}
	
	footer .navi_global ul {
		display: block;
	}
	footer .navi_global ul li {
		float: left;
		font-size: 11px;
	}
	footer .navi_global ul li:first-child:before,
	footer .navi_global ul li:last-child:after {
		display: none;
	}
	footer .copy {
		float: none;
		text-align: center;
		font-size: 11px;
	}

	
	/*============================
	TOP
	============================*/



/*============================
hero
============================*/
.home .hero .inner {
	height: auto;
	padding: 0;
	margin: 0;
}
.hero .mainvisual {
	width: 100%;
	height:  auto;
	position: static;
}

.hero .mainvisual-logo {
	position: relative;
	left: unset;
	bottom: unset;
	background: rgba(14, 70, 115, 0.7);
	padding: 20px 0;
}
.hero .mv_mark_box {
	position: absolute;
	position: relative;
	text-align: center;
	background: rgba(14, 70, 115, 0.7);
}
.hero .mv_mark_box .mv_mark_box_inner {
	position: relative;
	padding: 10px;
	margin: 0;
}
.hero .mv_mark_box .mv_mark_01 {
	position: relative;
	left: unset;
	bottom: unset;
	margin: 5px;
}
.hero .mv_mark_box .mv_mark_02 {
	position: relative;
	left: unset;
	bottom: unset;
	margin: 5px;
}
.hero .mv_mark_box .mv_mark_03 {
	position: relative;
	left: unset;
	bottom: unset;
	margin: 5px;
}
.hero .mv_mark_box .mv_mark_04 {
	position: relative;
	left: unset;
	bottom: unset;
	right: unset;
	margin: 5px;
}
.hero .mv_mark_box .mv_mark_05 {
	position: relative;
	left: unset;
	bottom: unset;
	right: unset;
	margin: 5px;
}

.home .widget_contact ul,
.home .widget_links ul {
	margin: 10px 0;
	padding: 0;
}


	.home .box_left,
	.home .box_right {
		width: 96%;
		margin: 0 auto 20px;
		float: none;
		box-sizing: border-box;
	}
	.box_info {
		width: 96%;
		margin: 0 auto;
	}
	.box_info ul li .date,
	.box_info ul li .article {
		width: calc( 100% - 90px );
	}
	
	


	/*============================
	取扱商品ページ
	============================*/
	.page-brands h2 {
		margin-top: 0;
	}
	.page_list {
		display: none;
	}


	/*============================
	個人レンタルお問い合わせページ
	============================*/
	.contact_list {
		display: block;
	}
	.contact_list dt, .contact_list dd {
		width: 100%;
		float: none;
	}
	
	


	/*============================
	団体レンタルお問い合わせページ
	============================*/
	.contact_group_list {
		display: block;
	}
	.contact_group_list dt,
	.contact_group_list dd {
		width: 100%;
		float: none;
	}
	.contact_group_list dd {
		padding-bottom: 10px;
		margin-bottom: 10px;
		border-bottom: 1px solid #ccc;
	}
	.contact_group_list dd:last-child {
		border: none;
		padding: 0;
		margin: 0;
	}
	
	


	/*============================
	団体レンタルお問い合わせページ
	============================*/
	.page-about .profile_list dt,
	.page-about .profile_list dd,
	.page-about .profile_list dd .alignleft,
	.page-about .profile_list dd .alignright {
		width: 100%;
		float: none;
	}
	.page-about .profile_list dd .alignleft,
	.page-about .profile_list dd .alignright {
		margin: 0;
	}
	.page-about .profile_list dd .alignleft img,
	.page-about .profile_list dd .alignright img {
		display: block;
		margin: 0 auto;
	}
	

	
	
	/*============================
	スワロートレーディングページ
	============================*/
	.page-swallow-trading .top_box01 {
		padding-left: 0;
	}
	.page-swallow-trading .top_img01 {
		float: none;
		margin-right: 0;
		margin-bottom: 20px;
	}
	.page-swallow-trading .content p, .page-swallow-trading .sidebar p {
		padding-left: 0;
	}
	

	
	
	/*============================
	料金表
	============================*/
	.page-price .box_left,
	.page-price .box_right,
	.page-price .footer_contact .box_right,
	.page-price .footer_contact .box_left {
		float:none;
		width: 100%;
		padding-right: 0px;
	}
	.page-price .footer_contact .box_right p {
		font-size: 20px;
	}
	.page-price table {
	    box-sizing: border-box;
	    overflow-x: scroll;
	    -webkit-overflow-scrolling: touch;
		}
	.page-price .table_set td,
	.page-price .table_set th {
		padding: 0px;
	}	

	
	
	/*============================
	取扱商品ページ
	============================*/
	.page-brands h2 {
		margin-bottom: 0;
	}
	.brand_inner {
		padding: 0;
	}
	.brand_content {
		margin: 0;
	}
	
	

	/*============================
	 ZUMAブランド商品ページ
	============================*/
	.side_brand {
		float: none;
		width: 92%;
		margin: 0 auto 10px;
	}
	.single-zuma .left_box,
	.single-zuma .right_box {
		width: 100%;
		float: none;
		margin-bottom: 10px;
	}
	
	

	/*============================
	 プライバシーポリシーページ
	============================*/
	
	.page-policy .content ul,
	.page-policy .content ol {
		padding-left: 20px;
	}
	


	
	/*============================
	スキー修学旅行等団体レンタルスキー
	============================*/
	.rental_guide,
	.rental_service,
	.rental_service .rental_service_box1,
	.rental_service .rental_service_box2 {
		display: block;
		width: 96%;
		margin: 0 auto 20px;
		float: none;
	}
	.page-rental .rental_guide {
		margin-bottom: 0;
	}
	.page-rental .box_link {
		width: 50%;
		height: 360px;
		margin: 0px 0px 20px;
	}
	.page-rental .box_link.link_group {
		width: 50%;
	}
	.page-rental .box_link.link_private a {
		border-right: none;
	} 
	.page-rental .box_link.link_group_things {
		width: 50%;
	}
	.page-rental .box_link a .caption,
	.page-rental .box_link a h3 {
		padding: 0 10px;	
	}
	.page-rental .box_link a .caption {
		font-size: 12px;
	}
	.page-rental .box_link a h3 {
		margin-top: 15px;
	}
	.rental_service .rental_service_box1 .title {
		width: 100%;
	}
	.rental_service .rental_service_box1 .branch {
		width: 100%;
		text-align: center;
	}
	.rental_service .rental_service_box2 {
		border-left: 1px solid #ccc;
	}
	.page-rental .box_link .link_group_things_item {
		font-size: 16px;
	}

	
}