@charset "UTF-8";

/* スマホ */
@media (max-width: 767px) {

}

/*
@media (min-width: 576px) {}
*/

/* タブレット */
@media (min-width: 768px) {

}

/* PC
@media (min-width: 992px) {}

@media (min-width: 1200px) {}
*/

html[lang] {
	margin-top: 0 !important;/* wordpressにログインしていると表じされるツールバーによって起こるレイアウトの崩れを防止、セレクタに[lang]を指定しているのは、WordPressの指定に打ち勝つため */
}

body{
	/*font-family: "Montserrat", YuGothic,'Yu Gothic',‘游ゴシック’,sans-serif;*/
	font-family: "Montserrat", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, sans-serif;
    -webkit-text-size-adjust: 100%;
	margin: 0;
	background: #111;/* bodyの背景色が白色だと、Works、News、Columnsで記事を絞り込む遷移のときに、フラッシュのように一瞬白色が表示されるので、黒色にする */
	color: #111;
}

body, div, p, ul, ol, li, dl, dt, dd, table, tr, th, td, a, img,
h1, h2, h3, h4, h5, span, form {
	margin: 0;
	padding: 0;
}

li {
	list-style-type: none;
}

a {
	color: #406ab6;
	text-decoration: underline;
}

body:not(.isTouch) a:hover {
	text-decoration: none;
}

img {
	max-width: 100%;
	vertical-align: top;
	height: auto;
}

/* スマホ */
@media (max-width: 767px) {

    body {
		line-height: 1.6;
	}

}

/* スマホより大きいとき */
@media (min-width: 768px) {

    body {

	}

}

/* スマホ */
@media (max-width: 767px) {

    .onlyPc {
		display: none;
	}

}

/* スマホより大きいとき */
@media (min-width: 768px) {

    .onlySp {
		display: none;
	}

}

/*

書式 コピペ元

日本語 {
	//Androidでバグることがあるので、最後に要検証
	-webkit-font-feature-settings : "pwid";
			font-feature-settings : "pwid";
	letter-spacing: .1em;//pwidをやめたら、値を見直す

	//状況に応じて
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-smoothing: antialiased;

	//戻すときは
	-webkit-font-smoothing: subpixel-antialiased;
	-moz-osx-font-smoothing: auto;
	font-smoothing: auto;
}

英語 {
	line-height:1.2;
	letter-spacing: .012em;
}
*/

.text {
	font-size: 15px;
	line-height: 2;
	-webkit-font-feature-settings : "pwid";
			font-feature-settings : "pwid";
	letter-spacing: .1em;
}

/* ビジュアル的に使う大きな英字テキスト */
.bigEnText {
	font-weight: 600;
	line-height:1.1;/* experience designのデザインより */
	/*letter-spacing: .012em; aboutのデザインではいらない */
	/* 細く見せたくないので、アンチエイリアスは設定しない */
	-webkit-font-smoothing: subpixel-antialiased;
	-moz-osx-font-smoothing: auto;
	font-smoothing: auto;
}

.bigEnText_line {
	display: block;
}

/* スマホ */
@media (max-width: 767px) {

    .bigEnText {
		font-size: 40px;
	}

}

/* スマホより大きいとき */
@media (min-width: 768px) {

	.bigEnText {
		font-size: 6.79vw;/* 75px/960pxを微調整 */
	}
}

/* 1120px = 960px + 60px*2  */
@media (min-width: 1120px) {

	.bigEnText {
		font-size: 75px;

	}

}

.comingsoon {
	font-weight: 600;
	color: #7f7f7f;
}

/* スマホより大きいとき */
@media (min-width: 768px) {

	.comingsoon {

	}
}

/* 1120px = 960px + 60px*2  */
@media (min-width: 1120px) {

	.comingsoon {
		font-size: 36px;
	}

}

/* **************************
   青い「 ● ● 」アイコンのついた小さいタイトル
************************** */


