^\@charset 'UTF-8';

/*
GENERAL STYLING
================================================ */
html {
    font-size: 100%;
}
/*
body {
    color: #033146;
    font-family: 'Sawarabi Mincho', sans-serif;
    background:#fffef8;
}
*/

body {
    color: #033146;
    font-family: 'Rubik', 'Noto Sans JP', sans-serif;
    background:#fffef8;
}
body::-webkit-scrollbar {
  display: none;
}

/*
COMMON
================================================ */
p,
td {
    line-height: 1.7;
}

/* Layout */
.wrapper {
    max-width: 1600px;
    width: 100%;
    margin: 0 auto;
    padding: 0 1rem;
}

.title {
    
    font-size: 1.2rem;
    line-height: 1.2;
    color:#033146;
    font-weight:bold;
}

.title a:hover{
    color:orange;
    font-weight:bold;
}
/*
.title::after {
    content: '';
    display: block;
    height: 10px;
    width:20rem ;
    background: #F5a22f;
    margin: 1rem 0 1.5rem;
}
*/

.title-mu {
    
    font-size: 1.2rem;
    line-height: 1.2;
    color:#033146;
    font-weight:bold;
}

.title-mu a:hover{
    color:orange;
    font-weight:bold;
}
.title h2{
    text-align:center;
}

/*
.title-mu::after {
    content: '';
    display: block;
    height: 10px;
    width: 20rem;
    background: #196989;
    margin: 1rem 0 1.5rem;
}
*/

#regist-ex p{    
    font-size: 0.9rem;
    line-height: 1.8;
    color:#033146;
    padding-top:20px;
    
}
.process {
    padding-top:15px;
    text-align:center;    
    font-size: 1.5rem;
    line-height: 1.5;
}
/*
HEADER
================================================ */

header {
  position: fixed;
  width:100vw;
  top: 0;
  z-index: 10000;
  
}
  .nav-top {
    /*background:linear-gradient(-90deg,#fff,#57a7bc,#fff);*/
    padding-bottom:10px ;    
    text-align: ;
    background-color:#57a7bc;
}


.main-nav {
    display: flex;
    justify-content:space-around;
    padding:10px;
    text-align:center ;
}


.main-nav li {
    text-align: center;
    font-size: 0.8rem;
}
/*
img.logo {
    display:block;
    width: 10.0rem;
    padding-left:20px;
    margin-left:auto;
    margin-right:auto;
      
}
*/
p.logo {
    
    text-align:center;
}
img.logo-img{
    width:10rem;
}
.main-nav a {
    display: ;
    padding: .2rem;
    width: 4rem;
    color:#033146;
    
}

 .main-nav a:hover{
    border-bottom: 2px solid #2d3374;
    padding-bottom: .5rem;
    background: none;
    }
/*
.main-nav a::before {
    display: block;
    margin-bottom: .25rem;
Font Awesome
    font-family: 'Font Awesome 5 Pro';
    font-weight: 900;
    color: #555;
    font-size: 1.25rem;
}*/

/*top visual aitec*/
.topvisual_image {
	margin-left:5vw;
        
}
.topvisual_image img {
        max-width: none;
	width: 90vw;
	max-height: auto;
	object-fit: cover;
	object-position:;
}
/*---------------------------*/
/*HEADER*/
.item-login p{
   
   margin-bottom:10px;
   font-size:1.2rem;
   color:#033146;      
}
.login-img1{
    width:350px;
    height:auto;
    padding-left:50px;
    padding-top:0px;
}
.login-img2{
    width:350px;
    height:auto;
    padding-left:40px;
    padding-top:0px;
}
.login-img3{
     width:360px;
    height:auto;
    padding-left:30px;
    padding-top:0px;
}
.login-img4{
     width:300px;
    height:auto;
    padding-left:50px;
    padding-top:;
}

img.menu-logo {
   width:40px;
   padding-bottom:5px;
   padding-right:10px;
}


.home-content {
     margin-top:50px;  
    text-transform: none; 
    text-align: center;
    margin-top:50px;   
    font-weight: normal; 
    
}

.home-content h2{
    margin-top:20px;
    padding-top:20px;
    font-size: 1.8rem;
    line-height:1.5;
    color:#033146;    
}

