/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
	display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}@import url('https://use.fontawesome.com/releases/v5.6.1/css/all.css');

/* #009688 #00897B #4DD0E1 #EFEFEF #757575 */
*{margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; word-break: break-all; -webkit-appearance: none; -moz-appearance: none;}
html {
    scrollbar-color: #00897B #f5f5f5;
    scrollbar-width: thin;
}
body {
	margin: 0px;
	padding: 0px;
	font-family: 'メイリオ', 'Meiryo','ＭＳ ゴシック','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3', sans-serif;
	font-size: 15px;
	line-height: 2;
	letter-spacing: 0.08em;
	color: #111111;
	background-color: #FFFFFF;
	-webkit-text-size-adjust: none;
	scroll-padding-top: 15vh;
	-webkit-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;
	text-align: justify;
	text-justify: inter-ideograph;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}/* external css: flickity.css */

ul {list-style-type: none;}
ol {padding-left: 40px; padding-bottom: 15px;}
img {margin: 0; padding: 0; border: none; max-width: 100%; height: auto; vertical-align: middle;}
img.b {border: solid #EFEFEF 1px;}
img a:hover {opacity: 0.6; transition-duration: 0.3s;}
.clear { clear:both;}
a {text-decoration: underline; transition: 0.2s; color: #111;}
a:hover {color: #009688;}
p {padding: 5px 20px;}
main {padding: 0; margin: 0 auto; max-width: 1000px; background-color: #FFF; position: relative;}
#container {max-width: 800px; padding: 0 20px 20px; margin: 0 auto;}
h2 {font-size: 1.2em; font-weight:bold; border-bottom: 3px solid #f5f5f5; position: relative; padding: 20px 0 0; margin: 1em 0; line-height: 1.5em;}
h2:after {content: ''; display: block; width: 100px; height: 3px; background: #009688; position: relative; top: 3px;}
h3 {font-weight:bold; padding: 15px 15px 0; margin: 1em 0 1em; line-height: 1.6em;}
h4 {font-weight:bold;}
.c {text-align: center;}

::-webkit-scrollbar {width: 10px;}
::-webkit-scrollbar-track {/*背景色*/background-color: #f5f5f5;}
::-webkit-scrollbar-thumb {/*ドラッグ部分*/background-color: #009688; box-shadow: inset 0 0 6px #00897B;}
.wrap {max-width: 1300px; background-color: #fff; margin: 0 auto; min-height: 100vh;}
/* header */
header h1 {font-size: 2.0rem; text-align: center; font-weight: 100; position: relative; margin: 0; padding: 4vh 0; font-family: sans-serif;}
header h1 span {display: block; font-weight: 100; font-size: small; text-align: center; margin:-10px 0 0;}
header a {text-decoration: none;}
header a:hover {color: #111;}
/* bread crumb */
.breadcrumb {margin: 0; padding: 0 0 20px; list-style: none;}
.breadcrumb li {position: relative; display: inline-block; list-style: none; font-weight: bold;}
.breadcrumb li a {display: inline-block; text-decoration: none;}
.breadcrumb li::after {content: '>'; font-weight: 100;}
.breadcrumb li:last-child::after {display: none;}
ol.breadcrumb + h2 {padding-top: 0;} 
/* footer */
footer {clear: both; margin: 0; padding: 20px 0 0; text-align: center;}
footer ul li {display: inline; margin: 0 5px;}
.arrow{
    position: relative;
    display: inline-block;
    padding: 0 0 0 15px;
	margin: 0 0 10px 0;
    color: #000;
    vertical-align: middle;
    text-decoration: none;
    font-size: 15px;
}
.arrow::before,
.arrow::after{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    content: "";
    vertical-align: middle;
}
.arrow::before{
    left: 4px;
    box-sizing: border-box;
    width: 4px;
    height: 4px;
    border: 4px solid transparent;
    border-left: 4px solid #111;
}

.copyright {font-size: 0.8em;}
/* pagetop button */
.pagetop {width: 50px; height: 50px; bottom: 20px; right: 20px; position: fixed;}
.pagetop a {height: 50px; border-radius: 25px; background: #00897B; display: block; text-align: center; line-height: 50px;}
.pagetop a:hover {color: #EFEFEF; background: #4DD0E1;}
.pagetop a::before {content: ""; width: 10px; height: 10px; border-top: solid 2px #EFEFEF; border-right: solid 2px #EFEFEF; transform: rotate(-45deg); position: absolute; right: 20px; bottom: 18px; z-index: 10;}
/* publications */
.public {display: flex; flex-flow: row wrap; justify-content: space-around; align-items: flex-start; align-content: flex-start;}
.public a {text-decoration: none;}
.public section {width: 200px; padding: 0 10px 20px;}
.public section span {display: block}
.public section .img {overflow:hidden;}
.public section .img.b {border: solid #EFEFEF 1px;}
.public section img {width: 100%; transition:0.3s all;}
.public section img:hover {transform: scale(1.1,1.1); transition:0.3s all;}
.public section h4 {padding: 0; margin: 10px 0 0; line-height: 1.5;}
.public section p {display: block; font-size: 0.8em; color: #009688; padding: 0;}
.more_pub {display: block;	width: 100px; color: #009688; border: solid 1px #009688; padding: 0.3em 0; text-align: center; text-decoration: none; border-radius: 3px; transition: .4s; margin: 0 auto;}
.more_pub:hover {background: #009688; color: white;}
@media screen and (max-width:800px) {
}
@media screen and (max-width:500px) {
	.public {justify-content: space-between;}
	.public section {width: 42vw; max-width: 200px;}
}
/* form */
input,
textarea {resize: none; line-height: 2; font-size: 13px; color: #111; background: #EFEFEF; border: 0px solid #EFEFEF; -webkit-box-sizing: border-box; box-sizing: border-box; font-family: 'Questrial', "メイリオ", "Meiryo", "Osaka", "ＭＳ Ｐゴシック", "MS P Gothic", Verdana, Arial, Helvetica, sans-serif;}
.form {margin: auto; width: 100%; max-width: 700px; padding: 10px 20px;}
.form input,
.form textarea {margin: 0.75em 0 1em 0; padding: 0.5em; width: 100%; display: block;}
.form .button {width: 100px; text-align: center !important; margin-bottom: 0 !important;}
/* books page---------------------------------- */
.book#container {max-width: 800px; padding: 0 20px; margin: 0 auto;}
.book main {float: right; width: 400px;}
.book main p {padding: 10px 0;}
.book main h3 {border-left: none; background-color: #009688; color: #FFF; padding: 5px 20px; display: inline; font-weight: normal; font-size: 0.9em;}
.book main h4 {margin-top: 20px;}
.book sub {float: left; width: 250px;}
.book sub hr {border: #EFEFEF dashed 1px; margin: 5px 0}
.book sub p {padding: 10px 0 0;}
.book sub p span {display: inline-block; background-color: #EFEFEF; width: 50px; text-align: center; margin: 5px 20px 5px 0; font-weight: bold;}
.book sub img {width: 100%; max-width: 250px;}
.book sub dl.book {width: 95%; margin: 0 auto; padding: 10px 0;}
.book sub dl.book dt {float: left; font-weight: bold; margin: 0 40px 0 10px;}
.button {display: inline-block; padding: 0.3em 1em; text-decoration: none; color: #111; border: solid 2px #EFEFEF; border-radius: 3px; transition: .4s;}
.button:hover {background: #EFEFEF; color: #111;}
@media screen and (max-width:800px) {
	.book main, .book sub {clear: both; float: none; width: 100%; max-width: 800px;}
	.book main h2 {padding: 0;}
	.book main h3 {padding: 2px 10px;}
	.book sub {margin: 0 auto;}
	.book sub img {display: block; margin: 0 auto;}
}
/* mail ---------------------------------- */
.send p {text-align: center; padding: 10px 0 0;}
.mail {max-width: 800px; margin: 10vh auto 0; padding: 20px;}
.mail table.formTable{width:100%; margin:0 auto; border-collapse:collapse;}
.mail table.formTable td,table.formTable th {border:1px solid #ccc; padding:10px;}
.mail table.formTable th {width:30%; font-weight:normal; background:#efefef; text-align:left;}
.mail p.error_messe {margin:5px 0; color:#771838;}
.mail .c {text-align: center;}
@media screen and (max-width:572px) {
	.mail table.formTable th, table.formTable td {width:auto; display:block;}
	.mail table.formTable th {margin-top:5px; border-bottom:0;}
	.mail input[type="submit"], input[type="reset"], input[type="button"] {display:block; width:100%; height:40px;}
}
/* 組版サンプル */
.sampleimg {background-color: #ffffff; margin: 0 auto; padding: 0;}
.sampleimg .contents {max-width: 700px; margin: 0 auto; padding: 20px;}
.sampleimg h2 {margin: 10px 0 40px; padding: 10px 0; letter-spacing: 0; position: relative; font-weight: 300; font-size: 15px; color: #aaa; border-bottom: 1px solid #aaa;}
.sampleimg h2::after {display: none;}
.sampleimg img {display: block; max-width: 500px; margin: auto;}/**/
.google-auto-placed {display: none;}