@charset "utf-8";

/* レイアウト */
@media only screen and (max-width: 1199px) {
    #header {
        height: 56px;
        width: 100%;
        min-width: 0;
        position: relative;
        left: 0;
        top: 0;
        z-index: 100;
        margin: 0;
    }
    #header_inner {
        width: 100%;
        height: 56px;
        margin: 0 auto;
        position: relative;
    }
    .mobile .mobile_header_fix #header {
        position: fixed;
    }
    .home #header {
        position: relative;
        background: #262e31;
    }
}
@media only screen and (max-width: 767px) {
    #header_inner {
        width: 100%;
    }
}

@media only screen and (max-width: 991px) {
    #left_col {
        width: auto;
        float: none;
        padding: 0 0 40px 0;
    }
    #side_col {
        width: auto;
        float: none;
        padding: 0 0 10px 0;
    }
}

@media only screen and (max-width: 767px) {
    #main_contents {
        width: auto;
        margin: 0 auto;
        padding: 0;
    }
    .mobile_header_fix #main_contents {
        padding-top: 56px;
    }
    .home.mobile_header_fix #main_contents {
        padding-top: 0;
    }
    #main_col {
        width: auto;
        margin: 20px auto 20px;
        padding: 0 20px;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
}
@media only screen and (max-width: 767px) {
    .page-template-page-noside #main_col, .page-template-page-noside-notitle #main_col, .error404 #main_col {
        width: auto;
        float: none;
        margin: 0 auto;
    }
    .page #main_col {
        margin-top: 15px;
        padding-top: 15px;
    }
}

/* ----------------------------------------------------------------------
トップページ
---------------------------------------------------------------------- */
@media only screen and (max-width: 1199px) {
    .mobile_header_fix.home #top {
        padding-top: 56px;
    }
}
@media only screen and (max-width: 767px) {
    .home #top {
        min-width: 0;
        margin: 0 0 50px 0;
    }
}

/* スライダー */
@media only screen and (max-width: 767px) {
    #header_slider {
        min-width: 0;
        height: 60vw;
    }
    #header_slider .item {
        height: 60vw;
    }
    #header_slider .item img {
        display: none;
    }
}

/* スライダーのキャッチコピー */
@media only screen and (max-width: 1199px) {
    #header_slider .caption .title,
    #header_video .caption .title,
    #header_youtube .caption .title {
        font-size: 32px !important;
    }
}
@media only screen and (max-width: 899px) {
    #header_slider .caption .title,
    #header_video .caption .title,
    #header_youtube .caption .title {
        font-size: 28px !important;
    }
}
@media only screen and (max-width: 767px) {
    #header_slider .caption .title,
    #header_video .caption .title,
    #header_youtube .caption .title {
        font-size: 22px !important;
    }
    #header_video .caption .desc,
    #header_youtube .caption .desc {
        font-size: 16px !important;
    }
    #header_slider .slick-dots {
        bottom: 100px;
    }
    #header_slider.no_slider_nav .slick-dots {
        bottom: 20px;
    }
}
@media screen and (max-width: 600px) {
    #header_slider_nav .slick-current,
    #header_slider_nav .item:hover {
        background: #fff;
    }
}
@media screen and (max-width: 549px) {
    #header_slider .caption .title,
    #header_video .caption .title,
    #header_youtube .caption .title {
        font-size: 18px !important;
    }
}
@media screen and (max-width: 399px) {
    #header_slider .caption .title,
    #header_video .caption .title,
    #header_youtube .caption .title {
        font-size: 16px !important;
    }
}
@media screen and (max-width: 349px) {
    #header_slider .caption .title,
    #header_video .caption .title,
    #header_youtube .caption .title {
        font-size: 14px !important;
    }
}

/* スライダーナビゲーションリンク */
@media only screen and (max-width:991px){
#header_slider_nav .item { padding:10px 20px; }
#header_slider_nav .catch { font-size:14px; line-height:2; }
}

