@charset "utf-8";

/*
 * PC common
 */

#wrapper {
	font-size: 1.3rem;
}

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

.inner {
	width: 960px;
	margin: 0 auto;
}

/* --- top page */

section h2 {
	font-size: 2.8rem;
	text-align: center;
	margin: 0 0 24px;
}
section .mask > h2 {
	background: rgba(255, 255, 255, .5);
	padding: 32px;
	color: #fff !important;
	position: relative;
	text-shadow: 1px 1px 3px #000;
}

section .mask > h2::before {
    position: absolute;
    bottom: -32px;
    left: 50%;
    width: 0;
    height: 0;
    content: '';
    border-top: 0;
	border: 16px solid transparent;
	border-top: 16px solid rgba(255, 255, 255, .5);
    margin: 0 0 0 -16px;
}

section .inner { padding: 56px 0; }
section .inner + .inner { padding: 24px 0 56px; }

section article.inner h3 {
	font-size: 2.2rem;
	text-align: center;
	margin: 0 0 16px;
}

/* --- underlayer */

article.whbg > h2,
article.nobg > h2 {
	font-size: 2.4rem;
	text-align: center;
	padding: 16px 0;
	margin: 0 auto 24px;
}
article.whbg > h2 {
	border-top: 1px #ccc dotted;
	border-bottom: 1px #ccc dotted;
}
article.nobg > h2 {
	border-top: 1px #fff dotted;
	border-bottom: 1px #fff dotted;
}

article.whbg {
	padding: 32px 0;
}
article.whbg + article.whbg {
	padding: 0 0 32px;
}
article.nobg {
	padding: 32px 0;
}
article.nobg + article.nobg {
	padding: 0 0 32px;
}

.add-content-home { padding: 12px 0 20px; }

.article-contents p {
	font-size: 1.3rem;
	line-height: 2.4;
}
.article-contents p + h2 {
	margin: 32px 0 24px;
}

article .inner > div > p {
	font-size: 1.3rem;
	line-height: 2.4;
}

/* ----------------------------- hover effect */

/* rotateY */
figure.effect-rotateY {
	position: relative;
	overflow: hidden;
	width: 100%;
}
figure.effect-rotateY figcaption {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	/* 左右天地中央 */
	display: -webkit-flex; /* Safari用 */
	display: flex;
	-webkit-justify-content: center; /* Safari用 */
	justify-content: center;
	-webkit-align-items: center; /* Safari用 */
	align-items: center;
	/*  */
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.7);
	-webkit-transform: rotateY(180deg);
	transform: rotateY(180deg);
	-webkit-transition: .5s;
	transition: .5s;
	opacity: 0;
}
figure.effect-rotateY:hover figcaption {
	-webkit-transform: rotateY(0);
	transform: rotateY(0);
	opacity: 1;
}

/* rotateX */
figure.effect-rotateX {
	position: relative;
	overflow: hidden;
	width: 100%;
}
figure.effect-rotateX figcaption {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	/* 左右天地中央 */
	display: -webkit-flex; /* Safari用 */
	display: flex;
	-webkit-justify-content: center; /* Safari用 */
	justify-content: center;
	-webkit-align-items: center; /* Safari用 */
	align-items: center;
	/*  */
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.7);
	-webkit-transform: rotateX(-180deg);
	transform: rotateX(-180deg);
	-webkit-transition: .5s;
	transition: .5s;
	opacity: 0;
}
figure.effect-rotateX:hover figcaption {
	-webkit-transform: rotateX(0);
	transform: rotateX(0);
	opacity: 1;
}

/* coomon */
figure img { vertical-align: top; }
figure.effect-rotateY h3,
figure.effect-rotateX h3 {
	color: #fff;
	text-align: center;
	font-size: 1.4rem !important;
	margin: 0 !important;
}
figure.effect-rotateY p,
figure.effect-rotateX p {
	color: #fff;
	text-align: center;
}

/* ----------------------- content float use flex */
/* ----------- flat use flex (horizon) */

.flat-set-flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row; //row-reverse
	flex-wrap: nowrap;
	-webkit-box-pack: start;
		-ms-flex-pack: start;
			justify-content: flex-start;
		-webkit-box-align: center;
			-ms-flex-align: center;
				align-items: center;
    box-sizing: border-box;
}
.flat-set-flex > figure {
   width:300px;
}
.flat-set-flex > div {
   -webkit-box-flex: 1;
	-ms-flex: 1;
		flex: 1;
	padding: 0 4em 0 0;
}

/* img left */
.flat-set-flex.reverse {
    -webkit-box-direction: normal;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
}
.flat-set-flex.reverse > div {
	padding: 0 0 0 4em;
}

/* ----------- pileup use flex (vertical) */

