@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Exo:500');
@import url('https://fonts.googleapis.com/css?family=Merriweather:400,700,900');

/*================================================
 *  CSSリセット
 ================================================*/
* { margin:0; padding:0; border:0; outline:0; vertical-align:baseline; background:transparent; word-wrap:break-word; }
footer, header, nav, section { display:block; }
div, nav, section, dl, ul { overflow:hidden; }
ul { list-style:none; }
table { border-collapse:collapse; border-spacing:0; table-layout:fixed; }
th, td { vertical-align:middle; }
hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; }
form, input,select,textarea { vertical-align:middle; box-sizing:border-box; }
input, button, textarea, select { -webkit-appearance:none; -moz-appearance:none; appearance:none; }

/*================================================
 *  タグ定義
 ================================================*/
* { line-height:1.6; }
html { background-color:#113285; }
body { margin:0 auto; -webkit-text-size-adjust:none; background-color:white; }
body, textarea, input { font-family:"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "Century Gothic", sans-serif; font-size:16px; }
a { background:transparent; text-decoration:none; outline:none; -webkit-tap-highlight-color:rgba(0,0,0,0); color:white; }
a:hover, a:focus { text-decoration:none; outline:none; }
a:hover { color:#FFB600; }
h1 { font-size:22px; }
h2, h3 { margin-bottom:1em; }
h2 { font-size:28px; }
h3 { font-size:20px; }
p { margin-bottom:0.5em; }
p:last-child { margin-bottom:0; }
li { margin-left:1em; }
th { white-space:nowrap; }
img, video { max-width:100%; }
section { margin-top:90px; min-height:calc(100vh - 90px - 180px + 1px); }
iframe { display:block; }
blockquote { position:relative; padding-left:30px; }
blockquote:before{ display:inline-block; position:absolute; top:0px; left:0px; vertical-align:middle; content:"\f10d"; font-family:"Font Awesome 5 Free"; color:white; font-size:20px; line-height:1; font-weight:900; }
blockquote p { padding:0; margin-bottom:1em; line-height:1.3; }
table { background-color:#0c2e4b; }
table, tr, th, td { border:1px solid white; }
th, td { padding:5px 10px; }
input, textarea { background-color:white; padding:5px; }

/*================================================
 *  ヘッダ・ナビ
 ================================================*/
/* ヘッダ */
header { position:fixed; z-index:10; width:100%; height:90px; display:flex; justify-content:space-between; align-items:center; }
header.back { background-color:#00093c; }
header div.header_home { margin-left:50px; }
header div.header_home a:hover { color:white; opacity:0.7; }
header div.header_home a h1 { margin:0; }
header div.header_home a img { display:block; margin-left:auto; margin-right:auto; margin-top:5px; }

/* メニュー */
nav { flex-shrink:0; }
nav ul { display:flex; justify-content:space-between; align-items:stretch; flex-wrap:wrap; overflow:hidden; margin-right:25px; }
nav ul li { display:block; text-align:center; margin-left:0; }
nav ul li a { display:block; color:white; padding-left:20px; padding-right:20px; }
nav ul li a.nav_selected { color:#FFB600; }
nav ul li a div.nav_text_top { font-size:16px; }
nav ul li a div.nav_text_bottom { font-size:12px; }
nav ul.menu_fix { position:fixed; z-index:1000; top:0; left:0; right:0; background-color:#fcfcfc; }

/* スマホメニューボタン */
div.sp_menu_button { display:none; position:absolute; z-index:2; top:15px; right:20px; width:40px; height:60px; cursor:pointer; }
div.sp_menu_button div, div.sp_menu_button div span { display:inline-block; transition:all .4s; box-sizing:border-box; }
div.sp_menu_button div { position:relative; width:40px; height:35px; }
div.sp_menu_button div span { position:absolute; left:0; width:100%; height:4px; background-color:white; border-radius:4px; }
div.sp_menu_button div span:nth-of-type(1) { top:5px; }
div.sp_menu_button div span:nth-of-type(2) { top:15px; }
div.sp_menu_button div span:nth-of-type(3) { top:25px; }
div.sp_menu_button.active div span:nth-of-type(1) { -webkit-transform:translateY(10px) rotate(-45deg); transform:translateY(10px) rotate(-45deg); }
div.sp_menu_button.active div span:nth-of-type(2) { opacity:0; }
div.sp_menu_button.active div span:nth-of-type(3) { -webkit-transform:translateY(-10px) rotate(45deg); transform:translateY(-10px) rotate(45deg); }
div.sp_menu_button p { font-size:13px; line-height:13px; text-align:center; }

/*================================================
 *  フッタ
 ================================================*/
footer { text-align:center; height:140px; padding-top:40px; background-color:#00093c; }
footer img { width:240px; }
footer nobr:after { margin-right:20px; content:' '; }

/*================================================
 *  ページトップへの戻り
 ================================================*/
#page-top { position:fixed; bottom:20px; right:10vw; background-color:#113285; border:1px solid white; z-index:2; opacity:0.95; }
#page-top a { display:block; width:60px; height:60px; background:url("images/common_totop.png"); }
#page-top a:hover { text-decoration:none; background-color:#FFB600; opacity:1; }

/*================================================
 *  404Error
 ================================================*/
div.error404 { margin-top:100px; text-align:center; }
div.error404 p, div.error404 a { font-size:20px; font-weight:bold; }
div.error404 a { margin-top:100px; }

/*================================================
 *  ページ共通
 ================================================*/
/* ブロック構造 */
.bgwrap { position: fixed; width:100%; height:100vh; background-image:url(images/football-no-lines.png); }
.container { position:relative; }
.inner { width:1020px; margin-left:auto; margin-right:auto; }
.content_block { padding:50px 0; }
.center { text-align:center; }
img.center { display:block; margin-left:auto; margin-right:auto; }
.left { text-align:left; }
.right { text-align:right; }
.object_fit { background-size:cover; background-position:center center; background-repeat:no-repeat; display:block; position:absolute; top:0; left:0; width:100%; height:100%; }
.backcolor { background-color:#113285; color:white; }
.page_top_text { padding:25px 0; }
.page_top_text h2 { margin-bottom:0; font-size:28px; }
.buttons { display:flex; justify-content:center; }
.button, input[type="submit"] { display:block; width:280px; margin-left:25px; margin-right:25px; height:50px; line-height:50px; padding:0 10px; background-color:#006ab8; color:white; text-align:center; }
.button:hover, input[type="submit"]:hover { background-color:#FFB600; color:#000; }
.typewriter { visibility:hidden; }
h2.typewriter { min-height:48px; }
h3.typewriter { min-height:36px; }
.fade { opacity:0; }

/* 文字装飾 */
.underconst { text-align:center; color:white; margin-top:100px; font-size:32px; }
.exo { font-family:"Exo", sans-serif; }
.merri { font-family: 'Merriweather', serif; }
.serif { font-family:"游明朝", YuMincho, "ＭＳ Ｐ明朝", serif; }
.outline { text-shadow:-0.1px 0 0 #000, 0 -1px 0 #000, 1px 0 0 #000, 0 1px 0 #000; }
.indent { text-indent:1em; }
.nobr { white-space:nowrap; display:inline-block; }
.error { color:red; }
.letter_space { letter-spacing:0.25em; }
a.outlink::after { content:'🔗'; margin-left:10px; }
.empha { font-weight:bold; }
ul.ul_disc { list-style:disc; }

/*================================================
 *  ページ別定義
 ================================================*/
/* TOPページ */
div.top_image { position:relative; width:100%; height:calc(100vh - 90px); }
div.top_image ul li { display:none; width:100%; height:calc(100vh - 90px); margin-left:0; }
div.top_image div.top_image_text { position:absolute; top:0; left:0; right:0; bottom:0; display:flex; justify-content:center; align-items:center; }
div.top_image div.top_image_text h2 { display:block; text-align:center; }
div.top_image div.top_image_text h2 p { font-size:36px; margin-bottom:0; padding:36px; color:#006ab8; font-weight:900; text-shadow:0 0 1px #fff, 0 0 2px #fff, 0 0 3px #fff, 0 0 4px #fff, 0 0 8px #fff, 0 0 12px #fff, 0 0 16px #fff, 0 0 20px #fff, 0 0 24px #fff, 0 0 28px #fff, 0 0 32px #fff, 0 0 36px #fff; }
div.top_message div.fade:not(:last-child) { margin-bottom:2em; }

/* NEWSページ */
div.news dl { display:inline-block; }
div.news dl.news_list dt, div.news dl.news_list dd { float:left; margin-bottom:15px; font-size:16px; }
div.news dl.news_list dt:last-of-type, div.news dl.news_list dd:last-of-type { margin-bottom:0; }
div.news dl.news_list dt { clear:left; width:100px; margin-right:20px; text-align:left; }
div.news dl.news_list dd { width:calc(100% - 120px); text-align:left; }
div.news dl.news_list dd a { border-bottom:1px dotted #222; }
div.news div.news_detail { max-width:980px; }
div.news div.news_detail dl { margin-bottom:40px; }
div.news div.news_detail dl dt { text-align:center; margin-bottom:20px; }
div.news div.news_detail dl dt time, div.news div.news_detail dl dt h3 { display:inline; font-size:20px; }
div.news div.news_detail dl dt time { padding-right:20px; }
div.news div.news_detail dl dd { text-align:left; min-height:200px; }
div.news div.news_detail dl dd a { text-decoration:underline; }
div.news div.news_detail div.news_navi { position:relative; height:45px; }
div.news div.news_detail div.news_navi a { display:block; padding:10px 0; text-align:center; position:absolute; width:176px; }
div.news div.news_detail div.news_navi a.news_list { left:0; right:0; margin:auto; }
div.news div.news_detail div.news_navi a.news_next { left:0; }
div.news div.news_detail div.news_navi a.news_prev { right:0; }

/* BUSINESSページ */
div.business_example { display:flex; justify-content:space-between; flex-wrap:wrap; margin-top:25px; }
div.business_example a { display:block; text-align:center; }
div.business_example a:nth-child(-n+3) { margin-bottom:25px; }
div.business_example a:hover img { opacity:0.7; }

/* PROFILEページ */
div.profile_top { display:flex; justify-content:space-between; }
div.profile_photo { flex-shrink:0; text-align:center; margin-right:100px; margin-bottom:50px; }
div.profile_photo img { display:block; margin-bottom:25px; }
div.profile_photo h3 { display:flex; justify-content:center; }
div.profile_photo h3 span:first-child { margin-right:20px; }
div.profile_text { margin-bottom:25px; }
div.profile_photo_old_block { margin-top:25px; margin-bottom:50px; }
div.profile_photo_old { display:flex; justify-content:center; margin-bottom:10px; }
div.profile_photo_old img { display:block; }
div.profile_photo_old img:first-child { margin-right:20px; }
div.profile_photo_old_block p { text-align:center; margin-bottom:0; }
div.book_wrap { display:flex; justify-content:space-between; flex-wrap:wrap; }
div.book_wrap a { display:block; width:calc(100% / 4 - 20px); margin-bottom:25px; }
div.book_wrap a:hover { opacity:0.7; }
div.book_wrap a img { display:block; width:100%; margin-bottom:5px; }
div.book_wrap a p { line-height:1.3; margin-bottom:0; }

/* COMPANYページ */
.company_data th, .company_data td { padding:15px; }

/* INQUERYページ */
div.inquiry_error { text-align:center; background-color:#eee; margin-bottom:20px; padding:20px; }
div.inquiry table { width:100%; margin-bottom:20px; }
div.inquiry th { width:220px; padding-left:0; padding-right:30px; background-repeat:no-repeat; background-position:right 15px top 50%; }
div.inquiry th.nes { background-image:url("images/09_inquiry/form_nes.png"); }
div.inquiry th.opt { background-image:url("images/09_inquiry/form_opt.png"); }
div.inquiry input.name, div.inquiry input.tel { width:300px; }
div.inquiry input.zip { width:60px; }
div.inquiry input.add, div.inquiry input.email, div.inquiry textarea { width:100%; }
div.inquiry textarea { height:250px; }
div.inquiry div.inquiry_message { text-align:center; font-size:24px; margin-bottom:50px; }

/*■■■■■■■■■■■■■■■■■■■■■■■■■
 *  タブレット大
 ■■■■■■■■■■■■■■■■■■■■■■■■■*/
@media screen and (max-width:1070px) {

/* 共通 */
h2 { font-size:24px; }
.inner { width:calc(100% - 50px); padding-left:25px; padding-right:25px; }

/* メニュー →ボタン化 */
div.sp_menu_button { display:block; }
header { position:static; display:block; height:auto; }
header div.header_home { display:flex; align-items:center; height:90px; margin-left:20px; }
nav { display:none; margin-top:20px; margin-bottom:20px; }
nav ul { margin-left:25px; margin-right:25px; }

/* 本文 */
section { margin-top:0; }

/* TOPページ */
div.top_image div.top_image_text h2 p { font-size:32px; }

/* BUSINESSページ */
div.business_example a { width:calc(100% / 3 - 20px); }

/* PROFILEページ */
div.profile_top { display:block; }
div.profile_photo { margin-right:0; }
div.profile_photo img { margin-left:auto; margin-right:auto; }

/* INQUERYページ */
div.inquiry th { width:150px; background-position:right 10px top 50%; padding-right:40px; }

/* TOPへ戻る →ボタン化で位置合わせ */
#page-top { right:20px; }
}


/*■■■■■■■■■■■■■■■■■■■■■■■■■
 *  タブレット小・iPhone横
 ■■■■■■■■■■■■■■■■■■■■■■■■■*/
@media screen and (max-width:667px) {

/* 共通 */
h1 { font-size:20px; }
section { min-height:calc(100vh - 90px - 220px + 1px); }
.inner { width:calc(100% - 30px); padding-left:15px; padding-right:15px; }
h2.typewriter, h2.typewriter span { height:auto; }

/* ヘッダ */
header div.header_home a img { width:120px; }

/* メニュー →表化 */
nav { height:auto; margin-top:0; margin-bottom:0; }
nav ul { margin-left:0; margin-right:0; border-top:1px solid white; border-bottom:1px solid white; }
nav ul li { width:calc(50% - 1px); padding-top:5px; padding-bottom:5px; }
nav ul li:not(:last-child) { border-bottom:1px solid white; }
nav ul li:first-child { display:none; }
nav ul li:nth-child(even) { border-right:1px solid white; }
nav ul li a { padding-left:10px; padding-right:10px; }
nav ul li a div.nav_text_top { font-size:18px; }
nav ul li a div.nav_text_bottom { font-size:14px; }

/* フッタ */
footer { height:180px; }

/* TOPページ */
div.top_image div.top_image_text h2 p { font-size:24px; padding:24px; text-shadow:0 0 1px #fff, 0 0 2px #fff, 0 0 3px #fff, 0 0 4px #fff, 0 0 8px #fff, 0 0 12px #fff, 0 0 16px #fff, 0 0 20px #fff, 0 0 24px #fff; }

/* NEWSページ */
div.news dl.news_list dt { float:none; margin-right:0; width:auto; border-left:8px solid white; padding-left:10px; line-height:1.3; }
div.news dl.news_list dd { float:none; width:calc(100% - 20px); margin-left:20px; }

/* BUSINESSページ */
div.business_example { display:block; }
div.business_example a { width:100%; max-width:320px; margin-left:auto; margin-right:auto; }
div.business_example a:not(:last-child) { margin-bottom:10px; }

/* PROFILEページ */
div.book_wrap a { width:calc(100% / 2 - 20px); }

/* COMPANYページ */
.company_data table, .company_data thead, .company_data tbody, .company_data tr, .company_data th, .company_data td { display:block; border:0; }
.company_data table { background-color:transparent; }
.company_data tr { background-color:#0c2e4b; }
.company_data tr:not(:last-child) { margin-bottom:15px; }
.company_data th,  .company_data td { padding:5px 10px; }
.company_data th { text-align:left; font-size:115%; }
.company_data td { background-color:#5e788e; }

/* INQUERYページ */
div.inquiry table, div.inquiry tbody, div.inquiry tr, div.inquiry th, div.inquiry td { display:block; border:0; }
div.inquiry th { text-align:left; background-position:left 10px top 50%; padding-right:0; padding-left:50px; }
div.inquiry div.inquiry_message { font-size:18px; }
}


/*■■■■■■■■■■■■■■■■■■■■■■■■■
 *  スマホ
 ■■■■■■■■■■■■■■■■■■■■■■■■■*/
@media screen and (max-width:480px) {

/* 共通 */
h2 { font-size:22px; }
.button, input[type="submit"] { width:240px; margin-left:10px; margin-right:10px; }

/* TOPページ */
div.top_image { height:480px; }
div.top_image div.top_image_text h2 p { font-size:24px; }

/* PROFILEページ */
div.profile_photo_old { display:block; }
div.profile_photo_old img { margin-left:auto; margin-right:auto; }
div.profile_photo_old img:first-child { margin-left:auto; margin-right:auto; margin-bottom:10px; }
}