/* 動画 */
@media only screen and (max-width: 767px) {
	#header_slider_nav { position:static; }
	#header_video { min-width:0; }
}

/* Youtube 動画 */
@media only screen and (max-width: 767px) {
	#header_youtube { min-width:0; }
}

/* 3点ボックスコンテンツ */
@media only screen and (max-width: 991px) {
    #index_3box_list {
        display: block;
        width: 100%;
    }
    #index_3box_list .box {
        width: 100%;
    }
    #index_3box_list .box:not(.box-3) {
        margin-bottom: 40px;
    }
    #index_3box_list .box:not(.box-1) .second-half table td:not(.pb_price_table_button) {
        border-left: 1px solid #DDDDDD;
    }
    #index_3box_list .box .second-half table td.pb_price_table_description .content {
        min-height: auto;
    }
}
@media only screen and (max-width: 767px) {
    #index_3box {
        width: auto;
        margin: 0 auto;
    }
    #index_3box_header {
        padding: 0 20px;
    }
    #index_3box_header .headline {
        font-size: 24px !important;
    }
    #index_3box_header .desc {
        text-align: left;
        font-size: 14px !important;
    }
    #index_3box_list .box .second-half table.pb_price_table_mobile {
        margin: 0;
    }
    #index_3box_list .box .second-half table th.pb_price_table_headline {
        display: none;
    }
    #index_3box_list .box .second-half table td {
        padding-left: 40px;
        padding-right: 40px;
        border-left: none;
        border-right: none;
    }
    #index_3box_list .icon {
        margin: 0 auto 31px;
    }
    #index_3box_list .catch {
        text-align: left;
        margin-bottom: 22px;
    }
    #index_3box_list .desc {
        height: auto;
        overflow: hidden;
        margin: 0 0 31px 0;
    }
}
@media screen and (max-width: 550px) {
    #index_3box {
        width: 100%;
        margin: 0 auto;
    }
    #index_3box_list .box .first-half {
        padding: 40px 20px 10px;
    }
    #index_3box_list .box .second-half table td {
        padding-left: 20px;
        padding-right: 20px;
    }
    #index_3box_list .icon {
        float: none;
        width: 128px;
        height: 128px;
        border-radius: 128px;
        position: relative;
    }
    #index_3box_list .icon span:before {
        top: 46px;
        left: 144px;
    }
    #index_3box_list .catch {
        text-align: center;
    }
    #index_3box_list .link {
        position: relative;
        right: 0;
        left: 0;
        bottom: 0;
        text-align: center;
    }
}

/* 3点ボックスコンテンツの下の画像 */
@media only screen and (max-width: 767px) {
    #index_center_image {
        margin: 0 0 25px 0;
    }
}

/* 4点ボックスコンテンツ */
@media only screen and (max-width: 767px) {
    #index_4box_list {
        flex-direction: column;
    }
    #index_4box {
        width: auto;
        margin: 0 auto 50px;
        padding: 0 20px;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
}
@media screen and (max-width: 550px) {
    #index_4box_list .box {
        height: auto;
        float: none;
    }
    #index_4box_list .box.num1,
    #index_4box .box.num3 {
        border-right: 1px solid #ddd;
    }
    #index_4box_list .box a.link {
        padding: 30px 20px;
    }
    #index_4box_list .box .image {
        float: none;
        margin: 0 auto 30px;
    }
    #index_4box_list .box.num2 .image,
    #index_4box_list .box.num4 .image {
        float: none;
        margin: 0 auto 30px;
    }
    #index_4box_list .box .catch {
        text-align: center;
    }
    #index_4box_list .box .desc {
        height: auto;
        overflow: unset;
    }
}