.home-content h3{
    font-size: 1.0rem;
    line-height:1.5; 
    color:#033146;   
}
.home-content p{
    font-size: .1.2rem;
    line-height:1.8;
    color:#033146;
}


.big-bg {    
    background-image:url(../images/line3.png);
    background-position:center;
    background-repeat:none;
    background-size:cover;
    /*height:40vh;*/
　　width:;　
    margin-top:50px;
    margin-bottom:px;
}

.welcome {
    background-color:yellow;
}
.peinture-concept {
   
   line-height:1.2;
   margin-top:;
   margin-bottom:10px;
}

.peinture-concept h2 {
   padding-top:10px;
   text-align:center;
   font-size:1.0rem;
   color:#033146;
}
.peinture-concept h3{
   text-align:center;
   font-size:1.1rem;
   padding-bottom:15px;
}


.concept-login{   
   /*background:linear-gradient(-90deg,#fff,#57a7bc,#fff);*/
   margin-top:;
   margin-bottom:;
   height:50px;
   padding-bottom:;
   padding-top:20px;
   background-color:#57a7bc;
}
.concept{
   background-color:#57a7bc ;
   margin-top:;
   margin-bottom:10px;
   height:;
}

.concept-item1 h1{
    text-align:center;
    font-size:1.2rem;
    color:#033146;
    line-height:0.1;
    padding-top:10px;
    padding-bottom:40px;
}
.concept-item1 h2{
    text-align:center;
    font-size:1.0rem;
    color:#fff;
    line-height:1.6;
    
}
#item1-s {
    font-size:1.2rem;
    font-weight:bold;
}
.concept-item3{
    text-align:center;
    width:350px;
    padding-top:10px; 
    padding-bottom:15px;
}
.concept-item2{
    text-align:center;
    width:320px;
    padding-bottom:15px;
    padding-left:10px;
}

.concept-itemt{
    text-align:center;
    font-size:1.2rem;
    color:#fff;
    line-height:2.0;
    
}


.gridl {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(1, 1fr);  
  margin-top: ;
  margin-bottom: 50px;
}

.regi{
   text-align:center;
   font-size: 1rem;
   
   line-height:1.1;
   font-weight: normal;
   margin-top:15px;
}
.regi a:hover{
   color:yellow;
}

/* Contents */
.brown-bg {
    background: #fffef8;
}
.brown-bg-login{
    /*background:linear-gradient(-90deg,#fff,#57a7bc,#fff);*/
    background-color:#57a7bc;
}
.museum-bg{
    background: #fffef8;
}


.home-text {
    margin-bottom: 1rem;
    padding-top:50px;
  
}
.home-text p {
    font-size:0.9rem;
}


/*regist*/
#regist {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin:5px;
    padding: 6px;
    font-size:12px;
}
#regist a:hover{
    color:yellow;
}
 
#regist-box{
    border-width:1px;
    background:gray;
    padding:5px ;
    margin-top:20px;
    color:white;
    text-align:center; 
      
}

#menb {  
    display: flex;
    justify-content: space-around;
    align-items: center;  
    margin:20px;
    padding: 6px;
    font-size:15px
}
#menb a:hover{
    color:yellow;
}
.home-chart {
    margin-left: ;
}
.home-chart img {
    width: ;
}
.itemp-line {
   width:;  
}
.itemp p{
  font-size:0.8rem;
}

.itemp-line p{
  width:375px;
  height:auto;
  color:♯033146;
  font-size:0.9rem; 
  margin-bottom:20px;
}
img.img-size1{
   width:380px;
   height:auto;   
   padding-top:10px; 
   padding-bottom:10px;
   padding-left:32px;
   padding-right:32px; 
}

img.img-size2{
   width:380px;
   height:auto;
   
   padding-top:10px; 
   padding-bottom:10px;
   padding-left:32px; 
   padding-right:32px;
}
img.img-size3{
    width:380px;
   height:auto;   
   padding-top:10px; 
   padding-bottom:10px;
   padding-left:32px; 
   padding-right:32px;
}

img.img-size4{
   width:300px;
   height:auto;
   object-fit:grid;
   padding-top:0px; 
   padding-left:80px;
}

