/*
Theme Name: contents.css
Author: kawada
Description: CSS that controls each content page
*/

/*
	Base Decoration HeadLine, paragraph , List
---------------------------------------------------------------------------- */
body {letter-spacing: -0.08em;}
.content p {margin: 0 0 2.0em; line-height: 2.2em; font-size: 20px; color: #333; clear: both;}
.content h1 {margin: 0 0 1.0em; font-size: 30px; color: #333; clear: both; line-height: 1.0em; padding: 0 0 15px;}
.content h2 {margin: 0 -1.0rem 1.0em; font-size: 30px; clear: both; line-height: 1.2em; padding: 20px 10px 0; color: #22ac38; border-top: 1px solid #22ac38; position: relative;}
.content h2:before {height: 4px; background-color: #22ac38; position: absolute; width: 200px; content: ""; top: 0; left: 0;}
.content h3 {margin: 0 -1.0rem 1.0em; font-size: 26px; clear: both; line-height: 1.2em; padding: 20px 10px;  color: #333; border-bottom: 2px dashed #22ac38;}
.content h4 {margin: 0 0 0.5em; font-size: 20px; clear: both; line-height: 1.2em; padding: 0; color: #22ac38;}
.content h5 {margin: 0 0 0.5em; font-size: 18px; line-height: 1.2em; clear: both; padding: 0 0 5px; color: #333;}
.noborder {border: none !important;}
.content article {padding: 0 0 1.0em; margin: 0 0 1.5em; }
@media screen and (max-width: 768px){
body {letter-spacing: 0;}
.content p {font-size: 13px; margin: 0 0 1.0em;}
.content h1 {margin: 0 0 0.5em; font-size: 24px; padding: 0 0 2%;}
.content h2 {margin: 0 0 0.5em; font-size: 22px; padding: 2.604%; line-height: 1.5em;}
.content h3 {font-size: 20px; clear: both; padding: 1.56%; line-height: 1.5em;}
.content h4 {font-size: 18px; line-height: 1.2em; padding: 0 0 1.56%;}
.content h5 {font-size: 16px; line-height: 1.2em; padding: 0 0 1.56%;}
.noborder {border: none !important;}
.content article {padding: 0 0 0.5em; margin: 0 0 1.0em; }
}

/*
	Links
---------------------------------------------------------------------------- */
.content a:link {color: #22ac38; text-decoration: underline;}
.content a:visited {color: #22ac38; text-decoration: underline;}
.content a:hover  {color: #22ac38; text-decoration: none;}

/*
	Syntaxhighlighter
---------------------------------------------------------------------------- */
.syntaxhighlighter {padding: 20px; margin: 0 0 30px;}
.syntaxhighlighter .line {line-height: 2.0em !important; font-size: 16px !important;}
@media screen and (max-width: 768px){
.syntaxhighlighter {padding: 2.666%; margin: 0 0 3.125%; width: 80% !important;}
.syntaxhighlighter .line {line-height: 1.5em !important; font-size: 12px !important;}
}

/*
	List
---------------------------------------------------------------------------- */
.content ul {margin: 0 0 2.0em 2.0em; list-style-position:outside;}
.content ul li {padding: 0; margin: 0 0 0.5em; font-size: 18px; list-style-type: disc;}
.content ol {margin: 0 0 1.5em 0; list-style-position:outside;}
.content ol li {margin: 0 0 1.5em; font-size: 18px; list-style-type: none; padding: 5px;}
.content ul.no_style {margin: 0 1.0em 2.0em; padding-left: 1.0em; text-indent: -1.0em;}
.content ul.no_style li {list-style: none; font-size: 100%;}
.content ul.indent_list {margin: 0 1.0em 2.0em; padding-left: 1.0em; text-indent: -1.0em;}
.content ul.indent_list li {list-style: none; font-size: 100%;}
@media screen and (max-width: 768px){
.content ul {margin: 0 0 1.0em 2.0em;}
.content ul li {font-size: 13px;}
.content ol {margin: 0 0 1.0em 0;}
.content ol li {margin: 0 0 1.0em; padding: 0.65%;}
.content ul.no_style {margin: 0 0em 1.0em;}
.content ul.indent_list {margin: 0 1.0em 1.0em;}
}

/*
	Button
---------------------------------------------------------------------------- */
.btn01 {display: block; background: #FFF; padding: 1.0rem 2.0rem; box-sizing: border-box; border: 5px solid #22ac38; text-decoration: none !important; transition: all 0.3s ease 0s;}
.btn01 span {display: block; text-align: center; font-size: 24px; color: #22ac38;}
.btn01 i {font-size: 24px; margin: 0 0 0 20px;}
.btn01:hover {text-decoration: none !important; background-color: #000; border: 5px solid #000;}
.btn01 span:hover {color: #FFF;}
.btn02 {display: block; padding: 0.25em 2.0em; box-sizing: border-box; background-color: #0058a4;}
.btn02 span {display: block; text-align: center; font-size: 14px; color: #FFF;}
.btn02:hover {text-decoration: none !important; opacity: 0.65;}
@media screen and (max-width: 768px){
.btn01 {padding: 0.5rem 1.0rem; border: 2px solid #22ac38;}
.btn01 span {font-size: 16px;}
.btn01 i {font-size: 16px; }
.btn01:hover {background-color: #000; border: 2px solid #000;}
.btn02 {display: block; padding: 0.5em 1.0em;}
.btn02 span {font-size: 14px;}
}

/*
	Block
---------------------------------------------------------------------------- */
.content .blocksty01 {border: 1px solid #BC9F98; padding: 20px; margin: 0 0 1.5em; background-color: #FFF; border-radius: 10px; -webkit-background-clip: padding-box;}
.content .blocksty01 p {margin: 0;}
.content .info_box01 {background-color: #F3F9FC; padding: 10px; margin: 0 0 1.5em;}
.content .info_box01 ul {margin: 0;}
.content .info_box02 {border: 1px solid #3995D1; padding: 10px; margin: 0 0 1.5em;}
.content .info_box02 ul {margin: 0;}
@media screen and (max-width: 768px){
}

/*
	Images
---------------------------------------------------------------------------- */
.centered {display: block; margin-left: auto;margin-right: auto;}
.aligncenter {display: block; margin-left: auto;margin-right: auto;}
.alignright {padding: 0px; margin: 0 0 5px 20px;display: inline !important; float: right;}
.alignleft {padding: 0px;margin: 0 10px 5px 0;display: inline !important; float: left;}
.wp-caption-dd {text-align: center; margin: 5px 0; color: #666; font-size: 11px;}
img.aligncenter {max-width: 100%; height: auto;}
img.alignright {max-width: 50%; height: auto;}
img.alignleft {max-width: 50%; height: auto;}
.border_bottom {border-bottom: 1px solid #C1C8D1; }
@media screen and (max-width: 768px){
.alignright {padding: 0px; margin: 0 0 2.34% 0 ;display: block !important;}
}

/*
	Blockquote
---------------------------------------------------------------------------- */
.content blockquote {background-color: #F5F5F5; margin: 0; padding: 20px 20px 5px; border-radius: 10px; margin: 0 0 25px;}
.content blockquote p {color: #666; font-size: 20px; margin: 0 0 1.0em;}
.content blockquote p:before {content: " \f10d"; font-family: FontAwesome; font-size: 18px; margin: 0 10px 0 0;}
.content blockquote p:after {content: " \f10e"; font-family: FontAwesome; font-size: 18px; margin: 0 0 0 10px;}
@media screen and (max-width: 768px){
.content blockquote {padding: 2.66% 2.66% 1.34%; border-radius: 5px; margin: 0 0 2.666%;}
.content blockquote p {color: #666; font-size: 2.66%; margin: 0 0 1.0em;}
.content blockquote p:before {font-size: 13px;}
.content blockquote p:after {font-size: 13px;}
}

/*
	Base Table
---------------------------------------------------------------------------- */
.content table {width: 100%; margin: 0 0 6.0rem; }
.content table th {padding: 30px; vertical-align: top; line-height: 1.5em; font-size: 20px; border-bottom: 1px solid #22ac38; width: 20%;}
.content table td {padding: 30px; vertical-align: top; line-height: 1.5em; border-bottom: 1px solid #CCC;  font-size: 18px;}
@media screen and (max-width: 768px){
.content table th {padding: 2%; font-size: 14px;}
.content table td {padding: 2%; font-size: 13px;}
}

/*
	Coution Box
---------------------------------------------------------------------------- */
.coution_box {background: url(../images/common/parts/icon_10.png) no-repeat 20px center; padding: 10px 10px 10px 100px; border: 2px dotted #CCC; background-color: #F0F0F0; border-radius: 10px; margin: 0 0 30px;}
.coution_box p {margin: 0;}
@media screen and (max-width: 768px){
.coution_box {margin: 0 0 4%;}
}

/*
	Single Navigation
---------------------------------------------------------------------------- */
.single_nav div {width: 100%; display: table; padding: 0 0 30px; }
.content .single_nav aside a {display: inline-block; color: #333; padding: 5px 15px; color: #FFF; text-decoration: none; background-color: #000; font-size: 18px;}
.content .single_nav aside a:hover {opacity: 0.65; transition: all 0.4s; background-color: #22ac38; color: #FFF;}
.single_nav .bt_prev {width: 33%; display: table-cell; text-align: left;}
.single_nav .bt_summary {width: 33%; display: table-cell; text-align: center;}
.single_nav .bt_next {width: 33%; display: table-cell; text-align: right;}
@media screen and (max-width: 768px){
.single_nav div {width: 100%; display: table; padding: 0 0 2.666%; }
.content .single_nav aside a {padding: 0.25rem 0.5rem; font-size: 12px;}
.single_nav .bt_prev {width: 33%; display: table-cell; text-align: left;}
.single_nav .bt_summary {width: 33%; display: table-cell; text-align: center;}
.single_nav .bt_next {width: 33%; display: table-cell; text-align: right;}
}

/*
	Pager
---------------------------------------------------------------------------- */
.wp-pagenavi {margin: 30px 0;}
.wp-pagenavi a, .wp-pagenavi span { padding: 1em 1.5em; text-decoration: none; background-color: #FFF; color: #333; margin: 0 0.5em 0 0; border: 3px solid #22ac38; box-sizing: border-box; display: inline-block; color: #333 !important; text-decoration: none !important;}
.wp-pagenavi a:hover, .wp-pagenavi span.current { background-color: #22ac38; color: #FFF !important;  border: 3px solid #22ac38; box-sizing: border-box;}
@media screen and (max-width: 768px){
.wp-pagenavi {margin: 3.45% 0;}
.wp-pagenavi a, .wp-pagenavi span { padding: 0.25em 1.0em; margin: 0 0.5em 0 0; border: 1px solid #22ac38;}
.wp-pagenavi a:hover, .wp-pagenavi span.current {border: 1px solid #22ac38; box-sizing: border-box;}
}

/*Where to set the specific content style*/

/*
	Top
---------------------------------------------------------------------------- */
.home .btn01 {width: 35%; margin: 0 auto;}
.key_v {background-color: #22ac38; margin: 0 0 40px;}
.home h2:before {display: none;}
.home .section {margin: 0 0 60px;}
.home .bg_gray {background-color: #F5F5F5;}
/* -Blog- */
.post_home_box {width: 1150px;}
.post_home_box article {width: 525px; box-sizing: border-box; border: 5px solid #22ac38; float: left; margin: 0 50px 50px 0; position: relative; transition: all 0.3s ease 0s;}
.post_home_box article:hover {border: 5px solid #22ac38; background-color: #22ac38;}
.post_home_box a:hover article .date,
.post_home_box a:hover article h3 {color: #FFF; }
.home .post_home_box a:hover .post_category li {background-color: #000;}
.post_home_box a article .date {color: #000;}
.post_home_box article .new_post {position: absolute; left: 10px; top: -35px;}
.post_home_box article .new_post img {width: 50%; height: auto;}
.post_home_box article .post_category {position: absolute; right: 10px; top: -20px;}
.post_home_box article .inner {padding: 40px 20px 20px;}
.post_home_box article .ct_box {float: left; width: 75%;}
.post_home_box article .thum_box {float: right; width: 23%;}
.post_home_box article .thum_box img {width: 100%; margin: 0 0 12.5%;}
.post_home_box article .ct_box h3 {border: none; margin: 0 0 10px; padding: 0; line-height: 1.5em; color: #22ac38;}
.post_home_box article a {color: #000; text-decoration: none; display: block;}
.home .post_home_box .post_category li {display: inline-block; text-decoration: none; color: #FFF; background-color: #22ac38; padding: 0.25rem 1.5rem; font-size: 18px; transition: all 0.3s ease 0s;}
/* -Myclip- */
.myclip_home .my_clipwrap {width: 1150px; margin: 0 0 40px;}
.myclip_home article {background-color: #FFF; width: 255px; float: left; margin: 0 20px 20px 0;}
.myclip_home .block01 {position: relative; display: block; min-height: 180px; background-color: #000; transition: all 0.3s ease 0s;}
.myclip_home .block01 .info_clip h3 {display: none;}
.myclip_home .block01:hover {background-color: #FFF;}
.myclip_home .block01:hover .info_clip h3 {color: #000; display: block;}
.myclip_home .block01 .info_clip {position: absolute; padding: 15px;}
.myclip_home .block01 .info_clip h3 {margin: 0; padding: 0; border: none; font-size: 22px; line-height: 1.5em;}
.myclip_home .block01 img {width: 255px; height: auto; }
.myclip_home .block01 img:hover {opacity: 0.05;}
.myclip_home .block02 {padding: 10px; font-size: 16px;}
.myclip_home .block02 a {color: #000; text-decoration: none; font-weight: bold;}
.myclip_home .block02 a:hover {text-decoration: underline;}
.myclip_home .block03 {padding: 10px; font-size: 16px;}
.myclip_home .block03 .date {display: inline-block;}
/* -Service- */
.service_box {width: 1150px; margin: 0 0 40px;}
.service_box article {width: 350px; margin: 0 25px 0 0; background-color: #F3F3F3; float: left; position: relative;}
.service_box article h3 {border: none; text-align: center; padding: 20px 0 20px;}
.service_box article .img_block {text-align: center; padding: 0 0 40px; width: 120px; height: 120px; margin: 0 auto; line-height: 120px;}
.service_box article .img_block img {width: 120px; vertical-align: middle;}
.service_box article .info_box {background-color: #22ac38; margin: 0 20px 0;}
.service_box article .info_box .inner {padding: 15px;}
.service_box article .info_box .inner p {color: #FFF; font-size: 16px; margin: 0;}
/* -Works- */
.works_box h2 {border: none; text-align: center; line-height: 1.0em; font-size: 45px; padding: 0; margin: 0 0 20px;}
.works_box p {text-align: center;}
/* -News- */
.news_box {margin: 0 0 40px;}
.news_box .post_box li {list-style: none;}
.news_box .post_box li {border-bottom: 1px dotted #CCC; padding: 0 20px 20px; letter-spacing: -0.25em; font-size: 18px; margin: 0 0 20px;}
.news_box .post_box li aside {letter-spacing: normal; display: inline-block;}
.news_box .post_box .date {width: 16%; font-size: 18px;}
.news_box .post_box .news_category {width: 20%;}
.news_box .post_box .news_category a {display: inline-block; background-color: #000; color: #FFF; font-size: 14px; padding: 0.25rem 0.5rem; text-decoration: none; min-width: 140px; text-align: center;}
.news_box .post_box .title {width: 60%; font-size: 20px;}
@media screen and (max-width: 768px){
.home .btn01 {width: 70%;}
.key_v {margin: 0 0 2.666%;}
.key_v img {width: 100%; height: auto;}
.home .section {margin: 0 0 5.12%; padding: 0 5.12%; width: auto;}
/* -Blog- */
.post_home_box {width: auto;}
.post_home_box article {width: 100%; float: none; margin: 0 0 5.12% 0; border: 2px solid #22ac38;}
.post_home_box article:hover {border: 2px solid #22ac38;}
.post_home_box article .new_post {position: absolute; left: 10px; top: -35px;}
.post_home_box article .new_post img {width: 35%; height: auto;}
.post_home_box article .post_category {right: 10px; top: -10px;}
.post_home_box article .inner {padding: 5.12%;}
.post_home_box article .ct_box h3 {margin: 0 0 2.66%;}
.home .post_home_box .post_category li {padding: 0rem 0.5rem; font-size: 12px;}
/* -Myclip- */
.myclip_home .my_clipwrap {width: auto; margin: 0 0 3.6%;}
.myclip_home article {width: auto; float: none; margin: 0 0 5.12%; }
.myclip_home .block01 {height: auto; background-color: #FFF; min-height: initial; text-decoration: none !important;}
.myclip_home .block01 .info_clip {position: relative; padding: 2.666%;}
.myclip_home .block01 .info_clip h3 {display: block;}
.myclip_home .block01 .info_clip h3 {font-size: 16px; line-height: 1.5em;}
.myclip_home .block01 img {display: none; height: 1;}
.myclip_home .block02 {padding: 0 2.66%; font-size: 14px; text-align: right;}
.myclip_home .block02 a {color: #666; font-weight: normal;}
.myclip_home .block03 {padding: 0 2.6666%; font-size: 12px;}
.myclip_home .block03 .date {display: inline-block; font-weight: normal; font-size: 14px;}
/* -Service- */
.service_box {width: auto; margin: 0 0 3.6%;}
.service_box article {width: auto; margin: 0 0 5.12%; float: none; position: relative;}
.service_box article h3 {border: none; text-align: center; padding: 5.12%; margin: 0;}
.service_box article .img_block {display: none;}
.service_box article .info_box {background-color: #22ac38; margin: 0 2.666% 0;}
.service_box article .info_box .inner {padding: 2.666%;}
.service_box article .info_box .inner p {color: #FFF; font-size: 13px; margin: 0;}
/* -Works- */
.works_box h2 {font-size: 25px; margin: 0 0 2.666%; line-height: 1.5em;}
.works_box p {text-align: center;}
/* -News- */
.news_box {margin: 0 0 6%;}
.news_box .post_box {padding: 0; margin: 0;}
.news_box .post_box li {padding: 0 2.666% 2.666%; font-size: 16px; margin: 0 0 2.666%;}
.news_box .post_box li aside {letter-spacing: normal; display: block;}
.news_box .post_box .date {width: auto; font-size: 16px;}
.news_box .post_box .news_category {display: none;}
.news_box .post_box .title {width: 100%; font-size: 16px;}
}

/*
	-Common Post Style-
---------------------------------------------------------------------------- */
.content .date {display: block; line-height: 16px; font-weight: bold; font-size: 16px;}
.content .date i {margin: 0 10px 0 0;}
.content .headline_single_title {border: none; font-size: 45px; padding: 0; margin: 0 0 20px; line-height: 1.2em; color: #333;}
.content .post_category {margin: 0; padding: 0; letter-spacing: -0.25em;}
.content .post_category li {list-style: none; margin: 0; padding: 0; display: inline-block; letter-spacing: normal;}
.content .post_category li a {display: inline-block; text-decoration: none; color: #FFF; background-color: #22ac38; padding: 0.25rem 1.5rem; font-size: 18px; transition: all 0.3s ease 0s;}
.content .post_category li a:hover {background-color: #000;}
.content .post_tag_category {margin: 0; padding: 0; letter-spacing: -0.25em;}
.content .post_tag_category li {list-style: none; margin: 0; padding: 0; display: inline-block; letter-spacing: normal;}
.content .post_tag_category li a {display: inline-block; text-decoration: none; color: #000; border: 3px solid #22ac38; padding: 0.25rem 1.5rem; font-size: 18px; transition: all 0.3s ease 0s; background-color: #FFF;}
.content .post_tag_category li a:hover {background-color: #000; color: #FFF; border: 3px solid #000;}
.content .all_category {margin: 0 0 40px;}
.content .all_category li {margin: 0 20px 20px 0;}
.content .all_category li a {padding: 1rem 2.0rem;}
.content .all_category h3 {font-size: 18px; border-bottom: 1px solid #DDD;}
.post_metainfo_box {background-color: #f2f2f2; padding: 10px 0 0; border-top: 1px solid #DDD;}
@media screen and (max-width: 768px){
.content .date {line-height: 14px; font-weight: normal; font-size: 14px;}
.content .headline_single_title {font-size: 26px; margin: 0 0 2.666%;}
.content .post_category li a {padding: 0rem 0.5rem; font-size: 14px;}
.content .post_tag_category li a {border: 2px solid #22ac38; padding: 0rem 1rem; font-size: 14px; }
.content .post_tag_category li a:hover {border: 2px solid #000;}
.content .all_category {margin: 0 0 4%;}
.content .all_category li {margin: 0 2.666% 2.666% 0;}
.content .all_category li a {padding: 0.25rem 1.0rem;}
.content .all_category h3 {font-size: 16px; border-bottom: 1px solid #DDD;}
.post_metainfo_box {padding: 2.666% 0 0;}
}

/*
	-Portfolio Post Style-
---------------------------------------------------------------------------- */
.portfolio-wrap a {float: left; width: 250px; display: block; margin: 0 20px 35px 0; transition: all 0.75s ease 0s; text-decoration: none !important; border: 2px solid #EEE;}
.portfolio-wrap article {padding: 0; margin: 0;}
.portfolio-wrap a:nth-child(4n) {margin: 0 0 20px;}
.portfolio-wrap a:hover {background-color: #333; border: 2px solid #000; color:}
.portfolio-wrap a:hover h3 {color: #FFF;}
.portfolio-wrap a:hover ul li {color: #FFF;}
.portfolio-wrap .thum_box img {width: 250px; height: auto;}
.portfolio-wrap .cont_box {padding: 10px;}
.portfolio-wrap .cont_box h3 {border: none; font-size: 15px; padding: 0; margin: 10px 0 15px; font-weight: normal; line-height: 1.5rem;}
.portfolio-wrap .cont_box ul {padding: 0; margin: 0;}
.portfolio-wrap .cont_box ul li {list-style: none; display: inline-block; font-size: 12px; margin: 0; padding: 0; color: #666;}
.portfolio-wrap .cont_box ul li:after {content: " / ";}
.portfolio-wrap .cont_box ul li:last-child:after {content: "";}
.portfolio_single .main_images {margin: 40px 0; background-color: #EEE; padding: 20px; }
.portfolio_single .main_images .inner {background-color: #FFF;}
.portfolio_single .data_box {border: 2px dotted #EEE; margin: 40px 0;}
.portfolio_single .data_box .inner {padding: 20px;}
.portfolio_single .data_box .inner h3 {padding: 0; margin: 0 0 10px; border: none;}
.portfolio_single .data_box .inner p {font-size: 16px; margin: 0 0 20px;}
.portfolio_single .data_box aside {margin: 0 0 20px; font-size: 16px;}
.portfolio_single .data_box aside span {font-size: 22px;}

/*
	-Article Post Style-
---------------------------------------------------------------------------- */
.article_post article {box-sizing: border-box; border: 5px solid #22ac38; margin: 0 0 60px; position: relative;}
.article_post article .inner {padding: 40px;}
.article_post article .date i {margin: 0 10px 0 0;}
.article_post article .date {font-weight: normal; margin: 0 0 20px; font-size: 16px;}
.article_post article .post_category {position: absolute; left: 20px; top: -1.25rem;}
.article_post article .ct_box {float: left; width: 85%;}
.article_post article .thum_box {float: right; width: 12.5%; text-align: center; padding: 40px 0 0;}
.article_post article .thum_box img {width: 120px; height: atuo; margin: 0 0 20px;}
.article_post article .ct_box h3 {border: none; margin: 0 0 15px; padding: 0; font-size: 45px;}
.article_post article .ct_box h3 a {text-decoration: none; color: #22ac38; transition: all 0.3s ease 0s;}
.article_post article .ct_box h3 a:hover {color: #000;}
.article_post article .ct_box p {font-size: 18px;}
.article_post article .btn01 {width: 40%; margin: 0 auto;}
@media screen and (max-width: 768px){
.article_post article {border: 2px solid #22ac38; margin: 0 0 5.12%;}
.article_post article .inner {padding: 5.12%;}
.article_post article .date {font-weight: normal; margin: 0 0 2.666%; font-size: 14px;}
.article_post article .post_category {position: relative; left: 5.12%; top: 0;}
.article_post article .ct_box {float: none; width: 100%;}
.article_post article .thum_box {float: none; display: none;}
.article_post article .ct_box h3 {margin: 0 0 2.666%; font-size: 22px;}
.article_post article .ct_box p {font-size: 13px;}
.article_post article .btn01 {width: 65%; margin: 0 auto;}
}

/*
	-Article Post Single Style-
---------------------------------------------------------------------------- */
.article_post_single .meta_box .lbox {float: left; width: 18.5%;}
.article_post_single .meta_box .rbox {float: right; width: 78.5%; text-align: right;}
.article_post_single .meta_box {margin: 0 0 20px;}
.article_post_single .meta_box .date {padding: 10px 0 0;}
.article_post_single .sns_share a {display: inline-block; background-color: #22ac38; padding: 0.5rem 1.0rem; min-width: 80px; text-align: center; transition: all 0.3s ease 0s;}
.article_post_single .sns_share a:hover {background-color: #000;}
.article_post_single .sns_share a i {font-size: 20px; color: #FFF; }
.article_post_single .headline_title {font-size: 48px; line-height: 1.3em; margin: 0 0 10px;}
.article_post_single .single_psot_catebox {padding: 0 5px 5px; margin: 0 0 20px; font-size: 16px; display: inline-block;}
.article_post_single .single_psot_catebox span {display: inline-block;}
.article_post_single .single_psot_catebox ul {display: inline-block; padding: 0; margin: 0;}
.article_post_single .single_psot_catebox ul li {display: inline-block; list-style: none; margin: 0 15px 0 0; font-size: 18px;}
.article_post_single .meta_box_single {margin: 0 0 20px; border-bottom: 2px solid #EEE;}
.article_post_single .old_post_message {padding: 20px; border: 1px dashed #000; margin: 0 0 1.5rem; background-color: #22ac38;}
.article_post_single .old_post_message p {color: #FFF; font-weight: bold; margin: 0; text-align: center;}
@media screen and (max-width: 768px){
.article_post_single .meta_box .lbox {float: none; width: auto; margin: 0 0 2.666%}
.article_post_single .meta_box .rbox {float: none; width: auto; text-align: left;}
.article_post_single .meta_box {margin: 0 0 2.666%;}
.article_post_single .meta_box .date {padding: 1.34% 0 0;}
.article_post_single .sns_share a {padding: 0.25rem 0.5rem; min-width: 40px;}
.article_post_single .sns_share a i {font-size: 15px;}
.article_post_single .headline_title {font-size: 26px; margin: 0 0 1.34%;}
.article_post_single .single_psot_catebox {padding: 0 1.34% 1.34%; margin: 0 0 2.666%; font-size: 14px;}
.article_post_single .single_psot_catebox ul li {margin: 0 10px 0 0; font-size: 14px;}
.article_post_single .meta_box_single {margin: 0 0 2.666%; border-bottom: 1px solid #EEE;}
.article_post_single .old_post_message {padding: 2.666%; border: 1px dashed #000; margin: 0 0 1.5rem; background-color: #22ac38;}
.article_post_single .old_post_message p {color: #FFF; font-weight: bold; margin: 0; text-align: center;}
}

/*
	-Article Post Single Relation Style-
---------------------------------------------------------------------------- */
.content .relation_box_wrap {width: 100%; background-color: #F5F5F5; border: 1px solid #EEE; margin: 80px 0 40px;}
.content .relation_box_wrap h3 {border: none; margin: 20px 0 0; padding: 0; }
.content .relation_box_wrap .inner {padding: 20px 20px 20px 0; letter-spacing: -0.25em;}
.content .relation_box_wrap article {display: inline-block; letter-spacing: normal; width: 48.0%; margin: 0 0 20px 20px; background-color: #FFF; padding: 20px;}
.content .relation_box_wrap article .thum_block {width: 25.5%; float: left;}
.content .relation_box_wrap article .thum_block img {width: 110px;}
.content .relation_box_wrap article .relation_cont {width: 72.5%; float: right;}
@media screen and (max-width: 768px){
.content .relation_box_wrap {margin: 6% 0 4%;}
.content .relation_box_wrap h4 {margin: 2.666% 0 0; font-size: 14px;}
.content .relation_box_wrap .inner {padding: 2.666% 2.666% 2.666% 0;}
.content .relation_box_wrap article {width: 47.25%; margin: 0 0 2.66% 2.66%; padding: 2.66%; height: auto;}
.content .relation_box_wrap article .thum_block {display: none;}
.content .relation_box_wrap article .relation_cont {width: 100%; float: none;}
}

/*
	-News Post Style-
---------------------------------------------------------------------------- */
.news_post .post_box {margin: 0 0 40px; padding: 20px; border: 5px solid #22ac38;}
.news_post .post_box li {list-style: none;}
.news_post .post_box li {border-bottom: 1px dotted #CCC; padding: 0 20px 20px; letter-spacing: -0.25em; font-size: 18px; margin: 0 0 20px;}
.content .news_post .post_box li aside {letter-spacing: normal; display: inline-block;}
.content .news_post .date {width: 16%; font-size: 18px;}
.content .news_post .news_category {width: 20%;}
.content .news_post .news_category a {display: inline-block; background-color: #000; color: #FFF; font-size: 14px; padding: 0.25rem 0.5rem; text-decoration: none; min-width: 140px; text-align: center;}
.content .news_post .title {width: 60%; font-size: 20px;}
@media screen and (max-width: 768px){
.news_post .post_box {margin: 0 0 4%; padding: 2.666%; border: 2px solid #22ac38;}
.news_post .post_box li {padding: 0 2.666% 2.666%; font-size: 16px; margin: 0 0 2.666%;}
.content .news_post .date {width: auto; font-size: 16px;}
.content .news_post .news_category {display: none !important;}
.content .news_post .title {width: 100%; font-size: 16px;}
}

/*
	Page
---------------------------------------------------------------------------- */
.content_inner {padding: 0 30px;}
.content_inner .catch {font-size: 28px;}
@media screen and (max-width: 768px){
.content_inner {padding: 0;}
.content_inner .catch {font-size: 16px;}
}

/*
	-Search-
---------------------------------------------------------------------------- */
.search article {padding: 20px;}
@media screen and (max-width: 768px){
.search article {padding: 2.666%;}
}

/*
	-About-
---------------------------------------------------------------------------- */
@media screen and (max-width: 768px){
}

/*
	-MY CLIP-
---------------------------------------------------------------------------- */
.bg_myclip {background-color: #F5F5F5;}
.bg_myclip #container {position: relative; width: 1080px; margin: 0 auto 0; padding: 40px 0 0;}
.myclip .my_clipwrap {width: 1150px; margin: 0 0 30px;}
.myclip article {background-color: #FFF; width: 255px; float: left; margin: 0 20px 20px 0;}
.myclip .block01 {position: relative; display: block; min-height: 180px; background-color: #000; transition: all 0.3s ease 0s;}
.myclip .block01 .info_clip h3 {display: none;}
.myclip .block01:hover {background-color: #FFF;}
.myclip .block01:hover .info_clip h3 {color: #000; display: block;}
.myclip .block01 .info_clip {position: absolute; padding: 15px;}
.myclip .block01 .info_clip h3 {margin: 0; padding: 0; border: none; font-size: 22px; line-height: 1.5em;}
.myclip .block01 img {width: 255px; height: auto; }
.myclip .block01 img:hover {opacity: 0.05;}
.myclip .block02 {padding: 10px; font-size: 16px;}
.myclip .block02 a {color: #000; text-decoration: none; font-weight: bold;}
.myclip .block02 a:hover {text-decoration: underline;}
.myclip .block03 {padding: 10px; font-size: 16px;}
.myclip .block03 .date {display: inline-block;}
.btn_myclip {display: block; position: absolute; z-index: 50; right: 5%; top: 25%; position: fixed; width: 100px; height: 100px; background-color: #000; border-radius: 50px; color: #FFF; text-align: center; cursor: pointer; transition: all 0.3s ease 0s;}
.btn_myclip:hover {background-color: #22ac38; width: 120px; height: 140px; border-radius: 0px;}
.btn_myclip:hover span:after {content: "クリックするとカテゴリー、タグでお探しできます。"; display: block; font-size: 12px; padding: 0.5rem; font-weight: normal;}
.btn_myclip span {display: inline-block; padding: 30px 0 0; font-size: 16px; font-weight: bold;}
.remodal {border: 5px solid #22ac38; text-align: left; width: 90% !important; max-width: 90% !important; letter-spacing: normal;}
.modal_inner h4 {font-size: 1.0rem; color: #22ac38; margin: 0 0 0.5rem;}
.modal_primary {margin: 0 0 30px;}
.modal_primary .l_box {float: left; width: 56.5%;}
.modal_primary .r_box {float: right; width: 42.5%;}
.modal_primary .info_modal {border: 2px dashed #22ac38; border-radius: 10px;}
.modal_primary .info_modal .inner {padding: 10px;}
.modal_primary .info_modal .inner p {font-size: 13px; line-height: 1.8em; margin: 0 0 1.0em;}
.modal_primary .cate_modal .cat-item a {font-size: 16px;  padding: 0 0 5px; font-weight: bold; color: #000;}
.modal_primary .cate_modal .cat-item ul li a {font-size: 14px; margin: 0 0 5px; display: inline-block; border: none;  font-weight: normal; color: #22ac38; }
.modal_primary .cate_modal .cat-item ul li a:before {content: "-";}
.modal_primary .cate_modal .cat-item {display: inline-block; margin: 0 20px 20px 0; vertical-align: top; }
.modal_primary .cate_modal .cat-item .children {margin: 10px 0 0 20px;}
.modal_primary .cate_modal .cat-item .children li {display: block; margin: 0 0 0; }
.modal_secondry .post_tag_category {margin: 0 0 30px; padding: 0; letter-spacing: -0.25em;}
.modal_secondry .post_tag_category li {list-style: none; margin: 0 10px 10px 0; padding: 0; display: inline-block; letter-spacing: normal;}
.modal_secondry .post_tag_category li a {display: inline-block; text-decoration: none; color: #000; border: 2px solid #22ac38; padding: 0.15rem 0.5rem; font-size: 13px; transition: all 0.3s ease 0s; background-color: #FFF;}
.modal_secondry .post_tag_category li a:hover {background-color: #000; color: #FFF; border: 2px solid #000;}
.modal_inner .remodal-cancel {transition: all 0.3s ease 0s; background-color: #000;}
.modal_inner .remodal-cancel:hover {background-color: #22ac38;}
@media screen and (max-width: 768px){
.bg_myclip #container {position: relative; width: auto; padding: 3.45% 5.12% 0;}
.myclip .my_clipwrap {width: auto; margin: 0 0 3.6%;}
.myclip article {width: auto; float: none; margin: 0 0 5.12%;}
.myclip .block01 {height: auto; background-color: #FFF; min-height: initial; text-decoration: none !important;}
.myclip .block01 .info_clip {position: relative; padding: 2.666%;}
.myclip .block01 .info_clip h3 {display: block;}
.myclip .block01 .info_clip h3 {font-size: 16px; line-height: 1.5em;}
.myclip .block01 img {display: none;}
.myclip .block02 {padding: 0 2.66%; font-size: 14px; text-align: right;}
.myclip .block02 a {color: #666; font-weight: normal;}
.myclip .block03 {padding: 0 2.6666%; font-size: 12px;}
.myclip .block03 .date {display: inline-block; font-weight: normal; font-size: 14px;}
.btn_myclip {right: 1.5%; top: 12.5%; width: 80px; height: 80px; border-radius: 40px;}
.btn_myclip span {display: inline-block; padding: 30px 0 0; font-size: 11px; font-weight: bold;}
.remodal {border: 2px solid #22ac38; width: 100% !important; max-width: 100% !important;}
.modal_inner h4 {font-size: 1.0rem; color: #22ac38; margin: 0 0 0.5rem;}
.modal_primary {margin: 0 0 3.125%;}
.modal_primary .l_box {float: none; width: auto; margin: 0 0 5.12%;}
.modal_primary .r_box {float: none; width: auto;}
.modal_primary .info_modal {border: 1px dashed #22ac38; border-radius: 5px;}
.modal_primary .info_modal .inner {padding: 2.666%;}
.modal_primary .info_modal .inner p {font-size: 12px; }
.modal_primary .cate_modal .cat-item a {font-size: 14px;}
.modal_primary .cate_modal .cat-item ul li a {font-size: 12px;}
.modal_primary .cate_modal .cat-item { margin: 0 10px 10px 0;}
.modal_primary .cate_modal .cat-item .children {margin: 5px 0 0 10px;}
.modal_secondry .post_tag_category {margin: 0 0 2.66%; }
.modal_secondry .post_tag_category li a {border: 1px solid #22ac38; padding: 0.15rem 0.25rem; font-size: 11px; }
.modal_secondry .post_tag_category li a:hover {border: 1px solid #000;}
}


/*
	-Works-
---------------------------------------------------------------------------- */
.works .page_headline {border: none; text-align: center; font-size: 3.5rem; margin: 0 0 10px; padding: 0;}
.works .page_headline:before {display: none;}
.works .btn01 {width: 35%; margin: 0 auto;}
@media screen and (max-width: 768px){
.works .page_headline {font-size: 1.8rem; margin: 0 0 2.666%;}
.works .btn01 {width: 80%; margin: 0 auto;}
}

/*
	-Servie-
---------------------------------------------------------------------------- */
.service h2 {border: none; font-size: 45px; margin: 0 -1.0rem 10px; }
.service h2:before {display: none;}
.service .service_box {margin: 0 0 45px; padding: 0 0 20px; border-bottom: 1px solid #22ac38;}
.service .info_box .cont_block {background-color: #FFF; float: left; width: 75%;}
.service .info_box .thum_block {float: right; width: 20%;}
.service .info_box .thum_block img {width: 100%; height: auto;}
@media screen and (max-width: 768px){
.service h2 {font-size: 23px; margin: 0; padding: 0;}
.service .service_box {margin: 0 0 4%; padding: 0 0 2.666%;}
.service .info_box .cont_block {background-color: #FFF; float: none; width: 100%;}
.service .info_box .thum_block {display: none;}
}

/*
	-Sitemap-
---------------------------------------------------------------------------- */
.sitemap_box {border: 5px solid #22ac38; padding: 20px;}
.sitemap .sitemap_list {float: left; width: 46.5%; margin: 0 2.5% 0 0;}
.sitemap .sitemap_list li {border-bottom: 1px dashed #22ac38; padding: 2.5%; list-style: none;}
.sitemap .sitemap_list li i {margin: 0 15px 0 0;}
.sitemap .sitemap_list li span {margin: 0 0 0 45px;}
@media screen and (max-width: 768px){
.sitemap_box {border: 2px solid #22ac38; padding: 2.666%;}
.sitemap .sitemap_list li i {margin: 0 2.666% 0 0;}
}
/*
	-Module-
---------------------------------------------------------------------------- */
.content .non_style {margin: 0; padding: 0; border: none; background: none;}
@media screen and (max-width: 768px){
}