/* 一覧の見出し */
@media only screen and (max-width: 767px) {
    .index_list_header {
        width: auto;
        margin: 0 auto 40px;
        padding: 0 20px;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    .index_list_header .headline {
        float: none;
        text-align: center;
        font-size: 26px !important;
    }
    .index_archive_link {
        display: none;
    }
    .mobile_archive_link .index_archive_link {
        display: inline-block;
        float: none;
    }
    .mobile_archive_link {
        text-align: center;
        margin: 0 0 40px;
    }
}

/* お知らせ一覧 */
@media only screen and (max-width:767px){
#index_news_list { width:auto; margin:0 auto 50px; padding:0 20px; }
#index_news_list .mobile_archive_link { margin-top:20px;}
.news_list li { padding:0 18px; }
.news_list .date { display:inline-block; float:none; margin:17px 10px 0 0; line-height:30px; }
.news_list .category { display:inline-block; float:none; margin:17px 20px 0 0; line-height:30px; }
.news_list .title { float:none; clear:both; display:block; line-height:1.6; width:auto; }
.news_list .title a { display:block; padding:0; }
.use_animation #index_news_list .mobile_archive_link .index_archive_link { opacity:0; }
.use_animation #index_news_list.animated .mobile_archive_link .index_archive_link {
  -webkit-animation: opacityAnimation 1.0s ease forwards 1.0s;
  animation: opacityAnimation 1.0s ease forwards 1.0s;
}
}

/* ブログ一覧 */
@media only screen and (max-width:991px) {
	.blog_list {
	  display: -webkit-box;
  	display: -webkit-flex;
  	display: -ms-flexbox;
  	display: flex;
		-webkit-flex-wrap: wrap;
  	-ms-flex-wrap: wrap;
  	flex-wrap: wrap;
		-webkit-box-pack: justify;
  	-ms-flex-pack: justify;
  	justify-content: space-between;
	}
	.blog_list .box {
		margin-right: 0;
		width: calc((100% - 20px) / 2);
	}
}

@media only screen and (max-width: 767px) {
    #index_blog_list {
        margin: 0 auto 20px;
        width: calc(100% - 40px);
    }
    #index_blog_list .blog_list {
        display: block;
    }
    .blog_list .box {
        float: none;
        display: inline-block;
        vertical-align: top;
        height: auto;
        margin: 0 0 20px 0;
        width: 100%;
    }
    .blog_list .box .date {
        margin-left: 10px;
        font-size: 10px;
    }
    .blog_list .box:nth-child(3n) {
        margin-right: 20px;
    }
    .blog_list .box:nth-child(2n) {
        margin-right: 0;
    }
    .blog_list .box .image {
        height: auto;
    }
    .blog_list .box .title a {
        height: auto;
        overflow: unset;
    }
    .use_animation #index_blog_list .mobile_archive_link .index_archive_link {
        opacity: 0;
    }
    .use_animation #index_blog_list.animated .mobile_archive_link .index_archive_link {
        -webkit-animation: opacityAnimation 1.0s ease forwards 1.0s;
        animation: opacityAnimation 1.0s ease forwards 1.0s;
    }
}

@media screen and (max-width:550px) {
  .blog_list { margin:0; }
  .blog_list .box { float:none; display:block; width:100%; height:auto; margin:0 0 20px 0; }
  .blog_list .box:nth-child(3n) { margin-right:0; }
  .blog_list .box:nth-child(2n) { margin-right:0; }
}

/* 料金システム表/機能比較表 */
@media only screen and (max-width: 767px) {
    #index_price_function {
        width: auto;
        margin: 0 0 40px 0;
        padding: 0 20px;
    }
    .index_price_function + .index_price_function {
        margin-top: 20px;
    }
}

/* フリースペース */
@media only screen and (max-width: 1149px) {
    .index_free_content {
        width: auto;
        margin: 0 0 40px 0 !important;
        padding: 0 20px;
    }
    .index_free_content#index_free_content2 {
        margin-bottom: 50px !important;
        padding: 0;
    }
}
@media only screen and (max-width: 767px) {
    .index_free_content#index_free_content2 {
        padding: 0 20px;
    }
}

