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

LP TEMPLATE

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

UPDATE: 2025/08/10

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

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

/*==========================================================
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 {-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: rgba(96,165,170,1.0);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:rgba(120,120,120,1.0);}

#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;left: 10px; width: 74px;height:56px; background:rgba(255,255,255,0.3); border-radius: 10px;}
/*×*/  
#menuBTN span{ display: inline-block;position: absolute;transition: all .4s;
left: 18px;height: 4px;width: 50%; border-radius: 3px;background-color: #000;}
#menuBTN span:nth-of-type(1) { top:15px;}
#menuBTN span:nth-of-type(2) { top:25px;}
#menuBTN span:nth-of-type(3) { top:35px;}

#menuBTN.active span{background-color: #fff;}
#menuBTN.active span:nth-of-type(1) {top: 18px; 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: 30px; 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 #555; transition: all .2s linear;
font-weight: bold; font-family: "M PLUS 1p";background:#555;color:#fff; border-radius: 5px;}
.BTN:hover{background: #fff; color: #555;}
.BTN::before{content:"";position: absolute;transition: all .2s linear;
top:50%;right:-30px; width:50px;height:2px; background:#555;}
.BTN::after{ content:"";position: absolute;transition: all .2s linear;transform:skewX(45deg);
top: 20%;right: -23px;width:3px;height:15px;background:#555;}
.BTN:hover::before{right:-40px;}
.BTN:hover::after{right:-33px;}

.LINK{position:relative; display:inline-block; text-decoration: none;outline: none;
margin: 20px auto;padding: 10px 30px;color:#999;}
.LINK::before,
.LINK::after {content:'';position:absolute;  transition:all 0.3s ease-in-out;
border:solid #999;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:#999;}
.LINK:hover::before,
.LINK:hover::after{ width:calc(100% - 2px);height:calc(100% - 2px);border-color:#999}

header{ background:url("../img/bg_header.png") no-repeat top center; background-size:contain;}
header h1 img{ width: 100%; max-width: 1440px; margin: 0 auto; line-height: 0; border: none;}
section{ padding:100px 10px;}

footer{ padding: 30px;background:rgba(96,165,170,1.0); color: #fff;}

#Message{ background: #fff; width: 90%; margin: 0 auto; padding: 0;}
#Message .inBox{ overflow: hidden; width: 900px; margin: 0 auto;}
#Message p{ font-size: 1.1em;}
#Message .Message1{float: left;text-align: right; min-width: 640px;max-width: 640px;}
#Message p.img1{ float: right; padding: 30px 0 0 0 ; max-width: 240px;}
#Message .Message2{float: right; text-align: left; min-width: 600px;max-width: 600px;}
#Message p.img2{ float: left; padding: 30px 20px 0 0 ;max-width: 240px;}

#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;}

#AboutUS{ border-bottom: 8px dotted #999; background: #fff;}
#AboutUS h1{ font-size: 2em; margin: 0 auto 30px; }
#AboutUS p{ margin: 0 auto 30px; }
#AboutUS .logo{ margin: 0 auto 60px; width: 400px;}

#Results{ background: #fff; width: 90%; margin: 0 auto 120px; }
#Results h1{ max-width: 800px; margin: 0 auto 30px; }
.ResultsBox{width: 100%; max-width: 1000px;margin:0 auto 30px;}
.ResultsBox dl.box {
 --bg-gradient1: linear-gradient(#e0f571 100% 100%);
 --bg-gradient2: linear-gradient(#e5eeb6 100% 100%);
    margin:0 0.3rem 30px; padding: 1.5rem;
    background-image:
        var(--bg-gradient1),
        var(--bg-gradient2),
        var(--bg-gradient1),
        var(--bg-gradient2);
    background-repeat: no-repeat;
    background-size: 100% 15px, 15px 100%, 100% 15px, 15px 100%;
    background-position: left top 7px, right 7px top, left bottom 7px, left 7px top;}

.ResultsBox dl.box p {line-height: 1.7;color: #222;}
.ResultsBox dl dt {position: relative;cursor: pointer; transition: all .5s ease;
font-size:1.8em;padding:30px 10px;  font-weight:bolder; color: #777;}
.ResultsBox dl dt img { width: 100px;vertical-align: middle; padding: 0 20px 0 0; }
.ResultsBox dl dt::before,
.ResultsBox dl dt::after{position: absolute;content:''; background-color: #999;width: 15px;height: 2px;}
.ResultsBox dl dt::before{top:20%;right: 22px; transform: rotate(0deg);}
.ResultsBox dl dt::after{ top:20%;right: 22px; transform: rotate(90deg);}
.ResultsBox dl dt.close::before{transform: rotate(45deg);}
.ResultsBox dl dt.close::after{transform: rotate(-45deg);}

.ResultsBox dl dd {display: none; margin:0px 10px 30px;padding: 0 10px 30px; text-align: left;}
.ResultsBox dl dd .Fact span.memo,
.ResultsBox dl dd .notes span.memo{ font-size: 1em; color: #555; padding: 0 0.2em;}
.ResultsBox dl dd .Fact {line-height: 1.4; color: #999; font-weight: bolder; 
display: table-cell; padding: 30px 0 0; margin: 0 auto;font-size: 1.2em;}
.ResultsBox dl dd .Fact em{ font-size: 2em; font-weight: bolder;vertical-align: middle; padding: 0 0.5em 0 0;margin: 0;}
.ResultsBox dl dd .Anser {display: block; color: #555;font-weight: bolder; text-align: center;  margin: 0 auto 30px;font-size: 1.2em; line-height: 1.5;}
.ResultsBox dl dd .Anser .Data{ font-weight: bolder; text-align: center; color: #555;}
.ResultsBox dl dd .Anser .Data em{font-size: 3em; font-weight: bolder; color: #555;}
.ResultsBox dl dd .notes { display: block; color: #e5eeb6; text-align: center; font-size: 0.9em; }

.ResultsBox dl dd p { line-height: 1.5;text-align: justify; text-justify: inter-ideograph;}
.ResultsBox dl dd p img{ }
.ResultsBox dl dd p span{}

.ResultsBox dl dd .Comment { display: flex;justify-content: center;align-items: start; gap: 0 22px; margin: 30px 0 0;}
.ResultsBox dl dd .Comment img { max-width: 120px; height: 100%; border: 5px solid #eee;border-radius: 50%;}
.ResultsBox dl dd .Comment p {position: relative; max-width: 400px;
margin: 15px 0 0; padding: .8em 1em;border-radius: 5px; background-color: #999; color: #fff;
text-align: justify; text-justify: inter-ideograph;}
.ResultsBox dl dd .Comment p::before {position: absolute;left: -15px;top:26px;width: 15px;height: 20px;
background-color: #999; clip-path: polygon(0 70%, 100% 0, 100% 100%); content: '';}
.ResultsBox dl dd .Comment span{ font-size: 0.9em;}
.ResultsBox dl dd .Comment span.pv{ display: block;text-align: right;}

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

#Partners{ background: #fff;}
#Partners h1{margin:0px auto 30px; color: #999;font-size: 1.7em;}
#Partners h2{margin:70px auto 30px; color: #999;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: 1000px;}
body#DATA h1{margin:50px auto 0px; color: #999;font-size: 1.7em;}
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;}
#DATA dl dt{ text-align: right;padding: 5px;width: 200px; border-bottom: 1px solid #fff;color: #999; background:rgba(120,191,198,.1);}
#DATA dl dd{ text-align: left; padding: 5px;width: calc(100% - 200px);border-bottom: 1px dotted #999; font-size: 1em;}

/*キャンペーン　応募規約*/
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;}

/*プレページ*/
body#pre{background: #fff; padding: 0; margin: 0; }

/*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{ background:none;}
header h1 img{ width: 100%; max-width: 100%; margin: 0 auto 20px;}

section{ padding:50px 10px;}

#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;}
#Message .inBox{ width:90%;}
#Message .Message1,
#Message .Message2{ clear: both;float: none;text-align: left; min-width: 100%;}
#Message p{ font-size: 1em; line-height: 1.6; text-align: justify; text-justify: inter-ideograph;}
#Message p.img1,
#Message p.img2{float: none; max-width: 260px; height: auto; padding: 10px; margin: 0 auto;}
	
#Message .memo { width: 90%; margin: 0 auto;}
#Message .memo .notes{ }

#Results{  width: 90%; margin: 0 auto 30px; }
#Results h1{ }
#Results h1 em{ font-size: 1.1em; }
.ResultsBox dl dt {font-size:1.2em; padding:20px; text-align: left; font-weight: bold;}
.ResultsBox dl dt img { display: block; width: 60px; padding:0 0 10px 0; margin: 0 auto;}

.ResultsBox dl dd .Fact span.memo,
.ResultsBox dl dd .notes span.memo{}
.ResultsBox dl dd .Fact { margin: 0 0 20px 0; font-size: 1.1em;}
.ResultsBox dl dd .Fact em{ padding: 0;display: block;font-size: 1.5em;}
.ResultsBox dl dd .Anser { display: block;  margin: 20px auto; text-align:left; line-height: 1.5;}
.ResultsBox dl dd .Anser .Data{ display: block;}
.ResultsBox dl dd .Anser .Data em{font-size: 2.4em; font-weight: bolder; color: #555;}
.ResultsBox dl dd .notes { text-align: left; }

.ResultsBox dl.box p {line-height: 1.5;}
.ResultsBox dl dd p { line-height: 1.5;text-align: justify; text-justify: inter-ideograph;}
.ResultsBox dl dd p img{ }
.ResultsBox dl dd p span{}

.ResultsBox dl dd .Comment { display: block; margin: 30px 0 0;}
.ResultsBox dl dd .Comment img { display: block;max-width: 120px; height:auto; margin: 0 auto;}
.ResultsBox dl dd .Comment p { position: relative; max-width: 100%; margin: 15px 0 0;
text-align: justify; text-justify: inter-ideograph;}
.ResultsBox dl dd .Comment p::before { position: absolute; left: 45%; top:-15px ; width: 20px;height: 15px;
background-color: #999; clip-path: polygon(0 100%, 70% 0, 100% 100%); content: '';}
.ResultsBox dl dd .Comment span{ font-size: 0.9em;}
	
#SUNGO1010 h1{ margin:0 auto 40px;font-size: 1.6em;}

#AboutUS{}
#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{ }
#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{ }

#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: #fff;}
#pageTop a::before { width: 1px; height: 100%; left: 0; top: 0;}
#pageTop a::before, #pageTop a::after {display: block; content: ''; position: absolute; background: #fff;
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: #fff;}

/*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;}

/**/}