@charset "utf-8";
/* style.css */

/*☆☆☆☆☆☆ カラー一覧 ☆☆☆☆☆☆*/
:root {
  --main-color: #0c449b;
  --accent-color: #0071bc;
  --bg-color1: #707070;
  --bg-color2: #afafaf;
  --gra-color: linear-gradient(55deg, var(--main-color) 0%, var(--accent-color) 100%)fixed;
  --font-kana: heisei-maru-gothic-std;
  --pink-color: #ce749c;
  --orange-color: #d7a861;
  --yellow-color: #ded46e;
  --green-color: #59a572;
  --blue-color: #5d87b7; 
}

i.fa-file-pdf {color: firebrick;}


i.fa-arrow-up-right-from-square {
  color: var(--accent-color);
  margin-left: 1rem; }

.c-oa {color: var(--pink-color); }

.b-oa {background-color: var(--pink-color); }

.c-of {color: var(--orange-color); }

.b-of {background-color: var(--orange-color); }

.c-ka {color: var(--yellow-color); }

.b-ka {background-color: var(--yellow-color); }

.c-ku {color: var(--green-color); }

.b-ku {background-color: var(--green-color); }

.c-ho {color: var(--blue-color); }

.b-ho {background-color: var(--blue-color); }

.c-red {color: firebrick; }

.c-white {color: #fff; }

.c-accent {color: var(--accent-color); }

.b-accent {background: var(--accent-color); }




/*☆☆☆☆☆☆ 共通 ☆☆☆☆☆☆*/

/*スムーズスクロール*//*低速環境　Webフォント読み込み遅延用*/
html {
	font-size: 62.5%;
	scroll-behavior: smooth;
	visibility: hidden;
}

/* Webフォント読み込み遅延用 */
html.wf-active,
html.loading-delay {visibility: visible; }

body {
	font-family: 'Osaka','ヒラギノ角ゴシック','Hiragino Sans',sans-serif;
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
	font-size: 1.6rem;
	width: 100%;
}

body {
  max-width: 1920px;
}

header {
	display: flex;
	align-items: center;
	box-shadow: 5px 0 5px #f5f5f5;
	padding: 15px 0;
}

@media screen and (max-width:1080px){
	header {
		display: block;
	}
}

header h1{
	text-align: center;
}

footer{clear: both;}

header h1 {padding-left: 10px;}

h2{font-family: var(--font-kana);}

a.link{
	color: var(--accent-color);
	border-bottom:1px solid var(--accent-color);
	transition: .5s; 
}

a.link:hover{
	background: #def;
}

strong{
	font-weight: normal;
    background: linear-gradient(transparent 70%, #fff001 40%);
}

/****見出し****/
.head_1 {
	position:  relative;  
	font-size:  24px;
	font-weight:  normal; 
	margin:  0;                
	margin-bottom: 150px;
    padding-top: 50px;
    padding-left: 40px;
}

.head_1 h1 {
    line-height: 2; 
	margin:  0;  
    padding-left:  40px;
}


.head_1:before {
    content:  ''; 
	position:  absolute;
	border-style: solid;
	border-color: transparent transparent #dcddee transparent;
	border-width: 0px 0 110px 80px; 
    width: 0;  
    height: 0;
    top: -20px;
	left: 30px;
    transform: rotate(30deg);
    z-index:  -1; 
}


.right_box{
	float: right;
	width: 75%;
	padding-top: 0px;
}

/****レスポンシブ対応****/

@media screen and (max-width: 480px) {
	
.nn480{
	display: none;
	}


.bl480{
	display: block;
	}
}

@media screen and (min-width: 481px) {
	
.nn481{
	display: none;
	}


.bl481{
	display: block;
	}
}

@media screen and (max-width: 680px) {
	
.nn680{
	display: none;
	}


.bl680{
	display: block;
	}
}

@media screen and (min-width: 681px) {
	
.nn681{
	display: none;
	}


.bl681{
	display: block;
	}
}



@media screen and (max-width: 900px) {
	
.nn900{
	display: none;
	}


.bl900{
	display: block;
	}
}

@media screen and (max-width: 1080px) {
	
.nn1080{
	display: none;
	}


.bl1080{
	display: block;
	}
}


@media screen and (min-width: 1081px) {
	
.nn1081{
	display: none;
	}


.bl1081{
	display: block;
	}
}

/********サイドメニュー**********/

.left_box{
	float: left;
	width: 20%;
}

.left_box nav{
	display: block;
}

.left_box ul{
	display: block;
	text-align: left;
}

.left_box li{
	position: relative;
	overflow: hidden;
	font-weight: normal;
	text-align: left;
	width: 100%;
	padding-left: 30px;
	margin:15px 0;
	transition: ease .2s;
}

.left_box li::after {
	content: '';
	position: absolute;
	background: #000000;
	left: 0;
	width: 0%;
	height: 2px;
	bottom: -1px;
	margin-left: 30px;
	transform: scale(0, 1);
	transform-origin: left top;
	transition: transform 0.3s; 
	
}

.left_box li:hover::after {
	width: 100%;
	transform: scale(1, 1); 
}

h2.left_box_title{
	position: relative;
	font-size: 1.25rem;
	font-weight: normal;
	text-align: left;
	border: solid 0.25px var(--main-color);
	cursor: pointer;
	padding: 10px 0;
	padding-left:10px;
	transition-duration: 0.2s;
	z-index: +1;
}

.open{
	display: block;
}

ul.left_box_subtitle {
	display: none;
}

.default{
	display: block;
}

.btn_rotate{
    position: relative;
}

.btn_rotate:after{
    content: "";
	position: absolute;
	display: block;
	border-top: 2px solid var(--main-color);
	border-right: 2px solid var(--main-color);
	transform: rotate(45deg);
	top: 35%;
	right: 15px;
	width: 8px;
	height: 8px;
}

.btn_rotate.active:after{
	transform: rotate(135deg);
	transition: .3s;
}

.btn_before{
    position: relative;
}

.btn_before:before{
    content: "";
	position: absolute;
	display: block;
	border-top: 2px solid var(--main-color);
	border-right: 2px solid var(--main-color);
	top: 35%;
	left: 15px;
	width: 8px;
	height: 8px;
	transform: rotate(45deg);
}

/*******TOP＿ナビゲーション*******/

#header{
	background-color: #FFF;
	align-items: center;
	height: 70px;
	width:100%;
}

#header.fixed{
	position: fixed;
	top:0;
	left:0;
	z-index: 9;
}