/* ----------------------------------------------------------------------
 大きな画像　トップページの中央画像、フッター画像、アーカイブページ上部など
---------------------------------------------------------------------- */
@media only screen and (max-width:767px){
.wide_image { /*height:400px;*/ width:100%; min-width:0; position:relative; }
.wide_image .caption { width:auto; padding:20px; }
.wide_image .caption .title { font-size:24px!important; }
.wide_image .caption .desc { text-align:left; }
.wide_image .caption .desc { font-size:14px!important;}
}

/* ----------------------------------------------------------------------
 制作実績一覧
---------------------------------------------------------------------- */
@media only screen and (max-width:767px){
#index_work_list { width:calc(100% - 40px); margin:0 20px; }
#index_work_list #work_list_wrap { padding:0; margin-bottom:0; }
#work_list_wrap { box-sizing:border-box; padding:0 20px; width:100%; }
.work_list { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
.work_list .box {
  width:100%; margin:0 0 20px 0;
}
.work_list .box .date { margin-bottom:0; }
.use_animation #index_work_list .mobile_archive_link .index_archive_link { opacity:0; }
.use_animation #index_work_list.animated .mobile_archive_link .index_archive_link {
  -webkit-animation: opacityAnimation 1.0s ease forwards 1.0s;
  animation: opacityAnimation 1.0s ease forwards 1.0s;
}
}

@media screen and (max-width:600px) {
  .work_list .box { float:none; width:100%; height:auto; margin:0 0 20px 0; padding-bottom:20px; }
  .work_list .box:nth-child(3n) { margin-right:0; }
  .work_list .box:nth-child(2n) { margin-right:0; }
  .work_list .box .title { height:auto; line-height:1.8; }
  .work_list .box .title a { padding:15px 20px; }
	.work_list .box .image { margin:75px auto 20px; }
	.work_list .box .catch { margin-left:20px; margin-right:20px; }
	.work_list .box .date { margin-left:20px; margin-right:20px; font-size:10px; }
}

/* カテゴリ―ボタン */
@media only screen and (max-width:767px){
#work_category_list { width:auto; margin:0 20px 40px; }
#work_category_list li { float:left; width:50%; height:80px; margin:0 -1px -1px 0; }
}
@media screen and (max-width:550px) {
  #work_category_list li { float:none; width:100%; margin:0 0 -1px 0; }
}

/* ----------------------------------------------------------------------
 製作実績ページ
---------------------------------------------------------------------- */
/* 見出し */
@media only screen and (max-width:767px){
#work_header { min-width:0; height:auto; }
#work_header_inner { width:auto; margin:0 auto; padding:15px 20px; }
#work_header .category { margin:0 0 10px 0; float:none; }
#work_header .title { margin:0; float:none; height:auto; line-height:1.8; }
}

/* 詳細ページ　下部 */
@media only screen and (max-width:767px){
#work_footer_data { padding:20px 20px 0; margin:0 0 40px 0; }
#work_footer_data .image {
  position:relative; top:0; left:0; margin:0 auto 30px;
  -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0);
}
#work_footer_data .data { margin:0; }
#work_footer_data .title { text-align:center; }
#work_footer_data .link { text-align:center; }
}

/* ボタン */
@media only screen and (max-width:767px){
#work_footer_data .link_button { margin:0 0 20px 0; text-align:center; }
}

/* 詳細ページ　ナビゲーション */
@media only screen and (max-width:767px){
#work_navigation a { padding:0 45px; }
#work_navigation a.prev { margin:0 4px 10px; }
#work_navigation a.next { margin:0 4px; }
}

/* ----------------------------------------------------------------------
 アーカイブページ
---------------------------------------------------------------------- */
@media only screen and (max-width:767px){
#page_header { margin:0 0 30px 0; }
#page_header .headline { font-size:24px !important; line-height:1.4; }
}

