@charset "UTF-8";
.border{
    border: thin solid #40566a;
    margin-top: 15px;
    margin-bottom: 15px;
}

.blue {
    text-decoration: underline;
    color: blue;
}
.gallery{
    columns: 4;
    padding: 10px;
    margin: 10px;
}
.gallery.li{
    margin-bottom: 10px;
    list-style-type: none;
}

.gallery.image{
    width: 100vw;
    height: auto;
}

.gallery3{
    columns: 3;
    padding: 0 10px;
    margin: 10px;
    list-style-type: none;
}
.gallery3.li{
    margin-bottom: 10px;
    list-style: none;
}

.gallery3.image{
    width: 100%;
    height: auto;
}

html {
    font-size: 100%;
}
body {
    line-height: 1.7;
    background-color:whitesmoke;
    color: #40566a;
    margin: 0px;
}
.prec {
    margin:5px;
    flex-wrap: nowrap;
}
.table {
    margin: 5px;
}

.table table{
    border-collapse: collapse;
    border:1px solid #40566a;
    background-color: aliceblue;
}
.table th{
    padding: 10px;
    border-collapse: collapse;
    border:1px solid #40566a;
    background-color: #7ab977;
    color:white;
    font-size: small;
    text-align: center;
}
.table td{
    padding: 10px;
    border-collapse: collapse;
    border:1px solid #40566a;
    font-size: small;
    text-align: center;
}
.table a{
    text-decoration: none;
    color:#40566a;
}
.table a:hover{
    text-decoration: none;
    background-color:#7ab977;
    color: white;
}

.table1 {
    border-collapse: collapse;
    margin: 10px;
}
.table1 img{
    border-collapse: collapse;
    margin: 10px;
}

.table1 table{
    border-collapse: collapse;
    border:1px solid #40566a;
    background-color: aliceblue;
    margin: auto;
}
.table1 th{
    padding: 10px;
    border-collapse: collapse;
    border:1px solid #40566a;
    background-color: #7ab977;
    color:white;
    font-size: small;
    text-align: center;
}
.table1 td{
    padding: 10px;
    border-collapse: collapse;
    border:1px solid #40566a;
    font-size: small;
    text-align: center;
}
.table1 a{
    text-decoration: none;
    color:#40566a;
}
.table1 a:hover{
    text-decoration: none;
    background-color:#7ab977;
    color: white;
}

.head {
    padding-left:20px;
    padding-top:10px;
    padding-bottom:10px;
    text-align: left;
}
.head img {
    width: 240px;
}

.footer {
    width: 100%;
    height: 300px;
    background-color:whitesmoke;
    color: #40566a;
    margin: 0 auto;
}
.asas {
    width: 100%;
}
.asas ul li img{
    max-width: 100%;
}

/* -------------------------- */
/* ▼トップページの装飾 */
/* -------------------------- */
.top {
    text-align: center;
    margin-top:30px;
 }
.top h2 {
    margin: 30px;
    border-style:outset;
    background-color: aliceblue;
}

.title1 {
    text-align: center;
}
.title1 h1{
    margin: 30px;
}
.title1 h2{
    margin: 30px;
    border-style:outset;
    background-color:lightgoldenrodyellow;
}
.title1 p{
    font-size: normal;
}

/* -------------------------- */
/* ▼各ページの装飾 */
/* -------------------------- */
.title {
    display: flex;
    align-items: center;
}
.title h1{
    margin: 20px;
}
.title h2{
    margin: 20px;
}

 /* -------------------------- */
 /* ▼ヘッダー下のリンクの装飾 */
 /* -------------------------- */
 .header_link {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px;
}
.header_link p {
    font-size: small;
    text-decoration: none;
    color: #40566a;
}
.header_link a {
    font-size: small;
    text-decoration: none;
    color: #40566a;
}
.header_link a hover{
    font-size: small;
    text-decoration: none;
    background-color: #40566a;
    color: white;
}


 /* -------------------------- */
 /* ▼メインメニュー項目の装飾 */
 /* -------------------------- */
