.tkp-title__2nd{
display: block;
position: relative;
margin: 20px 0;
padding: 10px 10px 10px 10px;
font-size: 1.3rem;
font-weight: 600;
color: #222222;
border-bottom: 2px solid;
border-image: linear-gradient(90deg, #B98CFF 0%, #FFB06A 38%, #FFE48A 72%, #FFE48A 100%) 1;
line-height: 1.4em;
}
.tkp-title__3rd{
display: block;
position: relative;
margin: 15px 0;
padding: 5px 10px;
font-size: 1.2rem;
font-weight: 600;
color: #222222;
}
.tkp-title__3rd--line{
border-left: 3px solid #d1a865;
padding: 5px 10px 5px 15px;
}
.tkp-margin--top{
margin-top: 50px!important;
}
.tkp-title__pen{
padding: 10px 10px 10px 35px;
}
.tkp-title__pen::before{
display: inline-block;
position: absolute;
left: 5px;
bottom: 8px;
content: url( 'data:image/svg+xml;utf-8,');
}
.tkp-title__checkbox{
padding: 5px 10px 5px 35px;
}
.tkp-title__checkbox::before{
display: inline-block;
position: absolute;
left: 5px;
bottom: 0px;
content: url( 'data:image/svg+xml;utf-8,');
}
.tkp-title__crown{
padding: 5px 10px 5px 35px;
}
.tkp-title__crown::before{
display: inline-block;
position: absolute;
left: 3px;
bottom: 0px;
content: url( 'data:image/svg+xml;utf-8,');
}
.tkp-title__mame{
padding: 0 0 1px 30px;
}
.tkp-title__mame::before{
display: inline-block;
position: absolute;
left: 3px;
bottom: -5px;
content: url( 'data:image/svg+xml;utf-8,');
}
.tkp-title__ok{
padding: 0 0 1px 30px;
}
.tkp-title__ok::before{
display: inline-block;
position: absolute;
left: 3px;
bottom: -3px;
content: url( 'data:image/svg+xml;utf-8,');
}
.tkp-title__ng{
padding: 0 0 1px 30px;
}
.tkp-title__ng::before{
display: inline-block;
position: absolute;
left: 3px;
bottom: -3px;
content: url( 'data:image/svg+xml;utf-8,');
}
.tkp-title__4th{
font-size: 1rem;
font-weight: 600;
margin: 25px 0 10px 0;
}
.tkp-small{
font-size: 0.9rem;
}
.tkp-large{
font-size: 1.5rem;
}
.tkp-bold{
font-weight: 600;
}
.tkp-red{
color: #ac0000;
}
.tkp-blue{
color: #277EE8;
}
.tkp-underline{
text-decoration: underline;
}
.tkp-caption{
margin: 0;
padding: 8px 0;
line-height: 1.8;
}
.tkp-caption__center{
text-align: center;
}
.tkp-caption__right{
text-align: right;
}
.tkp-caption__left{
text-align: left;
}
.tkp-a{
color: rgba(207, 129, 0, 1);
text-decoration: underline;
}
.tkp-a:hover{
color: rgba(207, 129, 0, 1);
text-decoration: none;
}
.tkp-btn{
margin: 20px auto;
display: inline-flex;
min-width: 300px;
max-width : 100%;
justify-content: space-between;
border-radius: 999px;
box-sizing: border-box;
padding: 12px 10px 10px 40px;
text-decoration: none;
border: 1px solid rgba(197, 166, 110, 0.45);
background-color: #151719;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
}
.tkp-btn__ancher{
display: inline-block;
font-size: 16px;
font-weight: 700;
color: #FFFFFF;
letter-spacing: 0.04em;
}
.tkp-btn__circle{
width: 34px;
height: 34px;
border-radius: 50%;
background: linear-gradient(90deg, #F28A5F 0%, #FFE346 100%);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-left: 30px;
color: #151719;
transition: opacity 0.2s ease, transform 0.2s ease;
}
.tkp-btn:hover .tkp-btn__circle{
text-indent: 6px;
}
.tkp-a__download::before{
display: inline-block;
margin-right: 5px;
content: url( 'data:image/svg+xml;utf-8,');
}
.tkp-img{
display:block;
margin: 0 AUTO;
width: AUTO;
max-width: 100%;
}
.tkp-box__gray{
margin: 20px 0;
background-color: #f7f7f7;
padding: 15px;
box-sizing: border-box;
}
.tkp-box__beige{
margin: 20px 0;
background-color: #f8f5ef;
padding: 15px;
box-sizing: border-box;
}
.tkp-box__red{
margin: 20px 0;
background-color: #fdeeee;
padding: 15px;
box-sizing: border-box;
}
.tkp-box__blue{
margin: 20px 0;
background-color: #edf3ff;
padding: 15px;
box-sizing: border-box;
}
.tkp-box__radius{
border-radius: 8px;
}
.tkp-box__citation{
background-color: #f7f7f7;
border-left: 5px solid #c9c7c5;
padding: 15px;
margin: 30px 0;
box-sizing: border-box;
}
.tkp-width__100{
width: 100%;
}
.tkp-dl{
display: table;
}
.tkp-dl dt{
display: table-cell;
width: 30%;
text-align: center;
border: 5px solid #fff;
background-color: #f7f7f7;
padding: 15px;
}
.tkp-dl dd{
display: table-cell;
padding: 10px;
}
.tkp-table{
border-collapse: collapse;
margin: 30px AUTO;
}
.tkp-table__th{
padding: 15px;
background-color: #f7f7f7;
}
.tkp-table__td{
padding: 15px;
background-color: #ffffff;
}
.tkp-table__border th,
.tkp-table__border td{
border: 1px solid #c9c7c5;
}
.tkp-list{
margin: 20px 0;
}
.tkp-list li{
margin: 0;
padding: 5px;
font-size: 14px;
}
.tkp-flex{
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
justify-content: start;
margin: 20px AUTO;
padding: 0;
}
.tkp-flex::after{
content: "";
display: block;
clear: both;
width: 100%;
}
.tkp-flex__reverse{
flex-direction: row;
}
.tkp-flex__1clmn{
width: calc(100% - 10px);
padding: 0px;
margin: 5px;
align-content: stretch;
box-sizing: border-box;
}
.tkp-flex__2clmn{
width: calc(100% - 10px);
padding: 0px;
margin: 5px;
align-content: stretch;
box-sizing: border-box;
}
.tkp-flex__3clmn{
width: calc(50% - 10px);
padding: 0px;
margin: 5px;
align-content: stretch;
box-sizing: border-box;
}
.tkp-flex__4clmn{
width: calc(50% - 10px);
padding: 0px;
margin: 5px;
align-content: stretch;
box-sizing: border-box;
}
.tkp-flex__5clmn{
width: calc(50% - 10px);
padding: 0px;
margin: 5px;
align-content: stretch;
box-sizing: border-box;
}
.tkp-flex__padding{
padding: 15px!important;
}
.tkp-flex__border{
border: 1px solid #c9c7c5;
}
.tkp-text__highlight{
background: var(--CTA--, linear-gradient(90deg, #F28A5F 0%, #FFE346 100%));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* PC版 (Auto-converted to min-width) */
@media screen and (min-width: 960px){
.tkp-title__2nd{
font-size: 24px;
line-height: initial;
}
.tkp-title__3rd{
font-size: 21px;
}
.tkp-title__4th{
font-size: 1.1rem;
}
.tkp-flex__reverse{
flex-direction: row-reverse;
}
.tkp-flex__1clmn{
width: 100%;
margin: 10px;
}
.tkp-flex__2clmn{
width: calc(50% - 20px);
margin: 10px;
}
.tkp-flex__3clmn{
width: calc(33.33% - 20px);
margin: 10px;
}
.tkp-flex__4clmn{
width: calc(25% - 20px);
margin: 10px;
}
.tkp-flex__5clmn{
width: calc(20% - 20px);
margin: 10px;
}
.tkp-large{
font-size: 3rem;
}
}
@media (max-width: 550px){
.tkp-flex__3clmn{
width: calc(100% - 10px);
margin: 5px;
}
.tkp-flex__4clmn{
width: calc(100% - 10px);
margin: 5px;
}
.tkp-flex__5clmn{
width: calc(100% - 10px);
margin: 5px;
}
}