/* ページング */
@media only screen and (max-width:767px){
.page_navi { margin:0 0 30px 0; }
}

/* ----------------------------------------------------------------------
 お知らせ
---------------------------------------------------------------------- */
@media only screen and (max-width:767px){
#archive_news_list  .news_list { margin:0 0 50px 0; }
#single_news { background:#f7f7f7; padding:20px 20px 0; margin:0 0 30px 0; }
#single_news_list { margin:30px 0 30px 0; }
}

/* ----------------------------------------------------------------------
 ヘッダー
---------------------------------------------------------------------- */
/* PCのスタイルをリセット　iPadの回転対策 */
@media only screen and (max-width:1199px){
	.pc #header_logo #logo_text, .pc #header_logo #logo_image { width:auto; }
}

/* メニューボタン */
@media only screen and (max-width:1199px){
a.menu_button {
   position:absolute; right:0; z-index:9;
   display:inline-block; font-size:11px; color:#333; width:56px; height:56px; line-height:56px; text-decoration:none; text-align:center;
}
a.menu_button span { text-indent:100%; white-space:nowrap; overflow:hidden; display:block; }
a.menu_button:before {
  font-family:'design_plus'; color:#fff; display:block; position:absolute; top:0; bottom:0; left:0; right:0; margin:auto;
  font-size:18px; width:24px; height:24px; line-height:24px;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
a.menu_button:before { content:'\f0c9'; }
a.menu_button:hover, a.menu_button.active { background:#333; }
a.menu_button:hover:before, a.menu_button.active:before { color:#fff; }
}

/* グローバルメニュー */
@media only screen and (max-width: 1199px) {
    #global_menu {
        display: none;
        clear: both;
        width: 100%;
        margin: 0;
        top: 56px;
        position: absolute;
        z-index: 9;
        box-shadow: 1px 2px 1.5px rgba(0, 0, 0, 0.1);
        -moz-box-shadow: 1px 2px 1.5px rgba(0, 0, 0, 0.1);
        -webkit-box-shadow: 1px 2px 1.5px rgba(0, 0, 0, 0.1);
    }
    #global_menu ul {
        margin: 0;
    }
    #global_menu ul ul {
        display: none;
    }
    #global_menu a {
        position: relative;
        display: block;
        margin: 0;
        padding: 0 15px;
        height: 50px;
        line-height: 50px;
        overflow: hidden;
        text-decoration: none;
        color: #fff;
        background: #333;
        font-size: 13px;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    #global_menu a:hover {
        color: #fff;
    }
    #global_menu ul ul a {
        padding-left: 28px;
        background: #222;
    }
    #global_menu ul ul ul a {
        padding-left: 42px;
        background: #111;
    }
    #global_menu ul ul ul ul a {
        padding-left: 55px;
        background: #000;
    }
    #global_menu li.menu-item-has-children {
        position: relative;
    }
    #global_menu .child_menu_button {
        display: block;
        position: absolute;
        text-align: center;
        width: 60px;
        height: 49px;
        right: 0;
        top: 1px;
        z-index: 9;
        cursor: pointer;
    }
    #global_menu .child_menu_button .icon:before {
        content: '+';
        font-size: 13px;
        color: #aaa;
        text-align: center;
        display: block;
        width: 20px;
        height: 20px;
        line-height: 20px;
        border: 1px solid #555;
        border-radius: 100%;
        position: absolute;
        left: 20px;
        top: 15px;
    }
    #global_menu .child_menu_button.active .icon:before, #global_menu .child_menu_button:hover .icon:before {
        color: #fff;
        border-color: #fff;
    }
    #global_menu li.menu-item-has-children.open > .child_menu_button .icon:before {
        content: '-';
    }
    #global_menu li.menu-item-has-children.open > ul {
        display: block;
    }
}