nav {
	font-family: var(--font-kana);
	display: flex;
	margin: 0 0 0 auto;
}


nav ul{
	display: flex;
}

nav li {
	font-size: 1.5rem;
	font-weight: bold;
	text-align: center;
	width: 160px;
}

.navi li a{
	position: relative;
}

.navi li a:hover{
	color: var(--main-color);
}

.navi li a::after {
    content: '';
    position: absolute;
    background: var(--main-color);
	bottom: -4px;
    left: 0;
    width: 100%;
    height: 1px;
    transition: all .3s;
    transform: scale(0, 1);
    transform-origin: center top;
}

.navi li a:hover::after {
    transform: scale(1, 1);
}

/********ハンバーガーボタン**********/

 header button {
	 position: fixed;
	 display: flex;
	 justify-content: center;
	 align-items: center;
	 background: khaki;
	 top: 0;
	 right: 0;
	 width: 50px;
	 height: 50px;
	 padding: 0 10px;
	 z-index: 10;
}

header button :hover { cursor: pointer;}

header .btn.open { background: #fff; }
  
header .btn-line {
	position: relative;
	background: #333;
	width: 100%;
    height: 3px;
    transition: .2s;
}

header .btn-line::before {
	content: "";
	position: absolute;
	background: #333;
    width: 100%;
    height: 100%;
    transform: translateY(-13px);
    transition: .5s;
}

header .btn-line::after {
	content: "menu";
	display: block;
	font-size: 0.8rem;
	text-align: center;
	width: 100%;
	transform: translateY(8px);	
	transition: .5s; 
}

header .btn-line.open {
	transition: .5s;
}

header .btn-line.open::before {
	content: "";
	transform: translateY(0); 
}

header .btn-line.open::after {
	content: "close";
}


/********ハンバーガー メニュー**********/

header .menu {
	position: fixed;
	overflow-y: scroll;
	background: khaki;
	top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
	transform: translateX(130%);
    padding-top: 7rem;
    padding-bottom: 5rem;
    padding-left: 8%;
    padding-right: 8%;
    transition: transform .5s;
	z-index: 9;
}

header .menu.open { transform: translateX(0); }

header .menu h2 {
	font-size: 1.6rem;
	font-weight: normal;
	text-align: left;
	padding: 1.6rem 2rem 0.9rem;
    border-bottom: 2px solid;		
}

header .menu h2.fix { border-top: 2px solid; }

header .menu h3 {
	font-family:var(--font-kana);
	font-size: 1.5rem;
	border-bottom: 1px solid #666; 
	padding: 1.5rem 2rem 1rem;
}

header .menu h3.bb { border-bottom: 2px solid; }

header .menu h2::after,
header .menu h3::after {
	font-family: "Font Awesome 5 Free";
	content: '\f067';
    /* sign (+) */
	float: right;
	font-size: 1.4rem;
	font-weight: 900;
}

header .menu h2.active::after,
header .menu h3.active::after {
	font-family: "Font Awesome 5 Free";
	content: "\f068";
	/* sign (-) */
	float: right;
	font-size: 1.4rem;
	font-weight: 900;
}

header .menu h2.active_none::after{
	content: none;
}

header .menu h2.fix::after { content: ""; }

header .menu h2::after { margin-top: -1rem; }

header .menu h3::after { margin-top: -.1rem; }

header .menu .menu-list:hover {
      background: rgba(255, 255, 255, 0.8);
      transition: .3s;
      cursor: pointer; 
}

header .menu .menu-list.active { background: rgba(255, 255, 255, 0.4); }

header .menu ul.index { display: none; }

header .menu ul.index li {
	font-size: 1.4rem;
	line-height: 2rem; 
    border-bottom: 1px solid #666;
}

header .menu ul.index li:last-child { border-bottom: 2px solid; }

header .menu ul.index li:hover {
	background: rgba(255, 255, 255, 0.8);
	transition: .3s;
}

header .menu ul.index li a {
	display: block;
	padding: 1rem 2.2rem .5rem; 
}

.sns{
	font-size: 1.8rem;
	text-align: center;
	margin: 3rem 0;
}
	
.sns a{
	display: inline-block;
	margin: 0 1rem;
	transition: .5s;
}


@media screen and (max-width: 480px) {
        header .menu ul.index span.bp { display: none; } 
}
 

header .menu ul.index a:after {
	font-family: "Font Awesome 5 Free";
	content: "\f054";
	/* sign (>) */
	float: right;
	font-size: 1.2rem;
	font-weight: 900;
	margin-top: -.2rem; 
}

header .menu li.close {
	font-size: 2rem;
	text-align: center;
	cursor: pointer; 
}

@media screen and (max-width: 767px) {
	header .menu {
		padding-left: 5%;
		padding-right: 5%; 
	} 
	
}






/***********↓TOP戻るボタン↓***********/

#pagetop {
	position: fixed;
	background: var(--main-color);
	border: 0.25rem #FFF solid;
	border-radius: 50%;
	bottom: 20px;
	right: 5%;
	cursor: pointer;
	z-index: 8;
}