.index2 {
    margin:10px;
    max-width: 100%;
    text-align: left;
    font-size:medium;
}
.index2 h3 {
    list-style-type: none;
    font-weight: bold;
    border-bottom: solid;
    color: #40566a;
}
.index2 ul {
    margin-top: 10px;
    text-decoration: none;
    text-indent: 0.5rem;
    color: #40566a;
    background-color:white;
}
.index2 ul li {
    list-style-type: disc;
    list-style-position: inside;
    color: #40566a;
    background-color:white;
}
.index2 ul li a:hover {
    list-style-type: disc;
    list-style-position: inside;
    color:white;
    background-color: #40566a;
    font-size: medium;
}


.list {
    padding-top: 40px;
    padding-bottom: 40px;
    display: flex;
    justify-content: space-around;
}
.list a{
    text-decoration: underline;
}
.list a:hover{
    text-decoration: none;
    background-color: #40566a;
    color: white;
}
.temp {
    width: 60px;
}
.link3 {
    padding-left: 3rem;
    padding-bottom: 1rem;
    font-size: small;
    font-weight: bold;
}
.link3 a {
    text-decoration: underline;
}
.link3 a:hover {
    text-decoration: none;
}
.link1 {
    padding-left: 1rem;
    font-size: small;
    font-weight: bold;
}
.link1 a {
    text-decoration: underline;
}
.link1 a:hover {
    text-decoration: none;
}

.flex2 {
    display: flex;
    flex-wrap: nowrap;
    margin-top: 5px;
    margin-bottom: 1rem;
    justify-content: space-around;
    max-width: 100%;
}
.flex {
    display: flex;
    flex-wrap: wrap;
    margin-top: 5px;
    margin-bottom: 1rem;
}
.flex p {
    font-size: small;
    margin: 0px;
    padding: 0px;
}
.flex form {
    margin: 0px;
    padding: 0px;
}

.image a img {
    max-width: 100%;
}

.wrapper_s {
    width: auto;
    height: auto;
    max-width:100vw;
    margin-left: 10px;
    background-color:white;
}

.wrapper_s p {
    margin: 0px;
    padding: 2px;
    font-size: small;
    text-align: left;
}
.wrapper_s .right p {
    margin: 0px;
    padding: 2px;
    font-size: small;
    text-align: right;
}
.wrapper_s img {
    justify-content: center;
    max-width: 100%;
    margin:auto;
}

.wrapper {
    width: auto;
    height: auto;
    max-width:100vw;
    background-color:white;
}
.wrapper h1 {
    margin: 0px;
}

.wrapper p {
    margin: 0px;
    padding: 0px;
    font-size: small;
    text-align: left;
}
.wrapper h3 {
    color: #40566a;
    text-align: left;
    margin-top: 15px;
    margin-bottom: 8px;
    border-bottom: 3px ridge #40566a;
}

.wrapper a img {
    max-width: 100%;
}

.wrapper12 {
    width: 1400px;
    height: auto;
    max-width:100vw;
    margin: 0 auto;
    background-color:white;
}
.wrapper12 h1 {
    margin: 0px;
}
.wrapper12 p {
    margin: 0px;
    padding: 0px;
    font-size: small;
    text-align: left;
}
.wrapper12 h3 {
    color: #40566a;
    text-align: left;
    margin-top: 15px;
    margin-bottom: 8px;
    border-bottom: 3px ridge #40566a;
}

.wrapper12 a img {
    max-width: 100%;
}

.wrapper16 {
    width: 1600px;
    height: auto;
    max-width:100vw;
    margin: 0 auto;
    background-color:white;
}
.wrapper16 a img {
    max-width: 100%;
}

.wrapper2 {
    width: 1850px;
    max-width:100vw;
    margin: 0 auto;
    background-color:white;
}
.wrapper2 a img {
    max-width: 100%;
}

.wrapper3 {
    width: 1800px;
    max-width:100vw;
    margin: 0 auto;
    padding-top: 20px;
    padding-bottom: 20px;
    background-color:white;
    text-align: left;
}
.wrapper3 a img {
    max-width: 100%;
}
.wrapper4 {
    width: auto;
    max-width:100%;
    margin: 0 auto;
    background-color:white;
    text-align: center;
}
.wrapper4 p {
    margin: 0px;
    padding: 2px;
    font-size: small;
    text-align: center;
}
.wrapper4 a img {
    max-width: 100%;
}

.chart100 {
    width:1000px;
    max-width:100vw;
    margin: 0 auto;
}

.chart {
    width:800px;
    max-width:100vw;
    margin: 0 auto;
}

.chart14 {
    width:1400px;
    max-width:100vw;
    margin: 0 auto;
}

