@charset "utf-8";
/* ============================================================

LP TEMPLATE

FILE NAME: common.css
AUTHOR: naeiro grafica Sana*

UPDATE: 2025/09/26

キーカラー１：#ff6078
キーカラー２：#555

  background:rgba(255,96,120,0.50);


============================================================ */

/*==========================================================
1:Common Style
==========================================================*/
html{-webkit-text-size-adjust:100%; box-sizing:border-box;-moz-tab-size:4;tab-size:4;word-break:normal;}
*,:after,:before{background-repeat:no-repeat;box-sizing:inherit;}
:after,:before{text-decoration:inherit;vertical-align:inherit;}
*{margin:0;padding:0;-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; word-wrap: break-word; overflow-wrap: break-word;}
html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,abbr, address, cite, code,del, dfn, em, img, ins, kbd, q, samp,small, strong, sub, sup, var, b, i,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, figcaption, figure,footer, header, hgroup, menu, nav, section, summary,time, mark, audio, video { 
margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; font-weight:normal;
vertical-align: baseline; background: transparent;}

body{-webkit-text-size-adjust: 100%;}
hr{color:inherit; overflow:visible;
border: 0; height: 0; margin: 0; padding: 0; border-top: 1px dashed rgba(0, 0, 0, 0.2);}

summary{display:list-item;}
small{font-size:80%}[hidden]{display:none;}

abbr, acronym { border-bottom: 1px dotted #666; cursor: help;}
abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted;}
abbr,acronym,fieldset,img,a{border:0;} 

a{outline:none;background-color:transparent;}
a:focus,button:focus,input:focus,select:focus,textarea:focus{outline-width:0;}
a:active,a:hover{outline-width:0;}
a,a img,#menuBTN {-webkit-transition: All 0.5s ease;-moz-transition: All 0.5s ease;-o-transition: All 0.5s ease;-ms-transition: All 0.5s ease;transition: All 0.5s ease;}
a img { border: none;}
img {border: none;border-style:none;max-width: 100%; height: auto; vertical-align: top;}
q:before,q:after {content:'';} 
code,kbd,pre,samp{font-family:monospace,monospace;}
pre{font-size:0.9em; max-width: 100%; overflow: auto; padding: 0.5em;}
b,strong{font-weight:bolder;}
sub,sup{font-size:0.7em;line-height:0;position:relative;vertical-align:baseline;}
sup { bottom: 1ex;}
sub { top: .5ex;}

