@charset "UTF-8";
/* タナカの絵 */


/* Pの文字割付け */
p{
text-align: justify;
text-justify: inter-ideograph;
font-weight: 400; /* normal */
}

/* 表の文字太さ */
table th{
font-weight: 400; /* normal */
}
table td{
font-weight: 400; /* normal */
}

/* 補助ページ */
.auxiliary{
}
.auxiliary a{
color:#000000;
text-decoration:none;
}
.auxiliary a:hover{
color:#4DBAA9;
text-decoration:none;
}


/* 表 プロフィール */
.profile-data{
margin:0px auto 35px auto;
text-align:left;
width:80%;
}
.profile-data th{
border-bottom:#61c1be 1px solid;
margin-left:2px;
padding:15px 0px;
vertical-align:top;
white-space: nowrap;
}
.profile-data td{
border-bottom:#dbdcdc 1px solid;
padding:15px 0px;
vertical-align:top;
}

/* 画像の保存を禁止する方法 （ヘッダー以外）　これアクオサイトの！！！！ */
.prologue img, .container1000 img, .container1000-left img {
pointer-events: none;

-webkit-touch-callout:none;
  -webkit-user-select:none;
  -moz-touch-callout:none;
  -moz-user-select:none;
  touch-callout:none;
  user-select:none;
}



/* 基本設定　ページ全体 */
body {
font-size:15px;
font-family: sans-serif;
font-weight: 400; /* normal */
margin:0;
padding:0;
line-height: 1.6;
background-color:#ffffff;
}

/* 文字情報-一覧-表 */

