@charset "UTF-8";

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

スタイルシート横幅：1501px以上

========================================================================================================================================= */
@media screen and (min-width: 1501px){
#a11 {
    display: none;
}

#a98 {
    width: 100%;
    display: block;
    overflow: hidden;
    background-color: #ffffff;
    z-index: 5;
    position: fixed;
    opacity: 0;
    animation: Navi-fade 1.0s;
    animation-delay: 0.5s;
    animation-fill-mode: forwards;
}
@keyframes Navi-fade {
    0%{
        opacity: 0;
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }
    100%{
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}
#a98 #a99 {
    width: 100%;
    display: flex;
    padding: 0.5% 0;
}
#a98 #a99 #a104 {
    width: 30%;
}
#a98 #a99 #a104 #a106 {
    width: 100%;
}
#a98 #a99 #a104 #a106 #a107 {
    width: 60%;
    display: block;
    padding: 0 0 0 40%;
}
#a98 #a99 #a104 #a106 #a107 #a108 {
    width: 70%;
    padding: 0 30% 0 0;
}
#a98 #a99 #a105 {
    width: 70%;
}
#a98 #a99 #a100 {
    width: 80%;
    padding: 0 10%;
    display: flex;
}
#a98 #a99 #a101 {
    width: 14%;
    text-align: center;
    padding-top: 2.2%; 
}
#a98 #a99 #a101 .a106 {
    text-decoration: none;
    font-family: sans;
    color: #333333;
}
#a98 #a99 #a101 .a106:hover {
    color: #43c8ff;
    border-bottom: 2px solid;
    padding: 0 0 3% 0;
    animation: Btnhover 0.3s;
}
@keyframes Btnhover{
    0%{ color: #333333; }
    100%{ color: #43c8ff; border-bottom: 2px solid; }
}
#a98 #a99 #a102 {
    width: 20%;
    margin: 0 0 0 80%;
}
#a98 #a99 #a102 #a107 {
    width: 100%;
    display: block;
    padding: 7% 0;
    margin: 5% auto 0;
    background: -moz-linear-gradient(108deg, #43c8ff, #1e83ff); 
    background: -webkit-linear-gradient(108deg, #43c8ff, #1e83ff); 
    background: linear-gradient(108deg, #43c8ff, #1e83ff); 
    color: #ffffff;
    font-weight: bolder;
    border-radius: 5px;
    text-decoration: none;
    font-family: sans;
    color: #ffffff;
    font-size: 90%;
    text-align: center;
}   
#a98 #a99 #a102 #a107:hover {
    opacity: 0.8;
}
#a98 #a99 #a103 {
    width: 5%;
}
#a98 #a99 #a103 #a108 {
    width: 70%;
    display: block;
    margin: 30% auto 0;
}   
#a98 #a99 #a103 #a108:hover {
    opacity: 0.8;
}


}
/* =========================================================================================================================================

スタイルシート横幅：960px以上1500px未満

========================================================================================================================================= */
@media screen and (min-width: 960px) and (max-width: 1500px){


#a11 {
    display: none;
}
#a98 {
    width: 100%;
    display: block;
    overflow: hidden;
    background-color: #ffffff;
    z-index: 5;
    position: fixed;
    opacity: 0;
    animation: Navi-fade 1.0s;
    animation-delay: 0.5s;
    animation-fill-mode: forwards;
}
@keyframes Navi-fade {
    0%{
        opacity: 0;
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }
    100%{
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}
#a98 #a99 {
    width: 100%;
    display: flex;
    padding: 1.5% 0;
}
#a98 #a99 #a104 {
    width: 30%;
}
#a98 #a99 #a104 #a106 {
    width: 100%;
}
#a98 #a99 #a104 #a106 #a107 {
    width: 60%;
    display: block;
    padding: 0 0 0 40%;
}
#a98 #a99 #a104 #a106 #a107 #a108 {
    width: 70%;
    padding: 0 30% 0 0;
}
#a98 #a99 #a105 {
    width: 70%;
}
#a98 #a99 #a100 {
    width: 80%;
    padding: 0 10%;
    display: flex;
}
#a98 #a99 #a101 {
    width: 14%;
    text-align: center;
    padding-top: 2.2%; 
    font-size: 90%;
}
#a98 #a99 #a101 .a106 {
    text-decoration: none;
    font-family: sans;
    color: #333333;
}
#a98 #a99 #a101 .a106:hover {
    color: #43c8ff;
    border-bottom: 2px solid;
    padding: 0 0 3% 0;
    animation: Btnhover 0.3s;
}
@keyframes Btnhover{
    0%{ color: #333333; }
    100%{ color: #43c8ff; border-bottom: 2px solid; }
}
#a98 #a99 #a102 {
    width: 20%;
    margin: 0 0 0 80%;
}
#a98 #a99 #a102 #a107 {
    width: 140%;
    display: block;
    padding: 9% 0;
    margin: 5% auto 0;
    background: -moz-linear-gradient(108deg, #43c8ff, #1e83ff); 
    background: -webkit-linear-gradient(108deg, #43c8ff, #1e83ff); 
    background: linear-gradient(108deg, #43c8ff, #1e83ff); 
    color: #ffffff;
    font-weight: bolder;
    border-radius: 5px;
    text-decoration: none;
    font-family: sans;
    color: #ffffff;
    font-size: 90%;
    text-align: center;
}   
#a98 #a99 #a102 #a107:hover {
    opacity: 0.8;
}
#a98 #a99 #a103 {
    width: 5%;
}
#a98 #a99 #a103 #a108 {
    width: 70%;
    display: block;
    margin: 30% auto 0;
}   
#a98 #a99 #a103 #a108:hover {
    opacity: 0.8;
}


}
/* =========================================================================================================================================

スタイルシート横幅：600pxから959まで

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

@media screen and (min-width: 600px) and (max-width: 959px){
img{
    width: 100%;
    height: auto;
    width /***/:auto;　
}
#container{
    width:100%;
}
#a98 {
    display: none;
}
#a18 {
    width: 100%;
    display: block;
    z-index: 5;
    position: absolute;
    text-align: center;
    padding: 2% 0 0 0;
}
.a16 {
    width:65%;
    display: block;
    float: left;
}
.a16 a {
    width: 50%;
    display: block;
    float: right;
}
.a16 a img {
    display: none;
}
.a17 {
    width: 35%;
    display: block;
    float: left;
    margin: 1.1% 0 0 0;
}
.a17 a {
    width: 14%;
    display: inline-block;
    margin: 0 8%;
}
.a17 #a19 {
    width: 65%;
    margin: 0 0 0 35%;
}
.a17 #a19 a img {
    width: 100%;
}
#a18 a:hover{
    opacity: 0.7;
}
#a20 {
    display: none;
}
a,
a:visited,
a:hover,
a:active {
text-decoration: none;

}
.a12 {
position: fixed;
z-index: 5;
top: 0;
left: 0;
}
/*a15コンテンツ*/
.a12 .a15 {
position: fixed;
top: 0;
left: 0;
display: flex;
visibility: hidden;
overflow: hidden;
width: 100%;
height: 100%;
pointer-events: none;
outline: 1px solid transparent;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
align-items: center;
justify-content: center;
}
.a12 .a15 > div {
display: flex;
overflow: hidden;
width: 200vw;
height: 200vw;
transition: all 0.4s ease;
-webkit-transform: scale(0);
transform: scale(0);
text-align: center;
color: #fefefe;
border-radius: 50%;
background: rgba(0,176,236 ,0.8); /*メニュー開の背景色*/
flex: none;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
align-items: center;
justify-content: center;
}
.a12 .a15 > div > ul {
display: block;
max-height: 100vh;
margin: 0;
padding: 0 1em;
list-style: none;
transition: opacity 0.4s ease;
opacity: 0;
}
.a12 .a15 > div > ul > li {
font-size: 24px;
display: block;
margin: 1em;
padding: 0;
}
.a12 .a15 > div > ul > li > a {
position: relative;
display: inline;
cursor: pointer;
transition: color 0.4s ease;
}
.a12 .a15 > div > ul > li > a:hover {
color: #e5e5e5;
}
.a12 .a15 > div > ul > li > a:hover:after {
width: 100%;
}
.a12 .a15 > div > ul > li > a:after {
position: absolute;
z-index: 1;
bottom: -0.15em;
left: 0;
width: 0;
height: 2px;
content: '';
transition: width 0.4s ease;
background: #e5e5e5;
}
/*クリックしたらメニューが開閉の動作*/
.a12 .a13 {
position: absolute;
z-index: 2;
top: 0;
left: 0;
width: 70px;
height: 70px;
cursor: pointer;
opacity: 0;
}
.a12 .a13:checked + .a14 > span {
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
.a12 .a13:checked + .a14 > span:before,
.a12 .a13:checked + .a14 > span:after {
top: 0;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.a12 .a13:checked + .a14 > span:after {
opacity: 0;
}
.a12 .a13:checked ~ .a15 {
visibility: visible;
pointer-events: auto;
}
.a12 .a13:checked ~ .a15 > div {
transition-duration: 0.75s;
-webkit-transform: scale(1);
transform: scale(1);
}
.a12 .a13:checked ~ .a15 > div > ul {
opacity: 1;
}
.a12 .a13:checked ~ .a15 > div > ul li:nth-of-type(1) {
transition-delay: 0.4s;
}
.a12 .a13:checked ~ .a15 > div > ul li:nth-of-type(2) {
transition-delay: 0.6s;
}
.a12 .a13:checked ~ .a15 > div > ul li:nth-of-type(3) {
transition-delay: 0.8s;
}
.a12 .a13:checked ~ .a15 > div > ul li:nth-of-type(4) {
transition-delay: 1.0s;
}
.a12 .a13:hover + .a14 {
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1); /*メニュー閉の背景色*/
}
.a12 .a13:checked:hover + .a14 > span {
-webkit-transform: rotate(225deg);
transform: rotate(225deg);
}
/*ハンバーガー*/
.a12 .a14 {
position: absolute;
z-index: 1;
top: 0;
left: 0;
display: block;
width: 70px;
height: 70px;
padding: 0.5em 0.9em;
cursor: pointer;
transition: box-shadow 0.4s ease;
border-radius: 0 0.12em 0.12em 0;
background: rgba(0,176,236 ,1);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.a12 .a14 > span {
position: relative;
top: 50%;
display: block;
width: 100%;
height: 2px;
transition: all 0.4s ease;
background: #fefefe;
}
.a12 .a14 > span:before,
.a12 .a14 > span:after {
position: absolute;
z-index: 1;
top: -15px;
left: 0;
display: block;
width: 100%;
height: 2px;
content: '';
transition: all 0.4s ease;
background: inherit;
}
.a12 .a14 > span:after {
top: 15px;
}




}

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

スタイルシート横幅：599pxまで

========================================================================================================================================= */
@media only screen and (max-width:599px){
img{
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    width/***/:auto;
}
#container{
    width:100%;
}
#a98 {
    display: none;
}
#a18 {
    width: 100%;
    display: block;
    z-index: 5;
    position: absolute;
    text-align: center;
    padding: 5% 0 0 0;
}
.a16 {
    width:40%;
    display: inline-block;
    margin: 0 auto;
}
.a16 a {
    width: 100%;
    display: block;
}
.a16 a img {
    display: none;
}
.a17 {
    display: none;
}
#a18 a:hover{
    opacity: 0.7;
}
a,
a:visited,
a:hover,
a:active {
text-decoration: none;

}
.a12 {
position: fixed;
z-index: 5;
top: 0;
left: 0;
}
/*a15コンテンツ*/
.a12 .a15 {
position: fixed;
top: 0;
left: 0;
display: flex;
visibility: hidden;
overflow: hidden;
width: 100%;
height: 100%;
pointer-events: none;
outline: 1px solid transparent;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
align-items: center;
justify-content: center;
}
.a12 .a15 > div {
display: flex;
overflow: hidden;
width: 300vw;
height: 300vw;
transition: all 0.4s ease;
-webkit-transform: scale(0);
transform: scale(0);
text-align: center;
color: #fefefe;
border-radius: 50%;
background: rgba(0,176,236 ,0.7);/*メニュー開の背景色*/
flex: none;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
align-items: center;
justify-content: center;
}
.a12 .a15 > div > ul {
display: block;
max-height: 100vh;
margin: 0;
padding: 0 1em;
list-style: none;
transition: opacity 0.4s ease;
opacity: 0;
}
.a12 .a15 > div > ul > li {
font-size: 24px;
display: block;
margin: 1em;
padding: 0;
}
.a12 .a15 > div > ul > li > a {
position: relative;
display: inline;
cursor: pointer;
transition: color 0.4s ease;
color: #ffffff;
}
.a12 .a15 > div > ul > li > a:hover {
color: #e5e5e5;
}
.a12 .a15 > div > ul > li > a:hover:after {
width: 100%;
}
.a12 .a15 > div > ul > li > a:after {
position: absolute;
z-index: 1;
bottom: -0.15em;
left: 0;
width: 0;
height: 2px;
content: '';
transition: width 0.4s ease;
background: #e5e5e5;
}
/*クリックしたらメニューが開閉の動作*/
.a12 .a13 {
position: absolute;
z-index: 2;
top: 0;
left: 0;
width: 70px;
height: 70px;
cursor: pointer;
opacity: 0;
}
.a12 .a13:checked + .a14 > span {
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
.a12 .a13:checked + .a14 > span:before,
.a12 .a13:checked + .a14 > span:after {
top: 0;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.a12 .a13:checked + .a14 > span:after {
opacity: 0;
}
.a12 .a13:checked ~ .a15 {
visibility: visible;
pointer-events: auto;
}
.a12 .a13:checked ~ .a15 > div {
transition-duration: 1.5s;
-webkit-transform: scale(1);
transform: scale(1);
}
.a12 .a13:checked ~ .a15 > div > ul {
opacity: 1;
}
.a12 .a13:checked ~ .a15 > div > ul li:nth-of-type(1) {
transition-delay: 0.4s;
}
.a12 .a13:checked ~ .a15 > div > ul li:nth-of-type(2) {
transition-delay: 0.6s;
}
.a12 .a13:checked ~ .a15 > div > ul li:nth-of-type(3) {
transition-delay: 0.8s;
}
.a12 .a13:checked ~ .a15 > div > ul li:nth-of-type(4) {
transition-delay: 1.0s;
}
.a12 .a13:checked ~ .a15 > div > ul li:nth-of-type(5) {
transition-delay: 1.2s;
}
.a12 .a13:checked ~ .a15 > div > ul li:nth-of-type(6) {
transition-delay: 1.4s;
}
.a12 .a13:hover + .a14 {
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1); /*メニュー閉の背景色*/
}
.a12 .a13:checked:hover + .a14 > span {
-webkit-transform: rotate(225deg);
transform: rotate(225deg);
}
/*ハンバーガー*/
.a12 .a14 {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    display: block;
    width: 35px;
    height: 50px;
    padding: 0.5em 1.0em;
    cursor: pointer;
    transition: box-shadow 0.4s ease;
    border-radius: 0 0.12em 0.12em 0;
    background: rgba(0,176,236 ,1);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.a12 .a14 > span {
position: relative;
top: 50%;
display: block;
width: 100%;
height: 2px;
transition: all 0.4s ease;
background: #fefefe;
}
.a12 .a14 > span:before,
.a12 .a14 > span:after {
position: absolute;
z-index: 1;
top: -14px;
left: 0;
display: block;
width: 100%;
height: 2px;
content: '';
transition: all 0.4s ease;
background: inherit;
}
.a12 .a14 > span:after {
top: 14px;
}

#a20 {
    width: 50%;
    display: block;
    float: left;
    margin: 3% 0 0;
}
#a20 a {
    width: 50%;
    display: block;
    margin: 0 auto;
}




}