@charset"UTF-8";

/* 共通 */
html {font-size: 100% ;}
body {font-family: Tahoma, "ヒラギノ角ゴシック",  "Hiragino Sans", sans-serif ;
         line-hight: 1.7; color: navy; background-color: #fff ;}

/* HEADER */
.container { display: flex; align-items:flex-end;  }
.logo {height: 100px; margin-top: 1px ; margin-left: 10px; }
.main-nav {display: flex; width: 500px; justify-content: space-around; }
.main-nav a { color:#2E2F3B; }
.main-nav a:hover { color: #eed13f; }
.item { font-size: 0.8rem; text-transform: uppercase ; list-style: none ; }
.button { font-size: 0.8rem; background: #5B5C76; padding: 5px 5px; color: #FFFFFF; margin: 20px 0 0 20px; border-style: ridge; }


/* Top page*/
#toppage { background: #555; height: 660px; display: flex; flex-direction: column; margin: 20px 0 0 0; }
.message { color:#fff; font-family:"Times New Roman", "ヒラギノ明朝Pro", "Hiragino Mincho Pro"; 
                font-size: 18px; margin: 10px; text-align: center; }
.container-vi { margin: 1px; display: flex; flex-direction: row; justify-content: space-around; }
.visionary-en {height: 400px; }
.visualized-en {height: 400px; }
.vibrant-en {height: 400px; }

/* wrapper*/
.wrapper {text-align: center; color: #333; font-size: 18px; font-family: Time New Roman; }

/*blog column*/
article { width:74%; }
aside { width:22%; }
main .article-aside { display:flex; justify-content:space-between; margin-bottom:50px; }


/*blog title*/
.post-info { position: relative; padding-top: 4px; margin-top: 10px; color:#D7CEBB; 
                 font-family: Tahoma, "ヒラギノ角ゴシック",  "Hiragino Sans", sans-serif ;  }
.post-title { font-size: 24px; font-weight: normal; margin-left: 180px; margin-top: 20px; }
.post-date { position: absolute; background:#80796C; color:#D7CEBB; text-align: center; 
                   width: 66px; height: 55px; border-radius: 50%; font-size: 1.1rem; top:0;
                 padding-top: 12px; padding-left:6px; }
.post-date span {font-size: 1rem; border-top: 1px #D7CEBB solid; padding-top: 3px;
                        display: block; width 50%; text-align:center; margin:0 auto; }

/* blog220701*/
.blog220701  {background: #444; height:800px;
                   font-family:"Time New Roman","ヒラギノ明朝Pro",  "Hiragino Mincho Pro" ,serif; }
.theme1,.theme2 {margin: 30px 80px 10px ; color: #FFF7E9; font-family:"Tahoma",
　　　　　　　 "ヒラギノ角ゴシック",  "Hiragino Sans", sans-serif; font-size: 20px; }
.blog220701 p { margin: 10px 80px; color: #FFF7E9; font-size: 18px; text-align: justify; 　
　　　　　　　width:1000px; }

/* blog aside*/
.sub-title,h5{ font-size: 18px; padding: 0px 1px; margin-top: 30px; margin-bottom:0px; 
                 color:#2E2F3B;font-family: Tahoma, "ヒラギノ角ゴシック",  "Hiragino Sans", sans-serif ; }
.sub-menu a {font-size: 18px; padding: 10px 1px; margin-top: 0px; color:#403D36;
                font-family: Tahoma, "ヒラギノ角ゴシック",  "Hiragino Sans", sans-serif  ; }
.sub-menu a:hover { color: #eed13f; }

/* contents */
.program .title, .scheme .title { font-size: 24px; font-family: Tahoma, "ヒラギノ角ゴシック",  
                       "Hiragino Sans",  sans-serif ; color: #201E1B; background-color: #FFF7E9 ; }
.program, .scheme {font-family: "Time New Roman","ヒラギノ明朝Pro","Hiragino Mincho Pro" ,serif ;
                           color: #201E1B; background-color: #FFF7E9 ;font-size:20px; text-align: justify; 
                           padding-top: 20px; padding-bottom: 20px; }
.program p, .scheme p {margin: 10px 30px; width: 70%; }
.procedure { margin: 10px 30px; width: 70%; }
.methodologies { margin: 10px 30px; width: 70%; }

/* expertise */
.expertise .title { font-size: 24px; font-family: Tahoma, "ヒラギノ角ゴシック",  
                      "Hiragino Sans",  sans-serif ; color: #D7CEBB; background-color: #403D36 ; }
.expertise {font-family: "Time New Roman","ヒラギノ明朝Pro","Hiragino Mincho Pro" ,serif ;
                           color: #D7CEBB; background-color: #403D36 ;font-size:20px; text-align: justify; 
                           padding-top: 20px; padding-bottom: 20px; }
.expertise p {margin: 10px 30px; width: 70%; }
.domain { margin: 10px 30px; width: 70%; }

/* profile */
.profile-title { font-size: 24px; font-family: "Tahoma","ヒラギノ角ゴシック",  "Hiragino Sans",  
                  sans-serif ; color: #333}
.historytitle { font-size: 24px; font-family: "Times New Roman","ヒラギノ明朝Pro",
                   "Hiragino Mincho Pro" ,serif ; font-weght:bolder; color: #333; }
.picture { width:150px; height:210px; }

img.smallimage { display: none }
img.largeimage { display: block; width: 1000px; }


/* contact*/
.contact {color:#2E2F3B; }

/* mobile version tablet */
@media screen and (max-width: 1120px ) {

#toppage { height: 560px; }
.visionary-en, .visualized-en, .vibrant-en {height: 250px; width: 250px; }
.blog220701 {height: 800px;  }

}

/* mobile version */
@media screen and (max-width: 850px) {

.container { display: flex; flex-direction: column; justify-content: flex-start; }
.logo { width: 370px; margin:  0 0 20px 0; }
.main-nav {display: flex; width: 350px ; justify-content: space-around; margin:  0 0 20px 0; }
.item { font-size: 0.8rem; }

#toppage {height: 1450px; margin-bottom: 50px; }
.message { text-align: left; padding-left: 15px; padding-right: 15px; }
.container-vi {  display: grid; grid-template-columns: 350px;  }
.visionary-en, .visualized-en, .vibrant-en {height: 350px; width: 350px; }

.program .title, .scheme .title { font-size: 16px; }
.program, .scheme {font-size:16px; text-align: justify; padding: 20px 5px; }
.procedure {margin: 10px 30px; width: 90%;  }
.methodologies { margin: 10px 30px; width: 90%; }
.program p, .scheme p {margin: 10px 30px; width: 90%; }

.expertise .title { font-size: 16px; }
.expertise {font-size:16px; text-align: justify; padding: 20px 5px; }
.domain {  margin: 10px 30px; width: 90%; }
.expertise p { margin: 10px 10px; width: 100%; }

.profile-title,  { font-size: 16px; }
.historytitle { font-size: 14px; width:600px; }
.picture { width:100px; height:140px; }
img.largeimage { display: none }
img.smallimage { display: block; width: 400px;  }


article {width: 95%; padding-left: 2px; padding-right: 2px; }
.article-aside {flex-direction: column; }
.blog220701 {height: 1350px;  }
.post-title { margin-left: 95px; margin-top: 20px; }
.theme1, .theme2 {margin: 30px 10px 15px 10px; font-size:18px; }
.blog220701 p { margin: 10px 10px; text-align: justify; }
aside {width: 95%; margin-top: 15px; }
.sub-title,h5{ margin-top: 10px; }

}

/* mobile version */
@media screen and (max-width: 350px) {

.container { display: flex; flex-direction: column; justify-content: flex-start; }
.logo { width: 320px;  margin:  0 0 20px 0; float: left;  }
.main-nav {display: flex; width: 280px ; justify-content: space-around; margin:  0 0 20px 0;   }
.item { font-size: 0.7rem; }

#toppage {height: 1450px; margin-bottom: 50px; }
.message { text-align: left; padding-left: 15px; padding-right: 15px; }
.container-vi { display: grid; grid-template-columns: 300px;  }
.visionary, .visualized, .vibrant {height: 300px; width: 300px;  }

article {width: 95%; padding-left: 2px; padding-right: 2px; }
.article-aside {flex-direction: column; }
.blog220701 {height: 1500px;  }
.post-title { margin-left: 95px; margin-top: 20px; }
.theme1, .theme2 {margin: 30px 10px 15px 10px; font-size:18px;  }
.blog220701 p { margin: 10px 10px; text-align: justify; }
aside {width: 400px; margin-top: 15px; }
.sub-title,h5{ margin-top: 10px; }


}