@charset "utf-8";

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

 * style
 *
 * 1. import
 * 2. common
 * 3. HTMLtag£¨¸÷¥¿¥°£©
 * 4. Layout£¨¹²Í¨ÒªËØ£©
 * 5. Section£¨¸÷¥»¥¯¥·¥ç¥ó£©

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



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

@import "import/util.css";
@import url('//fonts.googleapis.com/css?family=Crimson+Text');

@font-face {
    font-family: 'tex_gyre_adventorregular';
    src: url('https://secure1.future-shop.jp/~casselini/feature/assets_shopperbag/pc/font/texgyreadventor-bold-webfont.woff');
    src: url('../font/texgyreadventor-bold-webfont.woff');
    font-weight: normal;
    font-style: normal;
}


/*****
 * 2. common
*****/
	#innerContainer {
		width: 100%;
		box-sizing: border-box;
		text-align: center;
		margin: 0 auto;
		/*padding: 0 85px;*/
	}


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

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

	#contentWrapper a {
		cursor: pointer;
	}

/* cap */
	.cap,
	.caption {
		color: #666666;
		font-size: 10px;
		line-height: 15px;
		background: none;
        font-family: "Sawarabi Mincho";
	}
	.cap {
		padding-top: 5px;
	}


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


	/* reset */
	html {
		margin: 0!important;
		padding: 0!important;
	}
	.breadcrumbs {
		display: none;
	}

	/* menu */
	#menu {
		position: absolute;
		top: 30px;
		left: 40px;
	}
	.menu-trigger,
	.menu-trigger span {
		display: inline-block;
		transition: all .4s;
		box-sizing: border-box;
	}
	.menu-trigger {
		position: relative;
		width: 30px;
		height: 24px;
	}
	.menu-trigger span {
		position: absolute;
		left: 0;
		width: 100%;
		height: 1px;
		background-color: #fff;
		border-radius: 2px;
	}
	.menu-trigger span:nth-of-type(1) {
		top: 0;
	}
	.menu-trigger span:nth-of-type(2) {
		top: 12px;
	}
	.menu-trigger span:nth-of-type(3) {
		bottom: 0;
	}
	.menu-trigger.active span:nth-of-type(1) {
		-webkit-transform: translateY(10px) rotate(-45deg);
		transform: translateY(10px) rotate(-45deg);
	}
	.menu-trigger.active span:nth-of-type(2) {
		opacity: 0;
	}
	.menu-trigger.active span:nth-of-type(3) {
		-webkit-transform: translateY(-13px) rotate(45deg);
		transform: translateY(-13px) rotate(45deg);
	}

	#menuArea {
		position: absolute;
		top: 80px;
		left: -380px;
		z-index: 99999;
		width: 380px;
		height: 540px;
		background-color: rgba(0,0,0,0.8);
		transition: 0.7s;
	}
	#menuArea.active {
		left: 0;
	}
	.menu-wapper {
		width: 271px;
		text-align: left;
		padding: 40px 0 0 50px;
	}
	.menu-home,
	.menu-all {
		margin-bottom: 40px;
	}
	.menu-btn-wapper {
		margin: 50px 0;
		width: 271px;
		height: 50px;
		background-color: #fff;
		transition: 0.3s;
	}
	.menu-btn-wapper p {
		font-size: 14px;
		text-align: center;
		padding-top: 15px;
		font-weight: bold;
		position: relative;
		transition: 0.3s;
	}
	.menu-btn-wapper p:after {
		content: '>';
		font-size: 14px;
		color: #a2a2a2;
		font-weight: normal;
		position: absolute;
		top: 14px;
		left: 190px;
		transition: 0.3s;
	}
	.menu-btn-wapper:hover {
		background-color: #333;
	}
	.menu-btn-wapper:hover p {
		color: #fff;
	}
	.menu-btn-wapper:hover p:after {
		color: #fff;
	}

	/* innerHeader */
	#innerHeader {
		height: 80px;
		background-color: #000;
		position: relative;
	}
	#innerHeader .logo {
		display: inline-block;
		text-align: center;
		margin-top: 20px;
	}
	#innerHeader .sns {
		position: absolute;
		top: 30px;
		right: 40px;
	}
	#innerHeader .snsList {
		display: flex;
		align-items: center;
		align-content: center;
		justify-content: center;
	}
	#innerHeader .snsList li:nth-child(2) {
		padding: 0 20px;
	}
	#innerHeader .snsList li:last-child {
		margin-top: -3px;
	}

	#gHeader {
		position: fixed;
		top: 0;
		width: 100%;
		background: #fff;
		z-index: 1000;
	}
	#gHeader h1 {
		position: absolute;
		bottom: -10px;
		right: 40px;
		z-index: 1;
	}
	#gNav {
	}
	#gNav ul {
		display: flex;
		justify-content: center;
	}
	#gNav li {
		margin: 0 12px;
	}
	#gNav a {
		position: relative;
		display: block;
		padding: 30px 8px;
	}
	#gNav a::before {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 5px;
		background: #f6c757;
		opacity: 0;
		transition: .3s;
	}
	#gNav a:hover::before {
		opacity: 1;
	}


	#gFooter {
		margin-bottom: 0;
		padding: 60px 0;
		background: #000;
	}
	#fNav {
		margin-bottom: 30px;
	}
	#fNav ul {
		text-align: center;
	}
	#fNav li {
		display: inline-block;
		margin: 0 15px;
	}
	#fNav li a {
		transition: .3s;
	}
	#fNav li a:hover {
		opacity: .7;
	}