.title {
	white-space: nowrap;
	color: #406ab6;
	display: block;
	line-height: 1;
	letter-spacing: .02em;
	font-weight: 600;/* boldより細く、nomalより細くしたい。レギュレーションで使えるのは400と600だけ。boldかつantialiasedに設定してみる */
	-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
			font-smoothing: antialiased;
}

.title:before {
	content: "● ●";/* colorプロパティでテキストと一緒に色を変更できるように、文字で罫線を作る */
	padding: 0 .6em 0 0;
	letter-spacing: 0;
	font-size: 8px;
	vertical-align: middle;
	position: relative;
	top: -.15em;
}

.title.white {
	color: #fff;
}

/* スマホ */
@media (max-width: 767px) {

    .title {
		font-size: 10px;
	}

}

/* スマホより大きいとき */
@media (min-width: 768px) {

	/*w960px と w840px コンテンツがあり、w840pxのコンテンツのタイトルに頭を揃える。w840pxのコンテンツでは使わない。 */
	.title_container {}

	.title_container .title {
		max-width: 840px;
		margin: 0 auto;
	}

    .title {
		font-size: 15px;
	}

}

/* **************************
   tagList
************************** */

.tagList {
	display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	color: #707070;
	letter-spacing: .012em;
}

.tag {
	white-space: nowrap;
	/* 細く見せたくないのでantialiasedにしない */
	-webkit-font-smoothing: subpixel-antialiased;
	-moz-osx-font-smoothing: auto;
	font-smoothing: auto;
}

.tag:after {
	content: "|";/* colorプロパティでテキストと一緒に色を変更できるように、文字で罫線を作る */
	display: inline-block;
	padding: 0 .78em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-smoothing: antialiased;
}

.tag:last-child:after {
	display: none;
}

@media all and (-ms-high-contrast:none){
	
	*::-ms-backdrop, .tagList {
		display: block;
	}

	*::-ms-backdrop, .tagList:after {
		content: '';
		display: block;
		clear: both;
	}

	*::-ms-backdrop, .tag {
		float: left;
	}

}

/* スマホ */
@media (max-width: 767px) {

    .tagList {
		font-size: 9px;
	}

}

/* スマホより大きいとき */
@media (min-width: 768px) {

    .tagList {
		font-size: 14px;/* 使う場所によって14pxのときと、13pxのときがあるので、その時上書きする */
	}

}

/* **************************
   丸い画像
************************** */

.circleImage {
	display: inline-block;
	vertical-align: middle;
	overflow: hidden;
	border-radius: 50%;
	transition: all 0.4s ease;
}

.circleImage_img {
	vertical-align: top;
	-webkit-transition:all 0.4s;
	-o-transition:all 0.4s;
	transition:all 0.4s;
}

.circleIcon {
	background: #fff;
	border-radius: 50%;
}

.circleIcon_inner {
	padding: 100% 0 0;
	position: relative;
}

.circleIcon_contents {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}

.circleImage_img {
	display: block;
}

/* **************************
   丸アイコンのついたリンク
************************** */

.circle-btn {
	text-decoration: none;
	height: 30px;
	display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
			align-items: center;
	line-height: 1;
	letter-spacing: .012em;
	padding-left: 37px;
	position: relative;
	cursor: pointer;
	color: #707070;
	vertical-align: top;
	font-weight: 600;/* boldより細く、nomalより細くしたい。レギュレーションで使えるのは400と600だけ。boldかつantialiasedに設定してみる */
	-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
			font-smoothing: antialiased;
	/*transition: all 0.25s ease-in-out;*/
	transition-property: all;
	transition-duration: .4s;
	/*easeOutCubic*/
	-webkit-transition-timing-function :  cubic-bezier(0.215, 0.61, 0.355, 1);
         -o-transition-timing-function :  cubic-bezier(0.215, 0.61, 0.355, 1);
            transition-timing-function :  cubic-bezier(0.215, 0.61, 0.355, 1);
}

