@charset "utf-8";
@import url(https://use.fontawesome.com/releases/v5.6.1/css/all.css);
@import url(animate.css);
@import url(https://fonts.googleapis.com/css?family=Noto+Sans+JP:300,400,700);
@import url(https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@500;600&display=swap);
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,700,900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Arsenal:wght@400;700&display=swap);

/* ---------------------------------------------------------------- *
   リセット
* ---------------------------------------------------------------- */

/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License:none (public domain)*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, fsss, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video{margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{display:block;}
body{line-height:1;}
ol, ul{list-style:none;}
blockquote, q{quotes:none;}
blockquote:before, blockquote:after, q:before, q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0}
*,*::before,*::after {box-sizing:border-box;}

/* ---------------------------------------------------------------- *
   基本設定(PC)
* ---------------------------------------------------------------- */

html {scroll-padding-top:80px;/* 固定ヘッダの高さ分 */}

body {
    font-family:'Roboto',
        'Noto Sans JP',
        'ヒラギノ角ゴ Pro W3',
        'Hiragino Kaku Gothic Pro',
        "游ゴシック体", YuGothic,
        'メイリオ', Meiryo,
        'ＭＳ Ｐゴシック',
        'MS PGothic',
        Helvetica, Osaka,
        sans-serif;
    background-color:#fff;
    color:#333;
    font-weight:500;
}

/* リンク色の設定 */
a {opacity:1;transition:all 0.2s ease-in-out;}
a:hover {opacity:0.7;transition:all 0.1s ease-in-out;}
a:link {color:#06F;text-decoration:underline;}
a:visited {color:#63C;text-decoration:underline;}
a:hover {color:#09F;text-decoration:none!important;}
a:active {color:#6FF;text-decoration:none!important;}

/* 両端揃え */
.justify {text-align:justify;text-justify:inter-ideograph;font-feature-settings:"palt"1;font-kerning:auto;}

.flex {display:flex;display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;-js-display:flex;justify-content:space-between;-webkit-box-pack:justify;-ms-flex-pack:justify;-webkit-justify-content:space-between;flex-wrap:wrap;-ms-flex-wrap:wrap;-webkit-flex-wrap:wrap;}

.hide {display:none;}
.pc_hide {display:none;}
.sp_hide {display:block;}
.hide {display:none;}
.clear {clear:both;}

/* フォント */
.serif {font-family:'Noto Serif JP', "游明朝体", "Yu Mincho", YuMincho, Garamond, "Times New Roman", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;font-weight:600;}

.jp {font-family:'Noto Serif JP', "游明朝体", "Yu Mincho", YuMincho, Garamond, "Times New Roman", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;font-weight:600;}

.ff1 {font-family:'Arsenal',sans-serif;font-weight:400;}
.red {color:#eb3c64;}
.blue {color:#4e7ea4;}
.yellow {color:#efea3c;}
.small {font-size:12px;line-height:140%;letter-spacing:0;}

/* 共通設定 */
.section_wrap {padding:100px 0;border-bottom:solid 1px #ccc;}
.mainWrap {width:90%;max-width:1200px;margin:0 auto;}
.sectionBg1 {background:url(../image/top_bg1.gif);}
.sectionBg2 {background:url(../image/top_bg2.gif);}
.btn a {display:block;width:100%;height:70px;line-height:70px;background:#333;color:#fff;text-align:center;text-decoration:none;font-size:20px;}

/* アニメ */
.fadeIn {opacity:0;}
.fadeIn_anime {opacity:1;transition:1.5s ease-out;}

/* ------------------------------------------------------------------------------------- *
   TOPページ(PC)
* ------------------------------------------------------------------------------------- */

.header {position:fixed;top:0;left:0;width:100%;height:70px;background:#fff;z-index:1000;box-shadow:0 1px 5px rgba(0, 0, 0, 0.5);}
.header .logo a {display:block;float:left;margin:15px 0 0 15px;width:122px;height:38px;background:url(../image/logo.png) no-repeat;background-size:122px 38px;text-indent:-9999px;}
.header .menu {margin:28px 0 0 50px;float:left;}
.header .menu li a {display:block;margin-right:40px;text-decoration:none;color:#333;font-size:14px;text-align:center;line-height:100%;font-weight:bold;}
.header .menu li a:hover {color:#54c3f1;}
.header .request_btn a {display:block;width:250px;height:70px;margin:0;text-align:center;font-size:14px;font-weight:bold;text-decoration:none;color:#333;background:#fdd23e;line-height:70px;position:relative;}
.header .request_btn a span {margin-left:30px;}
.header .request_btn i {position:absolute;display:block;font-size:30px;top:18px;left:22px;}

/* HOMEメインイメージ (PC) */
.home_mainimg {position:relative;}
.home_mainimg .bxslider img {display:block;width:100%;height:100vh;object-fit:cover;}
.home_mainimg .bxslider img {animation:anime_zoom 6s linear;}
@keyframes anime_zoom {0% {transform:scale(1);}100% {transform:scale(1.08);}}

/* SCROLL三角 (PC) */
.home_mainimg .scroll {display:block;position:absolute;z-index:999;bottom:5%;left:0;right:0;margin:auto;width:50px;height:40px;text-decoration:none;animation:Flash1 1s infinite;}
@keyframes Flash1 {50% {opacity:0.2;}
}
.home_mainimg .scroll .arrow {margin:0 auto;width:0;height:0;border-style:solid;border-width:30px 20px 0 20px;border-color:#54c3f1 transparent transparent transparent;}
.home_mainimg .scroll p {font-size:10px;font-weight:700;color:#FFF;text-align:center;margin-top:15px;text-shadow:0 0 4px rgba(0,0,0,0.5);}

/* メインイメージロゴ (PC) */
.home_mainimg .mainimg_logo img {display:block;position:absolute;width:35%;top:0;left:0;right:0;bottom:0;margin:auto;z-index:999;}

/* pagetop (PC) */
.pagetop {display:none;position:fixed;bottom:40px;right:30px;}
.pagetop li {list-style:none;font-size:10px;font-weight:700;line-height:125px;text-align:center;}
.pagetop a {z-index:1000;color:#333;display:block;width:50px;height:50px;text-decoration:none;background:url("../image/pagetop.png") no-repeat;opacity:1;transition:all .2s ease-in-out;}
.pagetop a:hover {opacity:0.9;transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;}

/* footer (PC) */
.footer {padding:50px 0;}
.footer .copyright {font-size:10px;text-align:center;}

/* ---------------------------------------------------------------- *
   HOME (PC)
* ---------------------------------------------------------------- */

.home_news {border:solid 1px #ddd;padding:20px;background:#fff url(../image/icon3.png) no-repeat 95% center;background-size:8%;text-decoration:none!important;box-shadow:0 15px 13px -15px rgba(0,0,0,0.3);align-items:center;}
.home_news .photo {width:30%;}
.home_news .photo img {display:block;width:100%;}
.home_news h3 {width:66%;font-size:22px;color:#333;}

/* ---------------------------------------------------------------- *
   下層ページ共通(PC)
* ---------------------------------------------------------------- */

.subpage_mainimg {height:400px;margin-top:70px;}
.mainimg2020 {background:url(../image/mainimg1.jpg) no-repeat center bottom;background-size:100%;}
.subpage_mainimg h2 {line-height:400px;margin-left:8%;font-size:40px;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,0.7);}

.sub_menu {padding:60px 0;border-bottom:solid 1px #ccc;background:#f9f9f9;}
.sub_menu ul li {width:33.3%;}.sub_menu ul li a {display:block;width:100%;border:#ccc solid 1px;padding:30px 0;font-size:16px;font-weight:600;text-align:center;color:#333;text-decoration:none;margin-bottom:1px;background:url(../image/icon2.png) no-repeat 5% center #fff;background-size:20px;}

/* ---------------------------------------------------------------- *
   卒業制作作品ページ(PC)
* ---------------------------------------------------------------- */

.graduation_work .section_wrap.graduation_work .section_wrap {padding:100px 0;border-bottom:solid 1px #ccc;}

/* 卒業制作作品 見出し (PC) */
.graduation_work .section_wrap .title {margin-bottom:50px;text-align:center;background:url(../image/icon1.png) no-repeat center top;background-size:60px;padding-top:90px;}
.graduation_work .section_wrap .title .main_title {display:block;font-size:33px;font-weight:600;letter-spacing:10px;padding-bottom:20px;}
.graduation_work .section_wrap .sub_title {display:block;font-size:12px;letter-spacing:0;}

/* 卒業制作作品 item (PC) */
.graduation_work .item {width:32.5%;color:#333; background:#fff; border:#e0e0e0 solid 1px;padding:10px;margin-bottom:18px;box-shadow:0 10px 7px -10px rgba(0,0,0,0.3);}
.graduation_work .item .wrap {padding:10px;}
.graduation_work .item .photo {width:35%;}
.graduation_work .item .photo img {display:block;width:100%;margin-bottom:15px;}
.graduation_work .item .text_area {width:60%;}
.graduation_work .item .text_area .comic_title {font-size:20px;font-weight:600;line-height:140%;margin-bottom:30px;}
.graduation_work .item .text_area .name {font-size:18px;letter-spacing:4px;margin-bottom:30px;}
.graduation_work .item .text_area .text {font-size:13px;line-height:180%;margin-bottom:20px;text-align:justify;text-justify:inter-ideograph;font-feature-settings:"palt"1;font-kerning:auto;}
.graduation_work .item .link_area {width:100%;border-top:dotted 1px #ccc;}
.graduation_work .item .link_area li {margin-bottom:2px;}
.graduation_work .item .link_area li a {display:block;width:100%;padding:22px;border-bottom:dotted 1px #ccc;font-size:15px;font-weight:bold;color:#333;text-decoration:none;}
.graduation_work .item .link_area li i {font-size:20px;color:#fdd23e;margin-right:15px;}
.graduation_work .item .link_area li .fa-youtube {color:#da0d0d;}
.graduation_work .item .link_area li a:hover {opacity:1; background:#f9f9f9;}
.graduation_work .noitem {width:32.5%;}

/* ---------------------------------------------------------------- *
   お問い合わせメールフォーム(PC)
* ---------------------------------------------------------------- */

.mail_form .form_title {margin-bottom:10px;font-size:14px;font-weight: bold;}
.mail_form .form_title .small {margin-left:10px;font-size:12px;font-weight:normal;}
.mail_form .inputarea {margin-bottom:40px;}
.mail_form input,
.mail_form textarea { width: 100%; border:solid 1px #ccc; padding: 15px;border-radius: 4px;}
.submit input {font-size:14px;font-weight: bold; cursor: pointer;}













/* 以下、画面の横幅が1100px以下の場合に適用されるCSS（PC/ipad） */

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

/* ------------------------------------------------------------------------------------- *
   TOPページ(PC/ipad)
* ------------------------------------------------------------------------------------- */

.header .menu {margin:30px 0 0 30px;}
.header .menu li a {margin-right:20px;font-size:13px;}
.header .request_btn a {width:120px;font-size:11px;}
.header .request_btn a i {display:none;}
.header .request_btn a span {margin-left:0;}

}
























/* 以下、画面の横幅が800x以下の場合に適用されるCSS（SP） */

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

.pc_hide {display:block;}
.sp_hide {display:none;}

/* 共通設定 */
.section_wrap {padding:30px 0;}
.mainWrap {width:95%;max-width:inherit;margin:0 auto;}
.sectionBg1 {background:#eee;}
.sectionBg2 {background:#eee;}

/* ------------------------------------------------------------------------------------- *
   TOPページ(SP)
* ------------------------------------------------------------------------------------- */

.header {height:60px;}
.header .logo a {float:inherit;margin:17px auto 0 auto;width:103px;height:32px;background-size:103px 32px;}

/* hamburgerMenu */
.hamburgerMenu {display:block;}
.hamburgerMenu .btn {cursor:pointer;}
.hamburgerMenu .nav-toggle .text {position:absolute;top:36px;font-size:10px;font-weight:400;left:7px;color:#333;}
.hamburgerMenu .nav-toggle {width:30px;height:40px;display:block;position:fixed;right:21px;top:10px;z-index:1001;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}
.hamburgerMenu .nav-toggle div {width:27px;position:fixed;left:20px;top:20px;}
.hamburgerMenu .nav-toggle span {display:block;position:absolute;height:2px;width:100%;background:#333;left:0;zoom:1;transition:.35s ease-in-out;}
.hamburgerMenu .nav-toggle span:nth-child(1) {top:0;}
.hamburgerMenu .nav-toggle span:nth-child(2) {top:9px;}
.hamburgerMenu .nav-toggle span:nth-child(3) {top:18px;}
.open .nav-toggle {background:transparent;}
.open .nav-toggle span {background:#333;}
.open .nav-toggle span:nth-child(1) {top:9px;transform:rotate(-135deg);zoom:1;}
.open .nav-toggle span:nth-child(2) {width:0;left:50%;}
.open .nav-toggle span:nth-child(3) {top:9px;transform:rotate(135deg);zoom:1;}
.hamburgerMenuBg {display:none;width:100%;overflow-y:auto;background:#fff;position:fixed;top:60px;left:0;height:auto;bottom:0;z-index:1000;}
.hamburgerMenuOp {display:block;opacity:1;}
.hamburgerMenuBtnOp {background:none;}

.header .menu {margin:0 0 0 0;float:inherit;width:100%;border-top:1px solid #ccc;}
.header .menu li {width:100%;}
.header .menu li a {display:block;width:100%;margin-right:0;text-decoration:none;color:#333;font-size:16px;text-align:center;line-height:100%;padding:25px 0;border-bottom:1px solid #ccc;}
.header .request_btn a {display:block;width:100%;font-size:16px;}

/* HOMEメインイメージ (SP) */
.home_mainimg {position:relative;}
.home_mainimg img {height:60vh;}
.home_mainimg .scroll .arrow {border-width:20px 14px 0 14px;}

/* メインイメージロゴ (SP) */
.home_mainimg .mainimg_logo img {display:block;position:absolute;width:70%;height:auto;top:0;left:0;right:0;bottom:0;margin:auto;z-index:999;}

.pagetop {display:block;position:inherit;background-color:#f9f9f9;padding:20px 0;border-top:none;border-bottom:solid 1px #ccc;}
.pagetop li {list-style:none;width:110px;font-family:'Roboto', sans-serif;font-weight:400;font-size:12px;text-indent:40px;line-height:30px;margin:0 auto;}
.pagetop a {color:#000;display:block;color:#333;width:30px;height:30px;text-decoration:none;background-image:url("../image/pagetop.png");background-repeat:no-repeat;;opacity:1;background-size:30px 30px;}

/* ---------------------------------------------------------------- *
   HOME (SP)
* ---------------------------------------------------------------- */

.home_news {padding:10px;background:#fff;background-size:5%;box-shadow:none;margin-bottom:2px;}
.home_news h3 {width:66%;font-size:14px;color:#333; line-height: 160%;}

/* ---------------------------------------------------------------- *
   下層ページ共通(SP)
* ---------------------------------------------------------------- */

.subpage_mainimg {height:50vh;margin-top:60px;}
.mainimg2020 {background:url(../image/mainimg1.jpg) no-repeat center top;background-size:cover;}
.subpage_mainimg h2 {line-height:50vh;font-size:20px;}

.sub_menu {padding:30px 0;border-bottom:solid 1px #ccc;background:#f9f9f9;}
.sub_menu ul li {width:100%;}
.sub_menu ul li a {display:block;width:100%;border:#ccc solid 1px;padding:20px 0;font-size:14px;font-weight:600;text-align:center;color:#333;text-decoration:none;margin-bottom:1px;background:url(../image/icon2.png) no-repeat 5% center #fff;background-size:15px;}

/* ---------------------------------------------------------------- *
   卒業制作作品ページ(SP)
* ---------------------------------------------------------------- */

.graduation_work .section_wrap.graduation_work .section_wrap {padding:30px 0;border-bottom:solid 1px #ccc;}

/* 卒業制作作品 見出し (SP) */
.graduation_work .section_wrap .title {margin-bottom:30px;text-align:center;background:url(../image/icon1.png) no-repeat center top;background-size:40px;padding-top:50px;}
.graduation_work .section_wrap .title .main_title {font-size:16px;letter-spacing:5px;padding-bottom:10px;}
.graduation_work .section_wrap .sub_title {font-size:11px;}

/* 卒業制作作品 item (SP) */
.graduation_work .item {width:100%;border:#d4d4d4 solid 1px;margin-bottom:13px;box-shadow:none;}
.graduation_work .item .text_area .comic_title {font-size:16px;margin-bottom:20px;}
.graduation_work .item .text_area .name {font-size:14px;letter-spacing:2px;margin-bottom:20px;}
.graduation_work .item .text_area .text {font-size:12px;margin-bottom:20px;}
.graduation_work .item .link_area {border:none;}
.graduation_work .item .link_area li a {padding:15px;font-size:14px;border:solid 1px #ccc;}
.graduation_work .item .link_area li i {font-size:20px;margin-right:15px;}
.graduation_work .item .link_area li a:hover {opacity:1; background:#eee;}
.graduation_work .noitem {display:none;}

/* ---------------------------------------------------------------- *
   お問い合わせメールフォーム(SP)
* ---------------------------------------------------------------- */

.mail_form .form_title {font-size:13px;}
.mail_form .form_title .small {font-size:10px;}
.mail_form .inputarea {margin-bottom:20px;}
.mail_form input,
.mail_form textarea {padding: 10px;}
.submit input {background:#333;color:#fff;border:none;}





}