table{border-color:inherit;text-indent:0;border-collapse:collapse; border-spacing:0;}
table,th,td {margin:0;padding:0;} 
caption,th,td {text-align:left;font-weight: normal;}
iframe{border-style:none;}
iframe,embed,object{ max-width: 100%;}
input{border-radius:0}[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button{height:auto;}
[type=search]{-webkit-appearance:textfield;outline-offset:-2px;}
[type=search]::-webkit-search-decoration{-webkit-appearance:none;}

textarea{overflow:auto;resize:vertical;}
button,input,optgroup,select,textarea{font:inherit;}
optgroup{font-weight:700}button{overflow:visible;}
button,select{text-transform:none;}
[role=button],[type=button],[type=reset],[type=submit],button{cursor:pointer;}
[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0;}
[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button:-moz-focusring{outline:1px dotted ButtonText;}
[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button;}
button,input,select,textarea{background-color:transparent;border-style:none;}

select{-moz-appearance:none;-webkit-appearance:none;}
select::-ms-expand{display:none;}
select::-ms-value{color:currentColor;}
legend{border:0;color:inherit;display:table;max-width:100%;white-space:normal;}
::-webkit-file-upload-button{-webkit-appearance:button;color:inherit;font:inherit}[disabled]{cursor:default;}

progress{vertical-align:baseline;}
[aria-busy=true]{cursor:progress;}
[aria-controls]{cursor:pointer;}
[aria-disabled=true]{cursor:default;}

address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;font-weight:normal; }
ol,ul {list-style:none; }

/*form DESIGN*/
button, input, select, textarea { box-sizing: border-box; max-width: 100%; font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle;}
button, input[type="button"], input[type="reset"], input[type="submit"] { background: #555;  color:#fff;
-webkit-appearance: none;	-moz-appearance: none;appearance: none; cursor: pointer; border-radius: 3px; 
font-size: 14px; line-height: 1; padding: .6em 1em .4em; }
button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover { }
button:focus, input[type="button"]:focus, input[type="reset"]:focus, input[type="submit"]:focus, button:active, input[type="button"]:active, input[type="reset"]:active, input[type="submit"]:active {  }
input[type="checkbox"], input[type="radio"] { padding: 5px; border:1px solid #aaa; }
input[type="search"] { -webkit-appearance: textfield; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;}
button::-moz-focus-inner, input::-moz-focus-inner {
border: 0;padding: 0;}
input[type="text"], input[type="email"],input[type="tel"], input[type="url"], input[type="password"], input[type="search"], textarea { color: #666; border: 1px solid #ccc; border-radius: 3px; }
input[type="text"]:focus, input[type="email"]:focus,input[type="tel"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, textarea:focus { color: #111; }
input[type="text"], input[type="email"],input[type="tel"], input[type="url"], input[type="password"], input[type="search"] { padding: 3px; }
textarea { overflow: auto; padding-left: 3px; vertical-align: top; }

/*==========================================================
2:Base Style
==========================================================*/
*{font-family: "M PLUS 1p","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック",Osaka,"sans-serif";}

/*LINK DESIGN*/
a{ color:#3A7CA7;}
a:hover img,
a:hover{opacity:0.9; color: #777;}

body { width: 100%; min-width: 320px; line-height: 1.5; font-size:16px; text-align:center;color:#333;
background: #ff6078; padding: 0; margin: 0;}

h1,h2,h3,h4,h5,h6,p,li{color:#333;}

h1{font-size:1.5em;}
h2{font-size:1.2em; margin: 0 0 30px 0;}

h3{
}
h4{
}
h5,h6{
}
p{ margin-top:20px;line-height: 2.4;}
ul{
}
li a{
}
li a:hover{
}
nav ul{}
nav li a{display:block;}
nav li a:hover{;}

#gNav{position:fixed; z-index: 999; transition: all 0.6s;
top:0; left:-120%; width:100%; height: 100vh; background:#ff6078;}

#gNav.panelactive{left: 0;}
/*ナビの縦スクロール*/ #gNav.panelactive #gNavlist{
position: fixed;z-index: 999; width:100%;height: 100vh;overflow: auto;-webkit-overflow-scrolling: touch;}
#gNav ul {position: absolute;z-index: 999; top:45%;left:50%;transform: translate(-50%,-50%); width: 80%;}
#gNav li{list-style: none;text-align: left; font-size: 20px;}
#gNav li a{display: block;text-transform: uppercase;text-decoration: none;font-weight: bold;
padding:10px;letter-spacing: 0.1em;color: #fff; }
#gNav li a:hover{color: #555; }

#menuBTN{position:fixed;  cursor: pointer;z-index: 9999;
top:10px;right: 10px; width: 74px;height:74px; background:rgba(255,255,255,0.4); border-radius: 100px;}
#menuBTN:hover{background:rgba(255,255,255,0.8);}
/*×*/  
#menuBTN span{ display: inline-block;position: absolute;transition: all .4s;
left: 18px;height: 4px;width: 50%; border-radius: 3px;background-color: #ff6078;}
#menuBTN span:nth-of-type(1) { top:25px;}
#menuBTN span:nth-of-type(2) { top:35px;}
#menuBTN span:nth-of-type(3) { top:45px;}

#menuBTN.active span{background-color: #fff;}
#menuBTN.active span:nth-of-type(1) {top: 30px; left: 18px;transform: translateY(6px) rotate(-45deg);width: 50%;}
#menuBTN.active span:nth-of-type(2) {opacity: 0;}
#menuBTN.active span:nth-of-type(3) {top: 42px; left: 18px; transform: translateY(-6px) rotate(45deg);width: 50%;}

.BTN{ position: relative; outline: none;display: inline-block;text-align: center;text-decoration: none;
margin: 30px auto;padding: 12px 20px;border: 2px solid #ff6078; transition: all .2s linear;
font-weight: bold; font-family: "M PLUS 1p";background:#ff6078;color:#fff; border-radius: 5px;}
.BTN:hover{background: #fff; color: #ff6078;}
.BTN::before{content:"";position: absolute;transition: all .2s linear;
top:50%;right:-30px; width:50px;height:2px; background:#ff6078;}
.BTN::after{ content:"";position: absolute;transition: all .2s linear;transform:skewX(45deg);
top: 20%;right: -23px;width:3px;height:15px;background:#ff6078;}
.BTN:hover::before{right:-40px;}
.BTN:hover::after{right:-33px;}

.LINK{position:relative; display:inline-block; text-decoration: none;outline: none;
margin: 30px auto;padding: 10px 30px;color:#fff;}
.LINK::before,
.LINK::after {content:'';position:absolute;  transition:all 0.3s ease-in-out;
border:solid #fff;width:10px;height:10px;}
.LINK::before{top:0;left:0; border-width:2px 0 0 2px;}
.LINK::after{bottom:0;right:0;border-width:0 2px 2px 0;}
.LINK:hover{ color:#fff;}
.LINK:hover::before,
.LINK:hover::after{ width:calc(100% - 2px);height:calc(100% - 2px);border-color:#fff;}

header{ padding:0;}
header p{ color:#fff; font-size:1.6em; line-height:1.8;}
header h1 img{ width: 100%; max-width: 1200px; margin: 0 auto; line-height: 0; border: none;}
header h2 { max-width: 600px; margin: 0 auto;}
header h2 img{ max-width: 600px;}

section{ padding:10px;}

footer{ clear: both;padding: 30px; color: #fff; position: relative;	 background:rgba(255,96,120,1.0);}

#Message{ color: #fff; width: 90%; margin: 0 auto; padding: 0;}
#Message .inBox{ overflow: hidden; width: 900px; margin: 0 auto;}


#Message .memo { overflow: hidden; width: 600px; margin: 0 0 0 460px;}
#Message .memo .notes{ font-size: 0.8em; color: #888; line-height: 1.5; text-align: left;}

#Contents{ width:100%; max-width:840px; min-width: 840px; margin: 0 auto;}

#Contents dl{ background:#fff;border-radius:15px; margin: 10px;min-height: 300px;}
#Contents dl:nth-child(odd){ width: 440px;}
#Contents dl:nth-child(even){ width: 340px;}
#Contents dl dd{ }
#Contents dl dd div.comment{ background: #ff6078; border-radius: 15px; color: #fff; padding:20px 15px 0 15px;; 
position:relative; margin: 30px 0 0; display: flex;justify-content: center;
  align-items: center;}

#Contents dl dd div.comment p.txt{color: #fff; width: 86%; line-height: 1.4; font-size: 1.1em; padding: 5px 10px;}
#Contents dl dd div.comment p.face{ width: 14%; padding: 10px; }

#Contents dl dd div.comment .fukidashi1{ position: absolute; bottom:-14px; right: 0;width: 50px; height: auto; }
#Contents dl dd div.comment .fukidashi2{ position: absolute; bottom:-14px; left: 0;width: 50px; height: auto; }

#Contents dl dd p{ font-size: 1.2em; line-height: 1.5; margin: 0 0 1em 0 ; font-weight: bold;}
#Contents dl dd p.data{ font-size: 1em;color: #7a7a7a; line-height: 1.5; margin: 0 ; font-weight: normal;}
#Contents dl dd p em{ font-size: 1.4em; font-weight: bold;}
#Contents dl.no01 dd { background-image:url(../img/bg001.png);background-repeat: no-repeat; background-position:top right; background-size: 60%;}
#Contents dl.no02 dd { background-image:url(../img/bg002.png);background-repeat: no-repeat; background-position:top right; background-size: 60%;}
#Contents dl.no03 dd { background-image:url(../img/bg003.png);background-repeat: no-repeat; background-position:top right; background-size: 60%;}
#Contents dl.no04 dd { background-image:url(../img/bg004.png);background-repeat: no-repeat; background-position:top right; background-size: 60%;}
#Contents dl.no05 dd { background-image:url(../img/bg005.png);background-repeat: no-repeat; background-position:top right; background-size: 60%;}
#Contents dl.no06 dd { background-image:url(../img/bg006.png);background-repeat: no-repeat; background-position:top right; background-size: 60%;}
#Contents dl.no07 dd { background-image:url(../img/bg007.png);background-repeat: no-repeat; background-position:top right; background-size: 60%;}
#Contents dl.no08 dd { background-image:url(../img/bg008.png);background-repeat: no-repeat; background-position:top right; background-size: 60%;}
#Contents dl.no09 dd { background-image:url(../img/bg009.png);background-repeat: no-repeat; background-position:top right; background-size: 60%;}
#Contents dl.no10 dd { background-image:url(../img/bg010.png);background-repeat: no-repeat; background-position:top right; background-size: 60%;}

#Contents  dl dt {position: relative;cursor: pointer; transition: all .5s ease; padding: 10px 20px; }
#Contents  dl dt h1{ padding: 20px 0 0;}
#Contents  dl dt h1 img{ width:inherit; max-width: 100%;}
/*
#Contents  dl dt h1{font-size:1.6em; line-height: 1; text-align: left; padding:0 10px;color: #777; }
#Contents  dl dt h1 span{font-size:3.3em; color: #b5b5b6; padding: 10px 20px 10px 0px; float: left;font-weight: normal;}
#Contents  dl dt h1 em{font-size:1em; color: #000; padding: 16px 0 0 0; display: block; font-weight:bolder; line-height: 1.2;}
*/
/* オーバーレイ */
#overlay { display: none;position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10;
  background-color: rgba(0, 0, 0, 0.6);}
.no_scroll { overflow: hidden;}

/* モーダルウィンドウ */
.modal-window { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
 border-radius: 10px;  z-index: 11; width: 700px; max-height:96%; overflow-y: scroll; background-color: #fff;}

/* 閉じるボタン */
.button-close { position:fixed;top: -8px; right:-5px; font-size: 20px; 
  width: auto; padding: 18px 20px 15px 15px; background-color: #ff6078; color: #fff;  border-radius:5px; cursor: pointer;}
#Contents dl dd { clear: both; background: #eee; padding: 40px; text-align: left; display: none;}
#Contents dl dt img { width: 100%;vertical-align: middle; padding: 0; }

#AboutUS{background:rgba(255,255,255,0.9); padding: 80px 0; }
#AboutUS h1{ font-size: 2em; margin: 0 auto 30px; }
#AboutUS p{ margin: 0 auto 30px; }
#AboutUS .logo{ margin: 0 auto 60px; width: 400px;}

#SUNGO1010{background:#fff; padding: 100px 0; }
#SUNGO1010 h1{ margin:0 auto 70px; color: #ff6078;font-size: 2em;}
#SUNGO1010 p{color: #ff6078;}

#ContentsGUIDE{background:rgba(120,120,120,1.0);}
#ContentsGUIDE h1{ margin:0 auto 70px; color: #fff;font-size: 2em;}
#ContentsGUIDE p{color: #fff;}

#Partners{background:rgba(255,255,255,1.0); padding: 80px 0; }
#Partners h1{margin:0px auto 30px; color: #ff6078;font-size: 1.7em;}
#Partners h2{margin:70px auto 30px; color: #ff6078;font-size: 1.7em; }
#Partners h2 span{display: block;font-size: 0.5em;}
#Partners ul{display: flex; justify-content: center; align-items: start;gap:1px;flex-wrap: wrap;margin: 30px auto 10px;}
#Partners ul li{ width: 28%;}
#Adviser {}
#Adviser .inBox{ display: flex; width: 100%; margin: 10px auto 100px; min-width: 1100px;}
#Adviser dl { display: flex;width: 33%;}
#Adviser dl dt{width: 33%; }
#Adviser dl dt img{ min-width: 120px;}
#Adviser dl dd{ text-align: left; padding: 1em 0 0 0.5em;}
#Adviser dl dd strong{ display: block; font-size: 1.2em;}
#Partners .inBox{ width: 80%; margin: 10px auto 200px;}
#Partners .inBox p{ color: #999;}
#Partners .inBox em{display: inline-block; color: #333;}
#Partners p.notes{ line-height: 1.5; font-size: 0.8em; color: #666;}

/*神奈川県ロゴ*/
.imgLogo img{ max-width:240px; height: auto; margin: 10px auto;}

/*データ抽出情報*/
body#DATA{background: #fff; padding: 0; margin: 0; min-height: 500px;}
body#DATA h1{margin:50px auto 0px; color: #999;font-size: 1.7em;}
body#DATA header{ margin:0 auto 0px; padding: 0; }
body#DATA section{ margin:0 auto 100px; padding: 0; }
#DATA dl{display: -webkit-flex;display: -moz-flex; display: flex;flex-wrap: wrap;align-items: stretch;	
width: 80%; margin: 30px auto; max-width: 1000px;}
#DATA dl dt{ text-align: right;padding: 5px;width: 200px; border-bottom: 1px solid #fff;color: #fff;     background:rgba(255,96,120,0.80);}
#DATA dl dd{ text-align: left; padding: 5px;width: calc(100% - 200px);border-bottom: 1px dotted #aaa; font-size: 1em;}

body#DATA ul.PICUP{ text-align: left; width: 80%; max-width: 1000px; margin: 30px auto; padding: 20px 10px 20px 20px; background:rgba(222,222,222,0.3);}
body#DATA ul.PICUP li{ line-height: 1.5; padding: 0 0 0.5em 0; }

/*キャンペーン　応募規約*/
body#Campaign{background: #fff; padding: 0; margin: 0; }
body#Campaign h1{ margin:70px auto 50px; color: #999; font-size: 1.4em;}
body#Campaign section{ margin:0 auto 100px; max-width: 800px; padding: 10px; text-align: left;}
body#Campaign section p{ line-height: 1.5;font-size: 14px;}
body#Campaign section ol{ margin: 30px auto;}
body#Campaign section ol li{ line-height: 1.5;margin: 20px auto; font-size: 14px;}


/*for PC-Tablet ==========================================*/
@media screen and (min-width:821px) {

.SP{ display:none;}
.PC{ display:block;}

/**/}

/*for SP ==========================================*/
@media screen and (max-width:820px) {

.PC{ display:none;}
.SP{ display:block;}

header{ padding:0;}
header p{ font-size:1em; text-align: left;}
header h1 img{ width: 100%; max-width: 100%; }
header h2 img{ max-width: 90%;}
	
#gNav ul {width: 100%;}
#gNav li{font-size: 16px; padding: 5px 10px;}
p{ text-align: left;}

h1{font-size:1.4em;}
h2{font-size:1.1em; margin: 0 0 20px 0;}


#Contents{ width: 100%; max-width: 100%; min-width: 100%; margin: 0 auto;}
#Contents dl{ width:95% !important; margin:0 auto 20px; float: inherit;}

/* モーダルウィンドウ */
.modal-window { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
 border-radius: 10px;  z-index: 11; width: 90%; height: auto;  max-height:76%; overflow-y: scroll; background-color: #fff;}
	
#Contents  dl dt {padding: 10px;}
#Contents  dl dt h1{ padding: 15px 0 0;text-align:left;}
#Contents dl:nth-child(even)  h1 img{  width:76%; }
/*
#Contents  dl dt h1{font-size:1.4em; padding:0 5px; }
#Contents  dl dt h1 span{ padding: 10px 10px 10px 0px;}
#Contents  dl dt h1 em{font-size:1em; padding: 16px 0 0 0;}
*/
#Contents dl dd {padding: 50px 12px;}

#Contents dl dd div.comment{ padding:12px 12px 0 12px;  margin: 40px 0 0; }

#Contents dl dd div.comment p.txt{ width: 77%; padding: 10px;}
#Contents dl dd div.comment p.face{ width: 23%; padding: 5px; }

#Contents dl dd div.comment .fukidashi1{ position: absolute; bottom:-14px; right: 0;width: 50px; height: auto; }
#Contents dl dd div.comment .fukidashi2{ position: absolute; bottom:-14px; left: 0;width: 50px; height: auto; }

#Contents dl dd p{ width: 100%;}
#Contents dl dd p.data{ font-size: 0.9em;color: #7a7a7a; line-height: 1.7; margin: 0 ; font-weight: normal;}
#Contents dl dd p em{ font-size: 1.4em; font-weight: bold;}

#SUNGO1010{ padding: 50px 2em; }
#SUNGO1010 h1{ margin:0 auto 40px;font-size: 1.6em;}

#AboutUS{padding: 50px 2em;}
#AboutUS h1{ font-size: 1.3em; margin: 0 auto 20px; }
#AboutUS p{ line-height:1.8; margin: 0 auto 20px; }
#AboutUS .logo{ margin: 0 auto 30px; width: 80%;}

#Partners{ padding: 50px 1em;}
#Partners h1{margin:0px auto 20px; font-size: 1.3em;}
#Partners h2{margin:30px auto 20px; font-size: 1.3em; }
#Partners ul{margin: 50px 5px;}
#Partners ul li{ width: 45%; padding: 0; margin: 0;}
#Partners p{ text-align: center; line-height: 1.5}

#Adviser .inBox{ display: block; width: 90%; margin: 10px auto 50px; min-width: 320px;}
#Adviser dl { display: flex; padding: 0 0 20px 0; width: 100%;}
#Adviser dl dt{ width: 24%; }
#Adviser dl dt img{ min-width: 80px; }
#Adviser dl dd{ text-align: left; padding: 0.5em 0 0 0.5em; line-height: 1.3;}
#Adviser dl dd strong{ display: block; font-size: 1.1em;}
#Partners .inBox{ width: 98%; margin: 10px auto 50px;}
#Partners .inBox em{}
#Partners .notes{ }

	
body#DATA header{ padding:40px 0 0 0;}

#DATA dl dt{width: 100%; text-align: left;}
#DATA dl dd{width: 100%;}

/**/}


/*PageTOP
==============================================================*/
#pageTop { position: fixed; right: 40px; bottom: -200px; z-index: 1000; height: 120px; }
#pageTop a { display: inline-block; position: relative; width: 10px;height: 80px; color: #555;}
#pageTop a::before { width: 1px; height: 100%; left: 0; top: 0;}
#pageTop a::before, #pageTop a::after {display: block; content: ''; position: absolute; background: #555;
transition: all .4s cubic-bezier(.3,0,.15,1);}
#pageTop a::after { width: 8px;height: 1px; left: -1px; top: 3px;transform: rotate(45deg);}
#pageTop span { display: block;position: absolute;bottom: 0;right: 0;width: 100px;
font-size: 0.9em;text-align: right;transform: rotate(90deg);transform-origin: right bottom;}
#pageTop a:hover { opacity: 1; color: #555;}

footer button {
position: fixed; display: flex; cursor: pointer; opacity: 0; 
visibility: hidden; align-items: center; justify-content: center; border: 0;
right: 20px; bottom: 20px;background: none; transition: .4s; letter-spacing: 3px;}

footer button span:before { position: absolute;
top: -22px; left: 9px; transform: rotate(-45deg);
display: block;  width: 12px;  height: 12px;
content: ""; border: 1px solid #fff;
border-width: 1px 1px 0px 0px;	z-index: 100;}

footer button span:after {
position: absolute;
width: 50px; height: 50px;
border: 1px solid #fff;
content: "";
border-radius: 100%;
top: -43px;
background:rgba(255,96,120,0.80);
left: -10px;}

.is-active {  opacity: 1;  visibility: visible;}



/*for PC-Tablet ==========================================*/
@media screen and (min-width:1025px) {
#pageTop a:hover::before { height: 90px; top: -10px;}
#pageTop a:hover::after { top: -7px;}
/**/}

/*for SP(+Tablet)==========================================*/
@media screen and (max-width:1024px) {
#pageTop { opacity: 0.7;  position: fixed; right: 20px; bottom:-100px; height: 70px; }
#pageTop a  { width: 4px;	height: 60px; }
#pageTop span { font-size: 0.7em;}
#pageTop a:hover { opacity: 0.7; color: #555;}

/**/}