@charset "UTF-8";

html {
  overflow-x: hidden;
}

html, html a, body {
  -webkit-font-smoothing: antialiased;
}

body {
	background:#fff;
	margin: 0;
	padding: 0;
}


h1, h2, h3, h4, h5, h6, p,li,dt,dd,span,td,th,a {
  font-size: 16px;
  font-weight: 400;
  font-family: 'Noto Sans JP', "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
  color: #333;
  line-height: 1.6;
  word-wrap:break-word;
}

::selection {　/* テキスト選択時のカラー */
  color: #fff;
  background: #ff0;
  text-shadow: none;
}

::-webkit-selection {
  color: #fff;
  background: #ff0;
  text-shadow: none;
}

::-moz-selection {
  color: #fff;
  background: #ff0;
  text-shadow: none;
}

:active,
:focus {
  outline: none;
}

@media screen and (min-width: 768px) {
	a[href^="tel:"] {
		pointer-events: none;
	}
}


/*------------------------------------------------------------------
  	[Title]　タイトル周り
------------------------------------------------------------------*/


h1, h2, h3, h4, h5, h6 {
  font-weight: 400;
  color: #000;
  line-height: 1.5;
  margin: 0;
  /*margin: 0 0 15px;*/
}

h1 > a, h2 > a, h3 > a, h4 > a, h5 > a, h6 > a {
  color: #515769;
}

h1 > a:hover, h2 > a:hover, h3 > a:hover, h4 > a:hover, h5 > a:hover, h6 > a:hover {
  color: #999caa;
  text-decoration: none;
}

h1 > a:focus, h2 > a:focus, h3 > a:focus, h4 > a:focus, h5 > a:focus, h6 > a:focus {
  text-decoration: none;
}

h1 {
  font-size: 40px;
}

h2 {
  font-size: 36px;
  text-align:center;
}
h3 {
  font-size: 20px;
}

h4 {
  font-size: 18px;
}

.read_copy {
	font-size:18px;
}
.ropa-sans {
  font-family: 'Ropa Sans','Noto Sans JP', "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif !important;

}

@media (max-width: 767px) {

	h1 {
 	 font-size: 30px;
	}

	h2 {
	  font-size: 22px;
	}

	h3 {
	  font-size: 14px;
	}

	h4 {
	  font-size: 13px;
	}

	p,li,dt,dd,span,td,th {
		font-size:12px;
	}
}



/*------------------------------------------------------------------
  	[Link]　リンク周り
------------------------------------------------------------------*/

a {
  outline: 0;
	text-decoration: none;
}


/*------------------------------------------------------------------
  	[Contents]　コンテンツ
------------------------------------------------------------------*/

header {
	text-align: center;
	padding: 20vw 0;
}
header h1 img {
	max-width: calc(100vw - 40px) ;
}
nav {
	position: fixed;
	width: 100%;
	height: 60px;
	box-sizing: border-box;
	padding: 8px;
	bottom: 0;
	background: #666;
	z-index: 2;
}
nav a[href*="tel:"] {
	display: block;
	float: right;
	text-align: center;
	width: 44px;
	height: 44px;
	border-radius: 5px;
	background: #333 ;
	vertical-align: middle;
}

nav a[href*="tel:"]::before {
	content: "\f095";
	font-family: FontAwesome;
	font-size: 1.8em;
	color: #fff;
	display: inline-block;
}
nav a[href*="goo.gl/maps"] {
	display: block;
	float: left;
	text-align: center;
	width: calc(100vw - 70px);
	height: 44px;
	border-radius: 5px;
	background: #ddd;
	text-align: center;
}
nav a[href*="goo.gl/maps"] span {
	vertical-align: bottom;
	font-size: 1.2em;
	color: #333;
	line-height: 44px;
}
nav a[href*="goo.gl/maps"]::before {
	content: "\f3c5";
	font-family: FontAwesome;
	margin-right: 8px;
	font-size: 1.8em;
	color: #333;
	display: inline-block;
}

.comment {
	padding: 0 20px 10px;
}

.and_more h2,
.studio h2 ,
.and_more dt {
	color: #333;
	font-weight: bold;
	font-size: 1.1em;
	text-align: left;
}

.and_more li ,
.and_more dd ,
.and_more p ,
.studio p ,
.comment p {
	color: #333;
	font-size: 1em;
	text-align: justify;
}

.homepage {
	text-align: center;
	padding: 0 0 20px;
}
.homepage a {
	position: relative;
	width: calc(100vw - 40px) ;
	line-height: calc(100vw / 5) ;
	font-size: 1.2em;
	display: inline-block;
	background: #666;
	border-radius: 5px;
	color: #fff;
}
.homepage a::before {
	content: "\f108";
	font-family: FontAwesome;
	margin-right: 8px;
	font-size: 1.2em;
}


.homepage a::after {
    top: 0;
    bottom: 0;
	right: 10px;
    margin: auto;
    content: "";
    vertical-align: middle;
	position: absolute;
    width: 7px;
    height: 7px;
    border-top: 2px solid #ccc;
    border-right: 2px solid #ccc;
    transform: rotate(45deg);
}

