@charset "UTF-8";



/* 共通コンテナー1000pxまたは95% */
.container1000-left{
margin:30px auto 0px auto;
width:90%;
text-align:left;
}

/* 　背景をグレー */
.bg-gray{
background:#f8f8f8;
padding:10px 10px 10px 10px;
margin:0px 0px 30px 0px;
border-radius:4px;
margin:0;
}

/* 　背景をブルー */
.bg-blue{
background:#45bdcf;
padding:10px 10px 10px 10px;
margin:0px 0px 30px 0px;
border-radius:4px;
margin:0;
color:#ffffff;
}




/* ページタイトル部分 */
.page-top{
width:100%;

flex-wrap:wrap;
justify-content:space-between;
margin:0 auto;
padding:0px;
}
.page-top h1{
margin-bottom:0;
line-height:100%;
}
.pt-2column{

}
.pt-2column:first-child{
}
.pt-2column:last-child{
text-align:center;
margin-bottom:0px;
background:#ffffff url(images/page-top-illust_bg.png) no-repeat top center;
background-size:150px;
}
.page-top img{
max-width:140px;
margin-top:-20px;
margin-bottom:0px;

}

/* ページタイトル上コピー */
.page-copy{
font-size:22px;
font-family: 'Noto Serif JP', serif;
font-weight: 300; /* light */
margin:0px;
border-bottom:#45bdcf 1px solid;
padding-bottom:5px;
line-height:120%;
}


/* ページタイトル カテゴリー */
.category{
}
.category h4{
font-weight: 400; /* normal */
margin:0px 0px 0px 0px;
}
.category a{
color:#515151;
text-decoration:none;
}
.category a:hover{
color:#45bdcf;
}



/* 均等　2カラム */
.column2-50oya{
width:100%;
flex-wrap:wrap;
justify-content:space-between;
margin:0 auto;
padding:0px;
}
.column2-50{
text-align:left;
margin:0px 0px 20px 0px;
}
.column2-50:last-child{
margin:0px 0px 20px 0px;
}

.column2-50oya ul{
margin:0;
padding:0;
line-height:140%;
}
.column2-50oya ul li{
margin:0px 0px 5px 20px;
padding:0;
}
.column2-50oya ul li a{
text-decoration:none;
color:#515151;
}
.column2-50oya ul li a:hover{
color:#45bdcf;
}

/* 均等　2カラムの中の画像　半分画像 */
.img-right{
text-align:center;
}
.img50{
width:80%;
margin:0 auto;
}


/* コンセプト コンテナー */
.container-concept{
width:100%;
margin:0px auto 25px auto;

}
/* コンセプト 導入文 */
.concept-read{
font-size:16px;
font-family: 'Noto Serif JP', serif;
margin:5px 0px 20px 0px;
}

/* 事務所概要　一覧table */
table.profile-list{
margin:0px 0px 20px 0px;
}
table.profile-list th{
text-align:left;
border-bottom:#45bdcf 1px solid;
font-weight: 400; /* normal */
line-height:140%;
padding:11px 5px 10px 5px;
white-space: nowrap
}
table.profile-list td{
text-align:left;
border-bottom:#dfdfdf 1px solid;
font-weight: 400; /* normal */
line-height:140%;
padding:11px 5px 10px 5px;
}

table.profile-list a{
text-decoration:none;
color:#515151;
}
table.profile-list a:hover{
text-decoration:underline;
color:#515151;
}

/* 事務所概要　ご挨拶 */
.greeting{
width:100%;
margin:0 auto;
padding:0px;
text-align:justify
}

.greeting img{
float:right;
max-width:120px;
margin:0px 0px 15px 15px;
}
.greeting:after {
content: "";
clear: both;
height: 0;
display: block;
visibility: hidden;
}

/* 事務所概要　黒枠 */
.black-bg{
background:#000000;
color:#ffffff;
padding:10px 10px 8px 10px;
border-radius:4px;
}