#pagetop a{
	position: relative;
  	display: block;
  	width: 45px;
  	height: 45px;
  	text-decoration: none;
}

#pagetop a::before{
  	font-family: 'Font Awesome 5 Free';
	content: '\f106';
	position: absolute;
	font-size: 25px;
  	font-weight: 900;
	text-align: center;
	color: #fff;
  	width: 25px;
  	height: 41px;
  	bottom: 0;
  	right: 0;
  	left: 0;
  	margin: auto;
}


/***********↓フローティングバナー↓***********/

.rental_hp.bnr01 {
	display: none;
    position: fixed;
	max-width: 90vw;
    bottom: 20px;
    right: 10px;
    width: 320px;
    height: auto;
    z-index: 8;
}

.rental_hp a:hover {
	filter: blur(1px);
	transition: .3s ease-in-out;
}

.bnr_close {
	position: absolute;
	font-weight: bold;
	color: #777;
    background-color: #f8f8f8;
    border: none;
    border-radius: 25px;
    box-shadow: 0 0 7px rgb(0, 0, 0, 0.4);
    cursor: pointer;
	left: -25px;
    top: 15px;
	padding: 10px 15px;
}

.fa-xmark:before {
	font-family: "Font Awesome 5 Free";
	font-style: normal;
    content: "\f00d";  
}

@media screen and (max-width: 750px) {
	
	.rental_hp.bnr01 img{
		max-width: 100%;
		margin: 0 auto;
	}
	
	.rental_hp.bnr01{
		bottom: 100px;
	}
	
	.fa-xmark:before {
        top: initial;
        right: initial;
	}
	
	.bnr_close{
		left: -10px;
		top: -40px;
	}
}

/***********↓TOPスライダー↓***********/


/*左＿スクロール背景*/
.blue {
	background-color: var(--main-color);
	width: 100%;
	height: 100%;
	left: 0;
}

/*スワイプ画像*/

