@charset "UTF-8";
/* CSS Document */
/*-----------------------------------------------------------
防災
-----------------------------------------------------------*/
/* 共通 */ 
#bousai {
max-width:1200px !important;
margin:0 auto
}
#bousai .tab_area li.active a {
color:#FFF !important
}
#bousai .contents-menu a:visited {
color:#000
}
.tab_wrap {
margin:20px auto;
width:100% !important;
max-width:1080px !important;
}
.tab_area { 
text-align:center;
}
.tab_area li {
padding:12px 0; 
color:#333; 
background:#fff; 
text-align:center; 
font-size:14px; 
cursor:pointer; 
transition:ease 0.2s opacity;
border:solid 1px #ccc;
box-sizing:border-box;
}
.tab_area li a {
width:100%; height:100%;
display:block
}
.tab_area li a:visited {
color:#000
}
.tab_area li:hover {
opacity:0.5;
}
.panel_area{background:#fff;
}
.tab_panel{width:100%;
padding-top:60px; 
}
.three-columns li img.iconlink {
width:14px;
vertical-align:middle
}
.three-columns li.contents-menu span.imglink {
height:192px
}
/* 01.html */
p.txtRight{
text-align:right}
.over-columns { 
display : -webkit-box; /* old Android */
display : -webkit-flex; /* Safari etc. */
display : -ms-flexbox; /* IE10 */
display : flex;
-webkit-flex-wrap : wrap; /* Safari etc. */
-ms-flex-wrap : wrap; /* IE10 */
flex-wrap : wrap;
-webkit-justify-content : space-between; /* Safari etc. */
-ms-justify-content : space-between; /* IE10 */
justify-content : space-between;
}
.over-columns p{
text-align:center;
line-height:1.6}
.over-columns li img{
border:1px solid #CCC;
box-sizing:border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
/* 03.html */
/* 04.html */
.colorList {
display : -webkit-box; /* old Android */
display : -webkit-flex; /* Safari etc. */
display : -ms-flexbox; /* IE10 */
display : flex;
-webkit-flex-wrap: wrap; /* Safari etc. */
-ms-flex-wrap : wrap; /* IE10 */
flex-wrap : wrap;
-webkit-justify-content : space-between; /* Safari etc. */
-ms-justify-content : space-between; /* IE10 */
justify-content : space-between;
flex-shrink : 0;
margin-bottom :60px}
.heading01{
font-family:"M PLUS 1p"; 
background-color:#FBC00C;
padding:5px 8px;
border-radius:4px;
font-weight:bold;
color:#FFF;
font-size:1.2em;
margin-right:5px;
box-sizing:border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
}
.heading02{
font-family:"M PLUS 1p"; 
background-color:#FF5100;
padding:5px 8px;
border-radius:4px;
font-weight:bold;
color:#FFF;
font-size:1.2em;
margin-right:5px;
box-sizing:border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
}
.heading03{
font-family:"M PLUS 1p"; 
background-color:#25B404;
padding:5px 8px;
border-radius:4px;
font-weight:bold;
color:#FFF;
font-size:1.2em;
margin-right:5px;
box-sizing:border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
}
.heading04{
font-family:"M PLUS 1p"; 
background-color:#065AB4;
padding:5px 8px;
border-radius:4px;
font-weight:bold;
color:#FFF;
font-size:1.2em;
margin-right:5px;
box-sizing:border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
}
.heading05{
font-family:"M PLUS 1p"; 
background-color:#D66DCA;
padding:5px 8px;
border-radius:4px;
font-weight:bold;
color:#FFF;
font-size:1.2em;
margin-right:5px;
box-sizing:border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
}
@media only screen and (min-width: 768px) {
h1.border-LineGoods:before {
background-image: url(../../img/icon_title.png) !important;}
.content-visual p {
display:table;
margin:40px 0
}
.content-visual p span {
display:table-cell
}
.content-visual p span.cellTxt {
font-size:1.5em;
line-height:1.6;
width:60%;
vertical-align:middle
}
.content-visual p span.cellImg {
text-align:center
}
/*.two-columns li h4{
height:auto;
margin:15px 0;
line-height:1
}*/
#panel1 .two-columns li {
margin-bottom:20px
}
.contents-menu span.imglink {
margin:0;
padding:0;
display:block;
position:relative;
overflow: hidden;
width:100%;
height:275px;
}
.contents-menu span.imglink img {
position:absolute;
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s;
}
.contents-menu a:hover img {
-moz-transform: scale(1.1,1.1);
-webkit-transform: scale(1.1,1.1);
-o-transform: scale(1.1,1.1);
-ms-transform: scale(1.1,1.1);
opacity:0.8;
filter: alpha(opacity=80);
-ms-filter:alpha( opacity=80);
}
#panel1 .three-columns p {
line-height:1.5;
margin-top:10px
}
/*-----------------------------------------------------------
タブ
-----------------------------------------------------------*/
.tab_area ul {
display : -webkit-box; /* old Android */
display : -webkit-flex; /* Safari etc. */
display : -ms-flexbox; /* IE10 */
display : flex;
-webkit-flex-wrap: wrap; /* Safari etc. */
-ms-flex-wrap : wrap; /* IE10 */
flex-wrap : wrap;
-webkit-justify-content : space-between; /* Safari etc. */
-ms-justify-content : space-between; /* IE10 */
justify-content : space-between;
}
.tab_area li {
width:190px; margin-bottom:20px;
}
.tab_area li.active {
color:#fff; background-color:#e5002d; border:none;
}
/* 01.html */
.dn{
width:182px}
 
 
/* 02.html */
.contents02 .over-columns li{
width:160px}
.contents02 .over-columns li img{
width:100%}
.contents02 .dn{
width:160px}
/* 03.html */
.mapImg{
display:block;
text-align:center;
margin-bottom:40px}
.mapImgsp{
display:none}
.two-columns li.txtAreali h4{
margin-top:0}
#tcArea .two-columns{
margin-top:-100px;
padding-top:100px;
margin-bottom:60px}
.youtube {
width:660px;
height:371px;
margin:20px auto
}
.youtube iframe {
width: 100% !important;
height: 100% !important;
}
/* 04.html */
#tcArea04 .two-columns {
-webkit-align-items: center; /* Safari */
align-items: center;
}
#tcArea04 .imgAreali{
width:23%}
#tcArea04 .txtAreali{
width:67%}
#tcArea04 .txtAreali .tipsTitle01 {
display: -webkit-flex; /* Safari */
display: flex;
-webkit-flex-direction: row; /* Safari */
flex-direction: row;
height: auto;
margin: 0 2.5em;
font-size: 1.5em;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-weight: bold; 
}
#tcArea04 .txtAreali span { flex-basis: auto;
}
#tcArea04 .txtAreali .tipsTitle01 span.smallTxt {
font-size:0.8em;
display:block}
#tcArea04 .txtAreali .tipsTitle02 { 
font-size: 1em;
font-weight: bold;
margin: 0 
}
.four-columns {
display : -webkit-box; /* old Android */
display : -webkit-flex; /* Safari etc. */
display : -ms-flexbox; /* IE10 */
display : flex;
-webkit-flex-wrap: wrap; /* Safari etc. */
-ms-flex-wrap : wrap; /* IE10 */
flex-wrap : wrap;
-webkit-justify-content: space-between; /* Safari etc. */
-ms-justify-content : space-between; /* IE10 */
justify-content : space-between;
}
.four-columns li {
width:22%;
border: solid 1px #ccc;
box-sizing:border-box;
-webkit-box-sizing: border-box;
}
.four-columns li img {
padding:8px;
box-sizing:border-box;
-webkit-box-sizing: border-box;
}
.four-columns li .tipsTitle03 {
padding:8px;
font-weight: bold
}
.four-columns li p {
padding:0 8px 8px 8px;
margin-bottom:0;
line-height:1.4
}
}
@media only screen and (min-width: 768px){
.columnsPlus30:after {
content:"";
display: block;
width:190px;
}
.content-visual {
padding:0 20px;
box-sizing:border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
width: 100%;
margin: 0 auto;
max-width: 1200px;
}
}
@media only screen and (max-width: 768px){
.colorList {
display: -webkit-flex; /* Safari */
display: flex;
-webkit-flex-direction: column; /* Safari */
flex-direction: column;}
.colorList li {
margin-bottom:20px;
}
}
@media only screen and (max-width: 767px){
h1.border-LineGoods:before {
background-image: url(../../img/icon_title.png);
}
.tab_panel {
width: 100%;
padding-top: 20px;
} 
.content-visual p span.cellImg{
display:block;
text-align:center}
.content-visual p{
width:90%;
margin:20px auto 0 auto}
.tab_area ul{
width:100%;
display: -webkit-flex; /* Safari */
display: flex;
-webkit-flex-wrap: wrap; /* 
-webkit-justify-content: space-between; /* Safari */
justify-content: space-between;}
.tab_area li.active {
color:#fff;
background-color:#e5002d;
border:none;
}
.tab_area li.active a {
color:#FFF
}
.tab_wrap {/*width:960px; */
margin:20px auto;
}
input[type="radio"]{
display:none;
}
.tab_area {
text-align:center;
}
.tab_area li {
width:48%;
height:3.5em;
margin-bottom:15px;
/*padding:5px 0;*/
padding:12px 0 !important; 
text-align:center;
font-size:11px;
padding:12px 0; 
color:#333; 
background:#fff; 
text-align:center; 
font-size:14px; 
cursor:pointer; 
transition:ease 0.2s opacity;
border:solid 1px #ccc;
box-sizing:border-box;
}
/*.two-columns li h4{
height:auto;
margin:15px 0;
line-height:1
}*/
ul.two-columns {
display: -webkit-flex; /* Safari */
display: flex;
-webkit-flex-direction: column; /* Safari */
flex-direction: column;
}
ul.three-columns {
display: -webkit-flex; /* Safari */
display: flex;
-webkit-flex-direction: column; /* Safari */
flex-direction: column;
}
ul.three-columns li {
margin:0 0 30px 0;
width:100%
}
ul.three-columns p {
font-size:16px;
margin-top:5px;
line-height:1.6
}
/* 01.html */
.over-columns li{
width:30%}
.over-columns li img{
width:100%}
.dn{
display:none}
.columnsPlus30:after{
content:"";
display: block;
width:30%;
}
/* 03.html */
.mapImg{
display:none
}
.mapImgsp{
display: block;
margin-bottom:60px
}
.rl{
position:relative}
img.mapsp{
width:100%}
.mapImgsp a img{
width:100%;
height:100%}
.mapImgsp a {
width:100%;
height:100%}
#tcArea h2{
margin-bottom:60px}
#tcArea .two-columns li {
margin-bottom: 5px;
}
#tcArea .two-columns {
margin-bottom:60px
}
.youtube {
position: relative;
width: 100%;
max-width:660px;
max-height:371px;
padding-top: 56.25%;
}
.youtube iframe {
position: absolute;
top: 0;
right: 0;
width: 100% !important;
height: 100% !important;
}
/* 04.html */
#tcArea04 .two-columns li {
margin-bottom:5px
}
#tcArea04 .txtAreali .tipsTitle01 {
display: -webkit-flex; /* Safari */
display: flex;
-webkit-flex-direction: row; /* Safari */
flex-direction: row;
font-size: 1.3em;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-weight: bold; 
}
#tcArea04 .txtAreali span {
flex-basis: auto;
}
#tcArea04 .txtAreali .tipsTitle01 span.smallTxt {
font-size:0.8em;
display:block
}
#tcArea04 .txtAreali .tipsTitle02 { 
font-size: 1em;
font-weight: bold;
margin: 0 
} 
.two-columns li img.w50p {
width:50%
}
.four-columns {
display : -webkit-box; /* old Android */
display : -webkit-flex; /* Safari etc. */
display : -ms-flexbox; /* IE10 */
display : flex;
-webkit-flex-wrap: wrap; /* Safari etc. */
-ms-flex-wrap : wrap; /* IE10 */
flex-wrap : wrap;
-webkit-justify-content : space-between; /* Safari etc. */
-ms-justify-content : space-between; /* IE10 */
justify-content : space-between
}
.four-columns li {
width:48%;
border: solid 1px #ccc;
box-sizing:border-box;
-webkit-box-sizing: border-box;
margin-bottom:4%
}
.four-columns li img {
padding:8px;
box-sizing:border-box;
-webkit-box-sizing: border-box;
}
.four-columns li .tipsTitle03 {
padding:8px;
font-weight: bold
}
.four-columns li p{
padding:0 8px 8px 8px;
margin-bottom:0;
line-height:1.4
}
}
@media only screen and (max-width: 375px) {
}
/* 追加 0618 */
.contents-menu p.subTitle01 {
height:auto;
margin:15px 0;
line-height:1;
font-size: 24px;
font-weight: bold; 
}
.contents-menu span.subTitle02 {
font-weight: bold;
font-size: 1em
}
@media only screen and (min-width: 769px){
.contents-menu span.imglink.tips01 {
height: 130px;
}
}
@media only screen and (max-width: 768px) {
.contents-menu span.imglink.tips01 {
height: 95px;
}
}
@media only screen and (max-width: 767px) {
.contents-menu p.subTitle01 {
height: auto;
margin: 15px 0;
line-height: 1;
font-size: 1.25em;
}
.contents-menu span.subTitle02 {
font-weight: bold;
font-size: 0.95em
} 
}</div><div class="naked_ctrl">
<form action="/index.cgi/speech" method="get" name="gate">
<p><a href="http://altstyle.alfasado.net">AltStyle</a> によって変換されたページ <a href="https://www.komeri-npo.org/howto/common/css/howto.css">(-&gt;オリジナル)</a>
/ <label>アドレス: <input type="text" name="naked_post_url" value="https://www.komeri-npo.org/howto/common/css/howto.css" size="22" /></label> <label>モード: <select name="naked_post_mode">
<option value="default">デフォルト</option>
<option value="speech" selected="selected">音声ブラウザ</option>
<option value="ruby">ルビ付き</option>
<option value="contrast">配色反転</option>
<option value="larger-text">文字拡大</option>
<option value="mobile">モバイル</option>
</select>
<input type="submit" value="表示" />
</p>
</form>
</div>