.circle-btn:before {
	content: "";
	width: 24px;
	height: 24px;
	box-shadow: 0px 0px 0px 2px #707070;/* borderだとアニメーションが汚いので、box-shadowで代替*/
	border-radius: 50%;
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translate(-50%,-50%);
	/*transition: all 0.25s ease-in-out;*/
	transition-property: all;
	transition-duration: .4s;
	/*easeOutCubic*/
	-webkit-transition-timing-function :  cubic-bezier(0.215, 0.61, 0.355, 1);
         -o-transition-timing-function :  cubic-bezier(0.215, 0.61, 0.355, 1);
            transition-timing-function :  cubic-bezier(0.215, 0.61, 0.355, 1);
}

.circle-btn:after {
	content: "";
	width: 4px;
	height: 4px;
	background: #707070;
	border-radius: 50%;
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translate(-50%,-50%);
}

body:not(.isTouch) .circle-btn:hover,
.circle-btn.hover {
	padding-left: 43px;
}

body:not(.isTouch) .circle-btn:hover:before,
.circle-btn.hover:before {
	box-shadow: 0px 0px 0px 6px #707070;/* borderだとアニメーションが汚いので、box-shadowで代替*/
}

.circle-btn.circle-btn-right {
	padding-left: 0;
	padding-right: 37px;
	text-align: right;
}

.circle-btn.circle-btn-right:before {
	left: auto;
	right: -10px;
}

.circle-btn.circle-btn-right:after {
	left: auto;
	right: 10px;
}
body:not(.isTouch) .circle-btn.circle-btn-right:hover,
.circle-btn.circle-btn-right.hover {
	padding-left: 0;
	padding-right: 43px;
}

/* スマホ */
@media (max-width: 767px) {

    .circle-btn {
		font-size: 11px;
	}

}

/* スマホより大きいとき */
@media (min-width: 768px) {

	.circle-btn-container {
		margin-left: 60px; /*w960px と w840px コンテンツがあり、w840pxのコンテンツのリンクに頭を揃える。w840pxのコンテンツでは使わない。 */
	}

    .circle-btn {
		font-size: 13px;
	}

}

/* 背景が黒のとき */

.circle-btn.white {
	color: #fff;
}
.circle-btn.white:before {
	box-shadow: 0px 0px 0px 2px #fff;
}
.circle-btn.white:after {
	background: #fff;
}
body:not(.isTouch) .circle-btn.white:hover:before,
.circle-btn.white.hover:before {
	box-shadow: 0px 0px 0px 6px #fff;
}

/* 背景がグレーのとき */

.circle-btn.black {
	color: #111;
}
.circle-btn.black:before {
	box-shadow: 0px 0px 0px 2px #111;
}
.circle-btn.black:after {
	background: #111;
}
body:not(.isTouch) .circle-btn.black:hover:before,
.circle-btn.black.hover:before {
	box-shadow: 0px 0px 0px 6px #111;
}

/* **************************
   zoom リンク
************************** */

.zoomLink {
	position: relative;/*afterの起点*/
	outline: none;
}

