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


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

トップ共通

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


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

あなただけのサポーターを

---------------------*/
#item .inner{
	margin: 0 5%;
	align-items: center;
}
#item .txt{
	width: calc(100% - 400px);
}
#item .txt p{
	margin: 20px 0;
}
#item .sizegaide{
	display: flex;
	justify-content: flex-start;
}
#item .sizegaide li:first-of-type{
	border-left: 1px solid #7c7c7c;
}
#item .sizegaide li{
	line-height: 1;
	padding: 2px 6px;
	border-top: 1px solid #7c7c7c;
	border-bottom: 1px solid #7c7c7c;
	border-right: 1px solid #7c7c7c;
	color:var(--gray-color);
}
@media screen and (max-width:769px){
	#item .txt{
		width: 100%;
		text-align: center;
	}
	#item .img{
		text-align: center;
		margin:0 auto 30px;
		max-width: 200px;
	}
	#item .sizegaide{
		justify-content: center;
	}
}

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

製品

---------------------*/
#feature .inner{
	justify-content: space-around;
}
#feature .item{
	background: var(--base-color);
	position: relative;
	width: 32%;
	padding: 60px 30px 30px;
}
#feature .item .number{
	position: absolute;
	left: 0;
	top: 0;
	background: var(--main-color);
	color: var(--base-color);
	padding: 7px 20px 7px 10px;
	font-size: var(--txt-l);
	line-height: 1;
clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%);
}
/*
#feature .item .number::after{
	content: "";
	position: absolute;
	left: 100%;
	top: 0;
	border-bottom: 50px solid transparent;
	border-left: 50px solid #6aa7cd;
}
*/
#feature .item img{
	margin: 0 auto;
	text-align: center;
	display: block;
}
#feature .item h3{
	padding: 20px 0 15px;
	line-height: 1.6;
}
@media screen and (max-width:769px){
	#feature .item{
		width: 100%;
		margin:0 auto 20px;
		max-width: 400px;
	}
}
@media screen and (max-width:425px){
	#feature .item img{
		width: 30%;
		position: absolute;
		top: 30px;
		right: 10px;
	}
	#feature .item h3{
		padding: 0 0 15px;
		position: relative;
		z-index: 1;
	}
}


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

コンセプト

---------------------*/
#concept{
	background: url("../images/top/concept-bg_pc.jpg")no-repeat;
	background-size: cover;
	background-attachment: fixed;
	color: var(--base-color);
	background-position: right top;
}
#concept .inner{
	align-items: center;
	justify-content: space-between;
}
#concept .ttlarea{
	text-align: left;
	margin-bottom: 40px;
}
#concept .ja-ttl{
	font-size: var(--txt-xl);
}
#concept .img{
	width: 46%;
}
#concept .img img{
	max-height: 700px;
	object-fit: cover;
	object-position: center;
}
#concept .item{
	width: 48%;
}
#concept .txt{
	font-size: var(--txt-s);
}
@media screen and (max-width:769px){
	#concept .img{
		width: 100%;
	}	
	#concept .item{
		width: 100%;
		padding: 60px;
	}
	#concept{
		background: url("../images/top/concept-bg_sp.jpg")no-repeat;
		background-size: cover;
		background-attachment: fixed;
		background-position: bottom left;
	}

}
@media screen and (max-width:425px){
	#concept .item{
		padding: 60px 30px;
	}
}

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

シーン

