div {
color: #666666;
margin-right:auto;
margin-left:auto;
}
.background{
background-color: #f5f5f5;
}
span {
letter-spacing:0.22em;
}
h1 {
font-size:18px;
border-left: 6px double white;
}
h2 {
color:#a9a9a9;
font-size:30px;
}
h3 {
color: black;/*文字色*/
padding: 0.5em 0;/*上下の余白*/
border-top: solid 3px black;/*上線*/
border-bottom: solid 3px black;/*下線*/
}
.pop {font-family:HG創英角ﾎﾟｯﾌﾟ体;
font-size: 40px;
font-color: #666666 !important;
}
.pop2 {font-family:HG創英角ﾎﾟｯﾌﾟ体;
font-size: 12px;
font-color: #666666 !important;
}
.pop3 {font-family:HG創英角ﾎﾟｯﾌﾟ体;
font-size: 10px;
font-color: #000000 !important;
}
.Underpop1 {font-family:HG創英角ﾎﾟｯﾌﾟ体;
line-height: 0.8;
font-size: 40px;
font-color: #98B6C5; !important;
}
.Underpop2 {font-family:HG創英角ﾎﾟｯﾌﾟ体;
font-size: 10px;
font-color: #98B6C5; !important;
}
img {
margin-right:0em;
margin-bottom:0em;
}
.clear {
clear:both
}
a {
font-size: 100%;
font-weight: ;
color: #000000;
text-decoration: none;
}
a:hover {
color: #000000;
text-decoration: underline;
font-style: ;
opacity:0.5;
}
a:hover img {
opacity: 0.4;
filter: alpha(opacity=80);
-moz-opacity: 0.6;
-webkit-transition: 0.6s ease-in-out;
-moz-transition: 0.6s ease-in-out;
-o-transition: 0.6s ease-in-out;
transition: 0.6s ease-in-out;
}
}
#container {
width:100%; /*このdiv要素の幅は、ウィンドウ幅の80％*/
max-width:3000px; /*でも最大値は900pxまで*/
margin:auto; /*左右autoでセンター合わせに（上下マージンは0）*/
padding:0px; /*内側の空きは上下左右30px*/
background:#add8e6
}
#smp1 {
margin:1em 0;
padding:0
}
#smp1 ul {
margin:0;
padding:0;
}
#smp1 ul li {
float:right; /*左フロートさせます*/
width:8.5%; /*幅は親の25％*/
list-style-type:none; /*リストマーカーは無し*/
margin:0;
padding:0
}
#smp1 ul li a {
display:block; /*テキスト以外もリンクとして反応するように*/
font-size:70%;
line-height:3em; /*これで高さを決めています。3文字分*/
text-align:center; /*テキストをセンターに*/
background-color:#ffffff;
border-right:solid white 1px; /*右側だけ白い線*/
text-decoration:none
}
#smp1 ul li a:hover {
text-decoration:;
}
#smp1 {
margin:1em 0;
padding:0
}
#smp2 ul {
margin-left:10%;
margin-right:10%;
margin-top:10%;
margin-bottom:15%;
padding:0;
}
#smp2 ul li {
float:left; /*左フロートさせます*/
width:25%; /*幅は親の25％*/
list-style-type:none; /*リストマーカーは無し*/
margin:0;
padding:0
}
#smp2 ul li a {
display:block; /*テキスト以外もリンクとして反応するように*/
font-weight:;
font-size:70%;
line-height:1.7; /*これで高さを決めています。3文字分*/
text-align:center; /*テキストをセンターに*/
background-color:#ffffff;
color:black;
border-right:solid white 20px; /*右側だけ白い線*/
border-left:solid white 20px; /*右側だけ白い線*/
text-decoration:none
}
#smp2 ul li a:hover {
text-decoration:underline
}
#smp3 ul {
margin-left:auto;
margin-right:auto;
margin-top:5%;
margin-bottom:5%;
padding:0;
}
#smp3 ul li {
float:left; /*左フロートさせます*/
width:23%; /*幅は親の25％*/
list-style-type:none; /*リストマーカーは無し*/
margin: 1%;
padding: ;
}
#smp3 ul li a {
display:block; /*テキスト以外もリンクとして反応するように*/
font-weight:bold;
font-size:70%;
line-height:3em; /*これで高さを決めています。3文字分*/
text-align:center; /*テキストをセンターに*/
background-color:#ffffff
color:black;
border-right:solid white 1px; /*右側だけ白い線*/
text-decoration:none
}
#smp3 ul li a:hover {
text-decoration:underline
}
.nav-list {
line-height: 50px;
list-style: none;
font-weight: bold;
}
.nav-list-item {
list-style: none;
display: inline-block;
margin: 0 20px;
}
footer{
width: auto;
height: auto;
background-color: #98B6C5;
color: white;
text-align: center;
margin-left:auto;
margin-right:auto;
}
ul.footer-menu li {
display: inline;
}
.menu-btn {
position: fixed;
top: 10px;
right: 10px;
display: flex;
height: 60px;
width: 60px;
justify-content: center;
align-items: center;
z-index: 90;
background-color: #98B6C5;
}
.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
content: '';
display: block;
height: 3px;
width: 25px;
border-radius: 3px;
background-color: #ffffff;
position: absolute;
}
.menu-btn span:before {
bottom: 8px;
}
.menu-btn span:after {
top: 8px;
}
#menu-btn-check:checked ~ .menu-btn span {
background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
}
#menu-btn-check:checked ~ .menu-btn span::before {
bottom: 0;
transform: rotate(45deg);
}
#menu-btn-check:checked ~ .menu-btn span::after {
top: 0;
transform: rotate(-45deg);
}
#menu-btn-check {
display: none;
}
.menu-content {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 80;
background-color: #98B6C5;
}
.menu-content ul {
padding: 70px 10px 0;
}
.menu-content ul li {
border-bottom: solid 1px #ffffff;
list-style: none;
}
.menu-content ul li a {
display: block;
width: 100%;
font-size: 15px;
box-sizing: border-box;
color:#ffffff;
text-decoration: none;
padding: 9px 15px 10px 0;
position: relative;
}
.menu-content ul li a::before {
content: "";
width: 7px;
height: 7px;
border-top: solid 2px #ffffff;
border-right: solid 2px #ffffff;
transform: rotate(45deg);
position: absolute;
right: 11px;
top: 16px;
}
.menu-content {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 100%;/*leftの値を変更してメニューを画面外へ*/
z-index: 80;
background-color: #98B6C5;
transition: all 0.5s;/*アニメーション設定*/
}
#menu-btn-check:checked ~ .menu-content {
left: 0;/*メニューを画面内へ*/
}
.footer04 {
color: #FFFFFF;
background: #98B6C5;
text-align: center;
padding: 30px;
}
.footer04 a {
color: #FFFFFF;
text-decoration: none;
}
.footer04 a:hover {
text-decoration: underline;
}
.footer04 .menu {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.footer04 .menu li {
margin: 0;
padding: 0 10px;
border-right: 1px #FFFFFF solid;
}
.footer04 .menu li:last-child {
border: none;
}
.footer04 .copyright {
margin: 0;
padding: 20px 0 0 0;
}
@media only screen and (max-width: 599px) {
.footer04 .menu {
justify-content: flex-start;
}
.footer04 .menu li {
width: 50%;
box-sizing: border-box;
border: none;
}
.footer04 .menu li:nth-child(odd) {
border-right: 1px #FFFFFF solid;
}
}
.border-underline{
padding: 0px;
border-bottom: 2px solid #FFFFFF;
display: inline-block;
}
span.sample1 {font-size: 0.6em;
line-height: 1.7;
}
span.sample2 {font-size: 1.2em;
line-height: 1.7;
}
span.sample3 {font-family: HG創英角ﾎﾟｯﾌﾟ体;
font-size: 40px;
color: #E8E8E8; !important;
}
span.sample4 {font-family: HG創英角ﾎﾟｯﾌﾟ体;
font-size: 10px;
color: #C0C0C0; !important;
}
.br-sp {
display: none;
}
@media screen and (max-width: 1080px) {
.br-pc {
display: none;
}
.br-sp {
display: inline-block;
}
}