.zoomLink:after {
	content: '';
	display: block;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: #fff url(/images/icon_zoom.svg) center no-repeat;
	background-size: 22px 24px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

/* **************************
   width100%の青い帯状のボタン
************************** */


.blockButton {
	display: block;
	text-decoration: none;
	background: #406ab6;
	color: #fff;
	cursor: pointer;
	transition: all 0.15s ease-out;
}

.blockButton_inner {
	max-width: 960px;
	margin: 0 auto;
	display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}

.blockButton_text {
	font-size: 15px;
	line-height: 1.2;/* 1にしたいけど、1にするとIEで日本語の下が切れる */
	/*padding: .05em 0 .25em;*/
	padding: 0 0 .1em;
    border-bottom: 1px solid #fff;
	letter-spacing: .12em;
	transition: all 0.15s ease-out;
}

body:not(.isTouch) .blockButton:hover {
	background: #578ced;
}

/* 英字のみが確定しているボタン。テキストが日本語の時は、このクラスは指定しない。 */
.blockButton.backButton .blockButton_text,
.blockButton.moreButton .blockButton_text,
.blockButton.enTextButton .blockButton_text {
	letter-spacing: .012em;
	/* 細く見せたくないのでantialiasedにしない */
	-webkit-font-smoothing: subpixel-antialiased;
	-moz-osx-font-smoothing: auto;
	font-smoothing: auto;
}

/* スマホ */
@media (max-width: 767px) {

    .blockButton_inner {
		min-height: 117px;
	}

	.blockButton_text {
		font-size: 11px;
	}

}

/* スマホより大きいとき */
@media (min-width: 768px) {

    .blockButton_inner {
		min-height: 190px;
	}

	.blockButton_text {
		font-size: 15px;
	}

}

@media all and (-ms-high-contrast:none) and (max-width: 767px){
	.blockButton_inner {
		height: 117px;/* IE11でaline-items:centerが聞かない
		 */
	}
}

@media all and (-ms-high-contrast:none) and (min-width: 768px){
	.blockButton_inner {
		height: 190px;/* IE11でaline-items:centerが聞かない
		 */
	}
}

/* **************************
   次へ 前へ ボタン
************************** */

.nextPrev {
	background: #111;
	color: #fff;
}

.nextPrev a {
	text-decoration: none;
	color: inherit;
}

.nextPrev_inner {
	max-width: 1180px;
	margin: 0 auto;
}

.nextPrev_text {
	display: block;
	line-height: 1.2em;/* 1にしたいけど、1にするとIEで日本語の下が切れる */
}

.nextPrev_next {
	text-align: right;
}

.nextPrev_next:after {
	content: '';
	display: block;
	clear: both;
}

.nextPrev_next .circle-btn {
	float: right;
}

/* スマホ */
@media (max-width: 767px) {

    .nextPrev {
		padding: 0 6.25%;/* 20px/320px */
	}

	.nextPrev_inner {
		margin: 0 auto;
		padding: 5px 0;
		display: block;
	}

	.nextPrev_text {
		font-size: 13px;
		margin: 0 0 18px;
	}

	.nextPrev_next{
		padding:25px 0;
		display:block;
	}

	.nextPrev_prev{
		padding:25px 0;
		display:block;
		border-top:solid 1px #707070;
	}

	.nextPrev_next.hidden + .nextPrev_prev {
		border: none;
	}

	.nextPrev_next.hidden,
	.nextPrev_prev.hidden {
		display: none;
	}

}

/* スマホより大きいとき */
@media (min-width: 768px) {

	.nextPrev {
		padding: 0 50px;
	}

	.nextPrev_inner {
		padding: 62px 0;
	}

	.nextPrev_inner {
		max-width: 1180px;
		margin: 0 auto;
		padding: 62px 0;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
			-ms-flex-pack: justify;
				justify-content: space-between;
		-webkit-box-align: center;
			-ms-flex-align: center;
				align-items: center;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: reverse;
			-ms-flex-direction: row-reverse;
				flex-direction: row-reverse;
	}

	.nextPrev_text {
		font-size: 15px;
		margin: 0 0 20px;
	}

	.nextPrev_next.hidden,
	.nextPrev_prev.hidden {
		visibility: hidden;
	}

}


/* **************************
   直線から矢印に変形する矢印
************************** */

.lineArrow {
	display: block;
	margin: 0 auto;
    position: relative;
    background: #111;
    transition: transform 0.3s ease;
}

.lineArrow.white {
	background: #fff;
}

.lineArrow:before,
.lineArrow:after {
	content: "";
    position: absolute;
	background: inherit;
	transition: transform 0.3s ease;
}

body:not(.isTouch) .lineArrow:hover:before,
body:not(.isTouch) .lineArrow:hover:after,
.lineArrow.hover:before,
.lineArrow.hover:after {

}

.lineArrow_left,
.lineArrow_right {
	width: 80px;
    height: 1px;
}

.lineArrow_left:before,
.lineArrow_left:after,
.lineArrow_right:before,
.lineArrow_right:after {
	width: 10px;
	height: 1px;
}

.lineArrow_left:before,
.lineArrow_left:after {
	left: 0;
}

.lineArrow_right:before,
.lineArrow_right:after {
	right: 0;
}

body:not(.isTouch) .lineArrow_left:hover:before,
body:not(.isTouch) a:hover > .lineArrow_left:before,
.lineArrow_left.hover:before {
    transform: translate(-1px, -3.5px) rotate(-45deg);
}

body:not(.isTouch) .lineArrow_left:hover:after,
body:not(.isTouch) a:hover > .lineArrow_left:after,
.lineArrow_left.hover:after {
    transform: translate(-1px, 3.5px) rotate(45deg);
}

body:not(.isTouch) .lineArrow_right:hover:before,
body:not(.isTouch) a:hover > .lineArrow_right:before,
.lineArrow_right.hover:before {
    transform: translate(1px, -3.5px) rotate(45deg);
}

body:not(.isTouch) .lineArrow_right:hover:after,
body:not(.isTouch) a:hover > .lineArrow_right:after,
.lineArrow_right.hover:after {
    transform: translate(1px, 3.5px) rotate(-45deg);
}


.lineArrow_up,
.lineArrow_down {
	width: 1px;
    height: 80px;
}

.lineArrow_up:before,
.lineArrow_up:after,
.lineArrow_down:before,
.lineArrow_down:after {
	width: 1px;
	height: 10px;
}

.lineArrow_up:before,
.lineArrow_up:after {
	top: 0;
}

.lineArrow_down:before,
.lineArrow_down:after {
	bottom: 0;
}

body:not(.isTouch) .lineArrow_up:hover:before,
body:not(.isTouch) a:hover > .lineArrow_up:before,
.lineArrow_up.hover:before {
    transform: translate(-3.5px, -1px) rotate(45deg);
}

body:not(.isTouch) .lineArrow_up:hover:after,
body:not(.isTouch) a:hover > .lineArrow_up:after,
.lineArrow_up.hover:after {
    transform: translate(3.5px, -1px) rotate(-45deg);
}

body:not(.isTouch) .lineArrow_down:hover:before,
body:not(.isTouch) a:hover > .lineArrow_down:before,
.lineArrow_down.hover:before {
    transform: translate(-3.5px, 1px) rotate(-45deg);
}

body:not(.isTouch) .lineArrow_down:hover:after,
body:not(.isTouch) a:hover > .lineArrow_down:before,
.lineArrow_down.hover:after {
    transform: translate(3.5px, 1px) rotate(45deg);
}

/* **************************
   カスタムカーソル
************************** */

body:not(.isTouch) * {
	/*cursor: none !important;*/
	/*上記はChomeは許してくれないらしい
	Problem: Chrome on Windows doesn’t like cursor: none or 100% transparent images for custom cursors. Solution: create your custom cursor image at 1% opacity.
	とのこと（ https://www.icelab.com.au/notes/invisible-cursors-in-google-chrome-with-css ）*/
	cursor: url(/images/cursor.png), none !important;
}

body:not(.isTouch) .cursor span{
    position: absolute;
    height: 15px;
    width: 15px;
    border-radius: 50%;
	transform: translateX(-50%) translateY(-50%);
	pointer-events: none;/* span要素のマウスイベントを無視する。これを指定しないと何もクリックできなくなる */
}

body:not(.isTouch) .cursor span:nth-child(1){ background-color: #6592e7; z-index: 10001; }
body:not(.isTouch) .cursor span:nth-child(2){ background-color: #ccc; z-index: 10000; }

/* **************************
   sns
************************** */

.sns {
	color: #fff;
	display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}

.sns.black {
	color: #111;
}

.sns a {
	text-decoration: none;
	color: inherit;
	display: block;
}

.sns li {
	margin-left: 15px;
}

.sns li:first-child {
	margin-left: 0;
}

.sns .twitter a,
.sns .facebook a {
	display: -webkit-box;
    display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	border-radius: 50%;
	transition: all .4s;
}

.sns .twitter a,
.sns .facebook a {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	font-size: .9em;
}

.sns .share_alt a {
	padding:6px 0;
}

body:not(.isTouch) .sns .twitter a:hover,
body:not(.isTouch) .sns.black .twitter a:hover {
	box-shadow: 0 0 0 6px #00aced;/* borderだとアニメーションが汚いので、box-shadowで代替*/
	color:#00aced;
}

body:not(.isTouch) .sns .facebook a:hover,
body:not(.isTouch) .sns.black .facebook a:hover {
	box-shadow: 0 0 0 6px  #3b5998;/* borderだとアニメーションが汚いので、box-shadowで代替*/
	color:#3b5998;
}

/* スマホ */
@media (max-width: 767px) {

	.sns .twitter a,
	.sns .facebook a {
		box-shadow: 0px 0px 0px 1px #fff;/* borderだとアニメーションが汚いので、box-shadowで代替*/
	}

	.sns.black .twitter a,
	.sns.black .facebook a {
		box-shadow: 0px 0px 0px 1px #707070;/* borderだとアニメーションが汚いので、box-shadowで代替*/
	}

}

/* スマホより大きいとき */
@media (min-width: 768px) {

	.sns .twitter a,
	.sns .facebook a {
		box-shadow: 0px 0px 0px 2px #fff;/* borderだとアニメーションが汚いので、box-shadowで代替*/
	}

	.sns.black .twitter a,
	.sns.black .facebook a {
		box-shadow: 0px 0px 0px 1px #707070;/* borderだとアニメーションが汚いので、box-shadowで代替*/
	}

}

/* **************************
  フィルターメニュー
************************** */

#wrapper [data-sooth-role="filterItem"].hide {
	display: none; /* そのほかのアニメーションより優先する */
}

#wrapper [data-sooth-role="filterItem"].hidden {
	display: none; /* そのほかのアニメーションより優先する */
}

/* **************************
  スライダーJS（swiper.js）
  最初から指定してあるスタイルを上書きするためにbodyからセレクタを始める
************************** */

body .swiper-wrapper {

}

body .swiper-slide {

}

body .swiper-button-prev,
body .swiper-button-next {
	display: block;
	text-decoration: none;
	background: none;
	cursor: pointer;
	position: absolute;
}

body .swiper-button-prev {
	left: 0;
}

body .swiper-button-next {
	right: 0;
}

body .swiper-button-prev .lineArrow_left,
body .swiper-button-next .lineArrow_right {
	width: 100%;
	position: absolute;
	top: 50%;
	background: #707070;
}

body:not(.isTouch) .swiper-button-prev:hover .lineArrow_left {
	transform: translate(10px,0);
}

body:not(.isTouch) .swiper-button-next:hover .lineArrow_right {
	transform: translate(-10px,0);
}

body .swiper-pagination-bullet {
	width: 12px;
	height: 12px;
	box-sizing: border-box;
	border: 1px solid #707070;
	background-color: rgba(112,112,112,1);/* #707070 */
	opacity: 1;
	transition: background-color 0.2s ease;
}

body .swiper-pagination-bullet:first-child {
	margin-left: 0;
}

body .swiper-pagination-bullet-active {
	background-color: rgba(112,112,112,0);
}

/* スマホ */
@media (max-width: 767px) {

	body .swiper-button-prev,
	body .swiper-button-next {
		width: 30px;
		height: 30px;
		margin-top: -15px;
	}

	body .swiper-pagination-bullet {
		margin-left: 20px;
	}

	body .swiper-pagination-bullet:first-child {
		margin-left: 0;
	}

}

/* スマホより大きいとき */
@media (min-width: 768px) {

	body .swiper-button-prev,
	body .swiper-button-next {
		width: 40px;
		height: 40px;
		margin-top: -20px;
	}

	body .swiper-pagination-bullet {
		margin-left: 15px;
	}

	body .swiper-pagination-bullet:first-child {
		margin-left: 0;
	}

}

@media (min-width: 1200px) {

	body .swiper-button-prev,
	body .swiper-button-next {
		width: 80px;
		height: 80px;
		margin-top: -40px;
	}

}

/* **************************
   jsプラグイン調整
************************** */

/* Magnific-Popup */
.mfp-bg {
	z-index: 5000;
}
.mfp-wrap {
	z-index: 5001;
}

/* overlay at start */
.mfp-fade.mfp-bg {
	opacity: 0;
	-webkit-transition: all 0.15s ease-out;
	-moz-transition: all 0.15s ease-out;
	transition: all 0.15s ease-out;
  }
  /* overlay animate in */
  .mfp-fade.mfp-bg.mfp-ready {
	opacity: 0.8;
  }
  /* overlay animate out */
  .mfp-fade.mfp-bg.mfp-removing {
	opacity: 0;
  }

  /* content at start */
  .mfp-fade.mfp-wrap .mfp-content {
	opacity: 0;

	-webkit-transition: all 0.15s ease-out;
	-moz-transition: all 0.15s ease-out;
	transition: all 0.15s ease-out;
  }
  /* content animate it */
  .mfp-fade.mfp-wrap.mfp-ready .mfp-content {
	opacity: 1;
  }
  /* content animate out */
  .mfp-fade.mfp-wrap.mfp-removing .mfp-content {
	opacity: 0;
  }

/* **************************
   layout
************************** */

/* ページ内スクロールをしたときfixedのヘッダーの高さ分ズラすための要素 */
.container {

}

.block_bgBlack {
	background: #111;
	color: #fff;
	/* 背景が黒いときはantialiased。戻したい時は個別に戻す。 */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-smoothing: antialiased;
}

.block_bgBlack a {
	color: inherit;
}

.block:before,
.block:after {
	content: '';
	display: table;/* marginの相殺防止 */
	width: 100%;
}

.block:after {
	clear: both;
}

.inner {
	max-width: 960px;
	margin-left: auto;
	margin-right: auto;
}

.contents {
	width: 960px;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}

/* スマホ */
@media (max-width: 767px) {

    .block {
        padding: 0 6.25%;/* 20px/320px想定 */
    }

}

/* スマホより大きいとき */
@media (min-width: 768px) {

    .block {
        padding: 0 60px;
    }

}

/********
fixedSideNav
*********/

.fixedSideNav {
	position: absolute;
	/* transform: translate(0,-50%); */
	text-align: right;
	color: #707070;
	font-size: 12px;
	z-index: 4000;
	top: calc(100vh + 20px);
}

.fixedSideNav.active {
	position: fixed;
	top: auto;
	bottom: 15px;
}

.fixedSideNav.active.onFooter {
	position: absolute;
	bottom: 'auto';
}



.fixedSideNav li {
	margin: 5px 0;
}

.fixedSideNav a {
	display: block;
	text-decoration: none;
	color: inherit;
	position: relative;
	padding-right: 28px;
}

.fixedSideNav a:before {
	content: "";
	width: 12px;
	height: 12px;
	box-shadow: 0px 0px 0px 0px #707070;/* borderだとアニメーションが汚いので、box-shadowで代替*/
	border-radius: 50%;
	position: absolute;
	right: 4px;
	top: 50%;
	transform: translate(-50%,-50%);
	transition: all 0.25s ease-in-out;
}

.fixedSideNav a:after {
	content: "";
	width: 2px;
	height: 2px;
	background: #707070;
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translate(-50%,-50%);
}

body:not(.isTouch) .fixedSideNav a:hover:before,
.fixedSideNav a.active:before {
	box-shadow: 0px 0px 0px 2px #707070;/* borderだとアニメーションが汚いので、box-shadowで代替*/
}

.fixedSideNav a span {
	display: block;
	opacity: 0;
	transform: translate(0,0);
	transition: all 0.25s ease-in-out;
}

body:not(.isTouch) .fixedSideNav a:hover span,
.fixedSideNav a.active span  {
	opacity: 1;
	transform: translate(-4px,0);
}

/* スマホ */
@media (max-width: 767px) {

    .fixedSideNav {
		right: 0;
		display: none;
	}

	.fixedSideNav a span {
		visibility: hidden;
	}

}

/* スマホより大きいとき */
@media (min-width: 768px) {

    .fixedSideNav {
		right: 72px;
	}

}