h1{font-size:20px;margin:15px 0px 5px 0px;font-weight: 700; /* bold */}
h2{font-size:20px;margin:10px 0px 10px 0px;font-weight: 700; /* bold */}
h3{font-size:16px;margin:0px 0px 10px 0px;font-weight: 700; /* bold */}
h4{font-size:14px;margin:0px 0px 5px 0px;font-weight: 700; /* bold */}
h5{font-size:12px;margin:0px 0px 5px 0px;font-weight: 700; /* bold */}
.gf-rc{font-family: 'Roboto Condensed', sans-serif;}
.size10{font-size:10px;}
.size12{font-size:12px;}
.size13{font-size:13px;}
.size16{font-size:16px;}
.size18{font-size:18px;}
.size20{font-size:20px;}
.size25{font-size:25px;}
.slim{font-weight:normal;}
.color-blue{color:#4DBAA9;}
.color-gray{color:#959595;}
.color-white{color:#ffffff;}
.weight-bold{font-weight: 700; /* bold */}

.top0{margin-top:0px;}
.top3{margin-top:3px;}
.top5{margin-top:5px;}
.top10{margin-top:10px;}
.top15{margin-top:15px;}
.top20{margin-top:20px;}
.top30{margin-top:30px;}
.top50{margin-top:50px;}
.bottom0{margin-bottom:0;padding-bottom:0}
.bottom10{margin-bottom:10px;}
.bottom20{margin-bottom:20px;}
.bottom30{margin-bottom:30px;}
.bottom40{margin-bottom:40px;}
.bottom50{margin-bottom:50px;}
.bottom100{margin-bottom:100px;}
.ichi-center{text-align:center;}
.ichi-right{text-align:right;}
.ichi-left{text-align:left;}

.color-blue{
color:#4dbaa9;
}
.color-yellow{
color:#f8ba00;
}


img{
vertical-align:top;
}


/* 青マル リスト */
ul.aomaru-list{
list-style-type:none;
margin:0px 0px 15px 0px;
padding:0px 15px 0px 35px;
line-height:1.7;
}

ul.aomaru-list li{
margin:0px;
padding:0px 0px 0px 0px;
}

ul.aomaru-list li:before {
 position: relative;        /* 位置調整 */
  top: -2px;                 /* 位置調整 */
  left: -15px;
  display: inline-block;     /* インラインブロックにする */
  width: 6px;               /* 幅指定 */
  height: 6px;              /* 高さ指定 */
  content: '';               /* 空の要素作成 */
  border-radius: 30%;        /* 要素を丸くする */
  background: #4DBAA9;       /* 背景色指定 */
    margin-right: -10px;
}



/* リンクテキストボタン */
.pagelink-btn{
margin:30px 0px 50px 0px;
}
.pagelink-btn a{
font-size:14px;
padding:16px 25px 15px 45px;
line-height:1.0;
background:#000000 url(images/link-btn_bg.png) no-repeat left center;
color:#ffffff;
text-decoration:none;
border-radius:40px;
display:inline;
font-weight: 700; /* bold */
margin:20px 0px 30px 0px;
}
.pagelink-btn a:hover{
background:#4DBAA9 url(images/link-btn_bg.png) no-repeat left center;
}


/* グレー地のリンクテキストボタン */
.link-textbox{
margin:20px 0px 5px 0px;
}
.link-textbox a{
font-size:14px;
padding:10px 40px 10px 40px;
line-height:1.0;
background:#f4f4f4;
text-decoration:none;
border-radius:5px;
display:inline;
font-weight: 400; /* normal */
color:#000000;
}
.link-textbox a:hover{
background:#000000;
color:#ffffff;
}



/* ヘッダー */
header{

}
header .container{
font-size:14px;
margin:0px auto 0px auto;
width:95%;
text-align:center;
padding-top:20px;

}

/*ハンバーガー、ナビメニューのスタイルを指定*/
nav.NavMenu{
position: fixed; /*表示位置を固定*/
z-index: 100; /*重ね順を変更*/
top: 0; /*表示位置を指定*/
left: 0; /*表示位置を指定*/
background:#ffffff ;/*背景を白にする*/
background-size:165px 55px;
background-color:rgba(255,255,255,1);
color: #000; /*文字色を黒にする*/
text-align: center; /*テキストを中央揃え*/
width: 100%; /*全幅表示*/
transform: translateY(-100%); /*ナビを上に隠す*/
transition: all 0.5s; /*アニメーションの時間を指定*/

/* height:100%;高さ全体*/
padding-bottom:100px;
border-bottom:#cccccc 1px solid;

/*filter: drop-shadow(0px 1px 3px rgba(0,0,0,0.5));影*/

}

nav.NavMenu ul{
background-color:transparent; /*背景を透明にする*/
width: 100%;
margin: 0 auto;
padding: 0;

}

nav.NavMenu ul li{
font-size: 14px;
list-style-type: none;
padding: 0px 0px;
width: 100%;
font-weight: 700; /* bold */
margin:10px 0px;

}

nav.NavMenu ul li:last-child{
padding-bottom: 0;
border-bottom: none; /*最後のメニュー項目のみ下線を消す*/
}

nav.NavMenu ul li a{
display: inline-block; /*クリックできる領域を広げる*/
color: #000;
padding: 0.9em 3px 0.8em 3px;
text-decoration:none;
border-radius:3px;
width:260px;
margin:auto;
text-align:center;
border:1px #f1f1f1 solid;
background: #ffffff;
background-color: rgba(255,255,255,1.0);
}
nav.NavMenu ul li a:hover{
color:#000000;
background:#eeeeee;
border:1px #eeeeee solid;
}
/*トグルボタンが押されたときに付与するクラス*/
nav.NavMenu.active{
transform: translateY(0%);
}
/*トグルボタンのスタイルを指定*/
.Toggle {
display: block;
position: fixed;    /* bodyに対しての絶対位置指定 */
right: 23px;
top: 12px;
width: 30px;
height: 30px;
cursor: pointer;
z-index: 200;
}
 
.Toggle span {
    display: block;
    position: absolute;
    width: 30px;
    border-bottom: solid 3px #000;
    -webkit-transition: .35s ease-in-out;	/*変化の速度を指定*/
    -moz-transition: .35s ease-in-out;		/*変化の速度を指定*/
    transition: .35s ease-in-out;			/*変化の速度を指定*/
    left: 6px;

}
 
.Toggle span:nth-child(1) {
    top: 9px;
}
 
.Toggle span:nth-child(2) {
    top: 19px;
}
 
.Toggle span:nth-child(3) {
    top: 29px;

}
 
/* 最初のspanをマイナス45度に */
.Toggle.active span:nth-child(1) {
    top: 18px;
    left: 6px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
 
/* 2番目と3番目のspanを45度に */
.Toggle.active span:nth-child(2),
.Toggle.active span:nth-child(3) {
    top: 18px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* ハンバーガーの下に文字を追加 */
.menu-moji{
display: block;
position: fixed;
    top: 45px;
    right: 18px;
font-size:13px;
z-index: 199;
}



/* ナビの中のロゴ */
.navi-logo{
margin:25px 0px 0px 0px;
}


/* ヘッダー */
header .container{
font-size:14px;
margin:0px auto 0px auto;
width:95%;
text-align:center;
padding-top:20px;
}
.site-logo img{
width:230px;
margin-bottom:0px;
}
.site-logo-s img{
width:200px;
margin-bottom:0px;
}


/* 共通コンテナー1200pxまたは90% */
.container1200{
margin:0px auto 0px auto;
width:92%;
text-align:center;
padding-top:15px;
padding-bottom:15px;
}

/* フォーム用　コンテナー1200pxまたは90% */
.form-container1200{
margin:0px auto 0px auto;
width:92%;

padding-top:15px;
padding-bottom:15px;
}

/* 共通コンテナー800pxまたは90% */
.container800{
margin:0px auto 0px auto;
width:92%;
text-align:center;
padding-top:15px;
padding-bottom:15px;
}


/* フッター */
footer{
font-family: sans-serif;
font-weight: 400; /* normal */
text-align:center;
font-size:12px;
padding:0px 0px;
margin:0px 0px 0px 0px;
width:100%;
}


/* フッター内　黒地 */
.footer-black{background-color:#000000;color:#ffffff;padding:15px 0px;}
.footer-black a{
font-family: 'Noto Sans JP', sans-serif;
font-size:20px;
font-weight: 700; /* bold */
color:#ffffff;
text-decoration:none;
margin:0px 10px 0px 10px;
display:block;
border-radius:5px;
padding:15px 5px 15px 50px;
width:250px;
margin:0 auto;
background:#3E3A39 url(images/mail-icon.png) center left no-repeat;

}
.footer-black a:hover{
background-color:#252525;

}
/* フッター内　白地 */
.footer-white{background-color:#ffffff;color:#000000;padding:5px 0px;line-height:100%;}
.footer-white a{
color:#000000;
text-decoration:none;
margin:8px 5px 0px 5px;
display:inline-block;
}
.footer-white a:hover{
color:#4DBAA9;

}


/* ロゴ下の説明 */
.site-name_top{
font-size:11px;
ftont-family: 'Oxygen', sans-serif;
margin:5px 0px 15px 0px;
}
.site-name_comm{
font-size:12px;
font-family: 'Oxygen', sans-serif;
margin:3px 0px 10px 0px;
}
.site-name_menu{
font-size:12px;
font-family: 'Oxygen', sans-serif;
margin:5px 0px 30px 0px;
}



/* TOPコンテンツ　作家と裏方　画像 */
.top2way{
width:100%;
margin:0 auto;
}
.top2way:after{
}
.top2way-sakka_img{
width:100%;
text-align:center;
margin:0px 0px 0px 0px;
background-color:#f8ba00;
border-top:#4dbaa9 20px solid;
}
.top2way-urakata_img{
width:100%;
text-align:center;
margin:0px 0px 0px 0px;
background-color:#ffffff;
}
/* TOPコンテンツ　作家と裏方　文字　top2wayは画像と共通 */
.top2way-sakka_txt{
width:100%;
text-align:center;
margin:0px 0px 0px 0px;
}
.top2way-urakata_txt{
width:100%;
text-align:center;
margin:0px 0px 0px 0px;
}
.text-box_w370{
width:80%;
max-width:370px;
margin:0px auto;
text-align:left;
}
.top-title-A{
font-family: 'Noto Sans JP', sans-serif;
font-weight: 400;
font-size:39px;
line-height:120%;
}
.top-title-B{
font-family: 'Noto Sans JP', sans-serif;
font-weight: 700;
font-size:21px;
line-height:140%;
}
/* TOPからのページ振り分けボタン */
.sakkapage-link{
width:90%;
margin:0px auto 0px auto;
}
.sakkapage-link a{
border-radius:10px;
padding:10px 0px;
margin: 30px auto 50px auto;
background-color:#4dbaa9;
display:block;
}
.sakkapage-link a:hover{
background-color:#eeeeee;
}
.works-link{
width:90%;
margin:0px auto 0px auto;
}
.works-link a{
border-radius:10px;
padding:10px 0px;
margin: 30px auto 50px auto;
background-color:#f8ba00;
display:block;
}
.works-link a:hover{
background-color:#eeeeee;
}

/* illust10　薄いグレー地 */
.bg-gray1{background-color:#eeeeef;color:#000000;padding:50px 0px;margin:30px 0px 0px 0px;}
/* illust10バナー */
.illust10-banner{
width:90%;
max-width:600px;
margin: 0px auto 0px auto;
}
.illust10-banner img{
width:100%;
}
/* お知らせ　やや濃いグレー地 */
.bg-gray2{background-color:#e1e1e1;color:#000000;padding:50px 0px;margin:0;}
/* お知らせ */
.news{
width:90%;
max-width:600px;
margin: 0px auto 0px auto;
background-color:#ffffff;
border-radius:8px;
font-size:13px;
}
.news h3{
padding:15px 20px 0px 20px;
}
.news-1koma{
margin:0px 20px 0px 20px;
padding:10px 0px 10px 0px;
border-top:#333333 1px dotted;
}
.news-contents{
}
.news-contents p{
margin:0px 0px 3px 0px;
}
.news-contents h5{
margin:0px 0px 3px 0px;
}





/* カテゴリーTOP　タイトル */
.category-title-A{
font-family: 'Noto Sans JP', sans-serif;
font-weight: 600;
font-size:36px;
line-height:100%;
margin:0px 0px 10px 0px;
}
.category-title-B{
font-family: 'Noto Sans JP', sans-serif;
font-weight: 700;
font-size:18px;
line-height:120%;
margin:0px 0px 20px 0px;
}

/* カテゴリーTOP　タイトルイラスト */
.title-illust img{
margin-top:0;
margin-bottom:0;
width:80%;
max-width:400px;
}

/* カテゴリー内　タイトルC */
.category-title-C{
font-family: 'Noto Sans JP', sans-serif;
font-weight: 600;
font-size:28px;
line-height:120%;
margin:0px 0px 10px 0px;
}
/* カテゴリー内　タイトルD */
.category-title-D{
font-family: 'Noto Sans JP', sans-serif;
font-weight: 700;
font-size:15px;
line-height:120%;
margin:0px 0px 10px 0px;
}

/* カテゴリー内　本文700 */
.textwidth700{
width:100%;
max-width:700px;
margin:0 auto;
}

/* クライアントワーク背景 */
.container-bg-yellow{
margin:0;
background-color:#f8ba00;

}

/* 作家活動　背景 */
.container-bg-blue{
margin:0;
background-color:#4dbaa9;

}

/* 一番下（フッター上）のマージン調整 */
.container-waku-last{
padding-bottom:5px;
}

/* プロフィール　背景 */
.container-bg-gray{
margin:0;
background-color:#f7f7f7;

}

/* 白枠1200 */
.bg-white1200{
background-color:#ffffff;
border-radius:10px;
padding:15px;
}

/* ライトグレー枠1200 */
.bg-rightgray1200{
background-color:#f6f6f6;
border-radius:10px;
padding:15px;
}


/* ギャラリー（works）　カラム */
.items{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.item{
	width: 50%;
	background: transparent;
overflow: hidden;
  cursor: pointer;
}
.item img{
	width: 100%;
	margin:0px;
transition-duration: 0.5s;
}
.item a:hover img{
  transform: scale(1.2);
  transition-duration: 0.5s;
}

/* ギャラリー（作家illust）　カラム */
.items-creation{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.item-creation{
	width: 50%;
	background: transparent;

}
.item-creation img{
	width: 100%;
	margin:0px;
}


/* ギャラリー（作家illust）　キャプション */
figure {
  position: relative;
  overflow: hidden;
    width: 100%;
margin:0px;
}
figcaption {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.6);
  -webkit-transition: .3s;
  transition: .3s;
  opacity: 0;
}
figure:hover figcaption {
  opacity: 1;
}
figcaption h3{
color:#ffffff;
font-size:12px;
margin-top:47%;
}



/* デザインギャラリー　カラム */
.items-design{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-bottom:20px;
}
.item-design{
	width: 100%;
	background: #ffffff;
}
.item-design img{
	width: 100%;
}



/* 作家活動　HARAPEKO 物語 */
h2.harapeko-logo{
text-align:center;
margin:10px 0px 20px 0px;
}
h2.harapeko-logo img{
width:90%;
max-width:400px;
}
h3.harapeko_story-read{
text-align:center;
font-size:18px;
font-family: serif;
}
p.harapeko_story-text{
text-align:center;
font-size:14px;
font-feature-settings: "palt" 1;
font-family: serif;
}


/* ナカナカLOGO */
.nakanaka-logo{
margin-top:20px;
margin-bottom:0px;
}
.nakanaka-logo img{
max-width:130px;
}
/* たなかLOGO */
.tanaka-logo{
margin-top:20px;
margin-bottom:0px;
}
.tanaka-logo img{
max-width:200px;
}

/* 作家イラストギャラリー　タイトル */
h2.title50{
font-family: 'Noto Sans JP', sans-serif;
font-weight: 400;
font-size:30px;
margin-top:0;
}

/* works イラスト相談ボタン */
.illust-contact_btn a{
font-family: 'Noto Sans JP', sans-serif;
font-size:20px;
font-weight: 700; /* bold */
line-height:1.4;
color:#ffffff;
text-decoration:none;
margin:0px 10px 0px 10px;
display:block;
border-radius:5px;
padding:15px 0px 15px 110px;
width:67%;
max-width:250px;
margin:0 auto;
background:#000000 url(images/mail-icon.png) center left no-repeat;
text-align:left;
}
.illust-contact_btn a:hover{
background:#3E3A39 url(images/mail-icon.png) center left no-repeat;
}



/* AQUOサイトリンク */
.link-btn{
border:#dbdcdc 1px solid;
border-radius:10px;
width:100%;
max-width:400px;
margin:0 auto;
}
.link-btn img{
width:100%;
max-width:400px;
}
.link-btn a{
font-family: 'Noto Sans JP', sans-serif;
font-size:20px;
font-weight: 700; /* bold */
color:#000000;
text-decoration:none;
margin:0px 10px 0px 10px;
display:block;
border-radius:10px;
padding:0px;
margin:0 auto;
background:#ffffff;
}
.link-btn a:hover{
background-color:#f7f7f7;

}


/* harapeko 上部　背景イラスト */
.harapeko-bg1{
background-image:none;
}
.harapeko-smartphone{
width:100%;
}
.harapeko-smartphone img{
width:100%;
max-width:800px;
}




/* harapeko メイン　2カラム */
.harapeko-box1{
width:100%;
margin:20px auto 20px auto;
}
.harapeko-box1_l{
width:100%;
max-width:650px;
text-align:center;
margin:0px auto 0px auto;
}
.harapeko-box1_r{
width:100%;
max-width:650px;
text-align:center;
margin:15px auto 0px auto;
background-color:#ffffff;
}
.harapeko-box1_r p{
margin:0px 0px 0px 0px;
}
.harapeko-box1_l img{
width:100%;
max-width:650px;
margin:0px 0px 0px 0px;
text-align:center;
}
.harapeko-box1:after{
content: "";
clear: both;
height: 0;
display: block;
visibility: hidden;
}


/* harapeko カラム 均等 */
.flow-column{
justify-content: space-between;
margin:0px 0px 30px 0px;
}
.flow-column_item{
width: 100%;
text-align:left;
margin:0px 15px 0px 0px;
}
.flow-column_item img{
width: 100%;
margin:0px 0px 0px 0px;
}
.flow-column_item p{
width: 100%;
margin:0px 0px 20px 0px;
}


/* グリーティングカード タイトルロゴ*/
.Greeting-card h4{text-align:center}
.Greeting-card h4 img{
width:80%;
max-width:300px;
margin:20px auto 0px auto;
}



/* 個別ページ　イラスト画像*/
.illust-kobetsu{
}
.illust-kobetsu img{
width:100%;
max-width:1000px;

}

/* 個別ページ　キャプション*/
.illust-caption{
text-align:left;
margin-top:20px;
font-size:13px;
}

/* 個別ページ　戻るボタン*/
.back-list{
width:200px;
margin:30px auto 30px auto;
font-size:13px;
}
.back-list a{
background:#000000 url(images/back-list-icon.png) center left no-repeat;
padding:8px 12px 8px 30px;
color:#ffffff;
text-decoration:none;
border-radius:5px;
}
.back-list a:hover{
background:#4d4d4d url(images/back-list-icon.png) center left no-repeat;
color:#ffffff;
text-decoration:none;

}


/* リンクページ　テキストリンク*/
.linkpage{
list-style: none;
}
.linkpage a{
text-decoration:underbar;
color:#000000;
}
.linkpage a:hover{
text-decoration:none;
color:#666464;
}
.linkpage li{
margin-bottom:30px;
}
.linkpage h3{
line-height:1;
margin-bottom:15px;
}
.linkpage p{
line-height:1.2;
margin-top:5px;
}


/* 問い合わせ窓口　枠*/
.waku-grayline{
border:1px #cccccc solid;
padding:15px 15px 0px 15px;
border-radius:5px;
margin:15px 0px;
}





/* フッター　メインメニュー*/
.footer-bar{
width:100%;
margin:10px auto 10px auto ;
}
.footer-bar:after{
content: "";
clear: both;
height: 0;
display: block;
visibility: hidden;
}
.footer-works-bar{
background:#f8ba00;
background:#ffffff;
text-align:center;
margin:0px 0px 7px 0px;
}
.footer-works-bar img{
margin:0px 0px 0px 0px;
border-bottom:1px #4d4d4d solid;
}
.footer-works-bar img:hover{
opacity: 0.5 ;
}

.footer-creation-bar{
background:#4dbaa9;
background:#ffffff;
background:#ffffff;
text-align:center;
margin:0px 0px 7px 0px;
}
.footer-creation-bar img{
margin:0px 0px 0px 0px;
border-bottom:1px #4d4d4d solid;
}
.footer-creation-bar img:hover{
opacity: 0.5 ;
}














/* レスポンシブ・ブレークポイント */
	
@media(min-width:768px){



/*トグルボタンのスタイルを指定*/
.Toggle {
display: block;
position: fixed;    /* bodyに対しての絶対位置指定 */
right: 45px;
top: 20px;
width: 33px;
height: 0px;
cursor: pointer;
z-index: 200;
}
.Toggle span {
    display: block;
    position: absolute;
    width: 40px;
    border-bottom: solid 3px #000;
    -webkit-transition: .35s ease-in-out;	/*変化の速度を指定*/
    -moz-transition: .35s ease-in-out;		/*変化の速度を指定*/
    transition: .35s ease-in-out;			/*変化の速度を指定*/
    left: 6px;

}
 
.Toggle span:nth-child(1) {
    top: 9px;
}
 
.Toggle span:nth-child(2) {
    top: 19px;
}
 
.Toggle span:nth-child(3) {
    top: 29px;

}
 
/* 最初のspanをマイナス45度に */
.Toggle.active span:nth-child(1) {
    top: 18px;
    left: 6px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
 
/* 2番目と3番目のspanを45度に */
.Toggle.active span:nth-child(2),
.Toggle.active span:nth-child(3) {
    top: 18px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}
		

/* ハンバーガーの下に文字を追加 */
.menu-moji{
display: block;
position: fixed;
    top: 50px;
    right: 35px;
font-size:16px;
z-index: 190;
}








/* ヘッダー */
header .container{
font-size:14px;
margin:0px auto 0px auto;
width:95%;
text-align:center;
padding-top:20px;
}
.site-logo img{
width:280px;
margin-bottom:0px;
}
.site-logo-s img{
width:200px;
margin-bottom:0px;
}




/* 共通コンテナー1200pxまたは90% */
.container1200{
margin:0px auto 0px auto;
width:95%;
max-width:1100px;
text-align:center;
padding-top:20px;
padding-bottom:20px;
}

/* 共通コンテナー800pxまたは90% */
.container800{
margin:0px auto 0px auto;
width:95%;
max-width:800px;
text-align:center;
padding-top:20px;
padding-bottom:20px;
}



/* ロゴ下の説明 */
.site-name_top{
font-size:15px;
ftont-family: 'Oxygen', sans-serif;
margin:5px 0px 15px 0px;
}
.site-name_comm{
font-size:12px;
font-family: 'Oxygen', sans-serif;
margin:3px 0px 10px 0px;
}
.site-name_menu{
font-size:13px;
font-family: 'Oxygen', sans-serif;
margin:5px 0px 30px 0px;
}



/* TOPコンテンツ　作家と裏方　画像 */
.top2way{
width:100%;
margin:0 auto;
}
.top2way:after{
content: "";
clear: both;
height: 0;
display: block;
visibility: hidden;
}
.top2way-sakka_img{
float:right;
width:50%;
text-align:center;
margin-right:0px;
margin:0px 0px 0px 0px;
background-color:#ffffff;
border-top:#4dbaa9 35px solid;
}
.top2way-urakata_img{
float:left;
width:50%;
text-align:center;
margin:0px 0px 0px 0px;
background-color:#ffffff;
border-top:#f8ba00 35px solid;
}
/* スマホ表示の順でHTMLでPCで左右を逆で */
.reverse-row-order {
  flex-direction: row-reverse;
}
/* TOPコンテンツ　作家と裏方　文字　top2wayは画像と共通 */
.top2way-sakka_txt{
float:right;
width:50%;
text-align:center;
margin-right:0px;
margin:0px 0px 0px 0px;
}
.top2way-urakata_txt{
float:left;
width:50%;
text-align:center;
margin:0px 0px 0px 0px;
}
.text-box_w370{
width:370px;
margin:0px auto;
text-align:left;
}
/* TOPからのページ振り分けボタン */
.sakkapage-link{
width:370px;
border-radius:10px;
margin: 40px auto 50px auto;
}
.works-link{
width:370px;
border-radius:10px;
margin: 40px auto 50px auto;
}




/* カテゴリーTOP　タイトル */
.category-title-A{
font-family: 'Noto Sans JP', sans-serif;
font-weight: 600;
font-size:45px;
line-height:100%;
margin:0px 0px 10px 0px;
}
.category-title-B{
font-family: 'Noto Sans JP', sans-serif;
font-weight: 700;
font-size:20px;
line-height:120%;
margin:0px 0px 20px 0px;
}

/* カテゴリーTOP　タイトルイラスト */
.title-illust img{
margin-top:0;
margin-bottom:0;
width:400px;
}


/* カテゴリー内　タイトルC */
.category-title-C{
font-family: 'Noto Sans JP', sans-serif;
font-weight: 600;
font-size:40px;
line-height:120%;
margin:0px 0px 10px 0px;
}
/* カテゴリー内　タイトルD */
.category-title-D{
font-family: 'Noto Sans JP', sans-serif;
font-weight: 700;
font-size:18px;
line-height:120%;
margin:0px 0px 20px 0px;
}


/* カテゴリー内　本文700 */
.textwidth700{
width:700px;
margin:0 auto;
}


/* クライアントワーク背景 */
.container-bg-yellow{
margin:0;
background-color:#f8ba00;

}

/* 作家活動　背景 */
.container-bg-blue{
margin:0;
background-color:#4dbaa9;
}

/* 一番下（フッター上）のマージン調整 */
.container-waku-last{
padding-bottom:30px;
}

/* プロフィール　背景 */
.container-bg-gray{
margin:0;
background-color:#f7f7f7;
}

/* 白枠1200 */
.bg-white1200{
background-color:#ffffff;
border-radius:15px;
padding:30px;
}


/* ライトグレー枠1200 */
.bg-rightgray1200{
background-color:#f6f6f6;
border-radius:15px;
padding:30px;
}



/* ギャラリー（works）　カラム */
.items{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	
}
.item{
	width: 25%;
	background: transparent;
}
.item img{
	width: 100%;
　　margin:0px;
}

/* ギャラリー（作家illust）　カラム */
.items-creation{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	
}
.item-creation{
	width: 25%;
	background: transparent;
}
.item-creation img{
	width: 100%;
　　margin:0px;
}




/* デザインギャラリー　カラム */
.items-design{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-bottom:30px;
}
.item-design{
	width: 50%;
	background: #ffffff;
}
.item-design img{
	width: 100%;
}


/* 作家活動　HARAPEKO 物語 */
h2.harapeko-logo{
text-align:center;
margin:10px 0px 20px 0px;
}
h2.harapeko-logo img{
max-width:400px;
}
h3.harapeko_story-read{
text-align:center;
font-size:26px;
font-family: serif;
}
p.harapeko_story-text{
text-align:center;
font-size:16px;
font-feature-settings:initial;
font-family: serif;
}

/* 作家イラストギャラリー　タイトル */
h2.title50{
font-family: 'Noto Sans JP', sans-serif;
font-weight: 400;
font-size:45px;
}

/* works イラスト相談ボタン */
.illust-contact_btn a{
font-family: 'Noto Sans JP', sans-serif;
font-size:20px;
font-weight: 700; /* bold */
line-height:1.4;
color:#ffffff;
text-decoration:none;
margin:0px 10px 0px 10px;
display:block;
border-radius:5px;
padding:15px 0px 15px 130px;
width:260px;
margin:0 auto;
background:#000000 url(images/mail-icon.png) center left no-repeat;
text-align:left;
}
.illust-contact_btn a:hover{
background:#3E3A39 url(images/mail-icon.png) center left no-repeat;
}


/* AQUOサイトリンク */
.link-btn{
border:#dbdcdc 1px solid;
border-radius:10px;
width:360px;
margin:0 auto;
}
.link-btn a{
font-family: 'Noto Sans JP', sans-serif;
font-size:20px;
font-weight: 700; /* bold */
color:#000000;
text-decoration:none;
margin:0px 10px 0px 10px;
display:block;
border-radius:10px;
padding:0px;
margin:0 auto;
background:#ffffff;
}
.link-btn a:hover{
background-color:#f7f7f7;

}


/* harapeko 上部　背景イラスト */
.harapeko-bg1{
background-image:url(images/creation/harapeko-bg0.png);
background-repeat:no-repeat;
background-color:transparent;
background-position:center center;
background-size:contain;
width:100%;
margin-bottom:50px;
}
.harapeko-smartphone{
display:none;
}






/* harapeko メイン　2カラム */
.harapeko-box1{
margin:30px auto 30px auto;
width:100%;
}
.harapeko-box1_l{
float:left;
width:65%;
max-width:650px;
text-align:left;
margin:0px 0px 0px 0px;
}
.harapeko-box1_r{
float:left;
width:35%;

text-align:left;
margin:0px 0px 0px 0px;
background-color:#ffffff;
}
.harapeko-box1_r p{
margin:0px 0px 0px 20px;
}
.harapeko-box1_l img{
max-width:650px;
margin:0px 0px 0px 0px;
}
.harapeko-box1:after{
content: "";
clear: both;
height: 0;
display: block;
visibility: hidden;
}

/* harapeko カラム 均等 */
.flow-column{
display: flex;
justify-content: space-between;
margin:0px 0px 30px 0px;
}
.flow-column_item{
width: 100%;
text-align:left;
margin:0px 15px 0px 0px;
}
.flow-column_item img{
width: 100%;
margin:0px 0px 0px 0px;
}
.flow-column_item p{
width: 100%;
margin:0px 0px 20px 0px;
}
.flow-column_item:last-child {
margin:0px 0px 0px 0px;
}

/* グリーティングカード タイトルロゴ*/
.Greeting-card h4{text-align:center}
.Greeting-card h4 img{
width:300px;
margin:0px auto 0px auto;
}
.Greeting-card .flow-column_item{text-align:center}
.Greeting-card .flow-column_item img{
width:90%;
margin:10px auto 0px auto;
}

/* 幅400のボックス*/
.text-read650{
width:650px;
margin:0px auto 0px auto;
}


/* 個別ページ　イラスト画像*/
.illust-kobetsu{
}
.illust-kobetsu img{
width:100%;
max-width:1200px;
}



/* 個別ページ　戻るボタン*/
.back-list{
width:200px;
margin:30px auto 30px auto;
font-size:13px;
}
.back-list a{
background:#000000 url(images/back-list-icon.png) center left no-repeat;
padding:8px 12px 8px 30px;
color:#ffffff;
text-decoration:none;
border-radius:5px;
}
.back-list a:hover{
background:#4d4d4d url(images/back-list-icon.png) center left no-repeat;
color:#ffffff;
text-decoration:none;

}



/* フッター　メインメニュー*/
.footer-bar{
width:100%;
margin:15px auto 20px auto ;
}
.footer-bar:after{
content: "";
clear: both;
height: 0;
display: block;
visibility: hidden;
}
.footer-works-bar{
background:#f8ba00;
background:#ffffff;
float:left;
width:50%;
text-align:right;
margin:0px 0px 0px 0px;
}
.footer-works-bar img{
margin:0px 5px 0px 0px;
border-bottom:1px #4d4d4d solid;
}
.footer-creation-bar{
background:#4dbaa9;
background:#ffffff;
float:left;
width:50%;
text-align:left;
margin:0px 0px 0px 0px;
border-radius:5px;
}
.footer-creation-bar img{
margin:0px 0px 0px 5px;
border-bottom:1px #4d4d4d solid;
}









}