@charset "UTF-8";

:root {
  --color-4column-000: #000;
  --color-4column-FFF: #FFF;
  --color-3column-000: #000;
  --color-3column-FFF: #FFF;
  --color-2column-000: #000;
  --color-2column-FFF: #FFF;
  --color-1column-000: #000;
  --color-1column-FFF: #FFF;
  --color-table-999: #999;
  --color-table-CCC: #CCC;
  --color-block-000: #000;
  --color-block-999: #999;
  --color-block-FFF: #FFF;
  --color-button-CCC: #CCC;
  --color-table-columu-th: #999;
  --color-table-columu-border: #CCC;
  --color-table-columu-color: #FFF;
  --color-table-columu-td_first: #666;
  --color-table-columu-td_first-color: #FFF;
  --color-table-columu-td_before: #666;
  --color-table-columu-td_before-color: #000;
}

/**************************
4カラム
**************************/
.template_freehtml_4column{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom:1.5rem;
}
.template_freehtml_4column .template_freehtml_4column-item{
    width:23%;
    margin-bottom:1.5rem;
}
.template_freehtml_4column .template_freehtml_4column-item .template_freehtml_4column-item-img img{
    width:100%;
}
.template_freehtml_4column .template_freehtml_4column-item .template_freehtml_4column-item-title{
    font-weight:bold;
    margin-top:.5rem;
}
.template_freehtml_4column .template_freehtml_4column-item .template_freehtml_4column-item-text{
    margin-top:.5rem;
}
.template_freehtml_4column .template_freehtml_4column-item .template_freehtml_4column-item-btn{
    margin-top:.5rem;
}
.template_freehtml_4column .template_freehtml_4column-item .template_freehtml_4column-item-btn a{
    display: block;
    background: var(--color-4column-000);
    color: var(--color-4column-FFF);
    text-align: center;
    text-decoration: none;
    border-radius: 8px;
    line-height: 40px;
}
.template_freehtml_4column .template_freehtml_4column-item .template_freehtml_4column-item-img a:hover,
.template_freehtml_4column .template_freehtml_4column-item .template_freehtml_4column-item-btn a:hover{
    opacity:.7;
}
@media screen and (max-width:767px){
  .template_freehtml_4column .template_freehtml_4column-item{
    width:48%;
  }
}

/**************************
3カラム
**************************/
.template_freehtml_3column{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom:1.5rem;
}
.template_freehtml_3column::after{
    content:"";
    display:block;
    width:31%;
    height:0;
}
.template_freehtml_3column .template_freehtml_3column-item{
    width:31%;
    margin-bottom:1.5rem;
}
.template_freehtml_3column .template_freehtml_3column-item .template_freehtml_3column-item-img img{
    width:100%;
}
.template_freehtml_3column .template_freehtml_3column-item .template_freehtml_3column-item-title{
    font-weight:bold;
    margin-top:.5rem;
}
.template_freehtml_3column .template_freehtml_3column-item .template_freehtml_3column-item-text{
    margin-top:.5rem;
}
.template_freehtml_3column .template_freehtml_3column-item .template_freehtml_3column-item-btn{
    margin-top:.5rem;
}
.template_freehtml_3column .template_freehtml_3column-item .template_freehtml_3column-item-btn a{
    display: block;
    background: var(--color-3column-000);
    color: var(--color-3column-FFF);
    text-align: center;
    text-decoration: none;
    border-radius: 8px;
    line-height: 40px;
}
.template_freehtml_3column .template_freehtml_3column-item .template_freehtml_3column-item-img a:hover,
.template_freehtml_3column .template_freehtml_3column-item .template_freehtml_3column-item-btn a:hover{
    opacity:.7;
}

