---*/
#top {
}
/*---段落ごと囲むもの---*/
#top section {
max-width: 1900px;/*以前はmax-width: 1400px;*/
width: auto;
height: auto;
padding-top: 0;
padding-right: 2%;
padding-left: 2%;
padding-bottom: 7%;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
#top section:after {/*overflow: hidden;の代わりに.clearfix:after*/
content: "";
clear: both;
display: block;
}
#top section:first-child {
padding-top: 7%;
}
/*TOPPAGE用見出し*/
#top h1 {/*メインイメージ*/
}
@media only screen and (min-width: 1025px) {/*1025px以上*/
#top h1 {
}
}
#top h1 img {
}
#top h2 {
}
#top h3 {
}
#top h4 {
}
#top h5 {
}
#top h6 {
}
/*---カラムスマホ2列 PC4列 （TOPコーナー見出し用）---*/
.corner-col_s2-m4 {
}
.corner-col_s2-m4 ul {
padding: 0;
margin: 0;
display: flex;/**/
align-items: flex-start;/*これで画像が縦に伸びるのを防止*/
flex-wrap: wrap;/*折り返しができる*/
}
.corner-col_s2-m4 ul li {
position: relative;/*黒い半透明を出すため*/
width: 49%;
margin-right: 1%;
margin-left: 1%;
margin-bottom: 2%;
list-style-type: none;
}
.corner-col_s2-m4 ul li:nth-child(odd) {/*奇数*/
margin-left: 0;
}
.corner-col_s2-m4 ul li:nth-child(even) {/*偶数*/
margin-right: 0;
}
.corner-col_s2-m4 img {
max-width: 100%;
height: auto;
margin-right: auto;
margin-left: auto;
}
.corner-col_s2-m4 ul li a .cnr_moji {
position: absolute;/*黒い半透明を出すため*/
color: #fff;
line-height: 1;
font-weight: bolder;
left: 0;
bottom: 0;
right: 0;
width: 100%;
text-align: center;
margin: 0;
overflow: hidden;
/*↓黒の半透明*/
background: #000;
filter: Alpha(opacity=70);
opacity: 0.7;
/*---*/
font-size: 16px;
padding-top: 7%;
padding-bottom: 7%;
}
.corner-col_s2-m4 ul li a .cnr_moji span {
display: block;
}
@media only screen and (min-width: 641px) {/*641px以上*/
.corner-col_s2-m4 {
}
.corner-col_s2-m4 ul li {
margin-bottom: 5%;
width: 23.0263%;
margin-top: 0;
margin-left: 1.31578%;
margin-right: 1.31578%;
}
.corner-col_s2-m4 ul li:nth-child(odd) {/*奇数*/
margin-left: 1.31578%;
}
.corner-col_s2-m4 ul li:nth-child(even) {/*偶数*/
margin-right: 1.31578%;
}
.corner-col_s2-m4 ul li:first-child {
margin-left: 0;
}
.corner-col_s2-m4 ul li:last-child {
margin-right: 0;
}
.corner-col_s2-m4 ul li a .cnr_moji {
font-size: 18px;
}
}
@media only screen and (min-width: 1025px) {/*1025px以上*/
.corner-col_s2-m4 {
}
.corner-col_s2-m4 ul li {
transition: 0.3s;/*ふわっとなる*/
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.corner-col_s2-m4 ul li:hover {
opacity: 0.7;
filter: alpha(opacity=70);
-ms-filter: "alpha( opacity=70 )";
-moz-opacity: 0.70;
background: none!important;/*background-color: #d2f3d7;*/
}
.corner-col_s2-m4 ul li a .cnr_moji {
transition: 0.3s;/*ふわっとなる*/
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.corner-col_s2-m4 ul li a .cnr_moji span {
display: inline-block;
}
.corner-col_s2-m4 ul li a:hover .cnr_moji {
color: #fff;
background-color: #00b319;
}
}
@media only screen and (min-width: 1401px) {/*1401px以上*/
.corner-col_s2-m4 {
}
.corner-col_s2-m4 ul li {
}
.corner-col_s2-m4 ul li a .cnr_moji {
font-size: 20px;
}
}
/*■中面基本■
------------------------------------------------------------*/
/*---中ページ用
---*/
#contents {
}
/*---段落ごと囲むもの---*/
#contents section {
max-width: 1100px;
width: auto;
height: auto;
padding-top: 0;
padding-right: 2%;
padding-left: 2%;
padding-bottom: 7%;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
#contents section:after {/*overflow: hidden;の代わりに.clearfix:after*/
content: "";
clear: both;
display: block;
}
#contents section:first-child {
padding-top: 7%;
}
/*---中ページ用見出し---*/
/*デフォルト*/
#contents h1, #contents h2, #contents h3, #contents h4, #contents h5, #contents h6 {
font-weight: bold;
line-height: 1.4;
overflow: hidden;
clear: both;
}
#contents h1 {
font-size: 168%;
}
#contents h2 {
margin-top: 7%;
margin-bottom: 2%;
}
#contents h3, #contents h4, #contents h5, #contents h6 {
margin-top: 3%;
margin-bottom: 2%;
}
#contents h2:first-child, #contents h3:first-child, #contents h4:first-child, #contents h5:first-child, #contents h6:first-child {
margin-top: 0;
}
#contents h2 {
font-size: 152%;
border-left-width: 5px;
border-left-style: solid;
border-left-color: #282828;
padding-left: 2%;
padding-top: 1.5%;
padding-bottom: 1.5%;
background-color: #fbfbfb;
}
#contents h3 {
font-size: 137%;
padding-left: 0;
padding-top: 1%;
padding-bottom: 1%;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #282828;
}
#contents h4 {
font-size: 107%;
padding-top: 1%;
padding-bottom: 1%;
padding-left: 1%;
background-color: #FBFBFB;
}
#contents h5 {
font-size: 91%;
}
#contents h6 {
font-size: 76%;
}
@media only screen and (min-width: 641px) {/*641px以上*/
#contents h1 {
font-size: 175%;
}
#contents h2 {
font-size: 138%;
}
#contents h3 {
font-size: 125%;
}
#contents h4 {
font-size: 113%;
}
#contents h5 {
font-size: 88%;
}
#contents h6 {
font-size: 75%;
}
}
@media only screen and (min-width: 1025px) {/*1025px以上*/
#contents h1 {
font-size: 225%;
}
#contents h2 {
font-size: 150%;
}
#contents h3 {
font-size: 138%;
}
#contents h4 {
font-size: 125%;
}
#contents h5 {
font-size: 113%;
}
#contents h6 {
font-size: 88%;
}
}
/*記事タイトル飾り専用
------------------------------------------------------------*/
/**/
#contents #title-wrap {
display: flex;
justify-content: center;
align-items: center;
/**/
width: auto;
background-size: cover;
background-color: #00B319;
background-image: url(../img/title_bg.jpg);/*★ページのアイキャッチを利用*/
background-position: center center;
margin: 0;
padding: 7%;
/*ぼかしの設定*/
position: relative;
z-index: 0;
overflow: hidden;/*ブラー効果でボヤけた部分を非表示*/
}
#contents #title-wrap:before { /*ぼかしの設定*/
content: '';
background: inherit;/*#contents #title-wrapで設定した背景画像を継承する*/
-webkit-filter: blur(8px);
-ms-filter: blur(8px);
filter: blur(8px);
position: absolute;
/*ブラー効果で画像の端がボヤけた分だけ位置を調整*/
top: -8px;
left: -8px;
right: -8px;
bottom: -8px;
z-index: -1;/*重なり順序を一番下にしておく*/
}
#contents #title-wrap #title {
width: 94%;
background-color: #FFF;
align-items: center;
padding: 3%;
opacity: 0.9;
filter: alpha(opacity=90);
-ms-filter: "alpha( opacity=90 )";
-moz-opacity: 0.90;
text-align: center;
}
#contents #title-wrap #title h1 {
}
/*■・会員リスト・概要内の理事名 「辻」様（２人）のしんにょう
------------------------------------------------------------*/
.tsuji img{
height: 14px;
width: auto;
line-height: 14px;
padding: 0;
margin-top: 0;
margin-right: 0;
margin-bottom: 8px;
margin-left: 0;
}
.font_tsuji img {
width: auto;
height: 14px;
margin: 0 0 2px;
padding: 0;
line-height: 14px;
vertical-align: middle;
}
@media only screen and (min-width: 641px) {/*641px以上*/
.tsuji img,
.font_tsuji img {
height: 16px;
line-height: 16px;
}
}
/*■・MCAについてのテーブル
------------------------------------------------------------*/
.about_tb th[valign="top"] {
width: 20% !important;
}
.about_tb th + th {
width: 124px;
}
.about_tb th + td {
width: 160px;
}
.about_tb .about_access {
display: -webkit-flex;
display: -ms-flex;
display: flex;
justify-content: space-between;
}
.about_tb .about_access img {
width: 320px;
height: auto;
margin: 8px 0;
}
@media only screen and (max-width:1024px) {/*1024px以下*/
.about_tb,
.about_tb th[valign="top"] {
width: 100% !important;
}
}
@media only screen and (max-width: 767px) {
.about_tb .about_access {
flex-direction: column;
}
.about_tb .about_access img {
width: 100%;
height: auto;
}
}
/*緊急のお知らせ
------------------------------------------------------------*/
.emergencyArea {
margin: 2% 2% 7%;
}
/*新着情報
------------------------------------------------------------*/
.newsArea .info-title {
margin-bottom: 8px;
}
.newsList {
list-style: none;
padding: 0 0 16px;
background-color: #f7f7f7;
}
.newsList li {
background-color: transparent;
}
.newsList a {
display: flex;
flex-wrap: wrap;
margin: 0 40px;
padding: 16px 0;
border-bottom: 1px solid #e5e5e5;
color: #282828;
font-size: 15px;
}
.newsList li:hover a {
opacity: .5;
}
.newsList .news_date {
width: 13em;
}
.newsList .news_title {
width: calc(100% - 13em);
}
.newsArea .button a {
width: 50%;
padding: 24px 0;
}
.newsList + .wp-pagenavi {
margin-top: 40px;
}
@media only screen and (max-width: 767px) {
.newsList a {
flex-direction: column;
margin: 0 20px;
}
.newsList .news_date,
.newsList .news_title {
width: 100%;
}
.newsArea .button a {
width: 50%;
}
}
/*活動実績
------------------------------------------------------------*/
.reportArea .info-title {
margin-bottom: 8px;
}
/*開催履歴
------------------------------------------------------------*/
/* .sp-swipe {
display: none;
}
.holding_history_tb {
table-layout: fixed;
width: 100%;
}
.holding_history_tb thead th {
background-color: #333;
color: #fff;
text-align: center;
}
.holding_history_tb tbody td {
padding: 0 16px;
}
.holding_history_tb tbody td + td {
border-left: 1px dotted #ddd;
}
@media only screen and (max-width: 767px) {
.sp-swipe {
display: block;
margin-bottom: 0;
}
.sp-swipeArea {
overflow-x: scroll;
}
.sp-swipeArea::-webkit-scrollbar {
height: 3px;
}
.sp-swipeArea::-webkit-scrollbar-track {
background-color: #eee;
border-radius: 3px;
}
.sp-swipeArea::-webkit-scrollbar-thumb {
background-color: #666;
border-radius: 3px;
}
.sp-swipeArea table th,
.sp-swipeArea table td {
display: table-cell;
}
.holding_history_tb thead th,
.holding_history_tb tbody td {
width: 160px;
}
} */
/*詳細を見るボタン
------------------------------------------------------------*/
.moreBtn {
display: block;
position: relative;
width: 30%;
margin: 1% auto;
padding: 8px;
background-color: #333;
color: #fff;
text-align: center;
}
#top .moreBtn {
width: 100%;
padding: 4px;
font-size: 14px;
margin-top: auto;
}
.moreBtn::after {
content: '';
display: block;
position: absolute;
right: 12px;
top: calc(50% - 3px);
width: 6px;
height: 6px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
transform: rotate(45deg);
}
#top .home_report_more a {
display: block;
width: 50%;
margin: auto;
padding: 24px 0;
}
@media only screen and (max-width:1024px) {
.moreBtn {
width: 50%;
}
}
@media only screen and (max-width: 767px) {
.moreBtn,
#top .moreBtn {
width: 100%;
padding: 4px;
font-size: 12px;
}
.moreBtn::after {
top: calc(50% - 2px);
width: 4px;
height: 4px;
}
}
/*工事工期計算
------------------------------------------------------------*/
.construction_period_flow {
display: block;
width: 466px;
margin-top: 12px;
}
#contents .constructionPeriod_calculation h3 {
margin-top: 40px;
border-bottom: 0;
color: #00b319;
font-size: 125%;
}
.calculationArea {
width: 40%;
margin: auto;
padding: 24px;
background-color: #f7f7f7;
text-align: center;
}
#contents .calculationArea h4 {
width: 100%;
margin: 0 auto 16px;
padding: 0;
background-color: transparent;
}
.calculationArea_input {
width: 6em;
margin: 0 16px;
text-align: right;
}
.calculationArea_btn {
text-align: center;
color: #fff;
width: 200px;
margin: 24px auto 0;
display: block;
padding: 8px;
border: 0;
background-color: #00B319;
transition: 0.3s;
box-shadow: 1px 1px 2px 1px #ddd;
-moz-box-shadow: 1px 1px 2px 1px #ddd;
-webkit-box-shadow: 1px 1px 2px 1px #ddd;
font-weight: bold;
font-size: 90%;
}
.calculationArea_btn:hover {
background-color: #03d320;
}
.calculation_result,
.calculation_other {
display: none;
width: 40%;
margin: 24px auto 0;
}
.calculation_other {
padding: 8px;
background-color: #F1FEF2;
color: #00b319;
font-weight: bold;
text-align: center;
}
.calculation_result table {
width: 100%;
}
.calculation_result table th {
width: 60%;
}
.calculation_result table td {
width: 40%;
}
.calculation_result table th,
.calculation_result table td {
padding: 8px 32px 8px 0;
text-align: right;
}
.calculation_result table td span {
/* font-weight: bold; */
}
.construction_total {
padding-top: 16px;
}
.construction_total th,
.construction_total td {
background-color: #F1FEF2;
color: #00b319;
font-weight: bold;
}
.calculation_notes {
font-size: 90%;
text-align: center;
}
@media only screen and (max-width: 1024px) {
.calculationArea,
.calculation_result,
.calculation_other,
.calculation_result table th,
.calculation_result table td {
width: 50%;
}
}
@media only screen and (max-width: 767px) {
.construction_period_flow {
width: 100%;
}
.calculationArea,
.calculation_result,
.calculation_other {
width: 100%;
}
}
/*wordpress用
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/*======WP管理画面と共有の基本部品===================*/
/*斜め
------------------------------------------------------------*/
em {/*メイリオは斜めにならないそうだ*/
font-style: oblique;
}
/*引用
------------------------------------------------------------*/
blockquote {
background-color: #e4e4e4;
position: relative;
border-left: 3px solid #ccc;
border-radius: 5px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 35px;
}
blockquote:before {
content: "“";
font-size: 600%;
line-height: 1em;
color: #999;
position: absolute;
left: 0;
top: 10px;
}
/*リスト*/
/*
レイアウトの都合上ul,ol,liなどは、リスト化を停止しているので、あえてクラスをかけてリスト化する。*/
#contents ul li {/*これで設定しない*/
}
#contents ol li {/*これで設定しない*/
}
audio, video {
display: inline-block;
}
/*画像の配置
------------------------------------------------------------*/
.aligncenter {
clear: both;
display: block!important;
margin-left: auto!important;
margin-right: auto!important;
text-align: center!important;
}
.alignleft {
display: inline!important;
float: left!important;
margin-right: 10px;
}
.alignright {
display: inline!important;
float: right!important;
margin-left: 10px;
}
@media only screen and (min-width: 641px) {/*641px以上*/
/*ブログの記事のみ画像の右と下に余白を入れる*/
section.entry img {
margin-top: 0;
}
}
/*画像
------------------------------------------------------------*/
/*スマホでは、小さくなるので、特にレティーナサイズを用意しない。重くなるし*/
.size-thumbnail {/*画像3つ並び*/
max-width: 100%;/*320px;*/
height: auto;
}
.size-medium {
max-width: 100%;
height: auto;
}
.size-large {
max-width: 100%;
height: auto;
}
.size-full {
max-width: 100%;/*小さいサイズでも投稿したものの元のサイズだから*/
height: auto;
}
.news .size-full {
max-width: 320px;
}
@media only screen and (min-width: 641px) {/*641px以上*/
.size-thumbnail {
max-width: 320px;
}
.size-medium {
max-width: 640px;
}
}
/*キャプション
------------------------------------------------------------*/
/*中の画像は、全て100％になるように。*/
.wp-caption .size-thumbnail, .wp-caption .size-medium, .wp-caption .size-large, .wp-caption .size-full {
width: 100%!important;
margin-right: 0;
margin-left: 0;
}
/*キャプション*/
.wp-caption {/*キャプション枠*/
border-radius: 10px;
border: 1px solid #e5e5e5;
padding: 5px;
margin-top: 5px;
display: block;
margin-bottom: 10px;
text-align: center;
max-width: 50%;
height: auto;
}
@media only screen and (min-width: 641px) {/*641px以上*/
.wp-caption {/*キャプション枠*/
max-width: 100%;
}
}
p.wp-caption-text {/*キャプション文字*/
color: #00b319;
font-size: 12px;
font-weight: bold;
line-height: 1.4;
text-align: center;
padding-top: 5px;
}
@media only screen and (min-width: 641px) {/*641px以上*/
p.wp-caption-text {/*キャプション文字*/
font-size: 14px;
}
}
/*ページ送り
------------------------------------------------------------*/
/*Default style for WP-PageNavi plugin http://wordpress.org/extend/plugins/wp-pagenavi/*/
div.wp-pagenavi {/*全体をかこう*/
width: auto;
clear: both;
text-align: center;
padding: 10px;
margin-top: 10px;
margin-right: 0;
margin-bottom: 10px;
margin-left: 0;
background-color: #F1FEF2;
border-radius: 5px;
}
div.wp-pagenavi a, div.wp-pagenavi span {
font-weight: bold;
text-decoration: none;
border-radius: 5px;
margin: 2px;
display: inline-block;
white-space: nowrap;
padding-top: 10px;
padding-right: 15px;
padding-bottom: 10px;
padding-left: 15px;
}
div.wp-pagenavi .pages {
background-color: #ddd;
}
div.wp-pagenavi .current {
color: #fff!important;
background-color: #00b319;
}
div.wp-pagenavi a {
color: #fff!important;
background-color: #282828;
}
div.wp-pagenavi a:hover {
color: #fff!important;
background-color: #03d320;
}
/*ブログ記事中のページ送り
------------------------------------------------------------*/
.info-contributor {
width: auto;
clear: both;
text-align: center;
padding: 10px;
margin-top: 10px;
margin-right: 0;
margin-bottom: 10px;
margin-left: 0;
background-color: #F1FEF2;
border-radius: 5px;
}
/*ブログと新着一覧のサムネイル
------------------------------------------------------------*/
.blog-list {
margin-bottom: 37px;
display: flex;/**/
align-items: flex-start;/*これで画像が縦に伸びるのを防止*/
flex-wrap: wrap;/*折り返しができる*/
}
.blog-list:after {/*overflow: hidden;の代わりに.clearfix:after*/
content: "";
clear: both;
display: block;
}
.blog-thumbnail {
width: 31.3333%;
height: auto;
margin-right: 2%;
padding: 0;
}
.blog-summary {
width: 66.6667%;
height: auto;
padding: 0;
}
.blog-summary:after {/*overflow: hidden;の代わりに.clearfix:after*/
content: "";
clear: both;
display: block;
}
/*ブログカレンダー等
------------------------------------------------------------*/
.blog-calendar-latest {
display: flex;/**/
align-items: flex-start;/*これで画像が縦に伸びるのを防止*/
flex-wrap: wrap;/*折り返しができる*/
}
.blog-calendar {
width: 100%;
padding: 0;
margin: 0 0 25px 0;
}
#wp-calendar th {
padding: 3px!important;
text-align: center;
}
#wp-calendar td {
padding: 3px!important;
text-align: center;
}
.blog-latest {
width: 100%;
padding: 0;
margin: 0 0 25px 0;
}
.blog-latest ul li {
list-style: none inside;
}
@media only screen and (min-width: 641px) {/*641px以上*/
.blog-calendar {
padding: 0;
width: 48%;
margin-right: 2%;
}
.blog-latest {
padding: 0;
width: 50%;
}
}
#wp-calendar th, #wp-calendar td {
width: auto;
display: table-cell!important;
}
/*------*/
.comment-body {
margin-bottom: 30px;
}
.comment-body p {
margin-top: 0;
margin-bottom: 0;
}
/*Contact Form 7
------------------------------------------------------------*/
/*---Contact Form 7のラジオボタンを縦並びに---*/
.wpcf7-radio .wpcf7-list-item, .wpcf7-checkbox .wpcf7-list-item {
/*margin-top: 10px;*/
display: block;
}
/*---Contact Form 7送信ボタン---*/
.wpcf7-submit {
font-size: 150%;
line-height: 1em;
text-align: center;
color: #ffffff;
margin-top: 10px;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
display: block;
padding-top: 20px;
padding-right: 10px;
padding-bottom: 20px;
padding-left: 10px;
border-top-width: 0;
border-right-width: 0;
border-bottom-width: 0;
border-left-width: 0;
background-color: #00B319;
transition: 0.3s;/*ふわっとなる*/
/* box-shadow --- overflow: hidden;のある枠ギリギリだと表示されなくなる*/
box-shadow: 1px 1px 2px 1px #dddddd;
-moz-box-shadow: 1px 1px 2px 1px #dddddd;
-webkit-box-shadow: 1px 1px 2px 1px #dddddd;
font-weight: bolder;
}
.wpcf7-submit:hover {
background-color: #00dd1f;
}
div.wpcf7 .wpcf7-submit:disabled {
cursor: not-allowed;
background-color: #CCCCCC!important;
}
/*editor-style.css内で、リンクボタンなどが変形するのを防ぐ
------------------------------------------------------------*/
/*---wp-content.cssの相殺---*/
.mce-content-body a[data-mce-selected] {
padding: initial!important;
margin: initial!important;
}
/*============================================================
印刷用
============================================================*/
/*印刷用に大きいグリッドを優先して表示するようにする場合
------------------------------------------------------------*/
@media print {
.show-for-small, .show-for-medium-up {
display: none;
}
h1 {
text-align: center;
margin-right: auto;
margin-left: auto;
}
}