@font-face {
  font-family: 'TBSGothic';
  src: url('https://www.tbs.co.jp/um/tpfonts/2e0869c1-da33-42ae-9828-55499bd42a69.woff') format("woff");
  font-weight:normal;
  font-style:normal;
/*  font-display: swap;*/
}
@font-face {
  font-family: 'TBSGothic';
  src: url('https://www.tbs.co.jp/um/tpfonts/044de588-d2c9-4010-86b0-1c026db099a2.woff') format("woff");
  font-weight:bold;
  font-style:normal;
/*  font-display: swap;*/
}

main { background-color: #FFFDF0; color: #3E3E3E;}
main h1.tit {color: #EB7828; letter-spacing: 0.12em;}
main h1.bee { background-image: url(../img/beechan/h1.png); background-size: contain; background-position: center top; background-repeat: no-repeat; width:100%; height:70vh; margin-bottom: 16vh}

.beechan, .name { margin: 0 auto;}
.beechan span, .name span {
  display: block;
  position: relative;
	background-size: 100%;
}
.lazy img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.txt {font-weight: bold;}

#aboutArea h2 span { background-position: center center; background-repeat: no-repeat; background-size: contain; text-indent: -9999px; background-image: url(../img/beechan/h2_about.png); margin: 0 auto; display: block; width:100%; height:14vh;}

#illustratorArea { text-align: left; margin: 0 auto; border: solid 1px #707070;}
#illustratorArea h2 { line-height: 1.4em; padding-bottom: 0.8em;}
#illustratorArea h2 .plofName {  letter-spacing: 0.1em;}
#illustratorArea p { line-height: 1.8em; padding-bottom: 0.8em;}
#illustratorArea a { text-decoration: none; color:#3E3E3E; transition:0.5s;}
#illustratorArea a:hover { text-decoration: underline;}

#conceptArea .right { text-align: right; font-weight: bold;}

#snsArea ul li { display: inline-block; margin: 0 12px;}
#snsArea ul li a {
border: solid 1px #333;
display: block;
transition:0.5s;}
#snsArea ul li a:hover { background-color: #fff;}
#snsArea ul li a span{background-position: center center; background-repeat: no-repeat; background-size: contain; text-indent: -9999px;display: block;}
#snsArea ul li.snsX a span{ background-image: url(../img/beechan/sns_x.png);}
#snsArea ul li.snsInstagram a span{ background-image: url(../img/beechan/sns_instagram.png);}
#snsArea ul li.snsYoutube a span{ background-image: url(../img/beechan/sns_youtyube.png);}

.no-wrap {
    display: inline-block; /* インラインブロック化 */
}

.copyright { background-color: #fff; color: #000;}

/* ↓スマホ */
@media all and (max-width: 767px) {
	main { padding: 0px 0 25px!important;}
	main h1.tit {font-size: 1.6em; letter-spacing: 0.1em; padding-bottom: 40px;}
	main h1.bee { max-height: 570px;}
	.beechan { width:60%; margin-bottom: 70px;}
	.name  { width:55%; margin-bottom: 100px;}
	
	.beechan, .name {
    box-sizing: border-box;
  }
	.beechan span {
    height: 0;
    padding: 156.662% 0 0;
    position: relative;
  }
	.name span {
    height: 0;
    padding: 26.973% 0 0;
    position: relative;
  }
	
	.txt { font-size: 0.9em; line-height: 2.2em; padding-bottom: 1.8em; }
	
	#aboutArea h2 { width: 100%; max-width: 300px; margin: 0 auto 30px;}
	#aboutArea p {margin: 0 20px;}
	
	#illustratorArea {padding: 15px 25px 5px; margin:0 20px 80px;}
	#illustratorArea h2 .plofName {font-size: 1.1em;}
	#illustratorArea h2 .degree, #illustratorArea .prof { font-size: 0.8em;}
	#illustratorArea a { font-size: 1.0em;}
	
	#conceptArea { margin: 0 20px 80px;}
	#conceptArea .right {font-size: 0.92em; line-height: 1.6em; }
	
	#snsArea h2 { font-size: 0.8em;}
	#snsArea { margin: 0 10px;}
	#snsArea ul { padding: 20px 0;}
	#snsArea ul li { display: inline-block; margin: 0 0.5%; width: 30%; max-width: 140px;}
	#snsArea ul li a {
border-radius: 15px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
	padding: 15px 0;
}
	#snsArea ul li a span{width: 100px; height: 20px; margin: 0 auto;}
	
	.copyright { padding: 20px 0 20px;}
}

/* ↑スマホ */
/* ↓PC */
@media all and (min-width: 768px) {
	main { padding: 0px 0 25px!important;}
	main h1.tit {font-size: 2.6em; padding-bottom: 80px;}
	.beechan { margin-bottom: 70px;}
	.name  { margin-bottom: 198px;}
	
	.beechan, .beechan span {
    width: 332px;
    height: 520px;
    background-size: cover;
    background-repeat: no-repeat;
	background-position: center center;}
	
	.name, .name span {
    width: 304px;
    height: 82px;
    background-size: cover;
    background-repeat: no-repeat;
	background-position: center center;}
	
	.txt { font-size: 1.0em; line-height: 2.5em; padding-bottom: 2em;}
	
	#aboutArea h2 { margin-bottom: 55px;}
	
	#illustratorArea { width: 580px; padding: 25px 50px 15px; margin-bottom: 100px;}
	#illustratorArea h2 .plofName {font-size: 1.3em;}
	#illustratorArea h2 .degree, #illustratorArea .prof { font-size: 0.85em;}
	#illustratorArea a { font-size: 1.1em;}
	
	#conceptArea { width: 660px; margin: 0 auto 110px;}
	#conceptArea .right {font-size: 1.05em; line-height: 1.8em; }
	
	#snsArea ul { padding: 26px 0;}
	#snsArea ul li a {
border-radius: 18px;
-webkit-border-radius: 18px;
-moz-border-radius: 18px;
padding: 18px 0; width: 155px;}
	#snsArea ul li a span{width: 130px; height: 28px; margin: 0 auto;}
	
	.copyright { padding: 30px 0 30px;}



}
/* ↑PC */

/*	fadein
============================== */
.fadeinD {
    opacity : 0;
    transform : translate(0, 20px);
    transition:all 1s;
  display:block;
}
.fadeinD.scrollin {
    opacity : 1;
    transform : translate(0, 0);
}