.chart2 {
    width:700px;
    max-width:100vw;
    margin: 0 auto;
}

.home1 {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    background-color:whitesmoke;
    
}

form {
    margin-top: 1rem;
    margin-bottom: 1rem;
    text-align: left;
    align-items: center;
    font-size: small;
}

.right form {
    align-items: center;
    font-size: small;
}

label {
    padding-left: 0.2rem;
    height: 25px;
    position: relative;
    z-index: 1;
}

select {
    /* 初期化 */
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    background: none;
    border-radius: 3px;
    border-style: solid;
    border-color: dimgray;
    border-width: 1px;
    color: #333;
    font-size: small;
    height: 100%;
    padding: 0 10px;
    background-color: white;
    text-align: left;
}

input {
    margin-left:0.5rem;
    margin-right:0.5rem;
    background-color:white;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    height: 25px;
    border-radius: 4px;
    border-style: solid;
    border-color: dimgray;
    border-width: 2px;
    z-index: 1;
    color: #333;
}

input:hover {
    background-color:lightgray;
    color: #333;
}

.site-header{
    background:whitesmoke;
    position:fixed;
    width: 100%;
}

.main_menu {
    display: flex;
    justify-content:flex-end;
}

.back1 {
    width: 90vw;
    margin-left: auto;
    margin-right: auto;
    background-color:white;
}
.nav-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: fixed;
    transform: rotate(270deg);
    transform-origin: 0 0;
    margin-left: 1rem;
    padding: 0.5rem;
    margin-top: 600px;
    background-color:#7ab977;
}

/*--画像1枚の横幅サイズを指定--*/
.twentytwenty01 {width: 100%;
}
.gsm {
    padding-left: 4%;
    padding-right: 4%;
}
.gfs {
    padding-left: 4%;
    padding-right: 4%;
}


.back {
    background-color:lightgray;
}

.yohaku {
    margin: 10px;
}
.yohaku2 {
    margin: 40px;
    max-width: 100%;
}
.yohaku3 {
    margin: 20px;
    max-width: 100%;
}

.cash {
    display: flex;
    justify-content: flex-end;
    font-size:x-small;
    color:darkslategray;
    height: 14px;
}

.new {
    background-color:whitesmoke;
    padding: 1%;
    margin:0%;
}
.before {
    background-color:lightgrey;
    padding:1%;
    margin:0%;
}

.upper {
    text-align: right;
    padding-right: 1%;
}
.upper a{
    font-size: large;
    font-weight: bold;
    text-decoration: none;
}
.upper a:hover{
    font-size: large;
    font-weight: bold;
    text-decoration: underline;
}

/* ▼メインメニュー表示 */
.main-nav {
    display: flex;
    flex-wrap: wrap;
    z-index: 999;
}

.chart h3 {
    color: #40566a;
    margin-top: 15px;
    margin-bottom: 8px;
    border-bottom: 3px ridge #40566a;
}
.chart14 h3 {
    color: #40566a;
    margin-top: 15px;
    margin-bottom: 8px;
    border-bottom: 3px ridge #40566a;
}

/* ▼地点リストは横並びに */
.container {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    background-color: white;
}
.container form{
    margin: 0px;
    padding: 0px;
}

.nowrap {
    display: flex;
    flex-wrap: nowrap;
    margin:5px;
    padding-left: 1em;
    align-items: flex-start;
}
.container2 {
    display: flex;
    flex-wrap: wrap;
    margin:5px;
    padding-left: 1em;
    align-items: flex-start;
}
.container2 p {
    font-size: small;

    margin: 2px;
}

.container3 {
    display: flex;
    justify-content: space-between;
    font-weight: bold;
}
.container4 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    text-align: center;
    background-color:white;
    margin-top:1rem;
    margin-bottom: 3rem;
}
.container5 {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    background-color: white;
}

.gfs_gsm {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    text-align: center;
    background-color:lightsteelblue;
}
.gfs_gsm img {
    max-width: 100%;
    background-color:lightsteelblue;
}
/*1か月予報　メイン・サイドバー*/
article {
    width:80%;
}

.contents {
    display:flex;
    justify-content:flex-start;
    margin-bottom: 20px;
}
/*1か月予報　メイン分割*/
.container5 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    padding:0.5%;
    gap:10px;
}
.container5 h4 {
    margin:0px;
    padding-left: 0px;
    padding-bottom: 3px;
}