.link_area ul {
	margin: 0;
	padding: 0;
	font-size: 0;
	display: flex;
	flex-wrap : wrap;
	align-items: center;
}
.link_area ul li {
	display: flex;
	align-items: center;
	width: calc(100vw) ;
	height: calc(100vw) 
}
.link_area ul.col_02 li {
	width: calc(100vw / 2) ;
	height: calc(100vw / 2) ;
}
.link_area ul.col_03  li{
	width: calc(100vw / 3) ;
	height: calc(100vw / 3) ;
}
.link_area ul.col_04  li{
	width: calc(100vw / 4) ;
	height: calc(100vw / 4) ;
}
.link_area ul li a {
	display: flex;
	align-items: center;
	text-align: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: relative;
}
.bnr_area a {
	display: block;
	font-size: 0;
}

.bnr_area img {
	width: 100%;
}

.and_more {
	background: #f0f0f0;
	padding: 20px 20px 0;
}
.and_more .mv {
	max-width: 100%;
	margin-bottom: 20px;
}
.studio {
	background: #fff;
	padding: 20px 20px 0;
}
.studio img {
	width: 100%;
	margin-bottom: 20px;
}

.profile {
	margin-top: 40px;
	/*padding-top: 40px;
	border-top: 1px dashed #333;*/
}
.profile img {
	display: block;
	width: 50%;
	margin: 0 auto 20px;
	border-radius: 50%;
}
.profile ul,
.profile dl {
	margin: 0;
	padding: 0;
}
.profile dl dt {
	margin: 20px 0 10px;
}

.profile ul li {
	margin-left: 20px;
	text-align: justify;
}
.profile dl dd {
	padding: 0;
	margin: 0;
}
.authority {
	margin-top: 40px;
	margin-bottom: 40px;
	background: #fff;
	padding: 20px 20px 0.1px;
}
.authority img {
	display: block;
	width: 40%;
	margin: 0 auto;
}

footer {
	background: #666;
	overflow: hidden;
	padding-bottom: 50px;
}
footer p {
	text-align: center;
}



/*------------------------------------------------------------------
  	[SNS]　SNS
------------------------------------------------------------------*/

