@charset "utf-8";

/******************************

 * style
 *
 * 1. import
 * 2. common
 * 3. HTMLtag（各タグ）
 * 4. Layout（共通要素）
 * 5. Section（各セクション）

******************************/



/*****
 * 1. import
*****/

@import "import/util.css";


/*****
 * 2. common
*****/

	#innerContainer {
		margin: 0 auto;
		text-align: center;
        font-size: 18px;
        font-weight: Regular;
        line-height: 1.5;
        font-family: "Sawarabi Mincho";
        background-color: #dfdfdf; 
	}
	#innerContainer img {
		max-width: 100%;
	}
	#innerContainer a:hover,
	#innerContainer a:hover p {
		opacity: 1;
		filter: unset;
	}

	#innerContainer a img,
	#innerContainer a .btn {
		opacity: 1;
		transition: 0.3s;
	}
	#innerContainer a:hover img,
	#innerContainer a:hover .btn {
		opacity: 1;
	}

	.txtWrapper {
		display: inline-block;
		text-align: center;
		padding: 0 50px;
	}

	.num {
		width: 100%;
		/*margin-bottom: 95px;*/
	}
	.num .img {
		margin-bottom: 10px;
		/*padding: 0 20px;*/
	}
	.num .txt {
		font-size: 18px;
		text-align: center;
		font-family: "Sawarabi Mincho";
        padding: 0 20px;
        color: #000;
	}
	.num .txt span.gray {
		color: #ccc;
	}
	.bg {
		background: url("https://secure1.future-shop.jp/~casselini/feature/assets_catalog2017_cas/sp/img/img-15.jpg") no-repeat;
		height: 166px;
	}
	.num.rtv {
		position: relative;
	}
	.abs {
		position: absolute;
		top: 80px;
		left: 0;
		right: 0;
		bottom: 0;
		margin: 0 auto;
		width: 800px;
		height: 0;
	}
	.num ul.two {
		display: block;
	}
	.num ul.two li,
	.numEx {
		margin-bottom: 20px;
	}
	.num ul.three {
		display: flex;
		justify-content: center;
		margin-bottom: 35px;
	}
	.num ul.three li:first-child {
		padding-left: 20px;
		padding-right: 8px;
	}
	.num ul.three li:last-child {
		padding-left: 8px;
		padding-right: 20px;
	}
	.num ul.three .img {
		padding: 0;
		margin-bottom: 20px;
	}

	.num .num01 {
		margin-bottom: 10px;
		padding: 0px;
	}

	.num03 .img02,
	.num08 .img02, {
		max-width: 100%;
	}
	.num11,
	.num12 {
		margin-bottom: 100px;
	}
	.num14 {
		margin: 100px auto 120px auto;
	}
	.num15{
		margin-bottom: 70px;
        margin-left: 20px;
        margin-right: 20px;
	} 
	.num16 {
		background-color: #f2f2f2;
		margin-bottom: 100px;
	}
	.num16 .innerWrapper {
		padding: 100px 0;
	}
	.num16 .ttl {
		margin-bottom: 40px;
	}
	.num16 .ttl img {
		max-width: 50% !important;
	}
	.num16 .img {
		margin-bottom: 10px;
	}
	.num16 .txt {
		font-size: 21px;
		padding: 0 70px;
		line-height: 36px;
	}
	.num16 ul.two li {
		margin-bottom: 75px;
	}
	.num16 ul.two li:last-child {
		margin-bottom: 0;
	}
	
	.catalogWrapper {
		border-top: 1px solid #ddd;
		border-bottom: 1px solid #ddd;
	}
	
	.btnWrapper {
		margin-bottom: 60px;
		padding: 0 40px;
	}
	.btn {
		display: inline-block;
		width: 100%;
	}
	.btn.pink {
		background-color: #333333;
	}
	.btn.black {
		background-color: #000;
	}
	.btn .large {
		color: #fff;
		font-size: 21px;
		padding-top: 8%;
		letter-spacing: 2px;
		line-height: 24px;
	}
	.btn .small {
		color: #fff;
		font-size: 17px;
		padding: 5px 0 8%;
		letter-spacing: 2px;
	}
	.al {
		text-align: left !important;
	}

	#contentWrapper {
    width: 100%;
    padding: 0;
    margin: 0;
	}
	.section h2 {
    padding: 0;
    background-color: transparent;
    color: #333;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
	}
	.section h3 {
    margin: 0;
	}
	.section p {
		margin: 0;
	}