/*1か月予報　説明文文字列*/
p.exp {
    font-size: small;
    padding-left: 0em;
    color: #40566a;
}
p.bold {
    font-size: small;
    font-weight: bold;
    padding-left: 0em;
}
/*1か月予報　図・説明文配置*/
.column1 {
    margin:1%;
    width:25%;
    max-width: 100%;
}
.column2 {
    margin:1%;
    width:25%;
    max-width: 100%;
}
.column3 {
    margin:1%;
    width:44%;
    max-width: 100%;
}
/*1か月予報　図・説明文配置*/
.column15 {
    width:15%;
    max-width: 100%;
}
.column20 {
    width: 280px;
    max-width: 100%;
}

.axjp {
    display: flex;
}
.column33 {
    margin:2px;
    width:25%;
    max-width: 100%;
    text-align: center;

}
.column33 img {
    max-width: 100%;
}

.column25 {
    width:30%;
    max-width: 100%;
}
.column45 {
    margin:1%;
    width:48%;
    max-width: 100%;
}
.column65 {
    width:65%;
    max-width: 100%;
    z-index: 999;
}
.column85 {
    margin-left: 3%;
    width:80%;
    max-width: 100%;
    z-index: 999;
}

.column80 {
    margin:1%;
    width:100%;
    max-width: 100%;
}

.kaisetsu td {
    text-align: left;
    
}
.yosou {
    text-align: left;
    font-size: small;
    background-color:lavender;
    margin: 3px;
    padding: 5px;
    margin-bottom: 15px;   
}
.jikkyo {
    text-align: left;
    font-size: small;
    background-color:lavenderblush;
    margin: 3px;
    padding: 5px;
    margin-bottom: 15px;   
}
.bold {
    text-align: left;
    font-size: small;
    font-weight: bold;
}
.kaisetsu {
    text-align: left;
    font-size: small;
    background-color:lavenderblush;
    margin: 3px;
    padding: 5px;
    margin-bottom: 15px; 
}


.list {
    font-size: small;
    margin-left: 2em;
}

.map ul {
    display: flex; 
    list-style-type: none; 
    justify-content: space-around;
    margin:15px;
}

.column {
    display: flex;
    margin-left: -10px; /* カラム間の隙間 */
}

.column__item {
    box-sizing: border-box;
    flex: 0 1 calc(100% / 3);
    padding: 10px;
    margin-left: 10px; /* カラム間の隙間 */
  }

.amedas {
    text-indent: 5em;
    font-size:small;
    color:darkslategray;    
}
.left {
    text-align: left;
    font-size: small;
    font-weight: bold;
    color:#40566a;
}
.right {
    text-align: right;
    font-size: small;
    padding-right: 1em;
    color:#3F51B5;
}
.chart .right {
    text-align: right;
    font-size: small;
    padding-left: 1em;
    padding-right: 1em;
    color:#40566a;
}
.chart .right a:hover{
    text-align: right;
    font-size: small;
    padding-left: 1em;
    padding-right: 1em;
    background-color: #40566a;
    color:white;
    text-decoration: none;
}
.chart14 .right {
    text-align: right;
    font-size: small;
    padding-left: 1em;
    padding-right: 1em;
    color:#40566a;
}
.chart14 .right a:hover{
    text-align: right;
    font-size: small;
    padding-left: 1em;
    padding-right: 1em;
    background-color: #40566a;
    color:white;
    text-decoration: none;
}

/* 文字色 */
.green {
    text-align: left;
    color:green;
    font-size:medium;
}
.red3 {
    text-align: left;
    color: orangered;
    font-size:medium;
}
.red {
    text-align: left;
    color: orangered;
    font-size: small;
}
.red2 {
    color: orangered;
    font-size: small;
    font-weight: bold;
}
.Video {
    text-align: center;
    max-width: 100%;
}

video {
    max-width: 100%;
}

.table2 {
    display: flex;
    flex-wrap: wrap;
}
    /* ▼地点リストの文字表示 */
.item {
    align-items: center;
    margin:4px;
}

.item a {
    padding-left: 0.5em;
    padding-right: 0.5em;
    padding-top: 2px;
    padding-bottom: 2px;
    color:#40566a;
}

