.contents_btn01 a,
.glossary_archive .content_wrapper .heading.block_header_2 a:after,
main form .submit{
color: var(--i_btn_txt_color) !important;
background: var(--i_btn_color);
position: relative;
display: inline-block;
padding-left: 18px;
padding-right: 18px;
text-align: center;
border-radius: 100px;
font-family: inherit;
font-weight: 500;
}
main form .submit span{
display: block;
position:relative;
}
.contents_btn01 a:before,
main form .submit span:before{
position: absolute;
content: " ";
width: 7px;
height: 7px;
top: calc(50% - 4px);
left: 5px;
border-top: 1px solid var(--i_btn_txt_color);
border-right: 1px solid var(--i_btn_txt_color);
transform: rotate(45deg);
transition: all 0.3s ease;
z-index: 10;
}
.contents_btn01 a:hover,
.glossary_archive .content_wrapper .heading.block_header_2 a:hover:after,
main form .submit:hover{
background: var(--i_btn_hover_color);
color: var(--i_btn_hover_txt_color) !important;
}
.contents_btn01 a:hover:before,
main form .submit span:hover:before{
left: 10px;
}
.contents_btn01 a[target=_blank] span:before,
.contents_btn01 a[target=_blank] span:after{
border: 1px solid var(--i_btn_txt_color);
transition: all 0.3s ease;
}
.contents_btn01 a[target=_blank] span:hover:before,
.contents_btn01 a[target=_blank] span:hover:after{
border: 1px solid var(--i_btn_hover_txt_color);
}
.contents_btn01 a span{
text-align: center;
line-height: 1.5;
font-size: 1.5rem;
}
main form .submit{
position: relative;
display: inline;
padding: 0px;
}
main .widget_gallery01 .contents_btn01 a, main .gallery_archive .inner_item .contents_btn01 a,
main .gallery_single .inner_item .contents_btn01 a,
main * .contents_btn01 a {
overflow: visible;
margin-bottom: 10px;
}
main form .submit {
position: relative;
}
main form .submit span input {
font-size: 1.5rem;
font-weight: 500;
color: var(--i_btn_txt_color);
display: block !important;
background: transparent;
}
.widget_form form .submit input{
font-family: inherit;
}
#fixbtn .inner > div {
padding: 8px 15px!important;
}
input[type="button"],
input[type="text"],
input[type="submit"],
input[type="image"],
textarea{
-webkit-appearance: none;
border-radius: 0;
}
@media screen and (max-width: 500px){
#fixbtn .inner > div {
padding: 8px 1px!important;
}
}
.contents_btn01,
.contents_btn01 a,
.glossary_archive .content_wrapper .heading.block_header_2 a,
main form .submit{
overflow: hidden!important;
}
.contents_btn01 a,
.glossary_archive .content_wrapper .heading.block_header_2 a:after{
text-align: center;
background: var(--i_btn_color);
color: var(--i_btn_txt_color)!important;
position: relative;
display: inline-block;
padding-left: 10px;
padding-right: 10px;
transition: .4s ease-in-out;
font-family: inherit;
font-weight: 600;
}
main form .submit span input{
text-align: center;
background: var(--i_btn_color);
color: #fff !important;
position: relative;
display: inline-block;
padding-left: 10px;
padding-right: 10px;
transition: .4s ease-in-out;
font-family: inherit;
font-weight: 600;
}
main form .submit{
position: relative;
}
.contents_btn01 a:before,
main form .submit:before{
content:"";
position: absolute;
top: -25px;
left: -40px;
height:90px;
width:20px;
background : #fff;
opacity: 0.1;
transform: rotate(40deg);
transition: 0.3s;
z-index: 10;
pointer-events: none;
}
.contents_btn01 a:hover:before,
main form .submit:hover:before{
left:110%;
}
.contents_btn01 a:hover,
.glossary_archive .content_wrapper .heading.block_header_2 a:hover:after,
main form .submit span input:hover{
background: var(--i_btn_hover_color);
}
.contents_btn01 a[target=_blank] span:before,
.contents_btn01 a[target=_blank] span:after{
border: 1px solid var(--i_btn_txt_color);
transition: 0.3s;
}
.contents_btn01 a[target=_blank]:hover span:before,
.contents_btn01 a[target=_blank]:hover span:after{
border: 1px solid var(--i_btn_hover_txt_color);
}
.contents_btn01 a span{
text-align: center;
line-height: 1.5;
font-size: 1.5rem;
padding: 10px 10px;
}
input[type="button"],
input[type="text"],
input[type="submit"],
input[type="image"],
textarea{
-webkit-appearance: none;
border-radius: 0;
}
.contents_faq01.accordion .mymore a{
padding: 0 0 3px;
}
▼ヘッダーボタン
header .header_contents .header_col1 .btn>a,
header#pattern4 .wraper > .inner > .btn > a{
overflow: hidden!important;
display: block;
text-align: center;
background: var(--i_btn_color);
color: var(--i_btn_txt_color);
font-weight: 600;
padding: 10px 15px;
transition: 0.4s ease-in-out;
position: relative;
}
header .header_contents .header_col1 .btn>a::before,
header#pattern4 .wraper > .inner > .btn > a::before{
content:"";
position: absolute;
top: -25px;
left: -40px;
height:90px;
width:20px;
background : #fff;
opacity: 0.1;
transform: rotate(40deg);
transition: 0.3s;
z-index: 10;
pointer-events: none;
}
header .header_contents .header_col1 .btn>a:hover,
header#pattern4 .wraper > .inner > .btn > a:hover{
background: var(--i_btn_hover_color);
opacity: 1;
}
header .header_contents .header_col1 .btn>a:hover::before,
header#pattern4 .wraper > .inner > .btn > a:hover::before{
left:110%;
}
header .header_contents .header_col1 .btn > a[target="_blank"] span.inn,
header#pattern4 .wraper > .inner > .btn > a[target="_blank"] span.inn{
padding-right: 25px !important;
}
.contents_btn01 a,
.glossary_archive .content_wrapper .heading.block_header_2 a:after,
main form .submit span input{
color: var(--i_btn_txt_color)!important;
background: var(--i_btn_color);
position: relative;
display: inline-block;
border-radius: 0;
font-family: inherit;
}
.contents_btn01 a:before,
main form .submit span input:after{
position: absolute;
top: 5px;
left: 5px;
display: block;
width: calc(100% - 12px);
height: calc(100% - 12px);
content: "";
border: 1px solid rgba(255,255,255,0.5);
background: rgba(255,255,255,0);
transition: 0.2s ease-in-out;
pointer-events: none;
}
.contents_btn01 a:hover,
.glossary_archive .content_wrapper .heading.block_header_2 a:hover:after,
main form .submit span input:hover{
opacity: 0.8;
}
.contents_btn01 a:hover:before,
main form .submit span input:hover:after{
transform:scale(1.1,1.2);
transform-origin: center;
border: 1px solid rgba(255,255,255,0);
}
.contents_btn01 a[target=_blank] span:before,
.contents_btn01 a[target=_blank] span:after{
border: 1px solid var(--i_btn_txt_color);
transition: 0.2s ease-in-out;
}
.contents_btn01 a span{
text-align: center;
}
.contents_btn01 a[target="_blank"] span::before {
right: 11px;
}
.contents_btn01 a[target="_blank"] span::after {
right: 13px;
}
.contents_btn01 a[target="_blank"] span {
padding-right: 23px !important;
}
@media screen and (max-width: 450px){
#fixbtn .contents_btn01 span {
font-size: 1.35rem !important;
}
#fixbtn .contents_btn01 a:nth-last-child(1),
#fixbtn .contents_btn01 a:nth-last-child(2){
min-width: 150px;
}
}
▼ヘッダーボタン
header .header_contents .header_col1 .btn>a,
header#pattern4 .wraper > .inner > .btn > a{
display: block;
text-align: center;
background: var(--i_btn_color);
color: var(--i_btn_txt_color);
padding: 10px 15px;
transition: 0.4s ease-in-out;
letter-spacing: 0.1rem;
position: relative;
}
header .header_contents .header_col1 .btn>a::before,
header#pattern4 .wraper > .inner > .btn > a::before{
position: absolute;
top: 5px;
left: 5px;
display: block;
width: calc(100% - 12px);
height: calc(100% - 12px);
content: "";
border: 1px solid rgba(255,255,255,0.5);
background: rgba(255,255,255,0);
transition: 0.2s ease-in-out;
pointer-events: none;
}
header .header_contents .header_col1 .btn>a:hover,
header#pattern4 .wraper > .inner > .btn > a:hover{
opacity: 0.8;
}
header .header_contents .header_col1 .btn>a:hover::before,
header#pattern4 .wraper > .inner > .btn > a:hover::before{
transform:scale(1.1,1.2);
transform-origin: center;
border: 1px solid rgba(255,255,255,0);
}
header .header_contents .header_col1 .btn > a[target="_blank"] span.inn,
header#pattern4 .wraper > .inner > .btn > a[target="_blank"] span.inn{
padding-right: 25px !important;
}
.contents_btn01 a,
.glossary_archive .content_wrapper .heading.block_header_2 a:after,
main form .submit span input{
position: relative;
display: inline-block;
background: var(--i_btn_color);
color: var(--i_btn_txt_color)!important;
padding: 3px 25px!important;
transition: .3s ease-in-out;
overflow: visible!important;
border-radius: 0;
font-family: inherit;
font-weight: 600;
}
.widget_form form .submit input {
padding: 12px !important;
}
main form .submit span{
position: relative;
}
.contents_btn01 a:before,
main form .submit span:before{
display: block;
content:"";
width: 0px;
height: 2px;
background: #8dbbff;
position: absolute;
top: calc(50% - .5px);
left: calc(100% - 25px);
transition: .3s cubic-bezier(.41,.14,.83,.58);
transform-origin: left;
z-index: 1;
}
.contents_btn01 a:hover:before,
main form .submit span:hover:before{
width: 25px;
}
.contents_btn01 a:hover,
main form .submit span input:hover{
transform: translateX(5px);
}
.contents_btn01 a[target=_blank] span:before,
.contents_btn01 a[target=_blank] span:after{
border: 1px solid var(--i_btn_txt_color);
transition: .3s ease-in-out;
}
.contents_btn01 a:hover[target=_blank] span:before,
.contents_btn01 a:hover[target=_blank] span:after{
border: 1px solid var(--i_btn_hover_txt_color);
}
.contents_btn01 a span{
text-align: center;
padding: 6px 10px 6px 10px;
letter-spacing: 0.1rem;
}
#fixbtn .contents_btn01 a{
padding: 3px 0!important;
min-width: 155px!important;
}
#fixbtn .contents_btn01 a:before{
display: none;
}
#fixbtn .contents_btn01 a:hover{
transform: none;
opacity: 0.85;
}
.contents_btn01 a,
.glossary_archive .content_wrapper .heading.block_header_2 a:after{
border: 1px solid var(--i_btn_color);
color: var(--i_btn_color)!important;
background: transparent;
position: relative;
display: inline-block;
cursor: pointer;
border-radius: 0;
font-family: inherit;
transition: 0.4s ease-in-out;
letter-spacing: 0.2rem;
overflow: visible !important;
}
main form .submit span input{
border: 1px solid var(--i_btn_color);
color: var(--i_btn_color)!important;
background: none;
position: relative;
display: inline-block;
cursor: pointer;
border-radius: 0;
font-family: inherit;
transition: 0.4s ease-in-out;
letter-spacing: 0.2rem;
}
main form .submit{
position: relative;
}
.contents_btn01 a:before,
main form .submit:before{
position: absolute;
top: 4px;
left: 4px;
content: " ";
width: 100%;
height: 100%;
background: rgba(82, 46, 3,0);
border-right: 1px solid var(--i_btn_color);
border-bottom: 1px solid var(--i_btn_color);
transition: all 0.4s ease;
}
.contents_btn01 a:hover,
.glossary_archive .content_wrapper .heading.block_header_2 a:hover:after{
background: var(--i_btn_color);
color: #fff!important;
}
main form .submit span:hover input{
background: var(--i_btn_color);
color: #fff!important;
}
.glossary_archive .content_wrapper .heading.block_header_2 a:hover:after{
transform: none;
}
.contents_btn01 a:hover:before,
main form .submit:hover:before{
top: 0;
left: 0;
opacity: 0;
}
.contents_btn01 a[target=_blank] span:before,
.contents_btn01 a[target=_blank] span:after{
border: 1px solid var(--i_btn_color);
transition: .4s ease-in-out;
}
.contents_btn01 a:hover[target=_blank] span:before,
.contents_btn01 a:hover[target=_blank] span:after{
border: 1px solid #fff;
}
.contents_btn01 a span{
text-align: center;
line-height: 1.5;
font-size: 1.5rem;
}
input[type="button"],input[type="text"],input[type="submit"],input[type="image"],textarea{
-webkit-appearance: none;
border-radius: 0;
}
.contents_faq01.accordion .mymore a{
padding: 0 0 4px;
}
.contents_faq01.accordion .mymore a:hover{
opacity: 0.8;
}
*[style*="color: rgb(255, 255, 255);"] .contents_btn01 a,
*[style*="color: rgb(255, 255, 255);"].contents_btn01 a{
border: 1px solid #fff;
color: #fff!important;
}
*[style*="color: rgb(255, 255, 255);"] .contents_btn01 a:before,
*[style*="color: rgb(255, 255, 255);"].contents_btn01 a:before{
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
}
*[style*="color: rgb(255, 255, 255);"] .contents_btn01 a:hover,
*[style*="color: rgb(255, 255, 255);"].contents_btn01 a:hover{
border: 1px solid var(--i_btn_color);
}
*[style*="color: rgb(255, 255, 255);"] .contents_btn01 a:hover:before,
*[style*="color: rgb(255, 255, 255);"].contents_btn01 a:hover:before{
border-right: 1px solid var(--i_btn_color);
border-bottom: 1px solid var(--i_btn_color);
}
*[style*="color: rgb(255, 255, 255);"] .contents_btn01 a[target=_blank] span:before,
*[style*="color: rgb(255, 255, 255);"] .contents_btn01 a[target=_blank] span:after,
*[style*="color: rgb(255, 255, 255);"].contents_btn01 a[target=_blank] span:before,
*[style*="color: rgb(255, 255, 255);"].contents_btn01 a[target=_blank] span:after{
border: 1px solid #fff;
}
.contents_box01[class*="block_text"] .inner_item_txt .contents_btn01 a {
margin-bottom: 4px;
}
.widget_shop01.add_design3 .info p + .contents_btn01 .content_wrapper,
.widget_shop01.add_design4 .info p + .contents_btn01 .content_wrapper{
padding-bottom: 5px !important;
}
#comments_search .contents_btn01 .content_wrapper{
padding-bottom: 5px;
padding-right: 5px;
}
@media screen and (max-width: 768px) {
.widget_staff01.cotents_hide_sp .hidetgl {
padding-bottom: 4px;
}
}
▼ヘッダーボタン
header .header_contents .header_col1 .btn>a,
header#pattern4 .wraper > .inner > .btn > a{
overflow: visible !important;
display: block;
text-align: center;
background: transparent;
border: 1px solid var(--i_btn_color);
color: var(--i_btn_color);
font-weight: 600;
padding: 10px 15px;
transition: 0.4s ease-in-out;
position: relative;
}
header .header_contents .header_col1 .btn > a span.inn{
transition: 0.4s ease-in-out;
}
header .header_contents .header_col1 .btn>a::before,
header#pattern4 .wraper > .inner > .btn > a::before{
content:"";
position: absolute;
top: 4px;
left: 4px;
width: 100%;
height: 100%;
border-right: 1px solid var(--i_btn_color);
border-bottom: 1px solid var(--i_btn_color);
transition: all 0.4s ease;
}
header .header_contents .header_col1 .btn>a:hover,
header#pattern4 .wraper > .inner > .btn > a:hover{
background: var(--i_btn_hover_color);
color: var(--i_btn_hover_txt_color);
opacity: 1;
}
header .header_contents .header_col1 .btn > a:hover span.inn{
color: var(--i_btn_hover_txt_color);
}
header .header_contents .header_col1 .btn>a:hover::before,
header#pattern4 .wraper > .inner > .btn > a:hover::before{
top: 0;
left: 0;
opacity: 0;
}
header .header_contents .header_col1 .btn > a[target="_blank"] span.inn,
header#pattern4 .wraper > .inner > .btn > a[target="_blank"] span.inn{
padding-right: 25px !important;
}
.contents_btn01 a,
.glossary_archive .content_wrapper .heading.block_header_2 a:after{
color: var(--i_btn_txt_color)!important;
background: var(--i_btn_color);
position: relative;
display: inline-block;
padding-left: 15px;
padding-right: 35px;
text-align: center;
border: 1px solid var(--i_btn_color);
border-radius: 0;
font-family: inherit;
transition: 0.4s ease-in-out;
}
main form .submit span input{
color: var(--i_btn_txt_color)!important;
background: var(--i_btn_color);
position: relative;
display: inline-block;
padding-left: 25px !important;
padding-right: 40px !important;
text-align: center;
border: 1px solid var(--i_btn_color);
border-radius: 0;
font-family: inherit;
transition: 0.4s ease-in-out;
font-weight: 500;
}
main form .submit span{
position: relative;
}
.contents_btn01 a:before,
main form .submit span:before{
position: absolute;
content: " ";
width: 20px;
height: 1px;
background-color: var(--i_btn_txt_color);
top: calc(50% - 0.5px);
right: 15px;
z-index: 10;
}
.contents_btn01 a:after,
main form .submit span:after{
position: absolute;
content: " ";
width: 9px;
height: 1px;
background-color: var(--i_btn_txt_color);
right: 15px;
top: calc(50% - 0.5px);
-webkit-transform: rotate(35deg);
-webkit-transform-origin: right bottom;
transform: rotate(35deg);
transform-origin: right bottom;
}
.contents_btn01 a:hover,
.glossary_archive .content_wrapper .heading.block_header_2 a:hover:after,
main form .submit span input:hover{
background: transparent;
color: var(--i_btn_color)!important;
}
.contents_btn01 a:hover:before,
main form .submit span:hover:before,
.contents_btn01 a:hover:after,
main form .submit span:hover:after{
animation:0.18s steps(200) 0.1s normal forwards 1 thearrowlink;
-webkit-animation-name: thearrowlink;
-webkit-animation-duration:0.18s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: steps(200);
-webkit-animation-delay: 0;
-webkit-animation-direction: normal;
-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes thearrowlink{
0%{
right:35px
}
10%{
right:35px;
background-color: var(--i_btn_color)
}
100%{
right:15px;
background-color: var(--i_btn_color)
}
}
@keyframes thearrowlink{
0%{
right:35px
}
10%{
right:35px;
background-color: var(--i_btn_color)
}
100%{
right:15px;
background-color: var(--i_btn_color)
}
}
.contents_btn01 a[target=_blank] span:before,
.contents_btn01 a[target=_blank] span:after{
border: 1px solid var(--i_btn_txt_color);
transition: 0.4s ease-in-out;
}
.contents_btn01 a[target=_blank]:hover span:before,
.contents_btn01 a[target=_blank]:hover span:after{
border: 1px solid var(--i_btn_color);
}
.contents_btn01 a span{
text-align: center;
line-height: 1.5;
font-size: 1.5rem;
padding: 12px 15px;
}
input[type="button"],
input[type="text"],
input[type="submit"],
input[type="image"],
textarea{
-webkit-appearance: none;
border-radius: 0;
}
*[style*="color: rgb(255, 255, 255);"] .contents_btn01 a:hover,
*[style*="color: rgb(255, 255, 255);"].contents_btn01 a:hover{
border: 1px solid #fff;
color: #fff!important;
}
*[style*="color: rgb(255, 255, 255);"] .contents_btn01 a:hover:before,
*[style*="color: rgb(255, 255, 255);"].contents_btn01 a:hover:before,
*[style*="color: rgb(255, 255, 255);"] .contents_btn01 a:hover:after,
*[style*="color: rgb(255, 255, 255);"].contents_btn01 a:hover:after{
animation:0.18s steps(200) 0.1s normal forwards 1 thearrowlinkW;
-webkit-animation-name: thearrowlinkW;
}
@-webkit-keyframes thearrowlinkW{
0%{
right:35px
}
10%{
right:35px;
background-color: #fff
}
100%{
right:15px;
background-color: #fff
}
}
@keyframes thearrowlinkW{
0%{
right:35px
}
10%{
right:35px;
background-color: #fff
}
100%{
right:15px;
background-color: #fff
}
}
.contents_btn01 a,
.glossary_archive .content_wrapper .heading.block_header_2 a:after,
main form .submit{
color: var(--i_btn_txt_color)!important;
background: transparent;
position: relative;
display: inline-block;
padding: 5px 15px 5px!important;
text-align: center;
font-family: inherit;
font-weight: 700;
border-radius: 99px;
padding-bottom: 6px!important;
z-index: 1;
overflow: hidden!important;
}
main form .submit span{
display: block;
position:relative;
border-radius: 99px;
overflow: hidden;
}
.contents_btn01 a:before,
main form .submit span:before{
display: block;
content: "";
width: 100%;
height: 100%;
background: var(--i_btn_hover_color);
border-radius: 99px;
position: absolute;
top: 0;
left: 0;
z-index: -1;
transition: transform ease .4s;
transform: scaleX(0);
-webkit-transform: scaleX(0);
transform-origin: 100% 50%;
-webkit-transform-origin: 100% 50%;
}
.contents_btn01 a:after,
main form .submit span:after{
display: block;
content: "";
width: 100%;
height: 100%;
background: var(--i_btn_color);
border-radius: 99px;
position: absolute;
top: 0;
left: 0;
z-index: -2;
}
.contents_btn01 a:hover,
.glossary_archive .content_wrapper .heading.block_header_2 a:hover:after,
main form .submit:hover{
color: var(--i_btn_hover_txt_color)!important;
}
.contents_btn01 a:hover:before,
main form .submit span:hover:before{
-webkit-transform: scaleX(1);
transform: scaleX(1);
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
}
.contents_btn01 a[target=_blank] span:before,
.contents_btn01 a[target=_blank] span:after{
border: 1px solid var(--i_btn_txt_color);
transition: ease .4s;
}
.contents_btn01 a[target=_blank] span:hover:before,
.contents_btn01 a[target=_blank] span:hover:after{
border: 1px solid var(--i_btn_hover_txt_color);
}
.contents_btn01 a span{
text-align: center;
line-height: 1.5;
font-size: 1.5rem;
font-weight: 700;
}
main .widget_gallery01 .contents_btn01 a,
main .gallery_archive .inner_item .contents_btn01 a,
main .gallery_single .inner_item .contents_btn01 a,
main * .contents_btn01 a {
overflow: visible;
margin-bottom: 10px;
}
main form .submit span input {
font-size: 1.5rem;
font-weight: 600;
color: var(--i_btn_txt_color);
display: block !important;
background: transparent;
font-family: inherit;
}
#fixbtn .inner > div {
padding: 8px 15px!important;
}
input[id="form_submit"], input[type="submit"]{
-webkit-appearance: none;
border-radius: 0;
}
@media screen and (max-width: 500px){
#fixbtn .inner > div {
padding: 8px 1px!important;
}
}
▼ヘッダーボタン
header .header_contents .header_col1 .btn>a,
header#pattern4 .wraper > .inner > .btn > a{
display: block;
text-align: center;
background: transparent;
color: var(--i_btn_txt_color);
font-weight: 600;
padding: 10px 15px;
transition: 0.4s ease-in-out;
position: relative;
overflow: hidden!important;
border-radius: 99px;
}
header .header_contents .header_col1 .btn > a span.inn{
transition: 0.4s ease-in-out;
}
header .header_contents .header_col1 .btn>a::before,
header#pattern4 .wraper > .inner > .btn > a::before{
display: block;
content: "";
width: 100%;
height: 100%;
background: var(--i_btn_hover_color);
border-radius: 99px;
position: absolute;
top: 0;
left: 0;
z-index: -1;
transition: transform ease .4s;
transform: scaleX(0);
-webkit-transform: scaleX(0);
transform-origin: 100% 50%;
-webkit-transform-origin: 100% 50%;
}
header .header_contents .header_col1 .btn>a::after,
header#pattern4 .wraper > .inner > .btn > a::after{
display: block;
content: "";
width: 100%;
height: 100%;
background: var(--i_btn_color);
border-radius: 99px;
position: absolute;
top: 0;
left: 0;
z-index: -2;
}
header .header_contents .header_col1 .btn>a:hover,
header#pattern4 .wraper > .inner > .btn > a:hover{
background: transparent;
color: var(--i_btn_hover_txt_color);
opacity: 1;
}
header .header_contents .header_col1 .btn > a:hover span.inn{
color: var(--i_btn_hover_txt_color);
}
header .header_contents .header_col1 .btn>a:hover::before,
header#pattern4 .wraper > .inner > .btn > a:hover::before{
-webkit-transform: scaleX(1);
transform: scaleX(1);
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
}
header .header_contents .header_col1 .btn > a[target="_blank"] span.inn,
header#pattern4 .wraper > .inner > .btn > a[target="_blank"] span.inn{
padding-right: 25px !important;
}
.contents_btn01 a{
overflow: visible !important;
}
.contents_btn01 a,
.glossary_archive .content_wrapper .heading.block_header_2 a:after{
color: var(--i_btn_color);
background: transparent;
position: relative;
display: inline-block;
text-align: center;
border-radius: 0;
font-family: inherit;
font-weight: 400;
letter-spacing: 0.2rem;
transition: 0.4s ease-in-out;
}
.glossary_archive .content_wrapper .heading.block_header_2 a:after{
border: 1px solid var(--i_btn_color);
}
main form .submit span input{
color: var(--i_btn_color);
background: transparent;
position: relative;
display: inline-block;
text-align: center;
border-radius: 0;
font-family: inherit;
font-weight: 400;
letter-spacing: 0.2rem;
transition: 0.4s ease-in-out;
}
main form .submit{
position: relative;
}
.contents_btn01 a:before,
main form .submit:before{
content: '';
position: absolute;
transition: all 0.3s;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 1px solid var(--i_btn_color);
pointer-events: none;
}
.contents_btn01 a:after,
main form .submit:after{
content: '';
position: absolute;
transition: all 0.3s;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
background: var(--i_btn_color);
transform: scale(1, 0.1);
z-index: -1;
pointer-events: none;
}
.glossary_archive .content_wrapper .heading.block_header_2 a:hover:after{
background: var(--i_btn_color);
}
.contents_btn01 a[target=_blank] span:before,
.contents_btn01 a[target=_blank] span:after{
border: 1px solid var(--i_btn_color);
}
.contents_btn01 a:hover[target=_blank] span:before,
.contents_btn01 a:hover[target=_blank] span:after{
border: 1px solid #fff;
}
.contents_btn01 a span{
text-align: center;
font-size: 1.5rem;
padding: 11px 20px 7px;
}
input[type="button"],input[type="text"],input[type="submit"],input[type="image"],textarea{
-webkit-appearance: none;
border-radius: 0;
}
.contents_faq01.accordion .mymore a{
padding: 0 0 3px;
}
.contents_faq01.accordion .mymore a:hover{
opacity: 0.8;
}
.widget_staff01 .hidetgl a{
padding: 5px 15px 1px;
}
div[style*="color: rgb(255, 255, 255);"] .contents_btn01 a:before{
border: 1px solid #fff;
}
*[style*="color: rgb(255, 255, 255);"] .contents_btn01 a[target=_blank] span:before,
*[style*="color: rgb(255, 255, 255);"] .contents_btn01 a[target=_blank] span:after,
*[style*="color: rgb(255, 255, 255);"] .contents_btn01 a:before,
*[style*="color: rgb(255, 255, 255);"].contents_btn01 a[target=_blank] span:before,
*[style*="color: rgb(255, 255, 255);"].contents_btn01 a[target=_blank] span:after,
*[style*="color: rgb(255, 255, 255);"].contents_btn01 a:before{
border: 1px solid #fff;
}
*[style*="color: rgb(255, 255, 255);"] .contents_btn01 a[target=_blank] span:before,
*[style*="color: rgb(255, 255, 255);"] .contents_btn01 a[target=_blank] span:after,
*[style*="color: rgb(255, 255, 255);"].contents_btn01 a[target=_blank] span:before,
*[style*="color: rgb(255, 255, 255);"].contents_btn01 a[target=_blank] span:after{
border: 1px solid #fff;
}
.contents_box01[class*="block_text"] .inner_item_txt .contents_btn01 {
padding-top: 20px;
padding-bottom: 10px;
}
.widget_shop01.add_design3 .info p + .contents_btn01 .content_wrapper,
.widget_shop01.add_design4 .info p + .contents_btn01 .content_wrappe{
padding-bottom: 2px!important;
}
@media screen and (min-width: 481px){
.contents_btn01 a:hover:before,
main form .submit:hover:before{
transform: scale(1, .1);
opacity: 0;
}
.contents_btn01 a:hover:after,
main form .submit:hover:after{
opacity: 1;
transform: scale(1, 1);
}
.contents_btn01 a:hover,
.glossary_archive .content_wrapper .heading.block_header_2 a:hover:after,
main form .submit span input:hover{
color: #fff !important;
}
}
@media screen and (max-width: 480px){
/* hoverが使えないタッチ端末を想定した装飾 */
.contents_btn01 a:active:before,
main form .submit:active:before{
transform: scale(1, .1);
opacity: 0;
}
.contents_btn01 a:active:after,
main form .submit:active:after{
opacity: 1;
transform: scale(1, 1);
}
.contents_btn01 a:active,
.glossary_archive .content_wrapper .heading.block_header_2 a:active:after,
main form .submit span input:active{
color: #fff !important;
}
.contents_btn01 a:active[target=_blank] span:before,
.contents_btn01 a:active[target=_blank] span:after{
border: 1px solid #fff;
}
}
.contents_btn01 a,
.glossary_archive .content_wrapper .heading.block_header_2 a:after,
.widget_form form .submit span{
color: var(--i_btn_txt_color) !important;
background:var(--i_btn_color);
position: relative;
display: inline-block;
padding-left: 10px;
padding-right: 10px;
text-align: center;
border-radius: 0px;
font-family: inherit;
font-weight: 700;
transform: skewX(-15deg);
-moz-transform: skewX(-15deg);
-webkit-transform: skewX(-15deg);
}
.glossary_archive .content_wrapper .heading.block_header_2 a:after{
transform: skewX(0deg);
-moz-transform: skewX(0deg);
-webkit-transform: skewX(0deg);
}
.contents_btn01 a span,
.widget_form form .submit input{
transform: skewX(15deg);
-moz-transform: skewX(15deg);
-webkit-transform: skewX(15deg);
color: var(i_btn_txt_color);
background: transparent;
transition: all 0.3s ease;
}
.contents_btn01 a:before,
main form .submit span:before{
position: absolute;
content: " ";
width: 7px;
height: 7px;
top: calc(50% - 4px);
left: 5px;
border-top: 1px solid var(--i_btn_txt_color);
border-right: 1px solid var(--i_btn_txt_color);
transform: rotate(45deg);
transition: all 0.3s ease;
z-index: 10;
}
.contents_btn01 a:hover,
.glossary_archive .content_wrapper .heading.block_header_2 a:hover:after,
main form .submit span:hover{
background: var(--i_btn_hover_color);
color: var(--i_btn_hover_txt_color)!important;
}
.contents_btn01 a:hover span,
main form .submit span:hover input{
color: var(--i_btn_hover_txt_color)!important;
}
.contents_btn01 a:hover:before,
main form .submit span:hover:before{
left: 10px;
border-color: var(--i_btn_hover_txt_color);
}
.contents_btn01 a[target=_blank] span:before,
.contents_btn01 a[target=_blank] span:after{
border: 1px solid var(--i_btn_txt_color);
transition: .2s ease-in-out;
}
.contents_btn01 a[target=_blank]:hover span:before,
.contents_btn01 a[target=_blank]:hover span:after{
border: 1px solid var(--i_btn_hover_txt_color)!important;
}
.contents_btn01 a span{
text-align: center;
line-height: 1.5;
font-size: 1.5rem;
padding: 10px 15px 12px;
}
input[id="form_submit"],
input[type="submit"],
textarea{
-webkit-appearance: none;
border-radius: 0;
}
.contents_faq01.accordion .mymore a{
padding: 0 0 3px;
}
.contents_box01[class*="block_image_text_"] .inner_item_txt .contents_btn01 .content_wrapper{
padding-left: 10px;
}
▼ヘッダーボタン
header .header_contents .header_col1 .btn>a,
header#pattern4 .wraper > .inner > .btn > a{
display: block;
text-align: center;
background:var(--i_btn_color);
color: var(--i_btn_txt_color);
font-weight: 600;
padding: 10px 15px;
transition: 0.4s ease-in-out;
position: relative;
transform: skewX(-15deg);
-moz-transform: skewX(-15deg);
-webkit-transform: skewX(-15deg);
}
header .header_contents .header_col1 .btn > a span.inn{
transition: 0.4s ease-in-out;
transform: skewX(15deg);
-moz-transform: skewX(15deg);
-webkit-transform: skewX(15deg);
}
header .header_contents .header_col1 .btn>a:hover,
header#pattern4 .wraper > .inner > .btn > a:hover{
background: var(--i_btn_hover_color);
color: var(--i_btn_hover_txt_color);
opacity: 1;
}
header .header_contents .header_col1 .btn > a:hover span.inn{
color: var(--i_btn_hover_txt_color);
}
header .header_contents .header_col1 .btn > a[target="_blank"] span.inn,
header#pattern4 .wraper > .inner > .btn > a[target="_blank"] span.inn{
padding-right: 25px !important;
}
main .contents_btn01 .content_wrapper{
min-height: 52px;
}
.contents_btn01 a,
.glossary_archive .content_wrapper .heading.block_header_2 a:after{
color: var(--i_btn_txt_color)!important;
background: var(--i_btn_color);
position: relative;
display: inline-block;
border-radius: 0px;
margin-top: 10px;
font-family: inherit;
font-weight: 700;
}
.contents_btn01 a:before,
main form .submit span input:before{
position: absolute;
top: -5px;
left: -5px;
z-index: 1;
content: " ";
width: calc(100% - 4px);
height: calc(100% - 4px);
border: 2px solid var(--i_txt_color);
background:transparent;
transition: all .1s ease;
border-radius: 0px;
pointer-events: none;
}
.contents_btn01 a:hover:before,
main form .submit span input:hover:before{
top: 0;
left: 0;
}
main form .submit span input{
background: var(--i_btn_color);
color: var(--i_btn_txt_color);
position: relative;
display: inline-block;
font-family: inherit;
font-weight: 700;
padding-left: 10px;
padding-right: 10px;
border-radius: 0px;
box-shadow: 0px 3px 0px rgba(0,0,0,0.15);
}
.contents_btn01 a:hover,
.glossary_archive .content_wrapper .heading.block_header_2 a:hover:after,
main form .submit span input:hover{
background: var(--i_btn_hover_color);
color: var(--i_btn_hover_txt_color)!important;
}
.contents_btn01 a[target=_blank] span:before,
.contents_btn01 a[target=_blank] span:after{
border: 1px solid var(--i_btn_txt_color);
}
.contents_btn01 a[target=_blank] span:before{
right: 10px;
}
.contents_btn01 a[target=_blank] span:after{
right: 12px;
}
.contents_btn01 a span{
text-align: center;
line-height: 1.5;
font-size: 1.5rem;
padding: 10px 15px 12px;
}
input[id="form_submit"],input[type="submit"],textarea{
-webkit-appearance: none;
border-radius: 0;
}
.contents_faq01.accordion .mymore a{
padding: 0 0 3px;
}
.contents_box01[class*="block_image_text_"] .inner_item_txt .contents_btn01 .content_wrapper{
padding-left: 5px;
}
.widget_gallery01 .contents_btn01 a{
overflow: visible;
}
@media screen and (max-width: 700px){
#fixbtn .contents_btn01 a::before{
display: none;
}
.contents_btn01 a {
margin-top: 0px;
}
}
▼ヘッダーボタン
header .header_contents .header_col1 .btn>a,
header#pattern4 .wraper > .inner > .btn > a{
display: block;
text-align: center;
background:var(--i_btn_color);
color: var(--i_btn_txt_color);
font-weight: 600;
margin-top: 10px;
padding: 10px 15px;
transition: 0.4s ease-in-out;
position: relative;
}
header .header_contents .header_col1 .btn>a:before,
header#pattern4 .wraper > .inner > .btn > a:before{
position: absolute;
top: -5px;
left: -5px;
z-index: 1;
content: " ";
width: calc(100% - 4px);
height: calc(100% - 4px);
border: 2px solid var(--i_txt_color);
background:transparent;
transition: all .1s ease;
border-radius: 0px;
pointer-events: none;
}
header .header_contents .header_col1 .btn>a:hover,
header#pattern4 .wraper > .inner > .btn > a:hover{
background: var(--i_btn_hover_color);
color: var(--i_btn_hover_txt_color);
opacity: 1;
}
header .header_contents .header_col1 .btn > a:hover span.inn{
color: var(--i_btn_hover_txt_color);
}
header .header_contents .header_col1 .btn>a:hover:before,
header#pattern4 .wraper > .inner > .btn > a:hover:before{
top: 0;
left: 0;
}
header .header_contents .header_col1 .btn > a[target="_blank"] span.inn,
header#pattern4 .wraper > .inner > .btn > a[target="_blank"] span.inn{
padding-right: 25px !important;
}
.contents_btn01 a,
#fixbtn .contents_btn01 a,
.glossary_archive .content_wrapper .heading.block_header_2 a:after{
border: 1px solid var(--i_txt_color);
color: var(--i_txt_color);
background: transparent;
position: relative;
display: inline-block;
cursor: pointer;
border-radius: 0;
font-family: inherit;
transition: 0.4s ease-in-out;
overflow: hidden;
}
#fixbtn .contents_btn01 a{
color: var(--i_txt_color);
border: 1px solid var(--i_txt_color);
}
main form .submit span input{
border: 1px solid var(--i_txt_color);
color: var(--i_txt_color);
background: none;
position: relative;
display: inline-block;
cursor: pointer;
border-radius: 0;
font-family: inherit;
transition: 0.4s ease-in-out;
position: relative !important;
z-index: 2;
}
main form .submit{
position: relative;
overflow: hidden;
}
#fixbtn .contents_btn01 a:before,
.contents_btn01 a:before,
main form .submit:before{
content: "";
position: absolute;
bottom: -50%;
left: 0;
width: 101%;
height: 100%;
background-color: var(--i_btn_hover_color);
transform-origin: bottom center;
transition: transform 600ms cubic-bezier(0.48, 0, 0.12, 1);
transform: skewY(5deg) scaleY(0);
z-index: 1;
}
#fixbtn .contents_btn01 a:hover:before,
.contents_btn01 a:hover:before,
main form .submit:hover:before{
transform-origin: bottom center;
transform: skewY(5deg) scaleY(2);
}
#fixbtn .contents_btn01 a:hover,
.contents_btn01 a:hover,
main form .submit:hover span input{
color: var(--i_btn_hover_txt_color);
border: 1px solid var(--i_btn_color);
z-index: 2;
position: relative;
}
.contents_btn01 a[target=_blank] span:before,
.contents_btn01 a[target=_blank] span:after{
border: 1px solid var(--i_btn_txt_color);
transition: 0.4s ease-in-out;
}
#fixbtn .contents_btn01 a[target=_blank] span:before,
#fixbtn .contents_btn01 a[target=_blank] span:after{
border: 1px solid var(--i_txt_color);
}
.contents_btn01 a:hover[target=_blank] span:before,
.contents_btn01 a:hover[target=_blank] span:after{
border: 1px solid var(--i_btn_hover_color);
}
.contents_btn01 a[target="_blank"] span::before{
right: 10px;
}
.contents_btn01 a[target="_blank"] span{
padding-right: 30px !important
}
.contents_btn01 a span:not(.admin_edit_link){
text-align: center;
line-height: 1.5;
font-size: 1.4rem;
padding: 11px 30px 13px;
z-index: 1;
position: inherit;
}
input[type="button"],input[type="text"],input[type="submit"],input[type="image"],textarea{
-webkit-appearance: none;
border-radius: 0;
}
.contents_faq01.accordion .mymore a {
padding: 0 0 2px;
letter-spacing: 0.2rem;
font-size: 1.4rem;
}
.contents_faq01.accordion .mymore a:hover{
opacity: 0.8;
}
.contents_btn01 a,
main form .submit span input,
.glossary_archive .content_wrapper .heading.block_header_2 a:after {
background: var(--i_btn_color);
color: var(--i_btn_txt_color) !important;
padding: 5px 10px 6px !important;
position: relative;
display: inline-block;
overflow: hidden;
text-align: center;
font-family: inherit;
transition: 0.4s ease-in-out;
letter-spacing: 0.2rem;
font-weight: 600;
border-radius: 100px;
}
.glossary_archive .content_wrapper .heading.block_header_2 a:hover:after {
opacity: 0.8;
}
main form .submit {
overflow: hidden;
background: var(--i_btn_color);
border-radius: 100px !important;
}
main form .submit span {
position: relative;
padding: 8px 5px 10px;
}
.contents_btn01 a span,
main form .submit span input,
main form .submit span {
transition: 0.4s ease-in-out;
}
.contents_btn01 a:hover span,
main form .submit span input:hover {
transform: translateX(-10px);
}
.contents_btn01 a:hover,
main form .submit span:hover,
main form .submit span input:hover {
background: var(--i_btn_hover_color);
}
.contents_btn01 a:before,
main form .submit span:before {
position: absolute;
display: inline-block;
content: "\00BB";
font-size: 20px;
top: calc(50% - 20px);
right: -20px;
color: var(--i_btn_txt_color);
opacity: 0;
transition: 0.4s;
z-index: 1;
}
.contents_btn01 a:hover:before,
main form .submit span:hover:before {
opacity: 1;
right: 10px;
}
.contents_btn01 a[target=_blank] span:before,
.contents_btn01 a[target=_blank] span:after {
border: 1px solid var(--i_btn_txt_color);
transition: 0.4s ease-in-out;
}
.contents_btn01 a[target=_blank]:hover span:before,
.contents_btn01 a[target=_blank]:hover span:after {
border: 1px solid var(--i_btn_hover_txt_color);
}
main form .submit span input,
.contents_btn01 a span {
text-align: center;
line-height: 1.5;
font-size: 1.5rem;
padding: 10px 25px 9px;
transform: translateX(0);
}
input[type="button"],
input[type="text"],
input[type="submit"],
input[type="image"],
textarea {
-webkit-appearance: none;
border-radius: 0;
}
.contents_btn01 a,
main form .submit span input{
background: var(--i_btn_color);
color: var(--i_btn_txt_color);
position: relative;
display: inline-block;
transition: 0.5s ease-in-out;
min-width: 220px;
margin-bottom: 0 !important;
transition: all 0s cubic-bezier(.19,1,.22,1);
transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
transition-timing-function: cubic-bezier(.19,1,.22,1);
}
.contents_btn01 a::before,
main form .submit span input::before{
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: var(--i_btn_hover_color);
opacity: 0;
transition: all 1s cubic-bezier(.19,1,.22,1);
transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
transition-timing-function: cubic-bezier(.19,1,.22,1);
transform: scale(.8);
}
.contents_btn01 a:hover::before,
main form .submit span input:hover::before{
opacity: 1;
transform: scale(1);
}
main form .submit span input a{
transition: 0.5s ease-in-out;
}
main form .submit span input{
letter-spacing: 0.2rem;
}
.contents_btn01 a:hover,
main form .submit span input:hover{
background: var(--i_btn_color);
color: var(--i_btn_hover_txt_color);
}
.contents_btn01 a[target=_blank] span:before,
.contents_btn01 a[target=_blank] span:after{
border: 1px solid var(--i_btn_txt_color);
transition: .3s ease-in-out;
}
.contents_btn01 a[target=_blank]:hover span:before,
.contents_btn01 a[target=_blank]:hover span:after{
border: 1px solid var(--i_btn_hover_txt_color);
}
.contents_btn01 a[target="_blank"] span::before {
right: 11px;
}
.contents_btn01 a[target="_blank"] span::after {
right: 13px;
}
.contents_btn01 a span{
text-align: center;
line-height: 1.5;
font-size: 1.5rem;
letter-spacing: 0.2rem;
padding: 12px 25px;
position: relative;
z-index: 2;
}
.contents_btn01 a[target="_blank"] span {
padding-right: 25px !important;
}
@media screen and (max-width: 900px){
.contents_btn01 a{
margin-bottom: 8px !important;
}
}
/*管理画面のボタン調整*/
span.admin_edit_link{
z-index: 6 !important;
}
▼ヘッダーボタン
header .header_contents .header_col1 .btn>a,
header#pattern4 .wraper > .inner > .btn > a{
display: block;
text-align: center;
background:var(--i_btn_color);
color: var(--i_btn_txt_color);
font-weight: 600;
margin-top: 10px;
padding: 10px 15px;
position: relative;
transition: all 0s cubic-bezier(.19,1,.22,1);
transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
transition-timing-function: cubic-bezier(.19,1,.22,1);
}
header .header_contents .header_col1 .btn>a:before,
header#pattern4 .wraper > .inner > .btn > a:before{
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: var(--i_btn_hover_color);
opacity: 0;
transition: all 1s cubic-bezier(.19,1,.22,1);
transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
transition-timing-function: cubic-bezier(.19,1,.22,1);
transform: scale(.8);
}
header .header_contents .header_col1 .btn>a:hover,
header#pattern4 .wraper > .inner > .btn > a:hover{
background: var(--i_btn_color);
color: var(--i_btn_hover_txt_color);
}
header .header_contents .header_col1 .btn > a span.inn{
transition: all 1s cubic-bezier(.19,1,.22,1);
position: relative;
}
header .header_contents .header_col1 .btn > a:hover span.inn{
color: var(--i_btn_hover_txt_color);
}
header .header_contents .header_col1 .btn>a:hover:before,
header#pattern4 .wraper > .inner > .btn > a:hover:before{
opacity: 1;
transform: scale(1);
}
header .header_contents .header_col1 .btn > a[target="_blank"] span.inn,
header#pattern4 .wraper > .inner > .btn > a[target="_blank"] span.inn{
padding-right: 25px !important;
}