/* ロゴ */
@media only screen and (max-width:1199px){
#logo_text { margin:0 0 0 15px; z-index:10; float:left; text-align:left; width:-webkit-calc(100% - 90px); width:-moz-calc(100% - 90px); width:calc(100% - 90px); overflow:hidden; }
#logo_text h1 { font-weight:normal; height:56px; line-height:56px; }
#logo_text a { text-decoration:none; display:block; -webkit-transition-property:none; -moz-transition-property:none; -o-transition-property:none; transition-property:none; }
#logo_text a:hover { text-decoration:underline; }
#logo_image { position:absolute; top:50%; left:calc(100% * 65 / 1280); -webkit-transform:translateY(-50%); -ms-transform:translateY(-50%); transform:translateY(-50%); }
#logo_image img.pc_logo_image { display:none; }
#logo_image img.mobile_logo_image { display:block; }
#logo_text_fixed, #logo_image_fixed { display:none; }
}

/* パンくずリンク */
@media only screen and (max-width:767px){
#bread_crumb { margin:0 0 30px 0; height:auto; line-height:1.6; min-width:0; padding:15px 20px; }
#bread_crumb ul { width:auto; margin:0 auto; }
#bread_crumb li.home a:before { top:5px; left:0; }
#bread_crumb li:after { top:2px; }
}

/* ----------------------------------------------------------------------
 記事ページ
---------------------------------------------------------------------- */
/* 記事タイトル */
@media only screen and (max-width:767px){
#post_meta_top {margin-top:0;}
#post_meta_top .date { line-height:30px; margin: 0 10px; font-size:10px; }
#post_title { font-size:24px !important; line-height:1.4; margin:0 0 20px; }
#post_image { margin-bottom:15px; }
}

/* 記事本文 */
@media only screen and (max-width:767px){
.post_content { margin:0; }
}

/* SNSボタン */
@media only screen and (max-width:767px){
#single_share_top { margin:-5px 0 10px; }
#single_share_top #share_top1 { padding-top:0; }
}

/* メタ情報 */
@media only screen and (max-width:767px){
#post_meta_bottom { margin:0 0 20px 0; background:#fff; padding:0; }
#post_meta_bottom li { display:block; margin:0 0 10px 0; border:none; font-size:12px; line-height:1.6; }
#post_meta_bottom li:last-child { border:none; margin:0; }
#post_meta_bottom li.post_category:before { top:0; left:0; }
#post_meta_bottom li.post_tag:before { top:2px; left:0; }
#post_meta_bottom li.post_author:before { top:0; left:0; }
#post_meta_bottom li.post_comment:before { top:0; left:0; }
}

/* 次の記事、前の記事 */
@media only screen and (max-width: 767px) {
    #previous_next_post {
        margin: 0 0 30px 0;
    }
    #previous_next_post .prev_post, #previous_next_post .next_post {
        width: 50%;
    }
    #previous_next_post .prev_post {
        margin-bottom: -1px;
    }
    #previous_next_post a {
        text-align: center;
        height: 50px;
        line-height: 50px;
    }
    #previous_next_post .prev_post a::before {
        line-height: 50px;
        height: 50px;
    }
    #previous_next_post .next_post a::before {
        line-height: 50px;
        height: 50px;
    }
    #previous_next_post a span {
        height: auto;
    }
    #previous_next_post span.nav {
        display: block;
    }
    #previous_next_post span.title {
        display: none;
    }
    #previous_next_post .prev_post span.nav {
        margin-left: -35px;
    }
    #previous_next_post .next_post span.nav {
        margin-right: -35px;
    }
}

/* 広告 */
@media only screen and (max-width:991px) {
#single_banner_area { margin:0 0 15px 0; text-align:center; }
#single_banner_area .single_banner_left { float:none; padding:0 0 15px 0; margin:0 auto; }
#single_banner_area .single_banner_right { float:none; padding:0 0 15px 0; margin:0 auto; }
#single_banner_area img { max-width:100%; height:auto; display:inline; }
}