/* wrap */
	.wrap {
		width: 745px;
		margin-left: auto;
		margin-right: auto;
	}


/*****
 * 5. scn
*****/


 /* tags */
	.tags {
		width: 100%;
		margin: 20px 0 40px;
	}
	.tags--wrap {
		display: flex;
		justify-content: space-between;
	}
	.tags--tag--list {
		display: flex;
	}
	.tags--tag--list li {
		margin-right: 23px;
	}
	.tags--tag--list__ttl {
		font-size: 13px;
		font-weight: bold;
	}

/* main visual */
	.main-visual {
		width: 100%;
		text-align: left;
		margin-bottom: 30px;
	}
	.main-visual__ttl {
		font-size: 24px;
		font-weight: bold;
		margin-bottom: 35px;
	}
	.main-visual__visual {
		width: 100%;
	}
	.main-visual__visual.is-show {
		transform: rotate(0);
		opacity: 1;
	}
	.main-visual__visual__img img {
		width: 100%;
	}
	.main-visual__visual__txt {
		position: absolute;
		bottom: 60px;
		left: 115px;
	}
	.main-visual__visual__img-txt {
		margin-bottom: 20px;
	}
	.main-visual__visual__device-txt {
		font-size: 24px;
		color: #fff;
	}

/* contents */
	.contents {
		width: 100%;
	}
	.contents a {
		opacity: 1;
		transition: .3s;
	}
	.contents a:hover {
		opacity: 0.7;
	}
	.contents--inner {
		width: 100%;
		box-sizing: border-box;
		font-size: 12px;
		line-height: 2;
		text-align: left;
		font-family: "Sawarabi Mincho";
		/*border-bottom: 1px solid #e3e3e3;*/
	}

   .contents--txt {
		width: 100%;
		box-sizing: border-box;
		font-size: 15px;
		line-height: 2;
        margin-top: 10px;
        font-family: "Sawarabi Mincho";
	}

   .contents--txt2 {
		width: 100%;
		box-sizing: border-box;
		font-size: 12px;
		line-height: 2;
        margin-top: 10px;
        font-family: "Sawarabi Mincho";
	}

	.contents--inner__no-border {
		border-bottom: none;
	}
	.contents--scn {
		margin: 60px 0 0;
	}
	.contents--item {
		width: 100%;
		display: inline-block;
		text-align: center;
		/*margin: 0 auto 35px;*/
	}
	.contents--item li {
		border-top: 1px solid #fff;
	}
	.contents--item li:first-child {
		border: none;
	}
	.contents--txt__link {
		position: relative;
		display: inline-block;
		color: #30c1e8;
		padding-right: 20px;
		text-decoration: underline;
	}
	.contents--txt__link:after {
		content: "";
		background: url("https://secure1.future-shop.jp/~casselini/feature/assets_item-tmpl/pc/img/icon-link.png");
		position: absolute;
		top: 6px;
		right: 4px;
		width: 14px;
		height: 12px;
	}
	.contents--heading {
		position: relative;
		font-size: 19px;
		font-weight: bold;
		/*margin-bottom: 23px;*/
		padding-left: 16px;
	}
	.contents--heading:before {
		content: "";
		background: url("https://secure1.future-shop.jp/~casselini/feature/assets_item-tmpl/pc/img/icon-heading.png");
		position: absolute;
		top: 12px;
		left: 0;
		width: 6px;
		height: 6px;
	}
	.staff--txt {
		position: relative;
		font-size: 16px;
		margin-bottom: 15px;
		padding-left: 80px;
		margin-top: 30px;
	}
	.staff--txt:before {
		content: "";
		background: url("https://secure1.future-shop.jp/~casselini/feature/2018/topics/pc/img/ic-staff01.png");
		position: absolute;
		top: -15px;
		left: 0;
		width: 66px;
		height: 66px;
	}