.link_area li a[href*="amazon.co.jp"],
.link_area li a[href*="amazon.com"]         { background-color: #ff9900; }
.link_area li a[href*="codepen.io"]         { background-color: #000000; }
.link_area li a[href*="delicious.com"]      { background-color: #3399ff; }
.link_area li a[href*="deviantart.com"]     { background-color: #05cc47; }
.link_area li a[href*="digg.com"]           { background-color: #000000; }
.link_area li a[href*="dribble.com"]        { background-color: #ea4c89; }
.link_area li a[href*="dropbox.com"]        { background-color: #007ee5; }
.link_area li a[href*="facebook.com"]       { background-color: #3b5998; }
.link_area li a[href*="feedly.com"]         { background-color: #6cc655; }
.link_area li a[href*="flickr.com"]         { background-color: #0063dc; }
.link_area li a[href*="foursquare.com"]     { background-color: #f94877; }
.link_area li a[href*="github.com"]         { background-color: #181717; }
.link_area li a[href*="plus.google.com"]    { background-color: #dc4e41; }
/*.link_area li a[href*="instagram.com"]      { background-color: #125688; }*/
.link_area li a[href*="instagram.com"]      {
	background: linear-gradient(165deg, #7733f9 0%, #ff2232 80%) no-repeat; 
}
.link_area li a[href*="instagram.com"]::after     {
	content: '';
	position: absolute;
    bottom: -80%;
    opacity: 80%;
    left: -50%;
    width: 150%;
    height: 150%;
	background: radial-gradient(#ffcf00 10%, rgba(254, 97, 11, 0.65) 50%, rgba(255, 88, 96, 0) 70%);
}
.link_area li a[href*="last.fm"]            { background-color: #d51007; }
.link_area li a[href*="linkedin.com"]       { background-color: #0077b5; }
.link_area li a[href*="pinterest.com"]      { background-color: #bd081c; }
.link_area li a[href*="getpocket.com"]      { background-color: #ef3f56; }
.link_area li a[href*="reddit.com"]         { background-color: #ff4500; }
.link_area li a[href*="skype.com"],
.link_area li a[href*="skype:"]             { background-color: #00aff0; }
.link_area li a[href*="slideshare.net"]     { background-color: #2d2d2d; }
.link_area li a[href*="spotify.com"]        { background-color: #84bd00; }
.link_area li a[href*="steamcommunity.com"] { background-color: #171a21; }
.link_area li a[href*="stumbleupon.com"]    { background-color: #eb4929; }
.link_area li a[href*="tumblr.com"]         { background-color: #36465d; }
.link_area li a[href*="twitch.tv"]          { background-color: #6441a5; }
.link_area li a[href*="twitter.com"]        { background-color: #55acee; }
.link_area li a[href*="vimeo.com"]          { background-color: #1ab7ea; }
.link_area li a[href*="vine.co"]            { background-color: #11b58a; }
.link_area li a[href*="weibo.com"]          { background-color: #e6162d; }
.link_area li a[href*="whatsapp.com"]       { background-color: #64d548; }
.link_area li a[href*="wordpress.com"],
.link_area li a[href*="wordpress.org"]      { background-color: #21759b; }
.link_area li a[href*="youtube.com"]        { background-color: #cd201f; }
.link_area li a[href*="line.me"]            { background-color: #00c300; }
.link_area li a[href*="ttrinity.jp"]        { background-color: #f40000; }
.link_area li a[href*="minne.com"]          { background-color: #ea5200; }
.link_area li a[href*="thebase.in"]         { background-color: #11beae; }
.link_area li a[href*="note.com"]           { background-color: #2cb696; }

.link_area li a[href*="hotpepper.jp"]       { background-color: #e73820; }
.link_area li a[href*="tabelog.com"]        { background-color: #f3980a; }

.link_area li a[href*="beauty.hotpepper.jp"]{ background-color: #fb615f; }

.link_area li a[href$="/feed"]              { background-color: #ffa500; }

.link_area li a[href*="mailto:"]            { background-color: #aaaaaa; }

.link_area li a::before {
  color: #fff;
  display: inline-block;
  font-family: FontAwesome;
  font-size: 2.5rem;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
  text-align: center;
  z-index: 1;
}
.link_area li a[href*="codepen.io"]::before         { content: "\f1cb"; }
.link_area li a[href*="delicious.com"]::before      { content: "\f1a5"; }
.link_area li a[href*="deviantart.com"]::before     { content: "\f1bd"; }
.link_area li a[href*="digg.com"]::before           { content: "\f1a6"; }
.link_area li a[href*="dribble.com"]::before        { content: "\f17d"; }
.link_area li a[href*="dropbox.com"]::before        { content: "\f16b"; }
.link_area li a[href*="facebook.com"]::before       { content: "\f09a"; }
.link_area li a[href*="feedly.com"]::before         { content: "\f09e"; }
.link_area li a[href*="flickr.com"]::before         { content: "\f16e"; }
.link_area li a[href*="foursquare.com"]::before     { content: "\f180"; }
.link_area li a[href*="github.com"]::before         { content: "\f09b"; }
.link_area li a[href*="plus.google.com"]::before    { content: "\f0d5"; }
.link_area li a[href*="instagram.com"]::before      { content: "\f16d"; }
.link_area li a[href*="last.fm"]::before            { content: "\f202"; }
.link_area li a[href*="linkedin.com"]::before       { content: "\f0e1"; }
.link_area li a[href*="pinterest.com"]::before      { content: "\f0d2"; }
.link_area li a[href*="getpocket.com"]::before      { content: "\f265"; }
.link_area li a[href*="reddit.com"]::before         { content: "\f1a1"; }
.link_area li a[href*="skype.com"]::before,
.link_area li a[href*="skype:"]::before             { content: "\f17e"; }
.link_area li a[href*="slideshare.net"]::before     { content: "\f1e7"; }
.link_area li a[href*="spotify.com"]::before        { content: "\f1bc"; }
.link_area li a[href*="steamcommunity.com"]::before { content: "\f1b6"; }
.link_area li a[href*="stumbleupon.com"]::before    { content: "\f1a4"; }
.link_area li a[href*="tumblr.com"]::before         { content: "\f173"; }
.link_area li a[href*="twitch.tv"]::before          { content: "\f1e8"; }
.link_area li a[href*="twitter.com"]::before        { content: "\f099"; }
.link_area li a[href*="vimeo.com"]::before          { content: "\f27d"; }
.link_area li a[href*="vine.co"]::before            { content: "\f1ca"; }
.link_area li a[href*="weibo.com"]::before          { content: "\f18a"; }
.link_area li a[href*="whatsapp.com"]::before       { content: "\f232"; }
.link_area li a[href*="wordpress.com"]::before,
.link_area li a[href*="wordpress.org"]::before      { content: "\f19a"; }
.link_area li a[href*="youtube.com"]::before        { content: "\f16a"; }
.link_area li a[href*="line.me"]::before            { content: "\f3c0"; }
.link_area li a[href*="ttrinity.jp"]::before,
.link_area li a[href*="minne.com"]::before,
.link_area li a[href*="thebase.in"]::before         { content: "\f07a"; }
.link_area li a[href*="note.com"]::before           { content: "\f15b"; }

.link_area li a[href*="hotpepper.jp"]::before,
.link_area li a[href*="tabelog.com"]::before        { content: "\f2e7"; }

.link_area li a[href*="beauty.hotpepper.jp"]::before{ content: "\f0c4"; }

.link_area li a[href$="/feed"]::before              { content: "\f09e"; }

.link_area li a[href*="mailto:"]::before            { content: "\f0e0"; }