.pileup-set-flex {
   display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    box-sizing: border-box;
}
.pileup-set-flex > figure {
   text-align:center;
   margin: 0 0 24px;
}
.pileup-set-flex > figure img {
	width: auto;
	max-width: 960px;
	height: auto;
}
.pileup-set-flex > div {
	padding: 0 0 2em;
}
/* img upper */
.pileup-set-flex.reverse {
    -webkit-box-direction: normal;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
}
.pileup-set-flex.reverse > div {
	padding: 1em 0 0;
}

/* -------- common */

.flat-set-flex > div > p,
.pileup-set-flex > div > p {
	font-size: 1.3rem;
	line-height: 2.4;
}
.flat-set-flex > figure img,
.pileup-set-flex > figure img {
	vertical-align: top;
}

/* home */

.flat-set-flex > div > h2 {
	font-size: 2.0rem;
	text-align: left;
	margin: 0 0 24px;
}
.flat-set-flex > div > h2::before,
.flat-set-flex > div > h2::after {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 3.2rem;
	position: relative;
	top: 0.25em;
}
.flat-set-flex > div > h2::before {
    content: "\0201C";
	margin: 0 8px 0 0;
}
.flat-set-flex > div > h2::after {
    content: "\0201D";
	margin: 0 0 0 8px;
}

/* ----------------------- float use flex */

/* flex, justify, space-between */
.flex-space-between {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack:  justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-flex-wrap: wrap;
    	-ms-flex-wrap:wrap;
        	flex-wrap:wrap;
	width: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* flex, center, wrap */
.flex-center {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
	-webkit-flex-wrap: wrap;
    	-ms-flex-wrap:wrap;
        	flex-wrap:wrap;
	width: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
    box-sizing: border-box;
}

.inner.flex-space-between,
.inner.flex-center {
	width: 960px;
	margin: 0 auto;
}

.item2 > * {
	width: 50%;
}
.item3 > * {
	width: 30%;
}
.item4 > * {
	width: 25%;
}
.item5 > * {
	width: 20%;
}
.item6 > * {
	width: 16%;
}
.item7 > * {
	width: 14%;
}

/* home items list */
.flex-center li { 
	padding: 12px;
}
.flex-center li a { 
	display: block;
}
.flex-center figcaption h3 {
	font-size: 1.4rem;
	color: #fff;
}
.flex-center figcaption-1 h3 {
	font-size: 1.4rem;
	color: #000;
}
.flex-center figure + p {
	color: inherit;
	font-size: 1.1rem;
	line-height: 1.4;
	padding: 5px 0 0;
}

/* ----------------------- slider multiple-item */

.slider.multiple-item {
	padding: 0 45px;
}

section article .slider.multiple-item {
	padding: 0 45px 32px;
}

/* home items list */
.slider.multiple-item li { 
	padding: 12px;
}
.slider.multiple-item li a { 
	display: block;
}
.slider.multiple-item figcaption h3 {
	font-size: 1.4rem;
	color: #fff;
}
.slider.multiple-item figure + p {
	color: inherit;
	font-size: 1.1rem;
	line-height: 1.4;
	padding: 5px 0 0;
}

/* ----------------------- ul archive list use */

ul.archive-list {
	width: 960px;
	margin: 0 auto;
}
ul.archive-list > li {
	text-align: center;
	margin: 0 0 10px;
}
ul.archive-list li a {
	display: table;
	width: 100%;
	border: 1px #ccc solid;
	padding: 12px 32px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
    box-sizing: border-box;
	position:relative;
}
ul.archive-list li a::after {
	font-family:"FontAwesome";
	content: "\f138";
	font-size: 2.0rem;
	position: absolute;
	top: 50%;
	margin-top: -10px;
}
ul.archive-list li a figure,
ul.archive-list li a h3 {
	display: table-cell;
	vertical-align: middle;
}
ul.archive-list li a figure {
	width: 120px;
}
ul.archive-list li a h3 {
	font-size: 1.6rem;
	text-align: left;
	padding: 0 50px;
}

/* ----------------------- float use table */

.innertable {
	display: table;
	width: 960px;
	margin: 0 auto;
}

.tablefixed {
	display: table;
	table-layout:fixed;
	width: 100%;
}
.table-nonefixed {
	display: table;
	width: 100%;
}

.dltable > dl {
	display: table;
	width: 100%;
	border-bottom: 1px #ccc solid;
}
.dltable > dl:first-child {
	border-top: 1px #ccc solid;
}

.innertable > *,
.tablefixed > *,
.table-nonefixed > *,
.dltable dl > * {
	display: table-cell;
	vertical-align: top;
}

.dltable dl > dt,
.dltable dl > dd {
	font-size: 1.3rem;
	line-height: 1.6;
}
.dltable dl > dt {
	width: 25%;
	padding: 0.75em 1em;
}
.dltable dl > dd {
	padding: 0.75em 1em;
}