/* 広告2 */
@media only screen and (max-width:991px) {
#single_banner_area_bottom { margin: -20px 0 0; text-align:center; }
#single_banner_area_bottom .single_banner_left { float:none; padding:0 0 15px 0; margin:0 auto; }
#single_banner_area_bottom .single_banner_right { float:none; padding:0; margin:0 auto; }
#single_banner_area_bottom img { max-width:100%; height:auto; display:inline; }
}

/* 広告（ショートコードver） */
@media only screen and (max-width:991px) {
#single_banner_area2 { margin:0 0 15px 0; text-align:center; }
#single_banner_area2 .single_banner_left { float:none; padding:0 0 15px 0; margin:0 auto; }
#single_banner_area2 .single_banner_right { float:none; padding:0 0 5px 0; margin:0 auto; }
#single_banner_area2 img { max-width:100%; height:auto; display:inline; }
}

/* 関連記事 */
@media only screen and (max-width: 767px) {
    #related_post .headline {
        height: 45px;
        line-height: 45px;
        margin-bottom: 15px;
    }
    #related_post {
        overflow: hidden;
    }
    #related_post ol {
        margin-right: -15px;
    }
    #related_post li, #related_post li:nth-child(4n) {
        width: 33.33333%;
        width: -webkit-calc(100% / 3 - 15px);
        width: -moz-calc(100% / 3 - 15px);
        width: calc(100% / 3 - 15px);
        margin: 0 15px 15px 0;
    }
    #related_post li:nth-child(3n) {
        margin-right: 0;
    }
    #related_post li .image {
        margin: 0 0 15px 0;
        display: block;
        width: 100%;
        height: auto;
    }
    #related_post li .image img {
        /* スマホではhoverが効かないためアニメーションは無効にして、height:auto;が有効になるように以下を設定する */
        width: 100% !important;
        height: auto !important;
        -webkit-transform: none !important;
        -webkit-transition-property: none !important;
        -webkit-transition: none !important;
        -moz-transform: none !important;
        -moz-transition-property: none !important;
        -moz-transition: none !important;
        -ms-transform: none !important;
        -o-transform: none !important;
        -o-transition-property: none !important;
        -o-transition: none !important;
        transform: none !important;
        transition-property: none !important;
        transition: none !important;
    }
}
@media screen and (max-width:550px) {
  #related_post ol { margin-right:-15px; }
  #related_post li, #related_post li:nth-child(4n) {
    width:50%; width:-webkit-calc(50% - 15px); width:-moz-calc(50% - 15px); width:calc(50% - 15px);
    margin:0 15px 15px 0;
  }
  #related_post li:nth-child(3n) { margin-right:15px; }
}

/* ----------------------------------------------------------------------
 コメント
---------------------------------------------------------------------- */
@media only screen and (max-width:767px){
#comment_headline { margin:0 0 15px 0; }
#comment_area, #trackback_area { margin:15px 0 0; }
}

/* コメント・トラックバックのタブ */
@media only screen and (max-width:767px){
#comment_header { position:relative; margin:0 0 15px; }
#comment_header ul { margin:0; }
#comment_header ul li.comment_switch_active a:after, #comment_header #comment_closed p:after { display:none; }
}
@media screen and (max-width:500px) {
  #comment_header ul li { float:none; text-align:center; margin:0; width:100%; }
}

/*  コメントの基本部分 */
@media only screen and (max-width:767px){
.comment { padding:10px 10px 0; }
}

/* コメントの情報部分 */
@media only screen and (max-width:767px){
.comment-meta-left { float:left; width:100%; }
}