.item a:hover {
    text-decoration:none;
    padding-left: 0.5em;
    padding-right: 0.5em;
    padding-top: 2px;
    padding-bottom: 2px;
    background-color:rgb(43,118,194);
    color:white;
}
/* ▼地点リストの文字表示 */
.item1 {
    font-size:small;
    align-items:center;
    padding-right: 1rem;
}
    
.item1 a {
    text-decoration:none;
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 5px;
    padding-bottom: 5px;
    background-color:whitesmoke;
    color:#40566a;
    border: whitesmoke;
}
    
.item1 a:hover {
    text-decoration:none;
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 5px;
    padding-bottom: 5px;
    background-color:#7ab977;
    color: white;
    border: whitesmoke;
}

.item2 {
    font-size:small;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    align-items: center;
    margin: 1%;
}

.item2 a {
    text-decoration:none;
    padding: auto;
    background-color:rgb(43,118,194); 
    color: white;
    border: whitesmoke;
}

.item2 a:hover {
    text-decoration:none;
    padding: auto;
    background-color:white;
    color: rgb(43,118,194);
    border: whitesmoke;
}

.item3 {
    font-size:small;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    align-items: center;
    margin: 2px;
}

.item3 p {
    text-decoration:none;
    padding: auto;
    background-color:white;
    color: rgb(43,118,194);
    border: whitesmoke;
}

.item3 p:hover {
    text-decoration:none;
    padding: auto;
    background-color:rgb(43,118,194); 
    color: white;
    border: whitesmoke;
}



/* ▼雨量の地域表示 */
.area {
    font-size: 16px;
    font-weight: bold;
    color: #40566a;
    padding-left: 1em;
}
.space1 {
    margin: 30px;
}
.space10 {
    margin: 10px;
}
.space30 {
    margin: 30px;
}
.space200 {
    margin: 200px;
}

.twoweek {
    display: flex;
    flex-wrap: wrap;
    margin:20px;
    justify-content: space-around;
}
.twoweek img {
    max-width: 40%;
}

.line {
    margin-top: 20px;
    margin-bottom: 20px;
    border-width: 1px;
    border-style: solid;
    border-color: slategray;
}

.line2 {
    margin-top: 30px;
    border-width: 1px;
    border-style: solid;
    border-color: slategray;
}

  /* ▼スライダー表示設定 */

   /* ▼GPVの注記設定 */
.small {
    font-size: small;
    color: #40566a;
    align-items: center;
    padding-left: 1rem;
}
.small2 {
    color: #40566a;
    padding: 3px;
    border-style: solid;
    border-color: lightslategray;
}

p.alart {
    color: red;
    font-size: small;
    font-weight: bold;
}

    /* ▼段落の共通設定 */
p {
    color: #40566a;
    margin-left: 1rem;
    margin-top: 2px;
    margin-bottom: 2px;
}

.CSVTable {
    font-size: small;
    font-weight: normal;
    text-align: left;
    vertical-align: top;
}

.container4 a {
    text-decoration: none;
  }


.ECMWF {
    margin:2%;
    text-align: center;
    max-width: 100%;
}

.GSM {
    margin-left:2%;
    text-align: center;
    max-width: 100%;
}

.center {
    text-align: center;
    max-width: 100vw;
    max-height: 100vh;
    margin-left:auto;
    margin-right:auto;
}
.center p {
    text-align: right;
}