.staff--txt02 {
		position: relative;
		font-size: 16px;
		margin-bottom: 15px;
		padding-left: 80px;
		margin-top: 30px;
	}
	.staff--txt02:before {
		content: "";
		background: url("https://secure1.future-shop.jp/~casselini/feature/2018/topics/pc/img/ic-staff02.png");
		position: absolute;
		top: -15px;
		left: 0;
		width: 66px;
		height: 66px;
	}


	.contents--link {
		font-size: 12px;
		text-align: center;
		margin-top: 32px;
		text-decoration: underline;
	}
	.contents--link li {
		margin-bottom: 6px;
	}
	.contents--link li:last-child {
		margin-bottom: 0;
	}
	.contents--cap {
		font-size: 10px;
		text-align: center;
		margin-top: 20px;
	}
	.contents--event__overview {
		max-width: 600px;
		margin: 60px auto 0;
		padding: 0 185px;
	}
	.contents--event__overview__inner {
		font-size: 14px;
		line-height: 29px;
		background: #f7f7f7;
		padding: 48px 50px;
	}

	.author {
		margin: 65px 0 150px;
		padding: 0 105px;
	}
	.author--contents {
		display: flex;
		max-width: 970px;
		margin: 0 auto;
	}
	.author--pic {
		margin-right: 60px;
	}
	.author--profile {
		width: 78.7%;
		text-align: left;
	}
	.author--profile__name {
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 10px;
	}
	.author--profile__overview {
		font-size: 12px;
		line-height: 22px;
		margin-bottom: 12px;
		margin-bottom: 20px;
	}
	.author--profile__sns {
		font-size: 12px;
	}
	.author--profile__sns li {
		margin-top: 4px;
	}
	.author--profile__sns li:first-child {
		margin-top: 0;
	}

/* archive */
	.archive--ttl {
		font-size: 24px;
		font-weight: bold;
		margin-bottom: 40px;
	}
	.archive--tags {
		display: flex;
		justify-content: center;
		font-size: 13px;
		margin-bottom: 50px;
	}
	.archive--tags li {
		position: relative;
		margin-right: 16px;
		margin-left: 16px;
		cursor: pointer;
	}
	.archive--tags li:first-child {
		margin-left: 0;
	}
	.archive--tags li:last-child {
		margin-right: 0;
	}
	.archive--tags li:after {
		content: "|";
		position: absolute;
		top: -1px;
		right: -16px;
	}
	.archive--tags li:last-child:after {
		display: none;
	}
	.archive--tags__selected {
		border-bottom: 2px solid #000;
		padding-bottom: 8px;
	}
	.archive--items {
		display: flex;
		justify-content: space-between;
		max-width: 1110px;
		margin: 0 auto 50px;
	}
	.archive--items--item {
		position: relative;
		width: 23.8%;
		text-align: left;
	}
	.archive--items__hover {
		position: absolute;
		top: 0;
		left: 0;
		opacity: 0;
		transition: .3s;
	}
	.archive--items__hover:hover {
		opacity: 1;
	}
	.archive--items__pic {
		margin-bottom: 24px;
	}
	.archive--items__txt {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 20px;
	}
	.archive--items__date {
		font-size: 13px;
		color: #8f8f8f;
	}
	.archive--cv {
		opacity: 1;
		transition: .3s;
	}
	.archive--cv:hover {
		opacity: .7;
	}

  .ryumin {
    font-family: "a-otf-ryumin-pr6n","游明朝","Yu Mincho","ヒラギノ明朝 ProN W3",serif;
  }
  .contents--single-txt {
    font-size: 14px;
    letter-spacing: 0.1em;
    text-align: left;
    margin-bottom: 40px;
  }
  .contents--single-txt span {
    font-size: 22px;
  }
  .text-center {
    text-align: center;
  }
  .mb20 {
    margin-bottom: 20px;
  }
  .mb30 {
    margin-bottom: 30px;
  }




/*** スライドショー ***/

 /*=== 画像の表示エリア ================================= */
.slide {
  position   : relative;
  overflow   : hidden;
                    /* 画像のサイズに合わせて変更ください */
  width      : 450px;
  height     : 540px;
  margin     : auto;      /* サンプルは中央寄せの背景：白 */
  background : #fff;
}
 
 /*=== 画像の設定 ======================================= */
.slide img {
  display    : block;
  position   : absolute;
                      /* 画像のサイズを表示エリアに合せる */
  width      : inher it;
  height     : inherit;
  left       : -100%;
  animation  : slideAnime 9s ease infinite;
}
 
 /*=== スライドのアニメーションを段差で開始する ========= */
.slide img:nth-of-type(1) { animation-delay: 0s }
.slide img:nth-of-type(2) { animation-delay: 3s }
.slide img:nth-of-type(3) { animation-delay: 6s }
 
 /*=== スライドのアニメーション ========================= */
@keyframes slideAnime{
   0% { left: -100% }
   3% { left: 0     }
  30% { left: 0     }
  33% { left: 100%  }
 100% { left: 100%  }
}


.fix-btn{
  position:fixed; /*配置設定-fixed指定で追従*/
  z-index:1; //前面・背面位置の設定
  right:20px; //コンテンツの表示座標・位置※bottomも同様
  bottom:100px;
}

.left_txt {
	margin: 16px auto;
	text-align: center;
	display: block;
}
.left_txt .text {
	text-align: left;
	display: inline-block;
}