/* 事務所概要 吹き出し用ブルーBG　※下に画像が必要 */
.blue-bg{
background:#45bdcf;
color:#ffffff;
padding:10px 10px 8px 10px;
border-radius:5px;
margin:0;
}
/* 事務所概要 吹き出し用ブルーBG　※下の画像 */
.fukidashi-triangle{
text-align:center;
margin-top:-7px;
}


/* サービス内容 キャッチコピー*/
h2.catchphrase {
font-size:19px;margin:10px 0px 10px 0px;
font-family: 'Noto Serif JP', serif;
font-weight: 400; /* normal */
color: #45bdcf;
border-top:#45bdcf 1px solid;
border-bottom:#45bdcf 1px solid;
padding:7px 0px 5px 0px;
margin:0px 0px 15px 0px;
}


/* サービス内容　料金表 */
table.price-list{
  border-collapse:separate;
  border-spacing: 2px;
  width: 100%;
margin:0px 0px 20px 0px;
}

table.price-list th,table.price-list td{
  border-radius: 5px;
  text-align: center;
  padding: 10px 5px;
}

table.price-list th{
  background-color: #45bdcf;
  color: white;
}

table.price-list td{
  background-color: #f8f8f8;
}

table.price-list a{
color:#515151;
text-decoration:underline;
}
table.price-list a:hover{
color:#45bdcf;
}
table.price-list caption{
text-align:left;
font-weight: 700; /* bold */
}


/* サービス内容　その他の一覧 */
.other-service-list{
background:#f8f8f8 url(services/images/design-list_bg.png) no-repeat bottom right;
background-size:150px;
padding:15px 15px 15px 15px;
margin:0px 0px 30px 0px;
border-radius:4px;
text-align:left;
margin:0;
font-size:13px;
		}
.other-service-list ul{
list-style:none;
margin:0px 0px 0px 15px;
padding:0px;
}
.other-service-list ul li{
margin:3px 0px 0px;
}
/* サービス内容　その他の一覧内の複数カラム */
.column-kintou-oya{
width:100%;
max-width:900px;

flex-wrap:wrap;
justify-content:space-between;
margin:0 auto;
padding:0px;
text-align:left;
}
.column-kintou-ko{
text-align:left;
margin:0px 0px 0px 0px;
}
.column-kintou-ko:last-child{
margin:0px 0px 0px 0px;
}

.column-kintou-ko ul a{
text-decoration:none;
color:#515151;
}
.column-kintou-ko ul a:hover{
text-decoration:none;
color:#45bdcf;
}


/* サービス内容　デザイン見本 1個並び */
.design-sample-1ko ul{
list-style:none;
margin:0;
padding:0px;
}
.design-sample-1ko ul li{
text-align:left;
margin:5px 0px 0px 0px;
padding:0px;
}
.design-sample-1ko ul li img{
width:100%;
margin:0px 0px;
padding:0px;
vertical-align: bottom;
}
/* サービス内容　デザイン見本 2個並び */
.design-sample-2ko ul{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
list-style:none;
margin:0;
padding:0px;
}
.design-sample-2ko ul li{
flex:1 0 48%;
text-align:left;
line-height:100%;
margin:5px 2px 0px 3px;
padding:0px 0px;
}
.design-sample-2ko ul li:last-child{
margin:5px 2px 0px 3px;
}

.design-sample-2ko ul li img{
width:100%;

margin:0px 0px;
vertical-align: bottom;
}

/* サービス内容　デザイン見本 3個並び */
.design-sample-3ko ul{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
list-style:none;
margin:0;
padding:0px;
}
.design-sample-3ko ul li{
flex:1 0 30%;
text-align:left;
margin:1px;
margin:5px 2px 0px 3px;
}
.design-sample-3ko ul li:last-child{
margin:5px 2px 0px 2px;
}
.design-sample-3ko ul li img{
width:100%;
margin:0px 0px;
vertical-align: bottom;
}