/*****
 * 3. HTMLtag
*****/

/* img */
	#mainContent img {
		vertical-align: top;
		max-width: 100%;
		height: auto;
	}

	#contentWrapper a {
		cursor: pointer;
	}
	#contentWrapper a:hover {
		opacity: 1;
	}
	a:hover {
		text-decoration: none;
	}

/* cap */
	.cap,
	.caption {
		color: #666666;
		font-size: 18px;
		background: none;
	}
	.cap {
		padding-top: 5px;
	}


/*****
 * 4. Layout
*****/


	/* reset */
	html {
		margin: 0!important;
		padding: 0!important;
	}
	/*header,
	footer,
	.totop,
	.breadcrumbs,
	.drawer-nav,
	.drawer-toggle {
		display: none!important;
	}*/


	#gHeader {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 115px;
		background: #fff;
		z-index: 1000;
	}
	#gHeader h1 {
		position: absolute;
		top: 60px;
		left: 50%;
		margin-left: -127px;
	}

	#gNav {
		opacity: 0;
		visibility: hidden;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		overflow-y: scroll;
		background: rgba(255,255,255,.8);
		transition: .3s;
	}
	#gNav.on {
		opacity: 1;
		visibility: visible;
	}
	#gNav ul {
		position: absolute;
		width: 100%;
    padding: 215px 0;
		text-align: center;
	}
	#gNav li {
		margin-top: 30px;
	}
	#gNav li:first-child {
		margin-top: 0;
	}
	#gNav a {
	  display: inline-block;
		position: relative;
		padding: 0 20px 25px;
	}
	#gNav a::before {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 10px;
		background: #f6c757;
		opacity: 0;
		transition: .3s;
	}
	#gNav a:hover::before {
		opacity: 1;
	}

	#menu {
		position: absolute;
		top: 40px;
		left: 40px;
		width: 50px;
		height: 34px;
		z-index: 1;
	}
	#menu span {
		position: absolute;
		width: 100%;
		height: 2px;
		background: #000;
		transition: .3s;
	}
	#menu span:nth-child(1) {
		top: 0;
	}
	#menu span:nth-child(2) {
		top: 50%;
		margin-top: -1px;
	}
	#menu span:nth-child(3) {
		bottom: 0;
	}
	#menu.on span:nth-child(1) {
		top: 50%;
		margin-top: -1px;
		transform: rotate(45deg);
	}
	#menu.on span:nth-child(2) {
		opacity: 0;
	}
	#menu.on span:nth-child(3) {
		bottom: 50%;
		margin-bottom: -1px;
		transform: rotate(-45deg);
	}

	#gFooter {
		width: 640px;
		margin: 0;
	}
	#fNav {
		margin: 0;
		padding: 60px 0;
		background: #000;
		color: #fff;
	}
	#fNav ul {
		text-align: center;
		letter-spacing: -.40em;
	}
	#fNav ul li {
		display: inline-block;
		letter-spacing: .07em;
		vertical-align: middle;
		margin-right: 30px;
	}
	#fNav ul li:first-child {
		margin-right: 45px;
		padding: 20px 45px 20px 0;
		border-right: 1px solid #333;
		font-size: 16px;
	}
	#fNav ul li:last-child {
		margin-right: 0;
	}
	.copyright {
		padding: 25px 0;
		font-size: 14px;
		text-align: center;
	}



/* wrap */
	.wrap {
		padding-left: 40px;
		padding-right: 40px;
	}

	.headline {
	}


/*****
 * 5. Section
*****/

/* section */
	#mainContent {
		position: relative;
    line-height: 2.0;
    letter-spacing: .2em;
	}
	.section {
	}
	.section h2 {
		margin-bottom: 75px;
		text-align: center;
	}


/* section 01 */
	.section.section-01 {
	}


/* section 02 */
	.section.section-02 {
		padding: 120px 0 135px;
	}
	.section.section-02 h2 {
	}
	.section.section-02 .itemList {
		margin: 0 -40px 60px;
	}
	.section.section-02 .itemList .swiper-slide {
		width: 420px;
	}
	.section.section-02 .itemList .items a {
		display: block;
	}
	.section.section-02 .itemList .items .items_image {
		margin-bottom: 30px;
	}
	.section.section-02 .itemList .items .items_ttl {
		font-size: 27px;
		margin-bottom: 10px;
		padding-bottom: 10px;
		border-bottom: 1px solid #000;
	}

	.section.section-02 .icn-smp {
		text-align: center;
	}


