@charset "utf-8";

/*
Theme Name: 筑波大学STEAM
Description: style.css
style.css
Author: Gokan Soichiro
*/

*{-webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
       -o-box-sizing: border-box;
      -ms-box-sizing: border-box;
          box-sizing: border-box;
}
html {
	 font-size: 62.5%;
	 -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -o-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
body {
  position: relative;
  line-height: 1.8;
  font-size: 1.7rem;
  margin: 0;
  font-family: -apple-system, blinkMacSystemFont, /* Macの欧文はSan Francisco (OS X 10.11以降) */
               'Helvetica Neue', /* Macの欧文 (OS X 10.10以前) */
               'Segoe UI',       /* Windowsの欧文 */
               YuGothicM,        /* Windows8.1以上は游ゴシック */
               YuGothic,         /* Macの游ゴシック */
               Meiryo,           /* 游ゴシックが入っていないWindows */
               sans-serif;
}

/* Windows */
@font-face {
  font-family: YuGothicM;
  font-weight: normal;
  src: local('YuGothic-Medium'),  /* Mediumを明示的に指定 */
       local('Yu Gothic Medium'), /* Chrome用 */
       local('YuGothic-Regular'); /* Windows8.1ではMediumがないのでRegularを指定 */
}
@font-face {
  font-family: YuGothicM;
  font-weight: bold;
  src: local('YoGothic-Bold'), /* Boldはそのまま */
       local('Yu Gothic');     /* Chrome用 */
}


html,body { height:100%;}
img {
	border: 0px;
	vertical-align: top;
	line-height: 0px;
}
ul,li,dl,dt,dd,p,h1,h2,h3,h4 { margin:0; padding:0;}
ul,li {	list-style-type: none;}
h1 {
	font-size: 1.5rem;
	position: absolute;
	top: 20px;
	left: 20px;
	z-index: 900
}
h2 { margin-bottom: 50px; text-align: left; font-weight: normal}

a { 
	color:#333;
	cursor:pointer;
	-webkit-transition: all 0.3s linear;
	transition: all 0.3s linear;
}

.mincho, h1 {
	font-family: YuMincho,    /* Macの游明朝 */
               'Yu Mincho', /* Windowsの游明朝 */
               'MS Mincho', /* 游明朝がないWindows（MS PMinchoなら字詰めされる） */
               serif;
}

a:visited { cursor:pointer;}
a:hover { cursor:pointer;}
#wrapper { height:100%;}
a img {
	-webkit-transition: all 0.2s linear;
	transition: all 0.2s linear;
}
a:hover img { 
	opacity: 0.7;
	filter: alpha(opacity=70);
	-webkit-transition: all 0.2s linear;
	transition: all 0.2s linear;
}
a, a.btn {
  text-decoration: none;
  -webkit-transition: all 0.3s linear;
  transition: all 0.3s linear;
}
section { margin: 0; width: 100%; padding: 100px 5%; text-align: center;}
.wrap{
    position: relative;
    z-index: 10;
}
h2 { font-size: 3.8rem}
h2 span { font-size: 2.4rem; vertical-align: top; display: inline-block; padding: 13px 15px}
.container { max-width: 960px; width: 100%; margin: 0 auto}

a.btn-1 { background: #000; color: #fff; font-size: 2.4rem; border-radius: 40px; line-height: 80px; display: block; text-align: center; letter-spacing: 2px; width: 100%; max-width: 640px;
	font-family: YuMincho,    /* Macの游明朝 */
               'Yu Mincho', /* Windowsの游明朝 */
               'MS Mincho', /* 游明朝がないWindows（MS PMinchoなら字詰めされる） */
               serif;}
a.btn-1:hover { background: #666;}


@media screen and (min-width: 751px){
.comment { width: 740px; text-align: left; margin: 0 auto 3em; font-size: 1.4rem;}
.visible-xs { display: none!important}
}
@media screen and (max-width: 750px){
.comment { width: 100%; text-align: left; margin: 0 auto 3em; font-size: 1.4rem}
.hidden-xs { display: none!important}
h1 {
	font-size: 1.5rem;
	position: absolute;
	top: 70px;
	left: 20px
}
a.btn-1 { font-size: 1.6rem}
}

.flex {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

@media screen and (max-width: 1040px){
	.br-ex { display: none!important}
}

/*------------------------------------------------

	ヘッダー　header

------------------------------------------------*/
#logo { position: absolute; top: 5%; left: 10%}
#catch {
	width: 580px;
	position: absolute;
	top: 20%;
	left: 50%;
	margin-left : -290px;
	z-index: -1
}
#catch img {
	width: 100%;
	max-width: 580px;
	height: auto;
	}

@media screen and (max-width: 750px){
	#logo img { width: 150px; height: auto}
    #catch {
	width: 580px;
	height: auto;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left : -290px
	}
}
/*------------------------------------------------

	グローバルナビ　#navigation

------------------------------------------------*/
	.header_cont {
		background-color: #fff;
		width: 100%;
		min-width: 960px;
		z-index: 1000;
		height: 50px;
		position: fixed;
		top: 0;
		left: 0
    }

    .header_link { overflow: hidden; width: 100%; height: 50px; margin: 0 auto; background:#000}
    .header_link li {
        float: left;
		width: 20%
    }
	.header_link li a { height: 50px; display: block; color: #fff; line-height: 50px}
	.header_cont.floating{
        position: fixed;
        top: 0;
        bottom: auto;
    }
	.header_link a {
		text-align: center;
		font-weight: 200;
		-webkit-transition: all 0.2s linear;
		transition: all 0.2s linear;
		position: relative
	}
	.header_link a:hover { 
		color: #BF9D5A;
		-webkit-transition: all 0.2s linear;
		transition: all 0.2s linear;
	}
	.header_link a:before { content: ""; width: 1px; height: 24px; background: #fff; position: absolute; top: 13px; right: 0}
	.header_link li:last-child a:before { content: none;}
	.header_link span { display: inline-block; margin-right: 5px}
@media screen and (min-width: 751px){
    .sp-navigation {display: none;}    
}

@media screen and (max-width: 750px){
    .header_cont {
        display: none;
    }
}

.header_cont p { 
	position: absolute;
	top: 50%;
	left: 2%;
	margin-top: -22px;
	opacity: 0;
	filter: alpha(opacity=0);
	-webkit-transition: all 0.2s linear;
	transition: all 0.2s linear;
}
.fixed p { 
	opacity: 10;
	filter: alpha(opacity=1);
	-webkit-transition: all 0.2s linear;
	transition: all 0.2s linear;
}


/*------------------------------------------------

	トップメインビジュアルリンク  .mv-link

------------------------------------------------*/
.mv-link { width: 100%; max-width: 1300px; margin: 0 auto; padding-top: 120px; position: relative; text-align: center}
.mv-link img { width: 100%; max-width: 580px; height: auto;}
.mv-link li { position: absolute}
.mv-link a { font-size: 2.3rem; color: #fff; padding: 8px; width: 280px; border-radius: 30px; display: block; background: #000}
.mv-link a span { font-size: 1.2rem; vertical-align: middle; margin-top: -4px; padding: 0 5px; display: inline-block}
.mv-link a:hover { background: #ffe100; color: #000}
@media screen and (min-width: 1251px){
	.mv-link .link-1 { top: 185px; left: 200px}
	.mv-link .link-2 { top: 355px; left: 0}
	.mv-link .link-3 { top: 570px; left: 85px}
	.mv-link .link-4 { top: 170px; left: 916px}
	.mv-link .link-5 { top: 315px; left: 955px}
}
@media screen and (max-width: 1250px){
	.mv-link .link-1 { top: 85px; left: 80px}
	.mv-link .link-2 { top: 255px; left: 40px}
	.mv-link .link-3 { top: 470px; left: 5px}
	.mv-link .link-4 { top: 70px; right: 50px}
	.mv-link .link-5 { top: 215px; right: 20px}
}
@media screen and (max-width: 1000px){
	.mv-link { background-size: 400px auto; -webkit-background-size: 400px auto;}
}
@media screen and (max-height: 1050px){
	.mv-link .link-1 { top: 135px; left: 200px}
	.mv-link .link-2 { top: 240px; left: 20px}
	.mv-link .link-3 { top: 370px; left: 85px}
	.mv-link .link-4 { top: 170px; left: 76%}
	.mv-link .link-5 { top: 320px; left: 78%}
	.mv-link { width: 100%; max-width: 1300px; margin: 0 auto; padding-top: 70px}
	.mv-link img { width: 100%; max-width: 380px; height: auto;}
}
@media screen and (min-height: 751px){
	.mv-link iframe { position: absolute; bottom: 30px; right: 0; width: 32%; height: 240px; border: none; frameborder: 0}
}
@media screen and (max-width: 750px){
	.mv-link { padding: 170px 7% 0}
	.mv-link ul { display: none}
	.mv-link iframe { width: 100%; height: 210px; margin: 0 auto 30px; border: none; frameborder: 0}
}




/*------------------------------------------------

	新着情報  #news

------------------------------------------------*/
#news .container { width: 100%; max-width: 1300px; margin: 0 auto 50px; overflow: hidden; position: relative}
#news .container .link-list { position: absolute; right: 34%; top: 2px}
#news .container .link-list a { color: #000; font-size: 1.5rem}
#news .container .link-list a:hover { text-decoration: underline}
#news .entry { background: #000; padding: 15px; color: #fff; position: relative}
#news .entry:last-child { padding: 0; background: #f4d924}
#news .entry-interview { text-align: center}
#news .entry-interview a { padding: 15px}
#news .entry-interview a img { width: auto; height: 100%}
#news .date { font-size: 1.1rem}
#news .entry-title { font-size: 1.6rem; margin-bottom: 5px}
#news .entry-body { overflow: hidden}
#news .entry-body .figure { float: left; margin: 5px 15px 0 0}
#news .entry-body p { font-size: 1.3rem; word-break: break-all} 
#news a { color: #fff}
@media screen and (max-width: 1350px){
	#news { padding: 0 2%}
}
@media screen and (min-width: 751px){
	#news .entry,
	#news .entry-interview { width: 32%}
	#news .entry:nth-child(2) { margin: 0 2%}
}
@media screen and (max-width: 750px){
	#news .container .link-list { right: 20px}
	#news .container .link-list a { font-size: 1.3rem}
	#news .entry,
	#news .entry-interview { width: 100%; height: 190px}
	#news .entry-interview a { height: 190px; display:block}
	#news .entry-interview a img { width: 100%; max-width: 300px; height: auto}
	#news .entry:nth-child(2) { margin: 3% 0}
	#news .container { padding: 0 5%}
}
#news .entry a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  cursor:pointer!important;
}
#news .entry a:hover { background: rgba(255,255,255,0.4); cursor:pointer!important;}



/*------------------------------------------------

	トップページ

------------------------------------------------*/
#outline h2 + img { margin-bottom: 140px}
#outline h3 { font-size: 2.6rem; margin-bottom: 1em; font-weight: normal}
#outline .container { overflow: hidden}
#outline p:nth-last-child(2) { margin-top: 2em}
#lecturer { padding: 100px 5px; margin: 0 auto; max-width: 1500px; background: url(images/home/lec-bg.png) no-repeat 100% 0;}
#lecturer .container { overflow: hidden; line-height: 2}
#lecturer h3 { margin-bottom: 1em; font-size: 2.4rem}
#lecturer .profile { position: relative; width: 100%}
@media screen and (min-width: 891px){
	.prof dt { padding: 20px 48px 10px; text-align: left; font-size: 2.6rem}
	.prof dt small { font-size: 1.6rem; display: block}
	.prof dd { background: #000; color: #fff; padding: 20px 48px; text-align: left}
	.prof-1 { width: 910px; text-align: left; position: relative}
	.prof-1 dl { width: 540px; position: absolute; bottom: 280px; right: 0}
	.prof-2 { width: 910px; text-align: right; position: absolute; right: 0; top: 280px}
	.prof-2 dl { width: 540px; position: absolute; bottom: 230px; left: 0}
	.prof-2 dt { text-align: right}
	.prof-2 dt p { display: inline-block; text-align: left}
	#lecturer .profile { height: 1530px}
}
@media screen and (min-width: 1371px){
	#lecturer .profile { height: 1110px}
}
@media screen and (max-width: 1370px){
	.prof-2 { top: 700px;}
}
@media screen and (min-width: 951px){
	#lecturer .profile { margin-top: -150px}
	#lecturer .catch { width: 370px; float: left}
	#lecturer .container div { text-align: left; max-width: 500px; letter-spacing: 1px; float: right}
}
@media screen and (max-width: 950px){
	#lecturer .catch { width: 100%; max-width: 370px; margin: 0 auto}
	#lecturer .container div { text-align: left; padding: 10%; letter-spacing: 1px}
}
@media screen and (max-width: 890px){
	#lecturer .container img { width: 100%; max-width: 260px; margin-bottom: 50px}
	#outline h2 + img { width: 100%; max-width: 300px; margin-bottom: 140px}
	.profile img { width: 90%; max-width: 580px; height: auto}
	.prof dt { padding: 20px 48px 10px; text-align: left; font-size: 2.6rem}
	.prof dt small { font-size: 1.6rem; display: block}
	.prof dd { background: #000; color: #fff; padding: 20px 48px; text-align: left}
	.prof-1 { text-align: left; margin-bottom: 100px}
	.prof-1 dl { max-width: 500px}
	.prof-2 { text-align: right}
	.prof-2 dl { max-width: 500px; margin-left: auto}
	.prof-2 dt { text-align: right}
	.prof-2 dt p { display: inline-block; text-align: left}
}
@media screen and (min-width: 751px){
	#outline .container { padding: 0 19px}
}
@media screen and (max-width: 750px){
	#outline { padding: 50px 0}
	#outline .container h3,#outline .container p { padding: 0 5%; text-align: left}
	.home #lecturer h3 { font-size: 2rem}
	#lecturer .container div { padding: 5%}
	.home .prof dd { text-align: justify}
}


/*------------------------------------------------

	下層共通

------------------------------------------------*/
.page .wrap { width: 100%; max-width: 1500px; margin: 0 auto;}
.page .wrap:after { content: ""; clear: both; display: block;}
.page h2 { margin-bottom: 100px}
.page h3 { background: #000; color: #fff; font-size: 2.2rem; text-align: left; padding-left: 20px; margin-bottom: 40px; font-weight:normal; font-family: YuMincho, 'Yu Mincho', 'MS Mincho', serif;}
.page section { width: 100%; max-width: 910px; padding: 0}
.page .container { text-align: left; margin-bottom: 100px}
@media screen and (max-width: 750px){
	.page .container { padding: 0 4% 0}
	.page .wrap { padding: 200px 0 0 0}
}

/*------------------------------------------------

	02 プログラム

------------------------------------------------*/
.program #container { background: url(images/program/bg.png) repeat-y 0 0}
.program .ttl { background: #000; color: #fff; margin-bottom: 100px; font-size: 2.2rem; padding: 2px 10px 0}
.program .ttl small { font-size: 1.6rem; display: block; padding-left: 10px}
.program table { width: 100%}
.program td { padding: 5px}
.program tr:nth-child(even) { background: #aaa}
.program section li { text-align: center; padding-bottom: 40px; margin-bottom: 10px; background: url(images/common/arrow-1.png) no-repeat 50% 100%}
.program section li:last-child { background: none}
.program .flow { overflow: hidden}
.program .flow ul { float: left}
.program .requirements .inner dl:nth-child(1) dd { padding-left: 2.5em}
.program .requirements .inner dl:nth-child(7) dd { padding-left: 6em}
.program .requirements .inner dl:nth-child(8) dd { padding-left: 5em}
.program dt { float: left}
.program .application p { margin-bottom: 40px}
@media screen and (min-width: 751px){
	.program .wrap { padding: 200px 0 0 20%}
	.program section { float: right}
	.program .inner { padding-left: 5%}
	.program th { font-weight: normal; text-align: left; padding: 5px 30px 5px 50px; width: 200px}
	.program .requirements .inner dl { width: 84%}
	.program .curriculum div:first-child { width: 40%}
	.program .curriculum div:last-child { width: 60%}
}
@media screen and (max-width: 750px){
	.program .wrap { padding: 120px 0 0 0}
	.program th { font-weight: normal; text-align: left; padding: 5px;}
	.program .curriculum div:first-child { width: 100%; margin-bottom: 30px}
	.program .curriculum div:last-child { width: 100%}
}



/*------------------------------------------------

	03 期待される効果

------------------------------------------------*/
.achievement #container { background: url(images/achievement/bg.png) repeat-y 100% 0}
.achievement section { float: left}
.achievement .inner li { position: relative; padding-left: 20px; margin-bottom: 1em}
.achievement .inner li:before { content: url(images/common/icon-disc.png); line-height: 1; position: absolute; left: 0}
.achievement .effect { position: relative; margin-bottom: 200px}
@media screen and (min-width: 751px){
	.achievement .wrap { padding: 200px 30% 0 0}
	.achievement .inner { padding: 0 50px 0 33%}
	.achievement h2 { margin-left: 25%}
	.achievement h3 { padding-left: 30%}
	.achievement .inner li:before { top: 6px}
	.achievement .effect .figure-1 { position: absolute; top: 120px; right: -35%}
	.achievement .effect .figure-2 { position: absolute; top: 320px; left: -35%; z-index: -1}
	.achievement .community .figure-1 { position: absolute; top: 100px; right: -55%}
	.achievement .community .figure-2 { position: absolute; top: 500px; left: 0; z-index: -1}
	.achievement .community { position: relative; margin-bottom: 500px}
}
@media screen and (max-width: 750px){
	.achievement .wrap { padding: 120px 0 0 0}
	.achievement .inner li:before { top: 6px}
	.achievement .effect .figure-1 { width: 40%}
	.achievement .effect .figure-1 img { width: 100%; height: auto}
	.achievement .effect .figure-2 { display: none}
	.achievement .community .figure-1 { width: 100%; margin: 30px 0}
	.achievement .community .figure-1 img { width: 100%; height: auto}
	.achievement .community .figure-2 { width: 60%;}
	.achievement .community .figure-2 img { width: 100%; height: auto}
}


/*------------------------------------------------

	04 講師陣

------------------------------------------------*/
.lecturer #container { background: url(images/lecturer/bg.jpg) no-repeat 50% 0; background-size: 100% auto; -webkit-background-size: 100% auto}
.lecturer .container { background: url(images/lecturer/program.png) no-repeat 100% 70%}
.lecturer section { max-width: 100%; text-align: left}
.lecturer .ttl { font-size: 3rem; margin-bottom: 1em}
.lecturer .box-wrapper { position: relative}
.lecturer .box-wrapper:nth-child(odd) .border { position: absolute; bottom: 20px; right: 0; width: 76%; height: 2px; background: #000; transition: 2.5s}
.lecturer .box-wrapper:nth-child(even) .border { position: absolute; bottom: 20px; left: 0; width: 76%; height: 2px; background: #000; transition: 2.5s}
.lecturer .box { color: #fff; margin: 0 auto 100px; max-width: 1230px; min-height: 300px; text-align: left; position: relative}
.lecturer .box-wrapper:nth-child(odd) .box { background: #656464}
.lecturer .box-wrapper:nth-child(even) .box { background: #939494}
.lecturer .pic img { z-index: 900!important; position: relative}
.lecturer .name { font-size: 2.4rem}
.lecturer .name small { font-size: 1.6rem; margin-left: 20px}
.lecturer .box p { line-height: 2}
.lecturer .box .date { position: absolute; top: 0; background: #000; color: #fff}
.lecturer .note { font-size: 1.8rem; text-align: center; padding: 10px; border: solid 3px #d93932; color: #d93932; border-radius: 40px; margin: 65px auto 0; letter-spacing: 1px}
@media screen and (min-width: 751px){
	.lecturer h2 { margin-left: -15px}
	.lecturer .wrap { padding: 200px 0 0}
	.lecturer .pic { width: 300px}
	.lecturer .box .date { padding: 4px 6% 4px 15px}
	.lecturer .box-wrapper:nth-child(odd) .pic { float: left}
	.lecturer .box-wrapper:nth-child(even) .pic { float: right}
	.lecturer .box-wrapper:nth-child(odd) .date { right: 0}
	.lecturer .box-wrapper:nth-child(even) .date { left: 0}
	.lecturer .box-wrapper:nth-child(odd) .box div { margin-left: 300px; padding: 30px 100px 30px 30px}
	.lecturer .box-wrapper:nth-child(even) .box div { margin-right: 300px; padding: 50px 30px 30px 100px}
}
@media screen and (max-width: 750px){
	.lecturer .container { padding: 0}
	.lecturer .container p { padding: 0 4%}
	.lecturer .wrap { padding: 120px 0 0}
	.lecturer .pic { width: 60%; padding: 50px 30px 0; margin: 0 auto}
	.lecturer .pic img { width: 100%; height: auto}
	.lecturer .box div { padding: 30px}
	.lecturer .box .date { left: 0; padding: 1px 5px 1px 8px}
	.lecturer .border { display: none!important}
	.lecturer .note { border-radius: 20px; margin: 50px auto 30px; width: 90%; text-align: left}
}


/*------------------------------------------------

	05 アクセス

------------------------------------------------*/
.access #container { background: url(images/access/bg.jpg) no-repeat 50% 150%; border-bottom: solid 1px #000; background-size: 100% auto; -webkit-background-size: 100% auto; padding: 200px 0 0}
.access .catch-1 { background: url(images/access/image-1.png) no-repeat 50% 0; position: relative}
.access .catch-1 .figure-1 { position: absolute; top: -60px; right: 10%}
.access .catch-2 { background: url(images/access/image-2.png) no-repeat 50% 0; position: relative}
.access .name { font-size: 2.4rem}
.access .mail { margin: 1em 0 1.5em; letter-spacing: 2px}
@media screen and (min-width: 751px){
	.access .wrap { padding: 200px 0 0}
	.access h2 { margin-left: 25%}
	.access h3 { padding-left: 30%}
	.access .inner { padding: 0 50px 0 33%}
	.access .catch { width: 100%; height: 527px}
	.access .catch-1 .figure-2 { position: absolute; bottom: 30px; right: 15%}
	.access .mail { font-size: 3rem}
}
@media screen and (max-width: 750px){
	.access #container { padding: 120px 0 0}
	.access .wrap { padding: 100px 0 0}
	.access .catch { width: 100%; height: 350px; background-size: auto 100%; -webkit-background-size: auto 100%}
	.access .catch-1 .figure-1 { position: absolute; top: -25px; right: 5%; width: 40%}
	.access .catch-1 .figure-1 img { width: 100%; height: auto}
	.access .map { text-align: center; padding: 50px}
	.access .map img { width: 100%; max-width: 357px; height: auto}
	.access .name { font-size: 2rem}
	.access .mail { font-size: 1.8rem}
}


/*------------------------------------------------

	新着情報 個別  .single

------------------------------------------------*/
#breadcrumb,.thumbnail-box { margin-bottom: 20px}
#breadcrumb a { font-size: 1.3rem;}
#breadcrumb ul { overflow: hidden}
#breadcrumb li { float: left; font-size: 1.3rem}
#breadcrumb li:after { content: ">"; margin: 0 1em}
#breadcrumb li:last-child:after { content: " "}
.single .wrap { padding: 80px 0 200px; margin: 0 auto; max-width: 960px}
.single h2 { font-size: 3rem; margin-bottom: 50px}
.single h3 { margin-bottom: 20px!important}
.single h3 a { color: #fff; font-size: 1.8rem}
.single article { margin-bottom: 80px}
.single article .post { padding: 0 20px}
.post-navi { width: 100%; padding-top: 30px; margin-top: 70px; border-top: solid 1px #ccc}
.post-navi div { width: 50%}
.post-navi #prev { text-align: right}
.post-navi a { font-size: 1.3rem}
.single .post p { margin-bottom: 1em}
.btn-more a { font-size: 1.4rem; display: block}
@media screen and (max-width: 750px){
	.single { padding: 0px 4% 100px;}
	.thumbnail-box img { width: 100%; height: auto}
	.single h3 { line-height: 1.2!important}
	.single h3 a { padding: 10px 5px; display: block}
	.single .post h3 { padding: 10px; font-size: 2rem}
}


/*------------------------------------------------

	フッター　#footer

------------------------------------------------*/
footer { text-align: center; padding: 70px 0 80px; background: #000; color: #fff; position: relative}
footer .footer-logo { margin-bottom: 40px}
footer .footer-logo span { display: inline-block; padding-top: 7px}
footer .footer-logo img { width: 150px; height: auto}
.copyright { letter-spacing: 2px; font-size: 1.2rem}

.side-btn { position: fixed; right: 80px; width: 90px; z-index: 999}
.side-btn p { box-shadow: 2px 2px 10px rgba(0,0,0,0.5); width: 80px; height: 80px; border-radius: 50%}
.side-btn img { width: 80px; height: auto}
.side-btn .btn-return { margin-bottom: 30px}
@media screen and (min-width: 751px){
	.side-btn { top: 10%;}
	footer .footer-logo span { display: inline-block; padding-top: 7px}
	footer .footer-logo img { display: inline-block; margin-right: 48px}
}
@media screen and (max-width: 750px){
	footer .footer-logo span { display: block}
	.side-btn { position: fixed; bottom: 10%; right: 10px; width: 70px}
	.side-btn p { width: 60px; height: 60px}
	.side-btn img { width: 60px; height: auto}
}

/* ----------------------------------------------------
	
	モーダルナビ　sp-navigation
	 
---------------------------------------------------- */	
.menu-btn {
    position: fixed;
    top: 0px;
    right: 3%;
    width: 50px;
    height: 50px;
    line-height: 50px;
    cursor: pointer;
    background:url(images/open.png) no-repeat 0 0;
	background-size: 50px auto; -webkit-background-size: 50px auto;
	text-indent: 100%;
	overflow: hidden;
	white-space: nowrap;
}
.sp-nav-header { background: #fff; height: 50px; position: fixed; width: 100%; z-index: 1001}
.sp-nav-header a { line-height: 50px; padding-left: 20px; font-weight: bold}
.menu-btn span:after { content: attr(data-txt-menu)}

/* 開閉用ボタンがクリックされた時のスタイル */
.open .menu-btn {
	background:url(images/close.png) no-repeat 0 0;
	background-size: 50px auto; -webkit-background-size: 50px auto;
	text-indent: 100%;
	overflow: hidden;
	white-space: nowrap;
}

.menu {
    position: fixed;
    display: table;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,1);
    -webkit-transition: all .5s;
    transition: all .5s;
    visibility: hidden;
    opacity: 0;
	z-index: 1000;
}

.menu ul {
    display: table-cell;
    vertical-align: middle;
	padding-top: 30px;
}

.menu li {
    width: 100%;
    height: 60px;
    line-height: 60px;
    margin: 0 auto;
	padding-left: 0;
    text-align: left;
	border-top: solid 1px #ddd;
	background: url(images/arrow-1.png) no-repeat 95% 50%;
}
.menu li:last-child { border-bottom: solid 1px #ddd;}
.menu li a {
    display: block;
    font-size: 1.4rem;
    color: #333;
	font-weight: 200;
	padding-left: 5%;
	-webkit-transition: all 0s;
    transition: all 0s;
}
.menu li a:hover {
    color: #111;
	text-decoration: none;
	background: url(images/arrow-1.png) no-repeat 95% 50% #ddd;
	-webkit-transition: all 0s;
    transition: all 0s;
}

.hover {
	color: #111;
	text-decoration: none;
	background: url(images/arrow-1.png) no-repeat 94% 50% #ddd;
}
/* 開閉用ボタンがクリックされた時のスタイル */
.open .menu {
    cursor: url(images/cross.svg),auto;
    -webkit-transition: all .5s;
    transition: all .5s;
    visibility: visible;
    opacity: 1;
}



/*------------------------------------------------

	インタビュー個別記事

------------------------------------------------*/
.interview-sidebar {
	width: 16em;
	margin-right: 50px;
	font-size: 14px
}
.interview-sidebar h4 {
	font-size: 20px;
	margin-bottom: 5px;
	font-weight: normal
}
.interview-sidebar li {
	font-size: 14px;
	border-bottom: solid 0.5px #000;
	padding-bottom: 5px;
	margin-bottom: 5px
}
.interview-sidebar li:first-child {
	border-top: solid 1px #000;
	padding-top: 5px
}
.interview-sidebar li:last-child {
	border-bottom: solid 1px #000
}
.interview-sidebar small {
	display: block
}
.interview-summary {
	-webkit-flex: 1;
	flex: 1;
	max-width: 750px
}
.interview-summary h3 {
	background: #fff; color: #000;
	padding-left: 0;
	font-siez: 32px;
	margin-bottom: 58px!important;
	font-family: 'Noto Sans', 'Noto Sans CJK JP', 'Noto Sans CJK JP Subset', sans-serif;
}
@font-face {
  font-family: 'Noto Sans CJK JP Subset';
  font-style: normal;
  font-weight: 500;
	font-display: swap;
  src: local('Noto Sans CJK JP'),
    local('NotoSansCJKjp-Middium'),
    local('NotoSansJP-Middium'),
    url('./font/NotoSansCJKjp-Middium.woff2') format('woff2'),
    url('./font/NotoSansCJKjp-Middium.woff') format('woff');
}
.interview-summary .post-date {
	font-size: 16px
}
@media screen and (max-width: 750px){
	.interview-sidebar,
	.interview-summary {
		width: 100%
	}
	.interview-sidebar {
		order: 2;
		margin: 50px 0 0 0;
	}
}



@media screen and (-webkit-min-device-pixel-ratio:0) {
	#outline .container {
		padding: 0!important
	}
	#outline .container p {
		font-size: 98%;
		letter-spacing: -0.05em;
		margin: 0!important
	}
}