/* サービス内容 くくり（線を引く） */
.draw-line{
background:#ffffff url(services/images/dot-line.png) no-repeat bottom left;
text-align:right;
margin:0;
}
.draw-line img{
width:115px;
vertical-align: bottom;
margin-bottom:22px;
}



/* サービス内容 ロゴ見本の罫線 */
ul.logo-sample{
}
ul.logo-sample img{
border:#f0f0f0 1px solid;
}


/* サービス内容 カテゴリートップの挿絵 フロー */
.flow-image-illust{
text-align:center;
margin:0px 0px 0px 0px;
padding:10px 0px 0px 0px;
}
.flow-image-illust img{
width:100%;
max-width:400px;
}


/* 制作実績　詳細ページ 1個並び */
.work-img-1ko,
.work-img-1ko-big,
.work-img-1ko-middle{
text-align:center;
}
.work-img-1ko ul,
.work-img-1ko-big ul,
.work-img-1ko-middle ul{
flex-wrap:wrap;
justify-content:space-between;
list-style:none;
margin:0;
padding:0px;
}
.work-img-1ko ul li,
.work-img-1ko-big ul li,
.work-img-1ko-middle ul li{
flex:1 0 95%;
text-align:left;
line-height:100%;
margin:8px 8px 8px 8px;
padding:0px 0px;
}

.work-img-1ko ul li img,
.work-img-1ko-big ul li img,
.work-img-1ko-middle ul li img{
width:100%;
max-width:800px;
margin:0px 0px;
}


/* 制作実績　詳細ページ 2個並び */
.work-img-2ko{
text-align:center;
}
.work-img-2ko ul{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
list-style:none;
margin:0;
padding:0px;

}
.work-img-2ko ul li{
flex:1 0 95%;
text-align:left;
line-height:100%;
margin:8px 8px 8px 8px;
padding:0px 0px;
}

.work-img-2ko ul li img{
width:100%;
max-width:800px;
margin:0px 0px;
}

/* 制作実績・クレジット */
.creator{
}
.creator a{
text-decoration:underline;
color:#515151;
}
.creator a:hover{
text-decoration:none;
color:#45bdcf;
}


/* 実績ページ メディア掲載 */
ul.media-2nd{
width:100%;
display:flex;
flex-wrap:wrap;
justify-content:space-between;
margin:0px 0px 5px 0px;
padding:0px;
list-style:none;
line-height:150%;
}
ul.media-2nd li{
text-align:left;
width: 130px;
margin:0px 0px 0px 0px;
padding:0px;
background:#f0f0f0;
}
ul.media-2nd li:last-child{
width: calc(100% - 150px);
text-align:left;
list-style:none;
margin:0;
background:#f8f8f8;
padding:10px 10px 10px 10px;
}