.swipe {
	position: relative;
	margin-left: 5%;
}

.swipe img {width: 100%;}

.swiper-slide-active .swiper-slide__item,
.swiper-slide-duplicate-active .swiper-slide__item,
.swiper-slide-prev .swiper-slide__item {
	position: relative;
	animation: zoomanime 5s linear 0s normal both;
}

@keyframes zoomanime {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.3);
  }
}


/*スワイプ カバー画像*/

.swiper-slide__item::before {
	content: '';
	position: absolute;
	background-image: radial-gradient(rgba(0,0,0,0.2) 30%, transparent 31%), radial-gradient(rgba(0,0,0,0.2) 30%, transparent 31%);
	background-size: 4px 4px;
	background-position: 0 0, 2px 2px;
	background-color: rgba(0,0,0,0.3);
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

/*スワイプ上　文字*/
.swipetext {
	font-family: var(--font-kana);
	position: relative;
}

.swipetext p{
	position: absolute;
	font-size: 1.75vw;
	font-weight: bold;
	line-height: 4vw;
	color: #fff;
	top:50%;
	left: 50%;
	margin: 0!important;/*文字がずれている場合や*/
	padding: 0!important;/*文字が折り返される場合*/
	margin-top:20px;
	-ms-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
	-webkit-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
	transform: translate(-50%,-50%);/*センター寄せの修正*/
	z-index: 8;
}

.swipetext em{
	font-style: normal;
	font-size: 3vw;
}

/*スクロールダウン*/

.scrolldown {
	position:absolute;
	bottom:0px;
	left:2.5%;
}

.scrolldown span {
	position: absolute;
	font-size: 1.5rem;
	letter-spacing: 0.5rem;
	color: #fff;
	left: -10px;
	bottom: 70px;
	/*縦書き設定*/
	-ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}

.scrolldown:before {
    content: "";
    position: absolute;
	background: #fff;
	border-radius: 50%;
    bottom: 0;
    left: -4px;
	width: 10px;
	height: 10px;
    /*丸の動き1.6秒かけて透過し、永遠にループ*/
	animation:
		circlemove 1.6s ease-in-out infinite,
		cirlemovehide 1.6s ease-out infinite;
}

@keyframes circlemove {
      0%{bottom: 45px;}
     100%{bottom: -5px;}
 }

/*上から下にかけて丸が透過→不透明→透過する*/
@keyframes cirlemovehide {
      0%{opacity: 0}
     50%{opacity: 1;}
    80%{opacity: 0.9;}
	100%{opacity: 0;}
 }

/* 線の描写 */
.scrolldown:after {
	content:"";
	position: absolute;
	background: #fff;
	bottom: 0;
	left: 0;
	width: 2px;
	height: 50px;
}

@media screen and (max-width: 1335px) {
	
	.swipetext h1 {
		font-size: 1.5rem;
		letter-spacing: 0.5rem;
	}
}

@media screen and (max-width: 480px) {
	
	.swipe{
		margin-left: 8%;
	}
	
	.swipetext em{
		font-size: 20px;
	}
	
	.swipetext p{
		font-size: 12.5px;
		line-height: 4rem;
		top: 29%;
		left:15%;
		-ms-transform: translate(0%,0%);/*ベンダープレフィックス*/
		-webkit-transform: translate(0%,0%);/*ベンダープレフィックス*/
		transform: translate(0%,0%);
	}
	
	.swipetext img{
		width: 200%;
	}

	.scrolldown span{
		font-size: 1rem;
		left: -5px;
	}
	
	.top_title{
		font-size: 2rem;
	}
}

/***********↑TOPスライダー↑***********/



/***********↓全体↓***********/

h2 {
	font-size: 2rem;
    font-weight: bold;
	padding-bottom: 15px;
}

span.en {
    font-family: 'Impact', 'Arial', sans-serif;
    font-family: rift-soft, sans-serif;
    font-weight: 700;
    font-style: normal;
	opacity: .3;
}


/*****共通　margin padding*****/
.info, .company, .service, .discount, .contents, .other, article.sitemap, .catalog, .rental_service, .original_item, .recycle, .headoffice ,.original_house,.main_mp, .office_list, .rental, .rental_info{
	margin: 0 auto;
	padding: 5% 20%;
}

@media screen and (max-width:1120px){
	.info, .company, .service, .discount, .contents, .other, article.sitemap, .catalog, .rental_service, .original_item, .recycle, .headoffice ,.original_house,.main_mp,.office_list, .rental, .rental_info{
	padding: 5% 8%;
}
}

@media screen and (max-width:650px){
	.info, .company, .service, .discount, .contents, .other, article.sitemap, .catalog, .rental_service, .original_item, .recycle, .headoffice ,.original_house,.main_mp,.office_list, section.rental , .rental, .rental_info{
	padding: 15% 5%
}
}

/******　flex　******/
.company ul, .discount ul {
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

@media screen and (max-width: 520px) {
	
	.company ul, .discount ul{
		gap: 1rem;
		grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); 
	} 
}


/*ホバー効果ありの画像　大きさ*/
.company img, .discount img {
	object-fit: cover;
	width: 100%;
	height: 100%;
}


/*☆☆☆☆☆☆おしらせ☆☆☆☆☆☆*/


/*****おしらせフレーム*****/

.inside{
    overflow-y: scroll;
    border: 1px solid;
	height: 250px;
}

.inside::-webkit-scrollbar {
    width: 10px;
}


.inside::-webkit-scrollbar-thumb {
	background-color: var(--main-color);
	height: 10px;
}

.inside::-webkit-scrollbar-track {
	background: var(--bg-color2);
	border-left: 1px solid #000;
} 

info .outside {
    padding: 3rem 0 5rem;
    transform: skewY(-5deg); 
}

.info .outside .inside section:not(.last-section) {
    border-bottom: 1px solid;
}

article.info .outside .inside section ul a {
	position: relative; 
}

article.info .outside .inside section ul a::after {
	content: '';
	position: absolute;
	background: firebrick;
	bottom: 0;
	left: 0;
    width: 0;
    height: 1px;
    transition: .3s; 
}

article.info .outside .inside section ul a:hover {
	color: firebrick; 
}

article.info .outside .inside section ul a:hover::after {
	width: 100%; 
}

/*****おしらせ　中　*****/

.inside section {
	display: flex;
	line-height: 2rem;
	padding: 2rem 5rem;
}

@media screen and (max-width:480px){
	
	.inside section{
		display: block;
		padding: 2rem 1rem;
	}
	
	.inside section h4 {
		margin-bottom: 10px;
	}
}

/*ホバー効果*/
article.info .outside .inside section:hover {
          background: rgba(240, 230, 140, 0.5);
}

/*日付*/
.inside section h4 {
	font-family: Arial, Helvetica, "sans-serif";
	font-size: 1.5rem;
	color: var(--bg-color2);
    white-space: nowrap;
}

/*カテゴリー*/
article.info .outside .inside section h4 span {
    display: inline-block;
	font-size: 1rem;
	text-align: center;
	border: 1px solid;
    width: 60px;
    margin: 0 1rem;
}

article.info .outside .inside section p, article.rental_info .outside .rental_inside section p, ul{
	font-size: 1.4rem;
	align-self: center; 
}

article.info .outside .inside section ul li:not(:last-child), article.rental_info .outside .rental_inside section ul li:not(:last-child) {
    margin-bottom: 1rem;
}


/*☆☆☆☆☆☆☆☆☆会社情報☆☆☆☆☆☆☆☆☆*/


/*ドット線*/

.dotline{
    border-top: 2px dashed var(--main-color);
}

/*文字*/
.company p {
	font-family: var(--font-kana);
	font-size: 1.4rem;
	font-weight:bolder;
}

.company_btn {
	position: relative;
	display: inline-block;
	text-align: left;
	color: var(--main-color);
	text-decoration: none;
	outline: none;
	padding-right: 2rem;
    padding-top: 1rem;
    transition: ease .2s;
}

.company_btnarrow::after {
    content: '';
	position: absolute;
	border-top: 2px solid var(--main-color);
    border-right: 2px solid var(--main-color);
    top:58%;
	right: 5px;
    width: 5px;
    height: 5px;
    transform: rotate(45deg);
}

/*文字 矢印　ホバー効果*/

.company_btnarrow:hover::after {
  	animation: arrow .5s;
}

@keyframes arrow {
  50% {
    right: 10px;
  }
  100% {
    right: 13px;
  }
}

/*画像　ホバー効果*/

.shine span.mask{
	position: relative;
    display: block;
    line-height: 0;
    overflow: hidden;
}

.shine span.mask::before {
	position: absolute;
	content:"";
	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	width: 50%;
	height: 100%;
	top: 0;
	left: -75%;
	transform: skewX(-25deg);
}

.shine span.mask:hover::before {animation: shine 0.7s;}

@keyframes shine {
	100% {
		left: 125%;
	}
}


/*☆☆☆☆☆☆商品・サービス☆☆☆☆☆☆*/


/*グラデーション背景　前の背景*/

.grback_after {
	clip-path: polygon(0 0, 0 100%, 100% 100%);
	height:10vmin;
	background-color: #E6EEFD;
	margin-bottom: -5%;
}


/*グラデーション背景*/

.gradation{
	position: relative;
	overflow: hidden;
	justify-content: center;
	align-items: center;
	background: linear-gradient(270deg, #B0D3EA, #F2F6FF);
	background-size: 200% 200%;
  	width: 100%;
	transform: skewY(-5deg);
   	animation: bggradient 20s ease infinite;
	z-index: 1;
}

@keyframes bggradient{
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}


/*グラデーション背景　後ろの背景*/

.grback_before {
	clip-path: polygon(100% 0, 0 0, 100% 100%);
	background-position: bottom;
	background-color: var(--accent-color);
	height: 10vmin;
	margin-top: -5%;
}



/*商品・サービス一覧*/
.service{
	transform: skewY(5deg);
}

.service ul {
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

@media screen and (max-width: 520px) {
	
	.service ul{
		gap: 1rem;
		grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); 
	} 
}


.service ul::after {
	content: "";
	width: 20%;
}

.service li {
	text-align: center;
	width: 100%;
}

.service img {
	width: 100%;
}

/*ホバー効果*/

.service_text span {
	opacity: 0;
}

.service li:hover span {
	animation: 0.5s fadeup ease-in-out forwards;
}

@keyframes fadeup {
  0% {
    opacity: 0;
    transform: translateY(-30px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.service_text img {
	position:relative;
	top:0;
}

.service_text img:hover {
	box-shadow: 0 0 5px rgba(0,0,0,1);
	top:-10px;
	transition:0.3s;
}




/*☆☆☆ディスカウントショップ☆☆☆*/

.discount{
	padding-top: 20rem;
	padding-bottom: 20rem;
}

@media screen and (max-width:480px){
	.discount{
		padding-top: 10rem;
		padding-bottom: 10rem;
	}
}

/*ホバー効果*/
.discount a {
	display: block;
    transition: all .2s ease-in-out;
	transform: translateY(0);
    box-shadow: 0 0 0 rgba(0,0,0,1);
}

.discount a:hover {
	transform: translateY(-5px);
	box-shadow: 0 0 5px rgba(0,0,0,1);
}




/*☆☆☆おすすめコンテンツ☆☆☆*/


/*背景*/
.bg_pattern {
	width: 100%;
	z-index: -100;
}

.Cross {
background-image:
    repeating-linear-gradient(to bottom,
      transparent 25px,
      rgba(242, 246, 255) 26px,  rgba(242, 246, 255) 26px,
      transparent 27px,  transparent 51px, 
      rgba(242, 246, 255) 52px,  rgba(242, 246, 255) 52px,
      transparent 53px,  transparent 77px, 
      rgba(242, 246, 255) 78px,  rgba(242, 246, 255) 78px,
      transparent 79px,  transparent 103px, 
      rgba(242, 246, 255) 104px,  rgba(242, 246, 255) 104px,
      transparent 105px,  transparent 129px, 
      rgba(242, 246, 255) 130px,  rgba(242, 246, 255) 130px),

    repeating-linear-gradient(to right,
      transparent 25px,
      rgba(242, 246, 255) 26px,  rgba(242, 246, 255) 26px,
      transparent 27px,  transparent 51px, 
      rgba(242, 246, 255) 52px,  rgba(242, 246, 255) 52px,
      transparent 53px,  transparent 77px, 
      rgba(242, 246, 255) 78px,  rgba(242, 246, 255) 78px,
      transparent 79px,  transparent 103px, 
      rgba(242, 246, 255) 104px,  rgba(242, 246, 255) 104px,
      transparent 105px,  transparent 129px, 
      rgba(242, 246, 255) 130px,  rgba(242, 246, 255) 130px);
}


/*文字*/
.contents h2 {
	text-align: center;
}

.contents h3 {
	font-size: 1.35rem;
	padding: 1rem 0;
}


/*背景*/
.content {
	width: 94%;
	margin: 0 auto;
}

.content img {
	width: 100%;
    height: auto;
}


/******************スライド******************/

/*スライド左右の余白調整*/
.content .slick-slide {
    margin:0 25px;
}

/*スライド*/

.slick-slider {
	position: relative;
	display: block;
    box-sizing: border-box;
	
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	    user-select: none;
	
	-webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list {
	position: relative;
	display: block;
    overflow: hidden;
	margin: 0;
    padding: 0;
}

.slick-list:focus { outline: none;}

.slick-list.dragging {
	cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track {
    position: relative;
	display: block;
    top: 0;
    left: 0;
    margin-left: auto;
    margin-right: auto;
}

.slick-track:before,
.slick-track:after {
	display: table;
	content: '';
}

.slick-track:after {clear: both;}

.slick-loading .slick-track {visibility: hidden;}

.slick-slide {
	display: none;
    float: left;
    height: 100%;
    min-height: 1px;
}

[dir='rtl'] .slick-slide {float: right;}

.slick-slide img {display: block;}

.slick-slide.slick-loading img {display: none;}

.slick-slide.dragging img {pointer-events: none;}

.slick-initialized .slick-slide { display: block;}

.slick-loading .slick-slide { visibility: hidden;}

.slick-vertical .slick-slide { 
	display: block;
    height: auto;
    border: 1px solid transparent;
}

.slick-arrow.slick-hidden {display: none;}



/*戻る、次へ矢印の位置*/
.slick-prev,.slick-next{
    position: absolute;
	cursor: pointer;
	color: #426AB3;
    outline: none;
	background: currentColor;
	border: 0.075em solid currentColor;
	border-radius: 50%;
	box-sizing: content-box;
    width: 22px;
    height: 22px;
	top: 42%;
}

.slick-prev{
	left: -3%;
}

.slick-next{
	right: -3%;
}

.slick-prev::before,.slick-next::before{
    content: '';
	position: absolute;
  	color: #fff;
	border-style: solid;
	border-color: transparent;
 	border-width: 6px 8px;
  	width: 0;
 	height: 0;
  	top: 0;
  	left: 0;
  	right: 0;
  	bottom: 0;
  	margin: auto;
}

.slick-prev::before{
	border-right-color: currentColor;
	border-left: 0;
	transform: translateX(-15%);
}

.slick-next::before{
	border-left-color: currentColor;
	border-right: 0;
	transform: translateX(15%);
}

/*ドットナビゲーションの設定*/

.slick-dots {
    text-align:center;
	margin:20px 0 0 0;
}

.slick-dots li {
    display:inline-block;
	margin:0 5px;
}

.slick-dots button {
	display: block;
    color: transparent;
    outline: none;
	background: #ccc;
	border-radius: 50%;
    width: 8px;
    height: 8px;
}

.slick-dots .slick-active button {
    background: #333;
}



/*文字*/
.content span{
	font-family: var(--font-kana);
	transition: color .5s ease;
}

.content a:hover span{
	color: var(--main-color);
}



/*☆☆☆☆☆☆その他☆☆☆☆☆☆*/

.other{
	background-color: #F2F6FF;
}

.other ul{
	font-family: var(--font-kana);
	font-size: 1.5rem;
	font-weight: bold;
}

.other li{
	position: relative;
	display: inline-block;
	text-align: left;
	text-decoration: none;
	outline: none;
	margin-right: 5em;
	padding-right: 2rem;
    padding-top: 1rem;
    transition: ease .2s;
}

.other_btn::after {
    content: '';
	position: absolute;
	border-top: 2px solid var(--main-color);
    border-right: 2px solid var(--main-color);
    top: 52%;
	right: 5px;
    width: 10px;
    height:10px;
    transform: rotate(45deg);
}

/*hoverした際のアニメーション*/
.other_btn:hover::after {
  	animation: arrow .5s;
}





/*☆☆☆☆☆☆☆☆☆☆☆☆本社マップ☆☆☆☆☆☆☆☆☆☆☆☆*/

.headoffice {
	display: flex;
	justify-content: space-between;
	column-gap: 5rem;
  	margin: 5rem 0 4rem; 
}

.headoffice .map {
	width: 100%;
    max-width: 1050px;
}

section.headoffice .map iframe {
	width: 100%;
    height: 300px;
    border: 0; 
}

section.headoffice .map p {
	color: var(--bg-color2);
    margin-top: 1rem; 
}

section.headoffice address {
    position: relative;
    white-space: nowrap;
}

section.headoffice address dl {font-size: 1.4rem;}

section.headoffice address dt {
	font-size: 1.3rem;
	font-weight: 400; 
	margin-top: 2rem;
}

section.headoffice address p.sns {
	font-size: 1.4rem;
	text-align: left;
    width: 100%;
	margin-top: 20px;
}


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

/*☆☆☆☆☆☆☆☆☆☆☆☆サイトマップ☆☆☆☆☆☆☆☆☆☆☆☆*/

/*背景*/

.back_after{
	clip-path: polygon(100% 0, 0 100%, 100% 100%);
  	background-color: var(--main-color);
	height: 20vmin;
  	margin-bottom: -5%;
}

@media screen and (max-width:1080px){
	
	.back_after{margin-bottom: -10%;}
	
}

@media screen and (max-width:480px){
	
	.back_after{
		height: 15vmin;
		margin-bottom: -20%;
	}
	
}

article.sitemap{
	background-color: #f1f1f1;
	z-index: -100;
	 -webkit-clip-path: polygon(0 0, 100% 5%, 100% 100%, 0 100%);
	clip-path: polygon(0 0, 100% 5%, 100% 100%, 0 100%);
}


.snsbox .icon > li{
	margin-bottom: 10px;
}


h2.head_2 {
	position: relative;
	border-bottom: solid 3px var(--bg-color2);
	margin:100px 0 30px;
}


h2.head_2:after {
	position: absolute;
	content: " ";
	display: block;
	border-bottom: solid 3px var(--main-color);
	bottom: -3px;
	width: 20%;
}


/*☆☆☆☆☆☆☆☆☆☆☆☆サイトマップ☆☆☆☆☆☆☆☆☆☆☆☆*/
footer p {
	font-family: var(--font-kana); 
  	color: var(--bg-color1);
  	margin: 5rem 0;
}

footer p small {
    display: block;
    text-align: center; 
}

footer p.pagetop {
    display: none;
    position: fixed;
    bottom: 0;
    right: 1rem; 
}

footer p.pagetop a {
	font-size: 1.2rem;
	background: var(--bg-color2);
	filter: alpha(opacity=50);
      -moz-opacity: 0.5;
	opacity: 0.5;
	border-radius: 50%; 
	padding: 10px;
}

@media screen and (max-width: 766.9px) {
	
	footer p.pagetop a { display: none; } 
}

footer p.pagetop a :hover {
	background: var(--bg-color1);
	color: #fff;
}

article.sitemap h2.sitemap {
	margin: 5rem 0 0; 
}

article.sitemap .index {
	font-size: 90%;
	color: var(--main-color);
}


article.sitemap h3 {
	font-family: var(--font-kana);
	margin: 3rem 0 1rem; 
}

article.sitemap section.index div{
	display: flex;
	column-gap: 5rem;
}

article.sitemap section.index {
	display: flex;
	column-gap: 5rem; 
}

@media screen and (max-width:1050px){
	
	article.sitemap section.index {display: block;}
	
	.index2{margin-top: 50px;}
}


@media screen and (max-width:480px){
	
	article.sitemap section.index div{column-gap: 0rem;}
	
}



article.sitemap section.index_flex{
    white-space: nowrap;
    width: 170px;
}

section.company_index, section.other_index, section.contact{
	white-space: nowrap; 
}


section.company_index ul li::before, section.other_index ul li::before{
	content: '>';
	margin-right: .7rem; 
}

section.company_index li a, section.other_index a, section.contact a{
    position: relative;
    display: inline-block;
	line-height: 1;
    text-decoration: none;
	background: linear-gradient(to right, rgba(0, 0, 0, 0) 50%, khaki 50%) 0 0/200% auto;
    margin-left: -.5rem;
	padding: .3rem 1rem .1rem;
	transition: .3s; 
}


section.index a:hover {
	background-position: -100% 0;
}


.index h3 a{
	display: inline-block;
	transition: .20s;
}

.index h3 a:hover{
	-webkit-transform: rotateX(360deg);
	transform: rotateX(360deg);
}

.snsbox {
	flex: 0 0 200px;
	align-self: flex-start;
	text-align: center;
	background: #FFF;
	border: 1px solid var(--main-color);
}

.snsbox ul{
	padding: 10px;
}

.snsbox h3{
	font-size: 1.25rem;
	line-height: 48px;
	color: #FFF;
	background-color: var(--main-color);
	height: 48px;
	margin-bottom: 1.25rem;
}

.icon img{
	display: block;
	border-radius: 4px;
    box-shadow: 0 3px 4px rgba(0, 0, 0, 0.05);
	max-width: 100%;
	height:auto 
}


/*****レスポンシブ*****/

.snsbox_sp {
	align-self: flex-start;
	text-align: center;
	margin-top: 100px;
}

.snsbox_sp ul li img{
	width: 40px;
	margin:0 10px;
}