@charset "utf-8";

/*
 * Smart Device common
 */

#wrapper {
	font-size: 1.3rem;
	line-height: 1.8;
}

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

.inner { padding: 0 16px; }

.whbg {
	background: #fff;
}

section h2 {
	font-size: 2.0rem;
	line-height: 1.4;
	text-align: center;
	margin: 0 0 16px;
}
section .mask > h2 {
	color: #fff;
	background: rgba(255, 255, 255, .5);
	padding: 16px;
	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: 32px 16px; }
section .inner + .inner { padding: 24px 16px; }

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

/* --- underlayer */

article.whbg > h2,
article.nobg > h2 {
	font-size: 1.6rem;
	text-align: center;
	padding: 12px 0;
	margin: 0 16px 16px;
}
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: 24px 0;
}
article.nobg {
	padding: 32px 0;
}

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

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

/* ----------------------------- hover effect */
/* figure.effect-rotateY, figure.effect-rotateX */


/* ----------------------- content float use flex */
/* ----------- flat use flex */

/* ----------- pileup use flex */

.flat-set-flex,
.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;
}
.flat-set-flex > figure,
.pileup-set-flex > figure {
   text-align:center;
}
.flat-set-flex > div,
.pileup-set-flex > div {
	margin: 0 0 20px;
}

/* img upper */
.flat-set-flex.reverse,
.pileup-set-flex.reverse {
    -webkit-box-direction: normal;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
}
.flat-set-flex.reverse > div,
.pileup-set-flex.reverse > div {
	margin: 0;
}
.flat-set-flex.reverse > figure,
.pileup-set-flex.reverse > figure {
	margin: 0 0 20px;
}

/* common */
.flat-set-flex > div > p,
.pileup-set-flex > div > p {
	font-size: 1.3rem;
	line-height: 2.4;
}
.flat-set-flex > figure img {
	width: 100%;
	max-width: 320px;
	height: auto;
	vertical-align: top;
}
.pileup-set-flex > figure img {
	width: 100%;
	max-width: 960px;
	height: auto;
	vertical-align: top;
}

/* home */

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


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

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

/* flex, justify, space-between */

/* flex, center, wrap */

.flex-center {
	text-align: center;
}

.flex-center > * {
	display: inline-block;
	padding: 10px 16px;
	vertical-align: top;
}
.flex-center a {
	display: block;
}
.flex-center figure {
	width: 200px;
	overflow: hidden;
	position: relative;
}
.flex-center figure img{
	width: 200px;
	height: auto;
	vertical-align: top;
}
.flex-center figure 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(255,255,255,.7);
	padding: 0 !important;
	margin: 0 !important;
}
.flex-center figure figcaption h3 {
	color: #556677;
	font-size: 1.4rem !important;
	margin: 0 !important;
	text-align: center;
}
.flex-center figure figcaption h3::before {
	font-family: 'FontAwesome';
	content: "\f138";
	margin: 0 2px 0 0;
}
.flex-center figure + p {
	font-size: 1.1rem;
	line-height: 1.4;
	padding: 5px 0 0;
	width: 200px;
}

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

@media (max-width: 480px) {
	section article .slider.multiple-item {
		padding: 0 60px;
	}
}
@media (min-width: 481px) {
	.slider.multiple-item {
		padding: 0 35px;
	}
}

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

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

ul.archive-list { margin: 0 16px; }
ul.archive-list > li {
	text-align: left;
	margin: 0 0 10px;
}
ul.archive-list li a {
	display: block;
	border: 1px #ccc solid;
	padding: 12px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
    box-sizing: border-box;
}
ul.archive-list li a:hover {
	background: rgba(0,0,0,.6);
	color: #fff;
}
ul.archive-list li a figure {
	display: inline-block;
	width: 120px;
	vertical-align:middle;
}
ul.archive-list li a h3 {
	display: inline-block;
	font-size: 1.4rem;
	margin: 0 0 0 10px;
	vertical-align:middle;
}
ul.archive-list li a h3::after {
	font-family:"FontAwesome";
	content: "\f138";
	margin: 0 0 0 4px;
}

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

.innertable {

}

.tablefixed {

}

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

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

.dltable dl > dt,
.dltable dl > dd {
	font-size: 1.3rem;
	line-height: 1.6;
}
.dltable dl > dt {
	padding: 0.75em 0;
	border-bottom: 1px #ccc dotted;
}
.dltable dl > dd {
	padding: 0.75em 0;
}