@charset "UTF-8";
/*::::pagetopボタン:::https://giga-log.com/pagetop-button/::::*/
/* パソコン・スマホ共通のCSS */
#PageTopBtn {
position: fixed; /*ボタンの配置場所を固定*/
z-index: 20000;
bottom: -10px; /*下からのボタンの配置場所を指定*/
right: 10px; /*右からのボタンの配置場所を指定*/
}
#PageTopBtn a {
display: block; /*配置の調整*/
text-decoration: none; /*文字の下線を消す*/
color: #fff; /*文字の色*/
background: #00bfff; /*ボタンの背景色*/
text-align: center; /*文字を中央に配置*/
border-radius: 5%; /*ボタンの角を少し丸くする*/
outline: none; /*クリックしたときの黒い枠を消す*/
}
#PageTopBtn a:hover {
text-decoration: none;
background: #87cefa; /*マウスオーバー時の背景色*/
}
/*JS 内
*/
/*HTML footer 直前、戻す位置にid="wrap"を記載*
▲Page Top
*/
/*:::::HTML 緑㋬デザイン:::::*/
#PageTopBtnG {
position: fixed; /*ボタンの配置場所を固定*/
bottom: -10px; /*下からのボタンの配置場所を指定*/
right: 10px; /*右からのボタンの配置場所を指定*/
}
#PageTopBtnG a {
display: block; /*配置の調整*/
text-decoration: none; /*文字の下線を消す*/
color: #fff; /*文字の色*/
background: #90ee90; /*ボタンの背景色*/
text-align: center; /*文字を中央に配置*/
border-radius: 50%; /*ボタンの角を少し丸くする*/
outline: none; /*クリックしたときの黒い枠を消す*/
}
#PageTopBtnG a:hover {
text-decoration: none;
background: #228b22; /*マウスオーバー時の背景色*/
}
/* PC表示*/
@media (min-width: 768px) {
#PageTopBtnG {
font-size: 25px; /*文字のサイズ*/
}
#PageTopBtnG a {
width: 50px; /*ボタンの幅*/
height: 40px; /*ボタンの高さ*/
padding: 5px 0; /*文字の配置場所の調整*/
}
}
/*スマホで表示する場合のCSS*/
@media (max-width: 767px) {
#PageTopBtnG {
font-size: 20px;
}
#PageTopBtnG a {
width: 50px;
height: 50px;
padding: 8px 0;
}
}
/*青㋬デザイン* HTML
header>
:::::HTML 緑㋬デザイン:::::
*/
/*::::::::青㋬デザイン:::::: https://cotodama.co/pagetop/*/
#page_topB{
width: 50px;
height: 50px;
position: fixed;
right: 0;
bottom: 0;
background: #3f98ef;
opacity: 0.6;
border-radius: 50%;
}
#page_topB a{
position: relative;
display: block;
width: 50px;
height: 50px;
text-decoration: none;
}
#page_topB a::before{
font-family: 'Font Awesome 5 Free';
font-weight: 900;
content: '\f102';
font-size: 25px;
color: #fff;
position: absolute;
width: 25px;
height: 25px;
top: -5px;
bottom: 0;
right: 0;
left: 0;
margin: auto;
text-align: center;
}
/*青㋬デザイン* HTML
header>
*/
/*::::::::赤㋬デザイン::::::https://cotodama.co/pagetop/*/
#page_topR{
width: 50px;
height: 50px;
position: fixed;
right: 0;
bottom: 0;
background: #ef3f98;
opacity: 0.6;
border-radius: 50%;
}
#page_topR a{
position: relative;
display: block;
width: 50px;
height: 50px;
text-decoration: none;
}
#page_topR a::before{
font-family: 'Font Awesome 5 Free';
font-weight: 900;
content: '\f106';
font-size: 25px;
color: #fff;
position: absolute;
width: 25px;
height: 25px;
top: -5px;
bottom: 0;
right: 0;
left: 0;
margin: auto;
text-align: center;
}
/*赤㋬デザイン* HTML
header>
*/
/*:::::HTML PKピンク㋬デザインanime:::::*/
#PageTopBtnPK {
position: fixed; /*ボタンの配置場所を固定*/
z-index: 15; /*toplayer/3*/
bottom: -10px; /*下からのボタンの配置場所を指定*/
right: 10px; /*右からのボタンの配置場所を指定*/
}
#PageTopBtnPK a {
display: block; /*配置の調整*/
text-decoration: none; /*文字の下線を消す*/
color: #fff; /*文字の色*/
background: #f3a6d6; /*ボタンの背景色*/
text-align: center; /*文字を中央に配置*/
border-radius: 50%; /*ボタンの角を少し丸くする*/
outline: none; /*クリックしたときの黒い枠を消す*/
}
#PageTopBtnPK a:hover {
text-decoration: none;
background: #228b22; /*マウスオーバー時の背景色*/
}
/* PC表示*/
@media (min-width: 768px) {
#PageTopBtnPK {
font-size: 25px; /*文字のサイズ*/
}
#PageTopBtnPK a {
width: 50px; /*ボタンの幅*/
height: 50px; /*ボタンの高さ*/
padding: 5px 0; /*文字の配置場所の調整*/
}
}
/*スマホで表示する場合のCSS*/
@media (max-width: 767px) {
#PageTopBtnPK {
font-size: 20px;
}
#PageTopBtnPK a {
width: 50px;
height: 50px;
padding: 8px 0;
}
/*pink㋬アニメ* HTML
戻る位置：id="wrap":
headern内に
:::::HTML PK㋬アニメ戻るボタン:::::
*/