img.img-size5{
   width:300px;
   height:auto;
   object-fit:grid;
   padding-top:0px; 
   padding-left:80px;
}
img.img-size6{
   width:300px;
   height:auto;
   object-fit:grid;
   padding-top:0px; 
   padding-left:80px;
}
img.img-size7{
   width:350px;
   height:auto;
   
   padding-top:20px; 
   padding-left:;
}

#museum-list {       
       background:#4586C7;
       padding:10px ;
       margin-top:20px;
       color:#fff; 
       font-size:1.0rem; 
       text-align:center;  
}

#next-service {
       background: #4586c7;
       padding:10px 20px 10px 20px;
       margin-top:20px;
       color:#fff; 
       font-size:0.9rem; 
       text-align:center;  
}
.back-history {
    padding-top:20px;
    padding-left:20px;
    padding-bottom:50px;
}
.back-history h2 {
    font-size:1.2rem;
}

.back-history h3 {
    font-size:1.2rem;
}
.back-history p {
    font-size:1.1rem;
}   

/*
FOOTER
================================================ */
footer {
   /*background:linear-gradient(-90deg,#fff,#57a7bc,#fff); */   
    padding: 3.5rem 1rem;
    text-align: center;
   background-color:#57a7bc;
}
footer .btn {
    margin-bottom: 3.5rem;
}
.footer-nav li {
    margin: 1rem 0;
    color:#033146;
}
.footer-nav a:hover {
    color: #fff;
}
img.footer-logo{
      width:150px;
     }
.copyright {
  font-size:0.8rem;
}
 .trm {
     resize:;
     width: 300px;
     height: 600px;
     background-color: #fff;
     margin:25px;
     font-size: 0.9rem;
     border:solid 1px;
     } 
/*about*/ 


.history {
   background-color:#57a7bc;
   color:#fff;
   padding-top:20px;
   padding-bottom:40px;
   text-align:center;
}

.history h2 {
    font-size:1.2rem;
}


.intro {
    font-size:1.0rem;
    padding:10px;
    text-align:center;
    font-weight:normal;
}
.history li{
    font-size:1.6rem;
    margin-left:40px;
}

.history ul {
    list-style-position:inside;
    list-style-type:square;
}

.mem-photo {
    width:130px;
    padding:;
    text-align:center;
     border-radius:50%;
}

.mem-message {
     padding:15px;

}

.mem-all {
   display: grid;
  grid-template-columns: repeat(1, 1fr);
}

.mem-message {
     padding:10px;
}
.mem-message p {
     font-size:0.8rem;
     line-height:1.3;
}