.ecmwf {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap:10px;
    background-color: whitesmoke;
}
.ecmwf_1m {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding:5%;
    gap:10px;
    background-color: whitesmoke;
}
.ecmwf_1m p {
    font-size: small;
    text-align: left;
    font-weight: bold;
}
.ecmwf_1m1 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    padding:0.5%;
    gap:10px;
    background-color: whitesmoke;
}
.ecmwf_1m1 p {
    font-size: small;
    text-align: left;
    font-weight: bold;
}
.ecmwf_1m2 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    padding:0.5%;
    gap:10px;
    background-color: whitesmoke;
}
.ecmwf_1m2 p {
    font-weight: bold;
    font-size: small;
    text-align: left;
}
.comp2 {
    display: grid;
    grid-template-columns: 1fr 1fr;  
    text-align: center;
    margin-left:10px;
    margin-right:10px;
    padding:0.5%;
    gap:10px;
    background-color: white;
}
.comp2 img {
    text-align: center;
    max-width: 100%;
}
.comp3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;  
    margin:5px;
    background-color: white;
}
.comp3 img {
    text-align: center;
    max-width: 100%;
}
.comp3 p {
    font-size: normal;
    text-align: left;
    margin:5px;
}
.comp4 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;  
    text-align: center;
    margin-left:10px;
    margin-right:10px;
    gap:10px;
    background-color: white;
}
.comp4 p {
    padding-left:0.5rem;
    text-align: left;
    margin:0%;
}
.comp4 img {
    text-align: center;
    max-width: 100%;
}
.comp5 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;  
    text-align: center;
    margin-left:10px;
    margin-right:10px;
    padding:0.2%;
    gap:10px;
    background-color: white;
}
.comp5 p {
    padding-left:0.5rem;
    text-align: left;
    margin:0%;
}
.comp5 img {
    text-align: center;
    max-width: 100%;
}
.comp6 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    margin-left:10px;
    margin-right:10px;
    gap:10px;
    background-color: white;
}
.comp6 p {
    text-align: left;
    font-size: small;
    margin:1px;
}
.comp6 img {
    text-align: center;
    max-width: 100%;
}

.comp8 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;  
    text-align: center;
    margin-left:10px;
    margin-right:10px;
    padding:0.5%;
    gap:10px;
    background-color: white;
}
.comp8 img {
    text-align: center;
    max-width: 100%;
}


/* -------------------- */
/* ▼メニューバーの装飾 */
/* -------------------- */
ul.ddmenu {
    margin: 0 auto;               /* メニューバー外側の余白(ゼロ) */
    text-align: center;
    /*padding: 0px 0px 0px 15px; /* メニューバー内側の余白(左に15px) */
    background-color:rgb(43,118,194) /* バーの背景色(濃い赤色) */
 }
 
 /* -------------------------- */
 /* ▼メインメニュー項目の装飾 */
 /* -------------------------- */
 ul.ddmenu li {
    width: 125px;           /* メニュー項目の横幅(125px) */
    display: inline-block;  /* ★1:横並びに配置する */
    list-style-type: none;  /* ★2:リストの先頭記号を消す */
    position: relative;     /* ★3:サブメニュー表示の基準位置にする */
    justify-content: center;
 }
 ul.ddmenu a {
    background-color:rgb(43,118,194); /* メニュー項目の背景色(濃い赤色) */
    color:white;              /* メニュー項目の文字色(白色) */
    line-height: 40px;         /* メニュー項目のリンクの高さ(40px) */
    text-align: center;        /* メインメニューの文字列の配置(中央寄せ) */
    text-decoration: none;     /* メニュー項目の装飾(下線を消す) */
    font-weight: bold;         /* 太字にする */
    font-size:medium;         
    display: block;            /* ★4:項目内全域をリンク可能にする */
 }
 ul.ddmenu a:hover {
    background-color:whitesmoke; /* メニュー項目にマウスが載ったときの背景色(淡いピンク) */
    color:rgb(43,118,194)            /* メニュー項目にマウスが載ったときの文字色(濃い赤色) */
 }
 
 /* ▼サブメニューは、とりあえず非表示にしておく */
 ul.ddmenu ul {
    display: none;         /* ★5:非表示にする */
 }
 /* -------------------- */
/* ▼サブメニューの装飾 */
/* -------------------- */
ul.ddmenu ul {
    display: none;       /* ★1:標準では非表示にする */
    margin: 0px;         /* ★2:サブメニュー外側の余白(ゼロ) */
    padding: 0px;        /* ★3:サブメニュー内側の余白(ゼロ) */
    position: absolute;  /* ★4:絶対配置にする */
 }
 
 /* ---------------------------------- */
 /* ▼サブメニューがある場合に開く処理 */   /* ※サブメニューが1階層しか存在しない場合の記述 */
 /* ---------------------------------- */
 ul.ddmenu li:hover ul {
    display: block;      /* ★5:マウスポインタが載っている項目の内部にあるリストを表示する */
    z-index: 998;
 }