/**************************
2カラム
**************************/
.template_freehtml_2column{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom:1.5rem;
}
.template_freehtml_2column .template_freehtml_2column-item{
    width:48%;
    margin-bottom:1.5rem;
}
.template_freehtml_2column .template_freehtml_2column-item .template_freehtml_2column-item-img img{
    width:100%;
}
.template_freehtml_2column .template_freehtml_2column-item .template_freehtml_2column-item-title{
    font-weight:bold;
    margin-top:.5rem;
}
.template_freehtml_2column .template_freehtml_2column-item .template_freehtml_2column-item-text{
    margin-top:.5rem;
}
.template_freehtml_2column .template_freehtml_2column-item .template_freehtml_2column-item-btn{
    margin-top:.5rem;
}
.template_freehtml_2column .template_freehtml_2column-item .template_freehtml_2column-item-btn a{
    display: block;
    background: var(--color-2column-000);
    color: var(--color-2column-FFF);
    text-align: center;
    text-decoration: none;
    border-radius: 8px;
    line-height: 40px;
}
.template_freehtml_2column .template_freehtml_2column-item .template_freehtml_2column-item-img a:hover,
.template_freehtml_2column .template_freehtml_2column-item .template_freehtml_2column-item-btn a:hover{
    opacity:.7;
}

/**************************
1カラム
**************************/
.template_freehtml_1column{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom:1.5rem;
}
.template_freehtml_1column .template_freehtml_1column-item{
    width:100%;
    margin-bottom:1.5rem;
}
.template_freehtml_1column .template_freehtml_1column-item .template_freehtml_1column-item-img img{
    width:100%;
}
.template_freehtml_1column .template_freehtml_1column-item .template_freehtml_1column-item-title{
    font-weight:bold;
    margin-top:.5rem;
}
.template_freehtml_1column .template_freehtml_1column-item .template_freehtml_1column-item-text{
    margin-top:.5rem;
}
.template_freehtml_1column .template_freehtml_1column-item .template_freehtml_1column-item-btn{
    margin-top:.5rem;
}
.template_freehtml_1column .template_freehtml_1column-item .template_freehtml_1column-item-btn a{
    display: block;
    background: var(--color-1column-000);
    color: var(--color-1column-FFF);
    text-align: center;
    text-decoration: none;
    border-radius: 8px;
    line-height: 40px;
}
.template_freehtml_1column .template_freehtml_1column-item .template_freehtml_1column-item-img a:hover,
.template_freehtml_1column .template_freehtml_1column-item .template_freehtml_1column-item-btn a:hover{
    opacity:.7;
}


/**************************
テーブル
**************************/
.template_freehtml_table{
    width:100%;
    margin-bottom:3rem;
    border-collapse:collapse;
    box-sizing: border-box;
}
.template_freehtml_table th,
.template_freehtml_table td{
    border: 1px solid var(--color-table-999);
    padding: 1rem;
    box-sizing: border-box;
}
.template_freehtml_table th{
    width:33%;
    background: var(--color-table-CCC);
}
@media screen and (max-width:767px){
  .template_freehtml_table th,
  .template_freehtml_table td{
    display:block;
  }
  .template_freehtml_table th{
    width: 100%;
  }
}

/**************************
テーブル(スクロールする場合)
**************************/
.scroll-table {
    margin-bottom:3rem;
    border-collapse:collapse;
}
.scroll-table table.template_freehtml_table-scroll {
    width:100%;
}
.scroll-table table.template_freehtml_table-scroll th,
.scroll-table table.template_freehtml_table-scroll td{
    border: 1px solid var(--color-table-999);
    padding: 1rem;
}
.scroll-table table.template_freehtml_table-scroll th{
    width:33%;
    background: var(--color-table-CCC);
}
@media screen and (max-width:767px){
  .scroll-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
}