/* section 03 */
	.section.section-03 {
	}
	.section.section-03 .tabBox {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.section.section-03 .tabBox li {
		width: 50%;
		text-align: center;
	}
	.section.section-03 .tabBox li.chara { background: #142240; }
	.section.section-03 .tabBox li.mittens { background: #f3d986; }
	.section.section-03 .tabBox li.pattern { background: #de8287; }
	.section.section-03 .tabBox li.trend { background: #ae2e51; }
	.section.section-03 .tabBox li a {
		display: block;
		padding: 15px;
	}

	.section.section-03 .itemBox {
		position: relative;
		padding: 140px 0 130px;
	}
	.section.section-03 .itemBox::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 480px;
		z-index: -1;
	}

	.section.section-03 .itemBox .itemBox_ttl {
	}
	.section.section-03 .itemBox .itemList {
		display: flex;
		flex-wrap: wrap;
	}
	.section.section-03 .itemBox .itemList .items {
		width: 270px;
		margin: 60px 0 0 20px;
	}
	.section.section-03 .itemBox .itemList .items:nth-child(-n+2) {
		margin-top: 0;
	}
	.section.section-03 .itemBox .itemList .items:nth-child(2n+1) {
		margin-left: 0;
	}
	.section.section-03 .itemBox .itemList .items a {
		display: block;
	}
	.section.section-03 .itemBox .itemList .items .items_image {
		margin-bottom: 30px;
	}
	.section.section-03 .itemBox .itemList .items .items_detail .items_ttl {
		font-size: 24px;
		font-weight: bold;
		font-family: Helvetica, sans-serif;
		letter-spacing: .02em;
	}
	.section.section-03 .itemBox .itemList .items .items_detail .items_price {
		text-decoration: underline;
	}

	/* item-chara */
	.section.section-03 .itemBox.item-chara::before {
		background: #142240;
	}

	/* item-mittens */
	.section.section-03 .itemBox.item-mittens::before {
		background: #f3d986;
	}

	/* item-pattern */
	.section.section-03 .itemBox.item-pattern::before {
		background: #de8287;
	}

	/* item-trend */
	.section.section-03 .itemBox.item-trend::before {
		background: #ae2e51;
	}


/* section 04 */
	.section.section-04 {
		position: relative;
		padding: 140px 0;
	}
	.section.section-04::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 480px;
		background: #ffe296;
		z-index: -1;
	}
	.section.section-04 .text {
		padding: 50px 60px 70px;
	}
	.section.section-04 .itemList {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.section.section-04 .itemList .items {
		width: 270px;
	}
	.section.section-04 .itemList .items .items_image {
		margin-bottom: 20px;
	}
	.section.section-04 .itemList .items .items_ttl {
		font-size: 24px;
		font-weight: bold;
		font-family: Helvetica, sans-serif;
		letter-spacing: .02em;
	}
	.section.section-04 .itemList .items .items_price {
		text-decoration: underline;
	}



/* section 05 */
	.section.section-05 {
		position: relative;
		padding: 140px 0 180px;
	}
	.section.section-05::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 480px;
		background: #f2e6d8;
		z-index: -1;
	}

	.section.section-05 .itemList {
		margin-bottom: 120px;
	}
	.section.section-05 .itemList .items .items_image,
	.section.section-05 .itemList .items .items_txt {
		margin-bottom: 40px;
	}
	.section.section-05 .itemList .items .items_ttl strong {
		margin-right: 20px;
		font-size: 24px;
		font-weight: bold;
		font-family: Helvetica, sans-serif;
		letter-spacing: .02em;
	}
	.section.section-05 .itemList .items .items_ttl span {
		text-decoration: underline;
	}

	.section.section-05 .itemBtn {
		width: 500px;
		margin: 0 auto;
		text-align: center;
	}
	.section.section-05 .itemBtn a {
		display: block;
		padding: 20px 0;
		background: #000;
		color: #fff;
		font-size: 25px;
	}


/* pagetop */
	.pagetop {
		position: relative;
		padding: 30px 0;
		background: #262626;
		text-align: center;
	}

/*点線*/
hr.line2{
  border: none;
  border-top: 1px dotted #fff;
}