@charset "UTF-8";
/* CSS Document */

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;
    -webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

body {
    line-height:1;
}

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

nav ul {
    list-style:none;
}
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;
}

a:hover img ,
input:hover{
	opacity: 0.6;
	filter: alpha(opacity=60);
	-ms-filter: alpha(opacity=60);
}


/*-------------------------------
base
-----------------------------------*/
body{
	margin:0;
	padding:0;
	font-family:arial,helvetica,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ', Meiryo,'ＭＳ Ｐゴシック';
	background-color:#f5f2e8;
  background-image:none;
  background-repeat:no-repeat;
  background-position:top center;
  background-size:100% auto;
	text-align:center;
}

.contents{
	/*width:980px;*/
	margin:20px auto;
	display:block;
	background-color:none;	
	padding-bottom:10px;
}

.copyright{
	margin:20px auto;
	text-align:center;
	color:#666;
	font-size:70%;
	line-height:1.4;	
}

.wrapper{
  margin: 0; overflow: hidden;
  position: relative; top: 0;
}

header{
  background-color: rgba(82,82,82,1.00);
  width: 100%;
  margin: auto;
  text-align: center;
  position: absolute; top: 0; left: 0; right: 0;
  z-index: 10000;
}

header.fixed{
  position: fixed; 
}

header h1{
  padding:10px 5px; position: relative;
}

header h1 img{
  transition-property: all;
  transition-duration: 0.3s;
  transition-timing-function: ease;
  width: 80%; max-width: 400px; height:auto;
}

header.fixed h1{
}
header.fixed h1 img{
  width: 50%; max-width: 220px; height:auto;
}

/*--------------------------------------------------------
	contents
----------------------------------------------------------*/
.contents{ width: 100%; max-width: 750px; padding:0 0.5em; padding-top: 80px;   }
.contents h1{ font-size: 2rem ; font-weight: normal; margin-bottom: 1em;}
.photoIcon{ width: 100%; padding: 1em; max-width: 300px; margin: auto;}
.photoIcon img{ width: 100%; box-shadow: 0 5px 20px 0 rgba(0,0,0,0.30);}
.name{ font-size: 1.75rem; font-weight: normal; margin: 0.5em; }
.name span{ font-size: 65%; display: block; font-weight: normal; margin: 1em 0; line-height: 1.3;}
.name span br{display: none;}
.lead{ margin:2em auto; font-size: 1.4rem; text-align: left; position: relative; color: rgba(60,60,60,1.00);line-height: 1.35; }
.lead::after{
  content: ''; display: block;
  width: 100%; max-width: 600px; height: auto; margin: 3em auto;
  border-top: solid 1px rgba(0,0,0,1.00); 
}
@media screen and (max-width: 425px){
  .name span br{display: inline;}
}

.interview{ margin: auto; text-align: left; }
.interview::after{
  content: ''; display: block;
  width: 100%; max-width: 600px; height: auto; margin: 3em auto;
  border-top: solid 1px rgba(0,0,0,1.00); 
}
.interview .text_q{ color: rgba(176,128,13,1.00); font-size: 1.35rem; font-weight: normal; margin-bottom: 1em;}
.interview .text_a{ color: rgba(60,60,60,1.00); line-height: 1.5; margin-bottom: 2em; }

a:link{ text-decoration: none;}
a.btn{ display: block; width: 50%; max-width: 280px; margin:3em auto; padding: 1em; border-radius: 0.5em; }
a.btn:link, a.btn:visited{ color: rgba(255,255,255,1.00); background-color: rgba(82,82,82,1.00);}
a.btn:hover, a.btn:active{ color: rgba(255,255,255,1.00); background-color: rgba(147,147,147,1.00);}

/*--------------------------------------------------------
	clearfix
----------------------------------------------------------*/
.clearfix:after{
	content: ".";
	display: block;
	height: 0;
	font-size: 0;
	clear: both;
	visibility: hidden;
}

.clearfix{display: inline-block;}
/* Hides from IE Mac */
* html .clearfix {height: 1%;}
.clearfix{display: block;}
/* End Hack */

/* ---------------------------------------------------------------------
   animation-box
 --------------------------------------------------------------------- */
.animation-box{
  -webkit-transition-property: all;
  -moz-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  transition-duration: 1s;
  -webkit-transition-timing-function: ease-in;
  -moz-transition-timing-function: ease-in;
  transition-timing-function: ease-in;
  opacity: 0;
}
.animation-box.active{
  opacity: 1;
}