/**************************
画像 + テキスト
**************************/
.template_freehtml_blockbox{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom:3rem;
}
.template_freehtml_blockbox-imgleft{
    width:33%;
}
.template_freehtml_blockbox-imgleft img{
    width:100%;
}
.template_freehtml_blockbox-textright{
    width:65%;
}
.template_freehtml_blockbox-textright .template_freehtml_block-box-title{
    font-weight: bold;
    border-bottom: 2px var(--color-block-999) solid;
    margin-bottom: 0.5rem;
    padding-bottom: 0.1rem;
}
.template_freehtml_blockbox-textright .template_freehtml_block-box-btn {
    margin-top:.5rem;
}
.template_freehtml_blockbox-textright .template_freehtml_block-box-btn a{
    display: block;
    background: var(--color-block-000);
    color: var(--color-block-FFF);
    text-align: center;
    text-decoration: none;
    border-radius: 8px;
    line-height: 40px;
}
.template_freehtml_blockbox-imgleft a:hover,
.template_freehtml_blockbox-textright .template_freehtml_block-box-btn a:hover{
    opacity:.7;
}
.template_freehtml_blockbox-imgright{
    width:33%;
}
.template_freehtml_blockbox-imgright img{
    width:100%;
}
.template_freehtml_blockbox-textleft{
    width:65%;
}
.template_freehtml_blockbox-textleft .template_freehtml_block-box-title{
    font-weight: bold;
    border-bottom: 2px var(--color-block-999) solid;
    margin-bottom: 0.5rem;
    padding-bottom: 0.1rem;
}
.template_freehtml_blockbox-textleft .template_freehtml_block-box-btn {
    margin-top:.5rem;
}
.template_freehtml_blockbox-textleft .template_freehtml_block-box-btn a{
    display: block;
    background: var(--color-block-000);
    color: var(--color-block-FFF);
    text-align: center;
    text-decoration: none;
    border-radius: 8px;
    line-height: 40px;
}
.template_freehtml_blockbox-imgright a:hover,
.template_freehtml_blockbox-textleft .template_freehtml_block-box-btn a:hover{
    opacity:.7;
}
@media screen and (max-width:767px){
.template_freehtml_blockbox-imgleft{
    width:100%;
}
.template_freehtml_blockbox-textright{
    width:100%;
}

.template_freehtml_blockbox-imgright{
    width:100%;
    order:1;
}
.template_freehtml_blockbox-textleft{
    width:100%;
    order:2;
}
}


/**************************
リスト設定
**************************/
ul.template_freehtml_ullist,
ol.template_freehtml_ollist{
	padding-left: 3rem;
}
ul.template_freehtml_ullist li{
	list-style: disc!important;
}
ol.template_freehtml_ollist li{
	list-style: decimal!important;
}

/**************************
ボタン
**************************/

div.template_freehtml_button a{
    display: block;
    background: var(--color-button-CCC);
    text-align: center;
    border-radius: 5px;
    line-height: 50px;
    max-width: 350px;
    width: 100%;
    margin: 0 auto!important;
    text-decoration: none;
}
div.template_freehtml_button a:hover{
    opacity: .7;
}

/**************************
テーブル（列見出しあり用）
**************************/
.template_freehtml_table_column{
    width:100%;
}
.template_freehtml_table_column th {
  background: var(--color-table-columu-th);
  border: solid 1px var(--color-table-columu-border);
  color: var(--color-table-columu-color);
  padding: 10px;
}

.template_freehtml_table_column td {
  border: solid 1px var(--color-table-columu-border);
  padding: 10px;
}

.template_freehtml_table_column td:first-child {
  background: var(--color-table-columu-td_first);
  color: var(--color-table-columu-td_first-color);
}
@media screen and (max-width:767px){
    .template_freehtml_table_column .thead {
    display: none;
  }
  .template_freehtml_table_column tr {
    width: 100%;
  }
  .template_freehtml_table_column th,
  .template_freehtml_table_column td{
      margin:0;
  }
  .template_freehtml_table_column td {
    display: block;
    text-align: right;
    width: 100%;
    padding:0;
  }
  .template_freehtml_table_column td span{
    margin: 10px;
    display: block;
  }
  .template_freehtml_table_column td:first-child {
    background: var(--color-table-columu-td_first);
    color: var(--color-table-columu-td_first-color);
    font-weight: bold;
    text-align: center;
    padding: 10px 0;
  }
  .template_freehtml_table_column td:before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
    padding: 10px;
    background: var(--color-table-columu-td_before);
    color: var(--color-table-columu-td_before-color);
  }
}