@charset "UTF-8";
/*
# =================================================================
# 汎用パーツのデザイン
# =================================================================
*/
.pr_img000{width: 300px;height: 300px;
border-radius: 50%;
object-fit:cover;
border:8px solid #f5f5f5;
}
/*背景デザイン*/
.hidden{overflow:hidden!important;}
.relative{position:relative!important;}
.bg01{
background-color: #ddd;
background-image: repeating-linear-gradient(45deg,
#f3f3f3, #f3f3f3 3px,
transparent 0, transparent 6px);
}
.bg02{
background-color: #05a5ab;
background-image: repeating-linear-gradient(45deg,
#33bec4, #33bec4 3px,
transparent 0, transparent 6px);
}
.box_design01{
background-color: rgba(0,0,0,0.8);
padding:1.5rem 1rem 0.6rem;
margin-top:4vw;
overflow:hidden;
}
.hr_design01{
background:#bd202c;
height:60px;
border:none;
width:1px;
margin:2rem auto;
}
/*ボタン*/
.btn {
display: inline-block;
text-align: center;
text-decoration: none;
outline: none;
padding:5px 25px;
}
.btn::before,
.btn::after {
position: absolute;
z-index: -1;
display: block;
content: '';
}
.btn,
.btn::before,
.btn::after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all .3s;
transition: all .3s;
}
.btn01 {
background-color: #CFAC1F;
border: 2px solid #CFAC1F;
color: #333;
border-radius:8px;
padding:15px 1.5rem;
font-size:1.2rem;
font-family: YuGothic,'Yu Gothic',sans-serif;
font-weight:bold;
}
.btn01:hover {
background-color: #fff;
border-color: #59b1eb;
color: #59b1eb;
}
.btn02 {
position: relative;
z-index: 2;
background-color: #000;
border: 2px solid #000;
color: #fff;
padding:10px 20px;
border-radius:8px;
}
.btn02:hover {
background-color: #fff;
border-color: #59b1eb;
color: #59b1eb;
}
.btn02::before,
.btn02::after {
top: 0;
width: 50%;
height: 100%;
background-color: #333;
}
.btn02::before {
right: 0;
}
.btn02::after {
left: 0;
}
.btn02:hover::before,
.btn02:hover::after {
width: 0;
background-color: #59b1eb;
}
.btn03 {
background-color: #333;
border: 2px solid #333;
color: #fff;
padding:5px 30px;
}
.btn03:hover {
background-color: #fff;
border-color: #59b1eb;
color: #59b1eb;
}
.btn04 {
background-color: #00B900;
border: 2px solid #00B900;
color: #fff;
border-radius:8px;
padding:10px;
font-size:1rem;
font-family: YuGothic,'Yu Gothic',sans-serif;
font-weight:bold;
width:100%;
}
.btn04:hover {
background-color: #fff;
border-color: #59b1eb;
color: #59b1eb;
}
.btn05 {
background-color: #bd202c;
border: 2px solid #bd202c;
color: #fff;
border-radius:8px;
padding:10px;
font-size:1rem;
font-family: YuGothic,'Yu Gothic',sans-serif;
font-weight:bold;
width:100%;
}
.btn05:hover {
background-color: #fff;
border-color: #59b1eb;
color: #59b1eb;
}
.box_flex01{
display:flex;
-webkit-flex-wrap: wrap; /* Safari etc. */
-ms-flex-wrap : wrap; /* IE10 */
flex-wrap : wrap;
justify-content:center;
}
.box_flex02{
display:flex;
-webkit-flex-wrap: wrap; /* Safari etc. */
-ms-flex-wrap : wrap; /* IE10 */
flex-wrap : wrap;
justify-content: space-between;
}
.box_flex03{
display:flex;
-webkit-flex-wrap: wrap; /* Safari etc. */
-ms-flex-wrap : wrap; /* IE10 */
flex-wrap : wrap;
justify-content:space-around;
}
.box_flex04{
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.row-reverse{ flex-flow: row-reverse;}
/*必須項目・警告・エラーの文字色*/
.required{
display: inline-block;
padding: 5px 10px;
margin-left:5px;
border:1px solid #eb3b54;
color: #eb3b54;
font-size: 10px;
font-weight:bold;
line-height: 1.0;
}
.bdr,.bdr_gray{ border: 1px solid #ccc; }/*灰*/
.bdr_red{ border: 1px solid #e00000; }/*赤*/
.bdr_blue{ border: 1px solid #0329ce; }/*青*/
.bdr_green{ border: 1px solid #01995e; }/*緑*/
.bdr_yellow{ border: 1px solid #ffe400; }/*黄*/
.bdr_navy{ border: 1px solid #133d94; }/*紺*/
.bdr_orange{ border: 1px solid #eca100; }/*橙*/
.bdr_pink{ border: 1px solid #eb67b5; }/*ピンク*/
.bdr_lime{ border: 1px solid #2abe0d; }/*黄緑*/
.bdr_aqua{ border: 1px solid #0baedd; }/*水色*/
.bdr_black{ border: 1px solid #000; }/*黒*/
/*角丸*/
.bdr_r4{ border-radius: 4px; }
.bdr_r8{ border-radius: 8px; }
.bdr_12{ border-radius: 12px; }
/*文字の横位置*/
.al_l{ text-align: left!important; }
.al_r{ text-align: right!important; }
.al_c{ text-align: center!important; }
.al_f{ display: flex;justify-content: center;align-items: center;text-align:left;}
.al_j{ text-align: justify!important;;}
.al_o{ text-align: left!important;display:inline-block!important;}
.al_t{ margin: auto!important;display:table!important;}
/*使い方：ここに左寄せ中央配置したいテキスト
*/
/*使い方：ここに左寄せ中央配置したいテキスト
ここに左寄せ中央配置したいテキスト