@charset "utf-8"; /* CSS Document */ /* 基本設定 */ .flex.between { justify-content:space-between; } #support #wrap * { box-sizing:border-box; font-feature-settings:"palt"; } #support #wrap { position:relative; width:100%; padding:70px 0 100px 0; } #support #wrap .wrap_inner { width:calc(100% - 100px); max-width:1400px; margin:50px auto 0 auto; background:#ffffff; border-radius:50px; box-shadow:15px 15px 30px rgba(0,0,0,0.05); } /* ヘッタ */ #support_header .leaflet { border-radius:50px 50px 0 0; overflow:hidden; } #support_header .leaflet h1 { position:absolute; top:50px; left:50px; z-index:4; width:calc(100% - 100px); font-size:24px; line-height:30px; height:40px; font-weight:normal; letter-spacing:0.05em; color:#111; border-bottom:1px solid rgba(0,0,0,0.5); font-family: 'Fjalla One', sans-serif; } #support_header .leaflet img { width:100%; } #support_header .leaflet a { display:block; width:100%; height:100%; } #support_header .leaflet a:before { content:""; position:absolute; top:0; left:0; z-index:2; width:100%; height:100%; background:rgba(0,0,0,0); transition:.2s;} #support_header .leaflet a:hover img { opacity:1; } #support_header .leaflet a:hover:before { background:rgba(0,0,0,0.1); } #support_header .leaflet, #support_header article { position:relative; width:100%; } #support_header article { padding:80px 10% 120px 10%; } #support_header article h1 { font-size:30px; line-height:30px; letter-spacing:0.05em; font-weight:normal; color:#222; height:30px; margin-bottom:20px; font-family: 'Fjalla One', sans-serif; } #support_header article h1 span { display:block; width:auto; height:30px; margin:0 5px; float:right; } #support_header article h1 span.facebook .fb-like { margin:1px -30px; } #support_header article h1 span.line { } #support_header article h1 span.twitter { background:#000; border-radius:4px; } #support_header article h2 { font-size:2.5rem; line-height:1.4; margin-bottom:20px; color:#222; letter-spacing:0.05em; font-family: 'Fjalla One', sans-serif; } #support_header article h3 { font-size:2.0rem; line-height:1.4; margin-bottom:10px; color:#222; } #support_header article h4 { font-size:4.5rem; line-height:1.2; margin-bottom:30px; color:#222; } #support_header article h5 { font-size:2.5rem; line-height:1.6; margin-bottom:30px; color:#222; } #support_header article p { font-size:1.2rem; line-height:2.0; margin-bottom:30px; color:#222; letter-spacing:0.05em; } #support_header article .btns { margin:80px auto 40px 0; max-width:600px; } /* 概要／トピックス共通（カラム） */ #support #box_outline, #support #box_topics { position:relative; padding:80px 0 100px 0; } #support #box_outline .container, #support #box_topics .container { width:80%; } #support #box_topics .col_main { width:calc(100% - 360px); position:relative; } #support #box_topics .col_side { position:relative; width:300px; } #support #box_topics .col_side .fb-page, #support #box_topics .col_side .fb-page span, #support #box_topics .col_side iframe { height:100% !important; } #support #wrap h6 { margin-bottom:25px; font-size:2.5rem; line-height:1.4; font-feature-settings:"palt"; letter-spacing:0.02em; } #support #wrap p.read { font-size:1.2rem; line-height:1.6; } #support_header a.btn:before { background-image:url(../../img/common/wt/down.svg) } #support #jump_outline, #support #jump_topics { position:absolute; top:-70px; left:auto; } #support .atls_list { border-top:1px solid #e5e5e5; } #support .atls article { width:47%; background:#fff; } /* フッタ */ #support_footer { padding:10px 50px 60px 50px; text-align:center; } #support_footer p { font-size:17px; line-height:1.6em; font-weight:bold; text-align:center; } @media screen and (max-width:1140px){ #support_header article h2 { font-size:2.0rem; } #support_header article h3 { font-size:1.5rem; } #support_header article h4 { font-size:4.0rem; } #support_header article h5 { font-size:2.0rem; } #support_header article p { font-size:1.0rem; } } @media screen and (max-width:940px) { #support_header .flex.between, #support #box_topics .flex.between { display:block; } #support_header .leaflet, #support_header article, #support #box_topics .col_main, #support #box_topics .col_side { width:100%; margin:0 auto; } #support #box_topics .col_side { margin-top:30px; } #support #box_topics .col_side .fb-page, #support #box_topics .col_side .fb-page span, #support #box_topics .col_side .fb-page { width:300px; height:400px !important; margin:0 auto; display:block; } #support_header .leaflet img { border-radius:6px 6px 0 0; } #support_header article { border-radius:0; } } @media screen and (max-width:760px) { #support #wrap { padding:35px 0 70px 0; } #support #wrap .wrap_inner { width:calc(100% - 30px); margin:15px auto 0 auto; } #support_header .leaflet { border-radius:25px 25px 0 0; overflow:hidden; } #support #box_outline .container, #support #box_topics .container { width:90%; } #support_header article { padding:40px 5%; } #support_header article h2 { font-size:1.4rem; } #support_header article h3 { font-size:1.0rem; } #support_header article h4 { font-size:2.5rem; } #support_header article h5 { font-size:1.5rem; } #support_header article p { font-size:1.0rem; } #support #wrap h6 { font-size:1.5rem; } #support_header article p { margin-bottom:30px; } #support #wrap .btns .btn { width:100%; float:none; margin:0 0 10px 0;} #support #box_outline, #support #box_topics { padding:40px 0; } #support #box_topics .col_side { height:400px; } #support #box_topics .col_side .fb-page { position:absolute; top:0; top: 0; left:50%; margin:0 0 0 -150px; } } /* カラー設定／学生起業家育成奨学 */ #support.student #wrap { background-color:#ea977e; } #support.student #support_header .btn { background-color:#e16b47; } #support.student #support_header article, #support.student #box_topics { background:#f6d2c7; } /* カラー設定／とかちビジネスチャレンジ補助金 */ #support.bizchallenge #wrap { background-color:#e9525c; } #support.bizchallenge #support_header .btn { background-color:#e00618; } #support.bizchallenge #support_header article, #support.bizchallenge #box_topics { background:#fadadc; }