@charset "utf-8";
/* CSS Document */

/* ==========================================
 single customBlock
========================================== */
/* -- Twitter -- */
.customBlock.block_twitter{
width: 400px;
margin-left: auto;
margin-right: auto;
}
.customBlock.block_twitter .twitter-tweet{
margin: 0 auto!important;
}
@media (max-width: 768px){
.customBlock.block_twitter{
width: 100%;
}
}

/* -- Instagram -- */
.customBlock.block_instagram{
width: 400px;
margin-left: auto;
margin-right: auto;
}
.customBlock.block_instagram iframe{
max-width: 100%!important;
width: 100%!important;
min-width: 100%!important;
margin: 0 auto!important;
}
@media (max-width: 768px){
.customBlock.block_instagram{
width: 100%;
}
}

/* -- Google Map -- */
.customBlock.block_googlemap{
width: 100%;
margin-left: auto;
margin-right: auto;
}
.customBlock.block_googlemap iframe{
width: 100%!important;
height: 400px!important;
}
@media (max-width: 768px){
.customBlock.block_googlemap iframe{
height: 22.0rem!important;
}
}

/* -- block_relation -- */
.customBlock.block_relation .title b{
background: #17b3ff;
color: #fff;
font-size: 1.6rem;
font-weight: bold;
letter-spacing: 2px;
border-radius: 10px 10px 0 0;
padding: 6px 26px 3px 40px;
display: inline-block;
}
.customBlock.block_relation .title b span{
vertical-align: -1px;
margin: 0 0 0 5px;
display: inline-block;
}
.customBlock.block_relation .blockInner{
background: #edf9ff;
border: 1px solid #17b3ff;
border-radius: 0 20px 20px 20px;
margin: -1px 0 0;
padding: 10px;
}
.customBlock.block_relation .title{
margin: 0;
}
.customBlock.block_relation .blockInner .block + .block{
margin-top: 10px;
}
.customBlock.block_relation .blockInner .block a{
background: #fff;
border-radius: 10px;
border: 1px solid #e9e9e9;
padding: 10px 40px 10px 10px;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
transition: 0.3s;
}
.customBlock.block_relation .blockInner .block a::before{
content: "";
width: 30px;
height: 100%;
background: #17b3ff;
position: absolute;
right: 0;
top: 0;
}
.customBlock.block_relation .blockInner .block a::after{
content: "";
width: 10px;
height: 40px;
background: #fff;
-webkit-clip-path: polygon(0 0, 0% 100%, 100% 50%);
clip-path: polygon(0 0, 0% 100%, 100% 50%);
position: absolute;
right: 8px;
top: 50%;
margin-top: -20px;
}
.customBlock.block_relation .blockInner .block a .image{
width: 140px;
height: 140px;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.customBlock.block_relation .blockInner .block a .image img{
width: auto;
height: 100%;
}
.customBlock.block_relation .blockInner .block a .textBlock{
width: 486px;
padding: 0 0 0 20px;
}
.customBlock.block_relation .blockInner .block a .textBlock .ttl{
font-size: 1.8rem;
font-weight: bold;
line-height: 1.4;
margin: 0 0 5px;
}
.customBlock.block_relation .blockInner .block a .textBlock .txt{
font-size: 1.4rem;
line-height: 1.4;
margin: 0 0 5px;
}
.customBlock.block_relation .blockInner .block a .textBlock .date{
color: #808080;
font-size: 1.2rem;
margin: 0;
}
.customBlock.block_relation .blockInner .block a .textBlock .date span{
font-size: 1.2rem;
display: inline-block;
vertical-align: -1px;
margin: 0 5px 0 0;
}
@media (min-width: 769px){
.customBlock.block_relation .blockInner .block a:hover{
opacity: 0.7;
}
}
@media (max-width: 768px){
.customBlock.block_relation .title b{
border-radius: 1.0rem 1.0rem 0 0;
padding: 0.6rem 1.6rem 0.4rem 3.0rem;
}
.customBlock.block_relation .title b span{
vertical-align: -0.1rem;
margin: 0 0 0 0.5rem;
}
.customBlock.block_relation .blockInner{
border-radius: 0 1.0rem 1.0rem 1.0rem;
padding: 1.0rem;
}
.customBlock.block_relation .blockInner .block + .block{
margin-top: 1.0rem;
}
.customBlock.block_relation .blockInner .block a{
border-radius: 1.0rem;
padding: 1.0rem;
display: block;
}
.customBlock.block_relation .blockInner .block a::before{
display: none;
}
.customBlock.block_relation .blockInner .block a::after{
display: none;
}
.customBlock.block_relation .blockInner .block a .image{
width: 100%;
height: 12.0rem;
border-radius: 1.0rem;
margin: 0 0 1.0rem;
}
.customBlock.block_relation .blockInner .block a .image img{
width: 100%;
height: auto;
}
.customBlock.block_relation .blockInner .block a .textBlock{
width: 100%;
padding: 0 0.5rem;
}
.customBlock.block_relation .blockInner .block a .textBlock .ttl{
font-size: 1.4rem;
margin: 0 0 0.5rem;
}
.customBlock.block_relation .blockInner .block a .textBlock .txt{
font-size: 1.2rem;
margin: 0 0 0.5rem;
}
.customBlock.block_relation .blockInner .block a .textBlock .date{
font-size: 1.0rem;
text-align: right;
}
.customBlock.block_relation .blockInner .block a .textBlock .date span{
font-size: 1.0rem;
vertical-align: -0.1rem;
margin: 0 0.5rem 0 0;
}
}

/* -- btnA01 -- */
.customBlock .block_btnA01{
text-align: center;
}
.customBlock .block_btnA01 span{
margin: 0 0 12px;
display: block;
}
.customBlock .block_btnA01 span b{
max-width: 100%;
background: #ffa7a7;
color: #fff;
font-size: 1.4rem;
border-radius: 20px;
padding: 5px 20px;
display: inline-block;
position: relative;
}
.customBlock .block_btnA01 span b::before{
content: "";
width: 20px;
height: 8px;
background: #ffa7a7;
-webkit-clip-path: polygon(50% 100%, 0 0, 100% 0);
clip-path: polygon(50% 100%, 0 0, 100% 0);
position: absolute;
left: 50%;
bottom: -7px;
margin-left: -10px;
}
.customBlock .block_btnA01 a{
min-width: 400px;
max-width: 100%;
color: #fff;
font-size: 2.0rem;
font-weight: bold;
text-decoration: none;
line-height: 1.4;
border-radius: 20px;
padding: 20px 50px!important;
display: inline-block;
position: relative;
transition: 0.3s;
}
.customBlock .block_btnA01.orange a{
background: #ff9600;
border-bottom: 6px solid #c57400;
}
.customBlock .block_btnA01.blue a{
background: #17b3ff;
border-bottom: 6px solid #0081bf;
}
.customBlock .block_btnA01.green a{
background: #2fd955;
border-bottom: 6px solid #129f31;
}
.customBlock .block_btnA01.red a{
background: #ff474e;
border-bottom: 6px solid #c9282e;
}
.customBlock .block_btnA01 a::after{
display: none;
}
.customBlock .block_btnA01 a::before{
content: "";
width: 10px;
height: 16px;
background: #fff;
-webkit-clip-path: polygon(100% 50%, 0 0, 0 100%);
clip-path: polygon(100% 50%, 0 0, 0 100%);
position: absolute;
right: 20px;
top: 50%;
margin-top: -7px;
}
@media (min-width: 769px){
.customBlock .block_btnA01 a:hover{
opacity: 0.7;
}
}
@media (max-width: 768px){
.customBlock .block_btnA01 span{
margin: 0 0 1.0rem;
}
.customBlock .block_btnA01 span b{
font-size: 1.2rem;
border-radius: 2.0rem;
padding: 0.5rem 2.0rem;
}
.customBlock .block_btnA01 span b::before{
width: 2rem;
height: 0.8rem;
bottom: -0.7rem;
margin-left: -1rem;
}
.customBlock .block_btnA01 a{
min-width: 100%;
font-size: 1.8rem;
border-radius: 1.0rem;
padding: 1.5rem 2.5rem!important;
}
.customBlock .block_btnA01 a::before{
width: 0.8rem;
height: 1.4rem;
right: 1rem;
margin-top: -0.7rem;
}
}

/* -- btnB01 -- */
.customBlock.block_btnB01{
display: flex;
align-items: flex-end;
}
.customBlock.block_btnB01 [class^="btn_"]{
width: 340px;
text-align: center;
}
.customBlock.block_btnB01 [class^="btn_"] + [class^="btn_"]{
margin: 0 0 0 20px;
}
.customBlock.block_btnB01 [class^="btn_"] span{
margin: 0 0 12px;
display: block;
}
.customBlock.block_btnB01 [class^="btn_"] span b{
max-width: 100%;
background: #ffa7a7;
color: #fff;
font-size: 1.4rem;
border-radius: 20px;
padding: 5px 20px;
display: inline-block;
position: relative;
}
.customBlock.block_btnB01 [class^="btn_"] span b::before{
content: "";
width: 20px;
height: 8px;
background: #ffa7a7;
-webkit-clip-path: polygon(50% 100%, 0 0, 100% 0);
clip-path: polygon(50% 100%, 0 0, 100% 0);
position: absolute;
left: 50%;
bottom: -7px;
margin-left: -10px;
}
.customBlock.block_btnB01 [class^="btn_"] a{
width: 100%;
color: #fff;
font-size: 2.0rem;
font-weight: bold;
text-decoration: none;
line-height: 1.4;
border-radius: 20px;
padding: 20px 50px!important;
display: block;
position: relative;
transition: 0.3s;
}
.customBlock.block_btnB01 [class^="btn_"].orange a{
background: #ff9600;
border-bottom: 6px solid #c57400;
}
.customBlock.block_btnB01 [class^="btn_"].blue a{
background: #17b3ff;
border-bottom: 6px solid #0081bf;
}
.customBlock.block_btnB01 [class^="btn_"].green a{
background: #2fd955;
border-bottom: 6px solid #129f31;
}
.customBlock.block_btnB01 [class^="btn_"].red a{
background: #ff474e;
border-bottom: 6px solid #c9282e;
}
.customBlock.block_btnB01 [class^="btn_"] a::after{
display: none;
}
.customBlock.block_btnB01 [class^="btn_"] a::before{
content: "";
width: 10px;
height: 16px;
background: #fff;
-webkit-clip-path: polygon(100% 50%, 0 0, 0 100%);
clip-path: polygon(100% 50%, 0 0, 0 100%);
position: absolute;
right: 20px;
top: 50%;
margin-top: -7px;
}
@media (min-width: 769px){
.customBlock.block_btnB01 [class^="btn_"] a:hover{
opacity: 0.7;
}
}
@media (max-width: 768px){
.customBlock.block_btnB01 [class^="btn_"] span{
margin: 0 0 1.0rem;
}
.customBlock.block_btnB01 [class^="btn_"] span b{
font-size: 1.2rem;
border-radius: 2.0rem;
padding: 0.5rem 2.0rem;
}
.customBlock.block_btnB01 [class^="btn_"] span b::before{
width: 2rem;
height: 0.8rem;
bottom: -0.7rem;
margin-left: -1rem;
}
.customBlock.block_btnB01 [class^="btn_"] a{
min-width: 100%;
font-size: 1.8rem;
border-radius: 1.0rem;
padding: 1.5rem 2.5rem 1.5rem 2.0rem!important;
}
.customBlock.block_btnB01 [class^="btn_"] a::before{
width: 0.8rem;
height: 1.4rem;
right: 1rem;
margin-top: -0.7rem;
}
.customBlock.block_btnB01.type01 [class^="btn_"]{
width: 49%;
}
.customBlock.block_btnB01.type01 [class^="btn_"] + [class^="btn_"]{
margin: 0 0 0 2%;
}
.customBlock.block_btnB01.type01 [class^="btn_"] span b{
width: 100%;
display: block;
}
.customBlock.block_btnB01.type01 [class^="btn_"] span b{
padding: 0.5rem 1.0rem;
}
.customBlock.block_btnB01.type01 [class^="btn_"] a{
font-size: 1.4rem;
padding: 1.0rem 2.5rem 1.0rem 2.0rem!important;
}
.customBlock.block_btnB01.type02{
display: block;
}
.customBlock.block_btnB01.type02 [class^="btn_"]{
width: 100%;
}
.customBlock.block_btnB01.type02 [class^="btn_"]{
margin: 2.0rem 0 0;
}
}