.article-column{}
.article-column h1{}
.article-column h2{
font-size: 1.4em;
position: relative;
font-weight: bold;
padding: 0 0 5px 54px;
border-bottom: 1px solid #c1c1c1;
box-sizing: border-box;
vertical-align: middle;
margin: 3em 0 1em;
}
.article-column h2:after {
content: "";
background: url(/sp/images/common/mod_ico_htB01_01.png)no-repeat 0 0;
background-size: 34.5px 15.5px;
position: absolute;
top: .5em;
left: 10px;
display: block;
width: 34.5px;
height: 15.5px;
}
@media screen and (max-width: 767px) {
.article-column h2{
font-size: 1.2em;
padding: 0 0 5px 45px;
}
.article-column h2:after {
top: .25em;
left: 0px;
}
}
.article-column h3{
font-size: 1.2em;
font-weight: bold;
width: 100%;
line-height: 1.5;
vertical-align: middle;
padding-left: 30px;
position: relative;
box-sizing: border-box;
margin: 3em 0 1em;
}
.article-column h3:before {
content: "";
display: block;
width: 15px;
height: 2px;
background: #d6ae51;
position: absolute;
left: 0px;
top: 0.6em;
}
.article-column h4{
font-weight: bold;
margin: 1em 0;
font-size: 1.1em;
}
.article-column img{
max-width: 100%;
height: auto;
width: auto;
margin: 0;
}
.article-column > img{
margin: 1em auto;
}
.article-column figure{
margin: 0;
}
.article-column > p{
/* margin: .5em 0; */
}
.article-column span{
background: linear-gradient(transparent 60%, #ffea8c7d 60%);
}
.article-column > p strong,
.article-column > p b{
font-weight: bold;
color: #d29a37;
}
.article-column a:link,
.article-column a:visited{
text-decoration: underline;
}
.article-column a:hover{
text-decoration: none;
}
.article-column ul{
margin: 1em 0;
}
.article-column ul li{
padding-left: 1em;
text-indent: -1em;
}
.article-column ul li::before{
content: "繝ｻ";
display:inline;
}
.article-column table,
.article-column table td{
width:auto;
border:none;
box-sizing:border-box;
}
.article-column table {
position: relative;
width: 100%;
border-spacing: 0;
border-collapse: collapse;
border: 2px solid #FFF;
border-bottom:1px solid #d2d2d2;
margin: 1em 0;
}
.article-column table th {
color: #fff;
padding: 10px 30px;
background: #cacfd2;
text-align: center;
border: 1px solid #a9afb1;
}
.article-column table td {
text-align: center;
padding: 12px;
border: 1px solid #d2d2d2;
vertical-align: middle;
}
.article-column table td[valign="top"] {
vertical-align: top;
}
.article-column table p {
line-height: 1.6;
}
.article-column table.col2 td{
width:50%;
}
.article-column table.col3 td{
width:33%;
}
.article-column table.-border-top{
border-top: 1px solid #d2d2d2;
}
@media screen and (max-width: 767px) {
.article-column table.f-small--sm th,
.article-column table.f-small--sm td,
.article-column table.f-small--sm p{
font-size: 12px;
line-height: 1.4;
}
}
/* Compornent */
.article-column .article-button-section{
margin:2em 0;
background:#fbf5ed;
padding:2em;
}
@media screen and (max-width: 767px) {
.article-column .article-button-section{
padding:1.4em;
}
}
.article-column .article-button-cta + .article-button-cta{
margin-top: 1em;
}
.article-column .article-button-cta{
max-width: 500px;
position: relative;
display: block;
text-align: center;
margin: auto;
color: #ffffff;
text-decoration: none !important;
padding: .4em;
border-radius: 6rem;
font-size: 1.3em;
box-sizing: border-box;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#d29a37+0,c58405+99 */
background: #d29a37; /* Old browsers */
background: -moz-linear-gradient(left, #d29a37 0%, #c58405 99%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #d29a37 0%,#c58405 99%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #d29a37 0%,#c58405 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d29a37', endColorstr='#c58405',GradientType=1 ); /* IE6-9 */
}
@media screen and (max-width: 767px) {
.article-column .article-button-cta{
font-size: 1.2em;
}
}
.article-column .article-button-cta.-arrow::after{
content: "";
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
border: .3em solid transparent;
border-left: .4em solid #FFF;
}
.article-column .article-button-cta.-bg-gray{
border: 1px solid #c8c8c8;
color: #333;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#d29a37+0,c58405+99 */
background: #F5F5F4;
}
.article-column .article-button-cta.-bg-gray.-arrow::after{
border-left: .4em solid #333;
}
.article-column .btnTypeA01 a {
display: block;
padding: 15px 20px 15px 23px;
background: url(/images/common/mod_bg_btA01_01.gif) 0 0 no-repeat;
background-size: cover;
text-decoration: none;
border: 1px solid #c8c8c8;
}
.article-column .btnTypeA01 a [class^="icon-"],
.article-column .btnTypeA01 a [class*=" icon-"] {
padding: 0 10px 0 0;
color: #989898;
font-size: 0.714em;
position: relative;
top: -1px;
}
.article-column .box-boder{
padding: 1em;
margin: 1em 0;
border: 1px solid #c1c1c1;
}
.article-column .box-boder ul,
.article-column .box-boder h3,
.article-column .box-boder h4,
.article-column .box-boder h5 {
margin: 0;
}
/* Utilities */
.bg-f4f6f7{
background-color: #f4f6f7;
}
.text-link.-arrow{
position: relative;
display: inline-block;
padding: 0 0 0 1em;
color: #000;
vertical-align: middle;
text-decoration: none;
}
.text-link.-arrow::before{
position: absolute;
top: 0;
bottom: 0;
left: 0;
margin: auto;
content: "";
vertical-align: middle;
}
.text-link.-arrow::before {
left: 3px;
width: 4px;
height: 4px;
border-top: 1px solid #989898;
border-right: 1px solid #989898;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.row{
display:flex;
align-items: center;
justify-content: space-around;
}
.col{
text-align: center;
}
.col.-col2{
width:50%;
}
.col.-col3{
width:33%;
}
@media screen and (max-width: 767px) {
.f-small--sm{
font-size: 12px;
line-height: 1.2;
}
.sp-youtube {
width: 100%;
height: 0;
position: relative;
padding-top: 56.25%;
overflow: hidden;
}
.sp-youtube iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
.pc{ display: block;}
.sp{ display: none;}
@media screen and (max-width: 767px) {
.pc{display: none;}
.sp{display: block;}
}