/*museum*/
hr {
   width:auto;
   height:20px;
   background: linear-gradient(#57a7bc,#fff);
   border-top:#fff;

}
hr.last {
   width:auto;
   height:20px;
   background: linear-gradient(#fff,#57a7bc);
   border-top:#fff;
}


/*about*/

/*
DESKTOP SIZE
================================================ */
@media (min-width: 768px) {
/* Common */
body::-webkit-scrollbar {
  display: none;
}
.title {
    font-size: 1.875rem;
}


.topvisual_image {
	margin-left:;
        margin-top:10vh;
}
.topvisual_image img {
        max-width: none;
	width:90vw;
        /*padding-right:10vw; */      
	max-height:auto;
	object-fit:cover ;
	object-position:absolute;
}

/* */
.home-content {
    
    line-height:1.3;
    text-transform: none; 
    text-align: center; 
    margin-top:;  
    font-weight: normal;    
}

.home-content h2{
    font-size: 6rem;
    line-height:7.0rem;
    color:#033146;
    padding-top:100px;
    padding-bottom:20px;
}
/*つかみのデザイン*/
.home-content h3{
    font-size: 2rem;
    line-height:1.5;
    color:#033146;
    padding-top:20px;
}


.home-content p{
    font-size: 2.5rem;
    line-height:1.8;
    color:#033146;
    padding-top:30px;
}

.big-bg {    
    background-image:url(../images/line3.png);
    background-position:center;
    background-repeat:none;
    background-size:cover;
    width:auto;
    height:auto;
    margin-top:;
    margin-bottom:0px;
}

.peinture-concept {
   display: flex;
   justify-content: flex-start;
   /*align-items: center;*/
   /*padding: 1rem 10rem 1rem 0rem ;*/
   line-height:1.4;
   /*text-align: center; */ 
   padding-top:60px; 
   padding-left:0px;
   padding-bottom:0px;
   margin-bottom:20px;  
}


.gridl {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(2, 1fr);  
  margin-top:;
  margin-bottom: 50px; 
  padding-left:280px;

}

.item-login p{
   margin-bottom:10px;
   font-size:2.2rem;
   color:#033146;      
}
img.menu-logo {
   width:60px;
   padding-bottom:;
   padding-right:10px;
}

.concept{
  background-color:#57a7bc;
  height:auto;
   margin-top:;
   margin-bottom:10px;
  /*background:linear-gradient(-90deg,#fff,#57a7bc,#fff);*/
}


.concept-login{   
   margin-bottom:10px;
   height:120px;   
}
.concept-itemt{
    text-align:;
    font-size:2.5rem;
    color:#fff;
    line-height:4.0;
}
.concept-item1{
    padding-left:;
    padding-right:;
    padding-top:30px;
}

.concept-item1 h2{
    text-align:center;
    font-size:1.8rem;
    color:#fff;
    line-height:1.6;
    width:800px;
}
.concept-item1 h1{
    text-align:center;
    font-size:2.8rem;
    color:#033146;
    line-height:1.0;
    
}
.concept-item2{
    text-align:center;
    width:700px;
    padding-top:50px;
    padding-left:;
}
.concept-item3{
    text-align:;
    width:600px;
　　padding-top:230px;
    padding-bottom:30px;
}


#item1-s{
    font-size:2.2rem;
}

.title {
    font-size: 2.0rem;
    line-height: 1.5;
}

.title::after {
    height: 10px;
    width: 30rem;
}
.title-mu {
    
    font-size: 1.5rem;
    line-height: 1.5;    
}
/*
.title-mu::after {
    height: 10px;
    width: 30rem;
}
*/
#regist-ex p{
    font-size: 2.0rem;
    line-height: 2.5;
    padding-left:50px; 
    padding-top:30px;   
}


/*登録系*/
#regist {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin:20px;
    padding: 1rem;
    font-size:1.8rem;
}
#regist a:hover{
    color:yellow;
}
 
#regist-box{
    border-width:1px;
    background:gray;
    padding:10px 30px 10px 30px;
    margin-top:20px;
    color:white;    
}

#menb {    
    margin:20px;
    padding: 1rem;
    font-size:1.8rem
}
#menb a:hover{
    color:yellow;
}

.process {
    padding-top:30px;
    text-align:center;    
    font-size: 3.0rem;
    line-height: 1.5;
}
/* Header */
header {
  position: fixed;
  width:100% ;
  top: 0;
  z-index: 10000;
  
}

img.logo-img {   
    width: 30.0rem;
    /*padding-left:20px;*/
}   
   
   .nav-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left:100px;
    padding-right:100px;
    /*background:linear-gradient(-90deg,#fff,#57a7bc,#fff);*/
    background-color:#57a7bc;
}
    .main-nav {
    display: flex;
}

    .main-nav li {
        margin-left: 1.5rem;
        
        font-size: 1.5rem;
        color:#033146;
    }
    .main-nav a {
        width: auto;
    }
    .main-nav a:hover,
    .main-nav .current {
        border-bottom: 2px solid #2d3374;
        padding-bottom: .5rem;
        background: none;
    }
    .main-nav a::before {
        content: '';
    }

    /* Contents */

.content {
      display: flex;
      justify-content: flex-start;
      align-items: ; 
      margin-bottom:100px;     
}
.login-img1{
    width:700px;
    height:auto;
    padding-left:90px;
    padding-top:50px;
}
.login-img2{
    width:580px;
    height:auto;
    padding-left:60px;
    padding-top:50px;
}
.login-img3{
     width:580px;
    height:auto;
    padding-left:60px;
    padding-top:50px;
}
.login-img4{
     width:400px;
    height:auto;
    padding-left:150px;
    padding-top:20px;
}
.flex-reverse {
       flex-direction: row-reverse;
}
.brown-bg {
    background: #fffef8;
}
.brown-bg-login{
    /*background:linear-gradient(-90deg,#fff,#4586c7,#fff);*/
    background-color:#57a7bc;
}
.museum-bg{
    background: #fffef8;
}
.home-text {
     width: 800px;
     margin-bottom: 180px;
}
.home-text p{
     font-size:1.5rem;
}
.home-text a:hover{
     color:blue;
}
.home-chart {
        width: 550px;
}
#project {
       padding-top:10px;
       padding-bottom:20px;
}

