@charset "utf-8";

/* --------------------------------------------------------- */
/* index.css */
/* --------------------------------------------------------- */

#wrap{position:relative;overflow:hidden;}
.section{width:100%;margin:0 auto;}
.content{width:100%;margin:0 auto;}
.layer{width:87.848%;max-width:1200px;margin:0 auto;}

a{transition:opacity ease 0.3s;}
img{width:100%;height:auto;}

.sp{display:none;}

.fade{opacity:0;transform:translateY(50px);transition:ease 1s; transition-property:opacity,transform;}
.view{opacity:1;transform:translateY(0);}


/* メイン
----------------------- */
#main{}

h2{padding-top:4.167%;font-size:28px;line-height:160%;text-align:center;}
.htxt{margin-top:1em;font-size:16px;font-weight:bold;line-height:175%;text-align:center;}
.image a,
.more a{display:block;}
.btn{width:26.667%;margin:0 auto;}
.btn a{display:block;color:#fff;font-size:18px;font-weight:bold;line-height:333%;text-align:center;text-decoration:none;border-radius:0.445em;box-shadow:0.5em 0.5em 1.667em 0.223em rgba(26,26,26,0.25);background:#2e74b7 url(../img/icon-arrow-w.png) no-repeat;background-size:0.944em auto;background-position:center right 1em;}
.more a:hover,
.btn a:hover{opacity:0.7;}


/* 追随 ----------------------- */
#float{background:rgba(220,86,98,0.9);z-index:50;}
#float.on{position:fixed;top:0;left:0;}
#float ul{width:100%;display:flex;justify-content:center;padding:1.667% 0;}
#float li{width:20%;margin:0 0.417%;}
#float li a{display:block;font-size:16px;font-weight:bold;line-height:375%;text-align:center;text-decoration:none;border-radius:1.875em;box-shadow:0.5em 0.5em 1.667em 0.223em rgba(26,26,26,0);background:#fff url(../img/icon-blank.png) no-repeat;background-size:0.875em auto;background-position:center right 1.25em;}
#float li a:hover{opacity:0.7;}


/* 共創とは共に創ること。 ----------------------- */
#about{}
#about .layer:after{content:'';display:block;padding-top:6.667%;}
#about h2{padding-top:6.25%;}
#about .image{width:55.667%;margin:2.5% auto 0;}


/* 学びを地域とともに。 ----------------------- */
#community{position:relative;}
#community h2{margin:0;padding:0;}
#community #cycle{width:58.566%;margin:-3.667% 0 0 8.273%;position:relative;z-index:2;}
#community #note{width:38.946%;margin-top:15.8%;position:absolute;top:0;right:0;}
#community .txt{margin:4.393% auto 10.981%;font-size:1.3178vw;font-weight:bold;line-height:178%;text-align:center;}


/* 共創情報科学部の学びの全体像 ----------------------- */
#overview{background:url(../img/bg-overview.png) no-repeat center;background-size:cover;}
#overview .layer{position:relative;}
#overview .layer:before{content:'';display:block;padding-top:5%;}
#overview .layer:after{content:'';display:block;width:15.667%;padding-top:11.75%;margin:0 4.167% 3.334% 0;background:url(../img/img-overview.png) no-repeat top center;background-size:100% auto;position:absolute;bottom:0;right:0;}
#overview h2{width:11.667%;margin:-7.5% 0 0 10.584%;padding:0;position:absolute;top:0;left:0;}

#overview .yearbox{width:35%;padding:4.6em 0 3em 4em;font-size:10px;border-radius:4.5em;box-shadow:0.8em 0.8em 1.5em 0.12em rgba(26,26,26,0.25);background:#fff;position:relative;box-sizing:border-box;}
#overview .year{width:9.4em;margin:-3.2em 0 0 4em;position:absolute;top:0;left:0;}
#overview .head{margin-bottom:0.25em;font-size:20px;font-weight:bold;}
#overview .txt{font-size:16px;line-height:150%;}

#overview #year4{margin:0 1.667% -1.667% auto;z-index:4;}
#overview #year3{margin:0 20% -1.667% auto;z-index:3;}
#overview #year2{margin:0 auto -1.667% 25.834%;z-index:2;}
#overview #year1{margin:0 auto -3.334% 7.5%;z-index:1;}


/* 学べること、その先の未来。 ----------------------- */
#future{background:#fff;}
#future .layer:after{content:'';display:block;padding-top:11.667%;}
#future h2{padding-top:9.167%;}

#future .coursebox{width:100%;display:flex;justify-content:center;margin-top:5%;}
#future .course{width:30%;padding:5.7em 3.1em 8em;font-size:10px;border:0.4em solid;border-radius:1.5em;box-sizing:border-box;position:relative;}
#future .course:before{content:'';display:block;width:19.445%;padding-top:19.445%;background:no-repeat top center;background-size:100% auto;position:absolute;top:0%;left:50%;transform:translate(-50%,-3.7em);}
#future .course .head{margin-bottom:0.822em;font-size:28px;font-weight:bold;line-height:100%;text-align:center;}
#future .course .image{}
#future .course .txt{font-size:16px;line-height:150%;}
#future .course p.txt{margin-top:1em;}
#future .course .txt li{margin-top:0.313em;font-weight:bold;line-height:218.75%;text-align:center;background:#f5f5f5;}
#future .course .subhead{margin-top:1.667em;color:#fff;font-size:18px;font-weight:bold;line-height:194.5%;text-align:center;}
#future .course .more{width:43.334%;position:absolute;bottom:0;left:0;margin:0 0 -9.3em 10.9em;}

#future #course1{border-color:#00a0e9;}
#future #course1:before{background-image:url(../img/icon-course1-sp.png);}
#future #course1 .head{color:#00a0e9;}
#future #course1 .image + .txt{padding-bottom:1.5em;}
#future #course1 .subhead{background:#00a0e9;}

#future #course2{margin:0 3.5%;border-color:#5876b8;}
#future #course2:before{background-image:url(../img/icon-course2-sp.png);}
#future #course2 .head{color:#5876b8;}
#future #course2 .subhead{background:#5876b8;}

#future #course3{border-color:#00a8ba;}
#future #course3:before{background-image:url(../img/icon-course3-sp.png);}
#future #course3 .head{color:#00a8ba;}
#future #course3 .image + .txt{padding-bottom:1.5em;}
#future #course3 .subhead{background:#00a8ba;}


/* まずは、興味のままに学ぶ。 ----------------------- */
#interest{background:#2e74b7;}
#interest .layer:after{content:'';display:block;padding-top:6.667%;}
#interest h2,
#interest .htxt{color:#fff;}

#interest .intbox{display:flex;justify-content:center;margin-top:2.917%;}
#interest .int{width:24.167%;margin:0 3.334%;position:relative;}
#interest .int .image{width:118.966%;margin-left:-6.897%;}
#interest .int .txt{margin:1em 0 0.5em;color:#fff;font-size:16px;line-height:150%;}
#interest .int .name{color:#fff;font-size:16px;font-weight:bold;}


/* あなたの学びを拡げてくれる先生たち。 ----------------------- */
#teacher{background:#fff;}
#teacher .layer:after{content:'';display:block;padding-top:6.667%;}
#teacher .teachbox{width:100%;display:flex;flex-wrap:wrap;justify-content:center;margin:2.5% auto 5%;}
#teacher .teach{width:15.334%;margin:0 0.667%;}
#teacher .teach .image{}
#teacher .teach .image a:hover{opacity:0.7;}
#teacher .teach .name{font-size:18px;font-weight:bold;line-height:145%;text-align:center;}
#teacher .teach .name small{display:block;font-size:16px;}
#teacher .teach .charge{width:70.653%;margin:0.25em auto 0;font-size:16px;font-weight:bold;line-height:187.5%;text-align:center;border:1px solid;}

#teacher .teach.c1 .charge{color:#00a0e9;border-color:#00a0e9;}
#teacher .teach.c2 .charge{color:#5876b8;border-color:#5876b8;}
#teacher .teach.c3 .charge{color:#00a8ba;border-color:#00a8ba;}


/* 動画でみる共創情報科学部 ----------------------- */
#movie{background:#f5f5f5;}
#movie .layer:after{content:'';display:block;padding-top:6.667%;}
#movie .image{width:33.334%;margin:1.667% auto 5.417%;}
#movie .image a{display:block;}
#movie .image a:hover{opacity:0.7;}


/* フッター
----------------------- */
#footer{}

#links .layer{display:flex;justify-content:space-between;}
#links{}
#links .logo{width:31.334%;margin:5% 0 0 1.417%;}

#links .snsbox{width:14.334%;padding:2.5% 0 2.084%;}
#links .snsbox .head{width:76.745%;margin:0 auto 8.721%;}
#links .snsbox .sns{width:100%;display:flex;align-items:center;justify-content:center;}
#links .snsbox li{width:31.977%;margin:0 7.559%;}
#links .snsbox a{display:block;}
#links .snsbox a:hover{opacity:0.7;}

#copy{background:#1a1a1a;}
#copy p{color:#fff;font-size:14px;line-height:200%;text-align:center;}



@media screen and (max-width: 1366px){

/* メイン
----------------------- */
.htxt{font-size:1.1713vw;}
.btn a{font-size:1.3178vw;}


/* 追随 ----------------------- */
#float li a{font-size:1.1713vw;}


/* 共創情報科学部の学びの全体像 ----------------------- */
#overview .yearbox{font-size:0.7321vw;}
#overview .head{font-size:1.4642vw;}
#overview .txt{font-size:1.1713vw;}


/* 学べること、その先の未来。 ----------------------- */
#future .course{font-size:0.7321vw;}
#future .course .head{font-size:2.0498vw;}
#future .course .txt{font-size:1.1713vw;}
#future .course .subhead{font-size:1.3178vw;}

#future #course3 .image + .txt{padding-bottom:0;}


/* まずは、興味のままに学ぶ。 ----------------------- */
#interest .int .txt{font-size:1.1713vw;}
#interest .int .name{font-size:1.1713vw;}


/* あなたの学びを拡げてくれる先生たち。 ----------------------- */
#teacher .teach .name{font-size:1.3178vw;}
#teacher .teach .name small{font-size:1.1713vw;}
#teacher .teach .charge{font-size:1.1713vw;border-width:0.0733vw;}

/* フッター
----------------------- */
#copy p{color:#fff;font-size:1.0249vw;}
	
}



@media screen and (max-width: 750px){

.layer{width:100%;}

.pc{display:none;}
.sp{display:block;}


/* メイン
----------------------- */
#main{}

h2{padding-top:6%;font-size:5.067vw;line-height:184%;}
.htxt{margin-top:0.667em;font-size:3.2vw;line-height:150%;}
.btn{width:92%;}
.btn a{font-size:3.6vw;border-radius:0.297em;box-shadow:0.334em 0.334em 1.112em 0.149em rgba(26,26,26,0.25);background-image:url(../img/icon-arrow-w-sp.png);background-size:0.889em auto;background-position:center right 1.26em;}
.more a:hover,
.btn a:hover{opacity:1;}


/* 追随 ----------------------- */
#float{}
#float ul{flex-wrap:wrap;padding:1.934% 0;}
#float li{width:48%;margin:1% 0.667%;}
#float li a{font-size:2.934vw;line-height:409%;border-radius:2.046em;box-shadow:0.409em 0.409em 0.546em 0.068em rgba(26,26,26,0);background-image:url(../img/icon-blank-sp.png);background-size:0.909em auto;background-position:center right 1.546em;}
#float li a:hover{opacity:1;}


/* 共創とは共に創ること。 ----------------------- */
#about{}
#about .layer:after{padding-top:11.334%;}
#about h2{padding-top:9%;}
#about .image{width:91.734%;margin-top:4.667%;}


/* 学びを地域とともに。 ----------------------- */
#community #cycle{width:92%;margin:69.334% auto 0;}
#community #note{width:89.6%;margin-top:37.867%;}
#community .txt{margin:6.667% auto 22.667%;font-size:3.734vw;line-height:160%;}


/* 共創情報科学部の学びの全体像 ----------------------- */
#overview{background-image:url(../img/bg-overview-sp.png);}
#overview .layer{width:100%;}
#overview .layer:before{padding-top:10.667%;}
#overview .layer:after{width:34.934%;padding-top:26.267%;margin:0 4% 6.667% 0;background-image:url(../img/img-overview-sp.png);}
#overview h2{width:22.4%;margin:-10.667% 0 0 10.667%;}

#overview .yearbox{width:45.334%;padding:5.5em 0 3.5em 4em;font-size:1.334vw;}
#overview .year{margin:-2.7em 0 0 2.4em;}
#overview .head{margin-bottom:0.385em;font-size:3.467vw;}
#overview .txt{font-size:3.2vw;}

#overview #year4{margin:0 -4% -4% auto;}
#overview #year3{margin:0 14.667% -4% auto;}
#overview #year2{margin:0 auto -4% 21.334%;}
#overview #year1{margin:0 auto -6.667% 4%;}


/* 学べること、その先の未来。 ----------------------- */
#future{}
#future .layer:after{padding-top:24%;}
#future h2{padding-top:12%;}

#future .coursebox{width:92%;display:block;margin:11.334% auto 0;}
#future .course{width:100%;padding:9em 3.6em 8em;font-size:1.334vw;}
#future .course:before{width:11em;padding-top:11em;transform:translate(-50%,-5.7em);}
#future .course .head{margin-bottom:0.658em;font-size:5.067vw;}
#future .course .image{width:71.476%;margin:0 auto 5.902%;}
#future .course .txt{font-size:3.2vw;}
#future .course p.txt{margin-top:0.625em;}
#future .course ul.txt{display:flex;flex-wrap:wrap;justify-content:space-between;margin-top:0.82%;}
#future .course .txt li{width:49.181%;margin-top:0.455em;font-size:2.934vw;line-height:204.546%;font-feature-settings:"palt";}
#future .course .subhead{margin-top:1.308em;font-size:3.467vw;line-height:173.1%;}
#future .course .more{width:28.74%;margin:0 0 -11.3em 25.7em;}

#future #course1{padding-bottom:11em;}
#future #course1 .image + .txt{padding-bottom:0;}

#future #course2{margin:27.537% auto;}

#future #course3{padding-bottom:11em;}
#future #course3 .image + .txt{padding-bottom:0;}


/* まずは、興味のままに学ぶ。 ----------------------- */
#interest{}
#interest .layer:after{padding-top:10.667%;}

#interest .intbox{display:block;margin-top:00%;}
#interest .int{width:92%;margin:7.734% auto 0;}
#interest .int .image{width:102.174%;margin-left:0;}
#interest .int .txt{margin:1em 0 0;font-size:3.2vw;}
#interest .int .name{font-size:2.934vw;position:absolute;top:0;right:0;margin-top:35%;}


/* あなたの学びを拡げてくれる先生たち。 ----------------------- */
#teacher{}
#teacher .layer:after{padding-top:10.667%;}
#teacher .teachbox{margin:4% auto 1.334%;}
#teacher .teach{width:40%;margin:0 2.667% 6.667%;}
#teacher .teach .image a:hover{opacity:1;}
#teacher .teach .name{font-size:3.6vw;}
#teacher .teach .name small{display:inline-block;margin-left:0.5em;font-size:3.2vw;}
#teacher .teach .charge{width:65%;margin-top:0.625em;font-size:3.2vw;border-width:0.134vw;}


/* 動画でみる共創情報科学部 ----------------------- */
#movie{}
#movie .layer:after{padding-top:10.667%;}
#movie .image{width:64%;margin:5.334% auto 8%;}
#movie .image a:hover{opacity:1;}


/* フッター
----------------------- */
#links .logo{width:48.934%;margin:9.334% 0 0 4%;}

#links .snsbox{width:38.134%;padding:10.4% 0 4%;}
#links .snsbox .head{width:59.091%;margin:0 auto 3.847%;}
#links .snsbox li{width:32.518%;margin:0 2.361%;}
#links .snsbox a:hover{opacity:1;}

#copy p{font-size:2.934vw;line-height:273%;}

}