@media screen and (max-width: 767px) {

html{
scroll-behavior: smooth;
}

body {
margin:0px;
padding:0px;
text-align:center;
}
#outer {
font-size:13px;
line-height:150%;
text-align:left;
}
#header {
text-align:left;
background-color:#214555;
}
#head-inner {
margin:0px auto 0px auto;
padding:10px 0px 0px 0px;
background-color:#214555;
padding:25px;
}

.description {
padding-left:10px;
line-height:140%;
color:#ffffff;
}
#contents {
margin:0px auto 0px auto;
padding:30px 0px 0px 0px;
width:320px;
line-height:150%;
color:#333333;
font-size:14px;
}
ul {
margin: 0 0 0 1em;
padding: 0;
}
li {
list-style:disk; 
font-size:18px;
line-height:120%
}

.box2 {
    padding: 0.5em 1em;
    margin: 2em 0;
    font-weight: bold;
    color: #6091d3;/*文字色*/
    background: #FFF;
    border: solid 3px #6091d3;/*線*/
    border-radius: 10px;/*角の丸み*/
}
.box2 p {
    margin: 0; 
    padding: 0;
}

P {
margin:1em 0 1em 0;
line-height:150%;
}
img{
border:0px;
}
hr {
border-width: 1px 0px 0px 0px;
border-style: solid;
border-color: #cccccc;
height: 1px;
}
a{
font-weight:normal;
}
h1 {
font-size:24px;
font-weight:bold;
text-align:left;
padding:0px 0px 0px 10px;
margin:0px;
color:#ffffff;
}
h1 a{
font-weight:bold;
color:#ffffff;
text-decoration:none;
}
h1 a:hover{
font-weight:bold;
color:#ffffff;
text-decoration:underline;
}
h2 {
font-size:20px;
margin:0px 0px 0px 0px;
padding:4px 0px 4px 7px;
border-bottom:2px solid #999999;
line-height:150%;
}
.green {
color:#008800;
font-weight:bold;
}
#middle {
margin:0px auto 0px auto;
padding:10px 0px 20px 0px;
width:694px;
}
.side-title {
width:540px;
padding:4px 10px 4px 10px;
background-color:#f1f1f1;
font-weight:bold;
border:1px solid #999999;
margin-bottom:10px;
}
.side {
margin:0px 0px 10px 0px;
padding:2px 8px 8px 7px;
line-height:150%;
}
ul {
margin: 0 0 0 1em;
padding: 0;
}


#footer {
font-size:12px;
height:100px;
clear:left;
text-align:center;
}
blockquote{
border:1px solid #ccc;
padding:5px;
margin:10px;
}

.hidden_box {
    margin: 2em 0;/*前後の余白*/
    padding: 0;
}

/*ボタン装飾*/
.hidden_box label {
    padding: 10px;
    font-size: 15px;
    background-color: #f0f0f0;
    font-weight: bold;
    border: solid 2px black;
    cursor :pointer;
}

/*ボタンホバー時*/
.hidden_box label:hover {
    background: #efefef;
}

/*チェックは見えなくする*/
.hidden_box input {
    display: none;
}

/*中身を非表示にしておく*/
.hidden_box .hidden_show {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

/*クリックで中身表示*/
.hidden_box input:checked ~ .hidden_show {
    padding: 10px 0;
    height: auto;
    opacity: 1;
}

html{
    scroll-behavior: smooth;
}
.gotop{
    display: block;
    width: 60px;
    height: 60px;
    box-sizing: border-box;
    background: #FFF;
    border: 1px solid #999;
    padding-top: 30px;
    text-align: center;
    letter-spacing: -1px;
    font-size: 85%;
    text-decoration: none;
    color: #333;
    opacity: 0.5;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 10000;
}
.gotop::before{
    content: "";
    display: block;
    border-top: 2px solid #333;
    border-right: 2px solid #333;
    width: 40%;
    height: 40%;
    top: 20%;
    left: 0;
    right: 0;
    margin: auto;
    position: absolute;
    transform: rotate(-45deg);
}
.gotop:hover{
    opacity: 1;
}

.example{
    font-size: 20px;
    border: solid 2px black;
}

p.honbun { font-size: 20px; }
div.honbun { font-size: 20px; }
p.honbuns { font-size: 18px; }
div.totop { font-size: 16px; }

p.box-01 {
    font-size:18px;
    width:60px;
    height:22px;
    text-align:center;
    background-color: #f0f8ff;
    margin: 10px 10px 10px 10px;
    border: solid 2px black;
    cursor :pointer;
    padding: 5px;
    }


input.kensaku
{
width: 200px;
height: 25px;
font-size:20px;}

input.kensakub
{
width: 100px;
height: 25px;
font-size:15px;
}

input.sentaku {
  width: 300px; /* 文字送りされるように幅を決める */
  white-space: normal; /* 文字がはみ出た時のルールを文字送りに指定 */
  font-size:20px;
}

div.sentaku {
  font-size:20px;
  line-height: 2;
}

div.kaigyo {
line-height:10px;
}

}

a {
    text-decoration:none; 
}

a:hover {
  text-decoration: underline;
}