/* -------------------- */
/* ▼サイドメニューバーの装飾 */
/* -------------------- */
.sub_menu {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}
/* -------------------- */
/* ▼メニューバーの装飾 */
/* -------------------- */
ul.sdmenu {
    margin: 0px;               /* メニューバー外側の余白(ゼロ) */
    /*padding: 0px 0px 0px 15px; /* メニューバー内側の余白(左に15px) */
    background-color:gray; /* バーの背景色(濃い赤色) */
 }
 
 /* -------------------------- */
 /* ▼メインメニュー項目の装飾 */
 /* -------------------------- */
 ul.sdmenu li {
    width: 125px;           /* メニュー項目の横幅(125px) */
    display: inline-block;  /* ★1:横並びに配置する */
    list-style-type: none;  /* ★2:リストの先頭記号を消す */
    position: relative;     /* ★3:サブメニュー表示の基準位置にする */
    justify-content: center;
 }
 ul.sdmenu a {
    background-color:rgb(43,118,194); /* メニュー項目の背景色(濃い赤色) */
    color:white;              /* メニュー項目の文字色(白色) */
    line-height: 30px;         /* メニュー項目のリンクの高さ(40px) */
    text-align: center;        /* メインメニューの文字列の配置(中央寄せ) */
    text-decoration: none;     /* メニュー項目の装飾(下線を消す) */
    font-size: small;         
    display: block;            /* ★4:項目内全域をリンク可能にする */
 }
 ul.sdmenu a:hover {
    background-color:whitesmoke; /* メニュー項目にマウスが載ったときの背景色(淡いピンク) */
    color:rgb(43,118,194);            /* メニュー項目にマウスが載ったときの文字色(濃い赤色) */
 }
 
 /* ▼サブメニューは、とりあえず非表示にしておく */
 ul.sdmenu ul {
    display: none;         /* ★5:非表示にする */
 }
 /* -------------------- */
/* ▼サブメニューの装飾 */
/* -------------------- */
ul.sdmenu ul {
    display: none;       /* ★1:標準では非表示にする */
    margin: 0px;         /* ★2:サブメニュー外側の余白(ゼロ) */
    padding: 0px;        /* ★3:サブメニュー内側の余白(ゼロ) */
    position: absolute;  /* ★4:絶対配置にする */
 }
 
 /* ---------------------------------- */
 /* ▼サブメニューがある場合に開く処理 */   /* ※サブメニューが1階層しか存在しない場合の記述 */
 /* ---------------------------------- */
 ul.sdmenu li:hover ul {
    display: block;      /* ★5:マウスポインタが載っている項目の内部にあるリストを表示する */
 }

.img__inner {
    max-width: 100%;
    margin: 0 auto;
  }
.slick-list {
    text-align: center;
}

#sample-img {
    margin-top: 15px;
    max-width: 100%;
    height: auto;
  }
  
  .arrow {
    position: relative;
    top: 0;
    display: inline-block;
    padding: 0 0 0 16px;
    color:black;
    vertical-align: middle;
    font-size: 10px;
  }
  
  .arrow-left {
    height: 20px;
    float: left;
    top: 0px;
    left: 0px;
  }
  
  .arrow-right {
    height:20px;
    float: right;
    top: 0px;
    right: 0px;
  }
  
  .arrow::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    content: "";
    vertical-align: middle;
  }
  
  .arrow-left::before, .arrow-right::before {
    left: 0px;
    top: 0px;
    width: 10px;
    height: 10px;
    opacity: 0.65;
  }
  
  .arrow-left::before{
    margin-left: 28px;
    border-top: 2px solid #3F51B5;
    border-left: 2px solid #3F51B5;
    -webkit-transform: rotate(315deg);
    transform: rotate(315deg);
  }
  
  .arrow-right::before{
    margin-left: -28px;
    border-top: 2px solid #3F51B5;
    border-right: 2px solid #3F51B5;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }

  .swiper main-slider {
     height: 100vh;
     order:1;
  }
  .swiper main-slider > img {
     object-fit: cover; /* IE: not support */
     width: 100vw;
     height: 100vh;
  }

  * {
    box-sizing: border-box;
  }
  .swiper-slide img {
    max-width: 100%;
  }
  /* サムネイルでアクティブなものには枠線を表示 */
  .thumbs-slider .swiper-slide-thumb-active img {
    border: 4px solid #F6B5B6;
  }
  /* アクティブでないサムネイル */
  .thumbs-slider .swiper-slide {
    opacity: 0.8;
  }
  /* アクティブなサムネイル */
  .thumbs-slider .swiper-slide-thumb-active {
    opacity: 1;
  }
  .swiper-pagination-bullet-active {
    opacity: 1;
    background: #fff;
  }