/* フォーム部分 */
@media only screen and (max-width:767px){
.comment_form_wrapper { border:1px solid #ccc; margin:0 0 25px; padding:15px; background:#fff; }
}

/* ----------------------------------------------------------------------
 フッター
---------------------------------------------------------------------- */
/* フッター上部 */
@media only screen and (max-width:767px){
#footer_top { min-width:0; }
#footer_top_inner { width:auto; padding:35px 0 10px; }
}

/* widget */
@media only screen and (max-width:991px){
  #footer_widget { margin:50px 20px; width:auto; font-size:0; text-align:left; }
}

/* メニュー */
@media only screen and (max-width:991px){
	#footer_menu { margin:0 0 0 20px; width:auto; font-size:0; text-align:left; }
	#footer_menu ul, #footer_menu ul:last-child {
  	display:block; vertical-align:top; float:left; width:50%; text-align:left; margin:0 20px 40px 0;
  	width:-webkit-calc(50% - 20px); width:-moz-calc(50% - 20px); width:calc(50% - 20px);
	}
}

/* 住所 */
@media only screen and (max-width:767px){
#footer_address { margin:0 20px; text-align:center; border-top:1px dotted #ccc; padding-top:40px; }
#footer_address .info { font-size:12px; }
#footer_address li { display:block; margin:0; }
}

/* フッター下部 */
@media only screen and (max-width:767px){
#footer_bottom { width:auto; min-width:0; height:auto; background:none !important; }
#footer_bottom_inner { width:auto; height:auto; }
#footer_bottom a { }
}

/* SNSボタン */
@media only screen and (max-width:767px){
#footer_social_link { position:relative; left:0; right:0; margin:auto; top:0; background:#000; text-align:center; padding:0 0 40px 0; }
#footer_social_link li { float:none; display:inline-block; margin:0 2px; }
}

/* ページ上部へ戻るボタン */
@media only screen and (max-width:767px){
#return_top {
  position:fixed; right:0; bottom:0; z-index:999;
  -webkit-transform: translate3d(0,120%,0); transform: translate3d(0,120%,0);
  -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s;
}
#return_top.active { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); }
#return_top a { position:relative; display:block; height:60px; width:60px; text-decoration:none; border-radius:0; }
#return_top span { text-indent:100%; white-space:nowrap; overflow:hidden; display:block; }
#return_top a:before {
  font-family:'design_plus'; color:#fff; font-size:18px; display:block; position:absolute; width:23px; height:23px;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
#return_top a:before { content:'\e911'; top:22px; left:21px; }
}

/* ----------------------------------------------------------------------
 サイドコンテンツ
---------------------------------------------------------------------- */
/* 基本設定 */
@media only screen and (max-width:767px){
.side_headline { text-align:center; }
.side_widget { margin:0 0 25px 0; font-size:12px; position:relative; }
.side_widget:last-child, .side_widget:only-child  { margin:0; }
}

/* search */
@media only screen and (max-width:767px){
.widget_search #search-box, .widget_search #s, .side_widget.google_search #s { width:75%; height:40px; margin:0 0 5px 0; }
.widget_search #search-btn input, .widget_search #searchsubmit, .side_widget.google_search #searchsubmit { width:25%; }
}

/* プロジェクト */
@media only screen and (max-width: 767px) {
    .work_list_widget li, .footer_widget .work_list_widget li {
        margin: 0 5px 5px 0 !important;
        width: auto;
        height: auto;
        width: -webkit-calc(100% / 3 - 5px);
        width: -moz-calc(100% / 3 - 5px);
        width: calc(100% / 3 - 5px);
    }
    .work_list_widget .image {
        width: 100% !important;
        height: auto !important;
    }
    .work_list_widget .image img {
        /* スマホではhoverが効かないためアニメーションは無効にして、height:auto;が有効になるように以下を設定する */
        width: 100% !important;
        height: auto !important;
        -webkit-transform: none !important;
        -webkit-transition-property: none !important;
        -webkit-transition: none !important;
        -moz-transform: none !important;
        -moz-transition-property: none !important;
        -moz-transition: none !important;
        -ms-transform: none !important;
        -o-transform: none !important;
        -o-transition-property: none !important;
        -o-transition: none !important;
        transform: none !important;
        transition-property: none !important;
        transition: none !important;
    }
}