---------------------*/
#scene{
	background: url("../images/top/seen_bg.jpg")no-repeat;
	background-size: cover;
		background-attachment: fixed;
	background-position: center right;
	color: var(--base-color);
}
#scene .item1{
	background: url("../images/top/seen1_pc.jpg")no-repeat;
	background-size: cover;
}
#scene .item2{
	background: url("../images/top/seen2_pc.jpg")no-repeat;
	background-size: cover;
}
#scene .item3{
	background: url("../images/top/seen3_pc.jpg")no-repeat;
	background-size: cover;
}
#scene .inner{
	justify-content: center;
}
#scene .item{
	width: 33%;
	padding: 100px 30px 200px;
}
#scene .item .secttl{
	margin-bottom: 20px;
}
@media screen and (max-width:769px){
	#scene{
		background: none;
	}
	#scene .wrap{
		margin: 0;
	}
	#scene .item{
		width: 100%;
		padding: 60px 30px;
	}
	#scene .item1{
		background: url("../images/top/seen1_sp.jpg")no-repeat;
		background-size: cover;
	}
	#scene .item2{
		background: url("../images/top/seen2_sp.jpg")no-repeat;
		background-size: cover;
	}
	#scene .item3{
		background: url("../images/top/seen3_sp.jpg")no-repeat;
		background-size: cover;
	}
}
@media screen and (max-width:425px){
	#scene .item .secttl{
		margin-bottom: 15px;
	}
}
/*---------------------

お届けまでの流れ

---------------------*/
#flow .inner{
	max-width: 800px;
	width: 100%; 
	margin: 0 auto;
}
#flow li{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 40px;
}
#flow li:last-of-type{
	margin-bottom: 0;
}
#flow li .txt{
	width: calc(100% - 180px);
}
#flow li .txt .secttl{
	display: flex;
	align-items: center;
	margin-bottom: 10px;
}
#flow li .txt .en{
	font-size: 3.6rem;
	padding-right: 10px;
}
#flow li .txt p{
	font-size: var(--txt-m);
}
@media screen and (max-width:769px){

}
@media screen and (max-width:425px){
	#flow li .txt{
		width: 76%;
	}
	#flow li .icon{
		width: 20%;
	}
	#flow li .txt .en{
		font-size: 2.6rem;
		padding-right: 5px;
	}
	#flow li{
		margin-bottom: 30px;
	}
	#flow li .txt p{
		font-size:  var(--txt-s);
	}
}
/*---------------------

同じ装備で戦える

---------------------*/
#cta{
	background: url("../images/common/cta-bg_pc.jpg")no-repeat;
	background-size: cover;
	background-position: center top;
	padding: 200px 0;
	
}
#cta .inner{
	padding-left: 10%;
}
#cta h2{
	font-size: var(--txt-2xl);
	color: var(--base-color);
}
@media screen and (max-width:769px){
	#cta{
		background: url("../images/common/cta-bg_sp.jpg")no-repeat;
		background-size: cover;
		background-position: center top;
		padding: 100px 0;
	}
}
@media screen and (max-width:425px){
	#cta .inner{
		padding: 0;
	}
}
/*---------------------

よくある質問

---------------------*/
#faq .inner{
	max-width: 800px;
	width: 100%;
	margin: 0 auto;
}
#faq .accordion .en{
	font-size: 3rem;
	font-weight: 500;
	padding-right: 15px;
	line-height: 1;
}
#faq .accordion div .en{
	color: var(--red);
}
#faq .accordion li{
	border-bottom: solid 1px var(--main-color);
	padding:20px;
}
/*
#faq .accordion li:last-of-type{
	margin-bottom: 0;
}
*/
#faq .accordion .qt{
	font-size: var(--txt-m);
	display: flex;
	align-items: center;
	cursor: pointer;
	position: relative;
}
#faq .accordion div{
	display: none;
	padding-top: 15px;
}
#faq .accordion p{
	display: flex;
	align-items: center;
}
/* 縦線 */
#faq .accordion .qt::before {
  background: var(--main-color); /* 線の色 */
  content: "";
  height: 2px; /* 線の太さ */
  position: absolute;
  right: 0;
  top: 50%; /* 線の位置を縦中央に */
  transform: rotate(90deg); /* 線を縦に */
  transition: transform .3s ease-in-out;
  width: 15px; /* 線の幅 */
}
/* 横線 */
#faq .accordion .qt::after {
  background: var(--main-color);
  content: "";
  height: 2px; /* 線の太さ */
  position: absolute;
  right: 0;
  top: 50%; /* 線の位置を縦中央に */
  transition: opacity .3s ease-in-out;
  width: 15px; /* 線の幅 */
}
/* 縦線(クリック後) */
#faq .accordion .qt.open::before {
  transform: rotate(180deg);
}
/* 横線(クリック後) */
#faq .accordion .qt.open::after {
  opacity: 0;
}
@media screen and (max-width:769px){

}
@media screen and (max-width:425px){
	#faq .accordion li{
		margin-bottom: 10px;
		padding:10px;
	}
	#faq .accordion .en{
		padding-right: 4px;
		font-size: 2.6rem;
	}
}