@media screen and (min-width: 768px) {
html{
scroll-behavior: smooth;
}

body {
margin:0px;
padding:0px;
text-align:center;
}
#outer {
font-size:13px;
line-height:150%;
text-align:left;
}
#header {
text-align:left;
background-color:#214555;
}
#head-inner {
margin:0px auto 0px auto;
padding:5px 0px 0px 0px;
width:694px;
background-color:#214555;
padding:5px;
}
.description {
padding-left:10px;
line-height:140%;
color:#ffffff;
}
#contents {
margin:0px auto 0px auto;
padding:5px 0px 0px 0px;
width:694px;
line-height:150%;
color:#333333;
font-size:14px;
}
ul {
margin: 0 0 0 1em;
padding: 0;
}
li {
list-style:disk; 
font-size:20px;
line-height:120%;
margin: 0 0 0 1em;
}

.box2 {
    padding: 0.5em 5em;
    margin: 2em 0;
    font-weight: bold;
    color: #6091d3;/*文字色*/
    background: #FFF;
    border: solid 3px #6091d3;/*線*/
    border-radius: 10px;/*角の丸み*/
}
.box2 p {
    margin: 0; 
    padding: 0;
}

P {
margin:1em 0 1em 0;
line-height:150%;
}
img{
border:0px;
}
hr {
border-width: 1px 0px 0px 0px;
border-style: solid;
border-color: #cccccc;
height: 1px;
}
a{
font-weight:normal;
}
h1 {
font-size:24px;
font-weight:bold;
text-align:left;
padding:0px 0px 0px 10px;
margin:0px;
color:#ffffff;
}
h1 a{
font-weight:bold;
color:#ffffff;
text-decoration:none;
}
h1 a:hover{
font-weight:bold;
color:#ffffff;
text-decoration:underline;
}
h2 {
font-size:20px;
margin:0px 0px 0px 0px;
padding:4px 0px 4px 7px;
border-bottom:2px solid #999999;
}
.green {
color:#008800;
font-weight:bold;
}
#middle {
margin:0px auto 0px auto;
padding:10px 0px 20px 0px;
width:694px;
}
.side-title {
width:540px;
padding:4px 10px 4px 10px;
background-color:#f1f1f1;
font-weight:bold;
border:1px solid #999999;
margin-bottom:10px;
}
.side {
margin:0px 0px 10px 0px;
padding:2px 8px 8px 7px;
line-height:150%;
}

#footer {
font-size:12px;
height:100px;
clear:left;
text-align:center;
}
blockquote{
border:1px solid #ccc;
padding:5px;
margin:10px;
}

.hidden_box {
    margin: 2em 0;/*前後の余白*/
    padding: 0;
}

/*ボタン装飾*/
.hidden_box label {
    padding: 10px;
    font-size: 15px;
    background-color: #f0f0f0;
    font-weight: bold;
    border: solid 2px black;
    cursor :pointer;
}

/*ボタンホバー時*/
.hidden_box label:hover {
    background: #efefef;
}

/*チェックは見えなくする*/
.hidden_box input {
    display: none;
}

/*中身を非表示にしておく*/
.hidden_box .hidden_show {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

/*クリックで中身表示*/
.hidden_box input:checked ~ .hidden_show {
    padding: 10px 0;
    height: auto;
    opacity: 1;
}

.gotop{
    display: block;
    width: 80px;
    height: 80px;
    box-sizing: border-box;
    background: #FFF;
    border: 1px solid #999;
    padding-top: 50px;
    text-align: center;
    letter-spacing: -1px;
    font-size: 70%;
    text-decoration: none;
    color: #333;
    opacity: 0.5;
    position: fixed;
    bottom: 40px;
    right: 40px;
    z-index: 10000;
}
.gotop::before{
    content: "";
    display: block;
    border-top: 2px solid #333;
    border-right: 2px solid #333;
    width: 40%;
    height: 40%;
    top: 20%;
    left: 0;
    right: 0;
    margin: auto;
    position: absolute;
    transform: rotate(-45deg);
}
.gotop:hover{
    opacity: 1;
}

.example{
    font-size: 20px;
    border: solid 2px black;
}

p.honbun { font-size: 20px; }
div.honbun { font-size: 20px; }
p.honbuns { font-size: 18px; }
p.honbunss { font-size: 15px; }
div.totop { font-size: 20px; }



p.box-01 {
    font-size:20px;
    width:80px;
    height:25px;
    text-align:center;
    background-color: #f0f8ff;
    margin: 10px 10px 10px 10px;
    border: solid 2px black;
    cursor :pointer;
    padding: 5px;
    }

input.kensaku
{
width: 300px;
height: 45px;
font-size:20px;
}

input.kensakub
{
width: 100px;
height: 45px;
font-size:15px;
}

input.sentaku {
  width: 500px; /* 文字送りされるように幅を決める */
  white-space: normal; /* 文字がはみ出た時のルールを文字送りに指定 */
  font-size:20px;
  display:block;
  position:relative;left:50px;

}

div.sentaku {
  font-size:20px;
  line-height: 2;
}

div.kaigyo {
line-height:10px;
}

a {
    text-decoration:none; 
}

a:hover {
  text-decoration: underline;
}