ul.media-2nd li img{
width:100%;
max-width:130px;
vertical-align: bottom;

pointer-events: auto;

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

ul.media-2nd h4{
margin-bottom:8px;
padding:0;
font-size:14px;
}



/* 実績 メディア掲載 紹介と挿絵 */
.works-media{
position: relative;
 z-index: 0;
 margin: 0;
 padding: 0;
 margin: auto;
 width: 100%;
}
.works-media-list{
 width: 100%;
}
.works-media-illust{
position: absolute;
 top: -58px;
 left: 0;

 z-index: 3;

 width: 50%;
margin-left:50%;

text-align:right;
}
.works-media-illust img{
width:90px;

}


/* 実績 メディア掲載ページ 下の挿絵 */
.media-sashie{
}
.media-sashie img{
width:120px;
}


/* 実績 メディア掲載ページ 文字の枠 */
.media-txt{
background:#ffffff;
padding:0px;
}
.media-txt h3{
color:#515151;
border-bottom:#45bdcf 1px solid;
}
/* 実績 メディア掲載ページ 写真の枠 */
.media-photo{
background:#f8f8f8;
padding:25px;
border-radius:5px;
}
.media-photo img.yoko-main{
width:100%;
max-width:400px;
}.media-photo img.yoko-sub{
width:70%;
max-width:300px;
}
.media-photo img.tate-main{
width:100%;
max-width:300px;
}
.media-photo img.tate-sub{
width:50%;
max-width:220px;
}




/* ワークフロー */
.flow-waku-all{

}
.flow-number{
font-family: 'Roboto Condensed', sans-serif;
text-align:center;
font-size:25px;
line-height:100%;
color:#ffffff;
padding:0px 0px 0px 0px;
margin:0px 0px 10px 0px;
width:40px;
}
.flow-number-line{

background-color:#45bdcf;
color:#ffffff;
width:40px;
height:40px;
display:flex;
border-radius:17px;
justify-content: center;
align-items: center;
float:left;
}
.flow-moji-waku{
float:left;
width: calc(100% - 60px);
padding:0px 0px 0px 10px;
}
.flow-title{
font-size:24px;
margin:0px 0px 5px 0px;
}
.flow-text{
}
.flow-illust{
clear: both;
width:100%;
text-align:center;
padding-top:20px;
}
.flow-illust img{
width:75%;
max-width:300px;
}
.flow-waku-all:after{
content: "";
clear: both;
height: 0;
display: block;
visibility: hidden;
}

.flow-line{
border-top:#cccccc 2px dotted;
margin:0px 0px 30px 0px;
}






/* 各メニュー イメージイラスト */
.menu-image-illust{
text-align:center;
margin-bottom:30px;
}
.menu-image-illust img{
width:85%;
max-width:360px;

}
.menu-image-branding{
text-align:center;
}
.menu-image-branding img{
width:75%;
max-width:360px;
}



/* お客様の声 その他わく */
.others-voice{
border:3px #f1f1f1 solid;
border-radius:5px;
padding:12px 15px 12px 10px;
}
.others-voice ul{
margin:0;
padding:0px 0px 0px 20px;
}

/* お客様の声 1コマ */
.voice-1koma{
margin:0px 0px 35px 0px;
}
/* お客様の声 文字エリア */
.voice-txt{
}
.voice-txt h3{
font-size:16px;
margin-bottom:5px;
font-weight:normal;
}
.voice-txt p.work-contents{
font-size:11px;
padding-bottom:5px;
border-bottom:#45bdcf 2px solid;
margin-bottom:20px;
font-weight: 700; /* bold */
}
/* お客様の声 画像エリア */
.voice-works{
background:#f8f8f8;
padding:25px 25px 15px 25px;
border-radius:5px;
text-align:center;
}
.voice-works img{
width:100%;
max-width:300px;
margin-bottom:10px;
}



/* コンセプト島イラスト1000pxまたは95% */
.container-concept-shima{
margin:40px auto 0px auto;
width:100%;
text-align:center;
}
.container-concept-shima img{
width:100%;
vertical-align: bottom;
}
.concept footer{
font-family: sans-serif;
text-align:center;
font-size:11px;
padding:0px 0px;
margin:0px 0px 0px 0px;
width:100%;
}

/* コンセプト 雲背景 */
.kumo-1{
background:transparent url(concept/images/concept-kumo1.png) no-repeat top center;
background-size:60%;
margin:0px auto 0px auto;
width:100%;
}
.kumo-2{
background:transparent url(concept/images/concept-kumo2.png) no-repeat center left;
background-size:30%;
margin:0px auto 0px auto;
width:100%;
}
.kumo-3{
background:transparent url(concept/images/concept-kumo3.png) no-repeat bottom right;
background-size:30%;
margin:0px auto 0px auto;
width:100%;
}

/* リンク枠 地色 */
.link-waku{
background:#f6f6f6;
border-radius:10px;
padding:15px;
}

/* サイトマップ 地色 */
ul.kaisou-1st{
background:#f6f6f6;
border-radius:10px;
padding-top:15px;
padding-bottom:15px;
padding-right:20px;
}
ul.kaisou-2nd{
background:#ffffff;
border-radius:5px;
padding-top:15px;
padding-bottom:15px;
margin:7px 0px 12px 0px;
}
/* サイトマップ第2階層　2カラム */

.column2-sitemap-oya{
width:100%;
flex-wrap:wrap;
justify-content:space-between;
margin:0 auto;
padding:0px;
}
.column2-50{
text-align:left;
margin:0px 0px 0px 0px;
}
.column2-50:last-child{
margin:0px 0px 0px 0px;
}

/* 料金の目安 挿絵 */
.price-image{
text-align:center;
margin-bottom:15px;
}
.price-image img{
width:60%;
max-width:320px;
}


/* よくある質問 1コマ */
.faq-1koma{
margin:0px 0px 40px 0px;
padding:0px 0px 0px 0px;
}
/* よくある質問 質問文字 */
.faq-1koma h3{
margin:30px 0px 10px 0px;
font-weight: 700; /* bold */
}



/* よくある質問 文字と絵 */
.faq-all{
margin:0px 0px 0px 0px;
}
/* よくある質問 文字 */
.faq-moji{
width:100%
margin:0px 0px 0px 0px;
}
/* よくある質問 絵 */
.faq-illust{
padding:0px;
margin:0px 0px 0px 0px;
width:100%;
text-align:center;
}
.faq-illust img{
width:50%;
max-width:300px;
}



/* サービス ショップカード スタンプ */
.stamp{
width:100%;
margin:0 auto;
padding:0px;
text-align:justify
}

.stamp img{
float:right;
max-width:120px;
margin:0px 0px 15px 15px;
}
.stamp:after {
content: "";
clear: both;
height: 0;
display: block;
visibility: hidden;
}



/* リンクページ 下の挿絵 */
.link-sashie{
margin-top:-60px;
}
.link-sashie img{
width:200px;
}


/* 実績ページ 並べ替え ボタン */
.category-btn{
width:95%;
font-size:11px;
font-family: 'Roboto Condensed', sans-serif;
color:#9f9f9f;
text-align:center;
margin:0px 0px 10px 0px;
}


.category-btn ul{
list-style:none;
margin:0;
padding:0px;
}
.category-btn ul li{
float:left;
margin:0px 0px 0px 0px;
display:inline;
}

.category-btn ul:after{
content: "";
clear: both;
height: 0;
display: block;
visibility: hidden;
}













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


/* 共通コンテナー1000pxまたは95% */
.container1000-left{
margin:40px auto 0px auto;
width:95%;
max-width:980px;
text-align:left;
}


/* ページタイトル部分 */
.page-top{
width:100%;
display:flex;
flex-wrap:wrap;
justify-content:space-between;
margin:0 auto;
padding:0px;
}
.pt-2column{
width: calc(100% - 240px);
}
.pt-2column:last-child{
text-align:right;
width: 240px;
background:#ffffff url(images/page-top-illust_bg.png) no-repeat center right;
background-size:200px;
}
.page-top img{
max-width:180px;
margin-top:-25px;
}



/* ページタイトル上コピー */
.page-copy{
font-size:40px;
font-family: 'Noto Serif JP', serif;
font-weight: 300; /* light */
margin:0px;
}


/* 均等　2カラム */

.column2-50oya{
width:100%;
display:flex;
flex-wrap:wrap;
justify-content:space-between;
margin:0 auto;
padding:0px;

}
.column2-50{
flex:1;
text-align:left;
margin:0px 40px 20px 0px;
text-align:justify
}
.column2-50:last-child{
margin:0px 0px 20px 0px;
}

/* 均等　2カラムの中の画像　半分画像 */
.img-right{
text-align:right;
}
.img50{
width:100%;
margin:0 auto;
}


/* コンセプト コンテナー */
.container-concept{
width:320px;
margin:0px auto 25px auto;

}

/* 事務所概要　ご挨拶 */
.greeting{
width:100%;

margin:0 auto;
padding:0px;
text-align:justify
}

.greeting img{
float:right;
max-width:155px;
margin:0px 0px 15px 20px;
}
.greeting:after {
content: "";
clear: both;
height: 0;
display: block;
visibility: hidden;
}


/* サービス内容 キャッチコピー*/
h2.catchphrase {
font-size:24px;margin:10px 0px 10px 0px;
font-family: 'Noto Serif JP', serif;
font-weight: 400; /* normal */
color: #45bdcf;
border-top:#45bdcf 1px solid;
border-bottom:#45bdcf 1px solid;
padding:7px 0px 5px 0px;
margin:5px 0px 20px 0px;
}
/* サービス内容　その他の一覧 */
.other-service-list{
background:#f8f8f8;
background-image:none;
padding:15px 15px 15px 15px;
margin:0px 0px 30px 0px;
border-radius:4px;
text-align:left;
margin:0;
font-size:13px;
		}


/* サービス内容　その他の一覧内の複数カラム */
.column-kintou-oya{
width:100%;
max-width:900px;
display:flex;
flex-wrap:wrap;
justify-content:space-between;
margin:0 auto 0 auto;
padding:0px;

}
.column-kintou-ko{
flex:1;
text-align:left;
margin:0px 20px 0px 0px;
flex: 1;
border-right:1px #cccccc solid;
}
.column-kintou-ko:last-child{
margin:0px 0px 0px 0px;
border-right:none;
}


/* サービス内容　デザイン見本 1個並び */
.design-sample-1ko ul{
list-style:none;
margin:0;
padding:0px;
}
.design-sample-1ko ul li{
text-align:left;
margin:5px 0px 0px 0px;
}
.design-sample-1ko ul li img{
width:100%;
margin:0px 0px;
vertical-align: bottom;
}
/* サービス内容　デザイン見本 2個並び */
.design-sample-2ko ul{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
list-style:none;
margin:0;
padding:0px;
}
.design-sample-2ko ul li{
flex:1 0 48%;
text-align:left;
margin:1px;
margin:5px 5px 0px 0px;
}
.design-sample-2ko ul li:last-child{
margin:5px 0px 0px 0px;
}
.design-sample-2ko ul li img{
width:100%;
margin:0px 0px;
vertical-align: bottom;
}


/* サービス内容　デザイン見本 3個並び */
.design-sample-3ko ul{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
list-style:none;
margin:0;
padding:0px;
}
.design-sample-3ko ul li{
flex:1 0 30%;
text-align:left;
margin:1px;
margin:5px 2px 0px 3px;
}
.design-sample-3ko ul li:last-child{
margin:5px 2px 0px 3px;
}
.design-sample-3ko ul li img{
width:100%;
margin:0px 0px;
vertical-align: bottom;
}


/* サービス内容 くくり（線を引く） */
.draw-line{
background:#ffffff url(services/images/dot-line.png) no-repeat bottom left;
text-align:right;
margin:0;
}
.draw-line img{
width:160px;
vertical-align: bottom;
margin-bottom:18px;
}


/* サービス内容 カテゴリートップの挿絵 フロー */
.flow-image-illust{
text-align:center;
margin:0;
padding:0px 0px 0px 0px;
}
.flow-image-illust img{
width:80%;
}


/* 制作実績　詳細ページ 1個並び */
.work-img-1ko ul{
flex-wrap:wrap;
justify-content:space-between;
list-style:none;
margin:0;
padding:0px;
}
.work-img-1ko ul li{
text-align:center;
margin:10px 0px 30px 0px;
}
.work-img-1ko ul li img{
width:100%;
max-width:460px;
}
/* 制作実績　詳細ページ 1個並び-特大 */
.work-img-1ko-big ul{
flex-wrap:wrap;
justify-content:space-between;
list-style:none;
margin:0;
padding:0px;
}
.work-img-1ko-big ul li{
text-align:center;
margin:10px 0px 30px 0px;
}
.work-img-1ko-big ul li img{
width:100%;
max-width:870px;
}
.work-img-1ko-big ul li.widthmax700 img{
width:100%;
max-width:700px;
}
.work-img-1ko-big ul li.widthmax800 img{
width:100%;
max-width:800px;
}

/* 制作実績　詳細ページ 1個並び-中くらい600px */
.work-img-1ko-middle ul{
flex-wrap:wrap;
justify-content:space-between;
list-style:none;
margin:0;
padding:0px;
}
.work-img-1ko-middle ul li{
text-align:center;
margin:10px 0px 30px 0px;
}
.work-img-1ko-middle ul li img{
width:100%;
max-width:600px;
}


/* 制作実績　詳細ページ 2個並び */
.work-img-2ko ul{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
list-style:none;
margin:0;
padding:0px;
}
.work-img-2ko ul li{
flex:1 0 45%;
text-align:center;
margin:10px 5px 10px 5px;
}
.work-img-2ko ul li img{
width:100%;
max-width:460px;
}





/* 実績ページ　メディア掲載 */
ul.media-2nd{
width:100%;
display:flex;
flex-wrap:wrap;
justify-content:space-between;
margin:0px 0px 5px 0px;
padding:0px;
list-style:none;
}
ul.media-2nd li{
text-align:left;
width: 170px;
margin:0px 0px 0px 0px;
padding:0px;
background:#f8f8f8;
}
ul.media-2nd li:last-child{
width: calc(100% - 190px);
text-align:left;
list-style:none;
margin:0;
background:#f8f8f8;
padding:10px 10px 10px 10px;
}

ul.media-2nd li img{
width:100%;
max-width:170px;
vertical-align: bottom;
}


/* 実績 メディア掲載 紹介と挿絵 */
.works-media{
position: relative;
 z-index: 0;
 margin: 0;
 padding: 0;
 margin: auto;
 width: 100%;
}
.works-media-list{
 width: 100%;
}
.works-media-illust{
position: absolute;
 top: 0px;
 left: 0;

 z-index: 3;

 width: 50%;
margin-left:50%;

text-align:right;
}
.works-media-illust img{
width:130px;
}




/* 実績 メディア掲載ページ 下の挿絵 */
.media-sashie{
}
.media-sashie img{
width:150px;
}

.media-photo img.yoko-main{
width:48%;
max-width:400px;
}.media-photo img.yoko-sub{
width:30%;
max-width:300px;
}
.media-photo img.tate-main{
width:40%;
max-width:300px;
}
.media-photo img.tate-sub{
width:28%;
max-width:220px;
}

/* ワークフロー */
.flow-waku-all{
}
.flow-number{
font-family: 'Roboto Condensed', sans-serif;
text-align:center;
font-size:40px;
line-height:100%;

padding:0px 0px 0px 0px;
margin:0px 0px 20px 0px;
width:70px;
}
.flow-number-line{
background-color:#45bdcf;
color:#ffffff;
width:70px;
height:70px;
display:flex;
border-radius:30px;
justify-content: center;
align-items: center;
float:left;
}
.flow-moji-waku{
float:left;
width: calc(100% - 425px);
padding:0px 0px 0px 30px;
}
.flow-title{
font-size:25px;
padding:0px;
margin:0px 0px 2px 0px;
}
.flow-text{
}
.flow-illust{
clear: none;
float:left;
width:320px;
text-align:right;
padding-top:0px;
}
.flow-illust img{
width:100%;
max-width:250px;
}
.flow-waku-all:after{
content: "";
clear: both;
height: 0;
display: block;
visibility: hidden;
}


/* 各メニュー イメージイラスト */
.menu-image-illust{
text-align:center;
margin-bottom:0px;
}
.menu-image-illust img{
width:65%;
max-width:800px;
}
.menu-image-branding{
text-align:center;
}
.menu-image-branding img{
width:75%;
max-width:800px;
}



/* お客様の声 1コマ */
.voice-1koma{
margin:0px 0px 45px 0px;
display:flex;
}
/* お客様の声 文字エリア */
.voice-txt{

width: calc(100% - 320px);
padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px;
}
/* お客様の声 画像エリア */
.voice-works{
background:#f8f8f8;
padding:25px;
margin:0px 0px 0px 20px;
border-radius:5px;
width: 300px;
text-align:left
}
.voice-works img{
width: 100%;
max-width:300px;
}


/* コンセプト島イラスト1000pxまたは95% */
.container-concept-shima{
margin:60px auto 0px auto;
width:95%;
max-width:980px;
text-align:center;
}
.container-concept-shima img{
width:100%;
vertical-align: bottom;
}


/* コンセプト 雲背景 */
.kumo-1{
background:transparent url(concept/images/concept-kumo1.png) no-repeat top center;
background-size:40%;
margin:0px auto 0px auto;
width:95%;
max-width:980px;
}
.kumo-2{
background:transparent url(concept/images/concept-kumo2.png) no-repeat center left;
background-size:20%;
margin:0px auto 0px auto;
width:95%;
max-width:980px;
}
.kumo-3{
background:transparent url(concept/images/concept-kumo3.png) no-repeat bottom right;
background-size:20%;
margin:0px auto 0px auto;
width:95%;
max-width:980px;
}


/* サイトマップ第2階層　2カラム */

.column2-sitemap-oya{
width:100%;
display:flex;
flex-wrap:wrap;
justify-content:space-between;
margin:0 auto;
padding:0px;

}
.column2-sitemap{
flex:1;
text-align:left;
margin:0px 40px 0px 0px;
text-align:justify
}
.column2-sitemap:last-child{
margin:0px 0px 0px 0px;
}



/* 料金の目安 挿絵 */
.price-image{
text-align:center;
margin-bottom:0px;
}
.price-image img{
width:55%;
max-width:320px;
}


/* よくある質問 1コマ */
.faq-1koma{
margin:0px 0px 40px 0px;
padding:0px 0px 0px 0px;
}
/* よくある質問 質問文字 */
.faq-1koma h3{
margin:50px 0px 10px 0px;
font-weight: 700; /* bold */
}



/* よくある質問 文字と絵 */
.faq-all{
margin:0px 0px 0px 0px;
display:flex;
width:100%;
}
/* よくある質問 文字 */
.faq-moji{
width: calc(100% - 300px);
padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px;
}
/* よくある質問 絵 */
.faq-illust{
padding:0px;
margin:0px 0px 0px 50px;
width: 250px;
text-align:right;
}
.faq-illust img{
width:200px;
}


/* サービス ショップカード スタンプ */
.stamp{
width:100%;

margin:0 auto;
padding:0px;
text-align:justify
}

.stamp img{
float:right;
max-width:100px;
margin:0px 0px 15px 20px;
}
.stamp:after {
content: "";
clear: both;
height: 0;
display: block;
visibility: hidden;
}


/* リンクページ 下の挿絵 */
.link-sashie{
margin-top:-70px;
}
.link-sashie img{
width:220px;
}


/* 実績ページ 並べ替え ボタン */
.category-btn{
width:100%;
max-width:980px;
margin:10px auto 10px auto;
font-size:12px;
font-family: 'Roboto Condensed', sans-serif;
color:#9f9f9f;
text-align:right;
}





}