@charset "UTF-8";
/*
# =================================================================
# 汎用パーツのデザイン
# =================================================================
*/
.br_mob{display:none!important;}
.box_scroll{
display: flex;
align-items: center;
justify-content: start;
gap: 2rem;
position:relative;
width:100%;
padding:0;
-webkit-overflow-scrolling:touch;
overflow-scrolling:touch;
overflow-x: scroll;
white-space: nowrap;
box-sizing:border-box;
overflow-y:hidden;
}
.items_c{align-items: center;}
.items_b{align-items: end;}
.gap05{gap:5px;}
.gap10{gap:10px;}
.gap15{gap:15px;}
.gap20{gap:20px;}
.gap25{gap:25px;}
/*********************
* 会話ふきだし
[say name="サルワカくん" img="画像URL"]ここに文章[/say]
[say name="サルワカくん" img="画像URL" from="right"]ここに文章2[/say]
*********************/
.say {
display: table;
overflow: hidden;
width: 100%;
margin: 1.5em 0
}
.faceicon {
display: table-cell;
width: 100px;
padding-right: 20px;
text-align: center;
vertical-align: top
}
.faceicon img {
width: 100%;
height: auto;
border: solid 3px #eaedf2;
border-radius: 50%
}
.faceicon span {
font-size: 11px;
font-weight: 700;
margin-top: 8px;
line-height: 1.4;
display: block
}
.chatting {
display: table-cell;
position: relative;
width: calc(100% - 100px);
font-size: .95em;
vertical-align: top
}
.sc {
display: inline-block;
text-align: left;
padding: 13px;
border: solid 2px #d5d5d5;
border-radius: 12px;
background: #fff;
word-break: break-word
}
.sc:before {
display: inline-block;
position: absolute;
top: 18px;
left: -23px;
border: 12px solid transparent;
border-right: 12px solid #d5d5d5;
content: ""
}
.sc:after {
display: inline-block;
position: absolute;
top: 18px;
left: -20px;
border: 12px solid transparent;
border-right: 12px solid #fff;
content: ""
}
.sc p {
margin: 5px 0;
padding: 0
}
.right {
text-align: right
}
.right .faceicon {
padding: 0 0 0 20px
}
.right .sc:after,.right .sc:before {
right: -23px;
left: auto;
border: 12px solid transparent;
border-left: 12px solid #d5d5d5
}
.right .sc:after {
right: -20px;
border-left-color: #fff
}
@media only screen and (min-width: 768px){
.sc {
padding: 20px;
}
}
@media only screen and (min-width: 481px){
.sc:after, .sc:before {
top: 30px;
}
.sc:after, .sc:before {
top: 30px;
}
.chatting {
padding-top: 15px;
width: calc(100% - 130px);
}
}
/*ボタン*/
.btn {
display: inline-block;
text-align: center;
text-decoration: none;
line-height: 54px;
outline: none;
}
.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: #333;
border: 2px solid #333;
color: #fff;
line-height: 50px;
}
.btn01:hover {
background-color: #fff;
border-color: #59b1eb;
color: #59b1eb;
}
.btn02 {
position: relative;
z-index: 2;
background-color: #333;
border: 2px solid #333;
color: #fff;
line-height: 50px;
}
.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 {
position: relative;
z-index: 2;
background-color: #fff;
border: 2px solid #333;
color: #333;
line-height: 50px;
overflow: hidden;
}
.btn03:hover {
color: #fff;
}
.btn03::after {
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.btn03:hover::after {
-webkit-transform: scale(2) rotate(180deg);
transform: scale(2) rotate(180deg);
background: #333;
}
.box_flex00{
display:flex;
}
.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:flex-start;
}
.box_flex04{
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
/*必須項目・警告・エラーの文字色*/
.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;
}
.label_yellow{
font-weight:bold;
background:linear-gradient(transparent 60%, #ff6 60%);
}
.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;}
/*使い方：ここに左寄せ中央配置したいテキスト
*/
/*使い方：ここに左寄せ中央配置したいテキスト
ここに左寄せ中央配置したいテキスト