#museum-list{
       padding:;
       font-size:2.0rem; 
       background:;
       width:auto;
}


#next-service {
       background: #4586c7;
       border-top:#fff; 
       border-width:1px;
       padding:10px 30px 10px 30px;
       margin-top:20px;
       color:#fff; 
       font-size:1.7rem; 
       text-align:center;  
}
.gridp {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(350px,1fr));
  margin-bottom: 50px;
  margin-left:30px;
}
.grid-line {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: 50px;
  margin-left:15px;
}
.itemp {
   width:350px;  
}


.itemp p{
  width:350px;
  height:auto;
  color:♯f5a22f;
  font-size:1.7rem;
  
}
.itemp-line {
   width:550px; 
  
}
.itemp-line h2{
  width:450px;
  height:auto;
  color:♯033146;
  font-size:2.0rem;
  
}

.itemp-line p{
  width:450px;
  height:auto;
  color:♯033146;
  font-size:1.7rem; 
}
/*
.home-chart {
    width: 60vw;
}*/
img.img-size1{
   width:430px;
   height:auto;
   object-fit:grid;
   padding-top:45px; 
   padding-bottom:20px;
   padding-right:0px; 
   padding-left:0px;
}

img.img-size2{
   width:455px;
   height:auto;
   object-fit:grid;
   padding-top:45px; 
   padding-bottom:20px;
   padding-left:0px; 
}
img.img-size3{
    width:450px;
   height:auto;
   object-fit:grid;
   padding-top:5px; 
   padding-bottom:20px;
   padding-left:0px; 
}


img.img-size4{
   width:650px;
   height:auto;
   object-fit:grid;
   padding-top:50px; 
   padding-left:70px;
}
img.img-size5{
   width:850px;
   height:auto;
   object-fit:grid;
   padding-top:0px; 
   padding-right:100px;
}
img.img-size6{
   width:760px;
   height:auto;
   object-fit:grid;
   padding-top:20px; 
   padding-left:70px;
}
img.img-size7{
   width:1000px;
   height:auto;
   margin-left:60px;   
   padding-top:20px; 
   padding-left:70px;
}

/*about*/
.history {
   background-color:#57a7bc;
   color:#fff;
   padding-top:40px;
   padding-bottom:40px;
   text-align:center;
}

.history h2 {
    font-size:2.5rem;
}
.history p {
    font-size:1.6rem;
    
    line-height:2.0;
}

.intro {
    font-size:2.2rem;
    padding:20px;
    text-align:center;
    font-weight:normal;
}
.history li{
    font-size:1.6rem;
    margin-left:40px;
}

.history ul {
    list-style-position:inside;
    list-style-type:square;
}
.mem-photo {
    width:250px;
    padding:;
    text-align:center;
     border-radius:50%;
}

.mem-message {
     padding:15px;
}
.mem-all {
   display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.back-history {
    padding-top:50px;
    padding-left:40px;
    padding-bottom:50px;
}
.back-history h2 {
    font-size:3.0rem;
}

.back-history h3 {
    font-size:2.0rem;
}
.back-history p {
    font-size:1.4rem;
}   




/* Footer */

    .login-btn{
     font-size:2.4rem;
     color:#033146;
    }
    img.footer-logo{
      width:300px;
     }
     .login-btn a:hover{
      color:white;
     }
    .footer-nav {
        display: flex;
        justify-content: center;
    }
    .footer-nav li {
        margin: 3.0rem;
        font-size:2.0rem;
        color:#033146;
    }
    .footer-nav a:hover {
        color: #fff;
    }
   .copyright {
     font-size:2.0rem;
}
  .trm {
     resize:;
     width: 800px;
     height: 1800px;
     background-color: #fff;
     margin:25px;
     font-size: 0.9rem;
     border:solid 1px;
     } 

    .form-position{
     padding-left:70px;
     padding-top:20px;
     font-size:2.0rem;
     text-align:center;     
       }
    
/*museum*/
hr {  
   height:40px;   
}
hr.last {   
   height:40px;   
}

}